# Comparativa Exhaustiva: zcatgui vs DVUI vs Gio

> **Fecha**: 2025-12-09 (Actualizado)
> **Versiones**: zcatgui v0.5.0 | DVUI v0.4.0-dev | Gio v0.7.x

---

## RESUMEN EJECUTIVO

| Métrica | zcatgui | DVUI | Gio |
|---------|---------|------|-----|
| **LOC** | ~12,000 | ~15,000 | ~50,000 |
| **Widgets** | 17 | 35+ | 60+ |
| **Lenguaje** | Zig 0.15.2 | Zig 0.15.1 | Go |
| **Rendering** | Software | GPU + CPU fallback | GPU (Pathfinder) |
| **Backends** | 1 (SDL2) | 7 | 6+ |
| **Madurez** | Alpha | Production-ready | Production-ready |

### Conclusión Principal

**zcatgui tiene el 48% de los widgets de DVUI** y el **28% de Gio**, pero incluye características únicas:
- Sistema de Macros (ninguna otra librería lo tiene)
- Lego Panels (arquitectura de composición avanzada)
- Software rendering first (máxima compatibilidad SSH)
- Table con dirty tracking, sorting, validation, multi-select (la más avanzada)

---

## 1. COMPARATIVA DE WIDGETS

### 1.1 Widgets Básicos

| Widget | zcatgui | DVUI | Gio | Notas |
|--------|:-------:|:----:|:---:|-------|
| Label | ✅ | ✅ | ✅ | Todas tienen |
| Button | ✅ | ✅ | ✅ | DVUI: multi-line, Gio: Material |
| Checkbox | ✅ | ✅ | ✅ | |
| Radio Button | ✅ | ✅ | ✅ | |
| Text Input | ✅ | ✅ | ✅ | DVUI: mejor touch |
| Slider | ✅ | ✅ | ✅ | DVUI: SliderEntry combo |
| Select/Dropdown | ✅ | ✅ | ✅ | |

**Estado**: ✅ **100% paridad en widgets básicos**

### 1.2 Widgets de Contenedor/Layout

| Widget | zcatgui | DVUI | Gio | Notas |
|--------|:-------:|:----:|:---:|-------|
| Panel/Box | ✅ | ✅ | ✅ | |
| Split (H/V) | ✅ | ✅ Paned | ❌ | Gio usa Flex |
| Tabs | ✅ | ✅ | ❌ | Gio: solo en x/component |
| ScrollArea | ✅ | ✅ | ✅ List | |
| Modal/Dialog | ✅ | ✅ | ❌ | Gio: manual |
| Grid Layout | ✅ Panels | ✅ | ✅ | |

**Estado**: ✅ **100% paridad en contenedores**

### 1.3 Widgets de Datos/Tablas

| Widget | zcatgui | DVUI | Gio | Notas |
|--------|:-------:|:----:|:---:|-------|
| List (selectable) | ✅ | ✅ | ✅ | |
| Table básica | ✅ | ✅ Grid | ✅ x/component | |
| Table editable | ✅ | ❌ | ❌ | **zcatgui único** |
| Table sorting | ✅ | ❌ | ❌ | **zcatgui único** |
| Table multi-select | ✅ | ❌ | ❌ | **zcatgui único** |
| Table validation | ✅ | ❌ | ❌ | **zcatgui único** |
| Table dirty tracking | ✅ | ❌ | ❌ | **zcatgui único** |
| Virtual scrolling | ❌ | ✅ | ✅ | Pendiente |

**Estado**: ⚠️ **zcatgui tiene Table más avanzada, falta virtualización**

### 1.4 Widgets de Entrada Avanzados

| Widget | zcatgui | DVUI | Gio | Notas |
|--------|:-------:|:----:|:---:|-------|
| AutoComplete | ✅ | ✅ ComboBox | ❌ | prefix/contains/fuzzy |
| Menu | ✅ | ✅ | ❌ | Con submenús |
| NumberEntry | ❌ | ✅ | ❌ | Falta |
| DatePicker | ❌ | ❌ | ❌ | Ninguna tiene |
| ColorPicker | ❌ | ❌ | ❌ | Ninguna tiene |
| MultilineText | ❌ | ✅ | ✅ Editor | **Falta** |

**Estado**: ⚠️ **Falta NumberEntry y MultilineText**

### 1.5 Widgets de Navegación

| Widget | zcatgui | DVUI | Gio | Notas |
|--------|:-------:|:----:|:---:|-------|
| Menu Bar | ✅ | ✅ | ❌ | Gio: x/component |
| Context Menu | ✅ | ✅ Popup | ✅ | |
| Submenu | ✅ | ✅ | ❌ | |
| Tabs | ✅ | ✅ | ❌ | Con keyboard nav |
| AppBar | ❌ | ❌ | ✅ | Material Design |
| NavDrawer | ❌ | ❌ | ✅ | Material Design |
| Breadcrumb | ❌ | ❌ | ❌ | Ninguna |

**Estado**: ✅ **Paridad con DVUI en navegación**

### 1.6 Widgets de Feedback

| Widget | zcatgui | DVUI | Gio | Notas |
|--------|:-------:|:----:|:---:|-------|
| Tooltip | ❌ | ✅ | ✅ | **Falta** |
| Toast | ❌ | ✅ | ❌ | Falta |
| ProgressBar | ❌ | ❌ | ✅ | Falta |
| ProgressCircle | ❌ | ❌ | ✅ | Falta |
| Loader/Spinner | ❌ | ❌ | ✅ | Falta |

**Estado**: ❌ **Falta toda esta categoría**

### 1.7 Widgets Especializados

| Widget | zcatgui | DVUI | Gio | Notas |
|--------|:-------:|:----:|:---:|-------|
| ReorderableList | ❌ | ✅ | ❌ | Drag to reorder |
| Tree View | ❌ | ✅ | ❌ | Hierarchical |
| Icon | ❌ | ✅ TinyVG | ✅ | Vector icons |
| Image | ❌ | ✅ stb_image | ✅ | Image display |
| Floating Window | ❌ | ✅ | ✅ | Multi-window |

**Estado**: ❌ **Faltan widgets especializados**

---

## 2. COMPARATIVA DE ARQUITECTURA

### 2.1 Core Architecture

| Feature | zcatgui | DVUI | Gio | Notas |
|---------|:-------:|:----:|:---:|-------|
| Immediate Mode | ✅ | ✅ | ✅ | Todas |
| Command List | ✅ | ✅ | ✅ Ops | |
| Arena Allocator | ❌ | ✅ | N/A | Go tiene GC |
| Widget ID System | ✅ Hash | ✅ Hash | ✅ Tags | |
| Clipping Stack | ✅ | ✅ | ✅ | |
| Data Persistence | ❌ | ✅ | N/A | Entre frames |

### 2.2 Layout System

| Feature | zcatgui | DVUI | Gio | Notas |
|---------|:-------:|:----:|:---:|-------|
| Constraint-based | ✅ | ✅ | ✅ | |
| Flex layout | ✅ | ✅ Box | ✅ | |
| Percentage | ✅ | ✅ | ✅ | |
| Min/Max size | ✅ | ✅ | ✅ | |
| Fill/Expand | ✅ | ✅ | ✅ | |
| Gravity/Alignment | ❌ | ✅ | ✅ | **Falta** |
| SpaceAround/Between | ❌ | ❌ | ✅ | Gio único |

### 2.3 Input Handling

| Feature | zcatgui | DVUI | Gio | Notas |
|---------|:-------:|:----:|:---:|-------|
| Keyboard events | ✅ | ✅ | ✅ | |
| Mouse events | ✅ | ✅ | ✅ | |
| Touch events | ❌ | ✅ | ✅ | **Falta** |
| Gestures | ❌ | ✅ | ✅ | **Falta** |
| Focus management | ✅ | ✅ | ✅ | |
| Tab navigation | ✅ | ✅ | ✅ | |
| Focus groups | ❌ | ✅ | ✅ | **Falta** |

### 2.4 Rendering

| Feature | zcatgui | DVUI | Gio | Notas |
|---------|:-------:|:----:|:---:|-------|
| Software renderer | ✅ | ✅ CPU | ✅ cpu pkg | |
| GPU renderer | ❌ | ✅ | ✅ | Opcional futuro |
| Deferred rendering | ❌ | ✅ | ✅ | Para floating |
| Anti-aliasing | ❌ | ✅ | ✅ | **Falta** |
| Gradients | ❌ | ❌ | ✅ | Gio único |
| Opacity/Alpha | ✅ | ✅ | ✅ | |

### 2.5 Text & Fonts

| Feature | zcatgui | DVUI | Gio | Notas |
|---------|:-------:|:----:|:---:|-------|
| Bitmap fonts | ✅ 8x8 | ✅ | ❌ | |
| TTF support | ✅ básico | ✅ stb/FreeType | ✅ OpenType | |
| Font atlas | ❌ | ✅ | ✅ | **Falta** |
| Text shaping | ❌ | ❌ | ✅ HarfBuzz | Gio único |
| RTL/BiDi | ❌ | ❌ | ✅ | Gio único |
| Kerning | ❌ | ✅ | ✅ | **Falta** |

### 2.6 Theming

| Feature | zcatgui | DVUI | Gio | Notas |
|---------|:-------:|:----:|:---:|-------|
| Theme system | ✅ | ✅ | ✅ | |
| Pre-built themes | ✅ 5 | ✅ | ✅ | dark/light/solarized |
| Runtime switching | ✅ | ✅ | ✅ | |
| Per-widget override | ✅ | ✅ | ✅ | |
| High contrast | ✅ | ❌ | ❌ | **zcatgui único** |

---

## 3. FEATURES ÚNICAS

### 3.1 zcatgui - Features Exclusivas

| Feature | Descripción | Valor |
|---------|-------------|-------|
| **Sistema de Macros** | Grabación/reproducción de teclas como Vim | ⭐⭐⭐ Único |
| **Lego Panels** | Arquitectura de composición de paneles | ⭐⭐⭐ Único |
| **DataManager** | Observer pattern para paneles | ⭐⭐ |
| **Table con Dirty Tracking** | RowState: new/modified/deleted | ⭐⭐⭐ |
| **Table con Validation** | Validación en tiempo real de celdas | ⭐⭐ |
| **Table con Sorting** | Click en header para ordenar | ⭐⭐ |
| **Table Multi-select** | Selección múltiple de filas | ⭐⭐ |
| **High Contrast Theme** | Accesibilidad visual | ⭐⭐ |
| **SSH-first Design** | Software rendering garantizado | ⭐⭐⭐ |

### 3.2 DVUI - Features que zcatgui NO tiene

| Feature | Descripción | Prioridad para implementar |
|---------|-------------|---------------------------|
| **Fire-and-forget Dialogs** | Dialogs desde cualquier punto del código | Media |
| **structEntry** | Generación automática de UI desde structs | Alta |
| **AccessKit** | Soporte screen readers | Baja |
| **Virtual Scrolling** | Listas de millones de items | Alta |
| **ReorderableList** | Drag to reorder | Media |
| **Tree View** | Navegación jerárquica | Media |
| **Tooltip** | Hover text | Alta |
| **Toast** | Notificaciones temporales | Media |
| **TinyVG Icons** | Iconos vectoriales | Media |
| **Image Widget** | Mostrar imágenes | Alta |
| **Animation/Easing** | Sistema de animaciones | Media |
| **Testing Framework** | Tests automatizados de UI | Baja |
| **Multi-backend** | 7 backends (SDL2/3, Web, DirectX, etc.) | Baja |

### 3.3 Gio - Features que zcatgui NO tiene

| Feature | Descripción | Prioridad para implementar |
|---------|-------------|---------------------------|
| **HarfBuzz Text Shaping** | Soporte idiomas complejos | Baja |
| **RTL/BiDi** | Árabe, Hebreo | Baja |
| **ProgressBar/Circle** | Indicadores de progreso | Alta |
| **Loader/Spinner** | Indicador de carga | Media |
| **Material Design** | Widgets estilo Material | Baja |
| **AppBar/NavDrawer** | Navegación Material | Baja |
| **Bezier Paths** | Dibujo vectorial arbitrario | Media |
| **Linear Gradients** | Degradados | Baja |
| **Clipboard** | Copy/paste sistema | Alta |
| **System Fonts** | Usar fuentes del sistema | Media |

---

## 4. COMPARATIVA DE APIs

### 4.1 Crear un Botón

**zcatgui:**
```zig
if (zcatgui.button(ctx, "Click me")) {
    // clicked
}

// Con config
if (zcatgui.buttonEx(ctx, "Save", .{
    .importance = .primary,
    .disabled = false,
})) {
    save();
}
```

**DVUI:**
```zig
if (dvui.button(@src(), .{}, .{ .label = "Click me" })) {
    // clicked
}
```

**Gio:**
```go
btn := material.Button(th, &clickable, "Click me")
if clickable.Clicked() {
    // clicked
}
btn.Layout(gtx)
```

**Análisis**: zcatgui y DVUI muy similares. Gio separa estado de rendering.

### 4.2 Crear una Tabla Editable

**zcatgui:**
```zig
const columns = [_]table.Column{
    .{ .name = "Name", .width = 200, .editable = true, .sortable = true },
    .{ .name = "Age", .width = 100, .type = .number },
};

var result = table.table(ctx, bounds, &state, &columns, data, .{
    .allow_edit = true,
    .allow_sorting = true,
    .allow_row_operations = true,
    .allow_multi_select = true,
});

if (result.cell_edited) {
    // Handle edit at result.edit_row, result.edit_col
}
if (result.sort_changed) {
    // Re-sort data by result.sort_column, result.sort_direction
}
if (result.row_deleted) {
    // Delete rows in result.delete_rows[0..result.delete_count]
}
```

**DVUI:**
```zig
// DVUI no tiene table editable built-in
// Hay que componer con Grid + TextEntry manualmente
var grid = dvui.grid(@src(), .{});
defer grid.deinit();
// Manual cell-by-cell rendering...
// No sorting, no validation, no dirty tracking
```

**Gio:**
```go
// Gio x/component tiene Table básica
// Sin edición in-situ, sin sorting built-in
table := component.Table(th, &state)
table.Layout(gtx, len(data), func(gtx, row, col) {
    // Manual rendering per cell
})
```

**Análisis**: ✅ **zcatgui tiene la Table más avanzada de las tres**

### 4.3 Sistema de Paneles

**zcatgui (Lego Panels):**
```zig
// Definir panel autónomo
const customer_list = panels.createPanel(.{
    .id = "customer_list",
    .panel_type = .list,
    .entity_type = "Customer",
    .build_fn = buildCustomerList,
    .data_change_fn = onCustomerChanged,
});

// Composición
var split = panels.SplitComposite{
    .panels = .{ customer_list, customer_detail },
    .ratio = 0.4,
};

// Comunicación automática via DataManager
dm.notifySelect("Customer", selected_customer);
// -> customer_detail se actualiza automáticamente
```

**DVUI/Gio:** No tienen equivalente. Composición manual.

**Análisis**: ✅ **zcatgui único en arquitectura de paneles**

---

## 5. WIDGETS PENDIENTES DE IMPLEMENTAR

### 5.1 Prioridad ALTA (Necesarios para Simifactu)

| Widget | LOC estimadas | Complejidad | Notas |
|--------|---------------|-------------|-------|
| **Tooltip** | ~100 | Baja | Hover text |
| **ProgressBar** | ~80 | Baja | Indicador progreso |
| **NumberEntry** | ~150 | Media | Input numérico validado |
| **MultilineText** | ~300 | Alta | Editor multi-línea |
| **Image** | ~150 | Media | Mostrar imágenes |
| **Virtual Scroll** | ~200 | Alta | Para listas grandes |
| **Clipboard** | ~100 | Media | Copy/paste |

**Total estimado**: ~1,080 LOC

### 5.2 Prioridad MEDIA

| Widget | LOC estimadas | Complejidad | Notas |
|--------|---------------|-------------|-------|
| **Toast** | ~120 | Media | Notificaciones |
| **Tree View** | ~250 | Alta | Jerárquico |
| **ReorderableList** | ~200 | Alta | Drag reorder |
| **Icon** | ~100 | Media | Vector icons |
| **Animation** | ~200 | Media | Easing system |

**Total estimado**: ~870 LOC

### 5.3 Prioridad BAJA

| Widget | LOC estimadas | Complejidad | Notas |
|--------|---------------|-------------|-------|
| Floating Window | ~200 | Alta | Multi-window |
| structEntry | ~400 | Alta | Auto UI gen |
| GPU Renderer | ~500 | Muy Alta | OpenGL/Vulkan |
| Touch Gestures | ~300 | Alta | Mobile |

---

## 6. MÉTRICAS DE COMPLETITUD

### 6.1 vs DVUI

```
Widgets implementados:     17/35 = 48.6%
Core features:             85%
Layout system:             90%
Input handling:            70%
Rendering:                 60%
Text/Fonts:                50%
Theming:                   100%

PROMEDIO PONDERADO:        ~70%
```

### 6.2 vs Gio

```
Widgets implementados:     17/60 = 28.3%
Core features:             80%
Layout system:             75%
Input handling:            60%
Rendering:                 50%
Text/Fonts:                35%
Theming:                   90%

PROMEDIO PONDERADO:        ~55%
```

### 6.3 Features Únicas de zcatgui

```
Macro System:              100% (único)
Lego Panels:               100% (único)
DataManager:               100% (único)
Table avanzada:            100% (mejor que ambas)
SSH-first:                 100% (único enfoque)

VALOR DIFERENCIAL:         MUY ALTO
```

---

## 7. INVENTARIO ACTUAL zcatgui v0.5.0

### Widgets Implementados (17)

| # | Widget | Archivo | Features |
|---|--------|---------|----------|
| 1 | Label | `label.zig` | Alignment, colors, padding |
| 2 | Button | `button.zig` | Importance levels, disabled |
| 3 | TextInput | `text_input.zig` | Cursor, selection |
| 4 | Checkbox | `checkbox.zig` | Toggle |
| 5 | Select | `select.zig` | Dropdown, keyboard nav |
| 6 | List | `list.zig` | Selection, scroll, keyboard |
| 7 | Focus | `focus.zig` | Tab navigation |
| 8 | Table | `table.zig` | Edit, sort, validate, multi-select, dirty |
| 9 | Split | `split.zig` | H/V, draggable |
| 10 | Panel | `panel.zig` | Title, collapse, close |
| 11 | Modal | `modal.zig` | Alert, confirm, input |
| 12 | AutoComplete | `autocomplete.zig` | Prefix, contains, fuzzy |
| 13 | Slider | `slider.zig` | H/V, range, step |
| 14 | Scroll | `scroll.zig` | Area, scrollbar |
| 15 | Menu | `menu.zig` | Bar, context, submenu |
| 16 | Tabs | `tabs.zig` | Top/bottom/left/right, closable |
| 17 | Radio | `radio.zig` | Groups, H/V layout |

### Core Features

| Feature | Estado |
|---------|--------|
| Context (immediate mode) | ✅ |
| Layout (constraint-based) | ✅ |
| Style (colors, themes) | ✅ |
| Input (keyboard, mouse) | ✅ |
| Commands (draw list) | ✅ |
| Framebuffer | ✅ |
| Software Renderer | ✅ |
| Font (bitmap 8x8) | ✅ |
| TTF (basic parsing) | ✅ |
| SDL2 Backend | ✅ |
| Macro System | ✅ |

### Panel System

| Feature | Estado |
|---------|--------|
| AutonomousPanel | ✅ |
| VerticalComposite | ✅ |
| HorizontalComposite | ✅ |
| SplitComposite | ✅ |
| TabComposite | ✅ |
| GridComposite | ✅ |
| DataManager | ✅ |

### Themes

| Theme | Estado |
|-------|--------|
| dark | ✅ |
| light | ✅ |
| high_contrast_dark | ✅ |
| solarized_dark | ✅ |
| solarized_light | ✅ |

---

## 8. ROADMAP SUGERIDO

### Fase 1: Paridad Básica (1 semana)
- [ ] Tooltip
- [ ] ProgressBar
- [ ] Clipboard support

### Fase 2: Widgets Avanzados (2 semanas)
- [ ] MultilineText (Editor)
- [ ] Image widget
- [ ] Tree View
- [ ] NumberEntry
- [ ] Virtual scrolling

### Fase 3: Pulido (1 semana)
- [ ] Font atlas para TTF
- [ ] Anti-aliasing básico
- [ ] Toast notifications
- [ ] Animation system

### Fase 4: Opcional
- [ ] GPU renderer
- [ ] Touch gestures
- [ ] structEntry (auto UI)
- [ ] Accessibility

---

## 9. CONCLUSIONES

### Fortalezas de zcatgui

1. **Sistema de Macros** - Ninguna otra librería lo tiene
2. **Lego Panels** - Arquitectura superior para apps complejas
3. **Table Widget** - La más completa de las tres (edit, sort, validate, multi-select, dirty)
4. **SSH-first** - Garantiza funcionamiento remoto
5. **Código limpio** - 12K LOC vs 15K/50K
6. **Temas completos** - 5 temas incluyendo high-contrast

### Debilidades a Abordar

1. **Faltan widgets de feedback** - Tooltip, Toast, Progress
2. **Text rendering básico** - Sin font atlas ni anti-aliasing
3. **Sin virtualización** - Listas grandes serán lentas
4. **Un solo backend** - Solo SDL2
5. **Sin touch/gestures** - Solo desktop

### Recomendación Final

**zcatgui está al 70% de paridad con DVUI** pero tiene características únicas que lo hacen valioso:

- Para **Simifactu**: zcatgui es **SUFICIENTE** con los 17 widgets actuales + Table avanzada + Lego Panels
- Para **uso general**: Necesita ~1,000 LOC más de widgets (Tooltip, Progress, Image, MultilineText)
- Para **competir con DVUI**: Necesita virtualización y mejoras de rendering

**El sistema de macros y la arquitectura Lego Panels justifican el desarrollo propio** en lugar de usar DVUI directamente.

---

## Referencias

- [DVUI GitHub](https://github.com/david-vanderson/dvui)
- [DVUI Deep Wiki](https://deepwiki.com/david-vanderson/dvui)
- [Gio UI](https://gioui.org/)
- [Gio Architecture](https://gioui.org/doc/architecture)
- [zcatui](../../../zcatui/)
- [Simifactu Analysis](./SIMIFACTU_FYNE_ANALYSIS.md)