@decantr/content 3.8.0

package/patterns/post-list.json

@@ -0,0 +1,147 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "id": "post-list",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Post List",
+  "description": "Chronological list of posts, articles, or news items with author, date, and preview.",
+  "tags": [
+    "content",
+    "news",
+    "blog",
+    "feed",
+    "articles"
+  ],
+  "classification": {
+    "triggers": [
+      "news feed",
+      "blog posts",
+      "articles",
+      "announcements",
+      "updates"
+    ],
+    "tier": "recommended"
+  },
+  "components": ["Card", "Badge", "Avatar", "Text", "icon"],
+  "default_preset": "default",
+  "presets": {
+    "default": {
+      "description": "Standard post list with thumbnails",
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _col _gap4",
+        "slots": {
+          "posts": "Chronological list of post rows with thumbnail, title, metadata, excerpt, and optional badge"
+        },
+        "style": "list",
+        "showThumbnail": true
+      }
+    },
+    "compact": {
+      "description": "Dense single-column list without thumbnails, showing only title, date, and category per row",
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _col _gap2",
+        "slots": {
+          "posts": "Compact list rows with title, date, and category metadata only"
+        },
+        "style": "list",
+        "showThumbnail": false
+      }
+    },
+    "cards": {
+      "description": "Card-based layout for featured posts",
+      "layout": {
+        "layout": "grid",
+        "atoms": "_grid _gap4 _md:gc2",
+        "slots": {
+          "posts": "Featured post cards with thumbnail, title, excerpt, author, and metadata"
+        },
+        "style": "cards",
+        "columns": 2
+      }
+    }
+  },
+  "slots": {
+    "title": {
+      "type": "text",
+      "required": true
+    },
+    "excerpt": {
+      "type": "text",
+      "required": false
+    },
+    "author": {
+      "type": "user",
+      "required": false
+    },
+    "date": {
+      "type": "datetime",
+      "required": true
+    },
+    "thumbnail": {
+      "type": "image",
+      "required": false
+    },
+    "category": {
+      "type": "tag",
+      "required": false
+    },
+    "readTime": {
+      "type": "duration",
+      "required": false
+    }
+  },
+  "layout": {
+    "container": "section",
+    "header": [
+      "title",
+      "filter?"
+    ],
+    "body": [
+      "posts"
+    ],
+    "footer": [
+      "load-more?",
+      "pagination?"
+    ]
+  },
+  "visual_brief": "Vertical list of post items in chronological order. Each post row shows a title link in medium-weight text, an author name, publish date in muted text, and a two-line preview excerpt. Posts are separated by subtle dividers or spacing. The compact preset reduces to title and date only, one line per item. The cards preset wraps each post in a bordered card with optional thumbnail image on the left, title, excerpt, author avatar, and date. Featured posts may have a 'Featured' badge.",
+  "default_layout": {
+    "layout": "stack",
+    "atoms": "_flex _col _gap4",
+    "slots": {
+      "posts": "Chronological list of post rows with thumbnail, title, metadata, excerpt, and optional badge"
+    }
+  },
+  "responsive": {
+    "mobile": "Full-width post items. Cards preset uses vertical card layout with image on top. Excerpts limited to one line.",
+    "tablet": "Standard list or card layout with comfortable spacing.",
+    "desktop": "Posts in a centered content column. Cards preset shows image on the left with text on the right."
+  },
+  "layout_hints": {
+    "editorial_priority": "Lead with headline, then supporting metadata, then excerpt. Category or badge treatments should support the read, not become the loudest element.",
+    "list_rhythm": "Rows should maintain a steady editorial cadence with consistent title alignment and restrained separators.",
+    "cards_variant": "When using cards, preserve the same reading order as the list view so the pattern still feels editorial rather than marketing-heavy."
+  },
+  "motion": {
+    "micro": "Headline links and featured badges may respond subtly on hover, and card variants may lift slightly when interactive.",
+    "transitions": "List filtering, pagination, or feed refresh should cross-fade or stagger items gently without disrupting scan flow."
+  },
+  "interactions": [
+    "click-select",
+    "hover-reveal",
+    "animate-on-mount",
+    "stagger-children"
+  ],
+  "accessibility": {
+    "role": "region",
+    "aria-label": "Post list",
+    "keyboard": [
+      "Post titles or cards should present one clear primary interaction target in reading order."
+    ],
+    "announcements": [
+      "Title, author, date, and excerpt context should be available semantically so each post preview remains understandable without card styling."
+    ]
+  }
+}

package/patterns/presence-avatars.json

@@ -0,0 +1,129 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "id": "presence-avatars",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Presence Avatars",
+  "description": "Horizontal stack of collaborator avatars showing who is currently viewing or editing. Each avatar has a unique presence color ring.",
+  "dependencies": {
+    "patterns": {},
+    "styles": {},
+    "requires_core": {
+      "components": [
+        "Avatar",
+        "Button",
+        "Tooltip",
+        "icon"
+      ],
+      "charts": []
+    }
+  },
+  "components": [
+    "Avatar",
+    "Button",
+    "Tooltip"
+  ],
+  "default_preset": "standard",
+  "presets": {
+    "standard": {
+      "description": "Avatar stack with overflow count and hover tooltips",
+      "components": [
+        "Avatar",
+        "Tooltip"
+      ],
+      "layout": {
+        "layout": "row",
+        "atoms": "_flex _aic _-space-x-2",
+        "slots": {
+          "avatars": "Stacked avatar images with presence color ring",
+          "overflow": "+N more indicator",
+          "tooltip": "Hover shows full name and status"
+        }
+      }
+    },
+    "compact": {
+      "description": "Smaller avatars with tighter spacing",
+      "components": [
+        "Avatar",
+        "Tooltip"
+      ],
+      "layout": {
+        "layout": "row",
+        "atoms": "_flex _aic _-space-x-1",
+        "slots": {
+          "avatars": "Small stacked avatars",
+          "overflow": "Overflow count"
+        }
+      }
+    },
+    "detailed": {
+      "description": "Avatars with online/away status dots",
+      "components": [
+        "Avatar",
+        "Tooltip"
+      ],
+      "layout": {
+        "layout": "row",
+        "atoms": "_flex _aic _gap1",
+        "slots": {
+          "avatars": "Avatars with status indicator",
+          "status-dot": "Online/away/idle indicator"
+        }
+      }
+    }
+  },
+  "default_layout": {
+    "layout": "row",
+    "atoms": "_flex _aic _-space-x-2",
+    "slots": {
+      "avatars": "Stacked avatar images with presence color ring",
+      "overflow": "+N more indicator with click to expand",
+      "tooltip": "Hover tooltip showing collaborator name and status"
+    }
+  },
+  "io": {
+    "consumes": [
+      "collaborators",
+      "maxVisible"
+    ],
+    "produces": [],
+    "actions": [
+      "expand-list",
+      "view-profile"
+    ]
+  },
+  "visual_brief": "Horizontal stack of overlapping circular avatar images, each with a colored ring border indicating their presence state (green for active, yellow for idle, gray for offline). Avatars overlap by about 25% of their diameter. When there are more avatars than can be shown, a '+N' overflow indicator appears at the end as a circular badge with a muted background. Hovering any avatar shows a tooltip with the collaborator's name and status. The detailed preset adds a dropdown panel on click showing all collaborators with name, role, and status. The compact preset reduces avatar size to 24px.",
+  "responsive": {
+    "mobile": "Avatars at 28px. Maximum 3-4 visible with overflow indicator. Tooltip replaced by tap-to-reveal.",
+    "tablet": "Avatars at 32px. Up to 6 visible. Tap or hover for tooltip.",
+    "desktop": "Avatars at 36px. Up to 8 visible. Hover tooltips. Detailed preset dropdown on click."
+  },
+  "layout_hints": {
+    "presence_priority": "The pattern should communicate who is here now before it communicates every individual detail. Overflow handling should preserve that quick presence read.",
+    "stack_logic": "Overlap should feel intentional and orderly, with the most relevant or recent collaborators visually favored if ordering matters.",
+    "detailed_mode": "Expanded or detailed modes should feel like a continuation of the avatar stack rather than a separate people directory."
+  },
+  "motion": {
+    "micro": "Presence state changes and hover emphasis may brighten or pulse subtly, especially for active collaborators.",
+    "transitions": "Entries joining or leaving should animate gently enough to preserve the sense of live collaboration without making the avatar rail jitter."
+  },
+  "interactions": [
+    "animate-on-mount",
+    "hover-reveal"
+  ],
+  "accessibility": {
+    "role": "group",
+    "aria-label": "Presence avatars",
+    "keyboard": [
+      "Overflow, detailed views, and interactive avatars should remain reachable in a simple left-to-right order."
+    ],
+    "announcements": [
+      "Collaborator identity and presence state should be exposed semantically so the stack remains meaningful beyond colored avatar rings."
+    ]
+  },
+  "composition": {
+    "PresenceAvatars": "Row(d-section, overlapping) > [AvatarStack + OverflowBadge?]",
+    "AvatarStack": "Row(negative-margin) > Avatar(ring-color: presence-state, tooltip: name)[]",
+    "OverflowBadge": "Badge(d-annotation, muted-bg, circular) > PlusCount"
+  }
+}

package/patterns/press-kit-shelf.json

@@ -0,0 +1,132 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "id": "press-kit-shelf",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Press Kit Shelf",
+  "description": "Campaign press and media asset shelf for logos, product shots, fact sheets, launch screenshots, demo videos, and founder bios.",
+  "category": "campaign",
+  "tags": [
+    "campaign",
+    "press",
+    "media-kit",
+    "assets",
+    "launch",
+    "download"
+  ],
+  "components": [
+    "Button",
+    "Badge",
+    "Media",
+    "Tabs",
+    "icon"
+  ],
+  "contained": false,
+  "default_preset": "asset-shelf",
+  "presets": {
+    "asset-shelf": {
+      "description": "Shelf-like rows of press assets with file type, preview, use case, and download/copy actions.",
+      "components": [
+        "Button",
+        "Badge",
+        "Media",
+        "Tabs",
+        "icon"
+      ],
+      "layout": {
+        "layout": "grid",
+        "atoms": "_grid _gap5 _wfull _maxw[76rem] _mx[auto]",
+        "slots": {
+          "asset-category-tabs": "Logo, screenshots, founder, product, facts, video, and brand tabs.",
+          "asset-shelf-row": "Shelf row of downloadable campaign assets.",
+          "asset-preview": "Thumbnail or document preview with stable dimensions.",
+          "asset-meta": "File type, size, recommended use, and license note.",
+          "asset-actions": "Download, copy link, copy caption, or open preview."
+        }
+      }
+    },
+    "press-page": {
+      "description": "Full press page layout with launch facts, press quote, contact block, and asset shelves.",
+      "components": [
+        "Button",
+        "Badge",
+        "Media",
+        "icon"
+      ],
+      "layout": {
+        "layout": "grid",
+        "atoms": "_grid _gap6 _wfull _maxw[74rem] _mx[auto]",
+        "slots": {
+          "launch-facts": "Short factual summary and launch timeline.",
+          "press-contact": "Media contact and response time note.",
+          "asset-shelf-row": "Downloadable assets grouped by type."
+        }
+      }
+    }
+  },
+  "default_layout": {
+    "layout": "grid",
+    "atoms": "_grid _gap5 _wfull _maxw[76rem] _mx[auto]",
+    "slots": {
+      "asset-category-tabs": "Press asset categories",
+      "asset-shelf-row": "Downloadable asset row",
+      "asset-preview": "Asset thumbnail or preview",
+      "asset-meta": "File details and usage note",
+      "asset-actions": "Download and copy actions"
+    }
+  },
+  "visual_brief": "A retro shelf of campaign materials, like boxed inserts, manuals, stickers, screenshots, and product photos laid out for press. Keep previews real and inspectable. Use tabs or segmented controls for categories. Avoid generic document cards and vague download buttons.",
+  "responsive": {
+    "mobile": "Tabs become horizontal scroll or dropdown. Asset rows stack with preview first, actions below.",
+    "tablet": "Two-column asset shelf.",
+    "desktop": "Wide shelf rows with preview, metadata, and action controls aligned."
+  },
+  "layout_hints": {
+    "asset_truth": "Show file type, dimensions or size, and recommended use for each asset.",
+    "download_controls": "Use recognizable download, copy, external-link, and play icons in buttons.",
+    "press_context": "Include concise factual launch copy, not marketing fluff."
+  },
+  "motion": {
+    "micro": {
+      "tab-switch": "instant category swap with short focus-retaining transition",
+      "download-press": "button press state confirms download or copy action"
+    }
+  },
+  "interactions": [
+    "click-select",
+    "hover-reveal",
+    "animate-on-mount",
+    "keyboard-navigation"
+  ],
+  "composition": {
+    "PressKitShelf": "Section > [Header + AssetCategoryTabs + AssetShelfRow[] + PressContact?]",
+    "AssetShelfRow": "Row > [AssetPreview + AssetMeta + AssetActions]",
+    "AssetActions": "ButtonGroup > [Download + CopyLink + Preview?]"
+  },
+  "accessibility": {
+    "role": "region",
+    "aria-label": "Press kit assets",
+    "keyboard": [
+      "Tabs should use standard tablist keyboard behavior.",
+      "Download and copy actions must have explicit labels with asset names."
+    ],
+    "announcements": [
+      "Copied link for {asset}.",
+      "Selected press category {category}."
+    ]
+  },
+  "io": {
+    "consumes": [
+      "press-assets",
+      "launch-facts"
+    ],
+    "produces": [
+      "press-action"
+    ],
+    "actions": [
+      "asset-download",
+      "asset-copy-link",
+      "asset-preview"
+    ]
+  }
+}

package/patterns/pricing-usage.json

@@ -0,0 +1,118 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "id": "pricing-usage",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Pricing Usage",
+  "description": "Usage-based pricing section with volume tiers, calculator, feature comparison table, and FAQ accordion.",
+  "dependencies": {
+    "patterns": {},
+    "styles": {},
+    "requires_core": {
+      "components": [
+        "Button",
+        "Badge",
+        "Card",
+        "icon"
+      ],
+      "charts": []
+    }
+  },
+  "components": [
+    "Button",
+    "Badge",
+    "Card",
+    "icon"
+  ],
+  "default_preset": "standard",
+  "presets": {
+    "standard": {
+      "description": "Full pricing section with tiers, calculator, and comparison",
+      "components": [
+        "Button",
+        "Badge",
+        "Card",
+        "icon"
+      ],
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _col _gap12 _py16 _px6",
+        "slots": {
+          "toggle": "Monthly/annual billing toggle",
+          "tiers": "Volume tier pricing cards",
+          "calculator": "Usage estimator slider/input",
+          "comparison": "Feature comparison table",
+          "faq": "Frequently asked questions accordion"
+        }
+      }
+    },
+    "compact": {
+      "description": "Simplified pricing cards without calculator",
+      "components": [
+        "Button",
+        "Badge",
+        "Card",
+        "icon"
+      ],
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _col _gap8 _py12 _px6",
+        "slots": {
+          "toggle": "Monthly/annual toggle",
+          "tiers": "Pricing tier cards"
+        }
+      }
+    }
+  },
+  "default_layout": {
+    "layout": "stack",
+    "atoms": "_flex _col _gap12 _py16 _px6",
+    "slots": {
+      "toggle": "Monthly/annual billing toggle",
+      "tiers": "Volume tier pricing cards",
+      "calculator": "Usage estimator",
+      "comparison": "Feature comparison table",
+      "faq": "FAQ accordion"
+    }
+  },
+  "visual_brief": "Usage-based pricing section with a monthly/annual toggle at the top, followed by volume tier cards displayed in a horizontal row. Each tier card shows the tier name, unit price, included volume, overage rate, and a CTA button — the recommended tier gets an accent border and a popular badge. Below the tiers, an interactive usage calculator with a slider lets users estimate their monthly cost. A feature comparison table follows with checkmark/dash cells. The section closes with an FAQ accordion.",
+  "layout_hints": {
+    "comparison_rhythm": "Keep pricing tiers, calculator, comparison, and FAQ in a clear decision-making sequence. Avoid collapsing everything into one visually dense pricing wall.",
+    "recommended_tier": "The recommended tier should read as a confident primary option without making the surrounding cards feel secondary or broken.",
+    "calculator_placement": "The usage calculator should feel tightly connected to the tier comparison rather than like a detached widget underneath the section."
+  },
+  "responsive": {
+    "mobile": "Tier cards stack vertically in a single column with full-width cards. Usage calculator slider becomes full-width with the cost estimate displayed below. Comparison table converts to a stacked card layout (one card per tier) with feature rows inside each card. FAQ accordion items take full width with larger tap targets.",
+    "tablet": "Tier cards display in a 2-column grid, wrapping to a second row if more than two tiers. Comparison table remains tabular but horizontally scrollable if more than three tiers. Calculator and FAQ maintain standard layout.",
+    "desktop": "Tier cards display in a single horizontal row (up to four tiers). Comparison table renders as a full-width sticky-header table. Calculator shows slider and cost estimate side-by-side. FAQ renders in a max-width centered column for readability."
+  },
+  "motion": {
+    "micro": "Tier highlights, calculator feedback, and toggle states may animate over 150-220ms, but pricing should remain calm and trustworthy.",
+    "transitions": "Billing toggle and calculator updates should cross-fade or count smoothly without causing card reflow shocks."
+  },
+  "interactions": [
+    "animate-on-mount",
+    "real-time-updates",
+    "hover-tooltip"
+  ],
+  "accessibility": {
+    "role": "region",
+    "aria-label": "Usage pricing section",
+    "keyboard": [
+      "Tab moves through billing toggle, tier CTAs, calculator controls, and FAQ items in order."
+    ],
+    "announcements": [
+      "Price changes from billing-toggle or calculator updates should be announced clearly.",
+      "Recommended or current-plan state should not rely on color alone."
+    ],
+    "focus_management": "Keep focus on the toggle or calculator control that changed the pricing state instead of moving users unexpectedly into the table or FAQ."
+  },
+  "composition": {
+    "PricingUsage": "Container(d-section, centered, gap-12) > [BillingToggle(d-control) + TierCards + UsageCalculator? + ComparisonTable? + FAQ?]",
+    "TierCards": "Grid(responsive: 1/2/4-col) > TierCard[]",
+    "TierCard": "Card(d-surface, accent-border?: recommended) > [TierName(heading4) + UnitPrice(mono-data, heading2) + Volume + OverageRate(text-muted) + CTAButton(d-interactive)]",
+    "UsageCalculator": "Card(d-surface) > [Slider(d-control) + CostEstimate(mono-data, heading3)]",
+    "ComparisonTable": "Table(d-data) > [HeaderRow > TierName[] + FeatureRow > Cell(icon: check|dash)[]]",
+    "FAQ": "Accordion(d-surface) > FAQItem(collapsible)[]"
+  }
+}

package/patterns/pricing.json

@@ -0,0 +1,137 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "id": "pricing",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Pricing Section",
+  "description": "Pricing tier cards with plan comparison, billing toggle, and CTA buttons",
+  "dependencies": {
+    "patterns": {},
+    "styles": {},
+    "requires_core": {
+      "components": [
+        "Card",
+        "Button",
+        "Badge",
+        "Switch",
+        "icon"
+      ],
+      "charts": []
+    }
+  },
+  "components": [
+    "Card",
+    "Button",
+    "Badge",
+    "Switch",
+    "icon"
+  ],
+  "default_preset": "standard",
+  "presets": {
+    "standard": {
+      "description": "Three pricing tier cards in a row with monthly/annual toggle and feature checklists",
+      "components": [
+        "Card",
+        "Button",
+        "Badge",
+        "Switch",
+        "icon"
+      ],
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _col _aic _gap8 _py16 _px6",
+        "slots": {
+          "heading": "Section title with _heading2 _textCenter and optional subtext",
+          "toggle": "Monthly/Annual billing toggle with pill-style active indicator",
+          "tiers": "Horizontal row of tier Cards: _grid _gc1 _md:gc3 _gap4 _aic",
+          "tier-card": "Individual Card: plan name (_heading4), price (_heading1 _fontmono), billing period, feature checklist, CTA Button",
+          "feature-list": "Checklist of features with checkmark icons and _textsm",
+          "cta": "Full-width Button per tier — primary variant for recommended, ghost for others"
+        }
+      }
+    },
+    "compact": {
+      "description": "Simplified pricing without feature comparison, just name, price, and CTA",
+      "components": [
+        "Card",
+        "Button",
+        "Badge"
+      ],
+      "layout": {
+        "layout": "grid",
+        "atoms": "_grid _gc1 _md:gc3 _gap4 _py12 _px6",
+        "slots": {
+          "tier-card": "Compact Card with plan name, price, and CTA Button",
+          "cta": "Primary or ghost Button"
+        }
+      }
+    }
+  },
+  "visual_brief": "Three pricing tier cards in a responsive row, centered on the page. The recommended tier (typically the middle card) is visually elevated with a highlighted border in primary color, slightly larger scale (scale 1.02), and a 'Popular' or 'Recommended' badge at the top corner. Each card shows: the plan name as a heading4, the price in large monospace text (heading1 scale) with the billing period in small muted text below, a feature checklist with green checkmark icons for included features and muted X icons for excluded ones, and a full-width CTA button at the card bottom. The recommended tier uses the primary filled button variant; other tiers use ghost. A monthly/annual billing toggle is centered above the cards with a pill-style active state and the annual option showing a small 'Save 20%' badge. The section has generous vertical padding and a centered heading above everything.",
+  "responsive": {
+    "mobile": "Tier cards stack vertically in a single column. Recommended tier stays visually elevated but at full width. Toggle stays centered. Alternatively, tiers display as a horizontal carousel with snap-scrolling and dot indicators below. CTA buttons go full-width.",
+    "tablet": "Three columns at reduced gap. Cards may be slightly narrower. Toggle and heading stay centered. Feature lists may truncate to top 5 items with 'See all features' link.",
+    "desktop": "Full three-column row with comfortable gap6 spacing. Recommended tier elevated. All features visible. Toggle and heading centered above. Section padding at py16."
+  },
+  "motion": {
+    "micro": "Tier cards lift on hover with translateY(-4px) and increased shadow over 200ms. CTA buttons brighten on hover. Toggle pill slides between states with 250ms ease.",
+    "transitions": "Cards fade in and slide up with staggered delay (100ms per card) on section enter. Price value animates (counter-style) when toggling between monthly and annual. Badge pulses once on toggle change."
+  },
+  "interactions": [
+    "lift-hover",
+    "scale-hover",
+    "animate-on-mount",
+    "stagger-children"
+  ],
+  "accessibility": {
+    "role": "region",
+    "aria-label": "Pricing plans",
+    "keyboard": [
+      "Tab navigates between tier cards and their CTA buttons",
+      "Shift+Tab navigates backwards",
+      "Enter or Space activates billing toggle or CTA button",
+      "Arrow Left/Right navigates between tiers"
+    ],
+    "announcements": [
+      "{plan_name} plan: {price} per {period}",
+      "Billing changed to {period}, price updated to {price}",
+      "Recommended plan: {plan_name}"
+    ],
+    "focus_management": "On billing toggle change, price values are announced via aria-live polite region. Focus remains on the toggle after change."
+  },
+  "default_layout": {
+    "layout": "stack",
+    "atoms": "_flex _col _aic _gap8 _py16 _px6",
+    "slots": {
+      "heading": "Section title",
+      "toggle": "Billing period toggle",
+      "tiers": "Pricing tier cards",
+      "cta": "Action buttons"
+    }
+  },
+  "io": {
+    "consumes": [
+      "billing-cycle"
+    ],
+    "produces": [
+      "plan-selection"
+    ],
+    "actions": [
+      "select-plan",
+      "toggle-billing"
+    ]
+  },
+  "composition": {
+    "PricingSection": "Container(d-section, centered) > [Heading(heading2) + BillingToggle(d-control, pill) + TierGrid > PricingTier[]]",
+    "BillingToggle": "Toggle(d-control) > [MonthlyLabel + Switch + AnnualLabel + SaveBadge?(d-annotation)]",
+    "PricingTier": "Card(d-surface, elevated?: tier.recommended) > [PlanName(heading4) + Badge?(d-annotation, show: tier.recommended) + Price(mono-data, heading1) + Period(text-muted) + FeatureList > CheckItem(icon: check)[] + CTAButton(d-interactive, variant: tier.recommended ? primary : ghost, full-width)]"
+  },
+  "layout_hints": {
+    "recommended_treatment": "The recommended/popular tier card should be visually elevated: scale(1.02) or extra top padding, a primary-colored top border (3px solid var(--d-primary)), and the Popular badge using d-annotation[data-status=info]. The other tier cards should be subtly muted in comparison.",
+    "card_glow": "For neon/glow themes, the recommended tier gets a subtle box-shadow glow: 0 0 30px rgba(var(--d-primary-rgb), 0.15). This draws the eye without being garish.",
+    "toggle_treatment": "The annual/monthly toggle should be a pill-style toggle with the active option using var(--d-primary) background. Show the savings percentage (\"Save 20%\") as a small accent-colored badge next to the annual option.",
+    "popular_tier": "The \"Popular\" tier accent is rendered as a small chip pinned to the card top-edge via `position: absolute; top: -10px; left: 50%; transform: translateX(-50%)`. It MUST sit cleanly attached (or fully inside) — never floating in the gap above the card border or clipping through it. The featured tier ALSO gets a 2px accent border on ALL sides (not just top), and a slight lift via d-elevate[data-level=\"3\"] to differentiate from sibling tiers.",
+    "cta_consistency": "All pricing tier CTAs MUST be consistent button treatments — never mix \"filled accent button\" on one tier with \"plain centered text\" on others. The featured tier is `d-interactive[data-variant=\"primary\"]`, sibling tiers are `d-interactive[data-variant=\"ghost\"]`. Same shape and weight; primary draws the eye but the visual class is consistent.",
+    "toggle_overload": "Monthly | Annual toggle should NOT use BOTH a full accent background on the active tab AND an inset success chip (\"-20%\"). Pick one accent. Recommendation: subtle d-step-chip[data-step-state=\"active\"] for the active tab + `Save 20%` text below the toggle in d-caption muted. Cleaner."
+  }
+}