@gemboss/ui 0.36.1 → 0.39.0

package/CHANGELOG.md

@@ -2,6 +2,213 @@
 
 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

package/README.md

@@ -62,6 +62,8 @@ 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 |
@@ -640,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
@@ -697,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
@@ -871,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.
 
@@ -1227,21 +1233,21 @@ GemCommunity, a storefront): the panel names internal tools and links to their a
 | 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: under the topbar, 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. ≤640px: the whole screen, a head row (title + ✕), two columns, padded by `env(safe-area-inset-*)` |
+| 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 |
+| 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 |
-| Read the market | GemWatcher, GemMarket, GemCapture, Search Radar |
+| 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 |
@@ -1255,8 +1261,11 @@ it writes the plain script's copy of the list (below), and without it that test
 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 tints in both themes, kit-plain.js beside
-it); its negative control runs without `service-switcher.css` and finds the browser's centred dialog. Catalog section
+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)
@@ -1264,8 +1273,9 @@ it); its negative control runs without `service-switcher.css` and finds the brow
 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 has 485 bytes gzip left under its ceiling and stays as it was): 4.5 KB gzip, loaded only where the
-switcher is.
+`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>
@@ -1312,6 +1322,54 @@ its negative control changes one attribute and the comparison sees it. Then the
 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
@@ -1425,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)