@hyperframes/studio 0.8.116 → 0.8.118

package/src/hooks/useGsapAwareEditing.test.tsx

@@ -74,6 +74,7 @@ function mountResizeHandler(
         size: { width: number; height: number },
         offset?: { x: number; y: number },
         restore?: () => void,
+        route?: { plainTranslate: boolean },
       ) => Promise<void | import("../utils/previewFeatureUsage").GeometryCommitResult>)
     | null = null;
   let property: ReturnType<typeof useGsapAwareEditing>["commitAnimatedProperty"] | null = null;
@@ -234,6 +235,21 @@ describe("useGsapAwareEditing keeps the route a gesture chose at press", () => {
   });
 });
 
+describe("useGsapAwareEditing keeps the box route a resize chose at press", () => {
+  it.each([
+    ["the CSS route, on an element GSAP has since taken over", true],
+    ["the GSAP route, on an element that now looks GSAP-free", false],
+  ])("%s", async (_, plainTranslate) => {
+    mocks.resize.mockResolvedValue({ status: "persisted" });
+    const h = mountResizeHandler([], [], plainTranslate);
+    const size = { width: 300, height: 200 };
+    await act(() => h.resize(h.selection, size, undefined, vi.fn(), { plainTranslate }));
+    expect(h.fallback).toHaveBeenCalledTimes(plainTranslate ? 1 : 0);
+    expect(mocks.resize).toHaveBeenCalledTimes(plainTranslate ? 0 : 1);
+    act(() => h.root.unmount());
+  });
+});
+
 describe("useGsapAwareEditing refuses a group GSAP took over before writing any member", () => {
   it("writes no member when one CSS-route member has been folded since the press", async () => {
     const stageElementPositionOffset = vi.fn(() => ({ save: vi.fn(), rollback: vi.fn() }));
@@ -296,6 +312,15 @@ describe("useGsapAwareEditing rotation routing", () => {
     act(() => h.root.unmount());
   });
 
+  it("saves a turn the press sent down the GSAP route there, even once the element looks GSAP-free", async () => {
+    vi.mocked(tryGsapRotationIntercept).mockResolvedValue({ status: "persisted" });
+    const h = rotate(document.createElement("div"));
+    await act(() => h.rotationCommit(h.box, { angle: 55, plain: null }));
+    expect(tryGsapRotationIntercept).toHaveBeenCalledTimes(1);
+    expect(h.handleDomRotationCommit).not.toHaveBeenCalled();
+    act(() => h.root.unmount());
+  });
+
   it("saves a turn the press drew as CSS by the CSS writer, even once a GSAP tween turns the element", async () => {
     const element = document.createElement("div");
     const h = rotate(element);

package/src/hooks/useGsapAwareEditing.ts

@@ -30,9 +30,7 @@ import { logResize, logResizeSettle } from "../utils/resizeDebug";
 import type { MoveCommitOptions } from "../components/editor/domEditOverlayGestures";
 import { runGestureTransaction } from "./gestureTransaction";
 import {
-  gsapWritesBox,
-  gsapWritesPosition,
-  gsapWritesRotation,
+  editsPlainCss,
   hasNonHoldTweenForElement,
   POSITION_CHANNELS,
 } from "./gsapRuntimeKeyframes";
@@ -151,7 +149,7 @@ export function useGsapAwareEditing({
       modifiers?: MoveCommitOptions,
     ) => {
       const writes = observeGsapGesture(gsapCommitMutation);
-      if (modifiers?.plainTranslate ?? !gsapWritesPosition(selection.element)) {
+      if (modifiers?.plainTranslate ?? editsPlainCss(selection.element, "move")) {
         const result = await stageElementPositionOffset(selection, next, true).save();
         return writes.finish(result?.changed === true);
       }
@@ -207,9 +205,10 @@ export function useGsapAwareEditing({
       next: { width: number; height: number },
       offset?: { x: number; y: number },
       restore: () => void = () => undefined,
+      route?: { plainTranslate: boolean },
     ) => {
       const writes = observeGsapGesture(gsapCommitMutation);
-      if (!gsapWritesBox(selection.element)) {
+      if (route?.plainTranslate ?? editsPlainCss(selection.element, "resize")) {
         const result = await handleDomBoxSizeCommit(selection, next, offset, restore);
         return writes.finish(result?.changed === true);
       }
@@ -258,8 +257,13 @@ export function useGsapAwareEditing({
           );
           // Saved after the size, under its undo key, so the two are one step.
           await saveMove(dragOutcome, async () => {
-            const plain = !gsapWritesPosition(selection.element);
-            anchorMove = stageElementPositionOffset(selection, offset, plain, coalesceKey);
+            const plainAfterSettle = editsPlainCss(selection.element, "move");
+            anchorMove = stageElementPositionOffset(
+              selection,
+              offset,
+              plainAfterSettle,
+              coalesceKey,
+            );
           });
         }
       };
@@ -360,7 +364,7 @@ export function useGsapAwareEditing({
   const handleGsapAwareRotationCommit = useCallback(
     async (selection: DomEditSelection, next: RotationCommit) => {
       const writes = observeGsapGesture(gsapCommitMutation);
-      if (next.plain || !gsapWritesRotation(selection.element)) {
+      if (next.plain === undefined ? editsPlainCss(selection.element, "rotate") : next.plain) {
         const result = await handleDomRotationCommit(selection, next);
         return writes.finish(result?.changed === true);
       }

package/src/hooks/useGsapAwareGroupMove.ts

@@ -5,7 +5,7 @@ import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
 import type { CommitMutationCall, CommitMutationOptions } from "./gsapScriptCommitTypes";
 import type { UseGsapAwareEditingParams } from "./useGsapAwareEditing";
 import { observeGsapGesture } from "./gsapGestureOutcome";
-import { gsapWritesPosition } from "./gsapRuntimeKeyframes";
+import { editsPlainCss } from "./gsapRuntimeKeyframes";
 import { refuseGsapTakeover } from "./elementOffsetStager";
 import { tryGsapDragIntercept } from "./gsapRuntimeBridge";
 import { assertGsapEditPersisted } from "./gsapEditOutcome";
@@ -81,7 +81,7 @@ export function useGsapAwareGroupMove({
       // write nothing and share one in-flight parse per file, so they run together.
       const preflightResults = await Promise.allSettled(
         updates.map(async ({ selection, next, plainTranslate }) => {
-          if (plainTranslate ?? !gsapWritesPosition(selection.element)) {
+          if (plainTranslate ?? editsPlainCss(selection.element, "move")) {
             refuseGsapTakeover(selection.element, toastRefusal ? showToast : () => {});
             return void offsetMembers.set(selection, true);
           }

package/src/hooks/useGsapScriptCommits.test.tsx

@@ -30,7 +30,11 @@ vi.mock("../utils/studioTelemetry", () => ({
 (globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
 
 import type { DomEditSelection } from "../components/editor/domEditingTypes";
-import type { MutationResult } from "./gsapScriptCommitTypes";
+import type {
+  CommitMutationCall,
+  CommitMutationOptions,
+  MutationResult,
+} from "./gsapScriptCommitTypes";
 import { persistSdkSerialize } from "../utils/sdkCutover";
 import { applyPreviewSync, useGsapScriptCommits } from "./useGsapScriptCommits";
 import { hasStudioPendingEdits } from "../utils/studioPendingEdits";
@@ -211,6 +215,34 @@ describe("applyPreviewSync", () => {
     expect(applySoftReload).toHaveBeenCalledTimes(1);
   });
 
+  it("carries a deferred write with no instant patch into the final batch render", () => {
+    const previewFallbackLatch = { pending: false };
+    applySoftReload.mockReturnValue("applied");
+    patchRuntimeTweenInPlace.mockReturnValue(true);
+    const group = {
+      label: "Move animated layer (group)",
+      softReload: true,
+      previewFallbackLatch,
+    };
+
+    applyPreviewSync(
+      FAKE_IFRAME,
+      result({ scriptText: "SCRIPT" }),
+      { ...group, deferPreviewSync: true },
+      vi.fn(),
+    );
+    expect(previewFallbackLatch.pending).toBe(true);
+    expect(applySoftReload).not.toHaveBeenCalled();
+
+    applyPreviewSync(
+      FAKE_IFRAME,
+      result({ scriptText: "SCRIPT" }),
+      { ...group, instantPatch: { selector: "#final", change: { kind: "set", props: { x: 2 } } } },
+      vi.fn(),
+    );
+    expect(applySoftReload).toHaveBeenCalledTimes(1);
+  });
+
   it("falls back immediately when a deferred patch miss has no final-render latch", () => {
     patchRuntimeTweenInPlace.mockReturnValue(false);
     applySoftReload.mockReturnValue("applied");
@@ -416,6 +448,16 @@ function renderCommitHook(
 
 const selection: DomEditSelection = { id: "a", selector: "#a" } as DomEditSelection;
 
+async function commitBatch(calls: CommitMutationCall[], options: CommitMutationOptions) {
+  const deps = renderCommitHook();
+  const batch = deps.api.commitMutation.batch;
+  if (!batch) throw new Error("batch capability missing");
+  await act(async () => {
+    await batch(calls, options);
+  });
+  return deps;
+}
+
 function mockFetchResult(over: Partial<MutationResult> = {}): void {
   const body: MutationResult = {
     ok: true,
@@ -553,6 +595,32 @@ describe("runCommit — instantPatch wiring", () => {
     expect(deps.reloadPreview).not.toHaveBeenCalled();
   });
 
+  it("batch where a write without an instant patch soft-reloads instead of patching the rest", async () => {
+    // A corner resize saves size (no in-place patch) and position (patched) in one batch.
+    patchRuntimeTweenInPlace.mockReturnValue(true);
+    applySoftReload.mockReturnValue("applied");
+    mockFetchResult({ changed: true });
+    const position = { selector: "#a", change: { kind: "set" as const, props: { x: 10 } } };
+    const deps = await commitBatch(
+      [
+        {
+          selection,
+          mutation: { type: "update-property", property: "width", value: 300 },
+          options: { label: "Resize layer" },
+        },
+        {
+          selection,
+          mutation: { type: "update-property", property: "x", value: 10 },
+          options: { label: "Resize layer", instantPatch: position },
+        },
+      ],
+      { label: "Resize layer", softReload: true },
+    );
+
+    expect(applySoftReload).toHaveBeenCalledTimes(1);
+    expect(deps.reloadPreview).not.toHaveBeenCalled();
+  });
+
   it("no-op commit whose instant patch MISSES soft-reloads (never full-reloads)", async () => {
     // Server contract: gsap-mutations returns scriptText on EVERY response,
     // including changed:false — so the fallback re-runs the identical script

package/src/hooks/useGsapScriptCommits.ts

@@ -268,7 +268,8 @@ export function applyPreviewSync(
   nestedFiles?: Map<string, string> | null,
 ): void {
   const patches = instantPatchesFor(options);
-  let needsFallback = options.previewFallbackLatch?.pending === true;
+  const writtenWithoutPatch = patches.length === 0;
+  let needsFallback = options.previewFallbackLatch?.pending === true || writtenWithoutPatch;
   if (patches.length > 0) {
     const deferSeek = options.deferPreviewSync === true;
     const missed = patches.find(
@@ -410,13 +411,14 @@ export function useGsapScriptCommits({ projectIdRef, activeCompPath, previewIfra
     if (!result) return;
     trackKeyframeCommit(mutations, result, options, calls.map((call) => call.options));
     options.onResult?.(result);
-    // Each call brings its own fast-path patch; the batch wrote them all, so the
-    // preview sync applies them all rather than just the last call's.
-    const instantPatches = calls
-      .map(({ options: callOptions }) => callOptions.instantPatch)
-      .filter((patch) => patch !== undefined);
+    // The batch wrote every call, so patch in place only when every call brought a patch; one
+    // without (a resize's size write) needs the reload, or the preview keeps the old value.
+    const instantPatches = calls.flatMap(({ options: callOptions }) =>
+      callOptions.instantPatch ? [callOptions.instantPatch] : [],
+    );
     const { instantPatch: _instantPatch, ...batchOptions } = options;
-    await finalizeSuccessfulMutation(pid, compositionPath, last.selection, last.mutation, targetPath, result, instantPatches.length > 0 ? { ...batchOptions, instantPatches } : batchOptions);
+    const allPatched = instantPatches.length === calls.length;
+    await finalizeSuccessfulMutation(pid, compositionPath, last.selection, last.mutation, targetPath, result, allPatched ? { ...batchOptions, instantPatches } : batchOptions);
   }, [showToast, finalizeSuccessfulMutation]);
 
   // Every GSAP-script commit is a read-modify-write of one file. Overlapping

package/src/hooks/usePersistentEditHistory.test.ts

@@ -2,9 +2,9 @@
 // fallow-ignore-file code-duplication
 import { act, createElement } from "react";
 import { createRoot } from "react-dom/client";
-import { mkdtempSync, readFileSync, rmSync, writeFileSync } from "node:fs";
+import { existsSync, mkdirSync, mkdtempSync, readFileSync, rmSync, writeFileSync } from "node:fs";
 import { tmpdir } from "node:os";
-import { join } from "node:path";
+import { dirname, join } from "node:path";
 import { afterEach, expect, it, vi } from "vitest";
 import {
   createStudioApi,
@@ -316,6 +316,29 @@ it("refuses a second press whose edit is undone once an edit was made after the
   expect(file()).toBe("B");
 });
 
+it("a file the edit made (a freeze's still) is deleted by its Undo and put back by its Redo", async () => {
+  const { dir, hook, save, readFile } = await studio();
+  const still = join(dir, "assets", "freeze", "talk.png");
+  mkdirSync(dirname(still), { recursive: true });
+  writeFileSync(still, "png");
+  save("B");
+  await act(() =>
+    hook().recordEdit({
+      label: "Freeze frame",
+      files: { "index.html": { before: "A", after: "B" } },
+      created: ["assets/freeze/talk.png"],
+    }),
+  );
+  await vi.waitFor(() => expect(hook().undoLabel).toBe("Freeze frame"));
+
+  await act(() => hook().undo({ readFile }));
+  expect(existsSync(still)).toBe(false);
+
+  await vi.waitFor(() => expect(hook().canRedo).toBe(true));
+  await act(() => hook().redo({ readFile }));
+  expect(readFileSync(still, "utf8")).toBe("png");
+});
+
 it("a drag's edits under one key undo as one step, even before the drag goes idle", async () => {
   const { hook, file, save, readFile } = await studio();
   const writes: Array<[before: string, after: string]> = [

package/src/hooks/usePersistentEditHistory.ts

@@ -3,13 +3,7 @@ import type { HistoryListItem, HistoryResult } from "@hyperframes/studio-server"
 import { studioFileContentVersion, studioWriteHeaders } from "../utils/studioFileVersion";
 import type { RestoreFiles } from "../utils/gsapUndoRestore";
 import { studioApiFetch } from "../utils/studioApiFetch";
-
-interface RecordEditInput {
-  label: string;
-  coalesceKey?: string;
-  coalesceMs?: number;
-  files: Record<string, { before: string; after: string }>;
-}
+import type { RecordEditInput } from "../utils/studioFileHistory";
 
 interface ApplyCallbacks {
   readFile: (path: string) => Promise<string>;
@@ -235,9 +229,9 @@ export function usePersistentEditHistory({ projectId }: UsePersistentEditHistory
   }, [refresh, own]);
 
   const recordEdit = useCallback(
-    async ({ label, coalesceKey, coalesceMs, files }: RecordEditInput) => {
+    async ({ label, coalesceKey, coalesceMs, files, created = [] }: RecordEditInput) => {
       if (!projectId) return;
-      const paths = Object.keys(files);
+      const paths = [...Object.keys(files), ...created];
       own.overtake();
       const reply = await post(historyUrl(projectId, "/claim"), {
         label,

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

@@ -499,6 +499,54 @@ describe("Timeline provider boundary", () => {
     act(() => root.unmount());
   });
 
+  // An agent writes music alternatives muted; the author unmutes one and must be
+  // able to mute it again from the same row.
+  it("mutes, unmutes and mutes an audio track again from its header", () => {
+    const host = createSizedTimelineHost(640);
+    usePlayerStore.setState({
+      duration: 4,
+      timelineReady: true,
+      elements: [{ id: "music-b", tag: "audio", start: 0, duration: 4, track: 0, hidden: true }],
+    });
+    const onToggleTrackHidden = vi.fn((track: number, hidden: boolean) => {
+      usePlayerStore.setState({
+        elements: usePlayerStore
+          .getState()
+          .elements.map((el) => (el.track === track ? { ...el, hidden } : el)),
+      });
+    });
+    const root = createRoot(host);
+    act(() => {
+      root.render(
+        React.createElement(
+          TimelineEditProvider,
+          { value: { onToggleTrackHidden } },
+          React.createElement(Timeline),
+        ),
+      );
+    });
+    act(() => {});
+
+    const press = (label: string) => {
+      const button = host.querySelector<HTMLButtonElement>(`button[aria-label="${label}"]`);
+      if (!button) throw new Error(`Expected a "${label}" button`);
+      act(() => button.click());
+    };
+    press("Unmute track 1");
+    press("Mute track 1");
+    press("Unmute track 1");
+    press("Mute track 1");
+
+    expect(onToggleTrackHidden.mock.calls.map((call) => call[1])).toEqual([
+      false,
+      true,
+      false,
+      true,
+    ]);
+    expect(usePlayerStore.getState().elements[0]?.hidden).toBe(true);
+    act(() => root.unmount());
+  });
+
   it("splits all tracks once when shift-clicking the timeline with the razor", () => {
     const host = createSizedTimelineHost(640);
     usePlayerStore.setState({

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

@@ -256,43 +256,35 @@ describe("TimelineTrackHeader", () => {
     act(() => view.root.unmount());
   });
 
-  // The visibility control is the old hide eye. On an audio track it silences
-  // rather than hides, and the row already says so with a speaker elsewhere —
-  // so the eye's slot stays empty there. A non-audio track is untouched.
-  it("keeps the visibility control off audio track headers", () => {
+  // `data-hidden` silences an audio track, so its toggle is a mute, offered in
+  // both states: an agent writes alternatives muted and the author flips them.
+  it.each([
+    [false, "Mute track 1"],
+    [true, "Unmute track 1"],
+  ])("offers the audio track toggle when hidden=%s", (isTrackHidden, label) => {
     const audio: TimelineElement = { ...ELEMENT, tag: "audio" };
     const view = renderHeader({
       keyframeClip: audio,
       trackElements: [audio],
       isAudioTrack: true,
+      isTrackHidden,
       animations: [],
     });
-    const labels = Array.from(view.host.querySelectorAll("button")).map((b) =>
-      b.getAttribute("aria-label"),
-    );
-    expect(labels.some((l) => l && /^(Hide|Show) track/.test(l))).toBe(false);
-    expect(labels).not.toContain("Mute");
+    expect(view.host.querySelector(`button[aria-label="${label}"]`)).not.toBeNull();
     act(() => view.root.unmount());
   });
 
-  // The escape hatch. `data-hidden` on audio silences it in preview and drops it
-  // from the render; the panel's "Muted" is the unrelated HTML `muted`
-  // attribute, and nothing else writes it. Withholding the eye unconditionally
-  // meant a track hidden by "Hide all" (or by hand, or before that rule existed)
-  // was silent with no control anywhere to bring it back.
-  it("offers the eye on an audio track that is already hidden, so it can be restored", () => {
-    const audio: TimelineElement = { ...ELEMENT, tag: "audio" };
+  // Same rule as the undo entry: a track with any visual clip hides, it does not mute.
+  it("offers the eye on a track mixing audio and a visual clip", () => {
+    const audio: TimelineElement = { ...ELEMENT, id: "vo", tag: "audio" };
     const view = renderHeader({
       keyframeClip: audio,
-      trackElements: [audio],
+      trackElements: [audio, ELEMENT],
+      clipCount: 2,
       isAudioTrack: true,
-      isTrackHidden: true,
       animations: [],
     });
-    const labels = Array.from(view.host.querySelectorAll("button")).map((b) =>
-      b.getAttribute("aria-label"),
-    );
-    expect(labels.some((l) => l && /^Show track/.test(l))).toBe(true);
+    expect(view.host.querySelector('button[aria-label="Hide track 1"]')).not.toBeNull();
     act(() => view.root.unmount());
   });
 

package/src/player/components/TimelineTrackHeader.tsx

@@ -12,6 +12,7 @@ import { useTimelineEditContextOptional } from "../../contexts/TimelineEditConte
 import { useDomEditActionsContextOptional } from "../../contexts/DomEditContext";
 import { mintGroupId } from "../../components/editor/useFxCarveGrouping";
 import { runtimeAudioId } from "../lib/timelineElementHelpers";
+import { isAudioOnlyTrack } from "../../utils/timelineInspector";
 import { TimelineFxButton } from "./TimelineFxButton";
 import { getTimelinePropertyLanes } from "./TimelinePropertyLanes";
 import { elementFxChain, groupAutomationLanes, isCarveLane } from "./automationLaneData";
@@ -203,6 +204,7 @@ export function TimelineTrackHeader({
   // disclosability swapped it for the keyframe-layer row (a `◇`, no indent) the
   // moment an envelope appeared.
   const isKeyframeLayer = !!keyframeClip && disclosable && !isAudioTrack;
+  const isAudioOnly = isAudioOnlyTrack(trackElements);
   // What the lane disclosure calls this row. A row of several clips is named
   // for the TRACK, not for whichever is selected — the lanes are the track's,
   // shared per property, so "Narration 2 lanes" read as if they were that one
@@ -312,6 +314,7 @@ export function TimelineTrackHeader({
               showTrackLabel={showTrackLabel}
               isTrackHidden={isTrackHidden}
               isAudioTrack={isAudioTrack}
+              isAudioOnly={isAudioOnly}
               onToggleTrackHidden={onToggleTrackHidden}
               // On the control line rather than a third row of its own.
               trailing={
@@ -383,8 +386,7 @@ export function TimelineTrackHeader({
               hidden={isTrackHidden}
               trackNumber={trackNumber}
               trackDisplayNumber={trackDisplayNumber}
-              // Audio: only while hidden — see the plain header.
-              visible={!isAudioTrack || isTrackHidden}
+              asMute={isAudioOnly}
               onToggle={onToggleTrackHidden}
             />
           </LayerDisclosureRow>

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

@@ -1,17 +1,8 @@
 // @vitest-environment happy-dom
 
 /**
- * The visibility control's accessible contract.
- *
- * The wording ran behind the `audio-track-mute` canary at 0%, so it had never
- * rendered in any suite: it returned "Muted" / "Mute", which named the CURRENT
- * state rather than the action, and dropped the track suffix so every audio row
- * shared one accessible name. Pinned here because the label, the icon and the
- * callback's arguments are the whole identity of this control.
- *
- * The mute presentation itself is gone (`remove mute and solo from tracks and
- * groups`): the control is the visibility eye it always was, and an audio row
- * renders it only when already hidden, which is the way back out.
+ * The track toggle's accessible contract: the label names the action, carries
+ * the display row, and reads mute on an audio-only track.
  */
 
 import React, { act } from "react";
@@ -27,7 +18,7 @@ afterEach(() => {
 
 function renderButton(props: {
   hidden: boolean;
-  visible?: boolean;
+  asMute?: boolean;
   trackDisplayNumber: number | null;
 }): { host: HTMLElement; unmount: () => void; onToggle: ReturnType<typeof vi.fn> } {
   const host = document.createElement("div");
@@ -40,7 +31,7 @@ function renderButton(props: {
         hidden: props.hidden,
         trackNumber: 7,
         trackDisplayNumber: props.trackDisplayNumber,
-        visible: props.visible ?? true,
+        asMute: props.asMute ?? false,
         onToggle,
       }),
     ),
@@ -80,13 +71,13 @@ describe("VisibilityButton", () => {
     view.unmount();
   });
 
-  // `visible={false}` renders a SPACER, not nothing: every row's control
-  // columns have to line up whether or not this row offers the control.
-  it("holds the column with a spacer when withheld", () => {
-    const view = renderButton({ hidden: false, visible: false, trackDisplayNumber: 2 });
-    expect(view.host.querySelector("button")).toBeNull();
-    expect(view.host.querySelector("span")).toBeTruthy();
-    view.unmount();
+  it("names a mute on an audio-only track", () => {
+    const audible = renderButton({ hidden: false, asMute: true, trackDisplayNumber: 2 });
+    expect(labelOf(audible.host)).toBe("Mute track 2");
+    audible.unmount();
+    const muted = renderButton({ hidden: true, asMute: true, trackDisplayNumber: 2 });
+    expect(labelOf(muted.host)).toBe("Unmute track 2");
+    muted.unmount();
   });
 });
 
@@ -104,6 +95,7 @@ describe("PlainTrackHeader", () => {
           clipCount: 1,
           isTrackHidden: false,
           isAudioTrack: true,
+          isAudioOnly: true,
           onToggleTrackHidden: vi.fn(),
           showTrackLabel: true,
           ...overrides,
@@ -113,26 +105,20 @@ describe("PlainTrackHeader", () => {
     return { host, unmount: () => act(() => root.unmount()) };
   }
 
-  // A row that says what it is with a speaker does not also need the hide
-  // affordance sitting in the eye's slot.
-  it("withholds the eye from an audible audio track", () => {
+  it("offers a mute on an audible audio track", () => {
     const view = renderHeader();
-    expect(view.host.querySelector("button")).toBeNull();
+    expect(labelOf(view.host)).toBe("Mute track 1");
     view.unmount();
   });
 
-  // Withholding it unconditionally withheld the only way back: `data-hidden`
-  // silences the clip in preview and drops it from the render, and nothing else
-  // writes it, so a track hidden by hand or by "Hide all" was silent with no
-  // control anywhere to restore it.
-  it("offers it back once the audio track is hidden", () => {
+  it("offers the unmute on a muted audio track", () => {
     const view = renderHeader({ isTrackHidden: true });
-    expect(labelOf(view.host)).toBe("Show track 1");
+    expect(labelOf(view.host)).toBe("Unmute track 1");
     view.unmount();
   });
 
   it("keeps the eye on a visual track", () => {
-    const view = renderHeader({ isAudioTrack: false });
+    const view = renderHeader({ isAudioTrack: false, isAudioOnly: false });
     expect(labelOf(view.host)).toBe("Hide track 1");
     view.unmount();
   });