@hyperframes/studio 0.8.138 → 0.8.140

package/src/hooks/useGsapAwareEditing.ts

@@ -17,6 +17,7 @@ import type { DomEditSelection } from "../components/editor/domEditingTypes";
 import { tryGsapDragIntercept, tryGsapRotationIntercept } from "./gsapRuntimeBridge";
 import { tryGsapResizeIntercept } from "./gsapResizeIntercept";
 import { computeDraggedGsapPosition, freezeDragStamp } from "./draggedGsapPosition";
+import { whileScriptWrites } from "../player/previewReloading";
 import { readGsapPositionFromIframe } from "./gsapPositionDetection";
 import { selectorFromSelection } from "./gsapShared";
 import { useAnimatedPropertyCommit } from "./useAnimatedPropertyCommit";
@@ -153,7 +154,10 @@ export function useGsapAwareEditing({
         const result = await stageElementPositionOffset(selection, next, true).save();
         return writes.finish(result?.changed === true);
       }
-      if (writes.commit) {
+      const writer = writes.commit;
+      if (!writer) return;
+      return whileScriptWrites(async () => {
+        const stamp = freezeDragStamp(selection.element);
         try {
           const ownedAnimations = getGsapAnimationsForSelection(selection);
           const targetAnimations = Array.isArray(ownedAnimations)
@@ -164,9 +168,9 @@ export function useGsapAwareEditing({
             next,
             targetAnimations,
             previewIframeRef.current,
-            writes.commit,
+            writer,
             makeFetchFallback(selection),
-            modifiers,
+            { ...modifiers, stamp },
           );
           await saveMove(outcome, async () => {
             const staged = writes.drawKeepingUndone(() =>
@@ -179,7 +183,7 @@ export function useGsapAwareEditing({
           trackGsapInteractionFailure(error, selection, "drag", "Move animated layer");
           throw error;
         }
-      }
+      });
     },
     [
       gsapCommitMutation,
@@ -209,149 +213,153 @@ export function useGsapAwareEditing({
       restore: () => void = () => undefined,
       route?: { plainTranslate: boolean },
     ) => {
-      const stamp = freezeDragStamp(selection.element);
       const writes = observeGsapGesture(gsapCommitMutation);
       if (route?.plainTranslate ?? editsPlainCss(selection.element, "resize")) {
         const result = await handleDomBoxSizeCommit(selection, next, offset, restore);
         return writes.finish(result?.changed === true);
       }
-      let targetAnimations: GsapAnimation[];
-      try {
-        const ownedAnimations = getGsapAnimationsForSelection(selection);
-        targetAnimations = Array.isArray(ownedAnimations) ? ownedAnimations : await ownedAnimations;
-      } catch (error) {
-        restore();
-        trackGsapInteractionFailure(error, selection, "resize", "Resize animated layer");
-        throw error;
-      }
-      const scaleRoute = targetAnimations.some((anim) => anim.propertyGroup === "scale");
-      const selector = selectorFromSelection(selection);
-      const hasLivePositionTween = selector
-        ? hasNonHoldTweenForElement(
-            previewIframeRef.current,
-            selector,
-            undefined,
-            POSITION_CHANNELS,
-          )
-        : false;
-      logResize("commit-route", {
-        next,
-        offset: offset ?? null,
-        scaleRoute,
-        animCount: targetAnimations.length,
-        animGroups: targetAnimations.map((a) => `${a.propertyGroup}:${a.method}`),
-      });
-      let anchorMove: ReturnType<typeof stageElementPositionOffset> | null = null;
-      const stageCrop = prepareCropResize(selection.element);
-      let cropUndoKey: string | null = null;
-      const saveResizeAnchor = async (
-        ownsDragOffset: boolean,
-        commitMutation: CommitMutation,
-        coalesceKey: string,
-      ) => {
-        if (offset && !ownsDragOffset) {
-          const dragOutcome = await tryGsapDragIntercept(
-            selection,
-            offset,
-            targetAnimations,
-            previewIframeRef.current,
-            commitMutation,
-            makeFetchFallback(selection),
-            { stamp },
-          );
-          // Saved after the size, under its undo key, so the two are one step.
-          await saveMove(dragOutcome, async () => {
-            const plainAfterSettle = editsPlainCss(selection.element, "move");
-            anchorMove = writes.drawKeepingUndone(() =>
-              stageElementPositionOffset(selection, offset, plainAfterSettle, coalesceKey),
-            );
-          });
+      return whileScriptWrites(async () => {
+        const stamp = freezeDragStamp(selection.element);
+        let targetAnimations: GsapAnimation[];
+        try {
+          const ownedAnimations = getGsapAnimationsForSelection(selection);
+          targetAnimations = Array.isArray(ownedAnimations)
+            ? ownedAnimations
+            : await ownedAnimations;
+        } catch (error) {
+          restore();
+          trackGsapInteractionFailure(error, selection, "resize", "Resize animated layer");
+          throw error;
         }
-      };
-      await runGestureTransaction({
-        element: selection.element,
-        label: "Resize layer",
-        draw: writes.drawKeepingUndone,
-        settle: () => {
-          // Scale resize settles its center-scale residual after the scale commit
-          // renders. Width/height can settle its anchored position immediately.
-          if (!offset || scaleRoute || !selector) return;
-          writes.drawKeepingUndone(() => {
-            const gsapPos = readGsapPositionFromIframe(previewIframeRef.current, selector) ?? {
-              x: 0,
-              y: 0,
-            };
-            const { newX, newY } = computeDraggedGsapPosition(
-              selection.element,
+        const scaleRoute = targetAnimations.some((anim) => anim.propertyGroup === "scale");
+        const selector = selectorFromSelection(selection);
+        const hasLivePositionTween = selector
+          ? hasNonHoldTweenForElement(
+              previewIframeRef.current,
+              selector,
+              undefined,
+              POSITION_CHANNELS,
+            )
+          : false;
+        logResize("commit-route", {
+          next,
+          offset: offset ?? null,
+          scaleRoute,
+          animCount: targetAnimations.length,
+          animGroups: targetAnimations.map((a) => `${a.propertyGroup}:${a.method}`),
+        });
+        let anchorMove: ReturnType<typeof stageElementPositionOffset> | null = null;
+        const stageCrop = prepareCropResize(selection.element);
+        let cropUndoKey: string | null = null;
+        const saveResizeAnchor = async (
+          ownsDragOffset: boolean,
+          commitMutation: CommitMutation,
+          coalesceKey: string,
+        ) => {
+          if (offset && !ownsDragOffset) {
+            const dragOutcome = await tryGsapDragIntercept(
+              selection,
               offset,
-              gsapPos,
-              stamp,
+              targetAnimations,
+              previewIframeRef.current,
+              commitMutation,
+              makeFetchFallback(selection),
+              { stamp },
             );
-            logResize("sync-settle", { gsapPos, offset, newX, newY });
-            setElementGsapPosition(selection.element, newX, newY);
-          });
-        },
-        persist: async (commit, coalesceKey) => {
-          if (writes.commit) {
-            const commitMutation = commit(writes.commit);
-            try {
-              const outcome = await tryGsapResizeIntercept(
-                selection,
-                next,
-                targetAnimations,
-                previewIframeRef.current,
-                commitMutation,
-                makeFetchFallback(selection),
+            // Saved after the size, under its undo key, so the two are one step.
+            await saveMove(dragOutcome, async () => {
+              const plainAfterSettle = editsPlainCss(selection.element, "move");
+              anchorMove = writes.drawKeepingUndone(() =>
+                stageElementPositionOffset(selection, offset, plainAfterSettle, coalesceKey),
+              );
+            });
+          }
+        };
+        await runGestureTransaction({
+          element: selection.element,
+          label: "Resize layer",
+          draw: writes.drawKeepingUndone,
+          settle: () => {
+            // Scale resize settles its center-scale residual after the scale commit
+            // renders. Width/height can settle its anchored position immediately.
+            if (!offset || scaleRoute || !selector) return;
+            writes.drawKeepingUndone(() => {
+              const gsapPos = readGsapPositionFromIframe(previewIframeRef.current, selector) ?? {
+                x: 0,
+                y: 0,
+              };
+              const { newX, newY } = computeDraggedGsapPosition(
+                selection.element,
                 offset,
-                writes.drawKeepingUndone,
+                gsapPos,
                 stamp,
               );
-              assertGsapEditPersisted(outcome);
-              // Saved before the buffered GSAP writes, so their reload stays the gesture's last render.
-              if (outcome.status === "element-size") {
-                const result = await writes.drawKeepingUndone(() =>
-                  handleDomBoxSizeCommit(selection, next, undefined, undefined, coalesceKey),
+              logResize("sync-settle", { gsapPos, offset, newX, newY });
+              setElementGsapPosition(selection.element, newX, newY);
+            });
+          },
+          persist: async (commit, coalesceKey) => {
+            if (writes.commit) {
+              const commitMutation = commit(writes.commit);
+              try {
+                const outcome = await tryGsapResizeIntercept(
+                  selection,
+                  next,
+                  targetAnimations,
+                  previewIframeRef.current,
+                  commitMutation,
+                  makeFetchFallback(selection),
+                  offset,
+                  writes.drawKeepingUndone,
+                  stamp,
                 );
-                writes.recordDomResult(result);
-              } else cropUndoKey = coalesceKey;
-              // What the resize did, not what its tweens suggest: a scale hold still commits a size.
-              const ownsDragOffset =
-                outcome.status === "persisted" && outcome.ownsDragOffset === true;
-              logResize("intercept-handled", {
-                scaleRoute,
-                ownsDragOffset,
-                willForwardOffset: !!(offset && !ownsDragOffset),
-              });
-              // A resize that moved the element itself has already written
-              // where it landed. Everything else leaves the anchor to the drag.
-              await saveResizeAnchor(ownsDragOffset, commitMutation, coalesceKey);
-              logResizeSettle(selection.element, ownsDragOffset ? "gsap-scale" : "gsap-size");
-              return;
-            } catch (error) {
-              trackGsapInteractionFailure(error, selection, "resize", "Resize animated layer");
-              throw error;
+                assertGsapEditPersisted(outcome);
+                // Saved before the buffered GSAP writes, so their reload stays the gesture's last render.
+                if (outcome.status === "element-size") {
+                  const result = await writes.drawKeepingUndone(() =>
+                    handleDomBoxSizeCommit(selection, next, undefined, undefined, coalesceKey),
+                  );
+                  writes.recordDomResult(result);
+                } else cropUndoKey = coalesceKey;
+                // What the resize did, not what its tweens suggest: a scale hold still commits a size.
+                const ownsDragOffset =
+                  outcome.status === "persisted" && outcome.ownsDragOffset === true;
+                logResize("intercept-handled", {
+                  scaleRoute,
+                  ownsDragOffset,
+                  willForwardOffset: !!(offset && !ownsDragOffset),
+                });
+                // A resize that moved the element itself has already written
+                // where it landed. Everything else leaves the anchor to the drag.
+                await saveResizeAnchor(ownsDragOffset, commitMutation, coalesceKey);
+                logResizeSettle(selection.element, ownsDragOffset ? "gsap-scale" : "gsap-size");
+                return;
+              } catch (error) {
+                trackGsapInteractionFailure(error, selection, "resize", "Resize animated layer");
+                throw error;
+              }
             }
-          }
-          throw new Error("Resize of a GSAP-owned box has no GSAP writer");
-        },
-        afterBufferedCommitsSaved: async () => {
-          const anchorResult = await anchorMove?.save();
-          writes.recordDomResult(anchorResult);
-          // Only now is the size live for every caller, drag or not.
-          if (cropUndoKey) {
-            const cropResult = await writes.drawKeepingUndone(() =>
-              saveCropResize(stageCrop, selection, commitPositionPatchToHtml, cropUndoKey!),
-            );
-            writes.recordDomResult(cropResult);
-          }
-        },
-        restore: () => {
-          anchorMove?.rollback();
-          restore();
-        },
-        skipPixelAssert: hasLivePositionTween,
+            throw new Error("Resize of a GSAP-owned box has no GSAP writer");
+          },
+          afterBufferedCommitsSaved: async () => {
+            const anchorResult = await anchorMove?.save();
+            writes.recordDomResult(anchorResult);
+            // Only now is the size live for every caller, drag or not.
+            if (cropUndoKey) {
+              const cropResult = await writes.drawKeepingUndone(() =>
+                saveCropResize(stageCrop, selection, commitPositionPatchToHtml, cropUndoKey!),
+              );
+              writes.recordDomResult(cropResult);
+            }
+          },
+          restore: () => {
+            anchorMove?.rollback();
+            restore();
+          },
+          skipPixelAssert: hasLivePositionTween,
+        });
+        return writes.finish();
       });
-      return writes.finish();
     },
     [
       handleDomBoxSizeCommit,
@@ -372,7 +380,10 @@ export function useGsapAwareEditing({
         const result = await handleDomRotationCommit(selection, next);
         return writes.finish(result?.changed === true);
       }
-      if (writes.commit) {
+      const writer = writes.commit;
+      if (!writer) return;
+      return whileScriptWrites(async () => {
+        const stamp = freezeDragStamp(selection.element);
         try {
           const targetAnimations = await getGsapAnimationsForSelection(selection);
           // A keyframe or a tl.set; a computed source rejects, so the gesture restores its draft.
@@ -381,8 +392,9 @@ export function useGsapAwareEditing({
             next.angle,
             targetAnimations,
             previewIframeRef.current,
-            writes.commit,
+            writer,
             makeFetchFallback(selection),
+            stamp,
           );
           assertGsapEditPersisted(outcome);
           return writes.finish();
@@ -390,7 +402,7 @@ export function useGsapAwareEditing({
           trackGsapInteractionFailure(error, selection, "rotation", "Rotate animated layer");
           throw error;
         }
-      }
+      });
     },
     [
       gsapCommitMutation,

package/src/hooks/useGsapAwareGroupMove.ts

@@ -8,8 +8,11 @@ import { observeGsapGesture } from "./gsapGestureOutcome";
 import { editsPlainCss } from "./gsapRuntimeKeyframes";
 import { refuseGsapTakeover } from "./elementOffsetStager";
 import { tryGsapDragIntercept } from "./gsapRuntimeBridge";
+import { freezeDragStamp } from "./draggedGsapPosition";
 import { assertGsapEditPersisted } from "./gsapEditOutcome";
 import { firstPreflightFailure } from "./gsapGroupPreflight";
+import { whileScriptWrites } from "../player/previewReloading";
+import type { GeometryCommitResult } from "../utils/previewFeatureUsage";
 
 // A distinct key keeps consecutive group drags in separate undo entries.
 let groupDragCommitCounter = 0;
@@ -36,131 +39,141 @@ export function useGsapAwareGroupMove({
     async (
       updates: DomEditGroupPathOffsetCommit[],
       options: { refusalToast?: boolean } = {},
-    ): Promise<import("../utils/previewFeatureUsage").GeometryCommitResult> => {
+    ): Promise<GeometryCommitResult> => {
       const writes = observeGsapGesture(gsapCommitMutation);
       const writer = writes.commit;
       if (!writer) return { ok: true, changed: false };
-      const toastRefusal = options.refusalToast !== false;
-      // One coalesce key across slow writes keeps the group drag in one undo entry.
-      const coalesceKey = `group-drag:${++groupDragCommitCounter}`;
-      // Hold the render until every member is saved, or unwritten members snap back.
-      let renderOnCommit = false;
-      const previewFallbackLatch = { pending: false };
-      const withGroupOptions = (options: CommitMutationOptions): CommitMutationOptions => ({
-        ...options,
-        coalesceKey,
-        coalesceMs: Number.POSITIVE_INFINITY,
-        deferPreviewSync: !renderOnCommit,
-        previewFallbackLatch,
-      });
-      // Batch members in the same file to avoid repeating its read, parse, write and preview patch.
-      const queued: CommitMutationCall[] = [];
-      const flushQueued = async () => {
-        if (queued.length === 0) return;
-        const calls = queued.splice(0, queued.length);
-        if (!writer.batch) {
-          for (const call of calls) {
-            await writer(call.selection, call.mutation, call.options);
-          }
-          return;
-        }
-        await writer.batch(calls, {
-          ...(calls.at(-1)?.options ?? { label: "Move animated layer (group)" }),
-          label: "Move animated layer (group)",
+      const scripted = updates.some(
+        ({ selection, plainTranslate }) =>
+          !(plainTranslate ?? editsPlainCss(selection.element, "move")),
+      );
+      const commitGroup = async (): Promise<GeometryCommitResult> => {
+        const stamps = new Map(
+          updates.map((u) => [u.selection, freezeDragStamp(u.selection.element)]),
+        );
+        const toastRefusal = options.refusalToast !== false;
+        // One coalesce key across slow writes keeps the group drag in one undo entry.
+        const coalesceKey = `group-drag:${++groupDragCommitCounter}`;
+        // Hold the render until every member is saved, or unwritten members snap back.
+        let renderOnCommit = false;
+        const previewFallbackLatch = { pending: false };
+        const withGroupOptions = (options: CommitMutationOptions): CommitMutationOptions => ({
+          ...options,
+          coalesceKey,
+          coalesceMs: Number.POSITIVE_INFINITY,
+          deferPreviewSync: !renderOnCommit,
+          previewFallbackLatch,
         });
-      };
-      const coalescedCommit: typeof gsapCommitMutation = (selection, mutation, options) => {
-        queued.push({ selection, mutation, options: withGroupOptions(options) });
-        return Promise.resolve();
-      };
-      const preflightAnimations = new Map<DomEditSelection, GsapAnimation[]>();
-      // Members saved on themselves, each with its route: true for its CSS translate.
-      const offsetMembers = new Map<DomEditSelection, boolean>();
-      // Editability is user-atomic: prove every member can be written before the first source
-      // mutation, so a blocked member never leaves earlier siblings partially moved. Preflights
-      // write nothing and share one in-flight parse per file, so they run together.
-      const preflightResults = await Promise.allSettled(
-        updates.map(async ({ selection, next, plainTranslate }) => {
-          if (plainTranslate ?? editsPlainCss(selection.element, "move")) {
-            refuseGsapTakeover(selection.element, toastRefusal ? showToast : () => {});
-            return void offsetMembers.set(selection, true);
+        // Batch members in the same file to avoid repeating its read, parse, write and preview patch.
+        const queued: CommitMutationCall[] = [];
+        const flushQueued = async () => {
+          if (queued.length === 0) return;
+          const calls = queued.splice(0, queued.length);
+          if (!writer.batch) {
+            for (const call of calls) {
+              await writer(call.selection, call.mutation, call.options);
+            }
+            return;
           }
-          const animations = await makeFetchFallback(selection, { failOnFetchError: true })();
-          preflightAnimations.set(selection, animations);
-          const outcome = await tryGsapDragIntercept(
-            selection,
-            next,
-            animations,
-            previewIframeRef.current,
-            coalescedCommit,
-            undefined,
-            { preflightOnly: true, group: true },
-          );
-          if (outcome.status === "element-offset") offsetMembers.set(selection, false);
-          assertGsapEditPersisted(outcome);
-        }),
-      );
-      const preflightFailure = firstPreflightFailure(
-        preflightResults,
-        updates,
-        offsetMembers,
-        activeCompPath,
-      );
-      if (preflightFailure) {
-        trackGsapInteractionFailure(
-          preflightFailure.error,
-          preflightFailure.selection,
-          "drag",
-          "Move animated layer (group)",
-          toastRefusal,
+          await writer.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[]>();
+        // Members saved on themselves, each with its route: true for its CSS translate.
+        const offsetMembers = new Map<DomEditSelection, boolean>();
+        // Editability is user-atomic: prove every member can be written before the first source
+        // mutation, so a blocked member never leaves earlier siblings partially moved. Preflights
+        // write nothing and share one in-flight parse per file, so they run together.
+        const preflightResults = await Promise.allSettled(
+          updates.map(async ({ selection, next, plainTranslate }) => {
+            if (plainTranslate ?? editsPlainCss(selection.element, "move")) {
+              refuseGsapTakeover(selection.element, toastRefusal ? showToast : () => {});
+              return void offsetMembers.set(selection, true);
+            }
+            const animations = await makeFetchFallback(selection, { failOnFetchError: true })();
+            preflightAnimations.set(selection, animations);
+            const outcome = await tryGsapDragIntercept(
+              selection,
+              next,
+              animations,
+              previewIframeRef.current,
+              coalescedCommit,
+              undefined,
+              { preflightOnly: true, group: true },
+            );
+            if (outcome.status === "element-offset") offsetMembers.set(selection, false);
+            assertGsapEditPersisted(outcome);
+          }),
         );
-        throw preflightFailure.error;
-      }
-      const lastScriptWrite = updates.findLastIndex(
-        ({ selection }) => !offsetMembers.has(selection),
-      );
-      for (const [index, { selection, next }] of updates.entries()) {
-        renderOnCommit = index === lastScriptWrite;
-        const plain = offsetMembers.get(selection);
-        if (plain !== undefined) {
-          const staged = writes.drawKeepingUndone(() =>
-            stageElementPositionOffset(selection, next, plain, coalesceKey),
+        const preflightFailure = firstPreflightFailure(
+          preflightResults,
+          updates,
+          offsetMembers,
+          activeCompPath,
+        );
+        if (preflightFailure) {
+          trackGsapInteractionFailure(
+            preflightFailure.error,
+            preflightFailure.selection,
+            "drag",
+            "Move animated layer (group)",
+            toastRefusal,
           );
-          const result = await staged.save();
-          writes.recordDomResult(result);
-          continue;
+          throw preflightFailure.error;
+        }
+        const lastScriptWrite = updates.findLastIndex(
+          ({ selection }) => !offsetMembers.has(selection),
+        );
+        for (const [index, { selection, next }] of updates.entries()) {
+          renderOnCommit = index === lastScriptWrite;
+          const plain = offsetMembers.get(selection);
+          if (plain !== undefined) {
+            const staged = writes.drawKeepingUndone(() =>
+              stageElementPositionOffset(selection, next, plain, coalesceKey),
+            );
+            const result = await staged.save();
+            writes.recordDomResult(result);
+            continue;
+          }
+          try {
+            const outcome = await tryGsapDragIntercept(
+              selection,
+              next,
+              preflightAnimations.get(selection) ?? [],
+              previewIframeRef.current,
+              coalescedCommit,
+              // 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, stamp: stamps.get(selection) },
+            );
+            assertGsapEditPersisted(outcome);
+          } catch (error) {
+            trackGsapInteractionFailure(error, selection, "drag", "Move animated layer (group)");
+            throw error;
+          }
         }
         try {
-          const outcome = await tryGsapDragIntercept(
-            selection,
-            next,
-            preflightAnimations.get(selection) ?? [],
-            previewIframeRef.current,
-            coalescedCommit,
-            // 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);
+          await flushQueued();
+          return writes.finish();
         } catch (error) {
-          trackGsapInteractionFailure(error, selection, "drag", "Move animated layer (group)");
+          // 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;
         }
-      }
-      try {
-        await flushQueued();
-        return writes.finish();
-      } 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;
-      }
+      };
+      return scripted ? whileScriptWrites(commitGroup) : commitGroup();
     },
     [
       gsapCommitMutation,