vibe-design-system 2.8.63 → 2.8.64

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vibe-design-system",
-  "version": "2.8.63",
+  "version": "2.8.64",
   "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 }}>`);
@@ -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 }}>",
@@ -3782,23 +3830,49 @@ 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
+
+    // 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);
+
     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,
     });
   }
 
@@ -3828,13 +3902,13 @@ 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 }[]; tokenFingerprint: 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: "#fff", 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>`,
@@ -3859,26 +3933,51 @@ function writeComponentInventoryStory(components, foundations) {
     `            <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(210px, 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 }}>`,
+    `                {/* 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>`,
     `            ))}`,
@@ -3894,6 +3993,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 +4049,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 +4307,7 @@ function main() {
   }
   writeComponentInventoryStory(components, foundations);
   writeChangelogStory(data.changelog);
+  patchPreviewTsxFoundations();
   try {
     const fd = path.join(STORIES_DIR, "foundations");
     if (fs.existsSync(fd)) {