@hyperframes/studio 0.6.109 → 0.6.111

package/src/hooks/useAppHotkeys.ts

@@ -117,6 +117,14 @@ interface UseAppHotkeysParams {
   onDeleteSelectedKeyframes: () => void;
   onAfterUndoRedo?: () => void;
   onToggleRecording?: () => void;
+  /** Active composition path — used to decide whether undo/redo must resync the SDK session. */
+  activeCompPath?: string | null;
+  /**
+   * Force-reload the SDK session after undo/redo reverts the active comp file,
+   * bypassing the self-write suppress window. Without this, the suppress window
+   * blocks the file-change reload and the SDK session stays on pre-undo content.
+   */
+  forceReloadSdkSession?: () => void;
 }
 
 // ── Extracted keydown dispatch (pure function, no hooks) ──
@@ -302,6 +310,8 @@ export function useAppHotkeys({
   onDeleteSelectedKeyframes,
   onAfterUndoRedo,
   onToggleRecording,
+  activeCompPath,
+  forceReloadSdkSession,
 }: UseAppHotkeysParams) {
   const previewHotkeyWindowRef = useRef<Window | null>(null);
   const previewHistoryCleanupRef = useRef<(() => void) | null>(null);
@@ -349,6 +359,14 @@ export function useAppHotkeys({
       }
       if (result.ok && result.label) {
         onAfterUndoRedo?.();
+        // If the active composition was among the written files, force-reload
+        // the SDK session so its in-memory doc matches the reverted content.
+        // writeHistoryFile sets domEditSaveTimestampRef which activates the
+        // 2 s suppress window — without this call the file-change event would
+        // be swallowed and the SDK session would stay on stale pre-undo content.
+        if (activeCompPath && result.paths?.includes(activeCompPath)) {
+          forceReloadSdkSession?.();
+        }
         await syncHistoryPreviewAfterApply(result.paths);
         showToast(`${direction === "undo" ? "Undid" : "Redid"} ${result.label}`, "info");
       }
@@ -361,6 +379,8 @@ export function useAppHotkeys({
       waitForPendingDomEditSaves,
       writeHistoryFile,
       onAfterUndoRedo,
+      activeCompPath,
+      forceReloadSdkSession,
     ],
   );
 

package/src/hooks/useDomEditCommits.ts

@@ -16,9 +16,6 @@ import { useDomGeometryCommits } from "./useDomGeometryCommits";
 import { useElementLifecycleOps } from "./useElementLifecycleOps";
 import { formatFieldsSuffix } from "./gsapScriptCommitHelpers";
 
-// Re-export so existing consumers keep their import path
-export { GSAP_CSS_FALLBACK_BLOCKED_MESSAGE } from "./useDomGeometryCommits";
-
 // ── Helpers ──
 
 function formatUnsafeFieldList(fields: Array<{ path: string }>): string {
@@ -45,8 +42,6 @@ interface RecordEditInput {
   files: Record<string, { before: string; after: string }>;
 }
 
-export type { PersistDomEditOperations } from "./domEditCommitTypes";
-
 export interface UseDomEditCommitsParams {
   activeCompPath: string | null;
   previewIframeRef: React.MutableRefObject<HTMLIFrameElement | null>;
@@ -73,10 +68,20 @@ export interface UseDomEditCommitsParams {
     target: HTMLElement,
     options?: { preferClipAncestor?: boolean },
   ) => Promise<DomEditSelection | null>;
-  /** Stage 7 Step 3b: called after a successful server-side element patch. */
-  onDomEditPersisted?: (selection: DomEditSelection, operations: PatchOperation[]) => void;
-  /** Stage 7 Step 3b: called after a successful server-side element delete. */
-  onElementDeleted?: (selection: DomEditSelection) => void;
+  /** Resync the in-memory SDK session after a SERVER-side write (NOT the SDK
+   * path, whose session is already current) so a later SDK edit doesn't
+   * serialize the pre-write doc and revert the server's change. */
+  forceReloadSdkSession?: () => void;
+  /** Stage 7 Step 3c: called before the server-side patch path; returns true if SDK handled it. */
+  onTrySdkPersist?: (
+    selection: DomEditSelection,
+    operations: PatchOperation[],
+    originalContent: string,
+    targetPath: string,
+    options?: { label?: string; coalesceKey?: string; skipRefresh?: boolean },
+  ) => Promise<boolean>;
+  /** Stage 7 §3.1: called before the server-side delete path; returns true if SDK handled it. */
+  onTrySdkDelete?: (hfId: string, originalContent: string, targetPath: string) => Promise<boolean>;
 }
 
 export function useDomEditCommits({
@@ -97,8 +102,9 @@ export function useDomEditCommits({
   clearDomSelection,
   refreshDomEditSelectionFromPreview,
   buildDomSelectionFromTarget,
-  onDomEditPersisted,
-  onElementDeleted,
+  forceReloadSdkSession,
+  onTrySdkPersist,
+  onTrySdkDelete,
 }: UseDomEditCommitsParams) {
   const resolveImportedFontAsset = useCallback(
     (fontFamilyValue: string): ImportedFontAsset | null => {
@@ -149,6 +155,10 @@ export function useDomEditCommits({
 
       if (options?.shouldSave && !options.shouldSave()) return;
 
+      // Validate layout values BEFORE any persist path runs. The SDK cutover
+      // path (onTrySdkPersist) returns early on success, so leaving this check
+      // after it let invalid numeric values bypass the guard whenever the
+      // cutover flag was on.
       const patchTarget = buildDomEditPatchTarget(selection);
       const patchBody = { target: patchTarget, operations };
       const unsafeFields = findUnsafeDomPatchValues(patchBody);
@@ -158,6 +168,23 @@ export function useDomEditCommits({
         throw new Error(`DOM patch contains unsafe values: ${fields}`);
       }
 
+      // Skip the SDK path when prepareContent is set (e.g. @font-face injection
+      // for a custom font): sdkCutoverPersist serializes only the patched DOM
+      // and would drop the injected content. Let the server path run prepareContent.
+      if (
+        onTrySdkPersist &&
+        !options?.prepareContent &&
+        (await onTrySdkPersist(selection, operations, originalContent, targetPath, {
+          label: options?.label,
+          coalesceKey: options?.coalesceKey,
+          skipRefresh: options?.skipRefresh,
+        }))
+      ) {
+        // SDK handled it — its in-memory doc is already current, so do NOT
+        // forceReload (that would echo-reload the session we just wrote).
+        return;
+      }
+
       // Mark the save timestamp before the file write so the SSE file-change
       // handler suppresses the reload even if the event arrives before the
       // response (the server writes the file and emits SSE during the fetch).
@@ -220,7 +247,7 @@ export function useDomEditCommits({
         coalesceKey: options?.coalesceKey,
         files: { [targetPath]: { before: originalContent, after: finalContent } },
       });
-      onDomEditPersisted?.(selection, operations);
+      forceReloadSdkSession?.();
 
       if (!options?.skipRefresh) {
         reloadPreview();
@@ -234,7 +261,8 @@ export function useDomEditCommits({
       domEditSaveTimestampRef,
       reloadPreview,
       showToast,
-      onDomEditPersisted,
+      forceReloadSdkSession,
+      onTrySdkPersist,
     ],
   );
 
@@ -295,8 +323,9 @@ export function useDomEditCommits({
     projectIdRef,
     reloadPreview,
     clearDomSelection,
+    onTrySdkDelete,
+    forceReloadSdkSession,
     commitPositionPatchToHtml,
-    onElementDeleted,
   });
 
   return {

package/src/hooks/useDomEditSession.test.ts

@@ -0,0 +1,41 @@
+import { describe, expect, it } from "vitest";
+import { shouldUseSdkCutover } from "../utils/sdkCutover";
+import type { PatchOperation } from "../utils/sourcePatcher";
+
+const styleOp = (property: string, value: string): PatchOperation => ({
+  type: "inline-style",
+  property,
+  value,
+});
+
+const attrOp = (property: string, value: string): PatchOperation => ({
+  type: "attribute",
+  property,
+  value,
+});
+
+describe("shouldUseSdkCutover", () => {
+  it("returns false when flag is disabled", () => {
+    expect(shouldUseSdkCutover(false, true, "hf-abc", [styleOp("color", "red")])).toBe(false);
+  });
+
+  it("returns false when no SDK session", () => {
+    expect(shouldUseSdkCutover(true, false, "hf-abc", [styleOp("color", "red")])).toBe(false);
+  });
+
+  it("returns false when selection has no hfId", () => {
+    expect(shouldUseSdkCutover(true, true, null, [styleOp("color", "red")])).toBe(false);
+    expect(shouldUseSdkCutover(true, true, undefined, [styleOp("color", "red")])).toBe(false);
+  });
+
+  it("returns false when ops array is empty", () => {
+    expect(shouldUseSdkCutover(true, true, "hf-abc", [])).toBe(false);
+  });
+
+  it("returns true when all conditions met with supported op types", () => {
+    expect(shouldUseSdkCutover(true, true, "hf-abc", [styleOp("color", "red")])).toBe(true);
+    expect(
+      shouldUseSdkCutover(true, true, "hf-abc", [styleOp("color", "red"), attrOp("data-x", "1")]),
+    ).toBe(true);
+  });
+});

package/src/hooks/useDomEditSession.ts

@@ -1,15 +1,16 @@
-import type { Composition } from "@hyperframes/sdk";
 import type { TimelineElement } from "../player";
 import type { ImportedFontAsset } from "../components/editor/fontAssets";
 import type { EditHistoryKind } from "../utils/editHistory";
 import type { RightPanelTab } from "../utils/studioHelpers";
 import type { PatchTarget } from "../utils/sourcePatcher";
 import type { SidebarTab } from "../components/sidebar/LeftSidebar";
+import type { Composition } from "@hyperframes/sdk";
+import { sdkCutoverPersist, sdkDeletePersist } from "../utils/sdkCutover";
+import { runResolverShadow } from "../utils/sdkResolverShadow";
 import { useAskAgentModal } from "./useAskAgentModal";
 import { useDomSelection } from "./useDomSelection";
 import { usePreviewInteraction } from "./usePreviewInteraction";
 import { useDomEditCommits } from "./useDomEditCommits";
-import { runShadowDispatch, runShadowDelete } from "../utils/sdkShadow";
 import { useGsapScriptCommits } from "./useGsapScriptCommits";
 import { useGsapCacheVersion } from "./useGsapTweenCache";
 import { useDomEditWiring } from "./useDomEditWiring";
@@ -60,8 +61,8 @@ export interface UseDomEditSessionParams {
   openSourceForSelection?: (sourceFile: string, target: PatchTarget) => void;
   selectSidebarTab?: (tab: SidebarTab) => void;
   getSidebarTab?: () => SidebarTab;
-  /** Stage 7 Step 3b: SDK session for shadow dispatch parity tracking. */
   sdkSession?: Composition | null;
+  forceReloadSdkSession?: () => void;
 }
 
 // ── Hook ──
@@ -101,6 +102,7 @@ export function useDomEditSession({
   selectSidebarTab,
   getSidebarTab,
   sdkSession,
+  forceReloadSdkSession,
 }: UseDomEditSessionParams) {
   void _setRefreshKey;
   void _readProjectFile;
@@ -195,6 +197,8 @@ export function useDomEditSession({
     onFileContentChanged: updateEditingFileContent,
     showToast,
     sdkSession,
+    writeProjectFile,
+    forceReloadSdkSession,
   });
 
   // ── DOM commit handlers ──
@@ -234,10 +238,38 @@ export function useDomEditSession({
     clearDomSelection,
     refreshDomEditSelectionFromPreview,
     buildDomSelectionFromTarget,
-    onDomEditPersisted: sdkSession
-      ? (sel, ops) => runShadowDispatch(sdkSession, sel, ops)
+    forceReloadSdkSession,
+    onTrySdkPersist: sdkSession
+      ? (selection, operations, originalContent, targetPath, options) => {
+          // Resolver shadow runs regardless of the cutover flag — decoupled tripwire.
+          runResolverShadow(sdkSession, selection.hfId, operations);
+          return sdkCutoverPersist(
+            selection,
+            operations,
+            originalContent,
+            targetPath,
+            sdkSession,
+            {
+              editHistory,
+              writeProjectFile,
+              reloadPreview,
+              domEditSaveTimestampRef,
+              compositionPath: activeCompPath,
+            },
+            options,
+          );
+        }
+      : undefined,
+    onTrySdkDelete: sdkSession
+      ? (hfId, originalContent, targetPath) =>
+          sdkDeletePersist(hfId, originalContent, targetPath, sdkSession, {
+            editHistory,
+            writeProjectFile,
+            reloadPreview,
+            domEditSaveTimestampRef,
+            compositionPath: activeCompPath,
+          })
       : undefined,
-    onElementDeleted: sdkSession ? (sel) => runShadowDelete(sdkSession, sel.hfId) : undefined,
   });
 
   // ── Wiring: selection sync, GSAP cache, preview sync, selection handlers ──

package/src/hooks/useDomGeometryCommits.ts

@@ -42,15 +42,11 @@ export function useDomGeometryCommits({
 }: UseDomGeometryCommitsParams) {
   const handleDomPathOffsetCommit = useCallback(
     (selection: DomEditSelection, next: { x: number; y: number }) => {
-      const gsapBlocked = isElementGsapTargeted(previewIframeRef.current, selection.element);
-      console.log(
-        "[drag:7] handleDomPathOffsetCommit (CSS path)",
-        JSON.stringify({
-          sel: selection.id,
-          gsapBlocked,
-        }),
-      );
-      if (gsapBlocked) {
+      // ponytail: GSAP-targeted elements are blocked (no SDK position-in-script op); CSS-path
+      // elements fall through to commitPositionPatchToHtml → persistDomEditOperations →
+      // onTrySdkPersist and are already SDK-cut-over as setStyle/setAttribute (§3.3 done).
+      // Upgrade path for GSAP: add a moveElementGsap SDK op in a separate SDK PR.
+      if (isElementGsapTargeted(previewIframeRef.current, selection.element)) {
         const error = new Error(GSAP_CSS_FALLBACK_BLOCKED_MESSAGE);
         showToast(error.message, "error");
         return Promise.reject(error);

package/src/hooks/useElementLifecycleOps.ts

@@ -26,6 +26,10 @@ interface UseElementLifecycleOpsParams {
   projectIdRef: React.MutableRefObject<string | null>;
   reloadPreview: () => void;
   clearDomSelection: () => void;
+  /** Route delete through SDK when session resolves the hf-id; returns true if handled. */
+  onTrySdkDelete?: (hfId: string, originalContent: string, targetPath: string) => Promise<boolean>;
+  /** Resync the SDK session after a server-fallback delete. */
+  forceReloadSdkSession?: () => void;
   commitPositionPatchToHtml: (
     selection: DomEditSelection,
     patches: PatchOperation[],
@@ -44,6 +48,8 @@ export function useElementLifecycleOps({
   projectIdRef,
   reloadPreview,
   clearDomSelection,
+  onTrySdkDelete,
+  forceReloadSdkSession,
   commitPositionPatchToHtml,
   onElementDeleted,
 }: UseElementLifecycleOpsParams) {
@@ -74,6 +80,16 @@ export function useElementLifecycleOps({
           throw new Error("Selected element has no patchable target");
         }
 
+        if (onTrySdkDelete && selection.hfId) {
+          const handled = await onTrySdkDelete(selection.hfId, originalContent, targetPath);
+          if (handled) {
+            clearDomSelection();
+            usePlayerStore.getState().setSelectedElementId(null);
+            showToast(`Deleted ${label}. Use Undo to restore it.`, "info");
+            return;
+          }
+        }
+
         domEditSaveTimestampRef.current = Date.now();
         const removeResponse = await fetch(
           `/api/projects/${pid}/file-mutations/remove-element/${encodeURIComponent(targetPath)}`,
@@ -93,6 +109,12 @@ export function useElementLifecycleOps({
         const removeData = (await removeResponse.json()) as { changed?: boolean; content?: string };
         const patchedContent =
           typeof removeData.content === "string" ? removeData.content : originalContent;
+        // ponytail: the server remove-element route (removeElementFromHtml) strips
+        // only the element node — it does NOT cascade-remove GSAP tweens targeting
+        // it, unlike the SDK path (removeElement → cascadeRemoveAnimations). This
+        // fallback runs only when the element isn't in the SDK doc (e.g. runtime-
+        // generated / unaddressable), where targeting tweens are unlikely. Upgrade
+        // path: cascade in removeElementFromHtml by selector/hf-id to fully match.
         await saveProjectFilesWithHistory({
           projectId: pid,
           label: "Delete element",
@@ -105,6 +127,9 @@ export function useElementLifecycleOps({
 
         clearDomSelection();
         usePlayerStore.getState().setSelectedElementId(null);
+        // Server wrote the file; resync the stale in-memory SDK doc so a later
+        // SDK edit doesn't resurrect the deleted element.
+        forceReloadSdkSession?.();
         reloadPreview();
         onElementDeleted?.(selection);
         showToast(`Deleted ${label}. Use Undo to restore it.`, "info");
@@ -118,7 +143,9 @@ export function useElementLifecycleOps({
       clearDomSelection,
       domEditSaveTimestampRef,
       editHistory.recordEdit,
+      onTrySdkDelete,
       onElementDeleted,
+      forceReloadSdkSession,
       projectIdRef,
       reloadPreview,
       showToast,
@@ -126,6 +153,9 @@ export function useElementLifecycleOps({
     ],
   );
 
+  // ponytail: z-index reorder writes inline-style patches via commitPositionPatchToHtml →
+  // persistDomEditOperations → onTrySdkPersist, so it is already SDK-cut-over as setStyle.
+  // No SDK reorder/reparent op exists; DOM sibling order stays server-authoritative if ever needed.
   const handleDomZIndexReorderCommit = useCallback(
     (
       entries: Array<{

package/src/hooks/useGsapAnimationOps.ts

@@ -2,21 +2,28 @@ import { useCallback } from "react";
 import type { Composition } from "@hyperframes/sdk";
 import type { DomEditSelection } from "../components/editor/domEditingTypes";
 import { roundTo3 } from "../utils/rounding";
-import { runShadowGsapTween, type ShadowGsapOp } from "../utils/sdkShadow";
+import {
+  sdkGsapTweenPersist,
+  sdkGsapDeleteAllForSelectorPersist,
+  type CutoverDeps,
+} from "../utils/sdkCutover";
 import {
   assignGsapTargetAutoIdIfNeeded,
   ensureElementAddressable,
 } from "./gsapScriptCommitHelpers";
 import type { CommitMutation, SafeGsapCommitMutation } from "./gsapScriptCommitTypes";
 
-interface GsapAnimationOpsParams {
+interface SdkAnimationDeps {
+  sdkSession?: Composition | null;
+  sdkDeps?: CutoverDeps | null;
+}
+
+interface GsapAnimationOpsParams extends SdkAnimationDeps {
   projectIdRef: React.MutableRefObject<string | null>;
   activeCompPath: string | null;
   commitMutation: CommitMutation;
   commitMutationSafely: SafeGsapCommitMutation;
   showToast: (message: string, tone?: "error" | "info") => void;
-  /** Stage 7 Step 3b: SDK session for shadow GSAP dispatch (server stays authoritative). */
-  sdkSession?: Composition | null;
 }
 
 export function useGsapAnimationOps({
@@ -26,60 +33,79 @@ export function useGsapAnimationOps({
   commitMutationSafely,
   showToast,
   sdkSession,
+  sdkDeps,
 }: GsapAnimationOpsParams) {
   const updateGsapMeta = useCallback(
-    (
+    async (
       selection: DomEditSelection,
       animationId: string,
       updates: { duration?: number; ease?: string; position?: number },
     ) => {
-      // Shadow op (server animationId shares the SDK id-space): existence via
-      // runShadowGsapTween (live session) + value fidelity via the chokepoint.
-      const shadowGsapOp: ShadowGsapOp = {
-        kind: "set",
-        animationId,
-        properties: { duration: updates.duration, ease: updates.ease, position: updates.position },
-      };
-      // coalesceKey groups rapid meta edits into one history entry. Request
-      // serialization is now handled per-file at the commitMutation chokepoint
-      // (useGsapScriptCommits), so no per-op serializeKey is needed here.
-      const metaKey = `gsap:${animationId}:meta`;
+      if (sdkSession && sdkDeps) {
+        const targetPath = selection.sourceFile || activeCompPath || "index.html";
+        const handled = await sdkGsapTweenPersist(
+          targetPath,
+          { kind: "set", animationId, properties: updates },
+          sdkSession,
+          sdkDeps,
+          { label: "Edit GSAP animation", coalesceKey: `gsap:${animationId}:meta` },
+        );
+        if (handled) return;
+      }
       commitMutationSafely(
         selection,
         { type: "update-meta", animationId, updates },
-        { label: "Edit GSAP animation", coalesceKey: metaKey, shadowGsapOp },
+        { label: "Edit GSAP animation", coalesceKey: `gsap:${animationId}:meta` },
       );
-      if (sdkSession) runShadowGsapTween(sdkSession, shadowGsapOp);
     },
-    [commitMutationSafely, sdkSession],
+    [commitMutationSafely, activeCompPath, sdkSession, sdkDeps],
   );
 
   const deleteGsapAnimation = useCallback(
-    (selection: DomEditSelection, animationId: string) => {
-      const shadowGsapOp: ShadowGsapOp = { kind: "remove", animationId };
+    async (selection: DomEditSelection, animationId: string) => {
+      if (sdkSession && sdkDeps) {
+        const targetPath = selection.sourceFile || activeCompPath || "index.html";
+        const handled = await sdkGsapTweenPersist(
+          targetPath,
+          { kind: "remove", animationId },
+          sdkSession,
+          sdkDeps,
+          { label: "Delete GSAP animation" },
+        );
+        if (handled) return;
+      }
       commitMutationSafely(
         selection,
         { type: "delete", animationId, stripStudioEdits: true },
-        { label: "Delete GSAP animation", shadowGsapOp },
+        { label: "Delete GSAP animation" },
       );
-      if (sdkSession) runShadowGsapTween(sdkSession, shadowGsapOp);
     },
-    [commitMutationSafely, sdkSession],
+    [commitMutationSafely, activeCompPath, sdkSession, sdkDeps],
   );
 
   const deleteAllForSelector = useCallback(
-    (selection: DomEditSelection, targetSelector: string) => {
+    async (selection: DomEditSelection, targetSelector: string) => {
+      if (sdkSession && sdkDeps) {
+        const targetPath = selection.sourceFile || activeCompPath || "index.html";
+        const handled = await sdkGsapDeleteAllForSelectorPersist(
+          targetPath,
+          targetSelector,
+          sdkSession,
+          sdkDeps,
+          { label: "Delete all animations for element" },
+        );
+        if (handled) return;
+      }
       void commitMutation(
         selection,
         { type: "delete-all-for-selector", targetSelector },
         { label: "Delete all animations for element" },
       );
     },
-    [commitMutation],
+    [commitMutation, activeCompPath, sdkSession, sdkDeps],
   );
 
-  // Pre-existing complexity (auto-id assignment + per-method defaults); this PR
-  // adds only a guarded shadow-op construction at the tail.
+  // fallow-ignore-next-line complexity
   const addGsapAnimation = useCallback(
     // fallow-ignore-next-line complexity
     async (
@@ -114,25 +140,28 @@ export function useGsapAnimationOps({
         fromTo: { x: 0, y: 0, opacity: 1 },
       };
 
-      // Shadow op (server stays authoritative). "set" has no SDK method, so it
-      // is not shadowed; otherwise: existence via runShadowGsapTween (live) +
-      // value fidelity via the chokepoint (shadowGsapOp in options).
-      const shadowGsapOp: ShadowGsapOp | undefined =
-        selection.hfId && method !== "set"
-          ? {
-              kind: "add",
-              target: selection.hfId,
-              tween: {
-                method,
-                position,
-                duration,
-                ease: "power2.out",
-                ...(method === "fromTo"
-                  ? { fromProperties: { opacity: 0 }, toProperties: toDefaults[method] }
-                  : { properties: toDefaults[method] ?? { opacity: 1 } }),
-              },
-            }
-          : undefined;
+      // Skip SDK path when an id was just assigned server-side (autoId): the
+      // SDK session hasn't reloaded that write yet, so persisting its
+      // serialization would clobber the new id — let the server add the tween
+      // atomically with the id it wrote.
+      if (!autoId && selection.hfId && sdkSession && sdkDeps) {
+        const targetPath = selection.sourceFile || activeCompPath || "index.html";
+        const spec = {
+          method,
+          position,
+          ...(method !== "set" ? { duration, ease: "power2.out" as const } : {}),
+          properties: toDefaults[method] ?? { opacity: 1 },
+          ...(method === "fromTo" ? { fromProperties: { opacity: 0 } } : {}),
+        };
+        const handled = await sdkGsapTweenPersist(
+          targetPath,
+          { kind: "add", target: selection.hfId, spec },
+          sdkSession,
+          sdkDeps,
+          { label: `Add GSAP ${method} animation` },
+        );
+        if (handled) return;
+      }
 
       await commitMutation(
         selection,
@@ -146,12 +175,10 @@ export function useGsapAnimationOps({
           properties: toDefaults[method] ?? { opacity: 1 },
           fromProperties: method === "fromTo" ? { opacity: 0 } : undefined,
         },
-        { label: `Add GSAP ${method} animation`, shadowGsapOp },
+        { label: `Add GSAP ${method} animation` },
       );
-
-      if (sdkSession && shadowGsapOp) runShadowGsapTween(sdkSession, shadowGsapOp);
     },
-    [activeCompPath, commitMutation, projectIdRef, showToast, sdkSession],
+    [activeCompPath, commitMutation, projectIdRef, showToast, sdkSession, sdkDeps],
   );
 
   return {