@odori/cli 0.0.4 → 0.0.6

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;
@@ -306,6 +337,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;
@@ -503,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 ---------- */
 
@@ -518,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-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;
 }
-.navigator-head {
+/*
+ * 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;
@@ -534,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 {
@@ -570,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;
@@ -586,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;
 }
@@ -601,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);
@@ -738,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;
@@ -748,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;
 }
@@ -951,6 +1153,13 @@ select.input {
 
 .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;
@@ -993,13 +1202,19 @@ select.input {
   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 {
@@ -1014,8 +1229,13 @@ select.input {
 }
 
 .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;
@@ -1029,6 +1249,8 @@ select.input {
   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);
@@ -1069,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);
@@ -1140,6 +1374,21 @@ select.input {
   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 {

package/studio/src/views/VideosView.tsx

@@ -23,6 +23,7 @@ import {Inspector} from "../components/Inspector";
 import {Navigator} from "../components/Navigator";
 import {Badge, Empty, Fact, SectionTitle, Separator} from "../components/ui";
 import {measureTrack} from "../lib/mix-loudness";
+import {readStartSound} from "../settings";
 import {useShortcuts} from "../shortcuts";
 
 /**
@@ -51,9 +52,15 @@ export const VideosView = ({
   const [timeline, setTimeline] = useState<CompiledTimeline | null>(null);
   const [track, setTrack] = useState<AudioTrack | null>(null);
   const [loop, setLoop] = useState(true);
-  const [muted, setMuted] = useState(false);
+  /* Read once per mount rather than watched: flipping the default while a
+     video is open would mute the thing being listened to, and a default is a
+     statement about what happens next. */
+  const [muted, setMuted] = useState(() => readStartSound() === "off");
   const [soloCue, setSoloCue] = useState<string | null>(null);
-  const [scrubbing, setScrubbing] = useState(false);
+  /* The frame the cursor is over, which the stage shows instead of the
+     playhead frame. Preview never moves the playhead and never sounds: it
+     answers "what is here" and nothing else. */
+  const [preview, setPreview] = useState<number | null>(null);
   const [rate, setRate] = useState(1);
   const [loudness, setLoudness] = useState<number | null>(null);
   const [audioBlocked, setAudioBlocked] = useState(false);
@@ -108,7 +115,7 @@ export const VideosView = ({
     playing: playback.playing,
     muted,
     soloCue,
-    scrubbing,
+    scrubbing: preview !== null,
     rate,
     onBlocked: setAudioBlocked,
     onFailed: setAudioFailed,
@@ -238,7 +245,7 @@ export const VideosView = ({
           <PreviewBoundary resetKey={selected.metadata.id}>
             <OdoriRuntime
               entry={selected}
-              frame={playback.frame}
+              frame={preview ?? playback.frame}
               input={input}
               assets={project.assets}
               onTimeline={handleTimeline}
@@ -258,7 +265,7 @@ export const VideosView = ({
           audioBlocked={audioBlocked}
           onEnableAudio={() => setMuted(false)}
           onSoloCue={setSoloCue}
-          onScrubbing={setScrubbing}
+          onPreview={setPreview}
           rate={rate}
           onRate={setRate}
           onToggleLoop={() => setLoop((value) => !value)}