@pudge-ui/mcp-server 0.1.0

package/spec/components/data/media-grid.md

@@ -0,0 +1,98 @@
+---
+name: Media Grid
+id: media-grid
+class: .media-grid
+category: data
+index: 2
+materials: [glossy-polycarbonate]
+sizes: [default]
+interactive: true
+requires_js: true
+canvas: false
+---
+
+# Media Grid
+
+## Physical Analog
+**Reference devices**: Camera image review grid (3x3 or 4x4 thumbnail view), contact sheet from film photography.
+**Mechanism**: Derived from the photographic contact sheet -- a print made by placing developed negatives directly on photographic paper and exposing. The resulting sheet shows small positive images in a grid, each representing one frame from the roll. The selected image (`.selected`) has an amber border glow representing the loupe highlight used to examine a specific frame on a light table.
+
+## Geometry
+
+| Property | Value |
+|----------|-------|
+| Columns | 4 (via `repeat(4, 1fr)`) |
+| Gap | 4px |
+| Thumbnail aspect ratio | 1:1 (square) |
+| Border radius | `--radius-sm` (4px) |
+| Selection glow radius | 8px |
+
+## CSS Recipe
+
+### Grid (`.media-grid`)
+```css
+.media-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
+```
+
+### Thumbnail (`.media-thumb`)
+```css
+.media-thumb {
+  aspect-ratio: 1; background: var(--bg-surface);
+  border: 1px solid var(--border-subtle); border-radius: var(--radius-sm);
+  cursor: pointer; transition: border-color 0.12s;
+  display: flex; align-items: center; justify-content: center;
+  font-size: 10px; color: var(--text-muted);
+}
+```
+
+### Hover
+```css
+.media-thumb:hover { border-color: var(--border-mid); }
+```
+
+### Selected
+```css
+.media-thumb.selected { border-color: var(--amber); box-shadow: 0 0 8px var(--amber-glow); }
+```
+
+## HTML Structure
+```html
+<div class="media-grid" style="width:240px">
+  <div class="media-thumb">01</div>
+  <div class="media-thumb selected">02</div>
+  <div class="media-thumb">03</div>
+  <div class="media-thumb">04</div>
+  <div class="media-thumb">05</div>
+  <div class="media-thumb">06</div>
+  <div class="media-thumb selected">07</div>
+  <div class="media-thumb">08</div>
+</div>
+```
+
+## Size Variants
+No size variants defined. Grid columns and thumbnail size adapt to container width.
+
+## Material Variants
+No material variants. Uses surface background for placeholder thumbnails.
+
+## Theme Behavior
+- Thumbnail backgrounds swap via `--bg-surface`
+- Border colors swap via `--border-subtle`
+- Selected glow always uses amber (constant across themes)
+- Hover border brightens via `--border-mid`
+
+## Constraints
+1. MUST use 4-column grid (standard contact sheet layout)
+2. Thumbnails MUST be square (`aspect-ratio: 1`)
+3. Selected thumbnails MUST have amber border AND amber glow
+4. Glow radius MUST be 8px (standard active indicator glow)
+5. Gap MUST be 4px (tight spacing like a real contact sheet)
+6. Multiple thumbnails CAN be selected simultaneously
+7. MUST use `--radius-sm` for small, film-frame-like corners
+
+## Accessibility
+- Each thumbnail should be a `<button>` or have `role="gridcell"`
+- Grid container should have `role="grid"` with `aria-label="Image gallery"`
+- Selected items: `aria-selected="true"`
+- Support arrow key navigation within the grid
+- Include `aria-label` or `alt` text describing each image

package/spec/components/dials/click-wheel.md

@@ -0,0 +1,115 @@
+---
+name: Click Wheel
+id: clickwheel
+class: .clickwheel
+category: dials
+index: 7
+materials: [panel, glossy]
+sizes: [md]
+interactive: true
+requires_js: true
+canvas: false
+---
+
+# Click Wheel
+
+## Physical Analog
+**Reference devices**: iPod Classic (3rd-5th generation), iPod Mini, iPod Photo.
+**Mechanism**: Capacitive touch sensor with mechanical center button. NOT a physical rotating part -- flat circular capacitive surface detects angular position of finger. "Scroll" generated by tracking angular velocity. Polycarbonate disc bonded to capacitive sensor PCB. Four cardinal positions (Menu, Next, Play/Pause, Previous) double as mechanical dome switch presses.
+
+## Geometry
+
+| Property | Value |
+|----------|-------|
+| Outer diameter | 150px (46mm real) |
+| Touch ring width | ~12mm annular region |
+| Center button | inset 36px from all sides |
+| Cardinal buttons | 4 positions at N/S/E/W |
+| Surface | Smooth satin finish |
+
+## CSS Recipe
+
+### Wrapper
+```css
+.clickwheel-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; }
+```
+
+### Wheel Body
+```css
+.clickwheel {
+  width: 150px; height: 150px; border-radius: 50%;
+  background: linear-gradient(145deg, #3a3835, #1c1a18);
+  box-shadow: 0 4px 0 var(--border-deep), 0 8px 24px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.1);
+  position: relative; cursor: pointer;
+}
+[data-theme="light"] .clickwheel { background: linear-gradient(145deg, #e0ded8, #c8c6c0); }
+```
+
+### Center Select Button
+```css
+.clickwheel-center {
+  position: absolute; inset: 36px; border-radius: 50%;
+  background: linear-gradient(145deg, var(--bg-surface), var(--bg-panel));
+  border: 1px solid var(--border-deep);
+  box-shadow: inset 0 1px 0 var(--glossy-hi), 0 2px 4px rgba(0,0,0,0.3);
+  display: flex; align-items: center; justify-content: center;
+  cursor: pointer; transition: transform 0.1s var(--snap-fast); z-index: 3;
+}
+.clickwheel-center:active { transform: scale(0.94); }
+.clickwheel-center span { font-family: var(--font-display); font-size: 8px; color: var(--blue-info); letter-spacing: 1px; }
+```
+
+### Cardinal Direction Buttons
+```css
+.clickwheel-btn {
+  position: absolute; border: none; background: transparent;
+  cursor: pointer; display: flex; align-items: center; justify-content: center;
+  font-family: var(--font-ui); font-size: 8px; font-weight: 600;
+  letter-spacing: 1px; color: var(--text-muted); transition: color 0.1s; z-index: 3;
+}
+.clickwheel-btn:hover { color: var(--text-primary); }
+.clickwheel-btn.menu { top: 16px; left: 50%; transform: translateX(-50%); }
+.clickwheel-btn.prev { left: 16px; top: 50%; transform: translateY(-50%); }
+.clickwheel-btn.next { right: 16px; top: 50%; transform: translateY(-50%); }
+.clickwheel-btn.playpause { bottom: 16px; left: 50%; transform: translateX(-50%); }
+```
+
+## HTML Structure
+```html
+<div class="clickwheel-wrap">
+  <div class="clickwheel">
+    <button class="clickwheel-btn menu">MENU</button>
+    <button class="clickwheel-btn prev">&#9664;&#9664;</button>
+    <button class="clickwheel-btn next">&#9654;&#9654;</button>
+    <button class="clickwheel-btn playpause">&#9654;&#10073;&#10073;</button>
+    <div class="clickwheel-center"><span>SELECT</span></div>
+  </div>
+</div>
+```
+
+## Size Variants
+No explicit size variants. Fixed at 150x150px.
+
+## Material Variants
+- Wheel surface: Panel material with subtle domed gradient
+- Center button: Glossy surface with specular highlight
+
+## Theme Behavior
+- Dark: `linear-gradient(145deg, #3a3835, #1c1a18)` wheel body
+- Light: `linear-gradient(145deg, #e0ded8, #c8c6c0)` wheel body
+- Center button uses surface tokens, adapting automatically
+- Shadow intensity reduces in light theme
+
+## Constraints
+1. Center button press feedback MUST be `scale(0.94)` (slight depression).
+2. Shadow stack MUST include Tier 3 pattern: `0 4px 0 border-deep`, `0 8px 24px rgba(0,0,0,0.4)`.
+3. Cardinal buttons are positioned absolutely at N/S/E/W positions.
+4. The annular ring between outer edge and center button IS the touch-sensitive zone.
+5. Center button is slightly recessed below the touch ring surface (`inset 36px`).
+
+## Accessibility
+- Cardinal buttons use native `<button>` elements
+- Center button should have `role="button"` or use `<button>`
+- Keyboard: Tab to navigate between cardinal buttons and center
+- ARIA labels on each cardinal button for direction
+- Requires JS for scroll interaction on the ring

package/spec/components/dials/cylindrical-horizontal.md

@@ -0,0 +1,130 @@
+---
+name: Cylindrical Dial Horizontal
+id: dial-h-body
+class: .dial-h-body
+category: dials
+index: 5
+materials: [panel, brushed-metal, chrome]
+sizes: [md]
+interactive: true
+requires_js: true
+canvas: false
+---
+
+# Cylindrical Dial Horizontal
+
+## Physical Analog
+**Reference devices**: Nikon D850 front/rear command dials, Sony Alpha front dial, Canon EOS main dial (landscape orientation).
+**Mechanism**: Identical encoder mechanism to cylindrical scroll, but oriented horizontally. Main command dial on camera grip, operated by index finger. User rolls barrel forward/backward to change values.
+
+## Geometry
+
+| Property | Value |
+|----------|-------|
+| Barrel | 168x44px (wide and short) |
+| Knurl pattern | Diamond crosshatch (two sets of diagonal grooves at 60-75 degrees) |
+| Top bevel cap | 13px bright-to-transparent gradient |
+| Badge | Centered value display |
+
+## CSS Recipe
+
+### Wrapper
+```css
+.dial-h { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; max-width: 190px; }
+.dial-h-label { font-family: var(--font-ui); font-size: 7px; font-weight: 700; letter-spacing: 2px; color: var(--text-muted); text-transform: uppercase; }
+```
+
+### Body
+```css
+.dial-h-body {
+  width: 168px; height: 44px; border-radius: 6px;
+  position: relative; cursor: ew-resize; user-select: none;
+  background: linear-gradient(180deg, #4a4845, #2a2826);
+  border: 1px solid var(--border-mid);
+  box-shadow: 0 2px 8px rgba(0,0,0,0.3); overflow: hidden;
+}
+[data-theme="light"] .dial-h-body { background: linear-gradient(180deg, #d0cec8, #b0aea8); border-color: #aaa; }
+```
+
+### Diamond Knurl Pattern
+```css
+.dial-h-body .knurl-cross {
+  position: absolute; inset: 0; pointer-events: none;
+  background-image:
+    repeating-linear-gradient(75deg, transparent 0px, transparent 2px, rgba(0,0,0,0.06) 2px, rgba(0,0,0,0.06) 3px, transparent 3px, transparent 6px),
+    repeating-linear-gradient(-75deg, transparent 0px, transparent 2px, rgba(0,0,0,0.06) 2px, rgba(0,0,0,0.06) 3px, transparent 3px, transparent 6px);
+}
+```
+
+### Top Bevel Cap
+```css
+.dial-h-body .dial-cap {
+  position: absolute; top: 0; left: 0; right: 0; height: 13px;
+  background: linear-gradient(180deg, rgba(255,255,255,0.12) 0%, transparent 100%);
+  border-bottom: 1px solid rgba(0,0,0,0.12); pointer-events: none;
+  border-radius: 6px 6px 0 0;
+}
+```
+
+### Value Badge
+```css
+.dial-h-body .dial-badge {
+  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
+  font-family: var(--font-display); font-size: 11px; letter-spacing: 1px;
+  color: var(--text-primary); z-index: 3; pointer-events: none;
+  background: var(--bg-surface); padding: 2px 8px; border-radius: 3px;
+  border: 1px solid var(--border-subtle);
+}
+```
+
+### Material Variants
+```css
+.dial-h-body.variant-silver {
+  background: linear-gradient(180deg, #d8d6d0, #b8b6b0);
+  border-color: #a8a6a0;
+}
+.dial-h-body.variant-chrome {
+  background: linear-gradient(180deg, #5a5855, #3a3835);
+  border-color: #666;
+}
+```
+
+## HTML Structure
+```html
+<div class="dial-h">
+  <div class="dial-h-label">EXPOSURE COMP</div>
+  <div class="dial-h-body">
+    <div class="knurl-cross"></div>
+    <div class="dial-cap"></div>
+    <div class="dial-badge">+0.7</div>
+  </div>
+</div>
+```
+
+## Size Variants
+No explicit size variants. Fixed at 168x44px.
+
+## Material Variants
+
+| Variant | Background | Border |
+|---------|-----------|--------|
+| default | `linear-gradient(180deg, #4a4845, #2a2826)` | `var(--border-mid)` |
+| `.variant-silver` | `linear-gradient(180deg, #d8d6d0, #b8b6b0)` | `#a8a6a0` |
+| `.variant-chrome` | `linear-gradient(180deg, #5a5855, #3a3835)` | `#666` |
+
+## Theme Behavior
+- Dark default: dark metallic gradient
+- Light default: light metallic gradient (`#d0cec8` to `#b0aea8`)
+- Silver and chrome variants are fixed (metal doesn't change with theme)
+- Badge uses surface tokens for adaptive background
+
+## Constraints
+1. Diamond knurl MUST use two overlapping `repeating-linear-gradient` at +75deg and -75deg.
+2. Top bevel cap provides the bright line where barrel enters camera body.
+3. Cursor MUST be `ew-resize` (horizontal scroll interaction).
+4. Badge is centered and positioned above the knurl texture (z-index: 3).
+
+## Accessibility
+- Add `tabindex="0"` and `role="slider"`
+- Keyboard: Arrow Left/Right to adjust value
+- Requires JS for interaction

package/spec/components/dials/cylindrical-scroll.md

@@ -0,0 +1,141 @@
+---
+name: Cylindrical Scroll Dial
+id: dial-cylinder
+class: .dial-cylinder
+category: dials
+index: 4
+materials: [panel, chrome]
+sizes: [md]
+interactive: true
+requires_js: true
+canvas: false
+---
+
+# Cylindrical Scroll Dial
+
+## Physical Analog
+**Reference devices**: Sony Alpha rear command dial (vertical barrel), Nikon sub-command dial, Canon quick control dial.
+**Mechanism**: Incremental encoder packaged as cylindrical barrel rolled with thumb/finger. Textured cylinder partially recessed into camera body. Linear rolling motion on barrel surface, not twisting. Internal mechanism identical to rotary encoder.
+
+## Geometry
+
+| Property | Value |
+|----------|-------|
+| Barrel | 92x110px |
+| Knurl strips | 13px wide on left and right edges |
+| Knurl pattern | Longitudinal grip ribs at 5px pitch |
+| Value ticks | 28px height each |
+| Center bar | 1px amber line at vertical center |
+
+## CSS Recipe
+
+### Wrapper
+```css
+.dial-cyl-wrap { display: flex; flex-direction: column; align-items: center; gap: 6px; }
+.dial-cyl-title { font-size: 8px; letter-spacing: 3px; color: var(--text-muted); text-transform: uppercase; font-family: var(--font-ui); font-weight: 600; }
+```
+
+### Barrel Body
+```css
+.dial-cylinder {
+  width: 92px; height: 110px; background: #1e1e1e;
+  border-radius: var(--radius-sm); border: 1px solid #111;
+  overflow: hidden; position: relative; cursor: ns-resize; user-select: none;
+  box-shadow: inset 10px 0 16px rgba(0,0,0,0.5), inset -10px 0 16px rgba(0,0,0,0.5),
+              0 2px 0 var(--border-deep), inset 0 1px 0 #2a2a2a;
+}
+[data-theme="light"] .dial-cylinder { background: #e0dcd4; box-shadow: inset 10px 0 16px rgba(0,0,0,0.08), inset -10px 0 16px rgba(0,0,0,0.08), 0 2px 0 var(--border-deep); }
+```
+
+### Knurl Grip Strips
+```css
+.dial-knurl {
+  position: absolute; top: 0; bottom: 0; width: 13px; z-index: 3; pointer-events: none;
+  background: repeating-linear-gradient(to bottom, #252525 0px, #252525 2px, #0d0d0d 2px, #0d0d0d 5px);
+  border: 1px solid #0a0a0a;
+}
+[data-theme="light"] .dial-knurl { background: repeating-linear-gradient(to bottom, #ccc 0px, #ccc 2px, #aaa 2px, #aaa 5px); border-color: #999; }
+.dial-knurl.left { left: 0; border-radius: var(--radius-sm) 0 0 var(--radius-sm); box-shadow: inset -1px 0 4px rgba(0,0,0,0.4); }
+.dial-knurl.right { right: 0; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; box-shadow: inset 1px 0 4px rgba(0,0,0,0.4); }
+```
+
+### Inner Value List
+```css
+.dial-inner {
+  position: absolute; width: 100%; display: flex; flex-direction: column;
+  align-items: center; will-change: top;
+}
+.dial-tick {
+  height: 28px; width: 100%; display: flex; align-items: center; justify-content: center;
+  font-family: var(--font-mono); font-size: 13px; font-weight: 400;
+  letter-spacing: 1px; color: var(--text-muted); flex-shrink: 0;
+  transition: color 0.1s, font-size 0.1s; padding: 0 16px;
+}
+.dial-tick.near { color: var(--text-secondary); }
+.dial-tick.active { color: var(--amber); font-size: 15px; font-weight: 500; }
+```
+
+### Center Selection Bar
+```css
+.dial-center-bar {
+  position: absolute; top: calc(50% - 1px); left: 14px; right: 14px;
+  height: 1px; background: var(--amber); opacity: 0.7; z-index: 4;
+  pointer-events: none; box-shadow: 0 0 8px var(--amber-glow);
+}
+```
+
+### Vignette (Top/Bottom Fade)
+```css
+.dial-vignette {
+  position: absolute; inset: 0; z-index: 5; pointer-events: none;
+  background: linear-gradient(to bottom, #1e1e1ef0 0%, transparent 35%, transparent 65%, #1e1e1ef0 100%);
+}
+[data-theme="light"] .dial-vignette { background: linear-gradient(to bottom, #e0dcd4f0 0%, transparent 35%, transparent 65%, #e0dcd4f0 100%); }
+```
+
+## HTML Structure
+```html
+<div class="dial-cyl-wrap">
+  <div class="dial-cyl-title">SHUTTER</div>
+  <div class="dial-cylinder">
+    <div class="dial-knurl left"></div>
+    <div class="dial-knurl right"></div>
+    <div class="dial-inner" style="top: -28px;">
+      <div class="dial-tick">1/30</div>
+      <div class="dial-tick">1/60</div>
+      <div class="dial-tick near">1/125</div>
+      <div class="dial-tick active">1/250</div>
+      <div class="dial-tick near">1/500</div>
+      <div class="dial-tick">1/1000</div>
+      <div class="dial-tick">1/2000</div>
+    </div>
+    <div class="dial-center-bar"></div>
+    <div class="dial-vignette"></div>
+  </div>
+</div>
+```
+
+## Size Variants
+No explicit size variants. Fixed at 92x110px.
+
+## Material Variants
+Default barrel material with knurled grip strips.
+
+## Theme Behavior
+- Dark: `#1e1e1e` barrel, dark knurl pattern, dark vignette
+- Light: `#e0dcd4` barrel, light knurl pattern, light vignette
+- Vignette gradient MUST exactly match barrel background color for seamless fade
+- Side shadow intensity drops from 0.5 to 0.08 in light theme
+
+## Constraints
+1. Curvature illusion DEPENDS on side inset shadows. Without them the barrel looks flat. Shadow intensity MUST be 50%+ opacity in dark theme.
+2. Vignette gradient MUST exactly match cylinder body background color for seamless fade.
+3. Distance-based text hierarchy: `.active` = amber full size, `.near` = secondary, default = muted smaller.
+4. Center bar is a FIXED selection indicator (does not scroll with values).
+5. Values scroll by moving `.dial-inner` `top` property via JS.
+
+## Accessibility
+- Add `tabindex="0"` and `role="slider"` with `aria-valuenow`
+- Keyboard: Arrow Up/Down to scroll values
+- Cursor: `ns-resize` indicates vertical scroll interaction
+- Requires JS for scroll interaction

package/spec/components/dials/cylindrical-vertical.md

@@ -0,0 +1,100 @@
+---
+name: Cylindrical Dial Vertical
+id: dial-v-body
+class: .dial-v-body
+category: dials
+index: 6
+materials: [panel, brushed-metal]
+sizes: [md]
+interactive: true
+requires_js: true
+canvas: false
+---
+
+# Cylindrical Dial Vertical
+
+## Physical Analog
+**Reference devices**: Sony Alpha rear thumb wheel, Fujifilm X-T series rear wheel, some Blackmagic camera controls.
+**Mechanism**: Same encoder mechanism as horizontal cylindrical dial but oriented vertically and operated by thumb. Thinner profile (8-12mm wide physical) to fit comfortably under thumb pad.
+
+## Geometry
+
+| Property | Value |
+|----------|-------|
+| Body | 44x120px (narrow and tall) |
+| Knurl pattern | Diagonal crosshatch at +/-20 degrees |
+| Badge | Centered value display |
+
+## CSS Recipe
+
+### Wrapper
+```css
+.dial-v-wrap { display: flex; flex-direction: column; align-items: center; position: relative; padding-bottom: 22px; }
+.dial-v-label { font-family: var(--font-ui); font-size: 7px; font-weight: 700; letter-spacing: 2px; color: var(--text-muted); text-transform: uppercase; position: absolute; bottom: 0; }
+```
+
+### Body
+```css
+.dial-v-body {
+  width: 44px; height: 120px; border-radius: 6px;
+  position: relative; cursor: ns-resize; user-select: none;
+  background: linear-gradient(90deg, #4a4845, #2a2826);
+  border: 1px solid var(--border-mid);
+  box-shadow: 0 2px 8px rgba(0,0,0,0.3); overflow: hidden;
+}
+[data-theme="light"] .dial-v-body { background: linear-gradient(90deg, #d0cec8, #b0aea8); }
+```
+
+### Knurl Pattern
+```css
+.dial-v-body .knurl-cross {
+  position: absolute; inset: 0; pointer-events: none;
+  background-image:
+    repeating-linear-gradient(20deg, transparent 0px, transparent 2px, rgba(0,0,0,0.06) 2px, rgba(0,0,0,0.06) 3px, transparent 3px, transparent 6px),
+    repeating-linear-gradient(-20deg, transparent 0px, transparent 2px, rgba(0,0,0,0.06) 2px, rgba(0,0,0,0.06) 3px, transparent 3px, transparent 6px);
+}
+```
+
+### Value Badge
+```css
+.dial-v-body .dial-badge {
+  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
+  font-family: var(--font-display); font-size: 10px; color: var(--text-primary);
+  z-index: 3; pointer-events: none;
+  background: var(--bg-surface); padding: 2px 6px; border-radius: 3px;
+  border: 1px solid var(--border-subtle);
+}
+```
+
+## HTML Structure
+```html
+<div class="dial-v-wrap">
+  <div class="dial-v-body">
+    <div class="knurl-cross"></div>
+    <div class="dial-badge">50</div>
+  </div>
+  <div class="dial-v-label">ISO</div>
+</div>
+```
+
+## Size Variants
+No explicit size variants. Fixed at 44x120px.
+
+## Material Variants
+Default metallic surface. No explicit variant classes, but gradient direction is 90deg (horizontal) to simulate curvature of vertical barrel.
+
+## Theme Behavior
+- Dark: `linear-gradient(90deg, #4a4845, #2a2826)` -- gradient runs left-to-right for vertical barrel curvature
+- Light: `linear-gradient(90deg, #d0cec8, #b0aea8)`
+- Badge adapts via surface tokens
+
+## Constraints
+1. Gradient MUST run 90deg (horizontal) -- this creates curvature illusion on a vertical barrel.
+2. Knurl pattern angles are +/-20deg (shallower than horizontal dial's +/-75deg) for vertical orientation.
+3. Cursor MUST be `ns-resize` (vertical scroll interaction).
+4. Label is positioned absolutely at bottom of wrapper.
+
+## Accessibility
+- Add `tabindex="0"` and `role="slider"`
+- Keyboard: Arrow Up/Down to adjust value
+- Requires JS for interaction