@hyperframes/studio 0.7.90 → 0.7.92

package/src/components/editor/propertyPanelFlatMotionSection.tsx

@@ -1,20 +1,13 @@
 import { scopedElementKey } from "../../hooks/gsapKeyframeCacheHelpers";
-import { useState } from "react";
 import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
 import { useTrackDesignInput } from "../../contexts/DesignPanelInputContext";
 import type { DomEditSelection } from "./domEditing";
 import { formatTimingValue, RESPONSIVE_GRID } from "./propertyPanelHelpers";
 import { parseTimingValue } from "./propertyPanelTimingSection";
 import { CommitField } from "./propertyPanelPrimitives";
-import { AnimationCard } from "./AnimationCard";
-import {
-  type GsapAnimationEditCallbacks,
-  withTrackedGsapAnimationCallbacks,
-  clearFocusedEaseSegment,
-} from "./gsapAnimationCallbacks";
+import type { GsapAnimationEditCallbacks } from "./gsapAnimationCallbacks";
 import { deriveElementTiming } from "./propertyPanelFlatTimingDerivation";
-import { usePlayerStore } from "../../player";
-import { GsapAddAnimationControl } from "./GsapAddAnimationControl";
+import { GsapAnimationList } from "./GsapAnimationList";
 
 export function FlatTimingRow({
   element,
@@ -136,19 +129,11 @@ export function FlatMotionSection({
   onSetAttributes?: (selection: DomEditSelection, attrs: Record<string, string>) => Promise<void>;
   onAddAnimation: (method: "to" | "from" | "set" | "fromTo") => void;
 } & GsapAnimationEditCallbacks) {
-  const track = useTrackDesignInput();
-  const [addMenuOpen, setAddMenuOpen] = useState(false);
-  const trackedCallbacks = withTrackedGsapAnimationCallbacks(callbacks, track);
-  const focusedEaseSegment = usePlayerStore((s) => s.focusedEaseSegment);
   // Only consume a focus request aimed at the element THIS panel renders (not
   // the store's selectedElementId, which flips synchronously during async
   // selection resolution), so a shared class-selector animation id can't open
   // the wrong element's editor.
   const renderedElementId = scopedElementKey(element);
-  const focusedHere =
-    focusedEaseSegment && focusedEaseSegment.elementId === renderedElementId
-      ? focusedEaseSegment
-      : null;
 
   return (
     <div className="space-y-3">
@@ -174,26 +159,13 @@ export function FlatMotionSection({
             </p>
           )}
           {!multipleTimelines && !unsupportedTimelinePattern && (
-            <div className="space-y-2">
-              {animations.map((anim, index) => (
-                <AnimationCard
-                  {...trackedCallbacks}
-                  key={anim.id}
-                  animation={anim}
-                  defaultExpanded={index === 0}
-                  flat
-                  focusedSegment={focusedHere?.animationId === anim.id ? focusedHere : null}
-                  onFocusSegmentConsumed={clearFocusedEaseSegment}
-                />
-              ))}
-              <GsapAddAnimationControl
-                open={addMenuOpen}
-                setOpen={setAddMenuOpen}
-                onAddAnimation={onAddAnimation}
-                track={track}
-                variant="flat"
-              />
-            </div>
+            <GsapAnimationList
+              {...callbacks}
+              elementId={renderedElementId}
+              animations={animations}
+              onAddAnimation={onAddAnimation}
+              variant="flat"
+            />
           )}
         </>
       )}

package/src/components/editor/propertyPanelTypes.ts

@@ -123,8 +123,8 @@ export interface PropertyPanelProps {
   ) => void;
   onRemoveKeyframe?: (animationId: string, percentage: number) => void;
   onUpdateKeyframeEase?: (animationId: string, percentage: number, ease: string) => void;
-  onSetAllKeyframeEases?: (animationId: string, ease: string) => void;
   onUpdateSegmentEase?: NonNullable<GsapAnimationEditCallbacks["onUpdateSegmentEase"]>;
+  onSetAllKeyframeEases?: (animationId: string, ease: string) => void;
   onConvertToKeyframes?: (animationId: string, duration?: number) => void;
   onCommitAnimatedProperty?: (
     selection: DomEditSelection,

package/src/components/nle/useTimelineEditCallbacks.test.tsx

@@ -317,17 +317,44 @@ describe("useTimelineEditCallbacks — flat tween keyframe lanes", () => {
   });
 
   it("deletes all keyframes through the clicked non-selected element's identity", async () => {
-    const { circle, selection } = arrangeClickedCircle();
+    const circle: TimelineElement = {
+      ...element,
+      id: "circle",
+      key: "scenes/main.html#circle",
+      domId: "circle",
+      sourceFile: "scenes/main.html",
+    };
+    const circleSelection = { id: "circle", selector: "#circle", sourceFile: "scenes/main.html" };
+    const scaleAnimation: GsapAnimation = {
+      ...otherKeyframedAnimation,
+      id: "circle-to-0-scale",
+      properties: {},
+      propertyGroup: "scale",
+      keyframes: {
+        format: "percentage",
+        keyframes: [
+          { percentage: 0, properties: { scale: 1 } },
+          { percentage: 100, properties: { scale: 2 } },
+        ],
+      },
+    };
+    usePlayerStore.setState({
+      elements: [element, circle],
+      gsapAnimations: new Map([
+        ["scenes/main.html#circle", [otherKeyframedAnimation, scaleAnimation]],
+      ]),
+    });
+    mocks.actions.buildDomSelectionForTimelineElement.mockResolvedValue(circleSelection);
     const view = renderCallbacks();
 
     await act(async () => {
-      view.callbacks.onDeleteAllKeyframes?.(circle);
+      view.callbacks.onDeleteAllKeyframes?.(circle, scaleAnimation.id);
       await Promise.resolve();
     });
 
     expect(mocks.actions.handleGsapRemoveAllKeyframes).toHaveBeenCalledWith(
-      otherKeyframedAnimation.id,
-      selection,
+      scaleAnimation.id,
+      circleSelection,
     );
     view.unmount();
   });
@@ -360,6 +387,19 @@ describe("useTimelineEditCallbacks — flat tween keyframe lanes", () => {
     view.unmount();
   });
 
+  it("does not delete a different lane when an explicit animation identity is stale", async () => {
+    const { circle } = arrangeClickedCircle();
+    const view = renderCallbacks();
+
+    await act(async () => {
+      view.callbacks.onDeleteAllKeyframes?.(circle, "missing-animation-id");
+      await Promise.resolve();
+    });
+
+    expect(mocks.actions.handleGsapRemoveAllKeyframes).not.toHaveBeenCalled();
+    view.unmount();
+  });
+
   it("aborts every mutation when the clicked element resolves no selection", async () => {
     const { circle } = arrangeClickedCircle();
     mocks.actions.buildDomSelectionForTimelineElement.mockResolvedValue(null);
@@ -391,6 +431,40 @@ describe("useTimelineEditCallbacks — flat tween keyframe lanes", () => {
     view.unmount();
   });
 
+  it("does not delete a different keyframe when its explicit animation identity is stale", () => {
+    const view = renderCallbacks();
+
+    act(() => {
+      view.callbacks.onDeleteKeyframe?.("box", {
+        percentage: 100,
+        propertyGroup: "position",
+        tweenPercentage: 100,
+        animationId: "missing-animation-id",
+      });
+    });
+
+    expect(mocks.actions.handleGsapDeleteAnimation).not.toHaveBeenCalled();
+    expect(mocks.actions.handleGsapRemoveKeyframe).not.toHaveBeenCalled();
+    view.unmount();
+  });
+
+  it("does not move a different keyframe when its explicit animation identity is stale", async () => {
+    const view = renderCallbacks();
+
+    await act(async () => {
+      view.callbacks.onMoveKeyframeToPlayhead?.(element, {
+        percentage: 100,
+        propertyGroup: "position",
+        tweenPercentage: 100,
+        animationId: "missing-animation-id",
+      });
+      await Promise.resolve();
+    });
+
+    expect(mocks.actions.handleGsapMoveKeyframeToPlayhead).not.toHaveBeenCalled();
+    view.unmount();
+  });
+
   it("moves a keyframe to the playhead through the clicked non-selected element's identity", async () => {
     const { circle, selection } = arrangeClickedCircle();
     const view = renderCallbacks();

package/src/components/nle/useTimelineEditCallbacks.ts

@@ -189,17 +189,22 @@ export function useTimelineEditCallbacks({
       onSplitElement: handleTimelineElementSplit,
       onRazorSplit: handleRazorSplit,
       onRazorSplitAll: handleRazorSplitAll,
-      onDeleteAllKeyframes: (element) => {
+      onDeleteAllKeyframes: (element, animationId) => {
         // Hold the element where it is (collapse keyframes to a static set) rather
         // than deleting the whole animation — deleting strands a stale GSAP base
         // that the next drag adds to, flinging the element off-screen.
         const elementKey = getTimelineElementIdentity(element);
-        // Every keyframed tween on the layer, not just the first: a layer with
-        // position AND opacity keyframes left the second one keyframed, so
-        // "Delete All Keyframes" visibly did half the job.
-        const anims = resolveElementAnimations(elementKey).filter(
-          (animation) => animation.keyframes,
-        );
+        // An explicit animation id scopes the delete to the lane whose menu was
+        // opened; without one this is the layer-wide action, and that means
+        // EVERY keyframed tween, not just the first. A layer with position AND
+        // opacity keyframes used to leave the second one keyframed, so "Delete
+        // All Keyframes" visibly did half the job. A stale id matches nothing
+        // and deletes nothing, which is the point: it never falls back to a
+        // lane the user did not click.
+        const animations = resolveElementAnimations(elementKey);
+        const anims = animationId
+          ? animations.filter((animation) => animation.id === animationId)
+          : animations.filter((animation) => animation.keyframes);
         if (anims.length === 0) return;
         void buildDomSelectionForTimelineElement(element).then(async (selection) => {
           if (!selection) return;

package/src/components/renders/useRenderQueue.ts

@@ -2,6 +2,7 @@ import { useState, useEffect, useCallback, useRef, useMemo } from "react";
 import type { CanvasResolution } from "@hyperframes/parsers";
 import { trackStudioRenderStart } from "../../telemetry/events";
 import { getAnonymousId } from "../../telemetry/config";
+import { browserTelemetryAllowed } from "../../telemetry/policy";
 import { generateId } from "../../utils/generateId";
 
 export interface RenderJob {
@@ -157,16 +158,28 @@ export function useRenderQueue(projectId: string | null) {
         resolution?: string;
         composition?: string;
         variables?: Record<string, unknown>;
-        telemetryDistinctId: string;
+        telemetryDistinctId?: string;
+        telemetryOptOut?: boolean;
       } = {
         fps,
         quality,
         format,
+      };
+      // The id is MINTED by getAnonymousId(), so calling it unconditionally
+      // created a telemetry identity for a profile that had opted out — and
+      // then shipped it to the server. The server's own policy cannot see this
+      // browser's localStorage or DoNotTrack, so it has to be told: an
+      // explicit `telemetryOptOut` suppresses the render outcome, which
+      // omitting the id alone does NOT (an old client omits it too, and that
+      // falls back to the install id).
+      if (browserTelemetryAllowed()) {
         // So the server-emitted render_complete/render_error is attributed to
         // this browser user (same id studio_* events use), making the render
         // funnel joinable. Matches studio_render_start fired just above.
-        telemetryDistinctId: getAnonymousId(),
-      };
+        body.telemetryDistinctId = getAnonymousId();
+      } else {
+        body.telemetryOptOut = true;
+      }
       if (resolution && resolution !== "auto") body.resolution = resolution;
       if (composition) body.composition = composition;
       if (opts.variables && Object.keys(opts.variables).length > 0) {

package/src/components/renders/useRenderQueueTelemetry.test.tsx

@@ -0,0 +1,104 @@
+// @vitest-environment happy-dom
+
+// The render request body is the only place the browser can tell the CLI that
+// this profile opted out. The CLI's own policy cannot see localStorage or
+// DoNotTrack in someone else's browser, so if the body says nothing, the
+// server emits render_complete / render_error anyway — attributed to the
+// install id rather than the user's, which is worse than attributing it
+// correctly.
+
+import { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+const policyState = { allowed: true };
+const mintCalls = vi.fn(() => "browser-user-123");
+
+vi.mock("../../telemetry/policy", () => ({
+  browserTelemetryAllowed: () => policyState.allowed,
+}));
+vi.mock("../../telemetry/config", () => ({
+  getAnonymousId: () => mintCalls(),
+}));
+vi.mock("../../telemetry/events", () => ({
+  trackStudioRenderStart: vi.fn(),
+}));
+
+const { useRenderQueue } = await import("./useRenderQueue");
+
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
+
+let root: Root | null = null;
+
+/** Body of the POST the hook makes when a render is started. */
+async function startRenderBody(): Promise<Record<string, unknown>> {
+  const fetchMock = vi.fn(async (_url: string, _init?: RequestInit) =>
+    Promise.resolve(
+      new Response(JSON.stringify({ jobId: "j1", status: "rendering" }), {
+        status: 200,
+        headers: { "content-type": "application/json" },
+      }),
+    ),
+  );
+  vi.stubGlobal("fetch", fetchMock);
+  vi.stubGlobal(
+    "EventSource",
+    class {
+      close(): void {}
+      addEventListener(): void {}
+    },
+  );
+
+  let api: ReturnType<typeof useRenderQueue> | null = null;
+  function Harness(): null {
+    api = useRenderQueue("demo");
+    return null;
+  }
+  const host = document.createElement("div");
+  document.body.append(host);
+  root = createRoot(host);
+  act(() => {
+    root?.render(<Harness />);
+  });
+  await act(async () => {
+    await api?.startRender({ fps: 30, quality: "standard", format: "mp4" });
+  });
+
+  const post = fetchMock.mock.calls.find(([, init]) => init?.method === "POST");
+  const body = post?.[1]?.body;
+  if (body === undefined || body === null) throw new Error("hook made no POST with a body");
+  return JSON.parse(String(body)) as Record<string, unknown>;
+}
+
+beforeEach(() => {
+  policyState.allowed = true;
+  mintCalls.mockClear();
+});
+
+afterEach(() => {
+  if (root) act(() => root?.unmount());
+  root = null;
+  document.body.innerHTML = "";
+  vi.unstubAllGlobals();
+});
+
+describe("render request telemetry fields", () => {
+  it("sends the browser id when this profile allows telemetry", async () => {
+    const body = await startRenderBody();
+    expect(body["telemetryDistinctId"]).toBe("browser-user-123");
+    expect(body["telemetryOptOut"]).toBeUndefined();
+  });
+
+  it("mints no id and says so explicitly when the profile opted out", async () => {
+    policyState.allowed = false;
+    const body = await startRenderBody();
+    // Minting is itself the leak: getAnonymousId() CREATES and persists an
+    // identity, so calling it for an opted-out profile is wrong even if the
+    // value were never sent.
+    expect(mintCalls).not.toHaveBeenCalled();
+    expect(body["telemetryDistinctId"]).toBeUndefined();
+    // Omission alone would be read as an old client and fall back to the
+    // install id — the flag is what actually suppresses the server event.
+    expect(body["telemetryOptOut"]).toBe(true);
+  });
+});

package/src/contexts/DomEditContext.tsx

@@ -200,8 +200,8 @@ export function DomEditProvider({
     commitMutation,
     applyMarqueeSelection,
     handleUpdateKeyframeEase,
-    handleSetAllKeyframeEases,
     handleUpdateSegmentEase,
+    handleSetAllKeyframeEases,
   },
   children,
 }: {

package/src/hooks/useDomEditSession.test.tsx

@@ -57,9 +57,9 @@ const recordResolverParity = vi.fn<(...args: unknown[]) => Promise<void>>(async
 const capturedOnReorderShadow: { fn: ((targets: string[]) => void) | undefined } = {
   fn: undefined,
 };
-
 const domEditSelectionRef: { current: DomEditSelection | null } = { current: null };
 const gsapCommitMutation = Object.assign(vi.fn(), { batch: vi.fn() });
+
 vi.mock("../utils/sdkResolverShadow", () => ({
   runResolverShadow: vi.fn(),
   recordResolverParity: (...args: unknown[]) => recordResolverParity(...args),

package/src/hooks/useDomEditSession.ts

@@ -537,11 +537,11 @@ export function useDomEditSession({
     handleGsapRemoveAllKeyframes,
     handleResetSelectedElementKeyframes,
     handleUpdateKeyframeEase,
+    handleUpdateSegmentEase,
     handleSetAllKeyframeEases,
     commitAnimatedProperty,
     commitAnimatedProperties,
     handleSetArcPath,
-    handleUpdateSegmentEase,
     handleUpdateArcSegment,
     handleUnroll,
     invalidateGsapCache: bumpGsapCache,

package/src/hooks/useGsapKeyframeOps.test.tsx

@@ -7,9 +7,20 @@ import { afterEach, describe, expect, it, vi } from "vitest";
 (globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
 
 import type { DomEditSelection } from "../components/editor/domEditingTypes";
+import type { KeyframeCacheEntry } from "../player/store/playerStore";
+import { usePlayerStore } from "../player/store/playerStore";
 import { useGsapKeyframeOps } from "./useGsapKeyframeOps";
 
 type HookApi = ReturnType<typeof useGsapKeyframeOps>;
+type CommitResult = { ok: boolean; changed: boolean };
+type CommitOptions = { onResult?: (result: CommitResult) => void };
+type CommitCall = [selection: unknown, mutation: unknown, options: CommitOptions];
+
+function readCommitOptions(args: unknown[]): CommitOptions {
+  // The hook accepts the production writer type; these test doubles expose only
+  // the third tuple member they exercise.
+  return (args as unknown as CommitCall)[2];
+}
 
 let cleanup: (() => void) | null = null;
 afterEach(() => {
@@ -21,15 +32,14 @@ const selection: DomEditSelection = { id: "box", selector: "#box" } as DomEditSe
 
 function successfulCommitMutation() {
   return vi.fn<(...args: unknown[]) => Promise<unknown>>(async (...args) => {
-    const options = args[2] as {
-      onResult?: (result: { ok: boolean; changed: boolean }) => void;
-    };
+    const options = readCommitOptions(args);
     options.onResult?.({ ok: true, changed: true });
   });
 }
 
 function renderKeyframeOps(over: {
   commitMutation: (...args: unknown[]) => Promise<unknown>;
+  commitMutationSafely?: (...args: unknown[]) => Promise<void>;
   trackGsapSaveFailure: (...args: unknown[]) => void;
 }) {
   const captured: { api: HookApi | null } = { api: null };
@@ -41,7 +51,7 @@ function renderKeyframeOps(over: {
       // eslint-disable-next-line @typescript-eslint/no-explicit-any -- test doubles
       commitMutation: over.commitMutation as any,
       // eslint-disable-next-line @typescript-eslint/no-explicit-any -- test doubles
-      commitMutationSafely: (() => {}) as any,
+      commitMutationSafely: (over.commitMutationSafely ?? (async () => {})) as any,
       // eslint-disable-next-line @typescript-eslint/no-explicit-any -- test doubles
       trackGsapSaveFailure: over.trackGsapSaveFailure as any,
       sdkSession: null,
@@ -135,7 +145,7 @@ describe("useGsapKeyframeOps — moveKeyframe settlement", () => {
 
   it("returns false when the writer accepts but does not change the keyframe", async () => {
     const commitMutation = vi.fn(async (...args: unknown[]) => {
-      const options = args[2] as { onResult?: (result: { ok: boolean; changed: boolean }) => void };
+      const options = readCommitOptions(args);
       options.onResult?.({ ok: true, changed: false });
     });
     const { committed, trackGsapSaveFailure } = await moveKeyframeWith(commitMutation);
@@ -203,6 +213,74 @@ describe("useGsapKeyframeOps — keyframe transaction options", () => {
     );
   });
 
+  it("clears delete-all cache only when persistence confirms the change", async () => {
+    let finishCommit: (() => void) | undefined;
+    const commitMutationSafely = vi.fn(
+      (...args: unknown[]) =>
+        new Promise<void>((resolve) => {
+          const options = readCommitOptions(args);
+          finishCommit = () => {
+            options.onResult?.({ ok: true, changed: true });
+            resolve();
+          };
+        }),
+    );
+    const api = renderKeyframeOps({
+      commitMutation: successfulCommitMutation(),
+      commitMutationSafely,
+      trackGsapSaveFailure: vi.fn(),
+    });
+    const cached: KeyframeCacheEntry = {
+      format: "percentage",
+      keyframes: [
+        { percentage: 0, properties: { x: 0 } },
+        { percentage: 100, properties: { x: 200 } },
+      ],
+    };
+    usePlayerStore.setState({ keyframeCache: new Map([["index.html#box", cached]]) });
+
+    const pending = api.removeAllKeyframes(selection, "box-to-0-position");
+    expect(commitMutationSafely).toHaveBeenCalledWith(
+      selection,
+      { type: "remove-all-keyframes", animationId: "box-to-0-position" },
+      expect.objectContaining({ label: "Remove all keyframes", softReload: true }),
+    );
+    expect(usePlayerStore.getState().keyframeCache.get("index.html#box")).toBe(cached);
+
+    finishCommit?.();
+    await pending;
+    expect(usePlayerStore.getState().keyframeCache.has("index.html#box")).toBe(false);
+  });
+
+  it("clears the live DOM identity for a selector-only selection", async () => {
+    const element = document.createElement("div");
+    element.id = "box";
+    const selectorOnlySelection: DomEditSelection = {
+      ...selection,
+      id: undefined,
+      selector: ".box",
+      element,
+    };
+    const commitMutationSafely = vi.fn(async (...args: unknown[]) => {
+      const options = readCommitOptions(args);
+      options.onResult?.({ ok: true, changed: true });
+    });
+    const api = renderKeyframeOps({
+      commitMutation: successfulCommitMutation(),
+      commitMutationSafely,
+      trackGsapSaveFailure: vi.fn(),
+    });
+    const cached: KeyframeCacheEntry = {
+      format: "percentage",
+      keyframes: [{ percentage: 0, properties: { x: 0 } }],
+    };
+    usePlayerStore.setState({ keyframeCache: new Map([["index.html#box", cached]]) });
+
+    await api.removeAllKeyframes(selectorOnlySelection, "box-to-0-position");
+
+    expect(usePlayerStore.getState().keyframeCache.has("index.html#box")).toBe(false);
+  });
+
   it("threads one coalesce key through skipped convert reload and terminal batch edit", async () => {
     const commitMutation = successfulCommitMutation();
     const api = renderKeyframeOps({ commitMutation, trackGsapSaveFailure: vi.fn() });

package/src/hooks/useGsapKeyframeOps.ts

@@ -15,7 +15,6 @@ import {
 } from "../utils/sdkCutover";
 import type { KeyframeCacheEntry } from "../player/store/playerStore";
 import { commitKeyframeAtTimeImpl } from "./gsapKeyframeCommit";
-import { idFromSelector } from "./gsapShared";
 import {
   clearKeyframeCacheForElement,
   readKeyframeSnapshot,
@@ -336,11 +335,9 @@ export function useGsapKeyframeOps({
   const removeAllKeyframes = useCallback(
     async (selection: DomEditSelection, animationId: string) => {
       const targetPath = selection.sourceFile || activeCompPath || "index.html";
-      // remove-all-keyframes collapses the tween to a static hold and the commit
-      // path doesn't return parsed animations, so the keyframe cache is never
-      // refreshed — clear it here so the timeline diamonds disappear immediately.
-      const elementId = selection.id ?? idFromSelector(selection.selector);
-      if (elementId) clearKeyframeCacheForElement(targetPath, elementId);
+      // A class/descendant selector can resolve a live element whose selection
+      // deliberately has no id. The cache is still keyed by that DOM id.
+      const cacheElementId = selection.id || selection.element?.id;
       if (sdkSession && sdkDeps) {
         const handled = await sdkGsapRemoveAllKeyframesPersist(
           targetPath,
@@ -349,12 +346,26 @@ export function useGsapKeyframeOps({
           sdkDeps,
           { label: "Remove all keyframes" },
         );
-        if (cutoverCommittedOrThrow(handled)) return;
+        if (cutoverCommittedOrThrow(handled)) {
+          if (cacheElementId) clearKeyframeCacheForElement(targetPath, cacheElementId);
+          return;
+        }
       }
-      commitMutationSafely(
+      await commitMutationSafely(
         selection,
         { type: "remove-all-keyframes", animationId },
-        { label: "Remove all keyframes", softReload: true },
+        {
+          label: "Remove all keyframes",
+          softReload: true,
+          // The committed result is the single success boundary: clearing
+          // before it makes failed saves lie, while waiting for the reload leaves
+          // stale diamonds visible during the source round-trip.
+          onResult: (result) => {
+            if (result.changed !== false && cacheElementId) {
+              clearKeyframeCacheForElement(targetPath, cacheElementId);
+            }
+          },
+        },
       );
     },
     [commitMutationSafely, activeCompPath, sdkSession, sdkDeps],