npm - create-aura3d - Versions diffs - 1.3.1 → 1.3.3 - Mend

create-aura3d 1.3.1 → 1.3.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (126) hide show

package/templates/animation-studio/studio/index.html ADDED Viewed

@@ -0,0 +1,18 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Aura3D Animation Studio</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap"
+    />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/templates/animation-studio/studio/src/App.tsx ADDED Viewed

@@ -0,0 +1,498 @@
+/**
+ * App shell — global state, playback clock, render queue, composition (PRD §7.2.1).
+ *
+ * Global state = the working EpisodeDocument (local model). Selection model is
+ * `{type,id}`; the playback clock persists the scrub time to localStorage.
+ * Keyboard: Space = play/pause, ⌘K = command palette.
+ *
+ * Render + Console actions are wired to the REAL backend via the dev-server
+ * middleware (see `vite.config.ts`): `doRender` -> POST /api/render (the render
+ * pipeline), Console Command mode -> POST /api/scene (the agent-native Scene-Tool
+ * CLI: validated mutation commits / rejections). This is the dev-only local studio
+ * control surface; the user's coding agent remains the director.
+ */
+import { useCallback, useEffect, useRef, useState } from "react";
+import { fetchDocument, fetchHistory, fetchExistingRender, runRender, runSceneCommand } from "./state/backend";
+import { documentExists, mapDocument, mapHistory, type RuntimeDocument } from "./state/mapDocument";
+import { Topbar } from "./components/Topbar";
+import { Outliner } from "./components/Outliner";
+import { Inspector } from "./components/Inspector";
+import { Stage } from "./components/Stage";
+import { Timeline } from "./components/Timeline";
+import { Console, type ConsoleApi } from "./components/Console";
+import { Palette } from "./components/Palette";
+import { Icon } from "./components/Icon";
+import { fmt } from "./state/util";
+import type { EpisodeDocument, Selection, SelectionType, Toast, Turn, ViewMode } from "./state/types";
+/** Empty view model — used until the real document is fetched, and when none exists. */
+const EMPTY_DOC: EpisodeDocument = {
+  title: "Untitled scene",
+  cast: [],
+  sets: [],
+  props: [],
+  shots: [],
+  beats: [],
+  camera: [],
+  gestures: [],
+  fx: [],
+  DUR: 0,
+  // M7 — an empty scene has no graded cast → previz floor.
+  fidelity: { grade: "C", previz: true, characters: [], reason: "previz: no characters in the scene" }
+};
+/** The view-model collection a selection type indexes into. */
+function selKey(t: SelectionType): "shots" | "cast" | "sets" | "props" {
+  return t === "shot" ? "shots" : t === "cast" ? "cast" : t === "set" ? "sets" : "props";
+}
+export function App() {
+  // The single source of truth is the REAL working document, fetched on mount and
+  // re-fetched after every validated mutation / render so the UI stays in sync.
+  const [data, setData] = useState<EpisodeDocument>(EMPTY_DOC);
+  const [docExists, setDocExists] = useState(false);
+  const [sel, setSel] = useState<Selection | null>(null);
+  const [hidden, setHidden] = useState<Set<string>>(() => new Set());
+  const [time, setTime] = useState<number>(() => {
+    const s = parseFloat(localStorage.getItem("aura.time") || "");
+    return isNaN(s) ? 0 : s;
+  });
+  const [playing, setPlaying] = useState(false);
+  const [viewMode, setViewMode] = useState<ViewMode>("Render");
+  const [transcript, setTranscript] = useState<Turn[]>([]);
+  const [rendering, setRendering] = useState(false);
+  const [renderPct, setRenderPct] = useState(0);
+  // The most recent REAL render output (served under /preview/*) loaded into the Stage.
+  const [renderVideo, setRenderVideo] = useState<string | null>(null);
+  const [renderPoster, setRenderPoster] = useState<string | null>(null);
+  const [toast, setToast] = useState<Toast | null>(null);
+  const [paletteOpen, setPaletteOpen] = useState(false);
+  // "Generate new scene from a prompt" — runs the real `new --prompt` Scene-Tool command
+  // (the same thing the CLI `scene new` does) and re-hydrates the whole UI. No commands,
+  // no AI key: the deterministic Director builds the cast/set/shots from the sentence.
+  const [newScenePrompt, setNewScenePrompt] = useState("");
+  const [generating, setGenerating] = useState(false);
+  const [continuing, setContinuing] = useState(false);
+  const consoleApi = useRef<ConsoleApi>({});
+  const raf = useRef(0);
+  // The live render-progress EventSource — kept in a ref so unmount can close it
+  // (otherwise an in-flight render leaves a perpetually reconnecting connection).
+  const progressEs = useRef<EventSource | null>(null);
+  // The active toast-dismiss timer — cleared before each new toast so an earlier
+  // timer can't dismiss a later toast early.
+  const toastTimer = useRef(0);
+  const DUR = data.DUR;
+  const hasShots = data.shots.length > 0;
+  const currentShot = hasShots
+    ? data.shots.find((s) => time >= s.start && time < s.start + s.dur) || data.shots[data.shots.length - 1]
+    : null;
+  // Hydrate the UI from the REAL working document (and command history). Called on mount and
+  // after each /api/scene or /api/render so the panels reflect the live document. Returns the
+  // freshly mapped document (or null when none exists) so callers can read post-hydrate values
+  // (e.g. the NEW scene's duration) without waiting for a React state round-trip.
+  const hydrate = useCallback(async (): Promise<EpisodeDocument | null> => {
+    const [doc, hist, render] = await Promise.all([fetchDocument(), fetchHistory(), fetchExistingRender()]);
+    const exists = documentExists(doc as RuntimeDocument & { exists?: boolean });
+    setDocExists(exists);
+    setTranscript(mapHistory(hist));
+    // Show an already-rendered video on the Stage immediately (no need to hit Render first).
+    if (render.video) {
+      const bust = `?t=${Date.now()}`;
+      setRenderVideo(render.video + bust);
+      if (render.poster) setRenderPoster(render.poster + bust);
+    }
+    if (!exists) {
+      setData(EMPTY_DOC);
+      setSel(null);
+      return null;
+    }
+    const mapped = mapDocument(doc as RuntimeDocument);
+    setData(mapped);
+    setSel((prev) => {
+      if (prev && mapped[selKey(prev.type)].some((e: { id: string }) => e.id === prev.id)) return prev;
+      return mapped.shots[0] ? { type: "shot", id: mapped.shots[0].id } : null;
+    });
+    return mapped;
+  }, []);
+  useEffect(() => {
+    void hydrate();
+  }, [hydrate]);
+  // Close the render-progress EventSource on unmount (it is opened per-render in doRender).
+  useEffect(
+    () => () => {
+      progressEs.current?.close();
+      progressEs.current = null;
+    },
+    []
+  );
+  useEffect(() => {
+    localStorage.setItem("aura.time", time.toFixed(2));
+  }, [time]);
+  // playback loop. When a rendered VIDEO is on the Stage, the <video> element is the clock
+  // (its onTimeUpdate drives `time`), so this rAF clock is disabled to avoid two clocks fighting
+  // (which caused the sporadic start/stop). It still runs in frame/no-video mode.
+  useEffect(() => {
+    if (!playing || DUR <= 0 || renderVideo) return;
+    let last = performance.now();
+    const tick = (now: number) => {
+      const dt = (now - last) / 1000;
+      last = now;
+      setTime((t) => {
+        const nt = t + dt;
+        if (nt >= DUR) {
+          setPlaying(false);
+          return DUR;
+        }
+        return nt;
+      });
+      raf.current = requestAnimationFrame(tick);
+    };
+    raf.current = requestAnimationFrame(tick);
+    return () => cancelAnimationFrame(raf.current);
+  }, [playing, DUR, renderVideo]);
+  // keyboard: Space toggles play, ⌘K toggles palette
+  useEffect(() => {
+    const h = (e: KeyboardEvent) => {
+      if ((e.metaKey || e.ctrlKey) && (e.key === "k" || e.key === "K")) {
+        e.preventDefault();
+        setPaletteOpen((o) => !o);
+        return;
+      }
+      const tag = (document.activeElement && document.activeElement.tagName) || "";
+      if (e.code === "Space" && tag !== "TEXTAREA" && tag !== "INPUT") {
+        e.preventDefault();
+        setPlaying((p) => !p);
+      }
+    };
+    window.addEventListener("keydown", h);
+    return () => window.removeEventListener("keydown", h);
+  }, []);
+  const showToast = (msg: string, kind: Toast["kind"]) => {
+    setToast({ msg, kind });
+    window.clearTimeout(toastTimer.current);
+    toastTimer.current = window.setTimeout(() => setToast(null), 2600);
+  };
+  const selectShot = (id: string) => {
+    const s = data.shots.find((x) => x.id === id);
+    if (s) {
+      setTime(s.start + 0.2);
+      setSel({ type: "shot", id });
+    }
+  };
+  const onSelect = (type: SelectionType, id: string) => {
+    if (type === "shot") selectShot(id);
+    else setSel({ type, id });
+  };
+  const stepShot = (dir: number) => {
+    if (!currentShot) return;
+    const i = data.shots.indexOf(currentShot);
+    const ni = Math.max(0, Math.min(data.shots.length - 1, i + dir));
+    const next = data.shots[ni];
+    if (next) selectShot(next.id);
+  };
+  const toggleVis = (id: string) =>
+    setHidden((h) => {
+      const n = new Set(h);
+      if (n.has(id)) n.delete(id);
+      else n.add(id);
+      return n;
+    });
+  // Outliner Cast "+" — run a REAL `cast add` command through the same path the Console
+  // uses (forceCommand bypasses Prompt mode), so it actually mutates the working document,
+  // appends a committed/rejected card, and re-hydrates. The CLI grammar is
+  // `cast add --id <id> --query "…"`; a unique default id avoids colliding with existing
+  // cast (the user swaps the look with a follow-up `cast add --id <id> --query "…"`).
+  const addCast = () => {
+    const run = consoleApi.current.run;
+    if (!run) {
+      showToast("Console not ready — try again", "tip");
+      return;
+    }
+    const taken = new Set(data.cast.map((c) => c.id.toLowerCase()));
+    let n = data.cast.length + 1;
+    let id = `cast-${n}`;
+    while (taken.has(id)) id = `cast-${++n}`;
+    run(`cast add --id ${id} --query "friendly cartoon character"`, true);
+  };
+  // Generate a brand-new scene from a plain-English sentence. This is the headline action:
+  // it runs `new --prompt "…" --full` (the deterministic Director — parses cast, keyword-routes
+  // the set, lays out shots/dialogue), replacing the working document, then re-hydrates the UI
+  // and auto-renders a preview so the Stage shows the new scene — not stale captions.
+  const generateScene = async () => {
+    const p = newScenePrompt.trim();
+    // No generate while a render is in flight: the in-flight render is of the OLD document
+    // and would put the old scene's video on the Stage (the buttons are disabled too).
+    if (!p || generating || rendering) return;
+    setGenerating(true);
+    setPlaying(false);
+    try {
+      // Strip quotes/backslashes so the prompt can't break the command tokenizer.
+      const safe = p.replace(/["\\]/g, "");
+      const res = await runSceneCommand(`new --prompt "${safe}" --full`);
+      if (!res.ok) {
+        showToast("Couldn't generate that scene — try rewording it", "tip");
+        return;
+      }
+      await hydrate();        // panels (cast/set/props/shots/dialogue) now reflect the NEW scene
+      setNewScenePrompt("");
+      setTime(0);
+      // CRITICAL: the render on disk is the OLD scene. Drop it so the stale video can't masquerade
+      // as the new one, then auto-render the new document.
+      setRenderVideo(null);
+      setRenderPoster(null);
+      const rendered = await doRender("sequence");   // ← awaited so the spinner stays until the video is ready
+      // doRender already toasts on failure — only celebrate when the render actually succeeded.
+      if (rendered) showToast("Scene ready — click Play on the transport to watch", "ok");
+    } catch (e) {
+      showToast(`Scene generation failed — ${e instanceof Error ? e.message : "try again"}`, "tip");
+    } finally {
+      setGenerating(false);
+    }
+  };
+  // "Continue scene" — add another shot to the CURRENT scene (same cast & set) so you can
+  // build a longer video without regenerating. Appends a medium shot; the user directs it next.
+  const continueScene = async () => {
+    if (continuing || generating || rendering || !docExists) return;
+    setContinuing(true);
+    setPlaying(false);
+    const existing = new Set(data.shots.map((s) => s.id));
+    let n = data.shots.length + 1;
+    let id = `shot-${n}`;
+    while (existing.has(id)) id = `shot-${++n}`;
+    const res = await runSceneCommand(`shot add --id ${id} --preset medium --duration 8`);
+    setContinuing(false);
+    if (!res.ok) {
+      showToast("Couldn't add a shot — try again", "tip");
+      return;
+    }
+    try {
+      await hydrate();
+    } catch {
+      // The shot committed but the re-fetch failed — recover instead of an unhandled rejection.
+      showToast("Shot added, but refreshing the scene failed — reload to see it", "tip");
+      return;
+    }
+    setSel({ type: "shot", id });
+    showToast("Shot added — same cast & set. Direct it, or tell the AI what happens next.", "ok");
+  };
+  // Drag-retime from the Timeline's Shots track: issues the real `shot retime` CLI
+  // command and re-hydrates so every consumer (stage, inspector, totals) updates.
+  const retimeShot = async (shotId: string, newDuration: number) => {
+    if (generating || rendering) return;
+    const duration = Math.max(1, Math.round(newDuration));
+    const res = await runSceneCommand(`shot retime --id ${shotId} --duration ${duration}`);
+    if (!res.ok) {
+      showToast("Couldn't retime the shot — try again", "tip");
+      return;
+    }
+    try {
+      await hydrate();
+    } catch {
+      showToast("Shot retimed, but refreshing the scene failed — reload to see it", "tip");
+    }
+  };
+  // Render hits the REAL pipeline via POST /api/render (dev middleware -> render-live /
+  // warm render server). Progress easing runs while the request is in flight (renders are
+  // not streamed); on success the rendered webm/poster is loaded into the Stage and a
+  // render card is appended. Low-fi is the default for the fast studio iteration loop.
+  // Resolves true only when the render actually succeeded, so callers (e.g. generateScene)
+  // can branch their own toasts on the real outcome.
+  const doRender = async (scope: "shot" | "sequence"): Promise<boolean> => {
+    if (rendering) {
+      showToast("Render already in progress", "tip");
+      return false;
+    }
+    const isShot = scope === "shot";
+    if (isShot && !currentShot) return false;
+    setRendering(true);
+    setRenderPct(-1);
+    setPlaying(false);
+    // Subscribe to real render-progress SSE from the render pipeline. The EventSource lives
+    // in a ref so the unmount effect can close it if the user leaves mid-render.
+    progressEs.current?.close();
+    const es = new EventSource("/api/render-progress");
+    progressEs.current = es;
+    es.onmessage = (e) => {
+      try {
+        const d = JSON.parse(e.data) as { current: number; total: number; label: string; pct: number };
+        // "waiting" = the render process hasn't written progress yet — keep the intentional
+        // indeterminate state (-1) instead of snapping the bar to a determinate 0%.
+        if (d.label === "waiting") return;
+        setRenderPct(d.pct);
+      } catch {}
+    };
+    es.onerror = () => { /* normal on close */ };
+    // Render the current shot's time-range when scope is "shot", else the whole sequence.
+    const range = isShot && currentShot ? `${Math.floor(currentShot.start)}-${Math.ceil(currentShot.start + currentShot.dur)}` : undefined;
+    const res = await runRender({ lowFi: true, range });
+    es.close();
+    if (progressEs.current === es) progressEs.current = null;
+    setRendering(false);
+    if (!res.ok) {
+      showToast("Render failed — see console", "tip");
+      return false;
+    }
+    // Re-sync the panels with the real document FIRST so the render card's duration reflects
+    // the document that was actually rendered (not a closure-captured pre-hydrate DUR).
+    let freshDur = DUR;
+    try {
+      const fresh = await hydrate();
+      if (fresh) freshDur = fresh.DUR;
+    } catch {
+      // Panels stay stale but the render itself succeeded — don't fail the whole render.
+    }
+    // Cache-bust so the Stage reloads the freshly rendered media.
+    const bust = "?t=" + Date.now();
+    if (res.video) setRenderVideo(res.video + bust);
+    if (res.poster) setRenderPoster(res.poster + bust);
+    setTranscript((tr) => [
+      ...tr,
+      {
+        type: "render",
+        id: "r" + Date.now(),
+        frame: res.poster ? res.poster + bust : "",
+        label: "low-fi preview · " + (isShot && currentShot ? fmt(currentShot.dur) : fmt(freshDur)),
+        shot: isShot && currentShot ? currentShot.name : "Full sequence",
+        meta: res.ms ? "rendered in " + (res.ms / 1000).toFixed(1) + "s" : "just now"
+      }
+    ]);
+    showToast(
+      isShot && currentShot ? "Shot render complete · " + currentShot.name : "Render complete · full sequence",
+      "ok"
+    );
+    return true;
+  };
+  return (
+    <div className="app">
+      <Topbar
+        scene={data.title}
+        onRender={() => doRender("sequence")}
+        rendering={rendering}
+        viewMode={viewMode}
+        setViewMode={setViewMode}
+        // Honest save status: while a render is in flight the working document is being
+        // committed/processed (not idle); it's "saved" only when no render is running.
+        saved={!rendering}
+      />
+      <div className={"newscene-bar" + (generating ? " busy" : "")}>
+        <span className="newscene-spark">✨</span>
+        <span className="newscene-label">New scene</span>
+        {generating ? (
+          <span className="newscene-status">
+            <span className="newscene-spinner" />
+            Building your scene — this takes ~25 seconds (generating cast, set, shots, then rendering a preview)
+          </span>
+        ) : (
+          <input
+            className="newscene-input"
+            type="text"
+            placeholder="Describe a scene in plain English — e.g. “a mechanic and a customer arguing about a broken car”"
+            value={newScenePrompt}
+            onChange={(e) => setNewScenePrompt(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === "Enter") void generateScene();
+            }}
+          />
+        )}
+        <button
+          className={"newscene-btn" + (generating ? " busy" : "")}
+          // Also disabled while a render is in flight: generating then would race the
+          // in-flight render of the OLD document (stale video lands on the Stage).
+          disabled={generating || rendering || !newScenePrompt.trim()}
+          onClick={() => void generateScene()}
+        >
+          {generating ? "Generating…" : "Generate scene"}
+        </button>
+        <span className="newscene-div" />
+        <button
+          className="newscene-btn newscene-continue"
+          disabled={generating || continuing || rendering || !docExists}
+          onClick={() => void continueScene()}
+          title="Add a shot to this scene — keeps the same characters & set"
+        >
+          {continuing ? "Adding…" : "＋ Continue scene"}
+        </button>
+      </div>
+      <div className="body">
+        <div className="col split">
+          <Outliner
+            data={data}
+            sel={sel}
+            onSelect={onSelect}
+            hidden={hidden}
+            onToggle={toggleVis}
+            onOpenPalette={() => setPaletteOpen(true)}
+            onAddCast={addCast}
+          />
+          <Inspector data={data} sel={sel} />
+        </div>
+        <div className="col center">
+          <Stage
+            data={data}
+            shot={currentShot}
+            time={time}
+            playing={playing}
+            onPlay={() => setPlaying((p) => !p)}
+            onScrub={setTime}
+            onStep={stepShot}
+            viewMode={viewMode}
+            rendering={rendering}
+            renderPct={renderPct}
+            renderVideo={renderVideo}
+            renderPoster={renderPoster}
+            empty={!docExists}
+          />
+          <Timeline data={data} time={time} onScrub={setTime} selShot={currentShot?.id ?? null} onSelShot={selectShot} onRetime={(shotId, newDuration) => void retimeShot(shotId, newDuration)} />
+        </div>
+        <div className="col">
+          <Console
+            transcript={transcript}
+            setTranscript={setTranscript}
+            selShot={currentShot?.id ?? null}
+            onRender={doRender}
+            onSceneCommit={hydrate}
+            api={consoleApi}
+          />
+        </div>
+      </div>
+      <Palette
+        open={paletteOpen}
+        setOpen={setPaletteOpen}
+        data={data}
+        api={consoleApi}
+        onJumpShot={selectShot}
+        onSelectEntity={onSelect}
+        onRender={doRender}
+        onView={setViewMode}
+      />
+      {toast && (
+        <div className="toast-wrap">
+          <div className="toast">
+            <span className="i" style={{ color: toast.kind === "ok" ? "var(--ok)" : "var(--acc)" }}>
+              <Icon name={toast.kind === "ok" ? "check" : "sparkles"} size={16} />
+            </span>
+            {toast.msg}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}