zcatgui/docs/research/WIDGET_COMPARISON.md
reugenio 6ac3856ae2 feat: zcatgui v0.5.0 - Complete widget library + research docs
Widgets implemented (13 total):
- Label: Static text with alignment
- Button: With importance levels (primary/normal/danger)
- TextInput: Single-line text entry with cursor
- Checkbox: Boolean toggle
- Select: Dropdown selection
- List: Scrollable selectable list
- Focus: Focus manager with tab navigation
- Table: Editable table with dirty tracking, keyboard nav
- Split: HSplit/VSplit draggable panels
- Panel: Container with title bar, collapsible
- Modal: Dialogs (alert, confirm, inputDialog)
- AutoComplete: ComboBox with prefix/contains/fuzzy matching

Core improvements:
- InputState now tracks keyboard state (keys_down, key_events)
- Full keyboard navigation for Table widget

Research documentation:
- WIDGET_COMPARISON.md: zcatgui vs DVUI vs Gio vs zcatui
- SIMIFACTU_ADVANCEDTABLE.md: Analysis of 10K LOC table component
- LEGO_PANELS_SYSTEM.md: Modular panel composition architecture

Examples:
- widgets_demo.zig: All basic widgets showcase
- table_demo.zig: Table, Split, Panel demonstration

All tests passing.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2025-12-09 11:00:49 +01:00

316 lines
10 KiB
Markdown

# Comparativa de Widgets: zcatgui vs DVUI vs Gio vs zcatui
> Investigacion realizada: 2025-12-09
> Proposito: Identificar widgets faltantes en zcatgui comparando con otras librerias
---
## Resumen Ejecutivo
| Libreria | Lenguaje | Widgets | Notas |
|----------|----------|---------|-------|
| **zcatgui** | Zig | 11 | Nuestro proyecto - EN DESARROLLO |
| **DVUI** | Zig | ~20 | Unica referencia GUI Zig nativa |
| **Gio** | Go | ~25 | Immediate mode moderno, Material Design |
| **zcatui** | Zig | 35 | Nuestro proyecto hermano TUI |
---
## 1. zcatgui - Estado Actual (v0.4.0)
### Widgets Implementados (11)
| Widget | Archivo | Estado | Descripcion |
|--------|---------|--------|-------------|
| Label | `label.zig` | OK | Texto estatico con alineacion |
| Button | `button.zig` | OK | Con importancia (primary/normal/danger) |
| TextInput | `text_input.zig` | OK | Entry de texto con cursor |
| Checkbox | `checkbox.zig` | OK | Toggle booleano |
| Select | `select.zig` | OK | Dropdown selection |
| List | `list.zig` | OK | Lista seleccionable |
| Table | `table.zig` | OK | Edicion in-situ, dirty tracking |
| Panel | `panel.zig` | OK | Container con titulo y bordes |
| Split | `split.zig` | OK | HSplit/VSplit draggable |
| Modal | `modal.zig` | OK | Dialogos modales (alert, confirm, input) |
| Focus | `focus.zig` | OK | Focus manager, tab navigation |
---
## 2. DVUI - Widgets Disponibles
Fuente: [DVUI GitHub](https://github.com/david-vanderson/dvui)
### Widgets en DVUI
| Widget | En zcatgui | Prioridad | Notas |
|--------|------------|-----------|-------|
| Button | OK | - | Ya implementado |
| Checkbox | OK | - | Ya implementado |
| Radio Buttons | NO | MEDIA | Falta implementar |
| Text Entry (single) | OK | - | Ya implementado |
| Text Entry (multi) | NO | ALTA | TextArea falta |
| Number Entry | NO | ALTA | Input numerico validado |
| Text Layout | NO | MEDIA | Texto con partes clickables |
| Floating Window | NO | MEDIA | Ventanas draggables |
| Menu | NO | ALTA | Menus dropdown |
| Popup/Context | OK | - | Modal implementado |
| Scroll Area | NO | ALTA | Contenido scrollable |
| Slider | NO | ALTA | Rango numerico |
| SliderEntry | NO | MEDIA | Slider + text entry combo |
| Toast | NO | BAJA | Notificaciones temporales |
| Panes (draggable) | OK | - | Split implementado |
| Dropdown | OK | - | Select implementado |
| Combo Box | NO | ALTA | Dropdown + text entry |
| Reorderable Lists | NO | MEDIA | Drag to reorder |
| Data Grid | OK | - | Table implementado |
| Tooltips | NO | MEDIA | Hover info |
### Widgets DVUI Faltantes en zcatgui (Prioritarios)
1. **Menu** - Critico para apps
2. **Scroll Area** - Necesario para contenido largo
3. **Slider** - Control numerico comun
4. **TextArea** - Input multilinea
5. **Number Entry** - Input con validacion numerica
6. **Combo Box** - AutoComplete (requerido por Simifactu)
7. **Radio Buttons** - Seleccion exclusiva
---
## 3. Gio (Go) - Widgets Disponibles
Fuente: [docs/research/GIO_UI_ANALYSIS.md](./GIO_UI_ANALYSIS.md)
### Widget State (`gioui.org/widget`)
| Widget | En zcatgui | Prioridad | Notas |
|--------|------------|-----------|-------|
| Clickable | OK | - | Button usa esto |
| Editor | OK | - | TextInput implementado |
| Selectable | NO | BAJA | Texto seleccionable |
| Float | NO | ALTA | Para sliders |
| Bool | OK | - | Checkbox |
| Enum | NO | MEDIA | Radio buttons |
| List | OK | - | List implementado |
| Scrollbar | NO | ALTA | Falta |
| Draggable | NO | MEDIA | Drag & drop |
| Decorations | NO | BAJA | Decoraciones ventana |
| Icon | NO | BAJA | Iconos vectoriales |
### Material Widgets (`gioui.org/widget/material`)
| Widget | En zcatgui | Prioridad | Notas |
|--------|------------|-----------|-------|
| Label, H1-H6 | PARCIAL | MEDIA | Solo Label basico |
| Button, IconButton | OK | - | Button implementado |
| Editor | OK | - | TextInput |
| CheckBox | OK | - | Checkbox |
| RadioButton | NO | MEDIA | Falta |
| Switch | NO | BAJA | Toggle estilo movil |
| Slider | NO | ALTA | Falta |
| List, Scrollbar | PARCIAL | ALTA | List OK, Scrollbar falta |
| ProgressBar | NO | MEDIA | Indicador progreso |
| ProgressCircle | NO | BAJA | Spinner circular |
| Loader | NO | BAJA | Spinner |
### Extended Components (`gioui.org/x/component`)
| Widget | En zcatgui | Prioridad | Notas |
|--------|------------|-----------|-------|
| AppBar | NO | MEDIA | Barra aplicacion |
| NavDrawer | NO | MEDIA | Panel navegacion |
| Menu, MenuItem | NO | ALTA | Menus |
| ContextArea | NO | MEDIA | Menu contextual |
| Grid, Table | OK | - | Table implementado |
| Sheet, Surface | NO | BAJA | Contenedores |
| TextField | OK | - | TextInput con label |
| Tooltip | NO | MEDIA | Hover info |
| Discloser | NO | MEDIA | Expandible/collapsible |
| Divider | NO | BAJA | Separador visual |
| ModalLayer, Scrim | OK | - | Modal implementado |
### Widgets Gio Faltantes en zcatgui (Prioritarios)
1. **Menu, MenuItem** - Navegacion aplicacion
2. **Scrollbar** - Contenido largo
3. **Slider** - Control numerico
4. **RadioButton** - Seleccion exclusiva
5. **ProgressBar** - Indicadores
6. **Tooltip** - Informacion contextual
7. **NavDrawer** - Navegacion lateral
---
## 4. zcatui (TUI) - Widgets Disponibles
Proyecto hermano: `/mnt/cello2/arno/re/recode/zig/zcatui/`
### Todos los Widgets en zcatui (35)
| Widget | En zcatgui | Prioridad | Descripcion |
|--------|------------|-----------|-------------|
| `paragraph.zig` | NO | BAJA | Texto con wrapping |
| `list.zig` | OK | - | Lista seleccionable |
| `gauge.zig` | NO | MEDIA | Indicador tipo gauge |
| `tabs.zig` | NO | ALTA | Tab navigation |
| `sparkline.zig` | NO | BAJA | Mini grafico linea |
| `scrollbar.zig` | NO | ALTA | Scrollbar |
| `barchart.zig` | NO | BAJA | Grafico barras |
| `canvas.zig` | NO | BAJA | Dibujo libre |
| `chart.zig` | NO | BAJA | Graficos genericos |
| `clear.zig` | NO | - | Utilidad limpieza |
| `calendar.zig` | NO | MEDIA | Selector fecha |
| `table.zig` | OK | - | Tabla |
| `input.zig` | OK | - | TextInput |
| `popup.zig` | OK | - | Modal |
| `menu.zig` | NO | ALTA | Menu |
| `tooltip.zig` | NO | MEDIA | Tooltip |
| `tree.zig` | NO | ALTA | TreeView |
| `filepicker.zig` | NO | MEDIA | Selector archivos |
| `scroll.zig` | NO | ALTA | ScrollArea |
| `textarea.zig` | NO | ALTA | Input multilinea |
| `select.zig` | OK | - | Dropdown |
| `slider.zig` | NO | ALTA | Slider |
| `panel.zig` | OK | - | Container |
| `checkbox.zig` | OK | - | Checkbox |
| `statusbar.zig` | NO | MEDIA | Barra estado |
| `block.zig` | NO | BAJA | Container basico |
| `spinner.zig` | NO | MEDIA | Indicador carga |
| `help.zig` | NO | BAJA | Panel ayuda |
| `progress.zig` | NO | MEDIA | Barra progreso |
| `markdown.zig` | NO | BAJA | Render markdown |
| `syntax.zig` | NO | BAJA | Syntax highlighting |
| `viewport.zig` | NO | MEDIA | Area scrollable |
| `logo.zig` | NO | BAJA | Logo ASCII art |
| `dirtree.zig` | NO | MEDIA | Arbol directorios |
### Widgets zcatui Faltantes en zcatgui (Prioritarios)
1. **Tabs** - Navegacion por pestanas
2. **Menu** - Menus dropdown
3. **Tree** - Vista arbol
4. **ScrollArea** - Contenido scrollable
5. **TextArea** - Input multilinea
6. **Slider** - Control numerico
7. **Scrollbar** - Indicador scroll
8. **Calendar** - Selector fecha
9. **ProgressBar** - Indicador progreso
10. **Spinner** - Indicador carga
---
## 5. Analisis Consolidado: Widgets Faltantes
### Prioridad CRITICA (Necesarios para MVP Simifactu)
| Widget | DVUI | Gio | zcatui | Descripcion |
|--------|------|-----|--------|-------------|
| **Menu** | SI | SI | SI | Menus aplicacion |
| **ScrollArea** | SI | SI | SI | Contenido scrollable |
| **ComboBox/AutoComplete** | SI | NO | NO | Dropdown + typing |
| **Tabs** | NO | SI | SI | Tab navigation |
### Prioridad ALTA
| Widget | DVUI | Gio | zcatui | Descripcion |
|--------|------|-----|--------|-------------|
| **Slider** | SI | SI | SI | Control numerico |
| **TextArea** | SI | SI | SI | Input multilinea |
| **Tree** | NO | NO | SI | Vista jerarquica |
| **RadioButton** | SI | SI | NO | Seleccion exclusiva |
| **Scrollbar** | SI | SI | SI | Indicador scroll |
| **NumberEntry** | SI | NO | NO | Input numerico validado |
### Prioridad MEDIA
| Widget | DVUI | Gio | zcatui | Descripcion |
|--------|------|-----|--------|-------------|
| **Tooltip** | SI | SI | SI | Hover info |
| **ProgressBar** | NO | SI | SI | Indicador progreso |
| **Spinner** | NO | SI | SI | Indicador carga |
| **Calendar** | NO | NO | SI | Selector fecha |
| **StatusBar** | NO | NO | SI | Barra estado |
| **NavDrawer** | NO | SI | NO | Panel navegacion |
### Prioridad BAJA
| Widget | Razon |
|--------|-------|
| Gauge | Especifico TUI |
| Sparkline | Grafico especializado |
| BarChart | Grafico especializado |
| Canvas | Dibujo libre |
| Markdown | Render especializado |
| Syntax | Highlighting especializado |
| Logo | ASCII art |
---
## 6. Roadmap de Implementacion
### Fase Inmediata (v0.5.0)
1. **AutoComplete/ComboBox** - Requerido por Simifactu
2. **Slider** - Control basico muy usado
3. **Scrollbar** + **ScrollArea** - Contenido largo
### Fase Siguiente (v0.6.0)
4. **Menu** - Navegacion aplicacion
5. **Tabs** - Navegacion por pestanas
6. **RadioButton** - Seleccion exclusiva
### Fase Posterior (v0.7.0)
7. **TextArea** - Input multilinea
8. **Tree** - Vista jerarquica
9. **NumberEntry** - Input numerico validado
10. **ProgressBar** + **Spinner** - Indicadores
### Fase Final (v0.8.0)
11. **Tooltip** - Hover info
12. **Calendar** - Selector fecha
13. **StatusBar** - Barra estado
14. **FilePicker** - Selector archivos
---
## 7. Conclusiones
### Widgets Unicos que Tenemos
- **Macro System** - Ninguna otra libreria tiene grabacion/reproduccion de macros integrada
### Gaps Criticos
1. **AutoComplete/ComboBox** - DVUI lo tiene, Simifactu lo necesita
2. **Menu** - Todas las librerias maduras lo tienen
3. **ScrollArea** - Fundamental para cualquier app seria
4. **Tabs** - Navegacion standard
### Fortalezas Actuales
- Table con edicion y dirty tracking (mejor que DVUI)
- Modal completo (alert, confirm, input)
- Split panels funcionales
- Sistema de macros (unico)
### Estimacion Esfuerzo
| Fase | Widgets | Estimacion |
|------|---------|------------|
| v0.5.0 | AutoComplete, Slider, ScrollArea | 1 semana |
| v0.6.0 | Menu, Tabs, RadioButton | 1 semana |
| v0.7.0 | TextArea, Tree, NumberEntry, Progress | 1.5 semanas |
| v0.8.0 | Tooltip, Calendar, StatusBar, FilePicker | 1 semana |
| **Total** | **16 widgets** | **~4.5 semanas** |
---
## Referencias
- [DVUI GitHub](https://github.com/david-vanderson/dvui)
- [Gio UI](https://gioui.org/)
- [zcatui](../../../zcatui/)
- [Simifactu Analysis](./SIMIFACTU_FYNE_ANALYSIS.md)