@hyperframes/studio 0.8.114 → 0.8.115

package/src/components/editor/propertyPanelFlatTextSection.tsx

@@ -1,3 +1,4 @@
+import type { PropertyPanelProps } from "./propertyPanelTypes";
 import { useEffect, useState } from "react";
 import { useTrackDesignInput } from "../../contexts/DesignPanelInputContext";
 import { Plus, X } from "../../icons/SystemIcons";
@@ -246,13 +247,15 @@ export function FlatTextSection({
   element: DomEditSelection;
   styles: Record<string, string>;
   fontAssets: ImportedFontAsset[];
-  onImportFonts?: (files: FileList | File[]) => Promise<ImportedFontAsset[]>;
-  onSetText: (value: string, fieldKey?: string) => void;
-  onSetTextFieldStyle: (fieldKey: string, property: string, value: string) => void;
-  onPreviewTextFieldStyle?: (fieldKey: string, property: string, value: string) => void;
-  onAddTextField: (afterFieldKey?: string) => string | Promise<string | null> | null;
-  onRemoveTextField: (fieldKey: string) => void;
-}) {
+} & Pick<
+  PropertyPanelProps,
+  | "onImportFonts"
+  | "onSetText"
+  | "onSetTextFieldStyle"
+  | "onPreviewTextFieldStyle"
+  | "onAddTextField"
+  | "onRemoveTextField"
+>) {
   const track = useTrackDesignInput();
   const [activeFieldKey, setActiveFieldKey] = useState<string | null>(
     element.textFields[0]?.key ?? null,

package/src/components/editor/propertyPanelFxAddMenu.tsx

@@ -1,3 +1,4 @@
+import { useTrackDesignInput } from "../../contexts/DesignPanelInputContext";
 /**
  * The add-effect shelf: Tone, the composite jobs, and the raw registry.
  *
@@ -81,6 +82,7 @@ export function FxAddMenu({
   withJob,
   withEffect,
 }: FxAddMenuProps) {
+  const trackInput = useTrackDesignInput();
   return (
     <div
       className="hf-fx-add-menu space-y-1.5 rounded-[4px] border border-panel-border-input p-1.5"
@@ -108,8 +110,15 @@ export function FxAddMenu({
             title="Listen to this track and even out its loud and quiet parts."
             disabled={disabled || analysing}
             onClick={() => {
-              if (levelled) onRemoveLevel?.();
-              else onLevel();
+              if (levelled) {
+                if (onRemoveLevel) {
+                  onRemoveLevel();
+                  trackInput("button", "remove-levelling");
+                }
+              } else {
+                onLevel();
+                trackInput("button", "add-levelling");
+              }
               onClose();
             }}
             // The one module here that cannot answer instantly: it has to

package/src/components/editor/propertyPanelFxCarveModule.tsx

@@ -1,3 +1,4 @@
+import { useTrackDesignInput } from "../../contexts/DesignPanelInputContext";
 /**
  * The voiceover carve, as one module in the FX rack.
  *
@@ -165,6 +166,7 @@ export function FxCarveModule({
   onCarvePreview(carve: HfCarveSettings): void;
 }) {
   const on = carve.enabled;
+  const trackInput = useTrackDesignInput();
   const soleVoice = soleCarveVoice(sourceOptions, carve.sources);
   const summary = carveSummary({ nodes, carve, analysing });
   // The carve's own colour, used three ways: the module's left edge, the title,
@@ -215,7 +217,10 @@ export function FxCarveModule({
           aria-pressed={on}
           title={on ? "Switch the carve off" : "Switch the carve on"}
           disabled={disabled}
-          onClick={() => onCarveChange({ ...carve, enabled: !on })}
+          onClick={() => {
+            onCarveChange({ ...carve, enabled: !on });
+            trackInput("toggle", "carve-enabled");
+          }}
         >
           {on ? "On" : "Off"}
         </button>
@@ -250,7 +255,10 @@ export function FxCarveModule({
               value={carve.strength}
               disabled={disabled || carve.sources.length === 0}
               onChange={(_k, v) => onCarvePreview({ ...carve, strength: Number(v) })}
-              onCommit={(_k, v) => onCarveChange({ ...carve, strength: Number(v) })}
+              onCommit={(_k, v) => {
+                onCarveChange({ ...carve, strength: Number(v) });
+                trackInput("slider", "carve-strength");
+              }}
             />
           </div>
           {/* What the analysis made of all that. Divided rather than boxed: these
@@ -334,6 +342,7 @@ function CarveSourceRow({
   disabled?: boolean;
   onCarveChange(carve: HfCarveSettings): void;
 }) {
+  const trackInput = useTrackDesignInput();
   return (
     <div className="hf-fx-row flex min-h-6 items-center gap-2">
       {/* Wraps like every other name in this column (see FxParamRow) — one
@@ -366,14 +375,15 @@ function CarveSourceRow({
                 data-carve-source={o.id}
                 checked={carve.sources.includes(o.id)}
                 disabled={disabled}
-                onChange={(e) =>
+                onChange={(e) => {
                   onCarveChange({
                     ...carve,
                     sources: e.target.checked
                       ? [...carve.sources, o.id]
                       : carve.sources.filter((id) => id !== o.id),
-                  })
-                }
+                  });
+                  trackInput("toggle", "carve-source");
+                }}
               />
               <span className="truncate">{o.label}</span>
             </label>

package/src/components/editor/propertyPanelFxNodeOpenBody.tsx

@@ -1,3 +1,4 @@
+import { useTrackDesignInput } from "../../contexts/DesignPanelInputContext";
 /**
  * An effect row's open face: the derived or primary one-knob control, and
  * Details underneath it.
@@ -54,6 +55,7 @@ function FxNodeDerivedKnob({
   onUpdate(index: number, patch: Partial<HfAudioFxNode>): void;
   trackKind?: string;
 }) {
+  const trackInput = useTrackDesignInput();
   if (!derived) return null;
   return (
     <>
@@ -66,6 +68,7 @@ function FxNodeDerivedKnob({
           onCommit={(_k, v) => {
             trackProfileCommitted(node.type, Number(v), { trackKind });
             onUpdate(index, { params: applyAudioFxProfile(node.type, Number(v), params) });
+            trackInput("slider", "profile-strength");
           }}
         />
       </div>

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/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) => {