@pudge-ui/mcp-server 0.1.0

package/spec/components/readouts/seven-segment.md

@@ -0,0 +1,110 @@
+---
+name: Seven-Segment Display
+id: seven-seg
+class: .seven-seg
+category: readouts
+index: 6
+materials: [phosphor-screen]
+sizes: [md]
+interactive: false
+requires_js: false
+canvas: false
+---
+
+# Seven-Segment Display
+
+## Physical Analog
+**Reference devices**: Alarm clock displays (Sony Dream Machine), microwave oven timers, synthesizer BPM displays (Roland TR-909), digital scales.
+**Mechanism**: Seven LED segment bars in figure-8 pattern. Each segment is independent LED (red, green, or amber). LEDs behind tinted diffuser window. Glow/bleed from LED light scattering through diffuser. Ghost of unlit segments faintly visible.
+
+## Geometry
+
+| Property | Value |
+|----------|-------|
+| Digit font | 42px VT323 |
+| Digit min-width | 24px |
+| Gap between digits | 4px |
+| Padding | 10px 16px |
+
+## CSS Recipe
+
+### Container
+```css
+.seven-seg {
+  display: inline-flex; gap: 4px; padding: 10px 16px;
+  background: var(--bg-inset); border: 1px solid #1e1e1e;
+  border-radius: var(--radius-md);
+  box-shadow: inset 0 1px 4px rgba(0,0,0,0.7);
+}
+```
+
+### Digit (Default: Red)
+```css
+.seven-seg-digit {
+  font-family: var(--font-lcd); font-size: 42px; line-height: 1;
+  color: var(--red-alert); text-shadow: 0 0 12px var(--red-glow);
+  min-width: 24px; text-align: center;
+}
+```
+
+### Colon
+```css
+.seven-seg-colon { font-family: var(--font-lcd); font-size: 42px; color: var(--red-alert); opacity: 0.7; line-height: 1; }
+```
+
+### Green Variant
+```css
+.seven-seg.green .seven-seg-digit { color: var(--green-hi); text-shadow: 0 0 12px var(--green-glow); }
+.seven-seg.green .seven-seg-colon { color: var(--green-hi); }
+```
+
+### Amber Variant
+```css
+.seven-seg.amber .seven-seg-digit { color: var(--amber); text-shadow: 0 0 12px var(--amber-glow); }
+.seven-seg.amber .seven-seg-colon { color: var(--amber); }
+```
+
+## HTML Structure
+```html
+<!-- Red (default) -->
+<div class="seven-seg">
+  <span class="seven-seg-digit">1</span><span class="seven-seg-digit">2</span>
+  <span class="seven-seg-colon">:</span>
+  <span class="seven-seg-digit">4</span><span class="seven-seg-digit">5</span>
+</div>
+
+<!-- Green variant -->
+<div class="seven-seg green">
+  <span class="seven-seg-digit">0</span><span class="seven-seg-digit">3</span>
+  <span class="seven-seg-colon">:</span>
+  <span class="seven-seg-digit">2</span><span class="seven-seg-digit">1</span>
+</div>
+```
+
+## Size Variants
+No explicit size variants. Fixed at 42px digit size.
+
+## Material Variants
+
+| Color Variant | LED Color |
+|---------------|-----------|
+| default (red) | Red GaAsP LED |
+| `.green` | Green GaP LED |
+| `.amber` | Amber AlGaInP LED |
+
+## Theme Behavior
+- Container background adapts via `--bg-inset`
+- LED colors and glow are fixed (LEDs are LEDs regardless of ambient light)
+- Inset shadow at 0.7 opacity (deep recess)
+
+## Constraints
+1. Font MUST be `--font-lcd` (VT323) for segmented character shapes.
+2. `text-shadow` with accent glow is REQUIRED -- simulates LED light scattering through diffuser.
+3. Colon opacity is 0.7 (slightly dimmer than digits).
+4. Each digit MUST have `min-width: 24px` and `text-align: center` for stable layout.
+5. Inset shadow at 0.7 opacity represents deep diffuser window recess.
+
+## Accessibility
+- Read-only display
+- Use `aria-label` to describe the displayed value (e.g., "Time: 12:45")
+- `aria-live="polite"` for updating displays

package/spec/components/readouts/signal-display.md

@@ -0,0 +1,93 @@
+---
+name: Signal Display
+id: signal-display
+class: .signal-display
+category: readouts
+index: 1
+materials: [phosphor-screen]
+sizes: [md]
+interactive: false
+requires_js: false
+canvas: false
+---
+
+# Signal Display
+
+## Physical Analog
+**Reference devices**: Industrial OLED status panels, Akai MPC Live main display, synthesizer patch displays, broadcast router status panels.
+**Mechanism**: Recessed OLED or VFD (Vacuum Fluorescent Display) module behind protective window. Display sits 3-5mm below panel surface in milled rectangular cavity. OLED pixels emit own light (no backlight), creating high contrast against black background.
+
+## Geometry
+
+| Property | Value |
+|----------|-------|
+| Recess depth | 0.9 opacity inset shadow (deepest in system) |
+| Value font | 34px Michroma display font |
+| Label font | 9px Rajdhani UI font |
+| Inner ring | 1px `#181818` additional depth layer |
+
+## CSS Recipe
+
+### Default (Dark Theme)
+```css
+.signal-display {
+  background: linear-gradient(180deg, #080808, #111);
+  border: 1px solid #1f1f1f; border-radius: var(--radius-md);
+  padding: 16px;
+  box-shadow: inset 0 1px 8px rgba(0,0,0,0.9), inset 0 0 0 1px #181818;
+}
+```
+
+### Light Theme
+```css
+[data-theme="light"] .signal-display {
+  background: linear-gradient(180deg, var(--bg-inset), #ddd);
+  border-color: var(--border-mid);
+  box-shadow: inset 0 1px 4px rgba(0,0,0,0.1);
+}
+```
+
+### Label
+```css
+.signal-display-label { font-size: 9px; color: var(--text-muted); letter-spacing: 3px; font-family: var(--font-ui); font-weight: 500; margin-bottom: 8px; }
+```
+
+### Value
+```css
+.signal-display-value {
+  font-family: var(--font-display); font-size: 34px; color: var(--amber);
+  text-shadow: 0 0 14px var(--amber-glow);
+}
+```
+
+## HTML Structure
+```html
+<div class="signal-display">
+  <div class="signal-display-label">PRIMARY OUTPUT</div>
+  <div class="signal-display-value">87.4%</div>
+</div>
+```
+
+## Size Variants
+No explicit size variants.
+
+## Material Variants
+Single material: Phosphor Screen (LCD/OLED Display Cavity). Nearly black background with heavy inset shadow.
+
+## Theme Behavior
+- Dark: Deep black gradient (`#080808` to `#111`) with 0.9 opacity inset shadow
+- Light: Light inset background with much softer shadow (0.1 opacity)
+- Value amber color and glow remain fixed
+- Inner ring (`inset 0 0 0 1px #181818`) removed in light theme
+
+## Constraints
+1. Inset shadow MUST be 0.9 opacity -- the strongest in the system (deep recess).
+2. Double inset (shadow + ring) creates the "sunken screen" look.
+3. Value text MUST have `text-shadow` with accent glow = phosphor bleed simulation.
+4. Background MUST be nearly black gradient (not flat) to simulate cavity depth.
+5. Label uses wide letter-spacing (3px) for equipment label aesthetic.
+
+## Accessibility
+- Read-only display, no interaction needed
+- Values should use `aria-live="polite"` if they update dynamically
+- Color contrast: amber on near-black exceeds WCAG AA (6.3:1)

package/spec/components/readouts/timecode-display.md

@@ -0,0 +1,94 @@
+---
+name: Timecode Display
+id: timecode-display
+class: .timecode-display
+category: readouts
+index: 4
+materials: [phosphor-screen]
+sizes: [md]
+interactive: false
+requires_js: false
+canvas: false
+---
+
+# Timecode Display
+
+## Physical Analog
+**Reference devices**: Sony BVM broadcast monitors, SMPTE timecode generators, Tascam DA-88 tape machines, video editing decks.
+**Mechanism**: Dedicated timecode readout in SMPTE format (HH:MM:SS:FF). VFD or custom LED segment display. Colons blink at 1Hz during recording/playback as visual "heartbeat" confirming timecode is running.
+
+## Geometry
+
+| Property | Value |
+|----------|-------|
+| Segment font | 22px Michroma display |
+| Colon font | 18px Michroma |
+| Layout | Inline-flex, baseline-aligned |
+| Padding | 6px 16px |
+
+## CSS Recipe
+
+### Container
+```css
+.timecode-display {
+  background: var(--bg-inset); border: 1px solid #1e1e1e;
+  border-radius: var(--radius-md); padding: 6px 16px;
+  display: inline-flex; align-items: baseline;
+  box-shadow: inset 0 1px 4px rgba(0,0,0,0.6);
+}
+```
+
+### Segments
+```css
+.tc-segment {
+  font-family: var(--font-display); font-size: 22px;
+  color: var(--amber); letter-spacing: 2px;
+  text-shadow: 0 0 12px var(--amber-glow);
+  font-variant-numeric: tabular-nums;
+}
+```
+
+### Colons
+```css
+.tc-colon { font-family: var(--font-display); font-size: 18px; color: var(--amber-dim); padding: 0 1px; position: relative; top: -1px; }
+```
+
+### Blink Animation
+```css
+@keyframes tcBlink { 0%,49%{opacity:1} 50%,100%{opacity:0.15} }
+.tc-blink { animation: tcBlink 1s step-end infinite; }
+```
+
+## HTML Structure
+```html
+<div class="timecode-display">
+  <span class="tc-segment">01</span><span class="tc-colon tc-blink">:</span>
+  <span class="tc-segment">23</span><span class="tc-colon">:</span>
+  <span class="tc-segment">45</span><span class="tc-colon">:</span>
+  <span class="tc-segment">12</span>
+</div>
+```
+
+## Size Variants
+No explicit size variants.
+
+## Material Variants
+Single material: Phosphor screen display cavity.
+
+## Theme Behavior
+- Background and shadow adapt via tokens
+- Amber segment color and glow are fixed
+- Colon uses `--amber-dim` for secondary emphasis
+
+## Constraints
+1. Blink animation MUST use `step-end` timing -- instant on/off, not gradual fade. Matches discrete LED behavior.
+2. Blink rate MUST be 1Hz (1s cycle) -- standard broadcast heartbeat.
+3. Only the FIRST colon blinks (`.tc-blink`) -- others are static.
+4. `font-variant-numeric: tabular-nums` is REQUIRED for stable digit widths.
+5. Segments use `--font-display` (Michroma), NOT `--font-lcd` (VT323).
+
+## Accessibility
+- Read-only display
+- Use `aria-label` on container describing the timecode value
+- `aria-live="polite"` if timecode updates in real-time
+- Blink animation respects `prefers-reduced-motion` (should be paused)

package/spec/components/sliders/crossfader.md

@@ -0,0 +1,102 @@
+---
+name: Crossfader
+id: crossfader-track
+class: .crossfader-track
+category: sliders
+index: 5
+materials: [chrome, panel]
+sizes: [md]
+interactive: true
+requires_js: true
+canvas: false
+---
+
+# Crossfader
+
+## Physical Analog
+**Reference devices**: Technics SH-DJ1200 crossfader, Pioneer DJM-800/900 crossfader, Numark DM1050.
+**Mechanism**: Specialized linear potentiometer for DJ mixers. Blends between two audio sources (Deck A left, Deck B right). Extremely low-friction tracks (Teflon-coated or magnetic non-contact) for rapid "scratch" movements.
+
+## Geometry
+
+| Property | Value |
+|----------|-------|
+| Track | 100% width x 10px height (wider than standard fader) |
+| Thumb | 28x16px rectangular (wider than standard fader's 22x14px) |
+| Center line | 1px vertical line at midpoint |
+| Labels | "DECK A" / "DECK B" at ends |
+| Container width | 200px |
+
+## CSS Recipe
+
+### Wrapper & Labels
+```css
+.crossfader-wrap { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 200px; }
+.crossfader-labels { display: flex; justify-content: space-between; width: 100%; font-family: var(--font-ui); font-size: 8px; font-weight: 600; color: var(--text-muted); letter-spacing: 1px; }
+```
+
+### Track
+```css
+.crossfader-track {
+  width: 100%; height: 10px; border-radius: 5px;
+  background: var(--bg-inset); border: 1px solid var(--border-subtle);
+  position: relative; box-shadow: var(--shadow-inset);
+}
+```
+
+### Center Line
+```css
+.crossfader-center { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--border-mid); }
+```
+
+### Thumb (Wide Fader Cap)
+```css
+.crossfader-thumb {
+  position: absolute; top: 50%; width: 28px; height: 16px;
+  border-radius: 4px; transform: translate(-50%,-50%);
+  background: linear-gradient(180deg, #777, #444);
+  box-shadow: 0 1px 3px rgba(0,0,0,0.4), inset 0 1px 0 #999;
+  cursor: grab; z-index: 2;
+}
+.crossfader-thumb::before, .crossfader-thumb::after {
+  content: ''; position: absolute; top: 4px; bottom: 4px; width: 1px; background: #999;
+}
+.crossfader-thumb::before { left: 8px; }
+.crossfader-thumb::after { right: 8px; }
+```
+
+## HTML Structure
+```html
+<div class="crossfader-wrap">
+  <div class="crossfader-labels"><span>DECK A</span><span>DECK B</span></div>
+  <div class="crossfader-track">
+    <div class="crossfader-center"></div>
+    <div class="crossfader-thumb" style="left:50%"></div>
+  </div>
+</div>
+```
+
+## Size Variants
+No explicit size variants.
+
+## Material Variants
+- Track: Recessed panel
+- Thumb: Chrome/metallic gradient with two grip lines
+
+## Theme Behavior
+- Track adapts via tokens
+- Thumb metallic gradient is fixed
+- Center line uses `--border-mid`
+
+## Constraints
+1. Deck labels ("DECK A" / "DECK B") at each end are ESSENTIAL for crossfader concept.
+2. Center line on track marks the visual balance point.
+3. Thumb is WIDER than standard fader (28x16px vs 22x14px) with TWO grip lines (via `::before` and `::after`).
+4. Track is 10px (wider than standard fader's 8px).
+5. No fill element -- crossfader shows position only, not a level.
+
+## Accessibility
+- Add `role="slider"` with `aria-valuenow` (0=Deck A, 50=center, 100=Deck B)
+- `aria-label="Crossfader"`
+- Keyboard: Arrow Left/Right to slide
+- Requires JS for drag interaction

package/spec/components/sliders/dual-range.md

@@ -0,0 +1,97 @@
+---
+name: Dual Range Slider
+id: dual-range-track
+class: .dual-range-track
+category: sliders
+index: 4
+materials: [panel, glossy]
+sizes: [md]
+interactive: true
+requires_js: true
+canvas: false
+---
+
+# Dual Range Slider
+
+## Physical Analog
+**Reference devices**: Parametric EQ frequency range selectors, audio compressor attack/release range, frequency crossover points.
+**Mechanism**: Two independent fader wiper contacts on a single resistive track, defining a range (low/high bound). Fill between thumbs represents selected range. Rare in physical hardware -- UI innovation compressing two controls into one.
+
+## Geometry
+
+| Property | Value |
+|----------|-------|
+| Track | 100% width x 6px height |
+| Thumbs | 14px diameter circles (two of them) |
+| Fill | Blue, positioned between thumbs |
+| Container width | 180px |
+
+## CSS Recipe
+
+### Wrapper
+```css
+.dual-range-wrap { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 180px; }
+```
+
+### Track
+```css
+.dual-range-track {
+  width: 100%; height: 6px; border-radius: 3px;
+  background: var(--bg-inset); border: 1px solid var(--border-subtle);
+  position: relative; box-shadow: var(--shadow-inset);
+}
+```
+
+### Fill (Range Between Thumbs)
+```css
+.dual-range-fill {
+  position: absolute; top: 0; height: 100%; border-radius: 2px;
+  background: var(--blue-info);
+}
+```
+
+### Thumbs
+```css
+.dual-range-thumb {
+  position: absolute; top: 50%; width: 14px; height: 14px;
+  border-radius: 50%; transform: translate(-50%,-50%);
+  background: linear-gradient(155deg, var(--bg-surface), var(--bg-panel));
+  box-shadow: 0 1px 3px rgba(0,0,0,0.3), inset 0 1px 0 var(--glossy-hi);
+  cursor: grab; z-index: 2;
+}
+```
+
+## HTML Structure
+```html
+<div class="dual-range-wrap">
+  <div class="dual-range-track">
+    <div class="dual-range-fill" style="left:25%;width:40%"></div>
+    <div class="dual-range-thumb" style="left:25%"></div>
+    <div class="dual-range-thumb" style="left:65%"></div>
+  </div>
+</div>
+```
+
+## Size Variants
+No explicit size variants.
+
+## Material Variants
+- Track: Recessed panel
+- Thumbs: Glossy panel surface
+- Fill: Solid blue
+
+## Theme Behavior
+- Track and thumbs adapt via tokens
+- Blue fill is fixed
+
+## Constraints
+1. Two thumbs MUST be independently draggable.
+2. Fill MUST span between the two thumbs (set via `left` and `width`).
+3. Thumbs MUST NOT cross each other (low bound cannot exceed high bound).
+4. Both thumbs use identical styling.
+
+## Accessibility
+- Each thumb should have `role="slider"` with separate `aria-valuenow`
+- `aria-label` should distinguish "Range minimum" and "Range maximum"
+- Keyboard: Arrow keys to adjust focused thumb
+- Requires JS for dual drag interaction

package/spec/components/sliders/range-fader.md

@@ -0,0 +1,100 @@
+---
+name: Range Fader
+id: fader-h-track
+class: .fader-h-track
+category: sliders
+index: 3
+materials: [chrome, panel]
+sizes: [md]
+interactive: true
+requires_js: true
+canvas: false
+---
+
+# Range Fader
+
+## Physical Analog
+**Reference devices**: Mackie mixer channel faders, Behringer mixer faders, SSL console faders.
+**Mechanism**: Linear slide potentiometer. Wiper moves in straight line along conductive plastic track. Rectangular thumb grip with horizontal groove for tactile feedback. Fader body has 8-12mm x 4-6mm cross-section.
+
+## Geometry
+
+| Property | Value |
+|----------|-------|
+| Track | 100% width x 8px height (thicker than volume slider) |
+| Thumb | 22x14px rectangular (NOT circular) |
+| Thumb radius | 3px (rounded rectangle) |
+| Fill | Amber (solid, not gradient) |
+| Container width | 180px |
+
+## CSS Recipe
+
+### Wrapper
+```css
+.fader-h-wrap { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 180px; }
+```
+
+### Track
+```css
+.fader-h-track {
+  width: 100%; height: 8px; border-radius: 4px;
+  background: var(--bg-inset); border: 1px solid var(--border-subtle);
+  position: relative; box-shadow: var(--shadow-inset);
+}
+```
+
+### Fill
+```css
+.fader-h-fill {
+  position: absolute; top: 0; left: 0; height: 100%; border-radius: 3px;
+  background: var(--amber); transition: width 0.1s;
+}
+```
+
+### Thumb (Fader Cap)
+```css
+.fader-h-thumb {
+  position: absolute; top: 50%; width: 22px; height: 14px;
+  border-radius: 3px; transform: translate(-50%,-50%);
+  background: linear-gradient(180deg, #666, #333);
+  box-shadow: 0 1px 3px rgba(0,0,0,0.4), inset 0 1px 0 #888;
+  cursor: grab; z-index: 2;
+}
+.fader-h-thumb::after {
+  content: ''; position: absolute; top: 50%; left: 4px; right: 4px;
+  height: 1px; background: #999; transform: translateY(-50%);
+}
+```
+
+## HTML Structure
+```html
+<div class="fader-h-wrap">
+  <div class="fader-h-track">
+    <div class="fader-h-fill" style="width:45%"></div>
+    <div class="fader-h-thumb" style="left:45%"></div>
+  </div>
+</div>
+```
+
+## Size Variants
+No explicit size variants.
+
+## Material Variants
+- Track: Recessed panel
+- Thumb: Chrome/metallic gradient with center groove line (`::after`)
+
+## Theme Behavior
+- Track adapts via tokens
+- Thumb metallic gradient is fixed (metal fader cap)
+- Amber fill is fixed
+
+## Constraints
+1. Thumb MUST be rectangular (22x14px, border-radius: 3px), NOT circular. This is a console fader, not a touch slider.
+2. Center groove line (`::after`) on thumb is REQUIRED for finger positioning reference.
+3. Fill MUST be solid amber (not gradient) -- represents the active signal level.
+4. Track is 8px (thicker than volume slider's 6px) -- fader tracks are wider.
+
+## Accessibility
+- Add `role="slider"` with `aria-valuenow`, `aria-valuemin`, `aria-valuemax`
+- Keyboard: Arrow Left/Right to adjust
+- Requires JS for drag interaction

package/spec/components/sliders/scrubber.md

@@ -0,0 +1,104 @@
+---
+name: Scrubber
+id: scrubber-track
+class: .scrubber-track
+category: sliders
+index: 2
+materials: [panel, glossy]
+sizes: [md]
+interactive: true
+requires_js: true
+canvas: false
+---
+
+# Scrubber
+
+## Physical Analog
+**Reference devices**: iPod Classic now-playing timeline, Winamp playback bar, Creative NOMAD player.
+**Mechanism**: Time-position indicator derived from mechanical tape counter on cassette decks/reel-to-reel. Position = time, elapsed on left, total/remaining on right.
+
+## Geometry
+
+| Property | Value |
+|----------|-------|
+| Track | 100% width x 6px height, recessed |
+| Thumb | 14px diameter (slightly smaller than volume slider) |
+| Fill | Blue-to-pink gradient (distinguishes time from level) |
+| Container width | 200px |
+
+## CSS Recipe
+
+### Wrapper
+```css
+.scrubber-wrap { display: flex; flex-direction: column; gap: 4px; width: 200px; }
+```
+
+### Track
+```css
+.scrubber-track {
+  width: 100%; height: 6px; border-radius: 3px;
+  background: var(--bg-inset); border: 1px solid var(--border-subtle);
+  position: relative; cursor: pointer; box-shadow: var(--shadow-inset);
+}
+```
+
+### Fill
+```css
+.scrubber-fill {
+  position: absolute; top: 0; left: 0; height: 100%; border-radius: 2px;
+  background: linear-gradient(90deg, var(--blue-info), var(--pink-action));
+}
+```
+
+### Thumb
+```css
+.scrubber-thumb {
+  position: absolute; top: 50%; width: 14px; height: 14px;
+  border-radius: 50%; transform: translate(-50%,-50%);
+  background: linear-gradient(155deg, var(--bg-surface), var(--bg-panel));
+  box-shadow: 0 1px 3px rgba(0,0,0,0.3), inset 0 1px 0 var(--glossy-hi);
+  z-index: 2; cursor: pointer;
+}
+```
+
+### Time Labels
+```css
+.scrubber-time {
+  display: flex; justify-content: space-between;
+  font-family: var(--font-mono); font-size: 10px; color: var(--text-muted);
+}
+```
+
+## HTML Structure
+```html
+<div class="scrubber-wrap">
+  <div class="scrubber-track">
+    <div class="scrubber-fill" style="width:35%"></div>
+    <div class="scrubber-thumb" style="left:35%"></div>
+  </div>
+  <div class="scrubber-time"><span>1:24</span><span>4:02</span></div>
+</div>
+```
+
+## Size Variants
+No explicit size variants.
+
+## Material Variants
+- Track: Recessed panel
+- Thumb: Glossy panel surface
+- Fill: Blue-to-pink gradient (different from volume's blue-to-green)
+
+## Theme Behavior
+- Track and thumb adapt via tokens
+- Fill gradient colors are fixed accent colors
+
+## Constraints
+1. Fill gradient MUST be blue-to-pink (NOT blue-to-green like volume slider) to distinguish time from level.
+2. Timestamp labels MUST use `--font-mono` for aligned numeric display.
+3. Thumb is 14px (slightly smaller than volume slider's 16px).
+
+## Accessibility
+- Add `role="slider"` with `aria-valuenow`, `aria-valuemin`, `aria-valuemax`
+- `aria-label="Playback position"`
+- Keyboard: Arrow Left/Right to scrub
+- Requires JS for drag and time update