decantr 0.9.0

package/src/registry/patterns/detail-panel.json

@@ -0,0 +1,27 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v1.json",
+  "id": "detail-panel",
+  "name": "Detail Panel",
+  "description": "Full detail view for a single entity with a header section and tabbed content areas. Used for user profiles, product details, and record views.",
+  "components": ["Tabs", "Card", "Card.Header", "Card.Body", "Avatar", "Badge", "Button", "Separator", "Tooltip"],
+  "default_blend": {
+    "layout": "stack",
+    "atoms": "_flex _flexCol _gap4 _p4",
+    "slots": {
+      "header": "Entity header with Avatar, title (_heading3), subtitle (_caption), status Badge, and action Buttons via _flex _gap3 _itemsCenter. Wrapped in Card.Header",
+      "tabs": "Tabs component with content panels. Common tabs: Overview, Details, Activity, Settings",
+      "tab-content": "Each tab panel contains domain-specific content using Cards, form fields, or activity-feed pattern"
+    }
+  },
+  "recipe_overrides": {
+    "command-center": {
+      "wrapper": "cc-frame",
+      "atoms": "cc-bar",
+      "notes": "Header uses cc-bar with cc-label for entity name. Status Badge gets cc-glow for active states. Tab bar uses cc-bar styling. Content areas get cc-scanline."
+    }
+  },
+  "code": {
+    "imports": "import { tags } from 'decantr/tags';\nimport { css } from 'decantr/css';\nimport { Tabs, Badge, Separator, Descriptions, Button } from 'decantr/components';",
+    "example": "function DetailPanel() {\n  const { div, h2, span } = tags;\n  const entity = {\n    name: 'Acme Corporation',\n    active: true,\n    status: 'Active',\n    fields: [\n      { label: 'Industry', value: 'Technology' },\n      { label: 'Size', value: '500-1000 employees' },\n      { label: 'Location', value: 'San Francisco, CA' },\n      { label: 'Founded', value: '2018' }\n    ]\n  };\n\n  return div({ class: css('_flex _col _gap4 _p4') },\n    div({ class: css('_flex _aic _jcsb') },\n      div({ class: css('_flex _aic _gap3') },\n        h2({ class: css('_heading3') }, entity.name),\n        Badge({ variant: entity.active ? 'success' : 'default' }, entity.status)\n      ),\n      div({ class: css('_flex _gap2') },\n        Button({ variant: 'outline', size: 'sm' }, 'Edit'),\n        Button({ variant: 'destructive', size: 'sm' }, 'Delete')\n      )\n    ),\n    Separator(),\n    Tabs({ items: [\n      { label: 'Overview', content: () => Descriptions({ items: entity.fields }) },\n      { label: 'Activity', content: () => div({ class: css('_p4 _fgmuted') }, 'Activity timeline...') },\n      { label: 'Settings', content: () => div({ class: css('_p4 _fgmuted') }, 'Settings panel...') }\n    ] })\n  );\n}"
+  }
+}

package/src/registry/patterns/explorer-shell.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v1.json",
+  "id": "explorer-shell",
+  "name": "Explorer Shell",
+  "description": "Application shell for documentation explorers: persistent header with search, collapsible sidebar with layered navigation, scrollable main content, and floating control panel.",
+  "components": ["Input", "Select", "Button"],
+  "default_blend": {
+    "layout": "grid",
+    "atoms": "_flex _col _h[100vh]",
+    "slots": {
+      "header": "Fixed header bar with logo, search trigger (Cmd+K hint), and controls toggle",
+      "sidebar": "Collapsible nav sidebar with filter input and expandable layer groups",
+      "main": "Scrollable content area with max-width constraint",
+      "search-modal": "Full-screen search overlay with focus trap",
+      "hud-panel": "Floating control panel for style/mode/shape switching"
+    }
+  },
+  "code": {
+    "imports": "import { tags } from 'decantr/tags';\nimport { createSignal } from 'decantr/state';\nimport { css } from 'decantr/css';\nimport { Input, Button, icon } from 'decantr/components';\nimport { link } from 'decantr/router';",
+    "example": "function ExplorerShell() {\n  const { div, aside, main, header, span, nav } = tags;\n  const [searchOpen, setSearchOpen] = createSignal(false);\n  const sections = [\n    { href: '#/foundations', icon: 'layers', label: 'Foundations' },\n    { href: '#/components', icon: 'box', label: 'Components' },\n    { href: '#/patterns', icon: 'layout', label: 'Patterns' },\n    { href: '#/tokens', icon: 'palette', label: 'Tokens' }\n  ];\n\n  return div({ class: css('_grid _h[100vh]'), style: 'grid-template-columns:260px 1fr;grid-template-rows:auto 1fr' },\n    aside({ class: css('_flex _col _gap1 _p3 _bgmuted _overflow[auto] _borderR'), style: 'grid-row:1/3' },\n      Input({ placeholder: 'Search... (Cmd+K)', class: css('_mb3'), onfocus: () => setSearchOpen(true) }),\n      nav({ class: css('_flex _col _gap1') },\n        ...sections.map(s =>\n          link({ href: s.href, class: css('_flex _aic _gap2 _p2 _px3 _r2 _textsm _fgfg _trans') },\n            icon(s.icon), s.label\n          )\n        )\n      )\n    ),\n    header({ class: css('_flex _aic _jcsb _px6 _py3 _borderB') },\n      span({ class: css('_heading4') }, 'Explorer'),\n      div({ class: css('_flex _gap2') },\n        Button({ variant: 'ghost', size: 'sm', onclick: () => setSearchOpen(true) }, icon('search'))\n      )\n    ),\n    main({ class: css('_flex _col _gap4 _p6 _overflow[auto]') },\n      div({ class: css('_p4 _fgmuted') }, 'Select a section from the sidebar to begin exploring.')\n    )\n  );\n}"
+  }
+}

package/src/registry/patterns/filter-bar.json

@@ -0,0 +1,33 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v1.json",
+  "id": "filter-bar",
+  "name": "Filter Bar",
+  "description": "Horizontal filter controls with search, dropdowns, date pickers, and active filter chips.",
+  "components": ["Input", "Select", "Button", "DatePicker", "Chip"],
+  "default_blend": {
+    "layout": "row",
+    "atoms": "_flex _gap3 _aic _wrap _py3",
+    "slots": {
+      "search": "Search Input for keyword filtering",
+      "filters": "Select dropdowns and DatePicker controls",
+      "active-filters": "Chip list showing currently applied filters",
+      "actions": "Clear-all or apply Button actions"
+    }
+  },
+  "recipe_overrides": {
+    "auradecantism": {
+      "wrapper": "",
+      "atoms": "d-glass _r4 _px4 _py2",
+      "notes": "Filter bar in glass strip. Active filter chips use primary color."
+    },
+    "clean": {
+      "wrapper": "",
+      "atoms": "_borderB _pb3",
+      "notes": "Filter bar with bottom border. Simple, no background."
+    }
+  },
+  "code": {
+    "imports": "import { tags } from 'decantr/tags';\nimport { createSignal } from 'decantr/state';\nimport { css } from 'decantr/css';\nimport { Input, Select, Button, DatePicker, Chip } from 'decantr/components';",
+    "example": "function FilterBar() {\n  const { div } = tags;\n  const [search, setSearch] = createSignal('');\n  const [category, setCategory] = createSignal('all');\n  const [filters, setFilters] = createSignal([]);\n\n  return div({ class: css('_flex _gap3 _aic _wrap _py3') },\n    Input({ placeholder: 'Search...', value: search, onchange: e => setSearch(e.target.value), class: css('_w[240px]') }),\n    Select({ value: category, onchange: v => { setCategory(v); if (v !== 'all') setFilters([...filters(), v]); },\n      options: [\n        { label: 'All Categories', value: 'all' },\n        { label: 'Sales', value: 'sales' },\n        { label: 'Marketing', value: 'marketing' }\n      ] }),\n    DatePicker({ placeholder: 'Date range' }),\n    ...filters().map(f => Chip({ label: f, onClose: () => setFilters(filters().filter(x => x !== f)) })),\n    filters().length > 0 ? Button({ variant: 'ghost', size: 'sm', onclick: () => setFilters([]) }, 'Clear All') : null\n  );\n}"
+  }
+}

package/src/registry/patterns/filter-sidebar.json

@@ -0,0 +1,27 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v1.json",
+  "id": "filter-sidebar",
+  "name": "Filter Sidebar",
+  "description": "Vertical filter panel with grouped controls for refining data views. Pairs with data-table or product-grid patterns.",
+  "components": ["Checkbox", "Select", "Switch", "Button", "Separator", "Accordion", "Input"],
+  "default_blend": {
+    "layout": "stack",
+    "atoms": "_flex _flexCol _gap4 _p4 _wFull",
+    "slots": {
+      "search": "Optional keyword Input with icon at top",
+      "filter-groups": "Accordion sections each containing Checkbox lists, Select dropdowns, or Switch toggles",
+      "actions": "Bottom bar with apply Button (primary) and clear Button (ghost), separated by Separator"
+    }
+  },
+  "recipe_overrides": {
+    "command-center": {
+      "wrapper": "cc-frame-sm",
+      "atoms": "cc-scanline",
+      "notes": "Section headers use cc-label. Active filter counts use cc-data. Apply button gets cc-glow. Panel background uses cc-scanline."
+    }
+  },
+  "code": {
+    "imports": "import { tags } from 'decantr/tags';\nimport { createSignal } from 'decantr/state';\nimport { css } from 'decantr/css';\nimport { Checkbox, RadioGroup, Button, Accordion, Badge } from 'decantr/components';",
+    "example": "function FilterSidebar() {\n  const { div, h3 } = tags;\n  const categories = [\n    { id: 'electronics', name: 'Electronics' },\n    { id: 'clothing', name: 'Clothing' },\n    { id: 'books', name: 'Books' },\n    { id: 'home', name: 'Home & Garden' }\n  ];\n  const priceRanges = [\n    { id: 'under25', label: 'Under $25' },\n    { id: '25to50', label: '$25 - $50' },\n    { id: '50to100', label: '$50 - $100' },\n    { id: 'over100', label: 'Over $100' }\n  ];\n  const [selected, setSelected] = createSignal([]);\n\n  return div({ class: css('_flex _col _gap4 _p4 _w[260px] _borderR _overflow[auto]') },\n    h3({ class: css('_heading5') }, 'Filters'),\n    Accordion({ items: [\n      { title: 'Category', content: () =>\n        div({ class: css('_flex _col _gap2') },\n          ...categories.map(cat =>\n            Checkbox({ label: cat.name, checked: selected().includes(cat.id),\n              onchange: v => setSelected(v ? [...selected(), cat.id] : selected().filter(x => x !== cat.id))\n            })\n          )\n        )\n      },\n      { title: 'Price Range', content: () =>\n        RadioGroup({ options: priceRanges.map(r => ({ label: r.label, value: r.id })) })\n      }\n    ] }),\n    Button({ variant: 'primary', class: css('_wfull') }, 'Apply Filters')\n  );\n}"
+  }
+}

package/src/registry/patterns/form-sections.json

@@ -0,0 +1,110 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "id": "form-sections",
+  "name": "Form Sections",
+  "description": "Grouped form fields organized into labeled sections with consistent spacing. Supports settings pages, content creation forms, and structured data entry via presets.",
+  "components": ["Input", "Select", "Switch", "Textarea", "Checkbox", "Button", "Separator"],
+  "default_preset": "settings",
+  "presets": {
+    "settings": {
+      "description": "Grouped form fields for settings pages and profile editing.",
+      "components": ["Input", "Select", "Switch", "Textarea", "Checkbox", "Button", "Separator"],
+      "blend": {
+        "layout": "stack",
+        "atoms": "_flex _flexCol _gap8 _p6 _mxAuto",
+        "slots": {
+          "section": "Repeating group: section title (_heading5), description (_caption _muted), then field rows separated by Separator",
+          "field-row": "Label + control pair via _flex _flexCol _gap1 or _grid _gc2 for side-by-side",
+          "actions": "Bottom bar with save Button (primary) and cancel Button (ghost) via _flex _gap3 _justifyEnd"
+        }
+      },
+      "code": {
+        "imports": "import { tags } from 'decantr/tags';\nimport { css } from 'decantr/css';\nimport { Input, Select, Textarea, Button, Separator } from 'decantr/components';",
+        "example": "function FormSections() {\n  const { div, h3, p } = tags;\n\n  const section = (title, desc, ...fields) =>\n    div({ class: css('_flex _col _gap4') },\n      div({}, h3({ class: css('_heading5') }, title), p({ class: css('_fgmuted _textsm') }, desc)),\n      ...fields\n    );\n\n  return div({ class: css('_flex _col _gap8 _p6 _mw[720px]') },\n    section('Personal Info', 'Basic contact details',\n      div({ class: css('_grid _gc2 _gap4') },\n        Input({ label: 'First Name' }),\n        Input({ label: 'Last Name' })\n      ),\n      Input({ label: 'Email', type: 'email' })\n    ),\n    Separator(),\n    section('Company', 'Organization details',\n      Input({ label: 'Company Name' }),\n      Select({ label: 'Industry', options: [{ label: 'Technology', value: 'tech' }, { label: 'Finance', value: 'finance' }] })\n    ),\n    Separator(),\n    section('Notes', 'Additional information',\n      Textarea({ label: 'Notes', rows: 4 })\n    ),\n    div({ class: css('_flex _jcfe _gap3') },\n      Button({ variant: 'outline' }, 'Cancel'),\n      Button({ variant: 'primary' }, 'Save')\n    )\n  );\n}"
+      }
+    },
+    "creation": {
+      "description": "Content creation form with photo upload, basics, metadata, and dynamic lists. For recipe/article creation.",
+      "components": ["Card", "Card.Header", "Card.Body", "Input", "Textarea", "InputNumber", "Segmented", "Button", "Upload", "Collapsible", "Chip", "Separator", "icon"],
+      "blend": {
+        "layout": "stack",
+        "atoms": "_flex _col _gap6 _mw[720px] _mxAuto _p4",
+        "slots": {
+          "photo": "Upload dropzone for cover photo",
+          "basics": "Card with title Input, description Textarea",
+          "metadata": "Card with numeric inputs and segmented controls",
+          "dynamic-lists": "Cards with dynamic add/remove rows for items",
+          "tags": "Tag input with Chip display",
+          "submit": "Publish Button with draft toggle"
+        }
+      },
+      "code": {
+        "imports": "import { tags } from 'decantr/tags';\nimport { createSignal } from 'decantr/state';\nimport { css } from 'decantr/css';\nimport { Card, Input, Textarea, InputNumber, Segmented, Button, Upload, Collapsible, Chip, Separator, icon } from 'decantr/components';",
+        "example": "function CreationForm() {\n  const { div, h3, label } = tags;\n  const [title, setTitle] = createSignal('');\n  const [items, setItems] = createSignal(['']);\n\n  const addItem = () => setItems([...items(), '']);\n\n  return div({ class: css('_flex _col _gap6 _mw[720px] _mxAuto _p4') },\n    Upload({ accept: 'image/*', variant: 'dragger' }, 'Upload cover photo'),\n    Card({},\n      Card.Header({}, h3({ class: css('_heading5') }, 'Basic Info')),\n      Card.Body({ class: css('_flex _col _gap3') },\n        Input({ label: 'Title', placeholder: 'Name', value: title, onchange: e => setTitle(e.target.value) }),\n        Textarea({ label: 'Description', placeholder: 'Brief description...', rows: 3 })\n      )\n    ),\n    Card({},\n      Card.Header({}, h3({ class: css('_heading5') }, 'Details')),\n      Card.Body({ class: css('_flex _col _gap3') },\n        div({ class: css('_grid _gc3 _gap3') },\n          InputNumber({ label: 'Prep (min)', min: 0 }),\n          InputNumber({ label: 'Cook (min)', min: 0 }),\n          InputNumber({ label: 'Servings', min: 1 })\n        ),\n        Segmented({ label: 'Difficulty', options: ['Easy', 'Medium', 'Hard'] })\n      )\n    ),\n    Card({},\n      Card.Header({}, h3({ class: css('_heading5') }, 'Items')),\n      Card.Body({ class: css('_flex _col _gap2') },\n        ...items().map((_, i) =>\n          Input({ placeholder: `Item ${i + 1}` })\n        ),\n        Button({ variant: 'outline', size: 'sm', onclick: addItem }, icon('plus'), 'Add Item')\n      )\n    ),\n    div({ class: css('_flex _jce _gap3') },\n      Button({ variant: 'outline' }, 'Save Draft'),\n      Button({ variant: 'primary' }, 'Publish')\n    )\n  );\n}"
+      }
+    },
+    "structured": {
+      "description": "Advanced structured form with tabular data entry, hierarchical sections, and auto-calculated fields.",
+      "components": ["Card", "Card.Header", "Card.Body", "Input", "Textarea", "InputNumber", "Select", "Segmented", "Button", "Upload", "Tabs", "Separator", "Badge", "icon"],
+      "blend": {
+        "layout": "stack",
+        "atoms": "_flex _col _gap6 _mw[840px] _mxAuto _p4",
+        "slots": {
+          "photo": "Upload dropzone for cover photo",
+          "basics": "Card with title, description, and scale selector",
+          "structured-items": "Card with tabular rows: multiple columns of inputs per row",
+          "hierarchical-sections": "Card with named sections, each containing ordered sub-items",
+          "timing-summary": "Auto-calculated totals display",
+          "metadata": "Card with categorization tags and metadata",
+          "submit": "Publish Button with draft toggle"
+        }
+      },
+      "code": {
+        "imports": "import { tags } from 'decantr/tags';\nimport { createSignal } from 'decantr/state';\nimport { css } from 'decantr/css';\nimport { Card, Input, Textarea, InputNumber, Select, Segmented, Button, Upload, Tabs, Separator, Badge, icon } from 'decantr/components';",
+        "example": "function StructuredForm() {\n  const { div, h3, span } = tags;\n  const [items, setItems] = createSignal([{ qty: '', unit: '', name: '', prep: '' }]);\n  const [sections, setSections] = createSignal([{ title: 'Main', steps: [{ text: '', time: 0 }] }]);\n  const units = ['g', 'kg', 'ml', 'l', 'cup', 'tbsp', 'tsp', 'oz', 'lb', 'piece'];\n\n  return div({ class: css('_flex _col _gap6 _mw[840px] _mxAuto _p4') },\n    Upload({ accept: 'image/*', variant: 'dragger' }, 'Upload cover photo'),\n    Card({},\n      Card.Header({}, h3({ class: css('_heading5') }, 'Basic Info')),\n      Card.Body({ class: css('_flex _col _gap3') },\n        Input({ label: 'Title', placeholder: 'Name' }),\n        Textarea({ label: 'Description', rows: 3 }),\n        Segmented({ label: 'Scale', options: ['1x', '2x', '4x'] })\n      )\n    ),\n    Card({},\n      Card.Header({}, h3({ class: css('_heading5') }, 'Structured Items')),\n      Card.Body({ class: css('_flex _col _gap2') },\n        ...items().map((item, i) =>\n          div({ class: css('_grid _gc4 _gap2 _aic') },\n            InputNumber({ placeholder: 'Qty', size: 'sm' }),\n            Select({ placeholder: 'Unit', options: units, size: 'sm' }),\n            Input({ placeholder: 'Name', size: 'sm' }),\n            Input({ placeholder: 'Notes', size: 'sm' })\n          )\n        ),\n        Button({ variant: 'outline', size: 'sm' }, icon('plus'), 'Add Item')\n      )\n    ),\n    Card({},\n      Card.Header({}, h3({ class: css('_heading5') }, 'Sections')),\n      Card.Body({ class: css('_flex _col _gap4') },\n        ...sections().map((sec, si) =>\n          div({ class: css('_flex _col _gap3 _p3 _bgmuted _r4') },\n            Input({ value: sec.title, placeholder: 'Section name', size: 'sm' }),\n            ...sec.steps.map((step, i) =>\n              div({ class: css('_flex _gap2 _aic') },\n                Badge({ variant: 'outline' }, `${si + 1}.${i + 1}`),\n                Textarea({ placeholder: 'Step description', rows: 2, class: css('_flex1') }),\n                InputNumber({ placeholder: 'Min', size: 'sm', class: css('_w[80px]') })\n              )\n            ),\n            Button({ variant: 'outline', size: 'sm' }, icon('plus'), 'Add Step')\n          )\n        ),\n        Button({ variant: 'outline', size: 'sm' }, icon('plus'), 'Add Section')\n      )\n    ),\n    div({ class: css('_flex _jce _gap3') },\n      Button({ variant: 'outline' }, 'Save Draft'),\n      Button({ variant: 'primary' }, 'Publish')\n    )\n  );\n}"
+      }
+    }
+  },
+  "default_blend": {
+    "layout": "stack",
+    "atoms": "_flex _flexCol _gap8 _p6 _mxAuto",
+    "slots": {
+      "section": "Repeating group: section title (_heading5), description (_caption _muted), then field rows separated by Separator",
+      "field-row": "Label + control pair via _flex _flexCol _gap1 or _grid _gc2 for side-by-side",
+      "actions": "Bottom bar with save Button (primary) and cancel Button (ghost) via _flex _gap3 _justifyEnd"
+    }
+  },
+  "recipe_overrides": {
+    "command-center": {
+      "wrapper": "cc-frame",
+      "atoms": "cc-grid",
+      "notes": "Section headers use cc-label. Required field indicators use cc-glow. Action bar uses cc-bar. Background uses cc-grid.",
+      "preset_notes": {
+        "creation": "Form sections use cc-frame-sm. Labels use cc-label. Submit button uses cc-glow.",
+        "structured": "Form sections use cc-frame-sm. Structured inputs use cc-grid layout. Timing data uses cc-data."
+      }
+    },
+    "auradecantism": {
+      "wrapper": "",
+      "atoms": "",
+      "notes": "Form cards use d-glass. Section headers use d-gradient-text.",
+      "preset_notes": {
+        "creation": "Form cards use d-glass. Section headers use d-gradient-text. Submit button prominent.",
+        "structured": "Form cards use d-glass. Section headers use d-gradient-text. Structured table rows alternate opacity."
+      }
+    },
+    "clean": {
+      "wrapper": "",
+      "atoms": "",
+      "notes": "Standard form with subtle borders. Clean input styling.",
+      "preset_notes": {
+        "creation": "Standard form cards with subtle borders. Clean input styling.",
+        "structured": "Standard form cards with borders. Clean tabular layout."
+      }
+    }
+  },
+  "code": {
+    "imports": "import { tags } from 'decantr/tags';\nimport { css } from 'decantr/css';\nimport { Input, Select, Textarea, Button, Separator } from 'decantr/components';",
+    "example": "function FormSections() {\n  const { div, h3, p } = tags;\n\n  const section = (title, desc, ...fields) =>\n    div({ class: css('_flex _col _gap4') },\n      div({}, h3({ class: css('_heading5') }, title), p({ class: css('_fgmuted _textsm') }, desc)),\n      ...fields\n    );\n\n  return div({ class: css('_flex _col _gap8 _p6 _mw[720px]') },\n    section('Personal Info', 'Basic contact details',\n      div({ class: css('_grid _gc2 _gap4') },\n        Input({ label: 'First Name' }),\n        Input({ label: 'Last Name' })\n      ),\n      Input({ label: 'Email', type: 'email' })\n    ),\n    Separator(),\n    section('Company', 'Organization details',\n      Input({ label: 'Company Name' }),\n      Select({ label: 'Industry', options: [{ label: 'Technology', value: 'tech' }, { label: 'Finance', value: 'finance' }] })\n    ),\n    Separator(),\n    section('Notes', 'Additional information',\n      Textarea({ label: 'Notes', rows: 4 })\n    ),\n    div({ class: css('_flex _jcfe _gap3') },\n      Button({ variant: 'outline' }, 'Cancel'),\n      Button({ variant: 'primary' }, 'Save')\n    )\n  );\n}"
+  }
+}

package/src/registry/patterns/goal-tracker.json

@@ -0,0 +1,27 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v1.json",
+  "id": "goal-tracker",
+  "name": "Goal Tracker",
+  "description": "Grid of metric cards comparing current values against targets. Each card shows label, current value, target value, variance (amount and percentage), progress indicator, and status badge (on-track/at-risk/behind).",
+  "components": ["Statistic", "Progress", "Badge", "icon", "Sparkline"],
+  "default_blend": {
+    "layout": "grid",
+    "atoms": "_grid _gc3 _gap4 _p4",
+    "slots": {
+      "header": "Section title with _heading4, optional period selector (Select or Segmented)",
+      "cards": "Array of goal cards. Each card: Statistic (current), Progress (fraction toward target), Badge (on-track/at-risk/behind), variance display (delta amount + %), optional Sparkline for trend",
+      "summary": "Optional aggregate row showing overall achievement rate"
+    }
+  },
+  "recipe_overrides": {
+    "command-center": {
+      "wrapper": "cc-frame",
+      "atoms": "cc-grid",
+      "notes": "Goal values use cc-data. Status badges use cc-glow for critical (behind) items. Progress bars get cc-bar. Header uses cc-bar with cc-label."
+    }
+  },
+  "code": {
+    "imports": "import { tags } from 'decantr/tags';\nimport { css } from 'decantr/css';\nimport { Statistic, Progress, Badge, icon } from 'decantr/components';\nimport { Sparkline } from 'decantr/chart';",
+    "example": "function GoalTracker() {\n  const { div, h3, span } = tags;\n  const goals = [\n    { label: 'Revenue', current: 840000, target: 1000000, unit: '$', status: 'on-track', trend: [60, 68, 72, 78, 84] },\n    { label: 'New Users', current: 3200, target: 5000, unit: '', status: 'at-risk', trend: [20, 24, 26, 28, 32] },\n    { label: 'NPS Score', current: 72, target: 80, unit: '', status: 'on-track', trend: [65, 68, 70, 71, 72] }\n  ];\n\n  return div({ class: css('_flex _col _gap4 _p4') },\n    h3({ class: css('_heading4') }, 'Goal Progress'),\n    div({ class: css('_grid _gc3 _gap4') },\n      ...goals.map(g =>\n        div({ class: css('_flex _col _gap3 _p4 _b1 _r4') },\n          div({ class: css('_flex _aic _jcsb') },\n            span({ class: css('_textsm _bold') }, g.label),\n            Badge({ variant: g.status === 'on-track' ? 'success' : g.status === 'at-risk' ? 'warning' : 'error' }, g.status)\n          ),\n          Statistic({ label: 'Current', value: g.current, suffix: g.unit }),\n          Progress({ value: (g.current / g.target) * 100 }),\n          div({ class: css('_flex _aic _jcsb _textxs _fgmuted') },\n            span({}, `Target: ${g.target}${g.unit}`),\n            span({}, `${Math.round((g.current / g.target) * 100)}%`)\n          ),\n          g.trend ? Sparkline({ data: g.trend, height: 32 }) : null\n        )\n      )\n    )\n  );\n}"
+  }
+}

package/src/registry/patterns/hero.json

@@ -0,0 +1,107 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "id": "hero",
+  "name": "Hero Section",
+  "description": "Full-width hero with headline, subtext, CTA buttons, and optional media. Entry point for landing pages, recipe detail headers, and marketing sections.",
+  "components": ["Button", "icon"],
+  "default_preset": "landing",
+  "presets": {
+    "landing": {
+      "description": "Centered headline + CTA + optional media",
+      "components": ["Button", "icon"],
+      "blend": {
+        "layout": "stack",
+        "atoms": "_flex _flexCol _itemsCenter _textCenter _gap6 _py16 _px6",
+        "slots": {
+          "headline": "Primary heading, typically h1 with _heading1",
+          "description": "Supporting paragraph with _body _muted",
+          "cta-group": "Horizontal Button group with _flex _gap3",
+          "media": "Optional image, illustration, or chart component"
+        }
+      },
+      "code": {
+        "imports": "import { tags } from 'decantr/tags';\nimport { css } from 'decantr/css';\nimport { Button, icon } from 'decantr/components';",
+        "example": "function Hero() {\n  const { div, h1, p } = tags;\n\n  return div({ class: css('_flex _col _aic _tc _gap6 _py16 _px6') },\n    h1({ class: css('_heading1') }, 'Build Faster, Ship Smarter'),\n    p({ class: css('_body _fgmuted _mw[640px]') }, 'The AI-first framework that turns your ideas into production-ready applications in minutes, not months.'),\n    div({ class: css('_flex _gap3') },\n      Button({ variant: 'primary', size: 'lg' }, 'Get Started'),\n      Button({ variant: 'outline', size: 'lg' }, icon('github'), 'View Source')\n    )\n  );\n}"
+      }
+    },
+    "image-overlay": {
+      "description": "Full-bleed image with gradient overlay, content at bottom. Used for recipe/cookbook detail headers.",
+      "components": ["Button", "Chip", "icon"],
+      "blend": {
+        "layout": "stack",
+        "atoms": "_relative _wfull _h[400px] _overflow[hidden] _r4",
+        "slots": {
+          "image": "Full-bleed background cover image with gradient overlay",
+          "top-bar": "Absolute top row: back button (left) + action buttons (right)",
+          "tags": "Optional horizontal Chip row for tags overlaid on image",
+          "title": "Title (_heading2) overlaid at bottom of image",
+          "description": "Short description overlaid below title"
+        }
+      },
+      "code": {
+        "imports": "import { tags } from 'decantr/tags';\nimport { css } from 'decantr/css';\nimport { Button, Chip, icon } from 'decantr/components';\nimport { navigate } from 'decantr/router';",
+        "example": "function ImageOverlayHero({ item }) {\n  const { div, h1, p, img } = tags;\n\n  return div({ class: css('_relative _wfull _h[400px] _overflow[hidden] _r4') },\n    img({ src: item.image, alt: item.title, class: css('_absolute _inset0 _wfull _hfull _object[cover]') }),\n    div({ class: css('_absolute _inset0 _bg[linear-gradient(transparent_50%,rgba(0,0,0,0.8))]') }),\n    div({ class: css('_absolute _top0 _left0 _right0 _flex _jcsb _p4') },\n      Button({ variant: 'ghost', size: 'sm', onclick: () => navigate(-1) }, icon('arrow-left'), 'Back'),\n      Button({ variant: 'ghost', size: 'sm' }, icon('edit'), 'Edit')\n    ),\n    div({ class: css('_absolute _bottom0 _left0 _right0 _p6 _flex _col _gap2') },\n      div({ class: css('_flex _gap2') },\n        ...(item.tags || []).map(t => Chip({ size: 'sm', variant: 'outline' }, t))\n      ),\n      h1({ class: css('_heading2 _fgfg') }, item.title),\n      p({ class: css('_body _fgmuted') }, item.description)\n    )\n  );\n}"
+      }
+    },
+    "image-overlay-compact": {
+      "description": "Compact full-bleed image with overlay for collection headers. Shorter height, fewer slots.",
+      "components": ["Button", "Badge", "Avatar", "icon"],
+      "blend": {
+        "layout": "stack",
+        "atoms": "_relative _wfull _h[300px] _overflow[hidden] _r4",
+        "slots": {
+          "image": "Full-bleed background cover image with gradient overlay",
+          "top-actions": "Absolute top-right: edit and delete action Buttons",
+          "content": "Absolute bottom: title (_heading2), count Badge, author Avatar + name"
+        }
+      },
+      "code": {
+        "imports": "import { tags } from 'decantr/tags';\nimport { css } from 'decantr/css';\nimport { Button, Badge, Avatar, icon } from 'decantr/components';",
+        "example": "function CompactOverlayHero({ item }) {\n  const { div, h1, span, img } = tags;\n\n  return div({ class: css('_relative _wfull _h[300px] _overflow[hidden] _r4') },\n    img({ src: item.cover, alt: item.title, class: css('_absolute _inset0 _wfull _hfull _object[cover]') }),\n    div({ class: css('_absolute _inset0 _bg[linear-gradient(transparent_50%,rgba(0,0,0,0.8))]') }),\n    div({ class: css('_absolute _top0 _right0 _p4 _flex _gap2') },\n      Button({ variant: 'ghost', size: 'sm' }, icon('edit'), 'Edit'),\n      Button({ variant: 'ghost', size: 'sm' }, icon('trash'), 'Delete')\n    ),\n    div({ class: css('_absolute _bottom0 _left0 _right0 _p6 _flex _col _gap2') },\n      h1({ class: css('_heading2 _fgfg') }, item.title),\n      div({ class: css('_flex _aic _gap3') },\n        Badge({ variant: 'outline' }, `${item.count} items`),\n        div({ class: css('_flex _aic _gap2') },\n          Avatar({ src: item.author?.avatar, size: 'xs' }),\n          span({ class: css('_textsm') }, item.author?.name)\n        )\n      )\n    )\n  );\n}"
+      }
+    }
+  },
+  "default_blend": {
+    "layout": "stack",
+    "atoms": "_flex _flexCol _itemsCenter _textCenter _gap6 _py16 _px6",
+    "slots": {
+      "headline": "Primary heading, typically h1 with _heading1",
+      "description": "Supporting paragraph with _body _muted",
+      "cta-group": "Horizontal Button group with _flex _gap3",
+      "media": "Optional image, illustration, or chart component"
+    }
+  },
+  "recipe_overrides": {
+    "command-center": {
+      "wrapper": "cc-frame",
+      "atoms": "cc-grid",
+      "notes": "Headline uses cc-label. CTA buttons get cc-glow on primary action. Background uses cc-grid overlay.",
+      "preset_notes": {
+        "image-overlay": "Hero image framed with cc-frame border. Tags use cc-label. Title uses cc-data.",
+        "image-overlay-compact": "Hero framed with cc-frame border. Title uses cc-data. Count badge uses cc-label."
+      }
+    },
+    "auradecantism": {
+      "wrapper": "d-mesh",
+      "atoms": "",
+      "notes": "Hero section on d-mesh background. Headline uses d-gradient-text. CTA button gets aura-glow.",
+      "preset_notes": {
+        "image-overlay": "Gradient overlay uses d-mesh tones. Title uses d-gradient-text. Subtle aura-glow on action buttons.",
+        "image-overlay-compact": "Gradient overlay blends into d-mesh tones. Title uses d-gradient-text."
+      }
+    },
+    "clean": {
+      "wrapper": "",
+      "atoms": "_bgmuted _r4",
+      "notes": "Hero on subtle muted background. No gradients or glass. Standard button styling.",
+      "preset_notes": {
+        "image-overlay": "Simple image with dark gradient overlay for text legibility. No extra effects.",
+        "image-overlay-compact": "Simple image with dark gradient overlay for text legibility."
+      }
+    }
+  },
+  "code": {
+    "imports": "import { tags } from 'decantr/tags';\nimport { css } from 'decantr/css';\nimport { Button, icon } from 'decantr/components';",
+    "example": "function Hero() {\n  const { div, h1, p } = tags;\n\n  return div({ class: css('_flex _col _aic _tc _gap6 _py16 _px6') },\n    h1({ class: css('_heading1') }, 'Build Faster, Ship Smarter'),\n    p({ class: css('_body _fgmuted _mw[640px]') }, 'The AI-first framework that turns your ideas into production-ready applications in minutes, not months.'),\n    div({ class: css('_flex _gap3') },\n      Button({ variant: 'primary', size: 'lg' }, 'Get Started'),\n      Button({ variant: 'outline', size: 'lg' }, icon('github'), 'View Source')\n    )\n  );\n}"
+  }
+}

package/src/registry/patterns/index.json

@@ -0,0 +1,47 @@
+{
+  "$schema": "https://decantr.ai/schemas/patterns.v2.json",
+  "description": "Experience patterns — composable building blocks that archetypes reference. Each pattern maps to a Blend (concrete component composition) and can be overridden per recipe. v2 patterns support presets: named variants within a single pattern file.",
+  "patterns": {
+    "hero": { "name": "Hero", "file": "hero.json", "presets": ["landing", "image-overlay", "image-overlay-compact"] },
+    "kpi-grid": { "name": "KPI Grid", "file": "kpi-grid.json" },
+    "data-table": { "name": "Data Table", "file": "data-table.json" },
+    "activity-feed": { "name": "Activity Feed", "file": "activity-feed.json" },
+    "chart-grid": { "name": "Chart Grid", "file": "chart-grid.json" },
+    "card-grid": { "name": "Card Grid", "file": "card-grid.json", "presets": ["product", "content", "collection", "icon"] },
+    "filter-sidebar": { "name": "Filter Sidebar", "file": "filter-sidebar.json" },
+    "wizard": { "name": "Wizard", "file": "wizard.json" },
+    "detail-panel": { "name": "Detail Panel", "file": "detail-panel.json" },
+    "form-sections": { "name": "Form Sections", "file": "form-sections.json", "presets": ["settings", "creation", "structured"] },
+    "post-list": { "name": "Post List", "file": "post-list.json" },
+    "auth-form": { "name": "Auth Form", "file": "auth-form.json" },
+    "article-content": { "name": "Article Content", "file": "article-content.json" },
+    "category-nav": { "name": "Category Nav", "file": "category-nav.json" },
+    "timeline": { "name": "Timeline", "file": "timeline.json" },
+    "component-showcase": { "name": "Component Showcase", "file": "component-showcase.json" },
+    "pagination": { "name": "Pagination", "file": "pagination.json" },
+    "testimonials": { "name": "Testimonials", "file": "testimonials.json" },
+    "cta-section": { "name": "CTA Section", "file": "cta-section.json" },
+    "contact-form": { "name": "Contact Form", "file": "contact-form.json" },
+    "search-bar": { "name": "Search Bar", "file": "search-bar.json" },
+    "author-card": { "name": "Author Card", "file": "author-card.json" },
+    "table-of-contents": { "name": "Table of Contents", "file": "table-of-contents.json" },
+    "filter-bar": { "name": "Filter Bar", "file": "filter-bar.json" },
+    "detail-header": { "name": "Detail Header", "file": "detail-header.json", "presets": ["standard", "profile"] },
+    "media-gallery": { "name": "Media Gallery", "file": "media-gallery.json" },
+    "pricing-table": { "name": "Pricing Table", "file": "pricing-table.json" },
+    "order-history": { "name": "Order History", "file": "order-history.json" },
+    "specimen-grid": { "name": "Specimen Grid", "file": "specimen-grid.json" },
+    "token-inspector": { "name": "Token Inspector", "file": "token-inspector.json" },
+    "explorer-shell": { "name": "Explorer Shell", "file": "explorer-shell.json" },
+    "goal-tracker": { "name": "Goal Tracker", "file": "goal-tracker.json" },
+    "pipeline-tracker": { "name": "Pipeline Tracker", "file": "pipeline-tracker.json" },
+    "scorecard": { "name": "Scorecard", "file": "scorecard.json" },
+    "comparison-panel": { "name": "Comparison Panel", "file": "comparison-panel.json" },
+    "stats-bar": { "name": "Stats Bar", "file": "stats-bar.json" },
+    "checklist-card": { "name": "Checklist Card", "file": "checklist-card.json" },
+    "steps-card": { "name": "Steps Card", "file": "steps-card.json" },
+    "stat-card": { "name": "Stat Card", "file": "stat-card.json" },
+    "photo-to-recipe": { "name": "Photo to Recipe", "file": "photo-to-recipe.json" },
+    "chat-interface": { "name": "Chat Interface", "file": "chat-interface.json" }
+  }
+}

package/src/registry/patterns/kpi-grid.json

@@ -0,0 +1,36 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v1.json",
+  "id": "kpi-grid",
+  "name": "KPI Grid",
+  "description": "Responsive grid of metric cards showing key performance indicators. Each card displays a label, value, trend, and optional sparkline.",
+  "components": ["Statistic", "icon"],
+  "default_blend": {
+    "layout": "grid",
+    "atoms": "_grid _gc4 _gap4 _p4",
+    "slots": {
+      "cards": "Array of Statistic instances with label, value, trend props",
+      "header": "Optional section title with _heading4 and filter controls"
+    }
+  },
+  "recipe_overrides": {
+    "command-center": {
+      "wrapper": "cc-frame",
+      "atoms": "cc-bar cc-grid",
+      "notes": "KPI values use cc-data and cc-glow for critical metrics. Section header uses cc-bar with cc-label. Background gets cc-grid."
+    },
+    "auradecantism": {
+      "wrapper": "d-glass",
+      "atoms": "_r4",
+      "notes": "Each KPI card wrapped in d-glass. Key values use d-gradient-text. Section header in d-gradient-text."
+    },
+    "clean": {
+      "wrapper": "",
+      "atoms": "_b1 _r4",
+      "notes": "Simple bordered cards. No glass or gradients. Tokens handle all visual styling."
+    }
+  },
+  "code": {
+    "imports": "import { tags } from 'decantr/tags';\nimport { css } from 'decantr/css';\nimport { Statistic, icon } from 'decantr/components';",
+    "example": "function KpiGrid() {\n  const { div, h2 } = tags;\n  return div({ class: css('_flex _col _gap4') },\n    h2({ class: css('_heading4') }, 'Key Metrics'),\n    div({ class: css('_grid _gc4 _gap4') },\n      Statistic({ label: 'Revenue', value: 1248500, prefix: '$', trend: 'up', trendValue: '+12.5%' }),\n      Statistic({ label: 'Users', value: 84230, trend: 'up', trendValue: '+8.1%' }),\n      Statistic({ label: 'Orders', value: 6420, trend: 'down', trendValue: '-2.3%' }),\n      Statistic({ label: 'Conversion', value: 3.24, suffix: '%', trend: 'up', trendValue: '+0.5%' })\n    )\n  );\n}"
+  }
+}

package/src/registry/patterns/media-gallery.json

@@ -0,0 +1,20 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v1.json",
+  "id": "media-gallery",
+  "name": "Media Gallery",
+  "description": "Responsive image gallery with thumbnails, lightbox, and optional carousel.",
+  "components": ["Image", "Card", "Modal", "Button"],
+  "default_blend": {
+    "layout": "grid",
+    "atoms": "_grid _gc3 _gap3",
+    "slots": {
+      "gallery-grid": "Grid of Image cards with click-to-expand",
+      "lightbox": "Modal overlay for full-size image viewing",
+      "thumbnails": "Optional thumbnail strip for navigation"
+    }
+  },
+  "code": {
+    "imports": "import { tags } from 'decantr/tags';\nimport { createSignal } from 'decantr/state';\nimport { css } from 'decantr/css';\nimport { Image, Modal, Button, icon } from 'decantr/components';",
+    "example": "function MediaGallery() {\n  const { div } = tags;\n  const images = [\n    { thumb: '/images/photo-1.jpg', full: '/images/photo-1-full.jpg', alt: 'Mountain landscape' },\n    { thumb: '/images/photo-2.jpg', full: '/images/photo-2-full.jpg', alt: 'Ocean sunset' },\n    { thumb: '/images/photo-3.jpg', full: '/images/photo-3-full.jpg', alt: 'Forest trail' },\n    { thumb: '/images/photo-4.jpg', full: '/images/photo-4-full.jpg', alt: 'City skyline' },\n    { thumb: '/images/photo-5.jpg', full: '/images/photo-5-full.jpg', alt: 'Desert dunes' },\n    { thumb: '/images/photo-6.jpg', full: '/images/photo-6-full.jpg', alt: 'Snowy peaks' }\n  ];\n  const [selected, setSelected] = createSignal(null);\n\n  return div({},\n    div({ class: css('_grid _gcaf250 _gap3 _p4') },\n      ...images.map((img, i) =>\n        div({ class: css('_overflow[hidden] _r4 _pointer _trans'), onclick: () => setSelected(i) },\n          Image({ src: img.thumb, alt: img.alt, class: css('_wfull _h[200px] _object[cover]') })\n        )\n      )\n    ),\n    Modal({ visible: () => selected() !== null, onClose: () => setSelected(null) },\n      selected() !== null ? Image({ src: images[selected()].full, alt: images[selected()].alt, class: css('_mw[90vw] _mh[80vh] _object[contain]') }) : null\n    )\n  );\n}"
+  }
+}

package/src/registry/patterns/order-history.json

@@ -0,0 +1,20 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v1.json",
+  "id": "order-history",
+  "name": "Order History",
+  "description": "Order listing table with status badges, date columns, and action links.",
+  "components": ["DataTable", "Badge", "Button"],
+  "default_blend": {
+    "layout": "stack",
+    "atoms": "_flex _col _gap4",
+    "slots": {
+      "filters": "Optional filter controls for date range and status",
+      "order-table": "DataTable with order ID, date, status Badge, and total columns",
+      "pagination": "Bottom pagination row for navigating order pages"
+    }
+  },
+  "code": {
+    "imports": "import { tags } from 'decantr/tags';\nimport { css } from 'decantr/css';\nimport { DataTable, Badge, Button } from 'decantr/components';",
+    "example": "function OrderHistory() {\n  const { div, h3 } = tags;\n  const orders = [\n    { id: 'ORD-1042', date: '2026-03-10', items: 3, total: 129.99, status: 'delivered' },\n    { id: 'ORD-1041', date: '2026-03-08', items: 1, total: 49.00, status: 'shipped' },\n    { id: 'ORD-1040', date: '2026-03-05', items: 2, total: 84.50, status: 'processing' },\n    { id: 'ORD-1039', date: '2026-03-01', items: 5, total: 212.75, status: 'delivered' }\n  ];\n  const columns = [\n    { key: 'id', label: 'Order #', sortable: true },\n    { key: 'date', label: 'Date', sortable: true },\n    { key: 'items', label: 'Items' },\n    { key: 'total', label: 'Total', sortable: true, render: row => `$${row.total.toFixed(2)}` },\n    { key: 'status', label: 'Status', render: row =>\n      Badge({ variant: row.status === 'delivered' ? 'success' : row.status === 'shipped' ? 'primary' : 'default' }, row.status)\n    },\n    { key: 'actions', label: '', render: row =>\n      Button({ variant: 'ghost', size: 'sm' }, 'View')\n    }\n  ];\n\n  return div({ class: css('_flex _col _gap4 _p4') },\n    h3({ class: css('_heading4') }, 'Order History'),\n    DataTable({ columns, data: orders, sortable: true, paginate: true, pageSize: 10 })\n  );\n}"
+  }
+}

package/src/registry/patterns/pagination.json

@@ -0,0 +1,19 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v1.json",
+  "id": "pagination",
+  "name": "Pagination",
+  "description": "Page navigation controls with page numbers, prev/next, and optional page-size selector.",
+  "components": ["Pagination", "Select", "Button"],
+  "default_blend": {
+    "layout": "row",
+    "atoms": "_flex _jcc _aic _gap2 _py4",
+    "slots": {
+      "page-controls": "Pagination component with prev/next and numbered pages",
+      "page-size-selector": "Optional Select for rows-per-page control"
+    }
+  },
+  "code": {
+    "imports": "import { tags } from 'decantr/tags';\nimport { createSignal } from 'decantr/state';\nimport { css } from 'decantr/css';\nimport { Pagination } from 'decantr/components';",
+    "example": "function PaginationPattern() {\n  const { div, span } = tags;\n  const total = 243;\n  const pageSize = 10;\n  const [page, setPage] = createSignal(1);\n  const totalPages = Math.ceil(total / pageSize);\n\n  return div({ class: css('_flex _aic _jcsb _py3') },\n    span({ class: css('_textsm _fgmuted') },\n      `Showing ${(page() - 1) * pageSize + 1}-${Math.min(page() * pageSize, total)} of ${total}`\n    ),\n    Pagination({ current: page, total: totalPages, onChange: setPage })\n  );\n}"
+  }
+}

package/src/registry/patterns/photo-to-recipe.json

@@ -0,0 +1,36 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v1.json",
+  "id": "photo-to-recipe",
+  "name": "Photo to Recipe",
+  "description": "Two-column AI generation layout: left column has a photo upload dropzone, right column displays AI-generated recipe output with title, ingredients, and instructions. Used for AI-powered recipe extraction from food photos.",
+  "components": ["Card", "Card.Header", "Card.Body", "Upload", "Button", "Spinner", "Separator", "icon"],
+  "default_blend": {
+    "layout": "grid",
+    "atoms": "_grid _gc2 _gap6 _p4 _aic",
+    "slots": {
+      "upload": "Left column: Upload dropzone with image preview, analyze Button",
+      "output": "Right column: Card showing AI-generated recipe with title, ingredients list, instructions, and 'Save Recipe' action"
+    }
+  },
+  "recipe_overrides": {
+    "command-center": {
+      "wrapper": "cc-frame",
+      "atoms": "cc-grid",
+      "notes": "Upload zone uses cc-frame-sm. AI output card uses cc-frame-sm with cc-data for generated text. Analyze button uses cc-glow."
+    },
+    "auradecantism": {
+      "wrapper": "d-mesh",
+      "atoms": "",
+      "notes": "Upload dropzone on d-glass. Output card on d-glass. AI badge uses d-gradient-text."
+    },
+    "clean": {
+      "wrapper": "",
+      "atoms": "",
+      "notes": "Standard two-column layout with bordered cards. Clean upload dropzone."
+    }
+  },
+  "code": {
+    "imports": "import { tags } from 'decantr/tags';\nimport { createSignal } from 'decantr/state';\nimport { css } from 'decantr/css';\nimport { Card, Upload, Button, Spinner, Separator, icon } from 'decantr/components';",
+    "example": "function PhotoToRecipe() {\n  const { div, h3, p, span, ul, li } = tags;\n  const [analyzing, setAnalyzing] = createSignal(false);\n  const [result, setResult] = createSignal(null);\n\n  return div({ class: css('_grid _gc2 _gap6 _p4') },\n    Card({},\n      Card.Header({}, h3({ class: css('_heading5') }, icon('camera'), ' Upload Photo')),\n      Card.Body({ class: css('_flex _col _gap4 _aic') },\n        Upload({ accept: 'image/*', variant: 'dragger', class: css('_wfull') }, 'Drop a food photo here'),\n        Button({ variant: 'primary', class: css('_wfull'), onclick: () => setAnalyzing(true) },\n          analyzing() ? Spinner({ size: 'sm' }) : icon('sparkles'),\n          analyzing() ? ' Analyzing...' : ' Generate Recipe'\n        )\n      )\n    ),\n    Card({},\n      Card.Header({}, h3({ class: css('_heading5') }, icon('sparkles'), ' AI Generated Recipe')),\n      Card.Body({ class: css('_flex _col _gap3') },\n        result()\n          ? div({},\n              h3({ class: css('_heading4') }, result().title),\n              Separator(),\n              h3({ class: css('_heading6 _mt3') }, 'Ingredients'),\n              ul({}, ...result().ingredients.map(i => li({}, i))),\n              h3({ class: css('_heading6 _mt3') }, 'Instructions'),\n              ul({}, ...result().steps.map((s, i) => li({}, `${i + 1}. ${s}`))),\n              Button({ variant: 'primary', class: css('_mt4') }, 'Save Recipe')\n            )\n          : p({ class: css('_fgmuted _tc') }, 'Upload a photo to generate a recipe')\n      )\n    )\n  );\n}"
+  }
+}