@odori/cli 0.0.3 → 0.0.4

package/src/registry-source.ts

@@ -46,14 +46,28 @@ export type ComponentContract = {
   loops?: boolean;
 };
 
-export type RegistryKind = "component" | "cue";
+export type RegistryKind = "component" | "cue" | "asset";
+
+/** A produced file the registry publishes: sound synthesis cannot reach. */
+export type RegistryAsset = {
+  cue: string;
+  url: string;
+  target: string;
+  bytes: number;
+  integrity: string;
+};
 
 export type RegistryComponent = {
   name: string;
-  /** Components render pixels. Cues render samples. Both install as source. */
+  /**
+   * Components render pixels and cues render samples; both install as source.
+   * An asset installs as bytes into `public/` and is registered by URL.
+   */
   kind?: RegistryKind;
   /** Present on cues: the brand name it registers, and the factory to call. */
   cue?: {name: string; export: string};
+  /** Present on assets: the file to fetch and the cue name it answers to. */
+  asset?: RegistryAsset;
   namespaced: string;
   family: string;
   description: string;
@@ -123,6 +137,7 @@ type RegistryItemDocument = {
     namespaced?: string;
     contract?: RegistryComponent["contract"];
     cue?: {name: string; export: string};
+    asset?: RegistryAsset;
     integrity?: string;
   };
 };
@@ -132,6 +147,25 @@ const DEFAULT_URL = "https://odori.dev/r/v1";
 export const registryUrl = (config: ResolvedConfig): string =>
   (config.registryUrl ?? process.env.ODORI_REGISTRY ?? DEFAULT_URL).replace(/\/$/, "");
 
+/**
+ * The site the registry is served from, without its document path.
+ *
+ * Documents live under `/r/v1`; published media lives at the site root, the
+ * same absolute path a project will reference it by once it is installed. So
+ * an asset URL resolves against the origin rather than against the registry
+ * directory, and a self-hosted registry still finds its own files.
+ */
+export const registryOrigin = (config: ResolvedConfig): string => {
+  const url = registryUrl(config);
+  try {
+    return new URL(url).origin;
+  } catch {
+    // A relative or malformed registryUrl: keep everything before /r, which is
+    // where a mirror laid out like ours would put its media.
+    return url.replace(/\/r(\/v\d+)?$/, "");
+  }
+};
+
 /** One directory per origin URL, so two registries never share a cache. */
 const cacheDir = (url: string): string =>
   resolve(cacheRoot(), "registry", createHash("sha256").update(url).digest("hex").slice(0, 16));
@@ -149,6 +183,7 @@ const toComponent = (item: RegistryItemDocument): RegistryComponent => ({
   namespaced: item.meta?.namespaced ?? `@odori/${item.name}`,
   kind: (item.meta?.kind as RegistryComponent["kind"]) ?? "component",
   ...(item.meta?.cue ? {cue: item.meta.cue} : {}),
+  ...(item.meta?.asset ? {asset: item.meta.asset} : {}),
   family: item.meta?.family ?? "Uncategorized",
   description: item.description ?? "",
   files: item.files.map((file) => file.path.split("/").pop() ?? file.path),

package/src/server.ts

@@ -93,6 +93,8 @@ const odoriProjectPlugin = (config: ResolvedConfig, getGraph: () => ProjectGraph
       `export const project = ${JSON.stringify({
         root: config.root,
         videosDir: config.videosDir,
+        componentsDir: config.componentsDir,
+        categories: graph.categories,
         exportDir: config.exportDir,
         audioDir: config.audioDir,
         docsUrl: config.docsUrl,
@@ -101,7 +103,11 @@ const odoriProjectPlugin = (config: ResolvedConfig, getGraph: () => ProjectGraph
         assets: config.assets ?? [],
         files: {
           videos: graph.videos.map((video) => ({id: video.slug, file: video.relativeFile})),
-          previews: graph.previews.map((preview) => ({id: preview.name, file: preview.relativeFile})),
+          previews: graph.previews.map((preview) => ({
+            id: preview.name,
+            file: preview.relativeFile,
+            usedBy: preview.usedBy ?? [],
+          })),
           brands: graph.brands.map((brand) => ({id: brand.name, file: brand.relativeFile})),
         },
       })};`,

package/studio/src/components/Inspector.tsx

@@ -1,6 +1,7 @@
 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
@@ -29,14 +30,27 @@ const applyWidth = (value: number) => {
 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(() => {
@@ -104,6 +118,22 @@ export const Inspector = ({
           <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"
@@ -114,8 +144,78 @@ export const Inspector = ({
             <Icon name="sidebar" />
           </button>
         </div>
-        {children}
+        {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>
+  );
+};

package/studio/src/lib/highlight.ts

@@ -0,0 +1,85 @@
+/**
+ * A small TypeScript and TSX tokenizer, for reading source in the inspector.
+ *
+ * Studio ships inside `@odori/cli`, so anything it imports is something every
+ * consumer downloads. A real highlighter is megabytes of grammars to colour a
+ * read-only panel, which is a bad trade for a dev tool; this is one pass of
+ * one regex over files we already know the shape of. It is deliberately not a
+ * parser: it does not resolve types, it will not know a word is a variable
+ * rather than a call, and it does not need to. What it has to get right is
+ * that a keyword inside a string stays a string, and a slash that opens a
+ * comment is not division, which ordering the alternation handles.
+ */
+export type Token = {text: string; kind: TokenKind};
+
+export type TokenKind =
+  | "plain"
+  | "comment"
+  | "string"
+  | "keyword"
+  | "number"
+  | "tag"
+  | "attr"
+  | "fn"
+  | "punct";
+
+const KEYWORDS = new Set([
+  "as", "async", "await", "break", "case", "catch", "class", "const", "continue", "declare", "default", "delete",
+  "do", "else", "enum", "export", "extends", "false", "finally", "for", "from", "function", "if", "implements",
+  "import", "in", "instanceof", "interface", "keyof", "let", "new", "null", "of", "readonly", "return", "satisfies",
+  "static", "super", "switch", "this", "throw", "true", "try", "type", "typeof", "undefined", "var", "void", "while",
+  "yield",
+]);
+
+/*
+ * Order is the whole design. Comments and strings come first so their contents
+ * are never read as code; the JSX tag rule follows, because `<Scene` is a tag
+ * and `a < b` is not; words and numbers come last.
+ */
+const PATTERN = new RegExp(
+  [
+    "(?<comment>//[^\\n]*|/\\*[\\s\\S]*?\\*/)",
+    "(?<string>`(?:\\\\.|[^`\\\\])*`|\"(?:\\\\.|[^\"\\\\\\n])*\"|'(?:\\\\.|[^'\\\\\\n])*')",
+    "(?<tag></?[A-Za-z][\\w.]*(?=[\\s/>]))",
+    "(?<number>\\b\\d[\\w.]*\\b)",
+    "(?<word>[A-Za-z_$][\\w$]*)",
+    "(?<punct>[{}()[\\].,;:=+\\-*/<>!?&|%^~]+)",
+  ].join("|"),
+  "g",
+);
+
+export const tokenize = (source: string): Token[] => {
+  const tokens: Token[] = [];
+  let last = 0;
+
+  const push = (text: string, kind: TokenKind) => {
+    if (text) tokens.push({text, kind});
+  };
+
+  for (const match of source.matchAll(PATTERN)) {
+    const groups = match.groups ?? {};
+    const index = match.index ?? 0;
+    push(source.slice(last, index), "plain");
+    last = index + match[0].length;
+
+    if (groups.comment) push(match[0], "comment");
+    else if (groups.string) push(match[0], "string");
+    else if (groups.tag) push(match[0], "tag");
+    else if (groups.number) push(match[0], "number");
+    else if (groups.punct) push(match[0], "punct");
+    else if (groups.word) {
+      const word = match[0];
+      // A word followed by `(` is being called; one followed by `=` inside a
+      // tag is an attribute. Both are guesses from the next character, which
+      // is as far as a tokenizer can honestly go.
+      const next = source[last];
+      if (KEYWORDS.has(word)) push(word, "keyword");
+      else if (next === "(") push(word, "fn");
+      else if (next === "=" && source[last + 1] !== "=") push(word, "attr");
+      else push(word, "plain");
+    }
+  }
+
+  push(source.slice(last), "plain");
+  return tokens;
+};