@hyperframes/studio 0.8.114 → 0.8.116

package/src/hooks/useDomGeometryCommit.test.tsx

@@ -127,7 +127,7 @@ describe("useDomGeometryCommit, from the package entry", () => {
       y: 20,
     });
 
-    expect(outcome).toEqual({ ok: true });
+    expect(outcome).toEqual({ ok: true, changed: true });
     expect(mutations).toEqual([
       expect.objectContaining({ type: "add", targetSelector: "#card", method: "set" }),
     ]);
@@ -146,7 +146,14 @@ describe("useDomGeometryCommit, from the package entry", () => {
         const url = String(input instanceof Request ? input.url : input);
         calls.urls.push(url);
         if (url.includes("/patch-element/")) calls.patches.push(JSON.parse(String(init?.body)));
-        const saved = { ok: true, changed: true, matched: true, content: "AFTER", version: "v2" };
+        const saved = {
+          ok: true,
+          changed: true,
+          matched: true,
+          path: "index.html",
+          content: "AFTER",
+          version: "v2",
+        };
         const body = url.includes("/files/") ? { content: SOURCE } : saved;
         const status = url.includes("/patch-element/") ? patchStatus : 200;
         return new Response(JSON.stringify(body), {
@@ -163,7 +170,10 @@ describe("useDomGeometryCommit, from the package entry", () => {
     const { element, recordEdit, hook, unmount } = renderHost();
 
     const card = makeSelection("card", element);
-    await expect(hook().commitPathOffset(card, { x: 130.5, y: 90 })).resolves.toEqual({ ok: true });
+    await expect(hook().commitPathOffset(card, { x: 130.5, y: 90 })).resolves.toEqual({
+      ok: true,
+      changed: true,
+    });
 
     expect(element.style.getPropertyValue("translate")).toBe("130.5px 90px");
     expect(calls.patches).toEqual([
@@ -185,7 +195,7 @@ describe("useDomGeometryCommit, from the package entry", () => {
 
     await expect(
       hook().commitBoxSize(makeSelection("card", element), { width: 300, height: 90 }),
-    ).resolves.toEqual({ ok: true });
+    ).resolves.toEqual({ ok: true, changed: true });
 
     expect(element.style.getPropertyValue("width")).toBe("300px");
     expect(calls.patches).toEqual([
@@ -247,7 +257,7 @@ describe("useDomGeometryCommit, from the package entry", () => {
         { x: 1, y: 2 },
         { plainTranslate: true },
       ),
-    ).resolves.toEqual({ ok: true });
+    ).resolves.toEqual({ ok: true, changed: true });
     expect(calls.patches).toHaveLength(1);
     unmount();
   });
@@ -396,7 +406,14 @@ describe("useDomGeometryCommit, one word of a staggered phrase", () => {
               headers: { "content-type": "application/json" },
             });
           }
-          return json({ ok: true, changed: true, matched: true, content: "AFTER", version: "v2" });
+          return json({
+            ok: true,
+            changed: true,
+            matched: true,
+            path: "index.html",
+            content: "AFTER",
+            version: "v2",
+          });
         }
         if (url.includes("/api/projects/p1/gsap-mutations/")) {
           calls.gsapMutations.push(JSON.parse(String(init?.body)));
@@ -426,6 +443,7 @@ describe("useDomGeometryCommit, one word of a staggered phrase", () => {
 
     await expect(hook().commitPathOffset(selection, { x: 40, y: 20 })).resolves.toEqual({
       ok: true,
+      changed: true,
     });
 
     expect(calls.gsapMutations).toHaveLength(0);
@@ -455,6 +473,7 @@ describe("useDomGeometryCommit, one word of a staggered phrase", () => {
     ]);
     await expect(hook().commitPathOffset(selection, { x: 40, y: 20 })).resolves.toEqual({
       ok: true,
+      changed: true,
     });
 
     expect(calls.patches).toHaveLength(2);

package/src/hooks/useDomGeometryCommit.ts

@@ -1,3 +1,4 @@
+import type { GeometryCommitResult } from "../utils/previewFeatureUsage";
 import type { RotationCommit } from "../components/editor/rotationDraft";
 import { useCallback, useMemo, useRef, useState } from "react";
 import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
@@ -67,7 +68,7 @@ export function useDomGeometryCommit({
 }: UseDomGeometryCommitOptions): DomGeometryCommits {
   const projectIdRef = useRef(projectId);
   projectIdRef.current = projectId;
-  const pending = useRef(new Set<Promise<void>>()).current;
+  const pending = useRef(new Set<Promise<GeometryCommitResult | undefined>>()).current;
   const editHistory = useMemo(() => ({ recordEdit }), [recordEdit]);
   const reload = useCallback(
     () => (reloadPreview ? reloadPreview() : iframeRef.current?.contentWindow?.location.reload()),
@@ -127,6 +128,7 @@ export function useDomGeometryCommit({
     domEditSelection: null,
     selectedGsapAnimations: NO_SELECTED_ANIMATIONS,
     gsapCommitMutation: gsap.commitMutation,
+    activeCompPath,
     previewIframeRef: iframeRef,
     showToast,
     bumpGsapCache,
@@ -142,7 +144,10 @@ export function useDomGeometryCommit({
     updateArcSegment: gsap.updateArcSegment,
   });
   const saved = useCallback(
-    async (commit: () => Promise<void>, restore = noop): Promise<DomEditCommitOutcome> => {
+    async (
+      commit: () => Promise<GeometryCommitResult | undefined>,
+      restore = noop,
+    ): Promise<DomEditCommitOutcome> => {
       const refusal = !projectIdRef.current
         ? "No project is open"
         : !isPreviewBooted(projectIdRef.current)
@@ -156,11 +161,10 @@ export function useDomGeometryCommit({
       const run = commit();
       pending.add(run);
       try {
-        await run;
+        return { ok: true, changed: (await run)?.changed === true };
       } finally {
         pending.delete(run);
       }
-      return { ok: true };
     },
     [pending, showToast],
   );

package/src/hooks/useDomGeometryCommits.test.tsx

@@ -305,6 +305,7 @@ describe("Reset after a plain move puts the author's translate back", () => {
       async (_selection, patches) => {
         project.history.push(project.file);
         project.file = patches.reduce((html, op) => applyPatch(html, "layer", op), project.file);
+        return undefined;
       },
     );
     const selection = { id: "layer", selector: "#layer", element } as unknown as DomEditSelection;

package/src/hooks/useDomGeometryCommits.ts

@@ -1,3 +1,4 @@
+import type { DomEditPersistOutcome } from "./domEditCommitTypes";
 import type { RotationCommit } from "../components/editor/rotationDraft";
 import { useCallback } from "react";
 import { getDomEditTargetKey, type DomEditSelection } from "../components/editor/domEditing";
@@ -39,7 +40,7 @@ export interface UseDomGeometryCommitsParams {
       skipRefresh?: boolean;
       deferRender?: boolean;
     },
-  ) => Promise<void>;
+  ) => Promise<DomEditPersistOutcome | undefined>;
   readOnlyPreview: boolean;
 }
 
@@ -73,7 +74,7 @@ export function useDomGeometryCommits({
       restore?: () => void,
       undoKey?: string,
     ) => {
-      if (readOnlyPreview) return Promise.resolve();
+      if (readOnlyPreview) return Promise.resolve(undefined);
       const element = selection.element;
       const beforeSize = captureStudioBoxSize(element);
       const beforeOffset = captureStudioPathOffset(element);

package/src/hooks/useDomSelection.test.ts

@@ -334,3 +334,29 @@ describe("useDomSelection", () => {
     harness.cleanup();
   });
 });
+
+it("reports unchanged marquee membership and one new additive member", () => {
+  const { harness, card, chip } = renderCardAndChip();
+  try {
+    act(() => harness.current().applyDomSelection(card));
+    let receipt!: ReturnType<ReturnType<typeof useDomSelection>["applyMarqueeSelection"]>;
+    act(() => {
+      receipt = harness.current().applyMarqueeSelection([chip], true);
+    });
+    expect(receipt).toEqual({ changed: true, count: 2 });
+    act(() => {
+      receipt = harness.current().applyMarqueeSelection([card, chip], true);
+    });
+    expect(receipt).toEqual({ changed: false, count: 2 });
+    act(() => {
+      receipt = harness.current().applyMarqueeSelection([], true);
+    });
+    expect(receipt).toEqual({ changed: false, count: 2 });
+    act(() => {
+      receipt = harness.current().applyMarqueeSelection([], false);
+    });
+    expect(receipt).toEqual({ changed: true, count: 0 });
+  } finally {
+    harness.cleanup();
+  }
+});

package/src/hooks/useDomSelection.ts

@@ -487,12 +487,13 @@ export function useDomSelection({
     // fallow-ignore-next-line complexity
     (selections: DomEditSelection[], additive: boolean) => {
       logSelect("marquee", { hits: selections.length, additive });
+      const current = domEditSelectionRef.current;
+      const currentGroup = domEditGroupSelectionsRef.current;
       if (selections.length === 0) {
+        const count = seedDomEditGroupWithSelection(currentGroup, current).length;
         if (!additive) applyDomSelection(null, { revealPanel: false });
-        return;
+        return { changed: !additive && count > 0, count: additive ? count : 0 };
       }
-      const current = domEditSelectionRef.current;
-      const currentGroup = domEditGroupSelectionsRef.current;
       let nextGroup: DomEditSelection[];
       if (additive) {
         nextGroup = seedDomEditGroupWithSelection(currentGroup, current);
@@ -507,11 +508,17 @@ export function useDomSelection({
         }
       }
       const nextSelection = additive && current ? current : selections[0];
+      const previous = seedDomEditGroupWithSelection(currentGroup, current);
+      const changed =
+        previous.length !== nextGroup.length ||
+        nextGroup.some((selection) => !domEditSelectionInGroup(previous, selection)) ||
+        !domEditSelectionsTargetSame(current, nextSelection);
       domEditSelectionRef.current = nextSelection;
       domEditGroupSelectionsRef.current = nextGroup;
       setDomEditSelection(nextSelection);
       setDomEditGroupSelections(nextGroup);
       announceTimelineSelection(nextGroup, nextSelection, true);
+      return { changed, count: nextGroup.length };
     },
     [applyDomSelection, announceTimelineSelection],
   );

package/src/hooks/useDomSelectionTypes.ts

@@ -3,6 +3,11 @@ import type { DomEditSelection } from "../components/editor/domEditing";
 import type { SelectElementOptions, TimelineElement } from "../player";
 import type { RightPanelTab } from "../utils/studioHelpers";
 
+export interface DomSelectionResult {
+  changed: boolean;
+  count: number;
+}
+
 export interface ApplyDomSelectionOptions {
   revealPanel?: boolean;
   additive?: boolean;
@@ -85,5 +90,5 @@ export interface UseDomSelectionReturn {
   handleTimelineElementSelect: (element: TimelineElement | null) => Promise<void>;
   refreshDomEditSelectionFromPreview: (selection: DomEditSelection) => Promise<void>;
   refreshDomEditGroupSelectionsFromPreview: (selections: DomEditSelection[]) => Promise<void>;
-  applyMarqueeSelection: (selections: DomEditSelection[], additive: boolean) => void;
+  applyMarqueeSelection: (selections: DomEditSelection[], additive: boolean) => DomSelectionResult;
 }

package/src/hooks/useEditHistoryActions.paint.test.tsx

@@ -4,7 +4,7 @@ import { createRoot } from "react-dom/client";
 import { mkdirSync, mkdtempSync, readFileSync, rmSync, writeFileSync } from "node:fs";
 import { tmpdir } from "node:os";
 import { join } from "node:path";
-import { afterEach, beforeEach, expect, it, vi } from "vitest";
+import { afterEach, beforeEach, expect, it, vi, type Mock } from "vitest";
 import {
   createStudioApi,
   openProjectHistory,
@@ -168,6 +168,20 @@ it("an undo pressed while a save is still running waits for the server instead o
   expect(s.box()).toBe("10px");
 });
 
+it("an undo waits for a save queued before its key, not one queued after", async () => {
+  const s = await studio();
+  await s.edit();
+  let land!: () => void;
+  void s.persistence().queueDomEditSave(() => new Promise<void>((resolve) => (land = resolve)));
+  await vi.waitFor(() => expect(land).toBeTypeOf("function"));
+
+  const undone = s.actions().undo();
+  void s.persistence().queueDomEditSave(() => new Promise<void>(() => {}));
+  land();
+  await act(() => undone);
+  expect(s.file()).toBe(BEFORE);
+});
+
 it("an undo after an outside write ends with the preview showing the file the server restored", async () => {
   const s = await studio();
   await s.edit();
@@ -202,10 +216,8 @@ function Nudge({ target, save }: { target: HTMLElement; save: () => Promise<void
   return null;
 }
 
-it("an undo pressed while a nudge waits for more keys never shows the move before it undone", async () => {
-  const s = await studio();
-  await s.edit();
-  resetNudgeKeys();
+/** A nudge save that waits for `finish()`, then writes and records the nudge as the real save does. */
+function queuedNudgeSave(s: Awaited<ReturnType<typeof studio>>) {
   let finish!: () => void;
   const save = vi.fn(async () => {
     await new Promise<void>((resolve) => (finish = resolve));
@@ -215,6 +227,24 @@ it("an undo pressed while a nudge waits for more keys never shows the move befor
       files: { "index.html": { before: AFTER, after: NUDGED } },
     });
   });
+  return { save, finish: () => finish() };
+}
+
+/** Mounts the nudge, presses ArrowRight once and waits for its save; returns the nudge's translate reader. */
+async function pressNudge(s: Awaited<ReturnType<typeof studio>>, save: Mock<() => Promise<void>>) {
+  s.mount(createElement(Nudge, { target: s.element("box"), save }));
+  act(() => {
+    window.dispatchEvent(new KeyboardEvent("keydown", { key: "ArrowRight", cancelable: true }));
+  });
+  await vi.waitFor(() => expect(save).toHaveBeenCalledTimes(1));
+  return () => s.element("box").style.getPropertyValue("translate");
+}
+
+it("an undo pressed while a nudge waits for more keys never shows the move before it undone", async () => {
+  const s = await studio();
+  await s.edit();
+  resetNudgeKeys();
+  const { save, finish } = queuedNudgeSave(s);
   s.mount(createElement(Nudge, { target: s.element("box"), save }));
   act(() => {
     window.dispatchEvent(new KeyboardEvent("keydown", { key: "ArrowRight", cancelable: true }));
@@ -240,21 +270,8 @@ it("an undo pressed while a nudge's save is queued shows the nudge undone in the
   const s = await studio();
   await s.edit();
   resetNudgeKeys();
-  let finish!: () => void;
-  const save = vi.fn(async () => {
-    await new Promise<void>((resolve) => (finish = resolve));
-    writeFileSync(s.path, NUDGED);
-    await s.history().recordEdit({
-      label: "Move layer",
-      files: { "index.html": { before: AFTER, after: NUDGED } },
-    });
-  });
-  s.mount(createElement(Nudge, { target: s.element("box"), save }));
-  act(() => {
-    window.dispatchEvent(new KeyboardEvent("keydown", { key: "ArrowRight", cancelable: true }));
-  });
-  await vi.waitFor(() => expect(save).toHaveBeenCalledTimes(1));
-  const nudge = () => s.element("box").style.getPropertyValue("translate");
+  const { save, finish } = queuedNudgeSave(s);
+  const nudge = await pressNudge(s, save);
   expect(nudge()).not.toBe("");
 
   const undone = s.actions().undo();
@@ -267,6 +284,51 @@ it("an undo pressed while a nudge's save is queued shows the nudge undone in the
   expect(s.box()).toBe("50px");
 });
 
+/** A nudge whose save is queued and then rejects, and the history requests the undo sends. */
+async function failingNudge(s: Awaited<ReturnType<typeof studio>>) {
+  resetNudgeKeys();
+  let fail!: () => void;
+  const save = vi.fn(
+    () => new Promise<void>((_, reject) => (fail = () => reject(new Error("The save failed.")))),
+  );
+  const nudge = await pressNudge(s, save);
+  const steps: string[] = [];
+  const real = globalThis.fetch;
+  vi.stubGlobal("fetch", (url: string, init?: RequestInit) => {
+    if (/\/history\/(step|undo)$/.test(url)) steps.push(url);
+    return real(url, init);
+  });
+  return { fail: () => fail(), steps, nudge };
+}
+
+it("an undo pressed while a nudge's save fails keeps the nudge undone and steps no older edit", async () => {
+  const s = await studio();
+  await s.edit();
+  const n = await failingNudge(s);
+  expect(n.nudge()).not.toBe("");
+
+  const undone = s.actions().undo();
+  expect(n.nudge()).toBe("");
+  n.fail();
+  await act(() => undone);
+  expect(n.steps).toEqual([]);
+  expect(s.file()).toBe(AFTER);
+  expect(s.box()).toBe("50px");
+  expect(n.nudge()).toBe("");
+});
+
+it("an undo pressed while the only edit's save fails leaves the screen as the file, nothing put back", async () => {
+  const s = await studio();
+  s.show(BEFORE);
+  const n = await failingNudge(s);
+
+  const undone = s.actions().undo();
+  n.fail();
+  await act(() => undone);
+  expect(s.file()).toBe(BEFORE);
+  expect(n.nudge()).toBe("");
+});
+
 it("an undo pressed while a queued save fails undoes the edit before it, file and box alike", async () => {
   const s = await studio();
   await s.edit();

package/src/hooks/useEditHistoryActions.test.tsx

@@ -5,6 +5,7 @@ import { createRoot, type Root } from "react-dom/client";
 import { afterEach, describe, expect, it, vi } from "vitest";
 import { STUDIO_MOTION_PATH } from "../components/editor/studioMotion";
 import { useEditHistoryActions, type EditHistoryHandle } from "./useEditHistoryActions";
+import { trackStudioPendingEdit } from "../utils/studioPendingEdits";
 
 (globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
 
@@ -30,6 +31,7 @@ function mount(
     undo: vi.fn<EditHistoryHandle["undo"]>(async () => result),
     redo: vi.fn<EditHistoryHandle["redo"]>(async () => result),
     predict: () => predicted ?? null,
+    claims: () => 7,
   };
   const putBack = vi.fn();
   const deps = {
@@ -60,6 +62,19 @@ const PREDICTED = { id: "e1", files: { "index.html": { previous: "B", restored:
 const SERVER_FILES = { "index.html": { previous: "B", restored: "A2" } };
 
 describe("useEditHistoryActions", () => {
+  it("asks for the edit claimed after the key's claim count only when an edit was saving at the key", async () => {
+    const { deps, actions } = mount({ ok: false, reason: "empty" });
+    await act(() => actions.undo());
+    expect(deps.editHistory.undo.mock.calls[0]![0].claimedAfter).toBeUndefined();
+
+    let land!: () => void;
+    trackStudioPendingEdit(new Promise<void>((resolve) => (land = resolve)));
+    const undone = actions.undo();
+    land();
+    await act(() => undone);
+    expect(deps.editHistory.undo.mock.calls[1]![0].claimedAfter).toBe(7);
+  });
+
   it("corrects a shown step from the server's restore, diffed from what the preview shows", async () => {
     const { deps, actions } = mount(
       { ok: true, label: "Undid: Move", paths: ["index.html"], undoes: "e1", files: SERVER_FILES },

package/src/hooks/useEditHistoryActions.ts

@@ -3,7 +3,10 @@ import { useCallback, useMemo } from "react";
 import { STUDIO_MOTION_PATH } from "../components/editor/studioMotion";
 import { serializeStudioFileMutations } from "../utils/studioFileMutationCoordinator";
 import type { RestoreFiles } from "../utils/gsapUndoRestore";
-import { revertNewestStudioPendingEdit } from "../utils/studioPendingEdits";
+import {
+  hasStudioPendingEdits,
+  paintBackNewestStudioPendingEdit,
+} from "../utils/studioPendingEdits";
 
 interface HistoryResult {
   ok: boolean;
@@ -18,11 +21,13 @@ interface HistoryResult {
 interface HistoryFileCallbacks {
   readFile: (path: string) => Promise<string>;
   serialize?: <T>(paths: readonly string[], task: () => Promise<T>) => Promise<T>;
+  claimedAfter?: number;
 }
 export interface EditHistoryHandle {
   undo: (cb: HistoryFileCallbacks) => Promise<HistoryResult>;
   redo: (cb: HistoryFileCallbacks) => Promise<HistoryResult>;
   predict?: (direction: "undo" | "redo") => { id: string; files: RestoreFiles } | null;
+  claims?: () => number;
   state: {
     undo: ReadonlyArray<{ createdAt: number }>;
     redo: ReadonlyArray<{ createdAt: number }>;
@@ -30,7 +35,7 @@ export interface EditHistoryHandle {
 }
 
 export interface UseEditHistoryActionsOptions {
-  editHistory: Pick<EditHistoryHandle, "undo" | "redo" | "predict">;
+  editHistory: Pick<EditHistoryHandle, "undo" | "redo" | "predict" | "claims">;
   readOptionalProjectFile: (path: string) => Promise<string>;
   readProjectFile: (path: string) => Promise<string>;
   writeProjectFile: (path: string, content: string) => Promise<void>;
@@ -77,22 +82,28 @@ export function useEditHistoryActions({
       const predicted = editHistory.predict?.(direction) ?? null;
       const predictedShown = predicted ? (showHistoryRestoreNow?.(predicted.files) ?? null) : null;
       const pendingEditShown =
-        !predictedShown && direction === "undo" ? revertNewestStudioPendingEdit() : null;
-      const putBack = predictedShown ?? pendingEditShown;
+        !predictedShown && direction === "undo" ? paintBackNewestStudioPendingEdit() : null;
+      const putBack = predictedShown ?? pendingEditShown?.showAgain;
+      const claimedAfter =
+        direction === "undo" && hasStudioPendingEdits() ? editHistory.claims?.() : undefined;
       let result: HistoryResult = { ok: false, reason: "failed" };
       let serverSteppedShown = false;
+      let revertIsTheUndo = false;
       try {
         await waitForPendingDomEditSaves();
+        revertIsTheUndo = Boolean(pendingEditShown && !(await pendingEditShown.landed()));
+        if (revertIsTheUndo) return;
         result = await editHistory[direction]({
           readFile: readHistoryFile,
           serialize: serializeHistoryFiles,
+          claimedAfter,
         });
         const stepped = Boolean(result.ok && result.label);
         serverSteppedShown = predictedShown
           ? stepped && result.undoes === predicted?.id
           : stepped && Boolean(pendingEditShown);
       } finally {
-        if (putBack && !serverSteppedShown) putBack();
+        if (putBack && !serverSteppedShown && !revertIsTheUndo) putBack();
       }
       if (!result.ok && result.reason === "content-mismatch") {
         showToast(

package/src/hooks/useElementLifecycleOps.ts

@@ -24,6 +24,7 @@ import type { CommitDomEditPatchBatches, DomEditPatchBatch } from "./domEditComm
 import { domEditCommitDeclined, type DomEditCommitOutcome } from "./domEditCommitRunner";
 import { cutoverCommittedOrThrow, type CutoverResult } from "../utils/sdkCutover";
 import { studioWriteHeaders } from "../utils/studioFileVersion";
+import { studioApiFetch } from "../utils/studioApiFetch";
 
 interface UseElementLifecycleOpsParams extends DomEditCommitBaseParams {
   /** Route delete through SDK when session resolves the hf-id. */
@@ -156,7 +157,7 @@ export function useElementLifecycleOps({
           writeFile: writeProjectFile,
           recordEdit: editHistory.recordEdit,
           rewrite: async (originalContent) => {
-            const removeResponse = await fetch(
+            const removeResponse = await studioApiFetch(
               buildProjectApiPath(
                 pid,
                 `/file-mutations/remove-elements/${encodeURIComponent(targetPath)}`,

package/src/hooks/useEnableKeyframes.test.ts

@@ -314,7 +314,7 @@ describe("applyArcKeyframeAtPlayhead", () => {
         ],
         ease: "none",
       },
-      { label: "Add keyframe", softReload: true },
+      { label: "Add keyframe", softReload: true, keyframeAction: "add" },
     );
   });
 
@@ -336,7 +336,7 @@ describe("applyArcKeyframeAtPlayhead", () => {
         duration: 10,
         keyframes: expect.arrayContaining([{ percentage: 25, properties: { x: 25, y: 25 } }]),
       }),
-      { label: "Add keyframe", softReload: true },
+      { label: "Add keyframe", softReload: true, keyframeAction: "add" },
     );
   });
 });
@@ -378,7 +378,10 @@ function makeElementSelection(): DomEditSelection {
   } as DomEditSelection;
 }
 
-function stubFlatTweenConversion(id: string): {
+function stubFlatTweenConversion(
+  id: string,
+  easeEach?: string,
+): {
   flat: GsapAnimation;
   converted: GsapAnimation;
 } {
@@ -393,6 +396,7 @@ function stubFlatTweenConversion(id: string): {
         { percentage: 0, properties: { x: 0 } },
         { percentage: 100, properties: { x: 10 } },
       ],
+      ...(easeEach && { easeEach }),
     },
   });
   flatTweenResponses(flat, converted);
@@ -437,6 +441,33 @@ describe("useEnableKeyframes — flat tween transaction", () => {
     expect(convertOptions?.coalesceKey).toEqual(expect.any(String));
   });
 
+  it("keeps the converted tween's easeEach when it extends it to the playhead", async () => {
+    window.location.hash = "#/project/test-project";
+    usePlayerStore.setState({ currentTime: 3 });
+    const { flat } = stubFlatTweenConversion("flat-1", "none");
+    const commitMutation = vi.fn(async () => undefined);
+    const enable = renderEnableKeyframes({
+      domEditSelection: makeElementSelection(),
+      selectedGsapAnimations: [flat],
+      previewIframeRef: {
+        current: {
+          contentWindow: { gsap: { getProperty: () => 10 } },
+        } as unknown as HTMLIFrameElement,
+      },
+      handleGsapAddAnimation: vi.fn(),
+      handleGsapConvertToKeyframes: vi.fn(async () => undefined),
+      handleGsapRemoveKeyframe: vi.fn(),
+      commitMutation,
+    });
+
+    await act(async () => enable());
+
+    expect(commitMutation.mock.calls[0]?.[0]).toMatchObject({
+      type: "replace-with-keyframes",
+      easeEach: "none",
+    });
+  });
+
   it("passes the convert coalesce key to an inside-range batch edit", async () => {
     window.location.hash = "#/project/test-project";
     usePlayerStore.setState({ currentTime: 1.5 });

package/src/hooks/useEnableKeyframes.ts

@@ -15,6 +15,7 @@ import { fetchParsedAnimations, getAnimationsForElement } from "./useGsapTweenCa
 import {
   existingTweenTargetSelector,
   computeElementPercentage,
+  keyframeEases,
   KEYFRAME_PCT_MATCH,
   isInstantHold,
   resolveEditableTweenDuration,
@@ -159,7 +160,7 @@ async function replaceSetWithSingleKeyframe(
       keyframes: [{ percentage: 0, properties: position }],
       ease: setAnim.ease,
     },
-    { label: "Enable keyframes", softReload: true },
+    { label: "Enable keyframes", keyframeAction: "add", softReload: true },
   );
 }
 
@@ -266,10 +267,11 @@ async function extendKeyframedTweenToPlayhead(
       position: extended.position,
       duration: extended.duration,
       keyframes: extended.keyframes,
-      ease: anim.ease,
+      ...keyframeEases(anim),
     },
     {
       label: "Add keyframe",
+      keyframeAction: "add",
       softReload: true,
       ...commitOverrides,
     },
@@ -377,7 +379,7 @@ export async function promoteSetToKeyframes(
       ],
       ease: setAnim.ease,
     },
-    { label: "Add keyframe", softReload: true },
+    { label: "Add keyframe", keyframeAction: "add", softReload: true },
   );
 }
 
@@ -454,7 +456,7 @@ export async function applyArcKeyframeAtPlayhead(
       }),
       ease: "none",
     },
-    { label: "Add keyframe", softReload: true },
+    { label: "Add keyframe", keyframeAction: "add", softReload: true },
   );
 }
 
@@ -503,6 +505,7 @@ export function useEnableKeyframes(
       enableKeyframesTransactionCounter += 1;
       const coalesceKey = `enable-keyframes:${flatAnim.id}:${enableKeyframesTransactionCounter}`;
       const convertCommitOverrides: Partial<CommitMutationOptions> = {
+        keyframeTelemetry: false,
         skipReload: true,
         coalesceKey,
         coalesceMs: Number.POSITIVE_INFINITY,