@hyperframes/studio 0.7.55 → 0.7.57

package/src/hooks/gsapResizeIntercept.ts

@@ -24,10 +24,11 @@ import type { GsapDragCommitCallbacks } from "./gsapDragCommit";
 import { pickClosestToPlayhead, readGsapPositionFromIframe } from "./gsapPositionDetection";
 import { commitWholePropertyOffset } from "./gsapWholePropertyOffsetCommit";
 import { resolveTweenStart, resolveTweenDuration } from "../utils/globalTimeCompiler";
-import { selectorFromSelection } from "./gsapShared";
+import { isInstantHold, selectorFromSelection } from "./gsapShared";
 import { roundTo3 } from "../utils/rounding";
 import { resolveGroupTween, POSITION_CHANNELS } from "./gsapRuntimeBridge";
 import { hasNonHoldTweenForElement } from "./gsapRuntimeKeyframes";
+import { logResize } from "../utils/resizeDebug";
 
 const IDENTITY_ONE_PROPS = new Set(["opacity", "autoAlpha", "scale", "scaleX", "scaleY"]);
 
@@ -68,19 +69,27 @@ export async function tryGsapResizeIntercept(
   );
 
   let anim = resolved?.anim ?? null;
-  if (!anim || anim.method === "set") {
+  logResize("intercept-enter", {
+    hasScaleGroup,
+    resizeGroup,
+    animMethod: anim?.method ?? null,
+    animId: anim?.id ?? null,
+    size,
+  });
+  if (!anim || isInstantHold(anim)) {
     const sel = selectorFromSelection(selection);
     if (!sel) return false;
-    const sizeSet = anim?.method === "set" ? anim : findSizeSetAnimation(animations, sel);
+    const sizeSet = anim ?? findSizeSetAnimation(animations, sel);
 
     // If the element is animated (has a real tween, not just a static size
     // hold), keyframe the size at the playhead so other keyframes keep theirs —
     // instead of a global set that resizes every frame.
     if (resizeGroup === "size") {
       const animatedTween = pickClosestToPlayhead(
-        animations.filter((a) => a.method !== "set" && resolveTweenDuration(a) > 0),
+        animations.filter((a) => !isInstantHold(a) && resolveTweenDuration(a) > 0),
       );
       if (animatedTween) {
+        logResize("intercept-route", { route: "keyframed-size", tweenId: animatedTween.id });
         const handled = await commitKeyframedSizeFromResize(
           selection,
           size,
@@ -93,6 +102,7 @@ export async function tryGsapResizeIntercept(
       }
     }
 
+    logResize("intercept-route", { route: "static-size-set", hadSizeSet: !!sizeSet, resizeGroup });
     await commitStaticGsapSize(selection, size, sel, sizeSet, {
       commitMutation,
       fetchAnimations: fetchFallbackAnimations,
@@ -100,11 +110,12 @@ export async function tryGsapResizeIntercept(
     return true;
   }
 
+  const tweenDuration = resolveTweenDuration(anim);
+  if (tweenDuration <= 0) return false;
+
   const { activeKeyframePct, setActiveKeyframePct } = usePlayerStore.getState();
   const pct = activeKeyframePct ?? computeCurrentPercentage(selection, anim);
   if (activeKeyframePct != null) setActiveKeyframePct(null);
-  const coalesceKey = `gsap:resize:${anim.id}`;
-
   const selector = selectorFromSelection(selection);
   // Scope every capture to the resize group — same contract as the rotation
   // intercept. Unfiltered, an opacity-touching intro tween on the element
@@ -144,6 +155,16 @@ export async function tryGsapResizeIntercept(
     // shorthand when the two agree (aspect-true drags, shift-drags).
     nonUniformScale = Math.abs(newScaleX - newScaleY) > 0.01;
     resizeProps = nonUniformScale ? { scaleX: newScaleX, scaleY: newScaleY } : { scale: newScaleX };
+    logResize("intercept-route", {
+      route: "scale-tween",
+      cssW,
+      cssH,
+      liveScaleX,
+      liveScaleY,
+      newScaleX,
+      newScaleY,
+      nonUniformScale,
+    });
     scaleDraftEl = el;
     // Where the user DROPPED the box: the draft (anchor-pinned to the
     // gesture-start top-left) is still applied here, so this rect is exactly
@@ -184,6 +205,7 @@ export async function tryGsapResizeIntercept(
       POSITION_CHANNELS,
     );
     if (hasLivePositionTween) {
+      logResize("scale-finalize", { skipped: "live-position-tween" });
       return;
     }
     // The scale commit has rendered (instant patch or soft-reload seek) and the
@@ -200,6 +222,13 @@ export async function tryGsapResizeIntercept(
       x: Math.round(gsapPos.x + residual.x),
       y: Math.round(gsapPos.y + residual.y),
     };
+    logResize("scale-finalize", {
+      dropPoint: scaleDraftDropPoint,
+      post: { x: post.x, y: post.y },
+      residual,
+      gsapPos,
+      corrected,
+    });
     // Correct the LIVE runtime NOW, synchronously: the soft reload above just
     // rendered the committed scale around the element center — NOT at the drop
     // point — and everything up to here runs in the same microtask chain as
@@ -249,7 +278,7 @@ export async function tryGsapResizeIntercept(
 
   const ct = usePlayerStore.getState().currentTime;
   const ts = resolveTweenStart(anim);
-  const td = resolveTweenDuration(anim);
+  const td = tweenDuration;
   const outsideRange = ts !== null && td > 0 && (ct < ts - 0.01 || ct > ts + td + 0.01); // Convert flat tweens to keyframes only for in-range resizes.
   // Outside-range uses the extend path which handles everything atomically.
   if (!outsideRange) {
@@ -264,7 +293,7 @@ export async function tryGsapResizeIntercept(
       await commitMutation(
         selection,
         { type: "convert-to-keyframes", animationId: anim.id, resolvedFromValues },
-        { label: "Convert to keyframes for resize", skipReload: true, coalesceKey },
+        { label: "Convert to keyframes for resize" },
       );
       if (fetchFallbackAnimations) {
         const fresh = await fetchFallbackAnimations();
@@ -353,7 +382,6 @@ export async function tryGsapResizeIntercept(
           ? `Resize (extended to ${ct.toFixed(2)}s)`
           : `Resize (keyframe ${Math.round(((ct - newStart) / newDuration) * 1000) / 10}%)`,
         softReload: true,
-        coalesceKey,
       },
     );
     await finalizeScaleResizeCommit();
@@ -376,7 +404,7 @@ export async function tryGsapResizeIntercept(
       properties: resizeProps,
       backfillDefaults,
     },
-    { label: `Resize (keyframe ${pct}%)`, softReload: true, coalesceKey },
+    { label: `Resize (keyframe ${pct}%)`, softReload: true },
   );
   await finalizeScaleResizeCommit();
   return true;

package/src/hooks/gsapRuntimeBridge.test.ts

@@ -1,7 +1,7 @@
 import { afterEach, describe, expect, it, vi } from "vitest";
 import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
 import type { DomEditSelection } from "../components/editor/domEditingTypes";
-import { tryGsapDragIntercept } from "./gsapRuntimeBridge";
+import { tryGsapDragIntercept, tryGsapRotationIntercept } from "./gsapRuntimeBridge";
 import { usePlayerStore } from "../player/store/playerStore";
 
 /**
@@ -90,7 +90,7 @@ describe("tryGsapDragIntercept — stale-parse guard (no resurrection after dele
     expect(mutation.type).not.toBe("add-keyframe");
   });
 
-  it("forwards instantPatch on BOTH coalesced commits when updating an existing static set", async () => {
+  it("forwards one complete instantPatch when atomically updating an existing static set", async () => {
     const commitMutation = vi.fn();
     const iframe = fakeIframe("puck-b", []); // runtime empty → STATIC path
     // An existing position-hold `set` for the selector → update-in-place (not add).
@@ -113,16 +113,14 @@ describe("tryGsapDragIntercept — stale-parse guard (no resurrection after dele
     );
 
     expect(handled).toBe(true);
-    // The coalesced update-property pair both carry an instantPatch so a partial
-    // (second-POST) failure still leaves the preview patched for what persisted:
-    // the x commit patches {x}, the final y commit patches the full {x,y}.
-    const updates = commitMutation.mock.calls.filter(([, m]) => m.type === "update-property");
-    expect(updates).toHaveLength(2);
-    expect(updates[0][2].instantPatch).toEqual({
-      selector: "#puck-b",
-      change: { kind: "set", props: { x: -50 } },
+    const updates = commitMutation.mock.calls.filter(([, m]) => m.type === "update-properties");
+    expect(updates).toHaveLength(1);
+    expect(updates[0][1]).toEqual({
+      type: "update-properties",
+      animationId: "#puck-b-set",
+      properties: { x: -50, y: 30 },
     });
-    expect(updates[1][2].instantPatch).toEqual({
+    expect(updates[0][2].instantPatch).toEqual({
       selector: "#puck-b",
       change: { kind: "set", props: { x: -50, y: 30 } },
     });
@@ -154,9 +152,9 @@ describe("tryGsapDragIntercept — stale-parse guard (no resurrection after dele
     );
 
     expect(handled).toBe(true);
-    // In-place update (2 coalesced update-property), NOT an `add`/`add-keyframe`.
+    // One atomic in-place update, NOT an `add`/`add-keyframe`.
     const types = commitMutation.mock.calls.map(([, m]) => m.type);
-    expect(types.every((t: string) => t === "update-property")).toBe(true);
+    expect(types).toEqual(["update-properties"]);
     expect(types).not.toContain("add");
     expect(types).not.toContain("add-keyframe");
   });
@@ -180,6 +178,44 @@ describe("tryGsapDragIntercept — stale-parse guard (no resurrection after dele
   });
 });
 
+describe("tryGsapRotationIntercept — instant holds", () => {
+  it("updates a duration-zero fromTo hold instead of converting it to keyframes", async () => {
+    const rotationHold = {
+      id: "#puck-b-fromTo-0-rotation",
+      targetSelector: "#puck-b",
+      propertyGroup: "rotation",
+      method: "fromTo",
+      fromProperties: { rotation: 0 },
+      properties: { rotation: 30 },
+      position: 0,
+      resolvedStart: 0,
+      duration: 0,
+    } as unknown as GsapAnimation;
+    const commitMutation = vi.fn();
+
+    const handled = await tryGsapRotationIntercept(
+      selection,
+      75,
+      [rotationHold],
+      null,
+      commitMutation,
+    );
+
+    expect(handled).toBe(true);
+    expect(commitMutation).toHaveBeenCalledTimes(1);
+    expect(commitMutation.mock.calls[0]![1]).toEqual({
+      type: "update-property",
+      animationId: rotationHold.id,
+      property: "rotation",
+      value: 75,
+    });
+    const types = commitMutation.mock.calls.map(([, mutation]) => mutation.type);
+    expect(types).not.toContain("convert-to-keyframes");
+    expect(types).not.toContain("add-keyframe");
+    expect(types).not.toContain("add");
+  });
+});
+
 // Regression (#1808): with the global auto-keyframe toggle off, dragging an
 // element that already has a keyframed position tween must shift the whole
 // tween (a "replace-with-keyframes" carrying every original percentage) —

package/src/hooks/gsapRuntimeBridge.ts

@@ -26,7 +26,7 @@ import {
 import { commitWholePropertyOffset } from "./gsapWholePropertyOffsetCommit";
 import { resolveTweenDuration } from "../utils/globalTimeCompiler";
 import type { GsapDragCommitCallbacks } from "./gsapDragCommit";
-import { selectorFromSelection } from "./gsapShared";
+import { isInstantHold, selectorFromSelection } from "./gsapShared";
 import {
   findGsapPositionAnimation,
   pickClosestToPlayhead,
@@ -211,7 +211,7 @@ export async function tryGsapDragIntercept(
   const hasKeyframedPosTween = !!posAnim?.keyframes && resolveTweenDuration(posAnim) > 0;
   if (!hasNonHold && !hasKeyframedPosTween) {
     const existingSet =
-      posAnim && posAnim.method === "set" && posAnim.targetSelector === selector
+      posAnim && isInstantHold(posAnim) && posAnim.targetSelector === selector
         ? posAnim
         : findExistingPositionWrite(resolvedAnimations, selector);
     await commitStaticGsapPosition(selection, offset, gsapPos, selector, existingSet, {
@@ -300,8 +300,8 @@ export async function tryGsapRotationIntercept(
   // mirroring the static position set. Idempotent: re-rotate updates an existing
   // rotation set in place, else add a new one. This replaces the old
   // `--hf-studio-rotation` CSS-var fallback (the same dual-channel bug class).
-  if (!anim) {
-    const existingSet = findRotationSetAnimation(resolvedAnimations, selector);
+  if (!anim || isInstantHold(anim)) {
+    const existingSet = anim ?? findRotationSetAnimation(resolvedAnimations, selector);
     await commitStaticGsapRotation(selection, newRotation, selector, existingSet, {
       commitMutation,
       fetchAnimations: fetchFallbackAnimations,

package/src/hooks/gsapScriptCommitTypes.ts

@@ -16,6 +16,7 @@ export interface MutationResult {
 export interface CommitMutationOptions {
   label: string;
   coalesceKey?: string;
+  coalesceMs?: number;
   softReload?: boolean;
   skipReload?: boolean;
   beforeReload?: () => void;
@@ -38,11 +39,20 @@ export interface CommitMutationOptions {
   instantPatch?: { selector: string; change: RuntimeTweenChange };
 }
 
-export type CommitMutation = (
-  selection: DomEditSelection,
-  mutation: Record<string, unknown>,
-  options: CommitMutationOptions,
-) => Promise<void>;
+export interface CommitMutationCall {
+  selection: DomEditSelection;
+  mutation: Record<string, unknown>;
+  options: CommitMutationOptions;
+}
+
+export interface CommitMutation {
+  (
+    selection: DomEditSelection,
+    mutation: Record<string, unknown>,
+    options: CommitMutationOptions,
+  ): Promise<void>;
+  batch?: (calls: CommitMutationCall[], options: CommitMutationOptions) => Promise<void>;
+}
 
 export type SafeGsapCommitMutation = (
   selection: DomEditSelection,
@@ -66,6 +76,7 @@ export interface GsapScriptCommitsParams {
       label: string;
       kind: EditHistoryKind;
       coalesceKey?: string;
+      coalesceMs?: number;
       files: Record<string, { before: string; after: string }>;
     }) => Promise<void>;
   };

package/src/hooks/gsapShared.test.ts

@@ -1,5 +1,23 @@
 import { describe, it, expect } from "vitest";
-import { parsePercentageKeyframes } from "./gsapShared";
+import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
+import { isInstantHold, parsePercentageKeyframes } from "./gsapShared";
+
+describe("isInstantHold", () => {
+  const animation = (method: GsapAnimation["method"], duration?: number) =>
+    ({ method, duration }) as unknown as GsapAnimation;
+
+  it("classifies set and duration-zero to/fromTo writes as instant holds", () => {
+    expect(isInstantHold(animation("set"))).toBe(true);
+    expect(isInstantHold(animation("to", 0))).toBe(true);
+    expect(isInstantHold(animation("fromTo", 0))).toBe(true);
+  });
+
+  it("does not classify live tweens or duration-zero from writes as instant holds", () => {
+    expect(isInstantHold(animation("to", 1))).toBe(false);
+    expect(isInstantHold(animation("fromTo"))).toBe(false);
+    expect(isInstantHold(animation("from", 0))).toBe(false);
+  });
+});
 
 describe("parsePercentageKeyframes", () => {
   it("parses the object/percentage form", () => {

package/src/hooks/gsapShared.ts

@@ -33,6 +33,19 @@ export const PROPERTY_DEFAULTS: Record<string, number> = {
   height: 100,
 };
 
+/**
+ * A timeline write that applies an instantaneous value and then holds it.
+ * `set()` is always a hold; authored `to()` / `fromTo()` tweens are holds only
+ * when their resolved duration is exactly zero.
+ */
+export function isInstantHold(animation: GsapAnimation): boolean {
+  return (
+    animation.method === "set" ||
+    ((animation.method === "to" || animation.method === "fromTo") &&
+      resolveTweenDuration(animation) === 0)
+  );
+}
+
 // ── Selector resolution ───────────────────────────────────────────────────────
 
 /**
@@ -61,6 +74,7 @@ export function computeElementPercentage(
   if (animation) {
     const start = resolveTweenStart(animation);
     const duration = resolveTweenDuration(animation);
+    if (duration <= 0) return 0;
     if (start !== null) {
       return absoluteToPercentage(currentTime, start, duration);
     }

package/src/hooks/patchDocumentRootDuration.test.ts

@@ -0,0 +1,71 @@
+// @vitest-environment jsdom
+import { describe, expect, it } from "vitest";
+import { patchDocumentRootDuration } from "./timelineEditingHelpers";
+
+// The regression these guard against: timing edits now soft-reload instead of
+// full-reloading the iframe, so the runtime recomputes the composition length
+// from the ROOT's `data-duration` and posts it back — overwriting the studio's
+// optimistic duration readout. Patching the live root's `data-duration` in the
+// same tick keeps the runtime's post-soft-reload report in agreement, so the
+// readout stays live on grow AND shrink instead of snapping back.
+function parse(html: string): Document {
+  return new DOMParser().parseFromString(html, "text/html");
+}
+
+describe("patchDocumentRootDuration", () => {
+  it("writes the content end onto the TOP-LEVEL composition root (grow)", () => {
+    const doc = parse(`
+      <div data-composition-id="root" data-duration="15.18">
+        <div data-composition-id="scene" data-start="0" data-duration="8"></div>
+        <div data-start="12" data-duration="8"></div>
+      </div>
+    `);
+    expect(patchDocumentRootDuration(doc, 20)).toBe(true);
+    const root = doc.querySelector('[data-composition-id="root"]');
+    expect(root?.getAttribute("data-duration")).toBe("20");
+    // Nested sub-composition is untouched — only the outermost root is the length.
+    expect(doc.querySelector('[data-composition-id="scene"]')?.getAttribute("data-duration")).toBe(
+      "8",
+    );
+  });
+
+  it("shrinks the root duration too (not grow-only)", () => {
+    const doc = parse(`<div data-composition-id="root" data-duration="15.18"></div>`);
+    expect(patchDocumentRootDuration(doc, 6.5)).toBe(true);
+    expect(doc.querySelector("[data-composition-id]")?.getAttribute("data-duration")).toBe("6.5");
+  });
+
+  it("picks the composition with no ancestor composition as the root", () => {
+    // Root appears AFTER a nested one in document order — selection must be by
+    // ancestry, not first-match, matching the runtime's own root resolver.
+    const doc = parse(`
+      <section data-composition-id="root" data-duration="10">
+        <div data-composition-id="inner" data-duration="4"></div>
+      </section>
+    `);
+    patchDocumentRootDuration(doc, 12);
+    expect(doc.querySelector('[data-composition-id="root"]')?.getAttribute("data-duration")).toBe(
+      "12",
+    );
+    expect(doc.querySelector('[data-composition-id="inner"]')?.getAttribute("data-duration")).toBe(
+      "4",
+    );
+  });
+
+  it("no-ops on a non-positive or non-finite content end (never collapses to 0)", () => {
+    const doc = parse(`<div data-composition-id="root" data-duration="15.18"></div>`);
+    expect(patchDocumentRootDuration(doc, 0)).toBe(false);
+    expect(patchDocumentRootDuration(doc, -3)).toBe(false);
+    expect(patchDocumentRootDuration(doc, Number.NaN)).toBe(false);
+    expect(doc.querySelector("[data-composition-id]")?.getAttribute("data-duration")).toBe("15.18");
+  });
+
+  it("no-ops when there is no composition root and reports false", () => {
+    const doc = parse(`<div data-start="0" data-duration="5"></div>`);
+    expect(patchDocumentRootDuration(doc, 10)).toBe(false);
+  });
+
+  it("returns false for a null document", () => {
+    expect(patchDocumentRootDuration(null, 10)).toBe(false);
+  });
+});

package/src/hooks/timelineEditingGsap.ts

@@ -0,0 +1,14 @@
+import { formatTimelineAttributeNumber } from "../player/components/timelineEditing";
+
+export function patchDocumentRootDuration(
+  doc: Document | null | undefined,
+  contentEnd: number,
+): boolean {
+  if (!doc || !Number.isFinite(contentEnd) || contentEnd <= 0) return false;
+  const nodes = Array.from(doc.querySelectorAll("[data-composition-id]"));
+  const root =
+    nodes.find((node) => !node.parentElement?.closest("[data-composition-id]")) ?? nodes[0] ?? null;
+  if (!root) return false;
+  root.setAttribute("data-duration", formatTimelineAttributeNumber(contentEnd));
+  return true;
+}

package/src/hooks/timelineEditingHelpers.test.ts

@@ -1,8 +1,16 @@
 // @vitest-environment jsdom
 import { afterEach, describe, expect, it, vi } from "vitest";
-import { applyTimelineStackingReorder, extendRootDurationIfNeeded } from "./timelineEditingHelpers";
+import {
+  applyTimelineStackingReorder,
+  buildTimelineMoveTimingPatch,
+  deleteSelectedKeyframes,
+  extendRootDurationIfNeeded,
+  persistTimelineBatchEdit,
+  type PersistTimelineBatchChange,
+} from "./timelineEditingHelpers";
 import type { TimelineElement } from "../player/store/playerStore";
 import { usePlayerStore } from "../player/store/playerStore";
+import type { CommitMutationOptions } from "./gsapScriptCommitTypes";
 
 afterEach(() => {
   usePlayerStore.getState().reset();
@@ -102,3 +110,119 @@ describe("extendRootDurationIfNeeded", () => {
     expect(usePlayerStore.getState().duration).toBe(5);
   });
 });
+
+describe("persistTimelineBatchEdit", () => {
+  const SOURCE = `<div id="root"><video id="a" class="clip" data-start="1" data-track-index="0"></video><video id="b" class="clip" data-start="2" data-track-index="1"></video></div>`;
+
+  function batchInput(changes: PersistTimelineBatchChange[], writes: Array<[string, string]>) {
+    return {
+      projectId: "p1",
+      activeCompPath: "index.html",
+      label: "Move timeline clips",
+      changes,
+      writeProjectFile: async (path: string, content: string) => {
+        writes.push([path, content]);
+      },
+      recordEdit: async () => {},
+      domEditSaveTimestampRef: { current: 0 },
+      pendingTimelineEditPathRef: { current: new Set<string>() },
+    };
+  }
+
+  function stubReadFileContent(content: string) {
+    vi.stubGlobal(
+      "fetch",
+      vi.fn(async () => ({
+        ok: true,
+        json: async () => ({ content }),
+      })),
+    );
+  }
+
+  function moveMember(
+    id: string,
+    start: number,
+    fromTrack: number,
+    toTrack: number,
+  ): PersistTimelineBatchChange {
+    return {
+      element: el({ id, tag: "video", domId: id, start, track: fromTrack }),
+      buildPatches: (original, target) =>
+        buildTimelineMoveTimingPatch(original, target, start, 5, toTrack),
+    };
+  }
+
+  async function runBatch(changes: PersistTimelineBatchChange[]) {
+    stubReadFileContent(SOURCE);
+    const writes: Array<[string, string]> = [];
+    await persistTimelineBatchEdit(batchInput(changes, writes));
+    return writes;
+  }
+
+  afterEach(() => {
+    vi.unstubAllGlobals();
+  });
+
+  it("skips no-op members instead of aborting the batch (track-insert renumber)", async () => {
+    // A track-insert renumber can include a member whose attributes already
+    // hold the target values — its patch is string-identical. The batch must
+    // skip it and still persist the members that DID change.
+    const writes = await runBatch([
+      // no-op: data-start already "1", track already 0
+      moveMember("a", 1, 0, 0),
+      // real change: track 1 -> 2
+      moveMember("b", 2, 1, 2),
+    ]);
+
+    expect(writes).toHaveLength(1);
+    expect(writes[0]![0]).toBe("index.html");
+    expect(writes[0]![1]).toContain('id="b" class="clip" data-start="2" data-track-index="2"');
+  });
+
+  it("saves nothing when every member is a no-op", async () => {
+    const writes = await runBatch([moveMember("a", 1, 0, 0)]);
+
+    expect(writes).toHaveLength(0);
+  });
+
+  it("throws on a mistargeted member instead of silently dropping it", async () => {
+    // A member whose target does not resolve in the source (stale id) patches
+    // to the identical string too — but that is a targeting FAILURE, not an
+    // already-at-target no-op, and must abort the batch like the single path.
+    stubReadFileContent(SOURCE);
+    const writes: Array<[string, string]> = [];
+
+    await expect(
+      persistTimelineBatchEdit(batchInput([moveMember("ghost", 3, 0, 2)], writes)),
+    ).rejects.toThrow("Unable to patch timeline element ghost in index.html");
+    expect(writes).toHaveLength(0);
+  });
+});
+
+describe("deleteSelectedKeyframes", () => {
+  it("coalesces all removals and reloads only after the last one", () => {
+    usePlayerStore.setState({
+      selectedElementId: "card",
+      selectedKeyframes: new Set(["card:10", "card:50", "card:90"]),
+    });
+    const handleGsapRemoveKeyframe =
+      vi.fn<(animId: string, pct: number, options?: Partial<CommitMutationOptions>) => void>();
+
+    deleteSelectedKeyframes({
+      selectedGsapAnimations: [{ id: "card-position", keyframes: {} }],
+      handleGsapRemoveKeyframe,
+    });
+
+    expect(handleGsapRemoveKeyframe).toHaveBeenCalledTimes(3);
+    const options = handleGsapRemoveKeyframe.mock.calls.map((call) => call[2]);
+    expect(new Set(options.map((entry) => entry?.coalesceKey)).size).toBe(1);
+    expect(options).toEqual([
+      expect.objectContaining({ coalesceMs: Infinity, skipReload: true }),
+      expect.objectContaining({ coalesceMs: Infinity, skipReload: true }),
+      expect.objectContaining({ coalesceMs: Infinity, softReload: true }),
+    ]);
+    expect(options[0]).not.toHaveProperty("softReload");
+    expect(options[1]).not.toHaveProperty("softReload");
+    expect(options[2]).not.toHaveProperty("skipReload");
+  });
+});