vibe-design-system 2.8.63 → 2.8.65

package/package.json

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

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

@@ -1991,6 +1991,44 @@ function buildStoryFileContent(comp) {
     return buildRecipeStoryContent(comp, componentName, importPath, title, source, exportStyle, RECIPES[componentName], defaultArgLines, lucideImports, iconPropNames, needReact, variantMap);
   }
 
+  // Detect if the component uses @tanstack/react-query hooks → needs QueryClientProvider in story.
+  // Checks direct imports AND one level deep into local hook files (e.g. @/hooks/use-crypto.ts).
+  const needsQueryClient = (() => {
+    if (!source.length) return false;
+    // Direct usage in this file
+    if (/from\s+['"]@tanstack\/react-query['"]/m.test(source) ||
+        /\b(useQuery|useMutation|useQueryClient|useInfiniteQuery|useSuspenseQuery)\b/.test(source)) {
+      return true;
+    }
+    // One level deep: check imported hook files (e.g. @/hooks/*, ../hooks/*, ./hooks/*)
+    // Derive the @/ alias source root from COMPONENTS_REL_DIR:
+    //   "src/components"        → srcRoot = "src"
+    //   "client/src/components" → srcRoot = "client/src"
+    const atAliasRoot = path.dirname(COMPONENTS_REL_DIR); // e.g. "src" or "client/src"
+    const hookImportRe = /from\s+['"]([^'"]*\/hooks\/[^'"]+)['"]/g;
+    let m;
+    while ((m = hookImportRe.exec(source)) !== null) {
+      try {
+        let rel = m[1];
+        // Resolve @ alias using derived source root
+        if (rel.startsWith("@/")) rel = atAliasRoot + "/" + rel.slice(2);
+        const exts = [".ts", ".tsx", ".js", ".jsx"];
+        for (const ext of exts) {
+          const full = path.join(PROJECT_ROOT, rel + ext);
+          if (fs.existsSync(full)) {
+            const hookSrc = fs.readFileSync(full, "utf-8");
+            if (/from\s+['"]@tanstack\/react-query['"]/m.test(hookSrc) ||
+                /\b(useQuery|useMutation|useQueryClient|useInfiniteQuery)\b/.test(hookSrc)) {
+              return true;
+            }
+            break;
+          }
+        }
+      } catch { /* ignore */ }
+    }
+    return false;
+  })();
+
   const lines = [];
   lines.push(`// @vds-regenerate — VDS auto-generated. Remove this line to prevent overwrite.`);
   lines.push(`import type { Meta, StoryObj } from "@storybook/react";`);
@@ -1998,11 +2036,17 @@ function buildStoryFileContent(comp) {
   if (lucideImports.length > 0) {
     lines.push(`import { ${lucideImports.join(", ")} } from "lucide-react";`);
   }
+  if (needsQueryClient) {
+    lines.push(`import { QueryClient, QueryClientProvider } from "@tanstack/react-query";`);
+  }
 
   // Dynamic import + catch so "Failed to fetch dynamically imported module" shows a fallback instead of breaking Storybook
   const loadFallback = `() => React.createElement('div', { style: { padding: 16, color: '#666', fontSize: 14 } }, 'Component could not be loaded (import error).')`;
   const getDefault = `(m) => ({ default: m["${componentName}"] ?? m.default })`;
   lines.push(`const ComponentRef = React.lazy(() => import(/* @vite-ignore */ "${importPath}").then(${getDefault}).catch(() => ({ default: ${loadFallback} })));`);
+  if (needsQueryClient) {
+    lines.push(`const _queryClient = new QueryClient({ defaultOptions: { queries: { retry: false, staleTime: Infinity } } });`);
+  }
   lines.push("");
 
   const safeDefaultsObj = componentName && SAFE_WRAPPER_DEFAULTS[componentName];
@@ -2018,6 +2062,10 @@ function buildStoryFileContent(comp) {
   if (profile !== "SECTION") lines.push(`  tags: ["autodocs"],`);
   // Center small components (VARIANT, WRAPPER, CONFIGURED, SAFE) to prevent vertical stretching
   if (profile !== "SECTION") lines.push(`  parameters: { layout: "centered" },`);
+  // Wrap with QueryClientProvider for components that use @tanstack/react-query hooks
+  if (needsQueryClient) {
+    lines.push(`  decorators: [(Story: any) => React.createElement(QueryClientProvider, { client: _queryClient }, React.createElement(Story))],`);
+  }
 
   // Build argTypes from extracted TypeScript props + icon-specific overrides
   const argTypeEntries = [];
@@ -2161,7 +2209,7 @@ function buildStoryFileContent(comp) {
         lines.push(`      </section>`);
         lines.push(`    );`);
         lines.push(`    return (`);
-        lines.push(`      <div style={{ padding: 40, background: "#fff", fontFamily: "system-ui,sans-serif", color: "#111", minHeight: "100vh" }}>`);
+        lines.push(`      <div style={{ padding: 40, background: "#fff", fontFamily: "system-ui,sans-serif", color: "#111", minHeight: "100vh", width: "100%" }}>`);
         lines.push(`        <h2 style={{ fontSize: 22, fontWeight: 700, margin: "0 0 6px" }}>Design Tokens</h2>`);
         lines.push(`        <p style={{ fontSize: 13, color: "#6b7280", margin: "0 0 32px" }}>Tailwind utilities used in <code style={{ background: "#f3f4f6", padding: "1px 6px", borderRadius: 4, fontSize: 12 }}>${componentName}</code> — resolved to project values.</p>`);
         lines.push(`        {colorTokens.length > 0 && section("Color", (`);
@@ -2230,7 +2278,7 @@ function buildStoryFileContent(comp) {
       lines.push(`      <p style={{ margin: "0 0 12px", fontSize: 11, fontWeight: 700, color: "#6b7280", textTransform: "uppercase" as any, letterSpacing: "0.08em" }}>{label}</p>`);
       lines.push(`    );`);
       lines.push(`    return (`);
-      lines.push(`      <div style={{ padding: 40, background: "#fff", fontFamily: "system-ui,sans-serif", color: "#111", minHeight: "100vh" }}>`);
+      lines.push(`      <div style={{ padding: 40, background: "#fff", fontFamily: "system-ui,sans-serif", color: "#111", minHeight: "100vh", width: "100%" }}>`);
       lines.push(`        <div style={{ marginBottom: 32 }}>`);
       lines.push(`          <h2 style={{ fontSize: 22, fontWeight: 700, margin: "0 0 6px" }}>Usage</h2>`);
       lines.push(`          <p style={{ fontSize: 13, color: "#6b7280", margin: 0 }}>`);
@@ -2477,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>",
       "",
@@ -2596,7 +2644,7 @@ function writeFoundationsStories(foundations) {
       "",
       "export const Default: Story = {",
       "  render: () => (",
-      "    <div style={{ fontFamily: \"system-ui,sans-serif\", padding: 32, maxWidth: 860, color: \"#111\", background: \"#fff\", minHeight: \"100vh\" }}>",
+      "    <div style={{ fontFamily: \"system-ui,sans-serif\", padding: 32, color: \"#111\", background: \"#fff\", minHeight: \"100vh\", width: \"100%\" }}>",
       "      <h2 style={{ fontSize: 20, fontWeight: 700, margin: \"0 0 4px\" }}>Typography</h2>",
       "      <p style={{ fontSize: 13, color: \"#888\", margin: \"0 0 32px\" }}>Type scale, font families, and weights</p>",
       "",
@@ -2752,7 +2800,7 @@ function writeFoundationsStories(foundations) {
       "",
       "export const Default: Story = {",
       "  render: () => (",
-      "    <div style={{ display: \"flex\", gap: 24, flexWrap: \"wrap\", padding: 32, background: \"#fff\", minHeight: \"100vh\" }}>",
+      "    <div style={{ display: \"flex\", gap: 24, flexWrap: \"wrap\", padding: 32, background: \"#fff\", minHeight: \"100vh\", width: \"100%\" }}>",
       "      {assets.length === 0 ? <p style={{ color: '#888', fontFamily: 'monospace' }}>No brand assets found — add images to public/ or client/public/</p> : assets.map((a, i) => (",
       "        <div key={i} style={{ textAlign: \"center\", background: '#f8f8f8', borderRadius: 8, padding: 12, minWidth: 120 }}>",
       "          <img src={a.url || (\"/\" + String(a.path || \"\").replace(/^public\\//, \"\"))} style={{ maxHeight: 100, maxWidth: 180, objectFit: \"contain\", display: 'block', margin: '0 auto' }} alt={a.name || \"\"} />",
@@ -2849,7 +2897,7 @@ function writeFoundationsStories(foundations) {
       "    ];",
       "    const TILE_SIZES = [16, 20, 24];",
       "    return (",
-      "      <div style={{ padding: 32, fontFamily: \"system-ui,sans-serif\", background: \"#fff\", minHeight: \"100vh\", color: \"#111\" }}>",
+      "      <div style={{ padding: 32, fontFamily: \"system-ui,sans-serif\", background: \"#fff\", minHeight: \"100vh\", width: \"100%\", color: \"#111\" }}>",
       "        <h2 style={{ fontSize: 20, fontWeight: 700, margin: \"0 0 4px\" }}>Icons</h2>",
       "        <div style={{ marginBottom: 28 }}>",
       "          <p style={{ margin: 0, marginBottom: 4, fontSize: 13, color: \"#6b7280\" }}>",
@@ -2992,7 +3040,7 @@ function writeFoundationsStories(foundations) {
       "      );",
       "    };",
       "    return (",
-      "      <div style={{ padding: 24, fontFamily: \"sans-serif\", maxWidth: 900, background: \"#fff\", minHeight: \"100vh\", color: \"#111\" }}>",
+      "      <div style={{ padding: 24, fontFamily: \"sans-serif\", background: \"#fff\", minHeight: \"100vh\", width: \"100%\", color: \"#111\" }}>",
       "",
       "        {/* ── Breakpoints ── */}",
       "        <section style={{ marginBottom: 40 }}>",
@@ -3148,7 +3196,7 @@ function writeFoundationsStories(foundations) {
         "",
         "export const Default: Story = {",
         "  render: () => (",
-        "    <div style={{ padding: 32, fontFamily: \"system-ui, sans-serif\", background: \"#fff\", minHeight: \"100vh\", color: \"#111\" }}>",
+        "    <div style={{ padding: 32, fontFamily: \"system-ui, sans-serif\", background: \"#fff\", minHeight: \"100vh\", width: \"100%\", color: \"#111\" }}>",
         "      <h2 style={{ marginBottom: 8 }}>Used Button variants in app code</h2>",
         "      <p style={{ marginBottom: 16, color: \"#888\", fontSize: 13 }}>Based on &lt;Button ... /&gt; usages in src/ (ignores lowercase &lt;button&gt;).</p>",
         "      <table style={{ borderCollapse: \"collapse\", width: \"100%\", fontSize: 13 }}>",
@@ -3225,7 +3273,7 @@ function writeFoundationsStories(foundations) {
       "",
       "export const Default: Story = {",
       "  render: () => (",
-      "    <div style={{ fontFamily: \"system-ui,sans-serif\", padding: 32, maxWidth: 760, color: \"#111\", background: \"#fff\", minHeight: \"100vh\" }}>",
+      "    <div style={{ fontFamily: \"system-ui,sans-serif\", padding: 32, color: \"#111\", background: \"#fff\", minHeight: \"100vh\", width: \"100%\" }}>",
       "      <h2 style={{ fontSize: 20, fontWeight: 700, margin: \"0 0 4px\" }}>Spacing Scale</h2>",
       "      <p style={{ fontSize: 13, color: \"#888\", margin: \"0 0 24px\" }}>Base unit: 0.25rem = 4px · built on an 8px grid system</p>",
       "      {usedSpacing.length > 0 && (",
@@ -3335,7 +3383,7 @@ function writeFoundationsStories(foundations) {
       "",
       "export const Default: Story = {",
       "  render: () => (",
-      "    <div style={{ fontFamily: \"system-ui,sans-serif\", padding: 32, background: \"#fff\", minHeight: \"100vh\", 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\" }}>Elevation & Shadows</h2>",
       "      <p style={{ fontSize: 13, color: \"#888\", margin: \"0 0 32px\" }}>Depth is communicated through layered shadow levels</p>",
       "      <h3 style={{ fontSize: 15, fontWeight: 600, margin: \"0 0 14px\", color: \"#374151\" }}>Shadow Scale</h3>",
@@ -3453,7 +3501,7 @@ function writeFoundationsStories(foundations) {
       "",
       "export const Default: Story = {",
       "  render: () => (",
-      "    <div style={{ fontFamily: \"system-ui,sans-serif\", padding: 32, maxWidth: 800, background: \"#fff\", minHeight: \"100vh\", 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\" }}>Border & Radius</h2>",
       "      <p style={{ fontSize: 13, color: \"#888\", margin: \"0 0 32px\" }}>Corner radius scale — from sharp edges to fully rounded</p>",
       "      {usedRadius.length > 0 && (",
@@ -3584,7 +3632,7 @@ function writeFoundationsStories(foundations) {
       "    );",
       "",
       "    return (",
-      "      <div style={{ padding: 40, fontFamily: \"system-ui,sans-serif\", background: \"#fff\", minHeight: \"100vh\", color: \"#111\" }}>",
+      "      <div style={{ padding: 40, fontFamily: \"system-ui,sans-serif\", background: \"#fff\", minHeight: \"100vh\", width: \"100%\", color: \"#111\" }}>",
       "        <h2 style={{ fontSize: 22, fontWeight: 700, margin: \"0 0 4px\" }}>Motion & Interaction</h2>",
       "        <p style={{ fontSize: 13, color: \"#6b7280\", margin: \"0 0 40px\" }}>Consistent timing and easing for smooth, intentional motion.</p>",
       "",
@@ -3753,7 +3801,7 @@ function writeComponentSuggestionsStory(componentSuggestions) {
       "",
       "export const Default: Story = {",
       "  render: () => (",
-      "    <div style={{ padding: 32, fontFamily: 'system-ui, sans-serif', background: '#fff', minHeight: '100vh', color: '#111' }}>",
+      "    <div style={{ padding: 32, fontFamily: 'system-ui, sans-serif', background: '#fff', minHeight: '100vh', width: '100%', color: '#111' }}>",
       "      <h2 style={{ marginBottom: 8, fontSize: 24, fontWeight: 700, color: '#1a202c' }}>Component Suggestions</h2>",
       "      <p style={{ color: '#718096', marginBottom: 32, fontSize: 14 }}>Bu pattern'ler birden fazla dosyada tekrar ediyor. Her biri ayrı bir component olabilir. <strong>Copy Prompt</strong> butonuna tıklayıp Cursor veya Superflex'e yapıştır.</p>",
       "      <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>",
@@ -3767,6 +3815,136 @@ 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.
@@ -3782,23 +3960,47 @@ function writeComponentInventoryStory(components, foundations) {
     "Forms and Input", "Status Indicators", "Navigation", "Overlays and Layering",
     "Loading", "Messaging", "Images and Icons", "Layout and Structure", "Text and Data Display",
   ];
-  const categorized = {}; // category → [{ name, group, tokenCount, propCount }]
+  const categorized = {}; // category → [{ name, group, tokenCount, propCount, colorSwatches }]
+  const foundColors = (foundations && foundations.colors) ? foundations.colors : {};
 
   for (const comp of components) {
     const g = comp.group || "Components";
     const gLower = g.toLowerCase();
-    const isShadcnGroup = gLower === "shadcn" || gLower === "ui";
     const tokens = Array.isArray(comp.tokens) ? comp.tokens : [];
     const props  = Array.isArray(comp.props)  ? comp.props  : [];
     const semantic = classifyComponent(comp.name, tokens, props);
     const category = semantic || g;
 
+    // Resolve color tokens to hex swatches from foundations.colors (max 6)
+    const colorSwatches = tokens
+      .filter(t => !/:/.test(t) &&
+        /^(bg|text|border|ring|from|to|fill|stroke)-/.test(t) &&
+        // Exclude border-side shorthands (b, t, l, r, x, y) and alignment/size text-* tokens
+        !/^border-[btlrxy]$/.test(t) &&
+        !/^text-(xs|sm|base|lg|xl|2xl|3xl|4xl|5xl|6xl|7xl|8xl|9xl|\d|left|right|center|justify|start|end|wrap|nowrap|balance|pretty|clip|ellipsis)/.test(t))
+      .slice(0, 6)
+      .map(token => {
+        const m = token.match(/^(?:bg|text|border|ring|from|to|fill|stroke)-(.+)$/);
+        let key = m ? m[1] : null;
+        // Strip opacity modifier: "muted/20" → "muted", "primary/5" → "primary"
+        if (key) key = key.replace(/\/\d+$/, "");
+        const entry = key ? foundColors[key] : null;
+        const hex = entry?.hex && /^#[0-9a-fA-F]{3,8}$/.test(entry.hex) ? entry.hex : null;
+        return { token, hex };
+      })
+      .filter(s => s.hex); // only swatches with resolved hex
+
+    // Visual preview HTML (computed at generation time using project's resolved colors)
+    const previewHtml = buildInventoryPreviewHtml(comp.name, category, colorSwatches, tokens.filter(t => !/:/.test(t)));
+
     if (!categorized[category]) categorized[category] = [];
     categorized[category].push({
       name:       comp.name,
       group:      g,
       tokenCount: tokens.filter(t => !/:/.test(t)).length,
       propCount:  props.length,
+      colorSwatches,
+      previewHtml,
     });
   }
 
@@ -3828,24 +4030,24 @@ function writeComponentInventoryStory(components, foundations) {
     `export default meta;`,
     `type Story = StoryObj;`,
     ``,
-    `const inventoryData: { category: string; components: { name: string; group: string; tokenCount: number; propCount: number }[] }[] = ${JSON.stringify(inventoryData)};`,
+    `const inventoryData: { category: string; components: { name: string; group: string; tokenCount: number; propCount: number; colorSwatches: { token: string; hex: string }[]; previewHtml: string }[] }[] = ${JSON.stringify(inventoryData)};`,
     `const totalComponents = ${totalComponents};`,
     `const uniqueTokens = ${uniqueTokens};`,
     ``,
     `export const Default: Story = {`,
     `  render: () => (`,
-    `    <div style={{ padding: 32, background: "#fff", fontFamily: "system-ui,sans-serif", color: "#111", minHeight: "100vh" }}>`,
+    `    <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>`,
+    `        <p style={{ fontSize: 14, color: "#6b7280", margin: "0 0 20px" }}>All components detected in this project — visual style fingerprints derived from project tokens.</p>`,
     `        <div style={{ display: "flex", gap: 12, flexWrap: "wrap" as any }}>`,
     `          {[`,
     `            { value: totalComponents.toString(), label: "Components" },`,
     `            { value: inventoryData.length.toString(), label: "Categories" },`,
     `            { value: uniqueTokens.toString(), label: "Unique Tokens" },`,
     `          ].map(stat => (`,
-    `            <div key={stat.label} style={{ padding: "12px 20px", background: "#f3f4f6", borderRadius: 10, textAlign: "center" as any, minWidth: 90 }}>`,
+    `            <div key={stat.label} style={{ padding: "12px 20px", background: "#fff", borderRadius: 10, textAlign: "center" as any, minWidth: 90, border: "1px solid #e5e7eb" }}>`,
     `              <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>`,
@@ -3854,31 +4056,43 @@ function writeComponentInventoryStory(components, foundations) {
     `      </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" }}>`,
+    `        <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>`,
     `          </div>`,
-    `          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(190px, 1fr))", gap: 10 }}>`,
+    `          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(200px, 1fr))", gap: 12 }}>`,
     `            {group.components.map(comp => (`,
-    `              <div key={comp.name} style={{ border: "1px solid #e5e7eb", borderRadius: 10, padding: "14px 16px", background: "#fafafa" }}>`,
-    `                <div style={{ fontWeight: 700, fontSize: 14, color: "#111", marginBottom: 8 }}>{comp.name}</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.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 key={comp.name} style={{ border: "1px solid #e5e7eb", borderRadius: 10, overflow: "hidden", background: "#fff", display: "flex", flexDirection: "column" as any, boxShadow: "0 1px 3px rgba(0,0,0,0.04)" }}>`,
+    `                {/* Visual preview — rendered from project tokens at generation time */}`,
+    `                <div style={{ background: "#f8f9fa", borderBottom: "1px solid #f0f0f0", minHeight: 64, display: "flex", alignItems: "center", justifyContent: "center" }}`,
+    `                  dangerouslySetInnerHTML={{ __html: comp.previewHtml }}`,
+    `                />`,
+    `                {/* Info strip */}`,
+    `                <div style={{ padding: "10px 12px" }}>`,
+    `                  <div style={{ fontWeight: 700, fontSize: 13, color: "#111", marginBottom: 6 }}>{comp.name}</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.propCount > 0 && (`,
+    `                      <span style={{ fontSize: 10, background: "#f3f4f6", color: "#6b7280", padding: "2px 7px", borderRadius: 10, border: "1px solid #e5e7eb" }}>`,
+    `                        {comp.propCount} props`,
+    `                      </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>`,
     `            ))}`,
@@ -3894,6 +4108,46 @@ function writeComponentInventoryStory(components, foundations) {
   console.log("[VDS] Wrote " + path.relative(PROJECT_ROOT, path.join(foundationsDir, "ComponentInventory.stories.tsx")));
 }
 
+/**
+ * Patches .storybook/preview.tsx so that Foundations stories bypass app-specific
+ * provider decorators (SidebarProvider, etc.) that constrain child width in flex layout.
+ * Uses the context.title to detect "Foundations/" prefix at runtime.
+ */
+function patchPreviewTsxFoundations() {
+  const candidates = [
+    path.join(PROJECT_ROOT, ".storybook", "preview.tsx"),
+    path.join(PROJECT_ROOT, ".storybook", "preview.ts"),
+    path.join(PROJECT_ROOT, ".storybook", "preview.jsx"),
+    path.join(PROJECT_ROOT, ".storybook", "preview.js"),
+  ];
+  const previewPath = candidates.find(p => fs.existsSync(p));
+  if (!previewPath) return;
+
+  let content;
+  try { content = fs.readFileSync(previewPath, "utf-8"); } catch { return; }
+
+  // Already patched?
+  if (content.includes('startsWith("Foundations")')) return;
+
+  // Match: const withProviders = (Story: any) => React.createElement(AnyProvider, null, React.createElement(Story));
+  const re = /const withProviders = \(Story(?:: any)?\) => (React\.createElement\([^;]+\));/;
+  const match = content.match(re);
+  if (!match) return; // Pattern not found — nothing to patch
+
+  const providerExpr = match[1]; // e.g. React.createElement(SidebarProvider, null, React.createElement(Story))
+  const patched =
+    `const withProviders = (Story: any, context: any) => ` +
+    `context?.title?.startsWith("Foundations") ? React.createElement(Story) : ${providerExpr};`;
+
+  content = content.replace(re, patched);
+  try {
+    fs.writeFileSync(previewPath, content, "utf-8");
+    console.log("[VDS] Patched .storybook/preview.tsx — Foundations stories now bypass app providers");
+  } catch (e) {
+    console.warn("[VDS] Could not patch preview.tsx:", e.message);
+  }
+}
+
 function writeChangelogStory(changelog) {
   const foundationsDir = path.join(STORIES_DIR, "foundations");
   ensureDir(foundationsDir);
@@ -3910,7 +4164,7 @@ function writeChangelogStory(changelog) {
       "",
       "export const Default: Story = {",
       "  render: () => (",
-      "    <div style={{ fontFamily: \"system-ui,sans-serif\", padding: 32, background: \"#fff\", minHeight: \"100vh\", color: \"#111\" }}>",
+      "    <div style={{ fontFamily: \"system-ui,sans-serif\", padding: 32, background: \"#fff\", minHeight: \"100vh\", width: \"100%\", color: \"#111\" }}>",
       "      <h2>CHANGELOG</h2>",
       "      {changelog.length === 0 ? <p>No changes recorded yet.</p> : changelog.map((entry) => (",
       "        <div key={entry.version}>",
@@ -4168,6 +4422,7 @@ function main() {
   }
   writeComponentInventoryStory(components, foundations);
   writeChangelogStory(data.changelog);
+  patchPreviewTsxFoundations();
   try {
     const fd = path.join(STORIES_DIR, "foundations");
     if (fs.existsSync(fd)) {