@dailies-studio/shot-editor 0.1.0 → 0.2.0

package/src/styles/modes/code.css

@@ -0,0 +1,569 @@
+/* Code Studio (C2) in the docked cells: the components list in the left column, the code pane and the live pane in the canvas cell, its verbs in the canvas bar. No bottom row: Components hides the timeline (`componentsHideTimeline`). */
+
+/* ---- the canvas cell: the code pane, then the live pane ------------------ */
+/* A row across the cell. It paints nothing and takes no pointer: the cell's
+   own rule, stated again because it is the HOLE'S ANCESTOR, and a box over
+   the hole that took the pointer would swallow every orbit meant for the
+   stage. The code pane and the live bar opt back in; the hole
+   (`.stage-window`, shell.css) stays out. */
+.code-studio {
+  flex: 1 1 0;
+  display: flex;
+  min-width: 0;
+  min-height: 0;
+  pointer-events: none;
+}
+
+/* THE CODE PANE: the file bar, the file's strips, the editor (and the files
+   when asked for), then the status footer. Opaque, with the seam to the live
+   pane on its own border. */
+.code-studio-column {
+  flex: 1 1 0;
+  min-width: 360px;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  border-right: 1px solid var(--line);
+  background: var(--surface-panel);
+  pointer-events: auto;
+}
+
+/* THE LIVE PANE, at the stored width (`--code-live-w`, which App writes from
+   `codeLiveWidth`, 420 by default): a bar, then the hole the stage renders
+   into. It never takes the code pane under its 360 minimum. */
+.code-live {
+  position: relative;
+  flex: 0 1 var(--code-live-w, 420px);
+  min-width: 240px;
+  max-width: calc(100% - 360px);
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+/* The seam's handle, on the code pane's right border: 8px of hit area over
+   the hairline, painting only on hover, like the material preview's. The one
+   thing over the hole's edge that takes a pointer. */
+.code-live-resize {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: calc(-1 * var(--space-2) - 1px);
+  z-index: 3;
+  width: 8px;
+  cursor: col-resize;
+  touch-action: none;
+  pointer-events: auto;
+  background: transparent;
+  transition: background var(--dur-fast) var(--ease);
+}
+
+.code-live-resize:hover {
+  background: var(--accent-soft);
+}
+
+.code-live-bar {
+  flex: 0 0 var(--panel-head-h);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 var(--space-7);
+  border-bottom: 1px solid var(--line);
+  background: var(--surface-panel);
+  pointer-events: auto;
+}
+
+.code-live-title {
+  color: var(--ink-2);
+  font-size: var(--type-md);
+}
+
+.code-live-loop {
+  color: var(--ink-3);
+  font-family: var(--font-mono);
+  font-size: var(--type-sm);
+  font-variant-numeric: var(--numeric);
+}
+
+.code-studio-hole {
+  flex: 1 1 auto;
+  min-width: 0;
+  min-height: 0;
+}
+
+/* ---- the file bar ---------------------------------------------------------- */
+.code-file-bar {
+  flex: 0 0 var(--panel-head-h);
+  display: flex;
+  align-items: center;
+  gap: var(--space-4);
+  min-width: 0;
+  padding: 0 var(--space-6);
+  border-bottom: 1px solid var(--line);
+}
+
+.code-files-toggle {
+  flex: none;
+  height: var(--control-h);
+  padding: 0 var(--space-4);
+  border: 0;
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: var(--ink-3);
+  font-size: var(--type-sm);
+  cursor: pointer;
+}
+
+.code-files-toggle:hover,
+.code-files-toggle.is-on {
+  color: var(--ink-1);
+  background: var(--surface-secondary);
+}
+
+/* One buffer: its file tab. */
+.code-file-tab {
+  flex: 0 1 auto;
+  min-width: 0;
+  padding: var(--space-2) var(--space-5);
+  border-radius: var(--radius-sm);
+  background: var(--surface-secondary);
+  color: var(--ink-1);
+  font-family: var(--font-mono);
+  font-size: var(--type-sm);
+  line-height: 16px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.code-file-spacer {
+  flex: 1 1 auto;
+}
+
+.code-build {
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-3);
+  color: var(--ink-3);
+  font-size: var(--type-sm);
+  white-space: nowrap;
+}
+
+.code-build-dot {
+  width: 7px;
+  height: 7px;
+  border-radius: var(--radius-xs);
+  background: var(--success);
+}
+
+.code-build.is-failed {
+  color: var(--danger);
+}
+
+.code-build.is-failed .code-build-dot {
+  background: var(--danger);
+}
+
+/* ---- the body: the files (when asked for), then the editor ---------------- */
+.code-studio-body {
+  flex: 1 1 auto;
+  min-height: 0;
+  display: flex;
+}
+
+/* The two "something needs you" strips, under the file bar, because both
+   describe the FILE rather than any one place in it. */
+.code-studio-strip {
+  flex: none;
+  display: flex;
+  align-items: center;
+  gap: var(--space-4);
+  padding: var(--space-3) var(--space-4);
+  border-bottom: 1px solid var(--line);
+  background: var(--surface-secondary);
+  color: var(--ink-1);
+  font-size: var(--type-sm);
+}
+
+.code-studio-strip.is-error {
+  color: var(--danger);
+}
+
+/* The generated strip is a STATEMENT, not a failure: the file is fine, it is
+   simply not the author's to edit. Dim, not red like the error strip. */
+.code-studio-strip.is-generated {
+  color: var(--ink-2);
+}
+
+/* FOLLOW MODE: an agent is writing this file, so it reads, it does not take
+   typing. A statement like the generated strip, with the one verb. */
+.code-studio-strip.is-follow {
+  color: var(--ink-2);
+}
+
+.code-studio-strip.is-follow > .btn {
+  margin-left: auto;
+}
+
+.code-studio-pane {
+  flex: 1 1 auto;
+  min-width: 0;
+  min-height: 0;
+  display: flex;
+}
+
+/* CodeMirror sizes itself to its host, so the host has to be the one with a
+   height. Both are needed: the flex child min-height and the editor's own. */
+.code-studio-pane .code-editor {
+  flex: 1 1 auto;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.code-studio-empty {
+  flex: 1 1 auto;
+  margin: 0;
+  padding: var(--space-7) var(--space-6);
+  color: var(--ink-2);
+  font-size: var(--type-md);
+}
+
+/* ---- the status footer ------------------------------------------------------ */
+/* The shipped 48 tool footer height, so it lines up with every other footer. */
+.code-status {
+  flex: 0 0 var(--tool-footer-h);
+  display: flex;
+  align-items: center;
+  gap: var(--space-5);
+  min-width: 0;
+  padding: 0 var(--space-7);
+  border-top: 1px solid var(--line);
+  font-size: var(--type-sm);
+  white-space: nowrap;
+}
+
+.code-status-ok {
+  color: var(--success);
+}
+
+.code-status-errors {
+  color: var(--danger);
+  font-variant-numeric: var(--numeric);
+}
+
+.code-status-note {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: var(--ink-3);
+}
+
+.code-status-verbs {
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  color: var(--ink-3);
+}
+
+/* Remix and History: quiet words, ink on hover. The Studio-made footer
+   (ComponentSidePanel.tsx) wears the same verbs. */
+.code-status-verb {
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: var(--ink-3);
+  font-size: var(--type-sm);
+  cursor: pointer;
+}
+
+.code-status-verb:hover:not(:disabled) {
+  color: var(--ink-1);
+}
+
+.code-status-verb:disabled {
+  cursor: default;
+  opacity: var(--opacity-disabled);
+}
+
+/* ---- the tab strip ---------------------------------------------------------- */
+/* Two or more buffers: the tab strip (it takes the file tab's place in Code
+   Studio's file bar). The component does not render it below two.
+
+   NO SCROLLBAR: a classic one takes its height out of the fixed row and
+   squashes every tab. The strip still pans (trackpad, Shift+wheel), and the
+   active tab scrolls itself into view (`CodeTab`). */
+.code-tabs {
+  flex: 0 0 var(--panel-head-h);
+  display: flex;
+  align-items: stretch;
+  overflow-x: auto;
+  scrollbar-width: none;
+  border-bottom: 1px solid var(--line);
+  background: var(--surface-secondary);
+}
+
+/* In the file bar the bar draws the edge and the ground. Two classes, so the
+   overrides are not ties with the strip's own rule. */
+.code-file-bar > .code-tabs {
+  flex: 0 1 auto;
+  align-self: stretch;
+  min-width: 0;
+  border-bottom: 0;
+  background: transparent;
+}
+
+.code-tab {
+  display: flex;
+  align-items: center;
+  flex: 0 0 auto;
+  max-width: 180px;
+  border-right: 1px solid var(--line);
+}
+
+.code-tab[data-active] {
+  background: var(--surface-panel);
+}
+
+.code-file-bar .code-tab[data-active] {
+  background: var(--surface-secondary);
+}
+
+.code-tab-name {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  height: 100%;
+  min-width: 0;
+  padding: 0 var(--space-2) 0 var(--space-5);
+  border: 0;
+  background: transparent;
+  color: var(--ink-2);
+  font-size: var(--type-md);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  cursor: pointer;
+}
+
+.code-tab[data-active] .code-tab-name {
+  color: var(--ink-1);
+}
+
+.code-tab-dirty {
+  flex: 0 0 auto;
+  width: 5px;
+  height: 5px;
+  border-radius: var(--radius-full);
+  background: var(--ink-2);
+}
+
+.code-tab-close {
+  flex: 0 0 auto;
+  height: 100%;
+  padding: 0 var(--space-4) 0 var(--space-2);
+  border: 0;
+  background: transparent;
+  color: var(--ink-3);
+  font-size: var(--type-lg);
+  line-height: var(--leading-none);
+  cursor: pointer;
+}
+
+.code-tab-close:hover {
+  color: var(--ink-1);
+}
+
+/* ---- the canvas bar ------------------------------------------------------- */
+/* The way back, the breadcrumb, then the verbs pushed right (the tab switch,
+   Save, the zoom). The slot lays the row out (`.canvas-bar-mode`,
+   canvas.css); these size its parts. */
+
+/* THE WAY BACK, the stage bar's back chip as a bare chevron: accent ink,
+   because being inside something is a state and the way out of it is
+   signal. */
+.code-back {
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--control-h);
+  height: var(--control-h);
+  padding: 0;
+  border: 0;
+  border-radius: var(--control-radius);
+  background: transparent;
+  color: var(--accent-ink);
+  cursor: pointer;
+  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
+}
+
+.code-back:hover {
+  color: var(--ink-1);
+  background: var(--fill-rest);
+}
+
+.code-back:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
+
+/* The shot lane's icons carry no size of their own (icons.tsx). */
+.code-back svg {
+  width: 14px;
+  height: 14px;
+}
+
+/* THE SUBJECT, the breadcrumb's name (`.components-crumb`, component.css). */
+.code-studio-name {
+  flex: 0 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--ink-1);
+  font-size: var(--type-md);
+  font-weight: var(--weight-semibold);
+}
+
+/* Unsaved work in any buffer, as a dot rather than a word. */
+.code-studio-dirty {
+  flex: none;
+  width: 6px;
+  height: 6px;
+  border-radius: var(--radius-full);
+  background: var(--accent);
+}
+
+/* ---- the files, docked in the code pane ------------------------------------ */
+/* Shown by the file bar's Files toggle, beside the editor and inside the code
+   pane, so it never covers the stage. A head at the panel head height, then
+   the list, which is its one scroller (`.rail-scroll`). */
+.code-tree {
+  flex: 0 0 200px;
+  min-width: 0;
+  min-height: 0;
+  border-right: 1px solid var(--line);
+  display: flex;
+  flex-direction: column;
+}
+
+.code-tree-head {
+  flex: none;
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  height: var(--panel-head-h);
+  padding: 0 var(--space-2) 0 var(--space-6);
+  border-bottom: 1px solid var(--line);
+}
+
+.code-tree-title {
+  flex: 1 1 auto;
+  color: var(--ink-2);
+  font-size: var(--type-sm);
+  font-weight: var(--weight-semibold);
+  letter-spacing: var(--tracking-caps);
+  text-transform: uppercase;
+}
+
+.code-tree-list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+/* The root list is the scroller; two classes so its padding is not a tie
+   with `.rail-scroll`'s. */
+.code-tree > .code-tree-list {
+  padding: var(--space-2) 0 var(--space-4);
+}
+
+.code-tree-empty,
+.code-tree-truncated {
+  margin: 0;
+  padding: var(--space-5) var(--space-6);
+  color: var(--ink-2);
+  font-size: var(--type-sm);
+  line-height: var(--leading-body);
+}
+
+.code-tree-truncated {
+  flex: 0 0 auto;
+  border-top: 1px solid var(--line);
+  color: var(--warn);
+}
+
+.code-tree-row {
+  padding-left: calc(var(--space-3) + var(--depth, 0) * var(--tree-indent));
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  width: 100%;
+  /* The indent is inline, from the depth: the one thing about a row that a
+     stylesheet cannot know. */
+  padding-right: var(--space-4);
+  border: 0;
+  background: transparent;
+  color: var(--ink-2);
+  font-size: var(--type-md);
+  line-height: 22px;
+  text-align: left;
+  cursor: pointer;
+}
+
+.code-tree-row:hover {
+  background: var(--fill-rest);
+  color: var(--ink-1);
+}
+
+/* OPEN is ink, ACTIVE is a filled row. Two marks for two different questions
+   ("is there a buffer for this" and "is it the one on screen") and they
+   stack, because the active file is always open. */
+.code-tree-row.is-file[data-open] {
+  color: var(--ink-1);
+}
+
+.code-tree-row.is-file[data-active] {
+  background: var(--fill-rest);
+  color: var(--ink-1);
+}
+
+.code-tree-caret {
+  flex: 0 0 auto;
+  width: 10px;
+  color: var(--ink-3);
+  font-size: var(--type-micro);
+}
+
+.code-tree-name {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.code-tree-mark {
+  flex: 0 0 auto;
+  font-size: var(--type-micro);
+}
+
+/* THE ACCENT IS SIGNAL-ONLY, and "this is the component in the preview" is
+   exactly that: it points at the one row the rest of the mode is about. */
+.code-tree-mark.is-subject {
+  color: var(--accent-ink);
+}
+
+.code-tree-mark.is-generated {
+  color: var(--ink-3);
+}
+
+.code-tree-mark.is-dirty {
+  width: 5px;
+  height: 5px;
+  border-radius: var(--radius-full);
+  background: var(--ink-2);
+}