@hyperframes/studio 0.7.54 → 0.7.56

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

@@ -0,0 +1,131 @@
+import { describe, expect, it } from "vitest";
+import {
+  resolveCenterResizeScale,
+  resolveCenterResizeSize,
+  resolveRotatedResizeCursor,
+} from "./domEditResizeLocal";
+
+const DEG = Math.PI / 180;
+
+describe("resolveCenterResizeScale — radial distance from the center", () => {
+  it("scale is the ratio of pointer-to-center distances", () => {
+    // start 100px from center, now 150px from center → 1.5x.
+    expect(
+      resolveCenterResizeScale({
+        centerStart: { x: 100, y: 100 },
+        pointerStart: { x: 200, y: 100 },
+        pointer: { x: 250, y: 100 },
+      }),
+    ).toBeCloseTo(1.5, 9);
+  });
+
+  it("shrinks as the pointer moves toward the center", () => {
+    expect(
+      resolveCenterResizeScale({
+        centerStart: { x: 0, y: 0 },
+        pointerStart: { x: 0, y: 200 },
+        pointer: { x: 0, y: 50 },
+      }),
+    ).toBeCloseTo(0.25, 9);
+  });
+
+  it("bails to 1 when the gesture starts at (or ~at) the center (degenerate)", () => {
+    expect(
+      resolveCenterResizeScale({
+        centerStart: { x: 100, y: 100 },
+        pointerStart: { x: 101, y: 100 },
+        pointer: { x: 400, y: 400 },
+      }),
+    ).toBe(1);
+  });
+});
+
+describe("resolveCenterResizeSize — rotation is a non-event (radial distance)", () => {
+  // The pure function takes no rotation argument: rotating the WHOLE gesture
+  // (center, pointer-down, pointer-now) about the center by any angle preserves
+  // every radial distance, so the returned size is identical at 0/37/90deg.
+  const base = { baseWidth: 240, baseHeight: 120 };
+  const centerStart = { x: 320, y: 180 };
+  // A pointer-down 100px right of center, dragged to 160px right of center (1.6x).
+  const p0 = { x: 100, y: 0 };
+  const p1 = { x: 160, y: 0 };
+  const rot = (v: { x: number; y: number }, t: number) => ({
+    x: centerStart.x + (Math.cos(t) * v.x - Math.sin(t) * v.y),
+    y: centerStart.y + (Math.sin(t) * v.x + Math.cos(t) * v.y),
+  });
+
+  for (const deg of [0, 37, 90]) {
+    it(`@${deg}deg: proportional 1.6x scale, same result as unrotated`, () => {
+      const t = deg * DEG;
+      const out = resolveCenterResizeSize({
+        ...base,
+        centerStart,
+        pointerStart: rot(p0, t),
+        pointer: rot(p1, t),
+      });
+      expect(out.width).toBeCloseTo(240 * 1.6, 6);
+      expect(out.height).toBeCloseTo(120 * 1.6, 6);
+      expect(out.width / out.height).toBeCloseTo(2, 9);
+    });
+  }
+
+  it("shrink toward center keeps the aspect ratio", () => {
+    const out = resolveCenterResizeSize({
+      baseWidth: 300,
+      baseHeight: 180,
+      centerStart: { x: 0, y: 0 },
+      pointerStart: { x: 0, y: 200 },
+      pointer: { x: 0, y: 120 },
+    });
+    expect(out.width).toBeCloseTo(300 * 0.6, 6);
+    expect(out.height).toBeCloseTo(180 * 0.6, 6);
+    expect(out.width / out.height).toBeCloseTo(300 / 180, 9);
+  });
+
+  it("clamps at the local minimum, never mirroring through zero (drag past center)", () => {
+    // Pointer dragged to the exact center → raw scale 0; the smaller edge is
+    // clamped to MIN_RESIZE_LOCAL_PX and the aspect ratio holds at the clamp.
+    const out = resolveCenterResizeSize({
+      baseWidth: 200,
+      baseHeight: 100,
+      centerStart: { x: 100, y: 100 },
+      pointerStart: { x: 200, y: 100 },
+      pointer: { x: 100, y: 100 },
+    });
+    expect(out.width).toBeGreaterThan(0);
+    expect(out.height).toBeGreaterThan(0);
+    expect(Math.min(out.width, out.height)).toBeCloseTo(1, 9);
+    expect(out.width / out.height).toBeCloseTo(2, 9);
+  });
+
+  it("degenerate start-at-center returns the base size unchanged (scale 1)", () => {
+    const out = resolveCenterResizeSize({
+      baseWidth: 200,
+      baseHeight: 100,
+      centerStart: { x: 100, y: 100 },
+      pointerStart: { x: 100, y: 100 },
+      pointer: { x: 400, y: 400 },
+    });
+    expect(out).toEqual({ width: 200, height: 100 });
+  });
+});
+
+describe("resolveRotatedResizeCursor", () => {
+  it("returns the static diagonal cursors at rotation 0", () => {
+    expect(resolveRotatedResizeCursor("nw", 0)).toBe("nwse-resize");
+    expect(resolveRotatedResizeCursor("se", 0)).toBe("nwse-resize");
+    expect(resolveRotatedResizeCursor("ne", 0)).toBe("nesw-resize");
+    expect(resolveRotatedResizeCursor("sw", 0)).toBe("nesw-resize");
+  });
+
+  it("rotates the cursor with the element (90deg swaps the diagonals)", () => {
+    // NW base 315° + 90° = 45° → nesw-resize
+    expect(resolveRotatedResizeCursor("nw", 90)).toBe("nesw-resize");
+    // NW base 315° + 45° = 360°→0° → ns-resize
+    expect(resolveRotatedResizeCursor("nw", 45)).toBe("ns-resize");
+  });
+
+  it("wraps negative rotations", () => {
+    expect(resolveRotatedResizeCursor("se", -90)).toBe("nesw-resize");
+  });
+});

package/src/components/editor/domEditResizeLocal.ts

@@ -0,0 +1,125 @@
+/**
+ * Center-anchored corner-resize math (the CapCut model): the element scales
+ * proportionally about its CENTER, the center stays planted, and all four corners
+ * behave identically.
+ *
+ * The scale factor is the RADIAL distance from the element's center: how far the
+ * pointer is from the center now, divided by how far it was at gesture start. This
+ * is inherently proportional, continuous everywhere, and rotation-invariant — a
+ * distance is a distance regardless of the element's angle, so there is no per-axis
+ * projection and no dominant-axis branch to jump across. Which corner was grabbed
+ * is irrelevant to the size (it only picks the resize cursor).
+ *
+ * All math here is pure and unit-tested; the live wiring (measuring the element's
+ * rendered center, feeding the center-pin translate through the manual-offset
+ * channel) lives in useDomEditOverlayGestures.ts.
+ */
+import type { ResizeHandle } from "./domEditOverlayGestures";
+
+/** Minimum element edge in LOCAL px — mirrors the old MIN_RESIZE_EDGE_PX clamp
+ *  (no flip-through-zero: clamp, never mirror). */
+const MIN_RESIZE_LOCAL_PX = 1;
+
+/**
+ * Below this pointer-to-center distance (overlay px) the gesture started at (or
+ * effectively at) the center, so the ratio is degenerate (division by ~0). Bail to
+ * scale 1 rather than blow up.
+ */
+const DEGENERATE_START_DIST_PX = 3;
+
+/**
+ * The proportional scale factor for a center-anchored resize: the ratio of the
+ * pointer's radial distance from the element center now to its distance at gesture
+ * start. Rotation-invariant (a radial distance ignores the element's angle) and
+ * continuous. Never negative — dragging through the center just shrinks toward the
+ * clamp; the caller clamps the resulting size, this returns the raw ratio (guarded
+ * against a degenerate start-at-center gesture, which returns 1).
+ */
+export function resolveCenterResizeScale(input: {
+  pointer: { x: number; y: number };
+  pointerStart: { x: number; y: number };
+  centerStart: { x: number; y: number };
+}): number {
+  const startDist = Math.hypot(
+    input.pointerStart.x - input.centerStart.x,
+    input.pointerStart.y - input.centerStart.y,
+  );
+  if (!Number.isFinite(startDist) || startDist < DEGENERATE_START_DIST_PX) return 1;
+  const nowDist = Math.hypot(
+    input.pointer.x - input.centerStart.x,
+    input.pointer.y - input.centerStart.y,
+  );
+  return nowDist / startDist;
+}
+
+/**
+ * The element's new LOCAL size for a center-anchored corner resize: base size
+ * scaled by `resolveCenterResizeScale`, clamped so the smaller edge never drops
+ * below MIN_RESIZE_LOCAL_PX (clamp small, never mirror through zero). The scale is
+ * a dimensionless ratio, so the base local size and the screen-space pointer
+ * distances live in different frames without any display-scale conversion — the
+ * ratio cancels the scale.
+ */
+export function resolveCenterResizeSize(input: {
+  baseWidth: number;
+  baseHeight: number;
+  pointer: { x: number; y: number };
+  pointerStart: { x: number; y: number };
+  centerStart: { x: number; y: number };
+}): { width: number; height: number } {
+  const baseWidth = Math.max(input.baseWidth, MIN_RESIZE_LOCAL_PX);
+  const baseHeight = Math.max(input.baseHeight, MIN_RESIZE_LOCAL_PX);
+  const rawScale = resolveCenterResizeScale({
+    pointer: input.pointer,
+    pointerStart: input.pointerStart,
+    centerStart: input.centerStart,
+  });
+  const minScale = MIN_RESIZE_LOCAL_PX / Math.min(baseWidth, baseHeight);
+  const scale = Math.max(minScale, rawScale);
+  return { width: baseWidth * scale, height: baseHeight * scale };
+}
+
+/**
+ * The eight CSS resize cursors, rotated with the object. A corner's base pointing
+ * direction (the diagonal it lives on) plus the element rotation, bucketed into
+ * 45° slots. So a 90°-rotated NW corner reads as a NE-diagonal cursor, etc.
+ */
+const CURSORS_8 = [
+  "ns-resize", // 0°   (up)
+  "nesw-resize", // 45°
+  "ew-resize", // 90°  (right)
+  "nwse-resize", // 135°
+  "ns-resize", // 180° (down)
+  "nesw-resize", // 225°
+  "ew-resize", // 270° (left)
+  "nwse-resize", // 315°
+] as const;
+
+/** Base outward diagonal angle of each corner, in degrees, screen convention
+ *  (0° = up, clockwise). NW points up-left = 315°, NE up-right = 45°, etc. */
+const CORNER_BASE_ANGLE_DEG: Record<ResizeHandle, number> = {
+  nw: 315,
+  ne: 45,
+  se: 135,
+  sw: 225,
+};
+
+/** Resize cursor for a corner handle on an element rotated by `rotationDeg`. */
+export function resolveRotatedResizeCursor(handle: ResizeHandle, rotationDeg: number): string {
+  const angle = CORNER_BASE_ANGLE_DEG[handle] + rotationDeg;
+  const normalized = ((angle % 360) + 360) % 360;
+  const bucket = Math.round(normalized / 45) % 8;
+  return CURSORS_8[bucket]!;
+}
+
+/** Per-frame anchored-resize center accumulator: ADD the residual center correction
+ *  (fixedStart − fixedNow) onto the previous anchor so the pin CONVERGES instead of
+ *  oscillating (fa4f39168). Pure; exported for the release-shift characterization tests. */
+export function computeNextResizeAnchor(
+  prev: { dx: number; dy: number } | undefined,
+  fixedStart: { x: number; y: number },
+  fixedNow: { x: number; y: number },
+): { dx: number; dy: number } {
+  const base = prev ?? { dx: 0, dy: 0 };
+  return { dx: base.dx + (fixedStart.x - fixedNow.x), dy: base.dy + (fixedStart.y - fixedNow.y) };
+}

package/src/components/editor/domEditingDom.ts

@@ -104,7 +104,7 @@ export function findClosestByAttribute(
 // mounted root (it keeps `data-composition-id` but drops `data-composition-src`/
 // `-file`), so a subcomp element's DOM ancestors no longer say which file it came
 // from. This project-global map (composition-id → source file, built once from
-// index.html's clips — see NLELayout) recovers it. The studio loads one project at a
+// index.html's clips — see NLEContext/EditorShell) recovers it. The studio loads one project at a
 // time, so module scope is the right lifetime; it's empty until set, in which case
 // resolution falls back to the historical attribute-only behavior.
 let compositionSourceMap: Map<string, string> = new Map();

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

@@ -49,6 +49,7 @@ import {
   buildMotionPatches,
   buildClearMotionPatches,
 } from "./manualEditsDomPatches";
+import { applyStudioBoxSize, applyStudioPathOffset } from "./manualEditsDom";
 
 /* ── helpers ── */
 
@@ -267,6 +268,52 @@ describe("buildBoxSizePatches / buildClearBoxSizePatches", () => {
   });
 });
 
+/* ── Combined box-size + path-offset (anchored-corner resize) ──────────────── */
+
+describe("anchored-corner combined patch: [...buildBoxSizePatches, ...buildPathOffsetPatches]", () => {
+  // NW/NE/SW resize commits size AND anchor offset in ONE persist. The two
+  // builders read the same already-mutated element and are concatenated; this
+  // is only safe if their {type,property} keys are disjoint (no builder
+  // overwrites the other's op when the source patcher applies them in order).
+  it("concatenation of both builders emits disjoint {type,property} keys (no collision)", () => {
+    const e = div();
+    applyStudioBoxSize(e, { width: 300, height: 200 });
+    applyStudioPathOffset(e, { x: 10, y: 20 });
+
+    const combined = [...buildBoxSizePatches(e), ...buildPathOffsetPatches(e)];
+    const keys = combined.map(opKey);
+    expect(new Set(keys).size, `duplicate {type,property} key in combined patch: ${keys}`).toBe(
+      keys.length,
+    );
+  });
+
+  it("combined patch carries BOTH markers so a soft-reload re-hydrates size and offset together", () => {
+    const e = div();
+    applyStudioBoxSize(e, { width: 300, height: 200 });
+    applyStudioPathOffset(e, { x: 10, y: 20 });
+
+    const combined = [...buildBoxSizePatches(e), ...buildPathOffsetPatches(e)];
+    const has = (property: string) =>
+      combined.some((op) => op.type === "attribute" && op.property === property);
+    expect(has(STUDIO_BOX_SIZE_ATTR)).toBe(true);
+    expect(has(STUDIO_PATH_OFFSET_ATTR)).toBe(true);
+  });
+
+  it("order is size-first: every box-size op precedes every path-offset op", () => {
+    const e = div();
+    applyStudioBoxSize(e, { width: 300, height: 200 });
+    applyStudioPathOffset(e, { x: 10, y: 20 });
+
+    const boxKeys = new Set(buildBoxSizePatches(e).map(opKey));
+    const combined = [...buildBoxSizePatches(e), ...buildPathOffsetPatches(e)];
+    const lastBoxIdx = combined.reduce((acc, op, i) => (boxKeys.has(opKey(op)) ? i : acc), -1);
+    const firstOffsetIdx = combined.findIndex(
+      (op) => op.type === "attribute" && op.property === STUDIO_PATH_OFFSET_ATTR,
+    );
+    expect(firstOffsetIdx).toBeGreaterThan(lastBoxIdx);
+  });
+});
+
 /* ── Rotation ────────────────────────────────────────────────────────────── */
 
 describe("buildRotationPatches / buildClearRotationPatches", () => {

package/src/components/editor/manualOffsetDrag.ts

@@ -441,22 +441,26 @@ export function applyManualOffsetDragDraft(
   return offset;
 }
 
-export function applyManualOffsetDragCommit(
-  member: ManualOffsetDragMember,
-  dx: number,
-  dy: number,
-): { x: number; y: number } {
-  // Re-stamp the STABLE gesture-start base/offset before the source commit reads
-  // them. A mid-drag re-render can wipe these attrs; the commit converts the drop
-  // offset → gsap x/y via computeDraggedGsapPosition, which without the base falls
-  // back to the live (already-dragged) transform and re-adds the delta — so the
-  // element flies off-screen the instant you drop it. The member holds the true
-  // gesture-start values in JS, immune to the re-render.
+/**
+ * Re-stamp the STABLE gesture-start base/offset before the source commit reads
+ * them. A mid-gesture re-render can wipe these attrs; the commit converts the
+ * drop offset → gsap x/y via computeDraggedGsapPosition, which without the base
+ * falls back to the live (already-dragged) transform and re-adds the delta — so
+ * the element flies off-screen the instant you drop it. The member holds the
+ * true gesture-start values in JS, immune to the re-render.
+ */
+function restampManualOffsetDragGestureBase(member: ManualOffsetDragMember): void {
   member.element.setAttribute("data-hf-drag-gsap-base-x", String(member.baseGsap.x));
   member.element.setAttribute("data-hf-drag-gsap-base-y", String(member.baseGsap.y));
   member.element.setAttribute("data-hf-drag-initial-offset-x", String(member.initialOffset.x));
   member.element.setAttribute("data-hf-drag-initial-offset-y", String(member.initialOffset.y));
-  const offset = resolveManualOffsetDragMemberOffset(member, dx, dy);
+}
+
+function applyManualOffsetCommitValue(
+  member: ManualOffsetDragMember,
+  offset: { x: number; y: number },
+): { x: number; y: number } {
+  restampManualOffsetDragGestureBase(member);
   // Optimistic visual through the GSAP channel (same as the live draft and the
   // committed `tl.set`), so the element holds its dropped position until the
   // source mutation soft-reloads — no transient CSS `--hf-studio-offset` write.
@@ -467,6 +471,45 @@ export function applyManualOffsetDragCommit(
   return offset;
 }
 
+export function applyManualOffsetDragCommit(
+  member: ManualOffsetDragMember,
+  dx: number,
+  dy: number,
+): { x: number; y: number } {
+  return applyManualOffsetCommitValue(member, resolveManualOffsetDragMemberOffset(member, dx, dy));
+}
+
+/**
+ * Arrow-key nudge, in OFFSET units (composition px), not screen px — "nudge
+ * 1px" means one composition pixel regardless of canvas zoom, so the delta
+ * adds to the gesture-start offset directly instead of going through the
+ * screen→offset matrix. Draft/commit land in the same GSAP channel (with the
+ * same CSS fallback) as the drag equivalents above.
+ */
+export function applyManualOffsetNudgeDraft(
+  member: ManualOffsetDragMember,
+  delta: { x: number; y: number },
+): { x: number; y: number } {
+  const offset = {
+    x: member.initialOffset.x + delta.x,
+    y: member.initialOffset.y + delta.y,
+  };
+  if (!applyOffsetDragDraftViaGsap(member.element, offset, member.baseGsap)) {
+    applyStudioPathOffsetDraft(member.element, offset);
+  }
+  return offset;
+}
+
+export function applyManualOffsetNudgeCommit(
+  member: ManualOffsetDragMember,
+  delta: { x: number; y: number },
+): { x: number; y: number } {
+  return applyManualOffsetCommitValue(member, {
+    x: member.initialOffset.x + delta.x,
+    y: member.initialOffset.y + delta.y,
+  });
+}
+
 function restoreManualOffsetDragMember(member: ManualOffsetDragMember): void {
   restoreStudioPathOffset(member.element, member.initialPathOffset);
   endStudioManualEditGesture(member.element, member.gestureToken);

package/src/components/editor/offCanvasIndicatorGeometry.ts

@@ -1,7 +1,7 @@
 import type React from "react";
 import type { OffCanvasRect } from "./OffCanvasIndicators";
 import { hugRectForElement } from "./domEditOverlayCrop";
-import { groupAwareOverlayRect } from "./domEditOverlayGeometry";
+import { orientedGroupAwareOverlayRect } from "./domEditOverlayGeometry";
 import { isElementComputedVisible } from "./domEditingElement";
 import { collectDomEditLayerItems } from "./domEditingLayers";
 
@@ -13,11 +13,30 @@ function offCanvasSignature(rects: OffCanvasRect[]): string {
   return rects
     .map(
       (rect) =>
-        `${rect.key}:${rounded(rect.left)},${rounded(rect.top)},${rounded(rect.width)},${rounded(rect.height)}`,
+        `${rect.key}:${rounded(rect.left)},${rounded(rect.top)},${rounded(rect.width)},${rounded(rect.height)},${rounded(rect.angle ?? 0)}`,
     )
     .join("|");
 }
 
+function extendsOutside(
+  rect: Omit<OffCanvasRect, "key">,
+  comp: { left: number; top: number; width: number; height: number },
+): boolean {
+  const radians = ((rect.angle ?? 0) * Math.PI) / 180;
+  const halfWidth =
+    (Math.abs(Math.cos(radians)) * rect.width + Math.abs(Math.sin(radians)) * rect.height) / 2;
+  const halfHeight =
+    (Math.abs(Math.sin(radians)) * rect.width + Math.abs(Math.cos(radians)) * rect.height) / 2;
+  const centerX = rect.left + rect.width / 2;
+  const centerY = rect.top + rect.height / 2;
+  return (
+    centerX - halfWidth < comp.left ||
+    centerX + halfWidth > comp.left + comp.width ||
+    centerY - halfHeight < comp.top ||
+    centerY + halfHeight > comp.top + comp.height
+  );
+}
+
 // fallow-ignore-next-line complexity
 export function recomputeOffCanvasIndicators(
   iframe: HTMLIFrameElement,
@@ -50,18 +69,20 @@ export function recomputeOffCanvasIndicators(
     // whose members sit inside the canvas isn't flagged off-canvas by a stale
     // wrapper box. Crop-hug the result so an inset crop that keeps the visible
     // part on-canvas doesn't flag the element either.
-    const base = groupAwareOverlayRect(overlay, iframe, item.element);
+    const base = orientedGroupAwareOverlayRect(overlay, iframe, item.element);
     const r = base ? { ...base, ...hugRectForElement(base, item.element) } : null;
     if (!r) continue;
     // Any edge crossing the composition border → gray-zone indicator (the
     // in-canvas portion is clipped away below, so only the sliver shows).
-    const extendsOutsideComp =
-      r.left < comp.left ||
-      r.left + r.width > comp.left + comp.width ||
-      r.top < comp.top ||
-      r.top + r.height > comp.top + comp.height;
-    if (extendsOutsideComp) {
-      rects.push({ key: item.key, left: r.left, top: r.top, width: r.width, height: r.height });
+    if (extendsOutside(r, comp)) {
+      rects.push({
+        key: item.key,
+        left: r.left,
+        top: r.top,
+        width: r.width,
+        height: r.height,
+        angle: r.angle,
+      });
       elMap.set(item.key, item.element);
     }
   }

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

@@ -2,11 +2,35 @@
 
 import React, { act } from "react";
 import { createRoot, type Root } from "react-dom/client";
-import { describe, expect, it } from "vitest";
+import { afterAll, beforeAll, describe, expect, it } from "vitest";
 import { DomEditOverlay } from "./DomEditOverlay";
 
 Reflect.set(globalThis, "IS_REACT_ACT_ENVIRONMENT", true);
 
+// happy-dom (20.x) holds each MutationObserver's delivery callback ONLY via a
+// WeakRef (MutationObserverListener: `callback: new WeakRef(...)` — the arrow
+// has no strong referent). If V8 runs a GC between observe() and a mutation,
+// deref() returns undefined and mutation delivery silently stops — the
+// indicator-refresh loop never sees its dirty flag and these tests flake under
+// full-suite memory pressure (passing in isolation). Pin WeakRef to a strong
+// ref for this file so the real observer path stays deterministic.
+const RealWeakRef = globalThis.WeakRef;
+class StrongRef<T extends WeakKey> {
+  #value: T;
+  constructor(value: T) {
+    this.#value = value;
+  }
+  deref(): T {
+    return this.#value;
+  }
+}
+beforeAll(() => {
+  (globalThis as { WeakRef: unknown }).WeakRef = StrongRef;
+});
+afterAll(() => {
+  globalThis.WeakRef = RealWeakRef;
+});
+
 const INDICATOR = '[aria-label="Select off-canvas element index.html:headline:0"]';
 
 function domRect(left: number, top: number, width: number, height: number): DOMRect {

package/src/components/editor/resizeDraft.ts

@@ -0,0 +1,108 @@
+import type { GestureState } from "./domEditOverlayGestures";
+import { resolveResizeCenterAnchorOffset } from "./domEditOverlayGestures";
+import type { OverlayRect } from "./domEditOverlayGeometry";
+import {
+  cornerEdgeLength,
+  elementCornerOverlayPoints,
+  overlayCornersCentroid,
+} from "./domEditOverlayGeometry";
+import { computeNextResizeAnchor } from "./domEditResizeLocal";
+import { applyManualOffsetDragDraft } from "./manualOffsetDrag";
+
+type Corners = ReturnType<typeof elementCornerOverlayPoints>;
+
+/**
+ * The residual center-pin offset for this frame. With measurable corners and a
+ * fixed-center start, accumulate `fixedStart - centerNow` onto the previous
+ * anchor so it CONVERGES rather than oscillating: `applyManualOffsetDragDraft`
+ * treats its argument as the absolute offset, and `centerNow` (measured on the
+ * live element) already carries the previous frame's offset, so the difference
+ * is only the residual correction. Using it absolutely would drop the offset
+ * every other frame and un-pin the center (fa4f39168). Memberless/unmeasurable
+ * geometry falls back to the AABB half-delta.
+ */
+function resolveResizeAnchor(
+  g: GestureState,
+  corners: Corners | null,
+  measureOrientedRect: () => OverlayRect | null,
+): { dx: number; dy: number } {
+  const fixedStart = g.resizeFixedCenterStart;
+  if (corners && fixedStart) {
+    return computeNextResizeAnchor(g.lastResizeAnchor, fixedStart, overlayCornersCentroid(corners));
+  }
+  const fallbackRect = measureOrientedRect();
+  return resolveResizeCenterAnchorOffset({
+    originWidth: g.originWidth,
+    originHeight: g.originHeight,
+    overlayWidth: fallbackRect ? fallbackRect.width : g.originWidth,
+    overlayHeight: fallbackRect ? fallbackRect.height : g.originHeight,
+  });
+}
+
+/**
+ * Center-pinned draft rect: translate the element through the manual-offset
+ * channel to keep its gesture-start center planted (rotation-safe for any
+ * transform-origin), then hug its true rendered bounds. Mutates
+ * `g.lastResizeAnchor` and applies the offset draft as a side effect.
+ */
+function resolveAnchoredResizeDraft(
+  g: GestureState,
+  member: NonNullable<GestureState["pathOffsetMember"]>,
+  element: HTMLElement,
+  overlayEl: HTMLDivElement | null,
+  iframe: HTMLIFrameElement | null,
+  measureOrientedRect: () => OverlayRect | null,
+): OverlayRect {
+  // Measure real corners ONCE — reused for the anchor and the fallback size.
+  const corners =
+    overlayEl && iframe ? elementCornerOverlayPoints(overlayEl, iframe, element) : null;
+  const anchor = resolveResizeAnchor(g, corners, measureOrientedRect);
+  g.lastResizeAnchor = anchor;
+  applyManualOffsetDragDraft(member, anchor.dx, anchor.dy);
+  // Re-measure AFTER the anchor translate so it hugs the element every frame.
+  return (
+    measureOrientedRect() ?? {
+      left: g.originLeft + anchor.dx,
+      top: g.originTop + anchor.dy,
+      width: corners ? cornerEdgeLength(corners.nw, corners.ne) : g.originWidth,
+      height: corners ? cornerEdgeLength(corners.nw, corners.sw) : g.originHeight,
+      editScaleX: g.editScaleX,
+      editScaleY: g.editScaleY,
+      angle: g.actualRotation,
+    }
+  );
+}
+
+/** The overlay rect to paint for the current resize pointer-move frame. */
+export function resolveResizeDraftRect(
+  g: GestureState,
+  element: HTMLElement,
+  overlayEl: HTMLDivElement | null,
+  iframe: HTMLIFrameElement | null,
+  measureOrientedRect: () => OverlayRect | null,
+): OverlayRect {
+  if (g.pathOffsetMember) {
+    return resolveAnchoredResizeDraft(
+      g,
+      g.pathOffsetMember,
+      element,
+      overlayEl,
+      iframe,
+      measureOrientedRect,
+    );
+  }
+  // Re-measure the element's oriented box AFTER the size write. The size draft
+  // rounds/clamps and (with a centered transform-origin + GSAP scale) the real
+  // rendered size diverges from the CSS size, so measure rather than trust math.
+  return (
+    measureOrientedRect() ?? {
+      left: g.originLeft,
+      top: g.originTop,
+      width: g.originWidth,
+      height: g.originHeight,
+      editScaleX: g.editScaleX,
+      editScaleY: g.editScaleY,
+      angle: g.actualRotation,
+    }
+  );
+}