4.6 KiB
Continue tomorrow
Fecha de corte: 2026-05-23. Rama: active-uix.
Resumen del día
Sprint de demos canonical-depth + Button component + picker recipe polish.
Commit clave: a804c392 (49 archivos, +11034/-1365). svelte-check: 0/0.
Hecho:
-
Demos rebuilt a canonical depth (9): context-menu, dropdown-menu, pin-input, alert-dialog, toggle-group, color-field, time-field, time-picker, time-range-picker, color-picker, month-grid, year-grid. Cada demo con per-part Morfo contracts iterando raw morfo, reference parity tables (Radix/bits-ui/ark-ui/Chakra/Mantine/react-aria), keyboard + ARIA contract tables, composition controls.
-
Nuevo
<Button>(eidos): morfo + soma + sema + eidos + demo canonical. 6 variants (solid/soft/surface/outline/ghost/plain), 8 colors, 5 sizes, loading state + Spinner, icon/endIcon snippets, asChild Slot pattern. Semacommit-actioncon intent fromProp. -
PickerShell refactor: Clear/Cancel/Close ahora usan
<Button size="xs">. Afecta 5 pickers (date / date-range / time / time-range / color). CSS chrome redundante eliminada de picker-shell.css; layout mantenido (gap, margin auto). -
Time picker polish: popover condensado (min 18→14 / 32→28rem), per-channel accent (hour=primary, minute=secondary, second=neutral, end variant muted), ruler OFF por defecto, hour ruler limpio (0/6/12/18/23 sin "21/23" pegados).
-
Color picker polish: typography token
--_color-picker-trigger-font-sizeescala condata-size(10/12/14px);autoFormatdefault true (popover FormatSelect driving Trigger ValueText). Composition toggles para Hue / Alpha / ChannelInput / FormatSelect / EyeDropper / Swatches / Label / ValueText. Area recipe[data-x-channel='hue']→ rainbow horizontal con overlays adaptados al y-channel; auto-switch a{x: hue, y: saturation}cuando el Hue slider está oculto. -
Bug fix: ValueText eidos wrapper creaba un children snippet implícito vacío que bloqueaba el fallback de soma. Fix con split condicional
{#if children}que aplica a cualquier wrapper con soma fallback. -
Date field segment affordance: cursor + hover bg + active ring via
--_date-field-accent-elementtoken añadido a las 8 color cascades.
Pendiente / en curso
1. Task #118 — Shared check/radio indicator recipe
Problema: los recipes [data-checkbox][data-state='checked'],
[data-context-menu-checkbox-item][data-state='checked']::before y
[data-dropdown-menu-checkbox-item][data-state='checked']::before redibujan
los indicadores (palomita rounded square / círculo radio) en bloques separados.
Plan:
- Crear un partial / sub-recipe compartido (e.g.
src/uix/eidos/lib/recipes/indicator.csso sub-mixin en base.ts) con la geometría del check / radio dot. - Importar desde checkbox.css, context-menu.css, dropdown-menu.css.
- Verificar también
Select.OptionIndicatoryRadioGroup.Indicatorsi aplican.
No fusionar los componentes — Checkbox / MenuCheckboxItem / MenuRadioItem son primitivas ARIA distintas (role="checkbox" vs role="menuitemcheckbox" vs role="menuitemradio") con keyboard models distintos. Solo unificar el indicador visual.
2. Task #120 — Refactor restantes consumidores a <Button>
Hecho: PickerShell.Clear/Cancel/Close (5 pickers).
Pendiente:
DropdownMenu.Trigger— actualmente raw<button>reset.AlertDialog.Action+AlertDialog.Cancel— recipe bespoke con cascade[data-color='risk'|'threat']auto-coloring. Verificar que el cambio a<Button intent="...">mantenga el cascade visual.Combobox.ClearButton— pequeño icon button.SearchField.Clear— pequeño icon button.
Decisión consciente NO refactorizar:
NumberFieldstepper buttons → mantienen comportamiento bespoke (hold-to-repeat increment).
3. Indicator refactor + Button consumer refactor son independientes
Pueden hacerse en cualquier orden. Task #118 toca recipe (CSS only). Task #120 toca svelte (cambia consumidor + drop CSS chrome redundante).
4. Notas de scope / verificación
- Cada refactor: verificar visual en cada consumidor (date-picker, alert-dialog, etc.) — no asumir que el cambio no impacta layout.
svelte-check --threshold errordebe quedar 0/0 después de cada commit.- Demo de cada consumidor debe re-verificarse después del refactor.
Comandos útiles
cd G:/dev/svelte/vicen
npx svelte-check --threshold error # 0/0 expected
npm run dev # via .claude/launch.json "dev"
npm run generate:eidos-css # if recipe tokens change
Estado del working tree
Limpio. Branch active-uix +17 ahead de gita/active-uix antes del push de hoy.