vibe-design-system 2.8.66 → 2.8.68

package/package.json

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

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

@@ -2505,6 +2505,7 @@ function writeFoundationsStories(foundations) {
       .slice(0, 60); // cap to avoid extremely long stories
 
     const colorsContent = [
+      "import React from \"react\";",
       "import type { Meta, StoryObj } from \"@storybook/react\";",
       "",
       "const meta = { title: \"Foundations/Colors\", parameters: { layout: \"fullscreen\" } } satisfies Meta;",
@@ -2630,6 +2631,7 @@ function writeFoundationsStories(foundations) {
     const sansFamily = typo.fontSans || typo.tailwindSans || typo.body || "system-ui, sans-serif";
 
     const typoContent = [
+      "import React from \"react\";",
       "import type { Meta, StoryObj } from \"@storybook/react\";",
       "",
       "const meta = { title: \"Foundations/Typography\", parameters: { layout: \"fullscreen\" } } satisfies Meta;",
@@ -2790,6 +2792,7 @@ function writeFoundationsStories(foundations) {
 
   const brandContent =
     [
+      "import React from \"react\";",
       "import type { Meta, StoryObj } from \"@storybook/react\";",
       "",
       "const meta = { title: \"Foundations/Brand\", parameters: { layout: \"fullscreen\" } } satisfies Meta;",
@@ -2823,6 +2826,7 @@ function writeFoundationsStories(foundations) {
 
     const iconsContent = [
       "import { useState } from \"react\";",
+      "import React from \"react\";",
       "import type { Meta, StoryObj } from \"@storybook/react\";",
       "import * as Lucide from \"lucide-react\";",
       "",
@@ -2997,6 +3001,7 @@ function writeFoundationsStories(foundations) {
     const containerCount = gridSystem.containerCount || 0;
 
     const gridContent = [
+      "import React from \"react\";",
       "import type { Meta, StoryObj } from \"@storybook/react\";",
       "",
       "const meta = { title: \"Foundations/Grid\", parameters: { layout: \"fullscreen\" } } satisfies Meta;",
@@ -3186,6 +3191,7 @@ function writeFoundationsStories(foundations) {
     }));
     const buttonsContent =
       [
+        "import React from \"react\";",
         "import type { Meta, StoryObj } from \"@storybook/react\";",
         "",
         "const meta = { title: \"Foundations/Button Usage\", parameters: { layout: \"fullscreen\" } } satisfies Meta;",
@@ -3261,6 +3267,7 @@ function writeFoundationsStories(foundations) {
 
     const usedSpacing = (foundations?.tokenUsage?.spacing || []).slice(0, 16);
     const spacingContent = [
+      "import React from \"react\";",
       "import type { Meta, StoryObj } from \"@storybook/react\";",
       "",
       "const meta = { title: \"Foundations/Spacing & Layout\", parameters: { layout: \"fullscreen\" } } satisfies Meta;",
@@ -3368,6 +3375,7 @@ function writeFoundationsStories(foundations) {
     const zIndexSemantics = { "z-0": "Base", "z-10": "Low / hover", "z-20": "Dropdown", "z-30": "Sticky", "z-40": "Fixed", "z-50": "Modal / overlay" };
 
     const elevationContent = [
+      "import React from \"react\";",
       "import type { Meta, StoryObj } from \"@storybook/react\";",
       "",
       "const meta = { title: \"Foundations/Elevation & Shadows\", parameters: { layout: \"fullscreen\" } } satisfies Meta;",
@@ -3490,6 +3498,7 @@ function writeFoundationsStories(foundations) {
     const usedRadius = (foundations?.tokenUsage?.radius || []).slice(0, 12);
 
     const borderContent = [
+      "import React from \"react\";",
       "import type { Meta, StoryObj } from \"@storybook/react\";",
       "",
       "const meta = { title: \"Foundations/Border & Radius\", parameters: { layout: \"fullscreen\" } } satisfies Meta;",
@@ -3593,6 +3602,7 @@ function writeFoundationsStories(foundations) {
     const motionChips = (foundations?.tokenUsage?.animations || []).slice(0, 24);
 
     const motionContent = [
+      "import React from \"react\";",
       "import type { Meta, StoryObj } from \"@storybook/react\";",
       "import { useState, useEffect } from \"react\";",
       "",
@@ -3743,6 +3753,7 @@ function writeComponentSuggestionsStory(componentSuggestions) {
   }));
   const content =
     [
+      "import React from \"react\";",
       "import type { Meta, StoryObj } from \"@storybook/react\";",
       "import { useState } from \"react\";",
       "",
@@ -4007,132 +4018,236 @@ function writeComponentInventoryStory(components, foundations) {
   const foundationsDir = path.join(STORIES_DIR, "foundations");
   ensureDir(foundationsDir);
 
-  // Build per-component data
   const CATEGORY_ORDER = [
     "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, colorSwatches }]
+  const categorized = {};
   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);
 
+  // ── Build import info for every component ──────────────────────────────────
+  const atRoot   = path.dirname(COMPONENTS_REL_DIR);    // "client/src" or "src"
+  const compBase = path.basename(COMPONENTS_REL_DIR);   // "components"
+
+  function toPascalLocal(name) {
+    return name.replace(/[-\s]+(.)/g, (_, c) => c.toUpperCase()).replace(/^(.)/, c => c.toUpperCase());
+  }
+
+  const importInfoMap  = {};  // comp.name → { identifier, importAlias, isDefault }
+  const seenAliases    = new Set();
+  const orderedImports = [];  // deduplicated
+
   for (const comp of components) {
-    const g = comp.group || "Components";
-    const gLower = g.toLowerCase();
+    if (!comp.file) continue;
+    const identifier = toPascalLocal(comp.name);
+    const fileNoExt  = comp.file.replace(/\.(tsx|ts|jsx|js)$/, '');
+    const posixNoExt = fileNoExt.replace(/\\/g, '/');
+
+    // Derive @/ alias
+    const absFromRoot       = path.join(PROJECT_ROOT, comp.file);
+    const isProjectRelative = fs.existsSync(absFromRoot);
+    let importAlias;
+    if (isProjectRelative) {
+      const rel = path.posix.relative(atRoot, posixNoExt);
+      importAlias = rel.startsWith('..') ? `@/${compBase}/${posixNoExt}` : `@/${rel}`;
+    } else {
+      importAlias = `@/${compBase}/${posixNoExt}`;
+    }
+
+    // Detect default vs named export
+    let isDefault = false;
+    try {
+      const srcPath = isProjectRelative
+        ? absFromRoot
+        : path.join(PROJECT_ROOT, COMPONENTS_REL_DIR, comp.file);
+      isDefault = /export\s+default\b/.test(fs.readFileSync(srcPath, 'utf-8'));
+    } catch { /* keep false */ }
+
+    importInfoMap[comp.name] = { identifier, importAlias, isDefault };
+
+    if (!seenAliases.has(importAlias)) {
+      seenAliases.add(importAlias);
+      orderedImports.push({ identifier, importAlias, isDefault });
+    }
+  }
+
+  // Does the project use @tanstack/react-query?
+  let needsQC = false;
+  try {
+    const pkg  = JSON.parse(fs.readFileSync(path.join(PROJECT_ROOT, 'package.json'), 'utf-8'));
+    const deps = { ...(pkg.dependencies || {}), ...(pkg.devDependencies || {}) };
+    needsQC    = '@tanstack/react-query' in deps;
+  } catch { /* ignore */ }
+
+  // Preview scale per category
+  const COMPACT_CATS = new Set(["Status Indicators"]);
+  const MEDIUM_CATS  = new Set(["Forms and Input", "Images and Icons", "Loading"]);
+
+  // ── Per-component metadata ─────────────────────────────────────────────────
+  for (const comp of components) {
+    const g      = comp.group || "Components";
     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
+      .filter(s => s.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)));
-
-    // Whether this component is actually used as a JSX tag anywhere in the project source
-    const active = usedSet.has(comp.name);
+    const previewHtml  = buildInventoryPreviewHtml(comp.name, category, colorSwatches, tokens.filter(t => !/:/.test(t)));
+    const active       = usedSet.has(comp.name);
+    const previewScale = COMPACT_CATS.has(category) ? 1.0 : MEDIUM_CATS.has(category) ? 0.65 : 0.3;
 
     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,
-      active,
+      name: comp.name, group: g,
+      tokenCount:   tokens.filter(t => !/:/.test(t)).length,
+      propCount:    props.length,
+      colorSwatches, previewHtml, previewScale, active,
     });
   }
 
   const sortedCategories = Object.keys(categorized).sort((a, b) => {
-    const ai = CATEGORY_ORDER.indexOf(a);
-    const bi = CATEGORY_ORDER.indexOf(b);
+    const ai = CATEGORY_ORDER.indexOf(a), bi = CATEGORY_ORDER.indexOf(b);
     if (ai >= 0 && bi >= 0) return ai - bi;
-    if (ai >= 0) return -1;
-    if (bi >= 0) return 1;
-    return a.localeCompare(b);
+    return (ai >= 0) ? -1 : (bi >= 0) ? 1 : a.localeCompare(b);
   });
 
   const inventoryData = sortedCategories.map(cat => ({
     category: cat,
-    // 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 totalComponents  = components.length;
   const activeComponents = [...usedSet].length;
-  const uniqueTokens = [...new Set(
+  const uniqueTokens     = [...new Set(
     components.flatMap(c => Array.isArray(c.tokens) ? c.tokens.filter(t => !/:/.test(t)) : [])
   )].length;
 
+  // ── Build import lines ─────────────────────────────────────────────────────
+  const importLines = orderedImports.map(imp =>
+    imp.isDefault
+      ? `import ${imp.identifier} from "${imp.importAlias}";`
+      : `import { ${imp.identifier} } from "${imp.importAlias}";`
+  );
+
+  // ── PREVIEWS map entries ───────────────────────────────────────────────────
+  const TEXT_CHILD_NAMES = new Set(['button','badge','toggle','label','link','chip','tag','pill']);
+  const previewEntries = components
+    .filter(comp => importInfoMap[comp.name])
+    .map(comp => {
+      const { identifier } = importInfoMap[comp.name];
+      const hasText = TEXT_CHILD_NAMES.has(identifier.toLowerCase());
+      const call = hasText
+        ? `() => React.createElement(${identifier} as any, null, "${comp.name}")`
+        : `() => React.createElement(${identifier} as any)`;
+      return `  ${JSON.stringify(comp.name)}: ${call}`;
+    });
+
+  // ── Generate story file ────────────────────────────────────────────────────
   const content = [
+    `import React from "react";`,
     `import type { Meta, StoryObj } from "@storybook/react";`,
+    ...(needsQC ? [`import { QueryClient, QueryClientProvider } from "@tanstack/react-query";`] : []),
+    ...importLines,
     ``,
     `const meta = { title: "Foundations/Component Inventory", parameters: { layout: "fullscreen" } } satisfies Meta;`,
     `export default meta;`,
     `type Story = StoryObj;`,
     ``,
-    `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)};`,
+    // ErrorBoundary — catches broken component renders and falls back to shape HTML
+    `class _EB extends React.Component<{ children: React.ReactNode; fallback: React.ReactNode }, { err: boolean }> {`,
+    `  state = { err: false };`,
+    `  static getDerivedStateFromError() { return { err: true }; }`,
+    `  componentDidCatch() {}`,
+    `  render() { return (this.state.err ? this.props.fallback : this.props.children) as React.ReactElement; }`,
+    `}`,
+    // Provider wrapper — QueryClientProvider if project uses react-query, otherwise fragment
+    ...(needsQC ? [
+      `const _qc = new QueryClient({ defaultOptions: { queries: { retry: false, staleTime: Infinity } } });`,
+      `const _PW = ({ children }: { children: React.ReactNode }) => React.createElement(QueryClientProvider, { client: _qc }, children) as React.ReactElement;`,
+    ] : [
+      `const _PW = ({ children }: { children: React.ReactNode }) => React.createElement(React.Fragment, null, children) as React.ReactElement;`,
+    ]),
+    // PREVIEWS: each component renders via its real import; ErrorBoundary catches failures
+    `const PREVIEWS: Record<string, () => React.ReactElement> = {`,
+    ...previewEntries.map(e => e + ','),
+    `};`,
+    ``,
+    // Inventory data (metadata only — visual rendering is done at runtime via PREVIEWS)
+    `const inventoryData: { category: string; components: { name: string; group: string; tokenCount: number; propCount: number; colorSwatches: { token: string; hex: string }[]; previewHtml: string; previewScale: number; active: boolean }[] }[] = ${JSON.stringify(inventoryData)};`,
     `const totalComponents = ${totalComponents};`,
     `const activeComponents = ${activeComponents};`,
     `const uniqueTokens = ${uniqueTokens};`,
     ``,
+    // CardPreview: renders the actual component at the right scale, falls back to shape HTML
+    `const CardPreview = ({ comp }: { comp: any }) => {`,
+    `  const s: number = comp.previewScale || 0.4;`,
+    `  const centered = s >= 0.9;`,
+    `  const fn = PREVIEWS[comp.name];`,
+    `  const shapeHtml = (`,
+    `    <div style={{ width: "100%", height: "100%", display: "flex", alignItems: "center", justifyContent: "center" }}`,
+    `      dangerouslySetInnerHTML={{ __html: comp.previewHtml }} />`,
+    `  );`,
+    `  const wPct = (+(100 / s).toFixed(1)) + "%";`,
+    `  const innerStyle: React.CSSProperties = centered`,
+    `    ? { position: "absolute", top: "50%", left: "50%",`,
+    `        transform: "translate(-50%, -50%) scale(" + s + ")",`,
+    `        transformOrigin: "center center", pointerEvents: "none" }`,
+    `    : { position: "absolute", top: 0, left: 0, width: wPct,`,
+    `        transform: "scale(" + s + ")",`,
+    `        transformOrigin: "top left", pointerEvents: "none" };`,
+    `  return (`,
+    `    <div style={{ height: 96, overflow: "hidden", position: "relative", background: "#fff" }}>`,
+    `      <_EB fallback={shapeHtml}>`,
+    `        {fn ? <_PW><div style={innerStyle}>{fn()}</div></_PW> : shapeHtml}`,
+    `      </_EB>`,
+    `    </div>`,
+    `  );`,
+    `};`,
+    `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" }}>`,
+    `      <CardPreview comp={comp} />`,
+    `    </div>`,
+    `    <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>`,
+    `);`,
+    ``,
     `export const Default: Story = {`,
     `  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" }}>Components actually used in this project. <strong style={{ color: "#111" }}>USED</strong> = appears as a JSX tag in source files.</p>`,
@@ -4142,7 +4257,7 @@ function writeComponentInventoryStory(components, foundations) {
     `            { 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: stat.bg, borderRadius: 10, textAlign: "center" as any, minWidth: 110, border: \`1px solid \${stat.border}\` }}>`,
+    `            <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>`,
@@ -4152,23 +4267,22 @@ function writeComponentInventoryStory(components, foundations) {
     `          {expanded ? "Hide" : "Show"} installed-only components`,
     `        </button>`,
     `      </div>`,
-    `      {/* 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: "#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(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 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: "#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(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>`,
     `        );`,
     `      })}`,
     `    </div>`,
@@ -4227,6 +4341,7 @@ function writeChangelogStory(changelog) {
   const entries = Array.isArray(changelog) ? changelog.map((e) => ({ version: e.version, date: e.date, changes: e.changes || [] })) : [];
   const content =
     [
+      "import React from \"react\";",
       "import type { Meta, StoryObj } from \"@storybook/react\";",
       "",
       "const meta = { title: \"Foundations/Changelog\", tags: [\"autodocs\"], parameters: { layout: \"fullscreen\" } } satisfies Meta;",