@hyperframes/studio 0.8.59 → 0.8.61

package/src/player/components/AudioWaveform.tsx

@@ -1,7 +1,8 @@
-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";
+import { decimatePeaks, loudnessToOpacity } from "./audioWaveformPeaks";
 
 interface AudioWaveformProps {
   audioUrl: string;
@@ -13,11 +14,68 @@ interface AudioWaveformProps {
   projectId: string;
   sessionEpoch: number;
   priority: ThumbnailPriority;
+  /** `data-hidden` or a muted audio group. Greys the pill; the clip stays. */
+  muted?: boolean;
+  /** Same media file as a video clip. Draws the 1px parent tick. */
+  linked?: boolean;
 }
 
-const BAR_WIDTH = 2;
 const BAR_STEP = 3;
 
+type BarGeometry = { x: number; width: number; height: number };
+
+function paintWaveformBars(
+  context: CanvasRenderingContext2D,
+  bars: readonly BarGeometry[],
+  height: number,
+  waveformBarRgb: string,
+  waveformBaselineRgb: string,
+  amplitudes: readonly number[],
+) {
+  bars.forEach((bar, index) => {
+    const amplitude = amplitudes[index] ?? 0;
+    context.fillStyle = `rgb(${waveformBaselineRgb})`;
+    context.fillRect(bar.x, height - 2, bar.width, 2);
+    context.fillStyle = `rgba(${waveformBarRgb},${loudnessToOpacity(amplitude).toFixed(2)})`;
+    context.fillRect(bar.x, height - bar.height, bar.width, bar.height);
+  });
+}
+
+export function drawWaveformCanvas(
+  canvas: HTMLCanvasElement,
+  peaks: readonly number[],
+  muted: boolean,
+  trimStartFraction: number,
+  trimEndFraction: number,
+) {
+  const width = Math.max(1, canvas.clientWidth);
+  const height = Math.max(1, canvas.clientHeight);
+  const scale = window.devicePixelRatio || 1;
+  canvas.width = Math.ceil(width * scale);
+  canvas.height = Math.ceil(height * scale);
+  const context = canvas.getContext("2d");
+  if (!context) return;
+  context.scale(scale, scale);
+  context.clearRect(0, 0, width, height);
+  const amplitudes = decimatePeaks(
+    peaks,
+    trimStartFraction,
+    trimEndFraction,
+    Math.max(1, Math.ceil(width / BAR_STEP)),
+  );
+  const bars = amplitudes.map((amplitude, index) => ({
+    x: (index * width) / amplitudes.length,
+    width: Math.max(1, width / amplitudes.length),
+    height: Math.max(3, amplitude * height),
+  }));
+  const channelToken = muted ? "--timeline-waveform-muted-rgb" : "--timeline-waveform-bar-rgb";
+  const waveformBarRgb = getComputedStyle(canvas).getPropertyValue(channelToken);
+  const waveformBaselineRgb = getComputedStyle(canvas).getPropertyValue(
+    "--timeline-waveform-baseline-rgb",
+  );
+  paintWaveformBars(context, bars, height, waveformBarRgb, waveformBaselineRgb, amplitudes);
+}
+
 function extractPeaks(channelData: Float32Array, barCount: number): number[] {
   const peaks: number[] = [];
   const samplesPerBar = Math.floor(channelData.length / barCount);
@@ -92,7 +150,10 @@ export const AudioWaveform = memo(function AudioWaveform({
   projectId,
   sessionEpoch,
   priority,
+  muted = false,
+  linked = false,
 }: AudioWaveformProps) {
+  const rootRef = useRef<HTMLDivElement | null>(null);
   const canvasRef = useRef<HTMLCanvasElement | null>(null);
   const observerRef = useRef<ResizeObserver | null>(null);
   const cacheKey = waveformUrl ?? audioUrl;
@@ -121,29 +182,8 @@ export const AudioWaveform = memo(function AudioWaveform({
   const draw = useCallback(() => {
     const canvas = canvasRef.current;
     if (!canvas || !peaks) return;
-    const width = Math.max(1, canvas.clientWidth);
-    const height = Math.max(1, canvas.clientHeight);
-    const scale = window.devicePixelRatio || 1;
-    canvas.width = Math.ceil(width * scale);
-    canvas.height = Math.ceil(height * scale);
-    const context = canvas.getContext("2d");
-    if (!context) return;
-    context.scale(scale, scale);
-    context.clearRect(0, 0, width, height);
-    const startFraction = Math.max(0, Math.min(1, trimStartFraction ?? 0));
-    const endFraction = Math.max(startFraction, Math.min(1, trimEndFraction ?? 1));
-    const start = Math.floor(startFraction * peaks.length);
-    const end = Math.max(start + 1, Math.ceil(endFraction * peaks.length));
-    const span = end - start;
-    const barCount = Math.floor(width / BAR_STEP);
-    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.fillRect(index * BAR_STEP, height - barHeight, BAR_WIDTH, barHeight);
-    }
-  }, [peaks, trimEndFraction, trimStartFraction]);
+    drawWaveformCanvas(canvas, peaks, muted, trimStartFraction ?? 0, trimEndFraction ?? 1);
+  }, [muted, peaks, trimEndFraction, trimStartFraction]);
 
   const setCanvasRef = useCallback(
     (canvas: HTMLCanvasElement | null) => {
@@ -157,55 +197,74 @@ 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());
 
+  useEffect(() => {
+    const clip = rootRef.current?.closest(".timeline-clip");
+    if (!(clip instanceof HTMLElement)) return;
+    if (muted) clip.setAttribute("data-audio-muted", "true");
+    else clip.removeAttribute("data-audio-muted");
+    return () => clip.removeAttribute("data-audio-muted");
+  }, [muted]);
+
   return (
-    <div className="absolute inset-0 overflow-hidden">
-      <canvas
-        ref={setCanvasRef}
-        className="absolute inset-x-0 bottom-0 w-full"
-        style={{ top: 16 }}
-      />
-      {snapshot.status === "loading" && (
-        <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%)",
-          }}
+    <div ref={rootRef} className="absolute inset-0">
+      {linked ? <span className="timeline-audio-link" aria-hidden="true" /> : null}
+      <div className="absolute inset-0 overflow-hidden" style={{ zIndex: 10 }}>
+        <canvas
+          ref={setCanvasRef}
+          className="absolute inset-x-0 bottom-0 w-full"
+          style={{ top: 16, height: "calc(100% - 16px)" }}
         />
-      )}
-      {/* Degraded state — the decode failed; say so rather than paint a
-          waveform the author could edit against. */}
-      {snapshot.status === "error" && (
-        <div
-          className="absolute inset-x-0 flex items-center justify-center gap-1.5"
-          style={{ top: 16, bottom: 0 }}
-        >
+        {snapshot.status === "loading" && (
           <div
-            className="absolute inset-x-0"
+            className="absolute inset-x-0 bottom-0 top-4 animate-pulse"
             style={{
-              bottom: "20%",
-              height: 2,
-              background:
-                "repeating-linear-gradient(90deg, rgba(75,163,210,0.35) 0 2px, transparent 2px 5px)",
+              background: "var(--timeline-thumbnail-shimmer)",
             }}
           />
-          <span className="relative rounded-sm bg-black/50 px-1 text-[8px] text-neutral-500">
-            waveform unavailable
-          </span>
-        </div>
-      )}
-      {label && (
-        <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)" }}
+        )}
+        {/* Degraded state — the decode failed; say so rather than paint a
+          waveform the author could edit against. */}
+        {snapshot.status === "error" && (
+          <div
+            className="absolute inset-x-0 flex items-center justify-center gap-1.5"
+            style={{ top: 16, bottom: 0 }}
           >
-            {label}
-          </span>
-        </div>
-      )}
+            <div
+              className="absolute inset-x-0"
+              style={{
+                bottom: "20%",
+                height: 2,
+                background: "var(--timeline-waveform-error)",
+              }}
+            />
+            <span className="relative rounded-sm bg-black/50 px-1 text-[8px] text-neutral-500">
+              waveform unavailable
+            </span>
+          </div>
+        )}
+        {label && (
+          <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: "var(--timeline-waveform-label-shadow)" }}
+            >
+              {label}
+            </span>
+          </div>
+        )}
+      </div>
     </div>
   );
 });

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

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

@@ -94,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,
             }}
@@ -112,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,
           }}
@@ -132,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,
           }}
@@ -151,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,
           }}
         />
@@ -167,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,
           }}
         />
@@ -201,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,
           }}
@@ -220,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: {

package/src/player/components/TimelineClip.tsx

@@ -1,6 +1,11 @@
 import { memo, type CSSProperties, type ReactNode } from "react";
 import type { TimelineElement } from "../store/playerStore";
-import { defaultTimelineTheme, getClipHandleOpacity, type TimelineTheme } from "./timelineTheme";
+import {
+  clipWidthLadder,
+  defaultTimelineTheme,
+  getClipHandleOpacity,
+  type TimelineTheme,
+} from "./timelineTheme";
 import type { TimelineEditCapabilities } from "./timelineEditing";
 import { isAudioTimelineElement } from "../../utils/timelineInspector";
 import { timelineClipFocusId } from "./timelineNavigationIdentity";
@@ -60,9 +65,10 @@ export const TimelineClip = memo(function TimelineClip({
   const widthPx = Math.max(el.duration * pps, 4);
   const handleOpacity = getClipHandleOpacity({ isHovered, isSelected, isDragging });
   const displayLabel = el.label || el.id || el.tag;
+  const ladder = clipWidthLadder(widthPx);
   const showHandles = handleOpacity > 0.01 && (widthPx >= 32 || isSelected);
-  const showLabel = widthPx >= 40 || isSelected;
-  const showDefaultText = !hasCustomContent && (widthPx >= 40 || isSelected);
+  const showLabel = ladder === "labeled";
+  const showDefaultText = !hasCustomContent && ladder === "labeled";
   const startLabel = el.start.toFixed(1);
   const endLabel = (el.start + el.duration).toFixed(1);
   const themeVariables = {
@@ -92,7 +98,7 @@ export const TimelineClip = memo(function TimelineClip({
     width: widthPx,
     top: clipY,
     ...(clipHeight === undefined ? { bottom: clipY } : { height: clipHeight }),
-    borderRadius: theme.clipRadius,
+    borderRadius: isAudioClip ? theme.audioClipRadius : theme.clipRadius,
     ...themeVariables,
     zIndex: isDragging ? 20 : isSelected ? 10 : isHovered ? 5 : 1,
     // Regular cursor over clips (CapCut-style, user preference) — no grab hand.
@@ -114,6 +120,7 @@ export const TimelineClip = memo(function TimelineClip({
       data-clip-start={el.start}
       data-clip-end={el.start + el.duration}
       data-clip-hidden={el.hidden ? "true" : undefined}
+      data-ladder={ladder}
       data-active={isActive ? "" : undefined}
       aria-hidden={isGestureActor ? "true" : undefined}
       tabIndex={isGestureActor ? undefined : tabIndex}

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

@@ -258,7 +258,9 @@ describe("TimelineClipDiamonds", () => {
     const selectedDiamond = host.querySelector<HTMLButtonElement>('button[title="60%"]');
     expect(playheadDiamond?.dataset.keyframeAtPlayhead).toBe("true");
     expect(playheadDiamond?.dataset.keyframeSelected).toBe("false");
-    expect(playheadDiamond?.querySelector("path:last-child")?.getAttribute("fill")).toBe("#a3a3a3");
+    expect(playheadDiamond?.querySelector("path:last-child")?.getAttribute("fill")).toBe(
+      "var(--timeline-diamond-muted)",
+    );
     expect(playheadDiamond?.querySelector('path[stroke="#4ba3d2"]')).not.toBeNull();
     expect(selectedDiamond?.dataset.keyframeAtPlayhead).toBe("false");
     expect(selectedDiamond?.dataset.keyframeSelected).toBe("true");

package/src/player/components/TimelineClipDiamonds.tsx

@@ -225,7 +225,7 @@ export const TimelineDiamondLane = memo(function TimelineDiamondLane({
     isSelected && halfFramePct > 0
       ? nearestKeyframeWithin(sorted, currentPercentage, halfFramePct)
       : null;
-  const baseColor = isSelected ? accentColor : "#a3a3a3";
+  const baseColor = isSelected ? accentColor : "var(--timeline-diamond-muted)";
   const baseOpacity = isSelected ? 0.4 : 0.25;
   const canDrag = isSelected && !!onMoveKeyframe;
 
@@ -280,7 +280,7 @@ export const TimelineDiamondLane = memo(function TimelineDiamondLane({
         const isKfSelected = selectedKeyframes.has(kfKey);
         const atPlayhead = kf === playheadKeyframe;
         const isHighlighted = isKfSelected || atPlayhead;
-        const color = isKfSelected ? accentColor : "#a3a3a3";
+        const color = isKfSelected ? accentColor : "var(--timeline-diamond-muted)";
 
         const onPointerDown = (e: React.PointerEvent<HTMLButtonElement>) => {
           if (e.button !== 0) return;