create-aura3d 1.3.1 → 1.3.2

package/templates/animation-studio/studio/src/components/Console.tsx

@@ -0,0 +1,366 @@
+/* Director Console (hero) — transcript + command engine + autocomplete. */
+import { useEffect, useRef, useState, type MutableRefObject } from "react";
+import { Icon } from "./Icon";
+import { boldHtml, highlightArgs } from "../state/util";
+import { VERBS, parse } from "../state/sceneTool";
+import { parseCliResult, runSceneCommand } from "../state/backend";
+import type { ComposerMode, CmdTurn, Turn } from "../state/types";
+
+/** Imperative handle so the palette can run a command in the console. */
+export interface ConsoleApi {
+  /** Run a command; `forceCommand` runs it as a raw scene-tool command regardless of mode. */
+  run?: (text: string, forceCommand?: boolean) => void;
+}
+
+const CHIPS = ["cast add Pip", "shot retime --id shot-2 --duration 30", "cam orbit", "fx add rim light"];
+
+/** The portion of a command after its (possibly two-word) verb — the card's args line. */
+function argTail(raw: string, verb: string): string {
+  const t = raw.trim();
+  return verb && t.toLowerCase().startsWith(verb.toLowerCase()) ? t.slice(verb.length).trim() : "";
+}
+
+function CmdCard({ turn }: { turn: CmdTurn }) {
+  return (
+    <div className="cmd">
+      <div className="cmd-top">
+        <span className="pr">aura</span>
+        <span style={{ color: "var(--tx-faint)" }}>›</span>
+        <span className="verb">{turn.verb}</span>
+        <span className="args" dangerouslySetInnerHTML={{ __html: highlightArgs(turn.args || "") }} />
+        {turn.state === "run" ? (
+          <span className="cmd-st st-run">
+            <span className="spin" />
+            validating
+          </span>
+        ) : turn.state === "bad" ? (
+          <span className="cmd-st st-bad">
+            <Icon name="x" size={11} />
+            rejected
+          </span>
+        ) : (
+          <span className="cmd-st st-ok">
+            <Icon name="check" size={11} />
+            committed
+          </span>
+        )}
+      </div>
+      {turn.state !== "run" && turn.diffs && (
+        <div className="cmd-body">
+          {turn.diffs.map((d, i) => (
+            <div className="diff" key={i}>
+              <span className={"op " + d.k}>{d.op}</span>
+              <span className="txt" dangerouslySetInnerHTML={{ __html: d.t }} />
+            </div>
+          ))}
+        </div>
+      )}
+      {turn.state === "ok" && (
+        <div className="cmd-foot">
+          <Icon name="history" size={13} />
+          {"ran in " + turn.dur}
+          <span className="commit">
+            <Icon name="check" size={12} />
+            {"doc @ " + turn.hash}
+          </span>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function TurnView({ turn }: { turn: Turn }) {
+  if (turn.type === "you")
+    return (
+      <div className="turn you">
+        <div className="bub">{turn.text}</div>
+      </div>
+    );
+  if (turn.type === "dir")
+    return (
+      <div className="turn dir">
+        <div className="lbl">
+          <span className="mk">
+            <Icon name="sparkles" size={10} style={{ color: "#fff" }} />
+          </span>
+          Aura
+        </div>
+        <div className="think" dangerouslySetInnerHTML={{ __html: boldHtml(turn.think) }} />
+      </div>
+    );
+  if (turn.type === "cmd")
+    return (
+      <div className="turn dir">
+        <CmdCard turn={turn} />
+      </div>
+    );
+  if (turn.type === "render")
+    return (
+      <div className="turn dir">
+        <div className="rcard">
+          <div className="thumb" style={{ backgroundImage: "url(" + turn.frame + ")" }}>
+            <div className="badge">{turn.label}</div>
+          </div>
+          <div className="rmeta">
+            <Icon name="film" size={13} />
+            <b>{turn.shot}</b>
+            {"· " + turn.meta}
+          </div>
+        </div>
+      </div>
+    );
+  return null;
+}
+
+export interface ConsoleProps {
+  transcript: Turn[];
+  setTranscript: React.Dispatch<React.SetStateAction<Turn[]>>;
+  selShot: string | null;
+  onRender: (scope: "shot" | "sequence") => void;
+  /** Called after a committed Scene-Tool mutation so the app re-syncs with the real document. */
+  onSceneCommit: () => void;
+  api: MutableRefObject<ConsoleApi>;
+}
+
+export function Console({ transcript, setTranscript, selShot, onRender, onSceneCommit, api }: ConsoleProps) {
+  const [mode, setMode] = useState<ComposerMode>("Prompt");
+  const [val, setVal] = useState("");
+  const [focus, setFocus] = useState(false);
+  const [acIdx, setAcIdx] = useState(0);
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLTextAreaElement>(null);
+
+  useEffect(() => {
+    const el = scrollRef.current;
+    if (el) el.scrollTop = el.scrollHeight;
+  }, [transcript]);
+
+  const suggestions = (() => {
+    const q = val.trim().toLowerCase();
+    if (!q) return VERBS.slice(0, 6);
+    return VERBS.filter((v) => v.verb.startsWith(q.split(" ")[0]) || v.verb.includes(q));
+  })();
+
+  const push = (t: Turn) => setTranscript((p) => [...p, t]);
+  const update = (id: string, patch: Partial<CmdTurn>) =>
+    setTranscript((p) => p.map((t) => (t.id === id && t.type === "cmd" ? { ...t, ...patch } : t)));
+
+  // Command mode runs the raw scene-tool command against the REAL CLI (POST /api/scene);
+  // Prompt mode shows the user's intent — their own coding agent drives the actual commands.
+  // `render`/`render --shot` short-circuits to the real render pipeline.
+  const run = (text: string, forceCommand = false) => {
+    const raw = text.trim();
+    if (!raw) return;
+    push({ type: "you", id: "u" + Date.now(), text: raw });
+    setVal("");
+    if (inputRef.current) inputRef.current.style.height = "auto";
+
+    const p = parse(raw);
+
+    // Render verb → the real render pipeline (also reachable from the Render button).
+    if (p.verb === "render") {
+      const cmdId = "c" + Date.now();
+      const scope = p.flags.shot ? "shot" : "sequence";
+      push({ type: "cmd", id: cmdId, verb: "render", args: p.flags.shot ? "--shot " + p.flags.shot : "--scope sequence", state: "run" });
+      onRender(scope);
+      update(cmdId, { state: "ok", diffs: [{ op: "~", k: "mod", t: "render queued · " + scope }], dur: "—", hash: "" });
+      return;
+    }
+
+    // Prompt mode: do NOT mutate. The directing agent (the user's coding agent) reads this
+    // intent and runs the concrete scene-tool commands itself. We only echo the intent.
+    // (The palette forces command execution, so it bypasses this.)
+    if (mode === "Prompt" && !forceCommand) {
+      window.setTimeout(
+        () =>
+          push({
+            type: "dir",
+            id: "d" + Date.now(),
+            think:
+              "Noted. Your coding agent is the director — it will translate this into validated **Scene-Tool** commands. " +
+              "Switch to **Command** mode to run a raw command here against the working document."
+          }),
+        300
+      );
+      return;
+    }
+
+    // Command mode: run the REAL CLI and render the committed / rejected card.
+    const cmdId = "c" + Date.now();
+    push({ type: "cmd", id: cmdId, verb: p.verb || raw.split(/\s+/)[0], args: argTail(raw, p.verb), state: "run" });
+    void runSceneCommand(raw).then((res) => {
+      const { diffs } = parseCliResult(raw, res);
+      if (!res.ok || res.rejected) {
+        update(cmdId, { state: "bad", diffs });
+        return;
+      }
+      update(cmdId, { state: "ok", diffs, dur: res.ms ? (res.ms / 1000).toFixed(1) + "s" : "—", hash: res.hash || "—" });
+      // Re-sync the panels with the now-mutated working document.
+      onSceneCommit();
+    });
+  };
+
+  useEffect(() => {
+    api.current.run = run;
+  });
+
+  const onKey = (e: React.KeyboardEvent) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      run(val);
+      setAcIdx(0);
+      return;
+    }
+    if (focus && suggestions.length) {
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        setAcIdx((i) => Math.min(suggestions.length - 1, i + 1));
+      }
+      if (e.key === "ArrowUp") {
+        e.preventDefault();
+        setAcIdx((i) => Math.max(0, i - 1));
+      }
+      if (e.key === "Tab") {
+        e.preventDefault();
+        const s = suggestions[acIdx];
+        setVal(s.verb + " ");
+        inputRef.current?.focus();
+      }
+    }
+  };
+
+  const showAc = focus && mode === "Command" && suggestions.length > 0;
+
+  return (
+    <section className="panel col console">
+      <div className="cns-h">
+        <div className="cns-orb">
+          <Icon name="sparkles" size={15} style={{ color: "#fff" }} />
+        </div>
+        <div className="meta">
+          <div className="nm">Edit this scene</div>
+          <div className="sub">
+            <span className="d" />
+            ask the AI in plain English, or type an exact command
+          </div>
+        </div>
+      </div>
+
+      <div className="cns-scroll" ref={scrollRef}>
+        {transcript.map((t) => (
+          <TurnView key={t.id} turn={t} />
+        ))}
+      </div>
+
+      <div className="composer">
+        <div className="chips">
+          {CHIPS.map((c) => (
+            <button
+              key={c}
+              className="chip"
+              onClick={() => {
+                setVal(c);
+                setMode("Command");
+                inputRef.current?.focus();
+              }}
+            >
+              <span className="pr">›</span>
+              {c.length > 22 ? c.slice(0, 22) + "…" : c}
+            </button>
+          ))}
+        </div>
+        <div className={"cbox" + (focus ? " focus" : "")}>
+          {showAc && (
+            <div className="ac">
+              <div className="ac-h">Scene-Tool commands</div>
+              {suggestions.map((s, i) => (
+                <div
+                  key={s.verb}
+                  className={"ac-item" + (i === acIdx ? " on" : "")}
+                  onMouseEnter={() => setAcIdx(i)}
+                  onMouseDown={(e) => {
+                    e.preventDefault();
+                    setVal(s.verb + " ");
+                    inputRef.current?.focus();
+                  }}
+                >
+                  <span className="verb">
+                    {s.verb} <span className="fl">{s.tail}</span>
+                  </span>
+                  <span className="desc">{s.desc}</span>
+                  {i === acIdx && <kbd>tab</kbd>}
+                </div>
+              ))}
+            </div>
+          )}
+          <div className="cmode">
+            <div className="seg">
+              {(["Prompt", "Command"] as ComposerMode[]).map((m) => (
+                <button key={m} className={mode === m ? "on" : ""} onClick={() => setMode(m)}>
+                  <Icon name={m === "Prompt" ? "wand" : "bolt"} size={12} />
+                  {m === "Prompt" ? "Ask AI" : "Command"}
+                </button>
+              ))}
+            </div>
+            <span className="hint">{mode === "Prompt" ? "plain English · your AI agent runs it" : "exact command · runs now"}</span>
+          </div>
+          {mode === "Command" && (
+            <div className="cmd-list">
+              <div className="cmd-list-h">Top commands — click one to use it</div>
+              {VERBS.map((v) => (
+                <button
+                  key={v.verb}
+                  className="cmd-list-item"
+                  onClick={() => {
+                    setVal(v.verb + " ");
+                    inputRef.current?.focus();
+                  }}
+                >
+                  <span className="verb">
+                    {v.verb} <span className="fl">{v.tail}</span>
+                  </span>
+                  <span className="desc">{v.desc}</span>
+                </button>
+              ))}
+            </div>
+          )}
+          <textarea
+            ref={inputRef}
+            className={"cinput" + (mode === "Command" ? " mono" : "")}
+            rows={3}
+            value={val}
+            placeholder={
+              mode === "Prompt"
+                ? "Tell your AI agent what to change — e.g. “make the second line angrier and cut to a close-up” (it writes this down; your agent does it)"
+                : "Type an exact command — e.g. set space · cast add robot --name Pip · shot retime …"
+            }
+            onChange={(e) => {
+              setVal(e.target.value);
+              e.target.style.height = "auto";
+              e.target.style.height = Math.min(120, e.target.scrollHeight) + "px";
+            }}
+            onFocus={() => setFocus(true)}
+            onBlur={() => window.setTimeout(() => setFocus(false), 120)}
+            onKeyDown={onKey}
+          />
+          <div className="cbar">
+            <div className="sp" />
+            <button
+              className="btn btn-warm"
+              style={{ height: 30 }}
+              onClick={() => selShot && run("render --shot " + selShot)}
+              disabled={!selShot}
+              title="Render current shot"
+            >
+              <Icon name="play2" size={14} />
+              Render shot
+            </button>
+            <button className="send" disabled={!val.trim()} onClick={() => run(val)}>
+              <Icon name="send" size={16} />
+            </button>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

package/templates/animation-studio/studio/src/components/Icon.tsx

@@ -0,0 +1,90 @@
+/* Icon set — stroke icons, Lucide-ish. Ported from design `icons.jsx`. */
+import type { CSSProperties } from "react";
+
+const P: Record<string, string> = {
+  play: "M6 4l14 8-14 8z",
+  pause: "M7 4h4v16H7zM13 4h4v16h-4z",
+  prev: "M7 5v14M19 5l-9 7 9 7z",
+  next: "M17 5v14M5 5l9 7-9 7z",
+  search: "M11 19a8 8 0 100-16 8 8 0 000 16zM21 21l-4.3-4.3",
+  chevD: "M6 9l6 6 6-6",
+  chevR: "M9 6l6 6-6 6",
+  chevL: "M15 6l-6 6 6 6",
+  plus: "M12 5v14M5 12h14",
+  eye: "M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7z@M12 12m-3 0a3 3 0 106 0 3 3 0 10-6 0",
+  eyeOff: "M3 3l18 18@M10.6 10.6a3 3 0 004.2 4.2@M9.4 5.2A10 10 0 0112 5c6.5 0 10 7 10 7a18 18 0 01-3 3.8M6.1 6.1A18 18 0 002 12s3.5 7 10 7a10 10 0 003.9-.8",
+  user: "M12 12a4 4 0 100-8 4 4 0 000 8zM4 21a8 8 0 0116 0",
+  film: "M3 4h18v16H3zM7 4v16M17 4v16M3 9h4M17 9h4M3 15h4M17 15h4",
+  globe: "M12 21a9 9 0 100-18 9 9 0 000 18zM3 12h18M12 3a14 14 0 010 18 14 14 0 010-18",
+  frame: "M4 7V4h3M20 7V4h-3M4 17v3h3M20 17v3h-3",
+  planet: "M12 16a5 5 0 100-10 5 5 0 000 10z@M4.5 14c-1.6.9-2.4 1.9-2 2.7.7 1.4 5 .8 9.6-1.4s7.9-5.2 7.2-6.6c-.4-.8-1.7-1-3.4-.7",
+  cube: "M12 2l8 4.5v9L12 20l-8-4.5v-9zM12 2v9M12 11l8-4.5M12 11l-8-4.5",
+  spark: "M12 3l1.8 5.4L19 10l-5.2 1.6L12 17l-1.8-5.4L5 10l5.2-1.6z",
+  layers: "M12 3l9 5-9 5-9-5zM3 13l9 5 9-5",
+  camera: "M3 8h3l1.5-2h9L18 8h3v11H3zM12 16a3 3 0 100-6 3 3 0 000 6z",
+  zap: "M13 2L4 14h7l-1 8 9-12h-7z",
+  sliders: "M4 7h10M18 7h2M4 17h2M10 17h10@M14 5v4M8 15v4",
+  render: "M12 3v4M12 17v4M3 12h4M17 12h4M5.6 5.6l2.8 2.8M15.6 15.6l2.8 2.8M5.6 18.4l2.8-2.8M15.6 8.4l2.8-2.8",
+  send: "M4 12l16-8-6 16-3-6-7-2z",
+  bolt: "M11 2L4 13h6l-1 9 8-12h-6z",
+  mic: "M12 3a3 3 0 013 3v6a3 3 0 01-6 0V6a3 3 0 013-3zM5 11a7 7 0 0014 0M12 18v3",
+  image: "M3 4h18v16H3zM3 16l5-5 4 4 3-3 6 6M9 9a1.5 1.5 0 100-3 1.5 1.5 0 000 3",
+  grid: "M4 4h7v7H4zM13 4h7v7h-7zM4 13h7v7H4zM13 13h7v7h-7z",
+  expand: "M8 3H3v5M16 3h5v5M8 21H3v-5M16 21h5v-5",
+  settings:
+    "M12 15a3 3 0 100-6 3 3 0 000 6z@M19 12a7 7 0 00-.1-1.3l2-1.5-2-3.4-2.3 1a7 7 0 00-2.3-1.3L16 2H8l-.3 2.2a7 7 0 00-2.3 1.3l-2.3-1-2 3.4 2 1.5a7 7 0 000 2.6l-2 1.5 2 3.4 2.3-1a7 7 0 002.3 1.3L8 22h8l.3-2.2a7 7 0 002.3-1.3l2.3 1 2-3.4-2-1.5A7 7 0 0019 12z",
+  check: "M5 12l5 5 9-11",
+  x: "M6 6l12 12M18 6L6 18",
+  play2: "M8 5v14l11-7z",
+  download: "M12 3v12M7 11l5 5 5-5M5 21h14",
+  share: "M4 12v8h16v-8M12 3v12M8 7l4-4 4 4",
+  history: "M12 8v4l3 2M3 12a9 9 0 109-9 9 9 0 00-8.5 6M3 4v3h3",
+  folder: "M3 6h6l2 2h10v11H3z",
+  sound: "M11 5L6 9H3v6h3l5 4zM16 9a4 4 0 010 6M19 6a8 8 0 010 12",
+  wand: "M5 19l9-9M14 6l1.5-1.5M18 10l1.5-.5M15 13l1 1M19 14l.5 1.5@M14 6l4 4",
+  move: "M12 3v18M3 12h18M9 6l3-3 3 3M9 18l3 3 3-3M6 9l-3 3 3 3M18 9l3 3-3 3",
+  sparkles: "M12 3l1.5 4.5L18 9l-4.5 1.5L12 15l-1.5-4.5L6 9l4.5-1.5zM5 15l.8 2.2L8 18l-2.2.8L5 21l-.8-2.2L2 18l2.2-.8z"
+};
+
+export interface IconProps {
+  name: string;
+  size?: number;
+  sw?: number;
+  style?: CSSProperties;
+  className?: string;
+}
+
+export function Icon({ name, size = 16, sw = 1.8, style, className }: IconProps) {
+  const d = P[name];
+  if (!d) return null;
+  const parts = d.split("@");
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={sw}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      style={style}
+      className={className}
+    >
+      {parts.map((p, i) => (
+        <path key={i} d={p} />
+      ))}
+    </svg>
+  );
+}
+
+export function Logo({ size = 30 }: { size?: number }) {
+  return (
+    <div className="logo" style={{ width: size, height: size }}>
+      <svg width={size * 0.62} height={size * 0.62} viewBox="0 0 24 24" fill="none">
+        <path d="M12 2l9 16H3z" fill="none" stroke="#fff" strokeWidth={2} strokeLinejoin="round" opacity={0.95} />
+        <circle cx={12} cy={13} r={3} fill="#fff" />
+      </svg>
+    </div>
+  );
+}

package/templates/animation-studio/studio/src/components/Inspector.tsx

@@ -0,0 +1,209 @@
+/* Inspector / Properties — context panel for the current selection. */
+import { Fragment, type ReactNode } from "react";
+import { Icon } from "./Icon";
+import { cap, fmt, shade } from "../state/util";
+import type { EpisodeDocument, Selection } from "../state/types";
+
+function Field({
+  label,
+  icon,
+  value,
+  mono,
+  act,
+  chev
+}: {
+  label: string;
+  icon?: string;
+  value: ReactNode;
+  mono?: boolean;
+  act?: boolean;
+  chev?: boolean;
+}) {
+  return (
+    <div className={"field" + (act ? " act" : "")}>
+      <div className="fl">
+        {icon && <Icon name={icon} size={11} />}
+        {label}
+      </div>
+      <div className={"fv" + (mono ? " mono" : "")}>
+        {value}
+        {chev && (
+          <span className="chev">
+            <Icon name="chevD" size={13} />
+          </span>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function Sec({ children }: { children: ReactNode }) {
+  return (
+    <div className="insp-sec">
+      {children}
+      <span className="ln" />
+    </div>
+  );
+}
+
+export interface InspectorProps {
+  data: EpisodeDocument;
+  sel: Selection | null;
+}
+
+export function Inspector({ data, sel }: InspectorProps) {
+  if (!sel) {
+    return (
+      <section className="panel insp">
+        <div className="panel-h">
+          <Icon name="sliders" size={15} style={{ color: "var(--tx-dim)" }} />
+          <span className="ttl">Inspector</span>
+        </div>
+        <div className="insp-empty">
+          <Icon name="sliders" size={26} style={{ color: "var(--tx-faint)", opacity: 0.6 }} />
+          <div>Nothing selected.</div>
+          <div>Select a shot, character, set, or prop — or describe a scene in the Director Console.</div>
+        </div>
+      </section>
+    );
+  }
+  const typeLabel = ({ shot: "Shot", cast: "Character", set: "Set", prop: "Prop" } as Record<string, string>)[sel.type] || "—";
+  let body: ReactNode = null;
+
+  if (sel.type === "shot") {
+    const s = data.shots.find((x) => x.id === sel.id) || data.shots[0];
+    const idx = data.shots.indexOf(s) + 1;
+    const beats = data.beats.filter((b) => b.shot === s.id);
+    body = (
+      <Fragment>
+        <div className="insp-hero" style={{ backgroundImage: "url(" + s.frame + ")" }}>
+          <div className="ov" />
+          <div className="tag">{"SHOT " + String(idx).padStart(2, "0")}</div>
+          <div className="cap">
+            <div className="nm">{s.name}</div>
+            <div className="sub">{s.cam}</div>
+          </div>
+        </div>
+        <div className="prop-grid">
+          <Field label="Duration" icon="history" value={s.dur + "s"} mono />
+          <Field label="Lens" icon="camera" value={s.cam.split("·")[1] || s.cam} mono />
+          <Field label="In" value={fmt(s.start)} mono />
+          <Field label="Out" value={fmt(s.start + s.dur)} mono />
+        </div>
+        <div className="prop-grid one">
+          <Field label="Framing" icon="frame" value={s.cam.split("·")[0]} />
+        </div>
+        <Sec>Cast in shot</Sec>
+        <div className="castrow">
+          {s.who.map((id) => {
+            const c = data.cast.find((x) => x.id === id);
+            if (!c) return null;
+            return (
+              <div key={id} className="castchip">
+                <span className="d" style={{ background: c.color }}>
+                  {c.glyph}
+                </span>
+                {c.name}
+              </div>
+            );
+          })}
+        </div>
+        <Sec>{beats.length + " beat" + (beats.length === 1 ? "" : "s") + " · director plan"}</Sec>
+        {beats.length ? (
+          <div className="beat-plan">
+            {beats.map((b) => {
+              const speaker = data.cast.find((x) => x.id === b.who);
+              const listener = data.cast.find((x) => x.id === b.listener);
+              return (
+                <div key={b.id} className="beat-row" data-testid="director-beat">
+                  <div className="beat-line">“{cap(b.text)}”</div>
+                  <div className="beat-intents">
+                    <span className="beat-chip cam" title="camera framing">{b.camera}</span>
+                    <span className="beat-chip spk" title="speaker action">
+                      {(speaker?.name ?? b.who)} · {b.speakingIntent}
+                    </span>
+                    {b.listener && (
+                      <span className="beat-chip lst" title="listener reaction">
+                        {(listener?.name ?? b.listener)} · {b.listenerIntent}
+                      </span>
+                    )}
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        ) : (
+          <div className="insp-note">No dialogue beats yet — direct one from the console.</div>
+        )}
+      </Fragment>
+    );
+  } else if (sel.type === "cast") {
+    const c = data.cast.find((x) => x.id === sel.id) || data.cast[0];
+    const appears = data.shots.filter((s) => s.who.includes(c.id)).length;
+    body = (
+      <Fragment>
+        <div className="insp-avatar" style={{ background: "linear-gradient(150deg," + c.color + "," + shade(c.color) + ")" }}>
+          {c.glyph}
+        </div>
+        <div className="insp-name">{c.name}</div>
+        <div className="insp-sub">{c.kind}</div>
+        <div className="prop-grid">
+          <Field label="Lines" icon="mic" value={c.lines || 0} mono />
+          <Field label="In shots" icon="film" value={appears} mono />
+          <Field
+            label="Accent"
+            value={
+              <span style={{ display: "flex", alignItems: "center", gap: 7 }}>
+                <span style={{ width: 13, height: 13, borderRadius: 4, background: c.color }} />
+                {c.color}
+              </span>
+            }
+          />
+        </div>
+        <div className="insp-note">
+          {c.name + " is rigged and assignable to any beat. Type “cast” commands in the console to re-pose or re-cast."}
+        </div>
+      </Fragment>
+    );
+  } else {
+    const list = sel.type === "set" ? data.sets : data.props;
+    const o = list.find((x) => x.id === sel.id) || list[0];
+    body = (
+      <Fragment>
+        <div className="insp-avatar" style={{ background: "linear-gradient(150deg,#2b3350,#1a2032)", fontSize: 22 }}>
+          <Icon name={o.icon} size={26} style={{ color: "var(--acc)" }} />
+        </div>
+        <div className="insp-name">{o.name}</div>
+        <div className="insp-sub">{typeLabel + " · " + o.meta}</div>
+        <div className="prop-grid">
+          <Field label="Type" value={o.meta} mono />
+        </div>
+        <div className="insp-note">Linked into the working document. Re-light or swap from the console with “set …”.</div>
+      </Fragment>
+    );
+  }
+
+  return (
+    <section className="panel insp">
+      <div className="panel-h">
+        <Icon name="sliders" size={15} style={{ color: "var(--tx-dim)" }} />
+        <span className="ttl">Inspector</span>
+        <span className="sp" />
+        <span
+          style={{
+            fontFamily: "var(--mono)",
+            fontSize: 10,
+            color: "var(--acc)",
+            background: "rgba(123,123,255,.12)",
+            border: "1px solid rgba(123,123,255,.25)",
+            padding: "2px 7px",
+            borderRadius: 6
+          }}
+        >
+          {typeLabel}
+        </span>
+      </div>
+      <div className="insp-scroll">{body}</div>
+    </section>
+  );
+}