@botiverse/raft-ui 0.21.0 → 0.21.1

package/CHANGELOG.md

@@ -1,3 +1,55 @@
+## [0.21.1](https://github.com/botiverse/raft-design/compare/v0.21.0...v0.21.1) (2026-10-22)
+
+### Design System
+
+- **Chips**: the ink at a chip's two ends sits the same distance from its fill's edges. A chip keeps its total padding and its width, and splits the padding between its ends so each end makes up for the empty space its own content brings. A smaller note after a chip's label centers on the label's letters, and the label stays on the sentence's baseline. It applies to MessageReferenceChip, MessageReferencePending, MessageReferenceUnavailable, MessageReactionChip, MessageItemSavedIndicator, MessageForwardedBundleAttachment, TaskChip and TaskCardStatus, and to the new MessageReferenceSuffix. ([#700](https://github.com/botiverse/raft-design/pull/700))
+  - Why: the chips split their padding as if every end were the same, so an icon or a status pixel sat closer to its edge than the last letter did to the other (3.6px against 7px in a reference chip), and the end after the text looked empty; each chip's padding is now set from where its ink is drawn.
+  - Affects: the padding at each end, left / right, totals unchanged; see Fixed below.
+  - Docs: https://raft-design.botiverse.build/foundations/alignment/#chips
+- **A control and its label**: a settings row is the exception to the first-line rule. The leading icon, avatar or tile and the trailing switch, checkbox, radio, value or chevron of a `ListRow variant="plain"` center on the whole row, with or without a description, as they did in 0.20. A checkbox or radio beside wrapping text in a `<label>` row still sits on that text's first line. It applies to ListRow. ([#703](https://github.com/botiverse/raft-design/pull/703))
+  - Why: a setting reads as one unit, and with its controls on the title's first line they belonged to the title instead of the row; settings rows center them on the row again.
+  - Docs: https://raft-design.botiverse.build/foundations/alignment/#a-control-and-its-label
+- **Timeline rhythm: the edge that messages scroll under fades**: the bottom edge of a message list, over the composer, fades from the panel's color to transparent over the section step, at all times, instead of cutting the message under it. The line of who is about to post sits on the same fade and has none of its own. It applies to the new MessageListEndFade. ([#699](https://github.com/botiverse/raft-design/pull/699))
+  - Why: a message scrolled under the composer was cut off by a hard edge; the edge now fades, as a tab bar fades on the side that hides tabs.
+  - Affects: fade height `timeline-section` 24px, `layer-canvas` to transparent.
+  - Docs: https://raft-design.botiverse.build/foundations/spacing/#timeline-rhythm
+
+### Added
+
+- **MessageReferenceSuffix**: a short note after a reference chip's label, in muted Space Mono, such as `msg` on a link to a message. Put it inside `MessageReferenceChip`, after `MessageReferenceLabel`. ([#700](https://github.com/botiverse/raft-design/pull/700))
+  - Why: a note in a span of the caller's own sat on the label's baseline, 0.3px low beside a 12.25px label and 0.75px low beside a 14px one, and its descenders made it look lower still; the part keeps the label's baseline in the layout and draws the note a quarter of the size difference higher, so the middles of the two x-heights meet.
+  - Affects: `text-label` (11px) in `foreground-hint`, line height 1; drawn `(label size - 1em) / 4` higher.
+  - Docs: https://raft-design.botiverse.build/components/message-item/
+- **MessageListEndFade**: the fade over a message list's bottom edge. Put it beside `MessageList`, in the same positioned parent (`ConversationPanelBody` is one), like the jump controls; it lies under them, is hidden from assistive technology and takes no pointer events. ([#699](https://github.com/botiverse/raft-design/pull/699))
+  - Why: see Timeline rhythm: the edge that messages scroll under fades, above.
+  - Affects: 24px tall (`h-timeline-section`), `layer-canvas` to transparent upward, `z-index` 5.
+  - Docs: https://raft-design.botiverse.build/components/message-list/
+- **SegmentedControl** `variant="on-frame"`, for a control in the frame (a top bar). `variant="default"` is unchanged and stays the default. ([#693](https://github.com/botiverse/raft-design/pull/693))
+  - Why: a yellow sticker on the yellow frame did not read as selected, and a white segment beside it looked chosen instead; in the frame the selected segment takes the frame's active colors, as a selected rail item does.
+  - Affects: track `fill-frame-medium`; other segments `foreground-on-frame-muted`, with `foreground-on-frame` on hover and `overlay-frame-medium` on hover and press; the selected segment `layer-frame-active` with a `line-frame-active` edge and `foreground-on-frame-active` text (white on the yellow frame, yellow on the dark one).
+  - Docs: https://raft-design.botiverse.build/components/segmented-control/
+
+### Changed
+
+- **ListRow** `variant="plain"` with a description: the leading icon, avatar or tile and the trailing switch, checkbox, radio, value or chevron center on the whole row again, as in 0.20, instead of on the title's first line. With a title alone, nothing changes. This reverts the 0.21.0 change to ListRow. ([#703](https://github.com/botiverse/raft-design/pull/703))
+  - Why: see A control and its label above.
+  - Affects: the ends move without changing size, so row heights are unchanged (54px on a phone for a one-line row with a switch).
+  - Docs: https://raft-design.botiverse.build/components/list-row/
+
+### Fixed
+
+- **MessageReferenceChip**, **MessageReferencePending**, **MessageReferenceUnavailable**, **MessageReactionChip**, **MessageItemSavedIndicator**, **MessageForwardedBundleAttachment**, **TaskChip** and **TaskCardStatus**: the ink at both ends sits the same distance from the edges; each chip keeps its total padding and its width. ([#700](https://github.com/botiverse/raft-design/pull/700))
+  - Why: see Chips above.
+  - Affects: padding left / right: MessageReferenceChip, MessageReferencePending and MessageReferenceUnavailable with an icon 3px / 6px → 4.5px / 4.5px (without an icon unchanged, 6px / 6px); MessageReactionChip 6px / 8px → 7px / 7px; MessageItemSavedIndicator and MessageForwardedBundleAttachment 6px / 6px → 5.5px / 6.5px (their bookmark and file icons are drawn inside their boxes); TaskChip 6px / 8px → 7px / 7px, `size="sm"` 4px / 6px → 5px / 5px and `variant="inline"` 3px / 6px → 4.5px / 4.5px; TaskCardStatus 6px / 8px → 7px / 7px.
+  - Docs: https://raft-design.botiverse.build/foundations/alignment/#chips
+- **MessageReferencePending**, and any reference chip, holding a `Spinner`: the spinner centers on the middle of the label's line, as an icon does. ([#700](https://github.com/botiverse/raft-design/pull/700))
+  - Why: the chip centered only `svg` icons on the label's line, and a spinner is not one, so it sat on the baseline, 5–6px below the middle of the label's line.
+  - Docs: https://raft-design.botiverse.build/components/message-item/
+- **MessageQuotedPreviewChannel** and **MessageQuotedPreviewThread**: the icon sits on the first line of the name when a long name wraps, instead of in the middle of both lines. ([#700](https://github.com/botiverse/raft-design/pull/700))
+  - Why: the icon was centered on the whole name, so it slid between the lines of a wrapped name; it now follows A mark that leads text, like the other components.
+  - Affects: the icon (14px) is placed `(1lh - 14px) / 2` from the top of the name's first line.
+  - Docs: https://raft-design.botiverse.build/foundations/alignment/#a-mark-that-leads-text
+
 ## [0.21.0](https://github.com/botiverse/raft-design/compare/v0.20.1...v0.21.0) (2026-10-22)
 
 0.20.1 was not published to npm. This release includes its changes, listed under [0.20.1](https://github.com/botiverse/raft-design/blob/v0.21.0/packages/ui/CHANGELOG.md#0201-2026-10-22) in the changelog.

package/dist/{touch-drag-B7uLTWXe.mjs → inbox-item.recipe-DelZxRmY.mjs}

@@ -2,7 +2,7 @@ import { cn } from "./cn.mjs";
 import { Dialog } from "@base-ui/react/dialog";
 import { Check, Minus, X } from "lucide-react";
 import { tv } from "tailwind-variants/lite";
-import { Children, Fragment, createContext, isValidElement, use, useCallback, useContext, useEffect, useMemo, useRef, useSyncExternalStore } from "react";
+import { Children, Fragment, createContext, isValidElement, use, useCallback, useContext, useEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { Button } from "@base-ui/react/button";
 import { mergeProps } from "@base-ui/react/merge-props";
@@ -13,6 +13,8 @@ import { ScrollArea } from "@base-ui/react/scroll-area";
 import { Avatar } from "@base-ui/react";
 import { Menu } from "@base-ui/react/menu";
 import { flushSync } from "react-dom";
+import { Radio } from "@base-ui/react/radio";
+import { RadioGroup } from "@base-ui/react/radio-group";
 import { Toggle } from "@base-ui/react/toggle";
 import { Toolbar } from "@base-ui/react/toolbar";
 import { PointerSensor, TouchSensor, useSensor } from "@dnd-kit/core";
@@ -1817,6 +1819,138 @@ function useOverflowTitle(ref, title) {
 	}, [own, ref]);
 }
 //#endregion
+//#region src/components/segmented-control/segmented-control.tsx
+const segmentedControl = tv$1({
+	slots: {
+		root: ["inline-flex shrink-0 items-center", "w-fit flex-nowrap gap-[3px] rounded-[11px] bg-fill-muted p-[3px]"],
+		item: [
+			"inline-flex min-w-0 shrink-0 items-center gap-1.5",
+			"outline-none disabled:pointer-events-none",
+			"[&_svg]:pointer-events-none [&_svg]:shrink-0",
+			"h-8 justify-center rounded-control border-[1.5px] border-transparent bg-transparent px-3",
+			"font-sans text-callout font-semibold text-foreground-muted",
+			"[&_svg:not([class*='size-'])]:size-4",
+			"hover:bg-fill-medium active:bg-fill-medium",
+			"data-checked:border-sticker-ink data-checked:bg-brand data-checked:font-bold data-checked:text-sticker-ink data-checked:ring-[1.5px] data-checked:ring-sticker-edge",
+			"data-checked:hover:bg-brand data-checked:active:bg-brand data-checked:active:overlay-sticker-medium",
+			"focus-visible:shadow-focus",
+			"data-disabled:cursor-not-allowed data-disabled:text-foreground-disabled data-disabled:hover:bg-transparent"
+		],
+		label: ["truncate"],
+		count: ["font-mono", "text-mono-meta font-normal"]
+	},
+	variants: {
+		variant: {
+			default: {},
+			"on-frame": { root: [
+				"bg-fill-frame-medium",
+				"**:data-[slot=segmented-control-item]:text-foreground-on-frame-muted **:data-[slot=segmented-control-item]:hover:text-foreground-on-frame",
+				"**:data-[slot=segmented-control-item]:hover:bg-transparent **:data-[slot=segmented-control-item]:hover:overlay-frame-medium **:data-[slot=segmented-control-item]:active:bg-transparent **:data-[slot=segmented-control-item]:active:overlay-frame-medium",
+				"**:data-[slot=segmented-control-item]:data-checked:border-line-frame-active **:data-[slot=segmented-control-item]:data-checked:bg-layer-frame-active **:data-[slot=segmented-control-item]:data-checked:text-foreground-on-frame-active",
+				"**:data-[slot=segmented-control-item]:data-checked:hover:bg-layer-frame-active **:data-[slot=segmented-control-item]:data-checked:hover:bg-none **:data-[slot=segmented-control-item]:data-checked:active:bg-layer-frame-active"
+			] }
+		},
+		iconsOnlyBelow: {
+			xs: { root: ["@max-xs:**:data-[slot=segmented-control-item]:relative @max-xs:**:data-[slot=segmented-control-item]:w-8 @max-xs:**:data-[slot=segmented-control-item]:px-0", "@max-xs:**:data-[slot=segmented-control-label]:sr-only @max-xs:**:data-[slot=segmented-control-count]:sr-only"] },
+			sm: { root: ["@max-sm:**:data-[slot=segmented-control-item]:relative @max-sm:**:data-[slot=segmented-control-item]:w-8 @max-sm:**:data-[slot=segmented-control-item]:px-0", "@max-sm:**:data-[slot=segmented-control-label]:sr-only @max-sm:**:data-[slot=segmented-control-count]:sr-only"] },
+			md: { root: ["@max-md:**:data-[slot=segmented-control-item]:relative @max-md:**:data-[slot=segmented-control-item]:w-8 @max-md:**:data-[slot=segmented-control-item]:px-0", "@max-md:**:data-[slot=segmented-control-label]:sr-only @max-md:**:data-[slot=segmented-control-count]:sr-only"] },
+			lg: { root: ["@max-lg:**:data-[slot=segmented-control-item]:relative @max-lg:**:data-[slot=segmented-control-item]:w-8 @max-lg:**:data-[slot=segmented-control-item]:px-0", "@max-lg:**:data-[slot=segmented-control-label]:sr-only @max-lg:**:data-[slot=segmented-control-count]:sr-only"] },
+			xl: { root: ["@max-xl:**:data-[slot=segmented-control-item]:relative @max-xl:**:data-[slot=segmented-control-item]:w-8 @max-xl:**:data-[slot=segmented-control-item]:px-0", "@max-xl:**:data-[slot=segmented-control-label]:sr-only @max-xl:**:data-[slot=segmented-control-count]:sr-only"] },
+			"2xl": { root: ["@max-2xl:**:data-[slot=segmented-control-item]:relative @max-2xl:**:data-[slot=segmented-control-item]:w-8 @max-2xl:**:data-[slot=segmented-control-item]:px-0", "@max-2xl:**:data-[slot=segmented-control-label]:sr-only @max-2xl:**:data-[slot=segmented-control-count]:sr-only"] }
+		}
+	}
+});
+const SegmentedControlIconsOnlyContext = createContext(false);
+function SegmentedControl({ disabled = false, iconsOnlyBelow, variant = "default", className, ...props }) {
+	const { root } = segmentedControl({
+		iconsOnlyBelow,
+		variant
+	});
+	return /* @__PURE__ */ jsx(SegmentedControlIconsOnlyContext, {
+		value: iconsOnlyBelow !== void 0,
+		children: /* @__PURE__ */ jsx(RadioGroup, {
+			disabled,
+			"data-slot": "segmented-control",
+			className: root({ className }),
+			...props
+		})
+	});
+}
+function SegmentedControlItem({ className, ...props }) {
+	const { item } = segmentedControl();
+	const iconsOnly = use(SegmentedControlIconsOnlyContext);
+	const radio = /* @__PURE__ */ jsx(Radio.Root, {
+		render: /* @__PURE__ */ jsx("button", { type: "button" }),
+		nativeButton: true,
+		"data-slot": "segmented-control-item",
+		className: item({ className: `group/segmented-control-item ${className ?? ""}`.trim() }),
+		...props
+	});
+	return iconsOnly ? /* @__PURE__ */ jsx(SegmentedControlItemTooltip, { children: radio }) : radio;
+}
+function SegmentedControlItemTooltip({ children }) {
+	const [text, setText] = useState("");
+	const triggerRef = useRef(null);
+	const handleOpenChange = useCallback((open, details) => {
+		if (!open) return;
+		const label = triggerRef.current?.querySelector("[data-slot=segmented-control-label]");
+		if (!label || label.getBoundingClientRect().width > 1) {
+			details.cancel();
+			return;
+		}
+		setText(label.textContent ?? "");
+	}, []);
+	return /* @__PURE__ */ jsxs(Tooltip$1, {
+		onOpenChange: handleOpenChange,
+		children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+			ref: triggerRef,
+			render: children
+		}), /* @__PURE__ */ jsx(TooltipContent, { children: text })]
+	});
+}
+function SegmentedControlLabel({ className, ...props }) {
+	const { label } = segmentedControl();
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "segmented-control-label",
+		className: label({ className }),
+		...props
+	});
+}
+function SegmentedControlCount({ className, ...props }) {
+	const { count } = segmentedControl();
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "segmented-control-count",
+		className: count({ className }),
+		...props
+	});
+}
+/**
+* The same track for choices that are places, not values: each segment is a
+* link to another URL (a language, a version of the page), so it can be
+* opened in a new tab and copied. Name it with `aria-label`.
+*/
+function SegmentedControlNav({ variant = "default", className, ...props }) {
+	const { root } = segmentedControl({ variant });
+	return /* @__PURE__ */ jsx("nav", {
+		"data-slot": "segmented-control",
+		className: root({ className }),
+		...props
+	});
+}
+/** One segment of a `SegmentedControlNav`: a link, `<a>` unless `render` gives a router link. */
+function SegmentedControlLink({ current = false, className, render, ...props }) {
+	const { item } = segmentedControl();
+	return useRender({
+		render: render ?? /* @__PURE__ */ jsx("a", {}),
+		props: mergeProps({
+			"data-slot": "segmented-control-item",
+			"aria-current": current ? "page" : void 0,
+			...current ? { "data-checked": "" } : {},
+			className: item({ className: `group/segmented-control-item ${className ?? ""}`.trim() })
+		}, props)
+	});
+}
+//#endregion
 //#region src/components/avatar/avatar.tsx
 const avatar = tv$1({
 	slots: {
@@ -2524,7 +2658,7 @@ const messageFooter = tv$1({
 		savedIndicator: [
 			"inline-flex min-w-0 max-w-full items-center gap-1 overflow-hidden whitespace-nowrap select-none",
 			"[&_svg]:shrink-0",
-			"h-[22px] rounded-chip px-1.5",
+			"h-[22px] rounded-chip pr-[6.5px] pl-[5.5px]",
 			"text-caption font-semibold text-foreground-muted",
 			"bg-fill-muted hover:overlay-medium active:overlay-medium",
 			"outline-none focus-visible:shadow-focus",
@@ -2636,7 +2770,7 @@ const messageReaction = tv$1({ slots: {
 	chip: [
 		"inline-flex min-w-0 max-w-full items-center overflow-hidden whitespace-nowrap",
 		"transition-colors",
-		"h-6 gap-1 rounded-chip pr-2 pl-1.5 text-callout text-foreground",
+		"h-6 gap-1 rounded-chip px-[7px] text-callout text-foreground",
 		"bg-fill-muted hover:overlay-medium active:overlay-medium",
 		"data-pressed:bg-attention-soft",
 		"has-data-[slot=message-reaction-error-indicator]:bg-warning-soft",
@@ -2865,12 +2999,17 @@ function MessageReactionTooltipMeta({ className, render, ...props }) {
 //#endregion
 //#region src/components/message-item/message-reference.recipe.ts
 const chip = (fill) => [
-	"items-baseline gap-0.5 rounded-sticker px-1.5 py-px has-[>svg]:pl-[3px]",
+	"items-baseline gap-0.5 rounded-sticker px-1.5 py-px has-[>svg]:px-[4.5px]",
 	"[font-size:0.875em] leading-5 font-semibold",
+	"[--message-reference-em:1em]",
 	"[&_svg]:size-3.5 [&_svg]:text-foreground-muted",
 	fill
 ];
 const linkChip = (fill) => [...chip(fill), "text-foreground cursor-pointer hover:overlay-medium active:overlay-medium"];
+const SUFFIX_LIFT = {
+	"x-height": "top-[calc((1em-var(--message-reference-em))/4)]",
+	icon: "top-[calc(0.25em-var(--message-reference-em)*0.35)]"
+}["x-height"];
 const messageReference = tv$1({
 	slots: {
 		root: [
@@ -2880,11 +3019,17 @@ const messageReference = tv$1({
 			"max-w-full truncate select-text no-underline",
 			"outline-none focus-visible:shadow-focus",
 			"[&_svg]:size-[0.857em] [&_svg]:shrink-0 [&_svg]:self-center",
+			"*:data-[slot=spinner]:self-center",
 			"has-[>[data-slot=message-reference-indicator]]:relative has-[>[data-slot=message-reference-indicator]]:mr-2",
 			"has-[>[data-slot=message-reference-indicator]]:inline-block",
 			"has-[>[data-slot=message-reference-indicator]]:overflow-visible"
 		],
 		chipLabel: "min-w-0 truncate",
+		suffix: [
+			"relative shrink-0",
+			SUFFIX_LIFT,
+			"font-mono text-label leading-none font-normal text-foreground-hint"
+		],
 		indicator: ["pointer-events-none absolute -right-1.5 top-0 inline-flex size-2 shrink-0 items-center justify-center", "*:data-[slot=status]:size-full"]
 	},
 	variants: { variant: {
@@ -2942,6 +3087,18 @@ function MessageReferenceLabel({ className, render, ...props }) {
 		state: { slot: "message-reference-label" }
 	});
 }
+/** A short note after a chip's label in muted machine type, such as `msg` on a
+*  link to a message. It lines up with the label by the middle of its letters. */
+function MessageReferenceSuffix({ className, render, ...props }) {
+	const { suffix } = messageReference();
+	const defaultProps = { className: suffix({ className }) };
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "message-reference-suffix" }
+	});
+}
 function MessageReferencePending({ className, render, ...props }) {
 	const { root } = messageReference({ variant: "pending" });
 	return useReferenceRender(root({ className }), render, props);
@@ -3122,8 +3279,8 @@ const messageQuotedPreview = tv$1({ slots: {
 		"has-data-[slot=message-quoted-preview-author-delegated-by]:flex-wrap",
 		"gap-1.5 p-0 pb-0.5"
 	],
-	channel: ["inline-flex items-center", "gap-1 text-footnote font-semibold text-foreground-hint [&_svg]:size-3.5"],
-	thread: ["inline-flex items-center", "gap-1 text-footnote font-semibold text-foreground-hint [&_svg]:size-3.5"],
+	channel: ["inline-flex items-start", "gap-1 text-footnote font-semibold text-foreground-hint [&_svg]:size-3.5 [&_svg]:lead-icon"],
+	thread: ["inline-flex items-start", "gap-1 text-footnote font-semibold text-foreground-hint [&_svg]:size-3.5 [&_svg]:lead-icon"],
 	author: ["inline-flex min-w-0 items-center", "gap-1.5"],
 	authorName: ["truncate", "text-footnote font-bold text-foreground-muted"],
 	authorMeta: ["truncate", "text-caption text-foreground-hint"],
@@ -3297,6 +3454,11 @@ const messageList = tv$1({
 		],
 		dateDividerRule: ["flex-1", "min-w-3 border-t border-line-hairline"],
 		dateDividerChip: ["inline-flex items-center", "font-mono text-mono-meta whitespace-nowrap text-foreground-hint"],
+		endFade: [
+			"pointer-events-none absolute inset-x-0 bottom-0 z-5",
+			"h-timeline-section",
+			"bg-linear-to-t from-layer-canvas to-transparent"
+		],
 		notice: ["text-center", "pt-timeline-lead pb-timeline-row font-mono text-mono-meta"],
 		historyLimited: [
 			"inline-flex items-center",
@@ -3426,6 +3588,19 @@ function MessageListHistoryLimited({ className, render, ...props }) {
 		props: mergeProps(defaultProps, props)
 	});
 }
+function MessageListEndFade({ className, render, ...props }) {
+	const { endFade } = messageList();
+	const defaultProps = {
+		"data-slot": "message-list-end-fade",
+		"aria-hidden": true,
+		className: endFade({ className })
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
 //#endregion
 //#region src/components/message-list/message-list-jump.tsx
 function MessageListJumpControls({ className, render, side = "bottom", ...props }) {
@@ -3586,4 +3761,143 @@ function useMouseOnlyPointerSensor(distance) {
 	return useSensor(MouseOnlyPointerSensor, options);
 }
 //#endregion
-export { MessageReactionTooltipContent as $, Spinner as $n, DropdownMenuItemLabel as $t, messageEmbed as A, Tooltip$1 as An, MessageItemAvatarSlot as At, MessageReferenceLabel as B, DialogClose as Bn, AvatarImage as Bt, MessageQuotedPreviewThread as C, ScrollAreaScrollbar as Cn, MessageItemAttachments as Ct, MessageEmbedContent as D, Checkbox$1 as Dn, MessageItemEmbedded as Dt, MessageEmbed as E, useMobileViewport as En, MessageItemEdited as Et, MessageMultiSelectCheckbox as F, TextLink as Fn, Avatar$1 as Ft, MessageReactionChip as G, DialogNav as Gn, readNow as Gt, MessageReferenceText as H, DialogDescription as Hn, measureContent as Ht, MessageMultiSelectToolbar as I, textLinkVariants as In, AvatarBadge as It, MessageReactionGlyph as J, DialogSurface as Jn, DropdownMenuCheckboxItemIndicator as Jt, MessageReactionCount as K, DialogOverlay as Kn, DropdownMenu as Kt, MessageMultiSelectToolbarActions as L, Badge as Ln, AvatarFallback as Lt, MessageTextSelectionToolbarButton as M, TooltipPortal as Mn, MessageItemGutter as Mt, MessageTextSelectionToolbarSeparator as N, TooltipProvider as Nn, MessageItem as Nt, MessageEmbedFooter as O, CheckboxIndicator as On, MessageItemFooter as Ot, MessageMultiSelect as P, TooltipTrigger as Pn, searchHit as Pt, MessageReactionQuickRow as Q, buttonVariants as Qn, DropdownMenuItemCount as Qt, MessageReferenceChip as R, Dialog$1 as Rn, AvatarGroup as Rt, MessageQuotedPreviewText as S, ScrollAreaCorner as Sn, MessageItemTime as St, MessageQuotedPreviewUnavailable as T, ScrollAreaViewport as Tn, MessageItemContent as Tt, MessageReferenceUnavailable as U, DialogFooter as Un, measureElement as Ut, MessageReferencePending as V, DialogContent as Vn, useOverflowTitle as Vt, MessageReactionAddButton as W, DialogHeader as Wn, observeTruncation as Wt, MessageReactionPickerStatic as X, DialogTrigger as Xn, DropdownMenuFooter as Xt, MessageReactionPickerContent as Y, DialogTitle as Yn, DropdownMenuContent as Yt, MessageReactionQuickButton as Z, Button$1 as Zn, DropdownMenuItem as Zt, MessageQuotedPreviewAuthorName as _, PanelScrollContent as _n, MessageItemMeta as _t, MessageListJumpPillDismiss as a, DropdownMenuRadioItemIndicator as an, useTheme as ar, MessageItemBadge as at, MessageQuotedPreviewHeader as b, ScrollArea$1 as bn, MessageItemSenderButton as bt, MessageListHistoryLimited as c, DropdownMenuSubmenu as cn, controlIconInset as cr, MessageItemSavedIndicator as ct, MessageQuotedPreview as d, Kbd as dn, decisionWidth as dr, MessageItemDelegatedAvatar as dt, DropdownMenuLabel as en, defaultNativeButton as er, MessageReactionTooltipMeta as et, MessageQuotedPreviewAttachment as f, KbdGroup as fn, MessageItemDelegatedBy as ft, MessageQuotedPreviewAuthorMeta as g, PanelHeaderRoot as gn, MessageItemInlineStatus as gt, MessageQuotedPreviewAuthorDelegatedBy as h, PanelFooter as hn, MessageItemHeader as ht, MessageListJumpPill as i, DropdownMenuRadioItem as in, useThemeScopeProps as ir, MessageReactionTooltipSeparator as it, MessageTextSelectionToolbar as j, TooltipContent as jn, MessageItemContinuationTime as jt, MessageEmbedHeader as k, PRESENCE_COLOR as kn, MessageItemSearchMatch as kt, MessageListNotice as l, DropdownMenuSubmenuTrigger as ln, headEdgePull as lr, MessageItemToolbar as lt, MessageQuotedPreviewAuthor as m, PanelBody as mn, MessageItemDelegatedByName as mt, useMouseOnlyPointerSensor as n, DropdownMenuPortal as nn, withOverlayLayer as nr, MessageReactionTooltipNameText as nt, MessageListJumpPillGroup as o, DropdownMenuSeparator as on, ThemeStateContext as or, MessageItemBadgeSeparator as ot, MessageQuotedPreviewAttachments as p, Panel as pn, MessageItemDelegatedByButton as pt, MessageReactionErrorIndicator as q, DialogPortal as qn, DropdownMenuCheckboxItem as qt, MessageListJumpControls as r, DropdownMenuRadioGroup as rn, resolveThemeScopeProps as rr, MessageReactionTooltipNames as rt, MessageListDateDivider as s, DropdownMenuShortcut as sn, tv$1 as sr, MessageItemReadReceipt as st, useHoldThenMoveTouchSensor as t, DropdownMenuPopup as tn, useParentOverlayKind as tr, MessageReactionTooltipName as tt, MessageList as u, DropdownMenuTrigger as un, headEdges as ur, MessageItemToolbarButton as ut, MessageQuotedPreviewChannel as v, PanelScrollViewport as vn, MessageItemSender as vt, MessageQuotedPreviewTimestamp as w, ScrollAreaThumb as wn, MessageItemBody as wt, MessageQuotedPreviewLoading as x, ScrollAreaContent as xn, MessageItemSenderGroup as xt, MessageQuotedPreviewContent as y, PanelSection as yn, MessageItemSenderBadges as yt, MessageReferenceIndicator as z, DialogBody as zn, AvatarGroupCount as zt };
+//#region src/components/inbox-item/inbox-item.recipe.ts
+const inboxItem = tv$1({
+	slots: {
+		item: [
+			"relative grid w-full grid-cols-[minmax(0,1fr)_auto] items-start gap-3 p-3 text-left",
+			"has-data-[slot=inbox-item-selection]:grid-cols-[auto_minmax(0,1fr)_auto]",
+			"has-data-[slot=inbox-item-leading]:grid-cols-[auto_minmax(0,1fr)_auto]",
+			"has-data-[slot=inbox-item-selection]:has-data-[slot=inbox-item-leading]:grid-cols-[auto_auto_minmax(0,1fr)_auto]",
+			"transition-colors",
+			"gap-x-3 gap-y-0 rounded-none border-0 bg-transparent px-4 py-3 shadow-none",
+			"before:pointer-events-none before:absolute before:top-0 before:right-0 before:left-4 before:hidden before:border-t before:border-line-hairline",
+			"[[data-slot=inbox-item]+&]:before:block has-data-[slot=inbox-item-selection]:before:left-11",
+			"has-data-[slot=inbox-item-leading]:before:left-16",
+			"has-data-[slot=inbox-item-selection]:has-data-[slot=inbox-item-leading]:before:left-23",
+			"hover:bg-fill-subtle not-data-[active=true]:active:bg-fill-medium",
+			"not-data-[active=true]:data-popup-open:bg-fill-subtle not-data-[active=true]:has-data-popup-open:bg-fill-subtle",
+			"data-[active=true]:bg-info-soft data-[active=true]:hover:bg-info-soft",
+			"data-disabled:pointer-events-none data-disabled:hover:bg-transparent",
+			"has-[[data-slot=inbox-item-open]:focus-visible]:keyboard:inset-ring-2 has-[[data-slot=inbox-item-open]:focus-visible]:keyboard:inset-ring-foreground",
+			"not-data-[density=compact]:has-data-[slot=inbox-item-trailing]:[--inbox-item-content-display:grid] not-data-[density=compact]:has-data-[slot=inbox-item-trailing]:[--inbox-item-content-end:-1]"
+		],
+		itemTrigger: ["absolute inset-0 z-0 outline-none"],
+		itemLeading: ["pointer-events-none relative z-10 flex size-9 shrink-0 items-center justify-center"],
+		itemLeadingBadge: [
+			"absolute -right-0.5 -bottom-0.5 z-10 inline-flex size-3.5 items-center justify-center",
+			"rounded-[3px] border border-sticker-ink outline-2 outline-layer-canvas outline-solid",
+			"bg-layer-canvas bg-[linear-gradient(var(--info-soft),var(--info-soft))] text-foreground",
+			"[&_svg]:size-2.5 [&_svg]:shrink-0"
+		],
+		itemSelection: ["relative z-10 mt-0.5 flex size-4 shrink-0 items-center justify-center"],
+		itemContent: [
+			"pointer-events-none relative z-10 min-w-0 flex-1 text-left",
+			"-col-start-3 col-end-(--inbox-item-content-end) row-start-1",
+			"[display:var(--inbox-item-content-display,block)] grid-cols-subgrid"
+		],
+		itemContext: [
+			"col-span-full nth-[-n+2]:col-[1/2]",
+			"flex min-w-0 items-center",
+			"mb-0.5 gap-1.5 py-0",
+			"text-caption text-foreground-hint"
+		],
+		itemSubtitle: [
+			"col-span-full nth-[-n+2]:col-[1/2]",
+			"min-w-0",
+			"mt-0.5 mb-0 py-0",
+			"text-caption text-foreground-hint"
+		],
+		itemHeading: [
+			"col-span-full nth-[-n+2]:col-[1/2]",
+			"flex min-w-0 items-start gap-2",
+			"mb-0"
+		],
+		itemTitle: [
+			"relative line-clamp-2 min-w-0 flex-1 pl-[18px]",
+			"[&>svg]:absolute [&>svg]:top-[calc((1lh-14px)/2)] [&>svg]:left-0 [&>svg]:size-3.5",
+			"font-sans text-subhead font-semibold text-foreground-muted",
+			"group-data-[unread=true]/inbox-item:font-bold group-data-[unread=true]/inbox-item:text-foreground",
+			"[&>svg]:text-foreground-hint"
+		],
+		itemTrailing: [
+			"pointer-events-none relative z-10 col-[-2/-1] row-start-1",
+			"flex shrink-0",
+			"mt-0 flex-col items-end gap-2 pt-px",
+			"max-md:flex-col max-md:items-end max-md:gap-2",
+			"after:hidden after:size-[9px] after:shrink-0 after:rounded-[2px] after:border-[1.5px] after:border-sticker-ink after:bg-attention-400",
+			"group-data-[unread=true]/inbox-item:after:block",
+			"*:not-data-[reveal=hover]:opacity-[calc(1-var(--inbox-item-reveal-aside,0)*var(--inbox-item-revealed,0))] after:opacity-[calc(1-var(--inbox-item-reveal-aside,0)*var(--inbox-item-revealed,0))]",
+			"*:not-data-[reveal=hover]:mr-(--inbox-item-aside-room,0px) after:mr-(--inbox-item-aside-room,0px)",
+			"*:not-data-[reveal=hover]:transition-opacity after:transition-opacity",
+			"pointer-fine:has-[>[data-reveal=hover]]:[--inbox-item-reveal-aside:1]",
+			"pointer-coarse:has-[>[data-reveal=hover]]:[--inbox-item-aside-room:--spacing(11)]",
+			"group-hover/inbox-item:[--inbox-item-revealed:1] group-focus-within/inbox-item:[--inbox-item-revealed:1]",
+			"group-data-[active=true]/inbox-item:[--inbox-item-revealed:1] group-data-popup-open/inbox-item:[--inbox-item-revealed:1]",
+			"has-[>[data-reveal=hover]_[data-popup-open]]:[--inbox-item-revealed:1]"
+		],
+		itemMarks: ["flex h-5 shrink-0 items-center justify-end gap-1.5", "text-foreground-hint"],
+		itemHoverTarget: ["pointer-events-auto"],
+		itemTimestamp: ["shrink-0 whitespace-nowrap text-right tabular-nums", "font-mono text-mono-meta text-foreground-hint"],
+		itemBody: [
+			"col-span-full nth-[-n+2]:col-[1/2]",
+			"line-clamp-2",
+			"mt-0.5 text-callout text-foreground-muted"
+		],
+		itemMessage: [
+			"col-span-full nth-[-n+2]:col-[1/2]",
+			"min-w-0",
+			"mt-0.5 line-clamp-2 text-callout text-foreground-muted"
+		],
+		itemSender: ["font-semibold text-foreground"],
+		itemMetadata: [
+			"col-span-full nth-[-n+2]:col-[1/2]",
+			"flex min-h-5 flex-wrap items-center gap-1.5",
+			"mt-2"
+		],
+		itemActions: [
+			"pointer-events-auto flex shrink-0 items-center",
+			"order-last gap-0.5",
+			"*:data-[slot=panel-action]:h-8 *:data-[slot=panel-action]:min-w-8 [&>[data-slot=panel-action]>svg]:size-[18px]",
+			"*:data-[slot=panel-toggle-action]:h-8 *:data-[slot=panel-toggle-action]:min-w-8 [&>[data-slot=panel-toggle-action]>svg]:size-[18px]",
+			"[&>[data-slot=panel-toggle-action][data-pressed]]:border-transparent",
+			"[&>[data-slot=panel-toggle-action][data-pressed]]:bg-transparent",
+			"[&>[data-slot=panel-toggle-action][data-pressed]]:text-foreground",
+			"[&>[data-slot=panel-toggle-action][data-pressed]]:hover:bg-fill-medium [&>[data-slot=panel-toggle-action][data-pressed]]:active:bg-fill-medium",
+			"pointer-coarse:gap-3",
+			"pointer-coarse:*:data-[slot=panel-action]:after:absolute pointer-coarse:*:data-[slot=panel-action]:after:-inset-1.5",
+			"pointer-coarse:*:data-[slot=panel-toggle-action]:after:absolute pointer-coarse:*:data-[slot=panel-toggle-action]:after:-inset-1.5"
+		]
+	},
+	variants: {
+		density: { compact: {
+			item: ["items-center"],
+			itemTitle: ["line-clamp-1", "pl-0 has-[>svg]:pl-[18px]"],
+			itemTrailing: [
+				"gap-0 pt-0",
+				"max-md:gap-0",
+				"group-data-[unread=true]/inbox-item:after:hidden"
+			],
+			itemTimestamp: ["leading-5"],
+			itemBody: ["line-clamp-1", "mt-0"],
+			itemMessage: ["line-clamp-1", "mt-0"]
+		} },
+		reveal: { hover: { itemActions: [
+			"absolute top-0 right-0 z-10",
+			"pointer-events-none opacity-0 transition-opacity",
+			"group-hover/inbox-item:pointer-events-auto group-hover/inbox-item:opacity-100",
+			"group-focus-within/inbox-item:pointer-events-auto group-focus-within/inbox-item:opacity-100",
+			"group-data-[active=true]/inbox-item:pointer-events-auto group-data-[active=true]/inbox-item:opacity-100",
+			"group-data-popup-open/inbox-item:pointer-events-auto group-data-popup-open/inbox-item:opacity-100",
+			"has-data-popup-open:pointer-events-auto has-data-popup-open:opacity-100",
+			"pointer-coarse:pointer-events-auto pointer-coarse:opacity-100 pointer-coarse:only:static"
+		] } }
+	},
+	compoundVariants: [{
+		density: "compact",
+		reveal: "hover",
+		class: { itemActions: ["top-1/2 -translate-y-1/2", "pointer-coarse:only:translate-y-0"] }
+	}]
+});
+//#endregion
+export { MessageReactionPickerStatic as $, DialogHeader as $n, observeTruncation as $t, MessageEmbedFooter as A, ScrollAreaContent as An, MessageItemEmbedded as At, MessageReferenceChip as B, TooltipContent as Bn, AvatarFallback as Bt, MessageQuotedPreviewLoading as C, PanelBody as Cn, MessageItemSenderButton as Ct, MessageQuotedPreviewUnavailable as D, PanelScrollViewport as Dn, MessageItemBody as Dt, MessageQuotedPreviewTimestamp as E, PanelScrollContent as En, MessageItemAttachments as Et, MessageTextSelectionToolbarSeparator as F, useMobileViewport as Fn, MessageItemGutter as Ft, MessageReferenceText as G, textLinkVariants as Gn, SegmentedControlCount as Gt, MessageReferenceLabel as H, TooltipProvider as Hn, AvatarGroupCount as Ht, MessageMultiSelect as I, Checkbox$1 as In, MessageItem as It, MessageReactionChip as J, DialogBody as Jn, SegmentedControlLink as Jt, MessageReferenceUnavailable as K, Badge as Kn, SegmentedControlItem as Kt, MessageMultiSelectCheckbox as L, CheckboxIndicator as Ln, searchHit as Lt, messageEmbed as M, ScrollAreaScrollbar as Mn, MessageItemSearchMatch as Mt, MessageTextSelectionToolbar as N, ScrollAreaThumb as Nn, MessageItemAvatarSlot as Nt, MessageEmbed as O, PanelSection as On, MessageItemContent as Ot, MessageTextSelectionToolbarButton as P, ScrollAreaViewport as Pn, MessageItemContinuationTime as Pt, MessageReactionPickerContent as Q, DialogFooter as Qn, measureElement as Qt, MessageMultiSelectToolbar as R, PRESENCE_COLOR as Rn, Avatar$1 as Rt, MessageQuotedPreviewHeader as S, Panel as Sn, MessageItemSenderBadges as St, MessageQuotedPreviewThread as T, PanelHeaderRoot as Tn, MessageItemTime as Tt, MessageReferencePending as U, TooltipTrigger as Un, AvatarImage as Ut, MessageReferenceIndicator as V, TooltipPortal as Vn, AvatarGroup as Vt, MessageReferenceSuffix as W, TextLink as Wn, SegmentedControl as Wt, MessageReactionErrorIndicator as X, DialogContent as Xn, useOverflowTitle as Xt, MessageReactionCount as Y, DialogClose as Yn, SegmentedControlNav as Yt, MessageReactionGlyph as Z, DialogDescription as Zn, measureContent as Zt, MessageQuotedPreviewAuthorDelegatedBy as _, DropdownMenuSubmenu as _n, controlIconInset as _r, MessageItemDelegatedByName as _t, MessageListJumpPill as a, DropdownMenuFooter as an, DialogTrigger as ar, MessageReactionTooltipNameText as at, MessageQuotedPreviewChannel as b, Kbd as bn, decisionWidth as br, MessageItemMeta as bt, MessageListDateDivider as c, DropdownMenuItemLabel as cn, Spinner as cr, MessageItemBadge as ct, MessageListNotice as d, DropdownMenuPortal as dn, withOverlayLayer as dr, MessageItemSavedIndicator as dt, readNow as en, DialogNav as er, MessageReactionQuickButton as et, MessageList as f, DropdownMenuRadioGroup as fn, resolveThemeScopeProps as fr, MessageItemToolbar as ft, MessageQuotedPreviewAuthor as g, DropdownMenuShortcut as gn, tv$1 as gr, MessageItemDelegatedByButton as gt, MessageQuotedPreviewAttachments as h, DropdownMenuSeparator as hn, ThemeStateContext as hr, MessageItemDelegatedBy as ht, MessageListJumpControls as i, DropdownMenuContent as in, DialogTitle as ir, MessageReactionTooltipName as it, MessageEmbedHeader as j, ScrollAreaCorner as jn, MessageItemFooter as jt, MessageEmbedContent as k, ScrollArea$1 as kn, MessageItemEdited as kt, MessageListEndFade as l, DropdownMenuLabel as ln, defaultNativeButton as lr, MessageItemBadgeSeparator as lt, MessageQuotedPreviewAttachment as m, DropdownMenuRadioItemIndicator as mn, useTheme as mr, MessageItemDelegatedAvatar as mt, useHoldThenMoveTouchSensor as n, DropdownMenuCheckboxItem as nn, DialogPortal as nr, MessageReactionTooltipContent as nt, MessageListJumpPillDismiss as o, DropdownMenuItem as on, Button$1 as or, MessageReactionTooltipNames as ot, MessageQuotedPreview as p, DropdownMenuRadioItem as pn, useThemeScopeProps as pr, MessageItemToolbarButton as pt, MessageReactionAddButton as q, Dialog$1 as qn, SegmentedControlLabel as qt, useMouseOnlyPointerSensor as r, DropdownMenuCheckboxItemIndicator as rn, DialogSurface as rr, MessageReactionTooltipMeta as rt, MessageListJumpPillGroup as s, DropdownMenuItemCount as sn, buttonVariants as sr, MessageReactionTooltipSeparator as st, inboxItem as t, DropdownMenu as tn, DialogOverlay as tr, MessageReactionQuickRow as tt, MessageListHistoryLimited as u, DropdownMenuPopup as un, useParentOverlayKind as ur, MessageItemReadReceipt as ut, MessageQuotedPreviewAuthorMeta as v, DropdownMenuSubmenuTrigger as vn, headEdgePull as vr, MessageItemHeader as vt, MessageQuotedPreviewText as w, PanelFooter as wn, MessageItemSenderGroup as wt, MessageQuotedPreviewContent as x, KbdGroup as xn, MessageItemSender as xt, MessageQuotedPreviewAuthorName as y, DropdownMenuTrigger as yn, headEdges as yr, MessageItemInlineStatus as yt, MessageMultiSelectToolbarActions as z, Tooltip$1 as zn, AvatarBadge as zt };

package/dist/{index-CP05_pvu.d.mts → index-jTmbN7ov.d.mts}

@@ -1,12 +1,14 @@
 import { Dialog } from "@base-ui/react/dialog";
 import { VariantProps } from "tailwind-variants/lite";
-import { CSSProperties, ComponentPropsWithRef, ElementType, ReactNode } from "react";
+import { CSSProperties, ComponentPropsWithRef, ElementType, ReactElement, ReactNode } from "react";
 import { Button } from "@base-ui/react/button";
 import { useRender } from "@base-ui/react/use-render";
 import { Tooltip } from "@base-ui/react/tooltip";
 import { Checkbox } from "@base-ui/react/checkbox";
 import { Avatar } from "@base-ui/react";
 import { Menu } from "@base-ui/react/menu";
+import { Radio } from "@base-ui/react/radio";
+import { RadioGroup } from "@base-ui/react/radio-group";
 import { Toggle } from "@base-ui/react/toggle";
 import { Toolbar } from "@base-ui/react/toolbar";
 //#region src/lib/styled-props.d.ts
@@ -609,6 +611,51 @@ type TooltipContentProps = StyledProps<Tooltip.Popup.Props> & Pick<Tooltip.Posit
 };
 declare function TooltipContent({ align, alignOffset, anchor, arrowPadding, collisionAvoidance, collisionBoundary, collisionPadding, disableAnchorTracking, positionMethod, side, sideOffset, sticky, container, portalProps, className, children, ...props }: TooltipContentProps): import("react").JSX.Element;
 //#endregion
+//#region src/components/segmented-control/segmented-control.d.ts
+/**
+ * Container widths (Tailwind's `@xs` 20rem to `@2xl` 42rem) below which the
+ * segments show only their icons.
+ */
+type SegmentedControlIconsOnlyBelow = "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
+type SegmentedControlProps<T extends string = string> = StyledProps<RadioGroup.Props<T>> & {
+  /**
+   * When the nearest `@container` ancestor (the row the control sits in) is
+   * narrower than this width, every segment shows only its icon (give each
+   * one). Its label stays the accessible name and shows in a tooltip.
+   */
+  iconsOnlyBelow?: SegmentedControlIconsOnlyBelow;
+  /** `on-frame` in the yellow frame; see `SegmentedControlNav`. */
+  variant?: "default" | "on-frame";
+};
+declare function SegmentedControl<T extends string = string>({ disabled, iconsOnlyBelow, variant, className, ...props }: SegmentedControlProps<T>): import("react").JSX.Element;
+type SegmentedControlItemProps<T extends string = string> = StyledProps<Radio.Root.Props<T>>;
+declare function SegmentedControlItem<T extends string = string>({ className, ...props }: SegmentedControlItemProps<T>): import("react").JSX.Element;
+type SegmentedControlLabelProps = ComponentPropsWithRef<"span">;
+declare function SegmentedControlLabel({ className, ...props }: SegmentedControlLabelProps): import("react").JSX.Element;
+type SegmentedControlCountProps = ComponentPropsWithRef<"span">;
+declare function SegmentedControlCount({ className, ...props }: SegmentedControlCountProps): import("react").JSX.Element;
+type SegmentedControlNavProps = ComponentPropsWithRef<"nav"> & {
+  /**
+   * `on-frame` in the frame (a top bar): the track the frame's medium fill and
+   * the current segment in the frame's active colours (white on the yellow
+   * frame, yellow on the dark one), since a yellow sticker on yellow would
+   * not read as selected.
+   */
+  variant?: "default" | "on-frame";
+};
+/**
+ * The same track for choices that are places, not values: each segment is a
+ * link to another URL (a language, a version of the page), so it can be
+ * opened in a new tab and copied. Name it with `aria-label`.
+ */
+declare function SegmentedControlNav({ variant, className, ...props }: SegmentedControlNavProps): import("react").JSX.Element;
+type SegmentedControlLinkProps = useRender.ComponentProps<"a"> & {
+  /** The segment for the page being shown: `aria-current="page"`, drawn as the selected segment. */
+  current?: boolean;
+};
+/** One segment of a `SegmentedControlNav`: a link, `<a>` unless `render` gives a router link. */
+declare function SegmentedControlLink({ current, className, render, ...props }: SegmentedControlLinkProps): ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+//#endregion
 //#region src/components/avatar/avatar.d.ts
 declare const avatar: import("tailwind-variants/lite").TVReturnType<{
   type: {
@@ -1040,6 +1087,10 @@ type MessageReferenceChipProps = SpanProps$1 & {
 declare function MessageReferenceChip({ className, render, variant, ...props }: MessageReferenceChipProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 type MessageReferenceLabelProps = useRender.ComponentProps<"span">;
 declare function MessageReferenceLabel({ className, render, ...props }: MessageReferenceLabelProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+type MessageReferenceSuffixProps = useRender.ComponentProps<"span">;
+/** A short note after a chip's label in muted machine type, such as `msg` on a
+ *  link to a message. It lines up with the label by the middle of its letters. */
+declare function MessageReferenceSuffix({ className, render, ...props }: MessageReferenceSuffixProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 type MessageReferencePendingProps = SpanProps$1;
 declare function MessageReferencePending({ className, render, ...props }: MessageReferencePendingProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 type MessageReferenceUnavailableProps = SpanProps$1;
@@ -1119,6 +1170,8 @@ type MessageListNoticeProps = useRender.ComponentProps<"div"> & {
 declare function MessageListNotice({ className, render, tone, ...props }: MessageListNoticeProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 type MessageListHistoryLimitedProps = useRender.ComponentProps<"span">;
 declare function MessageListHistoryLimited({ className, render, ...props }: MessageListHistoryLimitedProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+type MessageListEndFadeProps = useRender.ComponentProps<"div">;
+declare function MessageListEndFade({ className, render, ...props }: MessageListEndFadeProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 //#endregion
 //#region src/components/message-list/message-list-jump.d.ts
 type MessageListJumpControlsProps = useRender.ComponentProps<"div"> & {
@@ -1137,4 +1190,4 @@ type MessageListJumpPillDismissProps = StyledProps<Button.Props> & DataAttribute
 };
 declare function MessageListJumpPillDismiss({ className, children, render, nativeButton, ...props }: MessageListJumpPillDismissProps): import("react").JSX.Element;
 //#endregion
-export { MessageMultiSelect as $, DeprecatedButtonSize as $i, MessageItemGutterProps as $n, DropdownMenuRadioItemProps as $r, MessageItemBadgeSeparator as $t, MessageQuotedPreviewChannel as A, DialogContentProps as Ai, MessageItemSenderGroupProps as An, DropdownMenuCheckboxItemProps as Ar, MessageReactionGlyphProps as At, MessageQuotedPreviewTextProps as B, DialogOverlayProps as Bi, MessageItemEdited as Bn, DropdownMenuItemProps as Br, MessageReactionTooltipContentProps as Bt, MessageQuotedPreviewAuthorDelegatedBy as C, textLinkVariants as Ci, MessageItemMetaProps as Cn, TooltipProviderProps as Cr, MessageReactionChip as Ct, MessageQuotedPreviewAuthorName as D, DialogClose as Di, MessageItemSenderButton as Dn, DropdownMenuCheckboxItem as Dr, MessageReactionErrorIndicator as Dt, MessageQuotedPreviewAuthorMetaProps as E, DialogBodyProps as Ei, MessageItemSenderBadgesProps as En, DropdownMenu as Er, MessageReactionCountProps as Et, MessageQuotedPreviewHeaderProps as F, DialogHeader as Fi, MessageItemAttachmentsProps as Fn, DropdownMenuItem as Fr, MessageReactionQuickButton as Ft, MessageQuotedPreviewUnavailable as G, DialogSurfaceProps as Gi, MessageItemFooterProps as Gn, DropdownMenuPortal as Gr, MessageReactionTooltipNameText as Gt, MessageQuotedPreviewThreadProps as H, DialogPortalProps as Hi, MessageItemEmbedded as Hn, DropdownMenuLabelProps as Hr, MessageReactionTooltipMetaProps as Ht, MessageQuotedPreviewLoading as I, DialogHeaderProps as Ii, MessageItemBody as In, DropdownMenuItemCount as Ir, MessageReactionQuickButtonProps as It, MessageTextSelectionToolbarButton as J, DialogTrigger as Ji, MessageItemAvatarSlot as Jn, DropdownMenuRadioGroup as Jr, MessageReactionTooltipNamesProps as Jt, MessageQuotedPreviewUnavailableProps as K, DialogTitle as Ki, MessageItemSearchMatch as Kn, DropdownMenuPortalProps as Kr, MessageReactionTooltipNameTextProps as Kt, MessageQuotedPreviewLoadingProps as L, DialogNav as Li, MessageItemBodyProps as Ln, DropdownMenuItemCountProps as Lr, MessageReactionQuickRow as Lt, MessageQuotedPreviewContent as M, DialogDescriptionProps as Mi, MessageItemTime as Mn, DropdownMenuContentProps as Mr, MessageReactionPickerContentProps as Mt, MessageQuotedPreviewContentProps as N, DialogFooter as Ni, MessageItemTimeProps as Nn, DropdownMenuFooter as Nr, MessageReactionPickerStatic as Nt, MessageQuotedPreviewAuthorNameProps as O, DialogCloseProps as Oi, MessageItemSenderButtonProps as On, DropdownMenuCheckboxItemIndicator as Or, MessageReactionErrorIndicatorProps as Ot, MessageQuotedPreviewHeader as P, DialogFooterProps as Pi, MessageItemAttachments as Pn, DropdownMenuFooterProps as Pr, MessageReactionPickerStaticProps as Pt, MessageTextSelectionToolbarSeparatorProps as Q, ButtonSize as Qi, MessageItemGutter as Qn, DropdownMenuRadioItemIndicatorProps as Qr, MessageItemBadgeProps as Qt, MessageQuotedPreviewProps as R, DialogNavProps as Ri, MessageItemContent as Rn, DropdownMenuItemLabel as Rr, MessageReactionQuickRowProps as Rt, MessageQuotedPreviewAuthor as S, TextLinkProps as Si, MessageItemMeta as Sn, TooltipProvider as Sr, MessageReactionAddButtonProps as St, MessageQuotedPreviewAuthorMeta as T, DialogBody as Ti, MessageItemSenderBadges as Tn, TooltipTriggerProps as Tr, MessageReactionCount as Tt, MessageQuotedPreviewTimestamp as U, DialogProps as Ui, MessageItemEmbeddedProps as Un, DropdownMenuPopup as Ur, MessageReactionTooltipName as Ut, MessageQuotedPreviewThread as V, DialogPortal as Vi, MessageItemEditedProps as Vn, DropdownMenuLabel as Vr, MessageReactionTooltipMeta as Vt, MessageQuotedPreviewTimestampProps as W, DialogSurface as Wi, MessageItemFooter as Wn, DropdownMenuPopupProps as Wr, MessageReactionTooltipNameProps as Wt, MessageTextSelectionToolbarProps as X, Button$1 as Xi, MessageItemContinuationTime as Xn, DropdownMenuRadioItem as Xr, MessageReactionTooltipSeparatorProps as Xt, MessageTextSelectionToolbarButtonProps as Y, DialogTriggerProps as Yi, MessageItemAvatarSlotProps as Yn, DropdownMenuRadioGroupProps as Yr, MessageReactionTooltipSeparator as Yt, MessageTextSelectionToolbarSeparator as Z, ButtonProps as Zi, MessageItemContinuationTimeProps as Zn, DropdownMenuRadioItemIndicator as Zr, MessageItemBadge as Zt, MessageQuotedPreview as _, CheckboxIndicatorProps as _i, MessageItemDelegatedByProps as _n, TooltipContent as _r, MessageReferenceUnavailable as _t, MessageListJumpPillDismissProps as a, DropdownMenuSubmenuProps as ai, MessageItemSavedIndicatorProps as an, AvatarBadgeProps as ar, MessageMultiSelectToolbarActionsProps as at, MessageQuotedPreviewAttachments as b, Presence as bi, MessageItemInlineStatus as bn, TooltipPortalProps as br, MessageReferenceTextVariant as bt, MessageListJumpPillProps as c, DropdownMenuTrigger as ci, MessageItemToolbarButtonProps as cn, AvatarGroup as cr, MessageReferenceChipProps as ct, MessageListHistoryLimited as d, KbdGroup as di, MessageItemDelegatedAvatarProps as dn, AvatarGroupProps as dr, MessageReferenceLabel as dt, buttonVariants as ea, DropdownMenuSeparator as ei, MessageItemBadgeSeparatorProps as en, MessageItem as er, MessageMultiSelectCheckbox as et, MessageListHistoryLimitedProps as f, KbdGroupProps as fi, MessageItemDelegatedBy as fn, AvatarImage as fr, MessageReferenceLabelProps as ft, MessageListProps as g, CheckboxIndicator as gi, MessageItemDelegatedByNameProps as gn, Tooltip$1 as gr, MessageReferenceTextProps as gt, MessageList as h, BadgeProps as hi, MessageItemDelegatedByName as hn, AvatarSize as hr, MessageReferenceText as ht, MessageListJumpPillDismiss as i, DropdownMenuSubmenu as ii, MessageItemSavedIndicator as in, AvatarBadgeOffset as ir, MessageMultiSelectToolbarActions as it, MessageQuotedPreviewChannelProps as j, DialogDescription as ji, MessageItemSenderProps as jn, DropdownMenuContent as jr, MessageReactionPickerContent as jt, MessageQuotedPreviewAuthorProps as k, DialogContent as ki, MessageItemSenderGroup as kn, DropdownMenuCheckboxItemIndicatorProps as kr, MessageReactionGlyph as kt, MessageListDateDivider as l, DropdownMenuTriggerProps as li, MessageItemToolbarProps as ln, AvatarGroupCount as lr, MessageReferenceIndicator as lt, MessageListNoticeProps as m, Badge as mi, MessageItemDelegatedByButtonProps as mn, AvatarProps as mr, MessageReferencePendingProps as mt, MessageListJumpControlsProps as n, DataAttributes as na, DropdownMenuShortcut as ni, MessageItemReadReceipt as nn, Avatar$1 as nr, MessageMultiSelectProps as nt, MessageListJumpPillGroup as o, DropdownMenuSubmenuTrigger as oi, MessageItemToolbar as on, AvatarFallback as or, MessageMultiSelectToolbarProps as ot, MessageListNotice as p, KbdProps as pi, MessageItemDelegatedByButton as pn, AvatarImageProps as pr, MessageReferencePending as pt, MessageTextSelectionToolbar as q, DialogTitleProps as qi, MessageItemSearchMatchProps as qn, DropdownMenuProps as qr, MessageReactionTooltipNames as qt, MessageListJumpPill as r, StyledProps as ra, DropdownMenuShortcutProps as ri, MessageItemReadReceiptProps as rn, AvatarBadge as rr, MessageMultiSelectToolbar as rt, MessageListJumpPillGroupProps as s, DropdownMenuSubmenuTriggerProps as si, MessageItemToolbarButton as sn, AvatarFallbackProps as sr, MessageReferenceChip as st, MessageListJumpControls as t, VariantProps as ta, DropdownMenuSeparatorProps as ti, MessageItemBadgeStatus as tn, MessageItemProps as tr, MessageMultiSelectCheckboxProps as tt, MessageListDateDividerProps as u, Kbd as ui, MessageItemDelegatedAvatar as un, AvatarGroupCountProps as ur, MessageReferenceIndicatorProps as ut, MessageQuotedPreviewAttachment as v, Checkbox$1 as vi, MessageItemHeader as vn, TooltipContentProps as vr, MessageReferenceUnavailableProps as vt, MessageQuotedPreviewAuthorDelegatedByProps as w, Dialog$1 as wi, MessageItemSender as wn, TooltipTrigger as wr, MessageReactionChipProps as wt, MessageQuotedPreviewAttachmentsProps as x, TextLink as xi, MessageItemInlineStatusProps as xn, TooltipProps as xr, MessageReactionAddButton as xt, MessageQuotedPreviewAttachmentProps as y, CheckboxProps as yi, MessageItemHeaderProps as yn, TooltipPortal as yr, MessageReferenceChipVariant as yt, MessageQuotedPreviewText as z, DialogOverlay as zi, MessageItemContentProps as zn, DropdownMenuItemLabelProps as zr, MessageReactionTooltipContent as zt };
+export { MessageTextSelectionToolbarSeparator as $, DialogHeaderProps as $i, MessageItemAvatarSlotProps as $n, DropdownMenuItemCount as $r, MessageReactionTooltipSeparator as $t, MessageQuotedPreviewAuthorNameProps as A, KbdProps as Ai, MessageItemSenderBadgesProps as An, SegmentedControlNav as Ar, MessageReactionCountProps as At, MessageQuotedPreviewProps as B, textLinkVariants as Bi, MessageItemBody as Bn, TooltipProviderProps as Br, MessageReactionQuickButtonProps as Bt, MessageQuotedPreviewAttachmentsProps as C, DropdownMenuSubmenuTrigger as Ci, MessageItemHeaderProps as Cn, SegmentedControlIconsOnlyBelow as Cr, MessageReferenceChipVariant as Ct, MessageQuotedPreviewAuthorMeta as D, Kbd as Di, MessageItemMetaProps as Dn, SegmentedControlLabelProps as Dr, MessageReactionChip as Dt, MessageQuotedPreviewAuthorDelegatedByProps as E, DropdownMenuTriggerProps as Ei, MessageItemMeta as En, SegmentedControlLabel as Er, MessageReactionAddButtonProps as Et, MessageQuotedPreviewContentProps as F, Checkbox$1 as Fi, MessageItemSenderProps as Fn, TooltipContentProps as Fr, MessageReactionPickerContent as Ft, MessageQuotedPreviewTimestamp as G, DialogCloseProps as Gi, MessageItemEditedProps as Gn, DropdownMenuCheckboxItemIndicator as Gr, MessageReactionTooltipMeta as Gt, MessageQuotedPreviewTextProps as H, DialogBody as Hi, MessageItemContent as Hn, TooltipTriggerProps as Hr, MessageReactionQuickRowProps as Ht, MessageQuotedPreviewHeader as I, CheckboxProps as Ii, MessageItemTime as In, TooltipPortal as Ir, MessageReactionPickerContentProps as It, MessageQuotedPreviewUnavailableProps as J, DialogDescription as Ji, MessageItemFooter as Jn, DropdownMenuContent as Jr, MessageReactionTooltipNameProps as Jt, MessageQuotedPreviewTimestampProps as K, DialogContent as Ki, MessageItemEmbedded as Kn, DropdownMenuCheckboxItemIndicatorProps as Kr, MessageReactionTooltipMetaProps as Kt, MessageQuotedPreviewHeaderProps as L, Presence as Li, MessageItemTimeProps as Ln, TooltipPortalProps as Lr, MessageReactionPickerStatic as Lt, MessageQuotedPreviewChannel as M, BadgeProps as Mi, MessageItemSenderButtonProps as Mn, SegmentedControlProps as Mr, MessageReactionErrorIndicatorProps as Mt, MessageQuotedPreviewChannelProps as N, CheckboxIndicator as Ni, MessageItemSenderGroup as Nn, Tooltip$1 as Nr, MessageReactionGlyph as Nt, MessageQuotedPreviewAuthorMetaProps as O, KbdGroup as Oi, MessageItemSender as On, SegmentedControlLink as Or, MessageReactionChipProps as Ot, MessageQuotedPreviewContent as P, CheckboxIndicatorProps as Pi, MessageItemSenderGroupProps as Pn, TooltipContent as Pr, MessageReactionGlyphProps as Pt, MessageTextSelectionToolbarProps as Q, DialogHeader as Qi, MessageItemAvatarSlot as Qn, DropdownMenuItem as Qr, MessageReactionTooltipNamesProps as Qt, MessageQuotedPreviewLoading as R, TextLink as Ri, MessageItemAttachments as Rn, TooltipProps as Rr, MessageReactionPickerStaticProps as Rt, MessageQuotedPreviewAttachments as S, DropdownMenuSubmenuProps as Si, MessageItemHeader as Sn, SegmentedControlCountProps as Sr, MessageReferenceUnavailableProps as St, MessageQuotedPreviewAuthorDelegatedBy as T, DropdownMenuTrigger as Ti, MessageItemInlineStatusProps as Tn, SegmentedControlItemProps as Tr, MessageReactionAddButton as Tt, MessageQuotedPreviewThread as U, DialogBodyProps as Ui, MessageItemContentProps as Un, DropdownMenu as Ur, MessageReactionTooltipContent as Ut, MessageQuotedPreviewText as V, Dialog$1 as Vi, MessageItemBodyProps as Vn, TooltipTrigger as Vr, MessageReactionQuickRow as Vt, MessageQuotedPreviewThreadProps as W, DialogClose as Wi, MessageItemEdited as Wn, DropdownMenuCheckboxItem as Wr, MessageReactionTooltipContentProps as Wt, MessageTextSelectionToolbarButton as X, DialogFooter as Xi, MessageItemSearchMatch as Xn, DropdownMenuFooter as Xr, MessageReactionTooltipNameTextProps as Xt, MessageTextSelectionToolbar as Y, DialogDescriptionProps as Yi, MessageItemFooterProps as Yn, DropdownMenuContentProps as Yr, MessageReactionTooltipNameText as Yt, MessageTextSelectionToolbarButtonProps as Z, DialogFooterProps as Zi, MessageItemSearchMatchProps as Zn, DropdownMenuFooterProps as Zr, MessageReactionTooltipNames as Zt, MessageList as _, buttonVariants as _a, DropdownMenuSeparator as _i, MessageItemDelegatedByButton as _n, AvatarImageProps as _r, MessageReferenceSuffix as _t, MessageListJumpPillDismissProps as a, DialogPortalProps as aa, DropdownMenuLabelProps as ai, MessageItemBadgeStatus as an, MessageItemProps as ar, MessageMultiSelectToolbar as at, MessageQuotedPreviewAttachment as b, StyledProps as ba, DropdownMenuShortcutProps as bi, MessageItemDelegatedByNameProps as bn, SegmentedControl as br, MessageReferenceTextProps as bt, MessageListJumpPillProps as c, DialogSurfaceProps as ca, DropdownMenuPortal as ci, MessageItemSavedIndicator as cn, AvatarBadgeOffset as cr, MessageMultiSelectToolbarProps as ct, MessageListEndFade as d, DialogTrigger as da, DropdownMenuRadioGroup as di, MessageItemToolbarButton as dn, AvatarFallbackProps as dr, MessageReferenceIndicator as dt, DialogNav as ea, DropdownMenuItemCountProps as ei, MessageReactionTooltipSeparatorProps as en, MessageItemContinuationTime as er, MessageTextSelectionToolbarSeparatorProps as et, MessageListEndFadeProps as f, DialogTriggerProps as fa, DropdownMenuRadioGroupProps as fi, MessageItemToolbarButtonProps as fn, AvatarGroup as fr, MessageReferenceIndicatorProps as ft, MessageListNoticeProps as g, DeprecatedButtonSize as ga, DropdownMenuRadioItemProps as gi, MessageItemDelegatedBy as gn, AvatarImage as gr, MessageReferencePendingProps as gt, MessageListNotice as h, ButtonSize as ha, DropdownMenuRadioItemIndicatorProps as hi, MessageItemDelegatedAvatarProps as hn, AvatarGroupProps as hr, MessageReferencePending as ht, MessageListJumpPillDismiss as i, DialogPortal as ia, DropdownMenuLabel as ii, MessageItemBadgeSeparatorProps as in, MessageItem as ir, MessageMultiSelectProps as it, MessageQuotedPreviewAuthorProps as j, Badge as ji, MessageItemSenderButton as jn, SegmentedControlNavProps as jr, MessageReactionErrorIndicator as jt, MessageQuotedPreviewAuthorName as k, KbdGroupProps as ki, MessageItemSenderBadges as kn, SegmentedControlLinkProps as kr, MessageReactionCount as kt, MessageListDateDivider as l, DialogTitle as la, DropdownMenuPortalProps as li, MessageItemSavedIndicatorProps as ln, AvatarBadgeProps as lr, MessageReferenceChip as lt, MessageListHistoryLimitedProps as m, ButtonProps as ma, DropdownMenuRadioItemIndicator as mi, MessageItemDelegatedAvatar as mn, AvatarGroupCountProps as mr, MessageReferenceLabelProps as mt, MessageListJumpControlsProps as n, DialogOverlay as na, DropdownMenuItemLabelProps as ni, MessageItemBadgeProps as nn, MessageItemGutter as nr, MessageMultiSelectCheckbox as nt, MessageListJumpPillGroup as o, DialogProps as oa, DropdownMenuPopup as oi, MessageItemReadReceipt as on, Avatar$1 as or, MessageMultiSelectToolbarActions as ot, MessageListHistoryLimited as p, Button$1 as pa, DropdownMenuRadioItem as pi, MessageItemToolbarProps as pn, AvatarGroupCount as pr, MessageReferenceLabel as pt, MessageQuotedPreviewUnavailable as q, DialogContentProps as qi, MessageItemEmbeddedProps as qn, DropdownMenuCheckboxItemProps as qr, MessageReactionTooltipName as qt, MessageListJumpPill as r, DialogOverlayProps as ra, DropdownMenuItemProps as ri, MessageItemBadgeSeparator as rn, MessageItemGutterProps as rr, MessageMultiSelectCheckboxProps as rt, MessageListJumpPillGroupProps as s, DialogSurface as sa, DropdownMenuPopupProps as si, MessageItemReadReceiptProps as sn, AvatarBadge as sr, MessageMultiSelectToolbarActionsProps as st, MessageListJumpControls as t, DialogNavProps as ta, DropdownMenuItemLabel as ti, MessageItemBadge as tn, MessageItemContinuationTimeProps as tr, MessageMultiSelect as tt, MessageListDateDividerProps as u, DialogTitleProps as ua, DropdownMenuProps as ui, MessageItemToolbar as un, AvatarFallback as ur, MessageReferenceChipProps as ut, MessageListProps as v, VariantProps as va, DropdownMenuSeparatorProps as vi, MessageItemDelegatedByButtonProps as vn, AvatarProps as vr, MessageReferenceSuffixProps as vt, MessageQuotedPreviewAuthor as w, DropdownMenuSubmenuTriggerProps as wi, MessageItemInlineStatus as wn, SegmentedControlItem as wr, MessageReferenceTextVariant as wt, MessageQuotedPreviewAttachmentProps as x, DropdownMenuSubmenu as xi, MessageItemDelegatedByProps as xn, SegmentedControlCount as xr, MessageReferenceUnavailable as xt, MessageQuotedPreview as y, DataAttributes as ya, DropdownMenuShortcut as yi, MessageItemDelegatedByName as yn, AvatarSize as yr, MessageReferenceText as yt, MessageQuotedPreviewLoadingProps as z, TextLinkProps as zi, MessageItemAttachmentsProps as zn, TooltipProvider as zr, MessageReactionQuickButton as zt };