decantr 0.9.0

package/src/registry/icons.json

@@ -0,0 +1,463 @@
+{
+  "$schema": "https://decantr.ai/schemas/module.v1.json",
+  "generated": "2026-03-13",
+  "source": "decantr original icons",
+  "essential": [
+    "accessibility",
+    "activity",
+    "air-conditioning",
+    "alarm",
+    "alarm-clock",
+    "alert-circle",
+    "alert-triangle",
+    "align-center",
+    "align-justify",
+    "align-left",
+    "align-right",
+    "analytics",
+    "anchor",
+    "angry",
+    "apartment",
+    "api",
+    "apple",
+    "archive",
+    "area-chart",
+    "arrow-down",
+    "arrow-left",
+    "arrow-right",
+    "arrow-up",
+    "arrow-up-down",
+    "asterisk",
+    "at",
+    "at-sign",
+    "award",
+    "baby",
+    "ban",
+    "bandage",
+    "bank",
+    "bar-chart",
+    "bar-chart-horizontal",
+    "barcode",
+    "bath",
+    "battery",
+    "battery-charging",
+    "battery-low",
+    "bed",
+    "bell",
+    "bell-ring",
+    "benchmark",
+    "bicycle",
+    "binary",
+    "blocks",
+    "bluetooth",
+    "book",
+    "book-open",
+    "bookmark",
+    "bookmark-plus",
+    "box",
+    "boxes",
+    "brain",
+    "briefcase",
+    "brush",
+    "bubble-chart",
+    "bug",
+    "building",
+    "building-2",
+    "bus",
+    "cake",
+    "calculator",
+    "calendar",
+    "calendar-check",
+    "calendar-plus",
+    "calendar-x",
+    "camera",
+    "camera-off",
+    "candlestick-chart",
+    "car",
+    "cast",
+    "cctv",
+    "chart-comparison",
+    "chart-correlation",
+    "chart-decline",
+    "chart-distribution",
+    "chart-donut",
+    "chart-forecast",
+    "chart-funnel",
+    "chart-gantt",
+    "chart-growth",
+    "chart-heatmap",
+    "chart-radar",
+    "chart-sankey",
+    "chart-scatter",
+    "chart-treemap",
+    "chart-waterfall",
+    "check",
+    "check-circle",
+    "chef-hat",
+    "chevron-down",
+    "chevron-left",
+    "chevron-right",
+    "chevron-up",
+    "chevrons-left",
+    "chevrons-right",
+    "chip",
+    "circle",
+    "circle-dot",
+    "clipboard",
+    "clock",
+    "cloud",
+    "cloud-cog",
+    "cloud-download",
+    "cloud-lightning",
+    "cloud-upload",
+    "code",
+    "coffee",
+    "cog",
+    "coins",
+    "columns",
+    "compass",
+    "construction",
+    "container",
+    "container-ship",
+    "contract",
+    "copy",
+    "coupon",
+    "cpu",
+    "credit-card",
+    "crop",
+    "crown",
+    "database",
+    "diamond",
+    "dna",
+    "dollar-sign",
+    "door-closed",
+    "door-open",
+    "download",
+    "droplet",
+    "dumbbell",
+    "edit",
+    "eraser",
+    "expand",
+    "external-link",
+    "eye",
+    "eye-off",
+    "eye-scan",
+    "eyedropper",
+    "factory",
+    "fence",
+    "file",
+    "file-audio",
+    "file-check",
+    "file-code",
+    "file-image",
+    "file-minus",
+    "file-plus",
+    "file-search",
+    "file-spreadsheet",
+    "file-text",
+    "file-video",
+    "file-x",
+    "files",
+    "film",
+    "filter",
+    "filter-x",
+    "fingerprint",
+    "flag",
+    "folder",
+    "folder-check",
+    "folder-open",
+    "folder-plus",
+    "forklift",
+    "frown",
+    "fuel",
+    "garage",
+    "garden",
+    "gauge",
+    "gift",
+    "git-branch",
+    "git-commit",
+    "git-merge",
+    "git-pull-request",
+    "globe",
+    "graduation-cap",
+    "grape",
+    "grid-3x3",
+    "grip-vertical",
+    "group",
+    "hammer",
+    "handshake",
+    "hard-drive",
+    "hash",
+    "hash-tag",
+    "headphones",
+    "heart",
+    "heart-crack",
+    "heart-pulse",
+    "helicopter",
+    "hexagon",
+    "histogram",
+    "history",
+    "home",
+    "hospital",
+    "hourglass",
+    "house",
+    "id-card",
+    "image",
+    "inbox",
+    "infinity",
+    "info",
+    "invoice",
+    "kanban",
+    "key",
+    "kpi-card",
+    "lamp",
+    "landmark",
+    "laptop",
+    "laugh",
+    "layers",
+    "layout-dashboard",
+    "layout-grid",
+    "leaf",
+    "lightbulb",
+    "lighthouse",
+    "line-chart",
+    "link",
+    "list",
+    "list-ordered",
+    "loader",
+    "lock",
+    "lock-keyhole",
+    "log-in",
+    "log-out",
+    "mail",
+    "map",
+    "map-compass",
+    "map-pin",
+    "maximize",
+    "medal",
+    "megaphone",
+    "meh",
+    "menu",
+    "message-circle",
+    "message-square",
+    "metric",
+    "microphone",
+    "microphone-off",
+    "milestone",
+    "minimize",
+    "minus",
+    "monitor",
+    "moon",
+    "more-horizontal",
+    "more-vertical",
+    "mountain",
+    "move",
+    "navigation",
+    "newspaper",
+    "notebook",
+    "nut",
+    "package",
+    "palette",
+    "pallet",
+    "panel-left",
+    "panel-right",
+    "paperclip",
+    "parentheses",
+    "parking",
+    "passport",
+    "pen",
+    "pen-tool",
+    "pencil",
+    "percent",
+    "percent-circle",
+    "phone",
+    "pie-chart",
+    "piggy-bank",
+    "pill",
+    "pivot-table",
+    "pizza",
+    "plane",
+    "plug",
+    "plus",
+    "podcast",
+    "power",
+    "presentation",
+    "price-tag",
+    "printer",
+    "puzzle",
+    "qr-code",
+    "radio",
+    "receipt",
+    "redo",
+    "refresh",
+    "regex",
+    "reply",
+    "returns",
+    "robot",
+    "rocket",
+    "rotate-ccw",
+    "rotate-cw",
+    "route",
+    "rows",
+    "rss",
+    "satellite",
+    "save",
+    "scale",
+    "scan",
+    "school",
+    "scissors",
+    "screwdriver",
+    "search",
+    "send",
+    "server",
+    "settings",
+    "share",
+    "share-2",
+    "shield",
+    "shield-alert",
+    "shield-check",
+    "shield-x",
+    "ship",
+    "shipping",
+    "shopping-bag",
+    "shopping-cart",
+    "shrink",
+    "sidebar",
+    "signal",
+    "signature",
+    "sliders-horizontal",
+    "smartphone",
+    "smile",
+    "snowflake",
+    "sofa",
+    "sort-asc",
+    "sort-desc",
+    "sparkles",
+    "sparkline",
+    "spreadsheet",
+    "square",
+    "stacked-bar-chart",
+    "stamp",
+    "star",
+    "stethoscope",
+    "store",
+    "sun",
+    "sunrise",
+    "sunset",
+    "syringe",
+    "table",
+    "table-cells",
+    "table-columns",
+    "table-rows",
+    "tablet",
+    "tag",
+    "target",
+    "taxi",
+    "terminal",
+    "thermometer",
+    "thumbs-down",
+    "thumbs-up",
+    "timer",
+    "toggle-left",
+    "toggle-right",
+    "tool",
+    "train",
+    "trash",
+    "tree",
+    "trending-down",
+    "trending-up",
+    "trendline",
+    "triangle",
+    "trophy",
+    "truck",
+    "tv",
+    "type",
+    "umbrella",
+    "undo",
+    "ungroup",
+    "unlink",
+    "unlock",
+    "upload",
+    "usb",
+    "user",
+    "user-check",
+    "user-minus",
+    "user-plus",
+    "user-x",
+    "users",
+    "users-round",
+    "utensils",
+    "variable",
+    "video",
+    "wallet",
+    "wand",
+    "warehouse",
+    "watch",
+    "watch-smart",
+    "webhook",
+    "wheat",
+    "wifi",
+    "wifi-off",
+    "wind",
+    "window",
+    "wine",
+    "workflow",
+    "wrench",
+    "x",
+    "x-circle",
+    "zap"
+  ],
+  "essentialCount": 403,
+  "groups": {
+    "navigation": { "label": "Navigation", "description": "Arrows, chevrons, and directional indicators", "icons": ["check", "x", "plus", "minus", "chevron-down", "chevron-up", "chevron-left", "chevron-right", "chevrons-left", "chevrons-right", "arrow-left", "arrow-right", "arrow-up", "arrow-down", "navigation"] },
+    "actions": { "label": "Actions", "description": "Common interactive operations and controls", "icons": ["search", "menu", "more-horizontal", "more-vertical", "external-link", "home", "bell", "bell-ring", "settings", "star", "edit", "trash", "copy", "eye", "eye-off", "filter", "filter-x", "download", "upload", "refresh", "loader", "log-out", "log-in", "undo", "redo", "share", "share-2", "rotate-cw", "rotate-ccw", "scissors", "zap", "power", "move", "scan", "wand", "sparkles", "eraser"] },
+    "feedback": { "label": "Feedback", "description": "Status indicators, alerts, and validation", "icons": ["info", "alert-triangle", "alert-circle", "check-circle", "x-circle", "circle-dot", "flag", "ban", "alarm"] },
+    "people": { "label": "People & Security", "description": "User accounts, permissions, and authentication", "icons": ["user", "users", "user-plus", "user-minus", "user-check", "user-x", "users-round", "shield", "shield-check", "shield-x", "shield-alert", "lock", "lock-keyhole", "unlock", "key", "fingerprint", "eye-scan", "id-card", "passport"] },
+    "content": { "label": "Content", "description": "Files, documents, and media", "icons": ["file", "file-text", "file-plus", "file-minus", "file-check", "file-x", "file-search", "file-code", "file-spreadsheet", "file-image", "file-audio", "file-video", "files", "folder", "folder-open", "folder-plus", "folder-check", "save", "printer", "bookmark", "bookmark-plus", "archive", "clipboard", "paperclip", "link", "unlink", "hash", "tag", "image"] },
+    "communication": { "label": "Communication", "description": "Messaging, social, and engagement", "icons": ["mail", "phone", "video", "send", "at-sign", "at", "message-square", "message-circle", "reply", "rss", "podcast", "microphone", "microphone-off", "headphones", "megaphone", "newspaper", "radio", "tv", "cast", "heart", "heart-crack", "thumbs-up", "thumbs-down", "smile", "frown", "meh", "laugh", "angry", "award"] },
+    "time": { "label": "Time", "description": "Clocks, calendars, scheduling, and deadlines", "icons": ["clock", "timer", "hourglass", "alarm-clock", "watch", "watch-smart", "history", "calendar", "calendar-check", "calendar-plus", "calendar-x"] },
+    "layout": { "label": "Layout", "description": "Grids, panels, and spatial arrangement", "icons": ["layout-dashboard", "layout-grid", "sidebar", "panel-left", "panel-right", "maximize", "minimize", "expand", "shrink", "grip-vertical", "grid-3x3", "kanban", "columns", "rows", "layers", "inbox", "blocks"] },
+    "data": { "label": "Data", "description": "Tables, sorting, and structured data", "icons": ["list", "list-ordered", "table", "table-rows", "table-columns", "table-cells", "sort-asc", "sort-desc", "arrow-up-down", "spreadsheet", "pivot-table", "group", "ungroup"] },
+    "charts": { "label": "Charts & Analytics", "description": "Chart types, trends, and analytics concepts", "icons": ["bar-chart", "bar-chart-horizontal", "stacked-bar-chart", "line-chart", "area-chart", "pie-chart", "chart-donut", "histogram", "chart-scatter", "bubble-chart", "chart-radar", "chart-heatmap", "chart-treemap", "chart-sankey", "chart-funnel", "chart-waterfall", "chart-gantt", "candlestick-chart", "trending-up", "trending-down", "activity", "percent", "analytics", "metric", "kpi-card", "benchmark", "sparkline", "trendline", "chart-comparison", "chart-correlation", "chart-forecast", "chart-growth", "chart-decline", "chart-distribution"] },
+    "commerce": { "label": "Commerce", "description": "Shopping, payments, and logistics", "icons": ["credit-card", "shopping-cart", "shopping-bag", "store", "wallet", "dollar-sign", "receipt", "gift", "coupon", "barcode", "qr-code", "price-tag", "percent-circle", "shipping", "returns", "truck", "package", "box", "boxes", "container", "pallet", "forklift"] },
+    "business": { "label": "Business & Finance", "description": "Banking, contracts, and professional tools", "icons": ["calculator", "bank", "coins", "piggy-bank", "invoice", "contract", "signature", "stamp", "briefcase", "handshake", "scale", "target", "crown", "lighthouse"] },
+    "media": { "label": "Media & Creative", "description": "Photography, design tools, and text formatting", "icons": ["camera", "camera-off", "film", "palette", "brush", "pen-tool", "eyedropper", "crop", "type", "align-left", "align-center", "align-right", "align-justify", "pencil", "pen"] },
+    "devices": { "label": "Devices & Technology", "description": "Hardware, connectivity, and device types", "icons": ["smartphone", "tablet", "laptop", "monitor", "bluetooth", "usb", "battery", "battery-charging", "battery-low", "signal", "satellite", "robot", "chip"] },
+    "infrastructure": { "label": "Infrastructure", "description": "Development, servers, and system tools", "icons": ["code", "terminal", "server", "database", "cloud", "cloud-upload", "cloud-download", "cloud-cog", "cloud-lightning", "wifi", "wifi-off", "moon", "sun", "cpu", "hard-drive", "wrench", "tool", "hammer", "screwdriver", "nut", "plug", "cog", "sliders-horizontal", "gauge", "toggle-left", "toggle-right", "bug", "cctv"] },
+    "workflow": { "label": "Workflow & Dev", "description": "Version control, CI/CD, and project management", "icons": ["git-branch", "git-merge", "git-pull-request", "git-commit", "milestone", "workflow", "variable", "regex", "binary", "webhook", "api", "container-ship"] },
+    "healthcare": { "label": "Healthcare", "description": "Medical, wellness, and accessibility", "icons": ["stethoscope", "pill", "syringe", "heart-pulse", "bandage", "thermometer", "brain", "dna", "accessibility", "baby", "apple", "dumbbell"] },
+    "education": { "label": "Education", "description": "Learning, achievements, and school", "icons": ["book", "book-open", "graduation-cap", "notebook", "presentation", "trophy", "medal", "school", "lightbulb", "puzzle"] },
+    "transport": { "label": "Transportation", "description": "Vehicles, travel, and logistics", "icons": ["car", "bus", "train", "bicycle", "ship", "rocket", "helicopter", "taxi", "parking", "fuel", "map-compass"] },
+    "food": { "label": "Food & Hospitality", "description": "Dining, beverages, and culinary", "icons": ["utensils", "coffee", "wine", "pizza", "cake", "chef-hat", "grape", "wheat"] },
+    "home": { "label": "Home & Real Estate", "description": "Furniture, property, and living spaces", "icons": ["house", "apartment", "sofa", "lamp", "bed", "bath", "garden", "door-closed", "window", "air-conditioning"] },
+    "weather": { "label": "Weather", "description": "Climate, nature, and environment", "icons": ["umbrella", "wind", "droplet", "snowflake", "sunrise", "sunset", "leaf", "tree", "mountain"] },
+    "places": { "label": "Places", "description": "Buildings, locations, and geography", "icons": ["globe", "map", "map-pin", "compass", "route", "building", "building-2", "hospital", "factory", "warehouse", "landmark", "door-open", "garage", "fence", "construction", "anchor", "plane"] },
+    "shapes": { "label": "Shapes & Symbols", "description": "Geometric shapes and common symbols", "icons": ["circle", "square", "triangle", "diamond", "hexagon", "infinity", "asterisk", "hash-tag", "parentheses"] }
+  },
+  "structural": [
+    "chevron-down", "chevron-up", "chevron-left", "chevron-right",
+    "check", "x", "calendar", "clock", "search", "arrow-up",
+    "grip-vertical", "info", "check-circle", "alert-triangle", "x-circle"
+  ],
+  "structuralNote": "Framework components depend on these 15 icons. Always available via built-in essential set. Can be overridden via registerIcon() for visual consistency with third-party libraries.",
+  "fillDetection": "buildDataUri() auto-detects fill-based SVGs: if inner content contains fill= with a non-none value, uses fill='black' stroke='none' wrapper. Otherwise uses stroke-based wrapper (default). For SVGs relying on inherited fill (no explicit fill attr), add fill='currentColor' when registering.",
+  "weightControl": {
+    "description": "Stroke weight control via opts.weight. Named levels: thin(1), light(1.5), regular(2, default), medium(2.5), bold(3). Numeric values clamped to [0.5, 4]. Fill-based icons ignore weight.",
+    "cssClass": "d-i-{name}--w{value} where decimals use 'p' (e.g. w1p5 for 1.5). Default weight (2) produces no suffix."
+  },
+  "fillControl": {
+    "description": "Fill toggle via opts.filled (boolean, default false). Adds fill='black' alongside stroke attrs for stroke-based icons. Fill-based icons ignore this option.",
+    "cssClass": "d-i-{name}--filled. Combined with weight: d-i-{name}--w{value}-filled."
+  },
+  "api": {
+    "icon(name, opts?)": "Render icon as <span> with CSS mask-image. Supports weight, filled, and size options. Auto-detects fill vs stroke SVG format.",
+    "registerIcon(name, svgInner)": "Add a single custom icon",
+    "registerIcons(map)": "Bulk-register icons from { name: svgInner }",
+    "hasIcon(name)": "Check if icon is available",
+    "getIconNames()": "List all available icon names"
+  },
+  "config": {
+    "icons.library": "Optional string in decantr.config.json — signals to LLM which icon library the project uses (e.g. 'lucide', 'material', 'fontawesome'). Decantr does not act on this value."
+  },
+  "importGuide": "node tools/icons.js <svg-dir> [output.js] — import SVG directory as JS module"
+}

package/src/registry/index.json

@@ -0,0 +1,101 @@
+{
+  "$schema": "https://decantr.ai/schemas/registry.v1.json",
+  "version": "0.4.0",
+  "generated": "2026-03-17",
+  "modules": {
+    "decantr/core": {
+      "description": "DOM engine — hyperscript rendering, conditional, list, mount, lifecycle",
+      "file": "core.json",
+      "exports": 16
+    },
+    "decantr/state": {
+      "description": "Reactive primitives — signals, effects, memos, stores, batch",
+      "file": "state.json",
+      "exports": 12
+    },
+    "decantr/router": {
+      "description": "Client-side routing — hash or history mode",
+      "file": "router.json",
+      "exports": 9
+    },
+    "decantr/css": {
+      "description": "Atomic CSS engine + theme management",
+      "file": "css.json",
+      "exports": 23
+    },
+    "decantr/components": {
+      "description": "UI components — all return HTMLElement, all accept inline styles",
+      "file": "components.json",
+      "exports": 108
+    },
+    "decantr/tags": {
+      "description": "Proxy-based tag functions for concise markup",
+      "usage": "import { tags } from 'decantr/tags'; const { div, p } = tags; div({ class: 'card' }, p('Content'))"
+    },
+    "decantr/icons": {
+      "description": "First-party icon suite — undefined Lucide icons via CSS mask-image",
+      "file": "icons.json"
+    }
+  },
+  "archetypes": {
+    "description": "Domain archetypes for the Decantation Process — pre-mapped page patterns, organs, and layouts per domain",
+    "index": "archetypes/index.json",
+    "entries": {
+      "ecommerce": {
+        "file": "archetypes/ecommerce.json",
+        "description": "Online retail"
+      },
+      "saas-dashboard": {
+        "file": "archetypes/saas-dashboard.json",
+        "description": "Analytics/admin dashboard"
+      },
+      "portfolio": {
+        "file": "archetypes/portfolio.json",
+        "description": "Personal/agency showcase"
+      },
+      "content-site": {
+        "file": "archetypes/content-site.json",
+        "description": "Blog/magazine/documentation"
+      },
+      "docs-explorer": {
+        "file": "archetypes/docs-explorer.json",
+        "description": "Interactive documentation explorer"
+      },
+      "financial-dashboard": {
+        "file": "archetypes/financial-dashboard.json",
+        "description": "Financial services lending dashboard"
+      },
+      "recipe-community": {
+        "file": "archetypes/recipe-community.json",
+        "description": "AI-powered recipe sharing platform"
+      }
+    }
+  },
+  "patterns": {
+    "description": "Experience patterns — composable UI building blocks that archetypes reference",
+    "index": "patterns/index.json",
+    "count": 49
+  },
+  "recipes": {
+    "description": "Visual language recipes — composition rules for drastic visual transformations beyond token-level styling",
+    "entries": {
+      "command-center": {
+        "file": "recipe-command-center.json",
+        "style": "command-center",
+        "description": "HUD/radar visual language — monochromatic cyan, beveled frames, scanlines, status bars"
+      }
+    }
+  },
+  "atoms": {
+    "file": "atoms.json",
+    "description": "Atomic CSS utility classes — categorized prefix groups"
+  },
+  "tokens": {
+    "file": "tokens.json",
+    "description": "Design tokens derived from style seeds — 170+ CSS custom properties"
+  },
+  "foundations": {
+    "file": "foundations.json",
+    "description": "Foundation modules — core, state, router, form"
+  }
+}

package/src/registry/patterns/activity-feed.json

@@ -0,0 +1,37 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v1.json",
+  "id": "activity-feed",
+  "name": "Activity Feed",
+  "description": "Chronological list of activity events with avatars, timestamps, and action descriptions. Used in dashboards and profile pages.",
+  "components": ["Timeline", "Avatar", "Badge", "Text", "Separator"],
+  "default_blend": {
+    "layout": "stack",
+    "atoms": "_flex _flexCol _gap2 _p4",
+    "slots": {
+      "header": "Section title with _heading5 and optional filter/date-range controls",
+      "feed": "Timeline of activity items, each with Avatar, action Text, timestamp Badge, and Separator between entries",
+      "load-more": "Optional Button at bottom for pagination"
+    }
+  },
+  "recipe_overrides": {
+    "command-center": {
+      "wrapper": "cc-frame-sm",
+      "atoms": "cc-scanline",
+      "notes": "Header uses cc-bar with cc-label. Timestamps use cc-data. Feed area gets cc-scanline. New/unread items get cc-glow pulse."
+    },
+    "auradecantism": {
+      "wrapper": "d-glass",
+      "atoms": "_r4",
+      "notes": "Feed in d-glass panel. New items highlighted with subtle glow. Timestamps in muted text."
+    },
+    "clean": {
+      "wrapper": "",
+      "atoms": "_b1 _r4",
+      "notes": "Feed in bordered container. Simple list items with bottom borders."
+    }
+  },
+  "code": {
+    "imports": "import { tags } from 'decantr/tags';\nimport { css } from 'decantr/css';\nimport { Avatar, Badge, Button } from 'decantr/components';",
+    "example": "function ActivityFeed() {\n  const { div, span, h3 } = tags;\n  const items = [\n    { avatar: '', user: 'Alice Chen', action: 'deployed v2.4.1 to production', time: '2 min ago', type: 'success' },\n    { avatar: '', user: 'Bob Patel', action: 'opened pull request #142', time: '15 min ago', type: 'default' },\n    { avatar: '', user: 'Carol Liu', action: 'commented on issue #89', time: '1 hour ago', type: 'default' },\n    { avatar: '', user: 'Dan Kim', action: 'merged branch feature/auth', time: '3 hours ago', type: 'success' }\n  ];\n\n  return div({ class: css('_flex _col _gap2 _p4') },\n    h3({ class: css('_heading5') }, 'Recent Activity'),\n    ...items.map(item =>\n      div({ class: css('_flex _gap3 _aic _py2 _borderB') },\n        Avatar({ src: item.avatar, name: item.user, size: 'sm' }),\n        div({ class: css('_flex _col _flex1') },\n          span({ class: css('_textsm') }, span({ class: css('_bold') }, item.user), ` ${item.action}`),\n          span({ class: css('_textxs _fgmuted') }, item.time)\n        ),\n        Badge({ variant: item.type === 'success' ? 'success' : 'default' }, item.type)\n      )\n    ),\n    Button({ variant: 'ghost', class: css('_wfull _mt2') }, 'Load More')\n  );\n}"
+  }
+}

package/src/registry/patterns/article-content.json

@@ -0,0 +1,27 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v1.json",
+  "id": "article-content",
+  "name": "Article Content",
+  "description": "Long-form article layout with sticky table-of-contents sidebar. Used for documentation, blog posts, and content-heavy pages.",
+  "components": ["Card", "Avatar", "Badge", "Text", "Separator"],
+  "default_blend": {
+    "layout": "grid",
+    "atoms": "_grid _gc12 _gap8 _p6",
+    "slots": {
+      "toc-sidebar": "Sticky nav list in a 3-column sidebar with _colSpan3, built from heading anchors",
+      "article": "Main content area with _colSpan9, containing prose Text and Card sections",
+      "author": "Card at article end with Avatar, bio Text, and links, preceded by Separator"
+    }
+  },
+  "recipe_overrides": {
+    "command-center": {
+      "wrapper": "cc-frame",
+      "atoms": "cc-scanline",
+      "notes": "ToC headings use cc-label. Active ToC item gets cc-glow. Article headings use cc-label. Code blocks use cc-scanline with cc-data for line numbers."
+    }
+  },
+  "code": {
+    "imports": "import { tags } from 'decantr/tags';\nimport { css } from 'decantr/css';\nimport { Separator, Avatar } from 'decantr/components';",
+    "example": "function ArticleContent() {\n  const { div, h1, p, span, time, article: articleEl } = tags;\n  const article = {\n    title: 'Building Scalable Design Systems',\n    author: { avatar: '', name: 'Jane Doe' },\n    date: 'Mar 12, 2026',\n    readTime: '8 min read',\n    html: '<p>Design systems provide a shared language between design and engineering. By establishing reusable components and tokens, teams ship faster while maintaining consistency.</p>'\n  };\n\n  return articleEl({ class: css('_flex _col _gap6 _mw[720px] _mxa _py8') },\n    div({ class: css('_flex _col _gap3') },\n      h1({ class: css('_heading1') }, article.title),\n      div({ class: css('_flex _aic _gap3') },\n        Avatar({ src: article.author.avatar, name: article.author.name, size: 'sm' }),\n        span({ class: css('_textsm') }, article.author.name),\n        time({ class: css('_textsm _fgmuted') }, article.date),\n        span({ class: css('_textsm _fgmuted') }, article.readTime)\n      )\n    ),\n    Separator(),\n    div({ class: css('_body _lhrelaxed'), innerHTML: article.html })\n  );\n}"
+  }
+}