@hyperframes/studio 0.8.108 → 0.8.109

package/src/hooks/useTimelineEditing.ts

@@ -27,6 +27,12 @@ import type { PersistTimelineEditInput } from "./timelineEditingHelpers";
 import { useSetAudioGroupAttribute } from "./timelineAudioGroupVolume";
 import { useSetElementAttribute } from "./timelineElementFxAttribute";
 import { useTimelineDeleteOps } from "./useTimelineDeleteOps";
+import { useTimelineEditGuard } from "./useTimelineEditGuard";
+import {
+  linkEditTargets,
+  useTimelineLinkEditing,
+  withLinkPartners,
+} from "./useTimelineLinkEditing";
 import { useTrackPendingTimelineEdit } from "./useTrackPendingTimelineEdit";
 import { useAudioGroupCarveAssignment } from "./timelineAudioGroupCreate";
 import {
@@ -35,26 +41,12 @@ import {
 } from "./timelineTrackVisibility";
 import { useTimelineGroupEditing } from "./useTimelineGroupEditing";
 import { useBlockedTimelineEditToast } from "./useBlockedTimelineEditToast";
-import {
-  useTimelineEditGate,
-  useTimelineEditRefusal,
-  type TimelineEditOutcome,
-} from "./timelineEditPermission";
+import { useTimelineEditGate, type TimelineEditOutcome } from "./timelineEditPermission";
 import { serializeZLaneGesture } from "../components/nle/zLaneGesture";
 import { cutoverCommittedOrThrow, sdkTimingPersist } from "../utils/sdkCutover";
 import type { TimelineMoveUpdates, UseTimelineEditingOptions } from "./useTimelineEditingTypes";
 import { getStudioSaveErrorMessage } from "../utils/studioSaveDiagnostics";
 
-type GuardedTimelineHandler = (...args: never[]) => Promise<unknown>;
-type GuardedTimelineResolver = (...args: never[]) => readonly TimelineElement[];
-type GuardedTimelineRefusal = (reason: string, ...args: never[]) => unknown;
-
-interface GuardedTimelineEntry {
-  resolveTargets: GuardedTimelineResolver;
-  onRefused?: GuardedTimelineRefusal;
-  wrapped: GuardedTimelineHandler;
-}
-
 export function useTimelineEditing({
   projectId,
   activeCompPath,
@@ -80,40 +72,7 @@ export function useTimelineEditing({
   const editQueueRef = useRef(Promise.resolve());
   const track = useTrackPendingTimelineEdit();
   const checkEditable = useTimelineEditGate(canEdit, showToast);
-  const refuseEdit = useTimelineEditRefusal(canEdit, showToast);
-  const refuseEditRef = useRef(refuseEdit);
-  refuseEditRef.current = refuseEdit;
-  const guardedRef = useRef(new WeakMap<GuardedTimelineHandler, GuardedTimelineEntry>());
-  // Refuses (no call, no write, no history entry) when any target is
-  // blocked; otherwise runs fn as before. Cached by fn identity — like
-  // track() — so a fresh closure here doesn't defeat track's own cache.
-  const guard = useCallback(
-    <H extends (...args: never[]) => Promise<unknown>>(
-      resolveTargets: (...args: Parameters<H>) => readonly TimelineElement[],
-      fn: H,
-      onRefused?: (reason: string, ...args: Parameters<H>) => Awaited<ReturnType<H>>,
-    ): H => {
-      const key = fn as unknown as GuardedTimelineHandler;
-      const cached = guardedRef.current.get(key);
-      if (cached) {
-        cached.resolveTargets = resolveTargets as unknown as GuardedTimelineResolver;
-        cached.onRefused = onRefused as unknown as GuardedTimelineRefusal | undefined;
-        return cached.wrapped as H;
-      }
-      const entry = {} as GuardedTimelineEntry;
-      entry.resolveTargets = resolveTargets as unknown as GuardedTimelineResolver;
-      entry.onRefused = onRefused as unknown as GuardedTimelineRefusal | undefined;
-      entry.wrapped = ((...args: Parameters<H>) => {
-        const reason = refuseEditRef.current(entry.resolveTargets(...(args as never[])));
-        if (reason !== null)
-          return Promise.resolve(entry.onRefused?.(reason, ...(args as never[])));
-        return fn(...args);
-      }) as H as unknown as GuardedTimelineHandler;
-      guardedRef.current.set(key, entry);
-      return entry.wrapped as H;
-    },
-    [],
-  );
+  const guard = useTimelineEditGuard(canEdit, showToast);
 
   const enqueueEdit = useCallback(
     (
@@ -252,7 +211,7 @@ export function useTimelineEditing({
         return reorderDone
           .then(() => {
             // SDK setTiming writes start only; a lane change needs the fallback's track patch.
-            if (sdkSession && element.hfId && !needsExtension && !trackChanged) {
+            if (sdkSession && element.hfId && !element.link && !needsExtension && !trackChanged) {
               return sdkTimingPersist(
                 element.hfId,
                 targetPath,
@@ -359,7 +318,7 @@ export function useTimelineEditing({
           finishResizeGsapSync(),
         );
       const persistDone =
-        sdkSession && element.hfId && !hasPbsAdjustment && !needsExtension
+        sdkSession && element.hfId && !element.link && !hasPbsAdjustment && !needsExtension
           ? sdkTimingPersist(
               element.hfId,
               targetPath,
@@ -461,7 +420,7 @@ export function useTimelineEditing({
     isRecordingRef,
   });
 
-  const { handleTimelineElementsDelete, handleTimelineElementDelete } = useTimelineDeleteOps({
+  const { handleTimelineElementsDelete } = useTimelineDeleteOps({
     projectIdRef,
     activeCompPath,
     timelineElements,
@@ -491,6 +450,20 @@ export function useTimelineEditing({
       checkEditable,
     });
 
+  const linkEditing = useTimelineLinkEditing({
+    projectIdRef,
+    activeCompPath,
+    editQueueRef,
+    pendingTimelineEditPathRef,
+    isRecordingRef,
+    showToast,
+    writeProjectFile,
+    recordEdit,
+    reloadPreview,
+    forceReloadSdkSession,
+    handleTimelineElementsDelete,
+  });
+
   const handleBlockedTimelineEdit = useBlockedTimelineEditToast(showToast);
   const { handleRazorSplit, handleRazorSplitAll, handleFreezeFrame } = useRazorSplit({
     projectId,
@@ -526,7 +499,9 @@ export function useTimelineEditing({
   // Every write-handler is tracked here, the one place all hand edits
   // converge, so undo never races a write; canEdit gates the same point.
   // Coverage boundary: see the PR body, not every kind resolves an element.
-  const trackedRazorSplit = track(guard((element) => [element], handleRazorSplit));
+  const trackedRazorSplit = track(
+    guard((element) => withLinkPartners([element]), handleRazorSplit),
+  );
   return {
     handleTimelineElementMove: track(guard((element) => [element], handleTimelineElementMove)),
     handleTimelineElementResize: track(guard((element) => [element], handleTimelineElementResize)),
@@ -568,10 +543,16 @@ export function useTimelineEditing({
         ),
       ),
     },
-    handleTimelineElementDelete: track(guard((element) => [element], handleTimelineElementDelete)),
+    handleTimelineElementDelete: track(
+      guard((element) => withLinkPartners([element]), linkEditing.handleLinkedElementDelete),
+    ),
     handleTimelineElementsDelete: track(
-      guard((elements) => elements, handleTimelineElementsDelete),
+      guard(withLinkPartners, linkEditing.handleLinkedElementsDelete),
+    ),
+    handleTimelineElementDeleteOnly: track(
+      guard((element) => [element], linkEditing.handleDeleteElementOnly),
     ),
+    handleLinkEdit: track(guard(linkEditTargets, linkEditing.handleLinkEdit)),
     handleTimelineElementSplit: trackedRazorSplit,
     handleRazorSplit: trackedRazorSplit,
     handleFreezeFrame: track(guard((element) => [element], handleFreezeFrame)),

package/src/hooks/useTimelineLinkEditing.test.tsx

@@ -0,0 +1,112 @@
+// @vitest-environment happy-dom
+import React, { act } from "react";
+import { createRoot } from "react-dom/client";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { usePlayerStore, type TimelineElement } from "../player";
+import { useTimelineLinkEditing, withLinkPartners } from "./useTimelineLinkEditing";
+import { useLinkedClipPreferences } from "../utils/linkedClipPreferences";
+
+(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+const clip = (id: string, tag: string, link?: string): TimelineElement => ({
+  id,
+  domId: id,
+  tag,
+  start: 0,
+  duration: 4,
+  track: 0,
+  ...(link ? { link } : {}),
+});
+const video = clip("talk", "video", "lk-1");
+const audio = clip("talk-audio", "audio", "lk-1");
+const title = clip("title", "div");
+
+const SOURCE =
+  '<div><video id="talk" muted data-link="lk-1"></video><audio id="talk-audio" data-link="lk-1"></audio></div>';
+
+async function renderLinkEditing(handleTimelineElementsDelete = vi.fn()) {
+  usePlayerStore.getState().setElements([video, audio, title]);
+  const writeProjectFile = vi.fn().mockResolvedValue(undefined);
+  const recordEdit = vi.fn().mockResolvedValue(undefined);
+  let api: ReturnType<typeof useTimelineLinkEditing> | undefined;
+  function Harness() {
+    api = useTimelineLinkEditing({
+      projectIdRef: { current: "p1" },
+      activeCompPath: "index.html",
+      editQueueRef: { current: Promise.resolve() },
+      pendingTimelineEditPathRef: { current: new Set() },
+      showToast: vi.fn(),
+      writeProjectFile,
+      recordEdit,
+      reloadPreview: vi.fn(),
+      handleTimelineElementsDelete,
+    });
+    return null;
+  }
+  const root = createRoot(document.body.appendChild(document.createElement("div")));
+  await act(async () => root.render(React.createElement(Harness)));
+  if (!api) throw new Error("hook did not render");
+  return { api, writeProjectFile, recordEdit, unmount: () => act(() => root.unmount()) };
+}
+
+describe("withLinkPartners", () => {
+  it("adds partners after the selection, once", () => {
+    usePlayerStore.getState().setElements([video, audio, title]);
+    expect(withLinkPartners([video, title]).map((el) => el.id)).toEqual([
+      "talk",
+      "title",
+      "talk-audio",
+    ]);
+    expect(withLinkPartners([video, audio])).toHaveLength(2);
+  });
+});
+
+describe("useTimelineLinkEditing", () => {
+  afterEach(() => vi.restoreAllMocks());
+
+  it("deletes a linked clip with its partner", async () => {
+    const del = vi.fn().mockResolvedValue(undefined);
+    const { api, unmount } = await renderLinkEditing(del);
+    await act(async () => api.handleLinkedElementDelete(video));
+    expect(del.mock.calls[0]?.[0].map((el: TimelineElement) => el.id)).toEqual([
+      "talk",
+      "talk-audio",
+    ]);
+    unmount();
+  });
+
+  it("with Linked Selection off, delete removes the clip alone and unlinks the survivor", async () => {
+    const del = vi.fn().mockResolvedValue(undefined);
+    const { api, unmount } = await renderLinkEditing(del);
+    useLinkedClipPreferences.getState().setLinkedSelection(false);
+    try {
+      expect(withLinkPartners([video])).toEqual([video]);
+      await act(async () => api.handleLinkedElementDelete(video));
+      expect(del).toHaveBeenCalledWith([video], [audio]);
+    } finally {
+      useLinkedClipPreferences.getState().setLinkedSelection(true);
+    }
+    unmount();
+  });
+
+  it("delete-only removes one member and unlinks the survivor", async () => {
+    const del = vi.fn().mockResolvedValue(undefined);
+    const { api, unmount } = await renderLinkEditing(del);
+    await act(async () => api.handleDeleteElementOnly(video));
+    expect(del).toHaveBeenCalledWith([video], [audio]);
+    unmount();
+  });
+
+  it("unlink writes one undo step removing data-link from both", async () => {
+    vi.spyOn(globalThis, "fetch").mockResolvedValue(
+      new Response(JSON.stringify({ content: SOURCE }), { status: 200 }),
+    );
+    const { api, writeProjectFile, recordEdit, unmount } = await renderLinkEditing();
+    await act(async () => api.handleLinkEdit({ kind: "unlink", elements: [video, audio] }));
+    expect(writeProjectFile).toHaveBeenCalledTimes(1);
+    expect(writeProjectFile.mock.calls[0]?.[1]).not.toContain("data-link");
+    expect(recordEdit).toHaveBeenCalledTimes(1);
+    expect(recordEdit.mock.calls[0]?.[0].label).toBe("Unlink clips");
+    unmount();
+  });
+});

package/src/hooks/useTimelineLinkEditing.ts

@@ -0,0 +1,153 @@
+import { useCallback, type MutableRefObject } from "react";
+import { usePlayerStore, type TimelineElement } from "../player";
+import type { TimelineLinkEdit } from "../player/components/timelineCallbacks";
+import { expandToLinkedMembers } from "../player/components/audioClipLink";
+import { isLinkedSelectionOn } from "../utils/linkedClipPreferences";
+import { saveProjectFilesWithHistory, type RecordEditInput } from "../utils/studioFileHistory";
+import { getStudioSaveErrorMessage } from "../utils/studioSaveDiagnostics";
+import { readFileContent } from "./timelineEditingHelpers";
+import { clipsToUnlink, planLinkEdit } from "./timelineLinkEditPlan";
+
+interface UseTimelineLinkEditingOptions {
+  projectIdRef: MutableRefObject<string | null>;
+  activeCompPath: string | null;
+  editQueueRef: MutableRefObject<Promise<void>>;
+  pendingTimelineEditPathRef: MutableRefObject<Set<string>>;
+  isRecordingRef?: MutableRefObject<boolean>;
+  showToast: (message: string, tone?: "error" | "info") => void;
+  writeProjectFile: (path: string, content: string, expectedContent?: string) => Promise<void>;
+  recordEdit: (input: RecordEditInput) => Promise<void>;
+  reloadPreview: () => void;
+  forceReloadSdkSession?: () => void;
+  handleTimelineElementsDelete: (
+    selection: TimelineElement[],
+    alsoUnlink?: readonly TimelineElement[],
+  ) => Promise<void>;
+}
+
+const keyOf = (el: TimelineElement) => el.key ?? el.id;
+
+/** Every clip a link edit writes, for the edit-permission gate. */
+export function linkEditTargets(edit: TimelineLinkEdit): TimelineElement[] {
+  switch (edit.kind) {
+    case "unlink":
+    case "link":
+      return [...edit.elements];
+    case "detach":
+    case "move-into-sync":
+    case "slip-into-sync":
+      return [edit.element];
+    case "merge":
+      return [edit.video, edit.audio];
+  }
+}
+
+export function withLinkPartners(selection: readonly TimelineElement[]): TimelineElement[] {
+  const elements = usePlayerStore.getState().elements;
+  const keys = expandToLinkedMembers(selection.map(keyOf), elements, isLinkedSelectionOn());
+  const known = new Set(selection.map(keyOf));
+  return [...selection, ...elements.filter((el) => keys.has(keyOf(el)) && !known.has(keyOf(el)))];
+}
+
+export function useTimelineLinkEditing({
+  projectIdRef,
+  activeCompPath,
+  editQueueRef,
+  pendingTimelineEditPathRef,
+  isRecordingRef,
+  showToast,
+  writeProjectFile,
+  recordEdit,
+  reloadPreview,
+  forceReloadSdkSession,
+  handleTimelineElementsDelete,
+}: UseTimelineLinkEditingOptions) {
+  const handleLinkEdit = useCallback(
+    async (edit: TimelineLinkEdit) => {
+      if (isRecordingRef?.current) {
+        showToast("Cannot edit timeline while recording", "error");
+        return;
+      }
+      const pid = projectIdRef.current;
+      const plan = planLinkEdit(edit, usePlayerStore.getState().elements);
+      if (!pid || !plan) return;
+      const path = plan.anchor.sourceFile || activeCompPath || "index.html";
+      pendingTimelineEditPathRef.current.add(path);
+      const queued = editQueueRef.current.then(() =>
+        saveProjectFilesWithHistory({
+          projectId: pid,
+          label: plan.label,
+          files: {
+            [path]: (current) => {
+              const next = plan.transform(current);
+              if (next === null || next === current) {
+                throw new Error(`Couldn't ${plan.label.toLowerCase()}`);
+              }
+              return next;
+            },
+          },
+          readFile: (filePath) => readFileContent(pid, filePath),
+          writeFile: writeProjectFile,
+          recordEdit,
+        }),
+      );
+      editQueueRef.current = queued.then(
+        () => undefined,
+        () => undefined,
+      );
+      try {
+        await queued;
+        forceReloadSdkSession?.();
+        reloadPreview();
+      } catch (error) {
+        showToast(getStudioSaveErrorMessage(error), "error");
+      }
+    },
+    [
+      activeCompPath,
+      editQueueRef,
+      forceReloadSdkSession,
+      isRecordingRef,
+      pendingTimelineEditPathRef,
+      projectIdRef,
+      recordEdit,
+      reloadPreview,
+      showToast,
+      writeProjectFile,
+    ],
+  );
+
+  const handleLinkedElementsDelete = useCallback(
+    (selection: TimelineElement[]) => {
+      if (isLinkedSelectionOn()) return handleTimelineElementsDelete(withLinkPartners(selection));
+      const removed = new Set(selection.map(keyOf));
+      const orphans = clipsToUnlink(selection, usePlayerStore.getState().elements).filter(
+        (el) => !removed.has(keyOf(el)),
+      );
+      return handleTimelineElementsDelete(selection, orphans);
+    },
+    [handleTimelineElementsDelete],
+  );
+
+  const handleLinkedElementDelete = useCallback(
+    (element: TimelineElement) => handleLinkedElementsDelete([element]),
+    [handleLinkedElementsDelete],
+  );
+
+  const handleDeleteElementOnly = useCallback(
+    (element: TimelineElement) => {
+      const orphans = clipsToUnlink([element], usePlayerStore.getState().elements).filter(
+        (el) => keyOf(el) !== keyOf(element),
+      );
+      return handleTimelineElementsDelete([element], orphans);
+    },
+    [handleTimelineElementsDelete],
+  );
+
+  return {
+    handleLinkEdit,
+    handleLinkedElementsDelete,
+    handleLinkedElementDelete,
+    handleDeleteElementOnly,
+  };
+}

package/src/index.ts

@@ -31,6 +31,7 @@ export {
   liveTime,
   formatTime,
 } from "./player";
+export { usePreviewIframeStore } from "./player/store/previewIframeStore";
 export type {
   PlayerHandle,
   PlayerHandleElement,

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

@@ -96,7 +96,7 @@ describe("AudioWaveform", () => {
     act(() => root.unmount());
   });
 
-  it("greys the clip in place when muted and draws the parent tick when linked", () => {
+  it("greys the clip in place when muted", () => {
     const host = document.createElement("div");
     host.className = "timeline-clip is-audio";
     document.body.append(host);
@@ -112,15 +112,42 @@ describe("AudioWaveform", () => {
           sessionEpoch={1}
           priority="visible"
           muted
-          linked
         />,
       );
     });
 
     expect(host.getAttribute("data-audio-muted")).toBe("true");
-    expect(host.querySelector(".timeline-audio-link")).not.toBeNull();
 
     act(() => root.unmount());
     expect(host.hasAttribute("data-audio-muted")).toBe(false);
   });
+
+  it("fills a short sound strip when the label band is dropped", () => {
+    const heights = [16, 0].map((labelInset) => {
+      const host = document.createElement("div");
+      document.body.append(host);
+      const root = createRoot(host);
+      act(() => {
+        root.render(
+          <AudioWaveform
+            audioUrl="/media/talk.mp4"
+            label=""
+            labelColor="#fff"
+            projectId="project-a"
+            sessionEpoch={1}
+            priority="visible"
+            {...(labelInset === 16 ? {} : { labelInset })}
+          />,
+        );
+      });
+      const canvas = host.querySelector("canvas");
+      const box = { top: canvas?.style.top, height: canvas?.style.height };
+      act(() => root.unmount());
+      return box;
+    });
+    expect(heights).toEqual([
+      { top: "16px", height: "calc(100% - 16px)" },
+      { top: "0px", height: "calc(100% - 0px)" },
+    ]);
+  });
 });

package/src/player/components/AudioWaveform.tsx

@@ -18,8 +18,7 @@ export interface AudioWaveformProps {
   priority: ThumbnailPriority;
   /** `data-hidden` or a muted audio group. Greys the pill; the clip stays. */
   muted?: boolean;
-  /** Same media file as a video clip. Draws the 1px parent tick. */
-  linked?: boolean;
+  labelInset?: number;
 }
 
 const BAR_STEP = 3;
@@ -167,7 +166,7 @@ export const AudioWaveform = memo(function AudioWaveform({
   sessionEpoch,
   priority,
   muted = false,
-  linked = false,
+  labelInset = 16,
 }: AudioWaveformProps) {
   const rootRef = useRef<HTMLDivElement | null>(null);
   const canvasRef = useRef<HTMLCanvasElement | null>(null);
@@ -236,17 +235,17 @@ export const AudioWaveform = memo(function AudioWaveform({
 
   return (
     <div ref={rootRef} className="absolute inset-0">
-      {linked ? <span className="timeline-audio-link" aria-hidden="true" /> : null}
       <div className="absolute inset-0 overflow-hidden" style={{ zIndex: 10 }}>
         <canvas
           ref={setCanvasRef}
           className="absolute inset-x-0 bottom-0 w-full"
-          style={{ top: 16, height: "calc(100% - 16px)" }}
+          style={{ top: labelInset, height: `calc(100% - ${labelInset}px)` }}
         />
         {snapshot.status === "loading" && (
           <div
-            className="absolute inset-x-0 bottom-0 top-4 animate-pulse"
+            className="absolute inset-x-0 bottom-0 animate-pulse"
             style={{
+              top: labelInset,
               background: "var(--timeline-thumbnail-shimmer)",
             }}
           />
@@ -256,7 +255,7 @@ export const AudioWaveform = memo(function AudioWaveform({
         {snapshot.status === "error" && (
           <div
             className="absolute inset-x-0 flex items-center justify-center gap-1.5"
-            style={{ top: 16, bottom: 0 }}
+            style={{ top: labelInset, bottom: 0 }}
           >
             <div
               className="absolute inset-x-0"

package/src/player/components/ClipContextMenu.groups.test.tsx

@@ -0,0 +1,102 @@
+// @vitest-environment happy-dom
+import { act } from "react";
+import { describe, expect, it, vi } from "vitest";
+import { createHappyDomRootHarness } from "./testRootHarness";
+import { ClipContextMenu } from "./ClipContextMenu";
+import { usePlayerStore, type TimelineElement } from "../store/playerStore";
+import { TimelineEditProvider } from "../../contexts/TimelineEditContext";
+
+const iframe = document.createElement("iframe");
+vi.mock("../../contexts/StudioContext", () => ({
+  useStudioShellContextOptional: () => ({
+    projectId: "p1",
+    showToast: vi.fn(),
+    previewIframeRef: { current: iframe },
+  }),
+}));
+
+const harness = createHappyDomRootHarness();
+
+const talk: TimelineElement = {
+  id: "talk",
+  domId: "talk",
+  tag: "video",
+  src: "talk.mp4",
+  start: 0,
+  duration: 6,
+  track: 0,
+  hasAudio: true,
+  link: "lk-1",
+};
+const talkAudio: TimelineElement = {
+  ...talk,
+  id: "talk-a",
+  domId: "talk-a",
+  tag: "audio",
+  track: 1,
+};
+
+function renderMenu(element: TimelineElement) {
+  usePlayerStore.getState().setElements([talk, talkAudio]);
+  document.body.appendChild(iframe);
+  const node = iframe.contentDocument?.createElement("video");
+  if (node) {
+    node.id = "talk";
+    node.setAttribute("data-has-audio", "true");
+    iframe.contentDocument?.body.appendChild(node);
+  }
+  const host = document.createElement("div");
+  document.body.appendChild(host);
+  const noop = vi.fn();
+  act(() =>
+    harness.mount(host).render(
+      <TimelineEditProvider
+        value={{
+          onSetElementAttributeQuiet: vi.fn(async () => undefined),
+          onFreezeFrame: noop,
+          onLinkEdit: noop,
+          onDeleteElementOnly: noop,
+        }}
+      >
+        <ClipContextMenu
+          x={10}
+          y={10}
+          element={element}
+          currentTime={2}
+          onClose={noop}
+          onSplit={noop}
+          onDelete={noop}
+        />
+      </TimelineEditProvider>,
+    ),
+  );
+}
+
+function menuLabels(): string[] {
+  return Array.from(document.querySelectorAll('[role="menuitem"], [role="menuitemcheckbox"]')).map(
+    (item) => item.querySelector("span")?.textContent ?? "",
+  );
+}
+
+describe("ClipContextMenu order", () => {
+  it("groups time, sound, picture, then delete for a linked video with sound", () => {
+    renderMenu(talk);
+    const expected = [
+      "Split at 2.00s",
+      "Freeze frame",
+      "Normalize loudness",
+      "Voice",
+      "Detach audio",
+      "Unlink from audio",
+      "Look",
+      "Crop",
+      "Delete",
+      "Delete this clip only",
+    ];
+    expect(menuLabels().filter((label) => expected.includes(label))).toEqual(expected);
+    const groups = Array.from(document.querySelectorAll('[role="group"]')).map((group) =>
+      group.getAttribute("aria-label"),
+    );
+    expect(groups).toEqual(["Time", "Sound", "Picture", "Clipboard", "Delete"]);
+  });
+});

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

@@ -60,9 +60,14 @@ describe("ClipContextMenu host items", () => {
     unmount();
   });
 
-  it("counts host rows and their divider when keeping the menu inside the window", () => {
+  it("keeps the menu, host rows included, inside the window by its measured height", () => {
     const innerHeight = Object.getOwnPropertyDescriptor(window, "innerHeight");
     Object.defineProperty(window, "innerHeight", { configurable: true, value: 600 });
+    const offsetHeight = vi
+      .spyOn(HTMLElement.prototype, "offsetHeight", "get")
+      .mockImplementation(function (this: HTMLElement) {
+        return this.getAttribute("role") === "menu" ? 150 : 0;
+      });
     try {
       const host = document.createElement("div");
       document.body.appendChild(host);
@@ -86,10 +91,11 @@ describe("ClipContextMenu host items", () => {
           />,
         ),
       );
-      // Four 30 px rows, two 9 px dividers and 8 px of padding end 96 px below the window.
-      expect(document.body.querySelector<HTMLElement>("[role=menu]")!.style.top).toBe("446px");
+      // 150 px measured from y 550 ends 100 px below the window, kept 8 px off its edge.
+      expect(document.body.querySelector<HTMLElement>("[role=menu]")!.style.top).toBe("442px");
       act(() => root.unmount());
     } finally {
+      offsetHeight.mockRestore();
       if (innerHeight) Object.defineProperty(window, "innerHeight", innerHeight);
     }
   });
@@ -106,7 +112,7 @@ describe("ClipContextMenu host items", () => {
   it("shows only Studio's items when the host adds none", () => {
     const { items, unmount } = renderMenu([]);
     expect(items().map((item) => item.textContent)).toEqual(["Copy⌘C", "Delete⌫"]);
-    expect(document.body.querySelectorAll(".border-t")).toHaveLength(1);
+    expect(document.body.querySelector("[role=group][aria-label=Host]")).toBeNull();
     unmount();
   });
 });