@dailies-studio/shot-editor 0.1.0 → 0.2.0

package/src/styles/modes/storyboard.css

@@ -0,0 +1,518 @@
+/* The storyboard, the part that loads with the shell: the board's place in
+   the docked frame, the rules that restyle a house widget on a board element
+   (the panel head, a button, the dialog, the drop zone, caps), and what Studio
+   and the inspector share with the board (a sketch drawn small, the card
+   previews, the live component preview, the Place slot). Values from
+   plans/SHOT-BOARD-VALUES.md.
+
+   THE REST OF THE BOARD IS panels/storyboard/board.css, in the board's own
+   chunk (app/lazySurfaces.tsx). That sheet sits in `component-sheets`, UNDER
+   the widgets and the chrome, so a board rule on an element that also carries
+   a house class (`.panel-head board-bar`, `.btn board-plan-action`,
+   `.dialog board-drop`, `.drop style-drop`) would lose to the house rule.
+   Those stay here, in the chrome layer, where they win. */
+
+/* ---- the board in the docked frame --------------------------------------- */
+/* ONE CANVAS, EDGE TO EDGE. The board has no left column, no canvas bar, no
+   tool footer and no timeline: App draws the rail and the dock row at 0, and
+   the canvas cell spans from the left edge to the right column and from under
+   the top bar to the bottom. The right column stands only while it has an
+   occupant (`boardRightPanel`); empty, it is not drawn, so it draws no seam. */
+.shell.is-storyboard > .control-strip,
+.shell.is-storyboard > .left-rail,
+.shell.is-storyboard > .tool-footer,
+.shell.is-storyboard > .bottom-cell,
+.shell.is-storyboard > .timeline-dock,
+.shell.is-storyboard > .inspector-column[data-empty] {
+  display: none;
+}
+
+/* Start only: the end stays the canvas track's, so a collapsed right column
+   still hands the canvas its width (shell.css). */
+.shell.is-storyboard > .canvas-cell {
+  grid-column-start: edge-l;
+  grid-row: main-t / edge-b;
+}
+
+.shell.is-storyboard > .inspector-column {
+  grid-row: main-t / edge-b;
+}
+
+/* THE BOARD BAR (SB1): the one panel head, 16 in and 8 from the right, the
+   title, the count, then "Shot" and the board's one primary. */
+.board-bar {
+  gap: var(--space-6);
+  padding-right: var(--space-4);
+}
+
+/* The head's + sits in the 16 line, so it does not grow the row. */
+.board-section-add {
+  margin-block: calc(-1 * var(--space-4));
+}
+
+/* ---- the drop slot -------------------------------------------------------- */
+/* The house drop zone (`.drop`, G1 09) at the wall's height, its words in
+   `--ink-2` and its plus in `--ink-3` (SB1). This sheet's layer outranks the
+   house widgets, so the rest state names only what `.drop.is-over` leaves
+   alone: a transparent ground here would hide the drag's wash. */
+.style-drop {
+  flex: none;
+  width: 200px;
+  height: 100%;
+  padding: 0 var(--space-6);
+  font: inherit;
+  font-size: var(--type-md);
+  font-weight: var(--weight-medium);
+  cursor: pointer;
+}
+
+.style-drop:not(.is-over) {
+  background: transparent;
+  color: var(--ink-2);
+}
+
+.style-drop > svg {
+  flex: none;
+  width: 16px;
+  height: 16px;
+}
+
+.style-drop:not(.is-over) > svg {
+  color: var(--ink-3);
+}
+
+.style-drop:hover {
+  border-color: var(--ink-3);
+  color: var(--ink-1);
+}
+
+.style-drop:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
+
+/* The link field takes the slot's place while it is open. */
+.style-drop.is-link {
+  border: 1px solid var(--accent);
+  border-radius: var(--radius-tab);
+  background: var(--surface-secondary);
+  color: var(--ink-1);
+  text-align: center;
+  cursor: text;
+  outline: none;
+}
+
+/* ---- a sketch, drawn small (MiniSketch) ----------------------------------- */
+/* Items sit in percentages of the box and type in `cqw` of it, so one markup
+   is right at any width. A picture: it takes no pointer. */
+.mini-sketch {
+  position: relative;
+  width: 100%;
+  container-type: inline-size;
+  overflow: hidden;
+  background: var(--sketch-paper);
+  color: var(--sketch-ink);
+  pointer-events: none;
+}
+
+.mini-sketch[data-ground="dark"] {
+  background: var(--surface-app);
+  color: var(--on-media);
+}
+
+.mini-sketch[data-ground="brand"] {
+  background: var(--accent);
+  color: var(--on-accent);
+}
+
+/* The sketch as the still stage drew it, at the Project's aspect: it fills
+   the box edge to edge, in place of the DOM drawing. */
+.mini-sketch-picture {
+  position: absolute;
+  inset: 0;
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.mini-sketch-text,
+.mini-sketch-box,
+.mini-sketch-ref {
+  position: absolute;
+  overflow: hidden;
+}
+
+.mini-sketch-text {
+  line-height: var(--leading-tight);
+  font-weight: var(--weight-semibold);
+  overflow-wrap: anywhere;
+}
+
+.mini-sketch-text.is-title {
+  letter-spacing: var(--tracking-display-md);
+}
+
+.mini-sketch-text[data-align="center"] {
+  text-align: center;
+}
+
+.mini-sketch-text[data-align="end"] {
+  text-align: right;
+}
+
+.mini-sketch-box {
+  box-sizing: border-box;
+  border: 1px solid var(--sketch-line);
+  border-radius: var(--radius-2xs);
+  background: var(--sketch-fill);
+}
+
+.mini-sketch-box[data-tone="dark"] {
+  border-color: transparent;
+  background: var(--sketch-dark);
+  color: var(--sketch-line);
+}
+
+.mini-sketch-box[data-tone="accent"] {
+  border-color: transparent;
+  background: var(--accent);
+  color: var(--on-accent);
+}
+
+/* A box's label sits in its top left, an arrow's centred over its head. */
+.mini-sketch-label {
+  position: absolute;
+  top: 6%;
+  left: 4%;
+  max-width: 92%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  line-height: var(--leading-tight);
+  font-weight: var(--weight-medium);
+}
+
+.mini-sketch-label.is-arrow {
+  top: auto;
+  translate: -50% -50%;
+}
+
+.mini-sketch-ref > img,
+.mini-sketch-media {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+/* A component, or a card with no picture: its name on the sketch fill. */
+.mini-sketch-ref.is-tile {
+  box-sizing: border-box;
+  border: 1px dashed var(--sketch-line);
+  border-radius: var(--radius-2xs);
+  background: var(--sketch-fill);
+}
+
+.mini-sketch-ref.is-missing {
+  color: var(--danger);
+}
+
+.mini-sketch-arrows {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 6;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+/* ---- the board's Plan panel ------------------------------------------------ */
+/* Its footer's two ways on share the width (SB1). */
+.board-plan-action {
+  flex: 1 1 0;
+  min-width: 0;
+}
+
+/* Cut to next is the house select trigger (PlanPanel.tsx), and it discloses
+   the cut's rows under it, so its caret (the house `.field-caret`, pointing
+   down) turns up while they are open. */
+.plan-cut-select[aria-expanded="true"] .combobox-caret {
+  transform: rotate(180deg);
+}
+
+/* A BEAT IS A LINE OF PROSE in its own box, its remove inside the box's
+   accessory lane (PlanPanel.tsx), so its words read from the left. The house
+   sets a one-line value in a pill on the right, beside the name it answers; a
+   beat's box holds no name, and its number sits outside it. */
+.plan-beat .insp-pill input.text-input {
+  text-align: left;
+}
+
+/* THE PLAN'S BARE FIELDS TAKE THE RECIPE'S 8px INSET. What we see, Voice
+   and the Cut to next trigger sit under their caps labels, outside any
+   property row, so they kept the 12px a text field or a select has on its
+   own, while the beats' boxes and the Length field beside them start their
+   words 8px in, as every Studio box does. The house gives a bare field the
+   inset only inside a row (widgets.css, `:where(.insp-row, .prop-row)`), so
+   this is the same inset in the plan's own context: both sides for a text
+   field, the left for a select, whose right holds its caret. */
+.plan-field > .text-input {
+  padding-inline: var(--space-4);
+}
+.plan-field > .select {
+  padding-left: var(--space-4);
+}
+
+/* ---- the drop dialog (S2) ------------------------------------------------- */
+/* The house Dialog, restyled: 640 wide on the strong scrim, every inset its
+   own section's. The title row carries the Esc hint, so the house X steps
+   aside (Cancel and Esc both close). */
+.dialog-overlay:has(> .dialog.board-drop) {
+  background: var(--scrim-strong);
+}
+
+.dialog.board-drop {
+  width: 640px;
+  gap: 0;
+  padding: 0;
+  border: 1px solid var(--line);
+  border-radius: var(--control-radius);
+  box-shadow: var(--shadow-popover);
+  overflow: hidden;
+}
+
+.dialog.board-drop > .dialog-close {
+  display: none;
+}
+
+.dialog.board-drop > .dialog-title {
+  display: flex;
+  align-items: center;
+  gap: var(--space-5);
+  padding: var(--space-7) var(--space-7) var(--space-6);
+}
+
+.dialog.board-drop > .dialog-body {
+  gap: 0;
+  padding: 0;
+}
+
+.dialog.board-drop > .dialog-actions {
+  gap: var(--space-4);
+  padding: var(--space-7) var(--space-7) var(--space-7);
+}
+
+.dialog.board-drop > .dialog-actions > .btn {
+  height: var(--control-h);
+  padding: 0 var(--space-6);
+  border-radius: var(--radius-tab);
+  font-weight: var(--weight-semibold);
+}
+
+.board-drop-cancel {
+  background: var(--surface-secondary);
+}
+
+/* ---- the component sheet's head and foot (S3) ----------------------------- */
+/* On the house panel head and panel foot, so here; the sheet's own parts are
+   in board.css. */
+.component-sheet-bar {
+  padding-left: var(--space-6);
+}
+
+.component-sheet-foot {
+  justify-content: flex-start;
+  padding: 0 var(--space-6);
+}
+
+/* THIS USE AMONG SECTIONS, in the sheet and in the item inspector: the
+   column's own hairline runs only between two sections, so the first section
+   under the This use block takes it here, and in the item inspector the block
+   takes it under the section above it (Component). The sheet's block sits
+   under the stage, which is a box of its own. */
+.component-sheet-body > .this-use + .insp-section,
+.sketch-inspector-body > .this-use + .insp-section,
+.sketch-inspector-body > .insp-section + .this-use {
+  border-top: 1px solid var(--line);
+}
+
+/* ---- the board's read-only rows (ReadoutRow, boardRows.tsx) -------------- */
+/* They are the house readout (`insp-readout`, widgets.css), the one the
+   Studio's Time section wears: the field's box on the control ground with no
+   hover, the value in the numeric face, a sentence wrapping in a row aligned
+   to its start, and a badge in one (a requirement's Status) 2px short so the
+   row stays 28. Nothing here restates it. */
+
+/* A library item's README, quoted whole: the row's width, its own line
+   breaks, wrapping at the row's edge, in the readout's ink. */
+.insp-docs {
+  flex: 1;
+  min-width: 0;
+  margin: 0;
+  font: inherit;
+  color: var(--ink-2);
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+/* The File row's value, the file's own name, in the readout's second ink:
+   the third was dimmer than the label naming it. Its buttons (Choose file,
+   Replace, Clear) are the house in-pill button, the chip height inside the
+   row's 28px box, and a row's own buttons on the board (Place, Mark done, a
+   library verb, Delete; the item inspector's Replace and Open in Components,
+   each a row of buttons) are the house row's 28, as the Studio inspector's
+   are (widgets.css). */
+.insp-file-row .insp-dim.is-text {
+  color: var(--ink-2);
+}
+
+/* ---- the inspector's lead and the shared preview -------------------------- */
+/* The inspector's lead: the same `ReferencePreview` the board's other cards
+   render, at the section's width. What a card IS, before any property of it.
+   The section already carries the column's inset, so the lead adds none. */
+.insp-reference-lead {
+  position: relative;
+  aspect-ratio: 16 / 9;
+  margin: 0 0 var(--space-2);
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--line);
+  background: var(--fill-rest);
+  overflow: hidden;
+}
+
+/* One preview recipe, four kinds. The card and the inspector's lead render
+   the same component, so this is the only place any of them is sized. */
+.reference-preview {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.reference-preview.is-note,
+.reference-preview.is-component,
+.reference-preview.is-missing,
+.reference-preview.is-kind {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--space-2);
+  text-align: center;
+  font-size: var(--type-micro);
+  color: var(--ink-2);
+  overflow: hidden;
+}
+
+/* A note shows ITS OWN TEXT, which is the whole card. A generic glyph is the
+   least informative thing a note can show. */
+.reference-preview.is-note {
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  align-items: flex-start;
+  text-align: left;
+  line-height: var(--leading-tight);
+  color: var(--ink-1);
+}
+
+.reference-preview.is-component {
+  flex-direction: column;
+  gap: var(--space-1);
+}
+
+.reference-preview-glyph {
+  font-family: var(--font-mono);
+  font-size: var(--type-sm);
+  color: var(--ink-2);
+}
+
+.reference-preview-name {
+  max-width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: var(--ink-1);
+}
+
+.reference-preview.is-missing {
+  color: var(--danger);
+}
+
+/* A video's lead is the video itself at the card's frame, with Extract
+   still over its corner (VideoStill). */
+.insp-video-still {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+/* The lead LETTERBOXES a picture: a card is looked at whole here, and a logo
+   or a wide still cropped to fill is a different picture. */
+.insp-reference-lead > img.reference-preview {
+  object-fit: contain;
+}
+
+.insp-reference-lead > .btn {
+  position: absolute;
+  right: var(--space-3);
+  bottom: var(--space-3);
+}
+
+/* ---- the live component preview (ComponentStage) -------------------------- */
+/* A second shot stage, on a card and in the sheet. It takes no pointer: it is
+   a picture, and a press on it must select nothing on a stage nobody edits.
+   At rest a card shows the stage's captured POSTER under the same box. */
+.component-stage {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.component-stage-frame,
+.component-stage-poster {
+  display: block;
+  width: 100%;
+  height: 100%;
+  border: 0;
+  pointer-events: none;
+  background: transparent;
+}
+
+.component-stage-poster {
+  position: absolute;
+  inset: 0;
+  object-fit: cover;
+}
+
+.component-stage-status {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  place-items: center;
+  padding: var(--space-4);
+  text-align: center;
+  font-size: var(--type-micro);
+  color: var(--ink-3);
+  background: var(--fill-rest);
+}
+
+/* ---- a requirement's Place slot (boardRows.tsx) ------------------------ */
+.ledger-in {
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.ledger-note {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: var(--type-sm);
+  color: var(--ink-3);
+}

package/src/styles/share-component.css

@@ -0,0 +1,49 @@
+/* Share component (C3): panels/share/ShareComponentDialog.tsx. */
+
+.share-component-body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-7);
+  min-width: 0;
+  max-width: 420px;
+}
+
+.share-component-status {
+  margin: 0;
+  color: var(--ink-2);
+}
+
+.share-component-section {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--space-4);
+}
+
+.share-component-section > .dialog-field {
+  align-self: stretch;
+}
+
+.share-component-heading {
+  margin: 0;
+  font-size: var(--type-md);
+  font-weight: 600;
+  color: var(--ink-1);
+}
+
+.share-component-check {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+}
+
+.share-component-contents p,
+.share-component-foot,
+.share-component-reason {
+  margin: 0;
+  color: var(--ink-2);
+}
+
+.share-component-foot {
+  font-size: var(--type-micro);
+}