@pudge-ui/mcp-server 0.1.0 → 0.2.0

package/spec/spec/components/buttons/rec-button.md

@@ -1,105 +0,0 @@
----
-name: REC Button
-id: rec-btn
-class: .rec-btn
-category: buttons
-index: 6
-materials: [polycarbonate-red]
-sizes: [md]
-interactive: true
-requires_js: true
-canvas: false
----
-
-# REC Button
-
-## Physical Analog
-**Reference devices**: Sony FX6/FX9 record button, Canon C300 REC, Panasonic GH5 video record.
-**Mechanism**: Momentary push switch (not a toggle -- each press toggles recording state in firmware). Physically distinct: concave surface (dished inward), red-dyed polycarbonate, guard ring prevents accidental activation.
-
-## Geometry
-
-| Property | Value |
-|----------|-------|
-| Diameter | 12-16mm real / 52px UI |
-| Surface | Concave (center 1-2mm lower than rim) |
-| Guard ring | Two concentric rings separated by dark gap |
-| Radial gradient offset | 38% 32% (upper-left, not centered) |
-| Stop square (recording) | 18x18px white square inside |
-
-## CSS Recipe
-
-### Default State
-```css
-.rec-btn {
-  width: 52px; height: 52px; border-radius: 50%;
-  background: radial-gradient(circle at 38% 32%, #e83300, #7a0000 75%);
-  border: none; outline: none; cursor: pointer; position: relative;
-  box-shadow: 0 0 0 3px var(--bg-raised), 0 0 0 5px #333,
-              0 3px 0 var(--border-deep), inset 0 1px 0 #ff4422;
-  transition: transform 0.07s, box-shadow 0.07s;
-}
-```
-
-### Active (Pressed) State
-```css
-.rec-btn:active {
-  transform: scale(0.94);
-  box-shadow: 0 0 0 3px var(--bg-raised), 0 0 0 5px #333,
-              0 1px 0 var(--border-deep), inset 0 1px 0 #881100;
-}
-```
-
-### Recording State
-```css
-.rec-btn.recording {
-  box-shadow: 0 0 0 3px var(--bg-raised), 0 0 0 5px rgba(204,34,0,0.4),
-              0 3px 0 var(--border-deep), inset 0 1px 0 #ff4422, 0 0 18px rgba(204,34,0,0.4);
-}
-```
-
-### Inner Stop Square
-```css
-.rec-btn .rec-inner {
-  position: absolute; top: 50%; left: 50%;
-  transform: translate(-50%,-50%) scale(0);
-  width: 18px; height: 18px; background: #fff;
-  border-radius: 3px; transition: transform 0.15s ease; opacity: 0.9;
-}
-.rec-btn.recording .rec-inner {
-  transform: translate(-50%,-50%) scale(1);
-  border-radius: 4px; background: #ffdddd;
-}
-```
-
-## HTML Structure
-```html
-<button class="rec-btn" id="recBtn">
-  <div class="rec-inner"></div>
-</button>
-<span>STANDBY</span>
-```
-
-## Size Variants
-No size variants. Fixed at 52x52px.
-
-## Material Variants
-Single material: red-dyed polycarbonate with concave radial gradient.
-
-## Theme Behavior
-- Guard ring uses `var(--bg-raised)` for the dark gap, adapting to theme
-- Red gradient and glow colors are fixed regardless of theme
-- `--border-deep` adapts the bottom edge shadow per theme
-
-## Constraints
-1. Surface MUST be concave (radial-gradient at 38% 32%, not centered). Concave surfaces reflect light from off-axis.
-2. Guard ring MUST use two concentric `box-shadow` rings: `0 0 0 3px bg-raised` (dark gap) then `0 0 0 5px #333` (chrome ring).
-3. Press feedback is `scale(0.94)`, NOT `translateY`. Round buttons depress, not shift.
-4. Recording glow MUST be 18px radius red glow on the guard ring.
-5. Stop square appears via `transform: scale(0 -> 1)` transition, not opacity.
-
-## Accessibility
-- Uses native `<button>` element
-- Keyboard: Enter/Space to toggle recording state
-- ARIA: Should include `aria-pressed` to indicate recording state
-- Requires JS to toggle `.recording` class

package/spec/spec/components/buttons/rubber-button.md

@@ -1,100 +0,0 @@
----
-name: Rubber Button
-id: rubber-btn
-class: .rubber-btn
-category: buttons
-index: 3
-materials: [rubber]
-sizes: [xs, sm, md]
-interactive: true
-requires_js: false
-canvas: false
----
-
-# Rubber Button
-
-## Physical Analog
-**Reference devices**: Game Boy Advance Start/Select, Nokia 3310 side buttons, Sony Walkman transport controls.
-**Mechanism**: Conductive rubber dome (vulcanized silicone). Single piece with conductive carbon pill inside. Silicone deforms progressively, pushing carbon pill onto PCB traces. No sharp click -- soft, damped tactile feel. Silicone elasticity provides return force.
-
-## Geometry
-
-| Property | Value |
-|----------|-------|
-| Surface finish | Matte (naturally low specular reflection) |
-| Shape | Pill-shaped (oblong with fully rounded ends) |
-| Travel | 0.5-1.0mm (more than metal dome switches) |
-| Highlight opacity | 0.06 (vs 0.14 for glossy) |
-
-## CSS Recipe
-
-### Default State
-```css
-.rubber-btn {
-  display: inline-flex; align-items: center; justify-content: center;
-  font-family: var(--font-ui); font-size: 10px; font-weight: 600;
-  letter-spacing: 1px; color: var(--text-secondary);
-  background: linear-gradient(180deg, var(--rubber-hi), var(--rubber-bg));
-  border: none; border-radius: var(--radius-pill); cursor: pointer;
-  height: 34px; min-width: 56px; padding: 0 14px;
-  box-shadow: 0 2px 0 var(--border-deep), inset 0 1px 0 rgba(255,255,255,0.08);
-  transition: transform 0.07s var(--snap-fast), box-shadow 0.07s var(--snap-fast);
-}
-```
-
-### Active (Pressed) State
-```css
-.rubber-btn:active {
-  transform: translateY(1px);
-  box-shadow: 0 1px 0 var(--border-deep);
-}
-```
-
-### Active (Selected) State
-```css
-.rubber-btn.active { color: var(--green-on); background: linear-gradient(180deg,#2a3a2a,#1a2a1a); }
-```
-
-### Light Theme Overrides
-```css
-[data-theme="light"] .rubber-btn.active { background: linear-gradient(180deg,#c0dcc0,#a0cca0); }
-```
-
-## HTML Structure
-```html
-<!-- Basic -->
-<button class="rubber-btn">RUBBER</button>
-
-<!-- Active -->
-<button class="rubber-btn active">ACTIVE</button>
-
-<!-- Small -->
-<button class="rubber-btn xs">XS</button>
-```
-
-## Size Variants
-
-| Size | Height | Min-Width | Font-Size | Padding |
-|------|--------|-----------|-----------|---------|
-| `.xs` | 24px | 40px | 8px | 0 8px |
-| `.sm` | 28px | 48px | 9px | 0 10px |
-| default | 34px | 56px | 10px | 0 14px |
-
-## Material Variants
-Single material: rubber (soft-touch matte). Uses `--rubber-hi` and `--rubber-bg` tokens.
-
-## Theme Behavior
-- Dark: `--rubber-bg: #2a2826`, `--rubber-hi: #3a3835`
-- Light: `--rubber-bg: #c8c4bc`, `--rubber-hi: #d8d4cc`
-- Active state uses different green gradients per theme
-
-## Constraints
-1. Highlight opacity MUST be `0.06-0.08`, not `0.14`. Matte surface = minimal specular reflection.
-2. Gradient delta between stops MUST be very small (nearly flat). Rubber has no dome catch-light.
-3. Border-radius MUST be `100px` (pill shape). Rectangular rubber buttons look wrong.
-4. Press uses `--snap-fast` easing with slight overshoot to simulate silicone squish.
-
-## Accessibility
-- Uses native `<button>` element
-- Keyboard: Enter/Space to activate
-- Focus: Browser default focus ring preserved

package/spec/spec/components/buttons/segmented-control.md

@@ -1,95 +0,0 @@
----
-name: Segmented Control
-id: segmented
-class: .segmented
-category: buttons
-index: 9
-materials: [panel, glossy]
-sizes: [md]
-interactive: true
-requires_js: true
-canvas: false
----
-
-# Segmented Control
-
-## Physical Analog
-**Reference devices**: Camera mode selector (Photo/Video/Slow), audio input selector (Mic/Line/Phono), Sony MiniDisc player play-mode switch.
-**Mechanism**: DIP switch bank or slide-selector switch. Row of mechanically interlocked buttons where pressing one releases the previously pressed button (mutually exclusive). Each button pushes a metal leaf contact onto a bus bar. Interlock mechanism ensures only one circuit is closed at a time.
-
-## Geometry
-
-| Property | Value |
-|----------|-------|
-| Track | Recessed (bg-inset with inset shadow) |
-| Segment padding | 6px 14px |
-| Border-radius | var(--radius-md) outer, -2px inner |
-| Active segment | Raised with shadow and glossy highlight |
-
-## CSS Recipe
-
-### Container (Track)
-```css
-.segmented {
-  display: inline-flex; background: var(--bg-inset);
-  border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
-  padding: 3px; box-shadow: var(--shadow-inset);
-}
-```
-
-### Segment Item
-```css
-.segmented-item {
-  padding: 6px 14px; border: none; background: transparent;
-  font-family: var(--font-ui); font-size: 10px; font-weight: 500;
-  letter-spacing: 1px; color: var(--text-muted); cursor: pointer;
-  border-radius: calc(var(--radius-md) - 2px);
-  transition: all 0.15s var(--snap-fast);
-}
-```
-
-### Hover State
-```css
-.segmented-item:hover { color: var(--text-primary); }
-```
-
-### Active (Selected) State
-```css
-.segmented-item.active {
-  background: var(--bg-surface); color: var(--amber);
-  box-shadow: 0 1px 3px rgba(0,0,0,0.2), inset 0 1px 0 var(--glossy-hi);
-}
-```
-
-## HTML Structure
-```html
-<div class="segmented">
-  <button class="segmented-item active">PHOTO</button>
-  <button class="segmented-item">VIDEO</button>
-  <button class="segmented-item">SLOW</button>
-</div>
-```
-
-## Size Variants
-No explicit size variants defined.
-
-## Material Variants
-- Track: Recessed panel (phosphor screen cavity)
-- Active segment: Raised glossy surface with specular highlight
-
-## Theme Behavior
-- `--bg-inset` provides the recessed track color per theme
-- `--shadow-inset` adapts shadow intensity per theme
-- Active segment surface and shadow adapt via tokens
-
-## Constraints
-1. Only ONE item can be `.active` at a time (radio behavior, NOT multi-select).
-2. Active item MUST look physically raised relative to the track -- use shadow and highlight to create depth differential.
-3. Track padding (3px) creates the visible gap between segment buttons and track walls.
-4. Inner border-radius MUST be `calc(var(--radius-md) - 2px)` to nest correctly inside outer radius.
-
-## Accessibility
-- Uses native `<button>` elements
-- Keyboard: Arrow keys to navigate between segments, Enter to select
-- ARIA: Container should use `role="radiogroup"`, items should use `role="radio"` with `aria-checked`
-- Requires JS to toggle `.active` class between items (mutual exclusion)

package/spec/spec/components/data/assembled-panel.md

@@ -1,135 +0,0 @@
----
-name: Assembled Panel
-id: assembled-panel
-class: .panel
-category: data
-index: 4
-materials: [brushed-metal, rubber, glossy-polycarbonate, phosphor-screen]
-sizes: [default]
-interactive: true
-requires_js: true
-canvas: true
----
-
-# Assembled Panel
-
-## Physical Analog
-**Reference devices**: Camera Viewfinder HUD, Audio Mixer Strip, complete equipment front panels.
-**Mechanism**: An assembled panel is not a single component but a composition of multiple pudge-ui components within a Panel container (I1). This document describes the composition rules and patterns for building complex, multi-component panels that maintain physical plausibility.
-
-## Geometry
-
-| Property | Value |
-|----------|-------|
-| Container | `.panel` (I1) with `--radius-lg` |
-| Padding | 22px (panel standard) |
-| Intra-group gap | `--space-md` (14px) |
-| Inter-group gap | `--space-lg` (22px) |
-| Grid layout | `repeat(auto-fit, minmax(340px, 1fr))` |
-
-## CSS Recipe
-
-Assembled panels use the base `.panel` CSS from I1, combined with layout utilities:
-
-### Panel container
-```css
-.panel {
-  position: relative;
-  background: linear-gradient(180deg, var(--bg-surface), var(--bg-panel));
-  border: 1px solid var(--border-mid); border-radius: var(--radius-lg);
-  padding: 22px;
-  box-shadow: 0 2px 0 var(--border-deep), 0 10px 28px rgba(0,0,0,0.3), inset 0 1px 0 var(--border-hi);
-  overflow: hidden;
-}
-```
-
-### Layout helpers
-```css
-.flex-row { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
-.flex-col { display: flex; flex-direction: column; gap: 8px; }
-```
-
-### Serial / fabrication block
-```css
-.serial { margin-top: 16px; color: var(--text-muted); font-size: 9px; letter-spacing: 2px; display: flex; justify-content: space-between; font-family: var(--font-ui); }
-```
-
-## HTML Structure
-
-### Example: Diagnostic Panel
-```html
-<div class="panel" style="width:360px">
-  <div class="panel-title">SYSTEM DIAGNOSTICS</div>
-
-  <!-- Status bar at top -->
-  <div class="status-bar" style="margin-bottom:14px">
-    <span class="sb-time">14:32</span>
-    <div class="sb-icons">
-      <div class="led-dot green"></div>
-    </div>
-  </div>
-
-  <!-- Mode indicator -->
-  <div class="flex-row" style="gap:8px;margin-bottom:14px">
-    <div class="mode-badge">
-      <span class="mode-letter">M</span>
-      <div class="mode-detail"><span class="mode-key">MODE</span><span class="mode-sub">Manual</span></div>
-    </div>
-    <div class="chip-row">
-      <div class="status-chip active">ONLINE</div>
-      <div class="status-chip">REMOTE</div>
-    </div>
-  </div>
-
-  <!-- Data readout -->
-  <table class="data-table" style="margin-bottom:14px">
-    <thead><tr><th>PARAM</th><th>VALUE</th><th>STATUS</th></tr></thead>
-    <tbody>
-      <tr><td>CPU</td><td class="val">72C</td><td><div class="led-dot green"></div></td></tr>
-      <tr><td>MEM</td><td class="val">8.2G</td><td><div class="led-dot green"></div></td></tr>
-    </tbody>
-  </table>
-
-  <!-- Controls -->
-  <div class="flex-row" style="gap:8px">
-    <button class="push-btn xs active">MODE</button>
-    <button class="push-btn xs">RESET</button>
-    <button class="push-btn xs">CONFIG</button>
-  </div>
-
-  <div class="serial"><span>REV-C</span><span>UNIT-07</span></div>
-</div>
-```
-
-## Size Variants
-No size variants defined. Assembled panels scale to content and container.
-
-## Material Variants
-Assembled panels can combine multiple materials following the 2-material rule:
-- Panel body: brushed metal or glossy polycarbonate
-- Controls within: rubber buttons, glossy buttons, phosphor displays
-- Maximum 2 materials per panel for physical plausibility
-
-## Theme Behavior
-- All sub-components follow their individual theme rules
-- Panel container follows I1 Panel theme behavior
-- Consistent lighting direction must be maintained (all gradients top-to-bottom)
-
-## Constraints
-
-### Composition Rules (from design.md)
-1. **Hierarchy**: The panel container (I1) provides the outer frame. Content is organized in rows/columns within.
-2. **Spacing**: Use `--space-md` (14px) for gaps between related components, `--space-lg` (22px) for gaps between groups.
-3. **Consistent lighting**: All components in a panel share the same light direction (top-left). MUST NOT mix components with different gradient directions.
-4. **Status bar placement**: Status information (status bar, mode badges, battery) goes at the TOP edge. Controls go in the MIDDLE. Metadata (serial numbers, timecodes) goes at the BOTTOM.
-5. **Material consistency**: Within a single panel, use at most 2 materials (e.g., brushed metal knobs on a rubber panel surface). Too many materials in one panel breaks physical plausibility.
-6. MUST include serial/revision block at the bottom (manufacturing authenticity detail).
-7. MUST use `.panel-title` with `--font-display` for the panel name.
-8. MUST use `.panel-label` for section dividers within the panel.
-
-## Accessibility
-- Assembled panel should use `role="region"` with `aria-label` describing the panel purpose
-- Internal sections should use appropriate heading levels
-- Tab order within the panel should follow visual top-to-bottom, left-to-right order
-- All sub-component accessibility rules apply individually
-- Complex panels may benefit from `aria-describedby` pointing to a usage description

package/spec/spec/components/data/data-table.md

@@ -1,116 +0,0 @@
----
-name: Data Table
-id: data-table
-class: .data-table
-category: data
-index: 1
-materials: [phosphor-screen]
-sizes: [default]
-interactive: true
-requires_js: false
-canvas: false
----
-
-# Data Table
-
-## Physical Analog
-**Reference devices**: Diagnostic readout grids on server equipment, oscilloscope measurement tables, BIOS setup tables.
-**Mechanism**: Tabular data arranged in a monospace font within a recessed display area. The header row uses a separate background (equipment panels often had a silk-screened label strip above the data area). Hover highlighting simulates the movable cursor/indicator on hardware diagnostic screens.
-
-## Geometry
-
-| Property | Value |
-|----------|-------|
-| Width | 100% |
-| Header padding | 8px 12px |
-| Cell padding | 6px 12px |
-| Header font size | 9px |
-| Cell font size | 11px |
-| Value font size | 12px (`.val` cells) |
-| Border radius | `--radius-md` (8px) |
-
-## CSS Recipe
-
-### Table (`.data-table`)
-```css
-.data-table {
-  width: 100%; border-collapse: collapse;
-  font-family: var(--font-mono); font-size: 11px;
-  background: var(--bg-inset); border: 1px solid var(--border-subtle);
-  border-radius: var(--radius-md); overflow: hidden;
-}
-```
-
-### Header cells
-```css
-.data-table th {
-  padding: 8px 12px; text-align: left;
-  font-family: var(--font-ui); font-size: 9px; font-weight: 600;
-  letter-spacing: 2px; color: var(--text-muted); text-transform: uppercase;
-  background: var(--bg-surface); border-bottom: 1px solid var(--border-subtle);
-}
-```
-
-### Data cells
-```css
-.data-table td {
-  padding: 6px 12px; color: var(--text-primary);
-  border-bottom: 1px solid rgba(128,128,128,0.06);
-}
-.data-table tr:last-child td { border-bottom: none; }
-```
-
-### Row hover
-```css
-.data-table tr:hover td { background: var(--glow-color); }
-```
-
-### Value cells (`.val`)
-```css
-.data-table td.val { color: var(--amber); font-family: var(--font-display); font-size: 12px; }
-```
-
-## HTML Structure
-```html
-<table class="data-table" style="width:360px">
-  <thead>
-    <tr><th>PARAMETER</th><th>VALUE</th><th>STATUS</th></tr>
-  </thead>
-  <tbody>
-    <tr><td>CPU Temp</td><td class="val">72&deg;C</td><td><div class="led-dot green"></div></td></tr>
-    <tr><td>Fan Speed</td><td class="val">2400</td><td><div class="led-dot green"></div></td></tr>
-    <tr><td>Voltage</td><td class="val">12.1V</td><td><div class="led-dot amber"></div></td></tr>
-    <tr><td>Clock</td><td class="val">3.6GHz</td><td><div class="led-dot green"></div></td></tr>
-  </tbody>
-</table>
-```
-
-## Size Variants
-No size variants defined. Width is 100% of parent container.
-
-## Material Variants
-No material variants. Uses phosphor screen (recessed) background with surface-colored header.
-
-## Theme Behavior
-- Table background uses `--bg-inset` (recessed data display area)
-- Header uses `--bg-surface` (raised label strip above data)
-- Row separators are very subtle (`rgba(128,128,128,0.06)`)
-- Hover highlight uses `--glow-color`
-- Value cells use `--amber` (constant across themes)
-
-## Constraints
-1. MUST use monospace font (`--font-mono`) for data cells
-2. Header MUST use UI font (`--font-ui`) with uppercase, 2px letter-spacing
-3. Header MUST have distinct background (`--bg-surface`) from data area
-4. Value cells (`.val`) MUST use amber color and display font
-5. MUST use `border-collapse: collapse` for clean grid lines
-6. MUST use `overflow: hidden` to clip border-radius
-7. Row separators MUST be very subtle (6% opacity)
-8. Hover MUST highlight entire row
-
-## Accessibility
-- Use semantic `<table>`, `<thead>`, `<tbody>`, `<th>`, `<td>` elements
-- Include `<caption>` or `aria-label` on table for screen readers
-- `<th>` elements should have `scope="col"` attribute
-- Ensure sufficient color contrast for all text
-- LED dots in cells should have `aria-label` describing status

package/spec/spec/components/data/film-strip.md

@@ -1,110 +0,0 @@
----
-name: Film Strip
-id: film-strip
-class: .film-strip
-category: data
-index: 3
-materials: []
-sizes: [default]
-interactive: true
-requires_js: true
-canvas: false
----
-
-# Film Strip
-
-## Physical Analog
-**Reference devices**: Camera filmstrip playback view, video editing timeline, 35mm film strip.
-**Mechanism**: A horizontal row of image thumbnails with sprocket hole borders -- the perforations along the edges of 35mm motion picture film. In real film, these holes engage with the camera/projector's claw mechanism to advance the film one frame at a time. The `::before` and `::after` pseudo-elements with `repeating-linear-gradient` create the sprocket hole pattern along the top and bottom edges of the strip.
-
-## Geometry
-
-| Property | Value |
-|----------|-------|
-| Frame size | 60x40px |
-| Frame gap | 4px |
-| Strip padding | 8px |
-| Sprocket strip width | 8px |
-| Frame border radius | 2px |
-| Background | #0a0a0a (film base color) |
-
-## CSS Recipe
-
-### Strip container (`.film-strip`)
-```css
-.film-strip {
-  display: flex; gap: 4px; padding: 8px;
-  background: #0a0a0a; border: 1px solid #1e1e1e;
-  border-radius: var(--radius-sm); overflow-x: auto;
-}
-```
-
-### Sprocket holes
-```css
-.film-strip::before, .film-strip::after {
-  content: ''; flex-shrink: 0; width: 8px;
-  background: repeating-linear-gradient(0deg, transparent 0px, transparent 6px, #333 6px, #333 8px);
-}
-```
-
-### Frame (`.film-frame`)
-```css
-.film-frame {
-  flex-shrink: 0; width: 60px; height: 40px;
-  background: var(--bg-surface); border: 1px solid #333;
-  border-radius: 2px; display: flex; align-items: center; justify-content: center;
-  font-size: 9px; color: var(--text-muted); cursor: pointer;
-  transition: border-color 0.12s;
-}
-```
-
-### Frame hover
-```css
-.film-frame:hover { border-color: var(--amber); }
-```
-
-### Frame selected
-```css
-.film-frame.selected { border-color: var(--amber); box-shadow: 0 0 6px var(--amber-glow); }
-```
-
-## HTML Structure
-```html
-<div class="film-strip" style="width:320px">
-  <div class="film-frame">F01</div>
-  <div class="film-frame selected">F02</div>
-  <div class="film-frame">F03</div>
-  <div class="film-frame">F04</div>
-  <div class="film-frame">F05</div>
-</div>
-```
-
-## Size Variants
-No size variants defined.
-
-## Material Variants
-No material variants. Uses fixed film-base colors (dark, non-themed).
-
-## Theme Behavior
-- Film strip background is FIXED (#0a0a0a) -- does not change with theme
-- Film base border is FIXED (#1e1e1e)
-- Frame borders are FIXED (#333)
-- Frame content area uses `--bg-surface` for placeholder backgrounds
-- Selected glow always uses amber
-
-## Constraints
-1. MUST include sprocket hole strips via `::before` and `::after` pseudo-elements
-2. Sprocket pattern MUST use `repeating-linear-gradient` with 6px transparent + 2px colored
-3. Film base MUST be near-black (#0a0a0a) regardless of theme
-4. Frames MUST use fixed-width (`flex-shrink: 0`) to prevent squishing
-5. MUST support horizontal scrolling (`overflow-x: auto`) for many frames
-6. Frame border-radius MUST be minimal (2px) to match film frame corners
-7. Selected frame MUST use amber border with amber glow (6px radius)
-8. Hover MUST highlight frame border in amber
-
-## Accessibility
-- Container should have `role="listbox"` or similar with `aria-label="Film strip"`
-- Frames should have `role="option"` with `aria-selected`
-- Support Left/Right arrow key navigation
-- Support keyboard scrolling
-- Include descriptive `aria-label` on each frame