@dailies-studio/shot-editor 0.1.0

package/src/panels/inspector/design/MeshSection.tsx

@@ -0,0 +1,172 @@
+// Only for MESH layers, and absent otherwise — the same rule TypographySection
+// follows, for the same reason: a model section over a rectangle is six
+// controls that write nothing.
+//
+// Deliberately the SHORT list: the model, how it is shaded, and when its clip
+// runs. `fit`, the toon steps, the key direction and the rim all exist in the
+// schema and are reachable from the agent lane; they are not here because a
+// first section that shows every field is a section nobody can find the model
+// in.
+//
+// ponytail: add the toon detail rows when someone is actually art-directing
+// one.
+import {
+  Combobox,
+  InspectorRow,
+  InspectorSection,
+  NumberField,
+  SegmentedControl,
+  TextField,
+} from "@dailies-studio/ui";
+import { MESH_LOOPS, MESH_SHADING_MODES } from "@dailies-studio/shot/doc";
+import type { Layer3D, MeshLayer3D, MeshLoop, MeshShading } from "@dailies-studio/shot/doc";
+import { useShotEditor, useStore } from "../../../state/context.js";
+import { useSelectedLayers, useSelectionValue, useSelectionWrite } from "../useDocWrite.js";
+
+type MeshBlock = MeshLayer3D["mesh"];
+
+export function MeshSection() {
+  const write = useSelectionWrite();
+  const layers = useSelectedLayers();
+  const store = useStore();
+  const doc = useShotEditor((s) => s.doc);
+  const library = useShotEditor((s) => s.library);
+  const mesh = useSelectionValue((layer) => (layer.kind === "mesh" ? layer.mesh : undefined));
+  if (!layers.some((l) => l.kind === "mesh") || mesh.value === undefined) return null;
+
+  const m = mesh.value;
+  // The catalog's display name, or the raw id when the library has not loaded
+  // (or when the document names a generator this build does not ship). Showing
+  // the id rather than "Choose…" is what makes the second case visible at all —
+  // a material that silently reads as unset is one an author would set twice.
+  const materialName =
+    m.material === undefined
+      ? null
+      : (library.find((row) => row.id === m.material?.generator)?.name ?? m.material.generator);
+  // Model assets only. Offering an image would let an author point a mesh layer
+  // at a PNG, which `validateShotDoc` refuses on save — a menu that can only
+  // produce an invalid document is worse than a short menu.
+  const models = Object.entries(doc?.assets ?? {})
+    .filter(([, asset]) => asset.kind === "model")
+    .map(([id, asset]) => ({ value: id, label: asset.path.split("/").pop() ?? id }));
+
+  /** Every write goes through one mapper so a field that CLEARS itself deletes
+   *  its key rather than setting it to `undefined`: codegen prints the block by
+   *  key order, and a present-but-undefined key is a key. */
+  const patch = (next: (block: MeshBlock) => MeshBlock): void =>
+    write((layer) => (layer.kind === "mesh" ? ({ ...layer, mesh: next(layer.mesh) } as Layer3D) : layer));
+
+  const set = <K extends keyof MeshBlock>(key: K, value: MeshBlock[K]): void =>
+    patch((block) => ({ ...block, [key]: value }));
+
+  return (
+    <InspectorSection title="Model" persistKey="shot:mesh">
+      <InspectorRow label="Asset">
+        <Combobox
+          options={models}
+          value={m.asset}
+          ariaLabel="Model asset"
+          placeholder="Search models"
+          onChange={(next) => set("asset", next)}
+        />
+      </InspectorRow>
+
+      <InspectorRow label="Shading">
+        <SegmentedControl
+          ariaLabel="Mesh shading"
+          value={m.shading?.mode ?? "unlit"}
+          options={MESH_SHADING_MODES.map((mode) => ({ value: mode, label: mode }))}
+          onChange={(next) => set("shading", { mode: next as MeshShading["mode"] } as MeshShading)}
+        />
+      </InspectorRow>
+
+      {/* THE MATERIAL IS A NAME AND TWO BUTTONS, not a list. The catalog is 48
+          entries with thumbnails, which is a browser and not an inspector row —
+          so this says what is on and opens the picker, exactly as the Asset row
+          would if a model were 48 things you had to look at to choose between.
+          The generator's own params are edited in the picker's own lane; this
+          row's job is "what is it, and take it off". */}
+      <InspectorRow label="Material">
+        <div className="mesh-material-row">
+          <button
+            type="button"
+            className="mesh-material-name"
+            onClick={() => store.openMaterialPicker(layers.filter((l) => l.kind === "mesh").map((l) => l.id))}
+          >
+            {materialName ?? "Choose…"}
+          </button>
+          {m.material === undefined ? null : (
+            <button
+              type="button"
+              className="mesh-material-clear"
+              aria-label="Remove material"
+              title="Back to the model's own materials"
+              onClick={() =>
+                store.removeMeshMaterial(layers.filter((l) => l.kind === "mesh").map((l) => l.id))
+              }
+            >
+              ×
+            </button>
+          )}
+        </div>
+      </InspectorRow>
+
+      {/* Free TEXT, not a dropdown. Clip names live inside the GLB and the
+          chrome never parses one — it holds a document, not a scene graph — so
+          a picker here could only ever offer the name that is already set.
+          Ceiling: no discovery; reporting the model's clips back over the
+          bridge is a feed field, not an inspector change. */}
+      <InspectorRow label="Clip">
+        <TextField
+          value={m.clip ?? ""}
+          ariaLabel="Animation clip"
+          onCommit={(next) =>
+            patch((block) => {
+              const trimmed = next.trim();
+              if (trimmed !== "") return { ...block, clip: trimmed };
+              // `clip: ""` would name a clip no glTF has: the layer would show
+              // its rest pose while the document claimed an animation. Absent
+              // is what "rest pose" actually spells.
+              const { clip: _drop, ...rest } = block;
+              return rest;
+            })
+          }
+        />
+      </InspectorRow>
+
+      <InspectorRow label="Start">
+        <NumberField
+          value={m.clipStartFrame ?? 0}
+          mixed={mesh.mixed}
+          ariaLabel="Clip start frame"
+          unit="f"
+          step={1}
+          onCommit={(next) => set("clipStartFrame", Math.round(next))}
+        />
+      </InspectorRow>
+
+      <InspectorRow label="Loop">
+        <SegmentedControl
+          ariaLabel="Clip loop"
+          value={m.loop ?? "hold"}
+          options={MESH_LOOPS.map((loop) => ({ value: loop, label: loop }))}
+          onChange={(next) => set("loop", next as MeshLoop)}
+        />
+      </InspectorRow>
+
+      <InspectorRow label="Rate">
+        <NumberField
+          value={m.timeScale ?? 1}
+          mixed={mesh.mixed}
+          ariaLabel="Clip rate"
+          step={0.1}
+          // Zero is REFUSED by validation — it freezes the clip forever, which
+          // is a pose you can already spell by clearing the clip, and it is
+          // indistinguishable from a slider that failed to write. Negative
+          // plays the clip backwards and is allowed.
+          onCommit={(next) => set("timeScale", next === 0 ? 1 : next)}
+        />
+      </InspectorRow>
+    </InspectorSection>
+  );
+}

package/src/panels/inspector/design/ShadowSection.tsx

@@ -0,0 +1,73 @@
+// Drop shadow AND glow — ONE field with two affordances rather than two fields
+// that can disagree. A glow IS a shadow at zero offset with a bright colour,
+// which is exactly how the rasterizer draws it (raster.ts), so modelling them
+// separately would be two schema fields for one Canvas2D call.
+import { ColorPicker, InspectorRow, InspectorSection, NumberField } from "@dailies-studio/ui";
+import type { Shadow } from "@dailies-studio/shot/doc";
+import { NO_SCRUB, useSelectionValue, useSelectionWrite } from "../useDocWrite.js";
+
+const DEFAULT_SHADOW: Shadow = { xPx: 0, yPx: 12, blurPx: 32, spreadPx: 0, color: "#00000080" };
+
+export function ShadowSection() {
+  const write = useSelectionWrite();
+  const present = useSelectionValue((layer) => (layer.paint.shadows ?? []).length > 0);
+  const first = useSelectionValue((layer) => layer.paint.shadows?.[0]);
+
+  /** The FIRST shadow only. A layer may hold several (the schema is a list, and
+   *  a glow plus a drop shadow is the common pair), but editing the second one
+   *  needs a per-shadow list UI — which is a section of its own. */
+  const patch = (next: Partial<Shadow>): void =>
+    write((layer) => {
+      const shadows = [...(layer.paint.shadows ?? [DEFAULT_SHADOW])];
+      shadows[0] = { ...DEFAULT_SHADOW, ...shadows[0], ...next };
+      return { ...layer, paint: { ...layer.paint, shadows } };
+    });
+
+  const shadow = first.value ?? DEFAULT_SHADOW;
+
+  return (
+    <InspectorSection
+      title="Shadow"
+      persistKey="shot:shadow"
+      action={
+        <button
+          type="button"
+          className="section-action"
+          title={present.value === true ? "Remove shadow" : "Add shadow"}
+          onClick={() =>
+            present.value === true
+              ? write((layer) => ({ ...layer, paint: { ...layer.paint, shadows: [] } }))
+              : patch({})
+          }
+        >
+          {present.value === true ? "−" : "+"}
+        </button>
+      }
+    >
+      {present.value === true ? (
+        <>
+          <InspectorRow label="Color">
+            <ColorPicker
+              value={shadow.color}
+              ariaLabel="Shadow colour"
+              scrub={NO_SCRUB}
+              commit={(hex) => patch({ color: hex })}
+            />
+          </InspectorRow>
+          <InspectorRow>
+            <NumberField value={shadow.xPx} label="X" ariaLabel="Shadow X" unit="px" step={1} onCommit={(v) => patch({ xPx: v })} />
+          </InspectorRow>
+          <InspectorRow>
+            <NumberField value={shadow.yPx} label="Y" ariaLabel="Shadow Y" unit="px" step={1} onCommit={(v) => patch({ yPx: v })} />
+          </InspectorRow>
+          <InspectorRow>
+            <NumberField value={shadow.blurPx} label="Blur" ariaLabel="Shadow blur" unit="px" min={0} step={1} onCommit={(v) => patch({ blurPx: v })} />
+          </InspectorRow>
+          <InspectorRow>
+            <NumberField value={shadow.spreadPx} label="Spread" ariaLabel="Shadow spread" unit="px" step={1} onCommit={(v) => patch({ spreadPx: v })} />
+          </InspectorRow>
+        </>
+      ) : null}
+    </InspectorSection>
+  );
+}

package/src/panels/inspector/design/StrokeSection.tsx

@@ -0,0 +1,85 @@
+import { ColorPicker, InspectorRow, InspectorSection, NumberField, SegmentedControl } from "@dailies-studio/ui";
+import type { Stroke } from "@dailies-studio/shot/doc";
+import { NO_SCRUB, useSelectionValue, useSelectionWrite } from "../useDocWrite.js";
+
+const DEFAULT_STROKE: Stroke = { color: "#ffffff", widthPx: 1, align: "center" };
+
+export function StrokeSection() {
+  const write = useSelectionWrite();
+  const present = useSelectionValue((layer) => layer.paint.stroke !== undefined);
+  const color = useSelectionValue((layer) => layer.paint.stroke?.color ?? DEFAULT_STROKE.color);
+  const width = useSelectionValue((layer) => layer.paint.stroke?.widthPx ?? DEFAULT_STROKE.widthPx);
+  const align = useSelectionValue((layer) => layer.paint.stroke?.align ?? DEFAULT_STROKE.align);
+
+  const patch = (next: Partial<Stroke>): void =>
+    write((layer) => ({
+      ...layer,
+      paint: { ...layer.paint, stroke: { ...DEFAULT_STROKE, ...layer.paint.stroke, ...next } },
+    }));
+
+  return (
+    <InspectorSection
+      title="Stroke"
+      persistKey="shot:stroke"
+      action={
+        <button
+          type="button"
+          className="section-action"
+          title={present.value === true ? "Remove stroke" : "Add stroke"}
+          onClick={() =>
+            present.value === true
+              ? write((layer) => ({ ...layer, paint: withoutStroke(layer.paint) }))
+              : patch({})
+          }
+        >
+          {present.value === true ? "−" : "+"}
+        </button>
+      }
+    >
+      {present.value === true ? (
+        <>
+          <InspectorRow label="Color">
+            <ColorPicker
+              value={color.value ?? DEFAULT_STROKE.color}
+              ariaLabel="Stroke colour"
+              scrub={NO_SCRUB}
+              commit={(hex) => patch({ color: hex })}
+            />
+          </InspectorRow>
+          <InspectorRow>
+            <NumberField
+              value={width.value ?? 1}
+              mixed={width.mixed}
+              label="Width"
+              ariaLabel="Stroke width"
+              unit="px"
+              min={0}
+              step={0.5}
+              onCommit={(next) => patch({ widthPx: next })}
+            />
+          </InspectorRow>
+          <InspectorRow label="Align">
+            {/* Canvas2D only CENTRES a stroke, so inside and outside are a
+                half-width inset either way — raster.ts does that, and the three
+                options are honest because the raster honours all three. */}
+            <SegmentedControl
+              ariaLabel="Stroke align"
+              value={align.value ?? "center"}
+              options={[
+                { value: "inside", label: "In" },
+                { value: "center", label: "Mid" },
+                { value: "outside", label: "Out" },
+              ]}
+              onChange={(next) => patch({ align: next as Stroke["align"] })}
+            />
+          </InspectorRow>
+        </>
+      ) : null}
+    </InspectorSection>
+  );
+}
+
+function withoutStroke(paint: { stroke?: Stroke }): typeof paint {
+  const { stroke: _drop, ...rest } = paint;
+  return rest;
+}

package/src/panels/inspector/design/TransformSection.tsx

@@ -0,0 +1,91 @@
+// Position, size, depth, tilt, roll — every field the schema's `Transform3D`
+// carries, and the section where the read/write asymmetry actually bites.
+//
+// Every readout is the layer AS PAINTED at the playhead and every commit goes
+// through `setEffectiveField`, so the number typed is the number drawn. See
+// ../useDocWrite.ts for why both halves are required.
+import { InspectorRow, InspectorSection, NumberField, PropertyGrid } from "@dailies-studio/ui";
+import type { TransformField } from "@dailies-studio/shot/doc";
+import { useSelectionValue, useTransformWrite } from "../useDocWrite.js";
+import { AlignRow } from "./AlignRow.js";
+
+export function TransformSection() {
+  return (
+    <InspectorSection title="Transform" persistKey="shot:transform">
+      {/* Above the fields, the way Raylight leads its Position section: the
+          alignment buttons are how a layout actually gets made, and the
+          numbers are how it gets adjusted afterwards. */}
+      <AlignRow />
+      <PropertyGrid>
+        <Field field="x" label="X" unit="px" />
+        <Field field="y" label="Y" unit="px" />
+        <Field field="w" label="W" unit="px" min={1} />
+        <Field field="h" label="H" unit="px" min={1} />
+        {/* Depth is the field that makes this lane 3D, so it sits with the
+            position rather than in a section of its own. */}
+        <Field field="z" label="Z" unit="px" />
+        <Field field="roll" label="Roll" unit="°" step={1} />
+        <Field field="tiltX" label="Tilt X" unit="°" step={1} min={-180} max={180} />
+        <Field field="tiltY" label="Tilt Y" unit="°" step={1} min={-180} max={180} />
+      </PropertyGrid>
+    </InspectorSection>
+  );
+}
+
+function Field({
+  field,
+  label,
+  unit,
+  step = 1,
+  min,
+  max,
+}: {
+  field: TransformField;
+  label: string;
+  unit?: string;
+  step?: number;
+  min?: number;
+  max?: number;
+}) {
+  const write = useTransformWrite();
+  const { value, mixed } = useSelectionValue((_layer, effective) => readField(effective, field));
+  if (value === undefined) return null;
+  return (
+    <InspectorRow>
+      <NumberField
+        value={value}
+        mixed={mixed}
+        label={label}
+        ariaLabel={label}
+        {...(unit === undefined ? {} : { unit })}
+        step={step}
+        {...(min === undefined ? {} : { min })}
+        {...(max === undefined ? {} : { max })}
+        onCommit={(next) => write(field, next)}
+      />
+    </InspectorRow>
+  );
+}
+
+function readField(t: { position: readonly number[]; size: readonly number[]; tilt: readonly number[]; rollDeg: number; opacity: number }, field: TransformField): number {
+  switch (field) {
+    case "x":
+      return t.position[0]!;
+    case "y":
+      return t.position[1]!;
+    case "z":
+      return t.position[2]!;
+    case "w":
+      return t.size[0]!;
+    case "h":
+      return t.size[1]!;
+    case "tiltX":
+      return t.tilt[0]!;
+    case "tiltY":
+      return t.tilt[1]!;
+    case "roll":
+      return t.rollDeg;
+    case "opacity":
+      return t.opacity;
+  }
+}

package/src/panels/inspector/design/TypographySection.tsx

@@ -0,0 +1,170 @@
+// Only for TEXT layers, and absent otherwise — a typography section over a
+// rectangle is four controls that write nothing.
+//
+// `verticalAlign` is offered here and is HONOURED, unlike in the 2D lane where
+// it is declared-and-inert: this lane owns the text box, so top/middle/bottom
+// is one offset in the rasterizer rather than a change to a layout model.
+import { ColorPicker, InspectorRow, InspectorSection, NumberField, SegmentedControl, TextField } from "@dailies-studio/ui";
+import { DEFAULT_TEXT_STAGGER } from "@dailies-studio/shot/doc";
+import type { TextStagger, TextStyle } from "@dailies-studio/shot/doc";
+import type { Layer3D, TextLayer3D } from "@dailies-studio/shot/doc";
+import { NO_SCRUB, useSelectedLayers, useSelectionValue, useSelectionWrite } from "../useDocWrite.js";
+
+export function TypographySection() {
+  const write = useSelectionWrite();
+  const layers = useSelectedLayers();
+  const anyText = layers.some((l) => l.kind === "text");
+  const style = useSelectionValue((layer) => (layer.kind === "text" ? layer.text.style : undefined));
+  const content = useSelectionValue((layer) => (layer.kind === "text" ? layer.text.content : ""));
+  if (!anyText || style.value === undefined) return null;
+
+  const patchStyle = (next: Partial<TextStyle>): void =>
+    write((layer) =>
+      layer.kind === "text"
+        ? ({ ...layer, text: { ...layer.text, style: { ...layer.text.style, ...next } } } as Layer3D)
+        : layer,
+    );
+
+  const s = style.value;
+  return (
+    <InspectorSection title="Text" persistKey="shot:text">
+      <InspectorRow label="Content">
+        <TextField
+          value={content.value ?? ""}
+          ariaLabel="Text content"
+          onCommit={(next) =>
+            write((layer) =>
+              layer.kind === "text" ? ({ ...layer, text: { ...layer.text, content: next } } as Layer3D) : layer,
+            )
+          }
+        />
+      </InspectorRow>
+      <InspectorRow label="Font">
+        <TextField value={s.fontFamily} ariaLabel="Font family" onCommit={(next) => patchStyle({ fontFamily: next })} />
+      </InspectorRow>
+      <InspectorRow>
+        <NumberField value={s.sizePx} label="Size" ariaLabel="Font size" unit="px" min={1} step={1} onCommit={(v) => patchStyle({ sizePx: v })} />
+      </InspectorRow>
+      <InspectorRow>
+        <NumberField value={s.weight} label="Weight" ariaLabel="Font weight" min={100} max={900} step={100} onCommit={(v) => patchStyle({ weight: v })} />
+      </InspectorRow>
+      <InspectorRow>
+        <NumberField value={s.lineHeight} label="Line" ariaLabel="Line height" step={0.05} min={0.5} onCommit={(v) => patchStyle({ lineHeight: v })} />
+      </InspectorRow>
+      <InspectorRow>
+        <NumberField value={s.letterSpacingPx} label="Letter" ariaLabel="Letter spacing" unit="px" step={0.1} onCommit={(v) => patchStyle({ letterSpacingPx: v })} />
+      </InspectorRow>
+      <InspectorRow label="Color">
+        <ColorPicker value={s.color} ariaLabel="Text colour" scrub={NO_SCRUB} commit={(hex) => patchStyle({ color: hex })} />
+      </InspectorRow>
+      <InspectorRow label="Align">
+        <SegmentedControl
+          ariaLabel="Text align"
+          value={s.align}
+          options={[
+            { value: "left", label: "L" },
+            { value: "center", label: "C" },
+            { value: "right", label: "R" },
+          ]}
+          onChange={(next) => patchStyle({ align: next as TextStyle["align"] })}
+        />
+      </InspectorRow>
+      <InspectorRow label="Vertical">
+        <SegmentedControl
+          ariaLabel="Vertical align"
+          value={s.verticalAlign ?? "top"}
+          options={[
+            { value: "top", label: "T" },
+            { value: "middle", label: "M" },
+            { value: "bottom", label: "B" },
+          ]}
+          onChange={(next) => patchStyle({ verticalAlign: next as NonNullable<TextStyle["verticalAlign"]> })}
+        />
+      </InspectorRow>
+    </InspectorSection>
+  );
+}
+
+/**
+ * The SHAPE of a per-unit stagger, which is a property of the text rather than
+ * of any one block — see `TextStagger` for why it cannot live on the block.
+ *
+ * Its own section rather than four more rows under Text: it is inert until a
+ * `stagger` block exists on the layer, so it deserves to be collapsed away for
+ * the layers that never animate.
+ *
+ * Every field writes a WHOLE record spread from the default, so the first edit
+ * materialises what "absent means the default" already meant. Reading does the
+ * same, so the fields show the real starting values instead of blanks.
+ */
+export function TextStaggerSection() {
+  const write = useSelectionWrite();
+  const layers = useSelectedLayers();
+  const anyText = layers.some((l) => l.kind === "text");
+  const stagger = useSelectionValue((layer) =>
+    layer.kind === "text" ? (layer.text.stagger ?? DEFAULT_TEXT_STAGGER) : undefined,
+  );
+  if (!anyText || stagger.value === undefined) return null;
+
+  const patch = (next: Partial<TextStagger>): void =>
+    write((layer) =>
+      layer.kind === "text"
+        ? ({
+            ...layer,
+            text: { ...layer.text, stagger: { ...DEFAULT_TEXT_STAGGER, ...layer.text.stagger, ...next } },
+          } as Layer3D)
+        : layer,
+    );
+
+  const g = stagger.value;
+  return (
+    <InspectorSection title="Stagger" persistKey="shot:textStagger">
+      <InspectorRow label="Unit">
+        <SegmentedControl
+          ariaLabel="Stagger unit"
+          value={g.unit}
+          options={[
+            { value: "char", label: "Char" },
+            { value: "word", label: "Word" },
+            { value: "line", label: "Line" },
+          ]}
+          onChange={(next) => patch({ unit: next as TextStagger["unit"] })}
+        />
+      </InspectorRow>
+      <InspectorRow>
+        <NumberField
+          value={g.spread}
+          label="Spread"
+          ariaLabel="Stagger spread"
+          min={0}
+          max={1}
+          step={0.05}
+          onCommit={(v) => patch({ spread: v })}
+        />
+      </InspectorRow>
+      <InspectorRow>
+        <NumberField
+          value={g.risePx}
+          label="Rise"
+          ariaLabel="Stagger rise"
+          unit="px"
+          step={1}
+          onCommit={(v) => patch({ risePx: v })}
+        />
+      </InspectorRow>
+      <InspectorRow>
+        <NumberField
+          value={g.fadeFrom}
+          label="Fade from"
+          ariaLabel="Stagger fade from"
+          min={0}
+          max={1}
+          step={0.05}
+          onCommit={(v) => patch({ fadeFrom: v })}
+        />
+      </InspectorRow>
+    </InspectorSection>
+  );
+}
+
+void ({} as TextLayer3D);

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

@@ -0,0 +1,59 @@
+// The scene's camera, as five fields. Shown under the scene, when nothing is
+// selected.
+//
+// ── THE SAME TWO TRUTHS THE LAYER INSPECTOR FOLLOWS ─────────────────────
+//
+// READ EFFECTIVE: `cameraAt` at the playhead, which is what is on screen. A
+// section that read `scene.camera` would say x=0 while a finished move held the
+// camera at 400, and the author would type against a number nothing agrees
+// with.
+//
+// WRITE BASE, AND REFUSE WHEN THAT IS INVISIBLE: from the first shot's start
+// onwards `cameraAt` is painting a shot's framing, so writing `scene.camera`
+// there would dirty the document and move nothing. That refusal is not written
+// here. It is `writeFraming`'s, reached through the store's `writeCamera`, the
+// same seam the frustum drag, the align and the fit all go through. This panel
+// is a keyboard frustum and deliberately has no opinion of its own.
+//
+// The two halves are coherent by construction rather than by care:
+// `shotOwningCamera` is null exactly when `cameraAt` returns `scene.camera`, so
+// whenever a base write is allowed the effective value IS the base.
+import { InspectorSection } from "@dailies-studio/ui";
+import { cameraAt, shotOwningCamera } from "@dailies-studio/shot/doc";
+import { useShotEditor, useStore } from "../../../state/context.js";
+import { FramingRows } from "../FramingRows.js";
+import { useInspectorFrame } from "../useDocWrite.js";
+
+export function CameraSection() {
+  const store = useStore();
+  const doc = useShotEditor((s) => s.doc);
+  const animate = useShotEditor((s) => s.animateMode);
+  const { sceneId, sceneFrame } = useInspectorFrame();
+  if (doc === null || sceneId === null) return null;
+  const scene = doc.scenesById[sceneId];
+  if (scene === undefined) return null;
+
+  // Only worth saying with animate OFF: with it on the same write authors a
+  // move instead of being refused, so naming the owner would be a warning about
+  // something that is not going to happen.
+  const owner = animate ? null : shotOwningCamera(scene, sceneFrame);
+
+  return (
+    <InspectorSection title="Camera" persistKey="shot:camera">
+      <FramingRows
+        framing={cameraAt(scene, sceneFrame, doc.fps)}
+        name="Camera"
+        onCommit={(patch) => store.setSceneCamera(patch)}
+      />
+      {owner !== null && (
+        // The fields stay LIVE. Typing into one produces the refusal by name in
+        // the error strip, which is how the author learns the rule; a disabled
+        // field would only teach them that the panel is broken.
+        <span className="insp-dim" data-testid="camera-held-by">
+          Held by the camera move “{owner.label}” from frame {owner.frame}. Turn on Animate (⇧A) to author the
+          move, or put the playhead before it.
+        </span>
+      )}
+    </InspectorSection>
+  );
+}