@decantr/content 3.8.0

package/patterns/governance-ballot.json

@@ -0,0 +1,126 @@
+{
+  "id": "governance-ballot",
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Governance Ballot",
+  "description": "A governance voting ballot for shareholder resolutions or DAO proposals, featuring proposal context, single/multi/weighted vote options, rationale capture, voting-power disclosure, and quorum progress tracking.",
+  "category": "finance",
+  "tags": [
+    "2026",
+    "finance",
+    "governance",
+    "voting",
+    "dao",
+    "ballot",
+    "proposal",
+    "democracy"
+  ],
+  "components": [
+    "ProposalHeader",
+    "VoteOption",
+    "WeightSlider",
+    "RationaleBox",
+    "VotingPower",
+    "SubmitVote",
+    "QuorumProgress",
+    "VoteOptionRadio",
+    "VoteOptionCheckbox"
+  ],
+  "default_preset": "single-choice",
+  "presets": {
+    "single-choice": {
+      "description": "Radio-button ballot where voters select exactly one option from Yes/No/Abstain or a list of mutually exclusive choices. Standard for binary or simple-choice proposals like director elections and bylaw amendments.",
+      "layout": {
+        "layout": "form",
+        "atoms": "_w100 _grid _gap4 _p6"
+      }
+    },
+    "multi-choice": {
+      "description": "Checkbox ballot allowing selection of multiple compatible options. Used for board-slate elections where voters pick multiple candidates or for approving multiple non-exclusive resolutions within one ballot.",
+      "layout": {
+        "layout": "form",
+        "atoms": "_w100 _grid _gap4 _p6"
+      }
+    },
+    "weighted": {
+      "description": "Slider-based ballot letting voters allocate their voting power across multiple options by percentage. Slider values sum to 100% with live redistribution, used for quadratic voting and budget-allocation proposals.",
+      "layout": {
+        "layout": "form",
+        "atoms": "_w100 _grid _gap4 _p6"
+      }
+    }
+  },
+  "visual_brief": "A focused ballot card rendered as a d-surface with generous padding, centered in the viewport with max-width 640px. At the top, a QuorumProgress bar spans the full card width showing a horizontal thin progress track with the filled portion in primary color and quorum-threshold marked by a vertical tick with label ('Quorum: 51%'). Above the bar, a small d-annotation chip shows 'Quorum met' or 'Quorum pending' status. Below sits the ProposalHeader: proposal number in mono-data muted ('Proposal #2026-04'), proposal title in text-xl semibold, proposal summary in text-sm body copy, and a meta row with chips for proposal type (bylaw/slate/resolution/treasury), voting deadline (countdown timer), and proposer identity. A divider separates the header from the voting interface. The VoteOption list renders as stacked cards; single-choice uses large radio circles with 24px diameter left-aligned, multi-choice uses 20px square checkboxes, and weighted uses horizontal sliders with live percentage readouts. Each option has an option-label in semibold and an option-description in body-muted text. When weighted, a constraint message shows 'Must total 100%' with a live sum chip that turns emerald when valid or amber when not. Below options, the RationaleBox is an expandable textarea labeled 'Rationale (optional)' with 'Public' toggle determining whether the rationale becomes visible with the vote record. Below that, VotingPower renders as a callout card showing the voter's power prominently: 'Your voting power: 2,345 shares = 1.2% of eligible' in text-lg mono-data semibold, with entitlement source (e.g., 'Held since record date Mar 15, 2026'). Finally, a large SubmitVote button spans the full width in primary color with text 'Cast Vote' — once cast, transforms to a disabled success chip showing 'Vote recorded — tx 0xabc...'. The entire card uses subtle shadow elevation. All interactions include confirmation dialogs before irrevocable submission.",
+  "layout_hints": {
+    "container": "d-surface card, centered, max-w-640px",
+    "note": "Governance ballots are irrevocable actions. Require explicit confirmation before submission. Never auto-submit. Disclose voting power and quorum status prominently.",
+    "quorum_progress": "QuorumProgress uses d-annotation[data-bar] with primary fill + vertical quorum-threshold tick. Show percentage numeric label above bar.",
+    "vote_options": "VoteOption cards are d-surface[data-interactive] with selected state showing thicker border + primary accent. Radio=circle 24px, Checkbox=square 20px, Slider=100% width horizontal track with numeric readout.",
+    "voting_power": "VotingPower MUST display before SubmitVote button. Shows shares/tokens held + percentage of eligible supply. Include entitlement source (record date, delegation, etc.).",
+    "submit_guard": "SubmitVote opens confirmation dialog showing: selected option(s), rationale preview, voting power committed, and 'this action cannot be undone' warning. Transaction hash returned after submission."
+  },
+  "default_layout": {
+    "layout": "form",
+    "atoms": "_w100 _grid _gap4 _p6 _max-w-640",
+    "slots": {
+      "quorum-progress": "Top of card. Horizontal progress bar showing votes-cast as percentage of total eligible. Quorum threshold marked with vertical tick line and numeric label. Status chip above bar indicates whether quorum has been achieved.",
+      "proposal-header": "Section showing proposal number, title, summary, proposer identity, voting deadline countdown, and proposal-type chip. Uses text-xl semibold for title and body-muted for summary. Links to full proposal document.",
+      "vote-options": "Repeating slot — one VoteOption per choice. Renders as radio (single-choice), checkbox (multi-choice), or slider (weighted) based on preset. Each option card shows option-label, description, and selected-state indicator. Clicking selects the option.",
+      "weight-sliders": "Weighted-preset-only slot. Horizontal sliders for each option with live percentage readouts. A constraint message shows total-must-equal-100% with validation chip that changes color based on current sum.",
+      "rationale-box": "Optional expandable textarea for voter's written rationale. Includes 'Public' toggle controlling whether rationale becomes visible in the public vote record versus kept private to the voter.",
+      "voting-power": "Callout card showing voter's voting weight (shares/tokens), percentage of eligible supply, and entitlement source (record date, delegation chain, token balance timestamp).",
+      "submit-vote": "Full-width primary-color submit button. Triggers confirmation dialog before finalizing. Post-submission, transforms to success chip showing transaction hash and timestamp."
+    }
+  },
+  "accessibility": {
+    "role": "form",
+    "aria-label": "Governance voting ballot",
+    "announcements": [
+      "Selected option: {option}",
+      "Current weight allocation: {total}%",
+      "Vote submitted — transaction {hash}",
+      "Quorum {met|pending}: {percent}% of eligible have voted"
+    ],
+    "keyboard": [
+      "Tab: cycle through vote options and form controls",
+      "Space/Enter: select radio or toggle checkbox",
+      "Arrow keys: adjust slider weight (weighted preset)",
+      "Enter: submit ballot from SubmitVote button",
+      "Escape: cancel confirmation dialog"
+    ]
+  },
+  "responsive": {
+    "mobile": "Full-width ballot card with padding reduced to 16px. VoteOption cards stack vertically at full width. WeightSlider becomes vertical on very narrow screens. VotingPower callout collapses to compact summary. SubmitVote remains full-width.",
+    "tablet": "Centered ballot card at 90% viewport width. Standard layout with all slots visible."
+  },
+  "motion": {
+    "micro": {
+      "option-select": "border-width 1px to 2px + background tint 150ms ease-out",
+      "slider-drag": "track-fill width update 80ms linear",
+      "quorum-fill": "progress-bar width 0 to target 600ms ease-out on mount"
+    },
+    "transitions": {
+      "rationale-expand": "height auto + fade 200ms ease-out",
+      "submit-to-recorded": "button scale + cross-fade to success chip 400ms ease-out",
+      "weight-redistribute": "sibling-slider values ease-in-out 200ms"
+    },
+    "ambient": {
+      "deadline-countdown": "pulse timer display when <24h remaining 1s ease-in-out infinite"
+    }
+  },
+  "interactions": [
+    "click-select",
+    "animate-on-mount",
+    "scale-hover"
+  ],
+  "composition": {
+    "GovernanceBallot": "Surface(d-surface, form, max-w-640) > [QuorumProgress + ProposalHeader + VoteOption[] + WeightSlider[]? + RationaleBox + VotingPower + SubmitVote]",
+    "ProposalHeader": "Section(d-annotation) > [ProposalNumber + ProposalTitle + ProposalSummary + ProposerIdentity + DeadlineCountdown + TypeChip]",
+    "VoteOption": "Card(d-surface, data-interactive, data-selected?) > [OptionIndicator(radio|checkbox|slider) + OptionLabel + OptionDescription]",
+    "WeightSlider": "Control(d-annotation, data-slider) > [SliderTrack + SliderThumb + PercentReadout]",
+    "VotingPower": "Callout(d-annotation, data-voting-power) > [SharesHeld + PercentEligible + EntitlementSource]",
+    "QuorumProgress": "Bar(d-annotation, data-bar) > [ProgressTrack + ProgressFill + QuorumTick + StatusChip]",
+    "SubmitVote": "Button(d-control, data-primary, full-width) > [ButtonLabel + ConfirmationDialog?]"
+  }
+}

package/patterns/help-modal.json

@@ -0,0 +1,155 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "id": "help-modal",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Help Modal",
+  "description": "Keyboard shortcuts help overlay with categorized shortcuts and search.",
+  "dependencies": {
+    "patterns": {},
+    "styles": {
+      "terminal": "^1.0.0"
+    },
+    "requires_core": {
+      "components": [
+        "icon"
+      ],
+      "charts": []
+    }
+  },
+  "components": [
+    "icon"
+  ],
+  "default_preset": "standard",
+  "presets": {
+    "standard": {
+      "description": "Full categorized keyboard shortcuts modal",
+      "components": [
+        "icon"
+      ],
+      "layout": {
+        "layout": "stack",
+        "atoms": "_fixed _inset0 _flex _center _z[100] _bg[rgba(0,0,0,0.9)]",
+        "slots": {
+          "header": "Title and close button",
+          "search": "Filter shortcuts",
+          "categories": "Shortcut categories",
+          "shortcuts": "Key + description pairs"
+        }
+      }
+    },
+    "minimal": {
+      "description": "Compact quick reference card showing a flat shortcut list without categories or search",
+      "components": [],
+      "layout": {
+        "layout": "stack",
+        "atoms": "_fixed _inset0 _flex _center _z[100] _bg[rgba(0,0,0,0.8)]",
+        "slots": {
+          "shortcuts": "Compact shortcut list"
+        }
+      }
+    }
+  },
+  "default_layout": {
+    "layout": "stack",
+    "atoms": "_fixed _inset0 _flex _center _z[100]",
+    "slots": {
+      "header": "Title",
+      "categories": "Shortcut categories",
+      "shortcuts": "Key bindings"
+    }
+  },
+  "features": [
+    "keyboard-searchable",
+    "categorized",
+    "toggle-shortcut"
+  ],
+  "default_shortcuts": [
+    {
+      "name": "Navigation",
+      "items": [
+        {
+          "key": "?",
+          "description": "Toggle help"
+        },
+        {
+          "key": "Ctrl+K",
+          "description": "Command palette"
+        },
+        {
+          "key": "F1",
+          "description": "Help"
+        },
+        {
+          "key": "F4",
+          "description": "Quit"
+        }
+      ]
+    },
+    {
+      "name": "Panes",
+      "items": [
+        {
+          "key": "Ctrl+\\",
+          "description": "Toggle pane focus"
+        },
+        {
+          "key": "Ctrl+Shift+Left",
+          "description": "Resize pane left"
+        },
+        {
+          "key": "Ctrl+Shift+Right",
+          "description": "Resize pane right"
+        }
+      ]
+    },
+    {
+      "name": "Terminal",
+      "items": [
+        {
+          "key": "Ctrl+L",
+          "description": "Clear screen"
+        },
+        {
+          "key": "Ctrl+R",
+          "description": "Search history"
+        },
+        {
+          "key": "Up/Down",
+          "description": "History navigation"
+        }
+      ]
+    }
+  ],
+  "visual_brief": "Centered modal overlay with a title ('Keyboard Shortcuts') and an optional search input. The body is organized into categorized sections (General, Navigation, Editing, etc.) with muted category headers. Each shortcut row shows the action description on the left and the key combination on the right rendered as styled key cap badges (bordered rounded boxes with monospace text, e.g., [Cmd] + [K]). Sections are separated by subtle dividers. Minimal preset removes categories and shows a flat list.",
+  "responsive": {
+    "mobile": "Modal takes near-full screen. Shortcuts list scrolls vertically. Key badges remain readable. Search input at top for quick filtering.",
+    "tablet": "Centered modal at 520px width. Standard layout with categories.",
+    "desktop": "Centered modal at 600px width. Optional two-column layout for dense shortcut lists."
+  },
+  "layout_hints": {
+    "modal_priority": "Lead with the title and search first, then shortcut categories, then individual bindings. The user should find a shortcut quickly rather than admire the modal.",
+    "category_rhythm": "Categories should visually separate shortcut families without overwhelming the key/action pairs themselves.",
+    "terminal_tone": "Even in a terminal theme, the modal should feel readable and instructional before it feels atmospheric."
+  },
+  "motion": {
+    "micro": "Focused key rows and search affordances may sharpen subtly, and the overlay may confirm category filtering without heavy movement.",
+    "transitions": "Modal open and close should feel quick and utility-driven, preserving the sense of an ephemeral help overlay."
+  },
+  "interactions": [
+    "animate-on-mount",
+    "focus-trap",
+    "keyboard-navigation",
+    "click-select"
+  ],
+  "accessibility": {
+    "role": "dialog",
+    "aria-label": "Keyboard shortcuts help",
+    "keyboard": [
+      "Focus should move into the search field or first shortcut row on open, and Escape should reliably close the dialog."
+    ],
+    "announcements": [
+      "Shortcut category, key combination, and action should be announced together so the help content is meaningful beyond visual keycap styling."
+    ]
+  }
+}

package/patterns/hero-split.json

@@ -0,0 +1,125 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "id": "hero-split",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Hero Split",
+  "description": "Split hero section with media (logo, screenshot, product image, or photo mockup) on one side and text with CTAs on the other. Supports pill-shaped buttons, responsive stacking, and subtle background tinting when the theme calls for it. The split layout places emphasis on brand identity alongside a clear value proposition.",
+  "dependencies": {
+    "patterns": {},
+    "styles": {},
+    "requires_core": {
+      "components": [
+        "Button",
+        "Image"
+      ],
+      "charts": []
+    }
+  },
+  "components": [
+    "Button",
+    "Image"
+  ],
+  "contained": false,
+  "default_preset": "standard",
+  "presets": {
+    "standard": {
+      "description": "Media on left (1/3 width) with logo or image, content on right (2/3 width) with title, tagline, and pill CTA buttons. Background stays calm and supports the media; avoid decorative orb/blob layers. Responsive: stacks vertically on mobile with media on top.",
+      "components": [
+        "Button",
+        "Image"
+      ],
+      "layout": {
+        "layout": "hero",
+        "atoms": "_flex _row _items[center] _gap16 _mw[1200px] _mx[auto] _px10 _wfull _minh[100vh] _relative _z2",
+        "slots": {
+          "media-area": "Left column at flex: 0 0 35%, centered content. Contains logo or hero image with float animation and drop-shadow. Wrapper: _flex _items[center] _justify[center]",
+          "title": "Large heading with _heading1 _fw800 _lh[1.1] _ls[-0.03em] _mb7. Supports inline accent color spans for punctuation or keywords.",
+          "tagline": "Supporting paragraph with _body _fgmuted/60 _mw[540px] _lh[1.75] _mb10. Supports inline accent spans with _fgprimary _fw700 _italic.",
+          "cta-group": "Horizontal button group with _flex _gap4 _flexwrap. Contains primary pill Button (rounded-full, shadow) and ghost pill Button (border, transparent bg)."
+        }
+      }
+    },
+    "reversed": {
+      "description": "Content on left (2/3 width) with title, tagline, and CTA buttons. Media on right (1/3 width) with image or illustration. Good for right-handed visual emphasis.",
+      "components": [
+        "Button",
+        "Image"
+      ],
+      "layout": {
+        "layout": "hero",
+        "atoms": "_flex _row _items[center] _gap16 _mw[1200px] _mx[auto] _px10 _wfull _minh[100vh] _relative _z2",
+        "slots": {
+          "title": "Large heading on the left with _heading1 _fw800 _lh[1.1] _ls[-0.03em] _mb7",
+          "tagline": "Supporting paragraph with _body _fgmuted/60 _mw[540px] _lh[1.75] _mb10",
+          "cta-group": "Horizontal button group with _flex _gap4, primary pill + ghost pill Buttons",
+          "media-area": "Right column at flex: 0 0 35%, contains hero image or illustration with float animation"
+        }
+      }
+    },
+    "centered": {
+      "description": "Centered single-column layout with media above and text below. Logo/image centered at top, followed by centered title, tagline, and CTA buttons. Good for simpler landing pages.",
+      "components": [
+        "Button",
+        "Image"
+      ],
+      "layout": {
+        "layout": "hero",
+        "atoms": "_flex _col _items[center] _text[center] _minh[100vh] _justify[center] _px6 _relative",
+        "slots": {
+          "media-area": "Centered image/logo above text with _mb8, max-width constrained",
+          "title": "Centered heading with _heading1 _fw800 _lh[1.1] _mb6 _text[center]",
+          "tagline": "Centered paragraph with _body _fgmuted/60 _mw[600px] _text[center] _mb10",
+          "cta-group": "Centered button group with _flex _gap4 _justify[center], pill Buttons"
+        }
+      }
+    }
+  },
+  "default_layout": {
+    "layout": "hero",
+    "atoms": "_flex _row _items[center] _gap16 _mw[1200px] _mx[auto] _px10 _wfull _minh[100vh] _relative _z2",
+    "slots": {
+      "media-area": "Logo or hero image area (1/3 width)",
+      "title": "Primary heading with accent punctuation",
+      "tagline": "Supporting paragraph with accent inline spans",
+      "cta-group": "Pill-shaped action buttons"
+    }
+  },
+  "io": {
+    "consumes": [],
+    "produces": [],
+    "actions": [
+      "cta-click"
+    ]
+  },
+  "visual_brief": "Two-column section with a media area (logo, hero image, product screenshot, or photo mockup) taking roughly one-third width on the left and a text content area on the right. The text area contains a large primary heading with accent-colored punctuation, a supporting tagline paragraph with accent-colored inline spans, and a row of pill-shaped CTA buttons (primary filled, secondary outlined). Background treatment should stay restrained and never compete with the actual media. Reversed preset flips the columns. Centered preset stacks both columns vertically with centered alignment.",
+  "responsive": {
+    "mobile": "Columns stack vertically — media on top, text content below. CTA buttons go full-width stacked. Decorative background layers should be removed or reduced to a simple tint.",
+    "tablet": "Side-by-side layout maintained with tighter proportions. Media area shrinks to 40% width.",
+    "desktop": "Full split layout with generous whitespace. Media at one-third, content at two-thirds."
+  },
+  "layout_hints": {
+    "narrative_split": "The media side should support the value proposition, not compete with it. Preserve a clear left-right hierarchy where one side establishes proof or brand and the other carries the decision-making copy.",
+    "cta_rhythm": "Primary and secondary actions should read as one compact decision cluster below the core message rather than stretching the hero vertically.",
+    "mobile_stack": "When stacked, keep media, heading, supporting copy, and CTAs in a confident narrative order so the hero still feels intentional on small screens."
+  },
+  "motion": {
+    "micro": "CTAs and media elements may float or sharpen subtly on hover, but the hero should remain composed and premium rather than restless.",
+    "transitions": "Hero entry should move slowly and confidently, reinforcing atmosphere without distracting from copy."
+  },
+  "interactions": [
+    "animate-on-mount",
+    "stagger-children",
+    "scroll-reveal"
+  ],
+  "accessibility": {
+    "role": "region",
+    "aria-label": "Split hero section",
+    "keyboard": [
+      "Primary and secondary hero actions should be easy to reach in order after the main message."
+    ],
+    "announcements": [
+      "Heading, supporting message, and the relationship between media and CTA context should be understandable without relying on visual split composition alone."
+    ]
+  }
+}

package/patterns/hero.json

@@ -0,0 +1,227 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "id": "hero",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Hero Section",
+  "description": "Full-width hero with headline, subtext, CTA buttons, and optional media. Entry point for landing pages, recipe detail headers, and marketing sections.",
+  "dependencies": {
+    "patterns": {},
+    "styles": {},
+    "requires_core": {
+      "components": [
+        "Avatar",
+        "Badge",
+        "Button",
+        "Chip",
+        "Image",
+        "icon"
+      ],
+      "charts": []
+    }
+  },
+  "components": [
+    "Button",
+    "icon"
+  ],
+  "default_preset": "landing",
+  "presets": {
+    "landing": {
+      "description": "Centered headline + CTA + optional media",
+      "components": [
+        "Button",
+        "icon"
+      ],
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _col _aic _textc _gap6 _py16 _px6",
+        "slots": {
+          "headline": "Primary heading, typically h1 with _heading1",
+          "description": "Supporting paragraph with _body _muted",
+          "cta-group": "Horizontal Button group with _flex _gap3",
+          "media": "Optional image, illustration, or chart component"
+        }
+      }
+    },
+    "image-overlay": {
+      "description": "Full-bleed image with gradient overlay, content at bottom. Used for recipe/cookbook detail headers.",
+      "components": [
+        "Button",
+        "Chip",
+        "icon"
+      ],
+      "layout": {
+        "layout": "stack",
+        "atoms": "_rel _wfull _h[400px] _overhidden _r4",
+        "slots": {
+          "image": "Full-bleed background cover image with gradient overlay",
+          "top-bar": "Absolute top row: back button (left) + action buttons (right)",
+          "tags": "Optional horizontal Chip row for tags overlaid on image",
+          "title": "Title (_heading2) overlaid at bottom of image",
+          "description": "Short description overlaid below title"
+        }
+      }
+    },
+    "brand": {
+      "description": "Full-viewport centered hero with massive headline, animated decorations, and dual CTAs. Entry point for brand landing pages.",
+      "components": [
+        "Button",
+        "Badge",
+        "Chip",
+        "icon",
+        "Image"
+      ],
+      "layout": {
+        "layout": "hero",
+        "atoms": "_flex _col _aic _textc _gap8 _py24 _px6 _minh[100vh] _jcc _rel",
+        "slots": {
+          "badge": "Optional announcement pill (Badge) above headline",
+          "media": "Optional logo or illustration with d-float + aura-glow-strong animation",
+          "headline": "Display-size heading with d-heading-display + d-gradient-text",
+          "description": "Supporting paragraph with _body _fgmuted _mw[640px]",
+          "cta-group": "Horizontal Button group with _flex _gap3, primary gets aura-glow",
+          "decoration": "Absolute-positioned aura-orb elements for ambient background effect"
+        }
+      }
+    },
+    "vision": {
+      "description": "AI-native vision statement hero with gradient headline, value prop, and dual CTAs. Hero-only gradient treatment.",
+      "components": [
+        "Button",
+        "icon"
+      ],
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _col _aic _textc _gap8 _py24 _px6 _minh[100vh] _jcc _rel",
+        "slots": {
+          "decoration": "Absolute-positioned aura-orb elements for ambient background",
+          "headline": "Display-size heading with d-heading-hero (gradient-only class)",
+          "description": "Value proposition paragraph with _textlg _fgmuted _mw[640px]",
+          "cta-group": "Horizontal Button group: primary (npx decantr init) + secondary (View Showcase)"
+        }
+      }
+    },
+    "split": {
+      "description": "Two-column hero: media/logo on one side, headline + description + CTAs on the other. Stacks vertically on mobile.",
+      "components": [
+        "Button",
+        "Badge",
+        "icon",
+        "Image"
+      ],
+      "layout": {
+        "layout": "row",
+        "atoms": "_grid _gc1 _lg:gc2 _gap8 _py24 _px6 _minh[100vh] _aic _rel",
+        "slots": {
+          "media": "Logo, illustration, or image \u2014 centered in its grid cell",
+          "badge": "Optional announcement pill (Badge) above headline",
+          "headline": "Display-size heading, left-aligned on desktop",
+          "description": "Supporting paragraph with _body _fgmuted",
+          "cta-group": "Horizontal Button group, left-aligned on desktop",
+          "decoration": "Optional absolute-positioned decorative elements"
+        }
+      }
+    },
+    "section-primary": {
+      "description": "Compact content-dense hero for primary section pages (NOT marketing landing). Short vertical height (~120-180px), leaves most above-fold real estate for the content below. Eyebrow + headline + optional subtitle + inline CTAs — no full-bleed media, splash, or minimum-viewport-height directive. Use for /marketplace, /agents, /transparency, and other in-app primary routes where the user already knows they're in the product.",
+      "components": [
+        "Button",
+        "Badge"
+      ],
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _col _gap3 _py8 _px6",
+        "slots": {
+          "eyebrow": "Short all-caps monospace label with section context (e.g., 'AGENT MARKETPLACE'). Use d-label[data-anchor] when the theme ships that treatment.",
+          "headline": "h2-to-h3 weight heading. NOT display-size. One line preferred — the content below is the main event, not this.",
+          "description": "Optional one-sentence subtitle with _textsm _fgmuted. Omit entirely if the headline is self-sufficient.",
+          "cta-group": "Horizontal Button group inline with the headline row. Primary CTA + at most one secondary. Do not stack CTAs vertically in this preset."
+        }
+      }
+    },
+    "image-overlay-compact": {
+      "description": "Compact full-bleed image with overlay for collection headers. Shorter height, fewer slots.",
+      "components": [
+        "Button",
+        "Badge",
+        "Avatar",
+        "icon"
+      ],
+      "layout": {
+        "layout": "stack",
+        "atoms": "_rel _wfull _h[300px] _overhidden _r4",
+        "slots": {
+          "image": "Full-bleed background cover image with gradient overlay",
+          "top-actions": "Absolute top-right: edit and delete action Buttons",
+          "content": "Absolute bottom: title (_heading2), count Badge, author Avatar + name"
+        }
+      }
+    },
+    "empty-state": {
+      "description": "Empty state placeholder with illustration slot, message, and action CTA. Used when a list or page has no data yet.",
+      "components": [
+        "Button",
+        "icon"
+      ],
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _col _aic _textc _gap4 _py12 _px6",
+        "slots": {
+          "illustration": "Large icon or illustration placeholder",
+          "title": "Empty state heading with _heading4",
+          "description": "Explanatory text with _body _fgmuted",
+          "cta": "Primary action Button to create first item or import data"
+        }
+      }
+    }
+  },
+  "accessibility": {
+    "role": "banner",
+    "aria-label": "Hero section",
+    "keyboard": [
+      "Tab to CTA button",
+      "Enter activates CTA"
+    ],
+    "announcements": [
+      "Page title announced on load"
+    ],
+    "focus_management": "CTA button is the primary focus target"
+  },
+  "visual_brief": "Full-width section dominating the viewport with a bold, large-scale headline centered or left-aligned depending on preset. Generous vertical padding (4-6rem top/bottom) creates breathing room. Subtext sits beneath the headline in muted, lighter-weight type with relaxed line-height. One or two CTA buttons are arranged horizontally with equal height \u2014 the primary filled, the secondary ghost-outlined. Optional media (illustration, screenshot, product image, photo, or restrained ambient treatment) appears below or beside the content. Brand preset fills the first viewport with clear brand/product/place signal and real supporting media when available. Split preset uses a two-column grid with content on one side and media on the other.",
+  "responsive": {
+    "mobile": "Single column, stacked vertically. Headline drops to heading2 scale. CTAs stack full-width. Padding reduces to py8 px4. Media goes below content at full width. Min-height removed on brand/vision presets.",
+    "tablet": "Content remains centered or stacked. Headline at heading1 scale. CTAs stay horizontal. Split preset still single-column. Padding at py12 px6.",
+    "desktop": "Full layout as designed \u2014 centered or split two-column. Headline at display scale for brand/vision. Generous py16-py24 padding. Split preset activates side-by-side grid. Decorative elements visible."
+  },
+  "motion": {
+    "micro": "CTA buttons scale subtly on hover (scale 1.02). Badge shimmer on announcement pill.",
+    "transitions": "Hero entrance: headline fades up from 20px below with 600ms ease-out. Subtext follows 150ms later. CTAs follow 300ms after subtext. Brand preset media may float gently with vertical oscillation when it does not obscure or compete with the copy."
+  },
+  "interactions": [
+    "animate-on-mount",
+    "stagger-children",
+    "scale-hover",
+    "glow-hover",
+    "float-idle"
+  ],
+  "layout_hints": {
+    "container": "none",
+    "note": "Hero sections should NOT wrap content in d-surface cards. The hero IS the section. Use d-section for spacing.",
+    "visual_proof": "The visual element below CTAs should be an ambient visualization (animated gradient, particle effect, blurred screenshot) \u2014 NOT a data widget wrapped in a card. If showing product data (agents, metrics), render as floating elements without card containment. Omit entirely if no meaningful visual is available.",
+    "subtitle": "Subtitle line-height should be 1.6-1.8. Use text-muted color, smaller font than heading.",
+    "cta_sizing": "Primary and secondary CTAs should have equal padding and height. Primary is filled (d-interactive[data-variant=primary]), secondary is ghost (d-interactive[data-variant=ghost]).",
+    "announcement": "If showing an announcement badge above the heading, use d-annotation with prominent styling \u2014 not a tiny muted pill. Accent border or accent background at 15% opacity.",
+    "background": "Hero sections should have a subtle radial or mesh gradient background using the theme palette \u2014 not a flat color. Use the primary and accent colors at very low opacity (5-10%) to create depth. Example: radial-gradient(ellipse at top center, rgba(var(--d-accent-rgb), 0.08) 0%, transparent 60%), or a soft gradient from primary to transparent. The gradient should fade to var(--d-bg) at the edges so it blends seamlessly with the page.",
+    "ambient_glow": "For themes with neon/glow personality, add a soft ambient glow behind the hero heading or CTA area. Use a blurred pseudo-element or box-shadow with the accent color at 10-15% opacity, radius 200-400px. This creates a focal point without overwhelming the content."
+  },
+  "default_layout": {
+    "layout": "stack",
+    "atoms": "_flex _col _aic _textc _gap6 _py16 _px6",
+    "slots": {
+      "headline": "Primary heading, typically h1 with _heading1",
+      "description": "Supporting paragraph with _body _muted",
+      "cta-group": "Horizontal Button group with _flex _gap3",
+      "media": "Optional image, illustration, or chart component"
+    }
+  }
+}