@hyperframes/studio 0.8.82 → 0.8.84

package/src/hooks/useKeyframeKeyboard.test.tsx

@@ -0,0 +1,99 @@
+// @vitest-environment happy-dom
+import { act } from "react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { useKeyframeKeyboard } from "./useKeyframeKeyboard";
+import { dispatchPlainKey, type HotkeyCallbacks } from "./appHotkeysDispatch";
+import { DEFAULT_SHORTCUT_SECTIONS } from "../player/components/studioShortcuts";
+import { usePlayerStore } from "../player/store/playerStore";
+import { createHappyDomRootHarness } from "../player/components/testRootHarness";
+
+(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+const { mount } = createHappyDomRootHarness();
+
+function KeyframeKeyboard(props: { enabled: boolean; onAddKeyframe: () => void }) {
+  useKeyframeKeyboard(props);
+  return null;
+}
+
+/** Wires the keyframe keys the way TimelineToolbar does; returns the add-keyframe spy. */
+function mountKeyframeKeyboard(enabled: boolean) {
+  const onAddKeyframe = vi.fn();
+  const host = document.createElement("div");
+  document.body.append(host);
+  act(() =>
+    mount(host).render(<KeyframeKeyboard enabled={enabled} onAddKeyframe={onAddKeyframe} />),
+  );
+  return onAddKeyframe;
+}
+
+function press(key: string, init: KeyboardEventInit = {}): KeyboardEvent {
+  const event = new KeyboardEvent("keydown", { key, bubbles: true, cancelable: true, ...init });
+  window.dispatchEvent(event);
+  return event;
+}
+
+function selectKeyframe() {
+  usePlayerStore.setState({ selectedElementId: "box", selectedKeyframes: new Set(["box:50"]) });
+}
+
+beforeEach(selectKeyframe);
+afterEach(() => usePlayerStore.getState().reset());
+
+describe("keyframe shortcuts", () => {
+  it("every key the Keyframes section lists does something with a keyframe selected", () => {
+    mountKeyframeKeyboard(true);
+    const cb = {
+      onDeleteSelectedKeyframes: vi.fn(),
+      onToggleRecording: vi.fn(),
+      domEditSelectionRef: { current: null },
+      readOnlyPreview: false,
+    } as unknown as HotkeyCallbacks;
+    const appHotkeys = (event: KeyboardEvent) =>
+      dispatchPlainKey(event, event.key.toLowerCase(), cb);
+    window.addEventListener("keydown", appHotkeys, true);
+
+    const section = DEFAULT_SHORTCUT_SECTIONS.find((s) => s.title.startsWith("Keyframes"));
+    const dead = (section?.hints ?? []).filter((hint) => {
+      selectKeyframe();
+      return !press(hint.key === "Del" ? "Delete" : hint.key.toLowerCase()).defaultPrevented;
+    });
+    window.removeEventListener("keydown", appHotkeys, true);
+
+    expect(section?.hints.length).toBeGreaterThan(0);
+    expect(dead.map((hint) => hint.key)).toEqual([]);
+  });
+
+  it("K adds a keyframe only while enabled and leaves J and the arrows to playback", () => {
+    const playback = vi.fn();
+    window.addEventListener("keydown", playback);
+    const onAddKeyframe = mountKeyframeKeyboard(true);
+
+    for (const [key, shiftKey] of [
+      ["j", false],
+      ["J", true],
+      ["ArrowLeft", false],
+      ["ArrowRight", true],
+    ] as const) {
+      expect(press(key, { shiftKey }).defaultPrevented).toBe(false);
+    }
+    expect(playback).toHaveBeenCalledTimes(4);
+    expect(onAddKeyframe).not.toHaveBeenCalled();
+
+    expect(press("k").defaultPrevented).toBe(true);
+    expect(onAddKeyframe).toHaveBeenCalledTimes(1);
+    expect(playback).toHaveBeenCalledTimes(4);
+    window.removeEventListener("keydown", playback);
+  });
+
+  it("K stays playback's stop key when no keyframeable element is selected", () => {
+    const playback = vi.fn();
+    window.addEventListener("keydown", playback);
+    const onAddKeyframe = mountKeyframeKeyboard(false);
+
+    expect(press("k").defaultPrevented).toBe(false);
+    expect(onAddKeyframe).not.toHaveBeenCalled();
+    expect(playback).toHaveBeenCalledTimes(1);
+    window.removeEventListener("keydown", playback);
+  });
+});

package/src/hooks/useKeyframeKeyboard.ts

@@ -1,15 +1,9 @@
 import { useEffect, useCallback } from "react";
-import { usePlayerStore } from "../player/store/playerStore";
+import { STUDIO_PLAIN_KEYS } from "../player/components/studioShortcuts";
 
 interface KeyframeKeyboardOptions {
   enabled: boolean;
   onAddKeyframe?: () => void;
-  onDeleteKeyframe?: () => void;
-  onPrevKeyframe?: () => void;
-  onNextKeyframe?: () => void;
-  onToggleHold?: () => void;
-  onToggleExpand?: () => void;
-  onNudgeKeyframe?: (direction: -1 | 1, large: boolean) => void;
 }
 
 function isTextInput(el: Element | null): boolean {
@@ -19,75 +13,19 @@ function isTextInput(el: Element | null): boolean {
   return (el as HTMLElement).isContentEditable === true;
 }
 
-export function useKeyframeKeyboard({
-  enabled,
-  onAddKeyframe,
-  onDeleteKeyframe,
-  onPrevKeyframe,
-  onNextKeyframe,
-  onToggleHold,
-  onToggleExpand,
-  onNudgeKeyframe,
-}: KeyframeKeyboardOptions): void {
+export function useKeyframeKeyboard({ enabled, onAddKeyframe }: KeyframeKeyboardOptions): void {
   const handler = useCallback(
     (e: KeyboardEvent) => {
-      if (!enabled) return;
+      if (!enabled || !onAddKeyframe) return;
       if (isTextInput(document.activeElement)) return;
       if (e.metaKey || e.ctrlKey) return; // never shadow browser/system combos
-
-      const hasSelectedKeyframes = usePlayerStore.getState().selectedKeyframes.size > 0;
-
-      // Only consume a key we can actually act on. The fall-through matters:
-      // these keys (k/j/arrows) double as JKL playback shortcuts in
-      // usePlaybackKeyboard, so when a handler is absent we must let the event
-      // continue. When we DO act, stopImmediatePropagation prevents the playback
-      // handler from also firing (e.g. K pausing instead of adding a keyframe).
-      // The listener is registered in the capture phase so it runs first.
-      const consume = (run: () => void) => {
-        e.preventDefault();
-        e.stopImmediatePropagation();
-        run();
-      };
-
-      switch (e.key.toLowerCase()) {
-        case "k":
-          if (onAddKeyframe) consume(onAddKeyframe);
-          break;
-        case "delete":
-        case "backspace":
-          if (onDeleteKeyframe && hasSelectedKeyframes) consume(onDeleteKeyframe);
-          break;
-        case "j": {
-          const nav = e.shiftKey ? onNextKeyframe : onPrevKeyframe;
-          if (nav) consume(nav);
-          break;
-        }
-        case "h":
-          if (onToggleHold && hasSelectedKeyframes) consume(onToggleHold);
-          break;
-        case "u":
-          if (onToggleExpand) consume(onToggleExpand);
-          break;
-        case "arrowleft":
-          if (onNudgeKeyframe && hasSelectedKeyframes && !e.altKey)
-            consume(() => onNudgeKeyframe(-1, e.shiftKey));
-          break;
-        case "arrowright":
-          if (onNudgeKeyframe && hasSelectedKeyframes && !e.altKey)
-            consume(() => onNudgeKeyframe(1, e.shiftKey));
-          break;
-      }
+      if (e.key.toLowerCase() !== STUDIO_PLAIN_KEYS.addKeyframe) return;
+      // K is also playback's stop key: claiming it here keeps playback from also pausing.
+      e.preventDefault();
+      e.stopImmediatePropagation();
+      onAddKeyframe();
     },
-    [
-      enabled,
-      onAddKeyframe,
-      onDeleteKeyframe,
-      onPrevKeyframe,
-      onNextKeyframe,
-      onToggleHold,
-      onToggleExpand,
-      onNudgeKeyframe,
-    ],
+    [enabled, onAddKeyframe],
   );
 
   useEffect(() => {

package/src/hooks/usePreviewPersistence.ts

@@ -29,7 +29,7 @@ interface RecordEditInput {
   files: Record<string, { before: string; after: string }>;
 }
 
-interface UsePreviewPersistenceParams {
+export interface UsePreviewPersistenceParams {
   showToast: (message: string, tone?: "error" | "info") => void;
   readOptionalProjectFile: (path: string) => Promise<string>;
   writeProjectFile: (path: string, content: string) => Promise<void>;

package/src/index.ts

@@ -1,35 +1,5 @@
 // UI primitives
-export { Button, buttonBase, buttonSizes, buttonVariants } from "./components/ui/Button";
-export type { ButtonSize, ButtonVariant, PreviewState } from "./components/ui/Button";
-export { HyperframesLogo } from "./components/StudioHeader";
-export { IconButton } from "./components/ui/IconButton";
-export { Tab, TabPanel, Tabs, TabsList } from "./components/ui/Tabs";
-export { HyperframesLoader } from "./components/ui/HyperframesLoader";
-export type { HyperframesLoaderProps } from "./components/ui/HyperframesLoader";
-export { Tooltip } from "./components/ui/Tooltip";
-export { cn } from "./components/ui/cn";
-export {
-  ContextMenu,
-  Menu,
-  MenuItem,
-  MenuRadioGroup,
-  MenuRadioItem,
-  MenuSeparator,
-  MenuShortcut,
-  popupSurface,
-} from "./components/ui/Menu";
-export type { MenuItemTone, PopupPreviewState } from "./components/ui/Menu";
-export { Popover } from "./components/ui/Popover";
-export { Input, fieldBase, fieldText } from "./components/ui/Input";
-export type { InputProps } from "./components/ui/Input";
-export { NumberField } from "./components/ui/NumberField";
-export type { NumberFieldProps } from "./components/ui/NumberField";
-export { Select } from "./components/ui/Select";
-export type { SelectOption, SelectProps } from "./components/ui/Select";
-export { Slider } from "./components/ui/Slider";
-export type { SliderProps } from "./components/ui/Slider";
-export { Toggle } from "./components/ui/Toggle";
-export type { ToggleProps } from "./components/ui/Toggle";
+export * from "./ui";
 
 // NLE Layout
 export { EditorShell } from "./components/EditorShell";
@@ -154,7 +124,10 @@ export { parseStyleString, mergeStyleIntoTag, findElementBlock } from "./utils/h
 export { usePersistentEditHistory } from "./hooks/usePersistentEditHistory";
 export type { UsePersistentEditHistoryOptions } from "./hooks/usePersistentEditHistory";
 export { useTimelineEditing } from "./hooks/useTimelineEditing";
-export type { UseTimelineEditingOptions } from "./hooks/useTimelineEditingTypes";
+export type {
+  TimelineZIndexReorderCommit,
+  UseTimelineEditingOptions,
+} from "./hooks/useTimelineEditingTypes";
 // A host's own waitForPendingDomEditSaves must also call this, or undo/redo
 // can race a write still in flight (see useTrackPendingTimelineEdit.ts).
 export { flushStudioPendingEdits } from "./utils/studioPendingEdits";
@@ -193,9 +166,49 @@ export type { AudioMeterStripProps } from "./components/nle/AudioMeterStrip";
 export { useClipboard } from "./hooks/useClipboard";
 export type { UseClipboardOptions } from "./hooks/useClipboard";
 
+// DOM editing: the canvas session, persistence and overlay, for a host outside EditorShell.
+export { useDomEditSession } from "./hooks/useDomEditSession";
+export type { UseDomEditSessionParams } from "./hooks/useDomEditSession";
+export { usePreviewPersistence } from "./hooks/usePreviewPersistence";
+export type { UsePreviewPersistenceParams } from "./hooks/usePreviewPersistence";
+export { DomEditProvider, useDomEditSelectionContext } from "./contexts/DomEditContext";
+export { PreviewReadOnlyProvider } from "./components/editor/previewReadOnlyContext";
+export { ConnectedDomEditOverlay } from "./components/editor/ConnectedDomEditOverlay";
+export type { ConnectedDomEditOverlayProps } from "./components/editor/ConnectedDomEditOverlay";
+export type { DomEditCapabilities, DomEditSelection } from "./components/editor/domEditingTypes";
+
 export {
   playSeamTransitionLoop,
   type SeamTransitionFrameSource,
   type SeamTransitionLoopHandle,
   type SeamTransitionLoopOptions,
 } from "@hyperframes/shader-transitions";
+
+// Editor gestures for a host's own preview overlay: snapping and the marquee
+export {
+  SNAP_THRESHOLD_PX,
+  snapEngagedForTravel,
+  extractSnapTargets,
+  buildCompositionSnapTarget,
+  buildGridSnapEdges,
+  resolveSnapAdjustment,
+  resolveGuideLineRect,
+  resolveEquidistanceGuides,
+} from "./components/editor/snapEngine";
+export type {
+  SnapEdge,
+  SnapTarget,
+  SnapGuide,
+  SpacingGuide,
+  SnapResult,
+  Rect as SnapRect,
+} from "./components/editor/snapEngine";
+export { collectSnapContext } from "./components/editor/snapTargetCollection";
+export type { SnapContext } from "./components/editor/snapTargetCollection";
+export { SnapGuideOverlay } from "./components/editor/SnapGuideOverlay";
+export type { SnapGuideOverlayProps, SnapGuidesState } from "./components/editor/SnapGuideOverlay";
+export { useMarqueeGestures } from "./components/editor/marqueeCommit";
+export type { MarqueeGestures, MarqueeGesturesDeps } from "./components/editor/marqueeCommit";
+export { MarqueeOverlay } from "./components/editor/MarqueeOverlay";
+export type { MarqueeOverlayProps } from "./components/editor/MarqueeOverlay";
+export type { Rect as MarqueeRect } from "./utils/marqueeGeometry";

package/src/lightEntries.test.ts

@@ -0,0 +1,32 @@
+// @vitest-environment happy-dom
+import { readFileSync } from "node:fs";
+import { resolve } from "node:path";
+import { describe, expect, it, vi } from "vitest";
+
+const packageDir = resolve(import.meta.dirname, "..");
+const { subpaths } = JSON.parse(readFileSync(resolve(packageDir, "package-subpaths.json"), "utf8"));
+
+function refuse(name: string): never {
+  throw new Error(`a light entry loaded ${name}`);
+}
+vi.mock("@hyperframes/core", () => refuse("@hyperframes/core"));
+vi.mock("@hyperframes/shader-transitions", () => refuse("@hyperframes/shader-transitions"));
+vi.mock("@codemirror/view", () => refuse("@codemirror/view"));
+vi.mock("@codemirror/state", () => refuse("@codemirror/state"));
+vi.mock("mediabunny", () => refuse("mediabunny"));
+vi.mock("gsap", () => refuse("gsap"));
+vi.mock("@hyperframes/parsers", () => refuse("@hyperframes/parsers"));
+vi.mock("@hyperframes/parsers/hf-ids", () => refuse("@hyperframes/parsers/hf-ids"));
+vi.mock("@hyperframes/sdk", () => refuse("@hyperframes/sdk"));
+vi.mock("dockview-react", () => refuse("dockview-react"));
+
+describe("entries a host imports for its first screen", () => {
+  it.each(["./ui", "./player"])(
+    "%s loads without the editor, the parsers, gsap or media decoding",
+    async (entry) => {
+      await expect(import(resolve(packageDir, subpaths[entry].source))).resolves.toBeDefined();
+    },
+    // The icon set alone is thousands of modules to transform on a cold run.
+    30_000,
+  );
+});

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

@@ -71,8 +71,8 @@ function render(
   };
 }
 
-function pointer(type: string, clientX: number, pointerId = 1) {
-  const event = new MouseEvent(type, { bubbles: true, clientX, button: 0 });
+function pointer(type: string, clientX: number, pointerId = 1, clientY = 0) {
+  const event = new MouseEvent(type, { bubbles: true, clientX, clientY, button: 0 });
   Object.defineProperty(event, "pointerId", { value: pointerId });
   return event;
 }
@@ -134,14 +134,14 @@ describe("TimelineClipFades", () => {
     const handle = host.querySelector<HTMLElement>('[data-testid="clip-fade-handle-out"]');
     if (!handle) throw new Error("expected a fade-out handle");
     armCapture(handle);
-    // Handle at x=800 (2 s before the end). 300 px left → 5 s.
-    act(() => handle.dispatchEvent(pointer("pointerdown", 800)));
-    act(() => handle.dispatchEvent(pointer("pointermove", 500)));
+    // Pressed at x=1000 with a 2 s fade-out. 300 px left → 5 s.
+    act(() => handle.dispatchEvent(pointer("pointerdown", 1000)));
+    act(() => handle.dispatchEvent(pointer("pointermove", 700)));
     expect(onSetElementAttributeLive).toHaveBeenLastCalledWith(clip, "data-fade-out", "5");
     // Way past the start: clamps to duration − fadeIn = 9 s.
-    act(() => handle.dispatchEvent(pointer("pointermove", -500)));
+    act(() => handle.dispatchEvent(pointer("pointermove", 0)));
     expect(onSetElementAttributeLive).toHaveBeenLastCalledWith(clip, "data-fade-out", "9");
-    act(() => handle.dispatchEvent(pointer("pointerup", -500)));
+    act(() => handle.dispatchEvent(pointer("pointerup", 0)));
     expect(onSetElementAttributeQuiet).toHaveBeenCalledWith(clip, "data-fade-out", "9", "Fade out");
     act(() => root.unmount());
   });
@@ -151,9 +151,9 @@ describe("TimelineClipFades", () => {
     const handle = host.querySelector<HTMLElement>('[data-testid="clip-fade-handle-in"]');
     if (!handle) throw new Error("expected a fade-in handle");
     armCapture(handle);
-    act(() => handle.dispatchEvent(pointer("pointerdown", 100)));
-    act(() => handle.dispatchEvent(pointer("pointermove", -40)));
-    act(() => handle.dispatchEvent(pointer("pointerup", -40)));
+    act(() => handle.dispatchEvent(pointer("pointerdown", 200)));
+    act(() => handle.dispatchEvent(pointer("pointermove", 0)));
+    act(() => handle.dispatchEvent(pointer("pointerup", 0)));
     expect(onSetElementAttributeQuiet).toHaveBeenCalledWith(clip, "data-fade-in", null, "Fade in");
     act(() => root.unmount());
   });
@@ -179,6 +179,27 @@ describe("TimelineClipFades", () => {
     act(() => root.unmount());
   });
 
+  it.each([
+    ["above the window", 300, -40],
+    ["on the window's right edge", window.innerWidth, 10],
+  ])("restores the fade and saves nothing when released %s", (_, clientX, clientY) => {
+    const { host, root, onSetElementAttributeLive, onRevertElementAttributeLive, ...rest } =
+      render(clip);
+    const handle = host.querySelector<HTMLElement>('[data-testid="clip-fade-handle-in"]');
+    if (!handle) throw new Error("expected a fade-in handle");
+    armCapture(handle);
+    act(() => handle.dispatchEvent(pointer("pointerdown", 100)));
+    act(() => handle.dispatchEvent(pointer("pointermove", 300)));
+    act(() => handle.dispatchEvent(pointer("pointerup", clientX, 1, clientY)));
+    expect(rest.onSetElementAttributeQuiet).not.toHaveBeenCalled();
+    expect(onSetElementAttributeLive).toHaveBeenLastCalledWith(clip, "data-fade-in", "1");
+    expect(onRevertElementAttributeLive).toHaveBeenCalledWith(clip, "data-fade-in");
+    expect(host.querySelector('[data-testid="clip-fade-in"]')?.getAttribute("points")).toBe(
+      "0,0 100,0 0,100",
+    );
+    act(() => root.unmount());
+  });
+
   it("does not let a press on the dot start the clip's own move gesture", () => {
     const outer = vi.fn();
     const { host, root } = render(clip, { onClipPointerDown: outer });

package/src/player/components/TimelineClipFades.tsx

@@ -14,6 +14,7 @@ import {
 } from "@hyperframes/core/audio-fade";
 import type { TimelineElement } from "../store/playerStore";
 import { useTimelineEditContextOptional } from "../../contexts/TimelineEditContext";
+import { releasedOutsideWindow } from "./timelinePointerRelease";
 
 type FadeEdge = "in" | "out";
 
@@ -136,7 +137,7 @@ export function TimelineClipFades({ el, pps, widthPx, showHandles }: TimelineCli
   const finish = (e: PointerEvent<HTMLDivElement>, cancelled: boolean) => {
     const g = endGesture(e);
     if (!g) return;
-    if (cancelled || !g.moved) return revertGesture(g);
+    if (cancelled || !g.moved || releasedOutsideWindow(e)) return revertGesture(g);
     setDraft({ edge: g.edge, seconds: g.last });
     void onSetElementAttributeQuiet?.(
       el,

package/src/player/components/TimelineTypes.ts

@@ -4,18 +4,20 @@ import type { TimelineTimeRange } from "../store/rangeSelectionSlice";
 import type { TimelineDropCallbacks } from "./timelineCallbacks";
 import type { TimelineTheme } from "./timelineTheme";
 import type { TimelineEditOverrides } from "./useResolvedTimelineEditCallbacks";
+import type { TimelineStackingSyncProps } from "./useTimelineStackingSync";
 
 export interface TimelineClipRenderContext {
   priority: "overscan" | "visible" | "interaction";
   rich: boolean;
 }
 
-export interface TimelineProps extends TimelineDropCallbacks, TimelineEditOverrides {
+export interface TimelineProps
+  extends TimelineDropCallbacks, TimelineEditOverrides, TimelineStackingSyncProps {
   /** Project-scoped reset boundary; soft source refreshes retain the same epoch. */
   sessionEpoch?: number;
-  /** keepPlaying: true preserves the current play state across the seek. */
   onSeek?: (time: number, options?: { keepPlaying?: boolean }) => void;
   onDrillDown?: (element: TimelineElement) => void;
+  /** Picture only: takes no pointer input. Interactive content goes in renderClipOverlay. */
   renderClipContent?: (
     element: TimelineElement,
     style: { clip: string; label: string },

package/src/player/components/studioShortcuts.ts

@@ -1,5 +1,10 @@
-/** Bare keys Studio's app hotkeys bind; the shortcuts list names them from here. */
-export const STUDIO_PLAIN_KEYS = { fullscreen: "f", split: "s", record: "r" } as const;
+/** Bare keys Studio's hotkeys bind; the shortcuts list names them from here. */
+export const STUDIO_PLAIN_KEYS = {
+  fullscreen: "f",
+  split: "s",
+  record: "r",
+  addKeyframe: "k",
+} as const;
 
 export interface ShortcutHint {
   key: string;
@@ -32,10 +37,8 @@ export const DEFAULT_SHORTCUT_SECTIONS: readonly ShortcutSection[] = [
   {
     title: "Keyframes (when an element is selected)",
     hints: [
-      { key: "K", label: "Add keyframe at playhead" },
+      { key: hintKey(STUDIO_PLAIN_KEYS.addKeyframe), label: "Add / remove keyframe at playhead" },
       { key: "Del", label: "Delete selected keyframe" },
-      { key: "H", label: "Toggle hold / bezier" },
-      { key: "U", label: "Expand / collapse properties" },
       { key: hintKey(STUDIO_PLAIN_KEYS.record), label: "Record gesture" },
     ],
   },

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

@@ -1,7 +1,17 @@
+// @vitest-environment happy-dom
+
+import { act, createElement } from "react";
+import { createRoot } from "react-dom/client";
 import { describe, expect, it } from "vitest";
-import { resolveClipRenderContext } from "./timelineClipChildren";
+import { renderClipChildren, resolveClipRenderContext } from "./timelineClipChildren";
+import { getTrackStyle } from "./timelineIcons";
 import type { TimelineElement } from "../store/playerStore";
 
+Object.defineProperty(globalThis, "IS_REACT_ACT_ENVIRONMENT", {
+  configurable: true,
+  value: true,
+});
+
 const clip: TimelineElement = {
   id: "clip",
   tag: "video",
@@ -29,3 +39,26 @@ describe("resolveClipRenderContext", () => {
     });
   });
 });
+
+describe("renderClipChildren", () => {
+  // happy-dom cannot hit-test, so this pins what decides the hit: the picture takes no input.
+  it("lets a press on a picture stacked above the trim handles fall through to them", () => {
+    const host = document.createElement("div");
+    document.body.append(host);
+    const root = createRoot(host);
+    const picture = () =>
+      createElement("div", { "data-picture": "", style: { position: "absolute", zIndex: 10 } });
+
+    act(() => {
+      root.render(renderClipChildren(clip, getTrackStyle("video"), picture, undefined));
+    });
+
+    // happy-dom does not inherit pointer-events, so walk up to the layer that turns input off.
+    let node = host.querySelector<HTMLElement>("[data-picture]");
+    expect(node).not.toBeNull();
+    while (node && node !== host && node.style.pointerEvents !== "none") node = node.parentElement;
+    expect(node?.style.pointerEvents).toBe("none");
+    act(() => root.unmount());
+    host.remove();
+  });
+});

package/src/player/components/timelineClipChildren.tsx

@@ -57,10 +57,13 @@ export function renderClipChildren(
       {renderClipOverlay?.(element)}
       {!renderClipContent && <ClipLintDot element={element} />}
       {renderClipContent && (
-        // borderRadius: inherit — the clip itself is overflow-visible (keyframe
-        // diamonds hang outside its bounds), so the thumbnail layer must clip
-        // itself to the clip's rounded corners or sharp corners poke out.
-        <div className="absolute inset-0 overflow-hidden" style={{ borderRadius: "inherit" }}>
+        // The picture can paint above the trim handles, so it takes no input and presses reach them.
+        // borderRadius: inherit clips it to the clip's rounded corners; the clip itself is
+        // overflow-visible because keyframe diamonds hang outside its bounds.
+        <div
+          className="absolute inset-0 overflow-hidden"
+          style={{ borderRadius: "inherit", pointerEvents: "none" }}
+        >
           {renderClipContent(element, clipStyle, context)}
         </div>
       )}