srcdev-nuxt-components 9.4.4 → 9.4.5

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

@@ -0,0 +1,559 @@
+<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="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>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);
+const unplaced = DATA.filter(d => d.tier === "NONE");
+const forkedVariants = DATA.filter(d => d.variants);
+const legacyProps = DATA.filter(d => d.legacy_props);
+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><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);
+  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><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/refresh-component-ledger.sh

@@ -0,0 +1,32 @@
+#!/usr/bin/env bash
+# PostToolUse hook (Skill) — fires whenever /create-commit-message runs. If any staged file
+# touches app/components/, rebuilds the Component Ledger audit (.claude/component-ledger/) from
+# the current repo state and tells Claude to republish it to the stored artifact URL. See
+# project_component_compliance_standard.md / feedback_private_token_convention_clarified.md in
+# memory for what this ledger tracks and why.
+
+root="${CLAUDE_PROJECT_DIR:-$(pwd)}"
+cd "$root" || exit 0
+
+skill=$(jq -r '.tool_input.skill // empty')
+[[ "$skill" == "create-commit-message" ]] || exit 0
+
+# Only bother if something staged actually touches a component.
+staged_components=$(git diff --cached --name-only -- 'app/components/*' 2>/dev/null)
+[[ -n "$staged_components" ]] || exit 0
+
+node "$root/.claude/component-ledger/build.mjs" >/tmp/component-ledger-build.log 2>&1
+build_status=$?
+
+url_file="$root/.claude/component-ledger/artifact-url.txt"
+url=$(cat "$url_file" 2>/dev/null)
+
+if [[ $build_status -ne 0 ]]; then
+  msg="Staged changes touch component(s) (see: $staged_components), but rebuilding the Component Ledger failed — check /tmp/component-ledger-build.log. Fix before republishing."
+elif [[ -z "$url" ]]; then
+  msg="Staged changes touch component(s) (see: $staged_components). Component Ledger rebuilt at .claude/component-ledger/output.html, but no stored artifact URL was found at $url_file — ask the user for the ledger's URL, save it there, then republish."
+else
+  msg="Staged changes touch component(s): $(echo "$staged_components" | tr '\n' ' '). Component Ledger data rebuilt at .claude/component-ledger/output.html from the current repo state — republish it now via the Artifact tool with url=\"$url\" so the ledger reflects this change before finishing the commit message."
+fi
+
+jq -n --arg msg "$msg" '{hookSpecificOutput:{hookEventName:"PostToolUse",additionalContext:$msg}}'

package/.claude/settings.json

@@ -118,6 +118,16 @@
             "timeout": 15
           }
         ]
+      },
+      {
+        "matcher": "Skill",
+        "hooks": [
+          {
+            "type": "command",
+            "command": "bash \"${CLAUDE_PROJECT_DIR:-.}/.claude/hooks/refresh-component-ledger.sh\"",
+            "timeout": 30
+          }
+        ]
       }
     ]
   }

package/.claude/skills/components/animated-svg-text.md

@@ -0,0 +1,78 @@
+---
+name: AnimatedSvgText
+description: AnimatedSvgText inline SVG stroke-draw-then-fill animation — text slot, CSS token API
+type: reference
+---
+
+# AnimatedSvgText
+
+## Overview
+
+`AnimatedSvgText` animates SVG content placed in its `text` slot with a stroke-draw-then-fill
+effect: the outline strokes in, then the shape fills. Works with either `<path>` elements (e.g.
+letters converted to path data) or a plain SVG `<text>` element — both support `stroke`,
+`fill`, and `stroke-dasharray` per the SVG spec.
+
+## Props
+
+| Prop | Type | Default | Description |
+| ---- | ---- | ------- | ----------- |
+| `styleClassPassthrough` | `string \| string[]` | `[]` | Extra classes applied to the root `<div>`. |
+
+## Slots
+
+| Slot | Description |
+| ---- | ----------- |
+| `text` | The SVG markup to animate. Any `<path>` elements inside are targeted by the draw animation. |
+
+## Basic usage
+
+```vue
+<AnimatedSvgText>
+  <template #text>
+    <svg viewBox="0 0 600 150">
+      <path d="..." />
+    </svg>
+  </template>
+</AnimatedSvgText>
+```
+
+Or with a plain SVG `<text>` element (no need to trace letterforms to paths) — just scale
+`--animated-svg-text-stroke-width`/`-stroke-dasharray` up for a larger `viewBox`/`font-size`:
+
+```vue
+<AnimatedSvgText style="--animated-svg-text-stroke-width: 2; --animated-svg-text-stroke-dasharray: 2200;">
+  <template #text>
+    <svg viewBox="0 0 600 150">
+      <text x="0" y="110" font-size="120" font-weight="700">Hello</text>
+    </svg>
+  </template>
+</AnimatedSvgText>
+```
+
+## CSS custom properties
+
+All public — see `CONSUMER-STYLING.md` in the component folder for the full table.
+
+| Property | Default |
+| -------- | ------- |
+| `--animated-svg-text-stroke-colour` | `var(--theme-text)` |
+| `--animated-svg-text-fill-colour` | `var(--theme-text)` |
+| `--animated-svg-text-stroke-width` | `0.3` |
+| `--animated-svg-text-stroke-dasharray` | `1000` |
+| `--animated-svg-text-animation-duration` | `2s` |
+
+`--animated-svg-text-stroke-dasharray` is the one worth tuning per SVG — it should roughly match
+the total path length of the animated content; too small finishes the stroke early, too large
+makes the animation appear to stall before it starts.
+
+## Notes
+
+- The animation runs once on mount (`forwards`, 1 iteration) — no loop, no scroll trigger, no
+  replay on re-entry.
+- Previous versions of this component tried to switch colours via a `[data-color-scheme]`
+  attribute on `<html>` that nothing in this app ever set, referencing custom properties
+  (`--_animated-svg-text-stroke-light`, etc.) that were never declared anywhere — the animation's
+  colour and duration were effectively dead/undefined in production. Fixed by exposing genuine
+  public tokens that default to `var(--theme-text)`, matching the rest of the library's `--theme-*`
+  light/dark convention instead of reimplementing it per-component.