diff --git a/continue.md b/continue.md index e3320ec4e..6adb0c3b0 100644 --- a/continue.md +++ b/continue.md @@ -22,6 +22,99 @@ Sesión de saneamiento + ampliación: separados. Se confirma el patrón canónico headless mainstream (React Aria, Ark, Bits, Chakra v3, Radix Vue) — un solo `NumberField` con `formatOptions`. +## Actualización final — Words cerrado para retomar mañana + +Después del corte anterior se completó el componente **Words** hasta demo +funcional: + +- `src/uix/morfo/components/words.ts` — contrato Morfo con 8 partes y 6 + eventos. +- `src/uix/soma/components/words/` — motor JSON, selection, input pipeline, + commands, history, render HTML seguro, hidden input y tests. +- `src/uix/eidos/components/words/` — wrapper compound `` + + ``, ``, ``, etc. y receta + CSS. +- `src/uix/sema/components/words.ts` — pack Sema para focus, commit, format, + history, clear e invalid input. +- `src/uix/langs/components/words.ts` — catálogo de strings para eliminar + warnings de fallback. +- `web/routes/uix/components/words/+page.svelte` — demo canónica 6 tabs con + stage permanente, snippets Soma/Eidos, Morfo/Sema/Recipe/A11y. + +### Verificación específica de Words + +Comandos ejecutados: + +```bash +npx vitest run src/uix/soma/components/words/engine/engine.test.ts src/uix/soma/components/words/words-provider.svelte.test.ts +node --import tsx/esm scripts/component-audit.ts --only words +npx prettier --check src/uix/eidos/components/words src/uix/sema/components/words.ts src/uix/sema/components/words/README.md web/routes/uix/components/words src/uix/eidos/lib/recipes/base.ts src/uix/eidos/index.css web/routes/uix/+layout@.svelte src/uix/sema/components/index.ts src/uix/soma/components/words/README.md src/uix/words/README.md src/uix/langs/components/words.ts src/uix/langs/components/index.ts +npm run check 2>&1 | Select-String -Pattern 'words|Words' +``` + +Resultado: + +- Tests Words: **23 passed**. +- Component audit `--only words`: **PASS**. +- Prettier: **PASS**. +- `npm run check` filtrado por `words`: sin errores ni warnings de Words. +- Visual en navegador: demo abierta en `http://localhost:5173/uix/components/words`. + Se verificó render inicial, presets `empty`/`long`, placeholder, escritura, + commit button, trace de Sema y tab Sema con 6 botones `Play`. +- Browser logs después de añadir `wordsLangs`: sin warnings nuevos. + +Captura temporal local: + +```text +tmp/words-demo-empty.png +``` + +### Problemas detectados y corregidos durante Words + +- El wrapper Eidos de `Words.Content` pasaba un snippet vacío y bloqueaba el + render HTML por defecto de Soma. Corregido: solo se pasa snippet cuando el + consumidor aporta children. +- Mismo patrón corregido para `Placeholder`, `CommandButton` y `Status`, para + no pisar defaults Soma. +- Faltaba catálogo de traducciones `components.words.*`, lo que generaba + warnings de fallback en navegador. Corregido en `src/uix/langs/components`. + +### Check global pendiente + +`npm run check` global sigue fallando por deuda ajena a Words: + +- `web/routes/uix/components/tree-grid/+page.svelte`: `bind:expanded` y + `bind:value` sobre props no bindables. +- `web/routes/uix/components/tree-view/+page.svelte`: `bind:expandedValue` y + `bind:selectedValue` sobre props no bindables. +- `src/uix/eidos/components/virtual-grid/virtual-grid.svelte`: tipo de + `style` permite objeto, pero el markup espera string. +- `src/uix/eidos/components/virtual-list/virtual-list.svelte`: mismo problema + de `style`. +- `src/uix/active-uix/active-uix.svelte.test.ts`: `announceMorfo` usa evento + `absent-clear` con `family: 'absent'` / `intent: 'absent'`, incompatible con + el vocabulario actual de Morfo. +- Además hay warnings no bloqueantes en `navigation-menu` (`href="#"`) y + `table` (`state_referenced_locally`). + +## Punto exacto para continuar mañana + +1. **Primero limpiar `npm run check` global**, empezando por los errores + anteriores. Es mejor cerrar eso antes de seguir creando componentes, porque + ahora Words ya pasa su auditoría aislada. +2. **Revisar visualmente Words en responsive y dark/light**: desktop ya fue + comprobado; falta una pasada móvil/estrecha, vertical toolbar y tabs + Morfo/Recipe/A11y con scroll largo. +3. **Si se sigue en Words V1.1**, el orden recomendado es: + - sincronizar cambios externos de `value` sin remount en la demo; + - import/export HTML seguro; + - Markdown import/export; + - BubbleMenu + LinkPopover como partes Soma reales; + - agrupar input/composition en batches de history menos ruidosos. +4. **Si se sigue con el ecosistema UIX**, no abrir más componentes hasta que + `component-audit --only words` siga en PASS y `npm run check` global esté + limpio. + ## Decisiones tomadas hoy ### 1. Patrón canónico para number/currency/unit inputs @@ -78,10 +171,10 @@ y range-calendar: solo `dateOrder` (la única ruta que ignoraba el prop). **Semántica resultante** (consistente en NumberField + DateField + Calendar + RangeCalendar): -| Caso | Comportamiento | -|---|---| -| `` sin prop locale | Respeta `prefs.locale` del app (sin cambio) | -| `` | Bypassa `soma.nums` → formato en-US garantizado | +| Caso | Comportamiento | +| ------------------------------- | ----------------------------------------------- | +| `` sin prop locale | Respeta `prefs.locale` del app (sin cambio) | +| `` | Bypassa `soma.nums` → formato en-US garantizado | ### 3. Listas hardcoded en demo → ecosistema centralizado @@ -150,14 +243,14 @@ el `` padre. `Field.Label` gana sobre `aria-label` propio. Catálogo actual (97 morfos) ya excede shadcn (~50), Radix (~30). Las únicas ausencias notables vs mainstream: -| Faltante | Equivalente parcial | Prioridad | -|---|---|---| -| Skeleton (loader placeholder) | — | media | -| Spinner (determinate loader) | progress indeterminate | media | -| PasswordField | editable + custom toggle | baja | -| HoverCard | link-preview (similar) | baja | -| DataTable (sort/filter compuesto) | table | media-alta | -| Sidebar (app shell pattern) | — | baja (composición) | +| Faltante | Equivalente parcial | Prioridad | +| --------------------------------- | ------------------------ | ------------------ | +| Skeleton (loader placeholder) | — | media | +| Spinner (determinate loader) | progress indeterminate | media | +| PasswordField | editable + custom toggle | baja | +| HoverCard | link-preview (similar) | baja | +| DataTable (sort/filter compuesto) | table | media-alta | +| Sidebar (app shell pattern) | — | baja (composición) | ## Archivos modificados/creados hoy @@ -239,7 +332,7 @@ Para mañana: arrancar `npm run dev` desde el árbol principal el morfo de editable (mismo APG textbox); solo añade un eidos wrapper. 4. **Audit visual completo del demo de TextArea** — comprobar tabs Live / API / Morfo / Sema / Recipe / A11y, todas las combinaciones de variant - + color + size. + - color + size. ## Patrones canon establecidos hoy @@ -253,25 +346,26 @@ Para mañana: arrancar `npm run dev` desde el árbol principal **Catálogo de listas dependientes de locale**: -| Lista | Fuente canónica | -|---|---| -| Locales | `LangBase` (`$libs/langs`) + tabla regional curada | -| Currencies | `REGION_CURRENCY` (`$libs/currency`) → `Set.values` | -| Units | `UNIT_DEFINITIONS` (`$format/units`) → group por `UnitKind` | -| Date orders | `resolveDateOrder()` de `$libs/days` | -| Hour cycles | `getDefaultHourCycle()` de `$libs/days` | +| Lista | Fuente canónica | +| ----------- | ----------------------------------------------------------- | +| Locales | `LangBase` (`$libs/langs`) + tabla regional curada | +| Currencies | `REGION_CURRENCY` (`$libs/currency`) → `Set.values` | +| Units | `UNIT_DEFINITIONS` (`$format/units`) → group por `UnitKind` | +| Date orders | `resolveDateOrder()` de `$libs/days` | +| Hour cycles | `getDefaultHourCycle()` de `$libs/days` | Cualquier demo que enumere alguna de estas listas DEBE importarlas; nunca hardcodear. -**TextArea = referencia para nuevos form controls de una sola parte -+ count + Field integration.** Si construyes un componente con: +\*\*TextArea = referencia para nuevos form controls de una sola parte + +- count + Field integration.\*\* Si construyes un componente con: -- input/control único -- value bindable -- Field integration (OR-merge) -- counter o indicator opcional -- shortcut keys configurable +* input/control único +* value bindable +* Field integration (OR-merge) +* counter o indicator opcional +* shortcut keys configurable Clónalo. La estructura `provider + input + count` con sus 3 wrappers svelte es replicable.