@hyperframes/studio 0.7.102 → 0.7.104

package/src/hooks/useDomSelection.ts

@@ -4,11 +4,7 @@ import {
   getAllPreviewTargetsFromPointer,
   getPreviewTargetFromPointer,
 } from "../utils/studioPreviewHelpers";
-import {
-  findMatchingTimelineElementId,
-  findTimelineIdByAncestor,
-  type RightPanelTab,
-} from "../utils/studioHelpers";
+import { type RightPanelTab } from "../utils/studioHelpers";
 import {
   domEditSelectionsTargetSame,
   domEditSelectionInGroup,
@@ -24,6 +20,8 @@ import {
 } from "../components/editor/domEditing";
 import { reapplyPositionEditsAfterSeek } from "../components/editor/manualEdits";
 import { useStudioTestHooks } from "./useStudioTestHooks";
+import { logSelect } from "../utils/selectDebug";
+import { announceTimelineSelection as announceSelectionToTimeline } from "./domSelectionTimelineMirror";
 
 // ── Types ──
 
@@ -47,7 +45,10 @@ export interface UseDomSelectionParams {
   captionEditMode: boolean;
   previewIframeRef: React.MutableRefObject<HTMLIFrameElement | null>;
   timelineElements: TimelineElement[];
+  getTimelineSelectionSet: () => ReadonlySet<string>;
   setSelectedTimelineElementId: (id: string | null, options?: SelectElementOptions) => void;
+  /** Publishes a whole multi-selection to the timeline; the anchor is set separately. */
+  setTimelineSelectionSet: (ids: Set<string>) => void;
   setRightCollapsed: (collapsed: boolean) => void;
   setRightPanelTab: (tab: RightPanelTab) => void;
   previewIframe: HTMLIFrameElement | null;
@@ -109,7 +110,9 @@ export function useDomSelection({
   captionEditMode,
   previewIframeRef,
   timelineElements,
+  getTimelineSelectionSet,
   setSelectedTimelineElementId,
+  setTimelineSelectionSet,
   setRightCollapsed,
   setRightPanelTab,
   previewIframe,
@@ -145,6 +148,26 @@ export function useDomSelection({
 
   // ── Callbacks ──
 
+  const announceTimelineSelection = useCallback(
+    (group: DomEditSelection[], primary: DomEditSelection | null) =>
+      announceSelectionToTimeline(
+        {
+          timelineElements,
+          getTimelineSelectionSet,
+          setSelectedTimelineElementId,
+          setTimelineSelectionSet,
+        },
+        group,
+        primary,
+      ),
+    [
+      getTimelineSelectionSet,
+      setSelectedTimelineElementId,
+      setTimelineSelectionSet,
+      timelineElements,
+    ],
+  );
+
   const applyDomSelection = useCallback(
     // fallow-ignore-next-line complexity
     (
@@ -156,11 +179,12 @@ export function useDomSelection({
       },
     ) => {
       if (!selection) {
+        logSelect("clear", { hadGroup: domEditGroupSelectionsRef.current.length });
         domEditSelectionRef.current = null;
         domEditGroupSelectionsRef.current = [];
         setDomEditSelection(null);
         setDomEditGroupSelections([]);
-        setSelectedTimelineElementId(null);
+        announceTimelineSelection([], null);
         return;
       }
 
@@ -186,6 +210,13 @@ export function useDomSelection({
               : (nextGroup[0] ?? null)
           : selection;
 
+      logSelect("apply", {
+        additive: isAdditiveSelection,
+        target: selection.selector ?? selection.id ?? null,
+        wasInGroup,
+        prevGroup: previousGroup.length,
+        nextGroup: nextGroup.length,
+      });
       domEditSelectionRef.current = nextSelection;
       domEditGroupSelectionsRef.current = nextGroup;
       setDomEditSelection(nextSelection);
@@ -208,21 +239,13 @@ export function useDomSelection({
             setRightPanelTab("design");
           }
         }
-        const nextSelectedTimelineId =
-          findMatchingTimelineElementId(nextSelection, timelineElements) ??
-          findTimelineIdByAncestor(
-            nextSelection.element,
-            timelineElements,
-            nextSelection.sourceFile || "index.html",
-          );
-        // Late marquee notify: a primary already in the live set must not collapse it.
-        setSelectedTimelineElementId(nextSelectedTimelineId, { preserveSet: true });
+        announceTimelineSelection(nextGroup, nextSelection);
         return;
       }
 
-      setSelectedTimelineElementId(null);
+      announceTimelineSelection([], null);
     },
-    [setSelectedTimelineElementId, timelineElements, setRightCollapsed, setRightPanelTab],
+    [announceTimelineSelection, setRightCollapsed, setRightPanelTab],
   );
 
   const clearDomSelection = useCallback(() => {
@@ -375,6 +398,13 @@ export function useDomSelection({
     [applyDomSelection, buildDomSelectionForTimelineElement],
   );
 
+  // Forward handle to the group refresher defined below: the single-selection
+  // refresher falls back to it when the primary is gone, and a ref keeps that from
+  // forcing either callback to be declared in the other's dependency list.
+  const refreshDomEditGroupSelectionsFromPreviewRef = useRef<
+    (selections: DomEditSelection[]) => Promise<void>
+  >(async () => {});
+
   const refreshDomEditSelectionFromPreview = useCallback(
     // fallow-ignore-next-line complexity
     async (selection: DomEditSelection) => {
@@ -389,6 +419,17 @@ export function useDomSelection({
 
       const element = findElementForSelection(doc, selection, activeCompPath);
       if (!element) {
+        // Losing the primary is not losing the selection. When a group is live,
+        // re-resolve it and keep whoever still exists rather than wiping the lot.
+        const group = domEditGroupSelectionsRef.current;
+        logSelect("refresh-lost", {
+          target: selection.selector ?? selection.id ?? null,
+          group: group.length,
+        });
+        if (group.length > 1) {
+          await refreshDomEditGroupSelectionsFromPreviewRef.current(group);
+          return;
+        }
         applyDomSelection(null, { revealPanel: false });
         return;
       }
@@ -436,25 +477,17 @@ export function useDomSelection({
       setDomEditSelection(nextSelection);
       setDomEditGroupSelections(nextGroup);
 
-      if (nextSelection) {
-        setSelectedTimelineElementId(
-          findMatchingTimelineElementId(nextSelection, timelineElements),
-        );
-      } else {
-        setSelectedTimelineElementId(null);
-      }
+      announceTimelineSelection(nextGroup, nextSelection);
     },
-    [
-      activeCompPath,
-      buildDomSelectionFromTarget,
-      setSelectedTimelineElementId,
-      timelineElements,
-      previewIframeRef,
-    ],
+    [activeCompPath, announceTimelineSelection, buildDomSelectionFromTarget, previewIframeRef],
   );
 
   // ── Effects ──
 
+  useEffect(() => {
+    refreshDomEditGroupSelectionsFromPreviewRef.current = refreshDomEditGroupSelectionsFromPreview;
+  }, [refreshDomEditGroupSelectionsFromPreview]);
+
   // Clear hover unconditionally on composition/project/preview change
   // eslint-disable-next-line no-restricted-syntax
   useEffect(() => {
@@ -503,6 +536,7 @@ export function useDomSelection({
   const applyMarqueeSelection = useCallback(
     // fallow-ignore-next-line complexity
     (selections: DomEditSelection[], additive: boolean) => {
+      logSelect("marquee", { hits: selections.length, additive });
       if (selections.length === 0) {
         if (!additive) applyDomSelection(null, { revealPanel: false });
         return;
@@ -527,16 +561,9 @@ export function useDomSelection({
       domEditGroupSelectionsRef.current = nextGroup;
       setDomEditSelection(nextSelection);
       setDomEditGroupSelections(nextGroup);
-      const nextTimelineId =
-        findMatchingTimelineElementId(nextSelection, timelineElements) ??
-        findTimelineIdByAncestor(
-          nextSelection.element,
-          timelineElements,
-          nextSelection.sourceFile || "index.html",
-        );
-      setSelectedTimelineElementId(nextTimelineId);
+      announceTimelineSelection(nextGroup, nextSelection);
     },
-    [applyDomSelection, timelineElements, setSelectedTimelineElementId],
+    [applyDomSelection, announceTimelineSelection],
   );
 
   return {

package/src/hooks/useDomSelectionSelectionGuards.test.ts

@@ -49,6 +49,7 @@ interface HarnessProps {
   iframe: HTMLIFrameElement | null;
   timelineElements: TimelineElement[];
   setSelectedTimelineElementId?: (id: string | null, options?: SelectElementOptions) => void;
+  setTimelineSelectionSet?: (ids: Set<string>) => void;
 }
 
 function renderHarness(props: HarnessProps) {
@@ -66,7 +67,10 @@ function renderHarness(props: HarnessProps) {
       captionEditMode: false,
       previewIframeRef: { current: props.iframe },
       timelineElements: props.timelineElements,
+      getTimelineSelectionSet: () => usePlayerStore.getState().selectedElementIds,
       setSelectedTimelineElementId: props.setSelectedTimelineElementId ?? vi.fn(),
+      setTimelineSelectionSet:
+        props.setTimelineSelectionSet ?? usePlayerStore.getState().setSelectedElementIds,
       setRightCollapsed: vi.fn(),
       setRightPanelTab: props.setRightPanelTab,
       previewIframe: props.iframe,
@@ -236,7 +240,7 @@ describe("useDomSelection — marquee multi-select survives the late async prima
     iframe.remove();
   });
 
-  it("collapses the set when a late primary-set targets a non-member (fresh click)", async () => {
+  it("collapses the set to a fresh single-click target instead of publishing an empty set", async () => {
     const iframe = document.createElement("iframe");
     document.body.append(iframe);
     const doc = iframe.contentDocument!;
@@ -268,7 +272,7 @@ describe("useDomSelection — marquee multi-select survives the late async prima
       await pending;
     });
 
-    expect(usePlayerStore.getState().selectedElementIds.size).toBe(0);
+    expect([...usePlayerStore.getState().selectedElementIds]).toEqual(["d"]);
     expect(usePlayerStore.getState().selectedElementId).toBe("d");
     harness.cleanup();
     iframe.remove();

package/src/hooks/useElementLifecycleOps.ts

@@ -21,6 +21,7 @@ import {
 } from "../components/editor/useLayerRevealOverride";
 import type { CommitDomEditPatchBatches, DomEditPatchBatch } from "./domEditCommitTypes";
 import { cutoverCommittedOrThrow, type CutoverResult } from "../utils/sdkCutover";
+import { studioWriteHeaders } from "../utils/studioFileVersion";
 
 interface UseElementLifecycleOpsParams extends DomEditCommitBaseParams {
   /** Route delete through SDK when session resolves the hf-id. */
@@ -115,7 +116,7 @@ export function useElementLifecycleOps({
           `/api/projects/${pid}/file-mutations/remove-element/${encodeURIComponent(targetPath)}`,
           {
             method: "POST",
-            headers: { "Content-Type": "application/json" },
+            headers: { "Content-Type": "application/json", ...studioWriteHeaders() },
             body: JSON.stringify({ target: patchTarget }),
           },
         );

package/src/hooks/useExternalFileChangeCoordinator.ts

@@ -4,6 +4,7 @@ import { StudioFileConflictError } from "../utils/studioSaveDiagnostics";
 import type { ExternalConflictSnapshot } from "../utils/externalConflictStorage";
 import { isSelfWriteEcho } from "./sdkSelfWriteRegistry";
 import { consumeStudioWriteToken } from "../utils/studioFileVersion";
+import { logReload } from "../utils/reloadDebug";
 
 type ExternalChangeDrainResult =
   | { status: "clean" }
@@ -194,6 +195,7 @@ export function useExternalFileChangeCoordinator({
 
   const reloadAcceptedGeneration = useCallback(
     (path: string) => {
+      logReload("reload", { path, by: "external-change coordinator" });
       reloadPreview();
       reloadSdkSession(path);
     },
@@ -221,11 +223,22 @@ export function useExternalFileChangeCoordinator({
       pendingTimelinePaths.delete(path);
 
       const content = readFileChangeContent(payload);
-      if (consumeStudioWriteToken(readFileChangeWriteToken(payload))) return;
-      if (content != null && isSelfWriteEcho(path, content)) return;
+      const token = readFileChangeWriteToken(payload);
+      logReload("file-change", { path, token: token ?? null, hasContent: content != null });
+      if (consumeStudioWriteToken(token)) {
+        logReload("suppressed", { path, why: "own write token" });
+        return;
+      }
+      if (content != null && isSelfWriteEcho(path, content)) {
+        logReload("suppressed", { path, why: "own content echo" });
+        return;
+      }
 
       const identity = eventIdentity(path, payload);
-      if (!allowDuplicate && identity != null && identity === lastEventIdentityRef.current) return;
+      if (!allowDuplicate && identity != null && identity === lastEventIdentityRef.current) {
+        logReload("suppressed", { path, why: "duplicate event" });
+        return;
+      }
       lastEventIdentityRef.current = identity;
       const generation = ++generationRef.current;
       const result = await drainPendingChanges();

package/src/hooks/useFileManager.ts

@@ -10,11 +10,7 @@ import {
   StudioFileConflictError,
   StudioSaveNetworkError,
 } from "../utils/studioSaveDiagnostics";
-import {
-  createStudioWriteToken,
-  markStudioWriteToken,
-  studioExpectedFileVersion,
-} from "../utils/studioFileVersion";
+import { studioExpectedFileVersion, studioWriteHeaders } from "../utils/studioFileVersion";
 import { useFileTree } from "./useFileTree";
 import { useEditorSave } from "./useEditorSave";
 
@@ -124,8 +120,6 @@ export function useFileManager({
       await retryStudioSave(async () => {
         // Each request gets its own receipt identity. If a committed request loses its response,
         // the retry can produce a second filesystem receipt that must be suppressed independently.
-        const writeToken = createStudioWriteToken();
-        markStudioWriteToken(writeToken);
         let response: Response;
         try {
           response = await fetch(
@@ -134,7 +128,7 @@ export function useFileManager({
               method: "PUT",
               headers: {
                 "Content-Type": "text/plain",
-                "X-Hyperframes-Write-Token": writeToken,
+                ...studioWriteHeaders(),
                 ...(expectedVersion ? { "If-Match": expectedVersion } : { "If-None-Match": "*" }),
               },
               body: content,

package/src/hooks/useGroupCommits.ts

@@ -5,6 +5,7 @@ import {
   type DomEditCommitBaseParams,
 } from "../utils/studioFileHistory";
 import { buildDomEditPatchTarget, type DomEditSelection } from "../components/editor/domEditing";
+import { studioWriteHeaders } from "../utils/studioFileVersion";
 
 interface UseGroupCommitsParams extends DomEditCommitBaseParams {
   /** Resync the SDK session after a server-side write (the wrapper/unwrap changes
@@ -75,7 +76,7 @@ async function commitStructuralMutation(
     `/api/projects/${pid}/file-mutations/${route}/${encodeURIComponent(targetPath)}`,
     {
       method: "POST",
-      headers: { "Content-Type": "application/json" },
+      headers: { "Content-Type": "application/json", ...studioWriteHeaders() },
       body: JSON.stringify(body),
     },
   );

package/src/hooks/useGsapAnimationFetchFallback.ts

@@ -33,6 +33,8 @@ export type ElementAnimationsOutcome =
 export interface GsapAnimationFetchOptions {
   /** Refuse the edit when the parse endpoint is unavailable instead of treating it as no motion. */
   failOnFetchError?: boolean;
+  /** Ignore an overlapping pre-write parse and read the source after a durable write. */
+  fresh?: boolean;
 }
 
 /**
@@ -56,11 +58,13 @@ async function fetchElementAnimationsWithRetry(
   gsapSourceFile: string,
   target: { id: string | null; selector: string | null },
   failOnFetchError: boolean,
+  fresh: boolean,
 ): Promise<GsapAnimation[]> {
   let coldAttempts = 0;
   let errorAttempts = 0;
   for (;;) {
-    const parsed = await fetchParsedAnimations(projectId, gsapSourceFile);
+    const parsed = await fetchParsedAnimations(projectId, gsapSourceFile, { fresh });
+    fresh = false;
     const outcome = selectElementAnimationsOrRetry(parsed, target);
     if (outcome.kind === "resolved") return outcome.animations;
     if (outcome.kind === "fetch-error") {
@@ -89,6 +93,7 @@ export function useGsapAnimationFetchFallback(projectId: string | null, gsapSour
           gsapSourceFile,
           target,
           options?.failOnFetchError === true,
+          options?.fresh === true,
         );
       },
     [projectId, gsapSourceFile],

package/src/hooks/useGsapAwareEditing.test.tsx

@@ -301,6 +301,42 @@ describe("useGsapAwareEditing anchored resize", () => {
     act(() => root.unmount());
   });
 
+  it("reports only the first group preflight failure in input order", async () => {
+    const failures = [new Error("first blocked"), new Error("second blocked")];
+    const trackGsapInteractionFailure = vi.fn();
+    const priorDragImplementation = mocks.drag.getMockImplementation();
+    mocks.drag.mockImplementation(async (selection) => {
+      throw selection.id === "a" ? failures[0] : failures[1];
+    });
+    const { groupCommit, root } = mountGroupHandler({
+      gsapCommitMutation: vi.fn().mockResolvedValue(undefined),
+      makeFetchFallback: () => vi.fn().mockResolvedValue([]),
+      trackGsapInteractionFailure,
+    });
+    const updates = [
+      {
+        selection: { element: document.createElement("div"), id: "a", selector: "#a" },
+        next: { x: 10, y: 10 },
+      },
+      {
+        selection: { element: document.createElement("div"), id: "b", selector: "#b" },
+        next: { x: 20, y: 20 },
+      },
+    ] as unknown as DomEditGroupPathOffsetCommit[];
+
+    await expect(groupCommit(updates)).rejects.toBe(failures[0]);
+    expect(trackGsapInteractionFailure).toHaveBeenCalledOnce();
+    expect(trackGsapInteractionFailure).toHaveBeenCalledWith(
+      failures[0],
+      updates[0]?.selection,
+      "drag",
+      "Move animated layer (group)",
+    );
+    mocks.drag.mockReset();
+    if (priorDragImplementation) mocks.drag.mockImplementation(priorDragImplementation);
+    act(() => root.unmount());
+  });
+
   it("restores once when resize persistence fails", async () => {
     const error = new Error("resize failed");
     const restore = vi.fn();

package/src/hooks/useGsapAwareEditing.ts

@@ -24,7 +24,11 @@ import {
   useGsapSaveFailureTelemetry,
   useSafeGsapCommitMutation,
 } from "./useSafeGsapCommitMutation";
-import type { CommitMutation } from "./gsapScriptCommitTypes";
+import type {
+  CommitMutation,
+  CommitMutationCall,
+  CommitMutationOptions,
+} from "./gsapScriptCommitTypes";
 import { setElementGsapPosition } from "../utils/elementGsap";
 import { logResize, logResizeSettle } from "../utils/resizeDebug";
 import type { DomEditGroupPathOffsetCommit } from "../components/editor/DomEditOverlay";
@@ -37,6 +41,18 @@ import type { GsapAnimationFetchOptions } from "./useGsapAnimationFetchFallback"
 // into one another's undo entry (module-local counter, not Date.now()).
 let groupDragCommitCounter = 0;
 
+function firstPreflightFailure(
+  results: PromiseSettledResult<void>[],
+  updates: DomEditGroupPathOffsetCommit[],
+): { error: unknown; selection: DomEditSelection } | null {
+  for (const [index, result] of results.entries()) {
+    if (result.status !== "rejected") continue;
+    const selection = updates[index]?.selection;
+    if (selection) return { error: result.reason, selection };
+  }
+  return null;
+}
+
 export interface UseGsapAwareEditingParams {
   domEditSelection: DomEditSelection | null;
   selectedGsapAnimations: GsapAnimation[];
@@ -50,7 +66,7 @@ export interface UseGsapAwareEditingParams {
   ) => () => Promise<GsapAnimation[]>;
   trackGsapInteractionFailure: (
     error: unknown,
-    selection: DomEditSelection,
+    selection: DomEditSelection | null,
     mutationType: string,
     label: string,
   ) => void;
@@ -155,19 +171,54 @@ export function useGsapAwareEditing({
       // it survives the N sequential server round-trips) onto each commit —
       // otherwise each member records its own entry and it takes N presses to undo.
       const coalesceKey = `group-drag:${++groupDragCommitCounter}`;
-      const coalescedCommit: typeof gsapCommitMutation = (selection, mutation, options) =>
-        gsapCommitMutation(selection, mutation, {
-          ...options,
-          coalesceKey,
-          coalesceMs: Number.POSITIVE_INFINITY,
+      // Members are written one at a time, and a write that re-renders the preview
+      // re-runs the whole script — which still holds the OLD position of every
+      // member not yet written. Those members snap back to where they started and
+      // stay there until their own write lands, which is the single element seen
+      // jumping mid-commit while the rest of the group sat still. The drafted
+      // positions are already on screen, so holding the render until the last
+      // member has been written costs nothing and never shows a half-moved group.
+      let renderOnCommit = false;
+      const previewFallbackLatch = { pending: false };
+      const withGroupOptions = (options: CommitMutationOptions): CommitMutationOptions => ({
+        ...options,
+        coalesceKey,
+        coalesceMs: Number.POSITIVE_INFINITY,
+        deferPreviewSync: !renderOnCommit,
+        previewFallbackLatch,
+      });
+      // Every member writes the same file. Queue their mutations and send them as
+      // ONE request instead of one round trip per member: the server reads, parses
+      // and writes the composition once, and the preview patches once.
+      const queued: CommitMutationCall[] = [];
+      const flushQueued = async () => {
+        if (queued.length === 0) return;
+        const calls = queued.splice(0, queued.length);
+        if (!gsapCommitMutation.batch) {
+          for (const call of calls) {
+            await gsapCommitMutation(call.selection, call.mutation, call.options);
+          }
+          return;
+        }
+        await gsapCommitMutation.batch(calls, {
+          ...(calls.at(-1)?.options ?? { label: "Move animated layer (group)" }),
+          label: "Move animated layer (group)",
         });
+      };
+      const coalescedCommit: typeof gsapCommitMutation = (selection, mutation, options) => {
+        queued.push({ selection, mutation, options: withGroupOptions(options) });
+        return Promise.resolve();
+      };
       const preflightAnimations = new Map<DomEditSelection, GsapAnimation[]>();
       // Editability is user-atomic: prove every member can be written before
       // the first source mutation. Network failures after this point retain the
       // existing multi-request semantics, but a blocked member can never leave
       // earlier siblings partially moved.
-      for (const { selection } of updates) {
-        try {
+      // Every member reads the same file, and a preflight writes nothing — so run
+      // them together. The parse layer shares one in-flight request per file, which
+      // turns N sequential round trips into one.
+      const preflightResults = await Promise.allSettled(
+        updates.map(async ({ selection }) => {
           const animations = await makeFetchFallback(selection, { failOnFetchError: true })();
           preflightAnimations.set(selection, animations);
           const outcome = await tryGsapDragIntercept(
@@ -180,12 +231,20 @@ export function useGsapAwareEditing({
             { preflightOnly: true },
           );
           assertGsapEditPersisted(outcome);
-        } catch (error) {
-          trackGsapInteractionFailure(error, selection, "drag", "Move animated layer (group)");
-          throw error;
-        }
+        }),
+      );
+      const preflightFailure = firstPreflightFailure(preflightResults, updates);
+      if (preflightFailure) {
+        trackGsapInteractionFailure(
+          preflightFailure.error,
+          preflightFailure.selection,
+          "drag",
+          "Move animated layer (group)",
+        );
+        throw preflightFailure.error;
       }
-      for (const { selection, next } of updates) {
+      for (const [index, { selection, next }] of updates.entries()) {
+        renderOnCommit = index === updates.length - 1;
         try {
           const outcome = await tryGsapDragIntercept(
             selection,
@@ -193,7 +252,13 @@ export function useGsapAwareEditing({
             preflightAnimations.get(selection) ?? [],
             previewIframeRef.current,
             coalescedCommit,
-            makeFetchFallback(selection),
+            // The intercept re-reads the file to resolve a stale or shared tween.
+            // Anything already queued has to be on disk before that read, or it
+            // resolves against a file missing writes it is about to build on.
+            async () => {
+              await flushQueued();
+              return makeFetchFallback(selection, { fresh: true })();
+            },
             { preflightPassed: true },
           );
           assertGsapEditPersisted(outcome);
@@ -202,6 +267,14 @@ export function useGsapAwareEditing({
           throw error;
         }
       }
+      try {
+        await flushQueued();
+      } catch (error) {
+        // The aggregate write has no uniquely failing member; do not misattribute
+        // its telemetry to whichever member happened to be last in the array.
+        trackGsapInteractionFailure(error, null, "drag", "Move animated layer (group)");
+        throw error;
+      }
     },
     [gsapCommitMutation, previewIframeRef, makeFetchFallback, trackGsapInteractionFailure],
   );

package/src/hooks/useGsapInteractionFailureTelemetry.ts

@@ -8,16 +8,16 @@ export function useGsapInteractionFailureTelemetry(
   showToast: (message: string, tone?: "error" | "info") => void,
 ) {
   return useCallback(
-    (error: unknown, selection: DomEditSelection, mutationType: string, label: string) => {
+    (error: unknown, selection: DomEditSelection | null, mutationType: string, label: string) => {
       trackStudioSaveFailure({
         source: "gsap_commit",
         error,
-        filePath: selection.sourceFile ?? activeCompPath ?? "index.html",
+        filePath: selection?.sourceFile ?? activeCompPath ?? "index.html",
         mutationType,
         label,
-        targetId: selection.id,
-        targetSelector: selection.selector,
-        targetSourceFile: selection.sourceFile,
+        targetId: selection?.id,
+        targetSelector: selection?.selector,
+        targetSourceFile: selection?.sourceFile,
       });
       showToast(
         isGsapEditBlockedError(error) ? error.message : "Failed to save animated edit.",