@dailies-studio/shot-editor 0.1.0 → 0.2.0

package/src/styles/modes/component.css

@@ -0,0 +1,1561 @@
+/* Components (C1, C2, C4): the components list in the left column, the subject's hole and transport in the canvas cell, the breadcrumb in the bar, the right panel's actions, History, footer and New badge, and Every use with THIS USE. */
+
+/* ---- the Component Studio ------------------------------------------------ */
+/* A COMPONENT IS NOT A PROPERTY OF THE SHOT IT SITS IN, so it gets the canvas.
+ *
+ * It lives in the docked frame like every mode (cellSlots.tsx): the components
+ * list in the left column's mode slot, the subject in the canvas cell as a HOLE onto
+ * the stage, its name, face and zoom in the canvas bar. The inspector shows
+ * its published surface and the timeline its own clock, both unchanged, so
+ * nothing here hides a cell and nothing here floats. */
+
+/* ---- the components list, in the left column -------------------------------- */
+/* The slot's one flexible row (left-column.css), bounded down to the list's
+   `.rail-scroll` so the list scrolls inside the column. */
+.component-library {
+  flex: 1 1 0;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+/* The inspector's one empty state, inset like every row of the column. */
+.component-library .insp-empty {
+  padding: var(--space-3) var(--space-6);
+}
+
+/* ---- the subject, in the canvas cell ---------------------------------------- */
+/* The whole cell. `.stage-window` (shell.css) makes it a window rather than a
+   lid: no paint, no pointer, so a drag on the subject orbits the stage. */
+.component-studio-hole {
+  flex: 1 1 auto;
+  min-width: 0;
+  min-height: 0;
+}
+
+/* ---- the bar ---------------------------------------------------------------- */
+/* The bar slot's whole row, laid out like the canvas bar: the way out and the
+   name lead, the face switch and the zoom are pushed right. The name is the
+   part that gives; no control shrinks. */
+.component-studio-bar {
+  flex: 1 1 auto;
+  display: flex;
+  align-items: center;
+  gap: var(--canvas-bar-gap);
+  min-width: 0;
+  height: 100%;
+}
+
+/* The back chip's look with only its chevron, so the inset is even on both
+   sides. Two classes, so it outranks `.back-chip` on specificity. */
+.back-chip.component-studio-back {
+  flex: none;
+  padding: 0 var(--space-2);
+}
+
+/* The subject's name, and pressing it renames. A button that reads as text:
+   the title of the thing you are looking at should not also look like a
+   control until the pointer is on it. */
+.component-studio-name {
+  flex: 0 1 auto;
+  min-width: 0;
+  height: var(--control-h);
+  overflow: hidden;
+  padding: 0 var(--space-3);
+  border: 0;
+  border-radius: var(--control-radius);
+  background: transparent;
+  color: var(--ink-1);
+  font: inherit;
+  font-size: var(--type-md);
+  font-weight: var(--weight-semibold);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  cursor: text;
+}
+
+.component-studio-name:hover {
+  background: var(--fill-rest);
+}
+
+.component-studio-name:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
+
+.component-studio-tools {
+  flex: none;
+  display: flex;
+  align-items: center;
+  gap: var(--canvas-bar-gap);
+  margin-left: auto;
+}
+
+/* PREVIEW | EDIT (`ComponentsTabSwitch`). `flex: none` because the house
+   track grows to fill a row (`.dock-modes`' reason), and here it would split
+   the room with the name and shrink until its words clip. */
+.components-tab-switch,
+.components-tab-switch .segmented-item {
+  flex: none;
+}
+
+/* ---- Components: the Preview tab and the empty state ------------------------ */
+/* ComponentsPreview.tsx. The Preview tab is the Studio's cells with the
+   studio taken out: the list on the left, the subject as a hole in the canvas
+   cell, Back, the name and Preview | Edit in the bar. */
+.components-preview-hole {
+  flex: 1 1 auto;
+  min-width: 0;
+  min-height: 0;
+}
+
+/* Read-only text, so it reads as the name rather than as a rename. */
+/* A span does not centre its text the way the button does, so the line is
+   the control's height, 28px (`--leading-xl`). */
+.component-studio-name.is-label {
+  line-height: var(--leading-xl);
+  cursor: default;
+}
+
+.component-studio-name.is-label:hover {
+  background: transparent;
+}
+
+/* ---- All components, the home (C5) ----------------------------------------- */
+/* ComponentsHome.tsx: two sections of cards in the canvas cell. The cell is
+   pointer-transparent, so the home paints its own ground and takes the
+   pointer, the way Every use does. */
+.components-home {
+  flex: 1 1 auto;
+  min-width: 0;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-8);
+  padding: var(--space-7) var(--space-8);
+  overflow-y: auto;
+  background: var(--surface-app);
+  pointer-events: auto;
+}
+
+.components-home-section {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+}
+
+.components-home-section > .components-section-title {
+  margin: 0;
+}
+
+.components-home-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+  gap: var(--space-6);
+}
+
+.components-home-card {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+  min-width: 0;
+  padding: var(--space-3);
+  border: 1px solid var(--line);
+  border-radius: var(--radius-md);
+  background: var(--surface-panel);
+  color: var(--ink-1);
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.components-home-card:hover,
+.components-home-card:focus-visible {
+  border-color: var(--accent);
+}
+
+.components-home-card[aria-disabled="true"] {
+  cursor: default;
+  opacity: var(--opacity-disabled);
+}
+
+.components-home-poster {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  aspect-ratio: 16 / 9;
+  overflow: hidden;
+  border-radius: var(--radius-sm);
+  background: var(--surface-secondary);
+}
+
+.components-home-poster > * {
+  width: 100%;
+  height: 100%;
+}
+
+/* The kind's glyph where no picture can be drawn: the poster's own child, or
+   the preview's fallback inside `.component-stage`. Centred at 24, the shot
+   set's own grid. A glyph left unsized grows to the card's width and is
+   cropped by the poster. */
+.components-home-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  color: var(--ink-3);
+}
+
+.components-home-icon > svg {
+  flex: none;
+  width: 24px;
+  height: 24px;
+}
+
+.components-home-foot {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  min-width: 0;
+  padding-top: var(--space-2);
+}
+
+.components-home-name {
+  min-width: 0;
+  overflow: hidden;
+  font-size: var(--type-md);
+  font-weight: var(--weight-semibold);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.components-home-where {
+  color: var(--ink-3);
+  font-size: var(--type-sm);
+}
+
+/* The dashed New card: two verbs, no picture. */
+.components-home-card.is-new {
+  justify-content: center;
+  align-items: flex-start;
+  min-height: 140px;
+  padding: var(--space-6);
+  border-style: dashed;
+  background: transparent;
+  cursor: default;
+}
+
+.components-home-new-title {
+  font-size: var(--type-md);
+  font-weight: var(--weight-semibold);
+}
+
+.components-home-new-verbs {
+  display: flex;
+  gap: var(--space-3);
+  padding-top: var(--space-3);
+}
+
+/* The home's bar: the counts, then the search beside New component. */
+.components-home-counts {
+  flex: 0 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  color: var(--ink-3);
+  font-family: var(--font-mono);
+  font-size: var(--type-sm);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.components-home-search {
+  display: flex;
+  flex: 0 1 200px;
+  min-width: 96px;
+}
+
+.components-home-search > input {
+  width: 100%;
+  height: var(--control-h);
+  padding: 0 var(--space-4);
+  border: 1px solid var(--line);
+  border-radius: var(--radius-sm);
+  background: var(--surface-secondary);
+  color: var(--ink-1);
+  font: inherit;
+  font-size: var(--type-md);
+}
+
+/* ---- the way back and the crumb from a Shot (C7) ---------------------------- */
+/* "Back to Shot": the house button (`.btn`, G1 03) at the bar's control
+   height, the chevron tight to its edge. Blue is kept for the one primary. */
+.components-back-to-shot {
+  flex: none;
+  gap: var(--space-2);
+  height: var(--control-h);
+  padding: 0 var(--space-4) 0 var(--space-2);
+}
+
+.components-crumb-use {
+  flex: none;
+  color: var(--ink-3);
+  font-family: var(--font-mono);
+  font-size: var(--type-sm);
+  white-space: nowrap;
+}
+
+/* ---- a definition's Edit tab (C6): its layers in the left column ------------ */
+/* The Files panel's outline, scoped to the definition (FilePanel.tsx), in
+   place of the mode slot every other mode fills. */
+.shell.is-mode.is-component-edit .left-rail:not(.is-inserting) > .file-panel {
+  display: flex;
+}
+
+.shell.is-mode.is-component-edit .left-rail > .rail-mode {
+  display: none;
+}
+
+/* No subject, no clock: the timeline steps aside and the bottom row closes
+   (App.tsx writes it 0 tall). */
+.shell.is-components-empty > .timeline-dock {
+  display: none;
+}
+
+/* Nothing to inspect on the home: the right column has no occupant
+   (`boardRightPanel`), App writes its track 0 wide, and the empty cell is not
+   drawn, so it draws no seam. The board's rule (storyboard.css). */
+.shell.is-components-empty > .inspector-column[data-empty] {
+  display: none;
+}
+
+/* ---- the components list, in the left column (C1, C2) ---------------------- */
+/* ComponentLibraryRail.tsx: search (with a component open; the home's bar has
+   it otherwise), "This project", "Your library", then the 48 footer with
+   Browse Community. The list is the column's one scroller (`.rail-scroll`). */
+.components-search {
+  flex: none;
+}
+
+.components-section-head {
+  display: flex;
+  align-items: center;
+  gap: var(--space-4);
+  height: var(--panel-head-h);
+  padding: 0 var(--space-6);
+}
+
+.components-section-head.is-library {
+  margin-top: var(--space-4);
+  border-top: 1px solid var(--line);
+}
+
+.components-section-title {
+  flex: 1 1 auto;
+  min-width: 0;
+  margin: 0;
+  color: var(--ink-2);
+  font-size: var(--type-sm);
+  font-weight: var(--weight-semibold);
+  line-height: var(--leading-xs);
+  letter-spacing: var(--tracking-caps);
+  text-transform: uppercase;
+}
+
+.components-section-action {
+  flex: none;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: var(--accent-ink);
+  font-size: var(--type-md);
+  line-height: var(--leading-xs);
+  cursor: pointer;
+}
+
+.components-section-action:disabled {
+  color: var(--ink-3);
+  cursor: default;
+}
+
+.components-section-count {
+  flex: none;
+  color: var(--ink-3);
+  font-family: var(--font-mono);
+  font-size: var(--type-sm);
+  font-variant-numeric: var(--numeric);
+}
+
+/* The name field and the two kinds, one row under the head. */
+.components-new-row {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  padding: 0 var(--space-6) var(--space-4);
+}
+
+.components-new-name {
+  flex: 1 1 auto;
+  min-width: 0;
+  height: var(--control-h);
+  padding: 0 var(--space-4);
+  border: 1px solid var(--line);
+  border-radius: var(--radius-sm);
+  background: var(--surface-secondary);
+  color: var(--ink-1);
+  font: inherit;
+  font-size: var(--type-md);
+}
+
+.components-new-name:focus {
+  outline: none;
+  border-color: var(--accent);
+}
+
+.components-list {
+  margin: 0;
+  padding: 0 var(--space-3);
+  list-style: none;
+}
+
+.components-item {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  min-width: 0;
+  border-radius: var(--radius-sm);
+}
+
+.components-item:hover {
+  background: var(--fill-rest);
+}
+
+.components-item.is-current {
+  background: var(--accent-quiet);
+}
+
+/* One 28 row: tile, name (and home), kind. A button when it opens. */
+.components-item-main {
+  flex: 1 1 auto;
+  display: flex;
+  align-items: center;
+  gap: var(--space-4);
+  min-width: 0;
+  height: var(--control-h);
+  padding: 0 var(--space-4);
+  border: 0;
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: var(--ink-1);
+  font: inherit;
+  font-size: var(--type-md);
+  text-align: left;
+  cursor: pointer;
+}
+
+span.components-item-main {
+  cursor: default;
+}
+
+.components-item-main[aria-disabled="true"] {
+  color: var(--ink-3);
+  cursor: not-allowed;
+}
+
+.components-item-main:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
+
+.components-item-tile {
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  border-radius: var(--radius-xs);
+  background: var(--surface-secondary);
+  color: var(--ink-2);
+}
+
+.components-item-tile svg {
+  width: 12px;
+  height: 12px;
+}
+
+.components-item-name {
+  flex: 0 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.components-item-author {
+  flex: 0 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--ink-3);
+  font-size: var(--type-sm);
+}
+
+.components-item-kind {
+  flex: none;
+  margin-left: auto;
+  color: var(--ink-3);
+  font-family: var(--font-mono);
+  font-size: var(--type-micro);
+  letter-spacing: var(--tracking-caps);
+}
+
+.components-item.is-current .components-item-name,
+.components-item.is-current .components-item-kind {
+  color: var(--accent-ink);
+}
+
+.components-use-here {
+  flex: none;
+  height: 22px;
+  margin-right: var(--space-2);
+  padding: 0 var(--space-4);
+  border: 1px solid var(--line);
+  border-radius: var(--radius-xs);
+  background: transparent;
+  color: var(--ink-2);
+  font-size: var(--type-sm);
+  cursor: pointer;
+}
+
+.components-use-here:hover:not(:disabled) {
+  color: var(--ink-1);
+  border-color: var(--line-strong);
+}
+
+.components-rail-footer {
+  flex: 0 0 var(--tool-footer-h);
+  display: flex;
+  align-items: center;
+  padding: 0 var(--space-5);
+  border-top: 1px solid var(--line);
+}
+
+.components-browse {
+  flex: 1 1 auto;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: var(--control-h);
+  padding: 0 var(--space-5);
+  border: 0;
+  border-radius: var(--radius-sm);
+  background: var(--surface-secondary);
+  color: var(--ink-1);
+  font: inherit;
+  font-size: var(--type-md);
+  cursor: pointer;
+}
+
+.components-browse:disabled {
+  color: var(--ink-3);
+  cursor: default;
+}
+
+.components-browse-arrow {
+  color: var(--ink-3);
+}
+
+/* ---- the breadcrumb, in the canvas bar -------------------------------------- */
+.components-crumb {
+  flex: 0 1 auto;
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  min-width: 0;
+}
+
+.components-crumb-root {
+  flex: none;
+  color: var(--ink-3);
+  font-size: var(--type-lg);
+  white-space: nowrap;
+}
+
+/* "used in N places" opens Every use (C4), so it is a button that reads as
+   the crumb's quiet tail until it is hovered or pressed. */
+.components-crumb-uses {
+  flex: none;
+  padding: 0;
+  border: 0;
+  background: none;
+  color: var(--ink-3);
+  font-family: var(--font-mono);
+  font-size: var(--type-sm);
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+.components-crumb-uses:hover,
+.components-crumb-uses[aria-pressed="true"] {
+  color: var(--accent-ink);
+}
+
+/* ---- the Preview tab's transport, under the hole ---------------------------- */
+.components-transport {
+  flex: 0 0 var(--tool-footer-h);
+  display: flex;
+  align-items: center;
+  gap: var(--space-6);
+  padding: 0 var(--space-6);
+  border-top: 1px solid var(--line);
+  background: var(--surface-panel);
+  pointer-events: auto;
+}
+
+/* The play control (PlayButton.tsx, the dock's own). Positioned, for a
+   queued Play's ring. */
+.components-play {
+  position: relative;
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--control-h);
+  height: var(--control-h);
+  padding: 0;
+  border: 0;
+  border-radius: var(--radius-sm);
+  background: var(--surface-secondary);
+  color: var(--ink-1);
+  cursor: pointer;
+}
+
+/* A start `playHold` refuses: the one disabled strength. */
+.components-play:disabled {
+  opacity: var(--opacity-disabled);
+  cursor: default;
+}
+
+/* The glyph, a child: the ring's own svg sits inside `.play-ring`. */
+.components-play > svg {
+  width: 14px;
+  height: 14px;
+}
+
+/* A queued Play's ring sits inside the square, around the glyph: 4px in,
+   20px across. A circle outside it would cut the square's corners. The
+   stroke is set for that size, to the 1.5px the dock's 36px ring draws. */
+.components-play .play-ring {
+  inset: 4px;
+}
+
+.components-play .play-ring circle {
+  stroke-width: 2.7;
+}
+
+/* The loop length is the house select (`.select` in componentParts.tsx), so
+   it draws the house dropdown caret, not the system's arrow; here it only
+   takes the transport's look. Longhands, never `background` or `padding`:
+   those would wipe the caret and its lane. */
+.components-loop {
+  flex: none;
+  padding-left: var(--space-4);
+  border-color: var(--line);
+  border-radius: var(--radius-sm);
+  background-color: var(--surface-secondary);
+  color: var(--ink-2);
+  font-family: var(--font-mono);
+  font-size: var(--type-sm);
+}
+
+.components-progress {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.components-backdrop {
+  flex: none;
+}
+
+/* ---- the right panel: the ways out ------------------------------------------ */
+/* ComponentSidePanel.tsx, under the panel head and over the props. */
+.components-actions {
+  flex: none;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+  padding: var(--space-6) var(--space-6);
+  border-bottom: 1px solid var(--line);
+}
+
+.components-actions-row {
+  display: flex;
+  gap: var(--space-4);
+}
+
+.components-add-board {
+  flex: 1 1 auto;
+  height: var(--control-h);
+  border: 0;
+  border-radius: var(--radius-tab);
+  background: var(--accent);
+  color: var(--on-accent);
+  font: inherit;
+  font-size: var(--type-md);
+  font-weight: var(--weight-semibold);
+  cursor: pointer;
+}
+
+.components-add-board:disabled {
+  opacity: var(--opacity-disabled);
+  cursor: default;
+}
+
+.components-share-button {
+  flex: none;
+  height: var(--control-h);
+  padding: 0 var(--space-6);
+  border: 1px solid var(--line);
+  border-radius: var(--radius-tab);
+  background: var(--surface-secondary);
+  color: var(--ink-1);
+  font: inherit;
+  font-size: var(--type-md);
+  cursor: pointer;
+}
+
+.components-field {
+  display: flex;
+  align-items: center;
+  gap: var(--space-4);
+  min-width: 0;
+}
+
+.components-field-label {
+  flex: 0 0 84px;
+  color: var(--ink-3);
+  font-size: var(--type-sm);
+}
+
+.components-field > .select {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.components-actions-note {
+  margin: 0;
+  color: var(--success);
+  font-size: var(--type-sm);
+}
+
+/* Where the component lists (ComponentMembership): "Made for this project"
+   and "In your library", each a 28px row, then one `insp-note` line. A box
+   that cannot change is `aria-disabled`: dimmed, and still pressable so the
+   press can say why. */
+.components-membership {
+  display: flex;
+  flex-direction: column;
+}
+
+.components-membership-row {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  min-height: var(--control-h);
+  color: var(--ink-1);
+  font-size: var(--type-md);
+  cursor: pointer;
+}
+
+.components-membership-row > .checkbox[aria-disabled="true"] {
+  opacity: var(--opacity-disabled);
+  cursor: not-allowed;
+}
+
+/* ---- the right panel: History, in the props' place ------------------------- */
+.components-history {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+
+.components-history-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: var(--panel-head-h);
+  padding: 0 var(--space-6);
+  border-bottom: 1px solid var(--line);
+}
+
+.components-history-title {
+  margin: 0;
+  color: var(--ink-1);
+  font-size: var(--type-md);
+  font-weight: var(--weight-semibold);
+}
+
+.components-history-back,
+.components-history-done,
+.components-history-verb {
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: var(--accent-ink);
+  font: inherit;
+  font-size: var(--type-md);
+  cursor: pointer;
+}
+
+.components-history-verb {
+  color: var(--ink-3);
+  font-size: var(--type-sm);
+}
+
+.components-history-verb:hover:not(:disabled) {
+  color: var(--ink-1);
+}
+
+.components-history-verb:disabled {
+  opacity: var(--opacity-disabled);
+  cursor: default;
+}
+
+.components-history-list {
+  margin: 0;
+  padding: var(--space-3) 0;
+  list-style: none;
+}
+
+/* "No versions yet" and "Reading the versions…": the panel's own inset, the
+   head's and the rows' 12 a side, never flush against the column's edge. */
+.components-history .insp-empty {
+  padding: var(--space-5) var(--space-6);
+}
+
+.components-history-row {
+  display: flex;
+  align-items: center;
+  gap: var(--space-5);
+  height: var(--control-h);
+  padding: 0 var(--space-6);
+}
+
+.components-history-row.is-current {
+  background: var(--accent-quiet);
+}
+
+.components-history-row.is-head {
+  height: var(--panel-head-h);
+  border-bottom: 1px solid var(--line);
+}
+
+.components-history-version {
+  flex: none;
+  min-width: 28px;
+  color: var(--ink-1);
+  font-family: var(--font-mono);
+  font-size: var(--type-sm);
+}
+
+.components-history-when {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--ink-3);
+  font-size: var(--type-sm);
+}
+
+.components-history-file {
+  margin: 0;
+  padding: var(--space-4) var(--space-6);
+}
+
+.components-history-path {
+  margin-bottom: var(--space-3);
+  color: var(--ink-3);
+  font-family: var(--font-mono);
+  font-size: var(--type-sm);
+}
+
+.components-history-code {
+  max-height: 360px;
+  margin: 0;
+  overflow: auto;
+  padding: var(--space-5);
+  border-radius: var(--radius-sm);
+  background: var(--surface-secondary);
+  color: var(--ink-1);
+  font-family: var(--font-mono);
+  font-size: var(--type-sm);
+  line-height: var(--leading-xs);
+  white-space: pre;
+}
+
+.components-history-props {
+  margin: 0;
+  padding: var(--space-5) var(--space-6);
+  color: var(--ink-2);
+  font-size: var(--type-md);
+}
+
+/* ---- the right panel's footer ------------------------------------------------ */
+/* "Made by you · private · vN". Starts left, unlike the shot facts. */
+.components-footer {
+  justify-content: flex-start;
+}
+
+.components-footer-avatar {
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border-radius: var(--radius-full);
+  background: var(--surface-secondary);
+  color: var(--ink-2);
+}
+
+.components-footer-avatar {
+  overflow: hidden;
+  font-size: var(--type-micro);
+  font-weight: var(--weight-semibold);
+  line-height: var(--leading-none);
+}
+
+.components-footer-avatar svg {
+  width: 14px;
+  height: 14px;
+}
+
+.components-footer-avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.components-footer-who {
+  flex: none;
+  color: var(--ink-1);
+  white-space: nowrap;
+}
+
+.components-footer-meta {
+  flex: 0 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--ink-3);
+  font-family: var(--font-mono);
+  font-size: var(--type-sm);
+}
+
+.components-footer-verbs {
+  flex: none;
+  display: inline-flex;
+  gap: var(--space-5);
+  margin-left: auto;
+}
+
+/* ---- props from code: the New badge ----------------------------------------- */
+/* CodeDefaultsPanel.tsx: a key the previous version did not have. Its row is
+   a PropRow, whose label column takes only words, so the badge is DRAWN in
+   that column after the name, and the row's own badge element is for screen
+   readers only. The drawn copy has empty alt text so it is not read twice. A
+   new prop's name reads full strength.
+   THE BADGE SPACES ITSELF. It is a flex item of the column, whose 2px gap is
+   for the column's own parts (the dot, the words, the verbs) packed tight to
+   leave a long name its room, not a word's distance from a badge. Its margin
+   adds the rest of the 6px a badge keeps from its words everywhere else
+   (`--space-3`: the gap's `--space-1` plus this `--space-2`). */
+.code-default.is-new .prop-row-label {
+  color: var(--ink-1);
+}
+
+.code-default.is-new .prop-row-label::after {
+  content: "New" / "";
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  height: 16px;
+  margin-left: var(--space-2);
+  padding: 0 var(--space-2);
+  border-radius: var(--radius-xs);
+  background: var(--accent-quiet);
+  color: var(--accent-ink);
+  font-size: var(--type-micro);
+  font-weight: var(--weight-semibold);
+  line-height: var(--leading-none);
+}
+
+.component-new-badge {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+/* The props head's Reset (C1, C2): quiet text beside the section title. */
+.props-head-reset {
+  padding: 0;
+  border: 0;
+  background: none;
+  color: var(--ink-3);
+  font-size: var(--type-sm);
+  line-height: var(--leading-xs);
+  cursor: pointer;
+}
+
+.props-head-reset:hover:not(:disabled) {
+  color: var(--ink-1);
+}
+
+.props-head-reset:disabled {
+  color: var(--ink-3);
+  cursor: default;
+}
+
+/* "Apply to all instances" (ApplyAllToggle): the first thing in the props
+   section, so the author knows whether an edit is tried or saved before
+   making one. */
+.props-apply {
+  padding: var(--space-2) var(--space-6) var(--space-4);
+  border-bottom: 1px solid var(--line);
+  margin-bottom: var(--space-2);
+}
+
+.props-apply-row {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  color: var(--ink-1);
+  font-size: var(--type-md);
+  line-height: var(--leading-xs);
+  cursor: pointer;
+}
+
+.props-apply-note {
+  margin: var(--space-2) 0 0;
+  color: var(--ink-3);
+  font-size: var(--type-sm);
+}
+
+.code-defaults-note {
+  margin: 0;
+  padding: var(--space-5) var(--space-6);
+  color: var(--ink-3);
+  font-size: var(--type-sm);
+}
+
+/* ---- the use marks (C4), shared by Every use, THIS USE and the inspector ---- */
+/* The blue dot itself (`.use-dot`, a prop changed for this use only) is the
+   house widget's, drawn by PropRow in every prop row (widgets.css). */
+
+/* "1 change: Tilt", "Update available · v4". */
+.use-chip {
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-3);
+  height: 24px;
+  padding: 0 var(--space-4);
+  border-radius: var(--radius-xs);
+  background: var(--accent-quiet);
+  color: var(--accent-ink);
+  font-size: var(--type-sm);
+  font-weight: var(--weight-semibold);
+  line-height: var(--leading-xs);
+  white-space: nowrap;
+}
+
+.use-update-button {
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: var(--control-h);
+  padding: 0 var(--space-6);
+  border: 0;
+  border-radius: var(--radius-tab);
+  background: var(--accent);
+  color: var(--on-accent);
+  font-size: var(--type-md);
+  font-weight: var(--weight-semibold);
+  line-height: var(--leading-xs);
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+.use-update-button:disabled {
+  opacity: var(--opacity-disabled);
+  cursor: default;
+}
+
+/* The owner's picture of the button their users see: it does nothing here. */
+.use-update-button.is-picture {
+  cursor: default;
+}
+
+/* ---- Every use, in the canvas cell (C4) ------------------------------------- */
+/* The list takes the preview's place: no stage, no transport. */
+.every-use {
+  flex: 1 1 auto;
+  min-width: 0;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+  padding: var(--space-7) var(--space-8);
+  overflow-y: auto;
+  background: var(--surface-app);
+  pointer-events: auto;
+}
+
+.every-use-head {
+  flex: none;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-4);
+  min-height: 28px;
+}
+
+.every-use-caps {
+  margin: 0;
+  color: var(--ink-2);
+  font-size: var(--type-sm);
+  font-weight: var(--weight-semibold);
+  line-height: var(--leading-xs);
+  letter-spacing: var(--tracking-caps);
+  text-transform: uppercase;
+}
+
+.every-use-note {
+  min-width: 0;
+  color: var(--ink-3);
+  font-size: var(--type-sm);
+  line-height: var(--leading-xs);
+}
+
+.every-use-empty {
+  margin: 0;
+  color: var(--ink-3);
+  font-size: var(--type-sm);
+  line-height: var(--leading-xs);
+}
+
+.every-use-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.every-use-row {
+  display: flex;
+  align-items: center;
+  gap: var(--space-6);
+  padding: var(--space-4);
+  border: 1px solid var(--line);
+  border-radius: var(--radius-md);
+  background: var(--surface-panel);
+}
+
+.every-use-row.is-selected {
+  border-color: var(--accent);
+  background: var(--accent-quiet);
+}
+
+/* The row's body is one button: picking it shows THIS USE. */
+.every-use-pick {
+  flex: 1 1 auto;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: var(--space-6);
+  padding: 0;
+  border: 0;
+  background: none;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.every-use-thumb {
+  flex: none;
+  width: 96px;
+  height: 54px;
+  border-radius: var(--radius-sm);
+  background: var(--surface-app);
+}
+
+.every-use-text {
+  flex: 1 1 auto;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+}
+
+.every-use-line {
+  display: flex;
+  align-items: center;
+  gap: var(--space-4);
+  min-width: 0;
+}
+
+.every-use-kind {
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  height: 18px;
+  padding: 0 var(--space-3);
+  border-radius: var(--radius-xs);
+  background: var(--surface-secondary);
+  color: var(--ink-2);
+  font-size: var(--type-micro);
+  font-weight: var(--weight-semibold);
+  line-height: var(--leading-none);
+  letter-spacing: var(--tracking-caps);
+}
+
+.every-use-title {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--ink-1);
+  font-size: var(--type-md);
+  font-weight: var(--weight-semibold);
+  line-height: var(--leading-xs);
+}
+
+.every-use-location {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--ink-3);
+  font-size: var(--type-sm);
+  line-height: var(--leading-xs);
+}
+
+.every-use-nochange {
+  flex: none;
+  padding-right: var(--space-4);
+  color: var(--ink-3);
+  font-size: var(--type-sm);
+  line-height: var(--leading-xs);
+  white-space: nowrap;
+}
+
+.every-use-go {
+  flex: none;
+  height: var(--control-h);
+  padding: 0 var(--space-5);
+  border: 0;
+  border-radius: var(--radius-sm);
+  background: var(--surface-secondary);
+  color: var(--ink-2);
+  font-size: var(--type-md);
+  line-height: var(--leading-xs);
+  cursor: pointer;
+}
+
+.every-use-go:hover {
+  color: var(--ink-1);
+}
+
+/* ---- Community copies: the owner's side ------------------------------------ */
+.every-use-community {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+  padding-top: var(--space-4);
+  border-top: 1px solid var(--line);
+}
+
+.every-use-preview {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+  padding: var(--space-6);
+  border: 1px dashed var(--line-strong);
+  border-radius: var(--radius-md);
+}
+
+.every-use-tile {
+  flex: none;
+  width: 28px;
+  height: 28px;
+  border-radius: var(--radius-sm);
+  background: var(--accent-quiet);
+}
+
+.every-use-help {
+  margin: 0;
+  color: var(--ink-3);
+  font-size: var(--type-sm);
+  line-height: var(--leading-xs);
+}
+
+/* ---- THIS USE, in the right panel (C4) -------------------------------------- */
+.this-use {
+  display: flex;
+  flex-direction: column;
+}
+
+.this-use-head {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+  padding: var(--space-6) var(--space-6);
+  border-bottom: 1px solid var(--line);
+}
+
+.this-use-titles {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+  min-width: 0;
+}
+
+.this-use-caps {
+  color: var(--ink-2);
+  font-size: var(--type-sm);
+  font-weight: var(--weight-semibold);
+  line-height: var(--leading-xs);
+  letter-spacing: var(--tracking-caps);
+  text-transform: uppercase;
+}
+
+.this-use-title {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--ink-1);
+  font-size: var(--type-lg);
+  font-weight: var(--weight-semibold);
+  line-height: var(--leading-sm);
+}
+
+.this-use-linked {
+  color: var(--ink-3);
+  font-size: var(--type-sm);
+  line-height: var(--leading-xs);
+}
+
+/* Edit master and Detach, and the Update flow's verbs, are a house row of
+   buttons (`.insp-buttons`, widgets.css): 28px house buttons, 6px apart,
+   sharing the row by their words. Nothing here sizes or restyles them. */
+
+/* "Reset all to master": a text link, in the props head or under the verbs. */
+.this-use-reset-all {
+  padding: 0;
+  border: 0;
+  background: none;
+  color: var(--accent-ink);
+  font-size: var(--type-sm);
+  line-height: var(--leading-xs);
+  cursor: pointer;
+}
+
+.this-use-reset-all.is-inline {
+  align-self: flex-start;
+}
+
+.this-use-reset-all:disabled {
+  color: var(--ink-3);
+  cursor: default;
+}
+
+.this-use-props {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+  padding: var(--space-6) var(--space-6);
+}
+
+.this-use-props-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 28px;
+}
+
+/* C4's prop rows are PropRows (UsePropRow): the label column with the dot
+   and the reset, then the control, at the inspector's own type and rhythm,
+   so a prop reads the same here as in the Studio. Nothing restyles them. */
+
+.this-use-help {
+  margin: 0;
+  padding-top: var(--space-3);
+  color: var(--ink-3);
+  font-size: var(--type-sm);
+  line-height: var(--leading-xs);
+}
+
+/* C7's facts about the use in its Shot, and the master's other uses. */
+.origin-facts {
+  display: grid;
+  grid-template-columns: 84px 1fr;
+  gap: var(--space-2) var(--space-3);
+  margin: 0;
+  font-size: var(--type-md);
+}
+
+.origin-facts > dt {
+  color: var(--ink-3);
+}
+
+/* Where the use sits and when it is on screen: numbers, in the numeral face. */
+.origin-facts > dd {
+  margin: 0;
+  color: var(--ink-1);
+  font-family: var(--font-numeric);
+  font-variant-numeric: var(--numeric);
+}
+
+.origin-uses {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.origin-use {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+  font-size: var(--type-md);
+}
+
+.origin-use-changes {
+  color: var(--ink-3);
+  font-size: var(--type-sm);
+}
+
+/* The Studio inspector's way into Components, at rest above This use. */
+.in-the-studio {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+  padding: var(--space-6);
+  border-bottom: 1px solid var(--line);
+}
+
+.in-the-studio-row {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  min-width: 0;
+}
+
+.in-the-studio-icon {
+  display: flex;
+  flex: none;
+  color: var(--ink-2);
+}
+
+.in-the-studio-name {
+  min-width: 0;
+  overflow: hidden;
+  color: var(--ink-1);
+  font-size: var(--type-md);
+  font-weight: var(--weight-semibold);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.in-the-studio-open {
+  height: var(--control-h);
+  border: 1px solid var(--accent);
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: var(--accent-ink);
+  font: inherit;
+  font-size: var(--type-md);
+  cursor: pointer;
+}
+
+.in-the-studio-open:hover {
+  background: var(--surface-secondary);
+}
+
+.in-the-studio > .this-use-help {
+  padding-top: 0;
+}
+
+/* Update available, and the list of what it would drop. */
+.this-use-update {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+}
+
+.this-use-update-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-4);
+}
+
+.this-use-update-confirm {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+}
+
+/* Cancel and Done are house buttons in the row's recipe (28px, level with
+   the 28px accent Update beside them). They keep their words rather than
+   taking the rest of the row: the accent verb is the one that leads. */
+.this-use-update-confirm .btn {
+  flex: none;
+}
+
+.this-use-removed {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.this-use-removed li {
+  display: flex;
+  gap: var(--space-4);
+  font-size: var(--type-sm);
+  line-height: var(--leading-xs);
+}
+
+.this-use-removed-where {
+  color: var(--ink-1);
+}
+
+.this-use-removed-keys {
+  min-width: 0;
+  overflow-wrap: anywhere;
+  color: var(--ink-3);
+  font-family: var(--font-mono);
+}
+
+/* The props head's Reset stays readable: the section's actions dim otherwise. */
+.insp-section-actions:has(> .props-head-reset) {
+  opacity: 1;
+}