@hyperframes/studio 0.7.55 → 0.7.57

package/src/hooks/gsapDragCommit.test.ts

@@ -1,3 +1,5 @@
+// @vitest-environment happy-dom
+
 import { describe, expect, it, beforeEach } from "vitest";
 import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
 import type { DomEditSelection } from "../components/editor/domEditingTypes";
@@ -5,6 +7,7 @@ import { commitGsapPositionFromDrag } from "./gsapDragPositionCommit";
 import {
   commitStaticGsapPosition,
   commitStaticGsapRotation,
+  commitStaticGsapSize,
   findExistingPositionWrite,
   parkPlayheadOnKeyframe,
   type GsapDragCommitCallbacks,
@@ -280,7 +283,7 @@ const existingRotationSet = (): GsapAnimation =>
 describe("commitStaticGsapPosition — instantPatch (value-only set)", () => {
   beforeEach(() => usePlayerStore.setState({ currentTime: 0, activeKeyframePct: null }));
 
-  it("attaches an instantPatch to BOTH coalesced commits, each derived from its own mutation", async () => {
+  it("updates an existing set atomically and derives its instantPatch from that mutation", async () => {
     const { commits, callbacks } = optionRecordingCallbacks();
 
     await commitStaticGsapPosition(
@@ -292,69 +295,122 @@ describe("commitStaticGsapPosition — instantPatch (value-only set)", () => {
       callbacks,
     );
 
-    expect(commits).toHaveLength(2);
-    // First (x) commit is the intermediate skipReload one — it now carries an
-    // instantPatch for just {x}, so if the SECOND POST fails the preview still
-    // reflects the x that DID persist (no reload, instant feedback).
-    expect(commits[0].options.skipReload).toBe(true);
-    expect(commits[0].options.instantPatch).toEqual({
-      selector: "#puck-a",
-      change: { kind: "set", props: { x: -50 } },
+    expect(commits).toHaveLength(1);
+    expect(commits[0].mutation).toEqual({
+      type: "update-properties",
+      animationId: "#puck-a-set",
+      properties: { x: -50, y: 30 },
     });
-    // Final (y) commit triggers the reload and carries the full {x,y} patch.
-    expect(commits[1].options.softReload).toBe(true);
-    expect(commits[1].options.instantPatch).toEqual({
+    expect(commits[0].options.softReload).toBe(true);
+    expect(commits[0].options.instantPatch).toEqual({
       selector: "#puck-a",
       change: { kind: "set", props: { x: -50, y: 30 } },
     });
+    const mutation = commits[0].mutation as { properties: Record<string, number> };
+    const patch = commits[0].options.instantPatch as {
+      change: { props: Record<string, number> };
+    };
+    expect(patch.change.props).toEqual(mutation.properties);
   });
 
-  it("derives each instantPatch's props from the value in the SAME mutation that's POSTed", async () => {
+  it("ADDS a global gsap.set with a global-set instantPatch (off-timeline, no flash)", async () => {
     const { commits, callbacks } = optionRecordingCallbacks();
 
     await commitStaticGsapPosition(
       selection(),
       { x: -50, y: 30 },
+      // fallow-ignore-next-line code-duplication
       { x: 0, y: 0 },
       "#puck-a",
-      existingPositionSet(),
+      null, // no existing set → `add` a new base gsap.set
       callbacks,
     );
 
-    // The patch values must equal the mutation values — they're read out of the
-    // same object, so a clean mutation can't ship alongside a stale patch.
-    const xMutation = commits[0].mutation as { property: string; value: number };
-    const yMutation = commits[1].mutation as { property: string; value: number };
-    const xPatch = commits[0].options.instantPatch as {
-      change: { props: Record<string, number> };
-    };
-    const yPatch = commits[1].options.instantPatch as {
-      change: { props: Record<string, number> };
-    };
-    expect(xPatch.change.props[xMutation.property]).toBe(xMutation.value);
-    expect(yPatch.change.props[yMutation.property]).toBe(yMutation.value);
-    // The y commit's combined patch also carries the x mutation's value.
-    expect(yPatch.change.props[xMutation.property]).toBe(xMutation.value);
+    expect(commits).toHaveLength(1);
+    expect(commits[0].mutation.type).toBe("add");
+    expect((commits[0].mutation as { global?: boolean }).global).toBe(true);
+    const patch = commits[0].options.instantPatch as { change: { kind: string } } | undefined;
+    expect(patch?.change.kind).toBe("global-set");
   });
 
-  it("ADDS a global gsap.set with a global-set instantPatch (off-timeline, no flash)", async () => {
+  it("creates one undo entry when updating an existing static position set", async () => {
     const { commits, callbacks } = optionRecordingCallbacks();
 
     await commitStaticGsapPosition(
       selection(),
       { x: -50, y: 30 },
-      // fallow-ignore-next-line code-duplication
       { x: 0, y: 0 },
       "#puck-a",
-      null, // no existing set → `add` a new base gsap.set
+      existingPositionSet(),
+      callbacks,
+    );
+
+    expect(commits).toHaveLength(1);
+  });
+});
+
+const existingSizeSet = (): GsapAnimation =>
+  ({
+    id: "#puck-a-size-set",
+    targetSelector: "#puck-a",
+    method: "set",
+    properties: { width: 100, height: 80 },
+  }) as unknown as GsapAnimation;
+
+describe("commitStaticGsapSize", () => {
+  it("updates an existing set with one update-properties mutation", async () => {
+    const { commits, callbacks } = optionRecordingCallbacks();
+
+    await commitStaticGsapSize(
+      selection(),
+      { width: 300.4, height: 199.6 },
+      "#puck-a",
+      existingSizeSet(),
+      callbacks,
+    );
+
+    expect(commits).toHaveLength(1);
+    expect(commits[0].mutation).toEqual({
+      type: "update-properties",
+      animationId: "#puck-a-size-set",
+      properties: { width: 300, height: 200 },
+    });
+    expect(commits.map((commit) => commit.mutation.type)).not.toContain("delete");
+    expect(commits.map((commit) => commit.mutation.type)).not.toContain("add");
+  });
+
+  it("adds exactly one set when no existing size set exists", async () => {
+    const { commits, callbacks } = optionRecordingCallbacks();
+
+    await commitStaticGsapSize(
+      selection(),
+      { width: 300, height: 200 },
+      "#puck-a",
+      null,
+      callbacks,
+    );
+
+    expect(commits).toHaveLength(1);
+    expect(commits[0].mutation).toMatchObject({
+      type: "add",
+      targetSelector: "#puck-a",
+      method: "set",
+      properties: { width: 300, height: 200 },
+    });
+  });
+
+  it("creates one undo entry for an existing static size set", async () => {
+    const { commits, callbacks } = optionRecordingCallbacks();
+
+    await commitStaticGsapSize(
+      selection(),
+      { width: 300, height: 200 },
+      "#puck-a",
+      existingSizeSet(),
       callbacks,
     );
 
     expect(commits).toHaveLength(1);
-    expect(commits[0].mutation.type).toBe("add");
-    expect((commits[0].mutation as { global?: boolean }).global).toBe(true);
-    const patch = commits[0].options.instantPatch as { change: { kind: string } } | undefined;
-    expect(patch?.change.kind).toBe("global-set");
   });
 });
 
@@ -386,7 +442,7 @@ describe("static position hold recognition + heal (frozen duration-0 keyframed t
     expect(found?.id).toBe("#puck-a-frozen");
   });
 
-  it("commitStaticGsapPosition heals a keyframed hold by delete + clean add-set (never update-property)", async () => {
+  it("heals a keyframed hold with one transaction ordered add before delete", async () => {
     const { commits, callbacks } = optionRecordingCallbacks();
 
     await commitStaticGsapPosition(
@@ -399,11 +455,55 @@ describe("static position hold recognition + heal (frozen duration-0 keyframed t
     );
 
     const types = commits.map((c) => c.mutation.type);
-    // Can't update-property into keyframes — must delete the frozen tween and
-    // write a clean static set, so the element becomes freely movable.
-    expect(types).toEqual(["delete", "add"]);
-    expect(types).not.toContain("update-property");
-    expect((commits[1].mutation as { method?: string }).method).toBe("set");
+    expect(types).toEqual(["add", "delete"]);
+    expect(types).not.toContain("update-properties");
+    expect((commits[0].mutation as { method?: string }).method).toBe("set");
+    expect(commits[0].options.coalesceKey).toBe(commits[1].options.coalesceKey);
+    expect(commits[0].options.coalesceKey).toMatch(/^tx:Move layer:\d+$/);
+  });
+
+  it("keeps the original hold when the replacement add fails", async () => {
+    const mutationTypes: string[] = [];
+    const callbacks: GsapDragCommitCallbacks = {
+      commitMutation: async (_selection, mutation) => {
+        mutationTypes.push(mutation.type as string);
+        throw new Error("add failed");
+      },
+    };
+
+    await expect(
+      commitStaticGsapPosition(
+        selection(),
+        { x: -50, y: 30 },
+        { x: 0, y: 0 },
+        "#puck-a",
+        keyframedZeroDurationHold(),
+        callbacks,
+      ),
+    ).rejects.toThrow("add failed");
+    expect(mutationTypes).toEqual(["add"]);
+  });
+
+  it("leaves a recoverable duplicate when delete fails after the replacement add", async () => {
+    let holdCount = 1;
+    const callbacks: GsapDragCommitCallbacks = {
+      commitMutation: async (_selection, mutation) => {
+        if (mutation.type === "add") holdCount += 1;
+        if (mutation.type === "delete") throw new Error("delete failed");
+      },
+    };
+
+    await expect(
+      commitStaticGsapPosition(
+        selection(),
+        { x: -50, y: 30 },
+        { x: 0, y: 0 },
+        "#puck-a",
+        keyframedZeroDurationHold(),
+        callbacks,
+      ),
+    ).rejects.toThrow("delete failed");
+    expect(holdCount).toBe(2);
   });
 });
 

package/src/hooks/gsapDragCommit.ts

@@ -15,10 +15,8 @@ import { roundTo3 } from "../utils/rounding";
 import { computeElementPercentage } from "./gsapShared";
 import { computeDraggedGsapPosition } from "./draggedGsapPosition";
 import type { RuntimeTweenChange } from "./gsapRuntimePatch";
-import {
-  setPatchFromUpdateProperties,
-  setPatchFromUpdateProperty,
-} from "./gsapDragStaticSetHelpers";
+import { isGestureTransactionCommit, runGestureTransaction } from "./gestureTransaction";
+import { setPatchFromUpdateProperty } from "./gsapDragStaticSetHelpers";
 export {
   findExistingPositionWrite,
   findRotationSetAnimation,
@@ -65,6 +63,46 @@ export function parkPlayheadOnKeyframe(anim: GsapAnimation, pct: number): void {
   usePlayerStore.getState().requestSeek(roundTo3(ts + (pct / 100) * td));
 }
 
+async function replaceKeyframedPositionHold(
+  selection: DomEditSelection,
+  selector: string,
+  existingSet: GsapAnimation,
+  properties: { x: number; y: number },
+  commitMutation: GsapDragCommitCallbacks["commitMutation"],
+): Promise<void> {
+  const persist = async (commit: GsapDragCommitCallbacks["commitMutation"]) => {
+    await commit(
+      selection,
+      {
+        type: "add",
+        targetSelector: selector,
+        method: "set",
+        position: 0,
+        properties,
+        global: true,
+      },
+      { label: "Move layer", skipReload: true },
+    );
+    await commit(
+      selection,
+      { type: "delete", animationId: existingSet.id },
+      { label: "Move layer", softReload: true },
+    );
+  };
+
+  if (isGestureTransactionCommit(commitMutation)) {
+    await persist(commitMutation);
+    return;
+  }
+  await runGestureTransaction({
+    element: selection.element,
+    label: "Move layer",
+    settle: () => undefined,
+    persist: async (commit) => persist(commit(commitMutation)),
+    restore: () => undefined,
+  });
+}
+
 // ── Dynamic keyframe materialization ──────────────────────────────────────
 
 export async function materializeIfDynamic(
@@ -116,7 +154,7 @@ export async function materializeIfDynamic(
  * Commit a STATIC element drag as a `tl.set("#el",{x,y})` — the single-source
  * position channel for elements with no position animation. Idempotent: a
  * re-nudge of an element that already has a `set` UPDATES that set's x/y
- * (two `update-property` mutations) rather than stacking a second set or
+ * in one `update-properties` mutation rather than stacking a second set or
  * converting it to keyframes (plan R2 / KTD3). New elements get one `add`
  * mutation with `method:"set"` at position 0.
  */
@@ -132,70 +170,30 @@ export async function commitStaticGsapPosition(
   if (existingSet) {
     if (existingSet.keyframes) {
       // Keyframed zero-duration hold (drag-path corruption): can't update-property
-      // into keyframes — delete it and write a clean static set instead.
-      const coalesceKey = `gsap:heal-static:${existingSet.id}`;
-      await callbacks.commitMutation(
+      // into keyframes. Add the replacement first so either failure leaves at
+      // least one hold on disk, then delete the corrupt tween in one transaction.
+      await replaceKeyframedPositionHold(
         selection,
-        { type: "delete", animationId: existingSet.id },
-        { label: "Move layer", skipReload: true, coalesceKey },
-      );
-      await callbacks.commitMutation(
-        selection,
-        {
-          type: "add",
-          targetSelector: selector,
-          method: "set",
-          position: 0,
-          properties: { x: newX, y: newY },
-          global: true,
-        },
-        {
-          label: "Move layer",
-          softReload: true,
-          coalesceKey,
-          instantPatch: { selector, change: { kind: "global-set", props: { x: newX, y: newY } } },
-        },
+        selector,
+        existingSet,
+        { x: newX, y: newY },
+        callbacks.commitMutation,
       );
       return;
     }
-    // Update in place — two single-property mutations (the API updates one prop
-    // per call). Coalesce them and reload only after the second lands.
-    const coalesceKey = `gsap:set-nudge:${existingSet.id}`;
-    // Build each mutation FIRST, then derive its instantPatch from the SAME
-    // object that's POSTed — so a future caller can't ship a clean mutation with
-    // a stale/malformed patch (the validated `value` flows straight into the
-    // patch). `findUnsafeMutationValues` validates the mutation upstream.
-    const xMutation = {
-      type: "update-property",
+    const mutation = {
+      type: "update-properties",
       animationId: existingSet.id,
-      property: "x",
-      value: newX,
-    } as const;
-    const yMutation = {
-      type: "update-property",
-      animationId: existingSet.id,
-      property: "y",
-      value: newY,
+      properties: { x: newX, y: newY },
     } as const;
-    // Patch BOTH coalesced commits. If the SECOND POST fails server-side, the
-    // first (x) already persisted — patching its commit too means the live
-    // preview still reflects what DID persist. The x commit carries skipReload
-    // (no reload), so its instantPatch gives instant feedback without a reload;
-    // the y commit triggers the soft reload (skipped when the patch applies).
     const global = !!existingSet.global;
-    await callbacks.commitMutation(selection, xMutation, {
-      label: "Move layer",
-      skipReload: true,
-      coalesceKey,
-      instantPatch: setPatchFromUpdateProperty(selector, xMutation, global),
-    });
-    await callbacks.commitMutation(selection, yMutation, {
+    await callbacks.commitMutation(selection, mutation, {
       label: "Move layer",
       softReload: true,
-      coalesceKey,
-      // Final commit of the coalesced x/y pair: carry both channels so the
-      // runtime set lands the complete {x,y} pose in place.
-      instantPatch: setPatchFromUpdateProperties(selector, [xMutation, yMutation], global),
+      instantPatch: {
+        selector,
+        change: { kind: global ? "global-set" : "set", props: mutation.properties },
+      },
     });
     return;
   }
@@ -279,7 +277,7 @@ export async function commitStaticGsapRotation(
  * tween: one keyframe at the playhead % renders NaN/0 at every other frame, so
  * the element collapses/disappears (worst when resized off the 0% mark). A `set`
  * holds the size at all times. Re-resizing an element that already has a size
- * `set` UPDATES it in place (two `update-property`, like x/y); a new element
+ * `set` UPDATES it in place with one `update-properties`; a new element
  * gets one `add` with `method:"set"`.
  */
 export async function commitStaticGsapSize(
@@ -292,18 +290,11 @@ export async function commitStaticGsapSize(
   const width = Math.round(size.width);
   const height = Math.round(size.height);
   if (existingSet) {
-    await callbacks.commitMutation(
-      selection,
-      { type: "delete", animationId: existingSet.id },
-      { label: "Resize layer", skipReload: true },
-    );
     await callbacks.commitMutation(
       selection,
       {
-        type: "add",
-        targetSelector: selector,
-        method: "set",
-        position: 0,
+        type: "update-properties",
+        animationId: existingSet.id,
         properties: { width, height },
       },
       { label: "Resize layer", softReload: true },
@@ -394,10 +385,9 @@ export async function commitKeyframedSizeFromResize(
       properties: Math.abs(p - pct) < 0.05 ? { width: newW, height: newH } : { ...prior },
     }));
 
-  // Add the size keyframe tween FIRST, then delete the old global hold. The two
-  // commits aren't transactional, so ordering matters: if the delete fails the
-  // size is preserved (animated, recoverable) rather than lost. Only the last
-  // commit triggers the reload.
+  // Add the size keyframe tween FIRST, then delete the old global hold. The gesture
+  // transport applies both in one ordered batch; a plain commit fallback keeps the
+  // same recoverable ordering. Only the transaction's result triggers the reload.
   const addLabel = `Resize (size keyframe ${pct.toFixed(0)}%)`;
   await callbacks.commitMutation(
     selection,

package/src/hooks/gsapDragStaticSetHelpers.ts

@@ -1,6 +1,6 @@
 import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
-import { resolveTweenDuration } from "../utils/globalTimeCompiler";
 import type { RuntimeTweenChange, SetPatchProps } from "./gsapRuntimePatch";
+import { isInstantHold } from "./gsapShared";
 
 /** The shape of an `update-property` mutation a static-set nudge POSTs. */
 interface UpdatePropertyMutation {
@@ -16,27 +16,17 @@ interface UpdatePropertyMutation {
  * value the source write didn't (one source of truth). Each mutation contributes
  * its `{property: value}` channel to the patch's props.
  */
-export function setPatchFromUpdateProperties(
+export function setPatchFromUpdateProperty(
   selector: string,
-  mutations: UpdatePropertyMutation[],
+  mutation: UpdatePropertyMutation,
   global = false,
 ): { selector: string; change: RuntimeTweenChange } {
-  const props: SetPatchProps = {};
-  for (const m of mutations) props[m.property as keyof SetPatchProps] = m.value;
+  const props: SetPatchProps = { [mutation.property as keyof SetPatchProps]: mutation.value };
   // An off-timeline `gsap.set` has no runtime tween to patch — apply it to the
   // element directly. An on-timeline `tl.set` mutates its tween (so a re-seek keeps it).
   return { selector, change: { kind: global ? "global-set" : "set", props } };
 }
 
-/** Single-mutation convenience over {@link setPatchFromUpdateProperties}. */
-export function setPatchFromUpdateProperty(
-  selector: string,
-  mutation: UpdatePropertyMutation,
-  global = false,
-): { selector: string; change: RuntimeTweenChange } {
-  return setPatchFromUpdateProperties(selector, [mutation], global);
-}
-
 /**
  * Find the studio position-hold `set` for a selector — a `tl.set("#el",{x,y})`
  * with no duration. This is what a static-element nudge writes/updates.
@@ -61,7 +51,8 @@ function findPositionSetAnimation(
  * remove-all-keyframes leaves behind) is a held position too, and the next drag
  * must UPDATE it in place rather than append a second `gsap.set` that fights it
  * (the duplicate-position-write bug). Only zero-duration holds qualify — a
- * live-duration `to`/`from` is NOT a static hold (and in the static path it's a
+ * live-duration tween and a duration-zero `from` are NOT static holds (and in
+ * the static path they're a
  * stale/phantom parse: re-committing it would resurrect a just-deleted tween).
  * A keyframed zero-duration `to` is ALSO a static hold (a drag-path corruption
  * artifact) and must be recognized so the static commit normalizes it.
@@ -75,10 +66,7 @@ export function findExistingPositionWrite(
   if (set) return set;
   return (
     animations.find(
-      (a) =>
-        a.targetSelector === selector &&
-        a.propertyGroup === "position" &&
-        resolveTweenDuration(a) === 0,
+      (a) => a.targetSelector === selector && a.propertyGroup === "position" && isInstantHold(a),
     ) ?? null
   );
 }
@@ -89,7 +77,7 @@ export function findRotationSetAnimation(
 ): GsapAnimation | null {
   return (
     animations.find(
-      (a) => a.method === "set" && a.targetSelector === selector && "rotation" in a.properties,
+      (a) => isInstantHold(a) && a.targetSelector === selector && "rotation" in a.properties,
     ) ?? null
   );
 }
@@ -101,7 +89,7 @@ export function findSizeSetAnimation(
   return (
     animations.find(
       (a) =>
-        a.method === "set" &&
+        isInstantHold(a) &&
         a.targetSelector === selector &&
         ("width" in a.properties || "height" in a.properties),
     ) ?? null

package/src/hooks/gsapResizeIntercept.test.ts

@@ -3,6 +3,7 @@ import { afterEach, expect, it, vi } from "vitest";
 import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
 import type { DomEditSelection } from "../components/editor/domEditingTypes";
 import { usePlayerStore } from "../player/store/playerStore";
+import { computeCurrentPercentage } from "./gsapDragCommit";
 import { tryGsapResizeIntercept } from "./gsapResizeIntercept";
 
 afterEach(() => {
@@ -69,6 +70,74 @@ function keyframedScaleFixture(): GsapAnimation {
   } as unknown as GsapAnimation;
 }
 
+it("updates a duration-zero size hold in place instead of converting it to keyframes", async () => {
+  const el = document.createElement("div");
+  el.id = "box";
+  document.body.append(el);
+  const selection = { id: "box", selector: "#box", element: el } as DomEditSelection;
+  const instantSizeHold = {
+    id: "#box-to-0-size",
+    targetSelector: "#box",
+    propertyGroup: "size",
+    method: "to",
+    properties: { width: 150, height: 150 },
+    position: 0,
+    resolvedStart: 0,
+    duration: 0,
+    extras: { immediateRender: "__raw:true" },
+  } as unknown as GsapAnimation;
+  const commitMutation = vi.fn();
+
+  const handled = await tryGsapResizeIntercept(
+    selection,
+    { width: 344, height: 344 },
+    [instantSizeHold],
+    null,
+    commitMutation,
+  );
+
+  expect(handled).toBe(true);
+  expect(commitMutation).toHaveBeenCalledTimes(1);
+  expect(commitMutation.mock.calls[0]![1]).toEqual({
+    type: "update-properties",
+    animationId: "#box-to-0-size",
+    properties: { width: 344, height: 344 },
+  });
+  expect(commitMutation).not.toHaveBeenCalledWith(
+    expect.anything(),
+    expect.objectContaining({ type: "convert-to-keyframes" }),
+    expect.anything(),
+  );
+  expect(commitMutation).not.toHaveBeenCalledWith(
+    expect.anything(),
+    expect.objectContaining({ type: "add-keyframe" }),
+    expect.anything(),
+  );
+});
+
+it("computes a finite zero percentage for a zero-duration tween", () => {
+  const animation = {
+    id: "#box-to-0-size",
+    targetSelector: "#box",
+    propertyGroup: "size",
+    method: "to",
+    properties: { width: 150 },
+    resolvedStart: 1,
+    duration: 0,
+  } as unknown as GsapAnimation;
+  const selection = {
+    id: "box",
+    selector: "#box",
+    element: document.createElement("div"),
+  } as DomEditSelection;
+  usePlayerStore.setState({ currentTime: 5 });
+
+  const percentage = computeCurrentPercentage(selection, animation);
+
+  expect(Number.isFinite(percentage)).toBe(true);
+  expect(percentage).toBe(0);
+});
+
 /** Drive one resize through the intercept, returning every committed mutation. */
 async function runResize(
   el: HTMLElement,