@dailies-studio/shot-editor 0.1.0 → 0.2.0

package/src/panels/inspector/animate/ShotSection.tsx

@@ -1,43 +1,128 @@
 // One camera move: what kind it is, how it eases, and where it starts and ends.
-// The Animate tab's subject whenever the focused bar is on the CAMERA row.
+// The inspector's focused-object slot whenever a bar on the CAMERA row is
+// focused.
 //
-// ── WHY THIS PANEL IS PLAIN FIELDS AND THE SCENE'S CAMERA IS NOT ────────
+// ── WHY THIS PANEL WRITES STRAIGHT THROUGH AND THE SCENE'S CAMERA DOES NOT ─
 //
 // `scene.camera` is invisible from the first shot's start onwards, which is why
 // CameraSection has to read effective, write base and refuse. A SHOT has no
 // such hazard: `from` and `to` are exactly what `cameraAt` interpolates between
 // at this shot's own frames, so writing either is visible the moment the
 // playhead is inside the move. Two truths, one of them safe, and the difference
-// is worth stating because the two panels look alike and are not.
+// is worth stating because the two panels draw the same rows (`FramingRows`)
+// and are not the same write.
 //
 // The "set from current framing" buttons are the bridge back. They take what is
 // on screen at the playhead (`cameraAt`, the same read every other surface
 // makes) and write it into one end, so an author who framed a pose by dragging
 // the frustum keeps it without retyping five numbers.
-import { InspectorRow, InspectorSection, SegmentedControl } from "@dailies-studio/ui";
-import { cameraAt } from "@dailies-studio/shot/doc";
-import type { Framing, MoveShot } from "@dailies-studio/shot/doc";
+import { useMemo } from "react";
+import {
+  Combobox,
+  IconMinus,
+  IconPlus,
+  InspectorRow,
+  InspectorSection,
+  NumberField,
+  SegmentedControl,
+  Toggle,
+  useLocked,
+  wordOptions,
+} from "@dailies-studio/ui";
+import { DEFAULT_SHOT_FPS, MAX_SHAKE_PX, MAX_SHAKE_ROLL_DEG, MAX_SPLINE_ANGLE_DEG, MIN_PATH_WAYPOINTS, MAX_TRACK_MARGIN, MAX_TRACK_SMOOTH_FRAMES, MIN_SHAKE_FREQ_HZ, SPLINE_DOMAINS, TRACK_FITS, containerFrame, isZoomRigBreak, steadyCameraAt, maxShakeFreqHz, meshPrimitiveOf } from "@dailies-studio/shot/doc";
+import type { Framing, MoveShot, Scene3D, Shot, SplineDomain, SplineShot, TrackShot } from "@dailies-studio/shot/doc";
+import type { ShotEditorStore } from "../../../state/store.js";
 import { useShotEditor, useStore } from "../../../state/context.js";
-import { CAMERA_ROW_ID } from "../../timeline/model.js";
 import { FramingRows } from "../FramingRows.js";
-import { sceneLocalFrame, useInspectorFrame } from "../useDocWrite.js";
-import { EaseControl } from "./BlockTiming.js";
+import type { FramingScrub } from "../FramingRows.js";
+import { useInspectorFrame } from "../useDocWrite.js";
+import { EaseControl } from "./EaseControl.js";
+import { cameraSplineSourceIsSafe } from "../../../state/splineRefs.js";
 
-const KINDS = [
-  { value: "dolly", label: "Dolly" },
-  { value: "zoom", label: "Zoom" },
-];
+/**
+ * A DRAGGED field of this panel, as one undo entry: the panel scrub around
+ * the move verb it writes through. Every verb here (`setShotFraming`,
+ * `setShotWaypoint`, `setTrackShot`, `setShotShake`, `setSplineShot`) captures
+ * into an open panel scrub and edits once otherwise (store.ts), so a drag
+ * moves the camera on the stage under the pointer and a typed value is one
+ * plain edit, through the same write.
+ */
+function dragThrough<T>(store: ShotEditorStore, write: (value: T) => void) {
+  return {
+    onScrubStart: () => store.beginScrub(),
+    onScrub: write,
+    onScrubEnd: (commit: boolean) => store.endScrub(commit),
+  };
+}
+
+/** A pose's fields as a `FramingScrub` over one move verb, `dragThrough`'s
+ *  bracket in the shape `FramingRows` drives. */
+function poseScrub(store: ShotEditorStore, write: (patch: Partial<Framing>) => void): FramingScrub {
+  return {
+    start: () => store.beginScrub(),
+    move: write,
+    end: (commit) => store.endScrub(commit),
+    commit: write,
+  };
+}
+
+// PATH IS IN THE CONTROL NOW. It used to be absent with the reason stated in
+// the panel — "authored by an agent" — because converting a two-pose move into
+// a path would have produced something this chrome had no editor for. It has
+// one below, so the refusal was retired with the gap that justified it.
+//
+// SPLINE stays out: its poses are sampled off a scene layer's geometry, so
+// there are no authored framings to carry into it. Its door is the explicit
+// "Camera rail" combobox, which names the layer.
+//
+// `satisfies readonly Shot["kind"][]` is what keeps this a DELIBERATE subset
+// rather than a stale one: it cannot list a kind the schema does not have, so
+// renaming one in `types.ts` fails here instead of leaving a segment that
+// writes a value nothing accepts. It deliberately does NOT check the other
+// direction, because the two absences above are the point.
+const KINDS = ["dolly", "zoom", "path"] as const satisfies readonly Shot["kind"][];
+
+/** The segments, labelled by capitalising the kind: the schema's kind names are
+ *  already the words the control shows, so a fourth offered kind needs no
+ *  second edit to get a label. */
+const KIND_OPTIONS = wordOptions(KINDS);
+
+/** The track fits, capitalised the same way and off the schema's own list, so
+ *  a third fit reaches this control without a second edit. */
+const FIT_OPTIONS = wordOptions(TRACK_FITS);
 
 export function ShotSection() {
   const store = useStore();
   const doc = useShotEditor((s) => s.doc);
-  const focused = useShotEditor((s) => s.selectedBlock);
+  const focused = useShotEditor((s) => s.selectedMove);
   const { sceneId, sceneFrame } = useInspectorFrame();
-  if (doc === null || sceneId === null || focused === null || focused.layerId !== CAMERA_ROW_ID) {
+  // A VIEWER'S PANEL LOCKS EVERY VERB THAT WRITES. `LockedControls` reaches
+  // the widgets; this panel's buttons are plain ones, so each reads the lock.
+  const locked = useLocked();
+  const scene = doc === null || sceneId === null ? undefined : doc.scenesById[sceneId];
+  const frameHeight = doc?.size.height;
+  // Memoised on the scene: the section repaints on every document identity
+  // change (once per rAF frame of any drag), and this walked every layer of the
+  // scene through `cameraSplineSourceIsSafe` each time. Above the early return
+  // because it is a hook.
+  const splineOptions = useMemo(
+    () =>
+      scene === undefined || frameHeight === undefined
+        ? []
+        : Object.values(scene.layersById)
+            .filter(
+              (layer) =>
+                layer.kind === "mesh" &&
+                meshPrimitiveOf(layer.mesh)?.kind === "spline" &&
+                cameraSplineSourceIsSafe(scene, layer.id, frameHeight),
+            )
+            .map((layer) => ({ value: layer.id, label: layer.label })),
+    [scene, frameHeight],
+  );
+  if (doc === null || sceneId === null || focused === null || focused.sceneId !== sceneId) {
     return null;
   }
-  const scene = doc.scenesById[sceneId];
-  const shot = scene?.shots.find((s) => s.id === focused.blockId);
+  const shot = scene?.shots.find((s) => s.id === focused.shotId);
   if (scene === undefined || shot === undefined) return null;
 
   // LIVE state at the click, never the hook's coalesced frame: the hook holds
@@ -45,43 +130,115 @@ export function ShotSection() {
   // framing" means the framing on SCREEN — writing the held frame's pose puts
   // a camera the author never saw into the document. Same rule as
   // useTransformWrite.
+  //
+  // STEADY, never the shaken `cameraAt`: this feeds the "set from current
+  // framing" buttons, which WRITE the pose into the document. Through the shaken
+  // read they would store one arbitrary sample of a sine sum as an authored
+  // pose, after which the shake applies on top of itself.
   const onScreen = (): Framing => {
     const s = store.getState();
-    if (s.doc === null || s.sceneId === null) return cameraAt(scene, sceneFrame, doc.fps);
+    if (s.doc === null || s.sceneId === null) return steadyCameraAt(scene, sceneFrame, doc.fps, doc.size);
     const liveScene = s.doc.scenesById[s.sceneId] ?? scene;
-    return cameraAt(liveScene, sceneLocalFrame(s.doc, s.sceneId, s.frame), s.doc.fps);
+    return steadyCameraAt(liveScene, containerFrame(s.doc, s.sceneId, s.frame), s.doc.fps, s.doc.size);
   };
-
   return (
-    <InspectorSection title="Camera move" persistKey="shot:animate:shot" collapsible={false}>
+    <InspectorSection className="insp-object" title="Camera move" persistKey="shot:animate:shot" collapsible={false}>
       {shot.kind === "path" ? (
-        // A path is authored by an agent, through `waypoints`. Offering it in
-        // the segmented control would mean converting a two-pose move into one
-        // with nothing to edit it with, so this chrome READS a path and refuses
-        // to half-edit it. The count is the one number that says which move
-        // this is.
-        <span className="insp-dim">
-          {`A camera path through ${shot.waypoints.length} waypoints, curved with a centripetal spline. ` +
-            `Its ends are the first and last waypoint. Edit it through the agent.`}
-        </span>
+        <>
+          <InspectorRow label="Kind">
+            <SegmentedControl
+              ariaLabel="Move kind"
+              value={shot.kind}
+              options={KIND_OPTIONS}
+              onChange={(next) => store.setShotKind(shot.id, next as MoveShot["kind"])}
+            />
+          </InspectorRow>
+          <p className="insp-note">
+            {`A camera path through ${shot.waypoints.length} waypoints, curved with a centripetal spline. ` +
+              `Its ends are the first and last waypoint.`}
+          </p>
+          {/* ── ONE GROUP PER WAYPOINT ────────────────────────────────────
+              The same `FramingRows` the two-pose ends use, so a pose is
+              edited the same way wherever it lives, plus the same "set from
+              current framing" button — which is what makes a path authorable
+              without a stage grip: park the camera, then press it. */}
+          {shot.waypoints.map((framing, index) => (
+            <WaypointGroup
+              key={index}
+              shotId={shot.id}
+              index={index}
+              framing={framing}
+              count={shot.waypoints.length}
+              read={onScreen}
+            />
+          ))}
+        </>
+      ) : shot.kind === "track" ? (
+        <TrackShotRows shot={shot} scene={scene} />
+      ) : shot.kind === "spline" ? (
+        <SplineShotRows shot={shot} options={splineOptions} />
       ) : (
         <>
           <InspectorRow label="Kind">
             <SegmentedControl
               ariaLabel="Move kind"
               value={shot.kind}
-              options={KINDS}
+              options={KIND_OPTIONS}
               onChange={(next) => store.setShotKind(shot.id, next as MoveShot["kind"])}
             />
           </InspectorRow>
+          <InspectorRow label="Camera rail">
+            <Combobox
+              options={splineOptions}
+              value=""
+              ariaLabel="Convert move to spline"
+              placeholder={splineOptions.length === 0 ? "No valid scene spline" : "Choose spline"}
+              onChange={(spline) => store.convertShotToSpline(shot.id, spline)}
+            />
+          </InspectorRow>
+          {splineOptions.length === 0 ? (
+            <p className="insp-note">A camera rail cannot be below a cloner, and its authored base centreline must stay inside the safe camera distance range.</p>
+          ) : (
+            <p className="insp-note">Choosing a rail explicitly replaces this move&apos;s x, y and zoom with spline progress from 0 to 1.</p>
+          )}
           {/* The one line that makes the choice a choice. Both read as "get
               closer"; only one of them moves the camera through the scene, and
               a layer at a depth is the only place the difference shows. */}
-          <span className="insp-dim">
+          <p className="insp-note">
             {shot.kind === "dolly"
               ? "Dolly derives the distance from the live zoom, so the camera moves and layers at different depths shift against each other."
               : "Zoom pins the distance at the move's start and narrows the lens instead, so nothing shifts."}
-          </span>
+          </p>
+          {/* ── AND WHAT THE PIN COSTS ON THE WAY OUT ─────────────────────
+              FIXED IN v18 — the fov became a held channel that carries the
+              pinned distance across the exit — so this only appears on a scene
+              still carrying `legacyZoomRig`, which every document authored
+              before the fix does until someone presses Upgrade. The advice is
+              no longer "work around it" but "take the fix", because there now
+              is one. The fix is a 28px button row of its own under the warning,
+              like every verb in this panel: inside the notice it was the 32px
+              house button in a section whose every other control is 28. */}
+          {scene.legacyZoomRig === true && isZoomRigBreak(shot) ? (
+            <>
+              <div className="insp-notice is-warn" data-testid="legacy-rig-notice">
+                {`This scene is on the old camera rig, where the distance pin ends WITH the move: at frame ` +
+                  `${shot.frame + Math.max(1, Math.trunc(shot.durationFrames))} the distance and lens snap back, ` +
+                  `so anything off the z=0 plane pops one frame.`}
+              </div>
+              <InspectorRow>
+                <div className="insp-buttons">
+                  <button
+                    type="button"
+                    className="btn"
+                    disabled={locked}
+                    onClick={() => store.upgradeCameraRig(sceneId)}
+                  >
+                    Upgrade this shot&apos;s camera
+                  </button>
+                </div>
+              </InspectorRow>
+            </>
+          ) : null}
         </>
       )}
 
@@ -92,35 +249,392 @@ export function ShotSection() {
         onScrub={(ease) => store.setShotEase(shot.id, ease)}
       />
 
-      {shot.kind === "path" ? null : (
+      <ShakeRows shot={shot} />
+
+      {shot.kind === "dolly" || shot.kind === "zoom" ? (
         <>
           <FramingGroup shot={shot} end="from" title="From" read={onScreen} />
           <FramingGroup shot={shot} end="to" title="To" read={onScreen} />
         </>
-      )}
+      ) : null}
     </InspectorSection>
   );
 }
 
+/**
+ * A FOLLOW: which layers, how tight, and how much it smooths.
+ *
+ * No `from`/`to` rows, because there are none — the framing is derived from the
+ * targets on every frame. What this panel offers instead is the two things the
+ * derivation reads (targets and margin), the two that shape it (fit and
+ * smoothing), and the one way out (bake).
+ */
+function TrackShotRows({ shot, scene }: { shot: TrackShot; scene: Scene3D }) {
+  const store = useStore();
+  const selection = useShotEditor((s) => s.selection);
+  const locked = useLocked();
+  const labels = shot.targets.map((id) => scene.layersById[id]?.label ?? id);
+  const followed = labels.length === 0 ? "nothing" : labels.join(", ");
+  return (
+    <>
+      {/* A READOUT of names: the house readout's box (no hover, nothing to
+          type into), the names as words (`.is-text`) in the row's sans face
+          rather than the numeral face a number takes, on one line. The whole
+          list is the tooltip, for when it ellipsizes. */}
+      <InspectorRow label="Following" className="insp-readout">
+        <span className="insp-dim is-text" title={followed}>
+          {followed}
+        </span>
+      </InspectorRow>
+      <InspectorRow>
+        {/* THE SELECTION IS THE EDITOR. A layer picker here would be a second
+            outline in a 280px column; the outline is already on screen and
+            already the way this chrome names layers. */}
+        <div className="insp-buttons">
+          <button
+            type="button"
+            className="btn"
+            data-testid="track-set-targets"
+            disabled={locked || selection.length === 0}
+            title={
+              selection.length === 0
+                ? "Select the layers in the outline first"
+                : "Follow the selected layers instead"
+            }
+            onClick={() => store.setTrackShot(shot.id, { targets: [...selection] })}
+          >
+            Follow selection
+          </button>
+          <button
+            type="button"
+            className="btn"
+            data-testid="track-bake"
+            title="Write the framings this follow derived into a plain dolly. The camera stops following."
+            disabled={locked}
+            onClick={() => store.bakeTrackShot(shot.id)}
+          >
+            Bake to dolly
+          </button>
+        </div>
+      </InspectorRow>
+      <InspectorRow label="Fit">
+        <SegmentedControl
+          ariaLabel="Track fit"
+          value={shot.fit}
+          options={FIT_OPTIONS}
+          onChange={(fit) => store.setTrackShot(shot.id, { fit: fit as TrackShot["fit"] })}
+        />
+      </InspectorRow>
+      <p className="insp-note">
+        {shot.fit === "frame"
+          ? "Frame derives x, y and zoom, so the targets keep filling the frame as they move or resize."
+          : "Position derives x and y only and keeps the zoom the camera arrived with, so a follow does not pump."}
+      </p>
+      {/* AN UNLABELLED PAIR, each box naming itself: a "Margin" pill holding
+          fields named Margin and Smooth printed Margin twice and nested two
+          boxes in a third. */}
+      <InspectorRow>
+        <div className="insp-vec">
+          <NumberField
+            value={shot.margin}
+            label="Margin"
+            ariaLabel="Track margin"
+            min={0}
+            max={MAX_TRACK_MARGIN}
+            step={0.01}
+            {...dragThrough(store, (margin: number) => store.setTrackShot(shot.id, { margin }))}
+            onCommit={(margin) => store.setTrackShot(shot.id, { margin })}
+          />
+          <NumberField
+            value={shot.smoothFrames ?? 0}
+            label="Smooth"
+            ariaLabel="Track smoothing"
+            unit="f"
+            min={0}
+            max={MAX_TRACK_SMOOTH_FRAMES}
+            step={1}
+            {...dragThrough(store, (smoothFrames: number) => store.setTrackShot(shot.id, { smoothFrames }))}
+            onCommit={(smoothFrames) => store.setTrackShot(shot.id, { smoothFrames })}
+          />
+        </div>
+      </InspectorRow>
+      {/* SAID, NOT HIDDEN. The fit is 2D, so a target off the design plane is
+          framed by its authored size rather than its apparent one. `validate`
+          carries the same sentence as a warning. */}
+      {shot.targets.some((id) => (scene.layersById[id]?.transform.position[2] ?? 0) !== 0) ? (
+        <div className="insp-notice">
+          A target sits off the design plane, and the fit uses each layer&apos;s authored size rather
+          than its apparent one, so the framing is close but not exact for it.
+        </div>
+      ) : null}
+    </>
+  );
+}
+
+/**
+ * HANDHELD SHAKE.
+ *
+ * One switch row and three numbers, and the switch is the whole of "is there
+ * shake": the document says so by carrying the field or not, and there is no
+ * second way (a zeroed amplitude) to mean the same thing. See `CameraShake`.
+ * It is the house `Toggle`, like every other boolean in the inspector; it was
+ * a bare native checkbox.
+ *
+ * A REROLL rather than a seed field. The seed is an integer whose only job is
+ * to be different, so a control that asks the author to pick one is asking a
+ * question with no good answer; the button steps it and the number rides along
+ * for anyone who wants to write it down. Stepping rather than randomising, so
+ * pressing it twice from the same document lands on the same place.
+ *
+ * Every number is a box of its own in an unlabelled row: an "Amount" pill
+ * around Amp and Roll, and a "Rate" pill around Freq and a 32px button, nested
+ * boxes in boxes and made those rows 34px.
+ */
+function ShakeRows({ shot }: { shot: Shot }) {
+  const store = useStore();
+  // `DEFAULT_SHOT_FPS` and not a literal: the fallback is the timebase a fresh
+  // document is CREATED at, so a rehome of that value must move this with it.
+  // A module constant is also Object.is-stable, which a fallback minted inside
+  // the selector is not.
+  const fps = useShotEditor((s) => s.doc?.fps ?? DEFAULT_SHOT_FPS);
+  const locked = useLocked();
+  const shake = shot.shake;
+  const ceiling = maxShakeFreqHz(fps);
+  const patch = (next: Partial<NonNullable<Shot["shake"]>>): void => store.setShotShake(shot.id, next);
+  return (
+    <>
+      <InspectorRow label="Shake">
+        <Toggle
+          checked={shake !== undefined}
+          ariaLabel="Camera shake"
+          onChange={(on) => store.setShotShake(shot.id, on ? {} : null)}
+        />
+      </InspectorRow>
+      {shake === undefined ? null : (
+        <>
+          <InspectorRow>
+            <div className="insp-vec">
+              <NumberField
+                value={shake.ampPx}
+                label="Amp"
+                ariaLabel="Amp, shake amplitude"
+                unit="px"
+                min={0}
+                max={MAX_SHAKE_PX}
+                step={1}
+                {...dragThrough(store, (ampPx: number) => patch({ ampPx }))}
+                onCommit={(ampPx) => patch({ ampPx })}
+              />
+              <NumberField
+                value={shake.rollDeg ?? 0}
+                label="Roll"
+                ariaLabel="Roll, shake"
+                unit="°"
+                min={0}
+                max={MAX_SHAKE_ROLL_DEG}
+                step={0.5}
+                {...dragThrough(store, (rollDeg: number) => patch({ rollDeg }))}
+                onCommit={(rollDeg) => patch({ rollDeg })}
+              />
+            </div>
+          </InspectorRow>
+          <InspectorRow>
+            <NumberField
+              value={shake.freqHz}
+              label="Freq"
+              ariaLabel="Freq, shake frequency"
+              unit="Hz"
+              min={MIN_SHAKE_FREQ_HZ}
+              max={ceiling}
+              step={0.1}
+              {...dragThrough(store, (freqHz: number) => patch({ freqHz }))}
+              onCommit={(freqHz) => patch({ freqHz })}
+            />
+          </InspectorRow>
+          <InspectorRow>
+            <div className="insp-buttons">
+              <button
+                type="button"
+                className="btn"
+                data-testid="shake-reroll"
+                title={`Try another shake. The top octave runs at ${(ceiling * 4).toFixed(1)} Hz, which is this document's frame rate halved. Above it the shake aliases.`}
+                disabled={locked}
+                onClick={() => patch({ seed: shake.seed + 1 })}
+              >
+                Reroll {shake.seed}
+              </button>
+            </div>
+          </InspectorRow>
+        </>
+      )}
+    </>
+  );
+}
+
+function SplineShotRows({ shot, options }: { shot: SplineShot; options: Array<{ value: string; label: string }> }) {
+  const store = useStore();
+  const choices = options.some((option) => option.value === shot.spline)
+    ? options
+    : [{ value: shot.spline, label: shot.spline }, ...options];
+  return (
+    <>
+      <InspectorRow label="Spline">
+        <Combobox options={choices} value={shot.spline} ariaLabel="Camera spline" placeholder="Choose spline" onChange={(spline) => store.setSplineShot(shot.id, { spline })} />
+      </InspectorRow>
+      <InspectorRow label="Domain">
+        <SegmentedControl ariaLabel="Camera spline domain" value={shot.domain ?? "full"} options={wordOptions(SPLINE_DOMAINS)} onChange={(domain) => store.setSplineShot(shot.id, { domain: domain as SplineDomain })} />
+      </InspectorRow>
+      <SplineEndpointRows shot={shot} end="from" label="From" />
+      <SplineEndpointRows shot={shot} end="to" label="To" />
+    </>
+  );
+}
+
+/** One end of a camera rail: where along the spline it sits, and how it is
+ *  held there. Under its own heading, like a two-pose move's From and To, so
+ *  each box names its field with one word ("Progress", "Roll", "Focus") and
+ *  its accessible name says which end after that word ("Progress, From"),
+ *  as a two-pose move's fields do (FramingRows). */
+function SplineEndpointRows({ shot, end, label }: { shot: SplineShot; end: "from" | "to"; label: string }) {
+  const store = useStore();
+  const endpoint = shot[end];
+  // The endpoint as drawn, with the one field a box moves. A drag keeps the
+  // other two as they are, and each move names its absolute value, so the
+  // scrub's capture never compounds.
+  const patch = (next: Partial<SplineShot[typeof end]>): void =>
+    store.setSplineShot(shot.id, { [end]: { ...endpoint, ...next } });
+  return (
+    <>
+      <div className="insp-heading">{label}</div>
+      <InspectorRow>
+        <NumberField
+          value={endpoint.progress}
+          label="Progress"
+          ariaLabel={`Progress, ${label}`}
+          step={0.01}
+          {...dragThrough(store, (progress: number) => patch({ progress }))}
+          onCommit={(progress) => patch({ progress })}
+        />
+      </InspectorRow>
+      <InspectorRow>
+        <div className="insp-vec">
+          <NumberField
+            value={endpoint.rollDeg ?? 0}
+            label="Roll"
+            ariaLabel={`Roll, ${label}`}
+            unit="°"
+            min={-MAX_SPLINE_ANGLE_DEG}
+            max={MAX_SPLINE_ANGLE_DEG}
+            step={1}
+            {...dragThrough(store, (rollDeg: number) => patch({ rollDeg }))}
+            onCommit={(rollDeg) => patch({ rollDeg })}
+          />
+          <NumberField
+            value={endpoint.focusZ ?? 0}
+            label="Focus"
+            ariaLabel={`Focus, ${label}`}
+            unit="px"
+            step={1}
+            {...dragThrough(store, (focusZ: number) => patch({ focusZ }))}
+            onCommit={(focusZ) => patch({ focusZ })}
+          />
+        </div>
+      </InspectorRow>
+    </>
+  );
+}
+
+/** One waypoint of a path: its pose, a capture button, and the two structural
+ *  verbs. `+` inserts AFTER this one so the list reads top to bottom in the
+ *  order the camera travels; `−` is absent on the last two, because a path
+ *  needs two and a button that always refuses is worse than no button.
+ *
+ *  A POSE IS A GROUP, so its name is the group's heading and its buttons are
+ *  one row of 28px buttons under it, like every inspector control: as a
+ *  labelled pill holding a 32px button it was a 34px row with a box inside a
+ *  box. */
+function WaypointGroup(props: {
+  shotId: string;
+  index: number;
+  framing: Framing;
+  count: number;
+  read(): Framing;
+}) {
+  const store = useStore();
+  const locked = useLocked();
+  const { shotId, index, framing, count } = props;
+  const title = `Waypoint ${index + 1}`;
+  const write = (patch: Partial<Framing>): void => store.setShotWaypoint(shotId, index, patch);
+  return (
+    <>
+      <div className="insp-heading">{title}</div>
+      <InspectorRow>
+        <div className="insp-buttons">
+          <CaptureButton pose={title} disabled={locked} onCapture={() => write(props.read())} />
+          <button
+            type="button"
+            className="btn is-icon"
+            title="Add a waypoint after this one"
+            aria-label={`Insert waypoint after ${title}`}
+            disabled={locked}
+            onClick={() => store.insertShotWaypoint(shotId, index)}
+          >
+            <IconPlus />
+          </button>
+          {count > MIN_PATH_WAYPOINTS ? (
+            <button
+              type="button"
+              className="btn is-icon"
+              title="Remove this waypoint"
+              aria-label={`Remove ${title}`}
+              disabled={locked}
+              onClick={() => store.removeShotWaypoint(shotId, index)}
+            >
+              <IconMinus />
+            </button>
+          ) : null}
+        </div>
+      </InspectorRow>
+      <FramingRows framing={framing} name={title} scrub={poseScrub(store, write)} />
+    </>
+  );
+}
+
+/** One end of a two-pose move, under its own heading: the capture button,
+ *  then the pose, which drags live like every other field. */
 function FramingGroup(props: { shot: MoveShot; end: "from" | "to"; title: string; read(): Framing }) {
   const store = useStore();
+  const locked = useLocked();
   const { shot, end, title } = props;
+  const write = (patch: Partial<Framing>): void => store.setShotFraming(shot.id, end, patch);
   return (
     <>
-      <InspectorRow label={title}>
-        <button
-          type="button"
-          className="btn"
-          onClick={() => store.setShotFraming(shot.id, end, props.read())}
-        >
-          Set from current framing
-        </button>
+      <div className="insp-heading">{title}</div>
+      <InspectorRow>
+        <div className="insp-buttons">
+          <CaptureButton pose={title} disabled={locked} onCapture={() => write(props.read())} />
+        </div>
       </InspectorRow>
-      <FramingRows
-        framing={shot[end]}
-        name={title}
-        onCommit={(patch) => store.setShotFraming(shot.id, end, patch)}
-      />
+      <FramingRows framing={shot[end]} name={title} scrub={poseScrub(store, write)} />
     </>
   );
 }
+
+/** "Set from current framing" for one pose. Its NAME carries the pose after
+ *  the visible words ("Set from current framing, From"), as the pose's fields
+ *  ("X, From") and the waypoint verbs ("Remove Waypoint 2") carry it: the
+ *  heading above is a plain line, so a screen reader moving by controls heard
+ *  the same button once per pose with nothing saying which one it writes. */
+function CaptureButton(props: { pose: string; disabled: boolean; onCapture(): void }) {
+  return (
+    <button
+      type="button"
+      className="btn"
+      aria-label={`Set from current framing, ${props.pose}`}
+      disabled={props.disabled}
+      onClick={props.onCapture}
+    >
+      Set from current framing
+    </button>
+  );
+}