@pudge-ui/mcp-server 0.1.0 → 0.2.0

package/spec/spec/components/dials/mode-dial.md

@@ -1,123 +0,0 @@
----
-name: Mode Dial
-id: mode-dial-body
-class: .mode-dial-body
-category: dials
-index: 2
-materials: [panel, chrome]
-sizes: [md]
-interactive: true
-requires_js: true
-canvas: false
----
-
-# Mode Dial
-
-## Physical Analog
-**Reference devices**: Nikon D850 mode dial (P/S/A/M), Canon EOS 5D mode dial, Sony Alpha PASM dial.
-**Mechanism**: Detented rotary selector switch with fixed number of positions (typically 6-12 modes). Mechanically limited to defined arc with hard stops. Wiper contact rotates across circular array of fixed contacts on PCB. More assertive detent than encoder (larger ball bearing, stiffer spring).
-
-## Geometry
-
-| Property | Value |
-|----------|-------|
-| Outer ring | 120x120px, stationary reference with tick marks |
-| Inner rotor | 96x96px, rotating knurled element |
-| Center cap | inset 20px, displays mode letter |
-| Amber notch | 4x18px at top, pointer to selected mode |
-| Detent spacing | 360/N degrees (N = number of modes) |
-
-## CSS Recipe
-
-### Wrapper
-```css
-.mode-dial-wrap { display: flex; flex-direction: column; align-items: center; gap: 8px; }
-```
-
-### Outer Ring (Stationary Reference)
-```css
-.mode-dial-outer {
-  width: 120px; height: 120px; border-radius: 50%;
-  background: #111; border: 2px solid #0a0a0a;
-  box-shadow: 0 4px 0 #080808, 0 6px 12px rgba(0,0,0,0.6);
-  position: relative; display: flex; align-items: center; justify-content: center;
-}
-```
-
-### Rotating Inner Body
-```css
-.mode-dial-body {
-  width: 96px; height: 96px; border-radius: 50%;
-  background: radial-gradient(circle at 38% 32%, #363636, #1a1a1a 70%);
-  border: 2px solid #0a0a0a; position: relative; cursor: pointer;
-  box-shadow: 0 2px 0 #0a0a0a, inset 0 1px 0 #444;
-}
-```
-
-### Position Pointer (Amber Notch)
-```css
-.mode-dial-notch {
-  position: absolute; top: 6px; left: 50%;
-  width: 4px; height: 18px;
-  background: linear-gradient(to bottom, var(--amber), var(--amber-dim));
-  border-radius: 2px; transform: translateX(-50%);
-  box-shadow: 0 0 8px var(--amber-glow);
-  transition: transform 0.35s var(--spring);
-  z-index: 2;
-}
-```
-
-### Center Cap (Mode Display)
-```css
-.mode-dial-center {
-  position: absolute; inset: 20px; border-radius: 50%;
-  background: radial-gradient(circle at 40% 35%, #2e2e2e, #161616);
-  border: 2px solid #111;
-  box-shadow: inset 0 1px 0 #3a3a3a, 0 1px 3px #000;
-  display: flex; flex-direction: column;
-  align-items: center; justify-content: center;
-}
-.mode-dial-label { font-family: var(--font-display); font-size: 13px; color: var(--amber); letter-spacing: 1px; line-height: 1; }
-.mode-dial-sub { font-size: 7px; letter-spacing: 1px; color: var(--text-muted); margin-top: 2px; font-family: var(--font-ui); }
-```
-
-## HTML Structure
-```html
-<div class="mode-dial-wrap">
-  <div class="mode-dial-outer">
-    <div class="mode-dial-body">
-      <div class="mode-dial-notch"></div>
-      <div class="mode-dial-center">
-        <div class="mode-dial-label">M</div>
-        <div class="mode-dial-sub">MANUAL</div>
-      </div>
-    </div>
-  </div>
-</div>
-```
-
-## Size Variants
-No explicit size variants. Fixed at 120px outer / 96px inner.
-
-## Material Variants
-- Outer ring: Dark recessed housing
-- Inner rotor: Lathe-turned surface (radial-gradient with off-center highlight)
-- Center cap: Recessed with sunken gradient
-
-## Theme Behavior
-- Uses hardcoded dark colors (camera mode dials are always dark metal)
-- Amber indicator is fixed
-- May need light theme overrides for outer ring contrast
-
-## Constraints
-1. Notch transition MUST use `--spring` easing at 0.35s -- overshoot mimics spring-loaded detent snap.
-2. Notch is rotated via JS by increments of `360/N` degrees where N = number of modes.
-3. Center cap MUST display the current mode letter (updated via JS).
-4. Outer ring is STATIONARY -- only the inner body and notch rotate.
-5. Off-center highlight at `38% 32%` simulates lathe-turned surface.
-
-## Accessibility
-- Add `tabindex="0"` and `role="listbox"` or custom role
-- Keyboard: Arrow keys to rotate between modes
-- `aria-label` should indicate current mode
-- Requires JS for rotation and mode switching

package/spec/spec/components/dials/radial-knob.md

@@ -1,150 +0,0 @@
----
-name: Radial Knob
-id: radial-knob
-class: .radial-knob
-category: dials
-index: 3
-materials: [rubber, brushed-metal, glossy]
-sizes: [md]
-interactive: true
-requires_js: true
-canvas: false
----
-
-# Radial Knob
-
-## Physical Analog
-**Reference devices**: Technics SL-1200 pitch control, Pioneer DJM mixer EQ knobs, Mackie mixer gain/pan knobs, hi-fi amplifier volume knobs.
-**Mechanism**: Rotary potentiometer with fixed rotation range (270-300 degrees). Carbon film or cermet resistive element with wiper contact. Dead zone at bottom (60-90 degrees). Three material variants: rubber (DJ/studio), brushed aluminum (hi-fi), glossy polycarbonate (consumer).
-
-## Geometry
-
-| Property | Value |
-|----------|-------|
-| Knob body | 80x80px |
-| Rotation range | 270-300 degrees with hard stops |
-| Indicator | 3x12px amber bar, rotates from center |
-| Center cap | 24x24px recessed circle |
-
-## CSS Recipe
-
-### Container
-```css
-.radial-dial { display: flex; flex-direction: column; align-items: center; gap: 12px; }
-```
-
-### Knob Body (Default: Rubber)
-```css
-.radial-knob {
-  width: 80px; height: 80px; border-radius: 50%;
-  position: relative; cursor: grab; user-select: none;
-  background: linear-gradient(145deg, #3a3835, #1a1816);
-  border: 2px solid var(--border-mid);
-  box-shadow: 0 4px 12px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.08);
-  display: flex; align-items: center; justify-content: center;
-}
-.radial-knob:active { cursor: grabbing; }
-```
-
-### Indicator
-```css
-.radial-indicator {
-  position: absolute; width: 3px; height: 12px; border-radius: 2px;
-  top: 6px; left: 50%; margin-left: -1.5px;
-  background: var(--amber); transform-origin: 50% 34px;
-  box-shadow: 0 0 6px var(--amber-glow);
-}
-```
-
-### Center Cap
-```css
-.radial-knob .knob-center {
-  width: 24px; height: 24px; border-radius: 50%;
-  background: var(--bg-inset); border: 1px solid var(--border-subtle);
-  box-shadow: inset 0 1px 3px rgba(0,0,0,0.3);
-}
-```
-
-### Metal Variant
-```css
-.radial-knob.variant-metal {
-  background: linear-gradient(145deg, #d8d6d0, #b8b6b0);
-  border-color: #a8a6a0;
-  box-shadow: 0 4px 12px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.5);
-}
-```
-
-### Glossy Variant
-```css
-.radial-knob.variant-glossy {
-  background: linear-gradient(145deg, var(--bg-surface), var(--bg-panel));
-  border-color: var(--border-mid);
-  box-shadow: 0 4px 12px rgba(0,0,0,0.3), inset 0 1px 0 var(--glossy-hi);
-}
-```
-
-### Value Label
-```css
-.radial-value {
-  font-family: var(--font-display); font-size: 12px;
-  color: var(--text-primary); letter-spacing: 1px;
-}
-```
-
-## HTML Structure
-```html
-<!-- Rubber (default) -->
-<div class="radial-dial">
-  <div class="radial-knob">
-    <div class="radial-indicator"></div>
-    <div class="knob-center"></div>
-  </div>
-  <span class="radial-value">RUBBER</span>
-</div>
-
-<!-- Metal variant -->
-<div class="radial-dial">
-  <div class="radial-knob variant-metal">
-    <div class="radial-indicator"></div>
-    <div class="knob-center"></div>
-  </div>
-  <span class="radial-value">METAL</span>
-</div>
-
-<!-- Glossy variant -->
-<div class="radial-dial">
-  <div class="radial-knob variant-glossy">
-    <div class="radial-indicator"></div>
-    <div class="knob-center"></div>
-  </div>
-  <span class="radial-value">GLOSSY</span>
-</div>
-```
-
-## Size Variants
-No explicit size variants. Fixed at 80x80px.
-
-## Material Variants
-
-| Variant | Background | Border | Highlight Opacity |
-|---------|-----------|--------|-------------------|
-| default (rubber) | `linear-gradient(145deg, #3a3835, #1a1816)` | `var(--border-mid)` | 0.08 |
-| `.variant-metal` | `linear-gradient(145deg, #d8d6d0, #b8b6b0)` | `#a8a6a0` | 0.5 |
-| `.variant-glossy` | `linear-gradient(145deg, bg-surface, bg-panel)` | `var(--border-mid)` | 0.14 |
-
-## Theme Behavior
-- Rubber and metal variants use hardcoded gradients
-- Glossy variant adapts via surface tokens
-- Amber indicator is fixed across themes
-
-## Constraints
-1. Indicator MUST rotate via `transform-origin` set to knob center (`50% 34px`).
-2. Three material variants MUST use the Material Recipes from Section 3.
-3. Cursor MUST change from `grab` to `grabbing` on `:active`.
-4. Center cap represents shaft nut / set-screw cover.
-5. Highlight opacity MUST match material: rubber=0.08, metal=0.5, glossy=0.14.
-
-## Accessibility
-- Add `tabindex="0"` and `role="slider"` with `aria-valuenow`, `aria-valuemin`, `aria-valuemax`
-- Keyboard: Arrow keys to rotate
-- Requires JS for rotation interaction

package/spec/spec/components/dials/rotary-encoder.md

@@ -1,118 +0,0 @@
----
-name: Rotary Encoder
-id: rotary
-class: .rotary
-category: dials
-index: 1
-materials: [panel, chrome]
-sizes: [md]
-interactive: true
-requires_js: true
-canvas: false
----
-
-# Rotary Encoder
-
-## Physical Analog
-**Reference devices**: Behringer DJX700 browse knob, Akai MPC2000 data wheel, Roland SP-404 volume, Mackie mixer pan/aux knobs.
-**Mechanism**: Incremental optical or mechanical rotary encoder. Unlike a potentiometer, can rotate infinitely. Slotted disc generates quadrature pulses, typically 16-24 detents per revolution. Ball bearing on spring presses against machined notches for click-click-click feel.
-
-## Geometry
-
-| Property | Value |
-|----------|-------|
-| Knob body | 100x100px, machined aluminum or molded plastic |
-| Knurled edge | 8px ring around body (repeating-conic-gradient) |
-| Center cap | inset 22px from all sides |
-| Indicator notch | 4x20px amber bar at 12 o'clock |
-| Detent per revolution | 16-24 clicks |
-
-## CSS Recipe
-
-### Wrapper
-```css
-.rotary-wrap { display: flex; align-items: center; gap: 24px; }
-```
-
-### Knob Body
-```css
-.rotary {
-  width: 100px; height: 100px; border-radius: 50%;
-  position: relative; cursor: pointer;
-  background: radial-gradient(circle at 35% 30%, #4b4b4b, #1b1b1b 70%);
-  border: 2px solid #0c0c0c;
-  box-shadow: 0 4px 0 #090909, inset 0 1px 0 #666, 0 8px 20px rgba(0,0,0,0.4);
-  transition: transform 220ms var(--snap-fast);
-}
-```
-
-### Hover (One Detent Click)
-```css
-.rotary:hover { transform: rotate(8deg); }
-```
-
-### Knurled Edge Ring
-```css
-.rotary::before {
-  content: ''; position: absolute; inset: -8px; border-radius: 50%;
-  background: repeating-conic-gradient(#202020 0deg 4deg, #0d0d0d 4deg 8deg);
-  z-index: -1;
-}
-```
-
-### Position Indicator Notch
-```css
-.rotary-notch {
-  position: absolute; top: 10px; left: 50%;
-  width: 4px; height: 20px; transform: translateX(-50%);
-  border-radius: 10px;
-  background: linear-gradient(180deg, #ffc14d, #b56b00);
-  box-shadow: 0 0 14px var(--amber-glow);
-}
-```
-
-### Center Cap (Shaft Nut Cover)
-```css
-.rotary-center {
-  position: absolute; inset: 22px; border-radius: 50%;
-  background: radial-gradient(circle at 30% 30%, #2c2c2c, #141414);
-  display: flex; align-items: center; justify-content: center;
-  border: 1px solid #2c2c2c;
-}
-.rotary-text { font-family: var(--font-display); color: var(--amber); font-size: 14px; }
-```
-
-## HTML Structure
-```html
-<div class="rotary-wrap">
-  <div class="rotary">
-    <div class="rotary-notch"></div>
-    <div class="rotary-center"><div class="rotary-text">AUX</div></div>
-  </div>
-</div>
-```
-
-## Size Variants
-No explicit size variants defined. Fixed at 100x100px.
-
-## Material Variants
-- Body: Machined aluminum look (radial-gradient with off-center highlight)
-- Knurled edge: Conic gradient simulating diamond-pattern cut
-- Center cap: Recessed metallic cap
-
-## Theme Behavior
-- Knob body uses hardcoded dark grays (metal is always dark/reflective)
-- Amber indicator and glow are fixed
-- Shadow depths may need lightening in light theme
-
-## Constraints
-1. Off-center highlight (`circle at 35% 30%`) is REQUIRED -- simulates domed/convex top catching light.
-2. Knurled edge MUST use `repeating-conic-gradient` at 4deg intervals.
-3. Hover rotation of 8deg simulates one detent click -- provides immediate feedback.
-4. Position indicator (notch) MUST be at 12 o'clock position, rotated via JS.
-5. Shadow stack MUST include both bottom edge (`0 4px 0`) AND ambient (`0 8px 20px`).
-
-## Accessibility
-- Add `tabindex="0"` and `role="slider"` with `aria-valuenow`, `aria-valuemin`, `aria-valuemax`
-- Keyboard: Arrow keys to rotate (increment/decrement)
-- Requires JS for rotation interaction and value updates

package/spec/spec/components/forms/color-picker.md

@@ -1,99 +0,0 @@
----
-name: Color Picker
-id: color-picker
-class: .color-bar-picker
-category: forms
-index: 5
-materials: [phosphor-screen]
-sizes: [default]
-interactive: true
-requires_js: true
-canvas: false
----
-
-# Color Picker
-
-## Physical Analog
-**Reference devices**: SMPTE/EBU color bar test pattern, broadcast monitor calibration, chroma key color selectors.
-**Mechanism**: Derived from the SMPTE color bar test signal -- a standardized video test pattern used since 1978 to calibrate broadcast monitors. The seven vertical bars (white, yellow, cyan, green, magenta, red, blue) are arranged in a specific order representing decreasing luminance. In this UI, each bar is selectable -- clicking a bar selects that color, shown by a white dot indicator at the bottom.
-
-## Geometry
-
-| Property | Value |
-|----------|-------|
-| Height | 40px |
-| Border radius | `--radius-sm` (4px) |
-| Bars | 7 equal-width columns |
-| Selection dot | 6x6px circle |
-
-## CSS Recipe
-
-### Container (`.color-bar-picker`)
-```css
-.color-bar-picker {
-  display: flex; height: 40px; border-radius: var(--radius-sm);
-  overflow: hidden; border: 1px solid var(--border-subtle);
-  box-shadow: var(--shadow-inset); cursor: pointer;
-}
-```
-
-### Swatch (`.color-bar-swatch`)
-```css
-.color-bar-swatch {
-  flex: 1; transition: opacity 0.15s; position: relative;
-}
-```
-
-### Swatch hover
-```css
-.color-bar-swatch:hover { opacity: 0.8; }
-```
-
-### Swatch selected
-```css
-.color-bar-swatch.selected::after {
-  content: ''; position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%);
-  width: 6px; height: 6px; background: #fff; border-radius: 50%;
-  box-shadow: 0 0 6px rgba(255,255,255,0.5);
-}
-```
-
-## HTML Structure
-```html
-<div class="color-bar-picker" style="width:210px">
-  <div class="color-bar-swatch" style="background:#fff"></div>
-  <div class="color-bar-swatch selected" style="background:#ffff00"></div>
-  <div class="color-bar-swatch" style="background:#00ffff"></div>
-  <div class="color-bar-swatch" style="background:#00ff00"></div>
-  <div class="color-bar-swatch" style="background:#ff00ff"></div>
-  <div class="color-bar-swatch" style="background:#ff0000"></div>
-  <div class="color-bar-swatch" style="background:#0000ff"></div>
-</div>
-```
-
-## Size Variants
-No size variants defined.
-
-## Material Variants
-No material variants. Uses recessed inset styling to simulate a display/monitor cavity.
-
-## Theme Behavior
-- Border swaps via `--border-subtle`
-- Inset shadow adapts by theme
-- SMPTE colors are absolute (do not change with theme)
-- Selection dot is always white with white glow
-
-## Constraints
-1. MUST use SMPTE color bar order: white, yellow, cyan, green, magenta, red, blue
-2. MUST use recessed styling (inset shadow) to simulate a monitor display
-3. Selected bar MUST show a white dot with glow at the bottom
-4. Hover MUST reduce opacity to 0.8 (light leaking through pressed key)
-5. Only ONE bar can be `.selected` at a time
-6. Bars MUST be equal width (`flex: 1`)
-7. MUST use `overflow: hidden` to clip bar corners to the container radius
-
-## Accessibility
-- Container should have `role="radiogroup"` with `aria-label="Color picker"`
-- Each swatch should have `role="radio"` with `aria-checked`
-- Include `aria-label` on each swatch with the color name
-- Support Left/Right arrow key navigation between swatches

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

@@ -1,105 +0,0 @@
----
-name: File Input
-id: file-input
-class: .file-input
-category: forms
-index: 6
-materials: [glossy-polycarbonate]
-sizes: [default]
-interactive: true
-requires_js: true
-canvas: false
----
-
-# File Input
-
-## Physical Analog
-**Reference devices**: CompactFlash card slot on Nikon cameras, SD card slot on Sony cameras, Memory Stick slot on Sony devices.
-**Mechanism**: A spring-loaded card slot with an eject mechanism. The user pushes a memory card into a recessed slot until it clicks (a spring-loaded catch engages). To remove, the user pushes the card again (push-push release mechanism) or presses an adjacent eject button. The dashed border in the UI represents the card slot opening, and the eject button icon represents the physical eject mechanism.
-
-## Geometry
-
-| Property | Value |
-|----------|-------|
-| Width | 220px |
-| Padding | 10px 14px |
-| Border | 2px dashed |
-| Border radius | `--radius-md` (8px) |
-| Icon font size | 18px |
-| Text font size | 10px |
-| Eject button | 24x24px |
-| Element gap | 10px |
-
-## CSS Recipe
-
-### Container (`.file-input`)
-```css
-.file-input {
-  display: flex; align-items: center; gap: 10px;
-  padding: 10px 14px; background: var(--bg-surface);
-  border: 2px dashed var(--border-mid); border-radius: var(--radius-md);
-  cursor: pointer; transition: border-color 0.15s;
-  width: 220px;
-}
-```
-
-### Hover
-```css
-.file-input:hover { border-color: var(--amber); }
-```
-
-### Icon (`.file-input-icon`)
-```css
-.file-input-icon { font-size: 18px; color: var(--text-muted); }
-```
-
-### Text (`.file-input-text`)
-```css
-.file-input-text { font-family: var(--font-ui); font-size: 10px; font-weight: 500; color: var(--text-muted); letter-spacing: 1px; }
-```
-
-### Eject button (`.file-input-eject`)
-```css
-.file-input-eject {
-  margin-left: auto; width: 24px; height: 24px; border-radius: var(--radius-sm);
-  background: var(--bg-panel); border: 1px solid var(--border-subtle);
-  display: flex; align-items: center; justify-content: center;
-  font-size: 10px; color: var(--text-muted); cursor: pointer;
-}
-```
-
-## HTML Structure
-```html
-<div class="file-input">
-  <span class="file-input-icon">&#128190;</span>
-  <span class="file-input-text">INSERT CARD</span>
-  <div class="file-input-eject">&#9166;</div>
-</div>
-```
-
-## Size Variants
-No size variants defined.
-
-## Material Variants
-No material variants. Uses raised surface background with dashed border for the slot opening.
-
-## Theme Behavior
-- Background swaps via `--bg-surface`
-- Border color swaps via `--border-mid`
-- Hover border always uses `--amber`
-- Eject button adapts via panel/subtle tokens
-
-## Constraints
-1. MUST use dashed border (2px) to represent the card slot opening
-2. MUST include eject button on the right side
-3. Hover MUST highlight border in amber (card slot LED indicator)
-4. MUST use `margin-left: auto` on eject to push it to the right
-5. Label text MUST use uppercase with letter-spacing (equipment labeling convention)
-6. Eject button MUST be 24x24px square with `--radius-sm` corners
-
-## Accessibility
-- Should wrap a hidden `<input type="file">` element
-- Container should be labelled with `aria-label="File upload"` or associated label
-- Eject button should have `aria-label="Remove file"` and `role="button"`
-- Support keyboard activation (Enter/Space to open file dialog)
-- After file is selected, display filename in the text area

package/spec/spec/components/forms/search-bar.md

@@ -1,96 +0,0 @@
----
-name: Search Bar
-id: search-bar
-class: .search-bar
-category: forms
-index: 3
-materials: [phosphor-screen]
-sizes: [default]
-interactive: true
-requires_js: false
-canvas: false
----
-
-# Search Bar
-
-## Physical Analog
-**Reference devices**: iPod search (introduced in iPod Photo), camera image search/filter.
-**Mechanism**: A text input combined with a magnifying glass icon, contained in a pill-shaped housing. The pill shape (full border-radius) distinguishes it from standard text inputs and signals a "find/filter" action rather than data entry. Derived from the physical "search" button on remote controls and CD/DVD players.
-
-## Geometry
-
-| Property | Value |
-|----------|-------|
-| Width | 220px |
-| Height | 36px |
-| Padding | 0 12px |
-| Border radius | `--radius-pill` (100px) |
-| Icon-input gap | 8px |
-| Font size | 11px |
-| Icon font size | 14px |
-
-## CSS Recipe
-
-### Container (`.search-bar`)
-```css
-.search-bar {
-  display: flex; align-items: center; gap: 8px;
-  width: 220px; height: 36px; padding: 0 12px;
-  background: var(--bg-inset); border: 1px solid var(--border-mid);
-  border-radius: var(--radius-pill); box-shadow: var(--shadow-inset);
-}
-```
-
-### Icon (`.search-bar-icon`)
-```css
-.search-bar-icon { color: var(--text-muted); font-size: 14px; flex-shrink: 0; }
-```
-
-### Input
-```css
-.search-bar input {
-  flex: 1; background: transparent; border: none; outline: none;
-  color: var(--text-primary); font-family: var(--font-ui); font-size: 11px;
-  font-weight: 500; letter-spacing: 0.5px;
-}
-.search-bar input::placeholder { color: var(--text-muted); }
-```
-
-### Focus
-```css
-.search-bar:focus-within { border-color: var(--amber); }
-```
-
-## HTML Structure
-```html
-<div class="search-bar">
-  <span class="search-bar-icon">&#128269;</span>
-  <input type="text" placeholder="Search files...">
-</div>
-```
-
-## Size Variants
-No size variants defined.
-
-## Material Variants
-No material variants. Uses phosphor screen (recessed) styling with pill shape.
-
-## Theme Behavior
-- Background uses `--bg-inset` (recessed cavity)
-- Inset shadow adapts by theme
-- Focus-within border always amber
-- Icon and placeholder use `--text-muted`
-
-## Constraints
-1. MUST use pill border-radius (`--radius-pill`, 100px) to distinguish from text inputs
-2. MUST include magnifying glass icon on the left
-3. MUST use `focus-within` on the container (not `:focus` on the input) for border highlight
-4. Input inside MUST be transparent background with no border
-5. MUST use recessed styling (inset shadow + `--bg-inset`)
-6. MUST use UI font (`--font-ui`), not monospace, for search queries
-
-## Accessibility
-- Use `role="search"` on the container or wrap in a `<search>` element
-- Input should have `type="search"` for proper semantics
-- Include `aria-label="Search"` if no visible label
-- Support Enter to submit and Escape to clear