@decantr/content 3.8.0

package/patterns/drag-sort-list.json

@@ -0,0 +1,119 @@
+{
+  "id": "drag-sort-list",
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Drag Sort List",
+  "description": "A vertically reorderable list with drag handles, keyboard reordering support, and animated position indicators for intuitive item rearrangement.",
+  "category": "interaction",
+  "tags": [
+    "2026",
+    "interaction",
+    "drag-and-drop",
+    "sortable",
+    "reorder",
+    "list"
+  ],
+  "components": [
+    "SortableList",
+    "SortableItem",
+    "DragHandle",
+    "PositionIndicator",
+    "DropZone"
+  ],
+  "default_preset": "standard",
+  "presets": {
+    "standard": {
+      "description": "Full-featured sortable list with drag handles, item content, and optional trailing actions — suitable for settings pages, playlist editors, and priority lists",
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _flex-col _gap-0 _w100"
+      }
+    },
+    "compact": {
+      "description": "Minimal-height sortable rows at 36px each, optimized for dense data scenarios like column reordering panels or bulk sort interfaces",
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _flex-col _gap-0 _w100 _text-sm"
+      }
+    },
+    "numbered": {
+      "description": "Sortable list with live-updating rank numbers displayed to the left of each item, ideal for leaderboards, priority queues, and ranked preference lists",
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _flex-col _gap-0 _w100"
+      }
+    }
+  },
+  "visual_brief": "A vertical stack of list items, each rendered as a full-width row with a 6-dot grip icon (two columns of three dots, styled in muted gray) flush to the left edge serving as the drag handle. The drag handle area is 40px wide with a subtle hover background tint. Each item row has 12px vertical padding, a 1px bottom border in border-muted color, and transitions background-color on hover to a faint surface tint. When a user initiates a drag, the grabbed item lifts above the list with an elevated box-shadow (0 8px 24px rgba(0,0,0,0.15)) and a slight scale transform (1.02), maintaining its full width. The original position shows a 2px-high accent-colored horizontal line spanning the full list width as a drop indicator. As the dragged item moves vertically, items below the cursor shift downward with a smooth 200ms ease transition, and the accent drop-indicator line tracks the insertion point between items. On drop, the item settles into its new position with a 150ms ease-out transition. The numbered preset prepends a 32px-wide column showing rank numbers (1, 2, 3...) in semi-bold muted text that re-index live during drag — numbers animate between positions with a counter transition. The compact preset reduces row height to 36px, uses text-sm for content, narrows the drag handle to 28px, and removes the bottom border in favor of alternating row background tints (transparent / surface-subtle). All presets show a focus-visible ring (2px accent outline, 2px offset) around the currently keyboard-focused item.",
+  "layout_hints": {
+    "container": "card or inline",
+    "note": "Best placed inside a d-surface card. Each SortableItem is a full-width row. The list should have a max-height with overflow-y auto for long lists.",
+    "drag_handle": "The 6-dot grip icon MUST be the leftmost element in each row. It uses a 2×3 grid of 4px circles with 3px gaps. Color: text-muted, hover: text-default. cursor: grab, active: cursor: grabbing.",
+    "drop_zone": "The drop indicator line is absolutely positioned between items. It spans the full width of the list container, is 2px tall, and uses the accent color with a subtle glow (box-shadow: 0 0 4px var(--d-accent))."
+  },
+  "default_layout": {
+    "layout": "stack",
+    "atoms": "_flex _flex-col _gap-0 _w100 _relative",
+    "slots": {
+      "sortable-list": "The outer container for all sortable items. Renders as a vertical flex column with no gap (items are flush). Sets role='listbox' and aria-label='Reorderable list'. Manages drag state, tracks the currently dragged item index, and calculates drop position from pointer coordinates. On keyboard reorder, dispatches announcements like 'Item moved to position 3 of 7'. Has a subtle 1px border and border-radius-md when placed standalone.",
+      "sortable-item": "Repeating slot — one per list entry. Each item is a horizontal flex row with align-items center. Layout: [DragHandle (40px fixed) | Content (flex-1) | Actions? (auto)]. Background: transparent, hover: surface-subtle. Border-bottom: 1px solid border-muted (except last child). Padding: 12px vertical, 8px horizontal. When being dragged: position fixed, z-index 1000, width matches original, box-shadow: 0 8px 24px rgba(0,0,0,0.15), transform: scale(1.02), pointer-events: none on children except the handle. When another item is being dragged over this slot, it translates Y by the height of the dragged item with a 200ms ease transition. aria-roledescription='sortable item', aria-grabbed tracks drag state.",
+      "drag-handle": "A 40px-wide touch target containing a 6-dot grip icon (two vertical columns of three 4px circles, spaced 3px apart, centered within the handle area). Color: text-muted by default, text-default on hover. cursor: grab (grabbing when active). The handle has a subtle rounded background on hover (4px border-radius, bg-surface-hover). On focus-visible, shows a 2px accent ring. This is the only element that initiates drag — the rest of the row does not trigger reorder on pointer down. For touch devices, the handle area expands to 48px for easier targeting.",
+      "position-indicator": "The horizontal drop-target line shown between items during an active drag operation. Absolutely positioned within the list container at the calculated insertion point. Width: 100%, height: 2px, background: accent color. Enhanced with a subtle glow: box-shadow 0 0 6px color-mix(in srgb, var(--d-accent) 40%, transparent). Appears with a fast 100ms fade-in. Hidden when no drag is active. In the numbered preset, the indicator also shows a small floating badge with the prospective rank number.",
+      "drop-zone": "An invisible overlay region calculated per item that determines which gap the pointer is closest to. Each item has a top-half and bottom-half hit zone. When the pointer enters the top half, the indicator appears above that item; bottom half places it below. The drop zone extends 8px beyond the list edges to allow inserting at the very top or bottom. Visual feedback: none (the position-indicator handles all visual cues)."
+    }
+  },
+  "accessibility": {
+    "role": "listbox",
+    "aria-label": "Reorderable list",
+    "announcements": [
+      "Item {name} picked up from position {from}",
+      "Item {name} moved to position {to} of {total}",
+      "Item {name} dropped at position {to}",
+      "Reorder cancelled, item returned to position {from}"
+    ],
+    "keyboard": [
+      "Tab: move focus between sortable items",
+      "Space: pick up or drop the focused item for reordering",
+      "Arrow Up: move picked-up item one position up",
+      "Arrow Down: move picked-up item one position down",
+      "Escape: cancel reorder and return item to original position",
+      "Home: move picked-up item to first position",
+      "End: move picked-up item to last position"
+    ]
+  },
+  "responsive": {
+    "mobile": "Drag handle touch target expands to 48px width. Long-press (300ms) on the handle initiates drag to prevent accidental reorders during scroll. Drop indicator line remains 2px but gains a wider glow for visibility on small screens. Compact preset increases row height to 44px for touch accessibility. Numbered preset reduces rank number font size to text-xs.",
+    "tablet": "Full drag behavior supported with touch. Drag handle is 44px. Scroll container supports momentum scrolling while drag is inactive. When a drag is active, container scroll locks to prevent conflicting gestures.",
+    "desktop": "Standard mouse-based drag and drop. Drag handle shows grab cursor. Smooth item displacement animations at 200ms. Keyboard reorder fully supported with live aria announcements."
+  },
+  "motion": {
+    "micro": {
+      "handle-hover": "background-color fade 150ms ease",
+      "item-hover": "background-color fade 120ms ease"
+    },
+    "transitions": {
+      "item-lift": "box-shadow 0→elevated + scale 1→1.02, 200ms ease-out",
+      "item-drop": "box-shadow elevated→0 + scale 1.02→1, 150ms ease-out",
+      "item-shift": "translateY 200ms ease",
+      "rank-update": "counter value tween 200ms ease-in-out"
+    },
+    "ambient": {
+      "indicator-glow": "box-shadow pulse on accent 1.5s ease-in-out infinite while drag active"
+    }
+  },
+  "interactions": [
+    "drag-reorder",
+    "click-select",
+    "animate-on-mount",
+    "hover-reveal",
+    "stagger-children"
+  ],
+  "composition": {
+    "SortableList": "Container(d-section, role=listbox) > SortableItem*",
+    "SortableItem": "Row(d-interactive, flex, align-center) > [DragHandle + Content(flex-1) + Actions?]",
+    "DragHandle": "TouchTarget(40px, cursor=grab) > GripIcon(6-dot)",
+    "PositionIndicator": "Line(absolute, accent, 2px-h, full-width, glow)",
+    "DropZone": "HitArea(invisible, per-item, top-half|bottom-half)"
+  }
+}

package/patterns/earnings-dashboard.json

@@ -0,0 +1,132 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "id": "earnings-dashboard",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Earnings Dashboard",
+  "description": "Revenue analytics dashboard with KPIs, charts, tier breakdown, and recent transactions. Date range filtering and export capabilities.",
+  "dependencies": {
+    "patterns": {
+      "kpi-grid": "^1.0.0"
+    },
+    "styles": {},
+    "requires_core": {
+      "components": [
+        "Button",
+        "Card",
+        "Badge",
+        "Select",
+        "icon"
+      ],
+      "charts": [
+        "LineChart",
+        "BarChart",
+        "PieChart"
+      ]
+    }
+  },
+  "components": [
+    "Button",
+    "Card",
+    "Badge",
+    "Select",
+    "icon"
+  ],
+  "default_preset": "standard",
+  "presets": {
+    "standard": {
+      "description": "Full analytics view with all charts and data",
+      "components": [
+        "Button",
+        "Card",
+        "Badge",
+        "Select",
+        "icon"
+      ],
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _col _gap6",
+        "slots": {
+          "kpis": "Revenue, MRR, subscribers, churn metrics",
+          "revenue-chart": "Line/bar chart of revenue over time",
+          "tier-breakdown": "Revenue by tier pie chart",
+          "recent-transactions": "Latest payments table",
+          "payout-status": "Next payout info card"
+        }
+      }
+    },
+    "summary": {
+      "description": "Condensed KPI view for dashboard home",
+      "components": [
+        "Card",
+        "Badge",
+        "icon"
+      ],
+      "layout": {
+        "layout": "grid",
+        "atoms": "_grid _gc2 _lg:gc4 _gap4",
+        "slots": {
+          "kpis": "Key metrics cards"
+        }
+      }
+    }
+  },
+  "default_layout": {
+    "layout": "stack",
+    "atoms": "_flex _col _gap6",
+    "slots": {
+      "kpis": "Key metrics",
+      "charts": "Revenue charts",
+      "transactions": "Recent payments"
+    }
+  },
+  "io": {
+    "produces": [
+      "date-range-changed",
+      "export-triggered"
+    ],
+    "consumes": [
+      "earnings-data",
+      "transaction-data"
+    ]
+  },
+  "visual_brief": "Dashboard layout with a row of KPI metric cards at the top (total revenue, subscribers, MRR, churn rate), each showing the value, trend arrow (up/down with green/red color), and percentage change. Below the KPIs, a large revenue line chart with date range selector (7d, 30d, 90d, 1y) and an overlaid area fill. A tier breakdown section shows revenue per subscription tier as a horizontal stacked bar or donut chart. A recent transactions table at the bottom lists individual payments with date, subscriber, amount, and status. Export button in the header.",
+  "responsive": {
+    "mobile": "KPI cards scroll horizontally or stack in a 2x2 grid. Charts take full width with simplified labels. Transactions table becomes a card list. Export button moves to a menu.",
+    "tablet": "KPIs in a single row. Charts render at full container width. Transactions table with horizontal scroll if needed.",
+    "desktop": "Full dashboard grid. KPIs span the top. Charts and tier breakdown side by side. Transactions table with all columns visible."
+  },
+  "layout_hints": {
+    "summary_first": "Lead with headline earnings metrics, then trend visualization, then transaction detail. The dashboard should tell a financial story from top to bottom rather than feeling like a loose pile of widgets.",
+    "chart_balance": "Revenue chart and tier breakdown should feel related but not equal in weight if one is clearly the primary insight surface.",
+    "trust_rhythm": "Keep totals, dates, and transaction states legible and conservative. This is a financial dashboard, so stability and clarity matter more than visual spectacle."
+  },
+  "motion": {
+    "micro": "KPI values and charts may reveal with restrained count-up or fade-in behavior, while export or range controls should respond crisply on hover and focus.",
+    "transitions": "Date-range changes should animate smoothly enough to preserve context without making revenue interpretation feel unstable."
+  },
+  "interactions": [
+    "drag-reorder",
+    "click-select",
+    "animate-on-mount",
+    "real-time-updates",
+    "hover-tooltip"
+  ],
+  "accessibility": {
+    "role": "region",
+    "aria-label": "Earnings dashboard",
+    "keyboard": [
+      "Header controls, KPI cards, charts, and transaction surfaces should remain keyboard reachable in reading order."
+    ],
+    "announcements": [
+      "Revenue totals, trend directions, and date-range changes should be exposed semantically so the dashboard remains understandable beyond visual chart treatments."
+    ]
+  },
+  "composition": {
+    "EarningsDashboard": "Container(d-section, flex-col, gap-6) > [KPIRow + RevenueChart + TierBreakdown + TransactionsTable + PayoutStatus?]",
+    "KPIRow": "Grid(d-data, 4-col) > KPICard(d-surface)[]",
+    "KPICard": "Card > [Value(heading2, mono-data) + TrendArrow(color: positive|negative) + Label(text-muted)]",
+    "RevenueChart": "Card(d-surface) > [DateRangeSelector(d-control) + Chart(d-data, area-fill)]",
+    "TransactionsTable": "Card(d-surface) > [Table(d-data) > TransactionRow[]]"
+  }
+}

package/patterns/emissions-sankey.json

@@ -0,0 +1,113 @@
+{
+  "id": "emissions-sankey",
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Emissions Sankey",
+  "description": "A left-to-right Sankey diagram visualising the flow of greenhouse gas emissions from sources, through scope categories, to a final total footprint with target markers.",
+  "category": "climate",
+  "tags": [
+    "2026",
+    "climate",
+    "sankey",
+    "emissions",
+    "ghg",
+    "flow-diagram",
+    "sustainability"
+  ],
+  "components": [
+    "SankeyCanvas",
+    "SourceNode",
+    "FlowPath",
+    "CategoryNode",
+    "TargetMarker",
+    "LegendBox"
+  ],
+  "default_preset": "scope-view",
+  "presets": {
+    "scope-view": {
+      "description": "Flows grouped by GHG Protocol scopes (Scope 1/2/3) feeding into a single total tCO2e node with target reduction marker overlay",
+      "layout": {
+        "layout": "horizontal-flow",
+        "atoms": "_relative _w100 _h100 _bg-surface _p-6 _overflow-visible"
+      }
+    },
+    "supply-chain": {
+      "description": "Source-to-product-to-customer flow showing emissions moving through suppliers, manufacturing processes, and into finished goods delivered to customers",
+      "layout": {
+        "layout": "horizontal-flow",
+        "atoms": "_relative _w100 _h100 _bg-surface _p-6 _overflow-visible"
+      }
+    },
+    "reduction": {
+      "description": "Emphasises reduction outflows rendered in green against baseline red flows, visualising abatement levers and residual emissions against net-zero target",
+      "layout": {
+        "layout": "horizontal-flow",
+        "atoms": "_relative _w100 _h100 _bg-surface _p-6 _overflow-visible"
+      }
+    }
+  },
+  "visual_brief": "A wide, left-to-right Sankey diagram rendered on a light-neutral canvas. On the far left, a stack of source nodes (Suppliers, Operations, Travel, Energy, Waste) appear as rounded rectangles labelled with monospace tCO2e values. Curved bezier flow paths fan rightward into a central column of emission category nodes (Scope 1 deep red #B22222, Scope 2 burnt orange #D97706, Scope 3 amber yellow #F59E0B) where flow width is proportional to tonnage. Reduction flows appear as inward green (#16A34A) ribbons pointing backwards. A horizontal dashed target marker line crosses the total node on the right indicating the net-zero goal with a small flag label. Hovering any flow path reveals a tooltip with absolute tCO2e, percentage of total, and source-to-category pair. Legend box in the bottom-right lists scope colors with descriptions. Subtle grid lines in the background provide scale reference.",
+  "layout_hints": {
+    "container": "d-section",
+    "note": "Full-width horizontal Sankey. Min-height 480px. Flow paths must use SVG with bezier curves and animated dash-offset on hover.",
+    "data_labels": "All tonnage values MUST appear with units (tCO2e) in monospace. Percentages shown to 1 decimal place.",
+    "color_semantics": "Scope 1 = deep red, Scope 2 = orange, Scope 3 = yellow, reductions = green. Never reverse these semantics."
+  },
+  "default_layout": {
+    "layout": "horizontal-flow",
+    "atoms": "_relative _w100 _h100 _bg-surface _p-6 _overflow-visible",
+    "slots": {
+      "sankey-canvas": "The full SVG viewport rendering source nodes, flow paths, and category nodes. Uses a responsive viewBox that scales path widths proportionally to tonnage values. Background is subtle neutral with optional grid.",
+      "source-node": "Repeating slot for each emission source on the left edge. Rounded rectangle (width 140px, variable height based on emission magnitude) with source name in sans-serif and tCO2e in monospace below.",
+      "flow-path": "SVG cubic bezier path connecting a source-node to a category-node. Path width encodes tCO2e volume. Fill uses gradient from source color to category color. Hover state raises opacity and shows tooltip.",
+      "category-node": "Center-column scope category rectangles (Scope 1/2/3). Colored according to scope semantics. Display category name, total tonnage, and percent of company total.",
+      "target-marker": "Dashed horizontal line overlaid on the rightmost total node. Includes a small flag label with target year and reduction percentage (e.g. '2030 -50%').",
+      "legend-box": "Bottom-right anchored panel listing scope colors, reduction color, and unit definitions. Uses backdrop-blur with thin border."
+    }
+  },
+  "accessibility": {
+    "role": "img",
+    "aria-label": "Greenhouse gas emissions Sankey diagram showing flows from sources through scopes to total footprint",
+    "announcements": [
+      "Flow from {source} to {category}: {value} tCO2e ({percent} of total)",
+      "Target marker: {year} reduction goal of {percent}"
+    ],
+    "keyboard": [
+      "Tab: cycle through source nodes, then flow paths, then category nodes",
+      "Enter: open detail tooltip for focused element",
+      "Escape: dismiss tooltip"
+    ]
+  },
+  "responsive": {
+    "mobile": "Sankey rotates to vertical top-to-bottom flow. Flow labels hidden by default, accessible on tap. Legend collapses to expandable disclosure.",
+    "tablet": "Horizontal Sankey retained but reduces source node count (merges smaller sources into 'Other'). Legend docks to bottom edge."
+  },
+  "motion": {
+    "micro": {
+      "flow-hover": "opacity 0.6 to 1.0 + stroke-width +2px 180ms ease-out",
+      "node-hover": "scale(1.02) + shadow-elevate 200ms ease-out"
+    },
+    "transitions": {
+      "data-update": "flow-path width interpolate 600ms ease-in-out",
+      "preset-switch": "cross-fade 400ms ease"
+    },
+    "ambient": {
+      "flow-pulse": "subtle dash-offset drift 8s linear infinite on active flows"
+    }
+  },
+  "interactions": [
+    "animate-on-mount",
+    "hover-tooltip",
+    "real-time-updates"
+  ],
+  "composition": {
+    "EmissionsSankey": "Section(d-section) > SankeyCanvas > [SourceNode[] + FlowPath[](animated) + CategoryNode[] + TargetMarker] + LegendBox",
+    "SankeyCanvas": "SVG(viewBox-responsive) > [Background(grid) + NodeLayer + FlowLayer + OverlayLayer]",
+    "SourceNode": "Rect(rounded, positioned) > [SourceName + TonnageLabel(mono)]",
+    "FlowPath": "Path(bezier, gradient-fill) > Tooltip(tonnage + percent)",
+    "CategoryNode": "Rect(scope-colored) > [CategoryName + TotalTonnage + PercentShare]",
+    "TargetMarker": "Line(dashed) + Flag(year + reduction-target)",
+    "LegendBox": "Panel(d-annotation, backdrop-blur) > LegendItem[]"
+  }
+}

package/patterns/emoji-reaction-bar.json

@@ -0,0 +1,115 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "id": "emoji-reaction-bar",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Emoji Reaction Bar",
+  "description": "A social reaction picker displaying emoji chips with counts and animated additions. Users can react with emojis, see aggregated counts, and open a popover picker to add new reactions. Supports inline, floating, and compact display modes.",
+  "category": "social",
+  "tags": [
+    "2026",
+    "social",
+    "emoji",
+    "reaction",
+    "interactive",
+    "engagement",
+    "feedback"
+  ],
+  "components": [
+    "ReactionBar",
+    "ReactionChip",
+    "ReactionPicker",
+    "AddButton"
+  ],
+  "default_preset": "inline",
+  "presets": {
+    "inline": {
+      "description": "Horizontal row of reaction chips rendered directly beneath content, with add button at the end — standard placement for posts and comments",
+      "layout": {
+        "layout": "row",
+        "atoms": "_flex _row _wrap _gap2 _aic _py1"
+      }
+    },
+    "floating": {
+      "description": "Reaction bar rendered as a floating toolbar that appears on hover above the target content, with rounded pill shape and subtle shadow",
+      "layout": {
+        "layout": "row",
+        "atoms": "_absolute _top-[-40px] _left0 _flex _row _gap1 _px2 _py1 _rounded-full _shadow-md"
+      }
+    },
+    "compact": {
+      "description": "Icon-only mode showing just emoji symbols without counts — suitable for tight spaces like table cells or message actions",
+      "layout": {
+        "layout": "row",
+        "atoms": "_flex _row _gap1 _aic"
+      }
+    }
+  },
+  "visual_brief": "A horizontal row of small pill-shaped chips, each 28px tall with 8px horizontal padding and border-radius 14px (full pill). Each chip contains an emoji character (16px) on the left and a count number (12px, medium weight, tabular-nums) on the right, separated by 4px gap. Chip background is a muted surface color. When the current user has reacted with a particular emoji, that chip gets an accent-colored border (2px) and a faint accent background tint to indicate ownership. Chips are ordered by count descending, then by time of first reaction. At the end of the row sits an AddButton: a 28px circle with a '+' icon (14px, muted color) that opens the ReactionPicker popover on click. The ReactionPicker is a popover panel (240px wide) positioned above the add button, with a 6-column grid of emoji buttons (36px each, with hover highlight). The picker has a search input at the top (with a small magnifying glass icon) for filtering emojis, and category tabs (Smileys, Gestures, Hearts, Objects, Flags) below the search. The popover has border-radius 12px, subtle shadow, and a small arrow pointing down to the add button. Adding a new reaction causes the corresponding chip to bounce (scale 1 to 1.3 to 1 over 300ms with spring easing). If the emoji chip is new, it slides in from the right edge of the bar with a 200ms ease-out animation. Count numbers animate with a rolling digit effect (old number slides up and fades out while new number slides up from below and fades in, 150ms). Removing a reaction (clicking an owned chip) reverses the bounce (scale 1 to 0.8 to 1) and decrements the count with the same rolling animation. If count reaches 0, the chip shrinks width to 0 and fades out over 200ms.",
+  "default_layout": {
+    "layout": "row",
+    "atoms": "_flex _row _wrap _gap2 _aic _py1",
+    "slots": {
+      "reaction-bar": "Horizontal flex container wrapping all ReactionChip elements and the trailing AddButton. Supports wrapping to multiple rows when many reactions are present. Gap of 6px between chips. Inline preset renders directly in document flow; floating preset uses absolute positioning with shadow and pill background.",
+      "reaction-chip": "Repeating slot — one per unique emoji reaction. A small pill (28px height, full border-radius) containing the emoji character and the reaction count. Background: muted surface. User's own reactions: accent border (2px) and faint accent background tint. Hover: slightly elevated shadow and background lighten. Click toggles the user's reaction on/off. Count uses tabular-nums font-feature for stable width.",
+      "add-button": "A circular button (28px diameter) at the end of the reaction row. Displays a '+' icon in muted color. On click, opens the ReactionPicker popover. Hover: background lightens, icon color becomes accent. Focus ring visible on keyboard focus.",
+      "reaction-picker": "Popover panel (240px wide, border-radius 12px, shadow-lg) positioned above the AddButton with a downward-pointing arrow. Contains a search input at the top for filtering emojis by name, category tab bar below, and a 6-column grid of emoji buttons (36px touch targets). Each emoji button highlights on hover. Selecting an emoji adds the reaction and closes the picker. Picker dismisses on click outside or Escape."
+    }
+  },
+  "accessibility": {
+    "role": "toolbar",
+    "aria-label": "Emoji reactions",
+    "announcements": [
+      "Reaction added: {emoji} — total {count}",
+      "Reaction removed: {emoji} — total {count}",
+      "Reaction picker opened with {total} emojis available",
+      "Reaction picker closed",
+      "{emoji}: {count} reactions, {user_reacted ? 'you reacted' : 'not reacted'}"
+    ],
+    "keyboard": [
+      "Arrow Left/Right: navigate between reaction chips and add button",
+      "Enter or Space: toggle reaction on focused chip, or open picker on add button",
+      "Escape: close the reaction picker popover",
+      "Arrow keys inside picker: navigate the emoji grid",
+      "Type to search: when picker is open, typing filters emojis"
+    ]
+  },
+  "responsive": {
+    "mobile": "Reaction chips use 32px height for touch targets. Picker opens as a bottom sheet (full width, 50vh height) instead of a popover. Emoji grid uses 5 columns. Long-press on a chip shows who reacted in a tooltip. Chips wrap to multiple rows freely.",
+    "tablet": "Standard inline layout. Picker opens as a popover positioned above. 6-column emoji grid. Tap to toggle reactions.",
+    "desktop": "Full layout with hover states on chips. Picker opens as a popover. Hovering a chip shows a tooltip listing the first 5 users who reacted. Keyboard navigation fully supported."
+  },
+  "layout_hints": {
+    "bar_role": "The reaction bar is a lightweight engagement affordance that should sit close to the content it belongs to without overshadowing the main thread or post body.",
+    "chip_density": "Keep chips compact and readable. Ownership state, count, and add affordance should all remain scannable even when many reactions accumulate.",
+    "picker_anchor": "The picker should feel physically attached to the add button or reaction rail. On mobile, the bottom-sheet translation should preserve that same semantic relationship."
+  },
+  "motion": {
+    "micro": {
+      "chip-hover": "background lighten + translateY(-1px) 120ms ease-out",
+      "chip-press": "scale(0.95) 60ms ease-in",
+      "add-button-hover": "background lighten + rotate(90deg) on '+' icon 200ms ease-out"
+    },
+    "transitions": {
+      "reaction-add": "scale(1→1.3→1) 300ms cubic-bezier(0.34, 1.56, 0.64, 1) spring bounce on chip",
+      "reaction-remove": "scale(1→0.8→1) 200ms ease-out on chip",
+      "chip-enter": "translateX(20px)→translateX(0) + opacity 0→1 200ms ease-out for new chips",
+      "chip-exit": "width→0 + opacity 1→0 200ms ease-in for removed chips",
+      "count-roll": "old digit translateY(0→-100%) + opacity 1→0, new digit translateY(100%→0) + opacity 0→1, 150ms ease-out",
+      "picker-open": "scale(0.9→1) + opacity 0→1 200ms cubic-bezier(0.16, 1, 0.3, 1)",
+      "picker-close": "scale(1→0.9) + opacity 1→0 150ms ease-in"
+    },
+    "ambient": {}
+  },
+  "interactions": [
+    "click-select",
+    "animate-on-mount",
+    "scale-hover"
+  ],
+  "composition": {
+    "ReactionBar": "Row(d-interactive, flex, wrap, gap-2) > ReactionChip*(d-interactive) + AddButton(d-interactive)",
+    "ReactionChip": "Pill(d-surface, border: accent-if-owned, rounded-full, h-28) > [Emoji(text-base) + Count(mono-data, tabular-nums, text-xs)]",
+    "AddButton": "Circle(d-interactive, rounded-full, h-28, w-28) > PlusIcon(muted)",
+    "ReactionPicker": "Popover(d-surface, shadow-lg, rounded-xl, w-240) > [SearchInput + CategoryTabs + EmojiGrid(6-col) > EmojiButton*]"
+  }
+}

package/patterns/esports-matchday-command.json

@@ -0,0 +1,132 @@
+{
+  "id": "esports-matchday-command",
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Esports Matchday Command",
+  "description": "A full-bleed cinematic esports homepage pattern built around a live match hero, broadcast telemetry, roster matchup panel, vertical update reel, and aggressive gaming CTAs.",
+  "category": "esports",
+  "tags": [
+    "2026",
+    "esports",
+    "gaming",
+    "matchday",
+    "broadcast",
+    "full-bleed",
+    "immersive",
+    "homepage"
+  ],
+  "components": [
+    "BroadcastStage",
+    "MatchHeadline",
+    "TitleGleam",
+    "LiveTelemetryStrip",
+    "CutButton",
+    "LiveRosterPanel",
+    "PlayerAvatarRow",
+    "VerticalUpdateReel",
+    "ArenaCanvas",
+    "CommandLayerRunway",
+    "AccessTeaser"
+  ],
+  "contained": false,
+  "default_preset": "broadcast-home",
+  "presets": {
+    "broadcast-home": {
+      "description": "Full homepage treatment with fixed immersive header, first-viewport match stage, right-side 5v5 roster panel, vertical live update reel, command layers section, and access teaser.",
+      "layout": {
+        "layout": "full-bleed-stage",
+        "atoms": "_relative _minh[100dvh] _overflow-hidden _px0 _py0"
+      }
+    },
+    "hero-only": {
+      "description": "First-viewport match hero only. Use when the page needs a cinematic top section but the rest of the route is composed from separate product patterns.",
+      "layout": {
+        "layout": "hero-stage",
+        "atoms": "_relative _grid _minh[100dvh] _overflow-hidden"
+      }
+    },
+    "compact": {
+      "description": "Compressed broadcast stage for route previews and smaller public pages. Keeps headline, live score, CTAs, and roster proof while dropping secondary command-layer sections.",
+      "layout": {
+        "layout": "compact-stage",
+        "atoms": "_relative _grid _minh[72dvh] _overflow-hidden"
+      }
+    }
+  },
+  "visual_brief": "The page should feel like a professional live esports broadcast command surface, not a generic SaaS landing page. The first viewport is a dark arena-like stage with cyan, acid green, violet, and red light beams over a subtle perspective grid. A huge italic uppercase match headline names a specific live match, for example 'Team Vitality vs. r3Fraction'. The headline stays white while a narrow gleam sweeps left-to-right on load and then repeats every few seconds. Supporting copy is short and operational. A compact telemetry strip sits beneath it with current score, map, map-ban timer, comms, form, and momentum. Primary actions use angular cut/parallelogram buttons, not pills. The right third of desktop contains a liquid-glass roster panel with a score row at the top, two-column 5v5 circular-avatar player matchups, and a vertical rolling update reel in the empty lower space. The bottom page ticker is forbidden; live updates belong inside the roster panel. Ambient animation may include a radar/galaxy layer on desktop top-left and mobile right-side, but avoid mascot, controller, or decorative character graphics that compete with the copy.",
+  "layout_hints": {
+    "container": "full-bleed route section, never a d-surface card",
+    "shell": "Prefer immersive-stage. If top-nav-footer is used, override its default section padding and make the header flush full-width.",
+    "headline": "Use bold italic display typography with no negative letter spacing. Text should remain white at rest; shimmer is an overlay only.",
+    "buttons": "Use angular clipped buttons with hover gleam, slight skew/translate on hover, and active press feedback. Avoid rounded pill CTAs.",
+    "roster_panel": "Desktop panel is about one third of viewport width. It starts with the score row, not an extra 'Live roster / 5v5' label strip.",
+    "updates": "Use a vertical rolling update reel inside the roster panel. Duplicate reel items for seamless looping. Fade top/bottom edges.",
+    "anti_patterns": "Do not use generic hero paragraph CTA card scaffolds, chip-heavy hero badges, nested cards, bottom horizontal marquees, mascot/controller hero graphics, or blocky grid-card wrapping in the first viewport."
+  },
+  "default_layout": {
+    "layout": "full-bleed-stage",
+    "atoms": "_relative _minh[100dvh] _overflow-hidden _px0 _py0",
+    "slots": {
+      "broadcast-stage": "Full-viewport background stage with perspective grid, scanline/grain texture, and colored light beams.",
+      "match-headline": "Large match title with explicit teams and small VS tag tucked into the line flow.",
+      "live-telemetry-strip": "Inline score and operating metrics below supporting copy.",
+      "cut-button": "Primary and secondary angular CTAs with icon support and animated hover state.",
+      "live-roster-panel": "Glass panel containing score row, 5v5 player avatar matchups, and update reel.",
+      "vertical-update-reel": "Top-to-bottom rolling match updates contained inside the roster panel.",
+      "command-layer-runway": "Second section with three free-form operating layers for pressure, replay, and partner control.",
+      "access-teaser": "Login or access teaser can use a split scene later on the page, not inside the first hero card."
+    }
+  },
+  "composition": {
+    "EsportsMatchdayCommand": "Page(full-bleed) > BroadcastStage > [AmbientCanvas + HeaderShell + HeroGrid > [HeroCopy > [Eyebrow + MatchHeadline + Lede + LiveTelemetryStrip + ActionDock] + LiveRosterPanel > [ScoreRow + RosterGrid + VerticalUpdateReel]]] + CommandLayerRunway + AccessTeaser",
+    "MatchHeadline": "Heading(display, italic, uppercase) > [TeamName(primary) + VsTag + TeamName(opponent)] with TitleGleam overlay",
+    "LiveTelemetryStrip": "Masked horizontal grid > [ScoreCell + TimerCell + CommsCell + FormCell + MomentumCell]",
+    "LiveRosterPanel": "GlassPanel(liquid, translucent) > [ScoreRow + RosterGrid(5 rows, 2 columns) + VerticalUpdateReel]",
+    "VerticalUpdateReel": "MaskedViewport(height fixed) > ReelTrack(duplicated updates, translateY loop) > UpdateRow[] > [Timestamp + EventText]",
+    "CommandLayerRunway": "Open full-width section with three offset layers, each border-accented by a different match color"
+  },
+  "accessibility": {
+    "role": "region",
+    "aria-label": "Live esports matchday command homepage",
+    "announcements": [
+      "Live score {teamA} {scoreA}, {teamB} {scoreB}",
+      "Match update: {event} at {time}"
+    ],
+    "keyboard": [
+      "Tab: move through navigation, CTAs, roster panel, and access form",
+      "Enter: activate CTAs",
+      "Space: pause live update reel when focused if implemented as an interactive control"
+    ],
+    "focus_management": "Animated updates should not steal focus. Provide readable text alternatives for canvas-only ambience."
+  },
+  "responsive": {
+    "mobile": "Single-column stage. Header hides secondary nav links. Headline reduces enough to fit without clipping. Telemetry becomes two columns, then one column below very narrow widths. Roster panel stacks beneath CTAs; player matchups become vertical pairs. Radar ambience may move to the right side and should never obscure the lede.",
+    "tablet": "Hero copy stays first, roster panel moves beneath or beside depending on available width. Keep the match title readable and preserve the score row.",
+    "desktop": "Hero uses two columns: copy consumes remaining width, roster panel occupies roughly one third. Ambient radar sits top-left. Header accent line spans full viewport width."
+  },
+  "motion": {
+    "ambient": {
+      "title-gleam": "Overlay shimmer sweeps left-to-right on load and repeats about every 4 seconds while base text stays white.",
+      "radar": "Subtle rotating radar or orbital particle layer, desktop top-left and mobile right-side.",
+      "vertical-reel": "Live update reel rolls vertically with top and bottom mask fades.",
+      "scanline": "Optional low-opacity scanline texture, disabled under reduced motion."
+    },
+    "micro": {
+      "button-hover": "Cut buttons translate up, skew slightly, and sweep a light band across the fill.",
+      "button-active": "Button presses down by 1px and scales slightly.",
+      "live-beacon": "Primary live CTA includes pulsing dot/ring icon."
+    },
+    "transitions": {
+      "hero-enter": "Headline and telemetry fade up quickly; roster panel follows with a soft lift."
+    }
+  },
+  "interactions": [
+    "animate-on-mount",
+    "status-pulse",
+    "glow-hover",
+    "live-simulation",
+    "real-time-updates",
+    "keyboard-navigation"
+  ]
+}