@dailies-studio/shot-editor 0.1.0 → 0.2.0

package/src/styles/tool-footer.css

@@ -0,0 +1,525 @@
+/* The tool footer: the docked row under the canvas cell, the tool buttons, groups and flyouts, the shot's metadata and the view track. */
+
+/* ---- the tool footer ---------------------------------------------------- */
+/* THE TOOLS ARE DOCKED. They rode a floating pill over the bottom of the
+   picture; the Paper redesign gives them a row of their own under the canvas
+   cell, on the panel ground with a hairline on top, and nothing floats over
+   the stage any more. The row has two halves pushed apart: the tools (or, in
+   the Project context, the shot under the playhead) on the left and the view
+   track on the right (ToolFooter.tsx).
+
+   A GRID TRACK, NOT A MEASURED BOX. The row is `foot-t / main-b` in the
+   shell's grid (shell.css), so the footer follows every dock drag and
+   collapse with no arithmetic, and the canvas cell above it ends at its top
+   edge. The track is 0 until `.shell.has-tool-footer` opens it, and App mounts
+   this box in the same commit, so the two cannot disagree for a frame.
+
+   ON THE FLOAT TIER, not the panel tier, although it is docked: its flyouts
+   open UPWARD over the canvas cell, and they have to paint over the scrims
+   (`--z-scrim`) and the canvas cell's mode content, which sit above the panel
+   tier. A positioned box with a z-index is also what paints it above the
+   fixed stage iframe at all, which every docked cell needs.
+
+   It is one of the boxes `measureInset` reads (`insetPanels` in
+   App.tsx), so the stage frames the picture above it. */
+.tool-footer {
+  grid-column: rail-r / insp-l;
+  grid-row: foot-t / main-b;
+  position: relative;
+  z-index: var(--z-float);
+  min-width: 0;
+  min-height: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  /* The least air between the two halves when the row is full. */
+  gap: var(--space-7);
+  /* A size container, for the view track's give order (below). The footer's
+     width is its grid track's, never its content's, so containment changes
+     nothing else: the flyouts are absolutely positioned inside their own
+     anchors and the view menu portals to the body. */
+  container: tool-footer / inline-size;
+  /* THE ROW NEVER WRAPS, the canvas bar's rule and the canvas bar's reason:
+     the failure is vertical, and a second row is a row the track has no
+     height for. The view track gives way instead, and the tools never do
+     (the give order below). NO `overflow`: the flyouts hang out of the top of
+     this box, and a clip would cut them off (sourceHygiene pins both
+     halves). */
+  flex-wrap: nowrap;
+  /* Paper's 12px a side (2026-10-13 design review), which the canvas bar
+     shares so the column's two docked rows start on one line. The row is
+     `--tool-footer-h` (48) around 28px tools and the 28px view track. */
+  padding: 0 var(--space-6);
+  background: var(--surface-panel);
+  border-top: 1px solid var(--line);
+}
+
+/* NO SURFACE OF ITS OWN: the footer is the surface. A row inside it. */
+.tool-dock {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+}
+
+/* 36px, not 32, and full-strength ink rather than --text-dim. This is the
+   BASE recipe, shared with the canvas bar's pane triggers and the menus that
+   drop off them (canvas.css), which size it for their own row. The footer
+   sizes it and inks it below. */
+.tool-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  font: inherit;
+  font-size: var(--type-lg);
+  color: var(--ink-1);
+  background: transparent;
+  border: 0;
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
+}
+
+/* THE FOOTER'S BUTTONS ARE THE HOUSE CONTROL: 28px squares with the small
+   radius and a 16px glyph, which is Paper's footer and the canvas bar's own
+   control size, so the two docked rows of the canvas column draw one control.
+   BEFORE `.is-labelled` and `.tool-flyout .tool-button`, which tie it on
+   specificity and must win their widths.
+
+   IDLE IS --ink-2, Paper's footer stroke: a row of nine full-ink glyphs read
+   as nine pressed controls, and the armed wash had nothing quiet to stand out
+   from. Hover, focus and an open menu lift to --ink-1 (below, and the base
+   hover), and the armed tool takes the accent ink.
+
+   BOTH COLOUR RULES ARE `:where()`-WRAPPED so they stay at this rule's
+   specificity, which `.is-armed` ties and beats by coming later: a plain
+   `:focus-visible` here would turn a focused armed tool back to ink. And the
+   idle dim skips the flyouts' rows, which are a MENU's labelled rows and read
+   at full ink like every other menu. */
+.tool-footer .tool-button {
+  width: var(--control-h);
+  height: var(--control-h);
+  border-radius: var(--radius-xs);
+}
+
+.tool-footer .tool-button:where(:not(.tool-flyout *)) {
+  color: var(--ink-2);
+}
+
+.tool-footer .tool-button:where(:focus-visible, [aria-expanded="true"]) {
+  color: var(--ink-1);
+}
+
+.tool-footer .tool-icon svg {
+  width: 16px;
+  height: 16px;
+}
+
+.tool-button:hover:not(:disabled) {
+  background: var(--fill-rest);
+  color: var(--ink-1);
+}
+
+/* A tool the current layout cannot arm (see `toolRefusal`). Both halves matter:
+   the dim says it is dead, and `:not(:disabled)` on the hover above is what
+   stops it lifting under the pointer and promising otherwise. */
+.tool-button:disabled {
+  opacity: var(--opacity-disabled);
+  cursor: default;
+}
+
+/* The armed tool is a soft accent wash, not a solid slab. A saturated fill on
+   a small button next to eight neutral ones reads as an error badge. */
+.tool-button.is-armed {
+  background: var(--accent-soft);
+  color: var(--accent-ink);
+}
+
+/* Animate mode is a MODE, not a tool, so it gets the warm colour rather than
+   the accent — the whole point is that it does not look like an armed tool. */
+.tool-button.tool-animate[aria-pressed="true"] {
+  background: color-mix(in srgb, var(--accent-warm) 16%, transparent);
+  color: var(--accent-warm);
+}
+
+/* A control that carries its own WORD. Animate is the one left: it is a MODE
+   rather than one of the mutually-exclusive tools, and a mode has to say so at
+   rest — an armed `⏺` among the glyphs said nothing. Add went back to a bare
+   icon with a caret, because a menu announces itself by opening. Auto width so
+   the label sizes it; the row's height is the footer's control height. */
+.tool-button.is-labelled {
+  width: auto;
+  min-width: 36px;
+  gap: var(--space-3);
+  padding: 0 var(--space-4);
+  font-size: var(--type-md);
+}
+
+/* The word's glyph is 14px, Paper's Animate mark: a 16px record dot beside
+   the word outweighed it. After `.tool-footer .tool-icon svg`, which it must
+   beat. */
+.tool-footer .tool-button.is-labelled .tool-icon svg {
+  width: 14px;
+  height: 14px;
+}
+
+/* ── THE DOCK IS GROUPS, NOT TEN BUTTONS ────────────────────────────────
+   A flat run of ten icons says every one of them is the same kind of thing,
+   and they are not: two of them say what a press MEANS (pick, move), six of
+   them make something, one is a menu and the last is a mode. The groups are
+   named for a screen reader and gapped as one run; the ONE rule, before the
+   mode, is Paper's footer (ToolDockBar.tsx). The grouping is data, see
+   `ToolSpec.group`, so a new tool joins a group rather than landing wherever
+   the JSX happened to put it. */
+.tool-group {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+}
+
+/* Paper's rule: 1px by 20px, which is the 28px row less 4px each end. The
+   buttons either side carry their own air, so the margin is only the pixel
+   that keeps the rule off them. */
+.tool-separator {
+  width: 1px;
+  align-self: stretch;
+  margin: var(--space-2) 1px;
+  background: var(--line);
+}
+
+/* A button that opens something as well as doing something: the shapes
+   trigger and Add. A corner triangle rather than a chevron beside the glyph,
+   which is the toolbar convention (Figma, Illustrator) and costs no width in
+   a row that has none to give. */
+.tool-button.has-caret {
+  position: relative;
+}
+
+.tool-caret {
+  position: absolute;
+  right: 3px;
+  bottom: 3px;
+  width: 0;
+  height: 0;
+  border-left: 4px solid transparent;
+  border-bottom: 4px solid currentColor;
+  opacity: 0.55;
+  pointer-events: none;
+}
+
+.tool-flyout-anchor {
+  position: relative;
+}
+
+/* THE FLYOUT OPENS TOWARDS THE ROOM. The base rule is DOWNWARD, for an anchor
+   near the top of the window: an upward flyout there has ~64px of viewport
+   above it and the page cannot scroll, so every row past the first two sat
+   above y=0 and was unreachable by mouse. `.tool-footer` inverts it below.
+
+   The max-height + scroll is for a flyout whose row count is data-driven
+   (devices from the registry, components from the live library). */
+.tool-flyout {
+  position: absolute;
+  top: calc(100% + 8px);
+  left: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+  padding: var(--pill-pad);
+  border-radius: var(--radius-md);
+  white-space: nowrap;
+  z-index: 1;
+  max-height: calc(100vh - 140px);
+  overflow-y: auto;
+}
+
+/* ── AND UPWARD OUT OF THE FOOTER ──────────────────────────────────────────
+   The mirror of the rule above, and the same argument: open towards the room.
+   Under the footer is the timeline, so a menu that opens down is a menu drawn
+   over the dock. Up is the whole picture.
+
+   `top: auto` is not optional. `top` and `bottom` both set on an absolutely
+   positioned box stretches it between the two rather than letting the content
+   size it, so the flyout would be as tall as the viewport with its rows pinned
+   to the bottom of that box.
+
+   ── AND THE CAP IS MEASURED FROM THIS BAR, NOT FROM THE VIEWPORT ─────────
+   THE BUG THIS EXISTS TO STOP, caught in a browser and not by a test: the Add
+   menu's row count is data-driven (devices from the registry, 2D documents,
+   every component in the live library) and it renders 689px tall. Capped at
+   `100vh - 200px` it was ALLOWED to be 689px tall. And it opens upward from a
+   bar that is itself ~550px down the window, so its top landed at y=-141 and
+   the first rows were above the viewport with no way to scroll to them. That
+   is the same unreachable-menu failure the base rule above was written for,
+   arrived at from the opposite direction.
+
+   The room above this bar is the canvas cell: the window less the two bars,
+   the bottom row and this footer, all four of them real track sizes. Less
+   32px of air: the flyout's 8px gap, and 24px so a full menu does not sit
+   flush against the canvas bar.
+
+   ── AND THE GAP IS FROM THE FOOTER'S EDGE, NOT THE TRIGGER'S ──────────────
+   The anchor is the 28px trigger, centred in the 48px row, so `100% + 8px`
+   alone ended the menu 2px INSIDE the footer, over its hairline and the row
+   it opened from. The half of the row the trigger leaves is added back, so
+   the menu ends 8px above the footer and lives wholly over the canvas cell,
+   where the cap above already assumes it is (dockedShellE2e pins it). The
+   folded view menu does the same sum from its 28px picker (ViewModeBar.tsx),
+   so every menu the footer opens ends on one line. */
+.tool-footer .tool-flyout {
+  top: auto;
+  bottom: calc(100% + 8px + (var(--tool-footer-h) - var(--control-h)) / 2);
+  max-height: calc(100vh - var(--topbar-h) - var(--panel-head-h) - var(--dock-row-h) - var(--tool-footer-h) - 32px);
+}
+
+/* THE TOOLBAR ON TOP flips it back DOWN, over the canvas cell, which is now
+   below the footer. The same gap from the footer's edge and the same cap: the
+   room is still the canvas cell's height. */
+.shell.tool-footer-top .tool-footer .tool-flyout {
+  top: calc(100% + 8px + (var(--tool-footer-h) - var(--control-h)) / 2);
+  bottom: auto;
+}
+
+/* The dock's SVG glyphs — CSS-sized like every other appearance of the set
+   (the icons.tsx rule: never by attributes). currentColor rides the button's
+   own states, so armed/disabled tint the icon for free. */
+.tool-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.tool-icon svg {
+  width: 18px;
+  height: 18px;
+}
+
+/* A flyout row is a LABELLED row, so it sizes to its text. The footer's 28px
+   square is for the dock's icon row, and a label inside one overflows its own
+   background. The 36px height is restated because `.tool-footer .tool-button`
+   ties this rule on specificity and would hand a menu row the icon row's
+   height. */
+.tool-flyout .tool-button {
+  width: auto;
+  min-width: 36px;
+  height: 36px;
+  justify-content: flex-start;
+  gap: var(--space-4);
+  padding: 0 var(--space-5);
+}
+
+/* ---- the Project context's left half: the shot under the playhead ---------- */
+/* Where the tools are inside a shot (ToolFooter.tsx): the shot's name over
+   its number, length and rate. Paper's two lines: the name at 13/18 and 600
+   in primary ink, the facts in mono 12/16 at 400 in secondary ink, 4px
+   apart. The block gives before the view track does: it is the one thing in
+   the row that can, and a long shot name ellipsizes rather than pushing the
+   track under the inspector. */
+.shot-meta {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+  flex: 0 1 auto;
+  min-width: 0;
+}
+
+.shot-meta-name,
+.shot-meta-line {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.shot-meta-name {
+  font-size: var(--type-lg);
+  line-height: var(--leading-sm);
+  font-weight: var(--weight-semibold);
+  color: var(--ink-1);
+}
+
+.shot-meta-line {
+  font-family: var(--font-mono);
+  font-size: var(--type-md);
+  line-height: var(--leading-xs);
+  font-weight: var(--weight-regular);
+  color: var(--ink-2);
+}
+
+/* ---- the view track: the footer's right half -------------------------------- */
+/* 3D | Split | Camera, then the Clean view eye (ViewModeBar.tsx), 8px apart,
+   Paper's footer since the 2026-10-13 design review. The WRAPPER is only the
+   row: the layouts' `SegmentedControl` is the track, and the eye is a square
+   of its own on the same control ground. `margin-left: auto` keeps the row at
+   the right edge when the left half renders nothing (no shot under the
+   playhead).
+
+   The layouts are THE ONE SEGMENTED CONTROL (ui/widgets.css): the 28px
+   track on the control fill, 24px chips 2px apart, the flat lit tile and the
+   2px accent focus ring all come from the house recipe. Only the chip width
+   is the footer's: each chip sits at its glyph and word, not an equal share.
+
+   Every rule is scoped by `.tool-footer`, so the canvas bar's and the
+   inspector's `.segmented` rules never meet these. */
+.tool-footer .view-mode-bar {
+  display: flex;
+  align-items: center;
+  flex: none;
+  margin-left: auto;
+  gap: var(--space-4);
+}
+
+/* The track. `flex: none` overrides the house `flex: 1`, which is for the
+   inspector rows `.segmented` was drawn for. */
+.tool-footer .view-mode-bar .segmented {
+  flex: none;
+  align-items: center;
+}
+
+/* A chip sized by its content: glyph and word 6px apart (the `.btn` gap),
+   12px a side (the house chip). */
+.tool-footer .view-mode-bar .segmented .segmented-item {
+  flex: none;
+  width: auto;
+}
+
+/* A GLYPH HAS TO BE GIVEN A SIZE. Every icon in this set is a bare
+   `svg viewBox`, sized by CSS or not at all; the pill once drew a switch here
+   as two 0x0 glyphs, correct, announced and invisible. 14px in the chips,
+   Paper's; the eye's is 16, below. */
+.tool-footer .view-mode-bar .view-chip-icon {
+  display: inline-flex;
+  flex: none;
+}
+
+.tool-footer .view-mode-bar .view-chip-icon svg {
+  width: 14px;
+  height: 14px;
+}
+
+/* CLEAN VIEW: Paper's eye, a 28px square on the track's ground with the
+   field radius, the track's own box, so it reads as the track's neighbour and
+   not one of its chips.
+   Pressed is the armed tool's soft accent wash, the footer's one "on" look. */
+.tool-footer .clean-view-toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  width: var(--control-h);
+  height: var(--control-h);
+  padding: 0;
+  border: 0;
+  border-radius: var(--field-radius);
+  background: var(--surface-secondary);
+  color: var(--ink-2);
+  cursor: pointer;
+  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
+}
+
+.tool-footer .clean-view-toggle:hover {
+  background: var(--fill-rest);
+  color: var(--ink-1);
+}
+
+.tool-footer .clean-view-toggle:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
+
+.tool-footer .clean-view-toggle[aria-pressed="true"] {
+  background: var(--accent-soft);
+  color: var(--accent-ink);
+}
+
+.tool-footer .clean-view-toggle .view-chip-icon svg {
+  width: 16px;
+  height: 16px;
+}
+
+/* THE FOLDED TRACK: one labelled chip on the track's ground, naming the
+   layout on screen, with the three a press away. Hidden until the footer runs
+   short (below). Auto width, because `.tool-footer .tool-button` is the 28px
+   glyph square. Primary ink: it names the current state, as a lit chip does. */
+.tool-footer .view-mode-bar .view-picker {
+  display: none;
+  width: auto;
+  height: var(--control-h);
+  padding: 0 var(--space-5);
+  gap: var(--space-3);
+  border-radius: var(--field-radius);
+  background: var(--surface-secondary);
+  font-size: var(--type-md);
+  color: var(--ink-1);
+}
+
+/* ── THE GIVE ORDER: FULL, THEN COMPACT, THEN FOLDED ────────────────────────
+   The tools never fold, and neither does the eye. The track is what gives,
+   in two steps:
+   1. COMPACT: 3D and Camera drop their glyphs and keep their words; Split is
+      a word already.
+   2. FOLDED: the track goes, and the one picker names the layout on screen,
+      the three a press away (its menu opens upward, over the canvas,
+      ViewModeBar.tsx).
+
+   Measured in Chromium (the widths are the widest case of each; the lit
+   chip is a flat tile and costs no width):
+     the tools row (ToolDockBar)                     409.3   (377.3 + Comment)
+     the full track                                  205.7   (Split lit)
+     the compact track                               165.7   (Split lit)
+     the folded picker on its ground                  64.3   ("Camera")
+     the Clean view eye, after an 8px gap             36
+     the metadata block, "Shot 01 · 0:02 · 30 fps"   151.8   (its line)
+   Each sum below is the left half, the 16px gap, the track and the eye:
+     with the tools    full fits from 667.0, compact from 627.0, folded from 525.6
+     with the shot     full fits from 409.5, compact from 369.5
+   The thresholds round those up to the next 4px. They are the footer's
+   CONTENT width (a container query measures the content box), which is the
+   column less the footer's 12px padding a side:
+     window   footer   content   with the tools   in the Project
+     1024     592      568       folded           full
+     1280     776      752       full             full
+     1366     862      838       full             full
+     1440     912      888       full             full
+     1600     1072     1048      full             full
+   So the full track holds from a 1280 window in every layout, and only a
+   rail or inspector dragged wide compacts it there. At 1024, the narrowest
+   column `fitShell` makes, the folded row is 526 in 568, and the smallest
+   canvas a drag can reach (`CANVAS_MIN`, 640, 616 of content) folds it too.
+
+   The shot's metadata gives first and the track only after: the block
+   ellipsizes (`min-width: 0`), so in the Project the track compacts only once
+   the facts line could not show whole. The scopes are `:has()` on the footer,
+   read by its descendants (a container never queries itself). With neither
+   half on the left (no shot under the playhead) the track is alone and fits
+   any column `fitShell` makes. */
+@container tool-footer (width < 668px) {
+  .tool-footer:has(.tool-dock) .view-mode-bar .layout-switch .view-chip-icon {
+    display: none;
+  }
+}
+
+@container tool-footer (width < 412px) {
+  .tool-footer:has(.shot-meta) .view-mode-bar .layout-switch .view-chip-icon {
+    display: none;
+  }
+}
+
+@container tool-footer (width < 628px) {
+  .tool-footer:has(.tool-dock) .view-mode-bar .segmented {
+    display: none;
+  }
+
+  .tool-footer:has(.tool-dock) .view-mode-bar .view-picker {
+    display: inline-flex;
+  }
+}
+
+@container tool-footer (width < 372px) {
+  .tool-footer:has(.shot-meta) .view-mode-bar .segmented {
+    display: none;
+  }
+
+  .tool-footer:has(.shot-meta) .view-mode-bar .view-picker {
+    display: inline-flex;
+  }
+}