@gemboss/ui 0.4.2 → 0.6.0

package/src/kit-plain.js

@@ -12,6 +12,9 @@
      const m = openModal({ title: "Delete #12?", body: '<div class="ui-modal__body">…</div>', foot: "…" });
      m.close(value);                    // onClose(value) runs once; Escape / backdrop / × close with null
      toast("Saved");  toast("Could not save", { error: true });
+     if (await confirm({ title: "Delete #12?", body: "It leaves the board.", confirmLabel: "Delete", tone: "critical" })) …
+     initShell();                       // a hand-written AppShell: ☰ drawer, backdrop, Escape, followed link
+     initPasswordFields();              // .gb-auth-pw-toggle reveal; resetPasswordFields() on sign-out
 */
 (function (g) {
   "use strict";
@@ -99,7 +102,10 @@
     overlay.addEventListener("click", function (e) { if (e.target === overlay && downOnBackdrop) m.close(null); downOnBackdrop = false; });
     var x = panel.querySelector(".ui-modal__head .ui-modal__close");
     if (x) x.onclick = function () { m.close(null); };
-    addEventListener("keydown", onKey);
+    // On the NEXT task, not now: a popup opened from a keydown handler (content-radar's composer asks "close without
+    // saving?" on Escape) would otherwise receive that same Escape when it bubbles up to window, and close itself at
+    // once (0.5.1). A listener added during a dispatch still runs if its target has not been reached yet.
+    setTimeout(function () { if (MODALS.indexOf(m) >= 0) addEventListener("keydown", onKey); }, 0);
     if (!MODALS.length) savedOverflow = document.body.style.overflow;
     MODALS.push(m);
     document.body.append(overlay);
@@ -150,22 +156,26 @@
 
   /* Menus (details.ui-menu, kit-plain.css) open with no script; closing is the page's job: an outside click, a click on
      an item, the window losing focus (a click inside an iframe never reaches this document), and Escape. Escape closes
-     the MENU first and stops there, so a menu inside a popup does not close the popup with it. Idempotent. */
+     the MENU first and stops there, so a menu inside a popup does not close the popup with it. Idempotent.
+     The account menu (AccountMenu, `details.gb-account`) is a menu too since 0.5.1: GemFactory kept four lines of its
+     own for it. */
   var menusOn = false;
+  var MENU = "details.ui-menu, details.gb-account";
+  var MENU_ITEM = ".ui-menu__item, .gemboss-account-menu-item";
   function closeMenus(except) {
-    document.querySelectorAll("details.ui-menu[open]").forEach(function (d) { if (d !== except) d.open = false; });
+    document.querySelectorAll("details.ui-menu[open], details.gb-account[open]").forEach(function (d) { if (d !== except) d.open = false; });
   }
   function initMenus() {
     if (menusOn) return;
     menusOn = true;
     document.addEventListener("click", function (e) {
-      var d = e.target.closest && e.target.closest("details.ui-menu");
+      var d = e.target.closest && e.target.closest(MENU);
       closeMenus(d);
-      if (d && e.target.closest(".ui-menu__item")) d.open = false;
+      if (d && e.target.closest(MENU_ITEM)) d.open = false;
     });
     addEventListener("blur", function () { closeMenus(); });
     addEventListener("keydown", function (e) {
-      var d = e.key === "Escape" && !e.isComposing && document.querySelector("details.ui-menu[open]");
+      var d = e.key === "Escape" && !e.isComposing && document.querySelector("details.ui-menu[open], details.gb-account[open]");
       if (!d) return;
       e.preventDefault();
       e.stopImmediatePropagation();
@@ -175,5 +185,103 @@
     }, true);
   }
 
-  g.gembossUI = { openModal: openModal, toast: toast, initMenus: initMenus, closeMenus: closeMenus, openModals: function () { return MODALS.length; } };
+  /* Confirm: the kit's answer to `window.confirm()` (four surfaces used the browser's box for deletes, 02/10/2026).
+     Resolves true on the confirm button, false on cancel / Escape / backdrop / ×. Strings are TEXT. `tone: "critical"`
+     paints the confirm button red (a delete); focus starts on Cancel then, so Enter never destroys by accident. */
+  function confirm(o) {
+    o = o || {};
+    var critical = o.tone === "critical";
+    return new Promise(function (resolve) {
+      var m = openModal({
+        title: esc(o.title || ""),
+        label: o.title ? "" : (o.label || "Confirm"),
+        // The × is a second Cancel: named in the caller's language unless told otherwise (review #3665).
+        closeLabel: o.closeLabel || o.cancelLabel,
+        body: o.body ? '<div class="ui-modal__body">' + esc(o.body) + "</div>" : "",
+        foot: '<button type="button" class="ui-btn" data-gb-confirm="0"' + (critical ? " autofocus" : "") + ">" + esc(o.cancelLabel || "Cancel") + "</button>" +
+          '<button type="button" class="ui-btn ui-btn--primary' + (critical ? " ui-btn--critical" : "") + '" data-gb-confirm="1"' + (critical ? "" : " autofocus") + ">" +
+          esc(o.confirmLabel || "OK") + "</button>",
+        onClose: function (v) { resolve(v === true); },
+      });
+      m.panel.querySelectorAll("[data-gb-confirm]").forEach(function (b) {
+        b.onclick = function () { m.close(b.getAttribute("data-gb-confirm") === "1"); };
+      });
+    });
+  }
+
+  /* The shell's drawer, for a page that wrote AppShell's markup by hand (renderToStaticMarkup, or the README's
+     tree). The same behaviour as the React AppShell: the ☰ button toggles it, the backdrop, Escape and a followed
+     rail link close it, and so does `gemboss:assistant-docked`; the backdrop leaves the Tab order while closed (it is
+     a full-screen invisible button at phone width otherwise), and the ☰ names the rail it controls when the rail has
+     an id. Labels: `data-label-open` / `data-label-close` on the button, else its current aria-label is kept.
+     Idempotent. */
+  var shellOn = false;
+  function initShell() {
+    if (shellOn) return;
+    shellOn = true;
+    var shell = function () { return document.querySelector(".gemboss-platform-shell"); };
+    var set = function (open) {
+      var s = shell();
+      if (!s) return;
+      s.classList.toggle("is-mobile-nav-open", open);
+      var bd = s.querySelector(".gemboss-mobile-nav-backdrop");
+      if (bd) bd.tabIndex = open ? 0 : -1;
+      var b = s.querySelector(".gemboss-mobile-menu-btn");
+      if (!b) return;
+      var rail = s.querySelector(".icon-nav[id]");
+      if (rail && !b.hasAttribute("aria-controls")) b.setAttribute("aria-controls", rail.id);
+      b.setAttribute("aria-expanded", String(open));
+      var l = b.getAttribute(open ? "data-label-close" : "data-label-open");
+      if (l) b.setAttribute("aria-label", l);
+    };
+    var isOpen = function () { var s = shell(); return !!s && s.classList.contains("is-mobile-nav-open"); };
+    document.addEventListener("click", function (e) {
+      var t = e.target;
+      if (!t.closest) return;
+      if (t.closest(".gemboss-mobile-menu-btn")) set(!isOpen());
+      else if (t.closest(".gemboss-mobile-nav-backdrop") || t.closest(".icon-nav .gnav-item, .icon-nav .gnav-subitem")) set(false);
+    });
+    // Escape while an IME is composing (vi telex, zh, ja) cancels the composition, not the drawer.
+    addEventListener("keydown", function (e) { if (e.key === "Escape" && !e.isComposing && e.keyCode !== 229 && isOpen() && !MODALS.length) set(false); });
+    addEventListener("gemboss:assistant-docked", function () { set(false); });
+    set(isOpen());
+  }
+
+  /* The sign-in screen's reveal button (PasswordField's `.gb-auth-pw-toggle`) on a page with no React: flips the
+     input between password and text, its name between `data-label-show` / `data-label-hide` (English defaults), and
+     the eye's slash, as the component does. `reset()` puts every field back to hidden (call it on sign-out, or the
+     next person sees the password in plain text). Idempotent. */
+  var pwOn = false;
+  var SLASH = "M3 17 17 3";
+  // ONE lookup for the button's field: its aria-controls, else the input beside it in `.gb-auth-pw`.
+  function pwInput(b) {
+    return document.getElementById(b.getAttribute("aria-controls") || "") || (b.parentNode && b.parentNode.querySelector("input"));
+  }
+  function pwSet(b, shown) {
+    var input = pwInput(b);
+    if (!input) return;
+    input.type = shown ? "text" : "password";
+    var name = shown ? (b.getAttribute("data-label-hide") || "Hide password") : (b.getAttribute("data-label-show") || "Show password");
+    b.setAttribute("aria-label", name);
+    b.setAttribute("title", name);
+    var svg = b.querySelector("svg"), slash = svg && svg.querySelector('path[d="' + SLASH + '"]');
+    if (svg && shown && !slash) { var p = document.createElementNS("http://www.w3.org/2000/svg", "path"); p.setAttribute("d", SLASH); svg.append(p); }
+    if (slash && !shown) slash.remove();
+  }
+  function initPasswordFields() {
+    if (pwOn) return;
+    pwOn = true;
+    document.addEventListener("click", function (e) {
+      var b = e.target.closest && e.target.closest(".gb-auth-pw-toggle");
+      var input = b && pwInput(b);
+      if (input) pwSet(b, input.type === "password");
+    });
+  }
+  function resetPasswordFields() {
+    document.querySelectorAll(".gb-auth-pw-toggle").forEach(function (b) { pwSet(b, false); });
+  }
+
+  g.gembossUI = { openModal: openModal, toast: toast, confirm: confirm, initMenus: initMenus, closeMenus: closeMenus,
+    initShell: initShell, initPasswordFields: initPasswordFields, resetPasswordFields: resetPasswordFields,
+    openModals: function () { return MODALS.length; } };
 })(globalThis);

package/src/launcher.tsx

@@ -1,9 +1,12 @@
 "use client";
 /**
- * The button that opens a surface's AI assistant: bottom-right, floating (02/10/2026, Chris: "chắc vẫn phải để button ở góc
- * dưới bên phải còn góc trên bên phải là account … đồng bộ"). partner-radar had it in the topbar's top-right corner, which on
- * a phone became a black ✦ circle exactly where content-radar shows the account chip — two surfaces on one frame, the same
- * corner doing two different jobs. The top-right corner is the ACCOUNT (AccountMenu); the assistant lives here.
+ * The button that opens a surface's AI assistant. The top-right corner of the topbar is the ACCOUNT (AccountMenu, 02/10/2026:
+ * partner-radar's ✦ there read as content-radar's account chip on phones).
+ *
+ * Not floating (03/10/2026): 0.4.2 floated it bottom-right, and a fixed button covers whatever text scrolls under it
+ * (visual-gate `content_covered` red at 5 of 6 widths on partner-radar). Chris chose to drop the floating button. A surface
+ * renders it TWICE and CSS shows one: `placement="rail"` in AppShell's `railBottom` (wide screens), `placement="topbar"` in
+ * `actions` before the account chip (≤760px, where the rail is a drawer).
  *
  * Deliberately dumb: no provider, no state. A surface on `@gemboss/ui/assistant` passes `hidden` while its dock is open
  * (`presentation !== "hidden"`); a surface with its own panel does the same with its own flag.
@@ -11,19 +14,25 @@
 import React from "react";
 import { Icon } from "./icons";
 
-export function AssistantLauncher({ label, shortcut, hidden, onClick, className, ...rest }: {
+// Whole class names, not a `--${placement}` template: an interpolated stem would exempt every class under it from the
+// admin's orphan-rule gate (a-tap-target-rule-outlived-its-markup.test.ts).
+const PLACEMENT = { rail: "gb-assistant-launcher--rail", topbar: "gb-assistant-launcher--topbar" } as const;
+
+export function AssistantLauncher({ label, shortcut, placement = "rail", hidden, onClick, className, ...rest }: {
   /** Visible name, e.g. "Hỏi AI" / "Partner Assistant". Kept as the accessible name when the text hides on phones. */
   label: string;
   /** Keyboard hint shown on wide screens, e.g. "⌘J". Decorative: the surface owns the shortcut itself. */
   shortcut?: string;
-  /** The assistant is already open — the launcher steps out of the way (it would sit under the dock). */
+  /** Where this copy sits: the rail's last row (wide screens) or the topbar (phones). Render one of each. */
+  placement?: "rail" | "topbar";
+  /** The assistant is already open: the launcher steps out of the way. */
   hidden?: boolean;
   onClick?: React.MouseEventHandler<HTMLButtonElement>;
   className?: string;
 } & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onClick" | "hidden">) {
   if (hidden) return null;
   return (
-    <button type="button" className={className ? `gb-assistant-launcher ${className}` : "gb-assistant-launcher"}
+    <button type="button" className={`gb-assistant-launcher ${PLACEMENT[placement]}${className ? ` ${className}` : ""}`}
             aria-label={shortcut ? `${label} (${shortcut})` : label} onClick={onClick} {...rest}>
       <Icon name="sparkle" />
       <span className="gb-assistant-launcher-label">{label}</span>

package/src/shell.css

@@ -403,6 +403,7 @@
 }
 
 .gnav-item:hover { background: var(--gemboss-nav-hover); }
+.gnav-item:focus-visible { outline: 2px solid var(--gemboss-accent); outline-offset: -2px; } /* the one iris ring (0.5.1): had none, the browser drew its own */
 
    /* neutral gray on white (Polaris-like) */
 /* Active hub: a full coral pill when you're ON the hub's own page. But when a deeper

package/src/shell.tsx

@@ -42,8 +42,10 @@ export function Topbar({ className, children, ...rest }: React.HTMLAttributes<HT
 export function MobileMenuButton({ open, onToggle, labels = { open: "Open menu", close: "Close menu" }, ...rest }:
   { open: boolean; onToggle: () => void; labels?: { open: string; close: string } } & React.ButtonHTMLAttributes<HTMLButtonElement>) {
   return (
+    // data-label-*: a page rendered with renderToStaticMarkup has no React state; kit-plain.js `initShell()` reads
+    // both names from here (GemFactory patched them into the markup by hand before 0.5.1).
     <button type="button" className="gemboss-mobile-menu-btn" aria-label={open ? labels.close : labels.open}
-            aria-expanded={open} onClick={onToggle} {...rest}>
+            aria-expanded={open} data-label-open={labels.open} data-label-close={labels.close} onClick={onToggle} {...rest}>
       <svg width="20" height="20" viewBox="0 0 20 20" aria-hidden="true">
         <path d="M3 5.5h14M3 10h14M3 14.5h14" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" />
       </svg>

package/src/ui.css

@@ -35,7 +35,10 @@
   --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);
+  /* ONE focus ring for every control (02/10/2026): the admin's, iris — gemboss-shell.css points Polaris'
+     --p-color-border-focus at --gemboss-accent. Before, kit buttons, tabs and checks drew black, fields
+     and selects #005bd3 (Polaris' default, which the export shipped), and the admin drew iris. */
+  --ui-focus: var(--gemboss-accent, #5661f5);
   --ui-radius-sm: 6px;
   --ui-radius-md: 8px;
   --ui-radius-lg: 12px;
@@ -43,7 +46,10 @@
   --ui-space-2: 8px;
   --ui-space-3: 12px;
   --ui-space-4: 16px;
-  --ui-control-h: 34px;
+  /* 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). */
+  --ui-control-h: 32px;
   --ui-fs-body: 13px;
   --ui-fs-caption: 12px;
   /* Content column width for the seller app shell — ONE source of truth for every wide surface
@@ -140,10 +146,10 @@
    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 stays 36px
-   (--ui-control-h), because a select sits in toolbars beside 36px `.ui-btn`s. */
+   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-select {
-  height: 36px; padding: 0 32px 0 12px; max-width: 100%;
+  height: var(--ui-control-h); padding: 0 32px 0 12px; max-width: 100%;
   background: var(--p-color-input-bg-surface, 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(--p-color-input-border, var(--gemboss-field-line)); border-radius: var(--ui-radius-md);
   color: var(--p-color-text, var(--gemboss-field-ink)); font-family: inherit; font-size: var(--ui-fs-body); font-weight: 500;
@@ -155,7 +161,7 @@
 }
 .ui-select:focus { outline: none; }
 .ui-select:focus-visible:not(:disabled) {
-  outline: 2px solid var(--p-color-border-focus, #005bd3); outline-offset: 1px;
+  outline: 2px solid var(--p-color-border-focus, var(--ui-focus)); outline-offset: 1px;
   border-color: var(--p-color-input-border-active, var(--gemboss-field-line-active));
 }
 .ui-select:disabled { opacity: .5; cursor: not-allowed; }
@@ -166,7 +172,7 @@
    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: 10px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase;
+  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);
 }
 .ui-tag--accent { background: var(--adm-accent-soft, rgba(20,22,26,.05)); color: var(--adm-accent-fg, var(--ui-accent)); }
@@ -188,7 +194,7 @@
   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 var(--p-color-border-focus, #005bd3); outline-offset: 1px; }
+.ui-chips > a.ui-tag--chip:focus-visible { outline: 2px solid var(--p-color-border-focus, var(--ui-focus)); 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; }
@@ -207,8 +213,8 @@
    `.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; }
+.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 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.
    Đưa lên từ admin `.gemboss-admin-toolbar`. Chỉ BỐ CỤC: ô tìm là `gemboss-field gemboss-field--group`. */
@@ -243,7 +249,7 @@ a.ui-metric:focus-visible { outline: 2px solid var(--ui-focus); outline-offset:
 /* ── 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 { 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(--ui-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); }
@@ -251,19 +257,20 @@ a.ui-metric:focus-visible { outline: 2px solid var(--ui-focus); outline-offset:
 /* ── 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 { 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(--p-color-border-focus, #005bd3); outline-offset: 1px; }
+.ui-pager > a:focus-visible { outline: 2px solid var(--p-color-border-focus, var(--ui-focus)); 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). */
+   Polaris' Badge (02/10/2026; was an uppercase mono pill): 12px/550, 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;
-  font-size: 11px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase;
-  padding: 1px 8px; border-radius: 6px; background: var(--ui-surface-2); color: var(--ui-text-muted);
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-}
+  display: inline-flex; align-items: center; gap: 4px;
+  font-size: var(--ui-fs-caption); line-height: 16px; font-weight: 550; 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 ────────────────────────────────────────────────────────────────────
    Rendered INLINE (not portaled): a portal escapes the .gemboss-admin-shell token
@@ -293,7 +300,7 @@ a.ui-metric:focus-visible { outline: 2px solid var(--ui-focus); outline-offset:
 }
 .ui-modal__close svg { width: 20px; height: 20px; }
 .ui-modal__close:hover { background: var(--ui-surface-2); color: var(--ui-text); }
-.ui-modal__close:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: -2px; }
+.ui-modal__close:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: -2px; }
 
 /* `size="lg"` — the screen-shaped dialog. Only the HOOK lives here: this sheet is imported by the
    root layout, so every rule in it is paid on every screen, and the geometry of a dialog with one
@@ -317,7 +324,7 @@ a.ui-metric:focus-visible { outline: 2px solid var(--ui-focus); outline-offset:
 }
 .ui-textarea:focus { outline: none; }
 .ui-textarea:focus-visible:not(:disabled) {
-  outline: 2px solid var(--p-color-border-focus, #005bd3); outline-offset: 1px;
+  outline: 2px solid var(--p-color-border-focus, var(--ui-focus)); outline-offset: 1px;
   border-color: var(--p-color-input-border-active, var(--gemboss-field-line-active));
 }
 .ui-textarea:disabled { opacity: .5; cursor: not-allowed; }
@@ -335,12 +342,13 @@ a.ui-metric:focus-visible { outline: 2px solid var(--ui-focus); outline-offset:
    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: 36px; height: 36px;
+  display: inline-grid; place-items: center; width: calc(var(--ui-control-h) - 2px); height: calc(var(--ui-control-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(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; }
 /* 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"],
@@ -519,7 +527,7 @@ body.ui-resizing::after { content: ""; position: fixed; inset: 0; z-index: 9999;
   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;
-  font-family: inherit; font-size: var(--gemboss-fs-body); font-weight: 500; white-space: nowrap;
+  font-family: inherit; font-size: var(--ui-fs-body); font-weight: 500; white-space: nowrap;
   color: var(--ui-text-muted);
   transition: color var(--gemboss-transition-fast) ease, background-color var(--gemboss-transition-fast) ease;
 }
@@ -545,7 +553,7 @@ body.ui-resizing::after { content: ""; position: fixed; inset: 0; z-index: 9999;
   overflow-x: auto; max-width: 100%;
   background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-lg);
 }
-.ui-table { width: 100%; border-collapse: collapse; font-size: var(--gemboss-fs-body); color: var(--ui-text); }
+.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;
@@ -569,7 +577,7 @@ body.ui-resizing::after { content: ""; position: fixed; inset: 0; z-index: 9999;
 .ui-empty {
   display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--ui-space-2);
   padding: var(--ui-space-4); padding-block: 40px; text-align: center;
-  color: var(--ui-text-muted); font-size: var(--gemboss-fs-body);
+  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__body { margin: 0; max-width: 48ch; line-height: 1.5; }