@hyperframes/studio 0.8.114 → 0.8.116

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

@@ -289,6 +289,39 @@ describe("a drag moves only with its own pointer pressed", () => {
   );
 });
 
+describe("an outside change during a drag, on a preview that can swap scenes in place", () => {
+  it("leaves the dragged node in place and shows the change after the drop, loaded fresh", async () => {
+    const { live, overlay, box } = mountEditor(false);
+    const swapScenes = vi.fn((html: string) => {
+      live.contentDocument!.body.innerHTML = html.replace(/^[\s\S]*<body>|<\/body>[\s\S]*$/g, "");
+    });
+    Object.assign(live.contentWindow!, { __hfSwapScenes: swapScenes });
+    vi.stubGlobal(
+      "fetch",
+      async () => new Response(served("").contentDocument!.documentElement.outerHTML),
+    );
+    const dragged = byId(live, "title");
+    pointer(box, "pointerdown", 150, 150);
+    pointer(overlay, "pointermove", 190, 170);
+
+    act(() => api().refreshPlayer());
+    await settle();
+    expect(swapScenes, "swapped under the pointer").not.toHaveBeenCalled();
+    expect(byId(live, "title")).toBe(dragged);
+    const beforeDrop = await paintShadow(api, served("?_t=1"));
+    expect(api().iframeRef.current, "promoted under the pointer").toBe(live);
+
+    pointer(overlay, "pointerup", 190, 170);
+    await settle();
+    expect(file.title).toBe("translate: 40px 20px");
+    const fresh = served("?_t=2");
+    expect(await paintShadow(api, fresh)).toBeGreaterThan(beforeDrop);
+    expect(api().iframeRef.current).toBe(fresh);
+    expect(byId(fresh, "title").style.getPropertyValue("translate")).toBe("40px 20px");
+    vi.unstubAllGlobals();
+  });
+});
+
 type Editor = ReturnType<typeof mountEditor>;
 
 describe("every way a drag ends without a drop clears its mark and promotes the held reload", () => {

package/src/components/editor/manualEditingAvailability.ts

@@ -78,4 +78,12 @@ export const STUDIO_FLAT_INSPECTOR_ENABLED = resolveStudioBooleanEnvFlag(
   true,
 );
 
+// A host whose mounted API authenticates with same-origin cookies sets this; studioApiFetch then sends them, and its
+// requests share the preview media's sockets again.
+export const STUDIO_API_SAME_ORIGIN_CREDENTIALS = resolveStudioBooleanEnvFlag(
+  env,
+  ["VITE_STUDIO_API_SAME_ORIGIN_CREDENTIALS"],
+  false,
+);
+
 import { resolveEnabledSdkFamilies } from "../../utils/sdkCutoverPolicy";

package/src/components/editor/manualEdits.ts

@@ -10,6 +10,7 @@ export {
 } from "./manualEditsTypes";
 
 export {
+  mergeFileChangeAffectedCompositions,
   readFileChangeAffectedCompositions,
   readFileChangeAffectsPreview,
   readFileChangeField,

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/manualOffsetDrag.ts

@@ -146,12 +146,12 @@ function getRectCenter(element: HTMLElement): Point | null {
     return null;
   }
 
-  let point = {
-    x: rect.left + rect.width / 2,
-    y: rect.top + rect.height / 2,
-  };
+  const point = { x: rect.left + rect.width / 2, y: rect.top + rect.height / 2 };
+  return toTopScreenPoint(element.ownerDocument, point);
+}
 
-  let win: Window | null = element.ownerDocument.defaultView;
+export function toTopScreenPoint(doc: Document, point: Point): Point | null {
+  let win: Window | null = doc.defaultView;
   while (win) {
     const frameElement = getFrameElement(win);
     if (!frameElement) break;
@@ -166,7 +166,6 @@ function getRectCenter(element: HTMLElement): Point | null {
     };
     win = frameElement.ownerDocument.defaultView;
   }
-
   return point;
 }
 

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/motionPathSelection.test.ts

@@ -1,41 +1,16 @@
 // @vitest-environment jsdom
 import { afterEach, describe, expect, it } from "vitest";
-import type { DomEditSelection } from "./domEditingTypes";
-import { buildStableSelector, getSelectorIndex } from "./domEditingDom";
+import { mountGroupSiblings, stableSelectionFor } from "../../hooks/domSelectionTestHarness";
 import { selectorFor } from "./motionPathSelection";
 
 afterEach(() => {
   document.body.innerHTML = "";
 });
 
-function selectionFor(el: HTMLElement): DomEditSelection {
-  const selector = buildStableSelector(el);
-  return {
-    element: el,
-    id: el.id || undefined,
-    hfId: el.getAttribute("data-hf-id") || undefined,
-    selector,
-    selectorIndex: getSelectorIndex(document, el, selector, "index.html", null),
-    sourceFile: "index.html",
-    dataAttributes: { start: "0", duration: "2" },
-  } as unknown as DomEditSelection;
-}
-
-function mountGroupSiblings(): HTMLElement[] {
-  document.body.innerHTML = `
-    <div id="scene" class="clip" data-start="0" data-duration="2">
-      <div class="group"></div>
-      <div class="group"></div>
-      <div class="group"></div>
-    </div>
-  `;
-  return Array.from(document.querySelectorAll<HTMLElement>(".group"));
-}
-
 describe("selectorFor", () => {
   it("addresses one element for a class-only sibling", () => {
-    const groups = mountGroupSiblings();
-    const selector = selectorFor(selectionFor(groups[2]!));
+    const groups = mountGroupSiblings(3);
+    const selector = selectorFor(stableSelectionFor(groups[2]!));
 
     // The bare ".group" both measured home off the FIRST sibling and wrote the
     // new motion path onto all three.
@@ -48,7 +23,7 @@ describe("selectorFor", () => {
     document.body.innerHTML = `<div id="hero"></div>`;
     const el = document.querySelector<HTMLElement>("#hero")!;
 
-    expect(selectorFor(selectionFor(el))).toBe("#hero");
+    expect(selectorFor(stableSelectionFor(el))).toBe("#hero");
   });
 
   it("returns null with no selection", () => {
@@ -56,8 +31,8 @@ describe("selectorFor", () => {
   });
 
   it("returns null when no rung addresses one element", () => {
-    const groups = mountGroupSiblings();
-    const selection = selectionFor(groups[1]!);
+    const groups = mountGroupSiblings(3);
+    const selection = stableSelectionFor(groups[1]!);
     groups[1]!.remove();
 
     expect(selectorFor(selection)).toBeNull();

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,54 @@
 import { buildProjectApiPath } from "../../utils/projectRouting";
+import { studioApiFetch } from "../../utils/studioApiFetch";
 
-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(
+    const response = await studioApiFetch(
       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 });
+  });
 }