decantr 0.9.0

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

@@ -0,0 +1,28 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v1.json",
+  "id": "pipeline-tracker",
+  "name": "Pipeline Tracker",
+  "description": "Stage-based progression visualization with summary metrics per stage, funnel or horizontal bar visualization, and drill-down data table for items in each stage.",
+  "components": ["Chart", "Badge", "DataTable", "Tabs", "Statistic", "Select"],
+  "default_blend": {
+    "layout": "stack",
+    "atoms": "_flex _flexCol _gap4 _p4",
+    "slots": {
+      "header": "Section title with _heading4, stage filter Select, period selector",
+      "summary": "Horizontal row of stage cards (_flex _gap3): stage name, item count (Badge), total value (Statistic)",
+      "visualization": "Chart({ type: 'funnel' }) or Chart({ type: 'bar' }) showing stage volumes with conversion rate annotations between stages",
+      "detail": "Tabbed DataTable showing items in selected stage with drill-down"
+    }
+  },
+  "recipe_overrides": {
+    "command-center": {
+      "wrapper": "cc-frame",
+      "atoms": "cc-scanline cc-grid",
+      "notes": "Stage cards use cc-bar. Chart segments get cc-glow on hover. DataTable gets cc-scanline. Stage counts use cc-data."
+    }
+  },
+  "code": {
+    "imports": "import { tags } from 'decantr/tags';\nimport { createSignal } from 'decantr/state';\nimport { css } from 'decantr/css';\nimport { Badge, DataTable, Tabs, Statistic, Select } from 'decantr/components';\nimport { Chart } from 'decantr/chart';",
+    "example": "function PipelineTracker() {\n  const { div, h3, span } = tags;\n  const stages = [\n    { id: 'prospect', name: 'Prospect', value: 240000, count: 42 },\n    { id: 'qualified', name: 'Qualified', value: 180000, count: 28 },\n    { id: 'proposal', name: 'Proposal', value: 95000, count: 12 },\n    { id: 'negotiation', name: 'Negotiation', value: 62000, count: 6 },\n    { id: 'closed', name: 'Closed Won', value: 48000, count: 4 }\n  ];\n  const items = [\n    { name: 'Acme Corp', value: 45000, stage: 'proposal', owner: 'Alice' },\n    { name: 'Globex Inc', value: 32000, stage: 'qualified', owner: 'Bob' },\n    { name: 'Initech', value: 28000, stage: 'negotiation', owner: 'Carol' },\n    { name: 'Umbrella Co', value: 18000, stage: 'prospect', owner: 'Dan' }\n  ];\n  const [activeStage, setActiveStage] = createSignal('all');\n\n  return div({ class: css('_flex _col _gap4 _p4') },\n    h3({ class: css('_heading4') }, 'Pipeline'),\n    div({ class: css('_flex _gap3 _overflow[auto]') },\n      ...stages.map(s =>\n        div({ class: css('_flex _col _gap1 _p3 _b1 _r4 _minw[140px] _tc _pointer'),\n              onclick: () => setActiveStage(s.id) },\n          span({ class: css('_textsm _fgmuted') }, s.name),\n          Statistic({ value: s.value, prefix: '$' }),\n          Badge({ variant: 'default' }, `${s.count} deals`)\n        )\n      )\n    ),\n    Chart({ type: 'funnel', data: stages, x: 'name', y: 'value', title: 'Conversion Funnel', height: 260 }),\n    DataTable({\n      columns: [\n        { key: 'name', label: 'Deal', sortable: true },\n        { key: 'value', label: 'Value', sortable: true },\n        { key: 'stage', label: 'Stage' },\n        { key: 'owner', label: 'Owner' }\n      ],\n      data: () => activeStage() === 'all' ? items : items.filter(i => i.stage === activeStage()),\n      sortable: true, paginate: true\n    })\n  );\n}"
+  }
+}

package/src/registry/patterns/post-list.json

@@ -0,0 +1,27 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v1.json",
+  "id": "post-list",
+  "name": "Post List",
+  "description": "List of article preview cards with title, excerpt, author, date, and category. Used for blogs, news feeds, and content indexes.",
+  "components": ["Card", "Card.Body", "Avatar", "Badge", "Chip", "Pagination", "Button"],
+  "default_blend": {
+    "layout": "stack",
+    "atoms": "_flex _flexCol _gap4 _p4",
+    "slots": {
+      "category-filter": "Optional row of Chip filters at top for filtering by topic",
+      "posts": "Card list with each Card.Body containing title, excerpt, Avatar author, date Badge, and category Chip",
+      "pagination": "Bottom pagination controls or load-more Button via _flex _justifyCenter"
+    }
+  },
+  "recipe_overrides": {
+    "command-center": {
+      "wrapper": "cc-frame",
+      "atoms": "cc-scanline",
+      "notes": "Category pills use cc-label. Post dates use cc-data. Featured posts get cc-glow border. List area uses cc-scanline."
+    }
+  },
+  "code": {
+    "imports": "import { tags } from 'decantr/tags';\nimport { css } from 'decantr/css';\nimport { Card, Badge, Avatar } from 'decantr/components';\nimport { link } from 'decantr/router';",
+    "example": "function PostList() {\n  const { div, h3, p, span, time } = tags;\n  const posts = [\n    { slug: 'design-systems', category: 'Design', readTime: '5 min', title: 'Building Design Systems at Scale', excerpt: 'How to create and maintain design systems that grow with your organization.', author: { avatar: '', name: 'Alice Chen' }, date: 'Mar 10, 2026' },\n    { slug: 'reactive-state', category: 'Engineering', readTime: '8 min', title: 'Reactive State Management Patterns', excerpt: 'Exploring signals, stores, and effects for predictable UI state.', author: { avatar: '', name: 'Bob Patel' }, date: 'Mar 8, 2026' },\n    { slug: 'accessibility', category: 'Design', readTime: '6 min', title: 'Accessibility Beyond Compliance', excerpt: 'Moving past checklists to create truly inclusive experiences.', author: { avatar: '', name: 'Carol Liu' }, date: 'Mar 5, 2026' }\n  ];\n\n  return div({ class: css('_flex _col _gap4 _p4') },\n    ...posts.map(post =>\n      link({ href: `/blog/${post.slug}`, class: css('_nounder') },\n        Card({ class: css('_flex _col _gap3') },\n          Card.Body({},\n            div({ class: css('_flex _aic _gap2 _mb2') },\n              Badge({}, post.category),\n              span({ class: css('_textxs _fgmuted') }, post.readTime)\n            ),\n            h3({ class: css('_heading5') }, post.title),\n            p({ class: css('_textsm _fgmuted _clamp2') }, post.excerpt),\n            div({ class: css('_flex _aic _gap2 _mt3') },\n              Avatar({ src: post.author.avatar, name: post.author.name, size: 'sm' }),\n              span({ class: css('_textsm') }, post.author.name),\n              time({ class: css('_textsm _fgmuted _mla') }, post.date)\n            )\n          )\n        )\n      )\n    )\n  );\n}"
+  }
+}

package/src/registry/patterns/pricing-table.json

@@ -0,0 +1,32 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v1.json",
+  "id": "pricing-table",
+  "name": "Pricing Table",
+  "description": "Comparison pricing cards with features list, pricing tiers, and CTA buttons.",
+  "components": ["Card", "Button", "Badge", "Separator", "List"],
+  "default_blend": {
+    "layout": "grid",
+    "atoms": "_grid _gc3 _gap6 _aic",
+    "slots": {
+      "pricing-card": "Card per tier with price, name, and highlighted Badge",
+      "features-list": "Checklist of included features separated by Separator",
+      "cta": "Primary action Button per pricing tier"
+    }
+  },
+  "recipe_overrides": {
+    "auradecantism": {
+      "wrapper": "",
+      "atoms": "",
+      "notes": "Featured plan card uses d-glass-strong. Plan name uses d-gradient-text. CTA button on featured plan gets aura-glow."
+    },
+    "clean": {
+      "wrapper": "",
+      "atoms": "",
+      "notes": "Standard card layout. Featured plan has primary border. No extra decoration."
+    }
+  },
+  "code": {
+    "imports": "import { tags } from 'decantr/tags';\nimport { css } from 'decantr/css';\nimport { Card, Button, Badge, Separator, icon } from 'decantr/components';",
+    "example": "function PricingTable() {\n  const { div, span, h3, ul, li } = tags;\n  const plans = [\n    { name: 'Starter', price: 9, featured: false, features: ['5 projects', '1 GB storage', 'Email support'] },\n    { name: 'Pro', price: 29, featured: true, features: ['Unlimited projects', '10 GB storage', 'Priority support', 'API access', 'Custom domain'] },\n    { name: 'Enterprise', price: 99, featured: false, features: ['Everything in Pro', '100 GB storage', 'Dedicated support', 'SSO', 'Audit logs', 'SLA'] }\n  ];\n\n  return div({ class: css('_grid _gc3 _gap6 _p4 _aic') },\n    ...plans.map(plan =>\n      Card({ class: css(plan.featured ? '_b2 _bcprimary' : '') },\n        Card.Header({ class: css('_tc') },\n          plan.featured ? Badge({ variant: 'primary', class: css('_mb2') }, 'Popular') : null,\n          h3({ class: css('_heading4') }, plan.name),\n          div({ class: css('_mt2') },\n            span({ class: css('_heading1') }, `$${plan.price}`),\n            span({ class: css('_fgmuted') }, '/month')\n          )\n        ),\n        Separator(),\n        Card.Body({},\n          ul({ class: css('_flex _col _gap2') },\n            ...plan.features.map(f =>\n              li({ class: css('_flex _aic _gap2 _textsm') }, icon('check', { class: css('_fgsuccess') }), f)\n            )\n          )\n        ),\n        Card.Footer({},\n          Button({ variant: plan.featured ? 'primary' : 'outline', class: css('_wfull') }, 'Get Started')\n        )\n      )\n    )\n  );\n}"
+  }
+}

package/src/registry/patterns/scorecard.json

@@ -0,0 +1,28 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v1.json",
+  "id": "scorecard",
+  "name": "Scorecard",
+  "description": "Grouped metric tracking grid for OKR, initiative, or performance review tracking. Rows grouped by category, each showing metric label, current value, target, progress bar, status badge, and optional owner.",
+  "components": ["DataTable", "Progress", "Badge", "Text", "Separator", "Avatar"],
+  "default_blend": {
+    "layout": "stack",
+    "atoms": "_flex _flexCol _gap6 _p4",
+    "slots": {
+      "header": "Section title with _heading4, period selector, export Button",
+      "groups": "Repeating group sections separated by Separator. Category heading (Text _heading5) + metric rows",
+      "metric-row": "Each row: label, current value, target, Progress bar, delta Badge (ahead/behind), optional Avatar owner",
+      "footer": "Overall score summary or aggregate progress"
+    }
+  },
+  "recipe_overrides": {
+    "command-center": {
+      "wrapper": "cc-frame",
+      "atoms": "cc-scanline",
+      "notes": "Group headers use cc-bar with cc-label. Metric values use cc-data. Behind-target rows get cc-glow warning. Progress bars use cc-bar."
+    }
+  },
+  "code": {
+    "imports": "import { tags } from 'decantr/tags';\nimport { css } from 'decantr/css';\nimport { Statistic, Progress, Badge } from 'decantr/components';",
+    "example": "function Scorecard() {\n  const { div, h3, span } = tags;\n  const groups = [\n    { name: 'Revenue', metrics: [\n      { label: 'Monthly Revenue', value: 142, target: 150, unit: 'K', status: 'on-track' },\n      { label: 'ARR Growth', value: 24, target: 30, unit: '%', status: 'behind' }\n    ]},\n    { name: 'Product', metrics: [\n      { label: 'Active Users', value: 84, target: 100, unit: 'K', status: 'at-risk' },\n      { label: 'NPS Score', value: 72, target: 75, unit: '', status: 'on-track' }\n    ]}\n  ];\n\n  return div({ class: css('_flex _col _gap6 _p4') },\n    ...groups.map(group =>\n      div({ class: css('_flex _col _gap3') },\n        h3({ class: css('_heading5') }, group.name),\n        div({ class: css('_grid _gc3 _gap4') },\n          ...group.metrics.map(m =>\n            div({ class: css('_flex _col _gap2 _p4 _b1 _r4') },\n              div({ class: css('_flex _aic _jcsb') },\n                span({ class: css('_textsm _bold') }, m.label),\n                Badge({ variant: m.status === 'on-track' ? 'success' : m.status === 'behind' ? 'error' : 'warning' }, m.status)\n              ),\n              Statistic({ value: m.value, suffix: m.unit }),\n              Progress({ value: (m.value / m.target) * 100 }),\n              span({ class: css('_textxs _fgmuted') }, `Target: ${m.target}${m.unit}`)\n            )\n          )\n        )\n      )\n    )\n  );\n}"
+  }
+}

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

@@ -0,0 +1,20 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v1.json",
+  "id": "search-bar",
+  "name": "Search Bar",
+  "description": "Search input with optional filters and real-time suggestions.",
+  "components": ["Input", "Button", "Dropdown"],
+  "default_blend": {
+    "layout": "row",
+    "atoms": "_flex _gap2 _aic",
+    "slots": {
+      "search-input": "Primary search Input with icon and placeholder",
+      "filter-controls": "Optional filter Buttons or Dropdown toggles",
+      "suggestions": "Real-time suggestion list below the input"
+    }
+  },
+  "code": {
+    "imports": "import { tags } from 'decantr/tags';\nimport { createSignal } from 'decantr/state';\nimport { css } from 'decantr/css';\nimport { Input, Button, icon } from 'decantr/components';",
+    "example": "function SearchBar() {\n  const { div } = tags;\n  const [query, setQuery] = createSignal('');\n\n  return div({ class: css('_flex _gap2 _aic') },\n    Input({\n      placeholder: 'Search...',\n      value: query,\n      onchange: e => setQuery(e.target.value),\n      class: css('_flex1')\n    }),\n    Button({ variant: 'primary' }, icon('search'), 'Search')\n  );\n}"
+  }
+}

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

@@ -0,0 +1,19 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v1.json",
+  "id": "specimen-grid",
+  "name": "Specimen Grid",
+  "description": "Auto-fill grid of design specimens — atom previews, icon tiles, color swatches. Each cell shows a labeled visual sample.",
+  "components": ["Card", "Badge", "Chip"],
+  "default_blend": {
+    "layout": "grid",
+    "atoms": "_grid _gcaf180 _gap3",
+    "slots": {
+      "specimen-card": "Individual specimen cell with preview area + name label + optional value",
+      "filter-bar": "Optional filter Input at top to narrow visible specimens"
+    }
+  },
+  "code": {
+    "imports": "import { tags } from 'decantr/tags';\nimport { css } from 'decantr/css';\nimport { Card } from 'decantr/components';",
+    "example": "function SpecimenGrid() {\n  const { div, span, code } = tags;\n  const specimens = [\n    { name: 'Primary', value: '--d-primary', style: 'background:var(--d-primary)', preview: null },\n    { name: 'Secondary', value: '--d-secondary', style: 'background:var(--d-secondary)', preview: null },\n    { name: 'Accent', value: '--d-accent', style: 'background:var(--d-accent)', preview: null },\n    { name: 'Muted', value: '--d-muted', style: 'background:var(--d-muted)', preview: null },\n    { name: 'Background', value: '--d-bg', style: 'background:var(--d-bg)', preview: null },\n    { name: 'Surface', value: '--d-surface-0', style: 'background:var(--d-surface-0)', preview: null }\n  ];\n\n  return div({ class: css('_grid _gcaf200 _gap4 _p4') },\n    ...specimens.map(s =>\n      Card({ class: css('_flex _col') },\n        div({ class: css('_flex _center _p6 _bgmuted _r4'), style: s.style },\n          s.preview\n        ),\n        Card.Body({ class: css('_flex _col _gap1') },\n          span({ class: css('_textsm _bold') }, s.name),\n          code({ class: css('_textxs _fgmuted _fontmono') }, s.value)\n        )\n      )\n    )\n  );\n}"
+  }
+}

package/src/registry/patterns/stat-card.json

@@ -0,0 +1,55 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "id": "stat-card",
+  "name": "Stat Card",
+  "description": "Compact grid of key statistics displayed in a Card. Used for nutrition facts, project metrics, and summary data blocks.",
+  "components": ["Card", "Card.Header", "Card.Body", "Statistic", "icon"],
+  "default_preset": "compact-grid",
+  "presets": {
+    "compact-grid": {
+      "description": "2x2 grid of Statistic items inside a Card. For nutrition facts, key metrics summaries.",
+      "components": ["Card", "Card.Header", "Card.Body", "Statistic", "icon"],
+      "blend": {
+        "layout": "grid",
+        "atoms": "_grid _gc2 _gap3",
+        "slots": {
+          "header": "Card.Header with title",
+          "stats": "2x2 grid of Statistic components with icon, value, and unit"
+        }
+      },
+      "code": {
+        "imports": "import { tags } from 'decantr/tags';\nimport { css } from 'decantr/css';\nimport { Card, Statistic, icon } from 'decantr/components';",
+        "example": "function StatCard({ title, stats }) {\n  const { div, h3 } = tags;\n\n  return Card({},\n    Card.Header({},\n      h3({ class: css('_heading5') }, icon('heart-pulse'), ` ${title}`)\n    ),\n    Card.Body({ class: css('_grid _gc2 _gap3') },\n      ...stats.map(s =>\n        Statistic({ label: s.label, value: s.value, suffix: s.unit })\n      )\n    )\n  );\n}"
+      }
+    }
+  },
+  "default_blend": {
+    "layout": "grid",
+    "atoms": "_grid _gc2 _gap3",
+    "slots": {
+      "header": "Card.Header with title",
+      "stats": "Grid of Statistic components"
+    }
+  },
+  "recipe_overrides": {
+    "command-center": {
+      "wrapper": "cc-frame-sm",
+      "atoms": "",
+      "notes": "Card uses cc-frame-sm. Values use cc-data with cc-glow on high values."
+    },
+    "auradecantism": {
+      "wrapper": "d-glass",
+      "atoms": "_r4",
+      "notes": "Card on glass background. Values use d-gradient-text."
+    },
+    "clean": {
+      "wrapper": "",
+      "atoms": "_b1 _r4",
+      "notes": "Simple bordered card with clean stat display."
+    }
+  },
+  "code": {
+    "imports": "import { tags } from 'decantr/tags';\nimport { css } from 'decantr/css';\nimport { Card, Statistic, icon } from 'decantr/components';",
+    "example": "function StatCard({ title, stats }) {\n  const { div, h3 } = tags;\n\n  return Card({},\n    Card.Header({},\n      h3({ class: css('_heading5') }, icon('heart-pulse'), ` ${title}`)\n    ),\n    Card.Body({ class: css('_grid _gc2 _gap3') },\n      Statistic({ label: 'Calories', value: 450, suffix: ' kcal' }),\n      Statistic({ label: 'Protein', value: 32, suffix: 'g' }),\n      Statistic({ label: 'Carbs', value: 48, suffix: 'g' }),\n      Statistic({ label: 'Fat', value: 18, suffix: 'g' })\n    )\n  );\n}"
+  }
+}

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

@@ -0,0 +1,55 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "id": "stats-bar",
+  "name": "Stats Bar",
+  "description": "Horizontal stats row showing key metrics with icon + label + value pairs and action buttons. Used for recipe details, project summaries, and content metadata.",
+  "components": ["Button", "Separator", "Badge", "icon"],
+  "default_preset": "default",
+  "presets": {
+    "default": {
+      "description": "Horizontal row of icon + label + value pairs with action buttons on the right.",
+      "components": ["Button", "Separator", "Badge", "icon"],
+      "blend": {
+        "layout": "stack",
+        "atoms": "_flex _aic _jcsb _gap4 _py3 _px4 _borderb _bordert",
+        "slots": {
+          "stats": "Horizontal row of icon + label + value pairs separated by vertical Separators",
+          "actions": "Action buttons on the right side (bookmark, share, etc.)"
+        }
+      },
+      "code": {
+        "imports": "import { tags } from 'decantr/tags';\nimport { css } from 'decantr/css';\nimport { Button, Badge, Separator, icon } from 'decantr/components';",
+        "example": "function StatsBar({ stats, actions }) {\n  const { div, span } = tags;\n\n  const stat = (ic, label, value) =>\n    div({ class: css('_flex _aic _gap2') },\n      icon(ic),\n      span({ class: css('_textsm _fgmuted') }, label),\n      span({ class: css('_textsm _fontBold') }, value)\n    );\n\n  return div({ class: css('_flex _aic _jcsb _gap4 _py3 _px4 _bordert _borderb') },\n    div({ class: css('_flex _aic _gap6') },\n      stat('timer', 'Prep', '15 min'),\n      Separator({ orientation: 'vertical' }),\n      stat('flame', 'Cook', '30 min'),\n      Separator({ orientation: 'vertical' }),\n      stat('users', 'Servings', '4'),\n      Separator({ orientation: 'vertical' }),\n      Badge({ variant: 'success' }, 'Easy')\n    ),\n    div({ class: css('_flex _gap2') },\n      Button({ variant: 'outline', size: 'sm' }, icon('git-fork'), 'Fork'),\n      Button({ variant: 'outline', size: 'sm' }, icon('bookmark'), 'Save'),\n      Button({ variant: 'outline', size: 'sm' }, icon('share'), 'Share')\n    )\n  );\n}"
+      }
+    }
+  },
+  "default_blend": {
+    "layout": "stack",
+    "atoms": "_flex _aic _jcsb _gap4 _py3 _px4 _borderb _bordert",
+    "slots": {
+      "stats": "Horizontal row of icon + label + value pairs",
+      "actions": "Action buttons"
+    }
+  },
+  "recipe_overrides": {
+    "command-center": {
+      "wrapper": "cc-bar",
+      "atoms": "",
+      "notes": "Stats use cc-data styling. Action buttons use cc-glow. Badge uses cc-label."
+    },
+    "auradecantism": {
+      "wrapper": "d-glass",
+      "atoms": "_r4",
+      "notes": "Stats bar on glass background. Values use d-gradient-text for emphasis."
+    },
+    "clean": {
+      "wrapper": "",
+      "atoms": "_bgmuted _r4",
+      "notes": "Simple bordered stats row on muted background. Standard icon + text pairs."
+    }
+  },
+  "code": {
+    "imports": "import { tags } from 'decantr/tags';\nimport { css } from 'decantr/css';\nimport { Button, Badge, Separator, icon } from 'decantr/components';",
+    "example": "function StatsBar({ stats, actions }) {\n  const { div, span } = tags;\n\n  const stat = (ic, label, value) =>\n    div({ class: css('_flex _aic _gap2') },\n      icon(ic),\n      span({ class: css('_textsm _fgmuted') }, label),\n      span({ class: css('_textsm _fontBold') }, value)\n    );\n\n  return div({ class: css('_flex _aic _jcsb _gap4 _py3 _px4 _bordert _borderb') },\n    div({ class: css('_flex _aic _gap6') },\n      stat('timer', 'Prep', '15 min'),\n      Separator({ orientation: 'vertical' }),\n      stat('flame', 'Cook', '30 min')\n    ),\n    div({ class: css('_flex _gap2') },\n      Button({ variant: 'outline', size: 'sm' }, icon('bookmark'), 'Save'),\n      Button({ variant: 'outline', size: 'sm' }, icon('share'), 'Share')\n    )\n  );\n}"
+  }
+}

package/src/registry/patterns/steps-card.json

@@ -0,0 +1,55 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "id": "steps-card",
+  "name": "Steps Card",
+  "description": "Numbered step-by-step instructions displayed in a Card. Each step has a circle number badge, text content, and optional timer/metadata.",
+  "components": ["Card", "Card.Header", "Card.Body", "Badge", "icon"],
+  "default_preset": "default",
+  "presets": {
+    "default": {
+      "description": "Ordered list of steps, each with circle Badge number, text, and optional timer.",
+      "components": ["Card", "Card.Header", "Card.Body", "Badge", "icon"],
+      "blend": {
+        "layout": "stack",
+        "atoms": "_flex _col _gap0",
+        "slots": {
+          "header": "Card.Header with title and step count",
+          "steps": "Ordered list of steps, each with circle Badge number, text, and optional timer icon"
+        }
+      },
+      "code": {
+        "imports": "import { tags } from 'decantr/tags';\nimport { css } from 'decantr/css';\nimport { Card, Badge, icon } from 'decantr/components';",
+        "example": "function StepsCard({ title, steps }) {\n  const { div, h3, p, span } = tags;\n\n  return Card({},\n    Card.Header({},\n      div({ class: css('_flex _aic _jcsb') },\n        h3({ class: css('_heading5') }, icon('chef-hat'), ` ${title}`),\n        span({ class: css('_textsm _fgmuted') }, `${steps.length} steps`)\n      )\n    ),\n    Card.Body({ class: css('_flex _col _gap4') },\n      ...steps.map((step, i) =>\n        div({ class: css('_flex _gap3') },\n          Badge({ variant: 'outline', class: css('_rfull _w[32px] _h[32px] _flex _aic _jcc _shrink0') }, `${i + 1}`),\n          div({ class: css('_flex _col _gap1 _flex1') },\n            p({}, step.text),\n            step.time ? span({ class: css('_textsm _fgmuted') }, icon('timer'), ` ${step.time} min`) : null\n          )\n        )\n      )\n    )\n  );\n}"
+      }
+    }
+  },
+  "default_blend": {
+    "layout": "stack",
+    "atoms": "_flex _col _gap0",
+    "slots": {
+      "header": "Card.Header with title and step count",
+      "steps": "Ordered list of steps with numbered badges"
+    }
+  },
+  "recipe_overrides": {
+    "command-center": {
+      "wrapper": "cc-frame-sm",
+      "atoms": "",
+      "notes": "Card uses cc-frame-sm. Step badges use cc-glow. Timer indicators use cc-data."
+    },
+    "auradecantism": {
+      "wrapper": "d-glass",
+      "atoms": "_r4",
+      "notes": "Card on glass background. Step numbers use d-gradient-text. Active step highlighted."
+    },
+    "clean": {
+      "wrapper": "",
+      "atoms": "_b1 _r4",
+      "notes": "Simple bordered card. Circle number badges with muted background."
+    }
+  },
+  "code": {
+    "imports": "import { tags } from 'decantr/tags';\nimport { css } from 'decantr/css';\nimport { Card, Badge, icon } from 'decantr/components';",
+    "example": "function StepsCard({ title, steps }) {\n  const { div, h3, p, span } = tags;\n\n  return Card({},\n    Card.Header({},\n      div({ class: css('_flex _aic _jcsb') },\n        h3({ class: css('_heading5') }, icon('chef-hat'), ` ${title}`),\n        span({ class: css('_textsm _fgmuted') }, `${steps.length} steps`)\n      )\n    ),\n    Card.Body({ class: css('_flex _col _gap4') },\n      ...steps.map((step, i) =>\n        div({ class: css('_flex _gap3') },\n          Badge({ variant: 'outline', class: css('_rfull _w[32px] _h[32px] _flex _aic _jcc _shrink0') }, `${i + 1}`),\n          div({ class: css('_flex _col _gap1 _flex1') },\n            p({}, step.text),\n            step.time ? span({ class: css('_textsm _fgmuted') }, icon('timer'), ` ${step.time} min`) : null\n          )\n        )\n      )\n    )\n  );\n}"
+  }
+}

package/src/registry/patterns/table-of-contents.json

@@ -0,0 +1,19 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v1.json",
+  "id": "table-of-contents",
+  "name": "Table of Contents",
+  "description": "Hierarchical content navigation with active state tracking and scroll spy.",
+  "components": ["List", "Link"],
+  "default_blend": {
+    "layout": "stack",
+    "atoms": "_flex _col _gap1 _sticky _top4",
+    "slots": {
+      "toc-list": "Nested list of section headings with indentation levels",
+      "toc-item": "Individual heading link with active state highlight"
+    }
+  },
+  "code": {
+    "imports": "import { tags } from 'decantr/tags';\nimport { createSignal } from 'decantr/state';\nimport { css } from 'decantr/css';",
+    "example": "function TableOfContents() {\n  const { nav, ul, li, a } = tags;\n  const headings = [\n    { id: 'introduction', text: 'Introduction' },\n    { id: 'getting-started', text: 'Getting Started' },\n    { id: 'configuration', text: 'Configuration' },\n    { id: 'api-reference', text: 'API Reference' },\n    { id: 'examples', text: 'Examples' }\n  ];\n  const [activeId] = createSignal('introduction');\n\n  return nav({ class: css('_flex _col _gap1 _p4 _sticky _top0') },\n    ul({ class: css('_flex _col _gap1 _borderL') },\n      ...headings.map(h =>\n        li({},\n          a({\n            href: `#${h.id}`,\n            class: css(`_flex _py1 _pl4 _textsm _nounder _trans ${activeId() === h.id ? '_fgprimary _bold _borderL _bcprimary' : '_fgmuted'}`)\n          }, h.text)\n        )\n      )\n    )\n  );\n}"
+  }
+}

package/src/registry/patterns/testimonials.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v1.json",
+  "id": "testimonials",
+  "name": "Testimonials",
+  "description": "Customer testimonial cards in a responsive grid with avatar, quote, and attribution.",
+  "components": ["Card", "Avatar", "Badge", "Text"],
+  "default_blend": {
+    "layout": "grid",
+    "atoms": "_grid _gc3 _gap6 _py8",
+    "slots": {
+      "testimonial-card": "Card container for each testimonial entry",
+      "avatar": "Avatar image of the testimonial author",
+      "quote": "Quoted text content of the testimonial",
+      "attribution": "Author name, role, and optional company badge"
+    }
+  },
+  "code": {
+    "imports": "import { tags } from 'decantr/tags';\nimport { css } from 'decantr/css';\nimport { Card, Avatar } from 'decantr/components';",
+    "example": "function Testimonials() {\n  const { div, p, span } = tags;\n  const items = [\n    { quote: 'This product transformed our workflow completely.', avatar: '', name: 'Sarah Johnson', role: 'CTO at TechCorp' },\n    { quote: 'The best investment we made this year.', avatar: '', name: 'Mike Chen', role: 'Product Lead at Acme' },\n    { quote: 'Incredible support team and amazing features.', avatar: '', name: 'Lisa Park', role: 'Engineering Manager at Globex' }\n  ];\n\n  return div({ class: css('_grid _gc3 _gap4 _p4') },\n    ...items.map(t =>\n      Card({ class: css('_flex _col _gap4') },\n        Card.Body({},\n          p({ class: css('_italic _fgmuted') }, `\\\"${t.quote}\\\"`),\n          div({ class: css('_flex _aic _gap3 _mt3') },\n            Avatar({ src: t.avatar, name: t.name }),\n            div({},\n              span({ class: css('_textsm _bold') }, t.name),\n              span({ class: css('_textxs _fgmuted _block') }, t.role)\n            )\n          )\n        )\n      )\n    )\n  );\n}"
+  }
+}

package/src/registry/patterns/timeline.json

@@ -0,0 +1,27 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v1.json",
+  "id": "timeline",
+  "name": "Timeline",
+  "description": "Vertical timeline of events with dates, descriptions, and status icons. Used for changelogs, order tracking, project milestones, and historical records.",
+  "components": ["Timeline", "Card", "Card.Body", "Badge", "Avatar", "icon", "Separator"],
+  "default_blend": {
+    "layout": "stack",
+    "atoms": "_flex _flexCol _gap0 _p4 _relative",
+    "slots": {
+      "header": "Optional section title with _heading4 and date range filter",
+      "event": "Repeating item: icon dot on vertical line + Card with date (_caption cc-data), title (_heading6), description (_body), and optional Badge status",
+      "connector": "Vertical line connecting events via absolute-positioned border-left on the timeline track"
+    }
+  },
+  "recipe_overrides": {
+    "command-center": {
+      "wrapper": "cc-frame",
+      "atoms": "cc-scanline",
+      "notes": "Timeline connector line uses cc-glow subtle. Event dots use cc-glow for completed items. Dates use cc-data. Event titles use cc-label. Background uses cc-scanline."
+    }
+  },
+  "code": {
+    "imports": "import { tags } from 'decantr/tags';\nimport { css } from 'decantr/css';\nimport { Badge } from 'decantr/components';",
+    "example": "function TimelinePattern() {\n  const { div, span, h4, p, time } = tags;\n  const events = [\n    { title: 'Project launched', status: 'completed', description: 'Initial release deployed to production.', date: 'Mar 1, 2026' },\n    { title: 'Beta testing', status: 'completed', description: 'Invited 500 users for beta feedback.', date: 'Feb 15, 2026' },\n    { title: 'Design review', status: 'completed', description: 'Final design review with stakeholders.', date: 'Feb 1, 2026' },\n    { title: 'Development started', status: null, description: 'Sprint 1 kicked off with core features.', date: 'Jan 15, 2026' }\n  ];\n\n  return div({ class: css('_flex _col _gap0 _p4 _borderL _ml4') },\n    ...events.map(e =>\n      div({ class: css('_flex _gap4 _pb6 _relative') },\n        div({ class: css('_absolute _left[-9px] _w[16px] _h[16px] _r[9999px] _bgprimary _b2 _bcborder') }),\n        div({ class: css('_flex _col _gap1 _pl4') },\n          div({ class: css('_flex _aic _gap2') },\n            h4({ class: css('_textsm _bold') }, e.title),\n            e.status ? Badge({ variant: e.status === 'completed' ? 'success' : 'default', size: 'sm' }, e.status) : null\n          ),\n          p({ class: css('_textsm _fgmuted') }, e.description),\n          time({ class: css('_textxs _fgmuted') }, e.date)\n        )\n      )\n    )\n  );\n}"
+  }
+}

package/src/registry/patterns/token-inspector.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v1.json",
+  "id": "token-inspector",
+  "name": "Token Inspector",
+  "description": "Live design token visualization grouped by category — color swatches, typography samples, spacing bars, elevation boxes. Values update reactively when style or mode changes.",
+  "components": ["Card", "Separator"],
+  "default_blend": {
+    "layout": "stack",
+    "atoms": "_flex _col _gap8",
+    "slots": {
+      "section-block": "Per-category section with title and rendered token visualizations",
+      "swatch-grid": "Grid of color swatches for palette/neutral/surface tokens",
+      "type-samples": "Stacked typography samples at each scale",
+      "spacing-bars": "Horizontal bars showing spacing token values"
+    }
+  },
+  "code": {
+    "imports": "import { tags } from 'decantr/tags';\nimport { css } from 'decantr/css';\nimport { Card } from 'decantr/components';",
+    "example": "function TokenInspector() {\n  const { div, span, code } = tags;\n  const tokens = {\n    'Colors': [\n      { variable: '--d-primary', computed: '#6366f1' },\n      { variable: '--d-secondary', computed: '#8b5cf6' },\n      { variable: '--d-bg', computed: '#09090b' },\n      { variable: '--d-fg', computed: '#fafafa' }\n    ],\n    'Surfaces': [\n      { variable: '--d-surface-0', computed: '#18181b' },\n      { variable: '--d-surface-1', computed: '#27272a' },\n      { variable: '--d-surface-2', computed: '#3f3f46' }\n    ]\n  };\n\n  return div({ class: css('_flex _col _gap4 _p4') },\n    ...Object.entries(tokens).map(([category, items]) =>\n      div({ class: css('_flex _col _gap2') },\n        span({ class: css('_heading5') }, category),\n        div({ class: css('_grid _gc3 _gap3') },\n          ...items.map(t =>\n            Card({ class: css('_flex _aic _gap3 _p3') },\n              div({ class: css('_w[40px] _h[40px] _r4 _b1'), style: `background:var(${t.variable})` }),\n              div({ class: css('_flex _col') },\n                code({ class: css('_textsm _fontmono') }, t.variable),\n                span({ class: css('_textxs _fgmuted') }, t.computed)\n              )\n            )\n          )\n        )\n      )\n    )\n  );\n}"
+  }
+}

package/src/registry/patterns/wizard.json

@@ -0,0 +1,27 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v1.json",
+  "id": "wizard",
+  "name": "Wizard",
+  "description": "Multi-step form with progress indicator and prev/next navigation. Each step contains a form section with validation before advancing.",
+  "components": ["Button", "Progress", "Input", "Select", "Checkbox", "Switch", "Separator"],
+  "default_blend": {
+    "layout": "stack",
+    "atoms": "_flex _flexCol _gap6 _p6 _mxAuto",
+    "slots": {
+      "progress": "Step indicator using Progress or numbered Breadcrumb-style dots with _flex _gap2 _justifyCenter",
+      "step-content": "Active step form fields, swapped via cond(). Each step is a form-sections pattern subset",
+      "navigation": "Bottom bar with prev/next Buttons via _flex _justifyBetween, separated by Separator"
+    }
+  },
+  "recipe_overrides": {
+    "command-center": {
+      "wrapper": "cc-frame",
+      "atoms": "cc-grid",
+      "notes": "Step indicator uses cc-bar with cc-data for step numbers. Active step gets cc-glow. Navigation bar uses cc-bar. Background uses cc-grid."
+    }
+  },
+  "code": {
+    "imports": "import { tags } from 'decantr/tags';\nimport { createSignal } from 'decantr/state';\nimport { css } from 'decantr/css';\nimport { Steps, Button, Card } from 'decantr/components';",
+    "example": "function Wizard() {\n  const { div, p } = tags;\n  const steps = [\n    { title: 'Account', content: () => div({ class: css('_flex _col _gap3 _p4') }, p({}, 'Enter your account details.')) },\n    { title: 'Profile', content: () => div({ class: css('_flex _col _gap3 _p4') }, p({}, 'Complete your profile information.')) },\n    { title: 'Confirm', content: () => div({ class: css('_flex _col _gap3 _p4') }, p({}, 'Review and confirm your details.')) }\n  ];\n  const [current, setCurrent] = createSignal(0);\n\n  return Card({ class: css('_flex _col _gap6 _p6') },\n    Steps({ current: current, items: steps.map(s => ({ title: s.title })) }),\n    div({ class: css('_flex _col _gap4 _py4') },\n      steps[current()]?.content()\n    ),\n    div({ class: css('_flex _jcsb') },\n      current() > 0\n        ? Button({ variant: 'outline', onclick: () => setCurrent(current() - 1) }, 'Back')\n        : div(),\n      current() < steps.length - 1\n        ? Button({ variant: 'primary', onclick: () => setCurrent(current() + 1) }, 'Next')\n        : Button({ variant: 'primary', onclick: () => {} }, 'Submit')\n    )\n  );\n}"
+  }
+}

package/src/registry/recipe-auradecantism.json

@@ -0,0 +1,69 @@
+{
+  "$schema": "https://decantr.ai/schemas/recipe.v1.json",
+  "id": "auradecantism",
+  "name": "Auradecantism",
+  "style": "auradecantism",
+  "mode": "dark",
+  "description": "Luminous glass visual language. Mesh gradient backgrounds, frosted glass surfaces, gradient text, vibrant purple/cyan/pink palette, pill radius, bouncy motion. The signature Decantr aesthetic.",
+  "setup": "import { setStyle, setMode } from 'decantr/css';\nsetStyle('auradecantism');\nsetMode('dark');",
+  "decorators": {
+    "d-mesh": "Radial mesh gradient background with pink, cyan, and purple overlays. Apply to page-level containers.",
+    "d-glass": "Frosted glass panel — backdrop-blur, semi-transparent bg, subtle border highlight. Apply to cards and panels.",
+    "d-glass-strong": "Stronger glass effect with more opacity and thicker blur. For elevated overlays and modals.",
+    "d-gradient-text": "Gradient text using primary brand colors (pink → cyan). Apply to headings and hero text.",
+    "d-gradient-text-alt": "Alternate gradient text (purple → pink → cyan). For secondary headings and accents.",
+    "aura-glow": "Soft glow shadow using primary color. Apply to featured cards or active elements.",
+    "aura-glow-strong": "Intense glow for hero KPIs and primary CTAs. 20px spread.",
+    "aura-ring": "Animated ring highlight on focus/active state. Pill-shaped glow border.",
+    "aura-orb": "Floating decorative gradient orb. Position absolutely as background decoration.",
+    "aura-shimmer": "Subtle shimmer animation across surface. Use sparingly for loading or premium feel."
+  },
+  "compositions": {
+    "panel": {
+      "description": "Glass panel with subtle border and backdrop blur.",
+      "example": "const { div, span } = tags;\ndiv({ class: css('d-glass _r4 _p0') },\n  div({ class: css('_flex _aic _jcsb _px4 _py3 _borderB') },\n    span({ class: css('_textsm _bold _fgmutedfg') }, 'PANEL TITLE')\n  ),\n  div({ class: css('_p4') },\n    // content here\n  )\n)"
+    },
+    "card": {
+      "wraps": "Card",
+      "description": "Card with glass surface and glow on hover.",
+      "example": "const { div } = tags;\ndiv({ class: css('d-glass _r4') },\n  Card({},\n    Card.Header({},\n      span({ class: css('_heading5') }, 'Feature')\n    ),\n    Card.Body({},\n      p({ class: css('_fgmuted') }, 'Description text here')\n    )\n  )\n)"
+    },
+    "kpi": {
+      "wraps": "Statistic",
+      "description": "KPI metric with glass background and gradient value text.",
+      "example": "const { div, span } = tags;\ndiv({ class: css('d-glass _r4 _p4') },\n  Statistic({\n    label: 'Total Revenue',\n    value: 2450000,\n    prefix: '$',\n    trend: 'up',\n    trendValue: '+18.2%',\n    class: css('_bg[transparent]')\n  }),\n  span({ class: css('d-gradient-text _textxs _bold') }, 'ALL TIME HIGH')\n)"
+    },
+    "table": {
+      "wraps": "DataTable",
+      "description": "DataTable with glass wrapper and subtle border.",
+      "example": "const { div, span } = tags;\ndiv({ class: css('d-glass _r4 _overflow[hidden]') },\n  div({ class: css('_flex _aic _jcsb _px4 _py3 _borderB') },\n    span({ class: css('_heading5') }, 'Transactions'),\n    span({ class: css('_textsm _fgmuted') }, '248 records')\n  ),\n  DataTable({ columns, data, sortable: true, paginate: true })\n)"
+    },
+    "form": {
+      "description": "Form in a glass card with gradient submit button.",
+      "example": "const { div, h2 } = tags;\ndiv({ class: css('d-glass _r4 _p6 _flex _col _gap4') },\n  h2({ class: css('d-gradient-text _heading4') }, 'Sign In'),\n  Input({ label: 'Email', type: 'email' }),\n  Input({ label: 'Password', type: 'password' }),\n  Button({ variant: 'primary', class: css('_wfull') }, 'Continue')\n)"
+    },
+    "sidebar": {
+      "description": "Glass sidebar with gradient brand and nav items.",
+      "example": "const { div, aside, nav, span } = tags;\naside({ class: css('d-glass _flex _col _h[100vh] _w[240px] _borderR _p3') },\n  span({ class: css('d-gradient-text _heading5 _mb6 _px3') }, 'Brand'),\n  nav({ class: css('_flex _col _gap1') },\n    // nav items with icon + label, _p2 _px3 _r4 _trans\n  )\n)"
+    },
+    "layout": {
+      "description": "Full page layout with mesh background, glass sidebar, and content area.",
+      "example": "const { div, main, header, span } = tags;\ndiv({ class: css('d-mesh _grid _h[100vh]'), style: 'grid-template-columns:240px 1fr' },\n  // glass sidebar\n  // ...,\n  div({ class: css('_flex _col _overflow[hidden]') },\n    header({ class: css('_flex _aic _jcsb _px6 _py3 _borderB d-glass') },\n      span({ class: css('_heading4') }, 'Dashboard')\n    ),\n    main({ class: css('_flex _col _gap4 _p6 _overflow[auto]') },\n      // page content\n    )\n  )\n)"
+    },
+    "alert": {
+      "wraps": "Alert",
+      "description": "Alert with glass background.",
+      "example": "const { div } = tags;\ndiv({ class: css('d-glass _r4') },\n  Alert({ variant: 'info' },\n    'Your subscription renews in 3 days.'\n  )\n)"
+    },
+    "modal": {
+      "wraps": "Modal",
+      "description": "Modal with strong glass backdrop and gradient title.",
+      "example": "const { div, h2 } = tags;\nModal({\n  visible: showModal,\n  onClose: () => setShowModal(false),\n  class: css('d-glass-strong _r4')\n},\n  h2({ class: css('d-gradient-text _heading4 _mb4') }, 'Confirm'),\n  div({ class: css('_flex _col _gap4 _p4') },\n    // modal content\n  )\n)"
+    },
+    "chart": {
+      "wraps": "Chart",
+      "description": "Chart in glass panel with gradient title.",
+      "example": "const { div, span } = tags;\ndiv({ class: css('d-glass _r4 _overflow[hidden]') },\n  div({ class: css('_flex _aic _jcsb _px4 _py3 _borderB') },\n    span({ class: css('d-gradient-text _bold') }, 'Revenue Trend'),\n    span({ class: css('_textxs _fgmuted') }, 'Last 30 days')\n  ),\n  Chart({ type: 'area', data: revenueData, x: 'date', y: 'amount', height: 300 })\n)"
+    }
+  }
+}