@gemboss/ui 0.6.5 → 0.7.1

package/README.md

@@ -100,7 +100,8 @@ The host registers `allowSide` with the provider, and every way into the panel c
 a "side" remembered in storage: a host without it gets the popup.
 
 The rail's way in is a `RailItem` with `className="gnav-assistant"`, linking to your full-screen
-address (the admin puts it in `RailBottom`, above Inbox). That class draws the tinted pill, and the
+address (the admin puts it in `RailBottom`, above Inbox). That class draws the iris-tinted pill (0.6.8; it
+was a mix of `--gemboss-primary`, grey once primary went near-black, so it read as a second selected row), and the
 working / answer-waiting dot the provider switches on through `<body>` classes. Leave
 `bodyClassPrefix` at its default so those rules apply. If the popup is what the person last used, a
 plain click on that link opens the popup instead of navigating.
@@ -233,7 +234,8 @@ New primitives, Polaris' shapes on GemBoss tokens (`kit-plain.css`; the admin us
 
 And four targets that measured under 44px at phone width are now 44: a compact text button's width, the bare input
 inside `gemboss-field--group`, the brand mark alone (≤460px), a toggle chip. A popup opened by an Escape handler no
-longer catches that same Escape (`openModal` listens from the next task). The rail item and segmented buttons draw the iris focus ring (they had
+longer catches that same Escape (0.6.7: `openModal` listens at once and skips only the keydown that opened it; 0.5.1
+listened from the next task, which on a busy page lost Escape or Tab pressed right after a popup opened). The rail item and segmented buttons draw the iris focus ring (they had
 none: the browser drew its own), the popup × too (it drew near-black); at phone width the chat composer is 16px (iOS
 zoomed it at 14) and the thread rail's "new chat" / collapse buttons are 44px under a fine pointer as well. Headings carry
 their own line-height (a wrapped 22px title overlapped itself on the 20px body line), a badge is a tint of the ink (it
@@ -353,10 +355,50 @@ The admin's "Search ⌘K" box for every surface, as a real form (works with no J
 
 - Submits `GET action?q=…` (`name` changes the parameter). `defaultValue` keeps the current query on the results page.
 - 36px under a mouse; 44px under a finger **and at phone width** (≤767px, 0.6.5: the kit's own controls use the same pair,
-  and with `pointer: coarse` alone a narrow window measured 36 and failed `tap_target_size`). ⌘K hint hidden on focus and below 460px.
+  and with `pointer: coarse` alone a narrow window measured 36 and failed `tap_target_size`). The input itself spans the
+  full 44 (0.6.6): the box is a form, so the input is what a finger has to hit. ⌘K hint hidden on focus and below 460px.
 - Shortcut on a page without React: `gembossUI.initSearch()` from `kit-plain.js` (⌘K / Ctrl+K and "/" focus it,
   Escape leaves it). "/" is ignored while another field has focus.
 
+## Public portal pieces (0.7.0)
+
+For public surfaces laid out like the GemPages Featurebase board (GemFeedback) and for GemCommunity's
+"Top contributors" (Chris, 04/10/2026: one leaderboard for both, with medals, in the kit).
+
+```tsx
+import { Avatar, Dialog, Leaderboard, Podium, SearchDialog, ThemeToggle, themeScript, TopbarNav } from "@gemboss/ui";
+
+<Topbar>
+  <div className="gemboss-topbar-start"><BrandLockup name="GemFeedback" href="/" />
+    <TopbarNav as={Link} items={[{ href: "/", label: "Feedback", active: true }, { href: "/roadmap", label: "Roadmap" }]} /></div>
+  <div className="gemboss-topbar-center" />
+  <div className="gemboss-topbar-end"><SearchDialog search={find} initial={trending} fallbackHref="/?q=" /><ThemeToggle /></div>
+</Topbar>
+<head><script dangerouslySetInnerHTML={{ __html: themeScript }} /></head>   // no white flash in dark
+<Leaderboard title="Most helpful" rows={[{ key, name, value, avatar, href }]} unit="votes" viewAll={{ href, label }} />
+<Dialog open={open} onClose={close} title="Sign in">…</Dialog>
+```
+
+- `TopbarNav`: section tabs in the topbar after the brand, the active one underlined on the topbar's
+  edge. A topbar holding tabs drops the centre search column (`:has(.gb-topnav)`), so the tabs get the
+  room. 36px under a mouse, 44px under a finger. Under 600px the tabs fold into one button naming the
+  open tab, with the tabs in a list under it (a row that scrolls sideways hid the third tab at 390).
+- `SearchDialog`: the topbar search button opening a 640px popup (Featurebase's, the admin's ⌘K).
+  `initial` before typing, `search(q)` while typing (150 ms debounce, latest answer wins); ↑ ↓ Enter
+  Esc; ⌘K / Ctrl+K and "/" open it. Results are links; without JavaScript the button goes to
+  `fallbackHref`.
+- `Dialog`: the kit's native `<dialog class="ui-modal">` (see kit-plain.css) driven by `open`; a
+  backdrop click closes it, focus returns to the opener.
+- `ThemeToggle` + `themeScript`: `data-theme="dark|light"` on <html>, remembered in localStorage
+  (`gemboss-theme`), the OS's choice until then. `portal.css` redefines every `--gemboss-*` colour under
+  `[data-theme="dark"]` (a test fails if a colour token is left out), so every kit class follows.
+  Opt-in: a surface without it (the admin) stays light.
+- `Avatar` (24 · 32 · 40 · 56): picture or initials on one of eight tones picked from the name.
+- `Leaderboard`: 🥇 🥈 🥉 then the rank, avatar, name, count; the leader's count in gold; nothing at
+  all when empty. `Podium`: the first three, second · first · third.
+- `initialsOf` moved to `initials.ts` (plain, not "use client") so server components can call it; it is
+  still exported from the package and from account.tsx.
+
 ## Report pages (0.4.0)
 
 Plain CSS in `kit-plain.css` for a numbers page written by hand (first user: gemnews `/admin`, 03/10/2026; that page moved to GemCommunity the same day, so gemnews no longer takes the package). The