@hyperframes/studio 0.8.81 → 0.8.82

package/src/player/components/ImageThumbnail.tsx

@@ -1,6 +1,6 @@
-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 } from "../lib/thumbnailScheduler";
 import { decodeImageThumbnail } from "../lib/thumbnailImageDecoder";
 import { computeThumbnailStrip } from "./thumbnailUtils";
@@ -25,8 +25,7 @@ export const ImageThumbnail = memo(function ImageThumbnail({
   priority = "visible",
   rich = false,
 }: ImageThumbnailProps) {
-  const [containerWidth, setContainerWidth] = useState(0);
-  const observerRef = useRef<ResizeObserver | null>(null);
+  const [container, setContainerRef] = useThumbnailStripSize();
   const request = useMemo(
     () => ({
       key: createThumbnailKey({ kind: "image", source: imageSrc, rich: Number(rich) }),
@@ -42,20 +41,7 @@ export const ImageThumbnail = memo(function ImageThumbnail({
   const snapshot = useThumbnailLease(request);
   const value = snapshot.status === "ready" ? snapshot.value : null;
   const aspect = value?.kind === "image" ? value.aspect : 16 / 9;
-  const { frameW, frameCount } = computeThumbnailStrip(containerWidth, aspect);
-
-  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/PlayerControls.test.tsx

@@ -0,0 +1,52 @@
+// @vitest-environment happy-dom
+
+import React, { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it } from "vitest";
+import { liveTime, usePlayerStore } from "../store/playerStore";
+import { PlayerControls } from "./PlayerControls";
+
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
+
+let host: HTMLDivElement;
+let root: Root;
+
+beforeEach(async () => {
+  usePlayerStore.setState({
+    isPlaying: true,
+    currentTime: 2,
+    duration: 30,
+    timeDisplayMode: "time",
+  });
+  host = document.createElement("div");
+  document.body.append(host);
+  root = createRoot(host);
+  await act(async () =>
+    root.render(React.createElement(PlayerControls, { onTogglePlay: () => {}, onSeek: () => {} })),
+  );
+});
+
+afterEach(async () => {
+  await act(async () => root.unmount());
+  host.remove();
+});
+
+describe("PlayerControls timecode", () => {
+  it("rewrites the timecode only when the shown text changes", async () => {
+    const timecode = host.querySelector("button.font-mono > span");
+    expect(timecode?.textContent).toBe("00:02");
+    const writes: MutationRecord[] = [];
+    const observer = new MutationObserver((records) => writes.push(...records));
+    observer.observe(timecode as Node, { childList: true, characterData: true, subtree: true });
+
+    for (let frame = 1; frame <= 30; frame++) liveTime.notify(2 + frame / 120);
+    await Promise.resolve();
+    expect(writes).toHaveLength(0);
+
+    liveTime.notify(3.01);
+    await Promise.resolve();
+    expect(timecode?.textContent).toBe("00:03");
+    expect(writes.length).toBeGreaterThan(0);
+    observer.disconnect();
+  });
+});

package/src/player/components/PlayerControls.tsx

@@ -213,10 +213,11 @@ export const PlayerControls = memo(function PlayerControls({
       currentTimeRef.current = time;
       if (!timeDisplayRef.current) return;
       const currentDuration = durationRef.current;
-      timeDisplayRef.current.textContent =
+      const text =
         timeDisplayModeRef.current === "frame"
           ? formatFrameTime(time, currentDuration)
           : formatTime(time);
+      if (timeDisplayRef.current.textContent !== text) timeDisplayRef.current.textContent = text;
     };
     const unsubscribe = liveTime.subscribe(updateTime);
     updateTime(usePlayerStore.getState().currentTime);

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

@@ -39,7 +39,7 @@ import {
 } from "./timelineLayout";
 import { AUTOMATION_LANE_H } from "./automationLaneHeight";
 import { formatTime } from "../lib/time";
-import { usePlayerStore } from "../store/playerStore";
+import { liveTime, usePlayerStore } from "../store/playerStore";
 import { TimelineEditProvider } from "../../contexts/TimelineEditContext";
 
 vi.mock("./timelineRowVirtualizationFlag", () => ({
@@ -153,6 +153,27 @@ function renderSharedAutomationTimeline(selectedElementId?: string) {
   return { host, root };
 }
 
+describe("Timeline playhead motion", () => {
+  it("moves by fractional pixels while playing and snaps to device pixels once paused", () => {
+    usePlayerStore.setState({
+      duration: 11,
+      timelineReady: true,
+      currentTime: 10,
+      isPlaying: true,
+      zoomMode: "manual",
+      manualZoomPercent: 100,
+      elements: [{ id: "clip-1", tag: "div", start: 10, duration: 1, track: 0 }],
+    });
+    const { root, playhead } = renderTimelineGeometry("clip-1");
+    const wrapperLeft = GUTTER + TRACKS_LEFT_PAD + 1000.3 - PLAYHEAD_HEAD_W / 2;
+    act(() => liveTime.notify(10.003));
+    expect(playhead.style.transform).toBe(`translateX(${wrapperLeft}px)`);
+    act(() => usePlayerStore.setState({ isPlaying: false }));
+    expect(playhead.style.transform).toBe(`translateX(${Math.round(wrapperLeft)}px)`);
+    act(() => root.unmount());
+  });
+});
+
 describe("Timeline provider boundary", () => {
   it("keeps all-collapsed horizontal positions at the gutter plus the pre-t=0 pad", () => {
     usePlayerStore.setState({
@@ -173,7 +194,9 @@ describe("Timeline provider boundary", () => {
     expect(clip.style.bottom).toBe(`${CLIP_Y}px`);
     expect(rulerOrigin.style.width).toBe(`${GUTTER + TRACKS_LEFT_PAD}px`);
     expect(rulerTick.style.left).toBe("999.5px");
-    expect(playhead.style.left).toBe(`${GUTTER + TRACKS_LEFT_PAD + 1000 - PLAYHEAD_HEAD_W / 2}px`);
+    expect(playhead.style.transform).toBe(
+      `translateX(${Math.round(GUTTER + TRACKS_LEFT_PAD + 1000 - PLAYHEAD_HEAD_W / 2)}px)`,
+    );
     expect(playhead.style.width).toBe(`${PLAYHEAD_HEAD_W}px`);
     expect(
       resolveTimelineAssetDrop(
@@ -283,7 +306,9 @@ describe("Timeline provider boundary", () => {
     expect(semanticRows[2]?.hasAttribute("aria-expanded")).toBe(false);
     expect(trackHeader.style.width).toBe(`${LABEL_COL_W}px`);
     expect(rulerOrigin.style.width).toBe(`${LABEL_COL_W + GUTTER}px`);
-    expect(playhead.style.left).toBe(`${LABEL_COL_W + GUTTER + 1000 - PLAYHEAD_HEAD_W / 2}px`);
+    expect(playhead.style.transform).toBe(
+      `translateX(${Math.round(LABEL_COL_W + GUTTER + 1000 - PLAYHEAD_HEAD_W / 2)}px)`,
+    );
     expect(diamondX).toBe(rulerX);
     expect(rulerX).toBe(LABEL_COL_W + GUTTER + 1000);
     expect(collapsedHeader.textContent).toContain("Outro");

package/src/player/components/TimelineCanvas.tsx

@@ -9,10 +9,10 @@ import {
   TRACKS_BOTTOM_PAD,
   TRACK_H,
   PLAYHEAD_HEAD_W,
-  getTimelinePlayheadLeft,
   getTimelineRowTop,
   getTimelineRowHeight,
 } from "./timelineLayout";
+import { getTimelinePlayheadTransform } from "./timelinePlayheadTransform";
 import { TimelineLanes } from "./TimelineLanes";
 import { TimelineGestureOverlay } from "./TimelineGestureOverlay";
 import { useTimelineContext } from "./TimelineProvider";
@@ -234,7 +234,7 @@ export const TimelineCanvas = memo(function TimelineCanvas() {
 
       {/* Playhead — hidden while dragging a beat so its guideline doesn't
           track the scrub and clutter the beat being moved. Explicit width +
-          the half-head offset baked into getTimelinePlayheadLeft keep the
+          the half-head offset baked into getTimelinePlayheadTransform keep the
           inner 1px line's CENTER exactly on contentOrigin + t * pps (the ruler
           ticks' center), instead of relying on shrink-wrap sizing. */}
       <TimelinePlayheadLayer scrollRef={props.scrollRef} contentOrigin={props.contentOrigin}>
@@ -242,7 +242,9 @@ export const TimelineCanvas = memo(function TimelineCanvas() {
           ref={props.playheadRef}
           className="absolute top-0 bottom-0 pointer-events-none"
           style={{
-            left: `${getTimelinePlayheadLeft(0, 0, props.contentOrigin)}px`,
+            left: 0,
+            transform: getTimelinePlayheadTransform(0, 0, props.contentOrigin, true),
+            willChange: "transform",
             width: PLAYHEAD_HEAD_W,
             display: beatDragging ? "none" : undefined,
           }}

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/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/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 },

package/src/player/components/timelineGroupEditing.ts

@@ -1,3 +1,4 @@
+import { clampPlaybackRate } from "@hyperframes/parsers/media-duration";
 import { roundToCenti } from "../../utils/rounding";
 import type { TimelineElement } from "../store/playerStore";
 import { getTimelineEditCapabilities } from "./timelineEditCapabilities";
@@ -19,13 +20,17 @@ function ceilTimelineTime(value: number): number {
   return Math.ceil((value - SAVED_MEDIA_OFFSET_TOLERANCE) * 100) / 100;
 }
 
+function floorTimelineTime(value: number): number {
+  return Math.floor((value + SAVED_MEDIA_OFFSET_TOLERANCE) * 100) / 100;
+}
+
 export function resolveTimelineMinDuration(minDuration?: number): number {
   return Math.max(ABSOLUTE_TIMELINE_MIN_DURATION, minDuration ?? DEFAULT_TIMELINE_MIN_DURATION);
 }
 
 /** Playback rate never drops to zero (would make media-in-point math divide by ~0). */
-function resolveTimelinePlaybackRate(rate?: number): number {
-  return Math.max(0.1, rate ?? 1);
+export function resolveTimelinePlaybackRate(rate?: number): number {
+  return clampPlaybackRate(rate ?? 1);
 }
 
 interface TimelineStartTrimClip {
@@ -38,8 +43,8 @@ interface TimelineStartTrimClip {
 /**
  * Delta bounds for trimming a clip's START edge (shared by single-clip and group
  * resize). Left-bounded by how far the start can move toward `minStart` and by the
- * media in-point (`playbackStart / playbackRate`); right-bounded by `minDuration`.
- * Returned deltas are unrounded; applyClipStartTrimDelta does the rounding.
+ * media in-point (`playbackStart / playbackRate`); right-bounded by `minDuration`, the start
+ * floored onto the centisecond grid. Otherwise unrounded; applyClipStartTrimDelta rounds.
  */
 export function clipStartTrimDeltaBounds(
   clip: TimelineStartTrimClip,
@@ -51,7 +56,7 @@ export function clipStartTrimDeltaBounds(
     clip.playbackStart != null ? clip.playbackStart / playbackRate : Number.POSITIVE_INFINITY;
   return {
     minDelta: -Math.min(clip.start - minStart, maxLeftExtensionFromMedia),
-    maxDelta: clip.duration - minDuration,
+    maxDelta: floorTimelineTime(clip.start + clip.duration - minDuration) - clip.start,
   };
 }
 
@@ -137,7 +142,9 @@ export function clampTimelineGroupResizeDelta(
   const bounds = members.map((member) => clipStartTrimDeltaBounds(member, 0, minDuration));
   const minDelta = ceilTimelineTime(Math.max(...bounds.map((b) => b.minDelta)));
   const maxDelta = Math.min(...bounds.map((b) => b.maxDelta));
-  return roundTimelineTime(clamp(rawDelta, minDelta, maxDelta));
+  const delta = roundTimelineTime(clamp(rawDelta, minDelta, maxDelta));
+  const roundedPastTightestMember = delta > maxDelta + SAVED_MEDIA_OFFSET_TOLERANCE;
+  return roundedPastTightestMember ? maxDelta - SAVED_MEDIA_OFFSET_TOLERANCE : delta;
 }
 
 export function resolveTimelineGroupResize(

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

@@ -0,0 +1,33 @@
+import { describe, expect, it } from "vitest";
+import { getTimelinePlayheadTransform } from "./timelinePlayheadTransform";
+
+const x = (transform: string) => Number(/translateX\(([-\d.e]+)px\)/.exec(transform)?.[1]);
+
+describe("getTimelinePlayheadTransform", () => {
+  it("keeps fractional pixels while playing, so slow motion does not stair-step", () => {
+    // Fit zoom on a two-minute film is about 13.3px a second: 120 frames of one second of playback.
+    const frames = Array.from({ length: 121 }, (_, i) => i / 120);
+    const playing = new Set(frames.map((t) => getTimelinePlayheadTransform(t, 13.3, 80, false, 1)));
+    const resting = new Set(frames.map((t) => getTimelinePlayheadTransform(t, 13.3, 80, true, 1)));
+    expect(playing.size).toBe(121);
+    expect(resting.size).toBeLessThan(20);
+  });
+
+  it("at rest puts the line on the device pixel layout gives its ruler tick", () => {
+    // The 1px line sits 4px into the 9px wrapper; the tick is laid out at t * pps - 0.5 and rounded by layout.
+    for (const dpr of [1, 1.5, 2]) {
+      for (let i = 0; i <= 400; i += 1) {
+        const t = i * 0.0137;
+        const wrapper = x(getTimelinePlayheadTransform(t, 13.3, 80, true, dpr));
+        const lineDevicePx = Math.round((wrapper + 4) * dpr);
+        const tickDevicePx = Math.round((80 + t * 13.3 - 0.5) * dpr);
+        expect(lineDevicePx, `t=${t} dpr=${dpr}`).toBe(tickDevicePx);
+      }
+    }
+  });
+
+  it("at time zero at 1x lands the line on the tick's column", () => {
+    expect(getTimelinePlayheadTransform(0, 100, 80, true, 1)).toBe("translateX(76px)");
+    expect(Math.round(80 - 0.5)).toBe(76 + 4);
+  });
+});

package/src/player/components/timelinePlayheadTransform.ts

@@ -0,0 +1,17 @@
+import { getTimelinePlayheadLeft } from "./timelineLayout";
+
+/**
+ * Moves the playhead by transform, with no relayout. Playing, it keeps fractional pixels so slow motion stays
+ * smooth; at rest it rounds to device pixels the way layout rounds the ruler ticks, so the line sits on its tick.
+ */
+export function getTimelinePlayheadTransform(
+  time: number,
+  pixelsPerSecond: number,
+  contentOrigin: number,
+  atRest: boolean,
+  devicePixelRatio = globalThis.devicePixelRatio || 1,
+): string {
+  const left = getTimelinePlayheadLeft(time, pixelsPerSecond, contentOrigin);
+  if (!atRest) return `translateX(${left}px)`;
+  return `translateX(${Math.round(left * devicePixelRatio) / devicePixelRatio}px)`;
+}