@odori/cli 0.0.2 → 0.0.4

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,221 @@
+import {useEffect, useState} from "react";
+import type {ReactNode} from "react";
+import {Icon} from "./ui";
+import {tokenize} from "../lib/highlight";
+
+/**
+ * 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,
+  source,
+  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;
+  /**
+   * The files that produced what is on the stage, relative to the project.
+   * Given any, the pane offers to show them: the source is the truth here, so
+   * it should be one click from the frame rather than a path to go and find.
+   * More than one because a component is two files - what it draws and the
+   * fixture that plays it - and reading only the fixture answers the wrong
+   * question.
+   */
+  source?: string | string[];
+  children: ReactNode;
+}) => {
+  const files = source === undefined ? [] : Array.isArray(source) ? source : [source];
+  const [showing, setShowing] = useState<"inspect" | "code">("inspect");
+  const [reading, setReading] = useState(0);
+  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>
+          {files.length > 0 ? (
+            <div className="inspector-views" role="tablist">
+              {(["inspect", "code"] as const).map((view) => (
+                <button
+                  key={view}
+                  type="button"
+                  role="tab"
+                  aria-selected={showing === view}
+                  data-active={showing === view ? "true" : undefined}
+                  onClick={() => setShowing(view)}
+                >
+                  {view === "inspect" ? "Inspect" : "Code"}
+                </button>
+              ))}
+            </div>
+          ) : null}
+          <button
+            type="button"
+            className="inspector-toggle"
+            aria-label="Hide inspector"
+            title="Hide inspector"
+            onClick={() => setCollapsed(true)}
+          >
+            <Icon name="sidebar" />
+          </button>
+        </div>
+        {files.length > 0 && showing === "code" ? (
+          <>
+            {/* One file is the file; several want naming, so the pane says
+                which of a component's two halves is on screen. */}
+            {files.length > 1 ? (
+              <div className="source-files" role="tablist">
+                {files.map((file, index) => (
+                  <button
+                    key={file}
+                    type="button"
+                    role="tab"
+                    aria-selected={index === reading}
+                    data-active={index === reading ? "true" : undefined}
+                    title={file}
+                    onClick={() => setReading(index)}
+                  >
+                    {file.split("/").pop()}
+                  </button>
+                ))}
+              </div>
+            ) : null}
+            <SourceView file={files[Math.min(reading, files.length - 1)]} />
+          </>
+        ) : (
+          children
+        )}
+      </div>
+    </aside>
+  );
+};
+
+/**
+ * The file, as it is on disk. Read only on purpose: the editor is the editor,
+ * and what this answers is "what wrote this frame", which is a reading
+ * question. It refetches when the path changes, and the dev server reloads the
+ * page on every source edit, so what is shown is never stale.
+ */
+const SourceView = ({file}: {file: string}) => {
+  const [text, setText] = useState<string | null>(null);
+  const [failed, setFailed] = useState<string | null>(null);
+
+  useEffect(() => {
+    let live = true;
+    setText(null);
+    setFailed(null);
+    void fetch(`/__odori/source?file=${encodeURIComponent(file)}`)
+      .then(async (response) => {
+        if (!response.ok) throw new Error(await response.text());
+        return response.text();
+      })
+      .then((body) => live && setText(body))
+      .catch((error) => live && setFailed(error instanceof Error ? error.message : String(error)));
+    return () => {
+      live = false;
+    };
+  }, [file]);
+
+  if (failed) return <p className="hint">{failed}</p>;
+  if (text === null) return <p className="hint">Reading {file}</p>;
+  return (
+    <pre className="source">
+      <code>
+        {tokenize(text).map((token, index) =>
+          token.kind === "plain" ? (
+            token.text
+          ) : (
+            <span key={index} data-token={token.kind}>
+              {token.text}
+            </span>
+          ),
+        )}
+      </code>
+    </pre>
+  );
+};

package/studio/src/components/Navigator.tsx

@@ -0,0 +1,145 @@
+import {useEffect, useMemo, useRef, useState} from "react";
+import {Icon} from "./ui";
+
+/**
+ * The list of everything in a view, beside the thing you are looking at.
+ *
+ * Studio moved to gallery-then-detail so a narrow pane could give the stage
+ * its whole width, which is right when Studio sits beside an agent and wrong
+ * when you are working through a library: reaching the next component meant
+ * going back to the gallery, finding it, and clicking in. A session of that
+ * is a lot of round trips.
+ *
+ * So the list comes back as something you can put away. It collapses the way
+ * the inspector does, remembers that choice, and filters as you type, which
+ * is the part a gallery cannot do at all.
+ */
+const COLLAPSED_KEY = "odori-navigator-collapsed";
+
+export type NavigatorItem = {
+  id: string;
+  title: string;
+  /** The quieter second line: an id, a duration, a file. */
+  detail?: string;
+  /** A heading to sit under. Items with none come first, ungrouped. */
+  group?: string;
+};
+
+export const Navigator = ({
+  label,
+  items,
+  selected,
+  onSelect,
+}: {
+  /** What this list is of, for the header and the screen reader. */
+  label: string;
+  items: NavigatorItem[];
+  selected: string | null;
+  onSelect: (id: string) => void;
+}) => {
+  const [collapsed, setCollapsed] = useState(() => window.localStorage.getItem(COLLAPSED_KEY) === "true");
+  const [query, setQuery] = useState("");
+  const field = useRef<HTMLInputElement>(null);
+
+  // The grid in .main reads this, so opening the list costs no React layout.
+  useEffect(() => {
+    document.documentElement.dataset.navigator = collapsed ? "collapsed" : "open";
+    window.localStorage.setItem(COLLAPSED_KEY, String(collapsed));
+    return () => {
+      delete document.documentElement.dataset.navigator;
+    };
+  }, [collapsed]);
+
+  const matches = useMemo(() => {
+    const needle = query.trim().toLowerCase();
+    if (!needle) return items;
+    return items.filter((item) =>
+      [item.title, item.id, item.group].some((value) => value?.toLowerCase().includes(needle)),
+    );
+  }, [items, query]);
+
+  /* Headings come from the order the caller sorted, so a group is a run of
+     items rather than a bucket this has to invent an order for. */
+  const runs = useMemo(() => {
+    const out: Array<{group?: string; items: NavigatorItem[]}> = [];
+    for (const item of matches) {
+      const last = out.at(-1);
+      if (last && last.group === item.group) last.items.push(item);
+      else out.push({group: item.group, items: [item]});
+    }
+    return out;
+  }, [matches]);
+
+  if (collapsed) {
+    return (
+      <button
+        type="button"
+        className="navigator-reopen"
+        aria-label={`Show ${label.toLowerCase()}`}
+        title={`Show ${label.toLowerCase()}`}
+        onClick={() => setCollapsed(false)}
+      >
+        <Icon name="sidebar" />
+      </button>
+    );
+  }
+
+  return (
+    <aside className="navigator" aria-label={label}>
+      <div className="navigator-head">
+        <button
+          type="button"
+          className="navigator-toggle"
+          aria-label={`Hide ${label.toLowerCase()}`}
+          title={`Hide ${label.toLowerCase()}`}
+          onClick={() => setCollapsed(true)}
+        >
+          <Icon name="sidebar" />
+        </button>
+        <input
+          ref={field}
+          className="input navigator-search"
+          type="search"
+          placeholder={`Filter ${label.toLowerCase()}`}
+          value={query}
+          onChange={(event) => setQuery(event.currentTarget.value)}
+          onKeyDown={(event) => {
+            if (event.key === "Escape") {
+              // The first press clears, the second gives the keys back to the
+              // transport: typing in here must not eat the space bar.
+              if (query) setQuery("");
+              else event.currentTarget.blur();
+            }
+          }}
+        />
+      </div>
+
+      <div className="navigator-scroll">
+        {matches.length === 0 ? (
+          <p className="hint navigator-empty">Nothing matches {query}.</p>
+        ) : (
+          runs.map((run) => (
+            <div key={run.group ?? "."}>
+              {run.group ? <h3 className="navigator-group">{run.group}</h3> : null}
+              <ul className="list">
+                {run.items.map((item) => (
+                  <li key={item.id}>
+                    <button
+                      type="button"
+                      className="list-item"
+                      data-active={item.id === selected ? "true" : undefined}
+                      onClick={() => onSelect(item.id)}
+                    >
+                      <strong>{item.title}</strong>
+                      {item.detail ? <span>{item.detail}</span> : null}
+                    </button>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          ))
+        )}
+      </div>
+    </aside>
+  );
+};