prime-ui-kit 0.15.0 → 0.16.0

package/src/components/message/COMPONENT.md

@@ -43,7 +43,7 @@ Message.Root                      role="article" row «{author}, {time}» (an op
 │                                 over a picture or a circle)
 ├─ Message.Actions                a row of a bot's inline keyboard under the bubble (Button.Root children);
 │                                 several make several rows
-├─ Message.Menu                   Dropdown.Content opened at the pointer (+ «Выбрать» in a chat with a selection)
+├─ Message.Menu                   Dropdown.Content anchored to the message (Dropdown.Anchor) at the pointer (+ «Выбрать» in a chat with a selection)
 └─ [reaction bar]                 floating toolbar above the bubble: long press, long hover, `R`
 
 Message.Typing                    «печатает…»: an incoming bubble of three dots, the last row of a list
@@ -68,13 +68,13 @@ Content parts in short: `Message.Media` — a [Gallery](../gallery/COMPONENT.md)
 | `direction` | `"incoming" \| "outgoing"` | `"incoming"` | `incoming` — on the start side, a surface one step off the chat; `outgoing` — on the end side, in the accent hue (`--prime-color-message-outgoing-*`), everything inside recolors with it. |
 | `position` | `"single" \| "first" \| "middle" \| "last"` | `"single"` | The place in a run of one author (`Chat.Messages items` sets it): `single` and `last` end a run with the tail (and a group chat's avatar); `single` and `first` show the author's header. |
 | `time` | `Date \| string` | — | When it was sent: a `Date` shown with `formatTime` (and put in `<time dateTime>`), or the text to show. |
-| `formatTime` | `(date: Date) => string` | `«09:05»` | Display of a `Date` time. |
+| `formatTime` | `(date: Date) => string` | «09:05» | Display of a `Date` time. |
 | `edited` | `boolean` | `false` | The text was edited: `labels.edited` before the time. |
 | `status` | `"sending" \| "sent" \| "read" \| "failed"` | — | Delivery of an outgoing message: a clock, one check, two checks (accent), or a danger mark; the glyphs cross-fade from one state to the next. Named for assistive tech by `labels`. |
 | `onRetry` | `() => void \| Promise<void>` | — | Sends a failed message again: a ghost danger button beside the bubble. A returned promise shows `sending` until it settles; a rejection leaves it failed. |
 | `onReactionToggle` | `(emoji: string) => void \| Promise<unknown>` | — | Puts or takes back the reader's reaction (a chip, a double tap, `L`, the reaction bar). Shown at once; a returned promise keeps it pending, a rejection drops it back. Without it reactions are read-only. |
 | `value` | `string` | — | The message id for selection, jumps, read receipts, search, pins and `Message.Reply target` (`Chat.Messages items` sets the item's key). Keep it when the server confirms a sent message. |
-| `labels` | `Partial<MessageLabels>` | — | System strings, see Labels. |
+| `labels` | `Partial<MessageLabels>` | — | Built-in strings, see Labels. |
 | `…rest` | `Omit<HTMLAttributes<HTMLElement>, "role">` | — | `id`, `aria-label` to replace «{author}, {time}», `className` and the other attributes of the row. |
 
 ### Message.Avatar
@@ -136,6 +136,7 @@ Content parts in short: `Message.Media` — a [Gallery](../gallery/COMPONENT.md)
 | Prop | Type | Default | Description |
 |---|---|---|---|
 | `items` | `GalleryItem[]` | — (required) | `{ type?, src, poster?, alt?, width?, height?, duration?, transfer?, transferProgress?, transferDirection? }`; `width` / `height` give the ratio (default 4 : 3). The first 10 are shown. |
+| `maxSize` | `string` | — | Caps the width at this CSS length instead of the host's width (`85cqi` of a chat row); the gallery then draws no radius — the host shapes and clips it. |
 | `viewer` | `boolean` | `true` | A tile (a press, Enter or Space) opens the album in the kit's `MediaViewer` at that item. `false` — no viewer of the kit: open your own from `onOpenChange` and `onIndexChange`. |
 | `open` | `boolean` | — | The viewer is open (controlled). |
 | `defaultOpen` | `boolean` | `false` | Initially open (uncontrolled). |
@@ -146,7 +147,7 @@ Content parts in short: `Message.Media` — a [Gallery](../gallery/COMPONENT.md)
 | `onCancel` | `(index: number) => void \| Promise<void>` | — | Cancel the transfer in flight: the disk's cross. A returned promise keeps the disk pending (a spinner, `aria-busy`, no second press); a rejection leaves the transfer as it was and announces `cancelFailed`. |
 | `onRetry` | `(index: number) => void \| Promise<void>` | — | Transfer it again after a failure: the danger disk's retry; a promise works the same (`retryFailed` on a rejection). |
 | `onDownload` | `(index: number) => void \| Promise<void>` | — | Fetch a `remote` content: the download arrow; set `transfer` to `loading` with `transferDirection="download"` as it starts. A promise works the same (`downloadFailed` on a rejection). |
-| `labels` | `Partial<GalleryLabels>` | — | System strings, see Labels. |
+| `labels` | `Partial<GalleryLabels>` | — | Built-in strings, see Labels. |
 | `…rest` | `Omit<HTMLAttributes<HTMLDivElement>, "children">` | — | `className` and the other attributes. |
 
 ### Message.File
@@ -156,7 +157,7 @@ Content parts in short: `Message.Media` — a [Gallery](../gallery/COMPONENT.md)
 |---|---|---|---|
 | `name` | `string` | — (required) | The file name with its extension (the format tile reads it). |
 | `fileSize` | `number` | — | Bytes, shown as «1,2 МБ». |
-| `formatSize` | `(bytes: number) => string` | `Russian digits, Б · КБ · МБ · ГБ` | Display of `fileSize`. |
+| `formatSize` | `(bytes: number) => string` | Russian digits, Б · КБ · МБ · ГБ | Display of `fileSize`. |
 | `href` | `string` | — | Where to get it: the tile becomes the download link «Скачать {name}». |
 | `preview` | `string` | — | A picture of the file (an image, the first page) in the tile in place of the format. |
 | `transfer` | `"remote" \| "queued" \| "loading" \| "failed" \| "done"` | — | The transfer of the file, either way (`TransferState`): `queued` / `loading` — the cancel cross and the share ring; `failed` — retry; `remote` — download; `done` — the disk fades out. |
@@ -165,7 +166,7 @@ Content parts in short: `Message.Media` — a [Gallery](../gallery/COMPONENT.md)
 | `onCancel` | `() => void \| Promise<void>` | — | Cancel the transfer in flight: the disk's cross. A returned promise keeps the disk pending (a spinner, `aria-busy`, no second press); a rejection leaves the transfer as it was and announces `cancelFailed`. |
 | `onRetry` | `() => void \| Promise<void>` | — | Transfer it again after a failure: the danger disk's retry; a promise works the same (`retryFailed` on a rejection). |
 | `onDownload` | `() => void \| Promise<void>` | — | Fetch a `remote` content: the download arrow; set `transfer` to `loading` with `transferDirection="download"` as it starts. A promise works the same (`downloadFailed` on a rejection). |
-| `labels` | `Partial<MessageFileLabels>` | — | System strings, see Labels. |
+| `labels` | `Partial<MessageFileLabels>` | — | Built-in strings, see Labels. |
 | `…rest` | `Omit<HTMLAttributes<HTMLDivElement>, "children">` | — | `className` and the other attributes. |
 
 ### Message.Location
@@ -178,7 +179,7 @@ Content parts in short: `Message.Media` — a [Gallery](../gallery/COMPONENT.md)
 | `title` | `string` | — | The place. |
 | `address` | `string` | — | Its address. |
 | `live` | `boolean` | `false` | A location shared live (still under reduced motion). |
-| `labels` | `Partial<MessageLocationLabels>` | — | System strings, see Labels. |
+| `labels` | `Partial<MessageLocationLabels>` | — | Built-in strings, see Labels. |
 | `…rest` | `Omit<HTMLAttributes<HTMLDivElement>, "children">` | — | `className` and the other attributes. |
 
 ### Message.Contact
@@ -190,7 +191,8 @@ Content parts in short: `Message.Media` — a [Gallery](../gallery/COMPONENT.md)
 | `phone` | `string` | — | The phone, as written. |
 | `src` | `string` | — | The person's photo; without it the initials. |
 | `color` | `"gray" \| "blue" \| "green" \| "orange" \| "red" \| "yellow" \| "purple" \| "sky" \| "pink" \| "teal"` | `"blue"` | Hue of the initials. |
-| `…rest` | `Omit<HTMLAttributes<HTMLDivElement>, "color">` | — | `children` — `Button.Root` actions («Написать», «Добавить»); `className`. |
+| `children` | `ReactNode` | — | `Button.Root` actions in a row under the person («Написать», «Добавить»). |
+| `…rest` | `Omit<HTMLAttributes<HTMLDivElement>, "color">` | — | `className` and the other div attributes. |
 
 ### Message.LinkPreview
 `ref` → `HTMLAnchorElement`. The card of a linked page across the bubble's full width (at least the card width): an accent wash with a bar, the site, title, description (3 lines) and a 16 : 9 picture; long words and URLs wrap; the whole card opens the page in a new tab.
@@ -210,7 +212,9 @@ Content parts in short: `Message.Media` — a [Gallery](../gallery/COMPONENT.md)
 | Prop | Type | Default | Description |
 |---|---|---|---|
 | `items` | `MessageReaction[]` | — (required) | `{ emoji, count, selected?, users? }` — `count` is the total, `selected` the reader's own reaction, `users` (`{ id, name, src?, color? }[]`, in the order they put it) who put it; without `users` the chip shows the count. |
-| `labels` | `Partial<MessageReactionsLabels>` | — | System strings, see Labels. |
+| `closeOnOutsideClick` | `boolean` | `true` | A press outside closes the message's reaction bar. |
+| `closeOnEscape` | `boolean` | `true` | Escape closes the message's reaction bar. |
+| `labels` | `Partial<MessageReactionsLabels>` | — | Built-in strings, see Labels. |
 | `…rest` | `Omit<HTMLAttributes<HTMLDivElement>, "children">` | — | `className` and the other attributes. |
 
 ### Message.Actions
@@ -229,12 +233,12 @@ Content parts in short: `Message.Media` — a [Gallery](../gallery/COMPONENT.md)
 | `…rest` | `Omit<DropdownContentProps, "side" \| "align" \| "matchTriggerWidth">` | — | `children` (the items), `className`. |
 
 ### Message.Typing
-`ref` → `HTMLDivElement` (`role="status"`). «Печатает…»: an incoming bubble of three dots at the end of the list while the other side types (`Chat.Root typing` puts it there). Keep it mounted and switch `active`.
+`ref` → `HTMLDivElement` (`role="status"`). «Печатает…»: an incoming bubble of three dots at the end of the list while the other side types (`Chat.Root typing` puts it there). Keep it mounted and switch `open`.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `active` | `boolean` | `true` | The other side is typing. Keep the part mounted and switch this, so it can leave smoothly. |
-| `children` | `ReactNode` | — | `Message.Avatar` of who types, in a group chat (`Chat.Messages type="group"`). |
+| `open` | `boolean` | `true` | The bubble is open: the other side is typing. Keep the part mounted and switch this, so it folds open and closed. |
+| `children` | `ReactNode` | — | `Message.Avatar` of who types, in a group chat (`Chat.Messages group`). |
 | `labels` | `Partial<MessageTypingLabels>` | — | `typing` — the text read for assistive tech. |
 | `…rest` | `Omit<HTMLAttributes<HTMLDivElement>, "children">` | — | `className` and the other attributes. |
 
@@ -292,19 +296,19 @@ The fill moves between the two in a color transition (`fast`, both ways); the av
 | `edited` | «изменено» before the time |
 | `Message.Location live` | a breathing pin and a «Трансляция» badge |
 | `Message.Text plain` | a string without Markdown |
-| `Message.Typing active` | the typing bubble shows; off, it leaves closing its height |
+| `Message.Typing open` | the typing bubble shows; off, it leaves closing its height |
 
 The list-level settings a message reads — the group chat's author header and avatar gutter (`type`), the quick reaction, the reaction bar's options, the reader — are props of `Chat.Messages`.
 
 ## States
 | State | Driven by | DOM |
 |---|---|---|
-| author header | `Message.Author` in a group chat (`Chat.Messages type="group"`) on `single` / `first`; any message on its own | the header line at the top of the bubble; over a picture or a circle on the media pill at the top-start corner; hidden on `middle` / `last` and in a direct chat (the author still names the message) |
+| author header | `Message.Author` in a group chat (`Chat.Messages group`) on `single` / `first`; any message on its own | the header line at the top of the bubble; over a picture or a circle on the media pill at the top-start corner; hidden on `middle` / `last` and in a direct chat (the author still names the message) |
 | avatar | `Message.Avatar` in a group chat on `single` / `last` | the avatar in the gutter at the bubble's bottom; the gutter stays empty on the others |
 | new at the end | the chat's list decided it (`data-enter="incoming"` / `"outgoing"`) | the message column floats up `--prime-space-3` from below and fades in (`fast`, enter easing, `transform` + `opacity` only; the row box clips it); never on a first render, history or a status change. See Chat |
-| pointed at / stepping back | the chat's jump, search or selection (`data-pointed`, `data-selected` on the message; `data-pointing`, `data-selecting` on the list) | nothing is drawn on the message: it stays at full strength while the others — the bubble, picture or circle with its tail and reactions, the avatar, the retry — step back to `--prime-message-dim-opacity` with a slight desaturation (selection: `fast`, both ways; the current search match: while it is current); a jump instead blinks the message itself three times, `base` each, the others stay still. Reduced motion: no blink |
+| pointed at / stepping back | the chat's jump, search or selection (`data-pointed`, `data-blink`, `data-selected` on the message; `data-pointing`, `data-selecting` on the list) | nothing is drawn on the message: it stays at full strength while the others — the bubble, picture or circle with its tail and reactions, the avatar, the retry — step back to `--prime-opacity-dim` with a slight desaturation (selection: `fast`, both ways; the current search match: while it is current); a jump instead blinks the message itself three times, `base` each, the others stay still. Reduced motion: no blink |
 | search match | the chat's search query | every case-insensitive match in `Message.Text` and the transcripts under a soft accent wash (`<mark>`) |
-| typing | `Message.Typing active` | an incoming bubble of three dots rising and fading in turn on the loading loop (reduced motion slows it); enters floating up while its height opens (`fast`), leaves closing its height (`fast`) — or at once when a reply arrives at the end of the list in the same update; its block axis clips, so a closed row leaves nothing under the list |
+| typing | `Message.Typing open` | an incoming bubble of three dots rising and fading in turn on the loading loop (reduced motion slows it); enters floating up while its height opens (`fast`), leaves closing its height (`fast`) — or at once when a reply arrives at the end of the list in the same update; its block axis clips, so a closed row leaves nothing under the list |
 | status change | `status` | the ticks cross-fade and scale (`base`, `emphasized`), interruptible |
 | retrying | `onRetry` returns a promise | `sending` ticks and a `loading` retry button until it settles |
 | inline keyboard | `Message.Actions` children | `data-actions` on the message column: the rows under the bubble, the bubble at least as wide as them, no tail |
@@ -314,17 +318,17 @@ The list-level settings a message reads — the group chat's author header and a
 | new reaction | an emoji not on the message yet (the reader's or anyone's) | part of the size change: its room is there at once and the chip fades and scales in from 0.9 where it stands, on the bubble's clock, once the parts moving away have left its place. Never on the first render of a message: opening a chat or loading history plays nothing |
 | reaction removed | the last of an emoji taken back | part of the size change: the chip fades out where it stood (`data-morph-ghost`, out of flow) while the chips after it and the bubble glide into place — one stroke |
 | own reaction | `selected` in `Message.Reactions items` | `aria-pressed`, `data-selected`: accent fill |
-| reaction bar | long press (with the menu), long hover ~500 ms (pointer devices, the bar alone, a 300 ms grace to reach it), `R` | a floating toolbar above the bubble; it grows from the bubble, the emoji pop in a quarter-stagger apart, «⌄» glides the rest open, the hovered emoji lifts; the picked one pops while the bar leaves — the open played back on the same `base` clock, back to the bubble's corner, nothing reflows; mounted from its open until its exit ends, one on the page at a time |
+| reaction bar | long press (with the menu), long hover ~500 ms (pointer devices, the bar alone, a 300 ms grace to reach it), `R` | a floating toolbar above the bubble; it grows from the bubble, the emoji pop in a quarter-stagger apart, «⌄» glides the rest open, the hovered emoji lifts; the picked one swells while the bar leaves — the open played back on the same `base` clock, back to the bubble's corner, nothing reflows; mounted from its open until its exit ends, one on the page at a time |
 | round video | `VideoNote` in the message | the round shell: no backing, the meta on its pill at the circle's bottom-end corner, reactions under it; the circle's own states are VideoNote's (a still first frame at rest, nothing plays before a press) |
 | transcript | `transcript` / `onTranscribe` on `VoicePlayer` or `VideoNote`, `transcriptExpanded` | the same soft `xs` button at the player's top end (the end of the waveform; the top-end corner of the circle's box) opens the text: the text block is laid out at once under the player and the bubble glides open (the size change), the text fading in as the box reaches it and the meta moving to the end of its last line; under a circle the text stands in a block of the message's fill. Closing is the mirror image: the box closes over the text while it fades over the whole stroke, like a disclosure. The player row never moves; the rows after the message glide by the same height on the same clock while the view holds still. While `onTranscribe` is pending only the button spins and the area stays closed, then it opens with the text; a rejection closes the area and announces `transcribeFailed`. The open state and the text outlive the row leaving the window |
 | transferring media / file, sent or received (one look both ways) | `transfer`, `transferProgress`, `transferDirection` (of an item for media) | media: the picture dims under the shared transfer disk in the middle — a 40px disk on the media shade (backdrop blur) with a white ×, the progress drawn as a ring along its inner edge (the disk is a Button `shape="circle"` `variant="shade"`; the ring is its `progress` ring — the kit ring at the line weight, 2px, a 32% white track, a white arc from 12 o'clock gliding `base`, always turning; the button is `aria-busy` and described by «Отправка {percent}%» / «Загрузка {percent}%» by the direction), the play mark of a video gives way; pressing the disk cancels; done — the ring fills, then the disk fades and shrinks to 0.9 (`fast`), the picture returns to full; failed — the disk turns danger with a retry arrow («Повторить отправку» / «Повторить загрузку», described by «Не отправилось» / «Не загрузилось»); `remote` — the download arrow on the same disk, no ring (`onDownload`). A file: the same disk at the tile's size (`xl`, 48px) covers its round tile, always shown — the ring along its edge, the × on the media shade; failed — the danger retry and the reason under the name; done — it fades away and the face (or the download link) is back. Voice and video messages draw the same transfer on their own play disk (VoicePlayer, VideoNote). Every one is the same disk (`internal/transferDisk`): one ring proportion, track, start, motion and cancel / retry / download. The size line shows «{done} из {total}». The name and the size line never move |
 | transfer pending | `onCancel` / `onRetry` returned a promise | a `Spinner` in the disk's glyph place, `aria-busy`, no second press; a rejection leaves the transfer as it was and announces `cancelFailed` / `retryFailed` |
 | selection mode | the chat's `selected` (not `null`) | an `option` with `aria-selected`; a check (`Checkbox.Indicator`, circle) at the row start; a press anywhere on the row toggles it — the parts inside take no presses meanwhile; `data-selecting`, `data-selected` on the article |
-| menu open | right click, long press, Enter / Shift+F10 / the menu key | the menu at the pointer (below the bubble from the keyboard); a bottom sheet below 640px |
+| menu open | right click, long press, Enter / Shift+F10 / the menu key | the menu against the message at the pointer (`anchorPoint`; below the bubble from the keyboard), focus returns to the message on close; a bottom sheet on a phone |
 | focused | keyboard | the focus ring around the bubble |
 
 ## Layout & spacing
-- A message is a row as wide as its host (a container): a bubble is at most `--prime-message-max-width` (30rem) and 85% of the row, so it follows the chat column from 320px up.
+- A message is a row as wide as its host (a container): a bubble is at most `--prime-message-max-width` (30rem) and 85% of the row, so it follows the chat column down to the narrowest screen of the kit (foundation §9).
 - Gap between runs `--prime-message-gap` (16), inside a run `--prime-message-group-gap` (8): a run reads as one block, the next author stands apart.
 - **Growth in place:** a message that changes size grows from its anchored edge. A reaction row, an edit or an upload state grow it from its bottom: the bottom corner, the meta and the tail stay where they are; in a chat the list scrolls by the change in the same frame, so the rows below stay still, and the rows above glide up (or down) as one block on the message's clock. A transcript grows it from its top: the player stays and the rows below glide.
 - Only text selects: every message is `user-select: none`, and the text-bearing parts (text and caption, author, forwarded-from, reply quote, file name, contact, place, link preview) opt back in. A double click reacts without selecting a word; a long press opens the bar and the menu, never the iOS callout.
@@ -333,9 +337,9 @@ The list-level settings a message reads — the group chat's author header and a
 - **The author's header** (a group chat, the first of a run): one line `body-s` — the name semibold in the author's hue, an `xs` icon, the tag muted after them; the name ellipsizes first, then the tag. The bubble hugs the whole line, so a long name or tag widens it up to its cap. Over a picture or a circle without a caption it stands on the media pill at `space-2` from the top-start corner, in the pill's colors.
 - **A bubble hugs its text** (`bubbleHug`): a bubble of text — text, author, reply, forwarded, reactions — is as wide as its widest laid-out line plus the padding, never the width its lines wrapped in, and never wider than the cap; the meta's room counts on the last line only, where it sits, the reactions row as one line of chips with the meta after them, and the author's header at its full width (`data-message-fit="row"`, an ellipsized name counted whole). Quote and code blocks stretch to the bubble's width; long code lines wrap. Plain wrapping, never `pretty`. The width is measured once per text and row width — cleared, measured and written in one pass in the commit that changed the text, before paint, so a size change's morph runs to the hugged width — and cached by both: a row the window renders again takes its width with nothing measured. Row widths come from one shared `ResizeObserver`, batched per frame; hover, the menu, the reaction bar and selection never measure; a morph reads boxes only, never the hug width; fonts that finish loading measure once more. A bubble with any other part (a card, a player, a picture) keeps the width its parts give it.
 - No minimum width beyond the corners: «Ок 10:16» is a compact pill — the text, the meta on the same line and the padding. With reactions the meta moves to the end of the row's last line and the text gives its room back.
-- Fixed kinds stay one width: a file, a contact and a location are `--prime-message-card-width` (16rem, at most 75% of the chat), a voice message is the player's width, a round video is `--prime-message-video-note` (232, at most 70% of the chat), a link preview the media width (360) or what the row allows.
+- Fixed kinds stay one width: a file, a contact and a location are `--prime-message-card-width` (16rem, at most 75% of the chat), a voice message is the player's width, a round video is the VideoNote circle (268, at most the row), a link preview the media width (360) or what the row allows.
 - Embedded blocks (a link preview, a reply quote, a forwarded header, the cards) span the bubble's content width; long unbreakable text (URLs) wraps instead of widening the bubble.
-- Pictures follow the album layout of their Gallery, at most `--prime-message-media-max-height` (360) wide and tall and within 85% of the row; a bubble with a picture or a card is exactly that part's width and a caption wraps under it.
+- Pictures follow the album layout of their Gallery, at most `--prime-gallery-max-size` (360) wide and tall and within 85% of the row; a bubble with a picture or a card is exactly that part's width and a caption wraps under it.
 - A file's name stands on one line without the extension its format tile shows; the full name is its tooltip and the download label. The tile downloads by an `href` link, or with `transfer="remote"` through `onDownload` in the app.
 - `Message.Text` wraps anywhere; the meta stands at the end of its last line.
 - Round controls (download, cancel, retry, play) are a Button `shape="circle"`: hover, press, focus ring and the touch area follow the circle. A file's action is its round tile (48): the transfer disk (`internal/transferDisk`, `xl`) with its ring, the retry or the download stand on it — never a separate button beside the name. Every transfer, either way (media, file, video note, voice), is that one disk.
@@ -345,15 +349,19 @@ The list-level settings a message reads — the group chat's author header and a
 ## Accessibility
 
 ### Keyboard
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
+
 | Key | Action |
 |---|---|
 | `Enter` · `Shift+F10` · `ContextMenu` | Opens the menu of the focused message (`ContextMenu` is the menu key); in a chat's selection mode `Enter` / `Space` toggle it and Shift extends the range from the anchor |
 | `R` | Opens the reaction bar (with `onReactionToggle`); arrows move between reactions, `Home` / `End` to the ends, `Enter` / `Space` pick, `Tab` closes it |
 | `L` | Puts or takes back the quick reaction (as a double tap) |
 | `Tab` | Moves to the buttons and links of a message: the reply quote, a file, the `Message.Actions` buttons in row order |
-| `Escape` | Closes the menu or the reaction bar |
+| `Escape` | Closes the menu, or the reaction bar unless `Message.Reactions closeOnEscape={false}` |
 
 ### ARIA
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
+
 - Every message is a `role="article"` named «{author}, {time}» (`labels.message`); an outgoing one is «Вы»; the author names every message of a run, its header shown or not. In a list it carries `aria-posinset` / `aria-setsize`; in a chat's selection mode it is an `option` with `aria-selected`.
 - The delivery status is an image named «Отправляется», «Отправлено», «Прочитано» or «Не отправлено».
 - A reply with `target` or `onClick` is a button; the hidden «Ответ на сообщение» explains it. Pressing it moves the focus to the original.
@@ -369,49 +377,97 @@ The list-level settings a message reads — the group chat's author header and a
 ### Labels
 <!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
 
+#### Message.Root
+
 | Key | Default | Used for |
 |---|---|---|
 | `message` | `"{author}, {time}"` | The name of a message for assistive tech. |
 | `you` | `"Вы"` | The author of an outgoing message. |
 | `edited` | `"изменено"` | The mark of an edited message in its meta. |
+| `spoiler` | `"Скрытый текст"` | `Message.Text`: the name of a `\|\|spoiler\|\|` while it is hidden. |
 | `sending` | `"Отправляется"` | Name of the clock status. |
 | `sent` | `"Отправлено"` | Name of the one-check status. |
 | `read` | `"Прочитано"` | Name of the two-check status. |
 | `failed` | `"Не отправлено"` | Name of the failed status. |
 | `retry` | `"Повторить отправку"` | The retry button beside a failed message. |
-| `menu` | `"Действия с сообщением"` | The name of the context menu. |
 | `select` | `"Выбрать"` | The menu item that starts selection mode with the message. |
-| `reaction` | `"{emoji}: {count}"` | `Message.Reactions`: the name of a chip without `users`. |
-| `reactionUsers` | `"{emoji} {count}: {users}"` | `Message.Reactions`: the name of a chip with `users`; `{users}` — their names. |
-| `moreUsers` | `"ещё {count}"` | `Message.Reactions`: the last item of `{users}` when not everyone is listed. |
-| `reactions` | `"Реакции"` | `Message.Reactions`: the name of the row. |
 | `reactionAdded` | `"Реакция {emoji} поставлена"` | Announced when the quick reaction (a double tap, `L`) is put. |
 | `reactionRemoved` | `"Реакция {emoji} снята"` | Announced when the quick reaction is taken back. |
 | `reactionBar` | `"Реакции"` | The name of the reaction bar. |
 | `moreReactions` | `"Все реакции"` | The «⌄» of the reaction bar that shows every reaction. |
-| `spoiler` | `"Скрытый текст"` | `Message.Text`: the name of a `\|\|spoiler\|\|` while it is hidden. |
-| `typing` | `"Собеседник печатает"` | `Message.Typing`: the text read while the other side types. |
-| `reply` | `"Ответ на сообщение"` | `Message.Reply labels`: the hidden prefix read before the quote. |
-| `forwarded` | `"Переслано от {author}"` | `Message.Forwarded labels`: the header; `{author}` — the original author. |
+
+#### Message.Forwarded
+
+| Key | Default | Used for |
+|---|---|---|
+| `forwarded` | `"Переслано от {author}"` | `Message.Forwarded`: the header; `{author}` — the original author. |
+
+#### Message.Reply
+
+| Key | Default | Used for |
+|---|---|---|
+| `reply` | `"Ответ на сообщение"` | `Message.Reply`: the hidden prefix read before the quote. |
+
+#### Message.Media
+
+| Key | Default | Used for |
+|---|---|---|
 | `open` | `"Открыть: {name}"` | `Message.Media`: the name of a tile that opens the viewer; `{name}` is `alt`, else `photo` / `video`. |
 | `photo` | `"фото"` | `Message.Media`: `{name}` of a photo without `alt`. |
 | `video` | `"видео"` | `Message.Media`: `{name}` of a video without `alt`. |
-| `cancelUpload` | `"Отменить отправку"` | `Message.Media` / `Message.File`: the cross while sending. |
-| `cancelDownload` | `"Отменить загрузку"` | `Message.Media` / `Message.File`: the cross while receiving. |
-| `retryUpload` | `"Повторить отправку"` | `Message.Media` / `Message.File`: the retry after a failed send. |
-| `retryDownload` | `"Повторить загрузку"` | `Message.Media` / `Message.File`: the retry after a failed receive. |
-| `uploadProgress` | `"Отправка {percent}%"` | `Message.Media` / `Message.File`: the share while sending — the description of the cross. |
-| `downloadProgress` | `"Загрузка {percent}%"` | `Message.Media` / `Message.File`: the share while receiving — the description of the cross. |
-| `notSent` | `"Не отправилось"` | `Message.Media` / `Message.File`: why a send failed — the retry's description. |
-| `notReceived` | `"Не загрузилось"` | `Message.Media` / `Message.File`: why a receive failed — the retry's description. |
-| `download` | `"Скачать {name}"` | `Message.Media` / `Message.File`: the download arrow of a `remote` tile or file, and a file's `href` link; `{name}` is the file name, a tile's `alt` or `photo` / `video`. |
-| `cancelFailed` | `"Не удалось отменить"` | `Message.Media` / `Message.File`: announced when `onCancel` rejected. |
-| `retryFailed` | `"Не удалось повторить"` | `Message.Media` / `Message.File`: announced when `onRetry` rejected. |
-| `downloadFailed` | `"Не удалось скачать"` | `Message.Media` / `Message.File`: announced when `onDownload` rejected. |
+| `cancelUpload` | `"Отменить отправку"` | `Message.Media`: the cross while sending. |
+| `cancelDownload` | `"Отменить загрузку"` | `Message.Media`: the cross while receiving. |
+| `retryUpload` | `"Повторить отправку"` | `Message.Media`: the retry after a failed send. |
+| `retryDownload` | `"Повторить загрузку"` | `Message.Media`: the retry after a failed receive. |
+| `uploadProgress` | `"Отправка {percent}%"` | `Message.Media`: the share while sending — the description of the cross. |
+| `downloadProgress` | `"Загрузка {percent}%"` | `Message.Media`: the share while receiving — the description of the cross. |
+| `notSent` | `"Не отправилось"` | `Message.Media`: why a send failed — the retry's description. |
+| `notReceived` | `"Не загрузилось"` | `Message.Media`: why a receive failed — the retry's description. |
+| `download` | `"Скачать {name}"` | `Message.Media`: the download arrow of a `remote` tile; `{name}` is its `alt` or `photo` / `video`. |
+| `cancelFailed` | `"Не удалось отменить"` | `Message.Media`: announced when `onCancel` rejected. |
+| `retryFailed` | `"Не удалось повторить"` | `Message.Media`: announced when `onRetry` rejected. |
+| `downloadFailed` | `"Не удалось скачать"` | `Message.Media`: announced when `onDownload` rejected. |
+
+#### Message.File
+
+| Key | Default | Used for |
+|---|---|---|
 | `transferred` | `"{done} из {total}"` | `Message.File`: the line under the name while it transfers. |
+| `cancelUpload` | `"Отменить отправку"` | `Message.File`: the cross while sending. |
+| `cancelDownload` | `"Отменить загрузку"` | `Message.File`: the cross while receiving. |
+| `retryUpload` | `"Повторить отправку"` | `Message.File`: the retry after a failed send. |
+| `retryDownload` | `"Повторить загрузку"` | `Message.File`: the retry after a failed receive. |
+| `uploadProgress` | `"Отправка {percent}%"` | `Message.File`: the share while sending — the description of the cross. |
+| `downloadProgress` | `"Загрузка {percent}%"` | `Message.File`: the share while receiving — the description of the cross. |
+| `notSent` | `"Не отправилось"` | `Message.File`: why a send failed — the retry's description. |
+| `notReceived` | `"Не загрузилось"` | `Message.File`: why a receive failed — the retry's description. |
+| `download` | `"Скачать {name}"` | `Message.File`: the download arrow of a `remote` file and the `href` link; `{name}` is the file name. |
+| `cancelFailed` | `"Не удалось отменить"` | `Message.File`: announced when `onCancel` rejected. |
+| `retryFailed` | `"Не удалось повторить"` | `Message.File`: announced when `onRetry` rejected. |
+| `downloadFailed` | `"Не удалось скачать"` | `Message.File`: announced when `onDownload` rejected. |
+
+#### Message.Location
+
+| Key | Default | Used for |
+|---|---|---|
 | `openMap` | `"Открыть на карте: {place}"` | `Message.Location`: the name of the map link. |
 | `live` | `"Трансляция"` | `Message.Location`: the mark of a live location. |
 
+#### Message.Reactions
+
+| Key | Default | Used for |
+|---|---|---|
+| `reaction` | `"{emoji}: {count}"` | `Message.Reactions`: the name of a chip without `users`. |
+| `reactionUsers` | `"{emoji} {count}: {users}"` | `Message.Reactions`: the name of a chip with `users`; `{users}` — their names. |
+| `moreUsers` | `"ещё {count}"` | `Message.Reactions`: the last item of `{users}` when not everyone is listed. |
+| `reactions` | `"Реакции"` | `Message.Reactions`: the name of the row. |
+
+#### Message.Typing
+
+| Key | Default | Used for |
+|---|---|---|
+| `typing` | `"Собеседник печатает"` | `Message.Typing`: the text read while the other side types. |
+
 ## Examples
 | Example | Shows |
 |---|---|
@@ -419,7 +475,7 @@ The list-level settings a message reads — the group chat's author header and a
 | [structure.tsx](examples/structure.tsx) | Optional parts of a bubble in their order: the author, a forwarded header, a reply quote, the text and reactions — `Message.Author`, `Message.Forwarded`, `Message.Reply`, `Message.Reactions`. |
 | [kinds.tsx](examples/kinds.tsx) | Every kind of message in its shell, both directions, single and in runs: text bubbles, pictures and circles as blocks, a caption bubble, voice, file, contact, place and link cards, reactions inside a bubble and under a picture — `Message.Media`, `VideoNote`, `Message.File`, `Message.Contact`, `Message.Location`, `Message.LinkPreview`, `VoicePlayer`. |
 | [author.tsx](examples/author.tsx) | A group chat's run of one author: the first message opens with the name in the author's hue, a crown and the member's tag, the last one shows the avatar in the gutter; another author with initials only, a long name that ellipsizes before its tag, a header on a pill over a photo, and your own reply — `Message.Author`, `tag`, `Message.AuthorIcon`, `Message.Avatar`, `position`, `hueOf`. |
-| [typing.tsx](examples/typing.tsx) | The typing signal: an incoming bubble of three dots that enters like a message and leaves closing its height; switch it, keep it mounted — `Message.Typing`, `active`. |
+| [typing.tsx](examples/typing.tsx) | The typing signal: an incoming bubble of three dots that enters like a message and leaves closing its height; switch it, keep it mounted — `Message.Typing`, `open`. |
 | [status.tsx](examples/status.tsx) | Delivery of outgoing messages: a clock while sending, one check when sent, two when read, and a failed one with a retry that resolves after a second; the time comes as a date and reads to the second — `status`, `onRetry`, `formatTime`. |
 | [text-formatting.tsx](examples/text-formatting.tsx) | The Markdown the Composer writes, rendered safely: bold, italic, strike, code, a code block, links and a quote; long words and URLs wrap; a pasted error log stays as typed, its stars and underscores kept — `Message.Text`, `edited`, `plain`. |
 | [reactions.tsx](examples/reactions.tsx) | Reactions under a message: each chip shows who reacted — up to three avatars, from four on two and «+N» — and a press on a chip, or a double tap on the message, puts or takes back your own at once while the request runs behind it — `Message.Reactions`, `users`, `onReactionToggle`. |
@@ -450,12 +506,12 @@ The list-level settings a message reads — the group chat's author header and a
 - A rounded wrapper or a backing of your own around `Message.Media` → the message shell rounds and clips it.
 - Measuring a bubble or animating its height yourself → the bubble fits its content in CSS and the kit owns every size change of a message.
 - A context menu on a hover-only «…» button → `Message.Menu`: right click, long press and the keyboard open it.
-- «печатает…» as a text row you add and remove → `<Message.Typing active={typing} />` kept mounted, or `Chat.Root typing`.
+- «печатает…» as a text row you add and remove → `<Message.Typing open={typing} />` kept mounted, or `Chat.Root typing`.
 - Pausing other players by hand → one sound at a time is built into `VoicePlayer`, `VideoNote` and chat videos.
 - A transcript as a separate `Message.Text`, or a height animation of your own around it → `transcript` / `onTranscribe` on `VoicePlayer` and `VideoNote`: the text opens inside the same message, in one stroke with its height.
 - A list, dates, search or selection built around messages → [Chat](../chat/COMPONENT.md).
 - A bot's buttons placed inside `Message.Text`, or a row of buttons of your own under a message → `Message.Actions` with `Button.Root` children: one row per part, at the message's width.
 
 ## Related
-- **Built from:** [Dropdown](../dropdown/COMPONENT.md) (`Message.Menu`), [Gallery](../gallery/COMPONENT.md) (`Message.Media`), [Avatar](../avatar/COMPONENT.md) (`Avatar.Group` + `Avatar.Overflow` in reaction chips), [Badge](../badge/COMPONENT.md) (the «Трансляция» mark of a live location), [Thumbnail](../thumbnail/COMPONENT.md) (the map, the link preview picture, a file's preview), [Button](../button/COMPONENT.md) (retry, the transfer disk, `shape="circle"`, the buttons of `Message.Actions`), [Checkbox](../checkbox/COMPONENT.md) (`Checkbox.Indicator` in selection mode), [Spinner](../spinner/COMPONENT.md) (pending transfers and transcripts), Icon (status ticks, file glyphs, `action.forward`, `action.refresh`); `internal/messagePart` (the contract of content parts), `internal/messageList` (the contract with a chat's list), `internal/palette` (`hueOf`), `internal/Disclosure` (the reactions row, transcripts), `bubbleMorph` (every size change as one stroke), `bubbleHug` (a bubble of text as wide as its widest line), `internal/transferDisk` (the transfer of a file), `internal/mediaPill` (the meta, the author's pill), `internal/HighlightMatch` (search marks), `internal/richText` (Markdown)
+- **Built from:** [Dropdown](../dropdown/COMPONENT.md) (`Message.Menu`), [ScrollContainer](../scroll-container/COMPONENT.md) (the floating panel of the reaction bar), [Gallery](../gallery/COMPONENT.md) (`Message.Media`), [Avatar](../avatar/COMPONENT.md) (`Avatar.Group` + `Avatar.Overflow` in reaction chips), [Badge](../badge/COMPONENT.md) (the «Трансляция» mark of a live location), [Thumbnail](../thumbnail/COMPONENT.md) (the map, the link preview picture, a file's preview), [Button](../button/COMPONENT.md) (retry, the transfer disk, `shape="circle"`, the buttons of `Message.Actions`), [Checkbox](../checkbox/COMPONENT.md) (`Checkbox.Indicator` in selection mode), [Spinner](../spinner/COMPONENT.md) (pending transfers and transcripts), Icon (status ticks, file glyphs, `action.forward`, `action.refresh`); `internal/messagePart` (the contract of content parts), `internal/messageList` (the contract with a chat's list), `internal/palette` (`hueOf`), `internal/Disclosure` (the reactions row, transcripts), `bubbleMorph` (every size change as one stroke), `bubbleHug` (a bubble of text as wide as its widest line), `internal/transferDisk` (the transfer of a file), `internal/mediaPill` (the meta, the author's pill), `internal/HighlightMatch` (search marks), `internal/richText` (Markdown), [VisuallyHidden](../visually-hidden/COMPONENT.md)
 - **See also:** [Chat](../chat/COMPONENT.md) — the conversation the messages stand in; [Gallery](../gallery/COMPONENT.md) — the album of `Message.Media`; [VideoNote](../video-note/COMPONENT.md) — the round video message; [VoicePlayer](../voice-player/COMPONENT.md) — the content of a voice message; [Composer](../composer/COMPONENT.md) — the input under the list; [Timeline](../timeline/COMPONENT.md)

package/src/components/message/examples/typing.tsx

@@ -1,21 +1,21 @@
-/** The typing signal: an incoming bubble of three dots that enters like a message and leaves closing its height; switch it, keep it mounted — `Message.Typing`, `active`. */
+/** The typing signal: an incoming bubble of three dots that enters like a message and leaves closing its height; switch it, keep it mounted — `Message.Typing`, `open`. */
 import { Button, Message } from "prime-ui-kit";
 import * as React from "react";
 
 import styles from "./examples.module.css";
 
 export default function MessageTypingExample() {
-  const [active, setActive] = React.useState(true);
+  const [typing, setTyping] = React.useState(true);
   return (
     <div className={styles.stage}>
       <div className={styles.thread}>
         <Message.Root time="14:02">
           <Message.Text>Сейчас проверю остатки на складе.</Message.Text>
         </Message.Root>
-        <Message.Typing active={active} />
+        <Message.Typing open={typing} />
       </div>
-      <Button.Root variant="soft" tone="neutral" onClick={() => setActive((on) => !on)}>
-        {active ? "Перестал печатать" : "Снова печатает"}
+      <Button.Root variant="soft" tone="neutral" onClick={() => setTyping((on) => !on)}>
+        {typing ? "Перестал печатать" : "Снова печатает"}
       </Button.Root>
     </div>
   );