@dailies-studio/shot-editor 0.1.0

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

@@ -0,0 +1,126 @@
+// 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.
+//
+// ── WHY THIS PANEL IS PLAIN FIELDS AND THE SCENE'S CAMERA IS 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.
+//
+// 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 { 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";
+
+const KINDS = [
+  { value: "dolly", label: "Dolly" },
+  { value: "zoom", label: "Zoom" },
+];
+
+export function ShotSection() {
+  const store = useStore();
+  const doc = useShotEditor((s) => s.doc);
+  const focused = useShotEditor((s) => s.selectedBlock);
+  const { sceneId, sceneFrame } = useInspectorFrame();
+  if (doc === null || sceneId === null || focused === null || focused.layerId !== CAMERA_ROW_ID) {
+    return null;
+  }
+  const scene = doc.scenesById[sceneId];
+  const shot = scene?.shots.find((s) => s.id === focused.blockId);
+  if (scene === undefined || shot === undefined) return null;
+
+  // LIVE state at the click, never the hook's coalesced frame: the hook holds
+  // during playback and trails ~100ms after a scrub, and "set from current
+  // 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.
+  const onScreen = (): Framing => {
+    const s = store.getState();
+    if (s.doc === null || s.sceneId === null) return cameraAt(scene, sceneFrame, doc.fps);
+    const liveScene = s.doc.scenesById[s.sceneId] ?? scene;
+    return cameraAt(liveScene, sceneLocalFrame(s.doc, s.sceneId, s.frame), s.doc.fps);
+  };
+
+  return (
+    <InspectorSection 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={KINDS}
+              onChange={(next) => store.setShotKind(shot.id, next as MoveShot["kind"])}
+            />
+          </InspectorRow>
+          {/* 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">
+            {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>
+        </>
+      )}
+
+      <EaseControl
+        {...(shot.ease === undefined ? {} : { ease: shot.ease })}
+        ariaLabel="Move ease"
+        onEase={(ease) => store.setShotEase(shot.id, ease)}
+        onScrub={(ease) => store.setShotEase(shot.id, ease)}
+      />
+
+      {shot.kind === "path" ? null : (
+        <>
+          <FramingGroup shot={shot} end="from" title="From" read={onScreen} />
+          <FramingGroup shot={shot} end="to" title="To" read={onScreen} />
+        </>
+      )}
+    </InspectorSection>
+  );
+}
+
+function FramingGroup(props: { shot: MoveShot; end: "from" | "to"; title: string; read(): Framing }) {
+  const store = useStore();
+  const { shot, end, title } = props;
+  return (
+    <>
+      <InspectorRow label={title}>
+        <button
+          type="button"
+          className="btn"
+          onClick={() => store.setShotFraming(shot.id, end, props.read())}
+        >
+          Set from current framing
+        </button>
+      </InspectorRow>
+      <FramingRows
+        framing={shot[end]}
+        name={title}
+        onCommit={(patch) => store.setShotFraming(shot.id, end, patch)}
+      />
+    </>
+  );
+}

package/src/panels/inspector/animate/useBlocks.ts

@@ -0,0 +1,43 @@
+// What the Animate panel reads: the selection's blocks, and the focused one.
+//
+// The focused block is `state.selectedBlock`, which the timeline dock ALSO
+// writes when a bar is clicked. One bit, two surfaces: clicking a bar in the
+// dock puts its timing and easing in the inspector, and adding a block from the
+// inspector focuses its bar. Two independent "which block" states would drift
+// apart within one session.
+import { useShotEditor } from "../../../state/context.js";
+import { useSelectedLayers } from "../useDocWrite.js";
+import type { AnimBlock, BlockSlot, Layer3D } from "@dailies-studio/shot/doc";
+
+export interface BlockRef {
+  layer: Layer3D;
+  block: AnimBlock;
+}
+
+/** Every block on the selection in one slot, layer-major then frame-major.
+ *  Sorted, because a fan-out across four layers otherwise lists in whatever
+ *  order each layer happened to accumulate its blocks. */
+export function useBlocksInSlot(slot: BlockSlot): BlockRef[] {
+  const layers = useSelectedLayers();
+  const out: BlockRef[] = [];
+  for (const layer of layers) {
+    for (const block of layer.blocks) {
+      if (block.slot === slot) out.push({ layer, block });
+    }
+  }
+  out.sort((a, b) => a.block.frame - b.block.frame || a.block.id.localeCompare(b.block.id));
+  return out;
+}
+
+/** The block the timing and easing controls are about, or null. */
+export function useFocusedBlock(): BlockRef | null {
+  const focused = useShotEditor((s) => s.selectedBlock);
+  const layers = useSelectedLayers();
+  if (focused === null) return null;
+  const layer = layers.find((l) => l.id === focused.layerId);
+  const block = layer?.blocks.find((b) => b.id === focused.blockId);
+  // A block whose layer left the selection is NOT shown: the panel's subject is
+  // the selection, and showing a stray block would let the author edit
+  // something the canvas is not highlighting.
+  return layer !== undefined && block !== undefined ? { layer, block } : null;
+}

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

@@ -0,0 +1,63 @@
+// The align/distribute grid, the first thing in Raylight's Position section.
+//
+// Six alignments then two distributions, in two rows of four — the same order
+// and grouping every design tool uses, so the muscle memory transfers.
+//
+// The icons are inline SVG rather than glyphs: the whole point of this control
+// is that you recognise it without reading it, and no font ships a
+// distribute-horizontally character.
+import { ALIGN_MODES } from "@dailies-studio/shot/doc";
+import type { AlignMode } from "@dailies-studio/shot/doc";
+import { useShotEditor, useStore } from "../../../state/context.js";
+import { useSelectedLayers } from "../useDocWrite.js";
+
+/** Label and icon geometry per mode. `satisfies` so a new ALIGN_MODES entry
+ *  without a row here is a compile error rather than a blank button. */
+const SPEC = {
+  left: { label: "Align left", bar: [2, 2, 1.6, 12], marks: [[4, 3.5, 8, 3], [4, 9.5, 5, 3]] },
+  hcenter: { label: "Align horizontal centres", bar: [7.2, 2, 1.6, 12], marks: [[3, 3.5, 10, 3], [4.5, 9.5, 7, 3]] },
+  right: { label: "Align right", bar: [12.4, 2, 1.6, 12], marks: [[4, 3.5, 8, 3], [7, 9.5, 5, 3]] },
+  top: { label: "Align top", bar: [2, 2, 12, 1.6], marks: [[3.5, 4, 3, 8], [9.5, 4, 3, 5]] },
+  vcenter: { label: "Align vertical centres", bar: [2, 7.2, 12, 1.6], marks: [[3.5, 3, 3, 10], [9.5, 4.5, 3, 7]] },
+  bottom: { label: "Align bottom", bar: [2, 12.4, 12, 1.6], marks: [[3.5, 4, 3, 8], [9.5, 7, 3, 5]] },
+  hdistribute: { label: "Distribute horizontally", bar: null, marks: [[2, 4, 3, 8], [6.5, 4, 3, 8], [11, 4, 3, 8]] },
+  vdistribute: { label: "Distribute vertically", bar: null, marks: [[4, 2, 8, 3], [4, 6.5, 8, 3], [4, 11, 8, 3]] },
+} as const satisfies Record<AlignMode, { label: string; bar: readonly number[] | null; marks: ReadonlyArray<readonly number[]> }>;
+
+export function AlignRow() {
+  const store = useStore();
+  const layers = useSelectedLayers();
+  const doc = useShotEditor((s) => s.doc);
+  if (doc === null || layers.length === 0) return null;
+
+  return (
+    <div className="align-grid" role="group" aria-label="Align and distribute" data-testid="align-row">
+      {ALIGN_MODES.map((mode) => {
+        const spec = SPEC[mode];
+        // Distribute needs three. Disabled rather than hidden: a control that
+        // vanishes teaches nothing, and the tooltip says what is missing.
+        const needsThree = spec.bar === null && layers.length < 3;
+        return (
+          <button
+            key={mode}
+            type="button"
+            className="align-button"
+            aria-label={spec.label}
+            title={needsThree ? `${spec.label} — needs 3 or more layers` : spec.label}
+            disabled={needsThree}
+            onClick={() => store.alignSelection(mode)}
+          >
+            <svg width="16" height="16" viewBox="0 0 16 16" aria-hidden="true">
+              {spec.bar !== null && (
+                <rect x={spec.bar[0]} y={spec.bar[1]} width={spec.bar[2]} height={spec.bar[3]} className="align-icon-rule" />
+              )}
+              {spec.marks.map((m, i) => (
+                <rect key={i} x={m[0]} y={m[1]} width={m[2]} height={m[3]} rx="1" className="align-icon-box" />
+              ))}
+            </svg>
+          </button>
+        );
+      })}
+    </div>
+  );
+}

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

@@ -0,0 +1,49 @@
+// Opacity, visibility and lock.
+//
+// Opacity is a MULTIPLICATIVE channel, so typing into it divides the block's
+// delta out — and at a delta of zero there is no base that renders at the value
+// asked for, which `setEffectiveField` refuses by name rather than guessing.
+import { InspectorRow, InspectorSection, NumberField, Toggle } from "@dailies-studio/ui";
+import { useSelectionValue, useSelectionWrite, useTransformWrite } from "../useDocWrite.js";
+
+export function AppearanceSection() {
+  const write = useSelectionWrite();
+  const writeTransform = useTransformWrite();
+  const opacity = useSelectionValue((_l, effective) => Math.round(effective.opacity * 100));
+  const hidden = useSelectionValue((layer) => layer.hidden === true);
+  const locked = useSelectionValue((layer) => layer.locked === true);
+
+  return (
+    <InspectorSection title="Appearance" persistKey="shot:appearance">
+      <InspectorRow>
+        <NumberField
+          value={opacity.value ?? 100}
+          mixed={opacity.mixed}
+          label="Opacity"
+          ariaLabel="Opacity"
+          unit="%"
+          min={0}
+          max={100}
+          step={1}
+          onCommit={(next) => writeTransform("opacity", next / 100)}
+        />
+      </InspectorRow>
+      <InspectorRow label="Visible">
+        <Toggle
+          checked={hidden.value !== true}
+          ariaLabel="Visible"
+          onChange={(next) => write((layer) => ({ ...layer, hidden: !next }))}
+        />
+      </InspectorRow>
+      <InspectorRow label="Locked">
+        {/* Written through `useSelectionWrite`, which SKIPS locked layers — so
+            unlocking has to bypass it or a lock would be one-way. */}
+        <Toggle
+          checked={locked.value === true}
+          ariaLabel="Locked"
+          onChange={(next) => write((layer) => ({ ...layer, locked: next }), { includeLocked: true })}
+        />
+      </InspectorRow>
+    </InspectorSection>
+  );
+}

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

@@ -0,0 +1,142 @@
+// Only for CLONER layers, and absent otherwise — the same rule MeshSection and
+// TypographySection follow, for the same reason.
+//
+// Deliberately the SHORT list: how many, in what arrangement, and how they are
+// staggered in time. The step and jitter channels, the per-clone override map
+// and `from`'s six orderings all exist in the schema and are reachable from the
+// agent lane; a first section that shows every field is a section nobody can
+// find the count in.
+//
+// ── THE COUNT WARNING IS NOT A VALIDATION PROBLEM ───────────────────────
+//
+// `cloneCountWarning` lives here rather than in `validateShotDoc` because a
+// `ShotProblem` REFUSES the save. "Two hundred clones will cost you two hundred
+// draw calls" must never stop an author saving their document — it is a fact
+// about the frame budget, not a broken document. The hard cap IS a refusal, and
+// that one is the validator's.
+//
+// ponytail: no override editor. Per-clone edits are agent-authored today; build
+// the row when someone is actually art-directing one clone out of forty.
+import { InspectorRow, InspectorSection, NumberField, SegmentedControl } from "@dailies-studio/ui";
+import { CLONER_MODES, CLONE_FROMS, MAX_CLONES, cloneCountWarning } from "@dailies-studio/shot/doc";
+import type {
+  CloneFrom,
+  ClonerConfig,
+  ClonerLayer3D,
+  ClonerMode,
+  ClonerModeKind,
+  Layer3D,
+} from "@dailies-studio/shot/doc";
+import { useSelectedLayers, useSelectionValue, useSelectionWrite } from "../useDocWrite.js";
+
+type ClonerBlock = ClonerLayer3D["cloner"];
+
+/** The mode a kind switch lands on, with its own required fields filled in.
+ *  Switching arrangement must produce a VALID mode: a `{kind:"grid"}` with no
+ *  columns is refused on save, so a segmented control that could write one is a
+ *  control that only breaks documents. The numbers are the same defaults
+ *  `add_layer` uses. */
+function defaultMode(kind: ClonerModeKind): ClonerMode {
+  switch (kind) {
+    case "grid":
+      return { kind, columns: 3, spacing: [240, 240] };
+    case "radial":
+      return { kind, radiusPx: 320 };
+    case "scatter":
+      return { kind, extent: [320, 320, 0] };
+    default:
+      return { kind: "linear", step: [240, 0, 0] };
+  }
+}
+
+export function ClonerSection() {
+  const write = useSelectionWrite();
+  const layers = useSelectedLayers();
+  const cloner = useSelectionValue((layer) => (layer.kind === "cloner" ? layer.cloner : undefined));
+  if (!layers.some((l) => l.kind === "cloner") || cloner.value === undefined) return null;
+
+  const c = cloner.value;
+  const patch = (next: (block: ClonerBlock) => ClonerBlock): void =>
+    write((layer) => (layer.kind === "cloner" ? ({ ...layer, cloner: next(layer.cloner) } as Layer3D) : layer));
+
+  const set = <K extends keyof ClonerBlock>(key: K, value: ClonerBlock[K]): void =>
+    patch((block) => ({ ...block, [key]: value }));
+
+  const stagger = c.stagger;
+  const warning = cloneCountWarning(c.count);
+
+  return (
+    <InspectorSection title="Cloner" persistKey="shot:cloner">
+      <InspectorRow label="Count">
+        <NumberField
+          value={c.count}
+          mixed={cloner.mixed}
+          ariaLabel="Clone count"
+          step={1}
+          min={1}
+          // CLAMPED at the field, so the cap is a thing the control cannot
+          // exceed rather than a save that fails after the fact. The validator
+          // still refuses it, for every other way in.
+          max={MAX_CLONES}
+          onCommit={(next) => set("count", Math.min(MAX_CLONES, Math.max(1, Math.round(next))))}
+        />
+      </InspectorRow>
+      {warning === null ? null : (
+        /* `inspector-empty` is the panel's muted-paragraph style and this is a
+           muted paragraph. A `.inspector-warning` would be the same three
+           declarations under a name that promised a colour it does not have. */
+        <p className="inspector-empty" data-testid="cloner-count-warning">
+          {warning}
+        </p>
+      )}
+
+      <InspectorRow label="Arrange">
+        <SegmentedControl
+          ariaLabel="Cloner mode"
+          value={c.mode?.kind ?? "linear"}
+          options={CLONER_MODES.map((kind) => ({ value: kind, label: kind }))}
+          onChange={(next) => set("mode", defaultMode(next as ClonerModeKind))}
+        />
+      </InspectorRow>
+
+      {/* The stagger's SPACING, as `each` — the gap between clones. `span`
+          expresses the same thing as a total and the two contradict each other
+          the moment the count changes, so the panel offers exactly one of them
+          and writing it CLEARS the other rather than saving a document the
+          validator refuses. */}
+      <InspectorRow label="Stagger">
+        <NumberField
+          value={stagger?.each ?? 0}
+          mixed={cloner.mixed}
+          ariaLabel="Stagger each"
+          unit="f"
+          step={1}
+          onCommit={(next) =>
+            patch((block) => {
+              const each = Math.round(next);
+              if (each === 0) {
+                // Absent is how "no stagger" is spelled everywhere in this
+                // lane. Writing `each: 0` would be a second way to say it.
+                const { stagger: _drop, ...rest } = block;
+                return rest as ClonerConfig;
+              }
+              const { span: _dropSpan, ...keep } = block.stagger ?? {};
+              return { ...block, stagger: { ...keep, each } };
+            })
+          }
+        />
+      </InspectorRow>
+
+      <InspectorRow label="From">
+        <SegmentedControl
+          ariaLabel="Stagger from"
+          value={stagger?.from ?? "start"}
+          options={CLONE_FROMS.map((from) => ({ value: from, label: from }))}
+          onChange={(next) =>
+            patch((block) => ({ ...block, stagger: { ...block.stagger, from: next as CloneFrom } }))
+          }
+        />
+      </InspectorRow>
+    </InspectorSection>
+  );
+}

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

@@ -0,0 +1,94 @@
+// A component instance: which definition it places, and what this one changes.
+//
+// The panel is DEFINITION-DRIVEN. Every row comes from an `ExposedProp3D`, so
+// an instance can only change what its definition offered — which is what makes
+// a component a contract rather than a copy. A definition that exposes nothing
+// gets a panel that says so, because "no controls" and "this component has no
+// controls" read very differently to the author who just made one.
+import { InspectorRow, InspectorSection, PropControl } from "@dailies-studio/ui";
+import { componentDefsOf, instancesOf } from "@dailies-studio/shot/doc";
+import type { ComponentLayer3D } from "@dailies-studio/shot/doc";
+import type { ControlSpec } from "@dailies-studio/contract";
+import type { Value } from "@dailies-studio/engine";
+import { useShotEditor, useStore } from "../../../state/context.js";
+import { NO_SCRUB, useSelectedLayers } from "../useDocWrite.js";
+
+export function ComponentSection() {
+  const store = useStore();
+  const doc = useShotEditor((s) => s.doc);
+  const layers = useSelectedLayers();
+  // ONE instance, not a mixed selection: overrides are per definition, and two
+  // instances of two different definitions have no shared vocabulary at all.
+  const instance = layers.length === 1 && layers[0]?.kind === "component" ? layers[0] : null;
+  if (doc === null || instance === null) return null;
+  const def = componentDefsOf(doc)[(instance as ComponentLayer3D).component.def];
+
+  if (def === undefined) {
+    return (
+      <InspectorSection title="Component" persistKey="shot:component">
+        <p className="inspector-note">
+          This places a component that is not in this document. Its definition
+          was probably deleted — undo, or delete this layer.
+        </p>
+      </InspectorSection>
+    );
+  }
+
+  const overrides = (instance as ComponentLayer3D).component.overrides;
+  const count = instancesOf(doc, def.id).length;
+
+  return (
+    <InspectorSection title="Component" persistKey="shot:component">
+      <InspectorRow label="Definition">
+        <button
+          type="button"
+          className="link-button"
+          aria-label={`Edit ${def.name}`}
+          // Editing the DEFINITION reaches every instance at once, which is the
+          // whole point — so the button says which and how many.
+          onClick={() => store.editComponent(def.id)}
+        >
+          {def.name}
+        </button>
+      </InspectorRow>
+      <p className="inspector-note">
+        {count === 1 ? "The only one placed." : `${count} placed — editing it changes all of them.`}
+      </p>
+
+      {def.exposed.length === 0 ? (
+        <p className="inspector-note">
+          Nothing is exposed yet. Open the definition and expose a field to make
+          it overridable here.
+        </p>
+      ) : (
+        def.exposed.map((prop) => {
+          const value = overrides[prop.key];
+          return (
+            <InspectorRow key={prop.key} label={prop.label}>
+              <PropControl
+                spec={{ key: prop.key, label: prop.label, kind: prop.kind, default: prop.default } as ControlSpec}
+                value={value ?? prop.default}
+                commit={(next) => store.setComponentOverride(instance.id, prop.key, next as Value)}
+                scrub={NO_SCRUB}
+              />
+              {/* The override's own reset. An instance that says nothing FOLLOWS
+                  its definition, so clearing is not "set it back to today's
+                  default" — it is "stop having an opinion", and the two differ
+                  the moment the definition changes. */}
+              <button
+                type="button"
+                className="layer-flag"
+                aria-label={`Reset ${prop.label}`}
+                title="Follow the component again"
+                disabled={value === undefined}
+                onClick={() => store.setComponentOverride(instance.id, prop.key, null)}
+              >
+                ↺
+              </button>
+            </InspectorRow>
+          );
+        })
+      )}
+    </InspectorSection>
+  );
+}

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

@@ -0,0 +1,52 @@
+// Corner radius. ONE field drives all four corners, because a shot's layers are
+// screenshots and cards — per-corner radii exist in the schema (`CornerRadius`)
+// and are what an ejected component keeps, but a four-field row for a feature
+// nobody has asked for is four fields to mis-set.
+//
+// ponytail: uniform radius only; add the per-corner expander when a template
+// needs one.
+import { InspectorRow, InspectorSection, NumberField } from "@dailies-studio/ui";
+import type { CornerRadius } from "@dailies-studio/shot/doc";
+import { useSelectionValue, useSelectionWrite } from "../useDocWrite.js";
+
+export function CornerSection() {
+  const write = useSelectionWrite();
+  const radius = useSelectionValue((layer) => uniformOf(layer.paint.radius));
+
+  return (
+    <InspectorSection title="Corner" persistKey="shot:corner">
+      <InspectorRow>
+        <NumberField
+          value={radius.value ?? 0}
+          mixed={radius.mixed}
+          label="Radius"
+          ariaLabel="Corner radius"
+          unit="px"
+          min={0}
+          step={1}
+          onCommit={(next) =>
+            write((layer) => ({
+              ...layer,
+              paint:
+                next <= 0
+                  ? withoutRadius(layer.paint)
+                  : { ...layer.paint, radius: { tl: next, tr: next, br: next, bl: next } },
+            }))
+          }
+        />
+      </InspectorRow>
+    </InspectorSection>
+  );
+}
+
+/** The largest corner, so a document with mixed corners reads as the shape the
+ *  author sees rather than as zero. */
+function uniformOf(radius: CornerRadius | undefined): number {
+  if (radius === undefined) return 0;
+  return Math.max(radius.tl, radius.tr, radius.br, radius.bl);
+}
+
+function withoutRadius(paint: { radius?: CornerRadius }): typeof paint {
+  const { radius: _drop, ...rest } = paint;
+  return rest;
+}

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

@@ -0,0 +1,89 @@
+// The fill. Solid only in the inspector for now: a gradient needs the stop
+// editor, which @dailies-studio/ui has (`GradientValueEditor`) and which wants
+// the gradient adapter the 2D lane wrote — that is a section of its own rather
+// than a control squeezed in here.
+//
+// PAINT HAS NO BLOCK DELTAS in v1, so a paint read and a paint write are both
+// BASE and cannot disagree. That is why nothing here goes through
+// `setEffectiveField`.
+import { ColorPicker, InspectorRow, InspectorSection } from "@dailies-studio/ui";
+import type { Layer3D, Paint } from "@dailies-studio/shot/doc";
+import { NO_SCRUB, useSelectedLayers, useSelectionValue, useSelectionWrite } from "../useDocWrite.js";
+
+const DEFAULT_FILL = "#ffffff";
+
+export function FillSection() {
+  const write = useSelectionWrite();
+  const layers = useSelectedLayers();
+  const fill = useSelectionValue((layer) => solidOf(layer.paint.fill));
+  const present = useSelectionValue((layer) => layer.paint.fill !== undefined);
+
+  // A FILL IS INERT ON MEDIA, so the control is absent rather than dead.
+  // `drawLayer` paints `paint.fill` only in the arm that is neither "mask" nor
+  // "plate" (raster.ts), and `MediaPlane` asks for exactly those two — the
+  // content pixels come from the asset. A colour swatch that writes a document
+  // field and moves nothing is worse than no swatch: the author changes it,
+  // sees nothing, and concludes the renderer is broken.
+  //
+  // ONLY when the whole selection is media. A mixed one keeps the section,
+  // because the rects in it still fill and `useSelectionWrite` already skips
+  // the layers a write cannot reach.
+  //
+  // Deliberately NOT extended to mesh/instance/cloner, whose fills are inert
+  // for a different reason (they mount their own content and are refused by
+  // `rasterizesLayer` upstream of this) — one gate per reason.
+  if (layers.length > 0 && layers.every(isMedia)) return null;
+
+  return (
+    <InspectorSection
+      title="Fill"
+      persistKey="shot:fill"
+      action={
+        <button
+          type="button"
+          className="section-action"
+          title={present.value === true ? "Remove fill" : "Add fill"}
+          onClick={() =>
+            write((layer) =>
+              present.value === true
+                ? { ...layer, paint: withoutFill(layer.paint) }
+                : { ...layer, paint: { ...layer.paint, fill: { type: "solid", color: DEFAULT_FILL } } },
+            )
+          }
+        >
+          {present.value === true ? "−" : "+"}
+        </button>
+      }
+    >
+      {present.value === true ? (
+        <InspectorRow label="Color">
+          <ColorPicker
+            value={fill.value ?? DEFAULT_FILL}
+            ariaLabel="Fill colour"
+            scrub={NO_SCRUB}
+            commit={(hex) =>
+              write((layer) => ({ ...layer, paint: { ...layer.paint, fill: { type: "solid", color: hex } } }))
+            }
+          />
+        </InspectorRow>
+      ) : null}
+    </InspectorSection>
+  );
+}
+
+/** A gradient has no single colour, so the swatch shows its FIRST stop and the
+ *  picker would overwrite it — which is why the row is only offered for a solid
+ *  and a gradient keeps whatever the document holds. */
+function solidOf(paint: Paint | undefined): string {
+  if (paint === undefined) return DEFAULT_FILL;
+  return paint.type === "solid" ? paint.color : (paint.stops[0]?.color ?? DEFAULT_FILL);
+}
+
+function isMedia(layer: Layer3D): boolean {
+  return layer.kind === "image" || layer.kind === "video";
+}
+
+function withoutFill(paint: { fill?: Paint }): typeof paint {
+  const { fill: _drop, ...rest } = paint;
+  return rest;
+}