@botiverse/raft-ui 0.22.0 → 0.23.0

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

@@ -1,6 +1,6 @@
 import { cn } from "./cn.mjs";
 import { Dialog } from "@base-ui/react/dialog";
-import { ArrowLeft, 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 { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
@@ -56,15 +56,22 @@ const headEdges = ["px-5 max-md:px-4", ...headEdgePull];
 * as the arithmetic so it follows the control tokens wherever they switch.
 */
 const controlIconInset = "[--icon-inset:calc((var(--control-height)-var(--control-icon-size))/2)]";
+//#endregion
+//#region src/lib/stacked-actions.ts
 /**
 * The row of buttons while `data-stacked` is set: a full-width column. A
 * button alone in a wrapper (a tooltip's trigger) fills the width too.
+*
+* Until the row has been measured and painted once (`data-measured`), its
+* buttons have no transition. The first measure lands after the buttons were
+* styled as a row, so a stacked ghost Cancel would otherwise fade its frame in
+* as the dialog opens; the first painted frame must already be the stack.
 */
 const stackedActions = [
 	"data-stacked:flex-col-reverse",
 	"data-stacked:items-stretch",
 	"data-stacked:*:data-[slot=button]:w-full data-stacked:[&>*>[data-slot=button]:only-child]:w-full",
-	...[].map((value) => `data-stacked:${value}`)
+	"not-data-measured:**:data-[slot=button]:transition-none"
 ];
 function assignRef$2(ref, value) {
 	if (typeof ref === "function") ref(value);
@@ -117,11 +124,16 @@ function useStackedActions(ref, inParent = false) {
 	useLayoutEffect(() => {
 		const frame = inParent ? row?.parentElement : row;
 		if (!row || !frame || typeof ResizeObserver === "undefined") return;
+		let raf = 0;
+		let settle = 0;
 		const measure = () => {
 			const overflows = rowOverflows(row, frame);
-			if (overflows !== void 0) setStacked(overflows);
+			if (overflows === void 0) return;
+			setStacked(overflows);
+			if (!settle && !row.hasAttribute("data-measured")) settle = requestAnimationFrame(() => {
+				settle = requestAnimationFrame(() => row.setAttribute("data-measured", ""));
+			});
 		};
-		let raf = 0;
 		const schedule = () => {
 			cancelAnimationFrame(raf);
 			raf = requestAnimationFrame(measure);
@@ -146,6 +158,7 @@ function useStackedActions(ref, inParent = false) {
 		return () => {
 			live = false;
 			cancelAnimationFrame(raf);
+			cancelAnimationFrame(settle);
 			resize.disconnect();
 			mutation.disconnect();
 			fonts?.removeEventListener("loadingdone", schedule);
@@ -446,6 +459,21 @@ const buttonVariants = tv$1({
 		size: "md"
 	},
 	compoundVariants: [
+		{
+			variant: "ghost",
+			size: [
+				"xs",
+				"sm",
+				"md",
+				"lg",
+				"xl"
+			],
+			class: { root: [
+				"in-data-stacked:border-line-strong in-data-stacked:bg-layer-card",
+				"in-data-stacked:hover:bg-layer-card in-data-stacked:active:bg-layer-card",
+				"in-data-stacked:hover:overlay-medium in-data-stacked:active:overlay-medium"
+			] }
+		},
 		{
 			variant: "ghost",
 			size: [
@@ -1567,6 +1595,231 @@ function TooltipContent({ align = "center", alignOffset = 0, anchor, arrowPaddin
 	});
 }
 //#endregion
+//#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: ["min-w-0 truncate", "font-mono text-mono-meta font-normal tabular-nums text-(--list-row-ink-3)"],
+		value: ["max-w-[45%] shrink-0 truncate", "text-subhead text-(--list-row-ink-3)"],
+		chevron: ["flex shrink-0 items-center justify-center", "text-(--list-row-ink-3) [&>svg]:size-5 [&>svg]:shrink-0"]
+	},
+	variants: {
+		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
@@ -3466,10 +3719,13 @@ const messageItem = tv$1({
 			"group/message relative flex h-fit gap-3",
 			"hover:[--mi-toolbar-opacity:1] hover:[--mi-toolbar-pe:auto] focus-within:[--mi-toolbar-opacity:1] focus-within:[--mi-toolbar-pe:auto]",
 			"has-data-popup-open:[--mi-toolbar-opacity:1] has-data-popup-open:[--mi-toolbar-pe:auto]",
+			"hover:[--mi-header-mask:linear-gradient(to_left,transparent_calc(var(--mi-toolbar-width)+8px),black_calc(var(--mi-toolbar-width)+20px))]",
+			"focus-within:[--mi-header-mask:linear-gradient(to_left,transparent_calc(var(--mi-toolbar-width)+8px),black_calc(var(--mi-toolbar-width)+20px))]",
+			"has-data-popup-open:[--mi-header-mask:linear-gradient(to_left,transparent_calc(var(--mi-toolbar-width)+8px),black_calc(var(--mi-toolbar-width)+20px))]",
 			"min-h-0 px-2 py-timeline-row border-t-(length:--spacing-timeline-turn) border-transparent bg-clip-padding",
 			"hover:[--mi-ct-color:var(--foreground-hint)] has-data-popup-open:[--mi-ct-color:var(--foreground-hint)]",
-			"bg-(--mi-row-fill) [--mi-row-fill: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)]",
@@ -3490,7 +3746,7 @@ const messageItem = tv$1({
 		content: ["min-w-0 flex-1", "text-body text-foreground"],
 		header: [
 			"mb-px flex min-w-0 items-baseline gap-1.5 overflow-hidden",
-			"pointer-fine:pe-(--mi-toolbar-reserve,7rem)",
+			"mask-(--mi-header-mask,none)",
 			"has-data-[slot=message-item-delegated-by]:[--mi-owner-basis:3rem] has-data-[slot=message-item-delegated-by]:[--mi-owner-flex:1_0]"
 		],
 		senderGroup: [
@@ -3535,7 +3791,7 @@ const messageItem = tv$1({
 			"wrap-break-word select-text",
 			"**:select-text",
 			"text-body text-foreground",
-			"selection:bg-brand-soft"
+			"selection:bg-selection"
 		],
 		searchMatch: searchHit,
 		embedded: ["min-w-0", "mt-2"],
@@ -3562,11 +3818,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({
@@ -3849,12 +4106,38 @@ function MessageItemDelegatedAvatar({ className, deleted, ...props }) {
 }
 //#endregion
 //#region src/components/message-item/message-item-toolbar.tsx
-function MessageItemToolbar({ className, render, ...props }) {
+/**
+* Tells the row how wide the toolbar is (`--mi-toolbar-width` on the row), so
+* the header can fade out its end under the toolbar while it shows: the
+* header keeps no room for the toolbar (message-item.md, "The hover
+* toolbar"), and the toolbar's card only reaches part of the sender line.
+* Measured with a ResizeObserver, so a toolbar with more or fewer actions
+* covers exactly its own width; nothing on the row moves.
+*/
+function useToolbarWidthOnRow(element) {
+	useLayoutEffect(() => {
+		const row = element?.closest("[data-message-item]");
+		if (!(element instanceof HTMLElement) || !row) return;
+		const write = () => row.style.setProperty("--mi-toolbar-width", `${element.offsetWidth}px`);
+		write();
+		if (typeof ResizeObserver === "undefined") return () => row.style.removeProperty("--mi-toolbar-width");
+		const resize = new ResizeObserver(write);
+		resize.observe(element);
+		return () => {
+			resize.disconnect();
+			row.style.removeProperty("--mi-toolbar-width");
+		};
+	}, [element]);
+}
+function MessageItemToolbar({ className, render, ref, ...props }) {
 	const { toolbar } = messageItem();
+	const [element, setElement] = useState(null);
+	useToolbarWidthOnRow(element);
 	const defaultProps = { className: toolbar({ className }) };
 	return useRender({
 		defaultTagName: "div",
 		render,
+		ref: ref ? [ref, setElement] : setElement,
 		props: mergeProps(defaultProps, props),
 		state: { slot: "message-item-toolbar" }
 	});
@@ -4235,7 +4518,7 @@ function MessageReactionTooltipMeta({ className, render, ...props }) {
 *   centred on the chip (alignment.md, Marks in running text).
 * - Sides: 6px at each end. A chip with a leading mark (a 14px icon, an app's
 *   image or avatar in `MessageReferenceIcon`'s 14px box, the loading spinner,
-*   a task's 9px status pixel, each in its own box) takes
+*   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.
@@ -4281,7 +4564,14 @@ const messageReference = tv$1({
 			"font-mono text-label leading-none font-normal text-foreground-hint"
 		],
 		icon: ["inline-flex size-3.5 shrink-0 items-center justify-center self-center", "*:size-full *:shrink-0 [&>img]:rounded-[2px] [&>img]:object-cover"],
-		indicator: ["pointer-events-none absolute -right-1.5 top-0 inline-flex size-2 shrink-0 items-center justify-center", "*:data-[slot=status]:size-full"]
+		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: {
@@ -4329,6 +4619,31 @@ function MessageReferenceIndicator({ className, render, ...props }) {
 		state: { slot: "message-reference-indicator" }
 	});
 }
+/**
+* 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,
@@ -4944,6 +5259,32 @@ function MessageListJumpPillDismiss({ className, children, render, nativeButton,
 	});
 }
 //#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
 const inboxItem = tv$1({
 	slots: {
@@ -5008,7 +5349,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)",
@@ -5083,4 +5424,274 @@ const inboxItem = tv$1({
 	}]
 });
 //#endregion
-export { MessageReactionPickerStatic as $, DropdownMenuRadioGroup as $n, DialogSheetReset as $r, PreviewCardContent as $t, messageEmbed as A, PopoverPopup as An, Badge as Ar, MessageItemEmbedded as At, MessageReferenceIndicator as B, MobileNavRoot as Bn, DialogFooterNote as Br, AvatarFallback as Bt, MessageQuotedPreviewThread as C, PopoverArrow as Cn, CheckboxIndicator as Cr, MessageItemSenderButton as Ct, MessageEmbedContent as D, PopoverContent as Dn, TooltipPortal as Dr, MessageItemBody as Dt, MessageEmbed as E, PopoverClose as En, TooltipContent as Er, MessageItemAttachments as Et, MessageMultiSelectCheckbox as F, PopoverViewport as Fn, DialogBody as Fr, MessageItemGutter as Ft, MessageReferenceUnavailable as G, DropdownMenuFooter as Gn, DialogSheetBack as Gr, measureContent as Gt, MessageReferencePending as H, DropdownMenuCheckboxItem as Hn, DialogNav as Hr, AvatarGroupCount as Ht, MessageMultiSelectToolbar as I, useHoldThenMoveTouchSensor as In, DialogClose as Ir, MessageItem as It, MessageReactionChip as J, DropdownMenuItemLabel as Jn, DialogTrigger as Jr, readNow as Jt, inlineChip as K, DropdownMenuItem as Kn, DialogSurface as Kr, measureElement as Kt, MessageMultiSelectToolbarActions as L, useMouseOnlyPointerSensor as Ln, DialogContent as Lr, searchHit as Lt, MessageTextSelectionToolbarButton as M, PopoverSeparator as Mn, DialogSheetContent as Mr, MessageItemSearchMatch as Mt, MessageTextSelectionToolbarSeparator as N, PopoverTitle as Nn, useMobileViewport as Nr, MessageItemAvatarSlot as Nt, MessageEmbedFooter as O, PopoverDescription as On, TooltipProvider as Or, MessageItemContent as Ot, MessageMultiSelect as P, PopoverTrigger as Pn, Dialog$1 as Pr, MessageItemContinuationTime as Pt, MessageReactionPickerContent as Q, DropdownMenuPortal as Qn, textLinkVariants as Qr, PreviewCardBody as Qt, MessageReferenceChip as R, MobileNavItem as Rn, DialogDescription as Rr, Avatar$1 as Rt, MessageQuotedPreviewText as S, PopoverActions as Sn, Checkbox$1 as Sr, MessageItemSenderBadges as St, MessageQuotedPreviewUnavailable as T, PopoverBody as Tn, Tooltip$1 as Tr, MessageItemTime as Tt, MessageReferenceSuffix as U, DropdownMenuCheckboxItemIndicator as Un, DialogOverlay as Ur, AvatarImage as Ut, MessageReferenceLabel as V, DropdownMenu as Vn, DialogHeader as Vr, AvatarGroup as Vt, MessageReferenceText as W, DropdownMenuContent as Wn, DialogPortal as Wr, useOverflowTitle as Wt, MessageReactionErrorIndicator as X, DropdownMenuLinkItem as Xn, panelToggleAction as Xr, PreviewCardActions as Xt, MessageReactionCount as Y, DropdownMenuLabel as Yn, PanelAction as Yr, PreviewCard$1 as Yt, MessageReactionGlyph as Z, DropdownMenuPopup as Zn, TextLink as Zr, PreviewCardArrow as Zt, MessageQuotedPreviewAuthorName as _, MobileNavServerPopoverRow as _n, ScrollAreaContent as _r, MessageItemDelegatedByName as _t, MessageListJumpPillGroup as a, useParentOverlayKind as ai, PreviewCardPopup as an, DropdownMenuSubmenuTrigger as ar, MessageReactionTooltipNameText as at, MessageQuotedPreviewHeader as b, MobileNavServerPopoverRowLabel as bn, ScrollAreaThumb as br, MessageItemMeta as bt, MessageListHistoryLimited as c, useTheme as ci, PreviewCardTitle as cn, KbdGroup as cr, MessageItemBadge as ct, MessageQuotedPreview as d, stackedActions as di, MobileNavServerPopover as dn, PanelFooter as dr, MessageItemSavedIndicator as dt, Button$1 as ei, PreviewCardDescription as en, DropdownMenuRadioItem as er, MessageReactionQuickButton as et, MessageQuotedPreviewAttachment as f, useStackedActions as fi, MobileNavServerPopoverContent as fn, PanelHeaderRoot as fr, MessageItemToolbar as ft, MessageQuotedPreviewAuthorMeta as g, decisionWidth as gi, MobileNavServerPopoverList as gn, ScrollArea$1 as gr, MessageItemDelegatedByButton as gt, MessageQuotedPreviewAuthorDelegatedBy as h, headEdges as hi, MobileNavServerPopoverGroup as hn, PanelSection as hr, MessageItemDelegatedBy as ht, MessageListJumpPillDismiss as i, OverlayLayerProvider as ii, PreviewCardMeta as in, DropdownMenuSubmenu as ir, MessageReactionTooltipName as it, MessageTextSelectionToolbar as j, PopoverPortal as jn, DialogCommit as jr, MessageItemFooter as jt, MessageEmbedHeader as k, PopoverHeader as kn, TooltipTrigger as kr, MessageItemEdited as kt, MessageListNotice as l, ThemeStateContext as li, PreviewCardTrigger as ln, Panel as lr, MessageItemBadgeSeparator as lt, MessageQuotedPreviewAuthor as m, headEdgePull as mi, MobileNavServerPopoverDestinations as mn, PanelScrollViewport as mr, MessageItemDelegatedAvatar as mt, MessageListJumpControls as n, Spinner as ni, PreviewCardFooter as nn, DropdownMenuSeparator as nr, MessageReactionTooltipContent as nt, MessageListDateDivider as o, withOverlayLayer as oi, PreviewCardPortal as on, DropdownMenuTrigger as or, MessageReactionTooltipNames as ot, MessageQuotedPreviewAttachments as p, controlIconInset as pi, MobileNavServerPopoverDestination as pn, PanelScrollContent as pr, MessageItemToolbarButton as pt, MessageReactionAddButton as q, DropdownMenuItemCount as qn, DialogTitle as qr, observeTruncation as qt, MessageListJumpPill as r, defaultNativeButton as ri, PreviewCardHeader as rn, DropdownMenuShortcut as rr, MessageReactionTooltipMeta as rt, MessageListEndFade as s, useThemeScopeProps as si, PreviewCardSeparator as sn, Kbd as sr, MessageReactionTooltipSeparator as st, inboxItem as t, buttonVariants as ti, PreviewCardEyebrow as tn, DropdownMenuRadioItemIndicator as tr, MessageReactionQuickRow as tt, MessageList as u, tv$1 as ui, MobileNavServerItem as un, PanelBody as ur, MessageItemReadReceipt as ut, MessageQuotedPreviewChannel as v, MobileNavServerPopoverRowBody as vn, ScrollAreaCorner as vr, MessageItemHeader as vt, MessageQuotedPreviewTimestamp as w, PopoverBackdrop as wn, PRESENCE_COLOR as wr, MessageItemSenderGroup as wt, MessageQuotedPreviewLoading as x, Popover$1 as xn, ScrollAreaViewport as xr, MessageItemSender as xt, MessageQuotedPreviewContent as y, MobileNavServerPopoverRowDescription as yn, ScrollAreaScrollbar as yr, MessageItemInlineStatus as yt, MessageReferenceIcon as z, MobileNavLabel as zn, DialogFooter as zr, AvatarBadge as zt };
+//#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 };