create-aura3d 1.3.1 → 1.3.3

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

@@ -0,0 +1,265 @@
+/* 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";
+
+const STANDARD_CLIP_IDS = [
+  "idle", "talk", "gesture", "point", "nod", "wave",
+  "walk", "run", "react",
+  "sit", "shrug", "cross_arms", "salute", "shake_head"
+];
+
+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="prop-grid one">
+          <Field
+            label="Default clip"
+            icon="film"
+            value={
+              <select
+                disabled
+                value={c.defaultClip ?? "idle"}
+                style={{
+                  width: "100%",
+                  background: "transparent",
+                  color: "inherit",
+                  border: "none",
+                  fontFamily: "var(--mono)",
+                  fontSize: 12,
+                  cursor: "not-allowed"
+                }}
+              >
+                {STANDARD_CLIP_IDS.map((id) => (
+                  <option key={id} value={id}>{id}</option>
+                ))}
+              </select>
+            }
+          />
+        </div>
+        <div className="prop-grid">
+          <Field label="Mouth morph" icon="mic" value={c.mouthMorphIndex ?? -1} mono />
+          <Field
+            label="Foot IK"
+            icon="zap"
+            value={
+              <input
+                type="checkbox"
+                disabled
+                checked={!!c.footIk}
+                style={{ cursor: "not-allowed" }}
+              />
+            }
+          />
+        </div>
+        <div className="prop-grid one">
+          <Field
+            label="Grade intent"
+            value={
+              <span className="beat-chip cam" style={{ fontSize: 10 }}>
+                {c.gradeAwareIntent ?? "—"}
+              </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>
+  );
+}

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

@@ -0,0 +1,210 @@
+/* Scene Outliner — collapsible Shots / Cast / Sets / Props with counts + visibility. */
+import { useState, type ReactNode } from "react";
+import { Icon } from "./Icon";
+import type { CastMember, CastSource, EpisodeDocument, PropEntity, Selection, SelectionType, SetEntity } from "../state/types";
+import { fidelityLabel, type CharacterFidelity } from "../state/fidelity";
+
+interface RowProps {
+  name: string;
+  sel: boolean;
+  onSelect: () => void;
+  hidden: boolean;
+  onToggle: () => void;
+  meta?: string;
+  accent?: string;
+  glyph?: string;
+  icon?: string;
+  /** Provenance badge (Phase E3): authored-fallback vs catalog-resolved vs user-uploaded. */
+  source?: CastSource;
+  sourceLabel?: string;
+  /** M7 — fidelity tier badge (A/B/C); C renders as "Previz". */
+  fidelity?: CharacterFidelity;
+}
+
+/** Short, honest badge text + class per cast provenance class (E3). */
+const SOURCE_BADGE: Record<CastSource, { text: string; cls: string }> = {
+  "authored-fallback": { text: "fallback", cls: "src-fallback" },
+  "catalog-resolved": { text: "catalog", cls: "src-catalog" },
+  "user-uploaded": { text: "uploaded", cls: "src-uploaded" }
+};
+
+function Row({ name, sel, onSelect, hidden, onToggle, meta, accent, glyph, icon, source, sourceLabel, fidelity }: RowProps) {
+  const badge = source ? SOURCE_BADGE[source] : undefined;
+  return (
+    <div className={"ol-item" + (sel ? " sel" : "")} onClick={onSelect}>
+      {glyph ? (
+        <div className="av" style={{ background: accent }}>
+          {glyph}
+        </div>
+      ) : (
+        <div className="ic">
+          <Icon name={icon || "cube"} size={13} />
+        </div>
+      )}
+      <span className="nm">{name}</span>
+      {fidelity && (
+        <span
+          className={"fid-badge fid-" + fidelity.grade.toLowerCase() + (fidelity.previz ? " fid-previz" : "")}
+          title={fidelity.reason}
+          data-grade={fidelity.grade}
+          data-previz={fidelity.previz ? "true" : "false"}
+        >
+          {fidelity.previz ? "Previz" : fidelityLabel(fidelity.grade)}
+        </span>
+      )}
+      {badge && (
+        <span className={"src-badge " + badge.cls} title={sourceLabel ?? badge.text} data-source={source}>
+          {badge.text}
+        </span>
+      )}
+      {meta && <span className="meta">{meta}</span>}
+      <button
+        className={"vis" + (hidden ? " off" : "")}
+        title={hidden ? "Show" : "Hide"}
+        onClick={(e) => {
+          e.stopPropagation();
+          onToggle();
+        }}
+      >
+        <Icon name={hidden ? "eyeOff" : "eye"} size={14} />
+      </button>
+    </div>
+  );
+}
+
+function Group({
+  title,
+  count,
+  children,
+  onAdd
+}: {
+  title: string;
+  count: number;
+  children: ReactNode;
+  onAdd?: () => void;
+}) {
+  const [open, setOpen] = useState(true);
+  return (
+    <div className="ol-group">
+      <div className={"ol-gh" + (open ? "" : " closed")} onClick={() => setOpen(!open)}>
+        <span className="tw">
+          <Icon name="chevD" size={13} />
+        </span>
+        {title}
+        <span className="cnt">{count}</span>
+        {onAdd && (
+          <button
+            className="add"
+            onClick={(e) => {
+              e.stopPropagation();
+              onAdd();
+            }}
+          >
+            <Icon name="plus" size={13} />
+          </button>
+        )}
+      </div>
+      {open && <div>{children}</div>}
+    </div>
+  );
+}
+
+export interface OutlinerProps {
+  data: EpisodeDocument;
+  sel: Selection | null;
+  onSelect: (type: SelectionType, id: string) => void;
+  hidden: Set<string>;
+  onToggle: (id: string) => void;
+  onAddCast: () => void;
+  onOpenPalette: () => void;
+}
+
+export function Outliner({ data, sel, onSelect, hidden, onToggle, onAddCast, onOpenPalette }: OutlinerProps) {
+  return (
+    <section className="panel col">
+      <div className="ol-search" onClick={onOpenPalette} style={{ cursor: "text" }}>
+        <Icon name="search" size={14} />
+        <input placeholder="Search scene…" readOnly style={{ cursor: "text" }} />
+        <kbd>⌘K</kbd>
+      </div>
+      <div className="ol-scroll">
+        {/* M7 — scene fidelity tier. A grade-C scene is labeled "previz" and never sold as finished. */}
+        <div
+          className={"scene-fidelity fid-" + data.fidelity.grade.toLowerCase() + (data.fidelity.previz ? " fid-previz" : "")}
+          title={data.fidelity.reason}
+          data-grade={data.fidelity.grade}
+          data-previz={data.fidelity.previz ? "true" : "false"}
+        >
+          <span className="fid-tier">{data.fidelity.previz ? "Previz" : fidelityLabel(data.fidelity.grade)}</span>
+          <span className="fid-note">
+            {data.fidelity.previz ? "preview-quality — not a finished render" : "scene fidelity"}
+          </span>
+        </div>
+        <Group title="Shots" count={data.shots.length}>
+          {data.shots.map((s) => (
+            <div
+              key={s.id}
+              className={"ol-item" + (sel?.type === "shot" && sel.id === s.id ? " sel" : "")}
+              onClick={() => onSelect("shot", s.id)}
+            >
+              <div className="ic" style={{ background: s.color + "33", color: s.color }}>
+                <Icon name="film" size={13} />
+              </div>
+              <span className="nm">{s.name}</span>
+              <span className="meta">{s.dur + "s"}</span>
+            </div>
+          ))}
+        </Group>
+
+        <Group title="Cast" count={data.cast.length} onAdd={onAddCast}>
+          {data.cast.map((c: CastMember) => (
+            <Row
+              key={c.id}
+              name={c.name}
+              glyph={c.glyph}
+              accent={c.color}
+              meta={c.lines ? c.lines + " lines" : "—"}
+              source={c.source}
+              sourceLabel={c.sourceLabel}
+              fidelity={c.fidelity}
+              sel={sel?.type === "cast" && sel.id === c.id}
+              onSelect={() => onSelect("cast", c.id)}
+              hidden={hidden.has(c.id)}
+              onToggle={() => onToggle(c.id)}
+            />
+          ))}
+        </Group>
+
+        <Group title="Sets" count={data.sets.length}>
+          {data.sets.map((s: SetEntity) => (
+            <Row
+              key={s.id}
+              name={s.name}
+              icon={s.icon}
+              meta={s.meta}
+              sel={sel?.type === "set" && sel.id === s.id}
+              onSelect={() => onSelect("set", s.id)}
+              hidden={hidden.has(s.id)}
+              onToggle={() => onToggle(s.id)}
+            />
+          ))}
+        </Group>
+
+        <Group title="Props" count={data.props.length}>
+          {data.props.map((p: PropEntity) => (
+            <Row
+              key={p.id}
+              name={p.name}
+              icon={p.icon}
+              meta={p.meta}
+              sel={sel?.type === "prop" && sel.id === p.id}
+              onSelect={() => onSelect("prop", p.id)}
+              hidden={hidden.has(p.id)}
+              onToggle={() => onToggle(p.id)}
+            />
+          ))}
+        </Group>
+      </div>
+    </section>
+  );
+}

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

@@ -0,0 +1,204 @@
+/* Command palette (⌘K) — jump to shots/cast, run Scene-Tool commands, switch views. */
+import { useEffect, useMemo, useRef, useState, type MutableRefObject } from "react";
+import { Icon } from "./Icon";
+import { fmt } from "../state/util";
+import type { ConsoleApi } from "./Console";
+import type { EpisodeDocument, SelectionType, ViewMode } from "../state/types";
+
+interface PaletteItem {
+  g: string;
+  nm: string;
+  ds?: string;
+  ic?: string;
+  av?: string;
+  glyph?: string;
+  tag?: string;
+  mono?: boolean;
+  kw?: string;
+  run: () => void;
+}
+
+export interface PaletteProps {
+  open: boolean;
+  setOpen: (o: boolean) => void;
+  data: EpisodeDocument;
+  api: MutableRefObject<ConsoleApi>;
+  onJumpShot: (id: string) => void;
+  onSelectEntity: (type: SelectionType, id: string) => void;
+  onRender: (scope: "shot" | "sequence") => void;
+  onView: (m: ViewMode) => void;
+}
+
+export function Palette({ open, setOpen, data, api, onJumpShot, onSelectEntity, onRender, onView }: PaletteProps) {
+  const [q, setQ] = useState("");
+  const [idx, setIdx] = useState(0);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const listRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (open) {
+      setQ("");
+      setIdx(0);
+      window.setTimeout(() => inputRef.current?.focus(), 30);
+    }
+  }, [open]);
+
+  const items = useMemo<PaletteItem[]>(() => {
+    const out: PaletteItem[] = [];
+    out.push({ g: "Actions", nm: "Render full sequence", ds: "Low-fi preview of all shots", ic: "play2", kw: "render export preview", run: () => onRender("sequence") });
+    out.push({ g: "Actions", nm: "Render current shot", ds: "Preview just the active shot", ic: "film", kw: "render shot preview", run: () => onRender("shot") });
+    (["Render", "Wireframe", "Storyboard"] as ViewMode[]).forEach((m) =>
+      out.push({
+        g: "Actions",
+        nm: "View: " + m,
+        ds: "Switch viewport mode",
+        ic: m === "Render" ? "film" : m === "Wireframe" ? "cube" : "grid",
+        kw: "view mode " + m,
+        run: () => onView(m)
+      })
+    );
+    data.shots.forEach((s) =>
+      out.push({ g: "Go to shot", nm: s.name, ds: s.cam, ic: "film", tag: fmt(s.start), kw: "shot " + s.name + " " + s.cam, run: () => onJumpShot(s.id) })
+    );
+    data.cast.forEach((c) =>
+      out.push({ g: "Cast", av: c.color, glyph: c.glyph, nm: c.name, ds: c.kind, kw: "cast character " + c.name, run: () => onSelectEntity("cast", c.id) })
+    );
+    (
+      [
+        ["cast add Pip", "Cast a new character"],
+        ["shot retime --id shot-2 --duration 30", "Retime a shot + ripple"],
+        ["cam orbit", "Set active shot camera"],
+        ["fx add rim light", "Add an effect to the timeline"],
+        ["set station --hdr dawn", "Re-light the active set"],
+        ["shot add --after shot-2", "Block a new shot"]
+      ] as Array<[string, string]>
+    ).forEach(([cmd, ds]) =>
+      out.push({ g: "Run command", nm: cmd, ds, mono: true, ic: "bolt", kw: "command " + cmd, run: () => api.current.run?.(cmd, true) })
+    );
+    return out;
+  }, [data, api, onJumpShot, onRender, onSelectEntity, onView]);
+
+  const filtered = useMemo(() => {
+    const s = q.trim().toLowerCase();
+    if (!s) return items;
+    return items.filter((it) => (it.nm + " " + (it.ds || "") + " " + (it.kw || "")).toLowerCase().includes(s));
+  }, [q, items]);
+
+  useEffect(() => {
+    setIdx(0);
+  }, [q]);
+  useEffect(() => {
+    const el = listRef.current;
+    if (!el) return;
+    const on = el.querySelector(".cmdk-item.on");
+    if (on) on.scrollIntoView({ block: "nearest" });
+  }, [idx]);
+
+  if (!open) return null;
+
+  const exec = (it?: PaletteItem) => {
+    if (!it) return;
+    setOpen(false);
+    window.setTimeout(() => it.run(), 10);
+  };
+  const onKey = (e: React.KeyboardEvent) => {
+    if (e.key === "Escape") {
+      e.preventDefault();
+      setOpen(false);
+    } else if (e.key === "ArrowDown") {
+      e.preventDefault();
+      setIdx((i) => Math.min(filtered.length - 1, i + 1));
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      setIdx((i) => Math.max(0, i - 1));
+    } else if (e.key === "Enter") {
+      e.preventDefault();
+      exec(filtered[idx]);
+    }
+  };
+
+  // group while keeping a flat index for keyboard navigation
+  let flat = -1;
+  let lastG: string | null = null;
+  const rows: Array<{ grp?: string; key: string; it?: PaletteItem; myIdx?: number }> = [];
+  filtered.forEach((it) => {
+    if (it.g !== lastG) {
+      rows.push({ grp: it.g, key: "g" + it.g });
+      lastG = it.g;
+    }
+    flat++;
+    rows.push({ it, myIdx: flat, key: it.g + it.nm });
+  });
+
+  return (
+    <div className="cmdk-ov" onMouseDown={() => setOpen(false)}>
+      <div className="cmdk" onMouseDown={(e) => e.stopPropagation()}>
+        <div className="cmdk-in">
+          <span className="si">
+            <Icon name="search" size={18} />
+          </span>
+          <input
+            ref={inputRef}
+            value={q}
+            placeholder="Search shots, cast, commands…"
+            onChange={(e) => setQ(e.target.value)}
+            onKeyDown={onKey}
+          />
+          <span className="esc">ESC</span>
+        </div>
+        <div className="cmdk-list" ref={listRef}>
+          {filtered.length === 0 ? (
+            <div className="cmdk-empty">{"No matches for “" + q + "”"}</div>
+          ) : (
+            rows.map((r) =>
+              r.grp ? (
+                <div className="cmdk-grp" key={r.key}>
+                  {r.grp}
+                </div>
+              ) : (
+                <div
+                  key={r.key}
+                  className={"cmdk-item" + (r.myIdx === idx ? " on" : "")}
+                  onMouseEnter={() => setIdx(r.myIdx!)}
+                  onClick={() => exec(r.it)}
+                >
+                  {r.it!.av ? (
+                    <div className="av" style={{ background: r.it!.av }}>
+                      {r.it!.glyph}
+                    </div>
+                  ) : (
+                    <div className="ic">
+                      <Icon name={r.it!.ic || "bolt"} size={15} />
+                    </div>
+                  )}
+                  <div className="tx">
+                    <div className="nm">{r.it!.nm}</div>
+                    {r.it!.ds && <div className={"ds" + (r.it!.mono ? " mono" : "")}>{r.it!.ds}</div>}
+                  </div>
+                  {r.it!.tag ? (
+                    <span className="tag">{r.it!.tag}</span>
+                  ) : (
+                    <span className="ent">
+                      <Icon name="send" size={14} />
+                    </span>
+                  )}
+                </div>
+              )
+            )
+          )}
+        </div>
+        <div className="cmdk-foot">
+          <span>
+            <span className="kk">↑↓</span>navigate
+          </span>
+          <span>
+            <span className="kk">↵</span>run
+          </span>
+          <span>
+            <span className="kk">⌘K</span>toggle
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+}