@odori/cli 0.0.5 → 0.0.6

package/studio/src/components/Inspector.tsx

@@ -95,12 +95,18 @@ export const Inspector = ({
           event.preventDefault();
           document.body.style.userSelect = "none";
           document.body.style.cursor = "col-resize";
+          /* The column eases when a pane is put away, and a drag writes that
+             same column many times a second. Easing it then means the track
+             is always behind the pointer while the pane's own width is not,
+             and the difference between them is a strip of empty page. */
+          document.documentElement.dataset.resizing = "";
           const onMove = (move: PointerEvent) => applyWidth(window.innerWidth - move.clientX);
           const onUp = () => {
             window.removeEventListener("pointermove", onMove);
             window.removeEventListener("pointerup", onUp);
             document.body.style.userSelect = "";
             document.body.style.cursor = "";
+            delete document.documentElement.dataset.resizing;
             const width = getComputedStyle(document.documentElement).getPropertyValue(WIDTH_VAR).trim();
             if (width) window.localStorage.setItem(STORAGE_KEY, String(Number.parseInt(width, 10)));
           };
@@ -113,37 +119,37 @@ export const Inspector = ({
           window.localStorage.removeItem(STORAGE_KEY);
         }}
       />
+      <div className="inspector-head">
+        <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"
+          aria-label="Hide inspector"
+          title="Hide inspector"
+          onClick={() => setCollapsed(true)}
+        >
+          <Icon name="sidebar" />
+        </button>
+      </div>
       <div className="inspector-scroll">
-        <div className="inspector-head">
-          <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"
-            aria-label="Hide inspector"
-            title="Hide inspector"
-            onClick={() => setCollapsed(true)}
-          >
-            <Icon name="sidebar" />
-          </button>
-        </div>
         {files.length > 0 && showing === "code" ? (
           <>
             {/* One file is the file; several want naming, so the pane says

package/studio/src/components/Navigator.tsx

@@ -15,6 +15,19 @@ import {Icon} from "./ui";
  * is the part a gallery cannot do at all.
  */
 const COLLAPSED_KEY = "odori-navigator-collapsed";
+const WIDTH_VAR = "--navigator-column";
+const WIDTH_KEY = "odori-navigator-width";
+/* Narrow enough for a filter box and a title, wide enough for a nested
+   category path without truncating every row. */
+const MIN = 180;
+const MAX = 420;
+
+const clampWidth = (value: number): number =>
+  Math.round(Math.min(Math.max(value, MIN), Math.min(MAX, window.innerWidth * 0.4)));
+
+const applyWidth = (value: number) => {
+  document.documentElement.style.setProperty(WIDTH_VAR, `${clampWidth(value)}px`);
+};
 
 export type NavigatorItem = {
   id: string;
@@ -37,7 +50,15 @@ export const Navigator = ({
   selected: string | null;
   onSelect: (id: string) => void;
 }) => {
-  const [collapsed, setCollapsed] = useState(() => window.localStorage.getItem(COLLAPSED_KEY) === "true");
+  /* Closed until asked for. Studio is most often docked beside something else,
+     where the stage wants every pixel, and the list is one click and a
+     remembered choice away. Anyone who opens it keeps it open. */
+  const [collapsed, setCollapsed] = useState(() => window.localStorage.getItem(COLLAPSED_KEY) !== "false");
+
+  useEffect(() => {
+    const stored = Number(window.localStorage.getItem(WIDTH_KEY));
+    if (Number.isFinite(stored) && stored > 0) applyWidth(stored);
+  }, []);
   const [query, setQuery] = useState("");
   const field = useRef<HTMLInputElement>(null);
 
@@ -86,6 +107,43 @@ export const Navigator = ({
 
   return (
     <aside className="navigator" aria-label={label}>
+      {/* The mirror of the inspector's handle, on the inside edge for the same
+          reason: the pane clips its overflow, so a divider hung across the
+          border loses the clipped half of its hit area. */}
+      <div
+        className="navigator-resize"
+        role="separator"
+        aria-orientation="vertical"
+        aria-label="Resize list"
+        onPointerDown={(event) => {
+          // Eight pixels wide, and a fast drag leaves it between events, so
+          // the window owns the move for the duration rather than the handle.
+          event.preventDefault();
+          document.body.style.userSelect = "none";
+          document.body.style.cursor = "col-resize";
+          /* The column eases when a pane is put away, and a drag writes that
+             same column many times a second. Easing it then means the track
+             is always behind the pointer while the pane's own width is not,
+             and the difference between them is a strip of empty page. */
+          document.documentElement.dataset.resizing = "";
+          const onMove = (move: PointerEvent) => applyWidth(move.clientX);
+          const onUp = () => {
+            window.removeEventListener("pointermove", onMove);
+            window.removeEventListener("pointerup", onUp);
+            document.body.style.userSelect = "";
+            document.body.style.cursor = "";
+            delete document.documentElement.dataset.resizing;
+            const width = getComputedStyle(document.documentElement).getPropertyValue(WIDTH_VAR).trim();
+            if (width) window.localStorage.setItem(WIDTH_KEY, String(Number.parseInt(width, 10)));
+          };
+          window.addEventListener("pointermove", onMove);
+          window.addEventListener("pointerup", onUp);
+        }}
+        onDoubleClick={() => {
+          document.documentElement.style.removeProperty(WIDTH_VAR);
+          window.localStorage.removeItem(WIDTH_KEY);
+        }}
+      />
       <div className="navigator-head">
         <button
           type="button"

package/studio/src/components/Transport.tsx

@@ -109,6 +109,16 @@ export const Transport = ({
   const scenes = timeline?.scenes ?? [];
   const active = scenes.find((scene) => shown >= scene.start && shown < scene.start + scene.durationInFrames);
 
+  /* The widest each readout will get, in characters. The transport is set in
+     the mono face, so a `ch` is exactly one column and this is a measurement
+     rather than an estimate. */
+  const digits = String(Math.max(0, durationInFrames - 1)).length;
+  const frameChars = "frame  of ".length + digits * 2;
+  const sceneChars =
+    scenes.length > 0
+      ? "scene ".length + Math.max(...scenes.map((scene) => (scene.name ?? scene.id).length))
+      : 0;
+
   /*
    * The ruler is drawn to the width it actually has. A fixed twelve marks is
    * fine in a wide window and unreadable in a narrow one, where "10.0s" next
@@ -147,9 +157,10 @@ export const Transport = ({
           onClick={(event) => {
             const next = frameAt(event.clientX);
             if (next === null) return;
-            // Picking a frame is not a request to stop, but it is a request to
-            // look at that frame, and the clock would move off it immediately.
-            playback.pause();
+            /* Picking a frame is not a request to stop. A cut that is running
+               keeps running from where you pointed, which is what every player
+               does and what the audio guide already promised; a paused one
+               stays where you put it. */
             playback.seek(next);
             showPreview(null);
           }}
@@ -182,6 +193,11 @@ export const Transport = ({
           <div className="playhead" style={{left: `${(frame / Math.max(1, durationInFrames - 1)) * 100}%`}} />
         </div>
 
+        {/* Always present, the way the scene track always is.
+            It used to appear only once the runtime reported cues, which is
+            after the first paint, so the transport grew 26px and took them off
+            the stage on every load. A lane that is there and empty also says
+            something a missing one cannot: this video is silent. */}
         {track && track.cues.length > 0 ? (
           <div className="audio-track">
             {track.cues.map((cue) => {
@@ -211,7 +227,11 @@ export const Transport = ({
               );
             })}
           </div>
-        ) : null}
+        ) : (
+          <div className="audio-track" data-empty="true">
+            <span>{track ? "no audio" : "\u00a0"}</span>
+          </div>
+        )}
       </div>
 
       <div className="transport-row">
@@ -270,10 +290,25 @@ export const Transport = ({
         <span className="timecode" style={{marginLeft: 8}} data-preview={preview !== null ? "true" : undefined}>
           <b>{formatTimecode(shown, fps)}</b> / {formatTimecode(durationInFrames - 1, fps)}
         </span>
-        <span className="timecode" data-preview={preview !== null ? "true" : undefined}>
+        {/* Both of these change width as the cursor sweeps: the frame number
+            grows a digit at a time, and a scene called Resolution is half
+            again as wide as one called Proof. Tabular figures fix the digits
+            and do nothing for the count or the word, so each reserves the
+            widest it will ever need. Without that the row reflows under the
+            cursor and, in a pane narrow enough for it to wrap, takes a line
+            back from the stage while you are looking at it. */}
+        <span
+          className="timecode"
+          style={{minWidth: `${frameChars}ch`}}
+          data-preview={preview !== null ? "true" : undefined}
+        >
           frame <b>{shown}</b> of {durationInFrames - 1}
         </span>
-        {active ? <span className="timecode">scene <b>{active.name ?? active.id}</b></span> : null}
+        {/* Rendered even with no scene under the cursor, so a gap in the
+            timeline does not collapse the box and shuffle the row. */}
+        <span className="timecode" style={{minWidth: `${sceneChars}ch`}}>
+          {active ? <>scene <b>{active.name ?? active.id}</b></> : null}
+        </span>
       </div>
     </div>
   );

package/studio/src/components/ui.tsx

@@ -76,17 +76,21 @@ export const Icon = ({
 }) => {
   const paths: Record<string, ReactNode> = {
     play: <path d="M4.5 2.8v8.4l7-4.2z" fill="currentColor" />,
+    /* The ordinary gear, on Lucide's 24 grid scaled to this 14 one. Drawing a
+       new one by eye is how you get a gear that reads as almost right; the
+       stroke is doubled so it comes out at the 1.2 everything else uses. */
     settings: (
-      <>
-        <circle cx="7" cy="7" r="2.1" fill="none" stroke="currentColor" strokeWidth="1.2" />
-        <path
-          d="M7 1.3l.85 1.5a4.7 4.7 0 0 1 1.2.5l1.7-.3.85 1.47-1 1.36c.08.2.14.4.18.62l1.53.72v1.7l-1.53.72c-.04.21-.1.42-.18.62l1 1.36-.85 1.47-1.7-.3a4.7 4.7 0 0 1-1.2.5L7 12.7l-.85-1.5a4.7 4.7 0 0 1-1.2-.5l-1.7.3-.85-1.47 1-1.36a4.7 4.7 0 0 1-.18-.62L1.7 6.83v-1.7l1.52-.72c.05-.21.11-.42.19-.62l-1-1.36.85-1.47 1.7.3c.37-.21.78-.38 1.2-.5z"
-          fill="none"
-          stroke="currentColor"
-          strokeWidth="1.1"
-          strokeLinejoin="round"
-        />
-      </>
+      <g
+        transform="scale(0.5833)"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        <path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z" />
+        <circle cx="12" cy="12" r="3" />
+      </g>
     ),
     sun: (
       <>

package/studio/src/studio.css

@@ -201,9 +201,21 @@ a.button {
   border-color: var(--border);
   color: var(--foreground);
 }
-.button[data-variant="outline"]:hover {
-  border-color: var(--border-strong);
-  background: var(--panel);
+/*
+ * Hover says a control is live. Selected says what the setting is. They have
+ * to differ in kind, not in degree.
+ *
+ * Hovering an unselected option used to darken its border and fill it, which
+ * is what being chosen looks like, so passing the cursor over 2x read as
+ * having clicked 2x. And this rule outranked the selected one - a pseudo-class
+ * beats an attribute - so hovering the option that *was* chosen replaced its
+ * fill with this one and the choice appeared to move under the cursor.
+ *
+ * Now hover only lifts the surface a step, the border never moves, and
+ * selected always wins.
+ */
+.button[data-variant="outline"]:hover:not([data-active="true"]) {
+  background: var(--hover);
 }
 .button[data-variant="primary"] {
   background: var(--foreground);
@@ -217,6 +229,25 @@ a.button {
   background: var(--active);
   color: var(--foreground);
 }
+/*
+ * A chosen option in a group: filled and outlined, which is how the source
+ * tabs and the catalog filter already say the same thing.
+ *
+ * Fill alone was not enough of a difference. Hover is #f2f2f2 and chosen is
+ * #ebebeb, seven levels apart on a #fafafa panel, so the cursor moving across
+ * 0.5x / 1x / 2x looked like the choice following it. The border is the part
+ * hover never touches, so it is the part that carries the state.
+ *
+ * Both listed, and last, so the chosen option keeps looking chosen under the
+ * cursor: a pseudo-class outranks an attribute, and the plain hover rule was
+ * winning and taking the fill away.
+ */
+.button[data-variant="outline"][data-active="true"],
+.button[data-variant="outline"][data-active="true"]:hover {
+  background: var(--active);
+  border-color: var(--border-strong);
+  color: var(--foreground);
+}
 .button:disabled {
   cursor: not-allowed;
   opacity: 0.45;
@@ -563,12 +594,77 @@ select.input {
      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;
+  /*
+   * The side columns are stated rather than measured from their contents.
+   *
+   * A track that is `auto` collapses because the pane inside it left the DOM,
+   * and that is a used-value change, which no transition fires on: the stage
+   * jumped to its new width a frame after the click. Stating both widths, and
+   * letting the attributes the panes already set drive them, makes the track
+   * list itself change, which is a computed value and animatable. The
+   * inspector's is the same variable its drag handle writes.
+   */
+  grid-template-columns:
+    var(--navigator-column, 232px)
+    minmax(0, 1fr)
+    clamp(240px, var(--inspector-width, 320px), 50vw);
   overflow: hidden;
 }
+html[data-navigator="collapsed"] .main {
+  --navigator-column: 0px;
+}
+/* Zero, not `auto`: the pane is gone and the column has to say so in a length
+   the track list can interpolate towards. */
+html[data-inspector="collapsed"] .main {
+  --inspector-width: 0px;
+}
+html[data-inspector="collapsed"] .main:not([data-single="true"]) {
+  grid-template-columns: var(--navigator-column, 232px) minmax(0, 1fr) 0px;
+}
 .main[data-single="true"] {
   grid-template-columns: 1fr;
 }
+/*
+ * Each pane owns its column by number rather than by arriving in order.
+ *
+ * A pane that is put away renders nothing but its reopen button, and that
+ * button is fixed, so it is not a grid item. Auto-placement then slid every
+ * remaining pane one column to the left: closing the list handed the stage the
+ * sidebar's auto column, which sizes to content rather than to the space, and
+ * pushed the inspector into the middle column and its 273px out through the
+ * right edge of the grid. Naming the column makes where a pane sits
+ * independent of how many panes happen to exist, so any of them can be put
+ * away without moving the others.
+ */
+.main:not([data-single="true"]) > .navigator {
+  grid-column: 1;
+}
+.main:not([data-single="true"]) > .stage {
+  grid-column: 2;
+}
+.main:not([data-single="true"]) > .inspector {
+  grid-column: 3;
+}
+/*
+ * Putting a pane away is a move, so it should read as one.
+ *
+ * The columns are what actually change, so they are what animates: the stage
+ * grows into the space as the list leaves rather than snapping to a new width
+ * a frame later. Only the track list is transitioned, not `all`, because the
+ * inspector's drag handle writes its width continuously and easing that would
+ * make the pane lag the cursor.
+ */
+@media (prefers-reduced-motion: no-preference) {
+  .main:not([data-single="true"]) {
+    transition: grid-template-columns 220ms cubic-bezier(0.32, 0.72, 0, 1);
+  }
+  /* Except while a divider is being dragged, when the column has to track the
+     pointer exactly. A pane follows its column instantly and the column would
+     not, so the two would part company and show the page between them. */
+  html[data-resizing] .main {
+    transition: none;
+  }
+}
 
 /* ---------- navigator ---------- */
 
@@ -578,14 +674,39 @@ select.input {
   display: flex;
   flex-direction: column;
   overflow: hidden;
-  width: 232px;
+  /* The column carries the width now, so the pane fills whatever it is given
+     and the drag has one number to move rather than two to keep in step. */
+  min-width: 0;
+  position: relative;
+  width: 100%;
 }
-.navigator-head {
+.navigator-resize {
+  cursor: col-resize;
+  /* Fully inside the pane, like the inspector's: the pane clips overflow, and
+     a handle hung across the border loses the clipped half of its hit area. */
+  inset: 0 0 0 auto;
+  position: absolute;
+  touch-action: none;
+  width: 8px;
+  z-index: 2;
+}
+/*
+ * Both pane headers, from one rule, because they are the same thing on either
+ * side of the workspace and describing them separately is how they drifted:
+ * one sat at a 10px gutter and the other at 16px, so the two sides of the top
+ * of the window did not line up with each other.
+ *
+ * 49px is 28px of control with ten above and below and the rule underneath.
+ */
+.navigator-head,
+.inspector-head {
   align-items: center;
   border-bottom: 1px solid var(--border);
   display: flex;
-  gap: 6px;
-  padding: 10px;
+  flex: none;
+  gap: 8px;
+  min-height: 49px;
+  padding: 10px 16px;
 }
 .navigator-search {
   height: 28px;
@@ -594,7 +715,9 @@ select.input {
 }
 .navigator-scroll {
   overflow-y: auto;
-  padding: 10px;
+  /* The header's gutter, so a row lines up with the title above it and with
+     the inspector's content across the window. */
+  padding: 16px;
   scrollbar-gutter: stable;
 }
 .navigator-group {
@@ -630,11 +753,12 @@ select.input {
   background: var(--hover);
   color: var(--foreground);
 }
-/* Away, the way back floats where the list was. */
+/* Away, the way back sits exactly where the way out was: the header's own
+   16px gutter, and its top edge plus 10px of padding. */
 .navigator-reopen {
   background: var(--panel);
   border-color: var(--border);
-  left: 10px;
+  left: 16px;
   position: fixed;
   top: 58px;
   z-index: 5;
@@ -646,6 +770,8 @@ select.input {
   width: clamp(240px, var(--inspector-width, 320px), 50vw);
   container-type: inline-size;
   display: flex;
+  /* A header above a scroller, which is what the navigator is. */
+  flex-direction: column;
   overflow: hidden;
   position: relative;
 }
@@ -661,12 +787,19 @@ select.input {
 }
 
 
+/*
+ * The pane's header, matched to the navigator's across the workspace.
+ *
+ * It used to be the first thing inside the scroller, so the title and the tabs
+ * slid away as you read and there was no line to say where the pane stopped
+ * and its contents started. Out here it stays put and carries the same rule
+ * the list's header does. Ten pixels top and bottom is what makes the two the
+ * same height, since both hold a 28px control; sixteen at the sides is what
+ * puts the title over the content underneath it rather than six pixels to its
+ * left.
+ */
 .inspector-head {
-  align-items: center;
-  display: flex;
-  gap: 8px;
   justify-content: space-between;
-  margin-bottom: 14px;
 }
 .inspector-title {
   color: var(--foreground);
@@ -798,6 +931,8 @@ select.input {
   white-space: pre;
 }
 
+/* 28px, the same as the list's pair: two controls doing the same job either
+   side of the workspace should not be different sizes. */
 .inspector-toggle,
 .inspector-reopen {
   align-items: center;
@@ -808,21 +943,28 @@ select.input {
   cursor: pointer;
   display: inline-flex;
   flex: none;
-  height: 26px;
+  height: 28px;
   justify-content: center;
-  width: 26px;
+  width: 28px;
 }
 .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. */
+/*
+ * Away, the way back sits exactly where the way out was.
+ *
+ * These are the same control in two states, so it must not jump between them.
+ * 16px is the header's own side padding, which is where the toggle sits while
+ * the pane is open; it was 10px, and the button hopped six pixels right on
+ * every close. 58px is the header's top edge plus its 10px of padding.
+ */
 .inspector-reopen {
   background: var(--panel);
   border-color: var(--border);
   position: fixed;
-  right: 10px;
+  right: 16px;
   top: 58px;
   z-index: 5;
 }
@@ -1149,6 +1291,18 @@ select.input {
   height: 20px;
   position: relative;
 }
+/* Empty until the runtime has reported, then labelled. Same height either
+   way, so nothing above it moves. */
+.audio-track[data-empty="true"] {
+  align-items: center;
+  border: 1px dashed var(--border);
+  border-radius: var(--radius-sm);
+  box-sizing: border-box;
+  color: var(--subtle);
+  display: flex;
+  font-size: 11px;
+  padding: 0 8px;
+}
 .audio-track .cue {
   align-items: center;
   background: var(--hover);