@dailies-studio/shot-editor 0.1.0 → 0.2.0

package/src/styles/shot-brief.css

@@ -0,0 +1,360 @@
+/* THE STUDIO'S BRIEF TAB (S4, Paper SB6, ShotBrief): the board's plan for the
+   Shot under the playhead, its sketches handed over as layers or a guide, then
+   the send-back footer pinned to the column's foot. */
+
+.inspector-column > .shot-brief {
+  flex: 1 1 auto;
+  min-height: 0;
+}
+
+.shot-brief {
+  display: flex;
+  flex-direction: column;
+}
+
+/* 12/16 with a 12 gap, on the space scale. The scroller holds its gutter,
+   so a Brief that grows past the fold does not narrow every row. */
+.shot-brief-body {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+  scrollbar-gutter: stable;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-6);
+  padding: var(--space-6) var(--space-7);
+}
+
+.shot-brief-head {
+  display: flex;
+  align-items: center;
+  gap: var(--space-4);
+  font-size: var(--type-md);
+  line-height: var(--leading-xs);
+}
+
+.shot-brief-from {
+  flex: 1;
+  color: var(--ink-3);
+}
+
+.shot-brief-link {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  padding: 0;
+  border: 0;
+  background: none;
+  font: inherit;
+  font-size: var(--type-md);
+  line-height: var(--leading-xs);
+  font-weight: var(--weight-medium);
+  color: var(--accent-ink);
+  cursor: pointer;
+}
+
+.shot-brief-link > svg {
+  width: 12px;
+  height: 12px;
+  flex: none;
+}
+
+.shot-brief-link:hover { text-decoration: underline; }
+.shot-brief-link:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-2xs); }
+
+.shot-brief-empty {
+  margin: 0;
+  padding: var(--space-6) var(--space-7);
+  font-size: var(--type-lg);
+  line-height: var(--leading-md);
+  color: var(--ink-3);
+}
+
+.shot-brief > .shot-brief-head {
+  padding: var(--space-6) var(--space-7) 0;
+}
+
+/* ---- where it came from: the head, then the name and the lengths ---------- */
+.shot-brief-origin {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+}
+
+.shot-brief-shot {
+  display: flex;
+  align-items: baseline;
+  gap: var(--space-4);
+  min-width: 0;
+}
+
+.shot-brief-name {
+  min-width: 0;
+  font-size: var(--type-xl);
+  line-height: var(--leading-lg);
+  font-weight: var(--weight-semibold);
+  color: var(--ink-1);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.shot-brief-length {
+  flex: none;
+  font-family: var(--font-numeric);
+  font-size: var(--type-md);
+  line-height: var(--leading-xs);
+  color: var(--ink-3);
+}
+
+/* ---- the sketches: thumbs in a row, each with its label and time --------- */
+.shot-brief-sketches {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: flex;
+  gap: var(--space-4);
+}
+
+.shot-brief-sketch-item {
+  flex: 1 1 0;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+}
+
+/* A press picks the sketch Lay out copies; the guide's sketch is dashed. */
+.shot-brief-thumb {
+  display: block;
+  width: 100%;
+  padding: 0;
+  border: 1px solid var(--line);
+  border-radius: var(--radius-sm);
+  background: var(--sketch-paper);
+  overflow: hidden;
+  cursor: pointer;
+}
+
+.shot-brief-thumb[aria-pressed="true"] { border-color: var(--accent); }
+.shot-brief-thumb[data-guide] { border-style: dashed; border-color: var(--accent); }
+.shot-brief-thumb:focus-visible { outline: none; box-shadow: var(--focus-ring); }
+
+.shot-brief-sketch-label {
+  display: flex;
+  align-items: baseline;
+  gap: var(--space-3);
+  min-width: 0;
+}
+
+.shot-brief-sketch-name {
+  min-width: 0;
+  font-size: var(--type-md);
+  line-height: var(--leading-xs);
+  font-weight: var(--weight-medium);
+  color: var(--ink-1);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.shot-brief-sketch-time {
+  flex: none;
+  font-family: var(--font-numeric);
+  font-size: var(--type-sm);
+  line-height: var(--leading-xs);
+  color: var(--ink-3);
+}
+
+/* ---- lay out (the guide is an InspectorRow: the house row draws it) ------- */
+.shot-brief-layout {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+}
+
+.shot-brief-layout-run {
+  width: 100%;
+  gap: var(--space-3);
+}
+
+.shot-brief-layout-run > svg {
+  width: 16px;
+  height: 16px;
+  flex: none;
+}
+
+.shot-brief-help {
+  margin: 0;
+  font-size: var(--type-md);
+  line-height: var(--leading-sm);
+  color: var(--ink-3);
+}
+
+/* ---- the words ------------------------------------------------------------ */
+.shot-brief-section {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+
+.shot-brief-section.is-pinned { gap: var(--space-3); }
+
+/* What we see opens the plan's words under a soft rule (SB6). */
+.shot-brief-section.is-words {
+  padding-top: var(--space-6);
+  border-top: 1px solid var(--line-soft);
+}
+
+.shot-brief-caps {
+  margin: 0;
+  font-size: var(--type-sm);
+  line-height: var(--leading-xs);
+  font-weight: var(--weight-semibold);
+  letter-spacing: var(--tracking-caps);
+  text-transform: uppercase;
+  color: var(--ink-3);
+}
+
+.shot-brief-text {
+  margin: 0;
+  font-size: var(--type-lg);
+  line-height: var(--leading-md);
+  color: var(--ink-2);
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+.shot-brief-voice {
+  margin: 0;
+  font-size: var(--type-lg);
+  line-height: var(--leading-xs);
+  color: var(--ink-1);
+  overflow-wrap: anywhere;
+}
+
+.shot-brief-none {
+  margin: 0;
+  font-size: var(--type-md);
+  line-height: var(--leading-xs);
+  color: var(--ink-3);
+}
+
+/* ---- pinned to this shot: 32 rows, the D4 checklist ----------------------- */
+.shot-brief-pins {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+}
+
+.shot-brief-pin {
+  display: flex;
+  align-items: center;
+  gap: var(--space-4);
+  height: var(--row-h-shot);
+}
+
+.shot-brief-pin-thumb {
+  flex: none;
+  display: grid;
+  place-items: center;
+  width: 28px;
+  height: 20px;
+  border-radius: var(--radius-xs);
+  background: var(--surface-secondary);
+  overflow: hidden;
+  font-size: var(--type-micro);
+  line-height: var(--leading-xs);
+  color: var(--ink-2);
+}
+
+.shot-brief-pin-thumb > img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.shot-brief-pin-name {
+  flex: 1;
+  min-width: 0;
+  font-size: var(--type-lg);
+  line-height: var(--leading-xs);
+  color: var(--ink-1);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.shot-brief-pin-tag {
+  flex: none;
+  font-size: var(--type-sm);
+  line-height: var(--leading-xs);
+  color: var(--ink-3);
+}
+
+/* Must is a requirement, in the accent ink (G1 04), never the Building
+   orange. */
+.shot-brief-pin-tag.is-must { color: var(--accent-ink); }
+
+/* Ticked is the success fill, the board's Built colour (D4: it is in). */
+.shot-brief-pin-check:checked {
+  background: var(--success);
+  border-color: var(--success);
+}
+
+/* ---- the Style summary ---------------------------------------------------- */
+.shot-brief-style {
+  display: flex;
+  align-items: center;
+  gap: var(--space-4);
+  padding: var(--space-5) var(--space-6);
+  border: 1px solid var(--line);
+  border-radius: var(--radius-tab);
+  /* Sunken under the panel, as Paper SB6 draws it. */
+  background: var(--surface-app);
+}
+
+.shot-brief-style-name {
+  flex: none;
+  font-size: var(--type-md);
+  line-height: var(--leading-xs);
+  font-weight: var(--weight-medium);
+  color: var(--ink-1);
+}
+
+.shot-brief-style-text {
+  flex: 1;
+  min-width: 0;
+  font-size: var(--type-lg);
+  line-height: var(--leading-xs);
+  color: var(--ink-2);
+}
+
+/* ---- send back ------------------------------------------------------------ */
+.shot-brief-foot {
+  flex: none;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+  padding: var(--space-6) var(--space-7);
+  border-top: 1px solid var(--line);
+}
+
+.shot-brief-foot-text {
+  margin: 0;
+  font-size: var(--type-md);
+  line-height: var(--leading-sm);
+  color: var(--ink-3);
+}
+
+.shot-brief-mark { width: 100%; }
+
+.shot-brief-actions {
+  display: flex;
+  gap: var(--space-4);
+}
+
+.shot-brief-actions > .btn { flex: 1; }

package/src/styles/states.css

@@ -0,0 +1,76 @@
+/* What is playing: the live state every bar shares. In the overrides layer so it outranks every region, which is what its old place at the very end of the sheet was for. */
+
+/* ---- what is playing ----------------------------------------------------
+   THE ONE LIVE STATE IN THE TIMELINE, and the last word on every bar it can
+   reach. A clip is SOLID ACCENT with white 600 type while the playhead is
+   inside it, and the light option A wash the moment it is not, so an author
+   scrubbing a forty-row document reads what is on screen off the strip
+   instead of tracing the playhead down it. Its row's label lifts to 600 ink.
+
+   IN THE OVERRIDES LAYER ON PURPOSE. Several of these compete with rules that
+   are more specific than a two-class selector (a hover on the row, a selected
+   clip's edge). The layer outranks every chrome rule outright, whatever its
+   specificity. Do not move this file into the chrome layer: that is how the
+   highlight silently stops surviving a hover.
+
+   `--bar-live` is the token (shotTokens.css), and it is the accent: the live
+   fill is the one solid accent in the lane, so it cannot mean two things.
+
+   Selection survives all of it, because selection is the EDGE and the white
+   trim handles, never the fill. "The thing the inspector is about" and "the
+   thing you are watching" are two facts an author holds at once, and they are
+   rarely the same clip. Selected and live is the solid fill with the white
+   handles. */
+.shot-bar.is-current,
+.lifespan-row .lifespan-bar.is-live,
+.block-bar.is-live {
+  background: var(--bar-live);
+  border-color: var(--bar-live);
+  color: var(--on-accent);
+}
+
+.shot-bar.is-current .shot-bar-name,
+.lifespan-row .lifespan-bar.is-live .lifespan-bar-name,
+.block-bar.is-live .block-label {
+  font-weight: var(--weight-semibold);
+}
+
+/* THE ROW SAYS IT TOO: the live clip's label at 600 in full ink. */
+.lifespan-row.is-live .lifespan-name {
+  font-weight: var(--weight-semibold);
+  color: var(--ink-1);
+}
+
+/* A mask's dashed edge stays visible on the solid fill, in the white of its
+   type: the dash is what says the bar paints nothing (gap 7), and a mask in
+   play is exactly when that matters. */
+.lifespan-row .lifespan-bar.is-live.is-mask {
+  border-color: var(--on-accent);
+}
+
+/* A VIDEO CLIP's picture and waveform fill its box, so a solid fill would sit
+   behind the footage and say nothing; it keeps its ground, and its row's 600
+   label carries the live state. */
+.lifespan-row .lifespan-bar.is-live.is-video {
+  background: var(--bar-ground);
+  color: var(--ink-1);
+}
+
+/* THE CAMERA LANE draws no bars, only its line and its poses (timeline-rows.css),
+   and an accent pose on an accent fill would vanish. */
+.block-row.is-camera .block-bar.is-live {
+  background: transparent;
+  border-color: transparent;
+  color: inherit;
+}
+
+.block-row.is-camera .block-bar.is-live.is-selected {
+  border-color: var(--accent);
+}
+
+/* And a live clip still answers the pointer, one step lighter rather than
+   falling back to the rest hover it just overrode. */
+.shot-bar.is-current:hover,
+.lifespan-row:hover .lifespan-bar.is-live:not(.is-video) {
+  background: color-mix(in oklab, var(--bar-live) 88%, var(--on-accent));
+}