@hyperframes/studio 0.8.117 → 0.8.118

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyperframes/studio",
-  "version": "0.8.117",
+  "version": "0.8.118",
   "description": "",
   "repository": {
     "type": "git",
@@ -60,12 +60,12 @@
     "dockview-react": "8.3.1",
     "gsap": "^3.13.0",
     "mediabunny": "^1.45.3",
-    "@hyperframes/core": "0.8.117",
-    "@hyperframes/parsers": "0.8.117",
-    "@hyperframes/sdk": "0.8.117",
-    "@hyperframes/shader-transitions": "0.8.117",
-    "@hyperframes/studio-server": "0.8.117",
-    "@hyperframes/player": "0.8.117"
+    "@hyperframes/core": "0.8.118",
+    "@hyperframes/sdk": "0.8.118",
+    "@hyperframes/studio-server": "0.8.118",
+    "@hyperframes/parsers": "0.8.118",
+    "@hyperframes/player": "0.8.118",
+    "@hyperframes/shader-transitions": "0.8.118"
   },
   "devDependencies": {
     "@tailwindcss/vite": "^4.3.3",
@@ -81,7 +81,7 @@
     "vite": "^6.4.2",
     "vitest": "^4.1.11",
     "zustand": "^5.0.0",
-    "@hyperframes/producer": "0.8.117"
+    "@hyperframes/producer": "0.8.118"
   },
   "peerDependencies": {
     "react": "19",

package/src/components/StudioRightPanels.tsx

@@ -170,12 +170,9 @@ export const StudioRightPanels = memo(function StudioRightPanels({
   );
   const handleHideAllSelected = useCallback(() => {
     // Audio has no visual to hide, and `data-hidden` on an audio element is what
-    // MUTES it — preview silences it and the render drops it from the mix. The
-    // timeline withholds the eye on an audio track for that reason
-    // (`visible={!isAudioTrack}`), and the single-selection panel gates the same
-    // write on `audioSelection`; this multi-selection path was the way back to
-    // it. Checked here as well as in the panel because the button is not the
-    // only caller.
+    // mutes it — preview silences it and the render drops it from the mix; the
+    // timeline offers that write as a mute. Checked here as well as in the panel
+    // because the button is not the only caller.
     if (!canHideSelections(domEditGroupSelections)) {
       showToast("Audio can't be hidden — use the group's own controls", "info");
       return;

package/src/components/TimelineToolbar.test.tsx

@@ -422,3 +422,17 @@ describe("TimelineToolbar Linked Selection", () => {
     act(() => useLinkedClipPreferences.getState().setSyncIndicatorsVisible(true));
   });
 });
+
+describe("TimelineToolbar — host right actions", () => {
+  it("draws the host's controls immediately before the thumbnails toggle", () => {
+    const { host, root } = renderToolbar(undefined, {
+      rightActions: <button type="button">Script</button>,
+    });
+    const buttons = [...host.querySelectorAll("button")];
+    const script = buttons.findIndex((b) => b.textContent === "Script");
+    const thumbs = buttons.findIndex((b) => b.getAttribute("aria-label")?.includes("thumbnails"));
+    expect(script).toBeGreaterThan(-1);
+    expect(thumbs).toBe(script + 1);
+    act(() => root.unmount());
+  });
+});

package/src/components/TimelineToolbar.tsx

@@ -1,4 +1,4 @@
-import { memo, useEffect, useRef } from "react";
+import { memo, useEffect, useRef, type ReactNode } from "react";
 import {
   ArrowsOutLineHorizontal,
   Image,
@@ -50,6 +50,7 @@ export interface TimelineToolbarProps {
   showAddBeat?: boolean;
   /** Hides Add keyframe and auto-record, and turns off auto-record and the K shortcut with them. */
   showKeyframes?: boolean;
+  rightActions?: ReactNode;
 }
 
 interface KeyframeToggleState {
@@ -149,6 +150,7 @@ export const TimelineToolbar = memo(function TimelineToolbar({
   showSelectAroundPlayhead = true,
   showAddBeat = true,
   showKeyframes = true,
+  rightActions,
 }: TimelineToolbarProps) {
   const timelineSnapEnabled = usePlayerStore((s) => s.timelineSnapEnabled);
   const setTimelineSnapEnabled = usePlayerStore((s) => s.setTimelineSnapEnabled);
@@ -460,6 +462,7 @@ export const TimelineToolbar = memo(function TimelineToolbar({
           })()}
         </div>
         <div className="flex items-center gap-0.5">
+          {rightActions}
           <Tooltip
             label={
               thumbnailsVisible

package/src/components/editor/PropertyPanel.test.tsx

@@ -4,6 +4,7 @@ import React, { act } from "react";
 import { createRoot } from "react-dom/client";
 import { afterEach, describe, expect, it, vi } from "vitest";
 import type { PropertyPanelProps } from "./propertyPanelHelpers";
+import type { TimelineEditCallbacks } from "../../player/components/timelineCallbacks";
 
 (globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
 
@@ -235,7 +236,13 @@ async function renderPanel(
   flatEnabled: boolean,
   elementOverride: NonNullable<PropertyPanelProps["element"]> = baseElement(),
   propsOverride: Partial<PropertyPanelProps> = {},
-  currentTime?: number,
+  options: {
+    currentTime?: number;
+    selectedElementId?: string;
+    timelineEdit?: TimelineEditCallbacks;
+    refreshSelection?: (selection: unknown) => void;
+    selectionRef?: { current: unknown };
+  } = {},
 ) {
   vi.resetModules();
   vi.doMock("./manualEditingAvailability", async () => {
@@ -244,32 +251,57 @@ async function renderPanel(
     );
     return { ...actual, STUDIO_FLAT_INSPECTOR_ENABLED: flatEnabled };
   });
-  // Seed the playhead on the SAME store instance PropertyPanel.tsx will read via
-  // usePlayerStore (module-fresh since the resetModules() above) — must happen
-  // before PropertyPanel is imported/rendered so its initial render sees it.
-  if (currentTime !== undefined) {
-    const { usePlayerStore } = await import("../../player/store/playerStore");
-    usePlayerStore.getState().setCurrentTime(currentTime);
+  vi.doMock("../../contexts/DomEditContext", async () => {
+    const actual = await vi.importActual<typeof import("../../contexts/DomEditContext")>(
+      "../../contexts/DomEditContext",
+    );
+    const { refreshSelection: refresh, selectionRef } = options;
+    return refresh && selectionRef
+      ? {
+          ...actual,
+          useDomEditActionsContextOptional: () => ({
+            refreshDomEditSelectionFromPreview: refresh,
+            domEditSelectionRef: selectionRef,
+          }),
+        }
+      : actual;
+  });
+  // Seed the playhead and selection on the same store instance PropertyPanel.tsx
+  // reads (module-fresh after the resetModules() above), before it is imported so
+  // its first render sees them.
+  const { usePlayerStore } = await import("../../player/store/playerStore");
+  if (options.currentTime !== undefined) {
+    usePlayerStore.getState().setCurrentTime(options.currentTime);
   }
+  if (options.selectedElementId)
+    usePlayerStore.setState({ selectedElementId: options.selectedElementId });
   const { PropertyPanel } = await import("./PropertyPanel");
+  const { TimelineEditProvider } = await import("../../contexts/TimelineEditContext");
   const host = document.createElement("div");
   document.body.append(host);
   const root = createRoot(host);
-  // Only the props the render path touches are supplied; the rest are unused at
-  // mount (handlers fire on interaction), so cast a minimal object to the full
-  // props shape rather than stubbing all ~15 required fields.
-  const props = {
-    element: elementOverride,
-    assets: [],
-    onSetStyle: vi.fn(),
-    onSetText: vi.fn(),
-    onSetAttributeLive: vi.fn(),
-    ...propsOverride,
-  } as unknown as PropertyPanelProps;
-  act(() => {
-    root.render(<PropertyPanel {...props} />);
-  });
-  return { host, root };
+  const render = (element: NonNullable<PropertyPanelProps["element"]>) => {
+    // Only the props the render path touches are supplied; the rest are unused at
+    // mount (handlers fire on interaction), so cast a minimal object to the full
+    // props shape rather than stubbing all ~15 required fields.
+    const props = {
+      element,
+      assets: [],
+      onSetStyle: vi.fn(),
+      onSetText: vi.fn(),
+      onSetAttributeLive: vi.fn(),
+      ...propsOverride,
+    } as unknown as PropertyPanelProps;
+    act(() => {
+      root.render(
+        <TimelineEditProvider value={options.timelineEdit ?? {}}>
+          <PropertyPanel {...props} />
+        </TimelineEditProvider>,
+      );
+    });
+  };
+  render(elementOverride);
+  return { host, root, render };
 }
 
 // renderPanel resetModules()+dynamic-imports PropertyPanel (needed for a fresh
@@ -561,7 +593,7 @@ describe("PropertyPanel — flat Layout/Motion timing agreement (whole-plan cohe
         true,
         inferredMotionElement(),
         { gsapAnimations: [INFERRED_TIMING_ANIMATION], onSeekToTime },
-        2,
+        { currentTime: 2 },
       );
       openFlatGroup(host, "Layout");
       const layoutGroup = host.querySelector('[data-flat-group-open="true"]');
@@ -606,7 +638,7 @@ describe("PropertyPanel — flat Layout currentPct basis (currentPct follow-up f
         true,
         inferredMotionElement(),
         { gsapAnimations: [INFERRED_TIMING_ANIMATION] },
-        3.5,
+        { currentTime: 3.5 },
       );
       openFlatGroup(host, "Layout");
       const layoutGroup = host.querySelector('[data-flat-group-open="true"]');
@@ -643,7 +675,7 @@ describe("PropertyPanel — flat Layout currentPct basis (currentPct follow-up f
         true,
         inferredMotionElement(),
         { gsapAnimations: [INFERRED_TIMING_ANIMATION], onSeekToTime },
-        3.5,
+        { currentTime: 3.5 },
       );
       openFlatGroup(host, "Layout");
       const layoutGroup = host.querySelector('[data-flat-group-open="true"]');
@@ -1038,6 +1070,98 @@ describe("PropertyPanel — Motion is for things that move", () => {
     RENDER_TIMEOUT_MS,
   );
 
+  it(
+    "offers a mute on an audible audio clip and toggles it through the timeline",
+    async () => {
+      const onToggleElementHidden = vi.fn();
+      const { host, root } = await renderPanel(
+        true,
+        audioClipElement(),
+        { onToggleElementHidden },
+        { selectedElementId: "vo-1" },
+      );
+      act(() => host.querySelector<HTMLElement>('button[aria-label="Mute element"]')!.click());
+      expect(onToggleElementHidden).toHaveBeenCalledWith("vo-1", true);
+      act(() => root.unmount());
+    },
+    RENDER_TIMEOUT_MS,
+  );
+
+  // A bus has no timeline row, so the panel is its only mute; it must go both ways.
+  it(
+    "mutes, unmutes and mutes an audio group from the panel header",
+    async () => {
+      const bus = (hidden: boolean) => {
+        const element = audioBusElement();
+        return {
+          ...element,
+          dataAttributes: { ...element.dataAttributes, ...(hidden ? { hidden: "" } : {}) },
+        };
+      };
+      let hidden = true;
+      const onSetAudioGroupAttributeQuiet = vi.fn(
+        async (_id: string, _attr: string, value: string | null, _label: string) => {
+          hidden = value !== null;
+        },
+      );
+      // The panel re-reads its selection after the write; nothing else re-renders it here.
+      const { host, root, render } = await renderPanel(
+        true,
+        bus(true),
+        {},
+        {
+          timelineEdit: { onSetAudioGroupAttributeQuiet },
+          selectionRef: { current: bus(true) },
+          refreshSelection: () => render(bus(hidden)),
+        },
+      );
+      const press = async (label: string) => {
+        const button = host.querySelector<HTMLElement>(`button[aria-label="${label}"]`);
+        if (!button) throw new Error(`Expected a "${label}" button`);
+        await act(async () => button.click());
+      };
+      await press("Unmute element");
+      await press("Mute element");
+      await press("Unmute element");
+      expect(onSetAudioGroupAttributeQuiet.mock.calls).toEqual([
+        ["voiceover", "data-hidden", null, "Unmute element"],
+        ["voiceover", "data-hidden", "", "Mute element"],
+        ["voiceover", "data-hidden", null, "Unmute element"],
+      ]);
+      act(() => root.unmount());
+    },
+    RENDER_TIMEOUT_MS,
+  );
+
+  it(
+    "re-reads the current selection, not the muted bus, once the write lands",
+    async () => {
+      let land = () => {};
+      const onSetAudioGroupAttributeQuiet = vi.fn(
+        () => new Promise<void>((resolve) => (land = resolve)),
+      );
+      const selectionRef: { current: unknown } = { current: audioBusElement() };
+      const refreshSelection = vi.fn();
+      const { host, root } = await renderPanel(
+        true,
+        audioBusElement(),
+        {},
+        {
+          timelineEdit: { onSetAudioGroupAttributeQuiet },
+          selectionRef,
+          refreshSelection,
+        },
+      );
+      act(() => host.querySelector<HTMLElement>('button[aria-label="Mute element"]')!.click());
+      const next = audioClipElement();
+      selectionRef.current = next;
+      await act(async () => land());
+      expect(refreshSelection.mock.calls).toEqual([[next]]);
+      act(() => root.unmount());
+    },
+    RENDER_TIMEOUT_MS,
+  );
+
   it(
     "offers a bus neither — it has no clip range to edit",
     async () => {

package/src/components/editor/PropertyPanel.tsx

@@ -119,18 +119,7 @@ export const PropertyPanel = memo(function PropertyPanel(props: PropertyPanelPro
   const selectedElementId = usePlayerStore((s) => s.selectedElementId);
   const selectedElementHidden = isSelectedElementHidden(timelineElements, selectedElementId);
   const visibilityToggleLabel = selectedElementHidden ? "Show element" : "Hide element";
-  /**
-   * An audio element gets no hide control here.
-   *
-   * On an audio track "hidden" and "muted" are not similar operations, they are
-   * the SAME operation with two names (groups doc §2.1) — which is why the
-   * timeline's eye became the mute rather than growing a sibling. A second copy
-   * in the panel, still called "Hide element", is precisely the thing that step
-   * removed: "Two controls that silence a track, sitting next to each other,
-   * differing only in a distinction the author cannot see." An
-   * `<hf-audio-group>` has no visual to hide at all, and its mute lives on its
-   * own row.
-   */
+  // Audio gets no visibility toggle in this classic panel; the timeline and the flat panel offer it as a mute.
   const audioSelection = isAudioDomElement(element?.element);
   // Live during playback, the store's when paused — see the hook. Shared with the
   // audio FX panel, which follows the playhead for the same reason: a value the

package/src/components/editor/PropertyPanelEmptyState.test.tsx

@@ -96,9 +96,8 @@ describe("PropertyPanelEmptyState — flat multi-select", () => {
       />,
     );
     expect(host.querySelector('[data-flat-multiselect-group="true"]')).toBeNull();
-    // Hiding is visibility, and `data-hidden` on audio is what MUTES it — the
-    // timeline withholds the eye on an audio track for that reason, and this
-    // panel was the way back to the same write.
+    // Hiding is visibility, and `data-hidden` on audio is what mutes it; the
+    // timeline owns that write as a mute.
     expect(host.querySelector('[data-flat-multiselect-hide-all="true"]')).toBeNull();
     // The list still names what is selected; only the actions go.
     expect(host.textContent).toContain("2 elements selected");

package/src/components/editor/PropertyPanelEmptyState.tsx

@@ -133,11 +133,9 @@ function FlatMultiSelectState({
           an empty frame. Grouping is the LAYOUT grouper — a positioned wrapper
           around a bounding box, and an <audio> clip has none (grouping two
           produced a 0x0 div with inline left/top on elements that are never
-          laid out). Hiding is visibility, which for audio doubles as mute; the
-          timeline already withholds the eye on an audio track
-          (`visible={!isAudioTrack}`) and this panel was the way back to the
-          same write. Both handlers refuse it too — they own keyboard paths no
-          hidden button can gate. */}
+          laid out). Hiding is visibility, which for audio is mute, and the
+          timeline owns that as a mute control. Both handlers refuse it too —
+          they own keyboard paths no hidden button can gate. */}
       {!hasAudio && (
         <div className="flex gap-2">
           <button

package/src/components/editor/PropertyPanelFlat.tsx

@@ -9,6 +9,7 @@ import { useLinkedSpeedCommit, withLinkedPlaybackRate } from "./linkedSpeedEdits
 import { formatPxMetricValue } from "./propertyPanelHelpers";
 import { audioFxSummary } from "./audioFxSummary";
 import { resolveAudioGroups } from "@hyperframes/core/audio-groups";
+import { usePanelHiddenToggle } from "./usePanelHiddenToggle";
 import { PropertyPanelFlatHeader } from "./PropertyPanelFlatHeader";
 import { PropertyPanelFlatFooter } from "./PropertyPanelFlatFooter";
 import { closedGroupHeader, isSelectionHidden } from "./propertyPanelFlatClosedGroup";
@@ -206,6 +207,12 @@ export function PropertyPanelFlat({
    * selected the clip and then appeared to do nothing.
    */
   const hiddenNow = isSelectionHidden(selectedElementHidden, element);
+  const toggleHidden = usePanelHiddenToggle({
+    element,
+    hidden: hiddenNow,
+    selectedElementId,
+    onToggleElementHidden,
+  });
 
   const reveal = useAudioFxRevealSection({
     elementId: element?.id,
@@ -531,28 +538,8 @@ export function PropertyPanelFlat({
             meta={`${sourceLabel} · ${element.tagName}`}
             elementKind={elementKind}
             hidden={hiddenNow}
-            // Audio gets no hide control here. On an audio track "hidden" and
-            // "muted" are not similar operations, they are the SAME operation
-            // with two names (groups doc §2.1) — which is why the timeline's eye
-            // BECAME the mute rather than growing a sibling. A second copy in
-            // the panel, still called "Hide element", is exactly what that step
-            // set out to remove: "Two controls that silence a track, sitting
-            // next to each other, differing only in a distinction the author
-            // cannot see." An `<hf-audio-group>` has no visual to hide at all.
-            //
-            // EXCEPT while it is already hidden — the same door-from-the-inside
-            // the timeline's eye keeps for an audio track
-            // (`TimelineTrackPlainHeader`). Withholding it unconditionally
-            // withheld the only way back: a `data-hidden` group is silent in
-            // preview (the bus's mute gain) and absent from the render (every
-            // member dropped), and the group header carries no visibility
-            // control of its own now that mute and solo are gone. Only
-            // hand-editing the HTML brought the audio back.
-            onToggleHidden={
-              selectedElementId && onToggleElementHidden && (!audioSelection || hiddenNow)
-                ? () => void onToggleElementHidden(selectedElementId, !hiddenNow)
-                : undefined
-            }
+            asMute={audioSelection}
+            onToggleHidden={toggleHidden}
             copied={clipboardCopied}
             onCopy={onCopyElementInfo}
             onClear={onClearSelection}

package/src/components/editor/PropertyPanelFlatHeader.test.tsx

@@ -77,10 +77,6 @@ describe("PropertyPanelFlatHeader", () => {
     expect(withUngroup.querySelector('[aria-label="Ungroup"]')).not.toBeNull();
   });
 
-  // The panel's hide control is withheld for audio by its caller — on an audio
-  // track "hidden" and "muted" are the same operation with two names (groups
-  // doc §2.1), and the timeline already carries it, correctly labelled. This
-  // pins the header's half of that contract: no handler, no button.
   it("renders no visibility control when its caller withholds the handler", () => {
     const { host } = renderHeader({ onToggleHidden: undefined });
     const labels = Array.from(host.querySelectorAll("button")).map((b) =>
@@ -90,6 +86,13 @@ describe("PropertyPanelFlatHeader", () => {
     expect(labels).not.toContain("Show element");
   });
 
+  it("names a mute on an audio selection", () => {
+    const { host } = renderHeader({ onToggleHidden: vi.fn(), asMute: true });
+    expect(host.querySelector('button[aria-label="Mute element"]')).not.toBeNull();
+    const { host: muted } = renderHeader({ onToggleHidden: vi.fn(), asMute: true, hidden: true });
+    expect(muted.querySelector('button[aria-label="Unmute element"]')).not.toBeNull();
+  });
+
   it("renders it when the handler is supplied", () => {
     const { host } = renderHeader({ onToggleHidden: vi.fn() });
     const labels = Array.from(host.querySelectorAll("button")).map((b) =>

package/src/components/editor/PropertyPanelFlatHeader.tsx

@@ -1,4 +1,4 @@
-import { Eye, EyeSlash } from "@phosphor-icons/react";
+import { HiddenToggleIcon, hiddenToggleVerb } from "../../player/components/hiddenToggle";
 import { useTrackDesignInput } from "../../contexts/DesignPanelInputContext";
 import { ClipboardList, Film, Square, Type, X } from "../../icons/SystemIcons";
 
@@ -14,6 +14,7 @@ export function PropertyPanelFlatHeader({
   meta,
   elementKind,
   hidden,
+  asMute = false,
   onToggleHidden,
   copied,
   onCopy,
@@ -25,6 +26,7 @@ export function PropertyPanelFlatHeader({
   meta: string;
   elementKind: "text" | "media" | "other";
   hidden: boolean;
+  asMute?: boolean;
   onToggleHidden?: () => void;
   copied: boolean;
   onCopy: () => void;
@@ -34,7 +36,7 @@ export function PropertyPanelFlatHeader({
 }) {
   const track = useTrackDesignInput();
   const Icon = ICON_BY_KIND[elementKind];
-  const visibilityLabel = hidden ? "Show element" : "Hide element";
+  const visibilityLabel = `${hiddenToggleVerb(asMute, hidden)} element`;
 
   return (
     <div className="flex items-center gap-2.5 border-b border-panel-hairline px-4 py-3">
@@ -81,7 +83,7 @@ export function PropertyPanelFlatHeader({
               onToggleHidden();
             }}
           >
-            {hidden ? <EyeSlash size={13} weight="bold" /> : <Eye size={13} weight="bold" />}
+            <HiddenToggleIcon asMute={asMute} hidden={hidden} size={13} />
           </button>
         )}
         <button

package/src/components/editor/usePanelHiddenToggle.ts

@@ -0,0 +1,44 @@
+import { HF_AUDIO_GROUP_TAG } from "@hyperframes/core/audio-groups";
+import { useDomEditActionsContextOptional } from "../../contexts/DomEditContext";
+import { useTimelineEditContextOptional } from "../../contexts/TimelineEditContext";
+import { hiddenToggleVerb } from "../../player/components/hiddenToggle";
+import type { DomEditSelection } from "./domEditingTypes";
+
+/** The panel header's hide toggle, or undefined when this selection has no writer for it. */
+export function usePanelHiddenToggle({
+  element,
+  hidden,
+  selectedElementId,
+  onToggleElementHidden,
+}: {
+  element: Pick<DomEditSelection, "id" | "tagName">;
+  hidden: boolean;
+  selectedElementId: string | null | undefined;
+  onToggleElementHidden?: (elementKey: string, hidden: boolean) => void | Promise<void>;
+}): (() => void) | undefined {
+  const { onSetAudioGroupAttributeQuiet } = useTimelineEditContextOptional();
+  const domEditActions = useDomEditActionsContextOptional();
+  // A bus has no timeline row, so it mutes through the group's own writer.
+  const audioGroupId = element.tagName.toLowerCase() === HF_AUDIO_GROUP_TAG ? element.id : null;
+  const write = audioGroupId
+    ? onSetAudioGroupAttributeQuiet &&
+      (() =>
+        onSetAudioGroupAttributeQuiet(
+          audioGroupId,
+          "data-hidden",
+          hidden ? null : "",
+          `${hiddenToggleVerb(true, hidden)} element`,
+        ))
+    : selectedElementId && onToggleElementHidden
+      ? () => onToggleElementHidden(selectedElementId, !hidden)
+      : undefined;
+  // The label reads the selection snapshot, so re-read whatever is selected once the write lands.
+  return (
+    write &&
+    (() =>
+      void Promise.resolve(write()).then(() => {
+        const selection = domEditActions?.domEditSelectionRef.current;
+        if (selection) void domEditActions?.refreshDomEditSelectionFromPreview(selection);
+      }))
+  );
+}

package/src/contexts/DomEditContext.tsx

@@ -77,6 +77,7 @@ const SAVES_AN_EDIT = {
   handleUnroll: true,
   invalidateGsapCache: false,
   previewIframeRef: false,
+  domEditSelectionRef: false,
   commitMutation: true,
   applyMarqueeSelection: false,
   handleUpdateKeyframeEase: true,
@@ -329,6 +330,7 @@ export function DomEditProvider({
       handleUnroll,
       invalidateGsapCache,
       previewIframeRef,
+      domEditSelectionRef,
       commitMutation: stableCommitMutation,
       applyMarqueeSelection,
       handleUpdateKeyframeEase,
@@ -406,6 +408,7 @@ export function DomEditProvider({
       handleUnroll,
       invalidateGsapCache,
       previewIframeRef,
+      domEditSelectionRef,
       stableCommitMutation,
       applyMarqueeSelection,
       handleUpdateKeyframeEase,

package/src/hooks/timelineTrackVisibility.ts

@@ -8,7 +8,8 @@ import {
   trackDisplaySuffix,
 } from "../player/components/timelineTrackDisplay";
 import { saveProjectFilesWithHistory } from "../utils/studioFileHistory";
-import { isAudioTimelineElement } from "../utils/timelineInspector";
+import { isAudioOnlyTrack } from "../utils/timelineInspector";
+import { hiddenToggleVerb } from "../player/components/hiddenToggle";
 import type { PatchOperation } from "../utils/sourcePatcher";
 import {
   findTimelineElementInIframe,
@@ -206,14 +207,8 @@ export async function toggleTimelineTrackHidden({
     displayNumber ?? trackDisplayNumber(timelineTrackOrder(timelineElements), track),
   );
   const trackElements = timelineElements.filter((element) => element.track === track);
-  const isAudioOnlyTrack = trackElements.length > 0 && trackElements.every(isAudioTimelineElement);
-  const label = isAudioOnlyTrack
-    ? hidden
-      ? `Mute track${suffix}`
-      : `Unmute track${suffix}`
-    : hidden
-      ? `Hide track${suffix}`
-      : `Show track${suffix}`;
+  const hiddenBefore = !hidden;
+  const label = `${hiddenToggleVerb(isAudioOnlyTrack(trackElements), hiddenBefore)} track${suffix}`;
   return setElementsHidden({
     projectId,
     activeCompPath,
@@ -240,19 +235,14 @@ export async function toggleTimelineElementHidden({
 }: ToggleTimelineElementHiddenInput): Promise<string[]> {
   const keys = new Set(typeof elementKey === "string" ? [elementKey] : elementKey);
   const elements = timelineElements.filter((item) => keys.has(item.key ?? item.id));
+  const hiddenBefore = !hidden;
+  const verb = hiddenToggleVerb(isAudioOnlyTrack(elements), hiddenBefore);
   return setElementsHidden({
     projectId,
     activeCompPath,
     elements,
     hidden,
-    label:
-      elements.length > 1
-        ? hidden
-          ? `Hide ${elements.length} elements`
-          : `Show ${elements.length} elements`
-        : hidden
-          ? "Hide element"
-          : "Show element",
+    label: elements.length > 1 ? `${verb} ${elements.length} elements` : `${verb} element`,
     previewIframe,
     writeProjectFile,
     recordEdit,