You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
svelte-kit-vice/continue.md

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. Sema commit-action con 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-size escala con data-size (10/12/14px); autoFormat default 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-element token 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.css o 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.OptionIndicator y RadioGroup.Indicator si 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:

  • NumberField stepper 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 error debe 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.

Powered by TurnKey Linux.