@odori/cli 0.0.2 → 0.0.3

package/studio/src/components/ExportPanel.tsx

@@ -1,5 +1,5 @@
-import {useCallback, useEffect, useRef, useState} from "react";
-import {Badge, Button, Icon, SectionTitle} from "./ui";
+import {useState} from "react";
+import {Badge, Button, SectionTitle} from "./ui";
 
 type JobState = {
   id: string;
@@ -17,13 +17,30 @@ const tone = (status: string) => (status === "failed" ? "danger" : status === "r
 /** Jobs are identified by what they wrote, not by their manifest hash. */
 const fileName = (path?: string) => path?.split(/[\\/]/).pop();
 
-const clockTime = (value?: string) => {
-  if (!value) return undefined;
-  const parsed = new Date(value);
-  return Number.isNaN(parsed.getTime()) ? undefined : parsed.toLocaleTimeString();
-};
+/** What the file is: a codec choice, or one still frame. */
+type Format = "mp4" | "webm" | "prores" | "gif" | "frame";
+type Quality = "studio" | "social" | "web";
+
+const EXTENSIONS: Record<Format, string> = {mp4: ".mp4", webm: ".webm", prores: ".mov", gif: ".gif", frame: ".png"};
+
+const FORMAT_CHOICES: Array<{id: Format; label: string; hint: string}> = [
+  {id: "mp4", label: "MP4", hint: "H.264. Plays everywhere; the default."},
+  {id: "webm", label: "WebM", hint: "VP9 with alpha, for the web and overlays."},
+  {id: "prores", label: "ProRes", hint: "ProRes 4444 with alpha, for an editor."},
+  {id: "gif", label: "GIF", hint: "Palette-optimised animation. Silent, by the format."},
+  {id: "frame", label: "Frame", hint: "The current frame as a PNG."},
+];
+
+const SCALES = [0.5, 1, 2];
+
+const QUALITY_CHOICES: Array<{id: Quality; label: string; hint: string}> = [
+  {id: "studio", label: "Studio", hint: "Highest quality, for further editing."},
+  {id: "social", label: "Social", hint: "Tuned for upload pipelines that re-encode anyway."},
+  {id: "web", label: "Web", hint: "Smallest file that still looks intentional."},
+];
 
-type Mode = "video" | "frame" | "clipboard";
+/** Even dimensions, the way the encoder's scale filter lands them. */
+const scaled = (value: number, scale: number) => Math.trunc((value * scale) / 2) * 2;
 
 /** Ids are paths under videos/, output files are flat. */
 const outputName = (videoId: string) => videoId.split("/").join("-");
@@ -37,36 +54,21 @@ export const ExportPanel = ({
   videoId,
   input,
   frame,
-  exportDir,
+  width,
+  height,
 }: {
   videoId: string;
   input: Record<string, unknown>;
   frame: number;
-  exportDir: string;
+  width: number;
+  height: number;
 }) => {
   const [job, setJob] = useState<JobState | null>(null);
   const [busy, setBusy] = useState(false);
-  const [mode, setMode] = useState<Mode>("video");
-  const [menuOpen, setMenuOpen] = useState(false);
-  const [dropUp, setDropUp] = useState(false);
+  const [format, setFormat] = useState<Format>("mp4");
+  const [quality, setQuality] = useState<Quality>("studio");
+  const [scale, setScale] = useState(1);
   const [notice, setNotice] = useState<string | null>(null);
-  const menuRef = useRef<HTMLDivElement | null>(null);
-
-  useEffect(() => {
-    if (!menuOpen) return undefined;
-    const dismiss = (event: MouseEvent) => {
-      if (!menuRef.current?.contains(event.target as Node)) setMenuOpen(false);
-    };
-    const onKey = (event: KeyboardEvent) => {
-      if (event.key === "Escape") setMenuOpen(false);
-    };
-    document.addEventListener("mousedown", dismiss);
-    document.addEventListener("keydown", onKey);
-    return () => {
-      document.removeEventListener("mousedown", dismiss);
-      document.removeEventListener("keydown", onKey);
-    };
-  }, [menuOpen]);
 
   const poll = async (id: string) => {
     for (let attempt = 0; attempt < 900; attempt += 1) {
@@ -130,74 +132,110 @@ export const ExportPanel = ({
     }
   };
 
-  const run = async (next: Mode) => {
-    setMenuOpen(false);
-    setMode(next);
+  const run = async () => {
     setNotice(null);
-    if (next === "clipboard") return copyFrame();
-    if (next === "frame") return post("/__odori/still", {videoId, input, frame});
-    return post("/__odori/exports", {videoId, input});
+    if (format === "frame") return post("/__odori/still", {videoId, input, frame});
+    return post("/__odori/exports", {videoId, input, format, quality, scale});
   };
 
   const file = outputName(videoId);
-  // Destinations name a pattern, never the live frame: the transport already
-  // reports the playhead, and a number that moves 30 times a second here reads
-  // as activity rather than as a label.
-  const modes: Array<{id: Mode; label: string; hint: string}> = [
-    {id: "video", label: "MP4 video", hint: `Encode the timeline to ${exportDir}/${file}.mp4`},
-    {id: "frame", label: "PNG frame", hint: `Write the current frame to ${exportDir}/${file}-<frame>.png`},
-    {id: "clipboard", label: "Frame to clipboard", hint: "Copy the current frame as an image, writing no file"},
-  ];
-
-  const actionLabel = mode === "video" ? "Export MP4" : mode === "clipboard" ? "Copy frame" : "Export frame";
+  // Frame rate is deliberately not an option here: fps is authored in the
+  // video's layout and every frame number in the project depends on it.
+  const still = format === "frame";
+  const hasQuality = format === "mp4" || format === "webm";
+  const inFlight = job && job.status !== "ready" && job.status !== "failed";
+  // The button names the file it will write - extension implied by the type
+  // above it - and reports its own progress while writing it.
+  const actionLabel = inFlight
+    ? `${job.status === "queued" ? "Queued" : job.status === "encoding" ? "Encoding" : "Rendering"} ${Math.round((job.progress ?? 0) * 100)}%`
+    : busy
+      ? "Working"
+      : still
+        ? `Export ${file}-${frame}`
+        : `Export ${file}`;
 
   return (
-    <div>
+    <div className="export-panel">
       <SectionTitle>Export</SectionTitle>
-      <div className="split" ref={menuRef}>
+
+      <div className="export-row">
+        <span className="export-label">Type</span>
+        <div className="export-options">
+          {FORMAT_CHOICES.map((item) => (
+            <Button
+              key={item.id}
+              variant="outline"
+              active={item.id === format}
+              disabled={busy}
+              title={item.hint}
+              onClick={() => setFormat(item.id)}
+            >
+              {item.label}
+            </Button>
+          ))}
+        </div>
+      </div>
+
+      {/* A still is a browser screenshot at the composition's own size, so
+          the encoder options do not apply to it. */}
+      {still ? null : (
+        <div className="export-row">
+          <span className="export-label">Size</span>
+          <div className="export-options">
+            {SCALES.map((option) => (
+              <Button
+                key={option}
+                variant="outline"
+                active={option === scale}
+                disabled={busy}
+                onClick={() => setScale(option)}
+              >
+                {option}x
+              </Button>
+            ))}
+          </div>
+          <span className="export-dimensions">
+            {scaled(width, scale)} × {scaled(height, scale)}
+          </span>
+        </div>
+      )}
+
+      {hasQuality ? (
+        <div className="export-row">
+          <span className="export-label">Quality</span>
+          <div className="export-options">
+            {QUALITY_CHOICES.map((item) => (
+              <Button
+                key={item.id}
+                variant="outline"
+                active={item.id === quality}
+                disabled={busy}
+                title={item.hint}
+                onClick={() => setQuality(item.id)}
+              >
+                {item.label}
+              </Button>
+            ))}
+          </div>
+        </div>
+      ) : null}
+
+      <div className="export-actions">
         <Button
           variant="primary"
           disabled={busy}
-          onClick={() => void run(mode)}
-          title={modes.find((item) => item.id === mode)?.hint}
+          onClick={() => void run()}
+          title={
+            still
+              ? `Write ${file}-${frame}.png to your Downloads folder`
+              : `Encode the timeline to ${file}${EXTENSIONS[format]} in your Downloads folder`
+          }
         >
-          {actionLabel}
+          <span>{actionLabel}</span>
         </Button>
-        <Button
-          variant="primary"
-          disabled={busy}
-          icon
-          aria-haspopup="menu"
-          aria-expanded={menuOpen}
-          aria-label="Choose what to export"
-          onClick={() => {
-            // The panel sits low in the sidebar, so the menu opens toward
-            // whichever edge has room for it.
-            const bounds = menuRef.current?.getBoundingClientRect();
-            if (bounds) setDropUp(window.innerHeight - bounds.bottom < 180);
-            setMenuOpen((open) => !open);
-          }}
-        >
-          <Icon name="caret" />
+        <Button variant="outline" disabled={busy} onClick={() => void copyFrame()} title="Copy the current frame as an image, writing no file">
+          <span>Copy frame</span>
         </Button>
-        {menuOpen ? (
-          <div className="menu" role="menu" data-placement={dropUp ? "up" : "down"}>
-            {modes.map((item) => (
-              <button
-                key={item.id}
-                type="button"
-                role="menuitemradio"
-                aria-checked={item.id === mode}
-                className="menu-item"
-                data-active={item.id === mode ? "true" : undefined}
-                onClick={() => void run(item.id)}
-              >
-                <span>{item.label}</span>
-                <span className="hint">{item.hint}</span>
-              </button>
-            ))}
-          </div>
-        ) : null}
       </div>
 
       {notice ? (
@@ -223,11 +261,7 @@ export const ExportPanel = ({
             </div>
           ) : null}
         </>
-      ) : (
-        <p className="hint" style={{marginTop: 8}}>
-          Preview needs no encode. Export writes {exportDir}/{file}.mp4 from the frozen manifest.
-        </p>
-      )}
+      ) : null}
 
     </div>
   );

package/studio/src/components/Inspector.tsx

@@ -0,0 +1,121 @@
+import {useEffect, useState} from "react";
+import type {ReactNode} from "react";
+import {Icon} from "./ui";
+
+/**
+ * The right-hand pane, with its width and its presence under the reader's
+ * control.
+ *
+ * Studio lives beside an editor or an agent pane at least as often as it owns
+ * the window, and at those widths a fixed inspector is what makes the whole
+ * app feel unusable: the stage keeps the leftovers. The width is a CSS
+ * variable on the root so the grid in `.main` can read it, and both the width
+ * and the collapsed state persist per browser, because a pane that snaps back
+ * on reload was never adjustable.
+ */
+const WIDTH_VAR = "--inspector-width";
+const STORAGE_KEY = "odori-inspector-width";
+const COLLAPSED_KEY = "odori-inspector-collapsed";
+const MIN = 240;
+const MAX = 560;
+
+const clampWidth = (value: number): number =>
+  Math.round(Math.min(Math.max(value, MIN), Math.min(MAX, window.innerWidth * 0.5)));
+
+const applyWidth = (value: number) => {
+  document.documentElement.style.setProperty(WIDTH_VAR, `${clampWidth(value)}px`);
+};
+
+export const Inspector = ({
+  title,
+  hint,
+  children,
+}: {
+  /** What this pane is about, as a person names it. */
+  title?: string;
+  /** The longer form, one hover away - usually the source path. */
+  hint?: string;
+  children: ReactNode;
+}) => {
+  const [collapsed, setCollapsed] = useState(() => window.localStorage.getItem(COLLAPSED_KEY) === "true");
+
+  useEffect(() => {
+    const stored = Number(window.localStorage.getItem(STORAGE_KEY));
+    if (Number.isFinite(stored) && stored > 0) applyWidth(stored);
+  }, []);
+
+  // The grid in .main reads this, so collapsing costs no React re-layout.
+  useEffect(() => {
+    document.documentElement.dataset.inspector = collapsed ? "collapsed" : "open";
+    window.localStorage.setItem(COLLAPSED_KEY, String(collapsed));
+    return () => {
+      delete document.documentElement.dataset.inspector;
+    };
+  }, [collapsed]);
+
+  if (collapsed) {
+    return (
+      <button
+        type="button"
+        className="inspector-reopen"
+        aria-label="Show inspector"
+        title="Show inspector"
+        onClick={() => setCollapsed(false)}
+      >
+        <Icon name="sidebar" />
+      </button>
+    );
+  }
+
+  return (
+    <aside className="inspector">
+      <div
+        className="inspector-resize"
+        role="separator"
+        aria-orientation="vertical"
+        aria-label="Resize inspector"
+        onPointerDown={(event) => {
+          // The handle is eight pixels wide; a fast drag leaves it between
+          // events. The window sees every move, so the listeners go there
+          // for the duration of the drag rather than relying on capture.
+          event.preventDefault();
+          document.body.style.userSelect = "none";
+          document.body.style.cursor = "col-resize";
+          const onMove = (move: PointerEvent) => applyWidth(window.innerWidth - move.clientX);
+          const onUp = () => {
+            window.removeEventListener("pointermove", onMove);
+            window.removeEventListener("pointerup", onUp);
+            document.body.style.userSelect = "";
+            document.body.style.cursor = "";
+            const width = getComputedStyle(document.documentElement).getPropertyValue(WIDTH_VAR).trim();
+            if (width) window.localStorage.setItem(STORAGE_KEY, String(Number.parseInt(width, 10)));
+          };
+          window.addEventListener("pointermove", onMove);
+          window.addEventListener("pointerup", onUp);
+        }}
+        onDoubleClick={() => {
+          // Back to the default, the way a draggable divider usually resets.
+          document.documentElement.style.removeProperty(WIDTH_VAR);
+          window.localStorage.removeItem(STORAGE_KEY);
+        }}
+      />
+      <div className="inspector-scroll">
+        <div className="inspector-head">
+          <span className="inspector-title" title={hint ?? title}>
+            {title}
+          </span>
+          <button
+            type="button"
+            className="inspector-toggle"
+            aria-label="Hide inspector"
+            title="Hide inspector"
+            onClick={() => setCollapsed(true)}
+          >
+            <Icon name="sidebar" />
+          </button>
+        </div>
+        {children}
+      </div>
+    </aside>
+  );
+};

package/studio/src/components/Thumbnail.tsx

@@ -1,29 +1,49 @@
-import {useState} from "react";
-import {OdoriRuntime, resolveEntryLayout, usePlayback, type VideoEntry} from "odori";
+import {useEffect, useRef, useState} from "react";
+import {OdoriRuntime, resolveEntryLayout, usePlayback, type AudioTrack, type VideoEntry} from "odori";
 import {PreviewBoundary} from "odori/preview";
 import {project} from "virtual:odori-project";
 import {useFitScale} from "./CanvasStage";
+import {Icon} from "./ui";
 
 /**
- * A gallery thumbnail is the real composition at a chosen frame, letterboxed
- * into a uniform card. Hovering plays it through the same runtime, so the
- * catalog can never drift from the render.
+ * A gallery thumbnail is the real composition, playing, letterboxed into a
+ * uniform card. It plays while it is on screen and rests while it is not —
+ * motion is what these cards are for, and asking for a hover to see any of it
+ * made the gallery read as a wall of stills. Offscreen cards pause, so a
+ * library of eighty costs what the visible rows cost.
  */
 export const Thumbnail = ({
   entry,
   frame = 0,
   durationInFrames,
-  playOnHover = true,
+  audioBadge = false,
 }: {
   entry: VideoEntry;
   frame?: number;
   durationInFrames?: number;
-  playOnHover?: boolean;
+  /** Mark the card when the composition declares sound. Videos only; a cue
+      card is nothing but sound and the chip would restate every one. */
+  audioBadge?: boolean;
 }) => {
   const layout = resolveEntryLayout(entry);
   const {width, height, fps} = layout.format;
   const [container, scale] = useFitScale(width, height);
-  const [hovering, setHovering] = useState(false);
+  const [visible, setVisible] = useState(false);
+  const [hasAudio, setHasAudio] = useState(false);
+  const [fontsReady, setFontsReady] = useState(false);
+
+  // Brand fonts load after the composition mounts, and text set in a face
+  // that arrives late repaints as a visible shift across every card. The
+  // 16:9 box holds the layout; the pixels wait for the faces.
+  useEffect(() => {
+    let live = true;
+    void document.fonts.ready.then(() => {
+      if (live) setFontsReady(true);
+    });
+    return () => {
+      live = false;
+    };
+  }, []);
   const playback = usePlayback({
     fps,
     durationInFrames: Math.max(1, durationInFrames ?? fps * 8),
@@ -32,23 +52,39 @@ export const Thumbnail = ({
     loop: true,
   });
 
-  const hover = (next: boolean) => {
-    if (!playOnHover) return;
-    setHovering(next);
-    if (next) playback.play();
-    else {
-      playback.pause();
-      playback.seek(frame);
+  // usePlayback's play/pause identities follow its internal state; keeping
+  // them out of the dependencies makes visibility the only trigger.
+  const playbackRef = useRef(playback);
+  playbackRef.current = playback;
+
+  useEffect(() => {
+    const element = container.current;
+    if (!element) return undefined;
+    const observer = new IntersectionObserver(
+      ([intersection]) => setVisible(intersection?.isIntersecting ?? false),
+      {rootMargin: "64px"},
+    );
+    observer.observe(element);
+    return () => observer.disconnect();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  useEffect(() => {
+    if (visible) {
+      playbackRef.current.play();
+      return;
     }
-  };
+    playbackRef.current.pause();
+    playbackRef.current.seek(frame);
+  }, [visible, frame]);
 
   return (
-    <div
-      className="card-canvas"
-      ref={container}
-      onPointerEnter={() => hover(true)}
-      onPointerLeave={() => hover(false)}
-    >
+    <div className="card-canvas" ref={container}>
+      {audioBadge && hasAudio ? (
+        <span className="card-audio" title="Has audio">
+          <Icon name="sound" />
+        </span>
+      ) : null}
       {/* Absolutely positioned so the composition never sizes the card. */}
       <div
         style={{
@@ -57,13 +93,19 @@ export const Thumbnail = ({
           position: "absolute",
           top: "50%",
           transform: `translate(-50%, -50%) scale(${scale})`,
+          visibility: fontsReady ? undefined : "hidden",
           width,
         }}
       >
         {/* A card in a grid of forty: one broken component must not blank
             the library it is listed in. */}
         <PreviewBoundary resetKey={entry.metadata.id} label="Threw">
-          <OdoriRuntime entry={entry} frame={hovering ? playback.frame : frame} assets={project.assets} />
+          <OdoriRuntime
+            entry={entry}
+            frame={visible ? playback.frame : frame}
+            assets={project.assets}
+            onAudio={audioBadge ? (track: AudioTrack) => setHasAudio(track.cues.length > 0) : undefined}
+          />
         </PreviewBoundary>
       </div>
     </div>

package/studio/src/components/ui.tsx

@@ -35,9 +35,9 @@ export const Separator = () => <div className="separator" />;
 
 export const SectionTitle = ({children}: {children: ReactNode}) => <h2 className="section-title">{children}</h2>;
 
-export const Fact = ({label, children}: {label: string; children: ReactNode}) => (
+export const Fact = ({label, title, children}: {label: string; title?: string; children: ReactNode}) => (
   <div className="fact">
-    <dt>{label}</dt>
+    <dt title={title}>{label}</dt>
     <dd>{children}</dd>
   </div>
 );
@@ -68,6 +68,7 @@ export const Icon = ({
     | "moon"
     | "display"
     | "external"
+    | "sidebar"
     | "search";
 }) => {
   const paths: Record<string, ReactNode> = {
@@ -92,6 +93,12 @@ export const Icon = ({
       </>
     ),
     caret: <path d="M3.6 5.6 7 9l3.4-3.4" fill="none" stroke="currentColor" strokeWidth="1.4" />,
+    sidebar: (
+      <>
+        <rect x="1.9" y="2.4" width="10.2" height="9.2" rx="1.2" fill="none" stroke="currentColor" strokeWidth="1.2" />
+        <path d="M8.9 2.4v9.2" fill="none" stroke="currentColor" strokeWidth="1.2" />
+      </>
+    ),
     search: (
       <>
         <circle cx="6.2" cy="6.2" r="3.4" fill="none" stroke="currentColor" strokeWidth="1.3" />