@decantr/content 3.8.0

package/patterns/maintenance-board.json

@@ -0,0 +1,127 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "id": "maintenance-board",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Maintenance Board",
+  "description": "Kanban-style maintenance ticket board with drag-and-drop between columns: new, assigned, in-progress, pending-parts, completed, closed.",
+  "dependencies": {
+    "patterns": {
+      "maintenance-ticket": "^1.0.0"
+    },
+    "styles": {},
+    "requires_core": {
+      "components": [
+        "Button",
+        "icon",
+        "Badge",
+        "Select"
+      ],
+      "charts": []
+    }
+  },
+  "components": [
+    "Button",
+    "icon",
+    "Badge",
+    "Select"
+  ],
+  "default_preset": "board",
+  "presets": {
+    "board": {
+      "description": "Full Kanban board with drag-and-drop columns for each maintenance ticket status",
+      "components": [
+        "Button",
+        "icon",
+        "Badge",
+        "Select"
+      ],
+      "layout": {
+        "layout": "horizontal",
+        "atoms": "_flex _gap4 _overflow[auto] _pb4",
+        "slots": {
+          "header": "Title, filters, view toggle",
+          "filters": "Property, priority, category, date range",
+          "columns": "Kanban columns with ticket cards",
+          "summary": "Open count, avg resolution time"
+        }
+      }
+    },
+    "list": {
+      "description": "Flat sortable list view of maintenance tickets with status badges and priority indicators",
+      "components": [
+        "Button",
+        "icon",
+        "Badge"
+      ],
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _col _gap2",
+        "slots": {
+          "header": "Title and controls",
+          "table": "Ticket table"
+        }
+      }
+    },
+    "mini": {
+      "description": "Compact dashboard widget showing column counts and most recent tickets at a glance",
+      "components": [
+        "Badge"
+      ],
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _col _gap3 _p4",
+        "slots": {
+          "header": "Title",
+          "counts": "Column counts",
+          "recent": "Recent tickets"
+        }
+      }
+    }
+  },
+  "default_layout": {
+    "layout": "horizontal",
+    "atoms": "_flex _gap4 _overflow[auto]",
+    "slots": {
+      "header": "Title and controls",
+      "columns": "Kanban columns"
+    }
+  },
+  "visual_brief": "Kanban board with horizontal columns for each maintenance status: New, Assigned, In Progress, Pending Parts, Completed, Closed. Each column has a header with the status name and a ticket count badge. Ticket cards within columns show a title, priority badge (urgent/high/normal/low), property name, and assignee avatar. Cards are draggable between columns. A header bar above the board contains the title, a search input, and an 'Add Ticket' button. The list preset displays tickets as a flat filtered list. Mini preset shows a compact status summary with counts per column.",
+  "responsive": {
+    "mobile": "Columns displayed one at a time with horizontal swipe or a dropdown status selector. Cards take full width. Drag-and-drop replaced by status-change action buttons.",
+    "tablet": "Three visible columns with horizontal scroll for the rest. Cards at comfortable size for touch.",
+    "desktop": "All columns visible in horizontal scroll or fixed layout. Drag-and-drop fully functional. Cards show all metadata."
+  },
+  "layout_hints": {
+    "workflow_priority": "Status columns are the primary structure. Search, filters, and summary counts support triage but should never compete with the board itself.",
+    "card_signal": "Each ticket card should make priority, property, and current owner obvious at a glance so the board remains operationally useful under load.",
+    "mobile_translation": "When drag-and-drop collapses on mobile, preserve the same workflow semantics through explicit status actions instead of faking a tiny board."
+  },
+  "motion": {
+    "micro": "Dragged cards, hovered columns, and active filters may sharpen or lift slightly to confirm manipulation.",
+    "transitions": "Column moves and status changes should feel direct and workmanlike, reinforcing board continuity rather than playful motion."
+  },
+  "interactions": [
+    "drag-reorder",
+    "click-select",
+    "animate-on-mount"
+  ],
+  "accessibility": {
+    "role": "region",
+    "aria-label": "Maintenance board",
+    "keyboard": [
+      "Column navigation, ticket focus, and non-drag status changes should remain operable by keyboard."
+    ],
+    "announcements": [
+      "Ticket title, priority, property, and status should be exposed semantically so the board remains understandable without color-only column meaning."
+    ]
+  },
+  "composition": {
+    "MaintenanceBoard": "Container(d-section, flex-col) > [Header + FilterBar(d-control) + KanbanColumns]",
+    "Header": "Row(d-control, space-between) > [Title + SearchInput(d-control) + AddTicketButton(d-interactive)]",
+    "KanbanColumns": "Row(d-data, horizontal-scroll) > Column[]",
+    "Column": "Panel(d-surface, flex-col) > [ColumnHeader > [StatusName + CountBadge(d-annotation)] + TicketCard(d-surface, draggable)[]]",
+    "TicketCard": "Card(d-surface, hoverable) > [Title + PriorityBadge(d-annotation) + PropertyName(text-muted) + AssigneeAvatar?]"
+  }
+}

package/patterns/maintenance-ticket.json

@@ -0,0 +1,156 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "id": "maintenance-ticket",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Maintenance Ticket",
+  "description": "Repair request form and display. Supports create (tenant-facing), view, and edit modes with photo upload and status tracking.",
+  "dependencies": {
+    "patterns": {},
+    "styles": {},
+    "requires_core": {
+      "components": [
+        "Button",
+        "icon",
+        "Badge",
+        "Input",
+        "Select",
+        "Textarea"
+      ],
+      "charts": []
+    }
+  },
+  "components": [
+    "Button",
+    "icon",
+    "Badge",
+    "Input",
+    "Select",
+    "Textarea"
+  ],
+  "default_preset": "view",
+  "presets": {
+    "create": {
+      "description": "New ticket form (tenant-facing)",
+      "components": [
+        "Button",
+        "icon",
+        "Select",
+        "Textarea"
+      ],
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _col _gap4",
+        "slots": {
+          "header": "Title",
+          "property-unit": "Auto-filled for tenant",
+          "category": "Issue category dropdown",
+          "priority": "Priority level",
+          "description": "Issue description textarea",
+          "photos": "Photo upload",
+          "availability": "Preferred access times",
+          "submit": "Submit button"
+        }
+      }
+    },
+    "view": {
+      "description": "Read-only ticket details view with status timeline, photo gallery, and assignment info",
+      "components": [
+        "Button",
+        "icon",
+        "Badge"
+      ],
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _col _gap4",
+        "slots": {
+          "header": "Ticket ID, status badge",
+          "details": "Category, priority, description",
+          "photos": "Attached images",
+          "timeline": "Status updates, comments",
+          "assignment": "Assigned vendor/staff",
+          "resolution": "Resolution notes, completion date",
+          "actions": "Update status, assign, close"
+        }
+      }
+    },
+    "edit": {
+      "description": "Owner-facing ticket edit form with vendor assignment, internal notes, and status controls",
+      "components": [
+        "Button",
+        "icon",
+        "Select",
+        "Textarea"
+      ],
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _col _gap4",
+        "slots": {
+          "form": "Edit fields",
+          "assignment": "Assign to vendor",
+          "notes": "Internal notes",
+          "actions": "Save/cancel"
+        }
+      }
+    },
+    "recent": {
+      "description": "Recent tickets list for dashboard",
+      "components": [
+        "Badge"
+      ],
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _col _gap2",
+        "slots": {
+          "items": "Recent ticket rows"
+        }
+      }
+    }
+  },
+  "default_layout": {
+    "layout": "stack",
+    "atoms": "_flex _col _gap4",
+    "slots": {
+      "header": "Ticket header",
+      "details": "Ticket details",
+      "timeline": "Status timeline",
+      "actions": "Actions"
+    }
+  },
+  "visual_brief": "Ticket detail view with a header showing ticket ID, title, status badge (color-coded), and priority badge. The details section displays property, unit, category (plumbing, electrical, etc.), reporter name, and description text. A photo section shows uploaded images in a small gallery grid. A status timeline tracks the ticket lifecycle with timestamped entries (submitted, assigned, in-progress, completed). The create preset shows a form with title, category select, priority select, description textarea, and photo upload area. Action buttons include Assign, Update Status, and Close.",
+  "responsive": {
+    "mobile": "Single-column stacked layout. Photo gallery uses horizontal scroll. Timeline is vertical. Action buttons are full-width at the bottom.",
+    "tablet": "Standard layout with comfortable spacing. Photo gallery shows 2-3 thumbnails per row.",
+    "desktop": "Full layout with details and timeline side by side. Photo gallery in a grid. All actions visible in a toolbar."
+  },
+  "layout_hints": {
+    "ticket_priority": "Lead with the current state of the issue first: status, priority, property context, and the reported problem. Timeline, photos, and internal actions should deepen that understanding rather than compete with it.",
+    "create_vs_view": "Creation mode should emphasize clarity and reassurance for the reporter, while view/edit modes should emphasize operational tracking and ownership.",
+    "timeline_role": "Status history is supporting evidence of progress. Keep it structurally attached to the ticket rather than letting it feel like a separate activity feed."
+  },
+  "motion": {
+    "micro": "Status actions, attachments, and timeline states may sharpen slightly on hover or focus to clarify available controls.",
+    "transitions": "State changes and timeline expansion should feel direct and service-oriented rather than lively or decorative."
+  },
+  "interactions": [
+    "animate-on-mount"
+  ],
+  "accessibility": {
+    "role": "region",
+    "aria-label": "Maintenance ticket",
+    "keyboard": [
+      "Header actions, ticket fields, attachments, and timeline items should be reachable in a logical top-to-bottom order."
+    ],
+    "announcements": [
+      "Ticket title, status, priority, and property context should be exposed semantically so the repair state remains understandable without badge color alone."
+    ]
+  },
+  "composition": {
+    "MaintenanceTicket": "Container(d-section, flex-col, gap-4) > [Header + Details + PhotoGallery? + StatusTimeline + Assignment? + Actions]",
+    "Header": "Row(d-surface) > [TicketID(mono-data) + Title + StatusBadge(d-annotation, color-coded) + PriorityBadge(d-annotation)]",
+    "Details": "Section(d-data) > [Category + Property + Reporter + Description]",
+    "PhotoGallery": "Grid(d-data) > Thumbnail(clickable)[]",
+    "StatusTimeline": "Track(d-data, vertical) > TimelineEntry(timestamped)[]",
+    "Actions": "Row(d-interactive) > [AssignButton + UpdateStatusButton + CloseButton(variant: ghost)]"
+  }
+}

package/patterns/map-view.json

@@ -0,0 +1,140 @@
+{
+  "id": "map-view",
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Map View",
+  "description": "An interactive geospatial map with pins, cluster bubbles, search radius overlay, info cards, and a list/map toggle for exploring location-based data.",
+  "category": "geospatial",
+  "tags": [
+    "2026",
+    "geospatial",
+    "map",
+    "pins",
+    "clusters",
+    "location",
+    "interactive"
+  ],
+  "components": [
+    "MapCanvas",
+    "Pin",
+    "ClusterBubble",
+    "InfoCard",
+    "SearchRadius",
+    "MapControls",
+    "ListToggle"
+  ],
+  "default_preset": "pins",
+  "presets": {
+    "pins": {
+      "description": "Individual location markers on the map, each clickable to reveal an info card with details — ideal for store locators and point-of-interest maps",
+      "layout": {
+        "layout": "spatial",
+        "atoms": "_relative _w100 _h100 _overflow-hidden"
+      }
+    },
+    "clusters": {
+      "description": "Grouped markers that merge into count bubbles at lower zoom levels, expanding into individual pins on zoom-in — suited for large datasets with thousands of points",
+      "layout": {
+        "layout": "spatial",
+        "atoms": "_relative _w100 _h100 _overflow-hidden"
+      }
+    },
+    "heatmap": {
+      "description": "Density-based gradient overlay showing concentration of data points, with warm colors for high density and cool colors for low — useful for analytics and coverage views",
+      "layout": {
+        "layout": "spatial",
+        "atoms": "_relative _w100 _h100 _overflow-hidden"
+      }
+    },
+    "route": {
+      "description": "A connected path drawn between ordered waypoints with directional indicators, distance labels, and turn-by-turn annotations — suited for delivery tracking and trip planning",
+      "layout": {
+        "layout": "spatial",
+        "atoms": "_relative _w100 _h100 _overflow-hidden"
+      }
+    }
+  },
+  "visual_brief": "A full-bleed interactive map occupying the entire container with no padding or border. The map tiles render a clean, modern cartographic style with muted terrain colors. Pins are 32px-tall accent-colored teardrop shapes with a white inner circle (12px) containing an icon or dot, casting a subtle drop shadow (0 2px 6px rgba(0,0,0,0.2)). On hover, a pin scales to 1.15 and emits a gentle pulsing ring (accent color at 30% opacity, expanding from 100% to 150% radius over 1.5s, infinite). Clicking a pin on desktop opens a floating info card — a 280px-wide d-surface card with border-radius-lg, positioned 8px above the pin with a small downward-pointing triangle tail connecting card to pin. The info card contains: a thumbnail image (full-width, 120px tall, border-radius-t-lg), a title (text-base font-semibold), a subtitle line (text-sm text-muted), and an action row with a primary button and a secondary icon button. On mobile, clicking a pin slides an info card up from the bottom edge as a 50%-height sheet with a drag handle at top. ClusterBubbles are circles whose diameter scales with count (40px for 2–10, 56px for 11–50, 72px for 51+), filled with accent color at 85% opacity, showing the count number in white bold text centered inside. Clusters have a subtle white 2px border. Clicking a cluster zooms the map to show all contained points. The search radius renders as a translucent circle (accent color at 10% fill, accent border at 40% opacity, 2px dashed stroke). Map controls are stacked vertically in the top-right corner: 36px pill-shaped buttons with white background, subtle shadow, and icon-only content (zoom in +, zoom out −, compass/north, locate-me crosshair). The list toggle is a segmented control (map icon | list icon) anchored to the top-left corner, 72px wide, with the active segment filled accent and inactive segment white. Switching to list view transitions the map out (slide left + fade) and a scrollable card list in (slide right + fade).",
+  "layout_hints": {
+    "container": "borderless",
+    "note": "This is a full-bleed map view. Do NOT wrap in a d-surface card. The map canvas fills its parent container entirely. Floating controls are absolutely positioned over the map.",
+    "pin_interaction": "Pins MUST have cursor: pointer. Hover state: scale(1.15) transition 150ms. Active/selected pin: stays scaled and shows the info card. Only one info card open at a time — selecting a new pin closes the previous card.",
+    "cluster_zoom": "When a cluster is clicked, the map should animate (300ms ease-in-out) to a bounding box that contains all points within that cluster.",
+    "info_card": "The info card MUST use d-surface with elevation. On desktop it floats above the pin with a CSS triangle pointer. On mobile it renders as a bottom sheet. Info card closes on outside click or Escape key."
+  },
+  "default_layout": {
+    "layout": "spatial",
+    "atoms": "_relative _w100 _h100 _overflow-hidden",
+    "slots": {
+      "map-canvas": "The primary map tile layer filling the entire container. Handles pan (click-drag or touch-drag), zoom (scroll wheel, pinch, or button controls), and rotation (optional, via compass control). Renders vector or raster tiles with a clean cartographic style — muted grays and blues for terrain, thin road lines, minimal labels. The canvas intercepts all pointer events except those on floating UI elements (controls, cards). Supports programmatic flyTo animations (500ms ease-in-out) when centering on a pin or cluster.",
+      "pin": "Repeating slot — one per location point. Each pin is absolutely positioned on the map at its lat/lng coordinate, rendered as a 32px-tall teardrop SVG shape filled with the accent color. The inner circle (12px diameter, white fill) can contain a category icon (restaurant, hotel, etc.) or a plain dot. Drop shadow: 0 2px 6px rgba(0,0,0,0.2). Hover: scale(1.15) with 150ms ease, plus a pulsing ring animation (accent at 30% opacity, expanding outward). Selected state: scale(1.15) locked, ring solid, info card visible. Pins must stay correctly positioned during pan and zoom. z-index: selected pin above all others.",
+      "cluster-bubble": "Repeating slot — one per cluster group. Rendered as a circle whose diameter scales with the number of contained points: 40px (2–10 items), 56px (11–50), 72px (51+). Background: accent color at 85% opacity. Border: 2px solid white. Text: count number in white, font-bold, text-sm (small clusters) or text-base (large clusters), centered. Hover: slight scale(1.08) with 150ms ease. Click: zoom to cluster bounds with 300ms animation. Clusters recalculate on zoom change — as zoom increases, clusters split into smaller groups or individual pins.",
+      "info-card": "A floating detail card shown when a pin is selected. Desktop: 280px-wide d-surface card with border-radius-lg and elevation (box-shadow: 0 4px 16px rgba(0,0,0,0.12)). Positioned 8px above the selected pin, horizontally centered on the pin. Has a small 8px CSS triangle pointing down toward the pin. Content layout: thumbnail image (full-width, 120px height, object-fit cover, border-radius top corners), then 12px padding containing title (text-base, font-semibold, single line truncate), subtitle (text-sm, text-muted, single line), and an action row (flex, justify-between) with a primary small button and a secondary icon button (bookmark/share). Mobile: renders as a bottom sheet sliding up from the bottom edge, 50% viewport height, with a 4px-wide 32px-long drag handle centered at top, same content layout but full-width. Close on outside click, swipe-down (mobile), or Escape.",
+      "search-radius": "A translucent circle overlay rendered on the map canvas, centered on the user's search location or current position. Fill: accent color at 10% opacity. Stroke: accent color at 40% opacity, 2px dashed. The radius scales proportionally with map zoom level, maintaining geographic accuracy. An optional label at the top of the circle shows the distance (e.g., '5 km'). The radius can be resized by dragging its edge (desktop) or via a range slider in controls (mobile).",
+      "map-controls": "A vertical stack of control buttons anchored to the top-right corner of the map, 12px from edges. Each button is 36px × 36px, white background, border-radius-full, box-shadow: 0 1px 4px rgba(0,0,0,0.1). Icons are 18px, text-muted color, hover: text-default. Stack order top-to-bottom: zoom-in (+), zoom-out (−), compass/north-up (rotates to match map bearing), locate-me (crosshair icon, pulses accent when active GPS tracking). Gap between buttons: 8px. On mobile, buttons increase to 44px for touch targets.",
+      "list-toggle": "A segmented control anchored to the top-left corner, 12px from edges. Two segments: map icon (grid/pin icon) and list icon (horizontal lines icon). Total width: 72px, height: 36px. Active segment: accent background, white icon. Inactive segment: white background, muted icon. border-radius-full, box-shadow matching map controls. Toggling to list view transitions the map out and renders a scrollable vertical list of location cards below the toggle. Toggling back transitions the list out and map in."
+    }
+  },
+  "accessibility": {
+    "role": "application",
+    "aria-label": "Interactive map view",
+    "announcements": [
+      "Map centered on {location}",
+      "Showing {count} locations",
+      "Pin selected: {name}",
+      "Cluster expanded: {count} locations",
+      "Switched to {map|list} view",
+      "Search radius set to {distance}"
+    ],
+    "keyboard": [
+      "Tab: cycle through pins and controls",
+      "Enter: select focused pin to open info card",
+      "Escape: close info card or deselect pin",
+      "Arrow keys: pan map in cardinal directions",
+      "+/-: zoom in/out",
+      "L: toggle list/map view",
+      "F: fit all pins in view"
+    ]
+  },
+  "responsive": {
+    "mobile": "Map fills viewport. Controls enlarge to 44px touch targets. Info card renders as bottom sheet instead of floating card. List toggle moves to bottom-center above the info card area. Pinch-to-zoom and drag-to-pan. Search radius adjustable via slider instead of edge-drag. Cluster tap zooms in rather than showing a popup.",
+    "tablet": "Full map with floating controls. Info card floats on landscape, bottom-sheet on portrait. Two-finger gestures for pan and zoom. Controls remain in top-right at 40px size. List view renders as a side panel (320px wide) instead of replacing the map.",
+    "desktop": "Full interactive map with hover states on pins and clusters. Info card floats above pins. Scroll-to-zoom, click-drag-to-pan. Controls in top-right. List toggle in top-left. List view renders as a side panel (360px) with the map shrinking to accommodate."
+  },
+  "motion": {
+    "micro": {
+      "pin-hover": "scale 1→1.15, 150ms ease-out",
+      "cluster-hover": "scale 1→1.08, 150ms ease-out",
+      "control-hover": "background-color fade 120ms ease"
+    },
+    "transitions": {
+      "info-card-open": "desktop: translateY(8px)→0 + opacity 0→1, 200ms ease-out. mobile: translateY(100%)→0, 300ms ease-out",
+      "info-card-close": "reverse of open, 150ms ease-in",
+      "list-toggle": "map: slideX(0)→(-100%) + fade. list: slideX(100%)→0 + fade. 300ms ease-in-out",
+      "fly-to": "map center + zoom interpolation 500ms ease-in-out",
+      "cluster-expand": "zoom to bounds 300ms ease-in-out"
+    },
+    "ambient": {
+      "pin-pulse": "ring scale 1→1.5 + opacity 0.3→0, 1.5s ease-out infinite on hover",
+      "locate-active": "accent border-color pulse 2s ease-in-out infinite when GPS tracking"
+    }
+  },
+  "interactions": [
+    "drag-nodes",
+    "pan-background",
+    "zoom-scroll",
+    "click-select",
+    "hover-tooltip",
+    "animate-on-mount"
+  ],
+  "composition": {
+    "MapView": "Viewport(d-section, full-bleed) > [MapCanvas + Pin*(d-interactive) + ClusterBubble* + InfoCard?(d-surface) + SearchRadius? + MapControls + ListToggle]",
+    "MapCanvas": "TileLayer(zoomable, pannable, vector|raster)",
+    "Pin": "Marker(d-interactive, positioned-latlng) > [TeardropSVG(accent) + InnerIcon + PulseRing?]",
+    "ClusterBubble": "Marker(d-interactive, positioned-latlng) > [Circle(accent, scaled) + CountLabel(white, bold)]",
+    "InfoCard": "Card(d-surface, elevated) > [Thumbnail + Title + Subtitle + ActionRow]",
+    "MapControls": "Stack(d-control, vertical, top-right) > [ZoomIn + ZoomOut + Compass + LocateMe]",
+    "ListToggle": "SegmentedControl(d-control, top-left) > [MapIcon + ListIcon]"
+  }
+}

package/patterns/match-celebration.json

@@ -0,0 +1,133 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "id": "match-celebration",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Match Celebration",
+  "description": "Full-screen celebratory overlay that appears when two users match. A coral-to-violet radial burst, two avatars meeting in the center with a heart pop between them, an 'It's a Match!' headline, and two CTAs (Send Message / Keep Swiping). Optional auto-dismiss after 3-4s. Designed to be a magic moment — the dopamine pop that rewards the swipe loop.",
+  "category": "overlay",
+  "tags": [
+    "2026",
+    "modal",
+    "celebration",
+    "match",
+    "overlay",
+    "consumer",
+    "social"
+  ],
+  "components": [
+    "MatchOverlay",
+    "Backdrop",
+    "BurstGradient",
+    "Confetti",
+    "AvatarPair",
+    "MyAvatar",
+    "TheirAvatar",
+    "HeartPop",
+    "Headline",
+    "Subtitle",
+    "ActionPair",
+    "MessageButton",
+    "KeepSwipingButton"
+  ],
+  "default_preset": "first-match",
+  "presets": {
+    "first-match": {
+      "description": "Full-impact first-match celebration with confetti, burst gradient, avatar pair animation, and a delightful 'It's a Match!' headline. Auto-dismiss after 4s unless user interacts.",
+      "layout": {
+        "layout": "spatial",
+        "atoms": "_fixed _inset-0 _z-50 _flex _items-center _justify-center _bg-black/40"
+      }
+    },
+    "subsequent-match": {
+      "description": "Toned-down repeat-match overlay — same composition but no confetti and shorter animations. Avoids match-fatigue.",
+      "layout": {
+        "layout": "spatial",
+        "atoms": "_fixed _inset-0 _z-50 _flex _items-center _justify-center _bg-black/40"
+      }
+    },
+    "compact-toast": {
+      "description": "Subtle toast variant for ambient match notifications (e.g., when matched while not on the swipe screen). A small pill toast at the top with both avatars and 'New match!' label.",
+      "layout": {
+        "layout": "flex-row",
+        "atoms": "_fixed _top-4 _left-1/2 _-translate-x-1/2 _z-50 _flex _items-center _gap-3 _px-4 _py-2 _rounded-full _bg-surface _shadow-lg"
+      }
+    }
+  },
+  "visual_brief": "A full-screen overlay (position fixed, inset 0, z-index 50) that appears with a soft 240ms backdrop fade-in (background rgba(0,0,0,0.4)). At the visual center, the BurstGradient occupies the entire viewport — a radial-gradient(circle at 50% 50%, rgba(255,77,109,0.4) 0%, rgba(139,92,246,0.3) 40%, transparent 70%) — pulsing to life by scaling from 0.6 to 1.0 over 600ms with cubic-bezier(0.34, 1.56, 0.64, 1) spring. The burst slowly rotates 10deg over 4s in an infinite loop while visible — magic-without-distracting. Above the burst, in the first-match preset, a Confetti emitter showers small coral, violet, and peach paper-shaped pieces from the top of the viewport, falling with subtle physics over 2.4s. Centered in the viewport: AvatarPair — two circular avatars (96×96 each) framed with the swipecircle-photo-frame decorator (coral outer ring, cream inner gap, soft shadow). MyAvatar enters from the left, sliding in from translateX(-120%) to translateX(-32%) (offset to leave room for partner) over 480ms cubic-bezier(0.34, 1.56, 0.64, 1). TheirAvatar enters from the right, sliding from translateX(120%) to translateX(32%) over 480ms with the same easing — the avatars meet near each other but don't overlap. Between them, slightly above the visual center line, a HeartPop appears: a 32px Heart Lucide icon (filled, coral with a slight white inner ring) that scales from 0 to 1.2 to 1.0 over 480ms with bouncy spring + a slight rotation of -10deg to 10deg to 0deg for liveliness. Below the avatar pair, the Headline 'It's a Match!' renders in font-display, text-4xl, font-bold, color white with a 1px text-shadow. Below the headline, a Subtitle: '{name} liked you back.' (text-base, font-medium, color rgba(255,255,255,0.9)). 24px below the subtitle, the ActionPair: two side-by-side pill buttons with 12px gap. MessageButton (left, primary) — pill-shaped (swipecircle-pill decorator), coral fill, white text, label 'Send Message', a small Send Lucide icon (16px) at the leading edge. KeepSwipingButton (right, secondary) — pill-shaped with white border + transparent fill + white text, label 'Keep Swiping'. Both buttons enter with a stagger 240ms after the avatar arrival (opacity 0→1 + translateY(8px)→0). On dismiss (tap outside, hit Escape, or tap KeepSwipingButton), the overlay fades out over 240ms ease-in. If MessageButton is tapped, navigate to the chat thread. Auto-dismiss after 4000ms unless the user interacts. Reduced-motion mode: skip the rotate, slide-in becomes fade-in (no horizontal travel), confetti is disabled.",
+  "layout_hints": {
+    "container": "fixed full-viewport overlay",
+    "z_index": "50 — above bottom-tab-bar (40) but below toast notifications (60)",
+    "auto_dismiss": "4000ms default; pauses on hover or focus",
+    "reduced_motion": "Respect prefers-reduced-motion: no rotation, no confetti, fade-only entrance"
+  },
+  "default_layout": {
+    "layout": "spatial",
+    "atoms": "_fixed _inset-0 _z-50 _flex _items-center _justify-center _bg-black/40",
+    "slots": {
+      "match-overlay": "Outer container. Position fixed, inset 0, z-index 50. Background rgba(0,0,0,0.4) for backdrop dim. Flex centered. Pointer-events: auto. Carries role='alertdialog', aria-modal='true', aria-labelledby pointing to the Headline.",
+      "backdrop": "Implicit — the bg-black/40 of match-overlay serves as the backdrop. On click outside the inner content, dismisses the overlay.",
+      "burst-gradient": "Position absolute, inset 0, pointer-events: none. Background applies the swipecircle-match-burst decorator. Animates: scale(0.6)→scale(1) over 600ms cubic-bezier(0.34, 1.56, 0.64, 1), then rotate 0→10deg infinite linear over 4s.",
+      "confetti": "Conditional slot in first-match preset only. Position absolute, top 0, left 0, right 0, height 100%. Renders 24-40 confetti particles (small rectangles 6×10px in coral, violet, peach colors). Each particle has random horizontal start position, randomized fall duration 1.6-2.4s, slight horizontal drift, and rotation 0-720deg. Uses physics-based animation library or CSS keyframes. Pointer-events: none.",
+      "avatar-pair": "Center container. Flex-row, items-center, gap 8px, position relative, z-index above burst. Width auto, height 96px. Houses MyAvatar + HeartPop + TheirAvatar.",
+      "my-avatar": "96×96 circular avatar with the swipecircle-photo-frame decorator. Img fills the inner circle. Enters with slideInFromLeft animation: translateX(-120%) opacity 0 → translateX(-32%) opacity 1 over 480ms cubic-bezier(0.34, 1.56, 0.64, 1).",
+      "their-avatar": "96×96 circular avatar (same as MyAvatar). Enters with slideInFromRight: translateX(120%) opacity 0 → translateX(32%) opacity 1 over 480ms cubic-bezier(0.34, 1.56, 0.64, 1) with a 60ms delay from MyAvatar — adds slight stagger.",
+      "heart-pop": "32px filled Heart Lucide icon in coral with a 2px white inner ring. Position absolute, centered between the two avatars, z-index above avatars. Animates: scale(0) → scale(1.3) → scale(1.0) + rotate(-10deg) → rotate(10deg) → rotate(0deg) over 480ms cubic-bezier(0.34, 1.56, 0.64, 1) with a 240ms delay (after avatars start arriving).",
+      "headline": "'It's a Match!' h2 element. Font-family: var(--d-font-display). Font-size: 36px. Font-weight: 700. Color: white. Text-shadow: 0 1px 2px rgba(0,0,0,0.3). Margin-top: 32px. Text-align: center. Enters: opacity 0 + translateY(12px) → opacity 1 + translateY(0) over 320ms ease-out with 480ms delay (after avatars arrive).",
+      "subtitle": "Subtitle text under headline. Format: '{name} liked you back.' Font-size: 16px. Font-weight: 500. Color: rgba(255,255,255,0.9). Margin-top: 8px. Text-align: center. Enters with same animation as headline plus 60ms additional delay.",
+      "action-pair": "Container for the two CTAs. Flex-row, gap 12px, margin-top: 32px, justify-center. Both buttons enter with: opacity 0 + translateY(8px) → opacity 1 + translateY(0) over 320ms ease-out with 720ms delay.",
+      "message-button": "Primary CTA. Pill button (swipecircle-pill decorator), 'Send Message' label, leading 16px Send Lucide icon. On click: emit 'open-chat-thread' event with the matched user's id, then dismiss overlay.",
+      "keep-swiping-button": "Secondary CTA. Pill button with white 1.5px border, transparent fill, white text. 'Keep Swiping' label. On click: dismiss overlay (returns user to swipe deck)."
+    }
+  },
+  "accessibility": {
+    "role": "alertdialog",
+    "aria-label": "Match celebration",
+    "keyboard": [
+      "Escape: dismiss the overlay (returns to swipe screen)",
+      "Tab: cycle focus between MessageButton and KeepSwipingButton",
+      "Enter or Space: activate the focused button"
+    ],
+    "announcements": [
+      "It's a match with {name}!",
+      "{name} liked you back. Send a message or keep swiping.",
+      "Match celebration dismissed."
+    ],
+    "focus_management": "On overlay open, focus moves to MessageButton (the recommended primary action). Focus is trapped within the overlay (Tab cycles only between the two buttons). On overlay close, focus returns to the previously-focused element (typically the swipe deck card or action button)."
+  },
+  "responsive": {
+    "mobile": "Stack layout. Avatars 80×80 instead of 96. Headline text-3xl. Action pair stacks vertically (flex-col, gap-3) on viewports under 360px wide.",
+    "tablet": "Stack layout. Default sizes (96×96 avatars, text-4xl headline). All animations active.",
+    "desktop": "Stack layout. Default sizes. Confetti uses higher particle count (60). Burst gradient extends further from center."
+  },
+  "motion": {
+    "micro": {
+      "burst-pulse": "scale 0.6→1.0 + opacity 0→0.7 over 600ms cubic-bezier(0.34, 1.56, 0.64, 1)",
+      "burst-rotate": "rotate 0→10deg over 4s linear infinite",
+      "avatar-meet-left": "translateX(-120%) opacity 0 → translateX(-32%) opacity 1 over 480ms cubic-bezier(0.34, 1.56, 0.64, 1)",
+      "avatar-meet-right": "translateX(120%) opacity 0 → translateX(32%) opacity 1 over 480ms cubic-bezier(0.34, 1.56, 0.64, 1), delayed 60ms",
+      "heart-pop": "scale 0→1.3→1.0 + rotate -10→10→0deg over 480ms cubic-bezier(0.34, 1.56, 0.64, 1), delayed 240ms",
+      "headline-arrive": "opacity 0 + translateY(12px) → opacity 1 + translateY(0) over 320ms ease-out, delayed 480ms",
+      "actions-arrive": "opacity 0 + translateY(8px) → opacity 1 + translateY(0) over 320ms ease-out, delayed 720ms, stagger 60ms between buttons"
+    },
+    "transitions": {
+      "overlay-enter": "Backdrop opacity 0→0.4 over 240ms ease-out (synchronous with start of all child animations)",
+      "overlay-exit": "Backdrop opacity 0.4→0 + content opacity 1→0 over 240ms ease-in. All child animations skipped on exit.",
+      "confetti-fall": "Each particle: translateY 0 → 100vh + translateX(±40px drift) + rotate(0-720deg) over 1.6-2.4s ease-in-out. Particles emit from top in waves over the first 800ms."
+    },
+    "reduced_motion": "When prefers-reduced-motion is set: skip burst-rotate, confetti, avatar slide-in (use fade-in only), and heart rotate (use scale-only). All durations capped at 240ms."
+  },
+  "interactions": [
+    "animate-on-mount",
+    "stagger-children",
+    "scale-hover",
+    "focus-trap",
+    "click-select"
+  ],
+  "composition": {
+    "MatchCelebration": "MatchOverlay(fixed-inset, z-50, dimmed-bg) > [BurstGradient(absolute-fill) + Confetti(absolute-fill, conditional) + ContentStack(centered, flex-col)]",
+    "ContentStack": "Flex(col, items-center, gap-8) > [AvatarPair + Headline + Subtitle + ActionPair]",
+    "AvatarPair": "Flex(row, items-center, gap-2, relative) > [MyAvatar + HeartPop(absolute-center) + TheirAvatar]",
+    "ActionPair": "Flex(row, gap-3) > [MessageButton(primary-pill) + KeepSwipingButton(secondary-pill)]"
+  }
+}