@gemboss/ui 0.6.9 → 0.7.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: d82cf2553a585b741231a905e8845db7353c4726
- * sources sha256: 67e1eb62e369a8fedf0d081820f8dffd9fd39801df6ca597060851c99cec3b42
+ * gemboss commit: fef56e0d93ce96cce6e59613fc62f8f68a739cd2
+ * sources sha256: 518302cf7e7a5abd3c1c2157f2b0993b9578c9e030d25ee90cd5ef36b898eec2
  * contents: 1 allow-listed rule from apps/admin/src/app/globals.css + packages/ui/src/gemboss-tokens.css
  *   (verbatim) + packages/ui/src/ui.css (verbatim) + packages/ui/src/gemboss-field.css (verbatim)
  *   + 181 rules from packages/ui/src/shell.css (the shared shell)
@@ -567,7 +567,7 @@ a.ui-metric:focus-visible { outline: 2px solid var(--ui-focus); outline-offset:
   pointer-events: auto;
   display: flex; align-items: center; gap: 12px;
   min-width: 220px; max-width: 100%; padding: 12px 12px 12px 16px;
-  background: var(--ui-text-strong, #1a1917); color: #fff; border-radius: 12px;
+  background: var(--ui-text-strong, #1a1917); color: var(--gemboss-on-primary, #fff); border-radius: 12px;
   font-size: var(--ui-fs-body, 13px); line-height: 1.4; font-weight: 500;
   box-shadow: var(--gemboss-shadow-overlay, 0 8px 28px rgba(0, 0, 0, 0.24));
   animation: gemboss-toast-in 240ms cubic-bezier(0.16, 1, 0.3, 1);
@@ -575,7 +575,7 @@ a.ui-metric:focus-visible { outline: 2px solid var(--ui-focus); outline-offset:
 .gemboss-toast.is-error { background: var(--gemboss-danger, #d72c0d); }
 .gemboss-toast-text { flex: 1 1 auto; min-width: 0; }
 .gemboss-toast-action {
-  flex: 0 0 auto; border: 0; background: transparent; color: #fff; cursor: pointer;
+  flex: 0 0 auto; border: 0; background: transparent; color: var(--gemboss-on-primary, #fff); cursor: pointer;
   padding: 4px 8px; border-radius: 8px; font: inherit; font-weight: 650;
   text-decoration: underline; text-underline-offset: 2px;
   transition: background 0.14s ease;
@@ -584,12 +584,12 @@ a.ui-metric:focus-visible { outline: 2px solid var(--ui-focus); outline-offset:
 .gemboss-toast-dismiss {
   flex: 0 0 auto; display: inline-grid; place-items: center;
   width: 24px; height: 24px; border: 0; border-radius: 8px; cursor: pointer;
-  background: rgba(255, 255, 255, 0.12); color: #fff;
+  background: rgba(255, 255, 255, 0.12); color: var(--gemboss-on-primary, #fff);
   transition: background 0.14s ease;
 }
 .gemboss-toast-dismiss:hover { background: rgba(255, 255, 255, 0.26); }
 .gemboss-toast-action:focus-visible,
-.gemboss-toast-dismiss:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
+.gemboss-toast-dismiss:focus-visible { outline: 2px solid var(--gemboss-on-primary, #fff); outline-offset: 2px; }
 @keyframes gemboss-toast-in {
   from { opacity: 0; transform: translateY(12px); }
   to { opacity: 1; transform: translateY(0); }
@@ -3151,7 +3151,7 @@ body.gemboss-assistant-unread .gnav-item.gnav-assistant::after {
   padding: 0 6px;
   border-radius: var(--gemboss-radius-full);
   background: var(--gemboss-primary);
-  color: #fff;
+  color: var(--gemboss-on-primary, #fff);
   font-size: 11px;
   font-weight: 700;
   line-height: 18px;
@@ -3275,14 +3275,17 @@ body.gemboss-assistant-unread .gnav-item.gnav-assistant::after {
   margin: 8px 0 4px;
   padding: 0 12px;
   border-radius: var(--gemboss-radius-md, 8px);
-  background: var(--gemboss-primary, #1b1c1e);
-  color: var(--gemboss-on-primary, #fff);
+  /* The SAME iris pill as the admin's rail Assistant (.gnav-item.gnav-assistant, 0.6.8), not a solid near-black button
+     (0.7.1, 04/10/2026): content-radar and partner-radar open their assistant through this launcher, and after 0.6.8 the
+     two drew the one AI front door in two different colours beside the admin. */
+  background: var(--gemboss-accent-soft);
+  color: var(--gemboss-accent-strong);
   font-size: 13px;
   font-weight: 600;
   line-height: 1;
   text-align: left;
 }
-.gb-assistant-launcher--rail:hover { background: var(--gemboss-primary-dark, #000); }
+.gb-assistant-launcher--rail:hover { background: color-mix(in srgb, var(--gemboss-accent) 16%, var(--gemboss-surface)); }
 .gb-assistant-launcher--rail .gb-assistant-launcher-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .gb-assistant-launcher-kbd {
   font: inherit; font-size: 11px; opacity: 0.7;
@@ -3794,7 +3797,7 @@ button.ui-metric:focus-visible { outline: 2px solid var(--ui-focus); outline-off
   font-size: var(--gemboss-fs-body); line-height: 1.5; padding: 12px 12px; border-radius: 16px; max-width: min(90%, 68ch);
   white-space: pre-wrap; word-break: break-word;
 }
-.gemboss-ec-msg.user .gemboss-ec-bubble { background: var(--gemboss-primary); color: #fff; border-bottom-right-radius: 4px; }
+.gemboss-ec-msg.user .gemboss-ec-bubble { background: var(--gemboss-primary); color: var(--gemboss-on-primary, #fff); border-bottom-right-radius: 4px; }
 .gemboss-ec-msg.assistant .gemboss-ec-bubble { background: var(--gemboss-surface); color: var(--gemboss-text); border: 1px solid var(--gemboss-divider); border-bottom-left-radius: 4px; }
 .gemboss-ec-input button[type="submit"] svg { width: 18px; height: 18px; fill: currentColor; }
 /* Live "working" heartbeat — the Claude-Code-style running asterisk shown before the first token.
@@ -3894,7 +3897,7 @@ button.ui-metric:focus-visible { outline: 2px solid var(--ui-focus); outline-off
 .gemboss-ec-input button[type="submit"] {
   flex: 0 0 auto; width: 44px; height: 44px; min-width: 44px; min-height: 44px; border-radius: 50%; border: 0; cursor: pointer;
   display: inline-flex; align-items: center; justify-content: center;
-  background: var(--gemboss-primary); color: #fff; font-size: 16px; font-weight: 700;
+  background: var(--gemboss-primary); color: var(--gemboss-on-primary, #fff); font-size: 16px; font-weight: 700;
   transition: background var(--gemboss-transition-fast) ease, filter var(--gemboss-transition-fast) ease;
 }
 .gemboss-ec-input button[type="submit"]:hover:not(:disabled) { background: var(--gemboss-primary-dark); }
@@ -4293,3 +4296,192 @@ button.ui-metric:focus-visible { outline: 2px solid var(--ui-focus); outline-off
 .gemboss-ec-stop:disabled { opacity: 0.6; cursor: default; }
 .gemboss-ec-stop:hover { filter: brightness(1.08); }
 .gemboss-ec-stop:focus-visible { outline: 2px solid var(--gemboss-focus, var(--ui-focus, #5661f5)); outline-offset: 2px; }
+
+/* ═══ @gemboss/ui src/portal.css ═══ */
+/* ═══ Portal pieces — @gemboss/ui 0.7.0 (04/10/2026) ════════════════════════════════════════════
+   TopbarNav, Avatar, Leaderboard, Podium (portal.tsx), SearchDialog (dialog.tsx), ThemeToggle and the
+   dark palette (theme.tsx). Tokens only: every colour comes from --gemboss-* / --ui-*, so the dark
+   palette at the end reaches these too. */
+
+/* ── TopbarNav: section tabs in the topbar, after the brand (Featurebase's "Feedback · Roadmap"). The
+   active tab is underlined on the topbar's bottom edge. 44px targets under a finger, 36 under a mouse
+   (the kit's two-tier rule, as TopbarSearch). A phone scrolls the row sideways rather than wrapping it. */
+.gb-topnav { display: flex; align-items: stretch; gap: 4px; min-width: 0; height: 100%; margin-left: 12px; padding-left: 12px;
+  border-left: 1px solid var(--gemboss-divider); overflow-x: auto; scrollbar-width: none; }
+.gb-topnav::-webkit-scrollbar { display: none; }
+/* Each tab is as tall as the topbar, so its underline lands on the topbar's bottom edge. */
+.gb-topnav-link { position: relative; display: inline-flex; align-items: center; align-self: stretch; flex: 0 0 auto; min-height: 36px; padding: 0 10px;
+  border-radius: 8px; color: var(--gemboss-text-muted); font-size: 14px; font-weight: 520; text-decoration: none; white-space: nowrap; }
+.gb-topnav-link:hover { color: var(--gemboss-text-strong); background: var(--gemboss-hover); }
+.gb-topnav-link:focus-visible { outline: 2px solid var(--gemboss-accent); outline-offset: -2px; }
+.gb-topnav-link[aria-current="page"] { color: var(--gemboss-text-strong); font-weight: 640; }
+.gb-topnav-link[aria-current="page"]::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px;
+  border-radius: 2px; background: var(--gemboss-text-strong); }
+@media (pointer: coarse) { .gb-topnav-link { min-height: 44px; } }
+/* A topbar that carries tabs has no centre search: brand + tabs take the room, actions sit right. The
+   default columns keep 280–560px for a search box, which cut "Roadmap" to "Ro" and the brand to "G…". */
+.gemboss-platform-topbar:has(.gb-topnav):has(> .gemboss-topbar-center:empty) { grid-template-columns: minmax(0, 1fr) auto; }
+.gemboss-platform-topbar:has(.gb-topnav) > .gemboss-topbar-center:empty { display: none; }
+.gemboss-topbar-start:has(.gb-topnav) { min-width: 0; height: 100%; }
+.gemboss-topbar-start:has(.gb-topnav) > .gb-brand { flex: 0 0 auto; }
+@media (max-width: 760px) { .gb-topnav { margin-left: 8px; padding-left: 8px; } .gb-topnav-link { min-height: 44px; padding: 0 8px; }
+}
+.gb-topnav-row { display: flex; align-items: stretch; gap: 4px; min-width: 0; height: 100%; }
+/* The folded form (under 600px): one button naming the open tab, the tabs in a popover under it. */
+.gb-topnav-fold { display: none; position: relative; align-self: stretch; }
+.gb-topnav-fold > summary { list-style: none; cursor: pointer; gap: 4px; height: 100%; }
+.gb-topnav-fold > summary::-webkit-details-marker { display: none; }
+.gb-topnav-fold-btn[aria-current="page"]::after { display: none; }
+.gb-topnav-chevron { flex: 0 0 auto; transition: transform .15s ease; }
+.gb-topnav-fold[open] .gb-topnav-chevron { transform: rotate(180deg); }
+.gb-topnav-pop { position: fixed; top: 56px; left: 8px; min-width: 200px; padding: 6px; display: grid; gap: 2px; z-index: 60; }
+.gb-topnav-item { display: flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 8px;
+  color: var(--gemboss-text); font-size: 14px; font-weight: 520; text-decoration: none; }
+.gb-topnav-item:hover { background: var(--gemboss-hover); }
+.gb-topnav-item:focus-visible { outline: 2px solid var(--gemboss-accent); outline-offset: -2px; }
+.gb-topnav-item[aria-current="page"] { color: var(--gemboss-active-fg); background: var(--gemboss-active-bg); font-weight: 640; }
+@media (max-width: 600px) {
+  .gb-topnav { overflow: visible; }
+  .gb-topnav-row { display: none; }
+  .gb-topnav-fold { display: flex; }
+}
+@media (prefers-reduced-motion: reduce) { .gb-topnav-chevron { transition: none; } }
+
+/* ── Avatar: picture or initials on one of eight tones picked from the name. */
+.gb-avatar { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; border-radius: 50%; overflow: hidden;
+  font-weight: 700; line-height: 1; letter-spacing: .01em; user-select: none; }
+.gb-avatar--24 { width: 24px; height: 24px; font-size: 9.5px; }
+.gb-avatar--32 { width: 32px; height: 32px; font-size: 11px; }
+.gb-avatar--40 { width: 40px; height: 40px; font-size: 13px; }
+.gb-avatar--56 { width: 56px; height: 56px; font-size: 18px; }
+.gb-avatar-img { width: 100%; height: 100%; object-fit: cover; display: block; }
+/* One hue per tone; the disc and the initials are both mixed from it (light: dark initials on a pale
+   disc; dark: light initials on a deep disc). portal.test.tsx checks every tone clears 4.5:1 in both. */
+.gb-avatar[data-tone] { background: color-mix(in srgb, var(--gb-tone) 16%, #ffffff); color: color-mix(in srgb, var(--gb-tone) 70%, #000000); }
+.gb-avatar[data-tone="0"] { --gb-tone: #5661f5; }
+.gb-avatar[data-tone="1"] { --gb-tone: #0a8f6a; }
+.gb-avatar[data-tone="2"] { --gb-tone: #c26a04; }
+.gb-avatar[data-tone="3"] { --gb-tone: #db2777; }
+.gb-avatar[data-tone="4"] { --gb-tone: #0891b2; }
+.gb-avatar[data-tone="5"] { --gb-tone: #7c3aed; }
+.gb-avatar[data-tone="6"] { --gb-tone: #dc2626; }
+.gb-avatar[data-tone="7"] { --gb-tone: #6b7280; }
+
+/* ── Leaderboard: medals 1–3, then the rank; avatar, name, count; the leader's count in gold. Rows are
+   44px, so neighbours need no gap (§9.1). */
+.gb-leaderboard { display: grid; gap: 6px; min-width: 0; }
+.gb-leaderboard-title { margin: 0; display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 650; letter-spacing: .04em;
+  text-transform: uppercase; color: var(--gemboss-text-muted); }
+.gb-leaderboard-caption { margin: -2px 0 2px; font-size: 12px; color: var(--gemboss-text-muted); }
+.gb-leaderboard-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
+.gb-leaderboard-link { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 6px; border-radius: 8px;
+  color: var(--gemboss-text); text-decoration: none; }
+a.gb-leaderboard-link:hover { background: var(--gemboss-hover); }
+a.gb-leaderboard-link:focus-visible { outline: 2px solid var(--gemboss-accent); outline-offset: -2px; }
+.gb-leaderboard-rank { width: 20px; flex: 0 0 auto; text-align: center; font-size: 15px; line-height: 1; }
+.gb-leaderboard-rank.is-number { font-size: 12px; font-weight: 700; color: var(--gemboss-text-muted); font-variant-numeric: tabular-nums; }
+.gb-leaderboard-name { flex: 1 1 auto; min-width: 0; font-size: 13px; font-weight: 560; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.gb-leaderboard-value { flex: 0 0 auto; font-size: 13px; font-weight: 650; color: var(--gemboss-text-muted); font-variant-numeric: tabular-nums; }
+.gb-leaderboard-row.is-first .gb-leaderboard-value { color: #8a5a00; font-weight: 750; }
+.gb-leaderboard-all { justify-self: center; display: inline-flex; align-items: center; min-height: 24px; font-size: 12px; font-weight: 600;
+  color: var(--gemboss-text-muted); text-decoration: none; }
+.gb-leaderboard-all:hover { color: var(--gemboss-text-strong); text-decoration: underline; }
+
+/* ── Podium: second · first · third, the first raised. */
+.gb-podium { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: end; }
+.gb-podium-link { display: grid; justify-items: center; gap: 6px; padding: 14px 8px; border: 1px solid var(--gemboss-divider); border-radius: 12px;
+  background: var(--gemboss-surface); color: var(--gemboss-text); text-decoration: none; text-align: center; }
+a.gb-podium-link:hover { background: var(--gemboss-hover); }
+.gb-podium-slot { min-width: 0; }
+.gb-podium-slot--1 .gb-podium-link { padding-top: 22px; padding-bottom: 20px; border-color: color-mix(in srgb, #d4a017 45%, var(--gemboss-divider)); }
+.gb-podium-slot--2 .gb-podium-link { padding-bottom: 12px; }
+.gb-podium-slot--3 .gb-podium-link { padding-bottom: 8px; }
+.gb-podium-medal { font-size: 22px; line-height: 1; }
+.gb-podium-name { max-width: 100%; font-size: 13px; font-weight: 620; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.gb-podium-value { font-size: 15px; font-weight: 750; font-variant-numeric: tabular-nums; }
+.gb-podium-slot--1 .gb-podium-value { color: #8a5a00; }
+.gb-podium-unit { font-size: 11px; font-weight: 500; color: var(--gemboss-text-muted); }
+
+/* ── SearchDialog: the topbar's search button, and the popup (640 wide, near the top, like Featurebase's). */
+.gb-search-trigger, .gb-theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex: 0 0 auto;
+  border: 0; border-radius: 8px; background: transparent; color: var(--gemboss-text-muted); cursor: pointer; }
+.gb-search-trigger:hover, .gb-theme-toggle:hover { background: var(--gemboss-hover); color: var(--gemboss-text-strong); }
+.gb-search-trigger:focus-visible, .gb-theme-toggle:focus-visible { outline: 2px solid var(--gemboss-accent); outline-offset: -2px; }
+@media (pointer: coarse), (max-width: 760px) { .gb-search-trigger, .gb-theme-toggle { width: 44px; height: 44px; } }
+dialog.ui-modal.gb-search { width: min(640px, 100%); margin-top: 8vh; max-height: min(560px, calc(100dvh - 16vh)); }
+.gb-search-box { position: relative; display: flex; align-items: center; border-bottom: 1px solid var(--ui-border); }
+.gb-search-icon { position: absolute; left: 18px; color: var(--ui-text-muted); pointer-events: none; }
+.gb-search-input { flex: 1 1 auto; min-width: 0; height: 52px; padding: 0 18px 0 46px; border: 0; background: transparent; color: var(--ui-text);
+  font: inherit; font-size: 15px; outline: none; }
+.gb-search-input::-webkit-search-cancel-button { display: none; }
+.gb-search-results { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 8px; }
+.gb-search-section + .gb-search-section { margin-top: 8px; }
+.gb-search-section-title { padding: 6px 10px; font-size: 12px; font-weight: 600; color: var(--ui-text-muted); }
+.gb-search-item { display: grid; gap: 2px; min-height: 44px; align-content: center; padding: 6px 10px; border-radius: 8px; color: var(--ui-text); text-decoration: none; }
+.gb-search-item.is-active { background: var(--ui-surface-2); }
+.gb-search-item-title { font-size: 14px; font-weight: 520; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.gb-search-item-meta { display: flex; gap: 8px; align-items: center; font-size: 12px; color: var(--ui-text-muted); }
+.gb-search-empty { margin: 0; padding: 18px 18px 0; font-size: 13px; color: var(--ui-text-muted); }
+.gb-search-empty:empty { padding: 0; }
+.gb-search-foot { display: flex; gap: 16px; justify-content: flex-end; padding: 8px 14px; border-top: 1px solid var(--ui-border);
+  font-size: 12px; color: var(--ui-text-muted); }
+@media (max-width: 760px) { dialog.ui-modal.gb-search { margin-top: 12px; } .gb-search-foot { display: none; } }
+
+/* ── Dark palette. `ThemeToggle` / `themeScript` set data-theme on <html>; a surface without them stays
+   light. Only colours change: the components above and every kit class read these tokens. */
+:root[data-theme="dark"] {
+  color-scheme: dark;
+  --gemboss-primary: #f2f3f5;
+  --gemboss-primary-dark: #ffffff;
+  --gemboss-primary-soft: #23242a;
+  --gemboss-on-primary: #0d0d12;
+  --gemboss-accent: #7c84ff;
+  --gemboss-accent-strong: #a3a9ff;
+  --gemboss-accent-soft: #1f2140;
+  --gemboss-text-strong: #f2f3f5;
+  --gemboss-text: #e3e4e8;
+  --gemboss-text-muted: #9a9ca6;
+  --gemboss-surface: #16171d;
+  --gemboss-canvas: #0d0d12;
+  --gemboss-app-bg: #0d0d12;
+  --gemboss-rail-bg: #0d0d12;
+  --gemboss-panel-bg: #16171d;
+  --gemboss-topbar-bg: rgba(13, 13, 18, 0.96);
+  --gemboss-nav-bg: #0d0d12;
+  --gemboss-nav-hover: rgba(255, 255, 255, 0.06);
+  --gemboss-divider: #2a2b33;
+  --gemboss-divider-soft: #22232a;
+  --gemboss-hover: #22232b;
+  --gemboss-active-bg: #262833;
+  --gemboss-active-fg: #f2f3f5;
+  --gemboss-field-bg: #121318;
+  --gemboss-field-bg-hover: #17181e;
+  --gemboss-field-ink: #e3e4e8;
+  --gemboss-field-placeholder: #8a8c96;
+  --gemboss-field-line: #3a3c46;
+  --gemboss-field-line-hover: #50525e;
+  --gemboss-field-line-active: #c9cbd3;
+  --gemboss-chip-ink: #d6d8de;
+  --gemboss-chip-line: #3a3c46;
+  --gemboss-chip-line-hover: #50525e;
+  --gemboss-chip-bg-hover: #22232b;
+  --gemboss-success: #34c38f;
+  --gemboss-success-strong: #5fd6a8;
+  --gemboss-success-soft: #13291f;
+  --gemboss-success-border: #22533e;
+  --gemboss-warning: #e0b341;
+  --gemboss-warning-soft: #2b2412;
+  --gemboss-warning-border: #5a4a1d;
+  --gemboss-danger: #ff6b5a;
+  --gemboss-danger-strong: #ff8a7c;
+  --gemboss-danger-soft: #2e1714;
+  --gemboss-danger-border: #5c2a24;
+  --ui-accent-fg: #0d0d12;
+  --ui-warning-fg: #e8c063;
+  --gb-brand-ink: #f2f3f5;
+}
+/* Avatar initials in dark: the tone's light end, so the text clears 4.5:1 on its tinted disc. */
+:root[data-theme="dark"] .gb-avatar[data-tone] { background: color-mix(in srgb, var(--gb-tone) 30%, #16171d); color: color-mix(in srgb, var(--gb-tone) 35%, #ffffff); }
+:root[data-theme="dark"] body { background: var(--gemboss-app-bg); color: var(--gemboss-text); }
+:root[data-theme="dark"] .gb-leaderboard-row.is-first .gb-leaderboard-value,
+:root[data-theme="dark"] .gb-podium-slot--1 .gb-podium-value { color: #e0b341; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gemboss/ui",
-  "version": "0.6.9",
+  "version": "0.7.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",

package/src/account.tsx

@@ -14,12 +14,10 @@
  */
 import React, { useEffect, useRef } from "react";
 
-export function initialsOf(name: string): string {
-  const words = name.trim().split(/\s+/).filter(Boolean);
-  if (!words.length) return "?";
-  const letters = words.length === 1 ? words[0].slice(0, 2) : words[0][0] + words[words.length - 1][0];
-  return letters.toUpperCase();
-}
+import { initialsOf } from "./initials";
+
+// Kept exported from here too: it was the public name before initials.ts existed.
+export { initialsOf };
 
 export function AccountMenu({ name, email, role, initials, label, children }: {
   name: string;

package/src/assistant.css

@@ -396,7 +396,7 @@
   padding: 0 6px;
   border-radius: var(--gemboss-radius-full);
   background: var(--gemboss-primary);
-  color: #fff;
+  color: var(--gemboss-on-primary, #fff);
   font-size: 11px;
   font-weight: 700;
   line-height: 18px;
@@ -520,14 +520,17 @@
   margin: 8px 0 4px;
   padding: 0 12px;
   border-radius: var(--gemboss-radius-md, 8px);
-  background: var(--gemboss-primary, #1b1c1e);
-  color: var(--gemboss-on-primary, #fff);
+  /* The SAME iris pill as the admin's rail Assistant (.gnav-item.gnav-assistant, 0.6.8), not a solid near-black button
+     (0.7.1, 04/10/2026): content-radar and partner-radar open their assistant through this launcher, and after 0.6.8 the
+     two drew the one AI front door in two different colours beside the admin. */
+  background: var(--gemboss-accent-soft);
+  color: var(--gemboss-accent-strong);
   font-size: 13px;
   font-weight: 600;
   line-height: 1;
   text-align: left;
 }
-.gb-assistant-launcher--rail:hover { background: var(--gemboss-primary-dark, #000); }
+.gb-assistant-launcher--rail:hover { background: color-mix(in srgb, var(--gemboss-accent) 16%, var(--gemboss-surface)); }
 .gb-assistant-launcher--rail .gb-assistant-launcher-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .gb-assistant-launcher-kbd {
   font: inherit; font-size: 11px; opacity: 0.7;

package/src/chat.css

@@ -43,7 +43,7 @@
   font-size: var(--gemboss-fs-body); line-height: 1.5; padding: 12px 12px; border-radius: 16px; max-width: min(90%, 68ch);
   white-space: pre-wrap; word-break: break-word;
 }
-.gemboss-ec-msg.user .gemboss-ec-bubble { background: var(--gemboss-primary); color: #fff; border-bottom-right-radius: 4px; }
+.gemboss-ec-msg.user .gemboss-ec-bubble { background: var(--gemboss-primary); color: var(--gemboss-on-primary, #fff); border-bottom-right-radius: 4px; }
 .gemboss-ec-msg.assistant .gemboss-ec-bubble { background: var(--gemboss-surface); color: var(--gemboss-text); border: 1px solid var(--gemboss-divider); border-bottom-left-radius: 4px; }
 .gemboss-ec-input button[type="submit"] svg { width: 18px; height: 18px; fill: currentColor; }
 /* Live "working" heartbeat — the Claude-Code-style running asterisk shown before the first token.
@@ -143,7 +143,7 @@
 .gemboss-ec-input button[type="submit"] {
   flex: 0 0 auto; width: 44px; height: 44px; min-width: 44px; min-height: 44px; border-radius: 50%; border: 0; cursor: pointer;
   display: inline-flex; align-items: center; justify-content: center;
-  background: var(--gemboss-primary); color: #fff; font-size: 16px; font-weight: 700;
+  background: var(--gemboss-primary); color: var(--gemboss-on-primary, #fff); font-size: 16px; font-weight: 700;
   transition: background var(--gemboss-transition-fast) ease, filter var(--gemboss-transition-fast) ease;
 }
 .gemboss-ec-input button[type="submit"]:hover:not(:disabled) { background: var(--gemboss-primary-dark); }

package/src/dialog.tsx

@@ -0,0 +1,195 @@
+"use client";
+
+/**
+ * Popups for React surfaces — @gemboss/ui (04/10/2026).
+ *
+ * `Dialog`: the kit's native `<dialog class="ui-modal">` (kit-plain.css) driven by `open`. The browser
+ * gives Escape, the inert page and the top layer; this adds what it lacks: a click on the backdrop
+ * closes, focus goes back to whatever opened it, and `onClose` hears every way it closed. GemFeedback's
+ * sign-in and "Create a new post" open like this (Featurebase does both as popups: Chris 04/10/2026,
+ * "signup login là bật ra popup đó nhanh và tiện hơn").
+ *
+ * `SearchDialog`: the Featurebase / admin command search. A topbar button (or ⌘K / Ctrl+K / "/")
+ * opens it; what to show before typing comes from `initial`, results while typing from `search`
+ * (debounced, the latest answer wins); ↑ ↓ move, Enter opens, Esc closes. Results are links, so a
+ * page without JavaScript loses only the popup, never the search itself (`fallbackHref`).
+ */
+import React, { useCallback, useEffect, useId, useRef, useState } from "react";
+import { Icon } from "./icons";
+
+const cx = (...p: Array<string | false | null | undefined>) => p.filter(Boolean).join(" ");
+
+export function Dialog({ open, onClose, title, children, footer, wide = false, closeLabel = "Close", className }: {
+  open: boolean;
+  onClose: () => void;
+  title: React.ReactNode;
+  children?: React.ReactNode;
+  footer?: React.ReactNode;
+  wide?: boolean;
+  closeLabel?: string;
+  className?: string;
+}) {
+  const ref = useRef<HTMLDialogElement>(null);
+  const opener = useRef<Element | null>(null);
+  const titleId = useId();
+  useEffect(() => {
+    const d = ref.current;
+    if (!d) return;
+    if (open && !d.open) { opener.current = document.activeElement; d.showModal(); }
+    if (!open && d.open) d.close();
+  }, [open]);
+  useEffect(() => {
+    const d = ref.current;
+    if (!d) return undefined;
+    const onNativeClose = () => {
+      onClose();
+      (opener.current as HTMLElement | null)?.focus?.();
+    };
+    d.addEventListener("close", onNativeClose);
+    return () => d.removeEventListener("close", onNativeClose);
+  }, [onClose]);
+  return (
+    <dialog ref={ref} className={cx("ui-modal", wide && "ui-modal--wide", className)} aria-labelledby={titleId}
+      // A click whose target IS the dialog landed on the backdrop, outside the panel.
+      onClick={(e) => { if (e.target === e.currentTarget) e.currentTarget.close(); }}>
+      <div className="ui-modal__head">
+        <div className="ui-modal__title" id={titleId}>{title}</div>
+        <button type="button" className="ui-modal__close" aria-label={closeLabel} onClick={() => ref.current?.close()}>
+          <Icon name="close" size={20} />
+        </button>
+      </div>
+      <div className="ui-modal__body">{children}</div>
+      {footer ? <div className="ui-modal__foot">{footer}</div> : null}
+    </dialog>
+  );
+}
+
+export type SearchItem = { href: string; title: string; meta?: React.ReactNode };
+export type SearchSection = { title: string; items: SearchItem[] };
+
+// One constant, not a default `= []`: a fresh array each render, read by an effect, re-ran it forever
+// ("Maximum update depth exceeded", review of 0.7.0 in Chromium).
+const NO_SECTIONS: SearchSection[] = [];
+
+export function SearchDialog({ search, initial = NO_SECTIONS, placeholder = "Search…", label = "Search", fallbackHref, shortcut = true, renderItem }: {
+  /** Results for a query. Called at most every 150 ms; an answer to an older query is dropped. */
+  search: (q: string) => Promise<SearchSection[]>;
+  /** What the popup shows before anything is typed (Featurebase: "Trending requests", "Latest updates"). */
+  initial?: SearchSection[];
+  placeholder?: string;
+  label?: string;
+  /** Where the topbar button goes without JavaScript (a search page), used as given. */
+  fallbackHref?: string;
+  /** ⌘K / Ctrl+K and "/" open it. */
+  shortcut?: boolean;
+  renderItem?: (item: SearchItem) => React.ReactNode;
+}) {
+  const [open, setOpen] = useState(false);
+  const [q, setQ] = useState("");
+  const [sections, setSections] = useState<SearchSection[]>(initial);
+  const [active, setActive] = useState(0);
+  const [busy, setBusy] = useState(false);
+  const ref = useRef<HTMLDialogElement>(null);
+  const input = useRef<HTMLInputElement>(null);
+  const seq = useRef(0);
+  const listId = useId();
+  const flat = sections.flatMap((s) => s.items);
+  // The latest `search` and `initial`, read when needed: a consumer's inline arrow or array (a new one
+  // each render) must not restart the debounce or the effect.
+  const searchRef = useRef(search);
+  const initialRef = useRef(initial);
+  searchRef.current = search;
+  initialRef.current = initial;
+
+  const show = useCallback(() => {
+    const d = ref.current;
+    if (d && !d.open) { d.showModal(); setOpen(true); requestAnimationFrame(() => input.current?.focus()); }
+  }, []);
+  useEffect(() => {
+    if (!shortcut) return undefined;
+    const onKey = (e: KeyboardEvent) => {
+      const t = e.target as HTMLElement | null;
+      const typing = !!t && (t.isContentEditable || /^(INPUT|TEXTAREA|SELECT)$/.test(t.tagName));
+      // A handler that already took the key (the admin's own ⌘K palette) keeps it.
+      if (e.defaultPrevented) return;
+      if ((e.key === "k" && (e.metaKey || e.ctrlKey)) || (e.key === "/" && !typing)) { e.preventDefault(); show(); }
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [shortcut, show]);
+  useEffect(() => {
+    if (!open) return undefined;
+    const query = q.trim();
+    // Every change takes a new number: an answer still on its way for an older query is dropped,
+    // including when the box was just cleared (it used to land under an empty box).
+    const mine = ++seq.current;
+    if (!query) { setSections(initialRef.current); setActive(0); setBusy(false); return undefined; }
+    setBusy(true);
+    const t = setTimeout(async () => {
+      try {
+        const res = await searchRef.current(query);
+        if (mine === seq.current) { setSections(res); setActive(0); }
+      } catch {
+        if (mine === seq.current) setSections(NO_SECTIONS);
+      } finally {
+        if (mine === seq.current) setBusy(false);
+      }
+    }, 150);
+    return () => { clearTimeout(t); if (mine === seq.current) setBusy(false); };
+  }, [q, open]);
+  // Before anything is typed, show the latest suggestions the page passed.
+  useEffect(() => { if (open && !q.trim()) setSections(initial); }, [initial, open, q]);
+  // The highlighted result stays in view as the arrows move it.
+  useEffect(() => {
+    if (!open) return;
+    document.getElementById(`${listId}-${active}`)?.scrollIntoView({ block: "nearest" });
+  }, [active, open, listId]);
+
+  const go = (item: SearchItem | undefined) => { if (item) window.location.assign(item.href); };
+  let n = -1;
+  return (
+    <>
+      <a className="gb-search-trigger" href={fallbackHref ?? "#"} aria-label={label} aria-haspopup="dialog"
+        onClick={(e) => { e.preventDefault(); show(); }}>
+        <Icon name="search" size={18} />
+      </a>
+      <dialog ref={ref} className="ui-modal gb-search" aria-label={label}
+        onClose={() => { setOpen(false); setQ(""); }}
+        onClick={(e) => { if (e.target === e.currentTarget) e.currentTarget.close(); }}>
+        <div className="gb-search-box">
+          <Icon name="search" size={18} className="gb-search-icon" />
+          <input ref={input} className="gb-search-input" type="search" placeholder={placeholder} aria-label={label}
+            value={q} onChange={(e) => setQ(e.target.value)} role="combobox" aria-expanded="true" aria-controls={listId}
+            aria-activedescendant={flat[active] ? `${listId}-${active}` : undefined} autoComplete="off"
+            onKeyDown={(e) => {
+              if (e.key === "ArrowDown") { e.preventDefault(); setActive((a) => Math.min(a + 1, flat.length - 1)); }
+              else if (e.key === "ArrowUp") { e.preventDefault(); setActive((a) => Math.max(a - 1, 0)); }
+              // Enter that confirms an IME composition (Vietnamese, Chinese) is not "open".
+              else if (e.key === "Enter" && !e.nativeEvent.isComposing && e.keyCode !== 229) { e.preventDefault(); go(flat[active]); }
+            }} />
+        </div>
+        <p className="gb-search-empty" aria-live="polite">
+          {sections.every((s) => !s.items.length) && q.trim() ? (busy ? "Searching…" : "Nothing matches.") : ""}
+        </p>
+        <div className="gb-search-results" id={listId} role="listbox" aria-busy={busy}>
+          {sections.filter((s) => s.items.length).map((s) => (
+            <div key={s.title} className="gb-search-section" role="group" aria-label={s.title}>
+              <div className="gb-search-section-title">{s.title}</div>
+              {s.items.map((it) => {
+                n += 1;
+                const i = n;
+                return (
+                  <a key={`${s.title}-${it.href}`} id={`${listId}-${i}`} href={it.href} role="option" aria-selected={i === active}
+                    className={cx("gb-search-item", i === active && "is-active")} onMouseMove={() => setActive(i)}>
+                    {renderItem ? renderItem(it) : (<><span className="gb-search-item-title">{it.title}</span>{it.meta ? <span className="gb-search-item-meta">{it.meta}</span> : null}</>)}
+                  </a>
+                );
+              })}
+            </div>
+          ))}
+        </div>
+        <div className="gb-search-foot" aria-hidden="true"><span>↵ open</span><span>↑↓ move</span><span>esc</span></div>
+      </dialog>
+    </>
+  );
+}

package/src/icons.tsx

@@ -46,6 +46,8 @@ const P = {
   calendar: <><rect x="3" y="4.5" width="14" height="12.5" rx="1.8" /><path d="M3 8.5h14M7 3v3M13 3v3" /></>,
   clock: <><circle cx="10" cy="10" r="7" /><path d="M10 6v4l2.8 1.8" /></>,
   search: <><circle cx="8.8" cy="8.8" r="5.3" /><path d="M12.8 12.8 17 17" /></>,
+  moon: <path d="M15.6 12.4A6.2 6.2 0 0 1 7.6 4.4a6.2 6.2 0 1 0 8 8Z" />,
+  sun: <><circle cx="10" cy="10" r="3.2" /><path d="M10 2.6v1.8M10 15.6v1.8M2.6 10h1.8M15.6 10h1.8M4.8 4.8l1.3 1.3M13.9 13.9l1.3 1.3M4.8 15.2l1.3-1.3M13.9 6.1l1.3-1.3" /></>,
   link: <><path d="M8.6 11.4a3 3 0 0 0 4.2 0l2.6-2.6a3 3 0 0 0-4.2-4.2l-1 1" /><path d="M11.4 8.6a3 3 0 0 0-4.2 0l-2.6 2.6a3 3 0 0 0 4.2 4.2l1-1" /></>,
   sliders: <><path d="M3 5h14M3 10h14M3 15h14" /><circle cx="7" cy="5" r="1.6" /><circle cx="13" cy="10" r="1.6" /><circle cx="9" cy="15" r="1.6" /></>,
   settings: <><path d="M15.52 9.08 17.15 9.15 17.15 10.85 15.52 10.92 14.56 13.26 15.66 14.45 14.45 15.66 13.26 14.56 10.92 15.52 10.85 17.15 9.15 17.15 9.08 15.52 6.74 14.56 5.55 15.66 4.34 14.45 5.44 13.26 4.48 10.92 2.85 10.85 2.85 9.15 4.48 9.08 5.44 6.74 4.34 5.55 5.55 4.34 6.74 5.44 9.08 4.48 9.15 2.85 10.85 2.85 10.92 4.48 13.26 5.44 14.45 4.34 15.66 5.55 14.56 6.74Z" /><circle cx="10" cy="10" r="2.4" /></>,

package/src/index.ts

@@ -6,7 +6,12 @@ export { GemMark } from "./GemMark";
 export { AuthError, AuthField, AuthFoot, AuthForm, AuthHelp, AuthLayout, PasswordField, AuthSubmit } from "./auth";
 export { BrandLockup } from "./brand";
 export { TopbarSearch } from "./search";
-export { AccountMenu, AccountMenuItem, initialsOf } from "./account";
+export { AccountMenu, AccountMenuItem } from "./account";
+// From the plain module, not account.tsx ("use client"): a server component can call it.
+export { initialsOf } from "./initials";
 export { Menu, MenuItem, MenuSeparator } from "./menu";
 export { Icon, ICON_NAMES, type IconName } from "./icons";
 export { AssistantLauncher } from "./launcher";
+export { Avatar, avatarTone, Leaderboard, Podium, TopbarNav, type AvatarSize, type LeaderRow, type TopbarNavItem } from "./portal";
+export { Dialog, SearchDialog, type SearchItem, type SearchSection } from "./dialog";
+export { ThemeToggle, THEME_KEY, themeScript } from "./theme";

package/src/initials.ts

@@ -0,0 +1,14 @@
+/**
+ * A person's initials ("Minh Anh" → "MA", "Seller" → "SE"). Plain module, not "use client": server
+ * components (Avatar, Leaderboard) call it too. GemFeedback hit "Attempted to call initialsOf() from
+ * the server" when it lived only in account.tsx, a client module (03/10/2026).
+ */
+export function initialsOf(name: string): string {
+  // Words that start with a letter: "Seller 219" is "SE", not "S2" (GemFeedback's pseudonyms, 04/10/2026).
+  const all = name.trim().split(/\s+/).filter(Boolean);
+  const lettered = all.filter((w) => /^\p{L}/u.test(w));
+  const words = lettered.length ? lettered : all;
+  if (!words.length) return "?";
+  const letters = words.length === 1 ? words[0].slice(0, 2) : words[0][0] + words[words.length - 1][0];
+  return letters.toUpperCase();
+}