@odori/cli 0.0.2 → 0.0.3

package/studio/src/studio.css

@@ -485,30 +485,182 @@ select.input {
 
 .main {
   display: grid;
-  grid-template-columns: 260px minmax(0, 1fr) 320px;
+  /* A detail is the stage and the inspector; galleries and pages are one
+     column. The inspector's column is a root variable so its drag handle can
+     resize it without React re-laying anything out. */
+  grid-template-columns: minmax(0, 1fr) clamp(240px, var(--inspector-width, 320px), 50vw);
   overflow: hidden;
 }
 .main[data-single="true"] {
   grid-template-columns: 1fr;
 }
 
-.sidebar {
+.inspector {
   background: var(--panel);
-  border-right: 1px solid var(--border);
+  border-left: 1px solid var(--border);
+  container-type: inline-size;
   display: flex;
-  flex-direction: column;
   overflow: hidden;
+  position: relative;
 }
-.sidebar-scroll {
+.inspector-scroll {
+  flex: 1;
   overflow-y: auto;
-  padding: 10px;
+  padding: 16px;
 }
 
-.inspector {
+
+.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;
+}
+.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-left: 1px solid var(--border);
+  border-color: var(--border);
+  position: fixed;
+  right: 10px;
+  top: 58px;
+  z-index: 5;
+}
+
+/* A collapsed inspector hands its column to the stage. */
+html[data-inspector="collapsed"] .main:not([data-single="true"]) {
+  grid-template-columns: minmax(0, 1fr);
+}
+.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;
+  }
+}
+
+/* A gallery page or an explainer page: one scrolling column with a readable
+   lead-in. */
+.page {
   overflow-y: auto;
-  padding: 16px;
+  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 +919,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 +930,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 +1048,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 +1118,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;
@@ -1122,23 +1307,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,7 @@ 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 {useShortcuts} from "../shortcuts";
 
 /** Brands come from videos/**\/brands modules and from every resolved layout. */
@@ -25,12 +26,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,33 +58,52 @@ 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});
 
   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
@@ -94,8 +125,8 @@ export const BrandsView = () => {
         />
       </section>
 
-      <aside className="inspector">
-          <SectionTitle>Preview with</SectionTitle>
+      <Inspector title={brand.name} hint={project.files.brands.find((item) => item.id === brand.name)?.file}>
+        <SectionTitle>Preview with</SectionTitle>
         <ul className="list">
           {videos.map((video) => (
             <li key={video.metadata.id}>
@@ -133,7 +164,7 @@ export const BrandsView = () => {
           </Fact>
           <Fact label="fonts">{brand.fonts.length ? brand.fonts.map((font) => font.family).join(", ") : "system"}</Fact>
         </dl>
-      </aside>
+      </Inspector>
     </>
   );
 };

package/studio/src/views/ComponentsView.tsx

@@ -17,6 +17,7 @@ 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 {Inspector} from "../components/Inspector";
 import {useShortcuts} from "../shortcuts";
 
 type PreviewEntry = (typeof componentPreviews)[number];
@@ -69,15 +70,14 @@ export const entryFor = (
 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.
+  // Finding one by name is ⌘K; the gallery is for browsing them all. A route
+  // with no selection is the gallery; a selection is that component's player.
   const filtered = useMemo(() => [...componentPreviews].sort(byFamily), []);
-  const selected = filtered.find((entry) => entry.id === selection) ?? filtered[0];
+  const selected = selection ? (filtered.find((entry) => entry.id === selection) ?? null) : null;
   const brands = projectBrands();
   const [brandName, setBrandName] = useState(brands[0]?.name ?? defaultBrand.name);
   const [formatLabel, setFormatLabel] = useState(FORMATS[0].label);
@@ -110,23 +110,15 @@ export const ComponentsView = ({
     l: () => setLoop((value) => !value),
   });
 
-  if (!selected) {
+  if (filtered.length === 0) {
     return (
       <Empty title="No component previews">
-        Add a sibling <code>*.preview.tsx</code> file, or run <code>odori add @odori/title-reveal</code>.
+        Add a sibling <code>*.preview.tsx</code> file, or run <code>odori add 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") {
+  if (!selected) {
     const grouped = filtered.reduce<Record<string, PreviewEntry[]>>((groups, item) => {
       groups[item.preview.category] = [...(groups[item.preview.category] ?? []), item];
       return groups;
@@ -167,28 +159,16 @@ export const ComponentsView = ({
     );
   }
 
+  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);
+
   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">
@@ -210,7 +190,13 @@ export const ComponentsView = ({
         />
       </section>
 
-      <aside className="inspector">
+      <Inspector
+        title={preview.title}
+        hint={
+          project.files.previews.find((entry) => entry.id === selected.id)?.file ??
+          `videos/components/${selected.id}/${selected.id}.preview.tsx`
+        }
+      >
         <SectionTitle>Examples</SectionTitle>
         <ul className="list">
           {preview.examples.map((item) => (
@@ -279,7 +265,7 @@ export const ComponentsView = ({
         ) : (
           <p className="hint">This preview declares no controls. Add them to vary props in Studio.</p>
         )}
-      </aside>
+      </Inspector>
     </>
   );
 };

package/studio/src/views/HomeView.tsx

@@ -14,19 +14,26 @@ import type {StudioView} from "../Studio";
  * is in here", which is the question you have on arrival, so each card plays a
  * frame of the real composition and opens the view that owns it.
  */
+/** Cards per section here. Home is an overview; each tab shows everything. */
+const SHOWN = 6;
+
 export const HomeView = ({onOpen}: {onOpen: (view: StudioView, selection?: string) => void}) => {
   const brands = collectBrands();
   const brand = brands[0];
-  const fonts = [
-    ...new Map(videos.flatMap((video) => resolveEntryLayout(video).brand.fonts).map((font) => [font.url, font])).values(),
-  ];
 
   return (
     <div className="home">
       <section>
-        <SectionTitle>Videos</SectionTitle>
+        <div className="section-head">
+          <SectionTitle>Videos</SectionTitle>
+          {videos.length > SHOWN ? (
+            <button type="button" className="view-all" onClick={() => onOpen("videos")}>
+              View all {videos.length} →
+            </button>
+          ) : null}
+        </div>
         <div className="gallery">
-          {videos.map((video) => {
+          {videos.slice(0, SHOWN).map((video) => {
             const layout = resolveEntryLayout(video);
             return (
               <button key={video.metadata.id} type="button" className="card" onClick={() => onOpen("videos", video.metadata.id)}>
@@ -34,12 +41,11 @@ export const HomeView = ({onOpen}: {onOpen: (view: StudioView, selection?: strin
                   entry={video}
                   frame={video.metadata.thumbnailFrame ?? Math.round(entryDurationInFrames(video, layout) * 0.4)}
                   durationInFrames={entryDurationInFrames(video, layout)}
+                  audioBadge
                 />
                 <div className="card-meta">
                   <strong>{video.metadata.title}</strong>
-                  <span>
-                    {layout.format.width}x{layout.format.height} · {video.metadata.id}
-                  </span>
+                  <span>{video.metadata.id}</span>
                 </div>
               </button>
             );
@@ -48,9 +54,16 @@ export const HomeView = ({onOpen}: {onOpen: (view: StudioView, selection?: strin
       </section>
 
       <section>
-        <SectionTitle>Components</SectionTitle>
+        <div className="section-head">
+          <SectionTitle>Components</SectionTitle>
+          {componentPreviews.length > SHOWN ? (
+            <button type="button" className="view-all" onClick={() => onOpen("components")}>
+              View all {componentPreviews.length} →
+            </button>
+          ) : null}
+        </div>
         <div className="gallery">
-          {componentPreviews.map((item) => {
+          {componentPreviews.slice(0, SHOWN).map((item) => {
             const defaults = Object.fromEntries(
               Object.entries(item.preview.controls ?? {}).map(([name, field]) => [name, field.defaultValue]),
             );
@@ -78,14 +91,21 @@ export const HomeView = ({onOpen}: {onOpen: (view: StudioView, selection?: strin
       </section>
 
       <section>
-        <SectionTitle>Brands</SectionTitle>
+        <div className="section-head">
+          <SectionTitle>Brands</SectionTitle>
+          <button type="button" className="view-all" onClick={() => onOpen("brands")}>
+            View all →
+          </button>
+        </div>
         <div className="home-swatches">
           {brands.map((item) => (
             <button key={item.name} type="button" className="brand-card" onClick={() => onOpen("brands", 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) => (
-                    <span key={color} style={{background: color}} />
+                  (color, position) => (
+                    <span key={position} style={{background: color}} />
                   ),
                 )}
               </div>
@@ -101,7 +121,12 @@ export const HomeView = ({onOpen}: {onOpen: (view: StudioView, selection?: strin
       </section>
 
       <section>
-        <SectionTitle>Assets</SectionTitle>
+        <div className="section-head">
+          <SectionTitle>Assets</SectionTitle>
+          <button type="button" className="view-all" onClick={() => onOpen("assets")}>
+            View all →
+          </button>
+        </div>
         <ul className="asset-list">
           {project.audio.slice(0, 4).map((entry) => (
             <li key={entry.url}>
@@ -113,9 +138,6 @@ export const HomeView = ({onOpen}: {onOpen: (view: StudioView, selection?: strin
             </li>
           ))}
         </ul>
-        <button type="button" className="home-more" onClick={() => onOpen("assets")}>
-          {project.assets.length} declared assets · {project.audio.length} sounds · {fonts.length} fonts
-        </button>
       </section>
     </div>
   );