@dailies-studio/shot-editor 0.1.0 → 0.2.0

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

@@ -1,5 +1,7 @@
 // Only for CLONER layers, and absent otherwise — the same rule MeshSection and
-// TypographySection follow, for the same reason.
+// TypographySection follow, for the same reason. `layout.ts` declares the
+// ceiling; the LEAD-is-a-cloner withholding below is this file's, which is
+// where `layout.ts` says a shape-of-selection rule belongs.
 //
 // 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
@@ -15,10 +17,26 @@
 // about the frame budget, not a broken document. The hard cap IS a refusal, and
 // that one is the validator's.
 //
+// ── EVERY NUMBER DRAGS LIVE ─────────────────────────────────────────────
+//
+// A number row is `ClonerNumber`: its typed value and its drag are ONE
+// builder over each cloner's own block, so the clones move while the pointer
+// is down, and a release lands the document its moves drew.
+//
 // 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 { Combobox, InspectorRow, InspectorSection, NumberField, SegmentedControl, wordOptions } from "@dailies-studio/ui";
+import {
+  CLONER_MODES,
+  CLONE_FROMS,
+  MAX_CLONES,
+  MAX_SPLINE_ANGLE_DEG,
+  SPLINE_DOMAINS,
+  SPLINE_FORWARD_AXES,
+  SPLINE_ORIENTATIONS,
+  cloneCountWarning,
+  meshPrimitiveOf,
+} from "@dailies-studio/shot/doc";
 import type {
   CloneFrom,
   ClonerConfig,
@@ -26,17 +44,33 @@ import type {
   ClonerMode,
   ClonerModeKind,
   Layer3D,
+  SplineDomain,
+  SplineForwardAxis,
+  SplineOrientation,
 } from "@dailies-studio/shot/doc";
-import { useSelectedLayers, useSelectionValue, useSelectionWrite } from "../useDocWrite.js";
+import { useShotEditor } from "../../../state/context.js";
+import { useSelectedLayers, useSelectionScrub, useSelectionWrite } from "../useDocWrite.js";
+import { KeyframeDot } from "../KeyframeDot.js";
+import { splineSourceIsSafe } from "../../../state/splineRefs.js";
 
 type ClonerBlock = ClonerLayer3D["cloner"];
+type SplineClonerMode = Extract<ClonerMode, { kind: "spline" }>;
+
+/** What a widget with no `mixed` prop of its own shows when the selection
+ *  disagrees. `SegmentedControl` renders an unmatched value as "none of these
+ *  selected" and `Combobox` falls back to its placeholder, which is the same
+ *  statement in each one's own vocabulary. Both constants are
+ *  `TypographySection`'s spelling; `StrokeSection` writes the empty value
+ *  inline and has no combobox to place a placeholder in. */
+const NO_SEGMENT = "";
+const MIXED_PLACEHOLDER = "Mixed";
 
 /** 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
+ *  columns is refused on save, so a picker 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 {
+function defaultMode(kind: ClonerModeKind, spline?: string): ClonerMode {
   switch (kind) {
     case "grid":
       return { kind, columns: 3, spacing: [240, 240] };
@@ -44,6 +78,8 @@ function defaultMode(kind: ClonerModeKind): ClonerMode {
       return { kind, radiusPx: 320 };
     case "scatter":
       return { kind, extent: [320, 320, 0] };
+    case "spline":
+      return spline === undefined ? { kind: "linear", step: [240, 0, 0] } : { kind, spline };
     default:
       return { kind: "linear", step: [240, 0, 0] };
   }
@@ -52,86 +88,229 @@ function defaultMode(kind: ClonerModeKind): ClonerMode {
 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 doc = useShotEditor((state) => state.doc);
+  const sceneId = useShotEditor((state) => state.sceneId);
+  const editingDef = useShotEditor((state) => state.editingDef);
+  // ── THE CLONER LAYERS THEMSELVES, NOT `useSelectionValue` ───────────────
+  //
+  // That hook compares members with `Object.is` and `layer.cloner` is an
+  // OBJECT, so two selected cloners were "Mixed" by identity — every row wore
+  // the placeholder over numbers the author could see agree, while the writes
+  // below still fanned out to both. The hook reports such a read on
+  // `console.error`, which is how this was found. Mixed is asked per FIELD by
+  // `mixedOn` instead, the shape `MeshSection` and `DeviceSection` already use.
+  //
+  // Data gate, not a kind gate: see layout.ts. The LEAD is the subject, so a
+  // selection led in document order by something that is not a cloner has no
+  // arrangement to show — `inspectorLayout.test.tsx` pins that withholding, and
+  // the rule survives the move off the hook because the lead is still what a
+  // row displays.
+  const lead = layers[0];
+  if (lead === undefined || lead.kind !== "cloner") return null;
 
-  const c = cloner.value;
+  const c = lead.cloner;
+  const cloners = layers.filter((l): l is ClonerLayer3D => l.kind === "cloner");
   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 }));
+  /** ONE ROW, ONE QUESTION: does THIS field disagree across the selected
+   *  cloners? Every row reads the scalar it displays, so a row that agrees shows
+   *  its value however many layers are selected. */
+  const mixedOn = <T,>(read: (block: ClonerBlock) => T): boolean =>
+    cloners.some((l) => !Object.is(read(l.cloner), read(c)));
+
+  /** The same question for a row only the SPLINE arrangement has. A selected
+   *  cloner arranged some other way reads `undefined` here, which disagrees with
+   *  any number — the honest answer, because that layer has no such field for
+   *  the fan-out to land on either. */
+  const mixedOnSpline = <T,>(read: (mode: SplineClonerMode) => T): boolean =>
+    mixedOn((block) => (block.mode?.kind === "spline" ? read(block.mode) : undefined));
+
+  /** One spline-mode field, on each cloner's OWN base mode, and only on
+   *  cloners arranged along a spline (`withSplineMode`). */
+  const setSpline = (edit: (mode: SplineClonerMode) => SplineClonerMode): void =>
+    patch((block) => withSplineMode(block, edit));
+
+  /** One number of the CURRENT arrangement (F16), written on each cloner's OWN
+   *  mode and only on cloners arranged the same way, so a fan-out never copies
+   *  the lead's arrangement onto another cloner. Mixed is per field, as the
+   *  spline rows ask it. */
+  const modeNumber = <K extends ClonerModeKind>(
+    kind: K,
+    label: string,
+    read: (mode: Extract<ClonerMode, { kind: K }>) => number,
+    edit: (mode: Extract<ClonerMode, { kind: K }>, next: number) => ClonerMode,
+    field: { min?: number; unit?: string } = {},
+  ) => {
+    const own = (block: ClonerBlock) =>
+      block.mode?.kind === kind ? (block.mode as Extract<ClonerMode, { kind: K }>) : undefined;
+    return (
+      <ClonerNumber
+        key={label}
+        value={read(own(c)!)}
+        mixed={mixedOn((block) => { const mode = own(block); return mode === undefined ? undefined : read(mode); })}
+        label={label}
+        ariaLabel={`Cloner ${label.toLowerCase()}`}
+        step={1}
+        {...(field.min === undefined ? {} : { min: field.min })}
+        {...(field.unit === undefined ? {} : { unit: field.unit })}
+        edit={(block, next) => { const mode = own(block); return mode === undefined ? block : { ...block, mode: edit(mode, next) }; }}
+      />
+    );
+  };
 
   const stagger = c.stagger;
-  const warning = cloneCountWarning(c.count);
+  // ── THE WARNING BELONGS TO A NUMBER THAT IS ON SCREEN ──────────────────
+  //
+  // It names a count ("120 clones is a lot to draw"), so it can only be said
+  // about a count the author can see. With two cloners selected the Count
+  // field reads "Mixed" and shows no number at all, and a sentence underneath
+  // naming the LEAD layer's 120 would be pointing at a figure nothing in the
+  // panel displays — worse than silence, because it reads as a fact about the
+  // selection rather than about one member of it.
+  const countMixed = mixedOn((block) => block.count);
+  const warning = countMixed ? null : cloneCountWarning(c.count);
+  const home = doc === null
+    ? undefined
+    : editingDef === null
+      ? (sceneId === null ? undefined : doc.scenesById[sceneId])
+      : doc.components?.[editingDef];
+  const selected = new Set(layers.map((layer) => layer.id));
+  const baseFollowOwnsPath = layers.some(
+    (layer) => layer.kind === "cloner" && layer.splineFollow !== undefined,
+  );
+  const splines = Object.values(home?.layersById ?? {})
+    .filter((layer) =>
+      layer.kind === "mesh" &&
+      meshPrimitiveOf(layer.mesh)?.kind === "spline" &&
+      !selected.has(layer.id) &&
+      splineSourceIsSafe(home?.layersById ?? {}, [...selected], layer.id, "cloner"),
+    )
+    .map((layer) => ({ value: layer.id, label: layer.label }));
+  const modeOptions = wordOptions(
+    CLONER_MODES.filter(
+      (kind) =>
+        kind !== "spline" ||
+        c.mode?.kind === "spline" ||
+        (!baseFollowOwnsPath && splines.length > 0),
+    ),
+  );
+  const splineMode = c.mode?.kind === "spline" ? c.mode : null;
+  const splineMixed = splineMode !== null && mixedOnSpline((mode) => mode.spline);
+  const modeMixed = mixedOn((block) => block.mode?.kind ?? "linear");
+  const fromMixed = mixedOn((block) => block.stagger?.from ?? "start");
 
   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>
+    <InspectorSection className="insp-object" title="Cloner" persistKey="shot:cloner">
+      {/* The name is the FIELD's, not the row's: the label rides inside the
+          box, and the whole box is one drag surface. CLAMPED at the field
+          (`MAX_CLONES`), 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. */}
+      <ClonerNumber
+        value={c.count}
+        mixed={countMixed}
+        label="Count"
+        ariaLabel="Clone count"
+        step={1}
+        min={1}
+        max={MAX_CLONES}
+        edit={(block, next) => ({ ...block, count: Math.round(next) })}
+      />
       {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">
+        /* A warning, in the panel's warning register: the save still goes
+           through, but the frame budget will feel it. */
+        <div className="insp-notice is-warn" data-testid="cloner-count-warning">
           {warning}
-        </p>
+        </div>
       )}
 
+      {/* A COMBOBOX, as the house line has it past four options: five
+          arrangements as segments left each word 9px at the inspector's floor
+          and 14px at its default width, run together into one string. */}
       <InspectorRow label="Arrange">
-        <SegmentedControl
+        <Combobox
           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))}
+          value={modeMixed ? NO_SEGMENT : (c.mode?.kind ?? "linear")}
+          placeholder={modeMixed ? MIXED_PLACEHOLDER : "Arrange"}
+          options={modeOptions}
+          // A cloner already arranged this way keeps its own settings.
+          onChange={(next) =>
+            patch((block) =>
+              (block.mode?.kind ?? "linear") === next
+                ? block
+                : { ...block, mode: defaultMode(next as ClonerModeKind, splines[0]?.value) },
+            )
+          }
         />
       </InspectorRow>
+      {c.mode?.kind === "grid" ? [
+        modeNumber("grid", "Columns", (m) => m.columns, (m, n) => ({ ...m, columns: Math.max(1, Math.round(n)) }), { min: 1 }),
+        modeNumber("grid", "Gap X", (m) => m.spacing[0], (m, n) => ({ ...m, spacing: withAxis(m.spacing, 0, n) })),
+        modeNumber("grid", "Gap Y", (m) => m.spacing[1], (m, n) => ({ ...m, spacing: withAxis(m.spacing, 1, n) })),
+      ] : null}
+      {c.mode?.kind === "radial" ? [
+        modeNumber("radial", "Radius", (m) => m.radiusPx, (m, n) => ({ ...m, radiusPx: n })),
+        modeNumber("radial", "Start", (m) => m.startDeg ?? 0, (m, n) => ({ ...m, startDeg: n }), { unit: "°" }),
+        modeNumber("radial", "Sweep", (m) => m.sweepDeg ?? 360, (m, n) => ({ ...m, sweepDeg: n }), { unit: "°" }),
+      ] : null}
+      {c.mode?.kind === "scatter"
+        ? AXES.map((axis, i) => modeNumber("scatter", `Extent ${axis}`, (m) => m.extent[i]!, (m, n) => ({ ...m, extent: withAxis(m.extent, i, n) })))
+        : null}
+      {c.mode?.kind === "linear"
+        ? AXES.map((axis, i) => modeNumber("linear", `Step ${axis}`, (m) => m.step[i]!, (m, n) => ({ ...m, step: withAxis(m.step, i, n) })))
+        : null}
+      {baseFollowOwnsPath && splineMode === null ? (
+        <p className="insp-note">Remove spline follow before using spline distribution.</p>
+      ) : null}
+
+      {splineMode === null ? null : (
+        <>
+          <InspectorRow label="Spline">
+            <Combobox options={splines} value={splineMixed ? NO_SEGMENT : splineMode.spline} ariaLabel="Cloner spline" placeholder={splineMixed ? MIXED_PLACEHOLDER : "Choose spline"} onChange={(spline) => setSpline((mode) => ({ ...mode, spline }))} />
+          </InspectorRow>
+          <InspectorRow label="Domain">
+            <SegmentedControl ariaLabel="Cloner spline domain" value={mixedOnSpline((mode) => mode.domain ?? "full") ? NO_SEGMENT : (splineMode.domain ?? "full")} options={wordOptions(SPLINE_DOMAINS)} onChange={(domain) => setSpline((mode) => ({ ...mode, domain: domain as SplineDomain }))} />
+          </InspectorRow>
+          <ClonerNumber path="cloner.mode.start" label="Start" value={splineMode.start ?? 0} mixed={mixedOnSpline((mode) => mode.start ?? 0)} min={0} max={1} step={0.01} edit={(block, start) => withSplineMode(block, (mode) => ({ ...mode, start }))} />
+          <ClonerNumber path="cloner.mode.end" label="End" value={splineMode.end ?? 1} mixed={mixedOnSpline((mode) => mode.end ?? 1)} min={0} max={1} step={0.01} edit={(block, end) => withSplineMode(block, (mode) => ({ ...mode, end }))} />
+          <ClonerNumber path="cloner.mode.progressOffset" label="Offset" value={splineMode.progressOffset ?? 0} mixed={mixedOnSpline((mode) => mode.progressOffset ?? 0)} step={0.01} edit={(block, progressOffset) => withSplineMode(block, (mode) => ({ ...mode, progressOffset }))} />
+          <InspectorRow label="Orient">
+            <SegmentedControl ariaLabel="Cloner spline orientation" value={mixedOnSpline((mode) => mode.orientation ?? "path") ? NO_SEGMENT : (splineMode.orientation ?? "path")} options={wordOptions(SPLINE_ORIENTATIONS)} onChange={(orientation) => setSpline((mode) => ({ ...mode, orientation: orientation as SplineOrientation }))} />
+          </InspectorRow>
+          {(splineMode.orientation ?? "path") === "path" ? (
+            <>
+              <InspectorRow label="Forward">
+                <Combobox options={SPLINE_FORWARD_AXES.map((value) => ({ value, label: value.toUpperCase() }))} value={mixedOnSpline((mode) => mode.forwardAxis ?? "+x") ? NO_SEGMENT : (splineMode.forwardAxis ?? "+x")} ariaLabel="Cloner forward axis" placeholder={mixedOnSpline((mode) => mode.forwardAxis ?? "+x") ? MIXED_PLACEHOLDER : "Axis"} onChange={(forwardAxis) => setSpline((mode) => ({ ...mode, forwardAxis: forwardAxis as SplineForwardAxis }))} />
+              </InspectorRow>
+              <ClonerNumber path="cloner.mode.bankDeg" label="Bank" value={splineMode.bankDeg ?? 0} mixed={mixedOnSpline((mode) => mode.bankDeg ?? 0)} min={-MAX_SPLINE_ANGLE_DEG} max={MAX_SPLINE_ANGLE_DEG} step={1} unit="°" edit={(block, bankDeg) => withSplineMode(block, (mode) => ({ ...mode, bankDeg }))} />
+            </>
+          ) : null}
+        </>
+      )}
 
       {/* 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>
+      <ClonerNumber
+        value={stagger?.each ?? 0}
+        mixed={mixedOn((block) => block.stagger?.each ?? 0)}
+        label="Stagger"
+        ariaLabel="Stagger each"
+        unit="f"
+        step={1}
+        edit={withStaggerEach}
+      />
 
+      {/* Six orders: a combobox, as Arrange is. */}
       <InspectorRow label="From">
-        <SegmentedControl
+        <Combobox
           ariaLabel="Stagger from"
-          value={stagger?.from ?? "start"}
-          options={CLONE_FROMS.map((from) => ({ value: from, label: from }))}
+          value={fromMixed ? NO_SEGMENT : (stagger?.from ?? "start")}
+          placeholder={fromMixed ? MIXED_PLACEHOLDER : "From"}
+          options={wordOptions(CLONE_FROMS)}
           onChange={(next) =>
             patch((block) => ({ ...block, stagger: { ...block.stagger, from: next as CloneFrom } }))
           }
@@ -140,3 +319,85 @@ export function ClonerSection() {
     </InspectorSection>
   );
 }
+
+const AXES = ["X", "Y", "Z"] as const;
+
+/** A copy of a spacing, step or extent vector with one axis replaced. */
+function withAxis<V extends number[]>(vec: V, axis: number, next: number): V {
+  return vec.map((value, i) => (i === axis ? next : value)) as V;
+}
+
+/** A spline-mode edit on ONE cloner's own base mode, and only when it is
+ *  arranged along a spline. Spreading the lead's painted mode instead moved
+ *  every cloner onto the lead's spline and baked its sampled values. */
+function withSplineMode(block: ClonerBlock, edit: (mode: SplineClonerMode) => SplineClonerMode): ClonerBlock {
+  return block.mode?.kind === "spline" ? { ...block, mode: edit(block.mode) } : block;
+}
+
+/** The stagger's spacing, which CLEARS `span`: the two contradict each other
+ *  the moment the count changes. 0 deletes the stagger: absent is how "no
+ *  stagger" is spelled everywhere in this lane, and `each: 0` would be a
+ *  second way to say it. */
+function withStaggerEach(block: ClonerBlock, next: number): ClonerBlock {
+  const each = Math.round(next);
+  if (each === 0) {
+    const { stagger: _drop, ...rest } = block;
+    return rest as ClonerConfig;
+  }
+  const { span: _dropSpan, ...keep } = block.stagger ?? {};
+  return { ...block, stagger: { ...keep, each } };
+}
+
+/**
+ * One number of a cloner, as one box: the typed value and the drag are ONE
+ * builder (`edit`) over each cloner's own block, re-derived from the gesture's
+ * base on every capture, so a drag moves the clones live and never compounds.
+ * `path` is the track it keys, which puts its diamond in the box.
+ */
+function ClonerNumber({
+  label,
+  ariaLabel,
+  value,
+  mixed,
+  unit,
+  min,
+  max,
+  step,
+  path,
+  edit,
+}: {
+  label: string;
+  ariaLabel?: string;
+  value: number;
+  mixed: boolean;
+  unit?: string;
+  min?: number;
+  max?: number;
+  step: number;
+  path?: string;
+  edit: (block: ClonerBlock, value: number) => ClonerBlock;
+}) {
+  const write = useSelectionWrite();
+  const build = (layer: Layer3D, next: number): Layer3D =>
+    layer.kind === "cloner" ? ({ ...layer, cloner: edit(layer.cloner, next) } as Layer3D) : layer;
+  const scrub = useSelectionScrub((layer, raw) => build(layer, Number(raw)));
+  return (
+    <InspectorRow>
+      <NumberField
+        value={value}
+        mixed={mixed}
+        label={label}
+        ariaLabel={ariaLabel ?? label}
+        {...(unit === undefined ? {} : { unit })}
+        {...(min === undefined ? {} : { min })}
+        {...(max === undefined ? {} : { max })}
+        step={step}
+        trailing={path === undefined ? undefined : <KeyframeDot path={path} label={label} />}
+        onCommit={(next) => write((layer) => build(layer, next))}
+        onScrubStart={scrub.start}
+        onScrub={scrub.move}
+        onScrubEnd={scrub.end}
+      />
+    </InspectorRow>
+  );
+}

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

@@ -5,40 +5,64 @@
 // 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";
+//
+// ── ONE ROW FOR ONE USE'S PROP ──────────────────────────────────────────
+//
+// An override is this placement's value for one of the definition's props,
+// which is exactly what Components' THIS USE panel shows for the same layer.
+// So the rows ARE that panel's rows (`UsePropRow`): the control each prop's
+// target describes (`exposedRowOf`, so a published 0..1 opacity is a bounded
+// field and a published enum keeps its options), the override read the way
+// the renderer writes it (`appliedOverride`: under a `renamedFrom` key too,
+// and a value it quarantines read as none), the master read off what the
+// definition draws (`masterValueOf`, the interior layer, never a stale
+// published default), and one write (`writeUseValue`), by which typing the
+// master's value stores nothing and the instance goes on following its
+// definition.
+import { InspectorRow, InspectorSection } from "@dailies-studio/ui";
+import { appliedOverride, 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 { useMemo } from "react";
 import { useShotEditor, useStore } from "../../../state/context.js";
-import { NO_SCRUB, useSelectedLayers } from "../useDocWrite.js";
+import { layerUseKey, masterValueOf } from "../../../state/workspace.js";
+import { UsePropRow } from "../../studio/ThisUsePanel.js";
+import { exposedRowOf, projectAssetsOf } from "../propValue.js";
+import { useSelectedLayers } from "../useDocWrite.js";
 
 export function ComponentSection() {
   const store = useStore();
   const doc = useShotEditor((s) => s.doc);
+  const contracts = useShotEditor((s) => s.contracts);
+  // THE CONTAINER the layer lives in, the store's `layerContainer` rule: a
+  // component placed inside another definition is a use of that definition.
+  const container = useShotEditor((s) => s.editingDef ?? s.sceneId);
   const layers = useSelectedLayers();
+  const assetTable = doc?.assets;
+  const assets = useMemo(() => projectAssetsOf(assetTable), [assetTable]);
   // 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];
+  const instance = layers.length === 1 && layers[0]?.kind === "component" ? (layers[0] as ComponentLayer3D) : null;
+  if (doc === null || instance === null || container === null) return null;
+  const def = componentDefsOf(doc)[instance.component.def];
 
   if (def === undefined) {
     return (
-      <InspectorSection title="Component" persistKey="shot:component">
-        <p className="inspector-note">
+      <InspectorSection className="insp-object" title="Component" persistKey="shot:component">
+        <p className="insp-note">
           This places a component that is not in this document. Its definition
-          was probably deleted — undo, or delete this layer.
+          was probably deleted. Undo, or delete this layer.
         </p>
       </InspectorSection>
     );
   }
 
-  const overrides = (instance as ComponentLayer3D).component.overrides;
+  const overrides = instance.component.overrides;
   const count = instancesOf(doc, def.id).length;
+  const useKey = layerUseKey(container, instance.id);
+  const use = { def: def.id };
 
   return (
-    <InspectorSection title="Component" persistKey="shot:component">
+    <InspectorSection className="insp-object" title="Component" persistKey="shot:component">
       <InspectorRow label="Definition">
         <button
           type="button"
@@ -51,43 +75,26 @@ export function ComponentSection() {
           {def.name}
         </button>
       </InspectorRow>
-      <p className="inspector-note">
-        {count === 1 ? "The only one placed." : `${count} placed — editing it changes all of them.`}
+      <p className="insp-note">
+        {count === 1 ? "The only one placed." : `${count} placed. Editing it changes all of them.`}
       </p>
 
       {def.exposed.length === 0 ? (
-        <p className="inspector-note">
+        <p className="insp-empty">
           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>
-          );
-        })
+        def.exposed.map((prop) => (
+          <UsePropRow
+            key={prop.key}
+            useKey={useKey}
+            row={exposedRowOf(prop, def, doc.materials, contracts)}
+            stored={appliedOverride(def, prop, overrides)?.value}
+            master={masterValueOf(doc, contracts, use, prop.key)}
+            assets={assets}
+          />
+        ))
       )}
     </InspectorSection>
   );