@pudge-ui/mcp-server 0.1.0

package/spec/components/indicators/led-dots.md

@@ -0,0 +1,103 @@
+---
+name: LED Dots
+id: led-dots
+class: .led-dot
+category: indicators
+index: 4
+materials: []
+sizes: [default]
+interactive: false
+requires_js: false
+canvas: false
+---
+
+# LED Dots
+
+## Physical Analog
+**Reference devices**: Panel-mounted LED indicators on every piece of electronic equipment from this era.
+**Mechanism**: A through-hole LED (Light Emitting Diode) mounted in a front-panel hole with a clear or diffused lens cap. Standard sizes were 3mm and 5mm diameter. The LED emits light in a specific color determined by the semiconductor material: red (GaAsP), green (GaP), blue (GaN), amber (AlGaInP). The `box-shadow` glow simulates the LED light illuminating the surrounding panel surface. The `.off` state shows the LED's dark body (visible but not illuminated) -- real unlit LEDs appear as a dark gray/brown disc.
+
+## Geometry
+
+| Property | Value |
+|----------|-------|
+| Size | 8x8px (default), 6x6px (in clusters) |
+| Border radius | 50% (circular) |
+| Glow radius | 6px |
+
+## CSS Recipe
+
+### Base (`.led-dot`)
+```css
+.led-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; vertical-align: middle; }
+```
+
+### Color variants
+```css
+.led-dot.green { background: var(--green-on); box-shadow: 0 0 6px var(--green-on); }
+.led-dot.red { background: var(--red-alert); box-shadow: 0 0 6px var(--red-alert); }
+.led-dot.blue { background: var(--blue-info); box-shadow: 0 0 6px var(--blue-info); }
+.led-dot.amber { background: var(--amber); box-shadow: 0 0 6px var(--amber); }
+```
+
+### Off state
+```css
+.led-dot.off { background: var(--text-muted); opacity: 0.3; box-shadow: none; }
+```
+
+### LED Cluster container
+```css
+.led-cluster { display: flex; gap: 6px; padding: 6px 10px; background: var(--bg-inset); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); }
+.led-cluster .led-dot { width: 6px; height: 6px; }
+```
+
+## HTML Structure
+```html
+<!-- Individual LEDs -->
+<div class="led-dot green"></div>
+<div class="led-dot red"></div>
+<div class="led-dot blue"></div>
+<div class="led-dot amber"></div>
+<div class="led-dot off"></div>
+
+<!-- LED Cluster -->
+<div class="led-cluster">
+  <div class="led-dot green"></div>
+  <div class="led-dot green"></div>
+  <div class="led-dot off"></div>
+  <div class="led-dot red"></div>
+</div>
+```
+
+## Size Variants
+- Default: 8x8px
+- In cluster: 6x6px (automatically smaller)
+
+## Material Variants
+
+| Variant | Class | Color | Glow |
+|---------|-------|-------|------|
+| Green | `.led-dot.green` | `--green-on` (#33cc66) | Same color, 6px |
+| Red | `.led-dot.red` | `--red-alert` (#cc2200) | Same color, 6px |
+| Blue | `.led-dot.blue` | `--blue-info` (#4477cc) | Same color, 6px |
+| Amber | `.led-dot.amber` | `--amber` (#f5a623) | Same color, 6px |
+| Off | `.led-dot.off` | `--text-muted` at 30% | None |
+
+## Theme Behavior
+- LED colors are constant across themes (accent colors don't change)
+- Off state uses `--text-muted` which swaps between themes
+- Glow effect remains constant (LEDs emit light regardless of ambient)
+
+## Constraints
+1. MUST be perfectly circular (border-radius: 50%)
+2. Active LEDs MUST have matching-color glow at 6px radius
+3. Off LEDs MUST be visible (30% opacity muted) -- not hidden
+4. Off LEDs MUST NOT have glow (box-shadow: none)
+5. Glow uses the LED color directly (not a glow token with reduced opacity)
+6. MUST use `vertical-align: middle` for inline alignment with text
+
+## Accessibility
+- Include `aria-label` describing the LED state and meaning
+- Example: `aria-label="Channel 1: active"` for a green LED
+- Color alone must not be the only indicator -- provide context via adjacent labels
+- Off LEDs should have `aria-label` indicating the off state

package/spec/components/indicators/mode-badge.md

@@ -0,0 +1,97 @@
+---
+name: Mode Badge
+id: mode-badge
+class: .mode-badge
+category: indicators
+index: 5
+materials: [glossy-polycarbonate]
+sizes: [default]
+interactive: false
+requires_js: false
+canvas: false
+---
+
+# Mode Badge
+
+## Physical Analog
+**Reference devices**: Camera top LCD mode indicator (M/A/S/P), Sony picture profile selector.
+**Mechanism**: The large mode letter (M, A, S, P) is derived from the markings on the camera mode dial. When displayed as a badge rather than a dial position, it indicates the current setting in a status context.
+
+## Geometry
+
+| Property | Value |
+|----------|-------|
+| Padding | 6px 14px |
+| Border radius | `--radius-md` (8px) |
+| Mode letter font size | 28px |
+| Mode key font size | 7px |
+| Mode sub font size | 10px |
+| Element gap | 6px |
+
+## CSS Recipe
+
+### Container (`.mode-badge`)
+```css
+.mode-badge {
+  display: inline-flex; align-items: center; gap: 6px;
+  background: var(--bg-panel); border: 1px solid var(--border-mid);
+  border-radius: var(--radius-md); padding: 6px 14px;
+  box-shadow: 0 2px 0 var(--border-deep), inset 0 1px 0 var(--border-hi);
+}
+```
+
+### Mode letter (`.mode-letter`)
+```css
+.mode-letter { font-family: var(--font-display); font-size: 28px; color: #fff; line-height: 1; }
+```
+
+### Detail container (`.mode-detail`)
+```css
+.mode-detail { display: flex; flex-direction: column; gap: 2px; }
+```
+
+### Key label (`.mode-key`)
+```css
+.mode-key { font-size: 7px; letter-spacing: 2px; color: var(--text-muted); font-family: var(--font-ui); }
+```
+
+### Sub label (`.mode-sub`)
+```css
+.mode-sub { font-size: 10px; color: var(--text-primary); letter-spacing: 1px; font-family: var(--font-ui); font-weight: 500; }
+```
+
+## HTML Structure
+```html
+<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>
+```
+
+## Size Variants
+No size variants defined.
+
+## Material Variants
+No material variants. Uses Tier 2 raised depth model.
+
+## Theme Behavior
+- Background swaps via `--bg-panel`
+- Mode letter stays white (#fff) in both themes for high contrast
+- Key label uses `--text-muted`, sub label uses `--text-primary`
+- Shadow stack adapts via tokens
+
+## Constraints
+1. Mode letter MUST use `--font-display` (Michroma) at 28px
+2. Mode letter MUST be white (#fff) for maximum contrast
+3. MUST use Tier 2 shadow model (2px hard edge + inset highlight)
+4. Key label MUST be 7px with 2px letter-spacing (micro label convention)
+5. Layout MUST be horizontal (letter on left, detail column on right)
+6. MUST NOT be interactive (display-only indicator)
+
+## Accessibility
+- Use `role="status"` for dynamic mode display
+- Include full description: `aria-label="Mode: Manual (M)"`
+- Ensure sufficient contrast for the 7px key label text

package/spec/components/indicators/profile-badge.md

@@ -0,0 +1,99 @@
+---
+name: Profile Badge
+id: profile-badge
+class: .pp-badge
+category: indicators
+index: 6
+materials: [glossy-polycarbonate]
+sizes: [default]
+interactive: true
+requires_js: true
+canvas: false
+---
+
+# Profile Badge
+
+## Physical Analog
+**Reference devices**: Sony cameras display the active picture profile (PP1-PP11, S-Log3, HLG) as a small rectangular indicator.
+**Mechanism**: Compact key-value pair display. This component replicates the small rectangular indicator showing the active picture profile on Sony camera displays.
+
+## Geometry
+
+| Property | Value |
+|----------|-------|
+| Padding | 4px 10px |
+| Border radius | `--radius-sm` (4px) |
+| Key font size | 7px |
+| Value font size | 12px |
+| Gap | 1px |
+
+## CSS Recipe
+
+### Container (`.pp-badge`)
+```css
+.pp-badge {
+  display: inline-flex; flex-direction: column; align-items: center;
+  background: var(--bg-panel); border: 1px solid var(--border-mid);
+  border-radius: var(--radius-sm); padding: 4px 10px;
+  box-shadow: 0 2px 0 var(--border-deep), inset 0 1px 0 var(--border-hi);
+  gap: 1px; cursor: pointer; transition: background 0.1s;
+}
+```
+
+### Hover
+```css
+.pp-badge:hover { background: var(--bg-surface); }
+```
+
+### Key label (`.pp-key`)
+```css
+.pp-key { font-size: 7px; letter-spacing: 2px; color: var(--text-muted); font-family: var(--font-ui); }
+```
+
+### Value (`.pp-val`)
+```css
+.pp-val { font-family: var(--font-mono); font-size: 12px; color: var(--text-primary); letter-spacing: 1px; }
+```
+
+### Active state
+```css
+.pp-badge.active-pp .pp-val { color: var(--amber); }
+```
+
+## HTML Structure
+```html
+<div class="pp-badge active-pp">
+  <span class="pp-key">PP</span>
+  <span class="pp-val">S-Log3</span>
+</div>
+<div class="pp-badge">
+  <span class="pp-key">PP</span>
+  <span class="pp-val">HLG</span>
+</div>
+```
+
+## Size Variants
+No size variants defined.
+
+## Material Variants
+No material variants. Uses Tier 2 raised depth model.
+
+## Theme Behavior
+- Background swaps via `--bg-panel`
+- Hover background uses `--bg-surface`
+- Active value uses `--amber` (constant across themes)
+- Shadow stack adapts via tokens
+
+## Constraints
+1. Layout MUST be vertical column (key above, value below)
+2. MUST use `--radius-sm` (4px), smaller than mode badge
+3. Key label MUST be 7px with 2px letter-spacing
+4. Value MUST use monospace font (`--font-mono`) for data consistency
+5. Active profile MUST highlight value in amber
+6. MUST be interactive (cursor: pointer, hover state)
+7. Gap between key and value MUST be minimal (1px)
+
+## Accessibility
+- Should have `role="radio"` if part of a selection group, or `role="button"` for standalone
+- Active state: `aria-pressed="true"` or `aria-selected="true"`
+- Include `aria-label` with full description: "Picture Profile: S-Log3 (active)"

package/spec/components/indicators/skeleton.md

@@ -0,0 +1,94 @@
+---
+name: Skeleton Loading
+id: skeleton
+class: .skeleton-wrap
+category: indicators
+index: 8
+materials: []
+sizes: [default]
+interactive: false
+requires_js: false
+canvas: false
+---
+
+# Skeleton Loading
+
+## Physical Analog
+**Reference devices**: Device boot sequences (Palm, iPod, early smartphones showing "loading" bars during startup).
+**Mechanism**: Derived from the boot sequence of embedded devices. During startup, the device shows progressive loading indicators as each subsystem initializes. The pulsing animation (`skeletonPulse`) indicates active processing -- the system is working but content is not yet ready to display.
+
+## Geometry
+
+| Property | Value |
+|----------|-------|
+| Container width | 200px |
+| Container padding | 16px |
+| Line height | 8px (text lines), 28px (block) |
+| Line border-radius | 4px |
+| Line gap | 10px |
+| Pulse animation | 1.5s |
+| Lines 2 width | 70% |
+| Lines 3 width | 50% |
+
+## CSS Recipe
+
+### Container (`.skeleton-wrap`)
+```css
+.skeleton-wrap {
+  width: 200px; padding: 16px; display: flex; flex-direction: column; gap: 10px;
+  background: var(--bg-inset); border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-md);
+}
+```
+
+### Lines (`.skeleton-line`)
+```css
+.skeleton-line {
+  height: 8px; border-radius: 4px; background: var(--bg-surface);
+  animation: skeletonPulse 1.5s ease-in-out infinite;
+}
+.skeleton-line:nth-child(2) { width: 70%; }
+.skeleton-line:nth-child(3) { width: 50%; }
+.skeleton-line:nth-child(4) { height: 28px; }
+```
+
+### Pulse animation
+```css
+@keyframes skeletonPulse { 0%,100%{opacity:0.4} 50%{opacity:0.8} }
+```
+
+## HTML Structure
+```html
+<div class="skeleton-wrap">
+  <div class="skeleton-line"></div>
+  <div class="skeleton-line"></div>
+  <div class="skeleton-line"></div>
+  <div class="skeleton-line"></div>
+</div>
+```
+
+## Size Variants
+No size variants defined.
+
+## Material Variants
+No material variants. Uses recessed inset container with surface-colored lines.
+
+## Theme Behavior
+- Container background uses `--bg-inset` (recessed)
+- Lines use `--bg-surface` (slightly lighter than container)
+- Both adapt automatically via theme tokens
+- Pulse animation opacity range (0.4 to 0.8) is constant
+
+## Constraints
+1. MUST use pulsing opacity animation (0.4 to 0.8 at 1.5s cycle)
+2. Lines MUST vary in width to simulate varied content (100%, 70%, 50%)
+3. Last line SHOULD be taller (28px) to simulate a content block
+4. Container MUST use recessed styling (`--bg-inset`)
+5. Lines MUST use 4px border-radius for rounded appearance
+6. Gap between lines MUST be 10px
+7. Animation MUST use `ease-in-out` for smooth breathing effect
+
+## Accessibility
+- Container should have `role="status"` and `aria-label="Content loading"`
+- Or use `aria-busy="true"` on the parent content region
+- Consider `prefers-reduced-motion` to reduce or stop the pulse animation

package/spec/components/indicators/spinners.md

@@ -0,0 +1,95 @@
+---
+name: Spinners
+id: spinners
+class: .spinner
+category: indicators
+index: 7
+materials: [glossy-polycarbonate, chrome]
+sizes: [default]
+interactive: false
+requires_js: false
+canvas: false
+---
+
+# Spinners
+
+## Physical Analog
+**Reference devices**: Loading indicators on iPod, "please wait" indicators on cameras during write operations.
+**Mechanism**: Two variants. Ring spinner: a circular ring with one segment highlighted, rotating continuously (derived from the spinning hourglass/watch cursor). CD spinner: a disc that spins continuously, resembling a compact disc rotating in a player with center hole and disc texture.
+
+## Geometry
+
+| Property | Value |
+|----------|-------|
+| Ring spinner size | 32x32px |
+| Ring border width | 3px |
+| CD spinner size | 40x40px |
+| CD border width | 2px |
+| CD center hole | 6x6px |
+| CD inner ring | 4px inset |
+
+## CSS Recipe
+
+### Ring Spinner (`.spinner`)
+```css
+.spinner { width: 32px; height: 32px; border-radius: 50%; border: 3px solid var(--border-subtle); border-top-color: var(--blue-info); animation: spin 0.8s linear infinite; }
+```
+
+### CD Spinner (`.cd-spinner`)
+```css
+.cd-spinner {
+  width: 40px; height: 40px; border-radius: 50%;
+  background: linear-gradient(135deg, var(--bg-surface), var(--bg-panel));
+  border: 2px solid var(--border-mid); position: relative;
+  animation: spin 3s linear infinite;
+  box-shadow: inset 0 0 0 4px var(--bg-inset);
+}
+.cd-spinner::after {
+  content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
+  width: 6px; height: 6px; border-radius: 50%; background: var(--text-muted);
+}
+```
+
+### Spin animation
+```css
+@keyframes spin { to{transform:rotate(360deg)} }
+```
+
+## HTML Structure
+```html
+<!-- Ring spinner -->
+<div class="spinner"></div>
+
+<!-- CD spinner -->
+<div class="cd-spinner"></div>
+```
+
+## Size Variants
+No size variants defined.
+
+## Material Variants
+
+| Variant | Class | Analog | Speed |
+|---------|-------|--------|-------|
+| Ring | `.spinner` | Digital loading cursor | 0.8s/revolution |
+| CD | `.cd-spinner` | Compact disc in player | 3s/revolution |
+
+## Theme Behavior
+- Ring spinner: track uses `--border-subtle`, active segment uses `--blue-info`
+- CD spinner: disc surface adapts via `--bg-surface`/`--bg-panel` gradient
+- CD center hole uses `--bg-inset`
+- Both animate continuously with CSS `@keyframes`
+
+## Constraints
+1. Ring spinner MUST rotate at 0.8s/revolution (fast, urgent indicator)
+2. CD spinner MUST rotate at 3s/revolution (slow, leisurely like a real CD)
+3. Ring spinner MUST use `border-top-color` for the active segment
+4. CD spinner MUST include center hole via `::after` pseudo-element
+5. CD spinner MUST include inner ring via `inset 0 0 0 4px` box-shadow
+6. Both MUST use `animation: spin linear infinite` (constant speed, no easing)
+7. MUST use circular shape (border-radius: 50%)
+
+## Accessibility
+- Include `role="status"` and `aria-label="Loading"`
+- Or use `role="progressbar"` with `aria-busy="true"` for indeterminate loading
+- Consider `prefers-reduced-motion` media query to pause or slow animations

package/spec/components/indicators/status-chips.md

@@ -0,0 +1,85 @@
+---
+name: Status Chips
+id: status-chips
+class: .status-chip
+category: indicators
+index: 1
+materials: [glossy-polycarbonate]
+sizes: [default]
+interactive: false
+requires_js: false
+canvas: false
+---
+
+# Status Chips
+
+## Physical Analog
+**Reference devices**: Camera status indicators (REC, CONNECTED, GPS), iPod genre/playlist tags.
+**Mechanism**: Small labeled indicator lights on equipment front panels. Status chips are read-only indicators -- they reflect system state (CONNECTED = amber border glow, STANDBY = dim). The pill shape with colored border comes from the physical form factor of panel-mounted indicator LEDs with silk-screened labels.
+
+## Geometry
+
+| Property | Value |
+|----------|-------|
+| Padding | 4px 10px |
+| Border radius | `--radius-sm` (4px) |
+| Font size | 9px |
+| Letter spacing | 2px |
+
+## CSS Recipe
+
+### Default state
+```css
+.status-chip {
+  padding: 4px 10px; border-radius: var(--radius-sm);
+  font-family: var(--font-ui); font-size: 9px; font-weight: 500;
+  letter-spacing: 2px; background: var(--bg-panel);
+  border: 1px solid var(--border-mid); color: var(--text-muted);
+  transition: all 0.12s;
+}
+```
+
+### Active state
+```css
+.status-chip.active { color: var(--amber); border-color: var(--amber-dim); box-shadow: 0 0 8px var(--amber-glow); }
+```
+
+### Row container
+```css
+.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
+```
+
+## HTML Structure
+```html
+<div class="chip-row">
+  <div class="status-chip active">CONNECTED</div>
+  <div class="status-chip">STANDBY</div>
+  <div class="status-chip active">REC</div>
+  <div class="status-chip">REMOTE</div>
+</div>
+```
+
+## Size Variants
+No size variants defined. Single small size.
+
+## Material Variants
+No material variants. Uses Tier 1 (flush) depth model.
+
+## Theme Behavior
+- Background swaps via `--bg-panel`
+- Border swaps via `--border-mid`
+- Inactive text uses `--text-muted`
+- Active chip always uses amber with amber glow (constant across themes)
+
+## Constraints
+1. MUST be read-only (no interactive states like hover/click)
+2. Active state MUST use amber color with amber-dim border AND amber glow shadow
+3. Glow radius MUST be 8px (active indicator standard)
+4. MUST use `--radius-sm` (4px), not pill shape (status chips are rectangular)
+5. Letter spacing MUST be 2px (equipment label convention)
+6. Font size MUST be 9px (small indicator label)
+
+## Accessibility
+- Use `role="status"` for dynamic status indicators
+- Include `aria-label` with expanded status description if abbreviation is used
+- Active/inactive state should be conveyed via `aria-current` or similar

package/spec/components/indicators/transport-controls.md

@@ -0,0 +1,114 @@
+---
+name: Transport Controls
+id: transport-controls
+class: .transport
+category: indicators
+index: 10
+materials: [glossy-polycarbonate]
+sizes: [default]
+interactive: true
+requires_js: true
+canvas: false
+---
+
+# Transport Controls
+
+## Physical Analog
+**Reference devices**: iPod transport bar, Sony Walkman controls, MiniDisc player controls, CD player front panel.
+**Mechanism**: The tape/disc transport mechanism controls -- the most standardized icon set in consumer electronics. Skip backward, rewind, play, fast forward, skip forward. The play button is visually distinct (larger, blue background) because it is the primary transport action. On real devices, the play button often had a different color cap or a larger physical button.
+
+## Geometry
+
+| Property | Value |
+|----------|-------|
+| Button size | 32x32px (standard), 36x36px (play) |
+| Button gap | 6px |
+| Container padding | 4px |
+| Container border-radius | `--radius-pill` (100px) |
+| Bottom shadow | 2px |
+| Icon font size | 12px (standard), 14px (play) |
+
+## CSS Recipe
+
+### Wrapper (`.transport-wrap`)
+```css
+.transport-wrap { display: flex; flex-direction: column; align-items: center; gap: 8px; }
+```
+
+### Container (`.transport`)
+```css
+.transport {
+  display: flex; align-items: center; gap: 6px;
+  background: var(--bg-raised); border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-pill); padding: 4px;
+  box-shadow: 0 2px 0 var(--border-deep);
+}
+```
+
+### Standard button (`.transport-btn`)
+```css
+.transport-btn {
+  width: 32px; height: 32px; 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), inset 0 1px 0 var(--glossy-hi);
+  color: var(--text-primary); font-size: 12px;
+  transition: transform 0.07s var(--snap-fast);
+}
+```
+
+### Button press
+```css
+.transport-btn:active { transform: scale(0.92); box-shadow: 0 1px 0 rgba(0,0,0,0.2); }
+```
+
+### Play button (`.transport-btn.play`)
+```css
+.transport-btn.play {
+  width: 36px; height: 36px;
+  background: linear-gradient(155deg, var(--blue-info), #335599);
+  color: #fff; font-size: 14px;
+}
+```
+
+## HTML Structure
+```html
+<div class="transport-wrap">
+  <div class="transport">
+    <button class="transport-btn">&#9198;</button>
+    <button class="transport-btn">&#9664;&#9664;</button>
+    <button class="transport-btn play">&#9654;</button>
+    <button class="transport-btn">&#9654;&#9654;</button>
+    <button class="transport-btn">&#9197;</button>
+  </div>
+  <span style="font-family:var(--font-ui);font-size:9px;font-weight:500;color:var(--text-muted);letter-spacing:1px">NOW PLAYING</span>
+</div>
+```
+
+## Size Variants
+No size variants defined.
+
+## Material Variants
+- Standard buttons: glossy polycarbonate (surface-to-panel gradient with glossy highlight)
+- Play button: blue polycarbonate (blue gradient)
+
+## Theme Behavior
+- Container background swaps via `--bg-raised`
+- Button gradients swap via surface/panel tokens
+- Play button always uses blue gradient (constant)
+- Shadow depths adapt via tokens
+
+## Constraints
+1. Play button MUST be visually distinct: larger (36px vs 32px), blue background, white icon
+2. All buttons MUST be circular (border-radius: 50%)
+3. Press interaction MUST use `scale(0.92)` not translateY (round buttons scale, don't translate)
+4. Container MUST use pill border-radius (capsule shape, like a Walkman transport bar)
+5. Standard button order: skip-back, rewind, play, fast-forward, skip-forward
+6. Icon set: &#9198; &#9664;&#9664; &#9654; &#9654;&#9654; &#9197;
+7. MUST use `--snap-fast` easing for press animation (mechanical feel)
+
+## Accessibility
+- Each button should have `aria-label` describing the action ("Play", "Pause", "Skip forward", etc.)
+- Play/Pause should toggle between states with updated label
+- Support keyboard operation (Space/Enter to activate)
+- Consider grouping with `role="toolbar"` and `aria-label="Media controls"`