@dailies-studio/shot-editor 0.1.0 → 0.2.0

package/src/panels/inspector/scene/TransitionSection.tsx

@@ -1,45 +1,198 @@
-// How this shot hands over to the next one.
+// How a shot hands over to the next one.
 //
-// A transition is stored on the OUTGOING shot — the one selected here — and
-// plays over the opening frames of the one after it. That is why the section is
-// titled "Into next shot" and why the last shot's controls are inert: there is
-// nothing after it to blend into. It stays EDITABLE there rather than hidden,
+// A transition is stored on the OUTGOING shot and plays over the opening
+// frames of the one after it. The last shot's controls are inert: there is
+// nothing after it to blend into. They stay EDITABLE rather than hidden,
 // because reordering can make any shot last and then not last again, and a
 // setting that vanishes when you drag a bar looks like data loss.
 //
-// The preset list comes from the ROOT of @dailies-studio/transitions, never from
-// its ./gl entry: that entry's first import is `three/tsl`, and the chrome
-// bundle must not carry a shader graph layer to draw a dropdown. The root's
-// `glPresetSpecs` is the same data gl.ts builds against, asserted in lockstep
-// at import.
+// ── TWO DOORS, ONE SET OF ROWS ───────────────────────────────────────────
+//
+// Studio's project context mounts `ShotTransitionSection`: the selected shot's
+// own rows, then these. The board mounts `StoryboardCutSection` when a cut is
+// its subject. Both render `TransitionRows` with an EXPLICIT shot id. The rows
+// used to read `state.sceneId`, which every seek re-pins, so a scrub across
+// the seam would have switched them to the incoming shot halfway through.
+//
+// ── PRESETS AS FOUR BUTTONS, THE REST BEHIND "Browse all" ────────────────
+//
+// Cut, Fade, Directional Wipe and Circle Open are plain buttons with
+// `aria-pressed`, NOT a `SegmentedControl`. A radio group commits on an arrow
+// key, and an arrow step over Cut deletes the record: the next step rebuilds
+// it at the default length with its ease, params and Outgoing gone. A stored
+// kind outside the four takes the fourth slot, so the lit button always names
+// what is stored. The full registry stays one press away in the Combobox.
+//
+// The preset list comes from the ROOT of @dailies-studio/transitions, never
+// from its ./gl entry: that entry's first import is `three/tsl`, and the
+// chrome bundle must not carry a shader graph layer to draw a dropdown. The
+// root's `glPresetSpecs` is the same data gl.ts builds against, asserted in
+// lockstep at import.
+import { Fragment, useId, useState } from "react";
 import {
+  Combobox,
+  FieldBox,
+  FieldLabels,
   InspectorRow,
   InspectorSection,
   NumberField,
+  SegmentedControl,
+  useLocked,
 } from "@dailies-studio/ui";
+import type { ComboboxOption, ScrubHandlers } from "@dailies-studio/ui";
 import { glPresetSpecs, resolveGlPresetSpec } from "@dailies-studio/transitions";
-import { MIN_TRANSITION_FRAMES } from "@dailies-studio/shot/doc";
-import type { Value } from "@dailies-studio/engine";
+import { DEFAULT_TRANSITION_FRAMES, MIN_TRANSITION_FRAMES, partOfScene, seamWindow, sceneStart } from "@dailies-studio/shot/doc";
+import type { Doc3D, SceneTransition } from "@dailies-studio/shot/doc";
+import { EASE_PRESETS } from "@dailies-studio/timeline";
+import { framesToSeconds } from "@dailies-studio/engine";
+import type { Ease, Value } from "@dailies-studio/engine";
 import { useShotEditor, useStore } from "../../../state/context.js";
+import { boardSubjectOf } from "../../../state/storyboardModel.js";
+import { SECTION_ICONS } from "../../../icons.js";
+import { formatDuration, timecode } from "../../timeline/model.js";
+import { ShotRows } from "./SceneSection.js";
 import { ParamRow } from "../ParamRow.js";
+import { EaseControl } from "../animate/EaseControl.js";
 
-/** "no transition", as a select value. Not a preset id, and cannot be one. */
+/** "no transition", as a picker value. Not a preset id, and cannot be one. */
 const CUT = "";
 
-/** What a transition looks like when first chosen: a third of a second at 30fps,
- *  which reads as a transition rather than as a glitch. */
-const DEFAULT_FRAMES = 10;
+/** The three presets with a button of their own, after Cut. */
+const TILE_KINDS = ["gl/fade", "gl/directional-wipe", "gl/circle-open"] as const;
+
+/** Each tile's picture of its blend, 28x14: A is the outgoing frame (the
+ *  outline), B the incoming one (the fill). A kind outside the four gets the
+ *  plain A-to-B glyph. */
+function TileGlyph({ kind }: { kind: string }) {
+  // Per mount: a fixed id repeats in every tile set on the page (the board and
+  // the inspector), and `url(#id)` then paints from whichever came first.
+  const fade = useId();
+  return (
+    <svg className="insp-tile-glyph" viewBox="0 0 28 14" aria-hidden="true">
+      {kind === CUT ? (
+        <>
+          <rect x="1" y="1" width="11" height="12" rx="1.5" />
+          <rect x="16" y="1" width="11" height="12" rx="1.5" className="is-b" />
+        </>
+      ) : kind === "gl/fade" ? (
+        <>
+          <defs>
+            <linearGradient id={fade}>
+              <stop offset="0" stopColor="currentColor" stopOpacity="0" />
+              <stop offset="1" stopColor="currentColor" stopOpacity="0.9" />
+            </linearGradient>
+          </defs>
+          <rect x="1" y="1" width="26" height="12" rx="1.5" fill={`url(#${fade})`} />
+        </>
+      ) : kind === "gl/directional-wipe" ? (
+        <>
+          <rect x="1" y="1" width="26" height="12" rx="1.5" />
+          <path d="M16 1 L27 1 L27 13 L10 13 Z" className="is-b" />
+        </>
+      ) : kind === "gl/circle-open" ? (
+        <>
+          <rect x="1" y="1" width="26" height="12" rx="1.5" />
+          <circle cx="14" cy="7" r="4" className="is-b" />
+        </>
+      ) : (
+        <>
+          <rect x="1" y="1" width="26" height="12" rx="1.5" />
+          <path d="M8 7 H20 M16 4 L20 7 L16 10" />
+        </>
+      )}
+    </svg>
+  );
+}
+
+/** What an absent ease PLAYS: the sampler resolves a stored transition with no
+ *  ease as linear. Every write below passes this rather than nothing, because
+ *  `setSceneTransition` fills an absent ease with ease-in-out, and a Length
+ *  edit must not quietly re-time a legacy linear blend. */
+const LINEAR: Ease = EASE_PRESETS.find((p) => p.id === "linear")!.ease;
 
-export function TransitionSection() {
+/** The eight directions the stepper walks, counter-clockwise in the presets'
+ *  y-up space from +x. Not normalised: the registry's default is [1, -1], and
+ *  a walk that cannot land on it again never gives the default back. */
+const DIRECTIONS: ReadonlyArray<readonly [number, number]> = [
+  [1, 0],
+  [1, 1],
+  [0, 1],
+  [-1, 1],
+  [-1, 0],
+  [-1, -1],
+  [0, -1],
+  [1, -1],
+];
+
+/** The next direction after `value`: the nearest of the eight by angle, then
+ *  one step on. A hand-typed vector steps from wherever it points. */
+export function nextDirection(value: Value | undefined): [number, number] {
+  const [x, y] = Array.isArray(value) && value.length >= 2 ? [Number(value[0]), Number(value[1])] : [1, -1];
+  const angle = Math.atan2(Number.isFinite(y) ? y : 0, Number.isFinite(x) ? x : 1);
+  const step = (((Math.round(angle / (Math.PI / 4)) % 8) + 8) % 8 + 1) % 8;
+  const [nx, ny] = DIRECTIONS[step]!;
+  return [nx, ny];
+}
+
+/** The closed head's line: the preset's label, "Cut" without one. A STRING
+ *  selector, so it re-renders on the label and never allocates. */
+function useTransitionSummary(): string | null {
+  return useShotEditor((s) => {
+    if (s.doc === null || s.sceneId === null) return null;
+    const scene = s.doc.scenesById[s.sceneId];
+    if (scene === undefined) return null;
+    const kind = scene.transition?.kind;
+    if (kind === undefined) return "Cut";
+    return resolveGlPresetSpec(kind)?.label ?? `${kind} (unknown)`;
+  });
+}
+
+export function ShotTransitionSection() {
+  const summary = useTransitionSummary();
+  const sceneId = useShotEditor((s) => s.sceneId);
+  if (summary === null || sceneId === null) return null;
+  return (
+    // A NEW collapse bit. Neither old one ("shot:scene", "shot:transition")
+    // describes this section, and inheriting either would open or close it on
+    // a choice the author made about something else. `ShotRows` look here
+    // exactly as they do in the Shot section, and the length's readout has its
+    // face, because both are the house's (widgets.css), with no section scope.
+    <InspectorSection
+      title="Shot & transition"
+      icon={SECTION_ICONS.shot}
+      summary={summary}
+      persistKey="shot:shot-transition"
+    >
+      <ShotRows />
+      <TransitionRows sceneId={sceneId} lengthLabel="Duration" heading />
+    </InspectorSection>
+  );
+}
+
+/** How shot `sceneId` hands over to the next one. `heading` draws the
+ *  "Transition · into Shot 02" line over the rows: Studio's section holds the
+ *  shot's rows too, while the board's section is the transition alone and its
+ *  head already names both shots.
+ *
+ *  `lengthLabel` is the word on the length's box. Studio says "Duration",
+ *  the word its section's other frame count (the shot's) already uses, for
+ *  the reason `ShotRows` gives; the board's Between has no other length
+ *  beside it and says "Length". */
+export function TransitionRows(props: { sceneId: string; lengthLabel: string; heading?: boolean }) {
+  const { sceneId, lengthLabel } = props;
   const store = useStore();
   const doc = useShotEditor((s) => s.doc);
-  const sceneId = useShotEditor((s) => s.sceneId);
-  if (doc === null || sceneId === null) return null;
+  const [browsing, setBrowsing] = useState(false);
+  // The preset buttons and the direction step are plain buttons, so they read
+  // a viewer's lock themselves; every widget below reads it on its own.
+  const locked = useLocked();
+  if (doc === null) return null;
   const scene = doc.scenesById[sceneId];
   if (scene === undefined) return null;
 
   const transition = scene.transition;
   const spec = transition === undefined ? undefined : resolveGlPresetSpec(transition.kind);
+  const ease = transition?.ease ?? LINEAR;
   const isLast = doc.scenes[doc.scenes.length - 1] === sceneId;
   const next = isLast ? null : (doc.scenesById[doc.scenes[doc.scenes.indexOf(sceneId) + 1]!] ?? null);
 
@@ -48,89 +201,387 @@ export function TransitionSection() {
       store.setSceneTransition(sceneId, null);
       return;
     }
+    if (kind === transition?.kind) return;
     // Params are PRESET-SCOPED, so switching preset starts from that preset's
-    // own defaults rather than carrying the previous one's names across — the
-    // same reasoning as setBlockPreset.
+    // own defaults rather than carrying the previous one's names across: the
+    // same reasoning as setBlockPreset. The ease is not passed either, so a new
+    // blend is minted with the house ease-in-out.
     store.setSceneTransition(sceneId, {
       kind,
-      durationFrames: transition?.durationFrames ?? DEFAULT_FRAMES,
+      durationFrames: transition?.durationFrames ?? DEFAULT_TRANSITION_FRAMES,
     });
   };
 
+  /** Every edit of a stored transition: the record with `patch` over it, and
+   *  the ease it plays, never absent. */
+  const write = (patch: Partial<SceneTransition>): void => {
+    if (transition === undefined) return;
+    store.setSceneTransition(sceneId, { ...transition, ease, ...patch });
+  };
+
   const setParam = (name: string, value: Value): void => {
     if (transition === undefined) return;
-    store.setSceneTransition(sceneId, {
-      ...transition,
-      params: { ...transition.params, [name]: value },
-    });
+    write({ params: { ...transition.params, [name]: value } });
   };
 
+  /** A DRAG on the length or a param: the panel scrub around a write, which
+   *  `setSceneTransition` captures into while it is open (store.ts), so one
+   *  drag is one undo entry and the stage blends under the pointer instead of
+   *  waiting for the release. */
+  const drag = (move: (raw: unknown) => void): ScrubHandlers => ({
+    start: () => store.beginScrub(),
+    move,
+    end: (commit) => store.endScrub(commit),
+  });
+  const lengthDrag = drag((raw) => write({ durationFrames: Math.round(Number(raw)) }));
+
+  const options: ComboboxOption[] = [
+    { value: CUT, label: "Cut" },
+    ...Object.values(glPresetSpecs).map((p) => ({ value: p.id, label: p.label })),
+    // A document may name a preset this build does not have. It renders as a
+    // cut, and the picker says so instead of silently showing "Cut" and
+    // rewriting it on the next edit.
+    ...(transition !== undefined && spec === undefined
+      ? [{ value: transition.kind, label: `${transition.kind} (unknown)` }]
+      : []),
+  ];
+  const labelOf = (kind: string): string =>
+    options.find((o) => o.value === kind)?.label ?? kind;
+  const stored = transition?.kind ?? CUT;
+  // The fourth slot shows a stored kind outside the first three.
+  const tiles = [CUT, TILE_KINDS[0], TILE_KINDS[1], (TILE_KINDS as readonly string[]).includes(stored) || stored === CUT ? TILE_KINDS[2] : stored];
+  const presetCount = Object.keys(glPresetSpecs).length;
+  const outgoing = transition?.outgoing ?? "hold";
+
   return (
-    <InspectorSection title="Into next shot" persistKey="shot:transition">
-      <InspectorRow label="Transition">
-        <select
-          className="select"
-          aria-label="Transition preset"
-          value={transition?.kind ?? CUT}
-          onChange={(e) => setKind(e.target.value)}
-        >
-          <option value={CUT}>Cut</option>
-          {Object.values(glPresetSpecs).map((p) => (
-            <option key={p.id} value={p.id}>
-              {p.label}
-            </option>
+    <>
+      {/* WHICH SEAM, in the heading. These are the only rows in the rail
+          about a JOIN, and naming the shot on the far side is what stops them
+          reading as a property of one shot alone. */}
+      {props.heading === true ? (
+        <h4 className="insp-transition-head">
+          Transition
+          {next === null ? null : (
+            <span className="insp-transition-into">
+              {" · into "}
+              <span data-testid="transition-into">{next.name}</span>
+            </span>
+          )}
+        </h4>
+      ) : null}
+      <InspectorRow>
+        <div className="insp-tiles" role="group" aria-label="Transition presets">
+          {tiles.map((kind) => (
+            <button
+              key={kind === CUT ? "cut" : kind}
+              type="button"
+              className="btn insp-tile"
+              aria-pressed={stored === kind}
+              disabled={locked}
+              onClick={() => setKind(kind)}
+            >
+              <TileGlyph kind={kind} />
+              <span>{labelOf(kind)}</span>
+            </button>
           ))}
-          {/* A document may name a preset this build does not have — it renders
-              as a cut, and the picker says so instead of silently showing
-              "Cut" and rewriting it on the next edit. */}
-          {transition !== undefined && spec === undefined ? (
-            <option value={transition.kind}>{transition.kind} (unknown)</option>
-          ) : null}
-        </select>
+        </div>
       </InspectorRow>
+      {/* A viewer's panel has no list to open (a locked Combobox will not), and
+          the pressed tile already names what is stored, so the door is not
+          drawn there at all. */}
+      {locked ? null : (
+        <InspectorRow>
+          {browsing ? (
+            <Combobox
+              ariaLabel="Transition preset"
+              options={options}
+              value={stored}
+              // The trigger shows the PLACEHOLDER for an empty value, so "Cut"
+              // is spelled twice: once as the option, once as the closed face.
+              placeholder="Cut"
+              autoOpen
+              onChange={(kind) => {
+                setBrowsing(false);
+                setKind(kind);
+              }}
+              onClose={() => setBrowsing(false)}
+            />
+          ) : (
+            <button type="button" className="link-button" onClick={() => setBrowsing(true)}>
+              Browse all {presetCount}
+            </button>
+          )}
+        </InspectorRow>
+      )}
+
+      {/* THE LENGTH, a standard field: its name inside, the frames, and the
+          seconds they last beside them in the same box. A cut has no length
+          and says so in the same place, in the house readout, rather than
+          leaving a hole where the field will be. */}
+      {transition === undefined ? (
+        <InspectorRow label={lengthLabel} className="insp-readout">
+          <span className="insp-dim" data-testid="transition-instant">
+            0 f · instant
+          </span>
+        </InspectorRow>
+      ) : (
+        <InspectorRow>
+          <FieldBox>
+            {/* The name starts with the word in the box, then says what the
+                number is, so a screen reader and a speech command use the
+                word the author reads, in both chromes. No ceiling: the stored
+                number is the author's, and the resolver clamps it to what the
+                next shot can hold (see the note below).
+
+                The word stays IN the box whatever the field-label preference:
+                it is a word already, and named mode would print the whole
+                accessible name ("Duration, transition frames") above it. */}
+            <FieldLabels value="compact">
+              <NumberField
+                value={transition.durationFrames}
+                label={lengthLabel}
+                ariaLabel={`${lengthLabel}, transition frames`}
+                unit="f"
+                min={MIN_TRANSITION_FRAMES}
+                step={1}
+                onScrubStart={lengthDrag.start}
+                onScrub={lengthDrag.move}
+                onScrubEnd={lengthDrag.end}
+                onCommit={(v) => write({ durationFrames: Math.round(v) })}
+              />
+            </FieldLabels>
+            <span className="insp-length-secs" data-testid="transition-seconds">
+              {formatDuration(framesToSeconds(transition.durationFrames, doc.fps))}
+            </span>
+          </FieldBox>
+        </InspectorRow>
+      )}
 
       {transition !== undefined ? (
         <>
-          <InspectorRow label="Frames">
-            <NumberField
-              value={transition.durationFrames}
-              ariaLabel="Transition frames"
-              min={MIN_TRANSITION_FRAMES}
-              step={1}
-              onCommit={(v) =>
-                store.setSceneTransition(sceneId, {
-                  ...transition,
-                  durationFrames: Math.max(MIN_TRANSITION_FRAMES, Math.round(v)),
-                })
-              }
+          {/* The timing curve over the blend, THE SAME `Ease` a camera move
+              carries, through the same `EaseControl`. An absent ease
+              shows as Linear because Linear is what it plays. The bezier pad's
+              handle drag goes through `onScrub` inside the pad's own scrub
+              bracket, so one drag is one undo entry. */}
+          <EaseControl
+            ease={ease}
+            ariaLabel="Transition ease"
+            onEase={(next) => write({ ease: next })}
+            onScrub={(next) => write({ ease: next })}
+          />
+          <InspectorRow label="Outgoing">
+            <SegmentedControl
+              ariaLabel="Outgoing"
+              options={[
+                { value: "hold", label: "Hold" },
+                { value: "run", label: "Run" },
+              ]}
+              value={outgoing}
+              onChange={(v) => write({ outgoing: v === "run" ? "run" : "hold" })}
             />
           </InspectorRow>
+          <p className="insp-note">
+            Hold freezes {scene.name} on its last frame. Run keeps it playing.
+          </p>
+          <p className="insp-note" data-testid="transition-held">
+            {outgoing === "hold"
+              ? `Held at ${timecode(scene.durationFrames, doc.fps)}`
+              : `${scene.name} keeps playing under the blend.`}
+          </p>
           {/* The stored number is the AUTHOR's, and the resolver clamps it to
-              whatever the next shot can hold — so trimming that shot short and
-              back again does not quietly rewrite what was typed. Said here
-              because the discrepancy is otherwise invisible. */}
+              whatever the next shot can hold, so trimming that shot short and
+              back again does not quietly rewrite what was typed. */}
           {next !== null && transition.durationFrames > next.durationFrames ? (
-            <p className="inspector-note">
-              Longer than {next.name} ({next.durationFrames}f) — it plays over
+            <p className="insp-note">
+              Longer than {next.name} ({next.durationFrames}f), so it plays over
               that whole shot.
             </p>
           ) : null}
           {isLast ? (
-            <p className="inspector-note">
+            <p className="insp-note">
               This is the last shot, so nothing plays. Kept for when one follows
               it.
             </p>
           ) : null}
-          {spec?.params.map((p) => (
-            <ParamRow
-              key={p.name}
-              spec={p}
-              value={transition.params?.[p.name] ?? p.default}
-              onCommit={(v) => setParam(p.name, v)}
-            />
-          ))}
+          {spec?.params.map((p) => {
+            const value = transition.params?.[p.name] ?? p.default;
+            return (
+              <Fragment key={p.name}>
+                <ParamRow
+                  spec={p}
+                  value={value}
+                  onCommit={(v) => setParam(p.name, v)}
+                  // ParamRow coerces a drag's value through the lane's one
+                  // param coercion before it gets here.
+                  scrub={drag((v) => setParam(p.name, v as Value))}
+                />
+                {p.kind === "vec2" && p.name === "direction" ? (
+                  <DirectionStepper value={value} onStep={(v) => setParam(p.name, v)} />
+                ) : null}
+              </Fragment>
+            );
+          })}
         </>
       ) : null}
+    </>
+  );
+}
+
+/** One press turns the direction an eighth of a circle. The arrow is drawn
+ *  in the presets' y-up space, so screen rotation is the negated angle.
+ *
+ *  Its name starts with the words it shows ("x 1, y -1, step direction"), the
+ *  house "visible words, then what" pattern: a name of its verb alone did not
+ *  contain the vector the author reads on it, so a speech command saying what
+ *  is on screen found no button. */
+function DirectionStepper(props: { value: Value; onStep(next: [number, number]): void }) {
+  const locked = useLocked();
+  const v = Array.isArray(props.value) ? props.value : [1, -1];
+  const x = Number(v[0] ?? 1);
+  const y = Number(v[1] ?? -1);
+  const degrees = (Math.atan2(y, x) * 180) / Math.PI;
+  const shown = `x ${x}, y ${y}`;
+  return (
+    <InspectorRow>
+      <div className="insp-buttons">
+        <button
+          type="button"
+          className="btn insp-direction"
+          aria-label={`${shown}, step direction`}
+          title="Turn the direction an eighth of a circle"
+          disabled={locked}
+          onClick={() => props.onStep(nextDirection(props.value))}
+        >
+          <span className="insp-direction-arrow" style={{ transform: `rotate(${-degrees}deg)` }} aria-hidden>
+            {"→"}
+          </span>
+          <span data-testid="direction-readout">{shown}</span>
+        </button>
+      </div>
+    </InspectorRow>
+  );
+}
+
+// ── THE BOARD'S CUT ──────────────────────────────────────────────────────────
+
+/**
+ * THE CUT ON THE BOARD: the seam's rows for the shot it is saved on, how it
+ * hands over, where the blend sits, and the way into Studio. The board does
+ * not play, so the seam is drawn, not looped: Studio plays it. Self-gates on
+ * the board's subject being a cut, like the other storyboard sections.
+ */
+export function StoryboardCutSection() {
+  const store = useStore();
+  const open = useShotEditor((s) => s.storyboardOpen);
+  const selection = useShotEditor((s) => s.storyboardSelection);
+  const doc = useShotEditor((s) => s.doc);
+  const subject = open ? boardSubjectOf(doc, selection) : null;
+  if (doc === null || subject === null || subject.kind !== "cut") return null;
+  const sceneId = subject.sceneId;
+  const scene = doc.scenesById[sceneId];
+  if (scene === undefined) return null;
+  const window = seamWindow(doc, sceneId);
+
+  const fineTune = (): void => {
+    store.setStoryboardOpen(false);
+    store.leaveScene();
+    store.setScene(sceneId);
+    // The frame the cut diamond parks on: the last one the blend starts from.
+    // Without the seek, the next one re-pins the shot to wherever the playhead was.
+    const start = sceneStart(doc, sceneId) ?? 0;
+    store.seek(Math.max(start, start + scene.durationFrames - 1));
+  };
+
+  return (
+    <InspectorSection title="Transition" persistKey="shot:storyboard-cut" collapsible={false}>
+      <TransitionRows sceneId={sceneId} lengthLabel="Length" />
+      <Handover doc={doc} sceneId={sceneId} />
+      {/* A READOUT, not a field: the seam is where the blend sits, drawn and
+          read, and nothing in it takes input. So it wears the house readout
+          (no hover, the reading in the numeral face), never the pill an
+          author would try to type into. */}
+      {window === null ? null : (
+        <InspectorRow label="Seam" className="insp-readout">
+          <div className="insp-seam">
+            <SeamTrack start={window.start} end={window.end} cut={window.cut} d={window.durationFrames} fps={doc.fps} />
+          </div>
+        </InspectorRow>
+      )}
+      <InspectorRow>
+        <button type="button" className="link-button" onClick={fineTune}>
+          Fine-tune in Studio
+        </button>
+      </InspectorRow>
     </InspectorSection>
   );
 }
+
+/** HOW IT HANDS OVER: the notes stored on the outgoing planned shot, or,
+ *  without any, what the transition itself says. */
+function Handover(props: { doc: Doc3D; sceneId: string }) {
+  const { doc, sceneId } = props;
+  const scene = doc.scenesById[sceneId]!;
+  const handover = partOfScene(doc, sceneId)?.handover;
+  const notes = handover?.notes?.trim() ?? "";
+  const beats = handover?.motion ?? [];
+  const transition = scene.transition;
+  const derived =
+    transition === undefined
+      ? ["A hard cut."]
+      : [
+          `${resolveGlPresetSpec(transition.kind)?.label ?? transition.kind} over ${formatDuration(framesToSeconds(transition.durationFrames, doc.fps))}.`,
+          transition.outgoing === "run"
+            ? `${scene.name} keeps playing under it.`
+            : `${scene.name} holds on its last frame.`,
+        ];
+  return (
+    <section className="notes-block-section" data-testid="cut-handover">
+      <h4 className="notes-block-heading">How it hands over</h4>
+      {notes === "" && beats.length === 0 ? (
+        derived.map((line) => (
+          <p key={line} className="notes-block-text">
+            {line}
+          </p>
+        ))
+      ) : (
+        <>
+          {notes === "" ? null : <p className="notes-block-text">{notes}</p>}
+          {beats.length === 0 ? null : (
+            <ol className="notes-block-beats">
+              {beats.map((beat, at) => (
+                <li key={at} className="notes-block-beat">
+                  <span className="notes-block-number">{at + 1}</span>
+                  <span className="notes-block-beat-text">{beat.text}</span>
+                </li>
+              ))}
+            </ol>
+          )}
+        </>
+      )}
+    </section>
+  );
+}
+
+/** The seam's three spans (the lead-in, the blend, the run-out) and where the
+ *  playhead is inside the blend. Its own component: it reads the playhead,
+ *  which moves with every scrub. */
+function SeamTrack(props: { start: number; end: number; cut: number; d: number; fps: Doc3D["fps"] }) {
+  const { start, end, cut, d, fps } = props;
+  const frame = useShotEditor((s) => s.frame);
+  const total = Math.max(1, end - start);
+  const pct = (n: number): string => `${(Math.max(0, n) / total) * 100}%`;
+  const into = Math.min(Math.max(frame - cut, 0), d);
+  return (
+    <>
+      <div className="insp-seam-track" aria-hidden>
+        <span className="insp-seam-span" style={{ width: pct(cut - start) }} />
+        <span className="insp-seam-span is-blend" style={{ width: pct(d) }} />
+        <span className="insp-seam-span" style={{ width: pct(end - cut - d) }} />
+      </div>
+      <span className="insp-dim" data-testid="seam-readout">
+        {`${timecode(into, fps)} / ${formatDuration(framesToSeconds(d, fps))}`}
+      </span>
+    </>
+  );
+}