@gemboss/ui 0.40.0 → 0.41.0

package/CHANGELOG.md

@@ -2,6 +2,49 @@
 
 Versions up to 0.9.0 are described in the README, each in the section that introduced it.
 
+## 0.41.0 (20/10/2026)
+
+**A document read over its list** (Chris 20/10/2026, after GemMedia's and partner-radar's Docs drew the same popup with
+their own CSS: "làm đi").
+
+Added
+- `ReaderDialog`: the kit popup sized for reading, `min(1440px, 94vw)` × `min(92dvh, 1200px)`, the whole screen under
+  768px with the head's actions on their own line. It is `Dialog` with `ui-reader` (same props, less `wide`). The body has
+  no padding and is a column the document fills: `ui-reader__frame` (an iframe) or `ui-reader__scroll` (a padded scroller
+  of the surface's own). README "ReaderDialog", catalog "Hộp đọc tài liệu".
+- `packages/ui/src/reader-dialog.css` (`@gemboss/ui/reader-dialog.css`): its own entry, imported by the component; every
+  selector `dialog.ui-modal.ui-reader…`. Nothing moves into the core or the bundle.
+- `reader-dialog.test.tsx` (markup, every class styled, selectors), `reader-dialog-browser.test.tsx` (Chromium: size,
+  fill, scroll, phone head, page lock, Escape; negative control without the entry finds the 460px popup).
+
+**The team chat's rows for a plain page, from the package: `gembossUI.teamChat`** (Chris 20/10/2026: the markup in ONE place,
+so GemCare stops writing it by hand and a change to it is made once).
+
+Added
+- `packages/ui/src/team-chat-plain.js` (`@gemboss/ui/team-chat-plain.js`, its own entry): builders that RETURN elements with
+  the components' markup for the same props: `message` (`Message`, every prop; plus `picking` / `reactionsPicking` /
+  `onPickingChange` for a page that redraws its list), `daySeparator`, `newMessagesLine`, `jumpToLatest` + `updateJump`,
+  `readReceipt`, `channelSection`, `channelItem`, `peopleSection`, `personRow`, `reactions`, `reactionPicker` (the package's
+  picker and its keys, "Frequently used" under the React picker's storage key), `avatar`, `icon`, and `rows` / `dayKey` /
+  `dayWord` (`teamChatRows`, `chatDayKey`, `chatDayWord`). Labels are `TEAM_CHAT_LABELS` (`LABELS`), any subset overridable.
+  Strings are text; callbacks are click listeners. A classic script, ES5, after `kit-plain.js` when the page has it.
+  8,208 B gzip minified (ceiling 8,714 in `weight-budget.json`; a page that draws no team chat never loads it).
+- `team-chat-plain-browser.test.ts` (Chromium, `test:ui-browser`): every builder, in every state, against
+  `renderToStaticMarkup` of its component as one tree (attributes, classes, text, SVG in full); the same clicks and keys on
+  the mounted components and on the plain rows leave the same DOM (the pickers, search, Escape and focus); callbacks,
+  escaping, toolbar and picker keys, `updateJump`, the load-order warning. `team-chat-plain-data.test.ts` (node): the
+  generated block (icons, emoji set; `UPDATE_PLAIN_TEAM_CHAT=1` writes it) and the ES5 copies (labels, initials, tone,
+  reaction helpers, row rules) held to the TypeScript.
+- `team-chat.test.fixtures.tsx`: the contract test's data, now shared with the plain parity test (the README is unchanged).
+- The catalog's "Chat đội" section has a live plain-HTML frame built with `gembossUI.teamChat`.
+
+**A list whose items come from elsewhere** (item management IM2, 21/10/2026: a list that shows a content type).
+
+Changed
+- `RepeaterList` `onMove` and `onRemove` are optional. Without `onMove` the rows keep their order: no grip, no ↑ ↓, no
+  Alt+arrows, no drop. Without `onRemove`, no ✕. A row still opens (inline or in the popover) and still says it was picked
+  (`onActive`). The admin draws a list read from Content this way: its order and its rows are Content's. No CSS change.
+
 ## 0.40.0 (20/10/2026)
 
 **A list's item edits in a popover** (item management IM1a, Chris 20/10/2026; GemPages 7.5's "Item management" read in its code).
@@ -17,6 +60,14 @@ Added
 - `packages/ui/src/editor-repeater.css`: the popover's placement and header, the picked row's outline, the picture (+220 B gzip,
   1,096 of its 1,384 B ceiling). The surface is the fleet's `gemboss-popover-surface`.
 
+**An inspector's tabs stand on the fields' edge** (Chris 20/10/2026: "cùng là tabs mà chỗ to chỗ nhỏ").
+
+Fixed
+- `packages/ui/src/editor.css`: `.gemboss-ei-tabs` inside a settings body or the column's dock drop their 12px side margin
+  (`:is(.gemboss-settings-body,.gemboss-ec-dock-body)`), so the Settings · Advanced track lines up with the fields under it (the
+  canvas's element and section panels measured 34–360 and 316px over fields at 22–372). A docked inspector keeps its own, more
+  specific rule; a floating inspector keeps 12px. +15 B gzip (8,680 of 8,690).
+
 **A phone pays for the topbar once, and the full-screen assistant gets the whole width** (measured on the admin at 390×844,
 19/10/2026).
 

package/README.md

@@ -71,6 +71,7 @@ its CSS out of the build with it (`sideEffects`). gzip of the minified file, as
 | 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 |
+| reader-dialog | `@gemboss/ui/reader-dialog.css` | `packages/ui/src/reader-dialog.css` | `ReaderDialog`: the popup sized for reading a document (0.41.0) | 0.4 KB | `ReaderDialog` imports it |
 | service-switcher | `@gemboss/ui/service-switcher.css` | `packages/ui/src/service-switcher.css` | `ServiceSwitcher` and `Switcher`: the button after the brand and its panel (0.36.0; any list, illustrated tiles 0.40.0) | 2.2 KB | `ServiceSwitcher` imports it, and `BrandLockup` through it (README "ServiceSwitcher") |
 | team-chat | `@gemboss/ui/team-chat.css` | `packages/ui/src/team-chat.css` | the team chat layer (20/10/2026): rail, messages, composer, thread and people panels, the screen's layout | 3.6 KB | `TeamChat` and its pieces import it (with `Avatar`'s portal.css and `Reactions`' reactions.css); a plain-HTML page links it (README "The team chat layer") |
 | 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) |
@@ -1177,6 +1178,40 @@ The body scrolls under a head that stays, and scrolling past its end does not sc
 contain`). `packages/ui/src/sheet-browser.test.tsx` measures it in Chromium; its negative control runs the same probe
 without `sheet.css` and finds the centred popup. Catalog section "Ngăn trượt cạnh phải".
 
+## ReaderDialog (0.41.0): a document read over its list
+
+Two surfaces drew the same popup with their own CSS the same week, because `Dialog`'s widths (460, `wide` 620) are a
+form's: GemMedia's admin Docs (gemmedia #76) and partner-radar's Docs (gemlabs #1122) open a long document over the list
+of documents, nearly the whole window, the whole screen on a phone. Chris 20/10/2026: put it in the kit. `ReaderDialog`
+is that popup:
+
+```tsx
+import { ReaderDialog } from "@gemboss/ui";
+
+<ReaderDialog open onClose={close} title={doc.title} subtitle={`v${doc.version} · updated ${doc.updated}`}
+  actions={<><CopyLink slug={doc.slug} /><a className="ui-btn ui-btn--sm" href={doc.src} target="_blank">Open in a new tab</a></>}>
+  <iframe className="ui-reader__frame" src={doc.src} title={doc.title} />
+</ReaderDialog>
+```
+
+The body is the document's. Give it one child that fills it: `iframe.ui-reader__frame` for a self-contained HTML
+document, or a scroller of your own with `ui-reader__scroll` (padded 24/32/48, 16/16/40 on a phone; it scrolls, keeps
+its overscroll, and takes `tabIndex={-1}` and focus so the arrow keys and Space read the document). Keys pressed inside
+an iframe do not reach the `<dialog>`: a surface that wants Escape there forwards it (`frame.contentWindow` keydown →
+`dialog.close()`, same-origin). A route that draws it (Next's intercepting route) leaves `open` true and goes back in
+`onClose`, as with `Sheet`.
+
+| | |
+| --- | --- |
+| Markup | `<dialog class="ui-modal ui-reader">` with the popup's own `ui-modal__head` (title, `__subtitle`, `__actions`, ✕), `__body`, `__foot` |
+| Behaviour | It is `Dialog` with `ui-reader` on it (one render tree, one hook, `useModalDialog`): Escape, ✕ and a press that started on the backdrop close it, `onClose` hears each once, the page behind is inert and holds still (`html:has(dialog.ui-modal:modal)`), focus goes back to the opener. On open focus goes to the first control, as `Dialog`'s; move it to your document |
+| Size | `min(1440px, 94vw)` × `min(92dvh, 1200px)`, centred, from 768px up; the whole screen below that, where the actions take their own line under the title and ✕ stays beside it |
+| CSS | `reader-dialog.css`, its own entry, loaded by the component. Every selector is `dialog.ui-modal.ui-reader…` ((0,2,1)). It lays itself out (no padding, border-box, a column the document fills), so it works on a surface that loads `ui.css` alone. A plain-HTML surface links `@gemboss/ui/reader-dialog.css` beside `gemboss-ui.css` and opens the markup with `showModal()` |
+
+`packages/ui/src/reader-dialog-browser.test.tsx` measures it in Chromium (size at four windows and three phones, the
+iframe flush under the head, the scroller scrolling under a head that stays, the phone's head, the page lock, Escape);
+its negative control runs without `reader-dialog.css` and finds the 460px popup. Catalog section "Hộp đọc tài liệu".
+
 ## SettingsDialog (0.35.0): settings as one popup
 
 The admin's Settings (apps/admin `SettingsDialog`): one popup over the app, the sections in a rail on the left with a
@@ -2101,6 +2136,62 @@ closes a drawer, focus moves into it and back, the rail and the conversation are
 open state (`gb-tc-msg--active`, `aria-expanded` on its button); arrow keys along `div.gb-tc-acts[role=toolbar]`; when to
 show `.gb-tc-jump` and its count.
 
+### Plain HTML: `gembossUI.teamChat` (20/10/2026)
+
+So a plain page does not write the markup above by hand. `team-chat-plain.js` builds the rows from data and RETURNS
+elements whose markup is the component's for the same props: tags, classes, every attribute, the text, the icons' SVG.
+`team-chat-plain-browser.test.ts` draws every piece in every state both ways in Chromium (the contract's data,
+`team-chat.test.fixtures.tsx`, and the states beyond it) and holds them to one tree, so the markup is written once, in
+`team-chat.tsx`, and a plain page follows a change to it with a version bump. A classic script, no imports, inlinable:
+after `kit-plain.js` when the page has it (it adds `gembossUI.teamChat`; loaded first it says so in the console).
+
+| Builder | Draws what this draws |
+|---|---|
+| `message(props)` | `Message`, every prop by the same name; plus `picking` / `reactionsPicking` (a picker drawn open) and `onPickingChange(which, open)` (`"bar"` or `"reactions"`) for a page that redraws its whole list |
+| `daySeparator(label, dateTime)`, `newMessagesLine(labels)` | `DaySeparator`, `NewMessagesLine` |
+| `jumpToLatest({ count, visible, onJump, labels })`, `updateJump(button, { count, visible, labels })` | `JumpToLatest`; `updateJump` redraws the same button (a scroll handler keeps its focus) |
+| `readReceipt({ read, of, label })` | `ReadReceipt` (`null` when `of` ≤ 0) |
+| `channelSection({ label, id, items })`, `channelItem(props)` | `ChannelSection`, `ChannelItem` (`href`: a link, else a button); `items` are rows or their props |
+| `peopleSection({ label, count, id, items })`, `personRow(props)` | `PeopleSection`, `PersonRow` (a link, a button with `onSelect`, else a `div`) |
+| `reactions(props)`, `reactionPicker(props)` | `Reactions` (plus `open` / `onOpenChange`), `ReactionPicker` |
+| `avatar({ name, src, size, className })`, `icon(name, size)` | `Avatar` (portal.tsx's initials and tone), `Icon` (the icons the builders draw, and `more`) |
+| `rows(messages, opts)`, `dayKey(at)`, `dayWord(at, now)` | `teamChatRows`, `chatDayKey`, `chatDayWord` |
+| `LABELS` | `TEAM_CHAT_LABELS`; `labels` (any subset) translates, functions included |
+
+```html
+<link rel="stylesheet" href="/ui/portal.css"><link rel="stylesheet" href="/ui/reactions.css"><link rel="stylesheet" href="/ui/team-chat.css">
+<script src="/ui/kit-plain.js"></script><script src="/ui/team-chat-plain.js"></script>
+```
+
+```js
+const tc = gembossUI.teamChat;
+list.replaceChildren(...tc.rows(messages, { meId: me.id, isUnread: (m) => m.id > readUpTo }).map((r) =>
+  r.kind === "day" ? tc.daySeparator(dayLabel(r.date), isoDay(r.date))
+  : r.kind === "new" ? tc.newMessagesLine()
+  : tc.message({ author: r.message.authorName, time: hhmm(r.message.at), dateTime: r.message.at, body: r.message.text,
+      grouped: r.grouped, messageId: r.message.id, reactions: r.message.reactions, edited: Boolean(r.message.editedAt),
+      receipt: tc.readReceipt({ read: 2, of: 3, label: "Read by Linh, Quan. Not yet: Bo" }),
+      onReact: (emoji) => react(r.message.id, emoji), onReply: () => startReply(r.message), onOpenThread: (e) => openThread(r.message.id, e.currentTarget),
+      moreActions: myMoreButton(r.message), picking: view.picking === r.message.id,
+      onPickingChange: (which, open) => { if (which === "bar") view.picking = open ? r.message.id : null; } })));
+```
+
+Strings are TEXT (a body `"<img onerror=…>"` shows those characters); a slot that takes a node (`avatar`, `badges`,
+`attachments`, `extra`, `receipt`, `moreActions`, `editor`, a rich `time` or `body`) takes a DOM node as given. Callbacks are
+click listeners and get what React's `onClick` gets (the event; `onReact` the emoji). The behaviour is the components': the
+action bar is a toolbar (arrows, Home / End), "More reactions" opens the package's picker under the body and the reaction
+row's "Add reaction" one under the row (search, this browser's "Frequently used" under the React picker's own storage key,
+arrows, Enter picks the first match, Escape closes and gives focus back), a chip's click remembers its emoji. A row drawn
+with `picking` takes no focus: after a redraw the page puts focus back, as it does for anything it redraws.
+
+Not built here: the screen's shell (`TeamChat`, `ChannelRail`, `ChatHeader`, `MessageList`, `Composer`, `ThreadPanel`,
+`PeoplePanel`) is markup a page writes once (the blocks above), with the behaviour listed just above.
+
+The script carries two kinds of copy, both held by `team-chat-plain-data.test.ts`: the icons' drawing (icons.tsx) and the
+emoji set (reactions-data.ts) as a generated block (`UPDATE_PLAIN_TEAM_CHAT=1` on that test writes it), and the labels, the
+avatar's initials and tone, the reaction helpers and `teamChatRows` in ES5, called with the TypeScript's inputs and held to
+its answers.
+
 ## Action card (0.28.0): an assistant proposes, a person applies
 
 Chris 08/10/2026: the Feedback Assistant lists likely duplicates and merges them, and carries out status, owner, label
@@ -2405,6 +2496,7 @@ something the base cannot express, add a token or a prop here, and every surface
 | `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". |
+| `packages/ui/src/team-chat-plain.js` | 20/10/2026: `gembossUI.teamChat`, builders that return the team chat's rows (messages, day separators, "New messages", jump, receipt, rail rows, people rows, reactions and the picker) with the components' markup, for plain HTML (`@gemboss/ui/team-chat-plain.js`). After `kit-plain.js` when the page has it; works alone. See "The team chat layer". |
 | `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. |

package/catalog/editor.html

@@ -8,7 +8,7 @@
 .cat-code summary{padding:10px 16px;font-size:13px;cursor:pointer;color:var(--gemboss-text-muted);border-top:1px solid var(--gemboss-divider);min-height:24px}
 .cat-code pre,.cat-api{margin:0;padding:12px 16px;overflow:auto;background:#0f1012;color:#e8e8e6;font-size:12px;line-height:1.5;border-radius:0}
 .cat-api{border-radius:12px;margin:0 0 16px}</style></head><body><div class="cat">
-<h1>@gemboss/ui 0.40.0 · Editor</h1>
+<h1>@gemboss/ui 0.41.0 · Editor</h1>
 <p>Khung của mọi editor: <code>EditorFrame</code> (cột trái · khe kéo · preview · cột phải dock trên mép phải preview) và <code>EditorTopbar</code> (← · tiêu đề · cụm giữa · cụm phải · dòng trạng thái). Là đúng khung của theme / page / section editor trong admin. Gói chỉ vẽ KHUNG; chat, Configure, canvas, page picker, menu, Publish là của editor, đi vào bằng slot. Trang HTML thuần nạp <code>editor.css</code> + <code>editor-plain.js</code> rồi gọi <code>gembossUI.initEditorFrame()</code>: kéo khe (chuột, chạm, phím mũi tên / Home / End), đổi thiết bị, mở ⋯ và Publish ▾, ẩn cột trái, Chat | Preview trên điện thoại. <a href="index.html">← Catalog</a></p>
 <h2>React</h2><pre class="cat-api"><code>import &quot;@gemboss/ui/editor.css&quot;;
 import { EditorFrame, EditorTopbar, EditorBack, EditorChatToggle, EditorPaneTabs, EditorSaveState, DeviceToggle } from &quot;@gemboss/ui/editor&quot;;