create-aura3d 1.3.1 → 1.3.2

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>
+  );
+}