@botiverse/raft-ui 0.22.1 → 0.23.1

package/CHANGELOG.md

@@ -1,3 +1,94 @@
+## [0.23.1](https://github.com/botiverse/raft-design/compare/v0.23.0...v0.23.1) (2026-10-22)
+
+### Fixed
+
+- **MessageItemToolbar**: measures its width onto the row (`--mi-toolbar-width`) as the toolbar shows, on the row's `pointerenter` or `focusin`, instead of when the row mounts, so a message row mounts in one commit again and keeps no ResizeObserver of its own. The fade under the toolbar looks the same. ([#738](https://github.com/botiverse/raft-design/pull/738))
+  - Why: 0.23.0 kept the toolbar's element in React state and gave every toolbar its own ResizeObserver, and every message row renders a toolbar, so each row committed twice on mount and a long channel held one observer per message; only the toolbar that shows needs its width, so it is now measured then.
+  - Affects: per row on mount, 2 commits → 1 and 1 ResizeObserver → 0; while a toolbar shows (hover, focus inside the row, an open popup), one ResizeObserver shared by the page watches it; it lets go of a toolbar once the pointer and focus have left its row with no popup open (after a popup closed elsewhere, the next time any toolbar shows) and is disconnected when it watches none. On mount the row gets `--mi-toolbar-width: 164px` (five buttons' width), replaced by the measured width as the toolbar shows, so a toolbar that ever shows without a pointer or focus event on its row fades five buttons' width until it measures itself: too much for a smaller toolbar rather than too little. A row without a `MessageItemToolbar` still gets no width and masks nothing.
+  - Docs: https://raft-design.botiverse.build/components/message-item/#behavior
+
+## [0.23.0](https://github.com/botiverse/raft-design/compare/v0.22.1...v0.23.0) (2026-10-22)
+
+### Design System
+
+- **Switch on the region's width**: a layout switches on the width of the region it sits in (a panel, a column, a card), not on the window's. A component that switches its own layout makes itself a container, so it lays out the same in a 360px panel on a wide window as on a phone; it then fills its row and needs a parent with a definite width. Only what the window itself sizes reads the window (the page shell, dialogs, sheets, toasts), and mouse or touch is read with `pointer` and `hover`, never with the width. Every row needs a way to give way: a row of controls that still doesn't fit wraps onto a second line, and a value such as an email truncates last. Whether a part's content fits is measured, not guessed from a width. It applies to DescriptionList, MessageActionCard, MessageImageGallery, MessageVideoPreview, MessageForwardedBundleGallery, Steps, the TasksPanel toolbar, ActivityInboxSelectionToolbar, ListRowMeta, SegmentedControl, SidebarSectionControls, SearchEntityResult and CodeBlockPre. ([#721](https://github.com/botiverse/raft-design/pull/721), [#733](https://github.com/botiverse/raft-design/pull/733))
+  - Why: the same component sits in a narrow panel on a wide window and fills a phone, so a layout that asked the window laid itself out for a screen it didn't have (a two-column list in a 360px panel, a step row that wrapped where it should stack); every layout that switched on the window was moved to its own region, or to the input where the switch is about touch.
+  - Affects: the switch points listed under Breaking Changes and Changed below.
+  - Docs: https://raft-design.botiverse.build/patterns/responsive/#switch-on-the-regions-width
+- **Stacked buttons each take a frame**: when buttons stack full width (a dialog footer whose row doesn't fit, a bottom or top sheet's actions), a ghost button there takes the ink border of `default`, with its hover and press; it goes back to frameless when the row fits again. It applies to Button, DialogFooter, AlertDialogFooter and DrawerActions. ([#727](https://github.com/botiverse/raft-design/pull/727))
+  - Why: stretched to the full width, a frameless Cancel read as a line of text under the commit button, not as a button; once buttons stack, each needs its own box.
+  - Affects: a stacked ghost button: border `transparent` → `line-strong` on `layer-card`, hover and press `overlay-medium`, as `default`; text sizes `xs` to `xl` only, ghost icon buttons stay frameless.
+  - Docs: https://raft-design.botiverse.build/components/dialog/#the-footer
+- **Text selection: its own token**: selected text (`::selection`) is painted with the new `selection` token and keeps its own text color. In light mode it is `brand-soft`, as before; in dark mode it is `brand` over the page at 22%, the same wash as a commented passage. `brand-soft` stays the menu highlight. It applies to MessageItem text. ([#730](https://github.com/botiverse/raft-design/pull/730))
+  - Why: in dark mode `brand-soft` left a selection at 1.23:1 against the canvas, so it was hard to see what was selected; a menu row's highlight and a selection need different values in dark mode, so they no longer share one.
+  - Affects: dark `selection` `brand-soft` (`oklch(0.5501 0.0999 91.5 / 0.2)`) → `color-mix(in oklch, var(--brand-400) 22%, transparent)`: 1.23:1 → 1.77:1 against the canvas, the selected text 7.7:1 (APCA Lc 80). Light mode is unchanged (1.14:1 against the canvas, the text 16.5:1, Lc 96).
+  - Docs: https://raft-design.botiverse.build/foundations/color/#text-selection
+
+### Breaking Changes
+
+- **MessageItem**: the header keeps no room for the hover toolbar, and `--mi-toolbar-reserve` is no longer read. At rest the sender line has the full width; while the toolbar shows (hover, focus inside the row, an open menu), the end of a sender line long enough to reach the corner fades out under it. `MessageItemToolbar` measures its own width onto the row as `--mi-toolbar-width`, so a toolbar with more or fewer buttons masks exactly its width. ([#726](https://github.com/botiverse/raft-design/pull/726))
+  - Why: keeping room for the toolbar cut the name to a few letters in a narrow column all the time, to protect a corner that is covered only while the pointer is on that message; the line now keeps its full width and nothing reflows on hover.
+  - Affects: with a mouse, header end padding `--mi-toolbar-reserve` (default 7rem) → 0. While the toolbar shows, the header is masked from 4px left of the toolbar's left edge to its end, after a 12px fade (`--mi-header-mask`); a row without a `MessageItemToolbar` masks nothing. The time's tooltip, when it fades out under the toolbar, can be pointed at once the pointer leaves the toolbar, and stays in the keyboard order.
+  - Migrate: remove `--mi-toolbar-reserve` wherever you set it; it has no effect. Render the toolbar with `MessageItemToolbar` inside the `MessageItem` row, which writes `--mi-toolbar-width`; a hover toolbar of your own gets no fade unless it sets `--mi-toolbar-width` (its width in px) on the row (`[data-message-item]`).
+  - Docs: https://raft-design.botiverse.build/components/message-item/#behavior
+- **DescriptionList** `direction="horizontal"`, **MessageActionCardContent**, **MessageImageGallery**, **MessageForwardedBundleGallery**, **Steps** (without `vertical`) and **TasksPanelRoot** are size containers (`container-type: inline-size`) and switch their layout on their own width instead of the window's; the list, the galleries and the step row fill their row (`width: 100%`). ([#721](https://github.com/botiverse/raft-design/pull/721))
+  - Why: see Switch on the region's width, above.
+  - Affects: DescriptionList stacks below 24rem (384px) of its own width (was below a 640px window), the value right under its label (its 32px minimum row height dropped) and 10px between pairs (the 2px row gap plus 8px; was 2px). MessageActionCard properties stack below 24rem of the card's content (was below a 640px window) with the same spacing, the value's 6px padding above and below dropped; a card at its 440px cap keeps two columns. MessageImageGallery: at most `min(360px, 100%)` of its column (was `min(360px, 100vw − 112px)` below a 768px window); rows 8rem (7rem with three images) below 360px of the gallery's own width and 9rem (8rem) at it (was by a 640px window); three images stay two across and one under them. MessageForwardedBundleGallery: a row of three is three across from 360px of the gallery's own width (was from a 768px window) and two across below; its rows grow as above from 360px (was from a 640px window). Steps: below 40rem (640px) of the row's own width each step stacks its text under its marker (was below a 640px window), and from 40rem a row too long for its width wraps. TasksPanelToolbar: New Task and the view switch on one line and the filters on the next below 28rem (448px) of the panel's width (was below a 768px window), one wrapping row from 28rem; toolbar and viewport sides 16px below 28rem, 20px from it (was by a 768px window). The same window can now show a different layout: a narrow panel on a desktop takes the narrow layout, and a wide region on a small window keeps the wide one.
+  - Migrate: put each of these in a parent with a definite width: a block, a stretched flex or grid item, or anything with a width set. In a parent that shrinks to fit its content (`inline-block`, `w-fit` or `fit-content`, an absolutely positioned box or a floating layer with no width, a flex item with `flex-basis: auto` and no width) a size container takes no width from what it holds and collapses, its text one word to a line. Keep `TasksPanelToolbar` and `TasksPanelViewport` inside `TasksPanelRoot`, and `MessageActionCardProperties` inside `MessageActionCardContent`: outside them there is no container, so the tasks toolbar keeps its two-line layout with 20px sides and the properties stay in two columns at every width. Remove window breakpoint overrides (`sm:`, `md:`, `max-sm:`) you added to adjust these layouts, and check them in your narrowest panels.
+  - Docs: https://raft-design.botiverse.build/patterns/responsive/#switch-on-the-regions-width
+
+### Added
+
+- **SegmentedControl** `iconsOnlyBelow="auto"`: the segments show only their icons exactly when their labelled segments don't fit the width the control is given, and their labels again once they fit. It decides before the first frame paints, and again when the room, a label, a count, the selection or a web font changes, always against the labelled layout, so it doesn't flicker at the boundary. `iconsOnlyBelow` also takes any length in `px`, `rem` or `em` (`"18.5rem"`, `"296px"`), measured against the nearest `@container` (the control's parent when there is none), beside the presets `xs` to `2xl`, which stay CSS container queries. With `auto` or a length the track carries `data-icons-only` while it shows only icons. The presets' type is exported as `SegmentedControlIconsOnlyPreset`. ([#733](https://github.com/botiverse/raft-design/pull/733))
+  - Why: a width picked for one language, one count or one font was wrong for the others, and the room a control is given changes with what sits beside it; `auto` measures the labels against that room instead.
+  - Affects: with `auto`, the control is a shrinkable flex item (`min-w-0`); leave it free to shrink in its row (don't make it `shrink-0`). In development raft-ui warns when a segment has no icon, or when `iconsOnlyBelow` is neither a preset, `auto` nor a `px`, `rem` or `em` length (the segments then keep their labels).
+  - Docs: https://raft-design.botiverse.build/components/segmented-control/#behavior
+- **`selection`** token: `--selection` in `foundation.css` and `tokens.json`, and the Tailwind color `selection` (`selection:bg-selection`). ([#730](https://github.com/botiverse/raft-design/pull/730))
+  - Why: see Text selection: its own token, above.
+  - Affects: light `var(--brand-soft)`; dark `color-mix(in oklch, var(--brand-400) 22%, transparent)`. Paint your own `::selection` with it in place of `brand-soft`.
+  - Docs: https://raft-design.botiverse.build/foundations/color/#text-selection
+
+### Changed
+
+- **SegmentedControl**: the track may shrink to its row. When the row is narrower than the track, its neighbors have given way and the segments can't show only their icons (or no `iconsOnlyBelow` is set), the segments scroll sideways inside the track, the checked one kept in view, instead of spilling onto the next control; the track sets `data-overflowing` while they do. ([#721](https://github.com/botiverse/raft-design/pull/721))
+  - Why: the track never shrank below its segments, so in a narrow row it ran over its neighbor; scrolling inside it is the last way it gives way.
+  - Affects: track `shrink-0` → `min-w-0 max-w-full`; while overflowing, `overflow-x: auto` with no scrollbar. Segments still never shrink. A track you made `shrink-0` yourself still never shrinks.
+  - Docs: https://raft-design.botiverse.build/components/segmented-control/#behavior
+- **SidebarSectionControls** and **SearchEntityResult**: decided by the input, not the window's width. The section controls show at rest wherever there is no fine pointer (a touch screen, a tablet at any width) and on hover, focus or an open menu with a mouse; a search result row is at least 64px tall on a touch screen at any width. ([#721](https://github.com/botiverse/raft-design/pull/721))
+  - Why: a tablet is touch at 1024px and a narrow desktop window still has a mouse, so the width was the wrong question.
+  - Affects: section controls at rest: shown below a 768px window → shown without `pointer: fine`; a narrow desktop window with a mouse now shows them on hover only. Search result `min-height: 64px`: below a 768px window → `pointer: coarse`.
+  - Docs: https://raft-design.botiverse.build/patterns/responsive/#touch-screens
+- **ActivityInboxSelectionToolbar**: one 44px row while its controls fit, and they wrap onto a second line in a narrow column, whatever the window. ([#721](https://github.com/botiverse/raft-design/pull/721))
+  - Why: it wrapped only below a 768px window, so in a narrow column on a wide window its controls overflowed.
+  - Affects: `flex-wrap` at every width (was below a 768px window only); padding 6px above and 5px below (was 8px below a 768px window, 0 with a fixed 44px height from it).
+  - Docs: https://raft-design.botiverse.build/components/activity-inbox/
+- **ListRowMeta**: stays whole while the title gives way first, then truncates when there is still no room, so a long value (an email beside a button in a 320px row) is cut instead of running under the button. ([#721](https://github.com/botiverse/raft-design/pull/721))
+  - Why: the meta never shrank, so a long value overflowed the row.
+  - Affects: `shrink-0` → `min-w-0 truncate`.
+  - Docs: https://raft-design.botiverse.build/components/list-row/#content
+- **MessageVideoPreview**: at most `min(360px, 100%)` of its column. ([#721](https://github.com/botiverse/raft-design/pull/721))
+  - Why: its cap was the window less a guess at the message's chrome, which was wrong in a thread beside a conversation.
+  - Affects: `max-width` `min(360px, 100vw − 112px)` → `min(360px, 100%)`.
+  - Docs: https://raft-design.botiverse.build/components/message-attachment/#rules
+- **Button** `variant="ghost"`, so **DialogFooter**, **AlertDialogFooter** (`AlertDialogCancel`) and **DrawerActions**: a ghost text button inside an element with `data-stacked` takes the ink frame of `default`. Dialog and alert dialog footers set `data-stacked` only while their buttons stack; `DrawerActions` sets it in a bottom or top sheet, where its buttons are always stacked, and not in a drawer from a side. Keep writing Cancel as `ghost`. ([#727](https://github.com/botiverse/raft-design/pull/727))
+  - Why: see Stacked buttons each take a frame, above.
+  - Affects: as above; a disabled ghost button keeps the disabled fill, and ghost icon buttons stay frameless. A stacked footer's buttons have no transition until the row has been measured and painted once (`data-measured`), so the frame doesn't fade in as a dialog opens.
+  - Docs: https://raft-design.botiverse.build/components/button/#which-color
+- **MessageItem** text: selected text uses the `selection` token, so in dark mode a selection is deeper; light mode is unchanged. ([#730](https://github.com/botiverse/raft-design/pull/730))
+  - Why: see Text selection: its own token, above.
+  - Affects: `selection:bg-brand-soft` → `selection:bg-selection`.
+  - Docs: https://raft-design.botiverse.build/foundations/color/#text-selection
+
+### Fixed
+
+- **TaskChip** (default and `size="sm"`): the chip's baseline is its text's, so its words sit on the line of the text beside it, such as a DescriptionList label; the status pixel and icons stay centered in the chip. ([#732](https://github.com/botiverse/raft-design/pull/732))
+  - Why: a centered flex box takes its baseline from its first item, so a chip that led with its status pixel sat on the pixel's bottom edge and its words stood a pixel off the label beside them.
+  - Affects: text laid out on the baseline inside the chip with 3px above and below (default, 22px) and 2px (`sm`, 20px), marks `self-center`; heights unchanged. `variant="inline"` is unchanged.
+  - Docs: https://raft-design.botiverse.build/foundations/alignment/#text-of-different-sizes-on-one-line
+- **CodeBlockPre**: measures again whenever the `pre` resizes or its code changes (highlighting that arrives late, code that streams in), so a line that grows too long becomes the keyboard-reachable region (`tabindex="0"`, `role="region"`) it should be. ([#721](https://github.com/botiverse/raft-design/pull/721))
+  - Why: it measured once when it mounted, so code that changed later kept the first answer.
+  - Docs: https://raft-design.botiverse.build/components/code-block/#accessibility
+
 ## [0.22.1](https://github.com/botiverse/raft-design/compare/v0.22.0...v0.22.1) (2026-10-22)
 
 ### Design System

package/dist/components/steps/steps.css

@@ -296,18 +296,23 @@
   }
 }
 
-@media (width >= 40rem) {
-  .r-steps--horizontal {
-    flex-wrap: wrap;
-    row-gap: 8px;
-  }
+/* A row of steps is its own container, so it switches on its own width, not
+   the window's: a dialog or a 400px panel on a wide window is as narrow as a
+   phone (design/patterns/responsive.md#switch-on-the-regions-width). Being a
+   container, it fills its row. A row too long for its width wraps its steps
+   onto a second line. */
+.r-steps--horizontal {
+  container-type: inline-size;
+  flex-wrap: wrap;
+  row-gap: 8px;
+  inline-size: 100%;
 }
 
-/* Narrow screens: a row of titles beside their markers overflows a phone, so
-   the steps share the width and each stacks its text under the marker, the
-   titles wrapping. The marker and the connector share the top line; the text
-   spans the step below. */
-@media (width < 40rem) {
+/* A narrow row (below 40rem of its own width): the titles beside their
+   markers would overflow it, so the steps share the width and each stacks its
+   text under the marker, the titles wrapping. The marker and the connector
+   share the top line; the text spans the step below. */
+@container (width < 40rem) {
   .r-steps--horizontal > .r-step {
     --r-steps-connector-gap: 6px;
     --r-steps-connector-min-width: 8px;

package/dist/foundation.css

@@ -287,6 +287,10 @@
      empties it while the root carries data-input-modality="pointer", which
      installInputModality sets after a click or a tap. */
   --focus-ring: 0 0 0 2px oklch(1 0 0), 0 0 0 4px oklch(0.1813 0.005 17.62);
+  /* Selected text (::selection). brand-soft in light mode; in dark mode brand
+     over the page at 22%, the wash of a commented passage, because brand-soft
+     left a selection almost the same as the page. */
+  --selection: var(--brand-soft);
   --field-font-size: 16px;
   --field-font-weight: 400;
   --field-line-height: 24px;
@@ -415,6 +419,7 @@
     0 0 0 1px oklch(0.9843 0.004 106.47 / 0.078), 0 16px 40px -12px oklch(0 0 0 / 0.8);
   --elevation-sticker: 4px 4px 0 oklch(0 0 0);
   --focus-ring: 0 0 0 2px oklch(0.2213 0.0038 106.71), 0 0 0 4px oklch(0.9211 0.004 106.48);
+  --selection: color-mix(in oklch, var(--brand-400) 22%, transparent);
   --sticker-edge: oklch(0.9843 0.004 106.47 / 0.349);
 }
 
@@ -497,6 +502,7 @@
       0 0 0 1px oklch(0.9843 0.004 106.47 / 0.078), 0 16px 40px -12px oklch(0 0 0 / 0.8);
     --elevation-sticker: 4px 4px 0 oklch(0 0 0);
     --focus-ring: 0 0 0 2px oklch(0.2213 0.0038 106.71), 0 0 0 4px oklch(0.9211 0.004 106.48);
+    --selection: color-mix(in oklch, var(--brand-400) 22%, transparent);
     --sticker-edge: oklch(0.9843 0.004 106.47 / 0.349);
   }
 }

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

@@ -56,15 +56,22 @@ const headEdges = ["px-5 max-md:px-4", ...headEdgePull];
 * as the arithmetic so it follows the control tokens wherever they switch.
 */
 const controlIconInset = "[--icon-inset:calc((var(--control-height)-var(--control-icon-size))/2)]";
+//#endregion
+//#region src/lib/stacked-actions.ts
 /**
 * The row of buttons while `data-stacked` is set: a full-width column. A
 * button alone in a wrapper (a tooltip's trigger) fills the width too.
+*
+* Until the row has been measured and painted once (`data-measured`), its
+* buttons have no transition. The first measure lands after the buttons were
+* styled as a row, so a stacked ghost Cancel would otherwise fade its frame in
+* as the dialog opens; the first painted frame must already be the stack.
 */
 const stackedActions = [
 	"data-stacked:flex-col-reverse",
 	"data-stacked:items-stretch",
 	"data-stacked:*:data-[slot=button]:w-full data-stacked:[&>*>[data-slot=button]:only-child]:w-full",
-	...[].map((value) => `data-stacked:${value}`)
+	"not-data-measured:**:data-[slot=button]:transition-none"
 ];
 function assignRef$2(ref, value) {
 	if (typeof ref === "function") ref(value);
@@ -117,11 +124,16 @@ function useStackedActions(ref, inParent = false) {
 	useLayoutEffect(() => {
 		const frame = inParent ? row?.parentElement : row;
 		if (!row || !frame || typeof ResizeObserver === "undefined") return;
+		let raf = 0;
+		let settle = 0;
 		const measure = () => {
 			const overflows = rowOverflows(row, frame);
-			if (overflows !== void 0) setStacked(overflows);
+			if (overflows === void 0) return;
+			setStacked(overflows);
+			if (!settle && !row.hasAttribute("data-measured")) settle = requestAnimationFrame(() => {
+				settle = requestAnimationFrame(() => row.setAttribute("data-measured", ""));
+			});
 		};
-		let raf = 0;
 		const schedule = () => {
 			cancelAnimationFrame(raf);
 			raf = requestAnimationFrame(measure);
@@ -146,6 +158,7 @@ function useStackedActions(ref, inParent = false) {
 		return () => {
 			live = false;
 			cancelAnimationFrame(raf);
+			cancelAnimationFrame(settle);
 			resize.disconnect();
 			mutation.disconnect();
 			fonts?.removeEventListener("loadingdone", schedule);
@@ -446,6 +459,21 @@ const buttonVariants = tv$1({
 		size: "md"
 	},
 	compoundVariants: [
+		{
+			variant: "ghost",
+			size: [
+				"xs",
+				"sm",
+				"md",
+				"lg",
+				"xl"
+			],
+			class: { root: [
+				"in-data-stacked:border-line-strong in-data-stacked:bg-layer-card",
+				"in-data-stacked:hover:bg-layer-card in-data-stacked:active:bg-layer-card",
+				"in-data-stacked:hover:overlay-medium in-data-stacked:active:overlay-medium"
+			] }
+		},
 		{
 			variant: "ghost",
 			size: [
@@ -1602,7 +1630,7 @@ const listRow = tv$1({
 			"group-data-[tone=unread]/list-row:font-bold"
 		],
 		description: ["min-w-0 flex-1 truncate", "text-callout text-(--list-row-ink-2)"],
-		meta: ["shrink-0", "font-mono text-mono-meta font-normal tabular-nums text-(--list-row-ink-3)"],
+		meta: ["min-w-0 truncate", "font-mono text-mono-meta font-normal tabular-nums text-(--list-row-ink-3)"],
 		value: ["max-w-[45%] shrink-0 truncate", "text-subhead text-(--list-row-ink-3)"],
 		chevron: ["flex shrink-0 items-center justify-center", "text-(--list-row-ink-3) [&>svg]:size-5 [&>svg]:shrink-0"]
 	},
@@ -3262,7 +3290,7 @@ const targets = /* @__PURE__ */ new Set();
 const byElement = /* @__PURE__ */ new WeakMap();
 const pending = /* @__PURE__ */ new Set();
 let frame = 0;
-let resizeObserver;
+let resizeObserver$1;
 let mutationObserver;
 let fontsListening = false;
 function flush() {
@@ -3294,7 +3322,7 @@ function ownerOf(node) {
 	}
 }
 function observers(view) {
-	if (!resizeObserver && "ResizeObserver" in view) resizeObserver = new view.ResizeObserver((entries) => {
+	if (!resizeObserver$1 && "ResizeObserver" in view) resizeObserver$1 = new view.ResizeObserver((entries) => {
 		for (const entry of entries) {
 			const target = byElement.get(entry.target);
 			if (target) scheduleMeasure(target);
@@ -3325,7 +3353,7 @@ function observeTruncation(target) {
 	targets.add(target);
 	for (const element of observed) {
 		byElement.set(element, target);
-		resizeObserver?.observe(element);
+		resizeObserver$1?.observe(element);
 	}
 	const watched = target.watch();
 	if (watched) {
@@ -3342,7 +3370,7 @@ function observeTruncation(target) {
 		pending.delete(target);
 		for (const element of observed) {
 			if (byElement.get(element) === target) byElement.delete(element);
-			resizeObserver?.unobserve(element);
+			resizeObserver$1?.unobserve(element);
 		}
 		if (watched && byElement.get(watched) === target) byElement.delete(watched);
 		if (targets.size === 0) {
@@ -3691,6 +3719,9 @@ const messageItem = tv$1({
 			"group/message relative flex h-fit gap-3",
 			"hover:[--mi-toolbar-opacity:1] hover:[--mi-toolbar-pe:auto] focus-within:[--mi-toolbar-opacity:1] focus-within:[--mi-toolbar-pe:auto]",
 			"has-data-popup-open:[--mi-toolbar-opacity:1] has-data-popup-open:[--mi-toolbar-pe:auto]",
+			"hover:[--mi-header-mask:linear-gradient(to_left,transparent_calc(var(--mi-toolbar-width)+8px),black_calc(var(--mi-toolbar-width)+20px))]",
+			"focus-within:[--mi-header-mask:linear-gradient(to_left,transparent_calc(var(--mi-toolbar-width)+8px),black_calc(var(--mi-toolbar-width)+20px))]",
+			"has-data-popup-open:[--mi-header-mask:linear-gradient(to_left,transparent_calc(var(--mi-toolbar-width)+8px),black_calc(var(--mi-toolbar-width)+20px))]",
 			"min-h-0 px-2 py-timeline-row border-t-(length:--spacing-timeline-turn) border-transparent bg-clip-padding",
 			"hover:[--mi-ct-color:var(--foreground-hint)] has-data-popup-open:[--mi-ct-color:var(--foreground-hint)]",
 			"bg-(--mi-row-fill) [--mi-row-fill:var(--located-fill)]",
@@ -3715,7 +3746,7 @@ const messageItem = tv$1({
 		content: ["min-w-0 flex-1", "text-body text-foreground"],
 		header: [
 			"mb-px flex min-w-0 items-baseline gap-1.5 overflow-hidden",
-			"pointer-fine:pe-(--mi-toolbar-reserve,7rem)",
+			"mask-(--mi-header-mask,none)",
 			"has-data-[slot=message-item-delegated-by]:[--mi-owner-basis:3rem] has-data-[slot=message-item-delegated-by]:[--mi-owner-flex:1_0]"
 		],
 		senderGroup: [
@@ -3760,7 +3791,7 @@ const messageItem = tv$1({
 			"wrap-break-word select-text",
 			"**:select-text",
 			"text-body text-foreground",
-			"selection:bg-brand-soft"
+			"selection:bg-selection"
 		],
 		searchMatch: searchHit,
 		embedded: ["min-w-0", "mt-2"],
@@ -4075,12 +4106,113 @@ function MessageItemDelegatedAvatar({ className, deleted, ...props }) {
 }
 //#endregion
 //#region src/components/message-item/message-item-toolbar.tsx
-function MessageItemToolbar({ className, render, ...props }) {
+const TOOLBAR_WIDTH = "--mi-toolbar-width";
+/**
+* Five buttons' width (5 × 28px, 4 × 4px apart, 4px from the frame each
+* side): what the row fades until the toolbar has measured itself.
+*/
+const FALLBACK_WIDTH = "164px";
+/**
+* Toolbars watched while their row shows them, each with its row, and the one
+* ResizeObserver that watches them: it exists only while a toolbar shows.
+*/
+const watched = /* @__PURE__ */ new Map();
+let resizeObserver = null;
+function writeWidth(toolbar, row) {
+	row.style.setProperty(TOOLBAR_WIDTH, `${toolbar.offsetWidth}px`);
+}
+/** The recipe's has-data-popup-open / data-popup-open on the row. */
+function hasOpenPopup(row) {
+	return row.hasAttribute("data-popup-open") || row.querySelector("[data-popup-open]") !== null;
+}
+function resized(entries) {
+	for (const entry of entries) {
+		const target = entry.target;
+		const row = watched.get(target);
+		if (row) writeWidth(target, row);
+	}
+}
+function unwatch(toolbar) {
+	if (!watched.delete(toolbar)) return;
+	resizeObserver?.unobserve(toolbar);
+	if (watched.size > 0) return;
+	resizeObserver?.disconnect();
+	resizeObserver = null;
+}
+function watch(toolbar, row) {
+	if (watched.has(toolbar)) return;
+	writeWidth(toolbar, row);
+	if (typeof ResizeObserver === "undefined") return;
+	for (const [other, otherRow] of watched) if (!otherRow.matches(":hover, :focus-within") && !hasOpenPopup(otherRow)) unwatch(other);
+	resizeObserver ??= new ResizeObserver(resized);
+	watched.set(toolbar, row);
+	resizeObserver.observe(toolbar);
+}
+/**
+* Tells the row how wide the toolbar is (`--mi-toolbar-width` on the row), so
+* the header can fade out its end under the toolbar while it shows: the
+* header keeps no room for the toolbar (message-item.md, "The hover
+* toolbar"), and the toolbar's card only reaches part of the sender line.
+* A toolbar with more or fewer actions covers exactly its own width; nothing
+* on the row moves.
+*
+* Measured when the toolbar is about to show, not when it mounts: every row
+* of a timeline renders a toolbar, and the width matters only on the row the
+* pointer or focus is on. So mounting costs no React state (one commit per
+* row) and no ResizeObserver per row. The row's `pointerenter` and `focusin`
+* write the width in the input event's own task, before the frame that
+* applies the row's :hover / :focus-within styles, so the first frame that
+* shows the toolbar already masks its width; the toolbar is laid out at rest
+* (only its opacity is 0), so its `offsetWidth` is right then. A popup opens
+* from the toolbar only after a hover or a focus, so it finds the width
+* written. While the row shows the toolbar, one ResizeObserver shared by all
+* rows watches it, so a button added while it shows re-measures; it lets go
+* when the pointer and focus have left the row and no popup is open, and is
+* disconnected once no toolbar shows.
+*
+* On attach the row gets five buttons' width (164px) as a fallback: a plain
+* DOM write, no commit and no read, so a show that ever came without a
+* pointerenter or focusin (a row that appears under a resting pointer) fades
+* too much rather than leaving letters beside the card. Rows without a
+* toolbar never get the property, so their header's gradient stays invalid
+* and masks nothing.
+*
+* A stable callback ref with a cleanup (React 19), merged with the caller's
+* ref by `useRender`.
+*/
+function measureWidthOnShow(toolbar) {
+	const row = toolbar?.closest("[data-message-item]");
+	if (!toolbar || !row) return void 0;
+	const show = () => watch(toolbar, row);
+	const pointerLeft = () => {
+		if (!row.matches(":focus-within") && !hasOpenPopup(row)) unwatch(toolbar);
+	};
+	const focusLeft = (event) => {
+		const next = event.relatedTarget instanceof Node ? event.relatedTarget : null;
+		if (row.contains(next) || row.matches(":hover") || hasOpenPopup(row)) return;
+		unwatch(toolbar);
+	};
+	row.style.setProperty(TOOLBAR_WIDTH, FALLBACK_WIDTH);
+	row.addEventListener("pointerenter", show);
+	row.addEventListener("focusin", show);
+	row.addEventListener("pointerleave", pointerLeft);
+	row.addEventListener("focusout", focusLeft);
+	return () => {
+		row.removeEventListener("pointerenter", show);
+		row.removeEventListener("focusin", show);
+		row.removeEventListener("pointerleave", pointerLeft);
+		row.removeEventListener("focusout", focusLeft);
+		unwatch(toolbar);
+		row.style.removeProperty(TOOLBAR_WIDTH);
+	};
+}
+function MessageItemToolbar({ className, render, ref, ...props }) {
 	const { toolbar } = messageItem();
 	const defaultProps = { className: toolbar({ className }) };
 	return useRender({
 		defaultTagName: "div",
 		render,
+		ref: ref ? [ref, measureWidthOnShow] : measureWidthOnShow,
 		props: mergeProps(defaultProps, props),
 		state: { slot: "message-item-toolbar" }
 	});

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

@@ -1368,7 +1368,7 @@ declare function MessageItemDelegatedAvatar({ className, deleted, ...props }: Me
 //#endregion
 //#region src/components/message-item/message-item-toolbar.d.ts
 type MessageItemToolbarProps = useRender.ComponentProps<"div">;
-declare function MessageItemToolbar({ className, render, ...props }: MessageItemToolbarProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+declare function MessageItemToolbar({ className, render, ref, ...props }: MessageItemToolbarProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 type MessageItemToolbarButtonProps = useRender.ComponentProps<"button"> & {
   active?: boolean;
 };