@botiverse/raft-ui 0.21.2 → 0.22.1

package/dist/{inbox-item.recipe-CuJPcy-3.mjs → inbox-item-BtvK75T1.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, ChevronRight, 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: {
@@ -1004,32 +1567,257 @@ function TooltipContent({ align = "center", alignOffset = 0, anchor, arrowPaddin
 	});
 }
 //#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"
-	] },
+//#region src/components/list-row/list-row.recipe.ts
+const hairline = [
+	"before:pointer-events-none before:absolute before:top-0 before:right-0 before:hidden",
+	"before:left-(--list-row-rule-start) before:border-t before:border-line-hairline",
+	"[[data-slot=list-row]+&]:before:block [li+li>&]:before:block"
+];
+const listRow = tv$1({
+	slots: {
+		group: ["flex min-w-0 flex-col overflow-hidden", "rounded-container border border-line-hairline bg-layer-card text-foreground"],
+		root: [
+			"group/list-row relative flex w-full min-w-0 items-center gap-3 px-4 py-3 text-left",
+			"font-sans no-underline",
+			"transition-colors duration-100",
+			"outline-none focus-visible:keyboard:inset-ring-2 focus-visible:keyboard:inset-ring-foreground",
+			"data-selected:bg-info-soft",
+			"[--list-row-ink:var(--foreground)] [--list-row-ink-2:var(--foreground-muted)] [--list-row-ink-3:var(--foreground-hint)]",
+			"text-(--list-row-ink)",
+			"not-disabled:not-aria-disabled:data-[tone=unread]:[--list-row-ink-2:var(--foreground)]",
+			"not-disabled:not-aria-disabled:data-[tone=muted]:[--list-row-ink:var(--foreground-muted)]",
+			"not-disabled:not-aria-disabled:data-[tone=away]:[--list-row-ink:var(--foreground-hint)]",
+			"not-disabled:not-aria-disabled:data-[tone=away]:[--list-row-ink-2:var(--foreground-hint)]",
+			"disabled:cursor-not-allowed disabled:[--list-row-ink:var(--foreground-disabled)]",
+			"disabled:[--list-row-ink-2:var(--foreground-disabled)] disabled:[--list-row-ink-3:var(--foreground-disabled)]",
+			"aria-disabled:cursor-not-allowed aria-disabled:[--list-row-ink:var(--foreground-disabled)]",
+			"aria-disabled:[--list-row-ink-2:var(--foreground-disabled)] aria-disabled:[--list-row-ink-3:var(--foreground-disabled)]"
+		],
+		icon: ["flex shrink-0 items-center justify-center", "text-(--list-row-ink-3) [&>svg]:size-5 [&>svg]:shrink-0"],
+		body: ["flex min-w-0 flex-1 flex-col gap-0.5"],
+		line: ["flex min-w-0 items-center gap-2"],
+		title: [
+			"min-w-0 flex-1 truncate",
+			"text-body font-semibold",
+			"group-data-[tone=unread]/list-row:font-bold"
+		],
+		description: ["min-w-0 flex-1 truncate", "text-callout text-(--list-row-ink-2)"],
+		meta: ["shrink-0", "font-mono text-mono-meta font-normal tabular-nums text-(--list-row-ink-3)"],
+		value: ["max-w-[45%] shrink-0 truncate", "text-subhead text-(--list-row-ink-3)"],
+		chevron: ["flex shrink-0 items-center justify-center", "text-(--list-row-ink-3) [&>svg]:size-5 [&>svg]:shrink-0"]
+	},
 	variants: {
-		shape: {
-			square: "",
-			circle: { root: "rounded-full" }
+		variant: {
+			default: { root: ["min-h-16 [--list-row-rule-start:63px]", hairline] },
+			plain: { root: ["[--list-row-rule-start:16px]", hairline] },
+			entry: { root: "" }
+		},
+		interactive: {
+			true: { root: [
+				"not-disabled:not-aria-disabled:not-data-selected:hover:overlay-subtle",
+				"not-disabled:not-aria-disabled:not-data-selected:active:overlay-medium",
+				"not-data-selected:data-popup-open:overlay-subtle"
+			] },
+			false: {}
+		},
+		wrap: {
+			true: { description: "whitespace-normal text-pretty" },
+			false: {}
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		interactive: true,
+		wrap: false
+	}
+});
+//#endregion
+//#region src/components/list-row/list-row.tsx
+/** An inset group: rows wrapped in a card (surface, hairline, radius-lg). */
+function ListRowGroup({ className, render, ...props }) {
+	const { group } = listRow();
+	const defaultProps = {
+		"data-slot": "list-row-group",
+		className: group({ className })
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+/**
+* One row of a list. It renders a `button` by default; pass `render={<a />}`
+* (or a router link) for a row that goes somewhere. Children are the leading
+* block (an avatar, a channel or icon tile, `ListRowIcon`), `ListRowBody`, and
+* anything trailing (a value, a badge, a switch, `ListRowChevron`).
+*/
+function ListRow({ variant = "default", tone = "default", selected = false, interactive = true, className, render, ...props }) {
+	const { root } = listRow({
+		variant,
+		interactive
+	});
+	const defaultProps = {
+		"data-slot": "list-row",
+		"data-variant": variant,
+		"data-tone": tone === "default" ? void 0 : tone,
+		"data-selected": selected ? "" : void 0,
+		className: root({ className }),
+		...interactive && !render ? { type: "button" } : {}
+	};
+	return useRender({
+		defaultTagName: interactive ? "button" : "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+/** A 20px leading icon in ink-3: entry rows and settings. */
+function ListRowIcon({ className, render, ...props }) {
+	const { icon } = listRow();
+	const defaultProps = {
+		"data-slot": "list-row-icon",
+		"aria-hidden": true,
+		className: icon({ className })
+	};
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+/** The text column: the title and the preview, or a `ListRowTop` and a `ListRowBottom`. */
+function ListRowBody({ className, render, ...props }) {
+	const { body } = listRow();
+	const defaultProps = {
+		"data-slot": "list-row-body",
+		className: body({ className })
+	};
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+/** The first line: the title, then the time. */
+function ListRowTop({ className, render, ...props }) {
+	const { line } = listRow();
+	const defaultProps = {
+		"data-slot": "list-row-top",
+		className: line({ className })
+	};
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+/** The second line: the preview, then at most one badge. */
+function ListRowBottom({ className, render, ...props }) {
+	const { line } = listRow();
+	const defaultProps = {
+		"data-slot": "list-row-bottom",
+		className: line({ className })
+	};
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+/** 16/24 600 on one line; the row's tone sets its weight and ink. */
+function ListRowTitle({ className, render, ...props }) {
+	const { title } = listRow();
+	const defaultProps = {
+		"data-slot": "list-row-title",
+		className: title({ className })
+	};
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+/** The preview (who spoke first: "Wug: …") or a setting's consequence, 14/20 ink-2. */
+function ListRowDescription({ className, render, wrap = false, ...props }) {
+	const { description } = listRow({ wrap });
+	const defaultProps = {
+		"data-slot": "list-row-description",
+		className: description({ className })
+	};
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+/** Machine-written facts in Space Mono 12, ink-3: the time, a gray count. */
+function ListRowMeta({ className, render, ...props }) {
+	const { meta } = listRow();
+	const defaultProps = {
+		"data-slot": "list-row-meta",
+		className: meta({ className })
+	};
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+/** A setting's current value on the right, 15/20 ink-3, at most 45% of the row. */
+function ListRowValue({ className, render, ...props }) {
+	const { value } = listRow();
+	const defaultProps = {
+		"data-slot": "list-row-value",
+		className: value({ className })
+	};
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+/** The ink-3 arrow of a row that opens another page. */
+function ListRowChevron({ className, render, ...props }) {
+	const { chevron } = listRow();
+	const defaultProps = {
+		"data-slot": "list-row-chevron",
+		"aria-hidden": true,
+		className: chevron({ className }),
+		children: /* @__PURE__ */ jsx(ChevronRight, {})
+	};
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+//#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" },
@@ -1110,21 +1898,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"],
@@ -1403,44 +2176,926 @@ function DropdownMenu(props) {
 		...props
 	});
 }
-function DropdownMenuSubmenu(props) {
-	return /* @__PURE__ */ jsx(Menu.SubmenuRoot, {
-		"data-slot": "dropdown-menu-submenu",
+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, 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
+	});
+}
+/**
+* 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
 	});
 }
-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,
+/**
+* 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 DropdownMenuPortal(props) {
-	return /* @__PURE__ */ jsx(Menu.Portal, {
-		"data-slot": "dropdown-menu-portal",
+function PreviewCardPortal(props) {
+	return /* @__PURE__ */ jsx(PreviewCard.Portal, {
+		"data-slot": "preview-card-portal",
 		...useThemeScopeProps(props)
 	});
 }
-function DropdownMenuPopup({ className, ...props }) {
-	const { content } = dropdownMenu();
+function PreviewCardPopup({ className, ...props }) {
+	const themeState = useTheme();
+	const { popup } = previewCard();
+	const scopeProps = resolveThemeScopeProps({
+		...props,
+		className: popup({ className })
+	}, themeState);
 	return /* @__PURE__ */ jsx("div", {
-		"data-slot": "dropdown-menu-content",
-		className: content({ className }),
-		...props
+		"data-slot": "preview-card-content",
+		...scopeProps
 	});
 }
-function DropdownMenuContent({ align = "start", alignOffset = 0, anchor, arrowPadding, collisionAvoidance, collisionBoundary, collisionPadding, disableAnchorTracking, positionMethod = "fixed", side = "bottom", sideOffset, sticky, portalProps, className, ...props }) {
-	const resolvedSideOffset = sideOffset ?? 6;
-	const { positioner, content } = dropdownMenu();
-	return /* @__PURE__ */ jsx(DropdownMenuPortal, {
+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(Menu.Positioner, {
+		children: /* @__PURE__ */ jsx(PreviewCard.Positioner, {
 			align,
 			alignOffset,
 			anchor,
@@ -1451,195 +3106,102 @@ function DropdownMenuContent({ align = "start", alignOffset = 0, anchor, arrowPa
 			disableAnchorTracking,
 			positionMethod,
 			side,
-			sideOffset: resolvedSideOffset,
+			sideOffset,
 			sticky,
 			className: positioner(),
-			children: /* @__PURE__ */ jsx(Menu.Popup, {
-				"data-slot": "dropdown-menu-content",
-				className: content({ className }),
+			children: /* @__PURE__ */ jsx(PreviewCard.Popup, {
+				"data-slot": "preview-card-content",
+				className: popup({ 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();
+function PreviewCardHeader({ className, ...props }) {
+	const { header } = previewCard();
 	return /* @__PURE__ */ jsx("div", {
-		"data-slot": "dropdown-menu-footer",
-		className: footer({ className }),
+		"data-slot": "preview-card-header",
+		className: header({ 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();
+function PreviewCardSeparator({ className, ...props }) {
+	const { separator } = previewCard();
 	return /* @__PURE__ */ jsx("div", {
-		"data-slot": "dropdown-menu-label",
-		className: label({ className }),
+		role: "separator",
+		"aria-orientation": "horizontal",
+		"data-slot": "preview-card-separator",
+		className: separator({ className }),
 		...props
 	});
 }
-function DropdownMenuShortcut({ className, ...props }) {
-	const { shortcut } = dropdownMenu();
-	return /* @__PURE__ */ jsx(Kbd, {
-		"data-slot": "dropdown-menu-shortcut",
-		className: shortcut({ className }),
+function PreviewCardTitle({ className, ...props }) {
+	const { title } = previewCard();
+	return /* @__PURE__ */ jsx("p", {
+		"data-slot": "preview-card-title",
+		className: title({ className }),
 		...props
 	});
 }
-function DropdownMenuItemCount({ className, ...props }) {
-	const { itemCount } = dropdownMenu();
-	return /* @__PURE__ */ jsx(Badge, {
-		"data-slot": "dropdown-menu-item-count",
-		className: itemCount({ className }),
+function PreviewCardDescription({ className, ...props }) {
+	const { description } = previewCard();
+	return /* @__PURE__ */ jsx("p", {
+		"data-slot": "preview-card-description",
+		className: description({ className }),
 		...props
 	});
 }
-function DropdownMenuSeparator({ className, ...props }) {
-	const { separator } = dropdownMenu();
-	return /* @__PURE__ */ jsx(Menu.Separator, {
-		"data-slot": "dropdown-menu-separator",
-		className: separator({ className }),
+function PreviewCardArrow({ className, ...props }) {
+	const { arrow } = previewCard();
+	return /* @__PURE__ */ jsx(PreviewCard.Arrow, {
+		"data-slot": "preview-card-arrow",
+		className: arrow({ 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",
+/** 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
 	});
 }
-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,
+/** 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) {
@@ -2131,8 +3693,8 @@ const messageItem = tv$1({
 			"has-data-popup-open:[--mi-toolbar-opacity:1] has-data-popup-open:[--mi-toolbar-pe:auto]",
 			"min-h-0 px-2 py-timeline-row border-t-(length:--spacing-timeline-turn) border-transparent bg-clip-padding",
 			"hover:[--mi-ct-color:var(--foreground-hint)] has-data-popup-open:[--mi-ct-color:var(--foreground-hint)]",
-			"bg-(--mi-row-fill) [--mi-row-fill:initial]",
-			"hover:[--mi-row-fill:var(--fill-subtle)]",
+			"bg-(--mi-row-fill) [--mi-row-fill:var(--located-fill)]",
+			"not-data-located:hover:[--mi-row-fill:var(--fill-subtle)]",
 			"data-popup-open:[--mi-row-fill:var(--fill-subtle)] has-data-popup-open:[--mi-row-fill:var(--fill-subtle)]",
 			"has-data-[slot=message-item-search-match]:[--mi-row-fill:var(--info-soft)] has-data-[slot=message-item-search-match]:hover:[--mi-row-fill:var(--info-soft)]",
 			"has-[[data-slot=message-multi-select-checkbox][data-checked]]:[--mi-row-fill:var(--info-soft)]",
@@ -2225,11 +3787,12 @@ const messageItem = tv$1({
 });
 //#endregion
 //#region src/components/message-item/message-item-root.tsx
-function MessageItem({ className, compact, render, ...props }) {
+function MessageItem({ className, compact, located = false, render, ...props }) {
 	const { root } = messageItem({ compact });
 	const defaultProps = {
 		"data-message-item": "",
 		"data-compact": compact ? "true" : void 0,
+		"data-located": located ? "" : void 0,
 		className: root({ className })
 	};
 	return useRender({
@@ -2882,10 +4445,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 10px 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 +4506,36 @@ const messageReference = tv$1({
 			SUFFIX_LIFT,
 			"font-mono text-label leading-none font-normal text-foreground-hint"
 		],
-		indicator: ["pointer-events-none absolute -right-1.5 top-0 inline-flex size-2 shrink-0 items-center justify-center", "*:data-[slot=status]:size-full"]
+		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"],
+		readMark: [
+			"relative inline-block shrink-0 self-center",
+			"-mr-[calc(0.857em*2/24)]",
+			"align-[calc(0.7em/2-0.857em/2)] leading-none",
+			"text-foreground-hint",
+			"[&>svg]:block [&>svg]:size-[0.857em]"
+		]
+	},
+	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)]" } }
 	},
-	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") }
-	} },
 	defaultVariants: { variant: "muted" }
 });
 //#endregion
@@ -2958,8 +4562,36 @@ function MessageReferenceIndicator({ className, render, ...props }) {
 		state: { slot: "message-reference-indicator" }
 	});
 }
-function MessageReferenceChip({ className, render, variant = "muted", ...props }) {
-	const { root } = messageReference({ variant });
+/**
+* The read receipt on a mention: a muted check after the mention's text, once
+* the one mentioned has read the message. Put it last inside the mention, and
+* render nothing until then. The check is decorative; `children` is what a
+* screen reader says instead ("Read"), visually hidden.
+*/
+function MessageReferenceReadMark({ children, className, render, ...props }) {
+	const { readMark } = messageReference();
+	const defaultProps = {
+		className: readMark({ className }),
+		children: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Check, {
+			"aria-hidden": true,
+			strokeWidth: 2
+		}), children == null ? null : /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children
+		})] })
+	};
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "message-reference-read-mark" }
+	});
+}
+function MessageReferenceChip({ className, render, variant = "muted", capped, ...props }) {
+	const { root } = messageReference({
+		variant,
+		capped
+	});
 	return useReferenceRender(root({ className }), render, props);
 }
 function MessageReferenceLabel({ className, render, ...props }) {
@@ -2981,11 +4613,29 @@ function MessageReferenceSuffix({ className, render, ...props }) {
 		defaultTagName: "span",
 		render,
 		props: mergeProps(defaultProps, props),
-		state: { slot: "message-reference-suffix" }
+		state: { slot: "message-reference-suffix" }
+	});
+}
+/**
+* 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, ...props }) {
-	const { root } = messageReference({ variant: "pending" });
+function MessageReferencePending({ className, render, capped, ...props }) {
+	const { root } = messageReference({
+		variant: "pending",
+		capped
+	});
 	return useReferenceRender(root({ className }), render, props);
 }
 function MessageReferenceUnavailable({ className, render, ...props }) {
@@ -3551,99 +5201,31 @@ 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/skeleton/skeleton.tsx
+const skeleton = tv$1({
+	slots: { root: [
+		"animate-pulse motion-reduce:animate-none",
+		"pointer-events-none",
+		"data-[variant=line]:rounded-sticker data-[variant=line]:bg-fill-muted",
+		"data-[variant=block]:rounded-sticker data-[variant=block]:bg-fill-muted"
+	] },
+	variants: { variant: {
+		line: { root: "h-3" },
+		block: { root: "" },
+		circle: { root: ["rounded-sticker bg-fill-muted"] }
+	} },
+	defaultVariants: { variant: "block" }
+});
+function Skeleton({ variant = "block", className, ...props }) {
+	const { root } = skeleton({ variant });
+	return /* @__PURE__ */ jsx("div", {
+		"aria-hidden": "true",
+		"data-slot": "skeleton",
+		"data-variant": variant,
+		className: root({ className }),
+		...props
+	});
 }
 //#endregion
 //#region src/components/inbox-item/inbox-item.recipe.ts
@@ -3710,7 +5292,7 @@ const inboxItem = tv$1({
 			"flex shrink-0",
 			"mt-0 flex-col items-end gap-2 pt-px",
 			"max-md:flex-col max-md:items-end max-md:gap-2",
-			"after:hidden after:size-[9px] after:shrink-0 after:rounded-[2px] after:border-[1.5px] after:border-sticker-ink after:bg-attention-400",
+			"after:hidden after:size-2.5 after:-mb-px after:shrink-0 after:rounded-[2px] after:border-[1.5px] after:border-sticker-ink after:bg-attention-400",
 			"group-data-[unread=true]/inbox-item:after:block",
 			"*:not-data-[reveal=hover]:opacity-[calc(1-var(--inbox-item-reveal-aside,0)*var(--inbox-item-revealed,0))] after:opacity-[calc(1-var(--inbox-item-reveal-aside,0)*var(--inbox-item-revealed,0))]",
 			"*:not-data-[reveal=hover]:mr-(--inbox-item-aside-room,0px) after:mr-(--inbox-item-aside-room,0px)",
@@ -3785,4 +5367,274 @@ 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 };
+//#region src/components/inbox-item/inbox-item.tsx
+const InboxItemDisabledContext = createContext(false);
+const InboxItemDensityContext = createContext(void 0);
+function InboxItem({ active = false, className, density, disabled = false, render, ...props }) {
+	const { item } = inboxItem({ density });
+	const defaultProps = {
+		"aria-disabled": disabled || void 0,
+		"data-active": active ? "true" : void 0,
+		"data-density": density,
+		"data-disabled": disabled ? "true" : void 0,
+		"data-slot": "inbox-item",
+		className: item({ className: `group/inbox-item ${className ?? ""}`.trim() })
+	};
+	const element = useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+	return /* @__PURE__ */ jsx(InboxItemDisabledContext.Provider, {
+		value: disabled,
+		children: /* @__PURE__ */ jsx(InboxItemDensityContext.Provider, {
+			value: density,
+			children: element
+		})
+	});
+}
+function InboxItemTrigger({ className, onClick, render, ...props }) {
+	const disabled = useContext(InboxItemDisabledContext);
+	const { itemTrigger } = inboxItem();
+	const defaultProps = {
+		type: render ? void 0 : "button",
+		"aria-disabled": disabled || void 0,
+		"data-disabled": disabled ? "true" : void 0,
+		"data-slot": "inbox-item-open",
+		disabled: render ? void 0 : disabled,
+		tabIndex: disabled && render ? -1 : void 0,
+		className: itemTrigger({ className }),
+		onClick: (event) => {
+			if (disabled) {
+				event.preventDefault();
+				event.stopPropagation();
+				return;
+			}
+			onClick?.(event);
+		}
+	};
+	return useRender({
+		defaultTagName: "button",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function InboxItemLeading({ className, render, ...props }) {
+	const { itemLeading } = inboxItem();
+	const defaultProps = {
+		"data-slot": "inbox-item-leading",
+		className: itemLeading({ className })
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function InboxItemSelection({ className, render, ...props }) {
+	const { itemSelection } = inboxItem();
+	const defaultProps = {
+		"data-slot": "inbox-item-selection",
+		className: itemSelection({ className })
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function InboxItemContent({ className, render, ...props }) {
+	const { itemContent } = inboxItem();
+	const defaultProps = {
+		"data-slot": "inbox-item-content",
+		className: itemContent({ className })
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function InboxItemContext({ className, render, ...props }) {
+	const { itemContext } = inboxItem();
+	const defaultProps = {
+		"data-slot": "inbox-item-context",
+		className: itemContext({ className })
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function InboxItemSubtitle({ className, render, ...props }) {
+	const { itemSubtitle } = inboxItem();
+	const defaultProps = {
+		"data-slot": "inbox-item-subtitle",
+		className: itemSubtitle({ className })
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function InboxItemHeading({ className, render, ...props }) {
+	const { itemHeading } = inboxItem();
+	const defaultProps = {
+		"data-slot": "inbox-item-heading",
+		className: itemHeading({ className })
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function InboxItemTitle({ className, render, ...props }) {
+	const density = useContext(InboxItemDensityContext);
+	const { itemTitle } = inboxItem({ density });
+	const defaultProps = {
+		"data-slot": "inbox-item-title",
+		className: itemTitle({ className })
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function InboxItemTrailing({ className, render, ...props }) {
+	const density = useContext(InboxItemDensityContext);
+	const { itemTrailing } = inboxItem({ density });
+	const defaultProps = {
+		"data-slot": "inbox-item-trailing",
+		className: itemTrailing({ className })
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function InboxItemTimestamp({ className, render, ...props }) {
+	const density = useContext(InboxItemDensityContext);
+	const { itemTimestamp } = inboxItem({ density });
+	const defaultProps = {
+		"data-slot": "inbox-item-timestamp",
+		className: itemTimestamp({ className })
+	};
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function InboxItemMarks({ className, render, ...props }) {
+	const { itemMarks } = inboxItem();
+	const defaultProps = {
+		"data-slot": "inbox-item-marks",
+		className: itemMarks({ className })
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function InboxItemHoverTarget({ className, onClick, render, ...props }) {
+	const { itemHoverTarget } = inboxItem();
+	const defaultProps = {
+		"data-slot": "inbox-item-hover-target",
+		className: itemHoverTarget({ className }),
+		onClick: (event) => {
+			onClick?.(event);
+			if (event.defaultPrevented) return;
+			const trigger = event.currentTarget.closest("[data-slot=inbox-item]")?.querySelector("[data-slot=inbox-item-open]");
+			if (!trigger) return;
+			trigger.dispatchEvent(new MouseEvent("click", {
+				bubbles: true,
+				cancelable: true,
+				detail: event.detail,
+				altKey: event.altKey,
+				ctrlKey: event.ctrlKey,
+				metaKey: event.metaKey,
+				shiftKey: event.shiftKey
+			}));
+		}
+	};
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function InboxItemBody({ className, render, ...props }) {
+	const density = useContext(InboxItemDensityContext);
+	const { itemBody } = inboxItem({ density });
+	const defaultProps = {
+		"data-slot": "inbox-item-body",
+		className: itemBody({ className })
+	};
+	return useRender({
+		defaultTagName: "p",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function InboxItemMessage({ className, render, ...props }) {
+	const density = useContext(InboxItemDensityContext);
+	const { itemMessage } = inboxItem({ density });
+	const defaultProps = {
+		"data-slot": "inbox-item-message",
+		className: itemMessage({ className })
+	};
+	return useRender({
+		defaultTagName: "p",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function InboxItemSender({ className, render, ...props }) {
+	const { itemSender } = inboxItem();
+	const defaultProps = {
+		"data-slot": "inbox-item-sender",
+		className: itemSender({ className })
+	};
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function InboxItemMetadata({ className, render, ...props }) {
+	const { itemMetadata } = inboxItem();
+	const defaultProps = {
+		"data-slot": "inbox-item-metadata",
+		className: itemMetadata({ className })
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function InboxItemActions({ className, render, reveal, ...props }) {
+	const density = useContext(InboxItemDensityContext);
+	const { itemActions } = inboxItem({
+		density,
+		reveal
+	});
+	const defaultProps = {
+		"data-reveal": reveal,
+		"data-slot": "inbox-item-actions",
+		className: itemActions({ className })
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+//#endregion
+export { MessageMultiSelect as $, PopoverTitle as $n, ListRowTitle as $r, MessageItemAvatarSlot as $t, MessageQuotedPreview as A, DialogSheetReset as Ai, MobileNavServerItem as An, PanelBody as Ar, MessageItemReadReceipt as At, MessageQuotedPreviewLoading as B, ThemeStateContext as Bi, MobileNavServerPopoverRowLabel as Bn, ScrollAreaThumb as Br, MessageItemMeta as Bt, MessageListJumpPillDismiss as C, DialogSurface as Ci, PreviewCardHeader as Cn, DropdownMenuShortcut as Cr, MessageReactionTooltipMeta as Ct, MessageListHistoryLimited as D, panelToggleAction as Di, PreviewCardSeparator as Dn, Kbd as Dr, MessageReactionTooltipSeparator as Dt, MessageListEndFade as E, PanelAction as Ei, PreviewCardPortal as En, DropdownMenuTrigger as Er, MessageReactionTooltipNames as Et, MessageQuotedPreviewAuthorMeta as F, OverlayLayerProvider as Fi, MobileNavServerPopoverGroup as Fn, PanelSection as Fr, MessageItemDelegatedBy as Ft, MessageEmbed as G, headEdgePull as Gi, PopoverBody as Gn, ListRow as Gr, MessageItemTime as Gt, MessageQuotedPreviewThread as H, stackedActions as Hi, PopoverActions as Hn, Checkbox$1 as Hr, MessageItemSenderBadges as Ht, MessageQuotedPreviewAuthorName as I, useParentOverlayKind as Ii, MobileNavServerPopoverList as In, ScrollArea$1 as Ir, MessageItemDelegatedByButton as It, MessageEmbedHeader as J, PopoverDescription as Jn, ListRowChevron as Jr, MessageItemContent as Jt, MessageEmbedContent as K, headEdges as Ki, PopoverClose as Kn, ListRowBody as Kr, MessageItemAttachments as Kt, MessageQuotedPreviewChannel as L, withOverlayLayer as Li, MobileNavServerPopoverRow as Ln, ScrollAreaContent as Lr, MessageItemDelegatedByName as Lt, MessageQuotedPreviewAttachments as M, buttonVariants as Mi, MobileNavServerPopoverContent as Mn, PanelHeaderRoot as Mr, MessageItemToolbar as Mt, MessageQuotedPreviewAuthor as N, Spinner as Ni, MobileNavServerPopoverDestination as Nn, PanelScrollContent as Nr, MessageItemToolbarButton as Nt, MessageListNotice as O, TextLink as Oi, PreviewCardTitle as On, KbdGroup as Or, MessageItemBadge as Ot, MessageQuotedPreviewAuthorDelegatedBy as P, defaultNativeButton as Pi, MobileNavServerPopoverDestinations as Pn, PanelScrollViewport as Pr, MessageItemDelegatedAvatar as Pt, MessageTextSelectionToolbarSeparator as Q, PopoverSeparator as Qn, ListRowMeta as Qr, MessageItemSearchMatch as Qt, MessageQuotedPreviewContent as R, useThemeScopeProps as Ri, MobileNavServerPopoverRowBody as Rn, ScrollAreaCorner as Rr, MessageItemHeader as Rt, MessageListJumpPill as S, DialogSheetBack as Si, PreviewCardFooter as Sn, DropdownMenuSeparator as Sr, MessageReactionTooltipContent as St, MessageListDateDivider as T, DialogTrigger as Ti, PreviewCardPopup as Tn, DropdownMenuSubmenuTrigger as Tr, MessageReactionTooltipNameText as Tt, MessageQuotedPreviewTimestamp as U, useStackedActions as Ui, PopoverArrow as Un, CheckboxIndicator as Ur, MessageItemSenderButton as Ut, MessageQuotedPreviewText as V, tv$1 as Vi, Popover$1 as Vn, ScrollAreaViewport as Vr, MessageItemSender as Vt, MessageQuotedPreviewUnavailable as W, controlIconInset as Wi, PopoverBackdrop as Wn, PRESENCE_COLOR as Wr, MessageItemSenderGroup as Wt, MessageTextSelectionToolbar as X, PopoverPopup as Xn, ListRowGroup as Xr, MessageItemEmbedded as Xt, messageEmbed as Y, PopoverHeader as Yn, ListRowDescription as Yr, MessageItemEdited as Yt, MessageTextSelectionToolbarButton as Z, PopoverPortal as Zn, ListRowIcon as Zr, MessageItemFooter as Zt, InboxItemTrailing as _, DialogFooterNote as _i, PreviewCardArrow as _n, DropdownMenuPopup as _r, MessageReactionGlyph as _t, InboxItemContext as a, TooltipProvider as ai, AvatarBadge as an, MobileNavLabel as ar, MessageReferenceIndicator as at, Skeleton as b, DialogOverlay as bi, PreviewCardDescription as bn, DropdownMenuRadioItem as br, MessageReactionQuickButton as bt, InboxItemLeading as c, DialogCommit as ci, AvatarGroupCount as cn, DropdownMenuCheckboxItem as cr, MessageReferenceReadMark as ct, InboxItemMetadata as d, Dialog$1 as di, measureContent as dn, DropdownMenuFooter as dr, MessageReferenceUnavailable as dt, ListRowTop as ei, MessageItemContinuationTime as en, PopoverTrigger as er, MessageMultiSelectCheckbox as et, InboxItemSelection as f, DialogBody as fi, measureElement as fn, DropdownMenuItem as fr, inlineChip as ft, InboxItemTitle as g, DialogFooter as gi, PreviewCardActions as gn, DropdownMenuLinkItem as gr, MessageReactionErrorIndicator as gt, InboxItemTimestamp as h, DialogDescription as hi, PreviewCard$1 as hn, DropdownMenuLabel as hr, MessageReactionCount as ht, InboxItemContent as i, TooltipPortal as ii, Avatar$1 as in, MobileNavItem as ir, MessageReferenceIcon as it, MessageQuotedPreviewAttachment as j, Button$1 as ji, MobileNavServerPopover as jn, PanelFooter as jr, MessageItemSavedIndicator as jt, MessageList as k, textLinkVariants as ki, PreviewCardTrigger as kn, Panel as kr, MessageItemBadgeSeparator as kt, InboxItemMarks as l, DialogSheetContent as li, AvatarImage as ln, DropdownMenuCheckboxItemIndicator as lr, MessageReferenceSuffix as lt, InboxItemSubtitle as m, DialogContent as mi, readNow as mn, DropdownMenuItemLabel as mr, MessageReactionChip as mt, InboxItemActions as n, Tooltip$1 as ni, MessageItem as nn, useHoldThenMoveTouchSensor as nr, MessageMultiSelectToolbarActions as nt, InboxItemHeading as o, TooltipTrigger as oi, AvatarFallback as on, MobileNavRoot as or, MessageReferenceLabel as ot, InboxItemSender as p, DialogClose as pi, observeTruncation as pn, DropdownMenuItemCount as pr, MessageReactionAddButton as pt, MessageEmbedFooter as q, decisionWidth as qi, PopoverContent as qn, ListRowBottom as qr, MessageItemBody as qt, InboxItemBody as r, TooltipContent as ri, searchHit as rn, useMouseOnlyPointerSensor as rr, MessageReferenceChip as rt, InboxItemHoverTarget as s, Badge as si, AvatarGroup as sn, DropdownMenu as sr, MessageReferencePending as st, InboxItem as t, ListRowValue as ti, MessageItemGutter as tn, PopoverViewport as tr, MessageMultiSelectToolbar as tt, InboxItemMessage as u, useMobileViewport as ui, useOverflowTitle as un, DropdownMenuContent as ur, MessageReferenceText as ut, InboxItemTrigger as v, DialogHeader as vi, PreviewCardBody as vn, DropdownMenuPortal as vr, MessageReactionPickerContent as vt, MessageListJumpPillGroup as w, DialogTitle as wi, PreviewCardMeta as wn, DropdownMenuSubmenu as wr, MessageReactionTooltipName as wt, MessageListJumpControls as x, DialogPortal as xi, PreviewCardEyebrow as xn, DropdownMenuRadioItemIndicator as xr, MessageReactionQuickRow as xt, inboxItem as y, DialogNav as yi, PreviewCardContent as yn, DropdownMenuRadioGroup as yr, MessageReactionPickerStatic as yt, MessageQuotedPreviewHeader as z, useTheme as zi, MobileNavServerPopoverRowDescription as zn, ScrollAreaScrollbar as zr, MessageItemInlineStatus as zt };