go
/
svelte-kit-vice
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
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.
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '85e2356d49'
${ noResults }
svelte-kit-vice/docs/process/PLAN-component-coherence.md

58 lines
6.6 KiB
Raw Normal View History Unescape

docs(process): component-coherence plan — audited weaknesses + C1-C10 batches Consolidated audit (2026-07-02): 130 components -> 75 PASS / 50 NEEDS-WORK / 5 BROKEN; palette-31 wired in 7 recipes, size-bundle in 1, focus-visible missing in 11, 17 literal-typography recipes, 41/82 eventful morfos without expression:, 33 without APG anchor, 28 without README. Demos (D-*) explicitly deferred to the next phase (component info web). Batches C1-C10 with per-batch verification. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
3 months ago
# PLAN — Coherencia del catálogo de componentes (fase 1: debilidades)
> **Kickoff para sesión nueva**: *"Lee docs/process/PLAN-component-coherence.md
> y continúa la tanda que toque."* Decisión de usuario (2026-07-02): primero
> resolver las debilidades medidas del sistema; la **web de información y de
> componentes** (ficha canónica + demos v3 + docs site) es la FASE SIGUIENTE —
> por eso las reglas D-* (demos) quedan explícitamente FUERA de esta fase.
## Diagnóstico (auditoría 2026-07-02)
`npm run component:audit`: **130 componentes → 75 PASS · 50 NEEDS-WORK · 5
BROKEN** (`cascade` · `gradient-builder` · `menu-dial` · `motion` · `qr-code`).
Por dimensión:
| Dimensión | Estado medido |
|---|---|
| Ejes transversales | Paleta-31 (`paletteScaleDecls`) en **7** recipes; size-bundle (`--size-*`) en **1** (pilot toggle); `data-variant` en 55 CSS |
| Estados (recipe) | `:focus-visible` falta en **11** (error) · `data-invalid` en 10 · `data-disabled` en 6 · `data-readonly` en 15 (warn) |
| Tokens | **17** recipes con tipografía literal (R-2.7) |
| Sema | 82 morfos con eventos → solo **41** declaran `expression:` (13 pack · 13 family-default · 1 delegated parseados); `persistence:` en 13; `a11ySemantic` en 9 |
| Motion | 15/15 recipes sin `@keyframes` locales ✓; firma de evento (CSS `data-event`) en **10** componentes; prop `motion` en 18 |
| A11y ancla | **33** interactivos sin URL APG (A-1.4, warn) |
| Docs por componente | **28** sin README (E-2.3); F-1.x (Baseline/Comparativa/Decisiones/Gaps) faltan en ~12–18 más |
| Demos (FUERA de fase) | 4 tab-union viejo · 7 sin snippet · 8 sin trace · 12 ▶ play sin wire · 7 chip-parity |
## Reglas de trabajo
- Sin agentes/workflows; responder en castellano, código/docs en inglés.
- NUNCA tocar `words/`, `palabras/`, `chronos/`, `media-player` (foráneo WIP).
- Una tanda = cambios + verificación (`component:audit --only` por componente
tocado + `npm run check` scope) + commit. `git reset -q` antes de add.
- Sweeps: UN componente primero, verificar, luego el resto (no-cascade rule).
- Cada fix sistémico lleva su guard (regla nueva en audit o generador).
## Tandas
| Tanda | Contenido | Estado |
|---|---|---|
fix(uix): C1 — zero BROKEN components; documented-exception valve in the audit The 5 BROKEN components (cascade, gradient-builder, menu-dial, motion, qr-code) are BROKEN no more: cascade/motion/menu-dial now PASS, gradient-builder/qr-code drop to NEEDS-WORK with only demo-phase (D-*) and C8 items left. Framework-level piece: component-audit gains the documented-exception valve the checklist already used for A-2.3/R-1.7 — a greppable 'R-x.y exception: reason' line in the component README turns the rule into a PASS that reports the reason. Wired for R-1.1, R-1.2, R-1.5 and E-2.2; the checklist rows say the same. This separates deliberate design (cascade and motion deliberately ship NO recipe — they ride the foundation stagger + state presets; menu-dial's focus/disabled states live in the composed Fab/Button recipes) from plain omission, which stays an error. Mechanical fixes: texts.label + langs entries for cascade/motion (new files, registered) and gradient-builder (label added to its existing entry); menu-dial's missing default export. README contract sections (Baseline/Comparativa/Decisiones/Gaps/Passive justification + Audit exceptions) added to cascade, motion, menu-dial and qr-code — mostly re-heading content those docs already argued; comparativas grounded in M3 speed dial/MUI SpeedDial/PrimeVue, Framer Motion/AnimatePresence/ Svelte transitions, ark-ui/qr-code-styling per component. Verified: component:audit 130 -> 78 PASS / 52 NEEDS-WORK / 0 BROKEN; npm run check at the 61-error pre-existing baseline (0 own). Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
3 months ago
| **C0** | **Auditoría de conteos** (hallazgo usuario: "31 escalas" era 33 — UI+docs): guard I1 extendido a palette=33 · roles=9 · slots=12 (extracción sin comentarios); harness PALETTE_GROUPS +fuchsia+steel con assert de completitud; 14 menciones corregidas. **Pendiente**: misma medicina para steps=12 · planos depth=5 · sizes · weights · estilos tipográficos · packs | **HECHA (núcleo) 2026-07-02** |
| **C1** | **BROKEN mecánicos → 0 BROKEN**: válvula `R-x.y exception:` en audit (R-1.1/R-1.2/R-1.5/E-2.2 + filas checklist); cascade/motion/gradient-builder `texts.label`+langs; menu-dial default export; READMEs contrato (cascade·motion·menu-dial·qr-code: Baseline/Comparativa/Decisiones/Gaps/Passive+excepciones). cascade·motion·menu-dial → PASS; gradient-builder·qr-code → NEEDS-WORK (resto = D-* fase demos + C8) | **HECHA 2026-07-02** |
fix(uix): C2b — invalid/disabled/readonly states: real fixes + cited exceptions The R-1.2/R-1.3/R-1.4 sweep, same method as C2a (evidence first): each offender is either a REAL missing state or a shared-layer/composed case that must not duplicate rules. Real fixes, all verified in a live browser (computed-style probes, with the transition-mid-flight trap from the demo guide s13 accounted for): switch/toggle/rating-group get the family invalid tint (--color-threat-element, the shipped checkbox/pin-input precedent); toggle gets its readonly cursor; pin-input cells get the readonly muted-surface treatment mirroring date-field segments; the SHARED spin-field layer gains the readonly treatment it lacked (one fix covers css-field + number-field); natural-time-picker gets the disabled opacity/pointer rule mirroring date-field. Exception valve wired into R-1.3/R-1.4 (was only R-1.1/1.2/1.5/E-2.2) and cited exceptions added: css-field/number-field (states live in the shared spin-field layer), dialog (data-disabled sits on the VIRTUAL provider — defaultElement none — and the pressable surfaces are composed Buttons), color-picker (color-field owns the invalid rules), date-range-field (the runtime overlays data-date-field-input on the same elements, per its own recipe header), time-picker (composed time-field chrome). natural-time-picker keeps its two warns for its C8 pass rather than guessing paint targets. All 10 audited components now PASS with 0 R-1.x pending; npm run check at the 61-error baseline. css-field/number-field READMEs fixed on disk but unstaged (unrelated local modifications). Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
3 months ago
| **C2** | **Estados error-severity**. **(a) R-1.5 HECHA 2026-07-02**: el audit ahora reconoce las 4 evidencias sancionadas (`:focus-visible` · `:focus-within` · `:has(:focus)` · `[data-focused]` canónico) — añadir rings por recipe habría sido el anti-patrón "double border" (archetypes.css:164 ya da ring universal por arquetipo); 6 excepciones citadas (css-field/number-field → spin-field compartido; date-picker/dialog → foundation+content-exclusion; metrics/timeline → sin parte enfocable); clipboard+announce esperan su README (C8). **(b) R-1.2/1.3/1.4 HECHAS 2026-07-03**: válvula cableada también en R-1.3/R-1.4; fixes REALES verificados en navegador (switch/toggle/rating-group invalid=threat-element como checkbox·pin-input; toggle+pin-input readonly; spin-field readonly NUEVO en la capa compartida; ntp disabled); excepciones citadas (spin-field para css/number-field; dialog provider virtual; color-picker→color-field; date-range-field overlay de attrs; time-picker→time-field). ntp conserva R-1.3/R-1.4 warn para su pasada C8. media-player NO tocado (foráneo) | **HECHA** |
fix(uix): C3 — literal typography swept across 16 recipes (R-2.7 clean) Two classes. Real fixes: 8 numeric font-weights tokenized to var(--font-weight-medium/semibold/regular) in command, date-range-picker, link-preview, listbox, menubar, textarea, time-range-picker x2 — same rendered weight, but the foundation now propagates (verified in a live browser: the token resolves to 500). Honest annotations: the proportional/identity literals get their /* literal: <reason> */ valve instead of a fake token — avatar initials/badge scale with the avatar diameter (physically proportional), the calc(1em - (md - sm)) family is the Field label-one-step-down doctrine with a token-derived delta, 1em is context identity (fab glyph, password toggle), the x0.85 captions are proportional to their field token, and combobox's -1px is an optical adjustment on a token-derived size. component:audit R-2.7: 16/16 clean; npm run check at the 61-error baseline. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
3 months ago
| **C3** | **R-2.7 tipografía literal HECHA 2026-07-03** — 16 recipes: 8 font-weights → `var(--font-weight-*)` (verificado resolve=500 en navegador); ~13 proporcionales/identidad anotados `/* literal: */` con razón (avatar ∝ diámetro; `calc(1em − (md−sm))` = label one-step-down con delta token-derived; `1em` identidad de contexto; captions ×0.85; optical −1px) | **HECHA** |
fix(uix): C4 — APG anchors for 29 interactive components (20 patterns + 5 documented absences) Every interactive morfo now either anchors its W3C APG pattern or documents that none exists. Real patterns (20): the picker family + command + search-field anchor combobox (field/input + popup, the pattern's own popup taxonomy); date-field mirrors time-field's spinbutton (per-segment contract); rating-group -> radio; navigation-menu -> disclosure (the APG's own site-nav guidance); splitter -> windowsplitter; tag-group/tags-input/virtual-grid -> grid; clipboard/file-upload -> button (the trigger IS the widget); announce -> alert (live region); form -> the form landmark; image-adjustments -> slider; table -> table. The A-1.4 valve (documented exception) is wired like the R-x rules, and five components whose widget has NO APG pattern say so in their README instead of faking an anchor: cropper (2-D manipulation), pagination (nav + composed Buttons), stepper, timeline (display list), image-picker (media picker). Remaining warns are the four expected: card/drag-drop/virtual-list host their note when C8 writes their READMEs, media-player is foreign WIP. Catalog: 83 PASS / 47 NEEDS-WORK / 0 BROKEN (was 75/50/5 at the audit's start). npm run check at the 61-error baseline. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
3 months ago
| **C4** | **A-1.4 APG HECHA 2026-07-03** — 20 morfos con patrón real (pickers/command/search→combobox · date-field→spinbutton espejo de time-field · rating→radio · nav-menu→disclosure · splitter→windowsplitter · tag-group/tags-input/virtual-grid→grid · file-upload/clipboard→button · announce→alert · form→landmark · image-adjustments→slider · table→table); válvula A-1.4 + notas en 5 READMEs (cropper·pagination·stepper·timeline·image-picker — sin patrón APG real). Restan 4 esperados: card/drag-drop/virtual-list (nota aterriza con su README en C8) + media-player (foráneo) | **HECHA** |
docs(process): component-coherence plan — audited weaknesses + C1-C10 batches Consolidated audit (2026-07-02): 130 components -> 75 PASS / 50 NEEDS-WORK / 5 BROKEN; palette-31 wired in 7 recipes, size-bundle in 1, focus-visible missing in 11, 17 literal-typography recipes, 41/82 eventful morfos without expression:, 33 without APG anchor, 28 without README. Demos (D-*) explicitly deferred to the next phase (component info web). Batches C1-C10 with per-batch verification. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
3 months ago
| **C5** | **Sema `expression:`** (~41 morfos con eventos sin declarar) — clasificar pack / family-default / delegated / none por componente (criterios D.4 de book-deviations); `persistence`/`a11ySemantic` donde el evento lo pida (tabla D.9 como referencia) | pendiente |
| **C6** | **Paleta universal** — `paletteScaleDecls` pasa de helper manual (7 usos) a paso del generador para toda recipe con tokens `palette-*` + regen + guard ("data-color sin cascade de paleta = error") | pendiente |
| **C7** | **Size-bundle sweep** (~90 recipes; patrón theming/reference §5, pilot toggle) + guard "recipe que re-declara size→font = warn" | pendiente |
| **C8** | **READMEs** — 28 nuevos + F-1.x incompletos (~18). Baseline/Comparativa (≥3 refs reales)/Decisiones/Gaps; passive → justificación. El más pesado: requiere investigación por componente | pendiente |
| **C9** | **Motion eventful gap** — decidir qué interactivos deben expresar firma de evento (hoy 10) y cablearla; criterio: alta frecuencia = sobrio (doctrina D.5) | pendiente |
| **C10** | **Tiers de madurez** — `stable · preview · experimental` en índice de componentes + criterio (PASS+README = stable) | pendiente |
FASE SIGUIENTE (no aquí): ficha canónica generada por componente, demos v3
(D-*), web de docs. Ver conversación 2026-07-02.
## Verificación de cierre de fase
`npm run component:audit` → 0 BROKEN, NEEDS-WORK solo por reglas D-* (demos,
fase siguiente); paleta y size-bundle universales con guard activo.

Powered by TurnKey Linux.