@hyperframes/studio 0.8.59 → 0.8.61

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/hooks/useExternalFileChangeCoordinator.test.tsx

@@ -1,3 +1,4 @@
+// fallow-ignore-file code-duplication
 // @vitest-environment happy-dom
 import { act } from "react";
 import { createRoot } from "react-dom/client";
@@ -376,4 +377,59 @@ describe("external file change coordinator", () => {
       expect(reloadPreview).not.toHaveBeenCalled();
     });
   });
+
+  // `/api/events` is one connection per SERVER (CLI host), not per project — a
+  // tab left open from a `preview` run whose port was later reused by a
+  // different project's `preview` shares this stream with it. Both projects
+  // commonly use the same default composition path, so without the filter a
+  // stale tab reloads its preview and re-reads its own composition on every
+  // save the OTHER project makes.
+  describe("cross-project deliveries on a shared connection", () => {
+    it("ignores a delivery whose projectId does not match this tab's", async () => {
+      const drainPendingChanges = vi.fn(async () => ({ status: "clean" as const }));
+      const reloadPreview = vi.fn();
+      const reloadSdkSession = vi.fn();
+      await mountCoordinator({ drainPendingChanges, reloadPreview, reloadSdkSession });
+
+      await act(async () =>
+        handler?.({
+          path: "index.html",
+          content: "other project",
+          version: "v9",
+          projectId: "project-b",
+        }),
+      );
+
+      expect(drainPendingChanges).not.toHaveBeenCalled();
+      expect(reloadPreview).not.toHaveBeenCalled();
+      expect(reloadSdkSession).not.toHaveBeenCalled();
+    });
+
+    it("still reloads for a delivery whose projectId matches this tab's", async () => {
+      const reloadPreview = vi.fn();
+      await mountCoordinator({ reloadPreview });
+
+      await act(async () =>
+        handler?.({
+          path: "index.html",
+          content: "same project",
+          version: "v9",
+          projectId: "project-a",
+        }),
+      );
+
+      expect(reloadPreview).toHaveBeenCalledOnce();
+    });
+
+    it("still reloads when projectId is absent (older server, one release of skew)", async () => {
+      const reloadPreview = vi.fn();
+      await mountCoordinator({ reloadPreview });
+
+      await act(async () =>
+        handler?.({ path: "index.html", content: "no project id", version: "v9" }),
+      );
+
+      expect(reloadPreview).toHaveBeenCalledOnce();
+    });
+  });
 });

package/src/hooks/useExternalFileChangeCoordinator.ts

@@ -349,6 +349,19 @@ export function useExternalFileChangeCoordinator({
         logReload("file-change", { path: null, why: path ? "no project" : "no path in payload" });
         return;
       }
+      // `/api/events` is one connection per SERVER, not per project: under the
+      // CLI host, a tab left open from a `preview` run that has since exited
+      // shares this stream with whatever project now runs on that port. Both
+      // commonly use the same default composition path, so without this check
+      // a stale tab reloads its preview (which then 404s — the CLI host is
+      // single-project, so it can't resolve the OTHER project it's serving)
+      // and re-reads its own composition on every save the CURRENT project
+      // makes. Absent field (older server, one release of skew) still passes.
+      const deliveredProjectId = readFileChangeField(payload, "projectId");
+      if (deliveredProjectId && deliveredProjectId !== projectId) {
+        logReload("suppressed", { path, why: "other project" });
+        return;
+      }
       pendingTimelineEditPathRef.current.delete(path);
 
       const content = readFileChangeContent(payload);

package/src/hooks/useRenderClipContent.test.ts

@@ -13,7 +13,7 @@ import { useRenderClipContent } from "./useRenderClipContent";
 (globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
 
 afterEach(() => {
-  usePlayerStore.setState({ thumbnailMode: "hidden" });
+  usePlayerStore.setState({ thumbnailMode: "hidden", elements: [] });
   document.body.innerHTML = "";
 });
 
@@ -144,6 +144,36 @@ describe("useRenderClipContent", () => {
     }
   });
 
+  it("marks audio linked when a video clip uses the same file, and muted when hidden", () => {
+    usePlayerStore.setState({
+      thumbnailMode: "hidden",
+      elements: [
+        {
+          id: "picture",
+          tag: "video",
+          start: 0,
+          duration: 4,
+          track: 0,
+          src: "assets/clip.mp4",
+        },
+      ],
+    });
+    const linked = renderClipContent({
+      id: "bed",
+      tag: "audio",
+      start: 0,
+      duration: 4,
+      track: 1,
+      src: "assets/clip.mp4",
+      hidden: true,
+    });
+    expect(isValidElement<{ linked: boolean; muted: boolean }>(linked)).toBe(true);
+    if (isValidElement<{ linked: boolean; muted: boolean }>(linked)) {
+      expect(linked.props.linked).toBe(true);
+      expect(linked.props.muted).toBe(true);
+    }
+  });
+
   it("passes empty labels to thumbnail content so TimelineClip owns clip names", () => {
     usePlayerStore.setState({ thumbnailMode: "adaptive" });
 
@@ -208,7 +238,7 @@ describe("useRenderClipContent", () => {
     }
   });
 
-  it("forwards the viewport priority and interaction detail to media work", () => {
+  it("forwards the viewport priority to video media work", () => {
     usePlayerStore.setState({ thumbnailMode: "adaptive", timelineSessionEpoch: 7 });
 
     const content = renderClipContent(
@@ -229,7 +259,6 @@ describe("useRenderClipContent", () => {
         projectId: string;
         sessionEpoch: number;
         priority: string;
-        rich: boolean;
       }>(content),
     ).toBe(true);
     if (isValidElement(content)) {
@@ -237,8 +266,8 @@ describe("useRenderClipContent", () => {
         projectId: "my-project",
         sessionEpoch: 7,
         priority: "interaction",
-        rich: true,
       });
+      expect(content.props).not.toHaveProperty("rich");
     }
   });