docs: Actualizar CLAUDE.md - v0.18.0 con paridad visual DVUI Fase 1

This commit is contained in:
reugenio 2025-12-17 01:03:51 +01:00
parent 364a7d963f
commit ebad736c75

View file

@ -78,54 +78,67 @@ Resumen breve (1-2 frases). Resultado principal.
--- ---
## ⭐ TAREA PENDIENTE: Paridad Visual con DVUI ## ⭐ Paridad Visual DVUI - Fase 1 COMPLETADA ✅
> **Prioridad**: ALTA > **Estado**: Fase 1 completada (2025-12-17)
> **Auditoría completa**: `docs/research/DVUI_AUDIT_2025-12-17.md` (570 líneas) > **Auditoría original**: `docs/research/DVUI_AUDIT_2025-12-17.md` (570 líneas)
> **Consensuado**: 2025-12-17
### El Problema ### El Problema (resuelto)
zcatgui tiene MÁS widgets que DVUI (~45 vs ~42), pero DVUI **se ve mejor** porque: zcatgui tenía MÁS widgets que DVUI pero DVUI **se veía mejor** por falta de:
1. **Esquinas redondeadas** en todos los widgets 1. **Esquinas redondeadas**`fillRoundedRect` con edge-fade AA
2. **Anti-aliasing en bordes** via edge-fade (no solo en TTF) 2. **Anti-aliasing en bordes** → edge-fade technique implementada
3. **Transiciones suaves** entre estados (hover, press) 3. **Transiciones suaves** (Fase 2)
4. **Sombras aplicadas** a paneles y modales 4. **Sombras en paneles/modales** → Panel/Modal con shadow
### Solución Acordada ### Sistema Dual Implementado
Implementar sistema dual: `RenderMode.simple` (rápido) vs `RenderMode.fancy` (bonito) ```zig
// style.zig
pub const RenderMode = enum { simple, fancy };
var global_render_mode: RenderMode = .fancy; // Default: bonito
### Fases de Implementación // Uso en widgets
if (Style.isFancy() and config.corner_radius > 0) {
ctx.pushCommand(Command.roundedRect(...));
} else {
ctx.pushCommand(Command.rect(...));
}
```
**Fase 1: Rendering Visual (CRÍTICO)** ### Widgets Actualizados
1. Crear `src/render/path.zig` - Paths con arcos para esquinas redondeadas
2. Modificar `software.zig` - AA en bordes via edge-fade technique | Widget | corner_radius | shadow | Notas |
3. Actualizar widgets - corner_radius en Button, Panel, TextInput, Select, Modal |--------|---------------|--------|-------|
| Button | 4 | - | Esquinas redondeadas en fancy mode |
| Panel | 6 | ✅ offset 4px | Borde y shadow |
| TextInput | 3 | - | Esquinas sutiles |
| Select | 3 | - | Esquinas sutiles |
| Modal | 8 | ✅ offset 6px | Diálogo + botones + input |
### Código Añadido
- `framebuffer.zig`: +350 LOC (`fillRoundedRect`, `drawRoundedRect`, edge-fade AA)
- `command.zig`: +69 LOC (nuevos comandos `rounded_rect`, `rounded_rect_outline`)
- `style.zig`: +33 LOC (RenderMode system)
- Widgets: ~120 LOC entre todos
**Total: ~590 líneas nuevas/modificadas**
### Fases Pendientes
**Fase 2: Estados Visuales** **Fase 2: Estados Visuales**
4. Integrar AnimationManager en widgets para transiciones hover/press - Integrar AnimationManager en widgets para transiciones hover/press
5. Focus ring con anti-aliasing - Focus ring con anti-aliasing
**Fase 3: Efectos** **Fase 3: Efectos Avanzados**
6. Activar Shadow API existente (`effects.zig`) en Panel/Modal - Mejorar uso de gradientes
7. Mejorar uso de gradientes - Blur effect para backdrops
**Estimación**: ~1,400 LOC nuevas/modificadas
### Técnica Edge-Fade (de DVUI)
```
Cada borde tiene 2 vértices paralelos:
- Interno: color sólido (alpha = 1.0)
- Externo: transparente (alpha = 0.0)
GPU/CPU interpola → bordes suaves sin multisampling
```
### Documentación de Referencia ### Documentación de Referencia
- `docs/research/DVUI_AUDIT_2025-12-17.md` - Auditoría completa - `docs/research/DVUI_AUDIT_2025-12-17.md` - Auditoría completa
- `docs/research/WIDGET_COMPARISON.md` - Comparativa anterior (actualizar después) - `docs/research/WIDGET_COMPARISON.md` - Comparativa (actualizar después)
--- ---
@ -175,7 +188,7 @@ ttf.drawText(fb, x, y, "Hola UTF-8: áéíóú ñ €", color, clip);
## Fuentes TTF: Estado Técnico ## Fuentes TTF: Estado Técnico
### Estado actual (v0.17.0) - FUNCIONAL ### Estado actual (v0.18.0) - FUNCIONAL
- ✅ Parsing TTF via zcatttf (cmap format 4 y 12) - ✅ Parsing TTF via zcatttf (cmap format 4 y 12)
- ✅ Rasterización con áreas trapezoidales (antialiasing) - ✅ Rasterización con áreas trapezoidales (antialiasing)
- ✅ Fuente embebida (DroidSans) - ✅ Fuente embebida (DroidSans)
@ -204,7 +217,7 @@ font.drawText(fb, x, y, "Texto con UTF-8: ñ €", color, clip);
| Campo | Valor | | Campo | Valor |
|-------|-------| |-------|-------|
| **Nombre** | zcatgui | | **Nombre** | zcatgui |
| **Versión** | v0.17.0 | | **Versión** | v0.18.0 |
| **Fecha inicio** | 2025-12-09 | | **Fecha inicio** | 2025-12-09 |
| **Estado** | ✅ COMPLETO - 37 widgets, ~35K LOC, 4 backends, TTF funcional | | **Estado** | ✅ COMPLETO - 37 widgets, ~35K LOC, 4 backends, TTF funcional |
| **Lenguaje** | Zig 0.15.2 | | **Lenguaje** | Zig 0.15.2 |
@ -766,12 +779,13 @@ const stdout = std.fs.File.stdout(); // NO std.io.getStdOut()
| 2025-12-16 | v0.16.1 | Fuente embebida: TtfFont.initEmbedded() | | 2025-12-16 | v0.16.1 | Fuente embebida: TtfFont.initEmbedded() |
| 2025-12-16 | v0.16.2 | Fix TTF: DroidSans (187KB) reemplaza AdwaitaSans (variable). Y-flip rasterización. | | 2025-12-16 | v0.16.2 | Fix TTF: DroidSans (187KB) reemplaza AdwaitaSans (variable). Y-flip rasterización. |
| 2025-12-17 | v0.17.0 | ⭐⭐⭐ Integración zcatttf v1.0 - TTF FUNCIONA PERFECTAMENTE | | 2025-12-17 | v0.17.0 | ⭐⭐⭐ Integración zcatttf v1.0 - TTF FUNCIONA PERFECTAMENTE |
| 2025-12-17 | v0.18.0 | Paridad Visual DVUI Fase 1: RenderMode dual, esquinas redondeadas, sombras |
--- ---
## ESTADO ACTUAL ## ESTADO ACTUAL
**✅ PROYECTO COMPLETADO - v0.17.0** **✅ PROYECTO COMPLETADO - v0.18.0**
> **Para detalles técnicos completos, ver `REFERENCE.md`** (1370 líneas de documentación) > **Para detalles técnicos completos, ver `REFERENCE.md`** (1370 líneas de documentación)