@dailies-studio/shot-editor 0.1.0 → 0.2.0

package/src/styles/topbar.css

@@ -0,0 +1,886 @@
+/* The top bar: the app menu, the breadcrumb, history, the workspace switch, save state, Export, the Agent chip and the avatar, plus the status chip both bars wear. */
+
+/* ---- header ------------------------------------------------------------- */
+/* The top row of the grid, edge to edge, on the panel ground. Its seam is its
+   own bottom border.
+
+   THREE TRACKS, `1fr auto 1fr`: the workspace switch is the middle one, so it
+   is centred on the WINDOW whatever the two ends hold, which a flex row with
+   spacers only manages when both ends happen to be the same width. The ends
+   are `minmax(0, 1fr)` so a long Project name shrinks its own end instead of
+   pushing the switch off centre.
+
+   Paper's 44px bar (`--topbar-h`, 2026-10-13 design review): 12px sides and
+   28px controls, so every button sits 8px off the bar's two edges. */
+.shell-header {
+  grid-column: edge-l / edge-r;
+  grid-row: edge-t / main-t;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+  align-items: center;
+  gap: var(--space-6);
+  padding: 0 var(--space-6);
+  background: var(--surface-panel);
+  border-bottom: 1px solid var(--line);
+}
+
+.header-start,
+.header-end {
+  display: flex;
+  align-items: center;
+  gap: var(--space-7);
+  min-width: 0;
+}
+
+.header-end {
+  justify-content: flex-end;
+}
+
+/* EVERY BUTTON IN THE BAR IS 28 (`--control-h`), the house 32 a step down so
+   the 44px bar keeps 8px above and below each one. In the header's own
+   context, so the house `.btn` keeps its 32 everywhere else. */
+.shell-header .btn {
+  height: var(--control-h);
+}
+
+.shell-header .btn.is-icon {
+  width: var(--control-h);
+}
+
+.header-center {
+  display: flex;
+  justify-content: center;
+}
+
+/* The group divider: Paper's 1x20 hairline between the menu, the crumbs and
+   history. */
+.header-sep {
+  flex: none;
+  width: 1px;
+  height: 20px;
+  background: var(--line);
+}
+
+/* THE APP MENU'S BUTTON carries `.btn`, so hover, disabled and the
+   `.is-active` fill all come from the one recipe; only its mark and caret are
+   styled here. NO `transform`, `filter` or `will-change` on anything in this
+   file: a hover lift is exactly how the stage iframe's containing block gets
+   broken.
+
+   Paper's workspace trigger: a 48x28 box with the mark and a caret. The mark
+   is `DailiesMark` in `currentColor`, so it takes the ink, never a gradient. */
+.app-menu-trigger {
+  flex: none;
+  width: 48px;
+  gap: var(--space-2);
+  padding: 0 var(--space-3);
+  border-radius: var(--field-radius);
+}
+
+.app-menu-mark {
+  width: 20px;
+  height: 20px;
+  color: var(--ink-1);
+}
+
+.app-menu-caret {
+  display: inline-flex;
+  color: var(--ink-2);
+}
+
+.app-menu-caret svg {
+  width: 12px;
+  height: 12px;
+  display: block;
+}
+.app-menu-trigger.is-active .app-menu-caret {
+  color: inherit;
+}
+
+.project-identity {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  min-width: 0;
+}
+
+/* The root crumb: a link out to the Projects dashboard, quiet until hovered. */
+.project-home {
+  flex: none;
+  font-size: var(--type-lg);
+  color: var(--ink-2);
+  text-decoration: none;
+  border-radius: var(--radius-xs);
+}
+
+.project-home:hover {
+  color: var(--ink-1);
+}
+
+.project-home:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
+
+/* The title is the only Project mutation in the editor. Resting it directly on
+   the header keeps it label-like; focus reveals the inset field without moving
+   anything around it.
+
+   ── IT SIZES TO ITS TEXT, IT DOES NOT RESERVE 260px ──────────────────
+   The width was a flat `min(260px, 24vw)`, so a project called "Demo" held
+   the same sixth of the header as one with a sentence for a name — and with
+   the shot crumb after it the identity block measured 435px whatever it was
+   naming. `field-sizing: content` makes the box the text's width, which is
+   what every other label in this bar already is. The cap is what keeps a long
+   name from pushing the view switch into the status badges, and the floor is
+   what keeps an EMPTY title (mid-rename, everything selected and deleted)
+   from collapsing to a slit nobody can click back into. */
+.project-title-input {
+  field-sizing: content;
+  width: auto;
+  max-width: min(200px, 18vw);
+  height: var(--control-h);
+  min-width: 56px;
+  padding: 0 var(--space-4);
+  font: inherit;
+  font-size: var(--type-title);
+  font-weight: var(--weight-medium);
+  color: var(--ink-1);
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: var(--control-radius);
+  text-overflow: ellipsis;
+  /* The hover-reveal was a hard cut while every button beside it eased. */
+  transition:
+    background var(--dur-fast) var(--ease),
+    border-color var(--dur-fast) var(--ease);
+}
+
+.project-title-input:hover:not(:disabled) {
+  background: var(--fill-rest);
+}
+
+.project-title-input:focus {
+  outline: none;
+  background: var(--fill-rest);
+  border-color: var(--accent);
+  box-shadow: var(--focus-ring);
+  text-overflow: clip;
+}
+
+.project-title-input:disabled {
+  color: var(--ink-disabled);
+}
+
+
+.history-controls,
+.status-badges {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+}
+
+/* The 24-grid set sizes by CSS, never by attribute. */
+.history-controls svg {
+  width: 16px;
+  height: 16px;
+  display: block;
+}
+
+/* Nothing to say is silence, not an empty slot costing the bar a gap. */
+.status-badges:empty {
+  display: none;
+}
+
+/* The status pills: save state and a codegen warning up here, the frame rate
+   and the preview backend in the canvas bar (StatusBadges.tsx has both). The
+   chrome's own component, not the house `.badge` (a 16px tag), because these
+   are a row of rounded pills of one height. */
+.status-chip {
+  display: inline-flex;
+  align-items: center;
+  height: 22px;
+  padding: 0 var(--space-4);
+  border: 1px solid var(--line);
+  border-radius: var(--radius-full);
+  font-size: var(--type-micro);
+  line-height: 16px;
+  color: var(--ink-2);
+  background: var(--fill-hover);
+  white-space: nowrap;
+}
+
+/* The digits must not reflow the bar as the rate moves between 9 and 10 or 59
+   and 60, which on a proportional face they would. No tone rule: the adaptive
+   presentation policy already ACTS on lag by stepping quality rungs, so a red
+   pill would be an alarm with no action attached to it. */
+.status-chip-fps {
+  font-variant-numeric: var(--numeric);
+}
+
+.status-chip-quiet {
+  color: var(--ink-3);
+  border-color: transparent;
+}
+
+/* `saved` had no rule, so a document fully on disk wore the same weight as an
+   alert. It is the quietest thing the chip can say, so it gets the ambient
+   posture — the same one `.status-chip-quiet` gives the backend word.
+
+   ONLY `saved`. `.status-chip-saving` would be a no-op (the base pill is already
+   `--text-dim`, and the ellipsis carries the activity, not a pulse), and
+   `.status-chip-idle` is the tone SaveBadges hands "unsaved": the one state an
+   author must be able to catch, which is exactly the base weight. */
+.status-chip-saved {
+  gap: var(--space-3);
+  padding: 0;
+  color: var(--ink-3);
+  background: transparent;
+  border-color: transparent;
+}
+
+/* Paper's saved state: a check and the word, no pill. */
+.status-chip-saved svg {
+  width: 14px;
+  height: 14px;
+  display: block;
+}
+
+.status-chip-warn {
+  border-color: color-mix(in srgb, var(--warn) 40%, transparent);
+  color: var(--warn);
+}
+
+.status-chip-error {
+  border-color: color-mix(in srgb, var(--danger) 45%, transparent);
+  color: var(--danger-ink);
+}
+
+/* A badge APPEARING is the whole event — "saving…" arrives, the backend chip
+   lands after onReady, "unsaved" shows up on the first edit — and these now
+   come and go rather than sitting there permanently, so the arrival wants the
+   softest possible landing. Opacity only: no geometry moves, and nothing above
+   `.stage-frame` may take a transform. Exits stay instant; disappearing is the
+   quiet outcome and does not need announcing. */
+@keyframes status-chip-in {
+  from { opacity: 0; }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .status-chip { animation: status-chip-in var(--dur-fast) var(--ease); }
+}
+
+
+/* ---- the workspace switch ----------------------------------------------- */
+/* Studio | Storyboard, Paper's centred switch: a 32 tall track with 26 tall
+   chips, the selected one in the quiet accent wash with an accent edge. It
+   is the house `.segmented.is-accent`; only the sizes are the top bar's.
+   The chips are centred in the track, so the 3px Paper leaves above and
+   below a 26 chip is the track's own arithmetic, not a literal here. */
+.workspace-switch {
+  flex: none;
+  align-items: center;
+  height: var(--button-h);
+  padding: var(--space-1);
+  gap: var(--space-1);
+  border-radius: var(--radius-tab);
+}
+
+.workspace-switch .segmented-item,
+.workspace-switch .segmented-item:first-child,
+.workspace-switch .segmented-item:last-child {
+  flex: none;
+  height: 26px;
+  gap: var(--space-3);
+  padding: 0 var(--space-6);
+  font-size: var(--type-md);
+  border: 1px solid transparent;
+  border-radius: var(--radius-sm);
+}
+
+.workspace-switch .segmented-item.is-active,
+.workspace-switch .segmented-item.is-active:hover:not(:disabled) {
+  border-color: var(--accent);
+  font-weight: var(--weight-semibold);
+}
+
+.workspace-switch .header-glyph {
+  margin-right: 0;
+}
+
+/* ---- the Agent chip ------------------------------------------------------ */
+/* A `.btn` (hover, focus and the pressed fill come from the recipe): a dot,
+   "Agent" and the health word in the secondary ink. The dot is the state, so
+   the word never needs a colour: green for writes on, a quiet ink for read
+   only and for an unanswered probe, the warning tone for off. */
+.agent-chip {
+  flex: none;
+  gap: var(--space-3);
+  padding: 0 var(--space-5);
+}
+
+.agent-chip[aria-expanded="true"] {
+  background: var(--fill-state-soft);
+}
+
+.agent-chip-dot {
+  flex: none;
+  width: 8px;
+  height: 8px;
+  border-radius: var(--radius-full);
+  background: var(--ink-3);
+}
+
+.agent-chip.is-write .agent-chip-dot {
+  background: var(--success);
+}
+
+.agent-chip.is-read .agent-chip-dot {
+  background: var(--ink-2);
+}
+
+.agent-chip.is-off .agent-chip-dot {
+  background: var(--warn);
+}
+
+.agent-chip-word {
+  color: var(--ink-2);
+  font-weight: var(--weight-regular);
+}
+
+/* Under 1280 the word gives way: the dot still says the state, and the title
+   and the popover say it in full. */
+@media (max-width: 1279px) {
+  .agent-chip-word {
+    display: none;
+  }
+}
+
+/* ---- the account avatar ------------------------------------------------- */
+.header-avatar {
+  flex: none;
+  width: var(--control-h);
+  height: var(--control-h);
+  margin-left: var(--space-4);
+  padding: 0;
+  font: inherit;
+  font-size: var(--type-md);
+  font-weight: var(--weight-semibold);
+  color: var(--ink-1);
+  background: var(--fill-rest);
+  border: 0;
+  border-radius: var(--radius-full);
+  cursor: pointer;
+}
+
+.header-avatar:hover {
+  background: var(--fill-hover);
+}
+
+.header-avatar:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
+
+/* A guest in this workspace: a text note, not a control, so it reads the
+   same to a screen reader and needs no colour to mean anything. */
+.header-guest {
+  flex: none;
+  margin-left: var(--space-4);
+  padding: var(--space-1) var(--space-3);
+  font-size: var(--type-md);
+  font-weight: var(--weight-medium);
+  color: var(--ink-2);
+  border: 1px solid var(--line);
+  border-radius: var(--radius-full);
+}
+
+
+/* ---- the header's breadcrumb -------------------------------------------- */
+/* The way back, visible from any panel state — including a collapsed rail and
+   a collapsed dock, which is exactly when the other three heads are gone. */
+/* A `.btn`, so a filled chip like every control in the bar; this only keeps
+   a long title inside it. */
+/* THE SHOT CRUMB GIVES WAY FIRST. Flex shrinks by basis, so a long shot name
+   (220px) used to take the room and leave the Project title at "Do…". The
+   crumb shrinks four times faster and stops at a few letters plus its caret.
+   56px with 8px sides, so a squeezed crumb still shows a letter and its
+   ellipsis, and the title and the crumb still fit a 1024 window without
+   running into the history buttons. */
+.project-crumb {
+  flex-shrink: 4;
+  min-width: 56px;
+  padding: 0 var(--space-4);
+  max-width: 220px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Under 1280 the bar cannot fit the root crumb and a readable title: drop the
+   root crumb, since the app menu's "Go to Projects" row is the same exit, and
+   tighten the groups from 16 to 8. */
+@media (max-width: 1279px) {
+  .header-start,
+  .header-end {
+    gap: var(--space-4);
+  }
+
+  .project-home,
+  .project-home + .project-crumb-sep {
+    display: none;
+  }
+}
+
+.project-crumb svg {
+  flex: none;
+  width: 12px;
+  height: 12px;
+  opacity: 0.7;
+}
+
+.project-crumb-menu {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  padding: var(--space-2);
+  min-width: 180px;
+  max-height: 320px;
+  overflow: auto;
+}
+
+.project-crumb-item {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  font: inherit;
+  text-align: left;
+  color: var(--ink-1);
+  background: transparent;
+  border: 0;
+  border-radius: var(--radius-xs);
+  padding: var(--space-2);
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.project-crumb-item:hover {
+  background: var(--fill-rest);
+}
+
+.project-crumb-item.is-current {
+  color: var(--accent-ink);
+}
+
+.project-crumb-item:disabled {
+  color: var(--ink-3);
+  background: transparent;
+  cursor: default;
+}
+
+.project-crumb-item svg {
+  flex: none;
+  width: 14px;
+  height: 14px;
+  color: var(--ink-2);
+}
+
+.project-crumb-sep {
+  display: inline-flex;
+  flex: none;
+  color: var(--ink-3);
+  user-select: none;
+}
+
+.project-crumb-sep svg {
+  width: 12px;
+  height: 12px;
+  display: block;
+}
+
+/* ---- re-homed here from other region files (the component that renders
+   these lives in this region) ------------------------------------------ */
+
+.header-glyph svg {
+  width: 16px;
+  height: 16px;
+  display: block;
+}
+
+.header-glyph {
+  display: inline-flex;
+  margin-right: var(--space-2);
+}
+
+/* The percentage is already in the label; this puts it in the BUTTON, so the
+   render's progress is legible at a glance from across the room instead of
+   only by reading a number that ticks.
+
+   Two stops off the SAME accent, never a second hue: this is still the one
+   primary control on the surface, showing its own state. `--export-pct` is set
+   inline by ExportButton (0-100, unitless, so `calc()` can take a percentage
+   of it). The chrome layer sits above the house `.btn.is-primary:hover`, so
+   the fill holds under the cursor without borrowing the widget's classes. */
+/* Paper's Export: 28 tall, radius 8, a download glyph, flat. */
+.header-export {
+  flex: none;
+  height: var(--control-h);
+  gap: var(--space-3);
+  padding: 0 var(--space-6);
+  border-radius: var(--radius-tab);
+  box-shadow: none;
+}
+
+.header-export .header-glyph {
+  margin-right: 0;
+}
+
+/* Share (ShareButton.tsx): Export's size, the quiet house button. */
+.header-share {
+  flex: none;
+  height: var(--control-h);
+  gap: var(--space-3);
+  padding: 0 var(--space-6);
+  border-radius: var(--radius-tab);
+}
+
+.header-export.is-running {
+  font-variant-numeric: var(--numeric);
+  background: linear-gradient(
+    to right,
+    var(--accent-hover) calc(var(--export-pct, 0) * 1%),
+    var(--accent) 0
+  );
+}
+
+/* WHO ELSE IS HERE (Paper page 21): 30px faces in each person's peer colour,
+   ringed in the bar's own colour so an overlap reads as two faces, stepping
+   24px. Three faces, then "+N". */
+.presence-stack {
+  position: relative;
+  display: flex;
+  flex: none;
+  align-items: center;
+  padding-left: var(--space-3);
+}
+
+.presence-face {
+  position: relative;
+  display: inline-grid;
+  flex: none;
+  place-items: center;
+  width: 30px;
+  height: 30px;
+  margin-left: calc(-1 * var(--space-3));
+  padding: 0;
+  font: inherit;
+  font-family: var(--font-sans);
+  font-size: var(--type-sm);
+  font-weight: 600;
+  line-height: 14px;
+  color: #0b0b0b;
+  border: 2px solid #080808;
+  border-radius: var(--radius-full);
+  cursor: pointer;
+}
+
+.presence-face > img {
+  width: 100%;
+  height: 100%;
+  border-radius: inherit;
+  object-fit: cover;
+}
+
+.presence-face:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
+
+.presence-face-agent {
+  cursor: default;
+}
+
+.presence-more {
+  color: #b5b5b5;
+  background: #1c1c1c;
+  cursor: default;
+}
+
+/* The hover card: who, where, and how to follow. */
+.presence-card {
+  position: absolute;
+  top: calc(100% + var(--space-4));
+  right: calc(-1 * var(--space-4));
+  z-index: var(--z-menu);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-5);
+  width: 280px;
+  padding: var(--space-6);
+  font-family: var(--font-sans);
+  font-size: var(--type-md);
+  font-weight: 500;
+  line-height: 16px;
+  color: var(--ink-1);
+  text-align: left;
+  white-space: nowrap;
+  cursor: default;
+  background: #1c1c1c;
+  border: 1px solid #3d3d3d;
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-menu, 0 8px 24px rgb(0 0 0 / 40%));
+}
+
+.presence-card-who {
+  display: flex;
+  gap: var(--space-5);
+  align-items: center;
+}
+
+.presence-card-avatar {
+  display: inline-grid;
+  flex: none;
+  place-items: center;
+  width: 32px;
+  height: 32px;
+  overflow: hidden;
+  font-size: var(--type-md);
+  font-weight: 600;
+  color: #0b0b0b;
+  border-radius: var(--radius-full);
+}
+
+.presence-card-avatar > img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.presence-card-name {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  font-size: var(--type-lg);
+  font-weight: 600;
+}
+
+.presence-card-role {
+  font-size: var(--type-md);
+  font-weight: 500;
+  color: var(--ink-3);
+}
+
+.presence-card-where {
+  display: flex;
+  gap: var(--space-3);
+  align-items: center;
+  min-width: 0;
+  color: var(--ink-2);
+}
+
+.presence-card-number {
+  font-family: var(--font-mono);
+  color: var(--ink-3);
+}
+
+.presence-card-shot,
+.presence-card-layer {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.presence-card-slash {
+  color: var(--ink-3);
+}
+
+.presence-card-swatch {
+  flex: none;
+  width: 8px;
+  height: 8px;
+  border: 1.5px solid;
+  border-radius: var(--radius-2xs);
+}
+
+.presence-card-foot {
+  display: flex;
+  justify-content: space-between;
+  padding-top: var(--space-5);
+  font-size: var(--type-sm);
+  color: var(--ink-3);
+  border-top: 1px solid var(--line);
+}
+
+/* FOLLOWING: the whole editor framed in the followed person's colour, and a
+   pill at the top centre that says whose view this is and how to leave it.
+   Neither takes a click. */
+.presence-follow-frame {
+  position: fixed;
+  inset: 0;
+  z-index: var(--z-menu);
+  pointer-events: none;
+  border: 2px solid;
+}
+
+.presence-follow-pill {
+  position: fixed;
+  top: 72px;
+  left: 50%;
+  z-index: var(--z-menu);
+  display: flex;
+  gap: var(--space-4);
+  align-items: center;
+  padding: var(--space-3) var(--space-6);
+  font-family: var(--font-sans);
+  font-size: var(--type-md);
+  font-weight: 600;
+  color: var(--ink-1);
+  pointer-events: none;
+  background: #1c1c1c;
+  border: 1px solid #3d3d3d;
+  border-radius: var(--radius-full);
+  transform: translateX(-50%);
+}
+
+.presence-follow-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: var(--radius-full);
+}
+
+/* An MCP agent editing the Project as a whole: the follow frame in the Agent's
+   colour, breathing so it reads as work in progress, not a mode. */
+.presence-follow-frame.is-agent {
+  border-color: var(--agent);
+  border-style: dashed;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .presence-follow-frame.is-agent {
+    animation: agent-frame-breathe 1.6s ease-in-out infinite;
+  }
+}
+
+@keyframes agent-frame-breathe {
+  50% {
+    opacity: 0.4;
+  }
+}
+
+/* WHAT THE AGENT IS DOING: its step beside its face, and Follow. One line, it
+   ellipses before it pushes the bar. */
+.agent-status-chip {
+  display: inline-flex;
+  flex: 0 1 auto;
+  gap: var(--space-3);
+  align-items: center;
+  min-width: 0;
+  max-width: 320px;
+  height: 24px;
+  margin-right: var(--space-4);
+  padding: 0 var(--space-2) 0 var(--space-4);
+  font-size: var(--type-sm);
+  color: var(--ink-2);
+  border: 1px solid var(--line);
+  border-radius: var(--radius-full);
+}
+
+.agent-status-text {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.agent-status-name {
+  color: var(--ink-1);
+  font-weight: var(--weight-semibold);
+}
+
+.agent-status-dot {
+  flex: none;
+  width: 6px;
+  height: 6px;
+  background: var(--agent);
+  border-radius: var(--radius-full);
+}
+
+.agent-status-follow {
+  flex: none;
+  height: 18px;
+  padding: 0 var(--space-3);
+  font: inherit;
+  font-weight: var(--weight-semibold);
+  color: var(--ink-1);
+  cursor: pointer;
+  background: var(--fill-rest);
+  border: 0;
+  border-radius: var(--radius-full);
+}
+
+.agent-status-follow:hover,
+.agent-status-follow:focus-visible {
+  background: var(--fill-hover);
+}
+
+/* THE AGENT'S DOTS: three 4px dots in its colour, rising in turn while it
+   works (still for reduced motion). Shared by the chip, the component card,
+   the code tab and the layer row. */
+.agent-dots {
+  display: inline-flex;
+  flex: none;
+  gap: var(--space-1);
+  align-items: center;
+  margin-left: var(--space-2);
+  vertical-align: middle;
+}
+
+.agent-dots > span {
+  width: 4px;
+  height: 4px;
+  background: var(--agent);
+  border-radius: var(--radius-full);
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .agent-dots > span {
+    animation: agent-dot 1.2s ease-in-out infinite;
+  }
+
+  .agent-dots > span:nth-child(2) {
+    animation-delay: 0.15s;
+  }
+
+  .agent-dots > span:nth-child(3) {
+    animation-delay: 0.3s;
+  }
+}
+
+@keyframes agent-dot {
+  0%,
+  60%,
+  100% {
+    opacity: 0.35;
+    transform: translateY(0);
+  }
+
+  30% {
+    opacity: 1;
+    transform: translateY(-2px);
+  }
+}
+
+/* A person's place on a row or a frame card: a 6px dot in their colour after
+   the label. Shared by the strip, the Layers rows and the timeline rows. */
+.peer-dots {
+  display: inline-flex;
+  flex: none;
+  gap: var(--space-1);
+  align-items: center;
+  margin-left: var(--space-3);
+  vertical-align: middle;
+}
+
+.peer-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: var(--radius-full);
+}