docs(product): system-wide visual design language (S0-DS kit + S14 panel refresh)

LICE verified sufficient from vendored WDL — current editor draws at its
floor (flat fills, raw GDI text); no framework shift needed, D-A holds.
Adds design-language doc (palette, three directions, motion policy),
S0-DS shared drawing kit before S10, S14 panel refresh.
This commit is contained in:
2026-07-26 19:16:58 -04:00
parent 8c9cf38780
commit 3d6c0ab66a
3 changed files with 184 additions and 3 deletions
+89 -1
View File
@@ -1392,6 +1392,83 @@ without re-opening each editor. The missing trigger: a **bank-generation counter
This seam serves **both** S8 ingest and M10 recapture; the writer side is extension-only and This seam serves **both** S8 ingest and M10 recapture; the writer side is extension-only and
independent of S8, so it can land alongside either. independent of S8, so it can land alongside either.
## Design-system foundation (S0-DS + S14; "the VST is dogshit / temple os", 2026-07-26)
**The diagnosis, from the vendored source, not lore.** Daniel DAW-tested the instrument and
called the look "temple os … the VST is dogshit," and asked whether Cockos ships a toolkit for
this. It does, and it's already vendored — the problem is the current editor draws at the
**floor** of it. The S1S6 editor renders flat opaque `LICE_FillRect` blocks and pipes text
through raw GDI **`DrawTextA`** (reasampler_editor.cpp) — no gradients, no anti-aliasing, no
rounded corners, no hover, aliased system text. That is the entire "temple os" look. The
toolkit ceiling is not the constraint.
**The toolkit (verified against `vendor/WDL`).** Two layers, both in hand:
- **LICE** (`vendor/WDL/WDL/lice/`) — Cockos's 2D rasterizer, the same one REAPER's themed UI
and SWS draw with. Verified surface beyond the flat `LICE_FillRect` the editor limits itself
to: `LICE_GradRect` (gradient fills), `LICE_Line`/`LICE_FLine`/`LICE_ThickFLine` (AA lines,
`aa=true` default), `LICE_RoundRect` (AA rounded rects), `LICE_Circle`/`LICE_FillCircle` (AA),
`LICE_DrawCBezier` (AA curves — envelope draw), `LICE_FillTriangle`/`FillTrapezoid`/
`FillConvexPolygon`, per-primitive `alpha`+blend `mode`, and a real font engine
`LICE_CachedFont`/`LICE_IFont` (`lice_text.h`: AA glyph cache from an `HFONT`, `SetTextColor`,
`DrawText`, and shadow/outline/glow FX flags). **This is a sufficient modern-dark-UI toolkit
with no new dependency.**
- **WDL VirtualWnd (vwnd)** (`vendor/WDL/WDL/wingui/virtwnd*.{h,cpp}`) — the retained-mode
LICE-drawn *widget* layer REAPER/SWS use: `virtwnd-iconbutton` (buttons), `virtwnd-slider`
(sliders + `vwnd_slider_drawknobstack` knobs), `virtwnd-listbox` (scroll lists),
`virtwnd-skin` (image skins), `WDL_STYLE_*` gradient/knob hooks. **Fork DS-1 settled A:
crib vwnd's drawing craft (read `virtwnd-slider.cpp` as the reference for a good LICE
slider/knob), do NOT adopt its object model** — its controls own their hit-test internally,
which would move geometry back into untestable shell code and undercut the pure/shell split
the codebase relies on. (Narrow build-time exception: vwnd's *listbox* for the S12 scroll
list only.) **iPlug/IPlug (VST2-era, dated — reject), iPlug2/JUCE (a framework shift that
re-opens settled D-A to solve a non-ceiling problem — reject), VSTGUI (the D-A fallback rung,
now moot since S1's LICE bridge landed).** Full toolkit assessment + palette + the three
visual directions + all forks: `docs/product/visual-design-language.md`.
**S0-DS — shared LICE drawing kit (BEFORE S10).** One shared kit — palette + type + component
draw — both the VST editor and the bank panel draw through, so "scope it for the whole system"
is one source, not two divergent restyles. **Sequenced before S10** so the keyboard-strip
editor is built in the new language, not restyled after. Honors the house split: the *geometry*
(a role→color `theme` module — direction selectable via one constants block — and component
layout/hit-test helpers) is **pure and CTest-covered** (mirror of `mode_switch`/`embed_strip`/
`editor_geometry`); the *draw* (LICE `fillSurface` with micro-gradient + inner highlight,
`drawButton`/`drawSlider`/`drawListRow`/`drawWaveform`/segment draw, and shared `LICE_CachedFont`
text) is shell. The kit defines the **interaction state model** the current editor lacks
entirely — rest / **hover** / active / pressed / dragging / focus / disabled — and the
double-buffered zero-jank draw discipline (draw to `LICE_SysBitmap`, single `BitBlt`) already in
both artifacts is preserved.
**Palette + "punch" rule (Daniel's standing taste).** Dark, modern, **visual punch over
conservative contrast**: for each text-on-surface pair, take the *most* vibrant accent that
still clears its WCAG floor (AA 4.5:1 body / 3:1 large + state indicators) — the floor
approached from the vibrant side, never a retreat to safe gray. Palette is defined by **role**
(base/panel/cell/text-primary/text-dim/accent/accent-hot/warn), not hardcoded hue, so the visual
direction (fork DS-2) is a single constants block. Surfaces gain a micro-gradient + 1px inner
highlight/shadow (the vwnd trick) instead of flat fills; text moves to AA cached fonts (the
single biggest "temple os → modern" lever).
**"Speed is the selling point" — read as a design constraint, not a tagline.** The UI must
*feel* instant: sub-frame hover/press/drag feedback repainted immediately on the input message
(instant acknowledgment *is* the perception of speed); zero-jank via the preserved double-buffer;
region-scoped `InvalidateRect` during a drag (build-time residual). **No decorative animation** —
no tweens/fades/pulses; the only permitted motion is a level/meter readout following the audio
directly (as the embed strip already does). Animation that costs a frame of latency violates the
speed promise. The "fast" feeling is typography + hover + no-jank, not motion.
**S14 — dock-panel refresh (extension-side, lighter).** The panel is "not terrible" — this is
kit-application, not redesign (fork DS-3 settled light): route its text through the shared
cached font (retire GDI text), re-draw buttons/tab-strip/segmented-switch/toggles through the
kit, adopt palette roles + micro-gradient surfaces, add hover to tabs/rows. **Structure
untouched** — the vertical-split / tab / grid layout and the pure `bank_grid`/`tab_strip`/
`mode_switch` hit-test sources of truth stay exactly as landed; only draw upgrades.
Extension-side, independent of the VST S10S13 chain, parallelizable after the kit.
**Sequencing:** `S0-DS` gates both S10 and S14. The prior "S10 leads the UX overhaul" becomes
"**S0-DS leads, then S10**" — the kit is a small foundation, not a detour. Constraints all
hold: **LICE/SWELL only** (D-A reinforced, not re-opened), **pure geometry modules** for all
layout/hit-test, RT discipline untouched (draw-thread only), instrument stays a read-only bank
consumer (a visual refresh is not a data-ownership or compat event — VST3 class UID unchanged).
## ReaSampler 9000 — the UX overhaul (S10S13; DAW-tested S1S6, "the UX is awful") ## ReaSampler 9000 — the UX overhaul (S10S13; DAW-tested S1S6, "the UX is awful")
**The bar is set: better than ReaSamplOMatic5000.** Daniel DAW-tested the S1S6 **The bar is set: better than ReaSamplOMatic5000.** Daniel DAW-tested the S1S6
@@ -1434,7 +1511,9 @@ read-only-over-bank stay settled.
geometry module (key-span↔pixel reusing the `embed_strip` idiom; edge-grab vs. body-move geometry module (key-span↔pixel reusing the `embed_strip` idiom; edge-grab vs. body-move
hit regions; `pixel→note`; drag-delta resolver). Shell extends the click-only `wndProc` hit regions; `pixel→note`; drag-delta resolver). Shell extends the click-only `wndProc`
to a `WM_MOUSEMOVE`/`WM_LBUTTONUP` drag-state machine with live feedback, one coherent to a `WM_MOUSEMOVE`/`WM_LBUTTONUP` drag-state machine with live feedback, one coherent
edit on release. edit on release. **Built in the S0-DS kit's language** (drawn through the shared component
kit, not the flat `LICE_FillRect`/GDI path); the drag machine's `WM_MOUSEMOVE` tracking
also lights the kit's hover states at near-zero marginal cost.
- **S11 — waveform view + draggable loop points.** Selecting a zone shows its sample's - **S11 — waveform view + draggable loop points.** Selecting a zone shows its sample's
**waveform** (peaks via the existing `peaks` module over the shell's already-decoded PCM **waveform** (peaks via the existing `peaks` module over the shell's already-decoded PCM
— no new decode/WAV path) with draggable **start/end/loop-start/loop-end** markers that — no new decode/WAV path) with draggable **start/end/loop-start/loop-end** markers that
@@ -1524,6 +1603,15 @@ Set by Daniel on DAW-testing the S1S6 instrument, alongside the UX-overhaul d
- **LICE/SWELL editor.** Reuses the `bank_panel` LICE/SWELL drawing surface; verify the - **LICE/SWELL editor.** Reuses the `bank_panel` LICE/SWELL drawing surface; verify the
`IPlugView`↔LICE window/bitmap bridge at the spike (window creation, sizing, event `IPlugView`↔LICE window/bitmap bridge at the spike (window creation, sizing, event
routing) — the least-trodden edge of the phase. routing) — the least-trodden edge of the phase.
- **LICE design-kit surfaces (S0-DS).** Verified *present* in `vendor/WDL/WDL/lice/lice.h` +
`lice_text.h`: `LICE_GradRect`, `LICE_RoundRect`, AA `LICE_Line`/`LICE_FLine`/
`LICE_ThickFLine`/`LICE_Circle`/`LICE_FillCircle`/`LICE_DrawCBezier`, `LICE_FillTriangle`/
`FillTrapezoid`/`FillConvexPolygon`, and the `LICE_CachedFont`/`LICE_IFont` font engine
(`SetFromHFont`, AA `DrawText`, shadow/outline/glow FX flags). **Verify exact signatures +
the `LICE_CachedFont`↔`HFONT` lifecycle before use.** vwnd reference (drawing craft only,
not the object model): `vendor/WDL/WDL/wingui/virtwnd-slider.cpp` /
`vwnd_slider_drawknobstack` for slider/knob rendering, `virtwnd-controls.h` for the
`WDL_STYLE_*` gradient hooks.
## Drop-and-load — drag a capture onto a track's FX button (S17 spec) ## Drop-and-load — drag a capture onto a track's FX button (S17 spec)
+88 -2
View File
@@ -383,6 +383,42 @@ alongside S8.
stale value by design — it reloads on the *next* poll; confirm no torn-read hazard for the stale value by design — it reloads on the *next* poll; confirm no torn-read hazard for the
single integer generation key). single integer generation key).
## S0-DS — shared LICE drawing kit (design-system foundation; BEFORE S10)
**Goal:** A shared **LICE-based design kit** — palette + type + component-draw layer — that
both the ReaSampler 9000 VST editor and the extension's bank panel draw through, replacing
the current flat `LICE_FillRect` + raw-GDI-`DrawTextA` "temple os" drawing with a modern dark
look (gradient surfaces via `LICE_GradRect`, anti-aliased rounded controls via `LICE_RoundRect`/
`LICE_Line`, cached anti-aliased text via `LICE_CachedFont`, hover/pressed/drag interaction
states). **Sequenced before S10** so the keyboard-strip editor is *born* in the new language,
not restyled after. No new dependency — LICE (already the draw surface) is the toolkit; vwnd's
drawing craft is cribbed, not its object model (fork DS-1 settled A). Product framing +
palette + the three visual directions + all three forks: `docs/product/visual-design-language.md`.
CONTEXT.md §Phase S (design-system foundation). **Verify LICE gradient/AA/font surfaces and the
`LICE_CachedFont``HFONT` lifecycle against `vendor/WDL/WDL/lice/lice.h` + `lice_text.h` before
use** (surfaces verified present in the design-language doc; confirm signatures at build).
**Depends on:** S1 (the `IPlugView`↔LICE editor surface the kit draws into) + the existing
`bank_panel` LICE surface. Blocks S10 and S14.
- [ ] Pure `theme`/palette layer: role→color mapping (`bg/base`, `bg/panel`, `bg/cell`,
`text/primary`, `text/dim`, `accent`, `accent/hot`, `warn`) selected via **one direction
constants block** (DS-2), so the visual direction is a single-file change. Unit-test that
each text-on-surface pair clears its WCAG floor (AA 4.5:1 body / 3:1 large + state
indicators) — the "punch to the floor, not past it" rule made testable. No LICE/host types.
- [ ] Pure component **geometry/hit-test** helpers where not already owned: button rect,
slider track/handle geometry, list-row rect + hover hit-test (mirror of
`mode_switch`/`embed_strip`/`editor_geometry` — no LICE, no host types, CTest-covered).
- [ ] Shell **draw kit** (LICE): `fillSurface` (micro-gradient + 1px inner highlight/shadow —
the vwnd trick that kills the flat look), `drawButton`/`drawSlider`/`drawListRow`/
`drawWaveform`/segmented-switch draw, and a shared `text()` over a cached `LICE_CachedFont`
set (title/label/value-mono/micro). Owns the cached-font lifecycle. Honors the interaction
state model (rest/hover/active/pressed/dragging/focus/disabled). Double-buffered draw
discipline preserved (draw to `LICE_SysBitmap`, single `BitBlt`) — the "zero-jank" half of
"speed is the selling point."
- [ ] Retire the raw GDI `DrawTextA` path in the VST editor's `drawText`/`drawTextCentered`
and the bank panel's GDI text in favor of the kit's cached-font `text()` — the single
biggest "temple os → modern" lever. (This is the drawing-substrate change; the surfaces it
serves land in S10S14.)
## S10 — direct-manipulation keymap editor ("ReaSampler 9000" UX overhaul, part 1) ## S10 — direct-manipulation keymap editor ("ReaSampler 9000" UX overhaul, part 1)
**Goal:** Replace the ±1 nudge-button zone editor with a **piano-keyboard-strip zone **Goal:** Replace the ±1 nudge-button zone editor with a **piano-keyboard-strip zone
editor** where the keymap is edited by direct manipulation: a horizontal keyboard span editor** where the keymap is edited by direct manipulation: a horizontal keyboard span
@@ -402,8 +438,11 @@ next held note); overlapping zones render legibly and resolve first-match as bef
zone add/select/delete still work; the pure geometry module is CTest-green (edge-grab zone add/select/delete still work; the pure geometry module is CTest-green (edge-grab
regions, body-drag delta, key→note mapping, root hit-test) with no host types at its regions, body-drag delta, key→note mapping, root hit-test) with no host types at its
boundary; the ±1 nudge-button row is gone. boundary; the ±1 nudge-button row is gone.
**Depends on:** S5 (the `PerformanceMap`/zone model it edits), S1 (the LICE `IPlugView` **Depends on:** S0-DS (the shared drawing kit — the strip/zone bars are drawn in the kit's
drag/event routing — extends the click-only `wndProc` to `WM_MOUSEMOVE`/`WM_LBUTTONUP`). new language, and the drag machine's `WM_MOUSEMOVE` tracking also lights the kit's **hover**
states at near-zero marginal cost), S5 (the `PerformanceMap`/zone model it edits), S1 (the
LICE `IPlugView` drag/event routing — extends the click-only `wndProc` to
`WM_MOUSEMOVE`/`WM_LBUTTONUP`).
- [ ] Pure `keyboard_strip` geometry module: map a MIDI key span across a strip width - [ ] Pure `keyboard_strip` geometry module: map a MIDI key span across a strip width
(128 keys → pixels, reusing the S6 `embed_strip` key-span idiom); per-zone bar rect from (128 keys → pixels, reusing the S6 `embed_strip` key-span idiom); per-zone bar rect from
@@ -527,6 +566,53 @@ the relay is proven.**
"drop files on the ReaSampler panel to add" affordance rather than silently swallowing the "drop files on the ReaSampler panel to add" affordance rather than silently swallowing the
drop — the shipped ingest gesture stays discoverable either way. drop — the shipped ingest gesture stays discoverable either way.
## S14 — dock-panel refresh (extension-side; applies the S0-DS kit to the bank panel)
**Goal:** Bring the extension's docked `bank_panel` up to the new design language by
**applying the S0-DS kit** — it is "not terrible" already (thumbnails, selection, focus ring,
LICE grid), so this is a re-skin, not a redesign: route its text through the shared
`LICE_CachedFont` (retiring its GDI text), re-draw buttons / tab strip / segmented mode-switch
/ full-height toggles through the kit's `drawButton`/segment draw, adopt the palette roles +
micro-gradient surfaces, and add **hover** to tabs and rows. Structure stays; only the drawing
upgrades (fork DS-3 settled: light/kit-application only). CONTEXT.md §Phase S (dock-panel
refresh). **Depends on:** S0-DS (the kit). Extension-side and **independent of the VST
S10S13 chain** — can land any time after the kit, in parallel with the VST overhaul.
- [ ] Route all `bank_panel` text through the S0-DS cached-font `text()`; retire the GDI
`DrawText` path in the panel.
- [ ] Re-draw the panel's buttons, the named-banks tab strip, the Design View segmented
mode-switch, and the pool/banks full-height toggles through the kit's component draws
(gradient fills, rounded, inner highlight); adopt the palette roles + micro-gradient
surfaces. Hit-test geometry unchanged (`bank_grid`/`tab_strip`/`mode_switch` stay the pure
source of truth) — this touches draw only.
- [ ] Add **hover** state to tab strip and grid rows/cells (the panel's `wndProc` already
runs a timer; add `WM_MOUSEMOVE` hover tracking). No structural/layout change — the
vertical-split, tab, and grid layout are untouched (fork DS-3).
## Phase S — design-system forks (Daniel's calls)
Framing + full analysis: `docs/product/visual-design-language.md` §6. Two of three carry a
strong product-designer lean; DS-2 is deliberately low-cost-to-reverse.
- **Fork DS-1 — toolkit.** (A) **LICE drawing kit** (recommended — no new dependency,
consistent with settled D-A; crib vwnd's drawing craft, not its object model); (B)
**vwnd-based** retained-mode controls (not recommended — moves hit-test geometry into
untestable shell, pulls in image-skin assets; narrow exception: vwnd's *listbox* for the
S12 scroll list only, a build-time residual); (C) **iPlug2 / JUCE shift** (reject — re-opens
settled D-A to solve a look problem that is not a toolkit-ceiling problem; REAPER's own
themed UI is LICE). **Lean: A.** This fork exists mainly to let Daniel rule *against* the
LICE kit if he wants a framework anyway.
- **Fork DS-2 — visual direction.** (A) **Studio Rack** (evolutionary green-on-charcoal, done
properly); (B) **Neon Console** (near-black + one vivid accent, modern soft-synth idiom); (C)
**Spectral** (bold — hue-mapped zone/waveform gradients + glow, turns the multi-zone-in-one-
instance advantage into a visual signature). **Lean: B default + C's spectral keyboard
strip.** Because the kit palette is abstract (roles, one constants block), this fork is
**reversible for ~one file** — pick a *starting* direction, not a permanent one.
- **Fork DS-3 — panel refresh scope.** (a) **Light** — apply the kit (fonts/buttons/palette/
hover), keep the structure (S14 as specced); (b) **Structural** — also rework the
vertical-split / tab-strip / grid layout. **Lean: (a) light** — the panel's structure is
sound; a structural rework is scope Daniel didn't ask for and risks destabilizing landed
Phase-B panel work. (b) available later if the panel's *layout* starts to feel dated once
the VST is sharp.
## Phase S — product name (ReaSampler 9000) ## Phase S — product name (ReaSampler 9000)
The MIDI-playback instrument's product name is **ReaSampler 9000** (Daniel, 2026-07-26, The MIDI-playback instrument's product name is **ReaSampler 9000** (Daniel, 2026-07-26,
on DAW-testing the S1S6 instrument). The extension remains **ReaSampler**; the instrument on DAW-testing the S1S6 instrument). The extension remains **ReaSampler**; the instrument
+7
View File
@@ -743,6 +743,13 @@ Post-DAW-test directives (2026-07-26; see the "product name + UX overhaul" Adden
8. **UX overhaul → "better than RS5K"** (**S10S13**): direct-manipulation keyboard-strip 8. **UX overhaul → "better than RS5K"** (**S10S13**): direct-manipulation keyboard-strip
keymap editor (S10), waveform + draggable loop points (S11), scale/ergonomics — scroll, keymap editor (S10), waveform + draggable loop points (S11), scale/ergonomics — scroll,
search, direct numeric entry, ADSR (S12), and drop-to-load folding in the S8 relay (S13). search, direct numeric entry, ADSR (S12), and drop-to-load folding in the S8 relay (S13).
9. **Visual design language → modern/sleek, system-wide** (**S0-DS** + **S14**): a shared
LICE drawing kit (gradients, AA, rounded controls, cached-font text, hover states — no new
toolkit; LICE is sufficient, D-A reinforced), sequenced **before** S10 so the keymap editor
is born in the new language; plus a lighter extension-side dock-panel refresh. Framing +
palette + three visual directions + toolkit/direction/scope forks:
`docs/product/visual-design-language.md`. Answers Daniel's "the VST is dogshit / temple os /
does Cockos have a toolkit" (2026-07-26, post-S1S6 DAW test).
**Authoritative from here:** **PLAN.md §Phase S** is the roadmap (S1S6 the original **Authoritative from here:** **PLAN.md §Phase S** is the roadmap (S1S6 the original
dependency chain: spike → `Sample` fields → pure sampler core → Tier 0 → Tier 1 → embedded dependency chain: spike → `Sample` fields → pure sampler core → Tier 0 → Tier 1 → embedded