@dailies-studio/shot-editor 0.1.0 → 0.2.0

package/src/panels/timeline/TimelineDock.tsx

@@ -1,23 +1,42 @@
-// The timeline dock: ONE CONTINUOUS MASTER STRIP.
+// The timeline dock: A MASTER STRIP, AND ONE SHOT INSIDE IT.
 //
-// ── WHAT DIED HERE, AND WHY ─────────────────────────────────────────────
+// ── WHAT DIED HERE, AND WHAT CAME BACK ──────────────────────────────────
 //
-// This used to be two levels. A scene strip on top, and underneath it the block
-// tracks of WHICHEVER SCENE THE PLAYHEAD WAS IN — one bit, `state.sceneId`,
-// deciding what half the dock showed. It is a coherent model and it is the wrong
-// one for a video: the author's question is almost never "what is in scene 2",
-// it is "what happens between the logo landing and the price appearing", and
-// those two things are in different scenes. A dock that can only show one scene
-// answers that question by making the author flip between two pictures and hold
-// the join in their head.
+// This used to be two levels keyed on `state.sceneId` — a scene strip on top and
+// underneath it the tracks of WHICHEVER SCENE THE PLAYHEAD WAS IN. That
+// was deleted, and the argument for deleting it stands and is worth restating:
+// the author's question is almost never "what is in scene 2", it is "what
+// happens between the logo landing and the price appearing", and those two
+// things are in different scenes. A lower half that changed under the author
+// every time they scrubbed across a cut answered that question by making them
+// flip between two pictures and hold the join in their head.
 //
-// So every scene's rows are on screen at once, at their master positions,
-// grouped in master order, with the scene boundaries drawn through the tracks.
-// `state.sceneId` survives as the INSPECTOR'S SUBJECT and the URL's, and nothing
-// about this file's layout reads it any more. The scene strip survives too, slim
-// and secondary: it is the only place scenes are created, reordered and trimmed,
-// which is exactly the set of verbs that are about scenes rather than about
-// time.
+// Two levels are back, and the difference is the BIT. `state.enteredScene` is
+// written ONLY by the enter/leave verbs, never derived from the playhead, so
+// nothing but an explicit gesture can change what this panel is showing:
+//
+//   SCENE CONTEXT (`enteredScene === null`) — ONE ROW PER SHOT, stacked, each
+//     drawn at its own master position, boundaries through the tracks. The
+//     sequence read. Per-element rows are behind each shot's own disclosure:
+//     the subject is the arrangement of shots, and the deleted-dock argument is
+//     answered by making the whole-video picture available rather than
+//     mandatory — with an element that survives a cut visibly TWO rows, which
+//     is the honest drawing of a Layer3D belonging to exactly one shot.
+//   SHOT CONTEXT — one group, ruler re-zeroed on the shot the author OPENED,
+//     its elements expandable, PLUS the master-timed marker and audio lanes
+//     clipped to its window. Those two are kept and not pruned: the component
+//     context prunes them because a definition runs on a second clock with no
+//     master position, and a shot is a window OF master time. Beat-synced
+//     authoring inside a shot is the whole point of the tool.
+//
+// ── THE SCENE STRIP IS GONE, AND WHERE ITS VERBS WENT ────────────────────
+//
+// There used to be a 26px `SceneStrip` above these tracks drawing every shot as
+// a bar in ONE lane, while the tracks below already rendered one group per
+// shot. Two drawings of one list, and only the thin one had the verbs. Each
+// group's first row IS its shot now (`ShotRow`), carrying create, reorder,
+// trim, delete, transition, rename, duplicate and open — the same set, still
+// in one place, no longer duplicated as a picture.
 //
 // ── WHERE THE SCENE COMES FROM NOW ──────────────────────────────────────
 //
@@ -28,97 +47,796 @@
 //
 // Everything geometric is @dailies-studio/timeline's, unchanged: `Ruler`,
 // `PlayheadLine`, `frameToPx`, `pxToFrame` and `useAnchoredZoom` are about
-// frames and pixels, which the keyframe lane and the block lane agree about.
+// frames and pixels, which the keyframe lane and the bar lanes agree about.
 // What is NOT reused is `TimelineModel` — see model.ts for why.
-import { Fragment, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
-import { PlayheadLine, Ruler, frameToPx, useAnchoredZoom } from "@dailies-studio/timeline";
+import {
+  Fragment,
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import type { PointerEvent as ReactPointerEvent, ReactNode } from "react";
+import {
+  PlayheadChip,
+  PlayheadLine,
+  anchoredScrollLeft,
+  frameToPx,
+  pxToFrame,
+  startDrag,
+  useAnchoredZoom,
+} from "@dailies-studio/timeline";
+import {
+  IconChevron,
+  IconChevronDown,
+  IconSkipStart,
+  PanelBoundary,
+  SegmentedControl,
+  useContextMenu,
+} from "@dailies-studio/ui";
+import {
+  ADD_ICON,
+  CHEVRON_DOWN_ICON,
+  CHEVRON_RIGHT_ICON,
+  iconFor,
+  LOOP_ICON,
+  MINUS_ICON,
+} from "../../icons.js";
 import type { Rational } from "@dailies-studio/engine";
-import { useShotEditor, useStore } from "../../state/context.js";
+import {
+  useShotEditor,
+  useShotEditorHot,
+  useStore,
+} from "../../state/context.js";
 import { ResizeHandle } from "../ResizeHandle.js";
-import { DOCK_HEIGHT } from "../../state/panelSize.js";
-import { AudioLane } from "./AudioLane.js";
+// The bracket is defined beside `playbackWindow`, which is the one place the
+// looped window is computed; see its header for why the two may not be two
+// readings. This file only says where on the ruler it hangs.
+import { WorkAreaBracket } from "../header/Header.js";
+import { DOCK_PPF, fitShell, layoutFor } from "../../state/panelSize.js";
+import { inShotContext } from "../../state/viewMode.js";
+import { AudioLane, SceneAudioRow, SHOT_AUDIO_ROW_H } from "./AudioLane.js";
 import { BlockRow } from "./BlockRow.js";
-import { ChannelRows } from "./ChannelRow.js";
+import { ChannelRows, SceneChannelRows } from "./ChannelRow.js";
 import { LifespanRow } from "./LifespanRow.js";
+import { maskMarksOf } from "../maskMarks.js";
 import { MarkerLane } from "./MarkerLane.js";
-import { SceneStrip } from "./SceneStrip.js";
-import { CAMERA_ROW_ID, masterContentFrames, masterDuration, masterRows, sceneBars, timecode } from "./model.js";
+import { barBeatAt, beatRulerTicks } from "./beatRuler.js";
+import type { BeatTick } from "./beatRuler.js";
+import { lazyChunk, lazyPanel } from "../../app/lazyPanel.js";
+import { PlayButton } from "./PlayButton.js";
+import { TransportVolume } from "./TransportVolume.js";
+import { labelWidthOf, useLabelWidth } from "./labelWidth.js";
+import { ShotRow } from "./ShotRow.js";
+import {
+  BLOCK_ROW_H,
+  CHANNEL_ROW_H,
+  LAYER_ROW_H,
+  VIDEO_ROW_H,
+  channelRowsCached,
+  clipRowOf,
+  DOCK_RULER_H,
+  defContentFrames,
+  defGroup,
+  dockRulerTicks,
+  clock,
+  followScrollLeft,
+  followScrollTop,
+  laneFrame,
+  rowOffsetOf,
+  appearedBand,
+  FOLLOW_MARGIN,
+  isolationSpan,
+  masterContentFrames,
+  masterDuration,
+  masterRows,
+  ppfToSlider,
+  rulerLabel,
+  rulerLabelPlaces,
+  sceneBars,
+  sceneChannelRows,
+  shotContentFrames,
+  sliderToPpf,
+  SHOT_ROW_H,
+  playheadLabel,
+} from "./model.js";
+import type { FollowRow, MasterRow } from "./model.js";
+import {
+  defDurationFrames,
+  homeOf,
+  sceneStart,
+} from "@dailies-studio/shot/doc";
+import type { Doc3D, Layer3D, Tempo3D } from "@dailies-studio/shot/doc";
 import { collectSnapTargets, snapFrame, snapThresholdFrames } from "./snap.js";
 import type { SnapPress, SnapScope } from "./snap.js";
+import { marqueeBars, marqueeHits, rectBetween } from "./marquee.js";
+import type { MarqueeRect } from "./marquee.js";
+import { KeyStretchGuides, KeyStretchTabs } from "./KeyStretch.js";
+import { useVariableVirtualWindow } from "../virtualWindow.js";
+
+// ── THE VIEWS THAT LOAD WHEN THEY OPEN ──────────────────────────────────
+//
+// Sound mode (its lanes, mixer, tempo chip and head tools), the Graph and the
+// Generate drawer are chunks of their own (app/lazyPanel.tsx): Rows is what
+// almost every visit uses. Each stand-in keeps its box, so the dock does not
+// move when the view lands.
+const soundMode = lazyChunk(() => import("./SoundMode.js"));
+const SoundLanes = soundMode.panel("Sound", (m) => m.SoundLanes, <div className="sound-lanes" />);
+const SoundMixer = soundMode.panel("Mixer", (m) => m.SoundMixer, <div className="sound-mixer" />);
+const SoundHeadTools = soundMode.panel("Sound tools", (m) => m.SoundHeadTools);
+const TempoChip = soundMode.panel("Tempo", (m) => m.TempoChip);
+const CurvePane = lazyPanel("Graph", () => import("./CurvePane.js").then((m) => m.CurvePane), <div className="curve-pane" />);
+const GenerateDrawer = lazyPanel("Generate", () => import("./GenerateDrawer.js").then((m) => m.GenerateDrawer), <div className="sound-gen" />);
+
+// ── WHAT "EMPTY LANE SPACE" IS, AND WHY THE LIST IS A LIST ────────────────
+//
+// The dock already spends its presses: a bar body, a trim edge, a roll handle,
+// a keyframe diamond, a shot bar, a marker, an audio clip and its four fades.
+// A marquee that occasionally ate one of those would be worse than no marquee,
+// so it is the LAST claimant here in two independent ways, and either one alone
+// would do it.
+//
+//   THE TARGET MUST BE A LANE ITSELF. Every bar and handle in this dock is a
+//   POSITIONED CHILD of one of these three elements, so a press on any of them
+//   reports that child as `e.target` and fails this test outright. Only the
+//   lane's own background passes, which is what "empty" means in a lane whose
+//   contents are all absolutely placed.
+//
+//   AND EVERY OTHER GESTURE STOPS THE EVENT. `LifespanRow`, `BlockRow`,
+//   `ChannelRow`, `ShotRow`, `MarkerLane` and `AudioLane` all call
+//   `stopPropagation` on their own pointerdown, so nothing they claim reaches
+//   this handler to be tested in the first place.
+//
+// The RULER is not on this list and needs nothing: its ⇧drag for the work area
+// lives in `DockRuler`, outside `.dock-tracks`, so a press there can never
+// bubble here.
+//
+// Three lanes rather than "anything under the tracks": the marquee selects
+// LAYERS, and these are the three lanes a layer's rows are drawn in. The
+// master-timed marker and audio lanes sit outside every scene group, so a press
+// there finds no group to scope to and starts nothing, which is the right
+// answer for lanes whose contents are not layers.
+const MARQUEE_LANES = ["lifespan-lane", "block-row-lane", "channel-lane"];
+
+/** How far the pointer must travel before a press becomes a band. Below it a
+ *  press is still a click, which is what stops a one-pixel wobble on the way to
+ *  a mouseup from painting a rect and clearing the selection. */
+const MARQUEE_MIN_PX = 3;
 
-/** Where the track labels end and the time area begins, in px. */
-export const LABEL_WIDTH = 150;
+const TIMELINE_GROUP_WINDOW_THRESHOLD = 40;
+const TIMELINE_LAYER_WINDOW_THRESHOLD = 60;
+const TIMELINE_GROUP_SEPARATOR_HEIGHT = 1;
+
+/** The shared timeline window shell. Below the threshold it returns the
+ * original sibling DOM exactly; above it spacers preserve scroll geometry and
+ * only the viewport slice mounts. */
+function TimelineWindow<T>(props: {
+  items: readonly T[];
+  heights: readonly number[];
+  threshold: number;
+  keyOf(item: T): string;
+  children(item: T, index: number): ReactNode;
+  testId: string;
+}) {
+  const ref = useRef<HTMLDivElement>(null);
+  const enabled = props.items.length > props.threshold;
+  const range = useVariableVirtualWindow({
+    listRef: ref,
+    scrollSelector: ".dock-scroll",
+    heights: props.heights,
+    enabled,
+  });
+  if (!enabled) {
+    return (
+      <>
+        {props.items.map((item, index) => (
+          <Fragment key={props.keyOf(item)}>
+            {props.children(item, index)}
+          </Fragment>
+        ))}
+      </>
+    );
+  }
+  return (
+    <div ref={ref} data-testid={props.testId}>
+      {range.before > 0 ? (
+        <div aria-hidden="true" style={{ height: range.before }} />
+      ) : null}
+      {props.items.slice(range.start, range.end).map((item, index) => (
+        <Fragment key={props.keyOf(item)}>
+          {props.children(item, range.start + index)}
+        </Fragment>
+      ))}
+      {range.after > 0 ? (
+        <div aria-hidden="true" style={{ height: range.after }} />
+      ) : null}
+    </div>
+  );
+}
+
+/**
+ * How tall one layer's row is, collapsed or expanded.
+ *
+ * THE VIRTUAL WINDOW'S PREFIX SUMS ARE BUILT FROM THIS, so the number here and
+ * the row's actual height are one fact: a video row that draws 56px while this
+ * says 28 puts every spacer below it 28px out, and the error accumulates one
+ * row at a time. Both sides read `LAYER_ROW_H` / `VIDEO_ROW_H` from model.ts
+ * rather than repeating a literal.
+ *
+ * Exported for the test that holds those two numbers against each other.
+ */
+export function expandedLayerHeight(
+  layer: Layer3D | undefined,
+  row: MasterRow,
+  doc: Doc3D,
+  expanded: boolean,
+): number {
+  // A CLIP ROW is a filmstrip over the recording's own waveform, and it needs
+  // real height whether or not the channel rows are open. Through `clipRowOf`
+  // and not through the layer's kind, because those are different questions
+  // inside a component definition: a video layer there has a def-local clock,
+  // no sound and no seam, so `defGroup` gives its row no clip facts and
+  // `LifespanRow` draws an ordinary 28px bar. Keying the height on the kind
+  // alone reserved 56 for a row that drew 28.
+  const base = clipRowOf(layer, row) === undefined ? LAYER_ROW_H : VIDEO_ROW_H;
+  if (!expanded || layer === undefined) return base;
+  const rows = channelRowsCached(layer);
+  // One row per animated property, or the one "No animation" hint row when
+  // there are none, and the "+ property" row under either.
+  const channelHeight = (Math.max(1, rows.length) + 1) * CHANNEL_ROW_H;
+  return base + channelHeight;
+}
 
 // ── THE FRAME STAYS OUT OF THIS COMPONENT ─────────────────────────────────
 //
 // During playback the frame changes ~30 times a second, and this component
-// renders the ENTIRE dock — every scene group, camera bar, track row and block
-// bar. When it subscribed to `frame`, all of that reconciled per playback
-// frame. The three things that actually show the frame are leaves below
-// (DockTime, DockReadout, DockPlayhead), each subscribing to `frame` alone, so
-// a playhead tick re-renders three spans and nothing else. If a future reader
-// adds `useShotEditor((s) => s.frame)` back here, playback perf regresses to
-// where it was — don't.
-
-/** The current-time readout, isolated so its per-frame tick stays its own. */
-function DockTime({ fps }: { fps: Rational }) {
-  const frame = useShotEditor((s) => s.frame);
-  return (
-    <span className="dock-time" data-testid="dock-time">
-      {timecode(frame, fps)}
-    </span>
+// renders the ENTIRE dock — every scene group, camera bar, track row and
+// keyframe. When it subscribed to `frame`, all of that reconciled per playback
+// frame. The two things that actually show the frame are leaves below
+// (DockTime, DockPlayhead), each subscribing to `frame` alone, so a playhead
+// tick re-renders a span and a line and nothing else. If a future reader adds
+// `useShotEditor((s) => s.frame)` back here, playback perf regresses to where
+// it was — don't.
+
+/**
+ * The lane frame a playhead leaf draws. PAUSED it is React's, as it always
+ * was. PLAYING, the frame React renders holds still and `paint` writes each
+ * played frame onto the leaf's own DOM from a raw subscription, the way the
+ * follow writes `scrollLeft`: a commit per frame for a translate and a few
+ * characters was the dock's whole cost while the transport ran, and it landed
+ * after the stage's draw on the shared thread. A render while playing (a zoom)
+ * is painted over at once, and Pause renders the leaf again where it stopped.
+ *
+ * `paint` writes exactly what the render writes, the same style fields and
+ * the same text nodes' `nodeValue` (never `textContent`, which would swap out
+ * the node React updates), so each writer leaves the DOM the other expects.
+ *
+ * THE FIRST PAUSED RENDER PAINTS ITS OWN FRAME too. React writes only what
+ * differs from its last render, and that render was the frame Play started
+ * on: a stop that lands back there (a Pause and a seek in one batch, Go to
+ * an edit point) rendered the same values, wrote nothing, and left the frame
+ * playback reached on screen.
+ */
+function useLanePlayhead(origin: number, paint: (frame: number) => void): number {
+  const store = useStore();
+  const paused = useShotEditorHot((s) => (s.playing ? null : laneFrame(s, origin)));
+  const held = useRef(0);
+  if (paused !== null) held.current = paused;
+  const shown = paused ?? held.current;
+  const live = useRef({ origin, paint });
+  live.current = { origin, paint };
+  const painted = useRef(Number.NaN);
+  /** A played frame is on the DOM, not the one React last rendered. */
+  const playedOnScreen = useRef(false);
+  useEffect(
+    () =>
+      store.subscribe(() => {
+        const s = store.getState();
+        if (!s.playing) {
+          painted.current = Number.NaN;
+          return;
+        }
+        const at = laneFrame(s, live.current.origin);
+        if (at === painted.current) return;
+        painted.current = at;
+        playedOnScreen.current = true;
+        live.current.paint(at);
+      }),
+    [store],
   );
+  useLayoutEffect(() => {
+    const s = store.getState();
+    if (!s.playing) {
+      if (playedOnScreen.current) {
+        playedOnScreen.current = false;
+        paint(shown);
+      }
+      return;
+    }
+    painted.current = laneFrame(s, origin);
+    playedOnScreen.current = true;
+    paint(painted.current);
+  });
+  return shown;
 }
 
-/** The frame-counter readout, same isolation. */
-function DockReadout({ total }: { total: number }) {
-  const frame = useShotEditor((s) => s.frame);
+/**
+ * THE ONE PLAYHEAD READOUT, the transport's timecode chip. Isolated so its
+ * per-frame tick stays its own.
+ *
+ * The clock is always padded ("00:02.20", `clock`), so the chip is a fixed
+ * slot that does not shove its neighbours at each whole second. The suffix
+ * says what the clock is measured against: the Project's whole length
+ * ("/ 00:18.00"), or inside a shot or a definition the integer frame the
+ * document model is built on ("66 f"), muted beside the clock. The suffix is
+ * its own span so a narrow head can drop it (a container query in
+ * timeline.css) and keep the clock.
+ */
+function DockTime({
+  fps,
+  origin,
+  total,
+  tempo,
+}: {
+  fps: Rational;
+  origin: number;
+  /** The Project's length in frames, or null inside a shot or a definition. */
+  total: number | null;
+  /** Sound mode with a tempo: the suffix reads the bar and beat instead. */
+  tempo?: Tempo3D | undefined;
+}) {
+  // The DEF-LOCAL clock while a definition is open — the same one-time-base
+  // rule the playback loop follows (unify P2). `origin` is the shot context's
+  // re-zero: still master time, read from the shot's own start, because a
+  // readout that disagreed with the ruler above it would be worse than either.
+  // Through `laneFrame`, which is that rule's one spelling — see model.ts.
+  const suffix = (at: number): string =>
+    tempo !== undefined ? ` bar ${barBeatAt(tempo, fps, at + origin)}` : total === null ? ` ${at} f` : ` / ${clock(total, fps)}`;
+  const time = useRef<HTMLSpanElement | null>(null);
+  const frame = useLanePlayhead(origin, (at) => {
+    const el = time.current;
+    const reading = el?.firstChild;
+    const tail = el?.lastElementChild?.firstChild;
+    if (reading != null) reading.nodeValue = clock(at, fps);
+    if (tail != null) tail.nodeValue = suffix(at);
+  });
   return (
-    <span className="dock-readout" data-testid="dock-readout">
-      {frame} / {Math.max(0, total - 1)}
+    <span ref={time} className="dock-time" data-testid="dock-time">
+      {clock(frame, fps)}
+      <span className="dock-time-frame">{suffix(frame)}</span>
     </span>
   );
 }
 
 /** The playhead, subscribing to the frame itself so its two mount sites ride
- *  a per-frame tick without dragging the dock along. */
-function DockPlayhead({ ppf }: { ppf: number }) {
-  const frame = useShotEditor((s) => s.frame);
-  return <PlayheadLine frame={frame} ppf={ppf} offset={0} className="dock-playhead" />;
+ *  a per-frame tick without dragging the dock along. `laneFrame` is shared with
+ *  the follow effect below, so the lane cannot scroll to one frame and draw
+ *  another.
+ *
+ *  THE RULER COPY WEARS THE HEAD, the one playhead spec every lane shares
+ *  (`.tl-playhead-chip` and `.tl-playhead-pointer`, @dailies-studio/timeline's
+ *  playhead.css): the package's `PlayheadChip`, an accent pill labelled in
+ *  decimal seconds (`playheadLabel`: "2.20", "8.00"), where the Graph reads
+ *  the frame number. The track copy stays a bare line. */
+function DockPlayhead({
+  ppf,
+  origin,
+  fps,
+  head = false,
+}: {
+  ppf: number;
+  origin: number;
+  fps?: Rational;
+  head?: boolean;
+}) {
+  const line = useRef<HTMLDivElement | null>(null);
+  const frame = useLanePlayhead(origin, (at) => {
+    const el = line.current;
+    if (el === null) return;
+    // `PlayheadLine`'s own two numbers, at its own offset (0 here).
+    const x = frameToPx(at, ppf);
+    el.style.translate = `${x}px 0`;
+    el.style.setProperty("--playhead-x", `${x}px`);
+    const label = el.firstElementChild?.firstChild;
+    if (head && fps !== undefined && label != null) label.nodeValue = playheadLabel(at, fps);
+  });
+  return (
+    <PlayheadLine
+      ref={line}
+      frame={frame}
+      ppf={ppf}
+      offset={0}
+      className="dock-playhead"
+    >
+      {head && fps !== undefined ? (
+        <PlayheadChip frame={frame} label={playheadLabel(frame, fps)} />
+      ) : null}
+    </PlayheadLine>
+  );
+}
+
+/**
+ * THE DOCK'S RULER: three tiers of ticks on a seconds ladder (`dockRulerTicks`),
+ * labelled by `rulerLabel` ("0:02") in every context.
+ *
+ * ⇧drag draws the work area between the press and the pointer when the caller
+ * passes `onWorkArea` (the Project only); a plain press seeks.
+ *
+ * The package `Ruler` steps ONE labelled tier over a frame ladder, which is
+ * the keyframe lane's scale. Its press is kept exactly: the `.tl-ruler` and
+ * `.tl-overhang` boxes, the button guard, the cancelled press (so a scrub
+ * never paints a text selection), the rect read once at the press, and
+ * `startDrag` for the move.
+ */
+function DockRuler(props: {
+  durationFrames: number;
+  contentF: number;
+  ppf: number;
+  timeW: number;
+  fps: Rational;
+  onSeek(frame: number): void;
+  onWorkArea?: ((a: number, b: number) => void) | undefined;
+  /** The Project's ruler, which draws the taller ticks of the boards' Project
+   *  strip (`.is-project`); a shot's and a definition's keep the shot board's. */
+  project: boolean;
+  /** Sound mode's bar grid (`beatRulerTicks`), drawn in place of the seconds
+   *  ladder when the film has a tempo. */
+  beats?: readonly BeatTick[] | undefined;
+  /** Isolation's shot range in lane frames: the strip before `from` is shaded
+   *  like the overhang after `durationFrames`, which is then `to`. */
+  boundsFrom?: number | undefined;
+  /** Isolation's markers, as ticks: their lane is hidden there. */
+  markers?: readonly { id: string; frame: number; title: string }[] | undefined;
+  children?: ReactNode;
+}) {
+  const { ppf, timeW, fps, onSeek, onWorkArea, beats, boundsFrom, markers } = props;
+  // Only as far as the lane lays out, for `Ruler`'s reason: an absurd stored
+  // extent capped at 2^25 px must not grow the ladder past every tick inside it.
+  const extentF = Math.min(props.contentF, Math.ceil(timeW / ppf));
+  const ticks = useMemo(
+    () => dockRulerTicks(extentF, ppf, fps),
+    [extentF, ppf, fps],
+  );
+  // One place per MAJOR, in tick order (see `rulerLabelPlaces`).
+  const places = useMemo(
+    () =>
+      rulerLabelPlaces(
+        ticks
+          .filter((t) => t.tier === 0)
+          .map((t) => ({ x: frameToPx(t.frame, ppf), text: rulerLabel(t.seconds) })),
+        timeW,
+      ),
+    [ticks, ppf, timeW],
+  );
+  let major = 0;
+  const onPointerDown = (e: ReactPointerEvent<HTMLDivElement>): void => {
+    if (e.button !== 0) return;
+    e.preventDefault();
+    const left = e.currentTarget.getBoundingClientRect().left;
+    const at = (clientX: number): number => pxToFrame(clientX - left, ppf);
+    const pressed = at(e.clientX);
+    const move =
+      e.shiftKey && onWorkArea !== undefined
+        ? (clientX: number): void => onWorkArea(pressed, at(clientX))
+        : (clientX: number): void => onSeek(at(clientX));
+    move(e.clientX);
+    startDrag(e, { onMove: (ev) => move(ev.clientX), onEnd: () => {} });
+  };
+  return (
+    <div
+      className={`tl-ruler${props.project ? " is-project" : ""}`}
+      style={{ minWidth: timeW }}
+      onPointerDown={onPointerDown}
+    >
+      <div
+        className="tl-overhang"
+        data-testid="dock-overhang"
+        style={{ left: frameToPx(props.durationFrames, ppf) }}
+      />
+      {boundsFrom === undefined || boundsFrom <= 0 ? null : (
+        <div
+          className="tl-overhang is-before"
+          data-testid="dock-overhang-before"
+          style={{ width: frameToPx(boundsFrom, ppf) }}
+        />
+      )}
+      {markers?.map((m) => (
+        <span
+          key={m.id}
+          className="dock-marker-tick"
+          data-testid={`dock-marker-tick-${m.id}`}
+          title={m.title}
+          style={{ left: frameToPx(m.frame, ppf) }}
+        />
+      ))}
+      {beats !== undefined
+        ? beats.map((t) => (
+            <span key={t.frame} className="dock-tick" data-tier={t.tier} style={{ left: frameToPx(t.frame, ppf) }}>
+              {t.label === undefined ? null : <span className="dock-tick-label">{t.label}</span>}
+            </span>
+          ))
+        : ticks.map((t) => {
+        const x = frameToPx(t.frame, ppf);
+        const place = t.tier === 0 ? places[major++] : undefined;
+        return (
+          <span
+            key={t.seconds}
+            className="dock-tick"
+            data-tier={t.tier}
+            style={{ left: x }}
+          >
+            {place === "start" || place === "end" ? (
+              // The last label right-aligns on its tick, so it never runs off
+              // the end of the lane it labels, and a label it would land on is
+              // not drawn (`rulerLabelPlaces`).
+              <span className={`dock-tick-label${place === "end" ? " is-end" : ""}`}>
+                {rulerLabel(t.seconds)}
+              </span>
+            ) : null}
+          </span>
+        );
+      })}
+      {props.children}
+    </div>
+  );
+}
+
+/**
+ * THE ZOOM, AS A THING YOU CAN SEE AND GRAB.
+ *
+ * The lane has zoomed since it was built (ctrl/⌘+wheel, and `Fit`), and
+ * neither of those says at rest that the lane HAS a zoom, or where in its
+ * range this document is sitting. An author who has never held ctrl over the
+ * timeline has no way to find out that it zooms at all, and `Fit` reads as a
+ * one-shot rather than as one end of a scale. A track with a thumb on it
+ * answers both at once, which is the argument for a control that duplicates
+ * two existing gestures: it is the only one of the three that is visible.
+ *
+ * It is a READOUT as much as an input, and that half matters more than it
+ * looks. The wheel and `Fit` write `dockPpf` and this renders from it, so the
+ * thumb tracks every other way of zooming and the range teaches itself.
+ *
+ * A leaf: `dockPpf` changes once per wheel notch and once per slider pixel,
+ * and subscribing to it up in `TimelineDock` is the whole dock re-rendering
+ * per pixel of a drag.
+ */
+function DockZoom({ onZoom }: { onZoom: (ppf: number) => void }) {
+  const ppf = useShotEditor((s) => s.dockPpf);
+  const at = ppfToSlider(ppf, DOCK_PPF.min, DOCK_PPF.max);
+  // The two ends step a tenth of the track, in the slider's own (log) space,
+  // so a press is the same visible zoom anywhere in the range.
+  const stepBy = (d: number): void =>
+    onZoom(sliderToPpf(Math.min(1, Math.max(0, at + d)), DOCK_PPF.min, DOCK_PPF.max));
+  // AT AN END THE STEP IS REFUSED, NOT DISABLED. `disabled` on the button that
+  // has focus drops focus to <body> the press it reaches the end, so a keyboard
+  // user stepping in loses their place. `aria-disabled` keeps it focusable and
+  // says the same thing (`.btn[aria-disabled="true"]` dims it); the click
+  // handler is what refuses.
+  const atMin = at <= 0;
+  const atMax = at >= 1;
+  return (
+    <div className="dock-zoom-group">
+      <button
+        type="button"
+        className="btn is-icon is-ghost dock-zoom-step"
+        aria-label="Zoom out"
+        title="Zoom out"
+        aria-disabled={atMin}
+        onClick={() => {
+          if (!atMin) stepBy(-0.1);
+        }}
+      >
+        {MINUS_ICON}
+      </button>
+      <input
+        className="dock-zoom"
+        type="range"
+        min={0}
+        max={1}
+        // ~1000 steps across a 300x range, which is about a quarter of a percent
+        // of zoom per step: fine enough that a drag reads as continuous, coarse
+        // enough that a keyboard arrow moves something visible.
+        step={0.001}
+        value={at}
+        aria-label="Timeline zoom"
+        title="Zoom the timeline (ctrl+wheel over the lane)"
+        onChange={(e) =>
+          onZoom(
+            sliderToPpf(
+              Number(e.currentTarget.value),
+              DOCK_PPF.min,
+              DOCK_PPF.max,
+            ),
+          )
+        }
+        // ── AND IT GIVES THE KEYBOARD BACK WHEN THE DRAG ENDS ──────────────
+        //
+        // `isEditable` treats every <input> as a field being typed into, which is
+        // what stops the keymap eating a character mid-rename. It also means a
+        // focused slider swallows the whole chrome's shortcuts. Space is the one
+        // that matters: drag the zoom, press space to watch what you just framed,
+        // and nothing happens. Blurring on pointer-up costs a mouse user nothing
+        // (the thumb is still there to grab) and leaves TAB focus alone, so the
+        // arrow keys still work for anyone who reached it from the keyboard.
+        onPointerUp={(e) => e.currentTarget.blur()}
+      />
+      <button
+        type="button"
+        className="btn is-icon is-ghost dock-zoom-step"
+        aria-label="Zoom in"
+        title="Zoom in"
+        aria-disabled={atMax}
+        onClick={() => {
+          if (!atMax) stepBy(0.1);
+        }}
+      >
+        {ADD_ICON}
+      </button>
+    </div>
+  );
 }
 
 export function TimelineDock() {
   const store = useStore();
   const doc = useShotEditor((s) => s.doc);
+  /** The label column: the rail track's shown width (see labelWidth.ts). For
+   *  rendering only; effects and handlers read `labelWidthOf` at call time. */
+  const labelWidth = useLabelWidth();
+  /** WHICH document, for the fit below. Off `doc` rather than a second
+   *  subscription, and the id and not the object: this component re-renders on
+   *  every keystroke of an edit, and a fit keyed on the document's identity
+   *  would re-zoom the lane on each one. */
+  const docId = doc?.id ?? null;
   const isolation = useShotEditor((s) => s.isolation);
-  const playing = useShotEditor((s) => s.playing);
+  /** The shot holding the isolation, which is the one on screen (the store
+   *  drops an isolation the moment the playhead leaves its scene). Null
+   *  outside isolation, so playback across cuts re-renders nothing here. A
+   *  layer id can repeat across shots, so the id alone does not name it. */
+  const isoScene = useShotEditor((s) => (s.isolation === null ? null : s.sceneId));
+  const editingDef = useShotEditor((s) => s.editingDef);
+  const enteredScene = useShotEditor((s) => s.enteredScene);
+  const mode = useShotEditor((s) => s.dockMode);
   const collapsed = useShotEditor((s) => s.dockCollapsed);
+  const loop = useShotEditor((s) => s.loopPlayback);
   const ppf = useShotEditor((s) => s.dockPpf);
-  const previewMuted = useShotEditor((s) => s.previewMuted);
-  const previewVolume = useShotEditor((s) => s.previewVolume);
   const scrollRef = useRef<HTMLDivElement | null>(null);
   /**
-   * Which layers show their block lanes. LOCAL, not store state: it is about
+   * Which layers show their keyframe rows. LOCAL, not store state: it is about
    * this panel's shape and nothing else reads it, and the body is hidden rather
    * than unmounted on collapse (see below) so it survives the one event that
    * would otherwise lose it.
    */
-  const [open, setOpen] = useState<ReadonlySet<string>>(() => new Set<string>());
+  const [open, setOpen] = useState<ReadonlySet<string>>(
+    () => new Set<string>(),
+  );
+  const reveal = useShotEditor((s) => s.dockReveal);
+  /** A row a reveal is waiting to scroll to and flash, held for the render
+   *  that lays it out: the group it opened has no heights until then. */
+  const [revealTarget, setRevealTarget] = useState<{
+    layerId: string;
+    scroll: boolean;
+    flash: boolean;
+  } | null>(null);
+  /** The row flashing now (`is-revealed`), until its animation ends. */
+  const [flashed, setFlashed] = useState<string | null>(null);
   /** The frame a live drag has snapped onto, for the guide. Null between drags. */
   const [guide, setGuide] = useState<number | null>(null);
+  /** The live rubber band, in `.dock-tracks` content pixels. Null between
+   *  drags, and null for a press that never travelled far enough to be one. */
+  const [marquee, setMarquee] = useState<MarqueeRect | null>(null);
+  /**
+   * ONCE THE MARKER LANE HAS HAD CONTENT IT KEEPS ITS PLACE.
+   *
+   * It used to draw always, spending its fixed height off the tracks to hold a
+   * sentence of placeholder prose. It is now drawn when there is something in
+   * it — and it does not go away again, because a lane that vanished as the
+   * author removed its last mark would move every row under the pointer, and
+   * its empty prose is precisely what the next marker is learned from.
+   *
+   * ── THE AUDIO LANE IS NOT GATED, AND THAT IS A REVERSAL ────────────────
+   *
+   * It was, on the same argument, and the argument was wrong for this one.
+   * Not one document in `examples/demo` has a single clip in it — the 52-second
+   * music ad this tool was built to ship included — so the gate meant the lane
+   * had never once been on screen, and audio read as a feature the product did
+   * not have. The two doors it left (a popover item and a drag over the dock)
+   * are doors you have to already know about.
+   *
+   * A marker is an annotation you reach for once you have audio to mark. Audio
+   * is a medium the product is FOR, and 26px is the cheapest possible way to
+   * say so. Its own empty prose is now the thing that teaches the import.
+   *
+   * A REF written in render rather than state: the bit is monotonic and
+   * idempotent, so a re-render (StrictMode's double invoke included) computes
+   * the same value and there is nothing to tear or to schedule.
+   */
+  const laneShown = useRef({ marker: false });
+  /**
+   * Playhead following is off for the rest of THIS playback run.
+   *
+   * A ref and not state: nothing renders from it, and it is written from a
+   * native wheel listener that must not schedule a re-render of the whole dock
+   * on every notch of a pan. Set by the pan below, cleared whenever `playing`
+   * changes (in the follow's store subscription, which says why).
+   */
+  const followOff = useRef(false);
+  /** The shot-row geometry the vertical follow reads. Written in render below,
+   *  once `groupHeights` exists. */
+  const followGeom = useRef<{ ids: string[]; heights: number[] }>({
+    ids: [],
+    heights: [],
+  });
+  /** The isolated subtree's lifespan union in LANE frames, or null outside
+   *  isolation. Written in render beside `followGeom`: the horizontal follow
+   *  holds still while the playhead is outside it (see the follow effect). */
+  const followSpan = useRef<{ from: number; to: number } | null>(null);
+  /** The layer rows of the ONE container the dock shows (an entered shot, a
+   *  definition, an isolated subtree), for the follow's layer half. Null over
+   *  the Project's shots, which the shot reveal follows; no rows while they
+   *  are folded. Written in render beside `followGeom`. */
+  const followRows = useRef<FollowRow[] | null>(null);
+  /** A press is held on the dock's rows (not the ruler, which stays put):
+   *  nothing scrolls them under it. Set and cleared by the listeners beside
+   *  the wheel's. */
+  const pressHeld = useRef(false);
+  /** The layer whose lanes isolation opened on entry, so leaving closes the
+   *  ones it opened and never ones the author opened. */
+  const autoOpened = useRef<string | null>(null);
+  /**
+   * WHICH SHOTS SHOW THEIR ELEMENTS, in the scene context.
+   *
+   * This is the recorded answer to the deleted two-level dock's argument. That
+   * argument was right — "what happens between the logo landing and the price
+   * appearing" spans a cut — and it is answered by keeping the whole-video
+   * picture one disclosure away rather than by making it the only picture.
+   * Empty by default because the scene context's subject is the arrangement of
+   * shots, and forty rows of elements is not that.
+   *
+   * THE SHOT CONTEXT READS THE SAME SET. Its first look is three rows (Shot,
+   * Camera, Sound) with the layers folded into the Shot row's "N layers", so
+   * an open shot here is open there too and one disclosure answers both.
+   *
+   * ONE SET, not a set plus a global flag: the corner button expands ALL or
+   * collapses all by writing this same set, so "is this shot open" has one
+   * answer rather than an OR over two states that can disagree.
+   *
+   * LOCAL, like `open` above and for the same reason: it is about this panel's
+   * shape, nothing else reads it, and the body is hidden rather than unmounted
+   * on collapse so it survives the one event that would lose it.
+   */
+  const [openShots, setOpenShots] = useState<ReadonlySet<string>>(
+    () => new Set<string>(),
+  );
+  /** ONE MENU FOR EVERY SHOT ROW. The hook holds an open/closed state and a
+   *  focus-restore ref, and only one menu can be open at a time — so a document
+   *  with fourteen shots would otherwise mount fourteen of them. */
+  const shotMenu = useContextMenu();
+  /** Sound mode's Generate drawer, in the mixer's column while open. Local:
+   *  it is this panel's shape, and a reload starts on the mixer. */
+  const [generateOpen, setGenerateOpen] = useState(false);
 
   // Imperative reads, so the wheel listener never closes over a stale zoom.
   const read = useCallback(() => store.getState().dockPpf, [store]);
-  const setPxPerFrame = useCallback((next: number) => store.setDockPpf(next), [store]);
+  const setPxPerFrame = useCallback(
+    (next: number) => store.setDockPpf(next),
+    [store],
+  );
   useAnchoredZoom({
     scrollRef,
-    labelWidth: LABEL_WIDTH,
+    // A prop and not a getter: the hook re-binds its wheel listener when the
+    // width changes, which only a panel drag or a window resize does.
+    labelWidth,
     ppf,
-    min: 0.2,
-    max: 60,
+    min: DOCK_PPF.min,
+    max: DOCK_PPF.max,
     read,
     setPxPerFrame,
-    enabled: !collapsed && doc !== null,
+    // Off in Graph, which unmounts the scroller: the way back re-enables it,
+    // so the zoom binds to the one Rows mounts again rather than staying on
+    // the old one and leaving ctrl+wheel to zoom the page.
+    enabled: !collapsed && doc !== null && mode !== "graph",
   });
 
   // SHIFT+WHEEL PANS. Native and non-passive for `useAnchoredZoom`'s reason: a
@@ -128,18 +846,70 @@ export function TimelineDock() {
     const el = scrollRef.current;
     if (el === null) return;
     const onWheel = (e: WheelEvent): void => {
+      // A PLAIN WHEEL IS THE VERTICAL PAN, and it is the same gesture the shift
+      // pan below is: an author looking somewhere else while the video plays.
+      // It falls through to the browser's own scrolling (no preventDefault),
+      // and the only thing taken from it is the authorship signal, which the
+      // `scroll` event cannot give — see the arming effect's note.
+      //
+      // Gated on `playing` because the ref's contract is "off for the rest of
+      // THIS run": scrolling the dock while paused is ordinary navigation, and
+      // silencing the next shot-row reveal for it would be a bug rather than
+      // deference. A press on the scrollbar is the same gesture (`onDown`).
+      if (!e.ctrlKey && !e.metaKey && store.getState().playing)
+        followOff.current = true;
       if (!e.shiftKey || e.ctrlKey || e.metaKey) return;
       e.preventDefault();
+      // A DELIBERATE LOOK ELSEWHERE STOPS THE FOLLOW. This is the one gesture
+      // that can fight it: an author panning ahead while the video plays, yanked
+      // back on the very next frame. Only meaningful during playback, and the
+      // arm is released by any change of `playing`.
+      followOff.current = true;
       // A trackpad sends its own horizontal axis; a wheel with one axis sends
       // deltaY and means the same thing with shift held.
       el.scrollLeft += e.deltaX !== 0 ? e.deltaX : e.deltaY;
     };
+    // A PRESS ON THE SCROLLBAR is the wheel's gesture by other means: the
+    // scrollbar sits outside the scroller's client box, and a press there
+    // lands on the scroller itself. Any other press on the rows holds them
+    // still until it lets go: nothing slides under a pressed pointer. The
+    // ruler is sticky and does not move, so a scrub keeps the follow.
+    const onDown = (e: PointerEvent): void => {
+      if (e.target === el) {
+        const box = el.getBoundingClientRect();
+        const outside =
+          e.clientX - box.left - el.clientLeft >= el.clientWidth || e.clientY - box.top - el.clientTop >= el.clientHeight;
+        if (outside) {
+          if (store.getState().playing) followOff.current = true;
+          return;
+        }
+      }
+      if (!(e.target instanceof Element) || e.target.closest(".dock-ruler") === null) pressHeld.current = true;
+    };
+    const onUp = (): void => {
+      pressHeld.current = false;
+    };
     el.addEventListener("wheel", onWheel, { passive: false });
-    return () => el.removeEventListener("wheel", onWheel);
+    el.addEventListener("pointerdown", onDown, true);
+    for (const type of ["pointerup", "pointercancel"]) window.addEventListener(type, onUp, true);
+    // A release the page never hears (let go outside a window that lost
+    // focus) must not hold the rows still for good. The WINDOW'S own blur,
+    // so not in the capture phase: there it hears every element's blur too,
+    // and a press that moves focus cleared the hold the moment it began.
+    window.addEventListener("blur", onUp);
+    return () => {
+      el.removeEventListener("wheel", onWheel);
+      el.removeEventListener("pointerdown", onDown, true);
+      for (const type of ["pointerup", "pointercancel"]) window.removeEventListener(type, onUp, true);
+      window.removeEventListener("blur", onUp);
+      pressHeld.current = false;
+    };
     // Keyed on whether there IS a document, not on which one: the container
     // does not exist until one opens, and re-binding a native listener on every
-    // keystroke of an edit would be work for nothing.
-  }, [collapsed, doc === null]);
+    // keystroke of an edit would be work for nothing. And on the MODE: the
+    // Graph view unmounts the scroller, and the one Rows mounts again on the
+    // way back is a new element these must be bound to.
+  }, [collapsed, doc === null, mode]);
 
   /**
    * A scroll position that cannot be written until the NEXT layout.
@@ -174,24 +944,69 @@ export function TimelineDock() {
   const fit = useCallback(
     (sceneId?: string) => {
       const el = scrollRef.current;
-      const current = store.getState().doc;
+      const s = store.getState();
+      const current = s.doc;
       if (el === null || current === null) return;
-      const width = el.clientWidth - LABEL_WIDTH;
+      const width = el.clientWidth - labelWidthOf(s);
       if (width <= 0) return;
+      const openDef =
+        s.editingDef === null ? undefined : current.components?.[s.editingDef];
+      // THE SHOT CONTEXT'S LANE ALREADY IS ONE SHOT, re-zeroed on it — so "fit
+      // the timeline" and "fit this shot" are the same request there, and both
+      // land at scrollLeft 0. Without this branch the per-shot arm below would
+      // scroll to the shot's MASTER start, which in a re-zeroed lane is that
+      // many frames past its own end.
+      const entered =
+        openDef === undefined && s.enteredScene !== null
+          ? sceneBars(current).find((b) => b.id === s.enteredScene)
+          : undefined;
+      // ISOLATION FITS THE SUBTREE, not the shot: the dock is about the one
+      // object then, and a card alive for a second of a ten-second shot would
+      // otherwise open as a sliver. In LANE frames, so the same arithmetic
+      // serves a re-zeroed shot and the master strip. Sound mode draws tracks,
+      // not the subtree's rows, and keeps the ordinary fit. A named shot is
+      // an explicit ask and is answered as asked.
+      const isoHome =
+        sceneId === undefined &&
+        openDef === undefined &&
+        s.isolation !== null &&
+        s.sceneId !== null &&
+        s.dockMode !== "sound"
+          ? current.scenesById[s.sceneId]
+          : undefined;
+      const isoSpan = isoHome === undefined || s.isolation === null ? null : isolationSpan(isoHome, s.isolation);
+      const isoFrom =
+        isoSpan === null || s.sceneId === null
+          ? null
+          : (sceneStart(current, s.sceneId) ?? 0) - (entered?.start ?? 0) + isoSpan.in;
 
-      // Whole document: the target is 0, which is in range at every zoom, so
-      // it needs none of the deferral below.
-      if (sceneId === undefined) {
-        const total = masterDuration(current);
+      // Whole document (or the one open container): the target is 0, which is
+      // in range at every zoom, so it needs none of the deferral below.
+      if (isoFrom === null && (sceneId === undefined || entered !== undefined)) {
+        const total =
+          openDef !== undefined
+            ? defDurationFrames(openDef)
+            : entered !== undefined
+              ? entered.end - entered.start
+              : masterDuration(current);
         if (total <= 0) return;
         store.setDockPpf(width / total);
         el.scrollLeft = 0;
         return;
       }
 
-      const bar = sceneBars(current).find((b) => b.id === sceneId);
-      if (bar === undefined) return;
-      const span = bar.end - bar.start;
+      // One span to fit and its lane start: the subtree's, or one shot's.
+      let from: number;
+      let span: number;
+      if (isoFrom !== null && isoSpan !== null) {
+        from = isoFrom;
+        span = isoSpan.out - isoSpan.in;
+      } else {
+        const bar = sceneBars(current).find((b) => b.id === sceneId);
+        if (bar === undefined) return;
+        from = bar.start;
+        span = bar.end - bar.start;
+      }
       if (span <= 0) return;
       const before = store.getState().dockPpf;
       store.setDockPpf(width / span);
@@ -199,7 +1014,7 @@ export function TimelineDock() {
       // shot asks for more zoom than it gets and the scroll must be computed
       // against what actually landed.
       const actual = store.getState().dockPpf;
-      const target = frameToPx(bar.start, actual);
+      const target = frameToPx(from, actual);
       // An unchanged ppf renders nothing, so the layout effect above would
       // never fire and the scroll would strand. Layout is already correct
       // there, so write it now.
@@ -213,6 +1028,334 @@ export function TimelineDock() {
     return () => store.attachDockFit(null);
   }, [store, fit]);
 
+  /**
+   * Zoom to an absolute px-per-frame, holding one frame still.
+   *
+   * ── WHAT IT ANCHORS ON, AND WHY IT IS NOT THE LEFT EDGE ────────────────
+   *
+   * The wheel anchors on the pointer, because that is what the author is
+   * looking at. A slider has no pointer over the lane, so it anchors on the
+   * PLAYHEAD whenever the playhead is on screen: that is where the author's
+   * attention is by definition, it is the frame the picture above is showing,
+   * and it means a zoom never has to be followed by a scroll to find your
+   * place again. With the playhead off screen there is no such frame, so the
+   * middle of the visible lane holds instead: the one choice that keeps
+   * whatever is being looked at from sliding away.
+   *
+   * Anchoring on `scrollLeft` (the left edge) would be the easy version and is
+   * the wrong one: zooming in from a fitted document would walk the view
+   * steadily towards frame 0 no matter where the work is.
+   *
+   * ── AND WHY THE CLAMP IS READ BACK ─────────────────────────────────────
+   *
+   * `setDockPpf` pins to DOCK_PPF, and `set` does nothing at all when the
+   * value is unchanged. So at either end of the track the re-render that the
+   * `[ppf]` layout effect below waits for never happens, and a `pendingScroll`
+   * written for it would sit there and then fire against the NEXT zoom. `fit`
+   * learned this first; this is the same two lines.
+   */
+  const zoomTo = useCallback(
+    (next: number) => {
+      const el = scrollRef.current;
+      if (el === null) return;
+      const s = store.getState();
+      const from = s.dockPpf;
+      if (s.doc === null) return;
+      // Re-zeroed on the OPEN shot, and only there: a definition runs on its own
+      // clock and the master strip already starts at 0. The local is what carries
+      // `inShotContext`'s guarantee into `sceneStart`, which takes a scene id.
+      const entered = inShotContext(s) ? s.enteredScene : null;
+      const origin = entered === null ? 0 : (sceneStart(s.doc, entered) ?? 0);
+      // Container coordinates, which is what the anchor speaks: the playhead's
+      // content position less however far the lane is scrolled.
+      const label = labelWidthOf(s);
+      const playheadX =
+        label + frameToPx(laneFrame(s, origin), from) - el.scrollLeft;
+      const lane = el.clientWidth;
+      const onScreen = playheadX >= label && playheadX <= lane;
+      const anchorX = onScreen ? playheadX : label + (lane - label) / 2;
+      const target = anchoredScrollLeft({
+        anchorX,
+        scrollLeft: el.scrollLeft,
+        labelWidth: label,
+        from,
+        next,
+      });
+      store.setDockPpf(next);
+      if (target === null) return;
+      if (store.getState().dockPpf === from) el.scrollLeft = target;
+      else pendingScroll.current = target;
+    },
+    [store],
+  );
+
+  /**
+   * A DOCUMENT, OR A CONTAINER, ARRIVES FITTED.
+   *
+   * This used to write `scrollLeft = 0` and keep the zoom, which was half the
+   * answer. The lane's x means something different on each side of a context
+   * change — the same `scrollLeft` that showed the end of shot 3 on the master
+   * strip is, in a re-zeroed shot 3, a position past its own end — so the
+   * anchor had to move. But the ZOOM is wrong across the same fork, and much
+   * more visibly: `dockPpf` starts at 6, so a 1572-frame scene opened at 87
+   * frames of itself, one shot filling the strip and the other thirteen off
+   * screen. Leaving a shot put the author back in that same 1/18th of their own
+   * video.
+   *
+   * `fit` answers both at once — it sets the zoom AND lands the scroll — and it
+   * already knows the three totals (a definition's, the entered shot's, the
+   * master), so this stays one call. Keyed on the document too, which nothing
+   * fitted before: opening a scene is exactly the moment its whole shape is
+   * what the author wants to see.
+   *
+   * Nothing persists `dockPpf`, so this overrides no saved preference. In jsdom
+   * `clientWidth` is 0 and `fit` returns before it writes anything, which is why
+   * the tests that measure "one frame is 6 CSS px at the default zoom" are
+   * unaffected.
+   */
+  //
+  // Entering and leaving isolation are context changes on the same argument:
+  // the lane fits the subtree on the way in and the shot on the way out.
+  //
+  // A trip to the board is NOT a context change. The dock sleeps there in a
+  // hidden `<Activity>` (App.tsx), and waking re-runs every effect, so the fit
+  // remembers what it last fitted and leaves the author's zoom and scroll
+  // alone when nothing it keys on moved.
+  const fittedFor = useRef<readonly unknown[] | null>(null);
+  useEffect(() => {
+    const key = [fit, docId, enteredScene, editingDef, isolation] as const;
+    if (fittedFor.current?.every((was, i) => was === key[i])) return;
+    fittedFor.current = key;
+    fit();
+  }, [fit, docId, enteredScene, editingDef, isolation]);
+
+  /**
+   * ── THE LANE FOLLOWS THE PLAYHEAD ──────────────────────────────────────
+   *
+   * A DEADZONE (`followScrollLeft`), so a scrub inside the visible window costs
+   * nothing and only a playhead that runs off the edge moves the view. Past the
+   * forward edge of the band each frame scrolls by one frame's width, so the
+   * playhead pins and the content slides under it.
+   *
+   * ── AND IT IS A RAW SUBSCRIPTION, NOT A HOOK ──────────────────────────
+   *
+   * Read this component's `THE FRAME STAYS OUT OF THIS COMPONENT` header first.
+   * `useShotEditor((s) => s.frame)` here would re-render the ENTIRE dock — every
+   * scene group, camera bar, track row and keyframe — thirty times a second, to
+   * do one style write. So this subscribes to the store directly, compares the
+   * two clocks itself, coalesces to a frame, and writes `scrollLeft`. It renders
+   * nothing. `App.tsx` writes `--rail-w` and `--dock-row-h` the same way and for the
+   * same reason.
+   *
+   * `laneFrame` is shared with `DockPlayhead`, so the lane cannot follow one
+   * frame while drawing another.
+   */
+  useEffect(() => {
+    // TWO VARIABLES FOR ONE FRAME, and they are not the same question.
+    // `queued` is "is an apply already on its way"; `raf` is only the handle the
+    // cleanup cancels. Folding them into `if (raf === 0)` reads fine and is
+    // ordering-dependent: the id is assigned AFTER `requestAnimationFrame`
+    // returns, so any implementation that runs the callback before returning
+    // leaves a stale non-zero id behind and the guard never opens again. Exactly
+    // one clock move would ever be followed. A real rAF is asynchronous and hides
+    // it; a synchronous one (the test's) does not, and a latent dependency on
+    // when a callback happens to fire is worth not having either way.
+    let queued = false;
+    let raf = 0;
+    let lastFrame = store.getState().frame;
+    let lastDef = store.getState().defFrame;
+    let lastScene = store.getState().sceneId;
+    let lastPlaying = store.getState().playing;
+    /** A shot change is waiting to be revealed. Latched rather than recomputed
+     *  in `apply`, because a scene move arriving while a frame's apply is
+     *  already queued must not be swallowed by it. */
+    let sceneMoved = false;
+    /** A clock position as a lane frame in the state's own context: the shot
+     *  context's re-zero applied, or the definition's own clock. */
+    const laneOf = (s: ReturnType<typeof store.getState>, clock: { frame: number; defFrame: number } = s): number => {
+      // The local carries `inShotContext`'s guarantee into `sceneStart`, which
+      // takes a scene id rather than the nullable field.
+      const entered = inShotContext(s) ? s.enteredScene : null;
+      const origin = entered === null || s.doc === null ? 0 : (sceneStart(s.doc, entered) ?? 0);
+      return laneFrame({ editingDef: s.editingDef, frame: clock.frame, defFrame: clock.defFrame }, origin);
+    };
+    /** Where the playhead was when the layer half last looked: its baseline for
+     *  which rows came on screen. Kept as the RAW clocks and read in the current
+     *  context, so entering a shot or a definition, unfolding layers or
+     *  isolating one keeps it (the playhead did not move) and the first move
+     *  after is followed. The master clock and a definition's are two fields,
+     *  so each context reads its own. */
+    let seen = { frame: store.getState().frame, defFrame: store.getState().defFrame };
+    const apply = (): void => {
+      queued = false;
+      raf = 0;
+      const reveal = sceneMoved;
+      // Cleared even when disarmed below: a pending reveal is dropped rather
+      // than banked, so re-arming does not fire a scroll for a cut the author
+      // panned away from several shots ago.
+      sceneMoved = false;
+      const s = store.getState();
+      // THE LAYER BASELINE MOVES ON EVERY LOOK, with no scroller (Graph) and
+      // while disarmed too, for the shot reveal's reason: rows that came on
+      // screen while the author looked elsewhere are not banked.
+      const was = seen;
+      seen = { frame: s.frame, defFrame: s.defFrame };
+      // THE SCROLLER IS READ LIVE TOO. Graph unmounts it and Rows mounts a new
+      // one on the way back, and a copy captured at subscribe wrote to the
+      // unmounted one: after one trip through Graph nothing followed at all.
+      const el = scrollRef.current;
+      if (el === null || s.doc === null) return;
+      // ── EVERY INPUT READ LIVE, NONE CLOSED OVER ───────────────────────
+      //
+      // The zoom and the re-zero both move without this effect re-running, and
+      // a captured copy of either would follow the wrong pixel until the next
+      // resubscribe. It is `useAnchoredZoom`'s `read()` rule, for the same
+      // reason: an imperative read cannot go stale.
+      //
+      // The origin is `sceneStart`, which is THE prefix sum — the same one
+      // `masterRows` builds its groups from, so the number this scrolls to and
+      // the number the bars are drawn at are one arithmetic and not two.
+      const at = laneOf(s);
+      const from = laneOf(s, was);
+      const layers = followRows.current;
+      if (followOff.current) return;
+      // ISOLATION HOLDS THE LANE ON THE SUBTREE. Entry fits its lifespan, and
+      // a shot that plays on past it (or loops back from before it) must not
+      // drag the fitted rows away and back on every pass: that was "the whole
+      // tracks move". Inside the span the follow is the ordinary one, which a
+      // fitted lane never needs and a zoomed-in one does.
+      const span = followSpan.current;
+      const held = span !== null && (at < span.from || at > span.to);
+      const next = held
+        ? null
+        : followScrollLeft({
+            playheadPx: labelWidthOf(s) + frameToPx(at, s.dockPpf),
+            scrollLeft: el.scrollLeft,
+            // Zero while the dock is collapsed (`.dock-body` takes `hidden`),
+            // which `followScrollLeft` answers null to. So a collapsed dock
+            // costs one property read per playback frame and writes nothing.
+            laneW: el.clientWidth,
+            contentW: el.scrollWidth,
+          });
+      if (next !== null) el.scrollLeft = next;
+
+      // ── THE LAYER ROWS, INSIDE ONE CONTAINER ──────────────────────────
+      //
+      // An entered shot, a definition and an isolated subtree each show one
+      // list of layer rows in time order, where the shot reveal below has no
+      // shot to follow. So the rows that came on screen are revealed
+      // (`appearedBand`), with the shot reveal's "nearest": once per
+      // appearance and only when out of view, never a scroll per frame, so
+      // playback walks the list down as the Project walks down its shots.
+      // With their open lanes, so a layer's keys come with it, but never
+      // taller than the band under the ruler.
+      //
+      // Rows mode only: Graph and Sound lay out lists of their own. Never
+      // under a held press, since nothing slides under a pointer (the sticky
+      // ruler's scrub is not one). Never while a menu or popover is open,
+      // which a scroll closes or moves. Read only at an appearance, so the
+      // DOM query costs nothing per frame. And never on a SHOT CHANGE, which
+      // inside a shot is entering it: the playhead's jump there is not rows
+      // coming on, and the shot reveal below brings the Shot row into view.
+      if (layers !== null && !reveal && s.dockMode === "rows" && !pressHeld.current) {
+        const band = appearedBand(layers, from, at);
+        if (band !== null && el.ownerDocument.querySelector(".menu-surface, .popover-float") === null) {
+          const top = followScrollTop({
+            rowTop: band.top,
+            rowH: Math.min(band.height, Math.max(0, el.clientHeight - DOCK_RULER_H - 2 * FOLLOW_MARGIN)),
+            scrollTop: el.scrollTop,
+            viewH: el.clientHeight,
+            contentH: el.scrollHeight,
+            stickyH: DOCK_RULER_H,
+          });
+          if (top !== null) {
+            el.scrollTop = top;
+            return;
+          }
+        }
+      }
+
+      // ── AND THE SHOT ROWS ─────────────────────────────────────────────
+      //
+      // Driven by the SHOT, not by the frame. `sceneId` moves about once per
+      // shot where the playhead moves thirty times a second, and that is the
+      // whole difference between the two axes: this one reveals a row that
+      // scrolled out of reach and then leaves the lane alone, rather than
+      // holding a moving target at a fixed fraction of the viewport.
+      //
+      // A dock taller than its rows never scrolls at all, so on a short film
+      // this costs two property reads per cut and writes nothing.
+      // Sound mode draws tracks, not shot rows: `followGeom` measures rows.
+      // Isolation draws no shot row at all, only the subtree under one group.
+      if (!reveal || s.editingDef !== null || s.dockMode === "sound" || s.isolation !== null) return;
+      const geom = followGeom.current;
+      const index = s.sceneId === null ? -1 : geom.ids.indexOf(s.sceneId);
+      if (index < 0) return;
+      let rowTop = DOCK_RULER_H;
+      for (let i = 0; i < index; i += 1) rowTop += geom.heights[i] ?? 0;
+      // The separator is folded into the HEAD of every later group's height
+      // (see `groupHeights`), so the row itself begins just after it.
+      if (index > 0) rowTop += TIMELINE_GROUP_SEPARATOR_HEIGHT;
+      const top = followScrollTop({
+        rowTop,
+        rowH: SHOT_ROW_H,
+        scrollTop: el.scrollTop,
+        viewH: el.clientHeight,
+        contentH: el.scrollHeight,
+        stickyH: DOCK_RULER_H,
+      });
+      if (top !== null) el.scrollTop = top;
+    };
+    const stop = store.subscribe(() => {
+      const s = store.getState();
+      // FOLLOWING IS ARMED FOR THE WHOLE OF A PLAYBACK RUN AND NO LONGER.
+      //
+      // The one gesture it can fight is a pan DURING playback: an author
+      // looking ahead while the video plays, yanked back on the next frame.
+      // So the pan disarms it (the wheel handler above) and any change of
+      // `playing` arms it again. BOTH directions: pausing has to re-arm, or a
+      // pan during playback would silently disable the reveal on every later
+      // arrow-key step.
+      //
+      // Here, and not in an effect on a `playing` subscription, which would
+      // re-render the whole dock on every play edge for one ref write. And
+      // deliberately NOT on the `scroll` event, which is the obvious place and
+      // the wrong one: a programmatic scroll is indistinguishable from a human
+      // one there, so following would disarm itself on its own first write.
+      if (s.playing !== lastPlaying) {
+        lastPlaying = s.playing;
+        followOff.current = false;
+      }
+      // A CLOCK MOVE OR A SHOT CHANGE, and nothing else. The store notifies on
+      // every edit, every selection and every panel toggle; following on any of
+      // those would yank the lane while the author dragged a bar it had nothing
+      // to do with.
+      //
+      // The shot is its own test rather than a consequence of the frame: a row
+      // click and the left rail both pin a shot through `setScene`, which
+      // writes `sceneId` with no frame arithmetic at all when the playhead is
+      // already inside it. Keyed on the clock alone, exactly those two paths
+      // would leave the row they just selected off screen.
+      const clockMoved = s.frame !== lastFrame || s.defFrame !== lastDef;
+      const shotMoved = s.sceneId !== lastScene;
+      if (!clockMoved && !shotMoved) return;
+      lastFrame = s.frame;
+      lastDef = s.defFrame;
+      lastScene = s.sceneId;
+      if (shotMoved) sceneMoved = true;
+      if (queued) return;
+      queued = true;
+      raf = requestAnimationFrame(apply);
+    });
+    return () => {
+      stop();
+      if (raf !== 0) cancelAnimationFrame(raf);
+    };
+    // Keyed on whether there IS a document, not on which one: one subscription
+    // per open document. The scroller and every geometry ref are read live in
+    // `apply`, so nothing here goes stale when they change.
+  }, [store, doc === null]);
+
   /**
    * Freeze the snap targets at the press and hand a row back the one function a
    * drag needs.
@@ -222,12 +1365,23 @@ export function TimelineDock() {
    * start including the thing being dragged.
    */
   const beginSnap = useCallback<SnapPress>(
-    (exclude: SnapScope["exclude"], suppressed: boolean) => {
+    (exclude: SnapScope["exclude"], suppressed: boolean, legal?: SnapScope["legal"]) => {
       const s = store.getState();
+      // Snapping is OFF inside a definition: `collectSnapTargets` walks scene
+      // windows, which a def strip has none of; a wrong-clock target list is
+      // worse than none. (A def-local target list is a follow-up.)
       const targets =
-        suppressed || s.doc === null
+        suppressed || s.doc === null || s.editingDef !== null
           ? []
-          : collectSnapTargets(s.doc, exclude === undefined ? { playhead: s.frame } : { playhead: s.frame, exclude });
+          : collectSnapTargets(s.doc, {
+              playhead: s.frame,
+              // SPREAD, not assigned: `exactOptionalPropertyTypes` makes an
+              // explicit `undefined` a different thing from an absent key, and
+              // both of these are absent for most gestures.
+              ...(exclude === undefined ? {} : { exclude }),
+              ...(legal === undefined ? {} : { legal }),
+              beats: s.snapBeats,
+            });
       const threshold = snapThresholdFrames(s.dockPpf);
       return (candidate: number): number => {
         const hit = snapFrame(candidate, targets, threshold);
@@ -256,23 +1410,489 @@ export function TimelineDock() {
     };
   }, []);
 
+  // THE COMPONENT CONTEXT'S FORK (unify P2): with a definition open the dock
+  // is that definition's own strip — one group at offset 0, def-local ruler,
+  // no scene strip, no camera row, no master-timed lanes — plus the Actions
+  // section. One derived value decides all of it.
+  const def = editingDef === null ? undefined : doc?.components?.[editingDef];
+
   // Memoised on the document identity: the rows change exactly when the doc
   // does, and this component still re-renders for ppf/guide/collapse changes
   // that should not pay a full row rebuild. Above the null return — hooks.
   // Keyed on the ISOLATION too: going inside a card narrows the outline and the
   // stage, and a dock still listing every layer in the scene is the one panel
-  // an author uses to find a block showing rows they cannot click.
-  const groups = useMemo(() => (doc === null ? [] : masterRows(doc, isolation)), [doc, isolation]);
+  // an author uses to find a layer showing rows they cannot click.
+  const allGroups = useMemo(
+    () =>
+      doc === null
+        ? []
+        : def !== undefined
+          ? [defGroup(def)]
+          : masterRows(doc, isolation),
+    [doc, isolation, def],
+  );
+  // ── THE SHOT CONTEXT NARROWS THE SAME LIST ────────────────────────────
+  //
+  // Derived from `allGroups` rather than from a second `masterRows` call over
+  // one scene, so the isolation scoping stays ONE implementation: the rule
+  // "the isolation only narrows the scene it lives in" is stated once, in
+  // masterRows, and cannot be half-applied here. A missing group (the entered
+  // shot was deleted between the store's write and this render) falls back to
+  // the master strip rather than an empty dock — `onHistoryChange` will have
+  // left the context by the next commit anyway.
+  const shotGroup =
+    def !== undefined || enteredScene === null
+      ? undefined
+      : allGroups.find((g) => g.id === enteredScene);
+  // ── ISOLATION NARROWS IT TO ONE OBJECT ────────────────────────────────
+  //
+  // `masterRows` already lists only the subtree's rows in the shot holding
+  // it. The dock goes the rest of the way: that one group, with no shot row,
+  // no camera, no shot channels and no sound, so what is left is the isolated
+  // object and its keyed properties. The re-zero (`origin`) is untouched: the
+  // lane keeps the clock it had, and only the rows change.
+  const isoGroup =
+    def !== undefined || isolation === null || isoScene === null || (shotGroup !== undefined && shotGroup.id !== isoScene)
+      ? undefined
+      : allGroups.find((g) => g.id === isoScene && doc?.scenesById[g.id]?.layersById[isolation] !== undefined);
+  const groups = useMemo(
+    () => (isoGroup !== undefined ? [isoGroup] : shotGroup === undefined ? allGroups : [shotGroup]),
+    [allGroups, shotGroup, isoGroup],
+  );
+  /** The shot context's re-zero. DRAWING ONLY — see model.ts's header. */
+  const origin = shotGroup?.start ?? 0;
   const contentF = useMemo(
-    // The RULER ends at the document; the CONTENT may run past it, because a
+    // The RULER ends at the container; the CONTENT may run past it, because a
     // bar dragged off the end has to stay reachable.
-    () => (doc === null ? 0 : masterContentFrames(doc, groups)),
-    [doc, groups],
+    () =>
+      doc === null
+        ? 0
+        : def !== undefined
+          ? defContentFrames(groups[0]!)
+          : shotGroup !== undefined
+            ? shotContentFrames(shotGroup)
+            : masterContentFrames(doc, groups),
+    [doc, groups, def, shotGroup],
+  );
+  /** Whether a group's element rows are drawn: always inside a definition and
+   *  in isolation (there is no shot row to disclose them), and per shot behind
+   *  its disclosure in the Project and shot contexts alike. */
+  const rowsShown = useCallback(
+    (groupId: string): boolean => def !== undefined || isoGroup !== undefined || openShots.has(groupId),
+    [def, isoGroup, openShots],
   );
+  /** The camera row: inside a shot always (the first look is Shot, Camera,
+   *  Sound), over the Project behind the shot's disclosure, never in
+   *  isolation. */
+  const cameraShown = (groupId: string): boolean =>
+    def === undefined && isoGroup === undefined && (shotGroup !== undefined || openShots.has(groupId));
+  const layerHeights = useMemo(() => {
+    const byGroup = new Map<string, number[]>();
+    if (doc === null) return byGroup;
+    const canExpand = shotGroup !== undefined || def !== undefined || isoGroup !== undefined;
+    for (const group of groups) {
+      const shown = rowsShown(group.id);
+      const home = def ?? doc.scenesById[group.id];
+      byGroup.set(
+        group.id,
+        shown
+          ? group.rows.map((row) =>
+              expandedLayerHeight(
+                home?.layersById[row.layerId],
+                row,
+                doc,
+                canExpand && open.has(row.layerId),
+              ),
+            )
+          : [],
+      );
+    }
+    return byGroup;
+  }, [doc, groups, shotGroup, def, isoGroup, rowsShown, open]);
+  /** Each group's height ABOVE its first layer row. Its own memo because the
+   *  reveal's `rowOffsetOf` needs it as well as the group's total. */
+  const groupLeads = useMemo(() => {
+    if (doc === null) return [];
+    return groups.map((group, index) => {
+      // The separator belongs to the global group index, not DOM adjacency.
+      // Virtual spacers can sit between two groups, so an adjacent-sibling
+      // border both vanished at a window edge and escaped the prefix sum.
+      let lead =
+        (def === undefined && isoGroup === undefined ? SHOT_ROW_H : 0) +
+        (index === 0 ? 0 : TIMELINE_GROUP_SEPARATOR_HEIGHT);
+      const scene = doc.scenesById[group.id];
+      // Isolation draws neither the shot row nor anything the shot owns.
+      if (scene === undefined || def !== undefined || isoGroup !== undefined) return lead;
+      // The camera's row, then (behind the disclosure) its channel rows
+      // and their "+ property".
+      if (shotGroup !== undefined || openShots.has(group.id)) lead += BLOCK_ROW_H;
+      if (openShots.has(group.id)) lead += (sceneChannelRows(scene).length + 1) * CHANNEL_ROW_H;
+      return lead;
+    });
+  }, [doc, groups, shotGroup, def, isoGroup, openShots]);
+  const groupHeights = useMemo(() => {
+    if (doc === null) return [];
+    return groups.map((group, index) => {
+      let height = groupLeads[index] ?? 0;
+      const scene = doc.scenesById[group.id];
+      // Inside a shot the audio row draws even when empty and even folded, as
+      // the drop box: the same predicate the row's render gate uses below.
+      // Never in isolation, which is about the one object.
+      const audio =
+        def === undefined &&
+        isoGroup === undefined &&
+        (shotGroup !== undefined || (openShots.has(group.id) && Object.keys(scene?.audio ?? {}).length > 0));
+      if (audio) height += SHOT_AUDIO_ROW_H;
+      if (!rowsShown(group.id)) return height;
+      height += (layerHeights.get(group.id) ?? []).reduce(
+        (total, row) => total + row,
+        0,
+      );
+      return height;
+    });
+  }, [doc, groups, shotGroup, def, isoGroup, openShots, rowsShown, groupLeads, layerHeights]);
+  // WHERE EACH SHOT'S ROW SITS, handed to the follow effect above. Written in
+  // render like `laneShown`, and for the same reason: the effect subscribes
+  // once for the life of the document and must not close over a stale copy of
+  // a list that changes whenever a shot is added, reordered or expanded.
+  //
+  // The heights and not the DOM: past `TIMELINE_GROUP_WINDOW_THRESHOLD` the
+  // rows are virtualized and the one being revealed is exactly the one that
+  // may not be mounted, while this prefix sum is what positions the spacers
+  // holding its place.
+  followGeom.current = {
+    ids: groups.map((group) => group.id),
+    heights: groupHeights,
+  };
+  // THE SUBTREE'S SPAN, in lane frames, for the follow's hold. Rows mode only:
+  // Sound mode draws tracks over the whole shot and keeps the ordinary follow.
+  // The same `isolationSpan` the entry fit reads, so the hold and the fit
+  // agree about where the object lives.
+  const isoLife = useMemo(() => {
+    const home = isoGroup === undefined ? undefined : doc?.scenesById[isoGroup.id];
+    return home === undefined || isolation === null ? null : isolationSpan(home, isolation);
+  }, [doc, isoGroup, isolation]);
+  followSpan.current =
+    isoLife === null || isoGroup === undefined || mode === "sound"
+      ? null
+      : { from: isoGroup.start - origin + isoLife.in, to: isoGroup.start - origin + isoLife.out };
+  // THE ONE CONTAINER'S LAYER ROWS, for the follow's layer half: where each
+  // sits and when it is on screen, in lane frames. `rowOffsetOf`'s arithmetic
+  // over the same heights the window places its spacers by, so a row past the
+  // virtual window is found as surely as a mounted one. Null over the
+  // Project's shots, and no rows while they are folded.
+  const layerFollow = useMemo(() => {
+    const group = shotGroup !== undefined || def !== undefined || isoGroup !== undefined ? groups[0] : undefined;
+    if (doc === null || group === undefined || groups.length !== 1) return null;
+    const heights = layerHeights.get(group.id) ?? [];
+    const home = def ?? doc.scenesById[group.id];
+    const shift = group.start - origin;
+    let top = DOCK_RULER_H + (groupLeads[0] ?? 0);
+    // A folded group lists no heights: its rows are not drawn.
+    const rows = (heights.length === 0 ? [] : group.rows).map((row, i): FollowRow => {
+      const height = heights[i] ?? 0;
+      const at = top;
+      top += height;
+      return {
+        in: shift + row.lifespan.in,
+        out: shift + row.lifespan.out,
+        top: at,
+        height,
+        depth: row.depth,
+        hidden: home?.layersById[row.layerId]?.hidden === true,
+      };
+    });
+    return rows;
+  }, [doc, groups, shotGroup, def, isoGroup, layerHeights, groupLeads, origin]);
+  followRows.current = layerFollow;
+
+  /**
+   * ISOLATION OPENS THE ROOT'S LANES, and leaving closes them again.
+   *
+   * Entering a card is a request to work on it, and its keyed properties are
+   * that work, so they are on screen without a second click. The children stay
+   * folded: they are what the card is made of, not what was asked for. A root
+   * the author had open already is left to the author on the way out, which is
+   * why the effect remembers what IT opened rather than closing the id.
+   *
+   * Keyed on the root alone and reading `open` from this render: the set
+   * changes on every disclosure, and re-running on those would undo the
+   * author's own closes. And only when the root MOVED: a wake from the board's
+   * hidden `<Activity>` re-runs this with the same root, which reads as
+   * "already open" and would close the lanes it opened.
+   */
+  const isoRoot = isoGroup === undefined ? null : isolation;
+  const isoSeen = useRef<string | null>(null);
+  useEffect(() => {
+    if (isoSeen.current === isoRoot) return;
+    isoSeen.current = isoRoot;
+    const was = autoOpened.current;
+    const add = isoRoot !== null && !open.has(isoRoot) ? isoRoot : null;
+    autoOpened.current = add;
+    if (was === null && add === null) return;
+    setOpen((prev) => {
+      const next = new Set(prev);
+      if (was !== null) next.delete(was);
+      if (add !== null) next.add(add);
+      return next;
+    });
+  }, [isoRoot]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  /**
+   * ROWS ANOTHER PANEL ASKS TO SHOW (`dockReveal`).
+   *
+   * Two askers. The board's "Fine-tune in Studio" selects keys, and a key on
+   * a closed row is a selection nobody can see, so it opens the layer's lanes
+   * (`lanes`). A pick on the stage or in Layers
+   * (`revealSelection`) only brings the row into view and flashes it: opening
+   * its lanes would grow the dock under the author on every click.
+   *
+   * An explicit ask, not a watch on the selection: a row the author picks here
+   * is already in view, and the inspector diamond's new key must not reopen a
+   * row the author just closed. Lanes open and never close, and an unchanged
+   * set is handed back.
+   *
+   * A collapsed dock or the Graph view is the author's choice, and a pick is
+   * no reason to undo it, so those take the lanes and nothing else. The follow
+   * switch (`followOff`) is playback's and is left alone.
+   */
+  useEffect(() => {
+    if (reveal === null) return;
+    store.consumeDockReveal(reveal);
+    if (reveal.lanes) {
+      setOpen((was) => {
+        const add = reveal.layerIds.filter((id) => !was.has(id));
+        return add.length === 0 ? was : new Set([...was, ...add]);
+      });
+    }
+    const s = store.getState();
+    const first = reveal.layerIds[0];
+    // Sound mode has no layer rows: it shows `audioIds` itself (SoundMode).
+    if (first === undefined || s.dockCollapsed || s.dockMode !== "rows") return;
+    if (!reveal.scroll && !reveal.flash) return;
+    // A shot's rows sit behind its disclosure, over the Project and inside a
+    // shot alike, so the shot holding the row opens. The shot the stage shows
+    // first: a layer id names a row of one container.
+    if (def === undefined) {
+      const holds = (g: (typeof groups)[number]): boolean => g.rows.some((r) => r.layerId === first);
+      const holder = groups.find((g) => g.id === s.sceneId && holds(g)) ?? groups.find(holds);
+      if (holder !== undefined) {
+        setOpenShots((was) => (was.has(holder.id) ? was : new Set([...was, holder.id])));
+      }
+    }
+    setRevealTarget({ layerId: first, scroll: reveal.scroll, flash: reveal.flash });
+  }, [reveal, store, groups, def]);
+
+  // THE SCROLL RUNS AFTER THE LAYOUT PASS that drew the opened group, so the
+  // heights it reads include it. From geometry and not the DOM: a virtualized
+  // row is not mounted until this scroll brings its window there.
+  useLayoutEffect(() => {
+    if (revealTarget === null) return;
+    setRevealTarget(null);
+    const el = scrollRef.current;
+    const s = store.getState();
+    const at = rowOffsetOf(groups, groupHeights, groupLeads, layerHeights, revealTarget.layerId, s.sceneId);
+    if (el === null || at === null) return;
+    if (revealTarget.flash) setFlashed(revealTarget.layerId);
+    if (!revealTarget.scroll) return;
+    // The row with its open lanes, but never so tall that the scroll pushes
+    // the row itself up under the ruler.
+    const top = followScrollTop({
+      rowTop: at.top,
+      rowH: Math.min(at.height, Math.max(0, el.clientHeight - DOCK_RULER_H - 2 * FOLLOW_MARGIN)),
+      scrollTop: el.scrollTop,
+      viewH: el.clientHeight,
+      contentH: el.scrollHeight,
+      stickyH: DOCK_RULER_H,
+    });
+    if (top !== null) el.scrollTop = top;
+    // Sideways only when no part of the bar is in view: a bar already on
+    // screen is found, and panning the lane would lose the author's place.
+    const group = groups.find((g) => g.id === at.groupId);
+    const row = group?.rows.find((r) => r.layerId === revealTarget.layerId);
+    if (group === undefined || row === undefined) return;
+    const label = labelWidthOf(s);
+    const left = label + frameToPx(group.start - origin + row.lifespan.in, s.dockPpf);
+    const right = left + Math.max(8, frameToPx(row.lifespan.out - row.lifespan.in, s.dockPpf));
+    if (right >= el.scrollLeft + label && left <= el.scrollLeft + el.clientWidth) return;
+    const x = followScrollLeft({
+      playheadPx: left,
+      scrollLeft: el.scrollLeft,
+      laneW: el.clientWidth,
+      contentW: el.scrollWidth,
+    });
+    if (x !== null) el.scrollLeft = x;
+  }, [revealTarget, store, groups, groupHeights, groupLeads, layerHeights, origin]);
 
   if (doc === null) return null;
-  const total = masterDuration(doc);
-  const timeW = frameToPx(contentF, ppf);
+  // THE PROJECT CONTEXT: neither a definition nor a shot is open, so the lane
+  // is the whole edit. Loop, `+ Shot` and the length suffix belong to it alone.
+  const projectContext = def === undefined && shotGroup === undefined;
+  const total =
+    def !== undefined
+      ? defDurationFrames(def)
+      : shotGroup !== undefined
+        ? shotGroup.end - shotGroup.start
+        : masterDuration(doc);
+  // BOUNDED, for `rulerTicks`' reason: the extent comes from stored windows,
+  // and one written raw far past its Shot (validate bounds no `out`) must not
+  // reach a `minWidth` as nine quadrillion pixels, nor a NaN as no width at
+  // all. 2^25 px is Chrome's own layout ceiling, so no lane it could lay out
+  // is cut short.
+  const timeW = Number.isFinite(contentF)
+    ? Math.min(frameToPx(contentF, ppf), 2 ** 25)
+    : frameToPx(total, ppf);
+
+  /**
+   * THE RUBBER BAND. A press on empty lane space, and nothing else.
+   *
+   * Read `MARQUEE_LANES` above for what this will and will not claim. The rest
+   * of the gesture is marquee.ts's: the geometry is frozen at the press, the
+   * membership is recomputed from the live box on every move, and both are in
+   * the track area's own content pixels so a follow scroll cannot slide the
+   * bars out from under the band.
+   *
+   * ── WHY IT WRITES THE SELECTION AS IT GOES ───────────────────────────
+   *
+   * So that dragging back over a bar visibly gives it up. That is the whole
+   * argument for deciding membership per bar rather than banking it: the
+   * gesture is recoverable, and an author who overshoots by a row pulls back
+   * instead of releasing and starting again. Written only when the SET changes,
+   * because `select` fans out through the inspector and the outline and a write
+   * per pointer frame would spend all of that on an unchanged answer.
+   *
+   * ── AND WHY ESCAPE PUTS THE OLD ONE BACK ─────────────────────────────
+   *
+   * `startDrag` routes Escape, pointercancel and a lost capture into
+   * `onEnd(false)`, and every other gesture in this lane restores its base
+   * there. A marquee's base is the selection as it stood at the press, which is
+   * NOT the list shift extends: a plain band replaces, so it extends nothing
+   * and still owes back everything it replaced.
+   *
+   * ponytail: the band is STATE, so this whole component reconciles once per
+   * animation frame while the pointer is down, which is the cost the header's
+   * `THE FRAME STAYS OUT OF THIS COMPONENT` note is about. It is bounded (one
+   * frame, only under a held pointer, rows memoised on the document) and it
+   * buys a rect that reads straight out of the render. Write it through a ref
+   * onto the node, the way the follow effect writes `scrollLeft`, if a long
+   * document ever makes the band lag the pointer.
+   */
+  const beginMarquee = (e: ReactPointerEvent<HTMLDivElement>): void => {
+    if (e.button !== 0) return;
+    const target = e.target as HTMLElement;
+    if (!MARQUEE_LANES.some((lane) => target.classList.contains(lane))) return;
+    // The scope, and the reason the press has to be inside a group at all: a
+    // selection is resolved against ONE container (see marqueeHits).
+    const sceneId = target.closest<HTMLElement>("[data-scene-group]")?.dataset[
+      "sceneGroup"
+    ];
+    if (sceneId === undefined) return;
+    // Native text selection would otherwise drag a highlight across the labels
+    // under the band.
+    e.preventDefault();
+    const tracks = e.currentTarget;
+    const at = tracks.getBoundingClientRect();
+    const from = { x: e.clientX - at.left, y: e.clientY - at.top };
+    const bars = marqueeBars(tracks);
+    // Frozen at the press, like every other value this lane reads there: the
+    // author's selection is what shift extends AND what an abort puts back,
+    // and re-reading it per move would extend the one this drag just wrote.
+    //
+    // The two are not the same list. `add` is what the BOX is selecting into,
+    // which is nothing at all without shift because a plain band replaces;
+    // `base` is what was on screen before the press, which is what Escape owes
+    // back whether or not shift was held.
+    const base = store.getState().selection;
+    const add = e.shiftKey ? base : [];
+    // A DEFINITION IS NOT A SHOT. Its rows carry the def's id as their scene,
+    // which `select` already resolves through `layerContainer()`, and handing
+    // that id to `focusScene` would pin the playhead's scene to a container
+    // that has no master position at all.
+    const pinScene = def === undefined;
+    let painting = false;
+    let written: readonly string[] | null = null;
+    startDrag(e, {
+      onMove(ev) {
+        const box = tracks.getBoundingClientRect();
+        const to = { x: ev.clientX - box.left, y: ev.clientY - box.top };
+        if (
+          !painting &&
+          Math.abs(to.x - from.x) < MARQUEE_MIN_PX &&
+          Math.abs(to.y - from.y) < MARQUEE_MIN_PX
+        )
+          return;
+        painting = true;
+        const rect = rectBetween(from, to);
+        setMarquee(rect);
+        const hits = marqueeHits(rect, bars, { sceneId, add });
+        if (
+          written !== null &&
+          written.length === hits.length &&
+          written.every((id, i) => id === hits[i])
+        )
+          return;
+        written = hits;
+        // The row's own `pick()` rule: a selection in another shot has to
+        // navigate first, or `select` orders it against a container it does not
+        // live in and resolves it to nothing.
+        if (pinScene) store.focusScene(sceneId);
+        store.select(hits);
+      },
+      onEnd(commit) {
+        setMarquee(null);
+        if (!commit && written !== null) store.select(base);
+      },
+    });
+  };
+
+  /** The two master lanes' clip window, or absent outside the shot context. */
+  const laneWindow =
+    shotGroup === undefined
+      ? undefined
+      : { origin, len: shotGroup.end - shotGroup.start };
+  /**
+   * WHAT THE LABEL COLUMN IS LISTING, named in its corner: the open
+   * definition, the entered shot, or (null) the shots themselves, where the
+   * corner is the expand-all instead.
+   *
+   * A NAME AND NOT A WAY OUT. The one back lives in the canvas bar
+   * (`BackChip`), which is on screen in every dock state, graph mode and a
+   * collapsed dock included. A second exit here was a second thing to find.
+   */
+  const cornerName = def?.name ?? shotGroup?.name ?? null;
+  /** IN ISOLATION THE CORNER NAMES THE OBJECT, with its kind's glyph: the
+   *  rows under it are that object and nothing else, so the shot's name
+   *  would be naming something the column no longer lists. */
+  const isoLayer =
+    isoGroup === undefined || isolation === null ? undefined : doc.scenesById[isoGroup.id]?.layersById[isolation];
+  /** The shot's range, shaded where the lane runs past it, in isolation only:
+   *  the lane is fitted to the object, and what the film actually plays is
+   *  worth keeping in sight. Lane frames. */
+  const shotBounds =
+    isoGroup === undefined ? undefined : { from: isoGroup.start - origin, to: isoGroup.end - origin };
+  /** Markers survive isolation as ruler ticks, so timing to a beat still
+   *  works with their lane hidden. Lane frames, inside the lane's extent. */
+  const markerTicks =
+    isoGroup === undefined
+      ? undefined
+      : (doc.markers ?? [])
+          .map((m) => ({ id: m.id, frame: Math.trunc(m.frame) - origin, title: m.label || "Marker" }))
+          .filter((m) => m.frame >= 0 && m.frame <= contentF);
+  /** Every shot open, for the corner's expand-all. */
+  const allOpen = groups.length > 0 && groups.every((g) => openShots.has(g.id));
+  laneShown.current.marker ||= (doc.markers ?? []).length > 0;
+  /** SOUND MODE'S BAR GRID, over master time read from the context's origin.
+   *  A definition has no master time, so no grid. Not memoized: one pass over
+   *  the beats in view is cheaper than the dock's own row model. */
+  const sound = mode === "sound";
+  const tempo: Tempo3D | undefined = sound && def === undefined ? doc.tempo : undefined;
+  /** The right column holds the mixer (or the Generate drawer), Sound mode
+   *  over master time only. Otherwise the lane runs the dock's full width. */
+  const dockSide = !collapsed && sound && def === undefined;
+  const beatTicks: BeatTick[] | undefined =
+    tempo === undefined
+      ? undefined
+      : beatRulerTicks(tempo, doc.fps, origin, Math.min(contentF, Math.ceil(timeW / ppf)), ppf);
 
   return (
     <section
@@ -280,209 +1900,655 @@ export function TimelineDock() {
       data-testid="timeline-dock"
       aria-label="Timeline"
     >
-      {/* A child, not a sibling: the dock's height is content-driven up to its
-          max, so only the dock itself knows where its top edge actually is.
-          Absolute inside a `position: fixed` box, above the head it overlays. */}
-      {collapsed ? null : (
-        <ResizeHandle
-          axis="y"
-          getValue={() => store.getState().dockHeight}
-          // Dragging the TOP edge upward is a DECREASING clientY and a TALLER
-          // dock, so the pointer's travel is negated.
-          sign={-1}
-          onChange={(h) => store.setDockHeight(h)}
-          onReset={() => store.setDockHeight(DOCK_HEIGHT.default)}
-          className="dock-resize"
-          label="Resize the timeline"
-        />
-      )}
-      <header className="dock-head">
-        <button
-          type="button"
-          className="dock-collapse"
-          aria-expanded={!collapsed}
-          aria-label={collapsed ? "Expand timeline" : "Collapse timeline"}
-          onClick={() => store.setDockCollapsed(!collapsed)}
-        >
-          {collapsed ? "▴" : "▾"}
-        </button>
-        {/* The transport, on the strip it drives. The header has one too and
-            both call the same action — there is one `playing` bit, so they
-            cannot disagree, and a timeline you have to look away from to start
-            is a timeline you scrub with the keyboard instead. */}
-        <button
-          type="button"
-          className="dock-play"
-          aria-label={playing ? "Pause" : "Play"}
-          title={playing ? "Pause (Space)" : "Play (Space)"}
-          onClick={() => store.setPlaying(!playing)}
-        >
-          {playing ? "❚❚" : "▶"}
-        </button>
-        <DockTime fps={doc.fps} />
-        <span className="dock-span" data-testid="dock-span">
-          Start {timecode(0, doc.fps)} / End {timecode(total, doc.fps)}
-        </span>
-        {/* Wrapped, not passed by reference: `fit` now takes an optional
-            sceneId, and a bare handler would hand it the MouseEvent. */}
-        <button type="button" className="dock-fit" title="Fit the timeline (\)" onClick={() => fit()}>
-          Fit
-        </button>
-        {/* MONITORING, not the mix. Neither control touches the document, so
-            neither can change what an export sounds like — see
-            ShotEditorState.previewMuted. */}
-        <button
-          type="button"
-          className="dock-mute"
-          aria-label={previewMuted ? "Unmute preview" : "Mute preview"}
-          aria-pressed={previewMuted}
-          title={previewMuted ? "Preview muted" : "Mute the preview"}
-          onClick={() => store.setPreviewMuted(!previewMuted)}
-        >
-          {previewMuted ? "🔇" : "🔊"}
-        </button>
-        <input
-          className="dock-volume"
-          type="range"
-          min={0}
-          max={1}
-          step={0.01}
-          value={previewVolume}
-          aria-label="Preview volume"
-          onChange={(e) => store.setPreviewVolume(Number(e.currentTarget.value))}
-        />
-        <DockReadout total={total} />
-      </header>
+      {/* INSIDE the section, per the boundary's placement rule: a catch swaps
+          the CONTENTS for the card and the positioned container keeps its
+          place in the shell, and the stage iframe is never touched. */}
+      <PanelBoundary label="Timeline">
+        {/* A child, not a sibling: the handle drags the row it heads. Absolute
+          inside the docked cell, above the head it overlays. From the SHOWN
+          height, so a drag on a window too short for the stored one starts
+          where the author sees the edge. */}
+        {collapsed ? null : (
+          <ResizeHandle
+            axis="y"
+            getValue={() => fitShell(window.innerWidth, window.innerHeight, store.getState()).dockRow}
+            // Dragging the TOP edge upward is a DECREASING clientY and a TALLER
+            // dock, so the pointer's travel is negated.
+            sign={-1}
+            onChange={(h) => store.setDockHeight(h)}
+            // Back to untouched: the window's fitted height, which `fitShell`
+            // then sizes to the folded rows again.
+            onReset={() => store.setDockHeight(layoutFor(window.innerWidth, window.innerHeight).dockHeight)}
+            className="dock-resize"
+            label="Resize the timeline"
+          />
+        )}
+        {/* TWO CELLS ON THE SHELL'S THREE COLUMNS: the title under the left
+          column, the view and the transport across the canvas and the right
+          column. Preview monitoring is the transport's speaker, beside play;
+          levels live in the Sound tab's mixer. The head renders in every dock
+          state, so graph mode (which replaces the scroller) and a collapsed dock (body hidden)
+          keep the transport with no second copy of it. */}
+        <header className="dock-head">
+          {/* THE LEFT CELL, under the label column: the disclosure chevron and
+            the view switch on one 40px band. The panel's name is gone: the
+            switch says what this is, and the band has no room to spare. */}
+          <div className="dock-title">
+            <button
+              type="button"
+              className="btn is-icon is-ghost dock-collapse"
+              aria-expanded={!collapsed}
+              aria-label={collapsed ? "Expand timeline" : "Collapse timeline"}
+              title={collapsed ? "Expand timeline" : "Collapse timeline"}
+              onClick={() => store.setDockCollapsed(!collapsed)}
+            >
+              {collapsed ? CHEVRON_RIGHT_ICON : CHEVRON_DOWN_ICON}
+            </button>
+            {/* ROWS | GRAPH | SOUND. Faces of one subject: when it happens, how
+              it moves, and what it sounds like. A mode rather than a second
+              panel, because a curve under forty rows gets the height neither
+              can spare. */}
+            <SegmentedControl
+              className="dock-modes is-bar"
+              ariaLabel="Timeline view"
+              value={mode}
+              onChange={(m) => store.setDockMode(m === "graph" || m === "sound" ? m : "rows")}
+              options={[
+                {
+                  value: "rows",
+                  label: "Rows",
+                  title: "The rows: when everything happens",
+                  testId: "dock-mode-rows",
+                },
+                {
+                  value: "graph",
+                  label: "Graph",
+                  title: "The graph: how the focused property moves",
+                  testId: "dock-mode-graph",
+                },
+                {
+                  value: "sound",
+                  label: "Sound",
+                  title: "Sound: one row per track, with the mixer (Alt+M)",
+                  testId: "dock-mode-sound",
+                },
+              ]}
+            />
+          </div>
+          <div className={`dock-view is-${mode}`}>
+            {/* The start band: Sound mode's tempo, else empty. It keeps its
+              track either way, so the transport stays on the cell's centre. */}
+            <div className="dock-lead">{sound && def === undefined ? <TempoChip /> : null}</div>
+            {/* THE TRANSPORT, on the strip it drives, and the chrome's one play
+              button: back to the start, play, the Project's loop, the clock. */}
+            <div className="dock-transport">
+              {/* Back to the context's frame 0: the shot's first frame inside a
+                shot, the definition's inside one. It takes the clock off the
+                transport first, as a ruler press does, or the rAF loop would
+                write over the seek on its next tick. No key: Home is Fit, and
+                the up arrow already walks the edit points back to the start. */}
+              <button
+                type="button"
+                className="btn is-icon is-ghost dock-start"
+                data-testid="dock-start"
+                aria-label="Go to start"
+                title="Go to start"
+                onClick={() => {
+                  store.pauseForScrub();
+                  if (def !== undefined) store.seekDef(0);
+                  else store.seek(origin);
+                }}
+              >
+                <IconSkipStart />
+              </button>
+              {/* Play, Pause, and a queued Play's cancel, with its own
+                subscriptions (PlayButton.tsx): a play edge re-renders the
+                button, not this dock. */}
+              <PlayButton className="btn is-icon dock-play" />
+              {/* Preview monitoring: what the author HEARS, never the mix. */}
+              <TransportVolume />
+              {/* LOOP, in the Project context only: a shot and a definition
+                always loop (`playbackLoops`), so a toggle there would be a
+                switch wired to nothing. */}
+              {projectContext ? (
+                <button
+                  type="button"
+                  className="btn is-icon is-ghost dock-loop"
+                  data-testid="dock-loop"
+                  aria-pressed={loop}
+                  aria-label="Loop playback"
+                  title={loop ? "Loop: on" : "Loop: off, playback stops at the end"}
+                  onClick={() => store.setLoopPlayback(!loop)}
+                >
+                  {LOOP_ICON}
+                </button>
+              ) : null}
+              <DockTime
+                fps={doc.fps}
+                origin={origin}
+                total={projectContext ? total : null}
+                tempo={tempo}
+              />
+            </div>
+            <div className="dock-tools">
+              {sound && def === undefined ? (
+                <SoundHeadTools generateOpen={generateOpen} onGenerate={() => setGenerateOpen((v) => !v)} />
+              ) : null}
+              {/* Wrapped, not passed by reference: `fit` takes an optional
+                sceneId, and a bare handler would hand it the MouseEvent. The
+                Graph frames its own curves (CurvePane), so the head's Fit
+                steps aside there. */}
+              {mode === "graph" ? null : (
+                <button
+                  type="button"
+                  className="btn is-ghost dock-fit"
+                  title="Fit the timeline (\)"
+                  onClick={() => fit()}
+                >
+                  Fit
+                </button>
+              )}
+              {/* THE ONE CREATE, in the scene context only. A shot is APPENDED
+                and the playhead follows it (see `addScene` for why a shot cannot
+                land at the playhead). */}
+              {projectContext && !sound ? (
+                <button
+                  type="button"
+                  className="btn is-ghost dock-add-shot"
+                  data-testid="dock-add-shot"
+                  // The visible text is just "Shot" beside a hidden glyph, which
+                  // names the thing and not the verb.
+                  aria-label="Add shot"
+                  title="Add a shot at the end, and go to it"
+                  onClick={() => store.addScene()}
+                >
+                  {ADD_ICON}
+                  Shot
+                </button>
+              ) : null}
+              {/* At the far end: the zoom is about how the author is LOOKING at
+                the lane, not about the document in it. */}
+              <DockZoom onZoom={zoomTo} />
+            </div>
+          </div>
+        </header>
 
-      {/* The body is HIDDEN, not unmounted, when collapsed. Unmounting would
+        {/* The body is HIDDEN, not unmounted, when collapsed. Unmounting would
           throw away the scroll position and every row's state, and the author
-          would come back to a dock that had forgotten where they were —
+          would come back to a dock that had forgotten where they were.
           dockCollapse.test.tsx is the gate. */}
-      <div className="dock-body" hidden={collapsed} data-testid="dock-body">
-        <div className="dock-scroll" ref={scrollRef} data-testid="dock-scroll">
-          {/* INSIDE the scroller, with the same content width as the tracks.
-              It used to sit outside, and that was correct while it was a macro
-              lane over a scene-local micro one — the two never shared an x. They
-              share one now, so a strip that did not scroll with the tracks would
-              draw every scene bar somewhere its own boundary line is not. */}
-          <div style={{ minWidth: LABEL_WIDTH + timeW }}>
-            <SceneStrip ppf={ppf} labelWidth={LABEL_WIDTH} />
-          </div>
-          <div className="dock-ruler" style={{ marginLeft: LABEL_WIDTH, minWidth: timeW }}>
-            {/* MASTER frames end to end. The seek is the identity now — the two
-                clocks used to meet here, and that conversion was the one place a
-                sign error put the playhead in another scene. */}
-            <Ruler
-              durationFrames={total}
-              contentF={contentF}
-              ppf={ppf}
-              timeW={timeW}
-              formatTick={(f) => timecode(f, doc.fps)}
-              onSeek={(f) => store.seek(f)}
+        <div className={`dock-body${dockSide ? " has-side" : ""}`} hidden={collapsed} data-testid="dock-body">
+          {/* GRAPH MODE REPLACES THE WHOLE SCROLLER, ruler included, and that is
+            deliberate: `CurveGraph` draws its own ruler over CONTAINER-LOCAL
+            frames while this one draws master frames, and two rulers disagreeing
+            about what x means in one panel is worse than one ruler. */}
+          {mode === "graph" ? (
+            <CurvePane />
+          ) : (
+            <div
+              className="dock-scroll"
+              ref={scrollRef}
+              data-testid="dock-scroll"
             >
-              <DockPlayhead ppf={ppf} />
-            </Ruler>
-          </div>
+              {shotMenu.menu}
+              {/* THE CORNER IS A CHILD, NOT PADDING. `.dock-corner` is sticky-left
+                like every label cell below it, so it stays put while the lanes
+                scroll under the ruler; an absolute corner would scroll away from
+                the column it labels. Its width is the label column's, so the
+                ruler's time area starts at exactly `labelWidth`, which is what
+                the follow effect and `.dock-overlay` assume. */}
+              <div
+                className="dock-ruler"
+                style={{ minWidth: labelWidth + timeW }}
+              >
+                <div className="dock-corner" style={{ width: labelWidth }}>
+                  {/* NO `stopPropagation` on the press, deliberately: the corner is
+                  a SIBLING of `.tl-ruler`, which is where `Ruler`'s seek-and-
+                  drag handler lives, so nothing from here can reach it. */}
+                  {sound ? (
+                    <span className="dock-corner-label">Tracks</span>
+                  ) : isoLayer !== undefined ? (
+                    <span className="dock-corner-iso" data-testid="dock-corner-iso" title={isoLayer.label}>
+                      {iconFor(isoLayer)}
+                      <span className="dock-corner-label">{isoLayer.label}</span>
+                    </span>
+                  ) : cornerName !== null ? (
+                    <span className="dock-corner-label" title={cornerName}>
+                      {cornerName}
+                    </span>
+                  ) : (
+                    // THE SCENE CONTEXT'S EXPAND-ALL over the per-shot
+                    // disclosures, named for the column it opens.
+                    <button
+                      type="button"
+                      className="dock-summary"
+                      data-testid="dock-summary"
+                      aria-expanded={allOpen}
+                      title={
+                        allOpen
+                          ? "Collapse every shot"
+                          : "Expand every shot: one row per element, so a logo that survives a cut reads as the two elements it is"
+                      }
+                      onClick={() =>
+                        setOpenShots(
+                          allOpen
+                            ? new Set<string>()
+                            : new Set(groups.map((g) => g.id)),
+                        )
+                      }
+                    >
+                      {allOpen ? <IconChevronDown /> : <IconChevron />}
+                      <span>Tracks</span>
+                    </button>
+                  )}
+                </div>
+                {/* MASTER frames end to end, DEF-LOCAL frames while a definition is
+                open (the seek routes to the def-local clock, the one-time-base
+                rule), and master frames READ FROM THE SHOT'S START inside one.
+                The shot arm is a re-zero and not a second clock: the seek adds
+                `origin` straight back, so what reaches the store is the master
+                frame it has always been. */}
+                {/* THE GROW WRAPPER IS LOAD-BEARING. `.tl-ruler` sets `minWidth`
+                and no width, so as a flex item it would resolve to exactly
+                `timeW` and the strip right of the last tick — every document
+                zoomed out below the fit, and every short doc in a wide window —
+                would fall outside the element that carries the seek handler.
+                As a block child of the old padded ruler it filled the row for
+                free. `height: 100%` inside still resolves: flex items stretch,
+                so the wrapper is full height. */}
+                <div style={{ flex: "1 1 auto", minWidth: 0 }}>
+                  <DockRuler
+                    durationFrames={shotBounds?.to ?? total}
+                    boundsFrom={shotBounds?.from}
+                    markers={markerTicks}
+                    contentF={contentF}
+                    ppf={ppf}
+                    timeW={timeW}
+                    fps={doc.fps}
+                    project={projectContext}
+                    beats={beatTicks}
+                    // The work area loops the whole film, so only the Project's
+                    // ruler draws one (origin is 0 there: lane frames are master).
+                    onWorkArea={projectContext ? store.setWorkArea : undefined}
+                    onSeek={(f) => {
+                      // The ruler is a DRAG, so it takes the clock off the transport
+                      // first. Without this the rAF loop rewrites `frame` between
+                      // every move and the playhead springs back under the pointer.
+                      store.pauseForScrub();
+                      if (def !== undefined) store.seekDef(f);
+                      else store.seek(f + origin);
+                    }}
+                  >
+                    {/* BEFORE the playhead, so the line stays the topmost
+                        thing in the strip: the bracket is a region and the
+                        playhead is the one mark an author aims with. Only the
+                        RULER carries it — a second copy through the tracks
+                        would tint every bar it crossed. */}
+                    <WorkAreaBracket ppf={ppf} />
+                    <KeyStretchTabs ppf={ppf} origin={origin} />
+                    <DockPlayhead ppf={ppf} origin={origin} fps={doc.fps} head />
+                  </DockRuler>
+                </div>
+              </div>
 
-          <div className="dock-tracks" data-testid="dock-tracks" style={{ minWidth: LABEL_WIDTH + timeW }}>
-            {/* The scene boundaries, drawn THROUGH the tracks. Derived from the
+              {sound ? (
+                <SoundLanes
+                  ppf={ppf}
+                  labelWidth={labelWidth}
+                  timeW={timeW}
+                  origin={origin}
+                  window={laneWindow}
+                  beginSnap={beginSnap}
+                  grid={beatTicks ?? []}
+                  openMenu={shotMenu.open}
+                  onGenerate={() => setGenerateOpen(true)}
+                  overlay={
+                    <>
+                      {guide === null ? null : (
+                        <span
+                          className="dock-snap-guide"
+                          data-testid="snap-guide"
+                          style={{ left: frameToPx(guide - origin, ppf) }}
+                        />
+                      )}
+                      <DockPlayhead ppf={ppf} origin={origin} />
+                    </>
+                  }
+                />
+              ) : (
+              <div
+                className="dock-tracks"
+                data-testid="dock-tracks"
+                style={{ minWidth: labelWidth + timeW }}
+                // THE LAST CLAIMANT, on the container every row sits in: see
+                // `MARQUEE_LANES`. Bound here rather than on each lane so the
+                // rule is one rule, and bubble phase rather than capture so a
+                // row that stops its own press is obeyed rather than overruled.
+                onPointerDown={beginMarquee}
+                // The reveal flash is one-shot: its end hands the class back, so
+                // the next pick of the same row flashes again.
+                onAnimationEnd={(e) => {
+                  if (e.animationName === "row-revealed") setFlashed(null);
+                }}
+              >
+                {/* The scene boundaries, drawn THROUGH the tracks. Derived from the
                 same prefix sum the strip above uses, so the line and the bar it
                 divides can never be a frame apart. */}
-            <div className="dock-overlay" style={{ left: LABEL_WIDTH }} aria-hidden="true">
-              {groups.map((group) =>
-                group.start === 0 ? null : (
+                <div
+                  className="dock-overlay"
+                  style={{ left: labelWidth }}
+                  aria-hidden="true"
+                >
+                  {/* Isolation's shot range, shaded through the rows as on the
+                  ruler: a key past the shot's end is one the film never
+                  reaches, and the tint says so where the key is. */}
+                  {shotBounds === undefined || shotBounds.from <= 0 ? null : (
+                    <span
+                      className="dock-bounds-shade"
+                      style={{ left: 0, width: frameToPx(shotBounds.from, ppf) }}
+                    />
+                  )}
+                  {shotBounds === undefined ? null : (
+                    <span
+                      className="dock-bounds-shade"
+                      style={{ left: frameToPx(shotBounds.to, ppf), right: 0 }}
+                    />
+                  )}
+                  {groups.map((group) =>
+                    group.start - origin === 0 ? null : (
+                      <span
+                        key={group.id}
+                        className="dock-boundary"
+                        data-boundary={group.id}
+                        style={{ left: frameToPx(group.start - origin, ppf) }}
+                      />
+                    ),
+                  )}
+                  {/* The guide's frame is a MASTER frame (`beginSnap` freezes
+                  master targets), so it is re-zeroed for drawing like every
+                  other bar, and by the same subtraction. */}
+                  {guide === null ? null : (
+                    <span
+                      className="dock-snap-guide"
+                      data-testid="snap-guide"
+                      style={{ left: frameToPx(guide - origin, ppf) }}
+                    />
+                  )}
+                  <DockPlayhead ppf={ppf} origin={origin} />
+                  <KeyStretchGuides ppf={ppf} origin={origin} />
+                </div>
+
+                {/* THE BAND ITSELF, in this element's own content pixels, which
+                is what `beginMarquee` measures in — so it is a direct child of
+                `.dock-tracks` and not of `.dock-overlay`, whose box starts at
+                the label column. After the overlay in document order for the
+                same reason the overlay is after the rows: it is ephemeral, it
+                belongs on top of what it is about, and it takes no pointer
+                events of its own. */}
+                {marquee === null ? null : (
                   <span
-                    key={group.id}
-                    className="dock-boundary"
-                    data-boundary={group.id}
-                    style={{ left: frameToPx(group.start, ppf) }}
+                    className="dock-marquee"
+                    data-testid="dock-marquee"
+                    aria-hidden="true"
+                    style={{
+                      left: marquee.left,
+                      top: marquee.top,
+                      width: marquee.right - marquee.left,
+                      height: marquee.bottom - marquee.top,
+                    }}
                   />
-                ),
-              )}
-              {guide === null ? null : (
-                <span className="dock-snap-guide" data-testid="snap-guide" style={{ left: frameToPx(guide, ppf) }} />
-              )}
-              <DockPlayhead ppf={ppf} />
-            </div>
+                )}
 
-            {groups.map((group) => (
-              <div className="dock-scene-group" key={group.id} data-scene-group={group.id}>
-                {/* The camera is a ROW like any other, one per scene at its own
+                <TimelineWindow
+                  items={groups}
+                  heights={groupHeights}
+                  threshold={TIMELINE_GROUP_WINDOW_THRESHOLD}
+                  keyOf={(group) => group.id}
+                  testId="timeline-group-window"
+                >
+                  {(group, groupIndex) => (
+                    <div
+                      className={`dock-scene-group${groupIndex === 0 ? "" : " has-separator"}`}
+                      key={group.id}
+                      data-scene-group={group.id}
+                    >
+                      {/* THE SHOT ITSELF, as the group's first row. One drawing of the
+                    document's coarsest structure, carrying every verb the scene
+                    strip used to own. A DEFINITION is not a shot and has none.
+                    Nor does isolation, nor its camera, channels or sound: the
+                    group there is the isolated object alone (`isoGroup`). */}
+                      {def !== undefined || isoGroup !== undefined ? null : (
+                        <ShotRow
+                          id={group.id}
+                          name={group.name}
+                          start={group.start}
+                          end={group.end}
+                          // The index into `doc.scenes`, which is what `reorderScene`
+                          // splices, NOT the index into `groups`, which is a single
+                          // entry inside a shot.
+                          index={doc.scenes.indexOf(group.id)}
+                          isLast={
+                            doc.scenes[doc.scenes.length - 1] === group.id
+                          }
+                          blendFrames={
+                            doc.scenesById[group.id]?.transition
+                              ?.durationFrames ?? null
+                          }
+                          ppf={ppf}
+                          labelWidth={labelWidth}
+                          originFrames={origin}
+                          // The layers fold into the shot's row in every
+                          // context: a shot's first look is Shot, Camera, Sound.
+                          expandable
+                          expanded={rowsShown(group.id)}
+                          layerCount={group.rows.length}
+                          onToggle={() =>
+                            setOpenShots((was) => {
+                              const next = new Set(was);
+                              if (!next.delete(group.id)) next.add(group.id);
+                              return next;
+                            })
+                          }
+                          openMenu={shotMenu.open}
+                          beginSnap={beginSnap}
+                        />
+                      )}
+                      {/* The camera is a ROW like any other, one per scene at its own
                     master position, so a camera move trims and retimes with the
-                    same gestures a block does. */}
-                <BlockRow
-                  label="Camera"
-                  sceneId={group.id}
-                  layerId={CAMERA_ROW_ID}
-                  depth={0}
-                  bars={group.camera}
-                  ppf={ppf}
-                  labelWidth={LABEL_WIDTH}
-                  offsetFrames={group.start}
-                  beginSnap={beginSnap}
-                  // The same action ⇧C runs. A camera move has no preset to
-                  // pick, so unlike a layer's blocks it can be created from the
-                  // row; the scene is passed so a row that is not under the
-                  // playhead is refused by name rather than writing somewhere else.
-                  onAdd={() => store.addShotAtPlayhead(group.id)}
-                  addLabel="+ move"
-                />
-                {group.rows.map((row) => (
-                  <Fragment key={row.layerId}>
-                    <LifespanRow
-                      row={row}
-                      sceneId={group.id}
-                      sceneStart={group.start}
-                      ppf={ppf}
-                      labelWidth={LABEL_WIDTH}
-                      expanded={open.has(row.layerId)}
-                      onToggle={() =>
-                        setOpen((was) => {
-                          const next = new Set(was);
-                          if (!next.delete(row.layerId)) next.add(row.layerId);
-                          return next;
-                        })
-                      }
-                      beginSnap={beginSnap}
-                    />
-                    {/* The Figma/Lottie read: one derived row per channel the
-                        blocks write, diamonds at each block's ends. The
-                        preset-named block lane is gone from the expansion —
-                        the preset lives in the span tooltip and the Animate
-                        tab. See ChannelRow.tsx. */}
-                    {open.has(row.layerId) &&
-                      (() => {
-                        const layer = doc.scenesById[group.id]?.layersById[row.layerId];
-                        return layer === undefined ? null : (
-                          <ChannelRows
-                            layer={layer}
-                            sceneId={group.id}
-                            depth={row.depth + 1}
-                            ppf={ppf}
-                            labelWidth={LABEL_WIDTH}
-                            offsetFrames={group.start}
-                            fps={doc.fps}
-                            lifespan={row.lifespan}
-                            beginSnap={beginSnap}
-                          />
-                        );
-                      })()}
-                  </Fragment>
-                ))}
-              </div>
-            ))}
+                    same gestures a lifespan does. A DEFINITION has no camera.
+                    BEHIND THE SHOT'S OWN DISCLOSURE, like every other row in the
+                    group: a collapsed shot is exactly one row, or "collapsed"
+                    would mean "collapsed except for two". */}
+                      {!cameraShown(group.id) ? null : (
+                        <BlockRow
+                          label="Camera"
+                          sceneId={group.id}
+                          bars={group.camera}
+                          ppf={ppf}
+                          labelWidth={labelWidth}
+                          offsetFrames={group.start}
+                          originFrames={origin}
+                          beginSnap={beginSnap}
+                          // The camera's POSES, drawn over its bars (P4). Read-only:
+                          // a camera pose lives in `shot.from`/`shot.to`, which is the
+                          // inspector's subject, or in a path's waypoints, which only
+                          // the agent can replace. So there is nothing under a
+                          // mark for a drag to write to.
+                          marks={group.cameraKeys}
+                          // The same action ⇧C runs. The scene is passed so a row
+                          // that is not under the playhead is refused by name rather
+                          // than writing somewhere else.
+                          onAdd={() => store.addShotAtPlayhead(group.id)}
+                        />
+                      )}
+                      {/* The SHOT's own keyframed properties (P5): its background and
+                    its post stack. Directly under the camera, because that is
+                    the order the picture is made in — the scene, the camera
+                    looking at it, then what happens to the frame after — and it
+                    is the same order the inspector's sections sit in.
+                    A DEFINITION has neither a background nor a post stack. */}
+                      {def !== undefined || isoGroup !== undefined || !rowsShown(group.id) ? null : (
+                        <SceneChannelRows
+                          scene={doc.scenesById[group.id]!}
+                          depth={0}
+                          ppf={ppf}
+                          labelWidth={labelWidth}
+                          offsetFrames={group.start}
+                          originFrames={origin}
+                          fps={doc.fps}
+                          beginSnap={beginSnap}
+                        />
+                      )}
+                      <TimelineWindow
+                        items={rowsShown(group.id) ? group.rows : []}
+                        heights={layerHeights.get(group.id) ?? []}
+                        threshold={TIMELINE_LAYER_WINDOW_THRESHOLD}
+                        keyOf={(row) => row.layerId}
+                        testId={`timeline-layer-window-${group.id}`}
+                      >
+                        {(row) => {
+                          // The container this row's layer actually lives in: the
+                          // group id is a scene OR the open definition, and homeOf
+                          // reads both through one shape.
+                          const rowLayer = (def ?? doc.scenesById[group.id])
+                            ?.layersById[row.layerId];
+                          // The mask marks read the run, so they need the
+                          // container's top list as well as its layers.
+                          const maskHome = homeOf(doc, group.id);
+                          // THE SUMMARY DOES NOT EXPAND. In the scene context a row is
+                          // a note that this element exists in this shot; its channels
+                          // are what the shot context is for, and drawing
+                          // them here would put a property lane under a ruler that
+                          // spans the whole video.
+                          const expandable =
+                            shotGroup !== undefined || def !== undefined || isoGroup !== undefined;
+                          const expanded = expandable && open.has(row.layerId);
+                          return (
+                            <Fragment key={row.layerId}>
+                              <LifespanRow
+                                row={row}
+                                layer={rowLayer}
+                                mask={maskHome === null ? undefined : maskMarksOf(maskHome, row.layerId, row.depth)}
+                                sceneId={group.id}
+                                sceneStart={group.start}
+                                originFrames={origin}
+                                ppf={ppf}
+                                // A clip row cuts its strip and its peaks on
+                                // the container's own rate. Every other row
+                                // ignores it.
+                                fps={doc.fps}
+                                labelWidth={labelWidth}
+                                laneW={timeW}
+                                expanded={expanded}
+                                revealed={flashed === row.layerId}
+                                onToggle={() =>
+                                  expandable
+                                    ? setOpen((was) => {
+                                        const next = new Set(was);
+                                        if (!next.delete(row.layerId))
+                                          next.add(row.layerId);
+                                        return next;
+                                      })
+                                    : // The disclosure IS the way in from the summary:
+                                      // "show me this element's animation" and "open the
+                                      // shot it is in" are the same request.
+                                      store.enterScene(group.id)
+                                }
+                                beginSnap={beginSnap}
+                              />
+                              {/* The Figma/Lottie read: one row per keyframed
+                          property, diamonds at each key. See ChannelRow.tsx. */}
+                              {expanded && rowLayer !== undefined && (
+                                <ChannelRows
+                                  layer={rowLayer}
+                                  sceneId={group.id}
+                                  depth={row.depth + 1}
+                                  ppf={ppf}
+                                  labelWidth={labelWidth}
+                                  offsetFrames={group.start}
+                                  originFrames={origin}
+                                  fps={doc.fps}
+                                  beginSnap={beginSnap}
+                                />
+                              )}
+                            </Fragment>
+                          );
+                        }}
+                      </TimelineWindow>
+                      {/* THE SHOT'S OWN AUDIO, last in the group: video above, audio
+                    below, the same order the master bed keeps at the bottom of
+                    the dock. Over the Project it draws only when the shot has
+                    some (see the note in SceneAudioRow); inside a shot it is
+                    also the empty drop box for the shot's own audio, and the
+                    only audio row unless a bed overlaps the shot (the master
+                    lane steps aside then, see AudioLane).
+                    A definition has no master position and no audio at all,
+                    which is why it is gated on `def` like the two master lanes
+                    are. `groupHeights` counts the row on the same predicate. */}
+                      {def === undefined && isoGroup === undefined && (shotGroup !== undefined || rowsShown(group.id)) ? (
+                        <SceneAudioRow
+                          sceneId={group.id}
+                          ppf={ppf}
+                          labelWidth={labelWidth}
+                          offsetFrames={group.start}
+                          originFrames={origin}
+                          beginSnap={beginSnap}
+                          empty={shotGroup !== undefined}
+                        />
+                      ) : null}
+                    </div>
+                  )}
+                </TimelineWindow>
 
-            {/* UNDER the video and OVER the audio, which is where every NLE
+                {/* UNDER the video and OVER the audio, which is where every NLE
                 puts the two. Both are outside the scene groups, and
                 deliberately: `doc.audio` and `doc.markers` are MASTER-timed and
                 belong to no scene, so a lane nested in one would be drawing a
-                lie. The marks sit directly over the waveform because they are
-                almost always beats in it. */}
-            <MarkerLane ppf={ppf} labelWidth={LABEL_WIDTH} beginSnap={beginSnap} />
-            <AudioLane ppf={ppf} labelWidth={LABEL_WIDTH} beginSnap={beginSnap} />
-          </div>
+                lie. THE SHOT CONTEXT KEEPS THEM — re-zeroed and clipped to its
+                window, never pruned the way the component context prunes them.
+                A definition has no master position at all; a shot is a window
+                OF master time, and cutting to the beat inside one is the
+                deliverable this tool exists for. The marks sit directly over the waveform because they are
+                almost always beats in it. The marker lane is drawn once it has
+                had content; the audio lane always is over the Project (see
+                `laneShown`), and inside a shot whenever a bed overlaps it.
+                ISOLATION HIDES BOTH: it is about one object, and the markers
+                stay on the ruler as ticks (`markerTicks`). */}
+                {laneShown.current.marker && def === undefined && isoGroup === undefined ? (
+                  <MarkerLane
+                    ppf={ppf}
+                    labelWidth={labelWidth}
+                    beginSnap={beginSnap}
+                    shotWindow={laneWindow}
+                  />
+                ) : null}
+                {def === undefined && isoGroup === undefined ? (
+                  <AudioLane
+                    ppf={ppf}
+                    labelWidth={labelWidth}
+                    beginSnap={beginSnap}
+                    shotWindow={laneWindow}
+                  />
+                ) : null}
+              </div>
+              )}
+            </div>
+          )}
         </div>
-      </div>
+        {/* OUTSIDE `.dock-scroll`, so every clientWidth reader above (fit,
+          follow, zoomTo, the filmstrip viewport) still measures the lane and
+          nothing else. Not mounted while collapsed: the row has no room to
+          draw it, and an unmounted meter releases its tap. Sound mode only:
+          the mixer is the one home for levels, so Rows and Graph give the
+          lane the right column too (`dockSide` on `.dock-body`). */}
+        {dockSide ? (
+          generateOpen ? (
+            <GenerateDrawer onClose={() => setGenerateOpen(false)} />
+          ) : (
+            <SoundMixer />
+          )
+        ) : null}
+      </PanelBoundary>
     </section>
   );
 }