@hyperframes/studio 0.8.137 → 0.8.139

package/dist/index.js

@@ -39,7 +39,7 @@ import {
   usePreviewVariablesStore,
   whenPreviewBooted,
   writeStudioUiPreferences
-} from "./chunk-4S3AYCOG.js";
+} from "./chunk-E422JDF5.js";
 import {
   Button,
   ContextMenu,
@@ -104,7 +104,7 @@ import {
   resolveDomEditSelection,
   serializeDomEditTextFields,
   studioApiFetch
-} from "./chunk-7UQWVN52.js";
+} from "./chunk-UYWON5AX.js";
 import {
   LAYER_REVEAL_PRIOR_POSITION_ATTR,
   LAYER_REVEAL_PRIOR_Z_ATTR,
@@ -122,7 +122,6 @@ import {
   findClipElementById,
   formatCssColor,
   furthestClipEndFromDocument,
-  furthestClipEndFromSource,
   getAdapterDuration,
   getDefaultStaticSeekPlaybackClock,
   getSelectorIndex,
@@ -164,7 +163,7 @@ import {
   splitTimelineElementKey,
   toHexColor,
   wrapTimeline
-} from "./chunk-TDWGXBUT.js";
+} from "./chunk-TFLU2MGI.js";
 import "./chunk-PZ5AY32C.js";
 
 // src/components/EditorShell.tsx
@@ -3162,8 +3161,10 @@ var COMPOSITION_ROOT_OPEN_TAG_RE = /<[^>]*data-composition-id="[^"]+"[^>]*>/i;
 var ROOT_COMPOSITION_OPEN_TAG_RE = /<[^>]*\bdata-composition-id(?=[\s=/>])[^>]*>/i;
 var DATA_DURATION_ATTR_RE = /(\bdata-duration\s*=\s*)(["'])[^"']*\2/i;
 function readRootCompositionDuration(source) {
-  const root = new DOMParser().parseFromString(source, "text/html").querySelector("[data-composition-id]");
-  const raw = root?.getAttribute("data-duration");
+  return rootCompositionDurationOf(new DOMParser().parseFromString(source, "text/html"));
+}
+function rootCompositionDurationOf(doc) {
+  const raw = doc.querySelector("[data-composition-id]")?.getAttribute("data-duration");
   if (raw == null) return null;
   return Number.parseFloat(raw);
 }
@@ -3260,9 +3261,9 @@ function buildTimelineAssetInsertHtml(input) {
   }
   return `<audio ${sharedAttrs} data-volume="1" style="z-index: ${input.zIndex}"></audio>`;
 }
-function setCompositionDurationToContent(source, contentEnd) {
+function setCompositionDurationToContent(source, contentEnd, rootDuration) {
   if (!Number.isFinite(contentEnd) || contentEnd <= 0) return source;
-  const rootDur = readRootCompositionDuration(source);
+  const rootDur = rootDuration === void 0 ? readRootCompositionDuration(source) : rootDuration;
   if (rootDur == null) return source;
   const next = roundToCenti(contentEnd);
   if (rootDur === next) return source;
@@ -9443,6 +9444,13 @@ function setStudioPendingEditClaimClock(read2) {
   historyClaims = read2 ?? (() => 0);
 }
 var NOT_SAVED = () => Promise.resolve(false);
+var cancelWaitingPress = null;
+function setStudioWaitingPressCancel(cancel) {
+  cancelWaitingPress = cancel;
+}
+function cancelNewestStudioWaitingPress() {
+  return cancelWaitingPress?.() ?? false;
+}
 var adopting = null;
 function adoptingStudioPendingEdit() {
   return adopting;
@@ -15730,10 +15738,10 @@ var ThumbnailScheduler = class {
     if (!scrolling) this.pump();
   }
   /** Holds composition renders while the preview loads: same server, and the preview is what the person awaits. */
-  setPreviewReloading(reloading) {
-    if (this.previewReloading === reloading) return;
-    this.previewReloading = reloading;
-    if (!reloading) {
+  setPreviewReloading(reloading2) {
+    if (this.previewReloading === reloading2) return;
+    this.previewReloading = reloading2;
+    if (!reloading2) {
       this.pump();
       return;
     }
@@ -15819,7 +15827,7 @@ var ThumbnailScheduler = class {
       slotFree = true;
       this.activeByBucket[bucket]--;
       this.activeByKind[entry2.request.kind]--;
-      this.pump();
+      queueMicrotask(() => this.pump());
     };
     controller.signal.addEventListener("abort", freeSlot, { once: true });
     this.notify(entry2);
@@ -18362,7 +18370,17 @@ function applyTimelineMoveAttributes(original, target, start, duration, track2,
   return patched;
 }
 function syncCompositionDurationToContent(source) {
-  return setCompositionDurationToContent(source, furthestClipEndFromSource(source));
+  return syncCompositionDurationWithEnd(source).source;
+}
+function syncCompositionDurationWithEnd(source) {
+  const doc = new DOMParser().parseFromString(source, "text/html");
+  const contentEnd = furthestClipEndFromDocument(doc);
+  const synced = setCompositionDurationToContent(
+    source,
+    contentEnd,
+    rootCompositionDurationOf(doc)
+  );
+  return { source: synced, contentEnd };
 }
 function buildTimelineMoveTimingPatch(original, target, start, duration, track2, audioGroup) {
   const patched = applyTimelineMoveAttributes(original, target, start, duration, track2, audioGroup);
@@ -29720,6 +29738,7 @@ import {
 } from "@hyperframes/core/editing/draft-markers";
 var STUDIO_ROTATION_PROP = "--hf-studio-rotation";
 var STUDIO_PATH_OFFSET_ATTR = "data-hf-studio-path-offset";
+var STUDIO_EDIT_MOMENT_ATTR = "data-hf-studio-edit-at";
 var STUDIO_BOX_SIZE_ATTR = "data-hf-studio-box-size";
 var STUDIO_ROTATION_ATTR = "data-hf-studio-rotation";
 var STUDIO_ORIGINAL_TRANSLATE_ATTR = "data-hf-studio-original-translate";
@@ -30432,10 +30451,12 @@ var GESTURE_DRAWS = {
   rotate: ["rotate", "transform", "transform-origin", "display", STUDIO_ROTATION_PROP],
   edit: []
 };
-function beginStudioManualEditGesture(element, draws) {
+function beginStudioManualEditGesture(element, draws, at) {
   studioManualEditGestureId += 1;
   const token = `gesture-${studioManualEditGestureId}:${draws}`;
   element.setAttribute(STUDIO_MANUAL_EDIT_GESTURE_ATTR, token);
+  if (at) element.setAttribute(STUDIO_EDIT_MOMENT_ATTR, JSON.stringify(at));
+  else element.removeAttribute(STUDIO_EDIT_MOMENT_ATTR);
   return token;
 }
 var GESTURE_ENDED = "hf-manual-edit-gesture-ended";
@@ -30443,6 +30464,7 @@ function endStudioManualEditGesture(element, token) {
   if (token && element.getAttribute(STUDIO_MANUAL_EDIT_GESTURE_ATTR) !== token) return;
   if (!element.hasAttribute(STUDIO_MANUAL_EDIT_GESTURE_ATTR)) return;
   element.removeAttribute(STUDIO_MANUAL_EDIT_GESTURE_ATTR);
+  element.removeAttribute(STUDIO_EDIT_MOMENT_ATTR);
   const doc = element.ownerDocument;
   doc.dispatchEvent(new (doc.defaultView?.Event ?? Event)(GESTURE_ENDED));
 }
@@ -30848,6 +30870,43 @@ function makeStudioDebugLogger(name) {
 // src/utils/reloadDebug.ts
 var logReload = makeStudioDebugLogger("reload");
 
+// src/player/previewReloading.ts
+var reloading = false;
+var reloadRequested = false;
+var scriptWrites = 0;
+var givenUp = false;
+var changing = () => reloading || reloadRequested || scriptWrites > 0;
+var noteIdle = () => {
+  if (!changing()) givenUp = false;
+};
+function giveUpOnPreviewChange() {
+  givenUp = changing();
+}
+function setPreviewReloading(next) {
+  reloading = next;
+  thumbnailScheduler.setPreviewReloading(next);
+  noteIdle();
+}
+function requestPreviewReload() {
+  reloadRequested = true;
+}
+function previewReloadBegun() {
+  reloadRequested = false;
+  noteIdle();
+}
+async function whileScriptWrites(write) {
+  scriptWrites += 1;
+  try {
+    return await write();
+  } finally {
+    scriptWrites -= 1;
+    noteIdle();
+  }
+}
+function isPreviewChanging() {
+  return changing() && !givenUp;
+}
+
 // src/player/sceneSwap.ts
 var SCENES_SWAPPED = "hf-scenes-swapped";
 var SCENE_SWAP_MS = 5e3;
@@ -30990,7 +31049,7 @@ function useShadowPreviewReload({
       isRefreshingRef.current = false;
       pendingSeekRef.current = null;
       setPreviewSlots(planShadowDiscard);
-      thumbnailScheduler.setPreviewReloading(false);
+      setPreviewReloading(false);
       const message = `The preview did not reload (${cause}). The previous preview is still showing.`;
       logReload("shadow-failed", { cause });
       console.error(`[studio] ${message}`);
@@ -31061,7 +31120,7 @@ function useShadowPreviewReload({
       if (liveTime2 != null) handOverPlaybackRef.current(liveTime2, playing);
       announcePreviewPromoted({ retired, live: shadow });
       onPromotedRef.current?.();
-      thumbnailScheduler.setPreviewReloading(false);
+      setPreviewReloading(false);
     },
     [
       stopPendingShadow,
@@ -31152,7 +31211,7 @@ function useShadowPreviewReload({
       savesAtRequestRef.current = gestureSavesOnScreen();
       armReadyTimer(gen);
       setPreviewSlots((prev) => planShadowReload(prev, gen, url));
-      thumbnailScheduler.setPreviewReloading(true);
+      setPreviewReloading(true);
     },
     [stopPendingShadow, armReadyTimer, gestureSavesOnScreen]
   );
@@ -31165,7 +31224,7 @@ function useShadowPreviewReload({
     pendingSeekRef.current = null;
     usePlayerStore.getState().setTimelineReady(false);
     setPreviewSlots(planShadowDiscard);
-    thumbnailScheduler.setPreviewReloading(false);
+    setPreviewReloading(false);
   }, [stopPendingShadow, isRefreshingRef, pendingSeekRef]);
   useMountEffect(() => {
     const onVisibilityChange = () => {
@@ -31180,7 +31239,7 @@ function useShadowPreviewReload({
     return () => {
       document.removeEventListener("visibilitychange", onVisibilityChange);
       stopPendingShadow();
-      thumbnailScheduler.setPreviewReloading(false);
+      setPreviewReloading(false);
     };
   });
   return {
@@ -32043,11 +32102,13 @@ function useTimelinePlayer({
     const swapWouldReplaceGestureNode = !!iframe.contentDocument && isStudioManualEditGestureLiveIn(iframe.contentDocument);
     if (!swap || isRefreshingRef.current || swapWouldReplaceGestureNode)
       return reloadWholeFilm(url.toString());
-    swap(url.toString(), isCurrent, cancel.signal).catch((error) => {
-      if (!isCurrent()) return;
-      logReload("scene-swap-refused", { reason: String(error) });
-      reloadWholeFilm(url.toString());
-    });
+    whileScriptWrites(() => swap(url.toString(), isCurrent, cancel.signal)).catch(
+      (error) => {
+        if (!isCurrent()) return;
+        logReload("scene-swap-refused", { reason: String(error) });
+        reloadWholeFilm(url.toString());
+      }
+    );
   }, [reloadWholeFilm, previewGeneration]);
   const pauseRef = useRef47(pause);
   pauseRef.current = pause;
@@ -32293,9 +32354,13 @@ function NLEProvider({
   const [previewCompositionSize, setPreviewCompositionSize] = useState35(null);
   const prevRefreshKeyRef = useRef49(refreshKey);
   useEffect37(() => {
-    if (refreshKey === prevRefreshKeyRef.current) return;
-    prevRefreshKeyRef.current = refreshKey;
-    refreshPlayer();
+    try {
+      if (refreshKey === prevRefreshKeyRef.current) return;
+      prevRefreshKeyRef.current = refreshKey;
+      refreshPlayer();
+    } finally {
+      previewReloadBegun();
+    }
   }, [refreshKey, refreshPlayer]);
   const afterLiveIframeLoad = useCallback44(() => {
     ensureMotionPathPluginLoaded(iframeRef.current);
@@ -35975,6 +36040,11 @@ function readThroughPass(memo61, key2, compute) {
 
 // src/components/editor/domEditOverlayGeometry.ts
 var RESIZE_HANDLE_HIT_PX = 16;
+var shiftedOverlayRect = (rect, dx, dy) => ({
+  ...rect,
+  left: rect.left + dx,
+  top: rect.top + dy
+});
 function isElementVisibleForOverlay(el) {
   return isElementVisibleThroughAncestors(el);
 }
@@ -36264,6 +36334,7 @@ var ROTATED_SNAP_BYPASS_DEGREES = 0.5;
 function movesGesture(gesture, e) {
   return e.pointerId === gesture.pointerId && (e.buttons & 1) === 1;
 }
+var PRESS_WAITING_ATTR = "data-dom-edit-press-waiting";
 function focusDomEditOverlayElement(element) {
   element?.focus({ preventScroll: true });
 }
@@ -36893,7 +36964,7 @@ function OffCanvasIndicators({
     const selectOffCanvas = async () => {
       const el = elements.current.get(r.key);
       if (!el) return;
-      const { resolveDomEditSelection: resolveDomEditSelection2 } = await import("./domEditingLayers-IEVLO54Z.js");
+      const { resolveDomEditSelection: resolveDomEditSelection2 } = await import("./domEditingLayers-KBTPQKGA.js");
       const acp = activeCompositionPathRef.current ?? "index.html";
       const sel = await resolveDomEditSelection2(el, {
         activeCompositionPath: acp,
@@ -36947,6 +37018,68 @@ function ChildRectOutlines({
   )) });
 }
 
+// src/components/editor/domEditResizeLocal.ts
+var MIN_RESIZE_LOCAL_PX = 1;
+var DEGENERATE_START_DIST_PX = 3;
+function resolveCenterResizeScale(input) {
+  const startDist = Math.hypot(
+    input.pointerStart.x - input.centerStart.x,
+    input.pointerStart.y - input.centerStart.y
+  );
+  if (!Number.isFinite(startDist) || startDist < DEGENERATE_START_DIST_PX) return 1;
+  const nowDist = Math.hypot(
+    input.pointer.x - input.centerStart.x,
+    input.pointer.y - input.centerStart.y
+  );
+  return nowDist / startDist;
+}
+function resolveCenterResizeSize(input) {
+  const baseWidth = Math.max(input.baseWidth, MIN_RESIZE_LOCAL_PX);
+  const baseHeight = Math.max(input.baseHeight, MIN_RESIZE_LOCAL_PX);
+  const rawScale = resolveCenterResizeScale({
+    pointer: input.pointer,
+    pointerStart: input.pointerStart,
+    centerStart: input.centerStart
+  });
+  const minScale = MIN_RESIZE_LOCAL_PX / Math.min(baseWidth, baseHeight);
+  const scale = Math.max(minScale, rawScale);
+  return { width: baseWidth * scale, height: baseHeight * scale };
+}
+var CURSORS_8 = [
+  "ns-resize",
+  // 0°   (up)
+  "nesw-resize",
+  // 45°
+  "ew-resize",
+  // 90°  (right)
+  "nwse-resize",
+  // 135°
+  "ns-resize",
+  // 180° (down)
+  "nesw-resize",
+  // 225°
+  "ew-resize",
+  // 270° (left)
+  "nwse-resize"
+  // 315°
+];
+var CORNER_BASE_ANGLE_DEG = {
+  nw: 315,
+  ne: 45,
+  se: 135,
+  sw: 225
+};
+function resolveRotatedResizeCursor(handle, rotationDeg) {
+  const angle = CORNER_BASE_ANGLE_DEG[handle] + rotationDeg;
+  const normalized = (angle % 360 + 360) % 360;
+  const bucket = Math.round(normalized / 45) % 8;
+  return CURSORS_8[bucket];
+}
+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) };
+}
+
 // src/components/editor/manualOffsetDrag.ts
 import { isHtmlElement as isHtmlElement6 } from "@hyperframes/core/runtime/dom-realm";
 
@@ -37542,9 +37675,14 @@ function readDragStamp(element) {
     origX: read2("data-hf-drag-initial-offset-x") || 0,
     origY: read2("data-hf-drag-initial-offset-y") || 0,
     baseX: read2("data-hf-drag-gsap-base-x"),
-    baseY: read2("data-hf-drag-gsap-base-y")
+    baseY: read2("data-hf-drag-gsap-base-y"),
+    at: readEditMoment(element)
   };
 }
+function readEditMoment(element) {
+  const raw = element.getAttribute(STUDIO_EDIT_MOMENT_ATTR);
+  return raw ? JSON.parse(raw) : void 0;
+}
 var freezeDragStamp = (element) => ({
   ...readDragStamp(element),
   frozen: true
@@ -37876,7 +38014,8 @@ function createManualOffsetDragMember(input) {
   const initialPathOffset = captureStudioPathOffset(input.element);
   const gestureToken = beginStudioManualEditGesture(
     input.element,
-    input.gesture === "resize" ? "resize" : "move"
+    input.gesture === "resize" ? "resize" : "move",
+    input.at
   );
   const measured = measureManualOffsetDragScreenToOffsetMatrix(input.element, initialOffset, {
     scaleX: input.rect.editScaleX,
@@ -37991,6 +38130,7 @@ function settleDraftTranslate(element, gsapOwnsPosition) {
 }
 function endManualOffsetDragMembers(members) {
   for (const member of members) {
+    if (!isStudioManualEditGestureCurrent(member.element, member.gestureToken)) continue;
     endStudioManualEditGesture(member.element, member.gestureToken);
     member.element.removeAttribute("data-hf-drag-initial-offset-x");
     member.element.removeAttribute("data-hf-drag-initial-offset-y");
@@ -38170,119 +38310,6 @@ function readRotationBase(element, plain) {
   return gsapRotation + readStudioRotation(element).angle;
 }
 
-// src/components/editor/domEditResizeLocal.ts
-var MIN_RESIZE_LOCAL_PX = 1;
-var DEGENERATE_START_DIST_PX = 3;
-function resolveCenterResizeScale(input) {
-  const startDist = Math.hypot(
-    input.pointerStart.x - input.centerStart.x,
-    input.pointerStart.y - input.centerStart.y
-  );
-  if (!Number.isFinite(startDist) || startDist < DEGENERATE_START_DIST_PX) return 1;
-  const nowDist = Math.hypot(
-    input.pointer.x - input.centerStart.x,
-    input.pointer.y - input.centerStart.y
-  );
-  return nowDist / startDist;
-}
-function resolveCenterResizeSize(input) {
-  const baseWidth = Math.max(input.baseWidth, MIN_RESIZE_LOCAL_PX);
-  const baseHeight = Math.max(input.baseHeight, MIN_RESIZE_LOCAL_PX);
-  const rawScale = resolveCenterResizeScale({
-    pointer: input.pointer,
-    pointerStart: input.pointerStart,
-    centerStart: input.centerStart
-  });
-  const minScale = MIN_RESIZE_LOCAL_PX / Math.min(baseWidth, baseHeight);
-  const scale = Math.max(minScale, rawScale);
-  return { width: baseWidth * scale, height: baseHeight * scale };
-}
-var CURSORS_8 = [
-  "ns-resize",
-  // 0°   (up)
-  "nesw-resize",
-  // 45°
-  "ew-resize",
-  // 90°  (right)
-  "nwse-resize",
-  // 135°
-  "ns-resize",
-  // 180° (down)
-  "nesw-resize",
-  // 225°
-  "ew-resize",
-  // 270° (left)
-  "nwse-resize"
-  // 315°
-];
-var CORNER_BASE_ANGLE_DEG = {
-  nw: 315,
-  ne: 45,
-  se: 135,
-  sw: 225
-};
-function resolveRotatedResizeCursor(handle, rotationDeg) {
-  const angle = CORNER_BASE_ANGLE_DEG[handle] + rotationDeg;
-  const normalized = (angle % 360 + 360) % 360;
-  const bucket = Math.round(normalized / 45) % 8;
-  return CURSORS_8[bucket];
-}
-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) };
-}
-
-// src/components/editor/resizeDraft.ts
-function resolveResizeAnchor(g, corners, measureOrientedRect) {
-  const fixedStart = g.resizeFixedCenterStart;
-  if (corners && fixedStart) {
-    return computeNextResizeAnchor(g.lastResizeAnchor, fixedStart, overlayCornersCentroid(corners));
-  }
-  const fallbackRect = measureOrientedRect();
-  return resolveResizeCenterAnchorOffset({
-    originWidth: g.originWidth,
-    originHeight: g.originHeight,
-    overlayWidth: fallbackRect ? fallbackRect.width : g.originWidth,
-    overlayHeight: fallbackRect ? fallbackRect.height : g.originHeight
-  });
-}
-function resolveAnchoredResizeDraft(g, member, element, overlayEl, iframe, measureOrientedRect) {
-  const corners = overlayEl && iframe ? elementCornerOverlayPoints(overlayEl, iframe, element) : null;
-  const anchor2 = resolveResizeAnchor(g, corners, measureOrientedRect);
-  g.lastResizeAnchor = anchor2;
-  applyManualOffsetDragDraft(member, anchor2.dx, anchor2.dy);
-  return measureOrientedRect() ?? {
-    left: g.originLeft + anchor2.dx,
-    top: g.originTop + anchor2.dy,
-    width: corners ? cornerEdgeLength(corners.nw, corners.ne) : g.originWidth,
-    height: corners ? cornerEdgeLength(corners.nw, corners.sw) : g.originHeight,
-    editScaleX: g.editScaleX,
-    editScaleY: g.editScaleY,
-    angle: g.actualRotation
-  };
-}
-function resolveResizeDraftRect(g, element, overlayEl, iframe, measureOrientedRect) {
-  if (g.pathOffsetMember) {
-    return resolveAnchoredResizeDraft(
-      g,
-      g.pathOffsetMember,
-      element,
-      overlayEl,
-      iframe,
-      measureOrientedRect
-    );
-  }
-  return measureOrientedRect() ?? {
-    left: g.originLeft,
-    top: g.originTop,
-    width: g.originWidth,
-    height: g.originHeight,
-    editScaleX: g.editScaleX,
-    editScaleY: g.editScaleY,
-    angle: g.actualRotation
-  };
-}
-
 // src/components/editor/snapEngine.ts
 var SNAP_THRESHOLD_PX = 6;
 var SNAP_ENGAGE_TRAVEL_PX = 4;
@@ -38760,7 +38787,7 @@ function notifyBlockedPress(e, opts, selection) {
   if (e.button !== 0 || selection.capabilities.commitCheckPending) return;
   opts.onBlockedMoveRef.current(selection);
 }
-function startGroupDrag(e, opts) {
+function startGroupDrag(e, opts, at) {
   const items = opts.groupOverlayItemsRef.current;
   if (items.length <= 1) return false;
   const blockedSelection = items.find(
@@ -38781,7 +38808,8 @@ function startGroupDrag(e, opts) {
       selection: item.selection,
       element: item.element,
       rect: item.rect,
-      gesture: "drag"
+      gesture: "drag",
+      at
     });
     if (!result.ok) {
       restoreManualOffsetDragMembers(members);
@@ -38839,6 +38867,7 @@ function startGroupDrag(e, opts) {
   return true;
 }
 function startGesture(kind, e, opts, options) {
+  const at = options?.at;
   const sel = options?.selection ?? opts.selectionRef.current;
   const rect = options?.rect ?? opts.overlayRectRef.current;
   const box = opts.boxRef.current;
@@ -38874,7 +38903,8 @@ function startGesture(kind, e, opts, options) {
       selection: sel,
       element: sel.element,
       rect,
-      gesture: "drag"
+      gesture: "drag",
+      at
     });
     if (!result.ok) {
       opts.onBlockedMoveRef.current(result.selection, result.reason);
@@ -38892,7 +38922,8 @@ function startGesture(kind, e, opts, options) {
         selection: sel,
         element: sel.element,
         rect,
-        gesture: "resize"
+        gesture: "resize",
+        at
       });
       if (result.ok) {
         pathOffsetMember = result.member;
@@ -38900,12 +38931,13 @@ function startGesture(kind, e, opts, options) {
         manualEditDragToken = result.member.gestureToken;
         if (result.member.plainTranslate) applyManualOffsetDragDraft(result.member, 0, 0);
       } else {
-        manualEditDragToken = beginStudioManualEditGesture(sel.element, "resize");
+        manualEditDragToken = beginStudioManualEditGesture(sel.element, "resize", at);
       }
     } else {
       manualEditDragToken = beginStudioManualEditGesture(
         sel.element,
-        kind === "rotate" ? "rotate" : "resize"
+        kind === "rotate" ? "rotate" : "resize",
+        at
       );
     }
   }
@@ -38988,6 +39020,274 @@ function startGesture(kind, e, opts, options) {
   return true;
 }
 
+// src/hooks/editMoment.ts
+function playheadMoment() {
+  const { currentTime, activeKeyframePct } = usePlayerStore.getState();
+  return { time: currentTime, keyframePct: activeKeyframePct };
+}
+function editMoment(stamp) {
+  return stamp?.at ?? playheadMoment();
+}
+
+// src/components/editor/previewGestureStarts.ts
+var MAX_SETTLED_WAIT_FRAMES = 60;
+var PRESS_WAIT_MAX_MS = 1e4;
+function createPreviewGestureStarts(opts, moveActiveGesture, releaseActiveGesture) {
+  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;
+  };
+  const unlink = (press, next) => {
+    for (let p = opts.waitingPressRef.current; p; p = p.after)
+      if (p.after === press) p.after = next;
+  };
+  const endWaitingPress = (press = 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();
+    } else if (press) unlink(press, null);
+    offerUndo();
+  };
+  const showPressBefore = (press) => {
+    const before = press.after;
+    opts.waitingPressRef.current = before;
+    const shown2 = before ?? press;
+    const at = before?.moved;
+    const [dx, dy] = at ? [at.clientX - shown2.startX, at.clientY - shown2.startY] : [0, 0];
+    shown2.draw?.(dx, dy);
+    if (!before) clearWaitingMark();
+  };
+  const dropPress = (press) => {
+    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;
+  };
+  const endHeldPress = () => {
+    const held = opts.waitingPressRef.current;
+    if (held && !held.released) dropPress(held);
+  };
+  const releaseWaitingPress = (press, e) => {
+    press.released = e;
+    offerUndo();
+  };
+  const drawPressedBox = (origin2) => origin2 && ((dx, dy) => opts.setOverlayRect(shiftedOverlayRect(origin2, dx, dy)));
+  const drawResizedBox = (origin2, press) => {
+    if (!origin2) return null;
+    const bounds = opts.overlayRef.current?.getBoundingClientRect();
+    const centre = {
+      x: (bounds?.left ?? 0) + origin2.left + origin2.width / 2,
+      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 [width, height] = [origin2.width * scale, origin2.height * scale];
+      opts.setOverlayRect({
+        ...origin2,
+        left: origin2.left + (origin2.width - width) / 2,
+        top: origin2.top + (origin2.height - height) / 2,
+        width,
+        height
+      });
+    };
+  };
+  const startOnShownPreview = (e, pressed, start, draw = null) => {
+    const at = playheadMoment();
+    if (!isPreviewChanging() && !opts.waitingPressRef.current) return start(e, at, false);
+    e.preventDefault();
+    e.stopPropagation();
+    e.currentTarget.setPointerCapture(e.pointerId);
+    const held = { setPointerCapture() {
+    } };
+    const down = { ...e, currentTarget: held, preventDefault() {
+    }, stopPropagation() {
+    } };
+    const press = {
+      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();
+    const countFrame = () => {
+      const elements = pressed();
+      const live = opts.iframeRef.current?.contentDocument;
+      const settled = !isPreviewChanging();
+      const shown2 = settled && elements.every((el) => el.ownerDocument === live);
+      shownFrames = shown2 ? shownFrames + 1 : 0;
+      settledFrames = settled ? settledFrames + 1 : 0;
+      return elements.length;
+    };
+    const waitStep = () => {
+      if (press.after && !press.after.ended) return "wait";
+      const found = countFrame();
+      const overdue = performance.now() - since > PRESS_WAIT_MAX_MS;
+      if (overdue) giveUpOnPreviewChange();
+      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, at, true))
+        return;
+      if (press.moved) moveActiveGesture(press.moved);
+      if (press.released) releaseActiveGesture(press.released);
+    };
+    press.frame = requestAnimationFrame(poll);
+    return true;
+  };
+  const shownSelection = (selection) => {
+    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) => {
+    const overlay = opts.overlayRef.current;
+    const iframe = opts.iframeRef.current;
+    return overlay && iframe && orientedGroupAwareOverlayRect(overlay, iframe, element);
+  };
+  const startGroupDrag2 = (e) => {
+    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 startGesture2 = (kind, e, options) => {
+    const target = options?.selection ?? opts.selectionRef.current;
+    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 });
+    return startOnShownPreview(
+      e,
+      () => {
+        const shown2 = target && shownSelection(target);
+        return shown2 ? [shown2.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: startGesture2, startGroupDrag: startGroupDrag2, endWaitingPress, endHeldPress, releaseWaitingPress };
+}
+
+// src/components/editor/resizeDraft.ts
+function resolveResizeAnchor(g, corners, measureOrientedRect) {
+  const fixedStart = g.resizeFixedCenterStart;
+  if (corners && fixedStart) {
+    return computeNextResizeAnchor(g.lastResizeAnchor, fixedStart, overlayCornersCentroid(corners));
+  }
+  const fallbackRect = measureOrientedRect();
+  return resolveResizeCenterAnchorOffset({
+    originWidth: g.originWidth,
+    originHeight: g.originHeight,
+    overlayWidth: fallbackRect ? fallbackRect.width : g.originWidth,
+    overlayHeight: fallbackRect ? fallbackRect.height : g.originHeight
+  });
+}
+function resolveAnchoredResizeDraft(g, member, element, overlayEl, iframe, measureOrientedRect) {
+  const corners = overlayEl && iframe ? elementCornerOverlayPoints(overlayEl, iframe, element) : null;
+  const anchor2 = resolveResizeAnchor(g, corners, measureOrientedRect);
+  g.lastResizeAnchor = anchor2;
+  applyManualOffsetDragDraft(member, anchor2.dx, anchor2.dy);
+  return measureOrientedRect() ?? {
+    left: g.originLeft + anchor2.dx,
+    top: g.originTop + anchor2.dy,
+    width: corners ? cornerEdgeLength(corners.nw, corners.ne) : g.originWidth,
+    height: corners ? cornerEdgeLength(corners.nw, corners.sw) : g.originHeight,
+    editScaleX: g.editScaleX,
+    editScaleY: g.editScaleY,
+    angle: g.actualRotation
+  };
+}
+function resolveResizeDraftRect(g, element, overlayEl, iframe, measureOrientedRect) {
+  if (g.pathOffsetMember) {
+    return resolveAnchoredResizeDraft(
+      g,
+      g.pathOffsetMember,
+      element,
+      overlayEl,
+      iframe,
+      measureOrientedRect
+    );
+  }
+  return measureOrientedRect() ?? {
+    left: g.originLeft,
+    top: g.originTop,
+    width: g.originWidth,
+    height: g.originHeight,
+    editScaleX: g.editScaleX,
+    editScaleY: g.editScaleY,
+    angle: g.actualRotation
+  };
+}
+
 // src/components/editor/groupDragMove.ts
 function createGroupDragMover(opts, setDraftGroupOverlayItems) {
   let lastGroupPositions = {};
@@ -39147,7 +39447,7 @@ function logGestureCommitFailure(message, error) {
 }
 function createDomEditOverlayGestureHandlers(opts) {
   const setDraftOverlayRect = (next) => {
-    opts.setOverlayRect(next);
+    if (!opts.waitingPressRef.current) opts.setOverlayRect(next);
   };
   const restoreGestureOverlayRect = (g) => {
     setDraftOverlayRect({
@@ -39157,21 +39457,22 @@ function createDomEditOverlayGestureHandlers(opts) {
       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) => {
-    opts.setGroupOverlayItems(next);
+    if (!opts.waitingPressRef.current) opts.setGroupOverlayItems(next);
   };
   const restoreGroupPathOffsets = (g) => {
     restoreManualOffsetDragMembers(g.members);
     setDraftGroupOverlayItems(g.originItems);
   };
-  const startGroupDrag2 = (e) => startGroupDrag(e, opts);
-  const startGesture2 = (kind, e, options) => startGesture(kind, e, opts, options);
+  const { startGesture: startGesture2, startGroupDrag: startGroupDrag2, endWaitingPress, endHeldPress, releaseWaitingPress } = createPreviewGestureStarts(
+    opts,
+    (event) => moveActiveGesture(event),
+    (event) => releaseActiveGesture(event)
+  );
   const startBlockedMove = (e, selection) => {
     e.preventDefault();
     e.stopPropagation();
@@ -39181,10 +39482,20 @@ function createDomEditOverlayGestureHandlers(opts) {
   };
   const moveGroupDrag = createGroupDragMover(opts, setDraftGroupOverlayItems);
   const onPointerMove = (e) => {
+    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);
+  };
+  const moveActiveGesture = (e) => {
     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 });
@@ -39288,7 +39599,6 @@ function createDomEditOverlayGestureHandlers(opts) {
       }
       if (g.pathOffsetMember) applyManualOffsetDragDraft(g.pathOffsetMember, dx, dy);
     } else {
-      if (!box) return;
       const nextSize = resolveCenterResizeSize({
         baseWidth: g.actualWidth,
         baseHeight: g.actualHeight,
@@ -39314,23 +39624,34 @@ function createDomEditOverlayGestureHandlers(opts) {
         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);
     }
   };
   const onPointerUp = (e) => {
+    const waiting = opts.waitingPressRef.current;
+    if (waiting && waiting.pointerId === e.pointerId) {
+      releaseWaitingPress(waiting, e);
+      opts.suppressNextBoxClickRef.current = true;
+      return;
+    }
+    releaseActiveGesture(e);
+  };
+  const releaseActiveGesture = (e) => {
     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;
       opts.suppressNextBoxClickRef.current = true;
@@ -39349,7 +39670,7 @@ function createDomEditOverlayGestureHandlers(opts) {
       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) => ({
@@ -39384,13 +39705,8 @@ function createDomEditOverlayGestureHandlers(opts) {
       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)) {
       if (g.pathOffsetMember) restoreManualOffsetDragMembers([g.pathOffsetMember]);
@@ -39523,7 +39839,9 @@ function createDomEditOverlayGestureHandlers(opts) {
       logResizeSettle(sel.element, "post-release");
     }
   };
-  const clearPointerState = (selectionRef) => {
+  const clearPointerState = (selectionRef, dropQueued = false) => {
+    if (dropQueued) endWaitingPress();
+    else endHeldPress();
     opts.snapGuidesRef.current = null;
     const groupG = opts.groupGestureRef.current;
     if (groupG) restoreGroupPathOffsets(groupG);
@@ -39554,7 +39872,12 @@ function createDomEditOverlayGestureHandlers(opts) {
     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) => {
+    const waiting = opts.waitingPressRef.current;
+    if (waiting?.pointerId === e.pointerId && waiting.released) return;
+    clearPointerState(opts.selectionRef);
   };
   return {
     startGesture: startGesture2,
@@ -39562,6 +39885,7 @@ function createDomEditOverlayGestureHandlers(opts) {
     startBlockedMove,
     onPointerMove,
     onPointerUp,
+    onLostPointerCapture,
     clearPointerState
   };
 }
@@ -41998,6 +42322,7 @@ var DomEditOverlay = memo28(function DomEditOverlay2({
   const gestureRef = useRef70(null);
   const groupGestureRef = useRef70(null);
   const blockedMoveRef = useRef70(null);
+  const waitingPressRef = useRef70(null);
   const suppressNextBoxClickRef = useRef70(false);
   const snapGuidesRef = useRef70(null);
   const rafPausedRef = useRef70(false);
@@ -42086,6 +42411,7 @@ var DomEditOverlay = memo28(function DomEditOverlay2({
     activeCompositionPath
   });
   const gestures = createDomEditOverlayGestureHandlers({
+    activeCompositionPathRef,
     overlayRef,
     iframeRef,
     boxRef,
@@ -42096,6 +42422,7 @@ var DomEditOverlay = memo28(function DomEditOverlay2({
     gestureRef,
     groupGestureRef,
     blockedMoveRef,
+    waitingPressRef,
     rafPausedRef,
     suppressNextBoxClickRef,
     setOverlayRect,
@@ -42111,17 +42438,17 @@ var DomEditOverlay = memo28(function DomEditOverlay2({
     snapGuidesRef
   });
   useEffect55(() => {
-    if (readOnly) gestures.clearPointerState(selectionRef);
+    if (readOnly) gestures.clearPointerState(selectionRef, true);
   }, [gestures, readOnly, selectionRef]);
-  const cancelGestureRef = useRef70(() => {
+  const cancelGestureRef = useRef70((_dropQueued) => {
   });
-  cancelGestureRef.current = () => gestures.clearPointerState(selectionRef);
+  cancelGestureRef.current = (dropQueued) => gestures.clearPointerState(selectionRef, dropQueued);
   useMountEffect(() => {
     const cancel = () => cancelGestureRef.current();
     window.addEventListener("blur", cancel);
     return () => {
       window.removeEventListener("blur", cancel);
-      cancel();
+      cancelGestureRef.current(true);
     };
   });
   const { flushNudge } = useDomEditNudge({
@@ -42253,7 +42580,7 @@ var DomEditOverlay = memo28(function DomEditOverlay2({
       onPointerLeave: () => onCanvasPointerLeaveRef.current(),
       onPointerUp: marquee.onPointerUp,
       onPointerCancel: marquee.onPointerCancel,
-      onLostPointerCapture: () => cancelGestureRef.current(),
+      onLostPointerCapture: gestures.onLostPointerCapture,
       onContextMenu: hostInput ? void 0 : handleContextMenu,
       children: [
         !hostInput && hoverSelection && hoverRect && compRect.width > 0 && /* @__PURE__ */ jsx102(
@@ -45807,8 +46134,8 @@ import { isTweenConfigKey } from "@hyperframes/parsers/gsap-constants";
 function newTweenTarget(selection) {
   return writeTargetSelector(selection);
 }
-function computeCurrentPercentage(selection, animation) {
-  return computeElementPercentage(usePlayerStore.getState().currentTime, selection, animation);
+function computeCurrentPercentage(selection, animation, time = usePlayerStore.getState().currentTime) {
+  return computeElementPercentage(time, selection, animation);
 }
 function parkPlayheadOnKeyframe(anim, pct) {
   const time = percentageToAbsoluteForAnimation(pct, anim);
@@ -46173,9 +46500,8 @@ function animHasPosition(anim) {
   }
   return "x" in anim.properties || "y" in anim.properties;
 }
-function findGsapPositionAnimation(animations, selector) {
+function findGsapPositionAnimation(animations, selector, currentTime = usePlayerStore.getState().currentTime) {
   if (animations.length === 0) return null;
-  const currentTime = usePlayerStore.getState().currentTime;
   const scored = animations.filter(animHasPosition).map((a) => {
     let score = 0;
     if (a.keyframes) score += 5;
@@ -46203,9 +46529,8 @@ function statesValueAt(anim, time) {
   if (anim.method === "from") return near4(0);
   return near4(100) || anim.method === "fromTo" && near4(0);
 }
-function pickClosestToPlayhead(anims) {
+function pickClosestToPlayhead(anims, ct = usePlayerStore.getState().currentTime) {
   if (anims.length <= 1) return anims[0] ?? null;
-  const ct = usePlayerStore.getState().currentTime;
   return anims.reduce((best, a) => {
     const dist = playheadDistance(a, ct);
     const bestDist = playheadDistance(best, ct);
@@ -46670,9 +46995,13 @@ function planValueAtPlayhead(edit) {
     added: keyframes.length > authored
   };
 }
-function planValueEdit(selection, anim, values, iframe, { backfill, holdFromStart } = {}) {
+function planValueEdit(selection, anim, values, iframe, {
+  backfill,
+  holdFromStart,
+  moment = playheadMoment()
+} = {}) {
   if (tweenReach(anim, selection.element) === "shared") return refuse("shared-tween");
-  const { activeKeyframePct, currentTime } = usePlayerStore.getState();
+  const { keyframePct: activeKeyframePct, time: currentTime } = moment;
   const tween = findParsedTween(iframe, selection.element, anim);
   const timed = withExactStepTimes(anim, tween);
   return planValueAtPlayhead({
@@ -46687,10 +47016,11 @@ function planValueEdit(selection, anim, values, iframe, { backfill, holdFromStar
 }
 async function commitValueAtPlayhead(selection, anim, values, iframe, callbacks, options) {
   await materializeIfDynamic(anim, iframe, callbacks.commitMutation, selection);
-  const { activeKeyframePct, setActiveKeyframePct } = usePlayerStore.getState();
+  const moment = editMoment(callbacks.stamp);
+  const { setActiveKeyframePct } = usePlayerStore.getState();
   const tween = findParsedTween(iframe, selection.element, anim);
-  const parkAt = activeKeyframePct == null ? null : exactKeyframePct(anim, tween, activeKeyframePct);
-  const plan = planValueEdit(selection, anim, values, iframe, options);
+  const parkAt = moment.keyframePct == null ? null : exactKeyframePct(anim, tween, moment.keyframePct);
+  const plan = planValueEdit(selection, anim, values, iframe, { ...options, moment });
   if (!plan.ok) return { status: "blocked", reason: "keyframes-uneditable", detail: plan.reason };
   await callbacks.commitMutation(selection, plan.mutation, {
     label: options.label,
@@ -47936,7 +48266,7 @@ function buildExtendedKeyframes(anim, currentTime, position, sourceDuration = re
   const keyframes = [...rescaled, added].sort((a, b) => a.percentage - b.percentage);
   return { position: roundTo3(newStart), duration: newDuration, keyframes };
 }
-function gsapPositionFromDragOutcome(selection, anim, studioOffset, gsapPos, iframe) {
+function gsapPositionFromDragOutcome(selection, anim, studioOffset, gsapPos, iframe, moment) {
   if (anim.arcPath?.enabled) return { status: "persisted" };
   const { newX, newY, baseGsapX, baseGsapY } = computeDraggedGsapPosition(
     selection.element,
@@ -47944,7 +48274,8 @@ function gsapPositionFromDragOutcome(selection, anim, studioOffset, gsapPos, ifr
     gsapPos
   );
   const plan = planValueEdit(selection, anim, { x: newX, y: newY }, iframe, {
-    backfill: { x: baseGsapX, y: baseGsapY }
+    backfill: { x: baseGsapX, y: baseGsapY },
+    moment
   });
   return plan.ok ? { status: "persisted" } : { status: "blocked", reason: "keyframes-uneditable", detail: plan.reason };
 }
@@ -47959,7 +48290,8 @@ async function commitGsapPositionFromDrag(selection, anim, studioOffset, gsapPos
   );
   const restoreOffset = () => restoreDragOffset(el, stamp);
   if (anim.arcPath?.enabled) {
-    const { activeKeyframePct, currentTime, setActiveKeyframePct } = usePlayerStore.getState();
+    const { keyframePct: activeKeyframePct, time: currentTime } = editMoment(stamp);
+    const { setActiveKeyframePct } = usePlayerStore.getState();
     const tweenStart = resolveTweenStart(anim);
     const tweenDuration = resolveTweenDuration(anim);
     if (activeKeyframePct === null && tweenStart !== null && !isTimeWithinTween(currentTime, tweenStart, tweenDuration)) {
@@ -47988,7 +48320,7 @@ async function commitGsapPositionFromDrag(selection, anim, studioOffset, gsapPos
       );
       return { status: "persisted" };
     }
-    const pct = activeKeyframePct ?? computeCurrentPercentage(selection, anim);
+    const pct = activeKeyframePct ?? computeCurrentPercentage(selection, anim, currentTime);
     const keyframes = anim.keyframes?.keyframes ?? [];
     const pointIndex = keyframes.findIndex((kf) => playsNear(anim, kf.percentage, pct));
     if (pointIndex >= 0) {
@@ -48031,11 +48363,18 @@ async function commitGsapPositionFromDrag(selection, anim, studioOffset, gsapPos
     );
     return { status: "persisted" };
   }
-  return commitValueAtPlayhead(selection, anim, { x: newX, y: newY }, iframe, callbacks, {
-    label: "Move layer",
-    backfill: { x: baseGsapX, y: baseGsapY },
-    beforeReload: restoreOffset
-  });
+  return commitValueAtPlayhead(
+    selection,
+    anim,
+    { x: newX, y: newY },
+    iframe,
+    { ...callbacks, stamp },
+    {
+      label: "Move layer",
+      backfill: { x: baseGsapX, y: baseGsapY },
+      beforeReload: restoreOffset
+    }
+  );
 }
 
 // src/hooks/gsapElementMatch.ts
@@ -48066,12 +48405,12 @@ function getAnimationsForElement(animations, target, element) {
 // src/hooks/gsapRuntimeBridge.ts
 var POSITION_CHANNEL_SET = new Set(POSITION_CHANNELS);
 var ROTATION_CHANNEL_SET = new Set(ROTATION_CHANNELS);
-async function resolveGroupTween(group, animations, _selection, _commitMutation, fetchFallbackAnimations) {
+async function resolveGroupTween(group, animations, _selection, _commitMutation, fetchFallbackAnimations, time) {
   const inGroup = (list) => {
     const tagged = list.filter((a) => a.propertyGroup === group);
     const props = new Set(PROPERTY_GROUPS[group]);
     const mixed = list.filter((a) => !a.propertyGroup && animationWritesAnyProperty(a, props));
-    return pickClosestToPlayhead(tagged.length > 0 ? tagged : mixed);
+    return pickClosestToPlayhead(tagged.length > 0 ? tagged : mixed, time);
   };
   const anim = inGroup(animations);
   if (anim) return { anim, animations };
@@ -48138,15 +48477,22 @@ function dragRoute(posAnim, iframe, selector, altKey) {
   if (!hasNonHold && !hasKeyframedPosTween) return "static";
   return altKey || !usePlayerStore.getState().autoKeyframeEnabled ? "whole-path" : "at-playhead";
 }
-async function planDrag(selection, offset, allAnimations, iframe, options) {
+async function planDrag(selection, offset, allAnimations, iframe, options, moment) {
   const selector = selectorFromSelection(selection);
   if (!selector) return { status: "blocked", reason: "no-selector" };
   const own = tweensForThisElement(selection, allAnimations);
   const keeper = positionWriteKeeper(own, selector);
   const animations = keeper ? own.filter((a) => a === keeper || !isPositionWriteOf(selector)(a)) : own;
-  const resolved2 = await resolveGroupTween("position", animations, selection, async () => {
-  });
-  const posAnim = resolved2?.anim ?? findGsapPositionAnimation(animations, selector);
+  const resolved2 = await resolveGroupTween(
+    "position",
+    animations,
+    selection,
+    async () => {
+    },
+    void 0,
+    moment.time
+  );
+  const posAnim = resolved2?.anim ?? findGsapPositionAnimation(animations, selector, moment.time);
   const route = dragRoute(posAnim, iframe, selector, options.altKey);
   if (route === "static") return { status: "persisted" };
   if (!posAnim) {
@@ -48157,9 +48503,12 @@ async function planDrag(selection, offset, allAnimations, iframe, options) {
     return step ? { status: "blocked", reason: "keyframes-uneditable", detail: step } : { status: "persisted" };
   }
   const gsapPos = readGsapPositionFromIframe(iframe, selector) ?? { x: 0, y: 0 };
-  return gsapPositionFromDragOutcome(selection, posAnim, offset, gsapPos, iframe);
+  return gsapPositionFromDragOutcome(selection, posAnim, offset, gsapPos, iframe, moment);
 }
 async function tryGsapDragIntercept(selection, offset, allAnimations, iframe, gestureCommit, fetchAllAnimations, options) {
+  const stamp = options?.stamp ?? readDragStamp(selection.element);
+  const moment = editMoment(stamp);
+  const time = moment.time;
   if (!options?.preflightPassed) {
     const preflight = await preflightGsapDragIntercept(
       selection,
@@ -48170,7 +48519,7 @@ async function tryGsapDragIntercept(selection, offset, allAnimations, iframe, ge
     );
     if (preflight.status !== "persisted") return preflight;
     if (options?.preflightOnly) {
-      return options.group ? planDrag(selection, offset, allAnimations, iframe, options) : preflight;
+      return options.group ? planDrag(selection, offset, allAnimations, iframe, options, moment) : preflight;
     }
   }
   const animations = tweensForThisElement(selection, allAnimations);
@@ -48202,16 +48551,17 @@ async function tryGsapDragIntercept(selection, offset, allAnimations, iframe, ge
     workingAnimations,
     selection,
     commitMutation,
-    fetchFallbackAnimations
+    fetchFallbackAnimations,
+    time
   );
   let posAnim = resolved2?.anim ?? null;
   let resolvedAnimations = resolved2?.animations ?? workingAnimations;
   if (!posAnim) {
-    posAnim = findGsapPositionAnimation(workingAnimations, selector);
+    posAnim = findGsapPositionAnimation(workingAnimations, selector, time);
     if (!posAnim && fetchFallbackAnimations) {
       const fresh = await fetchFallbackAnimations();
       resolvedAnimations = fresh;
-      posAnim = findGsapPositionAnimation(fresh, selector);
+      posAnim = findGsapPositionAnimation(fresh, selector, time);
     }
   }
   const gsapPos = readGsapPositionFromIframe(iframe, selector) ?? { x: 0, y: 0 };
@@ -48233,13 +48583,14 @@ async function tryGsapDragIntercept(selection, offset, allAnimations, iframe, ge
     const freshMatch = fresh.find((a) => a.id === posAnim.id) ?? pickClosestToPlayhead(
       fresh.filter(
         (a) => a.targetSelector === posAnim.targetSelector && a.propertyGroup === posAnim.propertyGroup && isXYPositionWrite(a) === isXYPositionWrite(posAnim)
-      )
+      ),
+      time
     );
     if (freshMatch && freshMatch.id !== posAnim.id) {
       posAnim = freshMatch;
     }
   }
-  const cbs = { commitMutation, fetchAnimations: fetchFallbackAnimations, stamp: options?.stamp };
+  const cbs = { commitMutation, fetchAnimations: fetchFallbackAnimations, stamp };
   if (route === "whole-path") {
     await commitWholePathOffset(selection, posAnim, offset, gsapPos, iframe, selector, cbs);
   } else {
@@ -48270,7 +48621,8 @@ function preflightGsapRotationIntercept(selection, animations, iframe, fetchedAn
   }
   return { status: "persisted" };
 }
-async function tryGsapRotationIntercept(selection, angle, animations, iframe, commitMutation, fetchFallbackAnimations) {
+async function tryGsapRotationIntercept(selection, angle, animations, iframe, commitMutation, fetchFallbackAnimations, stamp) {
+  const time = editMoment(stamp).time;
   const fetchedAnimations = fetchFallbackAnimations ? await fetchFallbackAnimations() : [];
   const outcome = preflightGsapRotationIntercept(selection, animations, iframe, fetchedAnimations);
   if (outcome.status === "blocked") return outcome;
@@ -48282,13 +48634,15 @@ async function tryGsapRotationIntercept(selection, angle, animations, iframe, co
     workingAnimations,
     selection,
     commitMutation,
-    postSplitFetch
+    postSplitFetch,
+    time
   );
   const resolvedAnimations = resolved2?.animations ?? workingAnimations;
   let anim = resolved2?.anim && animationWritesAnyProperty(resolved2.anim, ROTATION_CHANNEL_SET) ? resolved2.anim : null;
   if (!anim) {
     anim = pickClosestToPlayhead(
-      workingAnimations.filter((a) => animationWritesAnyProperty(a, ROTATION_CHANNEL_SET))
+      workingAnimations.filter((a) => animationWritesAnyProperty(a, ROTATION_CHANNEL_SET)),
+      time
     );
   }
   const newRotation = roundTo3(angle);
@@ -48300,7 +48654,7 @@ async function tryGsapRotationIntercept(selection, angle, animations, iframe, co
     });
     return { status: "persisted" };
   }
-  const pct = computeCurrentPercentage(selection, anim);
+  const pct = computeCurrentPercentage(selection, anim, time);
   if (!usePlayerStore.getState().autoKeyframeEnabled) {
     await commitWholePropertyOffset(
       selection,
@@ -48318,7 +48672,7 @@ async function tryGsapRotationIntercept(selection, angle, animations, iframe, co
     anim,
     { rotation: newRotation },
     iframe,
-    { commitMutation, fetchAnimations: fetchFallbackAnimations },
+    { commitMutation, fetchAnimations: fetchFallbackAnimations, stamp },
     { label: "Rotate", backfill: { rotation: newRotation }, holdFromStart: true }
   );
 }
@@ -75224,10 +75578,7 @@ function usePreviewPersistence({
         reloadPreview,
         nestedFiles
       );
-      if (strategy === "full") {
-        usePlayerStore.getState().setSelectedElementId(null);
-        return;
-      }
+      if (strategy === "full") return;
       syncStoredAutomationFromPreview(previewIframeRef.current?.contentDocument ?? null);
     },
     [previewIframeRef, activeCompPathRef, reloadPreview, heldPreviewDoc]
@@ -76663,14 +77014,11 @@ function useTimelineDeleteOps({
               }
               const removeData = await removeResponse.json();
               const removedContent = typeof removeData.content === "string" ? removeData.content : originalContent;
-              const deleteContentEnd = furthestClipEndFromSource(removedContent);
-              const patchedContent = unlinkInSource(
-                setCompositionDurationToContent(removedContent, deleteContentEnd),
-                alsoUnlink
-              );
+              const synced = syncCompositionDurationWithEnd(removedContent);
+              const patchedContent = unlinkInSource(synced.source, alsoUnlink);
               rollbackDuration = captureDurationRollback(previewIframeRef.current);
-              if (deleteContentEnd > 0 && targetPath === (activeCompPath || "index.html")) {
-                usePlayerStore.getState().setDuration(deleteContentEnd);
+              if (synced.contentEnd > 0 && targetPath === (activeCompPath || "index.html")) {
+                usePlayerStore.getState().setDuration(synced.contentEnd);
               }
               return { disk: removedContent, after: patchedContent };
             }
@@ -82430,7 +82778,7 @@ function useGsapScriptCommits({ projectIdRef, activeCompPath, previewIframeRef,
       nestedFiles
     });
   }, [projectIdRef, previewIframeRef, reloadPreview, onCacheInvalidate, onFileContentChanged, forceReloadSdkSession, recordMutationEdit]);
-  const runCommit = useCallback140(async (pid, compositionPath, targetPath, selection, mutation, options) => {
+  const runCommit = useCallback140((pid, compositionPath, targetPath, selection, mutation, options) => whileScriptWrites(async () => {
     const result = await runMutationRequest(
       [mutation],
       options,
@@ -82441,8 +82789,8 @@ function useGsapScriptCommits({ projectIdRef, activeCompPath, previewIframeRef,
     trackKeyframeCommit([mutation], result, options);
     options.onResult?.(result);
     await finalizeSuccessfulMutation(pid, compositionPath, selection, mutation, targetPath, result, options);
-  }, [showToast, finalizeSuccessfulMutation]);
-  const runBatchCommit = useCallback140(async (pid, compositionPath, targetPath, calls, options) => {
+  }), [showToast, finalizeSuccessfulMutation]);
+  const runBatchCommit = useCallback140((pid, compositionPath, targetPath, calls, options) => whileScriptWrites(async () => {
     const first = calls[0];
     const last = calls.at(-1);
     if (!first || !last) return;
@@ -82462,7 +82810,7 @@ function useGsapScriptCommits({ projectIdRef, activeCompPath, previewIframeRef,
     const { instantPatch: _instantPatch, ...batchOptions } = options;
     const allPatched = instantPatches.length === calls.length;
     await finalizeSuccessfulMutation(pid, compositionPath, last.selection, last.mutation, targetPath, result, allPatched ? { ...batchOptions, instantPatches } : batchOptions);
-  }, [showToast, finalizeSuccessfulMutation]);
+  }), [showToast, finalizeSuccessfulMutation]);
   const commitMutation = useMemo73(() => {
     const serializeFile = (file, task) => {
       if (writeProjectFile) {
@@ -83202,119 +83550,128 @@ function useGsapAwareGroupMove({
       const writes = observeGsapGesture(gsapCommitMutation);
       const writer = writes.commit;
       if (!writer) return { ok: true, changed: false };
-      const toastRefusal = options.refusalToast !== false;
-      const coalesceKey = `group-drag:${++groupDragCommitCounter}`;
-      let renderOnCommit = false;
-      const previewFallbackLatch = { pending: false };
-      const withGroupOptions = (options2) => ({
-        ...options2,
-        coalesceKey,
-        coalesceMs: Number.POSITIVE_INFINITY,
-        deferPreviewSync: !renderOnCommit,
-        previewFallbackLatch
-      });
-      const queued = [];
-      const flushQueued = async () => {
-        if (queued.length === 0) return;
-        const calls = queued.splice(0, queued.length);
-        if (!writer.batch) {
-          for (const call of calls) {
-            await writer(call.selection, call.mutation, call.options);
-          }
-          return;
-        }
-        await writer.batch(calls, {
-          ...calls.at(-1)?.options ?? { label: "Move animated layer (group)" },
-          label: "Move animated layer (group)"
+      const scripted = updates.some(
+        ({ selection, plainTranslate }) => !(plainTranslate ?? editsPlainCss(selection.element, "move"))
+      );
+      const commitGroup = async () => {
+        const stamps = new Map(
+          updates.map((u) => [u.selection, freezeDragStamp(u.selection.element)])
+        );
+        const toastRefusal = options.refusalToast !== false;
+        const coalesceKey = `group-drag:${++groupDragCommitCounter}`;
+        let renderOnCommit = false;
+        const previewFallbackLatch = { pending: false };
+        const withGroupOptions = (options2) => ({
+          ...options2,
+          coalesceKey,
+          coalesceMs: Number.POSITIVE_INFINITY,
+          deferPreviewSync: !renderOnCommit,
+          previewFallbackLatch
         });
-      };
-      const coalescedCommit = (selection, mutation, options2) => {
-        queued.push({ selection, mutation, options: withGroupOptions(options2) });
-        return Promise.resolve();
-      };
-      const preflightAnimations = /* @__PURE__ */ new Map();
-      const offsetMembers = /* @__PURE__ */ new Map();
-      const preflightResults = await Promise.allSettled(
-        updates.map(async ({ selection, next, plainTranslate }) => {
-          if (plainTranslate ?? editsPlainCss(selection.element, "move")) {
-            refuseGsapTakeover(selection.element, toastRefusal ? showToast : () => {
-            });
-            return void offsetMembers.set(selection, true);
+        const queued = [];
+        const flushQueued = async () => {
+          if (queued.length === 0) return;
+          const calls = queued.splice(0, queued.length);
+          if (!writer.batch) {
+            for (const call of calls) {
+              await writer(call.selection, call.mutation, call.options);
+            }
+            return;
           }
-          const animations = await makeFetchFallback(selection, { failOnFetchError: true })();
-          preflightAnimations.set(selection, animations);
-          const outcome = await tryGsapDragIntercept(
-            selection,
-            next,
-            animations,
-            previewIframeRef.current,
-            coalescedCommit,
-            void 0,
-            { preflightOnly: true, group: true }
-          );
-          if (outcome.status === "element-offset") offsetMembers.set(selection, false);
-          assertGsapEditPersisted(outcome);
-        })
-      );
-      const preflightFailure = firstPreflightFailure(
-        preflightResults,
-        updates,
-        offsetMembers,
-        activeCompPath
-      );
-      if (preflightFailure) {
-        trackGsapInteractionFailure(
-          preflightFailure.error,
-          preflightFailure.selection,
-          "drag",
-          "Move animated layer (group)",
-          toastRefusal
+          await writer.batch(calls, {
+            ...calls.at(-1)?.options ?? { label: "Move animated layer (group)" },
+            label: "Move animated layer (group)"
+          });
+        };
+        const coalescedCommit = (selection, mutation, options2) => {
+          queued.push({ selection, mutation, options: withGroupOptions(options2) });
+          return Promise.resolve();
+        };
+        const preflightAnimations = /* @__PURE__ */ new Map();
+        const offsetMembers = /* @__PURE__ */ new Map();
+        const preflightResults = await Promise.allSettled(
+          updates.map(async ({ selection, next, plainTranslate }) => {
+            if (plainTranslate ?? editsPlainCss(selection.element, "move")) {
+              refuseGsapTakeover(selection.element, toastRefusal ? showToast : () => {
+              });
+              return void offsetMembers.set(selection, true);
+            }
+            const animations = await makeFetchFallback(selection, { failOnFetchError: true })();
+            preflightAnimations.set(selection, animations);
+            const outcome = await tryGsapDragIntercept(
+              selection,
+              next,
+              animations,
+              previewIframeRef.current,
+              coalescedCommit,
+              void 0,
+              { preflightOnly: true, group: true }
+            );
+            if (outcome.status === "element-offset") offsetMembers.set(selection, false);
+            assertGsapEditPersisted(outcome);
+          })
         );
-        throw preflightFailure.error;
-      }
-      const lastScriptWrite = updates.findLastIndex(
-        ({ selection }) => !offsetMembers.has(selection)
-      );
-      for (const [index, { selection, next }] of updates.entries()) {
-        renderOnCommit = index === lastScriptWrite;
-        const plain = offsetMembers.get(selection);
-        if (plain !== void 0) {
-          const staged = writes.drawKeepingUndone(
-            () => stageElementPositionOffset(selection, next, plain, coalesceKey)
+        const preflightFailure = firstPreflightFailure(
+          preflightResults,
+          updates,
+          offsetMembers,
+          activeCompPath
+        );
+        if (preflightFailure) {
+          trackGsapInteractionFailure(
+            preflightFailure.error,
+            preflightFailure.selection,
+            "drag",
+            "Move animated layer (group)",
+            toastRefusal
           );
-          const result = await staged.save();
-          writes.recordDomResult(result);
-          continue;
+          throw preflightFailure.error;
+        }
+        const lastScriptWrite = updates.findLastIndex(
+          ({ selection }) => !offsetMembers.has(selection)
+        );
+        for (const [index, { selection, next }] of updates.entries()) {
+          renderOnCommit = index === lastScriptWrite;
+          const plain = offsetMembers.get(selection);
+          if (plain !== void 0) {
+            const staged = writes.drawKeepingUndone(
+              () => stageElementPositionOffset(selection, next, plain, coalesceKey)
+            );
+            const result = await staged.save();
+            writes.recordDomResult(result);
+            continue;
+          }
+          try {
+            const outcome = await tryGsapDragIntercept(
+              selection,
+              next,
+              preflightAnimations.get(selection) ?? [],
+              previewIframeRef.current,
+              coalescedCommit,
+              // The intercept re-reads the file to resolve a stale or shared tween.
+              // Anything already queued has to be on disk before that read, or it
+              // resolves against a file missing writes it is about to build on.
+              async () => {
+                await flushQueued();
+                return makeFetchFallback(selection, { fresh: true })();
+              },
+              { preflightPassed: true, stamp: stamps.get(selection) }
+            );
+            assertGsapEditPersisted(outcome);
+          } catch (error) {
+            trackGsapInteractionFailure(error, selection, "drag", "Move animated layer (group)");
+            throw error;
+          }
         }
         try {
-          const outcome = await tryGsapDragIntercept(
-            selection,
-            next,
-            preflightAnimations.get(selection) ?? [],
-            previewIframeRef.current,
-            coalescedCommit,
-            // The intercept re-reads the file to resolve a stale or shared tween.
-            // Anything already queued has to be on disk before that read, or it
-            // resolves against a file missing writes it is about to build on.
-            async () => {
-              await flushQueued();
-              return makeFetchFallback(selection, { fresh: true })();
-            },
-            { preflightPassed: true }
-          );
-          assertGsapEditPersisted(outcome);
+          await flushQueued();
+          return writes.finish();
         } catch (error) {
-          trackGsapInteractionFailure(error, selection, "drag", "Move animated layer (group)");
+          trackGsapInteractionFailure(error, null, "drag", "Move animated layer (group)");
           throw error;
         }
-      }
-      try {
-        await flushQueued();
-        return writes.finish();
-      } catch (error) {
-        trackGsapInteractionFailure(error, null, "drag", "Move animated layer (group)");
-        throw error;
-      }
+      };
+      return scripted ? whileScriptWrites(commitGroup) : commitGroup();
     },
     [
       gsapCommitMutation,
@@ -83743,8 +84100,8 @@ function handOverDraftSize(selection, written, size, draw) {
   });
   return written;
 }
-function firstSizeKey(selection, size, resizeGroup, animations) {
-  const { autoKeyframeEnabled, currentTime } = usePlayerStore.getState();
+function firstSizeKey(selection, size, resizeGroup, animations, currentTime) {
+  const { autoKeyframeEnabled } = usePlayerStore.getState();
   const keyframed = animations.some(
     (a) => a.keyframes && animationWritesAnyProperty(a, MOVED_OR_SIZED)
   );
@@ -83759,6 +84116,7 @@ function tweenUsesScaleLonghands(anim) {
   return inKeyframes || Object.keys(anim?.properties ?? {}).some(isLonghand);
 }
 async function tryGsapResizeIntercept(selection, size, animations, iframe, commitMutation, fetchFallbackAnimations, dragOffset, draw = (run) => run(), stamp) {
+  const moment = editMoment(stamp);
   const fetchedAnimations = fetchFallbackAnimations ? await fetchFallbackAnimations() : [];
   const outcome = preflightGsapResizeIntercept(selection, animations, iframe, fetchedAnimations);
   if (outcome.status === "blocked") return outcome;
@@ -83772,7 +84130,8 @@ async function tryGsapResizeIntercept(selection, size, animations, iframe, commi
     workingAnimations,
     selection,
     commitMutation,
-    postSplitFetch
+    postSplitFetch,
+    moment.time
   );
   const anim = resolved2?.anim && animationWritesAnyProperty(resolved2.anim, resizeProperties) ? resolved2.anim : null;
   logResize("intercept-enter", {
@@ -83788,7 +84147,7 @@ async function tryGsapResizeIntercept(selection, size, animations, iframe, commi
       (a) => animationWritesAnyProperty(a, SIZE_PROPS)
     );
     if (!scriptWritesSize) {
-      const firstKey = firstSizeKey(selection, sized, resizeGroup, workingAnimations);
+      const firstKey = firstSizeKey(selection, sized, resizeGroup, workingAnimations, moment.time);
       if (!firstKey) return { status: "element-size" };
       await commitMutation(selection, firstKey, { label: "Resize", softReload: true });
       return handOverDraftSize(selection, { status: "persisted" }, sized, draw);
@@ -83800,7 +84159,8 @@ async function tryGsapResizeIntercept(selection, size, animations, iframe, commi
       const animatedTween = pickClosestToPlayhead(
         workingAnimations.filter(
           (a) => !isInstantHold(a) && resolveTweenDuration(a) > 0 && animationWritesAnyProperty(a, resizeProperties)
-        )
+        ),
+        moment.time
       );
       if (animatedTween) {
         logResize("intercept-route", { route: "keyframed-size", tweenId: animatedTween.id });
@@ -83830,8 +84190,9 @@ async function tryGsapResizeIntercept(selection, size, animations, iframe, commi
   if (tweenDuration <= 0) {
     return { status: "blocked", reason: "source-uneditable", detail: "zero-duration-tween" };
   }
-  const { activeKeyframePct, setActiveKeyframePct } = usePlayerStore.getState();
-  const pct = activeKeyframePct ?? computeCurrentPercentage(selection, anim);
+  const { setActiveKeyframePct } = usePlayerStore.getState();
+  const activeKeyframePct = moment.keyframePct;
+  const pct = activeKeyframePct ?? computeCurrentPercentage(selection, anim, moment.time);
   const selector = selectorFromSelection(selection);
   let resizeProps;
   let resizeBackfill;
@@ -83930,7 +84291,8 @@ async function tryGsapResizeIntercept(selection, size, animations, iframe, commi
     const positionTween = pickClosestToPlayhead(
       currentAnimations.filter(
         (a) => a.propertyGroup === "position" && !isInstantHold(a) && resolveTweenDuration(a) > 0
-      )
+      ),
+      moment.time
     );
     if (positionTween) {
       logResize("scale-finalize", { route: "position-keyframe", tweenId: positionTween.id });
@@ -84371,7 +84733,10 @@ function useGsapAwareEditing({
         const result = await stageElementPositionOffset(selection, next, true).save();
         return writes.finish(result?.changed === true);
       }
-      if (writes.commit) {
+      const writer = writes.commit;
+      if (!writer) return;
+      return whileScriptWrites(async () => {
+        const stamp = freezeDragStamp(selection.element);
         try {
           const ownedAnimations = getGsapAnimationsForSelection(selection);
           const targetAnimations = Array.isArray(ownedAnimations) ? ownedAnimations : await ownedAnimations;
@@ -84380,9 +84745,9 @@ function useGsapAwareEditing({
             next,
             targetAnimations,
             previewIframeRef.current,
-            writes.commit,
+            writer,
             makeFetchFallback(selection),
-            modifiers
+            { ...modifiers, stamp }
           );
           await saveMove(outcome, async () => {
             const staged = writes.drawKeepingUndone(
@@ -84395,7 +84760,7 @@ function useGsapAwareEditing({
           trackGsapInteractionFailure(error, selection, "drag", "Move animated layer");
           throw error;
         }
-      }
+      });
     },
     [
       gsapCommitMutation,
@@ -84417,134 +84782,136 @@ function useGsapAwareEditing({
   });
   const handleGsapAwareBoxSizeCommit = useCallback147(
     async (selection, next, offset, restore2 = () => void 0, route) => {
-      const stamp = freezeDragStamp(selection.element);
       const writes = observeGsapGesture(gsapCommitMutation);
       if (route?.plainTranslate ?? editsPlainCss(selection.element, "resize")) {
         const result = await handleDomBoxSizeCommit(selection, next, offset, restore2);
         return writes.finish(result?.changed === true);
       }
-      let targetAnimations;
-      try {
-        const ownedAnimations = getGsapAnimationsForSelection(selection);
-        targetAnimations = Array.isArray(ownedAnimations) ? ownedAnimations : await ownedAnimations;
-      } catch (error) {
-        restore2();
-        trackGsapInteractionFailure(error, selection, "resize", "Resize animated layer");
-        throw error;
-      }
-      const scaleRoute = targetAnimations.some((anim) => anim.propertyGroup === "scale");
-      const selector = selectorFromSelection(selection);
-      const hasLivePositionTween = selector ? hasNonHoldTweenForElement(
-        previewIframeRef.current,
-        selector,
-        void 0,
-        POSITION_CHANNELS
-      ) : false;
-      logResize("commit-route", {
-        next,
-        offset: offset ?? null,
-        scaleRoute,
-        animCount: targetAnimations.length,
-        animGroups: targetAnimations.map((a) => `${a.propertyGroup}:${a.method}`)
-      });
-      let anchorMove = null;
-      const stageCrop = prepareCropResize(selection.element);
-      let cropUndoKey = null;
-      const saveResizeAnchor = async (ownsDragOffset, commitMutation2, coalesceKey) => {
-        if (offset && !ownsDragOffset) {
-          const dragOutcome = await tryGsapDragIntercept(
-            selection,
-            offset,
-            targetAnimations,
-            previewIframeRef.current,
-            commitMutation2,
-            makeFetchFallback(selection),
-            { stamp }
-          );
-          await saveMove(dragOutcome, async () => {
-            const plainAfterSettle = editsPlainCss(selection.element, "move");
-            anchorMove = writes.drawKeepingUndone(
-              () => stageElementPositionOffset(selection, offset, plainAfterSettle, coalesceKey)
-            );
-          });
+      return whileScriptWrites(async () => {
+        const stamp = freezeDragStamp(selection.element);
+        let targetAnimations;
+        try {
+          const ownedAnimations = getGsapAnimationsForSelection(selection);
+          targetAnimations = Array.isArray(ownedAnimations) ? ownedAnimations : await ownedAnimations;
+        } catch (error) {
+          restore2();
+          trackGsapInteractionFailure(error, selection, "resize", "Resize animated layer");
+          throw error;
         }
-      };
-      await runGestureTransaction({
-        element: selection.element,
-        label: "Resize layer",
-        draw: writes.drawKeepingUndone,
-        settle: () => {
-          if (!offset || scaleRoute || !selector) return;
-          writes.drawKeepingUndone(() => {
-            const gsapPos = readGsapPositionFromIframe(previewIframeRef.current, selector) ?? {
-              x: 0,
-              y: 0
-            };
-            const { newX, newY } = computeDraggedGsapPosition(
-              selection.element,
+        const scaleRoute = targetAnimations.some((anim) => anim.propertyGroup === "scale");
+        const selector = selectorFromSelection(selection);
+        const hasLivePositionTween = selector ? hasNonHoldTweenForElement(
+          previewIframeRef.current,
+          selector,
+          void 0,
+          POSITION_CHANNELS
+        ) : false;
+        logResize("commit-route", {
+          next,
+          offset: offset ?? null,
+          scaleRoute,
+          animCount: targetAnimations.length,
+          animGroups: targetAnimations.map((a) => `${a.propertyGroup}:${a.method}`)
+        });
+        let anchorMove = null;
+        const stageCrop = prepareCropResize(selection.element);
+        let cropUndoKey = null;
+        const saveResizeAnchor = async (ownsDragOffset, commitMutation2, coalesceKey) => {
+          if (offset && !ownsDragOffset) {
+            const dragOutcome = await tryGsapDragIntercept(
+              selection,
               offset,
-              gsapPos,
-              stamp
+              targetAnimations,
+              previewIframeRef.current,
+              commitMutation2,
+              makeFetchFallback(selection),
+              { stamp }
             );
-            logResize("sync-settle", { gsapPos, offset, newX, newY });
-            setElementGsapPosition(selection.element, newX, newY);
-          });
-        },
-        persist: async (commit2, coalesceKey) => {
-          if (writes.commit) {
-            const commitMutation2 = commit2(writes.commit);
-            try {
-              const outcome = await tryGsapResizeIntercept(
-                selection,
-                next,
-                targetAnimations,
-                previewIframeRef.current,
-                commitMutation2,
-                makeFetchFallback(selection),
+            await saveMove(dragOutcome, async () => {
+              const plainAfterSettle = editsPlainCss(selection.element, "move");
+              anchorMove = writes.drawKeepingUndone(
+                () => stageElementPositionOffset(selection, offset, plainAfterSettle, coalesceKey)
+              );
+            });
+          }
+        };
+        await runGestureTransaction({
+          element: selection.element,
+          label: "Resize layer",
+          draw: writes.drawKeepingUndone,
+          settle: () => {
+            if (!offset || scaleRoute || !selector) return;
+            writes.drawKeepingUndone(() => {
+              const gsapPos = readGsapPositionFromIframe(previewIframeRef.current, selector) ?? {
+                x: 0,
+                y: 0
+              };
+              const { newX, newY } = computeDraggedGsapPosition(
+                selection.element,
                 offset,
-                writes.drawKeepingUndone,
+                gsapPos,
                 stamp
               );
-              assertGsapEditPersisted(outcome);
-              if (outcome.status === "element-size") {
-                const result = await writes.drawKeepingUndone(
-                  () => handleDomBoxSizeCommit(selection, next, void 0, void 0, coalesceKey)
+              logResize("sync-settle", { gsapPos, offset, newX, newY });
+              setElementGsapPosition(selection.element, newX, newY);
+            });
+          },
+          persist: async (commit2, coalesceKey) => {
+            if (writes.commit) {
+              const commitMutation2 = commit2(writes.commit);
+              try {
+                const outcome = await tryGsapResizeIntercept(
+                  selection,
+                  next,
+                  targetAnimations,
+                  previewIframeRef.current,
+                  commitMutation2,
+                  makeFetchFallback(selection),
+                  offset,
+                  writes.drawKeepingUndone,
+                  stamp
                 );
-                writes.recordDomResult(result);
-              } else cropUndoKey = coalesceKey;
-              const ownsDragOffset = outcome.status === "persisted" && outcome.ownsDragOffset === true;
-              logResize("intercept-handled", {
-                scaleRoute,
-                ownsDragOffset,
-                willForwardOffset: !!(offset && !ownsDragOffset)
-              });
-              await saveResizeAnchor(ownsDragOffset, commitMutation2, coalesceKey);
-              logResizeSettle(selection.element, ownsDragOffset ? "gsap-scale" : "gsap-size");
-              return;
-            } catch (error) {
-              trackGsapInteractionFailure(error, selection, "resize", "Resize animated layer");
-              throw error;
+                assertGsapEditPersisted(outcome);
+                if (outcome.status === "element-size") {
+                  const result = await writes.drawKeepingUndone(
+                    () => handleDomBoxSizeCommit(selection, next, void 0, void 0, coalesceKey)
+                  );
+                  writes.recordDomResult(result);
+                } else cropUndoKey = coalesceKey;
+                const ownsDragOffset = outcome.status === "persisted" && outcome.ownsDragOffset === true;
+                logResize("intercept-handled", {
+                  scaleRoute,
+                  ownsDragOffset,
+                  willForwardOffset: !!(offset && !ownsDragOffset)
+                });
+                await saveResizeAnchor(ownsDragOffset, commitMutation2, coalesceKey);
+                logResizeSettle(selection.element, ownsDragOffset ? "gsap-scale" : "gsap-size");
+                return;
+              } catch (error) {
+                trackGsapInteractionFailure(error, selection, "resize", "Resize animated layer");
+                throw error;
+              }
             }
-          }
-          throw new Error("Resize of a GSAP-owned box has no GSAP writer");
-        },
-        afterBufferedCommitsSaved: async () => {
-          const anchorResult = await anchorMove?.save();
-          writes.recordDomResult(anchorResult);
-          if (cropUndoKey) {
-            const cropResult = await writes.drawKeepingUndone(
-              () => saveCropResize(stageCrop, selection, commitPositionPatchToHtml, cropUndoKey)
-            );
-            writes.recordDomResult(cropResult);
-          }
-        },
-        restore: () => {
-          anchorMove?.rollback();
-          restore2();
-        },
-        skipPixelAssert: hasLivePositionTween
+            throw new Error("Resize of a GSAP-owned box has no GSAP writer");
+          },
+          afterBufferedCommitsSaved: async () => {
+            const anchorResult = await anchorMove?.save();
+            writes.recordDomResult(anchorResult);
+            if (cropUndoKey) {
+              const cropResult = await writes.drawKeepingUndone(
+                () => saveCropResize(stageCrop, selection, commitPositionPatchToHtml, cropUndoKey)
+              );
+              writes.recordDomResult(cropResult);
+            }
+          },
+          restore: () => {
+            anchorMove?.rollback();
+            restore2();
+          },
+          skipPixelAssert: hasLivePositionTween
+        });
+        return writes.finish();
       });
-      return writes.finish();
     },
     [
       handleDomBoxSizeCommit,
@@ -84564,7 +84931,10 @@ function useGsapAwareEditing({
         const result = await handleDomRotationCommit(selection, next);
         return writes.finish(result?.changed === true);
       }
-      if (writes.commit) {
+      const writer = writes.commit;
+      if (!writer) return;
+      return whileScriptWrites(async () => {
+        const stamp = freezeDragStamp(selection.element);
         try {
           const targetAnimations = await getGsapAnimationsForSelection(selection);
           const outcome = await tryGsapRotationIntercept(
@@ -84572,8 +84942,9 @@ function useGsapAwareEditing({
             next.angle,
             targetAnimations,
             previewIframeRef.current,
-            writes.commit,
-            makeFetchFallback(selection)
+            writer,
+            makeFetchFallback(selection),
+            stamp
           );
           assertGsapEditPersisted(outcome);
           return writes.finish();
@@ -84581,7 +84952,7 @@ function useGsapAwareEditing({
           trackGsapInteractionFailure(error, selection, "rotation", "Rotate animated layer");
           throw error;
         }
-      }
+      });
     },
     [
       gsapCommitMutation,
@@ -86929,6 +87300,7 @@ function useEditHistoryActions({
   const apply = useCallback154(
     async (direction) => {
       const noun = direction === "undo" ? "Undo" : "Redo";
+      if (direction === "undo" && cancelNewestStudioWaitingPress()) return;
       const pendingEditShown = direction === "undo" ? paintBackNewestStudioPendingEdit() : null;
       const predicted = pendingEditShown ? null : editHistory.predict?.(direction) ?? null;
       const predictedShown = predicted ? showHistoryRestoreNow?.(predicted.files) ?? null : null;
@@ -88027,6 +88399,7 @@ function useCaptionDetection({
 
 // src/hooks/useConsoleErrorCapture.ts
 import { useCallback as useCallback157, useEffect as useEffect130, useRef as useRef160, useState as useState125 } from "react";
+import { STUDIO_PREVIEW_ERRORS } from "@hyperframes/core/studio-preview-mark";
 function useConsoleErrorCapture(previewIframe) {
   const [consoleErrors, setConsoleErrors] = useState125(null);
   const consoleErrorsRef = useRef160([]);
@@ -88035,6 +88408,7 @@ function useConsoleErrorCapture(previewIframe) {
     setConsoleErrors(null);
   }, []);
   useEffect130(() => {
+    resetErrors();
     if (!previewIframe) return;
     let patchedWin = null;
     let origConsoleError = null;
@@ -88054,48 +88428,42 @@ function useConsoleErrorCapture(previewIframe) {
     };
     const attachErrorCapture = () => {
       detachErrorCapture();
+      resetErrors();
       try {
         const win = previewIframe.contentWindow;
         if (!win) return;
         if (win.__hfErrorCapture) return;
         win.__hfErrorCapture = true;
         patchedWin = win;
-        origConsoleError = win.console.error.bind(win.console);
-        win.console.error = function(...args) {
-          origConsoleError(...args);
-          const text = args.map((a) => a instanceof Error ? a.message : String(a)).join(" ");
-          if (text.includes("favicon")) return;
+        const record = (texts) => {
+          if (texts.length === 0) return;
           consoleErrorsRef.current = [
             ...consoleErrorsRef.current,
-            { severity: "error", message: text }
+            ...texts.map((message) => ({ severity: "error", message }))
           ];
           setConsoleErrors([...consoleErrorsRef.current]);
         };
-        errorHandler = (e) => {
-          const text = e.message || String(e);
-          consoleErrorsRef.current = [
-            ...consoleErrorsRef.current,
-            { severity: "error", message: text }
-          ];
-          setConsoleErrors([...consoleErrorsRef.current]);
+        origConsoleError = win.console.error.bind(win.console);
+        win.console.error = function(...args) {
+          origConsoleError(...args);
+          const text = args.map((a) => a instanceof Error ? a.message : String(a)).join(" ");
+          if (!text.includes("favicon")) record([text]);
         };
+        errorHandler = (e) => record([e.message || String(e)]);
         win.addEventListener("error", errorHandler);
+        const raised = Reflect.get(win, STUDIO_PREVIEW_ERRORS);
+        if (Array.isArray(raised)) record(raised.map(String));
       } catch {
       }
     };
     attachErrorCapture();
-    const handleLoad = () => {
-      consoleErrorsRef.current = [];
-      setConsoleErrors(null);
-      attachErrorCapture();
-    };
-    previewIframe.addEventListener("load", handleLoad);
+    previewIframe.addEventListener("load", attachErrorCapture);
     return () => {
-      previewIframe.removeEventListener("load", handleLoad);
+      previewIframe.removeEventListener("load", attachErrorCapture);
       detachErrorCapture();
     };
-  }, [previewIframe]);
-  return { consoleErrors, setConsoleErrors, resetErrors };
+  }, [previewIframe, resetErrors]);
+  return { consoleErrors, setConsoleErrors };
 }
 
 // src/hooks/useFrameCapture.ts
@@ -93402,7 +93770,7 @@ var LayersPanel = memo50(function LayersPanel2({ host }) {
           "div",
           {
             ref: scrollContainerRef,
-            className: "relative min-h-0 flex-1 overflow-y-auto py-1",
+            className: "relative min-h-0 flex-1 select-none overflow-y-auto py-1",
             onPointerMove: handleContainerPointerMove,
             onPointerUp: handleContainerPointerUp,
             onPointerCancel: handleContainerPointerUp,
@@ -98665,7 +99033,7 @@ function StudioApp({ readOnlyPreview = false, readOnlyPreviewReason } = {}) {
   const [compIdToSrc, setCompIdToSrc] = useState160(/* @__PURE__ */ new Map());
   const previewIframe = useOwnPreviewIframe();
   const [compositionLoading, setCompositionLoading] = useState160(true);
-  const [refreshKey, setRefreshKey] = useState160(0);
+  const [refreshKey, setRefreshKeyState] = useState160(0);
   const [previewDocumentVersion, refreshPreviewDocumentVersion] = usePreviewDocumentVersion();
   const [blockPreview, setBlockPreview] = useState160(null);
   const previewIframeRef = useRef187(null);
@@ -98690,7 +99058,11 @@ function StudioApp({ readOnlyPreview = false, readOnlyPreviewReason } = {}) {
   const handleDomZIndexReorderCommitRef = useRef187(null);
   const pendingTimelineEditPathRef = useRef187(/* @__PURE__ */ new Set());
   const isGestureRecordingRef = useRef187(false);
-  const reloadPreview = useCallback194(() => setRefreshKey((k) => k + 1), []);
+  const setRefreshKey = useCallback194((next) => {
+    requestPreviewReload();
+    setRefreshKeyState(next);
+  }, []);
+  const reloadPreview = useCallback194(() => setRefreshKey((k) => k + 1), [setRefreshKey]);
   const fileManagerResult = useFileManager({
     projectId,
     showToast,
@@ -98729,7 +99101,7 @@ function StudioApp({ readOnlyPreview = false, readOnlyPreviewReason } = {}) {
     recordEdit: editHistory.recordEdit,
     previewIframeRef,
     activeCompPathRef,
-    reloadPreview: () => setRefreshKey((k) => k + 1)
+    reloadPreview
   });
   const previewPersistence = useStableHandlers(previewPersistenceResult, projectId);
   const externalFileChanges = useStudioExternalFileChanges({
@@ -98941,11 +99313,7 @@ function StudioApp({ readOnlyPreview = false, readOnlyPreviewReason } = {}) {
     waitForPendingDomEditSaves: previewPersistence.waitForPendingDomEditSaves
   });
   const frameCapture = useStableHandlers(frameCaptureResult, projectId);
-  const {
-    consoleErrors,
-    setConsoleErrors,
-    resetErrors: resetConsoleErrors
-  } = useConsoleErrorCapture(previewIframe);
+  const { consoleErrors, setConsoleErrors } = useConsoleErrorCapture(previewIframe);
   const fileDrop = useGlobalFileDrop(timelineEditing.handleTimelineFileDrop);
   const handleToggleRecordingRef = useRef187(() => {
   });
@@ -98970,10 +99338,9 @@ function StudioApp({ readOnlyPreview = false, readOnlyPreviewReason } = {}) {
       previewIframeRef.current = iframe;
       usePreviewIframeStore.getState().setIframe(iframe);
       appHotkeys.syncPreviewHotkeys(iframe);
-      resetConsoleErrors();
       refreshPreviewDocumentVersion();
     },
-    [appHotkeys, resetConsoleErrors, refreshPreviewDocumentVersion]
+    [appHotkeys, refreshPreviewDocumentVersion]
   );
   const rightPanel = useRightPanelIntent();
   const { inspectorPanelActive, shouldShowMotionPath, shouldShowSelectedDomBounds } = useInspectorState(
@@ -99795,6 +100162,7 @@ export {
   buttonBase,
   buttonSizes,
   buttonVariants,
+  cancelNewestStudioWaitingPress,
   cn,
   collectSnapContext,
   collectStudioLookScene,