7 Commits

Include renames

Author	SHA1	Message	Date
Miguel Ángel	e666a8a2a3	feat(studio): the code editor follows studio's light and dark theme (#4862) ... * feat(studio): the code editor follows studio's light and dark theme Replaces One Dark with a Studio editor theme whose colours are theme.css variables: eight syntax role tokens (One Light and One Dark hues held at 4.5:1), editor surfaces from Studio's roles, all measured by the contrast ratchet. * test(studio): the code editor theme takes every colour from a theme.css token * fix(studio): code stays at 4.5:1 when a selection or search match sits on the active line Syntax tokens are tuned for the selection over the active line, which the ratchet now measures; matches are outlined rather than stacking another wash; the search panel's pressed button and special characters follow the theme; unused tooltip rules go. * fix(studio): code matches carry no background, and types read apart from constants Search and selection matches are outlined only, so CodeMirror's lime match wash and stacked washes are gone; type and constant tokens split by hue in both themes. * fix(studio): the current search match reads apart by width, not colour alone A 2px accent outline on the current match and a muted 1px outline on other copies of the selected word.	2026-10-01 10:13:48 -07:00
Miguel Ángel	658f22bb7f	feat(studio): graphite colour system with a light theme that passes contrast (#4836) ... * feat(studio): graphite colour system with a light theme that passes contrast Studio's tokens take the Graphite values: a lifted dark, a light set behind data-theme="paper", the player dark in both. Every text role clears 4.5:1 and every icon and ring 3:1 on the fills it sits on, held by the contrast ratchet. * fix(studio): every studio surface follows the light theme and passes contrast The dock no longer inherits dockview's forced dark scheme, popovers sit on the raised surface, stock white, red and amber text map to roles, the keyframe diamonds and track headers use roles, and the contrast ratchet measures every pair in both themes (150 pairs). * fix(studio): stock white, red and amber stay colours; studio text and fills use roles Round-two review: white, red and amber are colour content as well as text, so they keep Tailwind's values and hosts keep their palettes. Text, toasts, the feedback card, the FX popover, destructive buttons, category labels and the dock take Graphite roles instead; the contrast gate rejects an unparseable colour. * fix(studio): every light-theme ink, icon, dot and focus ring holds its contrast Stock white, red, amber and file-type hex left in Studio chrome now use roles or a light-dark pair; the file tree icons carry a contrast test. * chore(studio): drop two comments the names already carry * fix(studio): red marks, teal outlines and colour curves hold contrast in both themes Danger graphics use the danger ink, file tree outlines use the accent ink, the colour-curve well stays dark like the scopes, and six timeline token pins come back. * fix(studio): invalid readouts, the curve focus ring and editor dots stay distinct in both themes The invalid readout border is dashed as well as red, the curve graph's ring sits inside its dark well, the radius dots and ease handle centre follow the theme. * refactor(studio): ease and radius editors use colour classes; the dashed invalid border has a test Simplify pass: the ease editor's inline accent styles become stroke and fill classes, the radius dot class is computed once, the ratio check is one expression, and the alias table is named for what it holds.	2026-10-01 07:21:05 -07:00
Miguel Ángel	d1048cf98f	fix(studio): ship component styles as their own stylesheet for embedders (#4393) ... * fix(studio): ship component styles as their own stylesheet for embedders Studio's component rules (timeline clips, loaders, range inputs, toasts and the rest) lived only in the app sheet, so a page that embeds Studio's components with theme.css got unstyled clips and dark-on-dark labels. They move unchanged into components.css, exported as @hyperframes/studio/components.css; studio.css keeps the app shell and imports it, so Studio's compiled CSS has the same rules. * test(studio): read moved component rules from components.css * test(studio): catch class rules nested in the app sheet's layers and media blocks	2026-09-24 01:35:04 -04:00
Miguel Ángel	a57e095468	feat(studio): panel tabs take the decided Current design (#4266) ... Studio's panels become cards on a dark shell, and each panel's tabs take the "Current" design: the open tab is a fill in the card's colour that slides to the tab you pick, only the open tab shows its icon and close glyph, and a strip that is too narrow scrolls with a soft edge instead of hiding tabs behind a menu. This replaces the pill, underline and close treatment that was on this PR before. ## Before   ## After   Switching tabs (the fill slides in about 140 ms and the new icon fades in over 80 ms; the panel body switches at once): https://github.com/user-attachments/assets/8d359ada-c9e1-4425-9c95-61d5d4f5271b ### Every label whole, and the tabs use the whole strip (2x) An earlier head clipped the left strip's fourth tab next to empty strip space. That space was a 72 px slot (plus 4 px) held on every strip for the strip actions, even on strips whose panel is not focused and so draws no actions. Dockview sizes that slot by its content; this PR had pinned it. Now the slot takes room only where the actions are drawn, so an unfocused strip gives its tabs the whole width. Tab padding is 6 px with no gap between tabs, so the tabs also fit next to the actions. Labels, icons and close glyphs sit on the tab's centre in every strip. Left strip at 1440 x 900, tabs width against the room before the action slot: | | macOS | Linux (these captures) | |---|---|---| | Earlier head | 322 in 280, clipped | 312 in 280, clipped | | Now, panel unfocused | 278 in 358 | 268 in 358 | | Now, panel focused (actions shown) | 278 in 282 | 268 in 282 |    At 1280 x 800 the left column is narrower, and the pinned slot clipped Catalog next to the empty space. Room for the tabs there went from 241 px to 317 px:   Captured at the PR head (5fd6c7bd) from a fixture project (the `warm-grain` registry example) in headless Chrome on Linux, 2x, each state loaded fresh so Studio builds its default layout for that window. Before is `main`; the strip Befores use the earlier heads' `dock.css` (8079c635 at 1440, 8ed7ab69 at 1280) on the same build. The macOS column was measured live in Chrome on macOS. The paper theme only re-themes the timeline today, so the panels look the same in both themes. ## What changed - **Cards on the shell.** Each dock group is a card with the only 1 px border (radius 10) and a 6 px gutter to its neighbours. The preview and timeline no longer draw a second rounded border inside it; the preview stage is an inset well. Dockview's tab dividers and separators are gone. - **Tabs.** Tabs use the whole strip unless the panel shows its actions. Every label is whole at the default 1440 x 900 layout (6 px side padding, no gap between tabs), and labels and icons are centred in the tab. The open tab is a fill with rounded top corners, flush with the card body. Only the open tab shows its type icon and close glyph (the glyph appears on hover or keyboard focus, and its space is kept so the label never moves). Other tabs are labels. - **One sliding fill per strip.** One element slides (transform and width, 140 ms ease-out) under the open tab. Reduced motion turns the slide and the icon fade off. Hover is instant. - **Strip actions** (panel menu, maximise or restore, close group) sit on the active group only, at half opacity while the pointer is in the panel and full on hover or focus. They take room only on the strip that draws them, so the other strips give their tabs the whole width. The panel menu lists that side's panels as checkboxes, plus Reset layout. - **Narrow strips** scroll sideways with a 12 px fade on the clipped edge. Dockview's overflow dropdown is off. - Tokens: `--panel-shell-bg`, `--panel-card-bg`, `--panel-card-border`, `--panel-strip-bg`, `--panel-tab-bg-hover`, with contrast pairs registered. ## Timeline viewport gate The first head of this rebuild (b20ff32a4) cost the timeline gate one frame on CI: interaction p95 33 ms on every run (first attempt 100 ms on three runs), against main's 20 ms. Main-thread traces were identical; the extra cost was compositing, from a fade mask on every tab strip. Masking only a strip that is actually clipped brought it back: | Head | Interaction p95 per run (ms) | Frame p95 (ms) | Runs passing | |---|---|---|---| | main | 20, 20, 19, 20, 18 | 34 | 5/5 | | b20ff32a4 (rerun) | 33, 33, 33, 33, 33 | 33 | 5/5 | | 41302773 | 18, 20, 19, 20, 17 | 33 | 5/5 | | eefaa839 | 18, 20, 18, 18, 20 | 17 | 5/5 | | af4f2b9b (tab spacing), first attempt | 18, 79, 18, 116, 19 | 100 | 3/5 | | af4f2b9b, rerun | 18, 16, 20, 18, 18 | 33 | 5/5 | | 8ed7ab69 | 17, 16, 19, 24, 20 | 33 | 5/5 | | 6a5edd89 | 33, 33, 33, 33, 33 | 17 | 5/5 | From about 14:30Z `main` itself reads 33 ms on every run (three consecutive `main` CI runs), and CI tests this PR merged with the current `main`, so the 6a5edd89 row matches `main`'s level at that time. The af4f2b9b first attempt had three runs at main's level and two single-run spikes; the same commit's rerun passed 5/5, and the change is tab spacing only. ## Tests Each rule that could regress without anyone noticing has a test, and each test was proved by breaking the code once: | Rule | Test | Break | Result | |---|---|---|---| | Icon and close glyph on the open tab only | `DockTabs.test.tsx` (dock.css applied, computed display) | delete the hide rule | 2 red | | Actions on the active group only | `DockTabs.test.tsx` | drop the active-group check | 1 red | | One fill per strip, following the open tab | `DockTabs.test.tsx` | fill stays at 0 / a second fill | 1 red each | | One border per surface | `dockTabs.contract.test.ts` | add a strip border | 1 red | | Only the slide and icon fade animate | `dockTabs.contract.test.ts` | add a hover transition | 1 red | | Reduced motion turns them off | `dockTabs.contract.test.ts` | remove the reduced-motion rule | 1 red | | Label and icon centred in the tab | `dockTabs.contract.test.ts` | drop the full-height rule | 1 red | | Every tab label whole at 1440 x 900 on each strip while its panel is focused (the least room it gets), with 10 px for macOS's wider system font (CI renders a Linux fallback) | `scripts/studio-runtime-smoke.mjs` (CI "Studio: load smoke", real Chrome) | the "Ca" head's spacing; a spacing that fits on Linux but clips on macOS | red on both ("312px of tabs in 280px", "276px of tabs in 280px"); green on main and this head | | Unfocused strips hold no room for actions they do not draw | `scripts/studio-runtime-smoke.mjs` | pin the action slot at 72 px again | red: "3 inactive dock strips hold width for actions they do not draw" | | The shown tab stays whole when its strip narrows (its panel gains focus and the actions appear), comes back narrower than it was before it was hidden, or when a neighbouring tab closes and it moves | `DockTabs.test.tsx` | ignore each of those changes in turn | 1 red each; checked live at 1280 x 800: clicking into the left panel's body used to leave Catalog 37 px hidden, now it is whole | | A strip the user scrolled by hand stays put when something else in the dock changes, when it widens, and through another panel's maximise and restore | `DockTabs.test.tsx` | reveal on every pass; on any width change; after a hidden spell | red each; checked live: a hand scroll of 20 px is still 20 px after a maximise and restore | Run alone, each exits 0: `DockTabs.test.tsx` 5, `dockTabs.contract.test.ts` 5, `Dock.test.tsx` 14, `dockAccessibility.test.ts` 10, `PreviewPane.test.tsx` 1, `Menu.test.tsx` 10, `scripts/contrastRatchet.test.ts` passing. ## Independent review An adversarial review (separate agent, mandate to refute) at 41302773, eefaa839, 8079c635, af4f2b9b and 8ed7ab69: **no blockers; one major, fixed.** - MAJOR (af4f2b9b), fixed in 8ed7ab69: CI renders Studio's system font stack with a narrower Linux fallback, so the clip check could pass while a Mac clips. The check now keeps 10 px of room for the macOS font, and a spacing that fits on Linux but clips on macOS turns it red. The 8ed7ab69 review asked whether 10 px holds for every strip, not just the left one it was measured on. Measured macOS minus Linux tab width at 1440 x 900: left 10 px, right 6 px, Preview and Timeline 2 px each, so the left strip is the widest gap and 10 px covers all four. - MINOR, left as is: the room check has no unit test of its own; it runs only in a real browser, and the smoke is its test (red on both broken spacings above). - MINOR: a panel cannot be closed from the focused tab itself by keyboard. The keyboard path is focused tab, Tab to "Panel menu", Enter, uncheck the panel (checked live: closes that one panel; checking it again reopens it). The tab's close glyph is not focusable, the same as dockview's stock tab on main, because a tab cannot hold a focusable button. - MINOR: the open tab is 16 px wider than on the design page (the close glyph's space is kept; see For Miguel). - Resolved: a contrast pair cited stale line numbers. ## UX checklist **Job:** someone editing a video moves between panels (Compositions, Assets, Code, Catalog; Design, Layers, Renders, Variables) many times an hour and needs to see which one is open and reach the next without hunting. **One action:** click the tab of the panel you want. | # | Question | Y/N | Evidence | |---|---|---|---| | 1 | First-time user knows what to do | Y | Tabs keep their labels; the open tab is joined to the body it controls (After captures) | | 2 | Interactive things look interactive | N | Strip actions are hidden until the pointer is in the panel (Miguel's decision; see Traded off) | | 3 | User's words, no internal ids | Y | Titles unchanged; controls named "Close Design", "Panel menu", "Maximize panel", "Close group" | | 4 | Works like other tools | Y | Editor-style tabs with maximise and a panel menu | | 5 | Guidance at the control | N | The three icon buttons have accessible names but no visible tooltip | | 6 | Primary action reachable without reading | Y | The tabs are the strip | | 7 | Exactly one primary action | Y | Tabs; actions are secondary and quiet | | 8 | Counts match data | Y | Titles come from each panel through `Dock.Panel` (`Dock.tsx` setTitle) | | 9 | Excluded items announce themselves | Y | Every label is whole at the default width (the load smoke checks it); a narrowed strip scrolls with an edge fade, and the panel menu lists every panel | | 10 | Long names recoverable | Y | Tabs never truncate; the strip scrolls | | 11 | Keyboard path | Y | Arrow keys move and activate tabs (existing); strip actions are buttons and show on focus | | 12 | Nothing hover-only that must be acted on | N | Same as 2 | | 13 | Refusals say what next | n/a | No refusals here | | 14 | Refusal next to the thing | n/a | | | 15 | Error prevented | n/a | | | 16 | Can leave any state without losing work | Y | Closed panels reopen from Window or the panel menu; Reset layout restores the default | | 17 | Destructive looks different | N | "Close group" uses the same x as a tab's close; it loses no work, and the Window menu reopens the panels | | 18 | Empty state names what is empty | n/a | | | 19 | Feedback within 400 ms | Y | The tab state and icon change in the same frame as the click; the fill arrives in 140 ms | | 20 | Progress on waits | n/a | | | 21 | Hand-built state survives reload | Y | Layout, open tab and maximised group persist per project (existing dock persistence) | **Choice:** four tabs per side, one click each. **The end:** the panel body appears at once and the fill settles under the tab you picked. **Not exercised:** a screen reader pass; touch input. **Traded off:** hover-only strip actions (rows 2 and 12) and scroll-plus-fade instead of an overflow menu when a strip is narrowed are Miguel's decided design. ## For Miguel - **Paper (light) theme:** Studio's paper block only re-themes the timeline today, so the panels are dark in both the Before and After paper shots. Panel paper values are Desktop's to set (design principles, section 7); this PR adds the token names Desktop can override. - **Action slot:** the design review asked for the action slot to be reserved on every strip, so tabs never move when focus changes panel. That reservation is what clipped "Ca" next to empty space, so it now holds room only on the focused panel. The cost: when a strip that is already too narrow gains focus, its actions take 76 px. The strip then scrolls so the shown tab stays whole, and a neighbouring tab can go under the edge fade. At the default 1440 x 900 nothing clips either way. - **Tab spacing:** side padding is 6 px (10 on the design page) and tabs have no gap. The design's 10 px would need 322 px on macOS; the left strip has 282 px beside its actions at 1440. A wider default left column would allow the design padding again. A narrower window scrolls the strip with the edge fade; per the decision there is no overflow chevron. - **Close glyph space:** the open tab keeps its close glyph's space at rest, so it is 16 px wider than on the design page, where the label shifts on hover. - **Not in this PR:** inspector section headers and the focused-card border step (later build steps).	2026-09-23 14:34:10 -04:00
Miguel Ángel	94609daf44	feat(studio): audio pills show real peaks and loudness (#4282) ... * feat(studio): audio clips draw real peaks shaded by loudness The pill fill is the track tint at 70 percent, and each bar's opacity follows the cached server peaks. Muting greys the pill in place. Linked video audio shows a 1px tick. * style(studio): format the audio waveform markup * fix(studio): map audio peaks across the full clip width * fix(studio): keep waveform visible through fade wedges * fix(studio): keep silent waveform bins visible * fix(studio): keep waveform baseline visible edge to edge * fix(studio): keep waveform visible over fades * fix(studio): keep quiet waveform bars visible * fix(studio): paint waveform above fade wedges * fix(studio): fit waveform inside audio clip * fix(studio): preserve waveform contrast tokens * test(studio): ratchet waveform color literals * fix(studio): keep loudness floor internal * chore(studio): document intentional fallow findings * refactor(studio): share fade handle rendering * fix(studio): pass fade handle styles explicitly * refactor(studio): split waveform drawing stages * test(studio): cover waveform canvas painting	2026-09-22 08:58:21 -04:00
Miguel Ángel	5203312c34	feat(studio): timeline clips take the designed material (#4270) ... * feat(studio): timeline clips take the designed material Picture clips use an 8px radius and audio clips a 21px pill. Clips sit one step above the lane. The label is a chip that drops under 60px. Selection keeps the inset outline plus a 1px inner highlight. Hover background is the only transition. * style(studio): format timeline clip shadow * fix(studio): restore handle-bar transition and de-pin box-shadow test	2026-09-22 02:15:55 -04:00
Miguel Ángel	86e27b00f6	ci(studio): ratchet colour contrast of timeline tokens (#4257) ... * ci(studio): ratchet colour contrast of timeline tokens * refactor(studio): clarify contrast ratchet branches and state citations * fix(studio): resolve contrast baseline from the repository root * test: parse contrast channel tokens without color wrappers * ci: keep contrast gate artifacts outside runtime sources * test: honor strict indexed access in contrast scripts * test: require removal of zero contrast baseline entries	2026-09-21 21:35:23 -04:00