@gemboss/ui 0.35.7 → 0.39.0

package/CHANGELOG.md

@@ -2,6 +2,296 @@
 
 Versions up to 0.9.0 are described in the README, each in the section that introduced it.
 
+## 0.39.0 (19/10/2026)
+
+**A field of real pages for the sign-in panel, and an entrance for the screen.** Chris, on admin.gemboss.ai/login:
+"animation ko quá lố nhưng thể hiện được những kỹ thuật, có chiều sâu như ở ngoài website". gemboss.ai opens on a
+tilted field of real pages; the sign-in panel can now do the same, quieter.
+
+Added
+- **`AuthPageField`** (`auth-field.tsx`, its own entry `auth-field.css`, 1.1 KB gzipped): five columns of page thumbnails
+  the surface serves (portrait, 3:4) on a plane tipped back in perspective, drifting 100 to 130 seconds a lap, neighbours
+  the other way; a veil of the panel's ink keeps the words readable; a fine pointer leans the plane by at most 3 degrees.
+  Each column is dealt at least five pages so a lap never shows a gap. Images are lazy and live inside the panel, so a
+  screen without the panel (under 900 wide or 520 tall) never fetches them.
+- **`AuthLayout` `art`**: anything drawn on the panel under its words. Pair it with `backdrop="none"`.
+- **`className="gb-auth--alive"`** (with `AuthPageField` loaded): the mark, the name and the tagline, then each field,
+  then the panel's words rise 12px as they fade in, 0.7s each, all done by 1.1s; one light passes over the mark.
+
+Nothing changes for a surface that does not opt in. Under `prefers-reduced-motion: reduce` the field is a still picture
+and nothing rises.
+
+**And "Continue with GemBoss" for the internal tools** (Chris, 16/10/2026: one sign-in for the fleet, "có cả continue
+với gemboss hoặc nhập mật khẩu"; protocol in gemboss docs/fleet-sso.md).
+
+Added
+- **`AuthContinueWithGemBoss`** `{ service, next }`: put it first inside `AuthLayout`, above the form. An outline button
+  with the gem (the password form keeps the one dark button), then "or use the password". It links to GemBoss's door
+  for this tool; once the tool has set `gb_sso=1` (a browser that came in this way) the page continues by itself,
+  except over a reason the tool sent back (`?sso=not_member|invalid|off`, shown under the button) or `?password=1`.
+- **`gemBossSignInUrl(service, next)`**, **`continuesByItself(cookie, search)`**: the same two rules, for a page that
+  writes the markup itself.
+- **`auth-sso-plain.js`** (`@gemboss/ui/auth-sso-plain.js`, 1.1 KB gzipped, its own entry: kit-plain.js had no room
+  under its ceiling): `gembossUI.initContinueWithGemBoss()` for a sign-in page with no React. The page writes
+  `<a class="gb-auth-sso-btn" data-gb-sso="<tool>" data-next="/admin">` inside a `.gb-auth-sso`; the script points it at
+  GemBoss, fills in the gem, the label, the reason and "or use the password", and continues by itself under the same rules.
+- auth.css: `.gb-auth-sso-btn`, `.gb-auth-sso-why`, `.gb-auth-sso .gb-auth-or` (auth.css 3,013 B gzip, under its ceiling).
+
+**The save pill reads on the light bar.** `EditorSaveState`'s colours were the old dark topbar's: measured on the page editor's
+bar (white) 19/10/2026, "✓ Draft saved" read 1.35:1 and "Saving…" 1:1, white on white. They are on the tokens now:
+"Saving…" in `--gemboss-text-muted` on the bar (5.3:1), "✓ Draft saved" in `--gemboss-success-strong` on
+`--gemboss-success-soft` (5.6:1), the spinner `--gemboss-divider` with a `currentColor` arc. The idle words ("Autosaves", the
+page editor's "Draft saved · <when>") were the text at opacity .55, 3.31:1: they are `is-idle` now, the muted token (5.3:1), and
+the inline `style` is gone from the markup. The theme and section editors' pills change with it.
+
+**`EditorSaveState` can be unannounced.** `live` (default `true`, so every editor reads as before): `live={false}` draws the same
+words and title without `role=status` / `aria-live`, for a surface that speaks through a live region of its own, in the page
+from its first render and saying only what changed (the admin's page editor: "Saving…", "Saved just now", "Your last change
+was not saved."). Two live regions for one pill announced it twice, and a region mounted with its first words is not read.
+
+**The page and section editors' bar keeps its free space beside its centre.** Above 1000px `.gemboss-pageedit-top` is
+`auto fit-content(100%) auto` with the default `justify-content` (it was `auto auto auto` with `space-between`, which the theme
+editor keeps): the free space goes into the left and right tracks, half each, instead of between the three clusters. The
+centre and the right sit exactly where they were (measured 19/10/2026 at 1024-1920 on the page editor's bar, the Studio's and
+the section editor's). What changes is the left track: it has room past its content, which is where the admin's page editor
+draws its save pill (in its own sheet, adding no width to any track). The page editor's left cluster declares its gap as
+`--gemboss-tb-gap` (12px), so a child can hand it back; a bar with another gap sets the property.
+
+**Toggles that are each on or off.** `ToggleBar` (from `@gemboss/ui` and `@gemboss/ui/toggle-bar`, 17/10/2026, Chris: the panel
+was missing pickers; research `_local/gemboss/research/pickers-2026-10-16/pickers.md` §13 slice 8): a row of buttons drawn as
+`.ui-seg`, any number pressed at once (`aria-pressed`), `role="toolbar"` with one Tab stop and ← → Home End along it. `keepFocus`
+leaves the focus where it is on a press, so a text box keeps its selection. The admin's text toolbar (Bold, Italic, Underline,
+Highlight, Accent color, Warning color, Link) draws through it. Not a switch: "pick one of these" stays `Segmented`.
+
+Added
+- `ToggleBar` (`toggle-bar.tsx`, a client module of its own: `segmented.tsx` stays free of hooks for the server components that
+  import `Segmented`).
+
+**A segmented option can be a glyph with a name.** `Seg` options take `name` (17/10/2026): the button's accessible name and
+its hover title, for a label that is an arrow (the admin's gradient direction: ↓ → ↘ ↗, named Down, Right, Down right, Up right).
+
+**A choice of shapes is picture tiles.** `ChoiceTiles` (from `@gemboss/ui/editor`, 16/10/2026, Chris: the panel was missing
+pickers; research `_local/gemboss/research/pickers-2026-10-16/pickers.md` §4, pattern P9): each option a tile with its picture
+(`picture`, or a rectangle `shape` of w×h drawn to fit 26px) and its name, 4 to a row, the lit one `aria-pressed`; 56px tall,
+past 44px under a finger. The admin draws an image's ratio with it (Original, 1:1, 4:5, 4:3, 3:2, 16:9, 9:16 + a Custom box).
+
+Added
+- `ChoiceTiles` (`editor/tiles.tsx`) and its own part `@gemboss/ui/editor-tiles.css` (parts.mjs, export, weight ceiling 1,000 B).
+- `ChoiceTiles` sizes its tiles to fit (as many to a row as fit at 72px: 4 in a 350px panel, 3 on a phone, 2 wide ones for a choice of two) and a
+  name wraps to two lines instead of being cut ("Main image and thumbnails"): the admin's layout tiles (17/10/2026).
+
+**A setting that is a list reads as rows.** `RepeaterList` + `useKeyedRows` (from `@gemboss/ui/editor`, 16/10/2026, Chris: the
+panel was missing pickers; research `_local/gemboss/research/pickers-2026-10-16/pickers.md` §9). Each row: a grip to drag, its
+name (folds it), ↑ ↓, duplicate, ✕; more than one row opens folded and a row added or duplicated opens; the count beside the
+list's name; Alt+↑/↓ moves a row and keeps the focus. Rows are kept by key, so a row's typing follows it when it moves.
+
+Added
+- `RepeaterList` (`touch`: 44px buttons with a mouse too), `useKeyedRows` (`patch(key, fn)` writes a field by the row's key onto its
+  latest version; a refused write, `commit` answering false, puts the stored list back; the stored list is read by content),
+  `useRowDrag`, `dropIndex` (`editor/repeater.tsx`, `editor/sortable.tsx`).
+- `@gemboss/ui/editor-repeater.css`: its own part, imported by `RepeaterList`.
+
+Changed
+- `SortableLayerList` drags through `useRowDrag`, the same rule as `RepeaterList` (behaviour unchanged; its browser tests pass).
+
+Moved
+- `.gemboss-ei-rep*` out of `editor.css` into `editor-repeater.css` (editor.css 8.4 → 8.2 KB gzip).
+
+**The settings panel reads like the rest of the admin.** Chris 16/10/2026: the panel's controls looked bigger than the kit's
+and Polaris's. Measured (a countdown's Settings tab, 1280, a mouse): every control was Polaris-sized already (field 32/13,
+chips 26-28/12, buttons 28); the panel was long, 3,363px, because each setting was a label line over its control (70px a
+setting) and 22% of the height was help lines. Research of GemPages, PageFly and Replo:
+`_local/gemboss/research/inspector-density-2026-10-16.md`.
+
+Changed, inside an inspector group (`InspectorGroup`) only; a plugin's settings form is unchanged:
+- `Field` takes `row`: label left (2 parts), control right (3 parts), for a one-value setting. GemPages draws a setting in 52px
+  this way. The admin sets it on toggles, selects, chip sets of up to three, numbers (the unit beside the box), ranges and
+  colours. Value controls (chips + box + slider), longer chip sets, text, dates, spacing, images and lists keep the label
+  above: their parts need the panel's width (measured: "None 1 2 3 4" was cut in the control column). A countdown's
+  Settings tab went from 3,363px to 2,197px.
+- `Field`'s `hint` with a label is behind a ? beside the label (`button.gemboss-ei-help`, named "About <label>", described by
+  the help line): a click, Enter or a tap shows it as the line under the control, again hides it. Outside a group the
+  ? is not drawn and the line shows, as before. The line is still one node (`p.gemboss-ei-hint.gemboss-ei-help-text`).
+- Labels are quiet: 13px / 450, secondary (Polaris bodyMd).
+- Group titles (`.gemboss-ei-gh`) are Polaris headingSm everywhere: 13px / 650, sentence case, the text colour. They were
+  10-11px uppercase with letter spacing, the old vault look.
+
+Removed
+- `.gemboss-pageedit-modes`: no source in the fleet draws it.
+- `.gemboss-ei-img-grid` / `.gemboss-ei-img-cell`: the image field's inline library grid. The admin's image field opens the
+  media picker since gemboss #4474 (16/10/2026) and nothing in the fleet draws the grid any more.
+
+## 0.38.0 (15/10/2026)
+
+**A setting you can click as well as type.** `ValueControl` (from `@gemboss/ui/editor`): a number's named values as chips, then
+its box with the unit and, for a bounded range, a slider. Chris 15/10/2026: "có option để vừa bấm được vừa nhập được, lười thì bấm".
+Research of GemPages, PageFly, Replo and Shopify: Shopify's reference themes never show a bare number box for a style; GemPages and
+PageFly both left border width one.
+
+Added
+- `ValueControl`: props `presets` (`{ value, label }`, smallest first), `text` (what the box holds), `suffix`, `slider`
+  (`{ min, max, step, value }`), `note`, and `onPreset` / `onText` / `onCommit` / `onSlide` / `onKeyDown`. The chips are the kit's
+  segmented control (`Seg`): the one whose value the box holds lights, a value of its own lights none. The caller owns the value.
+- `.gemboss-ei-value`, `.gemboss-ei-value-row`, `.gemboss-ei-value-box`: chips on top, then the 72px box with its unit and the
+  slider filling the rest of the row.
+
+## 0.37.1 (16/10/2026)
+
+**Three things the ServiceSwitcher rollout found on the 16 services.** A sliver of the search's first letter at 320
+(GemMedia), the panel opening 6px over a header of the surface's own (GemNews's admin), and a React hydration warning
+about `<html>` on the Next surfaces that import `kit-plain.js` (talent-radar, post-studio: 1 load in 3).
+
+Fixed
+- **The search under its floor is its icon.** In a bar with the switcher, under 360px, the search goes below its 96px
+  floor (0.36.0), and its words did not fit: measured in Chromium with the switcher, the assistant and the account, the box
+  is 56 / 58 / 78 wide at 300 / 320 / 340 and showed 0 / 2 / 22px of its words (a cut letter). Below 96 wide it is now the
+  search icon alone, centred (a container query on the centre slot, `gb-svc-search`, set only in that bar under 360).
+  Both topbar searches: `TopbarSearch`'s input covers the box, placeholder unpainted, name still its `aria-label`, the
+  icon stepping aside while it is focused or holds words; `SearchDialog trigger="field"`'s words stay the link's name,
+  visually hidden. At 359 and up, and in a bar without the switcher, every number is unchanged (30 of 36 measured rows
+  identical; the 6 that change are those three widths, both searches).
+- **…and the box is a target again there.** `TopbarSearch`'s input had the 0-2px left of the box at 300 / 320, so a tap at
+  the box's centre landed on the icon and focused nothing (typing went nowhere). It now lands in the input.
+- **The panel hangs under the bar that holds the button**, the closest `.gemboss-platform-topbar`, `header` or
+  `[role="banner"]` around it (never above the button's own bottom), else under the button. Only the kit's topbar was
+  looked for, so on GemNews's admin (its own 56px `<header>`, the plain script) the panel was placed from the 32px button
+  and opened at y=50, over the header's last 6px; now 62. The kit's topbar is unchanged: 62 at 1280. The GemBoss admin's
+  `/admin` console draws its own 56px `<header class="gemboss-admin-topbar">` too, so it moves the same way (50 → 62,
+  read off its CSS, not measured); the seller shell's bar is the kit's topbar, unchanged. The React component and
+  `service-switcher-plain.js` share the selector (`BAR`) and the rule, held equal by a test.
+- **`kit-plain.js` writes nothing on `<html>` as it loads.** The `data-gb-menus="float"` flag (kit-plain.css: an open
+  list nobody has floated yet stays unpainted, 0.18.0) now goes on in the capture phase of the click that opens a menu,
+  which runs before the browser opens the details (Enter and Space on a summary are that click too), and on any opening
+  after; it is put back if something took it off. A client module that imports the script can run before React hydrates
+  `<html>`, and React then reported the attribute. Measured on a Next 16.2.6 / React 19.2.6 app (`next dev`) with the
+  script made to run before hydration (`next/script` `beforeInteractive`, the order an import lands in 1 load in 3 on
+  post-studio; imported from a client module alone it ran after hydration 30 of 30 loads there): 0.36.1 warned on 20 of 20 loads ("A tree hydrated but some attributes of the server rendered HTML
+  didn't match"), 0.37.1 on 0 of 20; a click on its menu then sets the flag and floats it, 20 of 20. Plain pages keep
+  what the flag is for: the first frame after the opening click paints the list hidden, never inside its frame (20 of 20
+  by mouse and by Enter; without the flag it is inside its frame 20 of 20). post-studio's `suppressHydrationWarning` on
+  `<html>` is not needed for this any more.
+
+Added
+- Two services in the catalogue (`GEM_SERVICES`, `ServiceId`, the plain-HTML copy), both live since 15/10/2026: **GemX**
+  (`gemx`, https://x.gemboss.ai, "Tests and personalization across every store.", Build the store, after GemForm, icon
+  `sliders`, tint amber) and **GemPixel** (`gempixel`, https://pixel.gemboss.ai, "Events every store sends, and whether they
+  add up.", Read the market, after GemMarket, icon `activity`, tint blue). The panel now has 18 tiles. Their own admins can
+  pass `switcher={{ current: "gemx" }}` / `"gempixel"` once they are on this version.
+
+Changed
+- A menu opened by code (`details.open = true`) before any menu has been clicked may show inside its frame for one frame
+  before it floats, as every menu did before 0.18.0. A menu served open is floated as the script loads, as before.
+- Weight (gzip of the minified file): `service-switcher.css` 1815 → 2040, `service-switcher-plain.js` 4559 → 4583,
+  `kit-plain.js` 8704 → 8742. No ceiling raised.
+
+Tests: `service-switcher-browser.test.tsx` (Chromium): both searches at 300 / 320 / 340 in a bar with the switcher (no
+words painted, icon centred within 1px, the centre of the box its target, the name kept, nothing wider than the screen),
+a tap at 320 types into `TopbarSearch`, and 359 / 390 / 320-without-the-switcher unchanged; negative control: 0.36.1's
+sheet paints 2px of the words at 320 and the centre tap lands on the icon. `service-switcher-plain-browser.test.ts`: the
+panel 6px under GemNews's header, plain and React on the same pixel; 62 on the kit's topbar, both; 6px under the button in
+no bar, both; negative control: 0.36.1's selector opens it at the button's bottom + 6, over the header.
+`service-switcher-plain-data.test.ts`: one `BAR` in both files. `collections-board.test.ts`: no `data-gb-menus` until a
+menu opens, the first frame after a mouse / Enter / Space opening never inside the frame (negative control: a kit that
+never sets the flag paints it there); a React development build hydrating the whole document after kit-plain.js ran logs
+no hydration warning and its menu floats with the flag (negative control: the flag set at load, 0.36.1, warns).
+
+Also in this release: 0.37.0 (#4425), merged and not published until now (npm has 0.36.1).
+
+## 0.37.0 (15/10/2026)
+
+**A spacing box's side can be dragged.** `EdgeBox` takes `onScrub(side, dx, keys)` and `onScrubEnd(side, moved)`: with them,
+each side's letter (T · R · B · L) is a drag row, as Figma's and Webflow's number labels are. The package reports how far the
+pointer moved and which keys are held; the caller turns that into a value and saves once when the drag lets go.
+
+Added
+- `.gemboss-ei-edge-scrub`: the letter as a 24px row the box's width (WCAG 2.5.8), `cursor: ew-resize`, hover fill
+  `--gemboss-hover`. A mouse or a pen drags; a finger scrolls the panel (`touch-action: pan-y`) and types in the box, which is
+  44px under a finger. A press that moves under 2px is a click (`moved: false`).
+- Without `onScrub` the letter is the plain `<span>` it was: nothing changes for other callers.
+
+## 0.36.1 (15/10/2026)
+
+**The package reads only tokens it declares.** It read eight `--gemboss-*` tokens it never declared, each with a
+fallback, so nothing failed: the browser painted the fallback hex. That hex is light-theme only, and in one place it
+was wrong in light too. gemcare's copy of gemboss-ui.css failed its token gate on six of them (15/10/2026).
+
+Fixed
+- Editor inspector repeater (`.gemboss-ei-rep-*`): the rows and the add button had a `#2a2a3a` border on the white
+  panel, and the move/remove buttons hovered to that same near-black behind `#1b1c1e` glyphs. Now `--gemboss-divider`
+  and `--gemboss-hover`, like the rest of the panel.
+- Chat markdown in dark mode outside a bubble: table headers, code blocks, inline code and images kept `#f7f7f7`; quotes
+  and h3 kept `#616161`. They now read `--gemboss-primary-soft`, `--gemboss-divider` and `--gemboss-text-muted`, which
+  `theme-dark.css` redefines. In light the shift is a hair (header `#f7f7f7` → `#f2f3f5`, border `#e3e3e3` → `#e5e7ea`);
+  the code-language label goes `#8a8a8a` → `#686b71`.
+- `.gemboss-ec-stop`: `--gemboss-danger` with the send button's `--gemboss-on-primary` ink. Light is unchanged (white
+  on `#d72c0d`, 4.9:1); dark is `#0d0d12` on `#ff6b5a` (6.9:1), where white would be 2.8:1.
+- `.gemboss-page-draft-status button` border: `--gemboss-divider` (was `#ccc`), as kit buttons. Lifted board card
+  (`[data-gb-lifted]`): `--gemboss-shadow-raised`.
+
+Unchanged on screen
+- Focus rings read `var(--ui-focus, #5661f5)` (the undeclared `--gemboss-focus` in front of it is gone); the trace
+  `code` font is the literal mono stack; the assistant thread rail's selected row is the literal `rgba(0,0,0,0.07)`
+  the export already wrote for it (`--gemboss-active-bg` is lighter than the row's `--gemboss-hover`, so it would
+  read as less selected than a hovered row).
+
+Tests: `tokens-declared.test.ts` (every `var(--gemboss-*)` in the package's CSS and JS names a token the package
+declares; only the editor's runtime `--gemboss-pv-*` and `--gemboss-editor-topbar-h` are exempt). On 0.36.0 it fails
+with 30 reads of eight tokens. `chat-plain.test.ts` (0.35.4) removed the bubble rules and expected a dark answer to fall
+under 3:1; with theme tokens underneath it no longer does, so that control now holds it at 4.5:1 or more (6.54 at its
+weakest). The seller's bubble, light and dark, still falls under 3:1 without its rules.
+
+## 0.36.0 (15/10/2026)
+
+**ServiceSwitcher: the logo goes home, the button beside it opens every other Gem service.** Chris 15/10/2026: on an
+internal service, a click on the logo goes home, and beside it a dropdown to the other Gem services, ordered and organised,
+working on a phone, a full panel when needed: a grid of each service's logo with a line under it saying what it is for.
+README "ServiceSwitcher".
+
+Added
+- `ServiceSwitcher` (client): a nine-dot button after the brand (`aria-haspopup="dialog"`, `aria-expanded`; 32px, 44 under a
+  finger or at phone width) opening a native `<dialog class="gb-svc">` through `useModalDialog`. Desktop: under the topbar
+  from the brand's left edge, `min(760px, 100vw - 24px)` wide, at most 80% of the height. ≤640px: the whole screen, two
+  columns, `env(safe-area-inset-*)`. A search box (name, purpose, group; Enter follows the first match), the groups in
+  order, tiles that are links to each home (same tab); the current service's tile is `aria-current="page"` with the accent
+  ring and still links home. Arrows by place on screen, Home / End, one tile in the Tab order; it opens on the current tile.
+- `BrandLockup switcher={{ current, services?, labels?, allHref?, search? }}`: the logo link as before, the button after it.
+  Without the prop the lockup renders exactly as before.
+- `GEM_SERVICES`, `SERVICE_GROUPS`, `SERVICE_TINTS`, `groupServices()` and the types `GemService`, `ServiceId`,
+  `ServiceGroup`, `ServiceGroupId`, `ServiceTint` (src/services.ts, plain data, also `@gemboss/ui/services`): sixteen
+  services in six groups, in the order a store is built and run: GemBoss; Build the store (GemFactory, GemMedia, GemForm);
+  Read the market (GemWatcher, GemMarket, GemCapture, Search Radar); Content and community (GemPress, Content Radar,
+  GemCommunity, GemCommunity News); Customers (GemCare, GemFeedback); Team and partners (Partner Radar, Taskdesk).
+- `SERVICES_HEALTH_URL` (GemFactory's `/services`), the panel's default foot link.
+- `service-switcher.css`: its own entry `./service-switcher.css`, loaded by the component; `gemboss-ui.css` and the core
+  unchanged. Nine tint hues as `--gb-svc-*` tokens on `:root`, lighter under `:root[data-theme="dark"]`, always mixed with
+  the theme's own surface and text.
+- `Icon name="apps"`: nine dots, drawn as `more` draws its three (the set is 45 icons).
+- Plain HTML: `service-switcher-plain.js` (`@gemboss/ui/service-switcher-plain.js`, its own entry, in `sideEffects`),
+  `gembossUI.initServiceSwitcher(options?)` and `gembossUI.GEM_SERVICES`. A placeholder
+  `<span data-gb-service-switcher="<service id>" hidden>` right after `.gb-brand` is replaced by the component's button and
+  panel, the same DOM (asserted node for node against the React component in Chromium), so `service-switcher.css` draws it
+  unchanged, with the same behaviour. Options are the component's props (`labels`, `allHref`, `search`, `services`,
+  `className`, `current`) plus `root`. Idempotent; a call in `<head>` draws the rest at `DOMContentLoaded`. Adds to
+  `gembossUI` (after `kit-plain.js`, which it never replaces; alone it defines it), closes an open kit menu when the panel
+  opens. The catalogue is a literal block held to `services.ts` + `icons.tsx` by `service-switcher-plain-data.test.ts`
+  (`UPDATE_PLAIN_CATALOGUE=1` writes it). README "ServiceSwitcher" › "Plain HTML". `kit-plain.js` is unchanged.
+- Catalog section "Chuyển dịch vụ" (the panel open at 1280, in dark, at 390, and a live plain-HTML frame running
+  `service-switcher-plain.js`); the shell section's lockup carries the switcher.
+- `packages/ui/weight-budget.json`: ceilings for `packages/ui/src/service-switcher.css` and
+  `packages/ui/src/service-switcher-plain.js` (new entries; no existing ceiling raised).
+- Tests: `service-switcher.test.tsx` (catalogue, markup, BrandLockup with and without it, the CSS reaching every class),
+  `service-switcher-browser.test.tsx` (Chromium, in `test:ui-browser`), `css-on-demand.test.ts` rows for the switcher,
+  BrandLockup and services.ts; `service-switcher-plain-data.test.ts` (Node: the plain catalogue against the TypeScript,
+  with its negative control, and the packaging) and `service-switcher-plain-browser.test.ts` (Chromium, in
+  `test:ui-browser`: DOM parity with the component, behaviour, phone, beside kit-plain.js, its own contract).
+
+Changed
+- `BrandLockup`'s module imports the switcher, so it brings `service-switcher.css` (1.8 KB gzip) and the switcher's code
+  wherever a bundler keeps what is imported, also without the prop.
+- The phone topbar with a switcher in it: under 360px the search's floor drops from 96 to 56px (the bar has no other
+  room: ☰, mark, button, search, assistant, account). A bar without the switcher is unchanged.
+
+
 ## 0.35.7 (15/10/2026)
 
 **The rail's scrollbar runs down the rail's edge.** The 12px side gutter was padding on `.icon-nav`, so the scroll box

package/README.md

@@ -62,12 +62,15 @@ its CSS out of the build with it (`sideEffects`). gzip of the minified file, as
 | theme-dark | `@gemboss/ui/theme-dark.css` | `packages/ui/src/theme-dark.css` | the dark palette | 0.6 KB | `ThemeToggle` and `themeScript` (`theme-script.ts`, without portal.css) import it |
 | collections | `@gemboss/ui/collections.css` | `packages/ui/src/collections.css` | tables, lists, grids, boards | 4.6 KB | `IndexTable`, `ResourceList`, `Board`… import it |
 | editor | `@gemboss/ui/editor.css` | `packages/ui/src/editor.css` | the editors | 7.9 KB | the `@gemboss/ui/editor` components import it |
+| editor-repeater | `@gemboss/ui/editor-repeater.css` | `packages/ui/src/editor-repeater.css` | `RepeaterList`: a setting that is a list, as rows | 0.9 KB | `RepeaterList` imports it |
+| editor-tiles | `@gemboss/ui/editor-tiles.css` | `packages/ui/src/editor-tiles.css` | `ChoiceTiles`: a closed choice of shapes as picture tiles | 0.5 KB | `ChoiceTiles` imports it |
 | reactions | `@gemboss/ui/reactions.css` | `packages/ui/src/reactions.css` | the emoji reactions and their picker | 0.8 KB | `Reactions` / `ReactionPicker` import it |
 | assistant-engine | `@gemboss/ui/assistant-engine.css` | `packages/ui/src/assistant-engine.css` | the engine picker (chip + Engine/Setup/Status popup) and the bridge notice | 1.9 KB | `EnginePicker` / `EnginePanel` / `BridgeNotice` import it |
 | chat | `@gemboss/ui/chat.css` + `chat-composer.css` | `packages/ui/src/chat.css`, `packages/ui/src/chat-composer.css` | the chat body, the composer | 3.0 + 0.9 KB | the chat components (0.29.0); a page writing the markup links them |
 | assistant-chat | `@gemboss/ui/assistant-chat.css` | `packages/ui/src/assistant-chat.css` | the chat pieces the package draws (0.29.0): column, starters that wrap, meta, errors, notes, paperclip | 0.9 KB | `AssistantChat` and its pieces import it |
 | minichart | `@gemboss/ui/minichart.css` | `packages/ui/src/minichart.css` | `Sparkline`, `ShareBar` (0.30.0) | 0.5 KB | those components import it |
 | setup-guide | `@gemboss/ui/setup-guide.css` | `packages/ui/src/setup-guide.css` | `SetupGuide` (0.30.0) | 0.9 KB | `SetupGuide` imports it |
+| service-switcher | `@gemboss/ui/service-switcher.css` | `packages/ui/src/service-switcher.css` | `ServiceSwitcher`: the button after the brand and its panel of Gem services (0.36.0) | 1.8 KB | `ServiceSwitcher` imports it, and `BrandLockup` through it (README "ServiceSwitcher") |
 | bundle | `@gemboss/ui/gemboss-ui.css` | `gemboss-ui.css` | core + components + shell + auth + assistant + chat + portal + theme-dark | 21.9 KB | compatibility only (see CHANGELOG 0.23.0) |
 
 The core alone is 14.7 KB against 21.7 for the bundle (each part opens with a short header naming the gemboss commit, kept through minify, so a surface serving the parts can still say which commit its CSS is); a list page adds collections (4.6), a sign-in page auth (2.6).
@@ -639,7 +642,7 @@ import "@gemboss/ui/editor.css";   // only on the screens that show an editor
 | Controls | text / select `.gemboss-field.gemboss-ei-inp` (+ `.gemboss-ei-suffix`, `.gemboss-ei-mono`), segmented `.gemboss-ei-seg`, colour `.gemboss-ei-color` / `.gemboss-ei-swatches › .gemboss-ei-sw` / `.gemboss-ei-swatch`, range `.gemboss-ei-range` + `.gemboss-ei-rangeval`, spacing box `.gemboss-ei-edgebox › .gemboss-ei-edge`, image `.gemboss-ei-img` (`-thumb`, `-ctl`, `-actions`, `-grid`, `-cell`), repeater `.gemboss-ei-rep-item` (`-head`, `-acts`, `-add`), blocks `.gemboss-ei-block` (`-head`, `-x`), add `.gemboss-ei-addrow` / `.gemboss-ei-addchip`, element tree `.gemboss-ei-tree › .gemboss-ei-tnode` (`-tname`, `-tacts`, `-tadd`), notes `.gemboss-ei-note`, `.gemboss-ei-oos` (`-h`), `.gemboss-ei-empty`, drag `.gemboss-ei-drag` / `.gemboss-ei-dragmask` |
 | Layers | `.gemboss-layers` › `.gemboss-layer-head` + `.gemboss-layers-list` › `.gemboss-layer` (`.is-sel`) › `.gemboss-layer-main` (`.gemboss-layer-type`) + `.gemboss-layer-acts` (`.gemboss-layer-del`) |
 | Settings drawer | `.gemboss-settings` › `.gemboss-picker-head` + `.gemboss-settings-body` › `.gemboss-settings-field`, `-grouphead`, `-gen`, `-note`, `-error`, `-handle`; `.gemboss-settings-foot` (`-save`, `-cancel`); backdrop `.gemboss-picker-backdrop`, empty `.gemboss-picker-empty` |
-| Page / section editor bar | `.gemboss-pageedit` (`-top`, `-title`, `-kind`, `-status`, `-standing`, `-scope`, `-modes`, `-notice`, `-chip`, `-pv`), `.gemboss-sec-type`, section insert `.gemboss-sec-insert-*`, draft preview `.gemboss-page-draft-stage` / `-status`, `.gemboss-page-section-content`, global styles bundle `.gemboss-bundle-look` |
+| Page / section editor bar | `.gemboss-pageedit` (`-top`, `-title`, `-kind`, `-status`, `-standing`, `-scope`, `-modes`, `-notice`, `-chip`, `-pv`; the left cluster's gap is `--gemboss-tb-gap`, 12px, for a child that hands it back; above 1000px the bar's tracks are `auto fit-content(100%) auto`, so its free space sits beside the centre), `.gemboss-sec-type`, section insert `.gemboss-sec-insert-*`, draft preview `.gemboss-page-draft-stage` / `-status`, `.gemboss-page-section-content`, global styles bundle `.gemboss-bundle-look` |
 | Try door bar | `.gemboss-editor-topbar--guest` › `.gemboss-guest-brand` (`.gemboss-guest-mark`), `-note`, `-keep`, `-signin` |
 
 Not here, on purpose: the body modes that hide the admin's own topbar and rail while an editor is open
@@ -696,7 +699,7 @@ import { DeviceToggle, EditorBack, EditorChatToggle, EditorFrame, EditorPaneTabs
 | `EditorTopbar` | `header.gemboss-editor-topbar` › `-tb-left` (`back`, `chatToggle`, `title`, `left`) · `-tb-center` · `-tb-right`; then the status line | `variant`: `theme` (page picker + split Publish), `page` (`.gemboss-pageedit-top`: a title, a type chip, a status), `guest` (the try door). `status` draws `.gemboss-editor-statusbar.<state>` under the bar while its message is not empty. |
 | `EditorBack` | `.gemboss-editor-back` ← | A `<button type="button">`, or `as={Link}` / `as="a"` with `href`. Named "Back" for a screen reader (`label`). |
 | `EditorChatToggle` | `.gemboss-editor-chat-toggle` | Shows / hides the left column; filled while open, pressed when collapsed. |
-| `EditorSaveState` | `.gemboss-editor-savestate` (`.is-saving` with the spinner, `.is-saved`) | `idle` draws nothing, or `idleText` dimmed (the section editor's "Autosaves"). Texts and titles are props. |
+| `EditorSaveState` | `.gemboss-editor-savestate` (`.is-idle`, `.is-saving` with the spinner, `.is-saved`) | `idle` draws nothing, or `idleText` as `.is-idle` (muted, 5.3:1 on the bar; the section editor's "Autosaves", the page editor's "Draft saved · <when>"). `.is-saved` is hidden at 760px and below. Texts and titles are props. Saving and saved are a polite live region (`role=status`) unless `live={false}`: for a surface with its own live region, present from its first render, that says only what changed (the admin's page editor). |
 | `DeviceToggle`, `MonitorGlyph`, `TabletGlyph`, `PhoneGlyph` | `.gemboss-pv-devices` › `.gemboss-pv-device` | Desktop / tablet / mobile. Moved from the admin unchanged; `TabletGlyph` exported 0.26.0 (it was inline in the toggle). |
 
 One module per piece behind one entry, so a bundler gives each editor only what it draws (measured: one module for all
@@ -870,7 +873,11 @@ gembossUI.initPasswordFields(); // the sign-in's reveal button; resetPasswordFie
 
 In a bundled app (Next, Vite) load it once with a bare `import "@gemboss/ui/kit-plain.js";` in a client module: the
 package lists the file in `sideEffects`, so the bundler keeps it (before 0.5.0 it dropped it and `gembossUI` was
-undefined in production builds). Use `confirm` instead of `window.confirm()`: the browser's box has no GemBoss look, no critical tone, and its
+undefined in production builds). Loading it writes nothing on `<html>` (0.37.1): the `data-gb-menus` flag kit-plain.css
+reads (an open menu's list stays unpainted until the script floats it) goes on in the capture phase of the click that
+opens a menu, before the browser opens it. Up to 0.36.1 the script set it as it loaded, and a client module can run
+before React hydrates `<html>`: React reported an attribute the server did not render (talent-radar, post-studio: 1
+load in 3). `suppressHydrationWarning` on `<html>` is not needed for it any more; drop it unless something else writes there. Use `confirm` instead of `window.confirm()`: the browser's box has no GemBoss look, no critical tone, and its
 buttons cannot be named. For `initShell`, put `data-label-open` / `data-label-close` on the ☰ button to have its
 name follow the state; for `initPasswordFields`, `data-label-show` / `data-label-hide` on the reveal button.
 
@@ -1203,6 +1210,166 @@ import { Icon, SettingsDialog } from "@gemboss/ui";
 `packages/ui/src/settings-dialog-browser.test.tsx` measures it in Chromium; its negative control runs without
 `settings-dialog.css` and finds no 280px rail. Catalog section "Hộp cài đặt".
 
+## ServiceSwitcher (0.36.0): the logo goes home, the button beside it opens the other Gem services
+
+Chris 15/10/2026: on an internal service, a click on the logo goes home (or reloads it), and beside it there should be a
+way to switch to the other Gem services, "ordered and organised logically", working on a phone, opening when needed as a
+full panel: a grid of each service's logo with a line under it saying what it is for.
+
+```tsx
+import { AppShell, BrandLockup, ServiceSwitcher } from "@gemboss/ui";
+
+<AppShell brand={<BrandLockup name="GemFactory" href="/" switcher={{ current: "gemfactory" }} />} … />
+
+// A surface with a logo of its own (the GemBoss admin draws an image): the button right after it.
+<><Logo /><ServiceSwitcher current="gemboss" /></>
+```
+
+**When.** On the topbar of an INTERNAL service, beside its logo. Not on a public surface (GemFeedback's board,
+GemCommunity, a storefront): the panel names internal tools and links to their admin pages.
+
+| | |
+| --- | --- |
+| Props | `current` (a `ServiceId`, required): the service this page belongs to. `services` (default `GEM_SERVICES`; another list keeps the groups' order). `labels`: `trigger` ("Switch service", the button's name and tooltip), `title` ("Gem services"), `close`, `search` ("Find a service"), `noMatch` ("No service matches “{query}”."), `all`. `allHref`: the foot link, default `SERVICES_HEALTH_URL` (GemFactory's `/services`, every service and its health); `null` draws no foot. `search` (default true). `className` (the button). `BrandLockup switcher={…}` takes the same, less `className`. Every prop is plain data, so a server component can pass it (BrandLockup is not a client module; ServiceSwitcher is) |
+| The button | `button.gb-svc-trigger`, the nine-dot `apps` icon (new in the set), `aria-haspopup="dialog"`, `aria-expanded`, `aria-controls` the panel. 32px under a mouse, 4px from the brand; 44 under a finger or at phone width; ≤460px, where the brand is its 44px mark alone, 40 wide and touching it |
+| The panel | `<dialog class="gb-svc">` through the kit's `useModalDialog` (as `Dialog`, `Sheet`, `SettingsDialog`): Escape (one press, also from the search box), ✕ (the kit popup's `ui-modal__close`), a press that starts on the backdrop; the page behind is inert and holds still; focus goes back to the button. It opens on the current service's tile (not on ✕, not on the search box, which would pull up a phone's keyboard). Each opening starts with every service shown |
+| Where | desktop: 6px under the bar that holds the button, from the brand's left edge (measured when it opens, kept inside the window), `min(760px, 100vw - 24px)` wide, at most 80% of the height, its body scrolling. The bar (0.37.1) is the closest `.gemboss-platform-topbar`, `header` or `[role="banner"]` around the button (62 at 1280 on the kit's 56px topbar; GemNews's own 56px `<header>` the same, where 0.36.1 measured from the 32px button and opened at 50, over the header's last 6px); with none, 6px under the button. Both implementations, one selector (`service-switcher-plain-data.test.ts`). ≤640px: the whole screen, a head row (title + ✕), two columns, padded by `env(safe-area-inset-*)` |
+| A tile | an `<a href>` to the service's home, same tab: a 40px mark (a kit `Icon` on a square tinted per service), the name (600), what it is for (muted, two lines at most). The current service's tile carries `aria-current="page"` and the accent ring, and still links to its own home. A followed tile closes the panel (a page back from the back/forward cache does not come back with it open); a new-tab click leaves it |
+| Search | name, purpose, id and group title; the groups keep their order; "No service matches “…”." when nothing does; Enter follows the first match ("med⏎" is GemMedia); ↓ goes to the first tile |
+| Keys | arrows move by place on screen (↓ from a tile is the one under it, also across groups), Home / End the first and the last, ↑ from the first row the search box. One tile is in the Tab order at a time |
+| Tints | `data-tint` on the tile, one of `SERVICE_TINTS` (iris, blue, teal, green, amber, orange, rose, violet, slate). A hue is never painted as it is: the mark is the hue mixed into the theme's surface (14%, 22% in dark), the glyph the hue mixed with the theme's text, so one value reads in light and in `data-theme="dark"` (lighter hues there). Measured in Chromium, both themes: every glyph ≥ 3:1 on its mark, names and purposes ≥ 4.5:1 |
+| CSS | `service-switcher.css`, its own entry, 1.8 KB gzip, imported by the component. `BrandLockup` imports the component, so a surface that renders `BrandLockup` gets the entry (and the switcher's code) even without the prop: 1.8 KB of CSS, and 5.8 KB gzip of JS for brand.tsx's module graph against 0.5 before (most of it the icon set and the popup hook, which a surface with a rail already has) |
+| The topbar | `.gemboss-topbar-start` holds ☰, the brand and the button. ≤460 the button is 40 wide and touches the mark, so a full bar (search at its 96px floor, the assistant, the account) still fits at 360. Under 360 nothing else can give: in a bar that holds the switcher, the search's floor drops from 96 to 56 (still a box to tap), rather than the account leaving the screen. 0.37.1: narrower than 96 (a container query on the centre slot, only in that bar under 360) the box is the search icon alone, centred: its words would show a few px (2 at 320). `TopbarSearch`: the input covers the box, its placeholder unpainted, its name its `aria-label`, the icon stepping aside while it is focused or holds words. `SearchDialog trigger="field"`: the words stay the link's name, visually hidden. Measured at 300 / 320 / 340 (56 / 58 / 78 wide); at 359 and up, and in a bar without the switcher, nothing changes |
+
+The groups, in order, are how a store is built and then run (`SERVICE_GROUPS`, services.ts):
+
+| Group | Services |
+| --- | --- |
+| GemBoss | GemBoss (the seller app and the ops console) |
+| Build the store | GemFactory, GemMedia, GemForm, GemX |
+| Read the market | GemWatcher, GemMarket, GemPixel, GemCapture, Search Radar |
+| Content and community | GemPress, Content Radar, GemCommunity, GemCommunity News |
+| Customers | GemCare, GemFeedback |
+| Team and partners | Partner Radar, Taskdesk |
+
+**Adding a service** (or moving one): one entry in `GEM_SERVICES` (`packages/ui/src/services.ts`), in its group, at its
+place in that group's story: `{ id, name, url, purpose, group, icon, tint }`. Its id joins `ServiceId`; the purpose is one
+plain sentence of at most 60 characters; the icon is a name of the set (draw a missing one in icons.tsx, by the set's
+rules); the tint one of `SERVICE_TINTS`, not the same as the tile before it. `service-switcher.test.tsx` checks all of that,
+and the homes as listed. Then run `UPDATE_PLAIN_CATALOGUE=1 npx vitest run packages/ui/src/service-switcher-plain-data.test.ts`:
+it writes the plain script's copy of the list (below), and without it that test is red. Every surface gets it at its next
+bump. A server reads the list from `@gemboss/ui/services`.
+
+`packages/ui/src/service-switcher-browser.test.tsx` measures it in Chromium (where it sits at 1280, Escape / ✕ / backdrop,
+search, keys, a phone at 390 and 320, the topbar at 320 / 360 / 390 / 461, the search under its floor at 300 / 320 / 340
+for both searches, the tints in both themes, kit-plain.js beside it); its negative controls run without
+`service-switcher.css` (the browser's centred dialog) and with 0.36.1's sheet (2px of the search's words at 320).
+`service-switcher-plain-browser.test.ts` measures where the panel hangs, both implementations: the kit's topbar, GemNews's
+own header, no bar. Catalog section
+"Chuyển dịch vụ", and the shell section's lockup carries it.
+
+### Plain HTML: `gembossUI.initServiceSwitcher()` (0.36.0)
+
+For a page with no React (GemCapture's ops admin, GemPress's admin, GemCare, Taskdesk): the server writes a placeholder
+right after its `.gb-brand`, and `service-switcher-plain.js` draws the component's button and panel in its place, the
+same DOM (classes, ARIA, order), so `service-switcher.css` draws it unchanged, and the same behaviour. Its own file, not
+`kit-plain.js` (which had 485 bytes gzip left under its ceiling at 0.36.0): 4.5 KB gzip, loaded only where the switcher is.
+A page with its own header (not the kit's topbar) needs nothing more: the panel hangs under the `header` or
+`[role="banner"]` around the button (0.37.1).
+
+```html
+<head>
+  <link rel="stylesheet" href="/ui/service-switcher.css">   <!-- require.resolve("@gemboss/ui/service-switcher.css") -->
+</head>
+…
+<div class="gemboss-topbar-start">
+  <a class="gb-brand" href="/admin" aria-label="GemCapture home">…</a>
+  <span data-gb-service-switcher="gemcapture" hidden></span>   <!-- the value: this service's id (services.ts) -->
+</div>
+…
+<script src="/ui/kit-plain.js"></script>                  <!-- @gemboss/ui/kit-plain.js, if the page has it: FIRST -->
+<script src="/ui/service-switcher-plain.js"></script>     <!-- @gemboss/ui/service-switcher-plain.js -->
+<script>gembossUI.initServiceSwitcher();</script>
+```
+
+```js
+gembossUI.initServiceSwitcher({                 // every option is optional, and the component's prop of the same name
+  labels: { trigger: "Chuyển dịch vụ", title: "Dịch vụ Gem", close: "Đóng", search: "Tìm dịch vụ",
+            noMatch: "Không có dịch vụ nào khớp “{query}”.", all: "Mọi dịch vụ và tình trạng" },
+  allHref: null,                                // the foot link; default GemFactory's /services; null draws none
+  search: false,                                // the search box (default true)
+  services: gembossUI.GEM_SERVICES.filter((s) => s.group !== "team"),   // default every service
+  className: "…",                               // added to the button's class
+  current: "gemcapture",                        // instead of the placeholder's value
+  root: element,                                // where to look for placeholders (default the document)
+});                                             // → [{ button, dialog, open(), close() }] for what it drew
+```
+
+| | |
+| --- | --- |
+| The placeholder | any element with `data-gb-service-switcher="<service id>"`, right after the brand; `hidden`, so it takes no room (nor the topbar's gap) before the script runs or where it never does. It is REPLACED by `button.gb-svc-trigger` + `dialog.gb-svc`: the button has to be the brand's next sibling, as `BrandLockup` draws it, for `.gb-brand + .gb-svc-trigger` (4px from the logo; at ≤460 40 wide and touching it, so the phone bar fits at 360) and for the panel to hang from the brand's left edge. A wrapper around the button would break all three |
+| Calls | idempotent: a placeholder is drawn once (it is gone after), so a second call draws nothing, and markup added later (`root`) is drawn by the next call. Called while the page still loads (in `<head>`), it draws what is parsed and the rest at `DOMContentLoaded`. Each switcher gets ids of its own |
+| `gembossUI` | a classic script that ADDS to it: after `kit-plain.js` when the page has it, because `kit-plain.js` defines nothing when `gembossUI` already exists (loaded the other way round it says so in the console). On its own it defines `gembossUI` with `initServiceSwitcher` and `GEM_SERVICES` only. With `kit-plain.js`, opening the panel closes an open kit menu (`closeMenus`: an open account menu would take the first Escape) |
+| Behaviour | the component's, item for item (table above): `showModal()`, Escape / ✕ / a press that starts on the backdrop, focus back to the button, opens on the current tile, search (Enter follows the first match, ↓ to the tiles), arrows by place on screen, Home / End, ↑ to the search box, one tile in the Tab order, a followed tile closes it. Strings are text |
+| The list | `GEM_SERVICES` as data inside the script, with the paths of the icons it names, held to `services.ts` + `icons.tsx` character for character by `service-switcher-plain-data.test.ts` (red when either moves without it; `UPDATE_PLAIN_CATALOGUE=1` writes it). A literal copy and a test, as the other plain scripts carry their TypeScript twins: the published file is the source minified, with no build step that could write it. A list of your own (`services`) uses the icons the catalogue names |
+| Inline | it holds no closing script tag, so a server can inline it (`readFileSync(require.resolve("@gemboss/ui/service-switcher-plain.js"))`), as it does `kit-plain.js` |
+
+`packages/ui/src/service-switcher-plain-browser.test.ts` (Chromium, in `test:ui-browser`) renders the React component and
+this script for the same props on the same shell and compares the two DOMs node for node (generated ids aside): closed,
+open, filtered, nothing matching, after the keys, closed again, and with labels, no foot, no search and a list of its own;
+its negative control changes one attribute and the comparison sees it. Then the component's own checks on the plain page
+(1280, Escape / ✕ / backdrop, search, Enter, keys, 390 and 320 full screen, the bar at 320 / 360 / 390, kit-plain.js
+beside it, idempotence, `<head>`, alone, the wrong order). Catalog section "Chuyển dịch vụ", last frame: the plain page,
+live.
+
+## Repeater rows (16/10/2026): `RepeaterList`, `useKeyedRows`
+
+A setting that is a list (an accordion's items, a pricing table's plans, choice cards) is the element's content. The admin's
+Canvas panel and page editor drew it as boxes always open, moved one place at a time with ↑ ↓; PageFly and GemPages draw it as
+rows (research `_local/gemboss/research/pickers-2026-10-16/pickers.md` §9, P11). `RepeaterList` is that, for both admin
+surfaces, with its own part (`editor-repeater.css`, the rules that were in `editor.css` plus the new ones).
+
+```tsx
+import { RepeaterList, useKeyedRows } from "@gemboss/ui/editor";
+
+const list = useKeyedRows(items, (next) => save({ items: next }));   // a stable key per row; the whole list written per change
+<RepeaterList label="Questions" keys={list.keys} title={(i) => list.rows[i].question}
+  body={(i) => { const key = list.keys[i]; return <QuestionFields row={list.rows[i]} onChange={(field, v) => list.patch(key, (row) => ({ ...row, [field]: v }))} />; }}
+  onMove={list.move} onRemove={list.remove} onDuplicate={list.duplicate} onAdd={() => list.add({ question: "", answer: "" })} />
+```
+
+| Part | Markup | Behaviour |
+|---|---|---|
+| list | `.gemboss-ei-fld.gemboss-ei-rep` › `label` (+ `.gemboss-ei-rep-count`) · `hint` · `.gemboss-ei-rep-list` · `button.gemboss-ei-rep-add` | the count beside the name; "No items yet." (or `empty`) without rows; `canAdd={false}` turns add and duplicate off |
+| row | `.gemboss-ei-rep-item[data-key]` (`.is-dragging`, `data-drop=before\|after`) › `.gemboss-ei-rep-head` › `.gemboss-ei-rep-grip` · `button.gemboss-ei-rep-toggle[aria-expanded]` (`.gemboss-ei-rep-title`) · `.gemboss-ei-rep-acts` (↑ ↓ duplicate ✕) | drag the grip (a 2px line where it lands, `useRowDrag`, the Layers rule); the name folds and opens the row; Alt+↑/↓ on it moves the row and keeps the focus; more than one row opens folded, a row added or duplicated later opens |
+| body | `.gemboss-ei-rep-body[role=group]` | drawn only while the row is open |
+
+`useKeyedRows(value, commit)` keeps a key per row that moves, duplicates and is removed with it, so a row's open state and its
+controls' unsaved typing follow it (measured in `editor-repeater-browser.test.tsx`, with the same list keyed by index as the
+negative control). It shows a written list at once; `commit` may answer (a Promise of true / false) and a refusal puts the
+stored list back; the stored list is read by content (a new `[]` each render is no change); one of its own writes coming
+back is not a change; any other stored list (an undo) replaces what is shown. A field writes with `patch(key, fn)`: by the
+row's key and onto its latest version, so a control that commits late (a colour, a slider) after a move changes the right row
+and after a remove changes none. `touch` makes the buttons 44px with a mouse too (the page editor's content panel).
+Drag is pointer only (HTML drag and drop does not start from a touch); ↑ ↓ stay, 44px under a finger (`editor.css`).
+
+## Choice tiles (16/10/2026): `ChoiceTiles`
+
+A closed choice whose options are shapes (an image's ratio, a layout) as picture tiles with their name under them, as GemPages'
+layout selector draws them: the seller sees the shape before choosing it.
+
+```tsx
+import { ChoiceTiles } from "@gemboss/ui/editor";
+
+<ChoiceTiles label="Aspect ratio" value={ratio} onChange={save}
+  options={[{ value: "original", label: "Original", picture: <ImageIcon /> }, { value: "1-1", label: "1:1", shape: { w: 1, h: 1 } },
+            { value: "16-9", label: "16:9", shape: { w: 16, h: 9 } }]} />
+```
+
+`.gemboss-ei-tiles[role=group]` › `button.gemboss-ei-tile[aria-pressed][data-value]` › `.gemboss-ei-tile-pic` (the picture, or a
+rectangle drawn to fit 26px: wide by its width, tall by its height) · `.gemboss-ei-tile-label`. 4 to a row, 56px tall. The caller
+owns the value; a click calls `onChange`. Its own part (`editor-tiles.css`).
+
 ## Resizable panels
 
 `ui-resizer` is the seam a person drags between two panels; `ui-resizing` on `<body>` is the drag in
@@ -1259,7 +1426,8 @@ const open = dock.presentation !== "hidden";
 - No provider and no state: pass `hidden` while your assistant is open.
 - The shortcut is a hint only: the surface owns the key binding.
 - The phone topbar (≤760px) gives in this order when it is short: the search (to a 96px floor), then the brand name
-  (ellipsis). The actions never shrink, so the account chip stays on screen (0.6.1; `topbar.test.tsx`).
+  (ellipsis). The actions never shrink, so the account chip stays on screen (0.6.1; `topbar.test.tsx`). With a
+  `ServiceSwitcher` in the bar (0.36.0), under 360px the search goes below its floor, to 56px: README "ServiceSwitcher".
 - 0.6.0, not a patch: an existing `<AssistantLauncher>` call changes meaning (no longer fixed; the default copy is the
   rail one, hidden on phones). A surface on `^0.5.x` must move to `^0.6.0` in the same PR that places the two copies.
 
@@ -1284,12 +1452,13 @@ import { AppShell, BrandLockup, AccountMenu, AccountMenuItem, Icon, RailItem } f
 ```
 
 - `BrandLockup`: the admin wordmark's gem and proportions (26px tall, 13.3px/700 name) with your
-  product's name. The name hides below 460px, as the admin's wordmark does.
+  product's name. The name hides below 460px, as the admin's wordmark does. `switcher={{ current: "gemfactory" }}`
+  (0.36.0) adds the button that opens every other Gem service right after it: README "ServiceSwitcher".
 - `AccountMenu`: the admin's 32px initials chip and popover (same CSS). A `<details>`, so it opens
   without JavaScript on a page that never hydrates; with React it also closes on an outside click and
   on Escape. `AccountMenuItem` is a link (`href`), a POST form (`formAction`), or a button.
 - `TopbarSearch` (0.6.3): see "Topbar search" below.
-- `Icon`: the GemBoss set, 39 icons on a 20px grid with 1.5px strokes, drawn to sit next to Polaris.
+- `Icon`: the GemBoss set, 45 icons on a 20px grid with 1.5px strokes, drawn to sit next to Polaris.
   `ICON_NAMES` lists them. Internal tools cannot use `@shopify/polaris-icons`: its licence only covers
   applications that integrate with Shopify. Draw a missing one HERE, not in the surface: every rail
   icon must keep `fill="none"` on its inner `<g>`, because `.gnav-ico svg { fill: currentColor }`
@@ -1314,6 +1483,8 @@ The admin's "Search ⌘K" box for every surface, as a real form (works with no J
   full 44 (0.6.6): the box is a form, so the input is what a finger has to hit. ⌘K hint hidden on focus and below 460px.
 - Shortcut on a page without React: `gembossUI.initSearch()` from `kit-plain.js` (⌘K / Ctrl+K and "/" focus it,
   Escape leaves it). "/" is ignored while another field has focus.
+- In a bar that holds the ServiceSwitcher, under 360px, the box may go below its 96px floor; there it is its icon alone
+  (0.37.1, `service-switcher.css`; README "ServiceSwitcher" › The topbar). `SearchDialog trigger="field"` the same.
 
 ## Public portal pieces (0.7.0)
 
@@ -1690,6 +1861,7 @@ something the base cannot express, add a token or a prop here, and every surface
 | `packages/ui/src/editor/` | 0.14.0, `@gemboss/ui/editor`: `EditorFrame`, `EditorPaneTabs`, `EditorTopbar`, `EditorBack`, `EditorChatToggle`, `EditorSaveState`, `DeviceToggle`. See "Editor frame". 0.17.0: `PanelTabs`, `PanelHeader`, `PanelAction`, `InspectorGroup`, `Field`, `Seg`, `ColorControl`, `RangeControl`, `EdgeBox`, `ImageControl`, `ChipButton`, `swatchState` (`./editor/swatch` too); 0.20.1 `cssUrl`. See "Settings panel". 0.22.0: `LayerList`, `SortableLayerList`, `LayerTree`, `EditorDrawer`. See "Layers and drawer". |
 | `packages/ui/src/editor-plain.js` | 0.14.0: `gembossUI.initEditorFrame()`, the frame's behaviour for plain HTML; 0.17.0: `gembossUI.initEditorPanel()`, the settings panel's. Load after `kit-plain.js`. |
 | `packages/ui/src/editor-layers-plain.js` | 0.22.0: `gembossUI.initEditorLayers()`, the layers', the outline's and the drawers' behaviour for plain HTML. Load after `kit-plain.js`. |
+| `packages/ui/src/service-switcher-plain.js` | 0.36.0: `gembossUI.initServiceSwitcher()`, the ServiceSwitcher drawn and driven for plain HTML (`@gemboss/ui/service-switcher-plain.js`). After `kit-plain.js` when the page has it; works alone. See "ServiceSwitcher". |
 | `catalog/editor.html` | 0.14.0: the frame rendered from the components and running (`packages/ui/scripts/build-catalog-editor.mjs`), linked from `catalog/index.html`. |
 | `packages/ui/src/editor.css` | 0.9.0: the editors (frame, top bar, preview, Configure dock, inspector and controls, Layers, settings drawer, page picker, menus). A separate entry, NOT inside `gemboss-ui.css`; the admin imports it from the editor components, never from a layout. See "Editor CSS" above. |
 | `packages/ui/src/chat.css`, `chat-composer.css`, `assistant.css`, `auth.css`, `app-shell.css` | the chat body, the composer, the assistant frame, the sign-in screen, the topbar slots + base text + the page width tiers (`ui-page`, 0.8.1). All inside `gemboss-ui.css`; the admin @imports `chat.css` and `chat-composer.css` itself. |