@gemboss/ui 0.13.0 → 0.21.0

package/src/menu-layer.ts

@@ -0,0 +1,87 @@
+/**
+ * Menu layer (0.18.0): an open `details.ui-menu` shows its list in the browser's TOP LAYER (the `popover` API), placed
+ * with `position: fixed` against its ⋯ button, so no scrolling frame can cut it off. Before, the list was
+ * `position: absolute` inside the row, and a table's frame (`.ui-table-wrap`, overflow auto) clipped the menu of the
+ * last rows: GemFactory Members (#197) at 820 / 900 / 1280 showed half a menu and asked for a scroll INSIDE the table.
+ *
+ * - Below its button when it fits, above it when the room below is short and the room above is larger (a last row near
+ *   the bottom of the screen); `ui-menu--end` aligns its right edge with the button's; never closer than 8px to a
+ *   viewport edge; taller than the room → it scrolls inside (`max-height`).
+ * - It stays the details' DOM child: Tab order (button, then the items), Escape (initMenus / Menu close the details and
+ *   put focus back on the button), "a click on the menu is not a click on the row" (ROW_CONTROLS) all keep working.
+ * - It CLOSES when a scroll moves its button (the page, or a frame around the menu) or the window resizes: a fixed list
+ *   would otherwise float away from it. A scroll inside the list, or of something elsewhere (a log following its
+ *   output, a carousel), does not count.
+ * - No popover API (Safari < 17): nothing changes, the list stays absolute as before 0.18.0. No script: the same.
+ *
+ * kit-plain.js carries the same code for plain-HTML surfaces (`initMenuLayer()`, run by itself); collections-board.test.ts
+ * runs the same geometry tests against both, so they cannot drift apart.
+ */
+const GAP = 4;
+const EDGE = 8;
+
+export function canFloatMenus(): boolean {
+  return typeof HTMLElement !== "undefined" && Object.prototype.hasOwnProperty.call(HTMLElement.prototype, "popover");
+}
+
+const partsOf = (d: HTMLDetailsElement) => ({
+  list: d.querySelector<HTMLElement>(":scope > .ui-menu__list"),
+  button: d.querySelector<HTMLElement>(":scope > summary"),
+});
+
+/** Puts an OPEN menu's list in the top layer and places it against its button. Idempotent (a second call re-places). */
+export function floatMenu(d: HTMLDetailsElement): void {
+  const { list, button } = partsOf(d);
+  if (!list || !button || !d.open || !canFloatMenus()) return;
+  if (list.getAttribute("popover") !== "manual") list.setAttribute("popover", "manual");
+  if (!list.matches(":popover-open")) list.showPopover();
+  list.style.maxHeight = "";
+  list.style.left = "0px";
+  list.style.top = "0px";
+  const r = button.getBoundingClientRect();
+  const vw = document.documentElement.clientWidth, vh = window.innerHeight;
+  const w = list.offsetWidth, h = list.offsetHeight;
+  const below = vh - r.bottom - GAP - EDGE, above = r.top - GAP - EDGE;
+  let top: number;
+  if (h <= below || below >= above) {
+    top = r.bottom + GAP;
+    if (h > below) list.style.maxHeight = `${Math.max(below, 0)}px`;
+    list.dataset.side = "bottom";
+  } else {
+    if (h > above) list.style.maxHeight = `${Math.max(above, 0)}px`;
+    top = r.top - GAP - Math.min(h, above);
+    list.dataset.side = "top";
+  }
+  let left = d.classList.contains("ui-menu--end") ? r.right - w : r.left;
+  left = Math.max(EDGE, Math.min(left, vw - w - EDGE));
+  list.style.left = `${Math.round(left)}px`;
+  list.style.top = `${Math.round(top)}px`;
+}
+
+/** Takes a closed menu's list out of the top layer. The `popover` attribute stays: hidden until the next float. */
+export function sinkMenu(d: HTMLDetailsElement): void {
+  const { list } = partsOf(d);
+  if (list && list.hasAttribute("popover") && list.matches(":popover-open")) list.hidePopover();
+}
+
+/** Closes the floating menus a scroll or a resize would leave behind: a scroll closes only the menus whose button it
+ *  moves (the document, or a scroller that contains the menu), never because of a scroll inside a list, a log that
+ *  follows its output or a carousel elsewhere on the page. `target` null = a resize: every floating menu. */
+export function closeDetachedMenus(target: EventTarget | null): void {
+  const t = target as (Node & { closest?: (s: string) => Element | null }) | null;
+  if (t && t.closest && t.closest(".ui-menu__list")) return;
+  document.querySelectorAll<HTMLDetailsElement>("details.ui-menu[open]").forEach((d) => {
+    const list = d.querySelector<HTMLElement>(":scope > .ui-menu__list");
+    if (!list || !list.matches(":popover-open")) return;
+    if (!t || t === document || (t as Node).nodeType === 9 || (t as Node).contains(d)) d.open = false;
+  });
+}
+
+let listening = false;
+/** One scroll (capture) and one resize listener for every floating menu on the page, whatever the number of Menus. */
+export function listenForDetachedMenus(): void {
+  if (listening || typeof document === "undefined") return;
+  listening = true;
+  document.addEventListener("scroll", (e) => closeDetachedMenus(e.target), true);
+  window.addEventListener("resize", () => closeDetachedMenus(null));
+}

package/src/menu.tsx

@@ -6,8 +6,11 @@
 // fleet looks the same (§9.3). Where React hydrates, the menu closes itself like AccountMenu does: outside
 // click, Escape (focus back on the trigger), and a button row after its handler (review #3591: a React page
 // had no clean way to close it). The catalog renders its example from these components.
+// 0.18.0: the open list floats in the top layer (./menu-layer), so a table's scrolling frame no longer cuts it; it
+// closes when the page scrolls or the window resizes.
 import React, { useEffect, useRef } from "react";
 import { Icon } from "./icons";
+import { canFloatMenus, floatMenu, listenForDetachedMenus, sinkMenu } from "./menu-layer";
 
 /** The trigger is an icon button (`label` is its accessible name). `end` aligns the list to the right edge. */
 export function Menu({ label, icon, end, children, className }: {
@@ -23,13 +26,36 @@ export function Menu({ label, icon, end, children, className }: {
     if (!el) return undefined;
     const onDoc = (e: MouseEvent) => { if (el.open && !el.contains(e.target as Node)) el.open = false; };
     const onKey = (e: KeyboardEvent) => { if (e.key === "Escape" && el.open) { el.open = false; el.querySelector("summary")?.focus(); } };
+    const float = canFloatMenus();
+    const onToggle = () => { if (el.open) floatMenu(el); else sinkMenu(el); };
     document.addEventListener("click", onDoc);
     document.addEventListener("keydown", onKey);
-    return () => { document.removeEventListener("click", onDoc); document.removeEventListener("keydown", onKey); };
+    if (float) {
+      el.addEventListener("toggle", onToggle);
+      // One page-wide pair of listeners for all menus (a 100-row table has 100 Menus), not one per menu.
+      listenForDetachedMenus();
+      // Opened before this effect ran (a click during hydration): float it now.
+      if (el.open) floatMenu(el);
+    }
+    return () => {
+      document.removeEventListener("click", onDoc);
+      document.removeEventListener("keydown", onKey);
+      el.removeEventListener("toggle", onToggle);
+    };
   }, []);
+  // The summary toggles the menu itself and floats it in the same task, so the list is never painted inside the frame
+  // first (the details' own `toggle` event comes a task later). Nothing page-wide: kit-plain.js's `data-gb-menus` rule
+  // would hide a hand-written `details.ui-menu` on a React page that nobody floats.
+  const onSummary = (e: React.MouseEvent<HTMLElement>) => {
+    const el = ref.current;
+    if (!el || !canFloatMenus()) return;
+    e.preventDefault();
+    el.open = !el.open;
+    if (el.open) floatMenu(el); else sinkMenu(el);
+  };
   return (
     <details ref={ref} className={["ui-menu", end ? "ui-menu--end" : "", className ?? ""].filter(Boolean).join(" ")}>
-      <summary className="ui-btn ui-btn--icon" aria-label={label} title={label}>{icon ?? <Icon name="more" />}</summary>
+      <summary className="ui-btn ui-btn--icon" aria-label={label} title={label} onClick={onSummary}>{icon ?? <Icon name="more" />}</summary>
       <div className="ui-menu__list gemboss-popover-surface">{children}</div>
     </details>
   );

package/src/portal.css

@@ -1,139 +1 @@
-/* ═══ Portal pieces — @gemboss/ui 0.7.0 (04/10/2026) ════════════════════════════════════════════
-   TopbarNav, Avatar, Leaderboard, Podium (portal.tsx), SearchDialog (dialog.tsx), ThemeToggle (theme.tsx).
-   Component rules only, no rule on :root, html or body (a test holds that): a surface with its own skin
-   can take this file with gemboss-tokens.css alone. The dark palette is theme-dark.css. */
-
-/* ── 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; } }
-
-/* Text for screen readers only ("Rank 1:", ", you"). Its own rule, not ui.css's .ui-sr-only: a surface that
-   takes portal.css without the rest of the kit (GemCommunity) would otherwise print it on the page. */
-.gb-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0);
-  white-space: nowrap; border: 0; }
-
-/* ── 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; }
-/* The viewer's own row and podium slot: the selected tint, never a colour of its own. */
-.gb-leaderboard-row.is-current > .gb-leaderboard-link { background: var(--gemboss-active-bg); }
-.gb-leaderboard-badge { flex: 0 1 auto; min-width: 0; overflow: hidden; }
-.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; }
-/* A podium with fewer than three people keeps its place: second and third stay empty columns. */
-.gb-podium-slot.is-empty { visibility: hidden; }
-.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); }
-.gb-podium-slot.is-current .gb-podium-link { border-color: var(--gemboss-text-strong); background: var(--gemboss-active-bg); }
-
-/* ── 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; } }
+.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}.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}}.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%}.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}}.gb-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.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}.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}.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-row.is-current>.gb-leaderboard-link{background:var(--gemboss-active-bg)}.gb-leaderboard-badge{flex:0 1 auto;min-width:0;overflow:hidden}.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}.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.is-empty{visibility:hidden}.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)}.gb-podium-slot.is-current .gb-podium-link{border-color:var(--gemboss-text-strong);background:var(--gemboss-active-bg)}.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}}

package/src/reactions-data.ts

@@ -0,0 +1,59 @@
+/**
+ * Reactions: the emoji a person can put on a message, a comment or a post — one set and one look for the fleet
+ * (@gemboss/ui, Chris 06/10/2026: "reaction các thứ comment nên chuẩn hoá một kiểu, bên gemcare cũng có, nên đưa
+ * vào gemboss ui"). The set is GemCare's team chat set, moved here unchanged: it was built from Lark's, with search words
+ * per emoji. A server validates against `isReactionEmoji` and refuses anything else, so a client with a stale copy can
+ * only fail a click, never store a new kind of emoji.
+ *
+ * Plain TypeScript (no React): a server, a plain-HTML surface and the React component all import it.
+ */
+
+/** [group name, [emoji, search words][]][] — the picker draws the groups in this order. */
+export const REACTION_GROUPS: ReadonlyArray<readonly [string, ReadonlyArray<readonly [string, string]>]> = [
+  ["Smileys", [["😀", "grin smile happy"], ["😃", "smile happy"], ["😄", "smile laugh happy"], ["😁", "grin beam"], ["😆", "laugh squint"], ["😅", "sweat smile relief"], ["😂", "joy tears laugh lol"], ["🤣", "rofl rolling laugh"], ["😊", "blush smile"], ["😇", "innocent halo"], ["🙂", "slight smile ok"], ["😉", "wink"], ["😍", "heart eyes love"], ["🥰", "love hearts"], ["😘", "kiss"], ["😋", "yum tasty"], ["😜", "wink tongue"], ["🤪", "zany crazy"], ["🤗", "hug"], ["🤭", "oops giggle"], ["🤔", "think hmm"], ["🤨", "raised eyebrow doubt"], ["😐", "neutral"], ["😶", "no words"], ["🙄", "eye roll"], ["😏", "smirk"], ["😬", "grimace awkward"], ["😌", "relieved"], ["😴", "sleep tired"], ["😷", "mask sick"], ["🤯", "mind blown"], ["🥳", "party celebrate"], ["😎", "cool sunglasses"], ["🤓", "nerd"], ["😕", "confused"], ["😟", "worried"], ["😮", "wow surprised"], ["😲", "astonished"], ["😳", "flushed embarrassed"], ["🥺", "pleading please"], ["😢", "cry sad"], ["😭", "sob crying"], ["😱", "scream shock"], ["😤", "huff frustrated"], ["😡", "angry mad"], ["🤬", "swear"], ["💀", "dead skull"], ["🫠", "melting"], ["🫡", "salute"]]],
+  ["Hands", [["👍", "like thumbs up yes ok"], ["👎", "dislike thumbs down no"], ["👌", "ok perfect"], ["✌️", "peace victory"], ["🤞", "fingers crossed luck"], ["🤟", "love you"], ["🤘", "rock"], ["👏", "clap applause"], ["🙌", "raise hands hooray"], ["👐", "open hands"], ["🤝", "handshake deal"], ["🙏", "thanks please pray"], ["💪", "strong muscle"], ["👀", "eyes looking"], ["🫶", "heart hands"], ["✍️", "writing"], ["👋", "wave hi bye"], ["☝️", "point up"], ["👇", "point down"], ["👉", "point right"], ["👈", "point left"], ["🤙", "call me"], ["🖐️", "stop hand"], ["🤌", "pinched"]]],
+  ["Marks", [["❤️", "heart love red"], ["🧡", "orange heart"], ["💛", "yellow heart"], ["💚", "green heart"], ["💙", "blue heart"], ["💜", "purple heart"], ["🖤", "black heart"], ["💯", "hundred perfect"], ["✅", "done check yes"], ["☑️", "checked box"], ["✔️", "check mark"], ["❌", "no cross wrong"], ["❗", "important exclamation"], ["❓", "question"], ["⚠️", "warning"], ["🔥", "fire hot lit"], ["⭐", "star"], ["✨", "sparkles new"], ["💡", "idea"], ["📌", "pin"], ["🚀", "rocket ship launch"], ["🎯", "target goal"], ["🆗", "ok button"], ["🆕", "new"], ["🔴", "red circle urgent"], ["🟢", "green circle"], ["🟡", "yellow circle"], ["➕", "plus one add"]]],
+  ["Work", [["🎉", "party tada celebrate"], ["🎊", "confetti"], ["🏆", "trophy win"], ["🥇", "gold medal first"], ["🎁", "gift"], ["☕", "coffee"], ["🍻", "cheers beer"], ["🍕", "pizza"], ["📈", "chart up growth"], ["📉", "chart down"], ["💰", "money"], ["🛒", "cart shop"], ["📦", "package order shipping"], ["🧾", "receipt invoice"], ["📝", "note memo"], ["📅", "calendar date"], ["⏰", "alarm time"], ["⏳", "waiting hourglass"], ["🔧", "fix wrench"], ["🐛", "bug"], ["🧪", "test"], ["🔍", "search look"], ["💬", "comment chat"], ["📞", "call phone"], ["📧", "email"], ["🔒", "lock private"], ["🔗", "link"], ["🖼️", "image picture"], ["💻", "laptop computer"], ["📱", "phone mobile"], ["🙈", "see no evil oops"], ["🙉", "hear no evil"], ["🤖", "robot bot ai"], ["🧠", "brain"], ["👑", "crown vip"], ["💎", "gem diamond"]]],
+];
+
+/** Every emoji a person may react with, in picker order. */
+export const REACTION_EMOJI: readonly string[] = REACTION_GROUPS.flatMap(([, items]) => items.map(([e]) => e));
+const KEYS = new Map<string, string>(REACTION_GROUPS.flatMap(([, items]) => items.map(([e, k]) => [e, k] as [string, string])));
+
+/** The quick pair shown on hover next to "Add reaction" (GemCare's 👍 Like and ✅ Done). */
+export const QUICK_REACTIONS: readonly string[] = ["👍", "✅"];
+
+export function isReactionEmoji(e: unknown): e is string {
+  return typeof e === "string" && KEYS.has(e);
+}
+
+/** The search words of an emoji ("" for one outside the set). */
+export function reactionWords(e: string): string {
+  return KEYS.get(e) ?? "";
+}
+
+/** Emoji whose search words contain the query (any case); all of them for an empty query. */
+export function searchReactions(query: string): string[] {
+  const t = query.trim().toLowerCase();
+  return t ? REACTION_EMOJI.filter((e) => KEYS.get(e)!.includes(t)) : [...REACTION_EMOJI];
+}
+
+/** One emoji on one thing: who put it there. `mine` is the viewer's own. */
+export type Reaction = { emoji: string; names: string[]; mine: boolean };
+
+/** The chip's words: the names, not a count ("👍 Linh, Quan" says who agreed; Lark draws it so), two then "+n". */
+export function reactionLabel(names: readonly string[]): string {
+  return names.length > 2 ? `${names.slice(0, 2).join(", ")} +${names.length - 2}` : names.join(", ");
+}
+
+/** The guess drawn at once on a click, before the server answers (its answer replaces it): add yourself, or take yourself
+ *  off and drop the chip when you were the last. */
+export function toggleReaction(list: readonly Reaction[], emoji: string, myName = "You"): Reaction[] {
+  const at = list.findIndex((r) => r.emoji === emoji);
+  if (at < 0) return [...list, { emoji, names: [myName], mine: true }];
+  const r = list[at];
+  if (!r.mine) return list.map((x, i) => (i === at ? { ...x, names: [...x.names, myName], mine: true } : x));
+  const idx = r.names.lastIndexOf(myName);
+  const left = idx >= 0 ? r.names.filter((_, i) => i !== idx) : r.names.slice(0, -1);
+  return left.length ? list.map((x, i) => (i === at ? { ...x, names: left, mine: false } : x)) : list.filter((_, i) => i !== at);
+}

package/src/reactions.css

@@ -0,0 +1 @@
+.ui-reactions{display:grid;gap:4px;min-width:0}.ui-reactions__row{display:flex;flex-wrap:wrap;align-items:center;gap:0 8px;min-width:0}.ui-reaction{display:inline-flex;align-items:center;min-height:44px;min-width:44px;padding:9px 0;border:0;background:none;cursor:pointer;font:inherit;color:inherit;max-width:100%}.ui-reaction__emoji,.ui-reaction__names{display:inline-flex;align-items:center;height:26px;box-sizing:border-box;border:1px solid var(--ui-border);background:var(--ui-surface)}.ui-reaction__emoji{padding:0 4px 0 6px;border-right:0;border-radius:999px 0 0 999px;font-size:14px;line-height:1}.ui-reaction__names{padding:0 8px 0 4px;border-left:0;border-radius:0 999px 999px 0;min-width:0;max-width:180px;font-size:var(--ui-fs-caption);color:var(--ui-text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ui-reaction:hover :is(.ui-reaction__emoji,.ui-reaction__names){background:var(--ui-surface-2)}.ui-reaction:focus-visible{outline:none}.ui-reaction:focus-visible :is(.ui-reaction__emoji,.ui-reaction__names){outline:2px solid var(--ui-focus);outline-offset:1px}.ui-reaction.is-mine :is(.ui-reaction__emoji,.ui-reaction__names){border-color:var(--ui-accent);background:var(--ui-accent-soft);color:var(--ui-accent-strong)}.ui-reaction-add{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:0;border-radius:var(--ui-radius-md);background:none;color:var(--ui-text-muted);cursor:pointer}.ui-reaction-add:hover,.ui-reaction-add[aria-expanded=true]{background:var(--ui-surface-2);color:inherit}.ui-reaction-add:focus-visible{outline:2px solid var(--ui-focus);outline-offset:-2px}.ui-reaction-picker{display:grid;gap:6px;width:420px;max-width:100%;box-sizing:border-box;padding:8px;border:1px solid var(--ui-border);border-radius:var(--ui-radius-md);background:var(--ui-surface);box-shadow:var(--ui-card-shadow)}.ui-reaction-picker__search{width:100%;box-sizing:border-box}.ui-reaction-picker__body{max-height:300px;overflow-y:auto;overscroll-behavior:contain;display:grid;gap:2px}.ui-reaction-picker__head{margin:6px 4px 2px;font-size:var(--ui-fs-caption);color:var(--ui-text-muted)}.ui-reaction-picker__grid{display:grid;grid-template-columns:repeat(auto-fill,44px);justify-content:start}.ui-reaction-picker__btn{width:44px;height:44px;padding:0;border:1px solid transparent;border-radius:var(--ui-radius-sm);background:transparent;cursor:pointer;font-size:22px;line-height:1}.ui-reaction-picker__btn:hover{background:var(--ui-surface-2)}.ui-reaction-picker__btn:focus-visible{outline:2px solid var(--ui-focus);outline-offset:-2px}.ui-reaction-picker__btn[aria-pressed=true]{border-color:var(--ui-accent);background:var(--ui-accent-soft)}.ui-reaction-picker__empty{margin:8px 4px;color:var(--ui-text-muted)}

package/src/reactions.tsx

@@ -0,0 +1,139 @@
+"use client";
+/**
+ * Reactions — @gemboss/ui (unreleased). One look and one behaviour for emoji reactions everywhere in the fleet: GemCare's team
+ * chat (where this was first built, `public/assets/inbox.js`), GemFeedback's requests and comments, and whatever comes
+ * next. The data (which emoji, their search words, the optimistic toggle) is `./reactions-data`; this file is the React
+ * face of it; `reactions.css` (its own entry: `import "@gemboss/ui/reactions.css"`) is the look, and a plain-HTML surface writes the same classes (README "Reactions").
+ *
+ * What it draws:
+ * - the chips already put: emoji + the NAMES of who put it ("👍 Linh, Quan +2"; Lark's way: names say who agreed, a
+ *   count does not), the viewer's own outlined and filled (not only coloured: two chips that differ only in hue look the
+ *   same to a colour-blind reader). No chips, no row.
+ * - "Add reaction": opens the picker IN FLOW under the row (not floating: a layer in a scrolling column has to fight the
+ *   bottom edge; a row in flow is scrolled to by the browser). Frequently used first (this browser's, else the quick
+ *   pair), then the groups; search by words; arrows move in the grid, Enter in the search picks the first, Escape closes
+ *   and gives focus back to the button.
+ *
+ * Each target is 44px (a control, CLAUDE.md §9.1) while the visible pill is 26px: transparent padding carries the rest,
+ * so a message with reactions does not grow a whole line.
+ */
+import React, { useEffect, useId, useRef, useState } from "react";
+import { Icon } from "./icons";
+import { QUICK_REACTIONS, REACTION_GROUPS, reactionLabel, reactionWords, searchReactions, type Reaction } from "./reactions-data";
+
+const RECENT_KEY = "gemboss-ui:reactions-recent";
+const RECENT_MAX = 9;
+
+function readRecent(): string[] {
+  try {
+    const v = JSON.parse(globalThis.localStorage?.getItem(RECENT_KEY) ?? "[]");
+    return Array.isArray(v) ? v.filter((e): e is string => typeof e === "string" && reactionWords(e) !== "").slice(0, RECENT_MAX) : [];
+  } catch { return []; }
+}
+function rememberRecent(emoji: string): void {
+  try {
+    const next = [emoji, ...readRecent().filter((e) => e !== emoji)].slice(0, RECENT_MAX);
+    globalThis.localStorage?.setItem(RECENT_KEY, JSON.stringify(next));
+  } catch { /* private window, storage off: the picker just shows the quick pair */ }
+}
+
+export type ReactionsProps = {
+  items: readonly Reaction[];
+  /** Put or take back the viewer's emoji. The caller decides add or remove from its own state (a click on a chip that is
+   *  `mine` takes it back); `toggleReaction` is the optimistic guess to draw before the server answers. */
+  onToggle?: (emoji: string) => void;
+  /** Who or what is reacted to, for screen readers: "the comment from Linh". */
+  target?: string;
+  /** Show "Add reaction" (default true). A signed-out reader sees the chips only. */
+  canReact?: boolean;
+  /** The text a signed-out reader's click should lead to instead (e.g. open sign-in); chips are buttons either way. */
+  onSignIn?: () => void;
+  className?: string;
+};
+
+export function Reactions({ items, onToggle, target = "this", canReact = true, onSignIn, className }: ReactionsProps) {
+  const [open, setOpen] = useState(false);
+  const addRef = useRef<HTMLButtonElement>(null);
+  const pickerId = useId();
+  const act = (emoji: string) => {
+    if (!canReact) { onSignIn?.(); return; }
+    if (!items.some((r) => r.emoji === emoji && r.mine)) rememberRecent(emoji);
+    onToggle?.(emoji);
+  };
+  if (!items.length && !canReact) return null;
+  return (
+    <div className={["ui-reactions", className].filter(Boolean).join(" ")}>
+      <div className="ui-reactions__row">
+        {items.map((r) => (
+          <button key={r.emoji} type="button" className={`ui-reaction${r.mine ? " is-mine" : ""}`} aria-pressed={r.mine}
+            title={r.names.join(", ")} aria-label={`${r.emoji}, ${r.names.join(", ")}. ${r.mine ? "Remove yours" : "Add yours"}`}
+            onClick={() => act(r.emoji)}>
+            <span className="ui-reaction__emoji">{r.emoji}</span>
+            <span className="ui-reaction__names">{reactionLabel(r.names)}</span>
+          </button>
+        ))}
+        {canReact ? (
+          <button ref={addRef} type="button" className="ui-reaction-add" title="Add reaction" aria-label={`Add a reaction to ${target}`}
+            aria-expanded={open} aria-controls={open ? pickerId : undefined} onClick={() => setOpen((o) => !o)}>
+            <Icon name="reaction" size={18} />
+          </button>
+        ) : null}
+      </div>
+      {open ? (
+        <ReactionPicker id={pickerId} items={items}
+          onPick={(emoji) => { setOpen(false); act(emoji); addRef.current?.focus(); }}
+          onClose={() => { setOpen(false); addRef.current?.focus(); }} />
+      ) : null}
+    </div>
+  );
+}
+
+export function ReactionPicker({ items, onPick, onClose, id }: { items: readonly Reaction[]; onPick: (emoji: string) => void; onClose: () => void; id?: string }) {
+  const [q, setQ] = useState("");
+  const [recent, setRecent] = useState<readonly string[]>(QUICK_REACTIONS);
+  const search = useRef<HTMLInputElement>(null);
+  const body = useRef<HTMLDivElement>(null);
+  // Storage is read after mount: the server render and the first client render must draw the same picker.
+  useEffect(() => { const r = readRecent(); if (r.length) setRecent(r); search.current?.focus(); }, []);
+  const mine = (e: string) => items.some((r) => r.emoji === e && r.mine);
+  const btn = (e: string) => (
+    <button key={e} type="button" className="ui-reaction-picker__btn" title={reactionWords(e).split(" ")[0] || e}
+      aria-label={`${mine(e) ? "Remove" : "Add"} ${e} ${reactionWords(e)}`.trim()} aria-pressed={mine(e)} onClick={() => onPick(e)}>{e}</button>
+  );
+  const grid = (list: readonly string[]) => <div className="ui-reaction-picker__grid">{list.map(btn)}</div>;
+  const found = q.trim() ? searchReactions(q) : null;
+  const onKeyDown = (ev: React.KeyboardEvent) => {
+    if (ev.key === "Escape") { ev.preventDefault(); ev.stopPropagation(); onClose(); return; }
+    const all = [...(body.current?.querySelectorAll<HTMLButtonElement>(".ui-reaction-picker__btn") ?? [])];
+    if (ev.target === search.current) {
+      if (ev.key === "Enter") { ev.preventDefault(); all[0]?.click(); }
+      if (ev.key === "ArrowDown") { ev.preventDefault(); all[0]?.focus(); }
+      return;
+    }
+    const at = all.indexOf(document.activeElement as HTMLButtonElement);
+    if (at < 0) return;
+    const gridEl = body.current?.querySelector(".ui-reaction-picker__grid");
+    const cols = Math.max(1, Math.round((gridEl?.getBoundingClientRect().width ?? 44) / 44));
+    const step = ({ ArrowRight: 1, ArrowLeft: -1, ArrowDown: cols, ArrowUp: -cols } as Record<string, number>)[ev.key];
+    if (!step) return;
+    ev.preventDefault();
+    if (at + step < 0) { search.current?.focus(); return; }
+    all[Math.min(all.length - 1, at + step)]?.focus();
+  };
+  return (
+    <div id={id} className="ui-reaction-picker" role="group" aria-label="Pick a reaction" onKeyDown={onKeyDown}>
+      <input ref={search} type="search" className="gemboss-field ui-reaction-picker__search" placeholder="Search emoji" aria-label="Search emoji"
+        autoComplete="off" value={q} onChange={(e) => setQ(e.target.value)} />
+      <div ref={body} className="ui-reaction-picker__body">
+        {found ? (found.length ? grid(found) : <p className="ui-reaction-picker__empty">No emoji matches.</p>) : (
+          <>
+            <p className="ui-reaction-picker__head">Frequently used</p>{grid(recent)}
+            {REACTION_GROUPS.map(([name, list]) => (
+              <React.Fragment key={name}><p className="ui-reaction-picker__head">{name}</p>{grid(list.map(([e]) => e))}</React.Fragment>
+            ))}
+          </>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/resource-list-select.tsx

@@ -0,0 +1,72 @@
+"use client";
+/**
+ * SelectableResourceList (0.16.0): a Resource list whose items can be selected and acted on in bulk, with the IndexTable's
+ * rules (README "Collections"): a checkbox per item, first in its media slot (Polaris ResourceItem's place); Shift+click
+ * takes the range from the last box clicked; Escape clears while focus is in the list (an open ⋯ menu or dialog takes it
+ * first); the bulk actions get the selected ids in the list's order. The whole row still opens the item (the title's
+ * link covers it, no script); a click on the checkbox only selects.
+ *
+ * One difference from IndexTable, on purpose: the bar is ALWAYS there, above the list ("0 selected", actions disabled).
+ * A table has a header for the bar to cover; a list has none, so a bar that appears on the first check pushes every row
+ * down under the finger that is choosing them (talent-radar /pool measured it: 74px at 1280, 194px at 390, 03/10/2026).
+ *
+ * Its own client module, like ./index-table (the selection rules and the bar are ./selection, shared with it):
+ * `ResourceList` (./collections) stays plain, so a server component renders it, and nothing the admin imports pulls
+ * this in. Items are plain data plus rendered nodes, so a server page can render
+ * it too; `onAction` and `onSelectionChange` need a client parent.
+ */
+import React from "react";
+import { CollectionSkeleton, ResourceItem, ResourceList, type ResourceItemProps, type ResourceListProps } from "./collections";
+import { BulkBar, useSelection, type BulkAction } from "./selection";
+
+/** An item: ResourceItem's props, `id` required. The id is the selection key only; it is not put on the `li` (two lists
+ *  of the same records on one page, or an id like "main", would collide in the DOM). */
+export type SelectableResourceItem = Omit<ResourceItemProps, "selected" | "check" | "id"> & { id: string };
+
+export type SelectableResourceListProps = Omit<ResourceListProps, "children"> & {
+  items: SelectableResourceItem[];
+  /** What to do with the selection. The checkboxes exist only with at least one (a checkbox that does nothing is inert). */
+  bulkActions: BulkAction[];
+  /** Controlled selection; leave both out and the list keeps it. */
+  selected?: string[];
+  onSelectionChange?: (ids: string[]) => void;
+  /** "3 selected": `(n) => …`. Shown at 0 too. */
+  selectedLabel?: (n: number) => React.ReactNode;
+  selectAllLabel?: string;
+  /** The link element for every item's title (a Next `Link` from a client module). An item's own `linkAs` wins. */
+  linkAs?: React.ElementType;
+};
+
+export function SelectableResourceList({ items, bulkActions, selected, onSelectionChange, selectedLabel = (n) => `${n} selected`,
+  selectAllLabel = "Select all", linkAs, label, flush, state = "ready", stateSlot, loadingRows, loadingMedia = "thumbnail", className }: SelectableResourceListProps) {
+  const selectable = bulkActions.length > 0;
+  const showItems = state === "ready" || state === "busy";
+  const ids = showItems ? items.map((it) => it.id) : [];
+  // Own or controlled ids, Shift range, select-all, Escape (./selection: the same rules as IndexTable).
+  const { rootRef, selSet, chosen, all, some, toggle, toggleAll } = useSelection<HTMLDivElement>(ids, selected, onSelectionChange, selectable);
+
+  const list = state === "loading"
+    // The skeleton keeps a box's place, so the rows do not move right when they arrive.
+    ? <CollectionSkeleton pattern="list" rows={loadingRows} media={loadingMedia} label={label} flush={flush} check={selectable} />
+    : <ResourceList label={label} flush={flush} state={state} stateSlot={stateSlot} className={className}>
+      {items.map(({ id, ...it }, i) => {
+        const on = selSet.has(id);
+        const name = it.titleText ?? (typeof it.title === "string" ? it.title : id);
+        const check = selectable ? (
+          <label className="ui-list__check">
+            <input type="checkbox" checked={on} aria-label={`Select ${name}`} onChange={(e) => toggle(i, e.target.checked, (e.nativeEvent as MouseEvent).shiftKey)} />
+          </label>
+        ) : null;
+        return <ResourceItem key={id} {...it} linkAs={it.linkAs ?? linkAs} selected={on} check={check} />;
+      })}
+    </ResourceList>;
+  if (!selectable) return list;
+
+  return (
+    <div className="ui-resource" ref={rootRef}>
+      <BulkBar actions={bulkActions} chosen={chosen} all={all} some={some} onToggleAll={toggleAll} selectedLabel={selectedLabel} selectAllLabel={selectAllLabel}
+        idle="disable" boxDisabled={!ids.length} />
+      {list}
+    </div>
+  );
+}

package/src/segmented-click.ts

@@ -0,0 +1,20 @@
+/**
+ * What a click on one segment MEANS.
+ *
+ * A `.ts` beside the `.tsx` for the same reason `zoom-about.ts` sits beside `DesignCanvas.tsx`:
+ * `node:test` strips types but does NOT transform JSX, so anything importable from a component file
+ * is untestable here. A one-line decision left inline in a handler is a decision with no test.
+ *
+ * And it IS a decision: a click on the ALREADY-ACTIVE option clears when the caller offered
+ * `onClear`, and re-selects when it did not. Backwards, and you get a control that cannot be unset —
+ * which is exactly the behaviour the element inspector kept its own private copy of `Segmented` for.
+ */
+export function segmentedClick<T extends string>(
+  active: boolean,
+  value: T,
+  onChange: (v: T) => void,
+  onClear?: () => void,
+): void {
+  if (active && onClear) { onClear(); return; }
+  onChange(value);
+}