@decantr/content 3.8.0

package/patterns/campaign-marquee-hero.json

@@ -0,0 +1,167 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "id": "campaign-marquee-hero",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Campaign Marquee Hero",
+  "description": "Retro product-launch hero with a cabinet marquee, product reveal, campaign countdown, progress snapshot, and primary pledge or waitlist action.",
+  "category": "campaign",
+  "tags": [
+    "campaign",
+    "launch",
+    "hero",
+    "retro",
+    "conversion",
+    "preorder"
+  ],
+  "components": [
+    "Button",
+    "Badge",
+    "Progress",
+    "KPI",
+    "Media",
+    "Countdown"
+  ],
+  "contained": false,
+  "default_preset": "product-kickstarter-cabinet",
+  "presets": {
+    "product-kickstarter-cabinet": {
+      "description": "Premium Kickstarter-style first viewport with a physical product box, cartridge or controller deck, marquee headline, proof counters, and raised rectangular CTAs.",
+      "components": [
+        "Button",
+        "Badge",
+        "Progress",
+        "KPI",
+        "Media",
+        "Countdown"
+      ],
+      "layout": {
+        "layout": "grid",
+        "atoms": "_grid _gap8 _items[center] _minh[88vh] _px6 _py10 _maxw[86rem] _mx[auto]",
+        "slots": {
+          "marquee": "Oversized product-launch headline. Name the literal product, kit, drop, or category in the first viewport.",
+          "supporting-copy": "Specific campaign promise with what exists now, what support unlocks, and why the launch matters.",
+          "product-theater": "Physical product scene: boxed kit, cartridge, controller, hardware deck, packaging, or inspectable product render. Do not use a generic abstract mockup.",
+          "scoreboard": "Funding, backer, countdown, inventory, and goal counters styled like a live arcade scoreboard.",
+          "action-row": "Primary pledge/preorder/waitlist CTA and secondary demo/story CTA. Use raised rectangular controller buttons, not pill buttons. Give labels and icons generous x-padding so actions feel like hardware controls, not cramped tags.",
+          "proof-row": "Prototype, delivery, maker, press, or fulfillment proof cues close to the CTA."
+        }
+      }
+    },
+    "coin-op": {
+      "description": "First-viewport hero staged like an arcade cabinet: marquee headline, product screen, live counter strip, and dual CTAs.",
+      "components": [
+        "Button",
+        "Badge",
+        "Progress",
+        "KPI",
+        "Media",
+        "Countdown"
+      ],
+      "layout": {
+        "layout": "grid",
+        "atoms": "_grid _gap8 _items[center] _minh[92vh] _px6 _py10 _maxw[82rem] _mx[auto]",
+        "slots": {
+          "marquee": "Oversized campaign title band. Literal product or offer name, not an eyebrow-only brand mention.",
+          "supporting-copy": "Short launch promise, 2-3 lines max, with one concrete product outcome.",
+          "product-screen": "Large visual slot framed as an arcade bezel. Show product render, prototype UI, or packaging visual.",
+          "status-strip": "Campaign counters: raised amount, target, backers, days left, early-bird inventory.",
+          "action-row": "Primary pledge/preorder/waitlist CTA plus secondary demo/story CTA.",
+          "trust-row": "Tiny proof cues such as prototype ready, shipping window, press quote, or maker credibility."
+        }
+      }
+    },
+    "catalog-drop": {
+      "description": "Mail-order catalog inspired launch hero with product box, issue label, price callout, and pledge action.",
+      "components": [
+        "Button",
+        "Badge",
+        "KPI",
+        "Media"
+      ],
+      "layout": {
+        "layout": "grid",
+        "atoms": "_grid _gap7 _items[center] _minh[84vh] _px6 _py12 _maxw[78rem] _mx[auto]",
+        "slots": {
+          "drop-label": "Small issue/date label, styled like a catalog sticker.",
+          "headline": "Large product-drop headline.",
+          "product-box": "Packaging or mockup visual with hard border and shadow.",
+          "spec-strip": "Compact feature/spec row.",
+          "cta-stack": "Primary and secondary actions with campaign note."
+        }
+      }
+    }
+  },
+  "default_layout": {
+    "layout": "grid",
+    "atoms": "_grid _gap8 _items[center] _minh[92vh] _px6 _py10 _maxw[82rem] _mx[auto]",
+    "slots": {
+      "marquee": "Pixel-style product launch title",
+      "supporting-copy": "Campaign promise and launch context",
+      "product-screen": "Product render or prototype framed in a bezel",
+      "status-strip": "Funding, backer, and countdown counters",
+      "action-row": "Primary pledge/preorder/waitlist CTA and secondary demo CTA",
+      "trust-row": "Compact campaign proof cues"
+    }
+  },
+  "visual_brief": "A first-viewport launch surface, not a generic SaaS hero. The page should immediately feel like a premium retro Kickstarter campaign: a bold marquee headline names the product or campaign, a physical product box/cartridge/controller scene acts as the hero object, and the funding or waitlist momentum is visible before scrolling. Use full-bleed atmosphere, but keep all content inside a clear centered cabinet safe area. CTAs should be raised rectangular controller buttons with enough horizontal padding that text and icons do not clash with the button walls. Avoid floating cards, decorative blobs, split-hero stock mockups, vague tag-chip clutter, and pill-shaped CTAs.",
+  "responsive": {
+    "mobile": "Stack marquee, product screen, counters, then actions. Product screen remains visible in the first viewport but may crop to a square or 4:3 frame. CTAs become full-width arcade buttons.",
+    "tablet": "Two-zone layout with marquee/copy above and product screen below or beside counters.",
+    "desktop": "Two-column cabinet stage: copy and marquee on the left, product screen and status console on the right. Keep the next campaign module slightly visible below the fold."
+  },
+  "layout_hints": {
+    "first_viewport": "The campaign identity, product visual, and conversion action must all appear before the first scroll.",
+    "safe_area": "Full-bleed background is allowed, but content should live inside a max-width campaign cabinet zone.",
+    "cta_language": "Use verbs like Back, Reserve, Join, Unlock, Watch Demo, or See Rewards. Avoid generic Submit or Learn More as the primary action.",
+    "button_spacing": "Primary and secondary hero actions need hardware-like interior breathing room: icon and label separated, no text hugging the border, and enough min-width for short labels."
+  },
+  "motion": {
+    "micro": {
+      "button-press": "translate(3px, 3px) with shadow collapse over 90ms",
+      "counter-update": "single-frame LED flip or count-up over 300ms"
+    },
+    "transitions": {
+      "hero-load": "Marquee snaps in first, product screen follows, counters stagger last over 260ms.",
+      "reduced-motion": "Use opacity and color changes only; no scanline movement."
+    }
+  },
+  "interactions": [
+    "animate-on-mount",
+    "stagger-children",
+    "click-select",
+    "keyboard-navigation"
+  ],
+  "composition": {
+    "CampaignMarqueeHero": "Hero(banner, arcade-canvas) > [Marquee + CopyStack + ProductScreen + StatusStrip + ActionRow + TrustRow]",
+    "StatusStrip": "GridOrRail > [RaisedCounter + BackerCounter + DaysLeft + InventoryState]",
+    "ActionRow": "Flex(wrap) > [PrimaryCampaignAction + SecondaryDemoAction]"
+  },
+  "accessibility": {
+    "role": "banner",
+    "aria-label": "Product launch campaign introduction",
+    "keyboard": [
+      "Primary and secondary actions should be the first focusable controls after navigation.",
+      "Counters must be readable as text, not only visual LED styling."
+    ],
+    "announcements": [
+      "Campaign status values should include labels such as amount raised, goal, backers, and days left."
+    ],
+    "focus_management": "Arcade button focus rings should be at least 3px and visible on saturated fills."
+  },
+  "io": {
+    "consumes": [
+      "campaign-summary",
+      "product-media",
+      "campaign-countdown"
+    ],
+    "produces": [
+      "conversion-intent"
+    ],
+    "actions": [
+      "pledge-click",
+      "waitlist-click",
+      "demo-click"
+    ]
+  }
+}

package/patterns/cap-table.json

@@ -0,0 +1,121 @@
+{
+  "id": "cap-table",
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Cap Table",
+  "description": "An ownership capitalization table that surfaces shareholders, share classes, fully-diluted percentages, vesting status, and dilution events across funding rounds with an inset pie summary for at-a-glance ownership distribution.",
+  "category": "finance",
+  "tags": [
+    "2026",
+    "finance",
+    "ownership",
+    "equity",
+    "cap-table",
+    "dilution",
+    "shareholders",
+    "dataviz"
+  ],
+  "components": [
+    "ShareholderRow",
+    "ShareClassBadge",
+    "PercentageBar",
+    "VestingChip",
+    "PieSummary",
+    "TotalsFooter",
+    "DilutionEventMarker"
+  ],
+  "default_preset": "standard",
+  "presets": {
+    "standard": {
+      "description": "Full cap table rendering every shareholder with share class, shares owned, fully-diluted percentage bar, and vesting chip. Includes totals footer and inset pie summary on the right for quick distribution scanning.",
+      "layout": {
+        "layout": "data-table",
+        "atoms": "_w100 _grid _gap4"
+      }
+    },
+    "summary": {
+      "description": "Condensed view showing only an ownership pie chart with aggregated share-class totals and top shareholders. Optimized for executive dashboards and investor update decks where detail is unnecessary.",
+      "layout": {
+        "layout": "grid",
+        "atoms": "_w100 _grid _grid-cols-2 _gap6"
+      }
+    },
+    "waterfall": {
+      "description": "Dilution-event waterfall that lists funding rounds chronologically with before/after percentages per shareholder, highlighting dilution deltas with colored badges and connecting arrows between rounds.",
+      "layout": {
+        "layout": "data-table",
+        "atoms": "_w100 _overflow-x-auto"
+      }
+    }
+  },
+  "visual_brief": "A clean, investor-grade table rendered inside a d-surface card with a soft border and subtle zebra-striped rows. The header row uses d-annotation small-caps labels: Shareholder, Class, Shares, % Fully Diluted, Vesting. Each ShareholderRow shows the shareholder name in semibold text with a secondary line for entity type (individual/fund/employee-pool). A ShareClassBadge sits beside the name, color-coded: Common = neutral gray, Preferred Series A/B/C = ascending blue shades, Options/ISOs = amber, SAFE/Convertible = violet. The shares column uses mono-data tabular figures, right-aligned. The PercentageBar fills horizontally within its cell, width proportional to ownership, using a primary-accent fill with a thin track behind it; the numeric percentage overlays the bar in semibold. VestingChip shows 'Fully vested', '4y / 1y cliff — 37% vested', or 'Unvested' with a small progress ring. Rows are clickable and expand inline to reveal grant date, strike price, and acceleration clauses. A sticky TotalsFooter at the bottom shows total shares issued, total fully-diluted shares, and 100% summed percentage. A PieSummary inset (180px circle) floats to the right of the table on wide viewports, with color-coded wedges matching share-class badge colors and a legend below. Waterfall preset replaces the percentage bar with a two-column before/after layout and red/green delta chips showing dilution impact from each funding round, with thin connector lines between adjacent rounds.",
+  "layout_hints": {
+    "container": "d-surface card",
+    "note": "Cap tables are dense financial data. Use mono-data figures for all share counts and percentages. Right-align all numeric columns. Preserve tabular-nums so digits line up vertically.",
+    "row_interaction": "ShareholderRow uses d-row[data-interactive] with cursor:pointer. Expanded state reveals grant metadata in a sub-row with a subtle inset background.",
+    "percentage_bar": "PercentageBar track is 100% of cell width, fill proportional. Use d-annotation[data-bar] with height 8px, border-radius 4px. Percentage text sits centered above or inside the bar depending on fill width.",
+    "share_class_colors": "ShareClassBadge MUST be consistent across all instances: Common=neutral, Preferred=blue scale, Options=amber, SAFE=violet. Never use red/green for share classes (reserved for deltas).",
+    "totals_footer": "TotalsFooter uses sticky positioning at bottom of table container. Background: color-mix(in srgb, var(--d-surface) 95%, var(--d-primary) 5%). Font-weight: 600. Always sums to 100% fully diluted."
+  },
+  "default_layout": {
+    "layout": "data-table",
+    "atoms": "_w100 _grid _gap4 _p4",
+    "slots": {
+      "table-header": "Sticky top row with column labels rendered as d-annotation small-caps. Columns: Shareholder, Class, Shares, % Fully Diluted, Vesting. Header has a subtle bottom border and slightly elevated background to distinguish from data rows during scroll.",
+      "shareholder-rows": "Repeating slot — one ShareholderRow per cap-table entry. Each row uses d-row[data-interactive] containing: Name cell (semibold with entity-type subline), ShareClassBadge, Shares cell (mono-data right-aligned), PercentageBar cell (fills proportionally), VestingChip cell. Rows alternate subtle background tint for readability. Click expands inline detail sub-row showing grant date, strike price, acceleration clauses, and notes.",
+      "totals-footer": "Sticky footer row aggregating totals: total shares issued, total fully-diluted shares, and 100% sum verification. Uses bold mono-data figures. If percentages do not sum to 100% (floating-point drift), shows warning chip.",
+      "pie-summary": "Optional inset circular chart (180px) anchored to the right of the table on wide viewports. Wedges colored by share class matching badge colors. Legend below shows class name + aggregated percentage. Hovering a wedge highlights matching rows in the table.",
+      "dilution-markers": "Waterfall-preset-only slot. Horizontal dilution-event markers appear between round columns as vertical connector lines with round-name labels (e.g., 'Series B — $12M @ $48M pre'). Each shareholder row shows before/after percentages with red (diluted) or green (purchased) delta chips."
+    }
+  },
+  "accessibility": {
+    "role": "table",
+    "aria-label": "Capitalization table",
+    "announcements": [
+      "Shareholder {name} owns {percent}% fully diluted",
+      "Expanded {name} row showing grant details",
+      "Total fully-diluted shares: {count}"
+    ],
+    "keyboard": [
+      "Tab: cycle through shareholder rows",
+      "Enter: expand selected row to show grant details",
+      "Escape: collapse expanded row",
+      "Arrow Down/Up: navigate between rows",
+      "Home/End: jump to first/last row"
+    ]
+  },
+  "responsive": {
+    "mobile": "Table reflows to a card-stack layout. Each shareholder becomes a vertical card showing name, class badge, and percentage prominently with shares and vesting in a secondary row. PieSummary hidden. Totals footer remains sticky.",
+    "tablet": "Standard table layout with PieSummary collapsed into a toggle button that expands the chart as an overlay. Vesting column truncates to chip-only."
+  },
+  "motion": {
+    "micro": {
+      "row-hover": "background-color shift 150ms ease-out",
+      "bar-fill": "width 0 to target 600ms ease-out on mount",
+      "chip-progress": "vesting ring stroke-dashoffset 400ms ease-in-out"
+    },
+    "transitions": {
+      "row-expand": "height auto + fade 250ms ease-out",
+      "row-collapse": "height 0 + fade 200ms ease-in",
+      "pie-wedge-highlight": "scale(1.03) + brightness(1.1) 200ms ease-out"
+    },
+    "ambient": {
+      "totals-pulse": "subtle background shimmer on totals-footer when values update 400ms ease-out"
+    }
+  },
+  "interactions": [
+    "animate-on-mount",
+    "inline-edit",
+    "click-select"
+  ],
+  "composition": {
+    "CapTable": "Surface(d-surface, card) > [TableHeader + ShareholderRow[] + TotalsFooter + PieSummary?]",
+    "ShareholderRow": "Row(d-row, data-interactive) > [Name + ShareClassBadge + SharesCell + PercentageBar + VestingChip]",
+    "ShareClassBadge": "Chip(d-annotation, data-class) > [ClassLabel]",
+    "PercentageBar": "Bar(d-annotation, data-bar) > [Track + Fill + PercentLabel]",
+    "VestingChip": "Chip(d-annotation, data-vesting) > [ProgressRing + VestingLabel]",
+    "PieSummary": "Chart(d-surface, inset) > [PieCanvas + Legend]",
+    "TotalsFooter": "Footer(d-row, sticky) > [TotalShares + TotalPercent + VerificationChip?]"
+  }
+}

package/patterns/card-grid.json

@@ -0,0 +1,202 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "id": "card-grid",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Card Grid",
+  "description": "Responsive grid of cards with preset-specific content layouts",
+  "dependencies": {
+    "patterns": {},
+    "styles": {},
+    "requires_core": {
+      "components": [
+        "Card",
+        "Button",
+        "Badge",
+        "Image",
+        "icon"
+      ],
+      "charts": []
+    }
+  },
+  "contained": false,
+  "components": [
+    "Card",
+    "CardHeader",
+    "CardBody",
+    "CardFooter",
+    "Image",
+    "Button",
+    "Badge"
+  ],
+  "default_preset": "product",
+  "presets": {
+    "product": {
+      "description": "Product cards with image, title, price, rating, add-to-cart button. Grid: 1/2/3/4 cols at sm/md/lg/xl.",
+      "components": [
+        "Card",
+        "CardHeader",
+        "CardBody",
+        "CardFooter",
+        "Image",
+        "Button",
+        "Badge",
+        "icon"
+      ],
+      "layout": {
+        "layout": "grid",
+        "atoms": "_grid _gc1 _sm:gc2 _lg:gc3 _xl:gc4 _gap4",
+        "slots": {
+          "card-image": "Product image with aspect-ratio container",
+          "card-title": "Product name with _textsm _fontmedium",
+          "card-price": "Price with _heading4 styling",
+          "card-rating": "Star rating row with icon stars and count Badge",
+          "card-action": "Add-to-cart Button in CardFooter"
+        }
+      }
+    },
+    "content": {
+      "description": "Content/blog cards with thumbnail, title, excerpt, author, date. Grid: 1/2/3 cols.",
+      "components": [
+        "Card",
+        "CardHeader",
+        "CardBody",
+        "Image",
+        "Badge",
+        "icon"
+      ],
+      "layout": {
+        "layout": "grid",
+        "atoms": "_grid _gc1 _md:gc2 _lg:gc3 _gap6",
+        "slots": {
+          "card-thumbnail": "Blog post thumbnail image",
+          "card-category": "Category Badge above title",
+          "card-title": "Article title with _heading4 styling",
+          "card-excerpt": "Short excerpt with _bodysm _fgmuted",
+          "card-meta": "Author avatar, name, and date row"
+        }
+      }
+    },
+    "collection": {
+      "description": "Collection/category cards with background image, overlay title, item count. Grid: 2/3 cols.",
+      "components": [
+        "Card",
+        "Image",
+        "Badge"
+      ],
+      "layout": {
+        "layout": "grid",
+        "atoms": "_grid _gc2 _lg:gc3 _gap4",
+        "slots": {
+          "card-background": "Full-bleed background image with gradient overlay",
+          "card-overlay-title": "Collection name overlaid at bottom with _heading3",
+          "card-count": "Item count Badge overlaid on image"
+        }
+      }
+    },
+    "icon": {
+      "description": "Small icon cards with icon, title, short description. Grid: 2/3/4 cols. Compact.",
+      "components": [
+        "Card",
+        "icon"
+      ],
+      "layout": {
+        "layout": "grid",
+        "atoms": "_grid _gc2 _md:gc3 _lg:gc4 _gap3",
+        "slots": {
+          "card-icon": "Icon in a rounded muted background circle",
+          "card-title": "Feature title with _textsm _fontmedium",
+          "card-description": "Short description with _textxs _fgmuted"
+        }
+      }
+    },
+    "capability": {
+      "description": "Capability cards with icon, title, framing paragraph, and 2-4 supporting capability rows or badges. Grid: 1/2/3 cols with wider cards and calmer vertical rhythm.",
+      "components": [
+        "Card",
+        "CardHeader",
+        "CardBody",
+        "Badge",
+        "icon"
+      ],
+      "layout": {
+        "layout": "grid",
+        "atoms": "_grid _gc1 _md:gc2 _xl:gc3 _gap5",
+        "slots": {
+          "card-icon": "Category icon in a rounded accent-tinted circle or chip.",
+          "card-title": "Capability category title with heading-scale emphasis and room for two lines when needed.",
+          "card-description": "Short framing paragraph explaining the category or practice area.",
+          "card-supporting-list": "Calm vertical list of 2-4 supporting capability rows, each with a label and optional proficiency badge. Use divider-separated rows or a subtle list grouping, not nested mini-cards."
+        }
+      }
+    }
+  },
+  "visual_brief": "Responsive grid of uniformly-sized cards with consistent gap spacing. Each card is a contained surface with subtle border or shadow, rounded corners (r3), and internal padding. Product preset: top image with fixed aspect ratio, title below in medium-weight text, price in bold heading style, star-rating row with filled/empty star icons, and a full-width add-to-cart button in the card footer. Content preset: thumbnail image, colored category badge, article title, two-line excerpt in muted small text, and an author row with avatar, name, and date. Capability preset: medium-width cards with a category icon, a strong title, one short framing paragraph, and a calm supporting list for two to four related capabilities or badges. The supporting list should feel integrated into the same card surface through spacing, dividers, or a subtle grouping rhythm rather than through a second bordered panel or a stack of mini-cards. Cards maintain equal height within each row via grid stretch when the preset is intended for comparable content density.",
+  "layout_hints": {
+    "card_surface": "Each item should feel like one coherent card surface. Do not wrap grid items in an extra shell-level d-surface if the pattern already provides the card treatment.",
+    "description_clamp": "Allow enough room for meaningful summary copy. In most content grids, descriptions should get at least two to three lines before truncation.",
+    "footer_rhythm": "Meta rows and CTA rows should align consistently across cards. Footers should not jump vertically between items in the same grid.",
+    "hover_behavior": "Use CSS-driven hover lift or media scaling rather than inline event handlers that mutate style values in component code.",
+    "icon_preset_scope": "The icon preset is intentionally compact. Use it for icon + title + short description only, not for longer body copy plus nested capability rows.",
+    "capability_preset_scope": "When a route needs richer category cards with supporting rows or badges, use the capability preset and keep the grid to one, two, or three columns rather than forcing a compact four-up layout.",
+    "nested_surface_avoidance": "Capability cards should read as one card surface. Avoid creating a card within a card or wrapping each supporting row in its own mini-panel unless a route explicitly asks for nested grouping."
+  },
+  "responsive": {
+    "mobile": "Single column (1 card per row). Cards go full-width with larger touch targets. Image aspect ratio maintained. Gap reduces to gap3.",
+    "tablet": "Two columns for most presets. Collection preset stays at 2 columns. Gap at gap4. Cards maintain equal height per row. Capability preset remains at two columns to preserve room for supporting rows.",
+    "desktop": "Three to four columns depending on preset. Product goes up to 4 columns at xl breakpoint. Content stays at 3. Icon preset reaches 4 columns. Capability preset tops out at 3 columns so cards can hold a short paragraph plus supporting items without feeling squeezed."
+  },
+  "motion": {
+    "micro": "Cards lift on hover with translateY(-2px) and increased shadow over 200ms ease. Image within card scales to 1.03 on hover with overflow hidden. Badge pulses subtly on new items.",
+    "transitions": "Cards entering viewport fade up from 15px below with staggered 100ms delay per card, 300ms duration. Load-more appends new cards with the same stagger animation."
+  },
+  "interactions": [
+    "lift-hover",
+    "stagger-children",
+    "animate-on-mount",
+    "click-select",
+    "scroll-reveal"
+  ],
+  "accessibility": {
+    "role": "region",
+    "aria-label": "Card grid",
+    "keyboard": [
+      "Tab should move through cards and nested actions in reading order.",
+      "If the entire card is clickable, expose one clear interactive target instead of conflicting nested links."
+    ],
+    "announcements": [
+      "Card titles and supporting metadata should be available to assistive technology without relying on hover-only UI."
+    ],
+    "focus_management": "Focused cards should get a clear outline or surface treatment equivalent to hover, and keyboard users should be able to distinguish nested CTAs from the card container."
+  },
+  "default_layout": {
+    "layout": "grid",
+    "atoms": "_grid _gc1 _sm:gc2 _lg:gc3 _xl:gc4 _gap4",
+    "slots": {
+      "card-image": "Product image with aspect-ratio container",
+      "card-title": "Product name with _textsm _fontmedium",
+      "card-price": "Price with _heading4 styling",
+      "card-rating": "Star rating row with icon stars and count Badge",
+      "card-action": "Add-to-cart Button in CardFooter"
+    }
+  },
+  "io": {
+    "consumes": [
+      "search",
+      "filters",
+      "data"
+    ],
+    "produces": [
+      "selection"
+    ],
+    "actions": [
+      "load-more"
+    ]
+  },
+  "composition": {
+    "CardGrid": "Grid(d-section, responsive: 1/2/3/4-col) > ProductCard[]",
+    "ProductCard": "Card(d-surface, hoverable, lift-on-hover) > [Image(aspect-ratio) + Title(font-medium) + Price(heading4) + RatingRow > [StarIcon[] + CountBadge(d-annotation)] + CTAButton(d-interactive, full-width)]",
+    "ContentCard": "Card(d-surface) > [Thumbnail + CategoryBadge(d-annotation) + Title(heading4) + Excerpt(text-muted) + MetaRow > [AuthorAvatar + AuthorName + Date]]",
+    "CapabilityCard": "Card(d-surface, calmer-width) > [IconChip + Title(heading-scale) + Description(text-muted) + SupportingList(divider-separated or subtly grouped) > CapabilityRow*(label + optional proficiency badge)]"
+  }
+}

package/patterns/case-brief-card.json

@@ -0,0 +1,113 @@
+{
+  "id": "case-brief-card",
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Case Brief Card",
+  "description": "A case brief summary card displaying Bluebook citation, court, outcome, holding summary, key facts, and optional research annotation margin.",
+  "category": "legal",
+  "tags": [
+    "2026",
+    "legal",
+    "research",
+    "case-brief",
+    "precedent",
+    "citation",
+    "card"
+  ],
+  "components": [
+    "CaseCitation",
+    "CourtBadge",
+    "HoldingSummary",
+    "KeyFacts",
+    "OutcomeBadge",
+    "AnnotationMargin"
+  ],
+  "default_preset": "standard",
+  "presets": {
+    "standard": {
+      "description": "Full brief card showing citation, court, outcome, holding summary, and bulleted key facts for typical research workflow usage",
+      "layout": {
+        "layout": "card",
+        "atoms": "_relative _w100 _p-6 _rounded-lg _bg-surface _border"
+      }
+    },
+    "minimal": {
+      "description": "Citation-only compact card for bibliography lists and quick reference collections showing only the formatted citation and court badge",
+      "layout": {
+        "layout": "card-compact",
+        "atoms": "_flex _items-center _gap-3 _w100 _p-3 _rounded _bg-surface _border"
+      }
+    },
+    "research": {
+      "description": "Extended card with right-docked annotation margin column for user notes, highlights, and personal research commentary attached inline",
+      "layout": {
+        "layout": "card-with-margin",
+        "atoms": "_grid _grid-cols-[1fr_240px] _gap-4 _w100 _p-6 _rounded-lg _bg-surface _border"
+      }
+    }
+  },
+  "visual_brief": "A card with the full Bluebook citation rendered at top in monospace font at prominent size (e.g. 'Roe v. Wade, 410 U.S. 113 (1973)'). Immediately below the citation, a row of badges: court badge (SCOTUS, 9th Cir., D. Mass.) with court-specific color coding, and outcome badge (Affirmed: green, Reversed: red, Remanded: amber, Vacated: purple). A short decided-date chip. Holding summary appears as a 2-3 line blockquote-styled paragraph in italic serif font set off with a left border. Key Facts section below shows a bulleted list of 3-5 concise fact bullets. Research preset adds a right margin column with annotation surface where user notes appear as sticky-note style cards in pale yellow with timestamp and optional highlight-color indicators linking to specific text spans.",
+  "layout_hints": {
+    "container": "d-surface",
+    "note": "Citations must always use Bluebook format. Court badge uses text abbreviation, never icon-only.",
+    "outcome_colors": "Outcome semantics are fixed: Affirmed green, Reversed red, Remanded amber, Vacated purple, Dismissed gray."
+  },
+  "default_layout": {
+    "layout": "card",
+    "atoms": "_relative _w100 _p-6 _rounded-lg _bg-surface _border",
+    "slots": {
+      "case-citation": "Top-of-card monospace Bluebook citation with case name and reporter reference.",
+      "court-badge": "Colored pill showing court abbreviation (SCOTUS, 9th Cir., etc.) with court-specific palette.",
+      "outcome-badge": "Pill showing case disposition (Affirmed, Reversed, Remanded, Vacated) with semantic color.",
+      "holding-summary": "Italic serif blockquote paragraph set off with left border containing 2-3 line holding summary.",
+      "key-facts": "Bulleted list of 3-5 concise material facts from the case.",
+      "annotation-margin": "Right-docked column (research preset only) containing user-authored annotation notes and highlights."
+    }
+  },
+  "accessibility": {
+    "role": "article",
+    "aria-label": "Case brief",
+    "announcements": [
+      "Case {citation}: court {court}, outcome {outcome}",
+      "Holding: {summary}"
+    ],
+    "keyboard": [
+      "Tab: focus card",
+      "Enter: expand to full case view",
+      "N: add annotation (research preset)",
+      "H: highlight selection (research preset)"
+    ]
+  },
+  "responsive": {
+    "mobile": "Research preset collapses annotation margin to bottom drawer. Citation may wrap to two lines.",
+    "tablet": "Standard layout retained. Research margin narrows to 200px."
+  },
+  "motion": {
+    "micro": {
+      "card-hover": "elevation raise + citation highlight 150ms ease-out",
+      "fact-hover": "bullet point accent 120ms ease"
+    },
+    "transitions": {
+      "expand-full": "card height grow + content fade-in 300ms ease-in-out",
+      "annotation-add": "new note slide-in from right 300ms ease-out"
+    },
+    "ambient": {
+      "highlighted-fact": "subtle background glow on linked fact when annotation hovered 2s ease-in-out"
+    }
+  },
+  "interactions": [
+    "lift-hover",
+    "click-select",
+    "animate-on-mount"
+  ],
+  "composition": {
+    "CaseBriefCard": "Card(d-surface) > [Header > [CaseCitation(mono) + BadgeRow > [CourtBadge + OutcomeBadge + DateChip]] + HoldingSummary(italic-quote) + KeyFacts > FactBullet[] + AnnotationMargin?]",
+    "CaseCitation": "Text(mono, prominent) > CitationString",
+    "CourtBadge": "Pill(d-annotation, data-court) > CourtAbbreviation",
+    "OutcomeBadge": "Pill(d-annotation, data-outcome) > OutcomeLabel",
+    "HoldingSummary": "Blockquote(serif-italic, left-border) > SummaryText",
+    "KeyFacts": "List(bulleted) > FactItem[]",
+    "AnnotationMargin": "Column(d-annotation) > AnnotationNote[] > [Timestamp + NoteBody + HighlightLink]"
+  }
+}