From 3c1b1d4aff65b834c1b63000cceb543710d704f9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jose=20Luis=20Monta=C3=B1es?= Date: Fri, 1 May 2026 17:42:53 +0200 Subject: [PATCH] =?UTF-8?q?track=201:=20foundation=20polish=20=E2=80=94=20?= =?UTF-8?q?splitter,=20custom=20scrollbars,=20micro-states?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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) --- docs/roadmap.md | 112 ++++++++++++++++++++++++++++++++++ web/index.html | 157 ++++++++++++++++++++++++++++++++++++++++++++---- 2 files changed, 258 insertions(+), 11 deletions(-) create mode 100644 docs/roadmap.md diff --git a/docs/roadmap.md b/docs/roadmap.md new file mode 100644 index 0000000..9f9c024 --- /dev/null +++ b/docs/roadmap.md @@ -0,0 +1,112 @@ +# roadmap — code-sinth MVP → product + +The MVP works end-to-end: parser, audio engine (Python + JS/AudioWorklet), +hot-reload, inline waveforms, knobs, faders, step sequencer, piano roll. +Now we polish the web app into something that looks and feels like an +instrument, not a developer demo. + +## Vision + +A single static web page where: + +- The patch language is the source of truth for **what's connected**. +- The control surface (right pane) is the source of truth for **how you play it**: + positions, layout, color, scrubbing. +- Everything you change in either place persists across reloads (patch in + whatever editor you use; surface state in `localStorage` indexed by patch). +- The aesthetic sits between Reaktor 6, Teenage Engineering OP-1, and a + modern terminal — dark base, phosphor accents, no skeuomorphism. + +## Tracks + +Four tracks. Each is independently shippable; the order below reflects +"unblocks the most other work first". + +### Track 1 — Foundation polish · status: in progress + +Concrete bricks the rest of the work sits on. + +- [ ] **Resizable splitter** between editor and control surface. Drag the + vertical seam to rebalance widths. `localStorage` persistence. + Min widths so neither pane collapses. +- [ ] **Custom scrollbars** (WebKit `::-webkit-scrollbar` + Firefox + `scrollbar-color`) — thin, dark, accent on hover. Applied globally + so CodeMirror's `.cm-scroller`, the right pane, the piano roll + and step seq overflow inherit the same style. +- [ ] **Focus / hover micro-states**. Buttons, inputs, controls all get + consistent `transition` timings and `:focus-visible` rings. +- [ ] **Header polish**. The top bar gets a proper visual hierarchy, + grouped controls (transport, gain, status) instead of a flex blob. + +Done when: dragging the seam feels natural, scrollbars match the rest +of the dark theme everywhere, no default-browser styling leaks through. + +### Track 2 — Surface aesthetics + +Rebuild each surface to feel premium. For each, deliver 2–3 visual +variants in a sandbox before committing. + +- [ ] **Knob**: dimensional dial with gradient + accent ring, micro-anim + on change, label in small caps, value display below. +- [ ] **Fader**: gradient track, slimmer cap, optional scale marks. +- [ ] **Step sequencer**: cells with subtle inner glow when on, more + prominent beat dividers, animated playhead trail. +- [ ] **Piano roll**: more realistic key strip (white keys with border, + black keys inset), cells with rounded corners, beat dividers every + 4 columns more visible, octave C row marked. +- [ ] **Wave widgets** (inline): grid lines optional, peak indicator, + smoother line drawing (anti-aliased Bezier). + +Reference: Ableton Live's macros, Bitwig modulators, Reaktor 6 Blocks, +Teenage Engineering's hardware. + +### Track 3 — Organizable surface panel + +Each surface becomes a **card** the user can rearrange and customize. +This is the largest track — needs careful state design. + +- [ ] **Card chrome**: header with node name, drag handle, color + override picker, compact/expanded toggle. +- [ ] **Drag-drop reorder** within the right pane. Probable approach: + CSS Grid with grid-auto-flow + a Sortable-style implementation + (we won't pull in a library — ~150 lines hand-rolled). +- [ ] **Per-card accent color** override. Defaults to the global + `--accent`; user can pick per-surface. +- [ ] **Per-card size** (compact knob row vs full panel) where it makes + sense. +- [ ] **Persistence**: layout state in `localStorage`, keyed by a hash + of the patch text + node name so each patch remembers its layout. +- [ ] **Reset layout** button. + +Decision deferred: should the layout be expressible in the patch +language as `@layout` directives? Pro: shareable, reproducible. +Con: muddies the language. Default answer for now: no, layout is +UI-only state. Add export/import to a JSON blob if shareability +matters later. + +### Track 4 — Theming + +The current single-file approach already uses CSS custom properties. +Make it a real theme system. + +- [ ] Theme tokens consolidated and named coherently + (`--surface-1`, `--surface-2`, `--accent-primary`, `--accent-mute`). +- [ ] 3 packaged themes: **phosphor** (current), **monochrome**, **warm**. +- [ ] Theme picker in the header. Persists in `localStorage`. +- [ ] Per-card override (Track 3) layered on top. + +## Out of scope (for now) + +- MIDI input. Web MIDI works but not on Safari and the UX needs design. +- Mobile / touch optimization. Worth a pass later but not in this round. +- A landing / docs page. After the app itself feels finished. +- Patch-language enhancements (string literals, named voices in poly, + modulation matrices). Engine-track work, separate roadmap. + +## Working agreement + +- One track at a time, but tracks are paralleliable when ergonomic. +- Each track ends with a screenshot review before merging the changes + into the main `web/index.html`. +- For visually-driven changes, propose 2–3 variants and pick before + committing. diff --git a/web/index.html b/web/index.html index 6171407..263087f 100644 --- a/web/index.html +++ b/web/index.html @@ -27,11 +27,16 @@