@gemboss/ui 0.10.0 → 0.13.0

package/gemboss-ui.css

@@ -1,8 +1,8 @@
 /*
  * 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: 527a9099c443fa986e3844442da5497d4623e8a3
- * sources sha256: cf447622a2b99d887e6fa00ecfbc2c11423bbafafb1273411820018baed1e77e
+ * 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)
  *   + 181 rules from packages/ui/src/shell.css (the shared shell)
@@ -96,7 +96,7 @@
      and reading as "the font keeps shrinking". New rule: pick a step here, never a
      raw px. Floor is 12px (--fs-caption); 11px (--fs-micro) is reserved for bold
      micro-badges/count-pills ONLY — nothing below that. Body default is 14px, one
-     step up from Polaris bodyMd (13px; bodySm is 12) which the app had been leaning on for prose. The kit (ui.css) reads --ui-fs-body, 13px, because it sits beside Polaris components. */
+     step up from Polaris bodyMd (13px; bodySm is 12) which the app had been leaning on for prose. The kit (ui.css, kit-plain.css) reads --ui-fs-body, 13px, because it sits beside Polaris components; since 0.12.0 it reads none of body/h1-h3 here (README "Admin density"). */
   --gemboss-fs-micro: 11px;   /* bold count-pills / status chips only */
   --gemboss-fs-caption: 12px; /* metadata, timestamps, secondary labels */
   --gemboss-fs-body: 14px;    /* default body / reading text */
@@ -181,7 +181,7 @@
 }
 
 /* ═══ ui.css ═══ */
-/* ════════════════════════════════════════════════════════════════════════════
+/* ══
    Tool/App UI kit — the shared primitive layer for the internal operator surfaces
    (admin console, seller app chrome, theme-editor). ONE semantic token spine
    (`--ui-*`) that every primitive reads, plus the primitive CSS itself.
@@ -194,7 +194,7 @@
    The `--ui-*` layer is SEMANTIC and resolved per surface: components only read
    `--ui-*`; each surface maps those to its own tokens (admin → `--adm-*` below),
    so one <Button> looks native everywhere without hard-coding a palette.
-   ════════════════════════════════════════════════════════════════════════════ */
+   ══ */
 
 :root {
   --ui-surface: #ffffff;
@@ -229,10 +229,15 @@
   --ui-space-2: 8px;
   --ui-space-3: 12px;
   --ui-space-4: 16px;
-  /* ONE control height under a mouse: Polaris' TextField/Select (32px). Field, select, button and
-     segment share it, so a toolbar row is one height (was 32 / 36 / 34 / 36). Under a thumb every
-     control is 44px (the coarse block below; kit-plain.css adds phone WIDTH for non-admin surfaces). */
+  /* Polaris' two heights under a mouse (0.12.0): a FIELD (gemboss-field, ui-select) is TextField/Select, 32px; a BUTTON
+     (ui-btn, ui-seg, ui-tabs) is Button, 28px. A toolbar row is 32 + 28, as in the admin. Under a thumb every control is
+     44px (the coarse block below; kit-plain.css adds phone WIDTH for non-admin surfaces). */
   --ui-control-h: 32px;
+  --ui-btn-h: 28px;
+  /* Polaris Card (13.9.5): no grey frame of its own, --p-shadow-100 under it. The edge is ONE 1px line in the surface's
+     --ui-border (Polaris paints a bevel inset on a ::before; a border cannot be covered by a full-bleed child, and it
+     follows a surface's dark --ui-border, which a light bevel would not). */
+  --ui-card-shadow: 0 1px 0 rgba(26,26,26,.07);
   --ui-fs-body: 13px;
   --ui-fs-caption: 12px;
   /* Content column width for the seller app shell — ONE source of truth for every wide surface
@@ -288,16 +293,17 @@
   --ui-warning-fg: color-mix(in srgb, #c99a2e 70%, #ffffff);
   --ui-danger-fg: color-mix(in srgb, var(--gemboss-danger-strong) 70%, #ffffff);
   --ui-focus: var(--adm-accent);
+  --ui-card-shadow: none;
 }
 
-/* ── Button ──────────────────────────────────────────────────────────────────
+/* ── Button ──
    inline-flex + center so a <button> and an <a> render identically (anchors ignore
    `height` as inline elements — the root cause of the misaligned link-buttons). */
 .ui-btn {
   display: inline-flex; align-items: center; justify-content: center; gap: var(--ui-space-2);
-  height: var(--ui-control-h); padding: 0 var(--ui-space-4); box-sizing: border-box;
+  height: var(--ui-btn-h); padding: 0 var(--ui-space-3); box-sizing: border-box;
   line-height: 1; white-space: nowrap; vertical-align: middle;
-  border-radius: var(--ui-radius-md); font-family: inherit; font-size: var(--ui-fs-body); font-weight: 550;
+  border-radius: var(--ui-radius-md); font-family: inherit; font-size: var(--ui-fs-caption); font-weight: 550;
   cursor: pointer; text-decoration: none; user-select: none;
   border: 1px solid var(--ui-border); background: transparent; color: var(--ui-text);
   transition: background .12s ease, border-color .12s ease;
@@ -309,33 +315,33 @@
 .ui-btn--primary:hover { background: var(--ui-accent-hover); border-color: var(--ui-accent-hover); }
 .ui-btn--ghost { border-color: transparent; background: transparent; color: var(--ui-text-muted); }
 .ui-btn--ghost:hover { background: var(--ui-surface-2); color: var(--ui-text); }
-.ui-btn--sm { height: 28px; padding: 0 var(--ui-space-3); font-size: var(--ui-fs-caption); }
+/* `ui-btn--sm`: the default size under a mouse since 0.12.0; it only marks a button the admin keeps compact under a finger. */
 
-/* ── Card ──────────────────────────────────────────────────────────────────── */
+/* ── Card ── */
 .ui-card {
   background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-lg);
-  padding: var(--ui-space-4); color: var(--ui-text);
+  box-shadow: var(--ui-card-shadow); padding: var(--ui-space-4); color: var(--ui-text);
 }
-.ui-card__title { font-size: 14px; font-weight: 600; margin: 0 0 var(--ui-space-2); }
+.ui-card__title { font-size: 14px; line-height: 20px; font-weight: 650; margin: 0 0 var(--ui-space-2); }
 /* Đầu thẻ có nút: `<div class="ui-card__head"><h2 class="ui-card__title">…</h2><button class="ui-btn">…</button></div>`.
    Tiêu đề trái, hành động phải, xuống dòng khi hẹp (01/10/2026: partner-radar rel-head / agr). */
 .ui-card__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ui-space-2); margin-bottom: var(--ui-space-2); }
 .ui-card__head > .ui-card__title { margin: 0; }
 .ui-card__head > :last-child:not(.ui-card__title) { display: flex; flex-wrap: wrap; gap: var(--ui-space-2); }
 
-/* ── Select ──────────────────────────────────────────────────────────────────
+/* ── Select ──
    Native <select> reskinned; custom caret as an inline SVG data-URI (caret color
    uses the muted token via %-encoding fallback).
    Its BOX is the text field's (29/09/2026, Chris): same --gemboss-field-* tokens for ground, line and
    ink, same hover, same focus ring as `.gemboss-field`. Before, a grey --ui-surface-2 select stood next
    to a bordered white field in the same form (gempress editor, admin forms), and `:focus` removed the
    outline and only recoloured the border, so a keyboard user saw almost nothing. Height is
-   --ui-control-h, the button's and the field's, because a select sits in toolbars beside both. */
+   --ui-control-h, the field's (Polaris Select, 32): a field, not a button (28, --ui-btn-h). */
 .ui-select {
   height: var(--ui-control-h); padding: 0 32px 0 12px; max-width: 100%;
   background: var(--gemboss-field-bg) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 20 20'><path fill='%239a9aa4' d='M5 7l5 5 5-5z'/></svg>") no-repeat right 10px center;
   border: 1px solid var(--gemboss-field-line); border-radius: var(--ui-radius-md);
-  color: var(--gemboss-field-ink); font-family: inherit; font-size: var(--ui-fs-body); font-weight: 500;
+  color: var(--gemboss-field-ink); font-family: inherit; font-size: var(--ui-fs-body); font-weight: 450;
   appearance: none; -webkit-appearance: none; cursor: pointer;
 }
 .ui-select:hover:not(:disabled) {
@@ -350,13 +356,13 @@
 .ui-select:disabled { opacity: .5; cursor: not-allowed; }
 .ui-select--slim { height: 30px; font-size: var(--ui-fs-caption); }
 
-/* ── Tag / Chip ──────────────────────────────────────────────────────────────
+/* ── Tag / Chip ──
    Small inline labels. `solid` = filled muted pill (was gemboss-vault-tag); `chip` =
    bordered mono token (was gemboss-vault-chip). `accent` tone for the highlighted state. */
 .ui-tag {
   display: inline-flex; align-items: center; gap: 6px;
-  font-size: var(--gemboss-fs-micro, 11px); font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase;
-  padding: 1px 6px; border-radius: 6px; background: var(--ui-surface-2); color: var(--ui-text-muted);
+  font-size: var(--ui-fs-caption); line-height: 20px; font-weight: 450;
+  padding: 0 6px; border-radius: var(--ui-radius-md); background: var(--ui-surface-2); color: var(--ui-text-muted);
 }
 .ui-tag--accent { background: var(--adm-accent-soft, rgba(20,22,26,.05)); color: var(--adm-accent-fg, var(--ui-accent)); }
 .ui-tag--chip {
@@ -390,13 +396,13 @@
 
 /* ── Chữ phụ: `<p class="ui-muted">`, `<span class="ui-muted">` — mô tả, chú thích, dòng meta. Cỡ caption, màu muted.
    Trước đây mỗi surface tự viết `.muted` (partner-radar: 180 chỗ). */
-.ui-muted { color: var(--ui-text-muted); font-size: var(--gemboss-fs-caption); }
+.ui-muted { color: var(--ui-text-muted); font-size: var(--ui-fs-caption); }
 
 /* ── Tiêu đề trang: `<div class="ui-page-head"><h1>…</h1><p>…</p></div>`. Đưa lên NGUYÊN VĂN từ admin
-   `.gemboss-admin-page-head` (01/10/2026, Chris: một chủ sở hữu; admin dùng bản này). Cố ý không đặt margin cho h1
-   và không dùng flex: admin không reset margin tiêu đề, nên đổi ở đây là đổi khoảng cách của 14 trang admin. */
+   `.gemboss-admin-page-head` (01/10/2026, Chris: một chủ sở hữu; admin dùng bản này). Không đặt margin cho h1
+   và không dùng flex: margin 0 đến từ reset (Polaris ở admin, app-shell.css trong shell của bề mặt từ 0.12.0). */
 .ui-page-head { margin-bottom: 20px; }
-.ui-page-head h1 { color: var(--ui-text-strong); font-size: 22px; line-height: 28px; font-weight: 650; letter-spacing: -0.01em; } /* own line-height: the 20px body line overlapped a wrapped title (0.5.1) */
+.ui-page-head h1 { color: var(--ui-text-strong); font-size: 20px; line-height: 24px; font-weight: 700; letter-spacing: -0.01em; } /* own line-height: the 20px body line overlapped a wrapped title (0.5.1) */
 .ui-page-head p { color: var(--ui-text-muted); font-size: var(--ui-fs-body); margin-top: 4px; }
 
 /* ── Thanh công cụ: `<div class="ui-toolbar">` — ô tìm giãn, điều khiển bám phải, một hàng gọn, xuống dòng khi hẹp.
@@ -414,7 +420,7 @@ a.ui-metric { text-decoration: none; color: inherit; }
 a.ui-metric:hover { border-color: var(--ui-text-muted); }
 a.ui-metric:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 1px; }
 .ui-metric__val { font-size: 17px; font-weight: 700; color: var(--ui-text); font-variant-numeric: tabular-nums; line-height: 1.15; }
-.ui-metric__lbl { font-size: var(--gemboss-fs-caption); font-weight: 500; color: var(--ui-text-muted); }
+.ui-metric__lbl { font-size: var(--ui-fs-caption); font-weight: 500; color: var(--ui-text-muted); }
 .ui-metric--success { border-color: color-mix(in srgb, var(--gemboss-success) 40%, transparent); }
 .ui-metric--success .ui-metric__val { color: var(--ui-success-fg); }
 .ui-metric--warning { border-color: color-mix(in srgb, #c99a2e 40%, transparent); }
@@ -426,7 +432,7 @@ a.ui-metric:focus-visible { outline: 2px solid var(--ui-focus); outline-offset:
    Lưới tự giãn: mỗi ô ≥ 160px, xuống dòng khi hẹp. */
 .ui-dl { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px 16px; margin: 0; }
 .ui-dl > div { min-width: 0; }
-.ui-dl dt { font-size: var(--gemboss-fs-caption); color: var(--ui-text-muted); }
+.ui-dl dt { font-size: var(--ui-fs-caption); color: var(--ui-text-muted); }
 .ui-dl dd { margin: 4px 0 0; font-weight: 600; color: var(--ui-text); overflow-wrap: anywhere; }
 
 /* ── Thông báo: `<div class="ui-notice ui-notice--warning">…</div>`. Lỗi tải, cảnh báo cấu hình, việc cần người
@@ -443,22 +449,22 @@ a.ui-metric:focus-visible { outline: 2px solid var(--ui-focus); outline-offset:
 .ui-pager > a { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-md); color: var(--ui-text); text-decoration: none; font-size: var(--ui-fs-body); }
 .ui-pager > a:hover { background: var(--ui-surface-2); }
 .ui-pager > a:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 1px; }
-.ui-pager > [aria-current="page"] { color: var(--ui-text-muted); font-size: var(--gemboss-fs-caption); }
+.ui-pager > [aria-current="page"] { color: var(--ui-text-muted); font-size: var(--ui-fs-caption); }
 
-/* ── Badge ────────────────────────────────────────────────────────────────────
-   Polaris' Badge (02/10/2026; was an uppercase mono pill): 12px/550, padding 2/8, radius 8, the secondary
+/* ── Badge ──
+   Polaris' Badge (02/10/2026; was an uppercase mono pill): 12px/450 (its text span; 550 was the box), padding 2/8, radius 8, the secondary
    fill. The admin's /admin console draws it too (components/ui/Badge.tsx). Tones (`--success|--warning|--critical|
    --info`, `--dot`) are in kit-plain.css, for the non-React surfaces; the seller app uses Polaris <Badge tone>. */
 .ui-badge {
   display: inline-flex; align-items: center; gap: 4px;
-  font-size: var(--ui-fs-caption); line-height: 16px; font-weight: 550; white-space: nowrap;
+  font-size: var(--ui-fs-caption); line-height: 16px; font-weight: 450; white-space: nowrap;
   padding: 2px 8px; border-radius: var(--ui-radius-md); background: color-mix(in srgb, var(--ui-text) 8%, transparent); color: var(--ui-text-muted);
 } /* a tint of the ink, not --ui-surface-2: that is the table row hover, and a badge vanished on hover (0.5.1) */
 
-/* ── Modal ────────────────────────────────────────────────────────────────────
+/* ── Modal ──
    Rendered INLINE (not portaled): a portal escapes the .gemboss-admin-shell token
    scope and would render light. Kept in-tree so --ui-* resolves to the surface.
-   0.7.3: Polaris Modal's density (#1099, README "Popup density"). Popup only: --ui-control-h stays 32. */
+   0.7.3: Polaris Modal's density (#1099, README "Popup density"). Buttons are 28 everywhere since 0.12.0 (--ui-btn-h). */
 .ui-overlay {
   position: fixed; inset: 0; z-index: 500;
   background: rgba(0, 0, 0, 0.5);
@@ -491,7 +497,6 @@ a.ui-metric:focus-visible { outline: 2px solid var(--ui-focus); outline-offset:
   display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end;
   padding: 12px 16px; border-top: 1px solid var(--ui-border);
 }
-:is(.ui-modal__head, .ui-modal__foot) .ui-btn { height: 28px; padding: 0 12px; font-size: var(--ui-fs-caption); }
 /* 44px under a thumb or at phone width; -8px keeps the head 53. */
 @media (pointer: coarse), (max-width: 47.9975em) {
   .ui-modal__close { width: 44px; height: 44px; margin: -8px -8px -8px 0; }
@@ -530,15 +535,15 @@ a.ui-metric:focus-visible { outline: 2px solid var(--ui-focus); outline-offset:
   .ui-select:not(.ui-select--slim) { min-height: 44px; }
 }
 
-/* ── Segmented control ────────────────────────────────────────────────────────
+/* ── Segmented control ──
    Grouped toggle: icon squares (.ui-seg button) or text tabs (.is-text). The
    selected segment uses the accent-soft state. */
 .ui-seg { display: inline-flex; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-md); overflow: hidden; }
 .ui-seg :is(button, a) {
-  display: inline-grid; place-items: center; width: calc(var(--ui-control-h) - 2px); height: calc(var(--ui-control-h) - 2px);
+  display: inline-grid; place-items: center; width: calc(var(--ui-btn-h) - 2px); height: calc(var(--ui-btn-h) - 2px);
   border: 0; background: transparent; color: var(--ui-text-muted); cursor: pointer; font-family: inherit;
 }
-.ui-seg :is(button, a).is-text { width: auto; padding: 0 12px; font-size: var(--ui-fs-body); font-weight: 500; }
+.ui-seg :is(button, a).is-text { width: auto; padding: 0 12px; font-size: var(--ui-fs-caption); font-weight: 550; }
 .ui-seg :is(button, a) + :is(button, a) { border-left: 1px solid var(--ui-border); }
 .ui-seg :is(button, a):hover { background: var(--ui-surface-2); color: var(--ui-text); }
 .ui-seg :is(button, a):focus-visible { outline: 2px solid var(--ui-focus); outline-offset: -2px; }
@@ -548,7 +553,7 @@ a.ui-metric:focus-visible { outline: 2px solid var(--ui-focus); outline-offset:
 .ui-seg button.active { background: var(--ui-accent-soft); color: var(--ui-accent-strong); }
 .ui-seg svg { width: 16px; height: 16px; fill: currentColor; }
 
-/* ── Stat chip ────────────────────────────────────────────────────────────────
+/* ── Stat chip ──
    Count-led pill; clickable ones double as filters (active = accent-soft). */
 .ui-stats { display: flex; flex-wrap: wrap; gap: var(--ui-space-2); margin-bottom: 24px; }
 .ui-stat {
@@ -563,7 +568,7 @@ a.ui-metric:focus-visible { outline: 2px solid var(--ui-focus); outline-offset:
 .ui-stat.is-clickable.active { border-color: var(--ui-accent); background: var(--ui-accent-soft); color: var(--ui-accent-strong); }
 .ui-stat.is-clickable.active b { color: var(--ui-accent-strong); }
 
-/* ── Toast / notification bar ─────────────────────────────────────────────────
+/* ── Toast / notification bar ──
    App-wide "done / failed" pill for async actions (delete/duplicate/publish…).
    Polaris-style: dark pill, bottom-center, error variant in critical red. Lives
    in <ToastProvider> (components/ui/Toast.tsx), portaled to <body>. */
@@ -606,7 +611,7 @@ a.ui-metric:focus-visible { outline: 2px solid var(--ui-focus); outline-offset:
 }
 @media (prefers-reduced-motion: reduce) { .gemboss-toast { animation: none; } }
 
-/* ── The kit's controls under a thumb ─────────────────────────────────────────────────────────
+/* ── The kit's controls under a thumb ──
  * Measured by hit test on /admin/{theme-kernel,media,style-packs} at 390 and 1366 with a coarse
  * pointer: segmented buttons 36x36, selects 30-36 tall, clickable stat tiles 29, the asset row's
  * note button 30x30. §9.1 puts every one of them in the CONTROL tier (44px).
@@ -614,9 +619,11 @@ a.ui-metric:focus-visible { outline: 2px solid var(--ui-focus); outline-offset:
  * HERE rather than in each surface's stylesheet, because this is the shared primitive layer — the
  * same reason the kit exists at all. The admin console and the seller app both read it.
  *
- * `pointer: coarse` only: a mouse keeps the density these surfaces were designed at. Growing a box
- * for every pointer is what #2147 did to a working width.
+ * The block below is `pointer: coarse` only: a mouse at desktop width keeps the density these surfaces were
+ * designed at. Growing a box for every pointer is what #2147 did to a working width.
  */
+/* Phone WIDTH (< 768) with a mouse too (a narrow window): buttons and segments are 44 (0.12.0; at desktop width 28). */
+@media (max-width: 47.9975em) { .ui-btn:not(.ui-btn--sm), .ui-seg :is(button, a) { min-height: 44px; } .ui-seg :is(button, a):not(.is-text) { min-width: 44px; } }
 @media (pointer: coarse) {
   /* NOT `.ui-textarea`: it already declares `min-height: 96px` earlier in this file, so adding it to
      a 44px group LOWERS it — same specificity, later line. The note dialog's box would have gone from
@@ -643,7 +650,7 @@ a.ui-metric:focus-visible { outline: 2px solid var(--ui-focus); outline-offset:
   .ui-seg :is(button, a) { min-width: 44px; }
 }
 
-/* ── Skeleton ─────────────────────────────────────────────────────────────────
+/* ── Skeleton ──
    Vạch xám giữ chỗ cho nội dung chưa về. Ánh sáng chạy qua là gợi ý "đang chờ", không phải trang
    trí — nên nó tắt hẳn với `prefers-reduced-motion`, giữ nguyên vạch tĩnh. */
 .ui-skeleton { display: flex; flex-direction: column; gap: var(--ui-space-2); }
@@ -664,7 +671,7 @@ a.ui-metric:focus-visible { outline: 2px solid var(--ui-focus); outline-offset:
 
 }
 
-/* ── Resizer: the seam you drag between two panels ────────────────────────────
+/* ── Resizer: the seam you drag between two panels ──
    One look for every split in the fleet: the admin's editors (chat | preview) today; made for gemcare's
    inbox columns too (they adopt it at their next ui:sync). The element is the drag target; its GEOMETRY (a flex item, a grid edge, an absolutely
    placed strip) belongs to the surface. While a drag runs the surface puts `ui-resizing` on <body>
@@ -704,7 +711,7 @@ body.ui-resizing, body.ui-resizing * { cursor: col-resize !important; user-selec
    pointer stream is never captured by a cross-document frame (the classic "stuck cursor"). */
 body.ui-resizing::after { content: ""; position: fixed; inset: 0; z-index: 9999; cursor: col-resize; }
 
-/* ── Tabs · Table · Empty state ───────────────────────────────────────────────
+/* ── Tabs · Table · Empty state ──
    Plain-CSS primitives for surfaces that are NOT React (gemcare's vanilla dashboard reads this
    file through `npm run export:ui-css`). The React app has Polaris <Tabs>/<DataTable>/<EmptyState>
    for these; nothing in apps/admin uses the classes below, and they restyle no existing component.
@@ -712,18 +719,18 @@ body.ui-resizing::after { content: ""; position: fixed; inset: 0; z-index: 9999;
 
    Tabs: `<div class="ui-tabs" role="tablist"><button role="tab" aria-selected="true">…` — the
    selected state IS `aria-selected`, so what a screen reader announces and what is painted cannot
-   disagree. 44px under EVERY pointer (§9.1 control tier), not only coarse: tabs sit 4px apart, and
-   that gap is only acceptable between targets that are already 44px. */
+   disagree. Polaris Tabs under a mouse (0.12.0): 28px, 12px/550; 8px apart, the §9.1 gap for targets under 44.
+   44px under a finger or at phone width (the rule after these). */
 .ui-tabs {
-  display: flex; gap: var(--ui-space-1); border-bottom: 1px solid var(--ui-border);
+  display: flex; gap: var(--ui-space-2); border-bottom: 1px solid var(--ui-border);
   overflow-x: auto; scrollbar-width: none;
 }
 .ui-tabs > button,
 .ui-tabs > a {
   position: relative; flex: 0 0 auto; display: inline-flex; align-items: center; gap: var(--ui-space-2);
-  min-height: 44px; padding: 0 var(--ui-space-3); border: 0; background: transparent; cursor: pointer;
+  min-height: var(--ui-btn-h); padding: 0 var(--ui-space-3); border: 0; background: transparent; cursor: pointer;
   border-radius: var(--ui-radius-sm) var(--ui-radius-sm) 0 0;
-  font-family: inherit; font-size: var(--ui-fs-body); font-weight: 500; white-space: nowrap;
+  font-family: inherit; font-size: var(--ui-fs-caption); font-weight: 550; white-space: nowrap;
   color: var(--ui-text-muted);
   transition: color var(--gemboss-transition-fast) ease, background-color var(--gemboss-transition-fast) ease;
 }
@@ -734,13 +741,14 @@ body.ui-resizing::after { content: ""; position: fixed; inset: 0; z-index: 9999;
 .ui-tabs > a { text-decoration: none; }
 /* Tab bằng link (mỗi tab là một URL): `<nav class="ui-tabs"><a aria-current="page">` — cùng hình với tab nút. */
 .ui-tabs > a[aria-current="page"],
-.ui-tabs > button[aria-selected="true"] { color: var(--ui-text-strong); font-weight: 600; }
+.ui-tabs > button[aria-selected="true"] { color: var(--ui-text-strong); }
 .ui-tabs > a[aria-current="page"]::after,
 .ui-tabs > button[aria-selected="true"]::after {
   content: ""; position: absolute; left: var(--ui-space-3); right: var(--ui-space-3); bottom: 0;
   height: 2px; border-radius: var(--gemboss-radius-full); background: var(--ui-accent);
 }
 .ui-tabs > button:disabled { opacity: .5; cursor: not-allowed; }
+@media (pointer: coarse), (max-width: 47.9975em) { .ui-tabs > :is(button, a) { min-height: 44px; } }
 
 /* Table: wrap it — `<div class="ui-table-wrap"><table class="ui-table">` — so a wide table scrolls
    inside its card instead of pushing the page sideways at 320px. Numeric cells take `.is-num`:
@@ -748,16 +756,21 @@ body.ui-resizing::after { content: ""; position: fixed; inset: 0; z-index: 9999;
 .ui-table-wrap {
   overflow-x: auto; max-width: 100%;
   background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-lg);
+  box-shadow: var(--ui-card-shadow);
 }
 .ui-table { width: 100%; border-collapse: collapse; font-size: var(--ui-fs-body); color: var(--ui-text); }
 .ui-table th,
 .ui-table td {
-  padding: var(--ui-space-2) var(--ui-space-3); text-align: left; vertical-align: middle;
+  padding: var(--ui-space-2) 6px; text-align: left; vertical-align: middle;
   border-bottom: 1px solid var(--ui-border);
 }
-.ui-table th {
-  font-size: var(--gemboss-fs-caption); font-weight: 600; color: var(--ui-text-muted); white-space: nowrap;
-}
+/* Polaris DataTable (13.9.5, measured on /app/analytics 05/10/2026): cells 8px 6px (a row 36), header 12px 6px (45),
+   the first column 12px in from the edge. */
+/* :where() keeps the edge columns at the base rule's weight, so a surface's own `.x-table td { padding }` still wins. */
+.ui-table :is(th, td):where(:first-child) { padding-left: var(--ui-space-3); }
+.ui-table :is(th, td):where(:last-child) { padding-right: var(--ui-space-3); }
+.ui-table th { font-weight: 450; color: var(--ui-text-muted); white-space: nowrap; }
+.ui-table thead th { padding-block: var(--ui-space-3); } /* the column header; a row header (tbody th) is a cell */
 .ui-table tbody tr:last-child > td { border-bottom: 0; }
 .ui-table tbody tr:hover { background: var(--ui-surface-2); }
 .ui-table .is-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
@@ -766,7 +779,7 @@ body.ui-resizing::after { content: ""; position: fixed; inset: 0; z-index: 9999;
 /* Link nằm thẳng trong ô (tên bản ghi dẫn sang trang chi tiết) là link trong DANH SÁCH: ≥ 24px (WCAG 2.5.8, §9.1).
    Chữ 13px cho hộp 17px; visual-gate đo đỏ ở partner-radar /competitors 01/10/2026. inline-flex giữ nó trên dòng. */
 .ui-table td > a { display: inline-flex; align-items: center; min-height: 24px; }
-.ui-table .ui-sub { display: block; margin-top: 2px; font-size: var(--gemboss-fs-caption); color: var(--ui-text-muted); font-weight: 400; }
+.ui-table .ui-sub { display: block; margin-top: 2px; font-size: var(--ui-fs-caption); color: var(--ui-text-muted); font-weight: 400; }
 
 /* Empty state: `<div class="ui-empty"><p class="ui-empty__title">…</p><p class="ui-empty__body">…</p>
    <button class="ui-btn">…</button></div>`. Says what is missing and what to do next. */
@@ -775,7 +788,7 @@ body.ui-resizing::after { content: ""; position: fixed; inset: 0; z-index: 9999;
   padding: var(--ui-space-4); padding-block: 40px; text-align: center;
   color: var(--ui-text-muted); font-size: var(--ui-fs-body);
 }
-.ui-empty__title { margin: 0; font-size: var(--gemboss-fs-h3); font-weight: 600; color: var(--ui-text-strong); }
+.ui-empty__title { margin: 0; font-size: 14px; line-height: 20px; font-weight: 650; color: var(--ui-text-strong); }
 .ui-empty__body { margin: 0; max-width: 48ch; line-height: 1.5; }
 .ui-empty > .ui-btn { margin-top: var(--ui-space-2); }
 
@@ -2040,6 +2053,19 @@ body.gemboss-assistant-unread .gnav-item.gnav-assistant::after {
 /* Headings get their own line (Polaris heading line-heights are ~1.25-1.4): inheriting the body's 20px made a wrapped 22px
  * title overlap itself (gempress, 0.5.1). */
 :where(h1, h2, h3) { letter-spacing: -0.01em; line-height: 1.3; }
+/* Polaris' heading reset (0.12.0, 05/10/2026): in the admin an <h2> or a <p> with no class is body text with no margin,
+ * because Polaris' global sheet sets `h1…h6, p { margin: 0; font-size: 1em; font-weight: regular }` and every heading
+ * that looks like one is a Text variant. Surfaces had the browser's instead: a bare <h2> at 19.5px bold with 16px margins
+ * sat in GemFactory and taskdesk pages beside kit cards titled 14px. Here, only INSIDE the shell (`.gemboss-platform-
+ * shell`, the AppShell root every surface on the kit renders): a login page or a public page keeps its own type. Never
+ * inside an article the surface shows: `.ui-prose` or `[data-content]` (the contract), and the wrappers the fleet already
+ * uses for rendered HTML, read on 05/10/2026, by exact name (gemcommunity `md-body` and `recap-md`,
+ * content-radar `article-body`, the assistants' `asst-md`; any class containing `prose` or `markdown`, any case, so ProseMirror too). A NEW wrapper: mark it `ui-prose` or
+ * `data-content`. scripts/density.mjs skips exactly this list (ARTICLE); density.test.ts fails if the two differ. A post body keeps the browser's scale. Only an element WITHOUT a class: a surface's `h2.gf-title` that sets only its size keeps the
+ * browser's bold and margins (a zero-specificity author rule still beats the browser's own sheet, review #3787). */
+:where(.gemboss-platform-shell) :where(h1, h2, h3, h4, h5, h6, p):where(:not([class])):not(:where(.ui-prose, [data-content], [class*="prose" i], [class*="markdown" i], .md-body, .recap-md, .asst-md, .article-body) *) {
+  margin: 0; font-size: 1em; font-weight: inherit; line-height: inherit;
+}
 
 .gemboss-topbar-start { display: flex; align-items: center; gap: 8px; min-width: 0; }
 .gemboss-topbar-center { display: flex; justify-content: center; min-width: 0; }
@@ -3449,8 +3475,7 @@ html[data-gb-navigating] .gb-route-cover {
 
    Key-value list: `<dl class="ui-kv"><dt>Owner</dt><dd>Lily</dd>…</dl>` — label column sized to
    its longest label, value column takes the rest and wraps long keys and URLs. */
-.ui-btn--icon { flex: none; width: var(--ui-control-h); padding: 0; }
-.ui-btn--icon.ui-btn--sm { width: 28px; }
+.ui-btn--icon { flex: none; width: var(--ui-btn-h); padding: 0; }
 .ui-btn--icon svg { width: 18px; height: 18px; }
 /* Menu: the SURFACE is the shell's `gemboss-popover-surface` and the rows are the account menu's row (shell.css
    declares `.gemboss-account-menu-item, .ui-menu__item` together), so a kit menu and the account menu on one page
@@ -3516,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;
@@ -3541,8 +3582,6 @@ button.ui-card__media, a.ui-card__media { cursor: pointer; }
    </div><div class="ui-modal__actions"><button class="ui-btn">Copy</button></div><button class="ui-modal__close">…` */
 .ui-modal__subtitle { display: block; margin-top: 2px; font-size: var(--ui-fs-caption); line-height: 16px; font-weight: 450; color: var(--ui-text-muted); overflow-wrap: anywhere; }
 .ui-modal__actions { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-space-2); }
-/* An icon button in the popup's head or foot is square at the popup's 28 (ui.css gives those buttons 0/12 padding). */
-:is(.ui-modal__head, .ui-modal__foot) .ui-btn--icon { width: 28px; padding: 0; }
 /* A popup taller than the screen: the body scrolls, the head and foot stay, so the actions are always reachable
    (320×568 with a long form put Huỷ/Xoá below the fold, unreachable under the locked page; review #3633). */
 .ui-overlay > .ui-modal { display: flex; flex-direction: column; max-height: calc(100dvh - 40px); }
@@ -3578,8 +3617,8 @@ button.ui-card__media, a.ui-card__media { cursor: pointer; }
    dưới cùng (delta + so với gì). */
 .ui-metrics--grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: var(--ui-space-3); margin: 0; }
 .ui-metric--lg { gap: 4px; padding: var(--ui-space-3) var(--ui-space-4); }
-.ui-metric--lg .ui-metric__val { font-size: var(--gemboss-fs-h1, 24px); line-height: 1.1; }
-.ui-metric--lg .ui-metric__lbl { order: -1; font-size: var(--gemboss-fs-body, 14px); }
+.ui-metric--lg .ui-metric__val { font-size: 24px; line-height: 32px; } /* Polaris headingXl, as the admin's analytics cards */
+.ui-metric--lg .ui-metric__lbl { order: -1; font-size: var(--ui-fs-body); } /* bodyMd 13 (0.12: was 14) */
 .ui-metric__foot { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-size: var(--gemboss-fs-caption); color: var(--ui-text-muted); }
 @media (max-width: 520px) { .ui-metrics--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
 
@@ -3627,7 +3666,7 @@ button.ui-card__media, a.ui-card__media { cursor: pointer; }
    sau bước đầu mang `__rate` = tỉ lệ đi tiếp từ bước NGAY TRƯỚC (bề mặt tính). Ngang ở khổ rộng, dọc ở ≤ 520px. */
 .ui-funnel { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--ui-space-2); margin: 0; padding: 0; list-style: none; }
 .ui-funnel > li { position: relative; display: flex; flex-direction: column; gap: 2px; padding: var(--ui-space-3); border-radius: var(--ui-radius-md); background: var(--ui-surface-2); min-width: 0; }
-.ui-funnel__val { font-size: var(--gemboss-fs-h2, 20px); font-weight: 700; color: var(--ui-text); font-variant-numeric: tabular-nums; line-height: 1.15; }
+.ui-funnel__val { font-size: 20px; font-weight: 700; color: var(--ui-text); font-variant-numeric: tabular-nums; line-height: 24px; } /* Polaris headingLg */
 .ui-funnel__lbl { font-size: var(--gemboss-fs-caption); color: var(--ui-text-muted); overflow-wrap: anywhere; }
 .ui-funnel__rate { order: -1; font-size: var(--gemboss-fs-caption); font-weight: 600; color: var(--ui-series-1); font-variant-numeric: tabular-nums; }
 @media (max-width: 520px) { .ui-funnel { grid-auto-flow: row; } }
@@ -3642,7 +3681,7 @@ button.ui-card__media, a.ui-card__media { cursor: pointer; }
 @media (max-width: 960px) { .ui-grid--2 { grid-template-columns: minmax(0, 1fr); } }
 @media (max-width: 720px) { .ui-grid--3 { grid-template-columns: minmax(0, 1fr); } }
 .ui-section-head { margin: var(--ui-space-4) 0 0; }
-.ui-section-head > h2 { margin: 0; font-size: var(--gemboss-fs-h3, 16px); font-weight: 650; color: var(--ui-text); }
+.ui-section-head > h2 { margin: 0; font-size: 14px; line-height: 20px; font-weight: 650; color: var(--ui-text); } /* Polaris headingMd (0.12: was 16) */
 .ui-section-head > p { margin: 2px 0 0; font-size: var(--gemboss-fs-caption); color: var(--ui-text-muted); }
 
 /* Nhóm nút CHỮ không bao giờ bẻ chữ (03/10/2026, thanh lọc của gemnews ở 390px: "Mọi ngôn ngữ" thành hai dòng, "中文"
@@ -3892,6 +3931,26 @@ button.ui-metric:focus-visible { outline: 2px solid var(--ui-focus); outline-off
 /* Phone: 11 targets of 44px wrapped into 3-4 rows at 320 (measured). Keep Previous · current · Next; the range wraps under. */
 @media (max-width: 35.9975em) { .ui-pager > a:not([rel]):not([aria-current]):not([aria-disabled]), .ui-pager__gap { display: none; } }
 
+/* 0.12.0: filter chip and card stack, both drawn by hand on every surface the 05/10/2026 density audit read.
+   Filter chip: `<div class="ui-chips"><button type="button" class="ui-chip" aria-pressed="true">Shopify Plus</button>
+   <a class="ui-chip" href="?country=us" aria-current="page">US</a></div>`. Polaris FilterPill's shape (radius 8, a 1px line,
+   dashed until applied) at the Button's density: 28px, 12px/550, so a filter row and a button row are one height.
+   Applied = `aria-pressed="true"` (in place) or `aria-current="page"` (a URL), solid line and the selected tint. */
+.ui-chip {
+  display: inline-flex; align-items: center; justify-content: center; gap: 4px; box-sizing: border-box;
+  height: var(--ui-btn-h, 28px); padding: 0 12px; border: 1px dashed var(--ui-border); border-radius: var(--ui-radius-md);
+  background: var(--ui-surface); color: var(--ui-text); font: inherit; font-size: var(--ui-fs-caption); font-weight: 550;
+  line-height: 16px; white-space: nowrap; text-decoration: none; cursor: pointer;
+}
+.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"], [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). */
+.ui-stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ui-space-4); }
+.ui-stack--tight { gap: var(--ui-space-2); }
+
 /* ═══ @gemboss/ui src/chat.css ═══ */
 /*
  * The chat BODY — what an answer looks like, wherever a GemBoss surface puts a chat (01/10/2026).
@@ -4638,6 +4697,7 @@ dialog.ui-modal.gb-search { width: min(640px, 100%); margin-top: 8vh; max-height
   --gemboss-danger-border: #5c2a24;
   --ui-accent-fg: #0d0d12;
   --ui-warning-fg: #e8c063;
+  --ui-card-shadow: none; /* a dark drop under a dark card is noise */
   --gb-brand-ink: #f2f3f5;
 }
 /* Avatar initials in dark: the tone's light end, so the text clears 4.5:1 on its tinted disc. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gemboss/ui",
-  "version": "0.10.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/app-shell.css

@@ -26,6 +26,19 @@
 /* Headings get their own line (Polaris heading line-heights are ~1.25-1.4): inheriting the body's 20px made a wrapped 22px
  * title overlap itself (gempress, 0.5.1). */
 :where(h1, h2, h3) { letter-spacing: -0.01em; line-height: 1.3; }
+/* Polaris' heading reset (0.12.0, 05/10/2026): in the admin an <h2> or a <p> with no class is body text with no margin,
+ * because Polaris' global sheet sets `h1…h6, p { margin: 0; font-size: 1em; font-weight: regular }` and every heading
+ * that looks like one is a Text variant. Surfaces had the browser's instead: a bare <h2> at 19.5px bold with 16px margins
+ * sat in GemFactory and taskdesk pages beside kit cards titled 14px. Here, only INSIDE the shell (`.gemboss-platform-
+ * shell`, the AppShell root every surface on the kit renders): a login page or a public page keeps its own type. Never
+ * inside an article the surface shows: `.ui-prose` or `[data-content]` (the contract), and the wrappers the fleet already
+ * uses for rendered HTML, read on 05/10/2026, by exact name (gemcommunity `md-body` and `recap-md`,
+ * content-radar `article-body`, the assistants' `asst-md`; any class containing `prose` or `markdown`, any case, so ProseMirror too). A NEW wrapper: mark it `ui-prose` or
+ * `data-content`. scripts/density.mjs skips exactly this list (ARTICLE); density.test.ts fails if the two differ. A post body keeps the browser's scale. Only an element WITHOUT a class: a surface's `h2.gf-title` that sets only its size keeps the
+ * browser's bold and margins (a zero-specificity author rule still beats the browser's own sheet, review #3787). */
+:where(.gemboss-platform-shell) :where(h1, h2, h3, h4, h5, h6, p):where(:not([class])):not(:where(.ui-prose, [data-content], [class*="prose" i], [class*="markdown" i], .md-body, .recap-md, .asst-md, .article-body) *) {
+  margin: 0; font-size: 1em; font-weight: inherit; line-height: inherit;
+}
 
 .gemboss-topbar-start { display: flex; align-items: center; gap: 8px; min-width: 0; }
 .gemboss-topbar-center { display: flex; justify-content: center; min-width: 0; }