@hyperframes/studio 0.8.104 → 0.8.105

package/src/player/lib/thumbnailScheduler.ts

@@ -23,6 +23,8 @@ export interface ThumbnailRequest {
   priority: ThumbnailPriority;
   /** Rich work is paused while the timeline is fast-scrolling. */
   rich?: boolean;
+  /** For work whose result nobody reads: it is dropped, not cached, once its last lease ends. */
+  discardWhenReleased?: boolean;
   load: (signal: AbortSignal) => Promise<ThumbnailLoadedResult>;
 }
 
@@ -214,10 +216,7 @@ export class ThumbnailScheduler {
     if (!scrolling) this.pump();
   }
 
-  /**
-   * Hold server-rendered composition thumbnails while the preview loads a new document: both
-   * are served by the same Studio server, and the preview is what the person is waiting for.
-   */
+  /** Holds composition renders while the preview loads: same server, and the preview is what the person awaits. */
   setPreviewReloading(reloading: boolean): void {
     if (this.previewReloading === reloading) return;
     this.previewReloading = reloading;
@@ -362,7 +361,7 @@ export class ThumbnailScheduler {
     const byteBudget = isWaveform
       ? this.budgets.waveformCacheBytes
       : this.budgets.thumbnailCacheBytes;
-    entry.cached = entry.weight <= byteBudget;
+    entry.cached = !entry.request.discardWhenReleased && entry.weight <= byteBudget;
     if (!entry.cached) return;
     if (isWaveform) this.waveformCacheBytes += entry.weight;
     else this.cacheBytes += entry.weight;

package/src/player/lib/timelineViewportBudgets.test.ts

@@ -23,7 +23,7 @@ describe("timeline viewport budgets", () => {
       constrainedLongTaskLimitMs: 300,
       posterCoverageRatio: 0.9,
       supportedFixtureFallbackRatio: 0.02,
-      scrollSamplesPerRun: 21,
+      scrollSamplesPerRun: 63,
       warmupRuns: 3,
       measuredRuns: 5,
       requiredPassingRuns: 4,

package/src/player/lib/timelineViewportBudgets.ts

@@ -99,7 +99,7 @@ export const TIMELINE_VIEWPORT_BUDGETS: Readonly<TimelineViewportBudgets> = Obje
   richPreviewP95Ms: 750,
   constrainedRichPreviewP95Ms: 1_200,
   supportedFixtureFallbackRatio: 0.02,
-  scrollSamplesPerRun: 21,
+  scrollSamplesPerRun: 63,
   warmupRuns: 3,
   measuredRuns: 5,
   requiredPassingRuns: 4,

package/src/styles/hex-baseline.json

@@ -1,41 +1,32 @@
 {
-  "total": 297,
+  "total": 226,
   "files": {
     "packages/studio/src/captions/components/CaptionOverlay.tsx": 5,
     "packages/studio/src/captions/components/CaptionTimeline.tsx": 11,
     "packages/studio/src/captions/generator.ts": 1,
     "packages/studio/src/captions/parser.ts": 1,
     "packages/studio/src/captions/types.ts": 4,
-    "packages/studio/src/components/StudioToast.tsx": 10,
-    "packages/studio/src/components/TimelineToolbar.tsx": 2,
+    "packages/studio/src/components/TimelineToolbar.tsx": 1,
     "packages/studio/src/components/editor/ArcPathControls.tsx": 1,
-    "packages/studio/src/components/editor/BorderRadiusEditor.tsx": 10,
+    "packages/studio/src/components/editor/BorderRadiusEditor.tsx": 2,
     "packages/studio/src/components/editor/DomEditCropHandles.tsx": 1,
-    "packages/studio/src/components/editor/EaseCurveSection.tsx": 2,
-    "packages/studio/src/components/editor/FileTree.tsx": 2,
-    "packages/studio/src/components/editor/FileTreeIcons.tsx": 17,
-    "packages/studio/src/components/editor/FileTreeNodes.tsx": 4,
+    "packages/studio/src/components/editor/FileTreeIcons.tsx": 7,
     "packages/studio/src/components/editor/GestureTrailOverlay.tsx": 1,
     "packages/studio/src/components/editor/GridOverlay.tsx": 4,
-    "packages/studio/src/components/editor/InlineTextToolbar.tsx": 2,
-    "packages/studio/src/components/editor/KeyframeDiamond.tsx": 2,
-    "packages/studio/src/components/editor/KeyframeNavigation.tsx": 2,
+    "packages/studio/src/components/editor/InlineTextToolbar.tsx": 1,
     "packages/studio/src/components/editor/MotionPathNode.tsx": 5,
     "packages/studio/src/components/editor/SnapGuideOverlay.tsx": 3,
-    "packages/studio/src/components/editor/TimelineFxPopover.tsx": 1,
-    "packages/studio/src/components/editor/Transform3DCube.tsx": 6,
+    "packages/studio/src/components/editor/Transform3DCube.tsx": 5,
     "packages/studio/src/components/editor/colorValue.ts": 3,
     "packages/studio/src/components/editor/domEditingElement.ts": 1,
-    "packages/studio/src/components/editor/easeCurveSvg.tsx": 2,
     "packages/studio/src/components/editor/gradientValue.ts": 6,
     "packages/studio/src/components/editor/panelTokens.ts": 4,
     "packages/studio/src/components/editor/propertyPanelColor.tsx": 7,
-    "packages/studio/src/components/editor/propertyPanelColorCurveGraph.tsx": 17,
+    "packages/studio/src/components/editor/propertyPanelColorCurveGraph.tsx": 16,
     "packages/studio/src/components/editor/propertyPanelColorScopes.tsx": 8,
     "packages/studio/src/components/editor/propertyPanelColorWheels.tsx": 8,
     "packages/studio/src/components/editor/propertyPanelFlatEffectsSection.tsx": 5,
     "packages/studio/src/components/editor/propertyPanelFlatStyleSections.tsx": 2,
-    "packages/studio/src/components/editor/propertyPanelFxCarveModule.tsx": 1,
     "packages/studio/src/components/editor/propertyPanelFxFamily.ts": 1,
     "packages/studio/src/components/editor/propertyPanelFxPresetStyle.ts": 24,
     "packages/studio/src/components/editor/propertyPanelHelpers.ts": 4,
@@ -43,7 +34,6 @@
     "packages/studio/src/components/editor/propertyPanelSections.tsx": 1,
     "packages/studio/src/components/editor/propertyPanelStyleSections.tsx": 3,
     "packages/studio/src/components/editor/transform3dProjection.ts": 3,
-    "packages/studio/src/components/feedback/StudioFeedbackCard.tsx": 10,
     "packages/studio/src/components/panels/VariablesBindElement.tsx": 2,
     "packages/studio/src/components/panels/VariablesValueControls.tsx": 2,
     "packages/studio/src/components/sidebar/AudioRow.tsx": 2,
@@ -54,9 +44,7 @@
     "packages/studio/src/player/components/CompositionThumbnail.tsx": 2,
     "packages/studio/src/player/components/Player.tsx": 2,
     "packages/studio/src/player/components/PlayerControls.tsx": 1,
-    "packages/studio/src/player/components/ShortcutsPanel.tsx": 7,
     "packages/studio/src/player/components/SpeedMenu.tsx": 2,
-    "packages/studio/src/player/components/trackHeaderLabelRows.tsx": 6,
     "packages/studio/src/styles/components.css": 48,
     "packages/studio/src/telemetry/client.ts": 1,
     "packages/studio/src/webmcp/webmcpTestUtils.ts": 1

package/src/styles/studio.css

@@ -16,15 +16,6 @@
   }
 }
 
-/*
- * Studio is a dark-only UI — pin the user-agent color scheme to dark so that
- * browser-native chrome (scrollbars, form controls, focus rings) picks the
- * matching palette instead of defaulting to light against our #0a0a0a body.
- */
-:root {
-  color-scheme: dark;
-}
-
 body {
   margin: 0;
   padding: 0;

package/src/styles/tailwind-preset.shared.js

@@ -1,6 +1,7 @@
 /** @deprecated Superseded by `src/styles/theme.css` (published as
  * `@hyperframes/studio/theme.css`); kept one more major for Tailwind v3
- * consumers. Values are byte-identical; theme.test.ts fails if they drift. */
+ * consumers, frozen at the colours before Graphite (theme.css is light-dark() and colour-mix
+ * now, which v3 cannot read). */
 const studioPreset = {
   theme: {
     extend: {

package/src/styles/theme.css

@@ -5,72 +5,110 @@
 @theme static {
   /* ---------------------------------------------------------------- colour */
 
-  /* Background levels, darkest (app shell) to lightest (inset panel body). */
-  --color-bg-0: #0a0a0a;
-  --color-bg-1: #0c0c0e;
-  --color-bg-2: #121214;
-
-  /* Raised surfaces. */
-  --color-surface: #18181b;
-  --color-surface-alt: #141414;
-  --color-input: #161618;
-  --color-hover: #27272a;
-
-  /* Separators, weakest to strongest. */
-  --color-hairline: #1a1a1c;
-  --color-border: #1e1e1e;
-  --color-border-input: #27272a;
-  --color-border-strong: #262626;
-
-  /* Text, brightest (0) to dimmest (5). */
-  --color-text-0: #fafafa;
-  --color-text-1: #e4e4e7;
-  --color-text-2: #a1a1aa;
-  --color-text-3: #71717a;
-  --color-text-4: #52525b;
-  --color-text-5: #3f3f46;
-  --color-text-body: #e5e5e5;
-  --color-text-muted: #737373;
+  /* Graphite. Each colour is `light-dark(light, dark)`, resolved where it is painted, so the
+   * colour-scheme decides: Studio is dark, `data-theme="paper"` makes it light, and the player
+   * keeps a dark scheme in both. Text clears 4.5:1 and icons 3:1 on every surface below. */
+
+  /* Surfaces: the app shell first, menus and popovers last. */
+  --color-bg-0: light-dark(oklch(0.955 0.005 70), oklch(0.235 0.007 70));
+  --color-bg-1: var(--color-bg-0);
+  --color-bg-2: var(--color-surface);
+  --color-input: light-dark(oklch(1 0 70), oklch(0.25 0.007 70));
+  --color-surface: light-dark(oklch(0.987 0.005 70), oklch(0.265 0.007 70));
+  --color-surface-alt: var(--color-surface);
+  /* Menus, popovers and tooltips. */
+  --color-raised: light-dark(oklch(1 0 70), oklch(0.295 0.007 70));
+
+  /* States, washes of the brightest text so they work on any surface. `on` is a toggle that is on. */
+  --color-hover: light-dark(
+    color-mix(in oklab, var(--color-text-0) 5.5%, transparent),
+    color-mix(in oklab, var(--color-text-0) 7.5%, transparent)
+  );
+  --color-press: light-dark(
+    color-mix(in oklab, var(--color-text-0) 9.5%, transparent),
+    color-mix(in oklab, var(--color-text-0) 13%, transparent)
+  );
+  --color-on: light-dark(
+    color-mix(in oklab, var(--color-accent) 13%, transparent),
+    color-mix(in oklab, var(--color-accent) 16%, transparent)
+  );
+  --color-on-hover: light-dark(
+    color-mix(in oklab, var(--color-accent) 22%, transparent),
+    color-mix(in oklab, var(--color-accent) 27%, transparent)
+  );
+
+  /* Separators. */
+  --color-border: light-dark(
+    color-mix(in oklab, var(--color-text-0) 8%, transparent),
+    color-mix(in oklab, var(--color-text-0) 7.5%, transparent)
+  );
+  --color-hairline: var(--color-border);
+  --color-border-strong: light-dark(
+    color-mix(in oklab, var(--color-text-0) 15%, transparent),
+    color-mix(in oklab, var(--color-text-0) 14%, transparent)
+  );
+  --color-border-input: var(--color-border-strong);
+
+  /* Text: primary, secondary, muted (4.5:1), and off (3:1, disabled controls only). */
+  --color-text-0: light-dark(oklch(0.205 0.003 70), oklch(0.965 0.004 70));
+  --color-text-1: var(--color-text-0);
+  --color-text-body: var(--color-text-0);
+  --color-text-2: light-dark(oklch(0.403 0.003 70), oklch(0.908 0.004 70));
+  --color-text-3: var(--color-text-2);
+  --color-text-muted: light-dark(oklch(0.503 0.003 70), oklch(0.777 0.004 70));
+  --color-text-4: var(--color-text-muted);
+  --color-text-5: var(--color-text-muted);
+  --color-text-off: light-dark(oklch(0.597 0.003 70), oklch(0.67 0.004 70));
 
   /* Roles. Selection and playhead are reserved and differ from the accent so a
-   * selected clip, the playhead and an accented control stay tellable apart. */
-  --color-accent: #3ce6ac;
-  --color-selection: #4ba3d2;
-  --color-playhead: #ffffff;
-  --color-danger: #ef4444;
-  --color-media: #00e3ff;
-  --color-container: #f5a623;
+   * selected clip, the playhead and an accented control stay tellable apart.
+   * `accent-ink` is accent text on a surface; `on-accent` is text on an accent fill. */
+  --color-accent: light-dark(oklch(0.536 0.114 164), oklch(0.82 0.159 164));
+  --color-accent-hover: light-dark(oklch(0.486 0.103 164), oklch(0.87 0.159 164));
+  --color-on-accent: light-dark(oklch(1 0 0), oklch(0.2 0.043 164));
+  --color-accent-ink: light-dark(oklch(0.45 0.096 164), oklch(0.827 0.159 164));
+  --color-ring: var(--color-accent-ink);
+  --color-selection: light-dark(oklch(0.5 0.13 240), #4ba3d2);
+  --color-playhead: var(--color-text-0);
+  --color-danger: oklch(0.56 0.19 25);
+  --color-danger-ink: light-dark(oklch(0.45 0.17 25), oklch(0.791 0.12 25));
+  --color-warning-ink: light-dark(oklch(0.5 0.12 70), oklch(82.8% 0.189 84.429));
+  --color-on-danger: oklch(1 0 0);
+  --color-media: light-dark(oklch(0.5 0.1 215), #00e3ff);
+  --color-container: light-dark(oklch(0.55 0.13 70), #f5a623);
 
   /* The two stops of the HeyGen brand gradient, worn by the header logo. Fixed brand values
    * rather than roles, so they are not reachable as a background or text colour by mistake. */
   --color-brand-gradient-from: #06e3fa;
   --color-brand-gradient-to: #4fdb5e;
 
-  /* The timeline's own surfaces: darker and bluer than the shared scale, so they
-   * get their own names instead of snapping to the nearest --color-bg/-surface
-   * step (a host themes the timeline by overriding these). */
-  --timeline-shell-bg: #0a0a0b;
-  --timeline-shell-border: rgba(255, 255, 255, 0.05);
-  --timeline-ruler-border: rgba(255, 255, 255, 0.16);
-  --timeline-row-bg: #101014;
-  --timeline-row-border: rgba(255, 255, 255, 0.06);
-  --timeline-gutter-bg: #0e0f12;
-  --timeline-gutter-border: rgba(255, 255, 255, 0.1);
-  --timeline-text-primary: rgba(255, 255, 255, 0.92);
-  --timeline-text-secondary: rgba(255, 255, 255, 0.62);
-  --timeline-tick-text: rgba(255, 255, 255, 0.34);
-  --timeline-tick-major: rgba(255, 255, 255, 0.1);
-  --timeline-tick-minor: rgba(255, 255, 255, 0.06);
-  --timeline-clip-bg: rgba(255, 255, 255, 0.12);
-  --timeline-clip-label-active: rgba(232, 255, 247, 0.95);
+  /* The timeline's own surfaces and inks, named so a host can theme the timeline alone. */
+  --timeline-shell-bg: var(--color-surface);
+  --timeline-shell-border: var(--color-border);
+  --timeline-ruler-border: color-mix(in oklab, var(--color-text-0) 16%, transparent);
+  --timeline-row-bg: light-dark(oklch(0.997 0.002 70), oklch(0.275 0.007 70));
+  --timeline-row-border: color-mix(in oklab, var(--color-text-0) 6%, transparent);
+  --timeline-gutter-bg: light-dark(oklch(0.967 0.005 70), oklch(0.253 0.007 70));
+  --timeline-gutter-border: color-mix(in oklab, var(--color-text-0) 10%, transparent);
+  --timeline-text-primary: var(--color-text-0);
+  --timeline-text-secondary: var(--color-text-2);
+  --timeline-tick-text: var(--color-text-2);
+  --timeline-tick-major: color-mix(in oklab, var(--color-text-0) 10%, transparent);
+  --timeline-tick-minor: color-mix(in oklab, var(--color-text-0) 6%, transparent);
+  --timeline-clip-bg: light-dark(
+    color-mix(in oklab, var(--color-text-0) 12%, transparent),
+    color-mix(in oklab, var(--color-text-0) 13%, transparent)
+  );
+  --timeline-clip-label-active: light-dark(#0b3d2c, rgba(232, 255, 247, 0.95));
   --timeline-clip-label-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
-  --timeline-clip-audio-bg: rgba(167, 139, 250, 0.16);
-  --timeline-clip-audio-border: rgba(167, 139, 250, 0.4);
-  --timeline-clip-audio-bg-hover: rgba(167, 139, 250, 0.24);
-  --timeline-clip-audio-bg-dragging: rgba(60, 52, 84, 0.96);
+  /* Audio clips are a solid fill that carries white ink in both themes. */
+  --timeline-clip-audio-bg: oklch(0.45 0.12 300);
+  --timeline-clip-audio-border: oklch(0.37 0.12 300);
+  --timeline-clip-audio-bg-hover: oklch(0.49 0.12 300);
+  --timeline-clip-audio-bg-dragging: oklch(0.42 0.12 300 / 0.96);
   --timeline-clip-audio-muted-bg: rgb(72, 74, 78);
-  --timeline-audio-link: #a0aaa4;
-  --timeline-clip-selection: rgba(255, 255, 255, 0.85);
+  --timeline-audio-link: light-dark(#626d66, #a0aaa4);
+  --timeline-clip-selection: light-dark(#0f766e, rgba(255, 255, 255, 0.85));
   --timeline-clip-selection-highlight: rgb(255 255 255 / 0.55);
   --timeline-clip-radius: 8px;
   --timeline-clip-audio-radius: 21px;
@@ -79,7 +117,7 @@
   --timeline-clip-chip-bg: rgba(15, 22, 18, 0.73);
   --timeline-clip-chip-audio-bg: rgba(25, 16, 38, 0.7);
   --timeline-clip-chip-text: #ffffff;
-  --timeline-shortcut-bg: rgba(17, 23, 35, 0.84);
+  --timeline-shortcut-bg: color-mix(in oklab, var(--color-raised) 94%, transparent);
   /* Composition and text clips draw their frame as it is, like video filmstrips; a host may dim them. */
   --timeline-composition-thumbnail-opacity: 1;
   --timeline-composition-thumbnail-blend: normal;
@@ -105,58 +143,82 @@
     transparent 2px 5px
   );
   --timeline-waveform-label-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
-  --timeline-clip-bg-active: rgba(60, 230, 172, 0.2);
-  --timeline-clip-bg-hover: rgba(255, 255, 255, 0.16);
-  --timeline-clip-bg-dragging: rgba(38, 42, 52, 0.96);
-  --timeline-clip-border: rgba(255, 255, 255, 0.22);
-  --timeline-clip-border-hover: rgba(60, 230, 172, 0.75);
-  --timeline-clip-border-active: rgba(60, 230, 172, 0.55);
-  --timeline-handle: rgba(255, 255, 255, 0.55);
+  --timeline-clip-bg-active: color-mix(in oklab, var(--color-accent) 20%, transparent);
+  --timeline-clip-bg-hover: light-dark(
+    color-mix(in oklab, var(--color-text-0) 26%, transparent),
+    color-mix(in oklab, var(--color-text-0) 16%, transparent)
+  );
+  --timeline-clip-bg-dragging: color-mix(in oklab, var(--color-raised) 96%, transparent);
+  --timeline-clip-border: light-dark(
+    color-mix(in oklab, var(--color-text-0) 40%, transparent),
+    color-mix(in oklab, var(--color-text-0) 30%, transparent)
+  );
+  --timeline-clip-border-hover: color-mix(in oklab, var(--color-accent) 75%, transparent);
+  --timeline-clip-border-active: light-dark(
+    color-mix(in oklab, var(--color-accent) 90%, transparent),
+    color-mix(in oklab, var(--color-accent) 55%, transparent)
+  );
+  --timeline-handle: var(--color-text-0);
   /* Audio clip fades: the shaded wedge over the faded gain, and the corner dots. */
   --timeline-fade-shade: rgba(0, 0, 0, 0.38);
   --timeline-fade-dot: #fff;
   --timeline-fade-dot-ring: rgba(0, 0, 0, 0.55);
-  --timeline-resize-seam: rgba(255, 255, 255, 0.12);
-  --timeline-resize-active: rgba(255, 255, 255, 0.24);
-  --timeline-track-clip-fill: rgba(255, 255, 255, 0.055);
-  --timeline-track-clip-active: rgba(60, 230, 172, 0.16);
-  --timeline-track-label: rgba(255, 255, 255, 0.5);
-  --timeline-border-strong: rgba(255, 255, 255, 0.2);
-  --timeline-group-member-tint: rgba(255, 255, 255, 0.035);
-  --timeline-overlay-text: rgba(255, 255, 255, 0.8);
-  --timeline-accent: #3ce6ac;
-  --timeline-accent-soft: rgba(60, 230, 172, 0.18);
-  --timeline-accent-faint: rgba(60, 230, 172, 0.055);
-  --timeline-accent-fill: rgba(60, 230, 172, 0.1);
-  --timeline-accent-glow: rgba(60, 230, 172, 0.5);
-  --timeline-accent-border: rgba(60, 230, 172, 0.7);
-  --timeline-accent-rail: rgba(60, 230, 172, 0.35);
-  --timeline-accent-hover: rgba(60, 230, 172, 0.25);
-  --timeline-accent-button-bg: rgba(60, 230, 172, 0.15);
-  --timeline-danger: rgba(239, 68, 68, 0.7);
+  --timeline-resize-seam: color-mix(in oklab, var(--color-text-0) 12%, transparent);
+  --timeline-resize-active: color-mix(in oklab, var(--color-text-0) 24%, transparent);
+  --timeline-track-clip-fill: color-mix(in oklab, var(--color-text-0) 8%, transparent);
+  --timeline-track-clip-active: color-mix(in oklab, var(--color-accent) 20%, transparent);
+  --timeline-track-label: var(--color-text-muted);
+  --timeline-border-strong: color-mix(in oklab, var(--color-text-0) 20%, transparent);
+  --timeline-group-member-tint: color-mix(in oklab, var(--color-text-0) 3.5%, transparent);
+  --timeline-overlay-text: var(--color-text-2);
+  --timeline-accent: var(--color-accent);
+  --timeline-accent-soft: color-mix(in oklab, var(--color-accent) 18%, transparent);
+  --timeline-accent-faint: color-mix(in oklab, var(--color-accent) 5.5%, transparent);
+  --timeline-accent-fill: color-mix(in oklab, var(--color-accent) 10%, transparent);
+  --timeline-accent-glow: color-mix(in oklab, var(--color-accent) 50%, transparent);
+  --timeline-accent-border: color-mix(in oklab, var(--color-accent) 70%, transparent);
+  --timeline-accent-rail: color-mix(in oklab, var(--color-accent) 35%, transparent);
+  --timeline-accent-hover: var(--color-on-hover);
+  --timeline-accent-button-bg: var(--color-on);
+  --timeline-danger: color-mix(in oklab, var(--color-danger) 70%, transparent);
   --timeline-info-bg: rgba(59, 130, 246, 0.12);
   --timeline-info-border: rgba(59, 130, 246, 0.4);
-  --timeline-dialog-bg: #1b1b1f;
-  --timeline-diamond-bg: #171717;
-  --timeline-diamond-border: rgba(255, 255, 255, 0.14);
-  --timeline-text-solid: #ffffff;
-  --timeline-text-faint: rgba(255, 255, 255, 0.35);
-  --timeline-text-dim: rgba(255, 255, 255, 0.4);
-  --timeline-text-soft: rgba(255, 255, 255, 0.75);
-  --timeline-text-bright: rgba(255, 255, 255, 0.7);
-  --timeline-snap-guide: rgba(255, 255, 255, 0.6);
-  --timeline-overlay-bg: rgba(0, 0, 0, 0.8);
-  --timeline-overlay-bg-strong: rgba(0, 0, 0, 0.85);
-  --timeline-input-bg: rgba(0, 0, 0, 0.3);
-  --timeline-automation-rail: rgba(255, 255, 255, 0.08);
-  --timeline-automation-point-muted: rgba(0, 0, 0, 0.5);
-  --timeline-diamond-muted: #a3a3a3;
+  --timeline-dialog-bg: var(--color-raised);
+  --timeline-diamond-bg: var(--color-raised);
+  --timeline-diamond-border: color-mix(in oklab, var(--color-text-0) 14%, transparent);
+  --timeline-text-solid: var(--color-text-0);
+  --timeline-text-faint: var(--color-text-off);
+  --timeline-text-dim: var(--color-text-muted);
+  --timeline-text-soft: var(--color-text-2);
+  --timeline-text-bright: var(--color-text-2);
+  --timeline-snap-guide: color-mix(in oklab, var(--color-text-0) 60%, transparent);
+  --timeline-overlay-bg: light-dark(oklch(1 0 70 / 0.9), rgba(0, 0, 0, 0.8));
+  --timeline-overlay-bg-strong: light-dark(oklch(1 0 70 / 0.95), rgba(0, 0, 0, 0.85));
+  --timeline-input-bg: light-dark(
+    color-mix(in oklab, var(--color-text-0) 5%, transparent),
+    rgba(0, 0, 0, 0.3)
+  );
+  --timeline-automation-rail: color-mix(in oklab, var(--color-text-0) 8%, transparent);
+  --timeline-automation-point-muted: light-dark(
+    color-mix(in oklab, var(--color-text-0) 30%, transparent),
+    rgba(0, 0, 0, 0.5)
+  );
+  --timeline-diamond-muted: var(--color-text-muted);
   --timeline-beat: rgb(34, 197, 94);
-  --timeline-clip-shadow-dragging: rgba(0, 0, 0, 0.4);
-  --timeline-playhead-glow: rgba(60, 230, 172, 0.14);
-  --timeline-playhead-shadow: rgba(0, 0, 0, 0.55);
-  --timeline-transition-zone: rgba(255, 255, 255, 0.2);
-  --timeline-transition-badge: rgba(237, 244, 239, 0.98);
+  --timeline-clip-shadow-dragging: light-dark(
+    color-mix(in oklab, var(--color-text-0) 16%, transparent),
+    rgba(0, 0, 0, 0.4)
+  );
+  --timeline-playhead-glow: color-mix(in oklab, var(--color-accent) 14%, transparent);
+  --timeline-playhead-shadow: light-dark(
+    color-mix(in oklab, var(--color-text-0) 20%, transparent),
+    rgba(0, 0, 0, 0.55)
+  );
+  --timeline-transition-zone: light-dark(
+    color-mix(in oklab, var(--color-text-0) 12%, transparent),
+    color-mix(in oklab, var(--color-text-0) 20%, transparent)
+  );
+  --timeline-transition-badge: light-dark(#ffffff, rgba(237, 244, 239, 0.98));
   --timeline-transition-badge-ink: rgba(36, 56, 45, 0.96);
 
   /* -------------------------------------------------------------- geometry */
@@ -197,14 +259,16 @@
 
   /* ---------------------------------------------------------------- shadow */
 
-  /* Floating chrome over a near-black canvas: the hairline ring does the edge
-   * definition that a light-mode drop shadow cannot. */
-  --shadow-menu: 0 8px 24px rgb(0 0 0 / 0.45), 0 0 0 1px rgb(0 0 0 / 0.4);
-  --shadow-popover: 0 16px 40px rgb(0 0 0 / 0.55), 0 0 0 1px rgb(0 0 0 / 0.45);
+  /* Floating chrome: a drop shadow plus a hairline ring that defines the edge. */
+  --shadow-menu:
+    0 8px 24px light-dark(rgb(0 0 0 / 0.12), rgb(0 0 0 / 0.45)),
+    0 0 0 1px light-dark(rgb(0 0 0 / 0.07), rgb(0 0 0 / 0.4));
+  --shadow-popover:
+    0 16px 40px light-dark(rgb(0 0 0 / 0.14), rgb(0 0 0 / 0.55)),
+    0 0 0 1px light-dark(rgb(0 0 0 / 0.07), rgb(0 0 0 / 0.45));
 
-  /* The primary button is the one light surface in a dark UI, so it reads as a
-   * raised key rather than a floating panel: a tight contact shadow, a soft
-   * ambient one, and an inner top highlight. */
+  /* The primary button reads as a raised key rather than a floating panel: a tight
+   * contact shadow, a soft ambient one, and an inner top highlight. */
   --shadow-btn-primary:
     0 1px 2px rgb(0 0 0 / 0.6), 0 2px 6px rgb(0 0 0 / 0.35), inset 0 1px 0 rgb(255 255 255 / 0.65);
 
@@ -277,9 +341,9 @@
    * strip sits below the card body and the shown tab is a fill in the body colour. */
   --panel-shell-bg: var(--color-bg-1);
   --panel-card-bg: var(--color-surface);
-  --panel-card-border: #303034;
+  --panel-card-border: var(--color-border-strong);
   --panel-strip-bg: var(--color-bg-0);
-  --panel-tab-bg-hover: #202023;
+  --panel-tab-bg-hover: var(--color-hover);
 
   /* Names Studio's markup invented that no config ever defined, so the classes
    * compiled to nothing. Aliased to the token that was meant, rather than
@@ -291,9 +355,9 @@
 
   /* ------------------------------------------- deprecated: Tailwind palette */
 
-  /* Verbatim Tailwind 4.3.3 defaults for stock colours markup still names, so
-   * `--color-*: initial` does not blank them. U12 deletes this block;
-   * `theme.test.ts` fails if a value drifts from upstream. */
+  /* Stock colours markup still names, so `--color-*: initial` does not blank them. U12 deletes
+   * this block. The neutral scale is Graphite's roles by the job each step does in markup (light
+   * steps text, dark steps surfaces and lines); the rest are verbatim Tailwind 4.3.3 defaults. */
   --color-amber-50: oklch(98.7% 0.022 95.277);
   --color-amber-100: oklch(96.2% 0.059 95.617);
   --color-amber-200: oklch(92.4% 0.12 95.746);
@@ -315,17 +379,17 @@
   --color-green-400: oklch(79.2% 0.209 151.711);
   --color-green-500: oklch(72.3% 0.219 149.579);
   --color-green-600: oklch(62.7% 0.194 149.214);
-  --color-neutral-50: oklch(98.5% 0 none);
-  --color-neutral-100: oklch(97% 0 none);
-  --color-neutral-200: oklch(92.2% 0 none);
-  --color-neutral-300: oklch(87% 0 none);
-  --color-neutral-400: oklch(70.8% 0 none);
-  --color-neutral-500: oklch(55.6% 0 none);
-  --color-neutral-600: oklch(43.9% 0 none);
-  --color-neutral-700: oklch(37.1% 0 none);
-  --color-neutral-800: oklch(26.9% 0 none);
-  --color-neutral-900: oklch(20.5% 0 none);
-  --color-neutral-950: oklch(14.5% 0 none);
+  --color-neutral-50: var(--color-text-0);
+  --color-neutral-100: var(--color-text-0);
+  --color-neutral-200: var(--color-text-0);
+  --color-neutral-300: var(--color-text-2);
+  --color-neutral-400: var(--color-text-2);
+  --color-neutral-500: var(--color-text-muted);
+  --color-neutral-600: var(--color-text-muted);
+  --color-neutral-700: var(--color-border-strong);
+  --color-neutral-800: var(--color-border);
+  --color-neutral-900: var(--color-surface);
+  --color-neutral-950: var(--color-bg-0);
   --color-orange-300: oklch(83.7% 0.128 66.29);
   --color-orange-400: oklch(75% 0.183 55.934);
   --color-pink-400: oklch(71.8% 0.202 349.761);
@@ -359,31 +423,24 @@
   --color-white: #fff;
 }
 
-/* One paper block. A host sets data-theme="paper" on the document element. */
+/* The colour-scheme picks each token's light or dark half: dark unless the document element
+ * has data-theme="paper". Base layer, so a host's own colour-scheme wins. */
+@layer base {
+  :root {
+    color-scheme: dark;
+  }
+  :root:where([data-theme="paper"]) {
+    color-scheme: light;
+  }
+}
 :root[data-theme="paper"] {
-  --timeline-shell-bg: #f4f6f3;
-  --timeline-row-bg: #edf0ed;
-  --timeline-clip-bg: #c9d1cb;
+  --timeline-clip-label-shadow: none;
   --timeline-clip-shadow: 0 2px 6px rgb(0 0 0 / 0.12);
-  --timeline-clip-highlight: rgb(255 255 255 / 0.08);
-  --timeline-clip-selection: #0f766e;
-  --timeline-clip-selection-highlight: rgb(255 255 255 / 0.55);
-  --timeline-clip-chip-bg: rgba(15, 22, 18, 0.73);
-  --timeline-clip-chip-audio-bg: rgba(25, 16, 38, 0.7);
-  --timeline-clip-chip-text: #ffffff;
-  --timeline-clip-audio-bg: rgb(150, 128, 180);
-  --timeline-clip-audio-bg-hover: rgb(135, 109, 170);
-  --timeline-clip-audio-bg-dragging: rgb(232, 224, 242);
-  --timeline-clip-audio-border: rgba(113, 80, 155, 0.45);
-  --timeline-clip-audio-muted-bg: rgb(156, 161, 157);
-  --timeline-audio-link: #626d66;
-  --timeline-waveform-bar-rgb: 20, 12, 32;
-  --timeline-waveform-muted-rgb: 24, 28, 26;
-  --timeline-waveform-baseline-rgb: 76, 62, 88;
-  --timeline-waveform-error: repeating-linear-gradient(
+  --timeline-thumbnail-shimmer: linear-gradient(
     90deg,
-    rgba(20, 12, 32, 0.35) 0 2px,
-    transparent 2px 5px
+    rgba(24, 24, 27, 0.02) 0%,
+    rgba(24, 24, 27, 0.05) 50%,
+    rgba(24, 24, 27, 0.02) 100%
   );
 }