@hyperframes/studio 0.8.83 → 0.8.85

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyperframes/studio",
-  "version": "0.8.83",
+  "version": "0.8.85",
   "description": "",
   "repository": {
     "type": "git",
@@ -60,12 +60,12 @@
     "dockview-react": "8.3.1",
     "gsap": "^3.13.0",
     "mediabunny": "^1.45.3",
-    "@hyperframes/core": "0.8.83",
-    "@hyperframes/player": "0.8.83",
-    "@hyperframes/sdk": "0.8.83",
-    "@hyperframes/parsers": "0.8.83",
-    "@hyperframes/studio-server": "0.8.83",
-    "@hyperframes/shader-transitions": "0.8.83"
+    "@hyperframes/core": "0.8.85",
+    "@hyperframes/player": "0.8.85",
+    "@hyperframes/parsers": "0.8.85",
+    "@hyperframes/shader-transitions": "0.8.85",
+    "@hyperframes/studio-server": "0.8.85",
+    "@hyperframes/sdk": "0.8.85"
   },
   "devDependencies": {
     "@tailwindcss/vite": "^4.3.3",
@@ -81,7 +81,7 @@
     "vite": "^6.4.2",
     "vitest": "^4.1.11",
     "zustand": "^5.0.0",
-    "@hyperframes/producer": "0.8.83"
+    "@hyperframes/producer": "0.8.85"
   },
   "peerDependencies": {
     "react": "19",

package/src/components/editor/previewReadOnly.overlay.test.tsx

@@ -20,6 +20,11 @@ const layout = vi.hoisted(() => ({
   offCanvasElements: new Map<string, HTMLElement>(),
 }));
 
+const actions = vi.hoisted(() => ({ current: null as unknown }));
+vi.mock("../../contexts/DomEditContext", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("../../contexts/DomEditContext")>()),
+  useDomEditActionsContextOptional: () => actions.current,
+}));
 vi.mock("./useOffCanvasIndicators", () => ({
   useOffCanvasIndicators: () => ({
     offCanvasRects: layout.offCanvas,
@@ -141,6 +146,7 @@ beforeEach(() => {
 
 afterEach(() => {
   act(() => root.unmount());
+  actions.current = null;
   document.body.innerHTML = "";
   layout.group = [];
   layout.hover = null;
@@ -454,10 +460,18 @@ describe("DomEditOverlay onTextEditingChange", () => {
     expect(spies.onTextEditingChange.mock.calls).toEqual([[true], [false]]);
   });
 
-  it("reports false when the overlay unmounts mid-edit", () => {
-    const { spies, overlay } = fixture();
+  it("saves the typed words and reports false when the overlay unmounts mid-edit", () => {
+    const handleDomRichTextCommit = vi.fn();
+    actions.current = { handleDomRichTextCommit };
+    const { spies, selection, overlay } = fixture();
     pressEnter(overlay);
+    selection.element.textContent = "Typed";
     act(() => root.unmount());
+    expect(handleDomRichTextCommit).toHaveBeenCalledWith({
+      element: selection.element,
+      html: "Typed",
+      previousHtml: "Title",
+    });
     expect(spies.onTextEditingChange.mock.calls).toEqual([[true], [false]]);
   });
 });

package/src/components/nle/CompositionBreadcrumb.tsx

@@ -21,7 +21,7 @@ export function CompositionBreadcrumb({ stack, onNavigate }: CompositionBreadcru
   return (
     <nav
       aria-label="Composition navigation"
-      className="flex items-center gap-1 px-2 h-8 border-b border-neutral-800/50 bg-neutral-900/50 shrink-0"
+      className="flex items-center gap-1 px-2 h-8 border-b border-hairline bg-bg-1 shrink-0"
     >
       {/* Back button — always goes to parent */}
       <button
@@ -33,7 +33,7 @@ export function CompositionBreadcrumb({ stack, onNavigate }: CompositionBreadcru
           });
           onNavigate(stack.length - 2);
         }}
-        className="flex items-center gap-1 px-1.5 py-0.5 rounded-sm text-xs text-neutral-400 hover:text-white hover:bg-neutral-800 active:scale-[0.98] transition-colors"
+        className="flex items-center gap-1 px-1.5 py-0.5 rounded-sm text-xs text-text-3 hover:text-text-0 hover:bg-hover active:scale-[0.98] transition-colors"
         title="Back (Esc, or double-click empty timeline)"
         aria-label="Back to parent composition"
       >
@@ -45,9 +45,9 @@ export function CompositionBreadcrumb({ stack, onNavigate }: CompositionBreadcru
         const isLast = i === stack.length - 1;
         return (
           <span key={level.id} className="flex items-center gap-1">
-            {i > 0 && <CaretRight size={10} className="text-neutral-600 shrink-0" />}
+            {i > 0 && <CaretRight size={10} className="text-text-4 shrink-0" />}
             {isLast ? (
-              <span className="text-xs text-neutral-200 font-medium">{level.label}</span>
+              <span className="text-xs text-text-1 font-medium">{level.label}</span>
             ) : (
               <button
                 type="button"
@@ -55,7 +55,7 @@ export function CompositionBreadcrumb({ stack, onNavigate }: CompositionBreadcru
                   trackStudioEvent("navigation", { action: "breadcrumb", target: level.label });
                   onNavigate(i);
                 }}
-                className="text-xs text-neutral-500 hover:text-neutral-200 transition-colors"
+                className="text-xs text-text-3 hover:text-text-1 transition-colors"
               >
                 {level.label}
               </button>

package/src/compositionStackExport.test.ts

@@ -0,0 +1,7 @@
+import { expect, it } from "vitest";
+import { CompositionBreadcrumb, useCompositionStack } from "@hyperframes/studio";
+
+it("exports the composition stack hook beside the breadcrumb it feeds", () => {
+  expect(typeof useCompositionStack).toBe("function");
+  expect(typeof CompositionBreadcrumb).toBe("function");
+});

package/src/hooks/useDomEditCommits.ts

@@ -411,6 +411,7 @@ export function useDomEditCommits({
     handleDomAddTextField,
     handleDomRemoveTextField,
   } = useDomEditTextCommits({
+    readOnlyPreview,
     activeCompPath,
     previewIframeRef,
     domEditSelection,

package/src/hooks/useDomEditTextCommits.test.tsx

@@ -98,6 +98,7 @@ function commitParams(
     buildDomSelectionFromTarget: vi.fn(async () => null),
     persistDomEditOperations: vi.fn().mockResolvedValue(undefined),
     resolveImportedFontAsset: () => null,
+    readOnlyPreview: false,
     ...overrides,
   };
 }
@@ -124,6 +125,41 @@ afterEach(() => {
 });
 
 describe("useDomEditTextCommits", () => {
+  function richTextProbe() {
+    const { iframe, element } = previewElement('<h1 id="t">Old</h1>', "t");
+    const persist = vi.fn().mockResolvedValue(undefined);
+    const base = commitParams({
+      previewIframeRef: { current: iframe },
+      domEditSelection: selectionFor(element),
+      persistDomEditOperations: persist,
+    });
+    const captured: { hook: ReturnType<typeof useDomEditTextCommits> | null } = { hook: null };
+    function Probe({ readOnlyPreview }: { readOnlyPreview: boolean }) {
+      captured.hook = useDomEditTextCommits({ ...base, readOnlyPreview });
+      return null;
+    }
+    const root = mountReactHarness(<Probe readOnlyPreview={false} />);
+    cleanup = () => act(() => root.unmount());
+    const save = captured.hook!.handleDomRichTextCommit;
+    const commit = { element, html: "New", previousHtml: "Old" };
+    element.innerHTML = "New";
+    return { root, Probe, persist, element, save: () => act(async () => save(commit)) };
+  }
+
+  it("saves in-place text while the preview is editable", async () => {
+    const { persist, save } = richTextProbe();
+    await save();
+    expect(persist).toHaveBeenCalledTimes(1);
+  });
+
+  it("refuses in-place text once the preview turns read-only, through an earlier handler, and puts the old text back", async () => {
+    const { root, Probe, persist, element, save } = richTextProbe();
+    act(() => root.render(<Probe readOnlyPreview />));
+    await save();
+    expect(persist).not.toHaveBeenCalled();
+    expect(element.innerHTML).toBe("Old");
+  });
+
   it("keeps concurrent text commit ownership isolated by target", async () => {
     const { iframe, element: firstElement } = previewElement(
       "<div id='first'>First</div><div id='second'>Second</div>",

package/src/hooks/useDomEditTextCommits.ts

@@ -53,6 +53,7 @@ export interface UseDomEditTextCommitsParams {
   ) => Promise<DomEditSelection | null>;
   persistDomEditOperations: PersistDomEditOperations;
   resolveImportedFontAsset: (fontFamilyValue: string) => ImportedFontAsset | null;
+  readOnlyPreview: boolean;
 }
 
 function canCommitInlineTextSelection(selection: DomEditSelection, element: HTMLElement): boolean {
@@ -114,7 +115,10 @@ export function useDomEditTextCommits({
   buildDomSelectionFromTarget,
   persistDomEditOperations,
   resolveImportedFontAsset,
+  readOnlyPreview,
 }: UseDomEditTextCommitsParams) {
+  const latestReadOnlyPreviewRef = useRef(readOnlyPreview);
+  latestReadOnlyPreviewRef.current = readOnlyPreview;
   const domTextCommitVersionRef = useRef(new Map<string, symbol>());
   const domStyleCommitVersionRef = useRef(new Map<string, symbol>());
 
@@ -319,6 +323,10 @@ export function useDomEditTextCommits({
   const handleDomRichTextCommit = useCallback(
     async ({ element, html, previousHtml }: InlineTextEditCommit) => {
       if (!domEditSelection) return;
+      if (latestReadOnlyPreviewRef.current) {
+        if (element.isConnected && element.innerHTML === html) element.innerHTML = previousHtml;
+        return;
+      }
       // The same gate that let the edit open, not the design panel's.
       //
       // The panel's rule is about its text fields, and it has none for an

package/src/hooks/useInlineTextEdit.test.tsx

@@ -170,6 +170,45 @@ describe("useInlineTextEdit", () => {
     expect(element.hasAttribute("contenteditable")).toBe(false);
   });
 
+  it("saves an open edit when the editor unmounts", () => {
+    const element = heading();
+    const { controls, root, onCommit } = mount();
+
+    act(() => {
+      controls().start(element);
+    });
+    element.textContent = "Motion Playground Live";
+    act(() => root.unmount());
+
+    expect(onCommit.mock.calls).toEqual([
+      [{ element, html: "Motion Playground Live", previousHtml: "Motion Playground" }],
+    ]);
+    expect(element.hasAttribute("contenteditable")).toBe(false);
+  });
+
+  it("keeps the edit open when the commit function changes", () => {
+    const element = heading();
+    const controls: { current: InlineTextEditControls | null } = { current: null };
+    function Probe({ onCommit }: { onCommit: () => void }) {
+      controls.current = useInlineTextEdit({ onCommit });
+      return null;
+    }
+    const root = createRoot(document.body.appendChild(document.createElement("div")));
+    const first = vi.fn();
+    const second = vi.fn();
+    act(() => root.render(<Probe onCommit={first} />));
+    act(() => {
+      controls.current!.start(element);
+    });
+    act(() => root.render(<Probe onCommit={second} />));
+
+    expect(controls.current!.session?.element).toBe(element);
+    expect(first).not.toHaveBeenCalled();
+    act(() => root.unmount());
+    expect(first).not.toHaveBeenCalled();
+    expect(second).toHaveBeenCalledTimes(1);
+  });
+
   it("hands the current text over exactly once when it commits", () => {
     const element = heading();
     const { controls, root, onCommit } = mount();

package/src/hooks/useInlineTextEdit.ts

@@ -245,15 +245,11 @@ export function useInlineTextEdit({
     };
   }, [session, commit, cancel]);
 
-  // Navigation can remove the overlay while the opening frame is pending.
-  // Teardown is the single owner of cancelling that frame and restoring the
-  // composition node, so unmount closes through the same path as every exit.
-  useEffect(
-    () => () => {
-      teardown();
-    },
-    [teardown],
-  );
+  // Unmount keeps the typed words, as blur does. Read through a ref so a new
+  // onCommit never closes the session mid-edit.
+  const commitRef = useRef(commit);
+  commitRef.current = commit;
+  useEffect(() => () => commitRef.current(), []);
 
   return { session, start, commit, cancel };
 }

package/src/index.ts

@@ -9,6 +9,7 @@ export { DEFAULT_SHORTCUT_SECTIONS } from "./player/components/studioShortcuts";
 export type { ShortcutHint, ShortcutSection } from "./player/components/studioShortcuts";
 export { CompositionBreadcrumb } from "./components/nle/CompositionBreadcrumb";
 export type { CompositionLevel } from "./components/nle/CompositionBreadcrumb";
+export { useCompositionStack } from "./components/nle/useCompositionStack";
 
 // Player (preview, timeline, playback controls)
 export {

package/src/player/components/TimelineLanes.tsx

@@ -134,9 +134,8 @@ export function TimelineLanes({
     focusedTargetId,
     rowGeometry,
     scrollRef,
-    onToggleRow: (row) => {
-      if (row.elementId) toggleClipExpandedTracked(row.elementId);
-    },
+    onToggleRow: (row) => row.elementId && toggleClipExpandedTracked(row.elementId),
+    onDrillDown,
   });
   return (
     <div

package/src/player/components/timelineKeyboardNavigation.ts

@@ -49,6 +49,7 @@ export interface TimelineLogicalItem {
   elementId: string;
   /** The item's time anchor. Clips use their midpoint; ease controls use the segment midpoint. */
   time: number;
+  element?: TimelineElement;
   keyframeTarget?: TimelineKeyframeTarget;
 }
 
@@ -113,6 +114,7 @@ function clipItems(rowId: string, elements: readonly TimelineElement[]): Timelin
         rowId,
         elementId: id,
         time: element.start + element.duration / 2,
+        element,
       };
     });
 }

package/src/player/components/useTimelineKeyboardActor.test.tsx

@@ -3,7 +3,7 @@
 import React, { act, useRef } from "react";
 import { createRoot } from "react-dom/client";
 import { afterEach, describe, expect, it, vi } from "vitest";
-import { usePlayerStore } from "../store/playerStore";
+import { usePlayerStore, type TimelineElement } from "../store/playerStore";
 import { createTimelineRowGeometry } from "./timelineLayout";
 import type { TimelineLogicalRow } from "./timelineKeyboardNavigation";
 import { useTimelineKeyboardActor } from "./useTimelineKeyboardActor";
@@ -57,6 +57,7 @@ interface HarnessProps {
   logicalRows?: readonly TimelineLogicalRow[];
   rowHeights?: readonly number[];
   onToggleRow?: (target: TimelineLogicalRow) => void;
+  onDrillDown?: (element: TimelineElement) => void;
 }
 
 function Harness({
@@ -64,6 +65,7 @@ function Harness({
   logicalRows = rows,
   rowHeights = logicalRows.map(() => 48),
   onToggleRow = vi.fn(),
+  onDrillDown,
 }: HarnessProps) {
   const scrollRef = useRef<HTMLDivElement>(null);
   const keyboard = useTimelineKeyboardActor({
@@ -75,6 +77,7 @@ function Harness({
     ),
     scrollRef,
     onToggleRow,
+    onDrillDown,
   });
   return (
     <div ref={scrollRef} onFocus={keyboard.onFocus} onKeyDown={keyboard.onKeyDown}>
@@ -228,6 +231,26 @@ describe("useTimelineKeyboardActor", () => {
     act(() => root.unmount());
   });
 
+  it("drills into a composition clip on Enter and leaves a plain clip alone", () => {
+    const scene = { id: "scene", tag: "div", start: 0, duration: 2, track: 1 };
+    const withElements = rows.map((row, index) => ({
+      ...row,
+      items: row.items.map((item) => ({
+        ...item,
+        element: index === 0 ? { ...scene, compositionSrc: "scene.html" } : scene,
+      })),
+    }));
+    const onDrillDown = vi.fn();
+    const { host, root } = renderHarness({ logicalRows: withElements, onDrillDown });
+    const composition = host.querySelector<HTMLElement>('[data-timeline-focus-id="clip-1"]')!;
+    const plain = host.querySelector<HTMLElement>('[data-timeline-focus-id="clip-2"]')!;
+    expect(key(plain, "Enter").defaultPrevented).toBe(false);
+    expect(onDrillDown).not.toHaveBeenCalled();
+    expect(key(composition, "Enter").defaultPrevented).toBe(true);
+    expect(onDrillDown).toHaveBeenCalledWith(withElements[0]!.items[0]!.element);
+    act(() => root.unmount());
+  });
+
   it("collapses expanded rows and leaves native header controls to the browser", () => {
     const onToggleRow = vi.fn();
     const expandedRows = [{ ...rows[0]!, expanded: true }, ...rows.slice(1)];

package/src/player/components/useTimelineKeyboardActor.ts

@@ -1,5 +1,5 @@
 import { useCallback, useMemo, type FocusEvent, type KeyboardEvent, type RefObject } from "react";
-import { usePlayerStore } from "../store/playerStore";
+import { usePlayerStore, type TimelineElement } from "../store/playerStore";
 import type { TimelineRowGeometry } from "./timelineLayout";
 import {
   isTimelineNavigationKey,
@@ -14,6 +14,7 @@ interface TimelineKeyboardActorInput {
   rowGeometry: TimelineRowGeometry;
   scrollRef: RefObject<HTMLDivElement | null>;
   onToggleRow: (target: TimelineLogicalRow) => void;
+  onDrillDown?: (element: TimelineElement) => void;
 }
 
 function eventTarget(event: FocusEvent | KeyboardEvent): HTMLElement | null {
@@ -70,6 +71,7 @@ export function useTimelineKeyboardActor({
   rowGeometry,
   scrollRef,
   onToggleRow,
+  onDrillDown,
 }: TimelineKeyboardActorInput) {
   const rovingTargetId =
     (focusedTargetId && locateTimelineLogicalTarget(logicalRows, focusedTargetId)?.target.id) ??
@@ -130,6 +132,12 @@ export function useTimelineKeyboardActor({
         openContextMenu(targetElement);
         return;
       }
+      const composition = located.target.kind === "clip" && located.target.element;
+      if (event.key === "Enter" && composition && composition.compositionSrc && onDrillDown) {
+        event.preventDefault();
+        onDrillDown(composition);
+        return;
+      }
       if (
         (event.key !== "Enter" && event.key !== " ") ||
         located.target.kind !== "row" ||
@@ -140,7 +148,7 @@ export function useTimelineKeyboardActor({
       event.preventDefault();
       onToggleRow(located.target);
     },
-    [logicalRowCountByTrack, logicalRows, onToggleRow, rowGeometry, scrollRef],
+    [logicalRowCountByTrack, logicalRows, onDrillDown, onToggleRow, rowGeometry, scrollRef],
   );
 
   return { rovingTargetId, onFocus, onKeyDown };

package/src/player/hooks/timelinePlayerSync.test.ts

@@ -13,6 +13,7 @@ describe("timelineElementsChanged", () => {
     ["audio group hidden", { audioGroupHidden: true }],
     ["fade in", { fadeIn: 1 }],
     ["fade out", { fadeOut: 1 }],
+    ["source (re-pointed at its preview copy)", { src: "clip1.mp4?hf-proxy=h264" }],
   ])("sees a clip whose %s changed with no timing change", (_name, change) => {
     expect(timelineElementsChanged([clip], [{ ...clip, ...change }])).toBe(true);
     expect(timelineElementsChanged([{ ...clip, ...change }], [{ ...clip, ...change }])).toBe(false);

package/src/player/hooks/timelinePlayerSync.ts

@@ -15,6 +15,7 @@ const RENDERED_FIELDS: readonly (keyof TimelineElement)[] = [
   "audioGroupHidden",
   "fadeIn",
   "fadeOut",
+  "src",
 ];
 
 /** Whether a derived timeline changes any field that affects rendering. */

package/src/player/lib/timelineDOM.test.ts

@@ -9,7 +9,11 @@ import {
 import { isTimelineIgnoredElement } from "./timelineElementHelpers";
 import { computeResizePreview } from "../components/timelineClipDragPreview";
 import type { TimelineElement } from "../store/playerStore";
-import { readMediaOffsetSeconds } from "@hyperframes/parsers/media-duration";
+import {
+  MAX_PLAYBACK_RATE,
+  MIN_PLAYBACK_RATE,
+  readMediaOffsetSeconds,
+} from "@hyperframes/parsers/media-duration";
 
 function el(id: string, extra: Partial<TimelineElement> = {}): TimelineElement {
   return { id, tag: "img", start: 0, duration: 5, track: 0, ...extra };
@@ -269,19 +273,49 @@ describe("group info cache", () => {
 
 describe("parseTimelineFromDOM — canonical playback rate", () => {
   it.each([
-    ["10", 5],
-    ["0.01", 0.1],
-  ])("clamps authored rate %s to %s for trim and split math", (authored, expected) => {
-    const doc = makeDoc(`
+    ["8", 8],
+    ["10", MAX_PLAYBACK_RATE],
+    ["50", MAX_PLAYBACK_RATE],
+    ["0.01", MIN_PLAYBACK_RATE],
+  ])(
+    "clamps authored rate %s to %s, as playback does, for trim and split math",
+    (authored, expected) => {
+      const doc = makeDoc(`
       <div data-composition-id="root">
         <div id="nested" class="clip" data-composition-src="scene.html"
           data-start="0" data-duration="5" data-playback-rate="${authored}"></div>
       </div>
     `);
 
-    const nested = parseTimelineFromDOM(doc, 10).find((entry) => entry.domId === "nested");
+      const nested = parseTimelineFromDOM(doc, 10).find((entry) => entry.domId === "nested");
+
+      expect(nested?.playbackRate).toBe(expected);
+    },
+  );
+});
 
-    expect(nested?.playbackRate).toBe(expected);
+describe("parseTimelineFromDOM — head trim at an authored speed above 5x", () => {
+  it("moves the in-point by the speed playback uses", () => {
+    const doc = makeDoc(`
+      <div data-composition-id="root">
+        <video id="v" class="clip" data-start="2" data-duration="4" data-media-start="1"
+          data-playback-rate="8"></video>
+      </div>
+    `);
+    const element = parseTimelineFromDOM(doc, 10).find((e) => e.domId === "v")!;
+    const preview = computeResizePreview(
+      {
+        element,
+        edge: "start",
+        originClientX: 0,
+        previewStart: 2,
+        previewDuration: 4,
+        started: true,
+      },
+      100,
+      { scroll: null, pps: 100, buildSnapTargets: () => [] },
+    );
+    expect([preview.previewStart, preview.previewPlaybackStart]).toEqual([3, 9]);
   });
 });
 

package/src/player/lib/timelineElementHelpers.ts

@@ -13,7 +13,11 @@ import { isFinitePositive } from "./playbackAdapter";
 import { getSourceScopedSelectorIndex } from "../../utils/sourceScopedSelectorIndex";
 import { HF_AUDIO_GROUP_TAG } from "@hyperframes/core/audio-groups";
 import { readElementFades } from "@hyperframes/core/audio-fade";
-import { type AttrReader, readMediaOffsetSeconds } from "@hyperframes/parsers/media-duration";
+import {
+  type AttrReader,
+  clampPlaybackRate,
+  readMediaOffsetSeconds,
+} from "@hyperframes/parsers/media-duration";
 
 // ---------------------------------------------------------------------------
 // Layer-reveal lift transparency
@@ -79,10 +83,6 @@ function readDurationAttribute(el: Element | null | undefined): number {
   return isFinitePositive(duration) ? duration : 0;
 }
 
-function normalizePlaybackRate(raw: number): number {
-  return Number.isFinite(raw) && raw > 0 ? Math.max(0.1, Math.min(5, raw)) : 1;
-}
-
 export function isTimelineIgnoredElement(el: Element): boolean {
   // An `<hf-audio-group>` is a mixer bus with no timing of its own, drawn as a group row, never a clip.
   if (el.tagName.toLowerCase() === HF_AUDIO_GROUP_TAG) return true;
@@ -199,7 +199,7 @@ function applyPlaybackMetadataFromElement(entry: TimelineElement, el: Element):
 
   const authoredPlaybackRate = Number.parseFloat(el.getAttribute("data-playback-rate") ?? "");
   if (Number.isFinite(authoredPlaybackRate) && authoredPlaybackRate > 0) {
-    entry.playbackRate = normalizePlaybackRate(authoredPlaybackRate);
+    entry.playbackRate = clampPlaybackRate(authoredPlaybackRate);
   }
 }
 
@@ -262,7 +262,7 @@ export function applyMediaMetadataFromElement(entry: TimelineElement, el: Elemen
 
   const playbackRate = mediaEl.defaultPlaybackRate;
   if (entry.playbackRate == null && Number.isFinite(playbackRate) && playbackRate > 0) {
-    entry.playbackRate = normalizePlaybackRate(playbackRate);
+    entry.playbackRate = clampPlaybackRate(playbackRate);
   }
 }