@dailies-studio/shot-editor 0.1.0 → 0.2.0

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

@@ -2,12 +2,13 @@
 // kind-specific section here follows.
 //
 // ROWS COME FROM THE CONTRACT, NEVER FROM THE STORED VALUES. The widget for a
-// prop is decided by its ControlSpec through the shared `PropControl` cluster,
-// the same dispatch the motion editor's InstanceSection and the canvas editor's
-// EmbedSection use — so a colour prop gets a swatch and an enum gets its
-// options here for exactly the reason it does there. Deriving rows from
-// `instance.props` instead would show only props somebody had already changed,
-// with no kinds, no ranges and no labels.
+// prop is decided by its ControlSpec through the shared `PropRow`, the one row
+// every ControlSpec surface renders (a definition's published props, a code
+// component's defaults, one use of a component on the board or in Components),
+// so a colour prop gets the colour field and an enum its words here for exactly
+// the reason it does there. Deriving rows from `instance.props` instead would
+// show only props somebody had already changed, with no kinds, no ranges and
+// no labels.
 //
 // WHICH contract: the LIVE one from the registry when the project still has the
 // component, falling back to the `{source:"snapshot"}` contract the document
@@ -18,7 +19,7 @@
 // ── QUARANTINE, WHICH IS THE POINT OF THE WHOLE SECTION ─────────────────
 //
 // A stored prop whose contract key has gone is NOT dropped and NOT hidden. The
-// rename/orphan planner (`instancePropPlan`, which is
+// Accept plan (`planInstanceAccept`, whose rename/orphan planner is
 // `resolveTracksAgainstContract` underneath) classifies it, and it gets its own
 // row above the contract rows: the value it is holding, what it was keyed on,
 // and the two things an author can do about it. Both documented real-world
@@ -31,59 +32,28 @@
 // default and stores nothing; `buildProps` supplies it at render time. Baking
 // defaults in at insert time would freeze them against later edits to the
 // component itself.
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import {
-  instanceContractDrift,
-  instancePropPlan,
-  orphanedPropKeys,
+  INSTANCE_PROP_PREFIX,
+  acceptStepWords,
+  findLayer,
+  frozenDefaultWords,
+  frozenDefaultsOf,
+  planInstanceAccept,
 } from "@dailies-studio/shot/doc";
+import type { FrozenDefault, InstanceAcceptPlan } from "@dailies-studio/shot/doc";
+import { controlLabel, orderSpecs } from "@dailies-studio/contract";
 import type { Contract, ControlSpec } from "@dailies-studio/contract";
 import type { Value } from "@dailies-studio/engine";
-import { InspectorRow, InspectorSection, NumberField, PropControl } from "@dailies-studio/ui";
+import { InspectorRow, InspectorSection, NumberField, PropRow, useContextMenu, useLocked } from "@dailies-studio/ui";
+import type { PropControlAsset, PropRowReset } from "@dailies-studio/ui";
 import { useShotEditor, useStore } from "../../../state/context.js";
-import { NO_SCRUB, useSelectedLayers } from "../useDocWrite.js";
-
-/** Contract kinds whose values are engine `Value`s and can therefore live in
- *  `instance.props`. Everything else is composite (curve/gradient — those ride
- *  an encoded string, which IS a Value) or not a value at all (slot/event). */
-const VALUE_KINDS = new Set([
-  "number",
-  "string",
-  "color",
-  "boolean",
-  "enum",
-  "asset",
-  "vec2",
-  "vec3",
-  "quaternion",
-  "curve",
-  "gradient",
-]);
-
-/** Contract order, then key — the motion inspector's `orderedSpecs` rule. */
-function orderedSpecs(contract: Contract): ControlSpec[] {
-  return Object.values(contract.keys).sort((a, b) => {
-    const ao = a.order ?? Number.MAX_SAFE_INTEGER;
-    const bo = b.order ?? Number.MAX_SAFE_INTEGER;
-    return ao !== bo ? ao - bo : a.key.localeCompare(b.key);
-  });
-}
-
-/** PropControl hands back whatever its widget produced; only engine Values may
- *  be stored. Anything else is refused rather than written, because the next
- *  save would refuse the document. */
-function asValue(raw: unknown): Value | null {
-  if (typeof raw === "number" && Number.isFinite(raw)) return raw;
-  if (typeof raw === "string" || typeof raw === "boolean") return raw;
-  if (
-    Array.isArray(raw) &&
-    (raw.length === 2 || raw.length === 3 || raw.length === 4) &&
-    raw.every((n) => typeof n === "number" && Number.isFinite(n))
-  ) {
-    return raw as Value;
-  }
-  return null;
-}
+import { instanceDriftOf, instanceRegistryContract, withInstanceClockOffset } from "../../../state/store.js";
+import { sameUseValue } from "../../../state/workspace.js";
+import { useExposeOffered } from "../ExposeDot.js";
+import { KeyframeDot } from "../KeyframeDot.js";
+import { coercePropValue, isVectorSpec, outsideRangeOf, projectAssetsOf, propEditOf, shownPropValue } from "../propValue.js";
+import { useSelectedLayers, useSelectionScrub } from "../useDocWrite.js";
 
 export function InstanceSection() {
   const store = useStore();
@@ -93,14 +63,35 @@ export function InstanceSection() {
   const libraryLoaded = useShotEditor((s) => s.libraryLoaded);
   const libraryError = useShotEditor((s) => s.libraryError);
   const layers = useSelectedLayers();
+  const failures = useShotEditor((s) => s.stagePieceFailures);
   const [rebinding, setRebinding] = useState(false);
+  // Also the refusal of a Replace, which binds a contract the same way.
   const [rebindError, setRebindError] = useState<string | null>(null);
+  const replaceMenu = useContextMenu();
+  // A viewer's panel: the verbs below write, so they are disabled with it, as
+  // every widget under the lock is. Open code only opens, and stays live.
+  const locked = useLocked();
+  // The Project's assets, which an asset prop picks from. Memoised on the
+  // asset table: the section repaints on every document identity change, and
+  // the table itself changes only on an upload.
+  const assetTable = doc?.assets;
+  const assets = useMemo(() => projectAssetsOf(assetTable), [assetTable]);
 
   // ONE layer at a time, deliberately. An instance's props belong to one
   // component's contract, so a fan-out across a mixed selection would write
   // keys the other layers' components never had.
   const layer = layers.length === 1 && layers[0]?.kind === "instance" ? layers[0] : null;
   const componentId = layer?.instance.component ?? null;
+  const layerId = layer?.id ?? null;
+
+  // The Clock field's DRAG half: a drag moves the module's clock while the
+  // pointer is down, one undo entry, rather than waiting for the release.
+  // Guarded on the id, because the seam fans out over the live selection.
+  const clockScrub = useSelectionScrub((l, raw) =>
+    l.kind === "instance" && l.id === layerId && typeof raw === "number" && Number.isFinite(raw)
+      ? { ...l, instance: withInstanceClockOffset(l.instance, raw) }
+      : l,
+  );
 
   // Hooks stay unconditional (the section mounts for every selection and
   // self-gates on kind).
@@ -113,57 +104,156 @@ export function InstanceSection() {
   if (doc === null || layer === null || componentId === null) return null;
 
   const row = library.find((r) => r.id === componentId);
+  const loadError = failures.find((f) => f.kind === "instance" && f.layerId === layer.id);
   const ref = layer.instance.contract;
   const snapshot: Contract | null = ref?.source === "snapshot" ? ref.contract : null;
   const live = contracts[componentId];
   const contract = live ?? snapshot;
-  // Judged only once the registry has ANSWERED — and "answered" means a
-  // successful fetch, not merely "loading finished". A FAILED fetch also ends
-  // with an empty list, and reporting every instance as an unknown component
-  // over a transient network failure would tell the author to delete work.
-  const drift = libraryLoaded
-    ? instanceContractDrift(doc, (id) => {
-        const r = library.find((c) => c.id === id);
-        const c = contracts[id];
-        return r === undefined || c === undefined
-          ? null
-          : { availability: r.contractAvailability ?? "inferred", contract: c };
-      }).filter((d) => d.layerId === layer.id)
-    : [];
+  const drift = instanceDriftOf({ doc, library, libraryLoaded, contracts }, layer.id);
   const missing = libraryLoaded && row === undefined;
 
-  const specs = contract === null || contract === undefined ? [] : orderedSpecs(contract);
-  // The quarantine list. Against the LIVE contract when there is one: a key is
-  // only orphaned relative to what the component accepts today.
-  const orphans =
-    live === undefined ? [] : orphanedPropKeys(instancePropPlan(layer.instance.props, snapshot ?? live, live));
+  const specs = contract === null || contract === undefined ? [] : orderSpecs(contract);
+  // THE ACCEPT PLAN, ONE for the drift notice and the quarantine list, so the
+  // notice says what the press does and the list is exactly what it sets
+  // aside. Planned on the STORED layer: `layer` is painted at the playhead,
+  // so an animated prop's value there is a sample, and a plan from it would
+  // describe a write the store does not make. Against the LIVE contract only:
+  // a key is orphaned relative to what the component accepts today. The
+  // registry row only says how Accept would bind, which no step depends on,
+  // so a list that has not loaded (or failed) still shows the quarantine,
+  // with its Discard. A malformed contract throws, and then there is no plan.
+  const registry =
+    instanceRegistryContract({ library, contracts }, componentId) ??
+    (live === undefined ? null : { availability: "inferred" as const, contract: live });
+  const stored = findLayer(doc, layer.id)?.layer;
+  let plan: InstanceAcceptPlan | null = null;
+  if (registry !== null && stored?.kind === "instance" && stored.id === layer.id) {
+    try {
+      plan = planInstanceAccept(stored, registry, null);
+    } catch {
+      plan = null;
+    }
+  }
+  // WHAT THE STAGE RENDERS for each unset prop of a snapshot-bound layer: the
+  // FROZEN default, not the live one the rows would otherwise show. Shown on
+  // the row and named in the drift notice, so a picture that differs from
+  // the component's current look says why.
+  const frozen: FrozenDefault[] =
+    registry !== null && stored?.kind === "instance" && stored.id === layer.id ? frozenDefaultsOf(stored, registry) : [];
+  const orphans = (plan?.steps ?? []).flatMap((step) =>
+    step.op === "keep-aside" && step.value ? [{ key: step.key, reason: step.reason }] : [],
+  );
 
   return (
-    <InspectorSection title="Component" persistKey="shot:instance">
-      <InspectorRow label="Module">
-        <span className="insp-fixed" title={componentId}>
-          {row?.name ?? componentId}
-        </span>
+    <InspectorSection className="insp-object" title="Component" persistKey="shot:instance">
+      {/* THE MODULE, and for a PROJECT component it is a door. A builtin ships
+          inside a package and has no file to open, and a component the registry
+          has lost has nothing to open either, so both stay plain text — the
+          panel's rule for a verb this subject cannot do at all.
+
+          The plain-text arm is a READ-ONLY VALUE, so the row is the house
+          readout (`insp-readout`), its value the `.insp-dim` span, with
+          `.is-text` when it has a NAME to show: a display name set in the
+          numeral font reads as a measurement. It said `insp-fixed` for a long
+          time, a class with no rule anywhere in the repo, so the row had no
+          face at all. */}
+      <InspectorRow label="Module" {...(row === undefined || row.builtin === true ? { className: "insp-readout" } : {})}>
+        {row === undefined || row.builtin === true ? (
+          <span className={row?.name === undefined ? "insp-dim" : "insp-dim is-text"} title={componentId}>
+            {row?.name ?? componentId}
+          </span>
+        ) : (
+          <button
+            type="button"
+            className="link-button"
+            data-testid="instance-open-code"
+            title={`Open ${row.rel}`}
+            onClick={() => void store.openCodeComponent(componentId)}
+          >
+            {row.name}
+          </button>
+        )}
       </InspectorRow>
 
+      {/* THE LOAD OR DRAW ERROR (F50). The stage draws a dashed placeholder where this
+          layer would be and reports it as a piece failure; this row names the
+          error and offers the three ways out. Replace picks another component
+          and swaps it in place, one undo step (`replaceInstanceComponent`), so
+          the layer keeps its place, timing and props. Remove deletes THIS layer
+          by id, never whatever block or key has focus. */}
+      {loadError !== undefined && (
+        <div className="insp-inline-error" data-testid="instance-load-error">
+          <span>{`This component failed to draw: ${loadError.message}`}</span>
+          <div className="insp-buttons">
+            {row === undefined || row.builtin === true ? null : (
+              <button
+                type="button"
+                className="btn"
+                data-testid="instance-error-open-code"
+                onClick={() => void store.openCodeComponent(componentId)}
+              >
+                Open code
+              </button>
+            )}
+            <button
+              type="button"
+              className="btn"
+              data-testid="instance-replace"
+              title="Swap this layer's component for another"
+              disabled={locked}
+              onClick={(e) => {
+                const at = e.currentTarget.getBoundingClientRect();
+                const others = library.filter((r) => r.host === "three" && r.id !== componentId);
+                replaceMenu.open(
+                  { x: at.left, y: at.bottom },
+                  others.length === 0
+                    ? [{ kind: "action", id: "none", label: "No other components to use", disabled: true, onSelect() {} }]
+                    : others.map((r) => ({
+                        kind: "action",
+                        id: r.id,
+                        label: r.name,
+                        detail: r.rel,
+                        onSelect() {
+                          void store.replaceInstanceComponent(layer.id, r.id).then(setRebindError);
+                        },
+                      })),
+                  { search: "Find a component" },
+                );
+              }}
+            >
+              Replace
+            </button>
+            <button type="button" className="btn" title="Delete this layer" disabled={locked} onClick={() => store.removeLayer(layer.id)}>
+              Remove
+            </button>
+          </div>
+          {replaceMenu.menu}
+        </div>
+      )}
+
       {/* mo1's "Play" on an instance, and the reason it is a NUMBER rather than
           a button: retriggering a module is an offset, not state, so it stays a
           pure function of the frame and an out-of-order export samples the same
           pose a scrub does. Negative holds the module at its own frame 0 until
-          the scene catches up. */}
-      <InspectorRow label="Clock">
+          the scene catches up. Its name starts with the word in its box, so
+          the Named label over the box and the Compact prefix in it agree. */}
+      <InspectorRow>
         <NumberField
           value={layer.instance.clockOffsetFrames ?? 0}
-          ariaLabel="Instance clock offset"
+          label="Clock"
+          ariaLabel="Clock offset"
           unit="f"
           step={1}
           onCommit={(next) => store.setInstanceClockOffset(layer.id, next)}
+          onScrubStart={clockScrub.start}
+          onScrub={clockScrub.move}
+          onScrubEnd={clockScrub.end}
         />
       </InspectorRow>
 
       {libraryError !== null && (
         <div className="insp-inline-error">
-          {`The component registry could not be read (${libraryError}) — this instance cannot be checked.`}
+          {`The component registry could not be read (${libraryError}), so this instance cannot be checked.`}
         </div>
       )}
 
@@ -177,49 +267,78 @@ export function InstanceSection() {
       {drift.length > 0 && (
         <div className="insp-notice is-warn">
           {drift.map((d) => (
-            <span key={d.code}>{d.message}</span>
+            <span key={d.code} className="insp-notice-line">
+              {d.message}
+            </span>
           ))}
+          {/* What the press will do, BEFORE it: the same plan the store
+              writes and `dailies validate` prints, in the same words. */}
+          {frozen.length > 0 && (
+            <span className="insp-notice-line" data-instance-frozen={layer.id}>
+              {`On screen now this layer ${frozen.map(frozenDefaultWords).join("; ")}.`}
+            </span>
+          )}
+          {plan !== null && (
+            <span className="insp-notice-line" data-instance-accept-steps={layer.id}>
+              {plan.steps.length > 0
+                ? `Accepting will: ${plan.steps.map(acceptStepWords).join("; ")}.`
+                : frozen.length > 0
+                  ? "Accepting renders the live defaults."
+                  : "Accepting only records the current contract."}
+            </span>
+          )}
           {/* The ONE action drift offers, and it is never automatic. Re-binding
               is a statement that the component's CURRENT contract is the one
               this instance means; the planner moves every renamed key's value
-              and leaves every orphan exactly where it is. */}
-          <button
-            className="btn"
-            disabled={rebinding}
-            data-instance-rebind={layer.id}
-            title="Re-record this instance's contract hash and source from the project's current component, following any renames"
-            onClick={() => {
-              setRebinding(true);
-              void store.rebindInstance(layer.id).then((err) => {
-                setRebinding(false);
-                setRebindError(err);
-              });
-            }}
-          >
-            Accept current contract
-          </button>
+              and keyframes, every value outside a range comes back inside it,
+              and every orphan's value stays exactly where it is. */}
+          <div className="insp-buttons">
+            <button
+              className="btn"
+              disabled={rebinding || locked}
+              data-instance-rebind={layer.id}
+              title="Re-record this instance's contract hash and source from the project's current component, following any renames and bringing values back inside its ranges"
+              onClick={() => {
+                setRebinding(true);
+                void store.rebindInstance(layer.id).then((err) => {
+                  setRebinding(false);
+                  setRebindError(err);
+                });
+              }}
+            >
+              Accept current contract
+            </button>
+          </div>
         </div>
       )}
       {rebindError !== null && <div className="insp-inline-error">{rebindError}</div>}
 
-      {orphans.map((key) => (
+      {orphans.map(({ key, reason }) => (
         <div key={`orphan:${key}`} className="insp-notice is-warn" data-instance-orphan={key}>
-          {`"${key}" is not a prop of this component any more. Its value is kept here and is not ` +
-            `passed to the component — nothing was deleted.`}
-          <button
-            className="btn"
-            data-instance-drop={key}
-            title={`Delete the stored value for "${key}". This is the only thing that ever removes it.`}
-            onClick={() => store.clearInstanceProp(layer.id, key)}
-          >
-            Discard
-          </button>
+          {/* Never "nothing was deleted": Accept deletes such a key's
+              keyframes. The value is what this row keeps. */}
+          {reason === "gone"
+            ? `"${key}" is not a prop of this component any more. Its value is kept here and is not ` +
+              `passed to the component.`
+            : `"${key}" now takes a different kind of value. The value stored here is of the old kind, ` +
+              `and the component is still handed it. Discard it to use the default.`}
+          <div className="insp-buttons">
+            <button
+              className="btn"
+              data-instance-drop={key}
+              disabled={locked}
+              title={`Delete the stored value for "${key}". This is the only thing that ever removes it.`}
+              onClick={() => store.clearInstanceProp(layer.id, key)}
+            >
+              Discard
+            </button>
+          </div>
         </div>
       ))}
 
       {contract === null || contract === undefined ? (
         <div className="insp-notice">
-          No contract available for this component — its props cannot be edited here.
+          No contract available for this component, so its props cannot be edited here.
         </div>
       ) : (
         <>
@@ -236,6 +355,9 @@ export function InstanceSection() {
               layerId={layer.id}
               spec={spec}
               value={layer.instance.props[spec.key]}
+              frozen={frozen.find((f) => f.key === spec.key)}
+              animated={layer.tracks?.[`${INSTANCE_PROP_PREFIX}${spec.key}`] !== undefined}
+              assets={assets}
             />
           ))}
         </>
@@ -244,59 +366,156 @@ export function InstanceSection() {
   );
 }
 
-function InstancePropRow(props: { layerId: string; spec: ControlSpec; value: Value | undefined }) {
-  const { layerId, spec } = props;
+/**
+ * One prop of one placed instance: the row, its diamond, its Reset.
+ *
+ * `value` is the layer AS PAINTED at the playhead (`useSelectedLayers`), so an
+ * animated prop shows its sampled value, and a typed one keys at the playhead
+ * (`patchInstance` routes the edit).
+ */
+function InstancePropRow(props: {
+  layerId: string;
+  spec: ControlSpec;
+  value: Value | undefined;
+  /** The frozen default the stage renders for this unset prop, when it is
+   *  not the live one (`frozenDefaultsOf`). */
+  frozen?: FrozenDefault | undefined;
+  /** The prop carries keyframes (`instance.props.<key>` has a track). */
+  animated: boolean;
+  assets: readonly PropControlAsset[];
+}) {
+  const { layerId, spec, animated } = props;
   const store = useStore();
+  const locked = useLocked();
   const [error, setError] = useState<string | null>(null);
-  // An unset prop shows (and edits from) the spec's default — the value the
-  // runtime's `buildProps` will supply — without ever storing it. `slot` and
-  // `event` carry no default at all, hence the presence check.
-  const value = props.value ?? ("default" in spec ? spec.default : undefined);
-  const storable = VALUE_KINDS.has(spec.kind);
-  const inherited = props.value === undefined;
+  const label = controlLabel(spec);
+  const path = `${INSTANCE_PROP_PREFIX}${spec.key}`;
+  const vector = isVectorSpec(spec);
+  const pinOffered = useExposeOffered(path);
+  // An unset prop shows (and edits from) the default the runtime's
+  // `buildProps` will supply, without ever storing it: the FROZEN one while
+  // the layer still renders its snapshot, else the spec's. `slot` and `event`
+  // carry no default at all, hence the presence check.
+  const fallback = props.frozen !== undefined ? props.frozen.frozen : "default" in spec ? spec.default : undefined;
+  const stored = props.value !== undefined;
+  // THE BLUE DOT (C4): a value this use stores that differs from the master,
+  // compared as the engine value the default is stored as (a curve's default
+  // is its decoded object, its stored value the canonical JSON).
+  const master = fallback === undefined ? null : coercePropValue(spec, fallback);
+  const changed = props.value !== undefined && !(master !== null && sameUseValue(props.value, master, spec.kind));
+
+  // A STORED value the range no longer holds (the component narrowed it, or
+  // a hand edit put it there), said under the row with the verb that brings
+  // it inside. Not for an animated prop: its keyframes are its value, and a
+  // typed edit of it is a key at the playhead.
+  const outside = animated ? null : outsideRangeOf(spec, props.value);
 
   const commit = (raw: unknown): void => {
-    const next = asValue(raw);
-    if (next === null) {
-      setError("instance props hold engine values only (number, string, boolean, vec2/3/4)");
+    const edit = propEditOf(spec, raw, fallback);
+    if (edit.kind === "refused") {
+      setError(edit.reason);
+      return;
+    }
+    // An asset's None CLEARS the prop, which under a track is the reset's data
+    // loss again (`routeTrackedEdit` takes the animation with a removed
+    // value), and a keyframe cannot hold "no asset" either. Refused, as the
+    // reset is, rather than dropping every key from a picker.
+    if (edit.kind === "clear" && animated) {
+      setError(`${label} is animated. Choosing None would delete its keyframes: remove them on the timeline first.`);
       return;
     }
     setError(null);
-    store.setInstanceProp(layerId, spec.key, next);
+    if (edit.kind === "clear") store.clearInstanceProp(layerId, spec.key);
+    else store.setInstanceProp(layerId, spec.key, edit.value);
   };
 
+  // THE DRAG HALF. A colour picker's three bars, a range field's slider and a
+  // gradient stop's colour route a drag entirely through `scrub.move` and
+  // never call `commit` while the pointer is down, so a row holding only the
+  // commit half is a control whose thumb moves and whose document does not.
+  //
+  // A value the contract refuses is REFUSED by writing nothing rather than by
+  // setting `error`: a capture runs per pointermove and inside the store's
+  // own transaction, and a React state write from there would re-render the
+  // panel mid-gesture sixty times a second to say what the typed path says
+  // once. Guarded on the ID as well as the kind: the seam fans out over the
+  // LIVE selection, and a prop key belongs to one component's contract.
+  const scrub = useSelectionScrub((layer, raw) => {
+    if (layer.kind !== "instance" || layer.id !== layerId) return layer;
+    const next = coercePropValue(spec, raw);
+    return next === null
+      ? layer
+      : { ...layer, instance: { ...layer.instance, props: { ...layer.instance.props, [spec.key]: next } } };
+  });
+
+  // THE RESET, shown while a value is stored. REFUSED while the prop is
+  // animated: clearing a tracked prop reads to the router as "take its
+  // animation with it" (`routeTrackedEdit`), so one press deleted every key
+  // the author had set while the tooltip promised only the default back.
+  const reset: PropRowReset | undefined = stored
+    ? {
+        onReset: () => store.clearInstanceProp(layerId, spec.key),
+        title: "Clear the stored value and use the component's default",
+        props: { "data-instance-reset": spec.key },
+        ...(animated
+          ? { refused: `${label} is animated. A reset would delete its keyframes: remove them on the timeline first.` }
+          : {}),
+      }
+    : undefined;
+
   return (
-    <div className={`insp-prop${inherited ? " is-inherited" : ""}`}>
-      <div className="insp-row">
-        {spec.kind !== "number" && (
-          <span className="insp-label" title={spec.description ?? spec.key}>
-            {spec.label ?? spec.key}
-          </span>
-        )}
-        <div className="insp-control">
-          {storable ? (
-            <PropControl spec={spec} value={value} commit={commit} scrub={NO_SCRUB} />
-          ) : (
-            <span
-              className="badge"
-              title={`"${spec.kind}" values are not engine Values, so they cannot be stored on an instance — set this prop inside the component itself.`}
-            >
-              {spec.kind} — not editable on an instance
+    <PropRow
+      spec={spec}
+      value={shownPropValue(spec, props.value ?? fallback)}
+      commit={commit}
+      scrub={scrub}
+      // The path is the contract key's, and `layerTrackablePath` types it from
+      // this same spec. The diamond is ABSENT rather than dead for a `slot` or
+      // `event` prop and for a stale key, since `layerTrackRefusal` refuses
+      // both, the rule it follows in every other section.
+      //
+      // PER BOX: every box of a vector carries the vector's diamond, which
+      // names the axes its boxes show as keying together. A one-box control
+      // keeps its diamond and its expose pin together in its box.
+      trailing={({ axes }) => <KeyframeDot path={path} label={label} pin={!vector} parts={axes} />}
+      // A VECTOR'S ONE PIN, in the label column once per row (KeyframeDot's
+      // header: one pin per track). In its first box's lane beside the
+      // diamond it overflowed that third of the row and was clipped at the
+      // panel's floor. Only while it is offered: the column draws a slot for
+      // whatever it is handed, even a pin that renders nothing.
+      {...(vector && pinOffered ? { actions: <KeyframeDot path={path} label={label} diamond={false} /> } : {})}
+      changed={changed}
+      inherited={!stored}
+      {...(reset !== undefined ? { reset } : {})}
+      error={error}
+      notice={
+        outside === null ? (
+          props.frozen === undefined || stored ? undefined : (
+            <span data-instance-frozen-key={spec.key}>
+              Frozen default. The component now defaults to {String(shownPropValue(spec, props.frozen.live))}; Accept current contract
+              to render it.
             </span>
-          )}
-          {!inherited && (
-            <button
-              className="btn"
-              data-instance-reset={spec.key}
-              title={`Clear the stored value for "${spec.label ?? spec.key}" and fall back to the component's default.`}
-              onClick={() => store.clearInstanceProp(layerId, spec.key)}
-            >
-              Reset
-            </button>
-          )}
-        </div>
-      </div>
-      {error !== null && <div className="insp-inline-error">{error}</div>}
-    </div>
+          )
+        ) : (
+          <>
+            <span>{outside.words}</span>
+            <div className="insp-buttons">
+              <button
+                type="button"
+                className="btn"
+                disabled={locked}
+                data-instance-inside={spec.key}
+                title={outside.title}
+                onClick={() => commit(outside.inside)}
+              >
+                Bring inside
+              </button>
+            </div>
+          </>
+        )
+      }
+      assets={props.assets}
+      dotProps={{ "data-use-changed": spec.key }}
+    />
   );
 }