@odori/cli 0.0.2 → 0.0.4

package/studio/src/studio.css

@@ -153,6 +153,18 @@ body.render-mode {
   background-clip: content-box;
 }
 
+/* Anything you click says so, once, rather than per control. */
+button:not(:disabled),
+[role="button"]:not([aria-disabled="true"]),
+summary {
+  cursor: pointer;
+}
+
+button:disabled,
+[role="button"][aria-disabled="true"] {
+  cursor: not-allowed;
+}
+
 /* ---------- primitives ---------- */
 
 .button {
@@ -485,30 +497,407 @@ select.input {
 
 .main {
   display: grid;
-  grid-template-columns: 260px minmax(0, 1fr) 320px;
+  /* A detail is a list, a stage, and an inspector; galleries and pages are one
+     column. The side columns size to their contents, so a panel that puts
+     itself away takes its column with it and the stage grows into the gap
+     without a rule per combination of what is open. The inspector's width is
+     a root variable so its drag handle can resize it without React re-laying
+     anything out. */
+  grid-template-columns: auto minmax(0, 1fr) auto;
   overflow: hidden;
 }
 .main[data-single="true"] {
   grid-template-columns: 1fr;
 }
 
-.sidebar {
+/* ---------- navigator ---------- */
+
+.navigator {
   background: var(--panel);
   border-right: 1px solid var(--border);
   display: flex;
   flex-direction: column;
   overflow: hidden;
+  width: 232px;
+}
+.navigator-head {
+  align-items: center;
+  border-bottom: 1px solid var(--border);
+  display: flex;
+  gap: 6px;
+  padding: 10px;
+}
+.navigator-search {
+  height: 28px;
+  font-size: 12px;
+  min-width: 0;
 }
-.sidebar-scroll {
+.navigator-scroll {
   overflow-y: auto;
   padding: 10px;
+  scrollbar-gutter: stable;
+}
+.navigator-group {
+  color: var(--subtle);
+  font-size: 11px;
+  font-weight: 500;
+  letter-spacing: 0.04em;
+  margin: 10px 0 4px 2px;
+  text-transform: uppercase;
+}
+.navigator-scroll > div:first-child .navigator-group {
+  margin-top: 0;
+}
+.navigator-empty {
+  padding: 4px 2px;
+}
+.navigator-toggle,
+.navigator-reopen {
+  align-items: center;
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: var(--radius-sm);
+  color: var(--muted);
+  cursor: pointer;
+  display: inline-flex;
+  flex: none;
+  height: 28px;
+  justify-content: center;
+  width: 28px;
+}
+.navigator-toggle:hover,
+.navigator-reopen:hover {
+  background: var(--hover);
+  color: var(--foreground);
+}
+/* Away, the way back floats where the list was. */
+.navigator-reopen {
+  background: var(--panel);
+  border-color: var(--border);
+  left: 10px;
+  position: fixed;
+  top: 58px;
+  z-index: 5;
 }
 
 .inspector {
   background: var(--panel);
   border-left: 1px solid var(--border);
+  width: clamp(240px, var(--inspector-width, 320px), 50vw);
+  container-type: inline-size;
+  display: flex;
+  overflow: hidden;
+  position: relative;
+}
+.inspector-scroll {
+  flex: 1;
   overflow-y: auto;
   padding: 16px;
+  /* The gutter is reserved whether or not it is used. Code is taller than the
+     facts it replaces, so switching to it summoned a scrollbar, and the ten
+     pixels that took came out of the content: the header's controls jumped
+     sideways every time you changed face. */
+  scrollbar-gutter: stable;
+}
+
+
+.inspector-head {
+  align-items: center;
+  display: flex;
+  gap: 8px;
+  justify-content: space-between;
+  margin-bottom: 14px;
+}
+.inspector-title {
+  color: var(--foreground);
+  font-size: 13px;
+  font-weight: 500;
+  letter-spacing: -0.01em;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+/* Two views of one selection, not two modes: the segmented control sits in
+   the pane's own header rather than above the whole app. */
+.inspector-views {
+  background: var(--hover);
+  border-radius: var(--radius-sm);
+  display: flex;
+  flex: none;
+  gap: 2px;
+  margin-left: auto;
+  padding: 2px;
+}
+.inspector-views button {
+  background: transparent;
+  border: 0;
+  border-radius: calc(var(--radius-sm) - 1px);
+  color: var(--muted);
+  cursor: pointer;
+  font: inherit;
+  font-size: 11px;
+  padding: 3px 9px;
+}
+.inspector-views button:hover {
+  color: var(--foreground);
+}
+/* A lift off the track it sits in, and nothing else. The weight and the
+   border this used to add both changed the button's size, so selecting one
+   nudged the other sideways: emphasis has to come from colour alone, or the
+   control moves while you read it. */
+.inspector-views button[data-active="true"] {
+  background: color-mix(in srgb, var(--foreground) 10%, var(--hover));
+  color: var(--foreground);
+}
+
+/* Which of a component's files is being read. */
+.source-files {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-bottom: 10px;
+}
+.source-files button {
+  background: transparent;
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  color: var(--muted);
+  font-family: var(--font-mono);
+  font-size: 11px;
+  padding: 3px 10px;
+}
+.source-files button:hover {
+  color: var(--foreground);
+}
+.source-files button[data-active="true"] {
+  background: var(--hover);
+  border-color: var(--border-strong);
+  color: var(--foreground);
+}
+
+/*
+ * Token colours, taken from the same GitHub themes the docs site highlights
+ * with, so a component's source reads the same in both places.
+ */
+:root {
+  --token-comment: #6e7781;
+  --token-string: #0a3069;
+  --token-keyword: #cf222e;
+  --token-number: #0550ae;
+  --token-tag: #116329;
+  --token-attr: #953800;
+  --token-fn: #8250df;
+}
+:root[data-theme="dark"] {
+  --token-comment: #8b949e;
+  --token-string: #a5d6ff;
+  --token-keyword: #ff7b72;
+  --token-number: #79c0ff;
+  --token-tag: #7ee787;
+  --token-attr: #ffa657;
+  --token-fn: #d2a8ff;
+}
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+    --token-comment: #8b949e;
+    --token-string: #a5d6ff;
+    --token-keyword: #ff7b72;
+    --token-number: #79c0ff;
+    --token-tag: #7ee787;
+    --token-attr: #ffa657;
+    --token-fn: #d2a8ff;
+  }
+}
+
+.source [data-token="comment"] { color: var(--token-comment); font-style: italic; }
+.source [data-token="string"] { color: var(--token-string); }
+.source [data-token="keyword"] { color: var(--token-keyword); }
+.source [data-token="number"] { color: var(--token-number); }
+.source [data-token="tag"] { color: var(--token-tag); }
+.source [data-token="attr"] { color: var(--token-attr); }
+.source [data-token="fn"] { color: var(--token-fn); }
+.source [data-token="punct"] { color: var(--muted); }
+
+/*
+ * Code scrolls the full width of the pane. The inspector pads its content by
+ * sixteen, which is right for prose and wrong for a scrolling region: it left
+ * a gutter the code could not reach, so a long line appeared to stop short of
+ * an edge it had not reached. The negative margin gives the scroller the whole
+ * pane and the padding puts the text back where it was.
+ */
+.source {
+  color: var(--foreground);
+  font-family: var(--font-mono);
+  font-size: 11px;
+  line-height: 1.65;
+  margin: 0 -16px;
+  overflow-x: auto;
+  overscroll-behavior-x: contain;
+  padding: 0 16px;
+  tab-size: 2;
+  white-space: pre;
+}
+
+.inspector-toggle,
+.inspector-reopen {
+  align-items: center;
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: var(--radius-sm);
+  color: var(--muted);
+  cursor: pointer;
+  display: inline-flex;
+  flex: none;
+  height: 26px;
+  justify-content: center;
+  width: 26px;
+}
+.inspector-toggle:hover,
+.inspector-reopen:hover {
+  background: var(--hover);
+  color: var(--foreground);
+}
+/* When the pane is away, the way back floats where the pane was. */
+.inspector-reopen {
+  background: var(--panel);
+  border-color: var(--border);
+  position: fixed;
+  right: 10px;
+  top: 58px;
+  z-index: 5;
+}
+
+/* A collapsed inspector hands its column to the stage. */
+/* Panels carry their own width now, so collapsing one needs no grid rule. */
+.inspector-resize {
+  cursor: col-resize;
+  /* Fully inside the pane: the inspector clips overflow, and a handle hung
+     across the border loses the clipped half of its hit area. */
+  inset: 0 auto 0 0;
+  position: absolute;
+  touch-action: none;
+  width: 8px;
+  z-index: 2;
+}
+/* The hit area is eight pixels; the drawn feedback is a two-pixel line on
+   the pane's edge. Filling the whole strip read as a fat bar mid-drag. */
+.inspector-resize::before {
+  content: "";
+  inset: 0 auto 0 0;
+  position: absolute;
+  width: 2px;
+}
+.inspector-resize:hover::before,
+.inspector-resize:active::before {
+  background: color-mix(in srgb, var(--accent, #7c8cff) 55%, transparent);
+}
+
+/* The export block: what to make, how big, how compressed, then one
+   full-width action named after the file it writes. */
+.export-panel {
+  display: grid;
+  gap: 10px;
+}
+.export-row {
+  display: grid;
+  gap: 5px;
+}
+.export-label {
+  color: var(--muted);
+  font-size: 12px;
+}
+.export-options {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+.export-dimensions {
+  color: var(--subtle);
+  font-family: var(--font-mono);
+  font-size: 11px;
+}
+/* The action names a file, and file names outgrow narrow panes. */
+.export-panel .button {
+  min-width: 0;
+}
+.export-panel .button > span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+/* Stacked while narrow, side by side once the pane can afford it. */
+.export-actions {
+  display: grid;
+  gap: 8px;
+}
+.export-actions .button {
+  width: 100%;
+}
+@container (min-width: 340px) {
+  .export-actions {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
+/* Filter the catalog by the video a component is actually used in. */
+.catalog-filter {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  padding: 16px 20px 0;
+}
+.catalog-filter button {
+  background: transparent;
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  color: var(--muted);
+  cursor: pointer;
+  font: inherit;
+  font-size: 12px;
+  padding: 4px 12px;
+}
+.catalog-filter button:hover {
+  border-color: var(--border-strong);
+  color: var(--foreground);
+}
+.catalog-filter button[data-active="true"] {
+  background: var(--hover);
+  border-color: var(--border-strong);
+  color: var(--foreground);
+}
+
+/* A gallery page or an explainer page: one scrolling column with a readable
+   lead-in. */
+.page {
+  overflow-y: auto;
+  padding: 16px 20px;
+}
+.page-hint {
+  color: var(--muted);
+  font-size: 13px;
+  line-height: 1.6;
+  margin: 0 0 16px;
+  max-width: 64ch;
+}
+
+/* A section heading with an action on the same line, for the home page's
+   "View all" links. */
+.section-head {
+  align-items: baseline;
+  display: flex;
+  justify-content: space-between;
+}
+.view-all {
+  background: none;
+  border: 0;
+  color: var(--muted);
+  cursor: pointer;
+  font-size: 12px;
+  padding: 0;
+}
+.view-all:hover {
+  color: var(--foreground);
 }
 
 .section-title {
@@ -767,6 +1156,9 @@ select.input {
 }
 .fact dt {
   color: var(--subtle);
+  /* A label longer than its column wraps inside it. Without this a long
+     token walks into the value column and reads as two facts overprinted. */
+  overflow-wrap: anywhere;
 }
 .fact dd {
   color: var(--foreground);
@@ -775,6 +1167,16 @@ select.input {
   overflow-wrap: anywhere;
 }
 
+/* Facts read as a table while there is room and as a list when there is not.
+   Two columns in a narrow pane wrap both halves and read as neither. After
+   the base rule, because a container query adds no specificity of its own. */
+@container (max-width: 300px) {
+  .fact {
+    gap: 2px;
+    grid-template-columns: 1fr;
+  }
+}
+
 .field {
   display: grid;
   gap: 5px;
@@ -883,6 +1285,23 @@ select.input {
 .card[data-active="true"] {
   border-color: var(--border-strong);
 }
+/* A quiet corner chip: this composition has sound. */
+.card-audio {
+  align-items: center;
+  background: color-mix(in srgb, #000 55%, transparent);
+  border-radius: 999px;
+  color: #fff;
+  display: inline-flex;
+  height: 22px;
+  justify-content: center;
+  opacity: 0.85;
+  position: absolute;
+  right: 8px;
+  top: 8px;
+  width: 22px;
+  z-index: 2;
+}
+
 .card-canvas {
   aspect-ratio: 16 / 9;
   background: #000;
@@ -936,6 +1355,9 @@ select.input {
 }
 
 .assets-view {
+  /* Rows pack at the top. Stretched rows made a near-empty page read as
+     three stranded lines with a screen of black between them. */
+  align-content: start;
   display: grid;
   gap: 26px;
   overflow-y: auto;
@@ -1078,6 +1500,16 @@ select.input {
   color: var(--foreground);
 }
 
+/* A drawer inside a family. Quieter than the family it sits under, and
+   indented enough that the nesting reads without a rule to draw it. */
+.group-title {
+  color: var(--muted);
+  font-size: 12px;
+  font-weight: 500;
+  letter-spacing: -0.01em;
+  margin: 2px 0 8px;
+}
+
 /* ---------- home ---------- */
 
 .home {
@@ -1122,23 +1554,6 @@ select.input {
 .brand-card .card-meta {
   padding: 0 12px;
 }
-.home-more {
-  background: transparent;
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  color: var(--muted);
-  cursor: pointer;
-  font-family: var(--font-mono);
-  font-size: 11px;
-  margin-top: 10px;
-  padding: 9px 12px;
-  text-align: left;
-  width: 100%;
-}
-.home-more:hover {
-  border-color: var(--border-strong);
-  color: var(--foreground);
-}
 
 .statusbar {
   align-items: center;

package/studio/src/views/AssetsView.tsx

@@ -1,7 +1,7 @@
 import {resolveEntryLayout} from "odori";
 import {project, videos} from "virtual:odori-project";
 import {AudioClip} from "../components/AudioClip";
-import {SectionTitle} from "../components/ui";
+import {Empty, 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);
@@ -24,6 +24,19 @@ export const AssetsView = () => {
 
   const fonts = [...new Map(videos.flatMap((video) => resolveEntryLayout(video).brand.fonts).map((font) => [font.url, font])).values()];
 
+  // Three sections of nothing is a page that looks broken. One empty state
+  // says what belongs here and where each kind of file goes.
+  if (visualAssets.length === 0 && library.length === 0 && fonts.length === 0) {
+    return (
+      <Empty title="No assets yet">
+        Assets are the files videos reference beyond code: images and footage declared in{" "}
+        <code>odori.config.ts</code>, sounds dropped in <code>{project.audioDir}/</code>, and fonts a brand declares
+        with <code>defineBrand({"{fonts: [...]}"})</code>. Everything lives under <code>public/</code>, the one path
+        that means the same thing in preview and render. Add a file and it appears here.
+      </Empty>
+    );
+  }
+
   return (
     <div className="assets-view">
       <section>

package/studio/src/views/BrandsView.tsx

@@ -12,6 +12,8 @@ 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 {Inspector} from "../components/Inspector";
+import {Navigator} from "../components/Navigator";
 import {useShortcuts} from "../shortcuts";
 
 /** Brands come from videos/**\/brands modules and from every resolved layout. */
@@ -25,12 +27,23 @@ export const collectBrands = (): Brand[] => {
   return [...seen.values()];
 };
 
-export const BrandsView = () => {
+/**
+ * A brand is the project's design system as one object — colors, type, motion
+ * policy, and named sounds — declared once and inherited by every video. This
+ * view exists to answer "what does this brand make everything look like":
+ * pick a brand, and watch a real video re-render under it.
+ */
+export const BrandsView = ({
+  selection,
+  onSelect,
+}: {
+  selection: string | null;
+  onSelect: (name: string) => void;
+}) => {
   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 brand = selection ? (brands.find((item) => item.name === selection) ?? null) : null;
   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;
@@ -46,32 +59,63 @@ export const BrandsView = () => {
     End: () => playback.seek(durationInFrames - 1),
   });
 
-  if (!brand || !entry || !base) {
-    return <Empty title="No brands resolved">Attach a brand through defineVideoLayout().</Empty>;
+  if (brands.length === 0 || !entry || !base) {
+    return (
+      <Empty title="No brands resolved">
+        A brand is the design system every video inherits: colors, type, motion, and named sounds, declared with{" "}
+        <code>defineBrand()</code> and attached through <code>defineVideoLayout()</code>. The scaffold puts one in{" "}
+        <code>videos/layout.tsx</code>.
+      </Empty>
+    );
+  }
+
+  if (!brand) {
+    return (
+      <div className="page">
+        <p className="page-hint">
+          A brand is the project's design system as one object: colors, type, motion policy, and named sounds,
+          declared once in source and inherited by every video. Open one to preview a real video re-rendered under it.
+        </p>
+        <div className="home-swatches">
+          {brands.map((item) => (
+            <button key={item.name} type="button" className="brand-card" onClick={() => onSelect(item.name)}>
+              <div className="swatch-colors">
+                {/* Keyed by position: two tokens can resolve to one color,
+                    and a color used twice is not one child twice. */}
+                {[item.colors.background, item.colors.surface, item.colors.foreground, item.colors.accent, item.colors.border].map(
+                  (color, position) => (
+                    <span key={position} style={{background: color}} />
+                  ),
+                )}
+              </div>
+              <div className="card-meta">
+                <strong>{item.name}</strong>
+                <span>
+                  {item.typography.sans.split(",")[0].replace(/"/g, "")} · {item.audio.targetLufs} LUFS
+                </span>
+              </div>
+            </button>
+          ))}
+        </div>
+      </div>
+    );
   }
 
   const layout = defineVideoLayout({extends: base, brand});
+  const brandFile = project.files.brands.find((item) => item.id === brand.name)?.file;
 
   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>
+      <Navigator
+        label="Brands"
+        selected={brand.name}
+        onSelect={onSelect}
+        items={brands.map((item) => ({
+          id: item.name,
+          title: item.name,
+          detail: `${Object.keys(item.audio.cues).length} cues · ${item.audio.targetLufs} LUFS`,
+        }))}
+      />
 
       <section className="stage">
         <CanvasStage width={layout.format.width} height={layout.format.height}>
@@ -94,8 +138,12 @@ export const BrandsView = () => {
         />
       </section>
 
-      <aside className="inspector">
-          <SectionTitle>Preview with</SectionTitle>
+      <Inspector
+        title={brand.name}
+        hint={brandFile}
+        source={brandFile}
+      >
+        <SectionTitle>Preview with</SectionTitle>
         <ul className="list">
           {videos.map((video) => (
             <li key={video.metadata.id}>
@@ -133,7 +181,7 @@ export const BrandsView = () => {
           </Fact>
           <Fact label="fonts">{brand.fonts.length ? brand.fonts.map((font) => font.family).join(", ") : "system"}</Fact>
         </dl>
-      </aside>
+      </Inspector>
     </>
   );
 };