@dailies-studio/shot-editor 0.1.0 → 0.2.0

package/src/panels/inspector/storyboard/StoryboardReferenceSection.tsx

@@ -0,0 +1,593 @@
+// One selected card, LEADING WITH WHAT IT IS AND WHERE IT SITS IN THE PLAN:
+// the picture, its lane, when that plays, and, for a requirement, whether the
+// video has it (the status, Place and the Done tick, `RequirementRows`). Then
+// what the card names, kind by kind: a text card's copy, a transition's kind
+// and length, a sound's role, file and hit, a native card's kind and variant.
+// Then what it is for and how hard it binds (`CardUseRows`, the block every
+// board panel shares), and the note. What is left is one fold down, under
+// More, and More shows only when the card has something there.
+//
+// NEVER A COMPONENT CARD. One component card selected is the component sheet's
+// (`boardRightPanel`), which carries its stage, its props, its Frame, Use and
+// Importance; the branches this section kept for one were unreachable in the
+// product and are gone.
+//
+// THE NAME ROW IS GONE. `InspectorHead` renames a reference in place, which is
+// the design system's stated rule: a panel names its subject before it lists
+// its properties, so restating the name as a form row two lines below its own
+// heading is the panel saying one thing twice.
+//
+// THE PREVIEW LEADS, through the same `ReferencePreview` the rail's tiles
+// render. One component, so the tile and the lead cannot drift into two
+// answers about one card. A video's lead is its still (`VideoStill`), which
+// owns the box and says under it when its frame is past the recording's end.
+//
+// EVERY READ-ONLY VALUE is a `ReadoutRow`, the house readout, and every
+// number a person drags has its scrub half (`useScrub`), so the board's other
+// panels see the value move with the pointer. The rows and their buttons are
+// the house's (widgets.css), so the sections need no scope of their own.
+import { useEffect, useRef, useState } from "react";
+import {
+  DEVICE_PRESET_IDS,
+  MESH_PRIMITIVE_KINDS,
+  NATIVE_LAYER_KINDS,
+  SOUND_ROLES,
+  partWindowsOf,
+  updateReference,
+} from "@dailies-studio/shot/doc";
+import type { Doc3D, ReferenceItem3D } from "@dailies-studio/shot/doc";
+import { framesToSeconds } from "@dailies-studio/engine";
+import { glPresetSpecs } from "@dailies-studio/transitions";
+import { Combobox, FieldLabels, InspectorRow, InspectorSection, NumberField, SegmentedControl, TextField, useLocked } from "@dailies-studio/ui";
+import { useShotEditor, useStore } from "../../../state/context.js";
+import { isReferenceId } from "../../../state/storyboardModel.js";
+import { CardNoteRow, CardUseRows, ReadoutRow, RequirementRows } from "../../storyboard/boardRows.js";
+import { PartPicker } from "../../storyboard/PartPicker.js";
+import { ReferencePreview } from "../../storyboard/ReferencePreview.js";
+import { AUDIO_ACCEPT_ATTRIBUTE } from "../../storyboard/storyboardDrop.js";
+import { VideoStill } from "./VideoStill.js";
+import { formatDuration, timecode } from "../../timeline/model.js";
+import { useScrub } from "../useDocWrite.js";
+
+/** A typed or dragged whole number at or above `floor`, or null for a value
+ *  that is no number. What every number row here writes. */
+function wholeAtLeast(raw: unknown, floor: number): number | null {
+  return typeof raw === "number" && Number.isFinite(raw) ? Math.max(floor, Math.round(raw)) : null;
+}
+
+/** The last frame a video card can name: the recording's probed length in
+ *  the Project's frames, the frame that starts before its end. Undefined when
+ *  nobody has probed it, and the still says so instead if the frame is past
+ *  it (`storyboardVideoSeconds`). */
+export function videoFrameMax(seconds: number | undefined, fps: Doc3D["fps"]): number | undefined {
+  if (seconds === undefined || !Number.isFinite(seconds) || seconds <= 0) return undefined;
+  return Math.max(0, Math.ceil((seconds * fps.num) / fps.den) - 1);
+}
+
+export function StoryboardReferenceSection() {
+  const store = useStore();
+  const open = useShotEditor((s) => s.storyboardOpen);
+  const selection = useShotEditor((s) => s.storyboardSelection);
+  const doc = useShotEditor((s) => s.doc);
+  const moreOpen = useShotEditor((s) => s.referenceMoreOpen);
+  const id = open && selection.length === 1 && isReferenceId(selection[0]!) ? selection[0]! : null;
+  const item = id === null ? undefined : doc?.resources?.references?.find((r) => r.id === id);
+  const libraryId = item?.type === "library" ? item.library : null;
+  // A LIBRARY CARD'S TWO SOURCES: the catalog row (is it in this build, what
+  // is it for, how long) and the item detail (its README, its ops). Both are
+  // selected by stable identity, so neither re-renders this panel on an
+  // unrelated store write.
+  const catalogLoaded = useShotEditor((s) => s.libraryCatalogLoaded);
+  const shipped = useShotEditor((s) => (libraryId === null ? undefined : s.libraryCatalog.find((row) => row.id === libraryId)));
+  const detail = useShotEditor((s) => (libraryId === null ? undefined : s.libraryItems[libraryId]));
+  // THE THIRD ANSWER TO "IS IT IN THIS BUILD". The registry omits an item it
+  // refused from the catalog, so without this row an item this build ships
+  // BROKEN reads as one it never shipped, and the notice below would offer a
+  // confident wrong diagnosis of a local fault the server already named.
+  const refused = useShotEditor((s) =>
+    libraryId === null ? undefined : s.libraryCatalogProblems.find((problem) => problem.id === libraryId),
+  );
+  // ONE VERB AT A TIME. A claim copies a whole Project and an import uploads a
+  // pack's files, neither is instant, and nothing else here disables the row:
+  // a second press on a claim mints a SECOND Project the generation fence then
+  // discards without a word. `StoryboardAddBar.run`'s shape.
+  const [busy, setBusy] = useState(false);
+  const run = (work: Promise<void>): void => {
+    setBusy(true);
+    void work.finally(() => setBusy(false));
+  };
+  // A VIEWER'S PANEL LOCKS EVERY VERB THAT WRITES. `LockedControls` reaches
+  // the widgets; these are plain buttons, so they read the lock themselves.
+  const locked = useLocked();
+
+  // HOOKS BEFORE THE EARLY RETURNS, the marker section's rule.
+  // The catalog first, because it answers whether this build ships the item
+  // at all; the detail only for a row the catalog has, since a 404 for an id
+  // the missing notice already explains would be noise in the error strip.
+  useEffect(() => {
+    if (libraryId === null) return;
+    if (!catalogLoaded) {
+      void store.refreshLibraryCatalog();
+      return;
+    }
+    if (shipped !== undefined) void store.loadLibraryItem(libraryId);
+  }, [libraryId, catalogLoaded, shipped, store]);
+  // The video's Frame, dragged: the still follows the pointer.
+  const frameScrub = useScrub((d, raw) => {
+    const frame = wholeAtLeast(raw, 0);
+    return id === null || frame === null ? d : updateReference(d, id, { frame });
+  });
+
+  if (doc === null || id === null || item === undefined) return null;
+  const parts = doc.storyboard?.parts ?? [];
+  const asset = item.type === "asset" ? doc.assets[item.asset] : undefined;
+  const isVideo = asset?.kind === "video";
+
+  // WHEN THE ATTACHED PART PLAYS. Derived from the prefix sum, never stored,
+  // so it cannot drift from a divider drag on the bar.
+  const window = item.part === undefined ? undefined : partWindowsOf(parts).find((w) => w.id === item.part);
+  // The loaded catalog has no row at this card's id. Only a LOADED catalog
+  // may say so: before it answers, "missing" would be a claim nobody made.
+  const libraryMissing = item.type === "library" && catalogLoaded && shipped === undefined;
+  // WHICH KIND THE PANEL ACTS ON. A card's `kind` is validated against the
+  // enum and never against the id it names, so `shot` can sit over a shipped
+  // blueprint. The registry owns the answer, exactly as the agent brief has
+  // it (`storyboard.ts`): dispatching on the document offered "Claim as
+  // Project" for a blueprint, which the server refuses with a 400, and left
+  // "Copy ops" disabled forever with "Waiting for the item's ops" for a
+  // material or a shot cited as `blueprint`. The document's kind is the
+  // fallback for a card whose row has not arrived, and the disagreement is
+  // SAID rather than silently resolved: the card is what an author fixes.
+  const libraryKind = item.type !== "library" ? undefined : (shipped?.kind ?? item.kind);
+  const kindDisagrees = item.type === "library" && shipped?.kind !== undefined && shipped.kind !== item.kind;
+  // A blueprint is copied by hand: its ops, with `$name` placeholders the
+  // author substitutes before applying them. The clipboard is the door, and
+  // its absence is said rather than swallowed.
+  const copyOps = (): void => {
+    const ops = detail?.blueprint?.ops;
+    if (ops === undefined) return;
+    const clipboard = typeof navigator === "undefined" ? undefined : navigator.clipboard;
+    if (clipboard === undefined) {
+      store.reportError("The clipboard is not available here, so the ops could not be copied.");
+      return;
+    }
+    void clipboard
+      .writeText(JSON.stringify(ops, null, 2))
+      .catch((e: unknown) => store.reportError(e instanceof Error ? e.message : String(e)));
+  };
+  // WHAT IS UNDER MORE: a video's Frame, where a still came from, a library
+  // item's docs. A card with none of them has no fold at all: an empty More
+  // opened onto nothing.
+  const more = (item.type === "asset" && (isVideo || item.source !== undefined)) || item.type === "library";
+  const frame = item.type === "asset" ? (item.frame ?? 0) : 0;
+  const frameMax = videoFrameMax(asset?.media?.durationSeconds, doc.fps);
+
+  return (
+    <>
+      <InspectorSection title="Reference" persistKey="shot:storyboard-reference" collapsible={false}>
+        {/* THE PICTURE FIRST. What a card IS, before any property of it. */}
+        {item.type === "asset" && isVideo && asset !== undefined ? (
+          <VideoStill id={id} assetId={item.asset} path={asset.path} frame={frame} fps={doc.fps} label={item.label} />
+        ) : (
+          <div className="insp-reference-lead">
+            <ReferencePreview
+              item={item}
+              {...(asset === undefined ? {} : { asset })}
+              fps={doc.fps}
+              {...(shipped?.thumb === undefined ? {} : { libraryThumb: shipped.thumb })}
+              {...(libraryKind === undefined ? {} : { libraryKind })}
+              {...(libraryMissing ? { libraryMissing } : {})}
+            />
+          </div>
+        )}
+        <InspectorRow label="Lane">
+          <PartPicker
+            parts={parts}
+            value={item.part ?? null}
+            noneLabel="Global"
+            ariaLabel="Lane"
+            onChange={(part) => store.updateReference(id, { part })}
+          />
+        </InspectorRow>
+        {window === undefined ? null : (
+          <ReadoutRow label="Plays">
+            {timecode(window.start, doc.fps)} to {timecode(window.end, doc.fps)}
+          </ReadoutRow>
+        )}
+        <RequirementRows doc={doc} item={item} />
+        <ElementRows doc={doc} item={item} />
+        {/* The two halves the old single Priority control conflated, in the
+            block every board panel draws. */}
+        <CardUseRows card={item} />
+        {/* WHAT THE CARD NAMES, for a library pick: the item, and the two
+            lines the library skill tells an agent to choose by. Read from the
+            catalog row, never from the document, which carries only the id,
+            the version and the kind. */}
+        {item.type === "library" ? (
+          <>
+            <ReadoutRow label="Item" title={`${item.library} v${item.version}`}>
+              {libraryKind} · {item.library} v{item.version}
+            </ReadoutRow>
+            {/* THE CARD IS WRONG ABOUT ITS OWN ITEM, said where the author is
+                looking at it and in the brief's own words, so the panel and
+                the brief cannot give one card two answers. The verb below
+                follows the item, which is the only one the server accepts. */}
+            {kindDisagrees ? (
+              <div className="insp-notice is-warn">
+                This build ships a {libraryKind}, but this card says {item.kind}. The action below follows the item; rewrite
+                the card to agree with it.
+              </div>
+            ) : null}
+            {libraryMissing ? (
+              <div className="insp-notice is-warn">
+                {refused === undefined
+                  ? "Not in this build's library. The card keeps its id and version; another build may ship it."
+                  : // The registry read it and REFUSED it, which is a local
+                    // fault with a stated fix, not an item another build has.
+                    `This build ships the item but its library refused to read it. ${refused.error}`}
+              </div>
+            ) : null}
+            {shipped?.useFor === undefined ? null : (
+              <ReadoutRow label="Use for" prose>
+                {shipped.useFor}
+              </ReadoutRow>
+            )}
+            {shipped?.avoidFor === undefined ? null : (
+              <ReadoutRow label="Avoid for" prose>
+                {shipped.avoidFor}
+              </ReadoutRow>
+            )}
+            {shipped?.lengthFrames === undefined ? null : (
+              <ReadoutRow label="Length">
+                {formatDuration(framesToSeconds(shipped.lengthFrames, doc.fps))} · {shipped.lengthFrames}f
+              </ReadoutRow>
+            )}
+          </>
+        ) : null}
+        {item.type === "note" ? (
+          <InspectorRow label="Text" align="start">
+            <TextField
+              multiline
+              value={item.text}
+              ariaLabel="Note text"
+              onCommit={(text) => {
+                const trimmed = text.trim();
+                if (trimmed.length > 0 && trimmed !== item.text) store.updateReference(id, { text: trimmed });
+              }}
+            />
+          </InspectorRow>
+        ) : (
+          <CardNoteRow card={item} />
+        )}
+        <InspectorRow>
+          {/* THE ONE VERB A LIBRARY PICK HAS, beside Remove, by kind: a shot
+              becomes a Project, a material or an image pack lands in THIS
+              one, a blueprint is copied by hand. Disabled with the reason in
+              `title` while the item is missing or its ops have not arrived.
+              BY THE REGISTRY'S KIND (`libraryKind`), never the document's: an
+              item whose kind the card gets wrong would otherwise offer the
+              verb its server route refuses. An id the registry knows as a
+              `component` has no verb here at all: dropping one installs it
+              and the card becomes a `component` reference. */}
+          {item.type === "library" && libraryId !== null ? (
+            libraryKind === "shot" ? (
+              <button
+                type="button"
+                className="btn"
+                disabled={libraryMissing || busy || locked}
+                title={
+                  libraryMissing
+                    ? "This build does not ship the item"
+                    : busy
+                      ? "Copying the Project…"
+                      : "Copy this shot into a new Project and open it"
+                }
+                onClick={() => run(store.claimLibraryShot(libraryId))}
+              >
+                Claim as Project
+              </button>
+            ) : libraryKind === "material" ? (
+              <button
+                type="button"
+                className="btn"
+                disabled={libraryMissing || busy || locked}
+                title={
+                  libraryMissing
+                    ? "This build does not ship the item"
+                    : busy
+                      ? "Writing into the Project…"
+                      : "Add this preset to the Project's materials under a fresh id"
+                }
+                onClick={() => run(store.importLibraryIntoProject(libraryId, "material"))}
+              >
+                Import into this Project
+              </button>
+            ) : libraryKind === "images" ? (
+              <button
+                type="button"
+                className="btn"
+                disabled={libraryMissing || busy || locked}
+                title={
+                  libraryMissing
+                    ? "This build does not ship the item"
+                    : busy
+                      ? "Writing into the Project…"
+                      : "Register every file in the pack as a Project asset"
+                }
+                onClick={() => run(store.importLibraryIntoProject(libraryId, "images"))}
+              >
+                Add to Project assets
+              </button>
+            ) : libraryKind === "blueprint" ? (
+              <button
+                type="button"
+                className="btn"
+                disabled={detail?.blueprint === undefined}
+                title={
+                  libraryMissing
+                    ? "This build does not ship the item"
+                    : detail?.blueprint === undefined
+                      ? "Waiting for the item's ops"
+                      : "Copy the ops as JSON; substitute your layer ids for its placeholders, then apply them"
+                }
+                onClick={copyOps}
+              >
+                Copy ops
+              </button>
+            ) : null
+          ) : null}
+          <button type="button" className="btn is-danger" disabled={locked} onClick={() => store.deleteStoryboardItems([id])}>
+            Delete
+          </button>
+        </InspectorRow>
+      </InspectorSection>
+      {/* ── MORE ──────────────────────────────────────────────────────
+          COLLAPSED BY DEFAULT, held by the `referenceMoreOpen` view pref so
+          an author who works in these rows keeps them open. Everything in
+          here is real and none of it is what this panel is opened to
+          decide.
+
+          DELETE STAYS OUT OF THE FOLD, above this. A destructive verb behind
+          a disclosure is a verb an author cannot find. */}
+      {more ? (
+        <InspectorSection
+          title="More"
+          collapsed={!moreOpen}
+          onCollapsedChange={(collapsed) => store.setReferenceMoreOpen(!collapsed)}
+        >
+          {item.type === "asset" && isVideo ? (
+            <>
+              <InspectorRow>
+                <FieldLabels value="compact">
+                  <NumberField
+                    value={frame}
+                    label="Frame"
+                    ariaLabel="Frame, video"
+                    min={0}
+                    {...(frameMax === undefined ? {} : { max: frameMax })}
+                    step={1}
+                    onCommit={(next) => {
+                      const at = wholeAtLeast(next, 0);
+                      if (at !== null) store.updateReference(id, { frame: at });
+                    }}
+                    onScrubStart={frameScrub.start}
+                    onScrub={frameScrub.move}
+                    onScrubEnd={frameScrub.end}
+                  />
+                </FieldLabels>
+              </InspectorRow>
+              <ReadoutRow label="Timecode">{timecode(frame, doc.fps)}</ReadoutRow>
+            </>
+          ) : null}
+          {item.type === "asset" && item.source !== undefined ? (
+            <ReadoutRow label="Source" prose>
+              {item.source.asset !== undefined
+                ? `Still from a video at frame ${item.source.frame}`
+                : `Captured from this Project at frame ${item.source.frame}`}
+            </ReadoutRow>
+          ) : null}
+          {/* THE README, AS PLAIN TEXT. A `<pre>` and not rendered markdown:
+              the docs are the agent's reading material, quoted here so an
+              author can see what the model will be told, and a second
+              markdown renderer in this chrome would be a second answer about
+              how that text looks. */}
+          {item.type === "library" ? (
+            detail === undefined ? (
+              <ReadoutRow label="Docs" prose>
+                {libraryMissing ? "No docs: this build does not ship the item." : "Loading the item's docs…"}
+              </ReadoutRow>
+            ) : (
+              <InspectorRow label="Docs" align="start" className="insp-readout">
+                <pre className="insp-docs">{detail.docs}</pre>
+              </InspectorRow>
+            )
+          ) : null}
+        </InspectorSection>
+      ) : null}
+    </>
+  );
+}
+
+const titleCase = (text: string): string => text.charAt(0).toUpperCase() + text.slice(1);
+
+/**
+ * WHAT AN ELEMENT CARD NAMES, kind by kind. Every control writes through
+ * `updateReference`, whose patch keys are the schema's (`PATCH_KEYS`), and
+ * writes null for a quiet default so an untouched card carries no keys. A
+ * value chosen again is the same document there, so a re-pick writes nothing.
+ */
+function ElementRows({ doc, item }: { doc: Doc3D; item: ReferenceItem3D }) {
+  const store = useStore();
+  const id = item.id;
+  const fileRef = useRef<HTMLInputElement | null>(null);
+  const [busy, setBusy] = useState(false);
+  const locked = useLocked();
+  // The drag halves of the two number rows below, by key.
+  const lengthScrub = useScrub((d, raw) => {
+    const durationFrames = wholeAtLeast(raw, 1);
+    return durationFrames === null ? d : updateReference(d, id, { durationFrames });
+  });
+  const hitScrub = useScrub((d, raw) => {
+    const ms = wholeAtLeast(raw, 0);
+    return ms === null ? d : updateReference(d, id, { hitMs: ms === 0 ? null : ms });
+  });
+  switch (item.type) {
+    case "text":
+      return (
+        <InspectorRow label="Copy" align="start">
+          <TextField
+            multiline
+            value={item.copy}
+            ariaLabel="Copy"
+            onCommit={(copy) => {
+              const next = copy.trim();
+              if (next.length > 0 && next !== item.copy) store.updateReference(id, { copy: next });
+            }}
+          />
+        </InspectorRow>
+      );
+    case "transition": {
+      const specs = Object.values(glPresetSpecs);
+      const known = specs.some((spec) => spec.id === item.kind);
+      return (
+        <>
+          <InspectorRow label="Kind">
+            <Combobox
+              options={[
+                ...specs.map((spec) => ({ value: spec.id, label: spec.label })),
+                ...(known ? [] : [{ value: item.kind, label: `${item.kind} (unknown)` }]),
+              ]}
+              value={item.kind}
+              ariaLabel="Transition"
+              onChange={(kind) => store.updateReference(id, { kind })}
+            />
+          </InspectorRow>
+          <InspectorRow>
+            <FieldLabels value="compact">
+              <NumberField
+                // An absent length is the preset's own, so the field shows the
+                // dash rather than a 0 its own minimum refuses.
+                value={item.durationFrames ?? Number.NaN}
+                label="Length"
+                ariaLabel="Length, transition frames"
+                min={1}
+                step={1}
+                unit="f"
+                onCommit={(frames) => {
+                  const durationFrames = wholeAtLeast(frames, 1);
+                  if (durationFrames !== null) store.updateReference(id, { durationFrames });
+                }}
+                onScrubStart={lengthScrub.start}
+                onScrub={lengthScrub.move}
+                onScrubEnd={lengthScrub.end}
+              />
+            </FieldLabels>
+          </InspectorRow>
+        </>
+      );
+    }
+    case "sound": {
+      const asset = item.asset === undefined ? undefined : doc.assets[item.asset];
+      const pick = (file: File): void => {
+        setBusy(true);
+        void store.setSoundFile(id, file).finally(() => setBusy(false));
+      };
+      return (
+        <>
+          <InspectorRow label="Role">
+            <SegmentedControl
+              options={SOUND_ROLES.map((value) => ({ value, label: value === "sfx" ? "Effect" : titleCase(value) }))}
+              value={item.role}
+              ariaLabel="Role"
+              onChange={(role) => store.updateReference(id, { role: role as typeof item.role })}
+            />
+          </InspectorRow>
+          <InspectorRow label="File" className="insp-file-row">
+            <span className="insp-dim is-text" title={asset?.path}>
+              {item.asset === undefined ? "No file yet" : asset === undefined ? "File missing" : asset.path.replace(/^[0-9a-f]{8}-/u, "")}
+            </span>
+            <button type="button" className="btn" disabled={busy || locked} onClick={() => fileRef.current?.click()}>
+              {item.asset === undefined ? "Choose file…" : "Replace…"}
+            </button>
+            {item.asset === undefined ? null : (
+              <button
+                type="button"
+                className="btn"
+                disabled={locked}
+                title="Back to a named need: the card keeps its role and loses its file and hit"
+                onClick={() => store.updateReference(id, { asset: null })}
+              >
+                Clear
+              </button>
+            )}
+            <input
+              ref={fileRef}
+              type="file"
+              hidden
+              accept={AUDIO_ACCEPT_ATTRIBUTE}
+              onChange={(event) => {
+                const file = event.currentTarget.files?.[0];
+                event.currentTarget.value = "";
+                if (file !== undefined) pick(file);
+              }}
+            />
+          </InspectorRow>
+          {item.asset === undefined ? null : (
+            <InspectorRow>
+              <FieldLabels value="compact">
+                <NumberField
+                  value={item.hitMs ?? 0}
+                  label="Hit"
+                  ariaLabel="Hit, where the sound lands in milliseconds"
+                  min={0}
+                  step={10}
+                  unit="ms"
+                  onCommit={(ms) => {
+                    const next = wholeAtLeast(ms, 0);
+                    if (next !== null) store.updateReference(id, { hitMs: next === 0 ? null : next });
+                  }}
+                  onScrubStart={hitScrub.start}
+                  onScrub={hitScrub.move}
+                  onScrubEnd={hitScrub.end}
+                />
+              </FieldLabels>
+            </InspectorRow>
+          )}
+        </>
+      );
+    }
+    case "native": {
+      const variants =
+        item.kind === "mesh" ? MESH_PRIMITIVE_KINDS : item.kind === "device" ? DEVICE_PRESET_IDS : null;
+      return (
+        <>
+          <InspectorRow label="Kind">
+            <Combobox
+              options={NATIVE_LAYER_KINDS.map((kind) => ({ value: kind, label: kind === "html" ? "Html snippet" : titleCase(kind) }))}
+              value={item.kind}
+              ariaLabel="Layer kind"
+              // A variant belongs to ONE kind, so a kind change drops it, and
+              // only a change: the kind chosen again keeps its Shape or Device.
+              onChange={(kind) => {
+                if (kind !== item.kind) store.updateReference(id, { kind, variant: null });
+              }}
+            />
+          </InspectorRow>
+          {variants === null ? null : (
+            <InspectorRow label={item.kind === "mesh" ? "Shape" : "Device"}>
+              <Combobox
+                options={[{ value: "", label: "Default" }, ...variants.map((value) => ({ value, label: titleCase(value) }))]}
+                value={item.variant ?? ""}
+                ariaLabel="Variant"
+                placeholder="Default"
+                onChange={(variant) => store.updateReference(id, { variant: variant === "" ? null : variant })}
+              />
+            </InspectorRow>
+          )}
+        </>
+      );
+    }
+    default:
+      return null;
+  }
+}