@hyperframes/studio 0.7.79 → 0.7.80

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyperframes/studio",
-  "version": "0.7.79",
+  "version": "0.7.80",
   "description": "",
   "repository": {
     "type": "git",
@@ -46,11 +46,11 @@
     "gsap": "^3.13.0",
     "marked": "^14.1.4",
     "mediabunny": "^1.45.3",
-    "@hyperframes/core": "0.7.79",
-    "@hyperframes/player": "0.7.79",
-    "@hyperframes/sdk": "0.7.79",
-    "@hyperframes/studio-server": "0.7.79",
-    "@hyperframes/parsers": "0.7.79"
+    "@hyperframes/core": "0.7.80",
+    "@hyperframes/parsers": "0.7.80",
+    "@hyperframes/player": "0.7.80",
+    "@hyperframes/sdk": "0.7.80",
+    "@hyperframes/studio-server": "0.7.80"
   },
   "devDependencies": {
     "@types/react": "19",
@@ -65,7 +65,7 @@
     "vite": "^6.4.2",
     "vitest": "^3.2.4",
     "zustand": "^5.0.0",
-    "@hyperframes/producer": "0.7.79"
+    "@hyperframes/producer": "0.7.80"
   },
   "peerDependencies": {
     "react": "19",

package/src/components/StudioRightPanel.tsx

@@ -19,7 +19,6 @@ import type { EditHistoryKind } from "../utils/editHistory";
 import { useSlideshowPersist, type UseSlideshowPersistParams } from "../hooks/useSlideshowPersist";
 import { useSlideshowTabState } from "../hooks/useSlideshowTabState";
 import { DesignPanelPromoteProvider } from "./DesignPanelPromoteProvider";
-
 import { useStudioPlaybackContext, useStudioShellContext } from "../contexts/StudioContext";
 import { usePanelLayoutContext } from "../contexts/PanelLayoutContext";
 import { useFileManagerContext } from "../contexts/FileManagerContext";
@@ -156,6 +155,7 @@ export function StudioRightPanel({
     handleUpdateArcSegment,
     handleUnroll,
     handleUpdateKeyframeEase,
+    handleUpdateSegmentEase,
     handleSetAllKeyframeEases,
     handleGsapAddKeyframe,
     handleGsapRemoveKeyframe,
@@ -406,6 +406,7 @@ export function StudioRightPanel({
         onUnroll={handleUnroll}
         onUpdateKeyframeEase={handleUpdateKeyframeEase}
         onSetAllKeyframeEases={handleSetAllKeyframeEases}
+        onUpdateSegmentEase={handleUpdateSegmentEase}
         recordingState={recordingState}
         recordingDuration={recordingDuration}
         onToggleRecording={onToggleRecording}

package/src/components/editor/AnimationCard.test.tsx

@@ -2,39 +2,98 @@
 
 import React, { act } from "react";
 import { createRoot } from "react-dom/client";
+import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
 import { afterEach, describe, expect, it, vi } from "vitest";
 import { AnimationCard } from "./AnimationCard";
-import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
 import { EASE_PRESETS } from "./easePresetLibrary";
+import type { AnimationKeyframeTarget } from "../../hooks/gsapTweenSynth";
 
 const trackStudioSegmentEaseEdit = vi.hoisted(() => vi.fn());
 vi.mock("../../telemetry/events", () => ({ trackStudioSegmentEaseEdit }));
 
 (globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
 
+const ANIMATION: GsapAnimation = {
+  id: "position-tween",
+  targetSelector: "#clip-1",
+  method: "to",
+  position: 0,
+  duration: 2,
+  ease: "power1.out",
+  properties: { x: 200 },
+  keyframes: {
+    format: "percentage",
+    keyframes: [
+      { percentage: 0, properties: { x: 0 } },
+      { percentage: 50, properties: { x: 100 } },
+      { percentage: 100, properties: { x: 200 } },
+    ],
+  },
+};
+
+const FLAT_ANIMATION: GsapAnimation = {
+  ...ANIMATION,
+  id: "flat-position-tween",
+  keyframes: undefined,
+};
+
 afterEach(() => {
   document.body.innerHTML = "";
   trackStudioSegmentEaseEdit.mockClear();
 });
 
-function baseAnimation(overrides: Partial<GsapAnimation> = {}): GsapAnimation {
-  return {
-    id: "anim-1",
-    method: "to",
-    position: 0.8,
-    duration: 1.2,
-    ease: "power2.out",
-    properties: { opacity: 1 },
-    ...overrides,
-  } as GsapAnimation;
+function renderFocusCard(
+  focusedSegment: {
+    tweenPercentage: number;
+    collidingAnimationTargets?: AnimationKeyframeTarget[];
+  } | null,
+  onEaseCommit = vi.fn(),
+  defaultExpanded = false,
+  animation = ANIMATION,
+  onUpdateMeta = vi.fn(),
+  onUpdateSegmentEase = vi.fn(),
+) {
+  const host = document.createElement("div");
+  document.body.append(host);
+  const root = createRoot(host);
+  const render = (nextFocusedSegment: { tweenPercentage: number } | null) => {
+    act(() => {
+      root.render(
+        <AnimationCard
+          animation={animation}
+          defaultExpanded={defaultExpanded}
+          focusedSegment={nextFocusedSegment}
+          onFocusSegmentConsumed={vi.fn()}
+          onUpdateProperty={vi.fn()}
+          onUpdateMeta={onUpdateMeta}
+          onDeleteAnimation={vi.fn()}
+          onAddProperty={vi.fn()}
+          onRemoveProperty={vi.fn()}
+          onUpdateKeyframeEase={onEaseCommit}
+          onUpdateSegmentEase={onUpdateSegmentEase}
+        />,
+      );
+    });
+  };
+  render(focusedSegment);
+  return { host, root, render };
 }
 
-const noop = () => {};
+function findButton(host: HTMLElement, text: string): HTMLButtonElement | undefined {
+  return Array.from(host.querySelectorAll("button")).find((button) =>
+    button.textContent?.includes(text),
+  );
+}
+
+function openSegment(host: HTMLElement, label: string): void {
+  const segment = findButton(host, label);
+  expect(segment).toBeDefined();
+  act(() => segment?.click());
+}
 
 function selectPreset(host: HTMLElement, presetId: string): string {
   const presetConfig = EASE_PRESETS.find((candidate) => candidate.id === presetId);
   if (!presetConfig) throw new Error(`Missing ease preset: ${presetId}`);
-
   const dropdown = host.querySelector<HTMLButtonElement>("[data-ease-type-dropdown]");
   expect(dropdown).not.toBeNull();
   act(() => dropdown?.click());
@@ -45,6 +104,8 @@ function selectPreset(host: HTMLElement, presetId: string): string {
   return presetConfig.ease;
 }
 
+const noop = () => {};
+
 /** Every test mounts the same card; only expansion, flat mode, and the spies differ. */
 function renderCard({
   animation = baseAnimation(),
@@ -82,7 +143,157 @@ function renderCard({
   return { host, root };
 }
 
+function restoreScrollIntoView(descriptor: PropertyDescriptor | undefined): void {
+  if (descriptor) Object.defineProperty(HTMLElement.prototype, "scrollIntoView", descriptor);
+  else Reflect.deleteProperty(HTMLElement.prototype, "scrollIntoView");
+}
+
+describe("AnimationCard", () => {
+  it("scrolls a focused segment into view but not a manually toggled segment", () => {
+    const originalScrollIntoView = Object.getOwnPropertyDescriptor(
+      HTMLElement.prototype,
+      "scrollIntoView",
+    );
+    const scrollIntoView = vi.fn();
+    Object.defineProperty(HTMLElement.prototype, "scrollIntoView", {
+      configurable: true,
+      value: scrollIntoView,
+    });
+
+    const view = renderFocusCard({ tweenPercentage: 50 });
+    try {
+      expect(scrollIntoView).toHaveBeenCalledOnce();
+      expect(scrollIntoView).toHaveBeenCalledWith({ block: "nearest", behavior: "smooth" });
+
+      view.render(null);
+      const manualToggle = findButton(view.host, "50% → 100%");
+      expect(manualToggle).toBeDefined();
+      act(() => manualToggle?.click());
+      expect(scrollIntoView).toHaveBeenCalledOnce();
+    } finally {
+      act(() => view.root.unmount());
+      restoreScrollIntoView(originalScrollIntoView);
+    }
+  });
+
+  it("tracks a committed segment ease alongside the existing update", () => {
+    const onEaseCommit = vi.fn();
+    const view = renderFocusCard(null, onEaseCommit, true);
+    openSegment(view.host, "0% → 50%");
+    const ease = selectPreset(view.host, "quad-out");
+
+    expect(onEaseCommit).toHaveBeenCalledWith(ANIMATION.id, 50, ease);
+    expect(trackStudioSegmentEaseEdit).toHaveBeenCalledWith({ action: "commit", ease });
+    act(() => view.root.unmount());
+  });
+
+  it("commits a focused multi-id segment ease through the bulk callback", () => {
+    const onUpdateKeyframeEase = vi.fn();
+    const onUpdateSegmentEase = vi.fn();
+    const collidingAnimationTargets = [
+      { animationId: ANIMATION.id, tweenPercentage: 50 },
+      { animationId: "scale-tween", tweenPercentage: 75 },
+      { animationId: "opacity-tween", tweenPercentage: 25 },
+    ];
+    const view = renderFocusCard(
+      { tweenPercentage: 50, collidingAnimationTargets },
+      onUpdateKeyframeEase,
+      false,
+      ANIMATION,
+      vi.fn(),
+      onUpdateSegmentEase,
+    );
+    const ease = selectPreset(view.host, "quad-out");
+
+    expect(onUpdateSegmentEase).toHaveBeenCalledExactlyOnceWith(collidingAnimationTargets, ease);
+    expect(onUpdateKeyframeEase).not.toHaveBeenCalled();
+    act(() => view.root.unmount());
+  });
+
+  it("keeps a focused single-id segment ease on the single callback", () => {
+    const onUpdateKeyframeEase = vi.fn();
+    const onUpdateSegmentEase = vi.fn();
+    const view = renderFocusCard(
+      {
+        tweenPercentage: 50,
+        collidingAnimationTargets: [{ animationId: ANIMATION.id, tweenPercentage: 50 }],
+      },
+      onUpdateKeyframeEase,
+      false,
+      ANIMATION,
+      vi.fn(),
+      onUpdateSegmentEase,
+    );
+    const ease = selectPreset(view.host, "quad-out");
+
+    expect(onUpdateKeyframeEase).toHaveBeenCalledExactlyOnceWith(ANIMATION.id, 50, ease);
+    expect(onUpdateSegmentEase).not.toHaveBeenCalled();
+    act(() => view.root.unmount());
+  });
+
+  it("commits a focused flat tween segment ease through tween metadata", () => {
+    const onUpdateMeta = vi.fn();
+    const onUpdateKeyframeEase = vi.fn();
+    const view = renderFocusCard(
+      { tweenPercentage: 100 },
+      onUpdateKeyframeEase,
+      false,
+      FLAT_ANIMATION,
+      onUpdateMeta,
+    );
+    const ease = selectPreset(view.host, "quad-out");
+
+    expect(onUpdateMeta).toHaveBeenCalledExactlyOnceWith(FLAT_ANIMATION.id, { ease });
+    expect(onUpdateKeyframeEase).not.toHaveBeenCalled();
+    act(() => view.root.unmount());
+  });
+});
+
+function baseAnimation(overrides: Partial<GsapAnimation> = {}): GsapAnimation {
+  return {
+    id: "anim-1",
+    method: "to",
+    position: 0.8,
+    duration: 1.2,
+    ease: "power2.out",
+    properties: { opacity: 1 },
+    ...overrides,
+  } as GsapAnimation;
+}
+
 describe("AnimationCard ease editing", () => {
+  it.each([
+    ["spring", "power2.out", "spring(0.42)", "Spring bounce"],
+    ["wiggle", "power2.out", "wiggle(3,easeInOut,0.12)", "Wiggle count"],
+    ["curve", "spring(0.6)", "custom(M0,0 C0.16,1 0.3,1 1,1)", "Cubic bezier control points"],
+  ] as const)(
+    "commits and immediately displays the %s default when a keyframe segment switches mode",
+    (mode, currentEase, ease, fieldLabel) => {
+      const onUpdateKeyframeEase = vi.fn();
+      const animation = baseAnimation({
+        keyframes: {
+          format: "percentage",
+          keyframes: [
+            { percentage: 0, properties: { opacity: 0 } },
+            { percentage: 50, properties: { opacity: 0.5 }, ease: currentEase },
+            { percentage: 100, properties: { opacity: 1 } },
+          ],
+        },
+      });
+      const view = renderFocusCard(null, onUpdateKeyframeEase, true, animation);
+
+      openSegment(view.host, "0% → 50%");
+      const modeButton = view.host.querySelector<HTMLButtonElement>(`[data-ease-mode="${mode}"]`);
+      expect(modeButton).not.toBeNull();
+      act(() => modeButton?.click());
+
+      expect(onUpdateKeyframeEase).toHaveBeenCalledExactlyOnceWith(animation.id, 50, ease);
+      expect(modeButton?.getAttribute("aria-checked")).toBe("true");
+      expect(view.host.querySelector(`[aria-label="${fieldLabel}"]`)).not.toBeNull();
+      act(() => view.root.unmount());
+    },
+  );
+
   it("commits one preset change to the selected keyframe segment", () => {
     const onUpdateKeyframeEase = vi.fn();
     const animation = baseAnimation({
@@ -97,11 +308,7 @@ describe("AnimationCard ease editing", () => {
     });
     const view = renderCard({ animation, onUpdateKeyframeEase });
 
-    const segment = Array.from(view.host.querySelectorAll("button")).find((button) =>
-      button.textContent?.includes("0% → 50%"),
-    );
-    expect(segment).toBeDefined();
-    act(() => segment?.click());
+    openSegment(view.host, "0% → 50%");
     const ease = selectPreset(view.host, "quad-out");
 
     expect(onUpdateKeyframeEase).toHaveBeenCalledExactlyOnceWith(animation.id, 50, ease);

package/src/components/editor/AnimationCard.tsx

@@ -18,12 +18,16 @@ import {
   parseNumericOrString,
   BOOLEAN_PROPS,
 } from "./AnimationCardParts";
+import type { AnimationKeyframeTarget } from "../../hooks/gsapTweenSynth";
 
 interface AnimationCardProps extends GsapAnimationEditCallbacks {
   animation: GsapAnimation;
   defaultExpanded: boolean;
   flat?: boolean;
-  focusedSegment?: { tweenPercentage: number } | null;
+  focusedSegment?: {
+    tweenPercentage: number;
+    collidingAnimationTargets?: AnimationKeyframeTarget[];
+  } | null;
   onFocusSegmentConsumed?: () => void;
 }
 
@@ -47,6 +51,7 @@ export const AnimationCard = memo(function AnimationCard({
   onSetArcPath,
   onUpdateArcSegment,
   onUpdateKeyframeEase,
+  onUpdateSegmentEase,
   onSetAllKeyframeEases,
   onUnroll,
 }: AnimationCardProps) {
@@ -54,6 +59,9 @@ export const AnimationCard = memo(function AnimationCard({
   const [addingProp, setAddingProp] = useState(false);
   const [addingFromProp, setAddingFromProp] = useState(false);
   const [expandedKfPct, setExpandedKfPct] = useState<number | null>(null);
+  const [focusedCollidingAnimationTargets, setFocusedCollidingAnimationTargets] = useState<
+    AnimationKeyframeTarget[] | undefined
+  >();
   const cardRef = useRef<HTMLDivElement>(null);
   const pendingAutoScrollRef = useRef(false);
 
@@ -62,6 +70,7 @@ export const AnimationCard = memo(function AnimationCard({
     setExpanded(true);
     pendingAutoScrollRef.current = true;
     setExpandedKfPct(focusedSegment.tweenPercentage);
+    setFocusedCollidingAnimationTargets(focusedSegment.collidingAnimationTargets);
     onFocusSegmentConsumed?.();
   }, [focusedSegment, onFocusSegmentConsumed]);
 
@@ -288,9 +297,21 @@ export const AnimationCard = memo(function AnimationCard({
                     keyframes={animation.keyframes.keyframes}
                     globalEase={animation.keyframes.easeEach ?? animation.ease ?? "none"}
                     expandedPct={expandedKfPct}
-                    onToggle={setExpandedKfPct}
+                    collidingAnimationTargets={focusedCollidingAnimationTargets}
+                    onToggle={(pct) => {
+                      setExpandedKfPct(pct);
+                      setFocusedCollidingAnimationTargets(undefined);
+                    }}
                     onEaseCommit={(pct, ease) => {
-                      onUpdateKeyframeEase(animation.id, pct, ease);
+                      if (
+                        focusedCollidingAnimationTargets &&
+                        focusedCollidingAnimationTargets.length > 1 &&
+                        onUpdateSegmentEase
+                      ) {
+                        onUpdateSegmentEase(focusedCollidingAnimationTargets, ease);
+                      } else {
+                        onUpdateKeyframeEase(animation.id, pct, ease);
+                      }
                       trackStudioSegmentEaseEdit({ action: "commit", ease });
                     }}
                     onApplyAll={

package/src/components/editor/EaseCurveSection.test.tsx

@@ -3,7 +3,11 @@
 import React, { act, useState } from "react";
 import { createRoot } from "react-dom/client";
 import { afterEach, describe, expect, it, vi } from "vitest";
+import { parseSpringBounce } from "@hyperframes/core/spring-ease";
+import { parseWiggleEase } from "@hyperframes/core/wiggle-ease";
 import { EaseCurveSection, MiniCurveSvg } from "./EaseCurveSection";
+import { resolveEaseCurveTuple } from "./gsapAnimationConstants";
+import type { AnimationKeyframeTarget } from "../../hooks/gsapTweenSynth";
 
 (globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
 
@@ -11,12 +15,22 @@ afterEach(() => {
   document.body.innerHTML = "";
 });
 
-function renderSection(ease = "none", onCustomEaseCommit = vi.fn()) {
+function renderSection(
+  ease = "none",
+  onCustomEaseCommit = vi.fn(),
+  collidingAnimationTargets?: AnimationKeyframeTarget[],
+) {
   const host = document.createElement("div");
   document.body.append(host);
   const root = createRoot(host);
   act(() => {
-    root.render(<EaseCurveSection ease={ease} onCustomEaseCommit={onCustomEaseCommit} />);
+    root.render(
+      <EaseCurveSection
+        ease={ease}
+        onCustomEaseCommit={onCustomEaseCommit}
+        collidingAnimationTargets={collidingAnimationTargets}
+      />,
+    );
   });
   return { host, root, onCustomEaseCommit };
 }
@@ -65,6 +79,19 @@ function renderStatefulSection(initialEase = "none", onCustomEaseCommit = vi.fn(
   return { host, root, onCustomEaseCommit };
 }
 
+function renderControlledSection(initialEase = "none", onCustomEaseCommit = vi.fn()) {
+  const host = document.createElement("div");
+  document.body.append(host);
+  const root = createRoot(host);
+  const renderEase = (ease: string) => {
+    act(() =>
+      root.render(<EaseCurveSection ease={ease} onCustomEaseCommit={onCustomEaseCommit} />),
+    );
+  };
+  renderEase(initialEase);
+  return { host, root, onCustomEaseCommit, renderEase };
+}
+
 function clickMode(host: HTMLElement, mode: "curve" | "spring" | "wiggle"): void {
   const toggle = host.querySelector<HTMLButtonElement>(`[data-ease-mode="${mode}"]`);
   expect(toggle).not.toBeNull();
@@ -82,6 +109,29 @@ function editorLabel(host: HTMLElement): string | null {
 }
 
 describe("EaseCurveSection preset grid", () => {
+  it("shows the number of animations for a multi-id segment", () => {
+    const { host, root } = renderSection("power2.out", vi.fn(), [
+      { animationId: "move-x", tweenPercentage: 20 },
+      { animationId: "move-y", tweenPercentage: 50 },
+      { animationId: "fade", tweenPercentage: 80 },
+    ]);
+
+    expect(host.textContent).toContain("Applies to 3 animations");
+
+    act(() => root.unmount());
+  });
+
+  it.each([undefined, [{ animationId: "move-x", tweenPercentage: 20 }]])(
+    "does not show a property count for a non-colliding segment",
+    (collidingAnimationTargets) => {
+      const { host, root } = renderSection("power2.out", vi.fn(), collidingAnimationTargets);
+
+      expect(host.textContent).not.toContain("Applies to");
+
+      act(() => root.unmount());
+    },
+  );
+
   it.each([
     ["curve", "none", "linear", ["flow-7", "spring-bouncy"]],
     ["spring", "spring(0.42)", "spring-bouncy", ["linear", "flow-7"]],
@@ -257,12 +307,107 @@ describe("EaseCurveSection preset grid", () => {
 
     clickMode(host, "spring");
     expect(onCustomEaseCommit).toHaveBeenLastCalledWith("spring(0.42)");
+    expect(parseSpringBounce(onCustomEaseCommit.mock.lastCall![0])).toBe(0.42);
 
     clickMode(host, "curve");
     expect(onCustomEaseCommit).toHaveBeenLastCalledWith("custom(M0,0 C0.16,1 0.3,1 1,1)");
+    expect(resolveEaseCurveTuple(onCustomEaseCommit.mock.lastCall![0])).toEqual([0.16, 1, 0.3, 1]);
 
     clickMode(host, "wiggle");
     expect(onCustomEaseCommit).toHaveBeenLastCalledWith("wiggle(3,easeInOut,0.12)");
+    expect(parseWiggleEase(onCustomEaseCommit.mock.lastCall![0])).toEqual({
+      wiggles: 3,
+      type: "easeInOut",
+      amplitude: 0.12,
+    });
+    expect(onCustomEaseCommit).toHaveBeenCalledTimes(3);
+
+    act(() => root.unmount());
+  });
+
+  it("keeps an optimistic mode visible through its canonical prop round-trip", () => {
+    const { host, root, onCustomEaseCommit, renderEase } = renderControlledSection();
+
+    clickMode(host, "spring");
+    expect(host.querySelector('[data-ease-mode="spring"]')?.getAttribute("aria-checked")).toBe(
+      "true",
+    );
+    expect(host.querySelector('[aria-label="Spring bounce"]')).not.toBeNull();
+
+    renderEase("spring(0.42)");
+    expect(host.querySelector('[data-ease-mode="spring"]')?.getAttribute("aria-checked")).toBe(
+      "true",
+    );
+    expect(host.querySelector('[aria-label="Spring bounce"]')).not.toBeNull();
+    expect(onCustomEaseCommit).toHaveBeenCalledExactlyOnceWith("spring(0.42)");
+
+    act(() => root.unmount());
+  });
+
+  // Two switches before the first commit round-trips: the commits serialize, so
+  // the older value arrives while the newer one is still in flight. Repainting
+  // it would flash wiggle, spring, wiggle in the panel.
+  it("ignores an older in-flight commit arriving after a newer switch", () => {
+    const { host, root, renderEase } = renderControlledSection();
+
+    clickMode(host, "spring");
+    clickMode(host, "wiggle");
+    renderEase("spring(0.42)");
+
+    expect(host.querySelector('[data-ease-mode="wiggle"]')?.getAttribute("aria-checked")).toBe(
+      "true",
+    );
+
+    renderEase("wiggle(3,easeInOut,0.12)");
+    expect(host.querySelector('[data-ease-mode="wiggle"]')?.getAttribute("aria-checked")).toBe(
+      "true",
+    );
+
+    act(() => root.unmount());
+  });
+
+  // The commit is fire-and-forget: a rejected write or one that lands as a
+  // no-op never changes `ease`, so nothing else can retire the optimistic
+  // value and the panel would keep claiming a curve that was never saved.
+  it("falls back to the committed ease when the commit never round-trips", () => {
+    vi.useFakeTimers();
+    try {
+      const { host, root } = renderControlledSection("power2.out");
+
+      clickMode(host, "spring");
+      expect(host.querySelector('[data-ease-mode="spring"]')?.getAttribute("aria-checked")).toBe(
+        "true",
+      );
+
+      act(() => vi.advanceTimersByTime(2000));
+
+      expect(host.querySelector('[data-ease-mode="spring"]')?.getAttribute("aria-checked")).toBe(
+        "false",
+      );
+      expect(host.querySelector('[data-ease-mode="curve"]')?.getAttribute("aria-checked")).toBe(
+        "true",
+      );
+
+      act(() => root.unmount());
+    } finally {
+      vi.useRealTimers();
+    }
+  });
+
+  it("replaces an optimistic mode when the canonical prop changes externally", () => {
+    const { host, root, renderEase } = renderControlledSection();
+
+    clickMode(host, "spring");
+    renderEase("wiggle(2,uniform,0.3)");
+
+    expect(host.querySelector('[data-ease-mode="spring"]')?.getAttribute("aria-checked")).toBe(
+      "false",
+    );
+    expect(host.querySelector('[data-ease-mode="wiggle"]')?.getAttribute("aria-checked")).toBe(
+      "true",
+    );
+    expect(host.querySelector('[aria-label="Wiggle count"]')).not.toBeNull();
+    expect(host.querySelector('[aria-label="Spring bounce"]')).toBeNull();
 
     act(() => root.unmount());
   });