@dailies-studio/shot-editor 0.1.0 → 0.2.0

package/src/styles/controls.css

@@ -0,0 +1,162 @@
+/* The chrome's own generic controls: the range-slider recipe and the bar
+   switch. The button, the select and the badge are house widgets, defined
+   once in packages/ui widgets.css; this chrome never restates them. */
+
+/* The scrub is the Components Preview transport's progress (componentParts.tsx,
+   under the stage). Styled here rather than in the shared sheet because no
+   other chrome has one.
+
+   THE DOCK'S ZOOM RIDES THE SAME RECIPE: it is the other range input the
+   chrome shows at rest, and two sliders in one window that disagree about
+   the height of a track or the size of a thumb is the kind of difference
+   nobody can name and everybody sees. Only its width differs (timeline.css).
+   The volume takes the box here and draws its own track and thumb in
+   timeline-meters.css: Paper gives it a filled level and a 12x20 fader cap,
+   because a level is read off the slider and a zoom is not. */
+.transport-scrub,
+.dock-zoom,
+.dock-volume {
+  appearance: none;
+  -webkit-appearance: none;
+  width: 240px;
+  height: 18px;
+  background: transparent;
+  cursor: pointer;
+}
+
+.transport-scrub::-webkit-slider-runnable-track,
+.dock-zoom::-webkit-slider-runnable-track {
+  height: 4px;
+  border-radius: var(--radius-full);
+  background: var(--fill-rest);
+}
+
+.transport-scrub::-webkit-slider-thumb,
+.dock-zoom::-webkit-slider-thumb {
+  appearance: none;
+  -webkit-appearance: none;
+  width: 12px;
+  height: 12px;
+  margin-top: calc(-1 * var(--space-2));
+  border-radius: var(--radius-full);
+  background: var(--timeline-ink);
+  border: 0;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
+}
+
+.transport-scrub::-moz-range-track,
+.dock-zoom::-moz-range-track {
+  height: 4px;
+  border-radius: var(--radius-full);
+  background: var(--fill-rest);
+}
+
+.transport-scrub::-moz-range-thumb,
+.dock-zoom::-moz-range-thumb {
+  width: 12px;
+  height: 12px;
+  border: 0;
+  border-radius: var(--radius-full);
+  background: var(--timeline-ink);
+}
+
+.transport-scrub:focus-visible,
+.dock-zoom:focus-visible,
+.dock-volume:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+  border-radius: var(--radius-full);
+}
+
+/* A SWITCH IN A BAR is the house 28px track with 24px chips, like every
+   other segmented control. The docked heads (the right column's Inspector |
+   Agent, the timeline's Rows | Graph | Sound) pass `is-bar` so a chip that
+   ellipsizes keeps its text centred: by line-height, not by flex. */
+.segmented.is-bar .segmented-item {
+  height: calc(var(--control-h) - 2 * var(--space-1));
+  padding-block: 0;
+  line-height: calc(var(--control-h) - 2 * var(--space-1));
+}
+
+
+/* "Use as mask"'s mode swatches (Paper page 25): a picture of what the matte
+   reads, so it stays white-to-clear and white-to-black in either theme. */
+.mask-swatch {
+  display: block;
+  width: 20px;
+  height: 20px;
+  border: 1px solid var(--line-strong);
+  border-radius: var(--radius-xs);
+}
+.mask-swatch.is-alpha { background: linear-gradient(90deg, var(--gray-97), transparent); }
+.mask-swatch.is-luma { background: linear-gradient(90deg, var(--gray-100), var(--gray-11)); }
+
+/* A mask's mode on its row, in the outline and the timeline alike (Paper page
+   25): "Alpha", "Luma", "Alpha · Inv", or "Off" on a hidden mask. In a narrow
+   column it gives way BEFORE the layer's name: its shrink outweighs the name's
+   a thousand to one, so the badge ellipses (its title keeps the words) and the
+   name keeps its own. A block box, because an ellipsis needs one. */
+/* A placed code component whose contract moved since it was placed: it still
+   renders the old contract's defaults until Accept current contract. The
+   mask badge's box, in the warning hue. */
+.layer-drift-badge {
+  /* Gives way before the layer's name, as the mask badge does: its title
+     keeps the words, and the inspector says it in full. */
+  flex: 0 1000 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: inline-block;
+  height: 16px;
+  /* The 16px box less its two hairlines, so the one line sits centred. */
+  line-height: calc(var(--leading-xs) - 2px);
+  margin-left: var(--space-2);
+  padding: 0 var(--space-2);
+  border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent);
+  border-radius: var(--radius-xs);
+  font-family: var(--font-mono);
+  font-size: var(--type-micro);
+  color: var(--warn);
+  white-space: nowrap;
+}
+
+.mask-badge {
+  flex: 0 1000 auto;
+  min-width: 0;
+  display: inline-block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  height: 16px;
+  padding: 0 var(--space-2);
+  border: 1px solid var(--line-strong);
+  border-radius: var(--radius-xs);
+  font-family: var(--font-mono);
+  font-size: var(--type-micro);
+  /* The 16px box less its two hairlines, so the one line sits centred. */
+  line-height: 14px;
+  color: var(--ink-2);
+  white-space: nowrap;
+}
+
+/* One row's slice of a mask's bracket (maskMarks.tsx). `left` is inline, the
+   row's own inset for the bracket's depth; the line stands 4px into its 10px
+   column, and the row must be positioned. */
+.mask-bracket {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 6px;
+  margin-left: var(--space-2);
+  border-left: 1.5px solid var(--line-strong);
+  pointer-events: none;
+}
+.mask-bracket.is-top {
+  top: var(--space-4);
+  border-top: 1.5px solid var(--line-strong);
+  border-top-left-radius: var(--radius-2xs);
+}
+.mask-bracket.is-bottom {
+  bottom: 50%;
+  border-bottom: 1.5px solid var(--line-strong);
+  border-bottom-left-radius: var(--radius-2xs);
+}

package/src/styles/dialogs.css

@@ -0,0 +1,390 @@
+/* Dialogs: export, the manual and the material picker. The library browser lives in library.css. */
+
+/* ---- export -------------------------------------------------------------
+   Paper's form dialog. The WIDTH is the shared `Dialog size="wide"` (648px,
+   24px padding, 16px gaps), so this block owns only what sits inside it: a
+   label column, the controls, a hairline estimate and one outcome card. */
+
+.export-dialog {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-7);
+  min-width: 0;
+  font-size: var(--type-md);
+  line-height: var(--leading-md);
+}
+
+/* A FIXED 96px LABEL COLUMN, so every control starts on one edge and five
+   rows read as one form rather than five sentences. 32 tall: the field
+   height the selects take. */
+.export-row {
+  display: flex;
+  align-items: center;
+  gap: var(--space-7);
+  min-height: var(--button-h);
+}
+
+.export-label {
+  flex: none;
+  width: 96px;
+  color: var(--ink-2);
+}
+
+/* The format and destination switches take the accent chip (`.is-accent`)
+   and size to their options, not to the row: a two-chip track stretched to
+   the full lane reads as a slider. A grid, so both chips are the width of the
+   longer label and the switch stays symmetric.
+   PAPER'S FORM TRACK, not the toolbar one: 32 tall like the selects beside
+   it, with 28px chips. That size is the shared `.segmented.is-lg`, which the
+   dialog passes; only the width rules live here. Every rule here is
+   `.segmented.export-switch` (three classes on the items): the shared
+   `.segmented .segmented-item` is two, and a tie would leave the answer to
+   whichever sheet loads last. */
+.segmented.export-switch {
+  flex: none;
+  display: inline-grid;
+  grid-auto-flow: column;
+  grid-auto-columns: 1fr;
+}
+
+.segmented.export-switch .segmented-item {
+  min-width: 80px;
+}
+
+/* Paper's destination chips are 156 wide, so "This browser" and "Studio
+   server" sit in a track that reads as a place, not squeezed to their text. */
+.segmented.export-switch.is-destination .segmented-item {
+  min-width: 156px;
+}
+
+/* PAPER'S FORM SELECT: the shared 32px `.select.is-field` at the dialog's
+   12/20 type and the 8px card corner, filling its row. Its caret is the house
+   dropdown caret the shared select paints (widgets.css `.field-caret`). */
+.export-select {
+  flex: 1 1 auto;
+  min-width: 0;
+  font-size: var(--type-md);
+  line-height: var(--leading-md);
+  border-radius: var(--radius-tab);
+}
+
+.export-audio {
+  display: flex;
+  align-items: center;
+  gap: var(--space-4);
+  min-width: 0;
+}
+
+.export-audio-hint {
+  color: var(--ink-3);
+}
+
+/* The quiet notes (a capability, an omitted transition, a render's warning).
+   Dim rather than alarming: each says why the file differs from the
+   timeline, and none of them is a failure. */
+.export-note {
+  margin: 0;
+  color: var(--ink-3);
+  line-height: var(--leading-body);
+}
+
+/* THE ESTIMATE IS A HAIRLINE BLOCK, not a filled tile: the same label column
+   as the rows above it, between two strong lines. */
+.export-estimate {
+  display: grid;
+  grid-template-columns: 96px minmax(0, 1fr);
+  gap: var(--space-4) var(--space-7);
+  margin: 0;
+  padding-block: var(--space-7);
+  border-block: 1px solid var(--line-strong);
+}
+
+.export-estimate dt {
+  color: var(--ink-2);
+}
+
+.export-estimate dd {
+  margin: 0;
+  min-width: 0;
+  font-weight: var(--weight-medium);
+  color: var(--ink-1);
+  font-variant-numeric: var(--numeric);
+  /* Wraps rather than clips. The range strings are the whole value of the
+     row, and half a range is a wrong number rather than a short one. */
+  overflow-wrap: anywhere;
+}
+
+/* The card's slot is the dialog's polite live region (ExportDialog.tsx), so
+   it is in the DOM even with no card. Empty, it would still cost one 16px
+   flex gap under the estimate; the negative margin hands that gap back. */
+.export-outcome-slot {
+  display: flex;
+  flex-direction: column;
+}
+
+.export-outcome-slot:empty {
+  margin-block-start: calc(-1 * var(--space-7));
+}
+
+/* ONE OUTCOME CARD: rendering, saved, cancelled or failed. Sunken, so it
+   reads as the dialog's report rather than as another control. */
+.export-outcome {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-6);
+  padding: var(--space-7);
+  background: var(--surface-sunken);
+  border: 1px solid var(--line-strong);
+  border-radius: var(--radius-tab);
+}
+
+.export-outcome-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-6);
+}
+
+.export-outcome-title {
+  font-weight: var(--weight-medium);
+  color: var(--ink-1);
+}
+
+/* Blue is a signal: the one live state takes the accent ink, and a finished
+   run (failed included) stays ink. */
+.export-outcome.is-rendering .export-outcome-title {
+  color: var(--accent-ink);
+}
+
+/* The card's Cancel: a `.btn` at the 28px control height with the smaller
+   corner, so it sits inside the card's padding rather than crowding it. */
+.export-outcome-cancel {
+  flex: none;
+  height: var(--control-h);
+  border-radius: var(--radius-sm);
+  font-weight: var(--weight-regular);
+}
+
+.export-outcome-copy {
+  margin: 0;
+  color: var(--ink-2);
+  overflow-wrap: anywhere;
+}
+
+/* The UA's marker triangle takes neither a token colour nor Paper's 12px, so
+   the summary draws its own chevron and hides the marker in both engines. */
+.export-log summary {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-4);
+  color: var(--ink-1);
+  cursor: pointer;
+  list-style: none;
+  border-radius: var(--radius-xs);
+}
+
+.export-log summary::-webkit-details-marker {
+  display: none;
+}
+
+.export-log summary:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
+
+.export-log-chevron {
+  flex: none;
+  width: 12px;
+  height: 12px;
+  fill: none;
+  stroke: var(--ink-2);
+  stroke-width: 1.5;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  transition: transform var(--dur-fast) var(--ease);
+}
+
+.export-log[open] .export-log-chevron {
+  transform: rotate(180deg);
+}
+
+.export-log pre {
+  max-height: 180px;
+  margin: var(--space-4) 0 0;
+  padding: var(--space-4) var(--space-5);
+  overflow: auto;
+  color: var(--ink-2);
+  font: var(--type-micro)/var(--leading-none) var(--font-mono);
+  line-height: var(--leading-body);
+  white-space: pre-wrap;
+  word-break: break-word;
+  background: var(--fill-rest);
+  border-radius: var(--radius-sm);
+}
+
+/* ---- the manual and the material picker ----------------------------------
+   The WIDTH GOES ON THE DIALOG, not on its body: widening the body only
+   overflows the box and clips its contents.
+
+   The manual: a shortcut row is a sentence plus a kbd on ONE line, and at
+   the shared 320px every one of the fifty-six wraps.
+   `.dialog-body` already carries `overflow: auto; min-height: 0`, so the
+   max-height is what makes the long reference scroll inside the dialog rather
+   than off the bottom of the viewport. */
+.dialog.shot-help-dialog {
+  width: 560px;
+  max-height: 80vh;
+}
+
+/* The saved video's two actions under the Saved line (hosted only). */
+.export-share-links {
+  display: flex;
+  gap: var(--space-7);
+}
+
+/* Preferences (gap 5, Paper "PreferencesDialog / dark"): 500 wide, a section
+   per hairline, a label and hint on the left of each row and its control on
+   the right. Built on the wide dialog for its close X, with its own padding. */
+.dialog.is-wide.prefs-dialog {
+  width: 500px;
+  max-height: 80vh;
+  gap: var(--space-4);
+  padding: var(--space-7) var(--space-8);
+}
+.dialog.is-wide.prefs-dialog .dialog-title {
+  font-size: var(--type-title);
+}
+.dialog.is-wide.prefs-dialog .dialog-close {
+  top: var(--space-6);
+  right: var(--space-7);
+}
+.prefs-title {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-4);
+}
+.prefs-kbd {
+  font: inherit;
+  font-size: var(--type-micro);
+  font-weight: var(--weight-regular);
+  color: var(--ink-3);
+  background: var(--fill-state-soft);
+  border-radius: var(--radius-xs);
+  padding: var(--space-1) var(--space-3);
+}
+.prefs-body {
+  display: flex;
+  flex-direction: column;
+}
+.prefs-section {
+  display: flex;
+  flex-direction: column;
+  padding: var(--space-4) 0 var(--space-2);
+  border-top: 1px solid var(--line);
+}
+.prefs-section-label {
+  padding-bottom: var(--space-2);
+  font-size: var(--type-sm);
+  font-weight: var(--weight-semibold);
+  color: var(--ink-2);
+}
+.prefs-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-6);
+  min-height: calc(var(--control-h) + var(--space-3));
+  padding: var(--space-2) 0;
+}
+.prefs-row-text {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+  min-width: 0;
+}
+.prefs-row-label {
+  font-size: var(--type-md);
+  color: var(--ink-1);
+}
+.prefs-row-hint {
+  font-size: var(--type-sm);
+  color: var(--ink-3);
+}
+.prefs-row-control {
+  flex: none;
+}
+/* Equal chips sized to the LONGEST label. The shared track splits a
+   content-sized width with `flex: 1 1 0`, which clipped "When they fit"
+   whenever "Off" held the semibold weight. */
+.prefs-row-control .segmented {
+  display: inline-grid;
+  grid-auto-flow: column;
+  grid-auto-columns: 1fr;
+}
+.dialog.prefs-dialog .dialog-actions {
+  justify-content: space-between;
+  padding-top: var(--space-6);
+  border-top: 1px solid var(--line);
+}
+.prefs-footnote {
+  font-size: var(--type-sm);
+  color: var(--ink-3);
+}
+
+/* "THE STORYBOARD IS READY": an agent's question (AgentQuestionDialog.tsx).
+   The summary is the agent's lines, drawn as text: kept as written, wrapped,
+   and scrolled past a few lines so the actions stay in view. */
+.agent-question-summary {
+  max-height: 240px;
+  margin: 0;
+  overflow: auto;
+  padding: var(--space-4);
+  font-family: var(--font-sans);
+  font-size: var(--type-sm);
+  color: var(--ink-1);
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  background: var(--surface-secondary);
+  border: 1px solid var(--line);
+  border-radius: var(--radius-sm);
+}
+
+.agent-question-who {
+  margin: 0;
+  font-size: var(--type-sm);
+  color: var(--ink-3);
+}
+
+.agent-question-stale {
+  margin: 0;
+  font-size: var(--type-sm);
+  color: var(--warn);
+}
+
+.agent-question-note {
+  resize: none;
+}
+
+/* The credits an export owes (v49): the note, then the exact lines, which
+   are copied as they are, so they wrap but never reflow into one line. */
+.export-credits {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+}
+
+.export-credits-text {
+  margin: 0;
+  max-height: 120px;
+  overflow-y: auto;
+  padding: var(--space-4);
+  font-family: inherit;
+  font-size: var(--type-md);
+  line-height: var(--leading-sm);
+  color: var(--ink-2);
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  background: var(--surface-well);
+  border: 1px solid var(--line);
+  border-radius: var(--radius-sm);
+}