@botiverse/raft-ui 0.11.0 → 0.13.0

package/dist/index.mjs

@@ -1,18 +1,15 @@
 import { cn } from "./cn.mjs";
-import { A as buttonVariants, C as DialogNav, D as DialogTitle, E as DialogSurface, F as resolveThemeScopeProps, I as useThemeScopeProps, L as useTheme, M as defaultNativeButton, N as useParentOverlayKind, O as DialogTrigger, P as withOverlayLayer, R as ThemeStateContext, S as DialogHeader, T as DialogPortal, _ as DialogBody, a as DrawerContent, b as DialogDescription, c as DrawerHeader, d as DrawerTitle, f as DrawerTrigger, g as Dialog, h as panelHeader, i as DrawerClose, j as Spinner, k as Button, l as DrawerOverlay, m as panelHeadEdges, n as DrawerActions, o as DrawerDescription, p as panelHeadActions, r as DrawerBody, s as DrawerFooter, t as Drawer, u as DrawerPortal, v as DialogClose, w as DialogOverlay, x as DialogFooter, y as DialogContent, z as tv } from "./drawer-yZD16Ybl.mjs";
+import { $ as MessageReactionTooltipNameText, $t as DropdownMenuSeparator, A as MessageTextSelectionToolbarButton, An as DialogBody, At as MessageItem, B as MessageReferenceUnavailable, Bn as DialogTitle, Bt as DropdownMenuCheckboxItem, C as MessageQuotedPreviewUnavailable, Cn as Tooltip, Ct as MessageItemEdited, D as MessageEmbedHeader, Dn as TooltipTrigger, Dt as MessageItemAvatarSlot, E as MessageEmbedFooter, En as TooltipProvider, Et as MessageItemSearchMatch, F as MessageReferenceChip, Fn as DialogHeader, Ft as AvatarGroup, G as MessageReactionGlyph, Gn as defaultNativeButton, Gt as DropdownMenuItemCount, H as MessageReactionChip, Hn as Button, Ht as DropdownMenuContent, I as MessageReferenceIndicator, In as DialogNav, It as AvatarGroupCount, J as MessageReactionQuickButton, Jn as resolveThemeScopeProps, Jt as DropdownMenuPopup, K as MessageReactionPickerContent, Kn as useParentOverlayKind, Kt as DropdownMenuItemLabel, L as MessageReferenceLabel, Ln as DialogOverlay, Lt as AvatarImage, M as MessageMultiSelect, Mn as DialogContent, Mt as Avatar, N as MessageMultiSelectCheckbox, Nn as DialogDescription, Nt as AvatarBadge, O as messageEmbed, On as Badge, Ot as MessageItemContinuationTime, P as MessageMultiSelectToolbar, Pn as DialogFooter, Pt as AvatarFallback, Q as MessageReactionTooltipName, Qn as tv, Qt as DropdownMenuRadioItemIndicator, R as MessageReferencePending, Rn as DialogPortal, Rt as useOverflowTitle, S as MessageQuotedPreviewTimestamp, Sn as PRESENCE_COLOR, St as MessageItemContent, T as MessageEmbedContent, Tn as TooltipPortal, Tt as MessageItemFooter, U as MessageReactionCount, Un as buttonVariants, Ut as DropdownMenuFooter, V as MessageReactionAddButton, Vn as DialogTrigger, Vt as DropdownMenuCheckboxItemIndicator, W as MessageReactionErrorIndicator, Wn as Spinner, Wt as DropdownMenuItem, X as MessageReactionTooltipContent, Xn as useTheme, Xt as DropdownMenuRadioGroup, Y as MessageReactionQuickRow, Yn as useThemeScopeProps, Yt as DropdownMenuPortal, Z as MessageReactionTooltipMeta, Zn as ThemeStateContext, Zt as DropdownMenuRadioItem, _ as MessageQuotedPreviewContent, _n as ScrollAreaThumb, _t as MessageItemSenderButton, a as MessageListDateDivider, an as KbdGroup, at as MessageItemSavedIndicator, b as MessageQuotedPreviewText, bn as Checkbox, bt as MessageItemAttachments, c as MessageList, cn as PanelFooter, d as MessageQuotedPreviewAttachments, dn as PanelScrollViewport, en as DropdownMenuShortcut, et as MessageReactionTooltipNames, f as MessageQuotedPreviewAuthor, fn as PanelSection, ft as MessageItemHeader, g as MessageQuotedPreviewChannel, gn as ScrollAreaScrollbar, gt as MessageItemSenderBadges, h as MessageQuotedPreviewAuthorName, hn as ScrollAreaCorner, ht as MessageItemSender, in as Kbd, it as MessageItemReadReceipt, j as MessageTextSelectionToolbarSeparator, jn as DialogClose, jt as searchHit, k as MessageTextSelectionToolbar, kn as Dialog, kt as MessageItemGutter, l as MessageQuotedPreview, ln as PanelHeaderRoot, m as MessageQuotedPreviewAuthorMeta, mn as ScrollAreaContent, mt as MessageItemMeta, nn as DropdownMenuSubmenuTrigger, nt as MessageItemBadge, o as MessageListHistoryLimited, on as Panel, ot as MessageItemToolbar, pn as ScrollArea, pt as MessageItemInlineStatus, q as MessageReactionPickerStatic, qn as withOverlayLayer, qt as DropdownMenuLabel, rn as DropdownMenuTrigger, rt as MessageItemBadgeSeparator, s as MessageListNotice, sn as PanelBody, st as MessageItemToolbarButton, tn as DropdownMenuSubmenu, tt as MessageReactionTooltipSeparator, u as MessageQuotedPreviewAttachment, un as PanelScrollContent, v as MessageQuotedPreviewHeader, vn as ScrollAreaViewport, vt as MessageItemSenderGroup, w as MessageEmbed, wn as TooltipContent, wt as MessageItemEmbedded, x as MessageQuotedPreviewThread, xn as CheckboxIndicator, xt as MessageItemBody, y as MessageQuotedPreviewLoading, yn as useMobileViewport, yt as MessageItemTime, z as MessageReferenceText, zn as DialogSurface, zt as DropdownMenu } from "./message-list-DP03T8gF.mjs";
 import { Dialog as Dialog$1 } from "@base-ui/react/dialog";
-import { AlertTriangle, Bell, Check, CheckCircle2, ChevronDown, ChevronLeft, ChevronRight, Copy, FileText, Image, Info, Minus, Upload, X, Zap } from "lucide-react";
-import { Children, Fragment, cloneElement, createContext, createElement, isValidElement, use, useCallback, useContext, useEffect, useId, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
+import { AlertTriangle, Bell, Check, CheckCircle2, ChevronDown, ChevronLeft, ChevronRight, Copy, FileText, Image, Info, Upload, X, Zap } from "lucide-react";
+import { Children, cloneElement, createContext, createElement, isValidElement, use, useCallback, useContext, useEffect, useId, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { Button as Button$1 } from "@base-ui/react/button";
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
-import { Tooltip as Tooltip$1 } from "@base-ui/react/tooltip";
-import { Checkbox as Checkbox$1 } from "@base-ui/react/checkbox";
-import { ScrollArea as ScrollArea$1 } from "@base-ui/react/scroll-area";
+import { Drawer as Drawer$1 } from "@base-ui/react/drawer";
 import { Collapsible } from "@base-ui/react/collapsible";
-import { Avatar as Avatar$1, ContextMenu as ContextMenu$1 } from "@base-ui/react";
-import { Menu } from "@base-ui/react/menu";
+import { ContextMenu as ContextMenu$1 } from "@base-ui/react";
 import { useHotkey } from "@tanstack/react-hotkeys";
 import { Popover as Popover$1 } from "@base-ui/react/popover";
 import { PreviewCard as PreviewCard$1 } from "@base-ui/react/preview-card";
@@ -25,7 +22,6 @@ import { RadioGroup as RadioGroup$1 } from "@base-ui/react/radio-group";
 import { Switch as Switch$1 } from "@base-ui/react/switch";
 import { Toggle } from "@base-ui/react/toggle";
 import { ToggleGroup as ToggleGroup$1 } from "@base-ui/react/toggle-group";
-import { Toolbar } from "@base-ui/react/toolbar";
 import { Progress as Progress$1 } from "@base-ui/react/progress";
 import { DndContext, DragOverlay, KeyboardCode, KeyboardSensor, PointerSensor, TouchSensor, closestCenter, closestCorners, getFirstCollision, pointerWithin, useDraggable, useDroppable, useSensor, useSensors } from "@dnd-kit/core";
 import { SortableContext, arrayMove, defaultAnimateLayoutChanges, horizontalListSortingStrategy, sortableKeyboardCoordinates, useSortable, verticalListSortingStrategy } from "@dnd-kit/sortable";
@@ -173,185 +169,448 @@ function AlertDialogCancel({ className, variant, size, ...props }) {
 	});
 }
 //#endregion
-//#region src/components/badge/badge.tsx
-const badge = tv({
-	slots: { root: [
-		"inline-flex h-[22px] w-fit min-w-0 max-w-full shrink-0 items-center gap-1 overflow-hidden whitespace-nowrap rounded-chip px-1.5",
-		"font-sans text-caption font-semibold normal-case tracking-normal",
-		"transition-[filter,opacity] duration-100",
-		"[&_svg]:size-3.5 [&_svg]:shrink-0 [&_[data-slot='spinner']]:size-3 [&_[data-slot='spinner']]:text-xs",
-		"disabled:cursor-not-allowed disabled:bg-fill-muted disabled:text-foreground-disabled disabled:opacity-100 disabled:inset-ring-0"
-	] },
+//#region src/components/panel/panel-header.recipe.ts
+/**
+* Where a head's edge controls sit, shared by every head (panel, section,
+* drawer, thread). Phone: a filled thing (a sticker, a pill) puts its shape
+* on 16. A ghost button has no shape, so its empty 44px box overhangs, and
+* the two edge buttons mirror each other: the last action (6px padding,
+* `panelHeadActions`' -3px) and a leading Back (16px padding, -13px) both sit
+* 3px from their edge. Their 22px icon frames are then 14px in and every
+* glyph's centre 25px in, whatever the glyph (an arrow, a gear, a narrow ⋮);
+* aligning ink instead would move each button by its glyph's own side
+* bearing. A Button straight in the head (ghost ones are PanelActions) is a
+* filled control, so its shape ends on the content edge: 20 / 16.
+*/
+const panelHeadEdges = [
+	"pr-3 pl-5 max-md:pr-1.5 max-md:pl-4",
+	"max-md:[&>[data-slot=panel-action]:first-child]:-ml-[13px]",
+	"[&>[data-slot=button]:last-child]:mr-2 max-md:[&>[data-slot=button]:last-child]:mr-2.5"
+];
+/**
+* A head's trailing actions. The last glyph ends on the head's edge: 20px on
+* desktop (12px of padding, 1px here, the 32px button's 7px glyph inset); on
+* a phone 14px in (44px buttons, 11px inset), mirroring a leading Back. The
+* margin and gap follow the button's size, not the layout: a touch screen
+* from 768px has the desktop head with 44px buttons, so -3px puts its last
+* glyph on 20px too.
+*/
+const panelHeadActions = "flex shrink-0 items-center gap-0.5 mr-[-3px] md:pointer-fine:mr-px md:pointer-fine:gap-1";
+/**
+* `header` and `sectionHeader` share one bar, expressed through
+* `compoundSlots`: a 56px row (the shell header height) with a seam under it.
+* On a phone the section head sits on the frame.
+*/
+const panelHeader = tv({
+	slots: {
+		header: [],
+		sectionHeader: [],
+		headerIcon: [
+			"flex size-[27px] shrink-0 items-center justify-center",
+			"rounded-sticker border-[1.5px] border-sticker-ink bg-brand text-sticker-ink ring-[1.5px] ring-sticker-edge",
+			"not-data-[icon-kind=avatar]:[&_svg]:size-3.5 not-data-[icon-kind=avatar]:[&_svg]:stroke-2",
+			"data-[icon-kind=avatar]:size-auto data-[icon-kind=avatar]:border-transparent data-[icon-kind=avatar]:bg-transparent"
+		],
+		headerContent: "flex min-w-0 flex-1 flex-col justify-center",
+		heading: "flex min-w-0 items-center gap-2",
+		title: "truncate font-sans text-headline font-bold text-foreground",
+		meta: "min-w-0 truncate font-sans text-caption text-foreground-hint",
+		status: [
+			"inline-flex shrink-0 items-center gap-1 border-0 bg-transparent p-0",
+			"font-sans text-caption font-medium normal-case text-foreground-hint",
+			"[&_svg]:size-3.5 [&_svg]:shrink-0"
+		],
+		activity: [
+			"inline-flex shrink-0 items-center gap-1.5",
+			"font-sans text-caption text-foreground-hint",
+			"[&_svg]:size-3.5 [&_svg]:shrink-0"
+		],
+		actions: panelHeadActions
+	},
+	variants: { size: {
+		sm: {},
+		md: { meta: ["text-footnote"] }
+	} },
+	compoundSlots: [{
+		slots: ["header", "sectionHeader"],
+		class: [
+			"flex h-(--shell-header-height,56px) shrink-0 items-center gap-3 max-md:gap-2",
+			panelHeadEdges,
+			"border-b border-line-seam bg-layer-canvas text-foreground",
+			"max-md:sticky max-md:top-0 max-md:z-30"
+		]
+	}, {
+		slots: ["sectionHeader"],
+		class: [
+			"max-md:bg-layer-frame max-md:text-foreground-on-frame",
+			"max-md:[&>[data-slot=panel-header-icon]]:hidden",
+			"max-md:**:data-[slot=panel-title]:text-foreground-on-frame",
+			"max-md:**:data-[slot=panel-meta]:text-foreground-on-frame-muted",
+			"max-md:**:data-[slot=panel-action]:text-foreground-on-frame",
+			"max-md:**:data-[slot=panel-action]:hover:bg-fill-frame-pressed max-md:**:data-[slot=panel-action]:active:bg-fill-frame-pressed"
+		]
+	}]
+});
+//#endregion
+//#region src/components/drawer/drawer.recipe.ts
+const drawerMotion = tv({
+	slots: {
+		overlay: [
+			"opacity-[max(var(--drawer-overlay-min-opacity,0),calc(1-var(--drawer-swipe-progress)))]",
+			"transition-opacity duration-200 ease-slide",
+			"data-starting-style:opacity-0 data-ending-style:pointer-events-none data-ending-style:opacity-0 data-ending-style:duration-150",
+			"motion-reduce:transition-none"
+		],
+		popup: [
+			"[--drawer-blur:2px] [--drawer-ease:var(--ease-slide)]",
+			"[--closed-transform:translate3d(var(--drawer-exit-x,0px),var(--drawer-exit-y,0px),0)]",
+			"[--drawer-stack-peek:16px] [--drawer-stack-step:0.05]",
+			"[--drawer-stack-progress:clamp(0,var(--drawer-swipe-progress),1)]",
+			"[--drawer-stack-offset:max(0px,calc((var(--nested-drawers)-var(--drawer-stack-progress))*var(--drawer-stack-peek)))]",
+			"[--drawer-stack-scale-base:calc(max(0,1-(var(--nested-drawers)*var(--drawer-stack-step))))]",
+			"[--drawer-stack-scale:clamp(0,calc(var(--drawer-stack-scale-base)+(var(--drawer-stack-step)*var(--drawer-stack-progress))),1)]",
+			"[--drawer-stack-shrink:calc(1-var(--drawer-stack-scale))]",
+			"[--drawer-stack-shrink-offset:calc(var(--drawer-stack-shrink)*var(--drawer-stack-size))]",
+			"origin-(--drawer-transform-origin)",
+			"transform-[translate3d(calc(var(--drawer-swipe-x,0px)+var(--drawer-stack-x,0px)),calc(var(--drawer-swipe-y,0px)+var(--drawer-stack-y,0px)),0)_scale(var(--drawer-stack-scale))]",
+			"opacity-100 blur-0",
+			"transition-[transform,height,opacity,filter] duration-240 ease-(--drawer-ease) will-change-transform",
+			"data-ending-style:duration-[calc(var(--drawer-swipe-strength,1)*180ms)]",
+			"data-starting-style:transform-(--closed-transform) data-starting-style:opacity-0 data-starting-style:blur-(--drawer-blur)",
+			"data-ending-style:transform-(--closed-transform) data-ending-style:opacity-0 data-ending-style:blur-(--drawer-blur)",
+			"data-swiping:duration-0 data-nested-drawer-swiping:duration-0 motion-reduce:transition-none"
+		],
+		content: ["transition-opacity duration-150 ease-slide motion-reduce:transition-none", "group-data-nested-drawer-open/drawer-popup:opacity-0 group-data-nested-drawer-swiping/drawer-popup:opacity-100"],
+		swipeHandle: ["transition-opacity duration-150 motion-reduce:transition-none", "group-data-nested-drawer-open/drawer-popup:opacity-0 group-data-nested-drawer-swiping/drawer-popup:opacity-100"]
+	},
 	variants: {
-		appearance: {
-			solid: { root: [
-				"h-5 min-w-5 justify-center rounded-sticker",
-				"font-bold tabular-nums",
-				"text-sticker-ink inset-ring-[1.5px] inset-ring-sticker-ink ring-[1.5px] ring-sticker-edge",
-				"[&_svg]:size-[13px]",
-				"enabled:hover:press-overlay-sticker"
+		side: {
+			down: { popup: [
+				"[--drawer-exit-y:calc(100%+var(--drawer-inset)+2px)]",
+				"[--drawer-stack-y:calc(0px-var(--drawer-stack-offset)-var(--drawer-stack-shrink-offset))]",
+				"[--drawer-transform-origin:50%_100%]"
+			] },
+			up: { popup: [
+				"[--drawer-exit-y:calc(-100%-var(--drawer-inset)-2px)]",
+				"[--drawer-stack-y:calc(var(--drawer-stack-offset)+var(--drawer-stack-shrink-offset))]",
+				"[--drawer-transform-origin:50%_0%]"
 			] },
-			soft: { root: ["text-foreground", "enabled:hover:press-overlay"] },
-			outline: { root: [
-				"font-mono text-mono-meta font-normal",
-				"bg-transparent text-foreground-muted inset-ring inset-ring-line-hairline",
-				"enabled:hover:bg-fill-pressed"
+			left: { popup: [
+				"[--drawer-exit-x:calc(-100%-var(--drawer-inset)-2px)]",
+				"[--drawer-stack-x:calc(var(--drawer-stack-offset)+var(--drawer-stack-shrink-offset))]",
+				"[--drawer-transform-origin:0%_50%]"
+			] },
+			right: { popup: [
+				"[--drawer-exit-x:calc(100%+var(--drawer-inset)+2px)]",
+				"[--drawer-stack-x:calc(0px-var(--drawer-stack-offset)-var(--drawer-stack-shrink-offset))]",
+				"[--drawer-transform-origin:100%_50%]"
 			] }
 		},
-		variant: {
-			default: "",
-			primary: "",
-			information: "",
-			muted: "",
-			accent: "",
-			success: "",
-			warning: "",
-			danger: ""
-		}
-	},
-	defaultVariants: {
-		appearance: "solid",
-		variant: "default"
-	},
-	compoundVariants: [
-		{
-			appearance: "solid",
-			variant: "default",
-			class: { root: "bg-sticker-paper" }
-		},
-		{
-			appearance: "solid",
-			variant: "muted",
-			class: { root: "bg-inactive" }
-		},
-		{
-			appearance: "solid",
-			variant: "primary",
-			class: { root: "bg-brand" }
-		},
-		{
-			appearance: "solid",
-			variant: "information",
-			class: { root: "bg-info" }
-		},
-		{
-			appearance: "solid",
-			variant: "accent",
-			class: { root: "bg-attention font-mono text-mono-meta" }
-		},
-		{
-			appearance: "solid",
-			variant: "success",
-			class: { root: "bg-success" }
-		},
-		{
-			appearance: "solid",
-			variant: "warning",
-			class: { root: "bg-warning" }
-		},
-		{
-			appearance: "solid",
-			variant: "danger",
-			class: { root: "bg-danger" }
-		},
-		{
-			appearance: "soft",
-			variant: "default",
-			class: { root: "bg-fill-muted" }
-		},
-		{
-			appearance: "soft",
-			variant: "muted",
-			class: { root: "bg-inactive-soft" }
-		},
-		{
-			appearance: "soft",
-			variant: "primary",
-			class: { root: "bg-brand-soft" }
-		},
-		{
-			appearance: "soft",
-			variant: "information",
-			class: { root: "bg-info-soft" }
-		},
-		{
-			appearance: "soft",
-			variant: "accent",
-			class: { root: "bg-attention-soft" }
-		},
-		{
-			appearance: "soft",
-			variant: "success",
-			class: { root: "bg-success-soft" }
-		},
-		{
-			appearance: "soft",
-			variant: "warning",
-			class: { root: "bg-warning-soft" }
-		},
-		{
-			appearance: "soft",
-			variant: "danger",
-			class: { root: "bg-danger-soft" }
-		},
-		{
-			appearance: "outline",
-			variant: "primary",
-			class: { root: "text-brand-strong" }
-		},
-		{
-			appearance: "outline",
-			variant: "information",
-			class: { root: "text-info-strong" }
-		},
-		{
-			appearance: "outline",
-			variant: "accent",
-			class: { root: "text-attention-strong" }
+		axis: {
+			x: { popup: ["[--drawer-stack-size:100%]", "[--drawer-swipe-x:var(--drawer-swipe-movement-x)]"] },
+			y: { popup: ["[--drawer-stack-size:max(0px,var(--drawer-frontmost-height,var(--drawer-height)))]", "[--drawer-swipe-y:calc(var(--drawer-snap-point-offset,0px)+var(--drawer-swipe-movement-y))]"] }
 		},
-		{
-			appearance: "outline",
-			variant: "success",
-			class: { root: "text-success-strong" }
+		snapPoints: { true: { overlay: ["[--drawer-overlay-min-opacity:0.5]"] } }
+	}
+});
+const drawer = tv({
+	extend: drawerMotion,
+	slots: {
+		overlay: [
+			"fixed inset-0 z-50 min-h-dvh select-none",
+			"supports-[-webkit-touch-callout:none]:absolute",
+			"bg-layer-backdrop"
+		],
+		viewport: ["pointer-events-none fixed inset-0 z-50 select-none"],
+		popup: [
+			"group/drawer-popup pointer-events-auto fixed z-50 flex h-(--drawer-content-height) flex-col outline-none",
+			"[--drawer-inset:12px] [--drawer-content-height:var(--drawer-height,auto)]",
+			"data-nested-drawer-open:overflow-hidden",
+			"bg-layer-popover text-foreground",
+			"shadow-float ring-1 ring-line-seam"
+		],
+		content: ["flex min-h-0 flex-1 flex-col rounded-[inherit] select-text", "group-data-swiping/drawer-popup:select-none"],
+		swipeHandle: [
+			"relative z-10 shrink-0 cursor-grab select-none active:cursor-grabbing",
+			"before:absolute before:content-['']",
+			"before:rounded-[1px] before:bg-line-seam"
+		],
+		close: ["shrink-0"],
+		closeIcon: ["size-5.5"],
+		header: ["flex flex-col", "items-stretch gap-1 px-4 pt-4 pb-2 text-left"],
+		body: ["flex flex-1 flex-col", "items-stretch px-4 pt-2 pb-4 text-left"],
+		footer: ["mt-auto py-5", "px-4 pt-3 pb-4"],
+		actions: [
+			"flex w-full flex-col items-stretch",
+			"**:data-[slot=button]:w-full",
+			"gap-2"
+		],
+		title: ["text-pretty text-foreground", "max-w-none text-left font-sans text-headline font-bold"],
+		description: ["text-pretty", "max-w-none text-left font-sans text-callout text-foreground-muted"]
+	},
+	variants: {
+		nested: {
+			false: {},
+			true: { overlay: ["bg-layer-backdrop-nested"] }
 		},
-		{
-			appearance: "outline",
-			variant: "warning",
-			class: { root: "text-warning-strong" }
+		side: {
+			down: {
+				popup: [
+					"bottom-(--drawer-inset) min-h-64 max-h-[82vh]",
+					"rounded-t-dialog [--drawer-inset:0px]",
+					"pb-[env(safe-area-inset-bottom,0px)]"
+				],
+				swipeHandle: ["before:top-3"]
+			},
+			up: {
+				popup: [
+					"top-(--drawer-inset) max-h-[80vh]",
+					"rounded-b-dialog [--drawer-inset:0px]",
+					"pt-[env(safe-area-inset-top,0px)]"
+				],
+				swipeHandle: ["order-last", "before:bottom-3"]
+			},
+			left: {
+				popup: ["left-(--drawer-inset)"],
+				swipeHandle: ["order-last", "before:right-3"]
+			},
+			right: {
+				popup: ["right-(--drawer-inset)"],
+				swipeHandle: ["before:left-3"]
+			}
 		},
-		{
-			appearance: "outline",
-			variant: "danger",
-			class: { root: "text-danger-strong" }
+		axis: {
+			x: {
+				popup: ["flex-row", "inset-y-0 w-full max-w-[420px] [--drawer-inset:0px]"],
+				swipeHandle: [
+					"my-auto h-16 w-11",
+					"before:top-1/2 before:-translate-y-1/2",
+					"before:w-1 before:h-9"
+				],
+				header: [
+					"min-h-14 shrink-0 flex-row items-center justify-between gap-2 py-0 text-left",
+					"border-b border-line-seam",
+					panelHeadEdges
+				],
+				body: ["items-stretch text-left", "min-h-0 overflow-y-auto px-5 py-4"],
+				footer: ["border-t border-line-seam px-5 py-3"],
+				title: ["min-w-0 max-w-none flex-1 text-left"],
+				description: ["max-w-none text-left"],
+				actions: ["flex-row flex-wrap justify-end", "**:data-[slot=button]:w-auto"]
+			},
+			y: {
+				popup: [
+					"data-nested-drawer-open:h-(--drawer-frontmost-height)",
+					"mx-auto md:max-w-md",
+					"inset-x-0"
+				],
+				swipeHandle: [
+					"mx-auto w-16",
+					"before:left-1/2 before:-translate-x-1/2",
+					"h-4",
+					"before:top-1.5 before:h-1 before:w-9"
+				]
+			}
 		}
-	]
+	},
+	compoundVariants: [{
+		side: "down",
+		snapPoints: true,
+		class: { header: ["pt-2"] }
+	}, {
+		axis: "y",
+		snapPoints: true,
+		class: { popup: ["[--drawer-content-height:100dvh]"] }
+	}]
 });
-function BadgeRoot({ appearance, variant, className, render, ...props }) {
-	const resolvedAppearance = appearance ?? "solid";
-	const { root } = badge({
-		appearance: resolvedAppearance,
-		variant
+//#endregion
+//#region src/components/drawer/drawer.tsx
+const DrawerConfigContext = createContext(null);
+function useDrawerConfig() {
+	const context = useContext(DrawerConfigContext);
+	if (!context) throw new Error("Drawer parts must be used within Drawer.");
+	return context;
+}
+function Drawer({ modal = true, snapPoints, swipeDirection = "down", children, ...props }) {
+	const hasSnapPoints = snapPoints != null && snapPoints.length > 0;
+	const swipeAxis = swipeDirection === "down" || swipeDirection === "up" ? "y" : "x";
+	const contextValue = useMemo(() => ({
+		hasSnapPoints,
+		modal,
+		swipeAxis,
+		swipeDirection
+	}), [
+		hasSnapPoints,
+		modal,
+		swipeAxis,
+		swipeDirection
+	]);
+	return /* @__PURE__ */ jsx(DrawerConfigContext.Provider, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsx(Drawer$1.Root, {
+			modal,
+			snapPoints,
+			swipeDirection,
+			...props,
+			children: withOverlayLayer("drawer", modal === true, children)
+		})
 	});
-	const defaultProps = { className: root({ className }) };
+}
+function DrawerTrigger(props) {
+	return /* @__PURE__ */ jsx(Drawer$1.Trigger, {
+		"data-slot": "drawer-trigger",
+		...props
+	});
+}
+function DrawerPortal(props) {
+	return /* @__PURE__ */ jsx(Drawer$1.Portal, {
+		"data-slot": "drawer-portal",
+		...useThemeScopeProps(props)
+	});
+}
+function DrawerOverlay({ className, ...props }) {
+	const { hasSnapPoints } = useDrawerConfig();
+	const nested = useParentOverlayKind() === "dialog";
+	const { overlay } = drawer({
+		snapPoints: hasSnapPoints,
+		nested
+	});
+	return /* @__PURE__ */ jsx(Drawer$1.Backdrop, {
+		"data-slot": "drawer-overlay",
+		"data-nested": nested ? "" : void 0,
+		forceRender: nested,
+		className: overlay({ className }),
+		...props
+	});
+}
+function DrawerSwipeHandle() {
+	const { swipeAxis, swipeDirection } = useDrawerConfig();
+	const { swipeHandle } = drawer({
+		side: swipeDirection,
+		axis: swipeAxis
+	});
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "drawer-swipe-handle",
+		"aria-hidden": "true",
+		className: swipeHandle()
+	});
+}
+function DrawerContent({ className, children, portalProps, ...props }) {
+	const { hasSnapPoints, modal, swipeAxis, swipeDirection } = useDrawerConfig();
+	const { content, popup, viewport } = drawer({
+		side: swipeDirection,
+		axis: swipeAxis,
+		snapPoints: hasSnapPoints
+	});
+	return /* @__PURE__ */ jsxs(DrawerPortal, {
+		...portalProps,
+		children: [modal === true ? /* @__PURE__ */ jsx(DrawerOverlay, {}) : null, /* @__PURE__ */ jsx(Drawer$1.Viewport, {
+			"data-slot": "drawer-viewport",
+			className: cn(viewport(), modal === true && "pointer-events-auto"),
+			children: /* @__PURE__ */ jsxs(Drawer$1.Popup, {
+				"data-slot": "drawer-popup",
+				className: popup({ className }),
+				...props,
+				children: [hasSnapPoints ? /* @__PURE__ */ jsx(DrawerSwipeHandle, {}) : null, /* @__PURE__ */ jsx(Drawer$1.Content, {
+					"data-slot": "drawer-content",
+					className: content(),
+					children
+				})]
+			})
+		})]
+	});
+}
+function DrawerClose({ className, variant, size, children, render, "aria-label": ariaLabel, ...props }) {
+	const { close, closeIcon } = drawer();
+	if (render) return /* @__PURE__ */ jsx(Drawer$1.Close, {
+		"data-slot": "drawer-close",
+		className,
+		render,
+		"aria-label": ariaLabel,
+		...props,
+		children
+	});
+	return /* @__PURE__ */ jsx(Drawer$1.Close, {
+		"data-slot": "drawer-close",
+		render: /* @__PURE__ */ jsx(Button, {
+			variant: variant ?? "ghost",
+			size: size ?? "icon-lg",
+			"aria-label": ariaLabel ?? "Close"
+		}),
+		className: close({ className }),
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(X, { className: closeIcon() })
+	});
+}
+function DrawerHeader({ className, render, ...props }) {
+	const { hasSnapPoints, swipeAxis, swipeDirection } = useDrawerConfig();
+	const { header } = drawer({
+		side: swipeDirection,
+		axis: swipeAxis,
+		snapPoints: hasSnapPoints
+	});
+	const defaultProps = { className: header({ className }) };
 	return useRender({
-		defaultTagName: "span",
+		defaultTagName: "div",
 		render,
 		props: mergeProps(defaultProps, props),
-		state: {
-			slot: "badge",
-			appearance: resolvedAppearance,
-			variant
-		}
+		state: { slot: "drawer-header" }
 	});
 }
-function Experimental(props) {
-	return /* @__PURE__ */ jsx(BadgeRoot, {
-		variant: "success",
-		...props,
-		children: "Experimental"
+function DrawerFooter({ className, render, ...props }) {
+	const { swipeAxis } = useDrawerConfig();
+	const { footer } = drawer({ axis: swipeAxis });
+	const defaultProps = { className: footer({ className }) };
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "drawer-footer" }
+	});
+}
+function DrawerBody({ className, render, ...props }) {
+	const { swipeAxis } = useDrawerConfig();
+	const { body } = drawer({ axis: swipeAxis });
+	const defaultProps = { className: body({ className }) };
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "drawer-body" }
+	});
+}
+function DrawerActions({ className, render, children, ...props }) {
+	const swipeAxis = useContext(DrawerConfigContext)?.swipeAxis;
+	const { actions } = drawer({ axis: swipeAxis });
+	const defaultProps = {
+		className: actions({ className }),
+		children
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "drawer-actions" }
+	});
+}
+function DrawerTitle({ className, ...props }) {
+	const { swipeAxis } = useDrawerConfig();
+	const { title } = drawer({ axis: swipeAxis });
+	return /* @__PURE__ */ jsx(Drawer$1.Title, {
+		"data-slot": "drawer-title",
+		className: title({ className }),
+		...props
+	});
+}
+function DrawerDescription({ className, ...props }) {
+	const { swipeAxis } = useDrawerConfig();
+	const { description } = drawer({ axis: swipeAxis });
+	return /* @__PURE__ */ jsx(Drawer$1.Description, {
+		"data-slot": "drawer-description",
+		className: description({ className }),
+		...props
 	});
 }
-const Badge = Object.assign(BadgeRoot, { Experimental });
 //#endregion
 //#region src/components/form-section/form-section.tsx
 const formSection = tv({ slots: {
@@ -430,215 +689,40 @@ function TextLink({ variant, className, render, ...props }) {
 	});
 }
 //#endregion
-//#region src/components/tooltip/tooltip.tsx
-const tooltip = tv({
-	slots: {
-		trigger: ["select-none"],
-		positioner: ["isolate z-50 pointer-events-none outline-none"],
-		content: [
-			"pointer-events-none relative inline-block max-w-[min(20rem,var(--available-width,20rem))] min-w-0 px-2.5 py-1",
-			"origin-(--transform-origin) outline-none",
-			"transition-[opacity,transform] duration-150 ease-[cubic-bezier(0.22,1,0.36,1)]",
-			"data-starting-style:scale-[0.97] data-starting-style:opacity-0",
-			"data-ending-style:scale-[0.99] data-ending-style:opacity-0",
-			"data-instant:transition-none",
-			"motion-reduce:transition-none",
-			"rounded-chip bg-layer-hud text-foreground-on-hud",
-			"font-sans font-medium",
-			"shadow-float",
-			"has-[[data-slot=kbd]]:py-1 has-[[data-slot=kbd]]:pr-2.5"
-		],
-		body: [
-			"block min-w-0 text-footnote whitespace-normal wrap-break-word",
-			"**:data-[slot=kbd]:relative **:data-[slot=kbd]:z-10 [&_[data-slot=kbd]]:ml-1.5",
-			"[&_[data-slot=kbd]]:h-4 [&_[data-slot=kbd]]:min-w-4 [&_[data-slot=kbd]]:px-1 [&_[data-slot=kbd]]:py-0",
-			"**:data-[slot=kbd]:text-[12px] **:data-[slot=kbd]:leading-4 [&_[data-slot=kbd]]:font-normal"
-		],
-		bodyIcon: ["shrink-0 [&>svg]:block [&>svg]:size-3.5 [&>svg]:shrink-0"],
-		bodyText: ["min-w-0 flex-1"],
-		arrow: [
-			"pointer-events-none flex overflow-visible",
-			"data-[side=top]:bottom-[-5px]",
-			"data-[side=bottom]:top-[-5px] data-[side=bottom]:rotate-180",
-			"data-[side=left]:right-[-8px] data-[side=left]:-rotate-90",
-			"data-[side=right]:left-[-8px] data-[side=right]:rotate-90",
-			"data-[side=inline-start]:right-[-8px] data-[side=inline-start]:-rotate-90",
-			"data-[side=inline-end]:left-[-8px] data-[side=inline-end]:rotate-90"
-		]
-	},
-	variants: { hasLeadingIcon: {
-		true: { body: ["flex items-center gap-x-1.5"] },
-		false: {}
-	} }
-});
-function TooltipProvider({ delay = 0, ...props }) {
-	return /* @__PURE__ */ jsx(Tooltip$1.Provider, {
-		delay,
-		...props
-	});
+//#region src/components/float-button/float-button.position.ts
+function resolvePositionStyles(options) {
+	const { position, side, offset, style } = options;
+	if (!position && !side && offset === void 0) return style ?? {};
+	const resolvedPosition = position ?? "fixed";
+	if (resolvedPosition === "relative") return {
+		position: "relative",
+		...style
+	};
+	const resolvedSide = side ?? "bottom-right";
+	const [offsetX, offsetY] = normalizeOffset(offset ?? 16);
+	const posStyles = { position: resolvedPosition };
+	if (resolvedSide === "bottom-right") {
+		posStyles.bottom = offsetY;
+		posStyles.right = offsetX;
+	} else if (resolvedSide === "bottom-left") {
+		posStyles.bottom = offsetY;
+		posStyles.left = offsetX;
+	} else if (resolvedSide === "top-right") {
+		posStyles.top = offsetY;
+		posStyles.right = offsetX;
+	} else if (resolvedSide === "top-left") {
+		posStyles.top = offsetY;
+		posStyles.left = offsetX;
+	}
+	return {
+		...posStyles,
+		...style
+	};
 }
-function Tooltip(props) {
-	return /* @__PURE__ */ jsx(Tooltip$1.Root, { ...props });
-}
-function TooltipTrigger({ className, ...props }) {
-	const { trigger } = tooltip();
-	const childSlot = isValidElement(props.render) ? props.render.props["data-slot"] : void 0;
-	const slot = props["data-slot"] ?? childSlot ?? "tooltip-trigger";
-	return /* @__PURE__ */ jsx(Tooltip$1.Trigger, {
-		"data-slot": slot,
-		className: trigger({ className }),
-		...props
-	});
-}
-function TooltipPortal(props) {
-	return /* @__PURE__ */ jsx(Tooltip$1.Portal, {
-		"data-slot": "tooltip-portal",
-		...useThemeScopeProps(props)
-	});
-}
-function TooltipArrow({ className, ...props }) {
-	const { arrow } = tooltip();
-	return /* @__PURE__ */ jsx(Tooltip$1.Arrow, {
-		"data-slot": "tooltip-arrow",
-		className: arrow({ className }),
-		...props,
-		children: /* @__PURE__ */ jsx(TooltipArrowSvg, {})
-	});
-}
-function TooltipArrowSvg(props) {
-	return /* @__PURE__ */ jsx("svg", {
-		width: "12",
-		height: "6",
-		viewBox: "0 0 12 6",
-		fill: "none",
-		...props,
-		children: /* @__PURE__ */ jsx("path", {
-			d: "M1 0H11L6 5.25Z",
-			className: "fill-layer-hud"
-		})
-	});
-}
-function flattenTooltipChildren(children) {
-	return Children.toArray(children).flatMap((child) => {
-		if (isValidElement(child) && child.type === Fragment) return flattenTooltipChildren(child.props.children);
-		return [child];
-	});
-}
-function isTooltipLeadingIcon(child) {
-	if (!isValidElement(child)) return false;
-	if (child.props["data-slot"] === "kbd") return false;
-	if (child.type === "svg") return true;
-	return typeof child.type !== "string";
-}
-function partitionTooltipBodyChildren(children) {
-	const items = flattenTooltipChildren(children);
-	const icons = [];
-	const rest = [];
-	let seenNonIcon = false;
-	for (const item of items) {
-		if (!seenNonIcon && isTooltipLeadingIcon(item)) {
-			icons.push(item);
-			continue;
-		}
-		seenNonIcon = true;
-		rest.push(item);
-	}
-	return {
-		icons,
-		rest
-	};
-}
-function TooltipBodyContent({ children }) {
-	const { icons, rest } = partitionTooltipBodyChildren(children);
-	const { body, bodyIcon, bodyText } = tooltip({ hasLeadingIcon: icons.length > 0 });
-	if (icons.length === 0) return /* @__PURE__ */ jsx("span", {
-		"data-slot": "tooltip-body",
-		className: body(),
-		children
-	});
-	return /* @__PURE__ */ jsxs("span", {
-		"data-slot": "tooltip-body",
-		className: body(),
-		children: [/* @__PURE__ */ jsx("span", {
-			"data-slot": "tooltip-body-icon",
-			className: bodyIcon(),
-			children: icons
-		}), /* @__PURE__ */ jsx("span", {
-			"data-slot": "tooltip-body-text",
-			className: bodyText(),
-			children: rest
-		})]
-	});
-}
-const CONTENT_COLLISION_AVOIDANCE$1 = {
-	side: "flip",
-	align: "shift",
-	fallbackAxisSide: "none"
-};
-function TooltipContent({ align = "center", alignOffset = 0, anchor, arrowPadding, collisionAvoidance = CONTENT_COLLISION_AVOIDANCE$1, collisionBoundary, collisionPadding, disableAnchorTracking = false, positionMethod = "fixed", side = "top", sideOffset, sticky, container, portalProps, className, children, ...props }) {
-	const { positioner, content } = tooltip();
-	const portalContainer = container !== void 0 ? container : portalProps?.container;
-	return /* @__PURE__ */ jsx(TooltipPortal, {
-		...portalProps,
-		container: portalContainer,
-		children: /* @__PURE__ */ jsx(Tooltip$1.Positioner, {
-			align,
-			alignOffset,
-			anchor,
-			arrowPadding,
-			collisionAvoidance,
-			collisionBoundary,
-			collisionPadding,
-			disableAnchorTracking,
-			positionMethod,
-			side,
-			sideOffset: sideOffset ?? 8,
-			sticky,
-			className: positioner(),
-			children: /* @__PURE__ */ jsxs(Tooltip$1.Popup, {
-				"data-slot": "tooltip-content",
-				className: content({ className }),
-				...props,
-				children: [/* @__PURE__ */ jsx(TooltipBodyContent, { children }), /* @__PURE__ */ jsx(TooltipArrow, {})]
-			})
-		})
-	});
-}
-//#endregion
-//#region src/components/float-button/float-button.position.ts
-function resolvePositionStyles(options) {
-	const { position, side, offset, style } = options;
-	if (!position && !side && offset === void 0) return style ?? {};
-	const resolvedPosition = position ?? "fixed";
-	if (resolvedPosition === "relative") return {
-		position: "relative",
-		...style
-	};
-	const resolvedSide = side ?? "bottom-right";
-	const [offsetX, offsetY] = normalizeOffset(offset ?? 16);
-	const posStyles = { position: resolvedPosition };
-	if (resolvedSide === "bottom-right") {
-		posStyles.bottom = offsetY;
-		posStyles.right = offsetX;
-	} else if (resolvedSide === "bottom-left") {
-		posStyles.bottom = offsetY;
-		posStyles.left = offsetX;
-	} else if (resolvedSide === "top-right") {
-		posStyles.top = offsetY;
-		posStyles.right = offsetX;
-	} else if (resolvedSide === "top-left") {
-		posStyles.top = offsetY;
-		posStyles.left = offsetX;
-	}
-	return {
-		...posStyles,
-		...style
-	};
-}
-function normalizeOffset(offset) {
-	if (Array.isArray(offset)) return [formatLength(offset[0]), formatLength(offset[1])];
-	const formatted = formatLength(offset);
-	return [formatted, formatted];
+function normalizeOffset(offset) {
+	if (Array.isArray(offset)) return [formatLength(offset[0]), formatLength(offset[1])];
+	const formatted = formatLength(offset);
+	return [formatted, formatted];
 }
 function formatLength(val) {
 	if (typeof val === "number") return `${val}px`;
@@ -972,9 +1056,9 @@ const listRow = tv({
 		},
 		interactive: {
 			true: { root: [
-				"not-disabled:not-aria-disabled:not-data-selected:hover:press-overlay",
+				"not-disabled:not-aria-disabled:not-data-selected:hover:row-hover-overlay",
 				"not-disabled:not-aria-disabled:not-data-selected:active:press-overlay",
-				"not-data-selected:data-popup-open:press-overlay"
+				"not-data-selected:data-popup-open:row-open-overlay not-disabled:not-aria-disabled:not-data-selected:data-popup-open:hover:row-open-overlay"
 			] },
 			false: {}
 		},
@@ -1150,21 +1234,6 @@ function ListRowChevron({ className, render, ...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/status/status.tsx
 const status = tv({
 	slots: { root: [
@@ -1579,182 +1648,6 @@ function CopyableCodeActionIcon({ copied }) {
 	});
 }
 //#endregion
-//#region src/components/checkbox/checkbox-indicator.tsx
-const checkboxIndicator = tv({
-	slots: { root: [
-		"inline-flex size-5 shrink-0 items-center justify-center",
-		"rounded-sticker border-[1.5px] border-line-strong transition-colors",
-		"[&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5 [&_svg]:stroke-2"
-	] },
-	variants: {
-		shape: {
-			square: "",
-			circle: { root: "rounded-full" }
-		},
-		checked: {
-			true: { root: "border-foreground bg-foreground text-foreground-inverse" },
-			false: { root: "bg-layer-card text-transparent" }
-		},
-		disabled: {
-			true: { root: "border-foreground-disabled bg-fill-muted" },
-			false: ""
-		},
-		previewOnHover: {
-			true: "",
-			false: ""
-		}
-	},
-	compoundVariants: [{
-		checked: false,
-		previewOnHover: true,
-		class: { root: "group-hover:text-foreground/20" }
-	}, {
-		checked: true,
-		disabled: true,
-		class: { root: "bg-foreground-disabled text-layer-card" }
-	}],
-	defaultVariants: {
-		shape: "square",
-		disabled: false,
-		previewOnHover: false
-	}
-});
-function CheckboxIndicator({ checked, mark = "check", shape, disabled, previewOnHover, className, ...props }) {
-	const { root } = checkboxIndicator({
-		shape,
-		checked,
-		disabled,
-		previewOnHover
-	});
-	const Icon = mark === "minus" ? Minus : Check;
-	return /* @__PURE__ */ jsx("span", {
-		...props,
-		"data-slot": "checkbox-indicator-graphic",
-		"aria-hidden": true,
-		className: root({ className }),
-		children: (checked || previewOnHover) && /* @__PURE__ */ jsx(Icon, {})
-	});
-}
-//#endregion
-//#region src/components/checkbox/checkbox.tsx
-const checkbox = tv({ slots: {
-	root: [
-		"relative inline-flex size-5 shrink-0 touch-manipulation items-center justify-center outline-none",
-		"rounded-sticker focus-visible:shadow-focus",
-		"data-disabled:cursor-not-allowed",
-		"after:absolute after:-inset-x-3 after:-inset-y-2 after:content-['']"
-	],
-	indicator: "pointer-events-none"
-} });
-function Checkbox({ shape = "square", className, ...props }) {
-	const { root, indicator } = checkbox();
-	const renderIndicator = useCallback((indicatorProps, state) => /* @__PURE__ */ jsx(CheckboxIndicator, {
-		...indicatorProps,
-		checked: state.checked || state.indeterminate,
-		disabled: state.disabled,
-		mark: state.indeterminate ? "minus" : "check",
-		shape
-	}), [shape]);
-	return /* @__PURE__ */ jsx(Checkbox$1.Root, {
-		"data-slot": "checkbox",
-		className: root({ className }),
-		...props,
-		children: /* @__PURE__ */ jsx(Checkbox$1.Indicator, {
-			keepMounted: true,
-			"data-slot": "checkbox-indicator",
-			className: indicator(),
-			render: renderIndicator
-		})
-	});
-}
-//#endregion
-//#region src/lib/use-mobile-viewport.ts
-const MOBILE_QUERY = "(max-width: 767px)";
-function subscribeMobileViewport(onStoreChange) {
-	if (typeof window === "undefined") return () => void 0;
-	const media = window.matchMedia(MOBILE_QUERY);
-	media.addEventListener("change", onStoreChange);
-	return () => media.removeEventListener("change", onStoreChange);
-}
-function getMobileViewportSnapshot() {
-	return typeof window !== "undefined" && window.matchMedia(MOBILE_QUERY).matches;
-}
-function useMobileViewport() {
-	return useSyncExternalStore(subscribeMobileViewport, getMobileViewportSnapshot, () => false);
-}
-//#endregion
-//#region src/components/scroll-area/scroll-area.recipe.ts
-const scrollArea = tv({ slots: {
-	root: ["relative min-h-0"],
-	viewport: ["size-full min-h-0 overscroll-contain outline-none", "[overflow-anchor:auto] [-webkit-overflow-scrolling:touch]"],
-	content: ["min-h-full"],
-	scrollbar: [
-		"group/scroll-area-scrollbar z-50 flex touch-none select-none p-1",
-		"opacity-0 transition-opacity duration-150 pointer-events-none",
-		"data-scrolling:pointer-events-auto data-scrolling:opacity-100 data-scrolling:duration-0",
-		"data-[orientation=vertical]:w-3 data-[orientation=vertical]:justify-center",
-		"data-[orientation=horizontal]:h-3 data-[orientation=horizontal]:flex-col data-[orientation=horizontal]:justify-center"
-	],
-	thumb: [
-		"relative",
-		"group-data-[orientation=vertical]/scroll-area-scrollbar:w-1.5",
-		"group-data-[orientation=horizontal]/scroll-area-scrollbar:h-1.5",
-		"rounded-[2px] bg-foreground/30 hover:bg-foreground/45"
-	],
-	corner: ["bg-transparent"]
-} });
-//#endregion
-//#region src/components/scroll-area/scroll-area.tsx
-function ScrollArea({ className, ...props }) {
-	const { root } = scrollArea();
-	return /* @__PURE__ */ jsx(ScrollArea$1.Root, {
-		"data-slot": "scroll-area",
-		className: root({ className }),
-		...props
-	});
-}
-function ScrollAreaViewport({ className, ...props }) {
-	const { viewport } = scrollArea();
-	return /* @__PURE__ */ jsx(ScrollArea$1.Viewport, {
-		"data-slot": "scroll-area-viewport",
-		className: viewport({ className }),
-		...props
-	});
-}
-function ScrollAreaContent({ className, ...props }) {
-	const { content } = scrollArea();
-	return /* @__PURE__ */ jsx(ScrollArea$1.Content, {
-		"data-slot": "scroll-area-content",
-		className: content({ className }),
-		...props
-	});
-}
-function ScrollAreaScrollbar({ className, orientation = "vertical", ...props }) {
-	const { scrollbar } = scrollArea();
-	return /* @__PURE__ */ jsx(ScrollArea$1.Scrollbar, {
-		"data-slot": "scroll-area-scrollbar",
-		orientation,
-		className: scrollbar({ className }),
-		...props
-	});
-}
-function ScrollAreaThumb({ className, ...props }) {
-	const { thumb } = scrollArea();
-	return /* @__PURE__ */ jsx(ScrollArea$1.Thumb, {
-		"data-slot": "scroll-area-thumb",
-		className: thumb({ className }),
-		...props
-	});
-}
-function ScrollAreaCorner({ className, ...props }) {
-	const { corner } = scrollArea();
-	return /* @__PURE__ */ jsx(ScrollArea$1.Corner, {
-		"data-slot": "scroll-area-corner",
-		className: corner({ className }),
-		...props
-	});
-}
-//#endregion
 //#region src/components/sidebar/sidebar.recipe.ts
 const sidebarRecipe = tv({ slots: {
 	sidebarRoot: [
@@ -2079,7 +1972,7 @@ const sidebarItemRecipe = tv({
 	},
 	variants: {
 		interactive: {
-			true: { sidebarItem: ["hover:bg-fill-pressed active:bg-fill-pressed not-data-active:data-popup-open:bg-fill-pressed", "focus-visible:shadow-focus"] },
+			true: { sidebarItem: ["hover:bg-fill-row-hover active:bg-fill-pressed not-data-active:data-popup-open:bg-fill-row-open", "focus-visible:shadow-focus"] },
 			false: { sidebarItem: "cursor-default" }
 		},
 		wrap: {
@@ -2599,120 +2492,6 @@ function SidebarSectionControl({ className, render, size = "icon-sm", variant =
 }
 const SidebarControl = SidebarSectionControl;
 //#endregion
-//#region src/components/panel/panel.recipe.ts
-const panel = tv({
-	slots: {
-		root: ["[--panel-footer-clearance:10rem]", "bg-layer-canvas text-foreground"],
-		header: ["[@media(max-height:600px)]:h-12"],
-		body: ["relative min-h-0 flex-1 overflow-hidden"],
-		scrollViewport: ["h-full min-h-0 overflow-y-auto overscroll-contain", "[overflow-anchor:auto] [-webkit-overflow-scrolling:touch]"],
-		scrollContent: ["min-h-full"],
-		section: ["border-t px-5 py-4", "border-line-hairline"],
-		footer: [
-			"relative flex shrink-0 items-center pt-3",
-			"bg-layer-canvas",
-			"px-5 max-md:px-4",
-			"pb-[calc(env(safe-area-inset-bottom)+1rem)] max-md:pb-[calc(env(safe-area-inset-bottom)+0.5rem)]"
-		]
-	},
-	variants: { edge: {
-		inset: { root: "group/panel-frame" },
-		attached: { root: ["group/panel-frame", "border-l border-line-seam max-md:border-l-0"] }
-	} }
-});
-//#endregion
-//#region src/components/panel/panel.tsx
-function Panel({ className, edge, render, ...props }) {
-	const { root } = panel({ edge });
-	const defaultProps = {
-		"data-edge": edge,
-		"data-slot": "panel",
-		className: root({ className })
-	};
-	return useRender({
-		defaultTagName: "section",
-		render,
-		props: mergeProps(defaultProps, props)
-	});
-}
-/**
-* Bare header bar: fixed height and centered flex row, no border, fill, or padding.
-* Shared base for `PanelHeader`, `PanelSectionHeader`, and panel-specific headers
-* such as `ThreadPanelHeader` — it is not exclusive to `PanelHeader`.
-*/
-function PanelHeaderRoot({ className, render, ...props }) {
-	const { header } = panel();
-	const defaultProps = {
-		"data-slot": "panel-header-root",
-		className: header({ className })
-	};
-	return useRender({
-		defaultTagName: "div",
-		render,
-		props: mergeProps(defaultProps, props)
-	});
-}
-function PanelBody({ className, render, ...props }) {
-	const { body } = panel();
-	const defaultProps = {
-		"data-slot": "panel-body",
-		className: body({ className })
-	};
-	return useRender({
-		defaultTagName: "div",
-		render,
-		props: mergeProps(defaultProps, props)
-	});
-}
-function PanelScrollViewport({ className, render, ...props }) {
-	const { scrollViewport } = panel();
-	const defaultProps = {
-		"data-slot": "panel-scroll-viewport",
-		className: scrollViewport({ className })
-	};
-	return useRender({
-		defaultTagName: "div",
-		render,
-		props: mergeProps(defaultProps, props)
-	});
-}
-function PanelScrollContent({ className, render, ...props }) {
-	const { scrollContent } = panel();
-	const defaultProps = {
-		"data-slot": "panel-scroll-content",
-		className: scrollContent({ className })
-	};
-	return useRender({
-		defaultTagName: "div",
-		render,
-		props: mergeProps(defaultProps, props)
-	});
-}
-function PanelSection({ className, render, ...props }) {
-	const { section } = panel();
-	const defaultProps = {
-		"data-slot": "panel-section",
-		className: section({ className })
-	};
-	return useRender({
-		defaultTagName: "section",
-		render,
-		props: mergeProps(defaultProps, props)
-	});
-}
-function PanelFooter({ className, render, ...props }) {
-	const { footer } = panel();
-	const defaultProps = {
-		"data-slot": "panel-footer",
-		className: footer({ className })
-	};
-	return useRender({
-		defaultTagName: "div",
-		render,
-		props: mergeProps(defaultProps, props)
-	});
-}
-//#endregion
 //#region src/components/conversation-panel/conversation-panel.recipe.ts
 const conversationPanel = tv({ slots: {
 	root: ["flex h-full min-h-0 min-w-0 flex-1 flex-col", "bg-layer-canvas font-sans text-foreground"],
@@ -2836,37 +2615,6 @@ function ConversationPanelEmptyStateBrandMark({ className, render, ...props }) {
 	});
 }
 //#endregion
-//#region src/components/kbd/kbd.tsx
-const kbd = tv({ slots: {
-	root: [
-		"pointer-events-none inline-flex w-fit shrink-0 items-center justify-center gap-1",
-		"whitespace-nowrap select-none",
-		"[&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-3",
-		"min-w-4 rounded-[3px] px-1",
-		"font-mono text-mono-meta font-normal text-foreground-hint",
-		"inset-ring inset-ring-line-hairline",
-		"in-data-[slot=tooltip-content]:text-foreground-on-hud/70",
-		"in-data-[slot=tooltip-content]:shadow-[inset_0_0_0_1px_color-mix(in_oklch,var(--foreground-on-hud)_70%,transparent)]"
-	],
-	group: ["inline-flex items-center gap-1"]
-} });
-function Kbd({ className, ...props }) {
-	const { root } = kbd();
-	return /* @__PURE__ */ jsx("kbd", {
-		"data-slot": "kbd",
-		className: root({ className }),
-		...props
-	});
-}
-function KbdGroup({ className, ...props }) {
-	const { group } = kbd();
-	return /* @__PURE__ */ jsx("span", {
-		"data-slot": "kbd-group",
-		className: group({ className }),
-		...props
-	});
-}
-//#endregion
 //#region src/components/context-menu/context-menu.tsx
 const contextMenu = tv({ slots: {
 	trigger: ["select-none"],
@@ -3126,288 +2874,6 @@ function ContextMenuCheckboxItemIndicator({ className, ...props }) {
 	});
 }
 //#endregion
-//#region src/components/dropdown-menu/dropdown-menu.tsx
-const dropdownMenu = tv({ slots: {
-	trigger: ["select-none"],
-	positioner: ["isolate z-50 outline-none"],
-	content: [
-		"max-h-(--available-height) overflow-hidden",
-		"outline-none",
-		"flex min-w-60 flex-col gap-0 rounded-container bg-layer-popover p-1.5 text-foreground",
-		"shadow-float ring-1 ring-line-seam"
-	],
-	item: [
-		"flex w-full cursor-default select-none items-center [@media(max-height:600px)]:py-1",
-		"text-left outline-none transition-colors",
-		"min-h-9 gap-2.5 rounded-control px-2.5 py-1.5",
-		"font-sans text-callout font-medium text-foreground",
-		"hover:bg-brand-soft data-highlighted:bg-brand-soft",
-		"data-checked:font-bold data-[selected]:font-bold data-[emphasis=strong]:font-bold",
-		"data-disabled:pointer-events-none data-disabled:text-foreground-disabled",
-		"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&>svg:not([class*='size-'])]:size-4",
-		"[&>svg]:text-foreground-muted data-disabled:[&>svg]:text-foreground-disabled"
-	],
-	radioItem: [
-		"flex w-full cursor-default select-none items-center",
-		"text-left outline-none transition-colors",
-		"min-h-9 gap-2.5 rounded-control px-2.5 py-1.5",
-		"font-sans text-callout font-medium text-foreground",
-		"hover:bg-brand-soft data-highlighted:bg-brand-soft",
-		"data-checked:font-bold",
-		"data-disabled:pointer-events-none data-disabled:text-foreground-disabled",
-		"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&>svg:not([class*='size-'])]:size-4",
-		"[&>svg]:text-foreground-muted data-disabled:[&>svg]:text-foreground-disabled"
-	],
-	submenuTrigger: [
-		"flex w-full cursor-default select-none items-center [@media(max-height:600px)]:py-1",
-		"text-left outline-none transition-colors",
-		"min-h-9 gap-2.5 rounded-control px-2.5 py-1.5",
-		"font-sans text-callout font-medium text-foreground",
-		"hover:bg-brand-soft data-highlighted:bg-brand-soft data-popup-open:bg-brand-soft",
-		"data-disabled:pointer-events-none data-disabled:text-foreground-disabled",
-		"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&>svg:not([class*='size-'])]:size-4",
-		"[&>svg]:text-foreground-muted data-disabled:[&>svg]:text-foreground-disabled"
-	],
-	itemLabel: ["min-w-0 flex-1 truncate text-left"],
-	footer: ["px-3 py-2 text-xs text-foreground-muted tabular-nums"],
-	label: ["px-2.5 pt-2 pb-1", "font-sans text-caption font-bold text-foreground-hint"],
-	shortcut: [
-		"ml-auto",
-		"h-auto min-w-0 rounded-none bg-transparent p-0 shadow-none ring-0",
-		"font-mono text-mono-meta font-normal text-foreground-hint"
-	],
-	itemCount: ["ml-auto inline-flex min-w-5 justify-center gap-0 px-1 tabular-nums"],
-	separator: ["-mx-1.5 my-1.5 h-px border-0 bg-line-hairline"],
-	indicator: ["pointer-events-none ml-auto flex shrink-0 items-center justify-center", "size-4 text-foreground [&_svg]:size-4"],
-	radioLabel: ["min-w-0 flex-1 truncate"]
-} });
-function DropdownMenu(props) {
-	return /* @__PURE__ */ jsx(Menu.Root, {
-		"data-slot": "dropdown-menu",
-		...props
-	});
-}
-function DropdownMenuSubmenu(props) {
-	return /* @__PURE__ */ jsx(Menu.SubmenuRoot, {
-		"data-slot": "dropdown-menu-submenu",
-		...props
-	});
-}
-function DropdownMenuTrigger({ className, render = /* @__PURE__ */ jsx(Button, {
-	variant: "outline",
-	size: "md"
-}), ...props }) {
-	const { trigger } = dropdownMenu();
-	return /* @__PURE__ */ jsx(Menu.Trigger, {
-		"data-slot": "dropdown-menu-trigger",
-		render,
-		className: trigger({ className }),
-		...props
-	});
-}
-function DropdownMenuPortal(props) {
-	return /* @__PURE__ */ jsx(Menu.Portal, {
-		"data-slot": "dropdown-menu-portal",
-		...useThemeScopeProps(props)
-	});
-}
-function DropdownMenuPopup({ className, ...props }) {
-	const { content } = dropdownMenu();
-	return /* @__PURE__ */ jsx("div", {
-		"data-slot": "dropdown-menu-content",
-		className: content({ className }),
-		...props
-	});
-}
-function DropdownMenuContent({ align = "start", alignOffset = 0, anchor, arrowPadding, collisionAvoidance, collisionBoundary, collisionPadding, disableAnchorTracking = false, positionMethod = "fixed", side = "bottom", sideOffset, sticky, portalProps, className, ...props }) {
-	const resolvedSideOffset = sideOffset ?? 6;
-	const { positioner, content } = dropdownMenu();
-	return /* @__PURE__ */ jsx(DropdownMenuPortal, {
-		...portalProps,
-		children: /* @__PURE__ */ jsx(Menu.Positioner, {
-			align,
-			alignOffset,
-			anchor,
-			arrowPadding,
-			collisionAvoidance,
-			collisionBoundary,
-			collisionPadding,
-			disableAnchorTracking,
-			positionMethod,
-			side,
-			sideOffset: resolvedSideOffset,
-			sticky,
-			className: positioner(),
-			children: /* @__PURE__ */ jsx(Menu.Popup, {
-				"data-slot": "dropdown-menu-content",
-				className: content({ className }),
-				...props
-			})
-		})
-	});
-}
-function DropdownMenuItem({ className, ...props }) {
-	const { item } = dropdownMenu();
-	return /* @__PURE__ */ jsx(Menu.Item, {
-		"data-slot": "dropdown-menu-item",
-		className: item({ className }),
-		...props
-	});
-}
-function DropdownMenuItemLabel({ className, ...props }) {
-	const { itemLabel } = dropdownMenu();
-	return /* @__PURE__ */ jsx("span", {
-		"data-slot": "dropdown-menu-item-label",
-		className: itemLabel({ className }),
-		...props
-	});
-}
-function DropdownMenuFooter({ className, ...props }) {
-	const { footer } = dropdownMenu();
-	return /* @__PURE__ */ jsx("div", {
-		"data-slot": "dropdown-menu-footer",
-		className: footer({ className }),
-		...props
-	});
-}
-function DropdownMenuSubmenuTrigger({ children, className, ...props }) {
-	const { submenuTrigger, indicator } = dropdownMenu();
-	return /* @__PURE__ */ jsxs(Menu.SubmenuTrigger, {
-		"data-slot": "dropdown-menu-submenu-trigger",
-		className: submenuTrigger({ className }),
-		...props,
-		children: [children, /* @__PURE__ */ jsx("span", {
-			className: indicator(),
-			"data-slot": "dropdown-menu-submenu-trigger-indicator",
-			"aria-hidden": "true",
-			children: /* @__PURE__ */ jsx(DropdownMenuSubmenuChevronIcon, {})
-		})]
-	});
-}
-function DropdownMenuLabel({ className, ...props }) {
-	const { label } = dropdownMenu();
-	return /* @__PURE__ */ jsx("div", {
-		"data-slot": "dropdown-menu-label",
-		className: label({ className }),
-		...props
-	});
-}
-function DropdownMenuShortcut({ className, ...props }) {
-	const { shortcut } = dropdownMenu();
-	return /* @__PURE__ */ jsx(Kbd, {
-		"data-slot": "dropdown-menu-shortcut",
-		className: shortcut({ className }),
-		...props
-	});
-}
-function DropdownMenuItemCount({ className, ...props }) {
-	const { itemCount } = dropdownMenu();
-	return /* @__PURE__ */ jsx(Badge, {
-		"data-slot": "dropdown-menu-item-count",
-		className: itemCount({ className }),
-		...props
-	});
-}
-function DropdownMenuSeparator({ className, ...props }) {
-	const { separator } = dropdownMenu();
-	return /* @__PURE__ */ jsx(Menu.Separator, {
-		"data-slot": "dropdown-menu-separator",
-		className: separator({ className }),
-		...props
-	});
-}
-function DropdownMenuSubmenuChevronIcon() {
-	return /* @__PURE__ */ jsx("svg", {
-		width: "12",
-		height: "12",
-		viewBox: "0 0 12 12",
-		"aria-hidden": true,
-		className: "size-3 shrink-0",
-		children: /* @__PURE__ */ jsx("g", {
-			fill: "none",
-			strokeLinecap: "round",
-			strokeLinejoin: "round",
-			strokeWidth: "1",
-			stroke: "currentColor",
-			children: /* @__PURE__ */ jsx("path", { d: "M4.25 2.5L7.75 6l-3.5 3.5" })
-		})
-	});
-}
-function DropdownMenuCheckIcon() {
-	return /* @__PURE__ */ jsx("svg", {
-		width: "12",
-		height: "12",
-		viewBox: "0 0 12 12",
-		"aria-hidden": true,
-		className: "size-3 shrink-0",
-		children: /* @__PURE__ */ jsx("g", {
-			fill: "none",
-			strokeLinecap: "round",
-			strokeLinejoin: "round",
-			strokeWidth: "1",
-			stroke: "currentColor",
-			children: /* @__PURE__ */ jsx("path", { d: "M1.75 6.41L4.4 9.25L10.25 2.99" })
-		})
-	});
-}
-function DropdownMenuRadioGroup({ ...props }) {
-	return /* @__PURE__ */ jsx(Menu.RadioGroup, {
-		"data-slot": "dropdown-menu-radio-group",
-		...props
-	});
-}
-function DropdownMenuRadioItem({ className, children, ...props }) {
-	const { radioItem, radioLabel, indicator } = dropdownMenu();
-	return /* @__PURE__ */ jsxs(Menu.RadioItem, {
-		"data-slot": "dropdown-menu-radio-item",
-		className: radioItem({ className }),
-		...props,
-		children: [renderRadioItemChildren(children, radioLabel()), /* @__PURE__ */ jsx("span", {
-			className: indicator(),
-			children: /* @__PURE__ */ jsx(Menu.RadioItemIndicator, { children: /* @__PURE__ */ jsx(DropdownMenuCheckIcon, {}) })
-		})]
-	});
-}
-function renderRadioItemChildren(children, className) {
-	if (typeof children === "string" || typeof children === "number") return /* @__PURE__ */ jsx("span", {
-		"data-slot": "dropdown-menu-radio-item-label",
-		className,
-		children
-	});
-	if (Array.isArray(children) && children.every((child) => typeof child === "string")) return /* @__PURE__ */ jsx("span", {
-		"data-slot": "dropdown-menu-radio-item-label",
-		className,
-		children
-	});
-	return children;
-}
-function DropdownMenuRadioItemIndicator({ className, ...props }) {
-	return /* @__PURE__ */ jsx(Menu.RadioItemIndicator, {
-		"data-slot": "dropdown-menu-radio-item-indicator",
-		className,
-		...props
-	});
-}
-function DropdownMenuCheckboxItem({ className, children, ...props }) {
-	const { item, indicator } = dropdownMenu();
-	return /* @__PURE__ */ jsxs(Menu.CheckboxItem, {
-		"data-slot": "dropdown-menu-checkbox-item",
-		className: item({ className }),
-		...props,
-		children: [children, /* @__PURE__ */ jsx("span", {
-			className: indicator(),
-			children: /* @__PURE__ */ jsx(Menu.CheckboxItemIndicator, { children: /* @__PURE__ */ jsx(DropdownMenuCheckIcon, {}) })
-		})]
-	});
-}
-function DropdownMenuCheckboxItemIndicator({ className, ...props }) {
-	return /* @__PURE__ */ jsx(Menu.CheckboxItemIndicator, {
-		"data-slot": "dropdown-menu-checkbox-item-indicator",
-		className,
-		...props
-	});
-}
-//#endregion
 //#region src/components/lightbox/lightbox.tsx
 const lightbox = tv({ slots: {
 	backdrop: ["fixed inset-0 z-70 bg-layer-backdrop data-closed:hidden"],
@@ -4220,17 +3686,26 @@ const field = tv({
 		root: ["group/field flex flex-col gap-1.5"],
 		item: [
 			"group/field-item flex items-start gap-2",
+			"*:min-w-0",
 			"*:data-[slot=checkbox]:mt-[calc((1lh-1.25rem)/2)]",
 			"*:data-[slot=radio-group-item]:mt-[calc((1lh-1.25rem)/2)]",
 			"*:data-[slot=switch]:mt-[calc((1lh-1.875rem)/2)]"
 		],
 		label: [
-			"block",
+			"block wrap-anywhere",
 			"group-data-disabled/field:text-foreground-disabled",
 			"font-sans font-semibold text-foreground-muted"
 		],
-		description: ["group-data-disabled/field:text-foreground-disabled", "text-caption text-foreground-hint"],
-		error: ["group-data-disabled/field:text-foreground-disabled", "text-caption font-semibold text-danger-strong"]
+		description: [
+			"wrap-anywhere",
+			"group-data-disabled/field:text-foreground-disabled",
+			"text-caption text-foreground-hint"
+		],
+		error: [
+			"wrap-anywhere",
+			"group-data-disabled/field:text-foreground-disabled",
+			"text-caption font-semibold text-danger-strong"
+		]
 	},
 	variants: { size: {
 		sm: {
@@ -4320,8 +3795,8 @@ const inputGroup = tv({
 			"[&>svg:not([class*='size-'])]:size-4.5"
 		],
 		text: [
-			"flex shrink-0 items-center px-3",
-			"select-none whitespace-nowrap",
+			"block min-w-0 max-w-1/2 shrink-0 content-center truncate px-3",
+			"select-none",
 			"font-mono text-mono-code",
 			"text-(--ig-text-fg,var(--ig-text-fg-default,var(--foreground-hint)))"
 		],
@@ -4429,12 +3904,15 @@ function InputGroupAddonRoot({ align = "inline-start", variant = "default", clas
 		...props
 	});
 }
-function TextAddon({ align = "inline-start", variant = "default", className, ...props }) {
+function TextAddon({ align = "inline-start", variant = "default", className, ref, title, ...props }) {
 	const { text } = inputGroup({
 		align,
 		variant
 	});
+	const overflowRef = useOverflowTitle(ref, title);
 	return /* @__PURE__ */ jsx("span", {
+		ref: overflowRef,
+		title,
 		"data-slot": "input-group-text",
 		"data-align": align,
 		"data-variant": variant,
@@ -4511,6 +3989,7 @@ const combobox = tv({
 		positioner: ["isolate z-50 outline-none"],
 		content: [
 			"h-auto max-h-(--available-height) min-w-[220px] overflow-hidden",
+			"max-w-[min(var(--available-width),max(var(--anchor-width),24rem))]",
 			"outline-none",
 			"rounded-container bg-layer-popover text-foreground",
 			"shadow-float ring-1 ring-line-seam"
@@ -4521,8 +4000,8 @@ const combobox = tv({
 		item: [
 			"flex w-full shrink-0 cursor-default select-none items-center justify-between overflow-hidden",
 			"text-left outline-none transition-colors",
-			"min-h-9 gap-2.5 rounded-control px-2.5 py-0",
-			"font-sans text-callout font-medium text-foreground",
+			"min-h-9 gap-2.5 rounded-control px-2.5 py-1.5",
+			"font-sans text-callout font-medium text-foreground wrap-anywhere",
 			"bg-transparent hover:bg-brand-soft data-highlighted:bg-brand-soft",
 			"data-selected:font-bold",
 			"data-disabled:pointer-events-none data-disabled:text-foreground-disabled",
@@ -4550,12 +4029,13 @@ const combobox = tv({
 			"transition-shadow duration-90 ease-out has-focus-visible:shadow-focus"
 		],
 		chip: [
-			"inline-flex items-center",
+			"inline-flex min-w-0 max-w-full items-center overflow-hidden",
+			"[&>:not([data-slot=combobox-chip-remove])]:min-w-0 [&>:not([data-slot=combobox-chip-remove])]:truncate",
 			"h-7 gap-1.5 rounded-chip bg-fill-muted pr-0.5 pl-2",
 			"text-footnote font-semibold text-foreground"
 		],
 		chipRemove: [
-			"inline-flex items-center justify-center outline-none transition-colors",
+			"inline-flex shrink-0 items-center justify-center outline-none transition-colors",
 			"size-[22px] rounded-sticker text-foreground-hint",
 			"hover:bg-fill-pressed active:bg-fill-pressed focus-visible:shadow-focus",
 			"[&>svg]:size-3.5"
@@ -4736,7 +4216,7 @@ function ComboboxSeparator({ className, ...props }) {
 		...props
 	});
 }
-function ComboboxContent({ align = "start", alignOffset = 0, anchor, arrowPadding, collisionAvoidance, collisionBoundary, collisionPadding, disableAnchorTracking = true, positionMethod = "fixed", side = "bottom", sideOffset, sticky, portalProps, className, initialFocus = false, finalFocus = false, ...props }) {
+function ComboboxContent({ align = "start", alignOffset = 0, anchor, arrowPadding, collisionAvoidance, collisionBoundary, collisionPadding = 8, disableAnchorTracking = true, positionMethod = "fixed", side = "bottom", sideOffset, sticky, portalProps, className, initialFocus = false, finalFocus = false, ...props }) {
 	const { positioner, content } = combobox();
 	return /* @__PURE__ */ jsx(ComboboxPortal, {
 		...portalProps,
@@ -4856,9 +4336,12 @@ function ComboboxChips({ className, ...props }) {
 		...props
 	});
 }
-function ComboboxChip({ className, ...props }) {
+function ComboboxChip({ className, ref, title, ...props }) {
 	const { chip } = combobox();
+	const overflowRef = useOverflowTitle(ref, title);
 	return /* @__PURE__ */ jsx(Combobox$1.Chip, {
+		ref: overflowRef,
+		title,
 		"data-slot": "combobox-chip",
 		className: chip({ className }),
 		...props
@@ -4937,6 +4420,7 @@ const select = tv({
 		positioner: ["isolate z-50 outline-none"],
 		content: [
 			"relative max-h-(--available-height) min-w-[max(var(--anchor-width),220px)] overflow-hidden",
+			"max-w-[min(var(--available-width),max(var(--anchor-width),24rem))]",
 			"outline-none",
 			"rounded-container bg-layer-popover p-1.5 text-foreground",
 			"shadow-float ring-1 ring-line-seam"
@@ -4963,9 +4447,9 @@ const select = tv({
 			"[&>svg:not([class*='stroke-'])]:stroke-2"
 		],
 		itemIndicator: ["pointer-events-none ml-auto flex shrink-0 items-center justify-center", "text-foreground [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:stroke-2 [&>svg_*]:stroke-2"],
-		itemText: ["min-w-0 flex-1 truncate"],
+		itemText: ["min-w-0 flex-1 line-clamp-2 wrap-anywhere"],
 		itemDescription: [
-			"order-last min-w-0 basis-full",
+			"order-last min-w-0 basis-full wrap-anywhere",
 			"[[data-slot=select-item-leading]~&]:ps-[calc(--spacing(4)+--spacing(2.5))]",
 			"font-sans text-caption font-normal text-foreground-hint"
 		],
@@ -5044,9 +4528,12 @@ function SelectTrigger({ className, children, render, "data-invalid": dataInvali
 		})
 	});
 }
-function SelectValue({ className, ...props }) {
+function SelectValue({ className, ref, title, ...props }) {
 	const { value } = select();
+	const overflowRef = useOverflowTitle(ref, title);
 	return /* @__PURE__ */ jsx(Select$1.Value, {
+		ref: overflowRef,
+		title,
 		"data-slot": "select-value",
 		className: value({ className }),
 		...props
@@ -5079,7 +4566,7 @@ function SelectPopup({ className, ...props }) {
 		...props
 	});
 }
-function SelectContent({ align = "start", alignItemWithTrigger = false, alignOffset = 0, anchor, arrowPadding, collisionAvoidance, collisionBoundary, collisionPadding, disableAnchorTracking = true, positionMethod = "fixed", side = "bottom", sideOffset, sticky, portalProps, className, ...props }) {
+function SelectContent({ align = "start", alignItemWithTrigger = false, alignOffset = 0, anchor, arrowPadding, collisionAvoidance, collisionBoundary, collisionPadding = 8, disableAnchorTracking = true, positionMethod = "fixed", side = "bottom", sideOffset, sticky, portalProps, className, ...props }) {
 	const { positioner, content } = select();
 	const positionerNode = /* @__PURE__ */ jsx(Select$1.Positioner, {
 		align,
@@ -5157,8 +4644,9 @@ function SelectItemIndicator({ className, children, ...props }) {
 		children: children ?? defaultIndicator
 	});
 }
-function SelectItemText({ className, id, ...props }) {
+function SelectItemText({ className, id, ref, title, ...props }) {
 	const { itemText } = select();
+	const overflowRef = useOverflowTitle(ref, title);
 	const generatedId = useId();
 	const textId = id ?? generatedId;
 	const setTextId = useContext(SelectItemPartsContext)?.setTextId;
@@ -5167,6 +4655,8 @@ function SelectItemText({ className, id, ...props }) {
 		return () => setTextId?.(void 0);
 	}, [setTextId, textId]);
 	return /* @__PURE__ */ jsx(Select$1.ItemText, {
+		ref: overflowRef,
+		title,
 		id: textId,
 		"data-slot": "select-item-text",
 		className: itemText({ className }),
@@ -5647,270 +5137,6 @@ function DescriptionDetails({ className, render, ...props }) {
 	});
 }
 //#endregion
-//#region src/components/avatar/avatar.tsx
-const avatar = tv({
-	slots: {
-		root: [
-			"group/avatar relative flex shrink-0 items-center justify-center select-none",
-			"rounded-sticker border-[1.5px] border-sticker-ink",
-			"text-sticker-ink shadow-[0_0_0_1.5px_var(--sticker-edge)]"
-		],
-		image: ["size-full object-cover", "rounded-[2px]"],
-		fallback: [
-			"flex size-full items-center justify-center",
-			"[&>svg]:size-4",
-			"group-data-[size=lg]/avatar:[&>svg]:size-6",
-			"group-data-[size=md]/avatar:[&>svg]:size-4.5",
-			"group-data-[size=xs]/avatar:[&>svg]:size-3",
-			"overflow-hidden rounded-[2px]",
-			"font-sans text-[15px] leading-none font-bold tracking-[-0.01em] text-sticker-ink",
-			"group-data-[size=xl]/avatar:text-[40px]",
-			"group-data-[size=lg]/avatar:text-[22px]",
-			"group-data-[size=sm]/avatar:text-[13px]",
-			"group-data-[size=xs]/avatar:text-[11px]",
-			"group-data-[size=2xs]/avatar:text-[11px]",
-			"group-data-[size=3xs]/avatar:text-[8px]",
-			"group-data-[size=xl]/avatar:[&>svg]:size-12",
-			"group-data-[size=sm]/avatar:[&>svg]:size-3.5",
-			"group-data-[size=2xs]/avatar:[&>svg]:size-3",
-			"group-data-[size=3xs]/avatar:[&>svg]:size-2"
-		],
-		badge: [
-			"absolute z-10 select-none",
-			"size-[11px] -right-1 -bottom-1 rounded-[2px]",
-			"outline-2 outline-solid outline-layer-canvas",
-			"group-data-[size=xl]/avatar:size-5 group-data-[size=xl]/avatar:-right-2 group-data-[size=xl]/avatar:-bottom-2",
-			"group-data-[size=lg]/avatar:size-3.5 group-data-[size=lg]/avatar:right-[-5px] group-data-[size=lg]/avatar:bottom-[-5px]",
-			"group-data-[size=md]/avatar:size-[11px]",
-			"group-data-[size=sm]/avatar:size-[9px] group-data-[size=sm]/avatar:right-[-3px] group-data-[size=sm]/avatar:bottom-[-3px]",
-			"group-data-[size=xs]/avatar:size-[7px] group-data-[size=xs]/avatar:-right-0.5 group-data-[size=xs]/avatar:-bottom-0.5",
-			"group-data-[size=2xs]/avatar:size-[7px] group-data-[size=2xs]/avatar:-right-0.5 group-data-[size=2xs]/avatar:-bottom-0.5",
-			"group-data-[size=3xs]/avatar:size-1.5 group-data-[size=3xs]/avatar:-right-0.5 group-data-[size=3xs]/avatar:-bottom-0.5"
-		],
-		dot: [
-			"inline-flex items-center justify-center outline-2",
-			"[&>svg]:hidden",
-			"group-data-[size=xl]/avatar:[&>svg]:size-2 group-data-[size=xl]/avatar:[&>svg]:block",
-			"group-data-[size=lg]/avatar:[&>svg]:size-2 group-data-[size=lg]/avatar:[&>svg]:block",
-			"group-data-[size=md]/avatar:[&>svg]:size-1.5 group-data-[size=md]/avatar:[&>svg]:block",
-			"group-data-[size=xs]/avatar:outline group-data-[size=2xs]/avatar:outline group-data-[size=3xs]/avatar:outline",
-			"rounded-[2px] border-[1.5px] border-sticker-ink",
-			"bg-(--status-color) text-sticker-ink outline-layer-canvas",
-			"group-data-[size=xl]/avatar:border-2",
-			"group-data-[size=xs]/avatar:border group-data-[size=2xs]/avatar:border group-data-[size=3xs]/avatar:border"
-		],
-		group: [
-			"group/avatar-group flex items-center",
-			"stack-x-[-5px]",
-			"*:data-[slot=avatar]:shadow-[0_0_0_1.5px_var(--sticker-edge),0_0_0_3px_var(--avatar-group-surface,var(--layer-canvas))]",
-			"*:data-[slot=avatar-group-count]:shadow-[0_0_0_1.5px_var(--sticker-edge),0_0_0_3px_var(--avatar-group-surface,var(--layer-canvas))]"
-		]
-	},
-	variants: {
-		type: {
-			agent: { root: ["bg-inactive"] },
-			human: { root: ["bg-palette-lavender"] }
-		},
-		size: {
-			xl: { root: ["size-[99px] shadow-[0_0_0_1.5px_var(--sticker-edge),var(--elevation-sticker)]"] },
-			lg: { root: ["size-[51px]"] },
-			md: { root: ["size-[35px]"] },
-			sm: { root: ["size-[27px]"] },
-			xs: { root: ["size-[19px]"] },
-			"2xs": { root: ["size-[19px]"] },
-			"3xs": { root: "size-3.5" }
-		}
-	}
-});
-function Avatar({ size, type, className, children, ...props }) {
-	const { root } = avatar({
-		type,
-		size
-	});
-	return /* @__PURE__ */ jsx(Avatar$1.Root, {
-		"data-slot": "avatar",
-		"data-size": size,
-		className: root({ className }),
-		...props,
-		children: children ?? /* @__PURE__ */ jsx(AvatarFallback, {})
-	});
-}
-function AvatarImage({ className, ...props }) {
-	const { image } = avatar();
-	return /* @__PURE__ */ jsx(Avatar$1.Image, {
-		"data-slot": "avatar-image",
-		className: image({ className }),
-		...props
-	});
-}
-function AvatarFallbackIcon() {
-	return /* @__PURE__ */ jsx("svg", {
-		xmlns: "http://www.w3.org/2000/svg",
-		width: "18",
-		height: "18",
-		viewBox: "0 0 18 18",
-		"aria-hidden": "true",
-		focusable: "false",
-		children: /* @__PURE__ */ jsxs("g", {
-			fill: "none",
-			strokeLinecap: "round",
-			strokeLinejoin: "round",
-			strokeWidth: "1",
-			stroke: "currentColor",
-			children: [
-				/* @__PURE__ */ jsx("circle", {
-					cx: "9",
-					cy: "7.75",
-					r: "2"
-				}),
-				/* @__PURE__ */ jsx("path", { d: "M9,16.25c1.407,0,2.716-.407,3.827-1.101-.481-1.67-2.003-2.899-3.827-2.899s-3.347,1.229-3.827,2.899c1.112,.694,2.42,1.101,3.827,1.101Z" }),
-				/* @__PURE__ */ jsx("circle", {
-					cx: "1.889",
-					cy: "10.414",
-					r: ".75",
-					fill: "currentColor",
-					"data-stroke": "none",
-					stroke: "none"
-				}),
-				/* @__PURE__ */ jsx("circle", {
-					cx: "2.971",
-					cy: "4.972",
-					r: ".75",
-					fill: "currentColor",
-					"data-stroke": "none",
-					stroke: "none"
-				}),
-				/* @__PURE__ */ jsx("circle", {
-					cx: "2.972",
-					cy: "13.027",
-					r: ".75",
-					fill: "currentColor",
-					"data-stroke": "none",
-					stroke: "none"
-				}),
-				/* @__PURE__ */ jsx("circle", {
-					cx: "1.89",
-					cy: "7.586",
-					r: ".75",
-					fill: "currentColor",
-					"data-stroke": "none",
-					stroke: "none"
-				}),
-				/* @__PURE__ */ jsx("circle", {
-					cx: "4.973",
-					cy: "2.972",
-					r: ".75",
-					fill: "currentColor",
-					"data-stroke": "none",
-					stroke: "none"
-				}),
-				/* @__PURE__ */ jsx("circle", {
-					cx: "7.586",
-					cy: "1.889",
-					r: ".75",
-					fill: "currentColor",
-					"data-stroke": "none",
-					stroke: "none"
-				}),
-				/* @__PURE__ */ jsx("circle", {
-					cx: "15.029",
-					cy: "13.028",
-					r: ".75",
-					fill: "currentColor",
-					"data-stroke": "none",
-					stroke: "none"
-				}),
-				/* @__PURE__ */ jsx("circle", {
-					cx: "16.111",
-					cy: "7.586",
-					r: ".75",
-					fill: "currentColor",
-					"data-stroke": "none",
-					stroke: "none"
-				}),
-				/* @__PURE__ */ jsx("circle", {
-					cx: "13.028",
-					cy: "2.971",
-					r: ".75",
-					fill: "currentColor",
-					"data-stroke": "none",
-					stroke: "none"
-				}),
-				/* @__PURE__ */ jsx("circle", {
-					cx: "16.11",
-					cy: "10.414",
-					r: ".75",
-					fill: "currentColor",
-					"data-stroke": "none",
-					stroke: "none"
-				}),
-				/* @__PURE__ */ jsx("circle", {
-					cx: "15.028",
-					cy: "4.973",
-					r: ".75",
-					fill: "currentColor",
-					"data-stroke": "none",
-					stroke: "none"
-				}),
-				/* @__PURE__ */ jsx("circle", {
-					cx: "10.414",
-					cy: "1.89",
-					r: ".75",
-					fill: "currentColor",
-					"data-stroke": "none",
-					stroke: "none"
-				})
-			]
-		})
-	});
-}
-function AvatarFallback({ className, children, ...props }) {
-	const { fallback } = avatar();
-	return /* @__PURE__ */ jsx(Avatar$1.Fallback, {
-		"data-slot": "avatar-fallback",
-		className: fallback({ className }),
-		...props,
-		children: children ?? /* @__PURE__ */ jsx(AvatarFallbackIcon, {})
-	});
-}
-const toCssLength = (value) => typeof value === "number" ? `${value}px` : value;
-function AvatarBadge({ className, render, offset, presence = "online", ...props }) {
-	const { badge, dot } = avatar();
-	const offsetStyle = offset ? {
-		top: toCssLength(offset[1]),
-		left: toCssLength(offset[0]),
-		right: "auto",
-		bottom: "auto",
-		translate: "-50% -50%"
-	} : void 0;
-	const defaultProps = {
-		className: badge({ className: render ? className : dot({ className: cn(PRESENCE_COLOR[presence], className) }) }),
-		style: offsetStyle
-	};
-	return useRender({
-		defaultTagName: "span",
-		render,
-		props: mergeProps(defaultProps, props),
-		state: { slot: "avatar-badge" }
-	});
-}
-function AvatarGroup({ className, ...props }) {
-	const { group } = avatar();
-	return /* @__PURE__ */ jsx("div", {
-		"data-slot": "avatar-group",
-		className: group({ className }),
-		...props
-	});
-}
-function AvatarGroupCount({ size, className, ...props }) {
-	const { root } = avatar({ size });
-	return /* @__PURE__ */ jsx("span", {
-		"data-slot": "avatar-group-count",
-		className: root({ class: ["border-transparent bg-fill-muted font-mono text-mono-meta font-bold tabular-nums text-foreground-muted shadow-none", className] }),
-		...props
-	});
-}
-//#endregion
 //#region src/components/code-block/code-block.recipe.ts
 const codeBlock = tv({ slots: {
 	root: [
@@ -6076,20 +5302,6 @@ function InlineCode({ className, appearance, ...props }) {
 	});
 }
 //#endregion
-//#region src/lib/search-hit.ts
-/**
-* The DS search hit: what you looked for is a small yellow sticker, like an @
-* to you. Every place that marks a hit (message text, Markdown, search
-* results) uses this. The hit keeps the surrounding font (`[font:inherit]`
-* drops the browser's mark styling) but is always bold, which needs `!` to win
-* over that shorthand.
-*/
-const searchHit = [
-	"[font:inherit] font-bold!",
-	"rounded-sticker bg-brand px-[3px] box-decoration-clone",
-	"text-sticker-ink inset-ring-[1.5px] inset-ring-sticker-ink ring-[1.5px] ring-sticker-edge"
-];
-//#endregion
 //#region src/components/markdown/markdown.recipe.ts
 const markdown = tv({
 	slots: {
@@ -6252,909 +5464,62 @@ function MarkdownTableScroll({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "markdown-table-scroll",
 		className: tableScroll({ className }),
-		...props
-	});
-}
-function MarkdownTable({ className, ...props }) {
-	const { table } = markdown();
-	return /* @__PURE__ */ jsx("table", {
-		"data-slot": "markdown-table",
-		className: table({ className }),
-		...props
-	});
-}
-function MarkdownTableRow({ className, ...props }) {
-	const { tableRow } = markdown();
-	return /* @__PURE__ */ jsx("tr", {
-		"data-slot": "markdown-table-row",
-		className: tableRow({ className }),
-		...props
-	});
-}
-function MarkdownHeaderCell({ className, ...props }) {
-	const { headerCell } = markdown();
-	return /* @__PURE__ */ jsx("th", {
-		"data-slot": "markdown-header-cell",
-		className: headerCell({ className }),
-		...props
-	});
-}
-function MarkdownCell({ className, ...props }) {
-	const { cell } = markdown();
-	return /* @__PURE__ */ jsx("td", {
-		"data-slot": "markdown-cell",
-		className: cell({ className }),
-		...props
-	});
-}
-function MarkdownImage({ className, ...props }) {
-	const { image } = markdown();
-	return /* @__PURE__ */ jsx("img", {
-		"data-slot": "markdown-image",
-		className: image({ className }),
-		...props
-	});
-}
-function MarkdownInlineCode({ className, ...props }) {
-	const { inlineCode } = markdown();
-	return /* @__PURE__ */ jsx(InlineCode, {
-		className: inlineCode({ className }),
-		...props
-	});
-}
-/** Task-list checkbox. Markdown task items are display-only, so it defaults to read-only. */
-function MarkdownCheckbox({ className, ...props }) {
-	const { checkbox } = markdown();
-	return /* @__PURE__ */ jsx(Checkbox, {
-		readOnly: true,
-		className: checkbox({ className }),
-		...props
-	});
-}
-//#endregion
-//#region src/components/message-item/message-item.recipe.ts
-const sender = [
-	"min-w-0 truncate",
-	"text-subhead font-bold text-foreground",
-	"rounded-[2px] outline-none focus-visible:shadow-focus"
-];
-const messageItem = tv({
-	slots: {
-		root: [
-			"group/message relative flex h-fit gap-3",
-			"hover:[--mi-toolbar-opacity:1] hover:[--mi-toolbar-pe:auto] focus-within:[--mi-toolbar-opacity:1] focus-within:[--mi-toolbar-pe:auto]",
-			"has-data-popup-open:[--mi-toolbar-opacity:1] has-data-popup-open:[--mi-toolbar-pe:auto]",
-			"min-h-0 px-2 py-1 border-t-8 border-transparent bg-clip-padding",
-			"hover:bg-fill-pressed data-popup-open:bg-fill-pressed has-data-popup-open:bg-fill-pressed",
-			"hover:[--mi-ct-color:var(--foreground-hint)] has-data-popup-open:[--mi-ct-color:var(--foreground-hint)]",
-			"has-data-[slot=message-item-search-match]:bg-info-soft has-data-[slot=message-item-search-match]:hover:bg-info-soft",
-			"has-[[data-slot=message-multi-select-checkbox][data-checked]]:bg-info-soft",
-			"has-[[data-slot=message-multi-select-checkbox][data-checked]]:hover:bg-info-soft"
-		],
-		gutter: ["relative shrink-0 self-stretch", "w-[35px]"],
-		avatarSlot: [
-			"relative shrink-0 self-start",
-			"flex w-[35px] justify-center",
-			"[&_[data-slot=avatar][data-size=md]]:size-(--mi-avatar,35px)"
-		],
-		continuationTime: [
-			"absolute right-0 select-none whitespace-nowrap tabular-nums",
-			"top-[calc((var(--text-body--line-height)-var(--text-mono-meta--line-height))/2)]",
-			"font-mono text-mono-meta",
-			"text-(--mi-ct-color,transparent)"
-		],
-		content: ["min-w-0 flex-1", "text-body text-foreground"],
-		header: ["mb-px flex min-w-0 items-center gap-1.5 overflow-hidden", "pointer-fine:pe-(--mi-toolbar-reserve,6.5rem)"],
-		senderGroup: ["flex min-w-0 items-center gap-1.5 overflow-hidden", "*:data-[slot=message-item-meta]:basis-0 *:data-[slot=message-item-meta]:grow"],
-		sender,
-		senderButton: [
-			...sender,
-			"cursor-pointer",
-			"decoration-[1.5px] underline-offset-[3px] hover:underline"
-		],
-		senderBadges: ["inline-flex shrink-0 items-center gap-1"],
-		meta: ["min-w-0 truncate", "text-caption text-foreground-hint"],
-		time: ["shrink-0 whitespace-nowrap", "font-mono text-mono-meta tabular-nums text-foreground-hint"],
-		inlineStatus: ["shrink-0", "text-caption text-foreground-hint"],
-		edited: ["ms-1 whitespace-nowrap", "text-caption text-foreground-hint"],
-		body: [
-			"wrap-break-word select-text",
-			"**:select-text",
-			"text-body text-foreground",
-			"selection:bg-brand-soft"
-		],
-		searchMatch: searchHit,
-		embedded: ["min-w-0", "mt-2"],
-		attachments: ["stack-y-2", "mt-2"],
-		footer: ["mt-1.5 flex flex-wrap items-center gap-1.5"],
-		toolbar: [
-			"absolute z-20 flex items-center",
-			"opacity-(--mi-toolbar-opacity,0)",
-			"[pointer-events:var(--mi-toolbar-pe,none)]",
-			"top-[-16px] right-3 gap-0.5 overflow-visible rounded-container p-0.5",
-			"bg-layer-popover ring-1 ring-line-seam ring-inset shadow-float"
-		],
-		toolbarButton: [
-			"inline-flex shrink-0 items-center justify-center",
-			"[&_svg]:shrink-0",
-			"size-7 rounded-control border-0 bg-transparent p-0",
-			"text-foreground-muted hover:bg-fill-pressed active:bg-fill-pressed",
-			"data-popup-open:bg-fill-pressed data-active:text-foreground",
-			"outline-none focus-visible:shadow-focus",
-			"[&_svg]:size-4"
-		]
-	},
-	variants: { compact: { true: { root: ["border-t-0"] } } }
-});
-//#endregion
-//#region src/components/message-item/message-item-root.tsx
-function MessageItem({ className, compact, render, ...props }) {
-	const { root } = messageItem({ compact });
-	const defaultProps = {
-		"data-message-item": "",
-		"data-compact": compact ? "true" : void 0,
-		className: root({ className })
-	};
-	return useRender({
-		defaultTagName: "div",
-		render,
-		props: mergeProps(defaultProps, props),
-		state: { slot: "message-item" }
-	});
-}
-//#endregion
-//#region src/components/message-item/message-item-gutter.tsx
-function MessageItemGutter({ className, render, ...props }) {
-	const { gutter } = messageItem();
-	const defaultProps = { className: gutter({ className }) };
-	return useRender({
-		defaultTagName: "div",
-		render,
-		props: mergeProps(defaultProps, props),
-		state: { slot: "message-item-gutter" }
-	});
-}
-function MessageItemAvatarSlot({ className, render, ...props }) {
-	const { avatarSlot } = messageItem();
-	const defaultProps = { className: avatarSlot({ className }) };
-	return useRender({
-		defaultTagName: "div",
-		render,
-		props: mergeProps(defaultProps, props),
-		state: { slot: "message-item-avatar-slot" }
-	});
-}
-/** Left-gutter hover clock for continuation rows, a `<time>`: pass the moment in `dateTime`. Show the hour and minute only, in the person's 12h/24h format, with no AM/PM (`6:35`, `18:35`). */
-function MessageItemContinuationTime({ className, render, ...props }) {
-	const { continuationTime } = messageItem();
-	const defaultProps = { className: continuationTime({ className }) };
-	return useRender({
-		defaultTagName: "time",
-		render,
-		props: mergeProps(defaultProps, props),
-		state: { slot: "message-item-continuation-time" }
-	});
-}
-//#endregion
-//#region src/components/message-item/message-item-content.tsx
-function MessageItemContent({ className, render, ...props }) {
-	const { content } = messageItem();
-	const defaultProps = { className: content({ className }) };
-	return useRender({
-		defaultTagName: "div",
-		render,
-		props: mergeProps(defaultProps, props),
-		state: { slot: "message-item-content" }
-	});
-}
-function MessageItemBody({ className, render, ...props }) {
-	const { body } = messageItem();
-	const defaultProps = { className: body({ className }) };
-	return useRender({
-		defaultTagName: "div",
-		render,
-		props: mergeProps(defaultProps, props),
-		state: { slot: "message-item-body" }
-	});
-}
-/**
-* The edited marker, inline at the end of the message text on every row, full
-* or continuation. Put it inside the last paragraph so it follows the last
-* word; pass the copy ("(edited)") as children and the edit time as its tooltip.
-*/
-function MessageItemEdited({ className, render, ...props }) {
-	const { edited } = messageItem();
-	const defaultProps = { className: edited({ className }) };
-	return useRender({
-		defaultTagName: "span",
-		render,
-		props: mergeProps(defaultProps, props),
-		state: { slot: "message-item-edited" }
-	});
-}
-function MessageItemSearchMatch({ className, render, ...props }) {
-	const { searchMatch } = messageItem();
-	const defaultProps = { className: searchMatch({ className }) };
-	return useRender({
-		defaultTagName: "mark",
-		render,
-		props: mergeProps(defaultProps, props),
-		state: { slot: "message-item-search-match" }
-	});
-}
-function MessageItemEmbedded({ className, render, ...props }) {
-	const { embedded } = messageItem();
-	const defaultProps = { className: embedded({ className }) };
-	return useRender({
-		defaultTagName: "div",
-		render,
-		props: mergeProps(defaultProps, props),
-		state: { slot: "message-item-embedded" }
-	});
-}
-function MessageItemAttachments({ className, render, ...props }) {
-	const { attachments } = messageItem();
-	const defaultProps = { className: attachments({ className }) };
-	return useRender({
-		defaultTagName: "div",
-		render,
-		props: mergeProps(defaultProps, props),
-		state: { slot: "message-item-attachments" }
-	});
-}
-function MessageItemFooter({ className, render, ...props }) {
-	const { footer } = messageItem();
-	const defaultProps = { className: footer({ className }) };
-	return useRender({
-		defaultTagName: "div",
-		render,
-		props: mergeProps(defaultProps, props),
-		state: { slot: "message-item-footer" }
-	});
-}
-//#endregion
-//#region src/components/message-item/message-item-header.tsx
-function MessageItemHeader({ className, render, ...props }) {
-	const { header } = messageItem();
-	const defaultProps = { className: header({ className }) };
-	return useRender({
-		defaultTagName: "div",
-		render,
-		props: mergeProps(defaultProps, props),
-		state: { slot: "message-item-header" }
-	});
-}
-/**
-* Holds the sender, its badges and its role, and decides who gives way when
-* the header runs out of room: the role truncates first, then the name. The
-* badges stay whole beside the name, and the time, outside the group, never
-* truncates.
-*/
-function MessageItemSenderGroup({ className, render, ...props }) {
-	const { senderGroup } = messageItem();
-	const defaultProps = { className: senderGroup({ className }) };
-	return useRender({
-		defaultTagName: "span",
-		render,
-		props: mergeProps(defaultProps, props),
-		state: { slot: "message-item-sender-group" }
-	});
-}
-function MessageItemSender({ className, render, ...props }) {
-	const { sender } = messageItem();
-	const defaultProps = { className: sender({ className }) };
-	return useRender({
-		defaultTagName: "span",
-		render,
-		props: mergeProps(defaultProps, props),
-		state: { slot: "message-item-sender" }
-	});
-}
-function MessageItemSenderButton({ className, render, ...props }) {
-	const { senderButton } = messageItem();
-	const defaultProps = {
-		type: "button",
-		className: senderButton({ className })
-	};
-	return useRender({
-		defaultTagName: "button",
-		render,
-		props: mergeProps(defaultProps, props),
-		state: { slot: "message-item-sender-button" }
-	});
-}
-function MessageItemSenderBadges({ className, render, ...props }) {
-	const { senderBadges } = messageItem();
-	const defaultProps = { className: senderBadges({ className }) };
-	return useRender({
-		defaultTagName: "span",
-		render,
-		props: mergeProps(defaultProps, props),
-		state: { slot: "message-item-sender-badges" }
-	});
-}
-function MessageItemMeta({ className, render, ...props }) {
-	const { meta } = messageItem();
-	const defaultProps = { className: meta({ className }) };
-	return useRender({
-		defaultTagName: "span",
-		render,
-		props: mergeProps(defaultProps, props),
-		state: { slot: "message-item-meta" }
-	});
-}
-/**
-* The message's time, right after the sender. A `<time>`: pass the moment in
-* `dateTime` (ISO 8601) and the full date and time as its tooltip.
-*/
-function MessageItemTime({ className, render, ...props }) {
-	const { time } = messageItem();
-	const defaultProps = { className: time({ className }) };
-	return useRender({
-		defaultTagName: "time",
-		render,
-		props: mergeProps(defaultProps, props),
-		state: { slot: "message-item-time" }
-	});
-}
-function MessageItemInlineStatus({ className, render, ...props }) {
-	const { inlineStatus } = messageItem();
-	const defaultProps = { className: inlineStatus({ className }) };
-	return useRender({
-		defaultTagName: "span",
-		render,
-		props: mergeProps(defaultProps, props),
-		state: { slot: "message-item-inline-status" }
-	});
-}
-//#endregion
-//#region src/components/message-item/message-item-toolbar.tsx
-function MessageItemToolbar({ className, render, ...props }) {
-	const { toolbar } = messageItem();
-	const defaultProps = { className: toolbar({ className }) };
-	return useRender({
-		defaultTagName: "div",
-		render,
-		props: mergeProps(defaultProps, props),
-		state: { slot: "message-item-toolbar" }
-	});
-}
-function MessageItemToolbarButton({ active = false, className, render, ...props }) {
-	const { toolbarButton } = messageItem();
-	const defaultProps = {
-		type: "button",
-		"data-active": active ? "true" : void 0,
-		className: toolbarButton({ className })
-	};
-	return useRender({
-		defaultTagName: "button",
-		render,
-		props: mergeProps(defaultProps, props),
-		state: { slot: "message-item-toolbar-button" }
-	});
-}
-//#endregion
-//#region src/components/message-item/message-footer.recipe.ts
-const messageFooter = tv({
-	slots: {
-		savedIndicator: [
-			"inline-flex min-w-0 max-w-full items-center gap-1 overflow-hidden whitespace-nowrap select-none",
-			"[&_svg]:shrink-0",
-			"h-[22px] rounded-chip px-1.5",
-			"text-caption font-semibold text-foreground-muted",
-			"bg-fill-muted hover:press-overlay active:press-overlay",
-			"outline-none focus-visible:shadow-focus",
-			"[&_svg]:size-3.5 [&_svg]:text-foreground"
-		],
-		readReceipt: [
-			"ml-auto inline-flex shrink-0 items-center gap-1 whitespace-nowrap",
-			"[&_svg]:shrink-0",
-			"h-[22px] font-mono text-mono-meta text-foreground-hint [&_svg]:size-3"
-		],
-		badge: [
-			"inline-flex min-w-0 max-w-full items-center overflow-hidden whitespace-nowrap select-none",
-			"transition-colors [&_svg]:shrink-0",
-			"h-6 gap-1 rounded-chip border-0 px-2 shadow-none",
-			"text-footnote font-bold text-foreground-muted",
-			"bg-fill-muted hover:press-overlay active:press-overlay",
-			"[&_svg]:size-3.5"
-		],
-		badgeSeparator: ["text-foreground/45"]
-	},
-	variants: {
-		badgeStatus: {
-			read: {},
-			unread: { badge: ["text-foreground"] }
-		},
-		iconOnly: {
-			true: { savedIndicator: [
-				"justify-center p-0",
-				"size-8 rounded-control bg-transparent",
-				"[&_svg]:size-[18px] [&_svg]:text-foreground-muted"
-			] },
-			false: {}
-		}
-	},
-	defaultVariants: { iconOnly: false }
-});
-//#endregion
-//#region src/components/message-item/message-footer.tsx
-function MessageItemBadge({ className, status = "read", ...props }) {
-	const { badge } = messageFooter({ badgeStatus: status });
-	return /* @__PURE__ */ jsx(Badge, {
-		appearance: "soft",
-		"data-slot": "message-item-badge",
-		variant: "muted",
-		className: badge({ className }),
-		...props
-	});
-}
-function MessageItemBadgeSeparator({ className, render, ...props }) {
-	const { badgeSeparator } = messageFooter();
-	const defaultProps = {
-		"aria-hidden": true,
-		className: badgeSeparator({ className })
-	};
-	return useRender({
-		defaultTagName: "span",
-		render,
-		props: mergeProps(defaultProps, props),
-		state: { slot: "message-item-badge-separator" }
-	});
-}
-function MessageItemSavedIndicator({ className, iconOnly = false, render, ...props }) {
-	const { savedIndicator } = messageFooter({ iconOnly });
-	const defaultProps = {
-		...iconOnly ? { "data-icon-only": "" } : {},
-		className: savedIndicator({ className })
-	};
-	return useRender({
-		defaultTagName: "span",
-		render,
-		props: mergeProps(defaultProps, props),
-		state: { slot: "message-item-saved-indicator" }
-	});
-}
-function MessageItemReadReceipt({ className, render, ...props }) {
-	const { readReceipt } = messageFooter();
-	const defaultProps = { className: readReceipt({ className }) };
-	return useRender({
-		defaultTagName: "span",
-		render,
-		props: mergeProps(defaultProps, props),
-		state: { slot: "message-item-read-receipt" }
-	});
-}
-//#endregion
-//#region src/components/message-item/message-reaction.recipe.ts
-const reactionCountKeyframes = [
-	{
-		opacity: .7,
-		transform: "translateY(1px) scale(0.92)",
-		offset: 0
-	},
-	{
-		opacity: 1,
-		transform: "translateY(-1px) scale(1.16)",
-		offset: .45
-	},
-	{
-		opacity: 1,
-		transform: "translateY(0) scale(1)",
-		offset: 1
-	}
-];
-const reactionCountTiming = {
-	duration: 180,
-	easing: "cubic-bezier(0.2, 0, 0.2, 1)"
-};
-const messageReaction = tv({ slots: {
-	chip: [
-		"inline-flex min-w-0 max-w-full items-center overflow-hidden whitespace-nowrap",
-		"transition-colors",
-		"h-6 gap-1 rounded-chip pr-2 pl-1.5 text-callout text-foreground",
-		"bg-fill-muted hover:press-overlay active:press-overlay",
-		"data-pressed:bg-attention-soft",
-		"has-data-[slot=message-reaction-error-indicator]:bg-warning-soft",
-		"outline-none focus-visible:shadow-focus",
-		"[&_[data-slot=message-reaction-glyph]>svg]:size-4"
-	],
-	errorIndicator: ["sr-only"],
-	glyph: ["inline-flex items-center justify-center leading-none", "[&>svg]:size-[13px] [&>svg]:shrink-0"],
-	count: ["inline-block origin-center font-mono tabular-nums", "text-mono-meta font-bold"],
-	addButton: [
-		"inline-flex min-w-0 items-center justify-center",
-		"transition-colors",
-		"[&_svg]:shrink-0",
-		"h-6 rounded-chip px-1.5 [&_svg]:size-4",
-		"bg-fill-muted text-foreground-muted hover:press-overlay active:press-overlay",
-		"outline-none focus-visible:shadow-focus"
-	],
-	quickRow: [
-		"flex shrink-0 items-center",
-		"justify-between gap-0.5 bg-layer-popover px-0.5 py-0.5",
-		"[&>[role=menuitem]]:size-9 [&>[role=menuitem]]:p-0 *:[[role=menuitem]]:justify-center"
-	],
-	quickButton: [
-		"flex items-center justify-center",
-		"bg-transparent transition-colors",
-		"size-9 rounded-control p-0 text-xl leading-none text-foreground-muted",
-		"hover:bg-brand-soft data-highlighted:bg-brand-soft active:bg-brand-soft",
-		"outline-none focus-visible:shadow-focus"
-	],
-	pickerContent: [
-		"inline-flex items-center",
-		"min-w-0 flex-row gap-0.5 p-1",
-		"[&>[role=menuitem]]:size-9 [&>[role=menuitem]]:p-0"
-	],
-	pickerStatic: [
-		"inline-flex items-center",
-		"min-w-0 flex-row gap-0.5 rounded-container p-1",
-		"bg-layer-popover ring-1 ring-line-seam shadow-float outline-none"
-	],
-	tooltip: ["inline-block max-w-[280px]", "px-2.5 py-1 text-footnote font-medium"],
-	tooltipNames: ["flex max-w-60 flex-wrap items-center gap-y-0.5"],
-	tooltipName: ["inline-flex min-w-0 items-baseline leading-5"],
-	tooltipNameText: ["max-w-28 truncate"],
-	tooltipSeparator: ["shrink-0", "text-foreground-on-hud/70"],
-	tooltipMeta: ["leading-5", "text-foreground-on-hud/70"]
-} });
-//#endregion
-//#region src/components/message-item/message-reaction.tsx
-function MessageReactionChip({ className, ...props }) {
-	const { chip } = messageReaction();
-	return /* @__PURE__ */ jsx(Toggle, {
-		...props,
-		type: "button",
-		"data-slot": "message-reaction-chip",
-		className: chip({ className })
-	});
-}
-function MessageReactionErrorIndicator({ className, render, ...props }) {
-	const { errorIndicator } = messageReaction();
-	const defaultProps = {
-		className: errorIndicator({ className }),
-		role: "status"
-	};
-	return useRender({
-		defaultTagName: "span",
-		render,
-		props: mergeProps(defaultProps, props),
-		state: { slot: "message-reaction-error-indicator" }
-	});
-}
-function MessageReactionGlyph({ className, render, ...props }) {
-	const { glyph: glyphSlot } = messageReaction();
-	const defaultProps = { className: glyphSlot({ className }) };
-	return useRender({
-		defaultTagName: "span",
-		render,
-		props: mergeProps(defaultProps, props),
-		state: { slot: "message-reaction-glyph" }
-	});
-}
-function MessageReactionCount({ children, className, render, ...props }) {
-	const elementRef = useRef(null);
-	const value = typeof children === "number" && Number.isFinite(children) ? children : null;
-	const previousValue = useRef(value);
-	useEffect(() => {
-		const previous = previousValue.current;
-		previousValue.current = value;
-		if (value === null || previous === null || value === previous) return;
-		const element = elementRef.current;
-		const reducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)");
-		if (!element?.animate || reducedMotion.matches) return;
-		const animation = element.animate(reactionCountKeyframes, reactionCountTiming);
-		const handleMotionChange = () => {
-			if (reducedMotion.matches) animation.cancel();
-		};
-		reducedMotion.addEventListener("change", handleMotionChange);
-		return () => {
-			animation.cancel();
-			reducedMotion.removeEventListener("change", handleMotionChange);
-		};
-	}, [value]);
-	const { count } = messageReaction();
-	const defaultProps = {
-		className: count({ className }),
-		children,
-		ref: elementRef
-	};
-	return useRender({
-		defaultTagName: "span",
-		render,
-		props: mergeProps(defaultProps, props),
-		state: { slot: "message-reaction-count" }
-	});
-}
-function MessageReactionAddButton({ className, render, ...props }) {
-	const { addButton } = messageReaction();
-	const defaultProps = {
-		type: "button",
-		className: addButton({ className })
-	};
-	return useRender({
-		defaultTagName: "button",
-		render,
-		props: mergeProps(defaultProps, props),
-		state: { slot: "message-reaction-add-button" }
-	});
-}
-function MessageReactionQuickRow({ className, render, ...props }) {
-	const { quickRow } = messageReaction();
-	const defaultProps = { className: quickRow({ className }) };
-	return useRender({
-		defaultTagName: "div",
-		render,
-		props: mergeProps(defaultProps, props),
-		state: { slot: "message-reaction-quick-row" }
-	});
-}
-function MessageReactionQuickButton({ className, render, ...props }) {
-	const { quickButton } = messageReaction();
-	const defaultProps = {
-		type: "button",
-		className: quickButton({ className })
-	};
-	return useRender({
-		defaultTagName: "button",
-		render,
-		props: mergeProps(defaultProps, props),
-		state: { slot: "message-reaction-quick-button" }
-	});
-}
-function MessageReactionPickerStatic({ className, render, ...props }) {
-	const { pickerStatic } = messageReaction();
-	const defaultProps = { className: pickerStatic({ className }) };
-	return useRender({
-		defaultTagName: "div",
-		render,
-		props: mergeProps(defaultProps, props),
-		state: { slot: "message-reaction-picker-static" }
-	});
-}
-function MessageReactionPickerContent({ className, ...props }) {
-	const { pickerContent } = messageReaction();
-	return /* @__PURE__ */ jsx(DropdownMenuContent, {
-		"data-slot": "message-reaction-picker",
-		className: pickerContent({ className }),
-		...props
-	});
-}
-function MessageReactionTooltipContent({ className, ...props }) {
-	const { tooltip } = messageReaction();
-	return /* @__PURE__ */ jsx(TooltipContent, {
-		className: tooltip({ className }),
-		...props
-	});
-}
-function MessageReactionTooltipNames({ className, render, ...props }) {
-	const { tooltipNames } = messageReaction();
-	const defaultProps = { className: tooltipNames({ className }) };
-	return useRender({
-		defaultTagName: "span",
-		render,
-		props: mergeProps(defaultProps, props),
-		state: { slot: "message-reaction-tooltip-names" }
-	});
-}
-function MessageReactionTooltipName({ className, render, ...props }) {
-	const { tooltipName } = messageReaction();
-	const defaultProps = { className: tooltipName({ className }) };
-	return useRender({
-		defaultTagName: "span",
-		render,
-		props: mergeProps(defaultProps, props),
-		state: { slot: "message-reaction-tooltip-name" }
-	});
-}
-function MessageReactionTooltipNameText({ className, render, ...props }) {
-	const { tooltipNameText } = messageReaction();
-	const defaultProps = { className: tooltipNameText({ className }) };
-	return useRender({
-		defaultTagName: "span",
-		render,
-		props: mergeProps(defaultProps, props),
-		state: { slot: "message-reaction-tooltip-name-text" }
-	});
-}
-function MessageReactionTooltipSeparator({ className, render, ...props }) {
-	const { tooltipSeparator } = messageReaction();
-	const defaultProps = { className: tooltipSeparator({ className }) };
-	return useRender({
-		defaultTagName: "span",
-		render,
-		props: mergeProps(defaultProps, props),
-		state: { slot: "message-reaction-tooltip-separator" }
-	});
-}
-function MessageReactionTooltipMeta({ className, render, ...props }) {
-	const { tooltipMeta } = messageReaction();
-	const defaultProps = { className: tooltipMeta({ className }) };
-	return useRender({
-		defaultTagName: "span",
-		render,
-		props: mergeProps(defaultProps, props),
-		state: { slot: "message-reaction-tooltip-meta" }
-	});
-}
-//#endregion
-//#region src/components/message-item/message-reference.recipe.ts
-const chip = (fill) => [
-	"items-baseline gap-0.5 rounded-sticker px-1.5 py-px has-[>svg]:pl-[3px]",
-	"[font-size:0.875em] leading-5 font-semibold",
-	"[&_svg]:size-3.5 [&_svg]:text-foreground-muted",
-	fill
-];
-const linkChip = (fill) => [...chip(fill), "text-foreground cursor-pointer hover:press-overlay active:press-overlay"];
-const messageReference = tv({
-	slots: {
-		root: [
-			"inline-flex items-baseline gap-1",
-			"py-0 align-baseline",
-			"[font-size:inherit] leading-[1.2em]",
-			"max-w-full truncate select-text no-underline",
-			"outline-none focus-visible:shadow-focus",
-			"[&_svg]:size-[0.857em] [&_svg]:shrink-0 [&_svg]:self-center",
-			"has-[>[data-slot=message-reference-indicator]]:relative has-[>[data-slot=message-reference-indicator]]:mr-2",
-			"has-[>[data-slot=message-reference-indicator]]:inline-block",
-			"has-[>[data-slot=message-reference-indicator]]:overflow-visible"
-		],
-		chipLabel: "min-w-0 truncate",
-		indicator: ["pointer-events-none absolute -right-1.5 top-0 inline-flex size-2 shrink-0 items-center justify-center", "*:data-[slot=status]:size-full"]
-	},
-	variants: { variant: {
-		primary: { root: [
-			"inline-flex cursor-pointer rounded-sticker px-[3px]",
-			"font-semibold text-sticker-ink no-underline",
-			"bg-brand inset-ring-[1.5px] inset-ring-sticker-ink ring-[1.5px] ring-sticker-edge",
-			"hover:press-overlay-sticker"
-		] },
-		secondary: { root: ["inline cursor-pointer font-bold text-foreground", "decoration-foreground decoration-[1.5px] underline-offset-[3px] hover:underline"] },
-		accent: { root: linkChip("bg-attention-soft") },
-		muted: { root: linkChip("bg-inactive-soft") },
-		info: { root: linkChip("bg-info-soft") },
-		link: { root: linkChip("bg-info-soft") },
-		pending: { root: chip("cursor-wait bg-inactive-soft text-foreground-muted") },
-		unavailable: { root: chip("cursor-default bg-inactive-soft text-foreground-hint") }
-	} },
-	defaultVariants: { variant: "muted" }
-});
-//#endregion
-//#region src/components/message-item/message-reference.tsx
-function useReferenceRender(className, render, props) {
-	return useRender({
-		defaultTagName: "span",
-		render,
-		props: mergeProps({ className }, props),
-		state: { slot: "message-reference" }
-	});
-}
-function MessageReferenceText({ className, render, variant = "secondary", ...props }) {
-	const { root } = messageReference({ variant });
-	return useReferenceRender(root({ className }), render, props);
-}
-function MessageReferenceIndicator({ className, render, ...props }) {
-	const { indicator } = messageReference();
-	const defaultProps = { className: indicator({ className }) };
-	return useRender({
-		defaultTagName: "span",
-		render,
-		props: mergeProps(defaultProps, props),
-		state: { slot: "message-reference-indicator" }
-	});
-}
-function MessageReferenceChip({ className, render, variant = "muted", ...props }) {
-	const { root } = messageReference({ variant });
-	return useReferenceRender(root({ className }), render, props);
-}
-function MessageReferenceLabel({ className, render, ...props }) {
-	const { chipLabel } = messageReference();
-	const defaultProps = { className: chipLabel({ className }) };
-	return useRender({
-		defaultTagName: "span",
-		render,
-		props: mergeProps(defaultProps, props),
-		state: { slot: "message-reference-label" }
+		...props
 	});
 }
-function MessageReferencePending({ className, render, ...props }) {
-	const { root } = messageReference({ variant: "pending" });
-	return useReferenceRender(root({ className }), render, props);
-}
-function MessageReferenceUnavailable({ className, render, ...props }) {
-	const { root } = messageReference({ variant: "unavailable" });
-	return useReferenceRender(root({ className }), render, props);
+function MarkdownTable({ className, ...props }) {
+	const { table } = markdown();
+	return /* @__PURE__ */ jsx("table", {
+		"data-slot": "markdown-table",
+		className: table({ className }),
+		...props
+	});
 }
-//#endregion
-//#region src/components/message-item/message-multi-select.recipe.ts
-const messageMultiSelect = tv({ slots: {
-	root: ["flex min-h-0 min-w-0 flex-1 flex-col"],
-	checkbox: [
-		"self-start",
-		"data-checked:shadow-none data-indeterminate:shadow-none",
-		"hover:data-checked:shadow-none hover:data-indeterminate:shadow-none",
-		"mt-2 rounded-sticker"
-	],
-	toolbar: [
-		"flex items-center",
-		"gap-2 rounded-container px-2.5 py-2",
-		"bg-layer-popover ring-1 ring-line-seam shadow-float"
-	]
-} });
-//#endregion
-//#region src/components/message-item/message-multi-select.tsx
-function MessageMultiSelect({ className, render, ...props }) {
-	const { root } = messageMultiSelect();
-	const defaultProps = { className: root({ className }) };
-	return useRender({
-		defaultTagName: "div",
-		render,
-		props: mergeProps(defaultProps, props),
-		state: { slot: "message-multi-select" }
+function MarkdownTableRow({ className, ...props }) {
+	const { tableRow } = markdown();
+	return /* @__PURE__ */ jsx("tr", {
+		"data-slot": "markdown-table-row",
+		className: tableRow({ className }),
+		...props
 	});
 }
-/** Shared select-mode toolbar shell. Consumers compose the count and actions as children. */
-function MessageMultiSelectToolbar({ className, render, ...props }) {
-	const { toolbar } = messageMultiSelect();
-	const defaultProps = { className: toolbar({ className }) };
-	return useRender({
-		defaultTagName: "div",
-		render,
-		props: mergeProps(defaultProps, props),
-		state: { slot: "message-multi-select-toolbar" }
+function MarkdownHeaderCell({ className, ...props }) {
+	const { headerCell } = markdown();
+	return /* @__PURE__ */ jsx("th", {
+		"data-slot": "markdown-header-cell",
+		className: headerCell({ className }),
+		...props
 	});
 }
-function MessageMultiSelectCheckbox({ className, ...props }) {
-	const { checkbox } = messageMultiSelect();
-	return /* @__PURE__ */ jsx(Checkbox, {
-		"data-slot": "message-multi-select-checkbox",
-		className: checkbox({ className }),
-		shape: "square",
+function MarkdownCell({ className, ...props }) {
+	const { cell } = markdown();
+	return /* @__PURE__ */ jsx("td", {
+		"data-slot": "markdown-cell",
+		className: cell({ className }),
 		...props
 	});
 }
-//#endregion
-//#region src/components/message-item/message-text-selection-toolbar.recipe.ts
-const messageTextSelectionToolbar = tv({ slots: {
-	toolbar: [
-		"flex min-w-0 items-center select-none",
-		"gap-0.5 overflow-visible rounded-container p-0.5 text-control font-bold",
-		"bg-layer-popover ring-1 ring-line-seam ring-inset shadow-float"
-	],
-	button: [
-		"flex shrink-0 items-center gap-1.5 outline-none transition-colors",
-		"h-7 rounded-control px-2.5 whitespace-nowrap text-foreground",
-		"hover:bg-fill-pressed active:bg-fill-pressed",
-		"focus-visible:shadow-focus",
-		"[&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-foreground-muted"
-	],
-	separator: ["w-px shrink-0", "mx-0.5 h-5 bg-line-hairline"]
-} });
-//#endregion
-//#region src/components/message-item/message-text-selection-toolbar.tsx
-function MessageTextSelectionToolbar({ className, ...props }) {
-	const { toolbar } = messageTextSelectionToolbar();
-	return /* @__PURE__ */ jsx(Toolbar.Root, {
-		"data-slot": "message-text-selection-toolbar",
-		className: toolbar({ className }),
+function MarkdownImage({ className, ...props }) {
+	const { image } = markdown();
+	return /* @__PURE__ */ jsx("img", {
+		"data-slot": "markdown-image",
+		className: image({ className }),
 		...props
 	});
 }
-function MessageTextSelectionToolbarButton({ className, ...props }) {
-	const { button } = messageTextSelectionToolbar();
-	return /* @__PURE__ */ jsx(Toolbar.Button, {
-		"data-slot": "message-text-selection-toolbar-button",
-		type: "button",
-		className: button({ className }),
+function MarkdownInlineCode({ className, ...props }) {
+	const { inlineCode } = markdown();
+	return /* @__PURE__ */ jsx(InlineCode, {
+		className: inlineCode({ className }),
 		...props
 	});
 }
-function MessageTextSelectionToolbarSeparator({ className, ...props }) {
-	const { separator } = messageTextSelectionToolbar();
-	return /* @__PURE__ */ jsx(Toolbar.Separator, {
-		"data-slot": "message-text-selection-toolbar-separator",
-		className: separator({ className }),
+/** Task-list checkbox. Markdown task items are display-only, so it defaults to read-only. */
+function MarkdownCheckbox({ className, ...props }) {
+	const { checkbox } = markdown();
+	return /* @__PURE__ */ jsx(Checkbox, {
+		readOnly: true,
+		className: checkbox({ className }),
 		...props
 	});
 }
@@ -7399,211 +5764,6 @@ function SystemMessageGroupPanel({ className, render, ...props }) {
 	});
 }
 //#endregion
-//#region src/components/message-embed/message-embed.recipe.ts
-const messageEmbed = tv({ slots: {
-	root: [
-		"group block min-w-0 text-left",
-		"rounded-container border border-line-hairline bg-layer-card",
-		"outline-none focus-visible:shadow-focus"
-	],
-	header: ["min-w-0", "px-3 py-2"],
-	content: ["min-w-0"],
-	footer: ["min-w-0", "px-3 py-2"]
-} });
-//#endregion
-//#region src/components/message-embed/message-embed.tsx
-function MessageEmbed({ className, render, ...props }) {
-	const { root } = messageEmbed();
-	return useRender({
-		defaultTagName: "div",
-		render,
-		props: mergeProps({ className: root({ className }) }, props),
-		state: { slot: "message-embed" }
-	});
-}
-function MessageEmbedHeader({ className, render, ...props }) {
-	const { header } = messageEmbed();
-	return useRender({
-		defaultTagName: "div",
-		render,
-		props: mergeProps({ className: header({ className }) }, props),
-		state: { slot: "message-embed-header" }
-	});
-}
-function MessageEmbedContent({ className, render, ...props }) {
-	const { content } = messageEmbed();
-	return useRender({
-		defaultTagName: "div",
-		render,
-		props: mergeProps({ className: content({ className }) }, props),
-		state: { slot: "message-embed-content" }
-	});
-}
-function MessageEmbedFooter({ className, render, ...props }) {
-	const { footer } = messageEmbed();
-	return useRender({
-		defaultTagName: "div",
-		render,
-		props: mergeProps({ className: footer({ className }) }, props),
-		state: { slot: "message-embed-footer" }
-	});
-}
-//#endregion
-//#region src/components/message-quoted-preview/message-quoted-preview.recipe.ts
-const messageQuotedPreview = tv({ slots: {
-	root: [
-		"w-full",
-		"rounded-none border-0 border-l-2 border-line-seam bg-transparent pl-2.5",
-		"text-foreground-muted"
-	],
-	content: ["min-w-0", "p-0"],
-	header: ["flex min-w-0 items-center", "gap-1.5 p-0 pb-0.5"],
-	channel: ["inline-flex items-center", "gap-1 text-footnote font-semibold text-foreground-hint [&_svg]:size-3.5"],
-	thread: ["inline-flex items-center", "gap-1 text-footnote font-semibold text-foreground-hint [&_svg]:size-3.5"],
-	author: ["inline-flex min-w-0 items-center", "gap-1.5"],
-	authorName: ["truncate", "text-footnote font-bold text-foreground-muted"],
-	authorMeta: ["truncate", "text-caption text-foreground-hint"],
-	timestamp: ["ml-auto shrink-0", "font-mono text-mono-meta tabular-nums text-foreground-hint"],
-	text: ["line-clamp-2", "text-callout text-foreground-muted"],
-	attachments: ["flex flex-wrap gap-1.5", "mt-1.5"],
-	attachment: [
-		"inline-flex items-center",
-		"h-[22px] gap-1 rounded-chip bg-fill-muted px-1.5",
-		"font-mono text-mono-meta text-foreground-muted [&_svg]:size-3.5"
-	],
-	loading: ["w-full animate-pulse", "rounded-none border-0 border-l-2 border-line-seam bg-transparent pl-2.5"],
-	unavailable: [
-		"block w-full text-left",
-		"border-l-2 border-line-seam pl-2.5",
-		"text-callout text-foreground-hint",
-		"outline-none focus-visible:shadow-focus"
-	]
-} });
-//#endregion
-//#region src/components/message-quoted-preview/message-quoted-preview.tsx
-function MessageQuotedPreview({ className, render, ...props }) {
-	const { root } = messageQuotedPreview();
-	return /* @__PURE__ */ jsx(MessageEmbed, {
-		className: root({ className }),
-		render,
-		...props
-	});
-}
-function MessageQuotedPreviewContent({ className, render, ...props }) {
-	const { content } = messageQuotedPreview();
-	return /* @__PURE__ */ jsx(MessageEmbedContent, {
-		className: content({ className }),
-		render,
-		...props
-	});
-}
-function MessageQuotedPreviewHeader({ className, render, ...props }) {
-	const { header } = messageQuotedPreview();
-	return /* @__PURE__ */ jsx(MessageEmbedHeader, {
-		className: header({ className }),
-		render,
-		...props
-	});
-}
-function MessageQuotedPreviewChannel({ className, render, ...props }) {
-	const { channel } = messageQuotedPreview();
-	return useRender({
-		defaultTagName: "span",
-		render,
-		props: mergeProps({ className: channel({ className }) }, props),
-		state: { slot: "message-quoted-preview-channel" }
-	});
-}
-function MessageQuotedPreviewThread({ className, render, ...props }) {
-	const { thread } = messageQuotedPreview();
-	return useRender({
-		defaultTagName: "span",
-		render,
-		props: mergeProps({ className: thread({ className }) }, props),
-		state: { slot: "message-quoted-preview-thread" }
-	});
-}
-function MessageQuotedPreviewAuthor({ className, render, ...props }) {
-	const { author } = messageQuotedPreview();
-	return useRender({
-		defaultTagName: "span",
-		render,
-		props: mergeProps({ className: author({ className }) }, props),
-		state: { slot: "message-quoted-preview-author" }
-	});
-}
-function MessageQuotedPreviewAuthorName({ className, render, ...props }) {
-	const { authorName } = messageQuotedPreview();
-	return useRender({
-		defaultTagName: "span",
-		render,
-		props: mergeProps({ className: authorName({ className }) }, props),
-		state: { slot: "message-quoted-preview-author-name" }
-	});
-}
-function MessageQuotedPreviewAuthorMeta({ className, render, ...props }) {
-	const { authorMeta } = messageQuotedPreview();
-	return useRender({
-		defaultTagName: "span",
-		render,
-		props: mergeProps({ className: authorMeta({ className }) }, props),
-		state: { slot: "message-quoted-preview-author-meta" }
-	});
-}
-function MessageQuotedPreviewTimestamp({ className, render, ...props }) {
-	const { timestamp } = messageQuotedPreview();
-	return useRender({
-		defaultTagName: "span",
-		render,
-		props: mergeProps({ className: timestamp({ className }) }, props),
-		state: { slot: "message-quoted-preview-timestamp" }
-	});
-}
-function MessageQuotedPreviewText({ className, render, ...props }) {
-	const { text } = messageQuotedPreview();
-	return useRender({
-		defaultTagName: "div",
-		render,
-		props: mergeProps({ className: text({ className }) }, props),
-		state: { slot: "message-quoted-preview-text" }
-	});
-}
-function MessageQuotedPreviewAttachments({ className, render, ...props }) {
-	const { attachments } = messageQuotedPreview();
-	return useRender({
-		defaultTagName: "div",
-		render,
-		props: mergeProps({ className: attachments({ className }) }, props),
-		state: { slot: "message-quoted-preview-attachments" }
-	});
-}
-function MessageQuotedPreviewAttachment({ className, render, ...props }) {
-	const { attachment } = messageQuotedPreview();
-	return useRender({
-		defaultTagName: "span",
-		render,
-		props: mergeProps({ className: attachment({ className }) }, props),
-		state: { slot: "message-quoted-preview-attachment" }
-	});
-}
-function MessageQuotedPreviewLoading({ className, render, ...props }) {
-	const { loading } = messageQuotedPreview();
-	return /* @__PURE__ */ jsx(MessageEmbed, {
-		className: loading({ className }),
-		render,
-		...props
-	});
-}
-function MessageQuotedPreviewUnavailable({ className, render, ...props }) {
-	const { unavailable } = messageQuotedPreview();
-	return useRender({
-		defaultTagName: "div",
-		render,
-		props: mergeProps({ className: unavailable({ className }) }, props),
-		state: { slot: "message-quoted-preview-unavailable" }
-	});
-}
-//#endregion
 //#region src/components/message-replies/message-replies.recipe.ts
 const messageReplies = tv({ slots: {
 	root: [
@@ -9186,128 +7346,6 @@ function MessageItemTranslationRetryAction({ className, ...props }) {
 	});
 }
 //#endregion
-//#region src/components/message-list/message-list.recipe.ts
-const messageList = tv({
-	slots: {
-		root: ["relative h-full min-h-0"],
-		viewport: ["min-w-0 overscroll-none"],
-		content: ["flex min-h-full w-full min-w-0 flex-col"],
-		dateDividerRoot: ["flex select-none items-center", "gap-2 px-4 py-3"],
-		dateDividerRule: ["flex-1", "min-w-3 border-t border-line-hairline"],
-		dateDividerChip: ["inline-flex items-center", "font-mono text-mono-meta whitespace-nowrap text-foreground-hint"],
-		notice: ["text-center", "pb-2 font-mono text-mono-meta"],
-		historyLimited: [
-			"inline-flex items-center",
-			"h-[22px] gap-1 rounded-chip px-1.5",
-			"font-mono text-mono-meta text-foreground-muted",
-			"inset-ring inset-ring-line-hairline",
-			"[&_svg]:size-3"
-		]
-	},
-	variants: { tone: {
-		faint: { notice: ["text-foreground-hint"] },
-		muted: { notice: ["text-foreground-muted"] }
-	} },
-	defaultVariants: { tone: "faint" }
-});
-//#endregion
-//#region src/components/message-list/message-list.tsx
-const contentStyle = { minWidth: 0 };
-function MessageList({ children, className, render, rootClassName, style, ...props }) {
-	const isMobile = useMobileViewport();
-	const { content, root, viewport } = messageList();
-	const viewportStyle = useMemo(() => ({
-		...style,
-		overflowX: "hidden"
-	}), [style]);
-	if (isMobile) return /* @__PURE__ */ jsx("div", {
-		"data-slot": "message-list",
-		className: root({ className: rootClassName }),
-		children: /* @__PURE__ */ jsx(PanelScrollViewport, {
-			...props,
-			render,
-			"data-slot": "message-list-viewport",
-			className: viewport({ className }),
-			style: viewportStyle,
-			children: /* @__PURE__ */ jsx("div", {
-				className: content(),
-				children
-			})
-		})
-	});
-	return /* @__PURE__ */ jsxs(ScrollArea, {
-		"data-slot": "message-list",
-		className: root({ className: rootClassName }),
-		children: [/* @__PURE__ */ jsx(ScrollAreaViewport, {
-			...props,
-			render,
-			"data-slot": "message-list-viewport",
-			className: viewport({ className }),
-			style: viewportStyle,
-			children: /* @__PURE__ */ jsx(ScrollAreaContent, {
-				className: content(),
-				style: contentStyle,
-				children
-			})
-		}), /* @__PURE__ */ jsx(ScrollAreaScrollbar, {
-			className: "me-1.5 px-0 py-1",
-			children: /* @__PURE__ */ jsx(ScrollAreaThumb, {})
-		})]
-	});
-}
-//#endregion
-//#region src/components/message-list/message-list-markers.tsx
-function MessageListDateDivider({ children, className, render, ...props }) {
-	const { dateDividerRoot, dateDividerRule, dateDividerChip } = messageList();
-	const defaultProps = {
-		"data-slot": "message-list-date-divider",
-		className: dateDividerRoot({ className }),
-		children: /* @__PURE__ */ jsxs(Fragment$1, { children: [
-			/* @__PURE__ */ jsx("div", {
-				"aria-hidden": true,
-				className: dateDividerRule()
-			}),
-			/* @__PURE__ */ jsx("span", {
-				className: dateDividerChip(),
-				children
-			}),
-			/* @__PURE__ */ jsx("div", {
-				"aria-hidden": true,
-				className: dateDividerRule()
-			})
-		] })
-	};
-	return useRender({
-		defaultTagName: "div",
-		render,
-		props: mergeProps(defaultProps, props)
-	});
-}
-function MessageListNotice({ className, render, tone = "faint", ...props }) {
-	const { notice } = messageList({ tone });
-	const defaultProps = {
-		"data-slot": "message-list-notice",
-		className: notice({ className })
-	};
-	return useRender({
-		defaultTagName: "div",
-		render,
-		props: mergeProps(defaultProps, props)
-	});
-}
-function MessageListHistoryLimited({ className, render, ...props }) {
-	const { historyLimited } = messageList();
-	const defaultProps = {
-		"data-slot": "message-list-history-limited",
-		className: historyLimited({ className })
-	};
-	return useRender({
-		defaultTagName: "span",
-		render,
-		props: mergeProps(defaultProps, props)
-	});
-}
-//#endregion
 //#region src/components/icon-tile/icon-tile.tsx
 const iconTile = tv({
 	slots: { root: ["inline-flex shrink-0 items-center justify-center", "rounded-sticker [&_svg]:shrink-0"] },
@@ -10049,8 +8087,13 @@ function OtterIndicator({ status, className, ...props }) {
 const table = tv({ slots: {
 	root: ["w-full border-collapse caption-bottom", "font-sans text-callout text-foreground"],
 	header: [],
-	body: ["[&>tr:last-child>td]:border-b-0 [&>tr:last-child>th]:border-b-0", "[&>tr]:hover:bg-fill-pressed"],
-	row: ["aria-selected:bg-info-soft aria-selected:hover:bg-info-soft", "data-[selected=true]:bg-info-soft data-[selected=true]:hover:bg-info-soft"],
+	body: ["[&>tr:last-child>td]:border-b-0 [&>tr:last-child>th]:border-b-0", "[&>tr]:hover:bg-fill-row-hover"],
+	row: [
+		"not-aria-selected:not-data-[selected=true]:data-popup-open:bg-fill-row-open",
+		"not-aria-selected:not-data-[selected=true]:has-data-popup-open:bg-fill-row-open",
+		"aria-selected:bg-info-soft aria-selected:hover:bg-info-soft",
+		"data-[selected=true]:bg-info-soft data-[selected=true]:hover:bg-info-soft"
+	],
 	head: [
 		"text-left whitespace-nowrap",
 		"border-b border-line-hairline px-3 py-2",
@@ -10411,7 +8454,8 @@ const files = tv({ slots: {
 		"group/file-row flex w-full min-w-0 gap-3 px-3",
 		"transition-colors",
 		"items-center rounded-container border border-line-hairline bg-layer-card py-2.5 pr-1.5 pl-2.5 shadow-none",
-		"[@media(hover:hover)]:has-[[data-slot=file-row-open]:hover]:press-overlay has-[[data-slot=file-row-open]:active]:press-overlay",
+		"[@media(hover:hover)]:has-[[data-slot=file-row-open]:hover]:row-hover-overlay has-[[data-slot=file-row-open]:active]:press-overlay",
+		"has-data-popup-open:row-open-overlay",
 		"has-[[data-slot=file-row-open]:focus-visible]:shadow-focus"
 	],
 	rowOpen: [
@@ -12171,13 +10215,13 @@ const toastStyles = tv({
 			"[&[data-has-icon][data-has-actions]]:grid-cols-[auto_minmax(0,1fr)_auto]"
 		],
 		icon: [
-			"flex size-5 shrink-0 items-center justify-center",
+			"flex h-lh w-5 shrink-0 items-center justify-center",
 			"[&_svg]:shrink-0",
 			"[&_svg]:size-4"
 		],
 		body: ["min-w-0"],
-		title: ["m-0 truncate text-sm/5", "font-normal text-foreground-on-hud"],
-		description: ["m-0 text-sm/5", "text-foreground-on-hud/70"],
+		title: ["m-0 truncate text-callout", "font-normal text-foreground-on-hud"],
+		description: ["m-0 text-callout", "text-foreground-on-hud/70"],
 		actions: ["flex items-center justify-end", "gap-4"],
 		progress: [
 			"pointer-events-none absolute h-[3px] origin-left",
@@ -16241,8 +14285,10 @@ function VirtualList(props) {
 		if (!isReplay) {
 			clearPendingScrollTask();
 			if (behavior === "instant") {
+				const item = items[index];
 				pendingScrollTaskRef.current = {
 					type: "index",
+					key: item === void 0 ? void 0 : getKey(item),
 					index,
 					debounce: ensureVisibleOnly
 				};
@@ -16382,11 +14428,13 @@ function VirtualList(props) {
 	* `scrollTop` for the item from the DOM, set it, and update the range. If the range changes, the rows it
 	* brings into view are rendered (in a microtask, still before the browser paints) and the next step runs
 	* from the render callback (a layout effect) to measure them; the jump is done when a step finds the item
-	* mounted, no size changed and `scrollTop` already right. Bounded by `MAX_ALIGN_STEPS`.
+	* mounted, no size changed and `scrollTop` already right. Bounded by `MAX_ALIGN_STEPS`. The item is
+	* found by its key at every step: rows inserted above it in between move its index.
 	*/
-	const alignStep = useEventCallback((run, index, align, scrollMarginTop, scrollMarginBottom, remaining) => {
+	const alignStep = useEventCallback((run, key, align, scrollMarginTop, scrollMarginBottom, remaining) => {
 		const listEl = listElRef.current;
-		if (listEl == null || run !== alignRunRef.current || index >= items.length) return;
+		const index = keyToIndexRef.current.get(key);
+		if (listEl == null || run !== alignRunRef.current || index === void 0) return;
 		const sizesChanged = measureMountedItems();
 		const { top: itemTop, size: itemSize, measured } = getItemExtent(index);
 		const viewportHeight = listEl.clientHeight;
@@ -16408,7 +14456,7 @@ function VirtualList(props) {
 		viewportRef.current.scrollTop = listEl.scrollTop;
 		if (!moved && !sizesChanged && measured || remaining <= 0) return;
 		updateRange("listScroll", true, () => {
-			alignStep(run, index, align, scrollMarginTop, scrollMarginBottom, remaining - 1);
+			alignStep(run, key, align, scrollMarginTop, scrollMarginBottom, remaining - 1);
 		});
 	});
 	/**
@@ -16441,13 +14489,16 @@ function VirtualList(props) {
 			});
 			return;
 		}
+		const item = items[index];
+		if (item === void 0) return;
+		const key = getKey(item);
 		const smooth = behavior === "smooth";
 		if (!isReplay) {
 			clearPendingScrollTask();
 			if (!smooth) {
 				pendingScrollTaskRef.current = {
 					type: "align",
-					index,
+					key,
 					align,
 					scrollMarginTop,
 					scrollMarginBottom
@@ -16475,7 +14526,7 @@ function VirtualList(props) {
 			updateRange("listScroll", true, null);
 			return;
 		}
-		alignStep(run, index, align, scrollMarginTop, scrollMarginBottom, MAX_ALIGN_STEPS);
+		alignStep(run, key, align, scrollMarginTop, scrollMarginBottom, MAX_ALIGN_STEPS);
 	});
 	const scrollTo = useEventCallback((options, topIfNumber) => {
 		if (typeof options == "number") {
@@ -16510,9 +14561,14 @@ function VirtualList(props) {
 		if (task) {
 			if (task.type === "top") scrollToPosition(0, 0, "instant");
 			else if (task.type === "bottom") scrollToPosition(0, listElRef.current?.scrollHeight || 2e9, "instant");
-			else if (task.type === "index") scrollToIndex(task.index, "instant", task.debounce, true);
-			else if (task.type === "align") scrollToAligned(task.index, task.align, "instant", true, task.scrollMarginTop, task.scrollMarginBottom);
-			else if (task.type === "custom") task.task();
+			else if (task.type === "index") {
+				const index = task.key === void 0 ? task.index : keyToIndexRef.current.get(task.key);
+				if (index !== void 0) scrollToIndex(index, "instant", task.debounce, true);
+			} else if (task.type === "align") {
+				const index = keyToIndexRef.current.get(task.key);
+				if (index === void 0) return;
+				scrollToAligned(index, task.align, "instant", true, task.scrollMarginTop, task.scrollMarginBottom);
+			} else if (task.type === "custom") task.task();
 		}
 	});
 	/**
@@ -16541,7 +14597,8 @@ function VirtualList(props) {
 		rangeRef.current = renderedRange;
 		const listEl = listElRef.current;
 		const index = keyToIndexRef.current.get(anchor.key);
-		if (listEl == null || index === void 0 || pendingScrollTaskRef.current?.type !== void 0) return;
+		const pendingType = pendingScrollTaskRef.current?.type;
+		if (listEl == null || index === void 0 || pendingType !== void 0 && pendingType !== "index" && pendingType !== "align") return;
 		applyLayoutStyles(startIndex);
 		const diff = fenwickTree.sum(index) + anchor.delta + getRowsTop() - (listEl.scrollTop + compensationYRef.current);
 		if (diff !== 0 && !addCompensation(diff)) listEl.scrollBy(0, diff);
@@ -16732,8 +14789,12 @@ function VirtualList(props) {
 	});
 	/**
 	* Tracks the row holding focus: focusin finds the row the target is in (the visible-items element's
-	* child it is inside); focusout to outside the list releases it, and the range is updated so the row
-	* unmounts if it is out of the range.
+	* child it is inside); focusout to an element outside the list releases it, and the range is updated so
+	* the row unmounts if it is out of the range. A focusout to nowhere (`relatedTarget` null) does not
+	* release it: switching to another window or tab fires one while the element keeps focus, and the row
+	* must still be there when the person comes back. When focus did go to the page instead (a click on
+	* nothing focusable), the next range update finds `document.activeElement` outside the list and
+	* releases the row then.
 	*/
 	const handleFocusIn = useEventCallback((event) => {
 		const visibleItemsEl = getVisibleItemsEl();
@@ -16744,7 +14805,7 @@ function VirtualList(props) {
 	const handleFocusOut = useEventCallback((event) => {
 		const listEl = listElRef.current;
 		const next = event.relatedTarget;
-		if (listEl === null || next instanceof Node && listEl.contains(next)) return;
+		if (listEl === null || next === null || next instanceof Node && listEl.contains(next)) return;
 		if (focusedKeyRef.current !== null) {
 			focusedKeyRef.current = null;
 			updateRange("listScroll", true, null);
@@ -17685,7 +15746,8 @@ const inboxItem = tv({
 			"[[data-slot=inbox-item]+&]:before:block has-data-[slot=inbox-item-selection]:before:left-11",
 			"has-data-[slot=inbox-item-leading]:before:left-16",
 			"has-data-[slot=inbox-item-selection]:has-data-[slot=inbox-item-leading]:before:left-23",
-			"hover:bg-fill-pressed",
+			"hover:bg-fill-row-hover",
+			"not-data-[active=true]:data-popup-open:bg-fill-row-open not-data-[active=true]:has-data-popup-open:bg-fill-row-open",
 			"data-[active=true]:bg-info-soft data-[active=true]:hover:bg-info-soft",
 			"data-disabled:pointer-events-none data-disabled:hover:bg-transparent",
 			"has-[[data-slot=inbox-item-open]:focus-visible]:keyboard:inset-ring-2 has-[[data-slot=inbox-item-open]:focus-visible]:keyboard:inset-ring-foreground",
@@ -18170,7 +16232,8 @@ const searchEntity = tv({ slots: {
 		"relative rounded-none border-0 bg-transparent px-4 py-3 text-foreground shadow-none",
 		"max-md:min-h-16",
 		"not-first:before:absolute not-first:before:top-0 not-first:before:right-0 not-first:before:left-[55px] not-first:before:border-t not-first:before:border-line-hairline",
-		"hover:bg-fill-pressed active:bg-fill-pressed",
+		"hover:bg-fill-row-hover active:bg-fill-pressed",
+		"not-data-[selected=true]:data-popup-open:bg-fill-row-open",
 		"disabled:cursor-default disabled:hover:bg-transparent disabled:active:bg-transparent",
 		"data-[selected=true]:bg-brand-soft data-[selected=true]:hover:bg-brand-soft",
 		"outline-none focus-visible:keyboard:inset-ring-2 focus-visible:keyboard:inset-ring-foreground"
@@ -18309,7 +16372,8 @@ const searchMessage = tv({ slots: {
 		"w-full text-left transition-colors",
 		"relative block rounded-none border-0 bg-transparent px-4 py-3 text-foreground shadow-none",
 		"not-first:before:absolute not-first:before:top-0 not-first:before:right-0 not-first:before:left-4 not-first:before:border-t not-first:before:border-line-hairline",
-		"hover:bg-fill-pressed active:bg-fill-pressed",
+		"hover:bg-fill-row-hover active:bg-fill-pressed",
+		"not-data-[selected=true]:data-popup-open:bg-fill-row-open",
 		"disabled:cursor-default disabled:hover:bg-transparent disabled:active:bg-transparent",
 		"data-[selected=true]:bg-brand-soft data-[selected=true]:hover:bg-brand-soft",
 		"outline-none focus-visible:keyboard:inset-ring-2 focus-visible:keyboard:inset-ring-foreground"