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 '72e8fb57ea'
${ noResults }
svelte-kit-vice/audit/components/breadcrumb.md

43 lines
6.0 KiB
Raw Normal View History Unescape

docs(audit): deep component audit — 124/124 audited + executable fix plan Stateful deep audit of the whole UIX component system across 8 batches (words/palabras/chronos excluded). Read-only: zero code changes. Result: 0 CRITICAL · 18 HIGH · 129 MEDIUM · 60 LOW. Deliverables (audit/): - components/{kebab}.md one machine-reparseable report per component - 00_WORKLIST.md resumable index (all audited) - SUMMARY.md verdict + systemic findings + per-batch counts - THEMING_COHERENCE.md E-bis coherence roll-up (roles/sizes/variants clean) - SHARED_EXTRACTION.md extraction opportunities (EX-3 selectedSet highest value) - VALIDATOR_GAPS.md 12 proposed validator extensions (prevent the class) - FIX_PLAN.md prioritized, executable fix roadmap (Phase 1 = SYS-7) Method: per-batch adversarial workflow (analyze -> skeptical verify), with every HIGH/CRITICAL lead-verified against the cited source + independent greps. The verify stage refuted false positives in both directions (eidos->soma, CSS.escape on framework values, inert archetype metadata, content-color slots mistaken for non-canonical roles). Top systemic finding: SYS-7 — A31 O(N^2) per-item .includes selection across 9 components (6 HIGH), one ~3-line selectedSet/expandedSet lift each. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
3 months ago
# Audit: breadcrumb
audit-version: 1
audited-at: 2026-06-26
scope:
method: adversarially-verified workflow; HIGH lead-verified. B7 ground-truth: Toolbar A35 + Form A36 incidents STAYED FIXED (untrack present); toast/clipboard/drag-drop use uix.timers (no A6 leak); button is clean (its archetype finding was inert — Spinner not runtime-registered); data-size/data-shape are eidos visual attrs (not contract violations).
provider: G:/dev/svelte/vicen/src/uix/soma/components/breadcrumb/breadcrumb-provider.svelte.ts
cleanup-audit (A6/A35/A36): EFFECT (line 173-180): $effect writing item.isCurrent with cleanup that resets to false. No listener/observer. No resources held. Disposer verified present: return () => { item.isCurrent = false; } ✓. A35/A36 loop check: SAFE — isCurrentRaw is $derived (acyclic); writing item.isCurrent does not caus
## Summary
Counts (post-verification): CRITICAL 0 · HIGH 1 · MEDIUM 0 · LOW 0.
## Findings
### HIGH: Archetype 'item' is reserved for selectable/interactive row parts; display items should om — breadcrumb-001 <!-- id: breadcrumb-001 -->
- dimension: A: Contract(morfo)
- rule: Archetype 'item' is reserved for selectable/interactive row parts; display items should omit archetype
- location: G:/dev/svelte/vicen/src/uix/morfo/components/breadcrumb.ts:50
- evidence: Item part declares `archetype: 'item'` but Item is a display `<li>` container (not selectable). Timeline.ts explicitly documents: "No `archetype: 'item'` — that archetype is for selectable menu/listbox/option rows... A timeline entry is a display `<li>`, structurally unique, so it omits the archetype." Breadcrumb.Item is semantically identical to Timeline.Item.
- impact: Incorrect archetype declaration violates the 2-of-3 rule (archetype field inconsistent with actual DOM semantics). May confuse CSS-side consumers expecting interactive row styling (cursor:pointer, select, hover). Runtime validator should flag this.
- repro: none (static violation)
- proposed-fix: Remove `archetype: 'item'` from the Item part definition (line 50). Item is a display container, not a selectable option.
- verify: [confirmed] CONFIRMED. breadcrumb.ts:48-56 declares the Item part with `archetype: 'item'` (line 50) on a display container `<li>` (`defaultElement: 'li'`, no role, not selectable). The runtime stamps `data-archetype='item'` on the element whenever the morfo sets it (morfo/types.ts:720 'the runtime emits `data-archetype="..."` on the part's DOM element via `partProps`'; README:177 same). That `[data-archetype='item']` selector triggers archetypes.css:139-153 — `cursor: pointer; user-select: none; min-block-size: var(--list-item-height, auto); padding-block: var(--list-item-py, var(--space-1-5))` — PLUS the hover/highlight band at archetypes.css:161-171 (`background-color: var(--color-surface-raised)` painted on the WHOLE `<li>` on hover). breadcrumb.css:36-41 styles `[data-breadcrumb-item]` only with `display:inline-flex; align-items:center; min-inline-size:0` — it does NOT reset cursor/padding-block/hover, so the styling is unmitigated. This is the exact documented bug: Timeline.ts:88-91 ('No `archetype: 'item'` — that archetype is for selectable menu/listbox/option rows (it ships cursor:pointer, user-select:none, internal padding + a hover highlight). A timeline entry is a display `<li>`, structurally unique, so it omits the archetype.'), and Calendar.ts:247-249 / 270-273 + range-calendar.ts:285 repeat the same doctrine for display `<tr>`/`<td>`. Breadcrumb.Item is semantically identical to Timeline.Item. Real visible regression: a breadcrumb `<li>` gets `cursor:pointer`, `padding-block: var(--space-1-5)`, and a surface-raised hover band over the whole crumb row. HIGH is correct per the rubric's 'archetype-pulls-wrong-styling on a real part'. Fix: remove `archetype: 'item'` from breadcrumb.ts:50 (the Item is a display container; the interactive Link inside owns its own affordance).
docs(audit): mark the 16 HIGH code findings as fixed fix-status: open -> fixed (<commit>) for every HIGH whose code fix landed this session, across 12 component reports: - 92f988e7: listbox-001, grid-list-001/002, tree-view-002, tree-grid-001, tag-group-001 (SYS-7 A31) - 98954a7c: alert-dialog-001, breadcrumb-001, navigation-menu-006, select-001, dialog-002 - db33f66c: select-002, dialog-001, collapsible-NEW-001 - bac67315: combobox-001, select-003 The HIGH tier is now code-complete; the 2 remaining HIGH (select-004, combobox-002) are test-coverage gaps for Phase 6. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
3 months ago
- fix-status: fixed (98954a7c)
docs(audit): deep component audit — 124/124 audited + executable fix plan Stateful deep audit of the whole UIX component system across 8 batches (words/palabras/chronos excluded). Read-only: zero code changes. Result: 0 CRITICAL · 18 HIGH · 129 MEDIUM · 60 LOW. Deliverables (audit/): - components/{kebab}.md one machine-reparseable report per component - 00_WORKLIST.md resumable index (all audited) - SUMMARY.md verdict + systemic findings + per-batch counts - THEMING_COHERENCE.md E-bis coherence roll-up (roles/sizes/variants clean) - SHARED_EXTRACTION.md extraction opportunities (EX-3 selectedSet highest value) - VALIDATOR_GAPS.md 12 proposed validator extensions (prevent the class) - FIX_PLAN.md prioritized, executable fix roadmap (Phase 1 = SYS-7) Method: per-batch adversarial workflow (analyze -> skeptical verify), with every HIGH/CRITICAL lead-verified against the cited source + independent greps. The verify stage refuted false positives in both directions (eidos->soma, CSS.escape on framework values, inert archetype metadata, content-color slots mistaken for non-canonical roles). Top systemic finding: SYS-7 — A31 O(N^2) per-item .includes selection across 9 components (6 HIGH), one ~3-line selectedSet/expandedSet lift each. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
3 months ago
## No-findings dimensions
B: Behavior(soma): A35/A36 loops absent (effect mirrors current to item without cycle; no async state writes), B: A6 resource cleanup (no timers/listeners/observers), B: A31 O(N²) derivations absent, B: A30 child->parent id registration (uses $effect correctly), B: A33 state(Map/Set) cloning (no Maps/Sets used), C: DOM-selector (no querySelector with user values), D: Frontier (no soma->eidos imports), E-bis: Theming (recipe uses canonical --space-*, --font-size-*, --duration-* tokens; focus-ring uses canonical CSS var), F: Tests environment jsdom (provider test exists, covers label projection, current mirroring, ellipsis semantics), G: Passive component justified in README (zero state, zero keyboard nav, zero events by design)
## Theming facts (E-bis)
- magic z-index: none
- magic literals: none
- undeclared parts: none
- roles clean: true · variants clean: true
## Tests (F)
- exists: true · env: jsdom (@vitest-environment jsdom)
- covers: Provider label projection and resolution (BREADCRUMB_LANGS); Link.current state mirroring to Item.isCurrent; aria-current conditional emission (true/'page'/'step'); renderSpan conditional tag switching; Ellipsis decorative->interactive semantics via interactive prop; aria-haspopup conditional on interactive; role=presentation conditional on !interactive
- untested: E2E browser interaction (Playwright): full click/focus flow, ARIA tree, CSS targeting; Eidos variant/size responsive resolution (ActiveEidos.resolve); Ellipsis with DropdownMenu composition (documented example in README)
## Style observations (non-blocking)
- Link focus-visible uses canonical --focus-ring-width and --focus-ring-color vars (breadcrumb.css:61-64, 107-109) ✓
- Ellipsis interactive and link hover transitions use canonical --breadcrumb-transition-duration and --breadcrumb-transition-ease (line 52-54, 94-98) ✓
- Recipe declares all semantic spacing (gap-xs/sm/md/lg → var(--space-*)) and sizing (font-size-xs/sm/md/lg, ellipsis-size → var(--control-height-xs)) ✓
- no hardcoded hex colors; all use role aliases (--breadcrumb-color, --breadcrumb-link-color, etc.) ✓

Powered by TurnKey Linux.