@hyperframes/studio 0.8.81 → 0.8.83

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

@@ -2,6 +2,7 @@
 import React, { act } from "react";
 import { createRoot, type Root } from "react-dom/client";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { MockResizeObserver, reportResize } from "../../hooks/resizeObserverTestUtils";
 import { thumbnailScheduler } from "../lib/thumbnailScheduler";
 import { decodeVideoThumbnail } from "../lib/thumbnailVideoDecoder";
 import { VideoThumbnail } from "./VideoThumbnail";
@@ -13,12 +14,6 @@ Object.defineProperty(globalThis, "IS_REACT_ACT_ENVIRONMENT", {
   value: true,
 });
 
-class MockResizeObserver {
-  observe() {}
-  disconnect() {}
-  unobserve() {}
-}
-
 let host: HTMLDivElement;
 let root: Root | null = null;
 
@@ -36,8 +31,9 @@ afterEach(() => {
   document.body.innerHTML = "";
 });
 
-async function render(width = 0) {
+async function render(width = 0, height = 40) {
   Object.defineProperty(host, "clientWidth", { configurable: true, value: width });
+  Object.defineProperty(host, "clientHeight", { configurable: true, value: height });
   root = createRoot(host);
   await act(async () => {
     root!.render(
@@ -66,13 +62,13 @@ describe("VideoThumbnail", () => {
     expect(decodeVideoThumbnail).not.toHaveBeenCalled();
   });
 
-  it("requests a geometry-sized filmstrip by default", async () => {
+  it("requests a filmstrip sized by the measured clip height", async () => {
     vi.mocked(decodeVideoThumbnail).mockResolvedValue({
       value: { kind: "filmstrip", urls: ["blob:a", "blob:b"], aspect: 16 / 9 },
       weight: 256,
     });
 
-    await render(500);
+    await render(440);
 
     expect(decodeVideoThumbnail).toHaveBeenNthCalledWith(
       1,
@@ -93,7 +89,7 @@ describe("VideoThumbnail", () => {
       weight: 256,
     });
 
-    await render(500);
+    await render(300);
 
     const tiles = [...host.querySelectorAll("img")].map((img) => img.getAttribute("src"));
     expect(tiles).toEqual(["blob:0", "blob:2", "blob:4", "blob:5", "blob:7"]);
@@ -105,11 +101,37 @@ describe("VideoThumbnail", () => {
       weight: 128,
     });
 
-    await render(100);
+    await render(60);
 
     expect(decodeVideoThumbnail).toHaveBeenCalledTimes(1);
   });
 
+  it("tiles a wide picture at the clip's measured height, whole", async () => {
+    vi.mocked(decodeVideoThumbnail).mockResolvedValue({
+      value: { kind: "image", url: "blob:wide", aspect: 2.7 },
+      weight: 128,
+    });
+
+    await render(500, 40);
+
+    expect(host.querySelector("img")?.parentElement?.style.width).toBe("108px");
+  });
+
+  it("re-tiles at the height the resize observer reports", async () => {
+    vi.mocked(decodeVideoThumbnail).mockResolvedValue({
+      value: { kind: "image", url: "blob:wide", aspect: 2.7 },
+      weight: 128,
+    });
+    await render(0, 0);
+
+    await act(async () => {
+      reportResize(500, 40);
+      await Promise.resolve();
+    });
+
+    expect(host.querySelector("img")?.parentElement?.style.width).toBe("108px");
+  });
+
   it("clears the loading shimmer when the scheduled decode fails", async () => {
     vi.mocked(decodeVideoThumbnail).mockRejectedValue(new Error("decode failed"));
 

package/src/player/components/VideoThumbnail.tsx

@@ -1,17 +1,13 @@
-import { memo, useCallback, useMemo, useRef, useState } from "react";
-import { useMountEffect } from "../../hooks/useMountEffect";
+import { memo, useMemo } from "react";
 import { useThumbnailLease } from "../../hooks/useThumbnailLease";
+import { useThumbnailStripSize } from "../../hooks/useThumbnailStripSize";
 import {
   createThumbnailKey,
   type ThumbnailPriority,
   type ThumbnailSnapshot,
 } from "../lib/thumbnailScheduler";
 import { decodeVideoThumbnail } from "../lib/thumbnailVideoDecoder";
-import {
-  computeThumbnailStrip,
-  quantizeThumbnailFrameCount,
-  THUMBNAIL_CLIP_HEIGHT,
-} from "./thumbnailUtils";
+import { computeThumbnailStrip, quantizeThumbnailFrameCount } from "./thumbnailUtils";
 
 interface VideoThumbnailProps {
   videoSrc: string;
@@ -89,10 +85,9 @@ export const VideoThumbnail = memo(function VideoThumbnail({
   sessionEpoch = 0,
   priority = "visible",
 }: VideoThumbnailProps) {
-  const [containerWidth, setContainerWidth] = useState(0);
-  const observerRef = useRef<ResizeObserver | null>(null);
+  const [container, setContainerRef] = useThumbnailStripSize();
   const requestFrameCount = quantizeThumbnailFrameCount(
-    computeThumbnailStrip(containerWidth, 16 / 9).frameCount,
+    computeThumbnailStrip(container.width, 16 / 9, container.height).frameCount,
   );
   const requestProps = useMemo(
     () => ({
@@ -114,7 +109,7 @@ export const VideoThumbnail = memo(function VideoThumbnail({
     () => createVideoThumbnailRequest(requestProps, requestFrameCount, true),
     [requestFrameCount, requestProps],
   );
-  const measured = containerWidth > 0;
+  const measured = container.width > 0;
   const posterSnapshot = useThumbnailLease(measured ? posterRequest : null);
   const richSnapshot = useThumbnailLease(measured && requestFrameCount > 1 ? richRequest : null);
   const snapshot = selectThumbnailSnapshot(posterSnapshot, richSnapshot);
@@ -122,24 +117,7 @@ export const VideoThumbnail = memo(function VideoThumbnail({
   const urls =
     value?.kind === "filmstrip" ? value.urls : value?.kind === "image" ? [value.url] : [];
   const aspect = value?.kind === "image" || value?.kind === "filmstrip" ? value.aspect : 16 / 9;
-  const { frameW, frameCount } = computeThumbnailStrip(
-    containerWidth,
-    aspect,
-    THUMBNAIL_CLIP_HEIGHT,
-  );
-
-  const setContainerRef = useCallback((element: HTMLDivElement | null) => {
-    observerRef.current?.disconnect();
-    if (!element) return;
-    const target = element.parentElement ?? element;
-    setContainerWidth(target.clientWidth);
-    observerRef.current = new ResizeObserver(([entry]) =>
-      setContainerWidth(entry.contentRect.width),
-    );
-    observerRef.current.observe(target);
-  }, []);
-
-  useMountEffect(() => () => observerRef.current?.disconnect());
+  const { frameW, frameCount } = computeThumbnailStrip(container.width, aspect, container.height);
 
   return (
     <div ref={setContainerRef} className="absolute inset-0 overflow-hidden">

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/thumbnailUtils.test.ts

@@ -4,49 +4,45 @@ import {
   encodePreviewPath,
   resolveMediaPreviewUrl,
   quantizeThumbnailFrameCount,
-  THUMBNAIL_CLIP_HEIGHT,
 } from "./thumbnailUtils";
 
 describe("computeThumbnailStrip", () => {
   it("sizes tiles by aspect ratio at the clip height", () => {
-    const { frameW } = computeThumbnailStrip(500, 16 / 9);
-    expect(frameW).toBe(Math.round(THUMBNAIL_CLIP_HEIGHT * (16 / 9)));
+    expect(computeThumbnailStrip(500, 16 / 9, 40).frameW).toBe(71);
+    expect(computeThumbnailStrip(500, 2.7, 40).frameW).toBe(108);
   });
 
   it("repeats tiles to cover the container width", () => {
-    const { frameW, frameCount } = computeThumbnailStrip(500, 1);
-    expect(frameW).toBe(THUMBNAIL_CLIP_HEIGHT);
-    expect(frameCount).toBe(Math.ceil(500 / THUMBNAIL_CLIP_HEIGHT));
+    const { frameW, frameCount } = computeThumbnailStrip(500, 1, 40);
+    expect(frameW).toBe(40);
+    expect(frameCount).toBe(13);
     expect(frameCount * frameW).toBeGreaterThanOrEqual(500);
   });
 
   it("paints tiles across the full clip past the shared visible-frame budget", () => {
-    expect(computeThumbnailStrip(14_400, 16 / 9).frameCount).toBeGreaterThan(33);
+    expect(computeThumbnailStrip(14_400, 16 / 9, 40).frameCount).toBeGreaterThan(33);
   });
 
-  it("returns one tile when the container width is unknown", () => {
-    expect(computeThumbnailStrip(0, 16 / 9).frameCount).toBe(1);
-    expect(computeThumbnailStrip(-10, 16 / 9).frameCount).toBe(1);
+  it("returns one tile until the container is measured", () => {
+    expect(computeThumbnailStrip(0, 16 / 9, 40).frameCount).toBe(1);
+    expect(computeThumbnailStrip(-10, 16 / 9, 40).frameCount).toBe(1);
+    expect(computeThumbnailStrip(500, 16 / 9, 0).frameCount).toBe(1);
   });
 
   it("falls back to 16:9 for degenerate aspects", () => {
-    const expected = Math.round(THUMBNAIL_CLIP_HEIGHT * (16 / 9));
-    expect(computeThumbnailStrip(300, 0).frameW).toBe(expected);
-    expect(computeThumbnailStrip(300, -2).frameW).toBe(expected);
-    expect(computeThumbnailStrip(300, Number.NaN).frameW).toBe(expected);
-    expect(computeThumbnailStrip(300, Number.POSITIVE_INFINITY).frameW).toBe(expected);
+    const expected = Math.round(40 * (16 / 9));
+    expect(computeThumbnailStrip(300, 0, 40).frameW).toBe(expected);
+    expect(computeThumbnailStrip(300, -2, 40).frameW).toBe(expected);
+    expect(computeThumbnailStrip(300, Number.NaN, 40).frameW).toBe(expected);
+    expect(computeThumbnailStrip(300, Number.POSITIVE_INFINITY, 40).frameW).toBe(expected);
   });
 
   it("never returns a zero-width tile (avoids divide-by-zero repeat counts)", () => {
-    const { frameW, frameCount } = computeThumbnailStrip(300, 0.001);
+    const { frameW, frameCount } = computeThumbnailStrip(300, 0.001, 40);
     expect(frameW).toBeGreaterThanOrEqual(1);
     expect(Number.isFinite(frameCount)).toBe(true);
   });
 
-  it("honors a custom clip height", () => {
-    expect(computeThumbnailStrip(300, 2, 40).frameW).toBe(80);
-  });
-
   it("keeps narrow tiles above a caller-owned minimum", () => {
     expect(computeThumbnailStrip(300, 0.25, 40, 48)).toEqual({
       frameW: 48,

package/src/player/components/thumbnailUtils.ts

@@ -1,7 +1,5 @@
 import { buildProjectApiPath } from "../../utils/projectRouting";
 import { MAX_VISIBLE_THUMBNAIL_FRAMES } from "../lib/timelineViewportBudgets";
-/** Rendered height of a timeline-clip thumbnail strip, in CSS px. */
-export const THUMBNAIL_CLIP_HEIGHT = 66;
 
 export interface ThumbnailStripLayout {
   /** Width of a single tile, in CSS px. */
@@ -63,19 +61,20 @@ export function probeImageAspect(
 }
 
 /**
- * Compute the film-strip tile layout for a clip thumbnail: fixed-height tiles
- * sized by the media's aspect ratio, repeated to fill the clip width.
- * Degenerate aspects (0, negative, NaN, Infinity) fall back to 16:9.
+ * Compute the film-strip tile layout for a clip thumbnail: tiles as tall as
+ * the measured strip, sized by the media's aspect ratio, repeated to fill the
+ * clip width. Degenerate aspects (0, negative, NaN, Infinity) fall back to 16:9.
  */
 export function computeThumbnailStrip(
   containerWidth: number,
   aspect: number,
-  clipHeight: number = THUMBNAIL_CLIP_HEIGHT,
+  clipHeight: number,
   minFrameWidth = 1,
 ): ThumbnailStripLayout {
   const safeAspect = Number.isFinite(aspect) && aspect > 0 ? aspect : 16 / 9;
   const frameW = Math.max(minFrameWidth, Math.round(clipHeight * safeAspect));
-  const frameCount = containerWidth > 0 ? Math.max(1, Math.ceil(containerWidth / frameW)) : 1;
+  const measured = containerWidth > 0 && clipHeight > 0;
+  const frameCount = measured ? Math.max(1, Math.ceil(containerWidth / frameW)) : 1;
   return { frameW, frameCount };
 }
 

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>
       )}

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

@@ -11,86 +11,108 @@ afterEach(() => {
   usePlayerStore.getState().reset();
 });
 
+const element: TimelineElement = {
+  id: "clip-1",
+  tag: "div",
+  start: 0,
+  duration: 2,
+  track: 0,
+};
+
+function mountGesture(kind: "drag" | "resize") {
+  const drag: DraggedClipState = {
+    pointerId: 0,
+    element,
+    originClientX: 0,
+    originClientY: 0,
+    originScrollLeft: 0,
+    originScrollTop: 0,
+    pointerClientX: 0,
+    pointerClientY: 0,
+    pointerOffsetX: 0,
+    pointerOffsetY: 0,
+    previewStart: 1,
+    previewTrack: 0,
+    desiredTrack: 0,
+    insertRow: null,
+    snapTime: null,
+    snapType: null,
+    started: true,
+  };
+  const resize: ResizingClipState = {
+    pointerId: 0,
+    element,
+    edge: "end",
+    originClientX: 0,
+    previewStart: 0,
+    previewDuration: 3,
+    started: true,
+  };
+  const draggedClipRef = { current: kind === "drag" ? drag : null };
+  const resizingClipRef = { current: kind === "resize" ? resize : null };
+  const setDraggedClip = (next: SetStateAction<DraggedClipState | null>) => {
+    draggedClipRef.current = typeof next === "function" ? next(draggedClipRef.current) : next;
+  };
+  const updateDraggedClipPreview = vi.fn((previous: DraggedClipState) => ({
+    ...previous,
+    previewStart: 3,
+  }));
+  const onMoveElement = vi.fn();
+  const onResizeElement = vi.fn();
+  const updateElement = vi.fn();
+  const stopAutoScroll = vi.fn();
+  const cancelGestureRef = { current: () => false };
+  const dispose = mountTimelineClipDragGestureLifecycle({
+    lifecycleRef: { current: { kind, phase: "active", pointerId: null, sessionEpoch: 0 } },
+    sessionEpochRef: { current: 0 },
+    cancelGestureRef,
+    scrollRef: { current: null },
+    draggedClipRef,
+    resizingClipRef,
+    blockedClipRef: { current: null },
+    groupResizeRef: { current: null },
+    suppressClickRef: { current: false },
+    gestureSelectedKeysRef: { current: new Set() },
+    elementsRef: { current: [element] },
+    trackOrderRef: { current: [0] },
+    setDraggedClipState: setDraggedClip,
+    setResizingClipState: () => {},
+    setShowPopover: () => {},
+    setRangeSelectionRef: { current: null },
+    applyResizePointerRef: { current: () => {} },
+    syncClipDragAutoScrollRef: { current: () => {} },
+    stopClipDragAutoScrollRef: { current: stopAutoScroll },
+    updateDraggedClipPreviewRef: { current: updateDraggedClipPreview },
+    publishDraggedClip: setDraggedClip,
+    updateElement,
+    onMoveElementRef: { current: onMoveElement },
+    onMoveElementsRef: { current: undefined },
+    onResizeElementRef: { current: onResizeElement },
+    onResizeElementsRef: { current: undefined },
+    onBlockedEditAttemptRef: { current: undefined },
+    readZIndexRef: { current: undefined },
+    onStackingPatchesRef: { current: undefined },
+    refreshAfterLaneMoveRef: { current: undefined },
+  });
+  return {
+    draggedClipRef,
+    resizingClipRef,
+    updateDraggedClipPreview,
+    onMoveElement,
+    onResizeElement,
+    updateElement,
+    stopAutoScroll,
+    cancelGestureRef,
+    dispose,
+  };
+}
+
+const release = (clientX: number, clientY: number) =>
+  window.dispatchEvent(new MouseEvent("pointerup", { clientX, clientY }));
+
 describe("timeline clip drag gesture lifecycle", () => {
   it("finishes a drag after virtualization unmounts its source row", () => {
-    const element: TimelineElement = {
-      id: "clip-1",
-      tag: "div",
-      start: 0,
-      duration: 2,
-      track: 0,
-    };
-    const drag: DraggedClipState = {
-      pointerId: 0,
-      element,
-      originClientX: 0,
-      originClientY: 0,
-      originScrollLeft: 0,
-      originScrollTop: 0,
-      pointerClientX: 0,
-      pointerClientY: 0,
-      pointerOffsetX: 0,
-      pointerOffsetY: 0,
-      previewStart: 1,
-      previewTrack: 0,
-      desiredTrack: 0,
-      insertRow: null,
-      snapTime: null,
-      snapType: null,
-      started: true,
-    };
-    const draggedClipRef = { current: drag as DraggedClipState | null };
-    const resizingClipRef = { current: null as ResizingClipState | null };
-    const setDraggedClip = (next: SetStateAction<DraggedClipState | null>) => {
-      draggedClipRef.current = typeof next === "function" ? next(draggedClipRef.current) : next;
-    };
-    const updateDraggedClipPreview = vi.fn((previous: DraggedClipState) => ({
-      ...previous,
-      previewStart: 3,
-    }));
-    const onMoveElement = vi.fn();
-    const stopAutoScroll = vi.fn();
-    const cancelGestureRef = { current: () => false };
-    const dispose = mountTimelineClipDragGestureLifecycle({
-      lifecycleRef: {
-        current: {
-          kind: "drag",
-          phase: "active",
-          pointerId: null,
-          sessionEpoch: 0,
-        },
-      },
-      sessionEpochRef: { current: 0 },
-      cancelGestureRef,
-      scrollRef: { current: null },
-      draggedClipRef,
-      resizingClipRef,
-      blockedClipRef: { current: null },
-      groupResizeRef: { current: null },
-      suppressClickRef: { current: false },
-      gestureSelectedKeysRef: { current: new Set() },
-      elementsRef: { current: [element] },
-      trackOrderRef: { current: [0] },
-      setDraggedClipState: setDraggedClip,
-      setResizingClipState: () => {},
-      setShowPopover: () => {},
-      setRangeSelectionRef: { current: null },
-      applyResizePointerRef: { current: () => {} },
-      syncClipDragAutoScrollRef: { current: () => {} },
-      stopClipDragAutoScrollRef: { current: stopAutoScroll },
-      updateDraggedClipPreviewRef: { current: updateDraggedClipPreview },
-      publishDraggedClip: setDraggedClip,
-      updateElement: vi.fn(),
-      onMoveElementRef: { current: onMoveElement },
-      onMoveElementsRef: { current: undefined },
-      onResizeElementRef: { current: undefined },
-      onResizeElementsRef: { current: undefined },
-      onBlockedEditAttemptRef: { current: undefined },
-      readZIndexRef: { current: undefined },
-      onStackingPatchesRef: { current: undefined },
-      refreshAfterLaneMoveRef: { current: undefined },
-    });
-
+    const g = mountGesture("drag");
     const sourceRow = document.createElement("div");
     sourceRow.dataset.timelineRow = "";
     sourceRow.append(document.createElement("div"));
@@ -98,15 +120,49 @@ describe("timeline clip drag gesture lifecycle", () => {
     sourceRow.remove();
 
     window.dispatchEvent(new MouseEvent("pointermove", { clientX: 20, clientY: 10 }));
-    expect(updateDraggedClipPreview).toHaveBeenCalledTimes(1);
-    expect(draggedClipRef.current?.previewStart).toBe(3);
+    expect(g.updateDraggedClipPreview).toHaveBeenCalledTimes(1);
+    expect(g.draggedClipRef.current?.previewStart).toBe(3);
 
     window.dispatchEvent(new MouseEvent("pointerup"));
-    expect(onMoveElement).toHaveBeenCalledWith(element, { start: 3, track: 0 });
-    expect(draggedClipRef.current).toBeNull();
-    expect(stopAutoScroll).toHaveBeenCalledTimes(1);
+    expect(g.onMoveElement).toHaveBeenCalledWith(element, { start: 3, track: 0 });
+    expect(g.draggedClipRef.current).toBeNull();
+    expect(g.stopAutoScroll).toHaveBeenCalledTimes(1);
+
+    g.dispose();
+    expect(g.cancelGestureRef.current()).toBe(false);
+  });
+
+  it.each([
+    ["above the window", 20, -40],
+    ["past the window's right edge", window.innerWidth + 40, 10],
+    ["on the window's right edge", window.innerWidth, 10],
+    ["on the window's bottom edge", 20, window.innerHeight],
+  ])("cancels a drag released %s and leaves the clip where it was", (_, clientX, clientY) => {
+    const g = mountGesture("drag");
+    window.dispatchEvent(new MouseEvent("pointermove", { clientX: 20, clientY: 10 }));
+    release(clientX, clientY);
+    expect(g.onMoveElement).not.toHaveBeenCalled();
+    expect(g.updateElement).not.toHaveBeenCalled();
+    expect(g.draggedClipRef.current).toBeNull();
+    // The cancel ended the gesture, so a later release has nothing to commit.
+    release(20, 10);
+    expect(g.onMoveElement).not.toHaveBeenCalled();
+    g.dispose();
+  });
+
+  it("cancels a trim released outside the window", () => {
+    const g = mountGesture("resize");
+    release(20, -40);
+    expect(g.onResizeElement).not.toHaveBeenCalled();
+    expect(g.updateElement).not.toHaveBeenCalled();
+    expect(g.resizingClipRef.current).toBeNull();
+    g.dispose();
+  });
 
-    dispose();
-    expect(cancelGestureRef.current()).toBe(false);
+  it("still commits a drag released on the window's last pixel", () => {
+    const g = mountGesture("drag");
+    release(window.innerWidth - 1, window.innerHeight - 1);
+    expect(g.onMoveElement).toHaveBeenCalledWith(element, { start: 1, track: 0 });
+    g.dispose();
   });
 });

package/src/player/components/timelineClipDragGestureLifecycle.ts

@@ -8,6 +8,7 @@ import type {
 } from "./timelineClipDragTypes";
 import type { TimelineGroupResizeSession } from "./timelineGroupEditing";
 import { commitTimelineGroupResize } from "./timelineGroupResizeCommit";
+import { releasedOutsideWindow } from "./timelinePointerRelease";
 import {
   beginTimelineOptimisticGesture,
   rollbackLatestTimelineOptimisticGesture,
@@ -349,6 +350,7 @@ export function mountTimelineClipDragGestureLifecycle({
   };
 
   const handleWindowPointerUp = (event: PointerEvent) => {
+    if (releasedOutsideWindow(event)) return handleWindowPointerCancel(event);
     const claimed = claimActiveGesture(event);
     if (claimed === "ignored") return;
     if (claimed) {

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

@@ -880,6 +880,61 @@ describe("resolveTimelineResize", () => {
     expect(next.start).toBe(2);
   });
 
+  function headTrimmedFullyRight(clip: { start: number; duration: number }) {
+    const single = resolveTimelineResize(
+      { ...clip, originClientX: 0, pixelsPerSecond: 100, minStart: 0, maxEnd: 10 },
+      "start",
+      1000,
+    );
+    const group = resolveTimelineGroupResize([clip], "start", 10).members[0]!;
+    return { single: single.duration, group: group.duration };
+  }
+
+  it.each([
+    { start: 1, duration: 0.625 },
+    { start: 1.005, duration: 2 },
+  ])("keeps the minimum duration when a head trim runs off the grid (%o)", (clip) => {
+    const { single, group } = headTrimmedFullyRight(clip);
+    expect(Math.min(single, group)).toBeGreaterThanOrEqual(0.1);
+  });
+
+  it("keeps the minimum duration for any off-grid start and length on a 1 ms grid", () => {
+    const short: string[] = [];
+    for (let i = 0; i < 20; i++) {
+      for (let j = 0; j < 18; j++) {
+        const clip = { start: (1000 + i * 13) / 1000, duration: (100 + j * 17) / 1000 };
+        const { single, group } = headTrimmedFullyRight(clip);
+        if (Math.min(single, group) < 0.1 - 1e-9) short.push(`${clip.start}+${clip.duration}`);
+      }
+    }
+    expect(short).toEqual([]);
+  });
+
+  it("stops a group head trim where the single-clip trim stops", () => {
+    const { single, group } = headTrimmedFullyRight({ start: 1.003, duration: 2 });
+    expect(group).toBe(single);
+  });
+
+  it("moves on-grid group members together when the tightest member sits 5 ms off the grid", () => {
+    const members = [
+      { start: 1.005, duration: 2 },
+      { start: 0, duration: 5 },
+      { start: 0.24, duration: 5 },
+    ];
+    const next = resolveTimelineGroupResize(members, "start", 10).members;
+    expect(next.map((m) => m.start)).toEqual([2.9, 1.89, 2.13]);
+  });
+
+  it("never moves a group head trim left of zero near the minimum length", () => {
+    const [member] = resolveTimelineGroupResize(
+      [{ start: 0.004, duration: 0.1 }],
+      "start",
+      10,
+    ).members;
+    expect(member!.start).toBeGreaterThanOrEqual(0);
+    expect(member!.duration).toBeGreaterThanOrEqual(0.1);
+  });
+
   it("moves every group member by the same amount when one reaches its media start", () => {
     const members = [
       { start: 2, duration: 3, playbackStart: 1, playbackRate: 1.5 },