@hyperframes/studio 0.8.98 → 0.8.99

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyperframes/studio",
-  "version": "0.8.98",
+  "version": "0.8.99",
   "description": "",
   "repository": {
     "type": "git",
@@ -54,18 +54,18 @@
     "@codemirror/view": "6.40.0",
     "@mcp-b/global": "^5.0.1",
     "@phosphor-icons/react": "^2.1.10",
-    "@tanstack/react-virtual": "^3.14.6",
+    "@tanstack/react-virtual": "^3.14.13",
     "bpm-detective": "^2.0.5",
     "cn": "0.2.4",
     "dockview-react": "8.3.1",
     "gsap": "^3.13.0",
     "mediabunny": "^1.45.3",
-    "@hyperframes/core": "0.8.98",
-    "@hyperframes/parsers": "0.8.98",
-    "@hyperframes/player": "0.8.98",
-    "@hyperframes/sdk": "0.8.98",
-    "@hyperframes/shader-transitions": "0.8.98",
-    "@hyperframes/studio-server": "0.8.98"
+    "@hyperframes/core": "0.8.99",
+    "@hyperframes/parsers": "0.8.99",
+    "@hyperframes/player": "0.8.99",
+    "@hyperframes/sdk": "0.8.99",
+    "@hyperframes/studio-server": "0.8.99",
+    "@hyperframes/shader-transitions": "0.8.99"
   },
   "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.98"
+    "@hyperframes/producer": "0.8.99"
   },
   "peerDependencies": {
     "react": "19",

package/src/components/editor/DomEditCropHandles.test.tsx

@@ -5,6 +5,7 @@ import { afterEach, describe, expect, it, vi } from "vitest";
 import type { DomEditSelection } from "./domEditing";
 import type { OverlayRect } from "./domEditOverlayGeometry";
 import { DomEditCropHandles } from "./DomEditCropHandles";
+import { isElementCropLifted } from "./domEditOverlayCrop";
 
 (globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
 
@@ -55,27 +56,27 @@ function render(
   return { root, rerender: draw };
 }
 
-// Regression: the deselect restore used a ref recomputed from RENDER state — on
-// a direct A→B selection switch, state re-syncs to B before A's effect cleanup
-// runs, so A used to get B's crop string (or lose its crop entirely). The
-// restore value must be owned by A's own lift effect / crop gesture.
-describe("DomEditCropHandles clip lift/restore", () => {
-  it("lifts on select and restores the inline clip verbatim on unmount", () => {
+// The lift never touches the element's own clip-path: select+deselect must leave what the author
+// wrote verbatim, and a direct A→B switch must drop A's lift, not B's.
+describe("DomEditCropHandles clip lift", () => {
+  it("lifts on select without rewriting the inline clip, and drops the lift on unmount", () => {
     const a = makeEl("a", "inset(16px round 12px)");
     const { root } = render(a);
-    expect(a.style.getPropertyValue("clip-path")).toBe("none");
+    expect(isElementCropLifted(a)).toBe(true);
+    expect(a.style.getPropertyValue("clip-path")).toBe("inset(16px round 12px)");
     act(() => root.unmount());
+    expect(isElementCropLifted(a)).toBe(false);
     expect(a.style.getPropertyValue("clip-path")).toBe("inset(16px round 12px)");
   });
 
-  it("restores A's own clip when switching directly to B", () => {
+  it("drops A's lift when switching directly to B", () => {
     const a = makeEl("a", "inset(16px)");
     const b = makeEl("b", "inset(40px 8px 4px 2px)");
     const { root, rerender } = render(a);
     rerender(b);
-    // A got ITS clip back, not B's (and not removed); B is now lifted.
+    expect(isElementCropLifted(a)).toBe(false);
+    expect(isElementCropLifted(b)).toBe(true);
     expect(a.style.getPropertyValue("clip-path")).toBe("inset(16px)");
-    expect(b.style.getPropertyValue("clip-path")).toBe("none");
     act(() => root.unmount());
     expect(b.style.getPropertyValue("clip-path")).toBe("inset(40px 8px 4px 2px)");
   });
@@ -83,49 +84,11 @@ describe("DomEditCropHandles clip lift/restore", () => {
   it("never lifts an uneditable clip and leaves it untouched across select/deselect", () => {
     const a = makeEl("a", "circle(50% at 50% 50%)");
     const { root } = render(a);
-    expect(a.style.getPropertyValue("clip-path")).toBe("circle(50% at 50% 50%)");
+    expect(isElementCropLifted(a)).toBe(false);
     act(() => root.unmount());
     expect(a.style.getPropertyValue("clip-path")).toBe("circle(50% at 50% 50%)");
   });
 
-  it("re-lifts synchronously after the commit path re-applies the cropped value", async () => {
-    const a = makeEl("a", "inset(10px)");
-    let resolveCommit: (() => void) | undefined;
-    const pendingCommit = new Promise<void>((resolve) => {
-      resolveCommit = resolve;
-    });
-    const onStyleCommit = vi.fn((property: string, value: string) => {
-      a.style.setProperty(property, value);
-      return pendingCommit;
-    });
-    const { root } = render(a, onStyleCommit);
-    const handle = document.querySelector<HTMLButtonElement>('[aria-label="Crop right"]');
-    expect(handle).toBeTruthy();
-
-    act(() =>
-      handle!.dispatchEvent(
-        new PointerEvent("pointerdown", { bubbles: true, pointerId: 1, clientX: 100 }),
-      ),
-    );
-    act(() =>
-      handle!.dispatchEvent(
-        new PointerEvent("pointermove", { bubbles: true, pointerId: 1, clientX: 80 }),
-      ),
-    );
-    act(() =>
-      handle!.dispatchEvent(
-        new PointerEvent("pointerup", { bubbles: true, pointerId: 1, clientX: 80 }),
-      ),
-    );
-
-    expect(onStyleCommit).toHaveBeenCalledWith("clip-path", "inset(10px 30px 10px 10px)");
-    expect(a.style.getPropertyValue("clip-path")).toBe("none");
-    resolveCommit?.();
-    await act(async () => pendingCommit);
-    act(() => root.unmount());
-    expect(a.style.getPropertyValue("clip-path")).toBe("inset(10px 30px 10px 10px)");
-  });
-
   it.each([
     { name: "a crop edge", clip: "inset(10px)", handle: "Crop right", dx: -20, dy: 0 },
     {
@@ -189,33 +152,38 @@ describe("DomEditCropHandles clip lift/restore", () => {
     expect(a.style.getPropertyValue("clip-path")).toBe("inset(0px 20px 0px 0px)");
   });
 
-  it("re-lifts when the crop commit rejects", async () => {
+  it("commits the dragged crop and stays lifted when the save fails", async () => {
     const a = makeEl("a", "inset(10px)");
     const onStyleCommit = vi.fn((property: string, value: string) => {
       a.style.setProperty(property, value);
       return Promise.reject(new Error("persist failed"));
     });
     const { root } = render(a, onStyleCommit);
-    const handle = document.querySelector<HTMLButtonElement>('[aria-label="Crop right"]');
-
-    act(() =>
-      handle!.dispatchEvent(
-        new PointerEvent("pointerdown", { bubbles: true, pointerId: 2, clientX: 100 }),
-      ),
-    );
-    act(() =>
-      handle!.dispatchEvent(
-        new PointerEvent("pointermove", { bubbles: true, pointerId: 2, clientX: 80 }),
-      ),
-    );
-    await act(async () => {
-      handle!.dispatchEvent(
-        new PointerEvent("pointerup", { bubbles: true, pointerId: 2, clientX: 80 }),
+    const handle = document.querySelector<HTMLButtonElement>('[aria-label="Crop right"]')!;
+    const press = (type: string, clientX: number) =>
+      act(() =>
+        handle.dispatchEvent(new PointerEvent(type, { bubbles: true, pointerId: 1, clientX })),
       );
+    press("pointerdown", 100);
+    press("pointermove", 80);
+    await act(async () => {
+      press("pointerup", 80);
       await Promise.resolve();
     });
 
-    expect(a.style.getPropertyValue("clip-path")).toBe("none");
+    expect(onStyleCommit).toHaveBeenCalledWith("clip-path", "inset(10px 30px 10px 10px)");
+    expect(isElementCropLifted(a)).toBe(true);
+    act(() => root.unmount());
+  });
+
+  it("draws the crop the element has now, after an undo rewrites it", () => {
+    const a = makeEl("a", "inset(0px 20px 0px 0px)");
+    const { root, rerender } = render(a);
+    const outline = () => document.querySelector<HTMLElement>(".border-dashed")!.style.width;
+    expect(outline()).toBe("180px");
+    a.style.setProperty("clip-path", "inset(0px 50px 0px 0px)");
+    rerender(a);
+    expect(outline()).toBe("150px");
     act(() => root.unmount());
   });
 });

package/src/components/editor/DomEditCropHandles.tsx

@@ -4,6 +4,9 @@ import { type OverlayRect, RESIZE_HANDLE_HIT_PX } from "./domEditOverlayGeometry
 import {
   type CropEdge,
   cropRectFromInsets,
+  dropElementCropLift,
+  hasCropInsets,
+  liftElementCrop,
   readElementCropFrame,
   readElementCropInsets,
   resolveCropInsetFromEdgeDrag,
@@ -11,6 +14,7 @@ import {
   rotateDeltaIntoFrame,
 } from "./domEditOverlayCrop";
 import { buildInsetClipPathSides, type ClipPathInsetSides } from "./clipPathHelpers";
+import { readCropFollowingResize } from "./cropResize";
 
 interface CropGestureState {
   edge: CropEdge | "move";
@@ -19,6 +23,7 @@ interface CropGestureState {
   startY: number;
   startInsets: ClipPathInsetSides;
   insets: ClipPathInsetSides;
+  radius: number;
   /** Element frame captured at gesture start: pointer deltas rotate into it. */
   angleDeg: number;
   scaleX: number;
@@ -83,6 +88,7 @@ function repositionHandleSize(rect: Rect): number {
 }
 
 const EDGES: CropEdge[] = ["top", "right", "bottom", "left"];
+const NO_CROP = { top: 0, right: 0, bottom: 0, left: 0, radius: 0 };
 
 /**
  * Always-on crop, integrated with the selection (no crop "mode"): while a
@@ -92,7 +98,7 @@ const EDGES: CropEdge[] = ["top", "right", "bottom", "left"];
  * grid guides framing); release commits `clip-path: inset(...)` through the
  * normal style-commit path (one undo step per drag). When cropped, a center
  * handle pans the crop window. Corners stay free for the selection's own resize
- * handle. Leaving the selection restores the committed crop. The clip-path model
+ * handle. Leaving the selection drops the lift. The element's clip-path
  * is the source of truth — nothing here mutates layout.
  */
 export function DomEditCropHandles({
@@ -109,54 +115,29 @@ export function DomEditCropHandles({
   // clip with an inset (or deletes it).
   const cropStateFor = (element: HTMLElement) => {
     const parsed = readElementCropInsets(element);
-    const { radius, ...insets } = parsed ?? { top: 0, right: 0, bottom: 0, left: 0, radius: 0 };
-    return { element, croppable: parsed !== null, insets, radius };
+    const { top, right, bottom, left } = parsed ?? NO_CROP;
+    return { element, croppable: parsed !== null, insets: { top, right, bottom, left } };
   };
   const [state, setState] = useState(() => cropStateFor(selection.element));
 
   // Re-sync when the selection targets a different element (reselect, or an
-  // undo/redo that re-keys the node): read its committed crop before the lift
-  // effect runs. Read inside the guard so a drag's per-frame setState doesn't
-  // re-run getComputedStyle every frame.
+  // undo/redo that re-keys the node).
   if (state.element !== selection.element) {
     setState(cropStateFor(selection.element));
   }
 
-  const hasCrop =
-    state.insets.top > 0 ||
-    state.insets.right > 0 ||
-    state.insets.bottom > 0 ||
-    state.insets.left > 0;
+  // The element's clip-path is the crop; state only holds a crop drag's draft.
+  const committed = readCropFollowingResize(selection.element) ?? NO_CROP;
+  const insets = dragging ? state.insets : committed;
+  const hasCrop = hasCropInsets(insets);
 
   // Lift the clip while the element is selected so the full content shows and the
-  // cropped-away area can be dimmed; restore on deselect. Keyed on the element so
-  // switching selections restores the previous one. Runs after render, so the
-  // state re-sync above still reads the element's real committed clip. Restore
-  // prefers the pre-lift inline value VERBATIM — the rebuilt inset only replaces
-  // it after a crop gesture actually commits, so a mere select+deselect can
-  // never reformat (or drop) what the author wrote. Both refs are written only
-  // by THIS element's lift effect and crop gestures — never derived from render
-  // state, which by cleanup time already describes the NEXT selection (a direct
-  // A→B switch re-syncs state to B before A's cleanup runs).
-  const liftedRef = useRef(false);
-  const preLiftInlineClipRef = useRef("");
-  // null = no crop gesture committed this selection; "" = committed a crop
-  // removal; anything else = the exact committed clip-path value.
-  const committedClipRef = useRef<string | null>(null);
+  // cropped-away area can be dimmed. Keyed on the element so a direct A→B switch drops A's lift.
   useEffect(() => {
     const el = selection.element;
     if (readElementCropInsets(el) === null) return;
-    preLiftInlineClipRef.current = el.style.getPropertyValue("clip-path");
-    committedClipRef.current = null;
-    el.style.setProperty("clip-path", "none");
-    liftedRef.current = true;
-    return () => {
-      liftedRef.current = false;
-      const committed = committedClipRef.current;
-      const restore = committed !== null ? committed || null : preLiftInlineClipRef.current || null;
-      if (restore) el.style.setProperty("clip-path", restore);
-      else el.style.removeProperty("clip-path");
-    };
+    liftElementCrop(el);
+    return () => dropElementCropLift(el);
   }, [selection.element]);
 
   // The crop applies in the element's LOCAL frame (clip-path precedes the
@@ -169,7 +150,7 @@ export function DomEditCropHandles({
   // Crop rect in FRAME-LOCAL coordinates (origin = frame top-left).
   const cropRect = cropRectFromInsets(
     { left: 0, top: 0, width: frame.width, height: frame.height },
-    state.insets,
+    insets,
     frame.scaleX,
     frame.scaleY,
   );
@@ -180,19 +161,23 @@ export function DomEditCropHandles({
     event.preventDefault();
     event.stopPropagation();
     event.currentTarget.setPointerCapture(event.pointerId);
+    // Read at press: a resize may have rescaled the crop since the last render.
+    const pressed = readCropFollowingResize(selection.element) ?? NO_CROP;
     gestureRef.current = {
       edge,
       pointerId: event.pointerId,
       startX: event.clientX,
       startY: event.clientY,
-      startInsets: state.insets,
-      insets: state.insets,
+      startInsets: pressed,
+      insets: pressed,
+      radius: pressed.radius,
       angleDeg: frame.angleDeg,
       scaleX: frame.scaleX,
       scaleY: frame.scaleY,
     };
     // Clip is already lifted by the selection effect; just flag the drag so the
     // rule-of-thirds grid shows.
+    setState((prev) => ({ ...prev, insets: pressed }));
     setDragging(true);
   };
 
@@ -234,29 +219,12 @@ export function DomEditCropHandles({
   const finishCropGesture = (event: ReactPointerEvent<HTMLElement>) => {
     const gesture = endCropGesture(event);
     if (!gesture) return;
-    // Commit to the file. The commit path re-applies the value to the live
-    // element synchronously, so re-lift in the same turn to keep showing the full
-    // content + dim while selected. Re-lift again on rejection so a failed commit
-    // still restores crop-mode presentation without an unhandled rejection.
-    const el = selection.element;
-    const reLift = () => {
-      if (liftedRef.current) el.style.setProperty("clip-path", "none");
-    };
-    const { insets } = gesture;
-    const committedValue = buildInsetClipPathSides(insets, state.radius);
-    if (committedValue === buildInsetClipPathSides(gesture.startInsets, state.radius)) return;
-    const cropped = insets.top > 0 || insets.right > 0 || insets.bottom > 0 || insets.left > 0;
-    const commit = onStyleCommit?.("clip-path", committedValue);
-    // handleDomStyleCommit applies the persisted value to the live element
-    // synchronously before its first await. Restore the crop-mode lift in this
-    // same turn so the browser never paints that intermediate cropped state.
-    reLift();
-    void Promise.resolve(commit).then(() => {
-      // Only a landed commit makes the rebuilt inset the restore value; a
-      // failed one keeps restoring the pre-lift clip. Store the value itself —
-      // by deselect time, render state describes the next selection.
-      committedClipRef.current = cropped ? committedValue : "";
-    }, reLift);
+    // The commit writes the element's clip-path (and puts it back if the save fails);
+    // the lift keeps it hidden while selected. A drag that ends where it started saves nothing.
+    const value = buildInsetClipPathSides(gesture.insets, gesture.radius);
+    if (value === buildInsetClipPathSides(gesture.startInsets, gesture.radius)) return;
+    const commit = onStyleCommit?.("clip-path", value);
+    void Promise.resolve(commit).catch(() => undefined);
   };
 
   const cancelCropGesture = (event: ReactPointerEvent<HTMLElement>) => {

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

@@ -697,7 +697,7 @@ describe("resolveDomEditRotationGesture", () => {
     ).toEqual({ angle: 15 });
   });
 
-  it("allows small pointer movements when the rounded angle changes", () => {
+  it("allows small pointer movements and keeps the exact angle", () => {
     const nextRotation = resolveDomEditRotationGesture({
       centerX: 0,
       centerY: 0,
@@ -709,7 +709,7 @@ describe("resolveDomEditRotationGesture", () => {
       snap: false,
     });
 
-    expect(nextRotation.angle).toBe(1.4);
+    expect(nextRotation.angle).toBe(1.432);
     expect(hasDomEditRotationChanged(0, nextRotation.angle)).toBe(true);
     expect(hasDomEditRotationChanged(0, 0)).toBe(false);
   });

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

@@ -0,0 +1,129 @@
+// @vitest-environment happy-dom
+import { describe, expect, it, vi } from "vitest";
+import { prepareCropResize, readCropFollowingResize, saveCropResize } from "./cropResize";
+import type { DomEditSelection } from "./domEditingTypes";
+import {
+  applyStudioBoxSizeDraft,
+  captureStudioBoxSize,
+  clearStudioBoxSize,
+  restoreStudioBoxSize,
+} from "./manualEdits";
+import { withInlineLayoutBox } from "../../hooks/domSelectionTestHarness";
+
+function sizedElement(width: number, height: number, clip: string): HTMLElement {
+  const el = withInlineLayoutBox(document.createElement("div"));
+  el.style.cssText = `width: ${width}px; height: ${height}px; clip-path: ${clip}`;
+  return el;
+}
+
+describe("crop during a resize", () => {
+  it("follows the box only while a resize draft is live", () => {
+    const el = sizedElement(300, 200, "inset(10px 60px 20px 30px round 8px)");
+    const before = captureStudioBoxSize(el);
+    const crop = (top: number, right: number, bottom: number, left: number) => ({
+      top,
+      right,
+      bottom,
+      left,
+      radius: 8,
+    });
+    applyStudioBoxSizeDraft(el, { width: 600, height: 400 });
+    expect(readCropFollowingResize(el)).toEqual(crop(20, 120, 40, 60));
+    restoreStudioBoxSize(el, before);
+    // An animated width is not a resize: the crop keeps its pixels.
+    el.style.width = "600px";
+    expect(readCropFollowingResize(el)).toEqual(crop(10, 60, 20, 30));
+  });
+
+  it("leaves the crop alone when the box kept its size (a resize saved as scale)", () => {
+    const el = sizedElement(300, 200, "inset(0px 60px 0px 0px)");
+    applyStudioBoxSizeDraft(el, { width: 450, height: 300 });
+    const stage = prepareCropResize(el);
+    clearStudioBoxSize(el);
+    el.style.width = "300px";
+    el.style.height = "200px";
+    expect(stage()).toBeNull();
+    expect(el.style.getPropertyValue("clip-path")).toBe("inset(0px 60px 0px 0px)");
+  });
+
+  it("puts the crop back, !important and all, when its save fails", async () => {
+    const el = sizedElement(300, 200, "none");
+    el.style.setProperty("clip-path", "inset(0px 60px 0px 0px)", "important");
+    const stage = prepareCropResize(el);
+    el.style.width = "450px";
+    let priorityWhileSaving = "";
+    const commit = vi.fn(() => {
+      priorityWhileSaving = el.style.getPropertyPriority("clip-path");
+      return Promise.reject(new Error("save failed"));
+    });
+    const selection = { element: el } as unknown as DomEditSelection;
+    await expect(saveCropResize(stage, selection, commit, "undo-key")).rejects.toThrow(
+      "save failed",
+    );
+
+    const value = "inset(0px 90px 0px 0px) !important";
+    expect(commit.mock.calls[0]![1]).toEqual([
+      { type: "inline-style", property: "clip-path", value },
+    ]);
+    expect(priorityWhileSaving).toBe("important");
+    expect(el.style.getPropertyValue("clip-path")).toBe("inset(0px 60px 0px 0px)");
+    expect(el.style.getPropertyPriority("clip-path")).toBe("important");
+  });
+
+  it("scales the crop once: the stage ends the draft", () => {
+    const el = sizedElement(300, 200, "inset(0px 60px 0px 0px)");
+    applyStudioBoxSizeDraft(el, { width: 450, height: 300 });
+    prepareCropResize(el)();
+    expect(readCropFollowingResize(el)).toMatchObject({ right: 90 });
+  });
+
+  it("leaves a crop edited while the size saved, and a tweened crop, alone", () => {
+    const edited = sizedElement(300, 200, "inset(0px 60px 0px 0px)");
+    const stageEdited = prepareCropResize(edited);
+    edited.style.width = "450px";
+    edited.style.setProperty("clip-path", "inset(0px 100px 0px 0px)");
+    expect(stageEdited()).toBeNull();
+
+    const tweened = sizedElement(300, 200, "inset(0px 60px 0px 0px)");
+    const child = { targets: () => [tweened], vars: { clipPath: "inset(0px 120px 0px 0px)" } };
+    Object.assign(window, { __timelines: { main: { getChildren: () => [child] } } });
+    const stageTweened = prepareCropResize(tweened);
+    tweened.style.width = "450px";
+    expect(stageTweened()).toBeNull();
+    Object.assign(window, { __timelines: undefined });
+  });
+
+  it("decides before the write, which may add a width tween of its own", () => {
+    const el = sizedElement(300, 200, "inset(0px 60px 0px 0px)");
+    const stage = prepareCropResize(el);
+    const tween = { targets: () => [el], vars: { width: 600 }, duration: () => 4 };
+    Object.assign(window, { __timelines: { main: { getChildren: () => [tween] } } });
+    el.style.width = "600px";
+    expect(stage()?.patch.value).toBe("inset(0px 120px 0px 0px)");
+    Object.assign(window, { __timelines: undefined });
+  });
+
+  it("follows only the axes GSAP does not tween, while dragging and once saved", () => {
+    const resize = (vars: object, duration: number) => {
+      const el = sizedElement(300, 200, "inset(20px 60px 20px 0px)");
+      const tween = { targets: () => [el], vars, duration: () => duration };
+      // The tween's timeline is not the first key, as after a soft reload.
+      const timelines = { sub: { getChildren: () => [] }, main: { getChildren: () => [tween] } };
+      Object.assign(window, { __timelines: timelines });
+      applyStudioBoxSizeDraft(el, { width: 600, height: 400 });
+      const { top, right } = readCropFollowingResize(el)!;
+      const saved = prepareCropResize(el)()?.patch.value ?? null;
+      Object.assign(window, { __timelines: undefined });
+      return [[top, right], saved];
+    };
+    // A held width still scales; a height tween leaves the width free.
+    expect(resize({ width: 473 }, 0)).toEqual([[40, 120], "inset(40px 120px 40px 0px)"]);
+    expect(resize({ height: 300 }, 4)).toEqual([[20, 120], "inset(20px 120px 20px 0px)"]);
+    // A width tween, in either keyframe form, leaves the height free.
+    const widthOnly = [[40, 60], "inset(40px 60px 40px 0px)"];
+    const percent = { "0%": { width: 300 }, "100%": { width: 600 } };
+    expect(resize({ keyframes: percent }, 4)).toEqual(widthOnly);
+    expect(resize({ keyframes: { width: [300, 600] } }, 4)).toEqual(widthOnly);
+    expect(resize({ width: 600, height: 400 }, 4)).toEqual([[20, 60], null]);
+  });
+});

package/src/components/editor/cropResize.ts

@@ -0,0 +1,143 @@
+import type { PatchOperation } from "../../utils/sourcePatcher";
+import type { CommitMutation } from "../../hooks/gsapScriptCommitTypes";
+import type { DomEditSelection } from "./domEditingTypes";
+import { gsapAnimatesProperty } from "./gsapAnimatesProperty";
+import { elementHasNonHoldTween } from "../../hooks/gsapRuntimeKeyframes";
+import { buildInsetClipPathSides, type ParsedInsetClipPathSides } from "./clipPathHelpers";
+import { hasCropInsets, readElementCropInsets } from "./domEditOverlayCrop";
+import { forgetStudioBoxSizeDraftBase, readStudioBoxSizeDraftBase } from "./manualEditsDom";
+
+interface Box {
+  width: number;
+  height: number;
+}
+
+const boxOf = (element: HTMLElement): Box => ({
+  width: element.offsetWidth,
+  height: element.offsetHeight,
+});
+
+type Follows = Record<keyof Box, boolean>;
+
+/** Per axis, whether a crop follows a resize: not when GSAP drives the clip or tweens that axis's size. */
+function cropFollows(element: HTMLElement): Follows {
+  const clip = gsapAnimatesProperty(element, "clipPath");
+  return {
+    width: !clip && !elementHasNonHoldTween(element, ["width"]),
+    height: !clip && !elementHasNonHoldTween(element, ["height"]),
+  };
+}
+
+function scaleCrop(
+  crop: ParsedInsetClipPathSides,
+  from: Box,
+  to: Box,
+  follows: Follows,
+): ParsedInsetClipPathSides {
+  const sx = follows.width && from.width > 0 ? to.width / from.width : 1;
+  const sy = follows.height && from.height > 0 ? to.height / from.height : 1;
+  return {
+    top: crop.top * sy,
+    right: crop.right * sx,
+    bottom: crop.bottom * sy,
+    left: crop.left * sx,
+    radius: crop.radius,
+  };
+}
+
+/** The element's crop as the crop UI draws it: it follows the box while a resize draft is live. */
+export function readCropFollowingResize(element: HTMLElement): ParsedInsetClipPathSides | null {
+  const crop = readElementCropInsets(element);
+  const base = readStudioBoxSizeDraftBase(element);
+  return crop && base ? scaleCrop(crop, base, boxOf(element), cropFollows(element)) : crop;
+}
+
+export interface CropResize {
+  patch: PatchOperation;
+  revert: () => void;
+}
+
+/** Call before a resize lands. Once the new size is live, the stage writes the crop that keeps the
+ *  same part of the element in view and returns its patch, or null when nothing needs rescaling. */
+export function prepareCropResize(element: HTMLElement): () => CropResize | null {
+  const from = readStudioBoxSizeDraftBase(element) ?? boxOf(element);
+  const before = element.style.getPropertyValue("clip-path");
+  const priority = element.style.getPropertyPriority("clip-path");
+  // Decided before the write lands: a W edit may add a width keyframe of its own.
+  const follows = cropFollows(element);
+  const crop = readElementCropInsets(element);
+  return () => {
+    forgetStudioBoxSizeDraftBase(element);
+    const to = boxOf(element);
+    // A crop edited while the size saved was drawn in the new box already.
+    const untouched = element.style.getPropertyValue("clip-path") === before;
+    if (!crop || !hasCropInsets(crop) || !untouched || !(to.width > 0 && to.height > 0))
+      return null;
+    const clip = buildInsetClipPathSides(scaleCrop(crop, from, to, follows), crop.radius);
+    // Unchanged when the box is (a resize saved as a `scale`) or no resized axis follows.
+    if (clip === buildInsetClipPathSides(crop, crop.radius)) return null;
+    element.style.setProperty("clip-path", clip, priority);
+    return {
+      patch: {
+        type: "inline-style",
+        property: "clip-path",
+        value: priority ? `${clip} !important` : clip,
+      },
+      revert: () => {
+        if (before) element.style.setProperty("clip-path", before, priority);
+        else element.style.removeProperty("clip-path");
+      },
+    };
+  };
+}
+
+type PatchCommit = (
+  selection: DomEditSelection,
+  patches: PatchOperation[],
+  options: { label: string; coalesceKey: string; coalesceMs?: number },
+) => Promise<void>;
+
+/** Stage the crop and save it under the resize's undo key, taking it back off the element if that fails. */
+export async function saveCropResize(
+  stage: () => CropResize | null,
+  selection: DomEditSelection,
+  commit: PatchCommit,
+  coalesceKey: string,
+): Promise<void> {
+  const crop = stage();
+  if (!crop) return;
+  try {
+    await commit(selection, [crop.patch], {
+      label: "Resize layer",
+      coalesceKey,
+      coalesceMs: Number.POSITIVE_INFINITY,
+    });
+  } catch (error) {
+    crop.revert();
+    throw error;
+  }
+}
+
+let sizeWriteCounter = 0;
+
+/** A property write that may size the element (a W/H field on an animated element): when it
+ *  does, its writes and the rescaled crop share one undo step. */
+export async function writeSizeWithCrop(
+  selection: DomEditSelection,
+  properties: Record<string, unknown>,
+  mutation: CommitMutation | null,
+  commit: PatchCommit,
+  write: (keyed?: CommitMutation) => Promise<void>,
+): Promise<void> {
+  if (!mutation || !("width" in properties || "height" in properties)) return write();
+  const stage = prepareCropResize(selection.element);
+  const coalesceKey = `size-write:${++sizeWriteCounter}`;
+  const undoStep = { coalesceKey, coalesceMs: Number.POSITIVE_INFINITY };
+  const keyed: CommitMutation = (s, m, options) => mutation(s, m, { ...options, ...undoStep });
+  if (mutation.batch) {
+    const batch = mutation.batch;
+    keyed.batch = (calls, options) => batch(calls, { ...options, ...undoStep });
+  }
+  await write(keyed);
+  await saveCropResize(stage, selection, commit, coalesceKey);
+}