@decantr/content 3.8.0

package/patterns/matter-card.json

@@ -0,0 +1,113 @@
+{
+  "id": "matter-card",
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Matter Card",
+  "description": "A legal matter summary card showing client, status, budget burn, key deadlines, assignees, and outstanding tasks for law firm pipeline management.",
+  "category": "legal",
+  "tags": [
+    "2026",
+    "legal",
+    "matter",
+    "pipeline",
+    "law-firm",
+    "case-management",
+    "card"
+  ],
+  "components": [
+    "MatterTitle",
+    "ClientInfo",
+    "StatusBadge",
+    "BudgetBar",
+    "DeadlineChip",
+    "AssigneeAvatars"
+  ],
+  "default_preset": "standard",
+  "presets": {
+    "standard": {
+      "description": "Full-detail matter card with title, client, status, budget burn bar, deadline chip, assignees, and open task count for dashboard usage",
+      "layout": {
+        "layout": "card",
+        "atoms": "_relative _w100 _p-4 _rounded-lg _bg-surface _border"
+      }
+    },
+    "compact": {
+      "description": "Single-row compact list presentation showing matter number, client, status pill, and next deadline for high-density table views",
+      "layout": {
+        "layout": "horizontal-row",
+        "atoms": "_flex _items-center _gap-4 _w100 _p-3 _rounded _bg-surface _border-b"
+      }
+    },
+    "kanban": {
+      "description": "Vertical stackable card optimized for kanban pipeline columns with status-colored border and drag-handle affordance indicator",
+      "layout": {
+        "layout": "card-stackable",
+        "atoms": "_relative _w100 _p-3 _mb-3 _rounded-md _bg-surface _border-l-4 _cursor-grab"
+      }
+    }
+  },
+  "visual_brief": "A rectangular card with matter number shown small and monospace at top-left (e.g. 'M-2026-0147') and matter title in bold sans-serif below. Client name in smaller muted text beneath title. Top-right corner holds a status badge pill with semantic colors (Active: blue, Pending: amber, Closed: gray, Billing: purple). Middle section shows a horizontal budget bar with label 'Budget' on left, spent amount and total right-aligned in monospace (e.g. '$47,320 / $80,000'). Bar fill color transitions green to amber to red as utilization crosses 70% and 90% thresholds. Below budget bar: next deadline chip with calendar icon, deadline label, and urgency color (red if <7 days, amber if <30). Bottom-right shows stacked overlapping assignee avatar circles (up to 4 visible, +N indicator if more). Bottom-left shows outstanding task count badge (e.g. '3 open tasks'). Kanban preset adds a colored left border matching status, and a small drag-handle icon at top.",
+  "layout_hints": {
+    "container": "d-surface",
+    "note": "Card is clickable (d-interactive). Budget numbers in monospace. Status badge always includes status word text, never color-only.",
+    "deadline_urgency": "Deadline chip color escalates automatically: red <7 days, amber <30 days, neutral otherwise."
+  },
+  "default_layout": {
+    "layout": "card",
+    "atoms": "_relative _w100 _p-4 _rounded-lg _bg-surface _border",
+    "slots": {
+      "matter-title": "Top section with matter number (monospace small) above matter title (bold sans-serif).",
+      "client-info": "Muted-text line beneath title showing client name and matter type subtitle.",
+      "status-badge": "Top-right pill showing matter status with semantic color coding and text label.",
+      "budget-bar": "Horizontal progress bar showing spent/total budget with color escalation thresholds.",
+      "deadline-chip": "Chip below budget bar with calendar icon, next key date, and urgency-colored background.",
+      "assignee-avatars": "Stacked overlapping avatar circles in bottom-right showing assigned attorneys with overflow counter."
+    }
+  },
+  "accessibility": {
+    "role": "article",
+    "aria-label": "Legal matter summary card",
+    "announcements": [
+      "Matter {number}: {title} for {client}, status {status}",
+      "Budget {spent} of {total}, {percent} utilized",
+      "Next deadline {date}, {days} days remaining"
+    ],
+    "keyboard": [
+      "Tab: focus card",
+      "Enter: open matter detail",
+      "Space: toggle matter selection (in list views)"
+    ]
+  },
+  "responsive": {
+    "mobile": "Card stacks vertically with assignees moving below task count. Compact preset auto-selected.",
+    "tablet": "Standard preset retained. Assignee stack limited to 3 visible."
+  },
+  "motion": {
+    "micro": {
+      "card-hover": "elevation raise + border-highlight 150ms ease-out",
+      "avatar-hover": "avatar un-stack + name tooltip 200ms ease"
+    },
+    "transitions": {
+      "status-change": "badge color crossfade 300ms ease-in-out",
+      "budget-update": "bar fill width interpolate 600ms ease-out"
+    },
+    "ambient": {
+      "overdue-pulse": "deadline chip background pulse when overdue 2s ease-in-out infinite"
+    }
+  },
+  "interactions": [
+    "lift-hover",
+    "click-select",
+    "animate-on-mount",
+    "stagger-children"
+  ],
+  "composition": {
+    "MatterCard": "Card(d-surface, data-interactive) > [Header > [MatterTitle > [MatterNumber(mono) + MatterTitle] + StatusBadge] + ClientInfo + BudgetBar + DeadlineChip + Footer > [TaskCount + AssigneeAvatars]]",
+    "MatterTitle": "Stack > [MatterNumber(mono-xs) + TitleText(bold)]",
+    "StatusBadge": "Pill(d-annotation, data-status) > [StatusDot + StatusText]",
+    "BudgetBar": "Bar(horizontal, threshold-colored) > [Label + Fill + SpentLabel(mono) + TotalLabel(mono)]",
+    "DeadlineChip": "Chip(d-annotation, urgency-colored) > [CalendarIcon + DeadlineLabel + DaysRemaining]",
+    "AssigneeAvatars": "Stack(overlapping) > Avatar[] + OverflowCounter?"
+  }
+}

package/patterns/mention-popup.json

@@ -0,0 +1,85 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "id": "mention-popup",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Mention Popup",
+  "description": "@mention autocomplete for collaborators. Triggered by @ character with type-ahead filtering and keyboard navigation.",
+  "dependencies": {
+    "patterns": {},
+    "styles": {},
+    "requires_core": {
+      "components": [
+        "Avatar",
+        "icon"
+      ],
+      "charts": []
+    }
+  },
+  "components": [
+    "Avatar",
+    "icon"
+  ],
+  "default_preset": "standard",
+  "presets": {
+    "standard": {
+      "description": "List with avatars, names, and online status",
+      "components": [
+        "Avatar",
+        "icon"
+      ],
+      "layout": {
+        "layout": "dropdown",
+        "atoms": "_absolute _bg[var(--surface)] _shadow _r2 _border _w[280px] _max-h[300px] _overflow[auto] _z[100]",
+        "slots": {
+          "search": "Type-ahead filter (inline in editor)",
+          "recent": "Recently mentioned users section",
+          "results": "Filtered collaborator list"
+        }
+      }
+    },
+    "compact": {
+      "description": "Names only without status indicators",
+      "components": [
+        "Avatar"
+      ],
+      "layout": {
+        "layout": "dropdown",
+        "atoms": "_absolute _bg[var(--surface)] _shadow _r1 _border _w[200px] _z[100]",
+        "slots": {
+          "results": "Simple user list"
+        }
+      }
+    }
+  },
+  "default_layout": {
+    "layout": "dropdown",
+    "atoms": "_absolute _bg[var(--surface)] _shadow _r2 _border _w[280px] _z[100]",
+    "slots": {
+      "search": "Type-ahead filter input",
+      "recent": "Recently mentioned users for quick access",
+      "results": "Filtered list of matching collaborators"
+    }
+  },
+  "io": {
+    "consumes": [
+      "collaborators",
+      "query",
+      "position",
+      "recentMentions"
+    ],
+    "produces": [
+      "select"
+    ],
+    "actions": [
+      "select-user",
+      "close"
+    ]
+  },
+  "visual_brief": "Small floating dropdown that appears at the cursor position when '@' is typed. Contains a type-ahead search input (auto-focused, filtering as the user types), an optional 'Recent' section showing recently mentioned users, and a filtered results list. Each user row shows a small avatar, display name, and username or email in muted text. The currently highlighted item has a subtle background tint. The popup has a border, shadow, and rounded corners. Compact preset uses smaller avatars and tighter row spacing.",
+  "responsive": {
+    "mobile": "Popup renders as a bottom sheet anchored to the keyboard. Full-width list items with larger touch targets. Avatars at 32px.",
+    "tablet": "Floating popup near cursor. Standard row sizing.",
+    "desktop": "Compact floating popup near cursor. Keyboard navigation with up/down arrows. Small avatars at 24px."
+  }
+}

package/patterns/metric-gauge.json

@@ -0,0 +1,141 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "id": "metric-gauge",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Metric Gauge",
+  "description": "CLI-style metric displays with value, trend indicators, and optional sparklines.",
+  "dependencies": {
+    "patterns": {
+      "ascii-chart": "^1.0.0"
+    },
+    "styles": {
+      "terminal": "^1.0.0"
+    },
+    "requires_core": {
+      "components": [
+        "icon"
+      ],
+      "charts": []
+    }
+  },
+  "components": [
+    "icon"
+  ],
+  "default_preset": "single",
+  "presets": {
+    "single": {
+      "description": "Single large metric value display",
+      "components": [
+        "icon"
+      ],
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _col _aic _mono _fggreen",
+        "slots": {
+          "label": "Metric name",
+          "value": "Current value",
+          "unit": "Unit suffix",
+          "trend": "Up/down trend arrow"
+        }
+      }
+    },
+    "inline": {
+      "description": "Inline key: value metric display",
+      "components": [],
+      "layout": {
+        "layout": "flex",
+        "atoms": "_flex _aic _gap2 _mono _fggreen",
+        "slots": {
+          "label": "Metric name",
+          "value": "Current value"
+        }
+      }
+    },
+    "block": {
+      "description": "Boxed metric with border and sparkline",
+      "components": [],
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _col _mono _fggreen",
+        "slots": {
+          "label": "Metric name",
+          "value": "Current value",
+          "sparkline": "Mini trend chart"
+        }
+      }
+    },
+    "grid": {
+      "description": "Responsive grid arranging multiple metric gauges with configurable column count and thresholds",
+      "components": [],
+      "layout": {
+        "layout": "grid",
+        "atoms": "_grid _gap2 _mono _fggreen",
+        "slots": {
+          "metrics": "Array of metric displays"
+        }
+      }
+    }
+  },
+  "default_layout": {
+    "layout": "flex",
+    "atoms": "_flex _aic _gap2 _mono _fggreen",
+    "slots": {
+      "label": "Metric name",
+      "value": "Current value",
+      "unit": "Unit suffix",
+      "trend": "Trend indicator"
+    }
+  },
+  "features": [
+    "color-thresholds",
+    "trend-indicators",
+    "historical-sparkline",
+    "click-detail"
+  ],
+  "thresholds": {
+    "success": {
+      "color": "#00FF00",
+      "description": "Normal/good state"
+    },
+    "warning": {
+      "color": "#FFB000",
+      "description": "Warning threshold"
+    },
+    "critical": {
+      "color": "#FF0000",
+      "description": "Critical threshold"
+    }
+  },
+  "visual_brief": "CLI-style metric display with the metric label in muted uppercase small text, the current value in large bold monospace type, and an optional unit suffix. A trend indicator arrow (up/down) with green/red coloring appears beside the value with a percentage change. The inline preset renders as a compact single-line display: label, value, and trend on one row. The block preset wraps the metric in a bordered card with optional sparkline underneath. The grid preset arranges multiple gauges in a responsive grid. Sparklines use ASCII braille characters or thin SVG lines.",
+  "responsive": {
+    "mobile": "Grid preset uses 2 columns. Block cards take full width if single. Values remain large for readability.",
+    "tablet": "Grid uses 3 columns. Standard card sizes.",
+    "desktop": "Grid uses 4 columns. Block preset shows full sparkline width. Comfortable spacing."
+  },
+  "layout_hints": {
+    "value_priority": "The metric value is the first read, then trend, then label context. Keep that hierarchy stable across inline, block, and grid variants.",
+    "threshold_clarity": "Color thresholds should support interpretation, but labels and trend indicators must still carry the meaning when color cannot.",
+    "grid_use": "Grid mode should present a family of metrics that still feel related and aligned, not a noisy dashboard of mixed instruments."
+  },
+  "motion": {
+    "micro": "Trend changes and threshold shifts may pulse or brighten subtly to acknowledge important state changes.",
+    "transitions": "Value updates should feel crisp and instrumentation-like rather than decorative or bouncy."
+  },
+  "interactions": [
+    "animate-on-mount",
+    "status-pulse",
+    "real-time-updates",
+    "hover-tooltip"
+  ],
+  "accessibility": {
+    "role": "status",
+    "aria-label": "Metric gauge",
+    "keyboard": [
+      "If metrics are actionable, focus should move metric by metric in reading order without trapping users in decorative sparkline details."
+    ],
+    "announcements": [
+      "Metric label, current value, unit, and trend should be announced together so the gauge is meaningful beyond color or positioning."
+    ]
+  }
+}

package/patterns/mixer-console.json

@@ -0,0 +1,69 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "id": "mixer-console",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Mixer Console",
+  "description": "Horizontal DAW mixer console with channel strips, insert slots, send knobs, pan controls, mute/solo/arm states, stereo meters, faders, and a master channel.",
+  "category": "music",
+  "tags": ["2026", "music", "daw", "mixer", "console", "faders", "metering"],
+  "components": ["ChannelStrip", "InsertSlot", "SendKnob", "PanKnob", "MuteSoloArm", "StereoMeter", "ChannelFader", "MasterChannel"],
+  "default_preset": "console",
+  "presets": {
+    "console": {
+      "description": "Full mixer console with channel strips and a highlighted master bus",
+      "layout": { "layout": "flex", "atoms": "_flex _gap-2 _w-full _bg-surface _overflow-x-auto _p-3" }
+    },
+    "compact": {
+      "description": "Condensed mixer with scrollable strips for small panels and mobile viewports",
+      "layout": { "layout": "flex", "atoms": "_flex _gap-2 _w-full _overflow-x-auto _p-2" }
+    }
+  },
+  "visual_brief": "A compact premium hardware-style mixer with vertical channel strips and shadcn-grade component discipline. Each strip includes color-coded stem label, insert slots, send/pan knobs, M/S/R controls, tall fader, stereo meter with peak hold, and numeric dB readout. Strip widths are stable, labels do not wrap awkwardly, and fader geometry remains consistent across breakpoints. The master channel is wider, anchored at the end, and visually distinct without becoming a neon billboard. Meter bars should feel alive using restrained cyan/amber/red status values.",
+  "default_layout": {
+    "layout": "flex",
+    "atoms": "_flex _gap-2 _w-full _bg-surface _overflow-x-auto _p-3",
+    "slots": {
+      "channel-strip": "Repeating fixed-width vertical strip; never shrink below readable fader/meter dimensions.",
+      "insert-stack": "Small stack of plugin slots such as EQ, Comp, Saturator, Reverb.",
+      "knob-bank": "Send and pan controls with visible value ticks.",
+      "fader-meter": "Tall fader flanked by stereo meter bars and peak dots.",
+      "master-channel": "Distinct end cap channel summarizing master bus level and limiter state."
+    }
+  },
+  "composition": {
+    "MixerConsole": "Root(horizontal-scroll) > [ChannelStrip* + MasterChannel]",
+    "ChannelStrip": "Column(studio-channel) > [StemLabel + InsertStack + KnobBank + MuteSoloArm + FaderMeter + DbReadout]",
+    "FaderMeter": "Relative > [StereoMeterLeft + ChannelFader + StereoMeterRight]"
+  },
+  "motion": {
+    "micro": {
+      "fader-drag": "fader cap tracks pointer at 60fps",
+      "knob-drag": "knob angle tracks pointer with value tooltip"
+    },
+    "ambient": {
+      "metering": "meter levels update with seeded live-simulation values",
+      "peak-hold": "peak indicator holds briefly before decay"
+    }
+  },
+  "interactions": ["live-simulation", "real-time-updates", "hover-tooltip", "keyboard-navigation", "drag-nodes"],
+  "responsive": {
+    "mobile": {
+      "layout": "flex-row",
+      "horizontal_scroll": true,
+      "hide_components": ["secondary-insert-slot", "send-b"],
+        "notes": "Keep strips fixed width and scroll horizontally; do not squash faders into unreadable bars. Hide secondary inserts before shrinking core fader/meter anatomy."
+      },
+    "desktop": "Show full strips, insert slots, sends, pan, faders, meters, and master bus."
+  },
+  "accessibility": {
+    "role": "region",
+    "aria-label": "Mixer console",
+    "keyboard": ["Tab: move through channels", "ArrowUp/ArrowDown: adjust focused fader", "M: mute focused channel", "S: solo focused channel", "0: reset fader"],
+    "announcements": ["{channel} level set to {db} dB", "{channel} {muted|soloed|armed}", "Master peaking at {level}"]
+  },
+  "layout_hints": {
+    "fixed_width": "Channel strips must keep stable dimensions and horizontal scrolling when space is tight.",
+    "readability": "Meters, faders, and stem labels must remain readable at every viewport."
+  }
+}

package/patterns/mobile-profile-hero.json

@@ -0,0 +1,138 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "id": "mobile-profile-hero",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Mobile Profile Hero",
+  "description": "Large photo header for mobile profile pages. Full-bleed cover photo (40-50vh), circular avatar overlapping the cover bottom edge, name+age+bio stack, and a row of action buttons (Edit on own profile / Message+Like+Report on other). Sticky-scroll behavior: avatar shrinks as user scrolls down. Differs from storefront-hero (desktop-leaning, wider proportions) by being mobile-optimized with portrait photo and thumb-friendly action sizing.",
+  "category": "hero",
+  "tags": [
+    "2026",
+    "hero",
+    "profile",
+    "mobile",
+    "consumer",
+    "social",
+    "photo"
+  ],
+  "components": [
+    "Hero",
+    "CoverPhoto",
+    "GradientOverlay",
+    "AvatarFrame",
+    "Avatar",
+    "BackButton",
+    "MoreMenuButton",
+    "InfoStack",
+    "NameAge",
+    "DistanceTag",
+    "Bio",
+    "ActionRow",
+    "EditButton",
+    "MessageButton",
+    "LikeButton",
+    "ReportButton"
+  ],
+  "default_preset": "own-profile",
+  "presets": {
+    "own-profile": {
+      "description": "Profile hero for the current user (own /me route). Single Edit button as the primary action. Cover photo is large, avatar overlaps bottom edge, bio sits below.",
+      "layout": {
+        "layout": "stack",
+        "atoms": "_relative _flex _flex-col _w-full"
+      }
+    },
+    "other-profile": {
+      "description": "Profile hero for another user (/u/:id route). Three action buttons: Message (primary), Like Again (secondary), Report (tertiary). Includes a back button at top-left.",
+      "layout": {
+        "layout": "stack",
+        "atoms": "_relative _flex _flex-col _w-full"
+      }
+    },
+    "compact-scrolled": {
+      "description": "Collapsed state when user has scrolled past the hero. Sticky bar at top with small avatar + name + back button. Used in conjunction with sticky-scroll behavior.",
+      "layout": {
+        "layout": "flex-row",
+        "atoms": "_sticky _top-0 _z-20 _flex _flex-row _items-center _gap-3 _px-4 _py-2 _bg-background/85 _backdrop-blur _border-b _border-border"
+      }
+    }
+  },
+  "visual_brief": "A vertical hero block at the top of the profile page. The CoverPhoto fills the full width and 45vh of viewport height (capped at 360px) — a full-bleed background image (object-fit cover, object-position center). For own-profile in absence of a cover, render a soft peach-to-coral gradient. A GradientOverlay sits on the bottom 40% of the cover: linear-gradient(180deg, transparent 0%, transparent 50%, rgba(0,0,0,0.45) 100%) — ensures any text or avatar reads cleanly. At top-left of the cover (in other-profile preset) sits the BackButton: a 36×36 circular glassy button (rgba(0,0,0,0.4) backdrop-blur 8px) with a 18px ChevronLeft Lucide icon in white. At top-right (in own-profile and other-profile both): a MoreMenuButton — same 36×36 glassy circle with a 18px MoreHorizontal icon, opens a dropdown for share/report/block actions. Overlapping the bottom edge of the CoverPhoto: AvatarFrame — a 96×96 circular avatar with the swipecircle-photo-frame decorator (coral-to-accent gradient ring, soft shadow), positioned absolute (bottom: -48px, left: 24px). The avatar overlaps so half is on the photo, half breaks below into the page surface. Below the cover (with 64px top padding to clear the overlapping avatar), an InfoStack: NameAge (font-display, text-2xl, font-bold) — 'Maya, 27'. DistanceTag inline below — 12px MapPin icon + '3 km away · Active 2h ago' (text-xs, muted). A Bio paragraph below: 1-3 sentences, font-size 15px, line-height 1.5, color var(--d-text). 16px below the bio, the ActionRow: a horizontal row of pill buttons. In own-profile: a single full-width-or-half-width 'Edit Profile' button (swipecircle-pill decorator, primary fill, with Edit icon). In other-profile: three buttons in a row — 'Message' (primary pill, ~50% width), 'Like Again' (secondary pill, white border, 25% width with Heart icon), 'Report' (tertiary, icon-only ghost button, 25% width with Flag icon). On scroll: as user scrolls down the page, the AvatarFrame shrinks from 96×96 to 56×56 over the first 200px of scroll, the CoverPhoto translates upward at 0.4× scroll speed (parallax), and at scroll > 240px, the compact-scrolled variant takes over — a sticky bar at top with the small avatar + name + back button. The hero block disappears off-screen normally.",
+  "layout_hints": {
+    "container": "vertical stack with overlapping avatar",
+    "cover_height": "45vh capped at 360px on portrait, 50vh capped at 400px on landscape",
+    "avatar_overlap": "AvatarFrame absolute-positioned with bottom: -48px so it overlaps the cover-bottom edge",
+    "info_padding_top": "64px on InfoStack to clear the overlapping avatar",
+    "sticky_scroll": "Avatar shrinks 96→56px over first 200px of scroll; cover parallaxes at 0.4×",
+    "buttons": "ActionRow uses pill shapes with icon prefix; min height 44px for tap targets"
+  },
+  "default_layout": {
+    "layout": "stack",
+    "atoms": "_relative _flex _flex-col _w-full",
+    "slots": {
+      "hero": "Outer container. Position relative (so AvatarFrame absolute-anchors here). Flex-col. Width 100%. No background — content layers do the visual work.",
+      "cover-photo": "Position relative. Width 100%. Height 45vh (capped at 360px portrait / 400px landscape). Img with object-fit cover, object-position center. Fallback: linear-gradient(135deg, var(--d-accent), var(--d-primary)). Has data-parallax attribute for scroll-driven translateY.",
+      "gradient-overlay": "Position absolute, inset 0 (or just bottom 40%). Linear-gradient(180deg, transparent 0%, transparent 50%, rgba(0,0,0,0.45) 100%). Pointer-events none.",
+      "back-button": "Conditional in other-profile preset. Position absolute, top: 16px (or 16px + safe-area-inset-top), left: 16px, z-index 5. 36×36 circular button. Background rgba(0,0,0,0.4) with backdrop-blur 8px. ChevronLeft icon 18px white. On click: navigates back via history.back() or emits 'navigate-back'.",
+      "more-menu-button": "Position absolute, top: 16px (or 16px + safe-area-inset-top), right: 16px, z-index 5. 36×36 circular glassy button. MoreHorizontal icon 18px white. On click: opens dropdown sheet with share/report/block actions.",
+      "avatar-frame": "Position absolute, bottom: -48px, left: 24px, z-index 4. 96×96. Applies swipecircle-photo-frame decorator. Gets data-scrolled attribute that shrinks the frame to 56×56 with translateY when user scrolls > 200px.",
+      "avatar": "Img inside the AvatarFrame. width 100%, height 100%, border-radius 9999px, object-fit cover. Fallback: solid surface color with a centered User icon at 36px.",
+      "info-stack": "Padding 64px 24px 16px 24px (the 64px top clears the overlapping avatar). Flex-col, gap 4px (between name and distance), gap 12px (after distance, before bio). Background var(--d-bg).",
+      "name-age": "Span: 'Name, Age'. Font-family var(--d-font-display). Font-size 24px. Font-weight 700. Color var(--d-text). Line-height 1.2.",
+      "distance-tag": "Inline span with 12px MapPin icon + location text + ' · ' + activity text. Font-size 12px. Font-weight 500. Color var(--d-text-muted). Display flex, items-center, gap 4px.",
+      "bio": "Paragraph. Font-size 15px. Font-weight 400. Color var(--d-text). Line-height 1.5. Max 3 lines (line-clamp 3 in compact contexts; uncapped on full profile view).",
+      "action-row": "Flex-row, gap 8px. Padding 16px 24px. Background var(--d-bg). In own-profile: single Edit button at 100% width. In other-profile: Message (flex-grow), Like Again (auto), Report (auto, icon only).",
+      "edit-button": "Pill button (swipecircle-pill decorator). Full width. 'Edit Profile' label with leading 16px Edit Lucide icon. Min height 44px.",
+      "message-button": "Pill button (swipecircle-pill decorator). Flex-grow, 'Message' label with leading 16px Send icon. Primary action.",
+      "like-button": "Pill button with white border + transparent fill. 'Like Again' label with leading 16px Heart icon. Auto-width.",
+      "report-button": "Icon-only ghost button, 44×44. 18px Flag icon in muted color. Tertiary action — opens report flow."
+    }
+  },
+  "accessibility": {
+    "role": "banner",
+    "aria-label": "{name}'s profile",
+    "keyboard": [
+      "Tab: cycle focus through BackButton, MoreMenuButton, action buttons",
+      "Escape (in other-profile): navigates back",
+      "Enter or Space: activate focused button"
+    ],
+    "announcements": [
+      "{name}, age {age}, {distance}",
+      "Profile of {name}",
+      "Editing your profile"
+    ],
+    "focus_management": "Initial focus on page load goes to the InfoStack heading (NameAge). When the more-menu opens, focus moves into the menu items. When the menu closes, focus returns to MoreMenuButton."
+  },
+  "responsive": {
+    "mobile": "Stack layout. Cover 45vh capped 360px. Avatar 96×96. ActionRow buttons stack as flex-row with proportional widths. Single-column layout (this is the mobile-default).",
+    "tablet": "Stack layout. Same as mobile — the mobile-tab-bar shell caps at 480px regardless of viewport. Hero proportions preserved.",
+    "desktop": "Stack layout. Same as mobile/tablet inside the 480px column. Hover states active on action buttons (lift + shadow)."
+  },
+  "motion": {
+    "micro": {
+      "avatar-shrink": "On scroll: scale 1→0.583 (96px to 56px) + translateY 0→-20px over scroll range 0-200px (scroll-linked, not time-based)",
+      "cover-parallax": "On scroll: translateY 0→-(scrollY × 0.4) — cover scrolls at 40% of body scroll speed",
+      "button-press": "scale(0.96) for 80ms then spring to scale(1) over 200ms cubic-bezier(0.34, 1.56, 0.64, 1)",
+      "back-button-hover": "scale(1.08) + bg-opacity 0.4→0.55 over 160ms ease-out"
+    },
+    "transitions": {
+      "compact-bar-fade-in": "When scroll passes 240px, the compact-scrolled bar slides in from translateY(-100%) to 0 over 200ms ease-out, with backdrop-blur smoothly engaging",
+      "stagger-entrance": "On page load: cover fades in (opacity 0→1, 320ms), avatar scales in (0.8→1 with 120ms delay), info-stack stagger (name 240ms, distance 60ms after, bio 60ms after, actions 60ms after) — total ~520ms cascade"
+    }
+  },
+  "interactions": [
+    "scroll-reveal",
+    "scale-hover",
+    "stagger-children",
+    "animate-on-mount",
+    "click-select",
+    "keyboard-navigation"
+  ],
+  "composition": {
+    "MobileProfileHero": "Hero(relative, flex-col) > [CoverContainer + InfoStack + ActionRow]",
+    "CoverContainer": "Div(relative, full-width, 45vh) > [CoverPhoto(absolute-fill) + GradientOverlay(absolute-bottom-half) + BackButton(absolute-top-left, conditional) + MoreMenuButton(absolute-top-right) + AvatarFrame(absolute-bottom-overlap)]",
+    "InfoStack": "Flex(col, gap-1, padding-16-6-4-6) > [NameAge + DistanceTag + Bio]",
+    "ActionRow": "Flex(row, gap-2, padding-4-6) > [EditButton] | [MessageButton + LikeButton + ReportButton]",
+    "AvatarFrame": "Div(absolute, bottom-12-negative, 96px-circle, swipecircle-photo-frame, scroll-shrinks)"
+  }
+}