@gemboss/ui 0.12.0 → 0.21.0

package/src/gemboss-field.css

@@ -1,112 +1 @@
-/* THE ONE TEXT FIELD, in a file of its own.
- *
- * It lives apart from gemboss-shell.css because the shell sheet is loaded ONLY by `app/app/layout.tsx`
- * — the /app subtree — while `/login` and `/try` are deliberately lean pages outside it. Adding the
- * class on either changed NOTHING, because neither loads the shell. Measured on prod 23/09/2026 (the
- * build before the change): /login drew its own field family in styled-jsx — 44px, radius 8, 14px,
- * border rgb(201,204,207) — and /try's textarea was the native box, radius 0. An earlier version of
- * this comment said both stayed "21px, unrounded, native border"; that was one field on /try written
- * up as if it described both pages. A few hundred bytes of field rules can go where the shell cannot.
- */
-/* ── ONE text field for every hand-written <input>/<select> in the admin ─────────────────────────
-   Measured 22/09/2026 across every /app route: the 21 Polaris fields were one shape (32px, radius 8,
-   the input-border token, 13px → 16px on a phone), and the 13 hand-written ones were FIVE shapes —
-   heights 33/36/38/42/44, radii 8/9/10, one warm off-token border, and every one of them still 13-14px
-   on a phone, which is the size iOS Safari ZOOMS the page for the moment you tap the field. This is the
-   Polaris field, written once: a custom field wears `gemboss-field` and nothing else decides its look.
-   Its touch height lives in the pointer:coarse block with the Polaris rule it mirrors. */
-/* …and the same box on a PRESSABLE control. Three buttons wore `gemboss-field` itself — the campaign
-   compare's "↻ Refresh", which sits in a row between two selects that wear it, and the inspector's ✕
-   and ＋ — because what they wanted was this box, lined up with the fields beside them. But a button
-   is not a text field, and the class that MEANS "text field" should not be what says so: it makes the
-   ratchet count a button as a converted field, and it invites the next person to put it on anything
-   box-shaped. One box, two names, declared together so they can never drift apart. */
-.gemboss-field,
-.gemboss-control {
-  box-sizing: border-box; height: 32px; min-width: 0; padding: 0 12px;
-  font: inherit; font-size: var(--p-font-size-325, 13px); line-height: 20px;
-  color: var(--p-color-text, var(--gemboss-field-ink));
-  background-color: var(--p-color-input-bg-surface, var(--gemboss-field-bg));
-  border: 1px solid var(--p-color-input-border, var(--gemboss-field-line));
-  border-radius: var(--p-border-radius-200, 8px);
-}
-/* WebKit draws `input[type=search]` as `-webkit-appearance: searchfield`: its own padding and rounding, so in Safari
-   (macOS and iOS, the platform the 16px rule exists for) a search box did not match the fields beside it. Same box for
-   every text type; the clear button stays. (GemFactory #98 review, 01/10/2026.) */
-input[type="search"]:is(.gemboss-field, .gemboss-field__bare) { -webkit-appearance: none; appearance: none; }
-.gemboss-field::placeholder { color: var(--p-color-text-secondary, var(--gemboss-field-placeholder)); }
-/* A NARROW field — the inspector's T/R/B/L boxes and its number spinners are 40-68px wide, and the
-   shared 12px side padding left 38px of content box for a three-digit value (measured in Chromium:
-   clientWidth 38, scrollWidth 58 for "120"). Same box, tighter lane. */
-/* A field that is a 44px target at EVERY width, not only on a phone. Some surfaces asked for that in
-   their own inline style (a popup's `minHeight: 44`), and that intent is theirs to keep — it moves here
-   so the look still comes from one place. */
-.gemboss-field--tall { min-height: 44px; }
-.gemboss-field--narrow { padding: 0 6px; appearance: textfield; -moz-appearance: textfield; }
-/* …and no spinner: the arrows eat ~11px of a 40px box, so "120" was still cut with the tighter
-   padding (measured: clientWidth 38, scrollWidth 49). The value is typed here, not stepped. */
-.gemboss-field--narrow::-webkit-outer-spin-button,
-.gemboss-field--narrow::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
-.gemboss-field:hover:not(:disabled),
-.gemboss-control:hover:not(:disabled) { border-color: var(--p-color-input-border-hover, var(--gemboss-field-line-hover)); background-color: var(--p-color-input-bg-surface-hover, var(--gemboss-field-bg-hover)); }
-.gemboss-field:focus-visible,
-.gemboss-control:focus-visible { outline: 2px solid var(--p-color-border-focus, var(--ui-focus, #5661f5)); outline-offset: 1px; border-color: var(--p-color-input-border-active, var(--gemboss-field-line-active)); }
-.gemboss-field:disabled,
-.gemboss-control:disabled { opacity: 0.5; cursor: not-allowed; }
-/* Polaris' own breakpoint for the same switch: under it a field reads 16px, so iOS does not zoom. */
-/* On a PHONE-WIDTH screen a field is 16px (iOS does not zoom) and 44px tall (§9.1) — by WIDTH, not by
-   pointer. A desktop browser resized to 320px still reports `pointer: fine`, and the page-revision
-   gate measures the publication select's height at 320px: dropping that panel's own `min-height: 44px`
-   in favour of the shared class left it 32px there, and the gate went red (CI of #3201). */
-/* Cả hai tên nhận CÙNG hai thứ ở khổ điện thoại. Bản đầu chỉ cho `--control` chiều cao, không cho
-   cỡ chữ — và 16px ở đây KHÔNG phải để chặn iOS zoom (một cái nút không zoom) mà để một hàng
-   control đọc ra MỘT họ: nút Refresh của compare view ngồi giữa hai select, và ở 13px giữa hai
-   ô 16px thì nó là một cỡ chữ thứ hai trong cùng một hàng (/code-review, 23/09/2026). */
-@media (max-width: 47.9975em) { .gemboss-field, .gemboss-control { font-size: 16px; min-height: 44px; } }
-/* A multi-line field: Polaris' multiline TextField — the same box, its height from `rows`. */
-textarea.gemboss-field { height: auto; padding: 6px 12px; resize: vertical; }
-/* A field made of parts — a fixed prefix ("/pages/") or a colour swatch beside the text. The WRAPPER
-   wears `gemboss-field gemboss-field--group` and is the box; the text inside wears `gemboss-field__bare`
-   and draws nothing of its own, taking the box's font size (13px, 16px on a phone) by inheritance. */
-/* The GROUP grows to whatever it holds: `gemboss-field` fixes a 32px height, and a panel that asks
-   for 44px targets (the section content panel does, and `page-saved-continuation-fixture` measures
-   EVERY control there) puts a 44px input inside this box. Fixing the group at 32 and shrinking the
-   input to fit clipped it and broke that gate; the box follows its content instead. */
-.gemboss-field--group { display: flex; align-items: center; gap: 6px; height: auto; min-height: 32px; padding-right: 0; overflow: hidden; }
-/* The phone floor again, for the GROUP. `min-height: 32px` above is the same specificity as the
-   `.gemboss-field` rule in the media query and comes LATER in the file, so it won the cascade at
-   phone width and quietly took the group back down to 32px — the URL-handle and background-colour
-   rows, the two places a field is made of parts. A media query does not outrank anything; source
-   order decided it, and the fix is to say it again after. (/code-review, 23/09/2026.) */
-@media (max-width: 47.9975em) { .gemboss-field--group { min-height: 44px; } }
-.gemboss-field--group:focus-within { outline: 2px solid var(--p-color-border-focus, var(--ui-focus, #5661f5)); outline-offset: 1px; border-color: var(--p-color-input-border-active, var(--gemboss-field-line-active)); }
-/* The colour swatch in a group: FLUSH to the group's left edge and full height — it covers the group's
-   1px border top and bottom and its 12px left padding, so it is the whole 44px target the panel's rule
-   asks for, rounded by the group's own corner (overflow: hidden), and never clipped. A 44px swatch
-   INSIDE the 42px the border leaves was cut by a pixel top and bottom (/code-review #3201). */
-.gemboss-field--group input[type="color"] { flex: none; align-self: stretch; width: 44px; min-width: 44px; height: auto; min-height: 0; margin: -1px 0 -1px -12px; padding: 0; border: 0; border-right: 1px solid var(--p-color-input-border, var(--gemboss-field-line)); border-radius: 0; background: none; cursor: pointer; }
-/* ↑ the right edge is what keeps a WHITE swatch visible: without it the block melted into the field (measured). */
-.gemboss-field--group input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
-.gemboss-field--group input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 0; }
-.gemboss-field__bare { flex: 1; min-width: 0; align-self: stretch; margin-block: -1px; /* over the group's 1px border: the input is the 44px target, not 42 (0.5.1) */ padding: 0 12px 0 0; border: 0; border-radius: 0; outline: none; background: transparent; color: inherit; font: inherit; }
-/* …and the placeholder, which "draws nothing" does not cover: the surfaces that used to declare
-   their own (the /admin search rows, the settings and palette rows) stopped when they stopped
-   owning the box, and without this every bare field would fall back to the browser's grey. */
-.gemboss-field__bare::placeholder { color: var(--p-color-text-secondary, var(--gemboss-field-placeholder)); }
-
-/* Under a thumb the field is 44px, the same height this app gives a Polaris field there. It sits in
-   THIS file, not in the shell's pointer:coarse block, so /login and /try — which load only this
-   sheet — get it too. */
-@media (pointer: coarse) { .gemboss-field, .gemboss-control { height: auto; min-height: 44px; } }
-/* A control is pressable; a field is not. That is the whole difference. */
-.gemboss-control { cursor: pointer; }
-/* An ICON control — the repeater's ✕ — is square and narrow beside its row. It was pinned to
-   `width: 32` in an inline style, which no media query can reach, so under a thumb it was a
-   32x44 target: tall enough, too narrow (§9.1 asks 44 in BOTH dimensions for a control).
-   The width lives here now, and grows with the pointer. (/code-review, 23/09/2026.) */
-/* Hai class trên cùng phần tử, có chủ ý: `.gemboss-ei-inp` đặt `width: 100%` ở cùng trọng số và
-   nằm SAU trong thứ tự nạp (shell @import file này ở đầu), nên một selector đơn thua nó — đo
-   được: nút ✕ giãn ra 472px. Bề rộng vốn là inline style nên trước đây nó thắng mọi thứ; đưa
-   vào CSS thì phải mang theo trọng số của chính nó. */
-.gemboss-control.gemboss-control--icon { width: 32px; flex: 0 0 auto; padding: 0; }
-@media (pointer: coarse) { .gemboss-control.gemboss-control--icon { width: 44px; min-width: 44px; } }
+.gemboss-field,.gemboss-control{box-sizing:border-box;height:32px;min-width:0;padding:0 12px;font:inherit;font-size:var(--p-font-size-325, 13px);line-height:20px;color:var(--p-color-text, var(--gemboss-field-ink));background-color:var(--p-color-input-bg-surface, var(--gemboss-field-bg));border:1px solid var(--p-color-input-border, var(--gemboss-field-line));border-radius:var(--p-border-radius-200, 8px)}input[type=search]:is(.gemboss-field,.gemboss-field__bare){-webkit-appearance:none;appearance:none}.gemboss-field::placeholder{color:var(--p-color-text-secondary, var(--gemboss-field-placeholder))}.gemboss-field--tall{min-height:44px}.gemboss-field--narrow{padding:0 6px;appearance:textfield;-moz-appearance:textfield}.gemboss-field--narrow::-webkit-outer-spin-button,.gemboss-field--narrow::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.gemboss-field:hover:not(:disabled),.gemboss-control:hover:not(:disabled){border-color:var(--p-color-input-border-hover, var(--gemboss-field-line-hover));background-color:var(--p-color-input-bg-surface-hover, var(--gemboss-field-bg-hover))}.gemboss-field:focus-visible,.gemboss-control:focus-visible{outline:2px solid var(--p-color-border-focus, var(--ui-focus, #5661f5));outline-offset:1px;border-color:var(--p-color-input-border-active, var(--gemboss-field-line-active))}.gemboss-field:disabled,.gemboss-control:disabled{opacity:.5;cursor:not-allowed}@media (max-width: 47.9975em){.gemboss-field,.gemboss-control{font-size:16px;min-height:44px}}textarea.gemboss-field{height:auto;padding:6px 12px;resize:vertical}.gemboss-field--group{display:flex;align-items:center;gap:6px;height:auto;min-height:32px;padding-right:0;overflow:hidden}@media (max-width: 47.9975em){.gemboss-field--group{min-height:44px}}.gemboss-field--group:focus-within{outline:2px solid var(--p-color-border-focus, var(--ui-focus, #5661f5));outline-offset:1px;border-color:var(--p-color-input-border-active, var(--gemboss-field-line-active))}.gemboss-field--group input[type=color]{flex:none;align-self:stretch;width:44px;min-width:44px;height:auto;min-height:0;margin:-1px 0 -1px -12px;padding:0;border:0;border-right:1px solid var(--p-color-input-border, var(--gemboss-field-line));border-radius:0;background:none;cursor:pointer}.gemboss-field--group input[type=color]::-webkit-color-swatch-wrapper{padding:0}.gemboss-field--group input[type=color]::-webkit-color-swatch{border:0;border-radius:0}.gemboss-field__bare{flex:1;min-width:0;align-self:stretch;margin-block:-1px;padding:0 12px 0 0;border:0;border-radius:0;outline:none;background:transparent;color:inherit;font:inherit}.gemboss-field__bare::placeholder{color:var(--p-color-text-secondary, var(--gemboss-field-placeholder))}@media (pointer: coarse){.gemboss-field,.gemboss-control{height:auto;min-height:44px}}.gemboss-control{cursor:pointer}.gemboss-control.gemboss-control--icon{width:32px;flex:0 0 auto;padding:0}@media (pointer: coarse){.gemboss-control.gemboss-control--icon{width:44px;min-width:44px}}

package/src/gemboss-tokens.css

@@ -1,164 +1 @@
-/* The design tokens, and ONLY the tokens.
- *
- * Split out of gemboss-shell.css because that file is 203 KB of dashboard component CSS and it was
- * loaded by the ROOT layout — so /try and /login, which render no .gemboss-* component at all,
- * blocked their first paint on it. Tokens are 6 KB of the 203; /login uses var(--gemboss-primary)
- * and the rewritten /try uses the palette, so everyone needs these and almost nobody needs the rest.
- *
- * Order matters and is preserved: the second :root block below redefines --gemboss-primary and
- * friends from the first, exactly as it did inside the shell file. The Polaris --p-* overrides stay
- * in gemboss-shell.css, next to the Polaris stylesheet they override.
- */
-:root {
-  --gemboss-primary: #1b1c1e;        /* near-black — primary action (buttons / CTA) */
-  --gemboss-primary-dark: #000000;   /* black hover */
-  --gemboss-primary-soft: #f2f3f5;   /* neutral tint */
-  --gemboss-accent: #5661f5;         /* iris — brand accent, điểm nhấn only (links / focus / active) */
-  --gemboss-accent-strong: #3a44de;  /* iris strong (hover / text) */
-  --gemboss-accent-soft: #eef0fe;    /* iris tint */
-  --gemboss-text-strong: #1b1c1e;    /* neutral near-black */
-  --gemboss-text: #1b1c1e;
-  --gemboss-text-muted: #686b71;     /* neutral gray */
-  --gemboss-surface: #ffffff;
-  --gemboss-canvas: #ffffff;         /* white page background (was #f6f7f9 gray) — body + Polaris --p-color-bg */
-  --gemboss-preview-canvas: #eceef1; /* neutral sunken backdrop behind a live preview/widget stage */
-  --gemboss-rail-bg: #ffffff;        /* white sidebar (was #f4f5f7) — separated by border-right divider */
-  --gemboss-panel-bg: #ffffff;       /* white secondary panels (was #f2f4f6) */
-  --gemboss-divider: #e5e7ea;        /* neutral hairline border */
-
-  /* Chiều cao THẬT của lời mời desktop, do DesktopInvite.tsx ghi đè lúc chạy bằng ResizeObserver
-     (chip ~44px, thẻ mở ~328px) và GỠ HẲN khi lời mời không hiện. Khai ở đây bằng 0px vì hai lẽ:
-     cổng `export-ui-css` đòi mọi token phải được khai (nó bắt được đúng thiếu sót này), và một
-     `var()` không có chủ sở hữu là thứ không ai tra ngược được. Trang dùng nó để chừa chỗ ở cuối
-     tài liệu — xem `.gemboss-platform-main { padding-bottom: … }` trong gemboss-shell.css. */
-  --gemboss-invite-h: 0px;
-  --gemboss-divider-soft: #edeff2;
-  --gemboss-hover: #eceef2;
-  --gemboss-active-bg: #f0f1f4;      /* neutral selected (Polaris-style) */
-  --gemboss-active-fg: #1b1c1e;      /* near-black selected text */
-  --gemboss-danger: #d72c0d;
-  --gemboss-danger-strong: #b42318;
-  --gemboss-danger-soft: #fff0e9;
-  --gemboss-danger-border: #f5c9bc;
-  --gemboss-success: #007f5f;
-  --gemboss-success-strong: #0a6a4c;
-  --gemboss-success-soft: #e3f1df;
-  --gemboss-success-border: #b7dfcd;
-  --gemboss-warning: #9a6700;
-  --gemboss-warning-soft: #fff8e0;
-  --gemboss-warning-border: #f5d569;
-  /* Corner-radius scale — Polaris border-radius steps (2/4/6/8/12/16/20 + pill). The old
-     long tail of one-off radii (5/7/9/10/11/14/18px) was consolidated onto these steps
-     (round-half-up on ties: 5→6, 7→8, 9→8, 10→12, 11→12, 14→16, 18→20) — the
-     check-typography guard now keeps radii on-scale. Prefer a token below; raw px must
-     still land on a step. */
-  --gemboss-radius-xs: 4px;
-  --gemboss-radius-sm: 6px;
-  --gemboss-radius-md: 8px;
-  --gemboss-radius-lg: 12px;
-  --gemboss-radius-xl: 16px;
-  --gemboss-radius-2xl: 20px;
-  --gemboss-radius-full: 999px;
-  /* ── Elevation scale (design-language §G) ────────────────────────────────────
-     THREE layers, one shadow each — was ~25 bespoke box-shadows (0 6/8/12/16/28px
-     at a dozen opacities + mixed shadow colours) = no elevation system. Warm-neutral
-     shadow (rgba 31,30,29) to match the ivory canvas. Use a token, never a hand-rolled
-     drop shadow. (Directional edge shadows, coloured glows, focus rings, and insets are
-     NOT elevation — they stay literal.) */
-  --gemboss-shadow-resting: 0 1px 2px rgba(31, 30, 29, 0.04), 0 2px 6px rgba(31, 30, 29, 0.06); /* cards at rest on canvas */
-  --gemboss-shadow-raised: 0 4px 16px rgba(31, 30, 29, 0.10);   /* dropdowns · popovers · hovercards */
-  --gemboss-shadow-overlay: 0 16px 48px rgba(31, 30, 29, 0.18); /* modals · sheets · large floating panels */
-  /* Interaction transition speeds — fast = hover/focus on buttons & toggles, base = the
-     general default. One-off animation timings (toast/enter, 240–420ms) stay literal. */
-  --gemboss-transition-fast: 0.12s;
-  --gemboss-transition-base: 0.15s;
-  /* ── Type scale ─────────────────────────────────────────────────────────────
-     ONE font-size scale for all custom (non-Polaris-<Text>) chrome. Before this,
-     gemboss-shell.css carried ~20 ad-hoc sizes (9px → 40px, incl. fractional 10.5 /
-     11.5 / 12.5 / 13.5) — every component hand-nudged its own, drifting smaller
-     and reading as "the font keeps shrinking". New rule: pick a step here, never a
-     raw px. Floor is 12px (--fs-caption); 11px (--fs-micro) is reserved for bold
-     micro-badges/count-pills ONLY — nothing below that. Body default is 14px, one
-     step up from Polaris bodyMd (13px; bodySm is 12) which the app had been leaning on for prose. The kit (ui.css, kit-plain.css) reads --ui-fs-body, 13px, because it sits beside Polaris components; since 0.12.0 it reads none of body/h1-h3 here (README "Admin density"). */
-  --gemboss-fs-micro: 11px;   /* bold count-pills / status chips only */
-  --gemboss-fs-caption: 12px; /* metadata, timestamps, secondary labels */
-  --gemboss-fs-body: 14px;    /* default body / reading text */
-  --gemboss-fs-body-lg: 16px; /* primary descriptions, empty-state prose */
-  --gemboss-fs-h3: 16px;      /* card titles */
-  --gemboss-fs-h2: 20px;      /* zone / section headers */
-  --gemboss-fs-h1: 24px;      /* page titles */
-  --gemboss-fs-display: 30px; /* hero / banner display */
-  /* Headings use the same clean sans as Polaris body (Shopify-admin feel) rather
-   * than a serif display face — a dashboard reads calmer/more neutral that way.
-   * Name kept as `--gemboss-serif` to avoid churning ~10 call sites. */
-  /* -- Khung nen TOI, dung chung cho hai be mat toi --------------------------
-     `/admin` khai `--adm-*`, `/intel` khai `--in-*`, va bay gia tri trung tinh cua chung trung
-     nhau TUNG BYTE duoi hai bo ten khac nhau -- do 10/09/2026:
-
-       #0a0a0c  adm-bg        in-bg        #2a2a31  adm-divider    in-border
-       #0e0e11  adm-rail      in-bg2       #ededf0  adm-text       in-text
-       #16161a  adm-surface   in-panel     #9a9aa4  adm-muted      in-muted
-       #1e1e24  adm-surface-2 in-panel2
-
-     Do la mot ban sao, khong phai mot bien the: hai console cung mot nen, va lam nen sang them
-     mot bac thi phai nho sua o hai cho mang ten khac nhau. Bay gia tri nay song o day; `--adm-*`
-     va `--in-*` tro thanh BI DANH tro vao, nen 595 cho dang goi chung khong phai doi mot chu.
-
-     KHONG gop phan con lai: `--in-panel3/-border2/-faint` la bac rieng intel that su can, va bon
-     mau ngu nghia cua no (xanh - ho phach - san ho - tim) la ngon ngu rieng cua be mat do. Gop
-     nen, giu diem nhan. */
-  --gemboss-dark-bg: #0a0a0c;
-  --gemboss-dark-rail: #0e0e11;
-  --gemboss-dark-surface: #16161a;
-  --gemboss-dark-surface-2: #1e1e24;
-  --gemboss-dark-divider: #2a2a31;
-  --gemboss-dark-text: #ededf0;
-  --gemboss-dark-muted: #9a9aa4;
-  --gemboss-serif: var(--p-font-family-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
-  /* The BODY font, for surfaces without Polaris. The admin never reads it: its body text comes from
-     Polaris's `html, body, button` rule (--p-font-family-sans, @shopify/polaris 13.9.5). The fallback
-     below is that stack character for character, and export-ui-css.mjs ships the fallback, so a
-     surface on gemboss-ui.css picks the admin's face on the same machine (Inter is not loaded as a web
-     font anywhere; it renders where installed). Painted by packages/ui/src/app-shell.css; re-theme by
-     redefining the token. Added 28/09/2026: before it, those surfaces rendered in default serif. */
-  --gemboss-font-sans: var(--p-font-family-sans, 'Inter', -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif);
-  /* COMPONENT colours that used to be literals, so a surface with a dark theme re-themes them by
-     redefining the token instead of overriding the rule (29/09/2026). Each value is the literal it
-     replaced, so the admin paints exactly what it painted before. Measured reason: gempress's dark
-     theme had to override `.gemboss-account-chip` (initials #303633 on #16161a all but vanished)
-     and keep its own copy of the field and the nav count rather than use the package's.
-     - field: the fallbacks of gemboss-field.css. The admin still reads Polaris's --p-* first;
-       export-ui-css.mjs resolves --p-* away, so on every other surface these tokens are the look.
-     - chip: `.gemboss-account-chip` in apps/admin/src/app/gemboss-shell.css.
-     - on-primary: text on a --gemboss-primary fill (the active `.gnav-count` pill). */
-  --gemboss-field-bg: #fdfdfd;
-  --gemboss-field-bg-hover: #fafafa;
-  --gemboss-field-ink: #303030;
-  --gemboss-field-placeholder: #616161;
-  --gemboss-field-line: #8a8a8a;
-  --gemboss-field-line-hover: #616161;
-  --gemboss-field-line-active: #1a1a1a;
-  --gemboss-chip-ink: #303633;
-  --gemboss-chip-line: #cfd6ce;
-  --gemboss-chip-line-hover: #aab4ad;
-  --gemboss-chip-bg-hover: #f6f7f5;
-  --gemboss-on-primary: #ffffff;
-  /* The shell's own surfaces (29/09/2026), for the same reason as the slots above: a dark surface
-     (gempress) had to override `.gemboss-platform-topbar`, `.icon-nav` and `.gnav-item:hover` by rule.
-     Defaults are exactly what the shell painted. */
-  --gemboss-topbar-bg: rgba(255, 255, 255, 0.98);
-  --gemboss-nav-bg: var(--gemboss-surface);
-  --gemboss-nav-hover: rgba(20, 19, 18, 0.045);
-}
-
-:root {
-  --gemboss-primary: #1b1c1e;
-  --gemboss-primary-dark: #000000;
-  --gemboss-primary-soft: #f2f3f5;
-  --gemboss-accent: #5661f5;
-  --gemboss-accent-strong: #3a44de;
-  --gemboss-accent-soft: #eef0fe;
-  --gemboss-active-bg: #f0f1f4;      /* neutral selected (Polaris-style) */
-  --gemboss-active-fg: #1b1c1e;      /* near-black selected text */
-  --gemboss-app-bg: #ffffff; /* clean white main content (was #f6f7f9 gray) — cards keep separation via border/resting-shadow */
-}
+:root{--gemboss-primary: #1b1c1e;--gemboss-primary-dark: #000000;--gemboss-primary-soft: #f2f3f5;--gemboss-accent: #5661f5;--gemboss-accent-strong: #3a44de;--gemboss-accent-soft: #eef0fe;--gemboss-text-strong: #1b1c1e;--gemboss-text: #1b1c1e;--gemboss-text-muted: #686b71;--gemboss-surface: #ffffff;--gemboss-canvas: #ffffff;--gemboss-preview-canvas: #eceef1;--gemboss-rail-bg: #ffffff;--gemboss-panel-bg: #ffffff;--gemboss-divider: #e5e7ea;--gemboss-invite-h: 0px;--gemboss-divider-soft: #edeff2;--gemboss-hover: #eceef2;--gemboss-active-bg: #f0f1f4;--gemboss-active-fg: #1b1c1e;--gemboss-danger: #d72c0d;--gemboss-danger-strong: #b42318;--gemboss-danger-soft: #fff0e9;--gemboss-danger-border: #f5c9bc;--gemboss-success: #007f5f;--gemboss-success-strong: #0a6a4c;--gemboss-success-soft: #e3f1df;--gemboss-success-border: #b7dfcd;--gemboss-warning: #9a6700;--gemboss-warning-soft: #fff8e0;--gemboss-warning-border: #f5d569;--gemboss-radius-xs: 4px;--gemboss-radius-sm: 6px;--gemboss-radius-md: 8px;--gemboss-radius-lg: 12px;--gemboss-radius-xl: 16px;--gemboss-radius-2xl: 20px;--gemboss-radius-full: 999px;--gemboss-shadow-resting: 0 1px 2px rgba(31, 30, 29, .04), 0 2px 6px rgba(31, 30, 29, .06);--gemboss-shadow-raised: 0 4px 16px rgba(31, 30, 29, .1);--gemboss-shadow-overlay: 0 16px 48px rgba(31, 30, 29, .18);--gemboss-transition-fast: .12s;--gemboss-transition-base: .15s;--gemboss-fs-micro: 11px;--gemboss-fs-caption: 12px;--gemboss-fs-body: 14px;--gemboss-fs-body-lg: 16px;--gemboss-fs-h3: 16px;--gemboss-fs-h2: 20px;--gemboss-fs-h1: 24px;--gemboss-fs-display: 30px;--gemboss-dark-bg: #0a0a0c;--gemboss-dark-rail: #0e0e11;--gemboss-dark-surface: #16161a;--gemboss-dark-surface-2: #1e1e24;--gemboss-dark-divider: #2a2a31;--gemboss-dark-text: #ededf0;--gemboss-dark-muted: #9a9aa4;--gemboss-serif: var(--p-font-family-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);--gemboss-font-sans: var(--p-font-family-sans, "Inter", -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif);--gemboss-field-bg: #fdfdfd;--gemboss-field-bg-hover: #fafafa;--gemboss-field-ink: #303030;--gemboss-field-placeholder: #616161;--gemboss-field-line: #8a8a8a;--gemboss-field-line-hover: #616161;--gemboss-field-line-active: #1a1a1a;--gemboss-chip-ink: #303633;--gemboss-chip-line: #cfd6ce;--gemboss-chip-line-hover: #aab4ad;--gemboss-chip-bg-hover: #f6f7f5;--gemboss-on-primary: #ffffff;--gemboss-topbar-bg: rgba(255, 255, 255, .98);--gemboss-nav-bg: var(--gemboss-surface);--gemboss-nav-hover: rgba(20, 19, 18, .045)}:root{--gemboss-primary: #1b1c1e;--gemboss-primary-dark: #000000;--gemboss-primary-soft: #f2f3f5;--gemboss-accent: #5661f5;--gemboss-accent-strong: #3a44de;--gemboss-accent-soft: #eef0fe;--gemboss-active-bg: #f0f1f4;--gemboss-active-fg: #1b1c1e;--gemboss-app-bg: #ffffff}

package/src/icons.tsx

@@ -17,6 +17,8 @@
 import React from "react";
 
 const P = {
+  // A face with a plus (add a reaction): the open arc leaves room for the plus at the top right.
+  reaction: <><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5" /><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2" /><path d="M7.8 8.2h.01M12.2 8.2h.01" /><path d="M15 2.5v4M13 4.5h4" /></>,
   home: <><path d="M3.5 9 10 3.5 16.5 9" /><path d="M5 7.8v8.7h10V7.8" /><path d="M8.5 16.5v-4h3v4" /></>,
   dashboard: <><rect x="3" y="3" width="6" height="6" rx="1.3" /><rect x="11" y="3" width="6" height="6" rx="1.3" /><rect x="3" y="11" width="6" height="6" rx="1.3" /><rect x="11" y="11" width="6" height="6" rx="1.3" /></>,
   board: <><rect x="3" y="3.5" width="4" height="13" rx="1.2" /><rect x="8" y="3.5" width="4" height="9" rx="1.2" /><rect x="13" y="3.5" width="4" height="6" rx="1.2" /></>,

package/src/index-table.tsx

@@ -0,0 +1,179 @@
+"use client";
+/**
+ * IndexTable (0.13.0): a list of entities people open, compare and act on in bulk. Polaris IndexTable's shape on the
+ * classes of `@gemboss/ui/collections.css` (README "Collections").
+ *
+ * - The WHOLE row opens the item (Chris 05/10/2026): a click anywhere that is not a control follows the row's title link
+ *   (`a.ui-table__title`), which stays a real link, so Cmd-click, middle-click and a screen reader all work. A click on
+ *   a checkbox, a button, a menu, a select or another link does what that control does and nothing else; so does a
+ *   click that ends a text selection. A row with two or more in-place editing controls should not be linked (`href`
+ *   off; link only its title by putting the link in `title` yourself).
+ * - Selection only with bulk actions: a checkbox column with nothing to do with the selection is inert (Artifacts and
+ *   GemCRM shipped exactly that). The bulk bar takes the header's place, carries its own select-all box (the folded list
+ *   has no header), and Escape clears the selection.
+ * - Below 768 of ITS container the table folds into a list (collections.css): the title line, then the other cells on
+ *   one caption line (`label` prefixes a value; `condensed: "hide"` leaves a cell out), checkbox and actions kept.
+ *
+ * Every prop that describes the table is plain data (rows of rendered cells, `sortHref` strings), so a server
+ * component can render it; the callbacks (`onSort`, `onSelectionChange`, bulk `onAction`) need a client parent.
+ * Its own module, "use client": nothing the admin imports pulls it in (first-load budget).
+ */
+import React, { useEffect, useRef } from "react";
+import { ariaSort, SortHeader, CollectionSkeleton, type CollectionColumn, type CollectionSort, type SortDirection, type SortLinkProps } from "./collections";
+import { BulkBar, useSelection, type BulkAction } from "./selection";
+export type { BulkAction } from "./selection";
+export { ESCAPE_OWNERS } from "./selection";
+
+const cx = (...c: Array<string | false | null | undefined>) => c.filter(Boolean).join(" ");
+
+export type IndexTableRow = {
+  id: string;
+  /** The row's main text. With `href` the table makes it the row's link; without, pass your own `<a className="ui-table__title">` or leave the row unlinked. */
+  title: React.ReactNode;
+  /** The whole title for a screen tip when the ellipsis cuts it. */
+  titleText?: string;
+  href?: string;
+  /** "_blank" for a row that opens somewhere else (the row follows the same link). */
+  target?: string;
+  /** One line under the title (`ui-sub`). */
+  sub?: React.ReactNode;
+  /** Avatar 24/32 or a `ui-thumb` (40), left of the title. One size for the whole table. */
+  media?: React.ReactNode;
+  /** The other columns, by column key. */
+  cells: Record<string, React.ReactNode>;
+  /** One button and/or a ⋯ menu, at the end of the row. Never more than one visible button. */
+  actions?: React.ReactNode;
+};
+
+export type IndexTableProps = {
+  /** The first column is the primary one (title, sub, media); the rest map to `row.cells[key]`. */
+  columns: CollectionColumn[];
+  rows: IndexTableRow[];
+  /** Names the table for a screen reader. */
+  label: string;
+  sort?: CollectionSort | null;
+  onSort?: (key: string, direction: SortDirection) => void;
+  /** Turns the checkbox column on. Only together with `bulkActions`. */
+  bulkActions?: BulkAction[];
+  /** Controlled selection; leave both out and the table keeps it. */
+  selected?: string[];
+  onSelectionChange?: (ids: string[]) => void;
+  /** "12 selected": `(n) => …`. */
+  selectedLabel?: (n: number) => React.ReactNode;
+  selectAllLabel?: string;
+  /** The link element for titles AND sort links (header and chips, 0.16.0): a Next `Link` from a client module, so
+   *  opening a row and sorting both stay in the app instead of reloading the page. Default `<a>`. */
+  linkAs?: React.ElementType;
+  /** Extra props for the sort links only, e.g. `{ scroll: false }` for a Next `Link`: a sort is the same page in another
+   *  order, so it should not jump to the top the way opening a row does (0.16.0). */
+  sortLinkProps?: SortLinkProps;
+  /** Below 768 the header is gone: these chips sort instead. Default: one per sortable column. */
+  sortLabel?: React.ReactNode;
+  state?: "ready" | "loading" | "busy" | "empty" | "no-match" | "error";
+  /** For empty / no-match / error: a `CollectionState`. The header stays above it. */
+  stateSlot?: React.ReactNode;
+  loadingRows?: number;
+  /** Whether the loading skeleton has an actions column (default: any row has actions). */
+  actionsColumn?: boolean;
+  className?: string;
+};
+
+/** Anything in a row that is a control of its own: a click on it is not a click on the row. */
+export const ROW_CONTROLS = 'a[href], button, input, select, textarea, label, summary, details, dialog, [role="dialog"], [role="menu"], [role="button"], [role="menuitem"], [role="checkbox"], [contenteditable="true"], [contenteditable=""], [data-row-ignore], .ui-table__check';
+
+/** The click on a row, minus controls and text selection; follows the row's title link. Shared with kit-plain.js in spirit (same rules). */
+export function followRow(e: React.MouseEvent<HTMLElement>): void {
+  const row = e.currentTarget;
+  const t = e.target as Element;
+  if (e.defaultPrevented || e.button > 1) return;
+  // A portal (a popover rendered elsewhere) still bubbles React events through the row: not a click on the row.
+  if (!(t instanceof Node) || !row.contains(t)) return;
+  const hit = t.closest ? t.closest(ROW_CONTROLS) : null;
+  if (hit && row.contains(hit)) return;
+  const sel = typeof window !== "undefined" ? window.getSelection() : null;
+  if (sel && !sel.isCollapsed && sel.anchorNode && row.contains(sel.anchorNode)) return;
+  const a = row.querySelector<HTMLAnchorElement>("a.ui-table__title[href]");
+  if (!a) return;
+  if (e.metaKey || e.ctrlKey || e.shiftKey || e.button === 1) { window.open(a.href, "_blank", "noopener"); return; }
+  a.click();
+}
+
+export function IndexTable({ columns, rows, label, sort, onSort, bulkActions, selected: selectedProp, onSelectionChange, selectedLabel = (n) => `${n} selected`,
+  selectAllLabel = "Select all", linkAs: Link = "a", sortLinkProps, sortLabel = "Sort", state = "ready", stateSlot, loadingRows = 5, actionsColumn, className }: IndexTableProps) {
+  const selectable = !!(bulkActions && bulkActions.length);
+  const ids = rows.map((r) => r.id);
+  // Own or controlled ids, Shift range, select-all, Escape (./selection: the same rules as SelectableResourceList).
+  const { rootRef, selSet, chosen, all, some, toggle, toggleAll } = useSelection<HTMLDivElement>(ids, selectedProp, onSelectionChange, selectable);
+  const hasActions = rows.some((r) => r.actions);
+  const headBox = useRef<HTMLInputElement>(null);
+  useEffect(() => { if (headBox.current) headBox.current.indeterminate = some; }, [some]);
+
+  if (state === "loading") return <CollectionSkeleton pattern="index" columns={columns} rows={loadingRows} label={label} check={selectable} actions={actionsColumn ?? hasActions} />;
+  const showRows = state === "ready" || state === "busy";
+  const [primary, ...rest] = columns;
+  const sortable = columns.filter((c) => c.sortHref || (c.sortable && onSort));
+
+  return (
+    <div className={cx("ui-index", className)} ref={rootRef} aria-busy={state === "busy" ? true : undefined}>
+      {sortable.length && showRows ? (
+        <div className="ui-index__sortbar" role="group" aria-label={typeof sortLabel === "string" ? sortLabel : "Sort"}>
+          <span aria-hidden="true">{sortLabel}</span>
+          {sortable.map((c) => {
+            const on = sort?.key === c.key;
+            const arrow = on ? (sort!.direction === "ascending" ? " ↑" : " ↓") : "";
+            return c.sortHref
+              ? <Link {...sortLinkProps} key={c.key} className="ui-chip" href={c.sortHref} aria-current={on ? "true" : undefined}>{c.header}{arrow}</Link>
+              : <button key={c.key} type="button" className="ui-chip" aria-pressed={on} onClick={() => onSort!(c.key, on && sort!.direction === "ascending" ? "descending" : "ascending")}>{c.header}{arrow}</button>;
+          })}
+        </div>
+      ) : null}
+      {selectable ? <BulkBar actions={bulkActions!} chosen={chosen} all={all} some={some} onToggleAll={toggleAll} selectedLabel={selectedLabel} selectAllLabel={selectAllLabel} idle="hide" /> : null}
+      <div className="ui-table-wrap">
+        <table className="ui-table ui-table--index">
+          <caption className="ui-sr-only">{label}</caption>
+          <thead>
+            <tr>
+              {selectable ? <th className="ui-table__check" scope="col"><label className="ui-table__checkbox"><input ref={headBox} type="checkbox" checked={all} aria-label={selectAllLabel} onChange={(e) => toggleAll(e.target.checked)} disabled={!showRows || !rows.length} /></label></th> : null}
+              <th className="ui-table__primary" scope="col" aria-sort={ariaSort(primary, sort)}><SortHeader col={primary} sort={sort} onSort={onSort} linkAs={Link} linkProps={sortLinkProps} /></th>
+              {rest.map((c) => <th key={c.key} scope="col" className={c.numeric ? "is-num" : undefined} aria-sort={ariaSort(c, sort)}><SortHeader col={c} sort={sort} onSort={onSort} linkAs={Link} linkProps={sortLinkProps} /></th>)}
+              {hasActions ? <th className="ui-table__actions" scope="col"><span className="ui-sr-only">Actions</span></th> : null}
+            </tr>
+          </thead>
+          {showRows ? (
+            <tbody>
+              {rows.map((r, i) => {
+                const isSel = selSet.has(r.id);
+                const title = r.href
+                  ? <Link className="ui-table__title" href={r.href} target={r.target} rel={r.target === "_blank" ? "noopener" : undefined} title={r.titleText}>{r.title}</Link>
+                  : r.title;
+                return (
+                  <tr key={r.id} className={cx(r.href && "is-linked", isSel && "is-selected")} aria-selected={selectable ? isSel : undefined} onClick={r.href ? followRow : undefined} onAuxClick={r.href ? followRow : undefined}>
+                    {selectable ? (
+                      <td className="ui-table__check" onClick={(e) => { if (e.target === e.currentTarget) (e.currentTarget.querySelector("input") as HTMLInputElement | null)?.click(); }}>
+                        <label className="ui-table__checkbox">
+                          <input type="checkbox" checked={isSel} aria-label={`Select ${r.titleText ?? (typeof r.title === "string" ? r.title : r.id)}`}
+                            onChange={(e) => toggle(i, e.target.checked, (e.nativeEvent as MouseEvent).shiftKey)} />
+                        </label>
+                      </td>
+                    ) : null}
+                    <td className="ui-table__primary" style={primary.truncate != null ? ({ ["--ui-trunc" as string]: typeof primary.truncate === "number" ? `${primary.truncate}px` : primary.truncate } as React.CSSProperties) : undefined}>
+                      {r.media ? <div className="ui-table__primary-inner">{r.media}<div className="ui-table__primary-text">{title}{r.sub ? <span className="ui-sub">{r.sub}</span> : null}</div></div>
+                        : <>{title}{r.sub ? <span className="ui-sub">{r.sub}</span> : null}</>}
+                    </td>
+                    {rest.map((c) => (
+                      <td key={c.key} className={c.numeric ? "is-num" : undefined} data-label={c.label} data-condensed={c.condensed === "hide" ? "hide" : undefined}>
+                        {c.truncate != null ? <span className="ui-trunc" style={{ ["--ui-trunc" as string]: typeof c.truncate === "number" ? `${c.truncate}px` : c.truncate } as React.CSSProperties}>{r.cells[c.key]}</span> : r.cells[c.key]}
+                      </td>
+                    ))}
+                    {hasActions ? <td className="ui-table__actions">{r.actions ? <span className="ui-row-actions">{r.actions}</span> : null}</td> : null}
+                  </tr>
+                );
+              })}
+            </tbody>
+          ) : null}
+        </table>
+        {!showRows ? stateSlot : null}
+      </div>
+    </div>
+  );
+}

package/src/index.ts

@@ -7,6 +7,23 @@ export { PageContainer, pageWidthClass } from "./page";
 export type { PageWidth } from "./page";
 // The loading boundary every route group under @gemboss/ui/next needs (0.10.0). Plain module, like ./page.
 export { RouteCover, RouteHolding } from "./route-holding";
+// Collections (0.13.0): tables, lists, grids, boards. Their own modules, like ./page: nothing the admin imports pulls them in
+// (it draws tables with Polaris). ./collections is plain (a server component renders it); ./index-table and
+// ./resource-list-select are "use client".
+export {
+  BOARD_MOVE_HELP, Board, boardShown, CardGrid, CollectionSkeleton, CollectionState, CompactList, DataTable, MediaCard, ResourceItem, ResourceList, SortHeader, Truncate, ariaSort,
+} from "./collections";
+export type {
+  BoardCard, BoardColumn, BoardProps, CardGridMin, CollectionColumn, CollectionRow, CollectionSort, CollectionStateProps, CompactItem, CompactListProps, DataTableProps, MediaCardProps,
+  ResourceItemProps, ResourceListProps, SkeletonPattern, SortDirection, SortLinkProps,
+} from "./collections";
+export { IndexTable, followRow, ROW_CONTROLS } from "./index-table";
+export type { BulkAction, IndexTableProps, IndexTableRow } from "./index-table";
+// 0.16.0: a resource list with selection + bulk actions. A client module of its own, like ./index-table.
+export { SelectableResourceList } from "./resource-list-select";
+export type { SelectableResourceItem, SelectableResourceListProps } from "./resource-list-select";
+// The one switch (0.20.0): every "pick one" control in the admin, and the editor kit's Seg. Its own module (plain, no state).
+export { Segmented, IconSegmented, type SegmentedOption } from "./segmented";
 export { GemMark } from "./GemMark";
 export { AuthError, AuthField, AuthFoot, AuthForm, AuthHelp, AuthLayout, PasswordField, AuthSubmit } from "./auth";
 export { BrandLockup } from "./brand";
@@ -20,3 +37,5 @@ 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";
+export { Reactions, ReactionPicker, type ReactionsProps } from "./reactions";
+export { isReactionEmoji, QUICK_REACTIONS, REACTION_EMOJI, REACTION_GROUPS, reactionLabel, reactionWords, searchReactions, toggleReaction, type Reaction } from "./reactions-data";