@hyperframes/studio 0.8.59 → 0.8.60

package/src/components/nle/AudioMeterStrip.tsx

@@ -1,7 +1,27 @@
-import { memo, useEffect, useMemo, useRef, type Ref, type RefObject } from "react";
+import {
+  memo,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  type PointerEvent as ReactPointerEvent,
+  type Ref,
+  type RefObject,
+} from "react";
+import {
+  AUDIO_GAIN_FADER_MIN,
+  AUDIO_GAIN_FADER_MAX,
+  audioGainToFaderPosition,
+  audioFaderPositionToGain,
+  audioGainToText,
+  formatAudioGain,
+} from "@hyperframes/core/audio-gain";
+import type { StereoLevel } from "@hyperframes/core/runtime/levelTap";
 import { usePlayerStore } from "../../player";
+import { clampNumber } from "../../utils/studioHelpers";
 import { useAudioMetersVisible } from "../../utils/audioMeterVisibility";
 import { useStudioShellContext } from "../../contexts/StudioContext";
+import { useTimelineEditContextOptional } from "../../contexts/TimelineEditContext";
 import {
   METER_DB_MARKS,
   useProjectHasAudio,
@@ -11,8 +31,8 @@ import {
 } from "../../utils/audioMeterMath";
 
 interface Levels {
-  master: { l: number; r: number };
-  groups: Record<string, { l: number; r: number }>;
+  master: StereoLevel;
+  groups: Record<string, StereoLevel>;
 }
 interface AudioMeterHook {
   start(): void;
@@ -22,23 +42,67 @@ interface AudioMeterHook {
 interface Strip {
   id: string | null;
   label: string;
+  volume: number;
 }
-type Bars = { fill: HTMLElement | null; peak: HTMLElement | null };
+type Bars = { mask: HTMLElement | null; peak: HTMLElement | null };
 type StripBars = [Bars, Bars];
 
-const MASTER: Strip = { id: null, label: "Master" };
+const MONITOR_LABEL = "Monitor";
+
+/** Where the fill turns amber, then red, on the same piecewise dB scale the marks use. */
+const AMBER_AT = markFraction(-6);
+const RED_AT = markFraction(-3);
 
 function useStrips(): Strip[] {
   const elements = usePlayerStore((s) => s.elements);
+  const masterVolume = usePlayerStore((s) => s.audioVolume);
   return useMemo(() => {
     const labels = new Map<string, string>();
+    const volumes = new Map<string, number>();
     for (const el of elements) {
       if (el.audioGroup && !labels.has(el.audioGroup)) {
         labels.set(el.audioGroup, el.audioGroupLabel ?? el.audioGroup);
+        volumes.set(el.audioGroup, el.audioGroupVolume ?? 1);
       }
     }
-    return [...[...labels].map(([id, label]) => ({ id, label })), MASTER];
-  }, [elements]);
+    return [
+      ...[...labels].map(([id, label]) => ({ id, label, volume: volumes.get(id) ?? 1 })),
+      { id: null, label: MONITOR_LABEL, volume: masterVolume },
+    ];
+  }, [elements, masterVolume]);
+}
+
+/** Group volume through the existing `data-volume` write path (live while dragging, one
+ *  undo entry on release); monitor volume through the player store's own volume action —
+ *  the same one `VolumeControl` in `PlayerControls` already drives. */
+function useVolumeHandlers(): {
+  onLive: (id: string | null, volume: number) => void;
+  onCommit: (id: string | null, volume: number) => void;
+} {
+  const { onSetAudioGroupAttributeLive, onSetAudioGroupAttributeQuiet } =
+    useTimelineEditContextOptional();
+  const setAudioVolume = usePlayerStore((s) => s.setAudioVolume);
+  const onLive = useCallback(
+    (id: string | null, volume: number) => {
+      if (id === null) setAudioVolume(volume);
+      else onSetAudioGroupAttributeLive?.(id, "data-volume", formatAudioGain(volume));
+    },
+    [onSetAudioGroupAttributeLive, setAudioVolume],
+  );
+  const onCommit = useCallback(
+    (id: string | null, volume: number) => {
+      if (id === null) setAudioVolume(volume);
+      else
+        void onSetAudioGroupAttributeQuiet?.(
+          id,
+          "data-volume",
+          formatAudioGain(volume),
+          "Set volume",
+        );
+    },
+    [onSetAudioGroupAttributeQuiet, setAudioVolume],
+  );
+  return { onLive, onCommit };
 }
 
 type PreviewWindow = (Window & { __hf?: { audioMeter?: AudioMeterHook } }) | null | undefined;
@@ -59,13 +123,61 @@ function paintPeak(el: HTMLElement | null, peak: number): void {
   el.style.setProperty("transform", peak >= 1 ? "translateY(1px)" : "none");
 }
 
+/** The fill is a fixed green/amber/red backdrop; painting only moves the dark
+ *  mask that covers the unlit top portion, so a loud peak lights the real red
+ *  band instead of tinting a flat colour brighter. */
 function paint(bars: StripBars | undefined, channels: Pair): void {
   channels.forEach((ch, i) => {
-    bars?.[i]?.fill?.style.setProperty("transform", `scaleY(${ch.level})`);
+    bars?.[i]?.mask?.style.setProperty("height", `${(1 - ch.level) * 100}%`);
     paintPeak(bars?.[i]?.peak ?? null, ch.peak);
   });
 }
 
+/** Attach to the live preview hook. Always returns `live`, even if start/stop throw. */
+export function followMeterHook(
+  active: AudioMeterHook | null,
+  live: AudioMeterHook | null,
+): AudioMeterHook | null {
+  if (live === active) return active;
+  try {
+    active?.stop();
+  } catch {
+    // Preview iframe was torn down; the old hook is uncallable.
+  }
+  try {
+    live?.start();
+  } catch {
+    // New preview is not ready to attach yet.
+  }
+  return live;
+}
+
+export function evictGoneMeterState(
+  state: Map<string | null, Pair>,
+  liveIds: ReadonlySet<string | null>,
+): void {
+  for (const id of [...state.keys()]) {
+    if (!liveIds.has(id)) state.delete(id);
+  }
+}
+
+export function stepAndPaintStrips(
+  strips: readonly { id: string | null }[],
+  state: Map<string | null, Pair>,
+  bars: Map<string | null, StripBars>,
+  levels: Levels | undefined,
+  now: number,
+  dt: number,
+): void {
+  for (const { id } of strips) {
+    const prev = state.get(id);
+    const next = stepPair(prev, id === null ? levels?.master : levels?.groups[id], now, dt);
+    if (next === prev) continue;
+    state.set(id, next);
+    paint(bars.get(id), next);
+  }
+}
+
 /** One rAF loop re-reads the hook off the live preview window, so a reloaded iframe is followed. */
 function useMeterLoop(strips: Strip[], bars: RefObject<Map<string | null, StripBars>>) {
   const { previewIframeRef } = useStudioShellContext();
@@ -78,34 +190,12 @@ function useMeterLoop(strips: Strip[], bars: RefObject<Map<string | null, StripB
     const state = new Map<string | null, Pair>();
     const tick = (now: number) => {
       raf = requestAnimationFrame(tick);
-      const live = readHook(previewIframeRef.current);
-      if (live !== active) {
-        try {
-          active?.stop();
-        } catch {
-          // Preview iframe was torn down; the old hook is uncallable.
-        }
-        try {
-          live?.start();
-        } catch {
-          // New preview is not ready to attach yet.
-        }
-        active = live;
-      }
+      active = followMeterHook(active, readHook(previewIframeRef.current));
       const levels = active?.read();
       const dt = now - last;
       last = now;
-      for (const { id } of stripsRef.current) {
-        const next = stepPair(
-          state.get(id),
-          id === null ? levels?.master : levels?.groups[id],
-          now,
-          dt,
-        );
-        if (next === state.get(id)) continue;
-        state.set(id, next);
-        paint(bars.current.get(id), next);
-      }
+      evictGoneMeterState(state, new Set(stripsRef.current.map((s) => s.id)));
+      stepAndPaintStrips(stripsRef.current, state, bars.current, levels, now, dt);
     };
     raf = requestAnimationFrame(tick);
     return () => {
@@ -119,18 +209,124 @@ function useMeterLoop(strips: Strip[], bars: RefObject<Map<string | null, StripB
   }, [previewIframeRef, bars]);
 }
 
-function Bar({ fillRef, peakRef }: { fillRef: Ref<HTMLDivElement>; peakRef: Ref<HTMLDivElement> }) {
+function Bar({ maskRef, peakRef }: { maskRef: Ref<HTMLDivElement>; peakRef: Ref<HTMLDivElement> }) {
   return (
-    <div className="relative h-full w-1.5 overflow-hidden rounded-[1px] bg-neutral-900">
+    <div className="relative h-full w-[18px] overflow-hidden rounded-[2px] bg-neutral-900">
+      <div
+        className="absolute inset-x-0 bottom-0 bg-green-500"
+        style={{ height: `${AMBER_AT * 100}%` }}
+      />
+      <div
+        className="absolute inset-x-0 bg-amber-500"
+        style={{ bottom: `${AMBER_AT * 100}%`, height: `${(RED_AT - AMBER_AT) * 100}%` }}
+      />
+      <div
+        className="absolute inset-x-0 top-0 bg-red-500"
+        style={{ height: `${(1 - RED_AT) * 100}%` }}
+      />
       <div
-        ref={fillRef}
-        className="absolute inset-0 origin-bottom bg-green-500"
-        style={{ transform: "scaleY(0)" }}
+        ref={maskRef}
+        data-testid="meter-mask"
+        className="absolute inset-x-0 top-0 bg-neutral-900"
+        style={{ height: "100%" }}
       />
       <div
         ref={peakRef}
         data-testid="meter-peak"
-        className="absolute inset-x-0 bottom-0 h-px bg-green-400"
+        className="absolute inset-x-0 bottom-0 h-px bg-white"
+      />
+    </div>
+  );
+}
+
+/** Uses the authored clip-gain scale; meter readings have a separate scale. */
+function Fader({
+  label,
+  title,
+  volume,
+  maxPosition,
+  onLive,
+  onCommit,
+}: {
+  label: string;
+  title: string;
+  volume: number;
+  maxPosition: number;
+  onLive: (v: number) => void;
+  onCommit: (v: number) => void;
+}) {
+  const trackRef = useRef<HTMLDivElement>(null);
+  const draggingRef = useRef<number | null>(null);
+  const position = audioGainToFaderPosition(volume);
+  const span = maxPosition - AUDIO_GAIN_FADER_MIN;
+  const fraction = (position - AUDIO_GAIN_FADER_MIN) / span;
+  const readout = audioGainToText(volume);
+
+  const positionAt = useCallback(
+    (clientY: number): number => {
+      const rect = trackRef.current?.getBoundingClientRect();
+      if (!rect || rect.height === 0) return position;
+      return (
+        AUDIO_GAIN_FADER_MIN + clampNumber(1 - (clientY - rect.top) / rect.height, 0, 1) * span
+      );
+    },
+    [position, span],
+  );
+
+  const moveTo = (clientY: number) => {
+    const gain = audioFaderPositionToGain(positionAt(clientY));
+    draggingRef.current = gain;
+    onLive(gain);
+  };
+  const finishDrag = () => {
+    if (draggingRef.current === null) return;
+    const gain = draggingRef.current;
+    draggingRef.current = null;
+    onCommit(gain);
+  };
+  const keyPositions = new Map([
+    ["ArrowUp", position + span * 0.02],
+    ["ArrowDown", position - span * 0.02],
+    ["PageUp", position + span * 0.1],
+    ["PageDown", position - span * 0.1],
+    ["Home", AUDIO_GAIN_FADER_MIN],
+    ["End", maxPosition],
+  ]);
+
+  return (
+    <div
+      ref={trackRef}
+      role="slider"
+      tabIndex={0}
+      aria-label={label}
+      title={`${title}: ${readout}`}
+      aria-orientation="vertical"
+      aria-valuemin={AUDIO_GAIN_FADER_MIN}
+      aria-valuemax={maxPosition}
+      aria-valuenow={Math.round(position)}
+      aria-valuetext={readout}
+      onPointerDown={(e: ReactPointerEvent<HTMLDivElement>) => {
+        e.currentTarget.setPointerCapture(e.pointerId);
+        moveTo(e.clientY);
+      }}
+      onPointerMove={(e: ReactPointerEvent<HTMLDivElement>) => {
+        if (draggingRef.current === null) return;
+        moveTo(e.clientY);
+      }}
+      onPointerUp={finishDrag}
+      onPointerCancel={finishDrag}
+      onLostPointerCapture={finishDrag}
+      onKeyDown={(e) => {
+        const next = keyPositions.get(e.key);
+        if (next === undefined) return;
+        onCommit(audioFaderPositionToGain(clampNumber(next, AUDIO_GAIN_FADER_MIN, maxPosition)));
+        e.preventDefault();
+      }}
+      className="relative h-full w-2 shrink-0 cursor-ns-resize touch-none rounded-full bg-neutral-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-studio-accent"
+    >
+      <div
+        className="absolute inset-x-[-3px] h-1.5 -translate-y-1/2 rounded-full bg-neutral-200"
+        style={{ bottom: `${fraction * 100}%` }}
       />
     </div>
   );
@@ -139,9 +335,13 @@ function Bar({ fillRef, peakRef }: { fillRef: Ref<HTMLDivElement>; peakRef: Ref<
 function MeterStrip({
   strip,
   register,
+  onLive,
+  onCommit,
 }: {
   strip: Strip;
   register: (id: string | null, bars: StripBars | null) => void;
+  onLive: (id: string | null, volume: number) => void;
+  onCommit: (id: string | null, volume: number) => void;
 }) {
   const refs = [
     useRef<HTMLDivElement>(null),
@@ -151,22 +351,28 @@ function MeterStrip({
   ] as const;
   useEffect(() => {
     register(strip.id, [
-      { fill: refs[0].current, peak: refs[1].current },
-      { fill: refs[2].current, peak: refs[3].current },
+      { mask: refs[0].current, peak: refs[1].current },
+      { mask: refs[2].current, peak: refs[3].current },
     ]);
     return () => register(strip.id, null);
     // refs are stable objects
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [strip.id, register]);
   return (
-    <div className="flex w-16 shrink-0 flex-col items-center gap-1 px-1 pt-2 pb-1">
+    <div className="flex w-[104px] shrink-0 flex-col items-center gap-1 px-1.5 pt-2 pb-1">
       <div
-        className="flex min-h-0 flex-1 items-stretch gap-0.5"
+        className="flex min-h-0 flex-1 items-stretch gap-1.5"
         aria-label={`${strip.label} level`}
       >
-        <Bar fillRef={refs[0]} peakRef={refs[1]} />
-        <Bar fillRef={refs[2]} peakRef={refs[3]} />
-        <div className="relative ml-1 w-5 font-mono text-[9px] leading-none text-neutral-500">
+        <Fader
+          label={`${strip.label} volume`}
+          title={strip.id === null ? "Preview monitor volume" : `${strip.label} volume`}
+          volume={strip.volume}
+          maxPosition={strip.id === null ? audioGainToFaderPosition(1) : AUDIO_GAIN_FADER_MAX}
+          onLive={(v) => onLive(strip.id, v)}
+          onCommit={(v) => onCommit(strip.id, v)}
+        />
+        <div className="relative w-5 font-mono text-[9px] leading-none text-neutral-500">
           {METER_DB_MARKS.map((db) => (
             <span
               key={db}
@@ -177,6 +383,10 @@ function MeterStrip({
             </span>
           ))}
         </div>
+        <div className="flex items-stretch gap-0.5">
+          <Bar maskRef={refs[0]} peakRef={refs[1]} />
+          <Bar maskRef={refs[2]} peakRef={refs[3]} />
+        </div>
       </div>
       <span className="max-w-full truncate text-[10px] text-neutral-400" title={strip.label}>
         {strip.label}
@@ -199,6 +409,7 @@ function MeterStripBody() {
     if (b) bars.current.set(id, b);
     else bars.current.delete(id);
   }).current;
+  const { onLive, onCommit } = useVolumeHandlers();
   useMeterLoop(strips, bars);
   return (
     <div
@@ -206,7 +417,13 @@ function MeterStripBody() {
       className="flex shrink-0 overflow-x-auto border-l border-neutral-800/50 bg-neutral-950"
     >
       {strips.map((strip) => (
-        <MeterStrip key={strip.id ?? "master"} strip={strip} register={register} />
+        <MeterStrip
+          key={strip.id ?? "master"}
+          strip={strip}
+          register={register}
+          onLive={onLive}
+          onCommit={onCommit}
+        />
       ))}
     </div>
   );

package/src/components/ui/Menu.test.tsx

@@ -360,10 +360,9 @@ describe("open motion", () => {
 
   // AE4.
   it("names a motion token that zeroes itself under reduced motion", async () => {
-    // The zero-duration case lives in the `duration-open` utility itself
-    // (theme.css), not in a `motion-reduce:` class beside it, so a caller
-    // cannot use the token and forget the reduced-motion half. The menu's job
-    // is to name the token; the stylesheet's job is the media query.
+    // Reduced motion lives in the `duration-open` utility itself (theme.css),
+    // not in a `motion-reduce:` class beside it, so a caller cannot use the
+    // token and forget that half. The menu's job is to name the token.
     await openActionMenu();
 
     expect([...popup()!.classList]).toContain("duration-open");

package/src/components/ui/Menu.tsx

@@ -27,15 +27,28 @@ const SIDE_OFFSET = 6;
 const VIEWPORT_MARGIN = 8;
 
 /**
- * Chrome shared by every floating panel (`Popover` too); callers add their own shadow token.
+ * Enter and exit shared by menus, popovers, dropdowns, and tooltips.
+ * The open duration class differs; the shape does not.
  * `data-starting-style`/`data-ending-style` are Base UI's transition attributes.
  */
+export function floatingMotion(openDuration: "duration-open" | "duration-tooltip") {
+  return cn(
+    "origin-[var(--transform-origin)] outline-hidden",
+    "transition-[opacity,transform] ease-out-quint",
+    openDuration,
+    "data-[ending-style]:duration-close data-[ending-style]:ease-in",
+    "data-[starting-style]:[opacity:var(--popup-enter-opacity)]",
+    "data-[starting-style]:[scale:var(--popup-enter-scale)]",
+    "data-[ending-style]:opacity-0",
+  );
+}
+
+/**
+ * Chrome shared by every floating panel (`Popover` too); callers add their own shadow token.
+ */
 export const popupSurface = cn(
   "rounded-lg border border-border-input bg-surface",
-  "origin-[var(--transform-origin)] outline-hidden",
-  "transition-[opacity,transform] ease-out-quint duration-open",
-  "data-[starting-style]:opacity-0 data-[starting-style]:scale-95",
-  "data-[ending-style]:opacity-0 data-[ending-style]:scale-95",
+  floatingMotion("duration-open"),
   "data-[preview-state=open]:opacity-100 data-[preview-state=open]:scale-100",
 );
 

package/src/components/ui/Select.tsx

@@ -6,6 +6,7 @@
 import { Select as BaseSelect } from "@base-ui/react/select";
 import { cn } from "./cn";
 import { fieldBase } from "./Input";
+import { floatingMotion } from "./Menu";
 import type { PreviewState } from "./Button";
 
 export interface SelectOption {
@@ -77,7 +78,12 @@ export function Select({
 
       <BaseSelect.Portal>
         <BaseSelect.Positioner sideOffset={4} alignItemWithTrigger={false}>
-          <BaseSelect.Popup className="min-w-[var(--anchor-width)] rounded-md border border-border bg-surface py-1 shadow-menu outline-hidden">
+          <BaseSelect.Popup
+            className={cn(
+              "min-w-[var(--anchor-width)] rounded-md border border-border bg-surface py-1 shadow-menu",
+              floatingMotion("duration-open"),
+            )}
+          >
             <BaseSelect.List>
               {options.map((option) => (
                 <BaseSelect.Item

package/src/components/ui/Tooltip.tsx

@@ -5,6 +5,8 @@
 
 import { Tooltip as BaseTooltip } from "@base-ui/react/tooltip";
 import { cloneElement, useId, useRef, useState, type ReactElement } from "react";
+import { cn } from "./cn";
+import { floatingMotion } from "./Menu";
 
 interface TooltipProps {
   label: string;
@@ -42,7 +44,10 @@ export function Tooltip({ label, children, delay = 400, side = "top" }: TooltipP
           <BaseTooltip.Popup
             id={tooltipId}
             role="tooltip"
-            className="pointer-events-none rounded-md border border-border-input bg-surface px-2 py-1 text-step-10 font-medium text-text-1 whitespace-nowrap shadow-menu"
+            className={cn(
+              "pointer-events-none rounded-md border border-border-input bg-surface px-2 py-1 text-step-10 font-medium text-text-1 whitespace-nowrap shadow-menu",
+              floatingMotion("duration-tooltip"),
+            )}
           >
             {label}
           </BaseTooltip.Popup>

package/src/player/components/AudioWaveform.tsx

@@ -1,4 +1,4 @@
-import { memo, useCallback, useMemo, useRef } from "react";
+import { memo, useCallback, useEffect, useMemo, useRef } from "react";
 import { useMountEffect } from "../../hooks/useMountEffect";
 import { useThumbnailLease } from "../../hooks/useThumbnailLease";
 import { createThumbnailKey, type ThumbnailPriority } from "../lib/thumbnailScheduler";
@@ -136,11 +136,12 @@ export const AudioWaveform = memo(function AudioWaveform({
     const end = Math.max(start + 1, Math.ceil(endFraction * peaks.length));
     const span = end - start;
     const barCount = Math.floor(width / BAR_STEP);
+    const waveformBarRgb = getComputedStyle(canvas).getPropertyValue("--timeline-waveform-bar-rgb");
     for (let index = 0; index < barCount; index++) {
       const peakIndex = start + Math.min(span - 1, Math.floor((index / barCount) * span));
       const amplitude = peaks[peakIndex] ?? 0;
       const barHeight = Math.max(2, amplitude * height);
-      context.fillStyle = `rgba(75,163,210,${(0.45 + amplitude * 0.4).toFixed(2)})`;
+      context.fillStyle = `rgba(${waveformBarRgb},${(0.45 + amplitude * 0.4).toFixed(2)})`;
       context.fillRect(index * BAR_STEP, height - barHeight, BAR_WIDTH, barHeight);
     }
   }, [peaks, trimEndFraction, trimStartFraction]);
@@ -157,6 +158,16 @@ export const AudioWaveform = memo(function AudioWaveform({
     [draw],
   );
 
+  useEffect(() => {
+    const root = document.documentElement;
+    const observer = new MutationObserver(draw);
+    observer.observe(root, {
+      attributes: true,
+      attributeFilter: ["class", "data-chrome", "data-theme", "style"],
+    });
+    return () => observer.disconnect();
+  }, [draw]);
+
   useMountEffect(() => () => observerRef.current?.disconnect());
 
   return (
@@ -170,8 +181,7 @@ export const AudioWaveform = memo(function AudioWaveform({
         <div
           className="absolute inset-x-0 bottom-0 top-4 animate-pulse"
           style={{
-            background:
-              "linear-gradient(90deg, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0.05) 50%, rgba(255,255,255,0.02) 100%)",
+            background: "var(--timeline-thumbnail-shimmer)",
           }}
         />
       )}
@@ -187,8 +197,7 @@ export const AudioWaveform = memo(function AudioWaveform({
             style={{
               bottom: "20%",
               height: 2,
-              background:
-                "repeating-linear-gradient(90deg, rgba(75,163,210,0.35) 0 2px, transparent 2px 5px)",
+              background: "var(--timeline-waveform-error)",
             }}
           />
           <span className="relative rounded-sm bg-black/50 px-1 text-[8px] text-neutral-500">
@@ -200,7 +209,7 @@ export const AudioWaveform = memo(function AudioWaveform({
         <div className="absolute inset-x-0 top-0 z-10 px-1.5 py-0.5">
           <span
             className="block truncate text-[9px] font-semibold leading-tight"
-            style={{ color: labelColor, textShadow: "0 1px 3px rgba(0,0,0,0.9)" }}
+            style={{ color: labelColor, textShadow: "var(--timeline-waveform-label-shadow)" }}
           >
             {label}
           </span>

package/src/player/components/ImageThumbnail.tsx

@@ -91,8 +91,7 @@ export const ImageThumbnail = memo(function ImageThumbnail({
         <div
           className="absolute inset-0 animate-pulse"
           style={{
-            background:
-              "linear-gradient(90deg, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0.05) 50%, rgba(255,255,255,0.02) 100%)",
+            background: "var(--timeline-thumbnail-shimmer)",
           }}
         />
       )}
@@ -100,13 +99,12 @@ export const ImageThumbnail = memo(function ImageThumbnail({
         <div
           className="absolute inset-x-0 bottom-0 z-10 px-1.5 pb-0.5 pt-3"
           style={{
-            background:
-              "linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 60%, transparent 100%)",
+            background: "var(--timeline-thumbnail-label-gradient)",
           }}
         >
           <span
             className="block truncate text-[9px] font-semibold leading-tight"
-            style={{ color: labelColor, textShadow: "0 1px 2px rgba(0,0,0,0.9)" }}
+            style={{ color: labelColor, textShadow: "var(--timeline-thumbnail-label-shadow)" }}
           >
             {label}
           </span>

package/src/player/components/LayerDisclosureRow.tsx

@@ -37,8 +37,10 @@ export function LaneToggleButton({
       title={`${isExpanded ? "Hide" : "Show"} lanes`}
       // h-6 w-6 = the 24x24 WCAG 2.2 minimum target. The glyph stays 11px;
       // only the hit box grows.
-      className={`ml-auto flex h-6 w-6 shrink-0 items-center justify-center rounded border-0 bg-transparent p-0 text-[11px] leading-none focus-visible:outline-solid focus-visible:outline-1 focus-visible:outline-[#3CE6AC] ${
-        isExpanded ? "text-[#3CE6AC]" : "text-white/55 hover:text-white"
+      className={`ml-auto flex h-6 w-6 shrink-0 items-center justify-center rounded border-0 bg-transparent p-0 text-[11px] leading-none focus-visible:outline-solid focus-visible:outline-1 focus-visible:outline-[var(--timeline-accent)] ${
+        isExpanded
+          ? "text-[var(--timeline-accent)]"
+          : "text-[var(--timeline-handle)] hover:text-[var(--timeline-text-solid)]"
       }`}
       onPointerDown={(event) => event.stopPropagation()}
       onClick={(event) => {
@@ -86,13 +88,16 @@ export function LayerDisclosureRow({
       style={{
         width: columnWidth,
         height: TRACK_H,
-        color: "#ffffff",
+        color: "var(--timeline-text-solid)",
         background: gutterBackground,
       }}
     >
       {/* Decorative: the disclosure button above already names the row's keyframe
           state, and aria-label on a plain span is not exposed reliably anyway. */}
-      <span aria-hidden="true" className="shrink-0 text-[13px] leading-none text-white/40">
+      <span
+        aria-hidden="true"
+        className="shrink-0 text-[13px] leading-none text-[var(--timeline-text-dim)]"
+      >
         ◇
       </span>
       <span title={name} className="min-w-0 flex-1 truncate font-medium leading-tight">

package/src/player/components/PlayheadIndicator.tsx

@@ -26,8 +26,8 @@ interface PlayheadIndicatorProps {
 }
 
 export function PlayheadIndicator({
-  color = "var(--hf-accent, #3CE6AC)",
-  glowColor = "rgba(60,230,172,0.14)",
+  color = "var(--timeline-accent)",
+  glowColor = "var(--timeline-playhead-glow)",
   scrubbing = false,
   stickyHead = true,
 }: PlayheadIndicatorProps) {
@@ -93,7 +93,7 @@ export function PlayheadIndicator({
             background: scrubbing ? color : "transparent",
             border: `1.5px solid ${color}`,
             boxSizing: "border-box",
-            boxShadow: `0 1px 3px rgba(0,0,0,0.55), 0 0 5px ${glowColor}`,
+            boxShadow: `0 1px 3px var(--timeline-playhead-shadow), 0 0 5px ${glowColor}`,
             transform: "rotate(45deg)",
           }}
         />

package/src/player/components/TimelineAutomationLane.test.tsx

@@ -483,7 +483,7 @@ describe("TimelineAutomationLane", () => {
     // Bigger than the points around them, and ringed rather than recoloured — the
     // fill is the parameter's own colour and stays that way.
     expect(Math.min(...radii)).toBeGreaterThan(Math.max(...plain));
-    expect(marked[0]?.getAttribute("stroke")).toBe("#fff");
+    expect(marked[0]?.getAttribute("stroke")).toBe("var(--timeline-text-solid)");
   });
 
   it("marks nothing when there is no range", () => {