vibe-design-system 2.8.64 → 2.8.66

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vibe-design-system",
-  "version": "2.8.64",
+  "version": "2.8.66",
   "description": "Auto-generate design systems for vibe coding projects",
   "homepage": "https://vibedesign.tech",
   "repository": {

package/vds-core-template/story-generator.mjs

@@ -2525,7 +2525,7 @@ function writeFoundationsStories(foundations) {
       "",
       "export const Default: Story = {",
       "  render: () => (",
-      "    <div style={{ fontFamily: \"system-ui,sans-serif\", padding: 32, background: \"#fff\", minHeight: 500, color: \"#111\" }}>",
+      "    <div style={{ fontFamily: \"system-ui,sans-serif\", padding: 32, background: \"#fff\", minHeight: \"100vh\", width: \"100%\", color: \"#111\" }}>",
       "      <h2 style={{ fontSize: 20, fontWeight: 700, margin: \"0 0 4px\", color: \"#111\" }}>Colors</h2>",
       "      <p style={{ fontSize: 13, color: \"#888\", margin: \"0 0 40px\" }}>Design tokens defined in CSS variables — grouped by role</p>",
       "",
@@ -3815,11 +3815,193 @@ function writeComponentSuggestionsStory(componentSuggestions) {
   console.log("[VDS] Wrote " + path.relative(PROJECT_ROOT, path.join(foundationsDir, "ComponentSuggestions.stories.tsx")));
 }
 
+/**
+ * Determines the visual preview shape and colors for a component in the inventory.
+ * Returns an HTML string rendered at generation time using the project's resolved colors.
+ */
+function buildInventoryPreviewHtml(compName, category, colorSwatches, tokens) {
+  const n = compName.toLowerCase().replace(/[\s-]+/g, "");
+
+  // Extract colors from resolved swatches
+  const bgSwatch   = colorSwatches.find(s => /^bg-(?!gradient)/.test(s.token));
+  const textSwatch = colorSwatches.find(s => /^text-/.test(s.token));
+  const brdSwatch  = colorSwatches.find(s => /^border-/.test(s.token));
+  const accSwatch  = colorSwatches.find(s => s.token === "bg-primary" || s.token === "border-primary" || s.token === "ring-primary");
+
+  // Fallback neutral palette (works on white canvas)
+  const bg  = bgSwatch?.hex  || "#f3f4f6";
+  const txt = textSwatch?.hex || "#374151";
+  const brd = brdSwatch?.hex  || "#e5e7eb";
+  const acc = accSwatch?.hex  || "#6366f1";
+  // Lighten/darken helpers (inline, no deps)
+  const hex2 = (h) => { // slightly lighter bg for header strips
+    const n = parseInt(h.slice(1), 16);
+    const r = Math.min(255, (n >> 16) + 30), g = Math.min(255, ((n >> 8) & 0xff) + 30), b = Math.min(255, (n & 0xff) + 30);
+    return "#" + [r,g,b].map(x => x.toString(16).padStart(2,"0")).join("");
+  };
+
+  // Border-radius from tokens
+  const radTok = tokens.find(t => /^rounded/.test(t));
+  const rad = radTok === "rounded-none" ? 0 : radTok === "rounded-sm" ? 2 : radTok === "rounded" ? 4
+    : radTok === "rounded-md" ? 6 : radTok === "rounded-lg" ? 8 : radTok === "rounded-xl" ? 12
+    : radTok === "rounded-2xl" ? 16 : radTok === "rounded-3xl" ? 24 : radTok === "rounded-full" ? 9999 : 4;
+
+  const wrap = (inner) => `<div style="width:100%;height:56px;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:0 10px;box-sizing:border-box">${inner}</div>`;
+
+  // ── Specific component shapes ────────────────────────────────────────────
+  if (/^input$/.test(n) || (category === "Forms and Input" && /input/.test(n))) {
+    return wrap(`<div style="width:100%;max-width:200px;background:${bg};border:1px solid ${brd};border-radius:${rad}px;padding:6px 10px;display:flex;align-items:center;gap:6px;box-sizing:border-box"><div style="flex:1;height:8px;background:${txt};opacity:0.3;border-radius:2px"></div></div>`);
+  }
+  if (/^textarea$/.test(n)) {
+    return wrap(`<div style="width:100%;max-width:200px;background:${bg};border:1px solid ${brd};border-radius:${rad}px;padding:6px 10px;height:38px;box-sizing:border-box;display:flex;flex-direction:column;gap:4px"><div style="height:6px;background:${txt};opacity:0.3;border-radius:2px;width:80%"></div><div style="height:6px;background:${txt};opacity:0.2;border-radius:2px;width:50%"></div></div>`);
+  }
+  if (/^(button|submitbutton)$/.test(n) || (category === "Forms and Input" && /^button$/.test(n))) {
+    return wrap(`<div style="display:inline-flex;align-items:center;background:${acc};color:#fff;border:1px solid ${acc};border-radius:${rad}px;padding:6px 18px;font-size:11px;font-weight:600;white-space:nowrap">${compName}</div>`);
+  }
+  if (/^toggle$/.test(n)) {
+    return wrap(`<div style="display:flex;align-items:center;gap:6px"><div style="display:inline-flex;align-items:center;background:${acc};color:#fff;border-radius:${rad}px;padding:5px 12px;font-size:11px;font-weight:600">ON</div><div style="display:inline-flex;align-items:center;background:${bg};color:${txt};border:1px solid ${brd};border-radius:${rad}px;padding:5px 12px;font-size:11px">OFF</div></div>`);
+  }
+  if (/^(badge|chip|tag|lozenge|pill)$/.test(n) || category === "Status Indicators") {
+    const bBg = acc + "20"; const bTxt = acc;
+    return wrap(`<div style="display:flex;gap:6px;flex-wrap:wrap;justify-content:center"><span style="background:${bBg};color:${bTxt};border:1px solid ${brd};border-radius:${Math.max(rad,20)}px;padding:3px 10px;font-size:11px;font-weight:600">${compName}</span><span style="background:${brd}40;color:${txt};border:1px solid ${brd};border-radius:${Math.max(rad,20)}px;padding:3px 10px;font-size:11px">Default</span></div>`);
+  }
+  if (/^(checkbox|radio|radiogroup)$/.test(n)) {
+    return wrap(`<div style="display:flex;flex-direction:column;gap:5px"><div style="display:flex;align-items:center;gap:6px"><div style="width:14px;height:14px;border-radius:3px;background:${acc};flex-shrink:0"></div><div style="height:6px;background:${txt};opacity:0.35;border-radius:2px;width:50px"></div></div><div style="display:flex;align-items:center;gap:6px"><div style="width:14px;height:14px;border-radius:3px;background:${bg};border:2px solid ${brd};flex-shrink:0"></div><div style="height:6px;background:${txt};opacity:0.25;border-radius:2px;width:40px"></div></div></div>`);
+  }
+  if (/^switch$/.test(n)) {
+    return wrap(`<div style="display:flex;align-items:center;gap:12px"><div style="width:36px;height:20px;background:${acc};border-radius:9999px;position:relative;flex-shrink:0"><div style="position:absolute;right:2px;top:2px;width:16px;height:16px;background:#fff;border-radius:9999px"></div></div><div style="width:36px;height:20px;background:${brd};border-radius:9999px;position:relative;flex-shrink:0"><div style="position:absolute;left:2px;top:2px;width:16px;height:16px;background:#fff;border-radius:9999px"></div></div></div>`);
+  }
+  if (/^(select|combobox)$/.test(n)) {
+    return wrap(`<div style="width:100%;max-width:190px;background:${bg};border:1px solid ${brd};border-radius:${rad}px;padding:6px 10px;display:flex;align-items:center;gap:4px;box-sizing:border-box"><div style="flex:1;height:8px;background:${txt};opacity:0.3;border-radius:2px"></div><div style="font-size:8px;color:${txt};opacity:0.5;flex-shrink:0">▾</div></div>`);
+  }
+  if (/^slider$/.test(n)) {
+    return wrap(`<div style="width:80%;position:relative;padding:8px 0"><div style="height:4px;background:${brd};border-radius:9999px;position:relative"><div style="position:absolute;left:0;top:0;height:100%;width:60%;background:${acc};border-radius:9999px"></div><div style="position:absolute;left:calc(60% - 7px);top:50%;transform:translateY(-50%);width:14px;height:14px;background:${bg};border:2px solid ${acc};border-radius:9999px"></div></div></div>`);
+  }
+  if (/^skeleton$/.test(n) || category === "Loading") {
+    return wrap(`<div style="display:flex;flex-direction:column;gap:5px;width:80%"><div style="height:10px;background:${bg === "#f3f4f6" ? "#e5e7eb" : hex2(bg)};border-radius:${rad}px;width:100%"></div><div style="height:8px;background:${bg === "#f3f4f6" ? "#e5e7eb" : hex2(bg)};border-radius:${rad}px;width:80%;opacity:0.7"></div><div style="height:8px;background:${bg === "#f3f4f6" ? "#e5e7eb" : hex2(bg)};border-radius:${rad}px;width:60%;opacity:0.5"></div></div>`);
+  }
+  if (/^(spinner|loader)$/.test(n)) {
+    return wrap(`<div style="width:24px;height:24px;border-radius:9999px;border:3px solid ${brd};border-top-color:${acc};"></div>`);
+  }
+  if (/^(alert|banner|notification)$/.test(n) || category === "Messaging") {
+    return wrap(`<div style="display:flex;align-items:center;gap:8px;background:${acc}15;border:1px solid ${acc}40;border-left:3px solid ${acc};border-radius:${rad}px;padding:6px 10px;width:100%;max-width:220px;box-sizing:border-box"><div style="flex:1;height:7px;background:${txt};opacity:0.3;border-radius:2px"></div></div>`);
+  }
+  if (/^toast$/.test(n)) {
+    return wrap(`<div style="background:${bg};border:1px solid ${brd};border-radius:${rad}px;padding:8px 12px;width:100%;max-width:210px;box-sizing:border-box;display:flex;justify-content:space-between;align-items:center"><div style="height:7px;background:${txt};opacity:0.4;border-radius:2px;width:60%"></div><div style="font-size:9px;color:${txt};opacity:0.4">✕</div></div>`);
+  }
+  if (/^avatar$/.test(n) || /^(images and icons)$/i.test(category)) {
+    return wrap(`<div style="display:flex;gap:8px;align-items:center"><div style="width:36px;height:36px;border-radius:9999px;background:${acc};display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:#fff;flex-shrink:0">${compName.slice(0,1).toUpperCase()}</div><div style="width:28px;height:28px;border-radius:9999px;background:${bg};border:1px solid ${brd};flex-shrink:0"></div></div>`);
+  }
+  if (/^(card|tile|panel)$/.test(n) || (category === "Layout and Structure" && /^card$/.test(n))) {
+    return wrap(`<div style="background:${bg};border:1px solid ${brd};border-radius:${rad}px;padding:10px 12px;width:85%;box-sizing:border-box"><div style="height:7px;background:${txt};opacity:0.4;border-radius:2px;width:50%;margin-bottom:5px"></div><div style="height:5px;background:${txt};opacity:0.2;border-radius:2px;width:80%;margin-bottom:4px"></div><div style="height:5px;background:${txt};opacity:0.2;border-radius:2px;width:65%"></div></div>`);
+  }
+  if (/^(accordion|collapsible)$/.test(n)) {
+    return wrap(`<div style="width:85%;box-sizing:border-box"><div style="background:${bg};border:1px solid ${brd};border-radius:${rad}px;padding:7px 12px;display:flex;justify-content:space-between;align-items:center"><div style="height:7px;background:${txt};opacity:0.4;border-radius:2px;width:50%"></div><div style="font-size:10px;color:${txt};opacity:0.5">▾</div></div></div>`);
+  }
+  if (/^(dialog|modal|sheet|alertdialog)$/.test(n) || category === "Overlays and Layering") {
+    return wrap(`<div style="background:${bg};border:1px solid ${brd};border-radius:${rad}px;overflow:hidden;width:85%;box-sizing:border-box"><div style="background:${hex2(bg)};border-bottom:1px solid ${brd};padding:5px 10px;display:flex;justify-content:space-between;align-items:center"><div style="height:6px;background:${txt};opacity:0.5;border-radius:2px;width:50px"></div><div style="font-size:9px;color:${txt};opacity:0.3">✕</div></div><div style="padding:8px 10px;display:flex;flex-direction:column;gap:3px"><div style="height:5px;background:${txt};opacity:0.2;border-radius:2px;width:80%"></div><div style="height:5px;background:${txt};opacity:0.15;border-radius:2px;width:55%"></div></div></div>`);
+  }
+  if (/^drawer$/.test(n)) {
+    return wrap(`<div style="background:${bg};border:1px solid ${brd};border-radius:${rad}px ${rad}px 0 0;width:85%;box-sizing:border-box"><div style="padding:8px 12px;border-bottom:1px solid ${brd};display:flex;align-items:center;gap:6px"><div style="height:6px;background:${txt};opacity:0.4;border-radius:2px;width:60%"></div></div><div style="padding:8px 12px;display:flex;flex-direction:column;gap:3px"><div style="height:5px;background:${txt};opacity:0.2;border-radius:2px;width:100%"></div></div></div>`);
+  }
+  if (/^(tabs|tab)$/.test(n)) {
+    return wrap(`<div style="width:85%;box-sizing:border-box"><div style="display:flex;background:${bg};border-radius:${rad}px;padding:3px;gap:2px"><div style="flex:1;background:${bg === "#f3f4f6" ? "#fff" : hex2(bg)};border-radius:${Math.max(rad-2,2)}px;padding:4px 0;font-size:10px;font-weight:600;color:${txt};text-align:center">Tab 1</div><div style="flex:1;padding:4px 0;font-size:10px;color:${txt};opacity:0.5;text-align:center">Tab 2</div><div style="flex:1;padding:4px 0;font-size:10px;color:${txt};opacity:0.5;text-align:center">Tab 3</div></div></div>`);
+  }
+  if (/^(table|datatable)$/.test(n) || category === "Text and Data Display") {
+    return wrap(`<div style="border:1px solid ${brd};border-radius:${rad}px;overflow:hidden;width:85%;box-sizing:border-box"><div style="display:flex;background:${hex2(bg)};border-bottom:1px solid ${brd};padding:4px 8px;gap:8px">${[1,1,1].map(()=>`<div style="flex:1;height:5px;background:${txt};opacity:0.3;border-radius:1px"></div>`).join("")}</div><div style="display:flex;background:${bg};padding:4px 8px;gap:8px">${[1,1,1].map(()=>`<div style="flex:1;height:5px;background:${txt};opacity:0.15;border-radius:1px"></div>`).join("")}</div><div style="display:flex;background:${bg};padding:4px 8px;gap:8px;opacity:0.7">${[1,1,1].map(()=>`<div style="flex:1;height:5px;background:${txt};opacity:0.15;border-radius:1px"></div>`).join("")}</div></div>`);
+  }
+  if (/^(sidebar|appsidebar)$/.test(n)) {
+    return wrap(`<div style="display:flex;gap:6px;align-items:flex-start"><div style="background:${bg};border:1px solid ${brd};border-radius:${rad}px;width:50px;display:flex;flex-direction:column;gap:4px;padding:6px 4px"><div style="height:4px;background:${acc};border-radius:2px;width:80%;margin:0 auto"></div><div style="height:4px;background:${txt};opacity:0.25;border-radius:2px;width:70%;margin:0 auto"></div><div style="height:4px;background:${txt};opacity:0.25;border-radius:2px;width:60%;margin:0 auto"></div></div><div style="flex:1;background:${bg};border:1px solid ${brd};border-radius:${rad}px;padding:6px"><div style="height:5px;background:${txt};opacity:0.15;border-radius:2px;width:90%"></div></div></div>`);
+  }
+  if (/^(navbar|nav|navigation|breadcrumb|pagination|navigationmenu)$/.test(n) || /^Navigation$/.test(category)) {
+    return wrap(`<div style="display:flex;align-items:center;gap:8px;background:${bg};border-bottom:1px solid ${brd};padding:6px 10px;width:100%;max-width:220px;box-sizing:border-box"><div style="height:6px;background:${acc};border-radius:2px;width:35px"></div><div style="height:6px;background:${txt};opacity:0.25;border-radius:2px;width:28px"></div><div style="height:6px;background:${txt};opacity:0.25;border-radius:2px;width:32px"></div></div>`);
+  }
+  if (/^(progress)$/.test(n)) {
+    return wrap(`<div style="width:80%;box-sizing:border-box"><div style="height:6px;background:${brd};border-radius:9999px;overflow:hidden"><div style="height:100%;width:65%;background:${acc};border-radius:9999px"></div></div></div>`);
+  }
+  if (/^(dropdownmenu|contextmenu|menubar|menu)$/.test(n)) {
+    return wrap(`<div style="background:${bg};border:1px solid ${brd};border-radius:${rad}px;overflow:hidden;width:70%;box-sizing:border-box">${[["60%","#a0a"],["40%",""],["55%",""]].map(([w,a])=>`<div style="padding:4px 10px;display:flex;align-items:center;gap:6px;${a?`background:${acc}20`:``}"><div style="flex:0 0 ${w};height:5px;background:${txt};opacity:${a?0.5:0.25};border-radius:1px"></div></div>`).join("")}</div>`);
+  }
+  if (/^(popover|tooltip|hovercard)$/.test(n)) {
+    return wrap(`<div style="background:${bg};border:1px solid ${brd};border-radius:${rad}px;padding:8px 12px;width:75%;box-sizing:border-box;box-shadow:0 4px 12px rgba(0,0,0,0.1)"><div style="height:6px;background:${txt};opacity:0.3;border-radius:2px;width:60%;margin-bottom:4px"></div><div style="height:5px;background:${txt};opacity:0.2;border-radius:2px;width:80%"></div></div>`);
+  }
+  if (/^(resizable|splitpane)$/.test(n)) {
+    return wrap(`<div style="display:flex;align-items:stretch;gap:0;width:85%;height:40px"><div style="flex:1;background:${bg};border:1px solid ${brd};border-radius:${rad}px 0 0 ${rad}px"></div><div style="width:5px;background:${brd};cursor:col-resize"></div><div style="flex:1;background:${bg};border:1px solid ${brd};border-left:none;border-radius:0 ${rad}px ${rad}px 0"></div></div>`);
+  }
+  if (/^(chart|pricechart|sparkline)$/.test(n)) {
+    const pts = [22,18,28,15,24,12,20,16,26,10,22,18].map((y,x)=>`${x*14},${y}`).join(" ");
+    return wrap(`<div style="width:85%;height:40px;position:relative"><svg viewBox="0 0 168 32" style="width:100%;height:100%"><polyline points="${pts}" fill="none" stroke="${acc}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></div>`);
+  }
+  if (/^(separator)$/.test(n)) {
+    return wrap(`<div style="width:85%;height:1px;background:${brd}"></div>`);
+  }
+  // Generic page/section components → show token color stripe
+  if (colorSwatches.length > 0) {
+    const stripeW = Math.floor(100 / colorSwatches.length);
+    const stripes = colorSwatches.map(s => `<div style="flex:1;background:${s.hex};height:20px"></div>`).join("");
+    return wrap(`<div style="width:85%;display:flex;flex-direction:column;gap:5px"><div style="display:flex;border-radius:4px;overflow:hidden;height:12px">${stripes}</div><div style="height:5px;background:${txt};opacity:0.2;border-radius:2px;width:60%"></div><div style="height:5px;background:${txt};opacity:0.15;border-radius:2px;width:40%"></div></div>`);
+  }
+  // Absolute fallback: neutral box
+  return wrap(`<div style="width:85%;height:28px;background:${bg};border:1px solid ${brd};border-radius:${rad}px"></div>`);
+}
+
 /**
  * Generates Foundations/Component Inventory story.
  * Shows all project components classified by Atlassian-style functional category.
  * Every value is derived from vds-output.json — no placeholder content.
  */
+/**
+ * Single-pass JSX usage scan: returns a Set of component names (PascalCase-normalised)
+ * that actually appear as <Tag in the project's source files (excluding ui/ definitions
+ * and story files). This is used to distinguish "used in project" from "installed only".
+ */
+function buildComponentUsageSet(componentNames, projectRoot) {
+  // Pre-compute pascal names for each component
+  const patterns = componentNames.map(name => {
+    const pascal = name
+      .replace(/[-\s]+(.)/g, (_, c) => c.toUpperCase())
+      .replace(/^(.)/, c => c.toUpperCase());
+    return { name, pascal };
+  });
+
+  const usedNames = new Set();
+
+  // Resolve the shadcn ui directory path to exclude component definition files
+  // (e.g. dialog.tsx contains <DialogClose> which would falsely register Dialog as "used")
+  const uiDefDir = path.resolve(path.join(projectRoot, COMPONENTS_REL_DIR));
+
+  function walkDir(dir) {
+    let entries;
+    try { entries = fs.readdirSync(dir, { withFileTypes: true }); } catch { return; }
+    for (const entry of entries) {
+      if (entry.name.startsWith(".") || entry.name === "node_modules") continue;
+      const full = path.join(dir, entry.name);
+      if (entry.isDirectory()) {
+        // Skip: story dirs, storybook config, AND the shadcn/ui component definitions dir
+        if (["stories", ".storybook"].includes(entry.name)) continue;
+        if (path.resolve(full) === uiDefDir) continue; // shadcn ui/ — skip definitions
+        walkDir(full);
+      } else if (/\.(tsx|jsx)$/.test(entry.name) && !/\.stories\./.test(entry.name)) {
+        let src;
+        try { src = fs.readFileSync(full, "utf-8"); } catch { continue; }
+        for (const { name, pascal } of patterns) {
+          if (!usedNames.has(name) && src.includes(`<${pascal}`)) {
+            usedNames.add(name);
+          }
+        }
+      }
+    }
+  }
+
+  // Walk common source roots (excluding the component definition directories themselves)
+  const srcRoots = ["src", "client/src", "app", "pages"]
+    .map(d => path.join(projectRoot, d))
+    .filter(d => fs.existsSync(d));
+  for (const root of srcRoots) walkDir(root);
+
+  return usedNames;
+}
+
 function writeComponentInventoryStory(components, foundations) {
   if (!Array.isArray(components) || components.length === 0) return;
   const foundationsDir = path.join(STORIES_DIR, "foundations");
@@ -3833,6 +4015,10 @@ function writeComponentInventoryStory(components, foundations) {
   const categorized = {}; // category → [{ name, group, tokenCount, propCount, colorSwatches }]
   const foundColors = (foundations && foundations.colors) ? foundations.colors : {};
 
+  // Determine which components are actually used as JSX in the project source
+  const componentNames = components.map(c => c.name);
+  const usedSet = buildComponentUsageSet(componentNames, PROJECT_ROOT);
+
   for (const comp of components) {
     const g = comp.group || "Components";
     const gLower = g.toLowerCase();
@@ -3860,19 +4046,21 @@ function writeComponentInventoryStory(components, foundations) {
       })
       .filter(s => s.hex); // only swatches with resolved hex
 
-    // Representative token fingerprint (spacing + typography, max 4, no color)
-    const tokenFingerprint = tokens
-      .filter(t => !/:/.test(t) && !/^(bg|text|border|ring|from|to|fill|stroke)-/.test(t))
-      .slice(0, 4);
+    // Visual preview HTML (computed at generation time using project's resolved colors)
+    const previewHtml = buildInventoryPreviewHtml(comp.name, category, colorSwatches, tokens.filter(t => !/:/.test(t)));
+
+    // Whether this component is actually used as a JSX tag anywhere in the project source
+    const active = usedSet.has(comp.name);
 
     if (!categorized[category]) categorized[category] = [];
     categorized[category].push({
-      name:             comp.name,
-      group:            g,
-      tokenCount:       tokens.filter(t => !/:/.test(t)).length,
-      propCount:        props.length,
+      name:       comp.name,
+      group:      g,
+      tokenCount: tokens.filter(t => !/:/.test(t)).length,
+      propCount:  props.length,
       colorSwatches,
-      tokenFingerprint,
+      previewHtml,
+      active,
     });
   }
 
@@ -3887,10 +4075,15 @@ function writeComponentInventoryStory(components, foundations) {
 
   const inventoryData = sortedCategories.map(cat => ({
     category: cat,
-    components: categorized[cat].sort((a, b) => a.name.localeCompare(b.name)),
+    // Sort: active first, then alphabetical within each group
+    components: categorized[cat].sort((a, b) => {
+      if (a.active !== b.active) return a.active ? -1 : 1;
+      return a.name.localeCompare(b.name);
+    }),
   }));
 
   const totalComponents = components.length;
+  const activeComponents = [...usedSet].length;
   const uniqueTokens = [...new Set(
     components.flatMap(c => Array.isArray(c.tokens) ? c.tokens.filter(t => !/:/.test(t)) : [])
   )].length;
@@ -3902,90 +4095,85 @@ function writeComponentInventoryStory(components, foundations) {
     `export default meta;`,
     `type Story = StoryObj;`,
     ``,
-    `const inventoryData: { category: string; components: { name: string; group: string; tokenCount: number; propCount: number; colorSwatches: { token: string; hex: string }[]; tokenFingerprint: string[] }[] }[] = ${JSON.stringify(inventoryData)};`,
+    `const inventoryData: { category: string; components: { name: string; group: string; tokenCount: number; propCount: number; colorSwatches: { token: string; hex: string }[]; previewHtml: string; active: boolean }[] }[] = ${JSON.stringify(inventoryData)};`,
     `const totalComponents = ${totalComponents};`,
+    `const activeComponents = ${activeComponents};`,
     `const uniqueTokens = ${uniqueTokens};`,
     ``,
     `export const Default: Story = {`,
-    `  render: () => (`,
-    `    <div style={{ padding: 32, background: "#fff", fontFamily: "system-ui,sans-serif", color: "#111", minHeight: "100vh", width: "100%" }}>`,
+    `  render: () => {`,
+    `    const [showUnused, setShowUnused] = (window as any).__vdsShowUnused !== undefined`,
+    `      ? [(window as any).__vdsShowUnused, (v: boolean) => { (window as any).__vdsShowUnused = v; }]`,
+    `      : [false, () => {}];`,
+    `    const [expanded, setExpanded] = React.useState(false);`,
+    `    const Card = ({ comp }: { comp: any }) => (`,
+    `      <div style={{ border: \`1px solid \${comp.active ? "#e5e7eb" : "#f0f0f0"}\`, borderRadius: 10, overflow: "hidden", background: comp.active ? "#fff" : "#fafafa", display: "flex", flexDirection: "column" as any, boxShadow: comp.active ? "0 1px 3px rgba(0,0,0,0.05)" : "none", opacity: comp.active ? 1 : 0.55 }}>`,
+    `        <div style={{ background: comp.active ? "#f8f9fa" : "#f5f5f5", borderBottom: "1px solid #f0f0f0", minHeight: 64, display: "flex", alignItems: "center", justifyContent: "center" }}`,
+    `          dangerouslySetInnerHTML={{ __html: comp.previewHtml }}`,
+    `        />`,
+    `        <div style={{ padding: "10px 12px" }}>`,
+    `          <div style={{ display: "flex", alignItems: "center", gap: 5, marginBottom: 5 }}>`,
+    `            <span style={{ fontWeight: 700, fontSize: 13, color: comp.active ? "#111" : "#9ca3af" }}>{comp.name}</span>`,
+    `            {comp.active && <span style={{ fontSize: 9, background: "#dcfce7", color: "#15803d", padding: "1px 5px", borderRadius: 4, fontWeight: 700, letterSpacing: "0.05em" }}>USED</span>}`,
+    `          </div>`,
+    `          <div style={{ display: "flex", gap: 4, flexWrap: "wrap" as any }}>`,
+    `            {comp.tokenCount > 0 && (`,
+    `              <span style={{ fontSize: 10, background: "#eff6ff", color: "#1d4ed8", padding: "2px 7px", borderRadius: 10, border: "1px solid #dbeafe" }}>{comp.tokenCount} tokens</span>`,
+    `            )}`,
+    `            {comp.colorSwatches.length > 0 && (`,
+    `              <span style={{ fontSize: 10, background: "#fef9c3", color: "#713f12", padding: "2px 7px", borderRadius: 10, border: "1px solid #fde68a" }}>{comp.colorSwatches.length} colors</span>`,
+    `            )}`,
+    `            {!comp.active && (`,
+    `              <span style={{ fontSize: 10, background: "#f3f4f6", color: "#9ca3af", padding: "2px 7px", borderRadius: 10, border: "1px solid #e5e7eb" }}>installed</span>`,
+    `            )}`,
+    `          </div>`,
+    `        </div>`,
+    `      </div>`,
+    `    );`,
+    `    return (`,
+    `    <div style={{ padding: 32, background: "#f8f9fa", fontFamily: "system-ui,sans-serif", color: "#111", minHeight: "100vh", width: "100%" }}>`,
     `      {/* Header */}`,
     `      <div style={{ marginBottom: 40 }}>`,
     `        <h2 style={{ fontSize: 28, fontWeight: 700, margin: "0 0 8px" }}>Component Inventory</h2>`,
-    `        <p style={{ fontSize: 14, color: "#6b7280", margin: "0 0 20px" }}>All components detected in this project, classified by function.</p>`,
-    `        <div style={{ display: "flex", gap: 12, flexWrap: "wrap" as any }}>`,
+    `        <p style={{ fontSize: 14, color: "#6b7280", margin: "0 0 20px" }}>Components actually used in this project. <strong style={{ color: "#111" }}>USED</strong> = appears as a JSX tag in source files.</p>`,
+    `        <div style={{ display: "flex", gap: 12, flexWrap: "wrap" as any, marginBottom: 20 }}>`,
     `          {[`,
-    `            { value: totalComponents.toString(), label: "Components" },`,
-    `            { value: inventoryData.length.toString(), label: "Categories" },`,
-    `            { value: uniqueTokens.toString(), label: "Unique Tokens" },`,
+    `            { value: activeComponents.toString(), label: "Used in Project", bg: "#f0fdf4", fg: "#15803d", border: "#bbf7d0" },`,
+    `            { value: (totalComponents - activeComponents).toString(), label: "Installed Only", bg: "#f9fafb", fg: "#6b7280", border: "#e5e7eb" },`,
+    `            { value: uniqueTokens.toString(), label: "Unique Tokens", bg: "#eff6ff", fg: "#1d4ed8", border: "#dbeafe" },`,
     `          ].map(stat => (`,
-    `            <div key={stat.label} style={{ padding: "12px 20px", background: "#f3f4f6", borderRadius: 10, textAlign: "center" as any, minWidth: 90 }}>`,
-    `              <div style={{ fontSize: 26, fontWeight: 800, color: "#111", lineHeight: 1 }}>{stat.value}</div>`,
-    `              <div style={{ fontSize: 12, color: "#6b7280", marginTop: 4 }}>{stat.label}</div>`,
+    `            <div key={stat.label} style={{ padding: "12px 20px", background: stat.bg, borderRadius: 10, textAlign: "center" as any, minWidth: 110, border: \`1px solid \${stat.border}\` }}>`,
+    `              <div style={{ fontSize: 26, fontWeight: 800, color: stat.fg, lineHeight: 1 }}>{stat.value}</div>`,
+    `              <div style={{ fontSize: 12, color: stat.fg, marginTop: 4, opacity: 0.8 }}>{stat.label}</div>`,
     `            </div>`,
     `          ))}`,
     `        </div>`,
+    `        <button onClick={() => setExpanded(!expanded)} style={{ fontSize: 12, color: "#6b7280", background: "transparent", border: "1px solid #e5e7eb", borderRadius: 6, padding: "5px 12px", cursor: "pointer" }}>`,
+    `          {expanded ? "Hide" : "Show"} installed-only components`,
+    `        </button>`,
     `      </div>`,
-    `      {/* Category groups */}`,
-    `      {inventoryData.map(group => (`,
-    `        <div key={group.category} style={{ marginBottom: 40 }}>`,
-    `          <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 16, paddingBottom: 10, borderBottom: "2px solid #f3f4f6" }}>`,
+    `      {/* Category groups — active components first */}`,
+    `      {inventoryData.map(group => {`,
+    `        const active = group.components.filter((c: any) => c.active);`,
+    `        const inactive = group.components.filter((c: any) => !c.active);`,
+    `        if (active.length === 0 && !expanded) return null;`,
+    `        return (`,
+    `        <div key={group.category} style={{ marginBottom: 44 }}>`,
+    `          <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 16, paddingBottom: 10, borderBottom: "2px solid #e5e7eb" }}>`,
     `            <h3 style={{ margin: 0, fontSize: 15, fontWeight: 700, color: "#111" }}>{group.category}</h3>`,
-    `            <span style={{ fontSize: 12, background: "#e0e7ff", color: "#3730a3", padding: "2px 9px", borderRadius: 12, fontWeight: 600 }}>{group.components.length}</span>`,
+    `            <span style={{ fontSize: 12, background: "#dcfce7", color: "#15803d", padding: "2px 9px", borderRadius: 12, fontWeight: 600 }}>{active.length} used</span>`,
+    `            {inactive.length > 0 && <span style={{ fontSize: 12, background: "#f3f4f6", color: "#9ca3af", padding: "2px 9px", borderRadius: 12 }}>{inactive.length} installed</span>}`,
     `          </div>`,
-    `          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(210px, 1fr))", gap: 12 }}>`,
-    `            {group.components.map(comp => (`,
-    `              <div key={comp.name} style={{ border: "1px solid #e5e7eb", borderRadius: 10, overflow: "hidden", background: "#fff", display: "flex", flexDirection: "column" as any }}>`,
-    `                {/* Color swatch strip — project-resolved colors from foundations */}`,
-    `                {comp.colorSwatches.length > 0 ? (`,
-    `                  <div style={{ display: "flex", height: 8 }}>`,
-    `                    {comp.colorSwatches.map((s: any) => (`,
-    `                      <div key={s.token} title={s.token} style={{ flex: 1, background: s.hex }} />`,
-    `                    ))}`,
-    `                  </div>`,
-    `                ) : (`,
-    `                  <div style={{ height: 4, background: "#f3f4f6" }} />`,
-    `                )}`,
-    `                <div style={{ padding: "12px 14px", flexGrow: 1 }}>`,
-    `                  <div style={{ fontWeight: 700, fontSize: 13, color: "#111", marginBottom: 6 }}>{comp.name}</div>`,
-    `                  {/* Token fingerprint pills */}`,
-    `                  {comp.tokenFingerprint.length > 0 && (`,
-    `                    <div style={{ display: "flex", gap: 4, flexWrap: "wrap" as any, marginBottom: 8 }}>`,
-    `                      {comp.tokenFingerprint.map((t: string) => (`,
-    `                        <code key={t} style={{ fontSize: 9, background: "#f3f4f6", color: "#6b7280", padding: "1px 5px", borderRadius: 4, border: "1px solid #e5e7eb" }}>{t}</code>`,
-    `                      ))}`,
-    `                    </div>`,
-    `                  )}`,
-    `                  <div style={{ display: "flex", gap: 5, flexWrap: "wrap" as any }}>`,
-    `                    {comp.propCount > 0 && (`,
-    `                      <span style={{ fontSize: 10, background: "#f3f4f6", color: "#6b7280", padding: "2px 7px", borderRadius: 10, border: "1px solid #e5e7eb" }}>`,
-    `                        {comp.propCount} props`,
-    `                      </span>`,
-    `                    )}`,
-    `                    {comp.tokenCount > 0 && (`,
-    `                      <span style={{ fontSize: 10, background: "#eff6ff", color: "#1d4ed8", padding: "2px 7px", borderRadius: 10, border: "1px solid #dbeafe" }}>`,
-    `                        {comp.tokenCount} tokens`,
-    `                      </span>`,
-    `                    )}`,
-    `                    {comp.colorSwatches.length > 0 && (`,
-    `                      <span style={{ fontSize: 10, background: "#fef9c3", color: "#713f12", padding: "2px 7px", borderRadius: 10, border: "1px solid #fde68a" }}>`,
-    `                        {comp.colorSwatches.length} colors`,
-    `                      </span>`,
-    `                    )}`,
-    `                    {comp.group && comp.group !== "shadcn" && comp.group !== "UI" && comp.group !== "Components" && (`,
-    `                      <span style={{ fontSize: 10, background: "#f0fdf4", color: "#166534", padding: "2px 7px", borderRadius: 10, border: "1px solid #bbf7d0" }}>`,
-    `                        {comp.group}`,
-    `                      </span>`,
-    `                    )}`,
-    `                  </div>`,
-    `                </div>`,
-    `              </div>`,
-    `            ))}`,
+    `          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(200px, 1fr))", gap: 12 }}>`,
+    `            {active.map((comp: any) => <Card key={comp.name} comp={comp} />)}`,
+    `            {expanded && inactive.map((comp: any) => <Card key={comp.name} comp={comp} />)}`,
     `          </div>`,
     `        </div>`,
-    `      ))}`,
+    `        );`,
+    `      })}`,
     `    </div>`,
-    `  ),`,
+    `    );`,
+    `  },`,
     `};`,
   ].join("\n");
 
@@ -4358,21 +4546,32 @@ function main() {
     }
   }
 
+  // Auto-detect which shadcn/ui components are actually used as JSX in the project source.
+  // This replaces the manual `includeComponents` list — VDS now self-discovers which
+  // shadcn primitives need stories instead of requiring users to maintain a whitelist.
+  const allCompNames = components.map(c => c.name);
+  const autoUsedSet = buildComponentUsageSet(allCompNames, PROJECT_ROOT);
+  console.log(`[VDS] Auto-detected ${autoUsedSet.size} components with active JSX usage`);
+
   let writtenCount = 0;
   for (const comp of components) {
     const componentName = toSafeComponentName(comp.name, comp.file);
-    // Skip unclassified and shadcn/ui primitives (UI group) — they're documented at ui.shadcn.com
-    // Only project-specific module groups (Circles, Finance, Projects, Time, …) get stories
     const g = comp.group || "Components";
-    // Skip shadcn/ui primitives by default — they're documented at ui.shadcn.com
-    // Users can override with vds.config.js: includeGroups: ["shadcn"] or includeComponents: ["Button", "Badge"]
+    const gLower = g.toLowerCase();
+
+    // For shadcn/ui primitives: only generate a story if the component is actually
+    // used as a JSX tag (<Button />, <Badge />, etc.) somewhere in the project source.
+    // Manual overrides: includeGroups (all from group) and includeComponents (named list).
     const includeGroups = VDS_CONFIG.includeGroups || [];
     const includeComponents = VDS_CONFIG.includeComponents || [];
-    const gLower = g.toLowerCase();
+
     if (g === "Uncategorized" || gLower === "ui" || gLower === "shadcn") {
       const groupIncluded = includeGroups.some((ig) => ig.toLowerCase() === gLower);
       const compIncluded = includeComponents.includes(componentName);
-      if (!groupIncluded && !compIncluded) {
+      // Auto-detection: is the component used as a JSX tag in the project?
+      const autoUsed = autoUsedSet.has(comp.name) || autoUsedSet.has(componentName);
+
+      if (!groupIncluded && !compIncluded && !autoUsed) {
         // Clean up leftover story files for components that are now in the skip group
         const oldStory = path.join(STORIES_DIR, `${componentName}.stories.tsx`);
         if (fs.existsSync(oldStory)) {
@@ -4380,12 +4579,15 @@ function main() {
             const firstLine = fs.readFileSync(oldStory, "utf-8").split("\n")[0] || "";
             if (firstLine.includes("@vds-regenerate")) {
               fs.unlinkSync(oldStory);
-              console.log(`[VDS] Removed shadcn/ui story: ${componentName}.stories.tsx`);
+              console.log(`[VDS] Removed unused shadcn story: ${componentName}.stories.tsx`);
             }
           } catch { /* ignore */ }
         }
         continue;
       }
+      if (autoUsed && !compIncluded) {
+        console.log(`[VDS] Auto-including ${componentName} (active JSX usage detected)`);
+      }
     }
     if (onlyName && componentName !== onlyName) continue;