@dailies-studio/shot-editor 0.1.0 → 0.2.0

package/src/styles/inspector-shot.css

@@ -0,0 +1,252 @@
+/* The inspector's shot context: the effects list and its add menu, the
+   camera's key diamond, the shader background button's glyph, and Make it
+   yours' field rows. Imported
+   right after inspector.css, in the same layer. Every field, every row of
+   buttons and every readout in these sections is the house's (ui
+   widgets.css); nothing here restates one. */
+
+.effect-row + .effect-row {
+  margin-top: 1px;
+}
+
+/* The params of a switched-on effect, indented under their head so the
+   grouping is visible without a box around every effect. */
+/* WRAPS at two per line. A single flex row put CRT's and Glitch's three
+   params into ~190px, which is the same squeeze that turned the camera's
+   Zoom / Roll / Focus into "Z…", "R…", "F…": one rule, two symptoms. The
+   basis is just under half so two fit and a third is pushed down. Rows and
+   the two of a pair sit 6px apart, the inspector's one rhythm. */
+.effect-params {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-3);
+  padding: var(--space-1) 0 var(--space-5) var(--space-5);
+  border-left: 1px solid var(--line-soft);
+  margin-left: var(--space-1);
+}
+
+.effect-params > * {
+  flex: 1 1 calc(50% - var(--space-3));
+  min-width: 0;
+}
+
+/* A vector param (Grade's Lift, Gamma and Gain, a ghost's shift, a ray
+   centre) is one labelled box across the whole line. */
+.effect-params > .effect-param.is-vec {
+  flex-basis: 100%;
+}
+
+/* ---- effects, as a list of what is ON ----------------------------------- */
+/* Sixteen permanent toggle rows made the section ~630px tall and made "which
+   effects does this shot have" a reading task rather than a glance. The list
+   is what is enabled; the rest live behind the header's add menu. */
+.effect-head {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  min-height: var(--row-h);
+  padding-right: 1px;
+}
+
+.effect-head-label {
+  flex: 1;
+  min-width: 0;
+  color: var(--ink-1);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* The remove (the house `.insp-key.is-danger`) stands where the diamonds in
+   the boxes below it stand, 5px in from the edge: a box's accessory lane ends
+   inside its 1px border and its 8px padding, less the lane's 4px tuck. The
+   head has no box, so it takes the border's 1px as padding (`.effect-head`
+   above) and the key takes the rest (8 less 4) as its margin. */
+.effect-head > .insp-key {
+  margin-right: var(--space-2);
+}
+
+/* The add menu. Grouped, because sixteen effects in one flat column is the
+   list we just took off the panel. */
+.effect-add-menu {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  padding: var(--space-2);
+  min-width: 180px;
+}
+
+.effect-add-group {
+  color: var(--ink-3);
+  text-transform: uppercase;
+  letter-spacing: var(--tracking-caps);
+  font-size: var(--type-micro);
+  font-weight: var(--weight-semibold);
+  padding: var(--space-2) var(--space-2) var(--space-1);
+}
+
+.effect-add-group:first-child {
+  padding-top: 0;
+}
+
+.effect-add-item {
+  display: flex;
+  align-items: center;
+  font: inherit;
+  text-align: left;
+  color: var(--ink-1);
+  background: transparent;
+  border: 0;
+  border-radius: var(--radius-xs);
+  padding: var(--space-2);
+  cursor: pointer;
+}
+
+.effect-add-item:hover {
+  background: var(--fill-rest);
+}
+
+/* ---- the camera's key diamond -------------------------------------------- */
+/* Inside each camera field, as its accessory: the house in-field key
+   (`.insp-key`, ui widgets.css), the property diamond's 16px box and 10px
+   glyph, in the camera's own signal. The ACCENT and not `--kf`, the camera's
+   documented exception: `--kf` says a property has a keyframe on a track, and
+   a camera pose is not one (CameraSection). Its state is `data-camera-state`
+   rather than the property diamond's `is-keyed` / `is-tracked`, which would
+   set the field's value in `--kf` (ui's value-ink rule).
+
+   Static is the house key at rest (the hollow glyph in the third ink);
+   animated is the accent edge with a dot in it; keyed is the filled accent,
+   with no hover lift, as a keyed property diamond has none. */
+.insp-key.is-camera[data-camera-state="animated"],
+.insp-key.is-camera[data-camera-state="keyed"],
+.insp-key.is-camera[data-camera-state="keyed"]:hover {
+  color: var(--accent);
+}
+
+.insp-key.is-camera[data-camera-state="keyed"],
+.insp-key.is-camera[data-camera-state="keyed"]:hover {
+  background: transparent;
+}
+
+.insp-key.is-camera[data-camera-state="animated"] {
+  position: relative;
+}
+
+.insp-key.is-camera[data-camera-state="animated"]::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  width: 3px;
+  height: 3px;
+  margin: auto;
+  background: var(--accent);
+  transform: rotate(45deg);
+}
+
+/* A value that changes between the camera's poses reads in the accent ink,
+   off its own box's diamond, the way an animated property's value reads in
+   `--kf` off its box's diamond. It keys on `data-camera-animated`, not on the
+   "animated" state: on a pose the state is "keyed" for every field, and a
+   rule on the state dropped the ink each time the playhead crossed one. */
+.numfield:has(> .field-accessory > .insp-key.is-camera[data-camera-animated]) .numfield-input,
+.range-field:has(> .field-accessory > .insp-key.is-camera[data-camera-animated]) .numfield-input {
+  color: var(--accent-ink);
+}
+
+/* "· 2 keyed" beside the section title. */
+.camera-field-key-count {
+  color: var(--accent-ink);
+  font-size: var(--type-sm);
+  font-weight: var(--weight-regular);
+}
+
+/* "Shader background…" under the Shot's Background rows, on the house row
+   of buttons (`.insp-buttons`): the sparkles glyph in secondary ink beside
+   its words (Paper page 27, artboard 5). */
+.shot-shader-button svg {
+  width: 12px;
+  height: 12px;
+  flex: none;
+  color: var(--ink-2);
+}
+
+/* ---- Make it yours: one row per template field ------------------------------
+   The field's picture (media only), its name over where it lives, and its
+   verb; a text field's box takes the line under them. Rows sit 6px apart, the
+   inspector's one rhythm. */
+.make-it-yours {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+}
+
+.make-it-yours-row {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+
+.make-it-yours-head {
+  display: flex;
+  align-items: center;
+  gap: var(--space-4);
+  min-height: var(--control-h);
+}
+
+.make-it-yours-thumb {
+  flex: none;
+  width: 40px;
+  height: var(--control-h);
+  border-radius: var(--radius-xs);
+  background: var(--surface-secondary);
+  overflow: hidden;
+}
+
+.make-it-yours-media {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+/* The name is the way to the layer: a row name at rest, underlined under the
+   pointer like the inspector's other links, and the focus ring on keys. */
+.make-it-yours-name {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  padding: 0;
+  border: 0;
+  background: none;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.make-it-yours-name:hover .make-it-yours-label { text-decoration: underline; }
+.make-it-yours-name:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-2xs); }
+
+.make-it-yours-label,
+.make-it-yours-where {
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  line-height: var(--leading-xs);
+}
+
+.make-it-yours-label {
+  font-size: var(--type-lg);
+  color: var(--ink-1);
+}
+
+.make-it-yours-where {
+  font-size: var(--type-sm);
+  color: var(--ink-3);
+}

package/src/styles/inspector.css

@@ -0,0 +1,360 @@
+/* The inspector: the column, its head and footer, the subject line, the scroller, the sections and what every context shares. Shot-only rules are in inspector-shot.css, object-only rules in inspector-object.css. */
+
+/* ---- inspector ---------------------------------------------------------- */
+/* One right column, two occupants. The column is the cell: docked under the
+   top bar, down to the timeline, its seam on the left. The occupants share it
+   and nothing else: the inspector is a scrolling stack of sections, the agent
+   drawer is a flex column that scrolls only its transcript and pins its
+   composer to the bottom. Each fills what the column leaves it, and the
+   `min-height: 0` is what lets it scroll inside the column instead of
+   growing past it. */
+.inspector-column {
+  grid-column: insp-l / edge-r;
+  grid-row: main-t / main-b;
+  display: flex;
+  flex-direction: column;
+  background: var(--surface-panel);
+  border-left: 1px solid var(--line);
+}
+
+/* THE COLUMN'S HEAD, above either occupant: the Brief | Inspector | Comments
+   | Agent switch. The one panel head (`.panel-head`, G1 01), so its bottom
+   edge is the canvas bar's and the left column's, and one hairline crosses
+   the window. Its one control spans it, 8 in from each side (Paper SB6). */
+.inspector-column > .column-head {
+  padding: 0 var(--space-4);
+}
+/* Four words share the switch, and a chip never shrinks below its words and
+   padding. At the house 12px a side they need about 282px, and the column's
+   264px floor leaves the track 247: Agent ran 25px off the window at 1024.
+   At 6px a side they need about 234px. The chips are still equal while the
+   track has room, so a wider column looks the same. */
+.inspector-column > .column-head .segmented .segmented-item {
+  padding-inline: var(--space-3);
+}
+
+/* THE STATUS FOOTER (InspectorFooter), pinned under the scroller: what the
+   inspector is looking at, said as facts. The subject on the left, its length
+   and rate on the right in the numeric face. On the head's ground, at Paper's
+   48: the tool footer's height, so the two bottom bands meet in one line. */
+.inspector-footer {
+  flex: none;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-4);
+  height: var(--panel-foot-h);
+  padding: 0 var(--space-6);
+  background: var(--surface-panel);
+  border-top: 1px solid var(--line);
+  font-size: var(--type-md);
+  line-height: var(--leading-xs);
+}
+
+.inspector-footer-subject {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-weight: var(--weight-semibold);
+  color: var(--ink-1);
+}
+
+.inspector-footer-meta {
+  flex: none;
+  font-family: var(--font-numeric);
+  font-variant-numeric: tabular-nums;
+  font-size: var(--type-sm);
+  color: var(--ink-3);
+}
+
+.inspector-column > .inspector,
+.inspector-column > .agent-panel {
+  flex: 1 1 auto;
+  min-height: 0;
+}
+
+/* The subject line fixed on top and one scroller under it. The aside itself
+   neither scrolls nor pads, so the sections run edge to edge. */
+.inspector {
+  display: flex;
+  flex-direction: column;
+}
+
+/* `stable` holds the gutter while the stack is short, so a section that grows
+   past the fold does not narrow every row under the pointer. */
+.inspector-body {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow: auto;
+  scrollbar-gutter: stable;
+}
+
+/* FULL-BLEED SECTIONS, scoped to the column: `.insp-section` lives in
+   packages/ui and the retired editor shares it.
+
+   FLAT, NOT CARDS: Paper draws the stack as full-width rows on the panel
+   ground with one hairline BETWEEN sections, so the first one sits straight
+   under the head's own seam.
+
+   PAPER'S SECTION (page 27): 12 all round and 8 between the title row and
+   the rows. The title row is 16 tall (the 12/600 title on its 16 line), so a
+   closed section is 12 + 16 + 12 = 40. The rows themselves sit 6 apart, the
+   house rhythm (ui `.insp-section-body`). */
+.inspector-column .insp-section {
+  gap: var(--space-4);
+  padding: var(--space-6);
+  border-bottom: 0;
+}
+
+.inspector-column .insp-section + .insp-section {
+  border-top: 1px solid var(--line);
+}
+
+/* The 16px row holds the 20px `+` too: it overflows the row by 2 each side
+   rather than growing every section's title row by 4. */
+.inspector-column .insp-section-headrow {
+  height: 16px;
+}
+
+/* One title face open or closed: 12/600 on 16. No icon (Paper draws none),
+   the chevron on the right at 12 in the third ink. */
+.inspector-column .insp-section-header,
+.inspector-column .insp-section.is-collapsed .insp-section-header {
+  min-height: 0;
+  height: 16px;
+  gap: var(--space-4);
+  font-size: var(--type-md);
+  font-weight: var(--weight-semibold);
+  line-height: var(--leading-xs);
+}
+
+.inspector-column .insp-section-icon {
+  display: none;
+}
+
+.inspector-column .insp-section-disclosure {
+  width: 12px;
+  height: 12px;
+  color: var(--ink-3);
+}
+
+.inspector-column .insp-section-header:hover:not(.is-static) .insp-section-disclosure {
+  color: var(--ink-2);
+}
+
+/* The title and its note ("· 2 keyed") on one line, 6 apart. */
+.inspector-column .insp-section-titles {
+  flex-direction: row;
+  align-items: baseline;
+  gap: var(--space-3);
+}
+
+.inspector-column .insp-section-note {
+  flex: none;
+  white-space: nowrap;
+}
+
+/* A closed section's facts: 11 in the third ink, before the chevron. */
+.inspector-column .insp-section-summary {
+  font-size: var(--type-sm);
+  line-height: var(--leading-xs);
+  color: var(--ink-3);
+}
+
+/* The rows sit 8 under the title row, and that 8 is the SECTION's gap, so the
+   body drops the house 6px it would add on top. Between rows it keeps the
+   house 6 (ui `.insp-section-body`, the rhythm every panel's rows share). */
+.inspector-column .insp-section-body {
+  padding-top: 0;
+}
+
+/* SUB-HEADINGS, not titles: "Recording sound".
+   Caps micro in the third ink, so none reads as a section title. Scoped for
+   the same reason as the sections. */
+.inspector-column .insp-heading {
+  min-height: 24px;
+  font-size: var(--type-micro);
+  font-weight: var(--weight-semibold);
+  letter-spacing: var(--tracking-caps);
+  text-transform: uppercase;
+  color: var(--ink-3);
+}
+
+/* A frame range in a sub-heading keeps its case: "f12" is a frame. */
+.inspector-column .insp-heading .insp-dim {
+  text-transform: none;
+}
+
+/* ONE EMPTY STATE for every section: what is missing and how to add it. */
+.insp-empty {
+  margin: 0;
+  font-size: var(--type-md);
+  line-height: var(--leading-body);
+  color: var(--ink-2);
+}
+
+/* A section's own aside: a fact about the value above it, not a warning. */
+.insp-note {
+  margin: 0;
+  font-size: var(--type-sm);
+  line-height: var(--leading-body);
+  color: var(--ink-3);
+}
+
+/* agent.css's own `.agent-panel { height: 100% }` is written for a host that
+   sizes it; here the column does, and `auto` lets the flex item take what the
+   column leaves it. The chrome layer outranks agent.css's component-sheets
+   layer, so this wins at any specificity. */
+.inspector-column > .agent-panel {
+  height: auto;
+  overflow: hidden;
+  padding: 0;
+}
+
+/* agent.css leaves the title row unpadded because the motion editor wraps it
+   in a padded header. This drawer IS the panel, so the padding belongs here.
+   The column head names the panel, so the row holds only tools: Key, New and
+   close on the right, and the model switch WRAPPED to a full line of its own,
+   because the switch beside three buttons does not fit a 264px column. */
+.inspector-column > .agent-panel > .agent-title {
+  padding: var(--space-5) var(--space-6);
+  border-bottom: 1px solid var(--line-soft);
+  flex: none;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  row-gap: var(--space-3);
+}
+
+.inspector-column > .agent-panel .agent-models {
+  flex: 1 1 100%;
+  order: 1;
+}
+
+.inspector-column > .agent-panel .agent-composer {
+  padding: var(--space-5) var(--space-6);
+  border-top: 1px solid var(--line-soft);
+  flex: none;
+}
+
+
+/* A button that reads as a link: the definition's name in the instance
+   inspector, which navigates rather than edits. */
+.link-button {
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: var(--accent-ink);
+  cursor: pointer;
+  text-align: left;
+}
+
+.link-button:hover {
+  text-decoration: underline;
+}
+
+/* ---- the inspector's head ----------------------------------------------- */
+/* What this panel is describing, said once at the top. Without it the panel
+   showed "Shot / Camera / Effects" in one context and "Transform / Appearance"
+   in another, with nothing naming the subject either set belonged to. */
+/* FIXED above the scroller. Paper's title row: 48 tall, the 28px icon box,
+   then the name over its fact line, 12 in from the column's edge. */
+.insp-head {
+  flex: none;
+  display: flex;
+  align-items: center;
+  gap: var(--space-5);
+  min-width: 0;
+  height: 48px;
+  padding: 0 var(--space-6);
+  border-bottom: 1px solid var(--line);
+}
+
+/* Every subject's glyph sits in the same 28px box on the control fill. */
+.insp-head-icon {
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border-radius: var(--radius-sm);
+  background: var(--fill-rest);
+  color: var(--ink-2);
+}
+
+.insp-head-icon svg {
+  width: 14px;
+  height: 14px;
+}
+
+/* The open shot and a component instance take the accent ink: the place the
+   author is standing in, and a link to a definition. */
+.insp-head-icon.is-tile,
+.insp-head-icon.is-component {
+  color: var(--accent-ink);
+}
+
+.insp-head-text {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  flex: 1;
+}
+
+/* The KIND above the name, because the kind is the stable half: it is what
+   tells you which set of sections you are about to read. */
+.insp-head-kind {
+  color: var(--ink-3);
+  font-size: var(--type-sm);
+  line-height: var(--leading-tight);
+}
+
+.insp-head-name {
+  font-size: var(--type-lg);
+  font-weight: var(--weight-semibold);
+  color: var(--ink-1);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  line-height: var(--leading-xs);
+}
+
+/* The fact line under the shot's name: "Shot 01 · 18.00s". */
+.insp-head-meta {
+  font-size: var(--type-sm);
+  line-height: var(--leading-tight);
+  color: var(--ink-3);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* The name renames in place, so the Name row could leave the Shot section
+   instead of restating the heading two rows below it. Transparent until it is
+   pointed at: a permanent input box at the top of the panel would read as a
+   form field rather than a title. */
+.insp-head-rename {
+  font: inherit;
+  font-size: var(--type-lg);
+  font-weight: var(--weight-semibold);
+  color: var(--ink-1);
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: var(--radius-xs);
+  padding: 0 var(--space-1);
+  margin: 0 calc(-1 * var(--space-1));
+  min-width: 0;
+  width: 100%;
+  line-height: var(--leading-xs);
+}
+
+.insp-head-rename:hover {
+  border-color: var(--line);
+}
+
+.insp-head-rename:focus {
+  outline: none;
+  background: var(--fill-rest);
+  border-color: var(--accent);
+}