@hyperframes/studio 0.8.106 → 0.8.107

package/src/hooks/useEditHistoryActions.paint.test.tsx

@@ -1,5 +1,5 @@
 // @vitest-environment happy-dom
-import { act, createElement } from "react";
+import { act, createElement, type ReactElement } from "react";
 import { createRoot } from "react-dom/client";
 import { mkdirSync, mkdtempSync, readFileSync, rmSync, writeFileSync } from "node:fs";
 import { tmpdir } from "node:os";
@@ -10,6 +10,11 @@ import {
   openProjectHistory,
   type StudioApiAdapter,
 } from "@hyperframes/studio-server";
+import { useDomEditNudge } from "../components/editor/useDomEditNudge";
+import { DomEditProvider, useDomEditActionsContext } from "../contexts/DomEditContext";
+import { __resetForTests as resetNudgeKeys } from "../utils/canvasNudgeGate";
+import { trackedStudioEdit } from "../utils/studioPendingEdits";
+import { makeSelection } from "./domSelectionTestHarness";
 import { useEditHistoryActions } from "./useEditHistoryActions";
 import { usePersistentEditHistory } from "./usePersistentEditHistory";
 import { usePreviewPersistence } from "./usePreviewPersistence";
@@ -19,6 +24,7 @@ const page = (left: string, top = "0px") =>
 const BEFORE = page("10px");
 const AFTER = page("50px");
 const OUTSIDE = page("50px", "99px");
+const NUDGED = page("51px");
 
 const cleanup: Array<() => unknown> = [];
 let scratch = "";
@@ -78,14 +84,15 @@ async function studio() {
       showToast: () => {},
       syncHistoryPreviewAfterApply: persistence.syncHistoryPreviewAfterApply,
       showHistoryRestoreNow: persistence.showHistoryRestoreNow,
-      waitForPendingDomEditSaves: persistence.waitForPendingDomEditSaves,
+      waitForPendingDomEditSaves: persistence.settlePendingEdits,
     });
     return null;
   }
   const root = createRoot(document.createElement("div"));
   await act(async () => root.render(createElement(Harness)));
   cleanup.push(() => act(() => root.unmount()));
-  const box = () => iframe.contentDocument!.getElementById("box")!.style.left;
+  const element = (id: string) => iframe.contentDocument!.getElementById(id)!;
+  const box = () => element("box").style.left;
   const other = () => iframe.contentDocument!.getElementById("other")!.style.top;
   const show = (html: string) => {
     iframe.contentDocument!.documentElement.innerHTML = new DOMParser().parseFromString(
@@ -105,8 +112,16 @@ async function studio() {
     );
     await vi.waitFor(() => expect(history.undoLabel).toBe("Move layer"));
   };
+  /** Mounts `ui` beside Studio, as the canvas is, for the rest of the test. */
+  const mount = (ui: ReactElement) => {
+    const canvas = createRoot(document.createElement("div"));
+    act(() => canvas.render(ui));
+    cleanup.push(() => act(() => canvas.unmount()));
+  };
   return {
     history: () => history,
+    element,
+    mount,
     persistence: () => persistence,
     actions: () => actions,
     box,
@@ -164,3 +179,107 @@ it("an undo after an outside write ends with the preview showing the file the se
   expect(s.other()).toBe("0px");
   expect(s.box()).toBe("50px");
 });
+
+/** The canvas's arrow-key nudge on the box; `save` stands in for the burst's save once the keys stop. */
+function Nudge({ target, save }: { target: HTMLElement; save: () => Promise<void> }) {
+  const selection = makeSelection("Box", target);
+  const ref = <T,>(current: T) => ({ current });
+  useDomEditNudge({
+    selection,
+    groupSelections: [],
+    allowCanvasMovement: true,
+    selectionRef: ref(selection),
+    overlayRectRef: ref({ left: 0, top: 0, width: 100, height: 40, editScaleX: 1, editScaleY: 1 }),
+    groupOverlayItemsRef: ref([]),
+    gestureRef: ref(null),
+    groupGestureRef: ref(null),
+    blockedMoveRef: ref(null),
+    onManualDragStartRef: ref(() => {}),
+    onBlockedMoveRef: ref(() => {}),
+    onPathOffsetCommitRef: ref(save),
+    onGroupPathOffsetCommitRef: ref(async () => {}),
+  });
+  return null;
+}
+
+it("an undo pressed while a nudge waits for more keys never shows the move before it undone", async () => {
+  const s = await studio();
+  await s.edit();
+  resetNudgeKeys();
+  const save = vi.fn(async () => {
+    writeFileSync(s.path, NUDGED);
+    await s.history().recordEdit({
+      label: "Move layer",
+      files: { "index.html": { before: AFTER, after: NUDGED } },
+    });
+  });
+  s.mount(createElement(Nudge, { target: s.element("box"), save }));
+  act(() => {
+    window.dispatchEvent(new KeyboardEvent("keydown", { key: "ArrowRight", cancelable: true }));
+  });
+
+  const undone = s.actions().undo();
+  expect(s.box()).toBe("50px");
+  await act(() => undone);
+  expect(save).toHaveBeenCalledTimes(1);
+  expect(s.file()).toBe(AFTER);
+  expect(s.box()).toBe("50px");
+});
+
+it("an undo pressed while a queued save fails undoes the edit before it, file and box alike", async () => {
+  const s = await studio();
+  await s.edit();
+  const box = s.element("box");
+  let fail!: () => void;
+  const handleDomStyleCommit = vi.fn(async () => {
+    box.style.left = "70px";
+    try {
+      await s.persistence().queueDomEditSave(async () => {
+        await new Promise<void>((resolve) => (fail = resolve));
+        throw new Error("The save failed.");
+      });
+    } catch (error) {
+      box.style.left = "50px";
+      throw error;
+    }
+  });
+  let actions!: ReturnType<typeof useDomEditActionsContext>;
+  function Canvas() {
+    actions = useDomEditActionsContext();
+    return null;
+  }
+  const value = { handleDomStyleCommit } as unknown as Parameters<
+    typeof DomEditProvider
+  >[0]["value"];
+  s.mount(
+    <DomEditProvider value={value}>
+      <Canvas />
+    </DomEditProvider>,
+  );
+  const failed = actions.handleDomStyleCommit("left", "70px");
+
+  const undone = s.actions().undo();
+  await vi.waitFor(() => expect(fail).toBeTypeOf("function"));
+  fail();
+  await expect(failed).rejects.toThrow("The save failed.");
+  await act(() => undone);
+  expect(s.file()).toBe(BEFORE);
+  expect(s.box()).toBe("10px");
+});
+
+it("an undo pressed while a tracked timeline edit fails still undoes the edit before it", async () => {
+  const s = await studio();
+  await s.edit();
+  let fail!: () => void;
+  const timelineEdit = trackedStudioEdit(
+    () => new Promise<void>((_, reject) => (fail = () => reject(new Error("The save failed.")))),
+  );
+  const failed = timelineEdit();
+
+  const undone = s.actions().undo();
+  fail();
+  await expect(failed).rejects.toThrow("The save failed.");
+  await act(() => undone);
+  expect(s.file()).toBe(BEFORE);
+  expect(s.box()).toBe("10px");
+});

package/src/hooks/useGsapAwareEditing.ts

@@ -93,6 +93,7 @@ export interface UseGsapAwareEditingParams {
     next: { width: number; height: number },
     offset?: { x: number; y: number },
     restore?: () => void,
+    undoKey?: string,
   ) => Promise<void>;
   commitPositionPatchToHtml: ElementOffsetStagerDeps["commitPositionPatchToHtml"];
   // GSAP script commit ops (from useGsapScriptCommits)
@@ -394,12 +395,11 @@ export function useGsapAwareEditing({
                 makeFetchFallback(selection),
               );
               assertGsapEditPersisted(outcome);
-              cropUndoKey = coalesceKey;
-              // What the resize actually did, not what its animations suggest
-              // it would do. An element whose scale is an instant hold has a
-              // scale-group tween and still commits width/height, so guessing
-              // from the tweens withheld an offset nobody had written and the
-              // element snapped back to its authored position on every drag.
+              // Saved before the buffered GSAP writes, so their reload stays the gesture's last render.
+              if (outcome.status === "element-size")
+                await handleDomBoxSizeCommit(selection, next, undefined, undefined, coalesceKey);
+              else cropUndoKey = coalesceKey;
+              // What the resize did, not what its tweens suggest: a scale hold still commits a size.
               const ownsDragOffset =
                 outcome.status === "persisted" && outcome.ownsDragOffset === true;
               logResize("intercept-handled", {

package/src/hooks/useGsapScriptCommits.test.tsx

@@ -30,6 +30,7 @@ import type { DomEditSelection } from "../components/editor/domEditingTypes";
 import type { MutationResult } from "./gsapScriptCommitTypes";
 import { persistSdkSerialize } from "../utils/sdkCutover";
 import { applyPreviewSync, useGsapScriptCommits } from "./useGsapScriptCommits";
+import { hasStudioPendingEdits } from "../utils/studioPendingEdits";
 
 // ── applyPreviewSync (pure preview-sync decision) ────────────────────────────
 
@@ -426,6 +427,24 @@ function mockFetchResult(over: Partial<MutationResult> = {}): void {
   );
 }
 
+describe("a GSAP script commit", () => {
+  it("counts as a pending edit from its call until it lands, so a quick Cmd+Z waits for it", async () => {
+    mockFetchResult();
+    const deps = renderCommitHook();
+    let committed!: Promise<unknown>;
+    act(() => {
+      committed = deps.api.commitMutation(
+        selection,
+        { type: "remove-all-keyframes", animationId: "a" },
+        { label: "Remove all keyframes" },
+      );
+    });
+    expect(hasStudioPendingEdits()).toBe(true);
+    await act(async () => void (await committed));
+    expect(hasStudioPendingEdits()).toBe(false);
+  });
+});
+
 describe("runCommit — instantPatch wiring", () => {
   it("explains a deliberate mutation that the server safely rejected as unchanged", async () => {
     mockFetchResult({ changed: false });

package/src/hooks/useGsapScriptCommits.ts

@@ -7,6 +7,7 @@ import { applySoftReload, extractGsapScriptText } from "../utils/gsapSoftReload"
 import type { SoftReloadResult } from "../utils/gsapSoftReload";
 import { trackStudioEvent } from "../utils/studioTelemetry";
 import { serializeStudioFileMutation } from "../utils/studioFileMutationCoordinator";
+import { trackedStudioEdit } from "../utils/studioPendingEdits";
 import {
   getStudioSaveErrorMessage,
   isStudioSaveErrorAlreadyToasted,
@@ -416,20 +417,20 @@ export function useGsapScriptCommits({ projectIdRef, activeCompPath, previewIfra
       }
       return run();
     };
-    const commit: CommitMutation = (selection, mutation, options) => {
+    const commit: CommitMutation = trackedStudioEdit((selection, mutation, options) => {
       if (!activeProjectId) return Promise.resolve();
       const file = selection.sourceFile || activeCompPath || "index.html";
       return serializeCommit(file, options.serializeKey, () =>
         runCommit(activeProjectId, activeCompPath, file, selection, mutation, options),
       );
-    };
-    commit.batch = (calls, options) => {
+    }) as CommitMutation;
+    commit.batch = trackedStudioEdit((calls: CommitMutationCall[], options: CommitMutationOptions) => {
       if (!activeProjectId) return Promise.resolve();
       const file = calls[0]?.selection.sourceFile || activeCompPath || "index.html";
       return serializeCommit(file, options.serializeKey, () =>
         runBatchCommit(activeProjectId, activeCompPath, file, calls, options),
       );
-    };
+    });
     return commit;
   }, [runCommit, runBatchCommit, activeCompPath, activeProjectId, writeProjectFile]);
   const trackGsapSaveFailure = useGsapSaveFailureTelemetry(activeCompPath);

package/src/hooks/useInlineTextEdit.test.tsx

@@ -5,6 +5,7 @@ import { createRoot } from "react-dom/client";
 import { afterEach, describe, expect, it, vi } from "vitest";
 import { PreviewReadOnlyProvider } from "../components/editor/previewReadOnlyContext";
 import { useInlineTextEdit, type InlineTextEditControls } from "./useInlineTextEdit";
+import { applyUndoRestoreToPreview } from "../utils/gsapUndoRestore";
 
 (globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
 
@@ -643,3 +644,29 @@ describe("useInlineTextEdit with styled runs", () => {
     act(() => root.unmount());
   });
 });
+
+describe("an undo that lands while a text edit is open", () => {
+  it("marks the edit as drawing nothing, so the undo reverts the move and keeps the edit", () => {
+    const wrap = (body: string) => `<html><body>${body}</body></html>`;
+    const moved = `<h1 id="t" style="translate: 90px 60px">Title</h1>`;
+    document.body.innerHTML = moved;
+    const element = document.getElementById("t")!;
+    const { controls, root } = mount();
+    act(() => {
+      controls().start(element);
+    });
+    const contentWindow = { __player: { seek: vi.fn() }, __hfStudioManualEditsApply: vi.fn() };
+    const iframe = { contentWindow, contentDocument: document } as unknown as HTMLIFrameElement;
+    const files = {
+      "index.html": { previous: wrap(moved), restored: wrap(`<h1 id="t">Title</h1>`) },
+    };
+
+    expect(element.getAttribute("data-hf-studio-manual-edit-gesture")).toMatch(/:edit$/);
+    expect(applyUndoRestoreToPreview(iframe, "index.html", files, 0, vi.fn())).toBe("soft");
+
+    expect(element.style.getPropertyValue("translate")).toBe("");
+    expect(element.getAttribute("contenteditable")).toBe("true");
+    expect(element.style.getPropertyValue("outline")).not.toBe("");
+    act(() => root.unmount());
+  });
+});

package/src/hooks/useInlineTextEdit.ts

@@ -5,7 +5,7 @@ import { trackStudioPendingEdit } from "../utils/studioPendingEdits";
 import {
   beginStudioManualEditGesture,
   endStudioManualEditGesture,
-  noteStudioManualEditSave,
+  countStudioManualEditSave,
 } from "../components/editor/manualEditsDom";
 
 /**
@@ -141,7 +141,7 @@ export function useInlineTextEdit({
         original: element.innerHTML,
         outline: element.style.outline,
         outlineOffset: element.style.outlineOffset,
-        gesture: beginStudioManualEditGesture(element),
+        gesture: beginStudioManualEditGesture(element, "edit"),
       };
       // Drawn on the element itself, not in Studio's overlay above it. This is
       // the only mark that says the caret is in the TEXT rather than the
@@ -181,11 +181,13 @@ export function useInlineTextEdit({
     // Counted and pending before the edit closes, so a reload waits for the save, not the mark.
     let save: (saving: unknown) => void = () => {};
     trackStudioPendingEdit(new Promise((resolve) => (save = resolve)));
-    noteStudioManualEditSave(open.element);
-    teardown();
-    // After teardown, so the commit path's own resync does not fight an
-    // element that is still editable.
-    save(onCommit({ element: open.element, html, previousHtml: open.original }));
+    const commitText = () => {
+      teardown();
+      // After teardown, so the commit path's own resync does not fight an
+      // element that is still editable.
+      return onCommit({ element: open.element, html, previousHtml: open.original });
+    };
+    save(countStudioManualEditSave(open.element, commitText));
   }, [onCommit, teardown]);
 
   const cancel = useCallback(() => {

package/src/hooks/useKeyframeKeyboard.test.tsx

@@ -86,6 +86,21 @@ describe("keyframe shortcuts", () => {
     window.removeEventListener("keydown", playback);
   });
 
+  describe("with a focused picker", () => {
+    const picker = document.createElement("button");
+    picker.setAttribute("role", "combobox");
+    afterEach(() => picker.remove());
+
+    it("leaves K to a focused picker that owns typing, like a font combobox", () => {
+      const onAddKeyframe = mountKeyframeKeyboard(true);
+      document.body.append(picker);
+      picker.focus();
+
+      expect(press("k").defaultPrevented).toBe(false);
+      expect(onAddKeyframe).not.toHaveBeenCalled();
+    });
+  });
+
   it("K stays playback's stop key when no keyframeable element is selected", () => {
     const playback = vi.fn();
     window.addEventListener("keydown", playback);

package/src/hooks/useKeyframeKeyboard.ts

@@ -1,23 +1,17 @@
 import { useEffect, useCallback } from "react";
 import { STUDIO_PLAIN_KEYS } from "../player/components/studioShortcuts";
+import { isTypingTarget } from "../utils/typingTarget";
 
 interface KeyframeKeyboardOptions {
   enabled: boolean;
   onAddKeyframe?: () => void;
 }
 
-function isTextInput(el: Element | null): boolean {
-  if (!el) return false;
-  const tag = el.tagName;
-  if (tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT") return true;
-  return (el as HTMLElement).isContentEditable === true;
-}
-
 export function useKeyframeKeyboard({ enabled, onAddKeyframe }: KeyframeKeyboardOptions): void {
   const handler = useCallback(
     (e: KeyboardEvent) => {
       if (!enabled || !onAddKeyframe) return;
-      if (isTextInput(document.activeElement)) return;
+      if (isTypingTarget(document.activeElement)) return;
       if (e.metaKey || e.ctrlKey) return; // never shadow browser/system combos
       if (e.key.toLowerCase() !== STUDIO_PLAIN_KEYS.addKeyframe) return;
       // K is also playback's stop key: claiming it here keeps playback from also pausing.

package/src/hooks/usePreviewPersistence.ts

@@ -159,6 +159,11 @@ export function usePreviewPersistence({
     if (result.status !== "clean") throw result.error;
   }, [drainPendingDomEditSaves]);
 
+  const settlePendingEdits = useCallback(async (): Promise<void> => {
+    await flushStudioPendingEdits();
+    await domEditSaveQueueRef.current?.waitForIdle();
+  }, []);
+
   const resetDomEditSaveQueueBreaker = useCallback(() => {
     domEditSaveQueueRef.current?.reset();
     setDomEditSaveQueuePaused(null);
@@ -253,6 +258,7 @@ export function usePreviewPersistence({
     queueDomEditSave,
     drainPendingDomEditSaves,
     waitForPendingDomEditSaves,
+    settlePendingEdits,
     domEditSaveQueuePaused,
     resetDomEditSaveQueueBreaker,
     applyCurrentStudioManualEditsToPreview,

package/src/hooks/useTrackPendingTimelineEdit.ts

@@ -1,5 +1,5 @@
 import { useCallback, useRef } from "react";
-import { trackStudioPendingEdit } from "../utils/studioPendingEdits";
+import { trackedStudioEdit } from "../utils/studioPendingEdits";
 
 type AsyncFn = (...args: never[]) => Promise<unknown>;
 
@@ -11,11 +11,7 @@ export function useTrackPendingTimelineEdit() {
     const key = fn as unknown as AsyncFn;
     const cached = wrappedRef.current.get(key);
     if (cached) return cached as unknown as (...args: Args) => Promise<R>;
-    const wrapped = (...args: Args): Promise<R> => {
-      const result = fn(...args);
-      trackStudioPendingEdit(result);
-      return result;
-    };
+    const wrapped = trackedStudioEdit(fn);
     wrappedRef.current.set(key, wrapped as unknown as AsyncFn);
     return wrapped;
   }, []);

package/src/index.ts

@@ -240,3 +240,10 @@ export type { MarqueeGestures, MarqueeGesturesDeps } from "./components/editor/m
 export { MarqueeOverlay } from "./components/editor/MarqueeOverlay";
 export type { MarqueeOverlayProps } from "./components/editor/MarqueeOverlay";
 export type { Rect as MarqueeRect } from "./utils/marqueeGeometry";
+
+export { buildStudioTools } from "./webmcp/useStudioAgentTools";
+export type { StudioAgentToolsDeps } from "./webmcp/useStudioAgentTools";
+export { collectStudioLookScene } from "./webmcp/tools/lookTools";
+export type { StudioLookSnapshot } from "./webmcp/tools/lookTools";
+export type { ModelContextTool } from "./webmcp/types";
+export type { ToolResult } from "./webmcp/toolResult";

package/src/player/components/Timeline.test.ts

@@ -16,7 +16,6 @@ import {
   getTimelineScrollLeftForZoomAnchor,
   getTimelineScrollLeftForZoomTransition,
   shouldShowTimelineShortcutHint,
-  shouldHandleTimelineDeleteKey,
   shouldAutoScrollTimeline,
   getTimelineVisibleTimeRange,
   getTimelineScrollTopForGeometryChange,
@@ -1248,26 +1247,6 @@ describe("shouldShowTimelineShortcutHint", () => {
   });
 });
 
-describe("shouldHandleTimelineDeleteKey", () => {
-  it("handles Delete and Backspace when focus is not in an editor", () => {
-    expect(shouldHandleTimelineDeleteKey({ key: "Delete" })).toBe(true);
-    expect(shouldHandleTimelineDeleteKey({ key: "Backspace" })).toBe(true);
-  });
-
-  it("ignores modifier shortcuts", () => {
-    expect(shouldHandleTimelineDeleteKey({ key: "Delete", metaKey: true })).toBe(false);
-    expect(shouldHandleTimelineDeleteKey({ key: "Backspace", ctrlKey: true })).toBe(false);
-  });
-
-  it("ignores input and editable targets", () => {
-    const input = { tagName: "INPUT", isContentEditable: false };
-    const editable = { tagName: "DIV", isContentEditable: true };
-
-    expect(shouldHandleTimelineDeleteKey({ key: "Delete", target: input })).toBe(false);
-    expect(shouldHandleTimelineDeleteKey({ key: "Delete", target: editable })).toBe(false);
-  });
-});
-
 describe("getDefaultDroppedTrack", () => {
   it("defaults to track 0 when there are no rows yet", () => {
     expect(getDefaultDroppedTrack([])).toBe(0);

package/src/player/components/Timeline.tsx

@@ -26,7 +26,6 @@ export {
   getTimelineCanvasHeight,
   shouldShowTimelineShortcutHint,
   resolveTimelineAssetDrop,
-  shouldHandleTimelineDeleteKey,
   getDefaultDroppedTrack,
 } from "./timelineLayout";
 export { formatTimelineTickLabel, generateTicks } from "./timelineRulerGeometry";

package/src/player/components/timelineLayout.ts

@@ -506,34 +506,6 @@ export function shouldShowTimelineShortcutHint(
   return scrollHeight - clientHeight <= 1;
 }
 
-export function shouldHandleTimelineDeleteKey(input: {
-  key: string;
-  metaKey?: boolean;
-  ctrlKey?: boolean;
-  altKey?: boolean;
-  target?: EventTarget | null;
-}): boolean {
-  if (input.key !== "Delete" && input.key !== "Backspace") return false;
-  if (input.metaKey || input.ctrlKey || input.altKey) return false;
-  const target =
-    input.target && typeof input.target === "object"
-      ? (input.target as {
-          tagName?: string;
-          isContentEditable?: boolean;
-          closest?: (selector: string) => Element | null;
-        })
-      : null;
-  if (target) {
-    const tag = target.tagName?.toLowerCase() ?? "";
-    if (target.isContentEditable) return false;
-    if (["input", "textarea", "select"].includes(tag)) return false;
-    if (typeof target.closest === "function" && target.closest("[contenteditable='true']")) {
-      return false;
-    }
-  }
-  return true;
-}
-
 /* ── Asset drop ───────────────────────────────────────────────────── */
 export function getDefaultDroppedTrack(trackOrder: number[], rowIndex?: number): number {
   if (trackOrder.length === 0) return 0;

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

@@ -261,3 +261,46 @@ describe("usePlaybackKeyboard — mute & loop shortcuts (#905)", () => {
     expect(usePlayerStore.getState().loopEnabled).toBe(false);
   });
 });
+
+describe("usePlaybackKeyboard — a focused native player owns its keys", () => {
+  const KEYS = [
+    { code: "ArrowLeft", key: "ArrowLeft" },
+    { code: "ArrowRight", key: "ArrowRight" },
+    { code: "Space", key: " " },
+    { code: "KeyJ", key: "j" },
+    { code: "KeyK", key: "k" },
+    { code: "KeyL", key: "l" },
+  ];
+
+  it.each(["video", "audio"])(
+    "leaves the timeline alone while a <%s controls> has focus",
+    (tag) => {
+      const { dispatch, spies } = setupHook();
+      const player = document.createElement(tag);
+      player.setAttribute("controls", "");
+      document.body.append(player);
+      const before = usePlayerStore.getState().currentTime;
+      for (const init of KEYS) {
+        const event = keydown(init);
+        Object.defineProperty(event, "target", { value: player });
+        dispatch(event);
+        expect(event.defaultPrevented, init.code).toBe(false);
+      }
+      expect(spies.seek).not.toHaveBeenCalled();
+      expect(spies.play).not.toHaveBeenCalled();
+      expect(spies.playBackward).not.toHaveBeenCalled();
+      expect(spies.pause).not.toHaveBeenCalled();
+      expect(usePlayerStore.getState().currentTime).toBe(before);
+    },
+  );
+
+  it("still steps the timeline from a player without controls", () => {
+    const { dispatch } = setupHook();
+    const video = document.createElement("video");
+    document.body.append(video);
+    const event = keydown({ code: "ArrowRight", key: "ArrowRight" });
+    Object.defineProperty(event, "target", { value: video });
+    dispatch(event);
+    expect(event.defaultPrevented).toBe(true);
+  });
+});

package/src/player/lib/playbackShortcuts.ts

@@ -6,7 +6,7 @@
  * is active and the user is navigating caption segments).
  */
 
-import { isTypingTarget } from "../../utils/typingTarget";
+import { ownsPlainKeys } from "../../utils/typingTarget";
 
 const PLAYBACK_FRAME_STEP_CODES = new Set(["ArrowLeft", "ArrowRight"]);
 
@@ -15,21 +15,17 @@ const PLAYBACK_SHORTCUT_IGNORED_SELECTOR = [
   "a[href]",
   "[role='button']",
   "[role='checkbox']",
-  "[role='combobox']",
   "[role='menuitem']",
   // Base UI's menu radio item is a `<div>`, so `button` above no longer catches it.
   "[role='menuitemradio']",
   "[role='radio']",
-  "[role='slider']",
   "[role='spinbutton']",
-  "[role='switch']",
-  "[role='textbox']",
 ].join(",");
 
 export function shouldIgnorePlaybackShortcutTarget(target: EventTarget | null): boolean {
   // Anything the user is typing into owns its keys outright, editable elements
-  // included: a letter claimed here never reaches the text.
-  if (isTypingTarget(target)) return true;
+  // included: a letter claimed here never reaches the text. So does a native player.
+  if (ownsPlainKeys(target)) return true;
   if (!target || typeof target !== "object") return false;
   const candidate = target as { closest?: unknown };
   if (typeof candidate.closest !== "function") return false;

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

@@ -0,0 +1,16 @@
+import { describe, expect, it } from "vitest";
+import { isVideoAudible } from "./timelineElementHelpers";
+
+describe("isVideoAudible — the compiler's data-has-audio rule", () => {
+  it("explicit data-has-audio wins", () => {
+    expect(isVideoAudible({ tag: "video", hasAudioAttr: "true", muted: false })).toBe(true);
+    expect(isVideoAudible({ tag: "video", hasAudioAttr: "false", muted: false })).toBe(false);
+  });
+  it("no attribute: an unmuted video is audible, a muted one is not", () => {
+    expect(isVideoAudible({ tag: "video", hasAudioAttr: null, muted: false })).toBe(true);
+    expect(isVideoAudible({ tag: "video", hasAudioAttr: undefined, muted: true })).toBe(false);
+  });
+  it("never true for non-video without the attribute", () => {
+    expect(isVideoAudible({ tag: "img", hasAudioAttr: null, muted: false })).toBe(false);
+  });
+});

package/src/player/lib/timelineElementHelpers.ts

@@ -220,12 +220,26 @@ function readVolume(el: Element, media: Element): number | undefined {
   return Number.isFinite(volume) ? volume : undefined;
 }
 
+/** The compiler's rule (timingCompiler): explicit data-has-audio wins; otherwise an unmuted <video> is audible. */
+export function isVideoAudible(opts: {
+  tag: string;
+  hasAudioAttr: string | null | undefined;
+  muted: boolean;
+}): boolean {
+  if (opts.hasAudioAttr === "true") return true;
+  if (opts.hasAudioAttr === "false" || opts.hasAudioAttr === "") return false;
+  return opts.tag.toLowerCase() === "video" && !opts.muted;
+}
+
 /** What the mixer gets: the compiler's `data-has-audio` rule, muted and volume. */
 function applyAudioMetadataFromElement(entry: TimelineElement, el: Element): void {
   const media = resolveMediaElement(el) ?? el;
   const muted = el.hasAttribute("muted") || media.hasAttribute("muted");
-  const hasAudio = el.getAttribute("data-has-audio");
-  const sound = hasAudio === null ? el.tagName === "VIDEO" && !muted : hasAudio === "true";
+  const sound = isVideoAudible({
+    tag: el.tagName,
+    hasAudioAttr: el.getAttribute("data-has-audio"),
+    muted,
+  });
   setOptional(entry, "hasAudio", sound ? true : undefined);
   setOptional(entry, "muted", muted ? true : undefined);
   setOptional(entry, "volume", readVolume(el, media));

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

@@ -19,6 +19,8 @@ describe("timeline viewport budgets", () => {
       interactionP95Ms: 50,
       constrainedInteractionP95Ms: 75,
       constrainedFrameIntervalP95Ms: 75,
+      ciVirtualizedInteractionP95Ms: 58.3,
+      ciVirtualizedFrameIntervalP95Ms: 25,
       longTaskLimitMs: 50,
       constrainedLongTaskLimitMs: 300,
       posterCoverageRatio: 0.9,