@botiverse/raft-ui 0.21.2 → 0.22.0

package/dist/{inbox-item.recipe-CuJPcy-3.mjs → inbox-item.recipe-3j4DHKZ2.mjs}

@@ -1,21 +1,23 @@
 import { cn } from "./cn.mjs";
 import { Dialog } from "@base-ui/react/dialog";
-import { Check, Minus, X } from "lucide-react";
+import { ArrowLeft, Check, Minus, X } from "lucide-react";
+import { Children, Fragment, createContext, createElement, isValidElement, use, useCallback, useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "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 { createPortal, flushSync } from "react-dom";
 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 { flushSync } from "react-dom";
+import { Popover } from "@base-ui/react/popover";
+import { PointerSensor, TouchSensor, useSensor } from "@dnd-kit/core";
+import { PreviewCard } from "@base-ui/react/preview-card";
 import { Toggle } from "@base-ui/react/toggle";
 import { Toolbar } from "@base-ui/react/toolbar";
-import { PointerSensor, TouchSensor, useSensor } from "@dnd-kit/core";
 //#region src/lib/decision-width.ts
 /**
 * The width of every decision dialog (dialog.md#variants): AlertDialog and a
@@ -54,6 +56,103 @@ const headEdges = ["px-5 max-md:px-4", ...headEdgePull];
 * as the arithmetic so it follows the control tokens wherever they switch.
 */
 const controlIconInset = "[--icon-inset:calc((var(--control-height)-var(--control-icon-size))/2)]";
+/**
+* The row of buttons while `data-stacked` is set: a full-width column. A
+* button alone in a wrapper (a tooltip's trigger) fills the width too.
+*/
+const stackedActions = [
+	"data-stacked:flex-col-reverse",
+	"data-stacked:items-stretch",
+	"data-stacked:*:data-[slot=button]:w-full data-stacked:[&>*>[data-slot=button]:only-child]:w-full",
+	...[].map((value) => `data-stacked:${value}`)
+];
+function assignRef$2(ref, value) {
+	if (typeof ref === "function") ref(value);
+	else if (ref) ref.current = value;
+}
+function contentWidth(element) {
+	const style = getComputedStyle(element);
+	return element.getBoundingClientRect().width - (Number.parseFloat(style.paddingLeft) || 0) - (Number.parseFloat(style.paddingRight) || 0) - (Number.parseFloat(style.borderLeftWidth) || 0) - (Number.parseFloat(style.borderRightWidth) || 0);
+}
+/**
+* Whether a row of buttons must stack: laid out as a row (`data-stacked` off
+* for the measure and put back at once, inside one frame, so nothing is
+* painted in between and the layouts never flip back and forth), its children
+* run past the content box of `frame`. Children that may shrink (a label that
+* truncates or wraps) shrink first, so only content that can't, the buttons,
+* counts as not fitting. Undefined while the frame is hidden (a sheet hides
+* its footer), so nothing is decided then.
+*/
+function rowOverflows(row, frame) {
+	if (!(frame.getBoundingClientRect().width > 0)) return void 0;
+	const wasStacked = row.hasAttribute("data-stacked");
+	if (wasStacked) row.removeAttribute("data-stacked");
+	const available = contentWidth(frame);
+	let start = Number.POSITIVE_INFINITY;
+	let end = Number.NEGATIVE_INFINITY;
+	for (const child of row.children) {
+		const box = child.getBoundingClientRect();
+		if (box.width === 0 && box.height === 0) continue;
+		const style = getComputedStyle(child);
+		start = Math.min(start, box.left - (Number.parseFloat(style.marginLeft) || 0));
+		end = Math.max(end, box.right + (Number.parseFloat(style.marginRight) || 0));
+	}
+	if (wasStacked) row.setAttribute("data-stacked", "");
+	return end - start > available + .5;
+}
+/**
+* Sets `data-stacked` on a footer's row of buttons when it doesn't fit on one
+* line (rowOverflows). Pass the returned ref to the row. It must fit its own
+* content box, or with `inParent` (the group of buttons beside a note) its
+* parent's. As BannerAction's `data-wrap`, it measures again when the footer
+* resizes, the buttons change or a web font arrives.
+*/
+function useStackedActions(ref, inParent = false) {
+	const [row, setRow] = useState(null);
+	const [stacked, setStacked] = useState(false);
+	const callbackRef = useCallback((node) => {
+		setRow(node);
+		assignRef$2(ref, node);
+	}, [ref]);
+	useLayoutEffect(() => {
+		const frame = inParent ? row?.parentElement : row;
+		if (!row || !frame || typeof ResizeObserver === "undefined") return;
+		const measure = () => {
+			const overflows = rowOverflows(row, frame);
+			if (overflows !== void 0) setStacked(overflows);
+		};
+		let raf = 0;
+		const schedule = () => {
+			cancelAnimationFrame(raf);
+			raf = requestAnimationFrame(measure);
+		};
+		measure();
+		const resize = new ResizeObserver(schedule);
+		resize.observe(frame);
+		resize.observe(row);
+		for (const child of row.children) resize.observe(child);
+		const mutation = new MutationObserver(schedule);
+		mutation.observe(row, {
+			childList: true,
+			characterData: true,
+			subtree: true
+		});
+		const fonts = typeof document.fonts === "undefined" ? void 0 : document.fonts;
+		let live = true;
+		fonts?.ready.then(() => {
+			if (live) schedule();
+		});
+		fonts?.addEventListener("loadingdone", schedule);
+		return () => {
+			live = false;
+			cancelAnimationFrame(raf);
+			resize.disconnect();
+			mutation.disconnect();
+			fonts?.removeEventListener("loadingdone", schedule);
+		};
+	}, [row, inParent]);
+	return [stacked, callbackRef];
+}
 //#endregion
 //#region src/lib/tv.ts
 const tv$1 = ((options) => {
@@ -97,6 +196,16 @@ function useThemeScopeProps(props) {
 //#endregion
 //#region src/lib/overlay-depth.tsx
 const OverlayStackContext = createContext([]);
+/**
+* Tells everything under it that a modal surface is open, so a raft-ui
+* Dialog, AlertDialog or Drawer opened from inside draws the lighter nested
+* scrim (design/foundations/elevation.md#stacked-overlays). raft-ui's own
+* roots add one by themselves; an app's own modal (its own backdrop, Esc and
+* focus) wraps its scrim and its content in one to join the stack, and reads
+* `useParentOverlayKind` inside it to pick its own scrim. Modal overlays only:
+* a non-modal one passes `modal={false}`, adds nothing, and must not call
+* `useParentOverlayKind` (it would read the layer below as its own).
+*/
 function OverlayLayerProvider({ kind, modal, children }) {
 	const stack = useContext(OverlayStackContext);
 	const value = useMemo(() => modal ? [...stack, kind] : stack, [
@@ -111,8 +220,14 @@ function OverlayLayerProvider({ kind, modal, 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.
+* it is the first. Call it inside the surface's own `OverlayLayerProvider`
+* (for raft-ui's overlays, inside their root): the last entry is the surface
+* itself and the one before it is its parent. Not null means the surface is
+* stacked over another and draws `layer-backdrop-nested` instead of
+* `layer-backdrop`. Modal overlays only: under `modal={false}` nothing is
+* added, so the last entry is the parent and this returns the wrong layer. It reads React context, so it sees the surfaces whose
+* tree this one is rendered in, portals included; one opened from outside
+* that tree is not stacked on it here.
 */
 function useParentOverlayKind() {
 	const stack = useContext(OverlayStackContext);
@@ -410,6 +525,141 @@ function Button$1({ variant, size, loading = false, loadingLabel = "Loading", di
 	});
 }
 //#endregion
+//#region src/components/dialog/dialog-sheet-context.ts
+const NO_SHEET = {
+	sheet: false,
+	commitSlot: null,
+	setCommitSlot: () => void 0,
+	bodyEndSlot: null,
+	setBodyEndSlot: () => void 0
+};
+const DialogSheetContext = createContext(NO_SHEET);
+function useDialogSheet() {
+	return useContext(DialogSheetContext);
+}
+/** Inside the sheet's head: its × is a pushed page's leading action. */
+const DialogSheetHeadContext = createContext(false);
+function useInDialogSheetHead() {
+	return useContext(DialogSheetHeadContext);
+}
+/**
+* Every overlay surface starts outside any sheet: a confirm, a dialog or a
+* drawer opened from inside a sheet keeps its own head, footer and commit
+* button instead of taking the sheet's.
+*/
+function DialogSheetReset({ children }) {
+	return createElement(DialogSheetContext.Provider, { value: NO_SHEET }, createElement(DialogSheetHeadContext.Provider, { value: false }, children));
+}
+/**
+* A dialog drawn as a phone sheet (design: dialog.md "On a phone"). The
+* surface is DialogContent's frame docked to the bottom, 90% of the screen
+* tall, rounded on its top corners, sliding up as a bottom sheet does; its
+* head is a pushed page's head (× at the start, the title, the commit button
+* at the end); its body keeps the phone's 16px margin and the home indicator's
+* inset. Merged over DialogContent's classes, so these win.
+*/
+const dialogSheet = tv$1({ slots: {
+	content: [
+		"fixed inset-x-0 top-auto bottom-0 left-0 h-[90dvh] max-h-none w-full max-w-none translate-none",
+		"rounded-none rounded-t-dialog",
+		"pr-[env(safe-area-inset-right,0px)] pl-[env(safe-area-inset-left,0px)]",
+		"transition-transform duration-240 ease-slide data-ending-style:duration-180",
+		"data-starting-style:translate-y-full data-ending-style:translate-y-full",
+		"motion-reduce:transition-none"
+	],
+	overlay: [
+		"transition-opacity duration-240 ease-slide data-ending-style:duration-180",
+		"data-starting-style:opacity-0 data-ending-style:opacity-0",
+		"motion-reduce:transition-none"
+	],
+	header: ["flex h-14 shrink-0 items-center gap-2 px-4 pt-0", "border-b border-line-seam"],
+	title: ["min-w-0 flex-1 truncate"],
+	commitSlot: ["flex shrink-0 items-center empty:hidden"],
+	body: ["min-h-0 content-start", "px-4 pt-4 first:pt-4 pb-[max(16px,env(safe-area-inset-bottom,0px))]"],
+	barBody: ["block overflow-y-auto"],
+	bodyEnd: ["mt-4 empty:hidden", "text-start font-sans text-footnote text-foreground-muted *:data-[slot=text-link]:text-footnote"]
+} });
+//#endregion
+//#region src/components/text-link/text-link.tsx
+const textLinkVariants = tv$1({
+	base: [
+		"rounded-[2px]",
+		"decoration-[1.5px] underline-offset-[3px] not-disabled:hover:underline",
+		"outline-none focus-visible:shadow-focus",
+		"disabled:cursor-not-allowed disabled:text-foreground-disabled"
+	],
+	variants: { variant: {
+		muted: ["font-medium text-foreground-muted", "hover:text-foreground"],
+		strong: ["font-semibold text-foreground"]
+	} },
+	defaultVariants: { variant: "muted" }
+});
+function TextLink({ variant, className, render, ...props }) {
+	const defaultProps = {
+		className: textLinkVariants({
+			variant,
+			className
+		}),
+		...render ? {} : { type: "button" }
+	};
+	return useRender({
+		defaultTagName: "button",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "text-link" }
+	});
+}
+//#endregion
+//#region src/components/panel/panel-action.recipe.ts
+const panelActionBase = tv$1({ base: [
+	"relative inline-flex w-auto shrink-0 items-center justify-center",
+	"overflow-visible font-sans leading-none tabular-nums select-none outline-none",
+	"transition-all duration-100",
+	"[&>svg]:pointer-events-none [&>svg]:shrink-0",
+	"h-control min-w-control rounded-control border-[1.5px] border-transparent bg-transparent py-0",
+	"px-2 md:pointer-fine:px-[5px]",
+	"after:absolute after:-inset-control-hit",
+	"text-foreground",
+	"hover:bg-fill-medium active:bg-fill-medium",
+	"focus-visible:shadow-focus",
+	"[&>svg]:size-control-icon",
+	controlIconInset
+] });
+const panelAction = tv$1({
+	extend: panelActionBase,
+	base: [
+		"whitespace-nowrap",
+		"disabled:pointer-events-none disabled:transform-none",
+		"gap-1.5 text-control font-bold",
+		"disabled:bg-transparent disabled:text-foreground-disabled disabled:opacity-100",
+		"aria-pressed:border-sticker-ink aria-pressed:bg-brand aria-pressed:text-sticker-ink aria-pressed:ring-[1.5px] aria-pressed:ring-sticker-edge",
+		"aria-pressed:active:overlay-sticker-medium"
+	]
+});
+const panelToggleAction = tv$1({
+	extend: panelActionBase,
+	base: [
+		"data-disabled:pointer-events-none data-disabled:transform-none",
+		"gap-1.5 text-control font-bold",
+		"data-disabled:bg-transparent data-disabled:text-foreground-disabled data-disabled:opacity-100",
+		"data-pressed:border-sticker-ink data-pressed:bg-brand data-pressed:text-sticker-ink data-pressed:ring-[1.5px] data-pressed:ring-sticker-edge",
+		"data-pressed:active:overlay-sticker-medium"
+	]
+});
+//#endregion
+//#region src/components/panel/panel-action.tsx
+function PanelAction({ className, render, nativeButton, ...props }) {
+	return /* @__PURE__ */ jsx(Button, {
+		...props,
+		render,
+		nativeButton: nativeButton ?? defaultNativeButton(render),
+		type: "button",
+		"data-slot": "panel-action",
+		"data-icon-inset": "",
+		className: panelAction({ className })
+	});
+}
+//#endregion
 //#region src/components/dialog/dialog.tsx
 const dialog = tv$1({
 	slots: {
@@ -430,7 +680,18 @@ const dialog = tv$1({
 			"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"],
+		footer: [
+			"flex shrink-0 items-center justify-end",
+			...stackedActions,
+			"gap-2 px-5 pb-5 first:pt-5 [[data-slot=dialog-header]+&]:pt-5",
+			"*:data-[slot=text-link]:text-footnote"
+		],
+		footerNote: ["m-0 md:me-2 md:flex-1", "text-start font-sans text-footnote text-pretty text-foreground-muted md:whitespace-nowrap"],
+		footerActions: [
+			"ms-auto flex shrink-0 items-center justify-end gap-2",
+			...stackedActions,
+			"data-stacked:ms-0 data-stacked:w-full"
+		],
 		title: ["m-0 min-w-0 text-foreground", "font-sans text-headline font-bold"],
 		description: ["m-0", "font-sans text-subhead text-foreground-muted"]
 	},
@@ -462,6 +723,10 @@ const dialog = tv$1({
 		nested: {
 			false: {},
 			true: { overlay: ["bg-layer-backdrop-nested"] }
+		},
+		start: {
+			false: {},
+			true: { footer: ["flex-wrap justify-between"] }
 		}
 	},
 	defaultVariants: {
@@ -502,6 +767,7 @@ function DialogOverlay({ className, layer, ...props }) {
 		...props
 	});
 }
+const DialogSizeContext = createContext(void 0);
 function DialogContent({ className, children, portalProps, overlay, size, layer, ...props }) {
 	const { content } = dialog({
 		size,
@@ -517,11 +783,15 @@ function DialogContent({ className, children, portalProps, overlay, size, layer,
 			"data-slot": "dialog-content",
 			className: content({ className }),
 			...props,
-			children
+			children: /* @__PURE__ */ jsx(DialogSizeContext.Provider, {
+				value: size ?? (/(^|\s)max-w-/.test(className ?? "") ? void 0 : "md"),
+				children: /* @__PURE__ */ jsx(DialogSheetReset, { children })
+			})
 		})]
 	});
 }
 function DialogClose({ className, variant, size, children, render, "aria-label": ariaLabel, ...props }) {
+	const inSheetHead = useInDialogSheetHead();
 	if (render) return /* @__PURE__ */ jsx(Dialog.Close, {
 		"data-slot": "dialog-close",
 		render,
@@ -529,6 +799,15 @@ function DialogClose({ className, variant, size, children, render, "aria-label":
 		...props,
 		children
 	});
+	if (inSheetHead) return /* @__PURE__ */ jsx(Dialog.Close, {
+		"data-slot": "dialog-close",
+		render: /* @__PURE__ */ jsx(PanelAction, {
+			"aria-label": ariaLabel ?? "Close",
+			className
+		}),
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(X, {})
+	});
 	return /* @__PURE__ */ jsx(Dialog.Close, {
 		"data-slot": "dialog-close",
 		render: /* @__PURE__ */ jsx(Button$1, {
@@ -541,35 +820,149 @@ function DialogClose({ className, variant, size, children, render, "aria-label":
 		children: children ?? /* @__PURE__ */ jsx(X, { className: "size-4.5" })
 	});
 }
-function DialogHeader({ className, bar = false, ...props }) {
+/**
+* Back, in a later step of a flow drawn as a phone sheet: it takes the head's
+* start in place of × (stdrc, 2026-10-22). The sheet is a stack of steps, and
+* Back undoes one, as on a pushed page; Esc still closes. Put it in
+* `DialogHeader` beside the `DialogClose`, from the second step on; it draws
+* nothing outside a sheet, where Back stays in the footer. Its icon is
+* `arrow-left`, as every Back (Alignment, "The ends of a header").
+*/
+function DialogSheetBack({ className, children, "aria-label": ariaLabel, ...props }) {
+	if (!useInDialogSheetHead()) return null;
+	return /* @__PURE__ */ jsx(PanelAction, {
+		"data-slot": "dialog-sheet-back",
+		"aria-label": ariaLabel ?? "Back",
+		className,
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(ArrowLeft, {})
+	});
+}
+function DialogHeader({ className, bar = false, children, ...props }) {
+	const { sheet, setCommitSlot } = useDialogSheet();
+	const items = sheet ? Children.toArray(children) : [];
+	const backs = items.filter((item) => isValidElement(item) && item.type === DialogSheetBack);
+	const closes = items.filter((item) => isValidElement(item) && item.type === DialogClose);
+	const missingLeading = sheet && backs.length === 0 && closes.length === 0;
+	useEffect(() => {
+		if (process.env.NODE_ENV === "production" || !missingLeading) return;
+		console.warn("raft-ui: a DialogHeader drawn as a phone sheet has no DialogClose (or DialogSheetBack) as a direct child, so the sheet has no × at the start of its head. Put DialogClose directly in DialogHeader, not inside a Tooltip, a Fragment or a component of your own.");
+	}, [missingLeading]);
+	if (sheet) {
+		const rest = items.filter((item) => !backs.includes(item) && !closes.includes(item));
+		const head = dialogSheet();
+		return /* @__PURE__ */ jsxs("div", {
+			"data-slot": "dialog-header",
+			"data-sheet": "",
+			className: dialog({ bar: false }).header({ className: cn(head.header(), className) }),
+			...props,
+			children: [/* @__PURE__ */ jsxs(DialogSheetHeadContext.Provider, {
+				value: true,
+				children: [backs.length > 0 ? backs : closes, rest]
+			}), /* @__PURE__ */ jsx("div", {
+				ref: setCommitSlot,
+				"data-slot": "dialog-commit-slot",
+				className: head.commitSlot()
+			})]
+		});
+	}
 	const { header } = dialog({ bar });
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "dialog-header",
 		className: header({ className }),
-		...props
+		...props,
+		children
 	});
 }
-function DialogBody({ className, bar = false, ...props }) {
+function DialogBody({ className, bar = false, children, ...props }) {
+	const { sheet, setBodyEndSlot } = useDialogSheet();
 	const { body } = dialog({ bar });
-	return /* @__PURE__ */ jsx("div", {
+	const sheetBody = sheet ? cn(bar && dialogSheet().barBody(), dialogSheet().body()) : void 0;
+	return /* @__PURE__ */ jsxs("div", {
 		"data-slot": "dialog-body",
-		className: body({ className }),
-		...props
+		className: body({ className: sheetBody ? cn(sheetBody, className) : className }),
+		...props,
+		children: [children, sheet ? /* @__PURE__ */ jsx("div", {
+			ref: setBodyEndSlot,
+			"data-slot": "dialog-sheet-body-end",
+			className: dialogSheet().bodyEnd()
+		}) : null]
 	});
 }
-function DialogFooter({ className, bar = false, ...props }) {
-	const { footer } = dialog({ bar });
-	return /* @__PURE__ */ jsx("div", {
+function DialogFooter({ className, bar = false, hidden, children, ref, ...props }) {
+	const { sheet, bodyEndSlot } = useDialogSheet();
+	const items = Children.toArray(children);
+	const start = items.find((item) => isValidElement(item) && item.type === DialogFooterNote && hasNoteContent(item.props.children)) ?? (isValidElement(items[0]) && items[0].type === TextLink ? items[0] : void 0);
+	const [stacked, rowRef] = useStackedActions(start == null ? ref : void 0, start != null);
+	const { footer, footerActions } = dialog({
+		bar,
+		start: start != null
+	});
+	const stackedProps = stacked ? { "data-stacked": "" } : {};
+	if (start == null) return /* @__PURE__ */ jsx("div", {
 		"data-slot": "dialog-footer",
+		ref: rowRef,
 		className: footer({ className }),
-		...props
+		hidden: sheet || hidden,
+		...stackedProps,
+		...props,
+		children
+	});
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [sheet && bodyEndSlot ? createPortal(start, bodyEndSlot) : null, /* @__PURE__ */ jsxs("div", {
+		"data-slot": "dialog-footer",
+		ref,
+		className: footer({ className }),
+		hidden: sheet || hidden,
+		...props,
+		children: [sheet ? null : start, /* @__PURE__ */ jsx("div", {
+			"data-slot": "dialog-footer-actions",
+			ref: rowRef,
+			className: footerActions(),
+			...stackedProps,
+			children: items.filter((item) => item !== start)
+		})]
+	})] });
+}
+/**
+* Whether a note has anything to show: not only null, false or "", but also
+* whitespace and an empty array (`{items.map(...)}` of nothing). Numbers,
+* 0 included, and elements count.
+*/
+function hasNoteContent(children) {
+	return Children.toArray(children).some((child) => typeof child !== "string" || child.trim() !== "");
+}
+/**
+* One short line at the start of `DialogFooter` that says what the commit
+* button will do ("You'll be billed $8 per member each month"). Muted footnote
+* text, start-aligned and never cut. Only in a `lg` or `wide` dialog, and at
+* most 40 characters: on a desktop it is one line beside the buttons and never
+* wraps; on a phone it goes above the buttons when they don't fit beside it,
+* and may wrap to 2 lines. In a phone sheet, which has no footer, it moves
+* to the end of the body. Longer copy belongs in the body. A footer holds a note or a `TextLink`,
+* never both.
+*/
+function DialogFooterNote({ className, children, ...props }) {
+	const { footerNote } = dialog();
+	const size = useContext(DialogSizeContext);
+	useEffect(() => {
+		if (process.env.NODE_ENV === "production") return;
+		if (size === "sm" || size === "md") console.warn(`raft-ui: a DialogFooterNote is in a size="${size}" dialog. A footer note fits beside the buttons only in a size="lg" or size="wide" dialog; put the sentence in DialogBody instead.`);
+	}, [size]);
+	if (!hasNoteContent(children)) return null;
+	return /* @__PURE__ */ jsx("p", {
+		"data-slot": "dialog-footer-note",
+		className: footerNote({ className }),
+		...props,
+		children
 	});
 }
 function DialogTitle({ className, ...props }) {
+	const inSheetHead = useInDialogSheetHead();
 	const { title } = dialog();
+	const classes = inSheetHead ? cn(dialogSheet().title(), className) : className;
 	return /* @__PURE__ */ jsx(Dialog.Title, {
 		"data-slot": "dialog-title",
-		className: title({ className }),
+		className: title({ className: classes }),
 		...props
 	});
 }
@@ -593,7 +986,7 @@ const dialogSurface = tv$1({ slots: { root: [
 * 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 }) {
+function DialogSurface({ className, render, children, ...props }) {
 	const { root } = dialogSurface();
 	return useRender({
 		defaultTagName: "div",
@@ -601,7 +994,7 @@ function DialogSurface({ className, render, ...props }) {
 		props: mergeProps({
 			"data-slot": "dialog-surface",
 			className: root({ className })
-		}, props)
+		}, props, { children: /* @__PURE__ */ jsx(DialogSheetReset, { children }) })
 	});
 }
 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"] } });
@@ -618,6 +1011,206 @@ function DialogNav({ className, render, ...props }) {
 	});
 }
 //#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/dialog/dialog-sheet.tsx
+/**
+* DialogContent for a dialog with several fields, a long list or steps. On a
+* desktop and a tablet it is DialogContent, the same DOM and classes. Below
+* 768px it is a sheet: docked to the bottom, 90% of the screen tall, sliding
+* up over its scrim; `DialogHeader` becomes a pushed page's head (× at the
+* start, the title, the `DialogCommit` button at the end), `DialogFooter` is
+* hidden (× is Cancel) and `DialogBody` scrolls on the phone's 16px margin
+* above the home indicator. Base UI keeps Esc, focus and close.
+*/
+function DialogSheetContent({ className, overlay, style, ref, children, ...props }) {
+	const phone = useMobileViewport();
+	const [commitSlot, setCommitSlot] = useState(null);
+	const [bodyEndSlot, setBodyEndSlot] = useState(null);
+	const [popup, setPopup] = useState(null);
+	const keyboardBox = useSheetKeyboardBox(phone);
+	useRevealNewProblems(phone ? popup : null);
+	const state = useMemo(() => ({
+		sheet: phone,
+		commitSlot: phone ? commitSlot : null,
+		setCommitSlot,
+		bodyEndSlot: phone ? bodyEndSlot : null,
+		setBodyEndSlot
+	}), [
+		phone,
+		commitSlot,
+		bodyEndSlot
+	]);
+	const setRef = useCallback((element) => {
+		setPopup(element);
+		assignRef$1(ref, element);
+	}, [ref]);
+	const sheet = dialogSheet();
+	const sheetOverlay = useMemo(() => overlay === false ? false : {
+		...typeof overlay === "object" ? overlay : null,
+		className: cn(dialogSheet().overlay(), typeof overlay === "object" ? overlay.className : ""),
+		children: /* @__PURE__ */ jsx("span", {
+			"aria-hidden": true,
+			className: "absolute inset-0"
+		})
+	}, [overlay]);
+	const sheetStyle = useMemo(() => keyboardBox ? {
+		...style,
+		...keyboardBox
+	} : style, [style, keyboardBox]);
+	return /* @__PURE__ */ jsx(DialogContent, {
+		...props,
+		ref: setRef,
+		overlay: phone ? sheetOverlay : overlay,
+		className: phone ? cn(className, sheet.content()) : className,
+		style: phone ? sheetStyle : style,
+		"data-sheet": phone ? "" : void 0,
+		children: /* @__PURE__ */ jsx(DialogSheetContext.Provider, {
+			value: state,
+			children
+		})
+	});
+}
+function assignRef$1(ref, value) {
+	if (typeof ref === "function") ref(value);
+	else if (ref) ref.current = value;
+}
+/**
+* The dialog's one commit button: a `Button`, written where it goes on a
+* desktop (the end of `DialogFooter`). In a `DialogSheetContent` below 768px
+* it is drawn at the end of the sheet's head instead, the same button (color,
+* words, disabled and loading state) at `size="md"`. In a flow of steps, write
+* each step's button as one (Next, then the last step's action).
+*
+* A submit button stays its form's default button in the head: it is tied to
+* the form it was written in by the form's `id` (the `form` attribute), so a
+* click and Enter in a field submit, and neither does while it is disabled.
+* Give that form an `id`, or pass `form`. Without one a click still submits
+* the form, but Enter in a field doesn't.
+*/
+function DialogCommit({ size, form, onClick, ...props }) {
+	const { commitSlot } = useDialogSheet();
+	const anchorRef = useRef(null);
+	const [writtenIn, setWrittenIn] = useState(null);
+	useLayoutEffect(() => {
+		if (!commitSlot || form) return;
+		const found = anchorRef.current?.closest("form") ?? null;
+		setWrittenIn(found);
+		if (process.env.NODE_ENV === "production" || props.type !== "submit" || found?.id) return;
+		console.warn(found ? "raft-ui: a submit DialogCommit is drawn in a phone sheet's head, outside its form, and the form has no id, so Enter in a field doesn't submit it (a click still does). Give the form an id, or pass `form` to DialogCommit." : "raft-ui: a submit DialogCommit in a phone sheet isn't inside a form and has no `form`, so it submits nothing. Pass `form` with the form's id.");
+	}, [
+		commitSlot,
+		form,
+		props.type
+	]);
+	const handleClick = useCallback((event) => {
+		onClick?.(event);
+		if (!event.defaultPrevented && props.type === "submit" && writtenIn && !writtenIn.id) {
+			event.preventDefault();
+			writtenIn.requestSubmit();
+		}
+	}, [
+		onClick,
+		props.type,
+		writtenIn
+	]);
+	if (!commitSlot) return /* @__PURE__ */ jsx(Button$1, {
+		size,
+		form,
+		onClick,
+		...props
+	});
+	const linkedForm = form ?? (writtenIn?.id || void 0);
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+		ref: anchorRef,
+		hidden: true
+	}), createPortal(/* @__PURE__ */ jsx(Button$1, {
+		size: "md",
+		form: linkedForm,
+		onClick: handleClick,
+		...props
+	}), commitSlot)] });
+}
+/**
+* The sheet's box while the on-screen keyboard is up: docked to the top of the
+* keyboard, as tall as the visual viewport allows up to its usual 90% of the
+* window. With the keyboard up the visual viewport is shorter than that, so
+* the sheet fills it: the head stays in view and the body scrolls above the
+* keyboard. `undefined` otherwise (the CSS box).
+*/
+function useSheetKeyboardBox(active) {
+	const [box, setBox] = useState(void 0);
+	useEffect(() => {
+		const viewport = typeof window === "undefined" ? void 0 : window.visualViewport;
+		if (!active || !viewport) return;
+		const update = () => {
+			const focused = document.activeElement;
+			const keyboardUp = (focused instanceof HTMLInputElement || focused instanceof HTMLTextAreaElement || focused instanceof HTMLElement && focused.isContentEditable) && window.innerHeight - viewport.height > 100;
+			const height = Math.round(Math.min(viewport.height, window.innerHeight * .9));
+			const top = Math.round(Math.max(viewport.offsetTop, 0) + viewport.height - height);
+			setBox((previous) => {
+				if (!keyboardUp) return void 0;
+				return previous?.top === `${top}px` && previous?.height === `${height}px` ? previous : {
+					top: `${top}px`,
+					bottom: "auto",
+					height: `${height}px`
+				};
+			});
+		};
+		viewport.addEventListener("resize", update);
+		viewport.addEventListener("scroll", update, { passive: true });
+		document.addEventListener("focusin", update);
+		document.addEventListener("focusout", update);
+		return () => {
+			viewport.removeEventListener("resize", update);
+			viewport.removeEventListener("scroll", update);
+			document.removeEventListener("focusin", update);
+			document.removeEventListener("focusout", update);
+		};
+	}, [active]);
+	return active ? box : void 0;
+}
+/**
+* The commit is at the top of a sheet, so an error a failed commit adds near
+* the bottom of a long form would appear out of sight. A problem added after
+* the sheet opens (an alert, or a warning or destructive Banner) is scrolled
+* into view.
+*/
+const PROBLEM_SELECTOR = "[role=alert], [data-slot=banner][data-status=warning], [data-slot=banner][data-status=destructive]";
+function useRevealNewProblems(popup) {
+	useEffect(() => {
+		if (!popup || typeof MutationObserver === "undefined") return;
+		const observer = new MutationObserver((records) => {
+			for (const record of records) for (const node of record.addedNodes) {
+				if (!(node instanceof Element)) continue;
+				const problem = node.matches(PROBLEM_SELECTOR) ? node : node.querySelector(PROBLEM_SELECTOR);
+				if (problem) {
+					problem.scrollIntoView?.({ block: "nearest" });
+					return;
+				}
+			}
+		});
+		observer.observe(popup, {
+			childList: true,
+			subtree: true
+		});
+		return () => observer.disconnect();
+	}, [popup]);
+}
+//#endregion
 //#region src/components/badge/badge.tsx
 const badge = tv$1({
 	slots: { root: [
@@ -799,36 +1392,6 @@ function Experimental(props) {
 }
 const Badge = Object.assign(BadgeRoot, { Experimental });
 //#endregion
-//#region src/components/text-link/text-link.tsx
-const textLinkVariants = tv$1({
-	base: [
-		"rounded-[2px]",
-		"decoration-[1.5px] underline-offset-[3px] not-disabled:hover:underline",
-		"outline-none focus-visible:shadow-focus",
-		"disabled:cursor-not-allowed disabled:text-foreground-disabled"
-	],
-	variants: { variant: {
-		muted: ["font-medium text-foreground-muted", "hover:text-foreground"],
-		strong: ["font-semibold text-foreground"]
-	} },
-	defaultVariants: { variant: "muted" }
-});
-function TextLink({ variant, className, render, ...props }) {
-	const defaultProps = {
-		className: textLinkVariants({
-			variant,
-			className
-		}),
-		...render ? {} : { type: "button" }
-	};
-	return useRender({
-		defaultTagName: "button",
-		render,
-		props: mergeProps(defaultProps, props),
-		state: { slot: "text-link" }
-	});
-}
-//#endregion
 //#region src/components/tooltip/tooltip.tsx
 const tooltip = tv$1({
 	slots: {
@@ -1110,21 +1673,6 @@ function Checkbox$1({ shape = "square", className, ...props }) {
 	});
 }
 //#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"],
@@ -1508,138 +2056,927 @@ function DropdownMenuLabel({ className, ...props }) {
 		...props
 	});
 }
-function DropdownMenuShortcut({ className, ...props }) {
-	const { shortcut } = dropdownMenu();
-	return /* @__PURE__ */ jsx(Kbd, {
-		"data-slot": "dropdown-menu-shortcut",
-		className: shortcut({ 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
+	});
+}
+/**
+* One choice that is another page, such as the same page in another
+* language: a link, so it opens in a new tab and can be copied. Its
+* `href` goes on the item; `current` marks the page being shown.
+*/
+function DropdownMenuLinkItem({ current = false, className, children, ...props }) {
+	const { radioItem, radioLabel, indicator } = dropdownMenu();
+	return /* @__PURE__ */ jsxs(Menu.LinkItem, {
+		"data-slot": "dropdown-menu-link-item",
+		"aria-current": current ? "page" : void 0,
+		"data-checked": current ? "" : void 0,
+		className: radioItem({ className }),
+		...props,
+		children: [renderRadioItemChildren(children, radioLabel()), current ? /* @__PURE__ */ jsx("span", {
+			className: indicator(),
+			children: /* @__PURE__ */ jsx(DropdownMenuCheckIcon, {})
+		}) : null]
+	});
+}
+//#endregion
+//#region src/components/mobile-nav/mobile-nav.tsx
+const mobileNav = tv$1({ slots: {
+	root: [
+		"grid w-full flex-none grid-flow-col auto-cols-fr items-start gap-0",
+		"border-t border-line-seam bg-layer-card px-2 pt-1.5 text-foreground-hint",
+		"pb-[max(8px,min(env(safe-area-inset-bottom,0px),34px))]"
+	],
+	item: [
+		"relative inline-flex shrink-0 items-center outline-none",
+		"disabled:pointer-events-none disabled:opacity-45",
+		"[&_svg]:shrink-0",
+		"isolate min-w-0 flex-col justify-start gap-[7px] border-0 px-0 pt-1 pb-0",
+		"font-sans text-[10px]/3 font-semibold text-foreground-hint",
+		"*:relative *:z-10 [&_svg]:size-[22px] [&_svg]:stroke-2",
+		"before:pointer-events-none before:absolute before:top-0 before:left-1/2 before:z-0 before:-translate-x-1/2",
+		"before:h-[30px] before:w-14 before:rounded-control before:border-[1.5px] before:border-transparent before:content-['']",
+		"active:before:bg-fill-medium",
+		"data-[selected=true]:font-bold data-[selected=true]:text-foreground",
+		"data-[selected=true]:[&_svg]:text-sticker-ink",
+		"data-[selected=true]:before:border-sticker-ink data-[selected=true]:before:bg-brand data-[selected=true]:before:ring-[1.5px] data-[selected=true]:before:ring-sticker-edge",
+		"data-[selected=true]:active:before:overlay-sticker-medium",
+		"rounded-control focus-visible:shadow-focus"
+	],
+	itemLabel: ["min-w-0 truncate", "max-w-full"]
+} });
+function MobileNavRoot({ className, render, ...props }) {
+	const { root } = mobileNav();
+	const defaultProps = {
+		"data-slot": "mobile-nav-root",
+		className: root({ className })
+	};
+	return useRender({
+		defaultTagName: "nav",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function MobileNavItem({ nativeButton = true, selected, className, render, ...props }) {
+	const { item } = mobileNav();
+	const defaultProps = {
+		type: nativeButton ? "button" : void 0,
+		"aria-pressed": nativeButton ? selected : void 0,
+		"data-slot": "mobile-nav-item",
+		"data-selected": selected ? "true" : void 0,
+		className: item({ className })
+	};
+	return useRender({
+		render: render ?? /* @__PURE__ */ jsx(Button, {}),
+		props: mergeProps(defaultProps, props)
+	});
+}
+function MobileNavLabel({ className, render, ...props }) {
+	const { itemLabel } = mobileNav();
+	const defaultProps = {
+		"data-slot": "mobile-nav-item-label",
+		className: itemLabel({ className })
+	};
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+const holds = /* @__PURE__ */ new WeakMap();
+function touchPoint(event) {
+	const touch = event.touches?.[0] ?? event.changedTouches?.[0];
+	return touch ? {
+		x: touch.clientX,
+		y: touch.clientY
+	} : null;
+}
+function farther(from, to, limit) {
+	return Math.hypot(to.x - from.x, to.y - from.y) > limit;
+}
+var HoldThenMoveTouchSensorImpl = class extends TouchSensor {
+	static activators = TouchSensor.activators;
+	static setup() {
+		return TouchSensor.setup();
+	}
+	attach() {
+		super.attach();
+		const self = this;
+		const { holdMs = 500 } = self.props.options;
+		const state = {
+			heldAt: null,
+			last: null,
+			timer: setTimeout(() => {
+				state.heldAt = state.last ?? self.initialCoordinates;
+			}, holdMs)
+		};
+		holds.set(this, state);
+	}
+	handleMove(event) {
+		const self = this;
+		const state = holds.get(this);
+		if (self.activated || !state) {
+			super.handleMove(event);
+			return;
+		}
+		if ((event.touches?.length ?? 1) > 1) {
+			self.handleCancel();
+			return;
+		}
+		const point = touchPoint(event);
+		const start = self.initialCoordinates;
+		if (!point || !start) return;
+		state.last = point;
+		const { distance = 10, tolerance = 10 } = self.props.options;
+		if (!state.heldAt) {
+			if (farther(start, point, tolerance)) self.handleCancel();
+			return;
+		}
+		if (event.cancelable) event.preventDefault();
+		if (farther(state.heldAt, point, distance)) self.handleStart();
+	}
+	detach() {
+		const state = holds.get(this);
+		if (state) clearTimeout(state.timer);
+		holds.delete(this);
+		super.detach();
+	}
+};
+/** A TouchSensor that starts a drag on the first move after a still hold (see above). */
+const HoldThenMoveTouchSensor = HoldThenMoveTouchSensorImpl;
+/**
+* dnd-kit's PointerSensor for a mouse and a pen only: a finger's pointerdown is
+* left to `HoldThenMoveTouchSensor`.
+*/
+var MouseOnlyPointerSensor = class extends PointerSensor {
+	static activators = [{
+		eventName: "onPointerDown",
+		handler: (event, options) => event.nativeEvent.pointerType === "touch" ? false : PointerSensor.activators[0].handler(event, options)
+	}];
+};
+/**
+* `useSensor(HoldThenMoveTouchSensor, …)` with the activation the sensor relies
+* on: no constraint dnd-kit would act on by itself, so only a move after the
+* hold starts the drag.
+*/
+function useHoldThenMoveTouchSensor({ holdMs = 500, distance = 10, tolerance = 10 } = {}) {
+	const options = useMemo(() => ({
+		holdMs,
+		distance,
+		tolerance,
+		activationConstraint: { distance: Number.POSITIVE_INFINITY }
+	}), [
+		holdMs,
+		distance,
+		tolerance
+	]);
+	return useSensor(HoldThenMoveTouchSensor, options);
+}
+/** The mouse / pen sensor that goes with it: picks up after `distance` px. */
+function useMouseOnlyPointerSensor(distance) {
+	const options = useMemo(() => ({ activationConstraint: { distance } }), [distance]);
+	return useSensor(MouseOnlyPointerSensor, options);
+}
+//#endregion
+//#region src/components/popover/popover.tsx
+const popover = tv$1({ slots: {
+	trigger: ["select-none"],
+	positioner: ["isolate z-50 outline-none"],
+	content: [
+		"max-h-(--available-height) min-w-[220px] overflow-hidden",
+		"outline-none",
+		"rounded-container bg-layer-popover text-foreground",
+		"shadow-float ring-1 ring-line-seam"
+	],
+	header: ["flex items-center justify-between px-3", "min-h-11 gap-2 py-1.5 pr-1.5 pl-4"],
+	body: ["flex min-w-0 flex-col gap-1.5", "px-4 pt-4 pb-3 last:pb-4"],
+	actions: ["flex flex-wrap items-center justify-end gap-2", "px-4 pb-3 last:pb-4"],
+	separator: ["border-t", "border-line-hairline"],
+	title: ["m-0", "font-sans text-headline font-bold text-foreground"],
+	description: ["m-0", "font-sans text-footnote text-foreground-muted"],
+	close: [
+		"inline-flex items-center justify-center",
+		"outline-none transition-colors",
+		"h-8 min-w-8 rounded-chip px-1.5",
+		"font-sans text-footnote font-bold text-foreground",
+		"hover:bg-fill-medium active:bg-fill-medium",
+		"focus-visible:shadow-focus",
+		"[&_svg]:size-4.5"
+	],
+	arrow: ["size-2 rotate-45", "border-l border-t border-line-seam bg-layer-popover"],
+	backdrop: ["fixed inset-0", "bg-transparent"],
+	viewport: ["block"]
+} });
+function Popover$1(props) {
+	return /* @__PURE__ */ jsx(Popover.Root, {
+		"data-slot": "popover",
+		...props
+	});
+}
+function PopoverTrigger({ className, ...props }) {
+	const { trigger } = popover();
+	return /* @__PURE__ */ jsx(Popover.Trigger, {
+		"data-slot": "popover-trigger",
+		className: trigger({ className }),
+		...props
+	});
+}
+function PopoverPortal(props) {
+	return /* @__PURE__ */ jsx(Popover.Portal, {
+		"data-slot": "popover-portal",
+		...useThemeScopeProps(props)
+	});
+}
+function PopoverPopup({ className, ...props }) {
+	const { content } = popover();
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "popover-content",
+		className: content({ className }),
+		...props
+	});
+}
+function PopoverContent({ align = "start", alignOffset = 0, anchor, arrowPadding, collisionAvoidance, collisionBoundary, collisionPadding, disableAnchorTracking, positionMethod = "fixed", side = "bottom", sideOffset = 4, sticky, container, portalProps, className, ...props }) {
+	const { positioner, content } = popover();
+	const portalContainer = container !== void 0 ? container : portalProps?.container;
+	return /* @__PURE__ */ jsx(PopoverPortal, {
+		...portalProps,
+		container: portalContainer,
+		children: /* @__PURE__ */ jsx(Popover.Positioner, {
+			align,
+			alignOffset,
+			anchor,
+			arrowPadding,
+			collisionAvoidance,
+			collisionBoundary,
+			collisionPadding,
+			disableAnchorTracking,
+			positionMethod,
+			side,
+			sideOffset,
+			sticky,
+			className: positioner(),
+			children: /* @__PURE__ */ jsx(Popover.Popup, {
+				"data-slot": "popover-content",
+				className: content({ className }),
+				...props
+			})
+		})
+	});
+}
+function PopoverViewport({ className, ...props }) {
+	const { viewport } = popover();
+	return /* @__PURE__ */ jsx(Popover.Viewport, {
+		"data-slot": "popover-viewport",
+		className: viewport({ className }),
+		...props
+	});
+}
+function PopoverHeader({ className, ...props }) {
+	const { header } = popover();
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "popover-header",
+		className: header({ className }),
+		...props
+	});
+}
+function PopoverSeparator({ className, ...props }) {
+	const { separator } = popover();
+	return /* @__PURE__ */ jsx("div", {
+		role: "separator",
+		"aria-orientation": "horizontal",
+		"data-slot": "popover-separator",
+		className: separator({ className }),
+		...props
+	});
+}
+function PopoverTitle({ className, ...props }) {
+	const { title } = popover();
+	return /* @__PURE__ */ jsx(Popover.Title, {
+		"data-slot": "popover-title",
+		className: title({ className }),
+		...props
+	});
+}
+function PopoverDescription({ className, ...props }) {
+	const { description } = popover();
+	return /* @__PURE__ */ jsx(Popover.Description, {
+		"data-slot": "popover-description",
+		className: description({ className }),
+		...props
+	});
+}
+function PopoverClose({ className, ...props }) {
+	const { close } = popover();
+	return /* @__PURE__ */ jsx(Popover.Close, {
+		"data-slot": "popover-close",
+		className: close({ className }),
+		...props
+	});
+}
+function PopoverArrow({ className, ...props }) {
+	const { arrow } = popover();
+	return /* @__PURE__ */ jsx(Popover.Arrow, {
+		"data-slot": "popover-arrow",
+		className: arrow({ className }),
+		...props
+	});
+}
+function PopoverBackdrop({ className, ...props }) {
+	const { backdrop } = popover();
+	return /* @__PURE__ */ jsx(Popover.Backdrop, {
+		"data-slot": "popover-backdrop",
+		className: backdrop({ className }),
+		...props
+	});
+}
+/** The panel's text: a `PopoverTitle` and a `PopoverDescription`, 16px in from its edges. */
+function PopoverBody({ className, ...props }) {
+	const { body } = popover();
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "popover-body",
+		className: body({ className }),
+		...props
+	});
+}
+/** The panel's buttons, at its end, under `PopoverBody`: the way out first, then the confirm button. */
+function PopoverActions({ className, ...props }) {
+	const { actions } = popover();
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "popover-actions",
+		className: actions({ className }),
+		...props
+	});
+}
+//#endregion
+//#region src/components/mobile-nav/mobile-nav-server.tsx
+const mobileNavServer = tv$1({ slots: {
+	item: [
+		"select-none [-webkit-touch-callout:none]",
+		"*:data-[slot=avatar]:size-[22px]",
+		"data-popup-open:before:bg-fill-medium"
+	],
+	content: [
+		"flex flex-col",
+		"w-[calc(var(--anchor-width)-16px)] min-w-0",
+		"max-h-[min(60dvh,calc(var(--available-height)-env(safe-area-inset-top,0px)))]"
+	],
+	list: ["flex min-h-0 flex-1 flex-col overflow-y-auto overscroll-contain p-1"],
+	group: ["flex shrink-0 flex-col p-1"],
+	row: [
+		"flex w-full shrink-0 cursor-default select-none items-center",
+		"text-left outline-none transition-colors",
+		"min-h-option gap-2.5 rounded-chip px-2.5 py-option-inset",
+		"font-sans text-callout font-medium text-foreground",
+		"hover:bg-brand-soft active:bg-brand-soft focus-visible:bg-brand-soft",
+		"aria-[current=true]:font-bold",
+		"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&>svg:not([class*='size-'])]:size-4",
+		"[&>svg]:text-foreground-muted",
+		"*:data-[slot=avatar]:size-5 *:data-[slot=avatar]:shrink-0"
+	],
+	rowLabel: ["min-w-0 flex-1 truncate"],
+	rowBody: ["flex min-w-0 flex-1 flex-col"],
+	rowDescription: ["min-w-0 truncate", "font-mono text-mono-meta font-normal text-foreground-hint"],
+	destinations: ["grid shrink-0 grid-flow-col auto-cols-fr gap-1 p-1"],
+	destination: [
+		"relative flex min-w-0 cursor-default select-none flex-col items-center justify-center",
+		"outline-none transition-colors",
+		"gap-1 rounded-chip px-1 py-2",
+		"font-sans text-footnote font-medium text-foreground",
+		"hover:bg-brand-soft active:bg-brand-soft focus-visible:bg-brand-soft",
+		"[&_svg]:pointer-events-none [&_svg]:size-5 [&_svg]:shrink-0 [&_svg]:text-foreground-muted",
+		"[&>span]:max-w-full [&>span]:truncate",
+		"*:data-[slot=status]:absolute *:data-[slot=status]:top-1 *:data-[slot=status]:left-[calc(50%+6px)]"
+	]
+} });
+const MobileNavServerContext = createContext(null);
+function useMobileNavServerContext(part) {
+	const context = use(MobileNavServerContext);
+	if (!context) throw new Error(`${part} must be inside MobileNavServerPopover`);
+	return context;
+}
+/** The root: owns the popover's open state, like `Popover` (`open`, `onOpenChange`). */
+function MobileNavServerPopover(props) {
+	const [handle] = useState(() => Popover.createHandle());
+	const triggerRef = useRef(null);
+	const context = useMemo(() => ({
+		handle,
+		triggerRef
+	}), [handle]);
+	return /* @__PURE__ */ jsx(MobileNavServerContext, {
+		value: context,
+		children: /* @__PURE__ */ jsx(Popover.Root, {
+			"data-slot": "mobile-nav-server-popover",
+			handle,
+			...props
+		})
+	});
+}
+/**
+* The tab: the server's avatar and its name in `MobileNavLabel`, as children.
+* A press opens the popover, and so does holding it for 500ms (the long press
+* of raft-ui's menus). Lifting the finger after a hold never closes it: the
+* click that ends the hold is not a press, whether the hold opened the
+* popover or found it open.
+* It is never `selected`: it holds no page.
+*/
+function MobileNavServerItem({ className, id, ref, onClick, onContextMenu, onPointerDown, onPointerMove, onPointerUp, onPointerCancel, onPointerLeave, ...props }) {
+	const { handle, triggerRef } = useMobileNavServerContext("MobileNavServerItem");
+	const { item } = mobileNavServer();
+	const generatedId = useId();
+	const triggerId = id ?? generatedId;
+	const holdTimer = useRef(void 0);
+	const holdStart = useRef(null);
+	const held = useRef(false);
+	const cancelHold = useCallback(() => {
+		clearTimeout(holdTimer.current);
+		holdTimer.current = void 0;
+		holdStart.current = null;
+	}, []);
+	useEffect(() => cancelHold, [cancelHold]);
+	const setRef = useCallback((node) => {
+		triggerRef.current = node;
+		assignRef(ref, node);
+	}, [ref, triggerRef]);
+	const handlePointerDown = useCallback((event) => {
+		onPointerDown?.(event);
+		cancelHold();
+		held.current = false;
+		if (event.button !== 0) return;
+		holdStart.current = {
+			x: event.clientX,
+			y: event.clientY
+		};
+		holdTimer.current = setTimeout(() => {
+			holdTimer.current = void 0;
+			held.current = true;
+			if (!handle.isOpen) handle.open(triggerId);
+		}, 500);
+	}, [
+		cancelHold,
+		handle,
+		onPointerDown,
+		triggerId
+	]);
+	const handlePointerMove = useCallback((event) => {
+		onPointerMove?.(event);
+		const start = holdStart.current;
+		if (!start) return;
+		if (Math.hypot(event.clientX - start.x, event.clientY - start.y) > 10) cancelHold();
+	}, [cancelHold, onPointerMove]);
+	const handlePointerUp = useCallback((event) => {
+		onPointerUp?.(event);
+		cancelHold();
+	}, [cancelHold, onPointerUp]);
+	const handlePointerCancel = useCallback((event) => {
+		onPointerCancel?.(event);
+		cancelHold();
+	}, [cancelHold, onPointerCancel]);
+	const handlePointerLeave = useCallback((event) => {
+		onPointerLeave?.(event);
+		cancelHold();
+	}, [cancelHold, onPointerLeave]);
+	const handleClick = useCallback((event) => {
+		onClick?.(event);
+		if (!held.current) return;
+		held.current = false;
+		event.preventBaseUIHandler?.();
+	}, [onClick]);
+	const handleContextMenu = useCallback((event) => {
+		onContextMenu?.(event);
+		event.preventDefault();
+	}, [onContextMenu]);
+	return /* @__PURE__ */ jsx(Popover.Trigger, {
+		handle,
+		id: triggerId,
+		ref: setRef,
+		render: /* @__PURE__ */ jsx(MobileNavItem, {}),
+		"data-slot": "mobile-nav-server-item",
+		className: item({ className }),
+		onPointerDown: handlePointerDown,
+		onPointerMove: handlePointerMove,
+		onPointerUp: handlePointerUp,
+		onPointerCancel: handlePointerCancel,
+		onPointerLeave: handlePointerLeave,
+		onClick: handleClick,
+		onContextMenu: handleContextMenu,
+		...props
+	});
+}
+/**
+* The popover above the tab bar, 8px from each side of it and 8px above it,
+* as tall as its content and at most 60% of the screen. It stops below the
+* top safe area (a notch in a standalone web app): Base UI's collision padding
+* takes only pixels, so the height cap subtracts `env(safe-area-inset-top)`.
+* The bottom needs none: the tab bar under the popover already pads the
+* bottom safe area. A column:
+* `MobileNavServerPopoverList` takes the room left and scrolls, and the
+* destinations and the footer after it stay in view.
+*/
+function MobileNavServerPopoverContent({ anchor, side = "top", align = "center", sideOffset = 8, collisionPadding = 8, className, ...props }) {
+	const { triggerRef } = useMobileNavServerContext("MobileNavServerPopoverContent");
+	const { content } = mobileNavServer();
+	const tabBar = useCallback(() => {
+		const trigger = triggerRef.current;
+		return trigger?.closest("[data-slot=mobile-nav-root]") ?? trigger;
+	}, [triggerRef]);
+	return /* @__PURE__ */ jsx(PopoverContent, {
+		"data-slot": "mobile-nav-server-popover-content",
+		anchor: anchor ?? tabBar,
+		side,
+		align,
+		sideOffset,
+		collisionPadding,
+		className: content({ className }),
+		...props
+	});
+}
+/** The server list: takes the room left in the popover and scrolls inside it. */
+function MobileNavServerPopoverList({ className, ...props }) {
+	const { list } = mobileNavServer();
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "mobile-nav-server-popover-list",
+		className: list({ className }),
+		...props
+	});
+}
+/** Rows that always stay in view, such as the footer actions. */
+function MobileNavServerPopoverGroup({ className, ...props }) {
+	const { group } = mobileNavServer();
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "mobile-nav-server-popover-group",
+		className: group({ className }),
+		...props
+	});
+}
+/**
+* One row at the option height of every popup list (`py-option-inset`, 36px
+* for one line; a second line adds its own height and nothing else): a 20px
+* avatar or a 16px icon, `MobileNavServerPopoverRowLabel` (or a
+* `MobileNavServerPopoverRowBody` with a description under the label), then
+* anything trailing (a check, a count), centered on the row.
+* `aria-current="true"` marks the current server in bold.
+*/
+function MobileNavServerPopoverRow({ className, type = "button", ...props }) {
+	const { row } = mobileNavServer();
+	return /* @__PURE__ */ jsx("button", {
+		type,
+		"data-slot": "mobile-nav-server-popover-row",
+		className: row({ className }),
+		...props
+	});
+}
+/** A row's label: takes the room and truncates. */
+function MobileNavServerPopoverRowLabel({ className, ...props }) {
+	const { rowLabel } = mobileNavServer();
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "mobile-nav-server-popover-row-label",
+		className: rowLabel({ className }),
+		...props
+	});
+}
+/** The server's own pages, side by side in equal cells; a `group`, named with `aria-label`. */
+function MobileNavServerPopoverDestinations({ className, ...props }) {
+	const { destinations } = mobileNavServer();
+	return /* @__PURE__ */ jsx("div", {
+		role: "group",
+		"data-slot": "mobile-nav-server-popover-destinations",
+		className: destinations({ className }),
+		...props
+	});
+}
+/**
+* One of the server's pages: a 20px icon over a short label in a `span`, which
+* truncates. Something new on that page (a feedback reply, a computer that
+* needs attention) is an `accent` `Status` child, the attention dot at the
+* icon's top-right corner: the server tab's avatar never carries it.
+*/
+function MobileNavServerPopoverDestination({ className, type = "button", ...props }) {
+	const { destination } = mobileNavServer();
+	return /* @__PURE__ */ jsx("button", {
+		type,
+		"data-slot": "mobile-nav-server-popover-destination",
+		className: destination({ className }),
+		...props
+	});
+}
+/**
+* The text of a two-line row: `MobileNavServerPopoverRowLabel`, then
+* `MobileNavServerPopoverRowDescription` under it. The second line adds its
+* own height and nothing else; the avatar and the trailing check or count
+* center on both lines.
+*/
+function MobileNavServerPopoverRowBody({ className, ...props }) {
+	const { rowBody } = mobileNavServer();
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "mobile-nav-server-popover-row-body",
+		className: rowBody({ className }),
+		...props
+	});
+}
+/** A row's second line, such as a server's address: muted Space Mono; truncates. */
+function MobileNavServerPopoverRowDescription({ className, ...props }) {
+	const { rowDescription } = mobileNavServer();
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "mobile-nav-server-popover-row-description",
+		className: rowDescription({ className }),
+		...props
+	});
+}
+function assignRef(ref, value) {
+	if (typeof ref === "function") ref(value);
+	else if (ref) ref.current = value;
+}
+//#endregion
+//#region src/components/preview-card/preview-card.tsx
+const previewCard = tv$1({ slots: {
+	trigger: [],
+	positioner: ["isolate z-50 outline-none"],
+	popup: [
+		"max-h-(--available-height) min-w-[220px] overflow-hidden",
+		"outline-none",
+		"origin-(--transform-origin) transform-gpu opacity-100 will-change-[transform,opacity]",
+		"transition-[opacity,transform] duration-250 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-ending-style:duration-150",
+		"data-instant:transition-none motion-reduce:transition-none",
+		"w-[300px] rounded-container bg-layer-popover text-foreground",
+		"shadow-float ring-1 ring-line-seam"
+	],
+	header: ["flex items-start gap-3", "px-4 pt-4 pb-3 last:pb-4"],
+	separator: ["border-t", "border-line-hairline"],
+	title: ["m-0 truncate", "font-sans text-headline font-bold text-foreground"],
+	description: ["m-0 truncate", "px-4 py-3 last:pb-4 font-sans text-callout text-foreground-muted"],
+	arrow: ["size-2 rotate-45", "border-l border-t border-line-seam bg-layer-popover"],
+	body: [
+		"flex min-w-0 flex-col gap-1.5",
+		"px-4 pt-4 pb-3 last:pb-4",
+		"*:data-[slot=preview-card-title]:line-clamp-3 *:data-[slot=preview-card-title]:whitespace-normal"
+	],
+	eyebrow: ["m-0 truncate", "font-mono text-mono-meta text-foreground-muted"],
+	meta: ["flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1", "m-0 font-sans text-callout text-foreground-muted"],
+	actions: ["flex flex-wrap items-center gap-2", "px-4 pb-3 last:pb-4"],
+	footer: [
+		"m-0 truncate",
+		"border-t border-line-hairline px-4 py-2",
+		"font-sans text-caption text-foreground-muted"
+	]
+} });
+function PreviewCard$1(props) {
+	return /* @__PURE__ */ jsx(PreviewCard.Root, {
+		"data-slot": "preview-card",
+		...props
+	});
+}
+function PreviewCardTrigger({ delay = 80, closeDelay = 40, className, ...props }) {
+	const { trigger } = previewCard();
+	return /* @__PURE__ */ jsx(PreviewCard.Trigger, {
+		"data-slot": "preview-card-trigger",
+		delay,
+		closeDelay,
+		className: trigger({ className }),
+		...props
+	});
+}
+function PreviewCardPortal(props) {
+	return /* @__PURE__ */ jsx(PreviewCard.Portal, {
+		"data-slot": "preview-card-portal",
+		...useThemeScopeProps(props)
+	});
+}
+function PreviewCardPopup({ className, ...props }) {
+	const themeState = useTheme();
+	const { popup } = previewCard();
+	const scopeProps = resolveThemeScopeProps({
+		...props,
+		className: popup({ className })
+	}, themeState);
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "preview-card-content",
+		...scopeProps
+	});
+}
+function PreviewCardContent({ align = "start", alignOffset = 0, anchor, arrowPadding, collisionAvoidance, collisionBoundary, collisionPadding, disableAnchorTracking, positionMethod = "fixed", side = "bottom", sideOffset = 6, sticky, portalProps, className, ...props }) {
+	const { positioner, popup } = previewCard();
+	return /* @__PURE__ */ jsx(PreviewCardPortal, {
+		...portalProps,
+		children: /* @__PURE__ */ jsx(PreviewCard.Positioner, {
+			align,
+			alignOffset,
+			anchor,
+			arrowPadding,
+			collisionAvoidance,
+			collisionBoundary,
+			collisionPadding,
+			disableAnchorTracking,
+			positionMethod,
+			side,
+			sideOffset,
+			sticky,
+			className: positioner(),
+			children: /* @__PURE__ */ jsx(PreviewCard.Popup, {
+				"data-slot": "preview-card-content",
+				className: popup({ className }),
+				...props
+			})
+		})
 	});
 }
-function DropdownMenuItemCount({ className, ...props }) {
-	const { itemCount } = dropdownMenu();
-	return /* @__PURE__ */ jsx(Badge, {
-		"data-slot": "dropdown-menu-item-count",
-		className: itemCount({ className }),
+function PreviewCardHeader({ className, ...props }) {
+	const { header } = previewCard();
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "preview-card-header",
+		className: header({ className }),
 		...props
 	});
 }
-function DropdownMenuSeparator({ className, ...props }) {
-	const { separator } = dropdownMenu();
-	return /* @__PURE__ */ jsx(Menu.Separator, {
-		"data-slot": "dropdown-menu-separator",
+function PreviewCardSeparator({ className, ...props }) {
+	const { separator } = previewCard();
+	return /* @__PURE__ */ jsx("div", {
+		role: "separator",
+		"aria-orientation": "horizontal",
+		"data-slot": "preview-card-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 PreviewCardTitle({ className, ...props }) {
+	const { title } = previewCard();
+	return /* @__PURE__ */ jsx("p", {
+		"data-slot": "preview-card-title",
+		className: title({ className }),
+		...props
 	});
 }
-function DropdownMenuRadioGroup({ ...props }) {
-	return /* @__PURE__ */ jsx(Menu.RadioGroup, {
-		"data-slot": "dropdown-menu-radio-group",
+function PreviewCardDescription({ className, ...props }) {
+	const { description } = previewCard();
+	return /* @__PURE__ */ jsx("p", {
+		"data-slot": "preview-card-description",
+		className: description({ className }),
 		...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 PreviewCardArrow({ className, ...props }) {
+	const { arrow } = previewCard();
+	return /* @__PURE__ */ jsx(PreviewCard.Arrow, {
+		"data-slot": "preview-card-arrow",
+		className: arrow({ className }),
+		...props
 	});
 }
-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
+/** The item card's block: the id line, the title and the details row, in that order. */
+function PreviewCardBody({ className, ...props }) {
+	const { body } = previewCard();
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "preview-card-body",
+		className: body({ className }),
+		...props
 	});
-	return children;
 }
-function DropdownMenuRadioItemIndicator({ className, ...props }) {
-	return /* @__PURE__ */ jsx(Menu.RadioItemIndicator, {
-		"data-slot": "dropdown-menu-radio-item-indicator",
-		className,
+/** The muted line above the title that identifies the item, such as its id. One line, truncated. */
+function PreviewCardEyebrow({ className, ...props }) {
+	const { eyebrow } = previewCard();
+	return /* @__PURE__ */ jsx("p", {
+		"data-slot": "preview-card-eyebrow",
+		className: eyebrow({ 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, {}) })
-		})]
+/** The row under the title: one state chip, then muted details. Wraps when it runs out of room. */
+function PreviewCardMeta({ className, ...props }) {
+	const { meta } = previewCard();
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "preview-card-meta",
+		className: meta({ className }),
+		...props
 	});
 }
-function DropdownMenuCheckboxItemIndicator({ className, ...props }) {
-	return /* @__PURE__ */ jsx(Menu.CheckboxItemIndicator, {
-		"data-slot": "dropdown-menu-checkbox-item-indicator",
-		className,
+/** The row of at most two buttons. */
+function PreviewCardActions({ className, ...props }) {
+	const { actions } = previewCard();
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "preview-card-actions",
+		className: actions({ className }),
 		...props
 	});
 }
-/**
-* One choice that is another page, such as the same page in another
-* language: a link, so it opens in a new tab and can be copied. Its
-* `href` goes on the item; `current` marks the page being shown.
-*/
-function DropdownMenuLinkItem({ current = false, className, children, ...props }) {
-	const { radioItem, radioLabel, indicator } = dropdownMenu();
-	return /* @__PURE__ */ jsxs(Menu.LinkItem, {
-		"data-slot": "dropdown-menu-link-item",
-		"aria-current": current ? "page" : void 0,
-		"data-checked": current ? "" : void 0,
-		className: radioItem({ className }),
-		...props,
-		children: [renderRadioItemChildren(children, radioLabel()), current ? /* @__PURE__ */ jsx("span", {
-			className: indicator(),
-			children: /* @__PURE__ */ jsx(DropdownMenuCheckIcon, {})
-		}) : null]
+/** The caption under a hairline at the bottom of the card: where the item comes from. */
+function PreviewCardFooter({ className, ...props }) {
+	const { footer } = previewCard();
+	return /* @__PURE__ */ jsx("p", {
+		"data-slot": "preview-card-footer",
+		className: footer({ className }),
+		...props
 	});
 }
 function contentBox(element) {
@@ -2882,10 +4219,38 @@ function MessageReactionTooltipMeta({ className, render, ...props }) {
 	});
 }
 //#endregion
+//#region src/lib/inline-chip.ts
+/**
+* The one box every chip in message text shares: a reference chip (any
+* variant, loading or unavailable too), the yellow sticker of a mention of the
+* person reading, and an inline task chip. The rule and its numbers are in
+* message-item.md, Chips in running text.
+*
+* - Type: 0.875em of the sentence, semibold.
+* - Height: the line box of its text, the body line less 2px, with no padding
+*   above or below: 20px on a desktop (body 14/22), 22px on a phone (16/24). A
+*   chip is always 2px shorter than its line, so it never makes the line taller.
+*   `--chip-line-height` overrides it for text that isn't on the body line.
+* - Alignment: the chip's text on the sentence's baseline, a leading mark
+*   centred on the chip (alignment.md, Marks in running text).
+* - Sides: 6px at each end. A chip with a leading mark (a 14px icon, an app's
+*   image or avatar in `MessageReferenceIcon`'s 14px box, the loading spinner,
+*   a task's 9px status pixel, each in its own box) takes
+*   4.5px at each end, so the ink at its two ends sits equally far in
+*   (alignment.md, Chips), and the mark is 4px from the text. A note after the
+*   label keeps the same 4px.
+* - Corners: `rounded-sticker`.
+*/
+const inlineChip = [
+	"items-baseline gap-1 px-1.5 py-0 align-baseline",
+	"has-[>svg,>[data-slot=spinner],>[data-slot=message-reference-icon]]:px-[4.5px]",
+	"[font-size:0.875em] leading-[var(--chip-line-height,calc(var(--text-body--line-height)-2px))] font-semibold",
+	"rounded-sticker"
+];
+//#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]:px-[4.5px]",
-	"[font-size:0.875em] leading-5 font-semibold",
+	...inlineChip,
 	"[--message-reference-em:1em]",
 	"[&_svg]:size-3.5 [&_svg]:text-foreground-muted",
 	fill
@@ -2915,23 +4280,29 @@ const messageReference = tv$1({
 			SUFFIX_LIFT,
 			"font-mono text-label leading-none font-normal text-foreground-hint"
 		],
+		icon: ["inline-flex size-3.5 shrink-0 items-center justify-center self-center", "*:size-full *:shrink-0 [&>img]:rounded-[2px] [&>img]:object-cover"],
 		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:overlay-sticker-medium active:overlay-sticker-medium"
-		] },
-		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") }
-	} },
+	variants: {
+		variant: {
+			primary: { root: [
+				"inline-flex cursor-pointer",
+				...inlineChip,
+				"[--message-reference-em:1em]",
+				"text-sticker-ink no-underline",
+				"bg-brand inset-ring-[1.5px] inset-ring-sticker-ink",
+				"hover:overlay-sticker-medium active:overlay-sticker-medium"
+			] },
+			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") }
+		},
+		capped: { true: { root: "max-w-[min(100%,24em)]" } }
+	},
 	defaultVariants: { variant: "muted" }
 });
 //#endregion
@@ -2958,8 +4329,11 @@ function MessageReferenceIndicator({ className, render, ...props }) {
 		state: { slot: "message-reference-indicator" }
 	});
 }
-function MessageReferenceChip({ className, render, variant = "muted", ...props }) {
-	const { root } = messageReference({ variant });
+function MessageReferenceChip({ className, render, variant = "muted", capped, ...props }) {
+	const { root } = messageReference({
+		variant,
+		capped
+	});
 	return useReferenceRender(root({ className }), render, props);
 }
 function MessageReferenceLabel({ className, render, ...props }) {
@@ -2984,8 +4358,26 @@ function MessageReferenceSuffix({ className, render, ...props }) {
 		state: { slot: "message-reference-suffix" }
 	});
 }
-function MessageReferencePending({ className, render, ...props }) {
-	const { root } = messageReference({ variant: "pending" });
+/**
+* The chip's leading icon when it is not a plain svg: an image or a `3xs`
+* Avatar, such as an app's registered icon. It holds one child at 14px,
+* centred on the chip. Put it first in the chip.
+*/
+function MessageReferenceIcon({ className, render, ...props }) {
+	const { icon } = messageReference();
+	const defaultProps = { className: icon({ className }) };
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "message-reference-icon" }
+	});
+}
+function MessageReferencePending({ className, render, capped, ...props }) {
+	const { root } = messageReference({
+		variant: "pending",
+		capped
+	});
 	return useReferenceRender(root({ className }), render, props);
 }
 function MessageReferenceUnavailable({ className, render, ...props }) {
@@ -3551,100 +4943,6 @@ function MessageListJumpPillDismiss({ className, children, render, nativeButton,
 		})
 	});
 }
-const holds = /* @__PURE__ */ new WeakMap();
-function touchPoint(event) {
-	const touch = event.touches?.[0] ?? event.changedTouches?.[0];
-	return touch ? {
-		x: touch.clientX,
-		y: touch.clientY
-	} : null;
-}
-function farther(from, to, limit) {
-	return Math.hypot(to.x - from.x, to.y - from.y) > limit;
-}
-var HoldThenMoveTouchSensorImpl = class extends TouchSensor {
-	static activators = TouchSensor.activators;
-	static setup() {
-		return TouchSensor.setup();
-	}
-	attach() {
-		super.attach();
-		const self = this;
-		const { holdMs = 500 } = self.props.options;
-		const state = {
-			heldAt: null,
-			last: null,
-			timer: setTimeout(() => {
-				state.heldAt = state.last ?? self.initialCoordinates;
-			}, holdMs)
-		};
-		holds.set(this, state);
-	}
-	handleMove(event) {
-		const self = this;
-		const state = holds.get(this);
-		if (self.activated || !state) {
-			super.handleMove(event);
-			return;
-		}
-		if ((event.touches?.length ?? 1) > 1) {
-			self.handleCancel();
-			return;
-		}
-		const point = touchPoint(event);
-		const start = self.initialCoordinates;
-		if (!point || !start) return;
-		state.last = point;
-		const { distance = 10, tolerance = 10 } = self.props.options;
-		if (!state.heldAt) {
-			if (farther(start, point, tolerance)) self.handleCancel();
-			return;
-		}
-		if (event.cancelable) event.preventDefault();
-		if (farther(state.heldAt, point, distance)) self.handleStart();
-	}
-	detach() {
-		const state = holds.get(this);
-		if (state) clearTimeout(state.timer);
-		holds.delete(this);
-		super.detach();
-	}
-};
-/** A TouchSensor that starts a drag on the first move after a still hold (see above). */
-const HoldThenMoveTouchSensor = HoldThenMoveTouchSensorImpl;
-/**
-* dnd-kit's PointerSensor for a mouse and a pen only: a finger's pointerdown is
-* left to `HoldThenMoveTouchSensor`.
-*/
-var MouseOnlyPointerSensor = class extends PointerSensor {
-	static activators = [{
-		eventName: "onPointerDown",
-		handler: (event, options) => event.nativeEvent.pointerType === "touch" ? false : PointerSensor.activators[0].handler(event, options)
-	}];
-};
-/**
-* `useSensor(HoldThenMoveTouchSensor, …)` with the activation the sensor relies
-* on: no constraint dnd-kit would act on by itself, so only a move after the
-* hold starts the drag.
-*/
-function useHoldThenMoveTouchSensor({ holdMs = 500, distance = 10, tolerance = 10 } = {}) {
-	const options = useMemo(() => ({
-		holdMs,
-		distance,
-		tolerance,
-		activationConstraint: { distance: Number.POSITIVE_INFINITY }
-	}), [
-		holdMs,
-		distance,
-		tolerance
-	]);
-	return useSensor(HoldThenMoveTouchSensor, options);
-}
-/** The mouse / pen sensor that goes with it: picks up after `distance` px. */
-function useMouseOnlyPointerSensor(distance) {
-	const options = useMemo(() => ({ activationConstraint: { distance } }), [distance]);
-	return useSensor(MouseOnlyPointerSensor, options);
-}
 //#endregion
 //#region src/components/inbox-item/inbox-item.recipe.ts
 const inboxItem = tv$1({
@@ -3785,4 +5083,4 @@ const inboxItem = tv$1({
 	}]
 });
 //#endregion
-export { MessageReactionPickerStatic as $, DialogTitle as $n, DropdownMenuFooter as $t, MessageEmbedFooter as A, useMobileViewport as An, MessageItemEmbedded as At, MessageReferenceChip as B, textLinkVariants as Bn, AvatarFallback as Bt, MessageQuotedPreviewLoading as C, PanelSection as Cn, MessageItemSenderButton as Ct, MessageQuotedPreviewUnavailable as D, ScrollAreaScrollbar as Dn, MessageItemBody as Dt, MessageQuotedPreviewTimestamp as E, ScrollAreaCorner as En, MessageItemAttachments as Et, MessageTextSelectionToolbarSeparator as F, TooltipContent as Fn, MessageItemGutter as Ft, MessageReferenceText as G, DialogContent as Gn, measureContent as Gt, MessageReferenceLabel as H, Dialog$1 as Hn, AvatarGroupCount as Ht, MessageMultiSelect as I, TooltipPortal as In, MessageItem as It, MessageReactionChip as J, DialogHeader as Jn, readNow as Jt, MessageReferenceUnavailable as K, DialogDescription as Kn, measureElement as Kt, MessageMultiSelectCheckbox as L, TooltipProvider as Ln, searchHit as Lt, messageEmbed as M, CheckboxIndicator as Mn, MessageItemSearchMatch as Mt, MessageTextSelectionToolbar as N, PRESENCE_COLOR as Nn, MessageItemAvatarSlot as Nt, MessageEmbed as O, ScrollAreaThumb as On, MessageItemContent as Ot, MessageTextSelectionToolbarButton as P, Tooltip$1 as Pn, MessageItemContinuationTime as Pt, MessageReactionPickerContent as Q, DialogSurface as Qn, DropdownMenuContent as Qt, MessageMultiSelectToolbar as R, TooltipTrigger as Rn, Avatar$1 as Rt, MessageQuotedPreviewHeader as S, PanelScrollViewport as Sn, MessageItemSenderBadges as St, MessageQuotedPreviewThread as T, ScrollAreaContent as Tn, MessageItemTime as Tt, MessageReferencePending as U, DialogBody as Un, AvatarImage as Ut, MessageReferenceIndicator as V, Badge as Vn, AvatarGroup as Vt, MessageReferenceSuffix as W, DialogClose as Wn, useOverflowTitle as Wt, MessageReactionErrorIndicator as X, DialogOverlay as Xn, DropdownMenuCheckboxItem as Xt, MessageReactionCount as Y, DialogNav as Yn, DropdownMenu as Yt, MessageReactionGlyph as Z, DialogPortal as Zn, DropdownMenuCheckboxItemIndicator as Zt, MessageQuotedPreviewAuthorDelegatedBy as _, Panel as _n, MessageItemDelegatedByName as _t, MessageListJumpPill as a, DropdownMenuPopup as an, useParentOverlayKind as ar, MessageReactionTooltipNameText as at, MessageQuotedPreviewChannel as b, PanelHeaderRoot as bn, MessageItemMeta as bt, MessageListDateDivider as c, DropdownMenuRadioItem as cn, useThemeScopeProps as cr, MessageItemBadge as ct, MessageListNotice as d, DropdownMenuShortcut as dn, tv$1 as dr, MessageItemSavedIndicator as dt, DropdownMenuItem as en, DialogTrigger as er, MessageReactionQuickButton as et, MessageList as f, DropdownMenuSubmenu as fn, controlIconInset as fr, MessageItemToolbar as ft, MessageQuotedPreviewAuthor as g, KbdGroup as gn, MessageItemDelegatedByButton as gt, MessageQuotedPreviewAttachments as h, Kbd as hn, decisionWidth as hr, MessageItemDelegatedBy as ht, MessageListJumpControls as i, DropdownMenuLinkItem as in, defaultNativeButton as ir, MessageReactionTooltipName as it, MessageEmbedHeader as j, Checkbox$1 as jn, MessageItemFooter as jt, MessageEmbedContent as k, ScrollAreaViewport as kn, MessageItemEdited as kt, MessageListEndFade as l, DropdownMenuRadioItemIndicator as ln, useTheme as lr, MessageItemBadgeSeparator as lt, MessageQuotedPreviewAttachment as m, DropdownMenuTrigger as mn, headEdges as mr, MessageItemDelegatedAvatar as mt, useHoldThenMoveTouchSensor as n, DropdownMenuItemLabel as nn, buttonVariants as nr, MessageReactionTooltipContent as nt, MessageListJumpPillDismiss as o, DropdownMenuPortal as on, withOverlayLayer as or, MessageReactionTooltipNames as ot, MessageQuotedPreview as p, DropdownMenuSubmenuTrigger as pn, headEdgePull as pr, MessageItemToolbarButton as pt, MessageReactionAddButton as q, DialogFooter as qn, observeTruncation as qt, useMouseOnlyPointerSensor as r, DropdownMenuLabel as rn, Spinner as rr, MessageReactionTooltipMeta as rt, MessageListJumpPillGroup as s, DropdownMenuRadioGroup as sn, resolveThemeScopeProps as sr, MessageReactionTooltipSeparator as st, inboxItem as t, DropdownMenuItemCount as tn, Button$1 as tr, MessageReactionQuickRow as tt, MessageListHistoryLimited as u, DropdownMenuSeparator as un, ThemeStateContext as ur, MessageItemReadReceipt as ut, MessageQuotedPreviewAuthorMeta as v, PanelBody as vn, MessageItemHeader as vt, MessageQuotedPreviewText as w, ScrollArea$1 as wn, MessageItemSenderGroup as wt, MessageQuotedPreviewContent as x, PanelScrollContent as xn, MessageItemSender as xt, MessageQuotedPreviewAuthorName as y, PanelFooter as yn, MessageItemInlineStatus as yt, MessageMultiSelectToolbarActions as z, TextLink as zn, AvatarBadge as zt };
+export { MessageReactionPickerStatic as $, DropdownMenuRadioGroup as $n, DialogSheetReset as $r, PreviewCardContent as $t, messageEmbed as A, PopoverPopup as An, Badge as Ar, MessageItemEmbedded as At, MessageReferenceIndicator as B, MobileNavRoot as Bn, DialogFooterNote as Br, AvatarFallback as Bt, MessageQuotedPreviewThread as C, PopoverArrow as Cn, CheckboxIndicator as Cr, MessageItemSenderButton as Ct, MessageEmbedContent as D, PopoverContent as Dn, TooltipPortal as Dr, MessageItemBody as Dt, MessageEmbed as E, PopoverClose as En, TooltipContent as Er, MessageItemAttachments as Et, MessageMultiSelectCheckbox as F, PopoverViewport as Fn, DialogBody as Fr, MessageItemGutter as Ft, MessageReferenceUnavailable as G, DropdownMenuFooter as Gn, DialogSheetBack as Gr, measureContent as Gt, MessageReferencePending as H, DropdownMenuCheckboxItem as Hn, DialogNav as Hr, AvatarGroupCount as Ht, MessageMultiSelectToolbar as I, useHoldThenMoveTouchSensor as In, DialogClose as Ir, MessageItem as It, MessageReactionChip as J, DropdownMenuItemLabel as Jn, DialogTrigger as Jr, readNow as Jt, inlineChip as K, DropdownMenuItem as Kn, DialogSurface as Kr, measureElement as Kt, MessageMultiSelectToolbarActions as L, useMouseOnlyPointerSensor as Ln, DialogContent as Lr, searchHit as Lt, MessageTextSelectionToolbarButton as M, PopoverSeparator as Mn, DialogSheetContent as Mr, MessageItemSearchMatch as Mt, MessageTextSelectionToolbarSeparator as N, PopoverTitle as Nn, useMobileViewport as Nr, MessageItemAvatarSlot as Nt, MessageEmbedFooter as O, PopoverDescription as On, TooltipProvider as Or, MessageItemContent as Ot, MessageMultiSelect as P, PopoverTrigger as Pn, Dialog$1 as Pr, MessageItemContinuationTime as Pt, MessageReactionPickerContent as Q, DropdownMenuPortal as Qn, textLinkVariants as Qr, PreviewCardBody as Qt, MessageReferenceChip as R, MobileNavItem as Rn, DialogDescription as Rr, Avatar$1 as Rt, MessageQuotedPreviewText as S, PopoverActions as Sn, Checkbox$1 as Sr, MessageItemSenderBadges as St, MessageQuotedPreviewUnavailable as T, PopoverBody as Tn, Tooltip$1 as Tr, MessageItemTime as Tt, MessageReferenceSuffix as U, DropdownMenuCheckboxItemIndicator as Un, DialogOverlay as Ur, AvatarImage as Ut, MessageReferenceLabel as V, DropdownMenu as Vn, DialogHeader as Vr, AvatarGroup as Vt, MessageReferenceText as W, DropdownMenuContent as Wn, DialogPortal as Wr, useOverflowTitle as Wt, MessageReactionErrorIndicator as X, DropdownMenuLinkItem as Xn, panelToggleAction as Xr, PreviewCardActions as Xt, MessageReactionCount as Y, DropdownMenuLabel as Yn, PanelAction as Yr, PreviewCard$1 as Yt, MessageReactionGlyph as Z, DropdownMenuPopup as Zn, TextLink as Zr, PreviewCardArrow as Zt, MessageQuotedPreviewAuthorName as _, MobileNavServerPopoverRow as _n, ScrollAreaContent as _r, MessageItemDelegatedByName as _t, MessageListJumpPillGroup as a, useParentOverlayKind as ai, PreviewCardPopup as an, DropdownMenuSubmenuTrigger as ar, MessageReactionTooltipNameText as at, MessageQuotedPreviewHeader as b, MobileNavServerPopoverRowLabel as bn, ScrollAreaThumb as br, MessageItemMeta as bt, MessageListHistoryLimited as c, useTheme as ci, PreviewCardTitle as cn, KbdGroup as cr, MessageItemBadge as ct, MessageQuotedPreview as d, stackedActions as di, MobileNavServerPopover as dn, PanelFooter as dr, MessageItemSavedIndicator as dt, Button$1 as ei, PreviewCardDescription as en, DropdownMenuRadioItem as er, MessageReactionQuickButton as et, MessageQuotedPreviewAttachment as f, useStackedActions as fi, MobileNavServerPopoverContent as fn, PanelHeaderRoot as fr, MessageItemToolbar as ft, MessageQuotedPreviewAuthorMeta as g, decisionWidth as gi, MobileNavServerPopoverList as gn, ScrollArea$1 as gr, MessageItemDelegatedByButton as gt, MessageQuotedPreviewAuthorDelegatedBy as h, headEdges as hi, MobileNavServerPopoverGroup as hn, PanelSection as hr, MessageItemDelegatedBy as ht, MessageListJumpPillDismiss as i, OverlayLayerProvider as ii, PreviewCardMeta as in, DropdownMenuSubmenu as ir, MessageReactionTooltipName as it, MessageTextSelectionToolbar as j, PopoverPortal as jn, DialogCommit as jr, MessageItemFooter as jt, MessageEmbedHeader as k, PopoverHeader as kn, TooltipTrigger as kr, MessageItemEdited as kt, MessageListNotice as l, ThemeStateContext as li, PreviewCardTrigger as ln, Panel as lr, MessageItemBadgeSeparator as lt, MessageQuotedPreviewAuthor as m, headEdgePull as mi, MobileNavServerPopoverDestinations as mn, PanelScrollViewport as mr, MessageItemDelegatedAvatar as mt, MessageListJumpControls as n, Spinner as ni, PreviewCardFooter as nn, DropdownMenuSeparator as nr, MessageReactionTooltipContent as nt, MessageListDateDivider as o, withOverlayLayer as oi, PreviewCardPortal as on, DropdownMenuTrigger as or, MessageReactionTooltipNames as ot, MessageQuotedPreviewAttachments as p, controlIconInset as pi, MobileNavServerPopoverDestination as pn, PanelScrollContent as pr, MessageItemToolbarButton as pt, MessageReactionAddButton as q, DropdownMenuItemCount as qn, DialogTitle as qr, observeTruncation as qt, MessageListJumpPill as r, defaultNativeButton as ri, PreviewCardHeader as rn, DropdownMenuShortcut as rr, MessageReactionTooltipMeta as rt, MessageListEndFade as s, useThemeScopeProps as si, PreviewCardSeparator as sn, Kbd as sr, MessageReactionTooltipSeparator as st, inboxItem as t, buttonVariants as ti, PreviewCardEyebrow as tn, DropdownMenuRadioItemIndicator as tr, MessageReactionQuickRow as tt, MessageList as u, tv$1 as ui, MobileNavServerItem as un, PanelBody as ur, MessageItemReadReceipt as ut, MessageQuotedPreviewChannel as v, MobileNavServerPopoverRowBody as vn, ScrollAreaCorner as vr, MessageItemHeader as vt, MessageQuotedPreviewTimestamp as w, PopoverBackdrop as wn, PRESENCE_COLOR as wr, MessageItemSenderGroup as wt, MessageQuotedPreviewLoading as x, Popover$1 as xn, ScrollAreaViewport as xr, MessageItemSender as xt, MessageQuotedPreviewContent as y, MobileNavServerPopoverRowDescription as yn, ScrollAreaScrollbar as yr, MessageItemInlineStatus as yt, MessageReferenceIcon as z, MobileNavLabel as zn, DialogFooter as zr, AvatarBadge as zt };