@hyperframes/studio 0.8.58 → 0.8.60

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/Timeline.test.ts

@@ -135,6 +135,26 @@ function renderBasicTimeline() {
   return { host, root };
 }
 
+function renderSharedAutomationTimeline(selectedElementId?: string) {
+  const host = createSizedTimelineHost(720);
+  const automation = JSON.stringify({
+    version: 1,
+    lanes: [{ target: "volume", points: [{ t: 0, v: 1 }] }],
+  });
+  usePlayerStore.setState({
+    duration: 8,
+    timelineReady: true,
+    ...(selectedElementId ? { selectedElementId } : {}),
+    elements: [
+      { id: "narration-1", tag: "audio", start: 0, duration: 4, track: 0, automation },
+      { id: "narration-2", tag: "audio", start: 4, duration: 4, track: 0, automation },
+    ],
+  });
+  const root = createRoot(host);
+  act(() => root.render(React.createElement(Timeline)));
+  return { host, root };
+}
+
 describe("Timeline provider boundary", () => {
   it("keeps all-collapsed horizontal positions at the gutter plus the pre-t=0 pad", () => {
     usePlayerStore.setState({
@@ -621,21 +641,7 @@ describe("Timeline provider boundary", () => {
   // clip left the row's state depending on the selection, and a collapse that
   // only dropped the active clip left the row stuck open.
   it("expands and collapses every clip on a shared track together", () => {
-    const host = createSizedTimelineHost(720);
-    const automation = JSON.stringify({
-      version: 1,
-      lanes: [{ target: "volume", points: [{ t: 0, v: 1 }] }],
-    });
-    usePlayerStore.setState({
-      duration: 8,
-      timelineReady: true,
-      elements: [
-        { id: "narration-1", tag: "audio", start: 0, duration: 4, track: 0, automation },
-        { id: "narration-2", tag: "audio", start: 4, duration: 4, track: 0, automation },
-      ],
-    });
-    const root = createRoot(host);
-    act(() => root.render(React.createElement(Timeline)));
+    const { host, root } = renderSharedAutomationTimeline();
 
     const row = host.querySelector<HTMLElement>('[data-el-id="narration-1"]')?.parentElement
       ?.parentElement;
@@ -668,22 +674,7 @@ describe("Timeline provider boundary", () => {
   // a lane to select its clip therefore made the handles vanish under the
   // pointer, which is the one gesture the read-only lane exists to support.
   it("keeps the automation lanes mounted when the selection moves along the row", () => {
-    const host = createSizedTimelineHost(720);
-    const automation = JSON.stringify({
-      version: 1,
-      lanes: [{ target: "volume", points: [{ t: 0, v: 1 }] }],
-    });
-    usePlayerStore.setState({
-      duration: 8,
-      timelineReady: true,
-      selectedElementId: "narration-2",
-      elements: [
-        { id: "narration-1", tag: "audio", start: 0, duration: 4, track: 0, automation },
-        { id: "narration-2", tag: "audio", start: 4, duration: 4, track: 0, automation },
-      ],
-    });
-    const root = createRoot(host);
-    act(() => root.render(React.createElement(Timeline)));
+    const { host, root } = renderSharedAutomationTimeline("narration-2");
     act(() => host.querySelector<HTMLButtonElement>('button[aria-label$=" lanes"]')?.click());
 
     const before = [...host.querySelectorAll(".hf-automation-lane")];

package/src/player/components/Timeline.tsx

@@ -1,9 +1,20 @@
 import { memo } from "react";
 import type { TimelineProps } from "./TimelineTypes";
-import { TimelineEmptyState } from "./TimelineEmptyState";
-import { TimelineCanvas } from "./TimelineCanvas";
-import { TimelineOverlays } from "./TimelineOverlays";
 import { TimelineProvider, useTimelineContext } from "./TimelineProvider";
+import {
+  TimelineEmptyStatePart,
+  TimelineEditPopover,
+  TimelineClipMenu,
+  TimelineFrame,
+  TimelineGapMenu,
+  TimelineKeyframeMenu,
+  TimelineLanes,
+  TimelineOverlays,
+  TimelinePlayhead,
+  TimelineRazorGuide,
+  TimelineRuler,
+  TimelineShortcutHint,
+} from "./TimelineParts";
 
 export * from "./TimelineProvider";
 export {
@@ -28,23 +39,39 @@ function TimelineView() {
   const { state, meta } = useTimelineContext();
   const { timelineReady, elements } = state;
   if (!timelineReady || elements.length === 0) {
-    return <TimelineEmptyState {...meta.emptyState} />;
+    return <TimelineEmptyStatePart />;
   }
   return (
     <div {...meta.containerProps}>
       <div {...meta.viewportProps}>
-        <TimelineCanvas />
-        {meta.razorGuide}
+        <TimelineFrame />
+        <TimelineRazorGuide />
       </div>
       <TimelineOverlays />
     </div>
   );
 }
 
-export const Timeline = memo(function Timeline(props: TimelineProps = {}) {
+const TimelineComposed = memo(function TimelineComposed(props: TimelineProps = {}) {
   return (
     <TimelineProvider {...props}>
       <TimelineView />
     </TimelineProvider>
   );
 });
+
+export const Timeline = Object.assign(TimelineComposed, {
+  Provider: TimelineProvider,
+  Frame: TimelineFrame,
+  Ruler: TimelineRuler,
+  Lanes: TimelineLanes,
+  Playhead: TimelinePlayhead,
+  RazorGuide: TimelineRazorGuide,
+  ShortcutHint: TimelineShortcutHint,
+  EditPopover: TimelineEditPopover,
+  ClipMenu: TimelineClipMenu,
+  KeyframeMenu: TimelineKeyframeMenu,
+  GapMenu: TimelineGapMenu,
+  EmptyState: TimelineEmptyStatePart,
+  Overlays: TimelineOverlays,
+});

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", () => {

package/src/player/components/TimelineAutomationLane.tsx

@@ -75,7 +75,7 @@ function pointCircleStyle(
     radius: POINT_R * (dragging ? 1.3 : inRange ? 1.15 : 1),
     // A white ring rather than a different fill: the fill is the parameter's
     // own colour, and a lane with two envelopes on it is read by colour first.
-    stroke: inRange ? "#fff" : "rgba(0,0,0,0.5)",
+    stroke: inRange ? "var(--timeline-text-solid)" : "var(--timeline-automation-point-muted)",
     strokeWidth: inRange ? 1.5 : 1,
   };
 }
@@ -132,7 +132,7 @@ function ReadOnlyNote({
   return (
     <div
       data-automation-readonly-note=""
-      className="hf-automation-readonly-note pointer-events-none absolute rounded-[3px] bg-black/85 px-1.5 py-0.5 text-[9px] text-white/80"
+      className="hf-automation-readonly-note pointer-events-none absolute rounded-[3px] bg-[var(--timeline-overlay-bg-strong)] px-1.5 py-0.5 text-[9px] text-[var(--timeline-overlay-text)]"
       style={{ left: leftPx + 6, top: 2, zIndex: 3, maxWidth: Math.max(120, widthPx - 12) }}
     >
       {note}
@@ -470,7 +470,7 @@ export function TimelineAutomationLane({
           x2={PAD_X + widthPx}
           y1={pad + inner / 2}
           y2={pad + inner / 2}
-          stroke="rgba(255,255,255,0.08)"
+          stroke="var(--timeline-automation-rail)"
           strokeDasharray="3 4"
         />
         {rangeSelection ? (
@@ -541,7 +541,7 @@ export function TimelineAutomationLane({
             cx={xOf(playheadSec)}
             cy={yOf(currentValue)}
             r={2.5}
-            fill="#fff"
+            fill="var(--timeline-text-solid)"
             opacity={0.8}
             pointerEvents="none"
           />
@@ -561,7 +561,7 @@ export function TimelineAutomationLane({
 
       {hint ? (
         <div
-          className="hf-automation-hint pointer-events-none absolute rounded-[3px] bg-black/80 px-1 py-0.5 font-mono text-[9px] text-white"
+          className="hf-automation-hint pointer-events-none absolute rounded-[3px] bg-[var(--timeline-overlay-bg)] px-1 py-0.5 font-mono text-[9px] text-[var(--timeline-text-solid)]"
           style={{ left: leftPx + 6, top: 2, zIndex: 3 }}
         >
           {hint}

package/src/player/components/TimelineCanvas.tsx

@@ -1,5 +1,5 @@
 import { memo } from "react";
-import { TimelineRuler } from "./TimelineRuler";
+import { TimelineRulerPart } from "./TimelineRulerPart";
 import { PlayheadIndicator } from "./PlayheadIndicator";
 import {
   RULER_H,
@@ -12,12 +12,8 @@ import {
   getTimelineRowTop,
   getTimelineRowHeight,
 } from "./timelineLayout";
-import { type MultiDragPreviewInput } from "./timelineMultiDragPreview";
-import { useTimelineEditContextOptional } from "../../contexts/TimelineEditContext";
 import { TimelineLanes } from "./TimelineLanes";
-import { getTimelineElementIdentity } from "../lib/timelineElementHelpers";
 import { TimelineGestureOverlay } from "./TimelineGestureOverlay";
-import { resolveSnapGuide } from "./timelineSnapping";
 import { useTimelineContext } from "./TimelineProvider";
 
 // A dropped clip's length is unknown until it lands; the preview shows a default.
@@ -26,8 +22,7 @@ const DROP_PREVIEW_SECONDS = 3;
 export const TimelineCanvas = memo(function TimelineCanvas() {
   const { state, actions } = useTimelineContext();
   const props = state.canvas;
-  const { draggedClip, resizingClip, scrollRef, selectedElementIds, displayTrackOrder } = props;
-  const snapGuide = resolveSnapGuide(draggedClip, resizingClip);
+  const { draggedClip, scrollRef, displayTrackOrder } = props;
   const draggedRowIndex =
     draggedClip?.started === true ? displayTrackOrder.indexOf(draggedClip.previewTrack) : -1;
   const dropTrackIndex = props.dropPreview
@@ -43,55 +38,14 @@ export const TimelineCanvas = memo(function TimelineCanvas() {
   // ghost and drop placeholder must clamp to it or they stretch to the full
   // expanded row height and stop matching the clip being dragged.
   const draggedClipHeight = Math.min(draggedRowHeight, TRACK_H) - CLIP_Y * 2;
-  const {
-    onResizeElement,
-    onMoveElement,
-    onToggleTrackHidden,
-    onTogglePropertyGroupKeyframe,
-    onRazorSplit,
-    onRazorSplitAll,
-  } = useTimelineEditContextOptional();
   const beatDragging = props.beatDragging;
-  const draggedElement = draggedClip?.element ?? null;
-  const draggedElementIdentity = draggedElement ? getTimelineElementIdentity(draggedElement) : null;
-  // The drag ghost follows the cursor freely (both axes) — CapCut-style. The
-  // "magnetic" affordance is a highlight on the destination lane (draggedRowIndex),
-  // which flips at the MAGNETIC_TRACK_THRESHOLD point; the clip drops into it.
-  // Live multi-selection drag: while a selected clip is dragged, ALL selected
-  // clips move together as one rigid formation. The GRABBED clip is the free
-  // ghost below; its co-selected "passengers" slide by the SAME group-clamped
-  // delta (cheap translateX, no re-layout) — the delta is derived from the
-  // grabbed clip's ALREADY-clamped previewStart, so the whole formation stops at
-  // the wall together and never deforms. Matches what the commit will do — see
-  // timelineMultiDragPreview + commit.
-  const multiDragPreview: MultiDragPreviewInput | null =
-    draggedClip?.started === true && draggedElement && draggedElementIdentity
-      ? {
-          dragStarted: true,
-          draggedKey: draggedElementIdentity,
-          draggedOriginStart: draggedElement.start,
-          draggedPreviewStart: draggedClip.previewStart,
-          selectedKeys: selectedElementIds,
-        }
-      : null;
+  const { draggedElement, snapGuide, multiDragPreview } = props;
   return (
     <div
       className="relative"
       style={{ height: props.totalH, width: props.contentOrigin + props.trackContentWidth }}
     >
-      <TimelineRuler
-        major={props.major}
-        minor={props.minor}
-        pps={props.pps}
-        trackContentWidth={props.trackContentWidth}
-        totalH={props.totalH}
-        effectiveDuration={props.effectiveDuration}
-        majorTickInterval={props.majorTickInterval}
-        theme={props.theme}
-        beatAnalysis={props.beatAnalysis}
-        contentOrigin={props.contentOrigin}
-        renderTimeRange={props.rowsVirtualized ? props.renderTimeRange : undefined}
-      />
+      <TimelineRulerPart />
 
       {/* Breathing room between the sticky ruler and the first track lane — the
           top half of the CapCut-style padding (see TRACKS_TOP_PAD). */}
@@ -104,12 +58,12 @@ export const TimelineCanvas = memo(function TimelineCanvas() {
         snapGuide={snapGuide}
         draggedElement={draggedElement}
         multiDragPreview={multiDragPreview}
-        onToggleTrackHidden={onToggleTrackHidden}
-        onTogglePropertyGroupKeyframe={onTogglePropertyGroupKeyframe}
-        onResizeElement={onResizeElement}
-        onMoveElement={onMoveElement}
-        onRazorSplit={onRazorSplit}
-        onRazorSplitAll={onRazorSplitAll}
+        onToggleTrackHidden={props.onToggleTrackHidden}
+        onTogglePropertyGroupKeyframe={props.onTogglePropertyGroupKeyframe}
+        onResizeElement={props.onResizeElement}
+        onMoveElement={props.onMoveElement}
+        onRazorSplit={props.onRazorSplit}
+        onRazorSplitAll={props.onRazorSplitAll}
       />
 
       {/* Breathing room below the last track lane (~1.5 track heights) — a real
@@ -140,7 +94,7 @@ export const TimelineCanvas = memo(function TimelineCanvas() {
               left: props.contentOrigin + gap.start * props.pps,
               width: Math.max((gap.end - gap.start) * props.pps, 2),
               height: TRACK_H - CLIP_Y * 2,
-              background: loud ? "rgba(60,230,172,0.18)" : "rgba(60,230,172,0.055)",
+              background: loud ? "var(--timeline-accent-soft)" : "var(--timeline-accent-faint)",
               borderRadius: 4,
               zIndex: 25,
             }}
@@ -158,8 +112,8 @@ export const TimelineCanvas = memo(function TimelineCanvas() {
             left: props.contentOrigin + draggedClip.previewStart * props.pps,
             width: Math.max(draggedClip.element.duration * props.pps, 4),
             height: draggedClipHeight,
-            border: "1px solid color-mix(in srgb, var(--color-accent) 55%, transparent)",
-            background: "color-mix(in srgb, var(--color-accent) 12%, transparent)",
+            border: "1px solid color-mix(in srgb, var(--timeline-accent) 55%, transparent)",
+            background: "color-mix(in srgb, var(--timeline-accent) 12%, transparent)",
             borderRadius: 4,
             zIndex: 30,
           }}
@@ -178,8 +132,8 @@ export const TimelineCanvas = memo(function TimelineCanvas() {
             left: props.contentOrigin + props.dropPreview.start * props.pps,
             width: DROP_PREVIEW_SECONDS * props.pps,
             height: TRACK_H - CLIP_Y * 2,
-            border: "1px solid color-mix(in srgb, var(--color-accent) 55%, transparent)",
-            background: "color-mix(in srgb, var(--color-accent) 12%, transparent)",
+            border: "1px solid color-mix(in srgb, var(--timeline-accent) 55%, transparent)",
+            background: "color-mix(in srgb, var(--timeline-accent) 12%, transparent)",
             borderRadius: 4,
             zIndex: 30,
           }}
@@ -197,8 +151,8 @@ export const TimelineCanvas = memo(function TimelineCanvas() {
             left: props.contentOrigin,
             width: props.trackContentWidth,
             height: 1,
-            background: "#3CE6AC",
-            boxShadow: "0 0 3px rgba(60,230,172,0.5)",
+            background: "var(--timeline-accent)",
+            boxShadow: "0 0 3px var(--timeline-accent-glow)",
             zIndex: 55,
           }}
         />
@@ -213,11 +167,14 @@ export const TimelineCanvas = memo(function TimelineCanvas() {
             top: RULER_H,
             bottom: 0,
             width: 1,
-            background: snapGuide.type === "playhead" ? "#3CE6AC" : "rgba(255,255,255,0.6)",
+            background:
+              snapGuide.type === "playhead"
+                ? "var(--timeline-accent)"
+                : "var(--timeline-snap-guide)",
             boxShadow:
               snapGuide.type === "playhead"
-                ? "0 0 6px rgba(60,230,172,0.5)"
-                : "0 0 6px rgba(255,255,255,0.4)",
+                ? "0 0 6px var(--timeline-accent-glow)"
+                : "0 0 6px var(--timeline-text-dim)",
             zIndex: 60,
           }}
         />
@@ -247,8 +204,8 @@ export const TimelineCanvas = memo(function TimelineCanvas() {
             top: props.marqueeRect.top,
             width: props.marqueeRect.width,
             height: props.marqueeRect.height,
-            background: "rgba(60,230,172,0.10)",
-            border: "1px dashed rgba(60,230,172,0.7)",
+            background: "var(--timeline-accent-fill)",
+            border: "1px dashed var(--timeline-accent-border)",
             borderRadius: 2,
             zIndex: 70,
           }}
@@ -266,9 +223,9 @@ export const TimelineCanvas = memo(function TimelineCanvas() {
             width: Math.abs(props.rangeSelection.end - props.rangeSelection.start) * props.pps,
             top: RULER_H,
             bottom: 0,
-            backgroundColor: "rgba(59, 130, 246, 0.12)",
-            borderLeft: "1px solid rgba(59, 130, 246, 0.4)",
-            borderRight: "1px solid rgba(59, 130, 246, 0.4)",
+            backgroundColor: "var(--timeline-info-bg)",
+            borderLeft: "1px solid var(--timeline-info-border)",
+            borderRight: "1px solid var(--timeline-info-border)",
             zIndex: 50,
           }}
         />

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

@@ -69,7 +69,7 @@ function renderClip({
 describe("TimelineClip", () => {
   it("renders the clip label above custom content without showing default timecode", () => {
     const { host, root } = renderClip({
-      element: { id: "hero", label: "Hero", tag: "div", start: 1, duration: 0.5, track: 0 },
+      element: { id: "hero", label: "Hero", tag: "div", start: 1, duration: 1, track: 0 },
     });
 
     expect(host.querySelector(".timeline-clip__label")?.textContent).toBe("Hero");
@@ -78,18 +78,55 @@ describe("TimelineClip", () => {
     act(() => root.unmount());
   });
 
-  it("keeps selected narrow clips labeled even when they render custom content", () => {
+  it("drops the label chip under 60px even when the clip is selected", () => {
     const { host, root } = renderClip({
-      element: { id: "fx", label: "FX", tag: "div", start: 0, duration: 0.1, track: 0 },
+      element: { id: "fx", label: "FX", tag: "div", start: 0, duration: 1, track: 0 },
+      pps: 59,
       isSelected: true,
     });
 
-    expect(host.querySelector(".timeline-clip__label")?.textContent).toBe("FX");
+    expect(host.querySelector(".timeline-clip__label")).toBeNull();
     expect(host.querySelector(".timeline-clip__timecode")).toBeNull();
+    expect(host.querySelector(".timeline-clip")?.getAttribute("data-ladder")).toBe("picture");
 
     act(() => root.unmount());
   });
 
+  it("keeps the label at 60px and fills one frame under 24px", () => {
+    const labeled = renderClip({
+      element: { id: "wide", label: "City", tag: "video", start: 0, duration: 1, track: 0 },
+      pps: 200,
+    });
+    expect(labeled.host.querySelector(".timeline-clip__label")?.textContent).toBe("City");
+    expect(labeled.host.querySelector(".timeline-clip")?.getAttribute("data-ladder")).toBe(
+      "labeled",
+    );
+    expect(labeled.host.querySelector<HTMLElement>(".timeline-clip")?.style.borderRadius).toBe(
+      "var(--timeline-clip-radius)",
+    );
+    act(() => labeled.root.unmount());
+
+    const frame = renderClip({
+      element: { id: "sliver", label: "City", tag: "img", start: 0, duration: 1, track: 0 },
+      pps: 23,
+      isSelected: true,
+    });
+    expect(frame.host.querySelector(".timeline-clip__label")).toBeNull();
+    expect(frame.host.querySelector(".timeline-clip")?.getAttribute("data-ladder")).toBe("frame");
+    act(() => frame.root.unmount());
+  });
+
+  it("gives audio clips the pill radius", () => {
+    const { host, root } = renderClip({
+      element: { id: "vo", label: "Voice", tag: "audio", start: 0, duration: 2, track: 1 },
+      pps: 100,
+    });
+    expect(host.querySelector<HTMLElement>(".timeline-clip")?.style.borderRadius).toBe(
+      "var(--timeline-clip-audio-radius)",
+    );
+    act(() => root.unmount());
+  });
+
   it("marks hidden clips for active-state suppression", () => {
     const { host, root } = renderClip({
       element: {