@hyperframes/studio 0.7.28 → 0.7.30

package/src/utils/sdkResolverShadow.test.ts

@@ -1,10 +1,14 @@
-import { describe, expect, it, vi, beforeEach } from "vitest";
+// @vitest-environment happy-dom
+import { describe, expect, it, vi, beforeEach, afterEach } from "vitest";
 import {
   sdkResolverShadowCheck,
   runResolverShadow,
   recordResolverParity,
   recordAnimationResolverParity,
   evaluateSoakGate,
+  recordAttempt,
+  flushAttemptCounts,
+  __resetAttemptSchedulingForTests,
   type SdkResolverMismatch,
 } from "./sdkResolverShadow";
 import type { PatchOperation } from "./sourcePatcher";
@@ -13,12 +17,15 @@ import { openComposition } from "@hyperframes/sdk";
 // ─── Telemetry capture ────────────────────────────────────────────────────────
 
 const trackedEvents: Array<{ event: string; props: Record<string, unknown> }> = [];
+const flushViaBeacon = vi.fn();
 vi.mock("./studioTelemetry", () => ({
   trackStudioEvent: (event: string, props: Record<string, unknown>) =>
     trackedEvents.push({ event, props }),
+  flushViaBeacon: () => flushViaBeacon(),
 }));
 beforeEach(() => {
   trackedEvents.length = 0;
+  flushViaBeacon.mockClear();
 });
 const lastShadow = () =>
   trackedEvents.filter((e) => e.event === "sdk_resolver_shadow").at(-1)?.props;
@@ -532,3 +539,175 @@ describe("H. inlined sub-composition leaf", () => {
     expect(mismatches.some((m) => m.kind === "element_not_found")).toBe(false);
   });
 });
+
+// ─── I. Attempt counter (denominator for the soak gate) ───────────────────────
+
+describe("I. recordAttempt / flushAttemptCounts", () => {
+  beforeEach(() => {
+    // Drain any counts left over from a prior test so each test starts clean.
+    flushAttemptCounts();
+  });
+
+  it("flushAttemptCounts returns null when nothing has been recorded", () => {
+    expect(flushAttemptCounts()).toBeNull();
+  });
+
+  it("increments the counter for a given op label", () => {
+    recordAttempt("setTiming");
+    expect(flushAttemptCounts()).toEqual({ setTiming: 1 });
+  });
+
+  it("accumulates multiple calls with the same label", () => {
+    recordAttempt("setTiming");
+    recordAttempt("setTiming");
+    recordAttempt("setTiming");
+    expect(flushAttemptCounts()).toEqual({ setTiming: 3 });
+  });
+
+  it("tracks different labels independently", () => {
+    recordAttempt("setTiming");
+    recordAttempt("addGsapTween");
+    recordAttempt("setTiming");
+    expect(flushAttemptCounts()).toEqual({ setTiming: 2, addGsapTween: 1 });
+  });
+
+  it("resets to empty after a flush", () => {
+    recordAttempt("setTiming");
+    flushAttemptCounts();
+    expect(flushAttemptCounts()).toBeNull();
+  });
+});
+
+describe("I. attempt counting inside the three emit functions", () => {
+  beforeEach(() => {
+    flushAttemptCounts();
+  });
+
+  it("runResolverShadow counts an attempt on the parity (silent) path", async () => {
+    mockFlags.STUDIO_SDK_RESOLVER_SHADOW_ENABLED = true;
+    const session = await openComposition(BASE_HTML);
+    runResolverShadow(session, "hf-box", [
+      { type: "inline-style", property: "color", value: "blue" },
+    ]);
+    expect(flushAttemptCounts()).toEqual({ "dom-edit": 1 });
+    expect(trackedEvents.filter((e) => e.event === "sdk_resolver_shadow")).toHaveLength(0);
+  });
+
+  it("runResolverShadow counts an attempt on the divergence (emits) path too", async () => {
+    mockFlags.STUDIO_SDK_RESOLVER_SHADOW_ENABLED = true;
+    const session = await openComposition(BASE_HTML);
+    runResolverShadow(session, "hf-missing", [
+      { type: "inline-style", property: "color", value: "blue" },
+    ]);
+    expect(flushAttemptCounts()).toEqual({ "dom-edit": 1 });
+    expect(trackedEvents.filter((e) => e.event === "sdk_resolver_shadow")).toHaveLength(1);
+  });
+
+  it("recordResolverParity counts an attempt on the parity (silent) path", async () => {
+    mockFlags.STUDIO_SDK_RESOLVER_SHADOW_ENABLED = true;
+    const session = await openComposition(BASE_HTML);
+    await recordResolverParity(session, "hf-box", "setTiming");
+    expect(flushAttemptCounts()).toEqual({ setTiming: 1 });
+  });
+
+  it("recordResolverParity counts an attempt on the divergence (emits) path too", async () => {
+    mockFlags.STUDIO_SDK_RESOLVER_SHADOW_ENABLED = true;
+    const session = await openComposition(BASE_HTML);
+    await recordResolverParity(session, "hf-missing", "setTiming");
+    expect(flushAttemptCounts()).toEqual({ setTiming: 1 });
+  });
+
+  it("recordAnimationResolverParity counts an attempt on the parity (silent) path", async () => {
+    mockFlags.STUDIO_SDK_RESOLVER_SHADOW_ENABLED = true;
+    const session = await openComposition(GSAP_HTML);
+    const realId = session.getElements().flatMap((e) => [...e.animationIds])[0] ?? "";
+    expect(realId).not.toBe(""); // fixture has a tween on hf-box, see block G above
+    recordAnimationResolverParity(session, realId, "removeGsapTween");
+    expect(flushAttemptCounts()).toEqual({ removeGsapTween: 1 });
+    expect(trackedEvents.filter((e) => e.event === "sdk_resolver_shadow")).toHaveLength(0);
+  });
+
+  it("recordAnimationResolverParity counts an attempt on the divergence (emits) path too", async () => {
+    mockFlags.STUDIO_SDK_RESOLVER_SHADOW_ENABLED = true;
+    const session = await openComposition(GSAP_HTML);
+    recordAnimationResolverParity(session, "no-such-anim", "setGsapTween");
+    expect(flushAttemptCounts()).toEqual({ setGsapTween: 1 });
+    expect(trackedEvents.filter((e) => e.event === "sdk_resolver_shadow")).toHaveLength(1);
+  });
+
+  it("counts accumulate across multiple different chokepoints in one rollup", async () => {
+    mockFlags.STUDIO_SDK_RESOLVER_SHADOW_ENABLED = true;
+    const session = await openComposition(BASE_HTML);
+    await recordResolverParity(session, "hf-box", "setTiming");
+    await recordResolverParity(session, "hf-box", "setTiming");
+    recordAnimationResolverParity(session, "no-such-anim", "setGsapTween");
+    expect(flushAttemptCounts()).toEqual({ setTiming: 2, setGsapTween: 1 });
+  });
+
+  it("does not count an attempt when the flag is off", async () => {
+    mockFlags.STUDIO_SDK_RESOLVER_SHADOW_ENABLED = false;
+    const session = await openComposition(BASE_HTML);
+    runResolverShadow(session, "hf-box", [
+      { type: "inline-style", property: "color", value: "blue" },
+    ]);
+    await recordResolverParity(session, "hf-box", "setTiming");
+    recordAnimationResolverParity(session, "no-such-anim", "setGsapTween");
+    expect(flushAttemptCounts()).toBeNull();
+  });
+});
+
+describe("I. production rollup wiring", () => {
+  beforeEach(() => {
+    flushAttemptCounts();
+    __resetAttemptSchedulingForTests();
+    vi.useFakeTimers({ toFake: ["setTimeout", "setInterval", "clearInterval", "clearTimeout"] });
+  });
+
+  afterEach(() => {
+    __resetAttemptSchedulingForTests();
+    vi.useRealTimers();
+    Object.defineProperty(document, "visibilityState", { value: "visible", configurable: true });
+  });
+
+  it("does not emit a rollup event when nothing was recorded", () => {
+    mockFlags.STUDIO_SDK_RESOLVER_SHADOW_ENABLED = true;
+    vi.advanceTimersByTime(5 * 60_000);
+    expect(trackedEvents.filter((e) => e.event === "sdk_resolver_shadow_attempt")).toHaveLength(0);
+  });
+
+  it("emits a sdk_resolver_shadow_attempt rollup event every 5 minutes after the first attempt", async () => {
+    mockFlags.STUDIO_SDK_RESOLVER_SHADOW_ENABLED = true;
+    const session = await openComposition(BASE_HTML);
+    await recordResolverParity(session, "hf-box", "setTiming");
+    vi.advanceTimersByTime(5 * 60_000);
+    const rollups = trackedEvents.filter((e) => e.event === "sdk_resolver_shadow_attempt");
+    expect(rollups).toHaveLength(1);
+    expect(rollups[0].props.counts).toBe(JSON.stringify({ setTiming: 1 }));
+  });
+
+  it("flushes a rollup and forces a beacon delivery on visibilitychange -> hidden", async () => {
+    mockFlags.STUDIO_SDK_RESOLVER_SHADOW_ENABLED = true;
+    const session = await openComposition(BASE_HTML);
+    await recordResolverParity(session, "hf-box", "setTiming");
+    Object.defineProperty(document, "visibilityState", { value: "hidden", configurable: true });
+    document.dispatchEvent(new Event("visibilitychange"));
+    const rollups = trackedEvents.filter((e) => e.event === "sdk_resolver_shadow_attempt");
+    expect(rollups).toHaveLength(1);
+    expect(rollups[0].props.counts).toBe(JSON.stringify({ setTiming: 1 }));
+    // Delivery must not depend on studioTelemetry's own visibilitychange listener
+    // winning a race — this module forces its own beacon flush.
+    expect(flushViaBeacon).toHaveBeenCalledTimes(1);
+  });
+
+  it("does not register a duplicate visibilitychange listener after a scheduling reset", async () => {
+    mockFlags.STUDIO_SDK_RESOLVER_SHADOW_ENABLED = true;
+    const session = await openComposition(BASE_HTML);
+    await recordResolverParity(session, "hf-box", "setTiming");
+    __resetAttemptSchedulingForTests();
+    await recordResolverParity(session, "hf-box", "setTiming"); // re-arms scheduling, incl. listener
+    Object.defineProperty(document, "visibilityState", { value: "hidden", configurable: true });
+    document.dispatchEvent(new Event("visibilitychange"));
+    // If the reset had leaked the old listener, this would fire twice.
+    expect(flushViaBeacon).toHaveBeenCalledTimes(1);
+  });
+});

package/src/utils/sdkResolverShadow.ts

@@ -19,7 +19,7 @@ import type { Composition, JsonPatchOp } from "@hyperframes/sdk";
 import type { PatchOperation } from "./sourcePatcher";
 import { STUDIO_SDK_RESOLVER_SHADOW_ENABLED } from "../components/editor/manualEditingAvailability";
 import { patchOpsToSdkEditOps } from "./sdkOpMapping";
-import { trackStudioEvent } from "./studioTelemetry";
+import { trackStudioEvent, flushViaBeacon } from "./studioTelemetry";
 
 // ─── Types ────────────────────────────────────────────────────────────────────
 
@@ -229,6 +229,96 @@ export function sdkResolverShadowCheck(
   }
 }
 
+// ─── Attempt counter (denominator for the soak gate) ──────────────────────────
+//
+// The three emit functions below only fire a PostHog event on divergence —
+// parity is silent, by design, to avoid firing on every edit. That leaves no
+// way to compute a rate (divergences / attempts): we can count failures but
+// never attempts. This counter tracks attempts in memory and rolls them up
+// into ONE low-frequency event instead of firing per-attempt, which would
+// recreate the exact chattiness problem the divergence-only design avoids.
+
+const attemptCounts: Record<string, number> = {};
+
+/**
+ * Record that the resolver-shadow tripwire ran for `opLabel`, regardless of
+ * outcome (parity or divergence). No flag check of its own — only ever called
+ * from inside the three emit functions below, after their own
+ * STUDIO_SDK_RESOLVER_SHADOW_ENABLED guard, so it's already flag-gated.
+ */
+export function recordAttempt(opLabel: string): void {
+  attemptCounts[opLabel] = (attemptCounts[opLabel] ?? 0) + 1;
+  ensureAttemptFlushScheduled();
+}
+
+/**
+ * Return the accumulated attempt counts since the last flush (or `null` if
+ * nothing has been recorded — no point emitting an empty rollup), and reset
+ * the counter to empty.
+ */
+export function flushAttemptCounts(): Record<string, number> | null {
+  const keys = Object.keys(attemptCounts);
+  if (keys.length === 0) return null;
+  const snapshot: Record<string, number> = {};
+  for (const key of keys) {
+    snapshot[key] = attemptCounts[key];
+    delete attemptCounts[key];
+  }
+  return snapshot;
+}
+
+const ATTEMPT_FLUSH_INTERVAL_MS = 5 * 60_000;
+let attemptFlushTimer: ReturnType<typeof setInterval> | null = null;
+let attemptVisibilityHandler: (() => void) | null = null;
+
+function flushAndEmitAttempts(): void {
+  const counts = flushAttemptCounts();
+  if (counts === null) return;
+  trackStudioEvent("sdk_resolver_shadow_attempt", { counts: JSON.stringify(counts) });
+}
+
+// Lazily starts the rollup timer + visibilitychange listener on the FIRST
+// attempt in a session — mirrors studioTelemetry.ts's own lazy flushTimer
+// start, so a session that never exercises the tripwire never runs a
+// background timer.
+function ensureAttemptFlushScheduled(): void {
+  if (!attemptFlushTimer) {
+    attemptFlushTimer = setInterval(flushAndEmitAttempts, ATTEMPT_FLUSH_INTERVAL_MS);
+  }
+  if (!attemptVisibilityHandler && typeof document !== "undefined") {
+    attemptVisibilityHandler = () => {
+      if (document.visibilityState !== "hidden") return;
+      flushAndEmitAttempts();
+      // studioTelemetry.ts registers its own visibilitychange listener (on
+      // window, at module load) that drains its queue via sendBeacon. Listener
+      // execution order between that handler and this one (on document,
+      // registered lazily) is not something to rely on — whichever runs
+      // first could otherwise beacon-flush before or after this rollup lands
+      // in the queue. Forcing a beacon flush here makes delivery of this
+      // rollup event correct regardless of that order.
+      flushViaBeacon();
+    };
+    document.addEventListener("visibilitychange", attemptVisibilityHandler);
+  }
+}
+
+/**
+ * Test-only: clears the lazy timer/listener singleton state so tests can
+ * verify the "starts on first attempt" behavior in isolation, without an
+ * earlier test's real-timer interval (or visibilitychange listener) silently
+ * surviving into a later test. Does NOT touch attemptCounts — only the
+ * scheduling state. Not part of the public module contract; only imported
+ * from sdkResolverShadow.test.ts.
+ */
+export function __resetAttemptSchedulingForTests(): void {
+  if (attemptFlushTimer) clearInterval(attemptFlushTimer);
+  attemptFlushTimer = null;
+  if (attemptVisibilityHandler && typeof document !== "undefined") {
+    document.removeEventListener("visibilitychange", attemptVisibilityHandler);
+  }
+  attemptVisibilityHandler = null;
+}
+
 // ─── Telemetry ────────────────────────────────────────────────────────────────
 
 // Redact all user-content values before telemetry: style values and text both
@@ -266,6 +356,7 @@ export function runResolverShadow(
   if (!STUDIO_SDK_RESOLVER_SHADOW_ENABLED) return;
   if (!hfId) return;
   try {
+    recordAttempt("dom-edit");
     const mismatches = sdkResolverShadowCheck(session, hfId, ops, sourceContent);
     // Emit only on divergence — parity is silent, matching recordResolverParity
     // and recordAnimationResolverParity. Otherwise this fires a PostHog event on
@@ -318,6 +409,7 @@ export async function recordResolverParity(
   if (!STUDIO_SDK_RESOLVER_SHADOW_ENABLED) return;
   if (!session || !hfId) return;
   try {
+    recordAttempt(opLabel);
     if (resolveSnapshot(session, hfId)) return; // resolves — parity, nothing to record
     // Capture BEFORE any await: this call is fire-and-forget (`void recordResolverParity(...)`)
     // and the caller runs its own session mutation synchronously right after this call
@@ -380,6 +472,7 @@ export function recordAnimationResolverParity(
   if (!STUDIO_SDK_RESOLVER_SHADOW_ENABLED) return;
   if (!session || !animationId) return;
   try {
+    recordAttempt(opLabel);
     const elements = session.getElements();
     const resolves = elements.some((el) => el.animationIds.includes(animationId));
     if (resolves) return; // SDK locates the animation — parity

package/src/utils/sourcePatcher.ts

@@ -90,6 +90,8 @@ export interface PatchOperation {
   type: "inline-style" | "attribute" | "text-content" | "html-attribute";
   property: string;
   value: string | null;
+  childSelector?: string;
+  childIndex?: number;
 }
 
 // Runtime validation for hfId lives in findTagByTarget → execDataAttrPattern (CSS attr-value

package/src/utils/studioPreviewHelpers.test.ts

@@ -1,5 +1,29 @@
+// @vitest-environment happy-dom
+
 import { describe, expect, it, vi } from "vitest";
-import { coversComposition, pauseStudioPreviewPlayback } from "./studioPreviewHelpers";
+import {
+  coversComposition,
+  getPreviewTargetFromPointer,
+  pauseStudioPreviewPlayback,
+} from "./studioPreviewHelpers";
+
+function domRect(left: number, top: number, width: number, height: number): DOMRect {
+  return {
+    x: left,
+    y: top,
+    left,
+    top,
+    width,
+    height,
+    right: left + width,
+    bottom: top + height,
+    toJSON: () => ({}),
+  };
+}
+
+function stubRect(el: Element, rect: DOMRect): void {
+  el.getBoundingClientRect = () => rect;
+}
 
 describe("coversComposition (full-bleed canvas-pick exclusion)", () => {
   const viewport = { width: 1920, height: 1080 };
@@ -79,3 +103,73 @@ describe("pauseStudioPreviewPlayback", () => {
     expect(siblingPause).toHaveBeenCalledTimes(1);
   });
 });
+
+describe("getPreviewTargetFromPointer", () => {
+  it("skips candidates hidden from author hit-testing by inherited pointer-events:none", () => {
+    const iframe = document.createElement("iframe");
+    document.body.append(iframe);
+    const doc = iframe.contentDocument;
+    if (!doc) throw new Error("Expected iframe document");
+
+    doc.body.innerHTML = `
+      <main id="scene" data-composition-id="scene">
+        <h1 id="headline">Launch title</h1>
+        <div id="overlay-parent" style="pointer-events: none;">
+          <div id="overlay" style="position: absolute; background: rgba(0, 0, 0, 0.1);"></div>
+        </div>
+      </main>
+    `;
+
+    const scene = doc.getElementById("scene");
+    const headline = doc.getElementById("headline");
+    const overlayParent = doc.getElementById("overlay-parent");
+    const overlay = doc.getElementById("overlay");
+    if (!scene || !headline || !overlayParent || !overlay) {
+      throw new Error("Expected preview fixture elements");
+    }
+
+    stubRect(iframe, domRect(0, 0, 400, 300));
+    stubRect(scene, domRect(0, 0, 400, 300));
+    stubRect(headline, domRect(40, 40, 160, 48));
+    stubRect(overlayParent, domRect(0, 0, 360, 260));
+    stubRect(overlay, domRect(0, 0, 360, 260));
+    doc.elementsFromPoint = () => [overlay, overlayParent, headline, scene];
+
+    expect(getPreviewTargetFromPointer(iframe, 80, 64, "index.html")).toBe(headline);
+
+    iframe.remove();
+  });
+
+  it("honors a CSS-class pointer-events:auto opt-in under a pointer-events:none ancestor", () => {
+    const iframe = document.createElement("iframe");
+    document.body.append(iframe);
+    const doc = iframe.contentDocument;
+    if (!doc) throw new Error("Expected iframe document");
+
+    doc.head.innerHTML = `<style>.clickable { pointer-events: auto; }</style>`;
+    doc.body.innerHTML = `
+      <main id="scene" data-composition-id="scene">
+        <div id="overlay-parent" style="pointer-events: none;">
+          <button id="clickable-child" class="clickable">Play</button>
+        </div>
+      </main>
+    `;
+
+    const scene = doc.getElementById("scene");
+    const overlayParent = doc.getElementById("overlay-parent");
+    const clickableChild = doc.getElementById("clickable-child");
+    if (!scene || !overlayParent || !clickableChild) {
+      throw new Error("Expected preview fixture elements");
+    }
+
+    stubRect(iframe, domRect(0, 0, 400, 300));
+    stubRect(scene, domRect(0, 0, 400, 300));
+    stubRect(overlayParent, domRect(0, 0, 360, 260));
+    stubRect(clickableChild, domRect(40, 40, 80, 24));
+    doc.elementsFromPoint = () => [clickableChild, overlayParent, scene];
+
+    expect(getPreviewTargetFromPointer(iframe, 60, 50, "index.html")).toBe(clickableChild);
+
+    iframe.remove();
+  });
+});

package/src/utils/studioPreviewHelpers.ts

@@ -4,6 +4,7 @@ import {
   isElementComputedVisible,
   resolveAllVisualDomEditTargets,
 } from "../components/editor/domEditingElement";
+import { isHtmlElement } from "../components/editor/domEditingDom";
 import { getEventTargetElement } from "./studioHelpers";
 
 interface PreviewLocalPointer {
@@ -81,11 +82,90 @@ function removePointerEventsOverride(style: HTMLStyleElement | null): void {
   }
 }
 
+const pointerEventsInheritanceFallbackByDocument = new WeakMap<Document, boolean>();
+
+function needsPointerEventsInheritanceFallback(doc: Document, win: Window): boolean {
+  const cached = pointerEventsInheritanceFallbackByDocument.get(doc);
+  if (cached !== undefined) return cached;
+
+  const parent = doc.createElement("div");
+  const child = doc.createElement("div");
+  parent.style.pointerEvents = "none";
+  parent.appendChild(child);
+  const host = doc.body ?? doc.documentElement;
+  if (!host) return false;
+
+  host.appendChild(parent);
+  const needsFallback = win.getComputedStyle(child).pointerEvents !== "none";
+  parent.remove();
+  pointerEventsInheritanceFallbackByDocument.set(doc, needsFallback);
+  return needsFallback;
+}
+
+// Own declared pointer-events value, via computed style rather than inline
+// style, so a CSS-class opt-in/opt-out (not just an inline style attribute)
+// is honored when walking back down from a pointer-events:none ancestor.
+function hasOwnPointerEventsOverride(el: HTMLElement, win: Window): boolean {
+  const value = win.getComputedStyle(el).pointerEvents;
+  return value !== "" && value !== "inherit" && value !== "unset";
+}
+
+function inheritsPointerEventsNoneFromAncestor(el: HTMLElement, win: Window): boolean {
+  let current = el.parentElement;
+  while (current) {
+    if (win.getComputedStyle(current).pointerEvents === "none") {
+      let descendant: HTMLElement | null = el;
+      while (descendant && descendant !== current) {
+        if (hasOwnPointerEventsOverride(descendant, win)) {
+          return win.getComputedStyle(descendant).pointerEvents === "none";
+        }
+        descendant = descendant.parentElement;
+      }
+      return true;
+    }
+    current = current.parentElement;
+  }
+  return false;
+}
+
+function hasAuthorPointerEventsNone(el: HTMLElement): boolean {
+  const win = el.ownerDocument.defaultView;
+  if (!win) return false;
+  if (win.getComputedStyle(el).pointerEvents === "none") return true;
+  if (!needsPointerEventsInheritanceFallback(el.ownerDocument, win)) return false;
+  return inheritsPointerEventsNoneFromAncestor(el, win);
+}
+
+function collectPointerEventsNoneTargets(
+  elements: Iterable<Element | null | undefined>,
+): WeakSet<HTMLElement> {
+  const disabled = new WeakSet<HTMLElement>();
+  for (const entry of elements) {
+    if (isHtmlElement(entry) && hasAuthorPointerEventsNone(entry)) {
+      disabled.add(entry);
+    }
+  }
+  return disabled;
+}
+
+// Shared tail of both pointer resolvers: hit-test candidates minus elements the
+// author hid from hit-testing via pointer-events:none.
+function filterAuthorInteractiveTargets(
+  elements: Element[],
+  activeCompositionPath: string | null,
+): HTMLElement[] {
+  const pointerEventsNoneTargets = collectPointerEventsNoneTargets(elements);
+  return resolveAllVisualDomEditTargets(elements, { activeCompositionPath }).filter(
+    (el) => !pointerEventsNoneTargets.has(el),
+  );
+}
+
 // Animated group members can move outside their wrapper's static layout box, so
 // the empty space inside a group's *visual* bounds (the member-union the overlay
 // draws) doesn't hit-test to the group via elementsFromPoint. Recover it: if the
 // point falls within a group's live member-union rect, return that wrapper.
 // Innermost (smallest-area) group wins for nested groups.
+// fallow-ignore-next-line complexity
 function findGroupAtPoint(doc: Document, x: number, y: number): HTMLElement | null {
   let best: HTMLElement | null = null;
   let bestArea = Infinity;
@@ -132,26 +212,39 @@ export function getPreviewTargetFromPointer(
   const localPointer = resolvePreviewLocalPointer(iframe, doc, win, clientX, clientY);
   if (!localPointer) return null;
 
-  const overrideStyle = forcePointerEventsAuto(doc);
+  let overrideStyle = forcePointerEventsAuto(doc);
   try {
     if (typeof doc.elementsFromPoint === "function") {
-      const candidates = resolveAllVisualDomEditTargets(
-        doc.elementsFromPoint(localPointer.x, localPointer.y),
-        { activeCompositionPath },
-      );
+      const elements = doc.elementsFromPoint(localPointer.x, localPointer.y);
+      removePointerEventsOverride(overrideStyle);
+      overrideStyle = null;
+      const candidates = filterAuthorInteractiveTargets(elements, activeCompositionPath);
       const visualTarget =
         candidates.find((el) => !isFullBleedTarget(el, localPointer.viewport)) ?? null;
       if (visualTarget) return visualTarget;
     }
 
+    // Belt-and-suspenders: elementsFromPoint is universally supported in the
+    // browsers this ships in, so the override is already removed by this
+    // point in practice — but guard the environment without it too, so
+    // hasAuthorPointerEventsNone below never reads a forced-auto value.
+    removePointerEventsOverride(overrideStyle);
+    overrideStyle = null;
+
     // No element hit (e.g. empty space inside an animated group's overlay) — fall
     // back to the group whose member-union contains the point, so the whole group
     // area is hoverable/selectable, not just where a member currently sits.
     const groupHit = findGroupAtPoint(doc, localPointer.x, localPointer.y);
-    if (groupHit && getDomLayerPatchTarget(groupHit, activeCompositionPath)) return groupHit;
+    if (
+      groupHit &&
+      !hasAuthorPointerEventsNone(groupHit) &&
+      getDomLayerPatchTarget(groupHit, activeCompositionPath)
+    )
+      return groupHit;
 
     const fallback = getEventTargetElement(doc.elementFromPoint(localPointer.x, localPointer.y));
     if (!fallback || !getDomLayerPatchTarget(fallback, activeCompositionPath)) return null;
+    if (hasAuthorPointerEventsNone(fallback)) return null;
     if (!isElementComputedVisible(fallback)) return null;
     if (isFullBleedTarget(fallback, localPointer.viewport)) return null;
     return fallback;
@@ -180,15 +273,21 @@ export function getAllPreviewTargetsFromPointer(
   const localPointer = resolvePreviewLocalPointer(iframe, doc, win, clientX, clientY);
   if (!localPointer) return [];
 
-  const overrideStyle = forcePointerEventsAuto(doc);
+  let overrideStyle = forcePointerEventsAuto(doc);
   try {
     if (typeof doc.elementsFromPoint === "function") {
-      return resolveAllVisualDomEditTargets(doc.elementsFromPoint(localPointer.x, localPointer.y), {
-        activeCompositionPath,
-      }).filter((el) => !isFullBleedTarget(el, localPointer.viewport));
+      const elements = doc.elementsFromPoint(localPointer.x, localPointer.y);
+      removePointerEventsOverride(overrideStyle);
+      overrideStyle = null;
+      return filterAuthorInteractiveTargets(elements, activeCompositionPath).filter(
+        (el) => !isFullBleedTarget(el, localPointer.viewport),
+      );
     }
     const fallback = getEventTargetElement(doc.elementFromPoint(localPointer.x, localPointer.y));
     if (!fallback || !getDomLayerPatchTarget(fallback, activeCompositionPath)) return [];
+    removePointerEventsOverride(overrideStyle);
+    overrideStyle = null;
+    if (hasAuthorPointerEventsNone(fallback)) return [];
     if (!isElementComputedVisible(fallback)) return [];
     if (isFullBleedTarget(fallback, localPointer.viewport)) return [];
     return [fallback];

package/src/utils/studioSaveDiagnostics.ts

@@ -18,11 +18,13 @@ export interface StudioSaveFailureInput {
 
 export class StudioSaveHttpError extends Error {
   readonly statusCode: number;
+  readonly alreadyToasted: boolean;
 
-  constructor(message: string, statusCode: number) {
+  constructor(message: string, statusCode: number, options: { alreadyToasted?: boolean } = {}) {
     super(message);
     this.name = "StudioSaveHttpError";
     this.statusCode = statusCode;
+    this.alreadyToasted = options.alreadyToasted ?? false;
   }
 }
 
@@ -130,6 +132,7 @@ export function trackStudioSaveFailure(input: StudioSaveFailureInput): void {
 export async function createStudioSaveHttpError(
   response: Response,
   fallbackMessage: string,
+  options: { alreadyToasted?: boolean } = {},
 ): Promise<StudioSaveHttpError> {
   let body = "";
   try {
@@ -141,7 +144,7 @@ export async function createStudioSaveHttpError(
   const message = detail
     ? `${fallbackMessage} (${response.status}): ${detail}`
     : `${fallbackMessage} (${response.status})`;
-  return new StudioSaveHttpError(message, response.status);
+  return new StudioSaveHttpError(message, response.status, options);
 }
 
 export async function retryStudioSave<T>(