@hyperframes/studio 0.8.113 → 0.8.115

package/src/components/editor/manualEditsParsing.ts

@@ -43,3 +43,10 @@ export function readFileChangeAffectedCompositions(payload: unknown): readonly s
   if (!Array.isArray(value) || !value.every((path) => typeof path === "string")) return null;
   return value.map(normalizeStudioFileChangePath);
 }
+
+export function mergeFileChangeAffectedCompositions(waiting: unknown, incoming: unknown): unknown {
+  const before = readFileChangeAffectedCompositions(waiting);
+  const after = readFileChangeAffectedCompositions(incoming);
+  const merged = before && after ? [...new Set([...before, ...after])] : null;
+  return { ...asPayloadRecord(incoming), affectedCompositions: merged };
+}

package/src/components/editor/manualEditsSeekReapply.ts

@@ -12,7 +12,7 @@ import {
 import { applyStudioBoxSize, applyStudioPathOffset, applyStudioRotation } from "./manualEditsDom";
 import { applyStudioMotionFromDom } from "./studioMotion";
 import { STUDIO_MOTION_ATTR, STUDIO_MOTION_TIMELINE_ID } from "./studioMotionTypes";
-import { gsapAnimatesProperty } from "./gsapAnimatesProperty";
+import { gsapWritesChannels } from "../../hooks/gsapRuntimeKeyframes";
 
 function queryStudioElements(doc: Document, attr: string): HTMLElement[] {
   const ctor = doc.defaultView?.HTMLElement;
@@ -35,7 +35,7 @@ function queryStudioElements(doc: Document, attr: string): HTMLElement[] {
 function reapplyPathOffsets(doc: Document): void {
   for (const el of queryStudioElements(doc, STUDIO_PATH_OFFSET_ATTR)) {
     // Unlike size below, the offset channels add up: applying both doubles the move.
-    if (gsapAnimatesProperty(el, "x", "y")) continue;
+    if (gsapWritesChannels(el, ["x", "y"])) continue;
     const x = el.style.getPropertyValue(STUDIO_OFFSET_X_PROP);
     const y = el.style.getPropertyValue(STUDIO_OFFSET_Y_PROP);
     if (!x && !y) continue;

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

@@ -1,10 +1,14 @@
 // @vitest-environment happy-dom
-import { act, useRef } from "react";
+import { act, useRef, type RefObject } from "react";
 import type { Root } from "react-dom/client";
 import { afterEach, beforeEach, expect, it, vi } from "vitest";
 import { installReactActEnvironment, mountReactHarness } from "../../hooks/domSelectionTestHarness";
+import { trackStudioEvent } from "../../utils/studioTelemetry";
+import type { DomSelectionResult } from "../../hooks/useDomSelectionTypes";
 import { useMarqueeGestures } from "./marqueeCommit";
 
+vi.mock("../../utils/studioTelemetry", () => ({ trackStudioEvent: vi.fn() }));
+
 // Layout stands in for a real preview: every element is visible and sits at the band's start.
 vi.mock("./domEditingElement", async (importOriginal) => ({
   ...(await importOriginal<typeof import("./domEditingElement")>()),
@@ -40,9 +44,53 @@ function Overlay() {
   );
 }
 
-const pointer = (type: string, clientX: number, clientY: number) =>
+function MarqueeSurface({
+  overlayRef,
+  marquee,
+}: {
+  overlayRef: RefObject<HTMLDivElement | null>;
+  marquee: ReturnType<typeof useMarqueeGestures>;
+}) {
+  return (
+    <div
+      ref={overlayRef}
+      data-band-overlay
+      onPointerDown={marquee.begin}
+      onPointerMove={marquee.onPointerMove}
+      onPointerUp={marquee.onPointerUp}
+    />
+  );
+}
+
+function TestMarquee({
+  iframeRef,
+  onSelect,
+  resolveHits,
+}: {
+  iframeRef: RefObject<HTMLIFrameElement | null>;
+  onSelect: (selections: HTMLElement[], additive: boolean) => DomSelectionResult | void;
+  resolveHits: (elements: HTMLElement[]) => HTMLElement[] | Promise<HTMLElement[]>;
+}) {
+  const overlayRef = useRef<HTMLDivElement>(null);
+  const marquee = useMarqueeGestures({
+    iframeRef,
+    overlayRef,
+    activeCompositionPathRef: useRef<string | null>("index.html"),
+    onMarqueeSelectRef: { current: onSelect },
+    resolveHits,
+  });
+  return <MarqueeSurface overlayRef={overlayRef} marquee={marquee} />;
+}
+
+const pointer = (
+  type: string,
+  clientX: number,
+  clientY: number,
+  selector = "[data-overlay]",
+  shiftKey = false,
+) =>
   act(() => {
-    document.querySelector("[data-overlay]")!.dispatchEvent(
+    document.querySelector(selector)!.dispatchEvent(
       new PointerEvent(type, {
         bubbles: true,
         buttons: type === "pointerup" ? 0 : 1,
@@ -50,6 +98,7 @@ const pointer = (type: string, clientX: number, clientY: number) =>
         pointerId: 1,
         clientX,
         clientY,
+        shiftKey,
       }),
     );
   });
@@ -68,6 +117,7 @@ const hostListener = (e: KeyboardEvent) => {
 };
 
 beforeEach(() => {
+  vi.clearAllMocks();
   hostEscapes = [];
   window.addEventListener("keydown", hostListener);
   root = mountReactHarness(<Overlay />);
@@ -128,42 +178,17 @@ it("a reload promoted mid-band selects from the preview on screen, not the retir
   const [retired, live] = [preview(), preview()];
   const picked: HTMLElement[][] = [];
   const iframeRef = { current: retired as HTMLIFrameElement | null };
-  function Band() {
-    const overlayRef = useRef<HTMLDivElement>(null);
-    const marquee = useMarqueeGestures({
-      iframeRef,
-      overlayRef,
-      activeCompositionPathRef: useRef<string | null>("index.html"),
-      onMarqueeSelectRef: useRef(() => undefined),
-      resolveHits: async (elements: HTMLElement[]) => {
+  const band = mountReactHarness(
+    <TestMarquee
+      iframeRef={iframeRef}
+      onSelect={() => undefined}
+      resolveHits={async (elements) => {
         picked.push(elements);
         return [];
-      },
-    });
-    return (
-      <div
-        ref={overlayRef}
-        data-band-overlay
-        onPointerDown={marquee.begin}
-        onPointerMove={marquee.onPointerMove}
-        onPointerUp={marquee.onPointerUp}
-      />
-    );
-  }
-  const band = mountReactHarness(<Band />);
-  const fire = (type: string, x: number, y: number) =>
-    act(() => {
-      document.querySelector("[data-band-overlay]")!.dispatchEvent(
-        new PointerEvent(type, {
-          bubbles: true,
-          button: 0,
-          buttons: type === "pointerup" ? 0 : 1,
-          pointerId: 1,
-          clientX: x,
-          clientY: y,
-        }),
-      );
-    });
+      }}
+    />,
+  );
+  const fire = (type: string, x: number, y: number) => pointer(type, x, y, "[data-band-overlay]");
   try {
     fire("pointerdown", 0, 0);
     fire("pointermove", 120, 90);
@@ -175,3 +200,47 @@ it("a reload promoted mid-band selects from the preview on screen, not the retir
     act(() => band.unmount());
   }
 });
+
+it.each([
+  [2, false, 2, 0],
+  [1, true, 2, 1],
+  [2, true, 2, 1],
+  [1, true, 1, 0],
+])(
+  "counts marquee receipt: %s hits, changed=%s, group=%s",
+  async (hits, changed, count, events) => {
+    const iframe = document.createElement("iframe");
+    const doc = document.implementation.createHTMLDocument("preview");
+    doc.body.innerHTML =
+      '<div data-composition-id="main"><h1 id="title">Title</h1><p id="subtitle">Subtitle</p></div>';
+    Object.defineProperty(iframe, "contentDocument", { value: doc });
+    const apply = vi.fn((_selections: HTMLElement[], _additive: boolean) => ({ changed, count }));
+    const band = mountReactHarness(
+      <TestMarquee
+        iframeRef={{ current: iframe }}
+        onSelect={apply}
+        resolveHits={(elements) => elements.slice(0, hits)}
+      />,
+    );
+    const fire = (type: string, x: number, y: number) =>
+      pointer(type, x, y, "[data-band-overlay]", true);
+    try {
+      fire("pointerdown", 0, 0);
+      fire("pointermove", 120, 90);
+      await act(async () => {
+        fire("pointerup", 120, 90);
+      });
+      expect(apply).toHaveBeenCalledTimes(1);
+      expect(apply.mock.calls[0]![0]).toHaveLength(hits);
+      expect(trackStudioEvent).toHaveBeenCalledTimes(events);
+      if (events)
+        expect(trackStudioEvent).toHaveBeenCalledWith("feature_used", {
+          feature: "multi_select",
+          surface: "preview",
+          method: "drag",
+        });
+    } finally {
+      act(() => band.unmount());
+    }
+  },
+);

package/src/components/editor/marqueeCommit.ts

@@ -1,3 +1,5 @@
+import type { DomSelectionResult } from "../../hooks/useDomSelectionTypes";
+import { trackPreviewFeatureUsed } from "../../utils/previewFeatureUsage";
 // fallow-ignore-file code-duplication
 import { useCallback, useEffect, useRef, useState } from "react";
 import type { DomEditSelection } from "./domEditing";
@@ -18,6 +20,16 @@ interface MarqueeState {
   target: Element;
 }
 
+function currentMarqueeCandidates(
+  cached: MarqueeHit[] | null,
+  iframe: HTMLIFrameElement,
+  overlay: HTMLDivElement,
+  path: string,
+): MarqueeHit[] {
+  if (cached?.every((hit) => hit.element.ownerDocument === iframe.contentDocument)) return cached;
+  return collectMarqueeCandidates(iframe, overlay, path);
+}
+
 const MARQUEE_THRESHOLD_PX = 4;
 
 interface MarqueeHit {
@@ -103,7 +115,9 @@ export interface MarqueeGesturesDeps<T = DomEditSelection> {
   iframeRef: React.RefObject<HTMLIFrameElement | null>;
   overlayRef: React.RefObject<HTMLDivElement | null>;
   activeCompositionPathRef: React.RefObject<string | null>;
-  onMarqueeSelectRef: React.RefObject<((selections: T[], additive: boolean) => void) | undefined>;
+  onMarqueeSelectRef: React.RefObject<
+    ((selections: T[], additive: boolean) => DomSelectionResult | void) | undefined
+  >;
   /** Turns the elements a drag touched into picks; without it, Studio's edit selections. */
   resolveHits?: (elements: HTMLElement[]) => T[] | Promise<T[]>;
   selectionRef?: React.RefObject<DomEditSelection | null>;
@@ -127,6 +141,10 @@ export interface MarqueeGestures {
   onPointerCancel: () => void;
 }
 
+function trackMarqueeSelection(result: DomSelectionResult | void): void {
+  if (result?.changed && result.count > 1) trackPreviewFeatureUsed("multi_select", "drag");
+}
+
 function releaseCapture(m: MarqueeState): void {
   try {
     m.target.releasePointerCapture(m.pointerId);
@@ -160,18 +178,16 @@ export function useMarqueeGestures<T>(deps: MarqueeGesturesDeps<T>): MarqueeGest
       const overlay = deps.overlayRef.current;
       if (!iframe || !overlay || !deps.onMarqueeSelectRef.current) return;
       const acp = deps.activeCompositionPathRef.current ?? "index.html";
-      const cached = candidatesRef.current;
-      const measuredOnScreen = cached?.every(
-        (hit) => hit.element.ownerDocument === iframe.contentDocument,
-      );
-      const candidates =
-        cached && measuredOnScreen ? cached : collectMarqueeCandidates(iframe, overlay, acp);
+      const candidates = currentMarqueeCandidates(candidatesRef.current, iframe, overlay, acp);
       const elements = hitsWithin(rect, candidates).map((hit) => hit.element);
       const resolveHits = deps.resolveHits;
       const picks = resolveHits
         ? await resolveHits(elements)
         : ((await resolveDomEditSelections(elements, acp)) as T[]);
-      deps.onMarqueeSelectRef.current?.(picks, additive);
+      const applySelection = deps.onMarqueeSelectRef.current;
+      if (!applySelection) return;
+      const result = applySelection(picks, additive);
+      trackMarqueeSelection(result);
     },
     [
       deps.iframeRef,

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

@@ -1,5 +1,5 @@
 // @vitest-environment jsdom
-import { describe, it, expect, vi } from "vitest";
+import { beforeEach, describe, it, expect, vi } from "vitest";
 import type { GsapAnimation } from "@hyperframes/parsers/gsap-parser";
 import { editableAnimationId } from "./motionPathSelection";
 import {
@@ -148,3 +148,31 @@ describe("commitCreatePath", () => {
     );
   });
 });
+
+vi.mock("../../utils/studioTelemetry", () => ({ trackStudioEvent: vi.fn() }));
+import { trackStudioEvent } from "../../utils/studioTelemetry";
+import type { CommitFn } from "./motionPathCommit";
+beforeEach(() => vi.clearAllMocks());
+describe("motion path usage at the writer", () => {
+  it("counts a changed drag once without coordinates or target ids", async () => {
+    const commit: CommitFn = async (_mutation, options) => {
+      options.onResult?.({ ok: true, changed: true });
+    };
+    await commitNode({ type: "keyframe", pct: 50 }, 120, 30, "private-target", commit);
+    expect(trackStudioEvent).toHaveBeenCalledExactlyOnceWith("feature_used", {
+      feature: "motion_path",
+      surface: "preview",
+      method: "drag",
+    });
+  });
+  it.each([undefined, { ok: true }, { ok: true, changed: false }, { ok: false, changed: true }])(
+    "does not count absent or unsuccessful results (%j)",
+    async (result) => {
+      const commit: CommitFn = async (_mutation, options) => {
+        if (result) options.onResult?.(result);
+      };
+      await commitAddWaypoint("private-target", 1, 20, 40, commit);
+      expect(trackStudioEvent).not.toHaveBeenCalled();
+    },
+  );
+});

package/src/components/editor/motionPathCommit.ts

@@ -1,3 +1,5 @@
+import type { CommitMutationOptions } from "../../hooks/gsapScriptCommitTypes";
+import { trackPreviewFeatureUsed, type PreviewMethod } from "../../utils/previewFeatureUsage";
 /**
  * Commit helpers for the motion-path overlay. Each maps a canvas gesture to a
  * GSAP source mutation routed through the (selection-bound) commit facade, which
@@ -7,11 +9,21 @@ import type { MotionNodeRef } from "./motionPathGeometry";
 
 export type CommitFn = (
   mutation: Record<string, unknown>,
-  options: { label: string; softReload?: boolean },
+  options: CommitMutationOptions,
 ) => Promise<void>;
 
 const NEW_PATH_DURATION = 1.5;
 
+function motionPathCommitOptions(label: string, method: PreviewMethod): CommitMutationOptions {
+  return {
+    label,
+    softReload: true,
+    onResult: (result) => {
+      if (result.ok && result.changed === true) trackPreviewFeatureUsed("motion_path", method);
+    },
+  };
+}
+
 export function commitNode(
   ref: MotionNodeRef,
   x: number,
@@ -23,10 +35,10 @@ export function commitNode(
     ref.type === "keyframe"
       ? { type: "update-keyframe", animationId, percentage: ref.pct, properties: { x, y } }
       : { type: "update-motion-path-point", animationId, pointIndex: ref.index, x, y };
-  return commit(mutation, {
-    label: ref.type === "keyframe" ? "Move keyframe" : "Move waypoint",
-    softReload: true,
-  });
+  return commit(
+    mutation,
+    motionPathCommitOptions(ref.type === "keyframe" ? "Move keyframe" : "Move waypoint", "drag"),
+  );
 }
 
 export function commitAddWaypoint(
@@ -38,7 +50,7 @@ export function commitAddWaypoint(
 ): Promise<void> {
   return commit(
     { type: "add-motion-path-point", animationId, index, x, y },
-    { label: "Add waypoint", softReload: true },
+    motionPathCommitOptions("Add waypoint", "button"),
   );
 }
 
@@ -54,7 +66,7 @@ export function commitAddKeyframe(
   // at that pct) and converts a flat tween to keyframes form when needed.
   return commit(
     { type: "add-keyframe", animationId, percentage, properties: { x, y } },
-    { label: "Add keyframe", softReload: true },
+    motionPathCommitOptions("Add keyframe", "button"),
   );
 }
 
@@ -65,7 +77,7 @@ export function commitRemoveWaypoint(
 ): Promise<void> {
   return commit(
     { type: "remove-motion-path-point", animationId, index },
-    { label: "Remove waypoint", softReload: true },
+    motionPathCommitOptions("Remove waypoint", "button"),
   );
 }
 
@@ -78,6 +90,6 @@ export function commitCreatePath(
 ): Promise<void> {
   return commit(
     { type: "add-motion-path", targetSelector, position, duration: NEW_PATH_DURATION, x, y },
-    { label: "Create motion path", softReload: true },
+    motionPathCommitOptions("Create motion path", "button"),
   );
 }

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

@@ -0,0 +1,45 @@
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { probeSourceElement } from "./probeSourceElement";
+
+afterEach(() => vi.unstubAllGlobals());
+
+const answer = (body: unknown, ok = true) =>
+  vi.fn(() => Promise.resolve({ ok, json: () => Promise.resolve(body) }));
+
+describe("probeSourceElement", () => {
+  it("sends the asks for one file in one tick as a single request", async () => {
+    const fetchMock = answer({ exists: [true, false, true] });
+    vi.stubGlobal("fetch", fetchMock);
+
+    const results = await Promise.all([
+      probeSourceElement("p", "index.html", { id: "a" }),
+      probeSourceElement("p", "index.html", { id: "b" }),
+      probeSourceElement("p", "index.html", { id: "c" }),
+    ]);
+
+    expect(results).toEqual([true, false, true]);
+    expect(fetchMock).toHaveBeenCalledOnce();
+    const [, init] = fetchMock.mock.calls[0] as unknown as [string, RequestInit];
+    expect(JSON.parse(String(init.body)).targets).toEqual([{ id: "a" }, { id: "b" }, { id: "c" }]);
+  });
+
+  it("keeps one request per file", async () => {
+    const fetchMock = answer({ exists: [true] });
+    vi.stubGlobal("fetch", fetchMock);
+    await Promise.all([
+      probeSourceElement("p", "index.html", { id: "a" }),
+      probeSourceElement("p", "compositions/x.html", { id: "a" }),
+    ]);
+    expect(fetchMock).toHaveBeenCalledTimes(2);
+  });
+
+  it("reads a failed or malformed answer as existing", async () => {
+    vi.stubGlobal("fetch", answer({}, false));
+    expect(await probeSourceElement("p", "index.html", { id: "a" })).toBe(true);
+    vi.stubGlobal(
+      "fetch",
+      vi.fn(() => Promise.reject(new Error("offline"))),
+    );
+    expect(await probeSourceElement("p", "index.html", { id: "a" })).toBe(true);
+  });
+});

package/src/components/editor/probeSourceElement.ts

@@ -1,29 +1,53 @@
 import { buildProjectApiPath } from "../../utils/projectRouting";
 
-export async function probeSourceElement(
-  projectId: string,
-  sourceFile: string,
-  target: { id?: string; hfId?: string; selector?: string; selectorIndex?: number },
-): Promise<boolean> {
+type ProbeTarget = { id?: string; hfId?: string; selector?: string; selectorIndex?: number };
+
+interface PendingProbe {
+  target: ProbeTarget;
+  resolve: (exists: boolean) => void;
+}
+
+const pending = new Map<string, PendingProbe[]>();
+
+async function sendBatch(projectId: string, sourceFile: string, probes: PendingProbe[]) {
+  let exists: boolean[] = [];
   try {
     const response = await fetch(
       buildProjectApiPath(
         projectId,
-        `/file-mutations/probe-element/${encodeURIComponent(sourceFile)}`,
+        `/file-mutations/probe-elements/${encodeURIComponent(sourceFile)}`,
       ),
       {
         method: "POST",
         headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ target }),
+        body: JSON.stringify({ targets: probes.map((probe) => probe.target) }),
       },
     );
-    if (!response.ok) return true;
-    const data = await response.json();
-    if (data && typeof data === "object" && "exists" in data && data.exists === false) {
-      return false;
+    if (response.ok) {
+      const data = await response.json();
+      if (Array.isArray(data?.exists)) exists = data.exists;
+    }
+  } catch {}
+  probes.forEach((probe, index) => probe.resolve(exists[index] !== false));
+}
+
+export function probeSourceElement(
+  projectId: string,
+  sourceFile: string,
+  target: ProbeTarget,
+): Promise<boolean> {
+  return new Promise((resolve) => {
+    const key = `${projectId}\0${sourceFile}`;
+    let probes = pending.get(key);
+    if (!probes) {
+      const batch: PendingProbe[] = [];
+      probes = batch;
+      pending.set(key, batch);
+      setTimeout(() => {
+        pending.delete(key);
+        void sendBatch(projectId, sourceFile, batch);
+      }, 0);
     }
-    return true;
-  } catch {
-    return true;
-  }
+    probes.push({ target, resolve });
+  });
 }

package/src/components/editor/propertyPanelColor.tsx

@@ -193,7 +193,7 @@ export function ColorField({
   const resolveColorGestureValue = useCallback((nextValue: string) => {
     const source = nextValue.startsWith("#") ? "hex" : "picker";
     // Only a COMPLETE hex resolves, so a half-typed one neither previews nor
-    // commits. Both lengths parseCssColor accepts count as complete: gating on
+    // commits. 3 and 6 digits count as complete (the field edits RGB only): gating on
     // 6 alone silently dropped #F00 and friends, which the old onBlur committed.
     if (source === "hex" && !/^#([0-9a-f]{3}|[0-9a-f]{6})$/i.test(nextValue)) return null;
     const nextColor = parseCssColor(nextValue);

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>