@pudge-ui/mcp-server 0.1.0

package/spec/components/navigation/rack-panel.md

@@ -0,0 +1,124 @@
+---
+name: Rack Panel
+id: rack-panel
+class: .rack-panel
+category: navigation
+index: 6
+materials: [brushed-metal]
+sizes: [default]
+interactive: true
+requires_js: false
+canvas: false
+---
+
+# Rack Panel
+
+## Physical Analog
+**Reference devices**: 19-inch rack-mount audio equipment front panels (Mackie, PreSonus, Behringer), modular synthesizer panels.
+**Mechanism**: Derived from the 19-inch equipment rack standard (EIA-310). Audio, broadcast, and server equipment is mounted in standardized racks where each device occupies 1-4 "rack units" (1U = 1.75 inches / 44.45mm). The front panel of each device has controls and indicators arranged in a vertical strip. When multiple devices are stacked, they form a vertical sidebar of labeled modules.
+
+## Geometry
+
+| Property | Value |
+|----------|-------|
+| Width | 200px |
+| Border radius | `--radius-lg` (14px) |
+| Slot padding | 10px 14px |
+| Indicator width | 4px |
+| Indicator height | 20px |
+| Font size | 10px |
+
+## CSS Recipe
+
+### Container (`.rack-panel`)
+```css
+.rack-panel {
+  width: 200px; background: var(--bg-raised);
+  border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-deep); overflow: hidden;
+}
+```
+
+### Slot (`.rack-slot`)
+```css
+.rack-slot {
+  padding: 10px 14px; border-bottom: 1px solid var(--border-subtle);
+  cursor: pointer; transition: background 0.12s;
+  display: flex; align-items: center; gap: 8px;
+}
+.rack-slot:last-child { border-bottom: none; }
+```
+
+### Hover
+```css
+.rack-slot:hover { background: var(--glow-color); }
+```
+
+### Active
+```css
+.rack-slot.active { background: var(--glow-color); }
+```
+
+### Indicator (`.rack-slot-indicator`)
+```css
+.rack-slot-indicator { width: 4px; height: 20px; border-radius: 2px; background: var(--border-mid); flex-shrink: 0; }
+.rack-slot.active .rack-slot-indicator { background: var(--amber); box-shadow: 0 0 6px var(--amber-glow); }
+```
+
+### Label (`.rack-slot-label`)
+```css
+.rack-slot-label { font-family: var(--font-ui); font-size: 10px; font-weight: 500; color: var(--text-secondary); letter-spacing: 1px; }
+.rack-slot.active .rack-slot-label { color: var(--amber); }
+```
+
+## HTML Structure
+```html
+<div class="rack-panel">
+  <div class="rack-slot active">
+    <div class="rack-slot-indicator"></div>
+    <span class="rack-slot-label">CHANNEL 1</span>
+  </div>
+  <div class="rack-slot">
+    <div class="rack-slot-indicator"></div>
+    <span class="rack-slot-label">CHANNEL 2</span>
+  </div>
+  <div class="rack-slot">
+    <div class="rack-slot-indicator"></div>
+    <span class="rack-slot-label">CHANNEL 3</span>
+  </div>
+  <div class="rack-slot">
+    <div class="rack-slot-indicator"></div>
+    <span class="rack-slot-label">AUX SEND</span>
+  </div>
+  <div class="rack-slot">
+    <div class="rack-slot-indicator"></div>
+    <span class="rack-slot-label">MASTER</span>
+  </div>
+</div>
+```
+
+## Size Variants
+No size variants defined.
+
+## Material Variants
+No material variants. Uses standard raised surface with deep shadow.
+
+## Theme Behavior
+- Background swaps via `--bg-raised` token
+- Active indicator always uses `--amber` with amber glow
+- Inactive indicator uses `--border-mid` (adapts to theme)
+- Label color swaps between `--text-secondary` (inactive) and `--amber` (active)
+
+## Constraints
+1. MUST include 4px vertical LED indicator on left edge of each slot
+2. Active channel indicator MUST glow amber (`0 0 6px var(--amber-glow)`)
+3. Inactive indicators MUST show as dim lines (`--border-mid`), not hidden
+4. Slots MUST be separated by `--border-subtle` bottom borders
+5. MUST use fixed 200px width (rack module standard proportion)
+6. MUST NOT use horizontal scroll -- content is vertical-only
+
+## Accessibility
+- Container should have `role="navigation"` or `role="tablist"` with `aria-orientation="vertical"`
+- Slots should have `role="tab"` or be `<button>` elements
+- Active slot: `aria-selected="true"` or `aria-current="true"`
+- Support Up/Down arrow key navigation

package/spec/components/navigation/scrollbar.md

@@ -0,0 +1,97 @@
+---
+name: Custom Scrollbar
+id: scrollbar
+class: .custom-scrollbar-demo
+category: navigation
+index: 10
+materials: []
+sizes: [default]
+interactive: true
+requires_js: false
+canvas: false
+---
+
+# Custom Scrollbar
+
+## Physical Analog
+**Reference devices**: Any scrollable display on equipment with limited real estate -- function lists on synthesizers, parameter pages on digital mixing consoles.
+**Mechanism**: The scrollbar thumb represents the viewport's position within the total content, proportional to the ratio of visible content to total content. Derived from mechanical scroll mechanisms on typewriters and early plotters.
+
+## Geometry
+
+| Property | Value |
+|----------|-------|
+| Container width | 180px |
+| Container height | 120px |
+| Scrollbar width | 8px |
+| Thumb border-radius | 4px |
+| Track border-radius | 4px |
+| Thumb border | 1px solid `--bg-inset` |
+
+## CSS Recipe
+
+### Container (`.custom-scrollbar-demo`)
+```css
+.custom-scrollbar-demo {
+  width: 180px; height: 120px; overflow-y: auto;
+  background: var(--bg-inset); border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-md); padding: 10px;
+  font-family: var(--font-ui); font-size: 10px; color: var(--text-secondary);
+  line-height: 1.8;
+}
+```
+
+### Scrollbar track
+```css
+.custom-scrollbar-demo::-webkit-scrollbar { width: 8px; }
+.custom-scrollbar-demo::-webkit-scrollbar-track { background: var(--bg-inset); border-radius: 4px; }
+```
+
+### Scrollbar thumb
+```css
+.custom-scrollbar-demo::-webkit-scrollbar-thumb {
+  background: var(--border-mid); border-radius: 4px;
+  border: 1px solid var(--bg-inset);
+}
+```
+
+### Thumb hover
+```css
+.custom-scrollbar-demo::-webkit-scrollbar-thumb:hover { background: var(--border-hi); }
+```
+
+## HTML Structure
+```html
+<div class="custom-scrollbar-demo">
+  System log entries from diagnostic output. Channel 1 calibrated.
+  Channel 2 calibrated. Channel 3 online. Master bus active.
+  Signal routing complete. Buffer latency: 12ms. Sample rate: 48kHz.
+  Bit depth: 24-bit. Monitoring enabled. Output routed to main speakers.
+</div>
+```
+
+## Size Variants
+No size variants defined.
+
+## Material Variants
+No material variants. Uses recessed inset styling.
+
+## Theme Behavior
+- Container background uses `--bg-inset` (recessed area)
+- Scrollbar thumb uses `--border-mid` (adapts to theme)
+- Thumb hover uses `--border-hi` (brighter in both themes)
+- Text color adapts via `--text-secondary`
+
+## Constraints
+1. MUST use 8px scrollbar width (narrow but usable)
+2. Thumb MUST have 1px border matching track background for inset effect
+3. Track MUST use recessed background (`--bg-inset`)
+4. MUST use WebKit scrollbar pseudo-elements (CSS-only, no JS needed)
+5. Thumb MUST brighten on hover via `--border-hi`
+6. MUST use 4px border-radius on both track and thumb
+
+## Accessibility
+- Scrollable content should have `tabindex="0"` for keyboard access
+- Use `role="region"` with `aria-label` describing content area
+- Ensure content is reachable via keyboard (Tab, then arrow keys)
+- Consider `scrollbar-width: thin` for Firefox compatibility

package/spec/components/navigation/status-bar.md

@@ -0,0 +1,117 @@
+---
+name: Status Bar
+id: status-bar
+class: .status-bar
+category: navigation
+index: 5
+materials: [glossy-polycarbonate]
+sizes: [default]
+interactive: false
+requires_js: false
+canvas: false
+---
+
+# Status Bar
+
+## Physical Analog
+**Reference devices**: Nokia phone top status bar, iPod top bar, camera viewfinder top information strip.
+**Mechanism**: The top status strip on every feature phone and camera viewfinder. Displays persistent system information: time, signal strength, battery level, recording status, GPS lock, etc. This bar is always visible regardless of the current app or screen. On physical devices, this data is often rendered by a dedicated display controller, separate from the main application processor.
+
+## Geometry
+
+| Property | Value |
+|----------|-------|
+| Padding | 4px 10px |
+| Min width | 200px |
+| Border radius | `--radius-md` (8px) |
+| Time font size | 13px |
+| Status text font size | 9px |
+| Icon gap | 6px |
+
+## CSS Recipe
+
+### Container (`.status-bar`)
+```css
+.status-bar {
+  display: flex; align-items: center; gap: 8px;
+  padding: 4px 10px; background: var(--bg-raised);
+  border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
+  min-width: 200px;
+}
+```
+
+### Sub-elements
+```css
+.sb-time { font-family: var(--font-mono); font-size: 13px; color: var(--text-primary); letter-spacing: 1px; }
+.sb-icons { display: flex; align-items: center; gap: 6px; margin-left: auto; }
+.sb-text { font-family: var(--font-ui); font-size: 9px; font-weight: 500; color: var(--text-muted); }
+```
+
+### Signal bars (used within status bar)
+```css
+.signal-bars { display: flex; align-items: flex-end; gap: 3px; height: 24px; }
+.signal-strength-bar { width: 4px; border-radius: 1px; background: var(--green-on); transition: opacity 0.2s; }
+.signal-strength-bar.off { opacity: 0.15; background: var(--text-muted); }
+```
+
+### Battery icon (used within status bar)
+```css
+.battery-icon { display: inline-flex; align-items: center; gap: 2px; }
+.battery-body {
+  width: 28px; height: 14px; border: 2px solid var(--border-mid);
+  border-radius: 3px; padding: 2px; position: relative;
+}
+.battery-body::after {
+  content: ''; position: absolute; right: -5px; top: 50%; transform: translateY(-50%);
+  width: 3px; height: 6px; background: var(--border-mid); border-radius: 0 1px 1px 0;
+}
+.battery-fill { height: 100%; border-radius: 1px; background: var(--green-on); transition: width 0.3s, background 0.3s; }
+.battery-fill.medium { background: var(--amber); }
+.battery-fill.low { background: var(--red-alert); }
+```
+
+## HTML Structure
+```html
+<div class="status-bar">
+  <span class="sb-time">12:45</span>
+  <span class="sb-text">3G</span>
+  <div class="sb-icons">
+    <div class="signal-bars" style="height:14px">
+      <div class="signal-strength-bar" style="height:4px"></div>
+      <div class="signal-strength-bar" style="height:7px"></div>
+      <div class="signal-strength-bar" style="height:10px"></div>
+      <div class="signal-strength-bar off" style="height:13px"></div>
+    </div>
+    <div class="battery-icon">
+      <div class="battery-body" style="width:20px;height:10px">
+        <div class="battery-fill" style="width:70%"></div>
+      </div>
+    </div>
+  </div>
+</div>
+```
+
+## Size Variants
+No size variants defined.
+
+## Material Variants
+No material variants. Uses standard raised surface.
+
+## Theme Behavior
+- Background swaps via `--bg-raised` token
+- Text colors swap via theme tokens
+- Signal bars and battery use accent colors that remain constant across themes
+- Border colors swap via `--border-subtle` and `--border-mid`
+
+## Constraints
+1. MUST use monospace font for time display (data readout convention)
+2. MUST use `margin-left: auto` on icons container to push icons to the right
+3. Signal bars MUST use `.off` class for inactive bars (not hidden)
+4. Battery fill color MUST change based on level: green (>50%), amber/`.medium` (20-50%), red/`.low` (<20%)
+5. MUST maintain minimum 200px width for readability
+
+## Accessibility
+- Use `role="status"` or `aria-live="polite"` for dynamic values
+- Signal strength should have `aria-label` describing level (e.g., "3 of 5 bars")
+- Battery should have `aria-label` describing percentage
+- Time should use `<time>` element when possible

package/spec/components/navigation/tab-bar.md

@@ -0,0 +1,104 @@
+---
+name: Tab Bar
+id: tab-bar
+class: .tab-bar
+category: navigation
+index: 3
+materials: [glossy-polycarbonate]
+sizes: [default]
+interactive: true
+requires_js: false
+canvas: false
+---
+
+# Tab Bar
+
+## Physical Analog
+**Reference devices**: Nokia Symbian UI tabs, Sony Ericsson media player mode tabs, camera menu section tabs.
+**Mechanism**: Derived from physical tabbed dividers in filing cabinets and ring binders. Each tab represents a category. The active tab appears "in front of" the others (connected to the content below), while inactive tabs appear recessed or separated. In hardware devices, this was often a row of physical buttons with a mode indicator LED above each.
+
+## Geometry
+
+| Property | Value |
+|----------|-------|
+| Layout | Flex row, equal-width items (`flex: 1`) |
+| Border radius | `--radius-md` (8px) |
+| Item padding | 8px 14px |
+| Font size | 10px |
+| Active indicator height | 2px |
+| Bottom shadow | 2px |
+
+## CSS Recipe
+
+### Container (`.tab-bar`)
+```css
+.tab-bar {
+  display: flex; background: var(--bg-raised);
+  border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
+  overflow: hidden; box-shadow: 0 2px 0 var(--border-deep);
+}
+```
+
+### Tab Item (`.tab-item`)
+```css
+.tab-item {
+  flex: 1; padding: 8px 14px; text-align: center;
+  font-family: var(--font-ui); font-size: 10px; font-weight: 500;
+  color: var(--text-muted); letter-spacing: 1px; cursor: pointer;
+  transition: all 0.15s; position: relative; user-select: none;
+  border-right: 1px solid var(--border-subtle); background: transparent;
+  border-top: none; border-bottom: none;
+}
+.tab-item:last-child { border-right: none; }
+```
+
+### Hover
+```css
+.tab-item:hover { color: var(--text-primary); }
+```
+
+### Active
+```css
+.tab-item.active { color: var(--blue-info); background: linear-gradient(180deg, var(--glow-color), transparent); }
+.tab-item.active::after {
+  content: ''; position: absolute; bottom: 0; left: 4px; right: 4px;
+  height: 2px; background: var(--blue-info); border-radius: 1px;
+}
+```
+
+## HTML Structure
+```html
+<div class="tab-bar">
+  <button class="tab-item active">PHOTO</button>
+  <button class="tab-item">VIDEO</button>
+  <button class="tab-item">AUDIO</button>
+  <button class="tab-item">FILES</button>
+</div>
+```
+
+## Size Variants
+No size variants defined. Width is typically set by parent container.
+
+## Material Variants
+No material variants. Uses standard raised surface.
+
+## Theme Behavior
+- Background swaps via `--bg-raised` token
+- Active indicator always uses `--blue-info`
+- Separator borders swap via `--border-subtle`
+- Bottom shadow adjusts via `--border-deep`
+
+## Constraints
+1. MUST use `flex: 1` on items so all tabs are equal width
+2. MUST include 2px blue indicator bar on active tab via `::after`
+3. MUST include vertical separators between tabs (`border-right`)
+4. Only ONE tab can be `.active` at a time (radio behavior)
+5. MUST use `overflow: hidden` on container to clip radius corners
+6. MUST NOT use more than 5-6 tabs (becomes unreadable)
+
+## Accessibility
+- Container should have `role="tablist"`
+- Each tab should be a `<button>` with `role="tab"`
+- Active tab: `aria-selected="true"`
+- Associated panel: `aria-controls="panel-id"` and `role="tabpanel"` on content
+- Support Left/Right arrow key navigation

package/spec/components/overlays/chassis-panel.md

@@ -0,0 +1,94 @@
+---
+name: Chassis Panel
+id: chassis-panel
+class: .chassis-panel
+category: overlays
+index: 2
+materials: [brushed-metal]
+sizes: [default]
+interactive: false
+requires_js: false
+canvas: true
+---
+
+# Chassis Panel
+
+## Physical Analog
+**Reference devices**: Removable/swappable sections of device enclosures -- like a side panel on a PC case or a battery door on a camera.
+**Mechanism**: The removable section of a device chassis. Lighter shadow than Panel (I1) because chassis panels are attached, not freestanding. Used for secondary grouping of controls and indicators.
+
+## Geometry
+
+| Property | Value |
+|----------|-------|
+| Padding | 16px |
+| Border radius | `--radius-lg` (14px) |
+| Header padding-bottom | 8px |
+| Title font size | 10px |
+
+## CSS Recipe
+
+### Container (`.chassis-panel`)
+```css
+.chassis-panel {
+  background: linear-gradient(180deg, var(--bg-raised), var(--bg-surface));
+  border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
+  padding: 16px; box-shadow: var(--shadow-deep);
+}
+```
+
+### Header (`.cpanel-header`)
+```css
+.chassis-panel .cpanel-header {
+  display: flex; justify-content: space-between; align-items: center;
+  margin-bottom: 12px; padding-bottom: 8px;
+  border-bottom: 1px solid var(--border-subtle);
+}
+```
+
+### Title (`.cpanel-title`)
+```css
+.chassis-panel .cpanel-title {
+  font-family: var(--font-ui); font-size: 10px; font-weight: 600;
+  letter-spacing: 2px; color: var(--text-muted); text-transform: uppercase;
+}
+```
+
+## HTML Structure
+```html
+<div class="chassis-panel" style="width:200px">
+  <div class="cpanel-header">
+    <span class="cpanel-title">AUDIO OUT</span>
+    <span style="font-size:8px;color:var(--text-muted);font-family:var(--font-ui)">v2.1</span>
+  </div>
+  <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>
+</div>
+```
+
+## Size Variants
+No size variants defined.
+
+## Material Variants
+No material variants. Uses raised-to-surface gradient (lighter than I1 Panel).
+
+## Theme Behavior
+- Background gradient: `--bg-raised` to `--bg-surface` (adapts to theme)
+- Shadow adapts via `--shadow-deep` token
+- Border and header separator adapt via `--border-subtle`
+
+## Constraints
+1. MUST use lighter gradient than Panel (I1) -- `--bg-raised` to `--bg-surface` instead of `--bg-surface` to `--bg-panel`
+2. MUST use `--shadow-deep` (standard deep shadow, not custom Tier 3)
+3. Header MUST have bottom border separator
+4. Header MUST use flex with `justify-content: space-between` for title + version
+5. Title MUST be uppercase with 2px letter-spacing
+
+## Accessibility
+- Use `role="region"` or `<section>` with `aria-label`
+- Header should describe the panel's function
+- Version info is supplementary (can use `aria-label` on the version span)

package/spec/components/overlays/device-bezel.md

@@ -0,0 +1,83 @@
+---
+name: Device Bezel
+id: device-bezel
+class: .device-bezel
+category: overlays
+index: 4
+materials: [brushed-metal, glass]
+sizes: [default]
+interactive: false
+requires_js: false
+canvas: true
+---
+
+# Device Bezel
+
+## Physical Analog
+**Reference devices**: iPod face bezel, Game Boy front frame, Nokia phone screen bezel.
+**Mechanism**: The frame surrounding a display or touch surface. The bezel is typically a plastic or metal frame that covers the gap between the display glass and the device chassis. The bezel protects the display edges and provides structural support. The double-border styling (outer solid border + inner glossy ring via `inset 0 0 0 1px glossy-hi`) represents the stepped profile of a real bezel: outer wall -> step down -> inner wall -> display surface.
+
+## Geometry
+
+| Property | Value |
+|----------|-------|
+| Padding | 16px |
+| Border | 2px solid |
+| Border radius | `--radius-lg` (14px) |
+
+## CSS Recipe
+
+### Default (`.device-bezel`)
+```css
+.device-bezel {
+  padding: 16px; border-radius: var(--radius-lg);
+  background: linear-gradient(180deg, var(--bg-raised), var(--bg-surface));
+  border: 2px solid var(--border-mid);
+  box-shadow: var(--shadow-deep), inset 0 0 0 1px var(--glossy-hi);
+}
+```
+
+### Translucent variant (`.device-bezel.translucent`)
+```css
+.device-bezel.translucent {
+  background: rgba(255,255,255,0.04); backdrop-filter: blur(8px);
+  border: 1px solid var(--border-subtle);
+}
+```
+
+## HTML Structure
+```html
+<div class="device-bezel" style="width:160px;height:100px;display:flex;align-items:center;justify-content:center">
+  <span style="font-family:var(--font-display);font-size:9px;color:var(--text-muted);letter-spacing:2px">DISPLAY AREA</span>
+</div>
+```
+
+## Size Variants
+No size variants defined. Dimensions set by content or parent.
+
+## Material Variants
+
+| Variant | Class | Description |
+|---------|-------|-------------|
+| Default | `.device-bezel` | Opaque metal/plastic bezel with gradient |
+| Translucent | `.device-bezel.translucent` | Frosted glass bezel with backdrop-filter |
+
+## Theme Behavior
+- Background gradient adapts via theme tokens
+- Border adapts via `--border-mid`
+- Inner glossy ring adapts via `--glossy-hi`
+- Shadow adapts via `--shadow-deep`
+- Translucent variant uses fixed rgba values
+
+## Constraints
+1. MUST use 2px border (thicker than standard 1px to represent the physical bezel lip)
+2. MUST include inner glossy ring (`inset 0 0 0 1px glossy-hi`) for the stepped profile
+3. MUST use `--shadow-deep` for elevation
+4. MUST use `--radius-lg` for device-proportioned corner radius
+5. Translucent variant MUST use `backdrop-filter: blur(8px)` and semi-transparent background
+6. Translucent variant MUST reduce border to 1px and change to `--border-subtle`
+
+## Accessibility
+- Use as a container element with `role="region"` or `<section>`
+- Add `aria-label` describing the display area
+- Content within the bezel should be independently accessible