@hyperframes/studio 0.7.70 → 0.7.72

package/package.json

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

package/src/App.tsx

@@ -12,10 +12,7 @@ import { useFileManager } from "./hooks/useFileManager";
 import { usePreviewPersistence } from "./hooks/usePreviewPersistence";
 import { usePreviewDocumentVersion } from "./hooks/usePreviewDocumentVersion";
 import { useTimelineEditing } from "./hooks/useTimelineEditing";
-import {
-  persistTimelineMoveEditsAtomically,
-  type TimelineMoveOperation,
-} from "./hooks/timelineMoveAdapter";
+import { persistTimelineMoveEditsAtomically } from "./hooks/timelineMoveAdapter";
 import type { TimelineZIndexReorderCommit } from "./hooks/useTimelineEditingTypes";
 import type { TimelineStackingReorderIntent } from "./player/components/timelineStacking";
 import type { BlockPreviewInfo } from "./components/sidebar/BlocksTab";
@@ -65,6 +62,7 @@ import {
 } from "./utils/studioUrlState";
 import { trackStudioSessionStart } from "./telemetry/events";
 import { hasFiredSessionStart, markSessionStartFired } from "./telemetry/config";
+type TimelineMoveOperation = Parameters<typeof persistTimelineMoveEditsAtomically>[2];
 // fallow-ignore-next-line complexity
 export function StudioApp() {
   const { projectId, resolving, waitingForServer } = useServerConnection();
@@ -204,6 +202,7 @@ export function StudioApp() {
     setActiveBlockParams,
     handleAddBlock,
     handleTimelineBlockDrop,
+    handleAddMediaOverlay,
     handlePreviewBlockDrop,
   } = useBlockHandlers({
     projectId,
@@ -536,6 +535,7 @@ export function StudioApp() {
                           domEditSaveTimestampRef={domEditSaveTimestampRef}
                           recordEdit={editHistory.recordEdit}
                           onToggleElementHidden={timelineEditing.handleToggleElementHidden}
+                          onAddMediaOverlay={handleAddMediaOverlay}
                         />
                       )
                     }

package/src/components/StudioLeftSidebar.tsx

@@ -38,7 +38,7 @@ export function StudioLeftSidebar({
   const {
     leftCollapsed,
     leftWidth,
-    setLeftWidth,
+    adjustPanelWidth,
     toggleLeftSidebar,
     handlePanelResizeStart,
     handlePanelResizeMove,
@@ -173,8 +173,7 @@ export function StudioLeftSidebar({
           if (e.key !== "ArrowLeft" && e.key !== "ArrowRight") return;
           e.preventDefault();
           const delta = e.key === "ArrowLeft" ? -16 : 16;
-          const maxLeft = Math.floor(window.innerWidth * 0.5);
-          setLeftWidth(Math.max(160, Math.min(maxLeft, leftWidth + delta)));
+          adjustPanelWidth("left", delta);
         }}
       >
         {/* Expanded hit zone: 8px wide, centered on the 3px seam */}

package/src/components/StudioRightPanel.tsx

@@ -31,7 +31,10 @@ import {
   EMPTY_COLOR_GRADING_SCOPE_RESULT,
   type ColorGradingScope,
 } from "./studioColorGradingScope";
-import type { BackgroundRemovalProgress } from "./editor/propertyPanelTypes";
+import type {
+  AddMediaOverlayHandler,
+  BackgroundRemovalProgress,
+} from "./editor/propertyPanelTypes";
 import { timelineKeysForSelections, type ToggleHiddenHandler } from "../utils/studioHelpers";
 import { useInspectorSplitResize } from "../hooks/useInspectorSplitResize";
 
@@ -71,6 +74,7 @@ export interface StudioRightPanelProps extends StudioEditPersistenceProps {
     files: Record<string, { before: string; after: string }>;
   }) => Promise<void>;
   onToggleElementHidden?: ToggleHiddenHandler;
+  onAddMediaOverlay?: AddMediaOverlayHandler;
 }
 
 // fallow-ignore-next-line complexity
@@ -88,10 +92,11 @@ export function StudioRightPanel({
   domEditSaveTimestampRef,
   recordEdit,
   onToggleElementHidden,
+  onAddMediaOverlay,
 }: StudioRightPanelProps) {
   const {
     rightWidth,
-    setRightWidth,
+    adjustPanelWidth,
     rightPanelTab,
     setRightPanelTab,
     rightInspectorPanes,
@@ -372,6 +377,7 @@ export function StudioRightPanel({
         onRemoveTextField={handleDomRemoveTextField}
         onAskAgent={handleAskAgent}
         onImportAssets={handleImportFiles}
+        onAddMediaOverlay={onAddMediaOverlay}
         fontAssets={fontAssets}
         onImportFonts={handleImportFonts}
         previewIframeRef={previewIframeRef}
@@ -458,7 +464,7 @@ export function StudioRightPanel({
           e.preventDefault();
           // Panel is right-anchored: ArrowLeft grows it, ArrowRight shrinks it.
           const delta = e.key === "ArrowLeft" ? 16 : -16;
-          setRightWidth(Math.max(160, Math.min(600, rightWidth + delta)));
+          adjustPanelWidth("right", delta);
         }}
       >
         {/* Expanded hit zone: 8px wide, centered on the 3px seam */}
@@ -467,7 +473,7 @@ export function StudioRightPanel({
         <div className="absolute top-1/2 left-0 h-[52px] w-[3px] -translate-y-1/2 bg-white/12 transition-colors group-hover:bg-white/18 group-active:bg-white/24" />
       </div>
       <div
-        className="flex min-w-0 flex-shrink-0 flex-col overflow-hidden rounded-lg border border-neutral-800 bg-neutral-900"
+        className="flex min-w-0 flex-shrink-0 flex-col overflow-hidden rounded-lg border border-neutral-800 bg-neutral-950"
         style={{ width: rightWidth }}
       >
         {captionEditMode ? (

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

@@ -5,11 +5,16 @@ import { createRoot } from "react-dom/client";
 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";
+
+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;
 
 afterEach(() => {
   document.body.innerHTML = "";
+  trackStudioSegmentEaseEdit.mockClear();
 });
 
 function baseAnimation(overrides: Partial<GsapAnimation> = {}): GsapAnimation {
@@ -26,6 +31,101 @@ function baseAnimation(overrides: Partial<GsapAnimation> = {}): GsapAnimation {
 
 const noop = () => {};
 
+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());
+
+  const preset = host.querySelector<HTMLButtonElement>(`[data-ease-preset-id="${presetId}"]`);
+  expect(preset).not.toBeNull();
+  act(() => preset?.click());
+  return presetConfig.ease;
+}
+
+function renderExpandedCard({
+  animation,
+  flat,
+  onUpdateMeta = vi.fn(),
+  onUpdateKeyframeEase = vi.fn(),
+}: {
+  animation: GsapAnimation;
+  flat?: boolean;
+  onUpdateMeta?: ReturnType<typeof vi.fn>;
+  onUpdateKeyframeEase?: ReturnType<typeof vi.fn>;
+}) {
+  const host = document.createElement("div");
+  document.body.append(host);
+  const root = createRoot(host);
+  act(() => {
+    root.render(
+      <AnimationCard
+        animation={animation}
+        defaultExpanded
+        flat={flat}
+        onUpdateProperty={noop}
+        onUpdateMeta={onUpdateMeta}
+        onDeleteAnimation={noop}
+        onAddProperty={noop}
+        onRemoveProperty={noop}
+        onUpdateKeyframeEase={onUpdateKeyframeEase}
+      />,
+    );
+  });
+  return { host, root };
+}
+
+describe("AnimationCard ease editing", () => {
+  it("commits one preset change to the selected keyframe segment", () => {
+    const onUpdateKeyframeEase = vi.fn();
+    const animation = baseAnimation({
+      keyframes: {
+        format: "percentage",
+        keyframes: [
+          { percentage: 0, properties: { opacity: 0 } },
+          { percentage: 50, properties: { opacity: 0.5 } },
+          { percentage: 100, properties: { opacity: 1 } },
+        ],
+      },
+    });
+    const view = renderExpandedCard({ animation, onUpdateKeyframeEase });
+
+    const segment = Array.from(view.host.querySelectorAll("button")).find((button) =>
+      button.textContent?.includes("0% → 50%"),
+    );
+    expect(segment).toBeDefined();
+    act(() => segment?.click());
+    const ease = selectPreset(view.host, "quad-out");
+
+    expect(onUpdateKeyframeEase).toHaveBeenCalledExactlyOnceWith(animation.id, 50, ease);
+    expect(trackStudioSegmentEaseEdit).toHaveBeenCalledExactlyOnceWith({
+      ease,
+    });
+    act(() => view.root.unmount());
+  });
+
+  it("commits one preset change through flat tween metadata", () => {
+    const onUpdateMeta = vi.fn();
+    const onUpdateKeyframeEase = vi.fn();
+    const animation = baseAnimation({ id: "flat-tween" });
+    const view = renderExpandedCard({
+      animation,
+      flat: true,
+      onUpdateMeta,
+      onUpdateKeyframeEase,
+    });
+
+    const ease = selectPreset(view.host, "quad-out");
+
+    expect(onUpdateMeta).toHaveBeenCalledExactlyOnceWith(animation.id, { ease });
+    expect(onUpdateKeyframeEase).not.toHaveBeenCalled();
+    expect(trackStudioSegmentEaseEdit).not.toHaveBeenCalled();
+    act(() => view.root.unmount());
+  });
+});
+
 describe("AnimationCard flat branch", () => {
   it("renders a mint border-left and panel-token colors when flat", () => {
     const host = document.createElement("div");

package/src/components/editor/AnimationCard.tsx

@@ -1,6 +1,7 @@
 import { memo, useCallback, useMemo, useState } from "react";
 import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
 import { SUPPORTED_EASES, SUPPORTED_PROPS } from "@hyperframes/core/gsap-constants";
+import { trackStudioSegmentEaseEdit } from "../../telemetry/events";
 import { RESPONSIVE_GRID } from "./propertyPanelHelpers";
 import { MetricField, SelectField } from "./propertyPanelPrimitives";
 import { controlPointsForGsapEase } from "./studioMotion";
@@ -264,7 +265,10 @@ export const AnimationCard = memo(function AnimationCard({
                     globalEase={animation.keyframes.easeEach ?? animation.ease ?? "none"}
                     expandedPct={expandedKfPct}
                     onToggle={setExpandedKfPct}
-                    onEaseCommit={(pct, ease) => onUpdateKeyframeEase(animation.id, pct, ease)}
+                    onEaseCommit={(pct, ease) => {
+                      onUpdateKeyframeEase(animation.id, pct, ease);
+                      trackStudioSegmentEaseEdit({ ease });
+                    }}
                     onApplyAll={
                       onSetAllKeyframeEases
                         ? (ease) => onSetAllKeyframeEases(animation.id, ease)
@@ -292,7 +296,6 @@ export const AnimationCard = memo(function AnimationCard({
                     />
                     <EaseCurveSection
                       ease={easeName}
-                      duration={animation.duration}
                       onCustomEaseCommit={(customEase) => {
                         const easeKey = animation.keyframes ? "easeEach" : "ease";
                         onUpdateMeta(animation.id, { [easeKey]: customEase });

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

@@ -0,0 +1,348 @@
+// @vitest-environment happy-dom
+
+import React, { act, useState } from "react";
+import { createRoot } from "react-dom/client";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { EaseCurveSection, MiniCurveSvg } from "./EaseCurveSection";
+
+(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+afterEach(() => {
+  document.body.innerHTML = "";
+});
+
+function renderSection(ease = "none", onCustomEaseCommit = vi.fn()) {
+  const host = document.createElement("div");
+  document.body.append(host);
+  const root = createRoot(host);
+  act(() => {
+    root.render(<EaseCurveSection ease={ease} onCustomEaseCommit={onCustomEaseCommit} />);
+  });
+  return { host, root, onCustomEaseCommit };
+}
+
+// The preset grid now lives behind the Figma-style ease-type dropdown; open it
+// before querying preset tiles.
+function openPresetGrid(host: HTMLElement): void {
+  const dropdown = host.querySelector<HTMLButtonElement>("[data-ease-type-dropdown]");
+  act(() => dropdown!.click());
+}
+
+function presetPath(host: HTMLElement, id: string): string | null | undefined {
+  return host
+    .querySelector<HTMLButtonElement>(`[data-ease-preset-id="${id}"]`)
+    ?.querySelector("path")
+    ?.getAttribute("d");
+}
+
+function countPathExtrema(path: string): number {
+  const values = Array.from(path.matchAll(/[ML][^,]+,([^ ]+)/g), (match) => Number(match[1]));
+  const directions = values
+    .slice(1)
+    .map((value, index) => Math.sign(value - values[index]!))
+    .filter((direction) => direction !== 0);
+  return directions.filter((direction, index) => index > 0 && direction !== directions[index - 1])
+    .length;
+}
+
+function renderStatefulSection(initialEase = "none", onCustomEaseCommit = vi.fn()) {
+  const host = document.createElement("div");
+  document.body.append(host);
+  const root = createRoot(host);
+  const Harness = () => {
+    const [ease, setEase] = useState(initialEase);
+    return (
+      <EaseCurveSection
+        ease={ease}
+        onCustomEaseCommit={(nextEase) => {
+          onCustomEaseCommit(nextEase);
+          setEase(nextEase);
+        }}
+      />
+    );
+  };
+  act(() => root.render(<Harness />));
+  return { host, root, onCustomEaseCommit };
+}
+
+function clickMode(host: HTMLElement, mode: "curve" | "spring" | "wiggle"): void {
+  const toggle = host.querySelector<HTMLButtonElement>(`[data-ease-mode="${mode}"]`);
+  expect(toggle).not.toBeNull();
+  act(() => toggle!.click());
+}
+
+function presetIds(host: HTMLElement): string[] {
+  return Array.from(host.querySelectorAll<HTMLElement>("[data-ease-preset-id]"), (preset) =>
+    preset.getAttribute("data-ease-preset-id"),
+  ).filter((id): id is string => id !== null);
+}
+
+function editorLabel(host: HTMLElement): string | null {
+  return host.querySelector("[data-ease-type-dropdown] span")?.textContent ?? null;
+}
+
+describe("EaseCurveSection preset grid", () => {
+  it.each([
+    ["curve", "none", "linear", ["flow-7", "spring-bouncy"]],
+    ["spring", "spring(0.42)", "spring-bouncy", ["linear", "flow-7"]],
+    ["wiggle", "wiggle(3,easeInOut,0.12)", "flow-7", ["linear", "spring-bouncy"]],
+  ] as const)("shows only %s presets", (_mode, ease, includedPreset, excludedPresets) => {
+    const { host, root } = renderSection(ease);
+    openPresetGrid(host);
+    const ids = presetIds(host);
+
+    expect(ids).toContain(includedPreset);
+    for (const id of excludedPresets) expect(ids).not.toContain(id);
+
+    act(() => root.unmount());
+  });
+
+  it("renders a wiggle graph and fields without curve handles or fallback copy", () => {
+    const { host, root } = renderSection("wiggle(3,easeInOut,0.12)");
+    const graph = host.querySelector<SVGElement>('svg[viewBox="0 0 216 288"]');
+
+    expect(graph?.querySelector("path")).not.toBeNull();
+    expect(graph?.querySelectorAll(".cursor-grab")).toHaveLength(0);
+    expect(host.querySelector('[aria-label="Wiggle count"]')).not.toBeNull();
+    expect(host.querySelector('[aria-label="Wiggle type"]')).not.toBeNull();
+    expect(host.querySelector('[aria-label="Wiggle amplitude"]')).not.toBeNull();
+    expect(host.textContent).not.toContain("switch to");
+
+    act(() => root.unmount());
+  });
+
+  it.each([
+    ["spring(0.6)", "Bouncy"],
+    ["spring(0.37)", "Custom spring"],
+    ["wiggle(2,uniform,0.3)", "Custom wiggle"],
+    ["custom(M0,0 C0.1,0.2 0.8,0.9 1,1)", "Custom bezier"],
+  ])("labels %s as %s", (ease, expectedLabel) => {
+    const { host, root } = renderSection(ease);
+
+    expect(editorLabel(host)).toBe(expectedLabel);
+
+    act(() => root.unmount());
+  });
+
+  it("commits the selected preset through the existing custom-ease callback", () => {
+    const { host, root, onCustomEaseCommit } = renderSection("wiggle(3,easeInOut,0.12)");
+    openPresetGrid(host);
+    const tile = host.querySelector<HTMLButtonElement>('[data-ease-preset-id="flow-7"]');
+    expect(tile).not.toBeNull();
+
+    act(() => tile!.click());
+
+    expect(onCustomEaseCommit).toHaveBeenCalledTimes(1);
+    expect(onCustomEaseCommit).toHaveBeenCalledWith("wiggle(7,easeInOut,0.06)");
+    act(() => root.unmount());
+  });
+
+  it("commits Hold as a segment ease", () => {
+    const { host, root, onCustomEaseCommit } = renderSection();
+    openPresetGrid(host);
+    const tile = host.querySelector<HTMLButtonElement>('[data-ease-preset-id="hold"]');
+    expect(tile).not.toBeNull();
+
+    act(() => tile!.click());
+
+    expect(onCustomEaseCommit).toHaveBeenCalledWith("hold");
+    act(() => root.unmount());
+  });
+
+  it("draws Hold as a flat step with an end jump", () => {
+    const { host, root } = renderSection();
+    openPresetGrid(host);
+    const path = presetPath(host, "hold");
+
+    expect(path).toBe("M3,21 L21,21 L21,3");
+
+    act(() => root.unmount());
+  });
+
+  it("draws Hold as the same flat step in the big editor graph", () => {
+    const host = document.createElement("div");
+    document.body.append(host);
+    const root = createRoot(host);
+    act(() => {
+      root.render(<EaseCurveSection ease="hold" onCustomEaseCommit={vi.fn()} />);
+    });
+
+    const path = host
+      .querySelector<SVGElement>('svg[viewBox="0 0 216 288"]')
+      ?.querySelector("path")
+      ?.getAttribute("d");
+    expect(path).toBe("M16,236 L200,236 L200,52");
+    expect(host.querySelectorAll('[role="slider"]')).toHaveLength(0);
+
+    act(() => root.unmount());
+  });
+
+  it("preserves negative custom-ease control points in both curve graphs", () => {
+    const ease = "custom(M0,0 C0.3,-0.5 0.7,1.5 1,1)";
+    const host = document.createElement("div");
+    document.body.append(host);
+    const root = createRoot(host);
+    act(() => {
+      root.render(
+        <>
+          <MiniCurveSvg ease={ease} active={false} />
+          <EaseCurveSection ease={ease} onCustomEaseCommit={vi.fn()} />
+        </>,
+      );
+    });
+
+    const miniPath = host
+      .querySelector<SVGElement>('svg[viewBox="0 0 24 24"]')
+      ?.querySelector("path")
+      ?.getAttribute("d");
+    const editorPath = host
+      .querySelector<SVGElement>('svg[viewBox="0 0 216 288"]')
+      ?.querySelector("path")
+      ?.getAttribute("d");
+    expect(miniPath).toBe("M3,21 C8.399999999999999,30 15.6,-6 21,3");
+    expect(editorPath).toBe("M16,236 C71.19999999999999,328 144.79999999999998,-40 200,52");
+
+    act(() => root.unmount());
+  });
+
+  it("draws wiggle presets as sampled oscillating glyphs", () => {
+    const { host, root } = renderSection("wiggle(3,easeInOut,0.12)");
+    openPresetGrid(host);
+    const flow = presetPath(host, "flow-7");
+    const bounce = presetPath(host, "bounce-3");
+
+    expect(flow).toMatch(/^M.* L/);
+    expect(bounce).toMatch(/^M.* L/);
+    expect(flow).not.toBe(bounce);
+    expect(countPathExtrema(flow!)).toBeGreaterThan(8);
+    expect(countPathExtrema(bounce!)).toBeGreaterThan(8);
+
+    act(() => root.unmount());
+  });
+
+  it("draws Flow with increasing-frequency sampled glyphs", () => {
+    const { host, root } = renderSection("wiggle(3,easeInOut,0.12)");
+    openPresetGrid(host);
+    const flow1 = presetPath(host, "flow-1");
+    const flow7 = presetPath(host, "flow-7");
+
+    expect(flow1).toMatch(/^M.* L/);
+    expect(flow7).toMatch(/^M.* L/);
+    expect(flow1).not.toBe(flow7);
+
+    act(() => root.unmount());
+  });
+
+  it("draws explicit wiggle amplitudes in sampled glyphs", () => {
+    const host = document.createElement("div");
+    document.body.append(host);
+    const root = createRoot(host);
+    act(() =>
+      root.render(
+        <>
+          <MiniCurveSvg ease="wiggle(3,easeInOut,0.1)" active={false} />
+          <MiniCurveSvg ease="wiggle(3,easeInOut,0.2)" active={false} />
+        </>,
+      ),
+    );
+    const paths = Array.from(host.querySelectorAll("path"), (path) => path.getAttribute("d"));
+
+    expect(paths[0]).not.toBe(paths[1]);
+
+    act(() => root.unmount());
+  });
+
+  it("commits each mode default when switching modes", () => {
+    const { host, root, onCustomEaseCommit } = renderStatefulSection();
+
+    clickMode(host, "spring");
+    expect(onCustomEaseCommit).toHaveBeenLastCalledWith("spring(0.42)");
+
+    clickMode(host, "curve");
+    expect(onCustomEaseCommit).toHaveBeenLastCalledWith("custom(M0,0 C0.16,1 0.3,1 1,1)");
+
+    clickMode(host, "wiggle");
+    expect(onCustomEaseCommit).toHaveBeenLastCalledWith("wiggle(3,easeInOut,0.12)");
+
+    act(() => root.unmount());
+  });
+
+  it("keeps spring bounce editing wired to the custom-ease callback", () => {
+    const { host, root, onCustomEaseCommit } = renderStatefulSection("spring(0.37)");
+    const bounceInput = host.querySelector<HTMLInputElement>('[aria-label="Spring bounce"]');
+    expect(bounceInput).not.toBeNull();
+
+    act(() => {
+      bounceInput!.focus();
+      const valueSetter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value")?.set;
+      valueSetter?.call(bounceInput, "0.7");
+      bounceInput!.dispatchEvent(new Event("input", { bubbles: true }));
+    });
+    expect(onCustomEaseCommit).not.toHaveBeenCalled();
+    act(() => bounceInput!.blur());
+    expect(onCustomEaseCommit).toHaveBeenLastCalledWith("spring(0.7)");
+
+    act(() => root.unmount());
+  });
+
+  it("keeps curve handles draggable and commits the edited custom curve", () => {
+    const { host, root, onCustomEaseCommit } = renderSection("power2.out");
+    const graph = host.querySelector<SVGSVGElement>('svg[viewBox="0 0 216 288"]');
+    const handle = graph?.querySelector<SVGCircleElement>(".cursor-grab");
+    expect(graph).not.toBeNull();
+    expect(handle).not.toBeNull();
+    vi.spyOn(graph!, "getBoundingClientRect").mockReturnValue(new DOMRect(0, 0, 216, 288));
+    handle!.setPointerCapture = vi.fn();
+
+    act(() => {
+      handle!.dispatchEvent(
+        new PointerEvent("pointerdown", { bubbles: true, pointerId: 1, clientX: 46, clientY: 52 }),
+      );
+    });
+    act(() => {
+      graph!.dispatchEvent(
+        new PointerEvent("pointermove", {
+          bubbles: true,
+          pointerId: 1,
+          clientX: 108,
+          clientY: 144,
+        }),
+      );
+    });
+    act(() => {
+      graph!.dispatchEvent(new PointerEvent("pointerup", { bubbles: true, pointerId: 1 }));
+    });
+
+    expect(onCustomEaseCommit).toHaveBeenLastCalledWith("custom(M0,0 C0.5,0.5 0.3,1 1,1)");
+
+    act(() => root.unmount());
+  });
+
+  it("nudges curve handles with the keyboard", () => {
+    const { host, root, onCustomEaseCommit } = renderSection("power2.out");
+    const firstHandle = host.querySelector<SVGCircleElement>('[role="slider"]');
+    expect(firstHandle).not.toBeNull();
+
+    act(() => {
+      firstHandle!.dispatchEvent(
+        new KeyboardEvent("keydown", { key: "ArrowRight", bubbles: true }),
+      );
+    });
+
+    expect(onCustomEaseCommit).toHaveBeenLastCalledWith("custom(M0,0 C0.17,1 0.3,1 1,1)");
+    act(() => root.unmount());
+  });
+
+  it("closes the preset menu with Escape and returns focus to its trigger", () => {
+    const { host, root } = renderSection();
+    const trigger = host.querySelector<HTMLButtonElement>("[data-ease-type-dropdown]")!;
+    openPresetGrid(host);
+
+    expect(trigger.getAttribute("aria-expanded")).toBe("true");
+    act(() => document.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape" })));
+
+    expect(trigger.getAttribute("aria-expanded")).toBe("false");
+    expect(document.activeElement).toBe(trigger);
+    act(() => root.unmount());
+  });
+});