@dailies-studio/shot-editor 0.1.0 → 0.2.0

package/src/styles/timeline-graph.css

@@ -0,0 +1,384 @@
+/* The timeline's GRAPH mode: the pane that replaces the rows' scroller, its toolbar, its curve
+   list and its empty states. The curve editor and the keyframe editor bring their own sheets
+   (packages/timeline/src/curves.css, keyframeEditor.css). Imported after timeline-rows.css. */
+
+/* ---- the graph pane ----------------------------------------------------- */
+/* A 40px toolbar over the body. The body's label column keeps the rows' width
+   (the rail track's), so switching modes does not move the vertical rule the
+   whole panel is read against; the toolbar's left cell is that same width. */
+.curve-pane {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.curve-body {
+  display: flex;
+  align-items: stretch;
+  flex: 1;
+  min-height: 0;
+}
+
+/* ---- the toolbar -------------------------------------------------------- */
+.curve-toolbar {
+  display: flex;
+  align-items: center;
+  flex: none;
+  height: var(--panel-head-h);
+  border-bottom: 1px solid var(--line);
+}
+
+.curve-toolbar-scope {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-4);
+  flex: none;
+  height: 100%;
+  padding-inline: var(--space-7);
+  border-right: 1px solid var(--line);
+}
+
+/* "CURVES · 4": a section label in the house micro caps. */
+.curve-count {
+  font: var(--weight-semibold) var(--type-micro) / var(--leading-xs) var(--font-sans);
+  letter-spacing: var(--tracking-caps);
+  text-transform: uppercase;
+  color: var(--ink-3);
+  white-space: nowrap;
+}
+
+.curve-scope-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  min-width: 0;
+  height: var(--control-h);
+  padding: 0;
+  border: 0;
+  background: transparent;
+  font: var(--type-md) / var(--leading-sm) var(--font-sans);
+  color: var(--ink-2);
+  white-space: nowrap;
+  cursor: pointer;
+}
+.curve-scope-btn:hover {
+  color: var(--ink-1);
+}
+.curve-scope-btn svg {
+  flex: none;
+  width: 12px;
+  height: 12px;
+}
+
+/* The presets and readouts give way first: the view buttons on the right are
+   the ones an author reaches for at any width. */
+.curve-toolbar-main {
+  display: flex;
+  align-items: center;
+  gap: var(--space-6);
+  flex: 1;
+  min-width: 0;
+  height: 100%;
+  padding-inline: var(--space-6);
+  overflow: hidden;
+}
+
+.curve-toolbar-view {
+  display: flex;
+  align-items: center;
+  gap: var(--space-4);
+  flex: none;
+  padding-inline: var(--space-6);
+}
+
+/* The five ease presets: one segmented track, the house segmented look. */
+.curve-presets {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: var(--space-1);
+  flex: none;
+  height: var(--control-h);
+  padding: var(--space-1);
+  background: var(--fill-rest);
+  border-radius: var(--radius-tab);
+}
+
+.curve-preset {
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-3);
+  height: 24px;
+  padding-inline: var(--space-4);
+  border: 1px solid transparent;
+  border-radius: var(--radius-sm);
+  background: transparent;
+  font: var(--type-md) / var(--leading-sm) var(--font-sans);
+  color: var(--ink-2);
+  white-space: nowrap;
+  cursor: pointer;
+}
+.curve-preset:hover:not([aria-disabled="true"]) {
+  color: var(--ink-1);
+}
+.curve-preset.is-active {
+  background: var(--surface-raised);
+  border-color: var(--line);
+  color: var(--ink-1);
+}
+/* Disabled reads dim but stays on screen: the presets are this toolbar's
+   capability, and the tooltip says what unlocks them. */
+.curve-preset[aria-disabled="true"] {
+  color: var(--ink-3);
+  cursor: default;
+}
+
+.curve-preset-glyph {
+  flex: none;
+  width: 14px;
+  height: 14px;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 1.4;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+.curve-preset.is-active .curve-preset-glyph {
+  color: var(--accent-ink);
+}
+
+.curve-divider {
+  flex: none;
+  width: 1px;
+  height: 20px;
+  background: var(--line);
+}
+
+/* Frame and Value. Static chips when no one key is selected; the shared
+   NumberFields (their own pill look) when one is. */
+.curve-readouts {
+  display: flex;
+  align-items: center;
+  gap: var(--space-4);
+  flex: none;
+}
+
+.curve-readout {
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-4);
+  height: var(--control-h);
+  padding-inline: var(--space-5);
+  background: var(--fill-rest);
+  border-radius: var(--radius-sm);
+  font: var(--type-md) / var(--leading-sm) var(--font-sans);
+  color: var(--ink-3);
+  white-space: nowrap;
+}
+
+.curve-readouts .numfield {
+  flex: none;
+  width: 112px;
+  height: var(--control-h);
+}
+
+.curve-readout-value {
+  font: var(--type-sm) / var(--leading-xs) var(--font-numeric);
+  font-variant-numeric: var(--numeric);
+  color: var(--ink-3);
+}
+
+.curve-tool {
+  height: var(--control-h);
+  padding-inline: var(--space-5);
+  border: 0;
+  border-radius: var(--radius-sm);
+  background: transparent;
+  font: var(--type-md) / var(--leading-sm) var(--font-sans);
+  color: var(--ink-2);
+  white-space: nowrap;
+  cursor: pointer;
+}
+.curve-tool:hover:not(:disabled) {
+  color: var(--ink-1);
+  background: var(--fill-hover);
+}
+.curve-tool.is-filled {
+  background: var(--fill-rest);
+  color: var(--ink-1);
+}
+.curve-tool.is-on {
+  background: var(--accent-quiet);
+  color: var(--accent-ink);
+}
+.curve-tool:disabled {
+  color: var(--ink-3);
+  cursor: default;
+}
+
+/* ---- the curve list ----------------------------------------------------- */
+.curve-rows {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  flex: none;
+  min-height: 0;
+  border-right: 1px solid var(--line);
+}
+
+.curve-list {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+}
+
+/* WHOSE CURVES THESE ARE: the element's name over its property rows. 28px,
+   the graph ruler's height, so the list's first rule lines up with the
+   ruler's. */
+.curve-scope {
+  display: flex;
+  align-items: center;
+  gap: var(--space-4);
+  flex: none;
+  height: 28px;
+  padding-inline: var(--space-7);
+  border-bottom: 1px solid var(--line);
+  color: var(--ink-1);
+  font: var(--weight-medium) var(--type-md) / var(--leading-sm) var(--font-sans);
+}
+
+.curve-scope-icon {
+  flex: none;
+  width: 14px;
+  height: 14px;
+  color: var(--accent-ink);
+}
+
+.curve-scope-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* A 32px row: dot, name, the value at the playhead. The depth indent comes
+   AFTER the shorthand: written before it, it was reset to 0, so a vector's
+   X / Y / Z sat flush with their parent. */
+.curve-row {
+  display: flex;
+  align-items: center;
+  gap: var(--space-4);
+  font: var(--type-md) / var(--leading-sm) var(--font-sans);
+  text-align: left;
+  color: var(--ink-2);
+  background: transparent;
+  border: 0;
+  border-bottom: 1px solid var(--line-soft);
+  min-height: 32px;
+  padding: 0 var(--space-7);
+  padding-left: calc(var(--space-7) + var(--depth, 0) * var(--tree-indent));
+  cursor: pointer;
+  flex: none;
+}
+
+.curve-row:hover:not(:disabled) {
+  color: var(--ink-1);
+}
+
+/* THE FOCUSED CURVE: a quiet accent ground and a 2px accent edge on the left.
+   The edge is an inset shadow so it costs no width and the label does not
+   shift when focus moves. */
+.curve-row.is-focused {
+  background: var(--accent-quiet);
+  box-shadow: inset 2px 0 0 var(--accent);
+}
+
+.curve-row.is-focused .curve-row-name {
+  color: var(--ink-1);
+  font-weight: var(--weight-semibold);
+}
+
+.curve-row.is-focused .curve-row-value {
+  color: var(--accent-ink);
+}
+
+/* A row with no value axis (a colour) is a label, not a control. */
+.curve-row.is-flat {
+  cursor: default;
+  color: var(--ink-3);
+}
+
+/* The curve's colour. Filled while the curve is on the plot, a ring while it
+   is not, so the list says which curves are drawn. */
+.curve-row-dot {
+  box-sizing: border-box;
+  flex: none;
+  width: 10px;
+  height: 10px;
+  border-radius: var(--radius-2xs);
+  border: 1.5px solid var(--curve-color, var(--ink-3));
+  background: transparent;
+}
+.curve-row.is-shown .curve-row-dot {
+  background: var(--curve-color, var(--ink-3));
+}
+.curve-row-dot.is-none {
+  border-color: var(--line);
+}
+
+.curve-row-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.curve-row-value {
+  margin-left: auto;
+  font: var(--type-sm) / var(--leading-xs) var(--font-numeric);
+  font-variant-numeric: var(--numeric);
+  color: var(--ink-2);
+  white-space: nowrap;
+}
+
+.curve-hint {
+  flex: none;
+  padding: var(--space-6) var(--space-7);
+  border-top: 1px solid var(--line-soft);
+  font: var(--type-sm) / var(--leading-sm) var(--font-sans);
+  color: var(--ink-3);
+}
+
+.curve-graph {
+  display: flex;
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+}
+
+/* The empty state, centred in the plot as a bordered 128px box. The panel
+   ground and a hairline, no shadow: it is a note, not a raised control. */
+.curve-empty {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  align-self: center;
+  margin-inline: auto;
+  width: calc(100% - 2 * var(--space-8));
+  /* A 428px measure for the copy, plus the padding either side. */
+  max-width: calc(428px + 2 * var(--space-8));
+  height: 128px;
+  padding: var(--space-8);
+  border: 1px solid var(--line);
+  background: var(--surface-panel);
+  font: var(--type-lg) / var(--leading-md) var(--font-sans);
+  color: var(--ink-2);
+  text-align: center;
+}

package/src/styles/timeline-meters.css

@@ -0,0 +1,89 @@
+/* ── THE TRANSPORT'S PREVIEW VOLUME ──────────────────────────────────────
+   The popover over the transport's speaker (TransportVolume.tsx). The dock
+   has no monitor column any more: preview mute and volume sit beside play,
+   and the levels live in the Sound tab's mixer. The range itself is the house
+   recipe in controls.css; this sheet sizes it and fills the level. */
+
+.dock-volume-pop {
+  padding: var(--space-4) var(--space-6);
+}
+
+.dock-volume-body {
+  display: flex;
+  align-items: center;
+  gap: var(--space-5);
+}
+
+.dock-volume {
+  /* The value as a 0..1 ratio, written by `TransportVolume`. 1 until it is,
+     so a render before the first write shows a full level, the default. */
+  --fill: 1;
+  flex: none;
+  width: 120px;
+  height: 24px;
+}
+
+/* The percentage in the mono face, so the number holds one width as it
+   moves. */
+.dock-volume-value {
+  flex: none;
+  min-width: 4ch;
+  text-align: right;
+  font: var(--type-sm)/var(--leading-xs) var(--font-mono);
+  font-variant-numeric: var(--numeric);
+  color: var(--ink-2);
+}
+
+/* THE LEVEL IS FILLED, IN THE METER'S GREY, NOT THE ACCENT. Blue is a signal
+   (selection, focus, the playhead), and a volume is a level: the mixer's lit
+   meters say the same thing in `--meter-lit`. The rest of the track stays the
+   house recipe's quiet `--fill-rest`.
+
+   WebKit has no progress part, so the fill is a hard-stop gradient on the
+   track. It ends at the THUMB'S CENTRE, which travels 6px in from either end
+   (half the 12px thumb): a stop at `--fill` of the whole track would run
+   ahead of the thumb at the left and fall behind it at the right. Firefox
+   draws `::-moz-range-progress` to the thumb itself. */
+.dock-volume::-webkit-slider-runnable-track {
+  height: 4px;
+  border-radius: var(--radius-full);
+  background: linear-gradient(
+    to right,
+    var(--meter-lit) calc(6px + (100% - 12px) * var(--fill)),
+    var(--fill-rest) 0
+  );
+}
+
+.dock-volume::-moz-range-track {
+  height: 4px;
+  border-radius: var(--radius-full);
+  background: var(--fill-rest);
+}
+
+.dock-volume::-moz-range-progress {
+  height: 4px;
+  border-radius: var(--radius-full);
+  background: var(--meter-lit);
+}
+
+/* A fader cap: 12x20, the 4px corner, solid primary ink, no edge and no
+   shadow (it is the one light thing on a dark track, which is lift enough).
+   Centred on the 4px track: (4 - 20) / 2 is -8. */
+.dock-volume::-webkit-slider-thumb {
+  appearance: none;
+  -webkit-appearance: none;
+  width: 12px;
+  height: 20px;
+  margin-top: calc(-1 * var(--space-4));
+  border: 0;
+  border-radius: var(--radius-xs);
+  background: var(--ink-1);
+}
+
+.dock-volume::-moz-range-thumb {
+  width: 12px;
+  height: 20px;
+  border: 0;
+  border-radius: var(--radius-xs);
+  background: var(--ink-1);
+}