@hyperframes/studio 0.8.111 → 0.8.113

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyperframes/studio",
-  "version": "0.8.111",
+  "version": "0.8.113",
   "description": "",
   "repository": {
     "type": "git",
@@ -60,12 +60,12 @@
     "dockview-react": "8.3.1",
     "gsap": "^3.13.0",
     "mediabunny": "^1.45.3",
-    "@hyperframes/player": "0.8.111",
-    "@hyperframes/core": "0.8.111",
-    "@hyperframes/shader-transitions": "0.8.111",
-    "@hyperframes/parsers": "0.8.111",
-    "@hyperframes/sdk": "0.8.111",
-    "@hyperframes/studio-server": "0.8.111"
+    "@hyperframes/core": "0.8.113",
+    "@hyperframes/player": "0.8.113",
+    "@hyperframes/sdk": "0.8.113",
+    "@hyperframes/parsers": "0.8.113",
+    "@hyperframes/studio-server": "0.8.113",
+    "@hyperframes/shader-transitions": "0.8.113"
   },
   "devDependencies": {
     "@tailwindcss/vite": "^4.3.3",
@@ -81,7 +81,7 @@
     "vite": "^6.4.2",
     "vitest": "^4.1.11",
     "zustand": "^5.0.0",
-    "@hyperframes/producer": "0.8.111"
+    "@hyperframes/producer": "0.8.113"
   },
   "peerDependencies": {
     "react": "19",
@@ -94,7 +94,9 @@
     "typecheck": "tsc --noEmit",
     "test": "vitest run",
     "test:edit-accuracy": "bun tests/e2e/edit-accuracy/run.mjs",
+    "test:filmstrip-controls": "node tests/e2e/filmstrip-controls.mjs",
     "test:webmcp-edit-loop": "node tests/e2e/webmcp-edit-loop.mjs",
+    "test:thumbnail-save": "node tests/e2e/thumbnail-save.mjs",
     "test:timeline-virtualization": "TIMELINE_ROW_VIRTUALIZATION=on TIMELINE_ELEMENT_COUNT=50000 node tests/e2e/timeline-virtualization.mjs",
     "test:watch": "vitest",
     "report:sdk-cutover": "bun src/utils/sdkCutoverPolicy.report.ts",

package/src/components/nle/useCanvasZOrderTimelineMirror.ts

@@ -2,13 +2,13 @@ import { useCallback, useRef } from "react";
 import { usePlayerStore } from "../../player";
 import { useTimelineEditContextOptional } from "../../contexts/TimelineEditContext";
 import {
-  displayTrackOrder,
   resolveRepositionLaneMove,
   resolveZMirrorLaneMove,
   type ZMirrorAction,
   type ZMirrorLaneMove,
 } from "../../player/components/timelineZMirror";
 import type { TimelineElement } from "../../player/store/playerStore";
+import { timelineTrackOrder } from "../../player/components/timelineTrackDisplay";
 import { commitZMirrorLaneMove } from "../../player/components/timelineClipDragCommit";
 import { deriveTimelineStoreKey } from "../../player/lib/timelineElementHelpers";
 import { buildStableSelector, getSelectorIndex } from "../editor/domEditingDom";
@@ -156,7 +156,7 @@ function useMirrorLaneMoveCommit(): (
         move,
         {
           elements: els,
-          trackOrder: displayTrackOrder(els),
+          trackOrder: timelineTrackOrder(els),
           updateElement: (key, updates) => usePlayerStore.getState().updateElement(key, updates),
           onMoveElements,
           // NO readZIndex / onStackingPatches: see the hook doc — the lane→z

package/src/hooks/timelineEditingHelpers.ts

@@ -238,6 +238,7 @@ export function buildTimelineMoveTimingPatch(
   start: number,
   duration: number,
   track?: number,
+  audioGroup?: null,
 ): string {
   if (!Number.isFinite(start) || !Number.isFinite(duration)) {
     console.warn(
@@ -257,6 +258,12 @@ export function buildTimelineMoveTimingPatch(
       value: formatTimelineAttributeNumber(track),
     });
   }
+  if (audioGroup === null)
+    patched = applyPatchByTarget(patched, target, {
+      type: "attribute",
+      property: "data-audio-group",
+      value: null,
+    });
   // Content-driven duration: sync data-duration to the furthest clip end read
   // from the PATCHED SOURCE (raw data-duration), so it grows if a clip moved
   // past the end and shrinks if the furthest clip moved left. Measured from the

package/src/hooks/timelineMoveAdapter.test.ts

@@ -68,6 +68,18 @@ describe("persistTimelineMoveEditsAtomically", () => {
     });
   });
 
+  it("carries explicit detachment through the atomic move", async () => {
+    const edit = {
+      element: { ...element("voice", 1), audioGroup: "group" },
+      updates: { start: 1, track: 0, audioGroup: null },
+    };
+    const handle = await runMove([edit], "move", "track-insert");
+    expect(handle).toHaveBeenCalledWith(
+      [{ element: edit.element, start: 1, track: 0, audioGroup: null }],
+      { coalesceKey: "move" },
+    );
+  });
+
   it("rejects without retrying individual members when the atomic batch fails", async () => {
     const failure = new Error("batch failed");
     const handleTimelineGroupMove = vi.fn().mockRejectedValue(failure);

package/src/hooks/timelineMoveAdapter.ts

@@ -5,9 +5,13 @@ import type {
   TimelineGroupMoveChange,
 } from "./useTimelineGroupEditing";
 
-export interface TimelineMoveEdit {
+export type TimelineAtomicMoveUpdates = Pick<TimelineElement, "start" | "track"> & {
+  audioGroup?: null;
+};
+
+export interface TimelineAtomicMoveEdit {
   element: TimelineElement;
-  updates: Pick<TimelineElement, "start" | "track">;
+  updates: TimelineAtomicMoveUpdates;
 }
 
 interface AtomicMoveDeps {
@@ -20,14 +24,14 @@ interface AtomicMoveDeps {
 export type TimelineMoveOperation = "timing" | "lane-reorder" | "track-insert";
 
 export type TimelineMoveEditsHandler = (
-  edits: TimelineMoveEdit[],
+  edits: TimelineAtomicMoveEdit[],
   coalesceKey?: string,
   operation?: TimelineMoveOperation,
   coalesceMs?: number,
 ) => Promise<void>;
 
 export function persistTimelineMoveEditsAtomically(
-  edits: TimelineMoveEdit[],
+  edits: TimelineAtomicMoveEdit[],
   coalesceKey: string | undefined,
   operation: TimelineMoveOperation,
   deps: AtomicMoveDeps,
@@ -37,6 +41,7 @@ export function persistTimelineMoveEditsAtomically(
     edits.map(({ element, updates }) => ({
       element,
       start: updates.start,
+      audioGroup: updates.audioGroup,
       // Stable track lanes: a lane is the authored data-track-index, so every
       // vertical gesture (lane-reorder AND track-insert) must persist the track;
       // z is paint order only and is synced separately. Plain horizontal moves

package/src/hooks/useTimelineGroupEditing.test.tsx

@@ -4,6 +4,7 @@ import { act } from "react";
 import { afterEach, describe, expect, it, vi } from "vitest";
 import type { Root } from "react-dom/client";
 import type { TimelineElement } from "../player";
+import { persistTimelineMoveEditsAtomically } from "./timelineMoveAdapter";
 import { useTimelineGroupEditing } from "./useTimelineGroupEditing";
 import { installReactActEnvironment, mountReactHarness } from "./domSelectionTestHarness";
 
@@ -72,3 +73,79 @@ describe("useTimelineGroupEditing: handleTimelineGroupMove suppressFailureToast"
     expect(showToast).toHaveBeenCalledTimes(1);
   });
 });
+
+it.each([false, true])(
+  "keeps detachment and the lane atomic, including a refused history write ($0)",
+  async (refused) => {
+    const before =
+      '<main data-composition-id="root" data-duration="4"><audio id="voice" data-start="0" data-duration="2" data-track-index="1" data-audio-group="group"></audio></main>';
+    let disk = before;
+    const failure = new Error("history refused");
+    const recordEdit = refused ? vi.fn().mockRejectedValue(failure) : vi.fn();
+    const iframe = document.createElement("iframe");
+    document.body.append(iframe);
+    iframe.contentDocument!.body.innerHTML = before;
+    const writeProjectFile = vi.fn(async (_path: string, content: string) => {
+      disk = content;
+    });
+    vi.stubGlobal(
+      "fetch",
+      vi.fn(
+        async () =>
+          new Response(JSON.stringify({ content: disk }), {
+            headers: { "content-type": "application/json" },
+          }),
+      ),
+    );
+    let hook: ReturnType<typeof useTimelineGroupEditing>;
+    function Harness() {
+      hook = useTimelineGroupEditing({
+        activeCompPath: "index.html",
+        editQueueRef: { current: Promise.resolve() },
+        pendingTimelineEditPathRef: { current: new Set() },
+        previewIframeRef: { current: iframe },
+        projectIdRef: { current: "fixture" },
+        recordEdit,
+        writeProjectFile,
+        reloadPreview: vi.fn(),
+        showToast: vi.fn(),
+      });
+      return null;
+    }
+    const root = mountReactHarness(<Harness />);
+    try {
+      await act(async () => {
+        const moved = persistTimelineMoveEditsAtomically(
+          [
+            {
+              element: { ...el("voice", 0, 2, 1), tag: "audio", audioGroup: "group" },
+              updates: { start: 0, track: 0, audioGroup: null },
+            },
+          ],
+          "insert",
+          "track-insert",
+          { handleTimelineGroupMove: hook!.handleTimelineGroupMove },
+        );
+        if (refused) await expect(moved).rejects.toBe(failure);
+        else await moved;
+      });
+      expect(
+        iframe.contentDocument!.getElementById("voice")?.getAttribute("data-audio-group"),
+      ).toBe("group");
+      if (refused) {
+        expect(disk).toBe(before);
+        expect(writeProjectFile).toHaveBeenCalledTimes(2);
+        return;
+      }
+      expect(writeProjectFile).toHaveBeenCalledOnce();
+      expect(recordEdit).toHaveBeenCalledOnce();
+      expect(disk).not.toContain("data-audio-group");
+      expect(disk).toContain('data-track-index="0"');
+      expect(recordEdit.mock.calls[0][0].files["index.html"]).toEqual({ before, after: disk });
+    } finally {
+      act(() => root.unmount());
+      iframe.remove();
+      vi.unstubAllGlobals();
+    }
+  },
+);

package/src/hooks/useTimelineGroupEditing.ts

@@ -37,6 +37,7 @@ export interface TimelineGroupMoveChange {
   element: TimelineElement;
   start: number;
   track?: number;
+  audioGroup?: null;
 }
 
 export interface TimelineGroupResizeChange {
@@ -296,7 +297,9 @@ export function useTimelineGroupEditing({
           sdkChanges: toSdkTimingChanges(changes, (change) => ({
             start: toAuthoredStart(change.element, change.start),
           })),
-          eligible: changes.every((change) => change.track == null),
+          eligible: changes.every(
+            (change) => change.track == null && change.audioGroup === undefined,
+          ),
           needsExtension,
           label,
           coalesceKey,
@@ -315,6 +318,7 @@ export function useTimelineGroupEditing({
                   toAuthoredStart(change.element, change.start),
                   change.element.duration,
                   change.track,
+                  change.audioGroup,
                 ),
             })),
             coalesceKey,

package/src/index.ts

@@ -62,6 +62,13 @@ export { TimelineProvider, useTimelineContext } from "./player/components/Timeli
 export type { TimelineTheme } from "./player/components/timelineTheme";
 export { TRACK_H } from "./player/components/timelineLayout";
 export type { TimelineTrackPadding } from "./player/components/timelineLayout";
+export { displayTrackOrder } from "./player/components/useTimelineTrackDerivations";
+export { fadeHandleBoxes } from "./player/components/timelineClipFadeGeometry";
+export type {
+  FadeEdge,
+  FadeHandleBox,
+  FadeHandleClipBox,
+} from "./player/components/timelineClipFadeGeometry";
 
 // Clip content thumbnails: used by a host rendering its own timeline lane.
 export { AudioWaveform } from "./player/components/AudioWaveform";

package/src/main.tsx

@@ -7,8 +7,12 @@ import { StudioErrorBoundary } from "./components/StudioErrorBoundary";
 import { readIconTokens } from "./styles/iconTokens";
 import { trackStudioEvent } from "./utils/studioTelemetry";
 import { prefetchPreviewForHash } from "./utils/previewPrefetch";
+import { bindThumbnailPageLifecycle } from "./player/lib/thumbnailPageLifecycle";
 import "./styles/studio.css";
 
+const unbindThumbnailPageLifecycle = bindThumbnailPageLifecycle(window, document);
+import.meta.hot?.dispose(unbindThumbnailPageLifecycle);
+
 prefetchPreviewForHash(window.location.hash);
 window.addEventListener("hashchange", () => prefetchPreviewForHash(window.location.hash));
 trackStudioEvent("session_start");

package/src/player/components/ClipBadges.tsx

@@ -24,7 +24,7 @@ function SpeakerGlyph({ muted }: { muted: boolean }) {
 const BADGE_CLASS =
   "timeline-clip__badge inline-flex items-center gap-0.5 rounded-[3px] border bg-black/55 px-1 text-[9px] leading-[14px] whitespace-nowrap";
 const FX_ON = "border-white/40 text-white font-semibold";
-const FX_OFF = "border-white/10 text-white/35";
+const FX_OFF = "border-white/10 text-white/60";
 
 /** Premiere's fx badge — grey with no effects, white with any; hover lists them, click opens the clip menu. */
 export const ClipBadges = memo(function ClipBadges({
@@ -44,21 +44,21 @@ export const ClipBadges = memo(function ClipBadges({
   };
   return (
     <span
-      className="pointer-events-none absolute right-1.5 top-0.5 z-[3] flex gap-1"
+      className="pointer-events-none absolute right-1.5 top-0.5 z-[31] flex max-w-[calc(100%-12px)] gap-1 overflow-hidden"
       data-testid="clip-badges"
     >
       {volume && (
         <span
-          className={`${BADGE_CLASS} border-white/20 text-white/90`}
+          className={`${BADGE_CLASS} min-w-0 overflow-hidden border-white/20 text-white/90`}
           title={volume}
           data-badge="volume"
         >
           <SpeakerGlyph muted={volume === "Muted"} />
-          {volume === "Muted" ? null : <span>{volume}</span>}
+          {volume === "Muted" ? null : <span className="truncate">{volume}</span>}
         </span>
       )}
       <span
-        className={`${BADGE_CLASS} pointer-events-auto cursor-pointer ${hasEffects ? FX_ON : FX_OFF}`}
+        className={`${BADGE_CLASS} pointer-events-auto shrink-0 cursor-pointer ${hasEffects ? FX_ON : FX_OFF}`}
         title={hasEffects ? effects.join(" · ") : "No effects"}
         data-badge="fx"
         data-fx-active={hasEffects ? "true" : "false"}

package/src/player/components/Timeline.ghostLane.test.tsx

@@ -1,14 +1,14 @@
 // @vitest-environment happy-dom
 
-import React, { act } from "react";
-import { createRoot } from "react-dom/client";
+import { act } from "react";
 import { afterEach, describe, expect, it, vi } from "vitest";
-import { Timeline } from "./Timeline";
+import {
+  mountThreeTrackTimeline as mountThreeTracks,
+  dragTimelineFixtureAsset,
+  pointerTimelineFixture as pointer,
+} from "./timelineMountFixtures";
 import { installTimelineMountEnv } from "./timelineMountTestEnv";
-import { usePlayerStore } from "../store/playerStore";
 import { CLIP_Y, TRACK_H, getTimelineRowTop } from "./timelineLayout";
-import { TIMELINE_ASSET_MIME } from "../../utils/timelineAssetDrop";
-import type { TimelineProps } from "./TimelineTypes";
 
 (globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
 
@@ -21,32 +21,6 @@ afterEach(() => {
 const GHOST_MID = getTimelineRowTop(3) + TRACK_H / 2;
 const ROW1_MID = getTimelineRowTop(1) + TRACK_H / 2;
 
-async function mountThreeTracks(props: TimelineProps = {}) {
-  usePlayerStore.setState({
-    duration: 10,
-    currentTime: 0,
-    timelineReady: true,
-    gsapAnimations: new Map(),
-    selectedElementId: null,
-    selectedElementIds: new Set(),
-    elements: [0, 1, 2].map((track) => ({
-      id: `c${track}`,
-      key: `c${track}`,
-      domId: `c${track}`,
-      tag: "div",
-      start: 0,
-      duration: 2,
-      track,
-    })),
-  });
-  const host = document.createElement("div");
-  document.body.append(host);
-  const root = createRoot(host);
-  await act(async () => root.render(<Timeline {...props} />));
-  const ghost = () => host.querySelector<HTMLElement>('[data-testid="timeline-ghost-lane"]');
-  return { host, root, ghost };
-}
-
 describe("Timeline ghost lane", () => {
   it("draws one empty track below the last with a drop hint", async () => {
     const { root, ghost } = await mountThreeTracks({ onAssetDrop: vi.fn() });
@@ -70,22 +44,8 @@ describe("Timeline ghost lane", () => {
     const onAssetDrop = vi.fn();
     const { host, root, ghost } = await mountThreeTracks({ onAssetDrop });
     const viewport = host.querySelector<HTMLElement>("[data-timeline-scroll-viewport]")!;
-    const drag = (type: string, clientY: number) => {
-      const event = new Event(type, { bubbles: true, cancelable: true });
-      Object.defineProperties(event, {
-        clientX: { value: 400 },
-        clientY: { value: clientY },
-        dataTransfer: {
-          value: {
-            types: [TIMELINE_ASSET_MIME],
-            files: [],
-            dropEffect: "none",
-            getData: (mime: string) => (mime === TIMELINE_ASSET_MIME ? '{"path":"a.png"}' : ""),
-          },
-        },
-      });
-      act(() => void viewport.dispatchEvent(event));
-    };
+    const drag = (type: string, clientY: number) =>
+      dragTimelineFixtureAsset(viewport, type, clientY);
     drag("dragover", ROW1_MID);
     expect(ghost()?.dataset.active).toBeUndefined();
     drag("dragover", GHOST_MID);
@@ -100,19 +60,6 @@ describe("Timeline ghost lane", () => {
       onMoveElement: vi.fn(),
       onResizeElement: vi.fn(),
     });
-    const pointer = (target: EventTarget, type: string, clientY: number) =>
-      act(
-        () =>
-          void target.dispatchEvent(
-            new PointerEvent(type, {
-              bubbles: true,
-              button: 0,
-              pointerId: 1,
-              clientX: 400,
-              clientY,
-            }),
-          ),
-      );
     const clipMid = getTimelineRowTop(track) + TRACK_H / 2;
     pointer(host.querySelector(`[data-clip][data-el-id="c${track}"]`)!, "pointerdown", clipMid);
     pointer(window, "pointermove", ROW1_MID);

package/src/player/components/Timeline.trackPadding.test.tsx

@@ -7,7 +7,11 @@ import { Timeline } from "./Timeline";
 import { installTimelineMountEnv } from "./timelineMountTestEnv";
 import { usePlayerStore } from "../store/playerStore";
 import { CLIP_Y, RULER_H, TRACK_H, TRACKS_BOTTOM_PAD, TRACKS_TOP_PAD } from "./timelineLayout";
-import { TIMELINE_ASSET_MIME } from "../../utils/timelineAssetDrop";
+import {
+  mountThreeTrackTimeline,
+  dragTimelineFixtureAsset,
+  pointerTimelineFixture as pointer,
+} from "./timelineMountFixtures";
 import type { TimelineProps } from "./TimelineTypes";
 
 (globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
@@ -59,29 +63,7 @@ describe("Timeline trackPadding", () => {
   const hostPads = { top: 0, bottom: TRACK_H };
 
   async function mountThreeTracks(props: TimelineProps = {}) {
-    usePlayerStore.setState({
-      duration: 10,
-      currentTime: 0,
-      timelineReady: true,
-      gsapAnimations: new Map(),
-      selectedElementId: null,
-      selectedElementIds: new Set(),
-      elements: [0, 1, 2].map((track) => ({
-        id: `c${track}`,
-        key: `c${track}`,
-        domId: `c${track}`,
-        tag: "div",
-        start: 0,
-        duration: 2,
-        track,
-      })),
-    });
-    const host = document.createElement("div");
-    document.body.append(host);
-    const root = createRoot(host);
-    await act(async () => root.render(<Timeline trackPadding={hostPads} {...props} />));
-    const viewport = host.querySelector<HTMLElement>("[data-timeline-scroll-viewport]")!;
-    return { host, root, viewport };
+    return mountThreeTrackTimeline({ trackPadding: hostPads, ...props });
   }
 
   const top = (el: Element | null | undefined) => (el as HTMLElement | null)?.style.top;
@@ -94,22 +76,8 @@ describe("Timeline trackPadding", () => {
       `${RULER_H + TRACK_H + CLIP_Y}px`,
     );
 
-    const drag = (type: string, clientY: number) => {
-      const event = new Event(type, { bubbles: true, cancelable: true });
-      Object.defineProperties(event, {
-        clientX: { value: 400 },
-        clientY: { value: clientY },
-        dataTransfer: {
-          value: {
-            types: [TIMELINE_ASSET_MIME],
-            files: [],
-            dropEffect: "none",
-            getData: (mime: string) => (mime === TIMELINE_ASSET_MIME ? '{"path":"a.png"}' : ""),
-          },
-        },
-      });
-      act(() => void viewport.dispatchEvent(event));
-    };
+    const drag = (type: string, clientY: number) =>
+      dragTimelineFixtureAsset(viewport, type, clientY);
     drag("dragover", ROW1_MID);
     expect(top(host.querySelector('[data-testid="timeline-drop-preview"]'))).toBe(
       `${RULER_H + TRACK_H + CLIP_Y}px`,
@@ -128,19 +96,6 @@ describe("Timeline trackPadding", () => {
       onMoveElement: vi.fn(),
       onResizeElement: vi.fn(),
     });
-    const pointer = (target: EventTarget, type: string, clientY: number) =>
-      act(
-        () =>
-          void target.dispatchEvent(
-            new PointerEvent(type, {
-              bubbles: true,
-              button: 0,
-              pointerId: 1,
-              clientX: 400,
-              clientY,
-            }),
-          ),
-      );
     const clip = host.querySelector('[data-clip][data-el-id="c0"]')!;
     pointer(clip, "pointerdown", RULER_H + TRACK_H / 2);
     pointer(window, "pointermove", ROW1_MID);
@@ -149,9 +104,9 @@ describe("Timeline trackPadding", () => {
     ).find((el) => el.style.zIndex === "30" && !el.dataset.testid);
     expect(top(ghost)).toBe(`${RULER_H + TRACK_H + CLIP_Y}px`);
     pointer(window, "pointermove", RULER_H + 3 * TRACK_H + TRACK_H / 2);
-    expect(top(host.querySelector('[data-testid="timeline-insert-line"]'))).toBe(
-      `${RULER_H + 3 * TRACK_H - 0.5}px`,
-    );
+    const lane = host.querySelector<HTMLElement>("[data-timeline-new-track-lane]");
+    expect(top(lane)).toBe(`${RULER_H + 3 * TRACK_H}px`);
+    expect(lane?.style.height).toBe(`${TRACK_H}px`);
     act(() => root.unmount());
   });
 });

package/src/player/components/TimelineCanvas.tsx

@@ -16,7 +16,9 @@ export const TimelineCanvas = memo(function TimelineCanvas() {
   const props = state.canvas;
   const { draggedClip, scrollRef, displayTrackOrder } = props;
   const draggedRowIndex =
-    draggedClip?.started === true ? displayTrackOrder.indexOf(draggedClip.previewTrack) : -1;
+    draggedClip?.started === true
+      ? (draggedClip.insertRow ?? displayTrackOrder.indexOf(draggedClip.previewTrack))
+      : -1;
   const dropTrackIndex = props.dropPreview
     ? displayTrackOrder.indexOf(props.dropPreview.track)
     : -1;
@@ -168,7 +170,7 @@ export const TimelineCanvas = memo(function TimelineCanvas() {
 
       {/* Insertion line — a new track will be inserted at this boundary on drop.
           Shown while the pointer is near a lane boundary (insert mode). */}
-      {insertLineRow != null && (
+      {insertLineRow != null && !draggedClip?.started && (
         <div
           data-testid="timeline-insert-line"
           className="absolute pointer-events-none"
@@ -211,6 +213,8 @@ export const TimelineCanvas = memo(function TimelineCanvas() {
         scrollRef={scrollRef}
         pixelsPerSecond={props.pps}
         rowHeight={draggedClipHeight}
+        rowGeometry={props.rowGeometry}
+        contentOrigin={props.contentOrigin}
         selectedElementId={props.selectedElementId}
         currentTime={props.currentTime}
         theme={props.theme}