@odori/cli 0.0.2

package/studio/src/components/CanvasStage.tsx

@@ -0,0 +1,79 @@
+import {useEffect, useRef, useState, type ReactNode, type RefObject} from "react";
+
+/** Fit a fixed composition size into whatever space the container has. */
+export const useFitScale = (width: number, height: number): [RefObject<HTMLDivElement | null>, number] => {
+  const container = useRef<HTMLDivElement>(null);
+  const [scale, setScale] = useState(0.25);
+
+  useEffect(() => {
+    const element = container.current;
+    if (!element) return;
+    const fit = () => {
+      const bounds = element.getBoundingClientRect();
+      if (bounds.width === 0 || bounds.height === 0) return;
+      setScale(Math.min(bounds.width / width, bounds.height / height));
+    };
+    fit();
+    const observer = new ResizeObserver(fit);
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, [height, width]);
+
+  return [container, scale];
+};
+
+/**
+ * Scales the composition to fit the viewport without changing its pixel
+ * dimensions, so what Studio shows is the render resolution scaled, not a
+ * different layout.
+ */
+export const CanvasStage = ({
+  width,
+  height,
+  safeArea,
+  showSafeArea,
+  children,
+}: {
+  width: number;
+  height: number;
+  safeArea?: {x: number; y: number};
+  showSafeArea?: boolean;
+  children: ReactNode;
+}) => {
+  const [container, scale] = useFitScale(width, height);
+
+  return (
+    <div className="viewport">
+      {/* The measured box is absolutely positioned, so the composition it
+          contains can never feed its own size back into the fit calculation. */}
+      <div className="viewport-inner" ref={container}>
+          <div
+          className="frame"
+          data-safe={showSafeArea ? "true" : undefined}
+          style={
+            {
+              height: Math.round(height * scale),
+              width: Math.round(width * scale),
+              "--safe-x": `${(safeArea?.x ?? 0) * scale}px`,
+              "--safe-y": `${(safeArea?.y ?? 0) * scale}px`,
+            } as React.CSSProperties
+          }
+        >
+          <div
+            style={{
+              height,
+              left: 0,
+              position: "absolute",
+              top: 0,
+              transform: `scale(${scale})`,
+              transformOrigin: "top left",
+              width,
+            }}
+          >
+            {children}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

package/studio/src/components/CommandPalette.tsx

@@ -0,0 +1,129 @@
+import {useEffect, useMemo, useState} from "react";
+import {componentPreviews, videos} from "virtual:odori-project";
+
+export type Command = {id: string; label: string; type: string; keywords?: string; run: () => void};
+
+/** One keystroke to anything in the project, like a code editor. */
+export const CommandPalette = ({
+  open,
+  initialQuery = "",
+  onClose,
+  onOpenVideo,
+  onOpenComponent,
+  onView,
+}: {
+  open: boolean;
+  /** What was typed in the top bar before the palette took over. */
+  initialQuery?: string;
+  onClose: () => void;
+  onOpenVideo: (id: string) => void;
+  onOpenComponent: (id: string) => void;
+  onView: (view: string) => void;
+}) => {
+  const [query, setQuery] = useState(initialQuery);
+  const [index, setIndex] = useState(0);
+
+  const commands = useMemo<Command[]>(
+    () => [
+      ...videos.map((video) => ({
+        id: `video:${video.metadata.id}`,
+        label: video.metadata.title,
+        keywords: `${video.metadata.id} ${(video.metadata.tags ?? []).join(" ")}`,
+        type: "video",
+        run: () => onOpenVideo(video.metadata.id),
+      })),
+      ...componentPreviews.map((preview) => ({
+        id: `component:${preview.id}`,
+        label: preview.preview.title,
+        keywords: `${preview.id} ${preview.preview.category}`,
+        type: "component",
+        run: () => onOpenComponent(preview.id),
+      })),
+      ...["videos", "components", "brands", "assets"].map((view) => ({
+        id: `view:${view}`,
+        label: `Go to ${view}`,
+        type: "view",
+        run: () => onView(view),
+      })),
+    ],
+    [onOpenComponent, onOpenVideo, onView],
+  );
+
+  const needle = query.trim().toLowerCase();
+  const matches = commands.filter((command) =>
+    `${command.label} ${command.keywords ?? ""}`.toLowerCase().includes(needle),
+  );
+
+  useEffect(() => {
+    if (open) {
+      setQuery(initialQuery);
+      setIndex(0);
+    }
+  }, [initialQuery, open]);
+
+  useEffect(() => {
+    if (!open) return;
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") onClose();
+      if (event.key === "ArrowDown") {
+        event.preventDefault();
+        setIndex((value) => Math.min(value + 1, matches.length - 1));
+      }
+      if (event.key === "ArrowUp") {
+        event.preventDefault();
+        setIndex((value) => Math.max(value - 1, 0));
+      }
+      if (event.key === "Enter") {
+        event.preventDefault();
+        matches[index]?.run();
+        onClose();
+      }
+    };
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [index, matches, onClose, open]);
+
+  if (!open) return null;
+
+  return (
+    <div className="overlay" onPointerDown={onClose}>
+      <div className="palette" onPointerDown={(event) => event.stopPropagation()}>
+        <input
+          className="input"
+          autoFocus
+          placeholder="Search videos, components, and views"
+          value={query}
+          onChange={(event) => {
+            setQuery(event.currentTarget.value);
+            setIndex(0);
+          }}
+        />
+        <ul>
+          {matches.map((command, position) => (
+            <li key={command.id}>
+              <button
+                type="button"
+                data-active={position === index ? "true" : undefined}
+                onPointerEnter={() => setIndex(position)}
+                onClick={() => {
+                  command.run();
+                  onClose();
+                }}
+              >
+                {command.label}
+                <span className="type">{command.type}</span>
+              </button>
+            </li>
+          ))}
+          {matches.length === 0 ? (
+            <li>
+              <button type="button" disabled>
+                No matches
+              </button>
+            </li>
+          ) : null}
+        </ul>
+      </div>
+    </div>
+  );
+};

package/studio/src/components/Diagnostics.tsx

@@ -0,0 +1,93 @@
+import {
+  entryDurationInFrames,
+  resolveEntryLayout,
+  type AudioTrack,
+  type CompiledTimeline,
+  type VideoEntry,
+} from "odori";
+import {SectionTitle, Separator} from "./ui";
+
+export type Issue = {level: "error" | "warning"; message: string};
+
+/**
+ * Validation the framework promises: a declared duration is authoritative, and
+ * compiled scene totals must agree with it.
+ */
+export const collectDiagnostics = (
+  entry: VideoEntry,
+  timeline: CompiledTimeline | null,
+  track?: AudioTrack | null,
+): Issue[] => {
+  const layout = resolveEntryLayout(entry);
+  const declared = entryDurationInFrames(entry, layout);
+  const issues: Issue[] = [];
+
+  if (!declared && !timeline?.durationInFrames) {
+    issues.push({level: "error", message: "No duration. Set metadata.duration or add scenes."});
+  }
+  if (declared && timeline && timeline.durationInFrames && timeline.durationInFrames !== declared) {
+    issues.push({
+      level: "warning",
+      message: `Scenes total ${timeline.durationInFrames} frames but metadata.duration is ${declared} frames.`,
+    });
+  }
+
+  const seen = new Set<string>();
+  for (const scene of timeline?.scenes ?? []) {
+    if (seen.has(scene.id)) issues.push({level: "error", message: `Duplicate scene id: ${scene.id}`});
+    seen.add(scene.id);
+    if (scene.durationInFrames < layout.format.fps / 2) {
+      issues.push({level: "warning", message: `Scene ${scene.id} is shorter than half a second.`});
+    }
+    // An overlap that eats most of a scene is a scene nobody sees on its own,
+    // which is almost always a duration that was meant to be longer.
+    if (scene.overlap > 0 && scene.overlap > scene.durationInFrames / 2) {
+      issues.push({
+        level: "warning",
+        message: `Scene ${scene.id} overlaps ${scene.overlap} of its ${scene.durationInFrames} frames, so it is mostly transition.`,
+      });
+    }
+  }
+  const declaredTotal = declared || timeline?.durationInFrames || 0;
+  for (const cue of track?.cues ?? []) {
+    if (declaredTotal && cue.fromFrame + cue.durationInFrames > declaredTotal) {
+      issues.push({
+        level: "warning",
+        message: `Audio ${cue.src.split("/").pop()} runs ${cue.fromFrame + cue.durationInFrames - declaredTotal} frames past the end.`,
+      });
+    }
+    if (cue.gain > 1) {
+      issues.push({level: "warning", message: `Audio ${cue.src.split("/").pop()} has gain above 1 and may clip.`});
+    }
+  }
+  return issues;
+};
+
+export const Diagnostics = ({
+  entry,
+  timeline,
+  track,
+}: {
+  entry: VideoEntry;
+  timeline: CompiledTimeline | null;
+  track?: AudioTrack | null;
+}) => {
+  const issues = collectDiagnostics(entry, timeline, track);
+  // A permanent green badge is a section that never says anything. The panel
+  // appears when a contract is actually broken, so its absence is the pass.
+  if (issues.length === 0) return null;
+
+  return (
+    <div>
+      <Separator />
+      <SectionTitle>Diagnostics</SectionTitle>
+      <ul className="issues">
+        {issues.map((issue) => (
+          <li key={issue.message} className="issue" data-level={issue.level}>
+            {issue.message}
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+};

package/studio/src/components/ExportPanel.tsx

@@ -0,0 +1,234 @@
+import {useCallback, useEffect, useRef, useState} from "react";
+import {Badge, Button, Icon, SectionTitle} from "./ui";
+
+type JobState = {
+  id: string;
+  videoId?: string;
+  status: string;
+  progress: number;
+  attempts?: number;
+  output?: string;
+  error?: string;
+  createdAt?: string;
+};
+
+const tone = (status: string) => (status === "failed" ? "danger" : status === "ready" ? "success" : undefined);
+
+/** 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();
+};
+
+type Mode = "video" | "frame" | "clipboard";
+
+/** Ids are paths under videos/, output files are flat. */
+const outputName = (videoId: string) => videoId.split("/").join("-");
+
+/**
+ * Studio never encodes to preview. Export is an explicit action that hands a
+ * frozen manifest to the same queue and render worker the CLI uses, so a job
+ * started here can be retried from either surface.
+ */
+export const ExportPanel = ({
+  videoId,
+  input,
+  frame,
+  exportDir,
+}: {
+  videoId: string;
+  input: Record<string, unknown>;
+  frame: number;
+  exportDir: string;
+}) => {
+  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 [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) {
+      await new Promise((wait) => setTimeout(wait, 1000));
+      const response = await fetch(`/__odori/jobs/${id}`);
+      if (!response.ok) continue;
+      const payload = (await response.json()) as JobState;
+      setJob(payload);
+      if (payload.status === "ready" || payload.status === "failed") return;
+    }
+  };
+
+  const post = async (path: string, body?: unknown) => {
+    setBusy(true);
+    setJob({id: "pending", status: "queued", progress: 0});
+    try {
+      const response = await fetch(path, {
+        method: "POST",
+        headers: {"content-type": "application/json"},
+        body: body === undefined ? undefined : JSON.stringify(body),
+      });
+      const payload = (await response.json()) as JobState;
+      setJob(payload);
+      if (payload.id && payload.status !== "ready" && payload.status !== "failed") await poll(payload.id);
+    } catch (error) {
+      setJob({id: "error", status: "failed", progress: 0, error: String(error)});
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  /**
+   * The write is handed a promise rather than a resolved blob so the copy stays
+   * inside the click that started it. Rendering a frame takes longer than the
+   * user activation a bare `await` would spend.
+   */
+  const copyFrame = async () => {
+    setBusy(true);
+    setNotice(null);
+    setJob(null);
+    const png = fetch("/__odori/still", {
+      method: "POST",
+      headers: {"content-type": "application/json"},
+      body: JSON.stringify({videoId, input, frame, inline: true}),
+    }).then(async (response) => {
+      if (!response.ok) throw new Error(await response.text());
+      return response.blob();
+    });
+    try {
+      await navigator.clipboard.write([new ClipboardItem({"image/png": png})]);
+      setNotice(`Frame ${frame} copied to the clipboard.`);
+    } catch {
+      try {
+        await navigator.clipboard.write([new ClipboardItem({"image/png": await png})]);
+        setNotice(`Frame ${frame} copied to the clipboard.`);
+      } catch (error) {
+        setNotice(`Could not copy frame ${frame}: ${error instanceof Error ? error.message : String(error)}`);
+      }
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const run = async (next: Mode) => {
+    setMenuOpen(false);
+    setMode(next);
+    setNotice(null);
+    if (next === "clipboard") return copyFrame();
+    if (next === "frame") return post("/__odori/still", {videoId, input, frame});
+    return post("/__odori/exports", {videoId, input});
+  };
+
+  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";
+
+  return (
+    <div>
+      <SectionTitle>Export</SectionTitle>
+      <div className="split" ref={menuRef}>
+        <Button
+          variant="primary"
+          disabled={busy}
+          onClick={() => void run(mode)}
+          title={modes.find((item) => item.id === mode)?.hint}
+        >
+          {actionLabel}
+        </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>
+        {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 ? (
+        <p className="hint" style={{marginTop: 8}}>
+          {notice}
+        </p>
+      ) : null}
+
+      {job ? (
+        <>
+          <div className="status">
+            <Badge tone={tone(job.status)}>{job.status}</Badge>
+            <span
+              style={{color: "var(--subtle)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap"}}
+              title={job.output ?? job.error}
+            >
+              {fileName(job.output) ?? job.error ?? `${Math.round((job.progress ?? 0) * 100)}%`}
+            </span>
+          </div>
+          {job.status === "rendering" || job.status === "encoding" ? (
+            <div className="progress">
+              <span style={{width: `${Math.round((job.progress ?? 0) * 100)}%`}} />
+            </div>
+          ) : null}
+        </>
+      ) : (
+        <p className="hint" style={{marginTop: 8}}>
+          Preview needs no encode. Export writes {exportDir}/{file}.mp4 from the frozen manifest.
+        </p>
+      )}
+
+    </div>
+  );
+};

package/studio/src/components/InputControls.tsx

@@ -0,0 +1,110 @@
+import type {FieldDescriptor} from "odori";
+
+export const InputControls = ({
+  fields,
+  value,
+  onChange,
+}: {
+  fields: Record<string, FieldDescriptor>;
+  value: Record<string, unknown>;
+  onChange: (next: Record<string, unknown>) => void;
+}) => {
+  const set = (name: string, next: unknown) => onChange({...value, [name]: next});
+
+  return (
+    <div>
+      {Object.entries(fields).map(([name, field]) => {
+        const current = value[name] ?? field.defaultValue;
+        return (
+          <div key={name} className="field">
+            <label htmlFor={`control-${name}`}>
+              {name}
+              <span className="hint">
+                {field.type}
+                {field.type === "text" && field.maxLength ? ` · ${String(current).length}/${field.maxLength}` : ""}
+              </span>
+            </label>
+            {field.type === "text" ? (
+              field.multiline ? (
+                <textarea
+                  id={`control-${name}`}
+                  className="input"
+                  rows={3}
+                  value={String(current)}
+                  onChange={(event) => set(name, event.currentTarget.value)}
+                />
+              ) : (
+                <input
+                  id={`control-${name}`}
+                  className="input"
+                  type="text"
+                  maxLength={field.maxLength}
+                  value={String(current)}
+                  onChange={(event) => set(name, event.currentTarget.value)}
+                />
+              )
+            ) : null}
+            {field.type === "number" ? (
+              <input
+                id={`control-${name}`}
+                className="input"
+                type="number"
+                min={field.min}
+                max={field.max}
+                step={field.step ?? 1}
+                value={Number(current)}
+                onChange={(event) => set(name, Number(event.currentTarget.value))}
+              />
+            ) : null}
+            {field.type === "boolean" ? (
+              <input
+                id={`control-${name}`}
+                type="checkbox"
+                checked={Boolean(current)}
+                onChange={(event) => set(name, event.currentTarget.checked)}
+              />
+            ) : null}
+            {field.type === "color" ? (
+              <input
+                id={`control-${name}`}
+                className="input"
+                type="color"
+                value={String(current)}
+                onChange={(event) => set(name, event.currentTarget.value)}
+              />
+            ) : null}
+            {field.type === "select" ? (
+              <select
+                id={`control-${name}`}
+                className="input"
+                value={String(current)}
+                onChange={(event) => set(name, event.currentTarget.value)}
+              >
+                {field.options.map((option) => (
+                  <option key={option} value={option}>
+                    {option}
+                  </option>
+                ))}
+              </select>
+            ) : null}
+            {field.type === "json" ? (
+              <textarea
+                id={`control-${name}`}
+                className="input"
+                rows={4}
+                defaultValue={JSON.stringify(current, null, 2)}
+                onBlur={(event) => {
+                  try {
+                    set(name, JSON.parse(event.currentTarget.value));
+                  } catch {
+                    // Keep the previous value until the JSON parses.
+                  }
+                }}
+              />
+            ) : null}
+          </div>
+        );
+      })}
+    </div>
+  );
+};