@gemboss/ui 0.12.0 → 0.13.0

package/gemboss-ui.css

@@ -1,7 +1,7 @@
 /*
  * GemBoss admin design system — GENERATED — do not edit; regenerate from gemboss:
  *   node apps/admin/scripts/export-ui-css.mjs --out <path>   (npm run export:ui-css)
- * gemboss commit: e4c3bf3203ec143af9abdade7f6c686be85f7de0
+ * gemboss commit: 4fa51b50e62110c020ab1052fada16e025665f4a
  * sources sha256: 9b0060f874885bf4ba4ab9dc6448bc06ae386328bb9bfebcf23bfc6c2671561d
  * contents: 1 allow-listed rule from apps/admin/src/app/globals.css + packages/ui/src/gemboss-tokens.css
  *   (verbatim) + packages/ui/src/ui.css (verbatim) + packages/ui/src/gemboss-field.css (verbatim)
@@ -3541,7 +3541,23 @@ html[data-gb-navigating] .gb-route-cover {
 .ui-link:focus-visible,
 .ui-prose :where(a:not([class])):focus-visible { outline: 2px solid var(--ui-focus, #5661f5); outline-offset: 2px; border-radius: 2px; }
 
-.ui-card--media { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
+.ui-card--media { position: relative; padding: 0; overflow: hidden; display: flex; flex-direction: column; }
+/* 0.13.0 (README "Collections", card grid): the title is the card's link and its overlay covers the card
+   (`a.ui-card__link`; the picture link is aria-hidden, out of the tab order); `.ui-card__menu` (a ⋯ ui-menu) sits in the
+   picture's corner above it, and the card stops clipping so the open menu is not cut off; `data-ratio="4/3"` for a theme
+   or a page. */
+.ui-card__link { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; color: var(--ui-text); font-size: var(--ui-fs-body); line-height: 20px; font-weight: 650; text-decoration: none; overflow-wrap: anywhere; }
+.ui-card__link::after { content: ""; position: absolute; inset: 0; z-index: 0; }
+.ui-card__link:focus-visible { outline: none; }
+.ui-card--media:has(.ui-card__link) { cursor: pointer; }
+.ui-card--media:has(.ui-card__link:hover) { border-color: var(--ui-text-muted); }
+.ui-card--media:has(.ui-card__link:focus-visible) { outline: 2px solid var(--ui-focus); outline-offset: 1px; }
+.ui-card--media :is(.ui-card__foot button, .ui-card__foot a, .ui-card__body a:not(.ui-card__link), .ui-card__body button, select, input, summary) { position: relative; z-index: 1; }
+.ui-card__menu { position: absolute; top: 8px; right: 8px; z-index: 2; }
+.ui-card--media:has(> .ui-card__menu) { overflow: visible; }
+.ui-card--media:has(> .ui-card__menu) > .ui-card__media { border-radius: inherit; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
+.ui-card__meta { color: var(--ui-text-muted); font-size: var(--ui-fs-caption); line-height: 16px; }
+.ui-card--media[data-ratio="4/3"] > .ui-card__media { aspect-ratio: 4 / 3; }
 .ui-card__media {
   display: block; width: 100%; aspect-ratio: 16 / 10; margin: 0; padding: 0; border: 0;
   border-bottom: 1px solid var(--ui-border); background: var(--ui-surface-2); overflow: hidden; color: inherit;
@@ -3928,7 +3944,7 @@ button.ui-metric:focus-visible { outline: 2px solid var(--ui-focus); outline-off
 }
 .ui-chip:hover { border-style: solid; background: var(--ui-surface-2); }
 .ui-chip:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 1px; }
-.ui-chip:is([aria-pressed="true"], [aria-current="page"]) { border-style: solid; border-color: var(--ui-accent); background: var(--ui-accent-soft); color: var(--ui-accent-strong); }
+.ui-chip:is([aria-pressed="true"], [aria-current="page"], [aria-current="true"]) { border-style: solid; border-color: var(--ui-accent); background: var(--ui-accent-soft); color: var(--ui-accent-strong); }
 @media (pointer: coarse), (max-width: 47.9975em) { .ui-chip { height: auto; min-height: 44px; min-width: 44px; } }
 /* Card stack: `<div class="ui-stack"><div class="ui-card">…</div><div class="ui-card">…</div></div>`. 16px between blocks,
    Polaris BlockStack gap 400, the admin's spacing between cards on a page. `--tight` is 8 (inside a card). */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gemboss/ui",
-  "version": "0.12.0",
+  "version": "0.13.0",
   "description": "GemBoss design system for every surface in the fleet: the admin shell (topbar + rail + drawer) as React components, and the admin stylesheet exported as one CSS file.",
   "license": "UNLICENSED",
   "type": "module",
@@ -21,6 +21,7 @@
     "./chat.css": "./src/chat.css",
     "./chat-composer.css": "./src/chat-composer.css",
     "./editor.css": "./src/editor.css",
+    "./collections.css": "./src/collections.css",
     "./auth.css": "./src/auth.css",
     "./kit-plain.css": "./src/kit-plain.css",
     "./kit-plain.js": "./src/kit-plain.js",

package/src/collections.css

@@ -0,0 +1,350 @@
+/* collections.css (0.13.0): tables, lists, grids and boards, the six patterns Chris settled on 05/10/2026.
+   README "Collections" has the decision tree (which pattern when) and the markup of each.
+
+   Its OWN entry (`@gemboss/ui/collections.css`), loaded beside gemboss-ui.css, for two measured reasons:
+   - the admin loads ui.css from its root layout, so every rule there is paid on every admin screen, under a first-load
+     budget with no room (kit-plain.css says the same, 01/10/2026). The admin draws its tables with Polaris; nothing
+     here is for it.
+   - gemboss-ui.css had ~1.4 KB left under the 90 KB the export is held to (05/10/2026); these rules are several times
+     that, and a page with no table, list or board should not download them.
+
+   One owner per component (Gems/CLAUDE.md 9.3): `.ui-table` keeps its base in ui.css (it IS the Data table, Polaris
+   DataTable's numbers since 0.12.0); this file owns every modifier and part named here, and nothing else.
+
+   Numbers are Polaris 13.9.5 rendered in Chromium (Gems/_local/fleet/collections-2026-10/polaris-measured.json) and
+   pinned in polaris-reference.json, which src/density.test.ts measures on the catalog.
+
+   Not here, on purpose:
+   - zebra rows. Polaris paints even rows #f7f7f7, the exact colour of its hover, so hover vanishes on half the rows
+     (measured); the fleet used it 0 times. collections-gate.mjs reports a striped table.
+   - row actions that appear on hover. A finger and a keyboard never see them. One button may stay visible, the rest go
+     in the ⋯ menu (`ui-menu`).
+   - an uppercase header (content-radar `.gtable`, 11/700): the header is 12/550 (index) or 13/450 (data). */
+
+/* ── Shared tones, derived from the surface's own ink and paper so the dark theme follows. ──
+   Mixed with --ui-text (#1b1c1e): 3.5% gives rgb(247,247,247) on white = Polaris bg-surface-secondary (header, hover);
+   6% gives rgb(241,241,241) = Polaris bg-surface-secondary-selected (a selected row). */
+:root {
+  --ui-coll-head-bg: color-mix(in srgb, var(--ui-text, #1b1c1e) 3.5%, var(--ui-surface, #fff));
+  --ui-coll-hover: color-mix(in srgb, var(--ui-text, #1b1c1e) 3.5%, var(--ui-surface, #fff));
+  --ui-coll-selected: color-mix(in srgb, var(--ui-text, #1b1c1e) 6%, var(--ui-surface, #fff));
+  --ui-coll-check-w: 40px;
+}
+
+/* ══ 1 · Data table: `ui-table` (ui.css) + modifiers ═════════════════════════════════════════════════════════════════
+   `<div class="ui-table-wrap"><table class="ui-table ui-table--sticky-first">…</table></div>`.
+   - `--sticky-first`: the row's label column stays put while the wrap scrolls sideways (below 768 a data table SCROLLS,
+     it never folds into a list; Chris 05/10/2026). An edge shadow appears once it has scrolled.
+   - `--compact`: Polaris `increasedTableDensity` (rows 32, header 33), only for a table of more than 20 rows.
+   - `tfoot.ui-table__totals` (650 on the secondary fill) and `.ui-table__footer` (source, "x of n") under the table. */
+.ui-table--sticky-first tr { background: var(--ui-surface); }
+.ui-table--sticky-first tbody tr:hover { background: var(--ui-surface-2); }
+.ui-table--sticky-first :is(th, td):first-child { position: sticky; left: 0; z-index: 1; background: inherit; }
+@supports (animation-timeline: scroll()) {
+  .ui-table-wrap:has(> .ui-table--sticky-first) { scroll-timeline: --ui-coll-x inline; }
+  .ui-table--sticky-first :is(th, td):first-child { animation: ui-coll-edge linear both; animation-timeline: --ui-coll-x; animation-range: 0 24px; }
+}
+@keyframes ui-coll-edge { from { box-shadow: none; } to { box-shadow: 1px 0 0 var(--ui-border), 6px 0 8px -6px rgba(0, 0, 0, .18); } }
+.ui-table--compact :is(td, tbody th) { padding-block: 6px; }
+.ui-table--compact thead th { padding-block: 6px; }
+.ui-table__totals > tr { background: var(--ui-coll-head-bg); }
+.ui-table__totals > tr > :is(td, th) { background: var(--ui-coll-head-bg); font-weight: 650; color: var(--ui-text); border-top: 1px solid var(--ui-border); border-bottom: 0; }
+.ui-table__footer { padding: 8px 12px; background: var(--ui-coll-head-bg); border-top: 1px solid var(--ui-border); color: var(--ui-text-muted); font-size: var(--ui-fs-body); text-align: center; }
+/* A row header (`th scope=row class=ui-table__rowhead`) reads as a cell, as in Polaris DataTable's first column. A part of
+   its own: ui.css keeps every other `th` muted. */
+.ui-table th.ui-table__rowhead { font-weight: 450; color: var(--ui-text); text-align: left; }
+
+/* ── Sort, both table kinds: `<th aria-sort="ascending"><a class="ui-table__sort" href="?sort=name&dir=desc">Name</a></th>`
+   (the order is in the URL: Back and a shared link keep it), or `<button type="button" class="ui-table__sort">` for a
+   client sort (kit-plain.js `data-gb-sort="client"`, or React `onSort`). `aria-sort` sits on the th: none on a sortable
+   column that is not the current one. One column at a time. The arrow is 16px; the target is 24px tall inside the 36px
+   header (WCAG 2.5.8), 44 under a finger. */
+.ui-table__sort {
+  /* A block flex box, not inline: a 24px inline box with negative margins still grew the header's line box (45 → 46, 36 → 40). */
+  display: flex; width: max-content; max-width: 100%; align-items: center; gap: 4px; min-height: 24px; margin-block: -2px; padding: 0; border: 0;
+  background: none; color: inherit; font: inherit; text-align: inherit; text-decoration: none; cursor: pointer; white-space: nowrap;
+}
+.ui-table__sort:hover { color: var(--ui-text); }
+.ui-table__sort:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 2px; border-radius: 4px; }
+.ui-table__sort::after {
+  content: ""; flex: none; width: 16px; height: 16px; background: currentColor; opacity: 0;
+  -webkit-mask: var(--ui-coll-arrow) center / 16px no-repeat; mask: var(--ui-coll-arrow) center / 16px no-repeat;
+  --ui-coll-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 3.5v9M4.5 9 8 12.5 11.5 9' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+}
+.ui-table__sort:is(:hover, :focus-visible)::after { opacity: .45; }
+th[aria-sort="ascending"] > .ui-table__sort::after, th[aria-sort="descending"] > .ui-table__sort::after { opacity: 1; }
+th[aria-sort="ascending"] > .ui-table__sort::after { transform: rotate(180deg); }
+th[aria-sort="ascending"] > .ui-table__sort, th[aria-sort="descending"] > .ui-table__sort { color: var(--ui-text); }
+.ui-table .is-num > .ui-table__sort { flex-direction: row-reverse; margin-left: auto; }
+
+/* ── Long content (both table kinds and the lists): one line with an ellipsis, the whole text in `title` or on the
+   detail page. `ui-trunc` caps a cell's text at --ui-trunc (default 32ch); `ui-clamp-2` allows two lines. */
+.ui-trunc { display: block; max-width: var(--ui-trunc, 32ch); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ui-clamp-2 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; white-space: normal; overflow-wrap: anywhere; }
+
+/* ══ 2 · Index table: `ui-index > ui-table-wrap > table.ui-table.ui-table--index` ═══════════════════════════════════
+   Polaris IndexTable: header 12/550 on the secondary fill, 36 tall; cells 6px 6px, a one-line row 34 with a 20px badge.
+   Row: `tr` with `data-href` (kit-plain.js) or `.is-linked` (React) = the WHOLE row opens the detail; the title stays a
+   real link, `<a class="ui-table__title" href>`, for Cmd-click and screen readers. A row with two or more in-place
+   editing controls is not linked (only its title is; collections-gate.mjs reports the other case).
+   Cells stay on one line (ellipsis); the primary cell may add one `ui-sub` line, so a row is 34 to 56, never 119. */
+.ui-index { position: relative; container: ui-index / inline-size; min-width: 0; }
+.ui-table--index { font-size: var(--ui-fs-body); }
+.ui-table--index tr { background: var(--ui-surface); }
+.ui-table.ui-table--index thead th {
+  padding: 8px 6px; background: var(--ui-coll-head-bg); color: var(--ui-text-muted);
+  font-size: var(--ui-fs-caption); line-height: 20px; font-weight: 550; text-transform: none; letter-spacing: 0;
+}
+.ui-table.ui-table--index :is(td, tbody th) { padding: 6px; line-height: 20px; white-space: nowrap; vertical-align: middle; border-bottom: 0; border-top: 1px solid var(--ui-border); }
+.ui-table.ui-table--index :is(th, td):where(:first-child) { padding-left: var(--ui-space-3); }
+.ui-table.ui-table--index :is(th, td):where(:last-child) { padding-right: var(--ui-space-3); }
+.ui-table--index tbody tr:hover { background: var(--ui-coll-hover); }
+.ui-table--index tbody tr:is(.is-selected, [aria-selected="true"]) { background: var(--ui-coll-selected); }
+.ui-table--index tbody tr:is([data-href], .is-linked) { cursor: pointer; }
+/* The row is the target: its focus ring is the row's, drawn when the title link has keyboard focus. */
+.ui-table--index tbody tr:has(.ui-table__title:focus-visible) { outline: 2px solid var(--ui-focus); outline-offset: -2px; }
+.ui-table__title:focus-visible { outline: none; }
+.ui-table__primary { min-width: 0; }
+.ui-table__primary-inner { display: flex; align-items: center; gap: var(--ui-space-3); min-width: 0; }
+.ui-table__primary-text { min-width: 0; }
+.ui-table__title {
+  display: block; max-width: var(--ui-trunc, 40ch); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+  color: var(--ui-text); font-weight: 650; text-decoration: none;
+}
+a.ui-table__title:hover { text-decoration: underline; }
+.ui-table--index .ui-table__title + .ui-sub, .ui-table--index .ui-sub { display: block; max-width: var(--ui-trunc, 40ch); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 0; line-height: 16px; }
+/* `ui-table td > a` (ui.css) makes a cell link inline-flex 24px; the title is a block with an ellipsis instead. */
+.ui-table--index td > a.ui-table__title { display: block; min-height: 0; }
+.ui-table--index td > .ui-table__primary-inner > a.ui-table__title, .ui-table--index .ui-table__primary-text > a.ui-table__title { line-height: 20px; }
+
+/* Checkbox column: 40px, sticky at the left edge, like the label column after it while the wrap scrolls. */
+/* Polaris: 8 8 8 12 in the header, 6 8 6 12 in a row. */
+.ui-table.ui-table--index .ui-table__check { width: var(--ui-coll-check-w); padding: 6px 8px 6px 12px; }
+.ui-table.ui-table--index thead .ui-table__check { padding: 8px 8px 8px 12px; }
+.ui-table__checkbox { display: flex; width: max-content; align-items: center; justify-content: center; min-width: 24px; min-height: 24px; margin: -2px 0; cursor: pointer; }
+.ui-table__checkbox > input { width: 16px; height: 16px; margin: 0; accent-color: var(--ui-accent); cursor: pointer; }
+.ui-table__checkbox > input:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 2px; }
+.ui-table--index :is(.ui-table__check, .ui-table__primary) { position: sticky; z-index: 1; background: inherit; }
+.ui-table--index .ui-table__check { left: 0; }
+.ui-table--index .ui-table__primary { left: 0; }
+.ui-table--index:has(.ui-table__check) .ui-table__primary { left: var(--ui-coll-check-w); }
+.ui-table__actions { width: 1%; text-align: right; }
+.ui-table__actions > * { vertical-align: middle; }
+.ui-row-actions { display: inline-flex; align-items: center; gap: var(--ui-space-2); }
+
+/* Bulk bar: replaces the header row while rows are selected (Polaris: 36px, in the header's place), so selecting the
+   first row does not move the table. 38 here = the wrap's top line + the 37px header; padding 4 (Polaris 6) because the
+   kit's small button is 28 tall. `<div class="ui-bulkbar" hidden>` right before the wrap; kit-plain.js / React show
+   it. It carries its own select-all box, because the folded list below 768 has no header. */
+.ui-bulkbar {
+  position: relative; z-index: 3; display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-space-2);
+  box-sizing: border-box; min-height: 38px; margin-bottom: -38px; padding: 4px 8px 4px 12px;
+  background: var(--ui-surface); border: 1px solid var(--ui-border); border-bottom-color: transparent; border-radius: var(--ui-radius-lg) var(--ui-radius-lg) 0 0;
+  font-size: var(--ui-fs-body);
+}
+.ui-bulkbar[hidden] { display: none; }
+.ui-bulkbar__count { font-weight: 550; font-variant-numeric: tabular-nums; }
+.ui-bulkbar__actions { display: inline-flex; flex-wrap: wrap; gap: var(--ui-space-2); margin-left: auto; }
+.ui-bulkbar .ui-table__checkbox { margin-right: 4px; }
+
+/* Sort below 768: the header is gone, so a row of chips (`ui-chip`, aria-current on the active one) takes its place. */
+.ui-index__sortbar { display: none; }
+
+/* ── Folded: the index table becomes a list when ITS CONTAINER is 768 or narrower (Chris 05/10/2026). A container,
+   not the viewport: right of a 240px rail a 1024px window leaves ~750px. The primary cell is the title line; the other
+   cells follow on one wrapped line in caption size (`data-label` prefixes a value with its column name); a cell marked
+   `data-condensed="hide"` is left out; checkbox and actions keep their places. Polaris `condensed`: rows 44 and up. */
+@container ui-index (max-width: 768px) {
+  .ui-table--index, .ui-table--index tbody { display: block; width: 100%; }
+  .ui-table--index thead { display: none; }
+  .ui-table--index tbody tr {
+    position: relative; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px;
+    min-height: 44px; box-sizing: border-box; padding: 10px 12px; border-top: 1px solid var(--ui-border);
+  }
+  .ui-table--index tbody tr:first-child { border-top: 0; }
+  .ui-table--index tbody tr:has(> .ui-table__check) { padding-left: 48px; }
+  .ui-table.ui-table--index tbody :is(td, th) { display: block; padding: 0; border: 0; position: static; background: none; white-space: nowrap; }
+  .ui-table--index tbody .ui-table__primary { flex: 1 0 100%; white-space: normal; }
+  .ui-table--index tbody td:not(.ui-table__primary, .ui-table__check, .ui-table__actions) { flex: none; max-width: 100%; overflow: hidden; text-overflow: ellipsis; color: var(--ui-text-muted); font-size: var(--ui-fs-caption); line-height: 18px; }
+  .ui-table--index tbody td[data-label]:not(.ui-table__primary)::before { content: attr(data-label) " "; color: var(--ui-text-muted); }
+  /* A capped value or a second line in a folded cell stays on the caption line (block, they broke "In" from its value). */
+  .ui-table--index tbody td:not(.ui-table__primary, .ui-table__check, .ui-table__actions) .ui-trunc { display: inline-block; vertical-align: bottom; }
+  .ui-table--index tbody td:not(.ui-table__primary, .ui-table__check, .ui-table__actions) .ui-sub { display: inline; margin-left: 6px; }
+  .ui-table--index tbody td.is-num { text-align: left; }
+  .ui-table--index tbody td[data-condensed="hide"] { display: none; }
+  .ui-table.ui-table--index tbody .ui-table__check { position: absolute; left: 4px; top: 4px; width: auto; padding: 0; }
+  /* Actions follow the second line, pushed right (absolute over the title, they covered it at 390). */
+  .ui-table.ui-table--index tbody .ui-table__actions { order: 99; margin-left: auto; width: auto; padding: 0; align-self: center; }
+  .ui-table--index .ui-table__checkbox { min-width: 44px; min-height: 44px; margin: 0; }
+  .ui-table--index .ui-table__title, .ui-table--index .ui-sub { max-width: none; }
+  .ui-index__sortbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-space-2); margin: 0 0 var(--ui-space-3); font-size: var(--ui-fs-caption); color: var(--ui-text-muted); }
+  .ui-index .ui-bulkbar { margin-bottom: var(--ui-space-2); border-bottom-color: var(--ui-border); border-radius: var(--ui-radius-lg); }
+  .ui-index .ui-table-wrap { overflow-x: visible; }
+}
+
+/* ══ 3 · Resource list: `ul.ui-list > li.ui-list__item` ════════════════════════════════════════════════════════════
+   Polaris ResourceItem: 12 on every side, 12 between media and text, two 20px lines = a 64px row. The whole row is the
+   title's link (an overlay on `a.ui-list__title`, as ResourceItem's own); every other control in the row sits above it.
+   Slots: `__media` (Avatar 24/32/40 or `ui-thumb`, one size per list) · `__body` > `__title` (one line) + `__sub`
+   (two lines at most) + `__meta` (12px) + `__badges` (three, then "+N") · `__aside` (a score, a count) · `__actions`
+   (one button + ⋯). Never a `ui-card` per row: the list is the card. */
+.ui-list {
+  container: ui-list / inline-size; margin: 0; padding: 0; list-style: none;
+  background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-lg); box-shadow: var(--ui-card-shadow);
+}
+.ui-list--flush { border: 0; border-radius: 0; box-shadow: none; background: transparent; }
+.ui-list__item {
+  position: relative; display: flex; align-items: flex-start; gap: var(--ui-space-3);
+  box-sizing: border-box; padding: var(--ui-space-3); min-height: 44px; border-top: 1px solid var(--ui-border);
+}
+.ui-list > .ui-list__item:first-child { border-top: 0; }
+.ui-list > .ui-list__item:first-child { border-top-left-radius: inherit; border-top-right-radius: inherit; }
+.ui-list > .ui-list__item:last-child { border-bottom-left-radius: inherit; border-bottom-right-radius: inherit; }
+.ui-list__item:has(.ui-list__title[href]):hover { background: var(--ui-coll-hover); }
+.ui-list__item:is(.is-selected, [aria-selected="true"]) { background: var(--ui-coll-selected); }
+.ui-list__item:has(.ui-list__title:focus-visible) { outline: 2px solid var(--ui-focus); outline-offset: -2px; }
+.ui-list__media { flex: none; display: flex; align-items: center; min-height: 40px; }
+.ui-list__body { flex: 1 1 auto; min-width: 0; }
+.ui-list__title {
+  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+  color: var(--ui-text); font-size: var(--ui-fs-body); line-height: 20px; font-weight: 650; text-decoration: none;
+}
+.ui-list__title[href]::after { content: ""; position: absolute; inset: 0; z-index: 0; }
+.ui-list__title:focus-visible { outline: none; }
+.ui-list__sub { margin: 0; color: var(--ui-text-muted); font-size: var(--ui-fs-body); line-height: 20px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
+.ui-list__meta { margin: 2px 0 0; color: var(--ui-text-muted); font-size: var(--ui-fs-caption); line-height: 16px; }
+.ui-list__badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
+.ui-list__aside { flex: none; align-self: center; color: var(--ui-text); font-variant-numeric: tabular-nums; text-align: right; }
+.ui-list__actions { flex: none; align-self: center; display: inline-flex; align-items: center; gap: var(--ui-space-2); }
+/* Every control in a row is above the row's link: a checkbox, a button, the ⋯ menu, a second link. */
+.ui-list__item :is(.ui-list__actions, .ui-list__aside a, .ui-list__body a:not(.ui-list__title), button, input, select, textarea, label, summary, details) { position: relative; z-index: 1; }
+@container ui-list (max-width: 400px) {
+  .ui-list__item { flex-wrap: wrap; }
+  .ui-list__aside { order: 3; flex: 1 0 100%; text-align: left; }
+}
+/* Thumbnail (Polaris Thumbnail): 24 · 40 (default) · 60 · 80, radius 8 (6 at 24), a 1px line, cropped to fill. */
+.ui-thumb { display: block; flex: none; width: 40px; height: 40px; box-sizing: border-box; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-md); background: var(--ui-surface-2); overflow: hidden; object-fit: cover; }
+.ui-thumb--xs { width: 24px; height: 24px; border-radius: var(--ui-radius-sm); }
+.ui-thumb--md { width: 60px; height: 60px; }
+.ui-thumb--lg { width: 80px; height: 80px; }
+.ui-thumb > img { display: block; width: 100%; height: 100%; object-fit: cover; }
+
+/* ══ 4 · Compact list: `ul.ui-list.ui-list--compact > li.ui-list__item > a|button|div.ui-list__row` ══════════════════
+   One line per item: an icon or dot (16-20) · the label (ellipsis) · meta on the right (a time, a count) · a chevron or
+   one button. 36 under a mouse, 44 under a finger or at phone width (a control; Gems/CLAUDE.md 9.1). */
+.ui-list--compact > .ui-list__item { display: block; padding: 0; min-height: 0; }
+.ui-list__row {
+  display: flex; align-items: center; gap: var(--ui-space-2); box-sizing: border-box; width: 100%; min-height: 36px; padding: 8px 12px;
+  border: 0; background: none; color: var(--ui-text); font: inherit; font-size: var(--ui-fs-body); line-height: 20px; text-align: left; text-decoration: none;
+  border-radius: inherit;
+}
+:is(a, button).ui-list__row { cursor: pointer; }
+:is(a, button).ui-list__row:hover { background: var(--ui-coll-hover); }
+:is(a, button).ui-list__row:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: -2px; }
+.ui-list__row[aria-current="page"], .ui-list__row.is-selected { background: var(--ui-coll-selected); }
+.ui-list__icon { flex: none; display: inline-flex; width: 20px; height: 20px; align-items: center; justify-content: center; color: var(--ui-text-muted); }
+.ui-list__icon > svg { width: 16px; height: 16px; }
+.ui-list__label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ui-list__row > .ui-list__meta { flex: none; margin: 0; font-variant-numeric: tabular-nums; }
+@media (pointer: coarse), (max-width: 47.9975em) { .ui-list__row { min-height: 44px; } }
+
+/* `--activity`: a timeline. A 20px rail on the left (an 8px dot on a 1px line), the event, one line of detail, the time.
+   One shape for the six timelines the admin drew, partner-radar `.tl`, talent-radar `.tr-rows`, GemFactory `.gf-hist`.
+   Tone the dot: `ui-list__dot--success | --warning | --critical | --info`. */
+.ui-list--activity > .ui-list__item { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; column-gap: var(--ui-space-2); align-items: start; padding: 8px 12px; min-height: 36px; border-top: 0; }
+.ui-list--activity > .ui-list__item::before { content: ""; position: absolute; left: 21.5px; top: 0; bottom: 0; width: 1px; background: var(--ui-border); }
+.ui-list--activity > .ui-list__item:first-child::before { top: 14px; }
+.ui-list--activity > .ui-list__item:last-child::before { bottom: calc(100% - 14px); }
+.ui-list--activity > .ui-list__item:only-child::before { display: none; }
+.ui-list__dot { position: relative; z-index: 1; width: 8px; height: 8px; margin: 6px 0 0 6px; border-radius: 50%; background: var(--ui-text-muted); box-shadow: 0 0 0 3px var(--ui-surface); }
+.ui-list__dot--success { background: var(--gemboss-success, #0a8f6a); }
+.ui-list__dot--warning { background: var(--gemboss-warning, #b25e09); }
+.ui-list__dot--critical { background: var(--gemboss-danger-strong, #c70a24); }
+.ui-list__dot--info { background: var(--gemboss-accent, #5661f5); }
+.ui-list--activity .ui-list__label { display: block; white-space: nowrap; }
+.ui-list--activity .ui-list__detail { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ui-text-muted); font-size: var(--ui-fs-caption); line-height: 16px; }
+.ui-list--activity time, .ui-list--activity .ui-list__time { color: var(--ui-text-muted); font-size: var(--ui-fs-caption); line-height: 20px; white-space: nowrap; font-variant-numeric: tabular-nums; }
+
+/* ══ 5 · Card grid: `div.ui-cardgrid[data-min="200|240|320"] > article.ui-card.ui-card--media` ═════════════════════
+   The picture is what people choose by. auto-fill with ONE of three minimum widths (240 by default), 16 apart (Polaris
+   InlineGrid gap 400): the column count follows the room, never a media query on the viewport (admin's
+   `.gemboss-theme-grid` repeat(3) left ~201px cards at 768). The card and its parts (`__link`, `__menu`, `__meta`,
+   `data-ratio`) are the media card's, so they live with it in kit-plain.css (one owner, Gems/CLAUDE.md 9.3). */
+.ui-cardgrid { --ui-cardgrid-min: 240px; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(var(--ui-cardgrid-min), 100%), 1fr)); gap: var(--ui-space-4); margin: 0; padding: 0; list-style: none; }
+.ui-cardgrid[data-min="200"] { --ui-cardgrid-min: 200px; }
+.ui-cardgrid[data-min="320"] { --ui-cardgrid-min: 320px; }
+.ui-cardgrid > * { min-width: 0; }
+
+/* ══ 6 · Board: `div.ui-board > section.ui-board__col` ═════════════════════════════════════════════════════════════
+   Items that move through fixed states (six columns at most) and people move them. Column: `header.ui-board__head`
+   (a tone dot, the name, the count) · `ol.ui-board__list` of cards · after 12 cards `details.ui-board__more` ("Show 24
+   more", nested for each further 24; no script). An empty column says so and stays: it is where a card goes.
+   Moving a card needs a way that is not dragging (a select or the card's ⋯ menu): a keyboard and a finger cannot drag.
+   Columns are at least 240 and share the room; at phone width each is 78% of the board and they snap while it scrolls
+   sideways; they never stack. */
+.ui-board {
+  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 1fr); gap: var(--ui-space-4);
+  align-items: start; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; padding-bottom: 4px;
+}
+/* Phone width: a column is 78% of the board, so the next one peeks in; columns are states, their number never changes. */
+@media (max-width: 47.9975em) { .ui-board { grid-auto-columns: 78%; } }
+.ui-board__col { display: flex; flex-direction: column; gap: var(--ui-space-2); min-width: 0; padding: var(--ui-space-2); scroll-snap-align: start; background: var(--ui-coll-head-bg); border-radius: var(--ui-radius-lg); }
+.ui-board__head { display: flex; align-items: center; gap: var(--ui-space-2); min-height: 28px; padding: 0 4px; font-size: var(--ui-fs-body); font-weight: 650; }
+.ui-board__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ui-board__count { margin-left: auto; color: var(--ui-text-muted); font-weight: 450; font-variant-numeric: tabular-nums; }
+.ui-board__dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--ui-text-muted); }
+.ui-board__dot--success { background: var(--gemboss-success, #0a8f6a); }
+.ui-board__dot--warning { background: var(--gemboss-warning, #b25e09); }
+.ui-board__dot--critical { background: var(--gemboss-danger-strong, #c70a24); }
+.ui-board__dot--info { background: var(--gemboss-accent, #5661f5); }
+.ui-board__list { display: grid; gap: var(--ui-space-2); margin: 0; padding: 0; list-style: none; }
+.ui-board__list > li { min-width: 0; }
+.ui-board__empty { margin: 0; padding: var(--ui-space-4) var(--ui-space-2); color: var(--ui-text-muted); font-size: var(--ui-fs-body); text-align: center; border: 1px dashed var(--ui-border); border-radius: var(--ui-radius-md); }
+.ui-board__more > summary { list-style: none; justify-self: center; margin: 4px auto 0; width: fit-content; }
+.ui-board__more > summary::-webkit-details-marker { display: none; }
+.ui-board__more[open] > summary { display: none; }
+.ui-board__more { display: grid; gap: var(--ui-space-2); }
+
+/* ══ States (Gems/CLAUDE.md 9.2), every pattern ════════════════════════════════════════════════════════════════════
+   empty (`ui-empty`, ui.css) · no match (`ui-empty--no-match`: the header and the filters stay, "Clear filters") ·
+   loading (`ui-skeleton--table|--list|--compact|--grid|--board`, the shape of the pattern) · reloading (`aria-busy` on
+   the collection: the old rows stay, dimmed) · error (`ui-coll-error`: a banner in the frame + Retry; with old data,
+   "as of HH:MM") · selected · sort · filter (`ui-toolbar` + `ui-chip` + `ui-coll-count`) · pagination (`ui-pager`,
+   `ui-more`) · long content (`ui-trunc`, `ui-clamp-2`) · hover · focus-visible · reduced motion. */
+.ui-empty--no-match { padding-block: 32px; }
+.ui-coll-error { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-space-2) var(--ui-space-3); margin: var(--ui-space-3); }
+.ui-coll-error > :first-child { flex: 1 1 240px; min-width: 0; }
+.ui-coll-count { margin-left: auto; color: var(--ui-text-muted); font-size: var(--ui-fs-body); font-variant-numeric: tabular-nums; white-space: nowrap; }
+.ui-chip__x { margin-right: -4px; font-size: 14px; line-height: 1; opacity: .7; }
+:is(.ui-table-wrap, .ui-index, .ui-list, .ui-cardgrid, .ui-board)[aria-busy="true"] { position: relative; }
+:is(.ui-table-wrap, .ui-index, .ui-list, .ui-cardgrid, .ui-board)[aria-busy="true"] > :not(.ui-bulkbar, .ui-coll-busy) { opacity: .55; pointer-events: none; transition: opacity .15s; }
+.ui-coll-busy { position: absolute; top: 8px; right: 8px; z-index: 4; }
+
+/* Skeletons in the shape of the pattern (Polaris: 8px bars, radius 4, 12 apart; a 40px thumbnail). A table skeleton is
+   a real `ui-table` with its real header and bars in the cells, so nothing moves when the rows arrive. */
+:is(.ui-skeleton--table, .ui-skeleton--list, .ui-skeleton--compact, .ui-skeleton--grid, .ui-skeleton--board) .ui-skeleton__line { height: 8px; border-radius: 4px; }
+/* A bar is 8 on a 20px line (margin 6 above and below), so a placeholder row is exactly as tall as the row it stands for. */
+.ui-skeleton--table td .ui-skeleton__line { width: 70%; margin-block: 6px; }
+.ui-skeleton--table td:first-child .ui-skeleton__line { width: 85%; }
+.ui-skeleton--table tbody tr:hover { background: none; }
+.ui-skeleton__block { display: block; flex: none; width: 40px; height: 40px; border-radius: var(--ui-radius-md); background: var(--ui-surface-2); }
+.ui-skeleton__block--round { border-radius: 50%; width: 32px; height: 32px; }
+.ui-skeleton--list > .ui-list__item { align-items: center; }
+.ui-skeleton--list .ui-list__body { display: grid; gap: 12px; }
+.ui-skeleton--list .ui-list__body > .ui-skeleton__line:last-child { width: 60%; }
+.ui-skeleton--compact .ui-list__row { gap: 12px; }
+.ui-skeleton--compact .ui-list__row > .ui-skeleton__line { flex: 1 1 auto; max-width: 60%; }
+.ui-skeleton--grid .ui-card__body { display: grid; gap: 12px; justify-items: stretch; }
+.ui-skeleton--grid .ui-card__body > .ui-skeleton__line:last-child { width: 50%; }
+.ui-skeleton--board .ui-board__list > li { height: 72px; border-radius: var(--ui-radius-md); background: var(--ui-surface); }
+
+/* Under a finger: the sort header and the row checkbox are controls, 44 (the header grows; Polaris does the same). */
+@media (pointer: coarse) {
+  .ui-table__sort { min-height: 44px; margin-block: -12px; }
+  .ui-table__checkbox { min-width: 44px; min-height: 44px; margin: -12px 0; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .ui-table--sticky-first :is(th, td):first-child { animation: none; }
+  :is(.ui-table-wrap, .ui-index, .ui-list, .ui-cardgrid, .ui-board)[aria-busy="true"] > * { transition: none; }
+  .ui-board { scroll-behavior: auto; }
+}