@dailies-studio/shot-editor 0.1.0 → 0.2.0

package/src/styles/inspector-board.css

@@ -0,0 +1,207 @@
+/* The transition's inspector rows (scene/TransitionSection.tsx), in Studio's
+   Shot & transition section and in the board's Between: the heading, the
+   preset tiles, the length's seconds, the direction stepper, the seam and
+   the handover notes. A sentence in a read-only row (a requirement's Status
+   reason, a card's Use for and Avoid for) wraps in the house readout
+   (`insp-readout`, widgets.css). Tokens only. */
+
+/* "Transition · into Shot 02": the seam's heading in Studio's Shot &
+   transition section. The far shot is the quieter half. */
+.insp-transition-head {
+  margin: var(--space-3) 0 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font: var(--weight-semibold) var(--type-md)/var(--leading-xs) var(--font-sans);
+  color: var(--ink-1);
+}
+
+.insp-transition-into {
+  font-weight: var(--weight-regular);
+  color: var(--ink-3);
+}
+
+/* Four preset tiles, two by two, the full width of the rail: a picture of
+   the blend over its name. */
+.insp-tiles {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: var(--space-4);
+  width: 100%;
+  min-width: 0;
+}
+
+/* A NAME THAT DOES NOT FIT WRAPS. At a narrow rail "Directional Wipe" can
+   outgrow its tile. The `.btn` is a flex box, so its text would be an
+   anonymous flex item that never draws an ellipsis: the centred name was cut
+   at both edges. Two lines keep every word, and the row grows to hold them. */
+.insp-tile {
+  flex-direction: column;
+  gap: var(--space-3);
+  min-width: 0;
+  height: auto;
+  min-height: var(--button-h);
+  padding: var(--space-6);
+  justify-content: center;
+  text-align: center;
+  white-space: normal;
+  overflow-wrap: anywhere;
+  line-height: var(--leading-tight);
+  font-size: var(--type-sm);
+  color: var(--ink-2);
+  background: var(--surface-secondary);
+  border: 1px solid var(--line);
+  border-radius: var(--radius-sm);
+}
+
+.insp-tile:hover:not(:disabled) {
+  color: var(--ink-1);
+  background: var(--fill-hover);
+}
+
+/* The lit preset: an accent border round a soft accent fill. */
+.insp-tile[aria-pressed="true"],
+.insp-tile[aria-pressed="true"]:hover:not(:disabled) {
+  color: var(--accent-ink);
+  background: var(--accent-quiet);
+  border-color: var(--accent);
+}
+
+.insp-tile-glyph {
+  flex: none;
+  width: 28px;
+  height: 14px;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 1.25;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.insp-tile-glyph .is-b {
+  fill: currentColor;
+  fill-opacity: 0.55;
+}
+
+/* THE LENGTH'S SECONDS, after the frames inside the length's one box (the
+   house field, its NumberField flattened into it): what the frames last,
+   in the numeral face at the unit's size and in the third ink, so it reads
+   as a gloss on the value rather than a second value. Outside the field, so
+   a press on it is not the field's scrub. */
+.insp-length-secs {
+  flex: none;
+  white-space: nowrap;
+  font: var(--type-sm)/var(--leading-xs) var(--font-numeric);
+  font-variant-numeric: var(--numeric);
+  color: var(--ink-3);
+}
+
+.insp-length-secs::before {
+  content: "· ";
+}
+
+/* The direction step: the arrow and the vector it points along, in the
+   numeral face, on the house 28px button row (`.insp-buttons`, widgets.css). */
+.insp-direction {
+  gap: var(--space-3);
+  font-family: var(--font-mono);
+  font-size: var(--type-sm);
+}
+
+.insp-direction-arrow {
+  display: inline-block;
+  line-height: var(--leading-none);
+}
+
+/* THE SEAM, one readout line inside its row's box: the three spans (the
+   lead-in, the blend, the run-out) across what the label leaves, then the
+   reading. Stacked, the track over the reading made the box taller than
+   every other row's. */
+.insp-seam {
+  display: flex;
+  align-items: center;
+  gap: var(--space-4);
+  width: 100%;
+  min-width: 0;
+}
+
+/* The rail in `--line`, the tick slider's rail colour: the box it sits in is
+   already the control ground, and a track on that ground would vanish. */
+.insp-seam-track {
+  display: flex;
+  flex: 1 1 auto;
+  min-width: 0;
+  height: var(--space-3);
+  border-radius: var(--radius-2xs);
+  overflow: hidden;
+  background: var(--line);
+}
+
+.insp-seam-span {
+  flex: none;
+  height: 100%;
+}
+
+.insp-seam-span.is-blend {
+  background: var(--accent);
+}
+
+.insp-seam > .insp-dim {
+  flex: none;
+}
+
+/* The cut's handover notes (TransitionSection.tsx): the headings, the text
+   and the numbered beats. A beat's number wears the warm accent, the way the
+   Paper mock marks what an agent can animate. */
+.notes-block-section {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+
+.notes-block-heading {
+  margin: 0;
+  font-size: var(--type-micro);
+  font-weight: var(--weight-semibold);
+  letter-spacing: var(--tracking-caps);
+  text-transform: uppercase;
+  color: var(--ink-3);
+}
+
+.notes-block-text {
+  margin: 0;
+  font-size: var(--type-md);
+  line-height: var(--leading-body);
+  color: var(--ink-1);
+  white-space: pre-wrap;
+}
+.notes-block-beats {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.notes-block-beat {
+  display: flex;
+  align-items: baseline;
+  gap: var(--space-3);
+  min-width: 0;
+  font-size: var(--type-md);
+  color: var(--ink-1);
+}
+
+.notes-block-number {
+  flex: 0 0 auto;
+  min-width: var(--space-6);
+  font-family: var(--font-numeric);
+  font-size: var(--type-sm);
+  color: var(--accent-warm);
+}
+
+.notes-block-beat-text {
+  flex: 1 1 auto;
+  min-width: 0;
+}

package/src/styles/inspector-object.css

@@ -0,0 +1,486 @@
+/* The inspector's object context: align, paint (the gradient bar, the stops), a prose value's ink, the Animate panel's pad, the expose pin, plate styles, the mesh material rows, the stroke switch, the font field and the mask. The field geometry (the 28px box, the type scale, the 6px rhythm, the colour field, the accessory lane), the inspector's buttons (one in a pill, a row's own, a row of them) and the readout row are the house recipes in packages/ui/src/widgets.css, for every panel alike; nothing here restates them. `.insp-object` is on the root of every object section (the InspectorSection `className`). Imported right after inspector-shot.css, in the same layer. */
+
+/* ---- align / distribute ------------------------------------------------- */
+/* Two rows of five, one per axis: align, centre, align, distribute, flip.
+   Bordered buttons at the house 28px, each a 14px glyph in the second ink. */
+.align-grid {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  gap: var(--space-3);
+  margin: 0;
+}
+
+.align-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: var(--control-h);
+  padding: 0;
+  color: var(--ink-2);
+  background: var(--fill-rest);
+  border: 1px solid var(--line-strong);
+  border-radius: var(--field-radius);
+  cursor: pointer;
+  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
+}
+
+/* The glyph is drawn on the 24 grid and carries no size of its own. */
+.align-button > svg {
+  width: 14px;
+  height: 14px;
+}
+
+.align-button:hover:not(:disabled) {
+  background: var(--fill-hover);
+  color: var(--ink-1);
+}
+
+.align-button:disabled {
+  opacity: var(--opacity-disabled);
+  cursor: default;
+}
+
+.align-button:focus-visible {
+  outline: none;
+  border-color: var(--accent);
+  box-shadow: var(--focus-ring);
+}
+
+/* ---- paint: the gradient bar and its stops ------------------------------ */
+/* THE TYPE CHIPS are the one shared segmented control (ui/widgets.css
+   `.segmented`), and the colour field is the house one (ui ColorField): Fill
+   here, the scene's Background, the dock's Rows | Graph | Sound and the tool
+   footer's view switch all draw the same controls. Nothing below is scoped to
+   an object section, because the shot's Background renders the same
+   PaintRows, and one control drawn two ways would read as two controls. */
+
+/* THE BAR'S RAMP IN THE CANVAS'S SPACE. GradientBar fills its track through
+   an OKLCH preview, and the rasterizer blends sRGB. PaintRows sets
+   `--paint-ramp` as a plain CSS gradient, and this layer covers the bar's
+   fill with it. It sits inside the track, over the checkerboard, so a
+   translucent stop still shows its alpha. */
+.paint-gradient .gradient-bar-track::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: var(--paint-ramp);
+  pointer-events: none;
+}
+
+/* The stop the bar has selected: its box takes the accent wash and edge, so
+   the row and the marker read as one selection. A stop's remove is the house
+   accessory inside that box (`.insp-key.is-danger`), so it needs no look of
+   its own here. */
+.paint-stop.is-selected .insp-pill {
+  background: var(--accent-soft);
+  border-color: var(--accent);
+}
+
+/* A stop's box holds two values, shared by what each holds: the colour is a
+   swatch, six digits and a chevron, and the position a two-letter prefix and
+   at most four characters (0 to 1 in steps of 0.05), about two to one, so the
+   At field grows at half the colour's rate. Shared evenly, the hex was cut to
+   "FF000" at the panel's 264px floor beside an At field holding empty space.
+   A ratio and not a content size: the At field's input would bring its own
+   intrinsic width of twenty characters. */
+.paint-stop .insp-pill .numfield {
+  flex-grow: 0.5;
+}
+
+/* "+ Stop" is the gradient's one way to grow, drawn as Paper's accent chip:
+   the accent wash, an accent edge and accent ink, at the row's right
+   (`.insp-control` already ends its content there). Its 28px and its inset
+   are the house row button's (a row's own button, widgets.css). */
+.paint-add-stop .btn {
+  background: var(--accent-soft);
+  border: 1px solid var(--accent);
+  color: var(--accent-ink);
+  font-size: var(--type-md);
+  font-weight: var(--weight-medium);
+}
+
+/* This layer outranks `.btn:hover`, so the hover is restated: the edge takes
+   the hover accent rather than the wash going grey. */
+.paint-add-stop .btn:hover:not(:disabled) {
+  background: var(--accent-soft);
+  border-color: var(--accent-hover);
+}
+
+/* ---- a prose value ------------------------------------------------------- */
+/* A value in a row that also holds a verb (a source file's name beside
+   Replace…, a module's name) is WORDS: the row's own sans face (`.is-text`)
+   in the second ink the house readout gives its values. The third ink was
+   dimmer than the label naming it. A row that only reads out a value is the
+   house readout (`insp-readout`), which inks its value itself. */
+.insp-object .insp-dim.is-text {
+  color: var(--ink-2);
+}
+
+/* The bezier pad, sharing the shape the other two chromes draw so an ease
+   reads the same everywhere. */
+.insp-pad {
+  display: block;
+  margin: var(--space-3) 0;
+}
+
+.insp-pad-box {
+  fill: none;
+  stroke: var(--line);
+}
+
+.insp-pad-curve {
+  fill: none;
+  stroke: var(--accent);
+  stroke-width: 1.5;
+}
+
+.insp-pad-arm {
+  stroke: var(--line);
+  stroke-width: 1;
+}
+
+.insp-pad-handle {
+  fill: var(--accent);
+  cursor: grab;
+}
+
+
+/* ---- the expose pin ------------------------------------------------------ */
+/* `.insp-key` (ui/widgets.css) carries this button's box and its inks (16px,
+   the third ink at rest, the first under the pointer), because the pin and
+   the diamond sit in one accessory lane inside the field, and two
+   affordances there that rested at different sizes or strengths would read
+   as two kinds of control rather than two verbs on one value. So no ink is
+   set here: a chrome rule outranks the house at any specificity, and one
+   that held the pin at the third ink kept its glyph dark under the pointer
+   while the diamond beside it lit. What it must never take is `--kf`. That
+   token means "this property has a keyframe", and publishing a prop is the
+   opposite claim: the value belongs to whoever places the component, and
+   nothing in this definition animates it. The pin never wears the diamond's
+   tracked or keyed class, so it has no keyed state at all.
+
+   ITS GLYPH IS A CHARACTER, NOT AN SVG, so `.insp-key > svg` does not size
+   it and it took the font of whatever held it: 13px in a field's box, 11px
+   in a ControlSpec row's label column, where a vector's one pin sits. One
+   size wherever it sits, the box's. */
+.insp-expose {
+  font-size: var(--type-lg);
+}
+
+
+/* ---- plate style shelf --------------------------------------------------- */
+/* Six named looks over one grid of chips. A GRID and not a SegmentedControl,
+   because these are not the values of one field: nothing records which was
+   chosen, each is a write of ordinary paint fields the author then owns, and a
+   segmented control would claim a selected state this section cannot honestly
+   show. Two rows of three at the inspector's width, which keeps every label
+   readable without truncating "Outline". */
+.plate-style-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: var(--space-1);
+  width: 100%;
+}
+
+.plate-style-chip {
+  font: inherit;
+  font-size: var(--type-sm);
+  line-height: var(--leading-none);
+  color: var(--ink-2);
+  background: var(--fill-rest);
+  border: 1px solid var(--line);
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  /* A control's height, so the shelf's rows line up with the pills around it. */
+  height: var(--control-h);
+  padding: 0 var(--space-2);
+  text-align: center;
+}
+
+.plate-style-chip:hover:not(:disabled) {
+  color: var(--ink-1);
+  background: var(--fill-hover);
+  border-color: var(--line-strong);
+}
+
+/* A viewer's locked panel: every chip writes paint, so the shelf dims. */
+.plate-style-chip:disabled {
+  opacity: var(--opacity-disabled);
+  cursor: default;
+}
+
+/* The capability's affordance stays visible at rest (design-system rule), so
+   this is a focus ring on top of a chip that is already legible, never the
+   thing that reveals it. */
+.plate-style-chip:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
+
+
+/* ---- re-homed here from other region files (the component that renders
+   these lives in this region) ------------------------------------------ */
+
+/* THE MATERIAL ROW's value: the material's name as a button that opens its
+   nodes, flattened into the row's pill by the house text-input rule like
+   every value in one, and read from the right like them. Its remove is the
+   house accessory in the pill's own lane. */
+.mesh-material-name {
+  min-width: 0;
+  text-align: right;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+/* The model's own materials, one row each. A LIST rather than a dropdown: the
+   author is choosing what to go and edit, not setting a value, and a row can
+   carry the mesh and map counts that say which surface it is. */
+.mesh-slot-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+  padding: var(--space-1) 0 var(--space-3);
+}
+
+.mesh-slot-row {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  min-height: 24px;
+  padding: 0 var(--space-3);
+  color: var(--ink-1);
+  background: transparent;
+  border: 0;
+  border-radius: var(--radius-xs);
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.mesh-slot-row:hover {
+  background: var(--fill-rest);
+}
+
+.mesh-slot-index {
+  flex: none;
+  min-width: 14px;
+  color: var(--ink-3);
+  font-variant-numeric: var(--numeric);
+}
+
+.mesh-slot-name {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.mesh-slot-row small {
+  flex: none;
+  color: var(--ink-3);
+  font-size: var(--type-micro);
+}
+
+/* ---- Stroke ------------------------------------------------------------- */
+/* The Stroke section's header switch (`Stroke.hidden`, schema v36). The
+   actions slot rests at 0.55 so a `+` sits quietly under its title, but a
+   switch's whole job is to show a state: at 0.55 the accent "on" and the grey
+   "off" are hard to tell apart without a hover a touch device cannot do. So
+   the slot that holds this switch stays at full strength. */
+.insp-section-actions:has(> .insp-stroke-switch) {
+  opacity: 1;
+}
+
+/* THE FONT FIELD (FontField.tsx): the colour field's box (the house
+   `.color-field` recipe) is the font picker's trigger. One button fills it:
+   the family drawn in its own face, right-aligned as every value in a pill,
+   then the house caret. The box draws the edge and the ring for it (the
+   recipe's `:focus-within` and `:has(:focus-visible)`), so the button draws
+   none of its own. A font write in flight sits in the accessory lane. */
+.font-field-open {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  padding: 0;
+  font: inherit;
+  color: var(--ink-2);
+  background: transparent;
+  border: 0;
+  outline: none;
+  cursor: pointer;
+}
+
+.font-field-open:hover:not(:disabled),
+.font-field-open[aria-expanded="true"] {
+  color: var(--ink-1);
+}
+
+/* A viewer's locked panel opens no picker (a pick writes the Project). The
+   caret keeps its ink, as the colour field's does in a read-only box. */
+.font-field-open:disabled {
+  cursor: default;
+}
+
+/* Its glyph is the house dropdown caret (`.field-caret`), the last thing in
+   the button, so it lands where every other caret does. The button is aimed
+   at, so the caret takes the button's ink: --ink-2 at rest, as every caret,
+   and --ink-1 while the field is hovered or its picker is open. */
+.font-field-open .field-caret {
+  color: inherit;
+}
+
+/* The family keeps the UI's size and its own face (set inline once the face
+   has loaded, Inter until then). "Mixed" is the quiet ink a field's Mixed
+   placeholder takes; a locked box reads its value in the second ink. */
+.font-field-name {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  text-align: right;
+  font-size: var(--type-md);
+  line-height: var(--leading-md);
+  color: var(--ink-1);
+}
+
+.font-field-name.is-mixed {
+  color: var(--ink-3);
+}
+
+.font-field.is-readonly .font-field-name {
+  color: var(--ink-2);
+}
+
+/* THE WRITE IN FLIGHT: a 12px ring whose lit arc is the level, in the meter
+   grey (a level, not a selection), with its percent in the numeral face in a
+   lane wide enough for "100%", so the caret never steps as it counts. A size
+   not known yet has no level: a short arc that turns where motion is wanted,
+   and a dashed ring where it is not (a still short arc would read as 25%).
+   The picker's skeleton, while its chunk loads, is the same ring in the
+   accessory lane. */
+.font-field-apply {
+  gap: var(--space-2);
+}
+
+.font-field-ring {
+  flex: none;
+  width: 12px;
+  height: 12px;
+}
+
+.font-field-ring circle {
+  fill: none;
+  stroke-width: 1.5;
+}
+
+.font-field-ring-track {
+  stroke: var(--line-strong);
+}
+
+.font-field-ring-level {
+  stroke: var(--meter-lit);
+}
+
+.font-field-ring.is-indeterminate .font-field-ring-level {
+  stroke-dasharray: 8 4.5;
+}
+
+.font-field-percent {
+  min-width: 4ch;
+  font-family: var(--font-numeric);
+  font-variant-numeric: var(--numeric);
+  font-size: var(--type-sm);
+  line-height: var(--leading-xs);
+  color: var(--ink-2);
+}
+
+.font-field-wait {
+  flex: none;
+  width: 12px;
+  height: 12px;
+  border: 1.5px dashed var(--line-strong);
+  border-radius: var(--radius-full);
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .font-field-ring.is-indeterminate .font-field-ring-level {
+    stroke-dasharray: 25 100;
+  }
+
+  .font-field-wait {
+    border-style: solid;
+    border-top-color: var(--meter-lit);
+  }
+
+  .font-field-ring.is-indeterminate,
+  .font-field-wait {
+    animation: font-field-turn 900ms linear infinite;
+  }
+}
+
+@keyframes font-field-turn {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* A failed write's way back: the house button, sized in the lane at the
+   badge's height so the row keeps its 28. Its look and states stay `.btn`'s. */
+.font-field-retry {
+  height: var(--badge-h);
+  padding: 0 var(--space-3);
+}
+
+/* The picker's chunk did not load: its crash card takes its own line in the
+   box, which grows to hold it, so the message reads and Try again is in
+   reach rather than spilling over the rows below. */
+.font-field:has(> .panel-crash) {
+  flex-wrap: wrap;
+  height: auto;
+  min-height: var(--control-h);
+}
+
+.font-field > .panel-crash {
+  flex: 1 0 100%;
+  margin: 0 0 var(--space-3);
+}
+
+/* THE PICKER'S CHIPS share its 340 by their words, in one line: at the
+   house 10px a side the six wrapped, Mono alone on a second line. A context
+   sets a chip's width only (docs/design-system.md, Segmented), from the
+   chrome layer, since the picker's own sheet ranks under the widgets. */
+.font-picker-chips .segmented-item {
+  flex: 1 1 auto;
+  padding-inline: var(--space-2);
+}
+
+/* ---- mask (gap 7, Paper page 25) ----------------------------------------
+   What the mask covers is the house readout (`insp-readout`: no hover lift,
+   the default cursor), its names in full ink rather than the readout's
+   second ink, and Release is one quiet full-width button under the rows:
+   the house row of buttons and the house outline button, at the house 28px.
+   This places the row only. */
+.insp-object.insp-mask .insp-dim.is-text {
+  color: var(--ink-1);
+}
+
+.insp-mask-release {
+  padding: var(--space-2) 0 var(--space-6);
+}
+
+/* A notice of several sentences (an instance's drift: what moved, what the
+   stage renders now, what Accept does), one to a line so they never run
+   into each other. */
+.insp-notice-line {
+  display: block;
+}
+
+.insp-notice-line + .insp-notice-line {
+  margin-top: var(--space-2);
+}