@gemboss/ui 0.41.0 → 0.43.0

package/CHANGELOG.md

@@ -2,6 +2,116 @@
 
 Versions up to 0.9.0 are described in the README, each in the section that introduced it.
 
+## 0.43.0 (21/10/2026)
+
+**The full-screen assistant stops paying for a blur nobody sees** (21/10/2026, measured in the GemBoss desktop app).
+
+Changed
+- `.gb-dock-full` sets `backdrop-filter: none` (and `-webkit-`), like `.gb-dock-side`. Its background is opaque, so the frost
+  never showed, but the GPU painted the page underneath and blurred the whole rectangle every frame. GPU process on
+  /app/assistant (1920×1055, 2×): 516 → 430 MB at the scroll peak, 270 → 241 MB at rest; drawn layers 7 → 5.
+- Side effect, a fix: the frame is no longer the containing block of `position: fixed` children in full mode, so the thread
+  row's ⋯ menu opens under its button instead of 240px right and 56px down of it (and clipped). Popup and mini still frost.
+- `opaque-dock-modes-skip-the-blur.test.ts` reads the modes from `MODE_CLASS`: any mode painted with an opaque token must turn
+  the blur off, and those tokens must be opaque in both themes.
+
+**Editor menus at the admin's density** (Chris 21/10/2026, of the canvas's right-click menu: "kích thước của button trong context
+menu cũng nên theo chuẩn chung với các button size khác … nó đang to hơn bình thường").
+
+Changed
+- `.gemboss-editor-menu-item` (the ⋯ menu, the canvas's right-click menu) under a mouse: a Polaris ActionList item, 32px tall
+  with 4px 6px padding (was 44px with 8px 12px, for every pointer); the group heading lines up at 6px. Under a finger or on a
+  screen 767px or narrower it keeps the 44px row. Measured on the admin's editor ⋯ menu: eight rows 366px → 270px.
+  `editor-plain.test.ts` holds both in Chromium; the browser gates that asked 44px of a menu row under a mouse
+  (check-generate-images-touchable, page-design-review-fixture) ask the kit's row now (44 under a finger or below 768, 32 above).
+
+**An emoji button in the team chat composer** (Chris 21/10/2026: "Nút emoji — Dùng lại bảng chọn cảm xúc của gói (đã có,
+chèn vào chỗ con trỏ), cho cả GemCommunity và GemCare vì chung gói").
+
+Added
+- `Composer`: an emoji button between the field and Send, on by default; `emoji={false}` turns it off. It opens the reactions'
+  own picker as a layer over the box (`.gb-tc-composer__emoji-pop`; the box's whole width on a phone); a pick goes in at the
+  caret, over a selection, as typing would (`execCommand("insertText")`, else `setRangeText` + `input`): focus stays in the
+  field after the emoji, undo takes it back, `onValueChange` and the app's own `input` listeners hear it, nothing past
+  `maxLength`. It joins the same "Frequently used" as a reaction. Escape closes it and puts focus back in the field; a press
+  or focus elsewhere closes it; under a finger it opens on the first emoji (no keyboard over it).
+- `TEAM_CHAT_LABELS.emoji` ("Emoji", the button) and `pickEmoji` ("Pick an emoji", the picker's name).
+- `ReactionPicker`: `items` is optional (absent: a picker that writes, plain buttons, none pressed), `label`, `className`,
+  `initialFocus` (`"search"` | `"emoji"`); type `ReactionPickerProps`. With `items` it draws what it drew.
+- Icon `emoji` (a face; `reaction` is the face with a plus).
+- Plain script: `gembossUI.teamChat.emojiButton({ textarea, button, host, labels })` wires any field (and its button, or one
+  it builds and returns) to the same button and picker, for a composer the page writes itself (GemCare); `reactionPicker`
+  takes no `items`, `label`, `className`. Held to the component by `team-chat-plain-browser.test.ts`.
+
+Changed
+- `team-chat.css`: `.gb-tc-composer__box` is `position: relative` (the picker's containing block); under 360px of the screen's
+  width the box's buttons have no gap, so the field keeps 150px beside three 44px buttons at 320. README "The team chat
+  layer": the composer and thread blocks carry the button.
+
+**A direct message shows the person's picture** (GemCommunity #322 draws DMs with `ChannelItem kind="dm"` and `ChatHeader`,
+and had only the generic person glyph to show).
+
+Added
+- `ChannelItem`: `avatar: { src, name }` on a DM, the kit's `Avatar` at the glyph's 20px (`gb-tc-channel__av`; initials and
+  tone when there is no `src`, `name` defaulting to the row's) with the presence dot on it.
+- `ChatHeader`: `avatar: { src, name }` with `kind="dm"`, the `Avatar` at 24px left of the name in place of the glyph
+  (`gb-tc-head__av`). README block `header-dm`, held by `team-chat-contract.test.tsx`; type `DmAvatar`.
+- Plain script: `channelItem` takes the same `avatar`, held to the component by `team-chat-plain-browser.test.ts`.
+- Without `avatar`, and on a channel, the glyph as before.
+
+**The assistant asks one question and a person only confirms: five pieces and three lighter steps of iris** (Chris 21/10/2026,
+reviewing the Market redesign: "trợ lý trang cũng phải đặt câu hỏi rõ ràng và fill sẵn câu trả lời… chỉ confirm thôi", "đưa cho họ 1
+đến 3 lựa chọn tối đa", "thoáng, ít chữ, có hình"; design in the artifact "Market, thiết kế lại + trợ lý trong trang").
+
+Added
+- `QuestionCard`: one question, one to three choices (the type refuses a fourth; a longer list is cut to three), the first the
+  assistant's best guess, one primary confirm, quiet "type my own" and "skip". Controlled, real radio inputs. `MAX_QUESTION_CHOICES`.
+- `BriefingCard`: one proposal at the top of a screen, with its evidence and one to three buttons. An iris wash.
+- `RangeBar` (+ `rangeBarGeometry`): a value against a market's spread, `sm` for a tile and `lg` with labels. A value off the axis is
+  pinned to its edge, a band given high-to-low is turned round, a non-number is left out.
+- `ProgressRing` (+ `progressRingGeometry`, `RING_BOX`): "3 of 5" as a ring. A `max` that is not a positive number is an empty ring.
+- `SpotArt` (+ `SPOT_ART_NAMES`): six brand pictures (`gem-radar`, `orbit`, `people`, `page`, `plug`, `price`), painted by tokens.
+- Tokens `--gemboss-accent-wash`, `--gemboss-accent-tint`, `--gemboss-accent-mid`, light and dark (`theme-dark.css`). Fills, never text.
+- Five entries, none in the frozen bundle: `question-card.css`, `briefing-card.css`, `range-bar.css`, `progress-ring.css`,
+  `spot-art.css` (`parts.mjs`, `package.json` exports, `weight-budget.json`).
+
+Weight: the three tokens are the only thing that reaches the frozen bundle, +60 B gzip (`gemboss-ui.css` 22,655 → 22,715 B), so its ceiling
+goes 22,683 → 22,743 B (the same 28 B of room it had). The five entries are 0.2 to 0.9 KB gzip each, with their own ceilings.
+
+Nothing existing changes: no class, no token and no component that was there is touched.
+
+## 0.42.0 (21/10/2026)
+
+**The editor's colour field offers the page's theme colours and this store's recent colours** (gemboss #4888, Chris "bấm
+trước gõ sau").
+
+Added
+- `ColorControl` takes `choices` (`ColorChoice { value, label, swatch }`): chips under the field while it is in use; a chip
+  writes its `value` (a theme chip writes `var(--gem-color-<role>)`). `themeColorChoices(palette)` lists the theme's roles in
+  `TOKEN_NAMES` order. No new CSS: `.gemboss-ei-swatches` / `.gemboss-ei-sw`.
+
+**Team chat days in a given time zone; leaderboard words in the page's language** (follow-ups of GemCommunity's UX audit,
+20–21/10/2026: /chat threw React #418 because the server (UTC) and a browser in Hanoi drew different day separators, and the
+app had to feed the rules shifted dates; the podium's screen-reader words were English on vi and zh pages).
+
+Added
+- `timeZone` (IANA name) on `teamChatRows` options and as a last argument of `chatDayKey` and `chatDayWord`: days are that
+  zone's calendar days. An unknown name or an invalid date falls back to the local day, as without it.
+- `chatDayISO(at, timeZone?)`: the day as "2026-10-21", for a `DaySeparator`'s `dateTime`.
+- Plain script: `gembossUI.teamChat.rows` reads `opts.timeZone`; `dayKey`, `dayWord` take it last; `dayISO` is new. Held to
+  the TypeScript by `team-chat-plain-data.test.ts` under four zones (one unknown).
+- `Podium`: `label` (the list's name, default "Top three") and `rankLabel` (default `(n) => "Rank " + n`); `Leaderboard`:
+  `rankLabel`. Defaults keep the markup as it was.
+
+**"Frequently used" in the reaction picker always holds nine** (Chris 20/10/2026: GemCare's row held nine; the package's showed
+only what this browser had used, one or two for a new person, which read as empty).
+
+Changed
+- `ReactionPicker` (React) and `gembossUI.teamChat.reactionPicker` (plain): "Frequently used" is what this browser used, most
+  recent first, then the `SUGGESTED_REACTIONS` it has not used (👍 ✅ 🙏 🎉 😂 ❤️ 👀 🙌 🔥), nine in all.
+- `reactions-data.ts` exports `SUGGESTED_REACTIONS`, `FREQUENT_MAX` and `frequentReactions(recent)`. The plain script carries
+  the list in its data block and the same function in ES5, held to the TypeScript by `team-chat-plain-data.test.ts`.
+
 ## 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
@@ -17,6 +127,33 @@ Added
 - `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).
 
+**A colour field reads every colour, not only a 6-digit hex** (A4, 21/10/2026). Measured on 169 element pages: of 3,283 colour
+values, 66% are `rgb()`, 17% `rgba()`, 9% a 6-digit hex, ~3% `oklch()`. Only the hex 9% had a swatch: nine colours in ten showed a
+locked black square.
+
+Changed
+- `swatchState` shows any one colour (`parseColor`: hex of 3, 4, 6 or 8 digits, `rgb`/`rgba`, `hsl`/`hsla`, `oklch`). A token, a
+  gradient, a scheme id or a padded value is still not a colour the swatch can stand for: off, with the reason.
+- `ColorControl`: a pick on the swatch keeps the value's transparency and way of writing (`pickSwatch`: a hex stays a hex, else
+  `rgb()`, `rgba()` with an alpha), so turning the swatch on can never drop an alpha. A colour's opacity sits beside it in a `%`
+  box (`input[data-alpha]`, `withOpacity`); a value that is not one colour has none. No CSS change (the box's width is inline).
+- `swatchWhy`: "Type a color to use your own"; the kept-as-written reason names what the swatch reads.
+- `editor-plain.js`: the same swatch and `%` box on a page without React, for a hex and `rgb()`/`rgba()` (92% of the colours
+  measured); `hsl()` and `oklch()` stay a locked swatch there (named in editor-panel.test.tsx). Exposes `gembossUI.colorOf`,
+  `pickSwatch`, `withOpacity`.
+
+Added
+- `parseColor`, `pickSwatch`, `opacityOf`, `withOpacity`, type `Rgba` (from `@gemboss/ui/editor`).
+
+**A colour field offers colours to click before one to type** (A4b, 21/10/2026; Chris: "bấm trước gõ sau").
+
+Added
+- `ColorControl` `choices`: chips under the field while it is in use (focus inside it), each a `ColorChoice` `{ value, label,
+  swatch }`: the value written on a click, its name, the colour it paints. A token value painted by a chip shows that colour on the
+  swatch, and a pick on the swatch then starts from it. None drawn in SSR or when `choices` is empty.
+- `themeColorChoices(palette)`: the theme's colour roles as choices (`var(--gem-color-<role>)`, in `TOKEN_NAMES` order), painted
+  with the colour the page draws for each; a role the palette does not paint is left out. Type `ColorChoice`.
+
 **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).
 

package/README.md

@@ -74,6 +74,11 @@ its CSS out of the build with it (`sideEffects`). gzip of the minified file, as
 | 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") |
+| question-card | `@gemboss/ui/question-card.css` | `packages/ui/src/question-card.css` | `QuestionCard`: the assistant's one question with one to three answers, the pick chosen (0.43.0) | 0.9 KB | `QuestionCard` imports it |
+| briefing-card | `@gemboss/ui/briefing-card.css` | `packages/ui/src/briefing-card.css` | `BriefingCard`: one proposal at the top of a screen, on an iris wash (0.43.0) | 0.5 KB | `BriefingCard` imports it |
+| range-bar | `@gemboss/ui/range-bar.css` | `packages/ui/src/range-bar.css` | `RangeBar`: a value against a market's spread on one axis (0.43.0) | 0.6 KB | `RangeBar` imports it |
+| progress-ring | `@gemboss/ui/progress-ring.css` | `packages/ui/src/progress-ring.css` | `ProgressRing`: "3 of 5" as a ring (0.43.0) | 0.2 KB | `ProgressRing` imports it |
+| spot-art | `@gemboss/ui/spot-art.css` | `packages/ui/src/spot-art.css` | `SpotArt`: six brand pictures for pauses and empty states (0.43.0) | 0.4 KB | `SpotArt` imports it |
 | 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).
@@ -1589,7 +1594,8 @@ import { Avatar, Dialog, Leaderboard, Podium, SearchDialog, ThemeToggle, themeSc
   Opt-in: a surface without it (the admin) stays light.
 - `Avatar` (24 · 32 · 40 · 56): picture or initials on one of eight tones picked from the name.
 - `Leaderboard`: 🥇 🥈 🥉 then the rank, avatar, name, count; the leader's count in gold; nothing at
-  all when empty. `Podium`: the first three, second · first · third.
+  all when empty. `Podium`: the first three, second · first · third. Screen readers hear "Rank 1: " before each
+  name and "Top three" for the podium; pass `rankLabel={(n) => …}` (both) and `label` (Podium) in the page's language.
 - `initialsOf` moved to `initials.ts` (plain, not "use client") so server components can call it; it is
   still exported from the package and from account.tsx.
 - **Without the whole kit (0.7.2):** a surface with its own skin (GemCommunity) takes only these pieces'
@@ -1676,7 +1682,7 @@ and GemCare's chat, draw and accept the same thing.
 |---|---|
 | `@gemboss/ui/reactions-data` (plain TS, also re-exported from the root) | `REACTION_GROUPS` (GemCare's 137 emoji in 4 groups, each with search words), `REACTION_EMOJI`, `isReactionEmoji` (the server's check: refuse anything else), `searchReactions`, `reactionLabel` (names, two then `+n`), `toggleReaction` (the optimistic guess drawn before the server answers), `QUICK_REACTIONS` (👍 ✅), type `Reaction` = `{ emoji, names, mine }` |
 | `Reactions` (React, client) | the chips (emoji + NAMES of who put it; yours outlined + filled, `aria-pressed`) and "Add reaction", which opens `ReactionPicker` in flow under the row. `canReact={false}`: chips only; no chips and no right to react: nothing |
-| `ReactionPicker` | search, "Frequently used" (this browser's last 9, `localStorage`, else the quick pair), the groups; arrows move in the grid, Enter in the search picks the first, Escape closes and returns focus |
+| `ReactionPicker` | search, "Frequently used" (this browser's last picks, `localStorage`, filled up to nine with `SUGGESTED_REACTIONS`), the groups; arrows move in the grid, Enter in the search picks the first, Escape closes and returns focus. `items` absent: a picker that WRITES an emoji (the team chat composer's): plain buttons, none pressed. `label` (its name, default "Pick a reaction"), `className`, `initialFocus` (`"search"`, default, or `"emoji"`: under a finger a focused search brings the keyboard up over it) |
 | `reactions.css` (its own entry, NOT inside `gemboss-ui.css`: link it where reactions are drawn, as `collections.css`) | `ui-reactions`, `ui-reactions__row`, `ui-reaction` (+ `is-mine`), `__emoji`, `__names`, `ui-reaction-add`, `ui-reaction-picker` (`__search`, `__body`, `__head`, `__grid`, `__btn`, `__empty`) |
 
 Every target is 44px (a control, CLAUDE.md §9.1); the pill you see is 26px, transparent padding carries the rest, so a
@@ -1701,11 +1707,11 @@ token, so `data-theme="dark"` turns it dark unchanged. It holds no rule on `:roo
 | Component | Draws | Takes |
 |---|---|---|
 | `TeamChat` | the screen: `div.gb-tc[data-view][data-panel]` = rail · `section.gb-tc-main` · scrim · panel | `rail`, `children`, `panel`, `panelKind` (`"thread"` / `"people"`), `panelOpen`, `onClosePanel`, `view` (`"list"` / `"conversation"`) |
-| `ChannelRail`, `ChannelSection`, `ChannelItem` | `nav.gb-tc-rail`: head (title + actions), groups ("Channels", "Direct messages"), rows with a kind glyph (# · lock · person), `@n` and unread badges | `title`, `actions`; `label`; `name`, `kind`, `unread`, `mentions`, `active` (`aria-current`), `online` (a DM), `href` + `linkAs` or `onOpen` |
-| `ChatHeader` | `header.gb-tc-head`: back (phone only), glyph + name, topic, actions, the members toggle | `name`, `kind`, `topic`, `onBack`, `members: { count, open, onToggle, controls }`, `actions` |
+| `ChannelRail`, `ChannelSection`, `ChannelItem` | `nav.gb-tc-rail`: head (title + actions), groups ("Channels", "Direct messages"), rows with a kind glyph (# · lock · person) or a DM's picture, `@n` and unread badges | `title`, `actions`; `label`; `name`, `kind`, `unread`, `mentions`, `active` (`aria-current`), `online` (a DM), `avatar: { src, name }` (a DM), `href` + `linkAs` or `onOpen` |
+| `ChatHeader` | `header.gb-tc-head`: back (phone only), glyph (a DM: the person's picture) + name, topic, actions, the members toggle | `name`, `kind`, `topic`, `avatar: { src, name }` (a DM), `onBack`, `members: { count, open, onToggle, controls }`, `actions` |
 | `MessageList`, `DaySeparator`, `NewMessagesLine`, `JumpToLatest` | `div.gb-tc-body` > `div.gb-tc-log[role=log][aria-live=polite]` > `ol.gb-tc-list`; the sticky day pill; the "New messages" line; the round button with a count | `label`, `before` ("Load earlier"), `after` ("Linh is typing…"), `empty`, `jump`, `logRef`, `onScroll`; `label`, `dateTime`; `count`, `visible`, `onJump` |
 | `Message`, `ReadReceipt` | `li.gb-tc-msg`: avatar or (in a turn) the time on hover, quote, name + time, body, "(edited)", receipt, files, link cards, `Reactions`, thread preview, the action bar | `author`, `avatarSrc` / `avatar`, `time`, `dateTime`, `body`, `grouped`, `edited`, `mentionsMe`, `highlight`, `sending`, `failed`, `status`, `badges`, `replyTo`, `attachments`, `extra`, `reactions`, `onReact`, `thread`, `receipt`, `onReply`, `onOpenThread`, `moreActions`, `editor`, `messageId`; `read`, `of`, `label` |
-| `Composer` | `form.gb-tc-composer`: "Replying to…", files, mention picker, one box (paperclip · field · send), "Also send to…", error | `onSend`, `value` / `defaultValue` + `onValueChange`, `placeholder`, `label`, `replyingTo` + `onCancelReply`, `files`, `picker`, `onAttach`, `also`, `error`, `busy`, `disabled`, `canSendEmpty`, `inputRef`, `onKeyDown`, `onPaste` |
+| `Composer` | `form.gb-tc-composer`: "Replying to…", files, mention picker, one box (paperclip · field · emoji · send), "Also send to…", error | `onSend`, `value` / `defaultValue` + `onValueChange`, `placeholder`, `label`, `replyingTo` + `onCancelReply`, `files`, `picker`, `onAttach`, `emoji` (default `true`), `also`, `error`, `busy`, `disabled`, `canSendEmpty`, `inputRef`, `onKeyDown`, `onPaste` |
 | `ThreadPanel` | `aside.gb-tc-thread`: head + close, notice (`gb-tc-thread__note`, `--error` in the danger colour), the root message, "N replies", the replies flat, a composer | `onClose`, `root`, `replyCount`, `children`, `composer`, `notice`, `noticeTone` (`"error"`), `title`, `subtitle` |
 | `PeoplePanel`, `PeopleSection`, `PersonRow` | `aside.gb-tc-people[data-collapsed]`: head + collapse button, sections "Online — 3", rows with avatar + presence dot, name, a line under it, a role chip | `collapsed`, `onToggleCollapse`, `actions`, `title`; `label`, `count`; `name`, `src` / `avatar`, `subtitle`, `role`, `presence` (`online` / `away` / `offline`), `href` + `linkAs` or `onSelect` |
 
@@ -1714,7 +1720,25 @@ own state (the reaction picker a message opened, the composer's text when the ap
 write themselves is in `TEAM_CHAT_LABELS`; pass `labels` (any subset) to translate. `teamChatRows(messages, { meId,
 isUnread })` (plain TS, `team-chat-data.ts`) says where the day separators and the "New messages" line go and which
 messages are `grouped`: same author, same day, under 5 minutes apart, not a reply, and not the first new one (GemCare's
-rules). `chatDayWord` gives "Today" / "Yesterday"; older days the app formats in its own locale.
+rules). `chatDayWord` gives "Today" / "Yesterday"; older days the app formats in its own locale. Days are the viewer's
+local days unless `timeZone` (an IANA name) is given to `teamChatRows`, `chatDayKey`, `chatDayWord` and `chatDayISO` (the day
+as "2026-10-21", for a `DaySeparator`'s `dateTime`): give it on a screen the server renders first, or the server's zone and
+the browser's draw different day separators (React #418). Format the times with the same zone.
+
+**The emoji button** (Chris 21/10/2026: "Dùng lại bảng chọn cảm xúc của gói (đã có, chèn vào chỗ con trỏ), cho cả
+GemCommunity và GemCare vì chung gói"). The composer's box has it between the field and Send, on by default (`emoji={false}`
+for an app that does not want it), named by `labels.emoji` ("Emoji"), 44px under a finger like the box's other buttons. It
+opens the reactions' own picker (`ReactionPicker` with no `items`, named `labels.pickEmoji`): search, "Frequently used", the
+groups. The picker is a layer over the box at its right edge, above the button, `.gb-tc-composer__emoji-pop`; where the box
+is narrower than the picker's 420px (a phone) it takes the box's whole width, and its list is shorter on a short screen
+(`min(300px, 40vh)`). A pick goes in at the field's caret, over a selection when there is one (at the end of a field never
+focused), as typing would: `execCommand("insertText")`, so focus stays in the field with the caret after the emoji, the
+browser's undo takes it back, and the field fires `input`, so `onValueChange` and any listener of the app's own hear it
+(where a browser refuses it: `setRangeText` and an `input` event). Nothing is written past `maxLength`. The pick joins the
+same "Frequently used" a reaction does (`localStorage`, one list per browser). Escape closes it and puts focus back in the
+field where the caret was (a person who opened it was writing); a press or focus anywhere else closes it; under a finger it
+opens on the first emoji, not the search, so the keyboard does not come up over it. Under 360px of the screen's width the
+box's three 44px buttons touch (no gap), so the field keeps 150px at 320.
 
 **The layout.** `.gb-tc` is a CSS grid and a size container: it decides by its OWN width (in an app shell the chat is the
 window minus the shell's rail), with container queries. `TEAM_CHAT_DRAWER_MAX` (1100) and `TEAM_CHAT_PHONE_MAX` (760) are the
@@ -1821,6 +1845,16 @@ The rail. The active row has `aria-current` (`"page"` on a link, `"true"` on a b
             <span class="gb-tc-badge" aria-hidden="true">1</span>
           </a>
         </li>
+        <li>
+          <a class="gb-tc-channel" href="/chat/dm/mai" aria-label="Mai Pham, direct message">
+            <span class="gb-tc-channel__glyph" aria-hidden="true">
+              <span class="gb-avatar gb-avatar--24 gb-tc-channel__av" data-tone="7" aria-hidden="true">MP</span>
+              <span class="gb-tc-presence gb-tc-presence--offline">
+              </span>
+            </span>
+            <span class="gb-tc-channel__name">Mai Pham</span>
+          </a>
+        </li>
       </ul>
     </div>
   </div>
@@ -1854,6 +1888,29 @@ the people panel.
 </header>
 ```
 
+A direct message's head: with `avatar` (`kind="dm"`), the person's picture (`Avatar`, 24px; their initials and tone when
+there is no `src`) stands left of the name in place of the glyph. A DM row in the rail takes the same `avatar`: the picture
+at the glyph's 20px (`gb-tc-channel__av`), the presence dot on it (Mai Pham above). Without `avatar`, the glyph, as before;
+on a channel, `avatar` is ignored.
+
+<!-- team-chat: header-dm -->
+```html
+<header class="gb-tc-head">
+  <button type="button" class="ui-btn ui-btn--ghost ui-btn--icon gb-tc-head__back" aria-label="Back to channels">
+    <svg>…</svg>
+  </button>
+  <div class="gb-tc-head__text">
+    <h2 class="gb-tc-head__title">
+      <span class="gb-avatar gb-avatar--24 gb-tc-head__av" data-tone="4" aria-hidden="true">
+        <img class="gb-avatar-img" src="/avatars/linh.png" alt="" loading="lazy" width="24" height="24"/>
+      </span>
+      <span class="gb-tc-head__name">Linh Tran</span>
+    </h2>
+    <p class="gb-tc-head__sub">Just the two of you</p>
+  </div>
+</header>
+```
+
 The list: a day, a message that starts a turn, the "New messages" line, and a turn of two (the second `gb-tc-msg--grouped`:
 the time in the avatar's column, shown on hover, and the author for screen readers). The jump button is `hidden` while the
 reader is at the bottom.
@@ -1989,6 +2046,9 @@ the app's files and @mention list; Send is `disabled` while there is nothing to
     <label class="gb-tc-sr" for="tc-input">Message</label>
     <textarea id="tc-input" class="gb-tc-composer__input" rows="1" maxlength="4000" placeholder="Message #general">
     </textarea>
+    <button type="button" class="ui-btn ui-btn--ghost ui-btn--icon gb-tc-composer__emoji" aria-label="Emoji" aria-expanded="false">
+      <svg>…</svg>
+    </button>
     <button type="submit" class="ui-btn ui-btn--primary ui-btn--icon gb-tc-composer__send" aria-label="Send" disabled="">
       <svg>…</svg>
     </button>
@@ -2044,6 +2104,9 @@ The thread panel: the root, the "N replies" rule, the replies flat, a composer w
       <label class="gb-tc-sr" for="tc-thread-input">Reply to thread</label>
       <textarea id="tc-thread-input" class="gb-tc-composer__input" rows="1" maxlength="4000" placeholder="Reply…">
       </textarea>
+      <button type="button" class="ui-btn ui-btn--ghost ui-btn--icon gb-tc-composer__emoji" aria-label="Emoji" aria-expanded="false">
+        <svg>…</svg>
+      </button>
       <button type="submit" class="ui-btn ui-btn--primary ui-btn--icon gb-tc-composer__send" aria-label="Send" disabled="">
         <svg>…</svg>
       </button>
@@ -2134,7 +2197,8 @@ during an IME composition (`isComposing`, keyCode 229); the field grows with its
 browser lacks it, set `height` from `scrollHeight` through CSSOM, which a `style-src 'self'` CSP allows); Escape or the scrim
 closes a drawer, focus moves into it and back, the rail and the conversation are `inert` meanwhile; the reaction picker's
 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.
+show `.gb-tc-jump` and its count. The composer's emoji button is the exception: `gembossUI.teamChat.emojiButton` (below)
+builds or wires it and does its behaviour.
 
 ### Plain HTML: `gembossUI.teamChat` (20/10/2026)
 
@@ -2151,11 +2215,12 @@ after `kit-plain.js` when the page has it (it adds `gembossUI.teamChat`; loaded
 | `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 |
+| `channelSection({ label, id, items })`, `channelItem(props)` | `ChannelSection`, `ChannelItem` (`href`: a link, else a button; a DM's `avatar`); `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` |
+| `reactions(props)`, `reactionPicker(props)` | `Reactions` (plus `open` / `onOpenChange`), `ReactionPicker` (`items` absent: the composer's, which writes an emoji; `label`, `className`) |
+| `emojiButton({ textarea, button, host, labels })` | the `Composer`'s emoji button and picker, for a composer the page writes itself (below) |
 | `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` |
+| `rows(messages, opts)`, `dayKey(at, timeZone)`, `dayISO(at, timeZone)`, `dayWord(at, now, timeZone)` | `teamChatRows`, `chatDayKey`, `chatDayISO`, `chatDayWord` |
 | `LABELS` | `TEAM_CHAT_LABELS`; `labels` (any subset) translates, functions included |
 
 ```html
@@ -2187,6 +2252,28 @@ with `picking` takes no focus: after a redraw the page puts focus back, as it do
 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 composer's emoji button, `emojiButton` (21/10/2026).** The one piece of the composer with behaviour of its own, so it
+is a helper rather than markup: it wires a field to the `Composer`'s emoji button and picker and does what the component
+does (above: the reactions' picker over the box, a pick at the caret as typing would, the field's `input` event, "Frequently
+used", Escape back to the field, closed by a press or focus elsewhere, the first emoji under a finger). Without `button` it
+builds the component's button and returns it; with one, it wires that button (giving it `aria-expanded` / `aria-controls`,
+and `labels.emoji` when it has no name). The picker goes into `host`: by default the field's `.gb-tc-composer__box`
+(`team-chat.css` makes the box its containing block), else the field's parent; another host needs `position: relative`.
+`team-chat-plain-browser.test.ts` holds the button and the picker to the component's, step by step.
+
+```js
+// GemCare's channel composer (inbox.html #chat-form) and the thread's (#ctp-form): the button before Send.
+for (const [input, send] of [["chat-input", "chat-send"], ["ctp-input", "ctp-send"]]) {
+  document.getElementById(send).before(gembossUI.teamChat.emojiButton({ textarea: document.getElementById(input) }));
+}
+// A composer of other markup (GemCare's dock window): its own button, and its form as the host (`position: relative`).
+gembossUI.teamChat.emojiButton({ textarea: input, button: myEmojiButton, host: form });
+```
+
+GemCare draws its composers itself (inbox.html, the contract's composer markup by hand, wired by inbox.js; the dock window's
+built in inbox.js with its own classes), so it adopts this with the lines above after `npm run ui:sync`: its `input`
+listeners (Send turned on, the @mention picker, the draft) hear a pick as they hear typing.
+
 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
@@ -2213,6 +2300,29 @@ applies; afterwards the outcome replaces the body, with Undo when the surface ca
 Presentational: no fetching and no state of its own. The surface loads the preview, owns the handlers, and decides
 what Undo puts back (GemFeedback: the merge record, or the values an action replaced, guarded by `if=` so Undo never
 overwrites a later edit). Catalog section "Thẻ hành động".
+
+## The assistant asks, a person only confirms (0.43.0)
+
+Chris 21/10/2026, reviewing the Market redesign: a screen with a form to fill in is the wrong screen; the assistant should ask one
+clear question, have the answer filled in already, offer at most three choices, and let the person confirm. Five pieces, each its own
+entry, each presentational and server-renderable (no state, no effect):
+
+| Piece | What it draws |
+| --- | --- |
+| `QuestionCard` | one question (`question`, `eyebrow`, `evidence` chips, `art`), **one to three** `choices` (`{ id, label, note, pick }`: the first is the assistant's best guess, `note` says where it came from), one primary `onConfirm`, and quiet `onOther` / `onSkip` when the surface handles them. Controlled: `value` + `onChange` move the selection, only the confirm commits. The type refuses a fourth choice (`QuestionChoices`), and a longer list that gets past it is cut to three at render. Real radio inputs, so a keyboard gets a radio group. |
+| `BriefingCard` | one proposal at the top of a screen: a `eyebrow` tag, the sentence (`title`), `lead` with the numbers, `evidence` chips, `actions` (one to three buttons) and `art`. An iris wash, no border: the one loud thing on the screen. Not `ActionCard`: that lists the changes of one apply; a briefing is a proposal that has not become a change yet. |
+| `RangeBar` | a value against a market's spread on one axis: `band` (where half of it sits), `mid`, `you`, `ticks`. `size="sm"` is the shape for a metric tile; `size="lg"` adds the labels. The surface passes the words and the numbers (`labels`, `format`): the bar does no money maths. `rangeBarGeometry` is the pure part, for a plain-HTML page. |
+| `ProgressRing` | "3 of 5" as a ring with the count inside. `progressRingGeometry` is the pure arc. A `max` that is not a positive number is an empty ring, never NaN. |
+| `SpotArt` | six pictures in the brand's gem drawing style (`gem-radar`, `orbit`, `people`, `page`, `plug`, `price`) for the pauses and empty states a text-only screen lacks. Painted by tokens, decorative by default, an image only when given a `title`. |
+| `question-card.css`, `briefing-card.css`, `range-bar.css`, `progress-ring.css`, `spot-art.css` | one entry each, loaded by its component; a plain-HTML surface links `@gemboss/ui/<name>.css` and writes the classes listed at the top of each file |
+
+Three lighter steps of iris came with them, because a wash, a band and an art stroke need more than `--gemboss-accent-soft`:
+`--gemboss-accent-wash` (`#f7f8ff`), `--gemboss-accent-tint` (`#dfe2ff`), `--gemboss-accent-mid` (`#c9cffd`), each with a dark value
+in `theme-dark.css`. They are fills, never text.
+
+The contract every surface keeps: nothing is saved by choosing, only by the confirm, and what the confirm did is shown with Undo
+after (`ActionCard`'s outcome, or the surface's own). The first choice is the assistant's best guess and says where it came from;
+a question with no guess to offer is asked in the assistant's chat, not here.
 ## Report pages (0.4.0)
 
 Plain CSS in `kit-plain.css` for a numbers page written by hand (first user: gemnews `/admin`, 03/10/2026; that page moved to GemCommunity the same day, so gemnews no longer takes the package). The