@hyperframes/studio 0.8.132 → 0.8.134

package/src/hooks/gsapTrailingKeyframes.realGsap.test.ts

@@ -0,0 +1,44 @@
+import { trimTrailingKeyframeSpans } from "@hyperframes/parsers/gsap-writer-acorn";
+import { gsap } from "gsap";
+import { describe, expect, it } from "vitest";
+
+const timeline = `const tl = gsap.timeline({ paused: true });\n`;
+
+// What Studio saved for a plain element keyed at 1, 2 and 3 s, and for its size keyed at 3 s then 2 s.
+const saved = {
+  position:
+    `tl.set("#target", { x: 299.893, data: "hf-hold" }, 0);\n` +
+    `tl.to("#target", { keyframes: { "0%": { x: 299.893 }, "33.333%": { x: 297.086 }, "66.667%": { x: 47.754 } }, duration: 3 }, 1);`,
+  size:
+    `tl.set("#target", { width: 440, data: "hf-hold" }, 0);\n` +
+    `tl.to("#target", { keyframes: { "0%": { width: 440 }, "50%": { width: 340, ease: "none" } }, duration: 2 }, 2);`,
+};
+
+function valueAt(script: string, prop: "x" | "width", seeks: number[]) {
+  const target: Record<string, number> = { x: 0, width: 240 };
+  const run = new Function(
+    "gsap",
+    "target",
+    `${script.replaceAll('"#target"', "target")}\nreturn tl;`,
+  );
+  const tl = run(gsap, target) as gsap.core.Timeline;
+  for (const time of seeks) tl.seek(time);
+  return target[prop];
+}
+
+describe.each([
+  ["position", "x", 47.754],
+  ["size", "width", 340],
+] as const)("a %s tween Studio keyed short of its end", (name, prop, atThree) => {
+  it("plays and seeks to the same value once its tail is trimmed", () => {
+    const script = trimTrailingKeyframeSpans(timeline, timeline + saved[name]);
+    expect(valueAt(script, prop, [3])).toBeCloseTo(atThree, 3);
+    expect(valueAt(script, prop, [1, 2, 3])).toBeCloseTo(atThree, 3);
+  });
+
+  it("is what GSAP 3.15 gets wrong on a direct seek without the trim", () => {
+    const script = timeline + saved[name];
+    expect(valueAt(script, prop, [1, 2, 3])).toBeCloseTo(atThree, 3);
+    expect(valueAt(script, prop, [3])).not.toBeCloseTo(atThree, 0);
+  });
+});

package/src/hooks/useEditHistoryActions.test.tsx

@@ -7,6 +7,7 @@ import { STUDIO_MOTION_PATH } from "../components/editor/studioMotion";
 import { useEditHistoryActions, type EditHistoryHandle } from "./useEditHistoryActions";
 import {
   beginStudioPendingEdit,
+  isStudioEditSaving,
   setStudioPendingEditClaimClock,
   trackStudioPendingEdit,
 } from "../utils/studioPendingEdits";
@@ -97,6 +98,25 @@ describe("useEditHistoryActions", () => {
     });
   });
 
+  it("counts a shown step as saving until the server takes it, so a preview reload waits for its write", async () => {
+    const { deps, actions } = mount(
+      { ok: true, label: "Undid: Move", paths: ["index.html"], undoes: "e1", files: SERVER_FILES },
+      PREDICTED,
+    );
+    let step!: () => void;
+    const stepped = new Promise<void>((resolve) => (step = resolve));
+    const undo = deps.editHistory.undo.getMockImplementation()!;
+    deps.editHistory.undo.mockImplementation(async (cb) => (await stepped, undo(cb)));
+
+    const undone = actions.undo();
+    expect(deps.showHistoryRestoreNow).toHaveBeenCalledWith(PREDICTED.files);
+    expect(isStudioEditSaving()).toBe(true);
+    step();
+    await act(() => undone);
+    await Promise.resolve();
+    expect(isStudioEditSaving()).toBe(false);
+  });
+
   it("puts a shown step back and applies the server's own restore when it stepped another entry", async () => {
     const { deps, actions } = mount(
       {

package/src/hooks/useEditHistoryActions.ts

@@ -4,6 +4,7 @@ import { STUDIO_MOTION_PATH } from "../components/editor/studioMotion";
 import { serializeStudioFileMutations } from "../utils/studioFileMutationCoordinator";
 import type { RestoreFiles } from "../utils/gsapUndoRestore";
 import {
+  beginStudioShownRestore,
   hasStudioPendingEdits,
   paintBackNewestStudioPendingEdit,
 } from "../utils/studioPendingEdits";
@@ -82,6 +83,7 @@ export function useEditHistoryActions({
       const pendingEditShown = direction === "undo" ? paintBackNewestStudioPendingEdit() : null;
       const predicted = pendingEditShown ? null : (editHistory.predict?.(direction) ?? null);
       const predictedShown = predicted ? (showHistoryRestoreNow?.(predicted.files) ?? null) : null;
+      const shownLanded = predictedShown ? beginStudioShownRestore() : null;
       const putBack = predictedShown ?? pendingEditShown?.showAgain;
       const claimedAfter =
         pendingEditShown?.claimsAtBegin ??
@@ -107,6 +109,7 @@ export function useEditHistoryActions({
           : stepped && editClaimed;
       } finally {
         if (putBack && !serverSteppedShown && !revertIsTheUndo) putBack();
+        shownLanded?.();
       }
       if (!result.ok && result.reason === "content-mismatch") {
         showToast(

package/src/hooks/useEnableKeyframes.ts

@@ -31,6 +31,7 @@ import {
 import { POSITION_PROPS } from "./gsapRuntimeReaders";
 import { findParsedTween, withLiveTiming } from "./gsapParsedTween";
 import { roundTo3 } from "../utils/rounding";
+import { readTranslatePxLeavingPercent } from "../components/editor/plainTranslate";
 import type { CommitMutationOptions } from "./gsapScriptCommitTypes";
 import {
   buildExtendedKeyframes,
@@ -180,6 +181,32 @@ export function resolveNewTweenRange(
   return { start: clampedStart, duration: Math.max(0.5, roundTo3(end - clampedStart)) };
 }
 
+export function singleKeyTweenMutation(
+  sel: DomEditSelection,
+  properties: Record<string, number>,
+  currentTime: number,
+): Record<string, unknown> | null {
+  // A brand-new tween: author it against the one element the user selected.
+  // The bare class selectorFromSelection hands back for an id-less element
+  // animates every sibling sharing the class (see writeTargetSelector).
+  const targetSelector = writeTargetSelector(sel);
+  if (!targetSelector) return null;
+  const { start, duration } = resolveNewTweenRange(
+    sel.dataAttributes?.start,
+    sel.dataAttributes?.duration,
+    currentTime,
+  );
+  // One keyframe at the playhead, a single diamond capturing the current value;
+  // motion comes from the keyframes the user adds or drags later.
+  return {
+    type: "add-with-keyframes",
+    targetSelector,
+    position: roundTo3(start),
+    duration: roundTo3(duration),
+    keyframes: [{ percentage: 0, properties }],
+  };
+}
+
 // Authoritative parse of the current source for `sel`. Returns `null` when the
 // fetch can't run (no projectId / request failed) so callers can distinguish
 // "unavailable" from a genuine empty result (e.g. after a delete-all). An empty
@@ -514,43 +541,11 @@ export function useEnableKeyframes(
       }
     } else {
       const position = readElementPosition(iframe, sel, null);
-      const { start: elStart, duration: elDuration } = resolveNewTweenRange(
-        sel.dataAttributes?.start,
-        sel.dataAttributes?.duration,
-        t,
-      );
-      // A brand-new tween: author it against the one element the user selected.
-      // The bare class selectorFromSelection hands back for an id-less element
-      // animates every sibling sharing the class (see writeTargetSelector).
-      const selector = writeTargetSelector(sel);
-
-      if (!selector) {
-        session.handleGsapAddAnimation("to");
-        return;
-      }
-
-      if (Object.keys(position).length === 0) {
-        position.x = 0;
-        position.y = 0;
-      }
-
-      // One keyframe at the playhead — a single diamond capturing the current
-      // value. Motion comes from the user adding/dragging more keyframes later;
-      // creating 0%+100% up front showed two diamonds for a single "add keyframe".
-      const keyframes: Array<{ percentage: number; properties: Record<string, number | string> }> =
-        [{ percentage: 0, properties: { ...position } }];
-
-      if (session.commitMutation) {
-        await session.commitMutation(
-          {
-            type: "add-with-keyframes",
-            targetSelector: selector,
-            position: roundTo3(elStart),
-            duration: roundTo3(elDuration),
-            keyframes,
-          },
-          { label: "Enable keyframes", softReload: true },
-        );
+      if (Object.keys(position).length === 0)
+        Object.assign(position, readTranslatePxLeavingPercent(sel.element));
+      const mutation = singleKeyTweenMutation(sel, position, t);
+      if (mutation && session.commitMutation) {
+        await session.commitMutation(mutation, { label: "Enable keyframes", softReload: true });
       } else {
         session.handleGsapAddAnimation("to");
       }

package/src/hooks/useGsapAwareEditing.test.tsx

@@ -424,6 +424,7 @@ describe("useGsapAwareEditing anchored resize", () => {
       expect.any(Function),
       undefined,
       expect.any(Function),
+      expect.objectContaining({ frozen: true }),
     );
     act(() => h.root.unmount());
   });

package/src/hooks/useGsapAwareEditing.ts

@@ -16,7 +16,7 @@ import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
 import type { DomEditSelection } from "../components/editor/domEditingTypes";
 import { tryGsapDragIntercept, tryGsapRotationIntercept } from "./gsapRuntimeBridge";
 import { tryGsapResizeIntercept } from "./gsapResizeIntercept";
-import { computeDraggedGsapPosition } from "./draggedGsapPosition";
+import { computeDraggedGsapPosition, freezeDragStamp } from "./draggedGsapPosition";
 import { readGsapPositionFromIframe } from "./gsapPositionDetection";
 import { selectorFromSelection } from "./gsapShared";
 import { useAnimatedPropertyCommit } from "./useAnimatedPropertyCommit";
@@ -209,6 +209,7 @@ export function useGsapAwareEditing({
       restore: () => void = () => undefined,
       route?: { plainTranslate: boolean },
     ) => {
+      const stamp = freezeDragStamp(selection.element);
       const writes = observeGsapGesture(gsapCommitMutation);
       if (route?.plainTranslate ?? editsPlainCss(selection.element, "resize")) {
         const result = await handleDomBoxSizeCommit(selection, next, offset, restore);
@@ -256,6 +257,7 @@ export function useGsapAwareEditing({
             previewIframeRef.current,
             commitMutation,
             makeFetchFallback(selection),
+            { stamp },
           );
           // Saved after the size, under its undo key, so the two are one step.
           await saveMove(dragOutcome, async () => {
@@ -279,7 +281,12 @@ export function useGsapAwareEditing({
               x: 0,
               y: 0,
             };
-            const { newX, newY } = computeDraggedGsapPosition(selection.element, offset, gsapPos);
+            const { newX, newY } = computeDraggedGsapPosition(
+              selection.element,
+              offset,
+              gsapPos,
+              stamp,
+            );
             logResize("sync-settle", { gsapPos, offset, newX, newY });
             setElementGsapPosition(selection.element, newX, newY);
           });
@@ -297,6 +304,7 @@ export function useGsapAwareEditing({
                 makeFetchFallback(selection),
                 offset,
                 writes.drawKeepingUndone,
+                stamp,
               );
               assertGsapEditPersisted(outcome);
               // Saved before the buffered GSAP writes, so their reload stays the gesture's last render.

package/src/player/components/timelineClipDragCommit.test.ts

@@ -588,6 +588,28 @@ describe("commitDraggedClipMove", () => {
       expectZLiftedToSix(onStackingPatches);
     });
 
+    it("a multi-selection lane move restacks only the dragged clip", async () => {
+      // a moves up from row 2 to row 1 over c; the selected scene keeps its row, so it keeps its z.
+      const elements = [
+        el("scene", 0, 0, 10),
+        el("b", 1, 5, 5),
+        el("a", 2, 0, 4),
+        el("c", 3, 0, 4),
+      ];
+      const z: Record<string, number> = { scene: 0, b: 2, a: 1, c: 3 };
+      const onStackingPatches = vi.fn();
+      runClipMove(drag(elements[2], { previewStart: 0, previewTrack: 1 }), {
+        elements,
+        trackOrder: [0, 1, 2, 3],
+        selectedKeys: new Set(["a", "scene"]),
+        readZIndex: (e) => z[e.key ?? e.id] ?? 0,
+        onStackingPatches,
+      });
+      await flushMicrotasks();
+      expect(onStackingPatches).toHaveBeenCalledTimes(1);
+      expect(onStackingPatches.mock.calls[0][0]).toEqual([{ key: "a", zIndex: 4 }]);
+    });
+
     it("partial z-sync deps (no readZIndex) → move persists but no stacking call", async () => {
       const elements = [el("a", 1, 0, 10), el("b", 0, 0, 10)];
       // onStackingPatches present but readZIndex absent → syncStackingForEdit needs

package/src/player/components/timelineClipDragCommit.ts

@@ -337,7 +337,6 @@ export function commitDraggedClipMove(drag: DraggedClipState, deps: DragCommitDe
     if (multi?.keys.has(keyOf(e))) return { ...e, start: multi.movedStart(e) };
     return e;
   });
-  const multiKeys = multi ? multi.keys : null;
   if (!isVertical || !deps.readZIndex || !deps.onStackingPatches) {
     void refreshAfterDurableLaneMove(
       persistMoveEdits(edits, deps, coalesceKey, "lane-reorder"),
@@ -354,7 +353,6 @@ export function commitDraggedClipMove(drag: DraggedClipState, deps: DragCommitDe
           dragKey,
           drag.element.track,
           drag.previewTrack,
-          multiKeys,
           deps,
           coalesceKey,
         ),
@@ -472,7 +470,6 @@ function commitTrackInsert(
           dragKey,
           drag.element.track,
           drag.insertRow!,
-          multi ? multi.keys : null,
           deps,
           coalesceKey,
         ),
@@ -532,8 +529,8 @@ export function commitZMirrorLaneMove(
  * vertical lane change. Projects the drop-intent element set (`candidate`: the
  * dragged clip at its new / fractional-insert lane, others at their current tracks)
  * onto StackingElement using the caller-supplied live z-index reader, then
- * delegates the minimal-z resolution to computeStackingPatches — a clip on the
- * upper lane paints above every clip it time-overlaps. No-op unless both z-sync
+ * delegates to computeStackingPatches — the moved clip alone rises (moved up) or
+ * sinks (moved down) past the clips it time-overlaps. No-op unless both z-sync
  * deps are present, and never when the gesture aimed at the clip's OWN current
  * lane (`aimedLane === currentLane` — not a relocation).
  */
@@ -542,7 +539,6 @@ function syncStackingForEdit(
   dragKey: string,
   currentLane: number,
   aimedLane: number,
-  multiKeys: ReadonlySet<string> | null,
   deps: DragCommitDeps,
   coalesceKey?: string,
 ): Promise<void> {
@@ -567,10 +563,11 @@ function syncStackingForEdit(
     stackingContextId: el.stackingContextId ?? null,
   }));
 
-  const editedKeys = [dragKey];
-  if (multiKeys) for (const k of multiKeys) if (k !== dragKey) editedKeys.push(k);
-
-  const patches = computeStackingPatches(stackingEls, editedKeys);
+  const patches = computeStackingPatches(
+    stackingEls,
+    [dragKey],
+    aimedLane < currentLane ? "up" : "down",
+  );
   if (patches.length === 0) return Promise.resolve();
   return Promise.resolve(onStackingPatches(patches, coalesceKey)).then(() => undefined);
 }