@decantr/cli 1.5.0 → 1.5.2

package/dist/{chunk-6K6ZPDT4.js → chunk-6RJSFLT4.js}

@@ -298,11 +298,11 @@ function generateTokensCSS(themeData, mode) {
       "--d-radius-lg": "0.75rem",
       "--d-radius-xl": "1rem",
       "--d-radius-full": "9999px",
-      // Shadows
-      "--d-shadow-sm": "0 1px 2px rgba(0,0,0,0.05)",
-      "--d-shadow": "0 1px 3px rgba(0,0,0,0.1)",
-      "--d-shadow-md": "0 4px 6px rgba(0,0,0,0.1)",
-      "--d-shadow-lg": "0 10px 15px rgba(0,0,0,0.1)",
+      // Shadows — dark mode needs higher opacity to be visible on dark backgrounds
+      "--d-shadow-sm": tokenMode === "light" ? "0 1px 2px rgba(0,0,0,0.05)" : "0 1px 2px rgba(0,0,0,0.2)",
+      "--d-shadow": tokenMode === "light" ? "0 1px 3px rgba(0,0,0,0.1)" : "0 1px 3px rgba(0,0,0,0.25)",
+      "--d-shadow-md": tokenMode === "light" ? "0 4px 6px rgba(0,0,0,0.1)" : "0 4px 6px rgba(0,0,0,0.3)",
+      "--d-shadow-lg": tokenMode === "light" ? "0 10px 15px rgba(0,0,0,0.1)" : "0 10px 15px rgba(0,0,0,0.4)",
       // Status colors
       "--d-success": themeData.tokens?.base?.success || "#22c55e",
       "--d-error": themeData.tokens?.base?.danger || "#ef4444",
@@ -319,7 +319,19 @@ ${lines}
 `;
   if (mode === "auto") {
     const lightTokens = buildTokens("light");
-    const paletteKeys = ["--d-bg", "--d-surface", "--d-surface-raised", "--d-border", "--d-text", "--d-text-muted", "--d-primary-hover"];
+    const paletteKeys = [
+      "--d-bg",
+      "--d-surface",
+      "--d-surface-raised",
+      "--d-border",
+      "--d-text",
+      "--d-text-muted",
+      "--d-primary-hover",
+      "--d-shadow-sm",
+      "--d-shadow",
+      "--d-shadow-md",
+      "--d-shadow-lg"
+    ];
     const lightLines = Object.entries(lightTokens).filter(([key]) => paletteKeys.includes(key)).map(([key, value]) => `    ${key}: ${value};`).join("\n");
     css += `
 @media (prefers-color-scheme: light) {
@@ -357,6 +369,65 @@ function generateDecoratorsCSS(recipeData, themeName) {
 `);
   return css.join("\n");
 }
+function generateGlobalCSS(personality) {
+  const personalityText = personality.join(" ").toLowerCase();
+  let fontBody = "system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif";
+  if (personalityText.includes("inter")) {
+    fontBody = `'Inter', ${fontBody}`;
+  } else if (personalityText.includes("geist")) {
+    fontBody = `'Geist', ${fontBody}`;
+  }
+  return `/* Generated by @decantr/cli \u2014 global reset + body styles */
+
+*, *::before, *::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  color-scheme: dark;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+}
+
+body {
+  font-family: ${fontBody};
+  background: var(--d-bg);
+  color: var(--d-text);
+  line-height: 1.6;
+  min-height: 100dvh;
+}
+
+img, picture, video, canvas, svg {
+  display: block;
+  max-width: 100%;
+}
+
+input, button, textarea, select {
+  font: inherit;
+  color: inherit;
+}
+
+:focus-visible {
+  outline: 2px solid var(--d-primary);
+  outline-offset: 2px;
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+`;
+}
 function generateDecoratorsContext(recipeData, recipeName) {
   const lines = [];
   lines.push(`# Recipe Decorators: ${recipeName}`);
@@ -390,6 +461,12 @@ function generateDecoratorsContext(recipeData, recipeName) {
 function generateDecoratorRule(name, description) {
   const rules = [];
   const descLower = description.toLowerCase();
+  const nameLower = name.toLowerCase();
+  const isCard = descLower.includes("card") || descLower.includes("panel") || nameLower.includes("card") || nameLower.includes("panel");
+  const isInput = descLower.includes("input") || descLower.includes("field") || descLower.includes("textarea") || nameLower.includes("input") || nameLower.includes("textarea");
+  const isGlass = descLower.includes("glassmorphic") || descLower.includes("glass") || nameLower.includes("glass");
+  const isInteractive = isCard || isInput || isGlass;
+  const isNonInteractive = descLower.includes("divider") || descLower.includes("skeleton") || descLower.includes("keyframe") || descLower.includes("canvas") || nameLower.includes("divider") || nameLower.includes("skeleton") || nameLower.includes("canvas");
   if (descLower.includes("monospace") || descLower.includes("mono font")) {
     rules.push("font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace");
   }
@@ -402,6 +479,16 @@ function generateDecoratorRule(name, description) {
   } else if (descLower.includes("primary-tinted") || descLower.includes("primary background")) {
     rules.push("background: color-mix(in srgb, var(--d-primary) 15%, var(--d-surface))");
   }
+  if (isInput) {
+    if (!rules.some((r) => r.startsWith("background"))) {
+      rules.push("background: var(--d-surface)");
+    }
+    rules.push("color: var(--d-text)");
+    rules.push("padding: 0.5rem 0.75rem");
+    rules.push("border-radius: var(--d-radius)");
+    rules.push("width: 100%");
+    rules.push("outline: none");
+  }
   const leftBorderMatch = descLower.match(/(\d+)px\s+left\s+border/);
   if (leftBorderMatch) {
     rules.push(`border-left: ${leftBorderMatch[1]}px solid var(--d-primary)`);
@@ -415,23 +502,40 @@ function generateDecoratorRule(name, description) {
   const radiusMatch = descLower.match(/(\d+)px radius/);
   if (radiusMatch) {
     rules.push(`border-radius: ${radiusMatch[1]}px`);
-  } else if (descLower.includes("radius") || descLower.includes("rounded")) {
+  } else if ((descLower.includes("radius") || descLower.includes("rounded")) && !isInput) {
     rules.push("border-radius: var(--d-radius)");
   }
-  if (descLower.includes("hover shadow") || descLower.includes("shadow transition")) {
-    rules.push("transition: box-shadow 0.15s ease");
-  }
   if (descLower.includes("elevation") || descLower.includes("shadow")) {
     rules.push("box-shadow: var(--d-shadow)");
   }
+  if (isInteractive && !isNonInteractive) {
+    rules.push("transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease");
+  }
   if (descLower.includes("entrance animation") || descLower.includes("fade")) {
     rules.push("animation: decantr-fade-in 0.2s ease-out");
   }
   if (descLower.includes("pulse animation") || descLower.includes("skeleton")) {
     rules.push("animation: decantr-pulse 1.5s ease-in-out infinite");
   }
-  if (descLower.includes("blur") || descLower.includes("glass")) {
+  const blurMatch = descLower.match(/blur\((\d+)px\)/);
+  if (blurMatch) {
+    rules.push(`backdrop-filter: blur(${blurMatch[1]}px)`);
+    rules.push(`-webkit-backdrop-filter: blur(${blurMatch[1]}px)`);
+  } else if (isGlass) {
+    rules.push("backdrop-filter: blur(12px)");
+    rules.push("-webkit-backdrop-filter: blur(12px)");
+  } else if (descLower.includes("blur")) {
     rules.push("backdrop-filter: blur(8px)");
+    rules.push("-webkit-backdrop-filter: blur(8px)");
+  }
+  if (descLower.includes("semi-transparent") || descLower.includes("glassmorphic")) {
+    const bgIdx = rules.findIndex((r) => r.startsWith("background:"));
+    const rgbaBg = "background: rgba(31, 31, 35, 0.8)";
+    if (bgIdx !== -1) {
+      rules[bgIdx] = rgbaBg;
+    } else {
+      rules.push(rgbaBg);
+    }
   }
   if (descLower.includes("right-aligned")) {
     rules.push("margin-left: auto");
@@ -455,9 +559,33 @@ function generateDecoratorRule(name, description) {
   if (rules.length === 0) {
     return `/* .${name}: ${description} */`;
   }
-  return `.${name} {
+  let css = `.${name} {
   ${rules.join(";\n  ")};
 }`;
+  if (isInteractive && !isNonInteractive) {
+    const stateRules = [];
+    if (isCard || isGlass) {
+      stateRules.push(`.${name}:hover {
+  border-color: var(--d-primary-hover, var(--d-border));
+  box-shadow: var(--d-shadow-md);
+}`);
+    }
+    if (isInput) {
+      stateRules.push(`.${name}:focus {
+  border-color: var(--d-primary);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--d-primary) 25%, transparent);
+}`);
+      stateRules.push(`.${name}::placeholder {
+  color: var(--d-text-muted);
+}`);
+      stateRules.push(`.${name}:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}`);
+    }
+    css += "\n\n" + stateRules.join("\n\n");
+  }
+  return css;
 }
 function serializeLayoutItem(item) {
   if (typeof item === "string") {
@@ -1006,33 +1134,29 @@ function generateTaskContext(templateName, essence) {
   };
   return renderTemplate(template, vars);
 }
-function generateEssenceSummary(essence) {
-  const template = loadTemplate("essence-summary.md.template");
-  const pagesTable = `| Page | Shell | Layout |
-|------|-------|--------|
-${essence.structure.map((p) => `| ${p.id} | ${p.shell} | ${p.layout.map(serializeLayoutItem).join(", ") || "none"} |`).join("\n")}`;
-  const featuresList = essence.features.length > 0 ? essence.features.map((f) => `- ${f}`).join("\n") : "- No features specified";
-  const dnaEnforcement = essence.guard.enforce_style ? "error" : "off";
-  const blueprintEnforcement = essence.guard.enforce_recipe ? "warn" : "off";
+function generateTaskContextV3(templateName, essence) {
+  const template = loadTemplate(templateName);
+  const pages = essence.blueprint.sections && essence.blueprint.sections.length > 0 ? essence.blueprint.sections.flatMap((s) => s.pages) : essence.blueprint.pages || [];
+  const defaultShell = essence.blueprint.sections?.[0]?.shell || essence.blueprint.shell || "sidebar-main";
+  const layout = pages[0]?.layout?.map(serializeLayoutItem).join(", ") || "none";
+  const scaffoldStructure = pages.map((p) => {
+    const patterns = p.layout.length > 0 ? `
+  - Patterns: ${p.layout.map(serializeLayoutItem).join(", ")}` : "";
+    return `- **${p.id}** (${defaultShell})${patterns}`;
+  }).join("\n");
+  const densityLevel = essence.dna.spacing?.density || "comfortable";
+  const contentGap = essence.dna.spacing?.content_gap || "_gap4";
   const vars = {
-    ARCHETYPE: essence.archetype || "custom",
-    BLUEPRINT: essence.blueprint || "none",
-    PERSONALITY: essence.personality.join(", "),
-    TARGET: essence.target,
-    THEME_STYLE: essence.theme.style,
-    THEME_MODE: essence.theme.mode,
-    THEME_RECIPE: essence.theme.recipe,
-    SHAPE: essence.theme.shape,
-    PAGES_TABLE: pagesTable,
-    FEATURES_LIST: featuresList,
-    GUARD_MODE: essence.guard.mode,
-    ENFORCE_STYLE: String(essence.guard.enforce_style),
-    ENFORCE_RECIPE: String(essence.guard.enforce_recipe),
-    DNA_ENFORCEMENT: dnaEnforcement,
-    BLUEPRINT_ENFORCEMENT: blueprintEnforcement,
-    DENSITY: essence.density.level,
-    CONTENT_GAP: essence.density.content_gap,
-    LAST_UPDATED: (/* @__PURE__ */ new Date()).toISOString()
+    TARGET: essence.meta.target || "react",
+    THEME_STYLE: essence.dna.theme.style,
+    THEME_MODE: essence.dna.theme.mode,
+    THEME_RECIPE: essence.dna.theme.recipe || essence.dna.theme.style,
+    DEFAULT_SHELL: defaultShell,
+    GUARD_MODE: essence.meta.guard.mode,
+    LAYOUT: layout,
+    DENSITY: densityLevel,
+    CONTENT_GAP: contentGap,
+    SCAFFOLD_STRUCTURE: scaffoldStructure
   };
   return renderTemplate(template, vars);
 }
@@ -1116,15 +1240,6 @@ async function scaffoldProject(projectRoot, options, detected, registry, archety
   const scaffoldPath = join(contextDir, "task-scaffold.md");
   writeFileSync(scaffoldPath, generateTaskContext("task-scaffold.md.template", essence));
   contextFiles.push(scaffoldPath);
-  const addPagePath = join(contextDir, "task-add-page.md");
-  writeFileSync(addPagePath, generateTaskContext("task-add-page.md.template", essence));
-  contextFiles.push(addPagePath);
-  const modifyPath = join(contextDir, "task-modify.md");
-  writeFileSync(modifyPath, generateTaskContext("task-modify.md.template", essence));
-  contextFiles.push(modifyPath);
-  const summaryPath = join(contextDir, "essence-summary.md");
-  writeFileSync(summaryPath, generateEssenceSummary(essence));
-  contextFiles.push(summaryPath);
   if (composedSections) {
     essenceV3.version = "3.1.0";
     essenceV3.blueprint = {
@@ -1133,7 +1248,7 @@ async function scaffoldProject(projectRoot, options, detected, registry, archety
       routes: routeMap || {}
     };
     if (blueprintData?.personality?.length) {
-      essenceV3.dna.personality = blueprintData.personality;
+      essenceV3.dna.personality = typeof blueprintData.personality === "string" ? [blueprintData.personality] : blueprintData.personality;
     }
     if (blueprintData?.design_constraints) {
       essenceV3.dna.constraints = blueprintData.design_constraints;
@@ -1146,7 +1261,7 @@ async function scaffoldProject(projectRoot, options, detected, registry, archety
     }
     writeFileSync(essencePath, JSON.stringify(essenceV3, null, 2) + "\n");
   }
-  const refreshResult = await refreshDerivedFiles(projectRoot, essenceV3, registry, themeData, recipeData);
+  const refreshResult = await refreshDerivedFiles(projectRoot, essenceV3, registry, themeData, recipeData, { isInitialScaffold: true });
   contextFiles.push(...refreshResult.contextFiles);
   const gitignoreUpdated = updateGitignore(projectRoot);
   return {
@@ -1348,7 +1463,7 @@ When available, use these tools:
     gitignoreUpdated
   };
 }
-async function refreshDerivedFiles(projectRoot, essence, registry, prefetchedThemeData, prefetchedRecipeData) {
+async function refreshDerivedFiles(projectRoot, essence, registry, prefetchedThemeData, prefetchedRecipeData, options) {
   const decantrDir = join(projectRoot, ".decantr");
   const contextDir = join(decantrDir, "context");
   mkdirSync(contextDir, { recursive: true });
@@ -1452,14 +1567,30 @@ async function refreshDerivedFiles(projectRoot, essence, registry, prefetchedThe
   if (hasRealRecipeData || !existsSync(decoratorsPath)) {
     writeFileSync(decoratorsPath, generateDecoratorsCSS(recipeData, themeName));
   }
-  const cssFiles = [tokensPath, decoratorsPath];
+  const globalPath = join(stylesDir, "global.css");
+  if (!existsSync(globalPath)) {
+    writeFileSync(globalPath, generateGlobalCSS(personality));
+  }
+  const cssFiles = [tokensPath, decoratorsPath, globalPath];
   const decoratorsMdPath = join(contextDir, "decorators.md");
   writeFileSync(decoratorsMdPath, generateDecoratorsContext(recipeData, recipeName));
   const decantrMdPath = join(projectRoot, "DECANTR.md");
   writeFileSync(decantrMdPath, generateDecantrMdV31(guardMode, CSS_APPROACH_CONTENT));
-  const summaryPath = join(contextDir, "essence-summary.md");
-  writeFileSync(summaryPath, generateEssenceSummaryV3(essence));
-  const contextFiles = [decoratorsMdPath, summaryPath];
+  const hasSections = essence.blueprint.sections && essence.blueprint.sections.length > 0;
+  const contextFiles = [decoratorsMdPath];
+  if (!hasSections) {
+    const summaryPath = join(contextDir, "essence-summary.md");
+    writeFileSync(summaryPath, generateEssenceSummaryV3(essence));
+    contextFiles.push(summaryPath);
+  }
+  if (!options?.isInitialScaffold) {
+    const addPagePath = join(contextDir, "task-add-page.md");
+    writeFileSync(addPagePath, generateTaskContextV3("task-add-page.md.template", essence));
+    contextFiles.push(addPagePath);
+    const modifyPath = join(contextDir, "task-modify.md");
+    writeFileSync(modifyPath, generateTaskContextV3("task-modify.md.template", essence));
+    contextFiles.push(modifyPath);
+  }
   const blueprint = essence.blueprint;
   const sections = blueprint.sections && blueprint.sections.length > 0 ? blueprint.sections : [];
   if (sections.length > 0) {
@@ -1492,21 +1623,28 @@ async function refreshDerivedFiles(projectRoot, essence, registry, prefetchedThe
                       slots = synthetic;
                     }
                   }
-                  patternSpecs[name] = {
+                  const spec = {
                     description: inner.description || "",
                     components: inner.components || [],
                     slots
                   };
+                  if (!spec.components || spec.components.length === 0) {
+                    const syntheticComps = generateSyntheticComponents(name, spec.description);
+                    if (syntheticComps.length > 0) spec.components = syntheticComps;
+                  }
+                  patternSpecs[name] = spec;
                 } else {
                   const synthetic = generateSyntheticSlots(name, "");
-                  if (Object.keys(synthetic).length > 0) {
-                    patternSpecs[name] = { description: "", components: [], slots: synthetic };
+                  const syntheticComps = generateSyntheticComponents(name, "");
+                  if (Object.keys(synthetic).length > 0 || syntheticComps.length > 0) {
+                    patternSpecs[name] = { description: "", components: syntheticComps, slots: synthetic };
                   }
                 }
               } catch {
                 const synthetic = generateSyntheticSlots(name, "");
-                if (Object.keys(synthetic).length > 0) {
-                  patternSpecs[name] = { description: "", components: [], slots: synthetic };
+                const syntheticComps = generateSyntheticComponents(name, "");
+                if (Object.keys(synthetic).length > 0 || syntheticComps.length > 0) {
+                  patternSpecs[name] = { description: "", components: syntheticComps, slots: synthetic };
                 }
               }
             }
@@ -1666,21 +1804,28 @@ async function refreshDerivedFiles(projectRoot, essence, registry, prefetchedThe
                     slots = synthetic;
                   }
                 }
-                patternSpecs[name] = {
+                const spec = {
                   description: inner.description || "",
                   components: inner.components || [],
                   slots
                 };
+                if (!spec.components || spec.components.length === 0) {
+                  const syntheticComps = generateSyntheticComponents(name, spec.description);
+                  if (syntheticComps.length > 0) spec.components = syntheticComps;
+                }
+                patternSpecs[name] = spec;
               } else {
                 const synthetic = generateSyntheticSlots(name, "");
-                if (Object.keys(synthetic).length > 0) {
-                  patternSpecs[name] = { description: "", components: [], slots: synthetic };
+                const syntheticComps = generateSyntheticComponents(name, "");
+                if (Object.keys(synthetic).length > 0 || syntheticComps.length > 0) {
+                  patternSpecs[name] = { description: "", components: syntheticComps, slots: synthetic };
                 }
               }
             } catch {
               const synthetic = generateSyntheticSlots(name, "");
-              if (Object.keys(synthetic).length > 0) {
-                patternSpecs[name] = { description: "", components: [], slots: synthetic };
+              const syntheticComps = generateSyntheticComponents(name, "");
+              if (Object.keys(synthetic).length > 0 || syntheticComps.length > 0) {
+                patternSpecs[name] = { description: "", components: syntheticComps, slots: synthetic };
               }
             }
           }
@@ -1810,6 +1955,27 @@ function generateSyntheticSlots(patternId, description) {
   }
   return syntheticSlots;
 }
+function generateSyntheticComponents(patternId, description) {
+  const desc = description.toLowerCase();
+  const syntheticComponents = [];
+  if (patternId.includes("hero")) syntheticComponents.push("Button", "Icon", "Image");
+  if (patternId.includes("feature")) syntheticComponents.push("Card", "Icon", "Text");
+  if (patternId.includes("pricing")) syntheticComponents.push("Card", "Button", "Badge");
+  if (patternId.includes("testimonial")) syntheticComponents.push("Card", "Avatar", "Text");
+  if (patternId.includes("cta")) syntheticComponents.push("Button", "Text");
+  if (patternId.includes("form") || patternId.includes("contact")) syntheticComponents.push("Input", "Textarea", "Button", "Label");
+  if (patternId.includes("team")) syntheticComponents.push("Card", "Avatar", "Text");
+  if (patternId.includes("settings") || patternId.includes("security")) syntheticComponents.push("Card", "Toggle", "Input", "Button");
+  if (patternId.includes("message") || patternId.includes("chat")) syntheticComponents.push("Avatar", "Text", "CodeBlock");
+  if (patternId.includes("input") && desc.includes("chat")) syntheticComponents.push("Textarea", "Button", "Icon");
+  if (patternId.includes("header") && desc.includes("chat")) syntheticComponents.push("Button", "Icon", "Text");
+  if (patternId.includes("content") || patternId.includes("legal")) syntheticComponents.push("Heading", "Text", "List");
+  if (patternId.includes("how-it-works") || patternId.includes("steps")) syntheticComponents.push("Card", "Icon", "Text", "Badge");
+  if (patternId.includes("values")) syntheticComponents.push("Card", "Icon", "Text");
+  if (patternId.includes("story") || patternId.includes("about")) syntheticComponents.push("Text", "Image");
+  if (patternId.includes("empty") || patternId.includes("new")) syntheticComponents.push("Icon", "Text", "Button");
+  return [...new Set(syntheticComponents)];
+}
 function generateSectionContext(input) {
   const { section, decorators, guardConfig, personality, themeName, recipeName, zoneContext, patternSpecs, recipeHints, constraints, shellInfo } = input;
   const lines = [];
@@ -1837,8 +2003,9 @@ function generateSectionContext(input) {
   lines.push(`**Theme tokens:** see \`src/styles/tokens.css\` \u2014 use \`var(--d-primary)\`, \`var(--d-bg)\`, etc.`);
   lines.push("");
   if (decorators.length > 0) {
-    const names = decorators.map((d) => d.name).join(", ");
-    lines.push(`**Decorators:** see \`src/styles/decorators.css\` \u2014 available classes: ${names}`);
+    const names = decorators.map((d) => `\`${d.name}\``).join(", ");
+    lines.push(`**Decorators:** ${names} (see \`src/styles/decorators.css\`)`);
+    lines.push("Usage: `className={css('_flex _col') + ' carbon-card'}` \u2014 atoms via css(), decorators as plain class strings.");
   } else {
     lines.push("**Decorators:** none defined.");
   }
@@ -1871,11 +2038,7 @@ function generateSectionContext(input) {
     lines.push("");
   }
   if (personality.length > 0) {
-    lines.push("## Personality");
-    lines.push("");
-    lines.push(personality.join(", "));
-    lines.push("");
-    lines.push("---");
+    lines.push("**Personality:** See scaffold.md for personality and visual direction.");
     lines.push("");
   }
   if (constraints && Object.keys(constraints).length > 0) {
@@ -1888,6 +2051,34 @@ function generateSectionContext(input) {
     lines.push("---");
     lines.push("");
   }
+  const uniquePatterns = /* @__PURE__ */ new Map();
+  for (const page of section.pages) {
+    const patternNames = page.layout.flatMap(extractPatternNames);
+    for (const name of patternNames) {
+      if (patternSpecs[name] && !uniquePatterns.has(name)) {
+        uniquePatterns.set(name, patternSpecs[name]);
+      }
+    }
+  }
+  if (uniquePatterns.size > 0) {
+    lines.push("## Pattern Reference");
+    lines.push("");
+    for (const [patternName, spec] of uniquePatterns) {
+      lines.push(`### ${patternName}`);
+      lines.push("");
+      lines.push(spec.description);
+      lines.push("");
+      lines.push(`**Components:** ${spec.components.join(", ")}`);
+      lines.push("");
+      lines.push("**Layout slots:**");
+      for (const [slot, desc] of Object.entries(spec.slots)) {
+        lines.push(`- \`${slot}\`: ${desc}`);
+      }
+      lines.push("");
+    }
+    lines.push("---");
+    lines.push("");
+  }
   lines.push("## Pages");
   lines.push("");
   for (const page of section.pages) {
@@ -1908,22 +2099,6 @@ function generateSectionContext(input) {
       }
       lines.push("");
     }
-    const patternNames = page.layout.flatMap(extractPatternNames);
-    for (const patternName of patternNames) {
-      const spec = patternSpecs[patternName];
-      if (!spec) continue;
-      lines.push(`#### Pattern: ${patternName}`);
-      lines.push("");
-      lines.push(spec.description);
-      lines.push("");
-      lines.push(`**Components:** ${spec.components.join(", ")}`);
-      lines.push("");
-      lines.push("**Layout slots:**");
-      for (const [slot, desc] of Object.entries(spec.slots)) {
-        lines.push(`- \`${slot}\`: ${desc}`);
-      }
-      lines.push("");
-    }
   }
   return lines.join("\n");
 }