@hyperframes/studio 0.8.143 → 0.8.145

package/dist/player.js

@@ -1,8 +1,8 @@
 import {
   Player
-} from "./chunk-H2DUOXTF.js";
-import "./chunk-LOVBLSMR.js";
-import "./chunk-TFLU2MGI.js";
+} from "./chunk-NZPJUZKT.js";
+import "./chunk-Y2OHHNM2.js";
+import "./chunk-6JY3MTIX.js";
 import "./chunk-PZ5AY32C.js";
 export {
   Player

package/dist/ui.d.ts

@@ -115,7 +115,7 @@ type StyledProps<T extends ElementType> = Omit<ComponentPropsWithoutRef<T>, "cla
 /** Forces the settled open look for a gallery shot; CSS-only, open state stays controlled. */
 type PopupPreviewState = "open";
 /** Where the portal puts the popup. `null` keeps it inline, next to its trigger. */
-type PortalContainer$1 = ComponentPropsWithoutRef<typeof Menu$1.Portal>["container"];
+type PortalContainer = ComponentPropsWithoutRef<typeof Menu$1.Portal>["container"];
 /**
  * Chrome shared by every floating panel (`Popover` too); callers add their own shadow token.
  */
@@ -125,8 +125,8 @@ interface PositionedProps {
     side?: "top" | "bottom" | "left" | "right";
     align?: "start" | "center" | "end";
     sideOffset?: number;
-    /** Portal target. Pass the shadow root when the trigger lives in one. */
-    container?: PortalContainer$1;
+    /** Portal target. Pass the shadow root when the trigger lives in one; `null` keeps it inline. */
+    container?: PortalContainer;
     /** Names the popup for assistive tech. A menu with no name is unlabelled. */
     "aria-label"?: string;
     className?: string;
@@ -174,7 +174,6 @@ declare function MenuRadioItem({ className, children, ...props }: MenuRadioItemP
 /** A hairline between two groups of items. */
 declare function MenuSeparator({ className, ...props }: StyledProps<typeof Menu$1.Separator>): react_jsx_runtime.JSX.Element;
 
-type PortalContainer = ComponentPropsWithoutRef<typeof Popover$1.Portal>["container"];
 interface PopoverProps extends Omit<ComponentPropsWithoutRef<typeof Popover$1.Root>, "children"> {
     /** A single element. It becomes the trigger; no wrapper is added around it. */
     trigger: ReactElement;
@@ -185,7 +184,7 @@ interface PopoverProps extends Omit<ComponentPropsWithoutRef<typeof Popover$1.Ro
     sideOffset?: number;
     /** Points the popup at its trigger. Off by default; the default gap from the trigger grows by the arrow's height. */
     arrow?: boolean;
-    /** Portal target. Pass the shadow root when the trigger lives in one. */
+    /** Portal target. Pass the shadow root when the trigger lives in one; `null` keeps it inline. */
     container?: PortalContainer;
     /** Names the popup for assistive tech. */
     "aria-label"?: string;

package/dist/ui.js

@@ -30,7 +30,7 @@ import {
   fieldBase,
   fieldText,
   popupSurface
-} from "./chunk-LOVBLSMR.js";
+} from "./chunk-Y2OHHNM2.js";
 import "./chunk-PZ5AY32C.js";
 export {
   Button,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyperframes/studio",
-  "version": "0.8.143",
+  "version": "0.8.145",
   "description": "",
   "repository": {
     "type": "git",
@@ -60,12 +60,12 @@
     "dockview-react": "8.3.1",
     "gsap": "^3.13.0",
     "mediabunny": "^1.45.3",
-    "@hyperframes/core": "0.8.143",
-    "@hyperframes/player": "0.8.143",
-    "@hyperframes/sdk": "0.8.143",
-    "@hyperframes/studio-server": "0.8.143",
-    "@hyperframes/parsers": "0.8.143",
-    "@hyperframes/shader-transitions": "0.8.143"
+    "@hyperframes/core": "0.8.145",
+    "@hyperframes/sdk": "0.8.145",
+    "@hyperframes/player": "0.8.145",
+    "@hyperframes/shader-transitions": "0.8.145",
+    "@hyperframes/parsers": "0.8.145",
+    "@hyperframes/studio-server": "0.8.145"
   },
   "devDependencies": {
     "@tailwindcss/vite": "^4.3.3",
@@ -82,7 +82,7 @@
     "vite": "^6.4.2",
     "vitest": "^4.1.11",
     "zustand": "^5.0.0",
-    "@hyperframes/producer": "0.8.143"
+    "@hyperframes/producer": "0.8.145"
   },
   "peerDependencies": {
     "react": "19",

package/src/components/StudioLeftPanels.tsx

@@ -75,8 +75,8 @@ export const StudioLeftPanels = memo(function StudioLeftPanels({
         return;
       }
       await waitForPendingDomEditSaves();
-      const { format, quality, fps } = getPersistedRenderSettings();
-      await renderQueue.startRender({ composition: comp, format, quality, fps });
+      const { format, quality, fps, gpu } = getPersistedRenderSettings();
+      await renderQueue.startRender({ composition: comp, format, quality, fps, gpu });
     },
     [renderQueue, waitForPendingDomEditSaves],
   );

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

@@ -5,6 +5,7 @@ import { createRoot } from "react-dom/client";
 import { describe, expect, it, vi } from "vitest";
 import type { DomEditSelection } from "./domEditing";
 import { DomEditGroupChrome, DomEditSelectionChrome } from "./DomEditSelectionChrome";
+import { RESIZE_HANDLE_HIT_PX } from "./domEditOverlayGeometry";
 import { SELECTION_CHROME } from "./motionPathLayerNode";
 
 (globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
@@ -283,9 +284,12 @@ describe("DomEditSelectionChrome with body drag off", () => {
   it("keeps the resize and rotate handles working", () => {
     const { host, gestures, cleanup } = renderChrome(false);
     const corner = host.querySelector<HTMLElement>('[style*="nwse-resize"]')!;
+    corner.querySelector("[data-resize-corner]")!.getBoundingClientRect = () =>
+      ({ left: 7, top: 9 }) as DOMRect;
     press(corner);
     expect(gestures.startGesture).toHaveBeenCalledWith("resize", expect.anything(), {
       resizeHandle: "nw",
+      resizeCorner: { x: 7, y: 9 },
     });
     press(host.querySelector('[aria-label="Rotate selection"]')!);
     expect(gestures.startGesture).toHaveBeenCalledWith("rotate", expect.anything());
@@ -327,3 +331,102 @@ describe("DomEditSelectionChrome with body drag off", () => {
     act(() => root.unmount());
   });
 });
+
+describe("DomEditSelectionChrome corner handles", () => {
+  type Inset = { top: number; right: number; bottom: number; left: number };
+  function cornerHits(
+    rect: { left: number; top: number; width: number; height: number },
+    cropOutlineInsetPx?: Inset,
+  ) {
+    const { selection, host, root } = selectionFixture(document.createElement("div"), "#t", true);
+    (selection.capabilities as { canCrop: boolean }).canCrop = false;
+    act(() => {
+      root.render(
+        <DomEditSelectionChrome
+          selection={selection}
+          overlayRect={{ ...rect, editScaleX: 1, editScaleY: 1 }}
+          allowCanvasMovement
+          allowBodyDrag
+          cropOutlineInsetPx={cropOutlineInsetPx}
+          boxRef={createRef()}
+          boxChromeClass=""
+          boxClipPath={undefined}
+          selectionKey="t"
+          groupSelectionCount={0}
+          gestures={{ startGesture: vi.fn() } as never}
+          onStyleCommit={vi.fn()}
+          onBoxClick={vi.fn()}
+        />,
+      );
+    });
+    const hits = [
+      ...host.querySelectorAll<HTMLElement>('[style*="nwse-resize"], [style*="nesw-resize"]'),
+    ].map((handle) => {
+      const corner = handle.querySelector<HTMLElement>("[data-resize-corner]")!;
+      const left = parseFloat(handle.style.left);
+      const top = parseFloat(handle.style.top);
+      return {
+        left,
+        top,
+        corner: [left + parseFloat(corner.style.left), top + parseFloat(corner.style.top)],
+      };
+    });
+    act(() => root.unmount());
+    host.remove();
+    return hits;
+  }
+
+  const NO_INSET: Inset = { top: 0, right: 0, bottom: 0, left: 0 };
+  it.each([
+    ["14x8", 14, 8, NO_INSET],
+    ["4x4", 4, 4, NO_INSET],
+    ["24x24", 24, 24, NO_INSET],
+    ["cropped 40x40 showing 16x16", 40, 40, { top: 12, right: 12, bottom: 12, left: 12 }],
+  ])(
+    "reach at most a quarter of each side into a small %s pick, so its middle moves",
+    (_name, width, height, inset) => {
+      const rect = { left: 100, top: 100, width, height };
+      const pick = {
+        left: rect.left + inset.left,
+        top: rect.top + inset.top,
+        right: rect.left + width - inset.right,
+        bottom: rect.top + height - inset.bottom,
+      };
+      const quarterX = (pick.right - pick.left) / 4;
+      const quarterY = (pick.bottom - pick.top) / 4;
+      const hits = cornerHits(rect, inset === NO_INSET ? undefined : inset);
+      expect(hits.map((hit) => hit.corner)).toEqual(
+        expect.arrayContaining([
+          [pick.left, pick.top],
+          [pick.right, pick.top],
+          [pick.left, pick.bottom],
+          [pick.right, pick.bottom],
+        ]),
+      );
+      expect(hits).toHaveLength(4);
+      for (const hit of hits) {
+        const reachX =
+          hit.left < (pick.left + pick.right) / 2
+            ? hit.left + RESIZE_HANDLE_HIT_PX - pick.left
+            : pick.right - hit.left;
+        const reachY =
+          hit.top < (pick.top + pick.bottom) / 2
+            ? hit.top + RESIZE_HANDLE_HIT_PX - pick.top
+            : pick.bottom - hit.top;
+        expect(reachX, JSON.stringify(hit)).toBeLessThanOrEqual(quarterX);
+        expect(reachY, JSON.stringify(hit)).toBeLessThanOrEqual(quarterY);
+      }
+    },
+  );
+
+  it("stay centred on the corners of a pick large enough to hold them", () => {
+    expect(cornerHits({ left: 100, top: 100, width: 32, height: 40 })).toEqual(
+      expect.arrayContaining([
+        { left: 92, top: 92, corner: [100, 100] },
+        { left: 124, top: 92, corner: [132, 100] },
+        { left: 92, top: 132, corner: [100, 140] },
+        { left: 124, top: 132, corner: [132, 140] },
+      ]),
+    );
+  });
+});

package/src/components/editor/DomEditSelectionChrome.tsx

@@ -30,27 +30,40 @@ const RESIZE_HANDLE_DEFS: Array<{
 type CropInset = { top: number; right: number; bottom: number; left: number };
 const NO_CROP_INSET: CropInset = { top: 0, right: 0, bottom: 0, left: 0 };
 
-function resizeHandleStyle(
+function resizeHandleLayout(
   def: (typeof RESIZE_HANDLE_DEFS)[number],
   overlayRect: { left: number; top: number; width: number; height: number },
   cropInset?: CropInset,
-): React.CSSProperties {
+): { style: React.CSSProperties; anchor: React.CSSProperties } {
   const half = RESIZE_HANDLE_HIT_PX / 2;
   const inset = cropInset ?? NO_CROP_INSET;
-  const style: React.CSSProperties = { cursor: def.cursor, touchAction: "none" };
   // Position relative to the overlay container (not the selection box).
   // This ensures the dots render as siblings of the box border div — strictly
   // above it — rather than as children where the parent border can visually
   // overlap the dot circle at the corner.
-  style.left =
+  const cornerX =
     def.x === "left"
-      ? overlayRect.left + inset.left - half
-      : overlayRect.left + overlayRect.width - inset.right - half;
-  style.top =
+      ? overlayRect.left + inset.left
+      : overlayRect.left + overlayRect.width - inset.right;
+  const cornerY =
     def.y === "top"
-      ? overlayRect.top + inset.top - half
-      : overlayRect.top + overlayRect.height - inset.bottom - half;
-  return style;
+      ? overlayRect.top + inset.top
+      : overlayRect.top + overlayRect.height - inset.bottom;
+  const slideOutToFreeMiddleX =
+    (def.x === "left" ? -1 : 1) *
+    Math.max(0, half - (overlayRect.width - inset.left - inset.right) / 4);
+  const slideOutToFreeMiddleY =
+    (def.y === "top" ? -1 : 1) *
+    Math.max(0, half - (overlayRect.height - inset.top - inset.bottom) / 4);
+  return {
+    style: {
+      cursor: def.cursor,
+      touchAction: "none",
+      left: cornerX - half + slideOutToFreeMiddleX,
+      top: cornerY - half + slideOutToFreeMiddleY,
+    },
+    anchor: { left: half - slideOutToFreeMiddleX, top: half - slideOutToFreeMiddleY },
+  };
 }
 
 type GestureHandlers = ReturnType<typeof createDomEditOverlayGestureHandlers>;
@@ -242,26 +255,39 @@ export function DomEditSelectionChrome({
         {canManipulate &&
           !editing &&
           selection.capabilities.canApplyManualSize &&
-          RESIZE_HANDLE_DEFS.map((def) =>
-            def.handle !== "se" && !selection.capabilities.canApplyManualOffset ? null : (
+          RESIZE_HANDLE_DEFS.map((def) => {
+            if (def.handle !== "se" && !selection.capabilities.canApplyManualOffset) return null;
+            const layout = resizeHandleLayout(def, overlayRect, cropOutlineInsetPx ?? undefined);
+            return (
               <div
                 key={def.handle}
                 className="pointer-events-auto absolute flex h-4 w-4 items-center justify-center"
                 style={{
-                  ...resizeHandleStyle(def, overlayRect, cropOutlineInsetPx ?? undefined),
+                  ...layout.style,
                   // Cursor rotates with the object: bucket the corner's base
                   // diagonal + element rotation into the 8 CSS resize cursors.
                   cursor: resolveRotatedResizeCursor(def.handle, overlayRect.angle ?? 0),
                 }}
                 onPointerDown={(e) => {
                   e.stopPropagation();
-                  gestures.startGesture("resize", e, { resizeHandle: def.handle });
+                  const corner = e.currentTarget
+                    .querySelector("[data-resize-corner]")
+                    ?.getBoundingClientRect();
+                  gestures.startGesture("resize", e, {
+                    resizeHandle: def.handle,
+                    resizeCorner: corner && { x: corner.left, y: corner.top },
+                  });
                 }}
               >
+                <span
+                  data-resize-corner
+                  className="pointer-events-none absolute"
+                  style={layout.anchor}
+                />
                 <div className="pointer-events-none h-[12px] w-[12px] rounded-full border-[1.5px] border-studio-accent bg-white shadow-[0_0_3px_rgba(0,0,0,0.45)]" />
               </div>
-            ),
-          )}
+            );
+          })}
       </div>
       {/* Crop owns its element-local oriented frame. Keep it outside the chrome's
           rotated plane or a rotated selection applies the angle twice. */}

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

@@ -9,7 +9,7 @@ import type { DomEditLayerItem } from "./domEditingTypes";
 import { createRafThrottle, LayersPanel, sortLayersByZIndex } from "./LayersPanel";
 import { isLayerDraggable } from "./useLayerDrag";
 import { liveTime } from "../../player";
-import { sceneSwapFor } from "../../player/sceneSwap";
+import { announcePreviewDocumentLoaded, sceneSwapFor } from "../../player/sceneSwap";
 
 (globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
 
@@ -284,12 +284,12 @@ describe("LayersPanel preview promotion", () => {
     mocks.collect.mockClear();
 
     act(() => {
-      a.dispatchEvent(new Event("load"));
+      announcePreviewDocumentLoaded(a);
     });
     expect(mocks.collect).not.toHaveBeenCalled();
 
     act(() => {
-      b.dispatchEvent(new Event("load"));
+      announcePreviewDocumentLoaded(b);
     });
     expect(collectedRootIds()).toEqual(["b"]);
   });
@@ -325,7 +325,7 @@ describe("LayersPanel preview promotion", () => {
     mocks.previewIframeRef.current = iframe;
     usePreviewIframeStore.setState({ iframe });
     act(() => root.render(createElement(LayersPanel)));
-    act(() => void iframe.dispatchEvent(new Event("load")));
+    act(() => void announcePreviewDocumentLoaded(iframe));
 
     const rows = [...host.querySelectorAll("[data-layer-index]")];
     expect(rows).toHaveLength(2);

package/src/components/editor/LayersPanel.tsx

@@ -89,8 +89,8 @@ interface CollapsedState {
   [key: string]: boolean;
 }
 
-/** Studio state the panel reads; passed by hosts outside Studio's providers. Keep previewIframeRef stable,
- * and bump refreshKey when the preview document is rebuilt without an iframe load. */
+/** Studio state the panel reads; passed by hosts outside Studio's providers. Keep previewIframeRef stable;
+ * a host with its own player calls announcePreviewDocumentLoaded on each new page, or bumps refreshKey. */
 export type LayersPanelHost = Pick<
   StudioShellValue,
   "previewIframeRef" | "activeCompPath" | "showToast"

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

@@ -5,6 +5,7 @@ import { createRoot, type Root } from "react-dom/client";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { studioEditLifecycle, type StudioWriteResult } from "../../webmcp/writeCoordinator";
 import { usePreviewIframeStore } from "../../player/store/previewIframeStore";
+import { announcePreviewDocumentLoaded } from "../../player/sceneSwap";
 import { TopologyLens } from "./TopologyLens";
 
 (globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
@@ -259,7 +260,7 @@ describe("TopologyLens", () => {
     mount();
     begin();
 
-    act(() => iframe?.dispatchEvent(new Event("load")));
+    act(() => announcePreviewDocumentLoaded(iframe!));
     expect(host?.querySelector('[data-topology-lens="hidden"]')).not.toBeNull();
 
     begin();
@@ -286,7 +287,7 @@ describe("TopologyLens", () => {
     root = null;
 
     expect(vi.getTimerCount()).toBe(1);
-    expect(removeListener).toHaveBeenCalledWith("load", expect.any(Function));
+    expect(removeListener).toHaveBeenCalledWith("hf-preview-document-loaded", expect.any(Function));
     expect(studioEditLifecycle.getSnapshot()).toMatchObject({ phase: "dispatching" });
     act(() => vi.advanceTimersByTime(0));
     expect(vi.getTimerCount()).toBe(0);
@@ -312,10 +313,10 @@ describe("TopologyLens", () => {
       ref.current = b;
       usePreviewIframeStore.getState().setIframe(b);
     });
-    act(() => a.dispatchEvent(new Event("load")));
+    act(() => announcePreviewDocumentLoaded(a));
     expect(host.querySelector('[data-topology-lens="hidden"]')).toBeNull();
 
-    act(() => b.dispatchEvent(new Event("load")));
+    act(() => announcePreviewDocumentLoaded(b));
     expect(host.querySelector('[data-topology-lens="hidden"]')).not.toBeNull();
     usePreviewIframeStore.setState({ iframe: null });
   });

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

@@ -259,6 +259,42 @@ describe("anchored corner resize — the release commit feeds the center-pin off
     expect(offset.y).toBeCloseTo(-(size.height - ORIGIN.height) / 2, 0);
   });
 
+  it("puts the grabbed corner on the pointer when the size rounds to whole px", () => {
+    const { handlers, commits } = buildHarness();
+    const grabbed = { x: ORIGIN_CENTER.x + 100, y: ORIGIN_CENTER.y + 50 };
+    handlers.startGesture("resize", evt(grabbed.x, grabbed.y), {
+      resizeHandle: "se",
+      resizeCorner: grabbed,
+    });
+    // Radial scale 1.503: the pointer asks for 300.6 x 150.3, Studio writes 301 x 150.
+    for (let i = 0; i < 5; i++)
+      handlers.onPointerMove(evt(ORIGIN_CENTER.x + 150.3, ORIGIN_CENTER.y + 75.15));
+    handlers.onPointerUp(evt(ORIGIN_CENTER.x + 150.3, ORIGIN_CENTER.y + 75.15));
+
+    const { size, offset } = commits[0]!;
+    expect(size).toEqual({ width: 301, height: 150 });
+    const corner = {
+      x: ORIGIN_CENTER.x + (size.width - ORIGIN.width) / 2 + offset!.x + size.width / 2,
+      y: ORIGIN_CENTER.y + (size.height - ORIGIN.height) / 2 + offset!.y + size.height / 2,
+    };
+    expect(corner.x).toBeCloseTo(ORIGIN_CENTER.x + 300.6 / 2, 6);
+    expect(corner.y).toBeCloseTo(ORIGIN_CENTER.y + 150.3 / 2, 6);
+  });
+
+  it("moves the grabbed corner with the cursor when the press lands beside it", () => {
+    const { handlers, commits } = buildHarness();
+    handlers.startGesture("resize", evt(ORIGIN_CENTER.x + 106, ORIGIN_CENTER.y), {
+      resizeHandle: "se",
+      resizeCorner: { x: ORIGIN_CENTER.x + 100, y: ORIGIN_CENTER.y },
+    });
+    handlers.onPointerMove(evt(ORIGIN_CENTER.x + 156, ORIGIN_CENTER.y));
+    handlers.onPointerUp(evt(ORIGIN_CENTER.x + 156, ORIGIN_CENTER.y));
+
+    expect(commits).toHaveLength(1);
+    expect(commits[0]!.size.width).toBeCloseTo(300, 1);
+    expect(commits[0]!.size.height).toBeCloseTo(150, 1);
+  });
+
   it("keeps the centre on the first frame when the authored translate is a percent", async () => {
     const { orientedOverlayRect } = await import("./domEditOverlayGeometry");
     authored.percent = 0.25;

package/src/components/editor/domEditOverlayGestures.ts

@@ -93,6 +93,7 @@ export interface GestureState {
    * when the corner geometry can't be measured (member creation still succeeded).
    */
   resizeFixedCenterStart?: { x: number; y: number };
+  resizePressFromCorner?: { x: number; y: number };
 }
 
 export interface GroupGestureState {

package/src/components/editor/domEditOverlayStartGesture.ts

@@ -147,6 +147,7 @@ export function startGesture(
     selection?: DomEditSelection;
     rect?: OverlayRect | null;
     resizeHandle?: ResizeHandle;
+    resizeCorner?: { x: number; y: number };
     at?: EditMoment;
   },
 ): boolean {
@@ -304,6 +305,10 @@ export function startGesture(
       manualEditDragToken,
       snapContext,
       resizeHandle: kind === "resize" ? (options?.resizeHandle ?? "se") : undefined,
+      resizePressFromCorner:
+        kind === "resize" && options?.resizeCorner
+          ? { x: e.clientX - options.resizeCorner.x, y: e.clientY - options.resizeCorner.y }
+          : undefined,
       resizeFixedCenterStart,
     };
     if (kind === "resize") {

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

@@ -1,5 +1,6 @@
 import { describe, expect, it } from "vitest";
 import {
+  resizeRemainderShift,
   resolveCenterResizeScale,
   resolveCenterResizeSize,
   resolveRotatedResizeCursor,
@@ -33,11 +34,21 @@ describe("resolveCenterResizeScale — radial distance from the center", () => {
     expect(
       resolveCenterResizeScale({
         centerStart: { x: 100, y: 100 },
-        pointerStart: { x: 101, y: 100 },
+        pointerStart: { x: 100.2, y: 100 },
         pointer: { x: 400, y: 400 },
       }),
     ).toBe(1);
   });
+
+  it("scales a 4x4 pick whose grabbed corner sits under 3px from its center", () => {
+    expect(
+      resolveCenterResizeScale({
+        centerStart: { x: 100, y: 100 },
+        pointerStart: { x: 102, y: 102 },
+        pointer: { x: 104, y: 104 },
+      }),
+    ).toBeCloseTo(2, 9);
+  });
 });
 
 describe("resolveCenterResizeSize — rotation is a non-event (radial distance)", () => {
@@ -129,3 +140,72 @@ describe("resolveRotatedResizeCursor", () => {
     expect(resolveRotatedResizeCursor("se", -90)).toBe("nesw-resize");
   });
 });
+
+describe("resizeRemainderShift", () => {
+  const written = { width: 301, height: 150 };
+  const wanted = { width: 300.6, height: 150.3 };
+  const centre = { x: 400, y: 300 };
+  // Local (u, v) px map to overlay px through a 1.5x scale, a rotation and an optional x mirror.
+  const box = (angle: number, mirror: 1 | -1) => {
+    const at = (u: number, v: number) => ({
+      x: centre.x + 1.5 * (mirror * u * Math.cos(angle) - v * Math.sin(angle)),
+      y: centre.y + 1.5 * (mirror * u * Math.sin(angle) + v * Math.cos(angle)),
+    });
+    const [w, h] = [written.width / 2, written.height / 2];
+    return { at, corners: { nw: at(-w, -h), ne: at(w, -h), sw: at(-w, h), se: at(w, h) } };
+  };
+
+  // A rotated parent composes into the same map, and a mirror moves each handle onto another local corner.
+  it.each([
+    [30, 1, -1, -1],
+    [30, 1, 1, -1],
+    [30, 1, -1, 1],
+    [30, 1, 1, 1],
+    [-120, 1, 1, 1],
+    [90, 1, 1, -1],
+    [0, -1, -1, 1],
+    [150, -1, 1, 1],
+    [180, -1, -1, -1],
+  ] as const)("at %i deg, mirror %i, lands local corner (%i, %i)", (deg, mirror, su, sv) => {
+    const { at, corners } = box((deg * Math.PI) / 180, mirror);
+    const grabbed = at((su * written.width) / 2, (sv * written.height) / 2);
+    const grab = { x: grabbed.x - centre.x, y: grabbed.y - centre.y };
+    const shift = resizeRemainderShift(corners, grab, { wanted, written });
+    const target = at((su * wanted.width) / 2, (sv * wanted.height) / 2);
+    expect(grabbed.x + shift.x).toBeCloseTo(target.x, 9);
+    expect(grabbed.y + shift.y).toBeCloseTo(target.y, 9);
+  });
+});
+
+describe("resizeRemainderShift on a skewed box", () => {
+  // A 30 deg child of a parent scaled 2 x 1 renders as a parallelogram; a 10 x 200 bar flips a projected sign.
+  const angle = Math.PI / 6;
+  const at = (u: number, v: number) => ({
+    x: 400 + 2 * (u * Math.cos(angle) - v * Math.sin(angle)),
+    y: 300 + (u * Math.sin(angle) + v * Math.cos(angle)),
+  });
+  const written = { width: 10, height: 200 };
+  const wanted = { width: 10.4, height: 199.7 };
+  const corners = { nw: at(-5, -100), ne: at(5, -100), sw: at(-5, 100), se: at(5, 100) };
+
+  it.each([
+    [1, 1],
+    [-1, -1],
+    [1, -1],
+    [-1, 1],
+  ] as const)("lands local corner (%i, %i) on the wanted size", (su, sv) => {
+    const grabbed = at((su * written.width) / 2, (sv * written.height) / 2);
+    const grab = { x: grabbed.x - 400, y: grabbed.y - 300 };
+    const shift = resizeRemainderShift(corners, grab, { wanted, written });
+    const target = at((su * wanted.width) / 2, (sv * wanted.height) / 2);
+    expect(grabbed.x + shift.x).toBeCloseTo(target.x, 9);
+    expect(grabbed.y + shift.y).toBeCloseTo(target.y, 9);
+  });
+});
+
+it("shifts nothing for a box that renders with no area", () => {
+  const p = { x: 400, y: 300 };
+  const corners = { nw: p, ne: p, sw: p, se: p };
+  const sizes = { wanted: { width: 300.6, height: 150.3 }, written: { width: 301, height: 150 } };
+  expect(resizeRemainderShift(corners, { x: 1, y: 1 }, sizes)).toEqual({ x: 0, y: 0 });
+});

package/src/components/editor/domEditResizeLocal.ts

@@ -14,6 +14,7 @@
  * rendered center, feeding the center-pin translate through the manual-offset
  * channel) lives in useDomEditOverlayGestures.ts.
  */
+import type { FixedCorner } from "./domEditOverlayGeometry";
 import type { ResizeHandle } from "./domEditOverlayGestures";
 
 /** Minimum element edge in LOCAL px — mirrors the old MIN_RESIZE_EDGE_PX clamp
@@ -21,11 +22,11 @@ import type { ResizeHandle } from "./domEditOverlayGestures";
 const MIN_RESIZE_LOCAL_PX = 1;
 
 /**
- * Below this pointer-to-center distance (overlay px) the gesture started at (or
+ * Below this start-to-center distance (overlay px) the gesture started at (or
  * effectively at) the center, so the ratio is degenerate (division by ~0). Bail to
- * scale 1 rather than blow up.
+ * scale 1 rather than blow up. A handle starts from its corner, so a pick a few px across still resizes.
  */
-const DEGENERATE_START_DIST_PX = 3;
+const DEGENERATE_START_DIST_PX = 0.5;
 
 /**
  * The proportional scale factor for a center-anchored resize: the ratio of the
@@ -112,6 +113,29 @@ export function resolveRotatedResizeCursor(handle: ResizeHandle, rotationDeg: nu
   return CURSORS_8[bucket]!;
 }
 
+type Size = { width: number; height: number };
+/** The size the pointer asks for and the whole-px size written for it. */
+export type ResizeDraftSizes = { wanted: Size; written: Size };
+
+/** Overlay shift of the pinned center that puts the grabbed corner where the wanted size would: the
+ *  written size is whole px, so half the remainder moves along the element's own rendered edges. */
+export function resizeRemainderShift(
+  corners: Record<FixedCorner, { x: number; y: number }>,
+  grab: { x: number; y: number },
+  { wanted, written }: ResizeDraftSizes,
+): { x: number; y: number } {
+  const u = { x: corners.ne.x - corners.nw.x, y: corners.ne.y - corners.nw.y };
+  const v = { x: corners.sw.x - corners.nw.x, y: corners.sw.y - corners.nw.y };
+  // `grab` in edge coordinates: which side of each edge the grabbed corner is, even on a skewed box.
+  const det = u.x * v.y - u.y * v.x;
+  if (!det) return { x: 0, y: 0 };
+  const su = Math.sign((grab.x * v.y - grab.y * v.x) / det);
+  const sv = Math.sign((u.x * grab.y - u.y * grab.x) / det);
+  const kw = (su * (wanted.width - written.width)) / (2 * written.width);
+  const kh = (sv * (wanted.height - written.height)) / (2 * written.height);
+  return { x: u.x * kw + v.x * kh, y: u.y * kw + v.y * kh };
+}
+
 /** 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. */

package/src/components/editor/domEditingLayers.ts

@@ -1,3 +1,4 @@
+import { PREVIEW_ONLY_ATTRS } from "@hyperframes/core/studio-preview-mark";
 import { knownSourceAnswer, probeSourceElement, type ProbeTarget } from "./probeSourceElement";
 import { isAudibleVideoNode } from "../../player/lib/timelineElementHelpers";
 import type { PatchOperation } from "../../utils/sourcePatcher";
@@ -55,6 +56,8 @@ function getTextFieldLabel(
   return `Text ${index + 1}`;
 }
 
+const NOT_COPIED_ATTRS = new Set<string>(["style", ...PREVIEW_ONLY_ATTRS]);
+
 function buildTextField(
   el: HTMLElement,
   index: number,
@@ -70,7 +73,7 @@ function buildTextField(
     value: el.textContent ?? "",
     tagName,
     attributes: Array.from(el.attributes)
-      .filter((attribute) => attribute.name !== "style")
+      .filter((attribute) => !NOT_COPIED_ATTRS.has(attribute.name))
       .map((attribute) => ({
         name: attribute.name,
         value: attribute.value,