@dailies-studio/shot-editor 0.1.0 → 0.2.0

package/src/panels/insert/iconSet.ts

@@ -0,0 +1,109 @@
+// THE ICON SET the Insert drawer's Icons section lists: every Lucide icon,
+// under its canonical kebab name, with its aliases kept for search.
+//
+// LAZY. Lucide is about 1850 icons, and none of them is worth a byte of the
+// editor's first load: `loadIconSet` imports the package (and the raw text of
+// its alias index) the first time the Icons section is asked for, and Vite
+// splits both into their own chunk.
+//
+// WHY THE RAW INDEX. `lucide`'s `icons` object keys every icon by its PASCAL
+// name, aliases included, and an alias points at the very same node array as
+// its canonical icon, so identity alone cannot say which name is the real one.
+// The index file can: each line re-exports one icon FILE, whose kebab name is
+// the canonical name, under every Pascal name that means it.
+import type { IconNode } from "@dailies-studio/shot/doc";
+
+export interface IconEntry {
+  /** Lucide's canonical kebab name, the file name (`arrow-up-right`). */
+  name: string;
+  /** Every other name Lucide accepts for it, kebab-cased. */
+  aliases: readonly string[];
+  /** The drawing, element by element, on Lucide's 24×24 grid. */
+  node: readonly IconNode[];
+  /** Name and aliases in one lowercase string, the thing a query is matched
+   *  against. */
+  search: string;
+}
+
+/** `export { default as A, default as B } from './icons/a-b.mjs';` */
+const EXPORT_LINE = /export \{ ([^}]+) \} from '\.\/icons\/([a-z0-9-]+)\.mjs'/g;
+
+/** `ArrowUpRight` to `arrow-up-right`, `Grid2x2` to `grid-2x2`: a dash
+ *  before each inner capital, and before a digit run that follows a letter,
+ *  except the `x` of a size like `2x2`. Used only for ALIASES, which have no
+ *  file to read the real kebab name from. */
+export function kebabOf(pascal: string): string {
+  return pascal
+    .replace(/([a-z0-9])([A-Z])/g, "$1-$2")
+    .replace(/(?<![0-9]x)(?<=[a-zA-Z])(?=[0-9])/g, "-")
+    .toLowerCase();
+}
+
+/**
+ * The set, from the alias index's text and the package's `icons` object.
+ * Sorted by name. A line whose icon the object does not have is skipped
+ * rather than listed as a tile that would draw nothing.
+ */
+export function buildIconSet(raw: string, icons: Readonly<Record<string, unknown>>): IconEntry[] {
+  const out: IconEntry[] = [];
+  for (const match of raw.matchAll(EXPORT_LINE)) {
+    const names = (match[1] ?? "")
+      .split(",")
+      .map((part) => part.trim().replace(/^default as /, ""))
+      .filter((part) => part !== "");
+    const name = match[2] ?? "";
+    const first = names[0];
+    const node = first === undefined ? undefined : icons[first];
+    if (name === "" || !Array.isArray(node)) continue;
+    const aliases = [...new Set(names.map(kebabOf))].filter((alias) => alias !== name);
+    out.push({
+      name,
+      aliases,
+      node: node as readonly IconNode[],
+      search: [name, ...aliases].join(" "),
+    });
+  }
+  out.sort((a, b) => (a.name < b.name ? -1 : a.name > b.name ? 1 : 0));
+  return out;
+}
+
+/**
+ * The icons a query finds, best first.
+ *
+ * Every whitespace-separated word must appear in the name or an alias. Ties
+ * keep the set's alphabetical order. Ranked: the exact name, then a name that
+ * starts with the query, then everything else that matched. An empty query
+ * answers the whole set.
+ */
+export function searchIcons(set: readonly IconEntry[], query: string): readonly IconEntry[] {
+  const q = query.trim().toLowerCase();
+  if (q === "") return set;
+  const words = q.split(/\s+/);
+  const rank = (entry: IconEntry): number => (entry.name === q ? 0 : entry.name.startsWith(q) ? 1 : 2);
+  return set
+    .filter((entry) => words.every((word) => entry.search.includes(word)))
+    .map((entry, index) => ({ entry, index, rank: rank(entry) }))
+    .sort((a, b) => a.rank - b.rank || a.index - b.index)
+    .map(({ entry }) => entry);
+}
+
+let pending: Promise<readonly IconEntry[]> | null = null;
+
+/**
+ * The whole set, loaded once. A failed load (a chunk the network dropped)
+ * clears the memo, so the next open tries again instead of answering the
+ * same rejection forever.
+ */
+export function loadIconSet(): Promise<readonly IconEntry[]> {
+  pending ??= Promise.all([
+    import("lucide/dist/esm/iconsAndAliases.mjs?raw"),
+    import("lucide"),
+  ]).then(
+    ([raw, lucide]) => buildIconSet(raw.default, lucide.icons as Readonly<Record<string, unknown>>),
+    (error: unknown) => {
+      pending = null;
+      throw error;
+    },
+  );
+  return pending;
+}

package/src/panels/inspector/ExposeDot.tsx

@@ -0,0 +1,117 @@
+// THE EXPOSE PIN: the inspector's one way to publish a property, and the only
+// place in the chrome an `ExposedProp3D` is created.
+//
+// It is `KeyframeDot`'s twin on purpose (the same accessory lane inside the
+// field's box, the same 16px button, one dotted PATH and nothing else),
+// because the two verbs are the same shape of decision about the same row:
+// the diamond says "this moves over time", the pin says "whoever places this
+// decides". An author who has learnt one has learnt both.
+//
+// ── ABSENT, NEVER DEAD ──────────────────────────────────────────────────
+//
+// The diamond's discipline, for the diamond's reason: what the chrome offers
+// and what the document accepts must be the same set by construction, or the
+// author presses a control and the save gate refuses them afterwards. Every
+// condition below is asked of the same function the gate asks. The per-layer
+// ones live in the doc plane as `exposeOffered` (component.ts), which
+// `suggestControls` asks too.
+//
+//   a DEFINITION is open      an exposed prop belongs to one, and only one
+//   exactly ONE layer         a prop targets one layer, so a fan-out over a
+//                             multi-selection would be several props from one
+//                             press with one key between them
+//   not an identity path      `identityPathProblem`, `exposeProp`'s first refusal
+//   not already published     `exposedPropWriting`, the predicate `KeyframeDot`
+//                             also consults — a second prop on the same field
+//                             is two absolute writers
+//   no track on the path      `exposeProp`'s own refusal, asked BEFORE the
+//                             offer rather than after the press
+//   a default is capturable   `exposableValueOf` reads the layer and falls back
+//                             to the path table's, or for a component prop to
+//                             the LIVE contract's default; with none, the prop
+//                             would start at "" and change the picture the
+//                             moment it is made. The press captures the same
+//                             value (the store's `exposeProp`)
+//   its container exists      `writeAtPath` REFUSES to create one, so a prop
+//                             aimed into an absent `paint.stroke` would be
+//                             permanently inert — the table's `needs`, which is
+//                             the same clause a first keyframe honours
+//
+// Under `LockedControls` (a viewer) it is disabled, like every other control
+// that writes.
+import { useLocked } from "@dailies-studio/ui";
+import { exposeOffered, trackablePath } from "@dailies-studio/shot/doc";
+import { useShotEditor, useStore } from "../../state/context.js";
+import { useSelectedLayers } from "./useDocWrite.js";
+
+/**
+ * Whether the pin for `path` is offered here: the clauses above the import,
+ * asked of the doc plane's one predicate so "Make component"'s suggested
+ * controls offer exactly what this pin does. A row that draws the pin outside
+ * a box (a ControlSpec vector's one pin, in PropRow's label column) asks
+ * first, because a slot handed a pin that renders nothing still draws, empty.
+ */
+export function useExposeOffered(path: string): boolean {
+  const doc = useShotEditor((s) => s.doc);
+  const editingDef = useShotEditor((s) => s.editingDef);
+  const contracts = useShotEditor((s) => s.contracts);
+  const layers = useSelectedLayers();
+  if (doc === null || editingDef === null || layers.length !== 1) return false;
+  const layer = layers[0]!;
+  // The registry's contract types an `instance.props.<key>` path, as it does
+  // for the diamond beside this one.
+  const live = layer.kind === "instance" ? contracts[layer.instance.component] : undefined;
+  return exposeOffered(doc, editingDef, layer, path, live);
+}
+
+/**
+ * The pin for one property: render it as the `trailing` of the box that shows
+ * the value. `KeyframeDot` already does it beside every diamond over one
+ * path, so a section only mounts this itself for a path with no diamond.
+ *
+ * `label` and `kind` override the path table's, and exist for the same reason
+ * `KeyframeDot`'s `label` does: a contract-driven path is in no table, and a
+ * row's wording is sometimes the section's rather than the table's.
+ */
+export function ExposeDot({
+  path,
+  label,
+  kind,
+}: {
+  path: string;
+  label?: string | undefined;
+  kind?: string | undefined;
+}) {
+  const store = useStore();
+  const editingDef = useShotEditor((s) => s.editingDef);
+  const layers = useSelectedLayers();
+  const locked = useLocked();
+  const offered = useExposeOffered(path);
+
+  // Offered means a definition is open and exactly one layer is selected.
+  if (!offered || editingDef === null) return null;
+  const layer = layers[0]!;
+  const tabled = trackablePath(path);
+
+  const name = label ?? tabled?.label ?? path;
+  // Spread, not `{label, kind}`: under `exactOptionalPropertyTypes` an explicit
+  // `label: undefined` is not the same as an absent one, and the store reads
+  // absence as "take the table's word".
+  const opts = {
+    ...(label === undefined ? {} : { label }),
+    ...(kind === undefined ? {} : { kind }),
+  };
+  return (
+    <button
+      type="button"
+      className="insp-key insp-expose"
+      data-testid={`expose-dot-${path}`}
+      aria-label={`Publish ${name} as a component property`}
+      title={`Publish ${name}: every instance of this component can then override it`}
+      disabled={locked}
+      onClick={() => store.exposeProp(editingDef, layer.id, path, opts)}
+    >
+      ⊕
+    </button>
+  );
+}

package/src/panels/inspector/FramingRows.tsx

@@ -1,69 +1,339 @@
-// A `Framing` as two rows of fields. ONE definition, three subjects: the
-// scene's own camera, and a move's `from` and `to`.
+// A `Framing` as rows of fields. ONE definition and ONE layout, three subjects:
+// the scene's own camera (`CameraSection`), and a camera move's `from`, `to`
+// and path waypoints (`animate/ShotSection.tsx`).
 //
-// It is shared rather than copied because the list IS the schema. A sixth
-// framing field would otherwise have to be remembered in two files, and the one
-// that got forgotten would silently keep an authored value the author could
-// never see or reach.
+// ONE LAYOUT, so a pose reads the same wherever it is edited: the same words
+// in the same places, the same units. The move editor's poses used to be a
+// second grid in another order, naming the orbit "Yaw" and "Pitch" while the
+// Camera section above it said "Pan X" and "Pan Y" and hid every unit, so an
+// author comparing a move's From with the camera read two vocabularies for one
+// set of numbers.
+//
+// The one difference is the zoom's SLIDER, which the Camera section asks for
+// (`zoomSlider`) and a pose does not. A built-in row is a field, Figma's
+// posture, and the camera's Zoom is the one built-in row that already had a
+// slider; a pose's Zoom never did, and a move editor holding a slider per
+// pose would make the exception the rule.
+//
+// It is shared rather than copied because the list IS the schema. A new
+// framing field fails to compile in `FIELDS` until it is described, and lands
+// in a row only when `LAYOUT` places it, so no subject can keep an authored
+// value the author could never see or reach.
 //
 // The write is a PATCH and not a whole framing, so a caller can route it
 // straight at whichever seam owns its subject: `setSceneCamera` goes through
 // the refusal fork, `setShotFraming` does not, and this component knows about
 // neither.
-import { InspectorRow, NumberField } from "@dailies-studio/ui";
-import { MAX_FRAMING_ZOOM, MIN_FRAMING_ZOOM } from "@dailies-studio/shot/doc";
+import { Fragment } from "react";
+import type { ReactNode } from "react";
+import { FieldLabels, IconDiamond, InspectorRow, NumberField, RangeField, formatValue, useLocked } from "@dailies-studio/ui";
+import { MAX_CAMERA_PITCH_DEG, MAX_FRAMING_ZOOM, MIN_FRAMING_ZOOM } from "@dailies-studio/shot/doc";
 import type { Framing } from "@dailies-studio/shot/doc";
 
-/** The five fields, in the order an author thinks about them: where it looks,
- *  how much it sees, how it is held, what is sharp. */
-const FIELDS: ReadonlyArray<{
-  key: keyof Framing;
+/** A framing field, by its schema name. */
+export type CameraKey = keyof Framing;
+
+interface FramingField {
+  /** The visible word, the prefix inside the box. The accessible name starts
+   *  with it and then names the subject ("Pan X, Camera"), the house "Label,
+   *  detail", so a speech command can say the word on the box and a screen
+   *  reader hears it before which framing it belongs to. */
   label: string;
   unit?: string;
   step: number;
+  /** HARD limits: what the document accepts. */
   min?: number;
   max?: number;
-}> = [
-  { key: "x", label: "X", step: 1 },
-  { key: "y", label: "Y", step: 1 },
+  /** The span the zoom's slider draws (see below). */
+  range?: readonly [number, number];
+  /** What the word means, when the visible word is a film word. */
+  title?: string;
+}
+
+/**
+ * Every framing field, described once.
+ *
+ * ── THE WORDS ARE FILM WORDS ────────────────────────────────────────────
+ *
+ * "Pan X" and "Pan Y" are what a camera operator calls turning the camera
+ * across and up: that is `yawDeg` and `pitchDeg`, the orbit around the point
+ * the camera looks at. The schema word stays in the tooltip.
+ *
+ * ── AND THERE IS NO CAMERA Z ────────────────────────────────────────────
+ *
+ * `Framing` has no camera position on z: the distance is DERIVED from the
+ * lens and the zoom. The only z it carries is `focusZ`, the depth of the focus
+ * plane, which nothing but depth of field reads. So the field is labelled
+ * "Focus", for what it does, rather than "Z", which would promise a dolly the
+ * value does not perform.
+ *
+ * ── AND `range` IS NOT `min`/`max` ─────────────────────────────────────
+ *
+ * `min`/`max` are the HARD limits, what the document accepts, and they go to
+ * the field. `range` is the span Zoom's slider draws, and only Zoom has one:
+ * X, Y, Roll and Focus are open and signed (`checkFraming` in validate.ts asks
+ * each for nothing but a finite number, and nothing wraps `rollDeg` mod 360, so
+ * a roll of 720 is two turns rather than a seam).
+ */
+const FIELDS: Record<CameraKey, FramingField> = {
+  x: { label: "X", step: 1, title: "Where the camera looks, across the design plane, in design px" },
+  y: { label: "Y", step: 1, title: "Where the camera looks, down the design plane, in design px" },
+  focusZ: {
+    label: "Focus",
+    step: 1,
+    title: "The depth of the focus plane, in design px. Only depth of field reads it",
+  },
   // Clamped at the widget as well as in the store: the store's clamp is the
   // boundary that must hold, and this one is what stops the author typing a
   // value that silently becomes a different one.
-  { key: "zoom", label: "Zoom", step: 0.01, min: MIN_FRAMING_ZOOM, max: MAX_FRAMING_ZOOM },
-  { key: "rollDeg", label: "Roll", unit: "deg", step: 0.5 },
-  { key: "focusZ", label: "Focus", step: 1 },
+  //
+  // …but 0.05..50 is a VALIDATOR BAND (cameraLimits.ts), not a scale anybody
+  // authors across, so it cannot also be the slider. 0.25..4 is two octaves
+  // either side of 1: of the 199 authored zooms in the (since deleted)
+  // machineage example, 182 sit inside it (the working cluster is 1..1.5: 1,
+  // 1.035, 1.075, 1.13, over a body running 0.24 to 2.95), so 1 sits at 20%
+  // and 1.5 at 33%. The 17 that do not are one 0.24 and the dive ladder 4.4,
+  // 6.6, 10.2, 13.5, 18, 24, 26.4. The slider widens to hold them, and typing,
+  // the arrow keys and a scrub all still move them from where they are.
+  zoom: { label: "Zoom", step: 0.01, min: MIN_FRAMING_ZOOM, max: MAX_FRAMING_ZOOM, range: [0.25, 4] },
+  // THE ORBIT POSE (schema v26): where the camera stands around the point it
+  // looks at. Pan X is open like roll; Pan Y stops short of the poles.
+  yawDeg: {
+    label: "Pan X",
+    unit: "°",
+    step: 0.5,
+    title: "Pan X turns the camera across: its yaw, an orbit around the point it looks at",
+  },
+  pitchDeg: {
+    label: "Pan Y",
+    unit: "°",
+    step: 0.5,
+    min: -MAX_CAMERA_PITCH_DEG,
+    max: MAX_CAMERA_PITCH_DEG,
+    title: "Pan Y turns the camera up and down: its pitch, an orbit around the point it looks at",
+  },
+  rollDeg: { label: "Roll", unit: "°", step: 0.5 },
+};
+
+/** Every framing field, in `FIELDS` order: the camera's key states read each. */
+export const FRAMING_KEYS = Object.keys(FIELDS) as CameraKey[];
+
+/**
+ * The rows, top to bottom, in Paper's order: where it looks, what is sharp
+ * beside the lens, how much it sees, how it is turned, how it is held.
+ *
+ * ── THE ROW RULE, WHICH IS A WIDTH RULE ────────────────────────────────
+ *
+ * An inspector row holds AT MOST TWO labelled boxes, or three only when every
+ * label in it is a single character. The label is the half that gives way
+ * last, after the value and the unit, and at the rail's narrow end three word
+ * labels in one row ("Zoom", "Roll", "Focus") rendered as "Z…", "R…", "F…".
+ *
+ * A row holding ONE field stretches it full width, which is what Zoom wants
+ * for its slider, and what Focus gets when there is no lens beside it (a
+ * move's pose has none: the lens is the scene's, not the pose's).
+ */
+const LAYOUT: ReadonlyArray<ReadonlyArray<CameraKey | "fov">> = [
+  ["x", "y"],
+  ["focusZ", "fov"],
+  ["zoom"],
+  ["yawDeg", "pitchDeg"],
+  ["rollDeg"],
 ];
 
+/**
+ * A camera scrub, as the callbacks the rows drive. The OWNER of the subject
+ * implements it (`CameraSection` over the stage's framing lane, the move editor
+ * over the panel scrub), so this file still knows about no seam.
+ *
+ * `start`/`move`/`end` bracket one gesture. `commit` is a discrete value: the
+ * end of a gesture when one is open, and a plain one-entry write when none is
+ * (a typed value, an arrow nudge, a slider key).
+ */
+export interface FramingScrub {
+  start(): void;
+  move(patch: Partial<Framing>): void;
+  end(commit: boolean): void;
+  commit(patch: Partial<Framing>): void;
+}
+
+/**
+ * What a field's diamond says about the camera's keys, which are its POSES
+ * (`cameraMarks`): every end of every camera move in the shot.
+ *
+ *   keyed     a pose sits at the playhead. A pose holds the whole framing, so
+ *             every field lights together.
+ *   animated  this field's value differs between the shot's poses.
+ *   static    it does not, or there are no poses.
+ */
+export type CameraKeyState = "keyed" | "animated" | "static";
+
+/**
+ * The diamonds' data, worked out by the section that owns the store. This file
+ * stays store-free: it draws a state and calls back.
+ */
+export interface CameraKeys {
+  stateOf(key: CameraKey): CameraKeyState;
+  /** This field's value differs between the shot's poses, at EVERY frame,
+   *  a pose's own included. Apart from `stateOf` because "keyed" wins the
+   *  diamond's state on a pose while the value still changes across the
+   *  shot, and the value's accent ink reads this, so it holds steady as the
+   *  playhead crosses a pose. */
+  animatedOf(key: CameraKey): boolean;
+  /** What a click does, as a sentence ("Click to add a camera move ending at
+   *  the playhead."), or the reason it does nothing. Said in every diamond's
+   *  tooltip. */
+  action: string;
+  /** Null when a click cannot do anything here (a path waypoint, the
+   *  transport playing): the diamond then reads its state and is disabled. */
+  toggle: (() => void) | null;
+}
+
+const KEY_WORDS: Record<CameraKeyState, string> = {
+  keyed: "a camera key sits at the playhead",
+  animated: "animated: it changes between the camera keys",
+  static: "not animated",
+};
+
+/**
+ * One field's diamond, INSIDE the field: the house in-field key (`.insp-key`,
+ * the property diamond's box and glyph) in the camera's own signal.
+ *
+ * `is-camera` and `data-camera-state` rather than the property diamond's
+ * `is-keyed` / `is-tracked`, because those two mean "a keyframe on a track"
+ * and set the value in `--kf` (ui widgets.css). A camera pose is not a
+ * keyframe on a track (`model.ts` says the same of its marks), so its states
+ * draw in the ACCENT, the camera's documented exception (inspector-shot.css).
+ *
+ * Disabled, at full strength, when a click can do nothing here: a viewer's
+ * locked panel, a path waypoint, or the transport playing (the state is read
+ * off the held inspector frame while a press would act on the live one).
+ *
+ * `data-camera-animated` marks a field whose value changes across the shot,
+ * whatever the state: the value's accent ink keys on it (inspector-shot.css).
+ */
+function CameraKeyDiamond(props: { name: string; field: CameraKey; keys: CameraKeys }) {
+  const locked = useLocked();
+  const toggle = props.keys.toggle;
+  const live = toggle !== null && !locked;
+  const state = props.keys.stateOf(props.field);
+  return (
+    <button
+      type="button"
+      className="insp-key is-camera"
+      data-camera-state={state}
+      {...(props.keys.animatedOf(props.field) ? { "data-camera-animated": "" } : {})}
+      data-testid={`camera-field-key-${props.field}`}
+      aria-label={`${props.name} key`}
+      aria-pressed={state === "keyed"}
+      // A viewer's panel says only what the diamond shows: the action it
+      // cannot take is not offered, and the store's refusal names VIEW_ONLY.
+      title={`${props.name}: ${KEY_WORDS[state]}.${locked ? "" : ` ${props.keys.action}`}`}
+      disabled={!live}
+      onClick={() => {
+        if (live) toggle();
+      }}
+    >
+      <IconDiamond filled={state === "keyed"} />
+    </button>
+  );
+}
+
+/**
+ * The framing's rows: X | Y, Focus beside the lens, Zoom across (with its
+ * slider in the Camera section), Pan X | Pan Y, then Roll.
+ *
+ * ── EVERY FIELD IS A STANDARD FIELD ─────────────────────────────────────
+ *
+ * The house NumberField with its name inside (and, with `zoomSlider`, Zoom the
+ * house RangeField, the field plus its slider in one box), the units shown,
+ * and, where the subject has keys, the diamond INSIDE the box as its
+ * `trailing`. A subject with no keys (a move's pose: its keys ARE the move)
+ * draws no diamond at all, rather than a dead one, and its fields are exactly
+ * as wide.
+ *
+ * `fov` is the one field that is not a framing key: it is `Scene3D.fovDeg`,
+ * slotted in by the Camera section, which owns the write. It has no diamond:
+ * the lens is not part of a pose.
+ *
+ * The names stay INSIDE the boxes whatever the panel's field-label
+ * preference: these are words already (one letter only for X and Y), and a
+ * name above each field would double the rows for words the box already says.
+ */
 export function FramingRows(props: {
   framing: Framing;
-  /** Prefixes every field's accessible name ("Camera x", "From x"). Three
-   *  framings can be on screen at once, so the label alone is not a name. */
+  /** Follows the visible word in every field's accessible name ("X, Camera",
+   *  "Pan X, From"), and so in its key's ("X, Camera key") and its slider's.
+   *  Three framings can be on screen at once, so the word alone is not a
+   *  name. */
   name: string;
-  onCommit(patch: Partial<Framing>): void;
+  scrub: FramingScrub;
+  /** The camera's key diamonds. Absent, the fields carry none. */
+  keys?: CameraKeys;
+  /** The lens field, owned by the caller because it writes the scene. */
+  fov?: ReactNode;
+  /** Zoom as the field plus its slider: the Camera section's, and only its
+   *  (see the header). Absent, Zoom is a field like every other. */
+  zoomSlider?: boolean;
 }) {
+  const { scrub, keys } = props;
+  const field = (key: CameraKey): ReactNode => {
+    const f = FIELDS[key];
+    const name = `${f.label}, ${props.name}`;
+    const value = props.framing[key] ?? 0;
+    const shared = {
+      value,
+      step: f.step,
+      ...(f.unit === undefined ? {} : { unit: f.unit }),
+      ...(f.title === undefined ? {} : { title: f.title }),
+      ...(keys === undefined ? {} : { trailing: <CameraKeyDiamond name={name} field={key} keys={keys} /> }),
+      onScrubStart: scrub.start,
+      onScrub: (next: number) => scrub.move({ [key]: next }),
+      onScrubEnd: scrub.end,
+      onCommit: (next: number) => scrub.commit({ [key]: next }),
+    };
+    if (props.zoomSlider === true && f.range !== undefined && f.min !== undefined && f.max !== undefined) {
+      // The slider spans the authoring range, widened by the field to hold the
+      // value, so a dive past 4 still shows its thumb at the end of a scale
+      // that contains it rather than pinned to a lie. It announces the value
+      // at its own quantum: mid-move the effective zoom is an interpolated
+      // float, and "1.051664760227515×" is noise to a listener.
+      return (
+        <RangeField
+          key={key}
+          label={f.label}
+          ariaLabel={name}
+          min={f.min}
+          max={f.max}
+          range={f.range}
+          valueText={`${formatValue(value, f.step)}×`}
+          {...shared}
+        />
+      );
+    }
+    return (
+      <NumberField
+        key={key}
+        label={f.label}
+        ariaLabel={name}
+        {...(f.min === undefined ? {} : { min: f.min })}
+        {...(f.max === undefined ? {} : { max: f.max })}
+        {...shared}
+      />
+    );
+  };
   return (
-    <>
-      {[FIELDS.slice(0, 2), FIELDS.slice(2)].map((group, i) => (
-        <InspectorRow key={i}>
-          {group.map((f) => {
-            const limits: { min?: number; max?: number } = {};
-            if (f.min !== undefined) limits.min = f.min;
-            if (f.max !== undefined) limits.max = f.max;
-            return (
-              <NumberField
-                key={f.key}
-                value={props.framing[f.key]}
-                label={f.label}
-                ariaLabel={`${props.name} ${f.label.toLowerCase()}`}
-                {...(f.unit === undefined ? {} : { unit: f.unit })}
-                {...limits}
-                step={f.step}
-                onCommit={(next) => props.onCommit({ [f.key]: next })}
-              />
-            );
-          })}
-        </InspectorRow>
-      ))}
-    </>
+    <FieldLabels value="compact">
+      {LAYOUT.map((row) => {
+        const cells = row.flatMap((cell): ReactNode[] =>
+          cell === "fov" ? (props.fov === undefined ? [] : [<Fragment key="fov">{props.fov}</Fragment>]) : [field(cell)],
+        );
+        return (
+          <InspectorRow key={row.join("|")}>
+            {cells.length === 1 ? cells[0] : <div className="insp-vec">{cells}</div>}
+          </InspectorRow>
+        );
+      })}
+    </FieldLabels>
   );
 }