decantr 0.9.0

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

@@ -0,0 +1,37 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v1.json",
+  "id": "auth-form",
+  "name": "Auth Form",
+  "description": "Authentication form with login, registration, and password recovery flows. Centered card layout with branding and social auth options.",
+  "components": ["Input", "Button", "Card", "Card.Header", "Card.Body", "Card.Footer", "Separator"],
+  "default_blend": {
+    "layout": "stack",
+    "atoms": "_flex _flexCol _itemsCenter _justifyCenter _minHScreen _p6",
+    "slots": {
+      "branding": "Logo and app name at top with _heading4 _textCenter",
+      "form": "Input fields (email, password) inside a Card with validation and submit Button",
+      "footer": "Card.Footer with links to alternate flows (sign up / forgot password) and optional social auth Buttons separated by Separator"
+    }
+  },
+  "recipe_overrides": {
+    "command-center": {
+      "wrapper": "cc-frame-sm",
+      "atoms": "cc-grid",
+      "notes": "Card uses cc-frame-sm. Branding uses cc-label with cc-glow. Submit button gets cc-glow. Background uses cc-grid."
+    },
+    "auradecantism": {
+      "wrapper": "d-mesh",
+      "atoms": "",
+      "notes": "Auth page on d-mesh background. Card uses d-glass. Brand text uses d-gradient-text. Submit button prominent."
+    },
+    "clean": {
+      "wrapper": "",
+      "atoms": "_bgmuted",
+      "notes": "Simple centered card on muted background. Standard form styling."
+    }
+  },
+  "code": {
+    "imports": "import { tags } from 'decantr/tags';\nimport { createSignal } from 'decantr/state';\nimport { css } from 'decantr/css';\nimport { Input, Button, Card, Separator } from 'decantr/components';\nimport { link } from 'decantr/router';",
+    "example": "function AuthForm() {\n  const { div, h2, p, span } = tags;\n  const [email, setEmail] = createSignal('');\n  const [password, setPassword] = createSignal('');\n\n  return div({ class: css('_flex _col _aic _jcc _minhscreen _p6') },\n    Card({ class: css('_w[400px] _mw[100%]') },\n      Card.Header({},\n        h2({ class: css('_heading4 _tc') }, 'Sign In'),\n        p({ class: css('_fgmuted _tc _mt1') }, 'Enter your credentials to continue')\n      ),\n      Card.Body({ class: css('_flex _col _gap3') },\n        Input({ label: 'Email', type: 'email', placeholder: 'you@example.com', value: email, onchange: e => setEmail(e.target.value) }),\n        Input({ label: 'Password', type: 'password', placeholder: '••••••••', value: password, onchange: e => setPassword(e.target.value) }),\n        Button({ variant: 'primary', class: css('_wfull _mt2') }, 'Sign In')\n      ),\n      Card.Footer({ class: css('_flex _col _gap3 _aic') },\n        Separator(),\n        span({ class: css('_fgmuted _textsm') }, 'Don\\'t have an account? ', link({ href: '/register' }, 'Sign Up'))\n      )\n    )\n  );\n}"
+  }
+}

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

@@ -0,0 +1,20 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v1.json",
+  "id": "author-card",
+  "name": "Author Card",
+  "description": "Author attribution card with avatar, name, bio, and social links.",
+  "components": ["Card", "Avatar", "Badge", "Text", "Button"],
+  "default_blend": {
+    "layout": "row",
+    "atoms": "_flex _gap4 _aic _p4",
+    "slots": {
+      "avatar": "Author Avatar image",
+      "author-info": "Name, bio text, and optional role Badge",
+      "social-links": "Row of social link Buttons or icon links"
+    }
+  },
+  "code": {
+    "imports": "import { tags } from 'decantr/tags';\nimport { css } from 'decantr/css';\nimport { Avatar, Button, icon } from 'decantr/components';",
+    "example": "function AuthorCard() {\n  const { div, h3, p } = tags;\n  const author = {\n    avatar: '', name: 'Jane Doe',\n    bio: 'Senior Design Engineer focusing on design systems and component architecture.',\n    socials: [{ icon: 'github' }, { icon: 'twitter' }, { icon: 'linkedin' }]\n  };\n\n  return div({ class: css('_flex _gap4 _p4 _b1 _r4') },\n    Avatar({ src: author.avatar, name: author.name, size: 'lg' }),\n    div({ class: css('_flex _col _gap2 _flex1') },\n      h3({ class: css('_heading5') }, author.name),\n      p({ class: css('_textsm _fgmuted') }, author.bio),\n      div({ class: css('_flex _gap2 _mt1') },\n        ...author.socials.map(s =>\n          Button({ variant: 'ghost', size: 'sm' }, icon(s.icon))\n        )\n      )\n    )\n  );\n}"
+  }
+}

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

@@ -0,0 +1,127 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "id": "card-grid",
+  "name": "Card Grid",
+  "description": "Responsive grid of cards with configurable content. Supports product catalogs, recipe collections, feature showcases, and collection browsers via presets.",
+  "components": ["Card", "Card.Header", "Card.Body", "Card.Footer", "Button", "Badge", "icon"],
+  "default_preset": "product",
+  "presets": {
+    "product": {
+      "description": "Product cards with image, title, price, CTA. For e-commerce catalogs.",
+      "components": ["Card", "Card.Body", "Button", "Badge", "Image", "icon"],
+      "blend": {
+        "layout": "grid",
+        "atoms": "_grid _gc3 _gap6 _p4",
+        "slots": {
+          "card-image": "Product image in Card.Header with aspect ratio container",
+          "card-body": "Card.Body with product title (_heading6), description (_caption), price (_heading5)",
+          "card-footer": "Card.Footer with primary Button CTA and optional secondary action",
+          "badge": "Optional Badge overlay for sale/new/featured status"
+        }
+      },
+      "code": {
+        "imports": "import { tags } from 'decantr/tags';\nimport { css } from 'decantr/css';\nimport { Card, Badge, Button, Image } from 'decantr/components';",
+        "example": "function ProductGrid() {\n  const { div, span, h3 } = tags;\n  const products = [\n    { image: '/images/product-1.jpg', name: 'Wireless Headphones', badge: 'New', description: 'Premium noise-cancelling headphones.', price: 199.99 },\n    { image: '/images/product-2.jpg', name: 'Mechanical Keyboard', badge: null, description: 'RGB backlit mechanical keyboard.', price: 149.99 },\n    { image: '/images/product-3.jpg', name: 'USB-C Hub', badge: 'Sale', description: '7-in-1 USB-C hub with HDMI output.', price: 49.99 },\n    { image: '/images/product-4.jpg', name: 'Monitor Stand', badge: null, description: 'Adjustable aluminum monitor stand.', price: 79.99 }\n  ];\n\n  return div({ class: css('_grid _gcaf280 _gap4 _p4') },\n    ...products.map(p =>\n      Card({},\n        Image({ src: p.image, alt: p.name, class: css('_wfull _h[200px] _object[cover]') }),\n        Card.Body({ class: css('_flex _col _gap2') },\n          div({ class: css('_flex _aic _jcsb') },\n            h3({ class: css('_heading5') }, p.name),\n            p.badge ? Badge({ variant: 'accent' }, p.badge) : null\n          ),\n          span({ class: css('_fgmuted _textsm') }, p.description),\n          div({ class: css('_flex _aic _jcsb _mt2') },\n            span({ class: css('_heading4') }, `$${p.price}`),\n            Button({ variant: 'primary', size: 'sm' }, 'Add to Cart')\n          )\n        )\n      )\n    )\n  );\n}"
+      }
+    },
+    "content": {
+      "description": "Content cards with cover image, metadata, tags, and author attribution. For recipe/article feeds.",
+      "components": ["Card", "Card.Body", "Chip", "Avatar", "Badge", "icon"],
+      "blend": {
+        "layout": "grid",
+        "atoms": "_grid _gc3 _gap6 _p4",
+        "slots": {
+          "card-image": "Cover photo with aspect ratio container and optional Badge overlay",
+          "card-body": "Title (_heading5), truncated description (_caption _fgmuted), metadata row",
+          "card-tags": "Horizontal Chip row for tags",
+          "card-footer": "Author Avatar + name link, optional count"
+        }
+      },
+      "code": {
+        "imports": "import { tags } from 'decantr/tags';\nimport { css } from 'decantr/css';\nimport { Card, Chip, Avatar, Badge, icon } from 'decantr/components';",
+        "example": "function ContentCardGrid({ items }) {\n  const { div, span, h3, img } = tags;\n\n  return div({ class: css('_grid _gc3 _gap6 _p4') },\n    ...items.map(item =>\n      Card({},\n        img({ src: item.image, alt: item.title, class: css('_wfull _h[200px] _object[cover]') }),\n        Card.Body({ class: css('_flex _col _gap2') },\n          h3({ class: css('_heading5') }, item.title),\n          span({ class: css('_caption _fgmuted _lineClamp2') }, item.description),\n          div({ class: css('_flex _aic _gap3 _fgmuted _textsm') },\n            span({}, icon('clock'), ` ${item.time} min`),\n            span({}, icon('users'), ` ${item.servings} servings`)\n          ),\n          div({ class: css('_flex _gap1 _flexWrap') },\n            ...(item.tags || []).map(t => Chip({ size: 'sm' }, t))\n          ),\n          div({ class: css('_flex _aic _jcsb _mt2') },\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            span({ class: css('_textsm _fgmuted') }, icon('git-fork'), ` ${item.forks || 0}`)\n          )\n        )\n      )\n    )\n  );\n}"
+      }
+    },
+    "collection": {
+      "description": "Collection cards with cover image, title, item count, and status badge. For browsing grouped content.",
+      "components": ["Card", "Card.Body", "Badge", "icon"],
+      "blend": {
+        "layout": "grid",
+        "atoms": "_grid _gc3 _gap6 _p4",
+        "slots": {
+          "card-image": "Collection cover image with aspect ratio container",
+          "card-body": "Title (_heading5), description (_caption _fgmuted), item count",
+          "card-badge": "Badge showing public/private or other status"
+        }
+      },
+      "code": {
+        "imports": "import { tags } from 'decantr/tags';\nimport { css } from 'decantr/css';\nimport { Card, Badge, icon } from 'decantr/components';",
+        "example": "function CollectionGrid({ collections }) {\n  const { div, span, h3, img } = tags;\n\n  return div({ class: css('_grid _gc3 _gap6 _p4') },\n    ...collections.map(col =>\n      Card({},\n        img({ src: col.cover, alt: col.title, class: css('_wfull _h[180px] _object[cover]') }),\n        Card.Body({ class: css('_flex _col _gap2') },\n          div({ class: css('_flex _aic _jcsb') },\n            h3({ class: css('_heading5') }, col.title),\n            Badge({ variant: col.isPublic ? 'success' : 'default' }, col.isPublic ? 'Public' : 'Private')\n          ),\n          span({ class: css('_caption _fgmuted _lineClamp2') }, col.description),\n          span({ class: css('_textsm _fgmuted') }, icon('book-open'), ` ${col.itemCount} items`)\n        )\n      )\n    )\n  );\n}"
+      }
+    },
+    "icon": {
+      "description": "Feature cards with icon, title, and description. For landing page capabilities.",
+      "components": ["Card", "Card.Body", "icon"],
+      "blend": {
+        "layout": "grid",
+        "atoms": "_grid _gc3 _gap6 _p4",
+        "slots": {
+          "cards": "Array of feature cards, each with icon circle, title (_heading5), and description (_caption _fgmuted)"
+        }
+      },
+      "code": {
+        "imports": "import { tags } from 'decantr/tags';\nimport { css } from 'decantr/css';\nimport { Card, icon } from 'decantr/components';",
+        "example": "function FeatureGrid({ features }) {\n  const { div, h3, p } = tags;\n\n  return div({ class: css('_grid _gc3 _gap6 _p4') },\n    ...features.map(f =>\n      Card({},\n        Card.Body({ class: css('_flex _col _gap3 _aic _tc') },\n          div({ class: css('_w[48px] _h[48px] _r4 _bgmuted _flex _aic _jcc _fgprimary') },\n            icon(f.icon)\n          ),\n          h3({ class: css('_heading5') }, f.title),\n          p({ class: css('_caption _fgmuted') }, f.description)\n        )\n      )\n    )\n  );\n}"
+      }
+    }
+  },
+  "default_blend": {
+    "layout": "grid",
+    "atoms": "_grid _gc3 _gap6 _p4",
+    "slots": {
+      "card-image": "Card image with aspect ratio container",
+      "card-body": "Card.Body with title, description, and metadata",
+      "card-footer": "Card.Footer with CTA and optional secondary action",
+      "badge": "Optional Badge overlay for status"
+    }
+  },
+  "recipe_overrides": {
+    "command-center": {
+      "wrapper": "cc-frame",
+      "atoms": "cc-grid",
+      "notes": "Cards use cc-frame-sm. Prices/counts use cc-data. Badges use cc-label. Grid background gets cc-grid.",
+      "preset_notes": {
+        "product": "Each Card uses cc-frame-sm. Prices use cc-data with cc-glow. Badge uses cc-label.",
+        "content": "Cards use cc-frame-sm. Metadata uses cc-data. Tag chips use cc-label.",
+        "collection": "Cards use cc-frame-sm. Item count uses cc-data. Status badge uses cc-label.",
+        "icon": "Cards use cc-frame-sm. Icons use cc-glow. Titles use cc-label."
+      }
+    },
+    "auradecantism": {
+      "wrapper": "",
+      "atoms": "",
+      "notes": "Cards use d-glass. Titles highlighted on hover. Subtle aura-glow on card border.",
+      "preset_notes": {
+        "product": "Product cards use d-glass. Price highlighted. CTA button with aura-glow.",
+        "content": "Content cards use d-glass. Title highlighted. Hover reveals subtle aura-glow.",
+        "collection": "Collection cards use d-glass. Title highlighted on hover.",
+        "icon": "Feature cards use d-glass. Icon circles use d-gradient-text. Subtle hover glow."
+      }
+    },
+    "clean": {
+      "wrapper": "",
+      "atoms": "",
+      "notes": "Standard cards with subtle shadow. Clean image + text layout. No extra decoration.",
+      "preset_notes": {
+        "product": "Standard product cards with shadow. Clean image + text layout.",
+        "content": "Standard card with subtle shadow. Clean image + text layout.",
+        "collection": "Standard cards with subtle shadow. Clean image + text layout.",
+        "icon": "Standard cards with subtle border. Clean icon + text layout."
+      }
+    }
+  },
+  "code": {
+    "imports": "import { tags } from 'decantr/tags';\nimport { css } from 'decantr/css';\nimport { Card, Badge, Button, Image } from 'decantr/components';",
+    "example": "function ProductGrid() {\n  const { div, span, h3 } = tags;\n  const products = [\n    { image: '/images/product-1.jpg', name: 'Wireless Headphones', badge: 'New', description: 'Premium noise-cancelling headphones.', price: 199.99 },\n    { image: '/images/product-2.jpg', name: 'Mechanical Keyboard', badge: null, description: 'RGB backlit mechanical keyboard.', price: 149.99 }\n  ];\n\n  return div({ class: css('_grid _gcaf280 _gap4 _p4') },\n    ...products.map(p =>\n      Card({},\n        Image({ src: p.image, alt: p.name, class: css('_wfull _h[200px] _object[cover]') }),\n        Card.Body({ class: css('_flex _col _gap2') },\n          div({ class: css('_flex _aic _jcsb') },\n            h3({ class: css('_heading5') }, p.name),\n            p.badge ? Badge({ variant: 'accent' }, p.badge) : null\n          ),\n          span({ class: css('_fgmuted _textsm') }, p.description),\n          div({ class: css('_flex _aic _jcsb _mt2') },\n            span({ class: css('_heading4') }, `$${p.price}`),\n            Button({ variant: 'primary', size: 'sm' }, 'Add to Cart')\n          )\n        )\n      )\n    )\n  );\n}"
+  }
+}

package/src/registry/patterns/category-nav.json

@@ -0,0 +1,26 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v1.json",
+  "id": "category-nav",
+  "name": "Category Navigation",
+  "description": "Horizontal pill or tab navigation for filtering content by category. Scrollable on narrow viewports. Pairs with post-list and product-grid patterns.",
+  "components": ["Chip", "Badge", "Button", "Segmented"],
+  "default_blend": {
+    "layout": "flex",
+    "atoms": "_flex _gap2 _p2 _overflowXAuto _flexWrap",
+    "slots": {
+      "categories": "Row of Chip or Segmented elements with active state styling",
+      "count-badges": "Optional Badge on each category showing item count"
+    }
+  },
+  "recipe_overrides": {
+    "command-center": {
+      "wrapper": "none",
+      "atoms": "cc-bar",
+      "notes": "Entire nav uses cc-bar. Active category gets cc-glow. Count badges use cc-data. Category labels use cc-label."
+    }
+  },
+  "code": {
+    "imports": "import { tags } from 'decantr/tags';\nimport { createSignal } from 'decantr/state';\nimport { css } from 'decantr/css';\nimport { Chip } from 'decantr/components';",
+    "example": "function CategoryNav() {\n  const { div } = tags;\n  const categories = [\n    { id: 'design', name: 'Design' },\n    { id: 'engineering', name: 'Engineering' },\n    { id: 'product', name: 'Product' },\n    { id: 'marketing', name: 'Marketing' }\n  ];\n  const [active, setActive] = createSignal('all');\n\n  return div({ class: css('_flex _gap2 _wrap _py3 _overflow[auto]') },\n    Chip({\n      label: 'All',\n      variant: active() === 'all' ? 'primary' : 'outline',\n      onclick: () => setActive('all')\n    }),\n    ...categories.map(cat =>\n      Chip({\n        label: cat.name,\n        variant: active() === cat.id ? 'primary' : 'outline',\n        onclick: () => setActive(cat.id)\n      })\n    )\n  );\n}"
+  }
+}

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

@@ -0,0 +1,36 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v1.json",
+  "id": "chart-grid",
+  "name": "Chart Grid",
+  "description": "Responsive grid of chart containers for data visualization dashboards. Charts use their own title prop — no Card wrapping.",
+  "components": ["Chart", "Select"],
+  "default_blend": {
+    "layout": "grid",
+    "atoms": "_grid _gc2 _gap4 _p4",
+    "slots": {
+      "header": "Dashboard section title with _heading4 and time-range Select",
+      "charts": "Array of Chart({ type }) instances (line, bar, pie, area) using the title prop directly"
+    }
+  },
+  "recipe_overrides": {
+    "command-center": {
+      "wrapper": "cc-frame",
+      "atoms": "cc-grid",
+      "notes": "Chart titles use cc-label. Axis labels use cc-data. Background gets cc-grid. Header uses cc-bar."
+    },
+    "auradecantism": {
+      "wrapper": "d-glass",
+      "atoms": "_r4",
+      "notes": "Each chart in d-glass panel. Chart title uses d-gradient-text. Section background can use d-mesh."
+    },
+    "clean": {
+      "wrapper": "",
+      "atoms": "_b1 _r4",
+      "notes": "Charts in simple bordered containers. Clean header with border-bottom divider."
+    }
+  },
+  "code": {
+    "imports": "import { tags } from 'decantr/tags';\nimport { css } from 'decantr/css';\nimport { Select } from 'decantr/components';\nimport { Chart } from 'decantr/chart';",
+    "example": "function ChartGrid() {\n  const { div, h2 } = tags;\n  const data = {\n    revenue: [{ date: 'Jan', value: 4200 }, { date: 'Feb', value: 5100 }, { date: 'Mar', value: 4800 }, { date: 'Apr', value: 6200 }],\n    orders: [{ month: 'Jan', count: 120 }, { month: 'Feb', count: 145 }, { month: 'Mar', count: 132 }, { month: 'Apr', count: 168 }],\n    categories: [{ name: 'Electronics', value: 42 }, { name: 'Clothing', value: 28 }, { name: 'Books', value: 18 }, { name: 'Home', value: 12 }],\n    traffic: [{ date: 'Jan', visits: 8400 }, { date: 'Feb', visits: 9200 }, { date: 'Mar', visits: 8800 }, { date: 'Apr', visits: 11500 }]\n  };\n\n  return div({ class: css('_flex _col _gap4') },\n    div({ class: css('_flex _aic _jcsb') },\n      h2({ class: css('_heading4') }, 'Analytics'),\n      Select({ value: '7d', options: [\n        { label: 'Last 7 days', value: '7d' },\n        { label: 'Last 30 days', value: '30d' },\n        { label: 'Last 90 days', value: '90d' }\n      ] })\n    ),\n    div({ class: css('_grid _gc2 _gap4') },\n      Chart({ type: 'line', data: data.revenue, x: 'date', y: 'value', title: 'Revenue', height: 280 }),\n      Chart({ type: 'bar', data: data.orders, x: 'month', y: 'count', title: 'Orders', height: 280 }),\n      Chart({ type: 'pie', data: data.categories, x: 'name', y: 'value', title: 'Categories', height: 280 }),\n      Chart({ type: 'area', data: data.traffic, x: 'date', y: 'visits', title: 'Traffic', height: 280 })\n    )\n  );\n}"
+  }
+}

package/src/registry/patterns/chat-interface.json

@@ -0,0 +1,37 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v1.json",
+  "id": "chat-interface",
+  "name": "Chat Interface",
+  "description": "AI chat interface with scrollable message area, suggestion prompt chips, and input bar with send button. Messages alternate between user and assistant bubbles. Used for chef chat and AI cooking assistants.",
+  "components": ["Card", "Card.Body", "Input", "Button", "Avatar", "Chip", "ScrollArea", "icon"],
+  "default_blend": {
+    "layout": "stack",
+    "atoms": "_flex _col _h[calc(100vh-200px)] _b1 _r4 _overflow[hidden]",
+    "slots": {
+      "messages": "ScrollArea of chat bubbles — user messages right-aligned, assistant messages left-aligned with Avatar",
+      "suggestions": "Horizontal row of Chip suggestion prompts (e.g. 'What can I make with chicken?')",
+      "input-bar": "Bottom bar with text Input and send Button"
+    }
+  },
+  "recipe_overrides": {
+    "command-center": {
+      "wrapper": "cc-frame",
+      "atoms": "",
+      "notes": "Chat frame uses cc-frame. Assistant messages use cc-data. Suggestion chips use cc-label. Send button uses cc-glow."
+    },
+    "auradecantism": {
+      "wrapper": "d-glass",
+      "atoms": "_r4",
+      "notes": "Chat container on d-glass. Assistant avatar has aura-glow ring. User messages use accent background."
+    },
+    "clean": {
+      "wrapper": "",
+      "atoms": "_b1 _r4",
+      "notes": "Simple bordered chat container. Clean message bubbles with muted backgrounds."
+    }
+  },
+  "code": {
+    "imports": "import { tags } from 'decantr/tags';\nimport { createSignal } from 'decantr/state';\nimport { css } from 'decantr/css';\nimport { Card, Input, Button, Avatar, Chip, ScrollArea, icon } from 'decantr/components';",
+    "example": "function ChatInterface() {\n  const { div, span, p } = tags;\n  const [input, setInput] = createSignal('');\n  const [messages, setMessages] = createSignal([\n    { role: 'assistant', text: 'Hi! I\\'m your AI chef assistant. Ask me anything about cooking!' }\n  ]);\n  const suggestions = ['What can I make with chicken?', 'Suggest a quick dinner', 'How do I make pasta from scratch?'];\n\n  const send = () => {\n    if (!input()) return;\n    setMessages([...messages(), { role: 'user', text: input() }]);\n    setInput('');\n  };\n\n  return div({ class: css('_flex _col _h[calc(100vh-200px)] _b1 _r4 _overflow[hidden]') },\n    ScrollArea({ class: css('_flex1 _p4') },\n      div({ class: css('_flex _col _gap3') },\n        ...messages().map(m =>\n          div({ class: css(m.role === 'user' ? '_flex _jce' : '_flex _gap2') },\n            m.role === 'assistant' ? Avatar({ size: 'sm', fallback: 'AI' }) : null,\n            div({ class: css(`_p3 _r4 _mw[70%] ${m.role === 'user' ? '_bgprimary _fgprimary' : '_bgmuted'}`) },\n              p({}, m.text)\n            )\n          )\n        )\n      )\n    ),\n    div({ class: css('_flex _gap2 _p3 _borderb _flexWrap') },\n      ...suggestions.map(s =>\n        Chip({ variant: 'outline', onclick: () => setInput(s) }, s)\n      )\n    ),\n    div({ class: css('_flex _gap2 _p3 _bordert') },\n      Input({ placeholder: 'Ask your chef assistant...', value: input, onchange: e => setInput(e.target.value), class: css('_flex1') }),\n      Button({ variant: 'primary', onclick: send }, icon('send'))\n    )\n  );\n}"
+  }
+}

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

@@ -0,0 +1,55 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "id": "checklist-card",
+  "name": "Checklist Card",
+  "description": "Item list in a Card with optional checkboxes for completion tracking. Used for ingredient lists, task lists, and checklists.",
+  "components": ["Card", "Card.Header", "Card.Body", "Checkbox", "icon"],
+  "default_preset": "default",
+  "presets": {
+    "default": {
+      "description": "Vertical list of items with Checkbox for completion tracking inside a Card.",
+      "components": ["Card", "Card.Header", "Card.Body", "Checkbox", "icon"],
+      "blend": {
+        "layout": "stack",
+        "atoms": "_flex _col _gap0",
+        "slots": {
+          "header": "Card.Header with title and optional count/adjuster",
+          "list": "Vertical list of items with Checkbox for completion tracking"
+        }
+      },
+      "code": {
+        "imports": "import { tags } from 'decantr/tags';\nimport { css } from 'decantr/css';\nimport { Card, Checkbox, icon } from 'decantr/components';",
+        "example": "function ChecklistCard({ title, items }) {\n  const { div, h3, span } = tags;\n\n  return Card({},\n    Card.Header({},\n      div({ class: css('_flex _aic _jcsb') },\n        h3({ class: css('_heading5') }, icon('list'), ` ${title}`),\n        span({ class: css('_textsm _fgmuted') }, `${items.length} items`)\n      )\n    ),\n    Card.Body({ class: css('_flex _col _gap2') },\n      ...items.map(item =>\n        Checkbox({ label: typeof item === 'string' ? item : `${item.quantity} ${item.unit} ${item.name}${item.preparation ? ' — ' + item.preparation : ''}` })\n      )\n    )\n  );\n}"
+      }
+    }
+  },
+  "default_blend": {
+    "layout": "stack",
+    "atoms": "_flex _col _gap0",
+    "slots": {
+      "header": "Card.Header with title and optional count",
+      "list": "Vertical list of items with Checkbox"
+    }
+  },
+  "recipe_overrides": {
+    "command-center": {
+      "wrapper": "cc-frame-sm",
+      "atoms": "",
+      "notes": "Card uses cc-frame-sm. Quantities use cc-data. Checked items dimmed."
+    },
+    "auradecantism": {
+      "wrapper": "d-glass",
+      "atoms": "_r4",
+      "notes": "Card on glass background. Section title uses d-gradient-text."
+    },
+    "clean": {
+      "wrapper": "",
+      "atoms": "_b1 _r4",
+      "notes": "Simple bordered card. Clean checkbox list."
+    }
+  },
+  "code": {
+    "imports": "import { tags } from 'decantr/tags';\nimport { css } from 'decantr/css';\nimport { Card, Checkbox, icon } from 'decantr/components';",
+    "example": "function ChecklistCard({ title, items }) {\n  const { div, h3, span } = tags;\n\n  return Card({},\n    Card.Header({},\n      div({ class: css('_flex _aic _jcsb') },\n        h3({ class: css('_heading5') }, icon('list'), ` ${title}`),\n        span({ class: css('_textsm _fgmuted') }, `${items.length} items`)\n      )\n    ),\n    Card.Body({ class: css('_flex _col _gap2') },\n      ...items.map(item =>\n        Checkbox({ label: typeof item === 'string' ? item : item.text })\n      )\n    )\n  );\n}"
+  }
+}

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

@@ -0,0 +1,27 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v1.json",
+  "id": "comparison-panel",
+  "name": "Comparison Panel",
+  "description": "Side-by-side metric comparison across two or more periods, segments, or benchmarks. Each column shows labeled value, trend indicator, mini chart, and delta from baseline.",
+  "components": ["Statistic", "Sparkline", "Badge", "Chart", "Separator"],
+  "default_blend": {
+    "layout": "grid",
+    "atoms": "_grid _gc3 _gap4 _p4",
+    "slots": {
+      "header": "Comparison title with _heading4 and metric/period selector",
+      "columns": "Grid of comparison columns. Each: label (Text), value (Statistic), delta Badge, trend Sparkline, optional mini Chart with reference line annotation",
+      "summary": "Optional bottom row with overall comparison verdict"
+    }
+  },
+  "recipe_overrides": {
+    "command-center": {
+      "wrapper": "cc-frame",
+      "atoms": "cc-grid",
+      "notes": "Values use cc-data. Positive deltas get cc-glow. Negative deltas get warning. Mini charts inherit cc-grid. Header uses cc-bar."
+    }
+  },
+  "code": {
+    "imports": "import { tags } from 'decantr/tags';\nimport { css } from 'decantr/css';\nimport { Statistic, Badge, Separator } from 'decantr/components';\nimport { Sparkline } from 'decantr/chart';",
+    "example": "function ComparisonPanel() {\n  const { div, h3, span } = tags;\n  const periods = [\n    { label: 'This Quarter', revenue: 142000, delta: 12.5, trend: [40, 52, 48, 61, 58, 72] },\n    { label: 'Last Quarter', revenue: 126200, delta: -3.1, trend: [38, 42, 40, 44, 41, 43] },\n    { label: 'Year Ago', revenue: 98400, delta: 0, trend: [30, 32, 28, 35, 33, 34] }\n  ];\n\n  return div({ class: css('_flex _col _gap4 _p4') },\n    h3({ class: css('_heading4') }, 'Period Comparison'),\n    div({ class: css('_grid _gc3 _gap4') },\n      ...periods.map(period =>\n        div({ class: css('_flex _col _gap3 _p4 _b1 _r4') },\n          span({ class: css('_textsm _fgmuted _bold') }, period.label),\n          Statistic({ label: 'Revenue', value: period.revenue, prefix: '$' }),\n          div({ class: css('_flex _aic _gap2') },\n            Badge({ variant: period.delta > 0 ? 'success' : 'error' }, `${period.delta > 0 ? '+' : ''}${period.delta}%`),\n            span({ class: css('_textxs _fgmuted') }, 'vs baseline')\n          ),\n          Sparkline({ data: period.trend, height: 40 })\n        )\n      )\n    )\n  );\n}"
+  }
+}

package/src/registry/patterns/component-showcase.json

@@ -0,0 +1,24 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v1.json",
+  "id": "component-showcase",
+  "name": "Component Showcase",
+  "description": "Auto-generated component demo from registry spec. Renders variant grid, size grid, state demos, and interactive sandbox. Used by workbench, docs site, and CLI preview.",
+  "components": ["*"],
+  "default_blend": {
+    "layout": "stack",
+    "atoms": "_flex _col _gap10",
+    "slots": {
+      "variant-grid": "Labeled flex grid of all variant enum values, merged with showcase.defaults",
+      "size-grid": "Labeled flex grid of all size enum values, merged with showcase.defaults",
+      "state-grid": "Labeled flex grid of boolean states toggled on, merged with showcase.defaults",
+      "examples": "Curated preset cards (.de-example-card): live demo + name + description from showcase.examples",
+      "interactive-sandbox": "Unified card (.de-sandbox): demo area left (.de-sandbox-demo) + flush props sidebar right (.de-sandbox-props). PropsPanel pre-populated with showcase.defaults.",
+      "code-example": "CodeBlock with generated import and usage, uses showcase.labelProp for API shape"
+    }
+  },
+  "recipe_overrides": {},
+  "code": {
+    "imports": "import { tags } from 'decantr/tags';\nimport { createSignal } from 'decantr/state';\nimport { css } from 'decantr/css';\nimport { Card, Tabs, Badge, Button } from 'decantr/components';",
+    "example": "function ComponentShowcase() {\n  const { div, h2, p, pre, code: codeEl } = tags;\n  const name = 'Button';\n  const description = 'Interactive button component with multiple variants and sizes.';\n  const variants = [\n    Button({ variant: 'primary' }, 'Primary'),\n    Button({ variant: 'secondary' }, 'Secondary'),\n    Button({ variant: 'outline' }, 'Outline'),\n    Button({ variant: 'ghost' }, 'Ghost')\n  ];\n  const code = \"Button({ variant: 'primary' }, 'Click me')\";\n\n  return Card({ class: css('_flex _col _gap4') },\n    Card.Header({},\n      div({ class: css('_flex _aic _gap3') },\n        h2({ class: css('_heading4') }, name),\n        Badge({}, 'Component')\n      ),\n      p({ class: css('_fgmuted _textsm _mt1') }, description)\n    ),\n    Card.Body({},\n      Tabs({ items: [\n        { label: 'Preview', content: () =>\n          div({ class: css('_flex _wrap _gap4 _p4 _bgmuted _r4') }, ...variants)\n        },\n        { label: 'Code', content: () =>\n          pre({ class: css('_p4 _bgmuted _r4 _overflow[auto]') }, codeEl({}, code))\n        }\n      ] })\n    )\n  );\n}"
+  }
+}

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

@@ -0,0 +1,31 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v1.json",
+  "id": "contact-form",
+  "name": "Contact Form",
+  "description": "Multi-field contact form with name, email, message, and optional subject/category.",
+  "components": ["Input", "Textarea", "Button", "Select"],
+  "default_blend": {
+    "layout": "stack",
+    "atoms": "_flex _col _gap4 _maxw2xl _mx-auto",
+    "slots": {
+      "form-fields": "Stacked input fields for name, email, subject, and message",
+      "submit-row": "Submit button with optional cancel or reset action"
+    }
+  },
+  "recipe_overrides": {
+    "auradecantism": {
+      "wrapper": "d-glass",
+      "atoms": "_r4",
+      "notes": "Form in d-glass card. Submit button prominent. Heading uses d-gradient-text."
+    },
+    "clean": {
+      "wrapper": "",
+      "atoms": "",
+      "notes": "Standard card form. No extra decoration needed."
+    }
+  },
+  "code": {
+    "imports": "import { tags } from 'decantr/tags';\nimport { createSignal } from 'decantr/state';\nimport { css } from 'decantr/css';\nimport { Input, Textarea, Button, Select, Card } from 'decantr/components';",
+    "example": "function ContactForm() {\n  const { div, h2, p } = tags;\n\n  return Card({ class: css('_mw[600px] _mxa') },\n    Card.Header({},\n      h2({ class: css('_heading4') }, 'Get in Touch'),\n      p({ class: css('_fgmuted _mt1') }, 'We\\'ll get back to you within 24 hours.')\n    ),\n    Card.Body({ class: css('_flex _col _gap4') },\n      div({ class: css('_grid _gc2 _gap4') },\n        Input({ label: 'First Name', placeholder: 'John' }),\n        Input({ label: 'Last Name', placeholder: 'Doe' })\n      ),\n      Input({ label: 'Email', type: 'email', placeholder: 'john@example.com' }),\n      Select({ label: 'Subject', options: [\n        { label: 'General Inquiry', value: 'general' },\n        { label: 'Sales', value: 'sales' },\n        { label: 'Support', value: 'support' }\n      ] }),\n      Textarea({ label: 'Message', placeholder: 'Tell us about your project...', rows: 4 }),\n      Button({ variant: 'primary', class: css('_wfull') }, 'Send Message')\n    )\n  );\n}"
+  }
+}

package/src/registry/patterns/cta-section.json

@@ -0,0 +1,20 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v1.json",
+  "id": "cta-section",
+  "name": "CTA Section",
+  "description": "Call-to-action section with headline, supporting text, and action buttons.",
+  "components": ["Button", "Title", "Text"],
+  "default_blend": {
+    "layout": "stack",
+    "atoms": "_flex _col _aic _tc _gap4 _py12 _px6",
+    "slots": {
+      "headline": "Primary heading to drive user action",
+      "description": "Supporting text that reinforces the CTA message",
+      "cta-group": "One or more action buttons, typically primary + secondary"
+    }
+  },
+  "code": {
+    "imports": "import { tags } from 'decantr/tags';\nimport { css } from 'decantr/css';\nimport { Button } from 'decantr/components';",
+    "example": "function CtaSection() {\n  const { div, h2, p } = tags;\n\n  return div({ class: css('_flex _col _aic _tc _gap4 _py12 _px6 _bgmuted _r4') },\n    h2({ class: css('_heading2') }, 'Ready to get started?'),\n    p({ class: css('_body _fgmuted _mw[480px]') }, 'Join thousands of teams building better products with our platform.'),\n    div({ class: css('_flex _gap3') },\n      Button({ variant: 'primary', size: 'lg' }, 'Start Free Trial'),\n      Button({ variant: 'outline', size: 'lg' }, 'Talk to Sales')\n    )\n  );\n}"
+  }
+}

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

@@ -0,0 +1,37 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v1.json",
+  "id": "data-table",
+  "name": "Data Table",
+  "description": "Sortable, filterable, paginated data table with a toolbar for search, filters, and bulk actions.",
+  "components": ["DataTable", "Input", "Select", "Button", "Badge", "Chip"],
+  "default_blend": {
+    "layout": "stack",
+    "atoms": "_flex _flexCol _gap4 _p4",
+    "slots": {
+      "toolbar": "Horizontal bar with search Input, filter Select, action Buttons via _flex _gap3 _justifyBetween",
+      "table": "DataTable instance with columns, data, sort, and pagination props",
+      "bulk-actions": "Conditional bar shown when rows selected, with Buttons and Badge count"
+    }
+  },
+  "recipe_overrides": {
+    "command-center": {
+      "wrapper": "cc-frame",
+      "atoms": "cc-scanline",
+      "notes": "Toolbar gets cc-bar. Numeric cells use cc-data. Row hover uses cc-glow subtle. Table area wrapped in cc-scanline for data-heavy visual."
+    },
+    "auradecantism": {
+      "wrapper": "d-glass",
+      "atoms": "_r4 _overflow[hidden]",
+      "notes": "Table wrapped in d-glass with rounded overflow. Toolbar header with d-gradient-text title."
+    },
+    "clean": {
+      "wrapper": "",
+      "atoms": "_b1 _r4 _overflow[hidden]",
+      "notes": "Table in bordered container. Clean toolbar with border-bottom divider."
+    }
+  },
+  "code": {
+    "imports": "import { tags } from 'decantr/tags';\nimport { createSignal } from 'decantr/state';\nimport { css } from 'decantr/css';\nimport { DataTable, Input, Select, Button, Badge } from 'decantr/components';",
+    "example": "function DataTablePattern() {\n  const { div } = tags;\n  const [search, setSearch] = createSignal('');\n  const [status, setStatus] = createSignal('all');\n  const columns = [\n    { key: 'name', label: 'Name', sortable: true },\n    { key: 'email', label: 'Email', sortable: true },\n    { key: 'role', label: 'Role' },\n    { key: 'status', label: 'Status' }\n  ];\n  const data = [\n    { name: 'Alice Chen', email: 'alice@example.com', role: 'Admin', status: 'active' },\n    { name: 'Bob Patel', email: 'bob@example.com', role: 'Editor', status: 'active' },\n    { name: 'Carol Liu', email: 'carol@example.com', role: 'Viewer', status: 'inactive' },\n    { name: 'Dan Kim', email: 'dan@example.com', role: 'Editor', status: 'active' }\n  ];\n\n  return div({ class: css('_flex _col _gap4') },\n    div({ class: css('_flex _gap3 _aic _jcsb') },\n      Input({ placeholder: 'Search...', value: search, onchange: e => setSearch(e.target.value) }),\n      div({ class: css('_flex _gap2') },\n        Select({ value: status, onchange: v => setStatus(v), options: [\n          { label: 'All', value: 'all' },\n          { label: 'Active', value: 'active' },\n          { label: 'Inactive', value: 'inactive' }\n        ] }),\n        Button({ variant: 'outline' }, 'Export')\n      )\n    ),\n    DataTable({ columns, data, sortable: true, paginate: true, pageSize: 10 })\n  );\n}"
+  }
+}

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

@@ -0,0 +1,83 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "id": "detail-header",
+  "name": "Detail Header",
+  "description": "Page header with breadcrumb, title, status badge, and action buttons. Supports standard page headers and user profile headers via presets.",
+  "components": ["Breadcrumb", "Title", "Badge", "Button"],
+  "default_preset": "standard",
+  "presets": {
+    "standard": {
+      "description": "Page header with breadcrumb, title, status badge, and action buttons.",
+      "components": ["Breadcrumb", "Badge", "Button", "icon"],
+      "blend": {
+        "layout": "stack",
+        "atoms": "_flex _col _gap3 _pb4 _borderb",
+        "slots": {
+          "breadcrumb": "Breadcrumb navigation trail for page hierarchy",
+          "title-row": "Title with inline status Badge",
+          "actions": "Action Buttons for edit, delete, or export"
+        }
+      },
+      "code": {
+        "imports": "import { tags } from 'decantr/tags';\nimport { css } from 'decantr/css';\nimport { Breadcrumb, Badge, Button, icon } from 'decantr/components';",
+        "example": "function DetailHeader() {\n  const { div, h1 } = tags;\n  const title = 'Project Alpha';\n  const breadcrumbs = [{ label: 'Home', href: '/' }, { label: 'Projects', href: '/projects' }, { label: 'Project Alpha' }];\n  const status = 'active';\n\n  return div({ class: css('_flex _col _gap3 _pb4 _borderB') },\n    Breadcrumb({ items: breadcrumbs }),\n    div({ class: css('_flex _aic _jcsb') },\n      div({ class: css('_flex _aic _gap3') },\n        h1({ class: css('_heading3') }, title),\n        status ? Badge({ variant: status === 'active' ? 'success' : 'default' }, status) : null\n      ),\n      div({ class: css('_flex _gap2') },\n        Button({ variant: 'outline', size: 'sm' }, icon('edit'), 'Edit'),\n        Button({ variant: 'outline', size: 'sm' }, icon('share'), 'Share')\n      )\n    )\n  );\n}"
+      }
+    },
+    "profile": {
+      "description": "User profile header with banner image, avatar, display name, bio, and edit button.",
+      "components": ["Avatar", "Button", "Upload", "Badge", "icon"],
+      "blend": {
+        "layout": "stack",
+        "atoms": "_flex _col _gap0",
+        "slots": {
+          "banner": "Full-width banner image (200px height) with gradient overlay",
+          "avatar-row": "Overlapping Avatar (offset -40px) with upload overlay on hover, plus edit Button",
+          "info": "Display name (_heading3), bio paragraph, location + website row with icons"
+        }
+      },
+      "code": {
+        "imports": "import { tags } from 'decantr/tags';\nimport { css } from 'decantr/css';\nimport { Avatar, Button, icon } from 'decantr/components';",
+        "example": "function ProfileHeader({ user }) {\n  const { div, h2, p, span, img } = tags;\n\n  return div({ class: css('_flex _col') },\n    div({ class: css('_relative _wfull _h[200px] _overflow[hidden] _r4') },\n      img({ src: user.banner, alt: 'Banner', class: css('_wfull _hfull _object[cover]') })\n    ),\n    div({ class: css('_flex _aic _jcsb _px6 _mt[-40px]') },\n      div({ class: css('_flex _aic _gap4') },\n        Avatar({ src: user.avatar, size: 'xl', class: css('_b[3px_solid_var(--d-bg)]') }),\n        div({ class: css('_flex _col _gap1 _mt[40px]') },\n          h2({ class: css('_heading3') }, user.name),\n          p({ class: css('_fgmuted') }, user.bio),\n          div({ class: css('_flex _aic _gap4 _textsm _fgmuted') },\n            user.location ? span({}, icon('map-pin'), ` ${user.location}`) : null,\n            user.website ? span({}, icon('link'), ` ${user.website}`) : null\n          )\n        )\n      ),\n      Button({ variant: 'outline', class: css('_mt[40px]') }, icon('edit'), 'Edit Profile')\n    )\n  );\n}"
+      }
+    }
+  },
+  "default_blend": {
+    "layout": "stack",
+    "atoms": "_flex _col _gap3 _pb4 _borderb",
+    "slots": {
+      "breadcrumb": "Breadcrumb navigation trail for page hierarchy",
+      "title-row": "Title with inline status Badge",
+      "actions": "Action Buttons for edit, delete, or export"
+    }
+  },
+  "recipe_overrides": {
+    "command-center": {
+      "wrapper": "cc-frame",
+      "atoms": "",
+      "notes": "Header uses cc-frame. Title uses cc-data. Actions get cc-glow.",
+      "preset_notes": {
+        "profile": "Banner uses cc-grid overlay. Avatar ring uses cc-glow. Name uses cc-data."
+      }
+    },
+    "auradecantism": {
+      "wrapper": "",
+      "atoms": "",
+      "notes": "Header blends with page background. Title can use d-gradient-text.",
+      "preset_notes": {
+        "profile": "Banner blends with d-mesh. Avatar has aura-glow ring. Name uses d-gradient-text."
+      }
+    },
+    "clean": {
+      "wrapper": "",
+      "atoms": "",
+      "notes": "Standard header with subtle border. Clean layout.",
+      "preset_notes": {
+        "profile": "Simple banner image. Clean avatar with border. Standard text layout."
+      }
+    }
+  },
+  "code": {
+    "imports": "import { tags } from 'decantr/tags';\nimport { css } from 'decantr/css';\nimport { Breadcrumb, Badge, Button, icon } from 'decantr/components';",
+    "example": "function DetailHeader() {\n  const { div, h1 } = tags;\n  const title = 'Project Alpha';\n  const breadcrumbs = [{ label: 'Home', href: '/' }, { label: 'Projects', href: '/projects' }, { label: 'Project Alpha' }];\n  const status = 'active';\n\n  return div({ class: css('_flex _col _gap3 _pb4 _borderB') },\n    Breadcrumb({ items: breadcrumbs }),\n    div({ class: css('_flex _aic _jcsb') },\n      div({ class: css('_flex _aic _gap3') },\n        h1({ class: css('_heading3') }, title),\n        status ? Badge({ variant: status === 'active' ? 'success' : 'default' }, status) : null\n      ),\n      div({ class: css('_flex _gap2') },\n        Button({ variant: 'outline', size: 'sm' }, icon('edit'), 'Edit'),\n        Button({ variant: 'outline', size: 'sm' }, icon('share'), 'Share')\n      )\n    )\n  );\n}"
+  }
+}