@pudge-ui/mcp-server 0.1.0

package/spec/components/forms/select.md

@@ -0,0 +1,143 @@
+---
+name: Select / Dropdown
+id: select
+class: .select-wrap
+category: forms
+index: 4
+materials: [glossy-polycarbonate]
+sizes: [default]
+interactive: true
+requires_js: true
+canvas: false
+---
+
+# Select / Dropdown
+
+## Physical Analog
+**Reference devices**: Camera menu item selectors, audio equipment preset browsers.
+**Mechanism**: A mechanical selector switch adapted to digital form. In hardware, this was a rotary switch with labeled positions or a push-button that cycled through options. The UI version shows the currently selected value in a raised trigger element (resembling a button), and reveals all options in a dropdown panel (resembling the iPod menu list G2) when activated. The arrow indicator rotates 180 degrees on open, mimicking the flip direction of a mechanical indicator flag.
+
+## Geometry
+
+| Property | Value |
+|----------|-------|
+| Width | 180px |
+| Trigger height | 36px |
+| Trigger padding | 0 12px |
+| Dropdown margin-top | 4px |
+| Font size | 11px |
+| Option padding | 8px 12px |
+| Arrow font size | 8px |
+
+## CSS Recipe
+
+### Wrapper (`.select-wrap`)
+```css
+.select-wrap { position: relative; width: 180px; }
+```
+
+### Trigger (`.select-trigger`)
+```css
+.select-trigger {
+  width: 100%; height: 36px; padding: 0 12px; display: flex;
+  align-items: center; justify-content: space-between;
+  background: var(--bg-surface); border: 1px solid var(--border-mid);
+  border-radius: var(--radius-md); cursor: pointer;
+  font-family: var(--font-ui); font-size: 11px; font-weight: 500;
+  color: var(--text-primary); letter-spacing: 0.5px;
+  box-shadow: 0 2px 0 var(--border-deep), inset 0 1px 0 var(--glossy-hi);
+  transition: border-color 0.15s;
+}
+```
+
+### Trigger hover
+```css
+.select-trigger:hover { border-color: var(--border-hi); }
+```
+
+### Arrow (`.select-arrow`)
+```css
+.select-arrow { font-size: 8px; color: var(--text-muted); transition: transform 0.2s; }
+```
+
+### Dropdown (`.select-dropdown`)
+```css
+.select-dropdown {
+  position: absolute; top: 100%; left: 0; right: 0; margin-top: 4px;
+  background: var(--bg-raised); border: 1px solid var(--border-mid);
+  border-radius: var(--radius-md); overflow: hidden;
+  box-shadow: 0 4px 16px rgba(0,0,0,0.3); z-index: 10;
+  display: none;
+}
+```
+
+### Open state
+```css
+.select-wrap.open .select-dropdown { display: block; }
+.select-wrap.open .select-arrow { transform: rotate(180deg); }
+```
+
+### Option (`.select-option`)
+```css
+.select-option {
+  padding: 8px 12px; cursor: pointer;
+  font-family: var(--font-ui); font-size: 11px; font-weight: 500;
+  color: var(--text-secondary); transition: background 0.1s;
+}
+```
+
+### Option hover
+```css
+.select-option:hover { background: var(--glow-color); color: var(--text-primary); }
+```
+
+### Option selected
+```css
+.select-option.selected { color: var(--amber); background: rgba(245,166,35,0.06); }
+```
+
+## HTML Structure
+```html
+<div class="select-wrap" id="selectDemo">
+  <div class="select-trigger" onclick="document.getElementById('selectDemo').classList.toggle('open')">
+    <span>JPEG Fine</span>
+    <span class="select-arrow">&#9660;</span>
+  </div>
+  <div class="select-dropdown">
+    <div class="select-option selected">JPEG Fine</div>
+    <div class="select-option">JPEG Normal</div>
+    <div class="select-option">RAW</div>
+    <div class="select-option">RAW + JPEG</div>
+  </div>
+</div>
+```
+
+## Size Variants
+No size variants defined.
+
+## Material Variants
+- Trigger uses raised surface (Tier 2 depth: 2px bottom shadow + glossy highlight)
+- Dropdown uses elevated surface (`--bg-raised` + floating shadow)
+
+## Theme Behavior
+- Trigger background swaps via `--bg-surface`
+- Dropdown background swaps via `--bg-raised`
+- Selected option uses amber with amber-tinted background
+- Shadow depth reduces in light mode
+
+## Constraints
+1. Trigger MUST look like a button (raised shadow, glossy highlight)
+2. Arrow MUST rotate 180 degrees when dropdown opens
+3. Dropdown MUST appear below trigger with 4px gap
+4. Dropdown MUST use z-index: 10 to overlay other content
+5. Selected option MUST be amber with subtle amber background
+6. MUST toggle via `.open` class on `.select-wrap`
+7. Only ONE option can be `.selected` at a time
+
+## Accessibility
+- Trigger should have `role="combobox"` or `role="button"` with `aria-haspopup="listbox"`
+- Trigger should have `aria-expanded="true/false"`
+- Dropdown should have `role="listbox"`
+- Options should have `role="option"` with `aria-selected`
+- Support Up/Down arrow keys, Enter to select, Escape to close
+- Home/End keys should jump to first/last option

package/spec/components/forms/text-input.md

@@ -0,0 +1,114 @@
+---
+name: Text Input
+id: text-input
+class: .text-input
+category: forms
+index: 1
+materials: [phosphor-screen]
+sizes: [sm, default, lg]
+interactive: true
+requires_js: false
+canvas: false
+---
+
+# Text Input
+
+## Physical Analog
+**Reference devices**: LCD text entry fields on pro audio equipment (Tascam, Zoom), camera file naming dialogs, synthesizer patch naming.
+**Mechanism**: Styled as a recessed phosphor display field -- the same cavity used for readout displays, but editable. The text is entered via an external input method. The recessed appearance (inset shadow) communicates that this area accepts input, rather than merely displaying a value. On focus, the border illuminates amber -- simulating an "active channel" indicator LED strip around the input field.
+
+## Geometry
+
+| Property | Value |
+|----------|-------|
+| Default width | 200px |
+| Default height | 36px |
+| Padding | 0 12px |
+| Border radius | `--radius-md` (8px) |
+| Font size | 12px |
+| Font family | `--font-mono` |
+
+## CSS Recipe
+
+### Default state
+```css
+.text-input {
+  width: 200px; height: 36px; padding: 0 12px;
+  background: var(--bg-inset); border: 1px solid var(--border-mid);
+  border-radius: var(--radius-md); color: var(--text-primary);
+  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.5px;
+  box-shadow: var(--shadow-inset); outline: none;
+  transition: border-color 0.15s, box-shadow 0.15s;
+}
+```
+
+### Placeholder
+```css
+.text-input::placeholder { color: var(--text-muted); }
+```
+
+### Focus
+```css
+.text-input:focus { border-color: var(--amber); box-shadow: var(--shadow-inset), 0 0 0 1px var(--amber-dim); }
+```
+
+### Error
+```css
+.text-input.error { border-color: var(--red-alert); }
+```
+
+### Size: Small
+```css
+.text-input.sm { height: 28px; font-size: 10px; width: 140px; }
+```
+
+### Size: Large
+```css
+.text-input.lg { height: 42px; font-size: 14px; width: 260px; }
+```
+
+## HTML Structure
+```html
+<!-- Standard -->
+<input class="text-input" placeholder="Standard input...">
+
+<!-- Small -->
+<input class="text-input sm" placeholder="Small input...">
+
+<!-- Large -->
+<input class="text-input lg" placeholder="Large input...">
+
+<!-- Error state -->
+<input class="text-input error" placeholder="Error state..." value="Invalid">
+```
+
+## Size Variants
+
+| Size | Height | Width | Font Size |
+|------|--------|-------|-----------|
+| `.sm` | 28px | 140px | 10px |
+| default | 36px | 200px | 12px |
+| `.lg` | 42px | 260px | 14px |
+
+## Material Variants
+No material variants. Uses phosphor screen (recessed display cavity) styling.
+
+## Theme Behavior
+- Background uses `--bg-inset` (deep recessed cavity)
+- Inset shadow: dark mode `rgba(0,0,0,0.6)`, light mode `rgba(0,0,0,0.08)`
+- Focus border always amber
+- Error border always red
+
+## Constraints
+1. MUST use recessed styling (inset shadow + `--bg-inset` background)
+2. MUST use monospace font (`--font-mono`) for data entry consistency
+3. Focus state MUST illuminate amber border with amber outer ring glow
+4. Error state MUST use `--red-alert` border color
+5. MUST NOT use outline -- use border-color transition instead
+6. Placeholder text MUST use `--text-muted`
+
+## Accessibility
+- Use native `<input>` element
+- Include associated `<label>` element
+- Error state should include `aria-invalid="true"` and `aria-describedby` pointing to error message
+- Focus ring is provided by amber border glow (no separate outline needed)

package/spec/components/forms/textarea.md

@@ -0,0 +1,85 @@
+---
+name: Textarea
+id: textarea
+class: .text-area
+category: forms
+index: 2
+materials: [phosphor-screen]
+sizes: [default]
+interactive: true
+requires_js: false
+canvas: false
+---
+
+# Textarea
+
+## Physical Analog
+**Reference devices**: LCD text entry fields on pro audio equipment (Tascam, Zoom), camera file naming dialogs, synthesizer patch naming.
+**Mechanism**: Same mechanical principle as the Text Input (H1), but taller to accept multi-line content. Uses the same recessed phosphor screen styling.
+
+## Geometry
+
+| Property | Value |
+|----------|-------|
+| Width | 240px |
+| Height | 80px |
+| Padding | 10px 12px |
+| Border radius | `--radius-md` (8px) |
+| Font size | 12px |
+| Font family | `--font-mono` |
+| Resize | vertical |
+
+## CSS Recipe
+
+### Default state
+```css
+.text-area {
+  width: 240px; height: 80px; padding: 10px 12px;
+  background: var(--bg-inset); border: 1px solid var(--border-mid);
+  border-radius: var(--radius-md); color: var(--text-primary);
+  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.5px;
+  box-shadow: var(--shadow-inset); outline: none; resize: vertical;
+  transition: border-color 0.15s;
+}
+```
+
+### Placeholder
+```css
+.text-area::placeholder { color: var(--text-muted); }
+```
+
+### Focus
+```css
+.text-area:focus { border-color: var(--amber); }
+```
+
+## HTML Structure
+```html
+<textarea class="text-area" placeholder="Multi-line entry..."></textarea>
+```
+
+## Size Variants
+No size variants defined. Height is adjustable via `resize: vertical`.
+
+## Material Variants
+No material variants. Uses phosphor screen (recessed display cavity) styling.
+
+## Theme Behavior
+- Background uses `--bg-inset` (deep recessed cavity)
+- Inset shadow adapts: strong in dark mode, subtle in light mode
+- Focus border always amber
+- Text and placeholder colors swap via theme tokens
+
+## Constraints
+1. MUST use recessed styling (inset shadow + `--bg-inset` background)
+2. MUST use monospace font (`--font-mono`)
+3. Focus state MUST illuminate amber border
+4. MUST allow vertical resize only (`resize: vertical`)
+5. MUST NOT use outline
+6. MUST have top padding (10px) for comfortable text entry
+
+## Accessibility
+- Use native `<textarea>` element
+- Include associated `<label>` element
+- Support standard textarea keyboard behavior (Enter for newline, Tab to move focus)
+- Focus ring is provided by amber border (no separate outline needed)

package/spec/components/indicators/accordion.md

@@ -0,0 +1,137 @@
+---
+name: Accordion
+id: accordion
+class: .accordion
+category: indicators
+index: 9
+materials: [glossy-polycarbonate]
+sizes: [default]
+interactive: true
+requires_js: true
+canvas: false
+---
+
+# Accordion
+
+## Physical Analog
+**Reference devices**: Camera menu subsections, audio equipment nested parameter groups, phone settings menus.
+**Mechanism**: A vertically stacking fold mechanism -- like the bellows of an accordion or a folding display. Each section header is clickable; clicking it expands the body content below (revealing hidden settings) while other sections remain collapsed. The chevron arrow rotates 90 degrees to indicate the expanded state.
+
+## Geometry
+
+| Property | Value |
+|----------|-------|
+| Min width | 200px |
+| Header padding | 8px 12px |
+| Body padding (open) | 4px 12px 10px |
+| Header font size | 10px |
+| Body font size | 9px |
+| Arrow font size | 8px |
+| Max body height | 80px |
+| Expand duration | 0.25s |
+| Easing | `--ease-out` |
+
+## CSS Recipe
+
+### Container (`.accordion`)
+```css
+.accordion {
+  background: var(--bg-raised); border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-md); overflow: hidden; min-width: 200px;
+}
+```
+
+### Item (`.accordion-item`)
+```css
+.accordion-item { border-bottom: 1px solid var(--border-subtle); }
+.accordion-item:last-child { border-bottom: none; }
+```
+
+### Header (`.accordion-header`)
+```css
+.accordion-header {
+  display: flex; align-items: center; justify-content: space-between;
+  padding: 8px 12px; cursor: pointer;
+  font-family: var(--font-ui); font-size: 10px; font-weight: 500;
+  color: var(--text-primary); letter-spacing: 1px; transition: background 0.12s;
+}
+.accordion-header:hover { background: var(--glow-color); }
+```
+
+### Arrow (`.acc-arrow`)
+```css
+.acc-arrow { font-size: 8px; color: var(--text-muted); transition: transform 0.2s; }
+.accordion-item.open .acc-arrow { transform: rotate(90deg); }
+```
+
+### Body (`.accordion-body`)
+```css
+.accordion-body {
+  padding: 0 12px; max-height: 0; overflow: hidden;
+  transition: max-height 0.25s var(--ease-out), padding 0.25s var(--ease-out);
+}
+.accordion-item.open .accordion-body { max-height: 80px; padding: 4px 12px 10px; }
+.accordion-body p { font-family: var(--font-ui); font-size: 9px; color: var(--text-secondary); line-height: 1.6; }
+```
+
+## HTML Structure
+```html
+<div class="accordion">
+  <div class="accordion-item open">
+    <div class="accordion-header" onclick="this.parentElement.classList.toggle('open')">
+      <span>Display Settings</span>
+      <span class="acc-arrow">&#9654;</span>
+    </div>
+    <div class="accordion-body">
+      <p>Brightness, contrast, and color temperature controls for the main display output.</p>
+    </div>
+  </div>
+  <div class="accordion-item">
+    <div class="accordion-header" onclick="this.parentElement.classList.toggle('open')">
+      <span>Audio Settings</span>
+      <span class="acc-arrow">&#9654;</span>
+    </div>
+    <div class="accordion-body">
+      <p>Master volume, channel balance, and output routing configuration.</p>
+    </div>
+  </div>
+  <div class="accordion-item">
+    <div class="accordion-header" onclick="this.parentElement.classList.toggle('open')">
+      <span>Network</span>
+      <span class="acc-arrow">&#9654;</span>
+    </div>
+    <div class="accordion-body">
+      <p>Wi-Fi, Bluetooth, and wired connection settings.</p>
+    </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`
+- Separators swap via `--border-subtle`
+- Hover highlight uses `--glow-color`
+- Body text uses `--text-secondary`
+- Arrow uses `--text-muted`
+
+## Constraints
+1. MUST use `max-height` animation for expand/collapse (not display toggle)
+2. Arrow MUST rotate 90 degrees when open (right-pointing to down-pointing)
+3. Transition MUST use `--ease-out` easing for smooth deceleration
+4. Multiple items CAN be open simultaneously
+5. Items MUST be separated by `--border-subtle` borders
+6. Last item MUST NOT have a bottom border
+7. Body max-height when open is 80px (adjust for content needs)
+
+## Accessibility
+- Use `<details>` and `<summary>` for native behavior, or implement ARIA:
+- Headers: `role="button"`, `aria-expanded="true/false"`, `aria-controls="body-id"`
+- Body: `role="region"`, `aria-labelledby="header-id"`
+- Support Enter/Space to toggle on focused header
+- Support Up/Down to navigate between headers

package/spec/components/indicators/badges.md

@@ -0,0 +1,87 @@
+---
+name: Badges
+id: badges
+class: .badge
+category: indicators
+index: 3
+materials: [glossy-polycarbonate]
+sizes: [default]
+interactive: false
+requires_js: false
+canvas: false
+---
+
+# Badges
+
+## Physical Analog
+**Reference devices**: Software version labels, notification count badges, iOS-style app icon badges.
+**Mechanism**: Small, high-contrast labels. The colored background (blue, green, red, amber) fills the entire pill shape, derived from the colored button caps used on broadcast equipment (red = ON AIR, green = STANDBY, etc.).
+
+## Geometry
+
+| Property | Value |
+|----------|-------|
+| Padding | 2px 8px |
+| Border radius | `--radius-pill` (100px) |
+| Font size | 9px |
+| Font weight | 600 |
+| Letter spacing | 1px |
+
+## CSS Recipe
+
+### Base (`.badge`)
+```css
+.badge {
+  display: inline-flex; align-items: center; gap: 4px;
+  padding: 2px 8px; border-radius: var(--radius-pill);
+  font-family: var(--font-ui); font-size: 9px; font-weight: 600; letter-spacing: 1px;
+}
+```
+
+### Color variants
+```css
+.badge.blue { background: var(--blue-info); color: #fff; }
+.badge.green { background: var(--green-on); color: #fff; }
+.badge.red { background: var(--red-alert); color: #fff; }
+.badge.amber { background: var(--amber); color: #1a1a1a; }
+```
+
+## HTML Structure
+```html
+<span class="badge blue">NEW</span>
+<span class="badge green">ONLINE</span>
+<span class="badge red">LIVE</span>
+<span class="badge amber">PRO</span>
+```
+
+## Size Variants
+No size variants defined.
+
+## Material Variants
+
+| Variant | Class | Background | Text Color |
+|---------|-------|------------|------------|
+| Blue | `.badge.blue` | `--blue-info` | White |
+| Green | `.badge.green` | `--green-on` | White |
+| Red | `.badge.red` | `--red-alert` | White |
+| Amber | `.badge.amber` | `--amber` | Dark (#1a1a1a) |
+
+## Theme Behavior
+- Badge colors are constant across themes (accent colors don't change)
+- Amber badge uses dark text (high contrast against bright amber)
+- Other badges use white text
+
+## Constraints
+1. MUST use pill border-radius (`--radius-pill`)
+2. MUST use filled background (not outlined)
+3. Amber badge MUST use dark text (#1a1a1a) for contrast
+4. All other badges MUST use white text
+5. Font weight MUST be 600 (bold for small size readability)
+6. Padding is minimal (2px 8px) -- badges should be compact
+7. MUST NOT be interactive (badges are read-only labels)
+
+## Accessibility
+- Use `<span>` element (inline, non-interactive)
+- If badge conveys status, include `role="status"` or equivalent
+- Color alone should not be the only indicator -- include descriptive text
+- Ensure sufficient color contrast (all variants meet WCAG AA)

package/spec/components/indicators/chips.md

@@ -0,0 +1,93 @@
+---
+name: Selectable Chips
+id: chips
+class: .chip
+category: indicators
+index: 2
+materials: [glossy-polycarbonate]
+sizes: [default]
+interactive: true
+requires_js: true
+canvas: false
+---
+
+# Selectable Chips
+
+## Physical Analog
+**Reference devices**: iPod genre/playlist tags, camera filter selectors.
+**Mechanism**: Interactive chip elements that the user can toggle to filter or select options. Distinguished from status chips (J1) by being interactive. The pill shape with optional colored dot comes from the physical form factor of panel-mounted indicator LEDs with silk-screened labels.
+
+## Geometry
+
+| Property | Value |
+|----------|-------|
+| Padding | 4px 10px |
+| Border radius | `--radius-pill` (100px) |
+| Font size | 9px |
+| Letter spacing | 1px |
+| Dot size | 6x6px |
+| Dot-label gap | 4px |
+
+## CSS Recipe
+
+### Default state
+```css
+.chip {
+  display: inline-flex; align-items: center; gap: 4px;
+  padding: 4px 10px; border-radius: var(--radius-pill);
+  font-family: var(--font-ui); font-size: 9px; font-weight: 500;
+  letter-spacing: 1px; background: var(--bg-surface);
+  border: 1px solid var(--border-subtle); color: var(--text-secondary);
+  cursor: pointer; transition: all 0.15s;
+}
+```
+
+### Hover
+```css
+.chip:hover { border-color: var(--border-mid); }
+```
+
+### Active (selected)
+```css
+.chip.active { background: rgba(68,119,204,0.1); border-color: var(--blue-info); color: var(--blue-info); }
+```
+
+### Dot indicator (`.chip-dot`)
+```css
+.chip .chip-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
+```
+
+## HTML Structure
+```html
+<div class="flex-row" style="gap:6px">
+  <div class="chip active"><span class="chip-dot" style="background:var(--blue-info)"></span>4K</div>
+  <div class="chip">1080p</div>
+  <div class="chip">720p</div>
+</div>
+```
+
+## Size Variants
+No size variants defined.
+
+## Material Variants
+No material variants. Uses surface background with subtle border.
+
+## Theme Behavior
+- Background swaps via `--bg-surface`
+- Border swaps via `--border-subtle`
+- Active state uses blue with blue-tinted background (constant across themes)
+- Dot color is set inline or via accent color classes
+
+## Constraints
+1. MUST use pill border-radius (`--radius-pill`, 100px) -- distinguishes from status chips
+2. Active state MUST use `--blue-info` (not amber like status chips)
+3. Active background MUST be semi-transparent blue (10% opacity)
+4. MUST be interactive (cursor pointer, hover state)
+5. Optional dot indicator MUST be 6x6px circle
+6. Multiple chips CAN be active simultaneously (multi-select, unlike segmented control)
+
+## Accessibility
+- Each chip should be a `<button>` or have `role="checkbox"` / `role="option"`
+- Active state: `aria-pressed="true"` (for toggle) or `aria-selected="true"` (for selection)
+- If used as filter group, container should have `role="group"` with `aria-label`
+- Support Space/Enter to toggle