Aligns web/index.html with the design language captured in docs/design-system.md
(reference: web/sandbox/studio.html). The whole UI now reads as a single rack
module: corner screws, top/bottom bars, screen recess, and L2 sub-panels.
- Replace dark-blue token palette with the warm-neutral hardware palette
and the shared --metal-specular / --metal-brush / --metal-bevel layers.
- Wrap header + main + footer in a .hardware shell with 4 corner screws.
- Editor lives inside a .screen recess (deep inset shadows, transparent
CodeMirror background, amber cursor + selection).
- Splitter is now a hairline that lights amber on hover/drag.
- Right pane groups widgets by kind into shared sub-panels (.knobs, .faders,
.seq); each piano_roll is its own panel.
- drawKnob ported with all 8 layers (drop shadow, amber arc, dark rim,
metallic disc with concentric brushing + vertical lighting + specular
band + rim light + bevel + inset + engraved notch). DPR-aware canvas.
- Faders use a deep slot track with side ticks and a metallic cap.
- Step seq cells become .led with amber glow + beat dividers.
- Piano roll keys + cells recolored to warm/amber palette.
- Wave widgets render with amber glow on a recessed background.
- RUN/STOP button group with led swap; bottom-bar shows IDLE/RUNNING.
Also: ignore local-only /referencias (heavy reference images, not source).
Adds docs/roadmap.md outlining the 4-track plan (foundation, surface
aesthetics, organizable panel, theming) and ships the first track.
- Resizable splitter between editor and control surface (drag the seam,
double-click to reset). Width persists in localStorage.
- Custom scrollbars (WebKit pseudo-elements + Firefox scrollbar-color)
applied globally so CodeMirror's .cm-scroller, the right pane and the
piano roll all match the dark theme.
- Header separators between transport / gain / info groups.
- Smooth transitions on buttons, range thumbs and surface borders.
- :focus-visible rings using accent-glow color token.
- Pulse animation on the live status dot.
- New design-system tokens for layout (--right-w, --splitter-w),
timing (--t-fast/base/slow), and panel hierarchy (--panel-hi,
--gutter-hi, --divider, --fg-mute, --accent-glow).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Patch language with osc/noise/trig/seq/adsr/filter/delay/poly + voice templates
and inline live values. Two runtimes:
- code_sinth/ — Python engine (numpy + sounddevice). Hot-reload via mtime
watcher. Offline render to WAV. Static-HTTP+WS visualizer (viz/) that
injects waveforms next to each `node X = ...` line.
- web/ — port of the engine to JS running in AudioWorklet. Single static
page with CodeMirror 6 editor (line widgets for live waveforms) and a
control surface on the right with knobs/faders/step_seq/piano_roll
declared from the patch. State preserved across hot-reload.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
