@dailies-studio/shot-editor 0.1.0 → 0.2.0

package/src/styles/canvas.css

@@ -0,0 +1,545 @@
+/* The canvas bar: the docked row over the canvas cell, its pane groups, the way back, the zoom and the camera menu. */
+
+/* ---- the canvas bar ----------------------------------------------------- */
+/* One docked row along the top of the canvas cell (CanvasBar.tsx): the way
+   out, one group per pane on screen, then the stage's badges, a definition's
+   face switch and the zoom. It names the PLACE and how each pane is drawn;
+   the tools and the view track are the docked footer under the canvas.
+
+   ONE ROW, ALWAYS. `nowrap` turns the width into a real budget; a wrapped bar
+   grows downward over the picture. AND NO `overflow` on the bar: a clip is how
+   two menus once went silently dead. The bar has a give order instead (in
+   full below, with its measurements): the badges, the back label's cap, the
+   split's spare room, then, where the bar is crowded, the back label and the
+   zoom steps. No control shrinks, and no choice goes
+   (each dropped button stays on the View menu and its key), so the bar fits
+   the narrowest canvas `fitShell` makes at a 1024px window. Past the right
+   edge is the inspector, which paints over it.
+
+   Opaque and catching its own clicks: it is a docked cell, and a
+   `pointer-events: none` bar would hand every press in its empty half to the
+   stage iframe behind it.
+
+   Its padding and gap are named because the split arithmetic below reads
+   them: the camera group lands on the seam only if both are counted. The
+   padding is 12px a side, the tool footer's own (2026-10-13 design review:
+   Paper draws the bar at 14, off the spacing scale, and the footer at 12), so
+   the two docked rows of the canvas column start their controls on one line.
+   The bar is one `--panel-head-h` row (40) around 28px controls.
+   Every width in the give order below is the bar's CONTENT width, which is
+   what a container query measures: the bar less this padding a side. */
+.control-strip {
+  --canvas-bar-pad: var(--space-6);
+  --canvas-bar-gap: var(--space-3);
+  /* A size container, for the narrow bar's give order below. The bar's width
+     is its grid track's, never its content's, so containment changes nothing
+     else, and every menu in it portals to the body. */
+  container: canvas-bar / inline-size;
+  grid-column: rail-r / insp-l;
+  grid-row: main-t / stage-t;
+  display: flex;
+  align-items: center;
+  flex-wrap: nowrap;
+  gap: var(--canvas-bar-gap);
+  padding: 0 var(--canvas-bar-pad);
+  background: var(--surface-panel);
+  border-bottom: 1px solid var(--line);
+}
+
+/* A MODE'S BAR: the way back and its own verbs, portalled in
+   (cellSlots.tsx). The slot is the whole row, laid out like the bar itself;
+   empty in the stage workspace, where it takes no room. */
+.canvas-bar-mode {
+  display: flex;
+  align-items: center;
+  flex: 1;
+  gap: var(--canvas-bar-gap);
+  min-width: 0;
+  height: 100%;
+}
+
+.canvas-bar-mode:empty {
+  display: none;
+}
+
+/* THE PANELS MENU, last in every workspace (PanelToggles.tsx): one glyph and
+   a chevron that open the Layers / Timeline / Inspector checks (Paper 27, "7 ·
+   Canvas bar"). `flex: none`, because a control never shrinks. */
+.panel-toggles {
+  display: flex;
+  align-items: center;
+  flex: none;
+}
+
+/* Wider than the bar's 28px square (`.control-strip .tool-button` below): it
+   carries the chevron too. The extra class outranks that rule on specificity,
+   not on source order. */
+.control-strip .tool-button.panel-menu-trigger,
+.panel-menu-trigger {
+  width: auto;
+  height: var(--control-h);
+  gap: var(--space-2);
+  padding: 0 var(--space-3);
+  border-radius: var(--radius-sm);
+}
+
+.panel-menu-trigger > svg {
+  width: 16px;
+  height: 16px;
+  flex: none;
+}
+
+.panel-menu-trigger.is-open {
+  background: var(--line);
+}
+
+.panel-menu-caret {
+  display: inline-flex;
+  color: var(--ink-2);
+}
+
+.panel-menu-caret svg {
+  width: 12px;
+  height: 12px;
+  display: block;
+}
+
+/* ONE CONTROL SIZE IN THE BAR: the house 28px. The pane triggers are
+   `.tool-button`s, whose base 36px square (tool-footer.css) is the menu row's;
+   here they are the bar's, the same 28px the docked footer draws. */
+.control-strip .tool-button {
+  width: var(--control-h);
+  height: var(--control-h);
+}
+
+/* ---- the lead: the way out and the first pane ----------------------------- */
+/* `flex: none`: it holds controls, and a control never shrinks. Empty at the
+   Project level in the camera layout, where it would otherwise cost one gap. */
+.canvas-bar-lead {
+  display: flex;
+  align-items: center;
+  gap: var(--canvas-bar-gap);
+  flex: none;
+}
+
+.canvas-bar-lead:empty {
+  display: none;
+}
+
+/* THE SPLIT: the camera group starts ON THE SEAM, so each group sits over the
+   pane it acts on. `--split-x` is the seam in window coordinates (App writes
+   it on the shell); the bar's own left edge is the rail's track, or 0 with the
+   rail collapsed. The width is the room up to one gap short of the seam.
+
+   NO CONTROL IS EVER CLIPPED. The seam is where the camera group SHOULD start,
+   not a wall. Near the left end the lead never gets narrower than its own
+   controls (`min-width`), so it pushes the camera group right of the seam.
+   Near the right end, once the badges are gone, the lead gives up its spare
+   room (`flex-shrink`), so the camera group slides left before the zoom
+   slides under the inspector. */
+.canvas-bar-lead.is-split {
+  --canvas-bar-x: var(--rail-w);
+  flex: 0 1 auto;
+  width: calc(var(--split-x) - var(--canvas-bar-x) - var(--canvas-bar-pad) - var(--canvas-bar-gap));
+  min-width: max-content;
+}
+
+.shell.is-rail-collapsed .canvas-bar-lead.is-split {
+  --canvas-bar-x: 0px;
+}
+
+/* ---- a pane's group -------------------------------------------------------- */
+.canvas-pane {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  flex: none;
+}
+
+/* The pane's word, from LAYOUT_SPECS. The pane the zoom and the fit address
+   (`activePane`) is in accent ink; the other is quiet. Two classes against
+   one, so the active colour wins on specificity and not on source order. */
+.canvas-pane-word {
+  font-size: var(--type-md);
+  font-weight: var(--weight-semibold);
+  white-space: nowrap;
+  color: var(--ink-2);
+}
+
+.canvas-pane.is-active .canvas-pane-word {
+  color: var(--accent-ink);
+}
+
+/* A hairline between the way out and the first pane, the top bar's
+   `.header-sep` recipe. Only BETWEEN two things: at the Project level there is
+   no back chip, and the first group starts clean. */
+.canvas-bar-lead > * + .canvas-pane::before,
+.canvas-bar-lead:not(.is-split):not(:empty) + .canvas-pane::before {
+  content: "";
+  flex: none;
+  width: 1px;
+  height: 16px;
+  background: var(--line);
+}
+
+/* In the split the camera group starts on the seam when the bar has room, so
+   its hairline runs the bar's full height and carries the seam the stage
+   draws up through the bar. It never shrinks: the lead is the part that
+   gives. */
+.canvas-bar-lead.is-split + .canvas-pane {
+  align-self: stretch;
+  padding-left: var(--space-3);
+  border-left: 1px solid var(--line);
+}
+
+/* ---- the stage's badges and the zoom, pushed right ------------------------- */
+.stage-badges,
+.zoom-controls {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+}
+
+/* THE BADGES ARE THE BAR'S SPRING. They take the room the controls leave
+   (`flex: 1 1 0`), which pushes the zoom to the end, and they are the first
+   thing to give. The row is one chip tall and clips, so a chip that does not
+   fit wraps onto a second line, out of sight. A badge goes whole: a half-cut
+   "60 fps" would read "0 fps". The empty `::before` starts every first line,
+   so even the first chip can wrap away (a flex line keeps its first item). */
+.stage-badges {
+  flex: 1 1 0;
+  min-width: 0;
+  height: 22px;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  overflow: hidden;
+}
+
+.stage-badges::before {
+  content: "";
+  height: 100%;
+}
+
+/* The row's height is the chip's, from one number. */
+.stage-badges .status-chip {
+  height: 100%;
+}
+
+/* ── THE GIVE ORDER, NARROWEST LAST ──────────────────────────────────────
+   1. The badges wrap away (`.stage-badges`, the spring).
+   2. Under 712px the back label caps at 120px (`.back-chip` below).
+   3. In the split, the lead gives its spare room (`.canvas-bar-lead.is-split`)
+      and the camera group slides left of the seam.
+   4. Under 656px, where the bar is crowded: the back chip keeps its chevron
+      and loses its label (the `aria-label` and `title` keep the
+      destination), and where the spline's Curve select is on screen the zoom
+      keeps its readout (the fit) and loses Zoom out / Zoom in, which stay on
+      the View menu, on their keys and on the wheel.
+
+   WHAT CROWDS THE BAR, measured in Chromium. Each width is the CONTENT the
+   bar needs with every control at its own width and the badges gone: the
+   controls and their gaps, the 12px padding a side not counted. The bar fits
+   from that content width up (its outer width is 24 more):
+     the Project, any layout                      232 to 325
+     a shot: Camera 338, Video 304, 3D 304, split 396
+     a shot with the spline armed (the work plane, its plane and Curve
+     selects, adds 198 and is on screen only then):
+                               3D 502, split 594
+   So with the view track in the footer, one case outgrows the narrowest
+   bar `fitShell` makes (592px at a 1024px window, 568 of content): the
+   split with the spline armed. Step 4 is keyed on the Curve select beside
+   the plane select, and measured at a 592px bar (568 of content) it leaves:
+     the split, spline armed       594 - 31 - 72 (the steps)   491
+     3D, spline armed              502 - 31 - 72               399
+   An open definition is not a case: it is the Components workspace, which
+   brings its own bar (modes/component.css).
+   Every other state keeps its label and its zoom steps at every width.
+
+   No choice goes at any width: every zoom step and way back stays one press
+   or one key away. The widths are the bar's own (`canvas-bar`), so a rail or
+   inspector drag gives exactly as a narrower window does. The state scopes
+   are `:has()` on the bar, read by descendants only (a container never
+   queries itself). */
+@container canvas-bar (width < 656px) {
+  .control-strip:has(.work-plane-bar > .select + .select) .back-chip {
+    justify-content: center;
+    width: var(--control-h);
+    padding: 0;
+  }
+
+  .control-strip:has(.work-plane-bar > .select + .select) .back-chip .back-chip-label {
+    display: none;
+  }
+
+  .control-strip:has(.work-plane-bar > .select + .select) .zoom-controls .btn.is-icon {
+    display: none;
+  }
+
+  /* The isolation trail's levels between the shot and the current layer.
+     The shot crumb, the current layer and Done stay; Escape still climbs. */
+  .control-strip:has(.work-plane-bar > .select + .select) .iso-trail-step {
+    display: none;
+  }
+}
+
+.zoom-readout {
+  font-variant-numeric: var(--numeric);
+  min-width: 48px;
+  text-align: center;
+}
+
+/* ---- the way back ---------------------------------------------------------- */
+/* First in the bar, where a back control goes in every editor that has one.
+   ACCENT INK: being inside something is a state, and the way out of a state
+   is signal rather than furniture. It is the one way back in the working
+   area; the timeline's corner only names where you are. */
+.back-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  height: var(--control-h);
+  max-width: 180px;
+  padding: 0 var(--space-3) 0 var(--space-1);
+  border: 0;
+  border-radius: var(--control-radius);
+  background: transparent;
+  font: inherit;
+  font-size: var(--type-md);
+  font-weight: var(--weight-medium);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: var(--accent-ink);
+  cursor: pointer;
+  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
+}
+
+.back-chip:hover {
+  color: var(--ink-1);
+  background: var(--fill-rest);
+}
+
+.back-chip:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
+
+.back-chip .tool-icon {
+  flex: none;
+  display: inline-flex;
+}
+
+/* The name gives, the chevron never does: a bare text node in a flex button
+   cannot ellipsize, so the label is its own box. */
+.back-chip-label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* A NARROW BAR shortens the way back's label first. Inside a definition the
+   label is the shot's name, as long as an author makes it, and at the 180px
+   cap a definition's bar needs 697px of content (the give order above has the
+   sums). The cap holds it to 637 under 712, and step 4 takes the label whole
+   where even that does not fit. The cap is the give, so no control ever shrinks. */
+@container canvas-bar (width < 712px) {
+  .back-chip {
+    max-width: 120px;
+  }
+
+  /* The isolation trail caps its crumbs the same way. */
+  .iso-crumb {
+    max-width: 96px;
+  }
+}
+
+.back-chip .tool-icon svg {
+  width: 14px;
+  height: 14px;
+}
+
+/* ---- the isolation trail --------------------------------------------------- */
+/* In place of the back chip while isolated (IsolationTrail.tsx): the shot,
+   the levels above, the isolated layer, then Done. Ancestors are quiet ink,
+   the current level is full ink, and Done carries the accent the back chip
+   carries: the way out of a state is signal. */
+.iso-trail {
+  display: flex;
+  align-items: center;
+  gap: var(--space-1);
+  flex: none;
+}
+
+/* A separator and the crumb after it, one box so the give can drop both. */
+.iso-trail-step {
+  display: contents;
+}
+
+.iso-trail-sep {
+  flex: none;
+  display: inline-flex;
+  color: var(--ink-3);
+}
+
+.iso-trail-sep svg {
+  width: 12px;
+  height: 12px;
+}
+
+.iso-crumb {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  height: var(--control-h);
+  max-width: 140px;
+  padding: 0 var(--space-2);
+  border: 0;
+  border-radius: var(--control-radius);
+  background: transparent;
+  font: inherit;
+  font-size: var(--type-md);
+  font-weight: var(--weight-medium);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: var(--ink-2);
+  cursor: pointer;
+  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
+}
+
+button.iso-crumb:hover,
+.iso-crumb.is-open {
+  color: var(--ink-1);
+  background: var(--fill-rest);
+}
+
+.iso-crumb:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
+
+.iso-crumb.is-current {
+  color: var(--ink-1);
+  font-weight: var(--weight-semibold);
+  cursor: default;
+}
+
+.iso-crumb-icon {
+  flex: none;
+  display: inline-flex;
+  color: var(--ink-2);
+}
+
+.iso-crumb-icon.is-component {
+  color: var(--accent-ink);
+}
+
+.iso-crumb-icon svg {
+  width: 14px;
+  height: 14px;
+}
+
+.iso-crumb-label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.iso-offscreen {
+  flex: none;
+  margin-left: var(--space-1);
+}
+
+.iso-done {
+  flex: none;
+  color: var(--accent-ink);
+}
+
+/* ---- the working pane's controls ------------------------------------------- */
+.shading-bar,
+.camera-view-bar {
+  display: flex;
+  align-items: center;
+}
+
+/* The shading modes, in a `Popover` rather than a `.tool-flyout`. It portals
+   to <body>, and that is the point: `Popover` closes on an outside pointerdown
+   and on Escape, flips above the anchor when the window is too short below it,
+   and clamps itself off the left and right edges. `.tool-flyout` does none of
+   those — it can only be dismissed from inside itself.
+   `.popover` already paints the surface, radius and shadow, so this is the
+   flyout's LAYOUT only — the same 5px/2px rhythm as `.tool-flyout`, minus the
+   positioning and the panel the popover brings. */
+.shading-menu {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+  padding: var(--pill-pad);
+  white-space: nowrap;
+}
+
+/* A menu row is a LABELLED row, so it sizes to its text — the same exception
+   `.tool-flyout .tool-button` makes, for the same reason: `.tool-button`'s
+   36px square is for an icon strip, and a label inside one overflows its own
+   background. */
+.shading-menu .tool-button {
+  width: auto;
+  min-width: 36px;
+  justify-content: flex-start;
+  gap: var(--space-4);
+  padding: 0 var(--space-5);
+}
+
+/* The construction plane and the curve basis are house `.select`s: the same
+   28px pill as the rest of the bar, chevron lane included. */
+.work-plane-bar {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+}
+
+/* ---- the camera menu ------------------------------------------------------- */
+/* Armed follow is the GIZMO's yellow and not the accent: it is the same subject
+   as the frustum and the in-pane badge, and an accent wash here would say
+   "selected" about a mode.
+
+   `border`, not `border-color`: `.tool-button` carries `border: 0`, where
+   `border-color` paints nothing and the armed state would lose the outline the
+   wash is half of. The global `box-sizing: border-box` keeps the button
+   square with it. */
+.camera-view-bar .tool-button.is-armed,
+.camera-menu .tool-button.is-armed {
+  background: color-mix(in srgb, var(--frustum) 18%, transparent);
+  border: 1px solid color-mix(in srgb, var(--frustum) 50%, transparent);
+  color: var(--frustum);
+}
+
+/* The caption names the two cameras once, above the verbs. It WRAPS: the menu
+   inherits `.shading-menu`'s nowrap for its rows, and a sentence is not a row. */
+.camera-menu-caption {
+  max-width: 280px;
+  margin-bottom: var(--space-2);
+  padding: var(--space-2) var(--space-5) var(--space-4);
+  border-bottom: 1px solid var(--line);
+  color: var(--ink-2);
+  font-size: var(--type-sm);
+  line-height: var(--leading-body);
+  white-space: normal;
+}
+
+.camera-menu .tool-button {
+  width: 100%;
+}
+
+.camera-menu .tool-button:disabled {
+  opacity: var(--opacity-disabled);
+  cursor: default;
+}
+
+.camera-menu-key {
+  margin-left: auto;
+  padding-left: var(--space-7);
+  color: var(--ink-2);
+  font-size: var(--type-sm);
+}