@hyperframes/studio 0.8.115 → 0.8.117

package/src/player/hooks/useTimelinePlayer.ts

@@ -36,6 +36,7 @@ import { hasTimelinePerformanceFixtureLease } from "../lib/timelinePerformanceFi
 import { applyCachedSourceDurations, probeMissingSourceDurations } from "../lib/mediaProbe";
 import { shouldResumeForwardPlaybackAfterSeek, shouldStopAfterSeek } from "../lib/playbackSeek";
 import { applyPreviewVariablesToUrl } from "../../hooks/previewVariablesStore";
+import { isStudioManualEditGestureLiveIn } from "../../components/editor/manualEditsDom";
 import { createPreviewMessageHandler } from "./previewMessageRouter";
 import { timelineElementsChanged } from "./timelinePlayerSync";
 import { safeContentDocument } from "./timelineSyncHydration";
@@ -486,7 +487,10 @@ export function useTimelinePlayer({
     // A newer edit, or anything replacing the live preview (a reload, a composition switch), wins.
     const isCurrent = () => gen === refreshGenRef.current && slot === previewGeneration();
     const swap = sceneSwapFor(iframe);
-    if (!swap || isRefreshingRef.current) return reloadWholeFilm(url.toString());
+    const swapWouldReplaceGestureNode =
+      !!iframe.contentDocument && isStudioManualEditGestureLiveIn(iframe.contentDocument);
+    if (!swap || isRefreshingRef.current || swapWouldReplaceGestureNode)
+      return reloadWholeFilm(url.toString());
     swap(url.toString(), isCurrent, cancel.signal).catch((error: unknown) => {
       if (!isCurrent()) return;
       logReload("scene-swap-refused", { reason: String(error) });

package/src/player/lib/thumbnailScheduler.test.ts

@@ -219,6 +219,22 @@ describe("ThumbnailScheduler", () => {
     expect(scheduler.getDiagnostics()).toMatchObject({ queued: 0, active: 0, leases: 0 });
   });
 
+  it("frees an aborted job's slot at once, even when its loader ignores the abort", async () => {
+    const scheduler = new ThumbnailScheduler(
+      resolveTimelineViewportBudgets({ concurrentVideoDecodes: 1 }),
+    );
+    const stuck = deferred<ThumbnailLoadedResult>();
+    const lease = scheduler.acquire(
+      request("stuck", () => stuck.promise, "visible", { kind: "video" }),
+      vi.fn(),
+    );
+    lease.release();
+    const nextLoad = vi.fn(async () => result("next"));
+    scheduler.acquire(request("next", nextLoad, "visible", { kind: "video" }), vi.fn());
+    await flush();
+    expect(nextLoad).toHaveBeenCalledTimes(1);
+  });
+
   it("disposes a late result exactly once after its final lease releases", async () => {
     const scheduler = new ThumbnailScheduler();
     const pending = deferred<ThumbnailLoadedResult>();

package/src/player/lib/thumbnailScheduler.ts

@@ -310,6 +310,15 @@ export class ThumbnailScheduler {
     entry.controller = controller;
     this.activeByBucket[bucket]++;
     this.activeByKind[entry.request.kind]++;
+    let slotFree = false;
+    const freeSlot = () => {
+      if (slotFree) return;
+      slotFree = true;
+      this.activeByBucket[bucket]--;
+      this.activeByKind[entry.request.kind]--;
+      this.pump();
+    };
+    controller.signal.addEventListener("abort", freeSlot, { once: true });
     this.notify(entry);
 
     const pending = this.loadWithTimeout(entry, controller);
@@ -331,8 +340,7 @@ export class ThumbnailScheduler {
       })
       .finally(() => {
         if (entry.controller === controller) entry.controller = null;
-        this.activeByBucket[bucket]--;
-        this.activeByKind[entry.request.kind]--;
+        freeSlot();
         this.pump();
       });
   }

package/src/player/sceneSwap.ts

@@ -1,3 +1,4 @@
+import { studioApiFetch } from "../utils/studioApiFetch";
 type SwapWindow = Window & {
   __hfSwapScenes?: (html: string, signal?: AbortSignal) => Promise<void>;
 };
@@ -72,7 +73,7 @@ export function sceneSwapFor(
     );
     cancel?.addEventListener("abort", () => deadline.abort(cancel.reason), { once: true });
     const swapping = (async () => {
-      const response = await fetch(url, { signal: deadline.signal });
+      const response = await studioApiFetch(url, { signal: deadline.signal });
       if (!response.ok) throw new Error(`preview request failed with ${response.status}`);
       const html = await response.text();
       if (!isCurrent()) throw new Error("superseded by a newer reload");

package/src/telemetry/client.ts

@@ -9,6 +9,7 @@ import { browserTelemetryAllowed } from "./policy";
 import { getBrowserSystemMeta } from "./system";
 import { canaryEventProperties } from "./canary";
 import { recordBreadcrumb } from "./breadcrumbs";
+import { studioApiFetch } from "../utils/studioApiFetch";
 
 // Write-only PostHog project key, safe to embed in client code.
 const POSTHOG_API_KEY = "phc_zjjbX0PnWxERXrMHhkEJWj9A9BhGVLRReICgsfTMmpx";
@@ -83,7 +84,7 @@ function send(url: string, payload: string): void {
   // Prefer fetch with keepalive (survives page navigation). sendBeacon is a
   // fallback for older runtimes where fetch isn't available.
   try {
-    void fetch(url, {
+    void studioApiFetch(url, {
       method: "POST",
       headers: { "Content-Type": "application/json" },
       body: payload,

package/src/utils/blockInstaller.ts

@@ -12,6 +12,7 @@ import { saveProjectFilesWithHistory } from "./studioFileHistory";
 import { serializeStudioFileMutation } from "./studioFileMutationCoordinator";
 import { extendRootDurationInSource } from "./rootDuration";
 import { deriveTimelineStoreKeyForDomId } from "../player/lib/timelineElementHelpers";
+import { studioApiFetch } from "./studioApiFetch";
 
 function getMaxZIndexFromIframe(iframe: HTMLIFrameElement | null): number {
   try {
@@ -65,7 +66,7 @@ async function installRegistryItem({
   block: RegistryItem;
   compositionFile: string;
 } | null> {
-  const response = await fetch(buildProjectApiPath(projectId, `/registry/install`), {
+  const response = await studioApiFetch(buildProjectApiPath(projectId, `/registry/install`), {
     method: "POST",
     headers: { "Content-Type": "application/json" },
     body: JSON.stringify({ blockName }),

package/src/utils/elementGsap.test.ts

@@ -0,0 +1,9 @@
+// @vitest-environment happy-dom
+import { expect, it } from "vitest";
+import { elementTargets } from "./elementGsap";
+
+it("keeps only the targets GSAP styles: not a plain object, not an XML-namespace element", () => {
+  const box = document.createElement("div");
+  const item = document.createElementNS("urn:x", "item");
+  expect(elementTargets({ targets: () => [{}, item, box, null] })).toEqual([box]);
+});

package/src/utils/elementGsap.ts

@@ -43,3 +43,10 @@ export function readElementGsapNumber(element: HTMLElement, prop: string): numbe
   const value = Number(gsapOf(element)?.getProperty?.(element, prop));
   return Number.isFinite(value) ? value : null;
 }
+
+/** The targets CSSPlugin styles: not plain objects (the runtime's filler) or XML-namespace elements. */
+export function elementTargets(tween: { targets?: () => unknown[] }): Element[] {
+  return (tween.targets?.() ?? []).filter((t): t is Element =>
+    Boolean((t as HTMLElement | null)?.style && (t as Node).nodeType),
+  );
+}

package/src/utils/gsapSoftReload.test.ts

@@ -481,6 +481,45 @@ describe("applySoftReload authored-style restore", () => {
     return el.style.getPropertyValue("opacity");
   }
 
+  it("flushes only elements when a tween targets a plain object (the runtime's duration filler)", () => {
+    const el = document.createElement("div");
+    // GSAP's clearProps writes target.style.cssText, which throws on a plain object.
+    const set = vi.fn((targets: Array<{ style: CSSStyleDeclaration }>) => {
+      for (const t of targets) t.style.cssText = "";
+    });
+    const { iframe } = buildIframeWithTarget(el, {
+      gsap: { timeline: vi.fn(), set },
+      __timelines: {
+        root: {
+          kill: vi.fn(),
+          getChildren: () => [{ targets: () => [el] }, { targets: () => [{}] }],
+        },
+      },
+    });
+
+    expect(applySoftReload(iframe, SCRIPT_TEXT)).toBe("applied");
+    expect(set).toHaveBeenCalledWith([el], { clearProps: "all" });
+  });
+
+  it("falls back to a full reload, and says why, when the flush throws", () => {
+    const error = vi.spyOn(console, "error").mockImplementation(() => {});
+    const { iframe } = buildIframeWithTarget(document.createElement("div"), {
+      gsap: {
+        timeline: vi.fn(),
+        set: vi.fn(() => {
+          throw new Error("flush failed");
+        }),
+      },
+    });
+
+    expect(applySoftReload(iframe, SCRIPT_TEXT)).toBe("cannot-soft-reload");
+    expect(error).toHaveBeenCalledWith(
+      expect.stringContaining("soft reload threw"),
+      expect.any(Error),
+    );
+    error.mockRestore();
+  });
+
   it("restores opacity from the after-write HTML (matched by data-hf-id)", () => {
     const el = document.createElement("img");
     el.setAttribute("data-hf-id", "hf-1");

package/src/utils/gsapSoftReload.ts

@@ -152,7 +152,8 @@ function runSuppressed(win: IframeWindow, reload: () => void): boolean {
     if (win.__hfSuppressSceneMutations) win.__hfSuppressSceneMutations(reload);
     else reload();
     return true;
-  } catch {
+  } catch (error) {
+    console.error("[Studio] GSAP soft reload threw; falling back to a full reload", error);
     return false;
   }
 }
@@ -209,7 +210,6 @@ export interface SoftReloadOptions {
   currentTimeOverride?: number;
   /** After-write file HTML — the primary source for the authored opacity and transform restore. */
   authoredHtml?: string;
-  reparse?: Element[];
   /** Other composition files a reset element is written in, by path; null when one could not be read. */
   nestedFiles?: Map<string, string> | null;
 }
@@ -274,7 +274,7 @@ export function applySoftReload(
   scriptText: string,
   options: SoftReloadOptions = {},
 ): SoftReloadResult {
-  const { onAsyncFailure, currentTimeOverride, authoredHtml, reparse = [] } = options;
+  const { onAsyncFailure, currentTimeOverride, authoredHtml } = options;
   if (!iframe || !scriptText) return "cannot-soft-reload";
 
   const win = iframe.contentWindow as IframeWindow | null;
@@ -347,7 +347,7 @@ export function applySoftReload(
   // fallow-ignore-next-line complexity
   const doReload = () => {
     const timelines = win.__timelines;
-    const targets = collectResetTargets(win, doc, targetKeys, reparse);
+    const targets = collectResetTargets(win, doc, targetKeys);
 
     // Kill ONLY the target composition's timeline(s) — leaving every other
     // composition's timeline (and its children on the global timeline) intact.
@@ -370,16 +370,11 @@ export function applySoftReload(
     // HTML `style=""` attribute. Save → clear → restore → what GSAP wrote, from the file.
     const allTargets = [...targets.keys()];
     if (allTargets.length > 0 && win.gsap?.set) {
-      const saved: Array<[HTMLElement, string]> = [];
-      for (const el of allTargets) {
-        // Iframe-realm node: instanceof HTMLElement fails across realms, and
-        // gsap targets() only yields elements here — style access is duck-typed.
-        const styled = el as HTMLElement;
-        if (styled.style?.cssText != null) saved.push([styled, styled.style.cssText]);
-      }
-      try {
-        win.gsap.set(allTargets, { clearProps: "all" });
-      } catch {}
+      // Iframe-realm nodes: instanceof HTMLElement fails across realms, so style access is duck-typed.
+      const saved = allTargets.map(
+        (el) => [el as HTMLElement, (el as HTMLElement).style.cssText] as const,
+      );
+      win.gsap.set(allTargets, { clearProps: "all" });
       for (const [el, css] of saved) {
         const s = el.style;
         s.cssText = css;

package/src/utils/gsapUndoRestore.browser.test.ts

@@ -16,11 +16,9 @@ const CROP = "inset(0px 40px 0px 0px)";
 vi.setConfig({ testTimeout: 60_000, hookTimeout: 60_000 });
 let browser: Browser;
 let undoBundle: string;
+let softReloadBundle: string;
 
-beforeAll(async () => {
-  const executablePath = findSystemChrome();
-  if (!executablePath) throw new Error("no Chrome found: set HYPERFRAMES_BROWSER_PATH");
-  browser = await puppeteer.launch({ executablePath, headless: true, args: ["--no-sandbox"] });
+async function bundle(file: string, name: string): Promise<string> {
   const out = await build({
     configFile: false,
     logLevel: "silent",
@@ -30,44 +28,46 @@ beforeAll(async () => {
     build: {
       write: false,
       minify: false,
-      lib: {
-        entry: fileURLToPath(new URL("./gsapUndoRestore.ts", import.meta.url)),
-        formats: ["iife"],
-        name: "hfUndo",
-      },
+      lib: { entry: fileURLToPath(new URL(file, import.meta.url)), formats: ["iife"], name },
     },
   });
-  undoBundle = (Array.isArray(out) ? out[0]! : (out as { output: [{ code: string }] })).output[0]
-    .code;
+  return (Array.isArray(out) ? out[0]! : (out as { output: [{ code: string }] })).output[0].code;
+}
+
+beforeAll(async () => {
+  const executablePath = findSystemChrome();
+  if (!executablePath) throw new Error("no Chrome found: set HYPERFRAMES_BROWSER_PATH");
+  browser = await puppeteer.launch({ executablePath, headless: true, args: ["--no-sandbox"] });
+  undoBundle = await bundle("./gsapUndoRestore.ts", "hfUndo");
+  softReloadBundle = await bundle("./gsapSoftReload.ts", "hfSoftReload");
 });
 
 afterAll(() => browser?.close());
 
-it.each([
-  { gsap: "hold", placement: "px", rotation: 0 },
-  { gsap: "tween", placement: "px", rotation: 0 },
-  { gsap: "tween", placement: "xpercent", rotation: 30 },
-])("an undone crop leaves a $gsap $placement r$rotation layer where it was", async (spec) => {
+type Spec = { gsap: string; placement: string; rotation: number; time: number };
+
+/** The bench's root crop fixture, shown at `spec.time` with the module under test loaded. */
+async function openCase(spec: Spec, moduleBundle: string) {
   const dir = join(mkdtempSync(join(tmpdir(), "undo-gsap-")), "case");
   writeFixture({ gesture: "crop", nesting: "root", zoom: 100, ...spec }, dir);
   const restored = readFileSync(join(dir, "index.html"), "utf8");
-  const previous = restored.replace(
-    `<div id="target"`,
-    `<div id="target" style="clip-path: ${CROP}"`,
-  );
   const page = await browser.newPage();
   await page.setViewport({ width: 1920, height: 1080 });
   await page.setRequestInterception(true);
+  // Only the fixture's GSAP CDN script is served; anything else is refused, never fetched.
   page.on("request", (request) =>
     request.url().endsWith("/gsap.min.js")
       ? request.respond({ body: readFileSync(require.resolve("gsap/dist/gsap.min.js"), "utf8") })
-      : request.continue(),
+      : request.abort("blockedbyclient"),
   );
   await page.setContent(restored, { waitUntil: "load" });
   await page.evaluate(readFileSync(require.resolve("@hyperframes/core/runtime"), "utf8"));
   await page.waitForFunction(() => "__player" in window);
-  await page.evaluate(undoBundle);
-
+  await page.evaluate(moduleBundle);
+  await page.evaluate(
+    (time) => (window as unknown as { __player: { seek(t: number): void } }).__player.seek(time),
+    spec.time,
+  );
   const box = () =>
     page.evaluate(() => {
       const { left, top, width, height } = document
@@ -75,22 +75,75 @@ it.each([
         .getBoundingClientRect();
       return [left, top, width, height].map((n) => Math.round(n * 100) / 100);
     });
-  await page.evaluate(() =>
-    (window as unknown as { __player: { seek(t: number): void } }).__player.seek(1),
-  );
-  const before = await box();
-  const outcome = await page.evaluate(
-    (files, crop) => {
-      document.getElementById("target")!.style.setProperty("clip-path", crop);
-      const undo = (window as unknown as { hfUndo: typeof import("./gsapUndoRestore") }).hfUndo;
-      const iframe = { contentDocument: document, contentWindow: window } as HTMLIFrameElement;
-      return undo.applyUndoRestoreToPreview(iframe, "index.html", files, 1, () => {});
-    },
-    { "index.html": { previous, restored } },
-    CROP,
-  );
+  return { page, restored, box };
+}
 
-  expect(outcome).toBe("soft");
-  expect(await box()).toEqual(before);
-  await page.close();
-});
+// The first case opens the cold browser's first page, which overran 5 s on a loaded CI runner.
+it.each([
+  { gsap: "hold", placement: "px", rotation: 0, time: 1 },
+  { gsap: "tween", placement: "px", rotation: 0, time: 1 },
+  { gsap: "tween", placement: "xpercent", rotation: 30, time: 1 },
+  { gsap: "keys", placement: "px", rotation: 0, time: 1 },
+  { gsap: "keys", placement: "px", rotation: 30, time: 2 },
+  { gsap: "scale", placement: "px", rotation: 0, time: 1 },
+  { gsap: "spin", placement: "px", rotation: 30, time: 1 },
+  { gsap: "fromto", placement: "px", rotation: 0, time: 1 },
+])(
+  "an undone crop leaves a $gsap $placement r$rotation layer at t$time where it was",
+  async (spec) => {
+    const { page, restored, box } = await openCase(spec, undoBundle);
+    const previous = restored.replace(
+      `<div id="target"`,
+      `<div id="target" style="clip-path: ${CROP}"`,
+    );
+    const before = await box();
+    const outcome = await page.evaluate(
+      (files, crop, time) => {
+        document.getElementById("target")!.style.setProperty("clip-path", crop);
+        const undo = (window as unknown as { hfUndo: typeof import("./gsapUndoRestore") }).hfUndo;
+        const iframe = { contentDocument: document, contentWindow: window } as HTMLIFrameElement;
+        return undo.applyUndoRestoreToPreview(iframe, "index.html", files, time, () => {});
+      },
+      { "index.html": { previous, restored } },
+      CROP,
+      spec.time,
+    );
+
+    expect(outcome).toBe("soft");
+    expect(await box()).toEqual(before);
+    await page.close();
+  },
+  30_000,
+);
+
+// A drop saves the file and soft-reloads it; the re-run must place an animated layer where it was.
+it.each([
+  { gsap: "tween", placement: "px", rotation: 0, time: 1 },
+  { gsap: "keys", placement: "px", rotation: 30, time: 2 },
+  { gsap: "spin", placement: "px", rotation: 0, time: 1 },
+])(
+  "a soft reload keeps a $gsap $placement r$rotation layer at t$time where it was",
+  async (spec) => {
+    const { page, restored, box } = await openCase(spec, softReloadBundle);
+    const before = await box();
+    const outcome = await page.evaluate(
+      (html, time) => {
+        const soft = (window as unknown as { hfSoftReload: typeof import("./gsapSoftReload") })
+          .hfSoftReload;
+        const iframe = { contentDocument: document, contentWindow: window } as HTMLIFrameElement;
+        const script = soft.extractGsapScriptText(html)!;
+        return soft.applySoftReload(iframe, script, {
+          currentTimeOverride: time,
+          authoredHtml: html,
+        });
+      },
+      restored,
+      spec.time,
+    );
+
+    expect(outcome).toBe("applied");
+    expect(await box()).toEqual(before);
+    await page.close();
+  },
+  30_000,
+);

package/src/utils/gsapUndoRestore.ts

@@ -398,20 +398,17 @@ export function applyUndoRestoreToPreview(
   const active = files[activeDocPath];
   const restoredScript = active ? extractGsapScriptText(active.restored) : null;
   const previousScript = active ? extractGsapScriptText(active.previous) : null;
-  const reparse = plan.scripted
-    ? plan.targets.map(({ live }) => live).filter((el) => "_gsap" in el)
-    : [];
-  if (reparse.length && !restoredScript) {
+  const reparse = plan.scripted && plan.targets.some(({ live }) => "_gsap" in live);
+  if (reparse && !restoredScript) {
     reloadPreview();
     return "full";
   }
-  if (restoredScript && (restoredScript !== previousScript || reparse.length)) {
+  if (restoredScript && (restoredScript !== previousScript || reparse)) {
     syncStaleEditMarks(doc, active);
     const result = applySoftReload(iframe, restoredScript, {
       onAsyncFailure: reloadPreview,
       currentTimeOverride: currentTime,
       authoredHtml: active.restored,
-      reparse,
       nestedFiles,
     });
     if (result === "cannot-soft-reload") {

package/src/utils/previewPrefetch.ts

@@ -1,5 +1,6 @@
 import { applyPreviewVariablesToUrl } from "../hooks/previewVariablesStore";
 import { buildProjectApiPath, parseProjectIdFromHash } from "./projectRouting";
+import { studioApiFetch } from "./studioApiFetch";
 
 let prefetched: string | null = null;
 
@@ -10,5 +11,5 @@ export function prefetchPreviewForHash(hash: string): void {
   prefetched = projectId;
   const url = new URL(buildProjectApiPath(projectId, "/preview"), window.location.origin);
   applyPreviewVariablesToUrl(url);
-  fetch(url).catch(() => undefined);
+  studioApiFetch(url).catch(() => undefined);
 }

package/src/utils/razorSplitTransaction.ts

@@ -6,6 +6,7 @@ import { serializeStudioFileMutations } from "./studioFileMutationCoordinator";
 import { buildProjectApiPath } from "./projectRouting";
 import { markStudioWriteToken } from "./studioFileVersion";
 import { resolveElementTrack } from "./studioHelpers";
+import { studioApiFetch } from "./studioApiFetch";
 
 type ProjectFileWriter = (path: string, content: string, expectedContent?: string) => Promise<void>;
 
@@ -101,7 +102,7 @@ export function buildAtomicCutIntents(
 }
 
 async function readFileVersion(projectId: string, path: string): Promise<string> {
-  const response = await fetch(
+  const response = await studioApiFetch(
     buildProjectApiPath(projectId, `/files/${encodeURIComponent(path)}`),
   );
   if (!response.ok) throw new Error(`Failed to read ${path} before cut (${response.status})`);
@@ -124,14 +125,17 @@ async function requestAtomicCut(
   }
   const transactionToken = `cut:${crypto.randomUUID()}`;
   markStudioWriteToken(transactionToken);
-  const response = await fetch(buildProjectApiPath(projectId, "/file-mutations/split-batch"), {
-    method: "POST",
-    headers: {
-      "Content-Type": "application/json",
-      "X-Hyperframes-Write-Token": transactionToken,
+  const response = await studioApiFetch(
+    buildProjectApiPath(projectId, "/file-mutations/split-batch"),
+    {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        "X-Hyperframes-Write-Token": transactionToken,
+      },
+      body: JSON.stringify({ files, transactionToken }),
     },
-    body: JSON.stringify({ files, transactionToken }),
-  });
+  );
   const body = (await response.json().catch(() => null)) as
     | (Partial<CutBatchResponse> & { error?: string; outcome?: string })
     | null;

package/src/utils/softReloadTargets.ts

@@ -1,8 +1,9 @@
 // Which elements a GSAP soft reload resets, what their tweens wrote, and which file writes each.
 import { parseSavedSource } from "./authoredSource";
+import { elementTargets } from "./elementGsap";
 
 type TweenLike = {
-  targets?: () => Element[];
+  targets?: () => unknown[];
   vars?: Record<string, unknown>;
   getChildren?: (deep: boolean) => TweenLike[];
 };
@@ -36,7 +37,7 @@ export function authoringFile(el: Element): string | null {
 
 function addTweenTargets(tween: TweenLike, targets: Map<Element, Set<string>>): void {
   const props = tweenedProps(tween.vars);
-  for (const el of tween.targets?.() ?? []) {
+  for (const el of elementTargets(tween)) {
     const seen = targets.get(el) ?? new Set<string>();
     for (const prop of props) seen.add(prop);
     targets.set(el, seen);
@@ -48,10 +49,8 @@ export function collectResetTargets(
   win: { __timelines?: Record<string, unknown> },
   doc: Document,
   targetKeys: string[],
-  reparse: Element[] = [],
 ): Map<Element, Set<string>> {
-  // Elements the caller needs GSAP to parse again, with nothing tweened yet.
-  const targets = new Map<Element, Set<string>>(reparse.map((el) => [el, new Set<string>()]));
+  const targets = new Map<Element, Set<string>>();
   const timelines = (win.__timelines ?? {}) as Record<string, TweenLike | undefined>;
   const others = new Set<unknown>(
     Object.entries(timelines).flatMap(([key, tl]) => (targetKeys.includes(key) ? [] : [tl])),
@@ -70,7 +69,7 @@ function tweenTargetsIn(timelines: Set<unknown>): Set<Element> {
   for (const tl of timelines) {
     try {
       for (const tween of (tl as TweenLike | undefined)?.getChildren?.(true) ?? []) {
-        for (const el of tween.targets?.() ?? []) els.add(el);
+        for (const el of elementTargets(tween)) els.add(el);
       }
     } catch {}
   }

package/src/utils/studioApiFetch.test.ts

@@ -0,0 +1,75 @@
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+async function loadWithEnv(env: Record<string, string>) {
+  vi.resetModules();
+  for (const [key, value] of Object.entries(env)) vi.stubEnv(key, value);
+  return import("./studioApiFetch");
+}
+
+describe("studioApiFetch", () => {
+  afterEach(() => {
+    vi.unstubAllGlobals();
+    vi.unstubAllEnvs();
+    vi.resetModules();
+  });
+
+  it("sends Studio's requests without credentials, keeping the caller's options", async () => {
+    const fetchMock = vi.fn(async () => new Response("ok"));
+    vi.stubGlobal("fetch", fetchMock);
+    const { studioApiFetch } = await loadWithEnv({});
+    const signal = new AbortController().signal;
+
+    await studioApiFetch("/api/projects/demo/history/step", { method: "POST", signal });
+
+    expect(fetchMock).toHaveBeenCalledWith("/api/projects/demo/history/step", {
+      method: "POST",
+      signal,
+      credentials: "omit",
+    });
+  });
+
+  it.each([
+    ["the CLI or Studio dev server", "http://localhost:5190/"],
+    ["Desktop's own server", "http://127.0.0.1:43117/"],
+    ["IPv6 loopback", "http://[::1]:8080/"],
+  ])("leaves cookies out when Studio is served from %s", async (_, page) => {
+    const fetchMock = vi.fn(async () => new Response("ok"));
+    vi.stubGlobal("fetch", fetchMock);
+    vi.stubGlobal("location", new URL(page));
+    const { studioApiFetch } = await loadWithEnv({});
+
+    await studioApiFetch("/api/projects/demo/files/index.html");
+
+    expect(fetchMock).toHaveBeenCalledWith("/api/projects/demo/files/index.html", {
+      credentials: "omit",
+    });
+  });
+
+  it("keeps same-origin cookies off loopback, where a proxy or tunnel may authenticate with them", async () => {
+    const fetchMock = vi.fn(async () => new Response("ok"));
+    vi.stubGlobal("fetch", fetchMock);
+    vi.stubGlobal("location", new URL("https://studio.example.com/editor"));
+    const { studioApiFetch } = await loadWithEnv({});
+
+    await studioApiFetch("/api/projects/demo/files/index.html");
+
+    expect(fetchMock).toHaveBeenCalledWith("/api/projects/demo/files/index.html", {
+      credentials: "same-origin",
+    });
+  });
+
+  it("sends same-origin credentials on loopback for a host that opted out", async () => {
+    vi.stubGlobal("location", new URL("http://localhost:5190/"));
+    const fetchMock = vi.fn(async () => new Response("ok"));
+    vi.stubGlobal("fetch", fetchMock);
+    const { studioApiFetch } = await loadWithEnv({
+      VITE_STUDIO_API_SAME_ORIGIN_CREDENTIALS: "true",
+    });
+
+    await studioApiFetch("/api/projects/demo/files/index.html");
+
+    expect(fetchMock).toHaveBeenCalledWith("/api/projects/demo/files/index.html", {
+      credentials: "same-origin",
+    });
+  });
+});

package/src/utils/studioApiFetch.ts

@@ -0,0 +1,13 @@
+import { STUDIO_API_SAME_ORIGIN_CREDENTIALS } from "../components/editor/manualEditingAvailability";
+
+const LOOPBACK_HOSTS = new Set(["localhost", "127.0.0.1", "[::1]"]);
+
+function studioApiCredentials(): RequestCredentials {
+  if (STUDIO_API_SAME_ORIGIN_CREDENTIALS) return "same-origin";
+  const host = globalThis.location?.hostname;
+  return !host || LOOPBACK_HOSTS.has(host) ? "omit" : "same-origin";
+}
+
+export function studioApiFetch(input: RequestInfo | URL, init?: RequestInit): Promise<Response> {
+  return globalThis.fetch(input, { ...init, credentials: studioApiCredentials() });
+}