@odori/cli 0.0.2

package/studio/src/theme.ts

@@ -0,0 +1,61 @@
+import {useEffect, useState} from "react";
+
+export type Theme = "system" | "light" | "dark";
+
+export const THEME_STORAGE_KEY = "odori-studio-theme";
+
+const isTheme = (value: unknown): value is Theme => value === "system" || value === "light" || value === "dark";
+
+export const readStoredTheme = (): Theme => {
+  try {
+    const stored = window.localStorage.getItem(THEME_STORAGE_KEY);
+    return isTheme(stored) ? stored : "system";
+  } catch {
+    // Private browsing and hardened profiles can refuse storage.
+    return "system";
+  }
+};
+
+export const resolveTheme = (theme: Theme): "light" | "dark" =>
+  theme === "system" ? (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light") : theme;
+
+/** Applied to the document element so CSS tokens and form controls follow. */
+export const applyTheme = (theme: Theme) => {
+  const resolved = resolveTheme(theme);
+  document.documentElement.dataset.theme = resolved;
+  document.documentElement.style.colorScheme = resolved;
+};
+
+/**
+ * Theme state for the workspace chrome.
+ *
+ * Only Studio follows this. A composition always renders its brand's own
+ * colors, because the video is the product, not the surrounding tool.
+ */
+export const useTheme = (): {theme: Theme; resolved: "light" | "dark"; setTheme: (next: Theme) => void} => {
+  const [theme, setTheme] = useState<Theme>(() => (typeof window === "undefined" ? "dark" : readStoredTheme()));
+  const [resolved, setResolved] = useState<"light" | "dark">(() =>
+    typeof window === "undefined" ? "dark" : resolveTheme(readStoredTheme()),
+  );
+
+  useEffect(() => {
+    applyTheme(theme);
+    setResolved(resolveTheme(theme));
+    try {
+      window.localStorage.setItem(THEME_STORAGE_KEY, theme);
+    } catch {
+      // Preference is best effort; the applied theme still holds for this session.
+    }
+
+    if (theme !== "system") return;
+    const query = window.matchMedia("(prefers-color-scheme: dark)");
+    const onChange = () => {
+      applyTheme("system");
+      setResolved(resolveTheme("system"));
+    };
+    query.addEventListener("change", onChange);
+    return () => query.removeEventListener("change", onChange);
+  }, [theme]);
+
+  return {theme, resolved, setTheme};
+};

package/studio/src/views/AssetsView.tsx

@@ -0,0 +1,111 @@
+import {resolveEntryLayout} from "odori";
+import {project, videos} from "virtual:odori-project";
+import {AudioClip} from "../components/AudioClip";
+import {SectionTitle} from "../components/ui";
+
+const isImage = (url: string) => /\.(png|jpe?g|gif|svg|webp|avif)$/i.test(url);
+const isAudio = (url: string) => /\.(m4a|mp3|wav|aac|ogg|opus|flac)$/i.test(url);
+
+const fileSize = (bytes: number) =>
+  bytes > 1024 * 1024 ? `${(bytes / 1024 / 1024).toFixed(1)} MB` : `${Math.max(1, Math.round(bytes / 1024))} KB`;
+
+export const AssetsView = () => {
+  const audioAssets = project.assets.filter((asset) => isAudio(asset.url));
+  const visualAssets = project.assets.filter((asset) => !isAudio(asset.url));
+  const referenceFor = (url: string) => audioAssets.find((asset) => asset.url === url)?.reference;
+  // A cue can point outside the library, so a declared file that discovery did
+  // not walk is still listed rather than silently missing.
+  const library = [
+    ...project.audio.map((entry) => ({url: entry.url, name: entry.name, bytes: entry.bytes})),
+    ...audioAssets
+      .filter((asset) => !project.audio.some((entry) => entry.url === asset.url))
+      .map((asset) => ({url: asset.url, name: asset.url.split("/").pop() ?? asset.url, bytes: 0})),
+  ];
+
+  const fonts = [...new Map(videos.flatMap((video) => resolveEntryLayout(video).brand.fonts).map((font) => [font.url, font])).values()];
+
+  return (
+    <div className="assets-view">
+      <section>
+        <SectionTitle>Assets</SectionTitle>
+        {visualAssets.length === 0 ? (
+          <p className="hint">
+            Declare assets in <code>odori.config.ts</code> so preview and render workers resolve identical URLs.
+          </p>
+        ) : (
+          <ul className="asset-grid">
+            {visualAssets.map((asset) => (
+              <li key={asset.reference}>
+                {isImage(asset.url) ? <img src={asset.url} alt={asset.reference} /> : <div className="asset-file" />}
+                <strong>{asset.reference}</strong>
+                <code>{asset.url}</code>
+              </li>
+            ))}
+          </ul>
+        )}
+      </section>
+
+      <section>
+        <SectionTitle>Audio</SectionTitle>
+        {library.length === 0 ? (
+          <p className="hint">
+            Drop sounds in <code>{project.audioDir}/</code>. Reference one from a cue with{" "}
+            <code>{'<Audio src="bed/main" />'}</code> or by its URL.
+          </p>
+        ) : (
+          <ul className="asset-list">
+            {library.map((entry) => (
+              <li key={entry.url}>
+                <AudioClip url={entry.url} label={entry.name} shape />
+                <div style={{display: "flex", flexDirection: "column", gap: 2, minWidth: 0}}>
+                  <strong>
+                    {entry.name}
+                    {referenceFor(entry.url) ? (
+                      <span className="reference">{`<Audio src="${referenceFor(entry.url)}" />`}</span>
+                    ) : null}
+                  </strong>
+                  <code>
+                    {entry.url}
+                    {entry.bytes > 0 ? ` · ${fileSize(entry.bytes)}` : ""}
+                  </code>
+                </div>
+              </li>
+            ))}
+          </ul>
+        )}
+      </section>
+
+      <section>
+        <SectionTitle>Fonts</SectionTitle>
+        {/* Studio's own chrome never loaded these faces, so a name rendered in
+            its own family would otherwise fall back to a system font. */}
+        <style>
+          {fonts
+            .map(
+              (font) =>
+                `@font-face{font-family:"${font.family}";src:url("${font.url}") format("woff2");font-weight:${
+                  font.weight ?? "100 900"
+                };font-display:swap;}`,
+            )
+            .join("")}
+        </style>
+        {fonts.length === 0 ? (
+          <p className="hint">
+            Brands declare fonts with <code>defineBrand({"{fonts: [...]}"})</code>. The runtime loads them before the
+            first frame.
+          </p>
+        ) : (
+          <ul className="asset-list">
+            {fonts.map((font) => (
+              <li key={font.url}>
+                <strong style={{fontFamily: font.family, fontSize: 20}}>{font.family}</strong>
+                <code>{font.url}</code>
+              </li>
+            ))}
+          </ul>
+        )}
+      </section>
+
+    </div>
+  );
+};

package/studio/src/views/BrandsView.tsx

@@ -0,0 +1,139 @@
+import {useState} from "react";
+import {
+  OdoriRuntime,
+  defineVideoLayout,
+  entryDurationInFrames,
+  resolveEntryLayout,
+  usePlayback,
+  type Brand,
+  type CompiledTimeline,
+} from "odori";
+import {brands as discoveredBrands, project, videos} from "virtual:odori-project";
+import {CanvasStage} from "../components/CanvasStage";
+import {Transport} from "../components/Transport";
+import {Empty, Fact, SectionTitle, Separator} from "../components/ui";
+import {useShortcuts} from "../shortcuts";
+
+/** Brands come from videos/**\/brands modules and from every resolved layout. */
+export const collectBrands = (): Brand[] => {
+  const seen = new Map<string, Brand>();
+  for (const brand of discoveredBrands) seen.set(brand.name, brand);
+  for (const video of videos) {
+    const brand = resolveEntryLayout(video).brand;
+    if (!seen.has(brand.name)) seen.set(brand.name, brand);
+  }
+  return [...seen.values()];
+};
+
+export const BrandsView = () => {
+  const brands = collectBrands();
+  const [brandName, setBrandName] = useState(brands[0]?.name ?? "");
+  const [timeline, setTimeline] = useState<CompiledTimeline | null>(null);
+  const [videoId, setVideoId] = useState(videos[0]?.metadata.id ?? "");
+  const brand = brands.find((item) => item.name === brandName) ?? brands[0];
+  const entry = videos.find((video) => video.metadata.id === videoId) ?? videos[0];
+  const base = entry ? resolveEntryLayout(entry) : null;
+  const durationInFrames = entry && base ? Math.max(1, entryDurationInFrames(entry, base)) : 1;
+  const playback = usePlayback({fps: base?.format.fps ?? 30, durationInFrames, autoPlay: true, loop: true});
+
+  // A view with a transport answers the transport keys. Anything else makes
+  // the same player behave differently depending on which tab it sits in.
+  useShortcuts({
+    " ": () => playback.toggle(),
+    ArrowRight: (event) => playback.step(event.shiftKey ? (base?.format.fps ?? 30) : 1),
+    ArrowLeft: (event) => playback.step(event.shiftKey ? -(base?.format.fps ?? 30) : -1),
+    Home: () => playback.seek(0),
+    End: () => playback.seek(durationInFrames - 1),
+  });
+
+  if (!brand || !entry || !base) {
+    return <Empty title="No brands resolved">Attach a brand through defineVideoLayout().</Empty>;
+  }
+
+  const layout = defineVideoLayout({extends: base, brand});
+
+  return (
+    <>
+      <aside className="sidebar">
+        <div className="sidebar-scroll">
+          <ul className="list">
+            {brands.map((item) => (
+              <li key={item.name}>
+                <button
+                  type="button"
+                  className="list-item"
+                  data-active={item.name === brand.name ? "true" : undefined}
+                  onClick={() => setBrandName(item.name)}
+                >
+                  <strong>{item.name}</strong>
+                </button>
+              </li>
+            ))}
+          </ul>
+        </div>
+      </aside>
+
+      <section className="stage">
+        <CanvasStage width={layout.format.width} height={layout.format.height}>
+          <OdoriRuntime
+            key={`${brand.name}-${entry.metadata.id}`}
+            entry={entry}
+            frame={playback.frame}
+            layout={layout}
+            assets={project.assets}
+            onTimeline={setTimeline}
+          />
+        </CanvasStage>
+        <Transport
+          playback={playback}
+          timeline={timeline}
+          durationInFrames={durationInFrames}
+          fps={layout.format.fps}
+          loop
+          onToggleLoop={() => undefined}
+        />
+      </section>
+
+      <aside className="inspector">
+          <SectionTitle>Preview with</SectionTitle>
+        <ul className="list">
+          {videos.map((video) => (
+            <li key={video.metadata.id}>
+              <button
+                type="button"
+                className="list-item"
+                data-active={video.metadata.id === entry.metadata.id ? "true" : undefined}
+                onClick={() => setVideoId(video.metadata.id)}
+              >
+                <strong>{video.metadata.title}</strong>
+              </button>
+            </li>
+          ))}
+        </ul>
+
+        <SectionTitle>Tokens</SectionTitle>
+        <div className="swatches">
+          {Object.entries(brand.colors).map(([token, value]) => (
+            <div key={token} className="swatch">
+              <span className="chip" style={{background: value}} />
+              <span>{token}</span>
+              <code>{value}</code>
+            </div>
+          ))}
+        </div>
+        <Separator />
+        <SectionTitle>Policy</SectionTitle>
+        <dl className="facts">
+          <Fact label="sans">{brand.typography.sans.split(",")[0].replace(/"/g, "")}</Fact>
+          <Fact label="mono">{brand.typography.mono.split(",")[0].replace(/"/g, "")}</Fact>
+          <Fact label="motion">cubic-bezier({brand.motion.standard.join(", ")})</Fact>
+          <Fact label="stagger">{brand.motion.staggerFrames} frames</Fact>
+          <Fact label="audio">
+            {Object.keys(brand.audio.cues).join(", ") || "no named cues"} at {brand.audio.targetLufs} LUFS
+          </Fact>
+          <Fact label="fonts">{brand.fonts.length ? brand.fonts.map((font) => font.family).join(", ") : "system"}</Fact>
+        </dl>
+      </aside>
+    </>
+  );
+};

package/studio/src/views/ComponentsView.tsx

@@ -0,0 +1,285 @@
+import {useEffect, useMemo, useRef, useState} from "react";
+import type {ReactElement} from "react";
+import {
+  OdoriRuntime,
+  defaultBrand,
+  defineVideoLayout,
+  framesFromDuration,
+  resolveEntryLayout,
+  usePlayback,
+  type Brand,
+  type VideoEntry,
+} from "odori";
+import {PreviewBoundary} from "odori/preview";
+import {componentPreviews, project, videos} from "virtual:odori-project";
+import {CanvasStage} from "../components/CanvasStage";
+import {Transport} from "../components/Transport";
+import {Thumbnail} from "../components/Thumbnail";
+import {InputControls} from "../components/InputControls";
+import {Badge, Button, Empty, Fact, SectionTitle, Separator} from "../components/ui";
+import {useShortcuts} from "../shortcuts";
+
+type PreviewEntry = (typeof componentPreviews)[number];
+
+const projectBrands = (): Brand[] => {
+  const seen = new Map<string, Brand>();
+  for (const video of videos) {
+    const brand = resolveEntryLayout(video).brand;
+    if (!seen.has(brand.name)) seen.set(brand.name, brand);
+  }
+  if (seen.size === 0) seen.set(defaultBrand.name, defaultBrand);
+  return [...seen.values()];
+};
+
+const FAMILY_ORDER = ["Typography", "Developer proof", "Product UI", "Narrative", "Brand", "Media", "Audio"];
+
+const byFamily = (left: PreviewEntry, right: PreviewEntry) => {
+  const delta = FAMILY_ORDER.indexOf(left.preview.category) - FAMILY_ORDER.indexOf(right.preview.category);
+  return delta !== 0 ? delta : left.preview.title.localeCompare(right.preview.title);
+};
+
+const FORMATS = [
+  {label: "16:9", width: 1920, height: 1080},
+  {label: "9:16", width: 1080, height: 1920},
+  {label: "1:1", width: 1080, height: 1080},
+];
+
+/**
+ * A component preview plays through the same runtime as a full video, so a
+ * fixture and a composition can never disagree.
+ */
+export const entryFor = (
+  entry: PreviewEntry,
+  props: Record<string, unknown>,
+  brand: Brand,
+  format: {width: number; height: number},
+): VideoEntry => {
+  const Component = entry.preview.component as (componentProps: Record<string, unknown>) => ReactElement;
+  return {
+    component: () => <Component {...props} />,
+    metadata: {
+      id: `preview-${entry.id}`,
+      title: entry.preview.title,
+      duration: entry.preview.canvas.duration,
+      layout: defineVideoLayout({format: {...format, fps: 30}, brand}),
+    },
+  };
+};
+
+export const ComponentsView = ({
+  selection,
+  onSelect,
+  mode,
+}: {
+  selection: string | null;
+  onSelect: (id: string) => void;
+  mode: "player" | "gallery";
+}) => {
+  // Finding one by name is ⌘K; this list is for browsing them all.
+  const filtered = useMemo(() => [...componentPreviews].sort(byFamily), []);
+  const selected = filtered.find((entry) => entry.id === selection) ?? filtered[0];
+  const brands = projectBrands();
+  const [brandName, setBrandName] = useState(brands[0]?.name ?? defaultBrand.name);
+  const [formatLabel, setFormatLabel] = useState(FORMATS[0].label);
+  const [exampleName, setExampleName] = useState<string | null>(null);
+  const [overrides, setOverrides] = useState<Record<string, unknown>>({});
+  const [loop, setLoop] = useState(true);
+
+  const brand = brands.find((item) => item.name === brandName) ?? defaultBrand;
+  const format = FORMATS.find((item) => item.label === formatLabel) ?? FORMATS[0];
+  const durationInFrames = selected ? framesFromDuration(selected.preview.canvas.duration, 30) : 30;
+  const playback = usePlayback({fps: 30, durationInFrames, autoPlay: true, loop});
+
+  const previousId = useRef(selected?.id);
+  useEffect(() => {
+    if (previousId.current === selected?.id) return;
+    previousId.current = selected?.id;
+    setExampleName(null);
+    setOverrides({});
+    playback.seek(0);
+    playback.play();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selected?.id]);
+
+  useShortcuts({
+    " ": () => playback.toggle(),
+    ArrowRight: (event) => playback.step(event.shiftKey ? 30 : 1),
+    ArrowLeft: (event) => playback.step(event.shiftKey ? -30 : -1),
+    Home: () => playback.seek(0),
+    End: () => playback.seek(durationInFrames - 1),
+    l: () => setLoop((value) => !value),
+  });
+
+  if (!selected) {
+    return (
+      <Empty title="No component previews">
+        Add a sibling <code>*.preview.tsx</code> file, or run <code>odori add @odori/title-reveal</code>.
+      </Empty>
+    );
+  }
+
+  const preview = selected.preview;
+  const example = preview.examples.find((item) => item.name === exampleName) ?? preview.examples[0];
+  const controlDefaults = Object.fromEntries(
+    Object.entries(preview.controls ?? {}).map(([name, field]) => [name, field.defaultValue]),
+  );
+  const props = {...controlDefaults, ...(example?.props ?? {}), ...overrides};
+  const entry = entryFor(selected, props, brand, format);
+
+  if (mode === "gallery") {
+    const grouped = filtered.reduce<Record<string, PreviewEntry[]>>((groups, item) => {
+      groups[item.preview.category] = [...(groups[item.preview.category] ?? []), item];
+      return groups;
+    }, {});
+    return (
+      <div style={{overflowY: "auto", width: "100%"}}>
+        {Object.entries(grouped).map(([category, entries]) => (
+          <section key={category} style={{padding: "16px 20px 0"}}>
+            <SectionTitle>{category}</SectionTitle>
+            <div className="gallery" style={{padding: "0 0 8px"}}>
+              {entries.map((item) => (
+                <button key={item.id} type="button" className="card" onClick={() => onSelect(item.id)}>
+                  <Thumbnail
+                    entry={entryFor(
+                      item,
+                      {
+                        ...Object.fromEntries(
+                          Object.entries(item.preview.controls ?? {}).map(([name, field]) => [name, field.defaultValue]),
+                        ),
+                        ...(item.preview.examples[0]?.props ?? {}),
+                      },
+                      brand,
+                      FORMATS[0],
+                    )}
+                    frame={Math.round(framesFromDuration(item.preview.canvas.duration, 30) * 0.6)}
+                    durationInFrames={framesFromDuration(item.preview.canvas.duration, 30)}
+                  />
+                  <div className="card-meta">
+                    <strong>{item.preview.title}</strong>
+                    <span>{item.id}</span>
+                  </div>
+                </button>
+              ))}
+            </div>
+          </section>
+        ))}
+      </div>
+    );
+  }
+
+  return (
+    <>
+      <aside className="sidebar">
+        <div className="sidebar-scroll">
+          <ul className="list">
+            {filtered.map((item) => (
+              <li key={item.id}>
+                <button
+                  type="button"
+                  className="list-item"
+                  data-active={item.id === selected.id ? "true" : undefined}
+                  onClick={() => onSelect(item.id)}
+                >
+                  <strong>{item.preview.title}</strong>
+                </button>
+              </li>
+            ))}
+          </ul>
+
+        </div>
+      </aside>
+
+      <section className="stage">
+        <CanvasStage width={format.width} height={format.height}>
+          <PreviewBoundary resetKey={`${selected.id}-${format.label}-${brand.name}`} label="This component threw">
+            <OdoriRuntime
+              key={`${selected.id}-${format.label}-${brand.name}`}
+              entry={entry}
+              frame={playback.frame}
+              assets={project.assets}
+            />
+          </PreviewBoundary>
+        </CanvasStage>
+        <Transport
+          playback={playback}
+          timeline={null}
+          durationInFrames={durationInFrames}
+          fps={30}
+          loop={loop}
+          onToggleLoop={() => setLoop((value) => !value)}
+        />
+      </section>
+
+      <aside className="inspector">
+        <SectionTitle>Examples</SectionTitle>
+        <ul className="list">
+          {preview.examples.map((item) => (
+            <li key={item.name}>
+              <button
+                type="button"
+                className="list-item"
+                data-active={item.name === example?.name ? "true" : undefined}
+                onClick={() => {
+                  setExampleName(item.name);
+                  setOverrides({});
+                  playback.seek(0);
+                }}
+              >
+                <strong>{item.name}</strong>
+              </button>
+            </li>
+          ))}
+        </ul>
+
+        <SectionTitle>Component</SectionTitle>
+        <dl className="facts">
+          <Fact label="category">{preview.category}</Fact>
+          <Fact label="canvas">
+            {preview.canvas.width}x{preview.canvas.height} · {String(preview.canvas.duration)}
+          </Fact>
+          <Fact label="source">
+            {project.files.previews.find((entry) => entry.id === selected.id)?.file ??
+              `videos/components/${selected.id}/${selected.id}.preview.tsx`}
+          </Fact>
+        </dl>
+        {preview.description ? <p className="hint">{preview.description}</p> : null}
+
+        <Separator />
+        <SectionTitle>Stress tests</SectionTitle>
+        <div style={{display: "flex", flexWrap: "wrap", gap: 6}}>
+          {FORMATS.map((item) => (
+            <Button
+              key={item.label}
+              variant="outline"
+              active={item.label === formatLabel}
+              onClick={() => setFormatLabel(item.label)}
+            >
+              {item.label}
+            </Button>
+          ))}
+        </div>
+        <div style={{display: "flex", flexWrap: "wrap", gap: 6, marginTop: 8}}>
+          {brands.map((item) => (
+            <Button
+              key={item.name}
+              variant="outline"
+              active={item.name === brand.name}
+              onClick={() => setBrandName(item.name)}
+            >
+              {item.name}
+            </Button>
+          ))}
+          <Badge>{Object.keys(preview.controls ?? {}).length} controls</Badge>
+        </div>
+
+        <Separator />
+        <SectionTitle>Props</SectionTitle>
+        {preview.controls ? (
+          <InputControls fields={preview.controls} value={props} onChange={setOverrides} />
+        ) : (
+          <p className="hint">This preview declares no controls. Add them to vary props in Studio.</p>
+        )}
+      </aside>
+    </>
+  );
+};