@hyperframes/studio 0.8.143 → 0.8.144

package/dist/index.js

@@ -40,7 +40,7 @@ import {
   usePreviewVariablesStore,
   whenPreviewBooted,
   writeStudioUiPreferences
-} from "./chunk-H2DUOXTF.js";
+} from "./chunk-G3EDKRZH.js";
 import {
   Button,
   ContextMenu,
@@ -72,7 +72,7 @@ import {
   fieldBase,
   fieldText,
   popupSurface
-} from "./chunk-LOVBLSMR.js";
+} from "./chunk-Y2OHHNM2.js";
 import {
   DOM_EDIT_LAYER_OBSERVER_INIT,
   STUDIO_FLAT_INSPECTOR_ENABLED,
@@ -105,7 +105,7 @@ import {
   resolveDomEditSelection,
   serializeDomEditTextFields,
   studioApiFetch
-} from "./chunk-UYWON5AX.js";
+} from "./chunk-PEAKCOUW.js";
 import {
   LAYER_REVEAL_PRIOR_POSITION_ATTR,
   LAYER_REVEAL_PRIOR_Z_ATTR,
@@ -158,13 +158,14 @@ import {
   roundTo3,
   roundToCenti,
   roundToLayoutPx,
+  roundToLayoutSize,
   runtimeAudioId,
   sameTimelineText,
   setCompositionSourceMap,
   splitTimelineElementKey,
   toHexColor,
   wrapTimeline
-} from "./chunk-TFLU2MGI.js";
+} from "./chunk-3GHTHPZD.js";
 import "./chunk-PZ5AY32C.js";
 
 // src/components/EditorShell.tsx
@@ -16486,17 +16487,24 @@ var measure = (entries) => isTimelineZoomPreviewing() || commit(
   })
 );
 var onPresence = (entries) => measure(entries.filter((entry2) => entry2.isIntersecting));
-var onResize = (entries) => measure(
-  entries.map(({ target, contentRect: { width, height } }) => ({
-    target,
-    size: { width, height }
-  }))
-);
+var pendingSizes = /* @__PURE__ */ new Map();
+var pendingSizesFrame = 0;
+var applyPendingSizes = () => {
+  pendingSizesFrame = 0;
+  const entries = [...pendingSizes].map(([target, size]) => ({ target, size }));
+  pendingSizes.clear();
+  measure(entries);
+};
+var applyResizesNextFrame = (entries) => {
+  for (const { target, contentRect } of entries)
+    pendingSizes.set(target, { width: contentRect.width, height: contentRect.height });
+  pendingSizesFrame ||= requestAnimationFrame(applyPendingSizes);
+};
 var observeIntersections = (callback) => typeof IntersectionObserver === "undefined" ? null : new IntersectionObserver(callback, GAP_WARNING);
 function acquire() {
   if (users++ === 0) {
     shared = {
-      resize: new ResizeObserver(onResize),
+      resize: new ResizeObserver(applyResizesNextFrame),
       presence: observeIntersections(onPresence),
       gaps: observeIntersections(
         (entries) => entries.some((entry2) => entry2.isIntersecting) && scheduleRefresh()
@@ -16517,6 +16525,9 @@ function release() {
   window.removeEventListener("scroll", scheduleRefresh, { capture: true });
   cancelAnimationFrame(frame2);
   frame2 = 0;
+  cancelAnimationFrame(pendingSizesFrame);
+  pendingSizesFrame = 0;
+  pendingSizes.clear();
 }
 var watchGap = (gap) => {
   if (!gap) return;
@@ -16557,6 +16568,7 @@ function useThumbnailStripSize() {
       resize.unobserve(target);
       presence?.unobserve(target);
       strips.delete(target);
+      pendingSizes.delete(target);
       release();
     };
   }, []);
@@ -17575,8 +17587,8 @@ import { motionPathPluginUrl } from "@hyperframes/core/gsap-cdn";
 // src/utils/authoredSource.ts
 import { ensureHfIds, isCompositionTemplate } from "@hyperframes/parsers/hf-ids";
 import {
-  STUDIO_PREVIEW_LAZY_ATTR,
-  STUDIO_PREVIEW_UPCOMING_ATTR
+  PREVIEW_ONLY_ATTRS,
+  STUDIO_PREVIEW_LAZY_ATTR
 } from "@hyperframes/core/studio-preview-mark";
 function parseSavedSource(html2) {
   return new DOMParser().parseFromString(ensureHfIds(html2), "text/html");
@@ -17657,10 +17669,8 @@ function authoredMarkup(authored, live, sourceFile) {
 function liveMarkupWithoutPreviewMarks(live) {
   const copy = live.cloneNode(true);
   for (const el of [copy, ...Array.from(copy.querySelectorAll("*"))]) {
-    el.removeAttribute(STUDIO_PREVIEW_UPCOMING_ATTR);
-    if (!el.hasAttribute(STUDIO_PREVIEW_LAZY_ATTR)) continue;
-    el.removeAttribute("loading");
-    el.removeAttribute(STUDIO_PREVIEW_LAZY_ATTR);
+    if (el.hasAttribute(STUDIO_PREVIEW_LAZY_ATTR)) el.removeAttribute("loading");
+    for (const attr of PREVIEW_ONLY_ATTRS) el.removeAttribute(attr);
   }
   return copy.outerHTML;
 }
@@ -29909,9 +29919,10 @@ function buildStandaloneRootTimelineElement(params) {
 
 // src/player/hooks/timelineSyncHydration.ts
 import { resolveCssStackingContextId as resolveCssStackingContextId2 } from "@hyperframes/core/runtime/stacking-context";
+import { LOOP_INFLATED_TIMELINE_SECONDS } from "@hyperframes/core/runtime/composition-length";
 import { HF_AUDIO_GROUP_ATTR as HF_AUDIO_GROUP_ATTR3 } from "@hyperframes/core/audio-groups";
 function sanitizeDurationSeconds(value) {
-  return Number.isFinite(value) && value > 0 && value < 7200 ? value : 0;
+  return Number.isFinite(value) && value > 0 && value < LOOP_INFLATED_TIMELINE_SECONDS ? value : 0;
 }
 function readChildAudioGroupState(child) {
   const audioGroup = child.getAttribute(HF_AUDIO_GROUP_ATTR3);
@@ -31289,7 +31300,7 @@ function readParentFlexBasisPixels(element, size) {
   const display2 = readStyleOrComputed(parent, "display").trim();
   if (display2 !== "flex" && display2 !== "inline-flex") return null;
   const direction = readStyleOrComputed(parent, "flex-direction").trim();
-  return roundToLayoutPx(Math.max(1, direction.startsWith("column") ? size.height : size.width));
+  return direction.startsWith("column") ? size.height : size.width;
 }
 function restoreStaleStudioScaleResize(element) {
   if (!element.hasAttribute(STUDIO_ORIGINAL_SCALE_ATTR)) return;
@@ -31352,17 +31363,16 @@ function writeStudioBoxSizeVars(element, size) {
     element.setAttribute(STUDIO_ORIGINAL_DISPLAY_ATTR, element.style.getPropertyValue("display"));
   }
   element.setAttribute(STUDIO_BOX_SIZE_ATTR, "true");
-  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`);
+  element.style.setProperty(STUDIO_WIDTH_PROP, `${size.width}px`);
+  element.style.setProperty(STUDIO_HEIGHT_PROP, `${size.height}px`);
 }
-function applyStudioBoxSizeDimensions(element, size) {
+function applyStudioBoxSizeDimensions(element, wantedSize) {
+  const size = roundToLayoutSize(wantedSize);
   writeStudioBoxSizeVars(element, size);
   restoreStaleStudioScaleResize(element);
-  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`);
+  element.style.setProperty("width", `${size.width}px`);
+  element.style.setProperty("height", `${size.height}px`);
   element.style.setProperty("min-width", "0px");
   element.style.setProperty("min-height", "0px");
   element.style.setProperty("max-width", "none");
@@ -31377,6 +31387,7 @@ function applyStudioBoxSizeDimensions(element, size) {
   if (computedDisplay === "inline") {
     element.style.setProperty("display", "inline-block");
   }
+  return size;
 }
 function applyStudioBoxSize(element, size) {
   promoteInlineForTransform(element);
@@ -31394,7 +31405,7 @@ function applyStudioBoxSizeDraft(element, size) {
     boxSizeDraftBases.set(element, { width: element.offsetWidth, height: element.offsetHeight });
   }
   promoteInlineForTransform(element);
-  applyStudioBoxSizeDimensions(element, size);
+  return applyStudioBoxSizeDimensions(element, size);
 }
 function isSimpleRotateAngle(value) {
   return /^-?(?:\d+(?:\.\d+)?|\.\d+)(?:deg|rad|turn|grad)$/.test(value.trim());
@@ -37564,7 +37575,7 @@ function OffCanvasIndicators({
     const selectOffCanvas = async () => {
       const el = elements.current.get(r.key);
       if (!el) return;
-      const { resolveDomEditSelection: resolveDomEditSelection2 } = await import("./domEditingLayers-KBTPQKGA.js");
+      const { resolveDomEditSelection: resolveDomEditSelection2 } = await import("./domEditingLayers-PYST4G45.js");
       const acp = activeCompositionPathRef.current ?? "index.html";
       const sel = await resolveDomEditSelection2(el, {
         activeCompositionPath: acp,
@@ -37620,7 +37631,7 @@ function ChildRectOutlines({
 
 // src/components/editor/domEditResizeLocal.ts
 var MIN_RESIZE_LOCAL_PX = 1;
-var DEGENERATE_START_DIST_PX = 3;
+var DEGENERATE_START_DIST_PX = 0.5;
 function resolveCenterResizeScale(input) {
   const startDist = Math.hypot(
     input.pointerStart.x - input.centerStart.x,
@@ -37675,6 +37686,17 @@ function resolveRotatedResizeCursor(handle, rotationDeg) {
   const bucket = Math.round(normalized / 45) % 8;
   return CURSORS_8[bucket];
 }
+function resizeRemainderShift(corners, grab, { wanted, written }) {
+  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 };
+  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 };
+}
 function computeNextResizeAnchor(prev, fixedStart, fixedNow) {
   const base2 = prev ?? { dx: 0, dy: 0 };
   return { dx: base2.dx + (fixedStart.x - fixedNow.x), dy: base2.dy + (fixedStart.y - fixedNow.y) };
@@ -39602,6 +39624,7 @@ function startGesture(kind, e, opts, options) {
       manualEditDragToken,
       snapContext,
       resizeHandle: kind === "resize" ? options?.resizeHandle ?? "se" : void 0,
+      resizePressFromCorner: kind === "resize" && options?.resizeCorner ? { x: e.clientX - options.resizeCorner.x, y: e.clientY - options.resizeCorner.y } : void 0,
       resizeFixedCenterStart
     };
     if (kind === "resize") {
@@ -39695,7 +39718,7 @@ function createPreviewGestureStarts(opts, moveActiveGesture, releaseActiveGestur
     offerUndo();
   };
   const drawPressedBox = (origin2) => origin2 && ((dx, dy) => opts.setOverlayRect(shiftedOverlayRect(origin2, dx, dy)));
-  const drawResizedBox = (origin2, press) => {
+  const drawResizedBox = (origin2, grabbed) => {
     if (!origin2) return null;
     const bounds = opts.overlayRef.current?.getBoundingClientRect();
     const centre = {
@@ -39703,8 +39726,12 @@ function createPreviewGestureStarts(opts, moveActiveGesture, releaseActiveGestur
       y: (bounds?.top ?? 0) + origin2.top + origin2.height / 2
     };
     return (dx, dy) => {
-      const pointer = { x: press.x + dx, y: press.y + dy };
-      const scale = resolveCenterResizeScale({ pointer, pointerStart: press, centerStart: centre });
+      const pointer = { x: grabbed.x + dx, y: grabbed.y + dy };
+      const scale = resolveCenterResizeScale({
+        pointer,
+        pointerStart: grabbed,
+        centerStart: centre
+      });
       const [width, height] = [origin2.width * scale, origin2.height * scale];
       opts.setOverlayRect({
         ...origin2,
@@ -39823,7 +39850,10 @@ function createPreviewGestureStarts(opts, moveActiveGesture, releaseActiveGestur
     let draw = null;
     if (kind === "drag") draw = drawPressedBox(opts.overlayRectRef.current);
     if (kind === "resize")
-      draw = drawResizedBox(opts.overlayRectRef.current, { x: e.clientX, y: e.clientY });
+      draw = drawResizedBox(
+        opts.overlayRectRef.current,
+        options?.resizeCorner ?? { x: e.clientX, y: e.clientY }
+      );
     return startOnShownPreview(
       e,
       () => {
@@ -39838,6 +39868,7 @@ function createPreviewGestureStarts(opts, moveActiveGesture, releaseActiveGestur
           selection,
           rect,
           resizeHandle: options?.resizeHandle,
+          resizeCorner: options?.resizeCorner,
           at
         });
       },
@@ -39848,10 +39879,14 @@ function createPreviewGestureStarts(opts, moveActiveGesture, releaseActiveGestur
 }
 
 // src/components/editor/resizeDraft.ts
-function resolveResizeAnchor(g, corners, measureOrientedRect) {
+function resolveResizeAnchor(g, corners, measureOrientedRect, sizes) {
   const fixedStart = g.resizeFixedCenterStart;
   if (corners && fixedStart) {
-    return computeNextResizeAnchor(g.lastResizeAnchor, fixedStart, overlayCornersCentroid(corners));
+    const press = g.resizePressFromCorner ?? { x: 0, y: 0 };
+    const grab = { x: g.startX - press.x - g.centerX, y: g.startY - press.y - g.centerY };
+    const shift = resizeRemainderShift(corners, grab, sizes);
+    const target = { x: fixedStart.x + shift.x, y: fixedStart.y + shift.y };
+    return computeNextResizeAnchor(g.lastResizeAnchor, target, overlayCornersCentroid(corners));
   }
   const fallbackRect = measureOrientedRect();
   return resolveResizeCenterAnchorOffset({
@@ -39861,9 +39896,9 @@ function resolveResizeAnchor(g, corners, measureOrientedRect) {
     overlayHeight: fallbackRect ? fallbackRect.height : g.originHeight
   });
 }
-function resolveAnchoredResizeDraft(g, member, element, overlayEl, iframe, measureOrientedRect) {
+function resolveAnchoredResizeDraft(g, member, element, overlayEl, iframe, measureOrientedRect, sizes) {
   const corners = overlayEl && iframe ? elementCornerOverlayPoints(overlayEl, iframe, element) : null;
-  const anchor2 = resolveResizeAnchor(g, corners, measureOrientedRect);
+  const anchor2 = resolveResizeAnchor(g, corners, measureOrientedRect, sizes);
   g.lastResizeAnchor = anchor2;
   applyManualOffsetDragDraft(member, anchor2.dx, anchor2.dy);
   return measureOrientedRect() ?? {
@@ -39876,7 +39911,7 @@ function resolveAnchoredResizeDraft(g, member, element, overlayEl, iframe, measu
     angle: g.actualRotation
   };
 }
-function resolveResizeDraftRect(g, element, overlayEl, iframe, measureOrientedRect) {
+function resolveResizeDraftRect(g, element, overlayEl, iframe, measureOrientedRect, sizes) {
   if (g.pathOffsetMember) {
     return resolveAnchoredResizeDraft(
       g,
@@ -39884,7 +39919,8 @@ function resolveResizeDraftRect(g, element, overlayEl, iframe, measureOrientedRe
       element,
       overlayEl,
       iframe,
-      measureOrientedRect
+      measureOrientedRect,
+      sizes
     );
   }
   return measureOrientedRect() ?? {
@@ -40209,14 +40245,15 @@ function createDomEditOverlayGestureHandlers(opts) {
       }
       if (g.pathOffsetMember) applyManualOffsetDragDraft(g.pathOffsetMember, dx, dy);
     } else {
+      const grab = g.resizePressFromCorner ?? { x: 0, y: 0 };
       const nextSize = resolveCenterResizeSize({
         baseWidth: g.actualWidth,
         baseHeight: g.actualHeight,
-        pointer: { x: e.clientX, y: e.clientY },
-        pointerStart: { x: g.startX, y: g.startY },
+        pointer: { x: e.clientX - grab.x, y: e.clientY - grab.y },
+        pointerStart: { x: g.startX - grab.x, y: g.startY - grab.y },
         centerStart: { x: g.centerX, y: g.centerY }
       });
-      applyStudioBoxSizeDraft(sel.element, nextSize);
+      const writtenSize = applyStudioBoxSizeDraft(sel.element, nextSize);
       const overlayEl = opts.overlayRef.current;
       const iframe = opts.iframeRef.current;
       const measureOrientedRect = () => overlayEl && iframe ? orientedOverlayRect(overlayEl, iframe, sel.element) : null;
@@ -40225,7 +40262,8 @@ function createDomEditOverlayGestureHandlers(opts) {
         sel.element,
         overlayEl,
         iframe,
-        measureOrientedRect
+        measureOrientedRect,
+        { wanted: nextSize, written: writtenSize }
       );
       logResizeMove({
         pointer: { x: e.clientX, y: e.clientY },
@@ -41302,13 +41340,22 @@ var RESIZE_HANDLE_DEFS = [
   { handle: "se", cursor: "nwse-resize", x: "right", y: "bottom" }
 ];
 var NO_CROP_INSET = { top: 0, right: 0, bottom: 0, left: 0 };
-function resizeHandleStyle(def, overlayRect, cropInset) {
+function resizeHandleLayout(def, overlayRect, cropInset) {
   const half = RESIZE_HANDLE_HIT_PX / 2;
   const inset = cropInset ?? NO_CROP_INSET;
-  const style = { cursor: def.cursor, touchAction: "none" };
-  style.left = def.x === "left" ? overlayRect.left + inset.left - half : overlayRect.left + overlayRect.width - inset.right - half;
-  style.top = def.y === "top" ? overlayRect.top + inset.top - half : overlayRect.top + overlayRect.height - inset.bottom - half;
-  return style;
+  const cornerX = def.x === "left" ? overlayRect.left + inset.left : overlayRect.left + overlayRect.width - inset.right;
+  const cornerY = def.y === "top" ? 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 }
+  };
 }
 function DomEditGroupChrome({
   groupOverlayItems,
@@ -41440,26 +41487,42 @@ function DomEditSelectionChrome({
             },
             selectionKey
           ),
-          canManipulate && !editing && selection.capabilities.canApplyManualSize && RESIZE_HANDLE_DEFS.map(
-            (def) => def.handle !== "se" && !selection.capabilities.canApplyManualOffset ? null : /* @__PURE__ */ jsx99(
+          canManipulate && !editing && selection.capabilities.canApplyManualSize && RESIZE_HANDLE_DEFS.map((def) => {
+            if (def.handle !== "se" && !selection.capabilities.canApplyManualOffset) return null;
+            const layout = resizeHandleLayout(def, overlayRect, cropOutlineInsetPx ?? void 0);
+            return /* @__PURE__ */ jsxs69(
               "div",
               {
                 className: "pointer-events-auto absolute flex h-4 w-4 items-center justify-center",
                 style: {
-                  ...resizeHandleStyle(def, overlayRect, cropOutlineInsetPx ?? void 0),
+                  ...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 }
+                  });
                 },
-                children: /* @__PURE__ */ jsx99("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)]" })
+                children: [
+                  /* @__PURE__ */ jsx99(
+                    "span",
+                    {
+                      "data-resize-corner": true,
+                      className: "pointer-events-none absolute",
+                      style: layout.anchor
+                    }
+                  ),
+                  /* @__PURE__ */ jsx99("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)]" })
+                ]
               },
               def.handle
-            )
-          )
+            );
+          })
         ]
       }
     ),
@@ -84776,6 +84839,9 @@ function tweenUsesScaleLonghands(anim) {
   );
   return inKeyframes || Object.keys(anim?.properties ?? {}).some(isLonghand);
 }
+function rectCentre(rect) {
+  return { x: rect.x + rect.width / 2, y: rect.y + rect.height / 2 };
+}
 async function tryGsapResizeIntercept(selection, size, animations, iframe, commitMutation, fetchFallbackAnimations, dragOffset, draw = (run) => run(), stamp) {
   const moment = editMoment(stamp);
   const fetchedAnimations = fetchFallbackAnimations ? await fetchFallbackAnimations() : [];
@@ -84890,8 +84956,7 @@ async function tryGsapResizeIntercept(selection, size, animations, iframe, commi
     scaleDraftEl = el;
     committedScale = useScaleLonghands ? { x: newScaleX, y: newScaleY } : { x: newScaleX, y: newScaleX };
     if (el) {
-      const dropRect = draw(() => el.getBoundingClientRect());
-      scaleDraftDropPoint = { x: dropRect.x, y: dropRect.y };
+      scaleDraftDropPoint = draw(() => rectCentre(el.getBoundingClientRect()));
     }
   } else {
     resizeProps = {
@@ -84922,31 +84987,31 @@ async function tryGsapResizeIntercept(selection, size, animations, iframe, commi
       );
       const base3 = { x: baseGsapX, y: baseGsapY };
       setElementGsapPosition(draftEl, base3.x, base3.y);
-      const post2 = draftEl.getBoundingClientRect();
-      const residual = { x: dropPoint.x - post2.x, y: dropPoint.y - post2.y };
-      if (!Number.isFinite(residual.x) || !Number.isFinite(residual.y)) return null;
-      if (Math.abs(residual.x) < 0.5 && Math.abs(residual.y) < 0.5) {
-        logResize("scale-finalize", { skipped: "already-on-drop-point", residual, base: base3 });
-        return "settled";
-      }
+      const post2 = rectCentre(draftEl.getBoundingClientRect());
+      const residual2 = { x: dropPoint.x - post2.x, y: dropPoint.y - post2.y };
+      if (!Number.isFinite(residual2.x) || !Number.isFinite(residual2.y)) return null;
       const corrected2 = {
-        x: roundTo3(base3.x + residual.x),
-        y: roundTo3(base3.y + residual.y)
+        x: roundTo3(base3.x + residual2.x),
+        y: roundTo3(base3.y + residual2.y)
       };
+      if (corrected2.x === roundTo3(base3.x) && corrected2.y === roundTo3(base3.y)) {
+        logResize("scale-finalize", { skipped: "already-on-drop-point", residual: residual2, base: base3 });
+        return "settled";
+      }
       logResize("scale-finalize", {
         dropPoint,
-        post: { x: post2.x, y: post2.y },
-        residual,
+        post: post2,
+        residual: residual2,
         gsapPos,
         base: base3,
         corrected: corrected2
       });
       setElementGsapPosition(draftEl, corrected2.x, corrected2.y);
-      return { base: base3, corrected: corrected2 };
+      return { base: base3, corrected: corrected2, residual: residual2 };
     });
     if (measured === null) return false;
     if (measured === "settled") return true;
-    const { base: base2, corrected } = measured;
+    const { base: base2, corrected, residual } = measured;
     const currentAnimations = fetchFallbackAnimations ? await fetchFallbackAnimations() : resolved2?.animations ?? animations;
     const delta = { x: corrected.x - base2.x, y: corrected.y - base2.y };
     const positionTween = pickClosestToPlayhead(
@@ -84956,6 +85021,10 @@ async function tryGsapResizeIntercept(selection, size, animations, iframe, commi
       moment.time
     );
     if (positionTween) {
+      if (Math.abs(residual.x) < 0.5 && Math.abs(residual.y) < 0.5) {
+        draw(() => setElementGsapPosition(draftEl, base2.x, base2.y));
+        return true;
+      }
       logResize("scale-finalize", { route: "position-keyframe", tweenId: positionTween.id });
       assertGsapEditPersisted(
         await commitGsapPositionFromDrag(selection, positionTween, delta, base2, iframe, {