@mythicalos/ui-core 0.2.1 → 0.3.0

package/styles.css

@@ -327,3 +327,753 @@ a:focus-visible, .link:focus-visible, .is-focus {
 /* design rule 6 — the shared focus ring, restated rather than added to the BASE selector list
    above for the same reason the rules above live here */
 .input-reveal__btn:focus-visible { outline: 2px solid var(--my-accent); outline-offset: 2px; }
+
+/* ══════════════════════════════════════════════════════════════════════════════════════════
+   SMALL ATOMS — save bar · stat tiles · git status chip. Each was registered in the design
+   system but implemented only inside one product; these rules are taken from the cards
+   (ds/layouts-settings.html, ds/components-stat-tiles.html, ds/components-git-chip.html) with
+   colors/font-sizes remapped onto canonical --my-* tokens. Where the product's local sheet and
+   the card differed, the CARD wins and the delta is noted inline.
+   ══════════════════════════════════════════════════════════════════════════════════════════ */
+
+/* save bar (ds/layouts-settings.html `.save`) — full-bleed bottom, slides up only when dirty.
+   The card draws it `position:absolute` inside its own bordered screen frame; a packaged atom has
+   no such frame to anchor to, so it is `fixed` to the viewport (what the reference product's
+   sheet does too) — a consumer that needs it scoped to a pane overrides `position` via the
+   passthrough class. Padding is the card's `9px 16px`; the product's own sheet insets it to 24px
+   horizontally, which a consumer can restore from its own sheet. */
+.my-savebar {
+  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
+  background: var(--my-surface); border-top: 1px solid var(--my-border);
+  display: flex; align-items: center; gap: 10px;
+  padding: 9px var(--my-sp-4); font-size: var(--my-fs-caption); /* the card's 9px 16px */
+  animation: my-savebar-up 180ms ease-out; /* the card's "slides up (180ms)" */
+}
+@keyframes my-savebar-up { from { transform: translateY(100%); } }
+@media (prefers-reduced-motion: reduce) { .my-savebar { animation: none; } }
+.my-savebar__note { color: var(--my-muted); }
+.my-savebar__count { color: var(--my-ink); font-weight: var(--my-fw-bold); }
+.my-savebar__actions { margin-left: auto; display: flex; gap: var(--my-sp-2); }
+
+/* stat tiles (ds/components-stat-tiles.html `.tiles`/`.tile`) — mono, tabular-nums, micro key +
+   mono sub-caption. The card sizes tiles by content off a 112px floor; the reference product's
+   sheet additionally stretches them with `flex: 1`, which a consumer can restore from its own
+   sheet (`.my-stat-tiles > .my-stat-tile { flex: 1 }`). */
+.my-stat-tiles { display: flex; gap: 10px; flex-wrap: wrap; }
+.my-stat-tile {
+  min-width: 112px; background: var(--my-surface);
+  border: 1px solid var(--my-border); border-radius: var(--my-r-card); padding: 10px 12px;
+}
+.my-stat-tile__label {
+  font-size: var(--my-fs-micro); /* card: 10px, no exact token step */
+  font-weight: var(--my-fw-bold); text-transform: uppercase; letter-spacing: .4px;
+  color: var(--my-muted);
+}
+.my-stat-tile__value {
+  font-family: var(--my-font-mono);
+  font-size: var(--my-fs-body-lg); /* card: 17px, nearest token step */
+  font-weight: var(--my-fw-bold); font-variant-numeric: tabular-nums; margin-top: 2px;
+}
+.my-stat-tile__sub {
+  font-family: var(--my-font-mono);
+  font-size: var(--my-fs-micro); /* card: 10.5px, no exact token step */
+  color: var(--my-muted);
+}
+/* the card's "brag" number (`.tile.save .v` → --my-accent-strong) */
+.my-stat-tile--accent .my-stat-tile__value { color: var(--my-accent-strong); }
+/* band tint (token rule #4 thresholds live with the caller, only the tint is here) */
+.my-stat-tile--warn { border-color: var(--my-warn); }
+.my-stat-tile--warn .my-stat-tile__value { color: var(--my-warn); }
+.my-stat-tile--error { border-color: var(--my-error); }
+.my-stat-tile--error .my-stat-tile__value { color: var(--my-error); }
+
+/* git status chip (ds/components-git-chip.html `.gitchip`/`.gitflag`) — a bordered inline mono
+   chip. The flags are the card's own squared 4px badge, NOT the pill `.my-chip`: inside a mono
+   chip the card gives them a tighter, squared shape, and design rule #10 reserves the pill for
+   stand-alone non-interactive tags.
+
+   Three deliberate deltas from the card, all recorded here (and pinned by
+   test/css-small-atoms.test.ts) rather than left to be discovered:
+     - `flex-wrap: wrap` on the chip and its flag group. The card demonstrates the chip inside a
+       fixed 820px panel where it cannot run out of room; a packaged atom renders at whatever width
+       the consumer gives it, and a long branch name plus three flags must wrap rather than
+       overflow its container.
+     - the branch keeps the card's inherited weight (NOT bold). The product's local sheet bolds it;
+       the card does not, so the card wins.
+     - the flag weight is `--my-fw-bold` (650), where the card's literal is 700. There is no 700
+       step on the canonical --my-fw-* scale, and the additions section above already normalizes
+       badge weights onto the nearest token (`.my-chip` does exactly this). */
+.my-gitchip {
+  display: inline-flex; gap: 10px; align-items: center; flex-wrap: wrap; /* delta 1 */
+  font-family: var(--my-font-mono); font-size: var(--my-fs-caption);
+  border: 1px solid var(--my-border); border-radius: var(--my-r-control);
+  padding: 6px 10px; background: var(--my-surface);
+}
+.my-gitchip__branch { color: var(--my-ink); } /* delta 2 — card weight, not the product's bold */
+.my-gitchip__flags { display: inline-flex; gap: 6px; flex-wrap: wrap; align-items: center; }
+.my-gitchip__flag {
+  font-size: var(--my-fs-micro); /* card: 10px, no exact token step */
+  font-weight: var(--my-fw-bold); /* delta 3 — card: 700, no exact token step */
+  letter-spacing: .3px; border-radius: 4px; padding: 2px 6px;
+}
+.my-gitchip__flag--warn  { background: var(--my-warn-soft);  color: var(--my-warn); }
+.my-gitchip__flag--error { background: var(--my-error-soft); color: var(--my-error); }
+.my-gitchip__flag--ok    { background: var(--my-ok-soft);    color: var(--my-ok); }
+/* the honest unavailable arm: the branch slot is muted and the note carries the reason in UI type */
+.my-gitchip--unavailable .my-gitchip__branch { color: var(--my-muted); }
+.my-gitchip__note { font-family: var(--my-font-ui); color: var(--my-muted); }
+/* a retained (not current) status — flagged on BOTH arms */
+.my-gitchip--stale { border-color: var(--my-warn); }
+.my-gitchip__stale { color: var(--my-warn); font-size: var(--my-fs-micro); }
+
+/* ── dropdown popover (ds/components-popover — registry row `popover` v1) ──
+   The design card: a chip trigger over a panel anchored 6px below it, --my-shadow-modal, high
+   z-index, ✓ marking the current row. Two card values are normalized onto the canonical scale the
+   way the additions section above already does: the card's 12.5px/10px body text → --my-fs-caption
+   (12px) / --my-fs-micro (11px), and its literal 6px item radius → --my-r-control (6px, the same
+   number — now expressed as the token shape rule 10 demands for anything clickable).
+   Placement is state-driven, never inline-styled: the bindings toggle .my-pop--above /
+   .my-pop--end from @mythicalos/ui-core's resolvePopoverPosition, mirroring <mythical-select>'s
+   [data-flip].
+   CONSUMER CONTRACT (design card, verbatim): "Ancestors must never clip it." The panel is
+   position:absolute inside .my-pop-anchor, so any ancestor with overflow:hidden/auto or its own
+   stacking context will crop or bury it — give that ancestor room, not this component a portal. */
+.my-pop-anchor { position: relative; display: inline-block; }
+
+.my-pop-trigger {
+  display: inline-flex; align-items: center; gap: var(--my-sp-2);
+  /* shape rule 10 — the trigger is clickable, so it is SQUARED (--my-r-control); the pill radius
+     is reserved for non-interactive status tags */
+  border: 1px solid var(--my-control-border); border-radius: var(--my-r-control);
+  padding: 5px 12px; font-family: inherit; font-size: var(--my-fs-caption);
+  background: var(--my-surface); color: var(--my-ink); cursor: pointer;
+  transition: background var(--my-t-fast), border-color var(--my-t-fast);
+}
+.my-pop-trigger:hover:not(:disabled):not(.is-disabled) { background: var(--my-surface-hover); }
+/* Open state — NOT on the design card (which draws a single, already-open popover and so has no
+   closed/open pair to distinguish). It is not an invention either: this is verbatim what the
+   package's other floating control does, `:host([data-open]) button{border-color:var(--my-accent)}`
+   in src/select/mythical-select.js. Two anchored dropdowns in one package must not disagree about
+   what an open trigger looks like, so the popover follows the select. */
+.my-pop-trigger.is-open { border-color: var(--my-accent); }
+.my-pop-trigger:disabled, .my-pop-trigger.is-disabled {
+  background: var(--my-disabled-bg); color: var(--my-disabled-ink);
+  border-color: transparent; cursor: not-allowed;
+}
+.my-pop-trigger__label { color: var(--my-muted); }
+.my-pop-trigger__value { font-weight: var(--my-fw-medium); }
+.my-pop-trigger__caret { color: var(--my-muted); font-size: var(--my-fs-micro); flex: none; }
+.my-pop-trigger:disabled .my-pop-trigger__label,
+.my-pop-trigger.is-disabled .my-pop-trigger__label,
+.my-pop-trigger:disabled .my-pop-trigger__caret,
+.my-pop-trigger.is-disabled .my-pop-trigger__caret { color: var(--my-disabled-ink); }
+
+.my-pop {
+  position: absolute; top: calc(100% + 6px); left: 0; z-index: 30;
+  /* min-width only, per the card — the panel grows to its widest row rather than truncating it */
+  /* 6px is the card's own panel padding and has no step on the --my-sp-* scale (4 / 8); it is
+     kept literal rather than rounded, exactly as the trigger's 5px 12px and the row's 7px 10px
+     are — this block's spacing comes from the card, only its colors/radii/fonts are tokenized. */
+  min-width: 210px; padding: 6px;
+  background: var(--my-surface); border: 1px solid var(--my-border); /* panel edge = a card boundary, not a control one */
+  border-radius: var(--my-r-card); box-shadow: var(--my-shadow-modal);
+}
+/* viewport-aware flip — same rule as <mythical-select>'s :host([data-flip]) #pop */
+.my-pop--above { top: auto; bottom: calc(100% + 6px); }
+.my-pop--end { left: auto; right: 0; }
+
+.my-pop__head { display: flex; flex-direction: column; gap: 2px; padding: 6px 10px 8px; }
+.my-pop__title { font-size: var(--my-fs-caption); font-weight: var(--my-fw-bold); color: var(--my-ink); }
+.my-pop__caption { font-size: var(--my-fs-micro); color: var(--my-muted); }
+
+/* The role="menu" element NESTED in the panel: it owns ONLY the rows, so the head and the
+   caller's footer stay siblings of it (a menu may not own arbitrary content). Purely structural —
+   it adds no box of its own. */
+.my-pop__menu { display: flex; flex-direction: column; }
+
+.my-pop__item {
+  display: flex; align-items: center; justify-content: space-between; gap: 14px;
+  /* border-box explicitly: this sheet declares no global reset (same reason the .input-reveal rules
+     above restate it), so a full-width row's padding must not be left to the UA's or a consumer's
+     box model — otherwise the row, its hover fill and its focus ring overhang the panel's padding. */
+  width: 100%; box-sizing: border-box; padding: 7px 10px; border: 0; background: none;
+  border-radius: var(--my-r-control); /* shape rule 10 — a row is clickable, so squared */
+  font-family: inherit; font-size: var(--my-fs-caption); color: var(--my-ink);
+  text-align: left; cursor: pointer;
+}
+.my-pop__item:hover:not(:disabled):not(.is-disabled) { background: var(--my-surface-hover); }
+.my-pop__item.is-selected { color: var(--my-accent-strong); font-weight: var(--my-fw-medium); }
+.my-pop__item:disabled, .my-pop__item.is-disabled { color: var(--my-disabled-ink); cursor: not-allowed; }
+/* The panel is min-width-only, so this truncation is INERT by default (the panel widens to fit).
+   It engages solely when a consumer constrains the panel's width themselves — then a long label
+   ellipsises instead of tearing the row's layout apart. */
+.my-pop__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.my-pop__check { flex: none; }
+
+.my-pop__div { height: 1px; margin: var(--my-sp-1) 0; background: var(--my-border); }
+.my-pop__foot { display: block; }
+
+/* design rule 6 — the shared focus ring, identical in both themes, on every interactive control
+   here (restated locally for the same reason the input-reveal rules above are) */
+.my-pop-trigger:focus-visible, .my-pop__item:focus-visible {
+  outline: 2px solid var(--my-accent); outline-offset: 2px;
+
+/* ── file explorer & markdown preview (ds/components-file-explorer) ────────
+   A READ-ONLY two-pane explorer: the rail (header + scope picker + tree) and the preview pane
+   (breadcrumb + size/mtime header + rendered body). Every class here is derived by
+   src/logic/file-explorer.ts — this sheet only gives those class strings their look.
+
+   Two tree modes share these rules and differ only in which rows classify as what:
+   a bind MOUNT root is mono + muted (⌂); a REPO is accent-strong (⎇). See the logic module.
+
+   The four honest states (unavailable · empty · too-large · binary) each get their own modifier
+   so they are distinctly styleable, but ALL of them inherit the neutral muted note tone: none is
+   painted as a failure, because none of them is one. */
+
+.my-files__rail {
+  display: flex; flex-direction: column; min-height: 0;
+  background: var(--my-surface); border: 1px solid var(--my-border);
+  border-radius: var(--my-r-card); overflow: hidden;
+}
+.my-files__hd { padding: var(--my-sp-3); border-bottom: 1px solid var(--my-border); flex: none; }
+.my-files__ti {
+  display: flex; align-items: center; gap: 7px;
+  font-size: var(--my-fs-micro); font-weight: var(--my-fw-bold);
+  color: var(--my-muted); text-transform: uppercase; letter-spacing: .4px;
+}
+.my-files__count { font-weight: var(--my-fw-regular); text-transform: none; letter-spacing: 0; }
+.my-files__branch {
+  margin-left: auto; display: flex; align-items: center; gap: 5px;
+  font-family: var(--my-font-mono); font-size: var(--my-fs-micro);
+  font-weight: var(--my-fw-regular); color: var(--my-muted);
+  text-transform: none; letter-spacing: 0;
+}
+.my-files__branch-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--my-ok); flex: none; }
+
+/* scope picker — a plain disclosure of buttons (no ARIA menu claim) */
+.my-files__scope { position: relative; margin-top: 9px; }
+.my-files__scope-btn, .my-files__scope-static {
+  width: 100%; display: flex; align-items: center; gap: var(--my-sp-2);
+  border: 1px solid var(--my-border); border-radius: 7px; padding: 6px 10px;
+  background: var(--my-bg); color: var(--my-ink);
+  font: inherit; font-size: var(--my-fs-caption); text-align: left;
+}
+.my-files__scope-btn { cursor: pointer; transition: border-color var(--my-t-fast); }
+.my-files__scope-btn:hover { border-color: var(--my-control-border); }
+.my-files__scope-btn:focus-visible { outline: 2px solid var(--my-accent); outline-offset: 2px; }
+.my-files__scope-glyph { color: var(--my-accent); font-size: var(--my-fs-micro); flex: none; }
+.my-files__scope-label {
+  flex: 1; min-width: 0; white-space: nowrap; overflow: hidden;
+  text-overflow: ellipsis; font-weight: var(--my-fw-bold);
+}
+.my-files__scope-caret { color: var(--my-muted); font-size: var(--my-fs-micro); flex: none; }
+.my-files__scope-menu {
+  position: absolute; left: 0; right: 0; top: calc(100% + 5px); z-index: 10;
+  background: var(--my-surface); border: 1px solid var(--my-border);
+  border-radius: 9px; box-shadow: var(--my-shadow-modal); padding: 5px;
+}
+.my-files__scope-it {
+  width: 100%; display: flex; align-items: center; gap: var(--my-sp-2);
+  border: 0; border-radius: var(--my-r-control); padding: 7px 9px;
+  background: none; color: var(--my-ink);
+  font: inherit; font-size: var(--my-fs-caption); text-align: left; cursor: pointer;
+}
+.my-files__scope-it:hover { background: var(--my-surface-hover); }
+.my-files__scope-it:focus-visible { outline: 2px solid var(--my-accent); outline-offset: -2px; }
+.my-files__scope-it--on {
+  background: var(--my-accent-soft); color: var(--my-accent-strong); font-weight: var(--my-fw-bold);
+}
+.my-files__scope-it-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.my-files__scope-it-count { margin-left: auto; font-family: var(--my-font-mono); font-size: var(--my-fs-micro); color: var(--my-muted); }
+.my-files__scope-it--on .my-files__scope-it-count { color: var(--my-accent-strong); }
+.my-files__scope-divider { height: 1px; background: var(--my-border); margin: var(--my-sp-1) 6px; }
+
+/* tree + rows — the WHOLE ROW is the hit target */
+.my-files__tree { flex: 1; min-height: 0; overflow: auto; padding: 7px 7px var(--my-sp-3); }
+.my-files__row {
+  width: 100%; display: flex; align-items: center; gap: 7px;
+  border: 0; border-radius: var(--my-r-control); padding: 5px var(--my-sp-2);
+  background: none; color: var(--my-ink);
+  font: inherit; font-size: var(--my-fs-caption); text-align: left;
+  cursor: pointer; margin-bottom: 1px;
+}
+.my-files__row:hover { background: var(--my-surface-hover); }
+.my-files__row:focus-visible { outline: 2px solid var(--my-accent); outline-offset: -2px; }
+.my-files__row--sel { background: var(--my-accent-soft); color: var(--my-accent-strong); }
+.my-files__row--sel .my-files__fname { font-weight: var(--my-fw-bold); }
+.my-files__chev { color: var(--my-muted); font-size: var(--my-fs-micro); width: 10px; flex: none; }
+.my-files__glyph { color: var(--my-accent); width: 12px; flex: none; text-align: center; }
+.my-files__spacer { width: 14px; flex: none; }
+.my-files__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+/* a bind MOUNT reads as a path: mono + muted. A REPO reads as a repo: accent-strong. */
+.my-files__row--mount .my-files__name { font-family: var(--my-font-mono); color: var(--my-muted); }
+.my-files__row--repo .my-files__name { font-weight: var(--my-fw-bold); color: var(--my-accent-strong); }
+.my-files__row--dir .my-files__name { font-weight: var(--my-fw-medium); }
+/* a file row is the leaf: no structural emphasis, the mono name carries it */
+.my-files__row--file { font-weight: var(--my-fw-regular); }
+.my-files__fglyph {
+  font-family: var(--my-font-mono); font-size: var(--my-fs-micro);
+  color: var(--my-muted); width: 15px; flex: none; text-align: center;
+}
+.my-files__fname {
+  min-width: 0; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+  font-family: var(--my-font-mono); font-size: var(--my-fs-caption);
+}
+.my-files__badge {
+  margin-left: auto; flex: none; border-radius: var(--my-r-pill); padding: 1.5px 7px;
+  font-size: var(--my-fs-micro); font-weight: var(--my-fw-bold); white-space: nowrap;
+}
+.my-files__badge--accent { background: var(--my-accent-soft); color: var(--my-accent-strong); }
+.my-files__badge--muted { background: var(--my-disabled-bg); color: var(--my-muted); }
+.my-files__mark { font-family: var(--my-font-mono); font-size: var(--my-fs-micro); font-weight: var(--my-fw-bold); flex: none; }
+.my-files__mark--warn { color: var(--my-warn); }
+.my-files__mark--ok { color: var(--my-ok); }
+.my-files__mark--muted { color: var(--my-muted); }
+
+/* notes — the honest states and the two informational rows. ONE neutral tone for all of them. */
+.my-files__note { display: block; padding: 5px var(--my-sp-2); font-size: var(--my-fs-micro); color: var(--my-muted); }
+.my-files__note--loading, .my-files__note--truncated,
+.my-files__note--unavailable, .my-files__note--empty,
+.my-files__note--too-large, .my-files__note--binary { color: var(--my-muted); }
+
+/* indent steps — depth-capped by indentClass(); deeper rows share the last step */
+.my-files__d0 { padding-left: var(--my-sp-2); }
+.my-files__d1 { padding-left: 22px; }
+.my-files__d2 { padding-left: 36px; }
+.my-files__d3 { padding-left: 50px; }
+.my-files__d4 { padding-left: 64px; }
+.my-files__d5 { padding-left: 78px; }
+.my-files__d6 { padding-left: 92px; }
+.my-files__d7 { padding-left: 106px; }
+.my-files__d8 { padding-left: 120px; }
+.my-files__d9 { padding-left: 134px; }
+.my-files__d10 { padding-left: 148px; }
+
+/* preview pane */
+.my-files__prev {
+  background: var(--my-surface); border: 1px solid var(--my-border);
+  border-radius: var(--my-r-card); overflow: hidden;
+}
+.my-files__prev-hd {
+  padding: 13px 18px; border-bottom: 1px solid var(--my-border);
+  display: flex; align-items: center; gap: 14px;
+}
+.my-files__prev-main { min-width: 0; }
+.my-files__crumb {
+  font-family: var(--my-font-mono); font-size: var(--my-fs-micro); color: var(--my-muted);
+  overflow-wrap: anywhere;
+}
+.my-files__name-row { display: flex; align-items: center; gap: 9px; margin-top: 3px; }
+.my-files__prev-name { font-family: var(--my-font-mono); font-size: var(--my-fs-body-lg); overflow-wrap: anywhere; }
+.my-files__pill {
+  border-radius: var(--my-r-pill); padding: 2px 9px; flex: none;
+  font-size: var(--my-fs-micro); font-weight: var(--my-fw-bold);
+}
+.my-files__pill--warn { background: var(--my-warn-soft); color: var(--my-warn); }
+.my-files__pill--ok { background: var(--my-ok-soft); color: var(--my-ok); }
+.my-files__pill--muted { background: var(--my-disabled-bg); color: var(--my-muted); }
+.my-files__meta {
+  margin-left: auto; display: flex; gap: 14px; flex: none;
+  font-family: var(--my-font-mono); font-size: var(--my-fs-micro); color: var(--my-muted);
+}
+.my-files__prev-bd { padding: var(--my-sp-4) 18px; font-size: var(--my-fs-body); }
+.my-files__md { max-width: 720px; }
+.my-files__md h1 { font-size: var(--my-fs-h3); font-weight: var(--my-fw-bold); letter-spacing: -.3px; margin-bottom: 6px; }
+.my-files__md p { color: var(--my-ink); margin: var(--my-sp-2) 0; }
+.my-files__md code {
+  font-family: var(--my-font-mono); font-size: .88em;
+  background: var(--my-surface-hover); border: 1px solid var(--my-border);
+  border-radius: var(--my-sp-1); padding: 1px 5px;
+}
+.my-files__md blockquote {
+  margin: 10px 0; padding: 7px 13px;
+  border-left: 3px solid var(--my-accent); background: var(--my-accent-soft);
+  border-radius: 0 var(--my-sp-2) var(--my-sp-2) 0;
+}
+.my-files__pre {
+  max-width: 720px; margin: 0; white-space: pre-wrap; overflow-wrap: anywhere;
+  font-family: var(--my-font-mono); font-size: var(--my-fs-mono); color: var(--my-ink);
+}
+
+/* ── session-card (design registry `session-card` v1, ds/components-session-card.html) ──
+   Five states: default·nominal, selected, warn ≥75%, error ≥90%, disconnected·stale — plus the
+   UNKNOWN states the design's five did not enumerate but the doctrine requires (no context
+   reading; no activity signal). Every dynamic visual is a class or an SVG presentation
+   attribute: the prototype positioned its gauge fill and its 75/90 ticks with inline
+   `style="width:62%"` / `style="left:75%"`, which CSP style-src 'self' forbids AND which cannot
+   express product-tuned thresholds — so the meter is an SVG whose rects carry the geometry.
+
+   The status dot deliberately does NOT reuse `.my-status` (StatusLine): that atom's tone axis has
+   no `unknown` member and its component takes no `class`, so neither the hollow unknown dot nor
+   the ≤1/s pulse could ride on it without reshaping a sibling atom. Same tone vocabulary, own
+   elements. */
+.my-session-card {
+  display: block; width: 100%; text-align: left;
+  background: var(--my-surface); color: var(--my-ink);
+  border: 1px solid var(--my-border); /* card outline — a valid --my-border use (rule #11) */
+  border-radius: var(--my-r-card); padding: var(--my-sp-4);
+  font-family: inherit; font-size: var(--my-fs-body);
+  transition: border-color var(--my-t-fast);
+}
+button.my-session-card { cursor: pointer; }
+.my-session-card:hover { border-color: var(--my-control-border); } /* the prototype's "hover deepens the border" */
+/* selected = petrol border doubled (1px border + 1px ring), per the card's caption */
+.my-session-card.is-selected { border-color: var(--my-accent); box-shadow: 0 0 0 1px var(--my-accent); }
+/* disconnected = dashed border, values muted as stale */
+.my-session-card.is-stale { border-style: dashed; color: var(--my-muted); }
+.my-session-card:focus-visible { outline: 2px solid var(--my-accent); outline-offset: 2px; } /* rule #6 */
+
+.my-session-card__head { display: flex; gap: var(--my-sp-3); align-items: center; }
+.my-session-card__ident { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
+.my-session-card__line1 { display: flex; align-items: center; gap: var(--my-sp-2); flex-wrap: wrap; }
+.my-session-card__name { font-size: var(--my-fs-body); font-weight: var(--my-fw-bold); }
+.my-session-card__meta { font-size: var(--my-fs-caption); color: var(--my-muted); }
+/* the packaged Avatar rides here; stale mutes it the way the prototype's `.stale .avatar` did */
+.my-session-card.is-stale .my-session-card__avatar {
+  background: var(--my-disabled-bg); color: var(--my-disabled-ink);
+}
+
+/* status: dot + words (token rule #7 — never colour alone) */
+.my-session-card__status { display: inline-flex; align-items: center; gap: var(--my-sp-1); font-size: var(--my-fs-caption); }
+.my-session-card__status-text { white-space: nowrap; }
+.my-session-card__dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
+.my-session-card__status--ok { color: var(--my-ok); }
+.my-session-card__status--ok .my-session-card__dot { background: var(--my-ok); }
+.my-session-card__status--warn { color: var(--my-warn); }
+.my-session-card__status--warn .my-session-card__dot { background: var(--my-warn); }
+.my-session-card__status--error { color: var(--my-error); }
+.my-session-card__status--error .my-session-card__dot { background: var(--my-error); }
+.my-session-card__status--info { color: var(--my-info); }
+.my-session-card__status--info .my-session-card__dot { background: var(--my-info); }
+.my-session-card__status--muted { color: var(--my-muted); }
+.my-session-card__status--muted .my-session-card__dot { background: var(--my-disabled-ink); }
+/* UNKNOWN is not idle: a HOLLOW dot, so an unreported session can never be read as a solid-dot
+   claim. The word beside it says "unknown"; the ring says it a second time, without colour. */
+.my-session-card__status--unknown { color: var(--my-muted); font-style: italic; }
+.my-session-card__status--unknown .my-session-card__dot {
+  background: transparent; box-shadow: inset 0 0 0 1.5px var(--my-disabled-ink);
+}
+/* transient states only, ≤1/s */
+.my-session-card__status.is-pulse .my-session-card__dot { animation: my-session-pulse 1s ease-in-out infinite; }
+@keyframes my-session-pulse { 50% { opacity: .4; } }
+@media (prefers-reduced-motion: reduce) {
+  .my-session-card__status.is-pulse .my-session-card__dot { animation: none; }
+}
+
+/* context meter — rail + fill + fixed threshold ticks (rule #4: whole-hue flip, rail = --my-track) */
+.my-session-card__ctx { display: block; margin-top: var(--my-sp-3); }
+.my-session-card__ctx-bar {
+  display: block; height: 8px; border-radius: var(--my-r-pill); overflow: hidden;
+}
+.my-session-card__ctx-svg { display: block; width: 100%; height: 100%; }
+.my-session-card__ctx-track { fill: var(--my-track); }
+/* whole-hue flip at each threshold (rule #4) — never a gradient */
+.my-session-card__ctx-fill,
+.my-session-card__ctx--ok .my-session-card__ctx-fill { fill: var(--my-accent); } /* < warn: fill = accent */
+.my-session-card__ctx--warn .my-session-card__ctx-fill { fill: var(--my-warn); }
+.my-session-card__ctx--error .my-session-card__ctx-fill { fill: var(--my-error); }
+/* no reading ⇒ no fill element is emitted at all; the rail itself also changes, so the unknown
+   state cannot be mistaken for a healthy 0% one */
+.my-session-card__ctx--unknown .my-session-card__ctx-track { fill: var(--my-disabled-bg); }
+.my-session-card__ctx-tick { fill: var(--my-surface); }
+/* a stale reading is a LAST-KNOWN value: kept visible, drained of its band hue */
+.my-session-card__ctx.is-stale .my-session-card__ctx-fill { fill: var(--my-disabled-ink); }
+.my-session-card__ctx-legend {
+  display: flex; justify-content: space-between; gap: var(--my-sp-2);
+  margin-top: var(--my-sp-1); font-size: var(--my-fs-micro); color: var(--my-muted);
+}
+/* a long note truncates rather than pushing the (load-bearing) value off the card */
+.my-session-card__ctx-note,
+.my-session-card__spine-note { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.my-session-card__ctx-value {
+  font-family: var(--my-font-mono); font-variant-numeric: tabular-nums; /* rule #5 */
+  color: var(--my-ink); font-weight: var(--my-fw-medium);
+}
+.my-session-card__ctx--unknown .my-session-card__ctx-value,
+.my-session-card__ctx.is-stale .my-session-card__ctx-value { color: var(--my-disabled-ink); }
+
+/* spine strip — filled petrol nodes = distills, hollow node = the live tip */
+.my-session-card__spine { display: flex; align-items: center; margin-top: var(--my-sp-3); }
+.my-session-card__spine-seg { height: 3px; background: var(--my-border); flex: 1; }
+.my-session-card__spine-node {
+  width: 13px; height: 13px; border-radius: 50%; flex: none;
+  background: var(--my-accent); border: 3px solid var(--my-surface);
+  box-shadow: 0 0 0 1px var(--my-border);
+}
+.my-session-card__spine-node--tip { background: var(--my-surface); border-color: var(--my-accent); }
+.my-session-card__spine-value {
+  font-family: var(--my-font-mono); font-variant-numeric: tabular-nums;
+  color: var(--my-ink); font-weight: var(--my-fw-medium);
+}
+.my-session-card.is-stale .my-session-card__spine-value { color: var(--my-disabled-ink); }
+
+   TERMINAL SET (ds/components-terminal, spec v2): .my-term · .my-qrow · .my-sendbar.
+
+   Token rule 3 — "Terminal surfaces always use the --my-term-* set, regardless of app theme" —
+   is the load-bearing one here. The --my-term-* tokens are declared ONLY in :root and are
+   deliberately NOT overridden by [data-theme="dark"], so they are already theme-invariant; the
+   `.my-term` block below additionally re-points every theme-flipping local (--my-bg/--my-surface/
+   --my-ink/--my-muted/--my-accent/--my-warn/…) onto that fixed palette for the WHOLE subtree. That
+   way an atom nested inside the terminal cannot inherit a light-theme surface either, and the
+   terminal stays heritage-dark in both themes without a single hard-coded color.
+
+   Deriving the two shades the palette does not name (a hairline border and the warn-soft fill for
+   the in-terminal banners) uses color-mix over the term tokens rather than a new hex, so the "zero
+   hard-coded hex" and "every var(--my-*) exists in canonical tokens.css" guards both still hold.
+
+   The send bar and the queue rows are APP CHROME, not terminal surface: the design card draws both
+   on the light surface, so they use the ordinary theme tokens and follow the app theme. Only the
+   pane is pinned dark.
+   ══════════════════════════════════════════════════════════════════════════════════════════ */
+
+/* ── terminal pane ─────────────────────────────────────────────────────── */
+.my-term {
+  /* token rule 3 — the fixed heritage palette, both themes */
+  --my-bg: var(--my-term-bg);
+  --my-surface: var(--my-term-bg);
+  --my-surface-hover: color-mix(in oklab, var(--my-term-ink) 8%, var(--my-term-bg));
+  --my-border: color-mix(in oklab, var(--my-term-ink) 14%, var(--my-term-bg));
+  --my-control-border: color-mix(in oklab, var(--my-term-ink) 34%, var(--my-term-bg));
+  --my-ink: var(--my-term-ink);
+  --my-muted: var(--my-term-dim);
+  --my-accent: var(--my-term-assistant);
+  --my-accent-strong: var(--my-term-assistant);
+  --my-accent-soft: color-mix(in oklab, var(--my-term-assistant) 18%, var(--my-term-bg));
+  --my-warn: var(--my-term-user);
+  --my-warn-soft: color-mix(in oklab, var(--my-term-user) 18%, var(--my-term-bg));
+  --my-track: color-mix(in oklab, var(--my-term-ink) 12%, var(--my-term-bg));
+  --my-ink-hover: var(--my-term-ink);
+  --my-accent-hover: var(--my-term-assistant);
+  --my-disabled-bg: color-mix(in oklab, var(--my-term-ink) 6%, var(--my-term-bg));
+  --my-disabled-ink: var(--my-term-dim);
+  --my-scrim: color-mix(in oklab, var(--my-term-bg) 55%, transparent);
+  --my-shadow-modal: 0 16px 48px color-mix(in oklab, var(--my-term-bg) 50%, transparent);
+  /* NOT re-pointed, deliberately: --my-ok/--my-error/--my-info and their softs. The five-token
+     terminal palette defines no green/red/blue, so any value here would be an invented colour. No
+     rule in the terminal set uses them (enforced by test/terminal-css.test.ts, which derives the
+     flipping-token set from the canonical tokens.css and rejects any unpinned reference under a
+     .my-term selector). A consumer nesting a status-toned atom INSIDE the terminal is the one known
+     residual; the terminal's own alert hue is --my-term-user. */
+
+  display: flex; flex-direction: column;
+  background: var(--my-term-bg); color: var(--my-term-ink);
+  border: 1px solid var(--my-border); border-radius: var(--my-r-card);
+  font-family: var(--my-font-mono); font-size: var(--my-fs-mono); line-height: 1.7;
+  overflow: hidden;
+}
+
+/* title bar — traffic lights · `{name} · tail · noise {on|off}` · turn/stop cluster */
+.my-term__titlebar {
+  display: flex; align-items: center; gap: var(--my-sp-2);
+  padding: var(--my-sp-2) var(--my-sp-3);
+  border-bottom: 1px solid var(--my-border);
+  font-family: var(--my-font-ui); font-size: var(--my-fs-micro);
+  color: var(--my-term-dim);
+}
+.my-term__lights { display: inline-flex; gap: 5px; flex: none; }
+/* window-chrome traffic lights. They are DECORATION, so per token rule 2 they may not borrow the
+   status hues (--my-error/--my-ok) the way a macOS titlebar would; per token rule 3 they are drawn
+   from the terminal's own five-token palette. */
+.my-term__light { width: 9px; height: 9px; border-radius: var(--my-r-pill); background: var(--my-term-dim); }
+.my-term__light--r { background: var(--my-term-dim); }
+.my-term__light--a { background: var(--my-term-user); }
+.my-term__light--g { background: var(--my-term-assistant); }
+.my-term__noise {
+  border: 0; background: none; padding: 0; cursor: pointer;
+  font: inherit; color: var(--my-term-dim); text-align: left;
+}
+.my-term__noise:hover { color: var(--my-term-ink); }
+.my-term__noise:focus-visible { outline: 2px solid var(--my-accent); outline-offset: 2px; }
+.my-term__tb-right { margin-left: auto; display: inline-flex; align-items: center; gap: var(--my-sp-2); }
+.my-term__turn, .my-term__idle { display: inline-flex; align-items: center; gap: 5px; color: var(--my-term-dim); }
+.my-term__turn-dot {
+  width: 7px; height: 7px; border-radius: var(--my-r-pill);
+  background: var(--my-term-assistant); animation: my-term-pulse 1s ease-in-out infinite;
+}
+/* the stop control lives INSIDE the terminal, so per token rule 3 it wears the term palette rather
+   than the app's danger red (which flips with the app theme). `is-prominent` raises it to the
+   terminal's one alert hue — the heritage amber — when a turn is actually in flight. */
+.my-term__stop {
+  border: 1px solid var(--my-term-dim); border-radius: var(--my-r-control);
+  background: none; color: var(--my-term-ink);
+  padding: 2px 9px; font-family: var(--my-font-ui); font-size: var(--my-fs-micro);
+  font-weight: var(--my-fw-medium); cursor: pointer;
+}
+.my-term__stop:hover:not(:disabled) { background: color-mix(in oklab, var(--my-term-ink) 8%, var(--my-term-bg)); }
+.my-term__stop:disabled { border-color: var(--my-term-dim); color: var(--my-term-dim); cursor: not-allowed; }
+.my-term__stop:focus-visible { outline: 2px solid var(--my-term-assistant); outline-offset: 2px; }
+.my-term__stop.is-prominent { border-color: var(--my-term-user); color: var(--my-term-user); }
+.my-term__stop.is-prominent:hover:not(:disabled) {
+  background: color-mix(in oklab, var(--my-term-user) 18%, var(--my-term-bg));
+}
+.my-term__stop-key { opacity: .7; }
+
+/* body */
+.my-term__body { padding: var(--my-sp-3) var(--my-sp-4); overflow: auto; flex: 1; }
+.my-term__body:focus-visible { outline: 2px solid var(--my-accent); outline-offset: -2px; }
+
+/* the two in-terminal banners (wake-unavailable · stale). Warn soft + a dot; never a spinner —
+   neither banner claims a retry is under way, so neither may look like one. */
+.my-term__banner {
+  display: flex; gap: var(--my-sp-2); align-items: center;
+  background: var(--my-warn-soft); color: var(--my-warn);
+  border-radius: var(--my-r-control); padding: 6px 10px; margin-bottom: 10px;
+  font-family: var(--my-font-ui); font-size: var(--my-fs-micro);
+}
+.my-term__banner-dot {
+  width: 7px; height: 7px; border-radius: var(--my-r-pill); flex: none;
+  background: currentColor; animation: my-term-pulse 1s ease-in-out infinite;
+}
+
+/* state copy (loading · missing · unaddressable · failed · no events) */
+.my-term__state { color: var(--my-term-dim); }
+
+/* rows */
+.my-term__row { display: block; color: var(--my-term-ink); white-space: pre-wrap; word-break: break-word; }
+.my-term__row--assistant { color: var(--my-term-ink); }
+.my-term__row--user { color: var(--my-term-user); }
+.my-term__row--tool, .my-term__row--result, .my-term__row--system { color: var(--my-term-dim); }
+.my-term__row--boundary { color: var(--my-term-assistant); }
+.my-term__row--dim { color: var(--my-term-dim); }
+/* client-synthetic rows read as UI-originated, never as output from the far side */
+.my-term__row--local { color: var(--my-term-dim); font-style: italic; }
+.my-term__label { color: var(--my-term-assistant); font-weight: var(--my-fw-medium); }
+.my-term__row--user .my-term__label { color: var(--my-term-user); }
+.my-term__row--tool .my-term__label,
+.my-term__row--result .my-term__label,
+.my-term__row--system .my-term__label { color: var(--my-term-dim); }
+
+/* expandable rows — collapsed by default, highlight on hover (design card) */
+.my-term__head {
+  display: block; width: 100%; text-align: left; cursor: pointer;
+  border: 0; background: none; color: inherit; font: inherit;
+  border-radius: var(--my-r-control); padding: 0 6px; margin: 0 -6px;
+}
+.my-term__head:hover { background: var(--my-surface-hover); color: var(--my-term-ink); }
+.my-term__head:focus-visible { outline: 2px solid var(--my-accent); outline-offset: 2px; }
+.my-term__expand { text-decoration: underline; }
+.my-term__detail {
+  margin: var(--my-sp-1) 0 var(--my-sp-2); padding: var(--my-sp-2);
+  background: var(--my-surface-hover); border-radius: var(--my-r-control);
+  color: var(--my-term-ink); white-space: pre-wrap; word-break: break-word;
+  font-family: var(--my-font-mono);
+}
+
+/* foreign transcript segments — behind the toggle, captioned, visually separated */
+.my-term__more {
+  border: 0; background: none; padding: 0; cursor: pointer;
+  font-family: var(--my-font-ui); font-size: var(--my-fs-micro);
+  color: var(--my-term-dim); display: block; margin-bottom: var(--my-sp-2);
+}
+.my-term__more:hover { color: var(--my-term-ink); }
+.my-term__more:focus-visible { outline: 2px solid var(--my-accent); outline-offset: 2px; }
+.my-term__hist { border-left: 2px solid var(--my-border); padding-left: var(--my-sp-3); margin-bottom: var(--my-sp-3); }
+.my-term__hist-cap {
+  font-family: var(--my-font-ui); font-size: var(--my-fs-micro);
+  color: var(--my-term-dim); margin-bottom: var(--my-sp-1);
+}
+
+/* streaming caret — blinks 1/s, paused under prefers-reduced-motion (design card) */
+.my-term__caret {
+  display: inline-block; width: 7px; height: 14px; vertical-align: -2px;
+  background: var(--my-term-assistant); animation: my-term-blink 1s steps(1) infinite;
+}
+@keyframes my-term-blink { 50% { opacity: 0; } }
+@keyframes my-term-pulse { 50% { opacity: .45; } }
+@media (prefers-reduced-motion: reduce) {
+  .my-term__caret, .my-term__banner-dot, .my-term__turn-dot { animation: none; }
+}
+
+/* ── queue (app chrome — follows the app theme) ────────────────────────── */
+.my-queue { display: block; }
+.my-queue__list { display: block; }
+.my-queue__state, .my-queue__stale { font-size: var(--my-fs-caption); color: var(--my-muted); margin-top: var(--my-sp-2); }
+.my-queue__stale { color: var(--my-warn); }
+.my-queue__empty {
+  display: flex; align-items: center; justify-content: center;
+  border: 1px dashed var(--my-border); border-radius: var(--my-r-card);
+  padding: 9px 12px; margin-top: var(--my-sp-2);
+  font-size: var(--my-fs-caption); color: var(--my-muted); background: none;
+}
+
+/* ── queue row ─────────────────────────────────────────────────────────── */
+.my-qrow {
+  display: flex; align-items: center; gap: 10px;
+  background: var(--my-surface); border: 1px solid var(--my-border);
+  border-radius: 8px; padding: 9px 12px; margin-top: var(--my-sp-2);
+  font-size: var(--my-fs-mono); color: var(--my-ink);
+  transition: background var(--my-t-fast);
+}
+.my-qrow:hover { background: var(--my-surface-hover); }
+.my-qrow__body { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.my-qrow__status { color: var(--my-muted); font-size: var(--my-fs-micro); flex: none; }
+/* per-status presentation. The status WORD is always rendered next to the row (queueStatusLabel),
+   so these tints reinforce it and never carry it alone (token rule 7). `queued` is the default
+   presentation — it takes no modifier styling. */
+.my-qrow--queued { }
+.my-qrow--leased .my-qrow__status { color: var(--my-accent-strong); }
+.my-qrow--delivered .my-qrow__body,
+.my-qrow--canceled .my-qrow__body { color: var(--my-muted); }
+.my-qrow--canceled .my-qrow__body { text-decoration: line-through; }
+.my-qrow__cancel {
+  margin-left: auto; flex: none; cursor: pointer;
+  border: 0; background: none; font: inherit; font-size: var(--my-fs-caption);
+  color: var(--my-muted); padding: 0;
+}
+.my-qrow__cancel:hover { color: var(--my-error); }
+.my-qrow__cancel:focus-visible { outline: 2px solid var(--my-accent); outline-offset: 2px; }
+/* two-step confirm, inside the row — never a modal for a queue item (design card) */
+.my-qrow.is-confirm { background: var(--my-error-soft); border-color: var(--my-error); }
+.my-qrow__ask { color: var(--my-error); font-weight: var(--my-fw-medium); }
+.my-qrow__acts { margin-left: auto; display: flex; gap: 6px; flex: none; }
+.my-qmini {
+  border-radius: 5px; padding: 3px 10px; cursor: pointer;
+  font-family: inherit; font-size: var(--my-fs-micro); font-weight: var(--my-fw-bold);
+  border: 1px solid transparent;
+}
+.my-qmini:focus-visible { outline: 2px solid var(--my-accent); outline-offset: 2px; }
+.my-qmini--yes { background: var(--my-error); color: var(--my-surface); }
+.my-qmini--no { background: var(--my-surface); border-color: var(--my-control-border); color: var(--my-ink); }
+.my-qbadge {
+  font-size: var(--my-fs-micro); font-weight: var(--my-fw-bold);
+  border-radius: 5px; padding: 2px 7px; letter-spacing: .4px; flex: none;
+}
+.my-qbadge--asap { background: var(--my-accent-soft); color: var(--my-accent-strong); }
+.my-qbadge--done { background: var(--my-disabled-bg); color: var(--my-muted); }
+
+/* ── send bar (app chrome — follows the app theme) ─────────────────────── */
+.my-sendbar-wrap { display: block; }
+.my-sendbar { display: flex; gap: var(--my-sp-2); align-items: flex-start; }
+.my-sendbar__seg { display: inline-flex; flex: none; }
+.my-sendbar__cls {
+  border: 1px solid var(--my-control-border); background: var(--my-surface);
+  color: var(--my-muted); cursor: pointer;
+  padding: 8px 10px; font-family: inherit; font-size: var(--my-fs-micro);
+  font-weight: var(--my-fw-bold); letter-spacing: .4px;
+}
+.my-sendbar__seg .my-sendbar__cls:first-child { border-radius: var(--my-r-control) 0 0 var(--my-r-control); }
+.my-sendbar__seg .my-sendbar__cls:last-child { border-radius: 0 var(--my-r-control) var(--my-r-control) 0; margin-left: -1px; }
+.my-sendbar__cls.is-on { background: var(--my-accent-soft); color: var(--my-accent-strong); border-color: var(--my-accent); z-index: 1; }
+.my-sendbar__cls:focus-visible { outline: 2px solid var(--my-accent); outline-offset: 2px; z-index: 1; }
+.my-sendbar__cls:disabled { background: var(--my-disabled-bg); color: var(--my-disabled-ink); cursor: not-allowed; }
+.my-sendbar__input {
+  flex: 1; min-width: 0; resize: vertical;
+  border: 1px solid var(--my-control-border); border-radius: var(--my-r-control);
+  padding: 8px 12px; font: inherit; font-size: var(--my-fs-body);
+  background: var(--my-surface); color: var(--my-ink);
+}
+.my-sendbar__input:focus-visible { outline: 2px solid var(--my-accent); outline-offset: 2px; }
+.my-sendbar__input:disabled { background: var(--my-disabled-bg); color: var(--my-disabled-ink); cursor: not-allowed; }
+.my-sendbar__send {
+  border: 0; border-radius: var(--my-r-control); cursor: pointer; flex: none;
+  padding: 8px 14px; font-family: inherit; font-size: var(--my-fs-body);
+  font-weight: var(--my-fw-medium); background: var(--my-ink); color: var(--my-bg);
+}
+.my-sendbar__send:hover:not(:disabled) { background: var(--my-ink-hover); }
+.my-sendbar__send:focus-visible { outline: 2px solid var(--my-accent); outline-offset: 2px; }
+.my-sendbar__send:disabled { background: var(--my-disabled-bg); color: var(--my-disabled-ink); cursor: not-allowed; }
+.my-sendbar__hint { font-size: var(--my-fs-micro); color: var(--my-muted); margin-top: 6px; }
+.my-sendbar__notice { font-size: var(--my-fs-micro); color: var(--my-warn); margin-top: 6px; }
+/* static title line — used instead of .my-term__noise when the pane has no noise toggle, so a
+   non-interactive caption never gets a pointer cursor it cannot honor */
+.my-term__title { color: var(--my-term-dim); }