@hyperframes/studio 0.8.133 → 0.8.134

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyperframes/studio",
-  "version": "0.8.133",
+  "version": "0.8.134",
   "description": "",
   "repository": {
     "type": "git",
@@ -60,12 +60,12 @@
     "dockview-react": "8.3.1",
     "gsap": "^3.13.0",
     "mediabunny": "^1.45.3",
-    "@hyperframes/core": "0.8.133",
-    "@hyperframes/sdk": "0.8.133",
-    "@hyperframes/parsers": "0.8.133",
-    "@hyperframes/player": "0.8.133",
-    "@hyperframes/shader-transitions": "0.8.133",
-    "@hyperframes/studio-server": "0.8.133"
+    "@hyperframes/sdk": "0.8.134",
+    "@hyperframes/core": "0.8.134",
+    "@hyperframes/studio-server": "0.8.134",
+    "@hyperframes/parsers": "0.8.134",
+    "@hyperframes/player": "0.8.134",
+    "@hyperframes/shader-transitions": "0.8.134"
   },
   "devDependencies": {
     "@tailwindcss/vite": "^4.3.3",
@@ -81,7 +81,7 @@
     "vite": "^6.4.2",
     "vitest": "^4.1.11",
     "zustand": "^5.0.0",
-    "@hyperframes/producer": "0.8.133"
+    "@hyperframes/producer": "0.8.134"
   },
   "peerDependencies": {
     "react": "19",

package/src/components/editor/manualEditsDom.ts

@@ -91,10 +91,14 @@ export function studioManualEditSavesIn(doc: Document): number {
   return gestureSaves.get(doc) ?? 0;
 }
 
+export function countStudioPreviewChange(doc: Document): void {
+  gestureSaves.set(doc, studioManualEditSavesIn(doc) + 1);
+}
+
 /** Runs a gesture's save, counted as it starts and as it settles: a reload requested before shows the old file. */
 export function countStudioManualEditSave<R>(element: HTMLElement, save: () => R): R {
   const doc = element.ownerDocument;
-  const count = () => void gestureSaves.set(doc, studioManualEditSavesIn(doc) + 1);
+  const count = () => countStudioPreviewChange(doc);
   count();
   const result = save();
   void Promise.resolve(result).then(count, count);

package/src/components/editor/plainTranslate.test.ts

@@ -1,6 +1,6 @@
 // @vitest-environment happy-dom
-import { describe, expect, it } from "vitest";
-import { readTranslatePx } from "./plainTranslate";
+import { describe, expect, it, vi } from "vitest";
+import { readTranslatePx, readTranslatePxLeavingPercent } from "./plainTranslate";
 
 function box(style: string): HTMLElement {
   const element = document.createElement("div");
@@ -76,3 +76,22 @@ describe("readTranslatePx", () => {
     },
   );
 });
+
+describe("readTranslatePxLeavingPercent", () => {
+  it("seeds a first tween from the px a plain move left in CSS translate, leaving % to xPercent", () => {
+    const el = document.body.appendChild(document.createElement("div"));
+    // happy-dom computes no `translate`; Chromium resolves it to these strings.
+    const computed = (translate: string) =>
+      vi.spyOn(window, "getComputedStyle").mockReturnValue({ translate } as CSSStyleDeclaration);
+    computed("299.893px 203.262px");
+    expect(readTranslatePxLeavingPercent(el)).toEqual({ x: 299.893, y: 203.262 });
+    computed("calc(-50% + 120px) -50%");
+    expect(readTranslatePxLeavingPercent(el)).toEqual({ x: 120, y: 0 });
+    computed("calc(-50% - 120px) calc(min(10px, 20px) + 5px)");
+    expect(readTranslatePxLeavingPercent(el)).toEqual({ x: -120, y: 15 });
+    computed("none");
+    expect(readTranslatePxLeavingPercent(el)).toEqual({ x: 0, y: 0 });
+    vi.restoreAllMocks();
+    el.remove();
+  });
+});

package/src/components/editor/plainTranslate.ts

@@ -100,6 +100,13 @@ export function readTranslatePx(el: HTMLElement): Point {
   };
 }
 
+export function readTranslatePxLeavingPercent(el: HTMLElement): Point {
+  const value = el.ownerDocument.defaultView?.getComputedStyle(el).translate || "none";
+  const [x = "0px", y = "0px"] = value === "none" ? [] : splitTopLevelWhitespace(value);
+  const px = (part: string) => roundTo3(evaluateLength(part, 0)) || 0;
+  return { x: px(x), y: px(y) };
+}
+
 export const UNREADABLE_TRANSLATE =
   "Studio can't read this layer's translate. Move it in the Code tab.";
 

package/src/hooks/draggedGsapPosition.test.ts

@@ -0,0 +1,34 @@
+// @vitest-environment happy-dom
+import { expect, it, vi } from "vitest";
+import type { DomEditSelection } from "../components/editor/domEditingTypes";
+import { freezeDragStamp, restoreDragOffset } from "./draggedGsapPosition";
+import { commitStaticGsapPosition } from "./gsapDragCommit";
+
+function stamp(element: HTMLElement, base: { x: number; y: number }) {
+  element.setAttribute("data-hf-drag-gsap-base-x", String(base.x));
+  element.setAttribute("data-hf-drag-gsap-base-y", String(base.y));
+  element.setAttribute("data-hf-drag-initial-offset-x", "0");
+  element.setAttribute("data-hf-drag-initial-offset-y", "0");
+}
+
+// A resize released at x 60 moves its anchor by -50; the next drag presses before that write is planned.
+it("a commit that outlives its gesture uses the gesture's stamp, not the next one's", async () => {
+  const element = document.createElement("div");
+  stamp(element, { x: 60, y: 37.5 });
+  const frozen = freezeDragStamp(element);
+  stamp(element, { x: 10, y: 4 });
+  const commitMutation = vi.fn();
+
+  await commitStaticGsapPosition(
+    { id: "target", selector: "#target", element } as DomEditSelection,
+    { x: -50, y: -33.5 },
+    { x: 0, y: 0 },
+    "#target",
+    null,
+    { commitMutation, stamp: frozen },
+  );
+
+  expect(commitMutation.mock.calls[0]![1].properties).toEqual({ x: 10, y: 4 });
+  restoreDragOffset(element, frozen);
+  expect(element.getAttribute("data-hf-drag-initial-offset-x")).toBe("0");
+});

package/src/hooks/draggedGsapPosition.ts

@@ -36,10 +36,35 @@ export function readCssRotation(element: HTMLElement, withRotate = true): number
   }
 }
 
+export interface DragStamp {
+  origX: number;
+  origY: number;
+  baseX: number;
+  baseY: number;
+  frozen?: boolean;
+}
+
+/** The drag-start attributes as they are now; NaN for an absent base. */
+export function readDragStamp(element: HTMLElement): DragStamp {
+  const read = (name: string) => Number.parseFloat(element.getAttribute(name) ?? "");
+  return {
+    origX: read("data-hf-drag-initial-offset-x") || 0,
+    origY: read("data-hf-drag-initial-offset-y") || 0,
+    baseX: read("data-hf-drag-gsap-base-x"),
+    baseY: read("data-hf-drag-gsap-base-y"),
+  };
+}
+
+/** A gesture's stamp read at its release, for commits that finish after the next gesture re-stamps the element. */
+export const freezeDragStamp = (element: HTMLElement): DragStamp => ({
+  ...readDragStamp(element),
+  frozen: true,
+});
+
 /**
  * Translate a studio drag offset into absolute GSAP x/y, accounting for the
  * element's rotation and its drag-start base pose. Reads the drag-start
- * attributes stamped by `createManualOffsetDragMember`
+ * stamp (`readDragStamp` by default) set by `createManualOffsetDragMember`
  * (`data-hf-drag-initial-offset-*`, `data-hf-drag-gsap-base-*`); `fallbackBase`
  * is used when the base attributes are absent (e.g. a static element that GSAP
  * hasn't given an x/y yet).
@@ -52,22 +77,19 @@ export function computeDraggedGsapPosition(
   element: HTMLElement,
   studioOffset: { x: number; y: number },
   fallbackBase: { x: number; y: number },
+  stamp: DragStamp = readDragStamp(element),
 ): { newX: number; newY: number; baseGsapX: number; baseGsapY: number } {
   const rotStyle = element.style.getPropertyValue("--hf-studio-rotation");
   const rotDeg = Number.parseFloat(rotStyle) || 0;
   const rad = (-rotDeg * Math.PI) / 180;
   const cos = Math.cos(rad);
   const sin = Math.sin(rad);
-  const origX = Number.parseFloat(element.getAttribute("data-hf-drag-initial-offset-x") ?? "") || 0;
-  const origY = Number.parseFloat(element.getAttribute("data-hf-drag-initial-offset-y") ?? "") || 0;
-  const deltaX = studioOffset.x - origX;
-  const deltaY = studioOffset.y - origY;
+  const deltaX = studioOffset.x - stamp.origX;
+  const deltaY = studioOffset.y - stamp.origY;
   const adjX = deltaX * cos - deltaY * sin;
   const adjY = deltaX * sin + deltaY * cos;
-  const parsedBaseX = Number.parseFloat(element.getAttribute("data-hf-drag-gsap-base-x") ?? "");
-  const parsedBaseY = Number.parseFloat(element.getAttribute("data-hf-drag-gsap-base-y") ?? "");
-  const baseGsapX = Number.isFinite(parsedBaseX) ? parsedBaseX : fallbackBase.x;
-  const baseGsapY = Number.isFinite(parsedBaseY) ? parsedBaseY : fallbackBase.y;
+  const baseGsapX = Number.isFinite(stamp.baseX) ? stamp.baseX : fallbackBase.x;
+  const baseGsapY = Number.isFinite(stamp.baseY) ? stamp.baseY : fallbackBase.y;
   return {
     newX: roundTo3(baseGsapX + adjX),
     newY: roundTo3(baseGsapY + adjY),
@@ -76,12 +98,15 @@ export function computeDraggedGsapPosition(
   };
 }
 
-/** Puts the drag's preview offset back once the written position renders instead. */
-export function restoreDragOffset(element: HTMLElement): void {
-  const origin = (axis: "x" | "y") =>
-    Number.parseFloat(element.getAttribute(`data-hf-drag-initial-offset-${axis}`) ?? "") || 0;
-  element.style.setProperty("--hf-studio-offset-x", `${origin("x")}px`);
-  element.style.setProperty("--hf-studio-offset-y", `${origin("y")}px`);
+/** Puts the drag's preview offset back once the written position renders instead. A frozen stamp's
+ *  gesture is over: the attributes belong to the one after it. */
+export function restoreDragOffset(
+  element: HTMLElement,
+  stamp: DragStamp = readDragStamp(element),
+): void {
+  if (stamp.frozen) return;
+  element.style.setProperty("--hf-studio-offset-x", `${stamp.origX}px`);
+  element.style.setProperty("--hf-studio-offset-y", `${stamp.origY}px`);
   element.removeAttribute("data-hf-drag-initial-offset-x");
   element.removeAttribute("data-hf-drag-initial-offset-y");
 }

package/src/hooks/gsapDragCommit.ts

@@ -12,7 +12,12 @@ import {
 } from "../utils/globalTimeCompiler";
 import { roundTo3, roundToLayoutPx } from "../utils/rounding";
 import { computeElementPercentage, keyframeEases, writeTargetSelector } from "./gsapShared";
-import { computeDraggedGsapPosition } from "./draggedGsapPosition";
+import {
+  computeDraggedGsapPosition,
+  readDragStamp,
+  restoreDragOffset,
+  type DragStamp,
+} from "./draggedGsapPosition";
 import type { CommitMutation } from "./gsapScriptCommitTypes";
 import { isGestureTransactionCommit, runGestureTransaction } from "./gestureTransaction";
 import { setPatchFromUpdateProperty } from "./gsapDragStaticSetHelpers";
@@ -26,6 +31,8 @@ export {
 export interface GsapDragCommitCallbacks {
   commitMutation: CommitMutation;
   fetchAnimations?: () => Promise<GsapAnimation[]>;
+  /** The gesture's drag stamp, when its commit can outlive it; else read from the element. */
+  stamp?: DragStamp;
 }
 
 /**
@@ -169,7 +176,12 @@ export async function commitStaticGsapPosition(
   existingSet: GsapAnimation | null,
   callbacks: GsapDragCommitCallbacks,
 ): Promise<void> {
-  const { newX, newY } = computeDraggedGsapPosition(selection.element, studioOffset, gsapPos);
+  const { newX, newY } = computeDraggedGsapPosition(
+    selection.element,
+    studioOffset,
+    gsapPos,
+    callbacks.stamp,
+  );
   if (existingSet) {
     if (existingSet.keyframes) {
       // Keyframed zero-duration hold (drag-path corruption): can't update-property
@@ -344,22 +356,17 @@ export async function commitWholePathOffset(
   callbacks: GsapDragCommitCallbacks,
 ): Promise<void> {
   const el = selection.element;
+  const stamp = callbacks.stamp ?? readDragStamp(el);
   const { newX, newY, baseGsapX, baseGsapY } = computeDraggedGsapPosition(
     el,
     studioOffset,
     gsapPos,
+    stamp,
   );
   const deltaX = newX - baseGsapX;
   // fallow-ignore-next-line code-duplication
   const deltaY = newY - baseGsapY;
-  const origX = Number.parseFloat(el.getAttribute("data-hf-drag-initial-offset-x") ?? "") || 0;
-  const origY = Number.parseFloat(el.getAttribute("data-hf-drag-initial-offset-y") ?? "") || 0;
-  const restoreOffset = () => {
-    el.style.setProperty("--hf-studio-offset-x", `${origX}px`);
-    el.style.setProperty("--hf-studio-offset-y", `${origY}px`);
-    el.removeAttribute("data-hf-drag-initial-offset-x");
-    el.removeAttribute("data-hf-drag-initial-offset-y");
-  };
+  const restoreOffset = () => restoreDragOffset(el, stamp);
 
   // fallow-ignore-next-line code-duplication
   let effectiveAnim = anim;

package/src/hooks/gsapDragPositionCommit.ts

@@ -9,7 +9,11 @@ import {
 import { KEYFRAME_PCT_MATCH, playsNear } from "./gsapShared";
 import { progressAtTime, runEaseOf, timeAtProgress } from "../utils/gsapKeyframeEases";
 import { roundTo3 } from "../utils/rounding";
-import { computeDraggedGsapPosition } from "./draggedGsapPosition";
+import {
+  computeDraggedGsapPosition,
+  readDragStamp,
+  restoreDragOffset,
+} from "./draggedGsapPosition";
 import {
   type GsapDragCommitCallbacks,
   computeCurrentPercentage,
@@ -117,20 +121,15 @@ export async function commitGsapPositionFromDrag(
   callbacks: GsapDragCommitCallbacks,
 ): Promise<GsapEditOutcome> {
   const el = selection.element;
+  const stamp = callbacks.stamp ?? readDragStamp(el);
   // fallow-ignore-next-line code-duplication
   const { newX, newY, baseGsapX, baseGsapY } = computeDraggedGsapPosition(
     el,
     studioOffset,
     gsapPos,
+    stamp,
   );
-  const origX = Number.parseFloat(el.getAttribute("data-hf-drag-initial-offset-x") ?? "") || 0;
-  const origY = Number.parseFloat(el.getAttribute("data-hf-drag-initial-offset-y") ?? "") || 0;
-  const restoreOffset = () => {
-    el.style.setProperty("--hf-studio-offset-x", `${origX}px`);
-    el.style.setProperty("--hf-studio-offset-y", `${origY}px`);
-    el.removeAttribute("data-hf-drag-initial-offset-x");
-    el.removeAttribute("data-hf-drag-initial-offset-y");
-  };
+  const restoreOffset = () => restoreDragOffset(el, stamp);
 
   if (anim.arcPath?.enabled) {
     const { activeKeyframePct, currentTime, setActiveKeyframePct } = usePlayerStore.getState();

package/src/hooks/gsapResizeIntercept.test.ts

@@ -1,5 +1,5 @@
 // @vitest-environment happy-dom
-import { afterEach, expect, it, vi } from "vitest";
+import { afterEach, describe, expect, it, vi } from "vitest";
 import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
 import type { DomEditSelection } from "../components/editor/domEditingTypes";
 import { usePlayerStore } from "../player/store/playerStore";
@@ -182,6 +182,7 @@ it("reuses the ownership parse instead of fetching a resolved size group twice",
   await expect(
     tryGsapResizeIntercept(
       selection,
+      // fallow-ignore-next-line code-duplication
       { width: 344, height: 344 },
       [],
       null,
@@ -573,6 +574,76 @@ it("hands the size to the element's CSS when its only tween is a fade", async ()
   expect(commitMutation).not.toHaveBeenCalled();
 });
 
+describe("the first resize of a keyframed element under auto-record", () => {
+  const positionKeys = {
+    id: "#title-to-1-position",
+    targetSelector: "#title",
+    propertyGroup: "position",
+    method: "to",
+    properties: {},
+    keyframes: { keyframes: [{ percentage: 0, properties: { x: 300, y: 200 } }] },
+    position: 1,
+    resolvedStart: 1,
+    duration: 3,
+  } as unknown as GsapAnimation;
+
+  it("writes a size key at the playhead in one mutation and hands the draft size to GSAP", async () => {
+    usePlayerStore.setState({ currentTime: 2 });
+    const commitMutation = vi.fn();
+    const selection = titleSelection();
+    selection.element.setAttribute("data-hf-studio-box-size", "true");
+
+    // fallow-ignore-next-line code-duplication
+    const handled = await tryGsapResizeIntercept(
+      selection,
+      { width: 424.2, height: 237 },
+      [positionKeys],
+      null,
+      commitMutation,
+    );
+
+    expect(handled).toEqual({ status: "persisted" });
+    expect(commitMutation.mock.calls.map((call) => call[1])).toEqual([
+      {
+        type: "add-with-keyframes",
+        targetSelector: "#title",
+        position: 2,
+        duration: 1,
+        keyframes: [{ percentage: 0, properties: { width: 424, height: 237 } }],
+      },
+    ]);
+    expect(selection.element.hasAttribute("data-hf-studio-box-size")).toBe(false);
+  });
+
+  const fadeKeys = {
+    ...positionKeys,
+    id: "#title-to-1-visual",
+    propertyGroup: "visual",
+    keyframes: { keyframes: [{ percentage: 0, properties: { opacity: 0 } }] },
+  } as unknown as GsapAnimation;
+
+  it.each([
+    ["with auto-record off", positionKeys, false],
+    ["on an element whose only keyframes fade it", fadeKeys, true],
+  ])("hands the size to CSS %s", async (_, keyed, autoKeyframeEnabled) => {
+    usePlayerStore.setState({ autoKeyframeEnabled });
+    const commitMutation = vi.fn();
+    try {
+      const handled = await tryGsapResizeIntercept(
+        titleSelection(),
+        { width: 424, height: 237 },
+        [keyed],
+        null,
+        commitMutation,
+      );
+      expect(handled).toEqual({ status: "element-size" });
+      expect(commitMutation).not.toHaveBeenCalled();
+    } finally {
+      usePlayerStore.setState({ autoKeyframeEnabled: true });
+    }
+  });
+});
+
 it.each([
   ["stays put", { x: 0, y: 0 }, { width: 300 }, undefined],
   ["moves", { x: -40, y: 0 }, { width: 300, x: 10, y: 0 }, true],

package/src/hooks/gsapResizeIntercept.ts

@@ -5,14 +5,18 @@
  * frame can't jump. Split from gsapRuntimeBridge, which owns the shared
  * group-tween resolution used by the drag/resize/rotate intercepts.
  */
-import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
+import type { GsapAnimation, PropertyGroupName } from "@hyperframes/core/gsap-parser";
 import type { DomEditSelection } from "../components/editor/domEditingTypes";
 import { clearStudioBoxSize } from "../components/editor/manualEdits";
 import {
   STUDIO_ORIGINAL_BOX_HEIGHT_ATTR,
   STUDIO_ORIGINAL_BOX_WIDTH_ATTR,
 } from "../components/editor/manualEditsTypes";
-import { setElementGsapPosition, setElementGsapScale } from "../utils/elementGsap";
+import {
+  setElementGsapPosition,
+  setElementGsapScale,
+  setElementGsapSize,
+} from "../utils/elementGsap";
 import { usePlayerStore } from "../player/store/playerStore";
 import { readGsapProperty } from "./gsapRuntimeReaders";
 import {
@@ -23,7 +27,11 @@ import {
   findSizeSetAnimation,
 } from "./gsapDragCommit";
 import type { GsapDragCommitCallbacks } from "./gsapDragCommit";
-import { computeDraggedGsapPosition, restoreDragOffset } from "./draggedGsapPosition";
+import {
+  computeDraggedGsapPosition,
+  restoreDragOffset,
+  type DragStamp,
+} from "./draggedGsapPosition";
 import { pickClosestToPlayhead, readGsapPositionFromIframe } from "./gsapPositionDetection";
 import { commitWholePropertyOffset } from "./gsapWholePropertyOffsetCommit";
 import { commitGsapPositionFromDrag } from "./gsapDragPositionCommit";
@@ -39,9 +47,11 @@ import {
 } from "./gsapEditOutcome";
 import { commitValueAtPlayhead } from "./gsapValueAtPlayhead";
 import { preflightGsapResizeIntercept, resizeRoute } from "./gsapResizePreflight";
+import { singleKeyTweenMutation } from "./useEnableKeyframes";
 
 const SIZE_PROPS = new Set(["width", "height"]);
 const POSITION_XY = new Set(["x", "y"]);
+const MOVED_OR_SIZED = new Set(["x", "y", "xPercent", "yPercent", "width", "height"]);
 
 /**
  * The element's box before the resize draft ran, in CSS pixels.
@@ -88,6 +98,7 @@ export async function commitSizeAtPlayhead(
           selection.element,
           dragOffset,
           readGsapPositionFromIframe(iframe, selector) ?? { x: 0, y: 0 },
+          callbacks.stamp,
         )
       : null;
   const written = await commitValueAtPlayhead(
@@ -102,12 +113,43 @@ export async function commitSizeAtPlayhead(
         ...preGestureBoxSize(selection.element),
         ...(anchor && { x: anchor.baseGsapX, y: anchor.baseGsapY }),
       },
-      ...(anchor && { beforeReload: () => restoreDragOffset(selection.element) }),
+      ...(anchor && { beforeReload: () => restoreDragOffset(selection.element, callbacks.stamp) }),
     },
   );
   return written.status === "persisted" && anchor ? { ...written, ownsDragOffset: true } : written;
 }
 
+/** A keyed size is GSAP's at every time; the gesture's draft, re-applied after each seek, would pin it there. */
+function handOverDraftSize(
+  selection: DomEditSelection,
+  written: GsapEditOutcome,
+  size: Record<string, number>,
+  draw: <T>(run: () => T) => T,
+): GsapEditOutcome {
+  const { width, height } = size;
+  if (written.status !== "persisted" || width == null || height == null) return written;
+  draw(() => {
+    clearStudioBoxSize(selection.element);
+    setElementGsapSize(selection.element, width, height);
+  });
+  return written;
+}
+
+/** Under auto-record, a keyframed element's first resize is a size key at the playhead, held at all times. */
+function firstSizeKey(
+  selection: DomEditSelection,
+  size: { width: number; height: number },
+  resizeGroup: PropertyGroupName,
+  animations: GsapAnimation[],
+): Record<string, unknown> | null {
+  const { autoKeyframeEnabled, currentTime } = usePlayerStore.getState();
+  const keyframed = animations.some(
+    (a) => a.keyframes && animationWritesAnyProperty(a, MOVED_OR_SIZED),
+  );
+  if (resizeGroup !== "size" || !autoKeyframeEnabled || !keyframed) return null;
+  return singleKeyTweenMutation(selection, size, currentTime);
+}
+
 /**
  * Whether this tween already states scale as `scaleX`/`scaleY`.
  *
@@ -136,6 +178,7 @@ export async function tryGsapResizeIntercept(
   fetchFallbackAnimations?: () => Promise<GsapAnimation[]>,
   dragOffset?: { x: number; y: number },
   draw: <T>(run: () => T) => T = (run) => run(),
+  stamp?: DragStamp,
 ): Promise<GsapEditOutcome> {
   const fetchedAnimations = fetchFallbackAnimations ? await fetchFallbackAnimations() : [];
   const outcome = preflightGsapResizeIntercept(selection, animations, iframe, fetchedAnimations);
@@ -170,10 +213,16 @@ export async function tryGsapResizeIntercept(
     size,
   });
   if (!anim || isInstantHold(anim)) {
+    const sized = { width: roundToLayoutPx(size.width), height: roundToLayoutPx(size.height) };
     const scriptWritesSize = allKnownAnimations.some((a) =>
       animationWritesAnyProperty(a, SIZE_PROPS),
     );
-    if (!scriptWritesSize) return { status: "element-size" };
+    if (!scriptWritesSize) {
+      const firstKey = firstSizeKey(selection, sized, resizeGroup, workingAnimations);
+      if (!firstKey) return { status: "element-size" };
+      await commitMutation(selection, firstKey, { label: "Resize", softReload: true });
+      return handOverDraftSize(selection, { status: "persisted" }, sized, draw);
+    }
     const sel = selectorFromSelection(selection) ?? writeTargetSelector(selection);
     if (!sel) return { status: "blocked", reason: "no-selector" };
     // A scale hold is not a size hold.
@@ -191,8 +240,7 @@ export async function tryGsapResizeIntercept(
         ? (anim ?? findSizeSetAnimation(workingAnimations, sel, selection.element))
         : findSizeSetAnimation(workingAnimations, sel, selection.element);
 
-    // Keyframe the size only when a real tween already animates it, as move and
-    // rotate do; a fade or a slide on the element gets a plain size.
+    // Keyframe the size when a real tween already animates it; a static size set stays a set.
     if (resizeGroup === "size") {
       const animatedTween = pickClosestToPlayhead(
         workingAnimations.filter(
@@ -204,11 +252,19 @@ export async function tryGsapResizeIntercept(
       );
       if (animatedTween) {
         logResize("intercept-route", { route: "keyframed-size", tweenId: animatedTween.id });
-        const sized = { width: roundToLayoutPx(size.width), height: roundToLayoutPx(size.height) };
-        return commitSizeAtPlayhead(selection, animatedTween, sized, iframe, dragOffset, {
-          commitMutation,
-          fetchAnimations: fetchFallbackAnimations,
-        });
+        const written = await commitSizeAtPlayhead(
+          selection,
+          animatedTween,
+          sized,
+          iframe,
+          dragOffset,
+          {
+            commitMutation,
+            fetchAnimations: fetchFallbackAnimations,
+            stamp,
+          },
+        );
+        return handOverDraftSize(selection, written, sized, draw);
       }
     }
 
@@ -333,8 +389,7 @@ export async function tryGsapResizeIntercept(
   // it lands back on the drop point. The compensation only applies to a STATIC
   // position (a `tl.set` hold or none) — a keyframed position path has no
   // single anchor to preserve, so it keeps the plain center-scale behavior.
-  // The size route commits the same width/height channels the draft wrote, so
-  // it needs none of this.
+  // The size route hands its draft to GSAP itself (handOverDraftSize).
   // ponytail: for a 3D-rotated element the rects are AABBs, so the anchor is
   // approximate rather than corner-exact.
   // fallow-ignore-next-line complexity
@@ -363,6 +418,7 @@ export async function tryGsapResizeIntercept(
         selection.element,
         { x: 0, y: 0 },
         gsapPos,
+        stamp,
       );
       const base = { x: baseGsapX, y: baseGsapY };
       setElementGsapPosition(draftEl, base.x, base.y);
@@ -424,6 +480,7 @@ export async function tryGsapResizeIntercept(
         await commitGsapPositionFromDrag(selection, positionTween, delta, base, iframe, {
           commitMutation,
           fetchAnimations: fetchFallbackAnimations,
+          stamp,
         }),
       );
       return true;
@@ -432,6 +489,7 @@ export async function tryGsapResizeIntercept(
     await commitStaticGsapPosition(selection, delta, base, selector, existingSet, {
       commitMutation,
       fetchAnimations: fetchFallbackAnimations,
+      stamp,
     });
     return true;
   };
@@ -453,9 +511,18 @@ export async function tryGsapResizeIntercept(
     return { status: "persisted", ownsDragOffset: await finalizeScaleResizeCommit() };
   }
 
-  const callbacks = { commitMutation, fetchAnimations: fetchFallbackAnimations };
-  if (resizeGroup === "size")
-    return commitSizeAtPlayhead(selection, anim, resizeProps, iframe, dragOffset, callbacks);
+  const callbacks = { commitMutation, fetchAnimations: fetchFallbackAnimations, stamp };
+  if (resizeGroup === "size") {
+    const written = await commitSizeAtPlayhead(
+      selection,
+      anim,
+      resizeProps,
+      iframe,
+      dragOffset,
+      callbacks,
+    );
+    return handOverDraftSize(selection, written, resizeProps, draw);
+  }
   const written = await commitValueAtPlayhead(selection, anim, resizeProps, iframe, callbacks, {
     label: "Resize",
     backfill: resizeBackfill,

package/src/hooks/gsapRuntimeBridge.ts

@@ -31,6 +31,7 @@ import { tweenReach, tweensForThisElement } from "./gsapTweenReach";
 import { resolveTweenDuration } from "../utils/globalTimeCompiler";
 import { roundTo3 } from "../utils/rounding";
 import type { GsapDragCommitCallbacks } from "./gsapDragCommit";
+import type { DragStamp } from "./draggedGsapPosition";
 import { isInstantHold, selectorFromSelection, writeTargetSelector } from "./gsapShared";
 import {
   findGsapPositionAnimation,
@@ -243,6 +244,7 @@ export async function tryGsapDragIntercept(
     preflightOnly?: boolean;
     preflightPassed?: boolean;
     group?: boolean;
+    stamp?: DragStamp;
   },
 ): Promise<GsapEditOutcome> {
   if (!options?.preflightPassed) {
@@ -323,6 +325,7 @@ export async function tryGsapDragIntercept(
     await commitStaticGsapPosition(selection, offset, gsapPos, selector, existingSet, {
       commitMutation,
       fetchAnimations: fetchFallbackAnimations,
+      stamp: options?.stamp,
     });
     return { status: "persisted" };
   }
@@ -352,7 +355,7 @@ export async function tryGsapDragIntercept(
     }
   }
 
-  const cbs = { commitMutation, fetchAnimations: fetchFallbackAnimations };
+  const cbs = { commitMutation, fetchAnimations: fetchFallbackAnimations, stamp: options?.stamp };
   if (route === "whole-path") {
     await commitWholePathOffset(selection, posAnim, offset, gsapPos, iframe, selector, cbs);
   } else {