@hyperframes/studio 0.8.113 → 0.8.115

package/src/components/editor/propertyPanelFxNodeParams.tsx

@@ -1,3 +1,4 @@
+import { useTrackDesignInput } from "../../contexts/DesignPanelInputContext";
 /**
  * An open effect's knobs, with whatever automation surface applies to them.
  *
@@ -69,6 +70,7 @@ export function FxNodeParams({
   index: number;
   disabled: boolean;
 }) {
+  const trackInput = useTrackDesignInput();
   const nodeId = node.id;
   // Lanes address a node by id; the controls know their own parameter keys. This
   // is the one place that translation belongs.
@@ -97,14 +99,25 @@ export function FxNodeParams({
           if (before[key] === value) continue;
           if (typeof value !== "number" && typeof value !== "string") continue;
           trackParamCommitted(node.type, key, value, "details", { trackKind });
+          trackInput(typeof value === "number" ? "slider" : "select", key);
         }
         onUpdate(index, { params: next });
       }}
       automatedKeys={automatedKeysOf(node, def.params, automatedTargets)}
-      onAutomate={nodeId && onAutomateParam ? (key) => onAutomateParam(nodeId, key) : undefined}
+      onAutomate={
+        nodeId && onAutomateParam
+          ? (key) => {
+              onAutomateParam(nodeId, key);
+              trackInput("button", "automate-param");
+            }
+          : undefined
+      }
       onRemoveAutomation={
         nodeId && onRemoveParamAutomation
-          ? (key) => onRemoveParamAutomation(nodeId, key)
+          ? (key) => {
+              onRemoveParamAutomation(nodeId, key);
+              trackInput("button", "remove-param-automation");
+            }
           : undefined
       }
     />

package/src/components/editor/propertyPanelFxNodeRow.tsx

@@ -1,3 +1,4 @@
+import { useTrackDesignInput } from "../../contexts/DesignPanelInputContext";
 /**
  * One effect in the FX rack: its header controls, and its knobs when open.
  *
@@ -246,6 +247,7 @@ export function FxNodeRow({
   onPreview,
   trackKind,
 }: FxNodeRowProps) {
+  const trackInput = useTrackDesignInput();
   const registryDef = getAudioFxDef(node.type);
   const def = useMemo(() => (registryDef ? plainDef(registryDef) : null), [registryDef]);
   const primary = registryDef ? primaryParamOf(registryDef) : null;
@@ -306,6 +308,7 @@ export function FxNodeRow({
         onToggleBypass={() => {
           trackNodeBypassed(node.type, !bypassed, { trackKind });
           onUpdate(index, { enabled: bypassed });
+          trackInput("toggle", "effect-bypass");
         }}
         onMove={(delta) => onMove(index, delta)}
         onRemove={() => onRemove(index)}

package/src/components/editor/propertyPanelFxPresetRun.tsx

@@ -1,3 +1,4 @@
+import { useTrackDesignInput } from "../../contexts/DesignPanelInputContext";
 /**
  * One preset's bracket in the rack: its own header, on/off switch, amount lane
  * and the rows it wraps — or, for a run with no preset, just the rows.
@@ -93,6 +94,7 @@ export function FxPresetRun({
   onAutomate,
   onRemoveAutomation,
 }: FxPresetRunProps) {
+  const trackInput = useTrackDesignInput();
   const rows = run.items.map(({ node, i }) => (
     <FxNodeRow
       // Keyed by id, as the carve module's list above already is. On
@@ -183,7 +185,10 @@ export function FxPresetRun({
           aria-pressed={runOn}
           title={runOn ? `Switch ${preset.label} off` : `Switch ${preset.label} back on`}
           disabled={disabled}
-          onClick={() => onSetAmount(runOn ? 0 : 1)}
+          onClick={() => {
+            onSetAmount(runOn ? 0 : 1);
+            trackInput("toggle", "preset-amount");
+          }}
         >
           {runOn ? "On" : "Off"}
         </button>
@@ -205,7 +210,10 @@ export function FxPresetRun({
         disabled={disabled || automated}
         automated={automated}
         onChange={(_k, v) => onSetAmount(Number(v), false)}
-        onCommit={(_k, v) => onSetAmount(Number(v))}
+        onCommit={(_k, v) => {
+          onSetAmount(Number(v));
+          trackInput("slider", "preset-amount");
+        }}
         onAutomate={onAutomate}
         onRemoveAutomation={onRemoveAutomation}
       />

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

@@ -1787,3 +1787,59 @@ describe("voiceover carve visibility", () => {
     expect(carveBlock(host)).toBeTruthy();
   });
 });
+
+vi.mock("../../utils/studioTelemetry", () => ({ trackStudioEvent: vi.fn() }));
+import { trackStudioEvent } from "../../utils/studioTelemetry";
+import { __resetDesignInputThrottle } from "../../utils/designInputTracking";
+import { DesignPanelInputProvider } from "../../contexts/DesignPanelInputContext";
+function renderTrackedFx(props: Partial<Parameters<typeof FxSection>[0]> = {}) {
+  vi.mocked(trackStudioEvent).mockClear();
+  __resetDesignInputThrottle();
+  return renderInto(
+    <DesignPanelInputProvider ui="flat" section="media">
+      <FxSection
+        chain={chainOf("lowpass", "gain")}
+        onChainChange={vi.fn()}
+        carve={null}
+        onCarveChange={vi.fn()}
+        sourceOptions={[]}
+        {...props}
+      />
+    </DesignPanelInputProvider>,
+  );
+}
+
+describe("custom FX inspector input usage", () => {
+  it.each([
+    [".hf-fx-bypass", "toggle", "effect-bypass"],
+    ['.hf-fx-move[title="Move down"]', "button", "move-effect"],
+    [".hf-fx-remove", "button", "remove-effect"],
+  ])("tracks %s through design_input once", (selector, control, name) => {
+    const onChainChange = vi.fn();
+    const { host, root } = renderTrackedFx({ onChainChange });
+    click(host.querySelector(selector));
+    expect(onChainChange).toHaveBeenCalledTimes(1);
+    expect(
+      vi.mocked(trackStudioEvent).mock.calls.filter(([event]) => event === "design_input"),
+    ).toEqual([["design_input", { ui: "flat", section: "media", control, name }]]);
+    expect(vi.mocked(trackStudioEvent).mock.calls.some(([event]) => event === "feature_used")).toBe(
+      false,
+    );
+    act(() => root.unmount());
+  });
+  it.each([false, true])("tracks a levelling button once (already levelled: %s)", (levelled) => {
+    const action = vi.fn();
+    const { host, root } = renderTrackedFx({ levelled, onLevel: action, onRemoveLevel: action });
+    click(byText(host, "button", "+ effect"));
+    vi.mocked(trackStudioEvent).mockClear();
+    click(byText(host, "button", levelled ? "Remove levelling" : "Even Out Levels"));
+    expect(action).toHaveBeenCalledTimes(1);
+    expect(trackStudioEvent).toHaveBeenCalledExactlyOnceWith("design_input", {
+      ui: "flat",
+      section: "media",
+      control: "button",
+      name: levelled ? "remove-levelling" : "add-levelling",
+    });
+    act(() => root.unmount());
+  });
+});

package/src/components/editor/propertyPanelFxSection.tsx

@@ -1,3 +1,4 @@
+import { useTrackDesignInput } from "../../contexts/DesignPanelInputContext";
 /**
  * The FX section for an audio element: the chain, plus the voiceover carve.
  *
@@ -120,13 +121,17 @@ export function FxSection({
   // could only name a source it must not.
   const showCarve = !carvedAgainstBy && (sourceOptions.length > 0 || carve !== null);
 
+  const trackInput = useTrackDesignInput();
   const [adding, setAdding] = useState(false);
   const [picking, setPicking] = useState(false);
   const [openNode, setOpenNode] = useState<number | null>(0);
 
   const mutate = useCallback(
-    (nodes: HfAudioFxNode[]) => onChainChange({ ...chain, nodes }),
-    [chain, onChainChange],
+    (nodes: HfAudioFxNode[], input?: string, control = "button") => {
+      onChainChange({ ...chain, nodes });
+      if (input) trackInput(control, input);
+    },
+    [chain, onChainChange, trackInput],
   );
 
   // Dragging a knob previews without persisting; releasing it commits once.
@@ -156,7 +161,7 @@ export function FxSection({
       // old chain back over the write that just landed is a race the author
       // hears as the preset arriving and then leaving again.
       clearAudition();
-      mutate(next.nodes);
+      mutate(next.nodes, "apply-preset");
       // Land on the first node the preset wrote, so the author can hear what
       // arrived and immediately see what it is made of.
       setOpenNode(next.nodes.findIndex((n) => n.fromPreset === id));
@@ -169,7 +174,7 @@ export function FxSection({
     (job: HfAudioFxJob) => {
       clearAudition();
       trackNodeAdded(job.type, "job", job.id, { trackKind });
-      mutate(withJob(chain, job).nodes);
+      mutate(withJob(chain, job).nodes, "add-job");
       setOpenNode(chain.nodes.length);
       setAdding(false);
     },
@@ -180,7 +185,7 @@ export function FxSection({
     (type: string) => {
       clearAudition();
       trackNodeAdded(type, "effect", null, { trackKind });
-      mutate(withEffect(chain, type).nodes);
+      mutate(withEffect(chain, type).nodes, "add-effect");
       setOpenNode(chain.nodes.length);
       setAdding(false);
     },
@@ -218,26 +223,18 @@ export function FxSection({
     [chain, mutate, onChainPreview],
   );
 
-  /**
-   * Take a preset back out whole, lanes and all.
-   *
-   * Same contract as removing one node — an orphaned lane keeps driving a
-   * parameter that is no longer in the graph, and with ids minted lowest-free
-   * the next effect added inherits it.
-   */
+  // Remove the run and its lanes together so new nodes cannot inherit orphaned automation.
   const removeRun = useCallback(
     (items: { node: HfAudioFxNode; i: number }[], presetId?: string) => {
-      // One call, not a loop: every write is computed from the same snapshot and
-      // replaces the whole attribute, so a loop kept only its last write and left
-      // the other nodes' lanes behind as orphans. The preset id goes with it —
-      // the `fx.preset.<id>` amount lane belongs to the preset, not to any node,
-      // so nothing else would ever collect it, and re-applying the preset later
-      // resurrected the old ramp.
+      // Remove node and preset automation together before replacing the chain.
       const ids = items.map(({ node }) => node.id).filter((id): id is string => Boolean(id));
       if (ids.length > 0 || presetId) onRemoveNodesAutomation?.(ids, presetId);
       if (presetId) trackPresetRemoved(presetId, { trackKind });
       const slots = new Set(items.map((item) => item.i));
-      mutate(chain.nodes.filter((_, i) => !slots.has(i)));
+      mutate(
+        chain.nodes.filter((_, i) => !slots.has(i)),
+        "remove-preset",
+      );
       setOpenNode(null);
     },
     [chain.nodes, mutate, onRemoveNodesAutomation, trackKind],
@@ -254,7 +251,10 @@ export function FxSection({
       const removedId = removed?.id;
       if (removedId) onRemoveNodeAutomation?.(removedId);
       if (removed) trackNodeRemoved(removed.type, nodeOrigin(removed), { trackKind });
-      mutate(chain.nodes.filter((_, i) => i !== index));
+      mutate(
+        chain.nodes.filter((_, i) => i !== index),
+        "remove-effect",
+      );
       setOpenNode(null);
     },
     [chain.nodes, mutate, onRemoveNodeAutomation, trackKind],
@@ -372,7 +372,7 @@ export function FxSection({
     clearAudition();
     const { chain: next, eqId } = addAudioEq(chain);
     trackNodeAdded("eq", "eq", null, { trackKind });
-    mutate(next.nodes);
+    mutate(next.nodes, "add-eq");
     setOpenEq(eqId);
     setAdding(false);
   }, [chain, mutate, clearAudition, trackKind]);
@@ -386,20 +386,18 @@ export function FxSection({
   );
   const commitEqBand = useCallback(
     (eqId: string, band: string, gain: number) =>
-      mutate(setAudioEqBandGain(chain, eqId, band, gain).nodes),
+      mutate(setAudioEqBandGain(chain, eqId, band, gain).nodes, "eq-gain", "slider"),
     [chain, mutate],
   );
   const removeEq = useCallback(
     (eqId: string) => {
-      // Batched for the same reason as `removeRun` — this loop had the identical
-      // last-write-wins bug and was only unreachable because an EQ band row
-      // offers no automation toggle today.
+      // Remove the EQ automation in one write.
       const ids = chain.nodes
         .filter((node) => node.fromEq === eqId)
         .map((node) => node.id)
         .filter((id): id is string => Boolean(id));
       if (ids.length > 0) onRemoveNodesAutomation?.(ids);
-      mutate(removeAudioEq(chain, eqId).nodes);
+      mutate(removeAudioEq(chain, eqId).nodes, "remove-eq");
     },
     [chain, mutate, onRemoveNodesAutomation],
   );
@@ -412,7 +410,7 @@ export function FxSection({
       const [moved] = next.splice(index, 1);
       next.splice(target, 0, moved!);
       if (moved) trackNodeMoved(moved.type, delta < 0 ? "up" : "down", { trackKind });
-      mutate(next);
+      mutate(next, "move-effect");
       setOpenNode(target);
     },
     [chain.nodes, mutate, trackKind],
@@ -448,6 +446,7 @@ export function FxSection({
     return () => {
       trackPresetAutomated(presetId, true, { trackKind });
       onAutomatePreset(presetId, amount);
+      trackInput("button", "automate-preset");
     };
   };
 
@@ -456,7 +455,10 @@ export function FxSection({
     presetId: string | undefined,
   ): (() => void) | undefined => {
     if (!presetId || !onRemovePresetAutomation || !presetAutomated.has(presetId)) return undefined;
-    return () => onRemovePresetAutomation(presetId);
+    return () => {
+      onRemovePresetAutomation(presetId);
+      trackInput("button", "remove-preset-automation");
+    };
   };
 
   return (

package/src/components/editor/propertyPanelTypes.ts

@@ -82,12 +82,15 @@ export interface PropertyPanelProps {
     element: DomEditSelection,
     next: { x: number; y: number },
     route?: { plainTranslate: boolean },
-  ) => void | Promise<void>;
+  ) => void | Promise<void | import("../../utils/previewFeatureUsage").GeometryCommitResult>;
   onSetManualSize: (
     element: DomEditSelection,
     next: { width: number; height: number },
-  ) => void | Promise<void>;
-  onSetManualRotation: (element: DomEditSelection, next: { angle: number }) => void | Promise<void>;
+  ) => void | Promise<void | import("../../utils/previewFeatureUsage").GeometryCommitResult>;
+  onSetManualRotation: (
+    element: DomEditSelection,
+    next: { angle: number },
+  ) => void | Promise<void | import("../../utils/previewFeatureUsage").GeometryCommitResult>;
   onSetText: (value: string, fieldKey?: string) => void;
   onSetTextFieldStyle: (fieldKey: string, property: string, value: string) => void;
   onPreviewTextFieldStyle?: (fieldKey: string, property: string, value: string) => void;

package/src/components/editor/reapplyPositionEditsAfterSeek.test.ts

@@ -2,6 +2,8 @@
 import { afterEach, describe, expect, it, vi } from "vitest";
 import { reapplyPositionEditsAfterSeek } from "./manualEditsSeekReapply";
 import {
+  STUDIO_OFFSET_X_PROP,
+  STUDIO_OFFSET_Y_PROP,
   STUDIO_PATH_OFFSET_ATTR,
   STUDIO_ROTATION_ATTR,
   STUDIO_ROTATION_PROP,
@@ -14,6 +16,29 @@ describe("reapplyPositionEditsAfterSeek", () => {
     vi.restoreAllMocks();
   });
 
+  it("keeps an old offset off an element GSAP moves by object-of-arrays keyframes, not off its neighbour", () => {
+    const offset = `${STUDIO_OFFSET_X_PROP}: 300px; ${STUDIO_OFFSET_Y_PROP}: 100px; translate: none`;
+    document.body.innerHTML = ["moved", "still"]
+      .map((id) => `<div id="${id}" ${STUDIO_PATH_OFFSET_ATTR}="true" style="${offset}"></div>`)
+      .join("");
+    const moved = document.getElementById("moved") as HTMLElement;
+    const tween = { targets: () => [moved], vars: { keyframes: { x: [0, 200] } } };
+    const win = window as unknown as { __timelines?: unknown; gsap?: unknown };
+    const gsap = { set: vi.fn(), getProperty: () => 0 };
+    Object.assign(win, { __timelines: { main: { getChildren: () => [tween] } }, gsap });
+    try {
+      reapplyPositionEditsAfterSeek(document);
+    } finally {
+      delete win.__timelines;
+      delete win.gsap;
+    }
+
+    expect(moved.style.getPropertyValue("translate")).toBe("none");
+    expect(gsap.set).not.toHaveBeenCalled();
+    const still = document.getElementById("still") as HTMLElement;
+    expect(still.style.getPropertyValue("translate")).toContain(STUDIO_OFFSET_X_PROP);
+  });
+
   it("does no per-edit work on a film Studio never edited", () => {
     document.body.innerHTML = '<div id="a"></div><div id="b"></div>';
     const queryAll = vi.spyOn(document, "querySelectorAll");

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

@@ -1,3 +1,4 @@
+import { trackStudioEvent } from "../../utils/studioTelemetry";
 // @vitest-environment happy-dom
 import React, { act } from "react";
 import { createRoot } from "react-dom/client";
@@ -423,3 +424,39 @@ describe("useDomEditNudge — a commit that throws", () => {
     act(() => root.unmount());
   });
 });
+
+vi.mock("../../utils/studioTelemetry", () => ({ trackStudioEvent: vi.fn() }));
+describe("nudge usage", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    vi.useFakeTimers();
+    __resetForTests();
+  });
+  afterEach(() => vi.useRealTimers());
+  it.each([true, false])(
+    "counts a whole key burst only when the writer changed source (%s)",
+    async (changed) => {
+      const root = createRoot(document.body.appendChild(document.createElement("div")));
+      const element = document.body.appendChild(document.createElement("div"));
+      const commit = vi.fn().mockResolvedValue({ ok: true, changed });
+      act(() =>
+        root.render(
+          <Harness selection={makeSelection("Dot", element)} onPathOffsetCommit={commit} />,
+        ),
+      );
+      act(() => {
+        dispatchArrowRight();
+        dispatchArrowRight();
+      });
+      await act(async () => vi.advanceTimersByTimeAsync(CANVAS_NUDGE_COMMIT_DEBOUNCE_MS + 10));
+      expect(commit).toHaveBeenCalledTimes(1);
+      expect(vi.mocked(trackStudioEvent).mock.calls).toEqual(
+        changed
+          ? [["feature_used", { feature: "nudge", surface: "preview", method: "keyboard" }]]
+          : [],
+      );
+      act(() => root.unmount());
+      element.remove();
+    },
+  );
+});

package/src/components/editor/useDomEditNudge.ts

@@ -1,3 +1,4 @@
+import { trackPreviewEditResult } from "../../utils/previewFeatureUsage";
 /**
  * Canvas arrow-key nudge for DomEditOverlay: arrows move the selected
  * element(s) 1 composition px, Shift = 10. Each keypress previews through the
@@ -173,6 +174,7 @@ export function useDomEditNudge(params: UseDomEditNudgeParams): { flushNudge: ()
         for (const member of session.members)
           restoreStudioPathOffset(member.element, member.initialPathOffset);
       saved = Promise.resolve(commit)
+        .then((result) => trackPreviewEditResult("nudge", "keyboard", result))
         .catch(() => {
           for (const member of session.members) {
             if (isStudioManualEditGestureCurrent(member.element, member.gestureToken)) {

package/src/components/editor/useDomEditOverlayGestures.ts

@@ -1,3 +1,4 @@
+import { trackPreviewEditResult } from "../../utils/previewFeatureUsage";
 // fallow-ignore-file code-duplication
 /**
  * Gesture handling for DomEditOverlay.
@@ -353,6 +354,7 @@ export function createDomEditOverlayGestureHandlers(opts: UseDomEditOverlayGestu
       const groupSaved = Promise.resolve(
         groupEdit.adopt(() => opts.onGroupPathOffsetCommitRef.current(updates)),
       )
+        .then((result) => trackPreviewEditResult("move", "drag", result))
         .catch(() => {
           for (const member of groupG.members) {
             if (
@@ -442,6 +444,7 @@ export function createDomEditOverlayGestureHandlers(opts: UseDomEditOverlayGestu
       applyRotationDraft(sel.element, finalRotation.angle, g.plainRotation);
       const commit = g.plainRotation ? { ...finalRotation, plain: g.plainRotation } : finalRotation;
       void Promise.resolve(opts.onRotationCommitRef.current(sel, commit))
+        .then((result) => trackPreviewEditResult("rotate", "drag", result))
         .catch((error) => {
           logGestureCommitFailure("rotate commit failed", error);
           if (
@@ -488,6 +491,7 @@ export function createDomEditOverlayGestureHandlers(opts: UseDomEditOverlayGestu
           }),
         ),
       )
+        .then((result) => trackPreviewEditResult("move", "drag", result))
         .catch(() => {
           if (
             g.pathOffsetMember?.gestureToken &&
@@ -534,6 +538,7 @@ export function createDomEditOverlayGestureHandlers(opts: UseDomEditOverlayGestu
       void Promise.resolve(
         opts.onBoxSizeCommitRef.current(sel, finalSize, finalOffset ?? undefined, restore),
       )
+        .then((result) => trackPreviewEditResult("resize", "drag", result))
         .catch((error) => {
           logGestureCommitFailure("resize commit failed", error);
         })

package/src/components/editor/useDomEditZOrder.ts

@@ -1,3 +1,4 @@
+import { trackPreviewFeatureUsed } from "../../utils/previewFeatureUsage";
 import { useCallback, useMemo } from "react";
 import { useDomEditActionsContext } from "../../contexts/DomEditContext";
 import { readHfId, type DomEditSelection } from "./domEditing";
@@ -156,8 +157,13 @@ export function useDomEditZOrder(): DomEditZOrder {
       // One serialized z→lane transaction: the mirror runs only AFTER a durable z commit and
       // no second gesture interleaves (see runZLaneGesture). A failed z commit has already
       // toasted and rolled back, so the catch only keeps its rejection from going unhandled.
+      let changed = false;
       runZLaneGesture({
-        commitZ: () => handleDomZIndexReorderCommit(entries, coalesceKey, action),
+        commitZ: async () => {
+          const result = await handleDomZIndexReorderCommit(entries, coalesceKey, action);
+          changed = result?.durable === true && result.changed;
+          return result;
+        },
         mirror: () =>
           mirrorZOrderToTimeline({
             selectionKey: entries.find((e) => e.element === sel.element)?.key,
@@ -166,7 +172,11 @@ export function useDomEditZOrder(): DomEditZOrder {
             sourceFile: sel.sourceFile,
             coalesceKey,
           }),
-      }).catch(() => undefined);
+      })
+        .then(() => {
+          if (changed) trackPreviewFeatureUsed("z_order", "button");
+        })
+        .catch(() => undefined);
       return true;
     },
     [activeCompPath, handleDomZIndexReorderCommit, mirrorZOrderToTimeline, readOnly],

package/src/components/nle/useTimelineEditCallbacks.test.tsx

@@ -409,6 +409,7 @@ describe("useTimelineEditCallbacks — flat tween keyframe lanes", () => {
     expect(mocks.actions.handleGsapRemoveAllKeyframes).toHaveBeenCalledWith(
       scaleAnimation.id,
       circleSelection,
+      false,
     );
     view.unmount();
   });

package/src/components/nle/useTimelineEditCallbacks.ts

@@ -1,4 +1,5 @@
 import type { TimelineEditOutcome } from "../../hooks/timelineEditPermission";
+import { trackKeyframeUsage } from "../../utils/keyframeUsage";
 import { useCallback, useMemo } from "react";
 import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
 import type { TimelineElement } from "../../player";
@@ -259,7 +260,12 @@ export function useTimelineEditCallbacks({
           if (!selection) return;
           // Serial: each removal rewrites the same source file, so dispatching
           // them together would have the later writes read a pre-edit document.
-          for (const anim of anims) await handleGsapRemoveAllKeyframes(anim.id, selection);
+          let changed = false;
+          for (const anim of anims) {
+            const result = await handleGsapRemoveAllKeyframes(anim.id, selection, false);
+            changed = result || changed;
+          }
+          if (changed) trackKeyframeUsage("remove_all");
         });
       },
       onDeleteKeyframe: (elId, keyframe) => {

package/src/components/sidebar/AssetContextMenu.tsx

@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
 import { filename } from "./assetHelpers";
+import { menuClasses } from "../ui/menuStyle";
 
 /** Reject names that would escape the asset directory or break paths. */
 function isValidAssetName(name: string): boolean {
@@ -94,8 +95,7 @@ export function ContextMenu({
     onClose();
   }, [renameDraft, asset, onRename, onClose]);
 
-  const itemCls =
-    "w-full text-left px-3 py-1.5 text-neutral-300 hover:bg-neutral-800 focus-visible:bg-neutral-800 outline-hidden active:bg-neutral-700/70 transition-colors";
+  const itemCls = `${menuClasses.row} ${menuClasses.rowEnabled} active:bg-neutral-700/70 transition-colors`;
 
   return (
     <div
@@ -110,7 +110,7 @@ export function ContextMenu({
         ref={menuRef}
         role="menu"
         aria-label={`Actions for ${filename(asset)}`}
-        className="absolute bg-neutral-900 border border-neutral-700 rounded-lg shadow-xl py-1 min-w-[160px] text-xs"
+        className={`${menuClasses.panel} absolute min-w-[160px] text-xs`}
         style={{ left: pos.x, top: pos.y }}
         onClick={(e) => e.stopPropagation()}
       >
@@ -147,7 +147,7 @@ export function ContextMenu({
               <button
                 role="menuitem"
                 onClick={() => setMode("confirm-delete")}
-                className={`${itemCls} text-danger-ink`}
+                className={`${menuClasses.row} ${menuClasses.rowDanger} active:bg-neutral-700/70 transition-colors`}
               >
                 Delete
               </button>

package/src/components/ui/menuStyle.test.ts

@@ -0,0 +1,61 @@
+import { readdirSync, readFileSync, statSync } from "node:fs";
+import { join, relative } from "node:path";
+import { describe, expect, it } from "vitest";
+import { menuClasses } from "./menuStyle";
+
+const spacing = /(^| )-?(p|py|pt|pb|m|my|mt|mb)-\d/;
+const root = join(__dirname, "../..");
+
+/** Panels that are not a column of rows: a dialog, a crop toolbar, a preset card and a bare speed list. */
+const NOT_ROW_MENUS = new Set([
+  "player/components/AudioGainDialog.tsx",
+  "components/editor/CropPresetBar.tsx",
+  "components/editor/EaseCurveSection.tsx",
+  "player/components/SpeedMenu.tsx",
+]);
+
+function sources(dir: string): string[] {
+  return readdirSync(dir).flatMap((name) => {
+    const path = join(dir, name);
+    if (statSync(path).isDirectory()) return sources(path);
+    return /\.tsx$/.test(name) && !/\.test\./.test(name) ? [path] : [];
+  });
+}
+
+const files = sources(root).map((path) => ({
+  name: relative(root, path).replaceAll("\\", "/"),
+  text: readFileSync(path, "utf8"),
+}));
+
+describe("menu style", () => {
+  it("adds no padding or margin around a menu's rows", () => {
+    for (const key of ["panel", "group", "divider"] as const)
+      expect(menuClasses[key], key).not.toMatch(spacing);
+  });
+
+  it("clips the panel to its own rounded corners, so a highlight never pokes out of them", () => {
+    expect(menuClasses.panel).toContain("overflow-hidden");
+    expect(menuClasses.panel).toMatch(/(^| )rounded-/);
+  });
+
+  it("is the only place a menu panel's fill, border and shadow are written", () => {
+    const handBuilt = files
+      .filter(({ name }) => !NOT_ROW_MENUS.has(name))
+      .filter(({ text }) =>
+        [...text.matchAll(/["'`]([^"'`]*)["'`]/g)].some(
+          ([, literal]) =>
+            /shadow-(lg|xl)/.test(literal!) && /bg-(neutral-900|panel-bg-2)\b/.test(literal!),
+        ),
+      )
+      .map(({ name }) => name);
+    expect(handBuilt).toEqual([]);
+  });
+
+  it("is the panel of every role=menu, wherever its element is written", () => {
+    const unowned = files
+      .filter(({ text }) => text.includes('role="menu"'))
+      .filter(({ name, text }) => !NOT_ROW_MENUS.has(name) && !text.includes("menuClasses.panel"))
+      .map(({ name }) => name);
+    expect(unowned).toEqual([]);
+  });
+});

package/src/components/ui/menuStyle.ts

@@ -0,0 +1,10 @@
+/** The one owner of context menu spacing: rows touch the panel, which clips to its rounded corners. */
+export const menuClasses = {
+  panel: "overflow-hidden rounded-md border border-neutral-700 bg-neutral-900 shadow-lg",
+  group: "empty:hidden border-b border-neutral-700/60",
+  divider: "border-t border-neutral-700/60",
+  row: "w-full px-3 py-1.5 text-left text-xs outline-hidden",
+  rowEnabled: "text-neutral-300 hover:bg-neutral-800 focus-visible:bg-neutral-800 cursor-pointer",
+  rowDanger: "text-danger-ink hover:bg-danger/25 focus-visible:bg-danger/25 cursor-pointer",
+  rowDisabled: "text-neutral-600 cursor-not-allowed",
+} as const;

package/src/contexts/DomEditContext.tsx

@@ -251,7 +251,7 @@ export function DomEditProvider({
   commitMutationRef.current = commitMutation;
 
   const stableCommitMutation = useCallback<DomEditActionsValue["commitMutation"]>(
-    (mutation, options) => commitMutationRef.current(mutation, options),
+    (mutation, options, selection) => commitMutationRef.current(mutation, options, selection),
     [],
   );
 

package/src/contexts/TimelineEditContext.tsx

@@ -46,6 +46,7 @@ const EDIT_CALLBACK_KEY_SET: Record<keyof TimelineEditCallbacks, true> = {
   onRazorSplit: true,
   onRazorSplitAll: true,
   onFreezeFrame: true,
+  clipMenuTools: true,
   onNotice: true,
   onDeleteKeyframe: true,
   onDeleteAllKeyframes: true,