srcdev-nuxt-components 9.4.12 → 9.5.1

package/.claude/component-ledger/template.html

@@ -1,569 +0,0 @@
-<title>Component Ledger</title>
-<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap">
-<style>
-:root{
-  --paper:#eef0ea;
-  --surface:#ffffff;
-  --surface-2:#e4e7de;
-  --ink:#1b2420;
-  --ink-soft:#51594f;
-  --ink-faint:#838a7c;
-  --line:#cdd2c4;
-  --accent:#2f6f5e;
-  --accent-soft:#dce9e2;
-  --warn:#9c6a1f;
-  --warn-soft:#f3e4c8;
-  --bad:#a1423a;
-  --bad-soft:#f4dcd8;
-  --shadow: 0 1px 2px rgba(27,36,32,0.06), 0 8px 24px -12px rgba(27,36,32,0.18);
-}
-@media (prefers-color-scheme: dark){
-  :root:not([data-theme="light"]){
-    --paper:#12160f;
-    --surface:#191f18;
-    --surface-2:#222922;
-    --ink:#e7ebe0;
-    --ink-soft:#aab2a0;
-    --ink-faint:#707868;
-    --line:#333c30;
-    --accent:#67b79d;
-    --accent-soft:#1e3630;
-    --warn:#d9a54f;
-    --warn-soft:#3a2f18;
-    --bad:#e0847b;
-    --bad-soft:#3d201d;
-    --shadow: 0 1px 2px rgba(0,0,0,0.4), 0 8px 24px -12px rgba(0,0,0,0.6);
-  }
-}
-:root[data-theme="dark"]{
-  --paper:#12160f;
-  --surface:#191f18;
-  --surface-2:#222922;
-  --ink:#e7ebe0;
-  --ink-soft:#aab2a0;
-  --ink-faint:#707868;
-  --line:#333c30;
-  --accent:#67b79d;
-  --accent-soft:#1e3630;
-  --warn:#d9a54f;
-  --warn-soft:#3a2f18;
-  --bad:#e0847b;
-  --bad-soft:#3d201d;
-  --shadow: 0 1px 2px rgba(0,0,0,0.4), 0 8px 24px -12px rgba(0,0,0,0.6);
-}
-
-*{box-sizing:border-box;}
-body{
-  background:var(--paper);
-  color:var(--ink);
-  font-family:"IBM Plex Sans", system-ui, sans-serif;
-  font-size:1.4rem;
-  line-height:1.5;
-}
-.mono{font-family:"IBM Plex Mono","SFMono-Regular",Menlo,monospace;}
-::selection{background:var(--accent-soft); color:var(--ink);}
-
-.wrap{
-  max-width:112rem;
-  margin:0 auto;
-  padding:4.8rem 3.2rem 8rem;
-}
-
-/* ---------- header ---------- */
-header.top{
-  display:flex;
-  justify-content:space-between;
-  align-items:flex-end;
-  gap:3.2rem;
-  border-bottom:0.1rem solid var(--line);
-  padding-bottom:2.4rem;
-  margin-bottom:3.2rem;
-  flex-wrap:wrap;
-}
-.title-block .eyebrow{
-  font-family:"IBM Plex Mono", monospace;
-  font-size:1.1rem;
-  letter-spacing:0.14em;
-  text-transform:uppercase;
-  color:var(--accent);
-  margin:0 0 0.8rem;
-}
-h1{
-  font-size:3.4rem;
-  font-weight:700;
-  margin:0 0 0.6rem;
-  text-wrap:balance;
-  letter-spacing:-0.01em;
-}
-.title-block p{
-  margin:0;
-  max-width:56rem;
-  color:var(--ink-soft);
-  font-size:1.5rem;
-}
-.meta-block{
-  text-align:right;
-  font-family:"IBM Plex Mono", monospace;
-  font-size:1.2rem;
-  color:var(--ink-faint);
-  white-space:nowrap;
-}
-.meta-block strong{color:var(--ink-soft); font-weight:500;}
-
-/* ---------- stat strip ---------- */
-.stats{
-  display:grid;
-  grid-template-columns:repeat(6, 1fr);
-  gap:1.2rem;
-  margin-bottom:3.6rem;
-}
-.stat{
-  background:var(--surface);
-  border:0.1rem solid var(--line);
-  border-radius:0.6rem;
-  padding:1.6rem 1.6rem 1.4rem;
-  box-shadow:var(--shadow);
-}
-.stat .num{
-  font-family:"IBM Plex Mono", monospace;
-  font-variant-numeric:tabular-nums;
-  font-size:2.6rem;
-  font-weight:600;
-  line-height:1;
-}
-.stat .label{
-  margin-top:0.6rem;
-  font-size:1.15rem;
-  color:var(--ink-soft);
-  text-transform:uppercase;
-  letter-spacing:0.05em;
-}
-.stat .bar{
-  margin-top:1rem;
-  height:0.4rem;
-  border-radius:99rem;
-  background:var(--surface-2);
-  overflow:hidden;
-}
-.stat .bar > span{
-  display:block;
-  height:100%;
-  background:var(--accent);
-  border-radius:99rem;
-}
-.stat.low .bar > span{background:var(--bad);}
-.stat.mid .bar > span{background:var(--warn);}
-
-/* ---------- narrative ---------- */
-.finding{
-  display:grid;
-  grid-template-columns:1.4fr 1fr;
-  gap:2.4rem;
-  margin-bottom:4rem;
-}
-@media (max-width:820px){ .finding{grid-template-columns:1fr;} }
-.finding h2{
-  font-size:1.9rem;
-  margin:0 0 1rem;
-}
-.finding p{margin:0 0 1rem; color:var(--ink-soft);}
-.finding p:last-child{margin-bottom:0;}
-.finding .card{
-  background:var(--surface);
-  border:0.1rem solid var(--line);
-  border-radius:0.6rem;
-  padding:2rem 2.2rem;
-  box-shadow:var(--shadow);
-}
-.card ol, .card ul{margin:0; padding-left:1.8rem;}
-.card li{margin-bottom:0.7rem; color:var(--ink-soft);}
-.card li:last-child{margin-bottom:0;}
-.card li strong{color:var(--ink);}
-
-/* ---------- controls ---------- */
-.controls{
-  display:flex;
-  flex-wrap:wrap;
-  align-items:center;
-  gap:1rem;
-  margin-bottom:1.6rem;
-}
-.chip-group{display:flex; flex-wrap:wrap; gap:0.6rem;}
-.chip{
-  font-family:"IBM Plex Mono", monospace;
-  font-size:1.15rem;
-  padding:0.5rem 1.1rem;
-  border-radius:99rem;
-  border:0.1rem solid var(--line);
-  background:var(--surface);
-  color:var(--ink-soft);
-  cursor:pointer;
-  transition:background .12s, color .12s, border-color .12s;
-}
-.chip:hover{border-color:var(--accent);}
-.chip.active{
-  background:var(--ink);
-  border-color:var(--ink);
-  color:var(--paper);
-}
-.search{
-  margin-left:auto;
-  display:flex;
-  align-items:center;
-  gap:0.6rem;
-  background:var(--surface);
-  border:0.1rem solid var(--line);
-  border-radius:0.5rem;
-  padding:0.5rem 1rem;
-}
-.search input{
-  border:none;
-  background:transparent;
-  outline:none;
-  font-family:"IBM Plex Mono", monospace;
-  font-size:1.3rem;
-  color:var(--ink);
-  width:18rem;
-}
-.search input::placeholder{color:var(--ink-faint);}
-.count-note{
-  font-family:"IBM Plex Mono", monospace;
-  font-size:1.15rem;
-  color:var(--ink-faint);
-  margin-bottom:1rem;
-}
-
-/* ---------- table ---------- */
-.table-scroll{
-  overflow-x:auto;
-  border:0.1rem solid var(--line);
-  border-radius:0.6rem;
-  box-shadow:var(--shadow);
-}
-table{
-  width:100%;
-  border-collapse:collapse;
-  background:var(--surface);
-  min-width:78rem;
-}
-thead th{
-  position:sticky;
-  top:0;
-  background:var(--surface-2);
-  z-index:2;
-  text-align:left;
-  font-size:1.05rem;
-  text-transform:uppercase;
-  letter-spacing:0.05em;
-  color:var(--ink-soft);
-  font-weight:600;
-  padding:1rem 1rem;
-  border-bottom:0.1rem solid var(--line);
-  cursor:pointer;
-  white-space:nowrap;
-  user-select:none;
-}
-thead th:hover{color:var(--ink);}
-thead th.sorted::after{content:" ▾"; color:var(--accent);}
-thead th.sorted.asc::after{content:" ▴";}
-tbody td{
-  padding:0.9rem 1rem;
-  border-bottom:0.1rem solid var(--line);
-  font-size:1.3rem;
-  vertical-align:middle;
-}
-tbody tr:last-child td{border-bottom:none;}
-tbody tr:hover td{background:var(--surface-2);}
-td.path{
-  font-family:"IBM Plex Mono", monospace;
-  font-size:1.2rem;
-  color:var(--ink);
-}
-td.path .n{color:var(--ink-faint); font-size:1.05rem; margin-left:0.4rem;}
-.tier-pill{
-  font-family:"IBM Plex Mono", monospace;
-  font-size:1.05rem;
-  padding:0.15rem 0.6rem;
-  border-radius:0.3rem;
-  background:var(--surface-2);
-  color:var(--ink-soft);
-  white-space:nowrap;
-}
-.tier-pill.none{background:var(--bad-soft); color:var(--bad);}
-td.check{text-align:center; font-size:1.5rem; line-height:1;}
-.yes{color:var(--accent);}
-.no{color:var(--ink-faint); opacity:0.5;}
-.priv-count{
-  font-family:"IBM Plex Mono", monospace;
-  font-variant-numeric:tabular-nums;
-  font-size:1.2rem;
-}
-.priv-count.zero{color:var(--ink-faint);}
-.priv-count.some{color:var(--ink-soft);}
-.priv-count.many{color:var(--warn); font-weight:600;}
-.score-bar{
-  display:inline-flex;
-  gap:0.2rem;
-  vertical-align:middle;
-}
-.score-bar span{
-  width:0.7rem;
-  height:0.7rem;
-  border-radius:50%;
-  background:var(--surface-2);
-  border:0.1rem solid var(--line);
-}
-.score-bar span.on{background:var(--accent); border-color:var(--accent);}
-
-footer.note{
-  margin-top:2.4rem;
-  font-size:1.2rem;
-  color:var(--ink-faint);
-  max-width:80rem;
-}
-footer.note code{
-  font-family:"IBM Plex Mono", monospace;
-  background:var(--surface-2);
-  padding:0.1rem 0.4rem;
-  border-radius:0.3rem;
-}
-
-@media (max-width:900px){
-  .stats{grid-template-columns:repeat(3,1fr);}
-}
-@media (max-width:560px){
-  .stats{grid-template-columns:repeat(2,1fr);}
-  .wrap{padding:3.2rem 1.6rem 6rem;}
-  h1{font-size:2.6rem;}
-}
-</style>
-
-<div class="wrap">
-
-  <header class="top">
-    <div class="title-block">
-      <p class="eyebrow">nuxt-components · definition of done</p>
-      <h1>Component Ledger</h1>
-      <p>A scripted pass over every component folder against the current standard: tier placement, consumer styling docs, tests, Storybook coverage, public skill docs, and VS Code snippets. Regenerated automatically whenever a component change is staged for commit.</p>
-    </div>
-    <div class="meta-block">
-      last rebuilt <strong id="audited-at">—</strong><br>
-      <span id="rowcount">—</span> component groups · <span id="vuecount">—</span> .vue files
-    </div>
-  </header>
-
-  <section class="stats" id="stats"></section>
-
-  <section class="finding">
-    <div id="narrative"></div>
-    <div class="card">
-      <h2 style="margin-top:0;">Reference-quality components</h2>
-      <p style="margin-bottom:1rem; color:var(--ink-soft);">Pass every doc/test/story/skill/snippet check, sit in a tier, no stray <code class="mono">variants/</code> folder. Point future work at these when in doubt about the shape of "done":</p>
-      <ol id="reference-list"></ol>
-    </div>
-  </section>
-
-  <div class="controls">
-    <div class="chip-group" id="tier-filters"></div>
-    <div class="chip-group">
-      <button class="chip" data-gap-filter="0">only incomplete</button>
-    </div>
-    <div class="search">
-      <span class="mono" style="color:var(--ink-faint);">⌕</span>
-      <input type="text" id="search" placeholder="filter by path…">
-    </div>
-  </div>
-  <p class="count-note"><span id="visible-count">0</span> shown &middot; click a column heading to sort</p>
-
-  <div class="table-scroll">
-    <table>
-      <thead>
-        <tr>
-          <th data-key="compdir" data-type="str">Component</th>
-          <th data-key="tier" data-type="str">Tier</th>
-          <th data-key="consumer_styling" data-type="bool" title="CONSUMER-STYLING.md present">Styling doc</th>
-          <th data-key="priv_tokens" data-type="num" title="Count of --_ prefixed vars — informational, not a defect count; see footer">--_ vars</th>
-          <th data-key="tests" data-type="bool">Tests</th>
-          <th data-key="stories" data-type="bool">Story</th>
-          <th data-key="skill" data-type="bool">Skill doc</th>
-          <th data-key="snippet" data-type="bool">Snippet</th>
-          <th data-key="variants" data-type="bool" title="Uses a variants/ subfolder">Variants folder</th>
-          <th data-key="legacy_props" data-type="bool" title="Still options-style defineProps({...}), not defineProps&lt;Props&gt;()">Legacy props</th>
-          <th data-key="story_args_bug" data-type="bool" title="A story destructures/refs Storybook's reactive args at setup-time, so most Controls-panel changes silently stop updating the rendered story after first render">Story args bug</th>
-          <th data-key="eslint_issues" data-type="bool" title="npx eslint reports at least one error or warning on a .vue file in this group">ESLint issues</th>
-          <th data-key="score" data-type="num">Score</th>
-        </tr>
-      </thead>
-      <tbody id="tbody"></tbody>
-    </table>
-  </div>
-
-  <footer class="note">
-    <p><strong>Methodology:</strong> "Styling doc", "Tests", "Story" and "Variants folder" are filesystem checks (<code>CONSUMER-STYLING.md</code>, a <code>tests/</code> dir, a <code>stories/</code> dir or <code>*.stories.ts</code> file, a <code>variants/</code> subfolder). "Skill doc" and "Snippet" match the component's kebab-case name against <code>.claude/skills/components/*.md</code> and <code>.vscode/*.code-snippets</code> &mdash; a small number of near-miss names may read as false negatives and are worth a manual glance before acting. "Score" is the count of the five doc/test/story/skill/snippet checks passed, out of 5, and is what "reference-quality" and "only incomplete" are based on. "Legacy props" is a source check for options-style <code>defineProps({...})</code> rather than <code>defineProps&lt;Props&gt;()</code> &mdash; like "Variants folder" it is <em>not</em> counted in the 5-point score (deliberately, so it stays visible instead of vanishing into an already-high score), but it does factor into "reference-quality" and "only incomplete", same as "Variants folder".</p>
-    <p style="margin-top:0.8rem;"><strong>"Story args bug"</strong> flags a story whose <code>setup()</code> destructures or spreads Storybook's <code>args</code> into local variables/refs at mount time (e.g. <code>const { modelValue, ...otherArgs } = args;</code> then <code>ref(modelValue)</code>). @storybook/vue3 mounts the story component once and mutates the same <code>args</code> object in place on every Controls change &mdash; it does not re-run <code>setup()</code> &mdash; so a destructured copy freezes at its initial value and most Controls silently stop updating the rendered story after first render. The fix is to bind the template straight to <code>args.x</code> (optionally through a <code>computed()</code> that strips non-prop extra args), never to a value copied out in <code>setup()</code>. Also not counted in the 5-point score, for the same reason as "Legacy props".</p>
-    <p style="margin-top:0.8rem;"><strong>"ESLint issues"</strong> runs <code>npx eslint</code> across every <code>.vue</code> file under <code>app/components/</code> once per build and flags a group if any of its files reported an error or a warning. Added 2026-09-21 after fixing a dead <code>const props = withDefaults(...)</code> in <code>InputRangeCore</code> (the assignment's value was never read once its only reference &mdash; a since-removed dead computed &mdash; was cleaned up) and finding the same pattern live in <code>FormField</code>/<code>FormWrapper</code>. It also currently flags 13 groups for <code>vue/require-default-prop</code> firing on <code>defineModel()</code>-declared props, an eslint-plugin-vue rule with no options to exempt models (it predates <code>defineModel</code>) &mdash; the fix there is <code>defineModel&lt;T&gt;({'{'} required: true {'}'})</code> where the native element genuinely can't be meaningfully "empty" (matching what <code>InputRangeCore</code>/<code>InputRangeDefault</code> now do), not a blanket rule disable or an artificial default value. Not counted in the 5-point score, same reasoning as "Legacy props"/"Story args bug".</p>
-    <p style="margin-top:0.8rem;"><strong>On <code>--_</code> vars:</strong> the public/private split is decided by consumer relevance, not reuse count &mdash; a private var is correct even used once, as long as the value has no plausible consumer override. This column is a raw count of <code>--_</code>-prefixed CSS custom properties per group; it is <em>not</em> scored and doesn't factor into "reference-quality" or "score." A high count is only a prompt to check each one by hand for a value that should have been public (a colour, size, or per-state variant with no override token) &mdash; the bug class the <code>ServicesCard</code> fix (CLAUDE.md pitfall #20) caught, not the presence of the prefix itself.</p>
-    <p style="margin-top:0.8rem;"><strong>This page regenerates from <code>.claude/component-ledger/build.mjs</code></strong>, triggered whenever a staged commit touches <code>app/components/</code> (see the <code>create-commit-message</code> skill's hook). All numbers on this page, including the narrative above, are computed live from the latest scan &mdash; nothing here is hand-written prose that can drift out of date.</p>
-  </footer>
-
-</div>
-
-<script>
-const PAYLOAD = __PAYLOAD__;
-const DATA = PAYLOAD.rows;
-
-document.getElementById("audited-at").textContent = PAYLOAD.auditedAt;
-document.getElementById("rowcount").textContent = DATA.length;
-document.getElementById("vuecount").textContent = DATA.reduce((s,d) => s + d.n_vue, 0);
-
-// ---- stat strip ----
-const statDefs = [
-  { key:"consumer_styling", label:"Styling doc" },
-  { key:"tests", label:"Tests" },
-  { key:"stories", label:"Story" },
-  { key:"skill", label:"Skill doc" },
-  { key:"snippet", label:"Snippet" },
-  { key:"placed", label:"In a tier", derive:d => d.tier !== "NONE" },
-];
-const statsEl = document.getElementById("stats");
-statDefs.forEach(sd => {
-  const count = DATA.filter(d => sd.derive ? sd.derive(d) : d[sd.key]).length;
-  const pct = DATA.length ? Math.round((count / DATA.length) * 100) : 0;
-  const cls = pct < 40 ? "low" : pct < 70 ? "mid" : "";
-  const el = document.createElement("div");
-  el.className = "stat " + cls;
-  el.innerHTML = `
-    <div class="num">${pct}<span style="font-size:1.5rem;">%</span></div>
-    <div class="label">${sd.label} &middot; ${count}/${DATA.length}</div>
-    <div class="bar"><span style="width:${pct}%"></span></div>
-  `;
-  statsEl.appendChild(el);
-});
-
-// ---- dynamic narrative (every number computed from DATA, nothing hand-written) ----
-const fullyCompliant = DATA.filter(d => d.score === 5 && d.tier !== "NONE" && !d.variants && !d.legacy_props && !d.story_args_bug && !d.eslint_issues);
-const unplaced = DATA.filter(d => d.tier === "NONE");
-const forkedVariants = DATA.filter(d => d.variants);
-const legacyProps = DATA.filter(d => d.legacy_props);
-const storyArgsBug = DATA.filter(d => d.story_args_bug);
-const eslintIssues = DATA.filter(d => d.eslint_issues);
-const noSkillAndUnplaced = unplaced.filter(d => !d.skill).length;
-const topPrivate = DATA.filter(d => d.priv_tokens > 0).sort((a,b) => b.priv_tokens - a.priv_tokens).slice(0, 3);
-
-const narrativeEl = document.getElementById("narrative");
-narrativeEl.innerHTML = `
-  <h2>What's dragging the average down</h2>
-  <p>Only <strong>${fullyCompliant.length} of ${DATA.length}</strong> component groups clear every check. The gaps cluster in a predictable order: the older a component, the less likely it ever got a skill doc or CONSUMER-STYLING.md written for it, because both postdate a lot of what's in this tree.</p>
-  <p><strong>${unplaced.length} groups</strong> still sit loose at <code class="mono">app/components/</code> top level rather than inside a numbered tier. ${noSkillAndUnplaced} of those ${unplaced.length} also have no skill doc &mdash; an unplaced component tends to also be an undocumented one.</p>
-  <p>${forkedVariants.length ? `<strong>${forkedVariants.length} group${forkedVariants.length===1?"":"s"}</strong> still fork${forkedVariants.length===1?"s":""} variants into a <code class="mono">variants/</code> subfolder &mdash; deprecated in favour of documenting the variation in the parent skill.md.` : `No component groups currently fork variants into a <code class="mono">variants/</code> subfolder.`}</p>
-  <p>${legacyProps.length ? `<strong>${legacyProps.length} group${legacyProps.length===1?"":"s"}</strong> still use${legacyProps.length===1?"s":""} options-style <code class="mono">defineProps({...})</code> instead of <code class="mono">defineProps&lt;Props&gt;()</code> &mdash; this doesn't move the 5-point score, so it can hide behind an otherwise-complete-looking group.` : `No component groups currently use options-style defineProps.`}</p>
-  <p>${storyArgsBug.length ? `<strong>${storyArgsBug.length} group${storyArgsBug.length===1?"":"s"}</strong> ha${storyArgsBug.length===1?"s":"ve"} a story that destructures/refs Storybook's <code class="mono">args</code> at setup-time (${storyArgsBug.map(d => `<code class="mono">${d.compdir.split("/").pop()}</code>`).join(", ")}) &mdash; the Controls panel silently stops updating most props on that story after first render. This doesn't move the 5-point score either, for the same reason as "Legacy props".` : `No component groups currently have this Storybook Controls reactivity bug.`}</p>
-  <p>${eslintIssues.length ? `<strong>${eslintIssues.length} group${eslintIssues.length===1?"":"s"}</strong> ha${eslintIssues.length===1?"s":"ve"} at least one live <code class="mono">npx eslint</code> finding (${eslintIssues.map(d => `<code class="mono">${d.compdir.split("/").pop()}</code>`).join(", ")}) &mdash; a component can score 5/5 on docs/tests/story/skill/snippet and still carry these. Not counted in the 5-point score, same reasoning as "Legacy props"/"Story args bug".` : `No component groups currently have a live ESLint finding.`}</p>
-  <p><strong>${topPrivate.length ? "On --_ vars:" : ""}</strong> ${topPrivate.length
-    ? `the largest private-token surfaces right now are ${topPrivate.map(d => `<code class="mono">${d.compdir.split("/").pop()}</code> (${d.priv_tokens})`).join(", ")} &mdash; worth a manual look for a value that should have been public, per the corrected rule in the footer below. A high count on its own isn't a defect.`
-    : ""}</p>
-`;
-
-// ---- reference list ----
-const refList = document.getElementById("reference-list");
-fullyCompliant.forEach(d => {
-  const li = document.createElement("li");
-  li.innerHTML = `<strong>${d.compdir.split("/").pop()}</strong>`;
-  refList.appendChild(li);
-});
-if (!refList.children.length) {
-  refList.innerHTML = "<li>No component currently clears every check.</li>";
-}
-
-// ---- tier filter chips ----
-const tiers = [...new Set(DATA.map(d => d.tier))].sort();
-const tierFilters = document.getElementById("tier-filters");
-let activeTier = "all";
-const allChip = mkChip("all components", "all");
-tierFilters.appendChild(allChip);
-tiers.forEach(t => tierFilters.appendChild(mkChip(t === "NONE" ? "unplaced" : t, t)));
-
-function mkChip(label, value){
-  const b = document.createElement("button");
-  b.className = "chip" + (value === "all" ? " active" : "");
-  b.textContent = label;
-  b.dataset.tier = value;
-  b.addEventListener("click", () => {
-    activeTier = value;
-    [...tierFilters.children].forEach(c => c.classList.toggle("active", c === b));
-    render();
-  });
-  return b;
-}
-
-let onlyIncomplete = false;
-document.querySelector("[data-gap-filter]").addEventListener("click", (e) => {
-  onlyIncomplete = !onlyIncomplete;
-  e.target.classList.toggle("active", onlyIncomplete);
-  render();
-});
-
-const searchEl = document.getElementById("search");
-searchEl.addEventListener("input", render);
-
-let sortKey = "score";
-let sortAsc = true;
-document.querySelectorAll("thead th").forEach(th => {
-  th.addEventListener("click", () => {
-    const key = th.dataset.key;
-    if (sortKey === key) sortAsc = !sortAsc;
-    else { sortKey = key; sortAsc = key !== "score"; }
-    document.querySelectorAll("thead th").forEach(t => t.classList.remove("sorted","asc"));
-    th.classList.add("sorted");
-    if (sortAsc) th.classList.add("asc");
-    render();
-  });
-});
-
-function tierLabel(t){ return t === "NONE" ? "unplaced" : t; }
-
-function render(){
-  let rows = DATA.slice();
-  if (activeTier !== "all") rows = rows.filter(d => d.tier === activeTier);
-  if (onlyIncomplete) rows = rows.filter(d => d.score < 5 || d.tier === "NONE" || d.variants || d.legacy_props || d.story_args_bug || d.eslint_issues);
-  const q = searchEl.value.trim().toLowerCase();
-  if (q) rows = rows.filter(d => d.compdir.toLowerCase().includes(q));
-
-  rows.sort((a,b) => {
-    let av = a[sortKey], bv = b[sortKey];
-    if (typeof av === "boolean") { av = av ? 1 : 0; bv = bv ? 1 : 0; }
-    if (typeof av === "string") return sortAsc ? av.localeCompare(bv) : bv.localeCompare(av);
-    return sortAsc ? av - bv : bv - av;
-  });
-
-  document.getElementById("visible-count").textContent = rows.length;
-
-  const tbody = document.getElementById("tbody");
-  tbody.innerHTML = rows.map(d => {
-    const privClass = d.priv_tokens === 0 ? "zero" : d.priv_tokens > 15 ? "many" : "some";
-    const dots = [d.consumer_styling, d.tests, d.stories, d.skill, d.snippet]
-      .map(v => `<span class="${v ? "on" : ""}"></span>`).join("");
-    return `<tr>
-      <td class="path">${d.compdir}<span class="n">${d.n_vue > 1 ? "×" + d.n_vue : ""}</span></td>
-      <td><span class="tier-pill ${d.tier === "NONE" ? "none" : ""} mono">${tierLabel(d.tier)}</span></td>
-      <td class="check">${check(d.consumer_styling)}</td>
-      <td class="priv-count ${privClass}">${d.priv_tokens}</td>
-      <td class="check">${check(d.tests)}</td>
-      <td class="check">${check(d.stories)}</td>
-      <td class="check">${check(d.skill)}</td>
-      <td class="check">${check(d.snippet)}</td>
-      <td class="check">${d.variants ? '<span class="no" style="opacity:1;color:var(--warn);">●</span>' : '<span class="no">–</span>'}</td>
-      <td class="check">${d.legacy_props ? '<span class="no" style="opacity:1;color:var(--warn);">●</span>' : '<span class="no">–</span>'}</td>
-      <td class="check">${d.story_args_bug ? '<span class="no" style="opacity:1;color:var(--warn);">●</span>' : '<span class="no">–</span>'}</td>
-      <td class="check">${d.eslint_issues ? '<span class="no" style="opacity:1;color:var(--warn);">●</span>' : '<span class="no">–</span>'}</td>
-      <td><span class="score-bar">${dots}</span></td>
-    </tr>`;
-  }).join("");
-}
-
-function check(v){
-  return v ? '<span class="yes">●</span>' : '<span class="no">–</span>';
-}
-
-render();
-</script>

package/.claude/hooks/check-component-update.sh

@@ -1,95 +0,0 @@
-#!/usr/bin/env bash
-# PostToolUse hook (Write|Edit) for app/components/*.vue files. Advisory nudges only
-# (missing != wrong): skill doc, story, test, CONSUMER-STYLING.md, .vscode snippet,
-# legacy tier-folder location, options-style defineProps, single-use private CSS tokens,
-# leftover app/pages/ demo pages (this library is Storybook-only, see Claude.md).
-
-root="${CLAUDE_PROJECT_DIR:-$(pwd)}"
-
-f=$(jq -r '.tool_input.file_path // empty')
-
-case "$f" in
-  */app/components/*.vue) ;;
-  *) exit 0 ;;
-esac
-case "$f" in
-  */tests/*|*/stories/*) exit 0 ;;
-esac
-
-name=$(basename "$f" .vue)
-skill=$(printf '%s' "$name" | sed -E 's/([a-z0-9])([A-Z])/\1-\2/g; s/([A-Z]+)([A-Z][a-z])/\1-\2/g' | tr '[:upper:]' '[:lower:]')
-dir=$(dirname "$f")
-pdir=$(dirname "$dir")
-
-# variants/ files are documented under their parent component, not standalone.
-is_variant=false
-if [[ "$(basename "$dir")" == "variants" ]]; then
-  is_variant=true
-  parent_name=$(basename "$pdir")
-fi
-
-if [[ "$is_variant" == true ]]; then
-  msg="Component file $f was edited/written. This is a variant of $parent_name — per project convention, document it inside .claude/skills/components/$parent_name.md (e.g. a \"Variants\" section) rather than creating a separate .claude/skills/components/$skill.md for it."
-else
-  msg="Component file $f was edited/written. Per Claude.md Development Workflow step 7, check whether .claude/skills/components/$skill.md needs updating to reflect this change (props/slots/models/defaults/behaviour)."
-fi
-
-shopt -s nullglob
-stories=("$dir"/stories/*.stories.ts "$pdir"/stories/*.stories.ts)
-tests=("$dir"/tests/*.spec.ts "$pdir"/tests/*.spec.ts)
-shopt -u nullglob
-
-if [[ ${#stories[@]} -eq 0 ]]; then
-  msg="$msg No Storybook story found for this component (checked $dir/stories and $pdir/stories); create one."
-fi
-
-if [[ ${#tests[@]} -eq 0 ]]; then
-  msg="$msg No test spec found for this component (checked $dir/tests and $pdir/tests); create one per the Testing Requirements."
-fi
-
-if [[ "$is_variant" != true && ! -f "$dir/CONSUMER-STYLING.md" && ! -f "$pdir/CONSUMER-STYLING.md" ]]; then
-  msg="$msg No CONSUMER-STYLING.md found for this component; create one if it exposes a real --token API or class override hook (skip it if the component genuinely has neither)."
-fi
-
-if [[ ! -f "$root/.vscode/srcdev-component-$skill.code-snippets" ]]; then
-  msg="$msg No .vscode/srcdev-component-$skill.code-snippets found; create/update it per Development Workflow step 6."
-fi
-
-case "$f" in
-  */app/components/01.atoms/*|*/app/components/02.molecules/*|*/app/components/03.organisms/*|*/app/components/04.templates/*|*/app/components/05.forms/*) ;;
-  *) msg="$msg This component lives outside the 01-05 tier folders, a legacy location; move it into the matching tier (01.atoms, 02.molecules, 03.organisms, 04.templates, 05.forms) or propose a new tier folder if none fit." ;;
-esac
-
-if grep -qE 'defineProps\(\s*\{' "$f" && ! grep -q 'defineProps<' "$f"; then
-  msg="$msg This component uses the options-style defineProps({...}) pattern, an outdated-pattern signal; migrate to interface Props + withDefaults(defineProps<Props>(), {...}) per the Props Pattern in Claude.md."
-fi
-
-# Private --_x CSS tokens that appear only twice in the file (once declared, once consumed) are
-# likely pure indirection with no reuse/computation/state to justify them — see the "Public
-# token pattern" rule in Claude.md's Styling Methodology and pitfall #20 (ServicesCard).
-private_vars=$(grep -oE -- '--_[a-zA-Z0-9-]+' "$f" | sort -u)
-if [[ -n "$private_vars" ]]; then
-  single_use=""
-  while IFS= read -r var; do
-    [[ -z "$var" ]] && continue
-    count=$(grep -oE -- "\\${var}\\b" "$f" | wc -l | tr -d ' ')
-    if [[ "$count" -le 2 ]]; then
-      single_use="$single_use $var"
-    fi
-  done <<< "$private_vars"
-  if [[ -n "$single_use" ]]; then
-    msg="$msg This component declares private CSS token(s) ($(echo "$single_use" | xargs)) that appear to be used only once — check whether each is genuinely reused across multiple declarations/selectors, composed from a v-bind() value, or swapped by a state (:hover, data-theme). If not, inline the public var(--token, default) directly at its point of use instead, per the Public token pattern rule in Claude.md's Styling Methodology (see pitfall #20 for the ServicesCard precedent), and update CONSUMER-STYLING.md/the skill doc if the token's public name or default changes."
-  fi
-fi
-
-# This library ships no demo pages — Storybook stories are the only demo surface (see Claude.md's
-# "Storybook is the only demo surface"). Flag any app/pages/ file that mentions this component,
-# whether a pre-existing leftover or a newly (re)added one.
-if [[ -d "$root/app/pages" ]]; then
-  demo_pages=$(grep -rlE "\\b${name}\\b" "$root/app/pages" 2>/dev/null | xargs)
-  if [[ -n "$demo_pages" ]]; then
-    msg="$msg Found file(s) under app/pages/ referencing $name ($demo_pages); this library has no demo pages (Storybook only) — delete them and move any demo-worthy content into the Storybook story instead."
-  fi
-fi
-
-jq -n --arg msg "$msg" '{hookSpecificOutput:{hookEventName:"PostToolUse",additionalContext:$msg}}'