From ebad736c756afee44e51255728ae9632ec65f3da Mon Sep 17 00:00:00 2001
From: reugenio <yo@reugenio.com>
Date: Wed, 17 Dec 2025 01:03:51 +0100
Subject: [PATCH] docs: Actualizar CLAUDE.md - v0.18.0 con paridad visual DVUI
 Fase 1

---
 CLAUDE.md | 88 ++++++++++++++++++++++++++++++++-----------------------
 1 file changed, 51 insertions(+), 37 deletions(-)

diff --git a/CLAUDE.md b/CLAUDE.md
index 5dab6c7..a093da6 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -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
-> **Auditoría completa**: `docs/research/DVUI_AUDIT_2025-12-17.md` (570 líneas)
-> **Consensuado**: 2025-12-17
+> **Estado**: Fase 1 completada (2025-12-17)
+> **Auditoría original**: `docs/research/DVUI_AUDIT_2025-12-17.md` (570 líneas)
 
-### El Problema
+### El Problema (resuelto)
 
-zcatgui tiene MÁS widgets que DVUI (~45 vs ~42), pero DVUI **se ve mejor** porque:
-1. **Esquinas redondeadas** en todos los widgets
-2. **Anti-aliasing en bordes** via edge-fade (no solo en TTF)
-3. **Transiciones suaves** entre estados (hover, press)
-4. **Sombras aplicadas** a paneles y modales
+zcatgui tenía MÁS widgets que DVUI pero DVUI **se veía mejor** por falta de:
+1. ✅ **Esquinas redondeadas** → `fillRoundedRect` con edge-fade AA
+2. ✅ **Anti-aliasing en bordes** → edge-fade technique implementada
+3. ⏳ **Transiciones suaves** (Fase 2)
+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)**
-1. Crear `src/render/path.zig` - Paths con arcos para esquinas redondeadas
-2. Modificar `software.zig` - AA en bordes via edge-fade technique
-3. Actualizar widgets - corner_radius en Button, Panel, TextInput, Select, Modal
+### Widgets Actualizados
+
+| Widget | corner_radius | shadow | Notas |
+|--------|---------------|--------|-------|
+| 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**
-4. Integrar AnimationManager en widgets para transiciones hover/press
-5. Focus ring con anti-aliasing
+- Integrar AnimationManager en widgets para transiciones hover/press
+- Focus ring con anti-aliasing
 
-**Fase 3: Efectos**
-6. Activar Shadow API existente (`effects.zig`) en Panel/Modal
-7. Mejorar uso de gradientes
-
-**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
-```
+**Fase 3: Efectos Avanzados**
+- Mejorar uso de gradientes
+- Blur effect para backdrops
 
 ### Documentación de Referencia
 
 - `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
 
-### Estado actual (v0.17.0) - FUNCIONAL
+### Estado actual (v0.18.0) - FUNCIONAL
 - ✅ Parsing TTF via zcatttf (cmap format 4 y 12)
 - ✅ Rasterización con áreas trapezoidales (antialiasing)
 - ✅ Fuente embebida (DroidSans)
@@ -204,7 +217,7 @@ font.drawText(fb, x, y, "Texto con UTF-8: ñ €", color, clip);
 | Campo | Valor |
 |-------|-------|
 | **Nombre** | zcatgui |
-| **Versión** | v0.17.0 |
+| **Versión** | v0.18.0 |
 | **Fecha inicio** | 2025-12-09 |
 | **Estado** | ✅ COMPLETO - 37 widgets, ~35K LOC, 4 backends, TTF funcional |
 | **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.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.18.0 | Paridad Visual DVUI Fase 1: RenderMode dual, esquinas redondeadas, sombras |
 
 ---
 
 ## 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)