vibe-design-system 2.8.61 → 2.8.63

package/package.json

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

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

@@ -83,6 +83,72 @@ const SKIP_LIST = VDS_CONFIG.skipList
   ? [...VDS_CONFIG.skipList]
   : [...DEFAULT_SKIP_LIST, ...(VDS_CONFIG.extraSkipList ?? [])];
 
+/**
+ * Semantic component classifier.
+ * Maps component name + tokens + props to an Atlassian-style functional category.
+ * Used for sidebar grouping (shadcn/UI components) and Component Inventory story.
+ * Returns the category string, or null if no confident match.
+ */
+function classifyComponent(name, tokens = [], props = []) {
+  const n = name.toLowerCase();
+
+  // Status Indicators — short labels, counts, status metadata
+  if (
+    /^(badge|tag|lozenge|chip|pill|statusbadge|statuschip|statustag|statuslabel|statusdot|statusicon|countertag|counterbadge|tagging)$/.test(n) ||
+    /badge$|lozenge$|statuschip$|statusbadge$|statustag$|statuspill$|countertag$/.test(n)
+  ) return "Status Indicators";
+
+  // Forms and Input — interactive user input elements
+  if (
+    /^(button|input|checkbox|radiogroup|radio|select|form|field|toggle|textarea|switch|slider|range|datepicker|timepicker|datetimepicker|combobox|autocomplete|fileupload|fileinput|otpinput|pinfield|searchinput|searchbar|colorpicker|numberinput|currencyinput|passwordinput|formfield|forminput|searchfield)$/.test(n) ||
+    /button$|input$|field$|form$|picker$|^select$|toggle$|checkbox$|^radio$|switch$|slider$|upload$|combobox$/.test(n)
+  ) return "Forms and Input";
+
+  // Navigation — page/section navigation patterns
+  if (
+    /^(navbar|nav|navigation|navmenu|menu|breadcrumb|breadcrumbs|tabs|tabbar|tablist|tabpanel|pagination|sidebar|topbar|link|navlink|menuitem|menubar|stepper|stepbar|stepindicator|progresstracker|sidenav)$/.test(n) ||
+    /navbar$|navmenu$|breadcrumb$|^tabs$|pagination$|sidebar$|topbar$|stepper$|stepbar$|sidenav$/.test(n)
+  ) return "Navigation";
+
+  // Overlays and Layering — content floating above the page
+  if (
+    /^(modal|dialog|drawer|popover|tooltip|dropdown|overlay|lightbox|sheet|bottomsheet|contextmenu|actionsheet|flyout|slideover|offcanvas|alertdialog)$/.test(n) ||
+    /modal$|dialog$|drawer$|tooltip$|popover$|dropdown$|overlay$|sheet$|lightbox$/.test(n)
+  ) return "Overlays and Layering";
+
+  // Loading — loading and skeleton states
+  if (
+    /^(spinner|skeleton|loader|progressbar|loadingbar|loadingindicator|skeletonloader|skeletoncard|loadingspinner|skeletonlist|skeletonrow|loadingoverlay)$/.test(n) ||
+    /spinner$|skeleton$|loader$|loading$|^progressbar$/.test(n)
+  ) return "Loading";
+
+  // Messaging — system notifications and inline feedback
+  if (
+    /^(alert|banner|toast|notification|message|flag|snackbar|callout|announcement|inlinemessage|sectionmessage|toastnotification|errormessage|warningbanner|infobanner|successbanner)$/.test(n) ||
+    /alert$|banner$|toast$|notification$|^message$|snackbar$|callout$|^flag$/.test(n)
+  ) return "Messaging";
+
+  // Images and Icons — visual assets
+  if (
+    /^(avatar|avatargroup|icon|image|logo|tile|thumbnail|photo|picture|iconbutton|useravatar|profileimage|brandlogo|appicon|mediaplayer|imagegallery)$/.test(n) ||
+    /^avatar$|avatargroup$|^icon$|^image$|^logo$|^tile$|thumbnail$|^photo$/.test(n)
+  ) return "Images and Icons";
+
+  // Layout and Structure — structural page / content organisation
+  if (
+    /^(card|panel|container|grid|layout|page|section|divider|separator|accordion|collapsible|expandable|pagelayout|pageheader|applayout|applayoutshell|layoutgrid|contentblock|featureblock|herosection|featurelist|pricingcard|testimonial)$/.test(n) ||
+    /card$|panel$|container$|layout$|section$|divider$|separator$|accordion$|grid$|header$|^pagelayout$/.test(n)
+  ) return "Layout and Structure";
+
+  // Text and Data Display — showing information and data
+  if (
+    /^(table|list|datatable|datagrid|chart|graph|stat|stats|metric|heading|text|label|code|display|summary|detail|statblock|metricscard|kpicard|statscard|datatablerow|tablerow|tablecell|listitem|listrow|leaderboard|scorecard)$/.test(n) ||
+    /table$|list$|chart$|graph$|stats$|metric$|^heading$|^code$|display$|detail$|summary$|kpicard$|scorecard$|leaderboard$/.test(n)
+  ) return "Text and Data Display";
+
+  return null; // No category matched — caller falls back to original group
+}
+
 /** shadcn/ui composite component recipes: component name → imports + render. */
 const RECIPES = {
   Accordion: {
@@ -932,6 +998,105 @@ function scanComponentUsages(componentName, projectRoot) {
     .map(([className, count]) => ({ className, count }));
 }
 
+/**
+ * Comprehensive component usage scanner for the "Usage" story.
+ * Walks all src/ .tsx/.jsx files (excluding ui/, stories/, the component file itself)
+ * and returns: which files use the component, total usage count, most-used prop names,
+ * and co-occurring components (other PascalCase components in the same files).
+ */
+function scanComponentFileUsages(componentName, projectRoot) {
+  const uiPathFrag    = path.join("components", "ui") + path.sep;
+  const storiesPathFrag = path.join("stories") + path.sep;
+
+  const fileUsages = []; // { relPath, basename, count }
+  const propCounts = {}; // propName → count across all usages
+  const coCompCounts = {}; // compName → co-occurrence count
+
+  const escapedName = componentName.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+  const usageRe = new RegExp(`<${escapedName}(?:\\s+([\\s\\S]*?))?(?:\\s*/>|\\s*>)`, "g");
+  const coCompRe = /<([A-Z][a-zA-Z0-9]+)(?:\s|\/|>)/g;
+  const SKIP_CO = new Set(["React", "Fragment", "Suspense", "StrictMode", "Component", "ErrorBoundary"]);
+
+  function walk(dir) {
+    let entries;
+    try { entries = fs.readdirSync(dir, { withFileTypes: true }); } catch { return; }
+    for (const e of entries) {
+      if (_SCAN_IGNORE_DIRS.has(e.name)) continue;
+      const full = path.join(dir, e.name);
+      if (e.isDirectory()) { walk(full); continue; }
+      if (!/\.(tsx|jsx)$/.test(e.name)) continue;
+      if (full.includes(uiPathFrag)) continue;
+      if (full.includes(storiesPathFrag)) continue;
+      // Skip the component's own definition file
+      const baseNoExt = path.basename(full, path.extname(full));
+      if (baseNoExt === componentName) continue;
+
+      let src;
+      try { src = fs.readFileSync(full, "utf-8"); } catch { continue; }
+      if (!src.includes(`<${componentName}`)) continue;
+
+      // Count usages and collect prop names
+      let count = 0;
+      let m;
+      usageRe.lastIndex = 0;
+      while ((m = usageRe.exec(src)) !== null) {
+        count++;
+        const propsStr = m[1] || "";
+        // Extract prop names (e.g. variant="..." or isLoading or onClick={...})
+        const propNameRe = /\b([a-z][a-zA-Z0-9]+)(?==|\s*>|\s*\/>|\s+[a-z])/g;
+        let pm;
+        while ((pm = propNameRe.exec(propsStr)) !== null) {
+          const pn = pm[1];
+          if (!["className", "style", "key", "id", "ref"].includes(pn)) {
+            propCounts[pn] = (propCounts[pn] || 0) + 1;
+          }
+        }
+      }
+
+      if (count > 0) {
+        const relPath = path.relative(projectRoot, full);
+        fileUsages.push({ relPath, basename: path.basename(full), count });
+
+        // Co-occurring components
+        coCompRe.lastIndex = 0;
+        while ((m = coCompRe.exec(src)) !== null) {
+          const cn = m[1];
+          if (cn !== componentName && !SKIP_CO.has(cn)) {
+            coCompCounts[cn] = (coCompCounts[cn] || 0) + 1;
+          }
+        }
+      }
+    }
+  }
+
+  // Walk standard src directories
+  const srcDirs = [
+    path.join(projectRoot, "src"),
+    path.join(projectRoot, "client", "src"),
+    path.join(projectRoot, "app"),
+  ].filter(d => fs.existsSync(d));
+  for (const d of srcDirs) walk(d);
+
+  const totalCount = fileUsages.reduce((s, f) => s + f.count, 0);
+
+  const topProps = Object.entries(propCounts)
+    .sort((a, b) => b[1] - a[1])
+    .slice(0, 6)
+    .map(([name, count]) => ({ name, count }));
+
+  const coComponents = Object.entries(coCompCounts)
+    .sort((a, b) => b[1] - a[1])
+    .slice(0, 6)
+    .map(([name, count]) => ({ name, count }));
+
+  return {
+    files: fileUsages.sort((a, b) => b.count - a.count).slice(0, 10),
+    totalCount,
+    topProps,
+    coComponents,
+  };
+}
+
 /** Render'da args'a uygulanacak fallback (useState(estimate.toString()) gibi kullanımlar için; args/Controls undefined yapsa bile). */
 const RENDER_ARGS_FALLBACKS = {
   TaskEstimateInput: ", estimate: (args && args.estimate) ?? 0, value: (args && args.value) ?? 0, task: (args && args.task) ?? { id: \"1\", title: \"Example\", estimate: 0 }",
@@ -1770,12 +1935,17 @@ function buildStoryFileContent(comp) {
   }
   if (!importPath.startsWith(".")) importPath = "./" + importPath;
 
-  // Normalize legacy "shadcn" group → "UI"; filename groups (e.g. "NavLink.tsx") → "Components"
+  // Determine semantic category and story title
   const rawGroup = comp.group || "Components";
-  const group = rawGroup === "shadcn" ? "UI"
+  const baseGroup = rawGroup === "shadcn" ? "UI"
     : rawGroup.includes(".") ? "Components"   // root-level file without subdirectory
     : rawGroup;
-  // Title: "Module/ComponentName"  (category intentionally dropped — folder is the context)
+  // Apply Atlassian-style semantic categorization to ALL components (shadcn and project-specific alike).
+  // If no semantic category is detected, fall back to the original folder-based group.
+  const compTokensForClassify = Array.isArray(comp.tokens) ? comp.tokens : [];
+  const compPropsForClassify  = Array.isArray(comp.props)  ? comp.props  : [];
+  const semanticCat = classifyComponent(componentName, compTokensForClassify, compPropsForClassify);
+  const group = semanticCat || baseGroup;
   const title = `${group}/${componentName}`;
 
   // Read component source once (used for export style, props, CVA parsing)
@@ -1940,6 +2110,170 @@ function buildStoryFileContent(comp) {
     }
   }
 
+  // --- Design Tokens story ---
+  // Generate a "Tokens" export that shows which Tailwind tokens this component uses,
+  // resolved to project-specific color/spacing values from foundations.
+  {
+    const compTokens = Array.isArray(comp.tokens) ? comp.tokens : [];
+    const foundColors = FOUNDATIONS_DATA?.colors || {};
+    if (compTokens.length >= 3) {
+      // Keep only base tokens (no state/responsive prefixes like hover:, focus:, sm:, dark:)
+      const cleanTokens = compTokens.filter(t => !/:/.test(t));
+
+      // Exclude font-size tokens (text-xs, text-sm, text-base…) from color category
+      const colorRaw      = cleanTokens.filter(t =>
+        /^(bg|text|border|ring|from|to|fill|stroke)-/.test(t) &&
+        !/^text-(xs|sm|base|lg|xl|2xl|3xl|4xl|5xl|6xl|7xl|8xl|9xl|\d)/.test(t)
+      );
+      const spacingRaw    = cleanTokens.filter(t => /^(p[xylrbt]?|m[xylrbt]?|gap|space-[xy]|w-|h-|min-[wh]|max-[wh]|size-)/.test(t));
+      const typographyRaw = cleanTokens.filter(t => /^(text-(xs|sm|base|lg|xl|2xl|3xl|4xl|5xl)|font-)/.test(t));
+      const radiusRaw     = cleanTokens.filter(t => /^rounded/.test(t));
+      const animRaw       = cleanTokens.filter(t => /^(transition|duration|animate|ease|delay)-/.test(t));
+
+      // Resolve semantic color tokens → hex swatch from foundations.colors
+      const resolvedColors = colorRaw.map(token => {
+        const m = token.match(/^(?:bg|text|border|ring|from|to|fill|stroke)-(.+)$/);
+        const key = m ? m[1] : null;
+        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, label: key };
+      });
+
+      const hasContent = resolvedColors.length > 0 || spacingRaw.length > 0 || typographyRaw.length > 0 || radiusRaw.length > 0 || animRaw.length > 0;
+      if (hasContent) {
+        lines.push("");
+        lines.push(`export const Tokens: Story = {`);
+        lines.push(`  name: "Design Tokens",`);
+        lines.push(`  parameters: { layout: "fullscreen" },`);
+        lines.push(`  render: () => {`);
+        lines.push(`    const colorTokens = ${JSON.stringify(resolvedColors)};`);
+        lines.push(`    const spacingTokens = ${JSON.stringify(spacingRaw)};`);
+        lines.push(`    const typographyTokens = ${JSON.stringify(typographyRaw)};`);
+        lines.push(`    const radiusTokens = ${JSON.stringify(radiusRaw)};`);
+        lines.push(`    const animationTokens = ${JSON.stringify(animRaw)};`);
+        lines.push(`    const chip = (label: string, bg: string, color: string) => (`);
+        lines.push(`      <span key={label} style={{ fontFamily: "monospace", fontSize: 11, background: bg, color, padding: "3px 9px", borderRadius: 5, border: \`1px solid \${bg === "#f9fafb" ? "#e5e7eb" : bg}\`, whiteSpace: "nowrap" as any }}>{label}</span>`);
+        lines.push(`    );`);
+        lines.push(`    const section = (title: string, children: any) => (`);
+        lines.push(`      <section style={{ marginBottom: 28 }}>`);
+        lines.push(`        <p style={{ margin: "0 0 10px", fontSize: 11, fontWeight: 700, color: "#6b7280", textTransform: "uppercase", letterSpacing: "0.08em" }}>{title}</p>`);
+        lines.push(`        {children}`);
+        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(`        <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", (`);
+        lines.push(`          <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>`);
+        lines.push(`            {colorTokens.map(({ token, hex, label }) => (`);
+        lines.push(`              <div key={token} style={{ display: "flex", alignItems: "center", gap: 7, padding: "7px 12px", border: "1px solid #e5e7eb", borderRadius: 8, background: "#f9fafb" }}>`);
+        lines.push(`                {hex && <span style={{ display: "inline-block", width: 16, height: 16, borderRadius: 4, background: hex, border: "1px solid rgba(0,0,0,0.1)", flexShrink: 0 }} />}`);
+        lines.push(`                <code style={{ fontSize: 12, color: "#374151", fontWeight: 600 }}>{token}</code>`);
+        lines.push(`                {hex && <span style={{ fontSize: 11, color: "#9ca3af" }}>{hex}</span>}`);
+        lines.push(`              </div>`);
+        lines.push(`            ))}`);
+        lines.push(`          </div>`);
+        lines.push(`        ))}`);
+        lines.push(`        {spacingTokens.length > 0 && section("Spacing", (`);
+        lines.push(`          <div style={{ display: "flex", flexWrap: "wrap", gap: 6 }}>{spacingTokens.map(t => chip(t, "#faf5ff", "#6d28d9"))}</div>`);
+        lines.push(`        ))}`);
+        lines.push(`        {typographyTokens.length > 0 && section("Typography", (`);
+        lines.push(`          <div style={{ display: "flex", flexWrap: "wrap", gap: 6 }}>{typographyTokens.map(t => chip(t, "#fffbeb", "#92400e"))}</div>`);
+        lines.push(`        ))}`);
+        lines.push(`        {radiusTokens.length > 0 && section("Border Radius", (`);
+        lines.push(`          <div style={{ display: "flex", gap: 16, flexWrap: "wrap", alignItems: "flex-end" }}>`);
+        lines.push(`            {radiusTokens.map(t => {`);
+        lines.push(`              const px = t === "rounded-none" ? 0 : t === "rounded-sm" ? 2 : t === "rounded" ? 4 : t === "rounded-md" ? 6 : t === "rounded-lg" ? 8 : t === "rounded-xl" ? 12 : t === "rounded-2xl" ? 16 : t === "rounded-3xl" ? 24 : t === "rounded-full" ? 9999 : 4;`);
+        lines.push(`              return (`);
+        lines.push(`                <div key={t} style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 6 }}>`);
+        lines.push(`                  <div style={{ width: 44, height: 44, background: "#6366f1", borderRadius: px }} />`);
+        lines.push(`                  <code style={{ fontSize: 10, color: "#6b7280" }}>{t}</code>`);
+        lines.push(`                </div>`);
+        lines.push(`              );`);
+        lines.push(`            })}`);
+        lines.push(`          </div>`);
+        lines.push(`        ))}`);
+        lines.push(`        {animationTokens.length > 0 && section("Motion", (`);
+        lines.push(`          <div style={{ display: "flex", flexWrap: "wrap", gap: 6 }}>{animationTokens.map(t => chip(t, "#f0fdf4", "#166534"))}</div>`);
+        lines.push(`        ))}`);
+        lines.push(`      </div>`);
+        lines.push(`    );`);
+        lines.push(`  },`);
+        lines.push(`};`);
+      }
+    }
+  }
+
+  // --- Usage story ---
+  // Shows where this component is actually used in the project:
+  // files, usage count, most-used props, and co-occurring components.
+  // All data is derived from the project source — no placeholder content.
+  {
+    const usageData = scanComponentFileUsages(componentName, PROJECT_ROOT);
+    if (usageData.totalCount > 0) {
+      lines.push(``);
+      lines.push(`export const Usage: Story = {`);
+      lines.push(`  name: "Usage",`);
+      lines.push(`  parameters: { layout: "fullscreen" },`);
+      lines.push(`  render: () => {`);
+      lines.push(`    const usageFiles = ${JSON.stringify(usageData.files)};`);
+      lines.push(`    const totalCount = ${usageData.totalCount};`);
+      lines.push(`    const topProps = ${JSON.stringify(usageData.topProps)};`);
+      lines.push(`    const coComponents = ${JSON.stringify(usageData.coComponents)};`);
+      lines.push(`    const chip = (label: string, sub?: string) => (`);
+      lines.push(`      <span key={label} style={{ display: "inline-flex", alignItems: "center", gap: 4, background: "#f3f4f6", border: "1px solid #e5e7eb", borderRadius: 6, padding: "3px 10px", fontSize: 12, color: "#374151", fontFamily: "monospace", whiteSpace: "nowrap" as any }}>`);
+      lines.push(`        {label}{sub && <span style={{ color: "#9ca3af", fontSize: 11, marginLeft: 3 }}>×{sub}</span>}`);
+      lines.push(`      </span>`);
+      lines.push(`    );`);
+      lines.push(`    const sectionHead = (label: string) => (`);
+      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={{ 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 }}>`);
+      lines.push(`            <code style={{ background: "#f3f4f6", padding: "1px 6px", borderRadius: 4, fontSize: 12 }}>${componentName}</code> appears <strong>{totalCount}</strong> time{totalCount !== 1 ? "s" : ""} across <strong>{usageFiles.length}</strong> file{usageFiles.length !== 1 ? "s" : ""} in this project.`);
+      lines.push(`          </p>`);
+      lines.push(`        </div>`);
+      // Found In section
+      lines.push(`        <section style={{ marginBottom: 32 }}>`);
+      lines.push(`          {sectionHead("Found In")}`);
+      lines.push(`          <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>`);
+      lines.push(`            {usageFiles.map((f: any) => (`);
+      lines.push(`              <div key={f.relPath} style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "9px 14px", border: "1px solid #e5e7eb", borderRadius: 8, background: "#f9fafb" }}>`);
+      lines.push(`                <code style={{ fontSize: 12, color: "#374151" }}>{f.relPath}</code>`);
+      lines.push(`                <span style={{ flexShrink: 0, marginLeft: 12, fontSize: 11, background: "#e0e7ff", color: "#3730a3", padding: "2px 8px", borderRadius: 12, fontWeight: 600 }}>{f.count}×</span>`);
+      lines.push(`              </div>`);
+      lines.push(`            ))}`);
+      lines.push(`          </div>`);
+      lines.push(`        </section>`);
+      // Most Used Props section
+      lines.push(`        {topProps.length > 0 && (`);
+      lines.push(`          <section style={{ marginBottom: 32 }}>`);
+      lines.push(`            {sectionHead("Most Used Props")}`);
+      lines.push(`            <div style={{ display: "flex", flexWrap: "wrap", gap: 6 }}>`);
+      lines.push(`              {topProps.map((p: any) => chip(p.name, p.count.toString()))}`);
+      lines.push(`            </div>`);
+      lines.push(`          </section>`);
+      lines.push(`        )}`);
+      // Often Used With section
+      lines.push(`        {coComponents.length > 0 && (`);
+      lines.push(`          <section style={{ marginBottom: 32 }}>`);
+      lines.push(`            {sectionHead("Often Used With")}`);
+      lines.push(`            <div style={{ display: "flex", flexWrap: "wrap", gap: 6 }}>`);
+      lines.push(`              {coComponents.map((c: any) => chip(c.name))}`);
+      lines.push(`            </div>`);
+      lines.push(`          </section>`);
+      lines.push(`        )}`);
+      lines.push(`      </div>`);
+      lines.push(`    );`);
+      lines.push(`  },`);
+      lines.push(`};`);
+    }
+  }
+
   return lines.join("\n");
 }
 
@@ -2125,7 +2459,7 @@ function writeFoundationsStories(foundations) {
     const colorsContent = [
       "import type { Meta, StoryObj } from \"@storybook/react\";",
       "",
-      "const meta = { title: \"Foundations/Colors\" } satisfies Meta;",
+      "const meta = { title: \"Foundations/Colors\", parameters: { layout: \"fullscreen\" } } satisfies Meta;",
       "export default meta;",
       "type Story = StoryObj;",
       "",
@@ -2250,7 +2584,7 @@ function writeFoundationsStories(foundations) {
     const typoContent = [
       "import type { Meta, StoryObj } from \"@storybook/react\";",
       "",
-      "const meta = { title: \"Foundations/Typography\" } satisfies Meta;",
+      "const meta = { title: \"Foundations/Typography\", parameters: { layout: \"fullscreen\" } } satisfies Meta;",
       "export default meta;",
       "type Story = StoryObj;",
       "",
@@ -2410,7 +2744,7 @@ function writeFoundationsStories(foundations) {
     [
       "import type { Meta, StoryObj } from \"@storybook/react\";",
       "",
-      "const meta = { title: \"Foundations/Brand\" } satisfies Meta;",
+      "const meta = { title: \"Foundations/Brand\", parameters: { layout: \"fullscreen\" } } satisfies Meta;",
       "export default meta;",
       "type Story = StoryObj;",
       "",
@@ -2444,7 +2778,7 @@ function writeFoundationsStories(foundations) {
       "import type { Meta, StoryObj } from \"@storybook/react\";",
       "import * as Lucide from \"lucide-react\";",
       "",
-      "const meta = { title: \"Foundations/Icons\" } satisfies Meta;",
+      "const meta = { title: \"Foundations/Icons\", parameters: { layout: \"fullscreen\" } } satisfies Meta;",
       "export default meta;",
       "type Story = StoryObj;",
       "type IconEntry = { name: string; total: number; topFiles: string[] };",
@@ -2508,10 +2842,16 @@ function writeFoundationsStories(foundations) {
       "        </div>",
       "      );",
       "    };",
+      "    const TILE_BKGS = [",
+      "      { bg: \"#f3f4f6\", iconColor: \"#374151\", border: \"#e5e7eb\", label: \"neutral\" },",
+      "      { bg: \"#fff\",    iconColor: \"#374151\", border: \"#e5e7eb\", label: \"white\"   },",
+      "      { bg: \"#4f46e5\", iconColor: \"#ffffff\", border: \"#4f46e5\", label: \"brand\"   },",
+      "    ];",
+      "    const TILE_SIZES = [16, 20, 24];",
       "    return (",
       "      <div style={{ padding: 32, fontFamily: \"system-ui,sans-serif\", background: \"#fff\", minHeight: \"100vh\", color: \"#111\" }}>",
       "        <h2 style={{ fontSize: 20, fontWeight: 700, margin: \"0 0 4px\" }}>Icons</h2>",
-      "        <div style={{ marginBottom: 24 }}>",
+      "        <div style={{ marginBottom: 28 }}>",
       "          <p style={{ margin: 0, marginBottom: 4, fontSize: 13, color: \"#6b7280\" }}>",
       "            {iconData.length} icons imported from <code style={{ fontSize: 12, background: \"#f3f4f6\", padding: \"1px 5px\", borderRadius: 4 }}>lucide-react</code> in app code.",
       "          </p>",
@@ -2519,6 +2859,50 @@ function writeFoundationsStories(foundations) {
       "            Sorted by usage frequency · Badge = total JSX usages · Click any card to copy the icon name.",
       "          </p>",
       "        </div>",
+      "",
+      "        {/* ── Icon Tiles ── */}",
+      "        {usedIcons.slice(0, 16).length > 0 && (",
+      "          <section style={{ marginBottom: 40 }}>",
+      "            <p style={{ margin: \"0 0 4px\", fontSize: 11, fontWeight: 700, color: \"#6b7280\", textTransform: \"uppercase\", letterSpacing: \"0.06em\" }}>",
+      "              Icon Tiles",
+      "            </p>",
+      "            <p style={{ margin: \"0 0 16px\", fontSize: 12, color: \"#9ca3af\" }}>",
+      "              Three sizes (16 · 20 · 24 px) × three backgrounds. Click to copy icon name.",
+      "            </p>",
+      "            <div style={{ display: \"grid\", gridTemplateColumns: \"repeat(auto-fill, minmax(110px, 1fr))\", gap: 12 }}>",
+      "              {usedIcons.slice(0, 16).map((d) => {",
+      "                const Icon = (Lucide as Record<string, any>)[d.name];",
+      "                if (!Icon) return null;",
+      "                const isCopied = copied === d.name;",
+      "                return (",
+      "                  <div key={d.name} onClick={() => handleCopy(d.name)}",
+      "                    style={{ cursor: \"pointer\", border: `1px solid ${isCopied ? \"#16a34a\" : \"#e5e7eb\"}`, borderRadius: 10,",
+      "                      padding: 10, background: isCopied ? \"#f0fdf4\" : \"#fff\", transition: \"border-color 0.15s\" }}>",
+      "                    {TILE_BKGS.map((bkg) => (",
+      "                      <div key={bkg.label} style={{ display: \"flex\", gap: 3, marginBottom: 3 }}>",
+      "                        {TILE_SIZES.map((sz) => (",
+      "                          <div key={sz} style={{",
+      "                            width: 34, height: 34, borderRadius: 6,",
+      "                            background: bkg.bg,",
+      "                            border: `1px solid ${bkg.border}`,",
+      "                            display: \"flex\", alignItems: \"center\", justifyContent: \"center\", flexShrink: 0,",
+      "                          }}>",
+      "                            <Icon size={sz} strokeWidth={1.75} color={bkg.iconColor} />",
+      "                          </div>",
+      "                        ))}",
+      "                      </div>",
+      "                    ))}",
+      "                    <div style={{ fontSize: 10, color: isCopied ? \"#16a34a\" : \"#6b7280\", marginTop: 6,",
+      "                      textAlign: \"center\", overflow: \"hidden\", textOverflow: \"ellipsis\", whiteSpace: \"nowrap\" as any }}>",
+      "                      {isCopied ? \"Copied!\" : d.name}",
+      "                    </div>",
+      "                  </div>",
+      "                );",
+      "              })}",
+      "            </div>",
+      "          </section>",
+      "        )}",
+      "",
       "        {usedIcons.length > 0 && (",
       "          <>",
       "            <p style={{ margin: \"0 0 12px\", fontSize: 12, fontWeight: 600, color: \"#374151\",",
@@ -2567,7 +2951,7 @@ function writeFoundationsStories(foundations) {
     const gridContent = [
       "import type { Meta, StoryObj } from \"@storybook/react\";",
       "",
-      "const meta = { title: \"Foundations/Grid\" } satisfies Meta;",
+      "const meta = { title: \"Foundations/Grid\", parameters: { layout: \"fullscreen\" } } satisfies Meta;",
       "export default meta;",
       "type Story = StoryObj;",
       "",
@@ -2602,7 +2986,7 @@ function writeFoundationsStories(foundations) {
       "        );",
       "      }",
       "      return (",
-      "        <div style={{ fontFamily: \"monospace\", fontSize: 10, color: \"#475569\", marginBottom: 8, background: \"#0a0f1a\", padding: \"4px 6px\", borderRadius: 4 }}>",
+      "        <div style={{ fontFamily: \"monospace\", fontSize: 10, color: \"#475569\", marginBottom: 8, background: \"#f1f5f9\", padding: \"4px 6px\", borderRadius: 4, border: \"1px solid #e5e7eb\" }}>",
       "          grid-cols-{colVal}",
       "        </div>",
       "      );",
@@ -2618,29 +3002,29 @@ function writeFoundationsStories(foundations) {
       "          <p style={{ margin: \"0 0 14px\", fontSize: 12, color: \"#475569\" }}>",
       "            Tailwind CSS breakpoint prefixes detected in source.",
       "          </p>",
-      "          <div style={{ position: \"relative\", height: 28, marginBottom: 14, background: \"#0a0f1a\", borderRadius: 8, border: \"1px solid #1e293b\", overflow: \"hidden\" }}>",
+      "          <div style={{ position: \"relative\", height: 28, marginBottom: 14, background: \"#f1f5f9\", borderRadius: 8, border: \"1px solid #e2e8f0\", overflow: \"hidden\" }}>",
       "            {ALL_BPS.map((bp) => {",
       "              const cfg = BP_CONFIG[bp];",
       "              const used = !!(gridSystem.breakpoints as any)?.[bp];",
       "              const leftPct = (cfg.px / 1600) * 100;",
       "              return (",
       "                <div key={bp} style={{ position: \"absolute\", left: `${leftPct}%`, top: 0, bottom: 0,",
-      "                  borderLeft: `2px solid ${used ? cfg.color : \"#1e293b\"}`,",
+      "                  borderLeft: `2px solid ${used ? cfg.color : \"#cbd5e1\"}`,",
       "                  display: \"flex\", alignItems: \"center\", paddingLeft: 4 }}>",
-      "                  <span style={{ fontSize: 9, color: used ? cfg.color : \"#334155\",",
+      "                  <span style={{ fontSize: 9, color: used ? cfg.color : \"#94a3b8\",",
       "                    whiteSpace: \"nowrap\", fontWeight: 600 }}>{bp}</span>",
       "                </div>",
       "              );",
       "            })}",
       "          </div>",
-      "          <div style={{ borderRadius: 8, border: \"1px solid #1e293b\", overflow: \"hidden\" }}>",
+      "          <div style={{ borderRadius: 8, border: \"1px solid #e5e7eb\", overflow: \"hidden\" }}>",
       "            <table style={{ width: \"100%\", borderCollapse: \"collapse\", fontSize: 12 }}>",
       "              <thead>",
-      "                <tr style={{ background: \"#0a0f1a\", borderBottom: \"1px solid #1e293b\" }}>",
-      "                  <th style={{ textAlign: \"left\", padding: \"8px 12px\", color: \"#64748b\", fontWeight: 600 }}>Prefix</th>",
-      "                  <th style={{ textAlign: \"left\", padding: \"8px 12px\", color: \"#64748b\", fontWeight: 600 }}>Min-width</th>",
-      "                  <th style={{ textAlign: \"left\", padding: \"8px 12px\", color: \"#64748b\", fontWeight: 600 }}>Usages</th>",
-      "                  <th style={{ textAlign: \"left\", padding: \"8px 12px\", color: \"#64748b\", fontWeight: 600 }}>Top components</th>",
+      "                <tr style={{ background: \"#f8fafc\", borderBottom: \"1px solid #e5e7eb\" }}>",
+      "                  <th style={{ textAlign: \"left\", padding: \"8px 12px\", color: \"#6b7280\", fontWeight: 600 }}>Prefix</th>",
+      "                  <th style={{ textAlign: \"left\", padding: \"8px 12px\", color: \"#6b7280\", fontWeight: 600 }}>Min-width</th>",
+      "                  <th style={{ textAlign: \"left\", padding: \"8px 12px\", color: \"#6b7280\", fontWeight: 600 }}>Usages</th>",
+      "                  <th style={{ textAlign: \"left\", padding: \"8px 12px\", color: \"#6b7280\", fontWeight: 600 }}>Top components</th>",
       "                </tr>",
       "              </thead>",
       "              <tbody>",
@@ -2648,12 +3032,12 @@ function writeFoundationsStories(foundations) {
       "                  const cfg = BP_CONFIG[bp];",
       "                  const data = (gridSystem.breakpoints as any)?.[bp];",
       "                  return (",
-      "                    <tr key={bp} style={{ borderBottom: i < 4 ? \"1px solid #1e293b\" : \"none\", opacity: data ? 1 : 0.3 }}>",
+      "                    <tr key={bp} style={{ borderBottom: i < 4 ? \"1px solid #f0f4f8\" : \"none\", opacity: data ? 1 : 0.4 }}>",
       "                      <td style={{ padding: \"8px 12px\" }}>",
-      "                        <code style={{ fontSize: 12, fontWeight: 700, color: data ? cfg.color : \"#475569\" }}>{bp}:</code>",
+      "                        <code style={{ fontSize: 12, fontWeight: 700, color: data ? cfg.color : \"#94a3b8\" }}>{bp}:</code>",
       "                      </td>",
-      "                      <td style={{ padding: \"8px 12px\", color: \"#94a3b8\", fontFamily: \"monospace\" }}>{cfg.px}px</td>",
-      "                      <td style={{ padding: \"8px 12px\", color: data ? \"#e2e8f0\" : \"#334155\" }}>",
+      "                      <td style={{ padding: \"8px 12px\", color: \"#475569\", fontFamily: \"monospace\" }}>{cfg.px}px</td>",
+      "                      <td style={{ padding: \"8px 12px\", color: data ? \"#111827\" : \"#94a3b8\" }}>",
       "                        {data ? `×${data.count}` : \"—\"}",
       "                      </td>",
       "                      <td style={{ padding: \"8px 12px\" }}>",
@@ -2680,12 +3064,12 @@ function writeFoundationsStories(foundations) {
       "            </p>",
       "            <div style={{ display: \"grid\", gridTemplateColumns: \"repeat(auto-fill, minmax(180px, 1fr))\", gap: 12 }}>",
       "              {(colEntries as [string, { count: number; topFiles: string[] }][]).map(([val, data]) => (",
-      "                <div key={val} style={{ background: \"#0a0f1a\", border: \"1px solid #1e293b\", borderRadius: 8, padding: 12 }}>",
+      "                <div key={val} style={{ background: \"#f8fafc\", border: \"1px solid #e5e7eb\", borderRadius: 8, padding: 12 }}>",
       "                  {renderColPreview(val)}",
       "                  <div style={{ display: \"flex\", justifyContent: \"space-between\", alignItems: \"center\", marginBottom: 6 }}>",
-      "                    <code style={{ fontSize: 11, color: \"#a78bfa\" }}>grid-cols-{val}</code>",
-      "                    <span style={{ fontSize: 11, fontWeight: 600, background: \"#1e293b\",",
-      "                      color: \"#94a3b8\", padding: \"1px 6px\", borderRadius: 999 }}>×{data.count}</span>",
+      "                    <code style={{ fontSize: 11, color: \"#4f46e5\" }}>grid-cols-{val}</code>",
+      "                    <span style={{ fontSize: 11, fontWeight: 600, background: \"#e8f0fe\",",
+      "                      color: \"#3730a3\", padding: \"1px 6px\", borderRadius: 999 }}>×{data.count}</span>",
       "                  </div>",
       "                  <div style={{ display: \"flex\", flexWrap: \"wrap\", gap: 4 }}>",
       "                    {data.topFiles.map(chip)}",
@@ -2706,8 +3090,8 @@ function writeFoundationsStories(foundations) {
       "            <div style={{ display: \"flex\", flexWrap: \"wrap\", gap: 8 }}>",
       "              {(gapEntries as [string, { count: number; topFiles: string[] }][]).map(([val, data]) => (",
       "                <span key={val} style={{ display: \"flex\", alignItems: \"center\", gap: 6,",
-      "                  background: \"#0a0f1a\", border: \"1px solid #1e293b\", borderRadius: 6, padding: \"5px 10px\", fontSize: 12 }}>",
-      "                  <code style={{ color: \"#67e8f9\" }}>gap-{val}</code>",
+      "                  background: \"#f8fafc\", border: \"1px solid #e5e7eb\", borderRadius: 6, padding: \"5px 10px\", fontSize: 12 }}>",
+      "                  <code style={{ color: \"#0891b2\" }}>gap-{val}</code>",
       "                  <span style={{ color: \"#374151\", fontSize: 11 }}>×{data.count}</span>",
       "                </span>",
       "              ))}",
@@ -2725,8 +3109,8 @@ function writeFoundationsStories(foundations) {
       "            <div style={{ display: \"flex\", flexWrap: \"wrap\", gap: 8 }}>",
       "              {(maxWEntries as [string, number][]).map(([val, count]) => (",
       "                <span key={val} style={{ display: \"flex\", alignItems: \"center\", gap: 6,",
-      "                  background: \"#0a0f1a\", border: \"1px solid #1e293b\", borderRadius: 6, padding: \"5px 10px\", fontSize: 12 }}>",
-      "                  <code style={{ color: \"#4ade80\" }}>max-w-{val}</code>",
+      "                  background: \"#f8fafc\", border: \"1px solid #e5e7eb\", borderRadius: 6, padding: \"5px 10px\", fontSize: 12 }}>",
+      "                  <code style={{ color: \"#16a34a\" }}>max-w-{val}</code>",
       "                  <span style={{ color: \"#475569\", fontSize: 11 }}>×{count}</span>",
       "                </span>",
       "              ))}",
@@ -2756,7 +3140,7 @@ function writeFoundationsStories(foundations) {
       [
         "import type { Meta, StoryObj } from \"@storybook/react\";",
         "",
-        "const meta = { title: \"Foundations/Button Usage\" } satisfies Meta;",
+        "const meta = { title: \"Foundations/Button Usage\", parameters: { layout: \"fullscreen\" } } satisfies Meta;",
         "export default meta;",
         "type Story = StoryObj;",
         "",
@@ -2770,19 +3154,19 @@ function writeFoundationsStories(foundations) {
         "      <table style={{ borderCollapse: \"collapse\", width: \"100%\", fontSize: 13 }}>",
         "        <thead>",
         "          <tr>",
-        "            <th style={{ textAlign: \"left\", padding: \"4px 8px\", borderBottom: \"1px solid #333\" }}>Variant</th>",
-        "            <th style={{ textAlign: \"left\", padding: \"4px 8px\", borderBottom: \"1px solid #333\" }}>Size</th>",
-        "            <th style={{ textAlign: \"left\", padding: \"4px 8px\", borderBottom: \"1px solid #333\" }}>asChild</th>",
-        "            <th style={{ textAlign: \"right\", padding: \"4px 8px\", borderBottom: \"1px solid #333\" }}>Count</th>",
+        "            <th style={{ textAlign: \"left\", padding: \"4px 8px\", borderBottom: \"1px solid #e5e7eb\" }}>Variant</th>",
+        "            <th style={{ textAlign: \"left\", padding: \"4px 8px\", borderBottom: \"1px solid #e5e7eb\" }}>Size</th>",
+        "            <th style={{ textAlign: \"left\", padding: \"4px 8px\", borderBottom: \"1px solid #e5e7eb\" }}>asChild</th>",
+        "            <th style={{ textAlign: \"right\", padding: \"4px 8px\", borderBottom: \"1px solid #e5e7eb\" }}>Count</th>",
         "          </tr>",
         "        </thead>",
         "        <tbody>",
         "          {combos.map((c) => (",
         "            <tr key={c.key}>",
-        "              <td style={{ padding: \"4px 8px\", borderBottom: \"1px solid #222\" }}>{c.variant}</td>",
-        "              <td style={{ padding: \"4px 8px\", borderBottom: \"1px solid #222\" }}>{c.size}</td>",
-        "              <td style={{ padding: \"4px 8px\", borderBottom: \"1px solid #222\" }}>{c.asChild ? \"yes\" : \"no\"}</td>",
-        "              <td style={{ padding: \"4px 8px\", borderBottom: \"1px solid #222\", textAlign: \"right\" }}>{c.count}</td>",
+        "              <td style={{ padding: \"4px 8px\", borderBottom: \"1px solid #f0f0f0\" }}>{c.variant}</td>",
+        "              <td style={{ padding: \"4px 8px\", borderBottom: \"1px solid #f0f0f0\" }}>{c.size}</td>",
+        "              <td style={{ padding: \"4px 8px\", borderBottom: \"1px solid #f0f0f0\" }}>{c.asChild ? \"yes\" : \"no\"}</td>",
+        "              <td style={{ padding: \"4px 8px\", borderBottom: \"1px solid #f0f0f0\", textAlign: \"right\" }}>{c.count}</td>",
         "            </tr>",
         "          ))}",
         "        </tbody>",
@@ -2831,7 +3215,7 @@ function writeFoundationsStories(foundations) {
     const spacingContent = [
       "import type { Meta, StoryObj } from \"@storybook/react\";",
       "",
-      "const meta = { title: \"Foundations/Spacing & Layout\" } satisfies Meta;",
+      "const meta = { title: \"Foundations/Spacing & Layout\", parameters: { layout: \"fullscreen\" } } satisfies Meta;",
       "export default meta;",
       "type Story = StoryObj;",
       "",
@@ -2938,7 +3322,7 @@ function writeFoundationsStories(foundations) {
     const elevationContent = [
       "import type { Meta, StoryObj } from \"@storybook/react\";",
       "",
-      "const meta = { title: \"Foundations/Elevation & Shadows\" } satisfies Meta;",
+      "const meta = { title: \"Foundations/Elevation & Shadows\", parameters: { layout: \"fullscreen\" } } satisfies Meta;",
       "export default meta;",
       "type Story = StoryObj;",
       "",
@@ -3060,7 +3444,7 @@ function writeFoundationsStories(foundations) {
     const borderContent = [
       "import type { Meta, StoryObj } from \"@storybook/react\";",
       "",
-      "const meta = { title: \"Foundations/Border & Radius\" } satisfies Meta;",
+      "const meta = { title: \"Foundations/Border & Radius\", parameters: { layout: \"fullscreen\" } } satisfies Meta;",
       "export default meta;",
       "type Story = StoryObj;",
       "",
@@ -3118,7 +3502,6 @@ function writeFoundationsStories(foundations) {
     const motion = foundations?.motion || {};
     const durations = motion.transitionDuration || {};
     const easings = motion.transitionTimingFunction || {};
-    const animations = motion.animation || {};
 
     const durationRows = Object.entries(durations)
       .filter(([k]) => k !== "0" && k !== "DEFAULT")
@@ -3129,103 +3512,168 @@ function writeFoundationsStories(foundations) {
       .filter(([k]) => k !== "DEFAULT")
       .map(([token, value]) => ({ token, value }));
 
-    const animationRows = Object.entries(animations)
-      .filter(([k]) => k !== "none")
-      .map(([token, value]) => ({ token, value }));
+    // Tailwind default scales (used when project has no custom tokens)
+    const TAILWIND_DEFAULT_DURATIONS = [
+      { token: "75",   value: "75ms"   },
+      { token: "100",  value: "100ms"  },
+      { token: "150",  value: "150ms"  },
+      { token: "200",  value: "200ms"  },
+      { token: "300",  value: "300ms"  },
+      { token: "500",  value: "500ms"  },
+      { token: "700",  value: "700ms"  },
+      { token: "1000", value: "1000ms" },
+    ];
+    const TAILWIND_DEFAULT_EASINGS = [
+      { token: "linear",      value: "linear" },
+      { token: "ease-in",     value: "cubic-bezier(0.4, 0, 1, 1)" },
+      { token: "ease-out",    value: "cubic-bezier(0, 0, 0.2, 1)" },
+      { token: "ease-in-out", value: "cubic-bezier(0.4, 0, 0.2, 1)" },
+    ];
+
+    const effectiveDurations = durationRows.length > 0 ? durationRows : TAILWIND_DEFAULT_DURATIONS;
+    const effectiveEasings   = easingRows.length   > 0 ? easingRows.slice(0, 4)   : TAILWIND_DEFAULT_EASINGS;
+    const hasCustomDurations = durationRows.length > 0;
 
-    const usedAnimations = (foundations?.tokenUsage?.animations || []).slice(0, 8);
+    // Which duration tokens are actually used in the project?
+    const usedDurationKeys = new Set(
+      (foundations?.tokenUsage?.animations || [])
+        .filter(a => a.token.startsWith("duration-"))
+        .map(a => a.token.replace("duration-", ""))
+    );
+
+    // All motion-related token chips from tokenUsage
+    const motionChips = (foundations?.tokenUsage?.animations || []).slice(0, 24);
 
     const motionContent = [
       "import type { Meta, StoryObj } from \"@storybook/react\";",
-      "import { useState } from \"react\";",
+      "import { useState, useEffect } from \"react\";",
       "",
-      "const meta = { title: \"Foundations/Motion & Interaction\" } satisfies Meta;",
+      "const meta = { title: \"Foundations/Motion & Interaction\", parameters: { layout: \"fullscreen\" } } satisfies Meta;",
       "export default meta;",
       "type Story = StoryObj;",
       "",
-      `const durationTokens: { token: string; value: string }[] = ${JSON.stringify(durationRows)};`,
-      `const easingTokens: { token: string; value: string }[] = ${JSON.stringify(easingRows)};`,
-      `const animationTokens: { token: string; value: string }[] = ${JSON.stringify(animationRows)};`,
-      `const usedAnimations: { token: string; count: number }[] = ${JSON.stringify(usedAnimations)};`,
+      `const effectiveDurations: { token: string; value: string }[] = ${JSON.stringify(effectiveDurations)};`,
+      `const effectiveEasings:   { token: string; value: string }[] = ${JSON.stringify(effectiveEasings)};`,
+      `const usedDurationKeys: Set<string> = new Set(${JSON.stringify([...usedDurationKeys])});`,
+      `const motionChips: { token: string; count: number }[] = ${JSON.stringify(motionChips)};`,
+      `const hasCustomDurations = ${hasCustomDurations};`,
       "",
+      "export const Default: Story = {",
+      "  render: () => {",
+      "    const [replayKey,  setReplayKey]  = useState(0);",
+      "    const [easingKey,  setEasingKey]  = useState(0);",
       "",
-      "function DurationDemo({ token, value }: { token: string; value: string }) {",
-      "  const [active, setActive] = useState(false);",
-      "  return (",
-      "    <div style={{ display: \"flex\", alignItems: \"center\", gap: 16 }}>",
-      "      <span style={{ width: 40, fontSize: 12, color: \"#9ca3af\", textAlign: \"right\", flexShrink: 0, fontVariantNumeric: \"tabular-nums\" }}>{token}</span>",
-      "      <code style={{ width: 68, fontSize: 12, color: \"#6b7280\", flexShrink: 0 }}>{value}</code>",
-      "      <div",
-      "        style={{ position: \"relative\", width: 220, height: 32, background: \"#f1f5f9\", borderRadius: 8, cursor: \"pointer\", overflow: \"hidden\", flexShrink: 0 }}",
-      "        onClick={() => setActive((a) => !a)}",
-      "      >",
-      "        <div style={{",
-      "          position: \"absolute\",",
-      "          top: 4, left: active ? 172 : 4,",
-      "          width: 44, height: 24,",
-      "          background: \"var(--color-primary, #6366f1)\",",
-      "          borderRadius: 6,",
-      "          transition: `left ${value} cubic-bezier(0.4,0,0.2,1)`,",
-      "        }} />",
-      "      </div>",
-      "      <span style={{ fontSize: 11, color: \"#d1d5db\" }}>click</span>",
-      "    </div>",
-      "  );",
-      "}",
+      "    // Inject @keyframes once into the document head",
+      "    useEffect(() => {",
+      "      const id = \"vds-motion-styles\";",
+      "      if (document.getElementById(id)) return;",
+      "      const el = document.createElement(\"style\");",
+      "      el.id = id;",
+      "      el.textContent = [",
+      "        \"@keyframes vdsEnter { from { opacity: 0; transform: translateY(14px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } }\",",
+      "        \"@keyframes vdsSlide { from { opacity: 0.15; transform: translateX(-56px); } to { opacity: 1; transform: translateX(0); } }\",",
+      "      ].join(\" \");",
+      "      document.head.appendChild(el);",
+      "    }, []);",
       "",
-      "export const Default: Story = {",
-      "  render: () => (",
-      "    <div style={{ fontFamily: \"system-ui,sans-serif\", padding: 32, maxWidth: 700, color: \"#111\", background: \"#fff\", minHeight: \"100vh\" }}>",
-      "      <h2 style={{ fontSize: 20, fontWeight: 700, margin: \"0 0 4px\" }}>Motion & Interaction</h2>",
-      "      <p style={{ fontSize: 13, color: \"#888\", margin: \"0 0 32px\" }}>Consistent timing and easing for smooth, intentional motion</p>",
-      "      {usedAnimations.length > 0 && (",
-      "        <div style={{ marginBottom: 28 }}>",
-      "          <p style={{ fontSize: 12, color: \"#6b7280\", margin: \"0 0 8px\", fontWeight: 500 }}>Used animations in this project</p>",
-      "          <div style={{ display: \"flex\", flexWrap: \"wrap\", gap: 6 }}>",
-      "            {usedAnimations.map(({ token, count }) => (",
-      "              <span key={token} style={{ padding: \"3px 10px\", background: \"#d1fae5\", color: \"#065f46\", borderRadius: 20, fontSize: 12, fontWeight: 500 }}>",
-      "                {token} <span style={{ opacity: 0.6 }}>×{count}</span>",
-      "              </span>",
-      "            ))}",
+      "    const replayBtn = (onClick: () => void) => (",
+      "      <button onClick={onClick} style={{ padding: \"6px 16px\", borderRadius: 8, border: \"1px solid #e5e7eb\",",
+      "        background: \"#f9fafb\", fontSize: 12, fontWeight: 600, cursor: \"pointer\", color: \"#374151\", flexShrink: 0 }}>",
+      "        ↺ Replay",
+      "      </button>",
+      "    );",
+      "",
+      "    return (",
+      "      <div style={{ padding: 40, fontFamily: \"system-ui,sans-serif\", background: \"#fff\", minHeight: \"100vh\", 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>",
+      "",
+      "        {/* ── Entering Motion ── */}",
+      "        <section style={{ marginBottom: 48 }}>",
+      "          <div style={{ display: \"flex\", justifyContent: \"space-between\", alignItems: \"flex-start\", marginBottom: 18 }}>",
+      "            <div>",
+      "              <p style={{ margin: \"0 0 2px\", fontSize: 11, fontWeight: 700, color: \"#6b7280\", textTransform: \"uppercase\", letterSpacing: \"0.08em\" }}>",
+      "                {hasCustomDurations ? \"Duration Scale\" : \"Duration Scale — Tailwind defaults\"}",
+      "              </p>",
+      "              <p style={{ margin: 0, fontSize: 12, color: \"#9ca3af\" }}>",
+      "                Each box enters with a different duration. {usedDurationKeys.size > 0 ? \"Solid fill = used in this project.\" : \"\"}",
+      "              </p>",
+      "            </div>",
+      "            {replayBtn(() => setReplayKey(k => k + 1))}",
       "          </div>",
-      "        </div>",
-      "      )}",
-      "      <h3 style={{ fontSize: 15, fontWeight: 600, margin: \"0 0 14px\", color: \"#374151\" }}>Duration</h3>",
-      "      {durationTokens.length === 0 ? (",
-      "        <p style={{ color: \"#999\", fontSize: 13, marginBottom: 32 }}>No duration tokens detected.</p>",
-      "      ) : (",
-      "        <div style={{ display: \"flex\", flexDirection: \"column\", gap: 10, marginBottom: 40 }}>",
-      "          {durationTokens.map((d) => <DurationDemo key={d.token} token={d.token} value={d.value} />)}",
-      "        </div>",
-      "      )}",
-      "      <h3 style={{ fontSize: 15, fontWeight: 600, margin: \"0 0 14px\", color: \"#374151\" }}>Easing</h3>",
-      "      {easingTokens.length === 0 ? (",
-      "        <p style={{ color: \"#999\", fontSize: 13, marginBottom: 32 }}>No easing tokens detected.</p>",
-      "      ) : (",
-      "        <div style={{ display: \"flex\", flexDirection: \"column\", gap: 6, marginBottom: 40, maxWidth: 500 }}>",
-      "          {easingTokens.map(({ token, value }) => (",
-      "            <div key={token} style={{ display: \"flex\", alignItems: \"center\", gap: 12, padding: \"8px 12px\", background: \"#f8fafc\", borderRadius: 8, border: \"1px solid #e5e7eb\" }}>",
-      "              <span style={{ width: 64, fontSize: 12, fontWeight: 600, flexShrink: 0 }}>{token}</span>",
-      "              <code style={{ fontSize: 11, color: \"#6b7280\" }}>{value}</code>",
+      "          <div style={{ display: \"flex\", gap: 12, flexWrap: \"wrap\" }}>",
+      "            {effectiveDurations.map(({ token, value }) => {",
+      "              const isActive = usedDurationKeys.has(token);",
+      "              return (",
+      "                <div key={`${token}-${replayKey}`} style={{ display: \"flex\", flexDirection: \"column\", alignItems: \"center\", gap: 8 }}>",
+      "                  <div style={{",
+      "                    width: 72, height: 72, borderRadius: 14,",
+      "                    background: isActive ? \"#4f46e5\" : \"#e0e7ff\",",
+      "                    border: isActive ? \"2px solid #4f46e5\" : \"2px solid #c7d2fe\",",
+      "                    animation: `vdsEnter ${value} cubic-bezier(0.2, 0, 0, 1) both`,",
+      "                  }} />",
+      "                  <div style={{ textAlign: \"center\" }}>",
+      "                    <div style={{ fontSize: 12, fontWeight: isActive ? 700 : 500, color: isActive ? \"#4f46e5\" : \"#374151\" }}>{value}</div>",
+      "                    <div style={{ fontSize: 10, color: \"#9ca3af\", fontFamily: \"monospace\" }}>duration-{token}</div>",
+      "                  </div>",
+      "                </div>",
+      "              );",
+      "            })}",
+      "          </div>",
+      "        </section>",
+      "",
+      "        {/* ── Easing Comparison ── */}",
+      "        <section style={{ marginBottom: 48 }}>",
+      "          <div style={{ display: \"flex\", justifyContent: \"space-between\", alignItems: \"flex-start\", marginBottom: 18 }}>",
+      "            <div>",
+      "              <p style={{ margin: \"0 0 2px\", fontSize: 11, fontWeight: 700, color: \"#6b7280\", textTransform: \"uppercase\", letterSpacing: \"0.08em\" }}>Easing</p>",
+      "              <p style={{ margin: 0, fontSize: 12, color: \"#9ca3af\" }}>Same duration (400ms), different easing curves — notice how each feels.</p>",
       "            </div>",
-      "          ))}",
-      "        </div>",
-      "      )}",
-      "      {animationTokens.length > 0 && (",
-      "        <>",
-      "          <h3 style={{ fontSize: 15, fontWeight: 600, margin: \"0 0 14px\", color: \"#374151\" }}>Animations</h3>",
-      "          <div style={{ display: \"flex\", flexDirection: \"column\", gap: 4 }}>",
-      "            {animationTokens.map(({ token, value }) => (",
-      "              <div key={token} style={{ display: \"flex\", gap: 12, padding: \"7px 0\", borderBottom: \"1px solid #f0f0f0\", alignItems: \"flex-start\" }}>",
-      "                <span style={{ width: 128, fontSize: 12, fontWeight: 600, flexShrink: 0, paddingTop: 1 }}>{token}</span>",
-      "                <code style={{ fontSize: 11, color: \"#9ca3af\", wordBreak: \"break-all\" as any }}>{value}</code>",
+      "            {replayBtn(() => setEasingKey(k => k + 1))}",
+      "          </div>",
+      "          <div style={{ display: \"flex\", flexDirection: \"column\", gap: 12 }}>",
+      "            {effectiveEasings.map(({ token, value }) => (",
+      "              <div key={`${token}-${easingKey}`} style={{ display: \"flex\", alignItems: \"center\", gap: 20 }}>",
+      "                <div style={{ width: 130, flexShrink: 0 }}>",
+      "                  <div style={{ fontSize: 13, fontWeight: 600, color: \"#374151\", marginBottom: 2 }}>{token}</div>",
+      "                  <code style={{ fontSize: 10, color: \"#9ca3af\", wordBreak: \"break-all\" as any }}>{value}</code>",
+      "                </div>",
+      "                <div style={{ flex: 1, position: \"relative\", height: 52, background: \"#f8fafc\",",
+      "                  borderRadius: 12, border: \"1px solid #e5e7eb\", overflow: \"hidden\" }}>",
+      "                  <div style={{",
+      "                    position: \"absolute\", left: 10, top: \"50%\", transform: \"translateY(-50%)\",",
+      "                    width: 40, height: 40, background: \"#4f46e5\", borderRadius: 10,",
+      "                    animation: `vdsSlide 400ms ${value} both`,",
+      "                  }} />",
+      "                </div>",
       "              </div>",
       "            ))}",
       "          </div>",
-      "        </>",
-      "      )}",
-      "    </div>",
-      "  ),",
+      "        </section>",
+      "",
+      "        {/* ── Motion Token Usage ── */}",
+      "        <section>",
+      "          <p style={{ margin: \"0 0 2px\", fontSize: 11, fontWeight: 700, color: \"#6b7280\", textTransform: \"uppercase\", letterSpacing: \"0.08em\" }}>",
+      "            Motion Tokens Used in Project",
+      "          </p>",
+      "          <p style={{ margin: \"0 0 12px\", fontSize: 12, color: \"#9ca3af\" }}>transition-*, duration-*, animate-* utilities detected in source files.</p>",
+      "          {motionChips.length === 0 ? (",
+      "            <p style={{ fontSize: 13, color: \"#9ca3af\" }}>No transition or animation utilities detected in source files.</p>",
+      "          ) : (",
+      "            <div style={{ display: \"flex\", flexWrap: \"wrap\", gap: 6 }}>",
+      "              {motionChips.map(({ token, count }) => (",
+      "                <span key={token} style={{ padding: \"4px 10px\", background: \"#f0fdf4\", color: \"#166534\",",
+      "                  border: \"1px solid #bbf7d0\", borderRadius: 20, fontSize: 12, fontFamily: \"monospace\" }}>",
+      "                  {token} <span style={{ opacity: 0.7 }}>×{count}</span>",
+      "                </span>",
+      "              ))}",
+      "            </div>",
+      "          )}",
+      "        </section>",
+      "",
+      "      </div>",
+      "    );",
+      "  },",
       "};",
     ].join("\n");
     fs.writeFileSync(path.join(foundationsDir, "Motion.stories.tsx"), motionContent, "utf-8");
@@ -3250,7 +3698,7 @@ function writeComponentSuggestionsStory(componentSuggestions) {
       "import type { Meta, StoryObj } from \"@storybook/react\";",
       "import { useState } from \"react\";",
       "",
-      "const meta = { title: \"Foundations/Component Suggestions\" } satisfies Meta;",
+      "const meta = { title: \"Foundations/Component Suggestions\", parameters: { layout: \"fullscreen\" } } satisfies Meta;",
       "export default meta;",
       "type Story = StoryObj;",
       "",
@@ -3319,6 +3767,133 @@ function writeComponentSuggestionsStory(componentSuggestions) {
   console.log("[VDS] Wrote " + path.relative(PROJECT_ROOT, path.join(foundationsDir, "ComponentSuggestions.stories.tsx")));
 }
 
+/**
+ * Generates Foundations/Component Inventory story.
+ * Shows all project components classified by Atlassian-style functional category.
+ * Every value is derived from vds-output.json — no placeholder content.
+ */
+function writeComponentInventoryStory(components, foundations) {
+  if (!Array.isArray(components) || components.length === 0) return;
+  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 }]
+
+  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;
+
+    if (!categorized[category]) categorized[category] = [];
+    categorized[category].push({
+      name:       comp.name,
+      group:      g,
+      tokenCount: tokens.filter(t => !/:/.test(t)).length,
+      propCount:  props.length,
+    });
+  }
+
+  const sortedCategories = Object.keys(categorized).sort((a, b) => {
+    const ai = CATEGORY_ORDER.indexOf(a);
+    const 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);
+  });
+
+  const inventoryData = sortedCategories.map(cat => ({
+    category: cat,
+    components: categorized[cat].sort((a, b) => a.name.localeCompare(b.name)),
+  }));
+
+  const totalComponents = components.length;
+  const uniqueTokens = [...new Set(
+    components.flatMap(c => Array.isArray(c.tokens) ? c.tokens.filter(t => !/:/.test(t)) : [])
+  )].length;
+
+  const content = [
+    `import type { Meta, StoryObj } from "@storybook/react";`,
+    ``,
+    `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 }[] }[] = ${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" }}>`,
+    `      {/* Header */}`,
+    `      <div style={{ marginBottom: 40 }}>`,
+    `        <h2 style={{ fontSize: 28, fontWeight: 700, margin: "0 0 8px" }}>Component Inventory</h2>`,
+    `        <p style={{ fontSize: 14, color: "#6b7280", margin: "0 0 20px" }}>All components detected in this project, classified by function.</p>`,
+    `        <div style={{ display: "flex", gap: 12, flexWrap: "wrap" as any }}>`,
+    `          {[`,
+    `            { 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 style={{ fontSize: 26, fontWeight: 800, color: "#111", lineHeight: 1 }}>{stat.value}</div>`,
+    `              <div style={{ fontSize: 12, color: "#6b7280", marginTop: 4 }}>{stat.label}</div>`,
+    `            </div>`,
+    `          ))}`,
+    `        </div>`,
+    `      </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" }}>`,
+    `            <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 }}>`,
+    `            {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>`,
+    `              </div>`,
+    `            ))}`,
+    `          </div>`,
+    `        </div>`,
+    `      ))}`,
+    `    </div>`,
+    `  ),`,
+    `};`,
+  ].join("\n");
+
+  fs.writeFileSync(path.join(foundationsDir, "ComponentInventory.stories.tsx"), content, "utf-8");
+  console.log("[VDS] Wrote " + path.relative(PROJECT_ROOT, path.join(foundationsDir, "ComponentInventory.stories.tsx")));
+}
+
 function writeChangelogStory(changelog) {
   const foundationsDir = path.join(STORIES_DIR, "foundations");
   ensureDir(foundationsDir);
@@ -3327,7 +3902,7 @@ function writeChangelogStory(changelog) {
     [
       "import type { Meta, StoryObj } from \"@storybook/react\";",
       "",
-      "const meta = { title: \"Foundations/Changelog\", tags: [\"autodocs\"] } satisfies Meta;",
+      "const meta = { title: \"Foundations/Changelog\", tags: [\"autodocs\"], parameters: { layout: \"fullscreen\" } } satisfies Meta;",
       "export default meta;",
       "type Story = StoryObj;",
       "",
@@ -3591,6 +4166,7 @@ function main() {
   if (componentSuggestions?.length) {
     writeComponentSuggestionsStory(componentSuggestions);
   }
+  writeComponentInventoryStory(components, foundations);
   writeChangelogStory(data.changelog);
   try {
     const fd = path.join(STORIES_DIR, "foundations");