@odori/cli 0.0.3 → 0.0.5

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 {
@@ -294,6 +306,66 @@ a.button {
   font-size: 11px;
 }
 
+/* ---------- settings ---------- */
+
+.settings {
+  position: relative;
+}
+/* Right-aligned: the trigger is the last thing in the header, so a menu
+   growing rightward from its left edge would leave the window. */
+.settings-menu {
+  left: auto;
+  right: 0;
+}
+.menu-heading {
+  color: var(--subtle);
+  font-size: 11px;
+  letter-spacing: 0.04em;
+  margin: 6px 0 2px;
+  padding: 0 9px;
+  text-transform: uppercase;
+}
+.menu-heading:first-child {
+  margin-top: 2px;
+}
+.menu-hint {
+  color: var(--subtle);
+  font-size: 11px;
+}
+/* A tick in a reserved column, so choosing an option never reflows the row
+   or nudges the one under the cursor. */
+.menu-item {
+  display: grid;
+  grid-template-columns: 1fr 14px;
+}
+.menu-item > span:first-child {
+  grid-column: 1;
+}
+.menu-hint {
+  grid-column: 1;
+}
+.menu-item[data-selected="true"]::after {
+  align-self: center;
+  color: var(--foreground);
+  content: "✓";
+  font-size: 11px;
+  grid-column: 2;
+  grid-row: 1 / span 2;
+  justify-self: end;
+}
+/* A stalled bar stops looking like a working one. */
+.progress[data-stalled="true"] > span {
+  opacity: 0.5;
+}
+
+.menu-note {
+  border-top: 1px solid var(--border);
+  color: var(--subtle);
+  font-size: 11px;
+  margin: 4px 0 0;
+  padding: 7px 9px 3px;
+}
+
 /* Matches the transport's icon buttons rather than the host select. */
 .rate {
   appearance: none;
@@ -485,19 +557,93 @@ select.input {
 
 .main {
   display: grid;
-  /* 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);
+  /* 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;
 }
 
+/* ---------- 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;
+}
+.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;
@@ -507,6 +653,11 @@ select.input {
   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;
 }
 
 
@@ -526,6 +677,127 @@ select.input {
   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;
@@ -556,9 +828,7 @@ select.input {
 }
 
 /* A collapsed inspector hands its column to the stage. */
-html[data-inspector="collapsed"] .main:not([data-single="true"]) {
-  grid-template-columns: minmax(0, 1fr);
-}
+/* 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
@@ -630,6 +900,33 @@ html[data-inspector="collapsed"] .main:not([data-single="true"]) {
   }
 }
 
+/* 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 {
@@ -714,6 +1011,13 @@ html[data-inspector="collapsed"] .main:not([data-single="true"]) {
 
 .stage {
   display: grid;
+  /* The column has to be named. An implicit grid column is auto, which means
+     max-content, so the transport's row of controls set the width and the
+     timeline was laid out at its natural size and then clipped: in a pane this
+     narrow the right half of every video sat under the inspector, unclickable,
+     and the playhead walked off the edge on its way there. min-width on .stage
+     does not help, because the overflow is the track inside it. */
+  grid-template-columns: minmax(0, 1fr);
   grid-template-rows: minmax(0, 1fr) auto;
   min-width: 0;
   overflow: hidden;
@@ -756,13 +1060,19 @@ html[data-inspector="collapsed"] .main:not([data-single="true"]) {
   border-top: 1px solid var(--border);
   display: grid;
   gap: 10px;
+  min-width: 0;
   padding: 10px 14px 14px;
 }
 
 .transport-row {
   align-items: center;
   display: flex;
+  /* Wrapping is what lets the transport be narrower than its controls. Without
+     it the row is a single min-content block and it is the row, not the
+     timeline, that decides how wide the stage has to be. */
+  flex-wrap: wrap;
   gap: 8px;
+  min-width: 0;
 }
 
 .timecode {
@@ -777,8 +1087,13 @@ html[data-inspector="collapsed"] .main:not([data-single="true"]) {
 }
 
 .timeline {
-  cursor: pointer;
+  /* Only the track is clickable, so only the track shows a pointer. */
   display: grid;
+  /* Named for the same reason .stage is: an implicit auto column would take
+     its width from the ruler and the scene labels rather than from the space
+     available, and push the track out from under the cursor. */
+  grid-template-columns: minmax(0, 1fr);
+  min-width: 0;
   gap: 4px;
   position: relative;
   user-select: none;
@@ -792,6 +1107,8 @@ html[data-inspector="collapsed"] .main:not([data-single="true"]) {
   justify-content: space-between;
 }
 .track {
+  /* The track is a click target, not something to drag. */
+  cursor: pointer;
   background: var(--field);
   border: 1px solid var(--border);
   border-radius: var(--radius-sm);
@@ -903,6 +1220,21 @@ html[data-inspector="collapsed"] .main:not([data-single="true"]) {
   width: 7.5px;
 }
 
+/* The frame under the cursor, which is a suggestion until it is clicked. It
+   reads as the same instrument as the playhead, turned down. */
+.playhead[data-preview="true"],
+.playhead[data-preview="true"]::before {
+  background: var(--subtle);
+}
+.playhead[data-preview="true"] {
+  opacity: 0.75;
+}
+/* Muted rather than moved: the readout must not change width when it starts
+   reporting the hovered frame, or the whole row shifts under the cursor. */
+.timecode[data-preview="true"] {
+  color: var(--subtle);
+}
+
 /* ---------- inspector ---------- */
 
 .facts {
@@ -1263,6 +1595,16 @@ html[data-inspector="collapsed"] .main:not([data-single="true"]) {
   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 {

package/studio/src/views/BrandsView.tsx

@@ -13,6 +13,7 @@ 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. */
@@ -101,9 +102,21 @@ export const BrandsView = ({
   }
 
   const layout = defineVideoLayout({extends: base, brand});
+  const brandFile = project.files.brands.find((item) => item.id === brand.name)?.file;
 
   return (
     <>
+      <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}>
           <OdoriRuntime
@@ -125,7 +138,11 @@ export const BrandsView = ({
         />
       </section>
 
-      <Inspector title={brand.name} hint={project.files.brands.find((item) => item.id === brand.name)?.file}>
+      <Inspector
+        title={brand.name}
+        hint={brandFile}
+        source={brandFile}
+      >
         <SectionTitle>Preview with</SectionTitle>
         <ul className="list">
           {videos.map((video) => (