@hyperframes/studio 0.8.138 → 0.8.139

package/src/components/editor/previewGestureStarts.ts

@@ -0,0 +1,284 @@
+import {
+  orientedGroupAwareOverlayRect,
+  shiftedOverlayRect,
+  type OverlayRect,
+} from "./domEditOverlayGeometry";
+import { findElementForSelection, type DomEditSelection } from "./domEditing";
+import { computeOverlayRootScale } from "./domEditOverlayBasis";
+import { resolveCenterResizeScale } from "./domEditResizeLocal";
+import {
+  PRESS_WAITING_ATTR,
+  type WaitingPressState,
+  type GestureKind,
+  type ResizeHandle,
+  type UseDomEditOverlayGesturesOptions,
+} from "./domEditOverlayGestures";
+import {
+  startGesture as _startGesture,
+  startGroupDrag as _startGroupDrag,
+} from "./domEditOverlayStartGesture";
+import { giveUpOnPreviewChange, isPreviewChanging } from "../../player/previewReloading";
+import { setStudioWaitingPressCancel } from "../../utils/studioPendingEdits";
+import { playheadMoment } from "../../hooks/editMoment";
+import type { EditMoment } from "./manualEditsTypes";
+
+const MAX_SETTLED_WAIT_FRAMES = 60;
+export const PRESS_WAIT_MAX_MS = 10_000;
+
+export function createPreviewGestureStarts(
+  opts: UseDomEditOverlayGesturesOptions,
+  moveActiveGesture: (e: React.PointerEvent<HTMLDivElement>) => void,
+  releaseActiveGesture: (e: React.PointerEvent<HTMLDivElement>) => void,
+) {
+  /** Points Cmd+Z at the newest released press still waiting, if any. */
+  const offerUndo = () => {
+    let p = opts.waitingPressRef.current;
+    while (p && !p.released) p = p.after;
+    const press = p;
+    setStudioWaitingPressCancel(press && (() => dropPress(press)));
+  };
+
+  const clearWaitingMark = () => {
+    opts.boxRef.current?.removeAttribute(PRESS_WAITING_ATTR);
+    opts.rafPausedRef.current = false;
+  };
+
+  /** Points the press queued right behind `press` at `next` instead. */
+  const unlink = (press: WaitingPressState, next: WaitingPressState | null) => {
+    for (let p = opts.waitingPressRef.current; p; p = p.after)
+      if (p.after === press) p.after = next;
+  };
+
+  const endWaitingPress = (press: WaitingPressState | null = opts.waitingPressRef.current) => {
+    for (let p = press; p && !p.ended; p = p.after) {
+      p.ended = true;
+      cancelAnimationFrame(p.frame);
+    }
+    if (press === opts.waitingPressRef.current) {
+      opts.waitingPressRef.current = null;
+      clearWaitingMark();
+    }
+    // A press queued behind this one keeps waiting, on nothing that has ended.
+    else if (press) unlink(press, null);
+    offerUndo();
+  };
+
+  /** The newest press goes: the outline shows the press before it, or the box before this one. */
+  const showPressBefore = (press: WaitingPressState) => {
+    const before = press.after;
+    opts.waitingPressRef.current = before;
+    const shown = before ?? press;
+    const at = before?.moved;
+    const [dx, dy] = at ? [at.clientX - shown.startX, at.clientY - shown.startY] : [0, 0];
+    shown.draw?.(dx, dy);
+    if (!before) clearWaitingMark();
+  };
+
+  /** Takes one press out of the queue. */
+  const dropPress = (press: WaitingPressState): boolean => {
+    if (press.ended) return false;
+    press.ended = true;
+    cancelAnimationFrame(press.frame);
+    if (press === opts.waitingPressRef.current) showPressBefore(press);
+    else unlink(press, press.after);
+    offerUndo();
+    return true;
+  };
+
+  /** Ends the press still held, if any; presses already released are finished edits and still land. */
+  const endHeldPress = () => {
+    const held = opts.waitingPressRef.current;
+    if (held && !held.released) dropPress(held);
+  };
+
+  const releaseWaitingPress = (press: WaitingPressState, e: React.PointerEvent<HTMLDivElement>) => {
+    press.released = e;
+    offerUndo();
+  };
+
+  const drawPressedBox = (origin: OverlayRect | null): WaitingPressState["draw"] =>
+    origin && ((dx, dy) => opts.setOverlayRect(shiftedOverlayRect(origin, dx, dy)));
+
+  // A corner resize scales about the element's centre by the pointer's distance from it, as the resize does.
+  const drawResizedBox = (
+    origin: OverlayRect | null,
+    press: { x: number; y: number },
+  ): WaitingPressState["draw"] => {
+    if (!origin) return null;
+    const bounds = opts.overlayRef.current?.getBoundingClientRect();
+    const centre = {
+      x: (bounds?.left ?? 0) + origin.left + origin.width / 2,
+      y: (bounds?.top ?? 0) + origin.top + origin.height / 2,
+    };
+    return (dx, dy) => {
+      const pointer = { x: press.x + dx, y: press.y + dy };
+      const scale = resolveCenterResizeScale({ pointer, pointerStart: press, centerStart: centre });
+      const [width, height] = [origin.width * scale, origin.height * scale];
+      opts.setOverlayRect({
+        ...origin,
+        left: origin.left + (origin.width - width) / 2,
+        top: origin.top + (origin.height - height) / 2,
+        width,
+        height,
+      });
+    };
+  };
+
+  // A press on the page a reload is replacing would edit it by its old rules: it starts on the new page instead.
+  const startOnShownPreview = (
+    e: React.PointerEvent<HTMLElement>,
+    pressed: () => HTMLElement[],
+    start: (e: React.PointerEvent<HTMLElement>, at: EditMoment, waited: boolean) => boolean,
+    draw: WaitingPressState["draw"] = null,
+  ): boolean => {
+    const at = playheadMoment();
+    if (!isPreviewChanging() && !opts.waitingPressRef.current) return start(e, at, false);
+    e.preventDefault();
+    e.stopPropagation();
+    e.currentTarget.setPointerCapture(e.pointerId);
+    // The press already holds the pointer, which may be up by the time the gesture starts.
+    const held = { setPointerCapture() {} };
+    const down = { ...e, currentTarget: held, preventDefault() {}, stopPropagation() {} };
+    const press: WaitingPressState = {
+      pointerId: e.pointerId,
+      startX: e.clientX,
+      startY: e.clientY,
+      draw,
+      frame: 0,
+      moved: null,
+      released: null,
+      after: opts.waitingPressRef.current,
+      ended: false,
+    };
+    opts.waitingPressRef.current = press;
+    opts.boxRef.current?.setAttribute(PRESS_WAITING_ATTR, "true");
+    opts.rafPausedRef.current = true;
+    let shownFrames = 0;
+    let settledFrames = 0;
+    const since = performance.now();
+    /** Counts this frame toward the shown and settled streaks; returns how many pressed elements remain. */
+    const countFrame = () => {
+      const elements = pressed();
+      const live = opts.iframeRef.current?.contentDocument;
+      const settled = !isPreviewChanging();
+      const shown = settled && elements.every((el) => el.ownerDocument === live);
+      shownFrames = shown ? shownFrames + 1 : 0;
+      settledFrames = settled ? settledFrames + 1 : 0;
+      return elements.length;
+    };
+    const waitStep = (): "wait" | "lost" | "run" => {
+      if (press.after && !press.after.ended) return "wait";
+      const found = countFrame();
+      // A change that never ends (a save with no reply) would hold every press: run on the page shown.
+      const overdue = performance.now() - since > PRESS_WAIT_MAX_MS;
+      if (overdue) giveUpOnPreviewChange();
+      // The waiting outline stays drawn while replay measures the live element separately.
+      if (found === 0 || settledFrames > MAX_SETTLED_WAIT_FRAMES) return "lost";
+      return overdue || shownFrames >= 2 ? "run" : "wait";
+    };
+    const poll = () => {
+      if (press.ended) return;
+      const step = waitStep();
+      if (step === "wait") {
+        press.frame = requestAnimationFrame(poll);
+        return;
+      }
+      endWaitingPress(press);
+      if (step === "lost" || !start(down as unknown as React.PointerEvent<HTMLElement>, at, true))
+        return;
+      if (press.moved) moveActiveGesture(press.moved);
+      if (press.released) releaseActiveGesture(press.released);
+    };
+    press.frame = requestAnimationFrame(poll);
+    return true;
+  };
+
+  const shownSelection = (selection: DomEditSelection) => {
+    const doc = opts.iframeRef.current?.contentDocument;
+    if (!doc) return null;
+    const element = findElementForSelection(doc, selection, opts.activeCompositionPathRef.current);
+    return element && { ...selection, element };
+  };
+  const shownRect = (element: HTMLElement) => {
+    const overlay = opts.overlayRef.current;
+    const iframe = opts.iframeRef.current;
+    return overlay && iframe && orientedGroupAwareOverlayRect(overlay, iframe, element);
+  };
+
+  const startGroupDrag = (e: React.PointerEvent<HTMLElement>) => {
+    const items = opts.groupOverlayItemsRef.current;
+    return startOnShownPreview(
+      e,
+      () =>
+        items.flatMap((item) => {
+          const selection = shownSelection(item.selection);
+          return selection ? [selection.element] : [];
+        }),
+      (pressed, at, waited) => {
+        if (!waited) return _startGroupDrag(pressed, opts, at);
+        const overlay = opts.overlayRef.current;
+        const iframe = opts.iframeRef.current;
+        if (!overlay || !iframe) return false;
+        const scale = computeOverlayRootScale(overlay, iframe, iframe.contentDocument);
+        const measured = items.flatMap((item) => {
+          const selection = shownSelection(item.selection);
+          const rect =
+            selection && orientedGroupAwareOverlayRect(overlay, iframe, selection.element, scale);
+          return selection && rect
+            ? [{ ...item, selection, element: selection.element, rect }]
+            : [];
+        });
+        if (measured.length !== items.length) return false;
+        return _startGroupDrag(
+          pressed,
+          { ...opts, groupOverlayItemsRef: { current: measured } },
+          at,
+        );
+      },
+      (dx, dy) =>
+        opts.setGroupOverlayItems(
+          items.map((item) => ({ ...item, rect: shiftedOverlayRect(item.rect, dx, dy) })),
+        ),
+    );
+  };
+  const startGesture = (
+    kind: GestureKind,
+    e: React.PointerEvent<HTMLElement>,
+    options?: {
+      selection?: DomEditSelection;
+      rect?: OverlayRect | null;
+      resizeHandle?: ResizeHandle;
+    },
+  ) => {
+    // A replay edits what was pressed, though another element may be selected by then.
+    const target = options?.selection ?? opts.selectionRef.current;
+    let draw: WaitingPressState["draw"] = null;
+    if (kind === "drag") draw = drawPressedBox(opts.overlayRectRef.current);
+    if (kind === "resize")
+      draw = drawResizedBox(opts.overlayRectRef.current, { x: e.clientX, y: e.clientY });
+    return startOnShownPreview(
+      e,
+      () => {
+        const shown = target && shownSelection(target);
+        return shown ? [shown.element] : [];
+      },
+      (pressed, at, waited) => {
+        if (!waited) return _startGesture(kind, pressed, opts, { ...options, at });
+        const selection = target && shownSelection(target);
+        const rect = selection && shownRect(selection.element);
+        return (
+          !!(selection && rect) &&
+          _startGesture(kind, pressed, opts, {
+            selection,
+            rect,
+            resizeHandle: options?.resizeHandle,
+            at,
+          })
+        );
+      },
+      draw,
+    );
+  };
+
+  return { startGesture, startGroupDrag, endWaitingPress, endHeldPress, releaseWaitingPress };
+}

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

@@ -62,6 +62,7 @@ async function rotateWord(before: (word: HTMLElement) => void = () => {}) {
     gestureRef: ref<GestureState | null>(null),
     groupGestureRef: ref(null),
     blockedMoveRef: ref(null),
+    waitingPressRef: ref(null),
     rafPausedRef: ref(false),
     suppressNextBoxClickRef: ref(false),
     setOverlayRect: () => {},

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

@@ -19,6 +19,7 @@ function gestureHarness(gesture: Partial<GestureState> | null, group: GroupGestu
     hoverSelectionRef: { current: null },
     boxRef: { current: null },
     blockedMoveRef: { current: null },
+    waitingPressRef: { current: null },
     rafPausedRef: { current: false },
     suppressNextBoxClickRef: { current: false },
     snapGuidesRef: { current: null },

package/src/components/editor/useDomEditOverlayGestures.ts

@@ -1,3 +1,4 @@
+import { createPreviewGestureStarts } from "./previewGestureStarts";
 import { trackPreviewEditResult } from "../../utils/previewFeatureUsage";
 // fallow-ignore-file code-duplication
 /**
@@ -28,13 +29,12 @@ import {
   type GroupOverlayItem,
   type OverlayRect,
   orientedOverlayRect,
+  shiftedOverlayRect,
 } from "./domEditOverlayGeometry";
 import {
   BLOCKED_MOVE_THRESHOLD_PX,
-  type GestureKind,
   type GestureState,
   type GroupGestureState,
-  type ResizeHandle,
   type UseDomEditOverlayGesturesOptions,
   ROTATED_SNAP_BYPASS_DEGREES,
   hasDomEditRotationChanged,
@@ -44,11 +44,7 @@ import {
 } from "./domEditOverlayGestures";
 import { resolveCenterResizeSize } from "./domEditResizeLocal";
 import { resolveResizeDraftRect } from "./resizeDraft";
-import {
-  notifyBlockedPress,
-  startGesture as _startGesture,
-  startGroupDrag as _startGroupDrag,
-} from "./domEditOverlayStartGesture";
+import { notifyBlockedPress } from "./domEditOverlayStartGesture";
 import { hugRectForElement } from "./domEditOverlayCrop";
 import {
   resolveSnapAdjustment,
@@ -76,7 +72,7 @@ function logGestureCommitFailure(message: string, error: unknown): void {
 
 export function createDomEditOverlayGestureHandlers(opts: UseDomEditOverlayGesturesOptions) {
   const setDraftOverlayRect = (next: OverlayRect) => {
-    opts.setOverlayRect(next);
+    if (!opts.waitingPressRef.current) opts.setOverlayRect(next);
   };
   const restoreGestureOverlayRect = (g: GestureState) => {
     setDraftOverlayRect({
@@ -86,14 +82,12 @@ export function createDomEditOverlayGestureHandlers(opts: UseDomEditOverlayGestu
       height: g.originHeight,
       editScaleX: g.editScaleX,
       editScaleY: g.editScaleY,
-      // Every draft rect must carry the element's rotation: the rotation wrapper
-      // renders rotate(overlayRect.angle), so an omitted angle straightens the
-      // chrome for the duration of the draft (the "straightens while moving" bug).
+      // Rotation keeps the chrome aligned with the element during its draft.
       angle: g.actualRotation,
     });
   };
   const setDraftGroupOverlayItems = (next: GroupOverlayItem[]) => {
-    opts.setGroupOverlayItems(next);
+    if (!opts.waitingPressRef.current) opts.setGroupOverlayItems(next);
   };
 
   const restoreGroupPathOffsets = (g: GroupGestureState) => {
@@ -101,16 +95,12 @@ export function createDomEditOverlayGestureHandlers(opts: UseDomEditOverlayGestu
     setDraftGroupOverlayItems(g.originItems);
   };
 
-  const startGroupDrag = (e: React.PointerEvent<HTMLElement>) => _startGroupDrag(e, opts);
-  const startGesture = (
-    kind: GestureKind,
-    e: React.PointerEvent<HTMLElement>,
-    options?: {
-      selection?: DomEditSelection;
-      rect?: OverlayRect | null;
-      resizeHandle?: ResizeHandle;
-    },
-  ) => _startGesture(kind, e, opts, options);
+  const { startGesture, startGroupDrag, endWaitingPress, endHeldPress, releaseWaitingPress } =
+    createPreviewGestureStarts(
+      opts,
+      (event) => moveActiveGesture(event),
+      (event) => releaseActiveGesture(event),
+    );
 
   // A press on a box that cannot move says why at once.
   const startBlockedMove = (e: React.PointerEvent<HTMLElement>, selection: DomEditSelection) => {
@@ -123,12 +113,23 @@ export function createDomEditOverlayGestureHandlers(opts: UseDomEditOverlayGestu
 
   const moveGroupDrag = createGroupDragMover(opts, setDraftGroupOverlayItems);
 
-  // fallow-ignore-next-line complexity
   const onPointerMove = (e: React.PointerEvent<HTMLDivElement>) => {
+    const waiting = opts.waitingPressRef.current;
+    if (waiting && waiting.pointerId === e.pointerId) {
+      if (waiting.released || !movesGesture(waiting, e)) return;
+      waiting.moved = e;
+      waiting.draw?.(e.clientX - waiting.startX, e.clientY - waiting.startY);
+      return;
+    }
+    moveActiveGesture(e);
+  };
+
+  // fallow-ignore-next-line complexity
+  const moveActiveGesture = (e: React.PointerEvent<HTMLDivElement>) => {
     const g = opts.gestureRef.current;
     const groupG = opts.groupGestureRef.current;
     const sel = g?.selection ?? opts.selectionRef.current;
-    const box = opts.boxRef.current;
+    const box = opts.waitingPressRef.current ? null : opts.boxRef.current;
     const blockedMove = opts.blockedMoveRef.current;
     if (!blockedMove && !g && !groupG) {
       opts.onCanvasPointerMoveRef.current(e, { preferClipAncestor: false });
@@ -248,18 +249,7 @@ export function createDomEditOverlayGestureHandlers(opts: UseDomEditOverlayGestu
       }
       if (g.pathOffsetMember) applyManualOffsetDragDraft(g.pathOffsetMember, dx, dy);
     } else {
-      if (!box) return;
-
-      // CENTER-ANCHORED size (CapCut model): the element scales proportionally
-      // about its CENTER — the scale is the pointer's RADIAL distance from the
-      // element center now over its distance at gesture start. Rotation-invariant
-      // (a distance ignores the angle) and continuous, so all four corners behave
-      // identically and there is no per-axis projection or edge-snapping. Base size
-      // is the element-local px size at gesture start (actualWidth/Height,
-      // GSAP-scale-aware). Corner drag is ALWAYS proportional; there is no
-      // free-form stretch gesture. Edge-snapping is intentionally NOT applied:
-      // with center anchoring both edges move symmetrically, so the corner-anchored
-      // snap math no longer holds — CapCut does not edge-snap during scale either.
+      // Corner resize scales proportionally about the center, without edge snapping.
       const nextSize = resolveCenterResizeSize({
         baseWidth: g.actualWidth,
         baseHeight: g.actualHeight,
@@ -288,33 +278,41 @@ export function createDomEditOverlayGestureHandlers(opts: UseDomEditOverlayGestu
         draftRect,
         liveInlineStyle: sel.element.getAttribute("style"),
       });
-      box.style.left = `${draftRect.left}px`;
-      box.style.top = `${draftRect.top}px`;
-      box.style.width = `${draftRect.width}px`;
-      box.style.height = `${draftRect.height}px`;
+      if (box) {
+        box.style.left = `${draftRect.left}px`;
+        box.style.top = `${draftRect.top}px`;
+        box.style.width = `${draftRect.width}px`;
+        box.style.height = `${draftRect.height}px`;
+      }
       setDraftOverlayRect(draftRect);
     }
   };
 
-  // fallow-ignore-next-line complexity
   const onPointerUp = (e: React.PointerEvent<HTMLDivElement>) => {
+    const waiting = opts.waitingPressRef.current;
+    if (waiting && waiting.pointerId === e.pointerId) {
+      releaseWaitingPress(waiting, e);
+      opts.suppressNextBoxClickRef.current = true;
+      return;
+    }
+    releaseActiveGesture(e);
+  };
+
+  // fallow-ignore-next-line complexity
+  const releaseActiveGesture = (e: React.PointerEvent<HTMLDivElement>) => {
     opts.snapGuidesRef.current = null;
     const g = opts.gestureRef.current;
     const groupG = opts.groupGestureRef.current;
     const sel = g?.selection ?? opts.selectionRef.current;
-    const box = opts.boxRef.current;
+    const box = opts.waitingPressRef.current ? null : opts.boxRef.current;
     opts.blockedMoveRef.current = null;
+    opts.rafPausedRef.current = opts.waitingPressRef.current !== null;
 
     if (groupG) {
       opts.groupGestureRef.current = null;
-      opts.rafPausedRef.current = false;
       const rawDx = e.clientX - groupG.startX;
       const rawDy = e.clientY - groupG.startY;
-      // The click that trails every pointerup has to be eaten either way. The
-      // gesture ref is already cleared above, so by the time it arrives the box
-      // no longer looks busy, and handleBoxClick hands it to the canvas as an
-      // ordinary click — which lands between the members, resolves to nothing,
-      // and deselects the group the drag just moved.
+      // Consume the release click so it cannot deselect the moved group.
       opts.suppressNextBoxClickRef.current = true;
       if (isTap(groupG, e)) {
         restoreGroupPathOffsets(groupG);
@@ -331,7 +329,7 @@ export function createDomEditOverlayGestureHandlers(opts: UseDomEditOverlayGestu
       setDraftGroupOverlayItems(
         groupG.originItems.map((item) => ({
           ...item,
-          rect: { ...item.rect, left: item.rect.left + dx, top: item.rect.top + dy },
+          rect: shiftedOverlayRect(item.rect, dx, dy),
         })),
       );
       const updates = groupG.members.map((member) => ({
@@ -367,23 +365,15 @@ export function createDomEditOverlayGestureHandlers(opts: UseDomEditOverlayGestu
         .finally(() => {
           logDrag("committed", { at: readDragPositions(groupG.members) });
           endManualOffsetDragMembers(groupG.members);
-          // The gesture teardown resumes the paused timelines and re-seeks the
-          // player, which re-renders from whatever the preview currently holds.
-          // If the reloaded source has not landed yet that is the OLD position,
-          // so this is where a snap-back would show.
+          // Teardown re-seeks the player, exposing any stale preview position.
           logDragSettle("settle", groupG.members);
         });
       groupEdit.settle(groupSaved);
       return;
     }
 
-    if (!g || !sel) {
-      opts.gestureRef.current = null;
-      opts.rafPausedRef.current = false;
-      return;
-    }
     opts.gestureRef.current = null;
-    opts.rafPausedRef.current = false;
+    if (!g || !sel) return;
     const movedDistance = Math.hypot(e.clientX - g.startX, e.clientY - g.startY);
 
     if (g.kind === "drag" && isTap(g, e)) {
@@ -457,10 +447,7 @@ export function createDomEditOverlayGestureHandlers(opts: UseDomEditOverlayGestu
         .finally(() => endStudioManualEditGesture(sel.element, g.manualEditDragToken));
       edit.settle(saved);
     } else if (g.kind === "drag") {
-      // A moved drag (taps returned earlier) must not let the release click
-      // re-select whatever now sits under the pointer — dropping over a
-      // higher-z element should keep the dragged element selected, not select
-      // the drop target. Mirrors the resize branch below.
+      // A release over another layer must keep this dragged layer selected.
       opts.suppressNextBoxClickRef.current = true;
       const dx = g.lastSnappedDx ?? e.clientX - g.startX;
       const dy = g.lastSnappedDy ?? e.clientY - g.startY;
@@ -509,12 +496,7 @@ export function createDomEditOverlayGestureHandlers(opts: UseDomEditOverlayGestu
       opts.suppressNextBoxClickRef.current = true;
       const finalSize = readStudioBoxSize(sel.element);
       applyStudioBoxSize(sel.element, finalSize);
-      // Anchored corner resize (NW/NE/SW) also moved the element to keep the
-      // center planted. Land the size AND the anchor offset in a SINGLE
-      // box-size commit (one persist, one undo entry). The prior two-commit
-      // sequence re-stamped the element from source after the size-only persist
-      // but before the offset persist landed — that one frame (new size, old
-      // offset) was the release "jump". SE has no anchor member → size only.
+      // Save size and center-preserving offset together under one undo entry.
       const member = g.pathOffsetMember;
       const anchor = g.lastResizeAnchor;
       const finalOffset =
@@ -554,8 +536,14 @@ export function createDomEditOverlayGestureHandlers(opts: UseDomEditOverlayGestu
     }
   };
 
+  /** `dropQueued`: released presses still waiting go too, as when the overlay leaves or turns read-only. */
   // fallow-ignore-next-line complexity
-  const clearPointerState = (selectionRef: RefObject<DomEditSelection | null>) => {
+  const clearPointerState = (
+    selectionRef: RefObject<DomEditSelection | null>,
+    dropQueued = false,
+  ) => {
+    if (dropQueued) endWaitingPress();
+    else endHeldPress();
     opts.snapGuidesRef.current = null;
     const groupG = opts.groupGestureRef.current;
     if (groupG) restoreGroupPathOffsets(groupG);
@@ -586,7 +574,14 @@ export function createDomEditOverlayGestureHandlers(opts: UseDomEditOverlayGestu
     opts.blockedMoveRef.current = null;
     opts.groupGestureRef.current = null;
     opts.gestureRef.current = null;
-    opts.rafPausedRef.current = false;
+    opts.rafPausedRef.current = opts.waitingPressRef.current !== null;
+  };
+
+  const onLostPointerCapture = (e: React.PointerEvent<HTMLDivElement>) => {
+    const waiting = opts.waitingPressRef.current;
+    // Pointerup releases capture normally; the queued edit still has to land.
+    if (waiting?.pointerId === e.pointerId && waiting.released) return;
+    clearPointerState(opts.selectionRef);
   };
 
   return {
@@ -595,6 +590,7 @@ export function createDomEditOverlayGestureHandlers(opts: UseDomEditOverlayGestu
     startBlockedMove,
     onPointerMove,
     onPointerUp,
+    onLostPointerCapture,
     clearPointerState,
   };
 }

package/src/components/nle/NLEContext.test.ts

@@ -5,6 +5,7 @@ import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { shouldDisableTimelineWhileCompositionLoading, NLEProvider } from "./NLEContext";
 import { useAssetPreviewStore } from "../../utils/assetPreviewStore";
 import { installReactActEnvironment } from "../../hooks/domSelectionTestHarness";
+import { isPreviewChanging, requestPreviewReload } from "../../player/previewReloading";
 
 installReactActEnvironment();
 
@@ -143,3 +144,28 @@ describe("NLEProvider — composition source-map scoping", () => {
     host.remove();
   });
 });
+
+describe("NLEProvider — a requested reload", () => {
+  beforeEach(() => {
+    vi.stubGlobal(
+      "fetch",
+      vi.fn(() => Promise.reject(new Error("no network in tests"))),
+    );
+  });
+
+  afterEach(() => {
+    vi.unstubAllGlobals();
+  });
+
+  it("stops counting as a preview change once the refresh begins, so later presses do not wait", async () => {
+    const { host, root } = await mountNleProvider({ projectId: "p", refreshKey: 0 });
+    requestPreviewReload();
+    expect(isPreviewChanging()).toBe(true);
+
+    await renderNleProvider(root, { projectId: "p", refreshKey: 1 });
+    expect(isPreviewChanging()).toBe(false);
+
+    act(() => root.unmount());
+    host.remove();
+  });
+});

package/src/components/nle/NLEContext.tsx

@@ -10,6 +10,7 @@ import { ensureMotionPathPluginLoaded } from "../../utils/gsapSoftReload";
 import { useAssetPreviewStore } from "../../utils/assetPreviewStore";
 import { createStableContext } from "../../utils/hmrStableContext";
 import { studioApiFetch } from "../../utils/studioApiFetch";
+import { previewReloadBegun } from "../../player/previewReloading";
 
 export function shouldDisableTimelineWhileCompositionLoading(compositionLoading: boolean): boolean {
   return compositionLoading;
@@ -130,9 +131,13 @@ export function NLEProvider({
   // Lightweight reload: change iframe src instead of destroying the Player.
   const prevRefreshKeyRef = useRef(refreshKey);
   useEffect(() => {
-    if (refreshKey === prevRefreshKeyRef.current) return;
-    prevRefreshKeyRef.current = refreshKey;
-    refreshPlayer();
+    try {
+      if (refreshKey === prevRefreshKeyRef.current) return;
+      prevRefreshKeyRef.current = refreshKey;
+      refreshPlayer();
+    } finally {
+      previewReloadBegun();
+    }
   }, [refreshKey, refreshPlayer]);
 
   // Steps that follow every load of the live iframe, including a reload promoted in place.

package/src/hooks/draggedGsapPosition.ts

@@ -1,4 +1,5 @@
 import { roundTo3 } from "../utils/rounding";
+import { STUDIO_EDIT_MOMENT_ATTR, type EditMoment } from "../components/editor/manualEditsTypes";
 
 /**
  * Drag → GSAP position math, shared by the commit path
@@ -41,6 +42,7 @@ export interface DragStamp {
   origY: number;
   baseX: number;
   baseY: number;
+  at?: EditMoment;
   frozen?: boolean;
 }
 
@@ -52,9 +54,15 @@ export function readDragStamp(element: HTMLElement): DragStamp {
     origY: read("data-hf-drag-initial-offset-y") || 0,
     baseX: read("data-hf-drag-gsap-base-x"),
     baseY: read("data-hf-drag-gsap-base-y"),
+    at: readEditMoment(element),
   };
 }
 
+function readEditMoment(element: HTMLElement): EditMoment | undefined {
+  const raw = element.getAttribute(STUDIO_EDIT_MOMENT_ATTR);
+  return raw ? (JSON.parse(raw) as EditMoment) : undefined;
+}
+
 /** A gesture's stamp read at its release, for commits that finish after the next gesture re-stamps the element. */
 export const freezeDragStamp = (element: HTMLElement): DragStamp => ({
   ...readDragStamp(element),