@gemboss/ui 0.1.1 → 0.2.1

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: c41e1cabde7bcdfa7747fdc2c88d5afbdf632cc6
- * sources sha256: 55d17952dd57f9e4a7fb14d4e12dc1c65236c97c26f2c7c40f86e5e04f233e1a
+ * gemboss commit: be1da9b1254eb62cd68a2e65f026c94b4d7258cf
+ * sources sha256: d4f46aabf4df141636ddacc91c119762a521312a30154ca0e6d82412cb99491c
  * 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)
  *   + 180 rules from packages/ui/src/shell.css (the shared shell)
@@ -214,6 +214,10 @@
   --ui-accent-soft: var(--gemboss-active-bg, #f0f1f4);   /* tinted bg for a selected/active state */
   --ui-accent-strong: var(--gemboss-active-fg, #1b1c1e); /* readable accent text ON --ui-accent-soft */
   --ui-text-strong: var(--gemboss-text-strong, #1b1c1e);
+  /* Chữ theo tông (ui-metric, …). Nền tối của admin ánh xạ lại bên dưới để còn đọc được. */
+  --ui-success-fg: var(--gemboss-success);
+  --ui-warning-fg: var(--gemboss-primary-dark);
+  --ui-danger-fg: var(--gemboss-danger-strong);
   --ui-focus: var(--gemboss-primary, #1b1c1e);
   --ui-radius-sm: 6px;
   --ui-radius-md: 8px;
@@ -273,6 +277,10 @@
   --ui-accent-soft: var(--adm-accent-soft);
   --ui-accent-strong: var(--adm-accent-fg);
   --ui-text-strong: var(--adm-text-strong);
+  /* Tông trên nền tối #16161a: pha 70% với trắng ⇒ tương phản 6,2 / 9,5 / 4,8 (đo 01/10/2026, review #3609). */
+  --ui-success-fg: color-mix(in srgb, var(--gemboss-success) 70%, #ffffff);
+  --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);
 }
 
@@ -303,6 +311,11 @@
   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); }
+/* Đầ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 ──────────────────────────────────────────────────────────────────
    Native <select> reskinned; custom caret as an inline SVG data-URI (caret color
@@ -324,7 +337,7 @@
   background-color: var(--gemboss-field-bg-hover);
 }
 .ui-select:focus { outline: none; }
-.ui-select:focus-visible {
+.ui-select:focus-visible:not(:disabled) {
   outline: 2px solid #005bd3; outline-offset: 1px;
   border-color: var(--gemboss-field-line-active);
 }
@@ -347,6 +360,85 @@
 }
 .ui-tag--chip.ui-tag--accent { color: var(--adm-accent-fg, var(--ui-accent)); border-color: var(--ui-accent); background: transparent; }
 
+/* Danh sách link dạng chip: `<div class="ui-chips"><a class="ui-tag ui-tag--chip" href>…</a>…</div>` (01/10/2026,
+   partner-radar /competitors: "đã tích hợp với GemPages"). `.ui-tag--chip` vốn là nhãn TĨNH cao ~19px, dưới mức 24px
+   của link trong danh sách (WCAG 2.5.8, §9.1) — visual-gate đo đúng chỗ đó đỏ ở 320 / 390 / 768. Chip là link thì cao
+   ≥ 28px, chữ thường (không mono), có hover + focus-visible; dưới ngón tay là điều khiển, lên 44px (khối coarse dưới).
+   Khe 8px: hai target nhỏ hơn 44px phải cách nhau ≥ 8px. */
+.ui-chips { display: flex; flex-wrap: wrap; gap: var(--ui-space-2, 8px); margin: 0; padding: 0; list-style: none; }
+.ui-chips > a.ui-tag--chip {
+  min-height: 28px; padding: 4px 12px; border-radius: var(--ui-radius-md, 8px);
+  font-family: inherit; font-size: var(--gemboss-fs-caption, 12px); color: var(--ui-text); text-decoration: none;
+}
+.ui-chips > a.ui-tag--chip:hover { background: var(--ui-surface-2); border-color: var(--ui-text-muted); }
+.ui-chips > a.ui-tag--chip:focus-visible { outline: 2px solid #005bd3; outline-offset: 1px; }
+/* Danh sách LỌC dài (chuyên môn, hạng…) dùng ui-chips thay ui-seg: ui-seg không xuống dòng nên tràn ngang ở 320px.
+   Ô đang chọn = `aria-current="page"` (lọc là một URL), cùng tông với ui-seg đang chọn. */
+.ui-chips > a.ui-tag--chip[aria-current="page"] { background: var(--ui-accent-soft); border-color: var(--ui-accent); color: var(--ui-accent-strong); font-weight: 600; }
+
+/* ── Tông màu cho tag: `ui-tag--success | --warning | --danger` (token ngữ nghĩa có sẵn). Trạng thái, nguồn,
+   kết quả kiểm — thay cho màu viết cứng ở từng surface. */
+.ui-tag--success { background: var(--gemboss-success-soft); color: var(--gemboss-success-strong, var(--gemboss-success)); }
+.ui-tag--warning { background: var(--gemboss-warning-soft); color: var(--gemboss-warning); }
+.ui-tag--danger { background: var(--gemboss-danger-soft); color: var(--gemboss-danger-strong, var(--gemboss-danger)); }
+
+/* ── 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); }
+
+/* ── 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. */
+.ui-page-head { margin-bottom: 20px; }
+.ui-page-head h1 { color: var(--ui-text-strong); font-size: 22px; font-weight: 650; letter-spacing: -0.01em; }
+.ui-page-head p { color: var(--ui-text-muted); font-size: 14px; 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.
+   Đưa lên từ admin `.gemboss-admin-toolbar`. Chỉ BỐ CỤC: ô tìm là `gemboss-field gemboss-field--group`. */
+.ui-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 20px; }
+
+/* ── Ô số liệu: `<div class="ui-metrics"><div class="ui-metric"><span class="ui-metric__val">12</span>
+   <span class="ui-metric__lbl">Nhãn</span></div></div>`; tông `ui-metric--success | --warning | --danger`.
+   Đưa lên từ admin `.gemboss-ec-metric` (GemChat). Khác `ui-stat` (viên đếm nhỏ, có thể bấm làm bộ lọc). */
+.ui-metrics { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0; }
+.ui-metric { display: flex; flex-direction: column; gap: 1px; min-width: 78px; padding: 8px 12px; background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: 12px; }
+/* Cả ô là link (`<a class="ui-metric" href>`): vùng chạm là cả ô (~52px), không phải con số 20px bên trong
+   (visual-gate đỏ ở partner-radar /ops 01/10/2026 khi link nằm trong __val). */
+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--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); }
+.ui-metric--warning .ui-metric__val { color: var(--ui-warning-fg); }
+.ui-metric--danger { border-color: color-mix(in srgb, var(--gemboss-danger-strong) 40%, transparent); }
+.ui-metric--danger .ui-metric__val { color: var(--ui-danger-fg); }
+
+/* ── Cặp nhãn – giá trị: `<dl class="ui-dl"><div><dt>Quốc gia</dt><dd>IL</dd></div>…</dl>` — dữ kiện của một hồ sơ.
+   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 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
+   làm. Mỗi tông mang màu chữ riêng (nền tông luôn sáng, kể cả trong admin tối). Không có tông = ghi chú trung tính.
+   role="status"/"alert" CHỈ khi thông báo xuất hiện sau khi trang đã tải (vùng live); có sẵn lúc tải thì không role. */
+.ui-notice { padding: 12px 16px; border-radius: var(--ui-radius-md); border: 1px solid var(--ui-border); background: var(--ui-surface-2); color: var(--ui-text); font-size: var(--gemboss-fs-body); }
+.ui-notice--warning { background: var(--gemboss-warning-soft); border-color: var(--gemboss-warning-border); color: var(--gemboss-warning); }
+.ui-notice--danger { background: var(--gemboss-danger-soft); border-color: var(--gemboss-danger-border); color: var(--gemboss-danger-strong); }
+.ui-notice--success { background: var(--gemboss-success-soft); border-color: var(--gemboss-success-border); color: var(--gemboss-success-strong); }
+
+/* ── Phân trang: `<nav class="ui-pager" aria-label="Trang"><a href rel="prev"><span aria-hidden="true">‹</span> Trước</a><span aria-current="page">2 / 9</span>
+   <a href rel="next">Sau ›</a></nav>`. Link ≥ 32px (≥ 24px WCAG 2.5.8), 44px dưới ngón tay (khối coarse). */
+.ui-pager { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 16px 0; }
+.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(--gemboss-fs-body); }
+.ui-pager > a:hover { background: var(--ui-surface-2); }
+.ui-pager > a:focus-visible { outline: 2px solid #005bd3; outline-offset: 1px; }
+.ui-pager > [aria-current="page"] { color: var(--ui-text-muted); font-size: var(--gemboss-fs-caption); }
+
 /* ── Badge ────────────────────────────────────────────────────────────────────
    Uppercase mono pill for a status/label (was gemboss-admin-storage-badge). */
 .ui-badge {
@@ -391,24 +483,50 @@
    consumer belongs in that consumer's chunk (see SettingsDialog.module.css). */
 .ui-modal--lg { position: relative; }
 
+/* The kit's multi-line field joins the ONE field family (01/10/2026, Chris: "form control đồng bộ"):
+   same input-border token, hover and focus ring as `gemboss-field` and `.ui-select`. Before, it drew a
+   lighter --ui-border box at 14px with no focus ring, so on GemFactory's compose form a textarea sat
+   beside selects of a darker border and text fields of a third look (measured on prod). */
 .ui-textarea {
   width: 100%; min-height: 96px; resize: vertical; box-sizing: border-box;
-  background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-md);
-  padding: 12px; color: var(--ui-text); font-size: 14px; font-family: inherit; outline: none;
+  background: var(--gemboss-field-bg);
+  border: 1px solid var(--gemboss-field-line); border-radius: var(--ui-radius-md);
+  padding: 12px; color: var(--gemboss-field-ink); font-size: var(--ui-fs-body); line-height: 1.5; font-family: inherit;
+}
+.ui-textarea::placeholder { color: var(--gemboss-field-placeholder); }
+.ui-textarea:hover:not(:disabled) {
+  border-color: var(--gemboss-field-line-hover);
+  background-color: var(--gemboss-field-bg-hover);
+}
+.ui-textarea:focus { outline: none; }
+.ui-textarea:focus-visible:not(:disabled) {
+  outline: 2px solid #005bd3; outline-offset: 1px;
+  border-color: var(--gemboss-field-line-active);
+}
+.ui-textarea:disabled { opacity: .5; cursor: not-allowed; }
+/* On a PHONE-WIDTH screen every field of the family reads 16px (iOS zooms the page on tap below that)
+   and a select is a 44px target — by WIDTH, as `gemboss-field` does, because a desktop browser at 320px
+   still reports pointer: fine. Measured on GemFactory at 390px before this: select 13px, textarea 14px. */
+@media (max-width: 47.9975em) {
+  .ui-select.ui-select, .ui-textarea { font-size: 16px; }
+  /* Height only for the full select: `--slim` is a density decision (table rows), as the coarse block keeps it. */
+  .ui-select:not(.ui-select--slim) { min-height: 44px; }
 }
-.ui-textarea:focus { border-color: var(--ui-accent); }
 
 /* ── 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 button {
+.ui-seg :is(button, a) {
   display: inline-grid; place-items: center; width: 36px; height: 36px;
   border: 0; background: transparent; color: var(--ui-text-muted); cursor: pointer; font-family: inherit;
 }
-.ui-seg button.is-text { width: auto; padding: 0 12px; font-size: var(--ui-fs-body); font-weight: 500; }
-.ui-seg button + button { border-left: 1px solid var(--ui-border); }
-.ui-seg button:hover { background: var(--ui-surface-2); color: var(--ui-text); }
+.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(button, a) { border-left: 1px solid var(--ui-border); }
+.ui-seg :is(button, a):hover { background: var(--ui-surface-2); color: var(--ui-text); }
+/* Lọc / chế độ xem bằng LINK (trang server-render, chọn = đổi URL): `<a aria-current="page">` là ô đang chọn. */
+.ui-seg a { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; color: var(--ui-text-muted); }
+.ui-seg a[aria-current="page"],
 .ui-seg button.active { background: var(--ui-accent-soft); color: var(--ui-accent-strong); }
 .ui-seg svg { width: 16px; height: 16px; fill: currentColor; }
 
@@ -490,7 +608,9 @@
      decision, not an oversight; it gets its own measurement pass or none. */
   .ui-btn:not(.ui-btn--sm),
   .ui-stat.is-clickable,
-  .ui-seg button { min-height: 44px; }
+  .ui-chips > a.ui-tag--chip,
+  .ui-pager > a,
+  .ui-seg :is(button, a) { min-height: 44px; }
   /* A clickable stat whose label is one short token ("7d" on /admin/gem-intelligence) measured 40x44
      in the 13/09/2026 sweep: the height floor held, the width did not. */
   .ui-stat.is-clickable { min-width: 44px; justify-content: center; }
@@ -499,7 +619,7 @@
   .ui-select.ui-select,
   .ui-select--slim.ui-select--slim { min-height: 44px; }
   /* The icon-only segment is 36 WIDE as well — a target is an area. */
-  .ui-seg button { min-width: 44px; }
+  .ui-seg :is(button, a) { min-width: 44px; }
 }
 
 /* ── Skeleton ─────────────────────────────────────────────────────────────────
@@ -523,6 +643,46 @@
 
 }
 
+/* ── 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>
+   (and may put `dragging` on the seam itself to keep its grip lit).
+   Markup: <div class="ui-resizer" role="separator" aria-orientation="vertical" tabindex="0"
+   aria-label="…" aria-valuenow aria-valuemin aria-valuemax>. Pointer events, not mouse events (touch
+   is a pointer); arrow keys move it — a focusable separator that ignores the keyboard is INERT. */
+/* `touch-action: none` is what makes a FINGER drag reach this element at all. `preventDefault()` on
+   `pointerdown` does not stop panning: the browser hands the gesture to the nearest scroller and sends
+   `pointercancel`, so the seam jumps once and stops. */
+.ui-resizer { cursor: col-resize; position: relative; touch-action: none; outline: none; }
+/* The grip pill is invisible at rest (a clean seam) and fades in over the zone, on keyboard focus,
+   and while a drag runs. Focus shows the pill rather than a ring: on a 5px seam a ring is a smear. */
+.ui-resizer::before {
+  content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
+  width: 4px; height: 44px; border-radius: var(--gemboss-radius-full);
+  background: var(--gemboss-primary);
+  opacity: 0;
+  transition: opacity 0.14s ease, height 0.14s ease;
+}
+.ui-resizer:hover::before,
+.ui-resizer:focus-visible::before,
+.ui-resizer.dragging::before,
+body.ui-resizing .ui-resizer::before { opacity: 1; height: 52px; }
+/* A FINGER NEEDS MORE THAN 5px, and the line must still look like 5px. WCAG 2.5.8 puts the floor for
+   this kind of target at 24px, so the HIT area grows and the visible seam does not — widening the
+   element itself would also move the columns. Only where the pointer is coarse. */
+@media (pointer: coarse) {
+  .ui-resizer::after {
+    content: ""; position: absolute; top: 0; bottom: 0; left: -14px; right: -14px;
+    touch-action: none;   /* the band must claim the gesture too, or the scroller still wins */
+    z-index: 2;           /* above the panels either side, transparent */
+  }
+}
+body.ui-resizing, body.ui-resizing * { cursor: col-resize !important; user-select: none !important; }
+/* While dragging, a full-viewport transparent shield sits above everything — iframes included — so the
+   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 ───────────────────────────────────────────────
    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>
@@ -537,7 +697,8 @@
   display: flex; gap: var(--ui-space-1); border-bottom: 1px solid var(--ui-border);
   overflow-x: auto; scrollbar-width: none;
 }
-.ui-tabs > button {
+.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;
   border-radius: var(--ui-radius-sm) var(--ui-radius-sm) 0 0;
@@ -545,9 +706,15 @@
   color: var(--ui-text-muted);
   transition: color var(--gemboss-transition-fast) ease, background-color var(--gemboss-transition-fast) ease;
 }
-.ui-tabs > button:hover { color: var(--ui-text); background: var(--ui-surface-2); }
-.ui-tabs > button:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: -2px; }
+.ui-tabs > button:hover,
+.ui-tabs > a:hover { color: var(--ui-text); background: var(--ui-surface-2); }
+.ui-tabs > button:focus-visible,
+.ui-tabs > a:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: -2px; }
+.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 > 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);
@@ -573,6 +740,12 @@
 .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; }
+/* Dòng phụ dưới nội dung chính của một ô (lớp, nguồn, ngày…): `<td><a>Loox</a><span class="ui-sub">Cộng sinh</span></td>`.
+   Trước đây mỗi surface tự viết `.muted` riêng trong ô bảng (partner-radar, gemwatcher). */
+/* 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; }
 
 /* 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. */
@@ -618,6 +791,10 @@
   border: 1px solid var(--gemboss-field-line);
   border-radius: 8px;
 }
+/* WebKit draws `input[type=search]` as `-webkit-appearance: searchfield`: its own padding and rounding, so in Safari
+   (macOS and iOS, the platform the 16px rule exists for) a search box did not match the fields beside it. Same box for
+   every text type; the clear button stays. (GemFactory #98 review, 01/10/2026.) */
+input[type="search"]:is(.gemboss-field, .gemboss-field__bare) { -webkit-appearance: none; appearance: none; }
 .gemboss-field::placeholder { color: var(--gemboss-field-placeholder); }
 /* A NARROW field — the inspector's T/R/B/L boxes and its number spinners are 40-68px wide, and the
    shared 12px side padding left 38px of content box for a three-digit value (measured in Chromium:
@@ -732,7 +909,8 @@ textarea.gemboss-field { height: auto; padding: 6px 12px; resize: vertical; }
   z-index: 320;
   overflow: hidden;
 }
-.gemboss-account-menu-item {
+.gemboss-account-menu-item,
+.ui-menu__item {
   display: block;
   width: 100%;
   min-height: 44px;
@@ -747,15 +925,18 @@ textarea.gemboss-field { height: auto; padding: 6px 12px; resize: vertical; }
   cursor: pointer;
   transition: background var(--gemboss-transition-fast) ease, color var(--gemboss-transition-fast) ease;
 }
-.gemboss-account-menu-item:hover {
+.gemboss-account-menu-item:hover,
+.ui-menu__item:hover {
   background: var(--gemboss-hover);
 }
-.gemboss-account-menu-item:focus-visible {
+.gemboss-account-menu-item:focus-visible,
+.ui-menu__item:focus-visible {
   outline: 2px solid var(--gemboss-primary);
   outline-offset: -2px;
   background: var(--gemboss-hover);
 }
-.gemboss-account-menu-item.danger {
+.gemboss-account-menu-item.danger,
+.ui-menu__item--danger {
   color: var(--gemboss-danger-strong);
 }
 .gemboss-account-chip {
@@ -2890,3 +3071,60 @@ body.gemboss-assistant-unread .gnav-item.gnav-assistant::after {
     border-radius: 0;
   }
 }
+
+/* ═══ @gemboss/ui src/kit-plain.css ═══ */
+/* kit-plain.css — kit primitives that only the NON-React surfaces use (GemFactory, gemcare, gempress write the
+   markup by hand). They ship inside gemboss-ui.css (scripts/build-css.mjs `own`), but the admin does NOT import
+   this file: `ui.css` is loaded by the admin's root layout, so every rule there is paid on every admin screen,
+   and adding these to it pushed the admin shell 0.2 KB over its first-load budget (CI of #3591, 01/10/2026).
+   The admin has Polaris for menus, checkboxes and description lists. */
+
+/* ── Icon button · Menu · Key-value list ──────────────────────────────────────
+   Added 01/10/2026 for GemFactory's item dialog, which had seven actions in one header row; the
+   secondary five now sit behind one "⋯" button. Plain CSS, same contract as the tabs and tables in ui.css.
+
+   Icon button: `<button class="ui-btn ui-btn--icon" aria-label="…"><svg…></button>` — square, the
+   label is REQUIRED (there is no text for a screen reader to read otherwise).
+
+   Menu: a `<details>` so it opens with no script. `<details class="ui-menu ui-menu--end">
+   <summary class="ui-btn ui-btn--icon" aria-label="More actions">…</summary><div class="ui-menu__list">
+   <button class="ui-menu__item">Copy #12<span class="ui-menu__hint">for Claude Code</span></button>
+   <hr class="ui-menu__sep"><button class="ui-menu__item ui-menu__item--danger">Delete…</button></div>
+   </details>`. `--end` aligns the list to the right edge of its button. Closing on an outside click,
+   on an item, and on Escape is the page's job (a few lines; GemFactory's ui-kit.mjs has them).
+   Items are 44px under EVERY pointer, not only coarse: they touch each other (0px apart), and §9.1
+   only allows a gap under 8px between targets that are already 44px.
+
+   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 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
+   look the same and a fix to one reaches the other (§9.3). Markup: `<div class="ui-menu__list gemboss-popover-surface">`.
+   Here: only placement, the hint, the separator and the disabled state. */
+.ui-menu { position: relative; display: inline-block; }
+.ui-menu > summary { list-style: none; cursor: pointer; }
+.ui-menu > summary::-webkit-details-marker { display: none; }
+.ui-menu__list { position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; display: grid; min-width: 220px; padding: var(--ui-space-1); box-sizing: border-box; }
+.ui-menu--end .ui-menu__list { left: auto; right: 0; }
+.ui-menu__item { display: flex; align-items: center; gap: var(--ui-space-2); white-space: nowrap; border-radius: var(--ui-radius-sm); }
+.ui-menu__item:is([disabled], [aria-disabled="true"]) { opacity: .5; cursor: not-allowed; pointer-events: none; }
+.ui-menu__hint { margin-left: auto; padding-left: var(--ui-space-4); color: var(--ui-text-muted); font-size: var(--ui-fs-caption); }
+.ui-menu__sep { height: 1px; margin: var(--ui-space-1) 0; border: 0; background: var(--ui-border); }
+/* Checkbox: the LABEL is the target; disabled turns both the label and the box to not-allowed. Focus ring in the
+   kit's own token (no --p-* here: this file is appended after the export's Polaris resolver runs). */
+.ui-check { display: inline-flex; align-items: center; gap: var(--ui-space-2); min-height: 44px; cursor: pointer; font-size: var(--ui-fs-body); color: var(--ui-text); }
+.ui-check > input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--ui-accent); cursor: inherit; }
+.ui-check > input:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 2px; }
+.ui-check:has(> input:disabled) { opacity: .5; cursor: not-allowed; }
+.ui-label { display: block; margin: 0 0 var(--ui-space-1); font-size: var(--ui-fs-caption); font-weight: 600; color: var(--ui-text-muted); }
+.ui-kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--ui-space-2) var(--ui-space-4); margin: 0; font-size: var(--ui-fs-body); }
+.ui-kv > dt { color: var(--ui-text-muted); }
+.ui-kv > dd { margin: 0; min-width: 0; overflow-wrap: anywhere; color: var(--ui-text); }
+
+/* Under a thumb the icon-only button is 44 WIDE as well (the kit's coarse block already raises every .ui-btn to 44 tall). */
+@media (pointer: coarse) { .ui-btn--icon:not(.ui-btn--sm) { min-width: 44px; } }
+/* …and at phone WIDTH, as gemboss-field does: a desktop browser at 320px still reports pointer: fine. */
+@media (max-width: 47.9975em) { .ui-btn--icon:not(.ui-btn--sm) { min-width: 44px; min-height: 44px; } }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gemboss/ui",
-  "version": "0.1.1",
+  "version": "0.2.1",
   "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",
@@ -18,6 +18,7 @@
     "./app-shell.css": "./src/app-shell.css",
     "./shell.css": "./src/shell.css",
     "./auth.css": "./src/auth.css",
+    "./kit-plain.css": "./src/kit-plain.css",
     "./assistant": "./src/assistant/index.ts",
     "./assistant/dock": "./src/assistant/dock.ts",
     "./assistant.css": "./src/assistant.css"
@@ -35,7 +36,8 @@
     "build:css": "node scripts/build-css.mjs",
     "prepack": "node scripts/build-css.mjs && node scripts/build-catalog.mjs",
     "typecheck": "tsc -p tsconfig.json --noEmit",
-    "catalog": "node scripts/build-css.mjs && node scripts/build-catalog.mjs"
+    "catalog": "node scripts/build-css.mjs && node scripts/build-catalog.mjs",
+    "fleet": "node scripts/fleet.mjs"
   },
   "peerDependencies": {
     "react": ">=18"

package/src/gemboss-field.css

@@ -30,6 +30,10 @@
   border: 1px solid var(--p-color-input-border, var(--gemboss-field-line));
   border-radius: var(--p-border-radius-200, 8px);
 }
+/* WebKit draws `input[type=search]` as `-webkit-appearance: searchfield`: its own padding and rounding, so in Safari
+   (macOS and iOS, the platform the 16px rule exists for) a search box did not match the fields beside it. Same box for
+   every text type; the clear button stays. (GemFactory #98 review, 01/10/2026.) */
+input[type="search"]:is(.gemboss-field, .gemboss-field__bare) { -webkit-appearance: none; appearance: none; }
 .gemboss-field::placeholder { color: var(--p-color-text-secondary, var(--gemboss-field-placeholder)); }
 /* A NARROW field — the inspector's T/R/B/L boxes and its number spinners are 40-68px wide, and the
    shared 12px side padding left 38px of content box for a three-digit value (measured in Chromium:

package/src/icons.tsx

@@ -54,6 +54,7 @@ const P = {
   check: <path d="M4 10.5 8 14.5 16 5.5" />,
   plus: <path d="M10 4v12M4 10h12" />,
   close: <path d="M5 5l10 10M15 5 5 15" />,
+  more: <><circle cx="4.5" cy="10" r="1" /><circle cx="10" cy="10" r="1" /><circle cx="15.5" cy="10" r="1" /></>,
   utensils: <><path d="M6 3v5a2 2 0 0 0 4 0V3M8 3v14" /><path d="M15 3c-1.6 1.4-2.5 3.6-2.5 6.5H15V17" /></>,
   signOut: <path d="M8 3.5H4v13h4M12.5 6.5 16 10l-3.5 3.5M16 10H8" />,
 } satisfies Record<string, React.ReactNode>;

package/src/index.ts

@@ -6,4 +6,5 @@ export { GemMark } from "./GemMark";
 export { AuthError, AuthField, AuthFoot, AuthForm, AuthHelp, AuthLayout, PasswordField, AuthSubmit } from "./auth";
 export { BrandLockup } from "./brand";
 export { AccountMenu, AccountMenuItem, initialsOf } from "./account";
+export { Menu, MenuItem, MenuSeparator } from "./menu";
 export { Icon, ICON_NAMES, type IconName } from "./icons";

package/src/kit-plain.css

@@ -0,0 +1,55 @@
+/* kit-plain.css — kit primitives that only the NON-React surfaces use (GemFactory, gemcare, gempress write the
+   markup by hand). They ship inside gemboss-ui.css (scripts/build-css.mjs `own`), but the admin does NOT import
+   this file: `ui.css` is loaded by the admin's root layout, so every rule there is paid on every admin screen,
+   and adding these to it pushed the admin shell 0.2 KB over its first-load budget (CI of #3591, 01/10/2026).
+   The admin has Polaris for menus, checkboxes and description lists. */
+
+/* ── Icon button · Menu · Key-value list ──────────────────────────────────────
+   Added 01/10/2026 for GemFactory's item dialog, which had seven actions in one header row; the
+   secondary five now sit behind one "⋯" button. Plain CSS, same contract as the tabs and tables in ui.css.
+
+   Icon button: `<button class="ui-btn ui-btn--icon" aria-label="…"><svg…></button>` — square, the
+   label is REQUIRED (there is no text for a screen reader to read otherwise).
+
+   Menu: a `<details>` so it opens with no script. `<details class="ui-menu ui-menu--end">
+   <summary class="ui-btn ui-btn--icon" aria-label="More actions">…</summary><div class="ui-menu__list">
+   <button class="ui-menu__item">Copy #12<span class="ui-menu__hint">for Claude Code</span></button>
+   <hr class="ui-menu__sep"><button class="ui-menu__item ui-menu__item--danger">Delete…</button></div>
+   </details>`. `--end` aligns the list to the right edge of its button. Closing on an outside click,
+   on an item, and on Escape is the page's job (a few lines; GemFactory's ui-kit.mjs has them).
+   Items are 44px under EVERY pointer, not only coarse: they touch each other (0px apart), and §9.1
+   only allows a gap under 8px between targets that are already 44px.
+
+   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 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
+   look the same and a fix to one reaches the other (§9.3). Markup: `<div class="ui-menu__list gemboss-popover-surface">`.
+   Here: only placement, the hint, the separator and the disabled state. */
+.ui-menu { position: relative; display: inline-block; }
+.ui-menu > summary { list-style: none; cursor: pointer; }
+.ui-menu > summary::-webkit-details-marker { display: none; }
+.ui-menu__list { position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; display: grid; min-width: 220px; padding: var(--ui-space-1); box-sizing: border-box; }
+.ui-menu--end .ui-menu__list { left: auto; right: 0; }
+.ui-menu__item { display: flex; align-items: center; gap: var(--ui-space-2); white-space: nowrap; border-radius: var(--ui-radius-sm); }
+.ui-menu__item:is([disabled], [aria-disabled="true"]) { opacity: .5; cursor: not-allowed; pointer-events: none; }
+.ui-menu__hint { margin-left: auto; padding-left: var(--ui-space-4); color: var(--ui-text-muted); font-size: var(--ui-fs-caption); }
+.ui-menu__sep { height: 1px; margin: var(--ui-space-1) 0; border: 0; background: var(--ui-border); }
+/* Checkbox: the LABEL is the target; disabled turns both the label and the box to not-allowed. Focus ring in the
+   kit's own token (no --p-* here: this file is appended after the export's Polaris resolver runs). */
+.ui-check { display: inline-flex; align-items: center; gap: var(--ui-space-2); min-height: 44px; cursor: pointer; font-size: var(--ui-fs-body); color: var(--ui-text); }
+.ui-check > input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--ui-accent); cursor: inherit; }
+.ui-check > input:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 2px; }
+.ui-check:has(> input:disabled) { opacity: .5; cursor: not-allowed; }
+.ui-label { display: block; margin: 0 0 var(--ui-space-1); font-size: var(--ui-fs-caption); font-weight: 600; color: var(--ui-text-muted); }
+.ui-kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--ui-space-2) var(--ui-space-4); margin: 0; font-size: var(--ui-fs-body); }
+.ui-kv > dt { color: var(--ui-text-muted); }
+.ui-kv > dd { margin: 0; min-width: 0; overflow-wrap: anywhere; color: var(--ui-text); }
+
+/* Under a thumb the icon-only button is 44 WIDE as well (the kit's coarse block already raises every .ui-btn to 44 tall). */
+@media (pointer: coarse) { .ui-btn--icon:not(.ui-btn--sm) { min-width: 44px; } }
+/* …and at phone WIDTH, as gemboss-field does: a desktop browser at 320px still reports pointer: fine. */
+@media (max-width: 47.9975em) { .ui-btn--icon:not(.ui-btn--sm) { min-width: 44px; min-height: 44px; } }

package/src/menu.tsx

@@ -0,0 +1,64 @@
+"use client";
+
+// menu.tsx: the kit's action menu ("⋯") — a `<details>` disclosure, so it opens with no JavaScript and a
+// server-rendered surface (GemFactory, gemcare) can print it as plain markup. The surface is the shell's
+// `gemboss-popover-surface` and the rows share the account menu's row (shell.css), so every menu in the
+// fleet looks the same (§9.3). Where React hydrates, the menu closes itself like AccountMenu does: outside
+// click, Escape (focus back on the trigger), and a button row after its handler (review #3591: a React page
+// had no clean way to close it). The catalog renders its example from these components.
+import React, { useEffect, useRef } from "react";
+import { Icon } from "./icons";
+
+/** The trigger is an icon button (`label` is its accessible name). `end` aligns the list to the right edge. */
+export function Menu({ label, icon, end, children, className }: {
+  label: string;
+  icon?: React.ReactNode;
+  end?: boolean;
+  children?: React.ReactNode;
+  className?: string;
+}) {
+  const ref = useRef<HTMLDetailsElement>(null);
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return undefined;
+    const onDoc = (e: MouseEvent) => { if (el.open && !el.contains(e.target as Node)) el.open = false; };
+    const onKey = (e: KeyboardEvent) => { if (e.key === "Escape" && el.open) { el.open = false; el.querySelector("summary")?.focus(); } };
+    document.addEventListener("click", onDoc);
+    document.addEventListener("keydown", onKey);
+    return () => { document.removeEventListener("click", onDoc); document.removeEventListener("keydown", onKey); };
+  }, []);
+  return (
+    <details ref={ref} className={["ui-menu", end ? "ui-menu--end" : "", className ?? ""].filter(Boolean).join(" ")}>
+      <summary className="ui-btn ui-btn--icon" aria-label={label} title={label}>{icon ?? <Icon name="more" />}</summary>
+      <div className="ui-menu__list gemboss-popover-surface">{children}</div>
+    </details>
+  );
+}
+
+/** One row: a link (`href`) or a button. `hint` is the quiet text on the right; `danger` for destructive rows.
+ *  A disabled link is not a link: no href, aria-disabled, out of the tab order (an `<a disabled>` still follows
+ *  on Enter). A caller's `className` is added to the row's class, not put in its place. */
+export function MenuItem({ href, danger, hint, children, className, disabled, onClick, ...rest }: {
+  href?: string;
+  danger?: boolean;
+  hint?: React.ReactNode;
+  children?: React.ReactNode;
+  disabled?: boolean;
+  onClick?: React.MouseEventHandler<HTMLElement>;
+} & Omit<React.HTMLAttributes<HTMLElement>, "onClick"> & Pick<React.AnchorHTMLAttributes<HTMLAnchorElement>, "target" | "rel">) {
+  const cls = ["ui-menu__item", danger ? "ui-menu__item--danger" : "", className ?? ""].filter(Boolean).join(" ");
+  const body = <>{children}{hint ? <span className="ui-menu__hint">{hint}</span> : null}</>;
+  if (href) {
+    if (disabled) return <a className={cls} aria-disabled="true" tabIndex={-1} {...rest}>{body}</a>;
+    return <a className={cls} href={href} onClick={onClick} {...rest}>{body}</a>;
+  }
+  const close: React.MouseEventHandler<HTMLButtonElement> = (e) => {
+    onClick?.(e);
+    e.currentTarget.closest("details")?.removeAttribute("open");
+  };
+  return <button type="button" className={cls} disabled={disabled} onClick={close} {...rest}>{body}</button>;
+}
+
+export function MenuSeparator() {
+  return <hr className="ui-menu__sep" />;
+}

package/src/shell.css

@@ -100,20 +100,24 @@
 /* Account dropdown menu items (avatar chip) — CSS-driven hover/focus, replaces inline JS handlers. */
 /* min-height 44 (28/09/2026): 12px padding around a 13px line measured 42.84px — under the 44px control
    floor (CLAUDE.md §9.1), in the admin's own menu and in every surface wearing it through @gemboss/ui. */
-.gemboss-account-menu-item {
+.gemboss-account-menu-item,
+.ui-menu__item {
   display: block; width: 100%; min-height: 44px; padding: 12px 16px; border: 0; background: transparent;
   font: inherit; font-size: 13px; color: var(--gemboss-text); text-align: left; text-decoration: none;
   cursor: pointer; transition: background var(--gemboss-transition-fast) ease, color var(--gemboss-transition-fast) ease;
 }
 
-.gemboss-account-menu-item:hover { background: var(--gemboss-hover); }
+.gemboss-account-menu-item:hover,
+.ui-menu__item:hover { background: var(--gemboss-hover); }
 
-.gemboss-account-menu-item:focus-visible { outline: 2px solid var(--gemboss-primary); outline-offset: -2px; background: var(--gemboss-hover); }
+.gemboss-account-menu-item:focus-visible,
+.ui-menu__item:focus-visible { outline: 2px solid var(--gemboss-primary); outline-offset: -2px; background: var(--gemboss-hover); }
 
 /* `--gemboss-danger` var(--gemboss-danger) is 4.25:1 on `--gemboss-hover` #eceef2, and this row takes that hover
    background two lines above — so the one moment the item is under the cursor is the moment its label
    drops below AA. `--gemboss-danger-strong` #b42318 is 5.66:1 there and 7.30:1 on white. */
-.gemboss-account-menu-item.danger { color: var(--gemboss-danger-strong); }
+.gemboss-account-menu-item.danger,
+.ui-menu__item--danger { color: var(--gemboss-danger-strong); }
 
 .gemboss-account-chip {
   width: 30px;