diff --git a/.fallowrc.jsonc b/.fallowrc.jsonc
index ba95b95ebe..7a5ebe8228 100644
--- a/.fallowrc.jsonc
+++ b/.fallowrc.jsonc
@@ -55,6 +55,9 @@
     "packages/studio/src/hooks/gsapRuntimePreview.ts",
     // TEMP(studio-dnd): shipped unwired ahead of the NLE integration;
     // the app-shell swap PR (studio-dnd/pr22) wires the consumers and removes this block.
+    "packages/studio/src/components/sidebar/AssetCard.tsx",
+    // TEMP(studio-dnd): shipped unwired ahead of the NLE integration;
+    // the app-shell swap PR (studio-dnd/pr22) wires the consumers and removes this block.
     "packages/studio/src/components/EditorShell.tsx",
     "packages/studio/src/components/nle/TimelinePane.tsx",
     "packages/studio/src/components/nle/useTimelineEditCallbacks.ts",
@@ -456,6 +459,12 @@
     // require intrusive middleware changes beyond this PR's scope.
     "minLines": 6,
     "ignore": [
+      // TEMP(studio-dnd): coexistence-window clone (extraction vs still-live original);
+      // studio-dnd pr22 removes this with the final config.
+      "packages/studio/src/hooks/useDomEditWiring.ts",
+      // TEMP(studio-dnd): coexistence-window clone (extraction vs still-live original);
+      // studio-dnd pr22 removes this with the final config.
+      "packages/studio/src/hooks/useGsapSelectionHandlers.ts",
       // TEMP(studio-dnd): coexistence-window clone (extraction vs still-live original);
       // studio-dnd pr22 removes this with the final config.
       "packages/studio/src/components/StudioPreviewArea.tsx",
@@ -659,6 +668,9 @@
     // complexity pre-dates the computed-timeline work. Exempted at file level
     // rather than refactored as scope creep.
     "ignore": [
+      // TEMP(studio-dnd): coexistence-window complexity flare (inherited/CRAP-no-coverage);
+      // removed by studio-dnd/pr22 when the final config lands.
+      "packages/studio/src/components/sidebar/AssetCard.tsx",
       // TEMP(studio-dnd): coexistence-window complexity flare (inherited/CRAP-no-coverage);
       // removed by studio-dnd/pr22 when the final config lands.
       "packages/studio/src/components/editor/DomEditSelectionChrome.tsx",
diff --git a/packages/studio/src/components/editor/DomEditCropHandles.tsx b/packages/studio/src/components/editor/DomEditCropHandles.tsx
index 7ac3b485b0..ff90de33af 100644
--- a/packages/studio/src/components/editor/DomEditCropHandles.tsx
+++ b/packages/studio/src/components/editor/DomEditCropHandles.tsx
@@ -31,12 +31,16 @@ interface DomEditCropHandlesProps {
   onStyleCommit?: (property: string, value: string) => Promise<void> | void;
 }
 
-// Gap (px) between an edge handle and the element edge, so the handle sits
-// clear of the element body and can't intercept a move-drag.
-const EDGE_HANDLE_GAP = 8;
+// Hit-strip size (px) for an edge crop handle: THICKNESS extends outward from
+// the crop edge (flush against it, never over the element body, so a body
+// drag always MOVES), LENGTH runs along the edge. The visible pill is smaller
+// and centered inside the strip.
+const EDGE_HIT_THICKNESS = 12;
+const EDGE_HIT_LENGTH = 32;
 
-/** Place an edge handle just OUTSIDE the given crop edge (translate pushes it
- *  fully past the boundary). Keeps the element body free for moving. */
+/** Place an edge handle's hit strip just OUTSIDE the given crop edge
+ *  (translate pushes it fully past the boundary). Keeps the element body free
+ *  for moving. Corners stay free for the selection's own resize handles. */
 function edgeHandlePlacement(
   edge: CropEdge,
   rect: { left: number; top: number; width: number; height: number },
@@ -44,27 +48,36 @@ function edgeHandlePlacement(
   const cx = rect.left + rect.width / 2;
   const cy = rect.top + rect.height / 2;
   if (edge === "top") {
-    return { left: cx, top: rect.top - EDGE_HANDLE_GAP, transform: "translate(-50%, -100%)" };
+    return { left: cx, top: rect.top, transform: "translate(-50%, -100%)" };
   }
   if (edge === "bottom") {
-    return {
-      left: cx,
-      top: rect.top + rect.height + EDGE_HANDLE_GAP,
-      transform: "translate(-50%, 0)",
-    };
+    return { left: cx, top: rect.top + rect.height, transform: "translate(-50%, 0)" };
   }
   if (edge === "left") {
-    return { left: rect.left - EDGE_HANDLE_GAP, top: cy, transform: "translate(-100%, -50%)" };
+    return { left: rect.left, top: cy, transform: "translate(-100%, -50%)" };
   }
-  return {
-    left: rect.left + rect.width + EDGE_HANDLE_GAP,
-    top: cy,
-    transform: "translate(0, -50%)",
-  };
+  return { left: rect.left + rect.width, top: cy, transform: "translate(0, -50%)" };
 }
 
 const EDGES: CropEdge[] = ["top", "right", "bottom", "left"];
 
+/** Hit-strip + pill dimensions for an edge handle, keyed on its orientation. */
+function edgeHandleMetrics(vertical: boolean): {
+  hitWidth: number;
+  hitHeight: number;
+  cursor: string;
+  pillWidth: number;
+  pillHeight: number;
+} {
+  return {
+    hitWidth: vertical ? EDGE_HIT_THICKNESS : EDGE_HIT_LENGTH,
+    hitHeight: vertical ? EDGE_HIT_LENGTH : EDGE_HIT_THICKNESS,
+    cursor: vertical ? "ew-resize" : "ns-resize",
+    pillWidth: vertical ? 4 : 24,
+    pillHeight: vertical ? 24 : 4,
+  };
+}
+
 /**
  * Always-on crop, integrated with the selection (no crop "mode"): while a
  * croppable element is selected its clip is lifted so the FULL content shows and
@@ -83,6 +96,7 @@ export function DomEditCropHandles({
 }: DomEditCropHandlesProps) {
   const gestureRef = useRef<CropGestureState | null>(null);
   const [dragging, setDragging] = useState(false);
+  const [hotEdge, setHotEdge] = useState<CropEdge | null>(null);
   // readElementCropInsets returns null for a clip this tool can't represent
   // (circle/polygon/non-px inset): the crop UI must fully stand down for that
   // element — no lift, no handles — or select+deselect replaces the authored
@@ -304,6 +318,7 @@ export function DomEditCropHandles({
         <button
           type="button"
           aria-label="Reposition crop"
+          title="Reposition crop"
           data-dom-edit-crop-handle="true"
           className="pointer-events-auto absolute rounded-full border-2 border-studio-accent bg-studio-accent/30 shadow-[0_0_0_1px_rgba(0,0,0,0.4)]"
           style={{
@@ -323,31 +338,48 @@ export function DomEditCropHandles({
       )}
       {/* Edge handles — drag a side to crop it. Positioned just OUTSIDE the crop
           edge (via edgeHandlePlacement) so they never overlap the element body:
-          dragging the body always MOVES, only a handle crops. */}
+          dragging the body always MOVES, only a handle crops. The pill is
+          hover-revealed (or shown while dragging / once a crop exists) so the
+          resting selection chrome stays uncluttered; the hit strip is always
+          live, and the title names the affordance. */}
       {EDGES.map((edge) => {
         const vertical = edge === "left" || edge === "right";
         const place = edgeHandlePlacement(edge, cropRect);
+        const revealed = dragging || hasCrop || hotEdge === edge;
+        const m = edgeHandleMetrics(vertical);
         return (
           <button
             key={edge}
             type="button"
             aria-label={`Crop ${edge}`}
+            title="Crop"
             data-dom-edit-crop-handle="true"
-            className="pointer-events-auto absolute rounded-full bg-studio-accent shadow-[0_0_0_1px_rgba(0,0,0,0.4)]"
+            className="pointer-events-auto absolute flex items-center justify-center border-0 bg-transparent p-0"
             style={{
               left: place.left,
               top: place.top,
-              width: vertical ? 5 : 26,
-              height: vertical ? 26 : 5,
+              width: m.hitWidth,
+              height: m.hitHeight,
               transform: place.transform,
-              cursor: vertical ? "ew-resize" : "ns-resize",
+              cursor: m.cursor,
               touchAction: "none",
             }}
+            onPointerEnter={() => setHotEdge(edge)}
+            onPointerLeave={() => setHotEdge((prev) => (prev === edge ? null : prev))}
             onPointerDown={(event) => startCropGesture(edge, event)}
             onPointerMove={updateCropGesture}
             onPointerUp={finishCropGesture}
             onPointerCancel={cancelCropGesture}
-          />
+          >
+            <span
+              className="pointer-events-none rounded-full bg-studio-accent/90 shadow-[0_0_0_1px_rgba(0,0,0,0.4)] transition-opacity duration-100"
+              style={{
+                width: m.pillWidth,
+                height: m.pillHeight,
+                opacity: revealed ? 1 : 0,
+              }}
+            />
+          </button>
         );
       })}
     </div>
diff --git a/packages/studio/src/components/editor/DomEditOverlay.test.ts b/packages/studio/src/components/editor/DomEditOverlay.test.ts
index fbc8eccb26..736bd7ecb2 100644
--- a/packages/studio/src/components/editor/DomEditOverlay.test.ts
+++ b/packages/studio/src/components/editor/DomEditOverlay.test.ts
@@ -11,10 +11,10 @@ import {
   hasDomEditRotationChanged,
   resolveDomEditCoordinateScale,
   resolveDomEditGroupOverlayRect,
-  resolveDomEditResizeGesture,
   resolveDomEditRotationGesture,
 } from "./DomEditOverlay";
 import type { DomEditSelection } from "./domEditing";
+import { resolveResizeCenterAnchorOffset } from "./domEditOverlayGestures";
 
 // React 19 warns unless the test environment opts into act().
 globalThis.IS_REACT_ACT_ENVIRONMENT = true;
@@ -84,21 +84,37 @@ vi.mock("./useDomEditOverlayRects", async () => {
   };
 });
 
+const previewHelperSpies = vi.hoisted(() => ({
+  getPreviewTargetFromPointer: vi.fn<() => HTMLElement | null>(() => null),
+}));
+
+vi.mock("../../utils/studioPreviewHelpers", async () => {
+  const actual = await vi.importActual<typeof import("../../utils/studioPreviewHelpers")>(
+    "../../utils/studioPreviewHelpers",
+  );
+  return {
+    ...actual,
+    getPreviewTargetFromPointer: previewHelperSpies.getPreviewTargetFromPointer,
+  };
+});
+
 vi.mock("./domEditOverlayGeometry", async () => {
   const actual = await vi.importActual<typeof import("./domEditOverlayGeometry")>(
     "./domEditOverlayGeometry",
   );
 
+  const stubRect = {
+    left: 24,
+    top: 36,
+    width: 180,
+    height: 72,
+    editScaleX: 1,
+    editScaleY: 1,
+  };
   return {
     ...actual,
-    toOverlayRect: () => ({
-      left: 24,
-      top: 36,
-      width: 180,
-      height: 72,
-      editScaleX: 1,
-      editScaleY: 1,
-    }),
+    toOverlayRect: () => stubRect,
+    orientedOverlayRect: () => stubRect,
   };
 });
 
@@ -126,6 +142,103 @@ function createOverlayProps(args: {
   };
 }
 
+/**
+ * Stub element-level getBoundingClientRect to a fixed 800×450 rect (happy-dom
+ * returns all-zeros for unlaid-out elements, which gates the RAF compRect
+ * update). Returns a restore function to call in teardown.
+ */
+function stubViewportRect(): () => void {
+  const original = Element.prototype.getBoundingClientRect;
+  Element.prototype.getBoundingClientRect = function (): DOMRect {
+    return {
+      left: 0,
+      top: 0,
+      right: 800,
+      bottom: 450,
+      width: 800,
+      height: 450,
+      x: 0,
+      y: 0,
+      toJSON: () => ({}),
+    };
+  };
+  return () => {
+    Element.prototype.getBoundingClientRect = original;
+  };
+}
+
+/**
+ * Flush the mount's RAF ticks so the compRect update lands. Two animation-frame
+ * ticks: the first scheduled by useMountEffect's update(), the second by
+ * update()'s tail recursion.
+ */
+async function flushOverlayRaf(): Promise<void> {
+  await act(async () => {
+    await new Promise<void>((resolve) => {
+      requestAnimationFrame(() => requestAnimationFrame(() => resolve()));
+    });
+  });
+}
+
+/** A fully-populated DomEditSelection with per-test overrides (capabilities are
+ *  merged so a test can flip a single flag without restating the whole set). */
+function makeDomEditSelection(
+  overrides: Partial<DomEditSelection> = {},
+  capabilityOverrides: Partial<DomEditSelection["capabilities"]> = {},
+): DomEditSelection {
+  const base: DomEditSelection = {
+    element: document.createElement("div"),
+    id: "hero-title",
+    selector: ".hero-title",
+    selectorIndex: 0,
+    sourceFile: "index.html",
+    tagName: "div",
+    label: "Hero Title",
+    textContent: "Hello",
+    textFields: [],
+    capabilities: {
+      canEditText: true,
+      canEditLayout: true,
+      canMove: true,
+      canApplyManualOffset: true,
+      canApplyManualSize: false,
+      canApplyManualRotation: false,
+      canAdjustOpacity: true,
+      canAdjustFill: true,
+      canAdjustBorderRadius: true,
+      canAdjustStroke: true,
+      canAdjustShadow: true,
+      canAdjustZIndex: true,
+    },
+    computedStyle: {
+      display: "block",
+      position: "absolute",
+    },
+  };
+  return {
+    ...base,
+    ...overrides,
+    capabilities: { ...base.capabilities, ...capabilityOverrides },
+  };
+}
+
+/** Query the composition-canvas overlay and assert it mounted. */
+function getOverlay(host: HTMLElement): HTMLDivElement {
+  const overlay = host.querySelector<HTMLDivElement>('[aria-label="Composition canvas"]');
+  expect(overlay).toBeTruthy();
+  if (!overlay) throw new Error("Expected composition canvas overlay");
+  return overlay;
+}
+
+/** Dispatch a left-button pointerdown at (clientX, clientY) inside act(). */
+function dispatchOverlayPointerDown(target: Element, clientX = 120, clientY = 80): void {
+  act(() => {
+    target.dispatchEvent(
+      new PointerEvent("pointerdown", { bubbles: true, button: 0, clientX, clientY }),
+    );
+  });
+}
+
 describe("focusDomEditOverlayElement", () => {
   it("focuses the canvas overlay without scrolling", () => {
     const calls: Array<FocusOptions | undefined> = [];
@@ -144,41 +257,84 @@ describe("DomEditOverlay", () => {
     gestureSpies.onPointerMove.mockClear();
     gestureSpies.onPointerUp.mockClear();
     gestureSpies.clearPointerState.mockClear();
+    previewHelperSpies.getPreviewTargetFromPointer.mockReset();
+    previewHelperSpies.getPreviewTargetFromPointer.mockReturnValue(null);
+  });
+
+  it("selects on the first click over an element even before a hover is resolved", async () => {
+    // Regression: this used to start a marquee whenever hoverSelectionRef was null.
+    // The RAF hover loop populates that ref ASYNCHRONOUSLY, so a genuine first
+    // click over an element read null and was misread as empty canvas — the
+    // marquee swallowed the selecting onMouseDown, so nothing selected until the
+    // SECOND click. With a synchronous pointer hit-test finding an element, the
+    // marquee must NOT start and onCanvasMouseDown must fire on the first click.
+    const restoreRect = stubViewportRect();
+    const originalPointerCapture = HTMLDivElement.prototype.setPointerCapture;
+    HTMLDivElement.prototype.setPointerCapture = () => {};
+
+    // An element IS under the pointer, but no hover has been resolved yet.
+    previewHelperSpies.getPreviewTargetFromPointer.mockReturnValue(document.createElement("div"));
+
+    const host = document.createElement("div");
+    document.body.append(host);
+    const root = createRoot(host);
+    const iframeRef = { current: document.createElement("iframe") as HTMLIFrameElement | null };
+    const onCanvasMouseDown = vi.fn();
+    const onMarqueeSelect = vi.fn();
+
+    function Harness() {
+      return React.createElement(DomEditOverlay, {
+        ...createOverlayProps({
+          iframeRef,
+          selection: null,
+          hoverSelection: null,
+          onSelectionChange: () => {},
+        }),
+        onCanvasMouseDown,
+        onMarqueeSelect,
+      });
+    }
+
+    act(() => {
+      root.render(React.createElement(Harness));
+    });
+    await flushOverlayRaf();
+
+    const overlay = getOverlay(host);
+
+    act(() => {
+      overlay.dispatchEvent(
+        new PointerEvent("pointerdown", { bubbles: true, button: 0, clientX: 120, clientY: 80 }),
+      );
+      overlay.dispatchEvent(
+        new MouseEvent("mousedown", { bubbles: true, button: 0, clientX: 120, clientY: 80 }),
+      );
+    });
+
+    // No marquee started; the click reached the selecting mouse-down handler.
+    expect(onMarqueeSelect).not.toHaveBeenCalled();
+    expect(onCanvasMouseDown).toHaveBeenCalledTimes(1);
+
+    act(() => {
+      root.unmount();
+    });
+    HTMLDivElement.prototype.setPointerCapture = originalPointerCapture;
+    restoreRect();
+    host.remove();
   });
 
   it("does not start a drag from a stale hover target on canvas pointer-down", () => {
     const host = document.createElement("div");
     document.body.append(host);
     const root = createRoot(host);
-    const selection: DomEditSelection = {
-      element: document.createElement("div"),
+    const selection = makeDomEditSelection({
       id: "cta-label",
       selector: ".cta-label",
-      selectorIndex: 0,
-      sourceFile: "index.html",
       tagName: "span",
       label: "CTA Label",
       textContent: "Add to basket",
-      textFields: [],
-      capabilities: {
-        canEditText: true,
-        canEditLayout: true,
-        canMove: true,
-        canApplyManualOffset: true,
-        canApplyManualSize: false,
-        canApplyManualRotation: false,
-        canAdjustOpacity: true,
-        canAdjustFill: true,
-        canAdjustBorderRadius: true,
-        canAdjustStroke: true,
-        canAdjustShadow: true,
-        canAdjustZIndex: true,
-      },
-      computedStyle: {
-        display: "inline",
-        position: "static",
-      },
-    };
+      computedStyle: { display: "inline", position: "static" },
+    });
 
     let currentSelection: DomEditSelection | null = null;
     const iframeRef = { current: document.createElement("iframe") as HTMLIFrameElement | null };
@@ -202,19 +358,9 @@ describe("DomEditOverlay", () => {
       root.render(React.createElement(Harness));
     });
 
-    const overlay = host.querySelector('[aria-label="Composition canvas"]') as HTMLDivElement;
-    expect(overlay).toBeTruthy();
+    const overlay = getOverlay(host);
 
-    act(() => {
-      overlay.dispatchEvent(
-        new PointerEvent("pointerdown", {
-          bubbles: true,
-          button: 0,
-          clientX: 120,
-          clientY: 80,
-        }),
-      );
-    });
+    dispatchOverlayPointerDown(overlay);
 
     expect(gestureSpies.startGesture).not.toHaveBeenCalled();
     expect(currentSelection).toBe(null);
@@ -233,53 +379,12 @@ describe("DomEditOverlay", () => {
     // box (and other bounded UI) behind `compRect.width > 0` (added in the
     // keyframes PR a468550f). Stub element-level getBoundingClientRect for
     // the test so the RAF compRect update produces a real width.
-    const originalGetBoundingClientRect = Element.prototype.getBoundingClientRect;
-    Element.prototype.getBoundingClientRect = function (): DOMRect {
-      return {
-        left: 0,
-        top: 0,
-        right: 800,
-        bottom: 450,
-        width: 800,
-        height: 450,
-        x: 0,
-        y: 0,
-        toJSON: () => ({}),
-      };
-    };
+    const restoreRect = stubViewportRect();
 
     const host = document.createElement("div");
     document.body.append(host);
     const root = createRoot(host);
-    const selection: DomEditSelection = {
-      element: document.createElement("div"),
-      id: "hero-title",
-      selector: ".hero-title",
-      selectorIndex: 0,
-      sourceFile: "index.html",
-      tagName: "div",
-      label: "Hero Title",
-      textContent: "Hello",
-      textFields: [],
-      capabilities: {
-        canEditText: true,
-        canEditLayout: true,
-        canMove: true,
-        canApplyManualOffset: true,
-        canApplyManualSize: false,
-        canApplyManualRotation: false,
-        canAdjustOpacity: true,
-        canAdjustFill: true,
-        canAdjustBorderRadius: true,
-        canAdjustStroke: true,
-        canAdjustShadow: true,
-        canAdjustZIndex: true,
-      },
-      computedStyle: {
-        display: "block",
-        position: "absolute",
-      },
-    };
+    const selection = makeDomEditSelection();
 
     let currentSelection: DomEditSelection | null = selection;
     const iframeRef = { current: document.createElement("iframe") as HTMLIFrameElement | null };
@@ -307,30 +412,16 @@ describe("DomEditOverlay", () => {
     // Flush the mount's RAF tick so the compRect update lands before the
     // pointer-down. Two animation-frame ticks: the first scheduled by
     // useMountEffect's update(), the second by update()'s tail recursion.
-    await act(async () => {
-      await new Promise<void>((resolve) => {
-        requestAnimationFrame(() => requestAnimationFrame(() => resolve()));
-      });
-    });
+    await flushOverlayRaf();
 
-    const overlay = host.querySelector('[aria-label="Composition canvas"]') as HTMLDivElement;
-    expect(overlay).toBeTruthy();
+    getOverlay(host);
 
     const selectionBox = host.querySelector(
       '[data-dom-edit-selection-box="true"]',
     ) as HTMLDivElement;
     expect(selectionBox).toBeTruthy();
 
-    act(() => {
-      selectionBox.dispatchEvent(
-        new PointerEvent("pointerdown", {
-          bubbles: true,
-          button: 0,
-          clientX: 120,
-          clientY: 80,
-        }),
-      );
-    });
+    dispatchOverlayPointerDown(selectionBox);
 
     expect(currentSelection).toBe(selection);
     expect(gestureSpies.startGesture).toHaveBeenCalledWith(
@@ -342,58 +433,17 @@ describe("DomEditOverlay", () => {
       root.unmount();
     });
     HTMLDivElement.prototype.setPointerCapture = originalPointerCapture;
-    Element.prototype.getBoundingClientRect = originalGetBoundingClientRect;
+    restoreRect();
     host.remove();
   });
 
   it("passes the tracked hover selection when clicking the existing selection box", async () => {
-    const originalGetBoundingClientRect = Element.prototype.getBoundingClientRect;
-    Element.prototype.getBoundingClientRect = function (): DOMRect {
-      return {
-        left: 0,
-        top: 0,
-        right: 800,
-        bottom: 450,
-        width: 800,
-        height: 450,
-        x: 0,
-        y: 0,
-        toJSON: () => ({}),
-      };
-    };
+    const restoreRect = stubViewportRect();
 
     const host = document.createElement("div");
     document.body.append(host);
     const root = createRoot(host);
-    const selection: DomEditSelection = {
-      element: document.createElement("div"),
-      id: "hero-title",
-      selector: ".hero-title",
-      selectorIndex: 0,
-      sourceFile: "index.html",
-      tagName: "div",
-      label: "Hero Title",
-      textContent: "Hello",
-      textFields: [],
-      capabilities: {
-        canEditText: true,
-        canEditLayout: true,
-        canMove: false,
-        canApplyManualOffset: false,
-        canApplyManualSize: false,
-        canApplyManualRotation: false,
-        canAdjustOpacity: true,
-        canAdjustFill: true,
-        canAdjustBorderRadius: true,
-        canAdjustStroke: true,
-        canAdjustShadow: true,
-        canAdjustZIndex: true,
-      },
-      computedStyle: {
-        display: "block",
-        position: "absolute",
-      },
-    };
+    const selection = makeDomEditSelection({}, { canMove: false, canApplyManualOffset: false });
     const hoverSelection: DomEditSelection = { ...selection, id: "hovered-sibling" };
     const onCanvasMouseDown = vi.fn();
     const iframeRef = { current: document.createElement("iframe") as HTMLIFrameElement | null };
@@ -414,11 +464,7 @@ describe("DomEditOverlay", () => {
       root.render(React.createElement(Harness));
     });
 
-    await act(async () => {
-      await new Promise<void>((resolve) => {
-        requestAnimationFrame(() => requestAnimationFrame(() => resolve()));
-      });
-    });
+    await flushOverlayRaf();
 
     const selectionBox = host.querySelector(
       '[data-dom-edit-selection-box="true"]',
@@ -437,7 +483,7 @@ describe("DomEditOverlay", () => {
     act(() => {
       root.unmount();
     });
-    Element.prototype.getBoundingClientRect = originalGetBoundingClientRect;
+    restoreRect();
     host.remove();
   });
 });
@@ -513,130 +559,10 @@ describe("filterNestedDomEditGroupItems", () => {
   });
 });
 
-describe("resolveDomEditResizeGesture", () => {
-  it("resizes width and height independently by default", () => {
-    expect(
-      resolveDomEditResizeGesture({
-        originWidth: 240,
-        originHeight: 120,
-        actualWidth: 240,
-        actualHeight: 120,
-        scaleX: 1,
-        scaleY: 1,
-        dx: 30,
-        dy: 12,
-        uniform: false,
-      }),
-    ).toEqual({
-      overlayWidth: 270,
-      overlayHeight: 132,
-      width: 270,
-      height: 132,
-    });
-  });
-
-  it("divides the cursor delta by the element's content scale (rescaled element)", () => {
-    // Element renders at 2x via a GSAP scale: a 30px cursor delta must grow the
-    // CSS box by only 15px so the RENDERED box tracks the pointer 1:1.
-    const next = resolveDomEditResizeGesture({
-      originWidth: 480, // 240 css x 2 content scale (overlay px at editScale 1)
-      originHeight: 240,
-      actualWidth: 240,
-      actualHeight: 120,
-      scaleX: 1,
-      scaleY: 1,
-      contentScaleX: 2,
-      contentScaleY: 2,
-      dx: 30,
-      dy: 12,
-      uniform: false,
-    });
-    expect(next.width).toBe(255);
-    expect(next.height).toBe(126);
-    // The overlay box keeps tracking the raw cursor.
-    expect(next.overlayWidth).toBe(510);
-    expect(next.overlayHeight).toBe(252);
-  });
-
-  it("treats a missing/invalid content scale as 1 (unscaled element)", () => {
-    const next = resolveDomEditResizeGesture({
-      originWidth: 240,
-      originHeight: 120,
-      actualWidth: 240,
-      actualHeight: 120,
-      scaleX: 1,
-      scaleY: 1,
-      contentScaleX: 0,
-      contentScaleY: Number.NaN,
-      dx: 30,
-      dy: 12,
-      uniform: false,
-    });
-    expect(next.width).toBe(270);
-    expect(next.height).toBe(132);
-  });
-
-  it("snaps width and height to the same value when Shift is held", () => {
-    expect(
-      resolveDomEditResizeGesture({
-        originWidth: 240,
-        originHeight: 120,
-        actualWidth: 240,
-        actualHeight: 120,
-        scaleX: 1,
-        scaleY: 1,
-        dx: 30,
-        dy: 12,
-        uniform: true,
-      }),
-    ).toEqual({
-      overlayWidth: 270,
-      overlayHeight: 270,
-      width: 270,
-      height: 270,
-    });
-  });
-
-  it("uses the dominant pointer delta for uniform shrink", () => {
-    expect(
-      resolveDomEditResizeGesture({
-        originWidth: 300,
-        originHeight: 180,
-        actualWidth: 300,
-        actualHeight: 180,
-        scaleX: 1,
-        scaleY: 1,
-        dx: 8,
-        dy: -40,
-        uniform: true,
-      }),
-    ).toMatchObject({
-      width: 260,
-      height: 260,
-    });
-  });
-
-  it("writes source-local dimensions when the edited source is scaled down in master view", () => {
-    expect(
-      resolveDomEditResizeGesture({
-        originWidth: 100,
-        originHeight: 50,
-        actualWidth: 400,
-        actualHeight: 200,
-        scaleX: 0.25,
-        scaleY: 0.25,
-        dx: 25,
-        dy: 10,
-        uniform: false,
-      }),
-    ).toEqual({
-      overlayWidth: 125,
-      overlayHeight: 60,
-      width: 500,
-      height: 240,
-    });
-  });
-});
+// Note: the resize SIZE math moved from the AABB screen-space
+// resolveDomEditResizeGesture (removed) to the local-space (OBB) model in
+// domEditResizeLocal.ts — see domEditResizeLocal.test.ts, which re-covers the
+// independent-axis, aspect-lock, and scaled-master-view cases plus rotated axes.
 
 describe("resolveDomEditRotationGesture", () => {
   it("rotates by the pointer angle around the element center", () => {
@@ -701,3 +627,43 @@ describe("resolveDomEditRotationGesture", () => {
     expect(hasDomEditRotationChanged(0, 0)).toBe(false);
   });
 });
+
+// resolveResizeCenterAnchorOffset is the UNROTATED (AABB) fallback used only when
+// the element's real transformed corners can't be measured. Center-anchored: a
+// width/height change grows the box from its top-left, drifting the center by half
+// the size change per axis, so the pin translates back by that half-delta. It is
+// handle-independent — all four corners scale about the same center.
+describe("resolveResizeCenterAnchorOffset", () => {
+  it("grow: translates back by half the size change on both axes", () => {
+    expect(
+      resolveResizeCenterAnchorOffset({
+        originWidth: 200,
+        originHeight: 100,
+        overlayWidth: 230,
+        overlayHeight: 112,
+      }),
+    ).toEqual({ dx: -15, dy: -6 });
+  });
+
+  it("shrink: translates forward by half the (positive) size change", () => {
+    expect(
+      resolveResizeCenterAnchorOffset({
+        originWidth: 200,
+        originHeight: 100,
+        overlayWidth: 160,
+        overlayHeight: 80,
+      }),
+    ).toEqual({ dx: 20, dy: 10 });
+  });
+
+  it("no size change: zero offset", () => {
+    expect(
+      resolveResizeCenterAnchorOffset({
+        originWidth: 200,
+        originHeight: 100,
+        overlayWidth: 200,
+        overlayHeight: 100,
+      }),
+    ).toEqual({ dx: 0, dy: 0 });
+  });
+});
diff --git a/packages/studio/src/components/editor/DomEditOverlay.tsx b/packages/studio/src/components/editor/DomEditOverlay.tsx
index 8d89a3637d..e80799f315 100644
--- a/packages/studio/src/components/editor/DomEditOverlay.tsx
+++ b/packages/studio/src/components/editor/DomEditOverlay.tsx
@@ -1,5 +1,4 @@
-import { memo, useEffect, useMemo, useRef, useState, type RefObject } from "react";
-import { getPreviewTargetFromPointer } from "../../utils/studioPreviewHelpers";
+import { memo, useCallback, useEffect, useMemo, useRef, useState, type RefObject } from "react";
 import { type DomEditSelection } from "./domEditing";
 import type { PreviewMouseDownOptions } from "../../hooks/usePreviewInteraction";
 import { useMarqueeGestures } from "./marqueeCommit";
@@ -16,17 +15,20 @@ import {
 import { useDomEditOverlayRects } from "./useDomEditOverlayRects";
 import { OffCanvasIndicators, type OffCanvasRect } from "./OffCanvasIndicators";
 import { createDomEditOverlayGestureHandlers } from "./useDomEditOverlayGestures";
+import { useDomEditNudge } from "./useDomEditNudge";
 import { SnapGuideOverlay, type SnapGuidesState } from "./SnapGuideOverlay";
 import { GridOverlay } from "./GridOverlay";
 import type { GestureRecordingState } from "./GestureRecordControl";
-import { DomEditCropHandles } from "./DomEditCropHandles";
-import { DomEditRotateHandle } from "./DomEditRotateHandle";
+import { DomEditGroupChrome, DomEditSelectionChrome } from "./DomEditSelectionChrome";
 import { hugRectForElement } from "./domEditOverlayCrop";
 import { useCropOverlay } from "../../hooks/useCropOverlay";
 import { readDomEditSelectionShapeStyles, resolveBoxChromeClass } from "./domEditOverlayShape";
 import { useDomEditCompositionRect } from "./useDomEditCompositionRect";
 import { useMountEffect } from "../../hooks/useMountEffect";
 import { startOffCanvasIndicatorRefresh } from "./offCanvasIndicatorRefresh";
+import { CanvasContextMenu } from "./CanvasContextMenu";
+import type { ZOrderPatch } from "./canvasContextMenuZOrder";
+import { getPreviewTargetFromPointer } from "../../utils/studioPreviewHelpers";
 
 // Re-exports for external consumers — preserving existing import paths.
 export {
@@ -37,7 +39,6 @@ export {
 export {
   focusDomEditOverlayElement,
   hasDomEditRotationChanged,
-  resolveDomEditResizeGesture,
   resolveDomEditRotationGesture,
 } from "./domEditOverlayGestures";
 export type { DomEditGroupPathOffsetCommit } from "./domEditOverlayGestures";
@@ -82,6 +83,19 @@ interface DomEditOverlayProps {
   recordingState?: GestureRecordingState;
   onToggleRecording?: () => void;
   onMarqueeSelect?: (selections: DomEditSelection[], additive: boolean) => void;
+  /**
+   * Delete the selected canvas element.
+   * Wire to handleDomEditElementDelete from useDomEditActionsContext —
+   * same handler the Delete/Backspace hotkey uses.
+   */
+  onDeleteSelection?: (selection: DomEditSelection) => void;
+  /**
+   * Called with the resolved z-order patch list after an optimistic DOM update.
+   * The patch list is tie-aware and may include sibling elements (see
+   * canvasContextMenuZOrder). Wire to handleDomZIndexReorderCommit from
+   * useDomEditActionsContext. See CanvasContextMenu.tsx module comment.
+   */
+  onApplyZIndex?: (selection: DomEditSelection, patches: ZOrderPatch[]) => void;
 }
 
 // fallow-ignore-next-line complexity
@@ -106,6 +120,8 @@ export const DomEditOverlay = memo(function DomEditOverlay({
   onRotationCommit,
   onStyleCommit,
   onMarqueeSelect,
+  onDeleteSelection,
+  onApplyZIndex,
 }: DomEditOverlayProps) {
   const overlayRef = useRef<HTMLDivElement | null>(null);
   const boxRef = useRef<HTMLDivElement | null>(null);
@@ -122,8 +138,31 @@ export const DomEditOverlay = memo(function DomEditOverlay({
   const snapGuidesRef = useRef<SnapGuidesState | null>(null);
   const rafPausedRef = useRef(false);
 
+  // Context menu state: position of the right-click that opened it.
+  // contextMenuSelection is the element the menu targets — captured at right-click
+  // time so the menu can open even before the React selection state settles.
+  const [contextMenu, setContextMenu] = useState<{
+    x: number;
+    y: number;
+    sel: DomEditSelection;
+  } | null>(null);
+
   const selectionRef = useRef(selection);
   selectionRef.current = selection;
+
+  // Close the context menu whenever the selection moves off the element the menu
+  // targets (a click that reselects elsewhere, a deselect, or a preview reload
+  // that rebuilds the selection). Without this the menu can linger — orphaned —
+  // over a stale target after the underlying element is gone. A right-click that
+  // OPENS the menu also selects its target, so the common open path keeps the
+  // menu (same element) rather than immediately dismissing it.
+  useEffect(() => {
+    if (!contextMenu) return;
+    if (!selection || selection.element !== contextMenu.sel.element) {
+      setContextMenu(null);
+    }
+  }, [selection, contextMenu]);
+
   const activeCompositionPathRef = useRef(activeCompositionPath);
   activeCompositionPathRef.current = activeCompositionPath;
   const groupSelectionsRef = useRef(groupSelections);
@@ -242,6 +281,23 @@ export const DomEditOverlay = memo(function DomEditOverlay({
     snapGuidesRef,
   });
 
+  // Arrow-key nudge (1px, Shift = 10px) — commits through the same
+  // path-offset callbacks as a drag, one undo entry per key burst.
+  const { flushNudge } = useDomEditNudge({
+    selection,
+    groupSelections,
+    allowCanvasMovement,
+    selectionRef,
+    overlayRectRef,
+    groupOverlayItemsRef,
+    gestureRef,
+    groupGestureRef,
+    blockedMoveRef,
+    onManualDragStartRef,
+    onPathOffsetCommitRef,
+    onGroupPathOffsetCommitRef,
+  });
+
   const marquee = useMarqueeGestures({
     iframeRef,
     overlayRef,
@@ -371,6 +427,38 @@ export const DomEditOverlay = memo(function DomEditOverlay({
     e.stopPropagation();
   };
 
+  // Right-click: select element first (if not already selected), then open menu.
+  const handleContextMenu = useCallback(
+    async (event: React.MouseEvent<HTMLDivElement>) => {
+      event.preventDefault();
+
+      // If no element is selected yet, resolve it from the pointer position first.
+      const currentSel = selectionRef.current;
+      let activeSel: DomEditSelection | null = currentSel;
+      if (!currentSel) {
+        const pointerEvent = event as unknown as React.PointerEvent<HTMLDivElement>;
+        const resolved = await onCanvasPointerMoveRef.current(pointerEvent);
+        if (!resolved) return; // Nothing under the cursor — skip menu.
+        onSelectionChangeRef.current(resolved, { revealPanel: true });
+        // Use `resolved` directly: React state (and therefore selectionRef) won't
+        // update synchronously after onSelectionChange — we'd be reading stale null.
+        activeSel = resolved;
+      } else {
+        // Check if the user right-clicked on an unselected element (hover target).
+        const hover = hoverSelectionRef.current;
+        if (hover && hover.element !== currentSel.element) {
+          onSelectionChangeRef.current(hover, { revealPanel: true });
+          activeSel = hover;
+        }
+      }
+
+      if (!activeSel) return;
+      setContextMenu({ x: event.clientX, y: event.clientY, sel: activeSel });
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [],
+  );
+
   return (
     <div
       ref={overlayRef}
@@ -379,15 +467,19 @@ export const DomEditOverlay = memo(function DomEditOverlay({
       aria-label="Composition canvas"
       // Cursor follows marquee rect *state* (re-renders), not the mutable ref.
       style={marquee.marqueeRect ? { cursor: "crosshair" } : undefined}
-      onPointerDownCapture={(event) =>
-        focusDomEditOverlayElement(event.currentTarget as FocusableDomEditOverlay)
-      }
+      onPointerDownCapture={(event) => {
+        // A pointer gesture supersedes a pending nudge burst — commit it first
+        // so the gesture's member snapshot starts from the nudged position.
+        flushNudge();
+        focusDomEditOverlayElement(event.currentTarget as FocusableDomEditOverlay);
+      }}
       onPointerDown={handleOverlayPointerDown}
       onMouseDown={handleOverlayMouseDown}
       onPointerMove={marquee.onPointerMove}
       onPointerLeave={() => onCanvasPointerLeaveRef.current()}
       onPointerUp={marquee.onPointerUp}
       onPointerCancel={marquee.onPointerCancel}
+      onContextMenu={handleContextMenu}
     >
       {hoverSelection && hoverRect && compRect.width > 0 && (
         <div
@@ -398,123 +490,33 @@ export const DomEditOverlay = memo(function DomEditOverlay({
         />
       )}
       {hasGroupSelection && groupOverlayItems.length > 1 && groupBounds && compRect.width > 0 && (
-        <>
-          {groupOverlayItems.map((item) => (
-            <div
-              key={item.key}
-              aria-hidden="true"
-              className="pointer-events-none absolute rounded-xl border border-studio-accent/70"
-              style={{
-                left: item.rect.left,
-                top: item.rect.top,
-                width: item.rect.width,
-                height: item.rect.height,
-              }}
-            />
-          ))}
-          <div
-            data-dom-edit-selection-box="true"
-            className="pointer-events-auto absolute rounded-xl border border-studio-accent shadow-[0_0_0_1px_rgba(60,230,172,0.3)]"
-            style={{
-              left: groupBounds.left,
-              top: groupBounds.top,
-              width: groupBounds.width,
-              height: groupBounds.height,
-              cursor: allowCanvasMovement && groupCanMove ? "move" : "default",
-            }}
-            onPointerDown={(e) => {
-              if (!allowCanvasMovement || !groupCanMove || e.shiftKey) return;
-              gestures.startGroupDrag(e);
-            }}
-            onMouseDown={suppressBoxMouseDown}
-            onClick={handleBoxClick}
-          />
-        </>
+        <DomEditGroupChrome
+          groupOverlayItems={groupOverlayItems}
+          groupBounds={groupBounds}
+          allowCanvasMovement={allowCanvasMovement}
+          groupCanMove={groupCanMove}
+          gestures={gestures}
+          onBoxMouseDown={suppressBoxMouseDown}
+          onBoxClick={handleBoxClick}
+        />
       )}
       {!hasGroupSelection && selection && overlayRect && compRect.width > 0 && (
-        <>
-          {allowCanvasMovement && selection.capabilities.canApplyManualRotation && (
-            <DomEditRotateHandle
-              overlayRect={overlayRect}
-              cropOutlineInsetPx={cropOutlineInsetPx}
-              onStartRotate={(e) => {
-                e.stopPropagation();
-                gestures.startGesture("rotate", e);
-              }}
-            />
-          )}
-          <div
-            key={selectionKey}
-            ref={boxRef}
-            data-dom-edit-selection-box="true"
-            className={`pointer-events-auto absolute rounded-md ${boxChromeClass}`}
-            style={{
-              left: overlayRect.left,
-              top: overlayRect.top,
-              width: overlayRect.width,
-              height: overlayRect.height,
-              clipPath: boxClipPath,
-              cursor:
-                allowCanvasMovement && selection.capabilities.canApplyManualOffset
-                  ? "move"
-                  : "default",
-            }}
-            onPointerDown={(e) => {
-              if (!allowCanvasMovement || e.shiftKey) return;
-              if (selection.capabilities.canApplyManualOffset) {
-                gestures.startGesture("drag", e);
-                return;
-              }
-              e.preventDefault();
-              e.stopPropagation();
-              e.currentTarget.setPointerCapture(e.pointerId);
-              blockedMoveRef.current = {
-                pointerId: e.pointerId,
-                startX: e.clientX,
-                startY: e.clientY,
-                notified: false,
-              };
-            }}
-            onMouseDown={suppressBoxMouseDown}
-            onClick={handleBoxClick}
-          >
-            {cropOutlineInsetPx && (
-              <div
-                className="pointer-events-none absolute rounded-md border border-studio-accent/80 shadow-[0_0_0_1px_rgba(60,230,172,0.25)]"
-                style={{
-                  left: cropOutlineInsetPx.left,
-                  top: cropOutlineInsetPx.top,
-                  right: cropOutlineInsetPx.right,
-                  bottom: cropOutlineInsetPx.bottom,
-                }}
-              />
-            )}
-            {allowCanvasMovement && selection.capabilities.canApplyManualSize && (
-              <div
-                className="absolute -right-1.5 -bottom-1.5 w-3 h-3 rounded-sm bg-studio-accent border border-studio-accent/60"
-                style={{
-                  cursor: "se-resize",
-                  touchAction: "none",
-                  ...(cropOutlineInsetPx && {
-                    right: cropOutlineInsetPx.right - 6,
-                    bottom: cropOutlineInsetPx.bottom - 6,
-                  }),
-                }}
-                onPointerDown={(e) => {
-                  e.stopPropagation();
-                  gestures.startGesture("resize", e);
-                }}
-              />
-            )}
-          </div>
-          {selection.capabilities.canCrop && groupSelections.length <= 1 && (
-            <DomEditCropHandles
-              selection={selection}
-              overlayRect={overlayRect}
-              onStyleCommit={onStyleCommitRef.current}
-            />
-          )}
-        </>
+        <DomEditSelectionChrome
+          selection={selection}
+          overlayRect={overlayRect}
+          allowCanvasMovement={allowCanvasMovement}
+          cropOutlineInsetPx={cropOutlineInsetPx ?? undefined}
+          boxRef={boxRef}
+          boxChromeClass={boxChromeClass}
+          boxClipPath={boxClipPath}
+          selectionKey={selectionKey}
+          groupSelectionCount={groupSelections.length}
+          blockedMoveRef={blockedMoveRef}
+          gestures={gestures}
+          onStyleCommit={onStyleCommitRef.current}
+          onBoxMouseDown={suppressBoxMouseDown}
+          onBoxClick={handleBoxClick}
+        />
       )}
       {childRects.length > 0 &&
         compRect.width > 0 &&
@@ -540,6 +542,29 @@ export const DomEditOverlay = memo(function DomEditOverlay({
         onSelectionChangeRef={onSelectionChangeRef}
       />
       <MarqueeOverlay candidateRects={marquee.candidateRects} marqueeRect={marquee.marqueeRect} />
+      {contextMenu && (
+        <CanvasContextMenu
+          x={contextMenu.x}
+          y={contextMenu.y}
+          selection={contextMenu.sel}
+          onClose={() => setContextMenu(null)}
+          onDelete={
+            onDeleteSelection
+              ? (sel) => {
+                  setContextMenu(null);
+                  onDeleteSelection(sel);
+                }
+              : undefined
+          }
+          onApplyZIndex={
+            onApplyZIndex
+              ? (patches) => {
+                  onApplyZIndex(contextMenu.sel, patches);
+                }
+              : undefined
+          }
+        />
+      )}
       <GridOverlay
         visible={gridVisible}
         spacing={gridSpacing}
@@ -552,8 +577,10 @@ export const DomEditOverlay = memo(function DomEditOverlay({
       />
       <SnapGuideOverlay
         snapGuidesRef={snapGuidesRef}
-        overlayWidth={compRect.width}
-        overlayHeight={compRect.height}
+        compositionLeft={compRect.left}
+        compositionTop={compRect.top}
+        compositionWidth={compRect.width}
+        compositionHeight={compRect.height}
       />
     </div>
   );
diff --git a/packages/studio/src/components/editor/DomEditRotateHandle.tsx b/packages/studio/src/components/editor/DomEditRotateHandle.tsx
index 846539c50c..40ec8244b0 100644
--- a/packages/studio/src/components/editor/DomEditRotateHandle.tsx
+++ b/packages/studio/src/components/editor/DomEditRotateHandle.tsx
@@ -1,8 +1,12 @@
 import type { PointerEvent as ReactPointerEvent } from "react";
 import type { OverlayRect } from "./domEditOverlayGeometry";
 
-/** Rotate grab-handle above the selection. Anchors to the crop outline when
- *  the element is cropped so it stays next to what's visible on screen. */
+/** Rotate handle below the selection: an attached circular-arrows icon chip
+ *  (no connecting stem). Anchors to the crop outline when the element is
+ *  cropped so it stays next to what's visible on screen. Presentation only —
+ *  the rotation gesture measures pointer angles from the element CENTER
+ *  (resolveDomEditRotationGesture), so the handle position doesn't affect the
+ *  math. Sits 12px below the bbox, past the bottom crop handle's hit strip. */
 export function DomEditRotateHandle({
   overlayRect,
   cropOutlineInsetPx,
@@ -15,27 +19,42 @@ export function DomEditRotateHandle({
   const inset = cropOutlineInsetPx ?? { top: 0, right: 0, bottom: 0, left: 0 };
   const visibleLeft = overlayRect.left + inset.left;
   const visibleWidth = Math.max(0, overlayRect.width - inset.left - inset.right);
-  const visibleTop = overlayRect.top + inset.top;
+  const visibleBottom = overlayRect.top + overlayRect.height - inset.bottom;
   return (
-    <div
-      className="pointer-events-none absolute"
+    <button
+      type="button"
+      className="pointer-events-auto absolute flex items-center justify-center border-0 bg-transparent p-0"
       style={{
         left: visibleLeft + visibleWidth / 2,
-        top: visibleTop - 34,
-        width: 28,
-        height: 34,
+        top: visibleBottom + 12,
+        width: 22,
+        height: 22,
         transform: "translateX(-50%)",
+        touchAction: "none",
+        cursor: "default",
       }}
+      title="Rotate"
+      aria-label="Rotate selection"
+      onPointerDown={onStartRotate}
     >
-      <div className="absolute left-1/2 top-3 bottom-0 w-px -translate-x-1/2 bg-studio-accent/60" />
-      <button
-        type="button"
-        className="pointer-events-auto absolute left-1/2 top-0 h-3 w-3 -translate-x-1/2 rounded-full border border-studio-accent bg-studio-accent p-0 shadow-[0_0_0_2px_rgba(60,230,172,0.18)]"
-        style={{ cursor: "grab", touchAction: "none" }}
-        title="Rotate"
-        aria-label="Rotate selection"
-        onPointerDown={onStartRotate}
-      />
-    </div>
+      <span className="pointer-events-none flex h-[18px] w-[18px] items-center justify-center rounded-full border border-studio-accent/70 bg-studio-surface text-studio-accent shadow-[0_0_3px_rgba(0,0,0,0.45)]">
+        <svg
+          width="11"
+          height="11"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          aria-hidden="true"
+        >
+          <path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8" />
+          <path d="M21 3v5h-5" />
+          <path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16" />
+          <path d="M8 16H3v5" />
+        </svg>
+      </span>
+    </button>
   );
 }
diff --git a/packages/studio/src/components/editor/LayersPanel.test.ts b/packages/studio/src/components/editor/LayersPanel.test.ts
index f34db36f07..4a3b6a239a 100644
--- a/packages/studio/src/components/editor/LayersPanel.test.ts
+++ b/packages/studio/src/components/editor/LayersPanel.test.ts
@@ -1,10 +1,11 @@
 // @vitest-environment happy-dom
 
-import { describe, expect, it } from "vitest";
+import { describe, expect, it, vi, beforeEach, afterEach } from "vitest";
 import { Window } from "happy-dom";
 import type { DomEditLayerItem } from "./domEditingTypes";
-import { sortLayersByZIndex } from "./LayersPanel";
+import { createRafThrottle, sortLayersByZIndex } from "./LayersPanel";
 import { isLayerDraggable } from "./useLayerDrag";
+import { liveTime } from "../../player";
 
 function makeLayer(
   overrides: Partial<DomEditLayerItem> & { zIndex?: string; locked?: boolean },
@@ -133,3 +134,66 @@ describe("isLayerDraggable", () => {
     expect(isLayerDraggable(layer)).toBe(true);
   });
 });
+
+// ── liveTime throttle contract (mirrors the useEffect in LayersPanel) ──────
+// The panel subscribes to liveTime with a rAF + 100 ms trailing throttle so
+// it refreshes during scrubbing without a collectLayers call every frame.
+// These tests exercise the subscribe/unsubscribe contract that the effect
+// relies on.
+
+describe("liveTime subscribe / unsubscribe (LayersPanel scrub contract)", () => {
+  let rafCallbacks: FrameRequestCallback[];
+  let originalRaf: typeof requestAnimationFrame;
+  let originalCancelRaf: typeof cancelAnimationFrame;
+
+  beforeEach(() => {
+    rafCallbacks = [];
+    originalRaf = globalThis.requestAnimationFrame;
+    originalCancelRaf = globalThis.cancelAnimationFrame;
+    let nextId = 1;
+    globalThis.requestAnimationFrame = (cb) => {
+      const id = nextId++;
+      rafCallbacks.push(cb);
+      return id;
+    };
+    globalThis.cancelAnimationFrame = vi.fn();
+  });
+
+  afterEach(() => {
+    globalThis.requestAnimationFrame = originalRaf;
+    globalThis.cancelAnimationFrame = originalCancelRaf;
+  });
+
+  it("unsubscribing stops the callback from receiving further notifications", () => {
+    const cb = vi.fn();
+    const unsubscribe = liveTime.subscribe(cb);
+
+    liveTime.notify(1);
+    expect(cb).toHaveBeenCalledTimes(1);
+
+    unsubscribe();
+    liveTime.notify(2);
+    expect(cb).toHaveBeenCalledTimes(1); // no new call after unsubscribe
+  });
+
+  it("queuing a rAF on liveTime notify then flushing calls the refresh exactly once", () => {
+    const refresh = vi.fn();
+    const throttle = createRafThrottle(refresh, 100);
+    const unsubscribe = liveTime.subscribe(throttle.invoke);
+
+    // First notify enqueues one rAF
+    liveTime.notify(0.1);
+    expect(rafCallbacks).toHaveLength(1);
+    expect(refresh).not.toHaveBeenCalled();
+
+    // Second notify before rAF flush is ignored (rafId is set)
+    liveTime.notify(0.2);
+    expect(rafCallbacks).toHaveLength(1);
+
+    // Flush the rAF
+    rafCallbacks[0](performance.now());
+    expect(refresh).toHaveBeenCalledTimes(1);
+
+    unsubscribe();
+  });
+});
diff --git a/packages/studio/src/components/editor/LayersPanel.tsx b/packages/studio/src/components/editor/LayersPanel.tsx
index 915b81c6a6..b84bb47f61 100644
--- a/packages/studio/src/components/editor/LayersPanel.tsx
+++ b/packages/studio/src/components/editor/LayersPanel.tsx
@@ -7,7 +7,7 @@ import {
 } from "./domEditing";
 import { useStudioPlaybackContext, useStudioShellContext } from "../../contexts/StudioContext";
 import { useDomEditContext } from "../../contexts/DomEditContext";
-import { usePlayerStore } from "../../player";
+import { usePlayerStore, liveTime } from "../../player";
 import {
   findMatchingTimelineElementId,
   resolveTimelineSelectionSeekTime,
@@ -49,6 +49,34 @@ function isCompositionHost(el: HTMLElement): boolean {
   return el.hasAttribute("data-composition-src") || el.hasAttribute("data-composition-file");
 }
 
+/**
+ * A trailing-rAF + cooldown throttle: `invoke` runs `run` at most once per
+ * animation frame and no more often than `throttleMs`. `cancel` clears any
+ * pending frame (call on cleanup). Extracted so the throttle can be exercised
+ * directly in tests instead of being reconstructed there.
+ */
+export function createRafThrottle(
+  run: () => void,
+  throttleMs = 100,
+): { invoke: () => void; cancel: () => void } {
+  let rafId: number | null = null;
+  let lastFired = 0;
+  return {
+    invoke: () => {
+      const now = performance.now();
+      if (rafId !== null || now - lastFired < throttleMs) return;
+      rafId = requestAnimationFrame(() => {
+        rafId = null;
+        lastFired = performance.now();
+        run();
+      });
+    },
+    cancel: () => {
+      if (rafId !== null) cancelAnimationFrame(rafId);
+    },
+  };
+}
+
 interface CollapsedState {
   [key: string]: boolean;
 }
@@ -122,6 +150,20 @@ export const LayersPanel = memo(function LayersPanel() {
     }
   }, [compositionLoading, collectLayers]);
 
+  // Subscribe to liveTime so the panel refreshes during scrubbing.
+  // liveTime bypasses React state (no re-renders per frame), so a plain
+  // usePlayerStore(s => s.currentTime) subscription never fires while the
+  // RAF loop is running.  Throttle with a trailing rAF + 100 ms cooldown to
+  // avoid a collectLayers call on every animation frame.
+  useEffect(() => {
+    const throttle = createRafThrottle(collectLayers, 100);
+    const unsubscribe = liveTime.subscribe(throttle.invoke);
+    return () => {
+      unsubscribe();
+      throttle.cancel();
+    };
+  }, [collectLayers]);
+
   const resolveSelection = useCallback(
     (layer: DomEditLayerItem) => {
       // Re-find the element from the live DOM — layer.element may be stale
diff --git a/packages/studio/src/components/editor/SnapGuideOverlay.tsx b/packages/studio/src/components/editor/SnapGuideOverlay.tsx
index 01faf85223..850d98adf5 100644
--- a/packages/studio/src/components/editor/SnapGuideOverlay.tsx
+++ b/packages/studio/src/components/editor/SnapGuideOverlay.tsx
@@ -1,7 +1,6 @@
-// fallow-ignore-file unused-file
 import { memo, useRef, type RefObject } from "react";
 import { useMountEffect } from "../../hooks/useMountEffect";
-import type { SnapGuide, SpacingGuide } from "./snapEngine";
+import { resolveGuideLineRect, type SnapGuide, type SpacingGuide } from "./snapEngine";
 
 export interface SnapGuidesState {
   guides: SnapGuide[];
@@ -17,22 +16,35 @@ const SPACING_BG = "rgba(255, 68, 204, 0.15)";
 
 interface SnapGuideOverlayProps {
   snapGuidesRef: RefObject<SnapGuidesState | null>;
-  overlayWidth: number;
-  overlayHeight: number;
+  /** Composition rect in overlay space — guide lines span exactly this rect. */
+  compositionLeft: number;
+  compositionTop: number;
+  compositionWidth: number;
+  compositionHeight: number;
 }
 
 export const SnapGuideOverlay = memo(function SnapGuideOverlay({
   snapGuidesRef,
-  overlayWidth,
-  overlayHeight,
+  compositionLeft,
+  compositionTop,
+  compositionWidth,
+  compositionHeight,
 }: SnapGuideOverlayProps) {
   const guideElsRef = useRef<(HTMLDivElement | null)[]>([]);
   const spacingElsRef = useRef<(HTMLDivElement | null)[]>([]);
   const spacingLabelElsRef = useRef<(HTMLSpanElement | null)[]>([]);
-  const overlayWidthRef = useRef(overlayWidth);
-  overlayWidthRef.current = overlayWidth;
-  const overlayHeightRef = useRef(overlayHeight);
-  overlayHeightRef.current = overlayHeight;
+  const compositionRectRef = useRef({
+    left: compositionLeft,
+    top: compositionTop,
+    width: compositionWidth,
+    height: compositionHeight,
+  });
+  compositionRectRef.current = {
+    left: compositionLeft,
+    top: compositionTop,
+    width: compositionWidth,
+    height: compositionHeight,
+  };
 
   useMountEffect(() => {
     let frame = 0;
@@ -44,8 +56,7 @@ export const SnapGuideOverlay = memo(function SnapGuideOverlay({
       const state = snapGuidesRef.current;
       const guides = state?.guides ?? [];
       const spacingGuides = state?.spacingGuides ?? [];
-      const w = overlayWidthRef.current;
-      const h = overlayHeightRef.current;
+      const composition = compositionRectRef.current;
 
       for (let i = 0; i < MAX_GUIDES; i++) {
         const el = guideElsRef.current[i];
@@ -58,17 +69,11 @@ export const SnapGuideOverlay = memo(function SnapGuideOverlay({
         }
 
         el.style.display = "";
-        if (guide.axis === "x") {
-          el.style.left = `${guide.position}px`;
-          el.style.top = "0";
-          el.style.width = "1px";
-          el.style.height = `${h}px`;
-        } else {
-          el.style.left = "0";
-          el.style.top = `${guide.position}px`;
-          el.style.width = `${w}px`;
-          el.style.height = "1px";
-        }
+        const line = resolveGuideLineRect(guide, composition);
+        el.style.left = `${line.left}px`;
+        el.style.top = `${line.top}px`;
+        el.style.width = `${line.width}px`;
+        el.style.height = `${line.height}px`;
       }
 
       for (let i = 0; i < MAX_SPACING_GUIDES; i++) {
diff --git a/packages/studio/src/components/editor/anchoredResizeCommitFeedsOffset.test.ts b/packages/studio/src/components/editor/anchoredResizeCommitFeedsOffset.test.ts
new file mode 100644
index 0000000000..49065c709c
--- /dev/null
+++ b/packages/studio/src/components/editor/anchoredResizeCommitFeedsOffset.test.ts
@@ -0,0 +1,214 @@
+// @vitest-environment happy-dom
+
+import { afterEach, describe, expect, it, vi } from "vitest";
+import type { DomEditSelection } from "./domEditing";
+import type { GestureState, UseDomEditOverlayGesturesOptions } from "./domEditOverlayGestures";
+
+// Origin box (overlay px). The gesture-start center is its centroid; the
+// center-anchored resize must keep THIS point planted, which means the release
+// must commit a nonzero offset equal to minus half the size growth.
+const ORIGIN = { left: 0, top: 0, width: 200, height: 100 };
+const ORIGIN_CENTER = {
+  x: ORIGIN.left + ORIGIN.width / 2,
+  y: ORIGIN.top + ORIGIN.height / 2,
+};
+
+// Consistent geometry stub: model the physical truth the real DOM would report.
+// A CSS width/height change grows the box from its top-left, so the rendered
+// center drifts by half the size delta; the manual offset the gesture applies
+// (read back from the element's studio vars) pulls it back. `elementCornerOverlayPoints`
+// returns the four corners of that drifted box; `overlayCornersCentroid` (kept
+// real) averages them so the anchor loop can measure the true center each frame.
+vi.mock("./domEditOverlayGeometry", async () => {
+  const actual = await vi.importActual<typeof import("./domEditOverlayGeometry")>(
+    "./domEditOverlayGeometry",
+  );
+  const { readStudioBoxSize, readStudioPathOffset } = await import("./manualEditsDom");
+  const physicalCenter = (element: HTMLElement) => {
+    const size = readStudioBoxSize(element);
+    const width = size.width > 0 ? size.width : ORIGIN.width;
+    const height = size.height > 0 ? size.height : ORIGIN.height;
+    const offset = readStudioPathOffset(element);
+    return {
+      x: ORIGIN_CENTER.x + (width - ORIGIN.width) / 2 + offset.x,
+      y: ORIGIN_CENTER.y + (height - ORIGIN.height) / 2 + offset.y,
+      width,
+      height,
+    };
+  };
+  return {
+    ...actual,
+    elementCornerOverlayPoints: (_o: unknown, _i: unknown, element: HTMLElement) => {
+      const c = physicalCenter(element);
+      const hw = c.width / 2;
+      const hh = c.height / 2;
+      return {
+        nw: { x: c.x - hw, y: c.y - hh },
+        ne: { x: c.x + hw, y: c.y - hh },
+        sw: { x: c.x - hw, y: c.y + hh },
+        se: { x: c.x + hw, y: c.y + hh },
+      };
+    },
+    orientedOverlayRect: (_o: unknown, _i: unknown, element: HTMLElement) => {
+      const c = physicalCenter(element);
+      return {
+        left: c.x - c.width / 2,
+        top: c.y - c.height / 2,
+        width: c.width,
+        height: c.height,
+        editScaleX: 1,
+        editScaleY: 1,
+        angle: 0,
+      };
+    },
+  };
+});
+
+const { createDomEditOverlayGestureHandlers } = await import("./useDomEditOverlayGestures");
+
+function ref<T>(current: T) {
+  return { current };
+}
+
+interface CommitCall {
+  size: { width: number; height: number };
+  offset: { x: number; y: number } | undefined;
+}
+
+function buildHarness() {
+  const element = document.createElement("div");
+  document.body.append(element);
+
+  const selection = {
+    element,
+    id: "box",
+    selector: "#box",
+    selectorIndex: 0,
+    sourceFile: "index.html",
+    tagName: "div",
+    label: "Box",
+    textContent: "",
+    textFields: [],
+    capabilities: {
+      canEditText: false,
+      canEditLayout: true,
+      canMove: true,
+      canApplyManualOffset: true,
+      canApplyManualSize: true,
+      canApplyManualRotation: false,
+      canAdjustOpacity: true,
+      canAdjustFill: true,
+      canAdjustBorderRadius: true,
+      canAdjustStroke: true,
+      canAdjustShadow: true,
+      canAdjustZIndex: true,
+    },
+    computedStyle: { display: "block", position: "absolute" },
+  } as unknown as DomEditSelection;
+
+  const commits: CommitCall[] = [];
+  const overlayEl = document.createElement("div");
+  const iframe = document.createElement("iframe");
+
+  const opts: UseDomEditOverlayGesturesOptions = {
+    overlayRef: ref<HTMLDivElement | null>(overlayEl),
+    iframeRef: ref<HTMLIFrameElement | null>(iframe),
+    boxRef: ref<HTMLDivElement | null>(document.createElement("div")),
+    selectionRef: ref<DomEditSelection | null>(selection),
+    hoverSelectionRef: ref<DomEditSelection | null>(null),
+    overlayRectRef: ref<OverlayRectLike | null>({
+      left: ORIGIN.left,
+      top: ORIGIN.top,
+      width: ORIGIN.width,
+      height: ORIGIN.height,
+      editScaleX: 1,
+      editScaleY: 1,
+    }) as never,
+    groupOverlayItemsRef: ref([]),
+    gestureRef: ref<GestureState | null>(null),
+    groupGestureRef: ref(null),
+    blockedMoveRef: ref(null),
+    rafPausedRef: ref(false),
+    suppressNextBoxClickRef: ref(false),
+    setOverlayRect: () => {},
+    setGroupOverlayItems: () => {},
+    onBlockedMoveRef: ref(() => {}),
+    onManualDragStartRef: ref(() => {}),
+    onPathOffsetCommitRef: ref(() => {}),
+    onGroupPathOffsetCommitRef: ref(() => {}),
+    onBoxSizeCommitRef: ref((_s, size, offset) => {
+      commits.push({ size, offset });
+    }),
+    onRotationCommitRef: ref(() => {}),
+    onCanvasPointerMoveRef: ref(() => Promise.resolve(null)),
+    onCanvasMouseDown: () => {},
+    snapGuidesRef: ref(null),
+  };
+
+  const handlers = createDomEditOverlayGestureHandlers(opts);
+  return { handlers, commits, selection };
+}
+
+type OverlayRectLike = {
+  left: number;
+  top: number;
+  width: number;
+  height: number;
+  editScaleX: number;
+  editScaleY: number;
+};
+
+function evt(clientX: number, clientY: number) {
+  return {
+    clientX,
+    clientY,
+    pointerId: 1,
+    button: 0,
+    altKey: false,
+    shiftKey: false,
+    preventDefault() {},
+    stopPropagation() {},
+    currentTarget: { setPointerCapture() {} },
+  } as unknown as React.PointerEvent<HTMLDivElement>;
+}
+
+afterEach(() => {
+  document.body.innerHTML = "";
+});
+
+describe("anchored corner resize — the release commit feeds the center-pin offset", () => {
+  it("onPointerUp passes a nonzero offset that keeps the center planted", () => {
+    const { handlers, commits } = buildHarness();
+
+    // Start an SE corner resize. Pointer starts 100px right of the center.
+    handlers.startGesture("resize", evt(ORIGIN_CENTER.x + 100, ORIGIN_CENTER.y), {
+      resizeHandle: "se",
+    });
+
+    // Drag outward to radial scale 1.5 (dist 150 / 100). Several frames so the
+    // per-frame center-pin anchor accumulates and converges into g.lastResizeAnchor.
+    for (let i = 0; i < 5; i++) {
+      handlers.onPointerMove(evt(ORIGIN_CENTER.x + 150, ORIGIN_CENTER.y));
+    }
+
+    handlers.onPointerUp(evt(ORIGIN_CENTER.x + 150, ORIGIN_CENTER.y));
+
+    expect(commits).toHaveLength(1);
+    const { size, offset } = commits[0]!;
+
+    // Proportional 1.5x growth of the 200x100 base.
+    expect(size.width).toBeCloseTo(300, 0);
+    expect(size.height).toBeCloseTo(150, 0);
+
+    // The committed offset must be present and nonzero — the open question.
+    expect(offset).toBeDefined();
+    if (!offset) return;
+    expect(offset.x).not.toBe(0);
+    expect(offset.y).not.toBe(0);
+
+    // And it must equal minus half the size growth, i.e. it re-pins the center to
+    // exactly the gesture-start center (offset = -(finalSize - origin)/2).
+    expect(offset.x).toBeCloseTo(-(size.width - ORIGIN.width) / 2, 0);
+    expect(offset.y).toBeCloseTo(-(size.height - ORIGIN.height) / 2, 0);
+  });
+});
diff --git a/packages/studio/src/components/editor/anchoredResizeReleaseShift.test.ts b/packages/studio/src/components/editor/anchoredResizeReleaseShift.test.ts
index 7e97d65d33..9e2bda99db 100644
--- a/packages/studio/src/components/editor/anchoredResizeReleaseShift.test.ts
+++ b/packages/studio/src/components/editor/anchoredResizeReleaseShift.test.ts
@@ -8,6 +8,7 @@ import {
 } from "./manualEditsDom";
 import { buildBoxSizePatches, buildPathOffsetPatches } from "./manualEditsDomPatches";
 import { createManualOffsetDragMember, applyManualOffsetDragCommit } from "./manualOffsetDrag";
+import { computeNextResizeAnchor } from "./useDomEditOverlayGestures";
 import type { PatchOperation } from "../../utils/sourcePatcher";
 import { splitTopLevelWhitespace } from "./manualEditsStyleHelpers";
 
@@ -16,15 +17,25 @@ import { splitTopLevelWhitespace } from "./manualEditsStyleHelpers";
  * CENTER, which must stay planted across the whole gesture — including after
  * release, on every corner and at any rotation.
  *
- * This file lands here with ONLY the persist round-trip test, which exercises the
- * real apply → persist → reload symbols that already exist at this point in the
- * stack. The two center-anchor CONVERGENCE tests (the release-shift root cause)
- * drive the exported `computeNextResizeAnchor` accumulator, which is extracted from
- * the resize pointermove branch of `useDomEditOverlayGestures.ts`. That gesture code
- * lands later in the stack (with the canvas glue swap), so those two tests are added
- * to this file at that point — importing the real production helper rather than a
- * test-local copy, so they can never pass against a stand-in that drifts from the
- * shipped math.
+ * Root cause of the original release "shift" (proved with a real-layout Chromium
+ * replay, see the anchor-loop test below): during a resize drag the per-frame
+ * anchor is derived from the element's LIVE measured center — which already carries
+ * the offset applied on the PREVIOUS frame — while `applyManualOffsetDragDraft`
+ * treats that anchor as the ABSOLUTE offset. So `fixedStart - centerNow` is really
+ * only the RESIDUAL correction, and using it as the absolute value makes the anchor
+ * OSCILLATE between the correct value and zero every frame:
+ *   frame 0: offset 0 → center shifted by the resize → anchor = full amount → apply
+ *   frame 1: offset applied → center back at fixedStart → anchor = 0 → apply 0 (un-pin!)
+ *   frame 2: offset 0 again → anchor = full amount → ...
+ * Release commits `g.lastResizeAnchor` from whichever parity the last pointermove
+ * landed on, so the element lands EITHER pinned OR un-pinned — an unpredictable
+ * post-release "shift".
+ *
+ * Fix (useDomEditOverlayGestures pointermove, resize branch, fa4f39168): accumulate
+ * the residual onto the previously-applied anchor instead of using it as the
+ * absolute offset, so the loop converges to a stable value on every frame. The
+ * per-frame accumulation is the exported `computeNextResizeAnchor` helper (the one
+ * call site in the pointermove resize branch); tests 1 & 2 drive it directly.
  */
 
 afterEach(() => {
@@ -66,10 +77,95 @@ function resolvedTranslatePx(el: HTMLElement): { x: number; y: number } {
 }
 
 describe("center-anchored corner resize — no shift after release", () => {
+  it("the per-frame center anchor converges (does NOT oscillate) — the release-shift root cause", () => {
+    // Model the pointermove anchor loop that pins the element's CENTER. The physical
+    // truth (confirmed in a real browser): the measured center sits at
+    // `fixedStart - appliedOffset` shifted by the resize — i.e. applying the offset
+    // moves the center back toward its gesture-start position. Here scale=1 so
+    // screen px == offset px. `trueAnchor` is the compensating offset that pins it.
+    const trueAnchor = { dx: -60, dy: -27 };
+    const fixedStart = { x: 500, y: 270 };
+
+    // `appliedOffset` mirrors what applyManualOffsetDragDraft set last frame.
+    let appliedOffset = { x: 0, y: 0 };
+    // `lastResizeAnchor` accumulator, exactly as g.lastResizeAnchor in the fix.
+    let lastResizeAnchor: { dx: number; dy: number } | undefined;
+
+    const anchorsSeen: Array<{ dx: number; dy: number }> = [];
+    for (let frame = 0; frame < 8; frame++) {
+      // Live measured center: the resize would put it at fixedStart + trueAnchor
+      // (un-anchored), and the currently-applied offset pulls it back by that
+      // offset. So centerNow = fixedStart - trueAnchor + appliedOffset.
+      const centerNow = {
+        x: fixedStart.x - trueAnchor.dx + appliedOffset.x,
+        y: fixedStart.y - trueAnchor.dy + appliedOffset.y,
+      };
+      // ── The fixed logic (accumulate residual onto the previous anchor) ──
+      const anchor = computeNextResizeAnchor(lastResizeAnchor, fixedStart, centerNow);
+      lastResizeAnchor = anchor;
+      anchorsSeen.push(anchor);
+      // applyManualOffsetDragDraft sets the absolute offset (scale 1) = anchor.
+      appliedOffset = { x: anchor.dx, y: anchor.dy };
+    }
+
+    // Every frame must report the same, correct anchor — no oscillation, so the
+    // committed value is parity-independent.
+    for (const a of anchorsSeen) {
+      expect(a).toEqual(trueAnchor);
+    }
+    // Guard against the OLD absolute formula regressing: with `anchor =
+    // fixedStart - centerNow` (no accumulation) the sequence would be
+    // [trueAnchor, 0, trueAnchor, 0, ...]; assert the last two frames agree.
+    expect(anchorsSeen.at(-1)).toEqual(anchorsSeen.at(-2));
+  });
+
+  it("the center stays fixed for every corner at any rotation (loop converges)", () => {
+    // The pin loop is handle- and rotation-independent: it always measures the
+    // element CENTER and drives it back to fixedStart. Simulate the loop for all
+    // four corners across unrotated + rotated gestures; the resize's raw center
+    // shift varies with corner/rotation (modelled as `rawShift`), but the loop must
+    // converge the measured center onto fixedStart every time.
+    const fixedStart = { x: 640, y: 360 };
+    const HANDLES = ["nw", "ne", "sw", "se"] as const;
+    const DEGS = [0, 30, 90, 137];
+    for (const handle of HANDLES) {
+      for (const deg of DEGS) {
+        const t = (deg * Math.PI) / 180;
+        // Raw (un-pinned) center shift the size write would cause this frame —
+        // a corner/rotation-dependent vector. Its exact value is irrelevant; the
+        // loop only needs to cancel it.
+        const seed = (HANDLES.indexOf(handle) + 1) * 11;
+        const rawShift = {
+          dx: Math.cos(t) * seed - Math.sin(t) * (seed / 2),
+          dy: Math.sin(t) * seed + Math.cos(t) * (seed / 2),
+        };
+        let appliedOffset = { x: 0, y: 0 };
+        let lastResizeAnchor: { dx: number; dy: number } | undefined;
+        let centerNow = { x: fixedStart.x, y: fixedStart.y };
+        for (let frame = 0; frame < 6; frame++) {
+          centerNow = {
+            x: fixedStart.x + rawShift.dx + appliedOffset.x,
+            y: fixedStart.y + rawShift.dy + appliedOffset.y,
+          };
+          const anchor = computeNextResizeAnchor(lastResizeAnchor, fixedStart, centerNow);
+          lastResizeAnchor = anchor;
+          appliedOffset = { x: anchor.dx, y: anchor.dy };
+        }
+        // After convergence the pinned center equals the gesture-start center.
+        const pinnedCenter = {
+          x: fixedStart.x + rawShift.dx + appliedOffset.x,
+          y: fixedStart.y + rawShift.dy + appliedOffset.y,
+        };
+        expect(pinnedCenter.x).toBeCloseTo(fixedStart.x, 9);
+        expect(pinnedCenter.y).toBeCloseTo(fixedStart.y, 9);
+      }
+    }
+  });
+
   it("net translate after persist+reload equals the committed anchor offset (non-GSAP)", () => {
     // The committed offset flows through the real apply → persist → reload chain
     // unchanged (this hop was proved clean; the shift is upstream in the anchor
-    // loop, tested with the gesture code, not in persistence).
+    // loop above, not in persistence).
     const el = document.createElement("div");
     el.style.setProperty("width", "200px");
     el.style.setProperty("height", "100px");
diff --git a/packages/studio/src/components/editor/domEditOverlayGeometry.test.ts b/packages/studio/src/components/editor/domEditOverlayGeometry.test.ts
index 2bd16d839a..e048c16489 100644
--- a/packages/studio/src/components/editor/domEditOverlayGeometry.test.ts
+++ b/packages/studio/src/components/editor/domEditOverlayGeometry.test.ts
@@ -1,6 +1,36 @@
 // @vitest-environment jsdom
 import { describe, expect, it } from "vitest";
-import { selectionCacheKey } from "./domEditOverlayGeometry";
+import {
+  orientedOverlayRect,
+  overlayCornersCentroid,
+  selectionCacheKey,
+} from "./domEditOverlayGeometry";
+
+describe("overlayCornersCentroid", () => {
+  it("averages the four corners (the rendered rotation center)", () => {
+    expect(
+      overlayCornersCentroid({
+        nw: { x: 10, y: 20 },
+        ne: { x: 110, y: 20 },
+        se: { x: 110, y: 80 },
+        sw: { x: 10, y: 80 },
+      }),
+    ).toEqual({ x: 60, y: 50 });
+  });
+
+  it("is unchanged by rotation — a rotated square's corners average to its center", () => {
+    // Unit square centered at (5,5), rotated 45deg about its center: corners land
+    // on the axis midpoints, whose average is still the center.
+    const c = overlayCornersCentroid({
+      nw: { x: 5, y: 5 - Math.SQRT2 / 2 },
+      ne: { x: 5 + Math.SQRT2 / 2, y: 5 },
+      se: { x: 5, y: 5 + Math.SQRT2 / 2 },
+      sw: { x: 5 - Math.SQRT2 / 2, y: 5 },
+    });
+    expect(c.x).toBeCloseTo(5, 9);
+    expect(c.y).toBeCloseTo(5, 9);
+  });
+});
 
 describe("selectionCacheKey — hfId collision (R7)", () => {
   it("produces distinct keys for two elements that differ only by hfId", () => {
@@ -11,3 +41,131 @@ describe("selectionCacheKey — hfId collision (R7)", () => {
     expect(a).not.toBe(b);
   });
 });
+
+describe("orientedOverlayRect — rotation gate (perf fix, V15 18a/18b)", () => {
+  // jsdom has no DOMMatrix/DOMPoint; a minimal stand-in is enough to exercise the
+  // real (unmocked) orientedOverlayRect, unlike DomEditOverlay.test.ts and
+  // anchoredResizeCommitFeedsOffset.test.ts, which mock this module entirely.
+  class FakeDOMMatrix {
+    a = 1;
+    b = 0;
+    c = 0;
+    d = 1;
+    e = 0;
+    f = 0;
+    constructor(init?: string) {
+      const m = init ? /matrix\(([^)]+)\)/.exec(init) : null;
+      if (!m) return;
+      const parts = m[1]!.split(",").map((s) => Number.parseFloat(s.trim()));
+      [this.a, this.b, this.c, this.d, this.e, this.f] = parts as [
+        number,
+        number,
+        number,
+        number,
+        number,
+        number,
+      ];
+    }
+    transformPoint(pt: { x: number; y: number }) {
+      return {
+        x: this.a * pt.x + this.c * pt.y + this.e,
+        y: this.b * pt.x + this.d * pt.y + this.f,
+      };
+    }
+  }
+  class FakeDOMPoint {
+    constructor(
+      public x: number,
+      public y: number,
+    ) {}
+  }
+  // matrix() form of rotate(30deg), so the module's `new DOMMatrix(cs.transform)`
+  // parse (which expects "matrix(...)", not "rotate(...)") resolves correctly.
+  const ROTATE_30DEG_MATRIX =
+    "matrix(0.8660254037844387, 0.49999999999999994, -0.49999999999999994, 0.8660254037844387, 0, 0)";
+
+  function stubRect(
+    el: Element,
+    rect: { left: number; top: number; width: number; height: number },
+  ) {
+    (el as unknown as { getBoundingClientRect: () => DOMRect }).getBoundingClientRect = () =>
+      ({
+        left: rect.left,
+        top: rect.top,
+        width: rect.width,
+        height: rect.height,
+        right: rect.left + rect.width,
+        bottom: rect.top + rect.height,
+        x: rect.left,
+        y: rect.top,
+        toJSON() {
+          return this;
+        },
+      }) as DOMRect;
+  }
+
+  function buildHarness() {
+    const overlayEl = document.createElement("div");
+    document.body.appendChild(overlayEl);
+    stubRect(overlayEl, { left: 0, top: 0, width: 1000, height: 1000 });
+
+    const iframe = document.createElement("iframe");
+    document.body.appendChild(iframe);
+    stubRect(iframe, { left: 0, top: 0, width: 1000, height: 1000 });
+
+    const doc = iframe.contentDocument!;
+    const root = doc.createElement("div");
+    root.setAttribute("data-composition-id", "root");
+    root.setAttribute("data-width", "1000");
+    root.setAttribute("data-height", "1000");
+    doc.body.appendChild(root);
+
+    const el = doc.createElement("div");
+    root.appendChild(el);
+    stubRect(el, { left: 400, top: 450, width: 200, height: 100 });
+    Object.defineProperty(el, "offsetWidth", { value: 200, configurable: true });
+    Object.defineProperty(el, "offsetHeight", { value: 100, configurable: true });
+
+    const win = iframe.contentWindow as unknown as Window & {
+      DOMMatrix: unknown;
+      DOMPoint: unknown;
+    };
+    win.DOMMatrix = FakeDOMMatrix;
+    win.DOMPoint = FakeDOMPoint;
+
+    return { overlayEl, iframe, el };
+  }
+
+  it("unrotated element takes the cheap AABB path — matches the raw bounding rect, angle 0", () => {
+    const { overlayEl, iframe, el } = buildHarness();
+    const rect = orientedOverlayRect(overlayEl, iframe, el);
+    expect(rect).not.toBeNull();
+    expect(rect!.left).toBeCloseTo(400, 5);
+    expect(rect!.top).toBeCloseTo(450, 5);
+    expect(rect!.width).toBeCloseTo(200, 5);
+    expect(rect!.height).toBeCloseTo(100, 5);
+    expect(rect!.angle ?? 0).toBe(0);
+  });
+
+  it("rotated element takes the corner-geometry path — reports the live angle", () => {
+    const { overlayEl, iframe, el } = buildHarness();
+    el.style.transform = ROTATE_30DEG_MATRIX;
+    const rect = orientedOverlayRect(overlayEl, iframe, el);
+    expect(rect).not.toBeNull();
+    expect(rect!.angle).toBeCloseTo(30, 3);
+  });
+
+  it("gate re-evaluates every call — editing an element to rotated mid-session flips the path immediately", () => {
+    const { overlayEl, iframe, el } = buildHarness();
+    const before = orientedOverlayRect(overlayEl, iframe, el);
+    expect(before?.angle ?? 0).toBe(0);
+
+    el.style.transform = ROTATE_30DEG_MATRIX;
+    const after = orientedOverlayRect(overlayEl, iframe, el);
+    expect(after!.angle).toBeCloseTo(30, 3);
+
+    el.style.transform = "";
+    const restored = orientedOverlayRect(overlayEl, iframe, el);
+    expect(restored?.angle ?? 0).toBe(0);
+  });
+});
diff --git a/packages/studio/src/components/editor/domEditOverlayGeometry.ts b/packages/studio/src/components/editor/domEditOverlayGeometry.ts
index 11bcf811a0..adff6686fc 100644
--- a/packages/studio/src/components/editor/domEditOverlayGeometry.ts
+++ b/packages/studio/src/components/editor/domEditOverlayGeometry.ts
@@ -107,31 +107,49 @@ export function toVisibleOverlayRect(
 }
 
 /**
- * The element's live transform rotation, in DEGREES (screen/CSS convention, CW
- * positive), decomposed from its computed transform matrix (rotation = atan2(b, a)).
- * GSAP folds rotation and scale into the same matrix; this reads rotation only.
- * Returns 0 when the transform is "none" or unmeasurable — callers treat 0 as
- * axis-aligned. Skew is ignored (does not affect atan2(b, a)).
+ * 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.
  */
-function readElementRotationDegrees(iframe: HTMLIFrameElement, element: HTMLElement): number {
-  const win = iframe.contentWindow;
-  if (!win) return 0;
+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 0;
-  const transform = win.getComputedStyle(element).transform;
-  if (!transform || transform === "none") return 0;
-  let matrix: DOMMatrix;
+  if (!DOMMatrixCtor) return null;
+  const cs = win.getComputedStyle(element);
   try {
-    matrix = new DOMMatrixCtor(transform);
+    const matrix = new DOMMatrixCtor(cs.transform === "none" ? "" : cs.transform);
+    return { matrix, cs };
   } catch {
-    return 0;
+    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;
@@ -185,12 +203,14 @@ function computeOverlayRootScale(
   };
 }
 
-export function toOverlayRect(
+function toOverlayRect(
   overlayEl: HTMLDivElement,
   iframe: HTMLIFrameElement,
   element: HTMLElement,
+  precomputedScale?: OverlayRootScale | null,
 ): OverlayRect | null {
-  const scale = computeOverlayRootScale(overlayEl, iframe, iframe.contentDocument);
+  const scale =
+    precomputedScale ?? computeOverlayRootScale(overlayEl, iframe, iframe.contentDocument);
   if (!scale) return null;
   const { iframeRect, overlayRect, rootScaleX, rootScaleY } = scale;
 
@@ -220,6 +240,14 @@ export function toOverlayRect(
  *  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
@@ -247,15 +275,16 @@ 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 DOMMatrixCtor = (win as Window & typeof globalThis).DOMMatrix;
   const DOMPointCtor = (win as Window & typeof globalThis).DOMPoint;
-  if (!DOMMatrixCtor || !DOMPointCtor) return null;
+  if (!DOMPointCtor) return null;
 
-  const scale = computeOverlayRootScale(overlayEl, iframe, doc);
+  const scale = precomputedScale ?? computeOverlayRootScale(overlayEl, iframe, doc);
   if (!scale) return null;
   const { iframeRect, overlayRect, rootScaleX, rootScaleY } = scale;
 
@@ -266,18 +295,14 @@ export function elementCornerOverlayPoints(
   // 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 cs = win.getComputedStyle(element);
+  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;
-  let matrix: DOMMatrix;
-  try {
-    matrix = new DOMMatrixCtor(cs.transform === "none" ? "" : cs.transform);
-  } catch {
-    return null;
-  }
   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 };
@@ -321,20 +346,35 @@ export function elementCornerOverlayPoints(
  * 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 base = toOverlayRect(overlayEl, iframe, element);
+  const scale = computeOverlayRootScale(overlayEl, iframe, iframe.contentDocument);
+  if (!scale) return null;
+  const base = toOverlayRect(overlayEl, iframe, element, scale);
   if (!base) return null;
-  const corners = elementCornerOverlayPoints(overlayEl, iframe, element);
+
+  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;
-  const angle = readElementRotationDegrees(iframe, element);
   // Unrotated edge lengths (in overlay px): nw→ne is the width, nw→sw the height.
-  const width = Math.hypot(corners.ne.x - corners.nw.x, corners.ne.y - corners.nw.y);
-  const height = Math.hypot(corners.sw.x - corners.nw.x, corners.sw.y - corners.nw.y);
+  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) {
diff --git a/packages/studio/src/components/editor/domEditOverlayGestures.ts b/packages/studio/src/components/editor/domEditOverlayGestures.ts
index 8f6949a549..c67e667af7 100644
--- a/packages/studio/src/components/editor/domEditOverlayGestures.ts
+++ b/packages/studio/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,11 @@ 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 },
+    ) => Promise<void> | void
   >;
   onRotationCommitRef: RefObject<
     (s: DomEditSelection, n: { angle: number }) => Promise<void> | void
@@ -228,10 +230,3 @@ export type UseDomEditOverlayGesturesOptions = {
   onCanvasMouseDown: (e: React.MouseEvent<HTMLDivElement>, o?: PreviewMouseDownOptions) => void;
   snapGuidesRef: RefObject<SnapGuidesState | null>;
 };
-
-/**
- * Corner identity for a chrome resize handle. Consumed by the selection
- * chrome + resize-local math; the gesture pipeline threads it through
- * startGesture options.
- */
-export type ResizeHandle = "nw" | "ne" | "sw" | "se";
diff --git a/packages/studio/src/components/editor/domEditOverlayStartGesture.ts b/packages/studio/src/components/editor/domEditOverlayStartGesture.ts
index 826c0a26dd..0d19aaa89e 100644
--- a/packages/studio/src/components/editor/domEditOverlayStartGesture.ts
+++ b/packages/studio/src/components/editor/domEditOverlayStartGesture.ts
@@ -20,7 +20,9 @@ import {
 } from "./manualEdits";
 import {
   type OverlayRect,
+  elementCornerOverlayPoints,
   filterNestedDomEditGroupItems,
+  overlayCornersCentroid,
   selectionCacheKey,
 } from "./domEditOverlayGeometry";
 import {
@@ -178,7 +180,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();
@@ -186,6 +210,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({
@@ -224,6 +259,8 @@ export function startGesture(
     resizeAnchor,
     manualEditDragToken,
     snapContext,
+    resizeHandle: kind === "resize" ? (options?.resizeHandle ?? "se") : undefined,
+    resizeFixedCenterStart,
   };
   return true;
 }
diff --git a/packages/studio/src/components/editor/domEditingDom.ts b/packages/studio/src/components/editor/domEditingDom.ts
index b1f341ca70..e01eb476bf 100644
--- a/packages/studio/src/components/editor/domEditingDom.ts
+++ b/packages/studio/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();
diff --git a/packages/studio/src/components/editor/manualEditsDomPatches.test.ts b/packages/studio/src/components/editor/manualEditsDomPatches.test.ts
index 3b5bf56132..5ef3a539fc 100644
--- a/packages/studio/src/components/editor/manualEditsDomPatches.test.ts
+++ b/packages/studio/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", () => {
diff --git a/packages/studio/src/components/editor/offCanvasIndicatorRefresh.test.tsx b/packages/studio/src/components/editor/offCanvasIndicatorRefresh.test.tsx
index 3948989539..3d2321e748 100644
--- a/packages/studio/src/components/editor/offCanvasIndicatorRefresh.test.tsx
+++ b/packages/studio/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 {
diff --git a/packages/studio/src/components/editor/snapEngine.test.ts b/packages/studio/src/components/editor/snapEngine.test.ts
index 1826aeab33..1d74b09e4b 100644
--- a/packages/studio/src/components/editor/snapEngine.test.ts
+++ b/packages/studio/src/components/editor/snapEngine.test.ts
@@ -5,8 +5,8 @@ import {
   buildCompositionSnapTarget,
   buildGridSnapEdges,
   resolveSnapAdjustment,
-  resolveResizeSnapAdjustment,
   resolveEquidistanceGuides,
+  resolveGuideLineRect,
   SNAP_THRESHOLD_PX,
   type SnapTarget,
 } from "./snapEngine";
@@ -385,88 +385,22 @@ describe("resolveSnapAdjustment", () => {
 });
 
 // ---------------------------------------------------------------------------
-// resolveResizeSnapAdjustment
+// resolveGuideLineRect
 // ---------------------------------------------------------------------------
 
-describe("resolveResizeSnapAdjustment", () => {
-  test("only right edge snaps on X", () => {
-    // Moving rect at (100, 100) size 50x50, right=150.
-    // Target left at 200. Propose dx=47 => proposed right=197. Dist to 200=3.
-    const t = target("a", 200, 100, 100, 100);
-    const result = resolveResizeSnapAdjustment({
-      movingRect: rect(100, 100, 50, 50),
-      proposedDx: 47,
-      proposedDy: 0,
-      targets: [t],
-      threshold: SNAP_THRESHOLD_PX,
-      disabled: false,
-    });
-    expect(result.dx).toBe(50); // right edge snaps to 200
-  });
+describe("resolveGuideLineRect", () => {
+  const composition = rect(120, 80, 640, 360); // letterboxed inside the overlay
 
-  test("only bottom edge snaps on Y", () => {
-    // Moving rect at (100, 100) size 50x50, bottom=150.
-    // Target top at 200. Propose dy=47 => proposed bottom=197. Dist to 200=3.
-    const t = target("a", 100, 200, 100, 100);
-    const result = resolveResizeSnapAdjustment({
-      movingRect: rect(100, 100, 50, 50),
-      proposedDx: 0,
-      proposedDy: 47,
-      targets: [t],
-      threshold: SNAP_THRESHOLD_PX,
-      disabled: false,
-    });
-    expect(result.dy).toBe(50); // bottom edge snaps to 200
-  });
-
-  test("left edge does NOT snap during resize", () => {
-    // Target right at 150. Moving rect left=100. If drag were active,
-    // left would snap. But during resize, only right edge snaps.
-    // Moving rect at (100, 100) size 200x200, right=300.
-    // Target right=150. Proposed dx=-153 => proposed right=147. Dist to 150=3.
-    // This SHOULD snap right to 150 (dx = -150). But left stays at 100.
-    const t = target("a", 50, 100, 100, 100); // right=150
-    const result = resolveResizeSnapAdjustment({
-      movingRect: rect(100, 100, 200, 200),
-      proposedDx: -153,
-      proposedDy: 0,
-      targets: [t],
-      threshold: SNAP_THRESHOLD_PX,
-      disabled: false,
-    });
-    // Right edge: 300 + (-153) = 147 => snaps to 150, adjustment = +3, dx = -150
-    expect(result.dx).toBe(-150);
-  });
-
-  test("disabled=true returns passthrough for resize", () => {
-    const t = target("a", 200, 200, 100, 100);
-    const result = resolveResizeSnapAdjustment({
-      movingRect: rect(100, 100, 50, 50),
-      proposedDx: 47,
-      proposedDy: 47,
-      targets: [t],
-      threshold: SNAP_THRESHOLD_PX,
-      disabled: true,
-    });
-    expect(result.dx).toBe(47);
-    expect(result.dy).toBe(47);
-    expect(result.guides).toHaveLength(0);
+  test("vertical guide (axis x) spans the composition's height at the snap x", () => {
+    expect(resolveGuideLineRect({ axis: "x", position: 440, from: 0, to: 0 }, composition)).toEqual(
+      { left: 440, top: 80, width: 1, height: 360 },
+    );
   });
 
-  test("resize produces guide lines", () => {
-    const t = target("a", 200, 100, 100, 100);
-    const result = resolveResizeSnapAdjustment({
-      movingRect: rect(100, 100, 50, 50),
-      proposedDx: 47,
-      proposedDy: 0,
-      targets: [t],
-      threshold: SNAP_THRESHOLD_PX,
-      disabled: false,
-    });
-    expect(result.guides.length).toBeGreaterThanOrEqual(1);
-    const xGuide = result.guides.find((g) => g.axis === "x");
-    expect(xGuide).toBeDefined();
-    expect(xGuide!.position).toBe(200);
+  test("horizontal guide (axis y) spans the composition's width at the snap y", () => {
+    expect(resolveGuideLineRect({ axis: "y", position: 260, from: 0, to: 0 }, composition)).toEqual(
+      { left: 120, top: 260, width: 640, height: 1 },
+    );
   });
 });
 
diff --git a/packages/studio/src/components/editor/snapEngine.ts b/packages/studio/src/components/editor/snapEngine.ts
index 9cb4094975..6a64a22a29 100644
--- a/packages/studio/src/components/editor/snapEngine.ts
+++ b/packages/studio/src/components/editor/snapEngine.ts
@@ -410,62 +410,22 @@ export function resolveSnapAdjustment(input: {
 }
 
 // ---------------------------------------------------------------------------
-// resolveResizeSnapAdjustment — resize variant (only right/bottom snap)
+// resolveGuideLineRect — screen rect for rendering a snap guide line
 // ---------------------------------------------------------------------------
 
-// fallow-ignore-next-line complexity
-export function resolveResizeSnapAdjustment(input: {
-  movingRect: Rect;
-  proposedDx: number;
-  proposedDy: number;
-  targets: SnapTarget[];
-  gridEdges?: { x: SnapEdge[]; y: SnapEdge[] };
-  threshold: number;
-  disabled: boolean;
-}): SnapResult {
-  if (input.disabled || input.threshold <= 0) {
-    return DISABLED_RESULT(input.proposedDx, input.proposedDy);
+/**
+ * Full-length guide line spanning the composition: a vertical line (axis "x")
+ * runs the composition's height at the snapped x position; a horizontal line
+ * (axis "y") runs the composition's width. `composition` is the composition
+ * rect in overlay space — guide positions are already overlay-space, so the
+ * line must be offset by the composition's left/top (the canvas is usually
+ * letterboxed inside the overlay).
+ */
+export function resolveGuideLineRect(guide: SnapGuide, composition: Rect): Rect {
+  if (guide.axis === "x") {
+    return { left: guide.position, top: composition.top, width: 1, height: composition.height };
   }
-
-  const mr = input.movingRect;
-  const proposedRight = rectRight(mr) + input.proposedDx;
-  const proposedBottom = rectBottom(mr) + input.proposedDy;
-
-  const xCandidates = collectCandidates(
-    [proposedRight],
-    input.targets,
-    (t) => [t.left, t.centerX, t.right],
-    input.gridEdges?.x,
-    input.threshold,
-  );
-  const yCandidates = collectCandidates(
-    [proposedBottom],
-    input.targets,
-    (t) => [t.top, t.centerY, t.bottom],
-    input.gridEdges?.y,
-    input.threshold,
-  );
-
-  const bestX = pickBest(xCandidates);
-  const bestY = pickBest(yCandidates);
-  const adjustedDx = input.proposedDx + (bestX?.adjustment ?? 0);
-  const adjustedDy = input.proposedDy + (bestY?.adjustment ?? 0);
-
-  const adjustedRect: Rect = {
-    left: mr.left,
-    top: mr.top,
-    width: mr.width + adjustedDx,
-    height: mr.height + adjustedDy,
-  };
-
-  const targetMap = new Map(input.targets.map((t) => [t.id, t]));
-
-  return {
-    dx: adjustedDx,
-    dy: adjustedDy,
-    guides: buildGuidesFromMatches(bestX, bestY, adjustedRect, targetMap),
-    spacingGuides: [], // computed separately via resolveEquidistanceGuides
-  };
+  return { left: composition.left, top: guide.position, width: composition.width, height: 1 };
 }
 
 // ---------------------------------------------------------------------------
diff --git a/packages/studio/src/components/editor/useDomEditOverlayGestures.ts b/packages/studio/src/components/editor/useDomEditOverlayGestures.ts
index 3bd0909ab5..ec18a9f4db 100644
--- a/packages/studio/src/components/editor/useDomEditOverlayGestures.ts
+++ b/packages/studio/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,42 @@ import {
 import {
   type GroupOverlayItem,
   type OverlayRect,
+  cornerEdgeLength,
+  elementCornerOverlayPoints,
+  orientedOverlayRect,
+  overlayCornersCentroid,
   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,
-  type ResizeHandle,
+  resolveResizeCenterAnchorOffset,
 } from "./domEditOverlayGestures";
+import { resolveCenterResizeSize } from "./domEditResizeLocal";
 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";
+
+/** 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) };
 }
 
 export function createDomEditOverlayGestureHandlers(opts: UseDomEditOverlayGesturesOptions) {
@@ -74,6 +79,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[]) => {
@@ -188,8 +197,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;
@@ -197,7 +205,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(
           {
@@ -251,6 +263,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`;
@@ -260,90 +273,100 @@ export function createDomEditOverlayGestureHandlers(opts: UseDomEditOverlayGestu
     } else {
       if (!box) return;
 
-      const sc = g.snapContext;
-      if (sc?.snapEnabled && sc.targets.length > 0) {
-        const movingRect = {
+      // 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);
+
+      const overlayEl = opts.overlayRef.current;
+      const iframe = opts.iframeRef.current;
+      const measureOrientedRect = () =>
+        overlayEl && iframe ? orientedOverlayRect(overlayEl, iframe, sel.element) : null;
+
+      // Keep the element's CENTER visually planted by translating it through the
+      // manual-offset channel (member created at gesture start, on every corner): pin
+      // the center by measuring the centroid of its real transformed corners after
+      // the size write and translating it back to its gesture-start center —
+      // rotation-safe for any transform-origin. Memberless is a defensive fallback.
+      let draftRect: OverlayRect;
+      if (g.pathOffsetMember) {
+        // Measure real corners ONCE — reused below, skipping a redundant measureOrientedRect call.
+        const corners =
+          overlayEl && iframe ? elementCornerOverlayPoints(overlayEl, iframe, sel.element) : null;
+        const fixedStart = g.resizeFixedCenterStart;
+        let anchor: { dx: number; dy: number };
+        if (corners && fixedStart) {
+          // `centerNow` is measured on the LIVE element, which already carries the
+          // offset applied on the PREVIOUS frame. `applyManualOffsetDragDraft`
+          // treats its argument as the ABSOLUTE offset (from initialOffset 0), so
+          // `fixedStart - centerNow` is only the RESIDUAL correction — it must be
+          // ADDED to the offset already in flight, not used as the absolute value.
+          // Using it absolutely makes the anchor oscillate between the correct
+          // value and zero every frame (measure moves the center back to
+          // fixedStart → residual 0 → offset dropped → center un-pins → repeat).
+          // Release then commits whichever parity the last pointermove landed on,
+          // so the element "shifts a bit" after release. Accumulate onto the
+          // previous anchor to converge (fa4f39168).
+          const centerNow = overlayCornersCentroid(corners);
+          anchor = computeNextResizeAnchor(g.lastResizeAnchor, fixedStart, centerNow);
+        } else {
+          // Geometry unmeasurable — fall back to the AABB half-delta.
+          const fallbackRect = measureOrientedRect();
+          anchor = resolveResizeCenterAnchorOffset({
+            originWidth: g.originWidth,
+            originHeight: g.originHeight,
+            overlayWidth: fallbackRect ? fallbackRect.width : g.originWidth,
+            overlayHeight: fallbackRect ? fallbackRect.height : g.originHeight,
+          });
+        }
+        g.lastResizeAnchor = anchor;
+        applyManualOffsetDragDraft(g.pathOffsetMember, anchor.dx, anchor.dy);
+        // Re-measure the oriented box AFTER the anchor translate so it hugs the
+        // element's true rendered bounds every frame.
+        const anchoredRect = measureOrientedRect();
+        draftRect = anchoredRect ?? {
+          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,
+        };
+      } else {
+        // 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.
+        const sizedRect = measureOrientedRect();
+        draftRect = sizedRect ?? {
           left: g.originLeft,
           top: g.originTop,
           width: g.originWidth,
           height: g.originHeight,
+          editScaleX: g.editScaleX,
+          editScaleY: g.editScaleY,
+          angle: g.actualRotation,
         };
-        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,
-      });
-      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,
-      });
+      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);
     }
   };
 
@@ -419,9 +442,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`;
@@ -449,8 +475,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;
@@ -461,17 +486,14 @@ export function createDomEditOverlayGestureHandlers(opts: UseDomEditOverlayGestu
         applyStudioRotation(sel.element, finalRotation);
       }
       void Promise.resolve(opts.onRotationCommitRef.current(sel, finalRotation))
-        .catch((error) => {
-          console.error("rotate commit failed", error);
+        .catch(() => {
           if (
             g.manualEditDragToken &&
             isStudioManualEditGestureCurrent(sel.element, g.manualEditDragToken)
           )
             restoreRotation();
         })
-        .finally(() => {
-          endStudioManualEditGesture(sel.element, g.manualEditDragToken);
-        });
+        .finally(() => endStudioManualEditGesture(sel.element, g.manualEditDragToken));
     } else if (g.kind === "drag") {
       const dx = g.lastSnappedDx ?? e.clientX - g.startX;
       const dy = g.lastSnappedDy ?? e.clientY - g.startY;
@@ -488,6 +510,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`;
@@ -510,18 +533,34 @@ 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))
-        .catch((error) => {
-          console.error("resize commit failed", error);
+      // 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;
+      void Promise.resolve(
+        opts.onBoxSizeCommitRef.current(sel, finalSize, finalOffset ?? undefined),
+      )
+        .catch(() => {
           if (
             g.manualEditDragToken &&
             isStudioManualEditGestureCurrent(sel.element, g.manualEditDragToken)
           ) {
-            restoreResizeAnchorPin(sel.element, g);
             restoreStudioBoxSize(sel.element, g.initialBoxSize);
+            if (finalOffset) restoreStudioPathOffset(sel.element, g.initialPathOffset);
           }
         })
-        .finally(() => endStudioManualEditGesture(sel.element, g.manualEditDragToken));
+        .finally(() => {
+          if (member) endManualOffsetDragMembers([member]);
+          else endStudioManualEditGesture(sel.element, g.manualEditDragToken);
+        });
     }
   };
 
@@ -539,9 +578,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) {
diff --git a/packages/studio/src/components/editor/useDomEditOverlayRects.ts b/packages/studio/src/components/editor/useDomEditOverlayRects.ts
index 70d35db452..e602eeb573 100644
--- a/packages/studio/src/components/editor/useDomEditOverlayRects.ts
+++ b/packages/studio/src/components/editor/useDomEditOverlayRects.ts
@@ -13,6 +13,7 @@ import {
   groupOverlayItemsEqual,
   isElementVisibleForOverlay,
   groupAwareOverlayRect,
+  orientedOverlayRect,
   rectsEqual,
   resolveElementForOverlay,
   selectionCacheKey,
@@ -157,7 +158,15 @@ 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 = el.hasAttribute("data-hf-group")
+            ? groupAwareOverlayRect(overlayEl, iframe, el)
+            : orientedOverlayRect(overlayEl, iframe, el);
           setOverlayRect(nextRect);
           const descendants = el.querySelectorAll("*");
           if (descendants.length > 0 && descendants.length <= 60) {
diff --git a/packages/studio/src/components/sidebar/AssetCard.tsx b/packages/studio/src/components/sidebar/AssetCard.tsx
new file mode 100644
index 0000000000..e2ef1bf4f6
--- /dev/null
+++ b/packages/studio/src/components/sidebar/AssetCard.tsx
@@ -0,0 +1,316 @@
+/**
+ * AssetCard and FontRow — visual asset tile / row components for the Assets panel.
+ * Extracted from AssetsTab.tsx to keep that file under the 600-line CI gate.
+ */
+import { useState, useEffect, useRef, useCallback } from "react";
+import { VideoFrameThumbnail } from "../ui/VideoFrameThumbnail";
+import { VIDEO_EXT, IMAGE_EXT } from "../../utils/mediaTypes";
+import { TIMELINE_ASSET_MIME } from "../../utils/timelineAssetDrop";
+import { ContextMenu } from "./AssetContextMenu";
+import { usePlayerStore } from "../../player/store/playerStore";
+import { useAssetPreviewStore } from "../../utils/assetPreviewStore";
+import { findClipForAsset, isPointerClick } from "../../utils/assetClickBehavior";
+import { basename, ext, truncateMiddle, formatDuration } from "./assetHelpers";
+
+/** Drag payload writer shared by the asset tile and the font row: copy effect
+ *  plus the timeline-asset MIME and a plain-text path fallback. */
+function writeAssetDragData(e: React.DragEvent, asset: string): void {
+  e.dataTransfer.effectAllowed = "copy";
+  e.dataTransfer.setData(TIMELINE_ASSET_MIME, JSON.stringify({ path: asset }));
+  e.dataTransfer.setData("text/plain", asset);
+}
+
+/** Open the row/tile context menu at the pointer, shared by asset tile + font row. */
+function openAssetContextMenu(
+  e: React.MouseEvent,
+  setContextMenu: (menu: { x: number; y: number }) => void,
+): void {
+  e.preventDefault();
+  setContextMenu({ x: e.clientX, y: e.clientY });
+}
+
+/**
+ * Lazily probe a video/audio URL for its duration via a hidden HTMLVideoElement
+ * (`preload="metadata"`). The manifest only covers ~/.media assets, so project
+ * assets in assets/ have no manifest entry — this fills the gap.
+ * Returns `undefined` until the probe completes; `null` if it failed.
+ */
+function useProbedDuration(src: string, skip: boolean): number | null | undefined {
+  const [duration, setDuration] = useState<number | null | undefined>(undefined);
+  useEffect(() => {
+    if (skip) return;
+    let cancelled = false;
+
+    function probe(attempt: number) {
+      if (cancelled) return;
+      const vid = document.createElement("video");
+      vid.preload = "metadata";
+      vid.muted = true;
+      vid.onloadedmetadata = () => {
+        const d = Number.isFinite(vid.duration) && vid.duration > 0 ? vid.duration : null;
+        if (!cancelled) setDuration(d);
+        vid.onloadedmetadata = null;
+        vid.onerror = null;
+        vid.src = "";
+      };
+      vid.onerror = () => {
+        vid.onloadedmetadata = null;
+        vid.onerror = null;
+        vid.src = "";
+        if (!cancelled) {
+          if (attempt < 1) setTimeout(() => probe(attempt + 1), 50);
+          else setDuration(null);
+        }
+      };
+      vid.src = src;
+    }
+
+    probe(0);
+    return () => {
+      cancelled = true;
+    };
+  }, [src, skip]);
+  return duration;
+}
+
+export interface AssetCardProps {
+  projectId: string;
+  asset: string;
+  used: boolean;
+  duration?: number;
+  onCopy: (path: string) => void;
+  isCopied: boolean;
+  onDelete?: (path: string) => void;
+  onRename?: (oldPath: string, newPath: string) => void;
+  onAddAssetToTimeline?: (path: string) => void;
+}
+
+/**
+ * Thumbnail card for images and video assets. Renders in a 2-col grid.
+ *
+ * Click behaviour (CapCut-style):
+ *   - Already added  → selects the clip on the timeline (setSelectedElementId).
+ *   - Not yet added  → opens the asset preview overlay over the canvas.
+ * Drag behaviour is preserved: a pointer movement exceeding DRAG_THRESHOLD_PX
+ * before pointerup is treated as drag-start, not a click.
+ */
+// fallow-ignore-next-line complexity
+export function AssetCard({
+  projectId,
+  asset,
+  used,
+  duration,
+  onCopy,
+  isCopied,
+  onDelete,
+  onRename,
+  onAddAssetToTimeline,
+}: AssetCardProps) {
+  const [contextMenu, setContextMenu] = useState<{ x: number; y: number } | null>(null);
+  const [hovered, setHovered] = useState(false);
+  const fullName = asset.split("/").pop() ?? asset;
+  const name = basename(asset);
+  const extension = ext(asset);
+  const serveUrl = `/api/projects/${projectId}/preview/${asset}`;
+  const isVideo = VIDEO_EXT.test(asset);
+  const isImage = IMAGE_EXT.test(asset);
+  const probedDuration = useProbedDuration(serveUrl, !isVideo || duration != null);
+  const resolvedDuration = duration ?? probedDuration ?? undefined;
+  const durationLabel = formatDuration(resolvedDuration ?? 0);
+
+  // Drag-threshold click gate: track pointer-down position so we can ignore
+  // pointer-up events that followed a real drag gesture.
+  const pointerDownRef = useRef<{ x: number; y: number } | null>(null);
+
+  const setSelectedElementId = usePlayerStore((s) => s.setSelectedElementId);
+  const elements = usePlayerStore((s) => s.elements);
+  const setPreviewAsset = useAssetPreviewStore((s) => s.setPreviewAsset);
+
+  const handlePointerDown = useCallback((e: React.PointerEvent) => {
+    pointerDownRef.current = { x: e.clientX, y: e.clientY };
+  }, []);
+
+  const handlePointerUp = useCallback(
+    (e: React.PointerEvent) => {
+      const origin = pointerDownRef.current;
+      pointerDownRef.current = null;
+      if (!origin) return;
+      if (!isPointerClick(e.clientX - origin.x, e.clientY - origin.y)) return;
+      // Treat as click
+      if (used) {
+        const clip = findClipForAsset(elements, asset);
+        if (clip) {
+          setSelectedElementId(clip.key ?? clip.id);
+          return;
+        }
+      }
+      // Not added (or no matching clip found) → preview overlay
+      setPreviewAsset(asset, projectId);
+    },
+    [used, elements, asset, projectId, setSelectedElementId, setPreviewAsset],
+  );
+
+  return (
+    <>
+      <div
+        draggable
+        onPointerDown={handlePointerDown}
+        onPointerUp={handlePointerUp}
+        onDragStart={(e) => writeAssetDragData(e, asset)}
+        onContextMenu={(e) => openAssetContextMenu(e, setContextMenu)}
+        onPointerEnter={() => setHovered(true)}
+        onPointerLeave={() => setHovered(false)}
+        className={`flex flex-col gap-1 cursor-pointer rounded-md p-1 transition-colors ${
+          isCopied ? "bg-studio-accent/10" : "hover:bg-neutral-800/40"
+        }`}
+      >
+        {/* Thumbnail */}
+        <div className="w-full aspect-video rounded overflow-hidden bg-neutral-900 relative">
+          {isImage && (
+            <img
+              src={serveUrl}
+              alt={name}
+              loading="lazy"
+              className="w-full h-full object-cover"
+              onError={(e) => {
+                (e.target as HTMLImageElement).style.display = "none";
+              }}
+            />
+          )}
+          {isVideo && (
+            <>
+              <VideoFrameThumbnail src={serveUrl} />
+              {hovered && (
+                <video
+                  src={serveUrl}
+                  autoPlay
+                  muted
+                  loop
+                  playsInline
+                  className="absolute inset-0 w-full h-full object-cover"
+                />
+              )}
+            </>
+          )}
+          {!isImage && !isVideo && (
+            <div className="w-full h-full flex items-center justify-center">
+              <span className="text-[10px] font-medium text-neutral-600">{extension}</span>
+            </div>
+          )}
+
+          {/* "Added" badge — top-left */}
+          {used && (
+            <span className="absolute top-1 left-1 text-[9px] font-semibold leading-none px-1.5 py-[3px] rounded bg-neutral-950/80 text-panel-text-1">
+              Added
+            </span>
+          )}
+
+          {/* Duration badge — top-right, media only */}
+          {durationLabel && (
+            <span className="absolute top-1 right-1 text-[9px] font-medium leading-none px-1.5 py-[3px] rounded bg-neutral-950/80 text-panel-text-2 tabular-nums">
+              {durationLabel}
+            </span>
+          )}
+        </div>
+
+        {/* Filename caption */}
+        <span
+          className={`text-[10px] leading-tight text-center block w-full ${
+            used ? "text-panel-text-2" : "text-panel-text-4"
+          }`}
+          title={fullName}
+        >
+          {truncateMiddle(fullName, 22)}
+        </span>
+      </div>
+
+      {contextMenu && (
+        <ContextMenu
+          x={contextMenu.x}
+          y={contextMenu.y}
+          asset={asset}
+          onClose={() => setContextMenu(null)}
+          onCopy={onCopy}
+          onDelete={onDelete}
+          onRename={onRename}
+          onAddAtPlayhead={onAddAssetToTimeline}
+        />
+      )}
+    </>
+  );
+}
+
+export interface FontRowProps {
+  asset: string;
+  used: boolean;
+  onCopy: (path: string) => void;
+  isCopied: boolean;
+  onDelete?: (path: string) => void;
+  onRename?: (oldPath: string, newPath: string) => void;
+  onAddAssetToTimeline?: (path: string) => void;
+}
+
+/**
+ * Compact row for font assets (no meaningful thumbnail; show ext badge + name).
+ */
+export function FontRow({
+  asset,
+  used,
+  onCopy,
+  isCopied,
+  onDelete,
+  onRename,
+  onAddAssetToTimeline,
+}: FontRowProps) {
+  const [contextMenu, setContextMenu] = useState<{ x: number; y: number } | null>(null);
+  const name = basename(asset);
+  const extension = ext(asset);
+
+  return (
+    <>
+      <div
+        draggable
+        onClick={() => onCopy(asset)}
+        onDragStart={(e) => writeAssetDragData(e, asset)}
+        onContextMenu={(e) => openAssetContextMenu(e, setContextMenu)}
+        className={`px-2.5 py-1.5 flex items-center gap-2.5 cursor-pointer transition-colors ${
+          isCopied
+            ? "bg-studio-accent/10 border-l-2 border-studio-accent"
+            : "border-l-2 border-transparent hover:bg-neutral-800/50"
+        }`}
+      >
+        <div className="w-[50px] h-[32px] rounded overflow-hidden bg-neutral-900 flex-shrink-0 flex items-center justify-center">
+          <span className="text-[9px] font-medium text-neutral-700">{extension}</span>
+        </div>
+        <div className="min-w-0 flex-1">
+          <span
+            className={`text-xs font-medium truncate block ${used ? "text-panel-text-1" : "text-panel-text-3"}`}
+          >
+            {name}
+          </span>
+          <div className="flex items-center gap-1.5">
+            <span className="text-[10px] text-neutral-600 truncate">{extension}</span>
+            {used && (
+              <span className="text-[9px] font-medium text-panel-accent bg-panel-accent/10 px-1.5 py-px rounded">
+                in use
+              </span>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {contextMenu && (
+        <ContextMenu
+          x={contextMenu.x}
+          y={contextMenu.y}
+          asset={asset}
+          onClose={() => setContextMenu(null)}
+          onCopy={onCopy}
+          onDelete={onDelete}
+          onRename={onRename}
+          onAddAtPlayhead={onAddAssetToTimeline}
+        />
+      )}
+    </>
+  );
+}
diff --git a/packages/studio/src/hooks/useContextMenuDismiss.ts b/packages/studio/src/hooks/useContextMenuDismiss.ts
index c6d04579a6..796a84a495 100644
--- a/packages/studio/src/hooks/useContextMenuDismiss.ts
+++ b/packages/studio/src/hooks/useContextMenuDismiss.ts
@@ -1,26 +1,50 @@
 import { useCallback, useEffect, useRef, type RefObject } from "react";
 
 /**
- * Shared dismiss logic for context menus: closes on outside click or Escape.
- * Returns a ref to attach to the menu container element.
+ * Shared dismiss logic for context menus: closes on ANY pointerdown outside the
+ * menu (mouse, pen, or touch), or Escape.
+ *
+ * Two failure modes this guards against, both seen in the canvas editor:
+ *
+ * 1. The menu lives inside DomEditOverlay, whose own pointer handlers call
+ *    `event.stopPropagation()` on several branches (marquee start, shift-select).
+ *    A bubble-phase `mousedown`/`pointerdown` listener on `document` never fires
+ *    for those events — the overlay eats them first — so the menu stayed open.
+ *    Listening in the CAPTURE phase runs this dismiss BEFORE any bubble-phase
+ *    stopPropagation, so an outside press always closes the menu.
+ *
+ * 2. `mousedown` alone misses pointer/touch-only gestures. `pointerdown` is the
+ *    superset (fires for mouse, pen, and touch) and is exactly the event the
+ *    overlay itself acts on, so hooking it here dismisses on the same press that
+ *    starts a canvas gesture — no second click required.
  */
 export function useContextMenuDismiss(onClose: () => void): RefObject<HTMLDivElement | null> {
   const menuRef = useRef<HTMLDivElement>(null);
 
   const dismiss = useCallback(
-    (e: MouseEvent | KeyboardEvent) => {
-      if (e instanceof KeyboardEvent && e.key !== "Escape") return;
-      if (e instanceof MouseEvent && menuRef.current?.contains(e.target as Node)) return;
+    (e: PointerEvent | MouseEvent | KeyboardEvent) => {
+      if (e instanceof KeyboardEvent) {
+        if (e.key === "Escape") onClose();
+        return;
+      }
+      // Any press inside the menu is a menu interaction — leave it open (the
+      // item's own handler will close it after acting).
+      if (menuRef.current?.contains(e.target as Node)) return;
       onClose();
     },
     [onClose],
   );
 
   useEffect(() => {
-    document.addEventListener("mousedown", dismiss);
+    // Capture phase so overlay/iframe-side handlers that stopPropagation on the
+    // bubble phase can't swallow the dismiss. `pointerdown` covers mouse + touch
+    // + pen; keep `mousedown` too for any synthetic-mouse path that skips it.
+    document.addEventListener("pointerdown", dismiss, true);
+    document.addEventListener("mousedown", dismiss, true);
     document.addEventListener("keydown", dismiss);
     return () => {
-      document.removeEventListener("mousedown", dismiss);
+      document.removeEventListener("pointerdown", dismiss, true);
+      document.removeEventListener("mousedown", dismiss, true);
       document.removeEventListener("keydown", dismiss);
     };
   }, [dismiss]);
diff --git a/packages/studio/src/hooks/useDomEditTextCommits.ts b/packages/studio/src/hooks/useDomEditTextCommits.ts
index 36061f1a19..e87963dd17 100644
--- a/packages/studio/src/hooks/useDomEditTextCommits.ts
+++ b/packages/studio/src/hooks/useDomEditTextCommits.ts
@@ -174,7 +174,11 @@ export function useDomEditTextCommits({
       let editedElement: HTMLElement | null = null;
       let previousInlineValue: string | null = null;
       const operations = buildDomStyleCommitOperations(property, value, isImageBackgroundCommit);
-      const skipRefresh = property !== "z-index";
+      // Inline-style commits never full-reload the preview (that blanks the iframe
+      // until it re-renders): the live element was already mutated optimistically in
+      // apply(). z-index is no exception — setting `element.style.zIndex` restacks the
+      // element in-browser immediately, so a reload would only cost a black blink.
+      const skipRefresh = true;
 
       await runDomEditCommit({
         capture: () => {
diff --git a/packages/studio/src/hooks/useDomEditWiring.ts b/packages/studio/src/hooks/useDomEditWiring.ts
index c4c3706c1e..f598cb54e3 100644
--- a/packages/studio/src/hooks/useDomEditWiring.ts
+++ b/packages/studio/src/hooks/useDomEditWiring.ts
@@ -11,7 +11,6 @@ import { useCallback, useEffect, useRef } from "react";
 import type { DomEditSelection } from "../components/editor/domEditingTypes";
 import { STUDIO_GSAP_PANEL_ENABLED } from "../components/editor/manualEditingAvailability";
 import { usePlayerStore } from "../player";
-import { resolveTimelineIdForSelection } from "../utils/studioHelpers";
 import { useDomEditPreviewSync } from "./useDomEditPreviewSync";
 import { useGsapAnimationsForElement, usePopulateKeyframeCacheForFile } from "./useGsapTweenCache";
 import { useGsapAnimationFetchFallback } from "./useGsapAnimationFetchFallback";
@@ -171,14 +170,13 @@ export function useDomEditWiring({
 
   useEffect(() => {
     if (!domEditSelection?.id) return;
-    const { selectedElementId, elements, setSelectionAnchor } = usePlayerStore.getState();
-    // Resolve through the canonical resolver (source-file + ancestor + active-comp
-    // fallback) rather than a narrow domId/id match, so a sub-composition selection
-    // maps to the same clip the rest of the selection pipeline picks. Use the
-    // anchor-only setter: this is a DOM->store echo and must not collapse a group.
-    const key = resolveTimelineIdForSelection(domEditSelection, elements, activeCompPath);
-    if (key && key !== selectedElementId) setSelectionAnchor(key);
-  }, [domEditSelection, activeCompPath]);
+    const { selectedElementId, elements, setSelectedElementId } = usePlayerStore.getState();
+    const matchKey = elements.find(
+      (el) => el.domId === domEditSelection.id || el.id === domEditSelection.id,
+    );
+    const key = matchKey ? (matchKey.key ?? matchKey.id) : null;
+    if (key && key !== selectedElementId) setSelectedElementId(key);
+  }, [domEditSelection?.id]);
 
   // ── GSAP cache sync ──
 
diff --git a/packages/studio/src/hooks/useDomGeometryCommits.ts b/packages/studio/src/hooks/useDomGeometryCommits.ts
index ab81e4adfc..667f3caea9 100644
--- a/packages/studio/src/hooks/useDomGeometryCommits.ts
+++ b/packages/studio/src/hooks/useDomGeometryCommits.ts
@@ -61,14 +61,29 @@ export function useDomGeometryCommits({
   );
 
   const handleDomBoxSizeCommit = useCallback(
-    (selection: DomEditSelection, next: { width: number; height: number }) => {
+    (
+      selection: DomEditSelection,
+      next: { width: number; height: number },
+      offset?: { x: number; y: number },
+    ) => {
       if (isElementGsapTargeted(previewIframeRef.current, selection.element)) {
         const error = new Error(GSAP_CSS_FALLBACK_BLOCKED_MESSAGE);
         showToast(error.message, "error");
         return Promise.reject(error);
       }
       applyStudioBoxSize(selection.element, next);
-      return commitPositionPatchToHtml(selection, buildBoxSizePatches(selection.element), {
+      // Anchored-corner resize (NW/NE/SW) also moves the element to keep the
+      // opposite corner fixed. Apply the offset and emit BOTH patch sets in a
+      // SINGLE commit: one persist = one undo entry, and there is no
+      // intermediate re-stamp where the new size is in source but the anchor
+      // offset is not (that frame was the release "jump"). Both builders read
+      // the already-mutated live element, so concatenation is safe.
+      const patches = buildBoxSizePatches(selection.element);
+      if (offset) {
+        applyStudioPathOffset(selection.element, offset);
+        patches.push(...buildPathOffsetPatches(selection.element));
+      }
+      return commitPositionPatchToHtml(selection, patches, {
         label: "Resize layer box",
         coalesceKey: `box-size:${getDomEditTargetKey(selection)}`,
       });
diff --git a/packages/studio/src/hooks/useDomSelection.test.ts b/packages/studio/src/hooks/useDomSelection.test.ts
index b7628c4379..53f4524644 100644
--- a/packages/studio/src/hooks/useDomSelection.test.ts
+++ b/packages/studio/src/hooks/useDomSelection.test.ts
@@ -2,9 +2,7 @@
 
 import React, { act } from "react";
 import { createRoot } from "react-dom/client";
-import { afterEach, describe, expect, it, vi } from "vitest";
-import type { TimelineElement } from "../player";
-import { usePlayerStore } from "../player/store/playerStore";
+import { describe, expect, it, vi } from "vitest";
 import { installReactActEnvironment, makeSelection } from "./domSelectionTestHarness";
 import { useDomSelection } from "./useDomSelection";
 
@@ -14,7 +12,6 @@ interface HarnessProps {
   activeCompPath: string | null;
   projectId: string | null;
   refreshKey: number;
-  timelineElements?: TimelineElement[];
 }
 
 function renderHarness(initialProps: HarnessProps): {
@@ -35,7 +32,7 @@ function renderHarness(initialProps: HarnessProps): {
       compIdToSrc: new Map(),
       captionEditMode: false,
       previewIframeRef: { current: null },
-      timelineElements: props.timelineElements ?? [],
+      timelineElements: [],
       setSelectedTimelineElementId: vi.fn(),
       setRightCollapsed: vi.fn(),
       setRightPanelTab: vi.fn(),
@@ -67,10 +64,6 @@ function renderHarness(initialProps: HarnessProps): {
   };
 }
 
-afterEach(() => {
-  usePlayerStore.getState().reset();
-});
-
 function setupSelectedHarness() {
   const element = document.createElement("div");
   element.id = "headline";
@@ -138,31 +131,4 @@ describe("useDomSelection", () => {
     expect(harness.current().domEditSelection).toBe(selection);
     harness.cleanup();
   });
-
-  it("keeps preview marquee selections mirrored to the full timeline selection set", () => {
-    const first = document.createElement("div");
-    first.id = "clip-1";
-    const second = document.createElement("div");
-    second.id = "clip-2";
-    const firstSelection = makeSelection("First", first);
-    const secondSelection = makeSelection("Second", second);
-    const harness = renderHarness({
-      activeCompPath: "intro.html",
-      projectId: "project-1",
-      refreshKey: 0,
-      timelineElements: [
-        { id: "clip-1", domId: "clip-1", tag: "div", start: 0, duration: 1, track: 0 },
-        { id: "clip-2", domId: "clip-2", tag: "div", start: 1, duration: 1, track: 1 },
-      ],
-    });
-
-    act(() => harness.current().applyMarqueeSelection([secondSelection, firstSelection], false));
-
-    const state = usePlayerStore.getState();
-    expect([...state.selectedElementIds]).toEqual(["clip-2", "clip-1"]);
-    expect(state.selectedElementId).toBe("clip-2");
-    expect(harness.current().domEditGroupSelections).toHaveLength(2);
-    expect(harness.current().domEditSelection).toBe(secondSelection);
-    harness.cleanup();
-  });
 });
diff --git a/packages/studio/src/hooks/useDomSelection.ts b/packages/studio/src/hooks/useDomSelection.ts
index 3fd25c9158..72892dd744 100644
--- a/packages/studio/src/hooks/useDomSelection.ts
+++ b/packages/studio/src/hooks/useDomSelection.ts
@@ -4,7 +4,11 @@ import {
   getAllPreviewTargetsFromPointer,
   getPreviewTargetFromPointer,
 } from "../utils/studioPreviewHelpers";
-import { resolveTimelineIdForSelection, type RightPanelTab } from "../utils/studioHelpers";
+import {
+  findMatchingTimelineElementId,
+  findTimelineIdByAncestor,
+  type RightPanelTab,
+} from "../utils/studioHelpers";
 import {
   domEditSelectionsTargetSame,
   domEditSelectionInGroup,
@@ -20,7 +24,6 @@ import {
   type DomEditSelection,
 } from "../components/editor/domEditing";
 import { reapplyPositionEditsAfterSeek } from "../components/editor/manualEdits";
-import { usePlayerStore } from "../player/store/playerStore";
 
 // ── Types ──
 
@@ -92,6 +95,7 @@ export interface UseDomSelectionReturn {
   ) => Promise<DomEditSelection | null>;
   handleTimelineElementSelect: (element: TimelineElement | null) => Promise<void>;
   refreshDomEditSelectionFromPreview: (selection: DomEditSelection) => Promise<void>;
+  refreshDomEditGroupSelectionsFromPreview: (selections: DomEditSelection[]) => Promise<void>;
   applyMarqueeSelection: (selections: DomEditSelection[], additive: boolean) => void;
 }
 
@@ -122,16 +126,11 @@ export function useDomSelection({
 
   // ── Refs ──
 
-  const rightPanelTabRef = useRef(rightPanelTab);
-  rightPanelTabRef.current = rightPanelTab;
   const domEditSelectionRef = useRef<DomEditSelection | null>(domEditSelection);
   const domEditGroupSelectionsRef = useRef<DomEditSelection[]>(domEditGroupSelections);
   const domEditHoverSelectionRef = useRef<DomEditSelection | null>(domEditHoverSelection);
   const activeGroupElementRef = useRef<HTMLElement | null>(activeGroupElement);
   const compositionIdentityRef = useRef({ activeCompPath, projectId });
-  // Monotonic token so a rapid A->B timeline-clip select can't let A's slower async
-  // resolution land after B and restore the wrong selection.
-  const timelineSelectSeqRef = useRef(0);
 
   // Keep refs in sync with state
   domEditSelectionRef.current = domEditSelection;
@@ -206,42 +205,22 @@ export function useDomSelection({
       if (nextSelection) {
         if (options?.revealPanel !== false) {
           setRightCollapsed(false);
-          // Keep the Variables tab in place — selecting elements is part of
-          // the bind flow there; yanking to Design would lose the context.
-          if (rightPanelTabRef.current !== "variables") {
-            setRightPanelTab("design");
-          }
-        }
-        // Mirror the whole DOM group to the store so it stays the single source of
-        // truth: a single selection collapses to one id; a preserved group (echo
-        // during a gesture) keeps every member instead of shrinking to the anchor.
-        const anchorId = resolveTimelineIdForSelection(
-          nextSelection,
-          timelineElements,
-          activeCompPath,
-        );
-        const groupIds = nextGroup
-          .map((selection) =>
-            resolveTimelineIdForSelection(selection, timelineElements, activeCompPath),
-          )
-          .filter((id): id is string => Boolean(id));
-        if (groupIds.length > 0) {
-          usePlayerStore.getState().setSelection(groupIds, anchorId);
-        } else {
-          setSelectedTimelineElementId(anchorId);
+          setRightPanelTab("design");
         }
+        const nextSelectedTimelineId =
+          findMatchingTimelineElementId(nextSelection, timelineElements) ??
+          findTimelineIdByAncestor(
+            nextSelection.element,
+            timelineElements,
+            nextSelection.sourceFile || "index.html",
+          );
+        setSelectedTimelineElementId(nextSelectedTimelineId);
         return;
       }
 
       setSelectedTimelineElementId(null);
     },
-    [
-      setSelectedTimelineElementId,
-      timelineElements,
-      setRightCollapsed,
-      setRightPanelTab,
-      activeCompPath,
-    ],
+    [setSelectedTimelineElementId, timelineElements, setRightCollapsed, setRightPanelTab],
   );
 
   const clearDomSelection = useCallback(() => {
@@ -381,15 +360,12 @@ export function useDomSelection({
   const handleTimelineElementSelect = useCallback(
     async (element: TimelineElement | null) => {
       if (!STUDIO_INSPECTOR_PANELS_ENABLED) return;
-      const seq = ++timelineSelectSeqRef.current;
       if (!element) {
         applyDomSelection(null, { revealPanel: false });
         return;
       }
 
       const selection = await buildDomSelectionForTimelineElement(element);
-      // A newer selection superseded this one while we were resolving — drop the stale result.
-      if (seq !== timelineSelectSeqRef.current) return;
       if (selection) applyDomSelection(selection);
     },
     [applyDomSelection, buildDomSelectionForTimelineElement],
@@ -424,6 +400,55 @@ export function useDomSelection({
     [activeCompPath, applyDomSelection, buildDomSelectionFromTarget, previewIframeRef],
   );
 
+  const refreshDomEditGroupSelectionsFromPreview = useCallback(
+    // fallow-ignore-next-line complexity
+    async (selections: DomEditSelection[]) => {
+      const iframe = previewIframeRef.current;
+      let doc: Document | null = null;
+      try {
+        doc = iframe?.contentDocument ?? null;
+      } catch {
+        return;
+      }
+      if (!doc) return;
+
+      const nextGroup: DomEditSelection[] = [];
+      for (const selection of selections) {
+        const element = findElementForSelection(doc, selection, activeCompPath);
+        if (!element) continue;
+        const nextSelection = await buildDomSelectionFromTarget(element);
+        if (nextSelection) nextGroup.push(nextSelection);
+      }
+      if (nextGroup.length === 0) return;
+
+      const currentSelection = domEditSelectionRef.current;
+      const nextSelection =
+        nextGroup.find((selection) => domEditSelectionsTargetSame(selection, currentSelection)) ??
+        nextGroup[0] ??
+        null;
+
+      domEditSelectionRef.current = nextSelection;
+      domEditGroupSelectionsRef.current = nextGroup;
+      setDomEditSelection(nextSelection);
+      setDomEditGroupSelections(nextGroup);
+
+      if (nextSelection) {
+        setSelectedTimelineElementId(
+          findMatchingTimelineElementId(nextSelection, timelineElements),
+        );
+      } else {
+        setSelectedTimelineElementId(null);
+      }
+    },
+    [
+      activeCompPath,
+      buildDomSelectionFromTarget,
+      setSelectedTimelineElementId,
+      timelineElements,
+      previewIframeRef,
+    ],
+  );
+
   // ── Effects ──
 
   // Clear hover unconditionally on composition/project/preview change
@@ -505,23 +530,16 @@ export function useDomSelection({
       domEditGroupSelectionsRef.current = nextGroup;
       setDomEditSelection(nextSelection);
       setDomEditGroupSelections(nextGroup);
-      const nextTimelineId = resolveTimelineIdForSelection(
-        nextSelection,
-        timelineElements,
-        activeCompPath,
-      );
-      const nextTimelineIds = nextGroup
-        .map((selection) =>
-          resolveTimelineIdForSelection(selection, timelineElements, activeCompPath),
-        )
-        .filter((id): id is string => Boolean(id));
-      if (nextTimelineIds.length > 0) {
-        usePlayerStore.getState().setSelection(nextTimelineIds, nextTimelineId);
-      } else {
-        setSelectedTimelineElementId(null);
-      }
+      const nextTimelineId =
+        findMatchingTimelineElementId(nextSelection, timelineElements) ??
+        findTimelineIdByAncestor(
+          nextSelection.element,
+          timelineElements,
+          nextSelection.sourceFile || "index.html",
+        );
+      setSelectedTimelineElementId(nextTimelineId);
     },
-    [applyDomSelection, timelineElements, setSelectedTimelineElementId, activeCompPath],
+    [applyDomSelection, timelineElements, setSelectedTimelineElementId],
   );
 
   // Disabled inspector effect
@@ -558,6 +576,7 @@ export function useDomSelection({
     buildDomSelectionForTimelineElement,
     handleTimelineElementSelect,
     refreshDomEditSelectionFromPreview,
+    refreshDomEditGroupSelectionsFromPreview,
     applyMarqueeSelection,
   };
 }