@hyperframes/studio 0.7.54 → 0.7.56

package/src/hooks/gestureTransaction.ts

@@ -0,0 +1,199 @@
+import type {
+  CommitMutation,
+  CommitMutationCall,
+  CommitMutationOptions,
+} from "./gsapScriptCommitTypes";
+import { trackStudioEvent } from "../utils/studioTelemetry";
+
+type PixelRect = Pick<DOMRect, "x" | "y" | "width" | "height">;
+
+export type TxCommit = (commitMutation: CommitMutation) => CommitMutation;
+
+export interface GestureTransaction {
+  element: HTMLElement;
+  label: string;
+  settle(): void;
+  persist(commit: TxCommit): Promise<void>;
+  restore(): void;
+  skipPixelAssert?: boolean;
+}
+
+let transactionCounter = 0;
+const transactionCommits = new WeakSet<CommitMutation>();
+
+/** Whether a commit function already belongs to an active gesture transaction. */
+export function isGestureTransactionCommit(commitMutation: CommitMutation): boolean {
+  return transactionCommits.has(commitMutation);
+}
+
+function readPixelRect(element: HTMLElement): PixelRect {
+  const { x, y, width, height } = element.getBoundingClientRect();
+  return { x, y, width, height };
+}
+
+function transactionOptions(
+  options: CommitMutationOptions,
+  coalesceKey: string,
+  label: string,
+): CommitMutationOptions {
+  // The transaction owns the undo label: every wrapped mutation records under
+  // `label`, so the coalesced entry reads as the gesture (e.g. "Resize layer")
+  // rather than whichever sub-mutation happened to land last (the offset
+  // persist's "Move layer").
+  const { coalesceKey: _coalesceKey, skipReload: _skipReload, softReload, ...rest } = options;
+  return softReload
+    ? { ...rest, label, softReload: true, coalesceKey, coalesceMs: Number.POSITIVE_INFINITY }
+    : { ...rest, label, skipReload: true, coalesceKey, coalesceMs: Number.POSITIVE_INFINITY };
+}
+
+function pixelDelta(before: PixelRect, after: PixelRect): PixelRect {
+  return {
+    x: after.x - before.x,
+    y: after.y - before.y,
+    width: after.width - before.width,
+    height: after.height - before.height,
+  };
+}
+
+function exceedsPixelTolerance(delta: PixelRect): boolean {
+  return Object.values(delta).some((value) => Math.abs(value) > 1);
+}
+
+function roundToOneDecimal(value: number): number {
+  return Math.round(value * 10) / 10;
+}
+
+type BufferedCommit = CommitMutationCall & { dispatch: CommitMutation };
+
+function mergeTransactionOptions(calls: BufferedCommit[]): CommitMutationOptions {
+  const reloadCall = calls.find(({ options }) => options.softReload);
+  const source = reloadCall?.options ?? calls.at(-1)?.options;
+  if (!source) throw new Error("Cannot merge an empty gesture transaction");
+  const { skipReload: _skipReload, instantPatch: _instantPatch, ...options } = source;
+  return reloadCall ? { ...options, softReload: true } : { ...options, skipReload: true };
+}
+
+/**
+ * Dispatch a transaction's buffered commits and return the number of preview
+ * reloads that ACTUALLY happened — a batch collapses every buffered softReload
+ * into one reload, so reload telemetry reflects the real cost, not the count of
+ * softReload requests.
+ */
+function reloadsRequested(calls: BufferedCommit[]): number {
+  return calls.filter(({ options }) => options.softReload).length;
+}
+
+async function dispatchBufferedCommits(calls: BufferedCommit[]): Promise<number> {
+  const first = calls[0];
+  if (!first) return 0;
+  if (calls.length === 1) {
+    await first.dispatch(first.selection, first.mutation, first.options);
+    return reloadsRequested(calls);
+  }
+  const canBatch = calls.every(
+    ({ dispatch, selection }) =>
+      dispatch === first.dispatch && selection.sourceFile === first.selection.sourceFile,
+  );
+  if (canBatch && first.dispatch.batch) {
+    await first.dispatch.batch(
+      calls.map(({ selection, mutation, options }) => ({ selection, mutation, options })),
+      mergeTransactionOptions(calls),
+    );
+    // One server write, one reload — the reload count collapses with the batch.
+    return reloadsRequested(calls) > 0 ? 1 : 0;
+  }
+  for (const { dispatch, selection, mutation, options } of calls) {
+    await dispatch(selection, mutation, options);
+  }
+  return reloadsRequested(calls);
+}
+
+/**
+ * Dev-only [hf-commit] lifecycle trace. The production observability lives in
+ * the trackStudioEvent commit_* events (always on); these console lines are a
+ * developer aid and stay out of end users' consoles.
+ */
+function traceCommit(stage: string, data: Record<string, unknown>): void {
+  if (import.meta.env.DEV) console.info(`[hf-commit] ${stage}`, data);
+}
+
+/**
+ * Owns the visual + persistence + history lifecycle for one gesture release.
+ * `settle` deliberately runs before the first promise is created or awaited.
+ */
+export function runGestureTransaction(tx: GestureTransaction): Promise<void> {
+  const startedAt = performance.now();
+  const coalesceKey = `tx:${tx.label}:${++transactionCounter}`;
+  let mutationCount = 0;
+  let reloadCount = 0;
+  const bufferedCommits: BufferedCommit[] = [];
+  traceCommit("start", { label: tx.label, coalesceKey });
+  tx.settle();
+  traceCommit("settled", { label: tx.label, coalesceKey });
+
+  const before = !tx.skipPixelAssert ? readPixelRect(tx.element) : null;
+  const commit: TxCommit = (commitMutation) => {
+    const wrapped: CommitMutation = (selection, mutation, options) => {
+      mutationCount += 1;
+      bufferedCommits.push({
+        dispatch: commitMutation,
+        selection,
+        mutation,
+        options: transactionOptions(options, coalesceKey, tx.label),
+      });
+      return Promise.resolve();
+    };
+    transactionCommits.add(wrapped);
+    return wrapped;
+  };
+
+  return tx
+    .persist(commit)
+    .then(async () => {
+      reloadCount = await dispatchBufferedCommits(bufferedCommits);
+      const durationMs = Math.round(performance.now() - startedAt);
+      traceCommit("persisted", { label: tx.label, coalesceKey });
+      if (before) {
+        const after = readPixelRect(tx.element);
+        const delta = pixelDelta(before, after);
+        if (exceedsPixelTolerance(delta)) {
+          if (import.meta.env.DEV) {
+            console.error("[hf-commit] persist changed pixels", {
+              label: tx.label,
+              before,
+              after,
+              delta,
+            });
+          }
+          trackStudioEvent("commit_invariant_violation", {
+            label: tx.label,
+            delta_x: roundToOneDecimal(delta.x),
+            delta_y: roundToOneDecimal(delta.y),
+            delta_w: roundToOneDecimal(delta.width),
+            delta_h: roundToOneDecimal(delta.height),
+            mutation_count: mutationCount,
+            reload_count: reloadCount,
+            duration_ms: durationMs,
+          });
+        }
+      }
+      trackStudioEvent("commit_transaction", {
+        label: tx.label,
+        mutation_count: mutationCount,
+        reload_count: reloadCount,
+        duration_ms: durationMs,
+        pixel_asserted: before !== null,
+      });
+    })
+    .catch((error: unknown) => {
+      tx.restore();
+      trackStudioEvent("commit_transaction_failed", {
+        label: tx.label,
+        mutation_count: mutationCount,
+        error_name: error instanceof Error ? error.name : "unknown",
+        restore_ran: true,
+      });
+      traceCommit("restore", { label: tx.label, coalesceKey });
+      throw error;
+    });
+}

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,