@hyperframes/studio 0.8.115 → 0.8.116

package/src/hooks/useProjectFileWriter.ts

@@ -6,11 +6,22 @@ import {
   StudioSaveNetworkError,
 } from "../utils/studioSaveDiagnostics";
 import { studioExpectedFileVersion, studioWriteHeaders } from "../utils/studioFileVersion";
+import { studioApiFetch } from "../utils/studioApiFetch";
 
 export interface UseProjectFileWriterOptions {
   projectId: string | null;
 }
 
+async function fetchProjectFile(projectId: string | null, path: string, query: string) {
+  if (!projectId) throw new Error("No active project");
+  const response = await studioApiFetch(
+    `/api/projects/${encodeURIComponent(projectId)}/files/${encodeURIComponent(path)}${query}`,
+  );
+  if (!response.ok) throw new Error(`Failed to read ${path}`);
+  const data = (await response.json()) as { content?: string; version?: string };
+  return { content: data.content, version: data.version ?? response.headers.get("etag") };
+}
+
 // The etag-guarded project-file read/write pair every Studio save path
 // shares. A host mounting hand editing outside Studio needs only this, not
 // the full file manager (file tree, editor tabs, uploads, font assets).
@@ -30,29 +41,19 @@ export function useProjectFileWriter({ projectId }: UseProjectFileWriterOptions)
 
   const readProjectFile = useCallback(
     async (path: string): Promise<string> => {
-      if (!projectId) throw new Error("No active project");
-      const response = await fetch(
-        `/api/projects/${encodeURIComponent(projectId)}/files/${encodeURIComponent(path)}`,
-      );
-      if (!response.ok) throw new Error(`Failed to read ${path}`);
-      const data = (await response.json()) as { content?: string; version?: string };
-      if (typeof data.content !== "string") throw new Error(`Missing file contents for ${path}`);
-      fileVersions.set(path, data.version ?? response.headers.get("etag"));
-      return data.content;
+      const { content, version } = await fetchProjectFile(projectId, path, "");
+      if (typeof content !== "string") throw new Error(`Missing file contents for ${path}`);
+      fileVersions.set(path, version);
+      return content;
     },
     [fileVersions, projectId],
   );
 
   const readOptionalProjectFile = useCallback(
     async (path: string): Promise<string> => {
-      if (!projectId) throw new Error("No active project");
-      const response = await fetch(
-        `/api/projects/${encodeURIComponent(projectId)}/files/${encodeURIComponent(path)}?optional=1`,
-      );
-      if (!response.ok) throw new Error(`Failed to read ${path}`);
-      const data = (await response.json()) as { content?: string; version?: string };
-      fileVersions.set(path, data.version ?? response.headers.get("etag"));
-      return typeof data.content === "string" ? data.content : "";
+      const { content, version } = await fetchProjectFile(projectId, path, "?optional=1");
+      fileVersions.set(path, version);
+      return typeof content === "string" ? content : "";
     },
     [fileVersions, projectId],
   );
@@ -63,7 +64,7 @@ export function useProjectFileWriter({ projectId }: UseProjectFileWriterOptions)
       const writeProjectId = projectId;
       let expectedVersion = await studioExpectedFileVersion(fileVersions, path, expectedContent);
       if (expectedVersion === undefined) {
-        const preflight = await fetch(
+        const preflight = await studioApiFetch(
           `/api/projects/${encodeURIComponent(writeProjectId)}/files/${encodeURIComponent(path)}`,
         );
         if (preflight.ok) {
@@ -86,7 +87,7 @@ export function useProjectFileWriter({ projectId }: UseProjectFileWriterOptions)
         // the retry can produce a second filesystem receipt that must be suppressed independently.
         let response: Response;
         try {
-          response = await fetch(
+          response = await studioApiFetch(
             `/api/projects/${encodeURIComponent(writeProjectId)}/files/${encodeURIComponent(path)}`,
             {
               method: "PUT",

package/src/hooks/useRemoveBackground.ts

@@ -1,6 +1,7 @@
 import { useCallback, useEffect, useRef } from "react";
 import { waitForMediaJob } from "../components/studioMediaJobs";
 import type { BackgroundRemovalProgress } from "../components/editor/propertyPanelTypes";
+import { studioApiFetch } from "../utils/studioApiFetch";
 
 interface RemoveBackgroundOptions {
   createBackgroundPlate?: boolean;
@@ -31,7 +32,7 @@ export function useRemoveBackground(
   return useCallback(
     // fallow-ignore-next-line complexity
     async (inputPath: string, options: RemoveBackgroundOptions) => {
-      const response = await fetch(
+      const response = await studioApiFetch(
         `/api/projects/${encodeURIComponent(projectId)}/media/remove-background`,
         {
           method: "POST",

package/src/hooks/useSdkSession.ts

@@ -6,6 +6,7 @@ import { trackStudioEvent } from "../utils/studioTelemetry";
 import type { PublishSdkSession } from "../utils/sdkCutover";
 import { addExternalFileReloadListener } from "./externalFileReloadBus";
 import { whenPreviewBooted } from "../player/store/playerStore";
+import { studioApiFetch } from "../utils/studioApiFetch";
 
 /**
  * Why an optional project-file read produced no usable content. `stage: "read"`
@@ -194,7 +195,7 @@ async function readProjectFileOptional(
   let res: Response;
   const fetchStarted = performance.now();
   try {
-    res = await fetch(
+    res = await studioApiFetch(
       `/api/projects/${encodeURIComponent(projectId)}/files/${encodeURIComponent(path)}?optional=1`,
     );
   } catch {

package/src/hooks/useServerConnection.ts

@@ -2,6 +2,7 @@ import { useEffect, useState } from "react";
 import { buildProjectHash, parseProjectIdFromHash } from "../utils/projectRouting";
 import { useMountEffect } from "./useMountEffect";
 import { trackStudioEvent } from "../utils/studioTelemetry";
+import { studioApiFetch } from "../utils/studioApiFetch";
 
 interface ServerConnectionState {
   projectId: string | null;
@@ -37,7 +38,7 @@ type ProjectHashVerdict = {
 
 async function resolveHashProject(id: string): Promise<ProjectHashVerdict> {
   try {
-    const res = await fetch(`/api/projects/${encodeURIComponent(id)}`);
+    const res = await studioApiFetch(`/api/projects/${encodeURIComponent(id)}`);
     if (res.ok) return { outcome: "ok", status: res.status };
     return { outcome: res.status === 404 ? "missing" : "unknown", status: res.status };
   } catch {
@@ -72,7 +73,7 @@ function replaceProjectHash(projectId: string): void {
  */
 async function firstProjectId(): Promise<string | null> {
   try {
-    const res = await fetch("/api/projects");
+    const res = await studioApiFetch("/api/projects");
     const data = (await res.json()) as { projects?: Array<{ id?: string }> };
     return data.projects?.[0]?.id ?? null;
   } catch {
@@ -107,7 +108,7 @@ export function useServerConnection(): ServerConnectionState {
     }
 
     function tryConnect() {
-      fetch("/api/projects")
+      studioApiFetch("/api/projects")
         .then((r) => r.json())
         .then(async (data) => {
           if (cancelled) return;

package/src/hooks/useStudioSelectionPublisher.ts

@@ -3,6 +3,7 @@ import type { DomEditSelection } from "../components/editor/domEditing";
 import { usePlayerStore } from "../player";
 import { buildStudioSelectionSnapshot } from "../utils/studioSelectionSnapshot";
 import { trackStudioEvent } from "../utils/studioTelemetry";
+import { studioApiFetch } from "../utils/studioApiFetch";
 
 interface UseStudioSelectionPublisherParams {
   projectId: string | null;
@@ -26,7 +27,7 @@ function reportSelectionPublishError(error: unknown): void {
 }
 
 function putSelection(projectId: string, selection: unknown, signal?: AbortSignal): Promise<void> {
-  return fetch(`/api/projects/${encodeURIComponent(projectId)}/selection`, {
+  return studioApiFetch(`/api/projects/${encodeURIComponent(projectId)}/selection`, {
     method: "PUT",
     headers: { "Content-Type": "application/json" },
     body: JSON.stringify({ selection }),

package/src/hooks/useThumbnailStill.test.ts

@@ -0,0 +1,100 @@
+// @vitest-environment happy-dom
+
+import React, { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { thumbnailScheduler } from "../player/lib/thumbnailScheduler";
+// By package name, as a host imports it: the test fails if the export goes.
+import { useThumbnailStill, type ThumbnailStill } from "@hyperframes/studio";
+
+Object.defineProperty(globalThis, "IS_REACT_ACT_ENVIRONMENT", { configurable: true, value: true });
+
+class MockImage {
+  onload: (() => void) | null = null;
+  onerror: (() => void) | null = null;
+  naturalWidth = 320;
+  naturalHeight = 180;
+  set src(_value: string) {
+    queueMicrotask(() => this.onload?.());
+  }
+}
+
+const URL_ONE = "http://localhost:3000/api/projects/demo/thumbnail/index.html?t=1.00&revision=1";
+const originalImage = globalThis.Image;
+const originalFetch = globalThis.fetch;
+const originalCreate = URL.createObjectURL;
+const originalRevoke = URL.revokeObjectURL;
+let host: HTMLDivElement;
+let root: Root | null = null;
+let shown: ThumbnailStill | null = null;
+
+function Still({ url }: { url: string | null }) {
+  shown = useThumbnailStill(url, "demo");
+  return null;
+}
+
+const mount = (url: string | null) =>
+  act(async () => {
+    root ??= createRoot(host);
+    root.render(React.createElement(Still, { url }));
+  });
+
+beforeEach(() => {
+  globalThis.Image = MockImage as unknown as typeof Image;
+  globalThis.fetch = vi.fn(async () => new Response(new Blob(["still"]), { status: 200 }));
+  URL.createObjectURL = vi.fn(() => "blob:still");
+  URL.revokeObjectURL = vi.fn();
+  shown = null;
+  host = document.createElement("div");
+  document.body.append(host);
+});
+
+afterEach(() => {
+  act(() => root?.unmount());
+  root = null;
+  thumbnailScheduler.setPreviewReloading(false);
+  thumbnailScheduler.invalidateProject("demo");
+  globalThis.Image = originalImage;
+  globalThis.fetch = originalFetch;
+  URL.createObjectURL = originalCreate;
+  URL.revokeObjectURL = originalRevoke;
+  document.body.replaceChildren();
+});
+
+describe("useThumbnailStill", () => {
+  it("hands back the still's object URL once the scheduler has loaded it", async () => {
+    await mount(URL_ONE);
+    expect(globalThis.fetch).toHaveBeenCalledWith(URL_ONE, expect.anything());
+    await vi.waitFor(() => expect(shown).toEqual({ status: "ready", url: "blob:still" }));
+  });
+
+  it("hands back the same object while nothing changes", async () => {
+    await mount(URL_ONE);
+    await vi.waitFor(() => expect(shown).toEqual({ status: "ready", url: "blob:still" }));
+    const first = shown;
+    await mount(URL_ONE);
+    expect(shown).toBe(first);
+  });
+
+  it("asks for nothing without a url", async () => {
+    await mount(null);
+    expect(globalThis.fetch).not.toHaveBeenCalled();
+    expect(shown).toEqual({ status: "loading" });
+  });
+
+  it("says failed when the still cannot load, so a host can fall back", async () => {
+    globalThis.fetch = vi.fn(async () => new Response("", { status: 500 }));
+    await mount(URL_ONE);
+    await vi.waitFor(() => expect(shown).toEqual({ status: "failed" }));
+  });
+
+  it("holds the fetch while a preview reloads, and runs it once the reload is over", async () => {
+    thumbnailScheduler.setPreviewReloading(true);
+    await mount(URL_ONE);
+    expect(globalThis.fetch).not.toHaveBeenCalled();
+    expect(shown).toEqual({ status: "loading" });
+    await act(async () => thumbnailScheduler.setPreviewReloading(false));
+    expect(globalThis.fetch).toHaveBeenCalledTimes(1);
+    await vi.waitFor(() => expect(shown).toEqual({ status: "ready", url: "blob:still" }));
+  });
+});

package/src/hooks/useThumbnailStill.ts

@@ -0,0 +1,37 @@
+import { useMemo } from "react";
+import { compositionThumbnailRequest } from "../player/components/CompositionThumbnail";
+import type { ThumbnailPriority } from "../player/lib/thumbnailScheduler";
+import { useThumbnailLease } from "./useThumbnailLease";
+
+export interface UseThumbnailStillOptions {
+  sessionEpoch?: number;
+  priority?: ThumbnailPriority;
+}
+
+export type ThumbnailStill =
+  | { status: "loading" }
+  | { status: "ready"; url: string }
+  | { status: "failed" };
+
+const LOADING: ThumbnailStill = Object.freeze({ status: "loading" });
+const FAILED: ThumbnailStill = Object.freeze({ status: "failed" });
+
+/** A host picture's server still through the thumbnail scheduler, so it yields to a preview reload. */
+export function useThumbnailStill(
+  url: string | null,
+  projectId: string,
+  { sessionEpoch = 0, priority = "visible" }: UseThumbnailStillOptions = {},
+): ThumbnailStill {
+  const request = useMemo(
+    () => (url ? compositionThumbnailRequest(url, projectId, { sessionEpoch, priority }) : null),
+    [priority, projectId, sessionEpoch, url],
+  );
+  const snapshot = useThumbnailLease(request);
+  const ready =
+    snapshot.status === "ready" && snapshot.value.kind === "image" ? snapshot.value.url : null;
+  return useMemo(
+    () =>
+      ready ? { status: "ready", url: ready } : snapshot.status === "error" ? FAILED : LOADING,
+    [ready, snapshot.status],
+  );
+}

package/src/hooks/useTimelineDeleteOps.ts

@@ -21,6 +21,7 @@ import type {
   TimelineGroupCommitOptions,
   TimelineGroupMoveChange,
 } from "./useTimelineGroupEditing";
+import { studioApiFetch } from "../utils/studioApiFetch";
 
 /** Apply already-resolved ripple changes to the surviving elements for the
  *  optimistic store update after a delete. Pure — no IO. */
@@ -130,7 +131,7 @@ export function useTimelineDeleteOps({
                 }
                 return patchTarget;
               });
-              const removeResponse = await fetch(
+              const removeResponse = await studioApiFetch(
                 buildProjectApiPath(
                   pid,
                   `/file-mutations/remove-elements/${encodeURIComponent(targetPath)}`,

package/src/index.ts

@@ -76,6 +76,8 @@ export type { AudioWaveformProps } from "./player/components/AudioWaveform";
 export { ImageThumbnail } from "./player/components/ImageThumbnail";
 export type { ImageThumbnailProps } from "./player/components/ImageThumbnail";
 export { useRenderClipContent } from "./hooks/useRenderClipContent";
+export { useThumbnailStill } from "./hooks/useThumbnailStill";
+export type { ThumbnailStill, UseThumbnailStillOptions } from "./hooks/useThumbnailStill";
 export type { UseRenderClipContentOptions } from "./hooks/useRenderClipContent";
 export type { ThumbnailPriority } from "./player/lib/thumbnailScheduler";
 export type {
@@ -208,6 +210,8 @@ export type { DomEditZOrder } from "./components/editor/useDomEditZOrder";
 export type { ZOrderAction } from "./components/editor/canvasContextMenuZOrder";
 export type { DomEditCapabilities, DomEditSelection } from "./components/editor/domEditingTypes";
 export { useDomStyleCommit } from "./hooks/useDomStyleCommit";
+export { ColorField } from "./components/editor/propertyPanelColor";
+export { GradientField } from "./components/editor/propertyPanelFill";
 export type { UseDomStyleCommitOptions } from "./hooks/useDomStyleCommit";
 export type { DomEditCommitDeclineReason, DomEditCommitOutcome } from "./hooks/domEditCommitRunner";
 export { resolveDomEditSelection } from "./components/editor/domEditingLayers";

package/src/player/components/AudioWaveform.tsx

@@ -5,6 +5,7 @@ import { useThumbnailLease } from "../../hooks/useThumbnailLease";
 import { createThumbnailKey, type ThumbnailPriority } from "../lib/thumbnailScheduler";
 import { decimatePeaks, loudnessToOpacity } from "./audioWaveformPeaks";
 import { ClipFadesContext, type ClipFadeShape } from "./TimelineClipFades";
+import { studioApiFetch } from "../../utils/studioApiFetch";
 
 export interface AudioWaveformProps {
   audioUrl: string;
@@ -124,7 +125,7 @@ async function loadWaveform(
 }
 
 async function fetchWaveformPeaks(url: string, signal: AbortSignal): Promise<number[]> {
-  const response = await fetch(url, { signal });
+  const response = await studioApiFetch(url, { signal });
   if (!response.ok) throw new Error(`Waveform request failed (${response.status})`);
   const data: unknown = await response.json();
   if (
@@ -140,7 +141,7 @@ async function fetchWaveformPeaks(url: string, signal: AbortSignal): Promise<num
 }
 
 async function decodeWaveformPeaks(url: string, signal: AbortSignal): Promise<number[]> {
-  const response = await fetch(url, { signal });
+  const response = await studioApiFetch(url, { signal });
   if (!response.ok) throw new Error(`Audio request failed (${response.status})`);
   const buffer = await response.arrayBuffer();
   if (signal.aborted) throw new DOMException("Aborted", "AbortError");

package/src/player/components/CompositionThumbnail.tsx

@@ -8,6 +8,7 @@ import {
 } from "../lib/thumbnailScheduler";
 import { TIMELINE_VIEWPORT_BUDGETS } from "../lib/timelineViewportBudgets";
 import { computeThumbnailStrip, probeImageAspect } from "./thumbnailUtils";
+import { studioApiFetch } from "../../utils/studioApiFetch";
 
 interface CompositionThumbnailProps {
   previewUrl: string;
@@ -106,7 +107,7 @@ export function compositionThumbnailRequest(
 }
 
 async function loadCompositionImage(url: string, signal: AbortSignal) {
-  const response = await fetch(url, { signal });
+  const response = await studioApiFetch(url, { signal });
   if (!response.ok) throw new Error(`Composition thumbnail failed (${response.status})`);
   const blob = await response.blob();
   if (signal.aborted) throw new DOMException("Aborted", "AbortError");

package/src/player/components/clipMenuNormalize.ts

@@ -4,6 +4,7 @@ import { resolveMediaPreviewUrl } from "./thumbnailUtils";
 import type { TimelineElement } from "../store/timelineElement";
 import { parseAutomation, VOLUME_TARGET } from "@hyperframes/core/audio-automation";
 import type { TimelineEditOutcome } from "../../hooks/timelineEditPermission";
+import { studioApiFetch } from "../../utils/studioApiFetch";
 
 export interface NormalizePlan {
   targetLufs: number;
@@ -74,7 +75,7 @@ function isNormalizePlan(value: unknown): value is NormalizePlan {
 export async function requestNormalizePlan(
   projectId: string,
   el: TimelineElement,
-  fetchImpl: typeof fetch = fetch,
+  fetchImpl: typeof studioApiFetch = studioApiFetch,
 ): Promise<NormalizePlan> {
   const origin = window.location.origin;
   const relative = resolvePreviewRelative(

package/src/player/components/clipPeakMap.ts

@@ -1,4 +1,5 @@
 import { buildProjectApiPath } from "../../utils/projectRouting";
+import { studioApiFetch } from "../../utils/studioApiFetch";
 import { resolvePreviewRelative } from "../../utils/previewRelativePath";
 import type { TimelineElement } from "../store/timelineElement";
 import { clipSourcePeak, isPeakMap, type ClipSourceWindow, type PeakMap } from "./clipPeakRuns";
@@ -10,7 +11,7 @@ const peakMapRequests = new Map<string, Promise<PeakMap | null>>();
 export function loadPeakMap(url: string): Promise<PeakMap | null> {
   const pending = peakMapRequests.get(url);
   if (pending) return pending;
-  const request = fetch(url)
+  const request = studioApiFetch(url)
     .then((res) => (res.ok ? res.json() : null))
     .then((body: unknown) => (isPeakMap(body) ? body : null))
     .catch(() => null);

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

@@ -209,7 +209,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 +273,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 +346,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.