@hyperframes/studio 0.8.98 → 0.8.99

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

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

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

@@ -13,6 +13,7 @@ import {
   type ManualOffsetDragMatrix,
 } from "./manualOffsetDrag";
 import { STUDIO_OFFSET_X_PROP, STUDIO_OFFSET_Y_PROP } from "./manualEdits";
+import { computeDraggedGsapPosition } from "../../hooks/draggedGsapPosition";
 
 function expectMatrixClose(actual: ManualOffsetDragMatrix, expected: ManualOffsetDragMatrix): void {
   expect(actual.a).toBeCloseTo(expected.a, 6);
@@ -449,6 +450,19 @@ describe("GSAP-element drag — dot-a flies regressions", () => {
   });
 });
 
+describe("sub-pixel drags", () => {
+  it("draft and commit both land the exact fractional position", () => {
+    const { element, sets, member } = makeGsapDot();
+    const m = member();
+    applyManualOffsetDragDraft(m, 10.25, -3.5);
+    const draft = sets.at(-1)!;
+    expect(draft).toEqual({ x: m.baseGsap.x + 10.25, y: m.baseGsap.y - 3.5 });
+    const offset = applyManualOffsetDragCommit(m, 10.25, -3.5);
+    const { newX, newY } = computeDraggedGsapPosition(element, offset, m.baseGsap);
+    expect({ x: newX, y: newY }).toEqual(draft);
+  });
+});
+
 describe("a stylesheet translate after a committed GSAP drag", () => {
   function draggedTitle(css: string, oldOffsetChannel = false, withGsap = true) {
     const window = new Window();

package/src/hooks/domSelectionTestHarness.ts

@@ -12,6 +12,14 @@ export function installReactActEnvironment(): void {
   });
 }
 
+export function withInlineLayoutBox<T extends HTMLElement>(el: T): T {
+  Object.defineProperties(el, {
+    offsetWidth: { get: () => Number.parseFloat(el.style.width) || 0 },
+    offsetHeight: { get: () => Number.parseFloat(el.style.height) || 0 },
+  });
+  return el;
+}
+
 /** Mount a React element into a fresh detached host and return its root. */
 export function mountReactHarness(node: React.ReactElement): Root {
   const host = document.createElement("div");

package/src/hooks/draggedGsapPosition.ts

@@ -1,3 +1,5 @@
+import { roundTo3 } from "../utils/rounding";
+
 /**
  * Drag → GSAP position math, shared by the commit path
  * (`gsapDragCommit.commitGsapPositionFromDrag` / `commitStaticGsapPosition`) and
@@ -39,8 +41,8 @@ export function computeDraggedGsapPosition(
   const baseGsapX = Number.isFinite(parsedBaseX) ? parsedBaseX : fallbackBase.x;
   const baseGsapY = Number.isFinite(parsedBaseY) ? parsedBaseY : fallbackBase.y;
   return {
-    newX: Math.round(baseGsapX + adjX),
-    newY: Math.round(baseGsapY + adjY),
+    newX: roundTo3(baseGsapX + adjX),
+    newY: roundTo3(baseGsapY + adjY),
     baseGsapX,
     baseGsapY,
   };

package/src/hooks/gsapDragCommit.ts

@@ -10,7 +10,7 @@ import {
 } from "../components/editor/manualEditsTypes";
 import { usePlayerStore } from "../player/store/playerStore";
 import { resolveTweenStart, resolveTweenDuration } from "../utils/globalTimeCompiler";
-import { roundTo3 } from "../utils/rounding";
+import { roundTo3, roundToLayoutPx } from "../utils/rounding";
 import { computeElementPercentage, writeTargetSelector } from "./gsapShared";
 import { computeDraggedGsapPosition } from "./draggedGsapPosition";
 import type { RuntimeTweenChange } from "./gsapRuntimePatch";
@@ -289,8 +289,8 @@ export async function commitStaticGsapSize(
   existingSet: GsapAnimation | null,
   callbacks: GsapDragCommitCallbacks,
 ): Promise<void> {
-  const width = Math.round(size.width);
-  const height = Math.round(size.height);
+  const width = roundToLayoutPx(size.width);
+  const height = roundToLayoutPx(size.height);
   if (existingSet) {
     await callbacks.commitMutation(
       selection,
@@ -320,7 +320,7 @@ export async function commitStaticGsapSize(
 
 /** Rounded `n` when it's a positive finite number, else `fallback`. */
 function positiveOr(n: number, fallback: number): number {
-  return Number.isFinite(n) && n > 0 ? Math.round(n) : fallback;
+  return Number.isFinite(n) && n > 0 ? roundToLayoutPx(n) : fallback;
 }
 
 /**
@@ -366,8 +366,8 @@ export async function commitKeyframedSizeFromResize(
   const td = resolveTweenDuration(animatedTween);
   if (!(td > 0)) return false;
 
-  const newW = Math.round(size.width);
-  const newH = Math.round(size.height);
+  const newW = roundToLayoutPx(size.width);
+  const newH = roundToLayoutPx(size.height);
   const prior = resolvePriorSize(sizeSet, selection.element, newW, newH);
 
   const ct = usePlayerStore.getState().currentTime;

package/src/hooks/gsapEditOutcome.ts

@@ -67,6 +67,12 @@ export function assertGsapEditPersisted(outcome: GsapEditOutcome): void {
   if (outcome.status === "blocked") throw new GsapEditBlockedError(outcome.reason, outcome.detail);
 }
 
+/** A move only a shared tween positions is saved on the element itself; a blocked one throws. */
+export async function saveMove(outcome: GsapEditOutcome, saveOnElement: () => Promise<void>) {
+  if (outcome.status === "element-offset") return saveOnElement();
+  assertGsapEditPersisted(outcome);
+}
+
 function assertGsapAnimationDirectlyEditable(animation: GsapAnimation): void {
   const editability = editabilityForProvenance(animation.provenance);
   if (editability === "unroll") throw new GsapEditBlockedError("unroll-required");

package/src/hooks/gsapResizeIntercept.ts

@@ -31,7 +31,7 @@ import { commitWholePropertyOffset } from "./gsapWholePropertyOffsetCommit";
 import { commitGsapPositionFromDrag } from "./gsapDragPositionCommit";
 import { resolveTweenStart, resolveTweenDuration } from "../utils/globalTimeCompiler";
 import { isInstantHold, selectorFromSelection, writeTargetSelector } from "./gsapShared";
-import { roundTo3 } from "../utils/rounding";
+import { roundTo3, roundToLayoutPx } from "../utils/rounding";
 import { resolveGroupTween } from "./gsapRuntimeBridge";
 import { logResize } from "../utils/resizeDebug";
 import { animationWritesAnyProperty, type GsapEditOutcome } from "./gsapEditOutcome";
@@ -287,8 +287,8 @@ export async function tryGsapResizeIntercept(
     }
   } else {
     resizeProps = {
-      width: Math.round(size.width),
-      height: Math.round(size.height),
+      width: roundToLayoutPx(size.width),
+      height: roundToLayoutPx(size.height),
     };
   }
   // Finalize a scale-route commit: tear down the gesture's inline width/height
@@ -358,8 +358,8 @@ export async function tryGsapResizeIntercept(
     // persisted file agree exactly (commitStaticGsapPosition composes the same
     // rounded value from this delta).
     const corrected = {
-      x: Math.round(base.x + residual.x),
-      y: Math.round(base.y + residual.y),
+      x: roundTo3(base.x + residual.x),
+      y: roundTo3(base.y + residual.y),
     };
     logResize("scale-finalize", {
       dropPoint: scaleDraftDropPoint,

package/src/hooks/gsapRuntimeBridge.test.ts

@@ -319,6 +319,17 @@ describe("tryGsapRotationIntercept — instant holds", () => {
     expect(commitMutation).not.toHaveBeenCalled();
   });
 
+  it("commits the exact angle the draft showed", async () => {
+    const commitMutation = vi.fn();
+
+    await tryGsapRotationIntercept(selection, 75.25, [], null, commitMutation);
+    expect(commitMutation).toHaveBeenCalledWith(
+      selection,
+      expect.objectContaining({ type: "add", properties: { rotation: 75.25 } }),
+      expect.anything(),
+    );
+  });
+
   it("does not let an unrelated helper-authored skew tween block 2D rotation", async () => {
     const helperSkew = {
       id: "#puck-b-to-rotation",

package/src/hooks/gsapRuntimeBridge.ts

@@ -27,6 +27,7 @@ import { commitWholePropertyOffset } from "./gsapWholePropertyOffsetCommit";
 import { isGestureTransactionCommit } from "./gestureTransaction";
 import { tweenReach, tweensForThisElement } from "./gsapTweenReach";
 import { resolveTweenDuration } from "../utils/globalTimeCompiler";
+import { roundTo3 } from "../utils/rounding";
 import type { GsapDragCommitCallbacks } from "./gsapDragCommit";
 import { isInstantHold, selectorFromSelection, writeTargetSelector } from "./gsapShared";
 import {
@@ -446,7 +447,7 @@ export async function tryGsapRotationIntercept(
   // `angle` is the ABSOLUTE target rotation resolved by the gesture (gsap base +
   // pointer sweep) or the inspector — so it IS the new rotation. No base re-add: the
   // gesture's live preview already gsap.set this value (single source of truth).
-  const newRotation = Math.round(angle);
+  const newRotation = roundTo3(angle);
   // STATIC case (single source of truth = GSAP timeline): no rotation tween, so the
   // angle belongs in a `tl.set("#el",{rotation})`, not a keyframe conversion —
   // mirroring the static position set. Idempotent: re-rotate updates an existing

package/src/hooks/gsapRuntimeKeyframes.test.ts

@@ -167,6 +167,13 @@ describe("hasNonHoldTweenForElement — strict live-tween existence (drag stale-
     expect(hasNonHoldTweenForElement(fakeIframe(el, [liveTween]), "#puck-b")).toBe(true);
   });
 
+  it("true when the tween sits in a later timeline (a soft reload re-adds main last)", () => {
+    const iframe = fakeIframe(el, []);
+    const win = iframe.contentWindow as unknown as { __timelines: Record<string, unknown> };
+    win.__timelines.main = { getChildren: () => [liveTween] };
+    expect(hasNonHoldTweenForElement(iframe, "#puck-b")).toBe(true);
+  });
+
   it("false when only a zero-duration hold/set remains (post delete-all)", () => {
     expect(hasNonHoldTweenForElement(fakeIframe(el, [holdSet]), "#puck-b")).toBe(false);
   });