@gemboss/ui 0.4.1 → 0.5.0

package/src/gemboss-tokens.css

@@ -79,7 +79,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 bodySm(13) which the app had been leaning on for prose. */
+     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. */
   --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 */

package/src/icon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100"><rect width="100" height="100" rx="24" fill="#0B0B0C"/><g transform="translate(18,10) scale(0.66)"><polygon points="26,14 74,14 66,50 34,50" fill="#5661F5"/><path d="M26,14 74,14 96,50 50,110 4,50Z" fill="none" stroke="#fff" stroke-width="9" stroke-linejoin="round"/><path d="M4,50H96M26,14 34,50M74,14 66,50M34,50 50,110M66,50 50,110" fill="none" stroke="#fff" stroke-width="5.6" stroke-linejoin="round"/></g></svg>

package/src/icons.tsx

@@ -57,6 +57,8 @@ const P = {
   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" />,
+  // The assistant's mark (✦ in the surfaces' old hand-drawn buttons): a four-point star + a small one.
+  sparkle: <><path d="M9 3.5c.4 2.9 1.6 4.1 4.5 4.5-2.9.4-4.1 1.6-4.5 4.5-.4-2.9-1.6-4.1-4.5-4.5 2.9-.4 4.1-1.6 4.5-4.5z" /><path d="M14.5 12.5c.2 1.3.7 1.8 2 2-1.3.2-1.8.7-2 2-.2-1.3-.7-1.8-2-2 1.3-.2 1.8-.7 2-2z" /></>,
 } satisfies Record<string, React.ReactNode>;
 // `satisfies`, not a `Record<string, …>` annotation: the annotation widened `keyof` to `string`, so a
 // typo (`name="setings"`) type-checked and drew an empty box (review #3474).

package/src/index.ts

@@ -8,3 +8,4 @@ export { BrandLockup } from "./brand";
 export { AccountMenu, AccountMenuItem, initialsOf } from "./account";
 export { Menu, MenuItem, MenuSeparator } from "./menu";
 export { Icon, ICON_NAMES, type IconName } from "./icons";
+export { AssistantLauncher } from "./launcher";

package/src/kit-plain.css

@@ -77,7 +77,7 @@
 .ui-link:hover,
 .ui-prose a:not([class]):hover { color: var(--gemboss-accent, #5661f5); text-decoration-thickness: 2px; }
 .ui-link:focus-visible,
-.ui-prose a:not([class]):focus-visible { outline: 2px solid var(--ui-focus, #005bd3); outline-offset: 2px; border-radius: 2px; }
+.ui-prose 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 {
@@ -86,7 +86,7 @@
 }
 .ui-card__media > img { display: block; width: 100%; height: 100%; object-fit: cover; }
 button.ui-card__media, a.ui-card__media { cursor: pointer; }
-.ui-card__media:focus-visible { outline: 2px solid var(--ui-focus, #005bd3); outline-offset: -2px; }
+.ui-card__media:focus-visible { outline: 2px solid var(--ui-focus, #5661f5); outline-offset: -2px; }
 /* justify-items: start: a tag or a button in the body keeps its own width instead of stretching across the card. */
 .ui-card__body { display: grid; justify-items: start; gap: var(--ui-space-2, 8px); padding: var(--ui-space-3, 12px) var(--ui-space-4, 16px); min-width: 0; }
 .ui-card__foot {
@@ -96,8 +96,8 @@ button.ui-card__media, a.ui-card__media { cursor: pointer; }
 }
 
 /* Popup body and foot: `<div class="ui-modal__body">…</div><div class="ui-modal__foot"><button class="ui-btn">…</button></div>`.
-   The admin's Modal.tsx pads its own children, so ui.css never styled these; every non-React surface padded them by
-   hand (GemFactory: 16/20 and a hairline above the actions). kit-plain.js's openModal writes exactly this shape. */
+   ui.css never styled these, and the admin does not load this file: its Modal.tsx children carry their own padding
+   (or none). Every non-React surface padded them by hand (GemFactory: 16/20 and a hairline above the actions). kit-plain.js's openModal writes exactly this shape. */
 .ui-modal__body { padding: 16px 20px; }
 .ui-modal__foot {
   display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end;
@@ -214,3 +214,162 @@ button.ui-card__media, a.ui-card__media { cursor: pointer; }
 /* Tab / nhóm nút là ĐIỀU KHIỂN: ≥ 44px dưới ngón tay (§9.1). Khối coarse của ui.css chỉ bắt `pointer: coarse`; ở khổ điện
    thoại trình duyệt máy tính vẫn báo `fine`, nên nâng theo khổ như ui-btn--icon ở trên. */
 @media (pointer: coarse), (max-width: 47.9975em) { .ui-seg :is(button, a) { height: 44px; min-height: 44px; } }
+
+/* ── Polaris parity: the primitives every surface was drawing for itself (02/10/2026) ──────────────────────
+   An audit of the six surfaces on the package (gemwatcher, GemFactory, gempress, gemcare, partner-radar,
+   content-radar) found the same gaps re-filled six ways: no destructive button (four surfaces fell back to the
+   browser's `confirm()`), one-tone badges, banners as bare colour blocks, hand-made radio / switch / tooltip /
+   spinner, and help and error text under a field in five sizes. The admin has all of them from Polaris; this is
+   the same shape in plain CSS, with Polaris' measurements and GemBoss' tokens (the danger / success / warning
+   set the kit's tags and notices already use). The admin does not load this file. */
+
+/* Destructive button: `ui-btn ui-btn--critical` (red text on the default button) and
+   `ui-btn ui-btn--primary ui-btn--critical` (red fill), Polaris' `tone="critical"` in both variants. Red text is
+   --gemboss-danger-strong: 7.3:1 on white, 5.7:1 on the hover ground (shell.css says why not --gemboss-danger). */
+.ui-btn--critical { color: var(--gemboss-danger-strong); }
+.ui-btn--critical:hover { background: var(--gemboss-danger-soft); color: var(--gemboss-danger-strong); }
+.ui-btn--primary.ui-btn--critical { background: var(--gemboss-danger); border-color: var(--gemboss-danger); color: var(--gemboss-on-primary); }
+.ui-btn--primary.ui-btn--critical:hover { background: var(--gemboss-danger-strong); border-color: var(--gemboss-danger-strong); color: var(--gemboss-on-primary); }
+.ui-btn--critical:focus-visible { outline-color: var(--gemboss-danger-strong); }
+
+/* Under a thumb, and at phone WIDTH (a desktop browser at 320px reports pointer: fine), EVERY kit button is a 44px
+   control, the compact one included: §9.1 has no density exception, and GemFactory, gempress and gemcare each
+   restated this floor for `--sm` themselves. ui.css's coarse block leaves `--sm` alone for the admin's own
+   settings page; this file is not loaded there. */
+@media (pointer: coarse), (max-width: 47.9975em) {
+  .ui-btn, .ui-btn.ui-btn--sm { min-height: 44px; }
+  .ui-select.ui-select { min-height: 44px; }
+  /* A target is an AREA: the compact icon button (28 wide) and an icon segment (30) grow sideways as well. */
+  .ui-btn--icon.ui-btn--sm, .ui-seg :is(button, a):not(.is-text) { min-width: 44px; }
+}
+
+/* Badge tones: `<span class="ui-badge ui-badge--success">Active</span>`. Polaris' tones on GemBoss' soft grounds (Polaris' `attention` is `--warning` here: the fleet has one amber).
+   `ui-badge--dot` puts a status dot before the label (filled = done, the tone's colour). */
+.ui-badge--success { background: var(--gemboss-success-soft); color: var(--gemboss-success-strong); }
+.ui-badge--warning { background: var(--gemboss-warning-soft); color: var(--gemboss-warning); }
+.ui-badge--critical { background: var(--gemboss-danger-soft); color: var(--gemboss-danger-strong); }
+.ui-badge--info { background: var(--gemboss-accent-soft); color: var(--gemboss-accent-strong); }
+.ui-badge--dot::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
+
+/* Banner: Polaris' in-page Banner. A tone strip with an icon and a title, a body, optional actions, optional
+   dismiss. `ui-notice` stays for a one-line note; a banner is for something the person must read or act on.
+   <div class="ui-banner ui-banner--warning" role="status">
+     <div class="ui-banner__head"><svg class="ui-banner__icon" …/><h3 class="ui-banner__title">Slack token expired</h3>
+       <button type="button" class="ui-banner__close" aria-label="Dismiss">…</button></div>
+     <div class="ui-banner__body"><p>Monday's digest will not send.</p>
+       <div class="ui-banner__actions"><a class="ui-btn" href>Reconnect</a></div></div></div>
+   No tone = neutral. role="status" / "alert" only when it appears after the page loaded. */
+.ui-banner {
+  --ui-banner-bg: var(--ui-surface-2); --ui-banner-fg: var(--ui-text);
+  border-radius: var(--ui-radius-lg); overflow: hidden; background: var(--ui-surface); color: var(--ui-text);
+  box-shadow: 0 0 0 1px var(--ui-border), 0 3px 1px -1px rgba(26, 26, 26, 0.07);
+  font-size: var(--ui-fs-body); line-height: 20px;
+}
+.ui-banner--success { --ui-banner-bg: var(--gemboss-success-soft); --ui-banner-fg: var(--gemboss-success-strong); }
+.ui-banner--warning { --ui-banner-bg: var(--gemboss-warning-soft); --ui-banner-fg: var(--gemboss-warning); }
+.ui-banner--critical { --ui-banner-bg: var(--gemboss-danger-soft); --ui-banner-fg: var(--gemboss-danger-strong); }
+.ui-banner--info { --ui-banner-bg: var(--gemboss-accent-soft); --ui-banner-fg: var(--gemboss-accent-strong); }
+.ui-banner__head { display: flex; align-items: center; gap: var(--ui-space-2); min-height: 32px; padding: 6px var(--ui-space-3); background: var(--ui-banner-bg); color: var(--ui-banner-fg); }
+.ui-banner__icon { flex: none; width: 20px; height: 20px; fill: currentColor; }
+.ui-banner__title { flex: 1 1 auto; min-width: 0; margin: 0; font-size: var(--ui-fs-body); font-weight: 650; line-height: 20px; }
+.ui-banner__close {
+  flex: none; display: inline-grid; place-items: center; width: 32px; height: 32px; margin: -6px -8px -6px 0;
+  border: 0; border-radius: var(--ui-radius-md); background: transparent; color: inherit; cursor: pointer;
+}
+.ui-banner__close:hover { background: color-mix(in srgb, currentColor 10%, transparent); }
+.ui-banner__close:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: -2px; }
+.ui-banner__close svg { width: 16px; height: 16px; }
+.ui-banner__body { padding: var(--ui-space-3) var(--ui-space-4); }
+.ui-banner__body > :first-child { margin-top: 0; }
+.ui-banner__body > :last-child { margin-bottom: 0; }
+.ui-banner__actions { display: flex; flex-wrap: wrap; gap: var(--ui-space-2); margin-top: var(--ui-space-3); }
+@media (pointer: coarse), (max-width: 47.9975em) { .ui-banner__close { width: 44px; height: 44px; margin: -12px -12px -12px 0; } }
+
+/* Help and error text under a field, Polaris' Labelled help text and InlineError:
+   <label class="ui-label" for="x">Domain</label><input id="x" class="gemboss-field gemboss-field--tall"
+     aria-describedby="x-help x-err" aria-invalid="true"><p class="ui-help" id="x-help">Without https://</p>
+   <p class="ui-error" id="x-err">This store is already tracked.</p>
+   aria-invalid paints the field in the critical tone; the message says what to do, not only what is wrong. */
+.ui-help { margin: var(--ui-space-1) 0 0; font-size: var(--ui-fs-body); line-height: 20px; color: var(--ui-text-muted); }
+.ui-error:empty { display: none; }   /* a placeholder kept for aria-describedby draws no icon */
+.ui-error { display: flex; gap: 6px; margin: var(--ui-space-1) 0 0; font-size: var(--ui-fs-body); line-height: 20px; color: var(--gemboss-danger-strong); }
+.ui-error::before {
+  content: ""; flex: none; width: 16px; height: 16px; margin-top: 2px; background: currentColor;
+  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M10 2a8 8 0 1 0 0 16 8 8 0 0 0 0-16Zm-.75 4h1.5v5.5h-1.5V6Zm.75 9a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z'/></svg>") center / contain no-repeat;
+          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M10 2a8 8 0 1 0 0 16 8 8 0 0 0 0-16Zm-.75 4h1.5v5.5h-1.5V6Zm.75 9a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z'/></svg>") center / contain no-repeat;
+}
+.gemboss-field[aria-invalid="true"], .gemboss-field--group:has([aria-invalid="true"]),
+.ui-select[aria-invalid="true"], .ui-textarea[aria-invalid="true"] {
+  border-color: var(--gemboss-danger-strong); background-color: var(--gemboss-danger-soft);
+}
+
+/* Radio: the checkbox's row with `type="radio"` — `<fieldset class="ui-choices"><legend class="ui-label">Plan</legend>
+   <label class="ui-check"><input type="radio" name="plan" checked> Basic</label>…</fieldset>`. */
+.ui-choices { display: grid; gap: 0; margin: 0; padding: 0; border: 0; min-width: 0; }
+.ui-choices > legend { padding: 0; }
+
+/* Switch: a checkbox that reads as on / off, for a setting that applies at once (no Save button).
+   `<label class="ui-check ui-switch"><input type="checkbox" role="switch" checked> Send Monday digest</label>`.
+   Track 32×20, thumb 16; the row stays the checkbox's 44px target. */
+.ui-switch > input[type="checkbox"] {
+  appearance: none; -webkit-appearance: none; position: relative; width: 32px; height: 20px; margin: 0;
+  border-radius: var(--gemboss-radius-full); background: var(--gemboss-field-line); /* 3.5:1 on white, WCAG 1.4.11 */ transition: background-color var(--gemboss-transition-fast) ease;
+}
+.ui-switch > input[type="checkbox"]::before {
+  content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%;
+  background: var(--gemboss-surface); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); transition: transform var(--gemboss-transition-fast) ease;
+}
+.ui-switch > input[type="checkbox"]:checked { background: var(--ui-accent); }
+.ui-switch > input[type="checkbox"]:checked::before { transform: translateX(12px); }
+@media (prefers-reduced-motion: reduce) { .ui-switch > input[type="checkbox"], .ui-switch > input[type="checkbox"]::before { transition: none; } }
+
+/* Tooltip: a SHORT label for an icon-only control, shown on hover and keyboard focus. Not for anything the person
+   needs to act on (a touch screen never hovers).
+   <span class="ui-tooltip"><button class="ui-btn ui-btn--icon" aria-describedby="t1" aria-label="Archive">…</button>
+     <span class="ui-tooltip__bubble" role="tooltip" id="t1">Archive</span></span>   `--end` aligns it right. */
+.ui-tooltip { position: relative; display: inline-flex; }
+.ui-tooltip__bubble {
+  position: absolute; z-index: 30; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
+  width: max-content; max-width: 240px; padding: 4px 8px; border-radius: var(--ui-radius-md);
+  background: var(--ui-surface); color: var(--ui-text); font-size: var(--ui-fs-body); line-height: 20px; font-weight: 450;
+  box-shadow: 0 8px 16px -4px rgba(26, 26, 26, 0.22), 0 0 0 1px var(--ui-border);
+  opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--gemboss-transition-fast) ease;
+}
+.ui-tooltip--end .ui-tooltip__bubble { left: auto; right: 0; transform: none; }
+.ui-tooltip:hover > .ui-tooltip__bubble, .ui-tooltip:focus-within > .ui-tooltip__bubble { opacity: 1; visibility: visible; }
+
+/* Spinner: `<span class="ui-spinner" role="status"><span class="ui-sr-only">Loading…</span></span>`, 20px
+   (Polaris small); `--lg` is 44px. Reduced motion turns it slower, never off: it is the only sign of waiting. */
+.ui-spinner {
+  display: inline-block; flex: none; width: 20px; height: 20px; box-sizing: border-box; border-radius: 50%;
+  border: 2px solid color-mix(in srgb, var(--ui-text) 18%, transparent); border-top-color: var(--ui-text);
+  animation: ui-spin 0.7s linear infinite; vertical-align: middle;
+}
+.ui-spinner--lg { width: 44px; height: 44px; border-width: 4px; }
+@keyframes ui-spin { to { transform: rotate(360deg); } }
+@media (prefers-reduced-motion: reduce) { .ui-spinner { animation-duration: 2s; } }
+
+/* Progress: `<progress class="ui-progress" value="37" max="100" aria-label="Import">37%</progress>`, 8px, the
+   primary fill (Polaris' small ProgressBar). Tones: `--success`, `--critical`. */
+.ui-progress { appearance: none; -webkit-appearance: none; display: block; width: 100%; height: 8px; border: 0; border-radius: var(--gemboss-radius-full); overflow: hidden; background: var(--gemboss-divider); color: var(--ui-accent); }
+.ui-progress::-webkit-progress-bar { background: var(--gemboss-divider); border-radius: inherit; }
+.ui-progress::-webkit-progress-value { background: currentColor; border-radius: inherit; }
+.ui-progress::-moz-progress-bar { background: currentColor; border-radius: inherit; }
+.ui-progress--success { color: var(--gemboss-success); }
+.ui-progress--critical { color: var(--gemboss-danger); }
+
+/* Wider popup: `openModal({ className: "ui-modal--wide" })`, Polaris' default Modal (620px). The kit's own 460 is
+   Polaris' small step plus one; a form with two columns or a table needs this one. */
+.ui-modal--wide { width: min(620px, 100%); }
+
+/* Native popup: `<dialog class="ui-modal">` opened with `showModal()`, for React (and other) surfaces that do not load
+   kit-plain.js. The browser does what openModal does by hand: Escape closes it, the page behind is inert, it sits in
+   the top layer above the shell's topbar. Same head / body / foot markup; `::backdrop` is the kit's overlay. gemcare
+   and content-radar already used `<dialog>`, each with its own width, padding and backdrop (02/10/2026: four shapes,
+   420 to 760 wide). Close on a backdrop click yourself: a click whose target IS the dialog landed outside the panel.
+   `<dialog class="ui-modal" aria-labelledby="t"><div class="ui-modal__head"><div class="ui-modal__title" id="t">…</div>
+   <button type="button" class="ui-modal__close" aria-label="Close">…</button></div><div class="ui-modal__body">…</div>
+   <div class="ui-modal__foot">…</div></dialog>` */
+dialog.ui-modal { padding: 0; max-width: calc(100% - 40px); max-height: calc(100dvh - 40px); color: var(--ui-text); }
+dialog.ui-modal[open] { display: flex; flex-direction: column; }
+dialog.ui-modal::backdrop { background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(2px); }

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";
@@ -175,5 +178,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

@@ -0,0 +1,33 @@
+"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.
+ *
+ * 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.
+ */
+import React from "react";
+import { Icon } from "./icons";
+
+export function AssistantLauncher({ label, shortcut, 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). */
+  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"}
+            aria-label={shortcut ? `${label} (${shortcut})` : label} onClick={onClick} {...rest}>
+      <Icon name="sparkle" />
+      <span className="gb-assistant-launcher-label">{label}</span>
+      {shortcut ? <kbd className="gb-assistant-launcher-kbd">{shortcut}</kbd> : null}
+    </button>
+  );
+}

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; }
@@ -208,7 +214,7 @@
    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 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,18 +257,19 @@ 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: var(--ui-surface-2); color: var(--ui-text-muted);
 }
 
 /* ── Modal ────────────────────────────────────────────────────────────────────
@@ -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,7 +342,7 @@ 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; }
@@ -519,7 +526,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 +552,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 +576,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; }