@pudge-ui/mcp-server 0.1.0

package/spec/components/sliders/stepper.md

@@ -0,0 +1,106 @@
+---
+name: Stepper
+id: stepper
+class: .stepper
+category: sliders
+index: 6
+materials: [panel, glossy]
+sizes: [md]
+interactive: true
+requires_js: true
+canvas: false
+---
+
+# Stepper
+
+## Physical Analog
+**Reference devices**: iPod scroll wheel numeric entry, Nokia phone volume steps, Roland TR-808 tempo control.
+**Mechanism**: Digitized increment/decrement control. Pair of momentary buttons (+ and -) flanking a numeric display. Each press changes value by one step. Values are discrete (integers or predefined steps), distinct from continuous sliders.
+
+## Geometry
+
+| Property | Value |
+|----------|-------|
+| Container | Inline-flex with inset background |
+| Buttons | 24px diameter circles |
+| Value display | 40px min-width, centered |
+| Font size | 18px mono for value |
+
+## CSS Recipe
+
+### Wrapper
+```css
+.stepper-wrap { display: flex; flex-direction: column; align-items: center; gap: 4px; }
+```
+
+### Container
+```css
+.stepper {
+  display: flex; align-items: center; gap: 4px;
+  background: var(--bg-inset); border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-md); padding: 4px;
+  box-shadow: var(--shadow-inset);
+}
+```
+
+### Increment/Decrement Buttons
+```css
+.stepper-btn {
+  width: 24px; height: 24px; border-radius: 50%;
+  border: none; cursor: pointer; display: flex; align-items: center; justify-content: center;
+  background: linear-gradient(155deg, var(--bg-surface), var(--bg-panel));
+  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
+  color: var(--text-primary); font-size: 12px; font-family: var(--font-ui); font-weight: 700;
+  transition: transform 0.07s;
+}
+.stepper-btn:active { transform: scale(0.9); }
+```
+
+### Value Display
+```css
+.stepper-value {
+  font-family: var(--font-mono); font-size: 18px;
+  color: var(--blue-info); letter-spacing: 1px;
+  min-width: 40px; text-align: center;
+}
+```
+
+### Label
+```css
+.stepper-label { font-family: var(--font-ui); font-size: 9px; font-weight: 500; color: var(--text-muted); letter-spacing: 1px; }
+```
+
+## HTML Structure
+```html
+<div class="stepper-wrap">
+  <div class="stepper">
+    <button class="stepper-btn" data-stepper-dec>&minus;</button>
+    <span class="stepper-value" id="stepperVal">12</span>
+    <button class="stepper-btn" data-stepper-inc>+</button>
+  </div>
+  <span class="stepper-label">CHANNEL</span>
+</div>
+```
+
+## Size Variants
+No explicit size variants.
+
+## Material Variants
+- Container: Recessed panel (bg-inset)
+- Buttons: Glossy panel surface (raised within recessed track)
+
+## Theme Behavior
+- Container and buttons adapt via tokens
+- Value color (blue-info) is fixed
+
+## Constraints
+1. Buttons are CIRCULAR (24px, border-radius: 50%) -- not rectangular.
+2. Press feedback MUST be `scale(0.9)`, not `translateY`.
+3. Value display MUST use `--font-mono` for tabular numeric alignment.
+4. Container is RECESSED (bg-inset with inset shadow) -- buttons sit raised within it.
+
+## Accessibility
+- Uses native `<button>` elements for +/-
+- Value display should use `aria-live="polite"` for screen reader updates
+- Keyboard: Enter/Space on buttons, or Arrow keys when value is focused
+- Requires JS to update value on button press

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

@@ -0,0 +1,116 @@
+---
+name: Vertical Fader
+id: fader-v-track
+class: .fader-v-track
+category: sliders
+index: 7
+materials: [chrome, panel]
+sizes: [md]
+interactive: true
+requires_js: true
+canvas: false
+---
+
+# Vertical Fader
+
+## Physical Analog
+**Reference devices**: Mixing console channel faders (SSL, Neve, Mackie), synthesizer ADSR sliders, graphic EQ sliders.
+**Mechanism**: Identical to horizontal fader (linear slide potentiometer), oriented vertically. On mixing consoles, vertical faders represent channel volume/level arranged side by side in a fader bank.
+
+## Geometry
+
+| Property | Value |
+|----------|-------|
+| Track | 10px wide x 140px tall (very narrow and tall) |
+| Thumb | 20px wide x 10px tall (wider than track) |
+| Fill | Green-to-amber gradient (bottom up) |
+| Center groove | 1px vertical line on thumb cap |
+
+## CSS Recipe
+
+### Wrapper
+```css
+.fader-v-wrap { display: flex; flex-direction: column; align-items: center; gap: 6px; }
+```
+
+### Track
+```css
+.fader-v-track {
+  width: 10px; height: 140px; border-radius: 5px;
+  background: var(--bg-inset); border: 1px solid var(--border-subtle);
+  position: relative; box-shadow: var(--shadow-inset);
+}
+```
+
+### Fill
+```css
+.fader-v-fill {
+  position: absolute; bottom: 0; left: 0; width: 100%; border-radius: 4px;
+  background: linear-gradient(0deg, var(--green-on), var(--amber));
+}
+```
+
+### Thumb (Fader Cap)
+```css
+.fader-v-thumb {
+  position: absolute; left: 50%; width: 20px; height: 10px;
+  border-radius: 2px; transform: translate(-50%,-50%);
+  background: linear-gradient(90deg, #555, #888, #555);
+  box-shadow: 0 1px 3px rgba(0,0,0,0.4), inset 0 1px 0 #aaa;
+  cursor: grab; z-index: 2;
+}
+.fader-v-thumb::after {
+  content: ''; position: absolute; left: 50%; top: 3px; bottom: 3px;
+  width: 1px; background: #ccc; transform: translateX(-50%);
+}
+```
+
+### Labels
+```css
+.fader-v-label { font-family: var(--font-ui); font-size: 8px; font-weight: 600; letter-spacing: 1px; color: var(--text-muted); }
+.fader-v-value { font-family: var(--font-display); font-size: 10px; color: var(--amber); }
+```
+
+## HTML Structure
+```html
+<div class="fader-v-wrap">
+  <div class="fader-v-track">
+    <div class="fader-v-fill" style="height:70%"></div>
+    <div class="fader-v-thumb" style="bottom:70%"></div>
+  </div>
+  <span class="fader-v-label">CH 1</span>
+  <span class="fader-v-value">+3</span>
+</div>
+
+<!-- Multiple faders in a bank -->
+<div class="flex-row" style="gap:16px">
+  <div class="fader-v-wrap"><!-- CH 1 --></div>
+  <div class="fader-v-wrap"><!-- CH 2 --></div>
+  <div class="fader-v-wrap"><!-- MASTER --></div>
+</div>
+```
+
+## Size Variants
+No explicit size variants. Fixed at 10x140px track.
+
+## Material Variants
+- Track: Recessed panel
+- Thumb: Triple-stop metallic gradient (`#555, #888, #555`) simulating brushed metal cap
+- Fill: Green-to-amber gradient
+
+## Theme Behavior
+- Track adapts via tokens
+- Thumb metallic gradient is fixed
+- Fill gradient colors are fixed accents
+
+## Constraints
+1. Thumb MUST be wider than track (20px vs 10px) for horizontal finger placement.
+2. Center groove (`::after`) is a vertical line on the thumb, helping engineer feel position.
+3. Fill grows from BOTTOM (`position: absolute; bottom: 0`).
+4. Thumb position uses `bottom` percentage (not `top`).
+5. Track is very narrow (10px) -- mixing console aesthetic.
+
+## Accessibility
+- Add `role="slider"` with `aria-valuenow`, `aria-valuemin`, `aria-valuemax`, `aria-orientation="vertical"`
+- Keyboard: Arrow Up/Down to adjust
+- Requires JS for drag interaction

package/spec/components/sliders/volume-slider.md

@@ -0,0 +1,107 @@
+---
+name: Volume Slider
+id: slider-track
+class: .slider-track
+category: sliders
+index: 1
+materials: [panel, glossy]
+sizes: [md]
+interactive: true
+requires_js: true
+canvas: false
+---
+
+# Volume Slider
+
+## Physical Analog
+**Reference devices**: iPod touch volume bar, iPhone media volume slider, Creative Zen player.
+**Mechanism**: Linear potentiometer adapted for touch-screen interaction. Fill color shows "active" portion (resistance before wiper), empty portion shows remaining range.
+
+## Geometry
+
+| Property | Value |
+|----------|-------|
+| Track | 100% width x 6px height, recessed |
+| Thumb | 16px diameter circle |
+| Fill | Blue-to-green gradient |
+| Container width | 160px |
+
+## CSS Recipe
+
+### Wrapper
+```css
+.slider-wrap { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 160px; }
+```
+
+### Track
+```css
+.slider-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
+.slider-fill {
+  position: absolute; top: 0; left: 0; height: 100%; border-radius: 2px;
+  background: linear-gradient(90deg, var(--blue-info), var(--green-on));
+  transition: width 0.1s var(--ease-out);
+}
+```
+
+### Thumb
+```css
+.slider-thumb {
+  position: absolute; top: 50%; width: 16px; height: 16px;
+  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;
+}
+```
+
+### Labels
+```css
+.slider-label { font-family: var(--font-ui); font-size: 10px; font-weight: 500; color: var(--text-muted); letter-spacing: 1px; }
+.slider-value { font-family: var(--font-display); font-size: 11px; color: var(--blue-info); letter-spacing: 1px; }
+```
+
+## HTML Structure
+```html
+<div class="slider-wrap">
+  <div class="slider-track">
+    <div class="slider-fill" style="width:60%"></div>
+    <div class="slider-thumb" style="left:60%"></div>
+  </div>
+  <div style="display:flex;justify-content:space-between;width:100%">
+    <span class="slider-label">VOL</span>
+    <span class="slider-value">60</span>
+  </div>
+</div>
+```
+
+## Size Variants
+No explicit size variants. Track height is fixed at 6px.
+
+## Material Variants
+- Track: Recessed panel
+- Thumb: Glossy panel surface with specular highlight
+- Fill: Blue-to-green gradient
+
+## Theme Behavior
+- Track uses `--bg-inset` and `--shadow-inset` (adapt per theme)
+- Thumb uses surface tokens
+- Fill gradient colors are fixed (accent colors)
+
+## Constraints
+1. Track MUST be recessed (inset shadow + bg-inset).
+2. Fill transition MUST use `--ease-out` for smooth deceleration.
+3. Thumb MUST use `transform: translate(-50%, -50%)` for center positioning.
+4. Fill and thumb position are set via inline `style` and updated by JS.
+
+## Accessibility
+- Add `role="slider"` with `aria-valuenow`, `aria-valuemin`, `aria-valuemax`, `aria-label`
+- Keyboard: Arrow Left/Right to adjust
+- Requires JS for drag interaction

package/spec/components/toggles/dip-switch.md

@@ -0,0 +1,100 @@
+---
+name: DIP Switch
+id: dip-switch
+class: .dip-switch
+category: toggles
+index: 5
+materials: [panel, chrome]
+sizes: [md]
+interactive: true
+requires_js: true
+canvas: false
+---
+
+# DIP Switch
+
+## Physical Analog
+**Reference devices**: PCB DIP switch banks on synthesizers (Roland TB-303, Korg MS-20), audio equipment, and network hardware.
+**Mechanism**: Dual In-line Package switches -- tiny SPST slide switches arrayed in a plastic housing at 2.54mm pitch. Each switch has a detented two-position action. Lever slides vertically (up = ON, down = OFF). Tiny leaf spring provides detent and contact force.
+
+## Geometry
+
+| Property | Value |
+|----------|-------|
+| Individual switch | 18x30px |
+| Lever | 12px tall, slides vertically |
+| Array | 4, 8, or 12 switches in a row at 4px gap |
+| Housing | Black molded nylon (bg-inset) |
+| Lever material | Polished metal (metallic gradient) |
+
+## CSS Recipe
+
+### Row Container (PCB Housing)
+```css
+.dip-row { display: flex; gap: 4px; padding: 6px 8px; background: var(--bg-inset); border-radius: var(--radius-sm); border: 1px solid var(--border-subtle); }
+```
+
+### Individual Switch Housing
+```css
+.dip-switch {
+  width: 18px; height: 30px; border-radius: 3px;
+  background: var(--bg-surface); border: 1px solid var(--border-mid);
+  position: relative; cursor: pointer;
+  box-shadow: inset 0 1px 0 var(--glossy-hi);
+}
+```
+
+### Lever
+```css
+.dip-lever {
+  position: absolute; left: 3px; right: 3px; height: 12px;
+  border-radius: 2px; background: linear-gradient(180deg, #888, #555);
+  transition: top 0.12s var(--snap-fast); top: 14px;
+  box-shadow: 0 1px 2px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.3);
+}
+```
+
+### ON State
+```css
+.dip-switch.on .dip-lever { top: 3px; background: linear-gradient(180deg, var(--green-hi), var(--green-on)); }
+```
+
+## HTML Structure
+```html
+<div class="dip-row">
+  <div class="dip-switch on" data-dip><div class="dip-lever"></div></div>
+  <div class="dip-switch" data-dip><div class="dip-lever"></div></div>
+  <div class="dip-switch on" data-dip><div class="dip-lever"></div></div>
+  <div class="dip-switch" data-dip><div class="dip-lever"></div></div>
+  <div class="dip-switch on" data-dip><div class="dip-lever"></div></div>
+  <div class="dip-switch" data-dip><div class="dip-lever"></div></div>
+  <div class="dip-switch" data-dip><div class="dip-lever"></div></div>
+  <div class="dip-switch on" data-dip><div class="dip-lever"></div></div>
+</div>
+```
+
+## Size Variants
+No explicit size variants. Fixed dimensions replicate real DIP switch proportions.
+
+## Material Variants
+- Housing: Panel surface
+- Lever OFF: Metallic gradient (`#888` to `#555`)
+- Lever ON: Green gradient (green-hi to green-on)
+- Row container: PCB board (bg-inset)
+
+## Theme Behavior
+- Surface colors swap via tokens for housing and container
+- Metallic lever gradient is fixed (metal is metal)
+- Green ON state is fixed
+
+## Constraints
+1. Lever MUST slide vertically: `top: 14px` (OFF/down) to `top: 3px` (ON/up).
+2. Lever transition MUST use `--snap-fast` at 0.12s for detent snap feel.
+3. Each switch operates independently (NOT mutually exclusive like segmented control).
+4. Row container MUST use `bg-inset` to represent the PCB mounting board.
+5. Lever MUST have metallic gradient to represent polished metal contact.
+
+## Accessibility
+- Add `tabindex="0"` and `role="switch"` with `aria-checked` on each `.dip-switch`
+- Keyboard: Space to toggle individual switch
+- Requires JS to toggle `.on` class on each switch independently

package/spec/components/toggles/led-checkbox.md

@@ -0,0 +1,108 @@
+---
+name: LED Checkbox
+id: led-checkbox
+class: .led-checkbox
+category: toggles
+index: 6
+materials: [panel, phosphor]
+sizes: [md]
+interactive: true
+requires_js: true
+canvas: false
+---
+
+# LED Checkbox
+
+## Physical Analog
+**Reference devices**: Audio mixer channel solo/mute indicators, camera menu checkbox items, synthesizer parameter enable LEDs.
+**Mechanism**: PCB-mounted LED indicators with integrated tactile switches. On mixing desks, small square LEDs (3mm x 3mm) double as buttons -- pressing the LED toggles the function. Standard through-hole or SMD LED behind translucent diffuser cap.
+
+## Geometry
+
+| Property | Value |
+|----------|-------|
+| Checkbox box | 18x18px |
+| Check mark (LED) | 8x8px |
+| Border-radius | 3px (box), 2px (mark) |
+| Gap to label | 8px |
+
+## CSS Recipe
+
+### Container
+```css
+.led-checkbox {
+  display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none;
+}
+```
+
+### Checkbox Box (Diffuser Cap)
+```css
+.led-check-box {
+  width: 18px; height: 18px; border-radius: 3px;
+  background: var(--bg-inset); border: 1px solid var(--border-mid);
+  display: flex; align-items: center; justify-content: center;
+  box-shadow: inset 0 1px 3px rgba(0,0,0,0.4);
+  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
+}
+```
+
+### Checked State
+```css
+.led-check-box.checked {
+  background: rgba(245,166,35,0.15); border-color: var(--amber);
+  box-shadow: inset 0 1px 3px rgba(0,0,0,0.2), 0 0 8px var(--amber-glow);
+}
+```
+
+### Check Mark (LED Element)
+```css
+.led-check-mark {
+  width: 8px; height: 8px; border-radius: 2px;
+  background: transparent; transition: background 0.15s;
+}
+.led-check-box.checked .led-check-mark { background: var(--amber); box-shadow: 0 0 6px var(--amber-glow); }
+```
+
+### Label
+```css
+.led-check-label { font-family: var(--font-ui); font-size: 11px; font-weight: 500; color: var(--text-secondary); letter-spacing: 0.5px; }
+```
+
+## HTML Structure
+```html
+<!-- Checked -->
+<label class="led-checkbox" data-checkbox>
+  <div class="led-check-box checked"><div class="led-check-mark"></div></div>
+  <span class="led-check-label">Face Detection</span>
+</label>
+
+<!-- Unchecked -->
+<label class="led-checkbox" data-checkbox>
+  <div class="led-check-box"><div class="led-check-mark"></div></div>
+  <span class="led-check-label">Eye AF</span>
+</label>
+```
+
+## Size Variants
+No explicit size variants defined.
+
+## Material Variants
+- Box: Recessed cavity (bg-inset with inset shadow) representing diffuser cap
+- Check mark: LED element (transparent when off, glowing amber when checked)
+
+## Theme Behavior
+- Box background, borders swap via tokens
+- Checked state amber glow is fixed across themes
+- Inset shadow opacity reduces in light theme via `--shadow-inset`
+
+## Constraints
+1. Check mark MUST be invisible when unchecked (background: transparent).
+2. Checked state MUST include amber glow on both box AND mark -- simulates LED illumination.
+3. Box inset shadow represents the cavity the LED sits within.
+4. Border changes to amber on checked state to simulate illuminated housing.
+
+## Accessibility
+- Uses `<label>` wrapper for click-to-toggle behavior
+- Add hidden `<input type="checkbox">` for form semantics, or use `role="checkbox"` with `aria-checked`
+- Keyboard: Space to toggle when focused
+- Requires JS to toggle `.checked` class

package/spec/components/toggles/power-toggle.md

@@ -0,0 +1,93 @@
+---
+name: Power Toggle
+id: power-toggle
+class: .power-toggle
+category: toggles
+index: 4
+materials: [chrome, panel]
+sizes: [md]
+interactive: true
+requires_js: true
+canvas: false
+---
+
+# Power Toggle
+
+## Physical Analog
+**Reference devices**: Rack-mount audio equipment power switches, synthesizer on/off, industrial equipment main power.
+**Mechanism**: Heavy-duty slide switch rated for higher current than signal-level switches. Larger than camera toggles, with more substantial detent mechanism. Integrated status LED. Silver-plated contacts rated for 1-3A.
+
+## Geometry
+
+| Property | Value |
+|----------|-------|
+| Track | 72x34px (much larger than standard toggle) |
+| Thumb | 24px diameter |
+| Border-radius | 20px |
+| ON travel | left: 4px to left: 42px |
+
+## CSS Recipe
+
+### Track
+```css
+.power-toggle {
+  width: 72px; height: 34px; border-radius: 20px;
+  position: relative; background: #0b0b0b;
+  border: 1px solid #303030; box-shadow: inset 0 2px 8px rgba(0,0,0,0.8);
+}
+```
+
+### Thumb
+```css
+.power-toggle-thumb {
+  position: absolute; top: 4px; left: 4px;
+  width: 24px; height: 24px; border-radius: 50%;
+  background: linear-gradient(180deg, #666, #2a2a2a);
+  box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.35);
+  transition: left 180ms var(--snap-fast), background 180ms;
+}
+```
+
+### ON State
+```css
+.power-toggle.on { background: #0d1a0d; }
+.power-toggle.on .power-toggle-thumb {
+  left: 42px;
+  background: linear-gradient(180deg, #88ff88, #287128);
+  box-shadow: 0 0 12px var(--green-glow);
+}
+```
+
+## HTML Structure
+```html
+<div class="power-toggle on" data-power-toggle>
+  <div class="power-toggle-thumb"></div>
+</div>
+<span style="font-size:11px;color:var(--green-on);">ONLINE</span>
+```
+
+## Size Variants
+No explicit size variants. Fixed at 72x34px to represent industrial-grade switch.
+
+## Material Variants
+- Track: Deep black recessed surface (nearly black `#0b0b0b`)
+- Thumb OFF: Chrome/metallic gradient
+- Thumb ON: Green gradient with green glow (power indicator LED)
+
+## Theme Behavior
+- Track background is hardcoded dark (`#0b0b0b`) -- industrial power switches are always dark
+- ON state track shifts to dark green `#0d1a0d`
+- Thumb metallic gradient is fixed
+- Green glow on ON state is fixed
+
+## Constraints
+1. Track MUST be 72x34px -- significantly larger than standard toggle to convey "main power" weight.
+2. Inset shadow MUST be `rgba(0,0,0,0.8)` -- deeper recess than standard toggle (0.4).
+3. ON state thumb MUST have prominent green glow (`0 0 12px var(--green-glow)`).
+4. Transition timing is 180ms (longer than toggle's 150ms) for heavier feel.
+5. Thumb MUST be 24px (larger than toggle's 16px and slide-switch's 20px).
+
+## Accessibility
+- Add `tabindex="0"` and `role="switch"` with `aria-checked`
+- Keyboard: Space to toggle
+- Requires JS to toggle `.on` class