@dailies-studio/shot-editor 0.1.0 → 0.2.0

package/src/styles/shell.css

@@ -0,0 +1,653 @@
+/* The shell: the docked grid and where every cell sits in it, the stage frame, the tool footer's row, the floating recipe, the error strip and empty state, the resize handles, the shared stage window, scrollbars and the export scrims. */
+
+:root {
+  /* ONE STEP PER TREE LEVEL, for every tree the chrome draws (the outliner,
+     the timeline's label column, the curve list, the code tree). The markup
+     passes only `--depth`; the step and each list's base inset live in CSS. */
+  --tree-indent: 12px;
+
+  /* The rounding of what still floats: the tool flyouts and the notices.
+     The chrome's own name, not the house --panel-radius, which the retired
+     editor still reads at 20px. */
+  --float-radius: 12px;
+
+  /* The inset of a menu that drops off a bar: the tool flyouts and the
+     shading menu. The name is the retired pill's, which these menus took
+     their inset from; the value stayed so no menu moves. Off the space scale
+     on purpose, as it always was. */
+  --pill-pad: 5px;
+
+  /* THE TOOL FOOTER: the docked row under the canvas cell that holds the
+     tools and the view track. Mirrors TOOL_FOOTER_H in state/panelSize.ts,
+     pinned by rowMetrics.test.ts. The grid reads `--tool-footer-row`, which
+     is 0 until `.shell.has-tool-footer` opens it. It opens at every level of
+     the stage workspace (the Project included, where it holds the shot's
+     metadata), so only the modes and a page with no document give the canvas
+     its height back. */
+  --tool-footer-h: 48px;
+  --tool-footer-row: 0px;
+
+  /* The grid's three dragged tracks. App.tsx writes all three from the stored
+     sizes through `fitShell` (state/panelSize.ts); these literals are only the
+     pre-hydration defaults and match RAIL_WIDTH, INSPECTOR_WIDTH and
+     DOCK_HEIGHT's defaults. A COLLAPSED column keeps its track: the timeline's
+     name column and meters sit under it, so collapsing never moves a bar, and
+     the canvas spans over the empty track instead. */
+  --rail-w: 224px;
+  --inspector-w: 304px;
+  --dock-row-h: 300px;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body,
+#root {
+  height: 100%;
+  margin: 0;
+}
+
+body {
+  font: var(--type-md)/var(--leading-body) var(--font-sans);
+  color: var(--ink-1);
+  background: var(--surface-app);
+  -webkit-font-smoothing: antialiased;
+}
+
+/* ── THE DOCKED GRID ───────────────────────────────────────────────────────
+   One grid, edge to edge. Rows: the top bar, the canvas bar, the stage, the
+   tool footer, the bottom row. Columns: the left column, the canvas, the right column. NO GAP:
+   a seam is a 1px border owned by one of the two cells beside it, so no live
+   stage pixel ever shows through a seam.
+
+   `overflow: clip`, never `hidden`: `hidden` makes the shell a scroll
+   container, and a focused control that overflows sideways would scroll every
+   cell while the fixed iframe stays put. `clip` scrolls nothing and makes no
+   containing block. And still NO transform, filter, backdrop-filter, contain
+   or will-change on the shell: any of those makes it the containing block of
+   the fixed iframe, which would then size itself to the shell's box. */
+.shell {
+  position: relative;
+  height: 100%;
+  display: grid;
+  grid-template-columns: [edge-l] var(--rail-w) [rail-r] minmax(0, 1fr) [insp-l] var(--inspector-w) [edge-r];
+  grid-template-rows: [edge-t] var(--topbar-h) [main-t] var(--panel-head-h) [stage-t] minmax(0, 1fr) [foot-t] var(--tool-footer-row) [main-b] var(--dock-row-h) [edge-b];
+  overflow: clip;
+}
+
+/* A CLASS, not a measured height: App sets it in the same commit that mounts
+   `.tool-footer`, so the row and its content arrive together and there is no
+   frame where the track is open with nothing in it, or the footer is drawn
+   into a 0px track. */
+.shell.has-tool-footer {
+  --tool-footer-row: var(--tool-footer-h);
+}
+
+/* THE TOOLBAR ON TOP (Preferences > Canvas > Toolbar position). The footer's
+   row moves up between the canvas bar and the stage; the dock row stays at the
+   bottom and the footer still costs the same height, so `dockCeiling` is
+   unchanged. `stage-t / foot-t` keeps meaning "the stage's own track" in both
+   templates (here `foot-t` is where the stage ends), so the canvas cell, the
+   overlay strip and every mode that spans the stage need no override. Only the
+   two boxes the move is ABOUT take one: the canvas bar ends at `head-b`, and
+   the footer sits `head-b / stage-t`. */
+.shell.tool-footer-top {
+  grid-template-rows: [edge-t] var(--topbar-h) [main-t] var(--panel-head-h) [head-b] var(--tool-footer-row) [stage-t] minmax(0, 1fr) [foot-t main-b] var(--dock-row-h) [edge-b];
+}
+.shell.tool-footer-top > .control-strip {
+  grid-row: main-t / head-b;
+}
+.shell.tool-footer-top > .tool-footer {
+  grid-row: head-b / stage-t;
+  border-top: 0;
+  border-bottom: 1px solid var(--line);
+}
+
+/* The stage is the whole window, BEHIND the cells: every docked cell is
+   opaque and positioned above it, so the picture shows only through the cell
+   nothing is docked in. Sizing the iframe to that cell was rejected: every
+   collapse, Video toggle and mode swap would become a canvas resize, and a
+   resize while a compile is in flight presents a cleared canvas. */
+.stage-frame {
+  position: fixed;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  border: 0;
+  display: block;
+  z-index: var(--z-stage);
+}
+
+/* ── EVERY DOCKED CELL ─────────────────────────────────────────────────────
+   Positioned with a z-index, which does two jobs: it paints the cell above
+   the fixed iframe (a non-positioned grid cell would paint UNDER it), and it
+   makes the cell a stacking context of its own, so the z-indices inside a
+   panel stay local to it. Opaque, with its seams drawn by its own borders. */
+.shell-header,
+.left-rail,
+.control-strip,
+.inspector-column,
+.timeline-dock {
+  position: relative;
+  z-index: var(--z-panel);
+  min-width: 0;
+  min-height: 0;
+}
+
+/* A collapsed column hides its cell, not its track: `visibility` keeps the
+   panel laid out, so its scroll position and virtualised rows survive the
+   round trip, and `measureInset` skips a hidden box. */
+.shell.is-rail-collapsed > .left-rail,
+.shell.is-inspector-collapsed > .inspector-column {
+  visibility: hidden;
+}
+
+/* And the canvas takes the collapsed column's width. Everything that lives in
+   the canvas column spans out over the empty track. */
+.shell.is-rail-collapsed > .control-strip,
+.shell.is-rail-collapsed > .canvas-cell,
+.shell.is-rail-collapsed > .tool-footer,
+.shell.is-rail-collapsed > .overlay-strip,
+.shell.is-rail-collapsed > .empty-state,
+.shell.is-rail-collapsed > .panel-crash {
+  grid-column-start: edge-l;
+}
+
+.shell.is-inspector-collapsed > .control-strip,
+.shell.is-inspector-collapsed > .canvas-cell,
+.shell.is-inspector-collapsed > .tool-footer,
+.shell.is-inspector-collapsed > .overlay-strip,
+.shell.is-inspector-collapsed > .empty-state,
+.shell.is-inspector-collapsed > .panel-crash {
+  grid-column-end: edge-r;
+}
+
+/* ── THE MODES' CELLS ──────────────────────────────────────────────────────
+   A mode shows its content in the docked grid's own cells (cellSlots.tsx).
+   The canvas cell is the one cell nothing is docked in: empty in the stage
+   workspace, so the picture shows through, and a mode's centre otherwise.
+   It takes no pointer and paints nothing itself, because a mode's centre can
+   be a HOLE onto the stage: each part that paints opts back in, and a hole
+   (`.stage-window`) stays out, so a drag on it reaches the stage. */
+.canvas-cell {
+  grid-column: rail-r / insp-l;
+  grid-row: stage-t / foot-t;
+  position: relative;
+  z-index: var(--z-panel);
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
+  pointer-events: none;
+}
+
+/* A SURFACE STILL LOADING (app/lazySurfaces.tsx): its skeleton holds its
+   cells, so nothing moves when its chunk lands. The board's is its bar on the
+   desk ground; a mode's is its left column's head and an opaque canvas, so the
+   stage never shows through a cell the mode is about to fill. */
+.board-skeleton,
+.mode-skeleton {
+  flex: 1 1 0;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
+}
+
+.board-skeleton {
+  pointer-events: auto;
+  background-color: var(--surface-board);
+}
+
+.mode-skeleton.is-canvas {
+  pointer-events: auto;
+  background-color: var(--surface-app);
+}
+
+/* The bottom row's stand-in, for Code Studio, whose strip replaces the
+   timeline: the same three tracks, as a subgrid, so a strip's cells land
+   under the left column, the canvas and the right column. Transparent and
+   pointer-less for the canvas cell's reason. */
+.bottom-cell {
+  grid-column: edge-l / edge-r;
+  grid-row: main-b / edge-b;
+  position: relative;
+  z-index: var(--z-panel);
+  display: none;
+  grid-template-columns: subgrid;
+  grid-template-rows: minmax(0, 1fr);
+  min-width: 0;
+  min-height: 0;
+  pointer-events: none;
+}
+
+.shell.is-code-studio > .bottom-cell {
+  display: grid;
+}
+
+/* ── WHAT STILL FLOATS ─────────────────────────────────────────────────────
+   One recipe, and a short list: the tool flyouts that open off the footer,
+   and a notice. Everything else is docked, the tools included. */
+.tool-flyout,
+.overlay-message {
+  background: var(--surface-panel);
+  border: 1px solid var(--line);
+  border-radius: var(--float-radius);
+  box-shadow: var(--shadow-float);
+}
+
+
+/* ---- overlays ----------------------------------------------------------- */
+/* ── THE ERROR SURFACE OUTRANKS EVERYTHING IN THE SHELL ───────────────────
+   This is where a refusal lands. `sayRefusal` sets `state.error`, the stage
+   reports its own failures the same way, and this strip is the only place
+   either is ever drawn — so a layer that covers it does not hide a decoration,
+   it makes the chrome silently ignore gestures with the reason it declined
+   them rendered underneath. The overlay tier is above every mode.
+
+   At the bottom of the canvas cell, with 12px of air above the tool footer
+   (or above the bottom row, where the footer's track is closed). */
+.overlay-strip {
+  grid-column: rail-r / insp-l;
+  grid-row: stage-t / foot-t;
+  align-self: end;
+  justify-self: center;
+  position: relative;
+  z-index: var(--z-overlay);
+  margin-bottom: var(--space-6);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+  pointer-events: none;
+  max-width: min(560px, 100%);
+}
+
+.overlay-message {
+  pointer-events: auto;
+  display: flex;
+  gap: var(--space-5);
+  align-items: flex-start;
+  padding: var(--space-5) var(--space-6);
+  line-height: var(--leading-body);
+  border-color: color-mix(in srgb, var(--danger) 50%, transparent);
+}
+
+/* The same arrival the dialogs and toasts use — `dialog-in` comes from the ui
+   sheet this file @imports, and it is the `settle` spring transcribed to CSS.
+   This strip is the shot chrome's toast, so it should not arrive differently
+   from one. Surface only: no geometry animates, and nothing above `.stage-frame`
+   gains a transform. */
+@media (prefers-reduced-motion: no-preference) {
+  .overlay-message { animation: dialog-in var(--dur-med) var(--ease); }
+}
+
+/* No dismiss button, so nothing reserves space for one. WARN and not DANGER:
+   nothing is broken yet, and the sentence is about a process the author has to
+   restart rather than about something they did. */
+.overlay-message.is-sticky {
+  border-color: color-mix(in srgb, var(--warn) 50%, transparent);
+}
+
+.overlay-message button {
+  font: inherit;
+  font-size: var(--type-lg);
+  color: var(--ink-2);
+  background: transparent;
+  border: 0;
+  cursor: pointer;
+  padding: 0;
+}
+
+.overlay-message button:hover {
+  color: var(--ink-1);
+}
+
+/* A worded action on a sticky row (the save conflict's Reload): body size,
+   underlined so it reads as the one thing to press. */
+.overlay-message .overlay-action {
+  flex: none;
+  font-size: inherit;
+  color: var(--ink-1);
+  text-decoration: underline;
+  white-space: nowrap;
+}
+
+/* No Project: said in the middle of the canvas, where the picture would be. */
+.empty-state {
+  grid-column: rail-r / insp-l;
+  grid-row: main-t / main-b;
+  place-self: center;
+  position: relative;
+  z-index: var(--z-scrim);
+  display: grid;
+  text-align: center;
+  gap: var(--space-3);
+  pointer-events: none;
+  color: var(--ink-3);
+}
+
+.empty-state h1 {
+  font-size: var(--type-xl);
+  font-weight: 600;
+  margin: 0;
+  color: var(--ink-2);
+}
+
+.empty-state p {
+  margin: 0;
+}
+
+/* The way forward takes the click the container gives up. */
+.empty-state a {
+  pointer-events: auto;
+  justify-self: center;
+  margin-top: var(--space-3);
+  text-decoration: none;
+}
+
+/* A mode's crash card (the fallback of the PanelBoundary App.tsx wraps around
+   each mode, a direct child of the shell) sits at the top of the centre
+   column, over the canvas bar and the canvas cell. The mode's portalled parts
+   went with the throw, so the card is what is left of the mode. */
+.shell > .panel-crash {
+  grid-column: rail-r / insp-l;
+  grid-row: main-t / main-b;
+  align-self: start;
+  justify-self: center;
+  position: relative;
+  z-index: var(--z-overlay);
+  max-width: min(640px, 100%);
+}
+
+
+/* ---- resizable edges ---------------------------------------------------- */
+/* 8px of hit area for a 1px seam, centred on it. Anything thinner is a target
+   you have to aim at. Paper draws the handle 6 wide; the extra 2px is hit
+   area only.
+
+   THE GRIP: a 20px stroke at the handle's middle, in ink-3 at rest, so an
+   edge that drags says so. The seam itself is the panel's own border at rest.
+   On hover the band takes the soft state fill, the seam is redrawn in the
+   selected fill, and the grip turns accent ink.
+
+   `touch-action: none` is what makes a pen or touch drag resize instead of
+   scrolling the page out from under the gesture. */
+.rail-resize,
+.inspector-resize,
+.dock-resize,
+.split-resize {
+  touch-action: none;
+  background: transparent;
+  transition: background var(--dur-fast) var(--ease);
+}
+
+.rail-resize::before,
+.inspector-resize::before,
+.dock-resize::before,
+.split-resize::before,
+.rail-resize::after,
+.inspector-resize::after,
+.dock-resize::after,
+.split-resize::after {
+  content: "";
+  position: absolute;
+  pointer-events: none;
+  transition: background var(--dur-fast) var(--ease);
+}
+
+/* The seam, hover only, ON the panel's own border so the two never sit a
+   pixel apart: the rail's border is the last pixel before its track line,
+   the inspector's and the split's the first after theirs, and the dock's is
+   its top edge (the handle starts there, inside the dock). */
+.rail-resize::before,
+.inspector-resize::before,
+.split-resize::before {
+  top: 0;
+  bottom: 0;
+  left: var(--space-2);
+  width: 1px;
+}
+
+.rail-resize::before {
+  left: calc(var(--space-2) - 1px);
+}
+
+.dock-resize::before {
+  left: 0;
+  right: 0;
+  top: 0;
+  height: 1px;
+}
+
+/* The grip, on the same line. */
+.rail-resize::after,
+.inspector-resize::after,
+.split-resize::after {
+  top: calc(50% - 10px);
+  left: var(--space-2);
+  width: 1px;
+  height: 20px;
+  background: var(--ink-3);
+}
+
+.rail-resize::after {
+  left: calc(var(--space-2) - 1px);
+}
+
+.dock-resize::after {
+  left: calc(50% - 10px);
+  top: 0;
+  width: 20px;
+  height: 1px;
+  background: var(--ink-3);
+}
+
+.rail-resize:hover,
+.inspector-resize:hover,
+.dock-resize:hover,
+.split-resize:hover {
+  background: var(--fill-state-soft);
+}
+
+.rail-resize:hover::before,
+.inspector-resize:hover::before,
+.dock-resize:hover::before,
+.split-resize:hover::before {
+  background: var(--fill-selected);
+}
+
+.rail-resize:hover::after,
+.inspector-resize:hover::after,
+.dock-resize:hover::after,
+.split-resize:hover::after {
+  background: var(--accent-ink);
+}
+
+/* The two column seams, as grid items on the seam's own line. Each runs on
+   down through the timeline, whose name column and meters cell are the two
+   columns' own tracks: one drag moves the column and the timeline cell under
+   it together. */
+.rail-resize,
+.inspector-resize {
+  grid-row: main-t / edge-b;
+  position: relative;
+  z-index: var(--z-handle);
+  width: 8px;
+  cursor: col-resize;
+}
+
+.rail-resize {
+  grid-column: edge-l / rail-r;
+  justify-self: end;
+  margin-right: calc(-1 * var(--space-2));
+}
+
+.inspector-resize {
+  grid-column: insp-l / edge-r;
+  justify-self: start;
+  margin-left: calc(-1 * var(--space-2));
+}
+
+
+/* The stage's own divider between the working and camera panes. It sits ON the
+   seam the scissor draws to, whose position is `--split-x` — written by the
+   shell's writer from the same `splitRatio` `paneRects` reads, so the handle
+   and the rendered boundary cannot end up a column apart. It spans exactly the
+   stage's visible window (`--window-*`, written beside it). */
+.split-resize {
+  position: fixed;
+  top: var(--window-t, 0px);
+  bottom: var(--window-b, 0px);
+  left: var(--split-x);
+  z-index: var(--z-handle);
+  width: 8px;
+  margin-left: calc(-1 * var(--space-2));
+  cursor: col-resize;
+}
+
+/* The dock's top edge, inside the dock: the handle drags the row it heads. */
+.dock-resize {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  /* Local to the dock (a stacking context): above its sticky ruler (5). */
+  z-index: 6;
+  height: 8px;
+  cursor: row-resize;
+}
+
+
+
+/* ---- the shared stage window -------------------------------------------- */
+/* A HOLE, AND THE CLASS THAT MAKES IT ONE.
+ *
+ * A mode (the material workspace, the Component and Code Studios) paints its
+ * part of the docked cells and leaves exactly
+ * one box for the stage iframe behind them to show through, and
+ * `measureInset` (app/App.tsx) finds that box by THIS class. The two rules
+ * that make the cell a window rather than a lid are stated once here so a mode
+ * cannot half-implement them:
+ *
+ *   NO PAINT. Anything opaque, including a "subtle" tint, covers the only live
+ *     thing on screen.
+ *   NO POINTER. Hit testing follows paint, so a box over the iframe swallows
+ *     every press on the stage even where it draws nothing, and in every hole
+ *     a drag on the subject ORBITS, which is the gesture that would be lost.
+ *     Each cell that actually paints opts back in.
+ *
+ * Size and placement stay with each mode: they are laid out differently and
+ * only the modes know their own columns. */
+.stage-window {
+  background: transparent;
+  pointer-events: none;
+}
+
+
+/* ---- scrollbars --------------------------------------------------------- */
+/* Default scrollbars on a near-black panel are a bright grey slab. THE ONE
+   SCROLLBAR RULE: every chrome scroller is themed here and nowhere else
+   (sourceHygiene holds it), the board's desk, which scrolls the whole plan,
+   and its Style row, which scrolls sideways, included, and the bodies of the
+   board's right panels (the Plan, the component sheet, the item inspector)
+   and of the Brief. Those hold a stable gutter, so an unthemed one reserves
+   the default bar's width at rest and its rows end short of the inspector's
+   in the same column. `height` is declared beside `width` so a horizontal bar
+   is themed as well. Theming rather than hiding: a scrollbar is a scroller's
+   only resting statement of where it is and how much more there is. */
+.rail-scroll::-webkit-scrollbar,
+.inspector-body::-webkit-scrollbar,
+.agent-transcript::-webkit-scrollbar,
+.dock-scroll::-webkit-scrollbar,
+.board-desk::-webkit-scrollbar,
+.style-wall-items::-webkit-scrollbar,
+.plan-body::-webkit-scrollbar,
+.component-sheet-body::-webkit-scrollbar,
+.sketch-inspector-body::-webkit-scrollbar,
+.shot-brief-body::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+
+.rail-scroll::-webkit-scrollbar-thumb,
+.inspector-body::-webkit-scrollbar-thumb,
+.agent-transcript::-webkit-scrollbar-thumb,
+.dock-scroll::-webkit-scrollbar-thumb,
+.board-desk::-webkit-scrollbar-thumb,
+.style-wall-items::-webkit-scrollbar-thumb,
+.plan-body::-webkit-scrollbar-thumb,
+.component-sheet-body::-webkit-scrollbar-thumb,
+.sketch-inspector-body::-webkit-scrollbar-thumb,
+.shot-brief-body::-webkit-scrollbar-thumb {
+  background: var(--fill-hover);
+  border: 3px solid transparent;
+  background-clip: content-box;
+  border-radius: var(--radius-full);
+}
+
+.rail-scroll::-webkit-scrollbar-thumb:hover,
+.inspector-body::-webkit-scrollbar-thumb:hover,
+.agent-transcript::-webkit-scrollbar-thumb:hover,
+.dock-scroll::-webkit-scrollbar-thumb:hover,
+.board-desk::-webkit-scrollbar-thumb:hover,
+.style-wall-items::-webkit-scrollbar-thumb:hover,
+.plan-body::-webkit-scrollbar-thumb:hover,
+.component-sheet-body::-webkit-scrollbar-thumb:hover,
+.sketch-inspector-body::-webkit-scrollbar-thumb:hover,
+.shot-brief-body::-webkit-scrollbar-thumb:hover {
+  background: var(--line-strong);
+  background-clip: content-box;
+}
+
+.rail-scroll::-webkit-scrollbar-track,
+.inspector-body::-webkit-scrollbar-track,
+.agent-transcript::-webkit-scrollbar-track,
+.dock-scroll::-webkit-scrollbar-track,
+.board-desk::-webkit-scrollbar-track,
+.style-wall-items::-webkit-scrollbar-track,
+.plan-body::-webkit-scrollbar-track,
+.component-sheet-body::-webkit-scrollbar-track,
+.sketch-inspector-body::-webkit-scrollbar-track,
+.shot-brief-body::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+/* ── the in-browser export scrim ──────────────────────────────────────────
+   Over the stage's VISIBLE WINDOW and nothing else: the canvas cell, or a
+   mode's hole. `--window-*` is that rect, written by the shell's writer from
+   the same measure that tells the stage where it is covered, so the header,
+   the columns and the dock stay usable while the capture loop owns the
+   canvas. `pointer-events` swallows stage clicks, which is the point: the
+   export is driving that canvas. Above a mode, because a mode's hole is
+   transparent and the veil has to cover what shows through it.
+
+   No backdrop-filter: compositing a blur over a live GL canvas every frame
+   is exactly the work it is waiting on. */
+.export-scrim {
+  position: fixed;
+  top: var(--window-t, 0px);
+  right: var(--window-r, 0px);
+  bottom: var(--window-b, 0px);
+  left: var(--window-l, 0px);
+  z-index: var(--z-scrim);
+  display: grid;
+  place-content: center;
+  gap: var(--space-4);
+  text-align: center;
+  background: var(--scrim);
+  color: var(--ink-1);
+  font-family: var(--font-sans);
+  font-variant-numeric: var(--numeric);
+  pointer-events: auto;
+}
+
+.export-scrim p {
+  margin: 0;
+}
+
+.export-scrim-note {
+  color: var(--ink-2);
+  font-size: var(--type-sm);
+}