@hyperframes/studio 0.8.98 → 0.8.100

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/domEditOverlayStartGesture.test.ts

@@ -0,0 +1,83 @@
+// @vitest-environment happy-dom
+import { afterEach, describe, expect, it, vi } from "vitest";
+import type { DomEditSelection } from "./domEditing";
+import type { GestureState } from "./domEditOverlayGestures";
+import { createDomEditOverlayGestureHandlers } from "./useDomEditOverlayGestures";
+
+afterEach(() => {
+  delete (window as { gsap?: unknown }).gsap;
+  delete (window as { __timelines?: unknown }).__timelines;
+  document.body.innerHTML = "";
+});
+
+const PRESS = {
+  clientX: 10,
+  clientY: 10,
+  pointerId: 1,
+  button: 0,
+  preventDefault() {},
+  stopPropagation() {},
+  currentTarget: { setPointerCapture() {} },
+};
+
+/** Presses a drag on the element and returns the gesture it started. */
+function pressDrag(element: HTMLElement): GestureState | null {
+  const opts = pressOptions(element);
+  expect(
+    createDomEditOverlayGestureHandlers(opts as never).startGesture("drag", PRESS as never),
+  ).toBe(true);
+  return opts.gestureRef.current;
+}
+
+function pressOptions(element: HTMLElement) {
+  const ref = <T>(current: T) => ({ current });
+  const selection = { element, capabilities: { canApplyManualOffset: true } };
+  return {
+    selectionRef: ref(selection as unknown as DomEditSelection),
+    overlayRectRef: ref({ left: 0, top: 0, width: 240, height: 160, editScaleX: 1, editScaleY: 1 }),
+    boxRef: ref(null),
+    overlayRef: ref(null),
+    iframeRef: ref(null),
+    gestureRef: ref<GestureState | null>(null),
+    rafPausedRef: ref(false),
+    onManualDragStartRef: ref(vi.fn()),
+    onBlockedMoveRef: ref(vi.fn()),
+  };
+}
+
+describe("a drag press on a page that loads GSAP", () => {
+  it.each([
+    ["GSAP animates nothing", false],
+    ["GSAP animates only its parent", true],
+  ])(
+    "%s: the press never asks GSAP about the element, so its translate stays CSS",
+    (_, parentTween) => {
+      const getProperty = vi.fn(() => 0);
+      const set = vi.fn();
+      const parent = document.createElement("div");
+      const element = document.createElement("div");
+      element.style.setProperty("translate", "40px 30px");
+      parent.append(element);
+      document.body.append(parent);
+      const tween = { targets: () => [parent], vars: { x: 100 }, duration: () => 2 };
+      const timelines = { main: { getChildren: () => (parentTween ? [tween] : []) } };
+      Object.assign(window, { gsap: { getProperty, set }, __timelines: timelines });
+      expect(pressDrag(element)?.pathOffsetMember?.plainTranslate).toBe(true);
+      expect(getProperty).not.toHaveBeenCalled();
+      expect(set).not.toHaveBeenCalled();
+      expect(element.style.getPropertyValue("translate")).toBe("40px 30px");
+    },
+  );
+});
+
+describe("a drag press on a centred element without GSAP", () => {
+  it("starts from its -50% translate in px and leaves its style as it was", () => {
+    const element = document.createElement("div");
+    element.style.cssText =
+      "position: absolute; left: 50%; top: 50%; width: 240px; height: 160px; translate: -50% -50%";
+    document.body.append(element);
+    const style = element.getAttribute("style");
+    expect(pressDrag(element)?.pathOffsetMember?.initialOffset).toEqual({ x: -120, y: -80 });
+    expect(element.getAttribute("style")).toBe(style);
+  });
+});

package/src/components/editor/domEditOverlayStartGesture.ts

@@ -70,6 +70,7 @@ export function startGroupDrag(
       selection: item.selection,
       element: item.element,
       rect: item.rect,
+      gesture: "drag",
     });
     if (!result.ok) {
       restoreManualOffsetDragMembers(members);
@@ -151,10 +152,6 @@ export function startGesture(
     return false;
 
   const size = readStudioBoxSize(sel.element);
-  // Single-source rotation base = the live GSAP transform rotation plus any legacy
-  // `--hf-studio-rotation` CSS var (old projects), so a rotate gesture starts from the
-  // element's actual visual angle and commits an absolute angle to the timeline.
-  const rotation = { angle: readGsapRotation(sel.element) + readStudioRotation(sel.element).angle };
   // The draft writes CSS width/height, so the resize base must be the CSS
   // layout size. offsetWidth/Height are transform-free; the overlay-rect
   // fallback (rect / editScale) includes the element's own GSAP scale and
@@ -198,6 +195,7 @@ export function startGesture(
       selection: sel,
       element: sel.element,
       rect,
+      gesture: "drag",
     });
     if (!result.ok) {
       opts.onBlockedMoveRef.current(result.selection);
@@ -232,6 +230,10 @@ export function startGesture(
     }
   }
 
+  // Rotation base = GSAP's rotation plus the legacy `--hf-studio-rotation` var. A plain-translate
+  // move never asks GSAP: reading a property makes it bake the CSS translate into its transform.
+  const gsapRotation = pathOffsetMember?.plainTranslate ? 0 : readGsapRotation(sel.element);
+  const rotation = { angle: gsapRotation + readStudioRotation(sel.element).angle };
   const overlayBounds = overlayEl?.getBoundingClientRect();
   const centerX = (overlayBounds?.left ?? 0) + rect.left + rect.width / 2;
   const centerY = (overlayBounds?.top ?? 0) + rect.top + rect.height / 2;

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");
   });
 

package/src/components/editor/manualEditsDom.ts

@@ -32,9 +32,9 @@ import {
   STUDIO_ORIGINAL_TRANSFORM_DISPLAY_ATTR,
   STUDIO_ROTATION_TRANSFORM_ORIGIN,
 } from "./manualEditsTypes";
-import { roundRotationAngle } from "./manualEditsParsing";
 import { gsapAnimatesProperty } from "./gsapAnimatesProperty";
 import { splitTopLevelWhitespace } from "./manualEditsStyleHelpers";
+import { roundTo3, roundToLayoutPx } from "../../utils/rounding";
 
 /* ── Gesture tracking ─────────────────────────────────────────────── */
 let studioManualEditGestureId = 0;
@@ -203,8 +203,8 @@ function writeStudioPathOffsetVars(
 ): void {
   prepareStudioPathOffsetBase(element, options.updateBase ?? true);
   element.setAttribute(STUDIO_PATH_OFFSET_ATTR, "true");
-  element.style.setProperty(STUDIO_OFFSET_X_PROP, `${Math.round(offset.x)}px`);
-  element.style.setProperty(STUDIO_OFFSET_Y_PROP, `${Math.round(offset.y)}px`);
+  element.style.setProperty(STUDIO_OFFSET_X_PROP, `${roundTo3(offset.x)}px`);
+  element.style.setProperty(STUDIO_OFFSET_Y_PROP, `${roundTo3(offset.y)}px`);
 }
 
 /* ── Path offset apply ────────────────────────────────────────────── */
@@ -325,7 +325,7 @@ export function applyStudioPathOffsetDraft(
   // Non-GSAP elements: use CSS translate as before.
   element.style.setProperty(
     "translate",
-    composeTranslateValue(element, `${Math.round(offset.x)}px`, `${Math.round(offset.y)}px`),
+    composeTranslateValue(element, `${roundTo3(offset.x)}px`, `${roundTo3(offset.y)}px`),
   );
   stripGsapTranslateFromTransform(element);
 }
@@ -342,7 +342,7 @@ function readParentFlexBasisPixels(
   if (display !== "flex" && display !== "inline-flex") return null;
 
   const direction = readStyleOrComputed(parent, "flex-direction").trim();
-  return Math.round(Math.max(1, direction.startsWith("column") ? size.height : size.width));
+  return roundToLayoutPx(Math.max(1, direction.startsWith("column") ? size.height : size.width));
 }
 
 function restoreStaleStudioScaleResize(element: HTMLElement): void {
@@ -417,8 +417,8 @@ function writeStudioBoxSizeVars(
   }
 
   element.setAttribute(STUDIO_BOX_SIZE_ATTR, "true");
-  element.style.setProperty(STUDIO_WIDTH_PROP, `${Math.round(Math.max(1, size.width))}px`);
-  element.style.setProperty(STUDIO_HEIGHT_PROP, `${Math.round(Math.max(1, size.height))}px`);
+  element.style.setProperty(STUDIO_WIDTH_PROP, `${roundToLayoutPx(Math.max(1, size.width))}px`);
+  element.style.setProperty(STUDIO_HEIGHT_PROP, `${roundToLayoutPx(Math.max(1, size.height))}px`);
 }
 
 function applyStudioBoxSizeDimensions(
@@ -428,8 +428,8 @@ function applyStudioBoxSizeDimensions(
   writeStudioBoxSizeVars(element, size);
   restoreStaleStudioScaleResize(element);
 
-  const width = Math.round(Math.max(1, size.width));
-  const height = Math.round(Math.max(1, size.height));
+  const width = roundToLayoutPx(Math.max(1, size.width));
+  const height = roundToLayoutPx(Math.max(1, size.height));
   element.style.setProperty("box-sizing", "border-box");
   element.style.setProperty("width", `${width}px`);
   element.style.setProperty("height", `${height}px`);
@@ -457,10 +457,26 @@ export function applyStudioBoxSize(
   applyStudioBoxSizeDimensions(element, size);
 }
 
+// The element's box before a resize draft first changed it; gone once the resize saves or is restored.
+const boxSizeDraftBases = new WeakMap<HTMLElement, { width: number; height: number }>();
+
+export function readStudioBoxSizeDraftBase(
+  element: HTMLElement,
+): { width: number; height: number } | null {
+  return boxSizeDraftBases.get(element) ?? null;
+}
+
+export function forgetStudioBoxSizeDraftBase(element: HTMLElement): void {
+  boxSizeDraftBases.delete(element);
+}
+
 export function applyStudioBoxSizeDraft(
   element: HTMLElement,
   size: { width: number; height: number },
 ): void {
+  if (!boxSizeDraftBases.has(element)) {
+    boxSizeDraftBases.set(element, { width: element.offsetWidth, height: element.offsetHeight });
+  }
   promoteInlineForTransform(element);
   applyStudioBoxSizeDimensions(element, size);
 }
@@ -509,7 +525,7 @@ function writeStudioRotationVars(
 ): void {
   prepareStudioRotationBase(element, options.updateBase ?? true);
   element.setAttribute(STUDIO_ROTATION_ATTR, "true");
-  element.style.setProperty(STUDIO_ROTATION_PROP, `${roundRotationAngle(rotation.angle)}deg`);
+  element.style.setProperty(STUDIO_ROTATION_PROP, `${roundTo3(rotation.angle)}deg`);
   element.style.setProperty("transform-origin", STUDIO_ROTATION_TRANSFORM_ORIGIN);
 }
 
@@ -529,6 +545,6 @@ export function applyStudioRotationDraft(element: HTMLElement, rotation: { angle
   element.setAttribute(STUDIO_ROTATION_DRAFT_ATTR, "true");
   element.style.setProperty(
     "rotate",
-    composeStudioRotationValue(element, `${roundRotationAngle(rotation.angle)}deg`),
+    composeStudioRotationValue(element, `${roundTo3(rotation.angle)}deg`),
   );
 }

package/src/components/editor/manualEditsParsing.ts

@@ -3,10 +3,6 @@ export function finiteNumber(value: unknown): number | null {
   return typeof value === "number" && Number.isFinite(value) ? value : null;
 }
 
-export function roundRotationAngle(angle: number): number {
-  return Math.round(angle * 10) / 10;
-}
-
 /* ── File path utilities ──────────────────────────────────────────── */
 function normalizeStudioFileChangePath(path: string): string {
   return path

package/src/components/editor/manualEditsSnapshot.ts

@@ -3,6 +3,7 @@ import {
   styleUsesStudioSize,
   styleUsesStudioRotation,
   restoreInlineDisplay,
+  forgetStudioBoxSizeDraftBase,
 } from "./manualEditsDom";
 import {
   STUDIO_OFFSET_X_PROP,
@@ -114,6 +115,7 @@ function restoreStyleProperty(element: HTMLElement, property: string, value: str
 }
 
 export function restoreStudioBoxSize(element: HTMLElement, previous: StudioBoxSizeSnapshot): void {
+  forgetStudioBoxSizeDraftBase(element);
   restoreStyleProperty(element, "width", previous.width);
   restoreStyleProperty(element, "height", previous.height);
   restoreStyleProperty(element, "min-width", previous.minWidth);
@@ -290,6 +292,7 @@ export function clearStudioRotation(element: HTMLElement): void {
 }
 
 export function clearStudioBoxSize(element: HTMLElement): void {
+  forgetStudioBoxSizeDraftBase(element);
   if (
     element.hasAttribute(STUDIO_BOX_SIZE_ATTR) ||
     styleUsesStudioSize(element.style.getPropertyValue("width")) ||