zcatgui/docs/research/WIDGET_COMPARISON.md

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:

if (zcatgui.button(ctx, "Click me")) {
    // clicked
}

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

DVUI:

if (dvui.button(@src(), .{}, .{ .label = "Click me" })) {
    // clicked
}

Gio:

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:

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:

// 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:

// 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):

// 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
• DVUI Deep Wiki
• Gio UI
• Gio Architecture
• zcatui
• Simifactu Analysis