@botiverse/raft-ui 0.23.1 → 0.25.0

package/CHANGELOG.md

@@ -1,3 +1,128 @@
+## [0.25.0](https://github.com/botiverse/raft-design/compare/v0.24.0...v0.25.0) (2026-10-23)
+
+### Design System
+
+- **Themes: a frame, never a new palette**: a person can pick a theme for themselves, and it follows their account to every server. Raft Yellow, the foundation itself, stays the default; beside it are Boring Gray and nine avatar-series themes (Bots, Critters, Space, Desk, Food, Quest, Weather, Plants, Spooky). A theme may recolor only the frame (rail, web top bar, phone top bar), the sidebar and, in dark mode, the canvas, cards and popups, tinted to its hue. The pink primary button, unread and @ counts, status lights, warnings and errors look the same in every theme. Every theme has a light and a dark version. An avatar-series theme can draw its series' pixel sprites on the empty parts of the frame, and the person can turn them off. Boring Gray is the one theme that also changes the brand: where you are is a gray fill with ink type, not yellow. It applies to AppRail and SidebarItem. ([#754](https://github.com/botiverse/raft-design/pull/754))
+  - Why: the frame is on every screen but nobody reads it, so it can carry a person's choice of look; keeping every meaning fixed means someone who switches themes doesn't have to learn the product again. In dark mode the surfaces take the theme's hue because a neutral black panel inside a colored frame looked pasted on.
+  - Affects: Navigation and States: "where you are is always yellow" now has one exception, Boring Gray, where `brand` and its washes are neutral grays and `brand-edge` is transparent. Sprites go only on the web top bar right of the search field (from 1024px) and on the desktop rail under its items, never where they could be taken for a control, an avatar or a status, and never behind text.
+  - Docs: https://raft-design.botiverse.build/foundations/themes/#principles
+- **The first frame is the settled one**: draw the first frame the way it will stay. Read what decides a layout (a remembered width, a collapsed section, a view mode, the viewport, the pointer, the platform) before the first paint, not in an effect after mount. Measure and decide in a layout effect, not in the next animation frame. While data reloads, keep a part's presence and size, such as counts and the controls that depend on them, at their last values until the new answer arrives. A placeholder, such as the fallback of a lazily loaded panel, takes the size and place of what it stands for. ([#748](https://github.com/botiverse/raft-design/pull/748))
+  - Why: a frame drawn from a "not known yet" default and corrected a moment later is a flash: a row grows and shrinks back, a panel snaps to another width, and controls move under the pointer.
+  - Affects: a rule for products; nothing in raft-ui changes. Feedback's skeleton rule now points to it.
+  - Docs: https://raft-design.botiverse.build/patterns/responsive/#the-first-frame-is-the-settled-one
+- **A row with a fill: one line height, no mark taller than the line**: in a row whose items share the first baseline, such as a task row, every text takes the main text's line height, and a taller hit area hangs into the padding instead of making the row taller. A row that centers its items (`items-center`), as every raft-ui list row does, needs neither. ([#750](https://github.com/botiverse/raft-design/pull/750))
+  - Why: a smaller text has a shorter line box, so a Space Mono group sat 3px lower than the title and a mark centered in it sat 1.5px below the row's center; a 32px button made the row taller and the text sat 2.5px above the center of the hover fill.
+  - Affects: give the row `leading-(--text-callout--line-height)` (and set it on sizes that set their own); `text-mono-meta` and `text-caption` 18px → 22px line on such a row.
+  - Docs: https://raft-design.botiverse.build/foundations/alignment/#text-of-different-sizes-on-one-line
+- **Grab handles have round ends**: round is now for switches, radios and grab handles: the bar at a bottom sheet's top edge and the bar in a gap between side cards. It applies to Drawer. ([#747](https://github.com/botiverse/raft-design/pull/747))
+  - Why: every platform draws a grab handle with round ends (the iOS sheet grabber, Material's drag handle), and square ends on a 4px bar read as a cut edge, not something to take hold of.
+  - Affects: `rounded-full`: switches and radios only → switches, radios and grab handles. A bottom sheet's grab handle is a 36 × 4px bar in `line-seam`.
+  - Docs: https://raft-design.botiverse.build/foundations/shape/#principles
+- **The gap handle's bar follows the pointer**: on hover, the 56 × 4px bar in a gap between side cards is centered on the pointer along the gap, kept half a bar inside each end, with round ends; while dragging it stays where the drag started, and with keyboard focus it sits in the middle. Where two gaps cross, the crossing gap's bar lights at the pointer and the other at its end against the corner. `ResizableHandle` still draws only the seam handle; products draw the gap handle themselves. ([#746](https://github.com/botiverse/raft-design/pull/746))
+  - Why: a gap has no line, so the bar is the only thing that shows where the hand is, and a bar fixed in the middle of a long edge looked unrelated to the pointer.
+  - Affects: hover bar: middle of the gap, `rounded-[1px]` → at the pointer, `rounded-full`. Touch has no hover, so there the bar stays in the middle.
+  - Docs: https://raft-design.botiverse.build/components/resizable/#the-gap-handle
+- **An app link shows its host wherever a touch can open it**: a chip for a link that an app previews shows the link's host after its title (`MessageReferenceSuffix`) on any device with touch input, including a laptop with a touch screen. Write the full host, dropping only a leading `www.`, never shortened to the registered domain, and an internationalized host in its ASCII form (`xn--…`). The title truncates first; if the host alone still doesn't fit, it loses its start, never its end. It applies to MessageItem and MessageReference. ([#749](https://github.com/botiverse/raft-design/pull/749), [#753](https://github.com/botiverse/raft-design/pull/753), [#755](https://github.com/botiverse/raft-design/pull/755))
+  - Why: the title is the app's own words and may say anything, and a tap opens the link without the hover card that shows where it goes on a desktop. A link someone can open without seeing where it goes is a safety problem, and the end of a host (`…review.attacker.example`) is the part that says where.
+  - Affects: suffix `hidden any-pointer-coarse:inline` (any touch input, not only the main pointer). A host that overflows is truncated at its start: `dir="ltr"` and `unicode-bidi: isolate` inside a right-to-left box, so the ellipsis lands at the start.
+  - Docs: https://raft-design.botiverse.build/components/message-item/#app-links
+- **An app link is a plain link until Raft knows an app previews it**: before a message's previews are first read, an app's link is an ordinary link. Once someone allows an app's previews and Raft reads them again, each of that app's links is `MessageReferencePending capped` until its preview arrives. It applies to MessageItem. ([#753](https://github.com/botiverse/raft-design/pull/753))
+  - Why: until the previews are read, the client can't tell an app's link from any other.
+  - Affects: pending chip shown while any preview loads → only for links of an app whose previews are allowed, after they are read again.
+  - Docs: https://raft-design.botiverse.build/components/message-item/#app-links
+- **Read receipts on a mention: on a touch screen the check alone says it**: there is no hover card on a touch screen, and tapping a mention opens the agent's profile, so the check is the whole answer there: no mark means not read yet. Don't add a long press or a popup only for this line. It applies to MessageItem. ([#745](https://github.com/botiverse/raft-design/pull/745))
+  - Why: a gesture for one line of text is more to learn than it tells.
+  - Affects: a rule for products; the check's own word ("Read") still reaches a screen reader.
+  - Docs: https://raft-design.botiverse.build/components/message-item/#read-receipts-on-a-mention
+- **The message menu: its order written down**: the menu opens with the message's full date and time as a label that can't be chosen, then the 7 quick reactions and a `smile-plus` button that opens every emoji, then the actions in three sections by what they do to the message: keep going on it (Reply in Thread, Follow or Unfollow Thread, the task action), take it elsewhere (Copy Link, Copy Markdown, Forward, Select Message), and just for me (Save or Remove from Saved, Translate). A section with nothing in it is left out with its separator. It applies to DropdownMenu, ContextMenu and MessageReactionQuickRow. ([#751](https://github.com/botiverse/raft-design/pull/751))
+  - Why: the order lived only in the compositions; it is now a rule, grouped by what each action does to the message.
+  - Affects: 8 buttons of 36px make the menu 316px wide, wider than its 240px minimum; the actions take the same width.
+  - Docs: https://raft-design.botiverse.build/components/dropdown-menu/#the-message-menu
+
+### Added
+
+- **Themes**: a new export, `@botiverse/raft-ui/themes.css`, with Boring Gray (`boring`) and the nine avatar-series themes (`bots`, `critters`, `space`, `desk`, `food`, `quest`, `weather`, `plants`, `spooky`), each with a light and a dark version. Import it after `foundation.css` and put `data-theme="<id>"` on the element that carries the mode class (`.light` / `.dark`); without `data-theme` the app is Raft Yellow. Put `data-theme-decor="off"` on the same element to turn the sprites off and keep the colors. A top bar you draw yourself takes the new `frame-decor-top` utility for its sprites; `frame-decor-rail` is the rail's, which AppRail already draws. ([#754](https://github.com/botiverse/raft-design/pull/754))
+  - Why: see Themes: a frame, never a new palette, above.
+  - Affects: a theme overrides only `layer-frame`, `layer-frame-active`, `foreground-on-frame` (and `-muted`, `-active`), `fill-frame-medium`, `line-frame-active` and `layer-sidebar`; in dark mode also `layer-canvas`, `layer-card` and `layer-popover`; Boring Gray also `brand`, `brand-soft`, `brand-strong`, `brand-glow`, `brand-edge` and `selection`. `frame-decor-top` paints `--frame-decor-top` 72px from the right end, from 1024px wide only; both are `none` without a decorated theme. Themes are generated from `themes.json` (`vp run @botiverse/raft-ui#build:themes`).
+  - Docs: https://raft-design.botiverse.build/foundations/themes/#using-themes
+- **`brand-edge`** Tailwind color: `--color-brand-edge` maps the existing `--brand-edge` token (`border-brand-edge`, `ring-brand-edge`). ([#754](https://github.com/botiverse/raft-design/pull/754))
+  - Why: the edge of a selected navigation item has to follow the theme: ink by default, transparent in Boring Gray.
+  - Affects: `var(--brand-edge)`, which is `var(--sticker-ink)` in the foundation and `transparent` in Boring Gray.
+  - Docs: https://raft-design.botiverse.build/foundations/themes/#what-a-theme-may-change
+
+### Changed
+
+- **SidebarItem**: the active item's border takes `brand-edge` instead of `sticker-ink`, so in Boring Gray the selected row is a plain gray fill. It renders the same in Raft Yellow and the avatar-series themes. ([#754](https://github.com/botiverse/raft-design/pull/754))
+  - Why: see Themes: a frame, never a new palette, above.
+  - Affects: `data-active:border-sticker-ink` → `data-active:border-brand-edge`.
+  - Docs: https://raft-design.botiverse.build/foundations/themes/#the-themes
+- **AppRail**: the nav draws the theme's rail sprites as its last flex item, an `::after` pushed to the bottom under the items, up to 48 × 112px, which shrinks when the rail has less room so it never sits behind an item. Without a decorated theme it is empty. ([#754](https://github.com/botiverse/raft-design/pull/754))
+  - Why: see Themes: a frame, never a new palette, above.
+  - Affects: nav gains `after:mt-auto after:h-28 after:min-h-0 after:w-12 after:shrink after:content-[''] after:frame-decor-rail`. A nav `::after` of your own would replace it.
+  - Docs: https://raft-design.botiverse.build/foundations/themes/#decorations
+- **Drawer**: a bottom or top sheet's grab handle has round ends. ([#747](https://github.com/botiverse/raft-design/pull/747))
+  - Why: see Grab handles have round ends, above.
+  - Affects: handle `before:rounded-[1px]` → `before:rounded-full`.
+  - Docs: https://raft-design.botiverse.build/components/drawer/#rules
+- **MessageIcon**, **ChatIcon** and **ThreadIcon**: their lines are drawn at Lucide's weight. ([#751](https://github.com/botiverse/raft-design/pull/751))
+  - Why: at 1 they drew 0.89px at 16px, thinner than every Lucide icon beside them in a menu or a toolbar.
+  - Affects: `strokeWidth` 1 → 1.5 on the 18px grid (1.33px at 16px, as Lucide's 2 on its 24px grid).
+  - Docs: https://raft-design.botiverse.build/components/icons/#anatomy
+- **ThreadIcon**: both bubbles are outlined; the back one stops a stroke's width short of the front one on both sides, and both stay inside the 18px box with their stroke. ([#752](https://github.com/botiverse/raft-design/pull/752))
+  - Why: every icon in Raft is a line drawing at one weight, and a filled bubble read heavier than the Lucide icons beside it.
+  - Affects: front bubble `fill="currentColor"` → outline; the paths are redrawn, so the icon's shape changes slightly.
+  - Docs: https://raft-design.botiverse.build/components/icons/#anatomy
+
+### Fixed
+
+- **MessageReactionQuickRow**: the quick reactions line up with the menu's items: the first drawing starts 10px in, where the items' icons do. ([#751](https://github.com/botiverse/raft-design/pull/751))
+  - Why: with no side padding the reactions stood 3px left of the icons below them, so the column the eye follows down the menu stepped out at the top.
+  - Affects: `p-0` → `px-0.75 py-0` (3px at each side).
+  - Docs: https://raft-design.botiverse.build/components/dropdown-menu/#the-message-menu
+- **Banner** `size="sm"`: with a × (and no action button), the banner keeps the same room above and below as with a button, so the ×'s 32px hover fill stays 4px inside the banner's edges. ([#677](https://github.com/botiverse/raft-design/pull/677))
+  - Why: the room was kept only for an action button, so the ×'s hover fill reached the banner's edge.
+  - Affects: padding above and below with a × only: 8px → (32px − one line) / 2 + 4px, 9px on a desktop and 10px on a phone.
+  - Docs: https://raft-design.botiverse.build/components/banner/#sizes
+- **VirtualList**: scrolling up near the end of a list no longer snaps back, and on iOS the rows stay painted when older rows land at the top while the finger is still down. `onContentResize` is no longer called for rows above the view that the list measures and scrolls away exactly as you scroll up, since nothing in view moves and neither does the distance to the end. ([#683](https://github.com/botiverse/raft-design/pull/683))
+  - Why: a chat that follows the end from `onContentResize` and still counted the person as at the bottom scrolled back to the end, taking back the scroll that had mounted those rows; and when rows above the view shrank near the end, the browser's clamp and the list's own compensation both moved the view, so the rows in view jumped down. On iOS, at the top with the finger down, the pending compensation wasn't applied as a transform, so the rows were drawn below the view and a newly loaded older page showed blank.
+  - Affects: `onContentResize` still runs when content in view or below it changes, and when a pending scroll is replayed. The clamp is subtracted from the scroll compensation instead of being applied twice.
+  - Docs: https://raft-design.botiverse.build/components/virtual-list/#following-the-end
+
+## [0.24.0](https://github.com/botiverse/raft-design/compare/v0.23.1...v0.24.0) (2026-10-23)
+
+### Design System
+
+- **Phone popups 8px from each screen edge**: on a phone, a popup about as wide as the screen is the screen's width less 8px on each side, at most 480px, and stops 8px from the edge it is pushed against, measured from the screen's edge, not the safe area. Its width comes from the positioner's `--available-width`, not `100vw`. It applies to NotificationCenter. ([#737](https://github.com/botiverse/raft-design/pull/737))
+  - Why: popups that open from the same phone top bar sat at different insets and widths, so they didn't line up with each other or sit evenly between the screen's edges; every popup that wide now takes the server list's 8px inset.
+  - Affects: inset 8px from both screen edges; width `min(var(--available-width), 480px)`. The 480px cap only reaches a phone on its side.
+  - Docs: https://raft-design.botiverse.build/foundations/elevation/#popups
+- **Located: focus on the item is the inset ring, and a message is an article**: an item that a keyboard jump focuses draws the 2px inset ring in `foreground`, inside the item and with its corners, only after keyboard input, never the browser's outline. A message is announced as an article named by its sender and its time. It applies to MessageItem. ([#740](https://github.com/botiverse/raft-design/pull/740))
+  - Why: the browser's outline is drawn outside the item with its own rounded corners, so on a message it framed the transparent gap above the row and a scroller cut it off, and a screen reader landing on a message heard its text with no sender or time; the ring now sits inside the item and the row carries its own name.
+  - Affects: focus on a jumped-to item: browser outline → `inset-ring-2 inset-ring-foreground` after keyboard input.
+  - Docs: https://raft-design.botiverse.build/foundations/states/#located
+
+### Breaking Changes
+
+- **MessageItem**: the row is an `article` named by its sender and its time. When it holds a `MessageItemSender` or `MessageItemSenderButton`, a `MessageItemTime` or a `MessageItemContinuationTime`, the row gets `role="article"` and `aria-labelledby` pointing at them, in that order, and those parts get ids raft-ui generates (an `id` you pass is kept and is the one the row points at). A screen reader announces, for example, "Atlas 2:20 PM" before the text; a continuation row is named by its time. A row with none of these parts and no `aria-label` or `aria-labelledby` stays a plain `div`. ([#740](https://github.com/botiverse/raft-design/pull/740))
+  - Why: a screen reader landing on a message, after a jump or with its reading keys, read the text with no sender or time; the row now carries its own role and name.
+  - Affects: every row with a sender or time part, role none (`div`) → `article`, with `aria-labelledby`; the sender and time parts gain an `id`. Your own `role` or `aria-labelledby` on `MessageItem` or its `render` element is left as is; your own `aria-label` drops the generated `aria-labelledby`, and a role that takes no name (`none`, `presentation`, `generic`) gets none.
+  - Migrate: don't render `MessageItem` as an `li` or put rows in a `list`: `role="article"` replaces `listitem`, and a list may hold only list items. Remove the list role from the timeline, or pass `role="listitem"` on `MessageItem` to keep the old semantics. Update tests and selectors that find rows by role or expect no `role` on the row. When `render` is a function, pass `role`, `aria-label` and `aria-labelledby` on `MessageItem`, since a function's props can't be read. Don't give `MessageItemSenderButton` an `aria-label` of its own: the row would read that instead of the visible name.
+  - Docs: https://raft-design.botiverse.build/components/message-item/#accessibility
+
+### Changed
+
+- **MessageItem**: a focused row (`tabIndex={-1}`, set by the caller when a keyboard jump lands on it) shows the 2px inset ring in `foreground`, square like its hover, after keyboard input, and shows its toolbar; it never shows the browser's outline. After a click, nothing shows. raft-ui still doesn't make the row focusable. ([#740](https://github.com/botiverse/raft-design/pull/740))
+  - Why: see Located: focus on the item is the inset ring, above.
+  - Affects: focused row: browser outline → `outline-none focus-visible:keyboard:inset-ring-2 focus-visible:keyboard:inset-ring-foreground`. While the toolbar shows, its card covers part of the ring's top edge at the right.
+  - Docs: https://raft-design.botiverse.build/components/message-item/#states
+
+### Fixed
+
+- **NotificationCenterPopup** `viewport="mobile"`: the popup is the screen's width less 8px on each side, at most 480px, and sits 8px from both screen edges, though it hangs from a bell at the right, lined up with the server list under the same top bar. Pass `collisionPadding` to change the inset. On desktop it is unchanged: 380px with Base UI's default collision padding. ([#737](https://github.com/botiverse/raft-design/pull/737))
+  - Why: see Phone popups 8px from each screen edge, above.
+  - Affects: width `min(92vw, 360px)` → `min(var(--available-width), 480px)`; collision padding Base UI's default → 8px with `viewport="mobile"`.
+  - Docs: https://raft-design.botiverse.build/components/notification-center/#behavior
+
 ## [0.23.1](https://github.com/botiverse/raft-design/compare/v0.23.0...v0.23.1) (2026-10-22)
 
 ### Fixed

package/dist/{inbox-item-ChGeZBFb.d.mts → inbox-item-CiTYKTly.d.mts}

@@ -1271,7 +1271,17 @@ type MessageItemProps = useRender.ComponentProps<"div"> & Pick<MessageItemVarian
    */
   located?: boolean;
 };
-declare function MessageItem({ className, compact, located, render, ...props }: MessageItemProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+/**
+ * One message: an `article` named by its sender and its time
+ * (`aria-labelledby` pointing at `MessageItemSender` or
+ * `MessageItemSenderButton`, then `MessageItemTime` or
+ * `MessageItemContinuationTime`). A row with neither, and no `aria-label` or
+ * `aria-labelledby`, is a plain `div`. Pass `role`, `aria-label` or
+ * `aria-labelledby` on MessageItem or on a `render` element to override
+ * either; a `render` function's props can't be read, so pass them on
+ * MessageItem then.
+ */
+declare function MessageItem({ className, compact, located, render, ...props }: MessageItemProps): import("react").JSX.Element;
 //#endregion
 //#region src/components/message-item/message-item-gutter.d.ts
 type MessageItemGutterProps = useRender.ComponentProps<"div">;
@@ -1280,7 +1290,7 @@ type MessageItemAvatarSlotProps = useRender.ComponentProps<"div">;
 declare function MessageItemAvatarSlot({ className, render, ...props }: MessageItemAvatarSlotProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 type MessageItemContinuationTimeProps = useRender.ComponentProps<"time">;
 /** Left-gutter hover clock for continuation rows, a `<time>`: pass the moment in `dateTime`. Show the hour and minute only, in the person's 12h/24h format, with no AM/PM (`6:35`, `18:35`). */
-declare function MessageItemContinuationTime({ className, render, ...props }: MessageItemContinuationTimeProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+declare function MessageItemContinuationTime({ className, id, render, ...props }: MessageItemContinuationTimeProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 //#endregion
 //#region src/components/message-item/message-item-content.d.ts
 type MessageItemContentProps = useRender.ComponentProps<"div">;
@@ -1315,9 +1325,9 @@ type MessageItemSenderGroupProps = useRender.ComponentProps<"span">;
  */
 declare function MessageItemSenderGroup({ className, render, ...props }: MessageItemSenderGroupProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 type MessageItemSenderProps = useRender.ComponentProps<"span">;
-declare function MessageItemSender({ className, render, ...props }: MessageItemSenderProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+declare function MessageItemSender({ className, id, render, ...props }: MessageItemSenderProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 type MessageItemSenderButtonProps = useRender.ComponentProps<"button">;
-declare function MessageItemSenderButton({ className, render, ...props }: MessageItemSenderButtonProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+declare function MessageItemSenderButton({ className, id, render, ...props }: MessageItemSenderButtonProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 type MessageItemSenderBadgesProps = useRender.ComponentProps<"span">;
 declare function MessageItemSenderBadges({ className, render, ...props }: MessageItemSenderBadgesProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 type MessageItemMetaProps = useRender.ComponentProps<"span">;
@@ -1327,7 +1337,7 @@ type MessageItemTimeProps = useRender.ComponentProps<"time">;
  * The message's time, right after the sender. A `<time>`: pass the moment in
  * `dateTime` (ISO 8601) and the full date and time as its tooltip.
  */
-declare function MessageItemTime({ className, render, ...props }: MessageItemTimeProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+declare function MessageItemTime({ className, id, render, ...props }: MessageItemTimeProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 type MessageItemInlineStatusProps = useRender.ComponentProps<"span">;
 declare function MessageItemInlineStatus({ className, render, ...props }: MessageItemInlineStatusProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 //#endregion

package/dist/{inbox-item-B56I-Ckt.mjs → inbox-item-nHjMl3SO.mjs}

@@ -3707,6 +3707,117 @@ const searchHit = [
 	"text-sticker-ink inset-ring-[1.5px] inset-ring-sticker-ink ring-[1.5px] ring-sticker-edge"
 ];
 //#endregion
+//#region src/components/message-item/message-item-label.ts
+const MessageItemLabelContext = createContext(null);
+const MessageItemLabelProvider = MessageItemLabelContext.Provider;
+/**
+* The id of a sender or time part, registered with the MessageItem around it.
+* A consumer's own `id` wins and is the one registered. Outside a MessageItem
+* the part gets no id.
+*/
+function useMessageItemLabelId(part, id) {
+	const registry = useContext(MessageItemLabelContext);
+	const generatedId = useId();
+	const resolvedId = id ?? (registry ? generatedId : void 0);
+	useLayoutEffect(() => {
+		if (!registry || !resolvedId) return void 0;
+		return registry.register(part, resolvedId);
+	}, [
+		registry,
+		part,
+		resolvedId
+	]);
+	return resolvedId;
+}
+/** Roles that can't be named: on them the row writes no `aria-labelledby`. */
+const NAMELESS_ROLES = /* @__PURE__ */ new Set([
+	"none",
+	"presentation",
+	"generic"
+]);
+/**
+* The row's side: a stable registry for its parts and a ref for its element.
+* The row writes `role="article"` and `aria-labelledby` itself, and only once
+* something names it: a sender or time part, or the consumer's `aria-label` or
+* `aria-labelledby`. A row with none of them (a receipt card in the text
+* column, say) stays a plain `div`, not an article with no name.
+*
+* A consumer's `role` or `aria-labelledby` is rendered by React and left
+* alone. A consumer's `aria-label`, or a role that takes no name, turns the
+* parts' `aria-labelledby` off, since it would win over the label.
+*/
+function useMessageItemLabel(consumer) {
+	const consumerRef = useRef(consumer);
+	const [label] = useState(() => {
+		const parts = {
+			sender: [],
+			time: []
+		};
+		let element = null;
+		const write = (name, value) => {
+			if (!element) return;
+			if (!value) element.removeAttribute(name);
+			else if (element.getAttribute(name) !== value) element.setAttribute(name, value);
+		};
+		const sync = () => {
+			const { role, ariaLabel, ariaLabelledBy } = consumerRef.current;
+			const ids = [...parts.sender, ...parts.time].join(" ");
+			if (role === void 0) write("role", ids !== "" || ariaLabel !== void 0 || ariaLabelledBy !== void 0 ? "article" : "");
+			if (ariaLabelledBy === void 0) {
+				const nameable = role === void 0 || !NAMELESS_ROLES.has(role);
+				write("aria-labelledby", ariaLabel === void 0 && nameable ? ids : "");
+			}
+		};
+		const registry = { register(part, id) {
+			parts[part].push(id);
+			sync();
+			return () => {
+				const index = parts[part].indexOf(id);
+				if (index !== -1) parts[part].splice(index, 1);
+				sync();
+			};
+		} };
+		const ref = (node) => {
+			element = node;
+			sync();
+		};
+		return {
+			registry,
+			ref,
+			sync
+		};
+	});
+	const { role, ariaLabel, ariaLabelledBy } = consumer;
+	useLayoutEffect(() => {
+		consumerRef.current = {
+			role,
+			ariaLabel,
+			ariaLabelledBy
+		};
+		label.sync();
+	}, [
+		role,
+		ariaLabel,
+		ariaLabelledBy,
+		label
+	]);
+	return label;
+}
+/**
+* The consumer's role and name, from MessageItem's props and, where `render`
+* is an element, from that element's props, which Base UI merges over them.
+* A `render` function's props can't be read: pass them to MessageItem.
+*/
+function readConsumerLabel(props, render) {
+	const own = isValidElement(render) ? render.props : {};
+	const pick = (key) => key in own ? own[key] : props[key];
+	return {
+		role: pick("role"),
+		ariaLabel: pick("aria-label"),
+		ariaLabelledBy: pick("aria-labelledby")
+	};
+}
+//#endregion
 //#region src/components/message-item/message-item.recipe.ts
 const sender = [
 	"min-w-0 truncate",
@@ -3729,7 +3840,8 @@ const messageItem = tv$1({
 			"data-popup-open:[--mi-row-fill:var(--fill-subtle)] has-data-popup-open:[--mi-row-fill:var(--fill-subtle)]",
 			"has-data-[slot=message-item-search-match]:[--mi-row-fill:var(--info-soft)] has-data-[slot=message-item-search-match]:hover:[--mi-row-fill:var(--info-soft)]",
 			"has-[[data-slot=message-multi-select-checkbox][data-checked]]:[--mi-row-fill:var(--info-soft)]",
-			"has-[[data-slot=message-multi-select-checkbox][data-checked]]:hover:[--mi-row-fill:var(--info-soft)]"
+			"has-[[data-slot=message-multi-select-checkbox][data-checked]]:hover:[--mi-row-fill:var(--info-soft)]",
+			"outline-none focus-visible:keyboard:inset-ring-2 focus-visible:keyboard:inset-ring-foreground"
 		],
 		gutter: ["relative shrink-0 self-stretch", "w-[35px]"],
 		avatarSlot: [
@@ -3818,20 +3930,36 @@ const messageItem = tv$1({
 });
 //#endregion
 //#region src/components/message-item/message-item-root.tsx
+/**
+* One message: an `article` named by its sender and its time
+* (`aria-labelledby` pointing at `MessageItemSender` or
+* `MessageItemSenderButton`, then `MessageItemTime` or
+* `MessageItemContinuationTime`). A row with neither, and no `aria-label` or
+* `aria-labelledby`, is a plain `div`. Pass `role`, `aria-label` or
+* `aria-labelledby` on MessageItem or on a `render` element to override
+* either; a `render` function's props can't be read, so pass them on
+* MessageItem then.
+*/
 function MessageItem({ className, compact, located = false, render, ...props }) {
 	const { root } = messageItem({ compact });
+	const label = useMessageItemLabel(readConsumerLabel(props, render));
 	const defaultProps = {
 		"data-message-item": "",
 		"data-compact": compact ? "true" : void 0,
 		"data-located": located ? "" : void 0,
 		className: root({ className })
 	};
-	return useRender({
+	const element = useRender({
 		defaultTagName: "div",
 		render,
+		ref: label.ref,
 		props: mergeProps(defaultProps, props),
 		state: { slot: "message-item" }
 	});
+	return /* @__PURE__ */ jsx(MessageItemLabelProvider, {
+		value: label.registry,
+		children: element
+	});
 }
 //#endregion
 //#region src/components/message-item/message-item-gutter.tsx
@@ -3856,9 +3984,12 @@ function MessageItemAvatarSlot({ className, render, ...props }) {
 	});
 }
 /** Left-gutter hover clock for continuation rows, a `<time>`: pass the moment in `dateTime`. Show the hour and minute only, in the person's 12h/24h format, with no AM/PM (`6:35`, `18:35`). */
-function MessageItemContinuationTime({ className, render, ...props }) {
+function MessageItemContinuationTime({ className, id, render, ...props }) {
 	const { continuationTime } = messageItem();
-	const defaultProps = { className: continuationTime({ className }) };
+	const defaultProps = {
+		id: useMessageItemLabelId("time", id),
+		className: continuationTime({ className })
+	};
 	return useRender({
 		defaultTagName: "time",
 		render,
@@ -3971,9 +4102,12 @@ function MessageItemSenderGroup({ className, render, ...props }) {
 		state: { slot: "message-item-sender-group" }
 	});
 }
-function MessageItemSender({ className, render, ...props }) {
+function MessageItemSender({ className, id, render, ...props }) {
 	const { sender } = messageItem();
-	const defaultProps = { className: sender({ className }) };
+	const defaultProps = {
+		id: useMessageItemLabelId("sender", id),
+		className: sender({ className })
+	};
 	return useRender({
 		defaultTagName: "span",
 		render,
@@ -3981,10 +4115,11 @@ function MessageItemSender({ className, render, ...props }) {
 		state: { slot: "message-item-sender" }
 	});
 }
-function MessageItemSenderButton({ className, render, ...props }) {
+function MessageItemSenderButton({ className, id, render, ...props }) {
 	const { senderButton } = messageItem();
 	const defaultProps = {
 		type: "button",
+		id: useMessageItemLabelId("sender", id),
 		className: senderButton({ className })
 	};
 	return useRender({
@@ -4018,9 +4153,12 @@ function MessageItemMeta({ className, render, ...props }) {
 * The message's time, right after the sender. A `<time>`: pass the moment in
 * `dateTime` (ISO 8601) and the full date and time as its tooltip.
 */
-function MessageItemTime({ className, render, ...props }) {
+function MessageItemTime({ className, id, render, ...props }) {
 	const { time } = messageItem();
-	const defaultProps = { className: time({ className }) };
+	const defaultProps = {
+		id: useMessageItemLabelId("time", id),
+		className: time({ className })
+	};
 	return useRender({
 		defaultTagName: "time",
 		render,
@@ -4370,7 +4508,7 @@ const messageReaction = tv$1({ slots: {
 	],
 	quickRow: [
 		"flex shrink-0 items-center",
-		"justify-between gap-0.5 bg-layer-popover p-0",
+		"justify-between gap-0.5 bg-layer-popover px-0.75 py-0",
 		"[&>[role=menuitem]]:size-9 [&>[role=menuitem]]:p-0 *:[[role=menuitem]]:justify-center"
 	],
 	quickButton: [

package/dist/index.d.mts

@@ -1,4 +1,4 @@
-import { $ as MessageListNoticeProps, $a as DropdownMenuCheckboxItemIndicator, $n as MessageItemToolbarButtonProps, $o as ListRowChevron, $r as AvatarGroup, $s as DialogTriggerProps, $t as MessageReferenceLabelProps, A as InboxItemTimestamp, Aa as PopoverHeader, Ai as PreviewCardProps, An as MessageReactionTooltipContent, Ao as DropdownMenuShortcutProps, Ar as MessageItemContentProps, As as DialogContentProps, At as MessageQuotedPreviewUnavailable, Ba as PopoverTitleProps, Bi as TooltipPortal, Bn as MessageReactionTooltipSeparator, Bo as KbdProps, Br as MessageItemAvatarSlotProps, Bs as DialogNavProps, Bt as MessageMultiSelectCheckboxProps, C as InboxItemProps, Ci as PreviewCardHeaderProps, Cn as MessageReactionPickerContentProps, Co as DropdownMenuRadioItem, Cr as MessageItemTime, Ct as MessageQuotedPreviewProps, D as InboxItemSenderProps, Da as PopoverContentProps, Di as PreviewCardPopupProps, Dn as MessageReactionQuickButtonProps, Do as DropdownMenuSeparator, Dr as MessageItemBody, Ds as DialogClose, Dt as MessageQuotedPreviewThreadProps, E as InboxItemSender, Ea as PopoverContent, Ei as PreviewCardPopup, En as MessageReactionQuickButton, Eo as DropdownMenuRadioItemProps, Er as MessageItemAttachmentsProps, Es as DialogBodyProps, Et as MessageQuotedPreviewThread, F as InboxItemTrailingProps, Fa as PopoverPortalProps, Fi as PreviewCardTrigger, Fn as MessageReactionTooltipNameProps, Fo as DropdownMenuTrigger, Fr as MessageItemFooter, Ft as MessageTextSelectionToolbarProps, Ga as MobileNavItem, Gi as TooltipTrigger, Gn as MessageItemBadgeSeparatorProps, Go as Checkbox, Gr as MessageItem, Gs as DialogProps, Gt as MessageMultiSelectToolbarProps, Ha as PopoverTriggerProps, Hi as TooltipProps, Hn as MessageItemBadge, Ho as BadgeProps, Hr as MessageItemContinuationTimeProps, Hs as DialogOverlayProps, Ht as MessageMultiSelectToolbar, I as InboxItemTrigger, Ia as PopoverProps, Ii as PreviewCardTriggerProps, In as MessageReactionTooltipNameText, Io as DropdownMenuTriggerProps, Ir as MessageItemFooterProps, Is as DialogFooterProps, It as MessageTextSelectionToolbarSeparator, J as MessageListEndFade, Ja as MobileNavLabelProps, Jn as MessageItemReadReceiptProps, Jo as ListRow, Jr as AvatarBadge, Js as DialogSurface, K as MessageListDateDivider, Ka as MobileNavItemProps, Ki as TooltipTriggerProps, Kn as MessageItemBadgeStatus, Ko as CheckboxProps, Kr as MessageItemProps, Kt as MessageReferenceChip, L as InboxItemTriggerProps, La as PopoverSeparator, Li as Tooltip, Ln as MessageReactionTooltipNameTextProps, Lo as Kbd, Lr as MessageItemSearchMatch, Ls as DialogHeader, Lt as MessageTextSelectionToolbarSeparatorProps, M as InboxItemTitle, Ma as PopoverPopup, Mi as PreviewCardSeparatorProps, Mn as MessageReactionTooltipMeta, Mo as DropdownMenuSubmenuProps, Mr as MessageItemEditedProps, Ms as DialogDescriptionProps, Mt as MessageTextSelectionToolbar, N as InboxItemTitleProps, Na as PopoverPopupProps, Ni as PreviewCardTitle, Nn as MessageReactionTooltipMetaProps, No as DropdownMenuSubmenuTrigger, Nr as MessageItemEmbedded, Ns as DialogFooter, Nt as MessageTextSelectionToolbarButton, O as InboxItemSubtitle, Oa as PopoverDescription, Oi as PreviewCardPortal, On as MessageReactionQuickRow, Oo as DropdownMenuSeparatorProps, Or as MessageItemBodyProps, Os as DialogCloseProps, Ot as MessageQuotedPreviewTimestamp, P as InboxItemTrailing, Pa as PopoverPortal, Pi as PreviewCardTitleProps, Pn as MessageReactionTooltipName, Po as DropdownMenuSubmenuTriggerProps, Pr as MessageItemEmbeddedProps, Pt as MessageTextSelectionToolbarButtonProps, Q as MessageListNotice, Qa as DropdownMenuCheckboxItem, Qn as MessageItemToolbarButton, Qo as ListRowBottomProps, Qr as AvatarFallbackProps, Qs as DialogTrigger, Qt as MessageReferenceLabel, Ra as PopoverSeparatorProps, Ri as TooltipContent, Rn as MessageReactionTooltipNames, Ro as KbdGroup, Rr as MessageItemSearchMatchProps, Rs as DialogHeaderProps, Rt as MessageMultiSelect, S as InboxItemMetadataProps, Si as PreviewCardHeader, Sn as MessageReactionPickerContent, So as DropdownMenuRadioGroupProps, Sr as MessageItemSenderProps, St as MessageQuotedPreviewLoadingProps, T as InboxItemSelectionProps, Ta as PopoverCloseProps, Tn as MessageReactionPickerStaticProps, To as DropdownMenuRadioItemIndicatorProps, Tr as MessageItemAttachments, Ts as DialogBody, Tt as MessageQuotedPreviewTextProps, Ua as PopoverViewport, Ui as TooltipProvider, Un as MessageItemBadgeProps, Uo as CheckboxIndicator, Ur as MessageItemGutter, Us as DialogPortal, Ut as MessageMultiSelectToolbarActions, Va as PopoverTrigger, Vi as TooltipPortalProps, Vn as MessageReactionTooltipSeparatorProps, Vo as Badge, Vr as MessageItemContinuationTime, Vs as DialogOverlay, Vt as MessageMultiSelectProps, Wa as PopoverViewportProps, Wi as TooltipProviderProps, Wn as MessageItemBadgeSeparator, Wo as CheckboxIndicatorProps, Wr as MessageItemGutterProps, Ws as DialogPortalProps, Wt as MessageMultiSelectToolbarActionsProps, X as MessageListHistoryLimited, Xa as MobileNavRootProps, Xn as MessageItemSavedIndicatorProps, Xo as ListRowBodyProps, Xr as AvatarBadgeProps, Xs as DialogTitle, Xt as MessageReferenceIndicator, Y as MessageListEndFadeProps, Ya as MobileNavRoot, Yn as MessageItemSavedIndicator, Yo as ListRowBody, Yr as AvatarBadgeOffset, Ys as DialogSurfaceProps, Z as MessageListHistoryLimitedProps, Za as DropdownMenu, Zn as MessageItemToolbar, Zo as ListRowBottom, Zr as AvatarFallback, Zs as DialogTitleProps, Zt as MessageReferenceIndicatorProps, _ as InboxItemMarks, _i as PreviewCardDescriptionProps, _n as MessageReactionCountProps, _o as DropdownMenuPopupProps, _r as MessageItemSenderBadgesProps, _s as TextLink, _t as MessageQuotedPreviewContent, a as InboxItemBodyProps, ac as DeprecatedButtonSize, ai as AvatarProps, an as MessageReferenceSuffixProps, ao as DropdownMenuFooterProps, as as ListRowIcon, at as MessageQuotedPreviewAttachments, b as InboxItemMessageProps, ba as PopoverBackdrop, bn as MessageReactionGlyph, bo as DropdownMenuProps, br as MessageItemSenderGroup, bt as MessageQuotedPreviewHeaderProps, c as InboxItemContext, cc as DataAttributes$1, cn as MessageReferenceUnavailable, co as DropdownMenuItemCountProps, cs as ListRowMetaProps, d as InboxItemHeading, di as PreviewCardArrowProps, dn as MessageReferenceTextVariant, do as DropdownMenuItemProps, dr as MessageItemInlineStatus, ds as ListRowTitleProps, dt as MessageQuotedPreviewAuthorMetaProps, ec as PanelAction, ei as AvatarGroupCount, en as MessageReferencePending, eo as DropdownMenuCheckboxItemIndicatorProps, er as MessageItemToolbarProps, es as ListRowChevronProps, et as MessageList, f as InboxItemHeadingProps, fn as MessageReactionAddButton, fo as DropdownMenuLabel, fr as MessageItemInlineStatusProps, fs as ListRowTop, ft as MessageQuotedPreviewAuthorName, g as InboxItemLeadingProps, gi as PreviewCardDescription, gn as MessageReactionCount, go as DropdownMenuPopup, gr as MessageItemSenderBadges, gs as RowTone, gt as MessageQuotedPreviewChannelProps, h as InboxItemLeading, ha as Popover, hi as PreviewCardContentProps, hn as MessageReactionChipProps, hr as MessageItemSender, hs as ListRowValueProps, ht as MessageQuotedPreviewChannel, i as InboxItemBody, ic as ButtonSize, ii as AvatarImageProps, in as MessageReferenceSuffix, io as DropdownMenuFooter, is as ListRowGroupProps, it as MessageQuotedPreviewAttachmentProps, j as InboxItemTimestampProps, ja as PopoverHeaderProps, ji as PreviewCardSeparator, jn as MessageReactionTooltipContentProps, jo as DropdownMenuSubmenu, jr as MessageItemEdited, js as DialogDescription, jt as MessageQuotedPreviewUnavailableProps, k as InboxItemSubtitleProps, ka as PopoverDescriptionProps, ki as PreviewCardPortalProps, kn as MessageReactionQuickRowProps, ko as DropdownMenuShortcut, kr as MessageItemContent, ks as DialogContent, kt as MessageQuotedPreviewTimestampProps, l as InboxItemContextProps, lc as StyledProps, ln as MessageReferenceUnavailableProps, lo as DropdownMenuItemLabel, lr as MessageItemHeader, ls as ListRowProps, m as InboxItemHoverTargetProps, mi as PreviewCardContent, mn as MessageReactionChip, mr as MessageItemMetaProps, ms as ListRowValue, mt as MessageQuotedPreviewAuthorProps, n as InboxItemActions, nc as Button, ni as AvatarGroupProps, no as DropdownMenuContent, ns as ListRowDescriptionProps, nt as MessageQuotedPreview, o as InboxItemContent, oc as buttonVariants, oi as AvatarSize, on as MessageReferenceText, oo as DropdownMenuItem, os as ListRowIconProps, ot as MessageQuotedPreviewAttachmentsProps, p as InboxItemHoverTarget, pn as MessageReactionAddButtonProps, po as DropdownMenuLabelProps, pr as MessageItemMeta, ps as ListRowTopProps, pt as MessageQuotedPreviewAuthorNameProps, q as MessageListDateDividerProps, qa as MobileNavLabel, qn as MessageItemReadReceipt, qo as Presence, qr as Avatar, qt as MessageReferenceChipProps, r as InboxItemActionsProps, rc as ButtonProps, ri as AvatarImage, ro as DropdownMenuContentProps, rs as ListRowGroup, rt as MessageQuotedPreviewAttachment, s as InboxItemContentProps, sc as VariantProps, si as PreviewCard, sn as MessageReferenceTextProps, so as DropdownMenuItemCount, ss as ListRowMeta, st as MessageQuotedPreviewAuthor, t as InboxItem, tc as PanelActionProps, ti as AvatarGroupCountProps, tn as MessageReferencePendingProps, to as DropdownMenuCheckboxItemProps, ts as ListRowDescription, tt as MessageListProps, u as InboxItemDensity, ui as PreviewCardArrow, un as MessageReferenceChipVariant, uo as DropdownMenuItemLabelProps, ur as MessageItemHeaderProps, us as ListRowTitle, ut as MessageQuotedPreviewAuthorMeta, v as InboxItemMarksProps, va as PopoverArrow, vn as MessageReactionErrorIndicator, vo as DropdownMenuPortal, vr as MessageItemSenderButton, vs as TextLinkProps, vt as MessageQuotedPreviewContentProps, w as InboxItemSelection, wa as PopoverClose, wn as MessageReactionPickerStatic, wo as DropdownMenuRadioItemIndicator, wr as MessageItemTimeProps, ws as Dialog, wt as MessageQuotedPreviewText, x as InboxItemMetadata, xa as PopoverBackdropProps, xn as MessageReactionGlyphProps, xo as DropdownMenuRadioGroup, xr as MessageItemSenderGroupProps, xt as MessageQuotedPreviewLoading, y as InboxItemMessage, ya as PopoverArrowProps, yn as MessageReactionErrorIndicatorProps, yo as DropdownMenuPortalProps, yr as MessageItemSenderButtonProps, ys as textLinkVariants, yt as MessageQuotedPreviewHeader, za as PopoverTitle, zi as TooltipContentProps, zn as MessageReactionTooltipNamesProps, zo as KbdGroupProps, zr as MessageItemAvatarSlot, zs as DialogNav, zt as MessageMultiSelectCheckbox } from "./inbox-item-ChGeZBFb.mjs";
+import { $ as MessageListNoticeProps, $a as DropdownMenuCheckboxItemIndicator, $n as MessageItemToolbarButtonProps, $o as ListRowChevron, $r as AvatarGroup, $s as DialogTriggerProps, $t as MessageReferenceLabelProps, A as InboxItemTimestamp, Aa as PopoverHeader, Ai as PreviewCardProps, An as MessageReactionTooltipContent, Ao as DropdownMenuShortcutProps, Ar as MessageItemContentProps, As as DialogContentProps, At as MessageQuotedPreviewUnavailable, Ba as PopoverTitleProps, Bi as TooltipPortal, Bn as MessageReactionTooltipSeparator, Bo as KbdProps, Br as MessageItemAvatarSlotProps, Bs as DialogNavProps, Bt as MessageMultiSelectCheckboxProps, C as InboxItemProps, Ci as PreviewCardHeaderProps, Cn as MessageReactionPickerContentProps, Co as DropdownMenuRadioItem, Cr as MessageItemTime, Ct as MessageQuotedPreviewProps, D as InboxItemSenderProps, Da as PopoverContentProps, Di as PreviewCardPopupProps, Dn as MessageReactionQuickButtonProps, Do as DropdownMenuSeparator, Dr as MessageItemBody, Ds as DialogClose, Dt as MessageQuotedPreviewThreadProps, E as InboxItemSender, Ea as PopoverContent, Ei as PreviewCardPopup, En as MessageReactionQuickButton, Eo as DropdownMenuRadioItemProps, Er as MessageItemAttachmentsProps, Es as DialogBodyProps, Et as MessageQuotedPreviewThread, F as InboxItemTrailingProps, Fa as PopoverPortalProps, Fi as PreviewCardTrigger, Fn as MessageReactionTooltipNameProps, Fo as DropdownMenuTrigger, Fr as MessageItemFooter, Ft as MessageTextSelectionToolbarProps, Ga as MobileNavItem, Gi as TooltipTrigger, Gn as MessageItemBadgeSeparatorProps, Go as Checkbox, Gr as MessageItem, Gs as DialogProps, Gt as MessageMultiSelectToolbarProps, Ha as PopoverTriggerProps, Hi as TooltipProps, Hn as MessageItemBadge, Ho as BadgeProps, Hr as MessageItemContinuationTimeProps, Hs as DialogOverlayProps, Ht as MessageMultiSelectToolbar, I as InboxItemTrigger, Ia as PopoverProps, Ii as PreviewCardTriggerProps, In as MessageReactionTooltipNameText, Io as DropdownMenuTriggerProps, Ir as MessageItemFooterProps, Is as DialogFooterProps, It as MessageTextSelectionToolbarSeparator, J as MessageListEndFade, Ja as MobileNavLabelProps, Jn as MessageItemReadReceiptProps, Jo as ListRow, Jr as AvatarBadge, Js as DialogSurface, K as MessageListDateDivider, Ka as MobileNavItemProps, Ki as TooltipTriggerProps, Kn as MessageItemBadgeStatus, Ko as CheckboxProps, Kr as MessageItemProps, Kt as MessageReferenceChip, L as InboxItemTriggerProps, La as PopoverSeparator, Li as Tooltip, Ln as MessageReactionTooltipNameTextProps, Lo as Kbd, Lr as MessageItemSearchMatch, Ls as DialogHeader, Lt as MessageTextSelectionToolbarSeparatorProps, M as InboxItemTitle, Ma as PopoverPopup, Mi as PreviewCardSeparatorProps, Mn as MessageReactionTooltipMeta, Mo as DropdownMenuSubmenuProps, Mr as MessageItemEditedProps, Ms as DialogDescriptionProps, Mt as MessageTextSelectionToolbar, N as InboxItemTitleProps, Na as PopoverPopupProps, Ni as PreviewCardTitle, Nn as MessageReactionTooltipMetaProps, No as DropdownMenuSubmenuTrigger, Nr as MessageItemEmbedded, Ns as DialogFooter, Nt as MessageTextSelectionToolbarButton, O as InboxItemSubtitle, Oa as PopoverDescription, Oi as PreviewCardPortal, On as MessageReactionQuickRow, Oo as DropdownMenuSeparatorProps, Or as MessageItemBodyProps, Os as DialogCloseProps, Ot as MessageQuotedPreviewTimestamp, P as InboxItemTrailing, Pa as PopoverPortal, Pi as PreviewCardTitleProps, Pn as MessageReactionTooltipName, Po as DropdownMenuSubmenuTriggerProps, Pr as MessageItemEmbeddedProps, Pt as MessageTextSelectionToolbarButtonProps, Q as MessageListNotice, Qa as DropdownMenuCheckboxItem, Qn as MessageItemToolbarButton, Qo as ListRowBottomProps, Qr as AvatarFallbackProps, Qs as DialogTrigger, Qt as MessageReferenceLabel, Ra as PopoverSeparatorProps, Ri as TooltipContent, Rn as MessageReactionTooltipNames, Ro as KbdGroup, Rr as MessageItemSearchMatchProps, Rs as DialogHeaderProps, Rt as MessageMultiSelect, S as InboxItemMetadataProps, Si as PreviewCardHeader, Sn as MessageReactionPickerContent, So as DropdownMenuRadioGroupProps, Sr as MessageItemSenderProps, St as MessageQuotedPreviewLoadingProps, T as InboxItemSelectionProps, Ta as PopoverCloseProps, Tn as MessageReactionPickerStaticProps, To as DropdownMenuRadioItemIndicatorProps, Tr as MessageItemAttachments, Ts as DialogBody, Tt as MessageQuotedPreviewTextProps, Ua as PopoverViewport, Ui as TooltipProvider, Un as MessageItemBadgeProps, Uo as CheckboxIndicator, Ur as MessageItemGutter, Us as DialogPortal, Ut as MessageMultiSelectToolbarActions, Va as PopoverTrigger, Vi as TooltipPortalProps, Vn as MessageReactionTooltipSeparatorProps, Vo as Badge, Vr as MessageItemContinuationTime, Vs as DialogOverlay, Vt as MessageMultiSelectProps, Wa as PopoverViewportProps, Wi as TooltipProviderProps, Wn as MessageItemBadgeSeparator, Wo as CheckboxIndicatorProps, Wr as MessageItemGutterProps, Ws as DialogPortalProps, Wt as MessageMultiSelectToolbarActionsProps, X as MessageListHistoryLimited, Xa as MobileNavRootProps, Xn as MessageItemSavedIndicatorProps, Xo as ListRowBodyProps, Xr as AvatarBadgeProps, Xs as DialogTitle, Xt as MessageReferenceIndicator, Y as MessageListEndFadeProps, Ya as MobileNavRoot, Yn as MessageItemSavedIndicator, Yo as ListRowBody, Yr as AvatarBadgeOffset, Ys as DialogSurfaceProps, Z as MessageListHistoryLimitedProps, Za as DropdownMenu, Zn as MessageItemToolbar, Zo as ListRowBottom, Zr as AvatarFallback, Zs as DialogTitleProps, Zt as MessageReferenceIndicatorProps, _ as InboxItemMarks, _i as PreviewCardDescriptionProps, _n as MessageReactionCountProps, _o as DropdownMenuPopupProps, _r as MessageItemSenderBadgesProps, _s as TextLink, _t as MessageQuotedPreviewContent, a as InboxItemBodyProps, ac as DeprecatedButtonSize, ai as AvatarProps, an as MessageReferenceSuffixProps, ao as DropdownMenuFooterProps, as as ListRowIcon, at as MessageQuotedPreviewAttachments, b as InboxItemMessageProps, ba as PopoverBackdrop, bn as MessageReactionGlyph, bo as DropdownMenuProps, br as MessageItemSenderGroup, bt as MessageQuotedPreviewHeaderProps, c as InboxItemContext, cc as DataAttributes$1, cn as MessageReferenceUnavailable, co as DropdownMenuItemCountProps, cs as ListRowMetaProps, d as InboxItemHeading, di as PreviewCardArrowProps, dn as MessageReferenceTextVariant, do as DropdownMenuItemProps, dr as MessageItemInlineStatus, ds as ListRowTitleProps, dt as MessageQuotedPreviewAuthorMetaProps, ec as PanelAction, ei as AvatarGroupCount, en as MessageReferencePending, eo as DropdownMenuCheckboxItemIndicatorProps, er as MessageItemToolbarProps, es as ListRowChevronProps, et as MessageList, f as InboxItemHeadingProps, fn as MessageReactionAddButton, fo as DropdownMenuLabel, fr as MessageItemInlineStatusProps, fs as ListRowTop, ft as MessageQuotedPreviewAuthorName, g as InboxItemLeadingProps, gi as PreviewCardDescription, gn as MessageReactionCount, go as DropdownMenuPopup, gr as MessageItemSenderBadges, gs as RowTone, gt as MessageQuotedPreviewChannelProps, h as InboxItemLeading, ha as Popover, hi as PreviewCardContentProps, hn as MessageReactionChipProps, hr as MessageItemSender, hs as ListRowValueProps, ht as MessageQuotedPreviewChannel, i as InboxItemBody, ic as ButtonSize, ii as AvatarImageProps, in as MessageReferenceSuffix, io as DropdownMenuFooter, is as ListRowGroupProps, it as MessageQuotedPreviewAttachmentProps, j as InboxItemTimestampProps, ja as PopoverHeaderProps, ji as PreviewCardSeparator, jn as MessageReactionTooltipContentProps, jo as DropdownMenuSubmenu, jr as MessageItemEdited, js as DialogDescription, jt as MessageQuotedPreviewUnavailableProps, k as InboxItemSubtitleProps, ka as PopoverDescriptionProps, ki as PreviewCardPortalProps, kn as MessageReactionQuickRowProps, ko as DropdownMenuShortcut, kr as MessageItemContent, ks as DialogContent, kt as MessageQuotedPreviewTimestampProps, l as InboxItemContextProps, lc as StyledProps, ln as MessageReferenceUnavailableProps, lo as DropdownMenuItemLabel, lr as MessageItemHeader, ls as ListRowProps, m as InboxItemHoverTargetProps, mi as PreviewCardContent, mn as MessageReactionChip, mr as MessageItemMetaProps, ms as ListRowValue, mt as MessageQuotedPreviewAuthorProps, n as InboxItemActions, nc as Button, ni as AvatarGroupProps, no as DropdownMenuContent, ns as ListRowDescriptionProps, nt as MessageQuotedPreview, o as InboxItemContent, oc as buttonVariants, oi as AvatarSize, on as MessageReferenceText, oo as DropdownMenuItem, os as ListRowIconProps, ot as MessageQuotedPreviewAttachmentsProps, p as InboxItemHoverTarget, pn as MessageReactionAddButtonProps, po as DropdownMenuLabelProps, pr as MessageItemMeta, ps as ListRowTopProps, pt as MessageQuotedPreviewAuthorNameProps, q as MessageListDateDividerProps, qa as MobileNavLabel, qn as MessageItemReadReceipt, qo as Presence, qr as Avatar, qt as MessageReferenceChipProps, r as InboxItemActionsProps, rc as ButtonProps, ri as AvatarImage, ro as DropdownMenuContentProps, rs as ListRowGroup, rt as MessageQuotedPreviewAttachment, s as InboxItemContentProps, sc as VariantProps, si as PreviewCard, sn as MessageReferenceTextProps, so as DropdownMenuItemCount, ss as ListRowMeta, st as MessageQuotedPreviewAuthor, t as InboxItem, tc as PanelActionProps, ti as AvatarGroupCountProps, tn as MessageReferencePendingProps, to as DropdownMenuCheckboxItemProps, ts as ListRowDescription, tt as MessageListProps, u as InboxItemDensity, ui as PreviewCardArrow, un as MessageReferenceChipVariant, uo as DropdownMenuItemLabelProps, ur as MessageItemHeaderProps, us as ListRowTitle, ut as MessageQuotedPreviewAuthorMeta, v as InboxItemMarksProps, va as PopoverArrow, vn as MessageReactionErrorIndicator, vo as DropdownMenuPortal, vr as MessageItemSenderButton, vs as TextLinkProps, vt as MessageQuotedPreviewContentProps, w as InboxItemSelection, wa as PopoverClose, wn as MessageReactionPickerStatic, wo as DropdownMenuRadioItemIndicator, wr as MessageItemTimeProps, ws as Dialog, wt as MessageQuotedPreviewText, x as InboxItemMetadata, xa as PopoverBackdropProps, xn as MessageReactionGlyphProps, xo as DropdownMenuRadioGroup, xr as MessageItemSenderGroupProps, xt as MessageQuotedPreviewLoading, y as InboxItemMessage, ya as PopoverArrowProps, yn as MessageReactionErrorIndicatorProps, yo as DropdownMenuPortalProps, yr as MessageItemSenderButtonProps, ys as textLinkVariants, yt as MessageQuotedPreviewHeader, za as PopoverTitle, zi as TooltipContentProps, zn as MessageReactionTooltipNamesProps, zo as KbdGroupProps, zr as MessageItemAvatarSlot, zs as DialogNav, zt as MessageMultiSelectCheckbox } from "./inbox-item-CiTYKTly.mjs";
 import { cn } from "./cn.mjs";
 import { Dialog as Dialog$1 } from "@base-ui/react/dialog";
 import { CSSProperties, ComponentProps, ComponentPropsWithRef, ComponentPropsWithoutRef, ComponentType, CompositionEventHandler, ElementType, FocusEventHandler, FormEventHandler, HTMLAttributes, KeyboardEventHandler, PointerEvent, ReactElement, ReactNode, Ref, RefObject, SVGProps } from "react";
@@ -4287,7 +4287,9 @@ interface VirtualListProps<T> extends VirtualListNativeProps {
   ref?: never;
   /**
    * Called when the content's height changes: a row resizes or mounts measured, the spacer's
-   * height changes, or the `footer` / `empty` element resizes (to follow the end of a chat).
+   * height changes, or the `footer` / `empty` element resizes (to follow the end of a chat). Not
+   * called for a change the list scrolls away exactly (rows above the view measured as it scrolls
+   * up): it moves nothing in view, nor the distance from the view to the end.
    */
   onContentResize?: (() => void) | undefined;
   /**