@hyperframes/studio 0.8.138 → 0.8.139

package/src/hooks/editMoment.ts

@@ -0,0 +1,13 @@
+import { usePlayerStore } from "../player/store/playerStore";
+import type { EditMoment } from "../components/editor/manualEditsTypes";
+import type { DragStamp } from "./draggedGsapPosition";
+
+export function playheadMoment(): EditMoment {
+  const { currentTime, activeKeyframePct } = usePlayerStore.getState();
+  return { time: currentTime, keyframePct: activeKeyframePct };
+}
+
+/** The playhead an edit writes at: its gesture's press, else the playhead now. */
+export function editMoment(stamp?: DragStamp): EditMoment {
+  return stamp?.at ?? playheadMoment();
+}

package/src/hooks/gsapDragCommit.ts

@@ -56,8 +56,9 @@ function newTweenTarget(selection: DomEditSelection): string | null {
 export function computeCurrentPercentage(
   selection: DomEditSelection,
   animation?: GsapAnimation,
+  time = usePlayerStore.getState().currentTime,
 ): number {
-  return computeElementPercentage(usePlayerStore.getState().currentTime, selection, animation);
+  return computeElementPercentage(time, selection, animation);
 }
 
 // When a drag edits a SELECTED keyframe, park the playhead on that keyframe's exact

package/src/hooks/gsapDragPositionCommit.ts

@@ -21,6 +21,8 @@ import {
 } from "./gsapDragCommit";
 import type { GsapEditOutcome } from "./gsapEditOutcome";
 import { commitValueAtPlayhead, planValueEdit } from "./gsapValueAtPlayhead";
+import { editMoment } from "./editMoment";
+import type { EditMoment } from "../components/editor/manualEditsTypes";
 
 /**
  * The tween's keyframes with one inserted at `percentage`. Any existing keyframe
@@ -95,6 +97,7 @@ export function gsapPositionFromDragOutcome(
   studioOffset: { x: number; y: number },
   gsapPos: { x: number; y: number },
   iframe: HTMLIFrameElement | null,
+  moment?: EditMoment,
 ): GsapEditOutcome {
   if (anim.arcPath?.enabled) return { status: "persisted" };
   const { newX, newY, baseGsapX, baseGsapY } = computeDraggedGsapPosition(
@@ -104,6 +107,7 @@ export function gsapPositionFromDragOutcome(
   );
   const plan = planValueEdit(selection, anim, { x: newX, y: newY }, iframe, {
     backfill: { x: baseGsapX, y: baseGsapY },
+    moment,
   });
   return plan.ok
     ? { status: "persisted" }
@@ -132,7 +136,8 @@ export async function commitGsapPositionFromDrag(
   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 (
@@ -165,7 +170,7 @@ export async function commitGsapPositionFromDrag(
       );
       return { status: "persisted" };
     }
-    const pct = activeKeyframePct ?? computeCurrentPercentage(selection, anim);
+    const pct = activeKeyframePct ?? computeCurrentPercentage(selection, anim, currentTime);
     const keyframes = anim.keyframes?.keyframes ?? [];
     // A drag counts as on a waypoint when it plays within KEYFRAME_PCT_MATCH of it,
     // so landing a fraction of a percent off an authored waypoint updates that point
@@ -212,9 +217,16 @@ export async function commitGsapPositionFromDrag(
     );
     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,
+    },
+  );
 }

package/src/hooks/gsapPositionDetection.ts

@@ -44,9 +44,9 @@ function animHasPosition(anim: GsapAnimation): boolean {
 export function findGsapPositionAnimation(
   animations: GsapAnimation[],
   selector?: string,
+  currentTime = usePlayerStore.getState().currentTime,
 ): GsapAnimation | null {
   if (animations.length === 0) return null;
-  const currentTime = usePlayerStore.getState().currentTime;
 
   const scored = animations.filter(animHasPosition).map((a) => {
     let score = 0;
@@ -87,9 +87,11 @@ function statesValueAt(anim: GsapAnimation, time: number): boolean {
  * playhead (the later one, which renders, if both do), then most keyframes.
  */
 // fallow-ignore-next-line complexity
-export function pickClosestToPlayhead(anims: GsapAnimation[]): GsapAnimation | null {
+export function pickClosestToPlayhead(
+  anims: GsapAnimation[],
+  ct = usePlayerStore.getState().currentTime,
+): GsapAnimation | null {
   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);

package/src/hooks/gsapResizeIntercept.ts

@@ -33,6 +33,7 @@ import {
   type DragStamp,
 } from "./draggedGsapPosition";
 import { pickClosestToPlayhead, readGsapPositionFromIframe } from "./gsapPositionDetection";
+import { editMoment } from "./editMoment";
 import { commitWholePropertyOffset } from "./gsapWholePropertyOffsetCommit";
 import { commitGsapPositionFromDrag } from "./gsapDragPositionCommit";
 import { resolveTweenDuration } from "../utils/globalTimeCompiler";
@@ -141,8 +142,9 @@ function firstSizeKey(
   size: { width: number; height: number },
   resizeGroup: PropertyGroupName,
   animations: GsapAnimation[],
+  currentTime: number,
 ): Record<string, unknown> | null {
-  const { autoKeyframeEnabled, currentTime } = usePlayerStore.getState();
+  const { autoKeyframeEnabled } = usePlayerStore.getState();
   const keyframed = animations.some(
     (a) => a.keyframes && animationWritesAnyProperty(a, MOVED_OR_SIZED),
   );
@@ -180,6 +182,7 @@ export async function tryGsapResizeIntercept(
   draw: <T>(run: () => T) => T = (run) => run(),
   stamp?: DragStamp,
 ): Promise<GsapEditOutcome> {
+  const moment = editMoment(stamp);
   const fetchedAnimations = fetchFallbackAnimations ? await fetchFallbackAnimations() : [];
   const outcome = preflightGsapResizeIntercept(selection, animations, iframe, fetchedAnimations);
   if (outcome.status === "blocked") return outcome;
@@ -199,6 +202,7 @@ export async function tryGsapResizeIntercept(
     selection,
     commitMutation,
     postSplitFetch,
+    moment.time,
   );
 
   const anim =
@@ -218,7 +222,7 @@ export async function tryGsapResizeIntercept(
       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);
@@ -249,6 +253,7 @@ export async function tryGsapResizeIntercept(
             resolveTweenDuration(a) > 0 &&
             animationWritesAnyProperty(a, resizeProperties),
         ),
+        moment.time,
       );
       if (animatedTween) {
         logResize("intercept-route", { route: "keyframed-size", tweenId: animatedTween.id });
@@ -284,8 +289,9 @@ export async function tryGsapResizeIntercept(
     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: Record<string, number>;
@@ -473,6 +479,7 @@ export async function tryGsapResizeIntercept(
       currentAnimations.filter(
         (a) => a.propertyGroup === "position" && !isInstantHold(a) && resolveTweenDuration(a) > 0,
       ),
+      moment.time,
     );
     if (positionTween) {
       logResize("scale-finalize", { route: "position-keyframe", tweenId: positionTween.id });

package/src/hooks/gsapRuntimeBridge.ts

@@ -31,7 +31,9 @@ import { tweenReach, tweensForThisElement } from "./gsapTweenReach";
 import { resolveTweenDuration } from "../utils/globalTimeCompiler";
 import { roundTo3 } from "../utils/rounding";
 import type { GsapDragCommitCallbacks } from "./gsapDragCommit";
-import type { DragStamp } from "./draggedGsapPosition";
+import { readDragStamp, type DragStamp } from "./draggedGsapPosition";
+import { editMoment } from "./editMoment";
+import type { EditMoment } from "../components/editor/manualEditsTypes";
 import { isInstantHold, selectorFromSelection, writeTargetSelector } from "./gsapShared";
 import {
   findGsapPositionAnimation,
@@ -66,12 +68,13 @@ export async function resolveGroupTween(
   _selection: DomEditSelection,
   _commitMutation: GsapDragCommitCallbacks["commitMutation"],
   fetchFallbackAnimations?: () => Promise<GsapAnimation[]>,
+  time?: number,
 ): Promise<{ anim: GsapAnimation; animations: GsapAnimation[] } | null> {
   const inGroup = (list: GsapAnimation[]) => {
     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 };
@@ -205,6 +208,7 @@ async function planDrag(
   allAnimations: GsapAnimation[],
   iframe: HTMLIFrameElement | null,
   options: { altKey?: boolean },
+  moment: EditMoment,
 ): Promise<GsapEditOutcome> {
   const selector = selectorFromSelection(selection);
   if (!selector) return { status: "blocked", reason: "no-selector" };
@@ -213,8 +217,15 @@ async function planDrag(
   const animations = keeper
     ? own.filter((a) => a === keeper || !isPositionWriteOf(selector)(a))
     : own;
-  const resolved = await resolveGroupTween("position", animations, selection, async () => {});
-  const posAnim = resolved?.anim ?? findGsapPositionAnimation(animations, selector);
+  const resolved = await resolveGroupTween(
+    "position",
+    animations,
+    selection,
+    async () => {},
+    undefined,
+    moment.time,
+  );
+  const posAnim = resolved?.anim ?? findGsapPositionAnimation(animations, selector, moment.time);
   const route = dragRoute(posAnim, iframe, selector, options.altKey);
   if (route === "static") return { status: "persisted" };
   if (!posAnim) {
@@ -227,7 +238,7 @@ async function planDrag(
       : { 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);
 }
 
 /** Commits a drag through the GSAP script. Callers reject `blocked` (the gesture layer
@@ -247,6 +258,9 @@ export async function tryGsapDragIntercept(
     stamp?: DragStamp;
   },
 ): Promise<GsapEditOutcome> {
+  const stamp = options?.stamp ?? readDragStamp(selection.element);
+  const moment = editMoment(stamp);
+  const time = moment.time;
   if (!options?.preflightPassed) {
     const preflight = await preflightGsapDragIntercept(
       selection,
@@ -258,7 +272,7 @@ export async function tryGsapDragIntercept(
     if (preflight.status !== "persisted") return preflight;
     if (options?.preflightOnly) {
       return options.group
-        ? planDrag(selection, offset, allAnimations, iframe, options)
+        ? planDrag(selection, offset, allAnimations, iframe, options, moment)
         : preflight;
     }
   }
@@ -302,16 +316,17 @@ export async function tryGsapDragIntercept(
     selection,
     commitMutation,
     fetchFallbackAnimations,
+    time,
   );
 
   let posAnim = resolved?.anim ?? null;
   let resolvedAnimations = resolved?.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);
     }
   }
 
@@ -349,13 +364,14 @@ export async function tryGsapDragIntercept(
             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 {
@@ -412,7 +428,9 @@ export async function tryGsapRotationIntercept(
   iframe: HTMLIFrameElement | null,
   commitMutation: GsapDragCommitCallbacks["commitMutation"],
   fetchFallbackAnimations?: () => Promise<GsapAnimation[]>,
+  stamp?: DragStamp,
 ): Promise<GsapEditOutcome> {
+  const time = editMoment(stamp).time;
   const fetchedAnimations = fetchFallbackAnimations ? await fetchFallbackAnimations() : [];
   const outcome = preflightGsapRotationIntercept(selection, animations, iframe, fetchedAnimations);
   if (outcome.status === "blocked") return outcome;
@@ -429,6 +447,7 @@ export async function tryGsapRotationIntercept(
     selection,
     commitMutation,
     postSplitFetch,
+    time,
   );
   const resolvedAnimations = resolved?.animations ?? workingAnimations;
 
@@ -440,6 +459,7 @@ export async function tryGsapRotationIntercept(
   if (!anim) {
     anim = pickClosestToPlayhead(
       workingAnimations.filter((a) => animationWritesAnyProperty(a, ROTATION_CHANNEL_SET)),
+      time,
     );
   }
 
@@ -462,7 +482,7 @@ export async function tryGsapRotationIntercept(
     return { status: "persisted" };
   }
 
-  const pct = computeCurrentPercentage(selection, anim);
+  const pct = computeCurrentPercentage(selection, anim, time);
 
   // With auto-keyframe off (#1808), a rotation tween already exists for this
   // element (checked above) so nudge it as a whole rather than adding a
@@ -485,7 +505,7 @@ export async function tryGsapRotationIntercept(
     anim,
     { rotation: newRotation },
     iframe,
-    { commitMutation, fetchAnimations: fetchFallbackAnimations },
+    { commitMutation, fetchAnimations: fetchFallbackAnimations, stamp },
     { label: "Rotate", backfill: { rotation: newRotation }, holdFromStart: true },
   );
 }

package/src/hooks/gsapValueAtPlayhead.test.ts

@@ -8,6 +8,7 @@ import { boxSteps, liveTween, previewWith, tween } from "./gsapParsedTween.test-
 import { tryGsapResizeIntercept } from "./gsapResizeIntercept";
 import { tryGsapDragIntercept, tryGsapRotationIntercept } from "./gsapRuntimeBridge";
 import { planValueAtPlayhead, planValueEdit, type PlayheadEdit } from "./gsapValueAtPlayhead";
+import { STUDIO_EDIT_MOMENT_ATTR } from "../components/editor/manualEditsTypes";
 
 let el: HTMLElement;
 let selection: DomEditSelection;
@@ -181,6 +182,20 @@ describe("a move on a GSAP-animated layer, at the playhead", () => {
     ]);
   });
 
+  it("keys the time the drag was pressed at, wherever the playhead is when it commits", async () => {
+    const { keys, live } = boxSteps([
+      [2, { x: 60 }],
+      [1, { x: 120 }],
+    ]);
+    el.setAttribute(STUDIO_EDIT_MOMENT_ATTR, JSON.stringify({ time: 1, keyframePct: null }));
+    const { mutations } = await drag([keys], [live(el)], { time: 2, base: [30, 0], dx: 10 });
+    expect(mutations[0].keyframes[0]).toEqual({
+      percentage: 33.333,
+      properties: { x: 40, y: 0 },
+      ease: "none",
+    });
+  });
+
   it("never writes x and y into a tween that only animates size", async () => {
     const size = tween({
       id: "#box-to-0-size",

package/src/hooks/gsapValueAtPlayhead.ts

@@ -1,6 +1,8 @@
 import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
 import type { DomEditSelection } from "../components/editor/domEditingTypes";
 import { usePlayerStore } from "../player/store/playerStore";
+import type { EditMoment } from "../components/editor/manualEditsTypes";
+import { editMoment, playheadMoment } from "./editMoment";
 import { resolveTweenDuration, resolveTweenStart } from "../utils/globalTimeCompiler";
 import { ARRAY_STEP_EASE, PERCENTAGE_SEGMENT_EASE, runEaseOf } from "../utils/gsapKeyframeEases";
 import { roundTo3 } from "../utils/rounding";
@@ -287,11 +289,15 @@ export function planValueEdit(
   anim: GsapAnimation,
   values: Record<string, number>,
   iframe: HTMLIFrameElement | null,
-  { backfill, holdFromStart }: Pick<PlayheadEdit, "backfill" | "holdFromStart"> = {},
+  {
+    backfill,
+    holdFromStart,
+    moment = playheadMoment(),
+  }: Pick<PlayheadEdit, "backfill" | "holdFromStart"> & { moment?: EditMoment } = {},
 ): PlayheadEditPlan {
   // One keyframe of a tween its siblings share would move them all.
   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({
@@ -321,11 +327,12 @@ export async function commitValueAtPlayhead(
   },
 ): Promise<GsapEditOutcome> {
   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);
+    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,

package/src/hooks/timelineEditingHelpers.test.ts

@@ -233,6 +233,28 @@ describe("extendRootDurationIfNeeded", () => {
   });
 });
 
+describe("buildTimelineMoveTimingPatch", () => {
+  it.each([
+    { root: ' data-duration="20"', length: 'data-composition-id="c" data-duration="8"' },
+    { root: "", length: 'data-composition-id="c">' },
+  ])(
+    "parses the saved file once to move a clip and sync the length (root$root)",
+    ({ root, length }) => {
+      const source = `<div data-composition-id="c"${root}><div id="a" class="clip" data-start="1" data-duration="3"></div></div>`;
+      const parse = vi.spyOn(DOMParser.prototype, "parseFromString");
+      try {
+        const patched = buildTimelineMoveTimingPatch(source, { id: "a" }, 5, 3);
+
+        expect(patched).toContain('data-start="5"');
+        expect(patched).toContain(length);
+        expect(parse).toHaveBeenCalledTimes(1);
+      } finally {
+        parse.mockRestore();
+      }
+    },
+  );
+});
+
 describe("buildTimelineResizeTimingPatch", () => {
   it("moves a source-only in-point by the caller's own start change", () => {
     const source = `<div id="root"><video id="a" class="clip" data-start="5" data-duration="3" data-media-start="0.337"></video></div>`;

package/src/hooks/timelineEditingHelpers.ts

@@ -15,7 +15,7 @@ import {
 } from "../player/components/timelineEditing";
 import { getElementZIndex } from "../player/lib/layerOrdering";
 import {
-  furthestClipEndFromSource,
+  furthestClipEndFromDocument,
   getTimelineElementIdentity,
   playbackStartAttributeForElement,
   readPlaybackStartAttributes,
@@ -29,6 +29,7 @@ import {
 import { serializeStudioFileMutations } from "../utils/studioFileMutationCoordinator";
 import type { TimelineZIndexReorderCommit } from "./useTimelineEditingTypes";
 import { setCompositionDurationToContent } from "../utils/timelineAssetDrop";
+import { rootCompositionDurationOf } from "../utils/rootDuration";
 import { readFileContent } from "./timelineTimingSync";
 import {
   findElementForSelection,
@@ -263,7 +264,22 @@ export function applyTimelineMoveAttributes(
 // Root data-duration follows the furthest clip end in the source; the store's durations are
 // truncated to the current length, so reading them would ratchet the duration down every edit.
 export function syncCompositionDurationToContent(source: string): string {
-  return setCompositionDurationToContent(source, furthestClipEndFromSource(source));
+  return syncCompositionDurationWithEnd(source).source;
+}
+
+/** The synced source and the clip end it was synced to, from one parse of the source. */
+export function syncCompositionDurationWithEnd(source: string): {
+  source: string;
+  contentEnd: number;
+} {
+  const doc = new DOMParser().parseFromString(source, "text/html");
+  const contentEnd = furthestClipEndFromDocument(doc);
+  const synced = setCompositionDurationToContent(
+    source,
+    contentEnd,
+    rootCompositionDurationOf(doc),
+  );
+  return { source: synced, contentEnd };
 }
 
 export function buildTimelineMoveTimingPatch(

package/src/hooks/useDomSelection.test.ts

@@ -22,7 +22,7 @@ interface TimelineSpies {
 
 function renderHarness(
   initialProps: HarnessProps,
-  options: { timelineElements?: TimelineElement[] } = {},
+  options: { timelineElements?: TimelineElement[]; previewDoc?: Document } = {},
 ): {
   current: () => ReturnType<typeof useDomSelection>;
   rerender: (props: HarnessProps) => void;
@@ -49,7 +49,11 @@ function renderHarness(
       isMasterView: false,
       compIdToSrc: new Map(),
       captionEditMode: false,
-      previewIframeRef: { current: null },
+      previewIframeRef: {
+        current: options.previewDoc
+          ? ({ contentDocument: options.previewDoc } as HTMLIFrameElement)
+          : null,
+      },
       timelineElements: options.timelineElements ?? [],
       getTimelineSelectionSet: () => publishedSet,
       setSelectedTimelineElementId: timeline.setSelectedTimelineElementId,
@@ -307,6 +311,21 @@ describe("useDomSelection", () => {
     harness.cleanup();
   });
 
+  it("drops the selection when the reloaded preview no longer has its element", async () => {
+    const selection = makeSelection("Headline", document.createElement("div"));
+    const harness = renderHarness(
+      { activeCompPath: "index.html", projectId: "project-1", refreshKey: 0 },
+      { previewDoc: document.implementation.createHTMLDocument("") },
+    );
+    act(() => harness.current().applyDomSelection(selection));
+
+    await act(() => harness.current().refreshDomEditSelectionFromPreview(selection));
+
+    expect(harness.current().domEditSelection).toBeNull();
+    expect(harness.timeline.setSelectedTimelineElementId).toHaveBeenLastCalledWith(null);
+    harness.cleanup();
+  });
+
   it("clears a committed selection when the active composition path changes", () => {
     const { selection, harness } = setupSelectedHarness();
     expect(harness.current().domEditSelection).toBe(selection);

package/src/hooks/useEditHistoryActions.test.tsx

@@ -9,6 +9,7 @@ import {
   beginStudioPendingEdit,
   isStudioEditSaving,
   setStudioPendingEditClaimClock,
+  setStudioWaitingPressCancel,
   trackStudioPendingEdit,
 } from "../utils/studioPendingEdits";
 
@@ -18,6 +19,7 @@ let root: Root | null = null;
 afterEach(() => {
   act(() => root?.unmount());
   setStudioPendingEditClaimClock(null);
+  setStudioWaitingPressCancel(null);
 });
 
 type RestoreFiles = Record<string, { previous: string; restored: string }>;
@@ -71,6 +73,24 @@ const PREDICTED = { id: "e1", files: { "index.html": { previous: "B", restored:
 const SERVER_FILES = { "index.html": { previous: "B", restored: "A2" } };
 
 describe("useEditHistoryActions", () => {
+  it("takes back a canvas press still waiting to run, with no history step", async () => {
+    const { deps, actions } = mount({ ok: true, label: "Undid: Move" });
+    const cancel = vi.fn(() => (setStudioWaitingPressCancel(null), true));
+    setStudioWaitingPressCancel(cancel);
+    const revert = vi.fn(() => () => {});
+    const saving = beginStudioPendingEdit(revert);
+    await act(() => actions.redo());
+    expect(cancel, "redo leaves the press").not.toHaveBeenCalled();
+    await act(() => actions.undo());
+    expect(cancel).toHaveBeenCalledTimes(1);
+    expect(revert, "the press is newer than any edit still saving").not.toHaveBeenCalled();
+    expect(deps.editHistory.undo).not.toHaveBeenCalled();
+
+    await act(() => actions.undo());
+    expect(revert, "the following Cmd+Z takes back the edit still saving").toHaveBeenCalledTimes(1);
+    saving.settle();
+  });
+
   it("asks for the edit claimed after the key's claim count only when an edit was saving at the key", async () => {
     const { deps, actions } = mount({ ok: false, reason: "empty" });
     await act(() => actions.undo());

package/src/hooks/useEditHistoryActions.ts

@@ -5,6 +5,7 @@ import { serializeStudioFileMutations } from "../utils/studioFileMutationCoordin
 import type { RestoreFiles } from "../utils/gsapUndoRestore";
 import {
   beginStudioShownRestore,
+  cancelNewestStudioWaitingPress,
   hasStudioPendingEdits,
   paintBackNewestStudioPendingEdit,
 } from "../utils/studioPendingEdits";
@@ -79,6 +80,7 @@ export function useEditHistoryActions({
   const apply = useCallback(
     async (direction: "undo" | "redo") => {
       const noun = direction === "undo" ? "Undo" : "Redo";
+      if (direction === "undo" && cancelNewestStudioWaitingPress()) return;
       // An edit still saving is newer than any step this tab predicts, so it paints back first.
       const pendingEditShown = direction === "undo" ? paintBackNewestStudioPendingEdit() : null;
       const predicted = pendingEditShown ? null : (editHistory.predict?.(direction) ?? null);

package/src/hooks/useGsapAwareEditing.test.tsx

@@ -42,6 +42,7 @@ vi.mock("./useSafeGsapCommitMutation", () => ({
 }));
 
 import { useGsapAwareEditing } from "./useGsapAwareEditing";
+import { isPreviewChanging } from "../player/previewReloading";
 import { tryGsapRotationIntercept } from "./gsapRuntimeBridge";
 
 afterEach(() => {
@@ -235,6 +236,43 @@ describe("useGsapAwareEditing keeps the route a gesture chose at press", () => {
   });
 });
 
+describe("useGsapAwareEditing holds a canvas press while a drop saves", () => {
+  it.each([
+    ["a move through the script", false, "move"],
+    ["a group move through the script", false, "group"],
+    ["a move saved as CSS", true, "move"],
+  ])("%s", async (_, plainTranslate, kind) => {
+    let land: () => void = () => {};
+    const landed = new Promise<void>((resolve) => (land = resolve));
+    mocks.drag.mockImplementation(async () => {
+      await landed;
+      return { status: "persisted" };
+    });
+    const save = vi.fn().mockReturnValue(landed);
+    const stageElementPositionOffset = vi.fn(() => ({ save, rollback: vi.fn() }));
+    const { pathOffsetCommit, groupCommit, root } = mountGroupHandler({
+      stageElementPositionOffset,
+    });
+    const box = { element: document.createElement("div"), id: "box", selector: "#box" };
+    const selection = box as unknown as DomEditSelection;
+    const to = { x: 40, y: 20 };
+    let saved!: Promise<unknown>;
+    act(() => {
+      saved =
+        kind === "group"
+          ? groupCommit([{ selection, next: to, plainTranslate }])
+          : pathOffsetCommit(selection, to, { plainTranslate });
+    });
+    expect(isPreviewChanging(), "from the drop").toBe(!plainTranslate);
+    await act(async () => {
+      land();
+      await saved;
+    });
+    expect(isPreviewChanging()).toBe(false);
+    act(() => root.unmount());
+  });
+});
+
 describe("useGsapAwareEditing keeps the box route a resize chose at press", () => {
   it.each([
     ["the CSS route, on an element GSAP has since taken over", true],