@hyperframes/studio 0.8.97 → 0.8.99

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

@@ -0,0 +1,122 @@
+// @vitest-environment happy-dom
+
+import React, { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, expect, it, vi } from "vitest";
+import { makeSelection } from "../../hooks/domSelectionTestHarness";
+import type { DomEditSelection } from "./domEditing";
+import "./domEditOverlayTestMocks";
+import { DomEditOverlay } from "./DomEditOverlay";
+
+(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+HTMLElement.prototype.setPointerCapture ??= () => {};
+HTMLElement.prototype.releasePointerCapture ??= () => {};
+
+const pointTarget = vi.hoisted(() => ({ current: null as HTMLElement | null }));
+const rect = vi.hoisted(() => ({ current: null as Record<string, number> | null }));
+vi.mock("../../utils/studioPreviewHelpers", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("../../utils/studioPreviewHelpers")>()),
+  getPreviewTargetFromPointer: () => pointTarget.current,
+}));
+vi.mock("./useDomEditOverlayRects", () => ({
+  useDomEditOverlayRects: () => ({
+    overlayRect: rect.current,
+    overlayRectRef: rect,
+    setOverlayRect: () => undefined,
+    hoverRect: null,
+    groupOverlayItems: [],
+    groupOverlayItemsRef: { current: [] },
+    setGroupOverlayItems: () => undefined,
+    childRects: [],
+  }),
+}));
+
+let root: Root;
+const onCanvasMouseDown = vi.fn();
+const onSelectionChange = vi.fn();
+
+function mount() {
+  const host = document.createElement("div");
+  document.body.append(host);
+  root = createRoot(host);
+  const element = document.createElement("h1");
+  document.body.append(element);
+  return { host, element, hover: makeSelection("Title", element) };
+}
+
+function render(
+  hoverSelection: DomEditSelection | null,
+  selection: DomEditSelection | null = null,
+) {
+  act(() =>
+    root.render(
+      <DomEditOverlay
+        iframeRef={{ current: document.createElement("iframe") }}
+        activeCompositionPath={null}
+        selection={selection}
+        hoverSelection={hoverSelection}
+        onCanvasMouseDown={onCanvasMouseDown}
+        onCanvasPointerMove={() => Promise.resolve(null)}
+        onCanvasPointerLeave={() => undefined}
+        onSelectionChange={onSelectionChange}
+        onBlockedMove={() => undefined}
+        onPathOffsetCommit={() => undefined}
+        onGroupPathOffsetCommit={() => undefined}
+        onBoxSizeCommit={() => undefined}
+        onRotationCommit={() => undefined}
+        onMarqueeSelect={() => undefined}
+      />,
+    ),
+  );
+}
+
+// Like Chrome: a default-prevented pointerdown sends no compatibility mousedown.
+function press(target: Element, shiftKey = false) {
+  const init = { bubbles: true, cancelable: true, button: 0, pointerId: 1, shiftKey };
+  const down = new PointerEvent("pointerdown", init);
+  act(() => void target.dispatchEvent(down));
+  if (!down.defaultPrevented)
+    act(() => void target.dispatchEvent(new MouseEvent("mousedown", init)));
+  act(() => void target.dispatchEvent(new PointerEvent("pointerup", init)));
+  act(() => void target.dispatchEvent(new MouseEvent("click", init)));
+}
+
+afterEach(() => {
+  act(() => root.unmount());
+  onCanvasMouseDown.mockClear();
+  onSelectionChange.mockClear();
+  pointTarget.current = null;
+  rect.current = null;
+  document.body.innerHTML = "";
+});
+
+it.each([
+  ["a press on empty canvas", false],
+  ["a shift+click add", true],
+])("after %s, the next click on an element selects it", (_, shiftFirst) => {
+  const { host, element, hover } = mount();
+  const overlay = () => host.firstElementChild!;
+
+  pointTarget.current = shiftFirst ? element : null;
+  render(shiftFirst ? hover : null);
+  press(overlay(), shiftFirst);
+  expect(onCanvasMouseDown).not.toHaveBeenCalled();
+
+  pointTarget.current = element;
+  render(hover);
+  press(overlay());
+  expect(onCanvasMouseDown).toHaveBeenCalledTimes(1);
+});
+
+it("a shift+click on a selected box that cannot move toggles it once", () => {
+  const { host, element, hover } = mount();
+  hover.capabilities.canApplyManualOffset = false;
+  rect.current = { left: 20, top: 30, width: 100, height: 40, editScaleX: 1, editScaleY: 1 };
+  pointTarget.current = element;
+  render(hover, hover);
+
+  press(host.querySelector('[data-dom-edit-selection-box="true"]')!, true);
+
+  expect(onSelectionChange).toHaveBeenCalledTimes(1);
+  expect(onCanvasMouseDown).not.toHaveBeenCalled();
+});

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

@@ -0,0 +1,129 @@
+// @vitest-environment happy-dom
+import { describe, expect, it, vi } from "vitest";
+import { prepareCropResize, readCropFollowingResize, saveCropResize } from "./cropResize";
+import type { DomEditSelection } from "./domEditingTypes";
+import {
+  applyStudioBoxSizeDraft,
+  captureStudioBoxSize,
+  clearStudioBoxSize,
+  restoreStudioBoxSize,
+} from "./manualEdits";
+import { withInlineLayoutBox } from "../../hooks/domSelectionTestHarness";
+
+function sizedElement(width: number, height: number, clip: string): HTMLElement {
+  const el = withInlineLayoutBox(document.createElement("div"));
+  el.style.cssText = `width: ${width}px; height: ${height}px; clip-path: ${clip}`;
+  return el;
+}
+
+describe("crop during a resize", () => {
+  it("follows the box only while a resize draft is live", () => {
+    const el = sizedElement(300, 200, "inset(10px 60px 20px 30px round 8px)");
+    const before = captureStudioBoxSize(el);
+    const crop = (top: number, right: number, bottom: number, left: number) => ({
+      top,
+      right,
+      bottom,
+      left,
+      radius: 8,
+    });
+    applyStudioBoxSizeDraft(el, { width: 600, height: 400 });
+    expect(readCropFollowingResize(el)).toEqual(crop(20, 120, 40, 60));
+    restoreStudioBoxSize(el, before);
+    // An animated width is not a resize: the crop keeps its pixels.
+    el.style.width = "600px";
+    expect(readCropFollowingResize(el)).toEqual(crop(10, 60, 20, 30));
+  });
+
+  it("leaves the crop alone when the box kept its size (a resize saved as scale)", () => {
+    const el = sizedElement(300, 200, "inset(0px 60px 0px 0px)");
+    applyStudioBoxSizeDraft(el, { width: 450, height: 300 });
+    const stage = prepareCropResize(el);
+    clearStudioBoxSize(el);
+    el.style.width = "300px";
+    el.style.height = "200px";
+    expect(stage()).toBeNull();
+    expect(el.style.getPropertyValue("clip-path")).toBe("inset(0px 60px 0px 0px)");
+  });
+
+  it("puts the crop back, !important and all, when its save fails", async () => {
+    const el = sizedElement(300, 200, "none");
+    el.style.setProperty("clip-path", "inset(0px 60px 0px 0px)", "important");
+    const stage = prepareCropResize(el);
+    el.style.width = "450px";
+    let priorityWhileSaving = "";
+    const commit = vi.fn(() => {
+      priorityWhileSaving = el.style.getPropertyPriority("clip-path");
+      return Promise.reject(new Error("save failed"));
+    });
+    const selection = { element: el } as unknown as DomEditSelection;
+    await expect(saveCropResize(stage, selection, commit, "undo-key")).rejects.toThrow(
+      "save failed",
+    );
+
+    const value = "inset(0px 90px 0px 0px) !important";
+    expect(commit.mock.calls[0]![1]).toEqual([
+      { type: "inline-style", property: "clip-path", value },
+    ]);
+    expect(priorityWhileSaving).toBe("important");
+    expect(el.style.getPropertyValue("clip-path")).toBe("inset(0px 60px 0px 0px)");
+    expect(el.style.getPropertyPriority("clip-path")).toBe("important");
+  });
+
+  it("scales the crop once: the stage ends the draft", () => {
+    const el = sizedElement(300, 200, "inset(0px 60px 0px 0px)");
+    applyStudioBoxSizeDraft(el, { width: 450, height: 300 });
+    prepareCropResize(el)();
+    expect(readCropFollowingResize(el)).toMatchObject({ right: 90 });
+  });
+
+  it("leaves a crop edited while the size saved, and a tweened crop, alone", () => {
+    const edited = sizedElement(300, 200, "inset(0px 60px 0px 0px)");
+    const stageEdited = prepareCropResize(edited);
+    edited.style.width = "450px";
+    edited.style.setProperty("clip-path", "inset(0px 100px 0px 0px)");
+    expect(stageEdited()).toBeNull();
+
+    const tweened = sizedElement(300, 200, "inset(0px 60px 0px 0px)");
+    const child = { targets: () => [tweened], vars: { clipPath: "inset(0px 120px 0px 0px)" } };
+    Object.assign(window, { __timelines: { main: { getChildren: () => [child] } } });
+    const stageTweened = prepareCropResize(tweened);
+    tweened.style.width = "450px";
+    expect(stageTweened()).toBeNull();
+    Object.assign(window, { __timelines: undefined });
+  });
+
+  it("decides before the write, which may add a width tween of its own", () => {
+    const el = sizedElement(300, 200, "inset(0px 60px 0px 0px)");
+    const stage = prepareCropResize(el);
+    const tween = { targets: () => [el], vars: { width: 600 }, duration: () => 4 };
+    Object.assign(window, { __timelines: { main: { getChildren: () => [tween] } } });
+    el.style.width = "600px";
+    expect(stage()?.patch.value).toBe("inset(0px 120px 0px 0px)");
+    Object.assign(window, { __timelines: undefined });
+  });
+
+  it("follows only the axes GSAP does not tween, while dragging and once saved", () => {
+    const resize = (vars: object, duration: number) => {
+      const el = sizedElement(300, 200, "inset(20px 60px 20px 0px)");
+      const tween = { targets: () => [el], vars, duration: () => duration };
+      // The tween's timeline is not the first key, as after a soft reload.
+      const timelines = { sub: { getChildren: () => [] }, main: { getChildren: () => [tween] } };
+      Object.assign(window, { __timelines: timelines });
+      applyStudioBoxSizeDraft(el, { width: 600, height: 400 });
+      const { top, right } = readCropFollowingResize(el)!;
+      const saved = prepareCropResize(el)()?.patch.value ?? null;
+      Object.assign(window, { __timelines: undefined });
+      return [[top, right], saved];
+    };
+    // A held width still scales; a height tween leaves the width free.
+    expect(resize({ width: 473 }, 0)).toEqual([[40, 120], "inset(40px 120px 40px 0px)"]);
+    expect(resize({ height: 300 }, 4)).toEqual([[20, 120], "inset(20px 120px 20px 0px)"]);
+    // A width tween, in either keyframe form, leaves the height free.
+    const widthOnly = [[40, 60], "inset(40px 60px 40px 0px)"];
+    const percent = { "0%": { width: 300 }, "100%": { width: 600 } };
+    expect(resize({ keyframes: percent }, 4)).toEqual(widthOnly);
+    expect(resize({ keyframes: { width: [300, 600] } }, 4)).toEqual(widthOnly);
+    expect(resize({ width: 600, height: 400 }, 4)).toEqual([[20, 60], null]);
+  });
+});

package/src/components/editor/cropResize.ts

@@ -0,0 +1,143 @@
+import type { PatchOperation } from "../../utils/sourcePatcher";
+import type { CommitMutation } from "../../hooks/gsapScriptCommitTypes";
+import type { DomEditSelection } from "./domEditingTypes";
+import { gsapAnimatesProperty } from "./gsapAnimatesProperty";
+import { elementHasNonHoldTween } from "../../hooks/gsapRuntimeKeyframes";
+import { buildInsetClipPathSides, type ParsedInsetClipPathSides } from "./clipPathHelpers";
+import { hasCropInsets, readElementCropInsets } from "./domEditOverlayCrop";
+import { forgetStudioBoxSizeDraftBase, readStudioBoxSizeDraftBase } from "./manualEditsDom";
+
+interface Box {
+  width: number;
+  height: number;
+}
+
+const boxOf = (element: HTMLElement): Box => ({
+  width: element.offsetWidth,
+  height: element.offsetHeight,
+});
+
+type Follows = Record<keyof Box, boolean>;
+
+/** Per axis, whether a crop follows a resize: not when GSAP drives the clip or tweens that axis's size. */
+function cropFollows(element: HTMLElement): Follows {
+  const clip = gsapAnimatesProperty(element, "clipPath");
+  return {
+    width: !clip && !elementHasNonHoldTween(element, ["width"]),
+    height: !clip && !elementHasNonHoldTween(element, ["height"]),
+  };
+}
+
+function scaleCrop(
+  crop: ParsedInsetClipPathSides,
+  from: Box,
+  to: Box,
+  follows: Follows,
+): ParsedInsetClipPathSides {
+  const sx = follows.width && from.width > 0 ? to.width / from.width : 1;
+  const sy = follows.height && from.height > 0 ? to.height / from.height : 1;
+  return {
+    top: crop.top * sy,
+    right: crop.right * sx,
+    bottom: crop.bottom * sy,
+    left: crop.left * sx,
+    radius: crop.radius,
+  };
+}
+
+/** The element's crop as the crop UI draws it: it follows the box while a resize draft is live. */
+export function readCropFollowingResize(element: HTMLElement): ParsedInsetClipPathSides | null {
+  const crop = readElementCropInsets(element);
+  const base = readStudioBoxSizeDraftBase(element);
+  return crop && base ? scaleCrop(crop, base, boxOf(element), cropFollows(element)) : crop;
+}
+
+export interface CropResize {
+  patch: PatchOperation;
+  revert: () => void;
+}
+
+/** Call before a resize lands. Once the new size is live, the stage writes the crop that keeps the
+ *  same part of the element in view and returns its patch, or null when nothing needs rescaling. */
+export function prepareCropResize(element: HTMLElement): () => CropResize | null {
+  const from = readStudioBoxSizeDraftBase(element) ?? boxOf(element);
+  const before = element.style.getPropertyValue("clip-path");
+  const priority = element.style.getPropertyPriority("clip-path");
+  // Decided before the write lands: a W edit may add a width keyframe of its own.
+  const follows = cropFollows(element);
+  const crop = readElementCropInsets(element);
+  return () => {
+    forgetStudioBoxSizeDraftBase(element);
+    const to = boxOf(element);
+    // A crop edited while the size saved was drawn in the new box already.
+    const untouched = element.style.getPropertyValue("clip-path") === before;
+    if (!crop || !hasCropInsets(crop) || !untouched || !(to.width > 0 && to.height > 0))
+      return null;
+    const clip = buildInsetClipPathSides(scaleCrop(crop, from, to, follows), crop.radius);
+    // Unchanged when the box is (a resize saved as a `scale`) or no resized axis follows.
+    if (clip === buildInsetClipPathSides(crop, crop.radius)) return null;
+    element.style.setProperty("clip-path", clip, priority);
+    return {
+      patch: {
+        type: "inline-style",
+        property: "clip-path",
+        value: priority ? `${clip} !important` : clip,
+      },
+      revert: () => {
+        if (before) element.style.setProperty("clip-path", before, priority);
+        else element.style.removeProperty("clip-path");
+      },
+    };
+  };
+}
+
+type PatchCommit = (
+  selection: DomEditSelection,
+  patches: PatchOperation[],
+  options: { label: string; coalesceKey: string; coalesceMs?: number },
+) => Promise<void>;
+
+/** Stage the crop and save it under the resize's undo key, taking it back off the element if that fails. */
+export async function saveCropResize(
+  stage: () => CropResize | null,
+  selection: DomEditSelection,
+  commit: PatchCommit,
+  coalesceKey: string,
+): Promise<void> {
+  const crop = stage();
+  if (!crop) return;
+  try {
+    await commit(selection, [crop.patch], {
+      label: "Resize layer",
+      coalesceKey,
+      coalesceMs: Number.POSITIVE_INFINITY,
+    });
+  } catch (error) {
+    crop.revert();
+    throw error;
+  }
+}
+
+let sizeWriteCounter = 0;
+
+/** A property write that may size the element (a W/H field on an animated element): when it
+ *  does, its writes and the rescaled crop share one undo step. */
+export async function writeSizeWithCrop(
+  selection: DomEditSelection,
+  properties: Record<string, unknown>,
+  mutation: CommitMutation | null,
+  commit: PatchCommit,
+  write: (keyed?: CommitMutation) => Promise<void>,
+): Promise<void> {
+  if (!mutation || !("width" in properties || "height" in properties)) return write();
+  const stage = prepareCropResize(selection.element);
+  const coalesceKey = `size-write:${++sizeWriteCounter}`;
+  const undoStep = { coalesceKey, coalesceMs: Number.POSITIVE_INFINITY };
+  const keyed: CommitMutation = (s, m, options) => mutation(s, m, { ...options, ...undoStep });
+  if (mutation.batch) {
+    const batch = mutation.batch;
+    keyed.batch = (calls, options) => batch(calls, { ...options, ...undoStep });
+  }
+  await write(keyed);
+  await saveCropResize(stage, selection, commit, coalesceKey);
+}

package/src/components/editor/domEditOverlayCrop.ts

@@ -1,5 +1,9 @@
 import { composeElementTransform, type PlanarTransformOps } from "./domEditOverlayTransform";
-import { parseInsetClipPathSides, type ClipPathInsetSides } from "./clipPathHelpers";
+import {
+  parseInsetClipPathSides,
+  type ClipPathInsetSides,
+  type ParsedInsetClipPathSides,
+} from "./clipPathHelpers";
 
 export type CropEdge = "top" | "right" | "bottom" | "left";
 
@@ -29,23 +33,69 @@ export function cropRectFromInsets(
   };
 }
 
-/**
- * Current inset crop of an element (inline first, computed fallback).
- * Zeros = no clip (croppable, nothing cropped yet). `null` = the element
- * carries a clip-path this tool cannot represent (circle/polygon/non-px
- * inset) — croppers must not lift, edit, or restore it, or the clip gets
- * silently replaced or destroyed on deselect.
- */
-export function readElementCropInsets(
-  element: HTMLElement,
-): (ClipPathInsetSides & { radius: number }) | null {
+// A selected croppable element shows uncropped so the crop UI can dim what is cut away. A rule keyed on its
+// identity does that, so the element's own clip-path stays the one record undo, redo and panel edits rewrite.
+const cropLifts = new WeakMap<HTMLElement, { rule: HTMLStyleElement; sheetClip?: string }>();
+
+function liftSelector(element: HTMLElement): string | null {
+  const quote = (value: string) => `"${value.replace(/["\\]/g, "\\$&")}"`;
+  const hfId = element.getAttribute("data-hf-id");
+  if (hfId) return `[data-hf-id=${quote(hfId)}]`;
+  return element.id ? `[id=${quote(element.id)}]` : null;
+}
+
+export function liftElementCrop(element: HTMLElement): void {
+  const selector = liftSelector(element);
+  if (!selector || cropLifts.has(element)) return;
+  const doc = element.ownerDocument;
+  const rule = doc.createElement("style");
+  rule.textContent = `${selector}{clip-path:none!important}`;
+  (doc.head ?? doc.documentElement).append(rule);
+  cropLifts.set(element, { rule });
+}
+
+export function dropElementCropLift(element: HTMLElement): void {
+  cropLifts.get(element)?.rule.remove();
+  cropLifts.delete(element);
+}
+
+export function isElementCropLifted(element: HTMLElement): boolean {
+  return cropLifts.has(element);
+}
+
+const computedClipPath = (element: HTMLElement) =>
+  element.ownerDocument.defaultView?.getComputedStyle(element).clipPath.trim() || "";
+
+/** The element's clip-path, inline first, then the stylesheet's as it is without the lift. */
+function readElementClipPath(element: HTMLElement): string {
   const inline = element.style.getPropertyValue("clip-path").trim();
-  const value =
-    inline || element.ownerDocument.defaultView?.getComputedStyle(element).clipPath.trim() || "";
+  const lift = cropLifts.get(element);
+  if (inline || !lift) return inline || computedClipPath(element);
+  // Only inline writes happen while selected, so the stylesheet's clip is read once per lift.
+  if (lift.sheetClip === undefined) {
+    const { parentNode, nextSibling } = lift.rule;
+    lift.rule.remove();
+    lift.sheetClip = computedClipPath(element);
+    parentNode?.insertBefore(lift.rule, nextSibling);
+  }
+  return lift.sheetClip;
+}
+
+/** Zeros = no clip yet. `null` = a clip this tool cannot represent (circle/polygon/non-px inset):
+ *  croppers must not lift, edit, or restore it, or deselect silently replaces or destroys it. */
+function parseCropClipPath(value: string): ParsedInsetClipPathSides | null {
   if (!value || value === "none") return { top: 0, right: 0, bottom: 0, left: 0, radius: 0 };
   return parseInsetClipPathSides(value);
 }
 
+export function readElementCropInsets(element: HTMLElement): ParsedInsetClipPathSides | null {
+  return parseCropClipPath(readElementClipPath(element));
+}
+
+export function hasCropInsets(insets: ClipPathInsetSides): boolean {
+  return insets.top > 0 || insets.right > 0 || insets.bottom > 0 || insets.left > 0;
+}
+
 export interface CropInsetDragInput {
   edge: CropEdge;
   startInsets: ClipPathInsetSides;
@@ -117,8 +167,8 @@ export function hugRectForElement(
   rect: CropScreenRect & { editScaleX: number; editScaleY: number },
   element: HTMLElement,
 ): CropScreenRect {
-  const insets = readElementCropInsets(element);
-  // Uneditable clip (null) can't be hugged — show the full element rect.
+  const insets = isElementCropLifted(element) ? null : readElementCropInsets(element);
+  // Uneditable or lifted clip — show the full element rect.
   if (!insets || (insets.top <= 0 && insets.right <= 0 && insets.bottom <= 0 && insets.left <= 0))
     return rect;
   return cropRectFromInsets(rect, insets, rect.editScaleX, rect.editScaleY);

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

@@ -0,0 +1,44 @@
+// @vitest-environment happy-dom
+import { afterEach, describe, expect, it } from "vitest";
+import {
+  dropElementCropLift,
+  hugRectForElement,
+  liftElementCrop,
+  readElementCropInsets,
+} from "./domEditOverlayCrop";
+
+afterEach(() => {
+  document.head.innerHTML = "";
+  document.body.innerHTML = "";
+});
+
+function cropped(style: string): HTMLElement {
+  const el = document.createElement("div");
+  el.setAttribute("data-hf-id", "hf-a");
+  el.style.cssText = style;
+  document.body.append(el);
+  return el;
+}
+
+describe("crop lift", () => {
+  it("shows the element uncropped over its inline clip, and drop takes the rule away", () => {
+    const el = cropped("clip-path: inset(0px 60px 0px 0px)");
+    liftElementCrop(el);
+    expect(getComputedStyle(el).clipPath).toBe("none");
+    expect(el.style.getPropertyValue("clip-path")).toBe("inset(0px 60px 0px 0px)");
+    dropElementCropLift(el);
+    expect(document.head.querySelectorAll("style")).toHaveLength(0);
+    expect(getComputedStyle(el).clipPath).toBe("inset(0px 60px 0px 0px)");
+  });
+
+  it("still reads a stylesheet crop while lifted, and the hover hug shows the full box", () => {
+    const sheet = document.createElement("style");
+    sheet.textContent = '[data-hf-id="hf-a"] { clip-path: inset(0px 60px 0px 0px); }';
+    document.head.append(sheet);
+    const el = cropped("width: 300px");
+    liftElementCrop(el);
+    expect(readElementCropInsets(el)).toMatchObject({ right: 60 });
+    const rect = { left: 0, top: 0, width: 300, height: 200, editScaleX: 1, editScaleY: 1 };
+    expect(hugRectForElement(rect, el)).toEqual(rect);
+  });
+});

package/src/components/editor/domEditOverlayGestures.ts

@@ -11,6 +11,7 @@ import type { SnapContext } from "./snapTargetCollection";
 import type { SnapGuidesState } from "./SnapGuideOverlay";
 import type { PreviewMouseDownOptions } from "../../hooks/usePreviewInteraction";
 import { logSelect } from "../../utils/selectDebug";
+import { roundTo3 } from "../../utils/rounding";
 
 export type GestureKind = "drag" | "resize" | "rotate";
 
@@ -197,10 +198,6 @@ function normalizeAngleDelta(delta: number): number {
   return ((((delta + 180) % 360) + 360) % 360) - 180;
 }
 
-function roundAngle(angle: number): number {
-  return Math.round(angle * 10) / 10;
-}
-
 export function resolveDomEditRotationGesture(input: {
   centerX: number;
   centerY: number;
@@ -223,7 +220,7 @@ export function resolveDomEditRotationGesture(input: {
   return {
     angle: input.snap
       ? Math.round(angle / ROTATION_SNAP_DEGREES) * ROTATION_SNAP_DEGREES
-      : roundAngle(angle),
+      : roundTo3(angle),
   };
 }
 

package/src/components/editor/elementPositionOffset.ts

@@ -1,5 +1,6 @@
 import type { PatchOperation } from "../../utils/sourcePatcher";
 import { LAYER_REVEAL_PRIOR_POSITION_ATTR } from "../../player/lib/timelineElementHelpers";
+import { roundTo3 } from "../../utils/rounding";
 
 interface LayoutBox {
   left: number;
@@ -30,8 +31,8 @@ export function applyElementPositionOffset(
 ): PatchOperation[] | ElementOffsetRefusal {
   const cs = el.ownerDocument.defaultView?.getComputedStyle(el);
   if (!cs) return "anchored";
-  const dx = Math.round(gestureOffset.x - readDragStart(el, "x"));
-  const dy = Math.round(gestureOffset.y - readDragStart(el, "y"));
+  const dx = roundTo3(gestureOffset.x - readDragStart(el, "x"));
+  const dy = roundTo3(gestureOffset.y - readDragStart(el, "y"));
   // A Layers-panel pick lifts a static element to relative for display only.
   const lifted = el.getAttribute(LAYER_REVEAL_PRIOR_POSITION_ATTR) === "static";
   const isStatic = lifted || !/^(relative|absolute|fixed|sticky)$/.test(cs.position);
@@ -41,8 +42,8 @@ export function applyElementPositionOffset(
   const previous = { position: el.style.position, left: el.style.left, top: el.style.top };
   const before = layoutBox(el);
   if (isStatic) el.style.position = "relative";
-  el.style.left = `${Math.round(baseLeft) + dx}px`;
-  el.style.top = `${Math.round(baseTop) + dy}px`;
+  el.style.left = `${roundTo3(baseLeft + dx)}px`;
+  el.style.top = `${roundTo3(baseTop + dy)}px`;
   const after = layoutBox(el);
   const shiftedExactly =
     Math.abs(after.left - before.left - dx) <= 1 &&

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

@@ -146,6 +146,20 @@ describe("studio manual edits", () => {
     expect(card.style.getPropertyValue("rotate")).toBe(`var(${STUDIO_ROTATION_PROP}, 0deg)`);
   });
 
+  it("keeps sub-pixel offsets, and box sizes on whole px so GSAP reads a -50% centring exactly", () => {
+    const document = createDocument(`<div id="card" style="width: 160px; height: 90px"></div>`);
+    const card = document.getElementById("card") as HTMLElement;
+    mockBoundingRect(card, 160, 90);
+
+    applyStudioPathOffsetDraft(card, { x: 14.25, y: -8.5 });
+    applyStudioBoxSizeDraft(card, { width: 240.4, height: 135.6 });
+
+    expect(card.style.getPropertyValue(STUDIO_OFFSET_X_PROP)).toBe("14.25px");
+    expect(card.style.getPropertyValue(STUDIO_OFFSET_Y_PROP)).toBe("-8.5px");
+    expect(card.style.getPropertyValue("width")).toBe("240px");
+    expect(card.style.getPropertyValue("height")).toBe("136px");
+  });
+
   it("applies box sizes through CSS dimensions and flex sizing overrides", () => {
     const document = createDocument(`
       <div style="display: flex; flex-direction: row">
@@ -188,24 +202,24 @@ describe("studio manual edits", () => {
     );
     const card = document.getElementById("card") as HTMLElement;
 
-    applyStudioRotation(card, { angle: 24.24 });
+    applyStudioRotation(card, { angle: 24.2468 });
 
-    expect(readStudioRotation(card)).toEqual({ angle: 24.2 });
-    expect(card.style.getPropertyValue(STUDIO_ROTATION_PROP)).toBe("24.2deg");
+    expect(readStudioRotation(card)).toEqual({ angle: 24.247 });
+    expect(card.style.getPropertyValue(STUDIO_ROTATION_PROP)).toBe("24.247deg");
     expect(card.style.getPropertyValue("rotate")).toContain("8deg");
     expect(card.style.getPropertyValue("rotate")).toContain(STUDIO_ROTATION_PROP);
     expect(card.style.getPropertyValue("transform-origin")).toBe("center center");
 
-    applyStudioRotationDraft(card, { angle: -12.26 });
-    expect(readStudioRotation(card)).toEqual({ angle: -12.3 });
-    expect(card.style.getPropertyValue("rotate")).toBe("calc(8deg + -12.3deg)");
+    applyStudioRotationDraft(card, { angle: -12.2604 });
+    expect(readStudioRotation(card)).toEqual({ angle: -12.26 });
+    expect(card.style.getPropertyValue("rotate")).toBe("calc(8deg + -12.26deg)");
     expect(card.style.getPropertyValue("transform-origin")).toBe("center center");
 
     const snapshot = captureStudioRotation(card);
     applyStudioRotationDraft(card, { angle: 45 });
     restoreStudioRotation(card, snapshot);
-    expect(readStudioRotation(card)).toEqual({ angle: -12.3 });
-    expect(card.style.getPropertyValue("rotate")).toBe("calc(8deg + -12.3deg)");
+    expect(readStudioRotation(card)).toEqual({ angle: -12.26 });
+    expect(card.style.getPropertyValue("rotate")).toBe("calc(8deg + -12.26deg)");
     expect(card.style.getPropertyValue("transform-origin")).toBe("center center");
   });