From c152e898a7820ddcb9cb19f1eff3a59af91af662 Mon Sep 17 00:00:00 2001
From: Miguel Angel Simon Sierra <miguel.sierra@heygen.com>
Date: Tue, 18 Aug 2026 23:14:39 -0400
Subject: [PATCH] feat(studio): show both sides of the cut while trimming
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The trim tools move an edit point, but the preview only ever shows one
frame, so the frame you are cutting away and the frame you are cutting to
were never on screen together. A two-up panel above the timeline now holds
both, live, while the gesture runs.

Each pane is its own preview iframe of the current composition seeked to its
own time — the pattern the composition cards already use — so the frames
track the drag with no server round-trip. The gesture publishes the pair of
times it is editing; the panes read them. A finished trim leaves its cut on
screen instead of snapping back, since that is the frame you just made.

Slip has no edit point, so it shows the clip's own first and last frame,
which is what its drag actually changes.

Two extra composition renders is a real cost, so the panel only exists while
a trim tool is active and a toolbar toggle (persisted) turns it off — both
panes and their iframes are torn down when it does.
---
 .../studio/src/components/TimelineToolbar.tsx |  25 ++-
 .../src/components/nle/PrecisionTrimView.tsx  | 174 ++++++++++++++++++
 .../src/components/nle/TimelinePane.tsx       |   2 +
 .../timelineClipDragGestureLifecycle.ts       |   3 +-
 .../player/components/timelineTrimOps.test.ts |  41 +++++
 .../src/player/components/timelineTrimOps.ts  |  32 ++++
 .../player/components/timelineTrimSession.ts  |   9 +
 .../player/components/useTimelineClipDrag.ts  |   7 +-
 .../studio/src/player/store/playerStore.ts    |   5 +-
 .../src/player/store/trimPreviewSlice.ts      |  48 +++++
 .../studio/src/utils/studioUiPreferences.ts   |   2 +
 11 files changed, 343 insertions(+), 5 deletions(-)
 create mode 100644 packages/studio/src/components/nle/PrecisionTrimView.tsx
 create mode 100644 packages/studio/src/player/store/trimPreviewSlice.ts

diff --git a/packages/studio/src/components/TimelineToolbar.tsx b/packages/studio/src/components/TimelineToolbar.tsx
index 4793cea64c..fe4370b292 100644
--- a/packages/studio/src/components/TimelineToolbar.tsx
+++ b/packages/studio/src/components/TimelineToolbar.tsx
@@ -16,9 +16,9 @@ import {
 import { useTimelineZoom } from "../player/components/useTimelineZoom";
 import { usePlayerStore, type TimelineElement } from "../player";
 import { Tooltip } from "./ui";
-import { Scissors } from "../icons/SystemIcons";
+import { Compare, Scissors } from "../icons/SystemIcons";
 import { TRIM_TOOL_ICONS } from "../icons/TrimToolIcons";
-import { TIMELINE_TRIM_TOOLS } from "../player/components/timelineTrimTools";
+import { activeTrimMode, TIMELINE_TRIM_TOOLS } from "../player/components/timelineTrimTools";
 import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
 import type { DomEditSelection } from "./editor/domEditingTypes";
 import { canSplitElement } from "../utils/timelineElementSplit";
@@ -127,6 +127,8 @@ export function TimelineToolbar({ domEditSession, onSplitElement }: TimelineTool
   const activeTool = usePlayerStore((s) => s.activeTool);
   const setActiveTool = usePlayerStore((s) => s.setActiveTool);
   const timelineSnapEnabled = usePlayerStore((s) => s.timelineSnapEnabled);
+  const precisionTrimViewEnabled = usePlayerStore((s) => s.precisionTrimViewEnabled);
+  const setPrecisionTrimViewEnabled = usePlayerStore((s) => s.setPrecisionTrimViewEnabled);
   const setTimelineSnapEnabled = usePlayerStore((s) => s.setTimelineSnapEnabled);
   const autoKeyframeEnabled = usePlayerStore((s) => s.autoKeyframeEnabled);
   const setAutoKeyframeEnabled = usePlayerStore((s) => s.setAutoKeyframeEnabled);
@@ -236,6 +238,25 @@ export function TimelineToolbar({ domEditSession, onSplitElement }: TimelineTool
               </Tooltip>
             );
           })}
+          {activeTrimMode(activeTool) && (
+            <Tooltip
+              label={
+                precisionTrimViewEnabled
+                  ? "Precision view on — both sides of the cut, live"
+                  : "Precision view off"
+              }
+            >
+              <button
+                type="button"
+                onClick={() => setPrecisionTrimViewEnabled(!precisionTrimViewEnabled)}
+                aria-label="Toggle precision trim view"
+                aria-pressed={precisionTrimViewEnabled}
+                className={precisionTrimViewEnabled ? flatActive : flatIdle}
+              >
+                <Compare size={16} aria-hidden="true" />
+              </button>
+            </Tooltip>
+          )}
           {/* Divider: tool-mode | editing-actions */}
           <div aria-hidden="true" className="mx-1 h-4 w-px bg-neutral-800" />
           <Tooltip label={timelineSnapEnabled ? "Snapping on (N)" : "Snapping off (N)"}>
diff --git a/packages/studio/src/components/nle/PrecisionTrimView.tsx b/packages/studio/src/components/nle/PrecisionTrimView.tsx
new file mode 100644
index 0000000000..43bbf0d1b9
--- /dev/null
+++ b/packages/studio/src/components/nle/PrecisionTrimView.tsx
@@ -0,0 +1,174 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { usePlayerStore } from "../../player";
+import { activeTrimMode } from "../../player/components/timelineTrimTools";
+import type { TimelineTrimPreview } from "../../player/store/trimPreviewSlice";
+
+/**
+ * The two-up precision view: the frame on each side of the edit point being
+ * trimmed, live, while the gesture runs.
+ *
+ * Each pane is its own preview iframe of the current composition, seeked to its
+ * own time — the same live-preview-in-an-iframe pattern the composition cards
+ * use. Two players is why the panel mounts as soon as a trim tool is picked
+ * rather than when the drag starts: a composition takes a moment to load, and a
+ * pane that arrives after the gesture is over is worth nothing. While idle the
+ * panes straddle the playhead, so they always show something true.
+ */
+
+interface PrecisionTrimViewProps {
+  /** Preview URL of the composition the timeline is currently editing. */
+  previewUrl: string | null;
+}
+
+const PANE_LABELS: Record<TimelineTrimPreview["mode"], [string, string]> = {
+  ripple: ["Outgoing", "Incoming"],
+  roll: ["Outgoing", "Incoming"],
+  slide: ["Outgoing", "Incoming"],
+  // Slip moves no edit point: what changes is which part of the source plays.
+  slip: ["Clip in", "Clip out"],
+};
+
+interface PreviewWindow extends Window {
+  __player?: { seek?: (time: number) => void; pause?: () => void };
+}
+
+const DEFAULT_STAGE = { width: 1920, height: 1080 };
+
+/** One pane: a paused preview of the composition held at a single frame. */
+function PrecisionPane({
+  previewUrl,
+  time,
+  label,
+  align,
+}: {
+  previewUrl: string;
+  time: number;
+  label: string;
+  align: "left" | "right";
+}) {
+  const iframeRef = useRef<HTMLIFrameElement | null>(null);
+  const paneRef = useRef<HTMLDivElement | null>(null);
+  const readyRef = useRef(false);
+  const [stage, setStage] = useState(DEFAULT_STAGE);
+  const [paneSize, setPaneSize] = useState({ width: 0, height: 0 });
+
+  const hold = useCallback((at: number) => {
+    try {
+      const player = (iframeRef.current?.contentWindow as PreviewWindow | null)?.__player;
+      player?.pause?.();
+      player?.seek?.(at);
+    } catch {
+      /* the preview is still loading, or gone */
+    }
+  }, []);
+
+  // Seek imperatively: the gesture republishes a new time on every pointer
+  // move, and re-rendering an iframe would reload the composition each frame.
+  useEffect(() => {
+    if (readyRef.current) hold(time);
+  }, [time, hold]);
+
+  useEffect(() => {
+    const pane = paneRef.current;
+    if (!pane) return;
+    const observer = new ResizeObserver(([entry]) => {
+      const { width, height } = entry.contentRect;
+      setPaneSize({ width, height });
+    });
+    observer.observe(pane);
+    return () => observer.disconnect();
+  }, []);
+
+  // The composition renders at its authored size; letterbox it into the pane
+  // rather than showing the top-left corner of a 1920×1080 frame.
+  const scale =
+    paneSize.width > 0 ? Math.min(paneSize.width / stage.width, paneSize.height / stage.height) : 0;
+
+  return (
+    <div
+      ref={paneRef}
+      className="relative flex-1 min-w-0 overflow-hidden rounded-md border border-neutral-800/70 bg-black"
+    >
+      <iframe
+        ref={iframeRef}
+        src={previewUrl}
+        sandbox="allow-scripts allow-same-origin"
+        title={`${label} frame`}
+        tabIndex={-1}
+        className="pointer-events-none absolute border-none"
+        style={{
+          width: stage.width,
+          height: stage.height,
+          transformOrigin: "0 0",
+          left: (paneSize.width - stage.width * scale) / 2,
+          top: (paneSize.height - stage.height * scale) / 2,
+          transform: `scale(${scale})`,
+          opacity: scale > 0 ? 1 : 0,
+        }}
+        onLoad={() => {
+          readyRef.current = true;
+          try {
+            const root = iframeRef.current?.contentDocument?.querySelector("[data-composition-id]");
+            setStage({
+              width: Number(root?.getAttribute("data-width")) || DEFAULT_STAGE.width,
+              height: Number(root?.getAttribute("data-height")) || DEFAULT_STAGE.height,
+            });
+          } catch {
+            setStage(DEFAULT_STAGE);
+          }
+          hold(time);
+        }}
+      />
+      <div
+        className={`absolute bottom-1 ${align === "left" ? "left-1" : "right-1"} rounded bg-black/70 px-1.5 py-0.5 font-mono text-[10px] leading-none tabular-nums text-neutral-300`}
+      >
+        {label} · {time.toFixed(2)}s
+      </div>
+    </div>
+  );
+}
+
+export function PrecisionTrimView({ previewUrl }: PrecisionTrimViewProps) {
+  const activeTool = usePlayerStore((s) => s.activeTool);
+  const enabled = usePlayerStore((s) => s.precisionTrimViewEnabled);
+  const trimPreview = usePlayerStore((s) => s.trimPreview);
+  const currentTime = usePlayerStore((s) => s.currentTime);
+  const setTrimPreview = usePlayerStore((s) => s.setTrimPreview);
+  const mode = activeTrimMode(activeTool);
+  const shown = Boolean(mode && enabled && previewUrl);
+
+  // A finished gesture leaves its cut on screen — you have just trimmed it and
+  // that is what you want to look at. It only goes stale once the panel closes
+  // (the tool changed, or the view was switched off), so that is where it is
+  // dropped. Guarded so the common closed case is not a null-to-null write.
+  useEffect(() => {
+    if (!shown && usePlayerStore.getState().trimPreview) setTrimPreview(null);
+  }, [shown, setTrimPreview]);
+
+  if (!shown || !previewUrl || !mode) return null;
+
+  const [outLabel, inLabel] = PANE_LABELS[trimPreview?.mode ?? mode];
+  const outTime = trimPreview?.outTime ?? Math.max(0, currentTime - 1 / 30);
+  const inTime = trimPreview?.inTime ?? currentTime;
+  const delta = trimPreview?.delta ?? 0;
+
+  return (
+    <div
+      data-precision-trim-view
+      className="flex flex-shrink-0 items-stretch gap-1.5 border-b border-neutral-800/60 bg-neutral-950 px-2 pb-1.5"
+      style={{ height: 132 }}
+    >
+      <PrecisionPane previewUrl={previewUrl} time={outTime} label={outLabel} align="left" />
+      <div className="flex w-20 flex-col items-center justify-center gap-0.5 text-center">
+        <span className="text-[10px] uppercase tracking-wide text-neutral-500">{mode}</span>
+        <span
+          className={`font-mono text-xs tabular-nums ${delta === 0 ? "text-neutral-500" : "text-studio-accent"}`}
+        >
+          {delta > 0 ? "+" : ""}
+          {delta.toFixed(2)}s
+        </span>
+      </div>
+      <PrecisionPane previewUrl={previewUrl} time={inTime} label={inLabel} align="right" />
+    </div>
+  );
+}
diff --git a/packages/studio/src/components/nle/TimelinePane.tsx b/packages/studio/src/components/nle/TimelinePane.tsx
index ca40802056..3b7183b608 100644
--- a/packages/studio/src/components/nle/TimelinePane.tsx
+++ b/packages/studio/src/components/nle/TimelinePane.tsx
@@ -3,6 +3,7 @@ import { Timeline } from "../../player";
 import type { TimelineElement } from "../../player";
 import type { BlockedTimelineEditIntent } from "../../player/components/timelineEditing";
 import { TimelineResizeDivider } from "./TimelineResizeDivider";
+import { PrecisionTrimView } from "./PrecisionTrimView";
 import { useTimelineEditContext } from "../../contexts/TimelineEditContext";
 import { trackStudioExpandedClipEdit } from "../../telemetry/events";
 import { useNLEContext } from "./NLEContext";
@@ -271,6 +272,7 @@ export function TimelinePane({
           }}
         >
           <div className="flex-shrink-0">{timelineToolbar}</div>
+          <PrecisionTrimView previewUrl={compositionStack.at(-1)?.previewUrl ?? null} />
           <Timeline
             sessionEpoch={timelineSessionEpoch}
             onSeek={seek}
diff --git a/packages/studio/src/player/components/timelineClipDragGestureLifecycle.ts b/packages/studio/src/player/components/timelineClipDragGestureLifecycle.ts
index 674b1f360a..58561dddec 100644
--- a/packages/studio/src/player/components/timelineClipDragGestureLifecycle.ts
+++ b/packages/studio/src/player/components/timelineClipDragGestureLifecycle.ts
@@ -14,7 +14,8 @@ import {
 } from "./timelineOptimisticRevision";
 import type { TimelineEditCallbacks } from "./timelineCallbacks";
 import type { StackingPatch } from "./timelineStackingSync";
-import type { TimelineElement, usePlayerStore } from "../store/playerStore";
+import { usePlayerStore } from "../store/playerStore";
+import type { TimelineElement } from "../store/playerStore";
 
 export type TimelineGestureKind = "drag" | "resize";
 type TimelineGesturePhase = "active" | "committing" | "cancelled" | "complete";
diff --git a/packages/studio/src/player/components/timelineTrimOps.test.ts b/packages/studio/src/player/components/timelineTrimOps.test.ts
index 7219032a77..57c21930ea 100644
--- a/packages/studio/src/player/components/timelineTrimOps.test.ts
+++ b/packages/studio/src/player/components/timelineTrimOps.test.ts
@@ -5,6 +5,7 @@ import {
   resolveTrimDeltaBounds,
   resolveTrimPlan,
   trimPlanKeys,
+  trimPreviewFrames,
   trimSnapAnchor,
   type TrimClip,
   type TrimPlan,
@@ -214,6 +215,46 @@ describe("gesture plumbing helpers", () => {
     expect(trimSnapAnchor(planOf("b", "slip"))).toBeNull();
   });
 
+  it("frames the precision view on the edit point the gesture is moving", () => {
+    const frame = 1 / 30;
+    // Out-point ripple: the cut lands at the clip's new end.
+    expect(trimPreviewFrames(planOf("b", "ripple", "end"), 1, frame)).toEqual({
+      outTime: 7 - frame,
+      inTime: 7,
+    });
+    // Head ripple pins the start, so the edit point does not move with the drag.
+    expect(trimPreviewFrames(planOf("b", "ripple", "start"), 1, frame)).toEqual({
+      outTime: 4 - frame,
+      inTime: 4,
+    });
+    // Roll: the shared cut, moved.
+    expect(trimPreviewFrames(planOf("a", "roll", "end"), 1, frame)).toEqual({
+      outTime: 5 - frame,
+      inTime: 5,
+    });
+    // Slide: the clip's new start.
+    expect(trimPreviewFrames(planOf("b", "slide"), 1, frame)).toEqual({
+      outTime: 5 - frame,
+      inTime: 5,
+    });
+  });
+
+  it("frames a slip on the clip's own first and last frame — it has no edit point", () => {
+    const frame = 1 / 30;
+    expect(trimPreviewFrames(planOf("b", "slip"), 1, frame)).toEqual({
+      outTime: 4,
+      inTime: 6 - frame,
+    });
+  });
+
+  it("never asks the preview for a negative time", () => {
+    const lane: TrimClip[] = [{ key: "head", start: 0, duration: 4 }];
+    expect(trimPreviewFrames(planOf("head", "ripple", "start", lane), 0, 1 / 30)).toEqual({
+      outTime: 0,
+      inTime: 0,
+    });
+  });
+
   it("lists every clip a plan may rewrite so the snap pass can ignore them", () => {
     expect([...trimPlanKeys(planOf("b", "ripple", "end"))].sort()).toEqual(["b", "c"]);
     expect([...trimPlanKeys(planOf("b", "slide"))].sort()).toEqual(["a", "b", "c"]);
diff --git a/packages/studio/src/player/components/timelineTrimOps.ts b/packages/studio/src/player/components/timelineTrimOps.ts
index 7282c6baf2..383d85122b 100644
--- a/packages/studio/src/player/components/timelineTrimOps.ts
+++ b/packages/studio/src/player/components/timelineTrimOps.ts
@@ -334,6 +334,38 @@ export function trimSnapAnchor(plan: TrimPlan): { time: number; sign: 1 | -1 } |
   }
 }
 
+/**
+ * The pair of composition times the precision view shows for this gesture:
+ * the frame on either side of the edit point being moved. Slip has no edit
+ * point — it moves the media inside one clip — so it reports that clip's own
+ * first and last frame instead, which is what actually changes.
+ */
+export function trimPreviewFrames(
+  plan: TrimPlan,
+  delta: number,
+  frame: number,
+): { outTime: number; inTime: number } {
+  const cutAt = (boundary: number) => ({
+    outTime: Math.max(0, boundary - frame),
+    inTime: Math.max(0, boundary),
+  });
+  switch (plan.mode) {
+    case "ripple":
+      // A head ripple pins the clip's start, so the edit point never moves —
+      // what changes is the material that starts there.
+      return cutAt(plan.edge === "end" ? endOf(plan.grabbed) + delta : plan.grabbed.start);
+    case "roll":
+      return cutAt(endOf(plan.left) + delta);
+    case "slide":
+      return cutAt(plan.grabbed.start + delta);
+    case "slip":
+      return {
+        outTime: Math.max(0, plan.grabbed.start),
+        inTime: Math.max(0, endOf(plan.grabbed) - frame),
+      };
+  }
+}
+
 /** Every clip key a plan may rewrite — the set the snap pass must ignore. */
 export function trimPlanKeys(plan: TrimPlan): Set<string> {
   switch (plan.mode) {
diff --git a/packages/studio/src/player/components/timelineTrimSession.ts b/packages/studio/src/player/components/timelineTrimSession.ts
index be9211857f..a92cc66f22 100644
--- a/packages/studio/src/player/components/timelineTrimSession.ts
+++ b/packages/studio/src/player/components/timelineTrimSession.ts
@@ -14,11 +14,14 @@ import {
   type TimelineSnapTarget,
 } from "./timelineSnapping";
 import { isMusicTrack } from "../../utils/timelineInspector";
+import { frameToSeconds } from "../lib/time";
+import type { TimelineTrimPreview } from "../store/trimPreviewSlice";
 import {
   applyTrimDelta,
   clampTrimDelta,
   resolveTrimPlan,
   trimPlanKeys,
+  trimPreviewFrames,
   trimSnapAnchor,
   type TimelineTrimEdge,
   type TimelineTrimMode,
@@ -266,6 +269,7 @@ export function applyTimelineTrimPreview(
   session: TimelineTrimSession,
   rawDeltaSeconds: number,
   pps: number,
+  publishPreview?: (preview: TimelineTrimPreview) => void,
 ): TimelineGroupResizeChange | undefined {
   const { plan, laneFloor } = session.trim;
   const delta = clampTrimDelta(
@@ -274,6 +278,11 @@ export function applyTimelineTrimPreview(
     resolveTimelineMinDuration(),
     laneFloor,
   );
+  publishPreview?.({
+    mode: session.trim.mode,
+    delta,
+    ...trimPreviewFrames(plan, delta, frameToSeconds(1)),
+  });
   const byKey = new Map(session.members.map((member) => [member.key, member]));
   session.changes = applyTrimDelta(plan, delta).flatMap((change) => {
     const member = byKey.get(change.key);
diff --git a/packages/studio/src/player/components/useTimelineClipDrag.ts b/packages/studio/src/player/components/useTimelineClipDrag.ts
index ce7cf2424e..e901e8c28f 100644
--- a/packages/studio/src/player/components/useTimelineClipDrag.ts
+++ b/packages/studio/src/player/components/useTimelineClipDrag.ts
@@ -321,7 +321,12 @@ export function useTimelineClipDrag({
       // A refused gesture (pointerdown already reported why) holds the clip at
       // its authored timing rather than falling back to a plain trim.
       const grabbed = session
-        ? applyTimelineTrimPreview(session, (effectiveClientX - resize.originClientX) / pps, pps)
+        ? applyTimelineTrimPreview(
+            session,
+            (effectiveClientX - resize.originClientX) / pps,
+            pps,
+            usePlayerStore.getState().setTrimPreview,
+          )
         : undefined;
       setResizeState({
         originScrollLeft,
diff --git a/packages/studio/src/player/store/playerStore.ts b/packages/studio/src/player/store/playerStore.ts
index beb87d608c..6bf39e57ac 100644
--- a/packages/studio/src/player/store/playerStore.ts
+++ b/packages/studio/src/player/store/playerStore.ts
@@ -16,6 +16,7 @@ import {
 } from "./automationSelectionSlice";
 import { createTimelineFocusRequest, type TimelineFocusRequest } from "./timelineFocusState";
 import { createThumbnailSlice, type ThumbnailSlice } from "./thumbnailSlice";
+import { createTrimPreviewSlice, type TrimPreviewSlice } from "./trimPreviewSlice";
 
 export type { KeyframeCacheEntry } from "./keyframeSlice";
 export { liveTime } from "./liveTime";
@@ -47,7 +48,8 @@ function resolveElementSelection(
   };
 }
 
-interface PlayerState extends KeyframeSlice, AutomationSelectionSlice, ThumbnailSlice {
+interface PlayerState
+  extends KeyframeSlice, AutomationSelectionSlice, ThumbnailSlice, TrimPreviewSlice {
   isPlaying: boolean;
   currentTime: number;
   duration: number;
@@ -318,6 +320,7 @@ export const usePlayerStore = create<PlayerState>((set, get) => ({
     timelineSessionEpoch: get().timelineSessionEpoch,
   })),
   ...createThumbnailSlice(set),
+  ...createTrimPreviewSlice(set),
 
   ...createAutomationSelectionSlice(set),
 
diff --git a/packages/studio/src/player/store/trimPreviewSlice.ts b/packages/studio/src/player/store/trimPreviewSlice.ts
new file mode 100644
index 0000000000..5f84f09191
--- /dev/null
+++ b/packages/studio/src/player/store/trimPreviewSlice.ts
@@ -0,0 +1,48 @@
+import type { StoreApi } from "zustand";
+import { readStudioUiPreferences, writeStudioUiPreferences } from "../../utils/studioUiPreferences";
+import type { TimelineTrimMode } from "../components/timelineTrimOps";
+
+/**
+ * What the precision (two-up) view is currently showing.
+ *
+ * The trim gesture lives deep inside the timeline's drag hook while the view
+ * renders above the timeline, so the two meet here rather than through props:
+ * the gesture publishes the pair of composition times it is editing, the view
+ * seeks its two players to them. Null while no trim gesture is running — the
+ * view then falls back to the playhead.
+ */
+export interface TimelineTrimPreview {
+  mode: TimelineTrimMode;
+  /** Composition time for the LEFT (outgoing) pane. */
+  outTime: number;
+  /** Composition time for the RIGHT (incoming) pane. */
+  inTime: number;
+  /** Seconds the gesture has applied so far, for the readout. */
+  delta: number;
+}
+
+export interface TrimPreviewSlice {
+  trimPreview: TimelineTrimPreview | null;
+  setTrimPreview: (preview: TimelineTrimPreview | null) => void;
+  /**
+   * Whether the precision view is wanted at all. It costs two extra
+   * composition renders while a trim tool is active, so it is a preference the
+   * user keeps rather than something forced on every project.
+   */
+  precisionTrimViewEnabled: boolean;
+  setPrecisionTrimViewEnabled: (enabled: boolean) => void;
+}
+
+export function createTrimPreviewSlice(
+  set: StoreApi<TrimPreviewSlice>["setState"],
+): TrimPreviewSlice {
+  return {
+    trimPreview: null,
+    setTrimPreview: (trimPreview) => set({ trimPreview }),
+    precisionTrimViewEnabled: readStudioUiPreferences().precisionTrimViewEnabled ?? true,
+    setPrecisionTrimViewEnabled: (precisionTrimViewEnabled) => {
+      writeStudioUiPreferences({ precisionTrimViewEnabled });
+      set({ precisionTrimViewEnabled });
+    },
+  };
+}
diff --git a/packages/studio/src/utils/studioUiPreferences.ts b/packages/studio/src/utils/studioUiPreferences.ts
index 801a584858..5039f30c9a 100644
--- a/packages/studio/src/utils/studioUiPreferences.ts
+++ b/packages/studio/src/utils/studioUiPreferences.ts
@@ -24,6 +24,8 @@ export interface StudioUiPreferences {
   snapToGrid?: boolean;
   /** Timeline magnet: snap clip drags/trims/drops to playhead, clip edges, and beats. */
   timelineSnapEnabled?: boolean;
+  /** Two-up precision view above the timeline while a trim tool is active. */
+  precisionTrimViewEnabled?: boolean;
   /** Transport + ruler readout mode: timecode or frame number. */
   timeDisplayMode?: TimelineTimeDisplayMode;
   /**