@decantr/cli 1.5.2 → 1.5.4

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

@@ -2,6 +2,214 @@
 import { existsSync, mkdirSync, readFileSync, writeFileSync, appendFileSync } from "fs";
 import { join, dirname } from "path";
 import { fileURLToPath } from "url";
+import { computeSpatialTokens } from "@decantr/essence-spec";
+
+// src/treatments.ts
+function generateTreatmentCSS(spatialTokens, treatmentOverrides, themeDecorators, themeName) {
+  const lines = [];
+  lines.push("/* Generated by @decantr/cli \u2014 Visual Treatment System */");
+  lines.push("");
+  lines.push("/* \u2500\u2500 Layer 1: Base Treatments \u2500\u2500 */");
+  lines.push("");
+  function emitRule(selector, props) {
+    const treatmentName = selector.replace(/^\./, "").replace(/[:[\s].+$/, "");
+    const overrides = treatmentOverrides?.[treatmentName];
+    const merged = /* @__PURE__ */ new Map();
+    for (const [prop, val] of props) {
+      merged.set(prop, val);
+    }
+    if (overrides && selector === `.${treatmentName}`) {
+      for (const [prop, val] of Object.entries(overrides)) {
+        merged.set(prop, val);
+      }
+    }
+    const body = Array.from(merged.entries()).map(([p, v]) => `  ${p}: ${v};`).join("\n");
+    lines.push(`${selector} {`);
+    lines.push(body);
+    lines.push("}");
+    lines.push("");
+  }
+  emitRule(".d-interactive", [
+    ["display", "inline-flex"],
+    ["align-items", "center"],
+    ["gap", "0.5em"],
+    ["padding", "var(--d-interactive-py) var(--d-interactive-px)"],
+    ["border", "1px solid var(--d-border)"],
+    ["border-radius", "var(--d-radius)"],
+    ["background", "transparent"],
+    ["color", "var(--d-text)"],
+    ["font", "inherit"],
+    ["cursor", "pointer"],
+    ["text-decoration", "none"],
+    ["transition", "background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease"]
+  ]);
+  emitRule(".d-interactive:hover", [
+    ["border-color", "var(--d-primary-hover)"],
+    ["background", "var(--d-surface)"]
+  ]);
+  emitRule(".d-interactive:focus-visible", [
+    ["outline", "2px solid var(--d-primary)"],
+    ["outline-offset", "2px"]
+  ]);
+  emitRule(".d-interactive:disabled", [
+    ["opacity", "0.5"],
+    ["cursor", "not-allowed"],
+    ["pointer-events", "none"]
+  ]);
+  emitRule('.d-interactive[data-variant="primary"]', [
+    ["background", "var(--d-primary)"],
+    ["color", "#fff"],
+    ["border-color", "var(--d-primary)"]
+  ]);
+  emitRule('.d-interactive[data-variant="primary"]:hover', [
+    ["background", "var(--d-primary-hover)"],
+    ["border-color", "var(--d-primary-hover)"]
+  ]);
+  emitRule('.d-interactive[data-variant="ghost"]', [
+    ["border-color", "transparent"],
+    ["background", "transparent"]
+  ]);
+  emitRule('.d-interactive[data-variant="ghost"]:hover', [
+    ["background", "var(--d-surface)"]
+  ]);
+  emitRule('.d-interactive[data-variant="danger"]', [
+    ["background", "var(--d-error)"],
+    ["color", "#fff"],
+    ["border-color", "var(--d-error)"]
+  ]);
+  emitRule(".d-surface", [
+    ["background", "var(--d-surface)"],
+    ["border", "1px solid var(--d-border)"],
+    ["border-radius", "var(--d-radius)"],
+    ["box-shadow", "var(--d-shadow)"],
+    ["padding", "var(--d-surface-p)"]
+  ]);
+  emitRule('.d-surface[data-elevation="raised"]', [
+    ["background", "var(--d-surface-raised)"],
+    ["box-shadow", "var(--d-shadow-md)"]
+  ]);
+  emitRule('.d-surface[data-elevation="overlay"]', [
+    ["background", "var(--d-surface-raised)"],
+    ["box-shadow", "var(--d-shadow-lg)"],
+    ["z-index", "50"]
+  ]);
+  emitRule(".d-surface[data-interactive]:hover", [
+    ["border-color", "var(--d-primary-hover, var(--d-border))"],
+    ["box-shadow", "var(--d-shadow-md)"],
+    ["transition", "border-color 0.15s ease, box-shadow 0.15s ease"]
+  ]);
+  emitRule(".d-data", [
+    ["width", "100%"],
+    ["border-collapse", "collapse"],
+    ["text-align", "left"],
+    ["font-size", "0.875rem"]
+  ]);
+  emitRule(".d-data-header", [
+    ["padding", "var(--d-data-py) var(--d-content-gap)"],
+    ["font-weight", "500"],
+    ["color", "var(--d-text-muted)"],
+    ["border-bottom", "1px solid var(--d-border)"],
+    ["font-size", "0.75rem"],
+    ["text-transform", "uppercase"],
+    ["letter-spacing", "0.05em"]
+  ]);
+  emitRule(".d-data-row", [
+    ["border-bottom", "1px solid var(--d-border)"],
+    ["transition", "background 0.1s ease"]
+  ]);
+  emitRule(".d-data-row:hover", [
+    ["background", "var(--d-surface)"]
+  ]);
+  emitRule(".d-data-cell", [
+    ["padding", "var(--d-data-py) var(--d-content-gap)"],
+    ["vertical-align", "middle"]
+  ]);
+  emitRule(".d-control", [
+    ["background", "var(--d-surface)"],
+    ["color", "var(--d-text)"],
+    ["padding", "var(--d-control-py) 0.75rem"],
+    ["border-radius", "var(--d-radius)"],
+    ["border", "1px solid var(--d-border)"],
+    ["width", "100%"],
+    ["outline", "none"],
+    ["font", "inherit"],
+    ["transition", "border-color 0.15s ease, box-shadow 0.15s ease"]
+  ]);
+  emitRule(".d-control:focus", [
+    ["border-color", "var(--d-primary)"],
+    ["box-shadow", "0 0 0 3px color-mix(in srgb, var(--d-primary) 25%, transparent)"]
+  ]);
+  emitRule(".d-control::placeholder", [
+    ["color", "var(--d-text-muted)"]
+  ]);
+  emitRule(".d-control:disabled", [
+    ["opacity", "0.5"],
+    ["cursor", "not-allowed"]
+  ]);
+  emitRule(".d-control[aria-invalid]", [
+    ["border-color", "var(--d-error)"],
+    ["box-shadow", "0 0 0 3px color-mix(in srgb, var(--d-error) 15%, transparent)"]
+  ]);
+  emitRule(".d-section", [
+    ["padding", "var(--d-section-py) 0"]
+  ]);
+  lines.push(".d-section + .d-section {");
+  lines.push("  border-top: 1px solid var(--d-border);");
+  lines.push("}");
+  lines.push("");
+  emitRule(".d-annotation", [
+    ["display", "inline-flex"],
+    ["align-items", "center"],
+    ["gap", "0.25em"],
+    ["font-size", "0.75rem"],
+    ["font-weight", "500"],
+    ["padding", "0.125rem 0.5rem"],
+    ["border-radius", "var(--d-radius-full)"],
+    ["background", "var(--d-surface)"],
+    ["color", "var(--d-text-muted)"],
+    ["white-space", "nowrap"]
+  ]);
+  emitRule('.d-annotation[data-status="success"]', [
+    ["background", "color-mix(in srgb, var(--d-success) 15%, transparent)"],
+    ["color", "var(--d-success)"]
+  ]);
+  emitRule('.d-annotation[data-status="error"]', [
+    ["background", "color-mix(in srgb, var(--d-error) 15%, transparent)"],
+    ["color", "var(--d-error)"]
+  ]);
+  emitRule('.d-annotation[data-status="warning"]', [
+    ["background", "color-mix(in srgb, var(--d-warning) 15%, transparent)"],
+    ["color", "var(--d-warning)"]
+  ]);
+  emitRule('.d-annotation[data-status="info"]', [
+    ["background", "color-mix(in srgb, var(--d-info) 15%, transparent)"],
+    ["color", "var(--d-info)"]
+  ]);
+  if (themeDecorators && Object.keys(themeDecorators).length > 0) {
+    const label = themeName ? ` (${themeName})` : "";
+    lines.push(`/* \u2500\u2500 Layer 3: Theme Decorators${label} \u2500\u2500 */`);
+    lines.push("");
+    for (const [name, description] of Object.entries(themeDecorators)) {
+      const rule = generateDecoratorRule(name, description);
+      lines.push(rule);
+      lines.push("");
+    }
+  }
+  lines.push("/* \u2500\u2500 Keyframes \u2500\u2500 */");
+  lines.push("");
+  lines.push("@keyframes decantr-fade-in {");
+  lines.push("  from { opacity: 0; transform: translateY(4px); }");
+  lines.push("  to { opacity: 1; transform: translateY(0); }");
+  lines.push("}");
+  lines.push("");
+  lines.push("@keyframes decantr-pulse {");
+  lines.push("  0%, 100% { opacity: 1; }");
+  lines.push("  50% { opacity: 0.5; }");
+  lines.push("}");
+  return lines.join("\n");
+}
+
+// src/scaffold.ts
 var __dirname = dirname(fileURLToPath(import.meta.url));
 function composeArchetypes(composeEntries, archetypeResults) {
   if (composeEntries.length === 0) {
@@ -251,8 +459,9 @@ function generateTopologySection(data, personality) {
   return lines.join("\n");
 }
 var CLI_VERSION = "1.0.0";
-function generateTokensCSS(themeData, mode) {
+function generateTokensCSS(themeData, mode, spatialTokens) {
   if (!themeData) {
+    const spatialLines2 = spatialTokens ? "\n" + Object.entries(spatialTokens).map(([k, v]) => `  ${k}: ${v};`).join("\n") : "";
     return `/* No theme data available */
 :root {
   --d-primary: #6366f1;
@@ -263,7 +472,7 @@ function generateTokensCSS(themeData, mode) {
   --d-surface-raised: #27272a;
   --d-border: #3f3f46;
   --d-text: #fafafa;
-  --d-text-muted: #a1a1aa;
+  --d-text-muted: #a1a1aa;${spatialLines2}
 }
 `;
   }
@@ -311,10 +520,26 @@ function generateTokensCSS(themeData, mode) {
     };
   }
   const tokens = buildTokens(resolvedMode);
+  if (themeData?.typography?.mono) {
+    tokens["--d-font-mono"] = themeData.typography.mono;
+  }
+  if (themeData?.palette?.["accent-glow"]?.[resolvedMode]) {
+    tokens["--d-accent-glow"] = themeData.palette["accent-glow"][resolvedMode];
+  }
+  if (themeData?.motion?.durations?.hover) {
+    tokens["--d-duration-hover"] = themeData.motion.durations.hover;
+  }
+  if (themeData?.motion?.durations?.entrance) {
+    tokens["--d-duration-entrance"] = themeData.motion.durations.entrance;
+  }
+  if (themeData?.motion?.timing) {
+    tokens["--d-easing"] = themeData.motion.timing;
+  }
   const lines = Object.entries(tokens).map(([key, value]) => `  ${key}: ${value};`).join("\n");
+  const spatialLines = spatialTokens ? "\n" + Object.entries(spatialTokens).map(([k, v]) => `  ${k}: ${v};`).join("\n") : "";
   let css = `/* Generated by @decantr/cli */
 :root {
-${lines}
+${lines}${spatialLines}
 }
 `;
   if (mode === "auto") {
@@ -343,32 +568,6 @@ ${lightLines}
   }
   return css;
 }
-function generateDecoratorsCSS(recipeData, themeName) {
-  if (!recipeData?.decorators) {
-    return `/* No recipe decorators available */`;
-  }
-  const decorators = recipeData.decorators;
-  const css = [
-    `/* Generated by @decantr/cli from recipe: ${themeName} */`,
-    ""
-  ];
-  for (const [name, description] of Object.entries(decorators)) {
-    css.push(generateDecoratorRule(name, description));
-    css.push("");
-  }
-  css.push(`/* Animation keyframes */
-@keyframes decantr-fade-in {
-  from { opacity: 0; transform: translateY(8px); }
-  to { opacity: 1; transform: translateY(0); }
-}
-
-@keyframes decantr-pulse {
-  0%, 100% { opacity: 1; }
-  50% { opacity: 0.5; }
-}
-`);
-  return css.join("\n");
-}
 function generateGlobalCSS(personality) {
   const personalityText = personality.join(" ").toLowerCase();
   let fontBody = "system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif";
@@ -428,34 +627,33 @@ input, button, textarea, select {
 }
 `;
 }
-function generateDecoratorsContext(recipeData, recipeName) {
+function generateTreatmentsContext(themeData, themeName) {
   const lines = [];
-  lines.push(`# Recipe Decorators: ${recipeName}`);
+  lines.push(`# Visual Treatments: ${themeName}`);
+  lines.push("");
+  lines.push("## Base Treatments");
   lines.push("");
-  lines.push("## Available Classes");
+  lines.push("d-interactive, d-surface, d-data, d-control, d-section, d-annotation \u2014 see DECANTR.md for usage.");
   lines.push("");
-  if (recipeData?.decorators && Object.keys(recipeData.decorators).length > 0) {
-    lines.push("| Decorator | Description |");
-    lines.push("|-----------|-------------|");
-    for (const [name, description] of Object.entries(recipeData.decorators)) {
-      lines.push(`| ${name} | ${description} |`);
+  if (themeData?.decorators && Object.keys(themeData.decorators).length > 0) {
+    lines.push(`## Theme Decorators (${themeName}-specific)`);
+    lines.push("");
+    lines.push("| Class | Use for |");
+    lines.push("|-------|---------|");
+    for (const [name, description] of Object.entries(themeData.decorators)) {
+      const useFor = description.split(".")[0].trim();
+      lines.push(`| ${name} | ${useFor} |`);
     }
-  } else {
-    lines.push("No decorators defined.");
+    lines.push("");
   }
+  lines.push("## Composition");
   lines.push("");
-  lines.push("## Usage");
-  lines.push("");
-  lines.push("Decorators are plain CSS class names from `src/styles/decorators.css`. Combine with atoms:");
-  lines.push("");
+  lines.push("Atoms + treatment + theme decorator:");
   lines.push("```tsx");
-  lines.push("<div className={css('_flex _col _gap4') + ' " + recipeName + "-card'}>");
-  lines.push("  <pre className={css('_p3') + ' " + recipeName + "-code'}>{code}</pre>");
-  lines.push("</div>");
+  lines.push(`css('_flex _col _gap4') + ' d-surface'`);
   lines.push("```");
   lines.push("");
-  lines.push("Atoms use `css()` function. Decorators are plain class strings. Combined via string concatenation.");
-  lines.push("");
+  lines.push("Atoms use `css()` function. Treatments and theme decorators are plain class strings.");
   return lines.join("\n");
 }
 function generateDecoratorRule(name, description) {
@@ -693,7 +891,7 @@ function buildEssence(options, archetypeData) {
       style: options.theme,
       mode: options.mode,
       recipe: options.theme,
-      // Recipe defaults to theme
+      // Legacy v2 field — kept for backward compatibility
       shape: options.shape
     },
     personality: options.personality,
@@ -706,6 +904,7 @@ function buildEssence(options, archetypeData) {
     guard: {
       enforce_style: true,
       enforce_recipe: true,
+      // Legacy v2 field — kept for backward compatibility
       mode: options.guard
     },
     density: {
@@ -719,7 +918,7 @@ function buildEssence(options, archetypeData) {
   }
   return essence;
 }
-function buildEssenceV3(options, archetypeData, themeHints, recipeHints) {
+function buildEssenceV3(options, archetypeData, themeHints) {
   let pages = [
     { id: "home", layout: ["hero"] }
   ];
@@ -756,9 +955,8 @@ function buildEssenceV3(options, archetypeData, themeHints, recipeHints) {
   };
   const dna = {
     theme: {
-      style: options.theme,
+      id: options.theme,
       mode: options.mode,
-      recipe: options.theme,
       shape: options.shape
     },
     spacing: {
@@ -768,9 +966,9 @@ function buildEssenceV3(options, archetypeData, themeHints, recipeHints) {
       content_gap: densityLevelMap[options.density] || "_gap4"
     },
     typography: {
-      scale: themeHints?.typography_hints?.scale || "modular",
-      heading_weight: themeHints?.typography_hints?.heading_weight || 600,
-      body_weight: themeHints?.typography_hints?.body_weight || 400
+      scale: themeHints?.typography?.scale || "modular",
+      heading_weight: themeHints?.typography?.heading_weight || 600,
+      body_weight: themeHints?.typography?.body_weight || 400
     },
     color: {
       palette: "semantic",
@@ -778,17 +976,17 @@ function buildEssenceV3(options, archetypeData, themeHints, recipeHints) {
       cvd_preference: options.accessibility?.cvd_preference || "auto"
     },
     radius: {
-      philosophy: recipeHints?.radius_hints?.philosophy || options.shape,
-      base: recipeHints?.radius_hints?.base || shapeRadiusMap[options.shape] || 8
+      philosophy: themeHints?.radius?.philosophy || options.shape,
+      base: themeHints?.radius?.base || shapeRadiusMap[options.shape] || 8
     },
     elevation: {
       system: "layered",
       max_levels: 3
     },
     motion: {
-      preference: recipeHints?.animation?.preference || themeHints?.motion_hints?.preference || "subtle",
+      preference: themeHints?.motion?.preference || "subtle",
       duration_scale: 1,
-      reduce_motion: themeHints?.motion_hints?.reduce_motion_default ?? true
+      reduce_motion: themeHints?.motion?.reduce_motion ?? true
     },
     accessibility: {
       wcag_level: options.accessibility?.wcag_level || "AA",
@@ -820,219 +1018,84 @@ function buildEssenceV3(options, archetypeData, themeHints, recipeHints) {
 }
 var CSS_APPROACH_CONTENT = `## CSS Implementation
 
-This project uses **@decantr/css** for layout atoms and the generated CSS files for theme tokens and recipe decorators.
-
-### Setup
+This project uses **@decantr/css** for layout atoms, **visual treatments** for semantic styling, and **theme decorators** for theme-specific decoration.
 
-\`\`\`javascript
-// 1. Import the atoms runtime
-import { css } from '@decantr/css';
+### Three File Setup
 
-// 2. Import generated CSS files (created by decantr init)
-import './styles/tokens.css';      // Theme tokens (--d-primary, --d-surface, etc.)
-import './styles/decorators.css';  // Recipe decorators
 \`\`\`
-
-### Using Atoms
-
-The \`css()\` function processes atom strings and injects CSS at runtime:
-
-\`\`\`jsx
-// Layout atoms
-<div className={css('_flex _col _gap4 _p4')}>
-  <h1 className={css('_heading1')}>Title</h1>
-  <p className={css('_textsm _fgmuted')}>Description</p>
-</div>
-
-// Responsive prefixes (mobile-first)
-<div className={css('_gc1 _sm:gc2 _lg:gc4')}>
-  {/* 1 col -> 2 cols at 640px -> 4 cols at 1024px */}
-</div>
+src/styles/
+  tokens.css       # Design tokens: --d-primary, --d-surface, --d-bg, etc.
+  treatments.css   # Visual treatments (d-interactive, d-surface, ...) + theme decorators
+  global.css       # Resets, base typography, sr-only
 \`\`\`
 
-### Atom Reference
-
-#### Display
-| Atom | CSS |
-|------|-----|
-| \`_flex\` | \`display:flex\` |
-| \`_grid\` | \`display:grid\` |
-| \`_block\` | \`display:block\` |
-| \`_inline\` | \`display:inline\` |
-| \`_inlineflex\` | \`display:inline-flex\` |
-| \`_none\` | \`display:none\` |
-| \`_contents\` | \`display:contents\` |
-
-#### Flexbox
-| Atom | CSS |
-|------|-----|
-| \`_col\` | \`flex-direction:column\` |
-| \`_row\` | \`flex-direction:row\` |
-| \`_colrev\` | \`flex-direction:column-reverse\` |
-| \`_wrap\` | \`flex-wrap:wrap\` |
-| \`_nowrap\` | \`flex-wrap:nowrap\` |
-| \`_flex1\` | \`flex:1\` |
-| \`_flex0\` | \`flex:none\` |
-| \`_flexauto\` | \`flex:auto\` |
-| \`_grow\` | \`flex-grow:1\` |
-| \`_grow0\` | \`flex-grow:0\` |
-| \`_shrink0\` | \`flex-shrink:0\` |
-
-#### Alignment
-| Atom | CSS |
-|------|-----|
-| \`_aic\` | \`align-items:center\` |
-| \`_aifs\` | \`align-items:flex-start\` |
-| \`_aife\` | \`align-items:flex-end\` |
-| \`_aist\` | \`align-items:stretch\` |
-| \`_aibl\` | \`align-items:baseline\` |
-| \`_jcc\` | \`justify-content:center\` |
-| \`_jcfs\` | \`justify-content:flex-start\` |
-| \`_jcfe\` | \`justify-content:flex-end\` |
-| \`_jcsb\` | \`justify-content:space-between\` |
-| \`_jcsa\` | \`justify-content:space-around\` |
-| \`_jcse\` | \`justify-content:space-evenly\` |
-| \`_pic\` | \`place-items:center\` |
-| \`_pcc\` | \`place-content:center\` |
-
-#### Spacing (scale: 0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24, ...)
-| Atom | CSS | Notes |
-|------|-----|-------|
-| \`_gap{n}\` | \`gap:{scale}\` | e.g. \`_gap4\` = \`gap:1rem\` |
-| \`_gx{n}\` | \`column-gap:{scale}\` | horizontal gap |
-| \`_gy{n}\` | \`row-gap:{scale}\` | vertical gap |
-| \`_p{n}\` | \`padding:{scale}\` | all sides |
-| \`_pt{n}\`, \`_pr{n}\`, \`_pb{n}\`, \`_pl{n}\` | directional padding | top/right/bottom/left |
-| \`_px{n}\` | \`padding-inline:{scale}\` | horizontal |
-| \`_py{n}\` | \`padding-block:{scale}\` | vertical |
-| \`_m{n}\` | \`margin:{scale}\` | same as padding variants |
-| \`_mx{n}\`, \`_my{n}\` | inline/block margin | horizontal/vertical |
-
-#### Sizing
-| Atom | CSS |
-|------|-----|
-| \`_wfull\` / \`_w100\` | \`width:100%\` |
-| \`_hfull\` / \`_h100\` | \`height:100%\` |
-| \`_wscreen\` | \`width:100vw\` |
-| \`_hscreen\` | \`height:100vh\` |
-| \`_wfit\` | \`width:fit-content\` |
-| \`_hfit\` | \`height:fit-content\` |
-| \`_wauto\` | \`width:auto\` |
-| \`_minw0\` | \`min-width:0\` |
-| \`_minh0\` | \`min-height:0\` |
-| \`_w{n}\`, \`_h{n}\` | width/height from spacing scale |
-| \`_minw{n}\`, \`_maxw{n}\` | min/max width from scale |
+\`\`\`javascript
+import { css } from '@decantr/css';         // Atoms runtime
+import './styles/tokens.css';                // Theme tokens
+import './styles/treatments.css';            // Treatments + theme decorators
+import './styles/global.css';                // Resets
+\`\`\`
 
-#### Text Size
-| Atom | Size | Line-height |
-|------|------|-------------|
-| \`_textxs\` | 0.75rem | 1rem |
-| \`_textsm\` | 0.875rem | 1.25rem |
-| \`_textbase\` | 1rem | 1.5rem |
-| \`_textlg\` | 1.125rem | 1.75rem |
-| \`_textxl\` | 1.25rem | 1.75rem |
-| \`_text2xl\` | 1.5rem | 2rem |
-| \`_text3xl\` | 1.875rem | 2.25rem |
-| \`_heading1\`-\`_heading6\` | Heading presets (size + weight) |
+### Visual Treatments
 
-#### Text Style
-| Atom | CSS |
-|------|-----|
-| \`_fontbold\` | \`font-weight:700\` |
-| \`_fontsemi\` | \`font-weight:600\` |
-| \`_fontmedium\` | \`font-weight:500\` |
-| \`_fontlight\` | \`font-weight:300\` |
-| \`_italic\` | \`font-style:italic\` |
-| \`_underline\` | \`text-decoration:underline\` |
-| \`_uppercase\` | \`text-transform:uppercase\` |
-| \`_truncate\` | overflow ellipsis + nowrap |
-| \`_textl\`, \`_textc\`, \`_textr\` | text-align left/center/right |
+Six base treatment classes provide semantic styling. Combine with atoms for layout:
 
-#### Color (theme variable based)
-| Atom | CSS |
-|------|-----|
-| \`_bgprimary\` | \`background:var(--d-primary)\` |
-| \`_bgsurface\` | \`background:var(--d-surface)\` |
-| \`_bgsurface0\`-\`_bgsurface2\` | surface elevation layers |
-| \`_bgmuted\` | \`background:var(--d-muted)\` |
-| \`_bgbg\` | \`background:var(--d-bg)\` |
-| \`_bgsuccess\`, \`_bgerror\`, \`_bgwarning\`, \`_bginfo\` | status backgrounds |
-| \`_fgprimary\` | \`color:var(--d-primary)\` |
-| \`_fgtext\` | \`color:var(--d-text)\` |
-| \`_fgmuted\` | \`color:var(--d-text-muted)\` |
-| \`_fgsuccess\`, \`_fgerror\`, \`_fgwarning\`, \`_fginfo\` | status text |
-| \`_bcborder\` | \`border-color:var(--d-border)\` |
+| Treatment | Class | Variants / States |
+|-----------|-------|-------------------|
+| **Interactive Surface** | \`d-interactive\` | \`data-variant="primary\\|ghost\\|danger"\`, hover/focus-visible/disabled states |
+| **Container Surface** | \`d-surface\` | \`data-variant="raised\\|overlay"\`, optional \`data-interactive\` for hover |
+| **Data Display** | \`d-data\`, \`d-data-header\`, \`d-data-row\`, \`d-data-cell\` | Row hover highlight |
+| **Form Control** | \`d-control\` | Focus ring, placeholder, disabled, error via \`aria-invalid\` |
+| **Section Rhythm** | \`d-section\` | Auto-spacing between adjacent sections, density-aware |
+| **Inline Annotation** | \`d-annotation\` | \`data-status="success\\|error\\|warning\\|info"\` |
 
-#### Overflow & Whitespace
-| Atom | CSS |
-|------|-----|
-| \`_overhidden\` | \`overflow:hidden\` |
-| \`_overauto\` | \`overflow:auto\` |
-| \`_overscroll\` | \`overflow:scroll\` |
-| \`_overxauto\`, \`_overyauto\` | axis-specific overflow |
-| \`_nowraptext\` | \`white-space:nowrap\` |
-| \`_prewrap\` | \`white-space:pre-wrap\` |
-| \`_breakword\` | \`overflow-wrap:break-word\` |
+### Composition
 
-#### Cursor & Interaction
-| Atom | CSS |
-|------|-----|
-| \`_pointer\` | \`cursor:pointer\` |
-| \`_cursordefault\` | \`cursor:default\` |
-| \`_notallowed\` | \`cursor:not-allowed\` |
-| \`_grab\` | \`cursor:grab\` |
-| \`_selectnone\` | \`user-select:none\` |
-| \`_ptrnone\` | \`pointer-events:none\` |
+Atoms + treatment + theme decorator:
 
-#### Position & Layout
-| Atom | CSS |
-|------|-----|
-| \`_rel\` | \`position:relative\` |
-| \`_abs\` | \`position:absolute\` |
-| \`_fixed\` | \`position:fixed\` |
-| \`_sticky\` | \`position:sticky\` |
-| \`_inset0\` | \`inset:0\` |
-| \`_top0\`, \`_right0\`, \`_bottom0\`, \`_left0\` | edge positioning |
-| \`_z10\`-\`_z50\` | z-index scale |
+\`\`\`tsx
+<button className={css('_px4 _py2') + ' d-interactive'} data-variant="primary">Deploy</button>
+<div className={css('_flex _col _gap4') + ' d-surface carbon-glass'}>Card</div>
+<span className="d-annotation" data-status="success">Active</span>
+\`\`\`
 
-#### Grid
-| Atom | CSS |
-|------|-----|
-| \`_gc1\`-\`_gc12\` | \`grid-template-columns:repeat(N,...)\` |
-| \`_gr1\`-\`_gr6\` | \`grid-template-rows:repeat(N,...)\` |
-| \`_span1\`-\`_span12\`, \`_spanfull\` | column span |
-| \`_rowspan1\`-\`_rowspan6\` | row span |
+- **Atoms:** \`css('_flex _col _gap4')\` \u2014 processed by @decantr/css runtime
+- **Treatments:** \`d-interactive\`, \`d-surface\` \u2014 semantic base styles from treatments.css
+- **Theme decorators:** \`carbon-glass\`, \`carbon-code\` \u2014 theme-specific decoration from treatments.css
+- **Combined:** \`css('_flex _col') + ' d-surface carbon-card'\`
 
-#### Visual
-| Atom | CSS |
-|------|-----|
-| \`_rounded\` | \`border-radius:var(--d-radius)\` |
-| \`_roundedfull\` | \`border-radius:9999px\` |
-| \`_roundedsm\`, \`_roundedlg\`, \`_roundedxl\` | radius variants |
-| \`_shadow\`, \`_shadowmd\`, \`_shadowlg\` | box-shadow presets |
-| \`_bordernone\` | \`border:none\` |
-| \`_bw{n}\` | \`border-width:{n}px\` |
-| \`_op0\`-\`_op100\` | opacity (0, 25, 50, 75, 100) |
-| \`_trans\` | \`transition:all 0.15s ease\` |
-| \`_visible\`, \`_invisible\` | visibility |
+### Atoms Quick Reference
 
-### Using Recipe Decorators
+| Category | Examples | Purpose |
+|----------|----------|---------|
+| Layout | \`_flex\`, \`_col\`, \`_row\`, \`_wrap\`, \`_grid\` | Flex/grid containers |
+| Spacing | \`_gap4\`, \`_p4\`, \`_px4\`, \`_py2\`, \`_m0\` | Gaps, padding, margin |
+| Sizing | \`_w100\`, \`_h100\`, \`_minw0\`, \`_maxwfull\` | Width, height |
+| Text | \`_textlg\`, \`_text2xl\`, \`_fontbold\`, \`_textc\` | Typography |
+| Alignment | \`_aic\`, \`_jcc\`, \`_jcsb\`, \`_pic\` | Flex/grid alignment |
+| Position | \`_rel\`, \`_abs\`, \`_sticky\`, \`_z10\` | Positioning |
+| Visual | \`_rounded\`, \`_shadow\`, \`_trans\`, \`_op50\` | Decoration |
+| Color | \`_bgprimary\`, \`_fgtext\`, \`_fgmuted\`, \`_bcborder\` | Theme colors |
+| Responsive | \`_md:gc2\`, \`_lg:gc4\`, \`_sm:flex\` | Breakpoint prefixes |
 
-Recipe decorators (from \`src/styles/decorators.css\`) are regular CSS class names, NOT atoms. They are applied directly as class names and combined with atoms using string concatenation:
+Scale: 0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24. Example: \`_gap4\` = \`gap:1rem\`.
 
-\`\`\`tsx
-// Atoms use css() function, decorators are plain class names
-<div className={css('_flex _col _gap4') + ' carbon-card'}>
-  <div className={css('_p4') + ' carbon-glass'}>
-    <pre className={css('_p3') + ' carbon-code'}>{code}</pre>
-  </div>
-</div>
-\`\`\`
+### Design Tokens
 
-**Key difference:**
-- Atoms: \`css('_flex _col _gap4')\` \u2014 processed by @decantr/css runtime
-- Decorators: \`'carbon-card'\`, \`'carbon-glass'\` \u2014 plain CSS classes from decorators.css
-- Combined: \`css('_flex _col') + ' carbon-card'\`
+| Token | Purpose | Use for |
+|-------|---------|---------|
+| \`--d-primary\` | Primary brand color | Buttons, links, focus rings |
+| \`--d-surface\`, \`--d-surface-raised\` | Surface backgrounds | Cards, panels |
+| \`--d-bg\` | Page background | Body, main container |
+| \`--d-border\` | Border color | Dividers, card borders |
+| \`--d-text\`, \`--d-text-muted\` | Text colors | Body text, secondary text |
+| \`--d-success\`, \`--d-error\`, \`--d-warning\`, \`--d-info\` | Status colors | Alerts, badges, toasts |
+| \`--d-shadow\`, \`--d-shadow-lg\` | Elevation shadows | Cards, overlays |
+| \`--d-radius\`, \`--d-radius-lg\` | Border radii | Buttons, cards |
+| \`--d-font-mono\` | Monospace font stack | Code, metrics, data |
+| \`--d-duration-hover\` | Hover transition | Interactive elements |
+| \`--d-easing\` | Animation easing | All transitions |
+| \`--d-accent-glow\` | Glow color | Hover effects, focus rings |
 
 ### Routing
 
@@ -1040,28 +1103,7 @@ Check \`decantr.essence.json\` \u2192 \`meta.platform.routing\` for the routing
 - \`"hash"\` \u2192 use \`HashRouter\` (e.g., for static hosting, GitHub Pages)
 - \`"history"\` \u2192 use \`BrowserRouter\` (e.g., for server-rendered apps)
 
-Routes are defined in \`decantr.essence.json\` \u2192 \`blueprint.routes\` and listed in \`.decantr/context/scaffold.md\`.
-
-### CSS Architecture
-
-The CSS is organized into two parts:
-
-1. **Atoms (@decantr/css)** - Layout utilities injected at runtime into \`@layer d.atoms\`
-2. **Generated CSS files** - Theme tokens and recipe decorators created during scaffold
-
-\`\`\`
-src/styles/
-  tokens.css      # :root { --d-primary: #...; --d-surface: #...; }
-  decorators.css  # .recipe-card { ... }
-\`\`\`
-
-### Variable Naming Convention
-
-| Prefix | Purpose | Example |
-|--------|---------|---------|
-| \`--d-\` | Core Decantr tokens | \`--d-primary\`, \`--d-bg\` |
-| \`--d-gap-{n}\` | Spacing tokens | \`--d-gap-4\`, \`--d-gap-8\` |
-| \`--d-radius\` | Border radius | \`--d-radius\`, \`--d-radius-lg\` |`;
+Routes are defined in \`decantr.essence.json\` \u2192 \`blueprint.routes\` and listed in \`.decantr/context/scaffold.md\`.`;
 function generateDecantrMdV31(guardMode, cssApproach) {
   const template = loadTemplate("DECANTR.md.template");
   return renderTemplate(template, {
@@ -1090,8 +1132,7 @@ function generateProjectJson(detected, options, registrySource) {
       cachedContent: {
         archetypes: [],
         patterns: [],
-        themes: [],
-        recipes: []
+        themes: []
       }
     },
     initialized: {
@@ -1124,7 +1165,7 @@ function generateTaskContext(templateName, essence) {
     TARGET: essence.target,
     THEME_STYLE: essence.theme.style,
     THEME_MODE: essence.theme.mode,
-    THEME_RECIPE: essence.theme.recipe,
+    THEME_RECIPE: essence.theme.style,
     DEFAULT_SHELL: defaultShell,
     GUARD_MODE: essence.guard.mode,
     LAYOUT: layout,
@@ -1148,9 +1189,9 @@ function generateTaskContextV3(templateName, essence) {
   const contentGap = essence.dna.spacing?.content_gap || "_gap4";
   const vars = {
     TARGET: essence.meta.target || "react",
-    THEME_STYLE: essence.dna.theme.style,
+    THEME_STYLE: essence.dna.theme.id || essence.dna.theme.style || "",
     THEME_MODE: essence.dna.theme.mode,
-    THEME_RECIPE: essence.dna.theme.recipe || essence.dna.theme.style,
+    THEME_RECIPE: essence.dna.theme.id || essence.dna.theme.style || "",
     DEFAULT_SHELL: defaultShell,
     GUARD_MODE: essence.meta.guard.mode,
     LAYOUT: layout,
@@ -1187,9 +1228,9 @@ ${rows.join("\n")}`;
     BLUEPRINT: "",
     PERSONALITY: (essence.dna.personality || []).join(", "),
     TARGET: essence.meta.target ?? "",
-    THEME_STYLE: essence.dna.theme.style,
+    THEME_STYLE: essence.dna.theme.id ?? essence.dna.theme.style ?? "",
     THEME_MODE: essence.dna.theme.mode,
-    THEME_RECIPE: essence.dna.theme.recipe ?? "",
+    THEME_RECIPE: essence.dna.theme.id ?? essence.dna.theme.style ?? "",
     SHAPE: essence.dna.theme.shape ?? "",
     PAGES_TABLE: pagesTable,
     FEATURES_LIST: featuresList,
@@ -1224,8 +1265,8 @@ ${cacheEntry}
     return true;
   }
 }
-async function scaffoldProject(projectRoot, options, detected, registry, archetypeData, registrySource = "cache", themeData, recipeData, topologyMarkdown, composedSections, routeMap, patternSpecs, blueprintData) {
-  const essenceV3 = buildEssenceV3(options, archetypeData, themeData, recipeData);
+async function scaffoldProject(projectRoot, options, detected, registry, archetypeData, registrySource = "cache", themeData, topologyMarkdown, composedSections, routeMap, patternSpecs, blueprintData) {
+  const essenceV3 = buildEssenceV3(options, archetypeData, themeData);
   const essence = buildEssence(options, archetypeData);
   const decantrDir = join(projectRoot, ".decantr");
   const contextDir = join(decantrDir, "context");
@@ -1261,7 +1302,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, { isInitialScaffold: true });
+  const refreshResult = await refreshDerivedFiles(projectRoot, essenceV3, registry, themeData, { isInitialScaffold: true });
   contextFiles.push(...refreshResult.contextFiles);
   const gitignoreUpdated = updateGitignore(projectRoot);
   return {
@@ -1276,7 +1317,7 @@ async function scaffoldProject(projectRoot, options, detected, registry, archety
 function scaffoldMinimal(projectRoot) {
   const decantrDir = join(projectRoot, ".decantr");
   const customDir = join(decantrDir, "custom");
-  const contentTypes = ["patterns", "recipes", "themes", "blueprints", "archetypes", "shells"];
+  const contentTypes = ["patterns", "themes", "blueprints", "archetypes", "shells"];
   for (const type of contentTypes) {
     mkdirSync(join(customDir, type), { recursive: true });
   }
@@ -1284,9 +1325,8 @@ function scaffoldMinimal(projectRoot) {
     version: "3.0.0",
     dna: {
       theme: {
-        style: "default",
+        id: "default",
         mode: "dark",
-        recipe: "default",
         shape: "rounded"
       },
       spacing: {
@@ -1368,8 +1408,7 @@ function scaffoldMinimal(projectRoot) {
       cachedContent: {
         archetypes: [],
         patterns: [],
-        themes: [],
-        recipes: []
+        themes: []
       }
     },
     initialized: {
@@ -1463,12 +1502,11 @@ When available, use these tools:
     gitignoreUpdated
   };
 }
-async function refreshDerivedFiles(projectRoot, essence, registry, prefetchedThemeData, prefetchedRecipeData, options) {
+async function refreshDerivedFiles(projectRoot, essence, registry, prefetchedThemeData, options) {
   const decantrDir = join(projectRoot, ".decantr");
   const contextDir = join(decantrDir, "context");
   mkdirSync(contextDir, { recursive: true });
-  const themeName = essence.dna.theme.style;
-  const recipeName = essence.dna.theme.recipe ?? themeName;
+  const themeName = essence.dna.theme.id || essence.dna.theme.style || "default";
   const mode = essence.dna.theme.mode;
   const guardMode = essence.meta.guard.mode;
   const guardConfig = {
@@ -1478,7 +1516,6 @@ async function refreshDerivedFiles(projectRoot, essence, registry, prefetchedThe
   };
   const personality = essence.dna.personality || [];
   let themeData = prefetchedThemeData;
-  let recipeData = prefetchedRecipeData;
   if (!themeData) try {
     const themeResult = await registry.fetchTheme(themeName);
     if (themeResult?.data) {
@@ -1489,51 +1526,20 @@ async function refreshDerivedFiles(projectRoot, essence, registry, prefetchedThe
         palette: t.palette,
         cvd_support: t.cvd_support,
         tokens: t.tokens,
-        typography_hints: t.typography_hints,
-        motion_hints: t.motion_hints
+        typography: t.typography,
+        motion: t.motion,
+        decorators: t.decorators,
+        treatments: t.treatments,
+        spatial: t.spatial,
+        radius: t.radius,
+        shell: t.shell,
+        effects: t.effects,
+        compositions: t.compositions,
+        pattern_preferences: t.pattern_preferences
       };
     }
   } catch {
   }
-  if (!recipeData) try {
-    const recipeResult = await registry.fetchRecipe(recipeName);
-    if (recipeResult?.data) {
-      const raw = recipeResult.data;
-      const r = raw.data ?? raw;
-      recipeData = {
-        decorators: r.decorators,
-        spatial_hints: r.spatial_hints,
-        radius_hints: r.radius_hints
-      };
-      if (!recipeData.decorators && raw.data) {
-        const inner = raw.data;
-        if (inner.decorators) {
-          recipeData.decorators = inner.decorators;
-          recipeData.spatial_hints = inner.spatial_hints;
-          recipeData.radius_hints = inner.radius_hints;
-        }
-      }
-    }
-  } catch {
-  }
-  if (!recipeData?.decorators || Object.keys(recipeData.decorators).length === 0) {
-    try {
-      const apiUrl = registry.apiUrl || "https://api.decantr.ai/v1";
-      const resp = await fetch(`${apiUrl}/recipes/@official/${recipeName}`);
-      if (resp.ok) {
-        const apiData = await resp.json();
-        const inner = apiData.data ?? apiData;
-        if (inner.decorators && Object.keys(inner.decorators).length > 0) {
-          recipeData = {
-            decorators: inner.decorators,
-            spatial_hints: inner.spatial_hints,
-            radius_hints: inner.radius_hints
-          };
-        }
-      }
-    } catch {
-    }
-  }
   if (!themeData?.seed?.primary) {
     try {
       const apiUrl = registry.apiUrl || "https://api.decantr.ai/v1";
@@ -1547,8 +1553,16 @@ async function refreshDerivedFiles(projectRoot, essence, registry, prefetchedThe
             palette: inner.palette,
             cvd_support: inner.cvd_support,
             tokens: inner.tokens,
-            typography_hints: inner.typography_hints,
-            motion_hints: inner.motion_hints
+            typography: inner.typography,
+            motion: inner.motion,
+            decorators: inner.decorators,
+            treatments: inner.treatments,
+            spatial: inner.spatial,
+            radius: inner.radius,
+            shell: inner.shell,
+            effects: inner.effects,
+            compositions: inner.compositions,
+            pattern_preferences: inner.pattern_preferences
           };
         }
       }
@@ -1557,27 +1571,35 @@ async function refreshDerivedFiles(projectRoot, essence, registry, prefetchedThe
   }
   const stylesDir = join(projectRoot, "src", "styles");
   mkdirSync(stylesDir, { recursive: true });
+  const densityLevel = options.density || "comfortable";
+  const spatialTokens = computeSpatialTokens(densityLevel, themeData?.spatial ? {
+    section_padding: themeData.spatial.section_padding ?? void 0,
+    density_bias: typeof themeData.spatial.density_bias === "number" ? themeData.spatial.density_bias : void 0,
+    content_gap_shift: themeData.spatial.content_gap_shift
+  } : void 0);
   const tokensPath = join(stylesDir, "tokens.css");
   const hasRealThemeData = themeData?.seed?.primary || themeData?.palette?.background;
   if (hasRealThemeData || !existsSync(tokensPath)) {
-    writeFileSync(tokensPath, generateTokensCSS(themeData, mode));
-  }
-  const decoratorsPath = join(stylesDir, "decorators.css");
-  const hasRealRecipeData = recipeData?.decorators && Object.keys(recipeData.decorators).length > 0;
-  if (hasRealRecipeData || !existsSync(decoratorsPath)) {
-    writeFileSync(decoratorsPath, generateDecoratorsCSS(recipeData, themeName));
-  }
+    writeFileSync(tokensPath, generateTokensCSS(themeData, mode, spatialTokens));
+  }
+  const treatmentsPath = join(stylesDir, "treatments.css");
+  writeFileSync(treatmentsPath, generateTreatmentCSS(
+    spatialTokens,
+    themeData?.treatments,
+    themeData?.decorators,
+    themeName
+  ));
   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 cssFiles = [tokensPath, treatmentsPath, globalPath];
+  const treatmentsMdPath = join(contextDir, "treatments.md");
+  writeFileSync(treatmentsMdPath, generateTreatmentsContext(themeData, themeName));
   const decantrMdPath = join(projectRoot, "DECANTR.md");
   writeFileSync(decantrMdPath, generateDecantrMdV31(guardMode, CSS_APPROACH_CONTENT));
   const hasSections = essence.blueprint.sections && essence.blueprint.sections.length > 0;
-  const contextFiles = [decoratorsMdPath];
+  const contextFiles = [treatmentsMdPath];
   if (!hasSections) {
     const summaryPath = join(contextDir, "essence-summary.md");
     writeFileSync(summaryPath, generateEssenceSummaryV3(essence));
@@ -1675,8 +1697,8 @@ async function refreshDerivedFiles(projectRoot, essence, registry, prefetchedThe
     const topologyMarkdown = generateTopologySection(topologyData, personality);
     const themeTokensCss = existsSync(tokensPath) ? readFileSync(tokensPath, "utf-8") : "";
     const decoratorList = [];
-    if (recipeData?.decorators) {
-      for (const [name, desc] of Object.entries(recipeData.decorators)) {
+    if (themeData?.decorators) {
+      for (const [name, desc] of Object.entries(themeData.decorators)) {
         decoratorList.push({ name, description: desc });
       }
     } else if (existsSync(decoratorsPath)) {
@@ -1744,7 +1766,6 @@ async function refreshDerivedFiles(projectRoot, essence, registry, prefetchedThe
         guardConfig,
         personality,
         themeName,
-        recipeName,
         zoneContext,
         patternSpecs: sectionPatterns,
         constraints: essence.dna.constraints,
@@ -1759,7 +1780,6 @@ async function refreshDerivedFiles(projectRoot, essence, registry, prefetchedThe
       appName: essence.meta.archetype || "Application",
       blueprintId: "",
       themeName,
-      recipeName,
       personality,
       topologyMarkdown,
       sections,
@@ -1834,8 +1854,8 @@ async function refreshDerivedFiles(projectRoot, essence, registry, prefetchedThe
     }
     const themeTokensCss = existsSync(tokensPath) ? readFileSync(tokensPath, "utf-8") : "";
     const decoratorList = [];
-    if (recipeData?.decorators) {
-      for (const [name, desc] of Object.entries(recipeData.decorators)) {
+    if (themeData?.decorators) {
+      for (const [name, desc] of Object.entries(themeData.decorators)) {
         decoratorList.push({ name, description: desc });
       }
     } else if (existsSync(decoratorsPath)) {
@@ -1873,7 +1893,6 @@ async function refreshDerivedFiles(projectRoot, essence, registry, prefetchedThe
       guardConfig,
       personality,
       themeName,
-      recipeName,
       zoneContext: `This is the primary section (${shell} shell).`,
       patternSpecs,
       constraints: essence.dna.constraints,
@@ -1977,7 +1996,7 @@ function generateSyntheticComponents(patternId, description) {
   return [...new Set(syntheticComponents)];
 }
 function generateSectionContext(input) {
-  const { section, decorators, guardConfig, personality, themeName, recipeName, zoneContext, patternSpecs, recipeHints, constraints, shellInfo } = input;
+  const { section, decorators, guardConfig, personality, themeName, zoneContext, patternSpecs, themeHints, constraints, shellInfo } = input;
   const lines = [];
   lines.push(`# Section: ${section.id}`);
   lines.push("");
@@ -2002,23 +2021,21 @@ function generateSectionContext(input) {
   lines.push("");
   lines.push(`**Theme tokens:** see \`src/styles/tokens.css\` \u2014 use \`var(--d-primary)\`, \`var(--d-bg)\`, etc.`);
   lines.push("");
+  lines.push("**Visual Treatments:** All 6 base treatments available (see DECANTR.md for usage).");
   if (decorators.length > 0) {
-    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.");
+    const names = decorators.map((d) => d.name).join(", ");
+    lines.push(`**Theme decorators:** ${names}`);
   }
   lines.push("");
-  if (recipeHints) {
-    if (recipeHints.preferred && recipeHints.preferred.length > 0) {
-      lines.push(`**Preferred:** ${recipeHints.preferred.join(", ")}`);
+  if (themeHints) {
+    if (themeHints.preferred && themeHints.preferred.length > 0) {
+      lines.push(`**Preferred:** ${themeHints.preferred.join(", ")}`);
     }
-    if (recipeHints.compositions) {
-      lines.push(`**Compositions:** ${recipeHints.compositions}`);
+    if (themeHints.compositions) {
+      lines.push(`**Compositions:** ${themeHints.compositions}`);
     }
-    if (recipeHints.spatialHints) {
-      lines.push(`**Spatial hints:** ${recipeHints.spatialHints}`);
+    if (themeHints.spatialHints) {
+      lines.push(`**Spatial hints:** ${themeHints.spatialHints}`);
     }
     lines.push("");
   }
@@ -2103,12 +2120,12 @@ function generateSectionContext(input) {
   return lines.join("\n");
 }
 function generateScaffoldContext(input) {
-  const { appName, blueprintId, themeName, recipeName, personality, topologyMarkdown, sections, routes, constraints, seo, navigation } = input;
+  const { appName, blueprintId, themeName, personality, topologyMarkdown, sections, routes, constraints, seo, navigation } = input;
   const lines = [];
   lines.push(`# Scaffold: ${appName}`);
   lines.push("");
   lines.push(`**Blueprint:** ${blueprintId}`);
-  lines.push(`**Theme:** ${themeName} | **Recipe:** ${recipeName}`);
+  lines.push(`**Theme:** ${themeName}`);
   lines.push(`**Personality:** ${personality.join(", ")}`);
   lines.push("**Guard mode:** creative (no enforcement during initial scaffolding)");
   lines.push("");
@@ -2203,7 +2220,7 @@ import { existsSync as existsSync2, mkdirSync as mkdirSync2, readFileSync as rea
 import { join as join2 } from "path";
 import { RegistryAPIClient } from "@decantr/registry";
 var DEFAULT_API_URL = "https://api.decantr.ai/v1";
-var ALL_CONTENT_TYPES = ["themes", "patterns", "recipes", "blueprints", "archetypes", "shells"];
+var ALL_CONTENT_TYPES = ["themes", "patterns", "blueprints", "archetypes", "shells"];
 function loadFromCache(cacheDir, contentType, id, namespace) {
   const nsDir = namespace ? join2(cacheDir, namespace) : cacheDir;
   const cachePath = id ? join2(nsDir, contentType, `${id}.json`) : join2(nsDir, contentType, "index.json");
@@ -2367,12 +2384,6 @@ var RegistryClient = class {
   async fetchShell(id) {
     return this.fetchContentItem("shells", id);
   }
-  async fetchRecipes() {
-    return this.fetchContentList("recipes");
-  }
-  async fetchRecipe(id) {
-    return this.fetchContentItem("recipes", id);
-  }
   /**
    * Check if API is available.
    */