@hyperframes/studio 0.8.59 → 0.8.60

package/src/player/components/VideoThumbnail.tsx

@@ -112,8 +112,7 @@ export const VideoThumbnail = memo(function VideoThumbnail({
         <div
           className="absolute inset-0 animate-pulse motion-reduce:animate-none"
           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)",
           }}
         />
       )}
@@ -128,13 +127,12 @@ export const VideoThumbnail = memo(function VideoThumbnail({
         <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/timelineMotionStyles.test.ts

@@ -2,17 +2,17 @@ import { readFileSync } from "node:fs";
 import { describe, expect, it } from "vitest";
 
 const studioCss = readFileSync(new URL("../../styles/studio.css", import.meta.url), "utf8");
+const themeCss = readFileSync(new URL("../../styles/theme.css", import.meta.url), "utf8");
+const timelineOverlaySources = [
+  "TimelineShortcutHint.tsx",
+  "LayerDisclosureRow.tsx",
+  "ImageThumbnail.tsx",
+  "AudioWaveform.tsx",
+  "VideoThumbnail.tsx",
+].map((fileName) => readFileSync(new URL(`./${fileName}`, import.meta.url), "utf8"));
 const timelineClipSource = readFileSync(new URL("./TimelineClip.tsx", import.meta.url), "utf8");
 const playheadSource = readFileSync(new URL("./PlayheadIndicator.tsx", import.meta.url), "utf8");
 
-const allowedTimelineTransitionProperties = [
-  "background-color",
-  "border-color",
-  "box-shadow",
-  "color",
-  "opacity",
-];
-
 function expectRule(css: string, selector: string): string {
   const selectorStart = css.indexOf(`${selector} {`);
   expect(selectorStart).toBeGreaterThanOrEqual(0);
@@ -31,28 +31,26 @@ function expectDeclaration(ruleBody: string, property: string): string {
   return declarationMatch?.[1].trim() ?? "";
 }
 
-function transitionProperties(transitionDeclaration: string): string[] {
-  const items: string[] = [];
-  let depth = 0;
-  let item = "";
-
-  for (const char of transitionDeclaration) {
-    if (char === "(") depth += 1;
-    if (char === ")") depth -= 1;
-    if (char === "," && depth === 0) {
-      items.push(item.trim());
-      item = "";
-      continue;
-    }
-    item += char;
-  }
-
-  if (item.trim().length > 0) items.push(item.trim());
-
-  return items.map((transition) => transition.split(/\s+/)[0]);
+function themeTokenValue(token: string): string {
+  const match = new RegExp(`${token}:\\s*([^;]+);`).exec(themeCss);
+  expect(match?.[1]).toBeDefined();
+  return match?.[1].trim() ?? "";
 }
 
 describe("timeline motion styles", () => {
+  it.each([
+    ["--timeline-track-label", "rgba(255, 255, 255, 0.5)"],
+    ["--timeline-tick-text", "rgba(255, 255, 255, 0.34)"],
+    ["--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-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)"],
+  ])("keeps the migrated default for %s", (token, expected) => {
+    expect(themeTokenValue(token)).toBe(expected);
+  });
+
   it("keeps clip motion reduced-motion gated and layout safe", () => {
     const mediaStart = studioCss.indexOf("@media (prefers-reduced-motion: no-preference)");
     expect(mediaStart).toBeGreaterThanOrEqual(0);
@@ -63,19 +61,73 @@ describe("timeline motion styles", () => {
 
     const motionMediaCss = studioCss.slice(mediaStart);
     const timelineClipMotionRule = expectRule(motionMediaCss, ".timeline-clip");
-    const clipTransition = expectDeclaration(timelineClipMotionRule, "transition");
 
-    expect(transitionProperties(clipTransition)).toEqual(allowedTimelineTransitionProperties);
-    expect(clipTransition).not.toMatch(/\b(?:all|left|width|top|bottom|transform)\b/);
+    expect(expectDeclaration(timelineClipMotionRule, "transition")).toBe(
+      "background-color 120ms ease-out",
+    );
   });
 
   it("layers the active mint bloom through opacity instead of a gradient background swap", () => {
     const baseTimelineClipRule = expectRule(studioCss, ".timeline-clip");
+    const timelineClipLabelRule = expectRule(studioCss, ".timeline-clip__label");
+    const timelineClipTimecodeRule = expectRule(studioCss, ".timeline-clip__timecode");
+    const audioClipRule = expectRule(studioCss, ".timeline-clip.is-audio");
+    const audioClipHoverRule = expectRule(studioCss, ".timeline-clip.is-audio.is-hovered");
+    const audioClipDraggingRule = expectRule(studioCss, ".timeline-clip.is-audio.is-dragging");
     const activeTimelineClipRule = expectRule(studioCss, ".timeline-clip[data-active]");
+    const selectedTimelineClipRule = expectRule(studioCss, ".timeline-clip.is-selected");
+    const activeSelectedTimelineClipRule = expectRule(
+      studioCss,
+      ".timeline-clip[data-active].is-selected",
+    );
     const bloomOverlayRule = expectRule(studioCss, ".timeline-clip::before");
     const activeBloomOverlayRule = expectRule(studioCss, ".timeline-clip[data-active]::before");
 
     expect(baseTimelineClipRule).toContain("background-color: var(--clip-bg)");
+    expect(baseTimelineClipRule).toContain("border: 1px solid var(--clip-border)");
+    expect(baseTimelineClipRule).toContain("box-shadow:");
+    expect(baseTimelineClipRule).toContain("inset 0 1px 0 var(--timeline-clip-highlight)");
+    expect(baseTimelineClipRule).toContain("var(--timeline-clip-shadow)");
+    expect(timelineClipLabelRule).toContain("background: var(--timeline-clip-chip-bg)");
+    expect(timelineClipLabelRule).toContain("color: var(--timeline-clip-chip-text)");
+    expect(timelineClipLabelRule).toContain("text-overflow: ellipsis");
+    expect(timelineClipLabelRule).toContain("max-width: calc(100% - 22px)");
+    expect(timelineClipTimecodeRule).toContain("color: var(--timeline-tick-text)");
+    expect(themeCss).toContain("--timeline-clip-bg: rgba(255, 255, 255, 0.12)");
+    expect(themeCss).toContain("--timeline-clip-border: rgba(255, 255, 255, 0.22)");
+    expect(themeCss).toContain("--timeline-track-label: rgba(255, 255, 255, 0.5)");
+    expect(themeCss).toContain("--timeline-tick-text: rgba(255, 255, 255, 0.34)");
+    expect(themeCss).toContain("--timeline-clip-label-active: rgba(232, 255, 247, 0.95)");
+    expect(themeCss).toContain("--timeline-clip-label-shadow: 0 1px 2px rgba(0, 0, 0, 0.85)");
+    expect(themeCss).toContain("--timeline-clip-selection: rgba(255, 255, 255, 0.85)");
+    expect(themeCss).toContain("--timeline-clip-selection-highlight: rgb(255 255 255 / 0.55)");
+    expect(themeCss).toContain("--timeline-clip-radius: 8px");
+    expect(themeCss).toContain("--timeline-clip-audio-radius: 21px");
+    expect(themeCss).toContain("--timeline-clip-highlight: rgb(255 255 255 / 0.08)");
+    expect(themeCss).toContain("--timeline-clip-shadow: 0 2px 6px rgb(0 0 0 / 0.3)");
+    expect(themeCss).toContain("--timeline-clip-chip-bg: rgba(15, 22, 18, 0.73)");
+    expect(themeCss).toContain("--timeline-clip-chip-audio-bg: rgba(25, 16, 38, 0.7)");
+    expect(themeCss).toContain("--timeline-clip-chip-text: #ffffff");
+    expect(themeCss).toContain("--timeline-row-bg: #edf0ed");
+    expect(themeCss).toContain("--timeline-clip-shadow: 0 2px 6px rgb(0 0 0 / 0.12)");
+    expect(themeCss).toContain("--timeline-clip-selection: #0f766e");
+    expect(themeCss).toContain("--timeline-clip-audio-bg: rgba(167, 139, 250, 0.16)");
+    expect(themeCss).toContain("--timeline-clip-audio-border: rgba(167, 139, 250, 0.4)");
+    expect(themeCss).toContain("--timeline-clip-audio-bg-hover: rgba(167, 139, 250, 0.24)");
+    expect(themeCss).toContain("--timeline-clip-audio-bg-dragging: rgba(60, 52, 84, 0.96)");
+    expect(audioClipRule).toContain("background-color: var(--timeline-clip-audio-bg)");
+    expect(audioClipRule).toContain("border-color: var(--timeline-clip-audio-border)");
+    expect(audioClipHoverRule).toContain("background-color: var(--timeline-clip-audio-bg-hover)");
+    expect(audioClipDraggingRule).toContain("var(--timeline-clip-audio-bg-dragging)");
+    expect(themeCss).toContain("--timeline-clip-selection: rgba(255, 255, 255, 0.85)");
+    expect(selectedTimelineClipRule).toContain(
+      "outline: 1.5px solid var(--timeline-clip-selection)",
+    );
+    expect(selectedTimelineClipRule).toContain("outline-offset: -1.5px");
+    expect(activeSelectedTimelineClipRule).toContain(
+      "outline: 1.5px solid var(--timeline-clip-selection)",
+    );
+    expect(activeSelectedTimelineClipRule).toContain("outline-offset: -1.5px");
     expect(activeTimelineClipRule).not.toContain("background: linear-gradient");
     expect(activeTimelineClipRule).toContain("border-color: var(--clip-border-active)");
     expect(activeTimelineClipRule).not.toContain("box-shadow");
@@ -85,6 +137,20 @@ describe("timeline motion styles", () => {
     expect(activeBloomOverlayRule).toContain("opacity: 1");
   });
 
+  it("routes timeline overlay colours through theme tokens", () => {
+    const overlaySource = timelineOverlaySources.join("\n");
+
+    expect(overlaySource).toContain("var(--timeline-shortcut-bg)");
+    expect(overlaySource).toContain("var(--timeline-thumbnail-shimmer)");
+    expect(overlaySource).toContain("var(--timeline-thumbnail-label-gradient)");
+    expect(overlaySource).toContain("var(--timeline-thumbnail-label-shadow)");
+    expect(overlaySource).toContain('"--timeline-waveform-bar-rgb"');
+    expect(overlaySource).toContain("var(--timeline-waveform-error)");
+    expect(overlaySource).toContain("var(--timeline-waveform-label-shadow)");
+    expect(overlaySource).toContain("var(--timeline-text-solid)");
+    expect(overlaySource).toContain("var(--timeline-accent)");
+  });
+
   it("targets trim handle bars without changing drag geometry", () => {
     const handleClassMatches = timelineClipSource.match(/className="timeline-clip__handle-bar"/g);
 

package/src/player/components/timelineTheme.test.ts

@@ -1,11 +1,25 @@
 import { describe, expect, it } from "vitest";
 import {
+  clipWidthLadder,
+  defaultTimelineTheme,
   getClipHandleOpacity,
   getRenderedTimelineElement,
   getTimelineTrackStyle,
 } from "./timelineTheme";
 import { getTrackStyle } from "./timelineIcons";
 
+describe("clipWidthLadder", () => {
+  it("labels from 60px, keeps the picture below that, and uses one frame below 24px", () => {
+    expect(clipWidthLadder(200)).toBe("labeled");
+    expect(clipWidthLadder(60)).toBe("labeled");
+    expect(clipWidthLadder(59)).toBe("picture");
+    expect(clipWidthLadder(24)).toBe("picture");
+    expect(clipWidthLadder(23)).toBe("frame");
+    expect(defaultTimelineTheme.clipRadius).toBe("var(--timeline-clip-radius)");
+    expect(defaultTimelineTheme.audioClipRadius).toBe("var(--timeline-clip-audio-radius)");
+  });
+});
+
 describe("getTimelineTrackStyle", () => {
   it("uses one neutral clip style for every timeline tag", () => {
     const expectedStyle = {

package/src/player/components/timelineTheme.ts

@@ -27,14 +27,11 @@ export interface TimelineTheme {
   clipBorder: string;
   clipBorderHover: string;
   clipBorderActive: string;
-  clipShadow: string;
-  clipShadowHover: string;
-  clipShadowActive: string;
-  clipShadowDragging: string;
   handleColor: string;
   panelResizeSeam: string;
   panelResizeActive: string;
   clipRadius: string;
+  audioClipRadius: string;
 }
 
 const TRACK_STYLE: TimelineTrackStyle = {
@@ -67,18 +64,22 @@ export const defaultTimelineTheme: TimelineTheme = {
   clipBorder: "var(--timeline-clip-border)",
   clipBorderHover: "var(--timeline-clip-border-hover)",
   clipBorderActive: "var(--timeline-clip-border-active)",
-  // Shadows stay literal: a light host still wants a dark contact shadow, so
-  // these are not part of the surface/hairline/text/clip-colour theming ask.
-  clipShadow: "none",
-  clipShadowHover: "0 2px 8px rgba(0,0,0,0.2)",
-  clipShadowActive: "0 2px 8px rgba(0,0,0,0.2), 0 0 0 1px rgba(255,255,255,0.04)",
-  clipShadowDragging: "0 8px 24px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.06)",
   handleColor: "var(--timeline-handle)",
   panelResizeSeam: "var(--timeline-resize-seam)",
   panelResizeActive: "var(--timeline-resize-active)",
-  clipRadius: "var(--radius-lg)",
+  clipRadius: "var(--timeline-clip-radius)",
+  audioClipRadius: "var(--timeline-clip-audio-radius)",
 };
 
+export type ClipWidthLadder = "labeled" | "picture" | "frame";
+
+/** Label chip from 60px. Under 24px the clip is one cropped frame. */
+export function clipWidthLadder(widthPx: number): ClipWidthLadder {
+  if (widthPx < 24) return "frame";
+  if (widthPx < 60) return "picture";
+  return "labeled";
+}
+
 export function getTimelineTrackStyle(_tag: string): TimelineTrackStyle {
   return TRACK_STYLE;
 }

package/src/styles/hex-baseline.json

@@ -1,5 +1,5 @@
 {
-  "total": 385,
+  "total": 302,
   "files": {
     "packages/studio/src/captions/components/CaptionOverlay.tsx": 5,
     "packages/studio/src/captions/components/CaptionTimeline.tsx": 11,
@@ -49,35 +49,16 @@
     "packages/studio/src/components/sidebar/AudioRow.tsx": 2,
     "packages/studio/src/components/ui/HyperframesMark.tsx": 4,
     "packages/studio/src/hooks/useInlineTextEdit.ts": 1,
-    "packages/studio/src/player/components/AudioWaveform.tsx": 6,
+    "packages/studio/src/player/components/AudioWaveform.tsx": 1,
     "packages/studio/src/player/components/BeatStrip.tsx": 6,
     "packages/studio/src/player/components/CompositionThumbnail.tsx": 2,
-    "packages/studio/src/player/components/ImageThumbnail.tsx": 6,
-    "packages/studio/src/player/components/LayerDisclosureRow.tsx": 3,
     "packages/studio/src/player/components/Player.tsx": 2,
     "packages/studio/src/player/components/PlayerControls.tsx": 1,
-    "packages/studio/src/player/components/PlayheadIndicator.tsx": 3,
     "packages/studio/src/player/components/ShortcutsPanel.tsx": 7,
     "packages/studio/src/player/components/SpeedMenu.tsx": 2,
-    "packages/studio/src/player/components/TimelineAutomationLane.tsx": 4,
-    "packages/studio/src/player/components/TimelineCanvas.tsx": 13,
-    "packages/studio/src/player/components/TimelineClipDiamonds.tsx": 2,
-    "packages/studio/src/player/components/TimelineDiamondConnectors.tsx": 2,
-    "packages/studio/src/player/components/TimelineEmptyState.tsx": 1,
-    "packages/studio/src/player/components/TimelineFxButton.tsx": 8,
-    "packages/studio/src/player/components/TimelineGroupHeader.tsx": 6,
-    "packages/studio/src/player/components/TimelineGroupLaneLabels.tsx": 1,
-    "packages/studio/src/player/components/TimelineGroupRow.tsx": 1,
-    "packages/studio/src/player/components/TimelineRazorInteraction.tsx": 1,
-    "packages/studio/src/player/components/TimelineRuler.tsx": 1,
-    "packages/studio/src/player/components/TimelineShortcutHint.tsx": 2,
-    "packages/studio/src/player/components/TimelineTrackHeader.tsx": 2,
-    "packages/studio/src/player/components/TimelineTrackPlainHeader.tsx": 2,
-    "packages/studio/src/player/components/VideoThumbnail.tsx": 6,
-    "packages/studio/src/player/components/timelineTheme.ts": 5,
     "packages/studio/src/player/components/trackHeaderLabelRows.tsx": 6,
-    "packages/studio/src/styles/studio.css": 63,
     "packages/studio/src/telemetry/client.ts": 1,
-    "packages/studio/src/webmcp/webmcpTestUtils.ts": 1
+    "packages/studio/src/webmcp/webmcpTestUtils.ts": 1,
+    "packages/studio/src/styles/studio.css": 48
   }
 }

package/src/styles/studio.css

@@ -202,7 +202,10 @@ body {
 .timeline-clip {
   background-color: var(--clip-bg);
   border: 1px solid var(--clip-border);
-  border-radius: 8px;
+  border-radius: var(--timeline-clip-radius);
+  box-shadow:
+    inset 0 1px 0 var(--timeline-clip-highlight),
+    var(--timeline-clip-shadow);
 }
 
 .timeline-clip::before {
@@ -227,16 +230,19 @@ body {
    accented visual clips — so the audio zone at the bottom is visually separate
    at a glance (the timeline's kinds: visual on top, audio below). */
 .timeline-clip.is-audio {
-  background-color: rgba(167, 139, 250, 0.16);
-  border-color: rgba(167, 139, 250, 0.4);
+  background-color: var(--timeline-clip-audio-bg);
+  border-color: var(--timeline-clip-audio-border);
+  border-radius: var(--timeline-clip-audio-radius);
 }
 
 .timeline-clip.is-audio.is-hovered {
-  background-color: rgba(167, 139, 250, 0.24);
+  background-color: var(--timeline-clip-audio-bg-hover);
 }
 
 .timeline-clip.is-audio.is-dragging {
-  background-color: rgba(60, 52, 84, 0.96);
+  box-shadow:
+    inset 0 0 0 999px var(--timeline-clip-audio-bg-dragging),
+    0 8px 24px var(--timeline-clip-shadow-dragging);
 }
 
 .timeline-clip.is-hovered {
@@ -248,53 +254,56 @@ body {
 }
 
 .timeline-clip.is-selected {
-  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.85);
-}
-
-.timeline-clip[data-active].is-selected {
-  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.85);
+  outline: 1.5px solid var(--timeline-clip-selection);
+  outline-offset: -1.5px;
 }
 
-.timeline-clip.is-dragging {
-  /* Solid background so the picked-up clip reads clearly while dragging — audio
-     clips (waveform drawn on a separate layer) would otherwise look transparent. */
-  background-color: var(--clip-bg-dragging);
-  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
+.timeline-clip.is-selected::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: 4;
+  border-radius: inherit;
+  box-shadow: inset 0 0 0 1px var(--timeline-clip-selection-highlight);
+  pointer-events: none;
 }
 
-/* Keep the white selection outline while dragging (a plain box-shadow alone gets
-   overridden by .is-dragging's drop shadow, so re-state both together). */
-.timeline-clip.is-selected.is-dragging {
-  box-shadow:
-    0 0 0 1.5px rgba(255, 255, 255, 0.85),
-    0 8px 24px rgba(0, 0, 0, 0.4);
+.timeline-clip[data-active].is-selected {
+  outline: 1.5px solid var(--timeline-clip-selection);
+  outline-offset: -1.5px;
 }
 
-.timeline-clip[data-active].is-selected.is-dragging {
+.timeline-clip.is-dragging {
+  /* Veil is a shadow, not background-color, so drop does not fade the hover fill. */
   box-shadow:
-    0 0 0 1.5px rgba(255, 255, 255, 0.85),
-    0 8px 24px rgba(0, 0, 0, 0.4);
+    inset 0 0 0 999px var(--clip-bg-dragging),
+    0 8px 24px var(--timeline-clip-shadow-dragging);
 }
 
 .timeline-clip__label {
   position: absolute;
-  top: 6px;
-  left: 12px;
-  right: 10px;
+  top: 5px;
+  left: 6px;
   z-index: 6;
+  width: fit-content;
+  max-width: calc(100% - 22px);
   overflow: hidden;
-  color: rgba(255, 255, 255, 0.5);
+  padding: 1px 5px;
+  border-radius: 4px;
+  background: var(--timeline-clip-chip-bg);
+  color: var(--timeline-clip-chip-text);
   font-size: 10px;
   font-weight: 500;
-  line-height: 1;
+  line-height: 16px;
   pointer-events: none;
-  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.timeline-clip[data-active] .timeline-clip__label {
-  color: rgba(232, 255, 247, 0.95);
+.timeline-clip.is-audio .timeline-clip__label {
+  top: 11px;
+  left: 9px;
+  background: var(--timeline-clip-chip-audio-bg);
 }
 
 .timeline-clip__timecode {
@@ -302,7 +311,7 @@ body {
   bottom: 6px;
   left: 12px;
   overflow: hidden;
-  color: rgba(255, 255, 255, 0.34);
+  color: var(--timeline-tick-text);
   font-family: var(--font-mono);
   font-size: 9px;
   font-variant-numeric: tabular-nums;
@@ -313,20 +322,7 @@ body {
 
 @media (prefers-reduced-motion: no-preference) {
   .timeline-clip {
-    transition:
-      background-color 200ms cubic-bezier(0.22, 1, 0.36, 1),
-      border-color 200ms cubic-bezier(0.22, 1, 0.36, 1),
-      box-shadow 200ms cubic-bezier(0.22, 1, 0.36, 1),
-      color 200ms cubic-bezier(0.22, 1, 0.36, 1),
-      opacity 200ms cubic-bezier(0.22, 1, 0.36, 1);
-  }
-
-  .timeline-clip::before {
-    transition: opacity 200ms cubic-bezier(0.22, 1, 0.36, 1);
-  }
-
-  .timeline-clip__label {
-    transition: color 200ms cubic-bezier(0.22, 1, 0.36, 1);
+    transition: background-color 120ms ease-out;
   }
 
   .timeline-clip__handle-bar {

package/src/styles/theme.css

@@ -62,6 +62,42 @@
   --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);
+  --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);
+  --timeline-clip-selection: 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;
+  --timeline-clip-highlight: rgb(255 255 255 / 0.08);
+  --timeline-clip-shadow: 0 2px 6px rgb(0 0 0 / 0.3);
+  --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-thumbnail-shimmer: linear-gradient(
+    90deg,
+    rgba(255, 255, 255, 0.02) 0%,
+    rgba(255, 255, 255, 0.05) 50%,
+    rgba(255, 255, 255, 0.02) 100%
+  );
+  --timeline-thumbnail-label-gradient: linear-gradient(
+    to top,
+    rgba(0, 0, 0, 0.85) 0%,
+    rgba(0, 0, 0, 0.4) 60%,
+    transparent 100%
+  );
+  --timeline-thumbnail-label-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
+  --timeline-waveform-bar-rgb: 75, 163, 210;
+  --timeline-waveform-error: repeating-linear-gradient(
+    90deg,
+    rgba(75, 163, 210, 0.35) 0 2px,
+    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);
@@ -78,6 +114,40 @@
   --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-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-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);
 
   /* -------------------------------------------------------------- geometry */
 
@@ -146,7 +216,14 @@
   --duration-press: 120ms;
   --duration-hover: 150ms;
   --duration-expand: 160ms;
-  --duration-open: 180ms;
+  /* Menus, popovers, and dropdowns. Open is ease-out; close is shorter and ease-in. */
+  --duration-open: 120ms;
+  --duration-close: 90ms;
+  /* Tooltips use the same enter shape on a shorter open. */
+  --duration-tooltip: 100ms;
+  /* Visible on the first frame. Never enter from scale 0 or opacity 0. */
+  --popup-enter-opacity: 0.8;
+  --popup-enter-scale: 0.97;
 
   /* ------------------------------------------------------------------ icon */
 
@@ -264,6 +341,33 @@
   --color-white: #fff;
 }
 
+/* One paper block. A host sets data-theme="paper" on the document element. */
+:root[data-theme="paper"] {
+  --timeline-shell-bg: #f4f6f3;
+  --timeline-row-bg: #edf0ed;
+  --timeline-clip-bg: #c9d1cb;
+  --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-error: repeating-linear-gradient(
+    90deg,
+    rgba(20, 12, 32, 0.35) 0 2px,
+    transparent 2px 5px
+  );
+}
+
 /* Motion durations as utilities, since Tailwind has no `--duration-*`
  * namespace. Each one zeroes itself under `prefers-reduced-motion`, so a
  * caller cannot forget the reduced-motion case. */

package/src/styles/theme.test.ts

@@ -109,6 +109,15 @@ describe("studio theme", () => {
     expect(vars.get("--text-lg")).toBe("1.125rem");
   });
 
+  it("opens menus from a visible shape and closes them faster", () => {
+    expect(declaredValue("--duration-open")).toBe("120ms");
+    expect(declaredValue("--duration-close")).toBe("90ms");
+    expect(declaredValue("--duration-tooltip")).toBe("100ms");
+    expect(declaredValue("--popup-enter-opacity")).toBe("0.8");
+    expect(declaredValue("--popup-enter-scale")).toBe("0.97");
+    expect(declaredValue("--duration-hover")).toBe("150ms");
+  });
+
   it("compiles a motion-duration utility with a reduced-motion variant", async () => {
     const css = await build("studio.css", ["duration-press", "duration-open"]);
 

package/src/utils/audioMeterVisibility.ts

@@ -1,12 +1,12 @@
 import { create } from "zustand";
 import { readStudioUiPreferences, writeStudioUiPreferences } from "./studioUiPreferences";
 
-/** Whether the audio meter strip is shown; persisted, on unless the user hid it. */
+/** Whether the audio meter strip is shown; persisted, off unless the user showed it. */
 export const useAudioMetersVisible = create<{
   visible: boolean;
   setVisible: (visible: boolean) => void;
 }>((set) => ({
-  visible: readStudioUiPreferences().audioMetersVisible ?? true,
+  visible: readStudioUiPreferences().audioMetersVisible ?? false,
   setVisible: (visible) => {
     writeStudioUiPreferences({ audioMetersVisible: visible });
     set({ visible });

package/src/utils/studioUiPreferences.ts

@@ -25,7 +25,7 @@ export interface StudioUiPreferences {
   snapToGrid?: boolean;
   /** Timeline magnet: snap clip drags/trims/drops to playhead, clip edges, and beats. */
   timelineSnapEnabled?: boolean;
-  /** Audio level meters at the timeline's right edge; shown unless hidden here. */
+  /** Audio level meters at the timeline's right edge; hidden unless enabled here. */
   audioMetersVisible?: boolean;
   /** Keeps the main track gapless: deleting a clip closes the gap. Distinct
    *  from `timelineSnapEnabled` ("Magnet", drag/trim snapping). */