@hyperframes/studio 0.8.56 → 0.8.57

package/src/components/editor/PreviewOverlayProvider.tsx

@@ -0,0 +1,86 @@
+import { createContext, useContext, useRef, useState, type ReactNode, type RefObject } from "react";
+import {
+  usePreviewCompositionRect,
+  type PreviewCompositionRect,
+} from "./usePreviewCompositionRect";
+import { usePreviewGuidesStore } from "./previewGuidesStore";
+import { readStudioUiPreferences, writeStudioUiPreferences } from "../../utils/studioUiPreferences";
+import { useLivePreviewIframe } from "../../player/store/previewIframeStore";
+
+export interface PreviewSnapPreferences {
+  snapEnabled: boolean;
+  gridVisible: boolean;
+  gridSpacing: number;
+  snapToGrid: boolean;
+}
+
+interface PreviewOverlayContextValue {
+  state: {
+    snapPrefs: PreviewSnapPreferences;
+    rulerVisible: boolean;
+    safeMarginsVisible: boolean;
+    iframeRef: RefObject<HTMLIFrameElement | null>;
+    compositionRect: PreviewCompositionRect;
+  };
+  actions: {
+    setSnapPrefs: (patch: Partial<PreviewSnapPreferences>) => void;
+    toggleRulers: () => void;
+    toggleSafeMargins: () => void;
+  };
+}
+
+const PreviewOverlayContext = createContext<PreviewOverlayContextValue | null>(null);
+
+function readSnapPrefs(): PreviewSnapPreferences {
+  const prefs = readStudioUiPreferences();
+  return {
+    snapEnabled: prefs.snapEnabled ?? true,
+    gridVisible: prefs.gridVisible ?? false,
+    gridSpacing: prefs.gridSpacing ?? 50,
+    snapToGrid: prefs.snapToGrid ?? false,
+  };
+}
+
+export interface PreviewOverlayProviderProps {
+  iframe?: HTMLIFrameElement | null;
+  children: ReactNode;
+}
+
+export function PreviewOverlayProvider({ iframe, children }: PreviewOverlayProviderProps) {
+  const overlayRef = useRef<HTMLDivElement | null>(null);
+  const [snapPrefs, setSnapPrefs] = useState(readSnapPrefs);
+  const rulerVisible = usePreviewGuidesStore((state) => state.rulerVisible);
+  const safeMarginsVisible = usePreviewGuidesStore((state) => state.safeMarginsVisible);
+  const liveIframe = useLivePreviewIframe();
+  const resolvedIframe = iframe ?? liveIframe;
+  const iframeRef = useRef<HTMLIFrameElement | null>(resolvedIframe);
+  iframeRef.current = resolvedIframe;
+  const compositionRect = usePreviewCompositionRect(overlayRef, resolvedIframe);
+
+  const contextValue: PreviewOverlayContextValue = {
+    state: { snapPrefs, rulerVisible, safeMarginsVisible, iframeRef, compositionRect },
+    actions: {
+      setSnapPrefs: (patch) => {
+        writeStudioUiPreferences(patch);
+        setSnapPrefs((current) => ({ ...current, ...patch }));
+      },
+      toggleRulers: () => usePreviewGuidesStore.getState().toggle("rulerVisible"),
+      toggleSafeMargins: () => usePreviewGuidesStore.getState().toggle("safeMarginsVisible"),
+    },
+  };
+
+  return (
+    <PreviewOverlayContext.Provider value={contextValue}>
+      <div ref={overlayRef} className="absolute inset-0">
+        {children}
+      </div>
+    </PreviewOverlayContext.Provider>
+  );
+}
+
+export function usePreviewOverlayContext(): PreviewOverlayContextValue {
+  const context = useContext(PreviewOverlayContext);
+  if (!context)
+    throw new Error("usePreviewOverlayContext must be used within PreviewOverlayProvider");
+  return context;
+}

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

@@ -7,6 +7,7 @@ import { useAppHotkeys } from "../../hooks/useAppHotkeys";
 import { usePlayerStore } from "../../player/store/playerStore";
 import type { DomEditSelection } from "./domEditing";
 import { SnapToolbar } from "./SnapToolbar";
+import { PreviewOverlayProvider } from "./PreviewOverlayProvider";
 import { usePreviewGuidesStore } from "./previewGuidesStore";
 
 (globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
@@ -17,14 +18,18 @@ afterEach(() => {
   usePlayerStore.getState().reset();
 });
 
-function renderToolbar(onSnapChange = vi.fn()) {
+function renderToolbar() {
   const host = document.createElement("div");
   document.body.append(host);
   const root = createRoot(host);
   act(() => {
-    root.render(<SnapToolbar onSnapChange={onSnapChange} />);
+    root.render(
+      <PreviewOverlayProvider>
+        <SnapToolbar />
+      </PreviewOverlayProvider>,
+    );
   });
-  return { root, onSnapChange };
+  return { root };
 }
 
 function AppHotkeyHarness() {
@@ -60,7 +65,7 @@ function AppHotkeyHarness() {
   return null;
 }
 
-function renderToolbarWithAppHotkeys(onSnapChange = vi.fn()) {
+function renderToolbarWithAppHotkeys() {
   const host = document.createElement("div");
   document.body.append(host);
   const root = createRoot(host);
@@ -68,16 +73,18 @@ function renderToolbarWithAppHotkeys(onSnapChange = vi.fn()) {
     root.render(
       <>
         <AppHotkeyHarness />
-        <SnapToolbar onSnapChange={onSnapChange} />
+        <PreviewOverlayProvider>
+          <SnapToolbar />
+        </PreviewOverlayProvider>
       </>,
     );
   });
-  return { root, onSnapChange };
+  return { root };
 }
 
 describe("SnapToolbar keyboard shortcuts", () => {
   it("toggles snap on an unclaimed S keypress", () => {
-    const { root, onSnapChange } = renderToolbar();
+    const { root } = renderToolbar();
 
     act(() => {
       document.dispatchEvent(
@@ -85,12 +92,14 @@ describe("SnapToolbar keyboard shortcuts", () => {
       );
     });
 
-    expect(onSnapChange).toHaveBeenCalledWith(expect.objectContaining({ snapEnabled: false }));
+    expect(
+      JSON.parse(window.localStorage.getItem("hf-studio-ui-preferences") ?? "{}").snapEnabled,
+    ).toBe(false);
     act(() => root.unmount());
   });
 
   it("does not toggle snap when another handler already prevented S", () => {
-    const { root, onSnapChange } = renderToolbar();
+    const { root } = renderToolbar();
     const event = new KeyboardEvent("keydown", {
       key: "s",
       bubbles: true,
@@ -102,12 +111,14 @@ describe("SnapToolbar keyboard shortcuts", () => {
       document.dispatchEvent(event);
     });
 
-    expect(onSnapChange).not.toHaveBeenCalled();
+    expect(
+      JSON.parse(window.localStorage.getItem("hf-studio-ui-preferences") ?? "{}").snapEnabled,
+    ).not.toBe(false);
     act(() => root.unmount());
   });
 
   it("does not toggle snap when the app split shortcut claims S without a selected clip", () => {
-    const { root, onSnapChange } = renderToolbarWithAppHotkeys();
+    const { root } = renderToolbarWithAppHotkeys();
 
     act(() => {
       document.dispatchEvent(
@@ -115,7 +126,9 @@ describe("SnapToolbar keyboard shortcuts", () => {
       );
     });
 
-    expect(onSnapChange).not.toHaveBeenCalled();
+    expect(
+      JSON.parse(window.localStorage.getItem("hf-studio-ui-preferences") ?? "{}").snapEnabled,
+    ).not.toBe(false);
     act(() => root.unmount());
   });
 });

package/src/components/editor/SnapToolbar.tsx

@@ -1,59 +1,26 @@
 import { memo, useCallback, useEffect, useRef, useState } from "react";
 import { MagnetStraight, GridFour, Path, Ruler, FrameCorners } from "@phosphor-icons/react";
-import { readStudioUiPreferences, writeStudioUiPreferences } from "../../utils/studioUiPreferences";
 import { usePlayerStore } from "../../player/store/playerStore";
-import { usePreviewGuidesStore } from "./previewGuidesStore";
-
-const SNAP_DEFAULTS = {
-  snapEnabled: true,
-  gridVisible: false,
-  gridSpacing: 50,
-  snapToGrid: false,
-};
-
-// fallow-ignore-next-line complexity
-function readSnapPrefs() {
-  const prefs = readStudioUiPreferences();
-  return {
-    snapEnabled: prefs.snapEnabled ?? SNAP_DEFAULTS.snapEnabled,
-    gridVisible: prefs.gridVisible ?? SNAP_DEFAULTS.gridVisible,
-    gridSpacing: prefs.gridSpacing ?? SNAP_DEFAULTS.gridSpacing,
-    snapToGrid: prefs.snapToGrid ?? SNAP_DEFAULTS.snapToGrid,
-  };
-}
-
-interface SnapToolbarProps {
-  onSnapChange?: (prefs: {
-    snapEnabled: boolean;
-    gridVisible: boolean;
-    gridSpacing: number;
-    snapToGrid: boolean;
-  }) => void;
-}
+import { usePreviewOverlayContext } from "./PreviewOverlayProvider";
 
 // fallow-ignore-next-line complexity
-export const SnapToolbar = memo(function SnapToolbar({ onSnapChange }: SnapToolbarProps) {
-  const [prefs, setPrefs] = useState(readSnapPrefs);
+export const SnapToolbar = memo(function SnapToolbar() {
   const [gridPopoverOpen, setGridPopoverOpen] = useState(false);
+  const { state, actions } = usePreviewOverlayContext();
+  const { snapPrefs: prefs, rulerVisible, safeMarginsVisible } = state;
   // Motion-path "set destination" toggle — shown only when the selected element
   // can take a path; arms a single canvas click to place it (MotionPathOverlay).
   const motionPathCreateAvailable = usePlayerStore((s) => s.motionPathCreateAvailable);
   const motionPathArmed = usePlayerStore((s) => s.motionPathArmed);
   const setMotionPathArmed = usePlayerStore((s) => s.setMotionPathArmed);
-  const guides = usePreviewGuidesStore();
   const popoverRef = useRef<HTMLDivElement>(null);
   const gridButtonRef = useRef<HTMLButtonElement>(null);
 
   const updatePrefs = useCallback(
     (patch: Partial<typeof prefs>) => {
-      setPrefs((prev) => {
-        const next = { ...prev, ...patch };
-        writeStudioUiPreferences(patch);
-        onSnapChange?.(next);
-        return next;
-      });
+      actions.setSnapPrefs(patch);
     },
-    [onSnapChange],
+    [actions],
   );
 
   const toggleSnap = useCallback(() => {
@@ -74,16 +41,16 @@ export const SnapToolbar = memo(function SnapToolbar({ onSnapChange }: SnapToolb
       if (t instanceof HTMLIFrameElement) return;
       if (e.key === "s" && !e.metaKey && !e.ctrlKey && !e.altKey) {
         e.preventDefault();
-        updatePrefs({ snapEnabled: !readSnapPrefs().snapEnabled });
+        updatePrefs({ snapEnabled: !prefs.snapEnabled });
       }
       if (e.key === "g" && !e.metaKey && !e.ctrlKey && !e.altKey) {
         e.preventDefault();
-        updatePrefs({ gridVisible: !readSnapPrefs().gridVisible });
+        updatePrefs({ gridVisible: !prefs.gridVisible });
       }
     };
     document.addEventListener("keydown", handleKeyDown);
     return () => document.removeEventListener("keydown", handleKeyDown);
-  }, [updatePrefs]);
+  }, [prefs.gridVisible, prefs.snapEnabled, updatePrefs]);
 
   useEffect(() => {
     if (!gridPopoverOpen) return;
@@ -123,23 +90,27 @@ export const SnapToolbar = memo(function SnapToolbar({ onSnapChange }: SnapToolb
           ["rulerVisible", "Ruler", Ruler],
           ["safeMarginsVisible", "Safe margins", FrameCorners],
         ] as const
-      ).map(([key, label, Icon]) => (
-        <button
-          key={key}
-          type="button"
-          className={`rounded-md p-1.5 transition-colors active:scale-[0.95] ${
-            guides[key]
-              ? "bg-studio-accent/20 text-studio-accent"
-              : "bg-black/40 text-white/60 hover:bg-black/60 hover:text-white/80"
-          }`}
-          onClick={() => guides.toggle(key)}
-          title={`${label} ${guides[key] ? "on" : "off"}`}
-          aria-label={`Toggle ${label.toLowerCase()}`}
-          aria-pressed={guides[key]}
-        >
-          <Icon size={16} weight={guides[key] ? "fill" : "regular"} />
-        </button>
-      ))}
+      ).map(([key, label, Icon]) => {
+        const visible = key === "rulerVisible" ? rulerVisible : safeMarginsVisible;
+        const toggle = key === "rulerVisible" ? actions.toggleRulers : actions.toggleSafeMargins;
+        return (
+          <button
+            key={key}
+            type="button"
+            className={`rounded-md p-1.5 transition-colors active:scale-[0.95] ${
+              visible
+                ? "bg-studio-accent/20 text-studio-accent"
+                : "bg-black/40 text-white/60 hover:bg-black/60 hover:text-white/80"
+            }`}
+            onClick={toggle}
+            title={`${label} ${visible ? "on" : "off"}`}
+            aria-label={`Toggle ${label.toLowerCase()}`}
+            aria-pressed={visible}
+          >
+            <Icon size={16} weight={visible ? "fill" : "regular"} />
+          </button>
+        );
+      })}
       <button
         type="button"
         className={`rounded-md p-1.5 transition-colors active:scale-[0.95] ${

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

@@ -250,8 +250,8 @@ describe("FlatMediaSection — volume/rate/media-start", () => {
       rateTrack.dispatchEvent(new MouseEvent("pointerdown", { bubbles: true, clientX: 100 }));
       rateTrack.dispatchEvent(new MouseEvent("pointerup", { bubbles: true, clientX: 100 }));
     });
-    // min=25, max=300, ratio=1.0 -> raw=300 -> commit(300) -> 300/100=3 -> "3"
-    expect(onSetAttribute).toHaveBeenCalledWith("playback-rate", "3");
+    // the speed slider is log-scaled 0.1x..10x, so the far end of the track is 10x
+    expect(onSetAttribute).toHaveBeenCalledWith("playback-rate", "10");
     act(() => root.unmount());
   });
 

package/src/components/editor/propertyPanelFlatMediaSection.tsx

@@ -13,6 +13,10 @@ import {
 import { FlatSelectRow, FlatSlider } from "./propertyPanelFlatPrimitives";
 import { FlatToggle } from "./propertyPanelFlatToggle";
 import { AutomationToggle } from "./propertyPanelFxControls";
+import { RATE_RANGE } from "@hyperframes/core/audio-automation";
+import { type SpeedPresetId } from "@hyperframes/core/speed-ramp";
+import { SPEED_PRESET_OPTIONS, type RateBinding } from "./useVolumeAutomation";
+import { fromUnit, toUnit } from "../../player/components/automationLaneGeometry";
 import {
   AUDIO_GAIN_FADER_MAX,
   AUDIO_GAIN_FADER_MIN,
@@ -36,6 +40,7 @@ export function FlatMediaSection({
   onRemoveVolumeAutomation,
   onCommitVolumeAt,
   automatedVolumeValue,
+  rate,
 }: {
   projectDir: string | null;
   element: DomEditSelection;
@@ -49,6 +54,8 @@ export function FlatMediaSection({
   onRemoveVolumeAutomation?: () => void;
   onCommitVolumeAt?: (v: number) => void;
   automatedVolumeValue?: number;
+  /** Speed lane binding and presets; absent outside the Studio panel. */
+  rate?: RateBinding;
   onRemoveBackground?: (
     inputPath: string,
     options: {
@@ -77,7 +84,9 @@ export function FlatMediaSection({
     Number.parseFloat(
       element.dataAttributes["media-start"] ?? element.dataAttributes["playback-start"] ?? "0",
     ) || 0;
-  const playbackRate = Number.parseFloat(element.dataAttributes["playback-rate"] ?? "1") || 1;
+  const constantRate = Number.parseFloat(element.dataAttributes["playback-rate"] ?? "1") || 1;
+  const playbackRate =
+    rate?.automated && rate.automatedValue !== undefined ? rate.automatedValue : constantRate;
   const sourceDuration =
     Number.parseFloat(element.dataAttributes["source-duration"] ?? "") ||
     (el as HTMLMediaElement).duration ||
@@ -259,17 +268,42 @@ export function FlatMediaSection({
               }
             />
           </div>
-          <FlatSlider
-            label="Rate"
-            value={playbackRate * 100}
-            min={25}
-            max={300}
-            tier={playbackRate === 1 ? "default" : "explicitCustom"}
-            displayValue={`${formatNumericValue(playbackRate)}x`}
-            onCommit={(next) =>
-              void onSetAttribute("playback-rate", formatNumericValue(next / 100))
-            }
-          />
+          <div className="flex items-center gap-1">
+            <div className="min-w-0 flex-1">
+              <FlatSlider
+                label="Speed"
+                value={Math.round(toUnit(RATE_RANGE, playbackRate) * 1000)}
+                min={0}
+                max={1000}
+                tier={playbackRate === 1 ? "default" : "explicitCustom"}
+                displayValue={`${formatNumericValue(playbackRate)}x`}
+                onCommit={(next) => {
+                  const speed = fromUnit(RATE_RANGE, next / 1000);
+                  if (rate?.automated) {
+                    rate.onCommitAt(speed);
+                  } else {
+                    void onSetAttribute("playback-rate", formatNumericValue(speed));
+                  }
+                }}
+              />
+            </div>
+            <AutomationToggle
+              paramKey="rate"
+              label="Speed"
+              automated={Boolean(rate?.automated)}
+              onAutomate={rate ? () => rate.onAutomate() : undefined}
+              onRemoveAutomation={rate ? () => rate.onRemoveAutomation() : undefined}
+            />
+          </div>
+          {rate?.canApplyPreset && (
+            <FlatSelectRow
+              label="Speed preset"
+              value=""
+              options={[{ value: "", label: "Choose…" }, ...SPEED_PRESET_OPTIONS]}
+              tier="default"
+              onChange={(id) => id && rate.onApplyPreset(id as SpeedPresetId)}
+            />
+          )}
           <FlatSlider
             label="Media start"
             value={Math.round(mediaStart * 100)}

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

@@ -1,9 +1,9 @@
 // @vitest-environment happy-dom
 
-import { act, useRef } from "react";
+import { act, useRef, useState } from "react";
 import { createRoot } from "react-dom/client";
 import { afterEach, describe, expect, it } from "vitest";
-import { usePreviewIframeStore } from "../../player/store/previewIframeStore";
+import { resetOverlayFrameLoopForTests } from "./overlayFrameLoop";
 import {
   usePreviewCompositionRect,
   type PreviewCompositionRect,
@@ -12,7 +12,7 @@ import {
 (globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
 
 afterEach(() => {
-  usePreviewIframeStore.getState().setIframe(null);
+  resetOverlayFrameLoopForTests();
   document.body.innerHTML = "";
 });
 
@@ -24,9 +24,12 @@ function boxed<T extends HTMLElement>(el: T, box: [number, number, number, numbe
 
 function mountProbe() {
   let rect: PreviewCompositionRect | undefined;
+  let setIframe: (iframe: HTMLIFrameElement | null) => void = () => {};
   function Probe() {
     const ref = useRef<HTMLDivElement>(null);
-    rect = usePreviewCompositionRect(ref);
+    const [iframe, updateIframe] = useState<HTMLIFrameElement | null>(null);
+    setIframe = updateIframe;
+    rect = usePreviewCompositionRect(ref, iframe);
     return (
       <div
         ref={(el) => {
@@ -38,8 +41,9 @@ function mountProbe() {
   }
   const host = document.createElement("div");
   document.body.append(host);
-  act(() => createRoot(host).render(<Probe />));
-  return () => rect;
+  const root = createRoot(host);
+  act(() => root.render(<Probe />));
+  return { read: () => rect, setIframe, unmount: () => act(() => root.unmount()) };
 }
 
 function compositionFrame(box: [number, number, number, number], width: number, height: number) {
@@ -57,13 +61,13 @@ const settle = () => new Promise((r) => setTimeout(r, 400));
 
 describe("usePreviewCompositionRect", () => {
   it("reports the live preview iframe's box relative to the overlay, scaled to the composition", async () => {
-    const read = mountProbe();
+    const probe = mountProbe();
     const iframe = compositionFrame([110, 70, 960, 540], 1920, 1080);
     await act(async () => {
-      usePreviewIframeStore.getState().setIframe(iframe);
+      probe.setIframe(iframe);
       await settle();
     });
-    expect(read()).toEqual({
+    expect(probe.read()).toEqual({
       left: 100,
       top: 50,
       width: 960,
@@ -71,19 +75,20 @@ describe("usePreviewCompositionRect", () => {
       scaleX: 0.5,
       scaleY: 0.5,
     });
+    probe.unmount();
   });
 
   it("follows the iframe when a reload replaces it", async () => {
-    const read = mountProbe();
+    const probe = mountProbe();
     await act(async () => {
-      usePreviewIframeStore.getState().setIframe(compositionFrame([110, 70, 960, 540], 1920, 1080));
+      probe.setIframe(compositionFrame([110, 70, 960, 540], 1920, 1080));
       await settle();
     });
     await act(async () => {
-      usePreviewIframeStore.getState().setIframe(compositionFrame([60, 40, 500, 500], 1000, 1000));
+      probe.setIframe(compositionFrame([60, 40, 500, 500], 1000, 1000));
       await settle();
     });
-    expect(read()).toEqual({
+    expect(probe.read()).toEqual({
       left: 50,
       top: 20,
       width: 500,
@@ -91,5 +96,6 @@ describe("usePreviewCompositionRect", () => {
       scaleX: 0.5,
       scaleY: 0.5,
     });
+    probe.unmount();
   });
 });

package/src/components/editor/usePreviewCompositionRect.ts

@@ -1,21 +1,21 @@
-import { useMemo, type RefObject } from "react";
-import { usePreviewIframeStore } from "../../player/store/previewIframeStore";
+import { useEffect, useRef, type RefObject } from "react";
+import { requestOverlayFrames } from "./overlayFrameLoop";
 import { useDomEditCompositionRect } from "./useDomEditCompositionRect";
 
 export type { DomEditCompositionRect as PreviewCompositionRect } from "./useDomEditCompositionRect";
 
 /**
  * Where the composition sits inside `overlayRef`, in overlay pixels, plus the scale from
- * composition units to pixels. Follows the live preview iframe across reloads.
+ * composition units to pixels.
  */
-export function usePreviewCompositionRect(overlayRef: RefObject<HTMLDivElement | null>) {
-  const iframeRef = useMemo<RefObject<HTMLIFrameElement | null>>(
-    () => ({
-      get current() {
-        return usePreviewIframeStore.getState().iframe;
-      },
-    }),
-    [],
-  );
+export function usePreviewCompositionRect(
+  overlayRef: RefObject<HTMLDivElement | null>,
+  iframe: HTMLIFrameElement | null,
+) {
+  const iframeRef = useRef<HTMLIFrameElement | null>(iframe);
+  iframeRef.current = iframe;
+  useEffect(() => {
+    requestOverlayFrames();
+  }, [iframe]);
   return useDomEditCompositionRect({ iframeRef, overlayRef });
 }

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

@@ -191,3 +191,71 @@ describe("useVolumeAutomation", () => {
     expect(writtenAutomation(onSetAttributeQuiet).lanes[0].points[0].v).toBe(1);
   });
 });
+
+describe("useVolumeAutomation speed lane", () => {
+  const rateLane = JSON.stringify({
+    version: 1,
+    lanes: [
+      {
+        target: "rate",
+        points: [
+          { t: 0, v: 1 },
+          { t: 4, v: 4 },
+        ],
+      },
+    ],
+  });
+
+  it("seeds a rate lane at the clip's constant rate so automating does not change the speed", () => {
+    const { binding, onSetAttributeQuiet } = bind({ "playback-rate": "2" });
+    binding.rate.onAutomate();
+    expect(writtenAutomation(onSetAttributeQuiet).lanes).toEqual([
+      { target: "rate", points: [{ t: 0, v: 2 }] },
+    ]);
+  });
+
+  it("reports the lane's geometric value at the playhead", () => {
+    // 1x to 4x over 4s: halfway is 2x, not the linear 2.5x
+    const { binding } = bind({ automation: rateLane, start: "0", duration: "4" }, 2);
+    expect(binding.rate.automated).toBe(true);
+    expect(binding.rate.automatedValue).toBeCloseTo(2, 5);
+  });
+
+  it("writes a keyframe on the rate lane and leaves the volume lane alone", () => {
+    const both = JSON.stringify({
+      version: 1,
+      lanes: [
+        { target: "volume", points: [{ t: 0, v: 0.5 }] },
+        { target: "rate", points: [{ t: 0, v: 1 }] },
+      ],
+    });
+    const { binding, onSetAttributeQuiet } = bind(
+      { automation: both, start: "0", duration: "4" },
+      2,
+    );
+    binding.rate.onCommitAt(3);
+    const lanes = writtenAutomation(onSetAttributeQuiet).lanes;
+    expect(lanes.find((l: { target: string }) => l.target === "volume").points).toEqual([
+      { t: 0, v: 0.5 },
+    ]);
+    expect(lanes.find((l: { target: string }) => l.target === "rate").points).toContainEqual({
+      t: 2,
+      v: 3,
+    });
+  });
+
+  it("stretches a preset over the clip's duration", () => {
+    const { binding, onSetAttributeQuiet } = bind({ start: "0", duration: "8" });
+    binding.rate.onApplyPreset("flash-out");
+    const lane = writtenAutomation(onSetAttributeQuiet).lanes[0];
+    expect(lane.target).toBe("rate");
+    expect(lane.points.at(-1).t).toBe(8);
+  });
+
+  it("offers no preset while the clip has no known duration, and writes nothing", () => {
+    const { binding, onSetAttributeQuiet } = bind({ start: "0" });
+    expect(binding.rate.canApplyPreset).toBe(false);
+    binding.rate.onApplyPreset("flash-out");
+    expect(onSetAttributeQuiet).not.toHaveBeenCalled();
+  });
+});