docs: Actualizar CLAUDE.md a v0.19.0 - Fases 1+2 completas

- Paridad Visual DVUI completada
- Focus Ring AA en 9 widgets documentado
- Historial actualizado con v0.19.0
- Bug TTF marcado como RESUELTO

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

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
reugenio 2025-12-17 10:23:40 +01:00
parent e0cbbf6413
commit a3c48efbab

View file

@ -78,18 +78,19 @@ Resumen breve (1-2 frases). Resultado principal.
--- ---
## ⭐ Paridad Visual DVUI - Fase 1 COMPLETADA ## ⭐ Paridad Visual DVUI - FASES 1+2 COMPLETADAS
> **Estado**: Fase 1 completada (2025-12-17) > **Estado**: Fases 1 y 2 completadas (2025-12-17)
> **Auditoría original**: `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)
### El Problema (resuelto) ### El Problema (RESUELTO)
zcatgui tenía MÁS widgets que DVUI pero DVUI **se veía mejor** por falta de: 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 1. ✅ **Esquinas redondeadas**`fillRoundedRect` con edge-fade AA
2. ✅ **Anti-aliasing en bordes** → edge-fade technique implementada 2. ✅ **Anti-aliasing en bordes** → edge-fade technique implementada
3. **Transiciones suaves** (Fase 2) 3. **Transiciones suaves** → HoverTransition en Button/Select
4. ✅ **Sombras en paneles/modales** → Panel/Modal con shadow 4. ✅ **Sombras en paneles/modales** → Panel/Modal con shadow
5. ✅ **Focus ring AA** → 9 widgets con focus ring
### Sistema Dual Implementado ### Sistema Dual Implementado
@ -125,35 +126,41 @@ if (Style.isFancy() and config.corner_radius > 0) {
**Total: ~590 líneas nuevas/modificadas** **Total: ~590 líneas nuevas/modificadas**
### Fase 2: Transiciones Hover/Press ✅ (parcial) ### Fase 2: Transiciones + Focus Ring ✅ COMPLETADA
**HoverTransition helper** (`animation.zig`): **HoverTransition helper** (`animation.zig`):
- `update()` y `updateWithPress()` para animar hacia target - `update()` y `updateWithPress()` para animar hacia target
- `blend()` y `blendThree()` para interpolar colores - `blend()` y `blendThree()` para interpolar colores
- Speed configurable (default ~125ms transición) - Speed configurable (default ~125ms transición)
**Widgets con transiciones:** **Focus ring helper** (`command.zig`):
| Widget | Modo | Notas | - `focusRing()` y `focusRingColor()` para indicador de foco
|--------|------|-------| - Dibuja 2px fuera del widget con AA
| Button | Opcional (ButtonState) | `buttonStateful()` para transiciones | - Color primario semi-transparente (alpha 180)
| Select | Integrado en SelectState | Automático |
**Widgets con focus ring:**
| Widget | Transiciones | Focus Ring | Esquinas |
|--------|--------------|------------|----------|
| Button | ✅ `buttonStateful()` | - | ✅ |
| Select | ✅ Automático | ✅ | ✅ |
| TextInput | - | ✅ | ✅ |
| NumberEntry | - | ✅ | ✅ |
| Radio | - | ✅ (opción) | ✅ |
| Slider | - | ✅ (thumb) | ✅ |
| Tabs | - | ✅ (tab) | ✅ |
| Table | - | ✅ (borde) | - |
| TextArea | - | ✅ | ✅ |
```zig ```zig
// Button con transiciones (opcional) // Button con transiciones (opcional)
var btn_state = button.ButtonState{}; var btn_state = button.ButtonState{};
if (button.buttonStateful(&ctx, &btn_state, "Click me")) { ... } if (button.buttonStateful(&ctx, &btn_state, "Click me")) { ... }
// Select tiene transiciones automáticas // Focus ring se dibuja automáticamente cuando widget tiene foco
var select_state = select.SelectState{};
_ = select.select(&ctx, &select_state, options);
``` ```
### Fases Pendientes ### Fase 3: Efectos Avanzados (OPCIONAL)
**Fase 2 (resto):**
- Focus ring con anti-aliasing
**Fase 3: Efectos Avanzados**
- Mejorar uso de gradientes - Mejorar uso de gradientes
- Blur effect para backdrops - Blur effect para backdrops
@ -210,7 +217,7 @@ ttf.drawText(fb, x, y, "Hola UTF-8: áéíóú ñ €", color, clip);
## Fuentes TTF: Estado Técnico ## Fuentes TTF: Estado Técnico
### Estado actual (v0.18.0) - FUNCIONAL ### Estado actual (v0.19.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)
@ -239,7 +246,7 @@ font.drawText(fb, x, y, "Texto con UTF-8: ñ €", color, clip);
| Campo | Valor | | Campo | Valor |
|-------|-------| |-------|-------|
| **Nombre** | zcatgui | | **Nombre** | zcatgui |
| **Versión** | v0.18.0 | | **Versión** | v0.19.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 |
@ -802,12 +809,13 @@ const stdout = std.fs.File.stdout(); // NO std.io.getStdOut()
| 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 | | 2025-12-17 | v0.18.0 | Paridad Visual DVUI Fase 1: RenderMode dual, esquinas redondeadas, sombras |
| 2025-12-17 | v0.19.0 | Paridad Visual DVUI Fase 2: HoverTransition, Focus Ring AA en 9 widgets |
--- ---
## ESTADO ACTUAL ## ESTADO ACTUAL
**✅ PROYECTO COMPLETADO - v0.18.0** **✅ PROYECTO COMPLETADO - v0.19.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)