@hyperframes/studio 0.8.113 → 0.8.115

package/src/hooks/useShellSlices.ts

@@ -0,0 +1,53 @@
+import { useMemo } from "react";
+import type { EnableKeyframesSession } from "./useEnableKeyframes";
+
+interface HistoryFlags {
+  canUndo: boolean;
+  canRedo: boolean;
+  undoLabel: string | undefined;
+  redoLabel: string | undefined;
+}
+
+/** The four history fields the shell context carries, as one object that changes only when they do. */
+export function useHistoryFlags({ canUndo, canRedo, undoLabel, redoLabel }: HistoryFlags) {
+  return useMemo(
+    () => ({ canUndo, canRedo, undoLabel, redoLabel }),
+    [canUndo, canRedo, undoLabel, redoLabel],
+  );
+}
+
+/** The session fields the timeline toolbar reads, so a hover or any other session change leaves it alone. */
+export function useToolbarSession(session: EnableKeyframesSession): EnableKeyframesSession {
+  const {
+    domEditSelection,
+    selectedGsapAnimations,
+    previewIframeRef,
+    commitMutation,
+    handleGsapAddAnimation,
+    handleGsapAddKeyframeBatch,
+    handleGsapConvertToKeyframes,
+    handleGsapRemoveKeyframe,
+  } = session;
+  return useMemo(
+    () => ({
+      domEditSelection,
+      selectedGsapAnimations,
+      previewIframeRef,
+      commitMutation,
+      handleGsapAddAnimation,
+      handleGsapAddKeyframeBatch,
+      handleGsapConvertToKeyframes,
+      handleGsapRemoveKeyframe,
+    }),
+    [
+      domEditSelection,
+      selectedGsapAnimations,
+      previewIframeRef,
+      commitMutation,
+      handleGsapAddAnimation,
+      handleGsapAddKeyframeBatch,
+      handleGsapConvertToKeyframes,
+      handleGsapRemoveKeyframe,
+    ],
+  );
+}

package/src/hooks/useStableHandlers.test.tsx

@@ -0,0 +1,77 @@
+// @vitest-environment happy-dom
+
+import React, { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, describe, expect, it } from "vitest";
+import { useStableHandlers } from "./useStableHandlers";
+
+(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+interface Result {
+  count: number;
+  read: () => number;
+}
+
+let root: Root | null = null;
+afterEach(() => {
+  act(() => root?.unmount());
+  root = null;
+});
+
+function renderStable(seen: Result[]) {
+  function Probe({ count, base }: { count: number; base: number }) {
+    seen.push(useStableHandlers({ count, read: () => base }, "project"));
+    return null;
+  }
+  root = createRoot(document.createElement("div"));
+  return (count: number, base: number) =>
+    act(() => root!.render(<Probe count={count} base={base} />));
+}
+
+describe("useStableHandlers", () => {
+  it("keeps the object while only its handlers change, and the handler calls the latest one", () => {
+    const seen: Result[] = [];
+    const render = renderStable(seen);
+    render(1, 10);
+    render(1, 20);
+    expect(seen[1]).toBe(seen[0]);
+    expect(seen[1]!.read()).toBe(20);
+  });
+
+  it("gives a new object when a data field changes, with the same handler identity", () => {
+    const seen: Result[] = [];
+    const render = renderStable(seen);
+    render(1, 10);
+    render(2, 10);
+    expect(seen[1]).not.toBe(seen[0]);
+    expect(seen[1]!.count).toBe(2);
+    expect(seen[1]!.read).toBe(seen[0]!.read);
+  });
+
+  it("keeps a wrapper from an earlier scope calling that scope's handler", () => {
+    const seen: { write: () => string }[] = [];
+    function Scoped({ project }: { project: string }) {
+      seen.push(useStableHandlers({ write: () => project }, project));
+      return null;
+    }
+    root = createRoot(document.createElement("div"));
+    act(() => root!.render(<Scoped project="a" />));
+    const kept = seen[0]!.write;
+    act(() => root!.render(<Scoped project="b" />));
+    expect(kept()).toBe("a");
+    expect(seen[1]!.write).not.toBe(kept);
+    expect(seen[1]!.write()).toBe("b");
+  });
+
+  it("gives a new object when a key is swapped for another with the same value", () => {
+    const seen: Record<string, unknown>[] = [];
+    function Keys({ name }: { name: string }) {
+      seen.push(useStableHandlers({ [name]: undefined }, "project"));
+      return null;
+    }
+    root = createRoot(document.createElement("div"));
+    act(() => root!.render(<Keys name="old" />));
+    act(() => root!.render(<Keys name="fresh" />));
+    expect(Object.keys(seen[1]!)).toEqual(["fresh"]);
+  });
+});

package/src/hooks/useStableHandlers.ts

@@ -0,0 +1,44 @@
+import { useRef } from "react";
+
+type Handler = (...args: never[]) => unknown;
+type Epoch = {
+  scope: unknown;
+  latest: object;
+  wrappers: Map<string, Handler>;
+  previous: object | null;
+};
+
+// The same object while its non-function fields are unchanged, and one identity per function field calling the
+// latest one; a new `scope` (the project) starts new identities, and a wrapper kept from before calls its own scope's.
+export function useStableHandlers<T extends object>(value: T, scope: unknown): T {
+  const epoch = useRef<Epoch | null>(null);
+  if (!epoch.current || !Object.is(epoch.current.scope, scope))
+    epoch.current = { scope, latest: value, wrappers: new Map(), previous: null };
+  const current = epoch.current;
+  current.latest = value;
+
+  const next: Record<string, unknown> = {};
+  for (const [key, field] of Object.entries(value)) {
+    if (typeof field !== "function") {
+      next[key] = field;
+      continue;
+    }
+    let wrapper = current.wrappers.get(key);
+    if (!wrapper) {
+      wrapper = (...args: never[]) =>
+        (current.latest as Record<string, (...a: never[]) => unknown>)[key]!(...args);
+      current.wrappers.set(key, wrapper);
+    }
+    next[key] = wrapper;
+  }
+  const prev = current.previous as Record<string, unknown> | null;
+  const keys = Object.keys(next);
+  if (
+    prev &&
+    keys.length === Object.keys(prev).length &&
+    keys.every((k) => k in prev && prev[k] === next[k])
+  )
+    return prev as T;
+  current.previous = next;
+  return next as T;
+}

package/src/hooks/useStudioSdkSessions.ts

@@ -1,6 +1,7 @@
 import { useEffect } from "react";
 import { useSdkSession } from "./useSdkSession";
 import { usePreviewVariablesStore } from "./previewVariablesStore";
+import { useStableHandlers } from "./useStableHandlers";
 
 /**
  * Open the studio's SDK session with master-view semantics.
@@ -37,5 +38,5 @@ export function useStudioSdkSessions(
   useEffect(() => {
     usePreviewVariablesStore.getState().setValues(null);
   }, [projectId, activeCompPath]);
-  return { sdkHandle, editFlowSdkSession };
+  return { sdkHandle: useStableHandlers(sdkHandle, projectId), editFlowSdkSession };
 }

package/src/hooks/useStudioSidePanels.test.tsx

@@ -0,0 +1,44 @@
+// @vitest-environment happy-dom
+
+import React, { act, type ComponentProps } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import type { StudioLeftPanels } from "../components/StudioLeftPanels";
+import type { StudioRightPanels } from "../components/StudioRightPanels";
+import { useStudioSidePanels } from "./useStudioSidePanels";
+
+const rightProps = vi.hoisted(() => [] as { recordEdit: (project: string) => string }[]);
+vi.mock("../components/StudioLeftPanels", () => ({ StudioLeftPanels: () => null }));
+vi.mock("../components/StudioRightPanels", () => ({
+  StudioRightPanels: (props: { recordEdit: (project: string) => string }) => {
+    rightProps.push(props);
+    return null;
+  },
+}));
+
+(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+let root: Root | null = null;
+afterEach(() => {
+  act(() => root?.unmount());
+  root = null;
+  rightProps.length = 0;
+});
+
+function Panels({ project }: { project: string }) {
+  const right = { recordEdit: () => project } as unknown as ComponentProps<
+    typeof StudioRightPanels
+  >;
+  return useStudioSidePanels({} as ComponentProps<typeof StudioLeftPanels>, right, project);
+}
+
+describe("useStudioSidePanels", () => {
+  it("keeps a panel handler from one project calling that project after a switch", () => {
+    root = createRoot(document.createElement("div"));
+    act(() => root!.render(<Panels project="a" />));
+    const kept = rightProps.at(-1)!.recordEdit;
+    act(() => root!.render(<Panels project="b" />));
+    expect(kept("")).toBe("a");
+    expect(rightProps.at(-1)!.recordEdit("")).toBe("b");
+  });
+});

package/src/hooks/useStudioSidePanels.tsx

@@ -0,0 +1,23 @@
+import { useMemo, type ComponentProps } from "react";
+import { StudioLeftPanels } from "../components/StudioLeftPanels";
+import { StudioRightPanels } from "../components/StudioRightPanels";
+import { useStableHandlers } from "./useStableHandlers";
+
+/** Both side panels as one element that changes only when a panel's data does, never for a new handler. */
+export function useStudioSidePanels(
+  left: ComponentProps<typeof StudioLeftPanels>,
+  right: ComponentProps<typeof StudioRightPanels>,
+  projectId: string | null,
+) {
+  const stableLeft = useStableHandlers(left, projectId);
+  const stableRight = useStableHandlers(right, projectId);
+  return useMemo(
+    () => (
+      <>
+        <StudioLeftPanels {...stableLeft} />
+        <StudioRightPanels {...stableRight} />
+      </>
+    ),
+    [stableLeft, stableRight],
+  );
+}

package/src/hooks/useTimelineAddAtPlayhead.ts

@@ -1,15 +1,23 @@
 import { useCallback } from "react";
 import { usePlayerStore } from "../player";
+import { useStableHandlers } from "./useStableHandlers";
 
 type AddAtPlacement = (path: string, placement: { start: number; track: number }) => unknown;
 
-export function useTimelineAddAtPlayhead(addAsset: AddAtPlacement, addComposition: AddAtPlacement) {
+export function useTimelineAddAtPlayhead(
+  addAsset: AddAtPlacement,
+  addComposition: AddAtPlacement,
+  projectId: string | null,
+) {
   const placement = () => ({ start: usePlayerStore.getState().currentTime, track: 0 });
-  return {
-    addAssetAtPlayhead: useCallback((path: string) => addAsset(path, placement()), [addAsset]),
-    addCompositionAtPlayhead: useCallback(
-      (path: string) => addComposition(path, placement()),
-      [addComposition],
-    ),
-  };
+  return useStableHandlers(
+    {
+      addAssetAtPlayhead: useCallback((path: string) => addAsset(path, placement()), [addAsset]),
+      addCompositionAtPlayhead: useCallback(
+        (path: string) => addComposition(path, placement()),
+        [addComposition],
+      ),
+    },
+    projectId,
+  );
 }

package/src/hooks/useTimelineDeleteOps.test.tsx

@@ -28,6 +28,17 @@ describe("applyRippleShifts", () => {
   });
 });
 
+function stubRemoveElementsFetch(current: string, afterRemoval: string) {
+  vi.stubGlobal(
+    "fetch",
+    vi.fn(async (input: RequestInfo | URL) => {
+      const isRemoval = String(input).includes("/file-mutations/remove-elements/");
+      const content = isRemoval ? afterRemoval : current;
+      return new Response(JSON.stringify({ changed: isRemoval, content }), { status: 200 });
+    }),
+  );
+}
+
 describe("useTimelineDeleteOps: ripple undo label", () => {
   const html = `<!DOCTYPE html><html data-composition-variables='[]'><body>
 <div data-hf-id="hf-stage" data-hf-root data-duration="6">
@@ -38,16 +49,7 @@ describe("useTimelineDeleteOps: ripple undo label", () => {
 </body></html>`;
 
   beforeEach(() => {
-    vi.stubGlobal(
-      "fetch",
-      vi.fn(async (input: RequestInfo | URL) => {
-        const url = String(input);
-        if (url.includes("/file-mutations/remove-element/")) {
-          return new Response(JSON.stringify({ changed: true, content: html }), { status: 200 });
-        }
-        return new Response(JSON.stringify({ content: html }), { status: 200 });
-      }),
-    );
+    stubRemoveElementsFetch(html, html);
   });
 
   afterEach(() => {
@@ -118,6 +120,23 @@ describe("useTimelineDeleteOps: ripple undo label", () => {
     );
   });
 
+  it("removes a multi-clip selection with one request, however many clips it holds", async () => {
+    const handleTimelineGroupMove = vi.fn().mockResolvedValue(undefined);
+    const { elements, getHook } = mountDeleteHarness({ handleTimelineGroupMove });
+
+    await act(async () => {
+      await getHook().handleTimelineElementsDelete(elements);
+    });
+
+    const removals = vi
+      .mocked(fetch)
+      .mock.calls.filter(([url]) => String(url).includes("/file-mutations/remove-element"));
+    expect(removals).toHaveLength(1);
+    const [, init] = removals[0] as [unknown, RequestInit];
+    const body = JSON.parse(String(init.body));
+    expect(body.targets).toHaveLength(elements.length);
+  });
+
   it("shows exactly one toast when a ripple fails to persist after a committed delete", async () => {
     const handleTimelineGroupMove = vi.fn().mockRejectedValue(new Error("persist failed"));
     const showToast = vi.fn();
@@ -162,18 +181,7 @@ describe("useTimelineDeleteOps: undo race", () => {
 </body></html>`;
 
   beforeEach(() => {
-    vi.stubGlobal(
-      "fetch",
-      vi.fn(async (input: RequestInfo | URL) => {
-        const url = String(input);
-        if (url.includes("/file-mutations/remove-element/")) {
-          return new Response(JSON.stringify({ changed: true, content: htmlAfterDeletingC }), {
-            status: 200,
-          });
-        }
-        return new Response(JSON.stringify({ content: html }), { status: 200 });
-      }),
-    );
+    stubRemoveElementsFetch(html, htmlAfterDeletingC);
   });
 
   afterEach(() => {

package/src/hooks/useTimelineDeleteOps.ts

@@ -121,38 +121,32 @@ export function useTimelineDeleteOps({
             writeFile: writeProjectFile,
             recordEdit,
             rewrite: async (originalContent) => {
-              // Remove every selected element before saving once. The server rewrites
-              // the file per call, so `removedContent` after the last one holds them
-              // all — which is what makes this a single history entry, and a single
-              // undo, rather than one per clip.
-              let removedContent = originalContent;
-              for (const target of sameFile) {
+              // One request removes every selected element and rewrites the file once, so a
+              // large selection is a single round trip and a single history entry.
+              const patchTargets = sameFile.map((target) => {
                 const patchTarget = buildPatchTarget(target);
                 if (!patchTarget) {
                   throw new Error(`Timeline element ${target.id} is missing a patchable target`);
                 }
-
-                const removeResponse = await fetch(
-                  buildProjectApiPath(
-                    pid,
-                    `/file-mutations/remove-element/${encodeURIComponent(targetPath)}`,
-                  ),
-                  {
-                    method: "POST",
-                    headers: { "Content-Type": "application/json", ...studioWriteHeaders() },
-                    body: JSON.stringify({ target: patchTarget }),
-                  },
-                );
-                if (!removeResponse.ok) {
-                  throw new Error(`Failed to delete ${target.id} from ${targetPath}`);
-                }
-
-                const removeData = (await removeResponse.json()) as {
-                  changed?: boolean;
-                  content?: string;
-                };
-                if (typeof removeData.content === "string") removedContent = removeData.content;
+                return patchTarget;
+              });
+              const removeResponse = await fetch(
+                buildProjectApiPath(
+                  pid,
+                  `/file-mutations/remove-elements/${encodeURIComponent(targetPath)}`,
+                ),
+                {
+                  method: "POST",
+                  headers: { "Content-Type": "application/json", ...studioWriteHeaders() },
+                  body: JSON.stringify({ targets: patchTargets }),
+                },
+              );
+              if (!removeResponse.ok) {
+                throw new Error(`Failed to delete ${sameFile.length} clips from ${targetPath}`);
               }
+              const removeData = (await removeResponse.json()) as { content?: string };
+              const removedContent =
+                typeof removeData.content === "string" ? removeData.content : originalContent;
               // Shrink to the furthest remaining clip end, read from the post-removal source:
               // store durations are runtime-truncated.
               const deleteContentEnd = furthestClipEndFromSource(removedContent);

package/src/hooks/useTimelineEditing.test.tsx

@@ -1296,7 +1296,7 @@ describe("useTimelineEditing duration rollback on failed persist", () => {
       if (url.includes("/api/projects/p1/files/")) {
         return jsonResponse({ content: DELETE_SOURCE });
       }
-      if (url.includes("/api/projects/p1/file-mutations/remove-element/")) {
+      if (url.includes("/api/projects/p1/file-mutations/remove-elements/")) {
         return jsonResponse({ changed: true, content: DELETE_REMOVED_SOURCE });
       }
       throw new Error(`Unexpected fetch: ${url}`);

package/src/hooks/useTimelineEditing.ts

@@ -1,5 +1,6 @@
 // fallow-ignore-file complexity
 import { useCallback, useRef } from "react";
+import { useStableHandlers } from "./useStableHandlers";
 import { usePlayerStore, type TimelineElement } from "../player";
 import { toAuthoredStart, toCompositionTime } from "../player/store/timelineElement";
 import { useRazorSplit } from "./useRazorSplit";
@@ -508,13 +509,41 @@ export function useTimelineEditing({
     return [...flatMembers, ...domMembers];
   };
 
+  const audioGroupAttribute = {
+    ...setAudioGroupAttribute,
+    // Same two-array member lookup syncStoredGroupAttribute mirrors into
+    // (timelineAudioGroupVolume.ts): a sub-composition's group members have
+    // no flat twin, only a domClipChildren entry, so both are checked.
+    setQuiet: track(
+      guard(audioGroupMembers, setAudioGroupAttribute.setQuiet, (reason, groupId, attr) => {
+        setAudioGroupAttribute.revertLive(groupId, attr);
+        return refused(reason);
+      }),
+    ),
+  };
+  const stableAudioGroupAttribute = useStableHandlers(audioGroupAttribute, projectId);
+  const elementFxAttribute = {
+    ...setElementFxAttribute,
+    setMany: track(guard((edits) => edits.map((edit) => edit.element), setElementsAttribute)),
+    setQuiet: track(
+      guard(
+        (element) => [element],
+        setElementFxAttribute.setQuiet,
+        (reason, element, attr) => {
+          setElementFxAttribute.revertLive(element, attr);
+          return refused(reason);
+        },
+      ),
+    ),
+  };
+  const stableElementFxAttribute = useStableHandlers(elementFxAttribute, projectId);
   // 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) => withLinkPartners([element]), handleRazorSplit),
   );
-  return {
+  const editing = {
     handleTimelineElementMove: track(guard((element) => [element], handleTimelineElementMove)),
     handleTimelineElementResize: track(guard((element) => [element], handleTimelineElementResize)),
     handleToggleTrackHidden: track(
@@ -530,32 +559,8 @@ export function useTimelineEditing({
       }, handleToggleElementHidden),
     ),
     handleAutoGroupCarveSources: track(handleAutoGroupCarveSources),
-    setAudioGroupAttribute: {
-      ...setAudioGroupAttribute,
-      // Same two-array member lookup syncStoredGroupAttribute mirrors into
-      // (timelineAudioGroupVolume.ts): a sub-composition's group members have
-      // no flat twin, only a domClipChildren entry, so both are checked.
-      setQuiet: track(
-        guard(audioGroupMembers, setAudioGroupAttribute.setQuiet, (reason, groupId, attr) => {
-          setAudioGroupAttribute.revertLive(groupId, attr);
-          return refused(reason);
-        }),
-      ),
-    },
-    setElementFxAttribute: {
-      ...setElementFxAttribute,
-      setMany: track(guard((edits) => edits.map((edit) => edit.element), setElementsAttribute)),
-      setQuiet: track(
-        guard(
-          (element) => [element],
-          setElementFxAttribute.setQuiet,
-          (reason, element, attr) => {
-            setElementFxAttribute.revertLive(element, attr);
-            return refused(reason);
-          },
-        ),
-      ),
-    },
+    setAudioGroupAttribute: stableAudioGroupAttribute,
+    setElementFxAttribute: stableElementFxAttribute,
     handleTimelineElementDelete: track(
       guard((element) => withLinkPartners([element]), linkEditing.handleLinkedElementDelete),
     ),
@@ -591,4 +596,5 @@ export function useTimelineEditing({
       setAudioGroupAttribute.restoreLive(restore);
     },
   };
+  return useStableHandlers(editing, projectId);
 }

package/src/player/components/AutomationSelectionMenu.tsx

@@ -8,6 +8,7 @@ import { memo } from "react";
 import { createPortal } from "react-dom";
 import { useContextMenuDismiss } from "../../hooks/useContextMenuDismiss";
 import { AUTOMATION_SHAPES, type AutomationShapeId } from "./automationShapes";
+import { menuClasses } from "../../components/ui/menuStyle";
 
 interface AutomationSelectionMenuProps {
   x: number;
@@ -45,7 +46,7 @@ export const AutomationSelectionMenu = memo(function AutomationSelectionMenu({
       // portaled to `document.body`, but the ruler's sticky header sits at z-70
       // in the SAME root stacking context, so a z-50 menu opened near the top of
       // the timeline is painted through by the ruler and the playhead.
-      className="hf-automation-menu fixed z-200 min-w-[140px] rounded-sm border border-panel-border-input bg-panel-bg-2 py-1 shadow-lg"
+      className={`${menuClasses.panel} hf-automation-menu fixed z-200 min-w-[140px]`}
       style={{ left: adjustedX, top: adjustedY }}
     >
       {AUTOMATION_SHAPES.map((shape) => (
@@ -61,7 +62,7 @@ export const AutomationSelectionMenu = memo(function AutomationSelectionMenu({
           {shape.label}
         </button>
       ))}
-      <div className="my-1 border-t border-panel-border-input" />
+      <div className={menuClasses.divider} />
       <button
         type="button"
         className={row}

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

@@ -5,6 +5,7 @@ import { afterEach, describe, expect, it, vi } from "vitest";
 import type { TimelineElement } from "../store/playerStore";
 import { ClipContextMenu } from "./ClipContextMenu";
 import type { TimelineClipMenuItem } from "./TimelineTypes";
+import { TimelineEditProvider } from "../../contexts/TimelineEditContext";
 
 (globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
 
@@ -117,6 +118,67 @@ describe("ClipContextMenu host items", () => {
   });
 });
 
+describe("ClipContextMenu tools", () => {
+  const video = {
+    id: "talk",
+    domId: "talk",
+    tag: "video",
+    start: 0,
+    duration: 4,
+    track: 0,
+    hasAudio: true,
+  } as unknown as TimelineElement;
+
+  function menuWith(clipMenuTools: boolean | undefined) {
+    const host = document.createElement("div");
+    document.body.appendChild(host);
+    const root = createRoot(host);
+    act(() =>
+      root.render(
+        <TimelineEditProvider
+          value={{
+            onFreezeFrame: vi.fn(),
+            onSetElementAttributeQuiet: vi.fn(),
+            onLinkEdit: vi.fn(),
+            ...(clipMenuTools === undefined ? {} : { clipMenuTools }),
+          }}
+        >
+          <ClipContextMenu
+            x={10}
+            y={10}
+            element={video}
+            currentTime={1}
+            onClose={vi.fn()}
+            onSplit={vi.fn()}
+            onDelete={vi.fn()}
+          />
+        </TimelineEditProvider>,
+      ),
+    );
+    const labels = () =>
+      Array.from(document.body.querySelectorAll("[role=menuitem]")).map((item) => item.textContent);
+    return { labels, unmount: () => act(() => root.unmount()) };
+  }
+
+  it("offers Freeze frame and the attribute tools by default", () => {
+    const { labels, unmount } = menuWith(undefined);
+    expect(labels().some((label) => label?.startsWith("Freeze frame"))).toBe(true);
+    expect(labels().some((label) => label?.startsWith("Look"))).toBe(true);
+    expect(labels().some((label) => label?.startsWith("Voice"))).toBe(true);
+    unmount();
+  });
+
+  it("hides every tool when the host turns them off, keeping Split and Delete", () => {
+    const { labels, unmount } = menuWith(false);
+    expect(labels().some((label) => label?.startsWith("Freeze frame"))).toBe(false);
+    expect(labels().some((label) => label?.startsWith("Look"))).toBe(false);
+    expect(labels().some((label) => label?.startsWith("Voice"))).toBe(false);
+    expect(labels().some((label) => label?.startsWith("Split"))).toBe(true);
+    expect(labels().some((label) => label?.startsWith("Delete"))).toBe(true);
+    unmount();
+  });
+});
+
 /** A clip button that opens the real menu, whose Ask moves the focus the way `focus` says. */
 function FocusHost({ focus }: { focus: "existing" | "mounted" }) {
   const [open, setOpen] = useState(false);
@@ -186,3 +248,14 @@ describe("ClipContextMenu focus on close", () => {
     unmount();
   });
 });
+
+describe("ClipContextMenu row fill", () => {
+  it("leaves no padding or margin between its rows and the panel edge or a divider", () => {
+    renderMenu([{ id: "ask", label: "Ask", onSelect: vi.fn() }]);
+    const menu = document.body.querySelector<HTMLElement>("[role=menu]")!;
+    const spacing = /(^| )(p|py|pt|pb|m|my|mt|mb)-\d/;
+    expect(menu.className).not.toMatch(spacing);
+    for (const group of menu.querySelectorAll<HTMLElement>("[role=group]"))
+      expect(group.className).not.toMatch(spacing);
+  });
+});