@hyperframes/studio 0.8.114 → 0.8.115

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

@@ -1,6 +1,8 @@
 // @vitest-environment happy-dom
 
 import { afterEach, describe, expect, it, vi } from "vitest";
+import { trackStudioEvent } from "../../utils/studioTelemetry";
+vi.mock("../../utils/studioTelemetry", () => ({ trackStudioEvent: vi.fn() }));
 import { DomEditSaveQueueOpenError } from "../../utils/domEditSaveQueue";
 import type { DomEditSelection } from "./domEditing";
 import type { GestureState, UseDomEditOverlayGesturesOptions } from "./domEditOverlayGestures";
@@ -178,7 +180,7 @@ function buildHarness(
   };
 
   const handlers = createDomEditOverlayGestureHandlers(opts);
-  return { handlers, commits, selection };
+  return { handlers, commits, selection, opts };
 }
 
 type OverlayRectLike = {
@@ -287,3 +289,48 @@ describe("anchored corner resize — the release commit feeds the center-pin off
     expect(consoleError).toHaveBeenCalledWith("resize commit failed", failure);
   });
 });
+
+describe("resize usage at pointer release", () => {
+  it("counts one completed resize despite multiple pointer moves", async () => {
+    vi.mocked(trackStudioEvent).mockClear();
+    const h = buildHarness(async () => ({ ok: true, changed: true }));
+    await finishResize(h.handlers);
+    expect(trackStudioEvent).toHaveBeenCalledExactlyOnceWith("feature_used", {
+      feature: "resize",
+      surface: "preview",
+      method: "drag",
+    });
+  });
+  it.each([undefined, { ok: true as const, changed: false }])(
+    "does not count an unchanged or unconfirmed resize",
+    async (result) => {
+      vi.mocked(trackStudioEvent).mockClear();
+      const h = buildHarness(async () => result);
+      await finishResize(h.handlers);
+      expect(trackStudioEvent).not.toHaveBeenCalled();
+    },
+  );
+});
+
+describe("move and rotation usage", () => {
+  it.each(["drag", "rotate"] as const)("counts %s once after pointer release", async (kind) => {
+    vi.mocked(trackStudioEvent).mockClear();
+    const h = buildHarness();
+    h.selection.capabilities.canApplyManualRotation = true;
+    const saved = vi.fn(async () => ({ ok: true as const, changed: true }));
+    h.opts.onPathOffsetCommitRef.current = saved;
+    h.opts.onRotationCommitRef.current = saved;
+    h.handlers.startGesture(kind, evt(200, 50));
+    h.handlers.onPointerMove(evt(150, 120));
+    h.handlers.onPointerMove(evt(100, 150));
+    expect(trackStudioEvent).not.toHaveBeenCalled();
+    h.handlers.onPointerUp(evt(100, 150));
+    await Promise.resolve();
+    expect(saved).toHaveBeenCalledTimes(1);
+    expect(trackStudioEvent).toHaveBeenCalledExactlyOnceWith("feature_used", {
+      feature: kind === "drag" ? "move" : "rotate",
+      surface: "preview",
+      method: "drag",
+    });
+  });
+});

package/src/components/editor/audioFxTelemetry.ts

@@ -10,9 +10,8 @@
  * filenames, not composition paths, not chain JSON. Every property below is
  * either a fixed identifier from our own catalogue (a preset id, an effect
  * type, a parameter key), a number, or a boolean. `studioTelemetry.ts` already
- * strips the query string off `url_hash` for exactly this reason — the ids in
- * it are the author's own. The rack sees the same class of data and must hold
- * the same line.
+ * sends only a route kind in `url_hash` for the same reason. The rack sees
+ * the same class of data and must hold the same line.
  *
  * The second rule is about volume: **commit, not preview.** Every control in
  * the rack has a preview path that fires continuously while a slider moves and

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

@@ -287,7 +287,7 @@ describe("handles follow what Studio would commit", () => {
       { x: 0, y: 0 },
       commitList,
       preview,
-      vi.fn(),
+      vi.fn(async () => undefined),
       undefined,
       preflightOnly,
     );
@@ -401,7 +401,7 @@ describe("handles follow what Studio would commit", () => {
       { x: 0, y: 0 },
       [stagger],
       preview,
-      vi.fn(),
+      vi.fn(async () => undefined),
       undefined,
       groupPreflight,
     );

package/src/components/editor/cropResize.ts

@@ -1,3 +1,4 @@
+import type { DomEditPersistOutcome } from "../../hooks/domEditCommitTypes";
 import type { PatchOperation } from "../../utils/sourcePatcher";
 import type { CommitMutation } from "../../hooks/gsapScriptCommitTypes";
 import type { DomEditSelection } from "./domEditingTypes";
@@ -94,7 +95,7 @@ type PatchCommit = (
   selection: DomEditSelection,
   patches: PatchOperation[],
   options: { label: string; coalesceKey: string; coalesceMs?: number },
-) => Promise<void>;
+) => Promise<DomEditPersistOutcome | undefined>;
 
 /** Stage the crop and save it under the resize's undo key, taking it back off the element if that fails. */
 export async function saveCropResize(
@@ -102,11 +103,11 @@ export async function saveCropResize(
   selection: DomEditSelection,
   commit: PatchCommit,
   coalesceKey: string,
-): Promise<void> {
+): Promise<DomEditPersistOutcome | undefined> {
   const crop = stage();
   if (!crop) return;
   try {
-    await commit(selection, [crop.patch], {
+    return await commit(selection, [crop.patch], {
       label: "Resize layer",
       coalesceKey,
       coalesceMs: Number.POSITIVE_INFINITY,

package/src/components/editor/domEditingDom.ts

@@ -30,6 +30,10 @@ export function isTextBearingTag(tagName: string): boolean {
   return ["div", "span", "p", "strong", "h1", "h2", "h3", "h4", "h5", "h6"].includes(tagName);
 }
 
+export function isEditableTextLeaf(el: HTMLElement): boolean {
+  return isTextBearingTag(el.tagName.toLowerCase()) && el.children.length === 0;
+}
+
 /** Does this node render AT ALL, ignoring what it inherits? Sole owner of the
  *  rule; the walk below only decides which nodes to ask it about. */
 function elementRendersItself(win: Window, el: HTMLElement): boolean {

package/src/components/editor/domEditingLayers.ts

@@ -23,8 +23,8 @@ import {
   getInlineStyles,
   getSelectorIndex,
   getSourceFileForElement,
+  isEditableTextLeaf,
   isHtmlElement,
-  isTextBearingTag,
 } from "./domEditingDom";
 import {
   findElementForSelection,
@@ -35,10 +35,6 @@ import { isCompositionRootLayer } from "./domEditingRootLayer";
 import { withSelectorIndexPass } from "../../utils/sourceScopedSelectorIndex";
 import { type DomEditLayerWalkCache, readDomEditLayerWalkEntry } from "./domEditLayerWalkCache";
 
-export function isEditableTextLeaf(el: HTMLElement): boolean {
-  return isTextBearingTag(el.tagName.toLowerCase()) && el.children.length === 0;
-}
-
 function sameTagChildIndex(el: HTMLElement): number {
   let index = 0;
   let sibling = el.previousElementSibling;

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/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 });
+  });
 }