@botiverse/raft-ui 0.11.0 → 0.13.0

package/dist/message-list-DP03T8gF.mjs

@@ -0,0 +1,3224 @@
+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 { 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";
+import { useRender } from "@base-ui/react/use-render";
+import { Tooltip } from "@base-ui/react/tooltip";
+import { Checkbox } from "@base-ui/react/checkbox";
+import { ScrollArea } from "@base-ui/react/scroll-area";
+import { Avatar } from "@base-ui/react";
+import { Menu } from "@base-ui/react/menu";
+import { Toggle } from "@base-ui/react/toggle";
+import { Toolbar } from "@base-ui/react/toolbar";
+//#region src/lib/tv.ts
+const tv$1 = ((options) => {
+	const recipe = tv(options);
+	const wrappedRecipe = ((props) => {
+		const result = recipe(props);
+		if (result == null || typeof result === "string") return cn(result);
+		return Object.fromEntries(Object.entries(result).map(([slotName, slot]) => [slotName, (slotProps) => cn(slot(slotProps))]));
+	});
+	return Object.assign(wrappedRecipe, recipe);
+});
+//#endregion
+//#region src/lib/theme/theme-context.ts
+const ThemeStateContext = createContext({
+	mode: "light",
+	resolvedMode: "light",
+	setMode: () => void 0
+});
+//#endregion
+//#region src/lib/theme/use-theme.ts
+/** Read and update the colour mode. */
+function useTheme() {
+	return use(ThemeStateContext);
+}
+//#endregion
+//#region src/lib/theme/theme-scope.ts
+/**
+* Carry the provider's resolved mode (`light` / `dark`) onto content that
+* renders outside its subtree (a portal), so a dark island's popup stays dark.
+*/
+function resolveThemeScopeProps({ className, ...props }, { resolvedMode }) {
+	const resolvedClassName = typeof className === "function" ? (state) => cn(className(state), resolvedMode) : typeof className === "string" ? cn(className, resolvedMode) : className ?? resolvedMode;
+	return {
+		...props,
+		className: resolvedClassName
+	};
+}
+function useThemeScopeProps(props) {
+	return resolveThemeScopeProps(props, useTheme());
+}
+//#endregion
+//#region src/lib/overlay-depth.tsx
+const OverlayStackContext = createContext([]);
+function OverlayLayerProvider({ kind, modal, children }) {
+	const stack = useContext(OverlayStackContext);
+	const value = useMemo(() => modal ? [...stack, kind] : stack, [
+		stack,
+		kind,
+		modal
+	]);
+	return /* @__PURE__ */ jsx(OverlayStackContext.Provider, {
+		value,
+		children
+	});
+}
+/**
+* The modal surface this overlay's own surface was opened from, or null when
+* it is the first. Called inside a surface, so the last entry is the surface
+* itself and the one before it is its parent.
+*/
+function useParentOverlayKind() {
+	const stack = useContext(OverlayStackContext);
+	return stack.length >= 2 ? stack[stack.length - 2] : null;
+}
+/**
+* Wraps a dialog or drawer root's children in its layer. Base UI lets those
+* children be a render function (`({ payload }) => …`), so keep that shape.
+*/
+function withOverlayLayer(kind, modal, children) {
+	if (typeof children === "function") return (...args) => /* @__PURE__ */ jsx(OverlayLayerProvider, {
+		kind,
+		modal,
+		children: children(...args)
+	});
+	return /* @__PURE__ */ jsx(OverlayLayerProvider, {
+		kind,
+		modal,
+		children
+	});
+}
+//#endregion
+//#region src/lib/default-native-button.ts
+function defaultNativeButton(render) {
+	if (!render || typeof render !== "object" || !("type" in render)) return;
+	const element = render;
+	if (typeof element.type === "string") return element.type === "button";
+}
+//#endregion
+//#region src/components/spinner/spinner.tsx
+const SPINNER_STYLE = `
+@keyframes raft-spinner-pixel {
+  0%,
+  24% {
+    opacity: 1;
+  }
+  25%,
+  100% {
+    opacity: 0.2;
+  }
+}
+
+[data-slot="spinner"] [data-spinner-pixel] {
+  animation: raft-spinner-pixel 1s steps(1) infinite;
+}
+
+[data-slot="spinner"] [data-spinner-pixel]:nth-child(2) {
+  animation-delay: 0.25s;
+}
+
+[data-slot="spinner"] [data-spinner-pixel]:nth-child(4) {
+  animation-delay: 0.5s;
+}
+
+[data-slot="spinner"] [data-spinner-pixel]:nth-child(3) {
+  animation-delay: 0.75s;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-slot="spinner"] [data-spinner-pixel] {
+    animation: none;
+  }
+
+  [data-slot="spinner"] [data-spinner-pixel]:first-child {
+    opacity: 1;
+  }
+}
+`;
+const spinner = tv$1({
+	slots: {
+		root: [
+			"relative inline-flex shrink-0 items-center justify-center",
+			"leading-none text-current",
+			"[--spinner-pixel:5px] [--spinner-gap:2px]"
+		],
+		ring: ["shrink-0", "grid size-auto grid-cols-[repeat(2,var(--spinner-pixel))] gap-(--spinner-gap)"],
+		pixel: ["block size-(--spinner-pixel) rounded-[1px] bg-current opacity-20"]
+	},
+	variants: {
+		size: {
+			xs: { root: ["[--spinner-pixel:4px] [--spinner-gap:1.5px]"] },
+			sm: {},
+			md: { root: ["[--spinner-pixel:6px] [--spinner-gap:2px]"] },
+			lg: { root: ["[--spinner-pixel:8px] [--spinner-gap:3px]"] }
+		},
+		variant: {
+			default: {},
+			inverse: { root: ["text-foreground-inverse"] }
+		}
+	},
+	defaultVariants: { size: "sm" }
+});
+const spinnerStyle = /* @__PURE__ */ jsx("style", {
+	href: "raft-ui-spinner",
+	precedence: "default",
+	children: SPINNER_STYLE
+});
+function Spinner({ size = "sm", variant = "default", className, render, ...props }) {
+	const { root, ring, pixel } = spinner({
+		size,
+		variant
+	});
+	const children = /* @__PURE__ */ jsxs(Fragment$1, { children: [spinnerStyle, /* @__PURE__ */ jsxs("span", {
+		"data-spinner-grid": "",
+		"aria-hidden": "true",
+		className: ring(),
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				"data-spinner-pixel": "",
+				className: pixel()
+			}),
+			/* @__PURE__ */ jsx("span", {
+				"data-spinner-pixel": "",
+				className: pixel()
+			}),
+			/* @__PURE__ */ jsx("span", {
+				"data-spinner-pixel": "",
+				className: pixel()
+			}),
+			/* @__PURE__ */ jsx("span", {
+				"data-spinner-pixel": "",
+				className: pixel()
+			})
+		]
+	})] });
+	const defaultProps = {
+		role: "status",
+		"aria-label": "Loading",
+		className: root({ className }),
+		children
+	};
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: {
+			slot: "spinner",
+			size
+		}
+	});
+}
+//#endregion
+//#region src/components/button/button.tsx
+const sticker = (fill) => [`border-sticker-ink ${fill} text-sticker-ink ring-[1.5px] ring-sticker-edge`, "hover:press-overlay-sticker active:press-overlay-sticker"];
+const outline = (ink) => [`border-line-strong bg-layer-card ${ink}`, "hover:press-overlay active:press-overlay"];
+const textMd = [
+	"h-8 gap-2 rounded-control px-3 py-0 text-control",
+	"has-data-[icon=inline-start]:pl-2.5 has-data-[icon=inline-end]:pr-2.5",
+	"[&_svg:not([class*='size-'])]:size-4 **:data-icon:size-[1em]",
+	"after:absolute after:inset-x-0 after:-inset-y-[calc(--spacing(1.5)+1.5px)]"
+];
+const iconMd = ["size-8 rounded-control p-0 [&_svg:not([class*='size-'])]:size-[18px]", "after:absolute after:-inset-[calc(--spacing(1.5)+1.5px)]"];
+const buttonVariants = tv$1({
+	slots: {
+		root: [
+			"relative inline-flex shrink-0 items-center justify-center",
+			"whitespace-nowrap select-none",
+			"rounded-none border-[1.5px] font-sans font-bold shadow-none",
+			"transition-colors duration-100",
+			"outline-[1px] outline-offset-2 outline-transparent focus-visible:outline-transparent",
+			"focus-visible:shadow-focus",
+			"data-[loading=true]:cursor-wait data-[loading=true]:opacity-100",
+			"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+			"disabled:pointer-events-none aria-disabled:cursor-not-allowed",
+			"disabled:transform-none aria-disabled:transform-none",
+			"aria-disabled:hover:translate-none",
+			"aria-disabled:active:translate-none aria-disabled:active:scale-none",
+			"disabled:opacity-100 aria-disabled:opacity-100",
+			"disabled:border-line-hairline disabled:bg-fill-muted disabled:bg-none disabled:text-foreground-disabled disabled:ring-0",
+			"aria-disabled:border-line-hairline aria-disabled:bg-fill-muted aria-disabled:bg-none aria-disabled:text-foreground-disabled aria-disabled:ring-0"
+		],
+		content: "relative z-10 inline-flex items-center justify-center gap-[inherit] data-[loading=true]:invisible",
+		loadingIndicator: "pointer-events-none absolute inset-0 z-10 flex items-center justify-center"
+	},
+	variants: {
+		variant: {
+			primary: { root: sticker("bg-attention-400") },
+			accent: { root: sticker("bg-attention-400") },
+			warning: { root: sticker("bg-warning") },
+			danger: { root: sticker("bg-danger") },
+			default: { root: outline("text-foreground") },
+			outline: { root: outline("text-foreground") },
+			information: { root: outline("text-foreground") },
+			muted: { root: outline("text-foreground") },
+			success: { root: outline("text-foreground") },
+			"danger-secondary": { root: outline("text-danger-strong") },
+			"danger-outline": { root: outline("text-danger-strong") },
+			ghost: { root: ["border-transparent bg-transparent text-foreground", "hover:bg-fill-pressed active:bg-fill-pressed"] },
+			"on-frame": { root: [
+				"border-transparent bg-transparent text-foreground-on-frame",
+				"hover:bg-fill-frame-pressed active:bg-fill-frame-pressed",
+				"aria-expanded:bg-fill-frame-pressed data-popup-open:bg-fill-frame-pressed",
+				"disabled:border-transparent disabled:bg-transparent",
+				"aria-disabled:border-transparent aria-disabled:bg-transparent"
+			] }
+		},
+		size: {
+			xs: { root: textMd },
+			sm: { root: textMd },
+			md: { root: textMd },
+			lg: { root: [
+				"h-control gap-2 rounded-control px-4 py-0 text-subhead",
+				"has-data-[icon=inline-start]:pl-3.5 has-data-[icon=inline-end]:pr-3.5",
+				"[&_svg:not([class*='size-'])]:size-[18px] **:data-icon:size-[1em]",
+				"after:absolute after:inset-x-0 after:-inset-y-[calc(var(--spacing-control-hit)+1.5px)]"
+			] },
+			xl: { root: ["h-control-cta gap-2 rounded-control px-5 py-0 text-body", "[&_svg:not([class*='size-'])]:size-[18px] **:data-icon:size-[1em]"] },
+			"icon-xs": { root: iconMd },
+			"icon-sm": { root: iconMd },
+			"icon-md": { root: iconMd },
+			"icon-lg": { root: ["size-control rounded-control p-0 [&_svg:not([class*='size-'])]:size-control-icon", "after:absolute after:-inset-[calc(var(--spacing-control-hit)+1.5px)]"] }
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		size: "md"
+	},
+	compoundVariants: [
+		{
+			variant: "ghost",
+			size: [
+				"icon-xs",
+				"icon-sm",
+				"icon-md",
+				"icon-lg"
+			],
+			class: { root: ["disabled:border-transparent disabled:bg-transparent", "aria-disabled:border-transparent aria-disabled:bg-transparent"] }
+		},
+		{
+			variant: "on-frame",
+			size: [
+				"xs",
+				"sm",
+				"md"
+			],
+			class: { root: "h-9 px-2.5 text-subhead after:-inset-y-[calc(--spacing(1)+1.5px)]" }
+		},
+		{
+			variant: "on-frame",
+			size: [
+				"icon-xs",
+				"icon-sm",
+				"icon-md"
+			],
+			class: { root: "size-9 after:-inset-[calc(--spacing(1)+1.5px)] [&_svg:not([class*='size-'])]:size-5" }
+		}
+	]
+});
+function Button$1({ variant, size, loading = false, loadingLabel = "Loading", disabled, className, children, render, nativeButton, ...props }) {
+	const { root, content, loadingIndicator } = buttonVariants({
+		variant,
+		size
+	});
+	return /* @__PURE__ */ jsxs(Button, {
+		...props,
+		render,
+		nativeButton: nativeButton ?? defaultNativeButton(render),
+		"data-slot": "button",
+		className: root({ className }),
+		"data-loading": loading ? "true" : void 0,
+		disabled: disabled || loading,
+		...loading ? { "aria-disabled": true } : {},
+		children: [loading ? /* @__PURE__ */ jsx("span", {
+			"data-slot": "button-loading-indicator",
+			className: loadingIndicator(),
+			children: /* @__PURE__ */ jsx(Spinner, { "aria-label": loadingLabel })
+		}) : null, /* @__PURE__ */ jsx("span", {
+			"data-slot": "button-content",
+			"data-loading": loading ? "true" : void 0,
+			className: content(),
+			children
+		})]
+	});
+}
+//#endregion
+//#region src/components/dialog/dialog.tsx
+const dialog = tv$1({
+	slots: {
+		overlay: ["fixed inset-0 z-50 bg-layer-backdrop"],
+		content: [
+			"fixed top-1/2 left-1/2 z-50 flex w-[calc(100%-2rem)] -translate-1/2 flex-col",
+			"max-h-[calc(100dvh-2rem)] outline-none",
+			"overflow-clip rounded-dialog bg-layer-popover text-foreground",
+			"shadow-float ring-1 ring-line-seam"
+		],
+		header: ["grid shrink-0 grid-cols-[minmax(0,1fr)_max-content] items-center min-w-0", "gap-2 px-5 pt-5"],
+		body: [
+			"min-w-0 flex-1 overflow-y-auto",
+			"px-5 pt-1.5 pb-5 first:pt-5",
+			"font-sans text-subhead text-foreground-muted"
+		],
+		footer: ["flex shrink-0 items-center justify-end", "gap-2 px-5 pb-5 first:pt-5 [[data-slot=dialog-header]+&]:pt-5"],
+		title: ["m-0 min-w-0 text-foreground", "font-sans text-headline font-bold"],
+		description: ["m-0", "font-sans text-subhead text-foreground-muted"]
+	},
+	variants: {
+		size: {
+			sm: { content: ["max-w-sm"] },
+			md: { content: ["max-w-md"] },
+			lg: { content: ["max-w-lg"] },
+			wide: { content: ["max-w-4xl h-[min(760px,calc(100dvh-2rem))]"] }
+		},
+		bar: {
+			false: {},
+			true: {
+				header: ["flex h-14 shrink-0 items-center gap-2 border-b px-5 py-0", "border-line-seam pt-0 [&>[data-slot=dialog-close]]:my-0"],
+				body: ["flex min-h-0 flex-1 overflow-hidden p-0", "px-0 pt-0 pb-0 first:pt-0 text-foreground"],
+				footer: ["shrink-0 border-t px-5 py-3", "border-line-seam pt-3 pb-3 first:pt-3 [[data-slot=dialog-header]+&]:pt-3"]
+			}
+		},
+		layer: {
+			0: {
+				overlay: [],
+				content: []
+			},
+			1: {
+				overlay: ["z-60"],
+				content: ["z-60"]
+			}
+		},
+		nested: {
+			false: {},
+			true: { overlay: ["bg-layer-backdrop-nested"] }
+		}
+	},
+	defaultVariants: {
+		size: "md",
+		bar: false
+	}
+});
+function Dialog$1({ children, ...props }) {
+	return /* @__PURE__ */ jsx(Dialog.Root, {
+		"data-slot": "dialog",
+		...props,
+		children: withOverlayLayer("dialog", props.modal !== false, children)
+	});
+}
+function DialogTrigger(props) {
+	return /* @__PURE__ */ jsx(Dialog.Trigger, {
+		"data-slot": "dialog-trigger",
+		...props
+	});
+}
+function DialogPortal(props) {
+	return /* @__PURE__ */ jsx(Dialog.Portal, {
+		"data-slot": "dialog-portal",
+		...useThemeScopeProps(props)
+	});
+}
+function DialogOverlay({ className, layer, ...props }) {
+	const nested = useParentOverlayKind() != null;
+	const { overlay } = dialog({
+		layer,
+		nested
+	});
+	return /* @__PURE__ */ jsx(Dialog.Backdrop, {
+		"data-slot": "dialog-overlay",
+		"data-nested": nested ? "" : void 0,
+		forceRender: true,
+		className: overlay({ className }),
+		...props
+	});
+}
+function DialogContent({ className, children, portalProps, overlay, size, layer, ...props }) {
+	const { content } = dialog({
+		size,
+		layer
+	});
+	const overlayProps = typeof overlay === "object" ? overlay : {};
+	return /* @__PURE__ */ jsxs(DialogPortal, {
+		...portalProps,
+		children: [overlay === false ? null : /* @__PURE__ */ jsx(DialogOverlay, {
+			layer,
+			...overlayProps
+		}), /* @__PURE__ */ jsx(Dialog.Popup, {
+			"data-slot": "dialog-content",
+			className: content({ className }),
+			...props,
+			children
+		})]
+	});
+}
+function DialogClose({ className, variant, size, children, render, "aria-label": ariaLabel, ...props }) {
+	if (render) return /* @__PURE__ */ jsx(Dialog.Close, {
+		"data-slot": "dialog-close",
+		render,
+		"aria-label": ariaLabel,
+		...props,
+		children
+	});
+	return /* @__PURE__ */ jsx(Dialog.Close, {
+		"data-slot": "dialog-close",
+		render: /* @__PURE__ */ jsx(Button$1, {
+			variant: variant ?? "ghost",
+			size: size ?? "icon-md",
+			"aria-label": ariaLabel ?? "Close",
+			className: cn("-my-1.5 -mr-1.5", className)
+		}),
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(X, { className: "size-4.5" })
+	});
+}
+function DialogHeader({ className, bar = false, ...props }) {
+	const { header } = dialog({ bar });
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "dialog-header",
+		className: header({ className }),
+		...props
+	});
+}
+function DialogBody({ className, bar = false, ...props }) {
+	const { body } = dialog({ bar });
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "dialog-body",
+		className: body({ className }),
+		...props
+	});
+}
+function DialogFooter({ className, bar = false, ...props }) {
+	const { footer } = dialog({ bar });
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "dialog-footer",
+		className: footer({ className }),
+		...props
+	});
+}
+function DialogTitle({ className, ...props }) {
+	const { title } = dialog();
+	return /* @__PURE__ */ jsx(Dialog.Title, {
+		"data-slot": "dialog-title",
+		className: title({ className }),
+		...props
+	});
+}
+function DialogDescription({ className, ...props }) {
+	const { description } = dialog();
+	return /* @__PURE__ */ jsx(Dialog.Description, {
+		"data-slot": "dialog-description",
+		className: description({ className }),
+		...props
+	});
+}
+const dialogSurface = tv$1({ slots: { root: [
+	"flex min-w-0 flex-col outline-none",
+	"overflow-clip rounded-dialog bg-layer-popover text-foreground",
+	"shadow-float ring-1 ring-line-seam"
+] } });
+/**
+* The dialog's frame — the popover layer, the dialog radius, the seam ring
+* and the float shadow — for a centred modal whose lifecycle the app owns
+* (its own backdrop, Escape and focus handling). It neither positions nor
+* animates itself: the host centres it, and a centred modal has no motion.
+* DialogContent draws the same frame for a Base UI dialog.
+*/
+function DialogSurface({ className, render, ...props }) {
+	const { root } = dialogSurface();
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps({
+			"data-slot": "dialog-surface",
+			className: root({ className })
+		}, props)
+	});
+}
+const dialogNav = tv$1({ slots: { root: ["flex shrink-0 flex-col overflow-y-auto", "w-52 gap-0.5 border-r border-line-seam p-2 max-md:hidden"] } });
+/** The section list of a wide (`size="wide"`) dialog, inside a `bar` body. */
+function DialogNav({ className, render, ...props }) {
+	const { root } = dialogNav();
+	return useRender({
+		defaultTagName: "nav",
+		render,
+		props: mergeProps({
+			"data-slot": "dialog-nav",
+			className: root({ className })
+		}, props)
+	});
+}
+//#endregion
+//#region src/components/badge/badge.tsx
+const badge = tv$1({
+	slots: { root: [
+		"inline-flex h-[22px] w-fit min-w-0 max-w-full shrink-0 items-center gap-1 overflow-hidden whitespace-nowrap rounded-chip px-1.5",
+		"font-sans text-caption font-semibold normal-case tracking-normal",
+		"transition-[filter,opacity] duration-100",
+		"[&_svg]:size-3.5 [&_svg]:shrink-0 [&_[data-slot='spinner']]:size-3 [&_[data-slot='spinner']]:text-xs",
+		"disabled:cursor-not-allowed disabled:bg-fill-muted disabled:text-foreground-disabled disabled:opacity-100 disabled:inset-ring-0"
+	] },
+	variants: {
+		appearance: {
+			solid: { root: [
+				"h-5 min-w-5 justify-center rounded-sticker",
+				"font-bold tabular-nums",
+				"text-sticker-ink inset-ring-[1.5px] inset-ring-sticker-ink ring-[1.5px] ring-sticker-edge",
+				"[&_svg]:size-[13px]",
+				"enabled:hover:press-overlay-sticker"
+			] },
+			soft: { root: ["text-foreground", "enabled:hover:press-overlay"] },
+			outline: { root: [
+				"font-mono text-mono-meta font-normal",
+				"bg-transparent text-foreground-muted inset-ring inset-ring-line-hairline",
+				"enabled:hover:bg-fill-pressed"
+			] }
+		},
+		variant: {
+			default: "",
+			primary: "",
+			information: "",
+			muted: "",
+			accent: "",
+			success: "",
+			warning: "",
+			danger: ""
+		}
+	},
+	defaultVariants: {
+		appearance: "solid",
+		variant: "default"
+	},
+	compoundVariants: [
+		{
+			appearance: "solid",
+			variant: "default",
+			class: { root: "bg-sticker-paper" }
+		},
+		{
+			appearance: "solid",
+			variant: "muted",
+			class: { root: "bg-inactive" }
+		},
+		{
+			appearance: "solid",
+			variant: "primary",
+			class: { root: "bg-brand" }
+		},
+		{
+			appearance: "solid",
+			variant: "information",
+			class: { root: "bg-info" }
+		},
+		{
+			appearance: "solid",
+			variant: "accent",
+			class: { root: "bg-attention font-mono text-mono-meta" }
+		},
+		{
+			appearance: "solid",
+			variant: "success",
+			class: { root: "bg-success" }
+		},
+		{
+			appearance: "solid",
+			variant: "warning",
+			class: { root: "bg-warning" }
+		},
+		{
+			appearance: "solid",
+			variant: "danger",
+			class: { root: "bg-danger" }
+		},
+		{
+			appearance: "soft",
+			variant: "default",
+			class: { root: "bg-fill-muted" }
+		},
+		{
+			appearance: "soft",
+			variant: "muted",
+			class: { root: "bg-inactive-soft" }
+		},
+		{
+			appearance: "soft",
+			variant: "primary",
+			class: { root: "bg-brand-soft" }
+		},
+		{
+			appearance: "soft",
+			variant: "information",
+			class: { root: "bg-info-soft" }
+		},
+		{
+			appearance: "soft",
+			variant: "accent",
+			class: { root: "bg-attention-soft" }
+		},
+		{
+			appearance: "soft",
+			variant: "success",
+			class: { root: "bg-success-soft" }
+		},
+		{
+			appearance: "soft",
+			variant: "warning",
+			class: { root: "bg-warning-soft" }
+		},
+		{
+			appearance: "soft",
+			variant: "danger",
+			class: { root: "bg-danger-soft" }
+		},
+		{
+			appearance: "outline",
+			variant: "primary",
+			class: { root: "text-brand-strong" }
+		},
+		{
+			appearance: "outline",
+			variant: "information",
+			class: { root: "text-info-strong" }
+		},
+		{
+			appearance: "outline",
+			variant: "accent",
+			class: { root: "text-attention-strong" }
+		},
+		{
+			appearance: "outline",
+			variant: "success",
+			class: { root: "text-success-strong" }
+		},
+		{
+			appearance: "outline",
+			variant: "warning",
+			class: { root: "text-warning-strong" }
+		},
+		{
+			appearance: "outline",
+			variant: "danger",
+			class: { root: "text-danger-strong" }
+		}
+	]
+});
+function BadgeRoot({ appearance, variant, className, render, ...props }) {
+	const resolvedAppearance = appearance ?? "solid";
+	const { root } = badge({
+		appearance: resolvedAppearance,
+		variant
+	});
+	const defaultProps = { className: root({ className }) };
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: {
+			slot: "badge",
+			appearance: resolvedAppearance,
+			variant
+		}
+	});
+}
+function Experimental(props) {
+	return /* @__PURE__ */ jsx(BadgeRoot, {
+		variant: "success",
+		...props,
+		children: "Experimental"
+	});
+}
+const Badge = Object.assign(BadgeRoot, { Experimental });
+//#endregion
+//#region src/components/tooltip/tooltip.tsx
+const tooltip = tv$1({
+	slots: {
+		trigger: ["select-none"],
+		positioner: ["isolate z-50 pointer-events-none outline-none"],
+		content: [
+			"pointer-events-none relative inline-block max-w-[min(20rem,var(--available-width,20rem))] min-w-0 px-2.5 py-1",
+			"origin-(--transform-origin) outline-none",
+			"transition-[opacity,transform] duration-150 ease-[cubic-bezier(0.22,1,0.36,1)]",
+			"data-starting-style:scale-[0.97] data-starting-style:opacity-0",
+			"data-ending-style:scale-[0.99] data-ending-style:opacity-0",
+			"data-instant:transition-none",
+			"motion-reduce:transition-none",
+			"rounded-chip bg-layer-hud text-foreground-on-hud",
+			"font-sans font-medium",
+			"shadow-float",
+			"has-[[data-slot=kbd]]:py-1 has-[[data-slot=kbd]]:pr-2.5"
+		],
+		body: [
+			"block min-w-0 text-footnote whitespace-normal wrap-break-word",
+			"**:data-[slot=kbd]:relative **:data-[slot=kbd]:z-10 [&_[data-slot=kbd]]:ml-1.5",
+			"[&_[data-slot=kbd]]:h-4 [&_[data-slot=kbd]]:min-w-4 [&_[data-slot=kbd]]:px-1 [&_[data-slot=kbd]]:py-0",
+			"**:data-[slot=kbd]:text-[12px] **:data-[slot=kbd]:leading-4 [&_[data-slot=kbd]]:font-normal"
+		],
+		bodyIcon: ["shrink-0 [&>svg]:block [&>svg]:size-3.5 [&>svg]:shrink-0"],
+		bodyText: ["min-w-0 flex-1"],
+		arrow: [
+			"pointer-events-none flex overflow-visible",
+			"data-[side=top]:bottom-[-5px]",
+			"data-[side=bottom]:top-[-5px] data-[side=bottom]:rotate-180",
+			"data-[side=left]:right-[-8px] data-[side=left]:-rotate-90",
+			"data-[side=right]:left-[-8px] data-[side=right]:rotate-90",
+			"data-[side=inline-start]:right-[-8px] data-[side=inline-start]:-rotate-90",
+			"data-[side=inline-end]:left-[-8px] data-[side=inline-end]:rotate-90"
+		]
+	},
+	variants: { hasLeadingIcon: {
+		true: { body: ["flex items-center gap-x-1.5"] },
+		false: {}
+	} }
+});
+function TooltipProvider({ delay = 0, ...props }) {
+	return /* @__PURE__ */ jsx(Tooltip.Provider, {
+		delay,
+		...props
+	});
+}
+function Tooltip$1(props) {
+	return /* @__PURE__ */ jsx(Tooltip.Root, { ...props });
+}
+function TooltipTrigger({ className, ...props }) {
+	const { trigger } = tooltip();
+	const childSlot = isValidElement(props.render) ? props.render.props["data-slot"] : void 0;
+	const slot = props["data-slot"] ?? childSlot ?? "tooltip-trigger";
+	return /* @__PURE__ */ jsx(Tooltip.Trigger, {
+		"data-slot": slot,
+		className: trigger({ className }),
+		...props
+	});
+}
+function TooltipPortal(props) {
+	return /* @__PURE__ */ jsx(Tooltip.Portal, {
+		"data-slot": "tooltip-portal",
+		...useThemeScopeProps(props)
+	});
+}
+function TooltipArrow({ className, ...props }) {
+	const { arrow } = tooltip();
+	return /* @__PURE__ */ jsx(Tooltip.Arrow, {
+		"data-slot": "tooltip-arrow",
+		className: arrow({ className }),
+		...props,
+		children: /* @__PURE__ */ jsx(TooltipArrowSvg, {})
+	});
+}
+function TooltipArrowSvg(props) {
+	return /* @__PURE__ */ jsx("svg", {
+		width: "12",
+		height: "6",
+		viewBox: "0 0 12 6",
+		fill: "none",
+		...props,
+		children: /* @__PURE__ */ jsx("path", {
+			d: "M1 0H11L6 5.25Z",
+			className: "fill-layer-hud"
+		})
+	});
+}
+function flattenTooltipChildren(children) {
+	return Children.toArray(children).flatMap((child) => {
+		if (isValidElement(child) && child.type === Fragment) return flattenTooltipChildren(child.props.children);
+		return [child];
+	});
+}
+function isTooltipLeadingIcon(child) {
+	if (!isValidElement(child)) return false;
+	if (child.props["data-slot"] === "kbd") return false;
+	if (child.type === "svg") return true;
+	return typeof child.type !== "string";
+}
+function partitionTooltipBodyChildren(children) {
+	const items = flattenTooltipChildren(children);
+	const icons = [];
+	const rest = [];
+	let seenNonIcon = false;
+	for (const item of items) {
+		if (!seenNonIcon && isTooltipLeadingIcon(item)) {
+			icons.push(item);
+			continue;
+		}
+		seenNonIcon = true;
+		rest.push(item);
+	}
+	return {
+		icons,
+		rest
+	};
+}
+function TooltipBodyContent({ children }) {
+	const { icons, rest } = partitionTooltipBodyChildren(children);
+	const { body, bodyIcon, bodyText } = tooltip({ hasLeadingIcon: icons.length > 0 });
+	if (icons.length === 0) return /* @__PURE__ */ jsx("span", {
+		"data-slot": "tooltip-body",
+		className: body(),
+		children
+	});
+	return /* @__PURE__ */ jsxs("span", {
+		"data-slot": "tooltip-body",
+		className: body(),
+		children: [/* @__PURE__ */ jsx("span", {
+			"data-slot": "tooltip-body-icon",
+			className: bodyIcon(),
+			children: icons
+		}), /* @__PURE__ */ jsx("span", {
+			"data-slot": "tooltip-body-text",
+			className: bodyText(),
+			children: rest
+		})]
+	});
+}
+const CONTENT_COLLISION_AVOIDANCE = {
+	side: "flip",
+	align: "shift",
+	fallbackAxisSide: "none"
+};
+function TooltipContent({ align = "center", alignOffset = 0, anchor, arrowPadding, collisionAvoidance = CONTENT_COLLISION_AVOIDANCE, collisionBoundary, collisionPadding, disableAnchorTracking = false, positionMethod = "fixed", side = "top", sideOffset, sticky, container, portalProps, className, children, ...props }) {
+	const { positioner, content } = tooltip();
+	const portalContainer = container !== void 0 ? container : portalProps?.container;
+	return /* @__PURE__ */ jsx(TooltipPortal, {
+		...portalProps,
+		container: portalContainer,
+		children: /* @__PURE__ */ jsx(Tooltip.Positioner, {
+			align,
+			alignOffset,
+			anchor,
+			arrowPadding,
+			collisionAvoidance,
+			collisionBoundary,
+			collisionPadding,
+			disableAnchorTracking,
+			positionMethod,
+			side,
+			sideOffset: sideOffset ?? 8,
+			sticky,
+			className: positioner(),
+			children: /* @__PURE__ */ jsxs(Tooltip.Popup, {
+				"data-slot": "tooltip-content",
+				className: content({ className }),
+				...props,
+				children: [/* @__PURE__ */ jsx(TooltipBodyContent, { children }), /* @__PURE__ */ jsx(TooltipArrow, {})]
+			})
+		})
+	});
+}
+//#endregion
+//#region src/lib/presence.ts
+/**
+* The five status lights of the design system. Each colour is a fixed
+* meaning: online green, busy (an agent at work) yellow, error orange,
+* offline stone, an external agent cyan. One map, read by Status and by the
+* avatar's dot through the same `--status-color`.
+*/
+const PRESENCE_COLOR = {
+	online: "[--status-color:var(--presence-online)]",
+	busy: "[--status-color:var(--presence-busy)]",
+	error: "[--status-color:var(--presence-error)]",
+	offline: "[--status-color:var(--presence-offline)]",
+	external: "[--status-color:var(--presence-external)]"
+};
+//#endregion
+//#region src/components/checkbox/checkbox-indicator.tsx
+const checkboxIndicator = tv$1({
+	slots: { root: [
+		"inline-flex size-5 shrink-0 items-center justify-center",
+		"rounded-sticker border-[1.5px] border-line-strong transition-colors",
+		"[&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5 [&_svg]:stroke-2"
+	] },
+	variants: {
+		shape: {
+			square: "",
+			circle: { root: "rounded-full" }
+		},
+		checked: {
+			true: { root: "border-foreground bg-foreground text-foreground-inverse" },
+			false: { root: "bg-layer-card text-transparent" }
+		},
+		disabled: {
+			true: { root: "border-foreground-disabled bg-fill-muted" },
+			false: ""
+		},
+		previewOnHover: {
+			true: "",
+			false: ""
+		}
+	},
+	compoundVariants: [{
+		checked: false,
+		previewOnHover: true,
+		class: { root: "group-hover:text-foreground/20" }
+	}, {
+		checked: true,
+		disabled: true,
+		class: { root: "bg-foreground-disabled text-layer-card" }
+	}],
+	defaultVariants: {
+		shape: "square",
+		disabled: false,
+		previewOnHover: false
+	}
+});
+function CheckboxIndicator({ checked, mark = "check", shape, disabled, previewOnHover, className, ...props }) {
+	const { root } = checkboxIndicator({
+		shape,
+		checked,
+		disabled,
+		previewOnHover
+	});
+	const Icon = mark === "minus" ? Minus : Check;
+	return /* @__PURE__ */ jsx("span", {
+		...props,
+		"data-slot": "checkbox-indicator-graphic",
+		"aria-hidden": true,
+		className: root({ className }),
+		children: (checked || previewOnHover) && /* @__PURE__ */ jsx(Icon, {})
+	});
+}
+//#endregion
+//#region src/components/checkbox/checkbox.tsx
+const checkbox = tv$1({ slots: {
+	root: [
+		"relative inline-flex size-5 shrink-0 touch-manipulation items-center justify-center outline-none",
+		"rounded-sticker focus-visible:shadow-focus",
+		"data-disabled:cursor-not-allowed",
+		"after:absolute after:-inset-x-3 after:-inset-y-2 after:content-['']"
+	],
+	indicator: "pointer-events-none"
+} });
+function Checkbox$1({ shape = "square", className, ...props }) {
+	const { root, indicator } = checkbox();
+	const renderIndicator = useCallback((indicatorProps, state) => /* @__PURE__ */ jsx(CheckboxIndicator, {
+		...indicatorProps,
+		checked: state.checked || state.indeterminate,
+		disabled: state.disabled,
+		mark: state.indeterminate ? "minus" : "check",
+		shape
+	}), [shape]);
+	return /* @__PURE__ */ jsx(Checkbox.Root, {
+		"data-slot": "checkbox",
+		className: root({ className }),
+		...props,
+		children: /* @__PURE__ */ jsx(Checkbox.Indicator, {
+			keepMounted: true,
+			"data-slot": "checkbox-indicator",
+			className: indicator(),
+			render: renderIndicator
+		})
+	});
+}
+//#endregion
+//#region src/lib/use-mobile-viewport.ts
+const MOBILE_QUERY = "(max-width: 767px)";
+function subscribeMobileViewport(onStoreChange) {
+	if (typeof window === "undefined") return () => void 0;
+	const media = window.matchMedia(MOBILE_QUERY);
+	media.addEventListener("change", onStoreChange);
+	return () => media.removeEventListener("change", onStoreChange);
+}
+function getMobileViewportSnapshot() {
+	return typeof window !== "undefined" && window.matchMedia(MOBILE_QUERY).matches;
+}
+function useMobileViewport() {
+	return useSyncExternalStore(subscribeMobileViewport, getMobileViewportSnapshot, () => false);
+}
+//#endregion
+//#region src/components/scroll-area/scroll-area.recipe.ts
+const scrollArea = tv$1({ slots: {
+	root: ["relative min-h-0"],
+	viewport: ["size-full min-h-0 overscroll-contain outline-none", "[overflow-anchor:auto] [-webkit-overflow-scrolling:touch]"],
+	content: ["min-h-full"],
+	scrollbar: [
+		"group/scroll-area-scrollbar z-50 flex touch-none select-none p-1",
+		"opacity-0 transition-opacity duration-150 pointer-events-none",
+		"data-scrolling:pointer-events-auto data-scrolling:opacity-100 data-scrolling:duration-0",
+		"data-[orientation=vertical]:w-3 data-[orientation=vertical]:justify-center",
+		"data-[orientation=horizontal]:h-3 data-[orientation=horizontal]:flex-col data-[orientation=horizontal]:justify-center"
+	],
+	thumb: [
+		"relative",
+		"group-data-[orientation=vertical]/scroll-area-scrollbar:w-1.5",
+		"group-data-[orientation=horizontal]/scroll-area-scrollbar:h-1.5",
+		"rounded-[2px] bg-foreground/30 hover:bg-foreground/45"
+	],
+	corner: ["bg-transparent"]
+} });
+//#endregion
+//#region src/components/scroll-area/scroll-area.tsx
+function ScrollArea$1({ className, ...props }) {
+	const { root } = scrollArea();
+	return /* @__PURE__ */ jsx(ScrollArea.Root, {
+		"data-slot": "scroll-area",
+		className: root({ className }),
+		...props
+	});
+}
+function ScrollAreaViewport({ className, ...props }) {
+	const { viewport } = scrollArea();
+	return /* @__PURE__ */ jsx(ScrollArea.Viewport, {
+		"data-slot": "scroll-area-viewport",
+		className: viewport({ className }),
+		...props
+	});
+}
+function ScrollAreaContent({ className, ...props }) {
+	const { content } = scrollArea();
+	return /* @__PURE__ */ jsx(ScrollArea.Content, {
+		"data-slot": "scroll-area-content",
+		className: content({ className }),
+		...props
+	});
+}
+function ScrollAreaScrollbar({ className, orientation = "vertical", ...props }) {
+	const { scrollbar } = scrollArea();
+	return /* @__PURE__ */ jsx(ScrollArea.Scrollbar, {
+		"data-slot": "scroll-area-scrollbar",
+		orientation,
+		className: scrollbar({ className }),
+		...props
+	});
+}
+function ScrollAreaThumb({ className, ...props }) {
+	const { thumb } = scrollArea();
+	return /* @__PURE__ */ jsx(ScrollArea.Thumb, {
+		"data-slot": "scroll-area-thumb",
+		className: thumb({ className }),
+		...props
+	});
+}
+function ScrollAreaCorner({ className, ...props }) {
+	const { corner } = scrollArea();
+	return /* @__PURE__ */ jsx(ScrollArea.Corner, {
+		"data-slot": "scroll-area-corner",
+		className: corner({ className }),
+		...props
+	});
+}
+//#endregion
+//#region src/components/panel/panel.recipe.ts
+const panel = tv$1({
+	slots: {
+		root: ["[--panel-footer-clearance:10rem]", "bg-layer-canvas text-foreground"],
+		header: ["[@media(max-height:600px)]:h-12"],
+		body: ["relative min-h-0 flex-1 overflow-hidden"],
+		scrollViewport: ["h-full min-h-0 overflow-y-auto overscroll-contain", "[overflow-anchor:auto] [-webkit-overflow-scrolling:touch]"],
+		scrollContent: ["min-h-full"],
+		section: ["border-t px-5 py-4", "border-line-hairline"],
+		footer: [
+			"relative flex shrink-0 items-center pt-3",
+			"bg-layer-canvas",
+			"px-5 max-md:px-4",
+			"pb-[calc(env(safe-area-inset-bottom)+1rem)] max-md:pb-[calc(env(safe-area-inset-bottom)+0.5rem)]"
+		]
+	},
+	variants: { edge: {
+		inset: { root: "group/panel-frame" },
+		attached: { root: ["group/panel-frame", "border-l border-line-seam max-md:border-l-0"] }
+	} }
+});
+//#endregion
+//#region src/components/panel/panel.tsx
+function Panel({ className, edge, render, ...props }) {
+	const { root } = panel({ edge });
+	const defaultProps = {
+		"data-edge": edge,
+		"data-slot": "panel",
+		className: root({ className })
+	};
+	return useRender({
+		defaultTagName: "section",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+/**
+* Bare header bar: fixed height and centered flex row, no border, fill, or padding.
+* Shared base for `PanelHeader`, `PanelSectionHeader`, and panel-specific headers
+* such as `ThreadPanelHeader` — it is not exclusive to `PanelHeader`.
+*/
+function PanelHeaderRoot({ className, render, ...props }) {
+	const { header } = panel();
+	const defaultProps = {
+		"data-slot": "panel-header-root",
+		className: header({ className })
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function PanelBody({ className, render, ...props }) {
+	const { body } = panel();
+	const defaultProps = {
+		"data-slot": "panel-body",
+		className: body({ className })
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function PanelScrollViewport({ className, render, ...props }) {
+	const { scrollViewport } = panel();
+	const defaultProps = {
+		"data-slot": "panel-scroll-viewport",
+		className: scrollViewport({ className })
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function PanelScrollContent({ className, render, ...props }) {
+	const { scrollContent } = panel();
+	const defaultProps = {
+		"data-slot": "panel-scroll-content",
+		className: scrollContent({ className })
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function PanelSection({ className, render, ...props }) {
+	const { section } = panel();
+	const defaultProps = {
+		"data-slot": "panel-section",
+		className: section({ className })
+	};
+	return useRender({
+		defaultTagName: "section",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function PanelFooter({ className, render, ...props }) {
+	const { footer } = panel();
+	const defaultProps = {
+		"data-slot": "panel-footer",
+		className: footer({ className })
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+//#endregion
+//#region src/components/kbd/kbd.tsx
+const kbd = tv$1({ slots: {
+	root: [
+		"pointer-events-none inline-flex w-fit shrink-0 items-center justify-center gap-1",
+		"whitespace-nowrap select-none",
+		"[&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-3",
+		"min-w-4 rounded-[3px] px-1",
+		"font-mono text-mono-meta font-normal text-foreground-hint",
+		"inset-ring inset-ring-line-hairline",
+		"in-data-[slot=tooltip-content]:text-foreground-on-hud/70",
+		"in-data-[slot=tooltip-content]:shadow-[inset_0_0_0_1px_color-mix(in_oklch,var(--foreground-on-hud)_70%,transparent)]"
+	],
+	group: ["inline-flex items-center gap-1"]
+} });
+function Kbd({ className, ...props }) {
+	const { root } = kbd();
+	return /* @__PURE__ */ jsx("kbd", {
+		"data-slot": "kbd",
+		className: root({ className }),
+		...props
+	});
+}
+function KbdGroup({ className, ...props }) {
+	const { group } = kbd();
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "kbd-group",
+		className: group({ className }),
+		...props
+	});
+}
+//#endregion
+//#region src/components/dropdown-menu/dropdown-menu.tsx
+const dropdownMenu = tv$1({ slots: {
+	trigger: ["select-none"],
+	positioner: ["isolate z-50 outline-none"],
+	content: [
+		"max-h-(--available-height) overflow-hidden",
+		"outline-none",
+		"flex min-w-60 flex-col gap-0 rounded-container bg-layer-popover p-1.5 text-foreground",
+		"shadow-float ring-1 ring-line-seam"
+	],
+	item: [
+		"flex w-full cursor-default select-none items-center [@media(max-height:600px)]:py-1",
+		"text-left outline-none transition-colors",
+		"min-h-9 gap-2.5 rounded-control px-2.5 py-1.5",
+		"font-sans text-callout font-medium text-foreground",
+		"hover:bg-brand-soft data-highlighted:bg-brand-soft",
+		"data-checked:font-bold data-[selected]:font-bold data-[emphasis=strong]:font-bold",
+		"data-disabled:pointer-events-none data-disabled:text-foreground-disabled",
+		"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&>svg:not([class*='size-'])]:size-4",
+		"[&>svg]:text-foreground-muted data-disabled:[&>svg]:text-foreground-disabled"
+	],
+	radioItem: [
+		"flex w-full cursor-default select-none items-center",
+		"text-left outline-none transition-colors",
+		"min-h-9 gap-2.5 rounded-control px-2.5 py-1.5",
+		"font-sans text-callout font-medium text-foreground",
+		"hover:bg-brand-soft data-highlighted:bg-brand-soft",
+		"data-checked:font-bold",
+		"data-disabled:pointer-events-none data-disabled:text-foreground-disabled",
+		"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&>svg:not([class*='size-'])]:size-4",
+		"[&>svg]:text-foreground-muted data-disabled:[&>svg]:text-foreground-disabled"
+	],
+	submenuTrigger: [
+		"flex w-full cursor-default select-none items-center [@media(max-height:600px)]:py-1",
+		"text-left outline-none transition-colors",
+		"min-h-9 gap-2.5 rounded-control px-2.5 py-1.5",
+		"font-sans text-callout font-medium text-foreground",
+		"hover:bg-brand-soft data-highlighted:bg-brand-soft data-popup-open:bg-brand-soft",
+		"data-disabled:pointer-events-none data-disabled:text-foreground-disabled",
+		"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&>svg:not([class*='size-'])]:size-4",
+		"[&>svg]:text-foreground-muted data-disabled:[&>svg]:text-foreground-disabled"
+	],
+	itemLabel: ["min-w-0 flex-1 truncate text-left"],
+	footer: ["px-3 py-2 text-xs text-foreground-muted tabular-nums"],
+	label: ["px-2.5 pt-2 pb-1", "font-sans text-caption font-bold text-foreground-hint"],
+	shortcut: [
+		"ml-auto",
+		"h-auto min-w-0 rounded-none bg-transparent p-0 shadow-none ring-0",
+		"font-mono text-mono-meta font-normal text-foreground-hint"
+	],
+	itemCount: ["ml-auto inline-flex min-w-5 justify-center gap-0 px-1 tabular-nums"],
+	separator: ["-mx-1.5 my-1.5 h-px border-0 bg-line-hairline"],
+	indicator: ["pointer-events-none ml-auto flex shrink-0 items-center justify-center", "size-4 text-foreground [&_svg]:size-4"],
+	radioLabel: ["min-w-0 flex-1 truncate"]
+} });
+function DropdownMenu(props) {
+	return /* @__PURE__ */ jsx(Menu.Root, {
+		"data-slot": "dropdown-menu",
+		...props
+	});
+}
+function DropdownMenuSubmenu(props) {
+	return /* @__PURE__ */ jsx(Menu.SubmenuRoot, {
+		"data-slot": "dropdown-menu-submenu",
+		...props
+	});
+}
+function DropdownMenuTrigger({ className, render = /* @__PURE__ */ jsx(Button$1, {
+	variant: "outline",
+	size: "md"
+}), ...props }) {
+	const { trigger } = dropdownMenu();
+	return /* @__PURE__ */ jsx(Menu.Trigger, {
+		"data-slot": "dropdown-menu-trigger",
+		render,
+		className: trigger({ className }),
+		...props
+	});
+}
+function DropdownMenuPortal(props) {
+	return /* @__PURE__ */ jsx(Menu.Portal, {
+		"data-slot": "dropdown-menu-portal",
+		...useThemeScopeProps(props)
+	});
+}
+function DropdownMenuPopup({ className, ...props }) {
+	const { content } = dropdownMenu();
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "dropdown-menu-content",
+		className: content({ className }),
+		...props
+	});
+}
+function DropdownMenuContent({ align = "start", alignOffset = 0, anchor, arrowPadding, collisionAvoidance, collisionBoundary, collisionPadding, disableAnchorTracking = false, positionMethod = "fixed", side = "bottom", sideOffset, sticky, portalProps, className, ...props }) {
+	const resolvedSideOffset = sideOffset ?? 6;
+	const { positioner, content } = dropdownMenu();
+	return /* @__PURE__ */ jsx(DropdownMenuPortal, {
+		...portalProps,
+		children: /* @__PURE__ */ jsx(Menu.Positioner, {
+			align,
+			alignOffset,
+			anchor,
+			arrowPadding,
+			collisionAvoidance,
+			collisionBoundary,
+			collisionPadding,
+			disableAnchorTracking,
+			positionMethod,
+			side,
+			sideOffset: resolvedSideOffset,
+			sticky,
+			className: positioner(),
+			children: /* @__PURE__ */ jsx(Menu.Popup, {
+				"data-slot": "dropdown-menu-content",
+				className: content({ className }),
+				...props
+			})
+		})
+	});
+}
+function DropdownMenuItem({ className, ...props }) {
+	const { item } = dropdownMenu();
+	return /* @__PURE__ */ jsx(Menu.Item, {
+		"data-slot": "dropdown-menu-item",
+		className: item({ className }),
+		...props
+	});
+}
+function DropdownMenuItemLabel({ className, ...props }) {
+	const { itemLabel } = dropdownMenu();
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "dropdown-menu-item-label",
+		className: itemLabel({ className }),
+		...props
+	});
+}
+function DropdownMenuFooter({ className, ...props }) {
+	const { footer } = dropdownMenu();
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "dropdown-menu-footer",
+		className: footer({ className }),
+		...props
+	});
+}
+function DropdownMenuSubmenuTrigger({ children, className, ...props }) {
+	const { submenuTrigger, indicator } = dropdownMenu();
+	return /* @__PURE__ */ jsxs(Menu.SubmenuTrigger, {
+		"data-slot": "dropdown-menu-submenu-trigger",
+		className: submenuTrigger({ className }),
+		...props,
+		children: [children, /* @__PURE__ */ jsx("span", {
+			className: indicator(),
+			"data-slot": "dropdown-menu-submenu-trigger-indicator",
+			"aria-hidden": "true",
+			children: /* @__PURE__ */ jsx(DropdownMenuSubmenuChevronIcon, {})
+		})]
+	});
+}
+function DropdownMenuLabel({ className, ...props }) {
+	const { label } = dropdownMenu();
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "dropdown-menu-label",
+		className: label({ className }),
+		...props
+	});
+}
+function DropdownMenuShortcut({ className, ...props }) {
+	const { shortcut } = dropdownMenu();
+	return /* @__PURE__ */ jsx(Kbd, {
+		"data-slot": "dropdown-menu-shortcut",
+		className: shortcut({ className }),
+		...props
+	});
+}
+function DropdownMenuItemCount({ className, ...props }) {
+	const { itemCount } = dropdownMenu();
+	return /* @__PURE__ */ jsx(Badge, {
+		"data-slot": "dropdown-menu-item-count",
+		className: itemCount({ className }),
+		...props
+	});
+}
+function DropdownMenuSeparator({ className, ...props }) {
+	const { separator } = dropdownMenu();
+	return /* @__PURE__ */ jsx(Menu.Separator, {
+		"data-slot": "dropdown-menu-separator",
+		className: separator({ className }),
+		...props
+	});
+}
+function DropdownMenuSubmenuChevronIcon() {
+	return /* @__PURE__ */ jsx("svg", {
+		width: "12",
+		height: "12",
+		viewBox: "0 0 12 12",
+		"aria-hidden": true,
+		className: "size-3 shrink-0",
+		children: /* @__PURE__ */ jsx("g", {
+			fill: "none",
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			strokeWidth: "1",
+			stroke: "currentColor",
+			children: /* @__PURE__ */ jsx("path", { d: "M4.25 2.5L7.75 6l-3.5 3.5" })
+		})
+	});
+}
+function DropdownMenuCheckIcon() {
+	return /* @__PURE__ */ jsx("svg", {
+		width: "12",
+		height: "12",
+		viewBox: "0 0 12 12",
+		"aria-hidden": true,
+		className: "size-3 shrink-0",
+		children: /* @__PURE__ */ jsx("g", {
+			fill: "none",
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			strokeWidth: "1",
+			stroke: "currentColor",
+			children: /* @__PURE__ */ jsx("path", { d: "M1.75 6.41L4.4 9.25L10.25 2.99" })
+		})
+	});
+}
+function DropdownMenuRadioGroup({ ...props }) {
+	return /* @__PURE__ */ jsx(Menu.RadioGroup, {
+		"data-slot": "dropdown-menu-radio-group",
+		...props
+	});
+}
+function DropdownMenuRadioItem({ className, children, ...props }) {
+	const { radioItem, radioLabel, indicator } = dropdownMenu();
+	return /* @__PURE__ */ jsxs(Menu.RadioItem, {
+		"data-slot": "dropdown-menu-radio-item",
+		className: radioItem({ className }),
+		...props,
+		children: [renderRadioItemChildren(children, radioLabel()), /* @__PURE__ */ jsx("span", {
+			className: indicator(),
+			children: /* @__PURE__ */ jsx(Menu.RadioItemIndicator, { children: /* @__PURE__ */ jsx(DropdownMenuCheckIcon, {}) })
+		})]
+	});
+}
+function renderRadioItemChildren(children, className) {
+	if (typeof children === "string" || typeof children === "number") return /* @__PURE__ */ jsx("span", {
+		"data-slot": "dropdown-menu-radio-item-label",
+		className,
+		children
+	});
+	if (Array.isArray(children) && children.every((child) => typeof child === "string")) return /* @__PURE__ */ jsx("span", {
+		"data-slot": "dropdown-menu-radio-item-label",
+		className,
+		children
+	});
+	return children;
+}
+function DropdownMenuRadioItemIndicator({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Menu.RadioItemIndicator, {
+		"data-slot": "dropdown-menu-radio-item-indicator",
+		className,
+		...props
+	});
+}
+function DropdownMenuCheckboxItem({ className, children, ...props }) {
+	const { item, indicator } = dropdownMenu();
+	return /* @__PURE__ */ jsxs(Menu.CheckboxItem, {
+		"data-slot": "dropdown-menu-checkbox-item",
+		className: item({ className }),
+		...props,
+		children: [children, /* @__PURE__ */ jsx("span", {
+			className: indicator(),
+			children: /* @__PURE__ */ jsx(Menu.CheckboxItemIndicator, { children: /* @__PURE__ */ jsx(DropdownMenuCheckIcon, {}) })
+		})]
+	});
+}
+function DropdownMenuCheckboxItemIndicator({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Menu.CheckboxItemIndicator, {
+		"data-slot": "dropdown-menu-checkbox-item-indicator",
+		className,
+		...props
+	});
+}
+//#endregion
+//#region src/lib/use-overflow-title.ts
+function cut(element) {
+	return element.scrollWidth > element.clientWidth + 1 || element.scrollHeight > element.clientHeight + 1;
+}
+function assign(ref, node) {
+	if (typeof ref === "function") ref(node);
+	else if (ref) ref.current = node;
+}
+/**
+* Gives a value that is cut off (an ellipsis, a clamp) its whole text as its
+* `title`, and takes it away again when the value fits: a value that shows in
+* full needs no tooltip repeating it (design/patterns/forms.md#long-values-in-fields).
+* It watches the element and its children, so a part whose text sits in a
+* child that truncates (a chip's label) is covered too. A `title` the caller
+* passes wins, and is never touched.
+*/
+function useOverflowTitle(ref, title) {
+	const cleanup = useRef(void 0);
+	const own = title !== void 0;
+	return useCallback((node) => {
+		cleanup.current?.();
+		cleanup.current = void 0;
+		assign(ref, node);
+		const view = node?.ownerDocument.defaultView;
+		if (!node || own || !view || !("ResizeObserver" in view)) return;
+		const update = () => {
+			const text = node.textContent?.trim() ?? "";
+			if (text && (cut(node) || Array.from(node.children).some(cut))) node.title = text;
+			else node.removeAttribute("title");
+		};
+		const resize = new view.ResizeObserver(update);
+		resize.observe(node);
+		for (const child of Array.from(node.children)) resize.observe(child);
+		const mutation = new view.MutationObserver(update);
+		mutation.observe(node, {
+			childList: true,
+			characterData: true,
+			subtree: true
+		});
+		cleanup.current = () => {
+			resize.disconnect();
+			mutation.disconnect();
+		};
+	}, [own, ref]);
+}
+//#endregion
+//#region src/components/avatar/avatar.tsx
+const avatar = tv$1({
+	slots: {
+		root: [
+			"group/avatar relative flex shrink-0 items-center justify-center select-none",
+			"rounded-sticker border-[1.5px] border-sticker-ink",
+			"text-sticker-ink shadow-[0_0_0_1.5px_var(--sticker-edge)]"
+		],
+		image: ["size-full object-cover", "rounded-[2px]"],
+		fallback: [
+			"flex size-full items-center justify-center",
+			"[&>svg]:size-4",
+			"[[data-size='lg']>&]:[&>svg]:size-6",
+			"[[data-size='md']>&]:[&>svg]:size-4.5",
+			"[[data-size='xs']>&]:[&>svg]:size-3",
+			"overflow-hidden rounded-[2px]",
+			"font-sans text-[15px] leading-none font-bold tracking-[-0.01em] text-sticker-ink",
+			"[[data-size='xl']>&]:text-[40px]",
+			"[[data-size='lg']>&]:text-[22px]",
+			"[[data-size='sm']>&]:text-[13px]",
+			"[[data-size='xs']>&]:text-[11px]",
+			"[[data-size='2xs']>&]:text-[11px]",
+			"[[data-size='3xs']>&]:text-[8px]",
+			"[[data-size='xl']>&]:[&>svg]:size-12",
+			"[[data-size='sm']>&]:[&>svg]:size-3.5",
+			"[[data-size='2xs']>&]:[&>svg]:size-3",
+			"[[data-size='3xs']>&]:[&>svg]:size-2"
+		],
+		badge: [
+			"absolute z-10 select-none",
+			"size-[11px] -right-1 -bottom-1 rounded-[2px]",
+			"outline-2 outline-solid outline-layer-canvas",
+			"group-data-[size=xl]/avatar:size-5 group-data-[size=xl]/avatar:-right-2 group-data-[size=xl]/avatar:-bottom-2",
+			"group-data-[size=lg]/avatar:size-3.5 group-data-[size=lg]/avatar:right-[-5px] group-data-[size=lg]/avatar:bottom-[-5px]",
+			"group-data-[size=md]/avatar:size-[11px]",
+			"group-data-[size=sm]/avatar:size-[9px] group-data-[size=sm]/avatar:right-[-3px] group-data-[size=sm]/avatar:bottom-[-3px]",
+			"group-data-[size=xs]/avatar:size-[7px] group-data-[size=xs]/avatar:-right-0.5 group-data-[size=xs]/avatar:-bottom-0.5",
+			"group-data-[size=2xs]/avatar:size-[7px] group-data-[size=2xs]/avatar:-right-0.5 group-data-[size=2xs]/avatar:-bottom-0.5",
+			"group-data-[size=3xs]/avatar:size-1.5 group-data-[size=3xs]/avatar:-right-0.5 group-data-[size=3xs]/avatar:-bottom-0.5"
+		],
+		dot: [
+			"inline-flex items-center justify-center outline-2",
+			"[&>svg]:hidden",
+			"group-data-[size=xl]/avatar:[&>svg]:size-2 group-data-[size=xl]/avatar:[&>svg]:block",
+			"group-data-[size=lg]/avatar:[&>svg]:size-2 group-data-[size=lg]/avatar:[&>svg]:block",
+			"group-data-[size=md]/avatar:[&>svg]:size-1.5 group-data-[size=md]/avatar:[&>svg]:block",
+			"group-data-[size=xs]/avatar:outline group-data-[size=2xs]/avatar:outline group-data-[size=3xs]/avatar:outline",
+			"rounded-[2px] border-[1.5px] border-sticker-ink",
+			"bg-(--status-color) text-sticker-ink outline-layer-canvas",
+			"group-data-[size=xl]/avatar:border-2",
+			"group-data-[size=xs]/avatar:border group-data-[size=2xs]/avatar:border group-data-[size=3xs]/avatar:border"
+		],
+		group: [
+			"group/avatar-group flex items-center",
+			"stack-x-[-5px]",
+			"*:data-[slot=avatar]:shadow-[0_0_0_1.5px_var(--sticker-edge),0_0_0_3px_var(--avatar-group-surface,var(--layer-canvas))]",
+			"*:data-[slot=avatar-group-count]:shadow-[0_0_0_1.5px_var(--sticker-edge),0_0_0_3px_var(--avatar-group-surface,var(--layer-canvas))]"
+		]
+	},
+	variants: {
+		type: {
+			agent: { root: ["bg-inactive"] },
+			human: { root: ["bg-palette-lavender"] }
+		},
+		size: {
+			xl: { root: ["size-[99px] shadow-[0_0_0_1.5px_var(--sticker-edge),var(--elevation-sticker)]"] },
+			lg: { root: ["size-[51px]"] },
+			md: { root: ["size-[35px]"] },
+			sm: { root: ["size-[27px]"] },
+			xs: { root: ["size-[19px]"] },
+			"2xs": { root: ["size-[19px]"] },
+			"3xs": { root: "size-3.5" }
+		}
+	}
+});
+function Avatar$1({ size, type, className, children, ...props }) {
+	const { root } = avatar({
+		type,
+		size
+	});
+	return /* @__PURE__ */ jsx(Avatar.Root, {
+		"data-slot": "avatar",
+		"data-size": size,
+		className: root({ className }),
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(AvatarFallback, {})
+	});
+}
+function AvatarImage({ className, ...props }) {
+	const { image } = avatar();
+	return /* @__PURE__ */ jsx(Avatar.Image, {
+		"data-slot": "avatar-image",
+		className: image({ className }),
+		...props
+	});
+}
+function AvatarFallbackIcon() {
+	return /* @__PURE__ */ jsx("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		width: "18",
+		height: "18",
+		viewBox: "0 0 18 18",
+		"aria-hidden": "true",
+		focusable: "false",
+		children: /* @__PURE__ */ jsxs("g", {
+			fill: "none",
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			strokeWidth: "1",
+			stroke: "currentColor",
+			children: [
+				/* @__PURE__ */ jsx("circle", {
+					cx: "9",
+					cy: "7.75",
+					r: "2"
+				}),
+				/* @__PURE__ */ jsx("path", { d: "M9,16.25c1.407,0,2.716-.407,3.827-1.101-.481-1.67-2.003-2.899-3.827-2.899s-3.347,1.229-3.827,2.899c1.112,.694,2.42,1.101,3.827,1.101Z" }),
+				/* @__PURE__ */ jsx("circle", {
+					cx: "1.889",
+					cy: "10.414",
+					r: ".75",
+					fill: "currentColor",
+					"data-stroke": "none",
+					stroke: "none"
+				}),
+				/* @__PURE__ */ jsx("circle", {
+					cx: "2.971",
+					cy: "4.972",
+					r: ".75",
+					fill: "currentColor",
+					"data-stroke": "none",
+					stroke: "none"
+				}),
+				/* @__PURE__ */ jsx("circle", {
+					cx: "2.972",
+					cy: "13.027",
+					r: ".75",
+					fill: "currentColor",
+					"data-stroke": "none",
+					stroke: "none"
+				}),
+				/* @__PURE__ */ jsx("circle", {
+					cx: "1.89",
+					cy: "7.586",
+					r: ".75",
+					fill: "currentColor",
+					"data-stroke": "none",
+					stroke: "none"
+				}),
+				/* @__PURE__ */ jsx("circle", {
+					cx: "4.973",
+					cy: "2.972",
+					r: ".75",
+					fill: "currentColor",
+					"data-stroke": "none",
+					stroke: "none"
+				}),
+				/* @__PURE__ */ jsx("circle", {
+					cx: "7.586",
+					cy: "1.889",
+					r: ".75",
+					fill: "currentColor",
+					"data-stroke": "none",
+					stroke: "none"
+				}),
+				/* @__PURE__ */ jsx("circle", {
+					cx: "15.029",
+					cy: "13.028",
+					r: ".75",
+					fill: "currentColor",
+					"data-stroke": "none",
+					stroke: "none"
+				}),
+				/* @__PURE__ */ jsx("circle", {
+					cx: "16.111",
+					cy: "7.586",
+					r: ".75",
+					fill: "currentColor",
+					"data-stroke": "none",
+					stroke: "none"
+				}),
+				/* @__PURE__ */ jsx("circle", {
+					cx: "13.028",
+					cy: "2.971",
+					r: ".75",
+					fill: "currentColor",
+					"data-stroke": "none",
+					stroke: "none"
+				}),
+				/* @__PURE__ */ jsx("circle", {
+					cx: "16.11",
+					cy: "10.414",
+					r: ".75",
+					fill: "currentColor",
+					"data-stroke": "none",
+					stroke: "none"
+				}),
+				/* @__PURE__ */ jsx("circle", {
+					cx: "15.028",
+					cy: "4.973",
+					r: ".75",
+					fill: "currentColor",
+					"data-stroke": "none",
+					stroke: "none"
+				}),
+				/* @__PURE__ */ jsx("circle", {
+					cx: "10.414",
+					cy: "1.89",
+					r: ".75",
+					fill: "currentColor",
+					"data-stroke": "none",
+					stroke: "none"
+				})
+			]
+		})
+	});
+}
+function AvatarFallback({ className, children, ...props }) {
+	const { fallback } = avatar();
+	return /* @__PURE__ */ jsx(Avatar.Fallback, {
+		"data-slot": "avatar-fallback",
+		className: fallback({ className }),
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(AvatarFallbackIcon, {})
+	});
+}
+const toCssLength = (value) => typeof value === "number" ? `${value}px` : value;
+function AvatarBadge({ className, render, offset, presence = "online", ...props }) {
+	const { badge, dot } = avatar();
+	const offsetStyle = offset ? {
+		top: toCssLength(offset[1]),
+		left: toCssLength(offset[0]),
+		right: "auto",
+		bottom: "auto",
+		translate: "-50% -50%"
+	} : void 0;
+	const defaultProps = {
+		className: badge({ className: render ? className : dot({ className: cn(PRESENCE_COLOR[presence], className) }) }),
+		style: offsetStyle
+	};
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "avatar-badge" }
+	});
+}
+function AvatarGroup({ className, ...props }) {
+	const { group } = avatar();
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "avatar-group",
+		className: group({ className }),
+		...props
+	});
+}
+function AvatarGroupCount({ size, className, ...props }) {
+	const { root } = avatar({ size });
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "avatar-group-count",
+		className: root({ class: ["border-transparent bg-fill-muted font-mono text-mono-meta font-bold tabular-nums text-foreground-muted shadow-none", className] }),
+		...props
+	});
+}
+//#endregion
+//#region src/lib/search-hit.ts
+/**
+* The DS search hit: what you looked for is a small yellow sticker, like an @
+* to you. Every place that marks a hit (message text, Markdown, search
+* results) uses this. The hit keeps the surrounding font (`[font:inherit]`
+* drops the browser's mark styling) but is always bold, which needs `!` to win
+* over that shorthand.
+*/
+const searchHit = [
+	"[font:inherit] font-bold!",
+	"rounded-sticker bg-brand px-[3px] box-decoration-clone",
+	"text-sticker-ink inset-ring-[1.5px] inset-ring-sticker-ink ring-[1.5px] ring-sticker-edge"
+];
+//#endregion
+//#region src/components/message-item/message-item.recipe.ts
+const sender = [
+	"min-w-0 truncate",
+	"text-subhead font-bold text-foreground",
+	"rounded-[2px] outline-none focus-visible:shadow-focus"
+];
+const messageItem = tv$1({
+	slots: {
+		root: [
+			"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]",
+			"min-h-0 px-2 py-1 border-t-8 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:initial]",
+			"hover:[--mi-row-fill:var(--fill-message-hover)]",
+			"data-popup-open:[--mi-row-fill:var(--fill-row-open)] has-data-popup-open:[--mi-row-fill:var(--fill-row-open)]",
+			"has-data-[slot=message-item-search-match]:[--mi-row-fill:var(--info-soft)] has-data-[slot=message-item-search-match]:hover:[--mi-row-fill:var(--info-soft)]",
+			"has-[[data-slot=message-multi-select-checkbox][data-checked]]:[--mi-row-fill:var(--info-soft)]",
+			"has-[[data-slot=message-multi-select-checkbox][data-checked]]:hover:[--mi-row-fill:var(--info-soft)]"
+		],
+		gutter: ["relative shrink-0 self-stretch", "w-[35px]"],
+		avatarSlot: [
+			"relative shrink-0 self-start",
+			"flex w-[35px] justify-center",
+			"[&_[data-slot=avatar][data-size=md]]:size-(--mi-avatar,35px)"
+		],
+		continuationTime: [
+			"absolute right-0 select-none whitespace-nowrap tabular-nums",
+			"top-[calc((var(--text-body--line-height)-var(--text-mono-meta--line-height))/2)]",
+			"font-mono text-mono-meta",
+			"text-(--mi-ct-color,transparent)"
+		],
+		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,6.5rem)",
+			"has-data-[slot=message-item-delegated-by]:[--mi-owner-basis:3rem] has-data-[slot=message-item-delegated-by]:[--mi-owner-flex:1_0]"
+		],
+		senderGroup: [
+			"flex min-w-0 items-baseline gap-1.5 overflow-hidden",
+			"flex-[var(--mi-owner-flex,0_1)_var(--mi-owner-basis,auto)] max-w-max",
+			"*:data-[slot=message-item-meta]:basis-0 *:data-[slot=message-item-meta]:grow",
+			"*:data-[slot=message-item-meta]:-ms-1.5 *:data-[slot=message-item-meta]:before:inline-block *:data-[slot=message-item-meta]:before:w-1.5 *:data-[slot=message-item-meta]:before:content-['']"
+		],
+		sender,
+		senderButton: [
+			...sender,
+			"cursor-pointer",
+			"decoration-[1.5px] underline-offset-[3px] hover:underline"
+		],
+		senderBadges: ["inline-flex shrink-0 items-center gap-1"],
+		meta: ["min-w-0 truncate", "text-caption text-foreground-hint"],
+		time: ["shrink-0 whitespace-nowrap", "font-mono text-mono-meta tabular-nums text-foreground-hint"],
+		inlineStatus: ["shrink-0", "text-caption text-foreground-hint"],
+		delegatedBy: [
+			"inline-grid grid-flow-col items-baseline",
+			"min-w-min shrink whitespace-pre-wrap",
+			"has-data-[slot=message-item-delegated-by-name]:max-w-[45%] has-data-[slot=message-item-delegated-by-name]:whitespace-pre",
+			"has-data-[slot=message-item-delegated-by-button]:max-w-[45%] has-data-[slot=message-item-delegated-by-button]:whitespace-pre",
+			"text-caption text-foreground-muted"
+		],
+		delegatedByName: ["min-w-0 truncate"],
+		delegatedByButton: [
+			"min-w-0 truncate",
+			"cursor-pointer decoration-1 underline-offset-[3px] hover:underline",
+			"rounded-[2px] outline-none focus-visible:shadow-focus"
+		],
+		delegatedAvatar: [
+			"size-[19px] group-data-[size=md]/avatar:size-[19px]",
+			"rounded-sticker outline-none",
+			"bg-layer-canvas bg-[linear-gradient(var(--mi-row-fill,transparent),var(--mi-row-fill,transparent))]",
+			"data-deleted:*:data-[slot=avatar]:grayscale data-deleted:*:data-[slot=avatar]:opacity-60",
+			"shadow-[0_0_0_1.5px_var(--mi-row-fill,transparent),0_0_0_1.5px_var(--layer-canvas)]",
+			"dark:shadow-[0_0_0_3px_var(--mi-row-fill,transparent),0_0_0_3px_var(--layer-canvas)]"
+		],
+		edited: ["ms-1 whitespace-nowrap", "text-caption text-foreground-hint"],
+		body: [
+			"wrap-break-word select-text",
+			"**:select-text",
+			"text-body text-foreground",
+			"selection:bg-brand-soft"
+		],
+		searchMatch: searchHit,
+		embedded: ["min-w-0", "mt-2"],
+		attachments: ["stack-y-2", "mt-2"],
+		footer: ["mt-1.5 flex flex-wrap items-center gap-1.5"],
+		toolbar: [
+			"absolute z-20 flex items-center",
+			"opacity-(--mi-toolbar-opacity,0)",
+			"[pointer-events:var(--mi-toolbar-pe,none)]",
+			"top-[-16px] right-3 gap-0.5 overflow-visible rounded-container p-0.5",
+			"bg-layer-popover ring-1 ring-line-seam ring-inset shadow-float"
+		],
+		toolbarButton: [
+			"inline-flex shrink-0 items-center justify-center",
+			"[&_svg]:shrink-0",
+			"size-7 rounded-control border-0 bg-transparent p-0",
+			"text-foreground-muted hover:bg-fill-pressed active:bg-fill-pressed",
+			"data-popup-open:bg-fill-pressed data-active:text-foreground",
+			"outline-none focus-visible:shadow-focus",
+			"[&_svg]:size-4"
+		]
+	},
+	variants: { compact: { true: { root: ["border-t-0"] } } }
+});
+//#endregion
+//#region src/components/message-item/message-item-root.tsx
+function MessageItem({ className, compact, render, ...props }) {
+	const { root } = messageItem({ compact });
+	const defaultProps = {
+		"data-message-item": "",
+		"data-compact": compact ? "true" : void 0,
+		className: root({ className })
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "message-item" }
+	});
+}
+//#endregion
+//#region src/components/message-item/message-item-gutter.tsx
+function MessageItemGutter({ className, render, ...props }) {
+	const { gutter } = messageItem();
+	const defaultProps = { className: gutter({ className }) };
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "message-item-gutter" }
+	});
+}
+function MessageItemAvatarSlot({ className, render, ...props }) {
+	const { avatarSlot } = messageItem();
+	const defaultProps = { className: avatarSlot({ className }) };
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "message-item-avatar-slot" }
+	});
+}
+/** Left-gutter hover clock for continuation rows, a `<time>`: pass the moment in `dateTime`. Show the hour and minute only, in the person's 12h/24h format, with no AM/PM (`6:35`, `18:35`). */
+function MessageItemContinuationTime({ className, render, ...props }) {
+	const { continuationTime } = messageItem();
+	const defaultProps = { className: continuationTime({ className }) };
+	return useRender({
+		defaultTagName: "time",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "message-item-continuation-time" }
+	});
+}
+//#endregion
+//#region src/components/message-item/message-item-content.tsx
+function MessageItemContent({ className, render, ...props }) {
+	const { content } = messageItem();
+	const defaultProps = { className: content({ className }) };
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "message-item-content" }
+	});
+}
+function MessageItemBody({ className, render, ...props }) {
+	const { body } = messageItem();
+	const defaultProps = { className: body({ className }) };
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "message-item-body" }
+	});
+}
+/**
+* The edited marker, inline at the end of the message text on every row, full
+* or continuation. Put it inside the last paragraph so it follows the last
+* word; pass the copy ("(edited)") as children and the edit time as its tooltip.
+*/
+function MessageItemEdited({ className, render, ...props }) {
+	const { edited } = messageItem();
+	const defaultProps = { className: edited({ className }) };
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "message-item-edited" }
+	});
+}
+function MessageItemSearchMatch({ className, render, ...props }) {
+	const { searchMatch } = messageItem();
+	const defaultProps = { className: searchMatch({ className }) };
+	return useRender({
+		defaultTagName: "mark",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "message-item-search-match" }
+	});
+}
+function MessageItemEmbedded({ className, render, ...props }) {
+	const { embedded } = messageItem();
+	const defaultProps = { className: embedded({ className }) };
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "message-item-embedded" }
+	});
+}
+function MessageItemAttachments({ className, render, ...props }) {
+	const { attachments } = messageItem();
+	const defaultProps = { className: attachments({ className }) };
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "message-item-attachments" }
+	});
+}
+function MessageItemFooter({ className, render, ...props }) {
+	const { footer } = messageItem();
+	const defaultProps = { className: footer({ className }) };
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "message-item-footer" }
+	});
+}
+//#endregion
+//#region src/components/message-item/message-item-header.tsx
+function MessageItemHeader({ className, render, ...props }) {
+	const { header } = messageItem();
+	const defaultProps = { className: header({ className }) };
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "message-item-header" }
+	});
+}
+/**
+* Holds the sender, its badges and its role, and decides who gives way when
+* the header runs out of room: the role truncates first, then the name. The
+* badges stay whole beside the name, and the time, outside the group, never
+* truncates.
+*/
+function MessageItemSenderGroup({ className, render, ...props }) {
+	const { senderGroup } = messageItem();
+	const defaultProps = { className: senderGroup({ className }) };
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "message-item-sender-group" }
+	});
+}
+function MessageItemSender({ className, render, ...props }) {
+	const { sender } = messageItem();
+	const defaultProps = { className: sender({ className }) };
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "message-item-sender" }
+	});
+}
+function MessageItemSenderButton({ className, render, ...props }) {
+	const { senderButton } = messageItem();
+	const defaultProps = {
+		type: "button",
+		className: senderButton({ className })
+	};
+	return useRender({
+		defaultTagName: "button",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "message-item-sender-button" }
+	});
+}
+function MessageItemSenderBadges({ className, render, ...props }) {
+	const { senderBadges } = messageItem();
+	const defaultProps = { className: senderBadges({ className }) };
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "message-item-sender-badges" }
+	});
+}
+function MessageItemMeta({ className, render, ...props }) {
+	const { meta } = messageItem();
+	const defaultProps = { className: meta({ className }) };
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "message-item-meta" }
+	});
+}
+/**
+* The message's time, right after the sender. A `<time>`: pass the moment in
+* `dateTime` (ISO 8601) and the full date and time as its tooltip.
+*/
+function MessageItemTime({ className, render, ...props }) {
+	const { time } = messageItem();
+	const defaultProps = { className: time({ className }) };
+	return useRender({
+		defaultTagName: "time",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "message-item-time" }
+	});
+}
+function MessageItemInlineStatus({ className, render, ...props }) {
+	const { inlineStatus } = messageItem();
+	const defaultProps = { className: inlineStatus({ className }) };
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "message-item-inline-status" }
+	});
+}
+//#endregion
+//#region src/components/message-item/message-item-delegated.tsx
+/**
+* Says an assistant sent the message for its owner, the sender: "sent by
+* Friday". Put it in `MessageItemHeader` after `MessageItemSenderGroup`, and
+* the assistant's name in `MessageItemDelegatedByName` or
+* `MessageItemDelegatedByButton`. The words, and the spaces around the name,
+* come from the product. It takes at most 45% of the line: past that only
+* the name truncates, never the words.
+*/
+function MessageItemDelegatedBy({ className, render, ...props }) {
+	const { delegatedBy } = messageItem();
+	const defaultProps = { className: delegatedBy({ className }) };
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "message-item-delegated-by" }
+	});
+}
+/** The assistant's name in `MessageItemDelegatedBy`, the part that truncates. */
+function MessageItemDelegatedByName({ className, render, ...props }) {
+	const { delegatedByName } = messageItem();
+	const defaultProps = { className: delegatedByName({ className }) };
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "message-item-delegated-by-name" }
+	});
+}
+/**
+* The assistant's name when it opens the assistant's profile: a `<button>`
+* (or a link through `render`) that underlines on hover and truncates like
+* `MessageItemDelegatedByName`.
+*/
+function MessageItemDelegatedByButton({ className, render, ...props }) {
+	const { delegatedByButton } = messageItem();
+	const defaultProps = {
+		type: "button",
+		className: delegatedByButton({ className })
+	};
+	return useRender({
+		defaultTagName: "button",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "message-item-delegated-by-button" }
+	});
+}
+/**
+* The assistant's face on its owner's avatar, in the corner a presence light
+* takes: put it inside the owner's `md` `Avatar` with a `2xs` agent `Avatar`
+* as its child. It is hidden from assistive technology, because
+* `MessageItemDelegatedBy` already says who sent the message. Only on a
+* person's avatar: an agent's corner is its presence light.
+*/
+function MessageItemDelegatedAvatar({ className, deleted, ...props }) {
+	const { delegatedAvatar } = messageItem();
+	return /* @__PURE__ */ jsx(AvatarBadge, {
+		"aria-hidden": true,
+		"data-deleted": deleted ? "" : void 0,
+		className: delegatedAvatar({ className }),
+		render: /* @__PURE__ */ jsx("span", {}),
+		...props
+	});
+}
+//#endregion
+//#region src/components/message-item/message-item-toolbar.tsx
+function MessageItemToolbar({ className, render, ...props }) {
+	const { toolbar } = messageItem();
+	const defaultProps = { className: toolbar({ className }) };
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "message-item-toolbar" }
+	});
+}
+function MessageItemToolbarButton({ active = false, className, render, ...props }) {
+	const { toolbarButton } = messageItem();
+	const defaultProps = {
+		type: "button",
+		"data-active": active ? "true" : void 0,
+		className: toolbarButton({ className })
+	};
+	return useRender({
+		defaultTagName: "button",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "message-item-toolbar-button" }
+	});
+}
+//#endregion
+//#region src/components/message-item/message-footer.recipe.ts
+const messageFooter = tv$1({
+	slots: {
+		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",
+			"text-caption font-semibold text-foreground-muted",
+			"bg-fill-muted hover:press-overlay active:press-overlay",
+			"outline-none focus-visible:shadow-focus",
+			"[&_svg]:size-3.5 [&_svg]:text-foreground"
+		],
+		readReceipt: [
+			"ml-auto inline-flex shrink-0 items-center gap-1 whitespace-nowrap",
+			"[&_svg]:shrink-0",
+			"h-[22px] font-mono text-mono-meta text-foreground-hint [&_svg]:size-3"
+		],
+		badge: [
+			"inline-flex min-w-0 max-w-full items-center overflow-hidden whitespace-nowrap select-none",
+			"transition-colors [&_svg]:shrink-0",
+			"h-6 gap-1 rounded-chip border-0 px-2 shadow-none",
+			"text-footnote font-bold text-foreground-muted",
+			"bg-fill-muted hover:press-overlay active:press-overlay",
+			"[&_svg]:size-3.5"
+		],
+		badgeSeparator: ["text-foreground/45"]
+	},
+	variants: {
+		badgeStatus: {
+			read: {},
+			unread: { badge: ["text-foreground"] }
+		},
+		iconOnly: {
+			true: { savedIndicator: [
+				"justify-center p-0",
+				"size-8 rounded-control bg-transparent",
+				"[&_svg]:size-[18px] [&_svg]:text-foreground-muted"
+			] },
+			false: {}
+		}
+	},
+	defaultVariants: { iconOnly: false }
+});
+//#endregion
+//#region src/components/message-item/message-footer.tsx
+function MessageItemBadge({ className, status = "read", ...props }) {
+	const { badge } = messageFooter({ badgeStatus: status });
+	return /* @__PURE__ */ jsx(Badge, {
+		appearance: "soft",
+		"data-slot": "message-item-badge",
+		variant: "muted",
+		className: badge({ className }),
+		...props
+	});
+}
+function MessageItemBadgeSeparator({ className, render, ...props }) {
+	const { badgeSeparator } = messageFooter();
+	const defaultProps = {
+		"aria-hidden": true,
+		className: badgeSeparator({ className })
+	};
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "message-item-badge-separator" }
+	});
+}
+function MessageItemSavedIndicator({ className, iconOnly = false, render, ...props }) {
+	const { savedIndicator } = messageFooter({ iconOnly });
+	const defaultProps = {
+		...iconOnly ? { "data-icon-only": "" } : {},
+		className: savedIndicator({ className })
+	};
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "message-item-saved-indicator" }
+	});
+}
+function MessageItemReadReceipt({ className, render, ...props }) {
+	const { readReceipt } = messageFooter();
+	const defaultProps = { className: readReceipt({ className }) };
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "message-item-read-receipt" }
+	});
+}
+//#endregion
+//#region src/components/message-item/message-reaction.recipe.ts
+const reactionCountKeyframes = [
+	{
+		opacity: .7,
+		transform: "translateY(1px) scale(0.92)",
+		offset: 0
+	},
+	{
+		opacity: 1,
+		transform: "translateY(-1px) scale(1.16)",
+		offset: .45
+	},
+	{
+		opacity: 1,
+		transform: "translateY(0) scale(1)",
+		offset: 1
+	}
+];
+const reactionCountTiming = {
+	duration: 180,
+	easing: "cubic-bezier(0.2, 0, 0.2, 1)"
+};
+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",
+		"bg-fill-muted hover:press-overlay active:press-overlay",
+		"data-pressed:bg-attention-soft",
+		"has-data-[slot=message-reaction-error-indicator]:bg-warning-soft",
+		"outline-none focus-visible:shadow-focus",
+		"[&_[data-slot=message-reaction-glyph]>svg]:size-4"
+	],
+	errorIndicator: ["sr-only"],
+	glyph: ["inline-flex items-center justify-center leading-none", "[&>svg]:size-[13px] [&>svg]:shrink-0"],
+	count: ["inline-block origin-center font-mono tabular-nums", "text-mono-meta font-bold"],
+	addButton: [
+		"inline-flex min-w-0 items-center justify-center",
+		"transition-colors",
+		"[&_svg]:shrink-0",
+		"h-6 rounded-chip px-1.5 [&_svg]:size-4",
+		"bg-fill-muted text-foreground-muted hover:press-overlay active:press-overlay",
+		"outline-none focus-visible:shadow-focus"
+	],
+	quickRow: [
+		"flex shrink-0 items-center",
+		"justify-between gap-0.5 bg-layer-popover px-0.5 py-0.5",
+		"[&>[role=menuitem]]:size-9 [&>[role=menuitem]]:p-0 *:[[role=menuitem]]:justify-center"
+	],
+	quickButton: [
+		"flex items-center justify-center",
+		"bg-transparent transition-colors",
+		"size-9 rounded-control p-0 text-xl leading-none text-foreground-muted",
+		"hover:bg-brand-soft data-highlighted:bg-brand-soft active:bg-brand-soft",
+		"outline-none focus-visible:shadow-focus"
+	],
+	pickerContent: [
+		"inline-flex items-center",
+		"min-w-0 flex-row gap-0.5 p-1",
+		"[&>[role=menuitem]]:size-9 [&>[role=menuitem]]:p-0"
+	],
+	pickerStatic: [
+		"inline-flex items-center",
+		"min-w-0 flex-row gap-0.5 rounded-container p-1",
+		"bg-layer-popover ring-1 ring-line-seam shadow-float outline-none"
+	],
+	tooltip: ["inline-block max-w-[280px]", "px-2.5 py-1 text-footnote font-medium"],
+	tooltipNames: ["flex max-w-60 flex-wrap items-center gap-y-0.5"],
+	tooltipName: ["inline-flex min-w-0 items-baseline leading-5"],
+	tooltipNameText: ["max-w-28 truncate"],
+	tooltipSeparator: ["shrink-0", "text-foreground-on-hud/70"],
+	tooltipMeta: ["leading-5", "text-foreground-on-hud/70"]
+} });
+//#endregion
+//#region src/components/message-item/message-reaction.tsx
+function MessageReactionChip({ className, ...props }) {
+	const { chip } = messageReaction();
+	return /* @__PURE__ */ jsx(Toggle, {
+		...props,
+		type: "button",
+		"data-slot": "message-reaction-chip",
+		className: chip({ className })
+	});
+}
+function MessageReactionErrorIndicator({ className, render, ...props }) {
+	const { errorIndicator } = messageReaction();
+	const defaultProps = {
+		className: errorIndicator({ className }),
+		role: "status"
+	};
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "message-reaction-error-indicator" }
+	});
+}
+function MessageReactionGlyph({ className, render, ...props }) {
+	const { glyph: glyphSlot } = messageReaction();
+	const defaultProps = { className: glyphSlot({ className }) };
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "message-reaction-glyph" }
+	});
+}
+function MessageReactionCount({ children, className, render, ...props }) {
+	const elementRef = useRef(null);
+	const value = typeof children === "number" && Number.isFinite(children) ? children : null;
+	const previousValue = useRef(value);
+	useEffect(() => {
+		const previous = previousValue.current;
+		previousValue.current = value;
+		if (value === null || previous === null || value === previous) return;
+		const element = elementRef.current;
+		const reducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)");
+		if (!element?.animate || reducedMotion.matches) return;
+		const animation = element.animate(reactionCountKeyframes, reactionCountTiming);
+		const handleMotionChange = () => {
+			if (reducedMotion.matches) animation.cancel();
+		};
+		reducedMotion.addEventListener("change", handleMotionChange);
+		return () => {
+			animation.cancel();
+			reducedMotion.removeEventListener("change", handleMotionChange);
+		};
+	}, [value]);
+	const { count } = messageReaction();
+	const defaultProps = {
+		className: count({ className }),
+		children,
+		ref: elementRef
+	};
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "message-reaction-count" }
+	});
+}
+function MessageReactionAddButton({ className, render, ...props }) {
+	const { addButton } = messageReaction();
+	const defaultProps = {
+		type: "button",
+		className: addButton({ className })
+	};
+	return useRender({
+		defaultTagName: "button",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "message-reaction-add-button" }
+	});
+}
+function MessageReactionQuickRow({ className, render, ...props }) {
+	const { quickRow } = messageReaction();
+	const defaultProps = { className: quickRow({ className }) };
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "message-reaction-quick-row" }
+	});
+}
+function MessageReactionQuickButton({ className, render, ...props }) {
+	const { quickButton } = messageReaction();
+	const defaultProps = {
+		type: "button",
+		className: quickButton({ className })
+	};
+	return useRender({
+		defaultTagName: "button",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "message-reaction-quick-button" }
+	});
+}
+function MessageReactionPickerStatic({ className, render, ...props }) {
+	const { pickerStatic } = messageReaction();
+	const defaultProps = { className: pickerStatic({ className }) };
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "message-reaction-picker-static" }
+	});
+}
+function MessageReactionPickerContent({ className, ...props }) {
+	const { pickerContent } = messageReaction();
+	return /* @__PURE__ */ jsx(DropdownMenuContent, {
+		"data-slot": "message-reaction-picker",
+		className: pickerContent({ className }),
+		...props
+	});
+}
+function MessageReactionTooltipContent({ className, ...props }) {
+	const { tooltip } = messageReaction();
+	return /* @__PURE__ */ jsx(TooltipContent, {
+		className: tooltip({ className }),
+		...props
+	});
+}
+function MessageReactionTooltipNames({ className, render, ...props }) {
+	const { tooltipNames } = messageReaction();
+	const defaultProps = { className: tooltipNames({ className }) };
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "message-reaction-tooltip-names" }
+	});
+}
+function MessageReactionTooltipName({ className, render, ...props }) {
+	const { tooltipName } = messageReaction();
+	const defaultProps = { className: tooltipName({ className }) };
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "message-reaction-tooltip-name" }
+	});
+}
+function MessageReactionTooltipNameText({ className, render, ...props }) {
+	const { tooltipNameText } = messageReaction();
+	const defaultProps = { className: tooltipNameText({ className }) };
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "message-reaction-tooltip-name-text" }
+	});
+}
+function MessageReactionTooltipSeparator({ className, render, ...props }) {
+	const { tooltipSeparator } = messageReaction();
+	const defaultProps = { className: tooltipSeparator({ className }) };
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "message-reaction-tooltip-separator" }
+	});
+}
+function MessageReactionTooltipMeta({ className, render, ...props }) {
+	const { tooltipMeta } = messageReaction();
+	const defaultProps = { className: tooltipMeta({ className }) };
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "message-reaction-tooltip-meta" }
+	});
+}
+//#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]",
+	"[font-size:0.875em] leading-5 font-semibold",
+	"[&_svg]:size-3.5 [&_svg]:text-foreground-muted",
+	fill
+];
+const linkChip = (fill) => [...chip(fill), "text-foreground cursor-pointer hover:press-overlay active:press-overlay"];
+const messageReference = tv$1({
+	slots: {
+		root: [
+			"inline-flex items-baseline gap-1",
+			"py-0 align-baseline",
+			"[font-size:inherit] leading-[1.2em]",
+			"max-w-full truncate select-text no-underline",
+			"outline-none focus-visible:shadow-focus",
+			"[&_svg]:size-[0.857em] [&_svg]:shrink-0 [&_svg]: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",
+		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: {
+		primary: { root: [
+			"inline-flex cursor-pointer rounded-sticker px-[3px]",
+			"font-semibold text-sticker-ink no-underline",
+			"bg-brand inset-ring-[1.5px] inset-ring-sticker-ink ring-[1.5px] ring-sticker-edge",
+			"hover:press-overlay-sticker"
+		] },
+		secondary: { root: ["inline cursor-pointer font-bold text-foreground", "decoration-foreground decoration-[1.5px] underline-offset-[3px] hover:underline"] },
+		accent: { root: linkChip("bg-attention-soft") },
+		muted: { root: linkChip("bg-inactive-soft") },
+		info: { root: linkChip("bg-info-soft") },
+		link: { root: linkChip("bg-info-soft") },
+		pending: { root: chip("cursor-wait bg-inactive-soft text-foreground-muted") },
+		unavailable: { root: chip("cursor-default bg-inactive-soft text-foreground-hint") }
+	} },
+	defaultVariants: { variant: "muted" }
+});
+//#endregion
+//#region src/components/message-item/message-reference.tsx
+function useReferenceRender(className, render, props) {
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps({ className }, props),
+		state: { slot: "message-reference" }
+	});
+}
+function MessageReferenceText({ className, render, variant = "secondary", ...props }) {
+	const { root } = messageReference({ variant });
+	return useReferenceRender(root({ className }), render, props);
+}
+function MessageReferenceIndicator({ className, render, ...props }) {
+	const { indicator } = messageReference();
+	const defaultProps = { className: indicator({ className }) };
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "message-reference-indicator" }
+	});
+}
+function MessageReferenceChip({ className, render, variant = "muted", ...props }) {
+	const { root } = messageReference({ variant });
+	return useReferenceRender(root({ className }), render, props);
+}
+function MessageReferenceLabel({ className, render, ...props }) {
+	const { chipLabel } = messageReference();
+	const defaultProps = { className: chipLabel({ className }) };
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "message-reference-label" }
+	});
+}
+function MessageReferencePending({ className, render, ...props }) {
+	const { root } = messageReference({ variant: "pending" });
+	return useReferenceRender(root({ className }), render, props);
+}
+function MessageReferenceUnavailable({ className, render, ...props }) {
+	const { root } = messageReference({ variant: "unavailable" });
+	return useReferenceRender(root({ className }), render, props);
+}
+//#endregion
+//#region src/components/message-item/message-multi-select.recipe.ts
+const messageMultiSelect = tv$1({ slots: {
+	root: ["flex min-h-0 min-w-0 flex-1 flex-col"],
+	checkbox: [
+		"self-start",
+		"data-checked:shadow-none data-indeterminate:shadow-none",
+		"hover:data-checked:shadow-none hover:data-indeterminate:shadow-none",
+		"mt-2 rounded-sticker"
+	],
+	toolbar: [
+		"flex items-center",
+		"gap-2 rounded-container px-2.5 py-2",
+		"bg-layer-popover ring-1 ring-line-seam shadow-float"
+	]
+} });
+//#endregion
+//#region src/components/message-item/message-multi-select.tsx
+function MessageMultiSelect({ className, render, ...props }) {
+	const { root } = messageMultiSelect();
+	const defaultProps = { className: root({ className }) };
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "message-multi-select" }
+	});
+}
+/** Shared select-mode toolbar shell. Consumers compose the count and actions as children. */
+function MessageMultiSelectToolbar({ className, render, ...props }) {
+	const { toolbar } = messageMultiSelect();
+	const defaultProps = { className: toolbar({ className }) };
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "message-multi-select-toolbar" }
+	});
+}
+function MessageMultiSelectCheckbox({ className, ...props }) {
+	const { checkbox } = messageMultiSelect();
+	return /* @__PURE__ */ jsx(Checkbox$1, {
+		"data-slot": "message-multi-select-checkbox",
+		className: checkbox({ className }),
+		shape: "square",
+		...props
+	});
+}
+//#endregion
+//#region src/components/message-item/message-text-selection-toolbar.recipe.ts
+const messageTextSelectionToolbar = tv$1({ slots: {
+	toolbar: [
+		"flex min-w-0 items-center select-none",
+		"gap-0.5 overflow-visible rounded-container p-0.5 text-control font-bold",
+		"bg-layer-popover ring-1 ring-line-seam ring-inset shadow-float"
+	],
+	button: [
+		"flex shrink-0 items-center gap-1.5 outline-none transition-colors",
+		"h-7 rounded-control px-2.5 whitespace-nowrap text-foreground",
+		"hover:bg-fill-pressed active:bg-fill-pressed",
+		"focus-visible:shadow-focus",
+		"[&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-foreground-muted"
+	],
+	separator: ["w-px shrink-0", "mx-0.5 h-5 bg-line-hairline"]
+} });
+//#endregion
+//#region src/components/message-item/message-text-selection-toolbar.tsx
+function MessageTextSelectionToolbar({ className, ...props }) {
+	const { toolbar } = messageTextSelectionToolbar();
+	return /* @__PURE__ */ jsx(Toolbar.Root, {
+		"data-slot": "message-text-selection-toolbar",
+		className: toolbar({ className }),
+		...props
+	});
+}
+function MessageTextSelectionToolbarButton({ className, ...props }) {
+	const { button } = messageTextSelectionToolbar();
+	return /* @__PURE__ */ jsx(Toolbar.Button, {
+		"data-slot": "message-text-selection-toolbar-button",
+		type: "button",
+		className: button({ className }),
+		...props
+	});
+}
+function MessageTextSelectionToolbarSeparator({ className, ...props }) {
+	const { separator } = messageTextSelectionToolbar();
+	return /* @__PURE__ */ jsx(Toolbar.Separator, {
+		"data-slot": "message-text-selection-toolbar-separator",
+		className: separator({ className }),
+		...props
+	});
+}
+//#endregion
+//#region src/components/message-embed/message-embed.recipe.ts
+const messageEmbed = tv$1({ slots: {
+	root: [
+		"group block min-w-0 text-left",
+		"rounded-container border border-line-hairline bg-layer-card",
+		"outline-none focus-visible:shadow-focus"
+	],
+	header: ["min-w-0", "px-3 py-2"],
+	content: ["min-w-0"],
+	footer: ["min-w-0", "px-3 py-2"]
+} });
+//#endregion
+//#region src/components/message-embed/message-embed.tsx
+function MessageEmbed({ className, render, ...props }) {
+	const { root } = messageEmbed();
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps({ className: root({ className }) }, props),
+		state: { slot: "message-embed" }
+	});
+}
+function MessageEmbedHeader({ className, render, ...props }) {
+	const { header } = messageEmbed();
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps({ className: header({ className }) }, props),
+		state: { slot: "message-embed-header" }
+	});
+}
+function MessageEmbedContent({ className, render, ...props }) {
+	const { content } = messageEmbed();
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps({ className: content({ className }) }, props),
+		state: { slot: "message-embed-content" }
+	});
+}
+function MessageEmbedFooter({ className, render, ...props }) {
+	const { footer } = messageEmbed();
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps({ className: footer({ className }) }, props),
+		state: { slot: "message-embed-footer" }
+	});
+}
+//#endregion
+//#region src/components/message-quoted-preview/message-quoted-preview.recipe.ts
+const messageQuotedPreview = tv$1({ slots: {
+	root: [
+		"w-full",
+		"rounded-none border-0 border-l-2 border-line-seam bg-transparent pl-2.5",
+		"text-foreground-muted"
+	],
+	content: ["min-w-0", "p-0"],
+	header: [
+		"flex min-w-0 items-center",
+		"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"],
+	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"],
+	authorDelegatedBy: ["shrink-0 whitespace-nowrap", "text-footnote text-foreground-muted"],
+	timestamp: ["ml-auto shrink-0", "font-mono text-mono-meta tabular-nums text-foreground-hint"],
+	text: ["line-clamp-2", "text-callout text-foreground-muted"],
+	attachments: ["flex flex-wrap gap-1.5", "mt-1.5"],
+	attachment: [
+		"inline-flex items-center",
+		"h-[22px] gap-1 rounded-chip bg-fill-muted px-1.5",
+		"font-mono text-mono-meta text-foreground-muted [&_svg]:size-3.5"
+	],
+	loading: ["w-full animate-pulse", "rounded-none border-0 border-l-2 border-line-seam bg-transparent pl-2.5"],
+	unavailable: [
+		"block w-full text-left",
+		"border-l-2 border-line-seam pl-2.5",
+		"text-callout text-foreground-hint",
+		"outline-none focus-visible:shadow-focus"
+	]
+} });
+//#endregion
+//#region src/components/message-quoted-preview/message-quoted-preview.tsx
+function MessageQuotedPreview({ className, render, ...props }) {
+	const { root } = messageQuotedPreview();
+	return /* @__PURE__ */ jsx(MessageEmbed, {
+		className: root({ className }),
+		render,
+		...props
+	});
+}
+function MessageQuotedPreviewContent({ className, render, ...props }) {
+	const { content } = messageQuotedPreview();
+	return /* @__PURE__ */ jsx(MessageEmbedContent, {
+		className: content({ className }),
+		render,
+		...props
+	});
+}
+function MessageQuotedPreviewHeader({ className, render, ...props }) {
+	const { header } = messageQuotedPreview();
+	return /* @__PURE__ */ jsx(MessageEmbedHeader, {
+		className: header({ className }),
+		render,
+		...props
+	});
+}
+function MessageQuotedPreviewChannel({ className, render, ...props }) {
+	const { channel } = messageQuotedPreview();
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps({ className: channel({ className }) }, props),
+		state: { slot: "message-quoted-preview-channel" }
+	});
+}
+function MessageQuotedPreviewThread({ className, render, ...props }) {
+	const { thread } = messageQuotedPreview();
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps({ className: thread({ className }) }, props),
+		state: { slot: "message-quoted-preview-thread" }
+	});
+}
+function MessageQuotedPreviewAuthor({ className, render, ...props }) {
+	const { author } = messageQuotedPreview();
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps({ className: author({ className }) }, props),
+		state: { slot: "message-quoted-preview-author" }
+	});
+}
+function MessageQuotedPreviewAuthorName({ className, render, ...props }) {
+	const { authorName } = messageQuotedPreview();
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps({ className: authorName({ className }) }, props),
+		state: { slot: "message-quoted-preview-author-name" }
+	});
+}
+function MessageQuotedPreviewAuthorMeta({ className, render, ...props }) {
+	const { authorMeta } = messageQuotedPreview();
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps({ className: authorMeta({ className }) }, props),
+		state: { slot: "message-quoted-preview-author-meta" }
+	});
+}
+/**
+* "(sent by Friday)" after `MessageQuotedPreviewAuthorName`, when an assistant
+* sent the quoted message for its author. It never truncates; the author's
+* name gives way instead.
+*/
+function MessageQuotedPreviewAuthorDelegatedBy({ className, render, ...props }) {
+	const { authorDelegatedBy } = messageQuotedPreview();
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps({ className: authorDelegatedBy({ className }) }, props),
+		state: { slot: "message-quoted-preview-author-delegated-by" }
+	});
+}
+function MessageQuotedPreviewTimestamp({ className, render, ...props }) {
+	const { timestamp } = messageQuotedPreview();
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps({ className: timestamp({ className }) }, props),
+		state: { slot: "message-quoted-preview-timestamp" }
+	});
+}
+function MessageQuotedPreviewText({ className, render, ...props }) {
+	const { text } = messageQuotedPreview();
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps({ className: text({ className }) }, props),
+		state: { slot: "message-quoted-preview-text" }
+	});
+}
+function MessageQuotedPreviewAttachments({ className, render, ...props }) {
+	const { attachments } = messageQuotedPreview();
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps({ className: attachments({ className }) }, props),
+		state: { slot: "message-quoted-preview-attachments" }
+	});
+}
+function MessageQuotedPreviewAttachment({ className, render, ...props }) {
+	const { attachment } = messageQuotedPreview();
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps({ className: attachment({ className }) }, props),
+		state: { slot: "message-quoted-preview-attachment" }
+	});
+}
+function MessageQuotedPreviewLoading({ className, render, ...props }) {
+	const { loading } = messageQuotedPreview();
+	return /* @__PURE__ */ jsx(MessageEmbed, {
+		className: loading({ className }),
+		render,
+		...props
+	});
+}
+function MessageQuotedPreviewUnavailable({ className, render, ...props }) {
+	const { unavailable } = messageQuotedPreview();
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps({ className: unavailable({ className }) }, props),
+		state: { slot: "message-quoted-preview-unavailable" }
+	});
+}
+//#endregion
+//#region src/components/message-list/message-list.recipe.ts
+const messageList = tv$1({
+	slots: {
+		root: ["relative h-full min-h-0"],
+		viewport: ["min-w-0 overscroll-none"],
+		content: ["flex min-h-full w-full min-w-0 flex-col"],
+		dateDividerRoot: ["flex select-none items-center", "gap-2 px-4 py-3"],
+		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"],
+		notice: ["text-center", "pb-2 font-mono text-mono-meta"],
+		historyLimited: [
+			"inline-flex items-center",
+			"h-[22px] gap-1 rounded-chip px-1.5",
+			"font-mono text-mono-meta text-foreground-muted",
+			"inset-ring inset-ring-line-hairline",
+			"[&_svg]:size-3"
+		]
+	},
+	variants: { tone: {
+		faint: { notice: ["text-foreground-hint"] },
+		muted: { notice: ["text-foreground-muted"] }
+	} },
+	defaultVariants: { tone: "faint" }
+});
+const messageListJump = tv$1({
+	slots: {
+		controls: ["absolute inset-x-0 z-10 mx-auto", "flex w-fit max-w-[calc(100%-1.5rem)] flex-wrap items-center justify-center gap-x-2 gap-y-3"],
+		group: ["inline-flex shrink-0 items-stretch", "*:data-[slot=message-list-jump-pill]:rounded-e-none"],
+		dismiss: [
+			"rounded-s-none border-s-0",
+			"text-foreground-muted hover:text-foreground",
+			"[&_svg:not([class*='size-'])]:size-4",
+			"after:-inset-y-[calc(--spacing(1.5)+1.5px)] after:right-[calc(-0.75rem-1.5px)] after:left-0"
+		]
+	},
+	variants: { side: {
+		bottom: { controls: ["bottom-[calc(--spacing(3)+var(--message-list-bottom-inset,0px))]", "flex-wrap-reverse"] },
+		top: { controls: ["top-3"] }
+	} },
+	defaultVariants: { side: "bottom" }
+});
+//#endregion
+//#region src/components/message-list/message-list.tsx
+const contentStyle = { minWidth: 0 };
+function MessageList({ children, className, render, rootClassName, style, ...props }) {
+	const isMobile = useMobileViewport();
+	const { content, root, viewport } = messageList();
+	const viewportStyle = useMemo(() => ({
+		...style,
+		overflowX: "hidden"
+	}), [style]);
+	if (isMobile) return /* @__PURE__ */ jsx("div", {
+		"data-slot": "message-list",
+		className: root({ className: rootClassName }),
+		children: /* @__PURE__ */ jsx(PanelScrollViewport, {
+			...props,
+			render,
+			"data-slot": "message-list-viewport",
+			className: viewport({ className }),
+			style: viewportStyle,
+			children: /* @__PURE__ */ jsx("div", {
+				className: content(),
+				children
+			})
+		})
+	});
+	return /* @__PURE__ */ jsxs(ScrollArea$1, {
+		"data-slot": "message-list",
+		className: root({ className: rootClassName }),
+		children: [/* @__PURE__ */ jsx(ScrollAreaViewport, {
+			...props,
+			render,
+			"data-slot": "message-list-viewport",
+			className: viewport({ className }),
+			style: viewportStyle,
+			children: /* @__PURE__ */ jsx(ScrollAreaContent, {
+				className: content(),
+				style: contentStyle,
+				children
+			})
+		}), /* @__PURE__ */ jsx(ScrollAreaScrollbar, {
+			className: "me-1.5 px-0 py-1",
+			children: /* @__PURE__ */ jsx(ScrollAreaThumb, {})
+		})]
+	});
+}
+//#endregion
+//#region src/components/message-list/message-list-markers.tsx
+function MessageListDateDivider({ children, className, render, ...props }) {
+	const { dateDividerRoot, dateDividerRule, dateDividerChip } = messageList();
+	const defaultProps = {
+		"data-slot": "message-list-date-divider",
+		className: dateDividerRoot({ className }),
+		children: /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			/* @__PURE__ */ jsx("div", {
+				"aria-hidden": true,
+				className: dateDividerRule()
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: dateDividerChip(),
+				children
+			}),
+			/* @__PURE__ */ jsx("div", {
+				"aria-hidden": true,
+				className: dateDividerRule()
+			})
+		] })
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function MessageListNotice({ className, render, tone = "faint", ...props }) {
+	const { notice } = messageList({ tone });
+	const defaultProps = {
+		"data-slot": "message-list-notice",
+		className: notice({ className })
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function MessageListHistoryLimited({ className, render, ...props }) {
+	const { historyLimited } = messageList();
+	const defaultProps = {
+		"data-slot": "message-list-history-limited",
+		className: historyLimited({ className })
+	};
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+//#endregion
+//#region src/components/message-list/message-list-jump.tsx
+function MessageListJumpControls({ className, render, side = "bottom", ...props }) {
+	const { controls } = messageListJump({ side });
+	const defaultProps = {
+		"data-slot": "message-list-jump-controls",
+		"data-side": side,
+		className: controls({ className })
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function MessageListJumpPill({ className, children, render, nativeButton, ...props }) {
+	const { root, content } = buttonVariants({
+		variant: "outline",
+		size: "md"
+	});
+	return /* @__PURE__ */ jsx(Button, {
+		...props,
+		render,
+		nativeButton: nativeButton ?? defaultNativeButton(render),
+		"data-slot": "message-list-jump-pill",
+		className: root({ className }),
+		children: /* @__PURE__ */ jsx("span", {
+			"data-slot": "message-list-jump-pill-content",
+			className: content(),
+			children
+		})
+	});
+}
+/** A pill and its dismiss button, joined on one shared edge. */
+function MessageListJumpPillGroup({ className, render, ...props }) {
+	const { group } = messageListJump();
+	const defaultProps = {
+		"data-slot": "message-list-jump-pill-group",
+		className: group({ className })
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function MessageListJumpPillDismiss({ className, children, render, nativeButton, ...props }) {
+	const { root, content } = buttonVariants({
+		variant: "outline",
+		size: "icon-md"
+	});
+	const { dismiss } = messageListJump();
+	return /* @__PURE__ */ jsx(Button, {
+		...props,
+		render,
+		nativeButton: nativeButton ?? defaultNativeButton(render),
+		"data-slot": "message-list-jump-pill-dismiss",
+		className: root({ className: dismiss({ className }) }),
+		children: /* @__PURE__ */ jsx("span", {
+			"data-slot": "message-list-jump-pill-dismiss-content",
+			className: content(),
+			children
+		})
+	});
+}
+//#endregion
+export { MessageReactionTooltipNameText as $, DropdownMenuSeparator as $t, MessageTextSelectionToolbarButton as A, DialogBody as An, MessageItem as At, MessageReferenceUnavailable as B, DialogTitle as Bn, DropdownMenuCheckboxItem as Bt, MessageQuotedPreviewUnavailable as C, Tooltip$1 as Cn, MessageItemEdited as Ct, MessageEmbedHeader as D, TooltipTrigger as Dn, MessageItemAvatarSlot as Dt, MessageEmbedFooter as E, TooltipProvider as En, MessageItemSearchMatch as Et, MessageReferenceChip as F, DialogHeader as Fn, AvatarGroup as Ft, MessageReactionGlyph as G, defaultNativeButton as Gn, DropdownMenuItemCount as Gt, MessageReactionChip as H, Button$1 as Hn, DropdownMenuContent as Ht, MessageReferenceIndicator as I, DialogNav as In, AvatarGroupCount as It, MessageReactionQuickButton as J, resolveThemeScopeProps as Jn, DropdownMenuPopup as Jt, MessageReactionPickerContent as K, useParentOverlayKind as Kn, DropdownMenuItemLabel as Kt, MessageReferenceLabel as L, DialogOverlay as Ln, AvatarImage as Lt, MessageMultiSelect as M, DialogContent as Mn, Avatar$1 as Mt, MessageMultiSelectCheckbox as N, DialogDescription as Nn, AvatarBadge as Nt, messageEmbed as O, Badge as On, MessageItemContinuationTime as Ot, MessageMultiSelectToolbar as P, DialogFooter as Pn, AvatarFallback as Pt, MessageReactionTooltipName as Q, tv$1 as Qn, DropdownMenuRadioItemIndicator as Qt, MessageReferencePending as R, DialogPortal as Rn, useOverflowTitle as Rt, MessageQuotedPreviewTimestamp as S, PRESENCE_COLOR as Sn, MessageItemContent as St, MessageEmbedContent as T, TooltipPortal as Tn, MessageItemFooter as Tt, MessageReactionCount as U, buttonVariants as Un, DropdownMenuFooter as Ut, MessageReactionAddButton as V, DialogTrigger as Vn, DropdownMenuCheckboxItemIndicator as Vt, MessageReactionErrorIndicator as W, Spinner as Wn, DropdownMenuItem as Wt, MessageReactionTooltipContent as X, useTheme as Xn, DropdownMenuRadioGroup as Xt, MessageReactionQuickRow as Y, useThemeScopeProps as Yn, DropdownMenuPortal as Yt, MessageReactionTooltipMeta as Z, ThemeStateContext as Zn, DropdownMenuRadioItem as Zt, MessageQuotedPreviewContent as _, ScrollAreaThumb as _n, MessageItemSenderButton as _t, MessageListDateDivider as a, KbdGroup as an, MessageItemSavedIndicator as at, MessageQuotedPreviewText as b, Checkbox$1 as bn, MessageItemAttachments as bt, MessageList as c, PanelFooter as cn, MessageItemDelegatedAvatar as ct, MessageQuotedPreviewAttachments as d, PanelScrollViewport as dn, MessageItemDelegatedByName as dt, DropdownMenuShortcut as en, MessageReactionTooltipNames as et, MessageQuotedPreviewAuthor as f, PanelSection as fn, MessageItemHeader as ft, MessageQuotedPreviewChannel as g, ScrollAreaScrollbar as gn, MessageItemSenderBadges as gt, MessageQuotedPreviewAuthorName as h, ScrollAreaCorner as hn, MessageItemSender as ht, MessageListJumpPillGroup as i, Kbd as in, MessageItemReadReceipt as it, MessageTextSelectionToolbarSeparator as j, DialogClose as jn, searchHit as jt, MessageTextSelectionToolbar as k, Dialog$1 as kn, MessageItemGutter as kt, MessageQuotedPreview as l, PanelHeaderRoot as ln, MessageItemDelegatedBy as lt, MessageQuotedPreviewAuthorMeta as m, ScrollAreaContent as mn, MessageItemMeta as mt, MessageListJumpPill as n, DropdownMenuSubmenuTrigger as nn, MessageItemBadge as nt, MessageListHistoryLimited as o, Panel as on, MessageItemToolbar as ot, MessageQuotedPreviewAuthorDelegatedBy as p, ScrollArea$1 as pn, MessageItemInlineStatus as pt, MessageReactionPickerStatic as q, withOverlayLayer as qn, DropdownMenuLabel as qt, MessageListJumpPillDismiss as r, DropdownMenuTrigger as rn, MessageItemBadgeSeparator as rt, MessageListNotice as s, PanelBody as sn, MessageItemToolbarButton as st, MessageListJumpControls as t, DropdownMenuSubmenu as tn, MessageReactionTooltipSeparator as tt, MessageQuotedPreviewAttachment as u, PanelScrollContent as un, MessageItemDelegatedByButton as ut, MessageQuotedPreviewHeader as v, ScrollAreaViewport as vn, MessageItemSenderGroup as vt, MessageEmbed as w, TooltipContent as wn, MessageItemEmbedded as wt, MessageQuotedPreviewThread as x, CheckboxIndicator as xn, MessageItemBody as xt, MessageQuotedPreviewLoading as y, useMobileViewport as yn, MessageItemTime as yt, MessageReferenceText as z, DialogSurface as zn, DropdownMenu as zt };