docs(product): split look-and-feel into Phase L (L1 kit / L2 panel / L3 VST-restyle)
Port visual-design-language.md to dev with DS-1/2/3 settled (B + spectral strip; LICE + WDL free game; thorough M11-aware panel layout). L1 shared kit; L2 panel redesign after M11 merges; L3 VST restyle gated on Phase S landing. Phase S adopts the kit when it lands — not gated.
This commit is contained in:
@@ -290,3 +290,181 @@ build:** the `IReaperUIEmbedInterface` contract + embed message/lifecycle agains
|
||||
`video_processor.h` / `reaper_plugin_functions.h`.
|
||||
- **`IReaperUIEmbedInterface`** — embed contract + message/lifecycle, against
|
||||
`reaper_plugin_fx_embed.h` (needed only at S6).
|
||||
|
||||
---
|
||||
|
||||
# Phase L — Look-and-feel (system-wide visual design language)
|
||||
|
||||
> **New pillar, own lettered namespace, taken up by a parallel team.** Phase L is the
|
||||
> whole-system look-and-feel effort: a shared LICE drawing kit and the surfaces that
|
||||
> adopt it, so ReaSampler and ReaSampler 9000 shed the flat "temple os" drawing for a
|
||||
> modern, sleek 2026 dark synth look. It answers Daniel's post-DAW-test verdict on the
|
||||
> instrument ("this looks like temple os… the VST is dogshit… scope it for the whole
|
||||
> system… does Cockos have a toolkit?"). Namespaced **`L` (Look-and-feel)** so it is
|
||||
> orthogonal to and ungated by the M/D/B/R/V/S pillars — a parallel team owns it while
|
||||
> Phase S feature work proceeds independently. Authoritative spec: **CONTEXT.md §Phase L
|
||||
> — visual design language (design-system spec)**. Product framing, the settled decision
|
||||
> record (DS-1/DS-2/DS-3 all SETTLED 2026-07-26), palette, and the three visual
|
||||
> directions: `docs/product/visual-design-language.md`. When a point lands, doc-keeper
|
||||
> moves it to `COMPLETED.md`.
|
||||
>
|
||||
> **This section is self-contained for a team without Phase S context.** Where a point
|
||||
> touches a Phase S surface (the VST editor, the embed strip, the keyboard strip), the
|
||||
> gate is stated explicitly so the team does not chase files that are not on dev yet.
|
||||
>
|
||||
> **Settled decisions (Daniel, 2026-07-26 — see `docs/product/visual-design-language.md`
|
||||
> §6):**
|
||||
> - **DS-1 — toolkit: LICE + WDL free game, no external frameworks.** Draw the modern
|
||||
> look with LICE directly; reuse any useful WDL/vwnd piece (skin/image helpers, draw
|
||||
> idioms, a control like the scroll listbox) where it beats re-deriving — "don't
|
||||
> reinvent the wheel." Reject iPlug2 / JUCE / VSTGUI (external frameworks re-opening the
|
||||
> settled bare-SDK+LICE build shape). Keep hit-test geometry in pure CTest-covered
|
||||
> modules — do not import vwnd's retained-mode object model wholesale.
|
||||
> - **DS-2 — visual direction: Direction B ("Neon Console") + Direction C's spectral
|
||||
> keyboard strip.** Near-black + one vivid accent everywhere; a hue-mapped spectral
|
||||
> keyboard strip as the signature surface. The kit palette is abstract (roles, one
|
||||
> constants block), so the direction is a single-file change.
|
||||
> - **DS-3 — dock-panel scope: a thorough layout redesign, not a light re-skin.** L2 lays
|
||||
> out the full button inventory (including M11's action-button additions) intuitively,
|
||||
> uncluttered, and useful — then applies the kit. Sequenced after M11 merges.
|
||||
|
||||
## L1 — shared LICE drawing kit (the foundation)
|
||||
**Goal:** One shared **LICE-based design kit** — a role-based palette + a type scale + a
|
||||
component-draw layer — that every surface (the bank panel now, the VST editor + embed
|
||||
strip later) draws through, replacing flat `LICE_FillRect` blocks and raw-GDI `DrawTextA`
|
||||
with a modern dark look: gradient surfaces (`LICE_GradRect`), anti-aliased rounded controls
|
||||
(`LICE_RoundRect`/`LICE_Line`), cached anti-aliased text (`LICE_CachedFont`), and a full
|
||||
interaction-state model (rest/hover/active/pressed/dragging/focus/disabled) the current
|
||||
drawing lacks entirely. The B+spectral palette constants (DS-2) live in one constants block.
|
||||
No new dependency — LICE is the toolkit; WDL/vwnd reuse is assessed at build time per DS-1
|
||||
("don't reinvent the wheel"). CONTEXT.md §Phase L (design-system spec). Product framing +
|
||||
palette + directions + forks: `docs/product/visual-design-language.md`. **Verify LICE
|
||||
gradient/AA/font surfaces and the `LICE_CachedFont`↔`HFONT` lifecycle against
|
||||
`vendor/WDL/WDL/lice/lice.h` + `lice_text.h` before use.**
|
||||
**Verify:** CTest green on the pure layer (the theme/palette contrast-floor tests + the
|
||||
component geometry/hit-test helpers); in-DAW, the kit renders a modern dark button/row/
|
||||
surface with AA cached-font text and working hover/pressed states, drawn double-buffered
|
||||
with no flicker.
|
||||
**Depends on:** the existing `bank_panel` LICE surface (the first consumer). Nothing in
|
||||
Phase S — L1 stands alone on the extension side.
|
||||
|
||||
- [ ] 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** carrying the settled **B (Neon Console) + C spectral** values (DS-2),
|
||||
so the 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`/`bank_grid`/`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/tab 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 preserved (draw to `LICE_SysBitmap`, single `BitBlt`) — the
|
||||
"zero-jank" half of "speed is the selling point." **DS-1: assess WDL/vwnd reuse here at
|
||||
build time** — reuse a vwnd piece (e.g. its scroll listbox) where genuinely cheaper than
|
||||
LICE, else draw on LICE; keep hit-test geometry in the pure layer either way.
|
||||
- [ ] Retire the raw GDI `DrawText` path in `bank_panel` in favor of the kit's cached-font
|
||||
`text()` — the single biggest "temple os → modern" lever. (The VST-editor/embed-strip GDI
|
||||
retirement is L3, gated on Phase S — see below.)
|
||||
|
||||
## L2 — dock-panel layout redesign (extension-side; DS-3: thorough, not a re-skin)
|
||||
**Goal:** Redesign the docked `bank_panel` **layout** to house the *full* button/affordance
|
||||
inventory — including the buttons **M11 adds** — intuitively, uncluttered, and useful, then
|
||||
draw it all through the L1 kit. This is **not** a light re-skin (DS-3 settled): M11's
|
||||
action-trigger buttons + keybinding-help labels, on top of the existing capture/organize/
|
||||
prune/view affordances, are a real button inventory that a straight skin-pass would leave
|
||||
crowded. L2 groups the inventory by *task* (capture, organize, reclaim, view), gives every
|
||||
button a home that does not squeeze the grid, and only then applies the kit's draws. All
|
||||
new layout math goes in a **pure geometry module** (mirror of `mode_switch`/`bank_grid`);
|
||||
`bank_grid`/`tab_strip`/`mode_switch` stay the pure source of truth for what they own.
|
||||
CONTEXT.md §Phase L (dock-panel layout contract — the full M11-aware inventory).
|
||||
**Verify (in DAW):** the full button inventory (existing + M11) is laid out cleanly — the
|
||||
grid stays the centerpiece, frequent capture actions are one reach away with their keybinding
|
||||
labels legible, destructive prune is set apart and `warn`-marked, hover lights every
|
||||
interactive element; nothing is crammed or cut off at panel resize; the panel's GDI text is
|
||||
gone (kit cached-font throughout); all hit-testing is CTest-green pure geometry.
|
||||
**Depends on:** L1 (the kit). **Sequence AFTER M11 merges to dev** — L2 must inventory M11's
|
||||
*actual landed* buttons, not a forecast; starting before M11 designs against a moving target.
|
||||
|
||||
- [ ] **Layout design + pure geometry:** design the panel layout that groups the inventory
|
||||
by task — a compact action bar/toolbar for the frequent capture actions (icon+label,
|
||||
keybinding as a `micro` sub-label), an overflow/menu for rare ones, header space for the
|
||||
Design View mode switch + active-bank indicator, the bank tab strip + move/copy/remove
|
||||
organize cluster, and prune set apart and `warn`-colored. Add a new **pure** action-bar
|
||||
layout module (mirror of `mode_switch`/`bank_grid`); keep all hit-test math pure/CTest.
|
||||
- [ ] **Inventory the full M11-aware button set and place every one** (see CONTEXT.md
|
||||
§Phase L for the enumerated inventory): existing — bank grid, mode switch + membership
|
||||
count, named-banks tab strip (overflow/scroll), active-bank indicator, pool/banks
|
||||
full-height toggles, create/rename/delete/activate bank, move/copy/remove sample, prune
|
||||
(R-E); M11 — action-trigger buttons (capture item/track, re-capture, resample-and-mute,
|
||||
batch capture, conform-on-insert, insert-at-cursor, drag-out, null-test verify) and
|
||||
per-action keybinding-help labels. Density is a design decision: 8px grid, elevation
|
||||
layers over hairlines, `warn` for destructive verbs.
|
||||
- [ ] **Apply the L1 kit** to draw the redesigned panel: cached-font text (retire GDI),
|
||||
kit `drawButton`/segment/tab draws, palette roles, micro-gradient surfaces, hover on
|
||||
every interactive element. Structure of the vertical-split / grid / tab bones is
|
||||
preserved; the *layout of the inventory around them* is the design work (DS-3).
|
||||
|
||||
## L3 — VST editor + embed-strip restyle (GATED on Phase S landing on dev)
|
||||
**Goal:** Bring the ReaSampler 9000 VST editor (`IPlugView` LICE surface) and the S6 embed
|
||||
strip up to the settled B+spectral look via the L1 kit: cached-font text, kit component
|
||||
draws, the Neon-Console palette, the **spectral keyboard strip** as the signature surface
|
||||
(DS-2), and hover/pressed/drag states throughout. CONTEXT.md §Phase L (VST restyle + the
|
||||
Phase S coordination contract). Product framing: `docs/product/visual-design-language.md` §5.3.
|
||||
**Verify (in DAW):** the VST editor + embed strip render in the settled B+spectral language
|
||||
through the L1 kit — AA cached-font text, gradient/rounded kit components, the spectral
|
||||
keyboard strip, working hover/pressed/drag; the VST3 class UID is unchanged (a visual
|
||||
refresh is not a compat event).
|
||||
**Depends on:** L1 (the kit) **AND — GATE — Phase S landing on dev.** The VST editor, embed
|
||||
strip, and keyboard strip live in Phase S, which is **not on dev yet** (it exists on the
|
||||
phase-s worktree). **L3 cannot be built on dev until Phase S's editor/embed surfaces
|
||||
(≈ S1 / S6 / S10) merge to dev. The Phase L team must NOT chase these files on dev — they
|
||||
are not there.** Until then L3 is a planned, blocked point; L1 and L2 are the live Phase L
|
||||
work.
|
||||
|
||||
> **Coordination contract with Phase S (load-bearing).** Phase S's S10–S13 build their
|
||||
> interaction UX with the **current** drawing and **adopt the L1 kit when it is available —
|
||||
> they are NOT gated on Phase L.** Whichever lands first (the L1 kit or the S10–S13 UX),
|
||||
> the kit is the **one source of drawing**: if S10–S13 reach dev before L1, they draw in
|
||||
> the current language and L3 restyles them; if L1 lands first, they are born in the kit.
|
||||
> Either way there is one kit and one look, and L3 is the point that completes the VST/embed
|
||||
> adoption and applies the settled B+spectral treatment.
|
||||
|
||||
- [ ] Route the VST editor's + embed strip's text through the kit's cached-font `text()`;
|
||||
retire their raw GDI `DrawTextA` path. (Gated — Phase S surfaces must be on dev.)
|
||||
- [ ] Restyle the editor + embed components through the kit (buttons, sliders/ADSR, list
|
||||
rows, waveform, segmented controls) in the B (Neon Console) palette; add hover/pressed/
|
||||
drag states. (Gated.)
|
||||
- [ ] Apply **Direction C's spectral treatment to the keyboard strip** (hue-mapped zones,
|
||||
glow-on-active as a static drawn state — never a pulse, per the speed constraint) as the
|
||||
signature surface; VST3 class UID unchanged. (Gated.)
|
||||
|
||||
## Phase L — sequencing
|
||||
```
|
||||
L1 (shared kit) ──► L2 (dock-panel layout redesign; AFTER M11 merges to dev)
|
||||
└─────────► L3 (VST editor + embed-strip restyle; GATED on Phase S landing on dev)
|
||||
|
||||
Phase S (separate team, ungated): S-work builds with current drawing, adopts L1 when it lands.
|
||||
```
|
||||
L1 is the foundation both L2 and L3 consume. L2 is extension-side, lands after M11. L3 waits
|
||||
for Phase S to reach dev. Phase S feature work runs in parallel, ungated by Phase L.
|
||||
|
||||
## Phase L — must-verify-before-build
|
||||
- **LICE design-kit surfaces (L1)** — `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). Verified *present* in `vendor/WDL/WDL/lice/lice.h` + `lice_text.h`
|
||||
(design-language doc §1.1); **confirm exact signatures + the `LICE_CachedFont`↔`HFONT`
|
||||
lifecycle at build.**
|
||||
- **WDL/vwnd reuse assessment (DS-1)** — at build time, evaluate whether a vwnd piece beats
|
||||
re-deriving it: `virtwnd-slider.cpp` / `vwnd_slider_drawknobstack` as the slider/knob
|
||||
drawing reference, `virtwnd-listbox.cpp` as a candidate scroll listbox, `virtwnd-controls.h`
|
||||
for `WDL_STYLE_*` gradient hooks, `virtwnd-skin.h` for image-skin helpers. Reuse where
|
||||
useful; keep hit-test geometry pure regardless.
|
||||
- **M11 button inventory (L2)** — L2's layout depends on the *actual* set of buttons M11
|
||||
lands (action-trigger buttons + keybinding-help labels). Re-inventory against dev after
|
||||
M11 merges before finalizing the layout.
|
||||
|
||||
Reference in New Issue
Block a user