@hyperframes/studio 0.7.90 → 0.7.93

package/src/hooks/useGsapAnimationFetchFallback.ts

@@ -30,6 +30,11 @@ export type ElementAnimationsOutcome =
   | { kind: "fetch-error" }
   | { kind: "cold" };
 
+export interface GsapAnimationFetchOptions {
+  /** Refuse the edit when the parse endpoint is unavailable instead of treating it as no motion. */
+  failOnFetchError?: boolean;
+}
+
 /**
  * Classify a parse result for one element. Differentiates a hard fetch failure
  * (`parsed === null`) from a warm-but-empty cold parse (`animations.length === 0`)
@@ -44,32 +49,48 @@ export function selectElementAnimationsOrRetry(
   return { kind: "resolved", animations: getAnimationsForElement(parsed.animations, target) };
 }
 
+// Retry policy deliberately distinguishes cold parses from hard fetch errors.
+// fallow-ignore-next-line complexity
+async function fetchElementAnimationsWithRetry(
+  projectId: string,
+  gsapSourceFile: string,
+  target: { id: string | null; selector: string | null },
+  failOnFetchError: boolean,
+): Promise<GsapAnimation[]> {
+  let coldAttempts = 0;
+  let errorAttempts = 0;
+  for (;;) {
+    const parsed = await fetchParsedAnimations(projectId, gsapSourceFile);
+    const outcome = selectElementAnimationsOrRetry(parsed, target);
+    if (outcome.kind === "resolved") return outcome.animations;
+    if (outcome.kind === "fetch-error") {
+      if (errorAttempts >= FETCH_ERROR_RETRIES) {
+        if (failOnFetchError) throw new Error("GSAP animation ownership could not be verified");
+        return [];
+      }
+      errorAttempts++;
+      await delay(FETCH_ERROR_DELAY_MS);
+      continue;
+    }
+    if (coldAttempts >= COLD_PARSE_RETRIES) return [];
+    coldAttempts++;
+    await delay(COLD_PARSE_DELAY_MS);
+  }
+}
+
 export function useGsapAnimationFetchFallback(projectId: string | null, gsapSourceFile: string) {
   return useCallback(
-    (selection: DomEditSelection) => async (): Promise<GsapAnimation[]> => {
-      if (!projectId) return [];
-      const target = { id: selection.id ?? null, selector: selection.selector ?? null };
-      // A drag can fire before the async parse is warm; a cold parse must retry
-      // rather than fall through to the no-animation path (which duplicates the
-      // tween). A hard fetch error is a different failure — retry only briefly.
-      let coldAttempts = 0;
-      let errorAttempts = 0;
-      for (;;) {
-        const parsed = await fetchParsedAnimations(projectId, gsapSourceFile);
-        const outcome = selectElementAnimationsOrRetry(parsed, target);
-        if (outcome.kind === "resolved") return outcome.animations;
-        if (outcome.kind === "fetch-error") {
-          if (errorAttempts >= FETCH_ERROR_RETRIES) return [];
-          errorAttempts++;
-          await delay(FETCH_ERROR_DELAY_MS);
-          continue;
-        }
-        // cold
-        if (coldAttempts >= COLD_PARSE_RETRIES) return [];
-        coldAttempts++;
-        await delay(COLD_PARSE_DELAY_MS);
-      }
-    },
+    (selection: DomEditSelection, options?: GsapAnimationFetchOptions) =>
+      async (): Promise<GsapAnimation[]> => {
+        if (!projectId) return [];
+        const target = { id: selection.id ?? null, selector: selection.selector ?? null };
+        return fetchElementAnimationsWithRetry(
+          projectId,
+          gsapSourceFile,
+          target,
+          options?.failOnFetchError === true,
+        );
+      },
     [projectId, gsapSourceFile],
   );
 }

package/src/hooks/useGsapAwareEditing.test.tsx

@@ -14,6 +14,8 @@ const mocks = vi.hoisted(() => ({
   drag: vi.fn(),
   readPosition: vi.fn(),
   setPosition: vi.fn(),
+  commitAnimatedProperty: vi.fn(),
+  commitAnimatedProperties: vi.fn(),
 }));
 
 vi.mock("./gsapResizeIntercept", () => ({ tryGsapResizeIntercept: mocks.resize }));
@@ -28,8 +30,8 @@ vi.mock("./gsapPositionDetection", () => ({
 vi.mock("../utils/elementGsap", () => ({ setElementGsapPosition: mocks.setPosition }));
 vi.mock("./useAnimatedPropertyCommit", () => ({
   useAnimatedPropertyCommit: () => ({
-    commitAnimatedProperty: vi.fn(),
-    commitAnimatedProperties: vi.fn(),
+    commitAnimatedProperty: mocks.commitAnimatedProperty,
+    commitAnimatedProperties: mocks.commitAnimatedProperties,
   }),
 }));
 vi.mock("./useSafeGsapCommitMutation", () => ({
@@ -78,22 +80,51 @@ function mountResizeHandler(animations: GsapAnimation[]) {
   return { selection, fallback, commitMutation, resize: resize!, root };
 }
 
+type AwareEditingParams = Parameters<typeof useGsapAwareEditing>[0];
+
+function mountGroupHandler({
+  gsapCommitMutation,
+  makeFetchFallback,
+  trackGsapInteractionFailure = vi.fn(),
+}: Pick<AwareEditingParams, "gsapCommitMutation" | "makeFetchFallback"> &
+  Partial<Pick<AwareEditingParams, "trackGsapInteractionFailure">>) {
+  let groupCommit!: (updates: DomEditGroupPathOffsetCommit[]) => Promise<void>;
+  function Harness() {
+    groupCommit = useGsapAwareEditing({
+      domEditSelection: null,
+      selectedGsapAnimations: [],
+      gsapCommitMutation,
+      previewIframeRef: { current: null },
+      showToast: vi.fn(),
+      bumpGsapCache: vi.fn(),
+      makeFetchFallback,
+      trackGsapInteractionFailure,
+      handleDomBoxSizeCommit: vi.fn(),
+      addGsapAnimation: vi.fn(),
+      convertToKeyframes: vi.fn(),
+      setArcPath: vi.fn(),
+      updateArcSegment: vi.fn(),
+    }).handleGsapAwareGroupPathOffsetCommit;
+    return null;
+  }
+  const root = mountReactHarness(<Harness />);
+  return { groupCommit: (updates: DomEditGroupPathOffsetCommit[]) => groupCommit(updates), root };
+}
+
 describe("useGsapAwareEditing anchored resize", () => {
-  it("forwards the anchor offset to the DOM fallback when GSAP does not handle resize", async () => {
-    mocks.resize.mockResolvedValue(false);
+  it("rejects a blocked resize instead of falling through to a competing DOM write", async () => {
+    mocks.resize.mockResolvedValue({ status: "blocked", reason: "source-uneditable" });
     const h = mountResizeHandler([]);
-    await act(() => h.resize(h.selection, { width: 300, height: 200 }, { x: -50, y: -25 }));
-    expect(h.fallback).toHaveBeenCalledWith(
-      h.selection,
-      { width: 300, height: 200 },
-      { x: -50, y: -25 },
-    );
+    await expect(
+      act(() => h.resize(h.selection, { width: 300, height: 200 }, { x: -50, y: -25 })),
+    ).rejects.toMatchObject({ reason: "source-uneditable" });
+    expect(h.fallback).not.toHaveBeenCalled();
     act(() => h.root.unmount());
   });
 
   it("persists the anchor exactly once through GSAP position when size route handles resize", async () => {
-    mocks.resize.mockResolvedValue(true);
-    mocks.drag.mockResolvedValue(true);
+    mocks.resize.mockResolvedValue({ status: "persisted" });
+    mocks.drag.mockResolvedValue({ status: "persisted" });
     const h = mountResizeHandler([]);
     await act(() => h.resize(h.selection, { width: 300, height: 200 }, { x: -50, y: -25 }));
     expect(h.fallback).not.toHaveBeenCalled();
@@ -103,12 +134,12 @@ describe("useGsapAwareEditing anchored resize", () => {
   });
 
   it("settles the live GSAP position before resize persistence reaches its first await", async () => {
-    let resolveResize!: (handled: boolean) => void;
-    const pendingResize = new Promise<boolean>((resolve) => {
+    let resolveResize!: (outcome: { status: "persisted" }) => void;
+    const pendingResize = new Promise<{ status: "persisted" }>((resolve) => {
       resolveResize = resolve;
     });
     mocks.resize.mockReturnValue(pendingResize);
-    mocks.drag.mockResolvedValue(true);
+    mocks.drag.mockResolvedValue({ status: "persisted" });
     mocks.readPosition.mockReturnValue({ x: 120.4, y: 80.2 });
     const h = mountResizeHandler([]);
     h.selection.element.setAttribute("data-hf-drag-gsap-base-x", "120.4");
@@ -126,7 +157,7 @@ describe("useGsapAwareEditing anchored resize", () => {
       mocks.resize.mock.invocationCallOrder[0]!,
     );
 
-    resolveResize(true);
+    resolveResize({ status: "persisted" });
     await act(() => commit);
     act(() => h.root.unmount());
   });
@@ -134,7 +165,7 @@ describe("useGsapAwareEditing anchored resize", () => {
   it("passes a transaction-scoped commit wrapper into the resize path", async () => {
     mocks.resize.mockImplementation(async (selection, _size, _animations, _iframe, commit) => {
       await commit(selection, { type: "resize" }, { label: "Resize", softReload: true });
-      return true;
+      return { status: "persisted" };
     });
     const h = mountResizeHandler([]);
 
@@ -164,9 +195,12 @@ describe("useGsapAwareEditing anchored resize", () => {
           m: unknown,
           o: { coalesceKey?: string; label?: string; softReload?: boolean },
         ) => Promise<void>,
+        _fetch: unknown,
+        options?: { preflightOnly?: boolean },
       ) => {
+        if (options?.preflightOnly) return { status: "persisted" };
         await commit(selection, { type: "move" }, { label: "Move", softReload: true });
-        return true;
+        return { status: "persisted" };
       },
     );
     const commitMutation = vi.fn(
@@ -175,26 +209,10 @@ describe("useGsapAwareEditing anchored resize", () => {
         return Promise.resolve();
       },
     );
-    let groupCommit!: (updates: DomEditGroupPathOffsetCommit[]) => Promise<void>;
-    function Harness() {
-      groupCommit = useGsapAwareEditing({
-        domEditSelection: null,
-        selectedGsapAnimations: [],
-        gsapCommitMutation: commitMutation,
-        previewIframeRef: { current: null },
-        showToast: vi.fn(),
-        bumpGsapCache: vi.fn(),
-        makeFetchFallback: () => vi.fn().mockResolvedValue([]),
-        trackGsapInteractionFailure: vi.fn(),
-        handleDomBoxSizeCommit: vi.fn(),
-        addGsapAnimation: vi.fn(),
-        convertToKeyframes: vi.fn(),
-        setArcPath: vi.fn(),
-        updateArcSegment: vi.fn(),
-      }).handleGsapAwareGroupPathOffsetCommit;
-      return null;
-    }
-    const root = mountReactHarness(<Harness />);
+    const { groupCommit, root } = mountGroupHandler({
+      gsapCommitMutation: commitMutation,
+      makeFetchFallback: () => vi.fn().mockResolvedValue([]),
+    });
     const updates = [
       {
         selection: { element: document.createElement("div"), id: "a", selector: "#a" },
@@ -215,6 +233,74 @@ describe("useGsapAwareEditing anchored resize", () => {
     act(() => root.unmount());
   });
 
+  it("preflights every group member before the first mutation", async () => {
+    const commitMutation = vi.fn().mockResolvedValue(undefined);
+    const makeFetchFallback = vi.fn(() => vi.fn().mockResolvedValue([]));
+    mocks.drag.mockImplementation(
+      async (_selection, _next, _animations, _iframe, _commit, _fetch, options) => {
+        if (options?.preflightOnly) {
+          return _selection.id === "blocked"
+            ? { status: "blocked", reason: "source-uneditable" }
+            : { status: "persisted" };
+        }
+        await _commit(_selection, { type: "move" }, { label: "Move" });
+        return { status: "persisted" };
+      },
+    );
+    const { groupCommit, root } = mountGroupHandler({
+      gsapCommitMutation: commitMutation,
+      makeFetchFallback,
+    });
+    const updates = [
+      {
+        selection: { element: document.createElement("div"), id: "ok", selector: "#ok" },
+        next: { x: 10, y: 10 },
+      },
+      {
+        selection: {
+          element: document.createElement("div"),
+          id: "blocked",
+          selector: "#blocked",
+        },
+        next: { x: 10, y: 10 },
+      },
+    ] as unknown as DomEditGroupPathOffsetCommit[];
+
+    await expect(groupCommit(updates)).rejects.toMatchObject({
+      name: "GsapEditBlockedError",
+      reason: "source-uneditable",
+    });
+    expect(commitMutation).not.toHaveBeenCalled();
+    expect(mocks.drag).toHaveBeenCalledTimes(2);
+    expect(makeFetchFallback).toHaveBeenNthCalledWith(1, updates[0]!.selection, {
+      failOnFetchError: true,
+    });
+    expect(makeFetchFallback).toHaveBeenNthCalledWith(2, updates[1]!.selection, {
+      failOnFetchError: true,
+    });
+    act(() => root.unmount());
+  });
+
+  it("fails a group preflight closed when ownership cannot be fetched", async () => {
+    const fetchError = new Error("parse endpoint unavailable");
+    const commitMutation = vi.fn().mockResolvedValue(undefined);
+    const { groupCommit, root } = mountGroupHandler({
+      gsapCommitMutation: commitMutation,
+      makeFetchFallback: () => vi.fn().mockRejectedValue(fetchError),
+    });
+    const updates = [
+      {
+        selection: { element: document.createElement("div"), id: "a", selector: "#a" },
+        next: { x: 10, y: 10 },
+      },
+    ] as unknown as DomEditGroupPathOffsetCommit[];
+
+    await expect(groupCommit(updates)).rejects.toBe(fetchError);
+    expect(mocks.drag).not.toHaveBeenCalled();
+    expect(commitMutation).not.toHaveBeenCalled();
+    act(() => root.unmount());
+  });
+
   it("restores once when resize persistence fails", async () => {
     const error = new Error("resize failed");
     const restore = vi.fn();
@@ -228,7 +314,7 @@ describe("useGsapAwareEditing anchored resize", () => {
   });
 
   it("does not apply the anchor twice when scale route already settles the drop point", async () => {
-    mocks.resize.mockResolvedValue(true);
+    mocks.resize.mockResolvedValue({ status: "persisted" });
     const scale = { propertyGroup: "scale" } as GsapAnimation;
     const h = mountResizeHandler([scale]);
     await act(() => h.resize(h.selection, { width: 300, height: 200 }, { x: -50, y: -25 }));

package/src/hooks/useGsapAwareEditing.ts

@@ -30,6 +30,8 @@ import { logResize, logResizeSettle } from "../utils/resizeDebug";
 import type { DomEditGroupPathOffsetCommit } from "../components/editor/DomEditOverlay";
 import { runGestureTransaction } from "./gestureTransaction";
 import { hasNonHoldTweenForElement } from "./gsapRuntimeKeyframes";
+import { assertGsapEditPersisted } from "./gsapEditOutcome";
+import type { GsapAnimationFetchOptions } from "./useGsapAnimationFetchFallback";
 
 // Distinct coalesceKey per group drag so consecutive group drags don't fold
 // into one another's undo entry (module-local counter, not Date.now()).
@@ -42,7 +44,10 @@ export interface UseGsapAwareEditingParams {
   previewIframeRef: React.RefObject<HTMLIFrameElement | null>;
   showToast: (message: string, tone?: "error" | "info") => void;
   bumpGsapCache: () => void;
-  makeFetchFallback: (selection: DomEditSelection) => () => Promise<GsapAnimation[]>;
+  makeFetchFallback: (
+    selection: DomEditSelection,
+    options?: GsapAnimationFetchOptions,
+  ) => () => Promise<GsapAnimation[]>;
   trackGsapInteractionFailure: (
     error: unknown,
     selection: DomEditSelection,
@@ -112,7 +117,7 @@ export function useGsapAwareEditing({
     ) => {
       if (gsapCommitMutation) {
         try {
-          await tryGsapDragIntercept(
+          const outcome = await tryGsapDragIntercept(
             selection,
             next,
             selectedGsapAnimations,
@@ -121,6 +126,7 @@ export function useGsapAwareEditing({
             makeFetchFallback(selection),
             modifiers,
           );
+          assertGsapEditPersisted(outcome);
         } catch (error) {
           trackGsapInteractionFailure(error, selection, "drag", "Move animated layer");
           throw error;
@@ -155,16 +161,42 @@ export function useGsapAwareEditing({
           coalesceKey,
           coalesceMs: Number.POSITIVE_INFINITY,
         });
+      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 {
+          const animations = await makeFetchFallback(selection, { failOnFetchError: true })();
+          preflightAnimations.set(selection, animations);
+          const outcome = await tryGsapDragIntercept(
+            selection,
+            { x: 0, y: 0 },
+            animations,
+            previewIframeRef.current,
+            coalescedCommit,
+            undefined,
+            { preflightOnly: true },
+          );
+          assertGsapEditPersisted(outcome);
+        } catch (error) {
+          trackGsapInteractionFailure(error, selection, "drag", "Move animated layer (group)");
+          throw error;
+        }
+      }
       for (const { selection, next } of updates) {
         try {
-          await tryGsapDragIntercept(
+          const outcome = await tryGsapDragIntercept(
             selection,
             next,
-            [],
+            preflightAnimations.get(selection) ?? [],
             previewIframeRef.current,
             coalescedCommit,
             makeFetchFallback(selection),
+            { preflightPassed: true },
           );
+          assertGsapEditPersisted(outcome);
         } catch (error) {
           trackGsapInteractionFailure(error, selection, "drag", "Move animated layer (group)");
           throw error;
@@ -217,7 +249,7 @@ export function useGsapAwareEditing({
           if (gsapCommitMutation) {
             const commitMutation = commit(gsapCommitMutation);
             try {
-              const handled = await tryGsapResizeIntercept(
+              const outcome = await tryGsapResizeIntercept(
                 selection,
                 next,
                 selectedGsapAnimations,
@@ -225,26 +257,26 @@ export function useGsapAwareEditing({
                 commitMutation,
                 makeFetchFallback(selection),
               );
-              if (handled) {
-                logResize("intercept-handled", {
-                  scaleRoute,
-                  willForwardOffset: !!(offset && !scaleRoute),
-                });
-                // Scale-route resize persists its residual position internally.
-                // Width/height persists the already-settled anchor through drag.
-                if (offset && !scaleRoute) {
-                  await tryGsapDragIntercept(
-                    selection,
-                    offset,
-                    selectedGsapAnimations,
-                    previewIframeRef.current,
-                    commitMutation,
-                    makeFetchFallback(selection),
-                  );
-                }
-                logResizeSettle(selection.element, scaleRoute ? "gsap-scale" : "gsap-size");
-                return;
+              assertGsapEditPersisted(outcome);
+              logResize("intercept-handled", {
+                scaleRoute,
+                willForwardOffset: !!(offset && !scaleRoute),
+              });
+              // Scale-route resize persists its residual position internally.
+              // Width/height persists the already-settled anchor through drag.
+              if (offset && !scaleRoute) {
+                const dragOutcome = await tryGsapDragIntercept(
+                  selection,
+                  offset,
+                  selectedGsapAnimations,
+                  previewIframeRef.current,
+                  commitMutation,
+                  makeFetchFallback(selection),
+                );
+                assertGsapEditPersisted(dragOutcome);
               }
+              logResizeSettle(selection.element, scaleRoute ? "gsap-scale" : "gsap-size");
+              return;
             } catch (error) {
               trackGsapInteractionFailure(error, selection, "resize", "Resize animated layer");
               throw error;
@@ -278,8 +310,9 @@ export function useGsapAwareEditing({
         try {
           // Single source of truth for rotation too: tryGsapRotationIntercept handles
           // tweened elements (keyframes) and static ones (a tl.set), so there's no
-          // CSS-var fallback. It returns false only for a selectorless element (no-op).
-          await tryGsapRotationIntercept(
+          // CSS-var fallback. Selectorless/computed source rejects so the gesture
+          // transaction can restore its draft instead of reporting a false success.
+          const outcome = await tryGsapRotationIntercept(
             selection,
             next.angle,
             selectedGsapAnimations,
@@ -287,6 +320,7 @@ export function useGsapAwareEditing({
             gsapCommitMutation,
             makeFetchFallback(selection),
           );
+          assertGsapEditPersisted(outcome);
         } catch (error) {
           trackGsapInteractionFailure(error, selection, "rotation", "Rotate animated layer");
           throw error;
@@ -304,7 +338,10 @@ export function useGsapAwareEditing({
 
   // ── Animated property commit ──
 
-  const { commitAnimatedProperty, commitAnimatedProperties } = useAnimatedPropertyCommit({
+  const {
+    commitAnimatedProperty: commitAnimatedPropertyRaw,
+    commitAnimatedProperties: commitAnimatedPropertiesRaw,
+  } = useAnimatedPropertyCommit({
     selectedGsapAnimations,
     gsapCommitMutation,
     addGsapAnimation: (sel, method, time) => addGsapAnimation(sel, method, time),
@@ -313,6 +350,30 @@ export function useGsapAwareEditing({
     bumpGsapCache,
   });
 
+  const commitAnimatedProperties = useCallback(
+    async (selection: DomEditSelection, properties: Record<string, number | string>) => {
+      try {
+        await commitAnimatedPropertiesRaw(selection, properties);
+      } catch (error) {
+        trackGsapInteractionFailure(error, selection, "property", "Edit animated property");
+        throw error;
+      }
+    },
+    [commitAnimatedPropertiesRaw, trackGsapInteractionFailure],
+  );
+
+  const commitAnimatedProperty = useCallback(
+    async (selection: DomEditSelection, property: string, value: number | string) => {
+      try {
+        await commitAnimatedPropertyRaw(selection, property, value);
+      } catch (error) {
+        trackGsapInteractionFailure(error, selection, "property", "Edit animated property");
+        throw error;
+      }
+    },
+    [commitAnimatedPropertyRaw, trackGsapInteractionFailure],
+  );
+
   // ── Arc path wrappers ──
 
   const handleSetArcPath = useCallback(

package/src/hooks/useGsapInteractionFailureTelemetry.test.tsx

@@ -0,0 +1,42 @@
+// @vitest-environment happy-dom
+
+import React, { act } from "react";
+import { describe, expect, it, vi } from "vitest";
+import type { DomEditSelection } from "../components/editor/domEditingTypes";
+import { mountReactHarness } from "./domSelectionTestHarness";
+import { GsapEditBlockedError } from "./gsapEditOutcome";
+
+(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+const trackStudioSaveFailure = vi.hoisted(() => vi.fn());
+vi.mock("../utils/studioSaveDiagnostics", () => ({ trackStudioSaveFailure }));
+
+import { useGsapInteractionFailureTelemetry } from "./useGsapInteractionFailureTelemetry";
+
+describe("useGsapInteractionFailureTelemetry", () => {
+  it("surfaces the blocked reason instead of a generic save failure", () => {
+    const showToast = vi.fn();
+    const selection = {
+      id: "clip",
+      selector: "#clip",
+      element: document.createElement("div"),
+    } as unknown as DomEditSelection;
+    let report!: ReturnType<typeof useGsapInteractionFailureTelemetry>;
+    function Harness() {
+      report = useGsapInteractionFailureTelemetry("index.html", showToast);
+      return null;
+    }
+    const root = mountReactHarness(<Harness />);
+
+    act(() => report(new GsapEditBlockedError("unroll-required"), selection, "drag", "Move"));
+
+    expect(showToast).toHaveBeenCalledWith(
+      "This motion comes from a helper or loop. Choose Unroll to edit it explicitly.",
+      "error",
+    );
+    expect(trackStudioSaveFailure).toHaveBeenCalledWith(
+      expect.objectContaining({ source: "gsap_commit", mutationType: "drag", targetId: "clip" }),
+    );
+    act(() => root.unmount());
+  });
+});

package/src/hooks/useGsapInteractionFailureTelemetry.ts

@@ -1,6 +1,7 @@
 import { useCallback } from "react";
 import type { DomEditSelection } from "../components/editor/domEditing";
 import { trackStudioSaveFailure } from "../utils/studioSaveDiagnostics";
+import { isGsapEditBlockedError } from "./gsapEditOutcome";
 
 export function useGsapInteractionFailureTelemetry(
   activeCompPath: string | null,
@@ -18,7 +19,10 @@ export function useGsapInteractionFailureTelemetry(
         targetSelector: selection.selector,
         targetSourceFile: selection.sourceFile,
       });
-      showToast("Failed to save animated edit.", "error");
+      showToast(
+        isGsapEditBlockedError(error) ? error.message : "Failed to save animated edit.",
+        "error",
+      );
     },
     [activeCompPath, showToast],
   );