@hyperframes/studio 0.8.106 → 0.8.107

package/src/contexts/DomEditContext.tsx

@@ -2,85 +2,88 @@
 import type { useDomEditSession } from "../hooks/useDomEditSession";
 import { useCallback, useContext, useMemo, useRef, type ReactNode } from "react";
 import { createStableContext } from "../utils/hmrStableContext";
+import { trackedStudioEdit } from "../utils/studioPendingEdits";
 
 type DomEditValue = ReturnType<typeof useDomEditSession>;
 
-export interface DomEditActionsValue extends Pick<
-  DomEditValue,
-  | "handleTimelineElementSelect"
-  | "handlePreviewCanvasMouseDown"
-  | "handlePreviewCanvasPointerMove"
-  | "handlePreviewCanvasPointerLeave"
-  | "applyDomSelection"
-  | "clearDomSelection"
-  | "refreshDomEditSelectionFromPreview"
-  | "handleDomStyleCommit"
-  | "handleDomStyleCommitForSelection"
-  | "handleDomAttributeCommit"
-  | "handleDomAttributeLiveCommit"
-  | "handleDomAttributeQuietCommit"
-  | "handleDomHtmlAttributeCommit"
-  | "handleDomAttributesCommit"
-  | "handleDomPathOffsetCommit"
-  | "handleDomGroupPathOffsetCommit"
-  | "handleDomZIndexReorderCommit"
-  | "handleDomBoxSizeCommit"
-  | "handleDomRotationCommit"
-  | "handleDomManualEditsReset"
-  | "handleDomTextCommit"
-  | "handleDomTextCommitForSelection"
-  | "handleDomRichTextCommit"
-  | "handleDomTextFieldStyleCommit"
-  | "handleDomAddTextField"
-  | "handleDomRemoveTextField"
-  | "getGsapAnimationsForSelection"
-  | "handleAskAgent"
-  | "handleAgentModalSubmit"
-  | "handleBlockedDomMove"
-  | "handleDomManualDragStart"
-  | "handleDomEditElementDelete"
-  | "handleGroupSelection"
-  | "handleUngroupSelection"
-  | "setActiveGroupElement"
-  | "buildDomSelectionFromTarget"
-  | "buildDomSelectionForTimelineElement"
-  | "updateDomEditHoverSelection"
-  | "resolveImportedFontAsset"
-  | "setAgentModalOpen"
-  | "setAgentPromptSelectionContext"
-  | "setAgentModalAnchorPoint"
-  | "handleGsapUpdateProperty"
-  | "handleGsapUpdateMeta"
-  | "handleGsapDeleteAnimation"
-  | "handleGsapDeleteAllForElement"
-  | "handleGsapAddAnimation"
-  | "handleGsapAddProperty"
-  | "handleGsapRemoveProperty"
-  | "handleGsapUpdateFromProperty"
-  | "handleGsapAddFromProperty"
-  | "handleGsapRemoveFromProperty"
-  | "handleGsapAddKeyframe"
-  | "handleGsapAddKeyframeBatch"
-  | "handleGsapRemoveKeyframe"
-  | "handleGsapMoveKeyframeToPlayhead"
-  | "handleGsapMoveKeyframe"
-  | "handleGsapResizeKeyframedTween"
-  | "handleGsapConvertToKeyframes"
-  | "handleGsapRemoveAllKeyframes"
-  | "handleResetSelectedElementKeyframes"
-  | "commitAnimatedProperty"
-  | "commitAnimatedProperties"
-  | "handleSetArcPath"
-  | "handleUpdateArcSegment"
-  | "handleUnroll"
-  | "invalidateGsapCache"
-  | "previewIframeRef"
-  | "commitMutation"
-  | "applyMarqueeSelection"
-  | "handleUpdateKeyframeEase"
-  | "handleUpdateSegmentEase"
-  | "handleSetAllKeyframeEases"
-> {}
+const SAVES_AN_EDIT = {
+  handleTimelineElementSelect: false,
+  handlePreviewCanvasMouseDown: false,
+  handlePreviewCanvasPointerMove: false,
+  handlePreviewCanvasPointerLeave: false,
+  applyDomSelection: false,
+  clearDomSelection: false,
+  refreshDomEditSelectionFromPreview: false,
+  handleDomStyleCommit: true,
+  handleDomStyleCommitForSelection: true,
+  handleDomAttributeCommit: true,
+  handleDomAttributeLiveCommit: false,
+  handleDomAttributeQuietCommit: true,
+  handleDomHtmlAttributeCommit: true,
+  handleDomAttributesCommit: true,
+  handleDomAttributeBatchCommit: true,
+  handleDomPathOffsetCommit: true,
+  handleDomGroupPathOffsetCommit: true,
+  handleDomZIndexReorderCommit: true,
+  handleDomBoxSizeCommit: true,
+  handleDomRotationCommit: true,
+  handleDomManualEditsReset: true,
+  handleDomTextCommit: true,
+  handleDomTextCommitForSelection: true,
+  handleDomRichTextCommit: true,
+  handleDomTextFieldStyleCommit: true,
+  handleDomAddTextField: true,
+  handleDomRemoveTextField: true,
+  getGsapAnimationsForSelection: false,
+  handleAskAgent: false,
+  handleAgentModalSubmit: false,
+  handleBlockedDomMove: false,
+  handleDomManualDragStart: false,
+  handleDomEditElementDelete: true,
+  handleGroupSelection: true,
+  handleUngroupSelection: true,
+  setActiveGroupElement: false,
+  buildDomSelectionFromTarget: false,
+  buildDomSelectionForTimelineElement: false,
+  updateDomEditHoverSelection: false,
+  resolveImportedFontAsset: false,
+  setAgentModalOpen: false,
+  setAgentPromptSelectionContext: false,
+  setAgentModalAnchorPoint: false,
+  handleGsapUpdateProperty: true,
+  handleGsapUpdateMeta: true,
+  handleGsapDeleteAnimation: true,
+  handleGsapDeleteAllForElement: true,
+  handleGsapAddAnimation: true,
+  handleGsapAddProperty: true,
+  handleGsapRemoveProperty: true,
+  handleGsapUpdateFromProperty: true,
+  handleGsapAddFromProperty: true,
+  handleGsapRemoveFromProperty: true,
+  handleGsapAddKeyframe: true,
+  handleGsapAddKeyframeBatch: true,
+  handleGsapRemoveKeyframe: true,
+  handleGsapMoveKeyframeToPlayhead: true,
+  handleGsapMoveKeyframe: true,
+  handleGsapResizeKeyframedTween: true,
+  handleGsapConvertToKeyframes: true,
+  handleGsapRemoveAllKeyframes: true,
+  handleResetSelectedElementKeyframes: true,
+  commitAnimatedProperty: true,
+  commitAnimatedProperties: true,
+  handleSetArcPath: true,
+  handleUpdateArcSegment: true,
+  handleUnroll: true,
+  invalidateGsapCache: false,
+  previewIframeRef: false,
+  commitMutation: true,
+  applyMarqueeSelection: false,
+  handleUpdateKeyframeEase: true,
+  handleUpdateSegmentEase: true,
+  handleSetAllKeyframeEases: true,
+} as const satisfies Partial<Record<keyof DomEditValue, boolean>>;
+
+export interface DomEditActionsValue extends Pick<DomEditValue, keyof typeof SAVES_AN_EDIT> {}
 
 export interface DomEditSelectionValue extends Pick<
   DomEditValue,
@@ -98,6 +101,15 @@ export interface DomEditSelectionValue extends Pick<
   | "agentPromptSelectionContext"
 > {}
 
+function trackEditCommits(actions: DomEditActionsValue): DomEditActionsValue {
+  const tracked: Record<string, unknown> = { ...actions };
+  for (const key of Object.keys(SAVES_AN_EDIT) as Array<keyof typeof SAVES_AN_EDIT>) {
+    if (!SAVES_AN_EDIT[key]) continue;
+    tracked[key] = trackedStudioEdit(actions[key] as (...args: unknown[]) => unknown);
+  }
+  return tracked as unknown as DomEditActionsValue;
+}
+
 const DomEditActionsContext = createStableContext<DomEditActionsValue | null>(
   "DomEditActionsContext",
   null,
@@ -164,6 +176,7 @@ export function DomEditProvider({
     handleDomAttributeQuietCommit,
     handleDomHtmlAttributeCommit,
     handleDomAttributesCommit,
+    handleDomAttributeBatchCommit,
     handleDomPathOffsetCommit,
     handleDomGroupPathOffsetCommit,
     handleDomZIndexReorderCommit,
@@ -242,7 +255,7 @@ export function DomEditProvider({
     [],
   );
 
-  const actions = useMemo<DomEditActionsValue>(
+  const untrackedActions = useMemo<DomEditActionsValue>(
     () => ({
       handleTimelineElementSelect,
       handlePreviewCanvasMouseDown,
@@ -258,6 +271,7 @@ export function DomEditProvider({
       handleDomAttributeQuietCommit,
       handleDomHtmlAttributeCommit,
       handleDomAttributesCommit,
+      handleDomAttributeBatchCommit,
       handleDomPathOffsetCommit,
       handleDomGroupPathOffsetCommit,
       handleDomZIndexReorderCommit,
@@ -333,6 +347,7 @@ export function DomEditProvider({
       handleDomAttributeQuietCommit,
       handleDomHtmlAttributeCommit,
       handleDomAttributesCommit,
+      handleDomAttributeBatchCommit,
       handleDomPathOffsetCommit,
       handleDomGroupPathOffsetCommit,
       handleDomZIndexReorderCommit,
@@ -395,6 +410,8 @@ export function DomEditProvider({
     ],
   );
 
+  const actions = useMemo(() => trackEditCommits(untrackedActions), [untrackedActions]);
+
   const selection = useMemo<DomEditSelectionValue>(
     () => ({
       domEditSelection,

package/src/hooks/canvasQuickSaves.test.tsx

@@ -14,38 +14,56 @@ const SOURCE =
   '<!doctype html><html><head></head><body><div data-hf-id="hf-card" style="color: red">Card</div>' +
   '<div id="clip" class="clip" data-start="1" data-duration="5" data-track-index="0"></div></body></html>';
 
-// The server patches whatever is on disk; the writer refuses a stale base like If-Match does.
-// The first write can be held mid-flight.
+// The server patches whatever is on disk, a font rule included; the writer refuses a stale base
+// like If-Match does. The first write, a patch or a whole file, can be held mid-flight.
 function fakeProject() {
   let disk = SOURCE;
   const refused: string[] = [];
   let writes = 0;
+  let wholeFileWrites = 0;
   let release = () => {};
   const firstWrite = new Promise<void>((resolve) => (release = resolve));
+  const holdFirst = async () => {
+    if (++writes === 1) await firstWrite;
+  };
   vi.stubGlobal(
     "fetch",
     vi.fn(async (input: string, init?: RequestInit) => {
       if (input.includes("/file-mutations/patch-element/")) {
-        const { operations } = JSON.parse(String(init?.body)) as {
+        await holdFirst();
+        const { operations, fontFaceCss } = JSON.parse(String(init?.body)) as {
           operations: Array<{ property?: string; value?: string }>;
+          fontFaceCss?: string;
         };
         for (const op of operations) {
           if (op.property === "color") disk = disk.replace(/color: \w+/, `color: ${op.value}`);
         }
+        if (fontFaceCss && !disk.includes(fontFaceCss))
+          disk = disk.replace(
+            "</head>",
+            `<style data-hf-studio-fonts="true">${fontFaceCss}</style></head>`,
+          );
         return Response.json({ ok: true, changed: true, matched: true, content: disk });
       }
       return Response.json({ content: disk });
     }),
   );
   const writeProjectFile = async (path: string, content: string, expected?: string) => {
-    if (++writes === 1) await firstWrite;
+    wholeFileWrites += 1;
+    await holdFirst();
     if (expected !== undefined && expected !== disk && content !== disk) {
       refused.push(path);
       throw new Error(`409 conflict on ${path}`);
     }
     disk = content;
   };
-  return { writeProjectFile, refused, release: () => release(), read: () => disk };
+  return {
+    writeProjectFile,
+    refused,
+    release: () => release(),
+    read: () => disk,
+    wholeFileWrites: () => wholeFileWrites,
+  };
 }
 
 type Project = ReturnType<typeof fakeProject>;
@@ -158,7 +176,7 @@ afterEach(() => {
 });
 
 describe("canvas edit commits share the file queue", () => {
-  it("lands a second canvas commit started while the first one's font write is held", async () => {
+  it("lands a second canvas commit started while the first one's font save is held", async () => {
     const project = fakeProject();
     const { hook, selection, toasts } = mountCanvasCommits(project);
     const font = {
@@ -174,8 +192,55 @@ describe("canvas edit commits share the file queue", () => {
     );
 
     expect(toasts).toEqual([]);
-    expect(project.read()).toContain("@font-face");
+    expect(project.read().match(/@font-face/g)).toHaveLength(1);
     expect(project.read()).toContain("color: green");
+    expect(project.wholeFileWrites(), "the font rides the edit's own patch").toBe(0);
+  });
+
+  it("writes a batch's prepared content over the patch and saves it once", async () => {
+    const project = fakeProject();
+    const { hook, selection, toasts } = mountCanvasCommits(project);
+    project.release();
+
+    const saved = await hook.handleDomAttributeBatchCommit(
+      selection,
+      [{ type: "attribute", property: "data-note", value: "1" }],
+      {
+        label: "Edit with prepared content",
+        prepareContent: (html) => html.replace("</head>", '<meta data-prepared="1"></head>'),
+      },
+    );
+
+    expect(saved).toBe(true);
+    expect(toasts).toEqual([]);
+    expect(project.read().match(/data-prepared="1"/g)).toHaveLength(1);
+    expect(project.wholeFileWrites()).toBe(1);
+  });
+
+  it("reports a failed follow-up write as a failed commit, not as saved", async () => {
+    const project = fakeProject();
+    project.release();
+    const failing = {
+      ...project,
+      writeProjectFile: async () => {
+        throw new Error("409 conflict");
+      },
+    };
+    const { hook, selection, toasts } = mountCanvasCommits(failing);
+
+    const saved = await hook.handleDomAttributeBatchCommit(
+      selection,
+      [{ type: "attribute", property: "data-note", value: "1" }],
+      {
+        label: "Edit with prepared content",
+        prepareContent: (html) => html.replace("</head>", '<meta data-prepared="1"></head>'),
+      },
+    );
+
+    expect(saved).toBe(false);
+    expect(toasts).toHaveLength(1);
+    expect(toasts[0]).toContain("couldn't finish updating");
+    expect(project.read()).not.toContain("data-prepared");
   });
 
   it("lands a canvas commit started while a timeline save is writing", async () => {

package/src/hooks/domEditCommitTypes.ts

@@ -1,4 +1,5 @@
 import type { DomEditSelection } from "../components/editor/domEditing";
+import type { ImportedFontAsset } from "../components/editor/fontAssets";
 import type { PatchOperation, PatchTarget } from "../utils/sourcePatcher";
 
 export interface DomEditPatchBatch {
@@ -53,7 +54,16 @@ export type PersistDomEditOperations = (
     coalesceKey?: string;
     coalesceMs?: number;
     skipRefresh?: boolean;
+    deferRender?: boolean;
+    importedFont?: ImportedFontAsset;
     prepareContent?: (html: string, sourceFile: string) => string;
     shouldSave?: () => boolean;
   },
 ) => Promise<DomEditPersistOutcome | undefined>;
+
+/** Several data-* and HTML attribute ops on one element as ONE persist and ONE undo entry. */
+export type CommitDomAttributeBatch = (
+  selection: DomEditSelection,
+  operations: PatchOperation[],
+  options: { label: string; prepareContent?: (html: string) => string },
+) => Promise<boolean>;

package/src/hooks/domEditPersistFailure.ts

@@ -19,6 +19,15 @@ export class DomEditPersistUnsafeValueError extends Error {
   }
 }
 
+export class DomEditPersistPreparedWriteError extends Error {
+  readonly alreadyToasted = true;
+
+  constructor(targetPath: string) {
+    super(`The edit saved but its follow-up write to ${targetPath} did not`);
+    this.name = "DomEditPersistPreparedWriteError";
+  }
+}
+
 export type DomEditPersistFailureSelection = Pick<
   DomEditSelection,
   "label" | "hfId" | "id" | "selector" | "selectorIndex" | "sourceFile"
@@ -48,7 +57,9 @@ function getSelectionLabel(selection: DomEditPersistFailureSelection): string {
 
 export function wasAlreadyToasted(error: unknown): boolean {
   return (
-    (error instanceof DomEditPersistUnsafeValueError || error instanceof StudioSaveHttpError) &&
+    (error instanceof DomEditPersistUnsafeValueError ||
+      error instanceof DomEditPersistPreparedWriteError ||
+      error instanceof StudioSaveHttpError) &&
     error.alreadyToasted
   );
 }

package/src/hooks/domStyleCommit.fonts.test.ts

@@ -2,6 +2,7 @@
 import { expect, it } from "vitest";
 import type { DomEditSelection } from "../components/editor/domEditing";
 import type { ImportedFontAsset } from "../components/editor/fontAssets";
+import { importedFontFaceCssFor } from "../utils/studioFontHelpers";
 import { commitDomStyles, type DomStyleCommitContext } from "./domStyleCommit";
 
 const selection = (id: string): DomEditSelection =>
@@ -28,7 +29,7 @@ const poppins = (file: string, weight: string): ImportedFontAsset => ({
 });
 
 it("each font a host hands over is saved as its own face, with the weight and style it draws", async () => {
-  let html = '<html><head></head><body><h1 id="title"></h1><p id="subtitle"></p></body></html>';
+  const faces: string[] = [];
   let listed: ImportedFontAsset | null = null;
   const context: DomStyleCommitContext = {
     activeCompPath: "index.html",
@@ -39,16 +40,16 @@ it("each font a host hands over is saved as its own face, with the weight and st
     persistDomEditOperations: (async (
       _selection: DomEditSelection,
       _operations: unknown,
-      options?: { prepareContent?: (html: string, sourceFile: string) => string },
+      options?: { importedFont?: ImportedFontAsset },
     ) => {
-      html = options?.prepareContent?.(html, "index.html") ?? html;
+      if (options?.importedFont)
+        faces.push(importedFontFaceCssFor(options.importedFont, "index.html"));
     }) as unknown as DomStyleCommitContext["persistDomEditOperations"],
   };
   listed = poppins("Poppins-SemiBold.ttf", "600");
   await commitDomStyles(context, selection("title"), { "font-family": "Poppins" });
   listed = poppins("Poppins-Regular.ttf", "400");
   await commitDomStyles(context, selection("subtitle"), { "font-family": "Poppins" });
-  const faces = html.match(/@font-face[^}]*}/g) ?? [];
   expect(faces).toHaveLength(2);
   expect(faces[0]).toContain('Poppins-SemiBold.ttf"); font-weight: 600; font-style: normal;');
   expect(faces[1]).toContain('Poppins-Regular.ttf"); font-weight: 400; font-style: normal;');

package/src/hooks/domStyleCommit.ts

@@ -4,11 +4,7 @@ import {
   isManualGeometryStyleProperty,
   normalizeDomEditStyleValue,
 } from "../utils/studioHelpers";
-import {
-  injectPreviewGoogleFont,
-  injectPreviewImportedFont,
-  ensureImportedFontFace,
-} from "../utils/studioFontHelpers";
+import { injectPreviewGoogleFont, injectPreviewImportedFont } from "../utils/studioFontHelpers";
 import {
   buildDomEditStylePatchOperation,
   findElementForSelection,
@@ -105,9 +101,7 @@ export async function commitDomStyles(
         label: "Edit layer style",
         // Inline styles are already live, so a reload would only blank the preview.
         skipRefresh: true,
-        prepareContent: importedFont
-          ? (html, sourceFile) => ensureImportedFontFace(html, importedFont, sourceFile)
-          : undefined,
+        importedFont: importedFont ?? undefined,
       }),
     shouldRevert: ownsAny,
     revert: () => {

package/src/hooks/gsapDragCommit.ts

@@ -273,14 +273,9 @@ export async function commitStaticGsapRotation(
 }
 
 /**
- * Commit a STATIC element resize as a `tl.set("#el",{width,height})` — the
- * single-source size channel for elements with no size animation (mirrors
- * `commitStaticGsapPosition`). Use this instead of a single-stop `keyframes`
- * tween: one keyframe at the playhead % renders NaN/0 at every other frame, so
- * the element collapses/disappears (worst when resized off the 0% mark). A `set`
- * holds the size at all times. Re-resizing an element that already has a size
- * `set` UPDATES it in place with one `update-properties`; a new element
- * gets one `add` with `method:"set"`.
+ * A static resize as `tl.set("#el",{width,height})`, only where the script already writes the size
+ * (else it is CSS). A set, not a one-stop keyframe tween, which renders NaN/0 off its keyframe.
+ * Updates an existing size set in place, else adds one.
  */
 export async function commitStaticGsapSize(
   selection: DomEditSelection,

package/src/hooks/gsapDragPositionCommit.ts

@@ -1,4 +1,5 @@
 import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
+import { PROPERTY_GROUPS } from "@hyperframes/parsers/gsap-constants";
 import type { DomEditSelection } from "../components/editor/domEditingTypes";
 import { usePlayerStore } from "../player/store/playerStore";
 import { resolveTweenStart, resolveTweenDuration } from "../utils/globalTimeCompiler";
@@ -179,7 +180,11 @@ async function commitFlatViaKeyframes(
   if (runtime && ts !== null) {
     const { gsapLib, el, mainTl } = runtime;
     const draggedValues: Record<string, number> = {};
-    for (const key of Object.keys(properties)) {
+    const channelsTheClearWipes = new Set([
+      ...Object.keys(properties),
+      ...PROPERTY_GROUPS.position,
+    ]);
+    for (const key of channelsTheClearWipes) {
       const v = Number(gsapLib.getProperty(el, key));
       if (Number.isFinite(v)) draggedValues[key] = v;
     }

package/src/hooks/gsapEditOutcome.ts

@@ -44,7 +44,8 @@ export type GsapEditOutcome =
       ownsDragOffset?: boolean;
     }
   | { status: "blocked"; reason: GsapEditBlockReason; detail?: GsapEditBlockDetail }
-  | { status: "element-offset" };
+  | { status: "element-offset" }
+  | { status: "element-size" };
 
 export const GSAP_EDIT_BLOCK_COPY: Record<GsapEditBlockReason, string> = {
   "no-selector": "This layer needs a stable selector before Studio can save the edit.",

package/src/hooks/gsapResizeElementSize.test.tsx

@@ -0,0 +1,136 @@
+// @vitest-environment happy-dom
+
+import { act } from "react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
+import type { DomEditSelection } from "../components/editor/domEditingTypes";
+import { applyStudioBoxSizeDraft } from "../components/editor/manualEdits";
+import { mountReactHarness } from "./domSelectionTestHarness";
+import { useDomGeometryCommits } from "./useDomGeometryCommits";
+import { useGsapAwareEditing } from "./useGsapAwareEditing";
+
+(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+afterEach(() => {
+  document.body.innerHTML = "";
+});
+
+// The bench's hold fixture: an off-timeline `gsap.set` positions #target; its size is stylesheet CSS.
+const positionHold = {
+  id: "#target-set-0-position",
+  targetSelector: "#target",
+  propertyGroup: "position",
+  method: "set",
+  properties: { x: 40, y: 20 },
+  position: 0,
+  resolvedStart: 0,
+  duration: 0,
+  global: true,
+} as unknown as GsapAnimation;
+
+const widthTween = {
+  id: "#target-to-0-size",
+  targetSelector: "#target",
+  propertyGroup: "size",
+  method: "to",
+  properties: { width: 400, height: 300 },
+  position: 0,
+  resolvedStart: 0,
+  duration: 4,
+} as unknown as GsapAnimation;
+
+function mount(animations: GsapAnimation[]) {
+  const element = Object.assign(document.createElement("div"), {
+    id: "target",
+    _gsap: { renderTransform: () => {} },
+  });
+  // GSAP's own inline mask on an element whose transform it renders.
+  element.style.setProperty("scale", "none");
+  document.body.append(element);
+  const gsap = { getProperty: () => 0, set: vi.fn() };
+  const iframe = {
+    contentWindow: { gsap, __timelines: {} },
+    contentDocument: document,
+  } as unknown as HTMLIFrameElement;
+  const selection = { element, id: "target", selector: "#target" } as unknown as DomEditSelection;
+  const commitMutation = vi.fn().mockResolvedValue(undefined);
+  const commitPatch = vi.fn().mockResolvedValue(undefined);
+  let resize!: ReturnType<typeof useGsapAwareEditing>["handleGsapAwareBoxSizeCommit"];
+  function Harness() {
+    const { stageElementPositionOffset, handleDomBoxSizeCommit } = useDomGeometryCommits({
+      showToast: vi.fn(),
+      commitPositionPatchToHtml: commitPatch,
+      readOnlyPreview: false,
+    });
+    resize = useGsapAwareEditing({
+      domEditSelection: selection,
+      selectedGsapAnimations: animations,
+      gsapCommitMutation: commitMutation,
+      previewIframeRef: { current: iframe },
+      showToast: vi.fn(),
+      bumpGsapCache: vi.fn(),
+      makeFetchFallback: () => async () => animations,
+      trackGsapInteractionFailure: vi.fn(),
+      stageElementPositionOffset,
+      handleDomBoxSizeCommit,
+      handleDomRotationCommit: vi.fn(),
+      commitPositionPatchToHtml: commitPatch,
+      addGsapAnimation: vi.fn(),
+      convertToKeyframes: vi.fn(),
+      setArcPath: vi.fn(),
+      updateArcSegment: vi.fn(),
+    }).handleGsapAwareBoxSizeCommit;
+    return null;
+  }
+  const root = mountReactHarness(<Harness />);
+  const size = { width: 340, height: 227 };
+  applyStudioBoxSizeDraft(element, size);
+  return { selection, size, commitMutation, commitPatch, resize, root };
+}
+
+const writesSize = (mutation: { properties?: object; keyframes?: Array<{ properties: object }> }) =>
+  [mutation.properties, ...(mutation.keyframes ?? []).map((k) => k.properties)].some(
+    (props) => !!props && ("width" in props || "height" in props),
+  );
+
+describe("resizing an element GSAP positions", () => {
+  it("saves a size the script never writes as the element's CSS width/height, not a tl.set", async () => {
+    const h = mount([positionHold]);
+
+    await act(() => h.resize(h.selection, h.size, { x: -50, y: -33.5 }));
+
+    const mutations = h.commitMutation.mock.calls.map((call) => call[1]);
+    expect(mutations.filter(writesSize)).toEqual([]);
+    // The anchor still moves the GSAP hold, in the same undo step as the CSS size.
+    expect(mutations.some((m) => m.animationId === positionHold.id)).toBe(true);
+    const [, patches, options] = h.commitPatch.mock.calls.at(-1)!;
+    expect(patches).toEqual(
+      expect.arrayContaining([
+        { type: "inline-style", property: "width", value: "340px" },
+        { type: "inline-style", property: "height", value: "227px" },
+      ]),
+    );
+    expect(patches.filter((p: { property: string }) => p.property === "scale")).toEqual([]);
+    expect(options.coalesceKey).toBe(h.commitMutation.mock.calls[0]![2].coalesceKey);
+    // Saved before the GSAP write and without its own render, so the GSAP reload renders last.
+    expect(options.deferRender).toBe(true);
+    expect(h.commitPatch.mock.invocationCallOrder.at(-1)).toBeLessThan(
+      h.commitMutation.mock.invocationCallOrder[0]!,
+    );
+    act(() => h.root.unmount());
+  });
+
+  it("still saves the size through GSAP when a tween animates it", async () => {
+    const h = mount([positionHold, widthTween]);
+
+    await act(() => h.resize(h.selection, h.size, { x: -50, y: -33.5 }));
+
+    const mutations = h.commitMutation.mock.calls.map((call) => call[1]);
+    expect(mutations.filter(writesSize).length).toBeGreaterThan(0);
+    const cssSize = h.commitPatch.mock.calls
+      .flatMap((call) => call[1])
+      .filter((p: { property: string }) => p.property === "width" || p.property === "height");
+    expect(cssSize).toEqual([]);
+    act(() => h.root.unmount());
+  });
+});

package/src/hooks/gsapResizeGeometrySweep.test.ts

@@ -238,7 +238,9 @@ async function runCase(testCase: Case): Promise<string[]> {
     async () => animations,
   );
 
-  const { scale, size } = committed(commitMutation.mock.calls);
+  const { scale, size: written } = committed(commitMutation.mock.calls);
+  const size =
+    outcome.status === "element-size" ? { w: testCase.drop.w, h: testCase.drop.h } : written;
   const settled = renderRect(
     { box: size ?? testCase.box, pos: { ...live.pos }, scale: scale ?? testCase.liveScale },
     testCase.rotation,