@hyperframes/studio 0.7.55 → 0.7.57

package/src/components/editor/domEditOverlayGeometry.ts

@@ -9,6 +9,14 @@ export interface OverlayRect {
   height: number;
   editScaleX: number;
   editScaleY: number;
+  /**
+   * The element's live transform rotation in DEGREES (screen/CSS convention, CW
+   * positive), decomposed from its computed transform matrix. Present so the
+   * selection chrome can render as an oriented bounding box (OBB) that co-rotates
+   * with the element. Omitted (treated as 0) for group/union rects and when the
+   * transform is unmeasurable — those render axis-aligned exactly as before.
+   */
+  angle?: number;
 }
 
 export interface GroupOverlayItem {
@@ -98,31 +106,115 @@ export function toVisibleOverlayRect(
   return rect ? { ...rect, ...hugRectForElement(rect, element) } : null;
 }
 
-export function toOverlayRect(
+/**
+ * getComputedStyle(element).transform decomposed into a DOMMatrix, read ONCE.
+ * Shared by orientedOverlayRect's rotation gate and elementCornerOverlayPoints
+ * so a single measurement pass serves both — constructing this twice per frame
+ * (one read per consumer) was redundant work; see orientedOverlayRect below.
+ */
+interface ElementTransformSnapshot {
+  matrix: DOMMatrix;
+  cs: CSSStyleDeclaration;
+}
+
+function readElementTransformSnapshot(
+  win: Window,
+  element: HTMLElement,
+): ElementTransformSnapshot | null {
+  const DOMMatrixCtor = (win as Window & typeof globalThis).DOMMatrix;
+  if (!DOMMatrixCtor) return null;
+  const cs = win.getComputedStyle(element);
+  try {
+    const matrix = new DOMMatrixCtor(cs.transform === "none" ? "" : cs.transform);
+    return { matrix, cs };
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * The element's live transform rotation, in DEGREES (screen/CSS convention, CW
+ * positive), decomposed from its transform matrix (rotation = atan2(b, a)).
+ * GSAP folds rotation and scale into the same matrix; this reads rotation only.
+ * Skew is ignored (does not affect atan2(b, a)).
+ */
+function rotationDegreesFromMatrix(matrix: DOMMatrix): number {
+  const a = Number.isFinite(matrix.a) ? matrix.a : 1;
+  const b = Number.isFinite(matrix.b) ? matrix.b : 0;
+  const deg = (Math.atan2(b, a) * 180) / Math.PI;
+  return Number.isFinite(deg) ? deg : 0;
+}
+
+/** Below this, orientedOverlayRect treats the element as unrotated and returns
+ *  the AABB directly (see its doc comment) — tight enough to only swallow
+ *  matrix-decomposition floating-point noise, never an actual rotation. */
+const ROTATION_GATE_EPSILON_DEG = 1e-4;
+
+/** iframe→overlay mapping basis shared by every overlay-geometry function. */
+interface OverlayRootScale {
+  iframeRect: DOMRect;
+  overlayRect: DOMRect;
+  rootScaleX: number;
+  rootScaleY: number;
+}
+
+/** The composition root element inside the preview doc (or null when absent). */
+function findOverlayRootElement(doc: Document | null): HTMLElement | null {
+  return doc?.querySelector<HTMLElement>("[data-composition-id]") ?? doc?.documentElement ?? null;
+}
+
+/**
+ * The root's effective width/height for scaling: prefer the composition's
+ * declared dimensions (data-width/data-height), which stay fixed while GSAP
+ * transforms mutate the measured rect; fall back to the measured rect. Null when
+ * unmeasurable.
+ */
+function resolveRootDimensions(root: HTMLElement | null): { width: number; height: number } | null {
+  if (!root) return null;
+  const rootRect = root.getBoundingClientRect();
+  const width = readPositiveDimension(root.getAttribute("data-width")) ?? rootRect.width;
+  const height = readPositiveDimension(root.getAttribute("data-height")) ?? rootRect.height;
+  if (!width || !height) return null;
+  return { width, height };
+}
+
+/**
+ * The iframe/overlay client rects and the iframe→root scale factors. Uses the
+ * composition's declared dimensions (data-width/data-height) for the scale
+ * instead of rootRect.width/height: when GSAP applies transforms (scale,
+ * translate) to the root, rootRect dimensions change but the composition's
+ * canonical size stays fixed, and using rootRect misaligns the overlay during
+ * animated playback. Returns null when the geometry is unmeasurable.
+ */
+function computeOverlayRootScale(
   overlayEl: HTMLDivElement,
   iframe: HTMLIFrameElement,
-  element: HTMLElement,
-): OverlayRect | null {
+  doc: Document | null,
+): OverlayRootScale | null {
   const iframeRect = iframe.getBoundingClientRect();
   const overlayRect = overlayEl.getBoundingClientRect();
-  const doc = iframe.contentDocument;
-  const root =
-    doc?.querySelector<HTMLElement>("[data-composition-id]") ?? doc?.documentElement ?? null;
-  const rootRect = root?.getBoundingClientRect();
-  // Use the composition's declared dimensions (data-width/data-height) for scale
-  // calculation instead of rootRect.width/height. When GSAP applies transforms
-  // (scale, translate) to the root element, rootRect dimensions change but the
-  // composition's canonical size stays the same. Using rootRect causes overlay
-  // misalignment during animated playback.
-  const declaredWidth = readPositiveDimension(root?.getAttribute("data-width") ?? null);
-  const declaredHeight = readPositiveDimension(root?.getAttribute("data-height") ?? null);
-  const rootWidth = declaredWidth ?? rootRect?.width;
-  const rootHeight = declaredHeight ?? rootRect?.height;
-  if (!rootWidth || !rootHeight || !rootRect) return null;
+  const dims = resolveRootDimensions(findOverlayRootElement(doc));
+  if (!dims) return null;
+  return {
+    iframeRect,
+    overlayRect,
+    rootScaleX: iframeRect.width / dims.width,
+    rootScaleY: iframeRect.height / dims.height,
+  };
+}
+
+function toOverlayRect(
+  overlayEl: HTMLDivElement,
+  iframe: HTMLIFrameElement,
+  element: HTMLElement,
+  precomputedScale?: OverlayRootScale | null,
+): OverlayRect | null {
+  const scale =
+    precomputedScale ?? computeOverlayRootScale(overlayEl, iframe, iframe.contentDocument);
+  if (!scale) return null;
+  const { iframeRect, overlayRect, rootScaleX, rootScaleY } = scale;
 
   const elementRect = element.getBoundingClientRect();
-  const rootScaleX = iframeRect.width / rootWidth;
-  const rootScaleY = iframeRect.height / rootHeight;
   const sourceBoundary = findSourceBoundary(element);
   const sourceBoundaryRect = sourceBoundary?.getBoundingClientRect();
   const editScale = resolveDomEditCoordinateScale({
@@ -144,7 +236,163 @@ export function toOverlayRect(
   };
 }
 
+/** Which physical corner of the (possibly rotated) element a resize handle keeps
+ *  fixed: NW grabs the top-left, so the bottom-right (se) is the anchor, etc. */
+export type FixedCorner = "nw" | "ne" | "sw" | "se";
+
+/** Distance between two overlay-px corner points — the edge-length math
+ *  orientedOverlayRect uses to turn corners into a width/height. Exported so a
+ *  caller already holding raw corners (e.g. a resize gesture mid-measurement)
+ *  can derive the same dimensions without a second orientedOverlayRect call. */
+export function cornerEdgeLength(a: { x: number; y: number }, b: { x: number; y: number }): number {
+  return Math.hypot(b.x - a.x, b.y - a.y);
+}
+
+/**
+ * The centroid (rendered center) of the four transformed corners from
+ * `elementCornerOverlayPoints`, in overlay px. This is the element's true rotation
+ * center — the point a center-anchored resize keeps planted.
+ */
+export function overlayCornersCentroid(corners: Record<FixedCorner, { x: number; y: number }>): {
+  x: number;
+  y: number;
+} {
+  return {
+    x: (corners.nw.x + corners.ne.x + corners.se.x + corners.sw.x) / 4,
+    y: (corners.nw.y + corners.ne.y + corners.se.y + corners.sw.y) / 4,
+  };
+}
+
+/**
+ * The element's border-box corners in OVERLAY coordinates, honoring its live
+ * transform (rotation/skew/scale) — NOT the axis-aligned getBoundingClientRect.
+ * A rotated element's four visual corners are the transformed local box corners.
+ * Uses the same iframe→overlay root scale as toOverlayRect so the returned
+ * points share that function's coordinate space. Returns null when the
+ * geometry is unmeasurable.
+ */
+export function elementCornerOverlayPoints(
+  overlayEl: HTMLDivElement,
+  iframe: HTMLIFrameElement,
+  element: HTMLElement,
+  precomputedScale?: OverlayRootScale | null,
+  precomputedTransform?: ElementTransformSnapshot | null,
+): Record<FixedCorner, { x: number; y: number }> | null {
+  const win = iframe.contentWindow;
+  const doc = iframe.contentDocument;
+  if (!win || !doc) return null;
+  const DOMPointCtor = (win as Window & typeof globalThis).DOMPoint;
+  if (!DOMPointCtor) return null;
+
+  const scale = precomputedScale ?? computeOverlayRootScale(overlayEl, iframe, doc);
+  if (!scale) return null;
+  const { iframeRect, overlayRect, rootScaleX, rootScaleY } = scale;
+
+  // The element's local border box maps to viewport coords by the SAME transform
+  // matrix the browser used for its BCR. We recover the transform's screen-space
+  // action from the BCR: transformPoint(localCorner - origin) gives a corner
+  // RELATIVE to the transformed origin. We anchor those relative corners to the
+  // BCR by matching the AABB of the transformed corners to the real BCR — the
+  // constant offset cancels in the before/after difference the caller takes, but
+  // we resolve it fully here so callers can also read absolute overlay positions.
+  const transform = precomputedTransform ?? readElementTransformSnapshot(win, element);
+  if (!transform) return null;
+  const { matrix, cs } = transform;
+  const w = element.offsetWidth;
+  const h = element.offsetHeight;
+  const originParts = cs.transformOrigin.split(" ").map((p) => Number.parseFloat(p));
+  const ox = Number.isFinite(originParts[0]!) ? originParts[0]! : w / 2;
+  const oy = Number.isFinite(originParts[1]!) ? originParts[1]! : h / 2;
+  const rel = (lx: number, ly: number): { x: number; y: number } => {
+    const p = matrix.transformPoint(new DOMPointCtor(lx - ox, ly - oy));
+    return { x: p.x, y: p.y };
+  };
+  const relCorners = {
+    nw: rel(0, 0),
+    ne: rel(w, 0),
+    se: rel(w, h),
+    sw: rel(0, h),
+  };
+  // Recover the absolute viewport position by matching to the element's BCR:
+  // the relative corners' AABB min corresponds to the BCR's top-left.
+  const xs = [relCorners.nw.x, relCorners.ne.x, relCorners.se.x, relCorners.sw.x];
+  const ys = [relCorners.nw.y, relCorners.ne.y, relCorners.se.y, relCorners.sw.y];
+  const bcr = element.getBoundingClientRect();
+  const dx = bcr.left - Math.min(...xs);
+  const dy = bcr.top - Math.min(...ys);
+  const toOverlay = (pt: { x: number; y: number }): { x: number; y: number } => ({
+    x: iframeRect.left - overlayRect.left + (pt.x + dx) * rootScaleX,
+    y: iframeRect.top - overlayRect.top + (pt.y + dy) * rootScaleY,
+  });
+  return {
+    nw: toOverlay(relCorners.nw),
+    ne: toOverlay(relCorners.ne),
+    se: toOverlay(relCorners.se),
+    sw: toOverlay(relCorners.sw),
+  };
+}
+
+/**
+ * The selection chrome's ORIENTED bounding box: the element's UNROTATED border box
+ * expressed in overlay coordinates (center-anchored left/top/width/height) plus the
+ * live rotation angle. Rendering that rect with `transform: rotate(angle)` about its
+ * center reproduces the element's real transformed corners exactly, so the border,
+ * corner dots, rotate handle, and crop pills all co-rotate with the object.
+ *
+ * Built from `elementCornerOverlayPoints` (the real transformed corners): the OBB
+ * center is the corner centroid, the unrotated width/height are the edge lengths, and
+ * left/top place the unrotated box so that rotating it about its center lands the
+ * corners back on the measured points. At angle 0 this equals `toOverlayRect` (the
+ * AABB and OBB coincide), so unrotated chrome is pixel-identical to today.
+ *
+ * Returns the plain AABB rect (angle 0) when the corner geometry can't be measured.
+ *
+ * Rotation gate: an unrotated element's OBB is numerically identical to its AABB
+ * (the comment above), so a cheap rotation read decides up front whether the
+ * (much pricier) corner-transform pass runs at all — for the overwhelming
+ * majority of selections, which aren't rotated, this call is just `toOverlayRect`
+ * plus one getComputedStyle/DOMMatrix read. The root scale and the transform
+ * snapshot are each computed once per call and threaded into both the rotation
+ * read and the corner math, instead of every helper re-measuring independently.
+ */
+export function orientedOverlayRect(
+  overlayEl: HTMLDivElement,
+  iframe: HTMLIFrameElement,
+  element: HTMLElement,
+): OverlayRect | null {
+  const scale = computeOverlayRootScale(overlayEl, iframe, iframe.contentDocument);
+  if (!scale) return null;
+  const base = toOverlayRect(overlayEl, iframe, element, scale);
+  if (!base) return null;
+
+  const win = iframe.contentWindow;
+  const transform = win ? readElementTransformSnapshot(win, element) : null;
+  const angle = transform ? rotationDegreesFromMatrix(transform.matrix) : 0;
+  if (Math.abs(angle) < ROTATION_GATE_EPSILON_DEG) return base;
+
+  const corners = elementCornerOverlayPoints(overlayEl, iframe, element, scale, transform);
+  if (!corners) return base;
+  // Unrotated edge lengths (in overlay px): nw→ne is the width, nw→sw the height.
+  const width = cornerEdgeLength(corners.nw, corners.ne);
+  const height = cornerEdgeLength(corners.nw, corners.sw);
+  const centerX = (corners.nw.x + corners.se.x) / 2;
+  const centerY = (corners.nw.y + corners.se.y) / 2;
+  if (!Number.isFinite(width) || !Number.isFinite(height) || width <= 0 || height <= 0) {
+    return base;
+  }
+  return {
+    left: centerX - width / 2,
+    top: centerY - height / 2,
+    width,
+    height,
+    editScaleX: base.editScaleX,
+    editScaleY: base.editScaleY,
+    angle,
+  };
+}
+
 const OVERLAY_RECT_EPSILON_PX = 0.5;
+const OVERLAY_RECT_ANGLE_EPSILON_DEG = 0.1;
 
 export function rectsEqual(a: OverlayRect | null, b: OverlayRect | null): boolean {
   if (a === b) return true;
@@ -155,7 +403,8 @@ export function rectsEqual(a: OverlayRect | null, b: OverlayRect | null): boolea
     Math.abs(a.width - b.width) < OVERLAY_RECT_EPSILON_PX &&
     Math.abs(a.height - b.height) < OVERLAY_RECT_EPSILON_PX &&
     Math.abs(a.editScaleX - b.editScaleX) < 0.001 &&
-    Math.abs(a.editScaleY - b.editScaleY) < 0.001
+    Math.abs(a.editScaleY - b.editScaleY) < 0.001 &&
+    Math.abs((a.angle ?? 0) - (b.angle ?? 0)) < OVERLAY_RECT_ANGLE_EPSILON_DEG
   );
 }
 
@@ -228,6 +477,17 @@ export function groupAwareOverlayRect(
   return { ...union, editScaleX: rect.editScaleX, editScaleY: rect.editScaleY };
 }
 
+/** Groups stay axis-aligned unions; ordinary elements keep their oriented box. */
+export function orientedGroupAwareOverlayRect(
+  overlayEl: HTMLDivElement,
+  iframe: HTMLIFrameElement,
+  el: HTMLElement,
+): OverlayRect | null {
+  return el.hasAttribute("data-hf-group")
+    ? groupAwareOverlayRect(overlayEl, iframe, el)
+    : orientedOverlayRect(overlayEl, iframe, el);
+}
+
 export function filterNestedDomEditGroupItems<T extends { element: HTMLElement }>(items: T[]): T[] {
   return items.filter(
     (item) => !items.some((other) => other !== item && other.element.contains(item.element)),

package/src/components/editor/domEditOverlayGestures.ts

@@ -13,10 +13,20 @@ import type { PreviewMouseDownOptions } from "../../hooks/usePreviewInteraction"
 
 export type GestureKind = "drag" | "resize" | "rotate";
 
+/** Which corner handle initiated a resize gesture. */
+export type ResizeHandle = "nw" | "ne" | "sw" | "se";
+
 export const BLOCKED_MOVE_THRESHOLD_PX = 4;
-const MIN_RESIZE_EDGE_PX = 20;
 const ROTATION_COMMIT_EPSILON_DEGREES = 0.05;
 const ROTATION_SNAP_DEGREES = 15;
+/**
+ * Above this rotation, resize/move edge-snapping is bypassed. Industry editors
+ * (tldraw/Figma) don't edge-snap rotated boxes — the snap targets are axis-aligned
+ * AABBs, so snapping a rotated box's AABB to them shifts the box in a way the user
+ * can't predict; a wrong snap is worse than none. Rotation ~0 keeps snapping exactly
+ * as before.
+ */
+export const ROTATED_SNAP_BYPASS_DEGREES = 0.5;
 
 export interface GestureState {
   kind: GestureKind;
@@ -62,6 +72,19 @@ export interface GestureState {
   snapContext?: SnapContext;
   lastSnappedDx?: number;
   lastSnappedDy?: number;
+  /** Corner the resize gesture grabbed (resize gestures only). */
+  resizeHandle?: ResizeHandle;
+  /** Last anchoring translation applied during a corner resize (overlay px). */
+  lastResizeAnchor?: { dx: number; dy: number };
+  /**
+   * The element's rendered CENTER in overlay px at gesture start (the centroid of
+   * its four real — possibly rotated — corners). A center-anchored resize keeps this
+   * point pinned; the per-frame anchor translation is computed as the shift of this
+   * exact center, not an AABB width/height delta (which only holds the center still
+   * when the element grows symmetrically from an unrotated layout box). Undefined
+   * when the corner geometry can't be measured (member creation still succeeded).
+   */
+  resizeFixedCenterStart?: { x: number; y: number };
 }
 
 export interface GroupGestureState {
@@ -89,48 +112,23 @@ export function focusDomEditOverlayElement(element: FocusableDomEditOverlay | nu
   element?.focus({ preventScroll: true });
 }
 
-export function resolveDomEditResizeGesture(input: {
+/**
+ * Overlay-px translation that keeps the element's CENTER fixed while a corner
+ * resizes: a CSS width/height change grows the layout box from its top-left, so
+ * the center drifts by half the size change on each axis; translating back by that
+ * half-delta re-pins the center. This is the UNROTATED (AABB) fallback used only
+ * when the element's real transformed corners can't be measured — the primary path
+ * pins the measured center (rotation-safe) in useDomEditOverlayGestures.
+ */
+export function resolveResizeCenterAnchorOffset(input: {
   originWidth: number;
   originHeight: number;
-  actualWidth: number;
-  actualHeight: number;
-  scaleX: number;
-  scaleY: number;
-  // Rendered-per-CSS-pixel factor of the element itself (its live GSAP scale).
-  // The CSS width/height the draft writes get multiplied by this on screen, so
-  // the cursor delta must be divided by it — otherwise the box outruns the
-  // pointer on a rescaled element and snaps back on release. Defaults to 1.
-  contentScaleX?: number;
-  contentScaleY?: number;
-  dx: number;
-  dy: number;
-  uniform: boolean;
-}): { overlayWidth: number; overlayHeight: number; width: number; height: number } {
-  const scaleX = input.scaleX > 0 ? input.scaleX : 1;
-  const scaleY = input.scaleY > 0 ? input.scaleY : 1;
-  const contentScaleX =
-    input.contentScaleX !== undefined && input.contentScaleX > 0 ? input.contentScaleX : 1;
-  const contentScaleY =
-    input.contentScaleY !== undefined && input.contentScaleY > 0 ? input.contentScaleY : 1;
-
-  if (input.uniform) {
-    const deltaX = input.dx / (scaleX * contentScaleX);
-    const deltaY = input.dy / (scaleY * contentScaleY);
-    const delta = Math.abs(deltaX) >= Math.abs(deltaY) ? deltaX : deltaY;
-    const side = Math.max(1, Math.max(input.actualWidth, input.actualHeight) + delta);
-    return {
-      overlayWidth: Math.max(MIN_RESIZE_EDGE_PX, side * scaleX * contentScaleX),
-      overlayHeight: Math.max(MIN_RESIZE_EDGE_PX, side * scaleY * contentScaleY),
-      width: side,
-      height: side,
-    };
-  }
-
+  overlayWidth: number;
+  overlayHeight: number;
+}): { dx: number; dy: number } {
   return {
-    overlayWidth: Math.max(MIN_RESIZE_EDGE_PX, input.originWidth + input.dx),
-    overlayHeight: Math.max(MIN_RESIZE_EDGE_PX, input.originHeight + input.dy),
-    width: Math.max(1, input.actualWidth + input.dx / (scaleX * contentScaleX)),
-    height: Math.max(1, input.actualHeight + input.dy / (scaleY * contentScaleY)),
+    dx: (input.originWidth - input.overlayWidth) / 2,
+    dy: (input.originHeight - input.overlayHeight) / 2,
   };
 }
 
@@ -214,7 +212,12 @@ export type UseDomEditOverlayGesturesOptions = {
     (updates: DomEditGroupPathOffsetCommit[]) => Promise<void> | void
   >;
   onBoxSizeCommitRef: RefObject<
-    (s: DomEditSelection, n: { width: number; height: number }) => Promise<void> | void
+    (
+      s: DomEditSelection,
+      n: { width: number; height: number },
+      offset?: { x: number; y: number },
+      restore?: () => void,
+    ) => Promise<void> | void
   >;
   onRotationCommitRef: RefObject<
     (s: DomEditSelection, n: { angle: number }) => Promise<void> | void

package/src/components/editor/domEditOverlayStartGesture.ts

@@ -20,15 +20,19 @@ import {
 } from "./manualEdits";
 import {
   type OverlayRect,
+  elementCornerOverlayPoints,
   filterNestedDomEditGroupItems,
+  overlayCornersCentroid,
   selectionCacheKey,
 } from "./domEditOverlayGeometry";
 import {
   type GestureKind,
   type GestureState,
+  type ResizeHandle,
   type UseDomEditOverlayGesturesOptions,
 } from "./domEditOverlayGestures";
 import { collectSnapContext, buildExcludeElements } from "./snapTargetCollection";
+import { logResize, resetResizeMoveLog } from "../../utils/resizeDebug";
 
 export function startGroupDrag(
   e: React.PointerEvent<HTMLElement>,
@@ -100,7 +104,11 @@ export function startGesture(
   kind: GestureKind,
   e: React.PointerEvent<HTMLElement>,
   opts: UseDomEditOverlayGesturesOptions,
-  options?: { selection?: DomEditSelection; rect?: OverlayRect | null },
+  options?: {
+    selection?: DomEditSelection;
+    rect?: OverlayRect | null;
+    resizeHandle?: ResizeHandle;
+  },
 ): boolean {
   const sel = options?.selection ?? opts.selectionRef.current;
   const rect = options?.rect ?? opts.overlayRectRef.current;
@@ -173,7 +181,29 @@ export function startGesture(
     initialPathOffset = result.member.initialPathOffset;
     manualEditDragToken = result.member.gestureToken;
   } else {
-    manualEditDragToken = beginStudioManualEditGesture(sel.element);
+    // Center-anchored corner resize (CapCut model): the element scales about its
+    // CENTER, which stays planted. All four corners behave identically, so EVERY
+    // corner needs the manual-offset member that translates the element to re-pin
+    // its center per frame (the memberless else-branch is only a defensive fallback
+    // if member creation fails, e.g. the element can't take a manual offset).
+    const needsAnchorOffset = kind === "resize" && sel.capabilities.canApplyManualOffset;
+    if (needsAnchorOffset) {
+      const result = createManualOffsetDragMember({
+        key: selectionCacheKey(sel),
+        selection: sel,
+        element: sel.element,
+        rect,
+      });
+      if (result.ok) {
+        pathOffsetMember = result.member;
+        initialPathOffset = result.member.initialPathOffset;
+        manualEditDragToken = result.member.gestureToken;
+      } else {
+        manualEditDragToken = beginStudioManualEditGesture(sel.element);
+      }
+    } else {
+      manualEditDragToken = beginStudioManualEditGesture(sel.element);
+    }
   }
 
   const overlayBounds = overlayEl?.getBoundingClientRect();
@@ -181,6 +211,17 @@ export function startGesture(
   const centerY = (overlayBounds?.top ?? 0) + rect.top + rect.height / 2;
 
   const iframe = opts.iframeRef.current;
+
+  // For a center-anchored corner resize, capture the element's rendered CENTER (the
+  // centroid of its four real, rotation-aware corners) now, so per-frame anchoring
+  // can pin that exact point instead of an axis-aligned width/height delta (which
+  // only holds the center still when the element grows symmetrically from an
+  // unrotated layout box). Present whenever an anchor member exists (all corners).
+  let resizeFixedCenterStart: { x: number; y: number } | undefined;
+  if (kind === "resize" && pathOffsetMember && overlayEl && iframe) {
+    const corners = elementCornerOverlayPoints(overlayEl, iframe, sel.element);
+    if (corners) resizeFixedCenterStart = overlayCornersCentroid(corners);
+  }
   const snapContext =
     (kind === "drag" || kind === "resize") && overlayEl && iframe
       ? collectSnapContext({
@@ -219,6 +260,25 @@ export function startGesture(
     resizeAnchor,
     manualEditDragToken,
     snapContext,
+    resizeHandle: kind === "resize" ? (options?.resizeHandle ?? "se") : undefined,
+    resizeFixedCenterStart,
   };
+  if (kind === "resize") {
+    resetResizeMoveLog();
+    logResize("start", {
+      handle: options?.resizeHandle ?? "se",
+      pointer: { x: e.clientX, y: e.clientY },
+      center: { x: centerX, y: centerY },
+      origin: { left: rect.left, top: rect.top, w: rect.width, h: rect.height },
+      actual: { w: actualWidth, h: actualHeight },
+      editScale: { x: rect.editScaleX, y: rect.editScaleY },
+      contentScale: { x: contentScaleX, y: contentScaleY },
+      rotation: rotation.angle,
+      hasOffsetMember: !!pathOffsetMember,
+      fixedCenterStart: resizeFixedCenterStart ?? null,
+      initialBoxSize: opts.gestureRef.current?.initialBoxSize ?? null,
+      initialInlineStyle: sel.element.getAttribute("style"),
+    });
+  }
   return true;
 }