@decantr/content 3.8.0

package/patterns/stats-detail.json

@@ -0,0 +1,102 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "id": "stats-detail",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Stats Detail",
+  "description": "Detailed statistical breakdown panel showing confidence distributions, percentile bars, metric comparisons, and drill-down tables for quantitative analysis.",
+  "category": "data",
+  "tags": [
+    "statistics",
+    "analytics",
+    "metrics",
+    "data-visualization",
+    "transparency"
+  ],
+  "components": [
+    "Card",
+    "ProgressBar",
+    "Badge",
+    "Text",
+    "Icon",
+    "Tooltip"
+  ],
+  "default_preset": "standard",
+  "presets": {
+    "standard": {
+      "description": "Full statistical breakdown with distribution chart, percentile bars, and comparison table — suitable as a primary analysis view or dashboard panel",
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _col _gap6 _py4"
+      }
+    },
+    "compact": {
+      "description": "Condensed stats for sidebar or card placement — key percentiles and a mini distribution bar only, no table",
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _col _gap3 _py2"
+      }
+    },
+    "comparison": {
+      "description": "Side-by-side metric comparison layout — two or more metric groups displayed in columns with delta indicators",
+      "layout": {
+        "layout": "grid",
+        "atoms": "_grid _gc2 _gap6 _py4"
+      }
+    }
+  },
+  "visual_brief": "A structured statistics panel with a header showing the primary metric in large text (text-2xl, font-bold) alongside a trend indicator badge (d-annotation with data-status). Below, a horizontal distribution chart renders as a segmented bar with labeled breakpoints. Percentile rows display as labeled progress bars (0-100%) with the current value marked by a small indicator. A comparison table uses d-data styling with alternating muted rows, showing metric name, value, delta, and a mini sparkline. All numeric values use tabular-nums for alignment. Section headings use d-label styling with accent left-border.",
+  "layout_hints": {
+    "numbers": "All numeric values must use font-variant-numeric: tabular-nums (or the mono-data class) for proper columnar alignment.",
+    "distribution_bar": "The distribution chart is a single horizontal bar divided into colored segments. Each segment width is proportional to its percentage. Labels sit below each segment. Total bar height: 24-32px.",
+    "percentile_bars": "Percentile indicators are horizontal bars with a filled portion up to the percentile value. Use CSS gradient or width percentage. Mark P50 and P95 with small tick marks.",
+    "comparison_deltas": "Delta values show +/- change with color coding: positive = success, negative = error, neutral = text-muted."
+  },
+  "default_layout": {
+    "layout": "stack",
+    "atoms": "_flex _col _gap6 _py4",
+    "slots": {
+      "header": "Primary metric display with large value, label, and trend badge (d-annotation). Optional subtitle with time range or scope description.",
+      "distribution": "Horizontal segmented bar chart showing value distribution across categories or buckets. Each segment is color-coded and labeled with percentage and count. A legend below maps colors to category names.",
+      "percentiles": "Vertical stack of labeled percentile bars. Each row: label (P50, P90, P95, P99), progress bar filled to percentile value, and numeric value right-aligned. Key percentiles (P50, P95) are visually emphasized with bolder treatment.",
+      "comparison-table": "Data table (d-data) with columns: Metric, Current Value, Previous Value, Delta (%), Trend. Delta column uses color-coded badges. Rows are sortable. Footer shows aggregate or average row.",
+      "breakdown-cards": "Optional grid of small metric cards showing detailed sub-metrics. Each card: icon, label, value, and mini sparkline or trend arrow."
+    }
+  },
+  "accessibility": {
+    "role": "region",
+    "aria-label": "Statistical details",
+    "keyboard": [
+      "Tab navigates between metric sections",
+      "Arrow keys navigate table rows",
+      "Enter expands detail for selected metric"
+    ],
+    "announcements": [
+      "Distribution updated: {category} is {percentage}%",
+      "Metric {name} changed by {delta}",
+      "Sorted by {column} {direction}"
+    ],
+    "focus_management": "Focus moves to first interactive element in each section on tab"
+  },
+  "responsive": {
+    "mobile": "Distribution bar stacks vertically as a list of labeled bars. Comparison table scrolls horizontally. Percentile bars remain horizontal but reduce padding. Header metric stacks label above value.",
+    "tablet": "Standard layout maintained. Comparison table fits without scrolling for up to 5 columns. Grid cards use 2-column layout.",
+    "desktop": "Full layout with side-by-side sections possible. Comparison table shows all columns. Breakdown cards use 3-4 column grid."
+  },
+  "interactions": [
+    "animate-on-mount"
+  ],
+  "composition": {
+    "StatsDetail": "Container(d-section, flex-col, gap-6) > [Header + Distribution + Percentiles + ComparisonTable + BreakdownCards?]",
+    "Header": "Row(flex, justify-between, align-baseline) > [MetricValue(text-2xl, font-bold) + TrendBadge(d-annotation)]",
+    "Distribution": "Card(d-surface) > [Label(d-label) + SegmentedBar(flex, rounded) + Legend(flex, gap-4, text-sm)]",
+    "Percentiles": "Card(d-surface) > [Label(d-label) + PercentileRow(flex, align-center, gap-3)[]]",
+    "ComparisonTable": "Table(d-data) > [Header(d-data-header) + Row(d-data-row, d-data-cell)[]]",
+    "BreakdownCards": "Grid(gc2, lg:gc4, gap-4) > Card(d-surface, compact)[]"
+  },
+  "io": {
+    "consumes": ["metrics-data", "distribution-data", "comparison-data"],
+    "produces": ["selected-metric", "sort-order"],
+    "actions": ["sort", "filter", "drill-down", "export"]
+  }
+}

package/patterns/stats-overview.json

@@ -0,0 +1,132 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "id": "stats-overview",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Stats Overview",
+  "description": "Summary row of key statistics with labels, values, and optional trend indicators",
+  "dependencies": {
+    "patterns": {},
+    "styles": {},
+    "requires_core": {
+      "components": [
+        "Card",
+        "Badge",
+        "icon"
+      ],
+      "charts": []
+    }
+  },
+  "components": [
+    "Card",
+    "Badge",
+    "icon"
+  ],
+  "default_preset": "standard",
+  "presets": {
+    "standard": {
+      "description": "Horizontal row of stat items with label, value, and trend indicator",
+      "components": [
+        "Card",
+        "Badge",
+        "icon"
+      ],
+      "layout": {
+        "layout": "grid",
+        "atoms": "_grid _gc2 _lg:gc4 _gap4",
+        "slots": {
+          "stat-card": "Card containing label, value, and optional trend",
+          "label": "Metric label with _textsm _fgmuted",
+          "value": "Primary value with _heading2 _fontbold",
+          "trend": "Badge with percentage change and directional icon"
+        }
+      }
+    },
+    "compact": {
+      "description": "Inline horizontal bar with dividers between stat items",
+      "components": [
+        "Badge",
+        "icon"
+      ],
+      "layout": {
+        "layout": "row",
+        "atoms": "_flex _aic _jcsb _gap4 _px4 _py3 _bb[1px_solid_var(--d-border)]",
+        "slots": {
+          "stat-item": "Inline stat: _flex _col _aic",
+          "value": "Metric value with _heading4",
+          "label": "Short label with _textxs _fgmuted"
+        }
+      }
+    },
+    "highlighted": {
+      "description": "First stat card is larger and emphasized, remaining are secondary",
+      "components": [
+        "Card",
+        "Badge",
+        "icon"
+      ],
+      "layout": {
+        "layout": "grid",
+        "atoms": "_grid _gc1 _lg:gc4 _gap4",
+        "slots": {
+          "primary-stat": "Large featured Card with bigger value text and sparkline area",
+          "secondary-stats": "Smaller stat Cards in a row"
+        }
+      }
+    }
+  },
+  "visual_brief": "Horizontal row of 3-5 stat summary items, each showing a muted small-text label above a large bold numeric value. Optional trend badges appear to the right of or below the value — green with up-arrow for positive changes, red with down-arrow for negative. In the standard preset, each stat lives in its own card surface with consistent padding (p4) and rounded corners. The compact preset renders stats inline in a single bar separated by vertical dividers, without individual card surfaces. The highlighted preset makes the first stat larger (spanning more grid space) with a sparkline visualization, while remaining stats are secondary size.",
+  "responsive": {
+    "mobile": "Two-column grid (2x2 or 2x3). Compact preset wraps to two rows. Value text reduces to heading3 scale. Trend badges stack below values instead of inline.",
+    "tablet": "Three or four columns depending on stat count. Compact preset stays single row if 4 or fewer items. Standard padding.",
+    "desktop": "Full single-row layout with all stats visible. Four columns standard. Highlighted preset shows featured stat at 2x width. Generous gap4 spacing."
+  },
+  "layout_hints": {
+    "grid_ownership": "The pattern owns the internal stat grid only. Parent workspace or section patterns should provide the intro copy, surrounding card frame, and larger vertical rhythm.",
+    "card_balance": "Each stat card should keep label, value, and trend tightly grouped so the row scans left-to-right without extra decorative chrome. Trend indicators should support the value, not become a second headline.",
+    "highlighted_variant": "When using the highlighted preset, the featured stat may grow in prominence, but secondary stats should remain aligned as one coherent summary system rather than turning into unrelated cards."
+  },
+  "motion": {
+    "micro": "Stat values animate with counter effect (number rolls up from 0) over 800ms ease-out on viewport enter. Trend badges fade in after value completes.",
+    "transitions": "Value text transitions smoothly on data change with 300ms ease. Trend arrow rotates on direction change."
+  },
+  "interactions": [
+    "animate-on-mount"
+  ],
+  "accessibility": {
+    "role": "region",
+    "aria-label": "Key statistics",
+    "aria-live": "polite",
+    "keyboard": [
+      "Tab navigates between stat cards",
+      "Shift+Tab navigates backwards"
+    ],
+    "announcements": [
+      "{label}: {value}, {trend_direction} {trend_percent}",
+      "Statistics updated"
+    ]
+  },
+  "default_layout": {
+    "layout": "grid",
+    "atoms": "_grid _gc2 _lg:gc4 _gap4",
+    "slots": {
+      "stat-card": "Card with label, value, and trend",
+      "label": "Metric label",
+      "value": "Primary value",
+      "trend": "Change indicator"
+    }
+  },
+  "io": {
+    "consumes": [
+      "date-range",
+      "filters"
+    ],
+    "produces": [
+      "stat-data"
+    ]
+  },
+  "composition": {
+    "StatsOverview": "Row(d-section, responsive: wrap) > StatItem[]",
+    "StatItem": "Card(d-surface) > [Icon?(d-annotation, rounded-bg) + Label(text-muted, text-sm) + Value(heading3, mono-data) + TrendBadge?(d-annotation, variant: positive|negative)]"
+  }
+}

package/patterns/stats-section.json

@@ -0,0 +1,90 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "id": "stats-section",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Stats Section",
+  "description": "Marketing-oriented statistics section with large headline metrics, supporting labels, and optional narrative framing.",
+  "dependencies": {
+    "patterns": {},
+    "styles": {},
+    "requires_core": {
+      "components": [
+        "Card",
+        "Badge"
+      ],
+      "charts": []
+    }
+  },
+  "contained": false,
+  "components": [
+    "Card",
+    "Badge"
+  ],
+  "default_preset": "hero",
+  "presets": {
+    "hero": {
+      "description": "Large featured metrics row for landing pages, with one short section intro above.",
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _col _gap6 _py6",
+        "slots": {
+          "intro": "Headline and supporting copy for the metrics section",
+          "stat-grid": "Responsive grid of large stat cards or tiles",
+          "stat-item": "Value, label, and short supporting qualifier"
+        }
+      }
+    },
+    "compact": {
+      "description": "Denser summary row for product proof or pricing sections.",
+      "layout": {
+        "layout": "grid",
+        "atoms": "_grid _gc2 _lg:gc4 _gap4",
+        "slots": {
+          "stat-item": "Compact value and label pair"
+        }
+      }
+    }
+  },
+  "default_layout": {
+    "layout": "stack",
+    "atoms": "_flex _col _gap6 _py6",
+    "slots": {
+      "intro": "Section framing copy",
+      "stat-grid": "Responsive metric grid",
+      "stat-item": "Metric tile"
+    }
+  },
+  "visual_brief": "Confident marketing stats section with oversized values, restrained labels, and enough spacing to let each number breathe. The values should feel like proof points in a narrative rather than dashboard telemetry. Supporting copy stays concise and compositional.",
+  "responsive": {
+    "mobile": "Single-column or two-column stack with reduced headline scale so values remain readable without crowding.",
+    "tablet": "Two to four metrics per row depending on count, with clear separation between intro copy and the metrics themselves.",
+    "desktop": "Wide balanced stat grid with one intro band above and evenly weighted proof points below."
+  },
+  "layout_hints": {
+    "narrative_role": "This pattern is for public proof and trust, not operations dashboards. Values should lead, labels should support, and qualifiers should stay brief.",
+    "grid_balance": "All stat tiles should feel rhythmically aligned even when one value is much longer than the others.",
+    "surface_choice": "Cards are optional. The pattern may use simple tiles or low-chrome blocks depending on theme, but the values should always dominate the visual hierarchy."
+  },
+  "motion": {
+    "micro": "Counters may animate in gently on reveal, and dividers or accents may fade into place.",
+    "transitions": "Entry should feel polished and confidence-building, not playful or hyperactive."
+  },
+  "interactions": [
+    "animate-on-mount"
+  ],
+  "accessibility": {
+    "role": "region",
+    "aria-label": "Key platform statistics",
+    "keyboard": [
+      "If stat items are interactive, keep tab order linear and expose one clear target per tile."
+    ],
+    "announcements": [
+      "Metric labels and values should be announced together so the meaning of each number is preserved."
+    ]
+  },
+  "composition": {
+    "StatsSection": "Stack(d-section, proof) > [Intro?(d-label + heading + body) + StatGrid(d-data, responsive) > StatItem[]]",
+    "StatItem": "Tile(d-surface|minimal) > [Value(heading1|heading2, mono-data) + Label(text-muted) + Qualifier?(d-annotation)]"
+  }
+}

package/patterns/status-bar.json

@@ -0,0 +1,101 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "id": "status-bar",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Status Bar",
+  "description": "Terminal-style status line with real-time indicators, mode display, and clickable sections.",
+  "dependencies": {
+    "patterns": {},
+    "styles": {
+      "terminal": "^1.0.0"
+    },
+    "requires_core": {
+      "components": [
+        "icon"
+      ],
+      "charts": []
+    }
+  },
+  "components": [
+    "icon"
+  ],
+  "default_preset": "bottom",
+  "presets": {
+    "top": {
+      "description": "Status bar at top of screen (title bar style)",
+      "components": [
+        "icon"
+      ],
+      "layout": {
+        "layout": "flex",
+        "atoms": "_flex _aic _jcsb _px2 _mono _textsm _h[24px]",
+        "slots": {
+          "left": "App name, version, mode",
+          "center": "Current file/context",
+          "right": "Time, status indicators"
+        }
+      }
+    },
+    "bottom": {
+      "description": "Status bar at bottom of screen (vim style)",
+      "components": [
+        "icon"
+      ],
+      "layout": {
+        "layout": "flex",
+        "atoms": "_flex _aic _jcsb _px2 _mono _textsm _h[24px] _bgmuted",
+        "slots": {
+          "left": "Mode, file info",
+          "center": "Optional center content",
+          "right": "Position, encoding, status"
+        }
+      }
+    }
+  },
+  "default_layout": {
+    "layout": "flex",
+    "atoms": "_flex _aic _jcsb _px2 _mono _textsm _h[24px]",
+    "slots": {
+      "left": "Left-aligned items",
+      "center": "Center-aligned items",
+      "right": "Right-aligned items"
+    }
+  },
+  "features": [
+    "realtime-updates",
+    "color-coded-status",
+    "click-actions",
+    "tooltip-hover"
+  ],
+  "visual_brief": "Fixed horizontal bar (top or bottom of viewport) with three alignment zones: left, center, and right. Each zone contains clickable status items rendered in monospace text with optional colored icons. Typical left items: mode indicator (INSERT/NORMAL), file name. Center items: line/column numbers, selection count. Right items: language mode, encoding, line endings, notification count. Background is a solid dark or accent color. Clicking a status item triggers a quick action or popup. The bar is a single row, densely packed with small text.",
+  "responsive": {
+    "mobile": "Bar shows only essential items (mode, file name, line/col). Other items accessible via tap-to-expand. Font size slightly reduced.",
+    "tablet": "Most items visible. Right-side items may overflow to a menu.",
+    "desktop": "Full bar with all items visible in left, center, and right zones."
+  },
+  "layout_hints": {
+    "zone_priority": "Left, center, and right zones should remain stable and purposeful. Users should learn where to look for mode, context, and status without re-reading the bar every time.",
+    "density": "Keep the bar terse and information-rich. Each status item should earn its place and avoid reading like a decorative label cloud.",
+    "overflow_strategy": "On narrow widths, preserve critical mode and file context first and collapse the least essential items."
+  },
+  "motion": {
+    "micro": "Live status changes may brighten or pulse subtly, and clickable items may sharpen on hover or focus.",
+    "transitions": "Realtime updates should feel stable and instrumentation-like rather than flashy or banner-like."
+  },
+  "interactions": [
+    "animate-on-mount",
+    "real-time-updates",
+    "status-pulse"
+  ],
+  "accessibility": {
+    "role": "status",
+    "aria-label": "Status bar",
+    "keyboard": [
+      "Status items that open menus or actions should be reachable in order without disrupting the primary workflow."
+    ],
+    "announcements": [
+      "Mode, position, encoding, and other state changes should be exposed semantically so the bar remains informative beyond visual placement."
+    ]
+  }
+}

package/patterns/status-board.json

@@ -0,0 +1,92 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "id": "status-board",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Status Board",
+  "description": "Operational service status board with rows for health, uptime, incidents, and recent change signals.",
+  "dependencies": {
+    "patterns": {},
+    "styles": {},
+    "requires_core": {
+      "components": [
+        "Badge",
+        "icon"
+      ],
+      "charts": []
+    }
+  },
+  "components": [
+    "Badge",
+    "icon"
+  ],
+  "default_preset": "table",
+  "presets": {
+    "table": {
+      "description": "Dense service status table with status dot, uptime, and recent incident summary.",
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _col _gap3",
+        "slots": {
+          "board-header": "Optional board title and summary stats",
+          "status-row": "Single service row with status, uptime, and history",
+          "history-sparkline": "Micro history line or uptime sparkline"
+        }
+      }
+    },
+    "cards": {
+      "description": "Card-based status overview for smaller service sets.",
+      "layout": {
+        "layout": "grid",
+        "atoms": "_grid _gc1 _md:gc2 _gap4",
+        "slots": {
+          "status-card": "Service health card with current state and short history"
+        }
+      }
+    }
+  },
+  "default_layout": {
+    "layout": "stack",
+    "atoms": "_flex _col _gap3",
+    "slots": {
+      "board-header": "Status summary",
+      "status-row": "Service row",
+      "history-sparkline": "Recent uptime history"
+    }
+  },
+  "visual_brief": "Serious operational board with immediate health legibility. Rows or cards should emphasize the current state first, then uptime and incident context. The visual language should be calm, precise, and distinctly control-plane rather than flashy. Health colors matter, but text and labels should do the explanatory work too.",
+  "responsive": {
+    "mobile": "Collapse dense rows into stacked service cards so state, uptime, and last incident remain readable.",
+    "tablet": "Row layout may remain, but secondary columns should wrap or reduce to badges as needed.",
+    "desktop": "Full status table or card grid with clear alignment across service name, state, uptime, and incident history."
+  },
+  "layout_hints": {
+    "health_priority": "Current service state should be the strongest signal, followed by uptime and recent incidents. Avoid decorative metrics that distract from health interpretation.",
+    "history_support": "Sparklines or mini-history strips are supportive context, not the primary content. Keep them compact and aligned with the service row.",
+    "incident_rhythm": "Rows should scan quickly top to bottom. Reserve longer incident copy for expandable details or a linked drill-down."
+  },
+  "motion": {
+    "micro": "Only degraded or actively incidenting services may pulse subtly. Healthy rows should remain still and readable.",
+    "transitions": "Status changes may cross-fade or animate color carefully, but avoid noisy blinking patterns."
+  },
+  "interactions": [
+    "status-pulse",
+    "real-time-updates",
+    "hover-reveal",
+    "animate-on-mount"
+  ],
+  "accessibility": {
+    "role": "region",
+    "aria-label": "Service status board",
+    "keyboard": [
+      "Tab through rows or cards in reading order. Expandable incident details should expose a standard button interaction."
+    ],
+    "announcements": [
+      "Service name, state, and uptime should be announced together so health is understandable without visual color cues."
+    ]
+  },
+  "composition": {
+    "StatusBoard": "Stack(d-section, operations) > [BoardHeader?(d-label + summary) + StatusRows(d-data) > StatusRow[]]",
+    "StatusRow": "Row(d-data-row) > [ServiceName + StateBadge(d-annotation) + Uptime(mono-data) + HistorySparkline?(d-data) + IncidentSummary?]"
+  }
+}

package/patterns/stem-browser.json

@@ -0,0 +1,58 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "id": "stem-browser",
+  "version": "1.1.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Stem Browser",
+  "description": "Producer stem and sample browser with waveform previews, BPM/key facets, tags, usage status, drag-ready assets, and version metadata.",
+  "category": "music",
+  "tags": ["2026", "music", "stems", "samples", "browser", "library", "waveform"],
+  "components": ["StemSearch", "FacetRail", "StemPreviewRow", "WaveformMini", "UsageBadge", "VersionBadge", "DragHandle"],
+  "default_preset": "library",
+  "presets": {
+    "library": {
+      "description": "Full stem library browser with facets and dense waveform rows",
+      "layout": { "layout": "stack", "atoms": "_flex _flex-col _gap-3 _w-full" }
+    },
+    "compact": {
+      "description": "Compact crate list for sidebars and session inspectors",
+      "layout": { "layout": "stack", "atoms": "_flex _flex-col _gap-2 _w-full" }
+    }
+  },
+  "visual_brief": "A dense production asset browser attached to the DAW, not a generic data table or sparse card list. Top search combines BPM, key, type, mood, owner, and usage filters. Rows show stem name, waveform mini-preview, duration, BPM/key, tags, owner, status, version count, last bounce, and drag/add affordance. Desktop implementations should pair the browser with a compact queue, selected-track inspector, or session sidecar so wide viewports feel intentionally composed. Active or used stems have clear badges. Use compact alignment, scroll-area behavior, and stable row height so producers can scan like a sample crate.",
+  "default_layout": {
+    "layout": "stack",
+    "atoms": "_flex _flex-col _gap-3 _w-full",
+    "slots": {
+      "filters": "Search input and facets for type, BPM, key, mood, collaborator, and usage state.",
+      "stem-row": "Dense row with waveform mini-preview, metadata, tags, and action buttons.",
+      "drop-affordance": "Clear drag or add-to-session target state for each asset."
+    }
+  },
+  "composition": {
+    "StemBrowser": "Root(stack) > [StemSearch + FacetRail + StemPreviewRow*]",
+    "StemPreviewRow": "Grid > [DragHandle + WaveformMini + Metadata + UsageBadge + Actions]"
+  },
+  "motion": {
+    "micro": {
+      "preview-hover": "waveform mini animates playhead sweep while hovered",
+      "drag-start": "row lifts with cyan outline"
+    }
+  },
+  "interactions": ["hover-tooltip", "drag-reorder", "click-select", "keyboard-navigation"],
+  "responsive": {
+      "mobile": "Facets collapse into horizontal chips, rows stack metadata below the waveform, and drag affordance becomes an add button. Keep waveform mini-previews wide enough to remain useful.",
+    "desktop": "Use dense rows with facets visible, waveform mini-previews aligned for scanning, and a supporting queue or inspector sidecar on wide routes."
+  },
+  "accessibility": {
+    "role": "listbox",
+    "aria-label": "Stem browser",
+    "keyboard": ["ArrowUp/ArrowDown: move through stems", "Enter: preview stem", "A: add selected stem to session"],
+    "announcements": ["Previewing {stem}", "Added {stem} to session"]
+  },
+  "layout_hints": {
+    "scan_density": "Rows should support fast scanning across BPM, key, usage, and waveform shape.",
+    "audio_identity": "Every row needs an audio-specific visual signal, preferably a mini waveform.",
+    "desktop_fill": "Avoid isolated rows floating in a large empty desktop viewport; use a sidecar or selected-item panel."
+  }
+}