srcdev-nuxt-components 9.4.4 → 9.4.6

package/.claude/commands/migrate-component.md

@@ -0,0 +1,106 @@
+---
+description: Bring one component up to the current compliance standard (tier, styling doc, tokens, tests, story, skill doc, snippet)
+---
+
+Migrate a single component to full compliance with the standard in CLAUDE.md (Development
+Workflow, Styling Methodology, Vue Template Conventions) — see also `project_component_compliance_standard`
+and `feedback_private_token_convention_clarified` in memory for the token rule specifically.
+
+## 1. Pick the component
+
+If the user gave an argument (a component name or path), resolve it against `app/components/`
+(match on folder name or `.vue` filename, case-insensitively). If it doesn't resolve uniquely,
+ask which one they meant.
+
+Otherwise, auto-pick the next worst offender:
+
+1. Run `node .claude/component-ledger/build.mjs` to refresh the audit data.
+2. Read `.claude/component-ledger/audit.json`. Pick in this priority order, first match wins:
+   - Any group with `"tier": "NONE"` (unplaced) — pick the one with the lowest `score`, ties broken alphabetically by `compdir`.
+   - Else any group with `"variants": true` — same tie-break.
+   - Else any group with `"legacy_props": true` (still options-style `defineProps({...})`, not
+     `defineProps<Props>()`) — same tie-break. This one doesn't move the 5-point `score`, so it
+     would otherwise hide forever behind an already-complete-looking component.
+   - Else the lowest `score` overall — same tie-break.
+3. State which component was picked and why in one line (e.g. "Picked `input-select` — unplaced isn't the issue here, it forks a `variants/` subfolder and scores 2/5.") before doing anything else, so the user can redirect you if they'd rather do a different one next.
+
+## 2. Confirm it's still wanted
+
+Before starting the checklist, confirm with the user that this component should actually be
+migrated — a low score isn't proof it's still needed. Use AskUserQuestion with these options:
+
+- **Migrate it** (recommended default) — proceed to step 3.
+- **Leave it untouched** — skip it this run. If it was auto-picked, say so and go back to step 1
+  to pick the next worst offender instead; if the user named it explicitly, just stop.
+- **Delete it** — it's unused, superseded by another component, or otherwise no longer wanted.
+  Run the `check-component-usage` skill against the component's name first, across every consumer
+  repo, and report the results before deleting anything. A clean scan is good evidence, not proof
+  (see the skill's own caveat on dynamic `:is` usage etc.) — if it finds a real consumer, surface
+  that back to the user with an `AskUserQuestion` rather than auto-aborting or auto-proceeding;
+  the user may still want it deleted (e.g. the consumer repo is itself defunct or being retired).
+  Once confirmed, delete the component file(s) and every trace this command would otherwise have
+  created or touched for it — tests, stories, `CONSUMER-STYLING.md`, skill doc, VS Code snippet,
+  any `.claude/skills/index.md` entry, and any direct references elsewhere in the repo (e.g. a
+  `MIGRATION.md` row) — then skip the rest of this command for that component.
+
+## 3. Work the checklist
+
+Go through each point below. Skip a point only when it genuinely doesn't apply (state why,
+briefly) — don't skip silently.
+
+1. **Tier folder** — if the component lives outside `01.atoms`–`05.forms`, move it with `git mv`
+   into the tier that fits (see `project_component_tiers` in memory for what each tier means).
+   If none fits cleanly, ask the user rather than guessing.
+2. **Props pattern** — confirm `interface Props` + `withDefaults(defineProps<Props>(), {...})`,
+   not options-style `defineProps({...})`. Migrate if needed.
+3. **CSS tokens** — audit every custom property in the component's `<style>` block against the
+   corrected rule (consumer relevance, not reuse count):
+   - A value a consumer could plausibly want to override — including a per-state variant like a
+     hover-only width or a dark-theme colour — must be a **public** token (`--component-name-x`),
+     consumed directly at its point of use, even if used only once.
+   - A value with no plausible consumer relevance stays **private** (`--_x`), even if used only
+     once — don't strip the prefix just because reuse is low.
+   - Fix the actual bug class this catches: a consumer-relevant value that's currently private
+     with no public fallback. That's the thing to promote, not every `--_` var you find.
+4. **CONSUMER-STYLING.md** — create or update so every public token the component exposes is
+   documented, with its default. Skip only if the component genuinely has no override surface at
+   all (no CSS custom properties, no class passthrough).
+5. **Tests** — create or bring up to date in `tests/`, following the Testing Requirements section
+   (mountSuspended, fake-timer rules, etc.). Skip only for a trivial presentational component with
+   no logic worth testing — say so explicitly if you skip.
+6. **Storybook story** — create or update `stories/*.stories.ts` with controls for props/slots
+   that warrant them (see `.claude/skills/storybook-add-story.md`).
+7. **Skill doc** — create or update `.claude/skills/components/<component-name>.md`. If the
+   component still forks `variants/` files, fold each variant's behaviour into this doc as a
+   "Variants" section per `feedback_variants_deprecated_as_own_skill_docs` — don't delete the
+   variant files yourself without asking, since consumers may still import them directly; flag it
+   to the user as a follow-up decision instead.
+8. **VS Code snippet** — create or update `.vscode/srcdev-component-{name}.code-snippets`.
+9. **Accessibility** — check for gaps beyond what already-passing tests would catch:
+   - Interactive controls (buttons, toggles, custom form-like widgets) have an accessible name —
+     visible text, `aria-label`, or `aria-labelledby`.
+   - Keyboard behaviour matches what's actually implemented — no keydown case that only calls
+     `event.preventDefault()` with a comment like "could add this later", and no screen-reader
+     copy (visible or `sr-only`) that describes an interaction the component doesn't actually
+     perform. Cross-check every claim in the copy against the handler that's supposed to back it.
+   - Focus is visible (`:focus-visible`, not a suppressed outline) on anything focusable.
+   - Live-updating or auto-advancing content (carousels, marquees, auto-dismissing toasts) has a
+     way to pause it, per WCAG 2.2.2 — a visible control, or pause-on-hover/focus at minimum.
+   - `prefers-reduced-motion` is respected for any animation that isn't purely decorative.
+10. **Localisation (no hardcoded consumer-facing text)** — grep the template and script for
+    user-visible string literals (button copy, `aria-label`/`aria-description` text, placeholder
+    text, empty-state messages, etc.) that aren't already props. This library has no i18n
+    framework dependency (see `MarqueeScroller`'s `playLabel`/`pauseLabel`/`ariaLabel`/
+    `ariaDescription` for the pattern) — promote any hardcoded copy to a string prop with the
+    existing English text as its default, so a consumer can pass translated strings from their own
+    i18n solution. Icon-only controls should also get an icon-override prop or slot (see
+    `playIcon`/`pauseIcon`/`toggle-icon`) alongside the label prop, not just the label.
+
+## 4. Wrap up
+
+- Run the relevant test file(s) and `npx vue-tsc` (or the project's usual type-check command) to
+  confirm nothing broke.
+- Summarize what changed and what you deliberately skipped (with reasons).
+- Don't stage, commit, or push — that's the user's call. Mention that running
+  `/create-commit-message` next will trigger the Component Ledger refresh automatically via the
+  existing hook, since this touches `app/components/`.

package/.claude/component-ledger/artifact-url.txt

@@ -0,0 +1 @@
+https://claude.ai/code/artifact/d3c33630-20d5-4fda-b9df-2ba2ee7f8256

package/.claude/component-ledger/audit.json

@@ -0,0 +1 @@
+{"auditedAt":"2026-09-08","rows":[{"compdir":"01.atoms/animations/animated-svg-text","tier":"01.atoms","n_vue":1,"variants":false,"legacy_props":false,"consumer_styling":true,"tests":true,"stories":true,"skill":true,"snippet":true,"priv_tokens":0,"score":5},{"compdir":"01.atoms/animations/clip-element","tier":"01.atoms","n_vue":1,"variants":false,"legacy_props":false,"consumer_styling":true,"tests":true,"stories":true,"skill":true,"snippet":true,"priv_tokens":1,"score":5},{"compdir":"01.atoms/animations/entry","tier":"01.atoms","n_vue":1,"variants":false,"legacy_props":false,"consumer_styling":false,"tests":false,"stories":true,"skill":false,"snippet":false,"priv_tokens":0,"score":1},{"compdir":"01.atoms/animations/marquee-scroller","tier":"01.atoms","n_vue":1,"variants":false,"legacy_props":false,"consumer_styling":true,"tests":true,"stories":true,"skill":true,"snippet":true,"priv_tokens":2,"score":5},{"compdir":"01.atoms/animations/scroll-reveal-frame","tier":"01.atoms","n_vue":1,"variants":false,"legacy_props":false,"consumer_styling":false,"tests":true,"stories":true,"skill":true,"snippet":false,"priv_tokens":3,"score":3},{"compdir":"01.atoms/animations/scroll-reveal-image","tier":"01.atoms","n_vue":1,"variants":false,"legacy_props":false,"consumer_styling":false,"tests":true,"stories":true,"skill":true,"snippet":false,"priv_tokens":1,"score":3},{"compdir":"01.atoms/banner-video","tier":"01.atoms","n_vue":1,"variants":false,"legacy_props":false,"consumer_styling":true,"tests":true,"stories":true,"skill":true,"snippet":true,"priv_tokens":4,"score":5},{"compdir":"01.atoms/canvas-switcher","tier":"01.atoms","n_vue":1,"variants":false,"legacy_props":false,"consumer_styling":true,"tests":true,"stories":true,"skill":true,"snippet":true,"priv_tokens":0,"score":5},{"compdir":"01.atoms/card","tier":"01.atoms","n_vue":1,"variants":false,"legacy_props":false,"consumer_styling":true,"tests":true,"stories":true,"skill":true,"snippet":true,"priv_tokens":13,"score":5},{"compdir":"01.atoms/clipped-panel","tier":"01.atoms","n_vue":1,"variants":false,"legacy_props":false,"consumer_styling":true,"tests":true,"stories":true,"skill":true,"snippet":true,"priv_tokens":1,"score":5},{"compdir":"01.atoms/content-wrappers/content-columns-2","tier":"01.atoms","n_vue":1,"variants":false,"legacy_props":false,"consumer_styling":false,"tests":true,"stories":true,"skill":false,"snippet":false,"priv_tokens":0,"score":2},{"compdir":"01.atoms/content-wrappers/content-width","tier":"01.atoms","n_vue":1,"variants":false,"legacy_props":false,"consumer_styling":false,"tests":true,"stories":true,"skill":false,"snippet":false,"priv_tokens":0,"score":2},{"compdir":"01.atoms/content-wrappers/docs-pages","tier":"01.atoms","n_vue":1,"variants":false,"legacy_props":false,"consumer_styling":false,"tests":true,"stories":true,"skill":true,"snippet":true,"priv_tokens":51,"score":4},{"compdir":"01.atoms/content-wrappers/layout-grid/layout-grid-by-cols","tier":"01.atoms","n_vue":1,"variants":false,"legacy_props":false,"consumer_styling":false,"tests":true,"stories":true,"skill":true,"snippet":false,"priv_tokens":1,"score":3},{"compdir":"01.atoms/content-wrappers/layout-grid/layout-grid-by-width","tier":"01.atoms","n_vue":1,"variants":false,"legacy_props":false,"consumer_styling":false,"tests":true,"stories":true,"skill":false,"snippet":false,"priv_tokens":1,"score":2},{"compdir":"01.atoms/cookie-consent-banner","tier":"01.atoms","n_vue":1,"variants":false,"legacy_props":false,"consumer_styling":false,"tests":true,"stories":true,"skill":true,"snippet":false,"priv_tokens":7,"score":3},{"compdir":"01.atoms/display-avatar","tier":"01.atoms","n_vue":1,"variants":false,"legacy_props":false,"consumer_styling":false,"tests":true,"stories":true,"skill":true,"snippet":false,"priv_tokens":0,"score":3},{"compdir":"01.atoms/display-banner","tier":"01.atoms","n_vue":1,"variants":false,"legacy_props":false,"consumer_styling":true,"tests":true,"stories":true,"skill":true,"snippet":true,"priv_tokens":0,"score":5},{"compdir":"01.atoms/display-dialog","tier":"01.atoms","n_vue":1,"variants":false,"legacy_props":false,"consumer_styling":true,"tests":true,"stories":true,"skill":true,"snippet":false,"priv_tokens":21,"score":4},{"compdir":"01.atoms/display-pill","tier":"01.atoms","n_vue":1,"variants":false,"legacy_props":false,"consumer_styling":false,"tests":true,"stories":true,"skill":true,"snippet":false,"priv_tokens":14,"score":3},{"compdir":"01.atoms/display-tooltip","tier":"01.atoms","n_vue":1,"variants":false,"legacy_props":false,"consumer_styling":true,"tests":true,"stories":true,"skill":true,"snippet":true,"priv_tokens":1,"score":5},{"compdir":"01.atoms/glass-panel","tier":"01.atoms","n_vue":1,"variants":false,"legacy_props":false,"consumer_styling":false,"tests":false,"stories":false,"skill":true,"snippet":false,"priv_tokens":4,"score":1},{"compdir":"01.atoms/grids/data-grid","tier":"01.atoms","n_vue":1,"variants":false,"legacy_props":false,"consumer_styling":false,"tests":true,"stories":true,"skill":true,"snippet":false,"priv_tokens":0,"score":3},{"compdir":"01.atoms/grids/grid-stack","tier":"01.atoms","n_vue":1,"variants":false,"legacy_props":false,"consumer_styling":false,"tests":true,"stories":true,"skill":true,"snippet":false,"priv_tokens":0,"score":3},{"compdir":"01.atoms/navigation/breadcrumb","tier":"01.atoms","n_vue":1,"variants":false,"legacy_props":false,"consumer_styling":true,"tests":true,"stories":true,"skill":true,"snippet":true,"priv_tokens":7,"score":5},{"compdir":"01.atoms/page-row","tier":"01.atoms","n_vue":1,"variants":false,"legacy_props":false,"consumer_styling":true,"tests":true,"stories":true,"skill":true,"snippet":false,"priv_tokens":5,"score":4},{"compdir":"01.atoms/prompt","tier":"01.atoms","n_vue":1,"variants":false,"legacy_props":false,"consumer_styling":false,"tests":true,"stories":true,"skill":true,"snippet":true,"priv_tokens":0,"score":4},{"compdir":"01.atoms/qr-code","tier":"01.atoms","n_vue":1,"variants":false,"legacy_props":false,"consumer_styling":false,"tests":true,"stories":true,"skill":true,"snippet":false,"priv_tokens":0,"score":3},{"compdir":"01.atoms/text-block","tier":"01.atoms","n_vue":1,"variants":false,"legacy_props":false,"consumer_styling":false,"tests":false,"stories":false,"skill":false,"snippet":false,"priv_tokens":0,"score":0},{"compdir":"01.atoms/text-blocks/eyebrow-text","tier":"01.atoms","n_vue":1,"variants":false,"legacy_props":false,"consumer_styling":false,"tests":true,"stories":true,"skill":true,"snippet":false,"priv_tokens":0,"score":3},{"compdir":"01.atoms/text-blocks/hero-text","tier":"01.atoms","n_vue":1,"variants":false,"legacy_props":false,"consumer_styling":false,"tests":true,"stories":true,"skill":true,"snippet":true,"priv_tokens":1,"score":4},{"compdir":"01.atoms/text-blocks/link-text","tier":"01.atoms","n_vue":1,"variants":false,"legacy_props":false,"consumer_styling":false,"tests":true,"stories":true,"skill":true,"snippet":false,"priv_tokens":0,"score":3},{"compdir":"01.atoms/toast","tier":"01.atoms","n_vue":2,"variants":false,"legacy_props":false,"consumer_styling":true,"tests":true,"stories":true,"skill":true,"snippet":true,"priv_tokens":6,"score":5},{"compdir":"02.molecules/action-menu","tier":"02.molecules","n_vue":2,"variants":false,"legacy_props":false,"consumer_styling":true,"tests":true,"stories":true,"skill":true,"snippet":false,"priv_tokens":21,"score":4},{"compdir":"02.molecules/alert-content","tier":"02.molecules","n_vue":2,"variants":false,"legacy_props":false,"consumer_styling":false,"tests":true,"stories":true,"skill":true,"snippet":false,"priv_tokens":1,"score":3},{"compdir":"02.molecules/alert-masked-content","tier":"02.molecules","n_vue":1,"variants":false,"legacy_props":false,"consumer_styling":false,"tests":true,"stories":true,"skill":false,"snippet":false,"priv_tokens":1,"score":2},{"compdir":"02.molecules/display-chip","tier":"02.molecules","n_vue":1,"variants":false,"legacy_props":false,"consumer_styling":false,"tests":true,"stories":true,"skill":true,"snippet":false,"priv_tokens":1,"score":3},{"compdir":"02.molecules/display-tooltip-defined","tier":"02.molecules","n_vue":1,"variants":false,"legacy_props":false,"consumer_styling":true,"tests":true,"stories":true,"skill":true,"snippet":true,"priv_tokens":0,"score":5},{"compdir":"02.molecules/expandable/accordian","tier":"02.molecules","n_vue":1,"variants":false,"legacy_props":false,"consumer_styling":true,"tests":true,"stories":true,"skill":true,"snippet":true,"priv_tokens":0,"score":5},{"compdir":"02.molecules/expandable/expanding-panel","tier":"02.molecules","n_vue":1,"variants":false,"legacy_props":false,"consumer_styling":true,"tests":true,"stories":true,"skill":true,"snippet":true,"priv_tokens":0,"score":5},{"compdir":"02.molecules/expandable/expanding-panel-classic","tier":"02.molecules","n_vue":1,"variants":false,"legacy_props":false,"consumer_styling":true,"tests":true,"stories":true,"skill":true,"snippet":true,"priv_tokens":0,"score":5},{"compdir":"02.molecules/input-copy","tier":"02.molecules","n_vue":1,"variants":false,"legacy_props":false,"consumer_styling":true,"tests":true,"stories":true,"skill":true,"snippet":true,"priv_tokens":16,"score":5},{"compdir":"02.molecules/navigation/deep-expanding-menu","tier":"02.molecules","n_vue":1,"variants":false,"legacy_props":false,"consumer_styling":true,"tests":true,"stories":true,"skill":true,"snippet":true,"priv_tokens":2,"score":5},{"compdir":"02.molecules/navigation/deep-expanding-menu-classic","tier":"02.molecules","n_vue":1,"variants":false,"legacy_props":false,"consumer_styling":true,"tests":true,"stories":true,"skill":true,"snippet":true,"priv_tokens":1,"score":5},{"compdir":"02.molecules/navigation/navigation-horizontal","tier":"02.molecules","n_vue":1,"variants":false,"legacy_props":false,"consumer_styling":false,"tests":true,"stories":true,"skill":true,"snippet":false,"priv_tokens":20,"score":3},{"compdir":"02.molecules/navigation/site-navigation","tier":"02.molecules","n_vue":1,"variants":false,"legacy_props":false,"consumer_styling":false,"tests":true,"stories":true,"skill":true,"snippet":true,"priv_tokens":45,"score":4},{"compdir":"02.molecules/navigation/tab-navigation","tier":"02.molecules","n_vue":1,"variants":false,"legacy_props":false,"consumer_styling":true,"tests":true,"stories":true,"skill":true,"snippet":true,"priv_tokens":28,"score":5},{"compdir":"02.molecules/price-list","tier":"02.molecules","n_vue":1,"variants":false,"legacy_props":false,"consumer_styling":false,"tests":true,"stories":true,"skill":false,"snippet":false,"priv_tokens":8,"score":2},{"compdir":"02.molecules/pricing-card","tier":"02.molecules","n_vue":1,"variants":false,"legacy_props":false,"consumer_styling":true,"tests":true,"stories":true,"skill":true,"snippet":true,"priv_tokens":28,"score":5},{"compdir":"02.molecules/profile-section","tier":"02.molecules","n_vue":1,"variants":false,"legacy_props":false,"consumer_styling":false,"tests":true,"stories":true,"skill":true,"snippet":false,"priv_tokens":0,"score":3},{"compdir":"02.molecules/qr-code","tier":"02.molecules","n_vue":2,"variants":false,"legacy_props":false,"consumer_styling":false,"tests":true,"stories":true,"skill":true,"snippet":false,"priv_tokens":0,"score":3},{"compdir":"02.molecules/samaritan-prompt","tier":"02.molecules","n_vue":2,"variants":false,"legacy_props":false,"consumer_styling":false,"tests":true,"stories":false,"skill":true,"snippet":false,"priv_tokens":14,"score":2},{"compdir":"02.molecules/social-icons-list","tier":"02.molecules","n_vue":1,"variants":false,"legacy_props":false,"consumer_styling":false,"tests":true,"stories":true,"skill":true,"snippet":false,"priv_tokens":2,"score":3},{"compdir":"02.molecules/stepper-list","tier":"02.molecules","n_vue":1,"variants":false,"legacy_props":false,"consumer_styling":true,"tests":true,"stories":true,"skill":true,"snippet":false,"priv_tokens":22,"score":4},{"compdir":"03.organisms/colour-finder","tier":"03.organisms","n_vue":1,"variants":false,"legacy_props":false,"consumer_styling":false,"tests":false,"stories":false,"skill":false,"snippet":false,"priv_tokens":20,"score":0},{"compdir":"03.organisms/image-galleries/slider-gallery","tier":"03.organisms","n_vue":1,"variants":false,"legacy_props":false,"consumer_styling":false,"tests":true,"stories":true,"skill":false,"snippet":true,"priv_tokens":12,"score":3},{"compdir":"03.organisms/responsive-header","tier":"03.organisms","n_vue":2,"variants":false,"legacy_props":false,"consumer_styling":true,"tests":true,"stories":true,"skill":true,"snippet":true,"priv_tokens":18,"score":5},{"compdir":"03.organisms/services/service-detail","tier":"03.organisms","n_vue":1,"variants":false,"legacy_props":false,"consumer_styling":true,"tests":true,"stories":true,"skill":true,"snippet":true,"priv_tokens":0,"score":5},{"compdir":"03.organisms/services/service-summary","tier":"03.organisms","n_vue":1,"variants":false,"legacy_props":false,"consumer_styling":true,"tests":true,"stories":true,"skill":true,"snippet":true,"priv_tokens":1,"score":5},{"compdir":"03.organisms/services/services-card","tier":"03.organisms","n_vue":1,"variants":false,"legacy_props":false,"consumer_styling":true,"tests":true,"stories":true,"skill":true,"snippet":true,"priv_tokens":0,"score":5},{"compdir":"03.organisms/services/services-grids","tier":"03.organisms","n_vue":2,"variants":false,"legacy_props":false,"consumer_styling":false,"tests":true,"stories":true,"skill":true,"snippet":false,"priv_tokens":0,"score":3},{"compdir":"03.organisms/site-header","tier":"03.organisms","n_vue":1,"variants":false,"legacy_props":false,"consumer_styling":true,"tests":true,"stories":true,"skill":true,"snippet":true,"priv_tokens":0,"score":5},{"compdir":"04.templates/page-hero-highlights","tier":"04.templates","n_vue":2,"variants":false,"legacy_props":false,"consumer_styling":false,"tests":true,"stories":true,"skill":true,"snippet":false,"priv_tokens":0,"score":3},{"compdir":"05.forms/form-errors","tier":"05.forms","n_vue":1,"variants":false,"legacy_props":false,"consumer_styling":false,"tests":true,"stories":false,"skill":false,"snippet":false,"priv_tokens":0,"score":1},{"compdir":"05.forms/form-field","tier":"05.forms","n_vue":1,"variants":false,"legacy_props":false,"consumer_styling":false,"tests":false,"stories":false,"skill":false,"snippet":false,"priv_tokens":4,"score":0},{"compdir":"05.forms/form-fieldset","tier":"05.forms","n_vue":1,"variants":false,"legacy_props":false,"consumer_styling":false,"tests":false,"stories":false,"skill":false,"snippet":false,"priv_tokens":0,"score":0},{"compdir":"05.forms/form-wrapper","tier":"05.forms","n_vue":1,"variants":false,"legacy_props":false,"consumer_styling":false,"tests":false,"stories":false,"skill":false,"snippet":false,"priv_tokens":0,"score":0},{"compdir":"05.forms/input-button","tier":"05.forms","n_vue":1,"variants":false,"legacy_props":false,"consumer_styling":true,"tests":true,"stories":true,"skill":false,"snippet":false,"priv_tokens":2,"score":3},{"compdir":"05.forms/input-checkbox","tier":"05.forms","n_vue":2,"variants":false,"legacy_props":false,"consumer_styling":false,"tests":true,"stories":false,"skill":false,"snippet":false,"priv_tokens":0,"score":1},{"compdir":"05.forms/input-checkbox-radio","tier":"05.forms","n_vue":3,"variants":false,"legacy_props":false,"consumer_styling":true,"tests":true,"stories":true,"skill":false,"snippet":false,"priv_tokens":3,"score":3},{"compdir":"05.forms/input-description","tier":"05.forms","n_vue":1,"variants":false,"legacy_props":false,"consumer_styling":false,"tests":true,"stories":false,"skill":false,"snippet":false,"priv_tokens":0,"score":1},{"compdir":"05.forms/input-label","tier":"05.forms","n_vue":1,"variants":false,"legacy_props":false,"consumer_styling":false,"tests":true,"stories":false,"skill":false,"snippet":false,"priv_tokens":0,"score":1},{"compdir":"05.forms/input-number","tier":"05.forms","n_vue":2,"variants":true,"legacy_props":false,"consumer_styling":true,"tests":false,"stories":false,"skill":false,"snippet":false,"priv_tokens":4,"score":1},{"compdir":"05.forms/input-radio","tier":"05.forms","n_vue":1,"variants":false,"legacy_props":false,"consumer_styling":false,"tests":true,"stories":false,"skill":false,"snippet":false,"priv_tokens":0,"score":1},{"compdir":"05.forms/input-range","tier":"05.forms","n_vue":2,"variants":true,"legacy_props":false,"consumer_styling":false,"tests":false,"stories":false,"skill":false,"snippet":false,"priv_tokens":0,"score":0},{"compdir":"05.forms/input-range-fancy","tier":"05.forms","n_vue":2,"variants":false,"legacy_props":false,"consumer_styling":false,"tests":false,"stories":false,"skill":false,"snippet":false,"priv_tokens":0,"score":0},{"compdir":"05.forms/input-select","tier":"05.forms","n_vue":2,"variants":true,"legacy_props":false,"consumer_styling":true,"tests":false,"stories":true,"skill":false,"snippet":false,"priv_tokens":6,"score":2},{"compdir":"05.forms/input-text","tier":"05.forms","n_vue":4,"variants":true,"legacy_props":false,"consumer_styling":true,"tests":false,"stories":true,"skill":false,"snippet":false,"priv_tokens":5,"score":2},{"compdir":"05.forms/input-textarea","tier":"05.forms","n_vue":2,"variants":true,"legacy_props":false,"consumer_styling":false,"tests":false,"stories":true,"skill":false,"snippet":false,"priv_tokens":0,"score":1},{"compdir":"05.forms/pending-effect","tier":"05.forms","n_vue":1,"variants":false,"legacy_props":false,"consumer_styling":false,"tests":false,"stories":false,"skill":false,"snippet":false,"priv_tokens":0,"score":0},{"compdir":"05.forms/toggle-switch","tier":"05.forms","n_vue":3,"variants":true,"legacy_props":false,"consumer_styling":true,"tests":false,"stories":true,"skill":false,"snippet":true,"priv_tokens":15,"score":3},{"compdir":"05.forms/triple-toggle-switch","tier":"05.forms","n_vue":1,"variants":false,"legacy_props":false,"consumer_styling":true,"tests":false,"stories":true,"skill":false,"snippet":false,"priv_tokens":11,"score":2},{"compdir":"alert-mask","tier":"NONE","n_vue":1,"variants":false,"legacy_props":true,"consumer_styling":false,"tests":true,"stories":false,"skill":false,"snippet":false,"priv_tokens":0,"score":1},{"compdir":"carousels","tier":"NONE","n_vue":3,"variants":false,"legacy_props":true,"consumer_styling":false,"tests":true,"stories":true,"skill":true,"snippet":false,"priv_tokens":6,"score":3},{"compdir":"container-glow","tier":"NONE","n_vue":1,"variants":false,"legacy_props":false,"consumer_styling":false,"tests":true,"stories":true,"skill":false,"snippet":false,"priv_tokens":0,"score":2},{"compdir":"display-theme-switch","tier":"NONE","n_vue":1,"variants":false,"legacy_props":false,"consumer_styling":false,"tests":false,"stories":true,"skill":false,"snippet":false,"priv_tokens":8,"score":1},{"compdir":"glowing-border","tier":"NONE","n_vue":1,"variants":false,"legacy_props":true,"consumer_styling":false,"tests":false,"stories":true,"skill":false,"snippet":false,"priv_tokens":0,"score":1},{"compdir":"layout-grids","tier":"NONE","n_vue":2,"variants":false,"legacy_props":true,"consumer_styling":false,"tests":true,"stories":true,"skill":false,"snippet":false,"priv_tokens":3,"score":2},{"compdir":"masonry-grid","tier":"NONE","n_vue":1,"variants":false,"legacy_props":true,"consumer_styling":false,"tests":false,"stories":false,"skill":false,"snippet":false,"priv_tokens":4,"score":0},{"compdir":"masonry-grid-ordered","tier":"NONE","n_vue":2,"variants":false,"legacy_props":true,"consumer_styling":false,"tests":false,"stories":true,"skill":false,"snippet":false,"priv_tokens":12,"score":1},{"compdir":"masonry-grid-sorted","tier":"NONE","n_vue":1,"variants":false,"legacy_props":true,"consumer_styling":false,"tests":false,"stories":false,"skill":false,"snippet":false,"priv_tokens":3,"score":0},{"compdir":"parallax","tier":"NONE","n_vue":1,"variants":false,"legacy_props":false,"consumer_styling":false,"tests":false,"stories":false,"skill":true,"snippet":false,"priv_tokens":0,"score":1},{"compdir":"pop-over","tier":"NONE","n_vue":1,"variants":false,"legacy_props":true,"consumer_styling":false,"tests":false,"stories":false,"skill":false,"snippet":false,"priv_tokens":0,"score":0},{"compdir":"rotating-carousel","tier":"NONE","n_vue":1,"variants":false,"legacy_props":true,"consumer_styling":false,"tests":false,"stories":false,"skill":false,"snippet":false,"priv_tokens":5,"score":0},{"compdir":"skip-links","tier":"NONE","n_vue":1,"variants":false,"legacy_props":false,"consumer_styling":false,"tests":false,"stories":false,"skill":false,"snippet":false,"priv_tokens":0,"score":0},{"compdir":"tabs","tier":"NONE","n_vue":1,"variants":false,"legacy_props":true,"consumer_styling":false,"tests":false,"stories":false,"skill":false,"snippet":false,"priv_tokens":11,"score":0},{"compdir":"test-storybook","tier":"NONE","n_vue":1,"variants":false,"legacy_props":true,"consumer_styling":false,"tests":false,"stories":true,"skill":false,"snippet":false,"priv_tokens":0,"score":1},{"compdir":"typography","tier":"NONE","n_vue":1,"variants":false,"legacy_props":false,"consumer_styling":false,"tests":false,"stories":false,"skill":false,"snippet":false,"priv_tokens":0,"score":0},{"compdir":"ui-block-decorated","tier":"NONE","n_vue":1,"variants":false,"legacy_props":true,"consumer_styling":false,"tests":false,"stories":false,"skill":false,"snippet":false,"priv_tokens":0,"score":0},{"compdir":"view-timeline","tier":"NONE","n_vue":1,"variants":false,"legacy_props":true,"consumer_styling":false,"tests":false,"stories":false,"skill":false,"snippet":false,"priv_tokens":0,"score":0}]}

package/.claude/component-ledger/build.mjs

@@ -0,0 +1,111 @@
+// Regenerates .claude/component-ledger/audit.json (raw data) and output.html (ready to
+// publish as the Component Ledger artifact) from the current state of the repo.
+//
+// Run from the repo root: node .claude/component-ledger/build.mjs
+//
+// Checked against the standard in memory (project_component_compliance_standard.md) and
+// CLAUDE.md's Development Workflow / Styling Methodology sections.
+import fs from "fs";
+import path from "path";
+import { fileURLToPath } from "url";
+
+const here = path.dirname(fileURLToPath(import.meta.url));
+const root = path.resolve(here, "../.."); // repo root
+const componentsRoot = path.join(root, "app/components");
+
+function walk(dir, out = []) {
+  for (const entry of fs.readdirSync(dir, { withFileTypes: true })) {
+    const full = path.join(dir, entry.name);
+    if (entry.isDirectory()) walk(full, out);
+    else if (entry.name.endsWith(".vue")) out.push(full);
+  }
+  return out;
+}
+
+const vueFiles = walk(componentsRoot).filter(
+  (f) => !f.split(path.sep).includes("tests") && !f.split(path.sep).includes("stories")
+);
+
+function toKebab(name) {
+  return name.replace(/(?<!^)(?=[A-Z])/g, "-").toLowerCase();
+}
+
+const skillsDir = path.join(root, ".claude/skills/components");
+const skills = new Set(
+  fs.existsSync(skillsDir)
+    ? fs.readdirSync(skillsDir).filter((f) => f.endsWith(".md")).map((f) => f.slice(0, -3))
+    : []
+);
+const vscodeDir = path.join(root, ".vscode");
+const snippets = fs.existsSync(vscodeDir)
+  ? fs.readdirSync(vscodeDir).filter((f) => f.endsWith(".code-snippets"))
+  : [];
+
+const groups = new Map();
+for (const vf of vueFiles) {
+  const d = path.dirname(vf);
+  const base = path.basename(d);
+  const compdir = base === "variants" ? path.dirname(d) : d;
+  if (!groups.has(compdir)) groups.set(compdir, []);
+  groups.get(compdir).push(vf);
+}
+
+const rows = [];
+for (const [compdir, files] of [...groups.entries()].sort()) {
+  const relDir = path.relative(componentsRoot, compdir);
+  const tierMatch = compdir.match(/app\/components\/(0\d\.\w+)\//);
+  const tier = tierMatch ? tierMatch[1] : "NONE";
+  const hasConsumerStyling = fs.existsSync(path.join(compdir, "CONSUMER-STYLING.md"));
+  const hasTests =
+    fs.existsSync(path.join(compdir, "tests")) && fs.statSync(path.join(compdir, "tests")).isDirectory();
+  const hasStoriesDir =
+    fs.existsSync(path.join(compdir, "stories")) && fs.statSync(path.join(compdir, "stories")).isDirectory();
+  const hasStoriesFile = fs.readdirSync(compdir).some((f) => f.endsWith(".stories.ts"));
+  const vueNames = files.map((f) => toKebab(path.basename(f, ".vue")));
+  const kebabDir = path.basename(compdir);
+  const skillHit = skills.has(kebabDir) || vueNames.some((v) => skills.has(v));
+  const snippetHit = snippets.some((s) => s.includes(kebabDir) || vueNames.some((v) => s.includes(v)));
+  let privCount = 0;
+  for (const f of files) {
+    const content = fs.readFileSync(f, "utf-8");
+    const m = content.match(/--_[\w-]+/g);
+    privCount += m ? new Set(m).size : 0;
+  }
+  const hasVariants = files.some((f) => path.basename(path.dirname(f)) === "variants");
+  // Legacy options-style props: `defineProps({ ... })` rather than `defineProps<Props>(...)`.
+  // A plain regex on `defineProps<` is enough to clear a file — anything calling defineProps
+  // without that generic is assumed options-style.
+  const hasLegacyProps = files.some((f) => {
+    const content = fs.readFileSync(f, "utf-8");
+    return /defineProps\s*\(/.test(content) && !/defineProps\s*<.+?>\s*\(/s.test(content);
+  });
+  rows.push({
+    compdir: relDir,
+    tier,
+    n_vue: files.length,
+    variants: hasVariants,
+    legacy_props: hasLegacyProps,
+    consumer_styling: hasConsumerStyling,
+    tests: hasTests,
+    stories: hasStoriesDir || hasStoriesFile,
+    skill: skillHit,
+    snippet: snippetHit,
+    priv_tokens: privCount,
+  });
+}
+
+rows.forEach((d) => {
+  d.score = ["consumer_styling", "tests", "stories", "skill", "snippet"].filter((k) => d[k]).length;
+});
+
+const auditedAt = new Date().toISOString().slice(0, 10);
+const payload = { auditedAt, rows };
+
+fs.writeFileSync(path.join(here, "audit.json"), JSON.stringify(payload));
+
+const template = fs.readFileSync(path.join(here, "template.html"), "utf-8");
+const output = template.replace("__PAYLOAD__", JSON.stringify(payload));
+fs.writeFileSync(path.join(here, "output.html"), output);
+
+console.log(`Component Ledger rebuilt: ${rows.length} groups, ${rows.reduce((s, d) => s + d.n_vue, 0)} .vue files.`);
+console.log(`Output: ${path.join(here, "output.html")}`);