@hyperframes/studio 0.8.138 → 0.8.140

package/src/components/nle/NLEPreview.tsx

@@ -50,6 +50,7 @@ interface NLEPreviewProps extends Pick<
   onCompositionSizeChange?: (size: PreviewCompositionSize | null) => void;
   /** Draws the picture edge to edge in this box, without Studio's inset band. */
   fillBox?: boolean;
+  compositionSizeHint?: PreviewCompositionSize;
 }
 
 export function getPreviewPlayerKey({
@@ -127,6 +128,7 @@ export const NLEPreview = memo(function NLEPreview({
   onStageRef,
   onCompositionSizeChange,
   fillBox,
+  compositionSizeHint,
 }: NLEPreviewProps) {
   const activeKey = getPreviewPlayerKey({ projectId, directUrl });
   const viewportRef = useRef<HTMLDivElement>(null);
@@ -151,6 +153,8 @@ export const NLEPreview = memo(function NLEPreview({
   const gutterPx = usePreviewGuidesStore((s) => (s.rulerVisible ? RULER_GUTTER_PX : 0));
   const insetPx = fillBox ? 0 : PREVIEW_STAGE_INSET_PX;
   const [stageSize, setStageSize] = useState(() => resolvePreviewStageSize(0, 0, null, portrait));
+  const hintWidth = compositionSizeHint?.width;
+  const hintHeight = compositionSizeHint?.height;
 
   const zoomRef = useRef<PreviewZoomState>(DEFAULT_PREVIEW_ZOOM);
   const [settledZoom, setSettledZoom] = useState<PreviewZoomState>(DEFAULT_PREVIEW_ZOOM);
@@ -183,7 +187,8 @@ export const NLEPreview = memo(function NLEPreview({
         resolvePreviewStageSize(
           rect.width,
           rect.height,
-          compositionSize,
+          compositionSize ??
+            (hintWidth && hintHeight ? { width: hintWidth, height: hintHeight } : null),
           portrait,
           gutterPx,
           insetPx,
@@ -195,7 +200,7 @@ export const NLEPreview = memo(function NLEPreview({
     const observer = new ResizeObserver(updateStageSize);
     observer.observe(viewport);
     return () => observer.disconnect();
-  }, [compositionSize, portrait, gutterPx, insetPx]);
+  }, [compositionSize, hintWidth, hintHeight, portrait, gutterPx, insetPx]);
 
   const onCompositionSizeChangeRef = useRef(onCompositionSizeChange);
   onCompositionSizeChangeRef.current = onCompositionSizeChange;

package/src/hooks/draggedGsapPosition.ts

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

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/externalFileChangeOwnership.test.ts

@@ -21,9 +21,30 @@ describe("external file-change subscription ownership", () => {
       new URL("./useExternalFileChangeCoordinator.ts", import.meta.url),
       "utf8",
     );
-    // vitest defines `import.meta.hot`, so the selection is the one claim left to
-    // the source; the channel's own behaviour is exercised below.
-    expect(coordinator.match(/sseFileChangeChannel\(handler\)/g)).toHaveLength(1);
+    expect(coordinator.match(/sseFileChangeChannel\(handler, catchUp\)/g)).toHaveLength(1);
+  });
+
+  it("asks to catch up on every reconnect, since changes made while disconnected are never resent", () => {
+    const listeners = new Map<string, (event: unknown) => void>();
+    class FakeEventSource {
+      addEventListener(type: string, listener: (event: unknown) => void) {
+        listeners.set(type, listener);
+      }
+      close = vi.fn();
+    }
+    vi.stubGlobal("EventSource", FakeEventSource);
+    try {
+      const onReconnect = vi.fn();
+      sseFileChangeChannel(vi.fn(), onReconnect);
+      listeners.get("open")?.(new Event("open"));
+      expect(onReconnect).not.toHaveBeenCalled();
+      listeners.get("error")?.(new Event("error"));
+      listeners.get("open")?.(new Event("open"));
+      listeners.get("open")?.(new Event("open"));
+      expect(onReconnect).toHaveBeenCalledTimes(2);
+    } finally {
+      vi.unstubAllGlobals();
+    }
   });
 
   it("delivers the raw file-change event from EventSource to the handler and closes on cleanup", () => {
@@ -42,7 +63,7 @@ describe("external file-change subscription ownership", () => {
     vi.stubGlobal("EventSource", FakeEventSource);
     try {
       const onDelivery = vi.fn();
-      const stop = sseFileChangeChannel(onDelivery);
+      const stop = sseFileChangeChannel(onDelivery, vi.fn());
       const event = new MessageEvent("file-change", { data: JSON.stringify({ path: "a.html" }) });
       listeners.get("file-change")?.(event);
       expect(opened).toEqual(["/api/events"]);

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.browser.test.ts

@@ -1,18 +1,14 @@
 // @vitest-environment happy-dom
 // Real Chrome with the built runtime: its seek, not a plain GSAP seek, decides what a saved edit shows.
-import { readFileSync } from "node:fs";
-import { createRequire } from "node:module";
 import { gsap } from "gsap";
 import { parseGsapScriptAcorn } from "@hyperframes/parsers/gsap-parser-acorn";
 import { replaceTweenWithKeyframesInScript } from "@hyperframes/parsers/gsap-writer-acorn";
-import puppeteer from "puppeteer-core";
 import { expect, it, vi } from "vitest";
-import { findSystemChrome } from "../../vite.browser";
+import { launchTestChrome, showWithRuntime } from "../../tests/chromeTestUtils";
 import type { DomEditSelection } from "../components/editor/domEditingTypes";
 import { usePlayerStore } from "../player/store/playerStore";
 import { planValueEdit } from "./gsapValueAtPlayhead";
 
-const require = createRequire(import.meta.url);
 vi.setConfig({ testTimeout: 60_000 });
 
 const SRC = `var tl = gsap.timeline({ paused: true });
@@ -49,25 +45,10 @@ const page = (script: string) => `<!doctype html><html><body>
 
 it("a drag on a fromTo's start shows the dropped x there once the runtime seeks", async () => {
   const written = writeDrag(90, 2);
-  const executablePath = findSystemChrome();
-  if (!executablePath) throw new Error("no Chrome found: set HYPERFRAMES_BROWSER_PATH");
-  const browser = await puppeteer.launch({
-    executablePath,
-    headless: true,
-    args: ["--no-sandbox"],
-  });
+  const browser = await launchTestChrome();
   try {
     const tab = await browser.newPage();
-    await tab.setRequestInterception(true);
-    // Only the GSAP script is served; anything else is refused, never fetched.
-    tab.on("request", (request) =>
-      request.url().endsWith("/gsap.min.js")
-        ? request.respond({ body: readFileSync(require.resolve("gsap/dist/gsap.min.js"), "utf8") })
-        : request.abort("blockedbyclient"),
-    );
-    await tab.setContent(page(written), { waitUntil: "load" });
-    await tab.evaluate(readFileSync(require.resolve("@hyperframes/core/runtime"), "utf8"));
-    await tab.waitForFunction(() => "__player" in window);
+    await showWithRuntime(tab, page(written));
     const shown = await tab.evaluate(() => {
       const w = window as unknown as {
         __player: { seek(t: number): void };

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(