@hyperframes/studio 0.7.55 → 0.7.57

package/src/components/editor/useDomEditNudge.ts

@@ -0,0 +1,254 @@
+/**
+ * Canvas arrow-key nudge for DomEditOverlay: arrows move the selected
+ * element(s) 1 composition px, Shift = 10. Each keypress previews through the
+ * same GSAP/CSS channel as a drag draft, and the burst commits ONCE through
+ * the same onPathOffsetCommit / onGroupPathOffsetCommit path a drag drop uses
+ * — so a nudge burst is exactly a tiny drag: one source patch, one undo entry.
+ */
+import { useCallback, useEffect, useRef, type RefObject } from "react";
+import { useMountEffect } from "../../hooks/useMountEffect";
+import { isEditableTarget } from "../../utils/timelineDiscovery";
+import { acquireCanvasNudgeKeys } from "../../utils/canvasNudgeGate";
+import type { DomEditSelection } from "./domEditing";
+import {
+  type GroupOverlayItem,
+  type OverlayRect,
+  filterNestedDomEditGroupItems,
+} from "./domEditOverlayGeometry";
+import type {
+  BlockedMoveState,
+  DomEditGroupPathOffsetCommit,
+  GestureState,
+  GroupGestureState,
+} from "./domEditOverlayGestures";
+import {
+  applyManualOffsetNudgeCommit,
+  applyManualOffsetNudgeDraft,
+  createManualOffsetDragMember,
+  endManualOffsetDragMembers,
+  restoreManualOffsetDragMembers,
+  type ManualOffsetDragMember,
+} from "./manualOffsetDrag";
+import { isStudioManualEditGestureCurrent, restoreStudioPathOffset } from "./manualEdits";
+import {
+  CANVAS_NUDGE_COMMIT_DEBOUNCE_MS,
+  canCanvasNudgeTargets,
+  resolveCanvasNudgeDelta,
+} from "./domEditNudge";
+
+interface NudgeSession {
+  members: ManualOffsetDragMember[];
+  isGroup: boolean;
+  /** Accumulated delta of the burst, in composition px. */
+  accum: { x: number; y: number };
+  timer: ReturnType<typeof setTimeout> | null;
+}
+
+export interface UseDomEditNudgeParams {
+  selection: DomEditSelection | null;
+  groupSelections: DomEditSelection[];
+  allowCanvasMovement: boolean;
+  selectionRef: RefObject<DomEditSelection | null>;
+  overlayRectRef: RefObject<OverlayRect | null>;
+  groupOverlayItemsRef: RefObject<GroupOverlayItem[]>;
+  gestureRef: RefObject<GestureState | null>;
+  groupGestureRef: RefObject<GroupGestureState | null>;
+  blockedMoveRef: RefObject<BlockedMoveState | null>;
+  onManualDragStartRef: RefObject<(() => void) | undefined>;
+  onPathOffsetCommitRef: RefObject<
+    (
+      s: DomEditSelection,
+      n: { x: number; y: number },
+      m?: { altKey?: boolean },
+    ) => Promise<void> | void
+  >;
+  onGroupPathOffsetCommitRef: RefObject<
+    (updates: DomEditGroupPathOffsetCommit[]) => Promise<void> | void
+  >;
+}
+
+type NudgeTarget = {
+  key: string;
+  selection: DomEditSelection;
+  element: HTMLElement;
+  rect: OverlayRect;
+};
+
+/**
+ * A selection's stable identity, not its object reference. A parent that
+ * doesn't memoize the selection it passes down hands us a new object every
+ * render for the SAME element — keying an effect on the object itself would
+ * then re-fire on every render instead of on an actual selection change.
+ *
+ * All discriminators are folded in (id / hfId / selector / selectorIndex /
+ * label), not just the first present one: two id-less siblings can share a
+ * selector, so `id ?? selector ?? label` collapsed them to the same key —
+ * selecting sibling B mid-burst then didn't flush A's pending nudge, so the
+ * next arrow kept moving A. selectorIndex is the discriminator that separates
+ * them. The parts are only ever compared for equality (never parsed back),
+ * so they're joined on a NUL delimiter — a byte no discriminator can contain,
+ * so distinct selections stay distinct even when a value (e.g. a label) holds
+ * a space. It's written as the escape "\u0000", not a literal 0x00 byte, so
+ * this source file stays text (a raw NUL makes git treat it as binary).
+ */
+function selectionIdentityKey(selection: DomEditSelection | null): string {
+  if (!selection) return "";
+  return [
+    selection.id ?? "",
+    selection.hfId ?? "",
+    selection.selector ?? "",
+    selection.selectorIndex ?? "",
+    selection.label,
+  ].join("\u0000");
+}
+
+function groupSelectionsIdentityKey(selections: DomEditSelection[]): string {
+  return selections.map(selectionIdentityKey).join(" ");
+}
+
+/** Drag members for a multi-selection nudge (same snapshot a group drag uses). */
+function resolveGroupNudgeTargets(groupItems: GroupOverlayItem[]): NudgeTarget[] | null {
+  if (!canCanvasNudgeTargets(groupItems.map((item) => item.selection))) return null;
+  return filterNestedDomEditGroupItems(groupItems);
+}
+
+/** Drag member for a single-selection nudge, or null when it can't be moved. */
+function resolveSingleNudgeTarget(
+  sel: DomEditSelection | null,
+  rect: OverlayRect | null,
+): NudgeTarget[] | null {
+  if (!sel || !rect || !sel.capabilities.canApplyManualOffset || !sel.element.isConnected) {
+    return null;
+  }
+  return [{ key: sel.id ?? sel.selector ?? sel.label, selection: sel, element: sel.element, rect }];
+}
+
+/**
+ * True when a keydown must not start/extend a nudge: canvas movement disabled,
+ * a pointer gesture already owns the element, or the user is typing in a field.
+ */
+function shouldIgnoreNudgeKey(p: UseDomEditNudgeParams, event: KeyboardEvent): boolean {
+  if (!p.allowCanvasMovement || event.defaultPrevented) return true;
+  if (p.gestureRef.current || p.groupGestureRef.current || p.blockedMoveRef.current) return true;
+  return isEditableTarget(event.target);
+}
+
+export function useDomEditNudge(params: UseDomEditNudgeParams): { flushNudge: () => void } {
+  const sessionRef = useRef<NudgeSession | null>(null);
+  const paramsRef = useRef(params);
+  paramsRef.current = params;
+
+  // Commit the pending burst: one source write per burst = one undo entry.
+  // Mirrors the drag's onPointerUp — same commit callbacks, same failure
+  // restore, same member teardown.
+  const commitSession = () => {
+    const session = sessionRef.current;
+    if (!session) return;
+    sessionRef.current = null;
+    if (session.timer) clearTimeout(session.timer);
+    const updates: DomEditGroupPathOffsetCommit[] = session.members.map((member) => ({
+      selection: member.selection,
+      next: applyManualOffsetNudgeCommit(member, session.accum),
+    }));
+    const p = paramsRef.current;
+    const commit = session.isGroup
+      ? p.onGroupPathOffsetCommitRef.current(updates)
+      : p.onPathOffsetCommitRef.current(updates[0].selection, updates[0].next);
+    void Promise.resolve(commit)
+      .catch(() => {
+        for (const member of session.members) {
+          if (isStudioManualEditGestureCurrent(member.element, member.gestureToken)) {
+            restoreStudioPathOffset(member.element, member.initialPathOffset);
+          }
+        }
+      })
+      .finally(() => endManualOffsetDragMembers(session.members));
+  };
+  const commitSessionRef = useRef(commitSession);
+  commitSessionRef.current = commitSession;
+
+  // Build drag members for the current target set — the same member snapshot a
+  // pointer drag starts from (startGesture / startGroupDrag), so the nudge
+  // commit converts offsets → GSAP x/y with identical math.
+  const beginSession = (): NudgeSession | null => {
+    const p = paramsRef.current;
+    const groupItems = p.groupOverlayItemsRef.current;
+    const isGroup = groupItems.length > 1;
+    const targets = isGroup
+      ? resolveGroupNudgeTargets(groupItems)
+      : resolveSingleNudgeTarget(p.selectionRef.current, p.overlayRectRef.current);
+    if (!targets) return null;
+    const members: ManualOffsetDragMember[] = [];
+    for (const target of targets) {
+      const result = createManualOffsetDragMember(target);
+      if (!result.ok) {
+        restoreManualOffsetDragMembers(members);
+        return null;
+      }
+      members.push(result.member);
+    }
+    if (members.length === 0) return null;
+    // Same side effect a drag start has (pauses preview playback).
+    p.onManualDragStartRef.current?.();
+    return { members, isGroup, accum: { x: 0, y: 0 }, timer: null };
+  };
+
+  const handleKeyDown = (event: KeyboardEvent) => {
+    const p = paramsRef.current;
+    if (shouldIgnoreNudgeKey(p, event)) return;
+    const delta = resolveCanvasNudgeDelta(event);
+    if (!delta) return;
+    const session = sessionRef.current ?? beginSession();
+    if (!session) return;
+    sessionRef.current = session;
+    event.preventDefault();
+    session.accum = { x: session.accum.x + delta.dx, y: session.accum.y + delta.dy };
+    for (const member of session.members) applyManualOffsetNudgeDraft(member, session.accum);
+    if (session.timer) clearTimeout(session.timer);
+    session.timer = setTimeout(() => commitSessionRef.current(), CANVAS_NUDGE_COMMIT_DEBOUNCE_MS);
+  };
+  const handleKeyDownRef = useRef(handleKeyDown);
+  handleKeyDownRef.current = handleKeyDown;
+
+  useMountEffect(() => {
+    const listener = (event: KeyboardEvent) => handleKeyDownRef.current(event);
+    // Capture, like the other app-level key handlers, so a focused panel
+    // can't swallow the nudge before it reaches us.
+    window.addEventListener("keydown", listener, true);
+    return () => {
+      window.removeEventListener("keydown", listener, true);
+      commitSessionRef.current();
+    };
+  });
+
+  // Selection change ends the burst: commit to the OLD target before the
+  // arrows start moving the new one. Keyed on the selection's stable identity
+  // (id/selector/label), NOT the object reference — a parent that re-creates
+  // the selection object on every render (without memoizing it) must not
+  // flush a burst that's still in progress for the same element.
+  const selectionKey = selectionIdentityKey(params.selection);
+  const groupSelectionsKey = groupSelectionsIdentityKey(params.groupSelections);
+  // eslint-disable-next-line no-restricted-syntax
+  useEffect(() => () => commitSessionRef.current(), [selectionKey, groupSelectionsKey]);
+
+  // Claim the arrow keys from the playback frame-step while the selection is
+  // nudgeable (see canvasNudgeGate — listener order is mount-dependent, so
+  // preventDefault alone can't arbitrate).
+  // eslint-disable-next-line no-restricted-syntax
+  useEffect(() => {
+    const targets =
+      params.groupSelections.length > 1
+        ? params.groupSelections
+        : params.selection
+          ? [params.selection]
+          : [];
+    if (!params.allowCanvasMovement || !canCanvasNudgeTargets(targets)) return;
+    return acquireCanvasNudgeKeys();
+  }, [params.selection, params.groupSelections, params.allowCanvasMovement]);
+
+  // A pointer gesture supersedes a pending burst — DomEditOverlay flushes on
+  // pointerdown-capture so the drag's member snapshot starts from the nudged,
+  // committed position.
+  const flushNudge = useCallback(() => commitSessionRef.current(), []);
+  return { flushNudge };
+}

package/src/components/editor/useDomEditOverlayGestures.ts

@@ -4,7 +4,6 @@
  * Owns: onPointerMove, onPointerUp, clearPointerState.
  * startGesture and startGroupDrag live in domEditOverlayStartGesture.ts.
  */
-import { setElementGsapPosition } from "../../utils/elementGsap";
 import type { RefObject } from "react";
 import { type DomEditSelection } from "./domEditing";
 import {
@@ -30,36 +29,29 @@ import {
 import {
   type GroupOverlayItem,
   type OverlayRect,
+  orientedOverlayRect,
   resolveDomEditGroupOverlayRect,
-  toOverlayRect,
 } from "./domEditOverlayGeometry";
 import {
   BLOCKED_MOVE_THRESHOLD_PX,
   type GestureKind,
   type GestureState,
   type GroupGestureState,
+  type ResizeHandle,
   type UseDomEditOverlayGesturesOptions,
+  ROTATED_SNAP_BYPASS_DEGREES,
   hasDomEditRotationChanged,
-  resolveDomEditResizeGesture,
   resolveDomEditRotationGesture,
 } from "./domEditOverlayGestures";
+import { resolveCenterResizeSize } from "./domEditResizeLocal";
+import { resolveResizeDraftRect } from "./resizeDraft";
 import {
   startGesture as _startGesture,
   startGroupDrag as _startGroupDrag,
 } from "./domEditOverlayStartGesture";
 import { hugRectForElement } from "./domEditOverlayCrop";
-import {
-  resolveSnapAdjustment,
-  resolveResizeSnapAdjustment,
-  resolveEquidistanceGuides,
-  SNAP_THRESHOLD_PX,
-} from "./snapEngine";
-/** Undo the resize draft's anchor pin: snap GSAP x/y back to the gesture base. */
-function restoreResizeAnchorPin(element: HTMLElement, g: GestureState): void {
-  const anchor = g.resizeAnchor;
-  if (!anchor || (anchor.pinX === 0 && anchor.pinY === 0)) return;
-  setElementGsapPosition(element, anchor.baseGsapX, anchor.baseGsapY);
-}
+import { resolveSnapAdjustment, resolveEquidistanceGuides, SNAP_THRESHOLD_PX } from "./snapEngine";
+import { logResize, logResizeMove, logResizeSettle } from "../../utils/resizeDebug";
 
 export function createDomEditOverlayGestureHandlers(opts: UseDomEditOverlayGesturesOptions) {
   const setDraftOverlayRect = (next: OverlayRect) => {
@@ -73,6 +65,10 @@ export function createDomEditOverlayGestureHandlers(opts: UseDomEditOverlayGestu
       height: g.originHeight,
       editScaleX: g.editScaleX,
       editScaleY: g.editScaleY,
+      // Every draft rect must carry the element's rotation: the rotation wrapper
+      // renders rotate(overlayRect.angle), so an omitted angle straightens the
+      // chrome for the duration of the draft (the "straightens while moving" bug).
+      angle: g.actualRotation,
     });
   };
   const setDraftGroupOverlayItems = (next: GroupOverlayItem[]) => {
@@ -88,7 +84,11 @@ export function createDomEditOverlayGestureHandlers(opts: UseDomEditOverlayGestu
   const startGesture = (
     kind: GestureKind,
     e: React.PointerEvent<HTMLElement>,
-    options?: { selection?: DomEditSelection; rect?: OverlayRect | null },
+    options?: {
+      selection?: DomEditSelection;
+      rect?: OverlayRect | null;
+      resizeHandle?: ResizeHandle;
+    },
   ) => _startGesture(kind, e, opts, options);
 
   // fallow-ignore-next-line complexity
@@ -183,8 +183,7 @@ export function createDomEditOverlayGestureHandlers(opts: UseDomEditOverlayGestu
         actualAngle: g.actualRotation,
         snap: e.shiftKey,
       });
-      const draftViaGsap = applyRotationDraftViaGsap(sel.element, rotated.angle);
-      if (!draftViaGsap) {
+      if (!applyRotationDraftViaGsap(sel.element, rotated.angle)) {
         applyStudioRotationDraft(sel.element, rotated);
       }
       return;
@@ -192,7 +191,11 @@ export function createDomEditOverlayGestureHandlers(opts: UseDomEditOverlayGestu
 
     if (g.kind === "drag") {
       const sc = g.snapContext;
-      if (sc?.snapEnabled && sc.targets.length > 0) {
+      // Bypass edge-snapping for rotated elements — the snap targets and the
+      // snapped rect are axis-aligned, so snapping a rotated box's AABB shifts it
+      // unpredictably. Rotation ~0 keeps snapping exactly as before.
+      const dragRotated = Math.abs(g.actualRotation) >= ROTATED_SNAP_BYPASS_DEGREES;
+      if (!dragRotated && sc?.snapEnabled && sc.targets.length > 0) {
         // Snap the element's VISIBLE (crop-hugged) edges, not the full bounds.
         const movingRect = hugRectForElement(
           {
@@ -246,6 +249,7 @@ export function createDomEditOverlayGestureHandlers(opts: UseDomEditOverlayGestu
         height: g.originHeight,
         editScaleX: g.editScaleX,
         editScaleY: g.editScaleY,
+        angle: g.actualRotation,
       });
       if (box) {
         box.style.left = `${nextBoxLeft}px`;
@@ -255,90 +259,49 @@ export function createDomEditOverlayGestureHandlers(opts: UseDomEditOverlayGestu
     } else {
       if (!box) return;
 
-      const sc = g.snapContext;
-      if (sc?.snapEnabled && sc.targets.length > 0) {
-        const movingRect = {
-          left: g.originLeft,
-          top: g.originTop,
-          width: g.originWidth,
-          height: g.originHeight,
-        };
-        const allTargets = sc.compositionTarget
-          ? [...sc.targets, sc.compositionTarget]
-          : sc.targets;
-        const snap = resolveResizeSnapAdjustment({
-          movingRect,
-          proposedDx: dx,
-          proposedDy: dy,
-          targets: allTargets,
-          gridEdges: sc.gridEdges ?? undefined,
-          threshold: SNAP_THRESHOLD_PX,
-          disabled: e.altKey,
-        });
-        dx = snap.dx;
-        dy = snap.dy;
-        opts.snapGuidesRef.current = { guides: snap.guides, spacingGuides: [] };
-      }
-
-      const nextSize = resolveDomEditResizeGesture({
-        originWidth: g.originWidth,
-        originHeight: g.originHeight,
-        actualWidth: g.actualWidth,
-        actualHeight: g.actualHeight,
-        scaleX: g.editScaleX,
-        scaleY: g.editScaleY,
-        contentScaleX: g.contentScaleX,
-        contentScaleY: g.contentScaleY,
-        dx,
-        dy,
-        uniform: e.shiftKey,
+      // CENTER-ANCHORED size (CapCut model): the element scales proportionally
+      // about its CENTER — the scale is the pointer's RADIAL distance from the
+      // element center now over its distance at gesture start. Rotation-invariant
+      // (a distance ignores the angle) and continuous, so all four corners behave
+      // identically and there is no per-axis projection or edge-snapping. Base size
+      // is the element-local px size at gesture start (actualWidth/Height,
+      // GSAP-scale-aware). Corner drag is ALWAYS proportional; there is no
+      // free-form stretch gesture. Edge-snapping is intentionally NOT applied:
+      // with center anchoring both edges move symmetrically, so the corner-anchored
+      // snap math no longer holds — CapCut does not edge-snap during scale either.
+      const nextSize = resolveCenterResizeSize({
+        baseWidth: g.actualWidth,
+        baseHeight: g.actualHeight,
+        pointer: { x: e.clientX, y: e.clientY },
+        pointerStart: { x: g.startX, y: g.startY },
+        centerStart: { x: g.centerX, y: g.centerY },
       });
       applyStudioBoxSizeDraft(sel.element, nextSize);
-      // Pin the gesture anchor (top-left): with a live scale transform, the CSS
-      // size change shifts the rendered box around the element center. Measure
-      // the drift of the gesture-start corner and counter it via GSAP x/y —
-      // accumulated onto the previous pin so the correction converges instead
-      // of oscillating. The release-time position compensation re-measures the
-      // drop, so the pin composes with the commit.
-      const anchor = g.resizeAnchor;
-      if (anchor) {
-        const pinned = sel.element.getBoundingClientRect();
-        const nextPinX = anchor.pinX + (anchor.anchorX - pinned.x);
-        const nextPinY = anchor.pinY + (anchor.anchorY - pinned.y);
-        if (
-          setElementGsapPosition(
-            sel.element,
-            anchor.baseGsapX + nextPinX,
-            anchor.baseGsapY + nextPinY,
-          )
-        ) {
-          anchor.pinX = nextPinX;
-          anchor.pinY = nextPinY;
-        }
-      }
-      // Re-read BCR after applying dimensions. For elements with a GSAP
-      // scale transform and centered transform-origin the visual top-left
-      // drifts and the visual size diverges from the raw CSS size, so BCR
-      // is the only accurate source for both.
+
       const overlayEl = opts.overlayRef.current;
       const iframe = opts.iframeRef.current;
-      const refreshed = overlayEl && iframe ? toOverlayRect(overlayEl, iframe, sel.element) : null;
-      const overlayLeft = refreshed ? refreshed.left : g.originLeft;
-      const overlayTop = refreshed ? refreshed.top : g.originTop;
-      const overlayWidth = refreshed ? refreshed.width : nextSize.overlayWidth;
-      const overlayHeight = refreshed ? refreshed.height : nextSize.overlayHeight;
-      box.style.left = `${overlayLeft}px`;
-      box.style.top = `${overlayTop}px`;
-      box.style.width = `${overlayWidth}px`;
-      box.style.height = `${overlayHeight}px`;
-      setDraftOverlayRect({
-        left: overlayLeft,
-        top: overlayTop,
-        width: overlayWidth,
-        height: overlayHeight,
-        editScaleX: g.editScaleX,
-        editScaleY: g.editScaleY,
+      const measureOrientedRect = () =>
+        overlayEl && iframe ? orientedOverlayRect(overlayEl, iframe, sel.element) : null;
+
+      const draftRect = resolveResizeDraftRect(
+        g,
+        sel.element,
+        overlayEl,
+        iframe,
+        measureOrientedRect,
+      );
+      logResizeMove({
+        pointer: { x: e.clientX, y: e.clientY },
+        nextSize,
+        anchor: g.lastResizeAnchor ?? null,
+        draftRect,
+        liveInlineStyle: sel.element.getAttribute("style"),
       });
+      box.style.left = `${draftRect.left}px`;
+      box.style.top = `${draftRect.top}px`;
+      box.style.width = `${draftRect.width}px`;
+      box.style.height = `${draftRect.height}px`;
+      setDraftOverlayRect(draftRect);
     }
   };
 
@@ -414,9 +377,12 @@ export function createDomEditOverlayGestureHandlers(opts: UseDomEditOverlayGestu
     }
 
     if (g.kind === "resize" && movedDistance < BLOCKED_MOVE_THRESHOLD_PX) {
-      restoreResizeAnchorPin(sel.element, g);
       restoreStudioBoxSize(sel.element, g.initialBoxSize);
-      endStudioManualEditGesture(sel.element, g.manualEditDragToken);
+      if (g.pathOffsetMember) {
+        restoreManualOffsetDragMembers([g.pathOffsetMember]);
+      } else {
+        endStudioManualEditGesture(sel.element, g.manualEditDragToken);
+      }
       if (box) {
         box.style.width = `${g.originWidth}px`;
         box.style.height = `${g.originHeight}px`;
@@ -444,8 +410,7 @@ export function createDomEditOverlayGestureHandlers(opts: UseDomEditOverlayGestu
           restoreStudioRotation(sel.element, g.initialRotation);
         }
       };
-      const rotationChanged = hasDomEditRotationChanged(g.actualRotation, finalRotation.angle);
-      if (!rotationChanged) {
+      if (!hasDomEditRotationChanged(g.actualRotation, finalRotation.angle)) {
         restoreRotation();
         endStudioManualEditGesture(sel.element, g.manualEditDragToken);
         return;
@@ -464,10 +429,13 @@ export function createDomEditOverlayGestureHandlers(opts: UseDomEditOverlayGestu
           )
             restoreRotation();
         })
-        .finally(() => {
-          endStudioManualEditGesture(sel.element, g.manualEditDragToken);
-        });
+        .finally(() => endStudioManualEditGesture(sel.element, g.manualEditDragToken));
     } else if (g.kind === "drag") {
+      // A moved drag (taps returned earlier) must not let the release click
+      // re-select whatever now sits under the pointer — dropping over a
+      // higher-z element should keep the dragged element selected, not select
+      // the drop target. Mirrors the resize branch below.
+      opts.suppressNextBoxClickRef.current = true;
       const dx = g.lastSnappedDx ?? e.clientX - g.startX;
       const dy = g.lastSnappedDy ?? e.clientY - g.startY;
       if (!g.pathOffsetMember) {
@@ -483,6 +451,7 @@ export function createDomEditOverlayGestureHandlers(opts: UseDomEditOverlayGestu
         height: g.originHeight,
         editScaleX: g.editScaleX,
         editScaleY: g.editScaleY,
+        angle: g.actualRotation,
       });
       if (box) {
         box.style.left = `${nextBoxLeft}px`;
@@ -505,18 +474,45 @@ export function createDomEditOverlayGestureHandlers(opts: UseDomEditOverlayGestu
       opts.suppressNextBoxClickRef.current = true;
       const finalSize = readStudioBoxSize(sel.element);
       applyStudioBoxSize(sel.element, finalSize);
-      void Promise.resolve(opts.onBoxSizeCommitRef.current(sel, finalSize))
+      // Anchored corner resize (NW/NE/SW) also moved the element to keep the
+      // center planted. Land the size AND the anchor offset in a SINGLE
+      // box-size commit (one persist, one undo entry). The prior two-commit
+      // sequence re-stamped the element from source after the size-only persist
+      // but before the offset persist landed — that one frame (new size, old
+      // offset) was the release "jump". SE has no anchor member → size only.
+      const member = g.pathOffsetMember;
+      const anchor = g.lastResizeAnchor;
+      const finalOffset =
+        member && anchor && (anchor.dx !== 0 || anchor.dy !== 0)
+          ? applyManualOffsetDragCommit(member, anchor.dx, anchor.dy)
+          : null;
+      logResize("release", {
+        finalSize,
+        anchor: anchor ?? null,
+        finalOffset: finalOffset ?? null,
+        hasMember: !!member,
+        inlineStyle: sel.element.getAttribute("style"),
+      });
+      const restore = () => {
+        if (
+          !g.manualEditDragToken ||
+          !isStudioManualEditGestureCurrent(sel.element, g.manualEditDragToken)
+        )
+          return;
+        restoreStudioBoxSize(sel.element, g.initialBoxSize);
+        if (finalOffset) restoreStudioPathOffset(sel.element, g.initialPathOffset);
+      };
+      void Promise.resolve(
+        opts.onBoxSizeCommitRef.current(sel, finalSize, finalOffset ?? undefined, restore),
+      )
         .catch((error) => {
           console.error("resize commit failed", error);
-          if (
-            g.manualEditDragToken &&
-            isStudioManualEditGestureCurrent(sel.element, g.manualEditDragToken)
-          ) {
-            restoreResizeAnchorPin(sel.element, g);
-            restoreStudioBoxSize(sel.element, g.initialBoxSize);
-          }
         })
-        .finally(() => endStudioManualEditGesture(sel.element, g.manualEditDragToken));
+        .finally(() => {
+          if (member) endManualOffsetDragMembers([member]);
+          else endStudioManualEditGesture(sel.element, g.manualEditDragToken);
+        });
+      logResizeSettle(sel.element, "post-release");
     }
   };
 
@@ -534,9 +530,12 @@ export function createDomEditOverlayGestureHandlers(opts: UseDomEditOverlayGestu
       restoreGestureOverlayRect(g);
     }
     if (g?.mode === "box-size" && sel) {
-      restoreResizeAnchorPin(sel.element, g);
       restoreStudioBoxSize(sel.element, g.initialBoxSize);
-      endStudioManualEditGesture(sel.element, g.manualEditDragToken);
+      if (g.pathOffsetMember) {
+        restoreManualOffsetDragMembers([g.pathOffsetMember]);
+      } else {
+        endStudioManualEditGesture(sel.element, g.manualEditDragToken);
+      }
       restoreGestureOverlayRect(g);
     }
     if (g?.mode === "rotation" && sel) {

package/src/components/editor/useDomEditOverlayRects.ts

@@ -13,6 +13,7 @@ import {
   groupOverlayItemsEqual,
   isElementVisibleForOverlay,
   groupAwareOverlayRect,
+  orientedGroupAwareOverlayRect,
   rectsEqual,
   resolveElementForOverlay,
   selectionCacheKey,
@@ -157,7 +158,13 @@ export function useDomEditOverlayRects({
         // backgroundless full-bleed scene above a subcomposition), which would wrongly
         // hide the selection box. Occlusion stays for hover, where a false hide is cheap.
         if (el && isElementVisibleForOverlay(el)) {
-          const nextRect = groupAwareOverlayRect(overlayEl, iframe, el);
+          // Groups render as an AABB union of their members (a group OBB is out of
+          // scope); a single element renders as an oriented box that co-rotates
+          // with its transform. orientedOverlayRect gates on rotation internally
+          // (a cheap per-call check) and only pays for the full corner-transform
+          // measurement when the element is actually rotated — this RAF loop runs
+          // every frame for any single selection, so that gate matters here most.
+          const nextRect = orientedGroupAwareOverlayRect(overlayEl, iframe, el);
           setOverlayRect(nextRect);
           const descendants = el.querySelectorAll("*");
           if (descendants.length > 0 && descendants.length <= 60) {
@@ -242,7 +249,7 @@ export function useDomEditOverlayRects({
         return;
       }
 
-      setHoverRect(groupAwareOverlayRect(overlayEl, iframe, hoverEl));
+      setHoverRect(orientedGroupAwareOverlayRect(overlayEl, iframe, hoverEl));
     };
 
     frame = requestAnimationFrame(update);