import { cn } from "./cn.mjs";
import { S as tv, _ as defaultNativeButton, a as DialogDescription, b as useTheme, c as DialogNav, d as DialogSurface, f as DialogTitle, g as Spinner, h as buttonVariants, i as DialogContent, l as DialogOverlay, m as Button, n as DialogBody, o as DialogFooter, p as DialogTrigger, r as DialogClose, s as DialogHeader, t as Dialog, u as DialogPortal, v as resolveThemeScopeProps, x as ThemeStateContext, y as useThemeScopeProps } from "./dialog-ndjYGy38.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, isValidElement, use, useCallback, useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
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 { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
import { Drawer as Drawer$1 } from "@base-ui/react/drawer";
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 { 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 { 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";
import { Input as Input$1 } from "@base-ui/react/input";
import { Field as Field$1 } from "@base-ui/react/field";
import { Combobox as Combobox$1 } from "@base-ui/react/combobox";
import { Select as Select$1 } from "@base-ui/react/select";
import { Radio } from "@base-ui/react/radio";
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, KeyboardSensor, PointerSensor, TouchSensor, closestCenter, pointerWithin, useDraggable, useDroppable, useSensor, useSensors } from "@dnd-kit/core";
import { SortableContext, arrayMove, defaultAnimateLayoutChanges, horizontalListSortingStrategy, sortableKeyboardCoordinates, useSortable, verticalListSortingStrategy } from "@dnd-kit/sortable";
import { CSS } from "@dnd-kit/utilities";
import { Toast } from "@base-ui/react/toast";
import { Tabs as Tabs$1 } from "@base-ui/react/tabs";
import { Separator as Separator$1 } from "@base-ui/react/separator";
import { Group, Panel as Panel$1, Separator as Separator$2 } from "react-resizable-panels";
//#region src/components/alert-dialog/alert-dialog.tsx
const alertDialog = tv({ slots: {
	overlay: ["fixed inset-0 z-50 bg-layer-backdrop"],
	content: [
		"fixed top-1/2 left-1/2 z-50 grid w-[calc(100%-2rem)] max-w-[400px] -translate-1/2 outline-none",
		"overflow-clip rounded-dialog bg-layer-popover text-foreground",
		"shadow-raft-float ring-1 ring-line-seam"
	],
	header: ["grid grid-cols-[minmax(0,1fr)_max-content] items-center min-w-0", "gap-2 px-5 pt-5"],
	body: [
		"min-w-0",
		"px-5 pt-1.5 pb-5 first:pt-5",
		"font-sans text-subhead text-foreground-muted"
	],
	footer: ["flex items-center justify-end", "gap-2 px-5 pb-5 first:pt-5 [[data-slot=alert-dialog-header]+&]:pt-5"],
	title: ["m-0 min-w-0 text-foreground", "font-sans text-headline font-bold"],
	description: ["m-0", "font-sans text-subhead text-foreground-muted"]
} });
function AlertDialog(props) {
	return /* @__PURE__ */ jsx(Dialog$1.Root, {
		"data-slot": "alert-dialog",
		...props
	});
}
function AlertDialogTrigger(props) {
	return /* @__PURE__ */ jsx(Dialog$1.Trigger, {
		"data-slot": "alert-dialog-trigger",
		...props
	});
}
function AlertDialogPortal(props) {
	return /* @__PURE__ */ jsx(Dialog$1.Portal, {
		"data-slot": "alert-dialog-portal",
		...useThemeScopeProps(props)
	});
}
function AlertDialogClose({ className, variant, size, children, "aria-label": ariaLabel, ...props }) {
	return /* @__PURE__ */ jsx(Dialog$1.Close, {
		"data-slot": "alert-dialog-close",
		render: /* @__PURE__ */ jsx(Button, {
			variant: variant ?? "ghost",
			size: size ?? "icon-md",
			"aria-label": ariaLabel ?? "Close",
			className: cn("-my-1.5 -mr-1.5", className)
		}),
		...props,
		children: children ?? /* @__PURE__ */ jsx(X, { className: "size-4.5" })
	});
}
function AlertDialogOverlay({ className, ...props }) {
	const { overlay } = alertDialog();
	return /* @__PURE__ */ jsx(Dialog$1.Backdrop, {
		"data-slot": "alert-dialog-overlay",
		className: overlay({ className }),
		...props
	});
}
function AlertDialogContent({ className, children, portalProps, overlay, ...props }) {
	const { content } = alertDialog();
	return /* @__PURE__ */ jsxs(AlertDialogPortal, {
		...portalProps,
		children: [overlay === false ? null : /* @__PURE__ */ jsx(AlertDialogOverlay, { ...overlay }), /* @__PURE__ */ jsx(Dialog$1.Popup, {
			"data-slot": "alert-dialog-content",
			className: content({ className }),
			...props,
			role: "alertdialog",
			children
		})]
	});
}
function AlertDialogHeader({ className, ...props }) {
	const { header } = alertDialog();
	return /* @__PURE__ */ jsx("div", {
		"data-slot": "alert-dialog-header",
		className: header({ className }),
		...props
	});
}
function AlertDialogBody({ className, ...props }) {
	const { body } = alertDialog();
	return /* @__PURE__ */ jsx("div", {
		"data-slot": "alert-dialog-body",
		className: body({ className }),
		...props
	});
}
function AlertDialogFooter({ className, ...props }) {
	const { footer } = alertDialog();
	return /* @__PURE__ */ jsx("div", {
		"data-slot": "alert-dialog-footer",
		className: footer({ className }),
		...props
	});
}
function AlertDialogTitle({ className, ...props }) {
	const { title } = alertDialog();
	return /* @__PURE__ */ jsx(Dialog$1.Title, {
		"data-slot": "alert-dialog-title",
		className: title({ className }),
		...props
	});
}
function AlertDialogDescription({ className, ...props }) {
	const { description } = alertDialog();
	return /* @__PURE__ */ jsx(Dialog$1.Description, {
		"data-slot": "alert-dialog-description",
		className: description({ className }),
		...props
	});
}
function AlertDialogAction(props) {
	return /* @__PURE__ */ jsx(Button, {
		"data-slot": "alert-dialog-action",
		...props
	});
}
function AlertDialogCancel({ className, variant, size, ...props }) {
	return /* @__PURE__ */ jsx(Dialog$1.Close, {
		"data-slot": "alert-dialog-cancel",
		render: /* @__PURE__ */ jsx(Button, {
			className,
			variant: variant ?? "ghost",
			size: size ?? "md"
		}),
		...props
	});
}
//#endregion
//#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.
*/
const panelHeadActions = "flex shrink-0 items-center gap-0.5 mr-[-3px] md:mr-px md: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-primary 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-panel 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: {
		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%]"
			] },
			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%]"
			] }
		},
		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))]"] }
		},
		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-raft-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: {
		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"]
			}
		},
		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]"] }
	}]
});
//#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", ...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
		})
	});
}
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 { overlay } = drawer({ snapPoints: hasSnapPoints });
	return /* @__PURE__ */ jsx(Drawer$1.Backdrop, {
		"data-slot": "drawer-overlay",
		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: "div",
		render,
		props: mergeProps(defaultProps, props),
		state: { slot: "drawer-header" }
	});
}
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
	});
}
//#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"
	] },
	variants: {
		appearance: {
			solid: { root: [
				"h-5 min-w-5 justify-center rounded-sticker",
				"font-bold tabular-nums",
				"text-sticker-ink inset-ring-[1.5px] inset-ring-sticker-ink ring-[1.5px] ring-sticker-edge",
				"[&_svg]:size-[13px]",
				"enabled:hover:press-overlay-sticker"
			] },
			soft: { root: ["text-foreground", "enabled:hover:press-overlay"] },
			outline: { root: [
				"font-mono text-mono-meta font-normal",
				"bg-transparent text-foreground-muted inset-ring inset-ring-line-muted",
				"enabled:hover:bg-fill-pressed"
			] }
		},
		variant: {
			default: "",
			primary: "",
			information: "",
			muted: "",
			accent: "",
			success: "",
			warning: "",
			danger: ""
		}
	},
	defaultVariants: {
		appearance: "solid",
		variant: "default"
	},
	compoundVariants: [
		{
			appearance: "solid",
			variant: "default",
			class: { root: "bg-sticker-paper" }
		},
		{
			appearance: "solid",
			variant: "muted",
			class: { root: "bg-inactive" }
		},
		{
			appearance: "solid",
			variant: "primary",
			class: { root: "bg-primary" }
		},
		{
			appearance: "solid",
			variant: "information",
			class: { root: "bg-info" }
		},
		{
			appearance: "solid",
			variant: "accent",
			class: { root: "bg-accent 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-primary-soft" }
		},
		{
			appearance: "soft",
			variant: "information",
			class: { root: "bg-info-soft" }
		},
		{
			appearance: "soft",
			variant: "accent",
			class: { root: "bg-accent-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-primary-strong" }
		},
		{
			appearance: "outline",
			variant: "information",
			class: { root: "text-info-strong" }
		},
		{
			appearance: "outline",
			variant: "accent",
			class: { root: "text-accent-strong" }
		},
		{
			appearance: "outline",
			variant: "success",
			class: { root: "text-success-strong" }
		},
		{
			appearance: "outline",
			variant: "warning",
			class: { root: "text-warning-strong" }
		},
		{
			appearance: "outline",
			variant: "danger",
			class: { root: "text-danger-strong" }
		}
	]
});
function BadgeRoot({ appearance, variant, className, render, ...props }) {
	const resolvedAppearance = appearance ?? "solid";
	const { root } = badge({
		appearance: resolvedAppearance,
		variant
	});
	const defaultProps = { className: root({ className }) };
	return useRender({
		defaultTagName: "span",
		render,
		props: mergeProps(defaultProps, props),
		state: {
			slot: "badge",
			appearance: resolvedAppearance,
			variant
		}
	});
}
function Experimental(props) {
	return /* @__PURE__ */ jsx(BadgeRoot, {
		variant: "success",
		...props,
		children: "Experimental"
	});
}
const Badge = Object.assign(BadgeRoot, { Experimental });
//#endregion
//#region src/components/form-section/form-section.tsx
const formSection = tv({ slots: {
	root: ["flex flex-col gap-3 py-4 first:pt-0", "[[data-slot=form-section]+&]:border-t [[data-slot=form-section]+&]:border-line-muted"],
	head: ["flex min-w-0 flex-col", "gap-0.5"],
	titleRow: ["flex min-w-0 items-center gap-2"],
	title: ["m-0 min-w-0 flex-1", "font-sans text-footnote font-bold text-foreground-muted"],
	description: ["m-0", "font-sans text-footnote text-foreground-hint"]
} });
/**
* One part of a bigger form (a wide dialog or sheet): a small heading with
* its status and a line on what it is for, then its fields. Consecutive
* sections are separated by a hairline.
*/
function FormSection({ className, render, title, status, description, children, ...props }) {
	const slots = formSection();
	return useRender({
		defaultTagName: "section",
		render,
		props: mergeProps({
			"data-slot": "form-section",
			className: slots.root({ className }),
			children: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("div", {
				"data-slot": "form-section-head",
				className: slots.head(),
				children: [/* @__PURE__ */ jsxs("div", {
					className: slots.titleRow(),
					children: [/* @__PURE__ */ jsx("h3", {
						"data-slot": "form-section-title",
						className: slots.title(),
						children: title
					}), status ? /* @__PURE__ */ jsx(Badge, {
						appearance: "soft",
						variant: "muted",
						className: "shrink-0",
						"data-slot": "form-section-status",
						children: status
					}) : null]
				}), description ? /* @__PURE__ */ jsx("p", {
					"data-slot": "form-section-description",
					className: slots.description(),
					children: description
				}) : null]
			}), children] })
		}, 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-layer-hud-foreground",
			"font-sans font-medium",
			"shadow-raft-float",
			"has-[[data-slot=kbd]]:py-1 has-[[data-slot=kbd]]:pr-2.5"
		],
		body: [
			"block min-w-0 text-[13px] leading-4.5 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
	});
}
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 formatLength(val) {
	if (typeof val === "number") return `${val}px`;
	return val;
}
//#endregion
//#region src/components/float-button/float-button.tsx
const FloatButtonGroupContext = createContext(null);
function FloatButton({ icon, description, tooltip, variant = "default", shape: shapeProp, size: sizeProp, position, side, offset, className, style, children, nativeButton: nativeButtonProp, render, ...props }) {
	const groupContext = useContext(FloatButtonGroupContext);
	const hasText = Boolean(children);
	const shape = shapeProp ?? groupContext?.shape ?? "circle";
	const size = sizeProp ?? groupContext?.size ?? "md";
	const positionStyles = resolvePositionStyles({
		position,
		side,
		offset,
		style
	});
	const nativeButton = nativeButtonProp ?? defaultNativeButton(render) ?? true;
	const rootClasses = [
		"r-float-button",
		`r-float-button--${size}`,
		`r-float-button--${shape}`,
		`r-float-button--${variant}`,
		hasText && "r-float-button--with-text",
		description && "r-float-button--with-desc",
		className
	].filter(Boolean).join(" ");
	const contentClasses = ["r-float-button__content", description && "r-float-button__content--with-desc"].filter(Boolean).join(" ");
	const renderedButton = /* @__PURE__ */ jsx(Button$1, {
		...mergeProps({
			type: nativeButton ? "button" : void 0,
			"data-slot": "float-button",
			"data-shape": shape,
			"data-size": size,
			"data-variant": variant,
			"data-with-text": hasText ? "true" : void 0,
			className: rootClasses,
			style: positionStyles
		}, props),
		render,
		children: /* @__PURE__ */ jsxs("span", {
			"data-slot": "float-button-content",
			className: contentClasses,
			children: [
				icon,
				children ? /* @__PURE__ */ jsx("span", {
					"data-slot": "float-button-text",
					className: "r-float-button__text",
					children
				}) : null,
				description ? /* @__PURE__ */ jsx("span", {
					"data-slot": "float-button-description",
					className: "r-float-button__desc",
					children: description
				}) : null
			]
		})
	});
	if (tooltip) return /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: renderedButton }), /* @__PURE__ */ jsx(TooltipContent, { children: tooltip })] });
	return renderedButton;
}
function FloatButtonGroup({ direction = "vertical", attached = false, shape = "circle", size, position, side, offset, gap, className, style, render, children, ...props }) {
	const combinedStyle = {
		...resolvePositionStyles({
			position,
			side,
			offset,
			style
		}),
		...gap !== void 0 && !attached ? {
			"--dsl-float-button-group-gap": typeof gap === "number" ? `${gap}px` : gap,
			gap: typeof gap === "number" ? `${gap}px` : gap
		} : {},
		...style
	};
	const rootClasses = [
		"r-float-button-group",
		`r-float-button-group--${direction}`,
		attached && "r-float-button-group--attached",
		`r-float-button-group--${shape}`,
		className
	].filter(Boolean).join(" ");
	const defaultProps = {
		role: "group",
		"data-slot": "float-button-group",
		"data-direction": direction,
		"data-attached": attached ? "true" : void 0,
		"data-shape": shape,
		className: rootClasses,
		style: combinedStyle
	};
	const contextValue = useMemo(() => ({
		shape,
		size
	}), [shape, size]);
	const groupContent = /* @__PURE__ */ jsx(FloatButtonGroupContext.Provider, {
		value: contextValue,
		children
	});
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps(defaultProps, {
			...props,
			children: groupContent
		})
	});
}
//#endregion
//#region src/components/card/card.recipe.ts
const card = tv({
	slots: {
		root: ["flex min-w-0 flex-col overflow-hidden", "text-foreground"],
		header: [
			"group/card-header grid min-w-0 auto-rows-min grid-cols-1 items-start gap-x-4 gap-y-1",
			"has-[>[data-slot=card-leading]]:grid-cols-[auto_minmax(0,1fr)]",
			"has-[>[data-slot=card-trailing]]:grid-cols-[minmax(0,1fr)_auto]",
			"has-[>[data-slot=card-leading]]:has-[>[data-slot=card-trailing]]:grid-cols-[auto_minmax(0,1fr)_auto]",
			"has-[>[data-slot=card-leading]]:[--card-text-col:2]",
			"has-[>[data-slot=card-leading]]:[--card-trailing-col:3]"
		],
		title: [
			"row-start-1 min-w-0",
			"col-start-(--card-text-col,1)",
			"font-sans text-card-title font-card-title text-foreground"
		],
		leading: [
			"col-start-1 row-span-2 row-start-1",
			"flex shrink-0 items-center self-start",
			"[&>svg]:size-4 [&>svg]:shrink-0",
			"min-h-(--card-title-line-height)"
		],
		description: [
			"row-start-2 min-w-0",
			"col-start-(--card-text-col,1)",
			"font-sans text-callout text-pretty text-foreground-muted"
		],
		trailing: ["row-start-1 col-start-(--card-trailing-col,2)", "flex shrink-0 items-center self-center justify-self-end"],
		content: ["min-w-0"],
		footer: [
			"flex min-w-0 gap-2",
			"flex-nowrap items-center",
			"font-sans text-caption text-foreground-hint",
			"[&>svg]:size-3.5 [&>svg]:shrink-0",
			"[&>:not(svg)]:min-w-0"
		]
	},
	variants: { variant: {
		default: {
			root: ["rounded-container border border-line-muted bg-layer-card", "shadow-none"],
			header: ["p-4 has-[+[data-slot=card-content]]:pb-0"],
			content: ["p-4"],
			footer: ["border-t border-line-muted px-4 py-3"]
		},
		/** A selectable option INSIDE a form, not a panel on top of one: it sits
		*  in the control plane, and its title drops from the card-title scale
		*  to the field scale so it cannot outrank the field label above it. */
		option: {
			root: ["rounded-control border-[1.5px] border-line-field bg-layer-card", "shadow-none"],
			header: ["gap-x-3 p-3"],
			content: ["px-3 pb-3"],
			title: ["font-sans text-callout font-semibold"],
			description: ["font-sans text-footnote text-foreground-muted"]
		},
		inset: {
			root: ["rounded-container border border-line-muted bg-layer-card", "shadow-none"],
			header: ["px-4 py-3"],
			content: ["border-t border-line-muted p-4 first:border-t-0"],
			footer: ["border-t border-line-muted px-4 py-3"]
		}
	} },
	defaultVariants: { variant: "default" }
});
//#endregion
//#region src/components/card/card.tsx
const CardVariantContext = createContext("default");
function useCardRecipe() {
	const variant = use(CardVariantContext);
	return card({ variant });
}
function Card({ className, render, variant = "default", ...props }) {
	const { root } = card({ variant });
	const defaultProps = {
		"data-slot": "card",
		"data-variant": variant,
		className: root({ className })
	};
	const element = useRender({
		defaultTagName: "div",
		render,
		props: mergeProps(defaultProps, props)
	});
	return /* @__PURE__ */ jsx(CardVariantContext, {
		value: variant,
		children: element
	});
}
function CardHeader({ className, render, ...props }) {
	const { header } = useCardRecipe();
	const defaultProps = {
		"data-slot": "card-header",
		className: header({ className })
	};
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function CardTitle({ className, render, ...props }) {
	const { title } = useCardRecipe();
	const defaultProps = {
		"data-slot": "card-title",
		className: title({ className })
	};
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function CardLeading({ className, render, ...props }) {
	const { leading } = useCardRecipe();
	const defaultProps = {
		"data-slot": "card-leading",
		className: leading({ className })
	};
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function CardDescription({ className, render, ...props }) {
	const { description } = useCardRecipe();
	const defaultProps = {
		"data-slot": "card-description",
		className: description({ className })
	};
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function CardTrailing({ className, render, ...props }) {
	const { trailing } = useCardRecipe();
	const defaultProps = {
		"data-slot": "card-trailing",
		className: trailing({ className })
	};
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function CardContent({ className, render, ...props }) {
	const { content } = useCardRecipe();
	const defaultProps = {
		"data-slot": "card-content",
		className: content({ className })
	};
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function CardFooter({ className, render, ...props }) {
	const { footer } = useCardRecipe();
	const defaultProps = {
		"data-slot": "card-footer",
		className: footer({ className })
	};
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps(defaultProps, props)
	});
}
//#endregion
//#region src/components/status/status.tsx
const status = tv({
	slots: { root: [
		"relative inline-block shrink-0",
		"bg-(--status-color)",
		"rounded-[2px] border-[1.5px] border-sticker-ink"
	] },
	variants: {
		variant: {
			default: { root: "[--status-color:var(--presence-offline)]" },
			primary: { root: "[--status-color:var(--color-primary-400)]" },
			information: { root: "[--status-color:var(--color-info)]" },
			muted: { root: "[--status-color:var(--color-secondary-400)]" },
			accent: { root: "[--status-color:var(--color-accent-400)]" },
			success: { root: "[--status-color:var(--color-success)]" },
			warning: { root: "[--status-color:var(--color-warning)]" },
			danger: { root: "[--status-color:var(--color-danger)]" }
		},
		size: {
			xs: { root: "size-1.5 rounded-[1px] border" },
			sm: { root: "size-2" },
			md: { root: "size-[9px]" },
			lg: { root: "size-[11px]" }
		}
	},
	defaultVariants: {
		size: "md",
		variant: "default"
	}
});
function StatusRoot({ size, variant, className, render, ...props }) {
	const { root } = status({
		size,
		variant
	});
	const defaultProps = { className: root({ className }) };
	return useRender({
		defaultTagName: "span",
		render,
		props: mergeProps(defaultProps, props),
		state: {
			slot: "status",
			variant,
			size
		}
	});
}
const Status = StatusRoot;
//#endregion
//#region src/components/app-rail/app-rail.recipe.ts
const appRail = tv({ slots: {
	root: [
		"flex size-full  flex-col items-center select-none",
		"w-[calc(var(--shell-header-height,56px)+1px)] border-r border-line-seam",
		"bg-layer-frame text-foreground-on-frame",
		"[@media(max-height:600px)]:w-[49px]"
	],
	header: [
		"relative flex w-full shrink-0 items-center justify-center",
		"h-(--shell-header-height,56px) border-b border-line-seam",
		"[@media(max-height:600px)]:h-12"
	],
	nav: [
		"flex w-full flex-1 flex-col items-center py-2",
		"gap-1.5 pt-2.5 pb-2 first:pt-2",
		"[@media(max-height:600px)]:pt-1.5 [@media(max-height:600px)]:first:pt-1.5"
	],
	footer: ["flex w-full shrink-0 flex-col items-center justify-center", "h-auto gap-1.5 pb-2 [@media(max-height:600px)]:pb-1.5"],
	item: [
		"relative inline-flex shrink-0 items-center justify-center",
		"outline-none",
		"disabled:pointer-events-none disabled:opacity-45",
		"[&_svg]:shrink-0",
		"size-10 rounded-control border-[1.5px] border-transparent",
		"text-foreground-on-frame [&_svg]:size-5",
		"hover:bg-fill-frame-pressed active:bg-fill-frame-pressed",
		"data-[selected=true]:border-line-frame-active data-[selected=true]:bg-layer-frame-active",
		"data-[selected=true]:ring-[1.5px] data-[selected=true]:ring-sticker-edge",
		"data-[selected=true]:text-foreground-on-frame-active",
		"focus-visible:shadow-raft-focus",
		"[@media(max-height:600px)]:size-9"
	],
	itemIcon: ["relative inline-flex items-center justify-center"],
	itemLabel: ["sr-only"],
	itemBadge: [
		"absolute -right-1 -top-1 inline-flex items-center justify-center",
		"h-4 min-w-4 rounded-sticker px-1",
		"bg-accent-400 text-sticker-ink inset-ring-[1.5px] inset-ring-sticker-ink ring-[1.5px] ring-sticker-edge",
		"font-mono text-[10px] font-bold leading-4 tabular-nums"
	],
	itemIndicator: ["pointer-events-none absolute", "-top-1 -right-1"]
} });
//#endregion
//#region src/components/app-rail/app-rail.tsx
function AppRailRoot({ className, render, ...props }) {
	const { root } = appRail();
	const defaultProps = {
		"data-slot": "app-rail-root",
		className: root({ className })
	};
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function AppRailHeader({ className, render, ...props }) {
	const { header } = appRail();
	const defaultProps = {
		"data-slot": "app-rail-header",
		className: header({ className })
	};
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function AppRailNav({ className, render, ...props }) {
	const { nav } = appRail();
	const defaultProps = {
		"data-slot": "app-rail-nav",
		className: nav({ className })
	};
	return useRender({
		defaultTagName: "nav",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function AppRailItem({ nativeButton = true, selected, disabled, className, render, ...props }) {
	const { item } = appRail();
	const defaultProps = {
		type: nativeButton ? "button" : void 0,
		disabled: nativeButton ? disabled : void 0,
		"aria-pressed": nativeButton ? selected : void 0,
		"data-slot": "app-rail-item",
		"data-selected": selected ? "true" : void 0,
		"data-disabled": disabled ? "true" : void 0,
		className: item({ className })
	};
	return useRender({
		render: render ?? /* @__PURE__ */ jsx(Button$1, {}),
		props: mergeProps(defaultProps, props)
	});
}
function AppRailItemIcon({ className, render, ...props }) {
	const { itemIcon } = appRail();
	const defaultProps = {
		"data-slot": "app-rail-item-icon",
		className: itemIcon({ className })
	};
	return useRender({
		defaultTagName: "span",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function AppRailItemAttention({ title }) {
	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(AppRailItemIndicator, { "aria-hidden": true }), title ? /* @__PURE__ */ jsx("span", {
		className: "sr-only",
		children: title
	}) : null] });
}
function AppRailItemLabel({ className, render, ...props }) {
	const { itemLabel } = appRail();
	const defaultProps = {
		"data-slot": "app-rail-item-label",
		className: itemLabel({ className })
	};
	return useRender({
		defaultTagName: "span",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function AppRailItemBadge({ className, render, ...props }) {
	const { itemBadge } = appRail();
	const defaultProps = {
		"data-slot": "app-rail-item-badge",
		className: itemBadge({ className })
	};
	return useRender({
		defaultTagName: "span",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function AppRailItemIndicator({ className, size = "sm", variant, ...props }) {
	const { itemIndicator } = appRail();
	return /* @__PURE__ */ jsx(Status, {
		"aria-hidden": true,
		size,
		variant: variant ?? "accent",
		"data-slot": "app-rail-item-indicator",
		className: itemIndicator({ className }),
		...props
	});
}
function AppRailFooter({ className, render, ...props }) {
	const { footer } = appRail();
	const defaultProps = {
		"data-slot": "app-rail-footer",
		className: footer({ className })
	};
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps(defaultProps, props)
	});
}
//#endregion
//#region src/lib/use-copy-to-clipboard.ts
function legacyCopy(value) {
	try {
		const area = document.createElement("textarea");
		area.value = value;
		area.setAttribute("readonly", "");
		area.style.position = "fixed";
		area.style.top = "0";
		area.style.opacity = "0";
		document.body.appendChild(area);
		area.select();
		const ok = document.execCommand("copy");
		document.body.removeChild(area);
		return ok;
	} catch {
		return false;
	}
}
async function writeClipboard(value) {
	try {
		if (navigator.clipboard?.writeText) {
			await navigator.clipboard.writeText(value);
			return true;
		}
	} catch {}
	return legacyCopy(value);
}
function useCopyToClipboard({ timeout = 1400 } = {}) {
	const [copied, setCopied] = useState(false);
	const timerRef = useRef(null);
	const clear = useCallback(() => {
		if (timerRef.current !== null) {
			clearTimeout(timerRef.current);
			timerRef.current = null;
		}
	}, []);
	const reset = useCallback(() => {
		clear();
		setCopied(false);
	}, [clear]);
	useEffect(() => clear, [clear]);
	return {
		copied,
		copyText: useCallback(async (value) => {
			if (!await writeClipboard(value)) throw new Error("copy_failed");
			setCopied(true);
			clear();
			timerRef.current = setTimeout(() => {
				timerRef.current = null;
				setCopied(false);
			}, timeout);
		}, [clear, timeout]),
		reset
	};
}
//#endregion
//#region src/components/copyable-code/copyable-code.tsx
const copyableCode = tv({
	slots: {
		root: ["group/copyable-code flex w-full min-w-0 items-center gap-2"],
		code: [
			"min-w-0 flex-1 font-mono",
			"rounded-control border border-line-muted bg-layer-code",
			"text-mono-code text-foreground"
		],
		codeInner: ["block w-full min-w-0 max-w-full break-all"],
		action: [
			"shrink-0",
			"**:data-[slot=button]:transition-[color,background-color,box-shadow]",
			"**:data-[slot=button]:duration-150 [&_[data-slot=button]]:ease-out"
		],
		iconSwap: [
			"relative inline-grid",
			"**:data-[slot=copyable-code-icon]:col-start-1 **:data-[slot=copyable-code-icon]:row-start-1",
			"**:data-[slot=copyable-code-icon]:origin-center",
			"**:data-[slot=copyable-code-icon]:transition-[opacity,filter,scale]",
			"**:data-[slot=copyable-code-icon]:duration-170",
			"**:data-[slot=copyable-code-icon]:ease-[cubic-bezier(0.16,1,0.3,1)]",
			"**:data-[slot=copyable-code-icon]:will-change-[opacity,filter,scale]",
			"motion-reduce:**:data-[slot=copyable-code-icon]:transition-none",
			"data-[state=idle]:**:data-[icon=copy]:scale-100 data-[state=idle]:**:data-[icon=copy]:opacity-100 data-[state=idle]:[&_[data-icon=copy]]:blur-0",
			"data-[state=idle]:**:data-[icon=check]:scale-[0.72] data-[state=idle]:**:data-[icon=check]:opacity-0 data-[state=idle]:**:data-[icon=check]:blur-[1px]",
			"data-[state=copied]:**:data-[icon=check]:scale-100 data-[state=copied]:**:data-[icon=check]:opacity-100 data-[state=copied]:[&_[data-icon=check]]:blur-0",
			"data-[state=copied]:**:data-[icon=copy]:scale-[0.72] data-[state=copied]:**:data-[icon=copy]:opacity-0 data-[state=copied]:**:data-[icon=copy]:blur-[1px]",
			"size-4",
			"**:data-[slot=copyable-code-icon]:size-4 **:data-[slot=copyable-code-icon]:stroke-2"
		]
	},
	variants: { size: {
		sm: { code: ["px-3 leading-5", "py-[5px]"] },
		md: { code: ["px-3 leading-5", "min-h-10 py-[9px]"] }
	} },
	defaultVariants: { size: "md" }
});
const CopyableCodeContext = createContext(null);
function useCopyableCode(part) {
	const context = useContext(CopyableCodeContext);
	if (!context) throw new Error(`${part} must be used inside CopyableCodeRoot.`);
	return context;
}
function CopyableCodeRoot({ copied, onCopy, onError, size = "md", className, ...props }) {
	const { root } = copyableCode({ size });
	const { copied: clipboardCopied, copyText } = useCopyToClipboard({ timeout: 1400 });
	const effectiveCopied = copied ?? clipboardCopied;
	const copyValue = useCallback(async (value) => {
		try {
			await copyText(value);
		} catch (error) {
			onError?.(error instanceof Error ? error : new Error(String(error)));
			return;
		}
		await onCopy?.(value);
	}, [
		copyText,
		onCopy,
		onError
	]);
	const context = useMemo(() => ({
		copied: effectiveCopied,
		copyValue,
		size
	}), [
		copyValue,
		effectiveCopied,
		size
	]);
	return /* @__PURE__ */ jsx(CopyableCodeContext.Provider, {
		value: context,
		children: /* @__PURE__ */ jsx("div", {
			"data-slot": "copyable-code-root",
			"data-size": size,
			"data-state": effectiveCopied ? "copied" : "idle",
			className: root({ className }),
			...props
		})
	});
}
function CopyableCode({ children, className, truncate, ...props }) {
	const { size } = useCopyableCode("CopyableCode");
	const { code, codeInner } = copyableCode({ size });
	const scrollClassName = "overflow-x-auto overflow-y-hidden break-normal whitespace-nowrap text-clip [scrollbar-width:none] [&::-webkit-scrollbar]:hidden";
	return /* @__PURE__ */ jsx("code", {
		"data-slot": "copyable-code",
		"data-truncate": truncate ? "true" : void 0,
		className: code({ className }),
		...props,
		children: /* @__PURE__ */ jsx("span", {
			"data-slot": "copyable-code-inner",
			className: codeInner({ className: [truncate && scrollClassName] }),
			children
		})
	});
}
function CopyableCodeAction({ children, buttonClassName, className, onClick, size, variant, ...props }) {
	const { copied, copyValue, size: codeSize } = useCopyableCode("CopyableCodeAction");
	const { action } = copyableCode();
	const accessibleLabel = copied ? "Copied code" : "Copy code";
	const buttonSize = size ?? (codeSize === "md" ? "icon-md" : "icon-sm");
	const buttonVariant = variant ?? "ghost";
	const handleClick = useCallback(async (event) => {
		const value = event.currentTarget.closest("[data-slot=\"copyable-code-root\"]")?.querySelector("[data-slot=\"copyable-code\"]")?.textContent ?? "";
		await copyValue(value);
		onClick?.(event);
	}, [copyValue, onClick]);
	return /* @__PURE__ */ jsx("span", {
		"data-slot": "copyable-code-action",
		className: action({ className }),
		children: /* @__PURE__ */ jsx(Button, {
			type: "button",
			variant: buttonVariant,
			size: buttonSize,
			"aria-label": props["aria-label"] ?? accessibleLabel,
			"aria-live": "polite",
			onClick: handleClick,
			className: buttonClassName,
			...props,
			children: typeof children === "function" ? children({ copied }) : children ?? /* @__PURE__ */ jsx(CopyableCodeActionIcon, { copied })
		})
	});
}
function CopyableCodeActionIcon({ copied }) {
	const { iconSwap } = copyableCode();
	return /* @__PURE__ */ jsxs("span", {
		"data-slot": "copyable-code-icon-swap",
		"data-state": copied ? "copied" : "idle",
		className: iconSwap(),
		"aria-hidden": true,
		children: [/* @__PURE__ */ jsx(Copy, {
			"data-slot": "copyable-code-icon",
			"data-icon": "copy",
			className: "size-3",
			strokeWidth: 1.75
		}), /* @__PURE__ */ jsx(Check, {
			"data-slot": "copyable-code-icon",
			"data-icon": "check",
			className: "size-3",
			strokeWidth: 1.75
		})]
	});
}
//#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-strong/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-raft-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: [
		"relative flex size-full min-h-0  select-none flex-col",
		"has-[>[data-slot=sidebar-live-activity]_[data-slot=live-agent-activity-bar]]:overflow-clip",
		"bg-layer-canvas-muted text-foreground max-md:bg-layer-panel",
		"border-line-seam md:border-r",
		"md:has-[>[data-slot=sidebar-live-activity]_[data-slot=live-agent-activity-bar]]:[--sidebar-content-bottom:52px]"
	],
	sidebarHeader: [
		"flex items-center",
		"h-(--shell-header-height,56px) shrink-0 gap-2 border-b border-line-seam px-5",
		"bg-layer-canvas-muted text-foreground",
		"max-md:bg-layer-frame max-md:px-4 max-md:text-foreground-on-frame",
		"[@media(max-height:600px)]:h-12"
	],
	sidebarHeaderMask: ["pointer-events-none absolute inset-x-0 top-0 -z-10 hidden"],
	sidebarHeaderMaskLayer: ["absolute inset-x-0 top-0"],
	sidebarHeaderTitle: ["truncate font-bold", "font-sans text-headline text-foreground max-md:text-foreground-on-frame"],
	sidebarGroupLabel: ["px-2 pt-4 pb-1.5", "font-sans text-footnote font-bold normal-case tracking-normal text-foreground-hint"],
	sidebarBody: ["relative flex min-h-0 flex-1 overflow-hidden", "bg-layer-canvas-muted max-md:bg-layer-panel"],
	sidebarContent: ["relative flex min-h-0 min-w-0 flex-1"],
	sidebarViewport: ["size-full min-h-0  flex-1 overflow-x-hidden overflow-y-auto"],
	sidebarContentInner: ["min-h-full min-w-0 w-full px-2", "pt-2 pb-(--sidebar-content-bottom,8px)"],
	sidebarScrollbar: [
		"z-30 flex w-3 justify-center py-1 opacity-0 transition-opacity duration-150",
		"pointer-events-none",
		"data-scrolling:pointer-events-auto data-scrolling:opacity-100 data-scrolling:duration-0"
	],
	sidebarLiveActivity: ["pointer-events-none absolute inset-x-0 max-md:hidden", "bottom-0 z-40"]
} });
//#endregion
//#region src/components/sidebar/sidebar.tsx
function SidebarRoot({ className, render, ...props }) {
	const { sidebarRoot } = sidebarRecipe();
	const defaultProps = {
		"data-slot": "sidebar-root",
		className: sidebarRoot({ className })
	};
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function SidebarHeader({ children, className, render, ...props }) {
	const { sidebarHeader, sidebarHeaderMask, sidebarHeaderMaskLayer } = sidebarRecipe();
	const defaultProps = {
		"data-slot": "sidebar-header",
		className: sidebarHeader({ className }),
		children: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("div", {
			"aria-hidden": true,
			"data-slot": "sidebar-header-mask",
			className: sidebarHeaderMask(),
			children: [
				/* @__PURE__ */ jsx("div", {
					"data-slot": "sidebar-header-mask-layer",
					"data-layer": "solid",
					className: sidebarHeaderMaskLayer()
				}),
				/* @__PURE__ */ jsx("div", {
					"data-slot": "sidebar-header-mask-layer",
					"data-layer": "soft",
					className: sidebarHeaderMaskLayer()
				}),
				/* @__PURE__ */ jsx("div", {
					"data-slot": "sidebar-header-mask-layer",
					"data-layer": "blur",
					className: sidebarHeaderMaskLayer()
				})
			]
		}), children] })
	};
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function SidebarHeaderTitle({ className, render, ...props }) {
	const { sidebarHeaderTitle } = sidebarRecipe();
	const defaultProps = {
		"data-slot": "sidebar-header-title",
		className: sidebarHeaderTitle({ className })
	};
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function SidebarGroupLabel({ className, render, ...props }) {
	const { sidebarGroupLabel } = sidebarRecipe();
	const defaultProps = {
		"data-slot": "sidebar-group-label",
		className: sidebarGroupLabel({ className })
	};
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function SidebarBody({ className, render, ...props }) {
	const { sidebarBody } = sidebarRecipe();
	const defaultProps = {
		"data-slot": "sidebar-body",
		className: sidebarBody({ className })
	};
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps(defaultProps, props)
	});
}
const SIDEBAR_CONTENT_INNER_STYLE = {
	minWidth: 0,
	width: "100%"
};
function SidebarContent({ children, className, render, ...props }) {
	const isMobile = useMobileViewport();
	const { sidebarContent, sidebarContentInner, sidebarScrollbar, sidebarViewport } = sidebarRecipe();
	const nativeViewportProps = {
		"data-slot": "sidebar-content",
		className: sidebarViewport(),
		children: /* @__PURE__ */ jsx("div", {
			className: sidebarContentInner({ className }),
			style: SIDEBAR_CONTENT_INNER_STYLE,
			children
		})
	};
	const nativeViewport = useRender({
		defaultTagName: "div",
		render,
		props: mergeProps(nativeViewportProps, props)
	});
	if (isMobile) return /* @__PURE__ */ jsx("div", {
		"data-slot": "sidebar-native-scroll-area",
		className: sidebarContent(),
		children: nativeViewport
	});
	return /* @__PURE__ */ jsxs(ScrollArea, {
		"data-slot": "sidebar-scroll-area",
		className: sidebarContent(),
		children: [/* @__PURE__ */ jsx(ScrollAreaViewport, {
			...props,
			render,
			"data-slot": "sidebar-content",
			className: sidebarViewport(),
			children: /* @__PURE__ */ jsx(ScrollAreaContent, {
				className: sidebarContentInner({ className }),
				style: SIDEBAR_CONTENT_INNER_STYLE,
				children
			})
		}), /* @__PURE__ */ jsx(ScrollAreaScrollbar, {
			className: sidebarScrollbar(),
			children: /* @__PURE__ */ jsx(ScrollAreaThumb, {})
		})]
	});
}
function SidebarLiveActivity({ children, className, render, ...props }) {
	const { sidebarLiveActivity } = sidebarRecipe();
	const defaultProps = {
		"data-slot": "sidebar-live-activity",
		className: sidebarLiveActivity({ className }),
		children
	};
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps(defaultProps, props)
	});
}
//#endregion
//#region src/components/sidebar/sidebar-menu.recipe.ts
const sidebarMenuRecipe = tv({ slots: {
	sidebarMenu: [
		"flex min-w-0 flex-1 items-center",
		"h-auto gap-1.5 rounded-sticker",
		"font-sans text-footnote font-bold normal-case tracking-normal text-foreground-hint",
		"hover:text-foreground aria-[current=page]:text-foreground",
		"outline-none focus-visible:shadow-raft-focus"
	],
	sidebarMenuIcon: [
		"flex shrink-0 items-center justify-center",
		"[&_svg]:shrink-0",
		"[&_svg]:[vector-effect:non-scaling-stroke] [&_svg_*]:[vector-effect:non-scaling-stroke]",
		"size-3.5 [&_svg]:size-3.5 [&_svg]:stroke-2 [&_svg_*]:stroke-2"
	],
	sidebarMenuTitle: ["min-w-0 truncate"],
	sidebarMenuAside: ["flex shrink-0 items-center gap-1"],
	sidebarMenuCount: ["font-mono text-mono-meta font-normal tabular-nums text-foreground-hint"]
} });
//#endregion
//#region src/components/sidebar/sidebar-menu.tsx
function SidebarMenu({ className, render, ...props }) {
	const { sidebarMenu } = sidebarMenuRecipe();
	const defaultProps = {
		type: "button",
		"data-slot": "sidebar-menu",
		className: sidebarMenu({ className })
	};
	return useRender({
		defaultTagName: "button",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function SidebarMenuIcon({ className, render, ...props }) {
	const { sidebarMenuIcon } = sidebarMenuRecipe();
	const defaultProps = {
		"data-slot": "sidebar-menu-icon",
		className: sidebarMenuIcon({ className })
	};
	return useRender({
		defaultTagName: "span",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function SidebarMenuTitle({ className, render, ...props }) {
	const { sidebarMenuTitle } = sidebarMenuRecipe();
	const defaultProps = {
		"data-slot": "sidebar-menu-title",
		className: sidebarMenuTitle({ className })
	};
	return useRender({
		defaultTagName: "span",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function SidebarMenuAside({ className, render, ...props }) {
	const { sidebarMenuAside } = sidebarMenuRecipe();
	const defaultProps = {
		"data-slot": "sidebar-menu-aside",
		className: sidebarMenuAside({ className })
	};
	return useRender({
		defaultTagName: "span",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function SidebarMenuCount({ className, render, ...props }) {
	const { sidebarMenuCount } = sidebarMenuRecipe();
	const defaultProps = {
		"data-slot": "sidebar-menu-count",
		className: sidebarMenuCount({ className })
	};
	return useRender({
		defaultTagName: "span",
		render,
		props: mergeProps(defaultProps, props)
	});
}
//#endregion
//#region src/components/sidebar/sidebar-item.recipe.ts
const sidebarItemRecipe = tv({
	slots: {
		sidebarItem: [
			"group/sidebar-item flex w-full items-center px-2 text-left",
			"transition-colors",
			"my-px h-9 gap-2 rounded-control border-[1.5px] border-transparent py-0 pr-2.5 pl-2",
			"md:py-0 [@media(max-height:600px)]:py-0",
			"font-sans text-subhead font-medium text-foreground",
			"hover:bg-fill-pressed active:bg-fill-pressed not-data-active:data-popup-open:bg-fill-pressed",
			"data-active:border-sticker-ink data-active:bg-primary data-active:font-bold data-active:text-sticker-ink data-active:ring-[1.5px] data-active:ring-sticker-edge",
			"focus-visible:shadow-raft-focus outline-none"
		],
		sidebarItemIcon: [
			"flex shrink-0 items-center justify-center",
			"[&>svg]:shrink-0",
			"size-[19px] text-foreground-hint [&>svg]:size-4 [&>svg]:stroke-2",
			"group-data-active/sidebar-item:text-sticker-ink"
		],
		sidebarItemChannelIcon: [
			"flex shrink-0 items-center justify-center",
			"[&_svg]:shrink-0",
			"size-[19px] text-foreground-hint [&_svg]:size-4 [&_svg]:stroke-2",
			"group-data-active/sidebar-item:text-sticker-ink"
		],
		sidebarItemContent: ["has-[>[data-slot=sidebar-item-meta-icon]]:items-center"],
		sidebarItemTitle: "block min-w-0 shrink truncate",
		sidebarItemSubtitle: [
			"block min-w-0 flex-1 truncate",
			"shrink-1000 text-footnote font-normal text-foreground-muted",
			"group-data-active/sidebar-item:text-sticker-ink"
		],
		sidebarItemMeta: [
			"ml-auto shrink-0",
			"font-mono text-mono-meta font-normal tabular-nums text-foreground-hint",
			"group-data-active/sidebar-item:text-sticker-ink"
		],
		sidebarItemStatus: ["shrink-0", "inline-flex items-center"],
		sidebarItemIndicator: [
			"shrink-0 items-center justify-center gap-0",
			"[&:has(svg)]:px-0",
			"[&_svg]:shrink-0 [&_svg]:translate-y-0",
			"size-5 min-w-5 rounded-sticker border-0 p-0",
			"bg-primary text-sticker-ink inset-ring-[1.5px] inset-ring-sticker-ink ring-[1.5px] ring-sticker-edge",
			"[&_svg]:size-[13px] [&_svg]:stroke-2"
		],
		sidebarItemMetaIcon: [
			"inline-flex size-4 shrink-0 items-center justify-center",
			"[&_svg]:shrink-0",
			"text-foreground-hint [&_svg]:size-3.5",
			"group-data-active/sidebar-item:text-sticker-ink"
		],
		sidebarItemAside: ["flex shrink-0 items-center gap-1"],
		sidebarItemCount: [
			"shrink-0",
			"h-5 min-w-5 items-center justify-center gap-0 rounded-sticker border-0 px-1.5 py-0",
			"data-[slot=sidebar-item-count]:px-1.5",
			"bg-accent text-sticker-ink inset-ring-[1.5px] inset-ring-sticker-ink ring-[1.5px] ring-sticker-edge",
			"font-mono text-mono-meta font-bold tabular-nums tracking-normal"
		],
		sidebarItemCountSeparator: ["mx-0.5 opacity-60"],
		sidebarItemThreadCount: ["inline-flex items-center gap-0.5", "[&>svg]:size-3 [&>svg]:shrink-0 [&>svg]:translate-y-0"]
	},
	variants: {
		wrap: {
			false: {},
			true: { sidebarItem: [
				"h-auto items-start whitespace-normal",
				"min-h-9 py-[6.5px] md:py-[6.5px] [@media(max-height:600px)]:py-[6.5px]",
				"**:data-[slot=sidebar-item-channel-icon]:h-lh **:data-[slot=sidebar-item-icon]:h-lh",
				"**:data-[slot=sidebar-item-meta-icon]:h-lh",
				"*:data-[slot=avatar]:mt-[calc((1lh-19px)/2)]"
			] }
		},
		stacked: {
			false: { sidebarItemContent: "min-w-0 flex flex-1 items-baseline gap-1 text-left" },
			true: { sidebarItemContent: ["min-w-0 flex-1 text-left"] }
		}
	},
	defaultVariants: {
		wrap: false,
		stacked: false
	}
});
//#endregion
//#region src/components/icons/conversation-icons.tsx
function MessageIcon(props) {
	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",
		fill: "none",
		stroke: "currentColor",
		strokeLinecap: "round",
		strokeLinejoin: "round",
		strokeWidth: 1,
		...props,
		children: /* @__PURE__ */ jsx("path", { d: "M14.25 2.25H3.75C2.65 2.25 1.75 3.15 1.75 4.25V11.25C1.75 12.35 2.65 13.25 3.75 13.25H5.75V16.25L9.5 13.25H14.25C15.35 13.25 16.25 12.35 16.25 11.25V4.25C16.25 3.15 15.35 2.25 14.25 2.25Z" })
	});
}
function ChatIcon(props) {
	return /* @__PURE__ */ jsxs("svg", {
		xmlns: "http://www.w3.org/2000/svg",
		width: 18,
		height: 18,
		viewBox: "0 0 18 18",
		"aria-hidden": "true",
		focusable: "false",
		fill: "none",
		stroke: "currentColor",
		strokeLinecap: "round",
		strokeLinejoin: "round",
		strokeWidth: 1,
		...props,
		children: [
			/* @__PURE__ */ jsx("path", { d: "M14.25 2.25H3.75C2.65 2.25 1.75 3.15 1.75 4.25V11.25C1.75 12.35 2.65 13.25 3.75 13.25H5.75V16.25L9.5 13.25H14.25C15.35 13.25 16.25 12.35 16.25 11.25V4.25C16.25 3.15 15.35 2.25 14.25 2.25Z" }),
			/* @__PURE__ */ jsx("circle", {
				cx: 6.5,
				cy: 7.75,
				r: .75,
				fill: "currentColor",
				stroke: "none"
			}),
			/* @__PURE__ */ jsx("circle", {
				cx: 9,
				cy: 7.75,
				r: .75,
				fill: "currentColor",
				stroke: "none"
			}),
			/* @__PURE__ */ jsx("circle", {
				cx: 11.5,
				cy: 7.75,
				r: .75,
				fill: "currentColor",
				stroke: "none"
			})
		]
	});
}
function DirectMessageIcon(props) {
	return /* @__PURE__ */ jsxs("svg", {
		xmlns: "http://www.w3.org/2000/svg",
		width: 18,
		height: 18,
		viewBox: "0 0 18 18",
		"aria-hidden": "true",
		focusable: "false",
		fill: "none",
		stroke: "currentColor",
		strokeLinecap: "round",
		strokeLinejoin: "round",
		strokeWidth: 1.5,
		...props,
		children: [
			/* @__PURE__ */ jsx("path", { d: "M16.25 5V4.25C16.25 3.15 15.35 2.25 14.25 2.25H3.75C2.65 2.25 1.75 3.15 1.75 4.25V11.25C1.75 12.35 2.65 13.25 3.75 13.25H5.75V16.25L7.5 14.85" }),
			/* @__PURE__ */ jsx("circle", {
				cx: 14.25,
				cy: 8,
				r: 1.75
			}),
			/* @__PURE__ */ jsx("path", { d: "M11 16.25C11.3 13.65 12.5 12 14.25 12S17.2 13.65 17.5 16.25" })
		]
	});
}
function ThreadIcon(props) {
	return /* @__PURE__ */ jsxs("svg", {
		xmlns: "http://www.w3.org/2000/svg",
		width: 18,
		height: 18,
		viewBox: "0 0 18 18",
		"aria-hidden": "true",
		focusable: "false",
		fill: "none",
		stroke: "currentColor",
		strokeLinecap: "round",
		strokeLinejoin: "round",
		strokeWidth: 1,
		...props,
		children: [/* @__PURE__ */ jsx("path", { d: "M16.25 5V4.25C16.25 3.15 15.35 2.25 14.25 2.25H3.75C2.65 2.25 1.75 3.15 1.75 4.25V11.25C1.75 12.35 2.65 13.25 3.75 13.25H5.75V16.25L7.5 14.85" }), /* @__PURE__ */ jsx("path", {
			d: "M8.75 5.5H15.5C16.6 5.5 17.5 6.4 17.5 7.5V12.25C17.5 13.35 16.6 14.25 15.5 14.25H14V16.75L10.75 14.25H8.75C7.65 14.25 6.75 13.35 6.75 12.25V7.5C6.75 6.4 7.65 5.5 8.75 5.5Z",
			fill: "currentColor",
			stroke: "none"
		})]
	});
}
//#endregion
//#region src/components/sidebar/sidebar-item.tsx
function SidebarItemRoot({ active = false, className, render, ...props }) {
	return useRender({
		render: render ?? /* @__PURE__ */ jsx(Button$1, {}),
		props: mergeProps({
			type: "button",
			"data-slot": "sidebar-item",
			"data-active": active ? "true" : void 0,
			className
		}, props)
	});
}
function SidebarItem({ className, wrap = false, ...props }) {
	const { sidebarItem } = sidebarItemRecipe({ wrap });
	return /* @__PURE__ */ jsx(SidebarItemRoot, {
		"data-wrap": wrap ? "true" : void 0,
		className: sidebarItem({ className }),
		...props
	});
}
function SidebarItemIcon({ className, render, ...props }) {
	const { sidebarItemIcon } = sidebarItemRecipe();
	const defaultProps = {
		"data-slot": "sidebar-item-icon",
		className: sidebarItemIcon({ className })
	};
	return useRender({
		defaultTagName: "span",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function SidebarItemChannelIcon({ className, render, ...props }) {
	const { sidebarItemChannelIcon } = sidebarItemRecipe();
	const defaultProps = {
		"data-slot": "sidebar-item-channel-icon",
		className: sidebarItemChannelIcon({ className })
	};
	return useRender({
		defaultTagName: "span",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function SidebarItemContent({ className, render, stacked, ...props }) {
	const { sidebarItemContent } = sidebarItemRecipe();
	const defaultProps = {
		"data-slot": "sidebar-item-content",
		className: sidebarItemContent({
			className,
			stacked
		})
	};
	return useRender({
		defaultTagName: "span",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function SidebarItemTitle({ className, render, ...props }) {
	const { sidebarItemTitle } = sidebarItemRecipe();
	const defaultProps = {
		"data-slot": "sidebar-item-title",
		className: sidebarItemTitle({ className })
	};
	return useRender({
		defaultTagName: "span",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function SidebarItemSubtitle({ className, render, ...props }) {
	const { sidebarItemSubtitle } = sidebarItemRecipe();
	const defaultProps = {
		"data-slot": "sidebar-item-subtitle",
		className: sidebarItemSubtitle({ className })
	};
	return useRender({
		defaultTagName: "span",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function SidebarItemMeta({ className, render, ...props }) {
	const { sidebarItemMeta } = sidebarItemRecipe();
	const defaultProps = {
		"data-slot": "sidebar-item-meta",
		className: sidebarItemMeta({ className })
	};
	return useRender({
		defaultTagName: "span",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function SidebarItemStatus({ className, render, ...props }) {
	const { sidebarItemStatus } = sidebarItemRecipe();
	const defaultProps = {
		"data-slot": "sidebar-item-status",
		className: sidebarItemStatus({ className })
	};
	return useRender({
		defaultTagName: "span",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function SidebarItemIndicator({ className, ...props }) {
	const { sidebarItemIndicator } = sidebarItemRecipe();
	return /* @__PURE__ */ jsx(Badge, {
		"data-slot": "sidebar-item-indicator",
		className: sidebarItemIndicator({ className }),
		...props
	});
}
function SidebarItemMetaIcon({ className, render, ...props }) {
	const { sidebarItemMetaIcon } = sidebarItemRecipe();
	const defaultProps = {
		"data-slot": "sidebar-item-meta-icon",
		className: sidebarItemMetaIcon({ className })
	};
	return useRender({
		defaultTagName: "span",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function SidebarItemAside({ className, render, ...props }) {
	const { sidebarItemAside } = sidebarItemRecipe();
	const defaultProps = {
		"data-slot": "sidebar-item-aside",
		className: sidebarItemAside({ className })
	};
	return useRender({
		defaultTagName: "span",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function SidebarItemCount({ className, ...props }) {
	const { sidebarItemCount } = sidebarItemRecipe();
	return /* @__PURE__ */ jsx(Badge, {
		"data-slot": "sidebar-item-count",
		className: sidebarItemCount({ className }),
		...props
	});
}
/** The dot between the channel's own unread count and its thread count. */
function SidebarItemCountSeparator({ className, render, ...props }) {
	const { sidebarItemCountSeparator } = sidebarItemRecipe();
	const defaultProps = {
		"data-slot": "sidebar-item-count-separator",
		"aria-hidden": true,
		className: sidebarItemCountSeparator({ className }),
		children: "·"
	};
	return useRender({
		defaultTagName: "span",
		render,
		props: mergeProps(defaultProps, props)
	});
}
/**
* Thread segment of an unread count: a thread icon followed by the number of
* threads with new replies. Works inside SidebarItemCount or as quiet text.
*/
function SidebarItemThreadCount({ children, className, label = "threads with new replies", render, ...props }) {
	const { sidebarItemThreadCount } = sidebarItemRecipe();
	const defaultProps = {
		"data-slot": "sidebar-item-thread-count",
		className: sidebarItemThreadCount({ className }),
		children: /* @__PURE__ */ jsxs(Fragment$1, { children: [
			/* @__PURE__ */ jsx(ThreadIcon, { strokeWidth: 1.75 }),
			children,
			/* @__PURE__ */ jsxs("span", {
				className: "sr-only",
				children: [" ", label]
			})
		] })
	};
	return useRender({
		defaultTagName: "span",
		render,
		props: mergeProps(defaultProps, props)
	});
}
//#endregion
//#region src/components/sidebar/sidebar-section.recipe.ts
const sidebarSectionRecipe = tv({ slots: {
	sidebarSection: ["group/section", "px-0"],
	sidebarList: [],
	sidebarSectionEmpty: [
		"px-2 py-1.5",
		"font-sans text-footnote",
		"text-foreground-hint"
	],
	sidebarSectionHeader: [
		"flex items-center justify-between",
		"group/section-header",
		"mt-0 mb-0 h-auto gap-2 px-2 pt-4 pb-1.5"
	],
	sidebarSectionDisclosure: [
		"flex min-w-0 flex-1 items-center",
		"**:data-[slot=sidebar-section-chevron]:transition-transform",
		"[&[data-panel-open]_[data-slot=sidebar-section-chevron]]:rotate-90",
		"h-auto gap-1.5 rounded-sticker border-0",
		"font-sans text-footnote font-bold normal-case tracking-normal text-foreground-hint",
		"outline-none focus-visible:shadow-raft-focus",
		"**:data-[slot=sidebar-section-chevron]:size-3.5 **:data-[slot=sidebar-section-chevron]:stroke-2"
	],
	sidebarSectionTitle: ["min-w-0 truncate"],
	sidebarSectionCount: ["font-mono text-mono-meta font-normal tabular-nums text-foreground-hint"],
	sidebarSectionAttention: [
		"inline-flex min-w-4.5 shrink-0 items-center justify-center",
		"group-data-open/section:hidden",
		"group-data-popup-open/section-header:hidden",
		"group-hover/section-header:hidden"
	],
	sidebarSectionTrailing: ["relative flex min-w-4.5 shrink-0 items-center justify-end"],
	sidebarSectionControls: [
		"flex shrink-0 items-center gap-1",
		"pointer-events-none absolute top-1/2 right-0 -translate-y-1/2 opacity-0",
		"max-md:static max-md:pointer-events-auto max-md:translate-y-0 max-md:opacity-100",
		"md:group-hover/section-header:pointer-events-auto md:group-hover/section-header:opacity-100",
		"md:focus-within:pointer-events-auto md:focus-within:opacity-100",
		"md:has-[[data-popup-open]]:pointer-events-auto md:has-[[data-popup-open]]:opacity-100"
	],
	sidebarSectionControl: ["flex h-7 w-auto min-w-7 shrink-0 items-center justify-center p-0 -my-1.5", "[&>svg]:shrink-0 [&>svg:not([class*='size-'])]:size-4"]
} });
//#endregion
//#region src/components/sidebar/sidebar-section.tsx
function SidebarSection({ className, defaultOpen = true, render, ...props }) {
	const { sidebarSection } = sidebarSectionRecipe();
	const defaultProps = {
		"data-slot": "sidebar-section",
		defaultOpen,
		className: sidebarSection({ className })
	};
	return /* @__PURE__ */ jsx(Collapsible.Root, {
		render: render ?? /* @__PURE__ */ jsx("section", {}),
		...mergeProps(defaultProps, props)
	});
}
function SidebarList({ className, render, ...props }) {
	const { sidebarList } = sidebarSectionRecipe();
	const defaultProps = {
		"data-slot": "sidebar-list",
		className: sidebarList({ className })
	};
	return /* @__PURE__ */ jsx(Collapsible.Panel, {
		render,
		...mergeProps(defaultProps, props)
	});
}
function SidebarSectionEmpty({ className, render, ...props }) {
	const { sidebarSectionEmpty } = sidebarSectionRecipe();
	const defaultProps = {
		"data-slot": "sidebar-section-empty",
		className: sidebarSectionEmpty({ className })
	};
	return /* @__PURE__ */ jsx(Collapsible.Panel, {
		render,
		...mergeProps(defaultProps, props)
	});
}
function SidebarSectionHeader({ className, render, ...props }) {
	const { sidebarSectionHeader } = sidebarSectionRecipe();
	const defaultProps = {
		"data-slot": "sidebar-section-header",
		className: sidebarSectionHeader({ className })
	};
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function SidebarSectionDisclosure({ className, render, ...props }) {
	const { sidebarSectionDisclosure } = sidebarSectionRecipe();
	const defaultProps = {
		type: "button",
		"data-slot": "sidebar-section-disclosure",
		className: sidebarSectionDisclosure({ className })
	};
	return useRender({
		render: render ?? /* @__PURE__ */ jsx(Collapsible.Trigger, {}),
		props: mergeProps(defaultProps, props)
	});
}
function SidebarSectionChevron({ className, render, ...props }) {
	const defaultProps = {
		"data-slot": "sidebar-section-chevron",
		className: cn("size-3", className)
	};
	const chevron = useRender({
		render: render ?? /* @__PURE__ */ jsx(ChevronRight, {}),
		props: mergeProps(defaultProps, props)
	});
	return /* @__PURE__ */ jsx("span", {
		className: "flex size-4.5 shrink-0 items-center justify-center",
		"aria-hidden": "true",
		children: chevron
	});
}
function SidebarSectionTitle({ className, render, ...props }) {
	const { sidebarSectionTitle } = sidebarSectionRecipe();
	const defaultProps = {
		"data-slot": "sidebar-section-title",
		className: sidebarSectionTitle({ className })
	};
	return useRender({
		defaultTagName: "span",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function SidebarSectionCount({ className, render, ...props }) {
	const { sidebarSectionCount } = sidebarSectionRecipe();
	const defaultProps = {
		"data-slot": "sidebar-section-count",
		className: sidebarSectionCount({ className })
	};
	return useRender({
		defaultTagName: "span",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function SidebarSectionAttention({ className, size = "md", variant, ...props }) {
	const { sidebarSectionAttention } = sidebarSectionRecipe();
	const resolvedVariant = variant ?? "accent";
	return /* @__PURE__ */ jsx("span", {
		"aria-hidden": true,
		"data-slot": "sidebar-section-attention",
		className: sidebarSectionAttention(),
		children: /* @__PURE__ */ jsx(Status, {
			size,
			variant: resolvedVariant,
			className,
			...props
		})
	});
}
function SidebarSectionTrailing({ className, render, ...props }) {
	const { sidebarSectionTrailing } = sidebarSectionRecipe();
	const defaultProps = {
		"data-slot": "sidebar-section-trailing",
		className: sidebarSectionTrailing({ className })
	};
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function SidebarSectionControls({ className, render, ...props }) {
	const { sidebarSectionControls } = sidebarSectionRecipe();
	const defaultProps = {
		"data-slot": "sidebar-section-controls",
		className: sidebarSectionControls({ className })
	};
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function SidebarSectionControl({ className, render, size = "icon-sm", variant = "ghost", loading = false, loadingLabel = "Loading", children, disabled, ...props }) {
	const { sidebarSectionControl } = sidebarSectionRecipe();
	return /* @__PURE__ */ jsx(Button, {
		"data-slot": "sidebar-section-control",
		size,
		variant,
		loading,
		loadingLabel,
		disabled,
		className: sidebarSectionControl({ className }),
		render,
		...props,
		children
	});
}
const SidebarControl = SidebarSectionControl;
//#endregion
//#region src/components/panel/panel.recipe.ts
const panel = tv({
	slots: {
		root: ["[--panel-footer-clearance:10rem]", "bg-layer-panel 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-muted"],
		footer: [
			"relative flex shrink-0 items-center pt-3",
			"bg-layer-panel",
			"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-panel font-sans text-foreground"],
	content: ["flex min-h-0 min-w-0 flex-1 flex-col", "bg-layer-panel"],
	tabs: [
		"shrink-0",
		"border-b border-line-seam bg-layer-panel",
		"*:data-[slot=tabs-list]:w-full *:data-[slot=tabs-list]:px-5 max-md:*:data-[slot=tabs-list]:px-4",
		"*:data-[slot=tabs-list]:data-[variant=default]:py-2"
	],
	footer: ["bg-layer-panel"]
} });
//#endregion
//#region src/components/conversation-panel/conversation-panel.tsx
function ConversationPanelRoot({ className, edge = "inset", render, ...props }) {
	const { root } = conversationPanel();
	return /* @__PURE__ */ jsx(Panel, {
		...props,
		render,
		edge,
		"data-slot": "conversation-panel-root",
		className: root({ className })
	});
}
/**
* Content region below the conversation header: one container hosting tabs,
* body, and footer.
*/
function ConversationPanelContent({ className, render, ...props }) {
	const { content } = conversationPanel();
	const defaultProps = {
		"data-slot": "conversation-panel-content",
		className: content({ className })
	};
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function ConversationPanelBody({ className, render, ...props }) {
	return /* @__PURE__ */ jsx(PanelBody, {
		...props,
		render,
		"data-slot": "conversation-panel-body",
		className
	});
}
function ConversationPanelTabs({ className, render, ...props }) {
	const { tabs } = conversationPanel();
	const defaultProps = {
		"data-slot": "conversation-panel-tabs",
		className: tabs({ className })
	};
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function ConversationPanelFooter({ className, render, ...props }) {
	const { footer } = conversationPanel();
	return /* @__PURE__ */ jsx(PanelFooter, {
		...props,
		render,
		"data-slot": "conversation-panel-footer",
		className: footer({ className })
	});
}
//#endregion
//#region src/components/conversation-panel/conversation-panel-empty-state.tsx
const conversationPanelEmptyState = tv({ slots: {
	root: [
		"flex h-full min-h-0 min-w-0 flex-1 flex-col items-center justify-center",
		"text-center",
		"gap-2 px-5 py-6",
		"font-sans text-headline font-bold normal-case text-foreground-muted"
	],
	brand: ["shrink-0", "mb-1 inline-flex rounded-none p-0 text-foreground-hint"],
	brandMark: [
		"relative flex items-center justify-center",
		"[&>svg]:relative [&>svg]:z-10",
		"size-9 overflow-visible rounded-none",
		"[&>svg]:size-9 [&>svg]:stroke-2"
	]
} });
function ConversationPanelEmptyState({ className, render, ...props }) {
	const { root } = conversationPanelEmptyState();
	const defaultProps = {
		"data-slot": "conversation-panel-empty-state",
		className: root({ className })
	};
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function ConversationPanelEmptyStateBrand({ className, render, ...props }) {
	const { brand } = conversationPanelEmptyState();
	const defaultProps = {
		"data-slot": "conversation-panel-empty-state-brand",
		className: brand({ className })
	};
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function ConversationPanelEmptyStateBrandMark({ className, render, ...props }) {
	const { brandMark } = conversationPanelEmptyState();
	const defaultProps = {
		"data-slot": "conversation-panel-empty-state-brand-mark",
		className: brandMark({ className })
	};
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps(defaultProps, 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-muted",
		"in-data-[slot=tooltip-content]:text-layer-hud-foreground/70",
		"in-data-[slot=tooltip-content]:shadow-[inset_0_0_0_1px_color-mix(in_oklch,var(--layer-hud-foreground)_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"],
	positioner: ["isolate z-50 outline-none"],
	content: [
		"flex flex-col max-h-(--available-height) overflow-hidden",
		"outline-none",
		"min-w-60 gap-0 rounded-container bg-layer-popover p-1.5 text-foreground",
		"shadow-raft-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-primary-soft data-highlighted:bg-primary-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-icon 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-primary-soft data-highlighted:bg-primary-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-icon 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-primary-soft data-highlighted:bg-primary-soft data-popup-open:bg-primary-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-icon 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"
	],
	separator: ["-mx-1.5 my-1.5 h-px border-0 bg-line-muted"],
	indicator: ["pointer-events-none ml-auto flex shrink-0 items-center justify-center", "size-4 text-foreground [&_svg]:size-4"]
} });
function ContextMenu(props) {
	return /* @__PURE__ */ jsx(ContextMenu$1.Root, {
		"data-slot": "context-menu",
		...props
	});
}
function ContextMenuSubmenu(props) {
	return /* @__PURE__ */ jsx(ContextMenu$1.SubmenuRoot, {
		"data-slot": "context-menu-submenu",
		...props
	});
}
function ContextMenuTrigger({ className, ...props }) {
	const { trigger } = contextMenu();
	return /* @__PURE__ */ jsx(ContextMenu$1.Trigger, {
		"data-slot": "context-menu-trigger",
		className: trigger({ className }),
		...props
	});
}
function ContextMenuPortal(props) {
	return /* @__PURE__ */ jsx(ContextMenu$1.Portal, {
		"data-slot": "context-menu-portal",
		...useThemeScopeProps(props)
	});
}
const CONTENT_COLLISION_AVOIDANCE = {
	side: "shift",
	align: "shift",
	fallbackAxisSide: "none"
};
function ContextMenuContent({ align = "start", alignOffset = 0, anchor, arrowPadding, collisionAvoidance = CONTENT_COLLISION_AVOIDANCE, collisionBoundary, collisionPadding = 8, disableAnchorTracking = true, positionMethod = "fixed", side = "right", sideOffset = 0, sticky, portalProps, className, ...props }) {
	const { positioner, content } = contextMenu();
	return /* @__PURE__ */ jsx(ContextMenuPortal, {
		...portalProps,
		children: /* @__PURE__ */ jsx(ContextMenu$1.Positioner, {
			align,
			alignOffset,
			anchor,
			arrowPadding,
			collisionAvoidance,
			collisionBoundary,
			collisionPadding,
			disableAnchorTracking,
			positionMethod,
			side,
			sideOffset,
			sticky,
			className: positioner(),
			children: /* @__PURE__ */ jsx(ContextMenu$1.Popup, {
				"data-slot": "context-menu-content",
				className: content({ className }),
				...props
			})
		})
	});
}
function ContextMenuPopup({ className, ...props }) {
	const { content } = contextMenu();
	return /* @__PURE__ */ jsx("div", {
		"data-slot": "context-menu-content",
		className: content({ className }),
		...props
	});
}
function ContextMenuItem({ className, ...props }) {
	const { item } = contextMenu();
	return /* @__PURE__ */ jsx(ContextMenu$1.Item, {
		"data-slot": "context-menu-item",
		className: item({ className }),
		...props
	});
}
function ContextMenuItemLabel({ className, ...props }) {
	const { itemLabel } = contextMenu();
	return /* @__PURE__ */ jsx("span", {
		"data-slot": "context-menu-item-label",
		className: itemLabel({ className }),
		...props
	});
}
function ContextMenuFooter({ className, ...props }) {
	const { footer } = contextMenu();
	return /* @__PURE__ */ jsx("div", {
		"data-slot": "context-menu-footer",
		className: footer({ className }),
		...props
	});
}
function ContextMenuSubmenuTrigger({ children, className, ...props }) {
	const { submenuTrigger, indicator } = contextMenu();
	return /* @__PURE__ */ jsxs(ContextMenu$1.SubmenuTrigger, {
		"data-slot": "context-menu-submenu-trigger",
		className: submenuTrigger({ className }),
		...props,
		children: [children, /* @__PURE__ */ jsx("span", {
			className: indicator(),
			"data-slot": "context-menu-submenu-trigger-indicator",
			"aria-hidden": "true",
			children: /* @__PURE__ */ jsx(ContextMenuSubmenuChevronIcon, {})
		})]
	});
}
function ContextMenuLabel({ className, ...props }) {
	const { label } = contextMenu();
	return /* @__PURE__ */ jsx("div", {
		"data-slot": "context-menu-label",
		className: label({ className }),
		...props
	});
}
function ContextMenuShortcut({ className, ...props }) {
	const { shortcut } = contextMenu();
	return /* @__PURE__ */ jsx(Kbd, {
		"data-slot": "context-menu-shortcut",
		className: shortcut({ className }),
		...props
	});
}
function ContextMenuSeparator({ className, ...props }) {
	const { separator } = contextMenu();
	return /* @__PURE__ */ jsx(ContextMenu$1.Separator, {
		"data-slot": "context-menu-separator",
		className: separator({ className }),
		...props
	});
}
function ContextMenuSubmenuChevronIcon() {
	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 ContextMenuCheckIcon() {
	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 ContextMenuRadioGroup({ ...props }) {
	return /* @__PURE__ */ jsx(ContextMenu$1.RadioGroup, {
		"data-slot": "context-menu-radio-group",
		...props
	});
}
function ContextMenuRadioItem({ className, children, ...props }) {
	const { radioItem, indicator } = contextMenu();
	return /* @__PURE__ */ jsxs(ContextMenu$1.RadioItem, {
		"data-slot": "context-menu-radio-item",
		className: radioItem({ className }),
		...props,
		children: [children, /* @__PURE__ */ jsx("span", {
			className: indicator(),
			children: /* @__PURE__ */ jsx(ContextMenu$1.RadioItemIndicator, { children: /* @__PURE__ */ jsx(ContextMenuCheckIcon, {}) })
		})]
	});
}
function ContextMenuRadioItemIndicator({ className, ...props }) {
	return /* @__PURE__ */ jsx(ContextMenu$1.RadioItemIndicator, {
		"data-slot": "context-menu-radio-item-indicator",
		className,
		...props
	});
}
function ContextMenuCheckboxItem({ className, children, ...props }) {
	const { item, indicator } = contextMenu();
	return /* @__PURE__ */ jsxs(ContextMenu$1.CheckboxItem, {
		"data-slot": "context-menu-checkbox-item",
		className: item({ className }),
		...props,
		children: [children, /* @__PURE__ */ jsx("span", {
			className: indicator(),
			children: /* @__PURE__ */ jsx(ContextMenu$1.CheckboxItemIndicator, { children: /* @__PURE__ */ jsx(ContextMenuCheckIcon, {}) })
		})]
	});
}
function ContextMenuCheckboxItemIndicator({ className, ...props }) {
	return /* @__PURE__ */ jsx(ContextMenu$1.CheckboxItemIndicator, {
		"data-slot": "context-menu-checkbox-item-indicator",
		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-raft-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-primary-soft data-highlighted:bg-primary-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-icon 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-primary-soft data-highlighted:bg-primary-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-icon 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-primary-soft data-highlighted:bg-primary-soft data-popup-open:bg-primary-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-icon 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-muted"],
	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"],
	content: [
		"pointer-events-none fixed inset-0 z-71 flex flex-col data-closed:hidden",
		"*:data-lightbox-close:pointer-events-auto *:data-lightbox-close:absolute *:data-lightbox-close:z-20",
		"*:data-lightbox-close:top-[calc(16px+env(safe-area-inset-top,0px))] *:data-lightbox-close:right-[calc(16px+env(safe-area-inset-right,0px))]"
	],
	header: [
		"pointer-events-auto shrink-0",
		"flex items-center gap-3 pb-3",
		"pt-[calc(env(safe-area-inset-top,0px)+--spacing(3))]",
		"pl-[calc(env(safe-area-inset-left,0px)+--spacing(4))]",
		"pr-[calc(env(safe-area-inset-right,0px)+--spacing(4))]",
		"bg-transparent shadow-none"
	],
	toolbar: [
		"pointer-events-auto shrink-0 flex items-center gap-3",
		"h-[calc(56px+env(safe-area-inset-top,0px))] pt-[env(safe-area-inset-top,0px)]",
		"pl-[calc(16px+env(safe-area-inset-left,0px))] pr-[calc(16px+env(safe-area-inset-right,0px))]",
		"**:data-lightbox-close:static **:data-lightbox-close:inset-auto",
		"**:data-lightbox-close:top-auto **:data-lightbox-close:right-auto",
		"border-b border-line-seam bg-layer-panel shadow-none"
	],
	headerMeta: ["flex min-w-0 flex-1 items-center gap-1.5"],
	headerLabel: [
		"inline-flex shrink-0 items-center px-1.5",
		"h-[22px] rounded-chip bg-fill-muted py-0",
		"font-sans text-caption font-semibold normal-case tracking-normal text-foreground-muted"
	],
	title: ["min-w-0 flex-1 truncate", "py-0 font-sans text-headline font-bold text-foreground"],
	actions: ["flex shrink-0 items-center", "gap-1"],
	stage: ["pointer-events-none relative flex min-h-0 flex-1 items-center justify-center overflow-hidden"],
	media: ["pointer-events-auto max-h-[80vh] max-w-[86vw] border-0 bg-transparent shadow-none"],
	navigationButton: [
		"pointer-events-auto absolute z-10 inline-flex items-center justify-center",
		"transition-[background-color,color,opacity,box-shadow,transform] duration-150",
		"outline-[1px] outline-offset-2 outline-transparent",
		"data-[disabled=true]:cursor-default",
		"[&_svg]:pointer-events-none [&_svg]:shrink-0",
		"size-11 rounded-control border-[1.5px] border-line-strong bg-layer-card text-foreground shadow-none",
		"hover:bg-layer-card hover:press-overlay active:press-overlay",
		"focus-visible:outline-transparent focus-visible:shadow-raft-focus",
		"[&_svg]:size-5.5"
	],
	infoDock: ["pointer-events-none absolute right-6 bottom-20 left-6 z-10 flex justify-center"],
	infoBar: [
		"pointer-events-auto flex items-center",
		"w-[clamp(144px,20vw,224px)] max-w-[calc(100vw-48px)] min-w-36",
		"gap-2 rounded-container py-0.5 pr-0.5 pl-2.5",
		"bg-layer-popover text-foreground shadow-raft-float ring-1 ring-line-seam"
	],
	infoTitle: ["min-w-0 flex-1 truncate", "font-sans text-footnote font-semibold text-foreground"],
	infoActions: ["flex shrink-0 items-center", "gap-1"],
	thumbnailStrip: ["pointer-events-none absolute right-0 bottom-4 left-0 z-10", "flex items-center justify-center gap-1.5"],
	thumbnail: [
		"group/lightbox-thumb pointer-events-auto relative size-12 overflow-hidden",
		"transition-[border-color,opacity,box-shadow] duration-150",
		"[&_img]:pointer-events-none [&_img]:size-full [&_img]:object-cover",
		"rounded-control border-[1.5px] opacity-100 shadow-none",
		"border-sticker-paper/40 hover:border-sticker-paper/80",
		"data-active:border-sticker-paper"
	],
	thumbnailOverlay: [
		"pointer-events-none absolute inset-0 block transition-colors duration-150",
		"bg-black/45 group-hover/lightbox-thumb:bg-black/28",
		"group-data-active/lightbox-thumb:bg-transparent"
	],
	close: ["pointer-events-auto"]
} });
function Lightbox({ closeOnModW = true, defaultOpen = false, modal = true, onOpenChange, open, children, ...props }) {
	const dialogRef = useRef(null);
	const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
	const effectiveOpen = open ?? uncontrolledOpen;
	const handleOpenChange = useCallback((nextOpen, eventDetails) => {
		if (open === void 0) setUncontrolledOpen(nextOpen);
		onOpenChange?.(nextOpen, eventDetails);
	}, [onOpenChange, open]);
	const modWClose = closeOnModW && effectiveOpen ? /* @__PURE__ */ jsx(LightboxModWClose, { dialogRef }) : null;
	return /* @__PURE__ */ jsxs(Dialog$1.Root, {
		actionsRef: dialogRef,
		defaultOpen,
		modal,
		onOpenChange: handleOpenChange,
		open,
		...props,
		children: [modWClose, children]
	});
}
function LightboxModWClose({ dialogRef }) {
	useHotkey("Mod+W", (event) => {
		event.preventDefault();
		event.stopPropagation();
		dialogRef.current?.close();
	}, { meta: {
		name: "Close lightbox",
		description: "Close the active lightbox before the browser closes the tab."
	} });
	return null;
}
function LightboxTrigger(props) {
	return /* @__PURE__ */ jsx(Dialog$1.Trigger, {
		"data-slot": "lightbox-trigger",
		...props
	});
}
function LightboxPortal(props) {
	return /* @__PURE__ */ jsx(Dialog$1.Portal, {
		"data-slot": "lightbox-portal",
		...useThemeScopeProps(props)
	});
}
function LightboxContent({ className, initialFocus = false, finalFocus = false, ...props }) {
	const { backdrop, content } = lightbox();
	return /* @__PURE__ */ jsxs(LightboxPortal, { children: [/* @__PURE__ */ jsx(Dialog$1.Backdrop, {
		"data-slot": "lightbox-backdrop",
		className: backdrop()
	}), /* @__PURE__ */ jsx(Dialog$1.Popup, {
		"data-slot": "lightbox-content",
		initialFocus,
		finalFocus,
		className: content({ className }),
		...props
	})] });
}
function LightboxHeader({ render, className, ...props }) {
	const { header } = lightbox();
	const defaultProps = { className: header({ className }) };
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps(defaultProps, props),
		state: { slot: "lightbox-header" }
	});
}
function LightboxToolbar({ render, className, ...props }) {
	const { toolbar } = lightbox();
	const defaultProps = { className: toolbar({ className }) };
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps(defaultProps, props),
		state: { slot: "lightbox-toolbar" }
	});
}
function LightboxHeaderMeta({ render, className, ...props }) {
	const { headerMeta } = lightbox();
	const defaultProps = { className: headerMeta({ className }) };
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps(defaultProps, props),
		state: { slot: "lightbox-header-meta" }
	});
}
function LightboxHeaderLabel({ render, className, ...props }) {
	const { headerLabel } = lightbox();
	const defaultProps = { className: headerLabel({ className }) };
	return useRender({
		defaultTagName: "span",
		render,
		props: mergeProps(defaultProps, props),
		state: { slot: "lightbox-header-label" }
	});
}
function LightboxTitle({ render, className, ...props }) {
	const { title } = lightbox();
	const defaultProps = { className: title({ className }) };
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps(defaultProps, props),
		state: { slot: "lightbox-title" }
	});
}
function LightboxActions({ render, className, ...props }) {
	const { actions } = lightbox();
	const defaultProps = { className: actions({ className }) };
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps(defaultProps, props),
		state: { slot: "lightbox-actions" }
	});
}
function LightboxStage({ render, className, ...props }) {
	const { stage } = lightbox();
	const defaultProps = { className: stage({ className }) };
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps(defaultProps, props),
		state: { slot: "lightbox-stage" }
	});
}
function LightboxMedia({ render, className, ...props }) {
	const { media } = lightbox();
	const defaultProps = { className: media({ className }) };
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps(defaultProps, props),
		state: { slot: "lightbox-media" }
	});
}
function LightboxNavigationButton({ className, direction, disabled, onClick, type = "button", ...props }) {
	const { navigationButton } = lightbox();
	const handleClick = useCallback((event) => {
		if (disabled) {
			event.preventDefault();
			return;
		}
		onClick?.(event);
	}, [disabled, onClick]);
	return /* @__PURE__ */ jsx(Button, {
		"aria-disabled": disabled,
		className: navigationButton({ className: cn(direction === "previous" ? "left-8" : "right-8", className) }),
		"data-disabled": disabled ? "true" : void 0,
		"data-slot": "lightbox-navigation-button",
		"data-direction": direction,
		onClick: handleClick,
		size: "icon-lg",
		type,
		variant: "outline",
		...props
	});
}
function LightboxInfoDock({ render, className, ...props }) {
	const { infoDock } = lightbox();
	const defaultProps = { className: infoDock({ className }) };
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps(defaultProps, props),
		state: { slot: "lightbox-info-dock" }
	});
}
function LightboxInfoBar({ render, className, ...props }) {
	const { infoBar } = lightbox();
	const defaultProps = { className: infoBar({ className }) };
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps(defaultProps, props),
		state: { slot: "lightbox-info-bar" }
	});
}
function LightboxInfoTitle({ render, className, ...props }) {
	const { infoTitle } = lightbox();
	const defaultProps = { className: infoTitle({ className }) };
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps(defaultProps, props),
		state: { slot: "lightbox-info-title" }
	});
}
function LightboxInfoActions({ render, className, ...props }) {
	const { infoActions } = lightbox();
	const defaultProps = { className: infoActions({ className }) };
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps(defaultProps, props),
		state: { slot: "lightbox-info-actions" }
	});
}
function LightboxThumbnailStrip({ render, className, ...props }) {
	const { thumbnailStrip } = lightbox();
	const defaultProps = { className: thumbnailStrip({ className }) };
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps(defaultProps, props),
		state: { slot: "lightbox-thumbnail-strip" }
	});
}
function LightboxThumbnail({ active = false, className, render, type = "button", children, ...props }) {
	const { thumbnail, thumbnailOverlay } = lightbox();
	const defaultProps = {
		type,
		"data-slot": "lightbox-thumbnail",
		"data-active": active ? "true" : void 0,
		className: thumbnail({ className }),
		children: /* @__PURE__ */ jsxs(Fragment$1, { children: [children, /* @__PURE__ */ jsx("span", {
			"aria-hidden": "true",
			"data-slot": "lightbox-thumbnail-overlay",
			className: thumbnailOverlay()
		})] })
	};
	return useRender({
		defaultTagName: "button",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function LightboxClose({ className, render, ...props }) {
	const { close } = lightbox();
	return /* @__PURE__ */ jsx(Dialog$1.Close, {
		"data-lightbox-close": "",
		"data-slot": "lightbox-close",
		className: close({ className }),
		render: render ?? /* @__PURE__ */ jsx(Button, {
			type: "button",
			variant: "outline",
			size: "icon-lg"
		}),
		...props
	});
}
//#endregion
//#region src/components/logo/raft-logo.tsx
function RaftLogo(props) {
	return /* @__PURE__ */ jsx("svg", {
		viewBox: "0 0 113 104",
		fill: "none",
		xmlns: "http://www.w3.org/2000/svg",
		...props,
		children: /* @__PURE__ */ jsx(RaftMarkArtwork, {})
	});
}
function RaftWordmark(props) {
	return /* @__PURE__ */ jsx("svg", {
		viewBox: "128 0 294 104",
		fill: "none",
		xmlns: "http://www.w3.org/2000/svg",
		...props,
		children: /* @__PURE__ */ jsx(RaftWordmarkArtwork, {})
	});
}
function RaftLogoLockup(props) {
	return /* @__PURE__ */ jsxs("svg", {
		viewBox: "0 0 422 104",
		fill: "none",
		xmlns: "http://www.w3.org/2000/svg",
		...props,
		children: [/* @__PURE__ */ jsx(RaftMarkArtwork, {}), /* @__PURE__ */ jsx(RaftWordmarkArtwork, {})]
	});
}
function RaftMarkArtwork() {
	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
		/* @__PURE__ */ jsx("path", {
			fill: "#141111",
			d: "m112.754 38.743-3.954-22.44c-.572-3.208-2.477-5.797-5.003-7.845-1.254-1.017-5.717-4.876-7.527-6.273C93.713.184 90.362-.325 87.186.184L21.82 11.84c-4.94.73-8.878 1.636-11.91 5.75-3.51 4.748-2.478 9.337-1.652 14.022l3.08 17.517c.128.715.334 1.382.556 2.033-4.32.762-7.734 2.318-9.814 5.383-2.255 3.32-2.43 5.75-1.684 10.005l3.526 20.01c.905 4.209 4.113 6.369 8.782 10.561 5.416 4.828 7.56 7.528 12.975 6.575l70.623-12.45c6.59-1.176 11.005-7.465 9.846-14.055l-3.875-22.012a12 12 0 0 0-.588-2.143l1.287-.239c6.543-1.19 10.926-7.495 9.782-14.038z"
		}),
		/* @__PURE__ */ jsx("path", {
			fill: "#fffaef",
			d: "M18.326 87.196 85.17 75.412a4.004 4.004 0 0 0 3.256-4.653l-3.208-18.232a4.004 4.004 0 0 0-4.653-3.255c-2.192.38-4.653.826-5.892 1.048-1.954.35-5.273-.858-5.844-4.066l-1.033-5.844-28.919 31.508c-.905.826-2.97 1.922-5.114 1.413-1.858-.444-3.208-2.064-3.541-3.938l-1.922-10.91-14.578 2.573c-2.192.397-3.653 2.477-3.272 4.653l3.208 18.215a4.004 4.004 0 0 0 4.653 3.256z"
		}),
		/* @__PURE__ */ jsx("path", {
			fill: "#fffaef",
			d: "M20.915 45.508c.397 2.192 2.477 3.653 4.653 3.271l5.923-1.048c2.732-.476 5.336 1.35 5.813 4.066l1.032 5.844 28.92-31.508a5.03 5.03 0 0 1 5.113-1.413 5.05 5.05 0 0 1 3.541 3.938l1.922 10.879 13.944-2.541a4.024 4.024 0 0 0 3.24-4.653l-3.288-18.66a4.01 4.01 0 0 0-4.67-3.256L20.868 22.195c-2.192.38-3.637 2.477-3.256 4.653L20.9 45.492z"
		})
	] });
}
function RaftWordmarkArtwork() {
	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
		/* @__PURE__ */ jsx("path", {
			fill: "#141111",
			d: "M190.396 17.32c8.719 0 17.39 3.747 14.897 15.642-.715 3.399-2.271 6.289-4.701 8.703q-3.645 3.597-9.767 6.336c5.495 1.906 8.258 6.528 7.845 13.849-.444 7.734-1.064 17.93-1.064 17.93h-22.503c.54-7.036 1.747-17.168-.27-20.328-1.858-2.922-9.179-1.35-9.179-1.35l-4.574 21.677s-21.661.08-21.757 0l13.134-62.444h37.939zM176.119 29.5h-4.51s-2.922 13.53-3.192 15.389c8.338-.19 14.785-3.383 16.278-8.989 1.699-6.4-5.129-6.4-8.576-6.4M274.756 79.875h-23.551l-.191-12.42-16.087.16-4.876 12.26h-24.314l29.46-62.603h33.096zm-23.583-27.268-.111-21.058h-3.272l-8.226 21.042h11.609zM339.011 33.042h-23.615l-2.113 10.052h22.52l-3.701 16.294h-22.249l-4.288 20.407h-21.757l13.118-62.317h45.483l-3.382 15.563zM401.232 34.264h-16.389l-9.576 45.531-21.598-.08 9.56-45.45h-15.182l3.446-16.787h52.344l-2.62 16.786z"
		}),
		/* @__PURE__ */ jsx("path", {
			fill: "#141111",
			d: "M419.051 17.002c-1.287-1.493-5.511-5.48-6.75-6.75-2.271-2.334-5.193-3.89-8.448-3.89H296.91a11.116 11.116 0 0 0-10.878 8.83l-.89 4.192c-1.254-2.732-3.462-4.272-5.574-6.4-3.255-3.256-6.479-6.845-11.275-6.845h-33.096a11.11 11.11 0 0 0-10.053 6.384l-5.13 10.895c-.381-.572-.746-1.128-1.159-1.588-1.715-1.859-5.669-5.67-6.749-6.75-5.209-5.24-12.372-8.893-21.694-8.893h-37.939a11.12 11.12 0 0 0-10.879 8.83L128.461 77.46a11.1 11.1 0 0 0 3.303 10.433c1.302 1.207 5.431 5.527 6.749 6.75 3.224 3.001 5.972 3.08 10.99 3.08h18.39c2.62 0 5.05-1.032 6.972-2.588 1.969 1.604 4.447 2.589 7.003 2.589h59.411c2.366 0 4.24-.763 5.971-2.589 2.033 2.271 3.335 2.589 7.719 2.589l57.346-.064c5.256 0 9.798-3.684 10.878-8.83l2.446-11.577h17.199l-.032.175c-.683 3.271-.032 6.813 2.239 9.274 1.461 1.588 5.686 5.654 6.75 6.75 2.318 2.414 5.256 4.113 8.607 4.129l21.598.08h.048c5.257 0 9.799-3.685 10.879-8.83l7.718-36.702h7.369c5.478 0 10.132-3.986 10.989-9.401l2.621-16.786a11.08 11.08 0 0 0-2.541-8.941z"
		}),
		/* @__PURE__ */ jsx("path", {
			fill: "#fffaef",
			d: "M190.396 17.32c8.719 0 17.39 3.747 14.897 15.642-.715 3.399-2.271 6.289-4.701 8.703q-3.645 3.597-9.767 6.336c5.495 1.906 8.258 6.528 7.845 13.849-.444 7.734-1.064 17.93-1.064 17.93h-22.503c.54-7.036 1.747-17.168-.27-20.328-1.858-2.922-9.179-1.35-9.179-1.35l-4.574 21.677s-21.661.08-21.757 0l13.134-62.444h37.939zM176.119 29.5h-4.51s-2.922 13.53-3.192 15.389c8.338-.19 14.785-3.383 16.278-8.989 1.699-6.4-5.129-6.4-8.576-6.4M274.756 79.875h-23.551l-.191-12.42-16.087.16-4.876 12.26h-24.314l29.46-62.603h33.096zm-23.583-27.268-.111-21.058h-3.272l-8.226 21.042h11.609zM339.011 33.042h-23.615l-2.113 10.052h22.52l-3.701 16.294h-22.249l-4.288 20.407h-21.757l13.118-62.317h45.483l-3.382 15.563zM401.232 34.264h-16.389l-9.576 45.531-21.598-.08 9.56-45.45h-15.182l3.446-16.787h52.344l-2.62 16.786z"
		})
	] });
}
//#endregion
//#region src/components/mobile-nav/mobile-nav.tsx
const mobileNav = tv({ slots: {
	root: [
		"grid w-full flex-none grid-flow-col auto-cols-fr items-start gap-0",
		"border-t border-line-seam bg-layer-card px-2 pt-1.5 text-foreground-hint",
		"pb-[max(8px,min(env(safe-area-inset-bottom,0px),34px))]"
	],
	item: [
		"relative inline-flex shrink-0 items-center outline-none",
		"disabled:pointer-events-none disabled:opacity-45",
		"[&_svg]:shrink-0",
		"isolate min-w-0 flex-col justify-start gap-[7px] border-0 px-0 pt-1 pb-0",
		"font-sans text-[10px]/3 font-semibold text-foreground-hint",
		"*:relative *:z-10 [&_svg]:size-[22px] [&_svg]:stroke-2",
		"before:pointer-events-none before:absolute before:top-0 before:left-1/2 before:z-0 before:-translate-x-1/2",
		"before:h-[30px] before:w-14 before:rounded-control before:border-[1.5px] before:border-transparent before:content-['']",
		"active:before:bg-fill-pressed",
		"data-[selected=true]:font-bold data-[selected=true]:text-foreground",
		"data-[selected=true]:[&_svg]:text-sticker-ink",
		"data-[selected=true]:before:border-sticker-ink data-[selected=true]:before:bg-primary data-[selected=true]:before:ring-[1.5px] data-[selected=true]:before:ring-sticker-edge",
		"data-[selected=true]:active:before:press-overlay-sticker",
		"rounded-control focus-visible:shadow-raft-focus"
	],
	itemLabel: ["min-w-0 truncate", "max-w-full"]
} });
function MobileNavRoot({ className, render, ...props }) {
	const { root } = mobileNav();
	const defaultProps = {
		"data-slot": "mobile-nav-root",
		className: root({ className })
	};
	return useRender({
		defaultTagName: "nav",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function MobileNavItem({ nativeButton = true, selected, className, render, ...props }) {
	const { item } = mobileNav();
	const defaultProps = {
		type: nativeButton ? "button" : void 0,
		"aria-pressed": nativeButton ? selected : void 0,
		"data-slot": "mobile-nav-item",
		"data-selected": selected ? "true" : void 0,
		className: item({ className })
	};
	return useRender({
		render: render ?? /* @__PURE__ */ jsx(Button$1, {}),
		props: mergeProps(defaultProps, props)
	});
}
function MobileNavLabel({ className, render, ...props }) {
	const { itemLabel } = mobileNav();
	const defaultProps = {
		"data-slot": "mobile-nav-item-label",
		className: itemLabel({ className })
	};
	return useRender({
		defaultTagName: "span",
		render,
		props: mergeProps(defaultProps, props)
	});
}
//#endregion
//#region src/components/popover/popover.tsx
const popover = tv({ slots: {
	trigger: ["select-none"],
	positioner: ["isolate z-50 outline-none"],
	content: [
		"max-h-(--available-height) min-w-[220px] overflow-hidden",
		"outline-none",
		"rounded-container bg-layer-popover text-foreground",
		"shadow-raft-float ring-1 ring-line-seam"
	],
	header: ["flex items-center justify-between px-3", "min-h-11 gap-2 py-1.5 pr-2 pl-4"],
	separator: ["border-t", "border-line-muted"],
	title: ["m-0", "font-sans text-headline font-bold text-foreground"],
	description: ["m-0", "font-sans text-footnote text-foreground-muted"],
	close: [
		"inline-flex items-center justify-center",
		"outline-none transition-colors",
		"h-8 min-w-8 rounded-control px-1.5",
		"font-sans text-footnote font-bold text-foreground",
		"hover:bg-fill-pressed active:bg-fill-pressed",
		"focus-visible:shadow-raft-focus",
		"[&_svg]:size-4.5"
	],
	arrow: ["size-2 rotate-45", "border-l border-t border-line-seam bg-layer-popover"],
	backdrop: ["fixed inset-0", "bg-transparent"],
	viewport: ["block"]
} });
function Popover(props) {
	return /* @__PURE__ */ jsx(Popover$1.Root, {
		"data-slot": "popover",
		...props
	});
}
function PopoverTrigger({ className, ...props }) {
	const { trigger } = popover();
	return /* @__PURE__ */ jsx(Popover$1.Trigger, {
		"data-slot": "popover-trigger",
		className: trigger({ className }),
		...props
	});
}
function PopoverPortal(props) {
	return /* @__PURE__ */ jsx(Popover$1.Portal, {
		"data-slot": "popover-portal",
		...useThemeScopeProps(props)
	});
}
function PopoverPopup({ className, ...props }) {
	const { content } = popover();
	return /* @__PURE__ */ jsx("div", {
		"data-slot": "popover-content",
		className: content({ className }),
		...props
	});
}
function PopoverContent({ align = "start", alignOffset = 0, anchor, arrowPadding, collisionAvoidance, collisionBoundary, collisionPadding, disableAnchorTracking = true, positionMethod = "fixed", side = "bottom", sideOffset = 4, sticky, container, portalProps, className, ...props }) {
	const { positioner, content } = popover();
	const portalContainer = container !== void 0 ? container : portalProps?.container;
	return /* @__PURE__ */ jsx(PopoverPortal, {
		...portalProps,
		container: portalContainer,
		children: /* @__PURE__ */ jsx(Popover$1.Positioner, {
			align,
			alignOffset,
			anchor,
			arrowPadding,
			collisionAvoidance,
			collisionBoundary,
			collisionPadding,
			disableAnchorTracking,
			positionMethod,
			side,
			sideOffset,
			sticky,
			className: positioner(),
			children: /* @__PURE__ */ jsx(Popover$1.Popup, {
				"data-slot": "popover-content",
				className: content({ className }),
				...props
			})
		})
	});
}
function PopoverViewport({ className, ...props }) {
	const { viewport } = popover();
	return /* @__PURE__ */ jsx(Popover$1.Viewport, {
		"data-slot": "popover-viewport",
		className: viewport({ className }),
		...props
	});
}
function PopoverHeader({ className, ...props }) {
	const { header } = popover();
	return /* @__PURE__ */ jsx("div", {
		"data-slot": "popover-header",
		className: header({ className }),
		...props
	});
}
function PopoverSeparator({ className, ...props }) {
	const { separator } = popover();
	return /* @__PURE__ */ jsx("div", {
		role: "separator",
		"aria-orientation": "horizontal",
		"data-slot": "popover-separator",
		className: separator({ className }),
		...props
	});
}
function PopoverTitle({ className, ...props }) {
	const { title } = popover();
	return /* @__PURE__ */ jsx(Popover$1.Title, {
		"data-slot": "popover-title",
		className: title({ className }),
		...props
	});
}
function PopoverDescription({ className, ...props }) {
	const { description } = popover();
	return /* @__PURE__ */ jsx(Popover$1.Description, {
		"data-slot": "popover-description",
		className: description({ className }),
		...props
	});
}
function PopoverClose({ className, ...props }) {
	const { close } = popover();
	return /* @__PURE__ */ jsx(Popover$1.Close, {
		"data-slot": "popover-close",
		className: close({ className }),
		...props
	});
}
function PopoverArrow({ className, ...props }) {
	const { arrow } = popover();
	return /* @__PURE__ */ jsx(Popover$1.Arrow, {
		"data-slot": "popover-arrow",
		className: arrow({ className }),
		...props
	});
}
function PopoverBackdrop({ className, ...props }) {
	const { backdrop } = popover();
	return /* @__PURE__ */ jsx(Popover$1.Backdrop, {
		"data-slot": "popover-backdrop",
		className: backdrop({ className }),
		...props
	});
}
//#endregion
//#region src/components/preview-card/preview-card.tsx
const previewCard = tv({ slots: {
	trigger: [],
	positioner: ["isolate z-50 outline-none"],
	popup: [
		"max-h-(--available-height) min-w-[220px] overflow-hidden",
		"outline-none",
		"origin-(--transform-origin) transform-gpu opacity-100 will-change-[transform,opacity]",
		"transition-[opacity,transform] duration-250 ease-[cubic-bezier(0.22,1,0.36,1)]",
		"data-starting-style:scale-[0.97] data-starting-style:opacity-0",
		"data-ending-style:scale-[0.99] data-ending-style:opacity-0 data-ending-style:duration-150",
		"data-instant:transition-none motion-reduce:transition-none",
		"w-[300px] rounded-container bg-layer-popover text-foreground",
		"shadow-raft-float ring-1 ring-line-seam"
	],
	header: ["flex items-start gap-3", "px-4 pt-4 pb-3 last:pb-4"],
	separator: ["border-t", "border-line-muted"],
	title: ["m-0 truncate", "font-sans text-headline font-bold text-foreground"],
	description: ["m-0 truncate", "px-4 py-3 last:pb-4 font-sans text-callout text-foreground-muted"],
	arrow: ["size-2 rotate-45", "border-l border-t border-line-seam bg-layer-popover"]
} });
function PreviewCard(props) {
	return /* @__PURE__ */ jsx(PreviewCard$1.Root, {
		"data-slot": "preview-card",
		...props
	});
}
function PreviewCardTrigger({ delay = 80, closeDelay = 40, className, ...props }) {
	const { trigger } = previewCard();
	return /* @__PURE__ */ jsx(PreviewCard$1.Trigger, {
		"data-slot": "preview-card-trigger",
		delay,
		closeDelay,
		className: trigger({ className }),
		...props
	});
}
function PreviewCardPortal(props) {
	return /* @__PURE__ */ jsx(PreviewCard$1.Portal, {
		"data-slot": "preview-card-portal",
		...useThemeScopeProps(props)
	});
}
function PreviewCardPopup({ className, ...props }) {
	const themeState = useTheme();
	const { popup } = previewCard();
	const scopeProps = resolveThemeScopeProps({
		...props,
		className: popup({ className })
	}, themeState);
	return /* @__PURE__ */ jsx("div", {
		"data-slot": "preview-card-content",
		...scopeProps
	});
}
function PreviewCardContent({ align = "start", alignOffset = 0, anchor, arrowPadding, collisionAvoidance, collisionBoundary, collisionPadding, disableAnchorTracking = true, positionMethod = "fixed", side = "bottom", sideOffset = 6, sticky, portalProps, className, ...props }) {
	const { positioner, popup } = previewCard();
	return /* @__PURE__ */ jsx(PreviewCardPortal, {
		...portalProps,
		children: /* @__PURE__ */ jsx(PreviewCard$1.Positioner, {
			align,
			alignOffset,
			anchor,
			arrowPadding,
			collisionAvoidance,
			collisionBoundary,
			collisionPadding,
			disableAnchorTracking,
			positionMethod,
			side,
			sideOffset,
			sticky,
			className: positioner(),
			children: /* @__PURE__ */ jsx(PreviewCard$1.Popup, {
				"data-slot": "preview-card-content",
				className: popup({ className }),
				...props
			})
		})
	});
}
function PreviewCardHeader({ className, ...props }) {
	const { header } = previewCard();
	return /* @__PURE__ */ jsx("div", {
		"data-slot": "preview-card-header",
		className: header({ className }),
		...props
	});
}
function PreviewCardSeparator({ className, ...props }) {
	const { separator } = previewCard();
	return /* @__PURE__ */ jsx("div", {
		role: "separator",
		"aria-orientation": "horizontal",
		"data-slot": "preview-card-separator",
		className: separator({ className }),
		...props
	});
}
function PreviewCardTitle({ className, ...props }) {
	const { title } = previewCard();
	return /* @__PURE__ */ jsx("p", {
		"data-slot": "preview-card-title",
		className: title({ className }),
		...props
	});
}
function PreviewCardDescription({ className, ...props }) {
	const { description } = previewCard();
	return /* @__PURE__ */ jsx("p", {
		"data-slot": "preview-card-description",
		className: description({ className }),
		...props
	});
}
function PreviewCardArrow({ className, ...props }) {
	const { arrow } = previewCard();
	return /* @__PURE__ */ jsx(PreviewCard$1.Arrow, {
		"data-slot": "preview-card-arrow",
		className: arrow({ className }),
		...props
	});
}
//#endregion
//#region src/components/label/label.tsx
const label = tv({
	slots: {
		root: [
			"group/label inline-flex w-fit items-center gap-1",
			"cursor-pointer select-none",
			"text-sm leading-none",
			"data-disabled:cursor-not-allowed data-disabled:text-foreground-disabled",
			"font-sans font-semibold text-foreground-muted"
		],
		asterisk: ["group-data-disabled/label:text-foreground-disabled", "text-foreground-hint"],
		sub: [
			"normal-case",
			"group-data-disabled/label:text-foreground-disabled",
			"font-normal tracking-normal text-foreground-hint"
		]
	},
	variants: { size: {
		sm: { root: ["text-caption font-semibold"] },
		md: { root: ["text-footnote font-semibold"] }
	} },
	defaultVariants: { size: "md" }
});
function LabelRoot({ size, disabled, className, render, ...props }) {
	const { root } = label({ size });
	const defaultProps = {
		"aria-disabled": disabled ? true : void 0,
		"data-disabled": disabled ? "" : void 0,
		className: root({ className })
	};
	return useRender({
		defaultTagName: "label",
		render,
		props: mergeProps(defaultProps, props),
		state: {
			slot: "label",
			disabled: disabled ?? false
		}
	});
}
function LabelAsterisk({ className, children = "*", ...props }) {
	const { asterisk } = label();
	return /* @__PURE__ */ jsx("span", {
		"data-slot": "label-asterisk",
		className: asterisk({ className }),
		...props,
		children
	});
}
function LabelSub({ className, ...props }) {
	const { sub } = label();
	return /* @__PURE__ */ jsx("span", {
		"data-slot": "label-sub",
		className: sub({ className }),
		...props
	});
}
function LabelOptional({ children = "(optional)", ...props }) {
	return /* @__PURE__ */ jsx(LabelSub, {
		"data-slot": "label-optional",
		...props,
		children
	});
}
const Label = Object.assign(LabelRoot, {
	Asterisk: LabelAsterisk,
	Optional: LabelOptional,
	Sub: LabelSub
});
//#endregion
//#region src/components/input/input.recipe.ts
const input = tv({ slots: { root: [
	"h-11 w-full px-3 py-0 font-heading text-field font-field outline-none",
	"rounded-control border-[1.5px] border-line-strong bg-layer-card",
	"text-foreground placeholder:text-foreground-placeholder",
	"shadow-none transition-shadow duration-90 ease-out focus:shadow-raft-focus",
	"data-invalid:border-danger-strong",
	"disabled:cursor-not-allowed disabled:border-line-muted disabled:bg-fill-muted disabled:text-foreground-disabled disabled:placeholder:text-foreground-disabled"
] } });
//#endregion
//#region src/components/input/input.tsx
function Input({ suppressPasswordManager, className, "data-invalid": dataInvalid, ...props }) {
	const { root } = input();
	return /* @__PURE__ */ jsx(Input$1, {
		"data-slot": "input",
		className: root({ className: [suppressPasswordManager && "keeper-ignore", className] }),
		"data-1p-ignore": suppressPasswordManager ? "true" : void 0,
		"data-bwignore": suppressPasswordManager ? "true" : void 0,
		"data-form-type": suppressPasswordManager ? "other" : void 0,
		"data-lpignore": suppressPasswordManager ? "true" : void 0,
		...props,
		"data-invalid": dataInvalid || void 0,
		"aria-invalid": dataInvalid ? "true" : void 0
	});
}
//#endregion
//#region src/components/field/field.tsx
const field = tv({
	slots: {
		root: ["group/field flex flex-col gap-1.5"],
		item: ["group/field-item flex items-start gap-2", "*:data-[slot=checkbox]:mt-px"],
		label: [
			"block leading-none",
			"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"]
	},
	variants: { size: {
		sm: { label: ["text-caption font-semibold"] },
		md: { label: ["text-footnote font-semibold"] }
	} },
	defaultVariants: { size: "md" }
});
function Field({ className, ...props }) {
	const { root } = field();
	return /* @__PURE__ */ jsx(Field$1.Root, {
		"data-slot": "field",
		className: root({ className }),
		...props
	});
}
function FieldItem({ className, ...props }) {
	const { item } = field();
	return /* @__PURE__ */ jsx(Field$1.Item, {
		"data-slot": "field-item",
		className: item({ className }),
		...props
	});
}
function FieldLabel({ size, required, optional, className, children, ...props }) {
	const { label } = field({ size });
	return /* @__PURE__ */ jsxs(Field$1.Label, {
		"data-slot": "field-label",
		className: label({ className }),
		...props,
		children: [
			children,
			required ? /* @__PURE__ */ jsx(LabelAsterisk, { className: "ml-1" }) : null,
			optional ? /* @__PURE__ */ jsx(LabelOptional, { className: "ml-1" }) : null
		]
	});
}
function FieldDescription({ className, ...props }) {
	const { description } = field();
	return /* @__PURE__ */ jsx(Field$1.Description, {
		"data-slot": "field-description",
		className: description({ className }),
		...props
	});
}
function FieldError({ className, role = "alert", ...props }) {
	const { error } = field();
	return /* @__PURE__ */ jsx(Field$1.Error, {
		"data-slot": "field-error",
		role,
		className: error({ className }),
		...props
	});
}
function FieldControl(props) {
	return /* @__PURE__ */ jsx(Field$1.Control, {
		"data-slot": "field-control",
		...props
	});
}
function FieldValidity(props) {
	return /* @__PURE__ */ jsx(Field$1.Validity, { ...props });
}
//#endregion
//#region src/components/input-group/input-group.tsx
const inputGroup = tv({
	slots: {
		root: [
			"group/input-group relative flex w-full min-w-0 items-center",
			"has-data-[input-group-trim=inline-end]:[--ig-control-pr:0]",
			"h-11 overflow-hidden rounded-control border-[1.5px] border-line-strong bg-layer-card text-foreground",
			"shadow-none transition-shadow duration-90 ease-out focus-within:shadow-raft-focus",
			"has-[[data-slot=input-group-control][data-invalid]]:border-danger-strong",
			"has-[[data-slot=input-group-control]:disabled]:cursor-not-allowed has-[[data-slot=input-group-control]:disabled]:border-line-muted has-[[data-slot=input-group-control]:disabled]:bg-fill-muted",
			"has-[[data-slot=input-group-control]:disabled]:[--ig-addon-fg:var(--foreground-disabled)]",
			"has-[[data-slot=input-group-control]:disabled]:[--ig-text-fg:var(--foreground-disabled)]"
		],
		addon: [
			"flex shrink-0 items-center justify-center gap-2 px-3",
			"select-none",
			"text-(--ig-addon-fg,var(--ig-addon-fg-default,var(--foreground-hint)))",
			"[&>svg:not([class*='size-'])]:size-4.5"
		],
		text: [
			"flex shrink-0 items-center px-3",
			"select-none whitespace-nowrap",
			"font-mono text-mono-code",
			"text-(--ig-text-fg,var(--ig-text-fg-default,var(--foreground-hint)))"
		],
		control: [
			"min-w-0 flex-1 bg-transparent pl-3 outline-none",
			"pr-(--ig-control-pr,0.75rem)",
			"h-full py-0 font-heading text-field font-field",
			"text-foreground placeholder:text-foreground-placeholder",
			"disabled:cursor-not-allowed disabled:text-foreground-disabled disabled:placeholder:text-foreground-disabled"
		]
	},
	variants: {
		align: {
			"inline-start": {
				addon: "order-first",
				text: "order-first"
			},
			"inline-end": {
				addon: "order-last",
				text: "order-last"
			}
		},
		variant: {
			default: {},
			container: {
				addon: [
					"self-stretch",
					"[--ig-addon-fg-default:var(--foreground-placeholder)]",
					"border-line-muted bg-fill-muted"
				],
				text: [
					"self-stretch",
					"[--ig-text-fg-default:var(--foreground-placeholder)]",
					"border-line-muted bg-fill-muted"
				]
			}
		}
	},
	compoundVariants: [
		{
			variant: "default",
			align: "inline-start",
			class: {
				addon: "[&~[data-slot=input-group-control]]:pl-0",
				text: "[&~[data-slot=input-group-control]]:pl-0"
			}
		},
		{
			variant: "container",
			align: "inline-start",
			class: {
				addon: "border-r",
				text: "border-r"
			}
		},
		{
			variant: "container",
			align: "inline-end",
			class: {
				addon: "border-l",
				text: "border-l"
			}
		},
		{
			variant: "default",
			align: "inline-start",
			class: {
				addon: "pr-2",
				text: "pr-0.5"
			}
		},
		{
			variant: "default",
			align: "inline-end",
			class: {
				addon: "pl-2",
				text: "pl-0.5"
			}
		}
	],
	defaultVariants: {
		align: "inline-start",
		variant: "default"
	}
});
function InputGroup({ className, ...props }) {
	const { root } = inputGroup();
	return /* @__PURE__ */ jsx("div", {
		"data-slot": "input-group",
		className: root({ className }),
		...props
	});
}
function InputGroupAddonRoot({ align = "inline-start", variant = "default", className, ...props }) {
	const { addon } = inputGroup({
		align,
		variant
	});
	return /* @__PURE__ */ jsx("div", {
		"data-slot": "input-group-addon",
		"data-align": align,
		"data-variant": variant,
		"data-input-group-trim": variant === "default" && align === "inline-end" ? align : void 0,
		className: addon({ className }),
		...props
	});
}
function TextAddon({ align = "inline-start", variant = "default", className, ...props }) {
	const { text } = inputGroup({
		align,
		variant
	});
	return /* @__PURE__ */ jsx("span", {
		"data-slot": "input-group-text",
		"data-align": align,
		"data-variant": variant,
		"data-input-group-trim": variant === "default" && align === "inline-end" ? align : void 0,
		className: text({ className }),
		...props
	});
}
const InputGroupAddon = Object.assign(InputGroupAddonRoot, { Text: TextAddon });
function InputGroupInput({ className, suppressPasswordManager, "data-invalid": dataInvalid, ...props }) {
	const { control } = inputGroup();
	return /* @__PURE__ */ jsx(Input$1, {
		"data-slot": "input-group-control",
		className: control({ className: [suppressPasswordManager && "keeper-ignore", className] }),
		"data-1p-ignore": suppressPasswordManager ? "true" : void 0,
		"data-bwignore": suppressPasswordManager ? "true" : void 0,
		"data-form-type": suppressPasswordManager ? "other" : void 0,
		"data-lpignore": suppressPasswordManager ? "true" : void 0,
		...props,
		"data-invalid": dataInvalid || void 0,
		"aria-invalid": dataInvalid ? "true" : void 0
	});
}
//#endregion
//#region src/components/combobox/combobox.tsx
const combobox = tv({
	slots: {
		trigger: [
			"inline-flex select-none items-center justify-between",
			"outline-none transition-colors",
			"**:data-[slot='button-content']:w-full **:data-[slot='button-content']:justify-between",
			"[&>span[data-slot='combobox-trigger-content']]:min-w-0 [&>span[data-slot='combobox-trigger-content']]:flex-1",
			"[&>span[data-slot='combobox-trigger-content']>svg]:shrink-0",
			"h-8 gap-1.5 rounded-control border-transparent bg-transparent px-2.5",
			"text-footnote font-semibold text-foreground-muted",
			"inset-ring inset-ring-line-seam hover:bg-transparent",
			"data-has-value:bg-info-soft data-has-value:text-foreground data-has-value:inset-ring-0 data-has-value:hover:bg-info-soft",
			"focus-visible:shadow-raft-focus",
			"disabled:inset-ring-0 aria-disabled:inset-ring-0",
			"[&>span[data-slot='combobox-trigger-content']>svg:not([class*='size-'])]:size-3.5",
			"[&>span[data-slot='combobox-trigger-content']>svg:not([class*='stroke-'])]:stroke-2"
		],
		triggerCount: ["inline-flex shrink-0 items-center justify-center", "h-auto min-w-0 px-0 font-mono text-mono-meta font-bold"],
		triggerIndicator: [
			"ml-auto flex shrink-0 items-center justify-center",
			"transition-[background-color,color] duration-100",
			"[&>svg]:shrink-0",
			"rounded-sticker text-foreground-hint opacity-100",
			"hover:bg-transparent hover:text-foreground-hint",
			"[&>svg]:size-3.5 [&>svg]:stroke-2 [&>svg_*]:stroke-2"
		],
		control: [
			"flex min-w-0 items-center gap-2",
			"outline-none",
			"[&>svg]:pointer-events-none [&>svg]:shrink-0",
			"[&_[data-slot='combobox-clear']]:size-5 [&_[data-slot='combobox-clear']]:min-w-5 **:data-[slot='combobox-clear']:shrink-0",
			"[&_[data-slot='combobox-trigger-indicator']]:size-4",
			"[&_[data-slot='combobox-trigger-indicator']>svg]:shrink-0",
			"min-h-11 rounded-control border-[1.5px] border-line-strong bg-layer-card px-3 py-0",
			"font-sans text-body text-foreground",
			"transition-shadow duration-90 ease-out focus-within:shadow-raft-focus",
			"[&>svg]:text-foreground-hint [&>svg:not([class*='size-'])]:size-4.5",
			"[&>svg:not([class*='stroke-'])]:stroke-2",
			"[&_[data-slot='combobox-trigger-indicator']>svg]:size-4"
		],
		inputGroup: [
			"flex items-center border-b",
			"h-10 gap-2 border-line-muted bg-transparent px-3 py-0",
			"text-callout text-foreground-hint",
			"[&>svg]:size-4 [&>svg]:shrink-0",
			"first:rounded-t-container focus-within:inset-ring-2 focus-within:inset-ring-foreground"
		],
		input: ["w-full outline-none"],
		positioner: ["isolate z-50 outline-none"],
		content: [
			"h-auto max-h-(--available-height) min-w-[220px] overflow-hidden",
			"outline-none",
			"rounded-container bg-layer-popover text-foreground",
			"shadow-raft-float ring-1 ring-line-seam"
		],
		header: ["flex items-center justify-between px-3", "gap-2 py-1.5 pr-1.5 pl-4"],
		separator: ["h-px shrink-0 border-0", "bg-line-muted"],
		list: ["max-h-64 overflow-y-auto overscroll-contain", "flex flex-col p-1.5 scroll-py-1.5"],
		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",
			"bg-transparent hover:bg-primary-soft data-highlighted:bg-primary-soft",
			"data-selected: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: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"],
		label: ["m-0", "font-sans text-caption font-bold text-foreground-hint"],
		clear: [
			"inline-flex items-center justify-center",
			"pointer-events-none opacity-0 outline-none transition-[background-color,color] duration-100",
			"data-visible:pointer-events-auto data-visible:opacity-100",
			"h-7 min-w-0 rounded-control px-2",
			"font-sans text-footnote font-semibold text-foreground-muted",
			"hover:bg-fill-pressed hover:text-foreground active:bg-fill-pressed",
			"focus-visible:shadow-raft-focus",
			"[&>svg]:size-4 [&>svg]:stroke-2 [&>svg_*]:stroke-2"
		],
		empty: ["px-4 py-3.5 text-left text-callout text-foreground-hint"],
		groupLabel: ["py-2", "px-2.5 pt-2 pb-1 text-caption font-bold text-foreground-hint"],
		chips: [
			"flex flex-wrap items-center",
			"min-h-11 gap-1.5 rounded-control border-[1.5px] border-line-strong bg-layer-card py-1.5 pr-3 pl-1.5",
			"transition-shadow duration-90 ease-out focus-within:shadow-raft-focus"
		],
		chip: [
			"inline-flex items-center",
			"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",
			"size-[22px] rounded-sticker text-foreground-hint",
			"hover:bg-fill-pressed active:bg-fill-pressed focus-visible:shadow-raft-focus",
			"[&>svg]:size-3.5"
		]
	},
	variants: { inputOwner: {
		group: { input: ["min-w-0 flex-1 border-0 bg-transparent p-0", "font-sans text-callout text-foreground placeholder:text-foreground-hint"] },
		control: { input: [
			"min-w-0 flex-1 rounded-none border-0 bg-transparent p-0 shadow-none",
			"outline-none ring-0 focus:border-transparent focus:ring-0 focus-visible:ring-0 focus-visible:ring-offset-0",
			"font-sans text-body font-normal text-foreground",
			"placeholder:text-foreground-placeholder"
		] }
	} }
});
const ComboboxContext = createContext({
	hasValue: false,
	visible: false
});
const ComboboxInputOwnerContext = createContext("group");
function hasClearableValue(value) {
	if (Array.isArray(value)) return value.length > 0;
	return value != null;
}
function hasClearableInputValue(value) {
	if (Array.isArray(value)) return value.length > 0;
	if (typeof value === "string") return value.length > 0;
	if (typeof value === "number") return true;
	return value != null;
}
function Combobox({ defaultInputValue, defaultValue, inputValue, onInputValueChange, onValueChange, value, ...props }) {
	const [uncontrolledInputValue, setUncontrolledInputValue] = useState(defaultInputValue ?? "");
	const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
	const resolvedInputValue = inputValue === void 0 ? uncontrolledInputValue : inputValue;
	const hasValue = hasClearableValue(value === void 0 ? uncontrolledValue : value);
	const visible = hasValue || hasClearableInputValue(resolvedInputValue);
	const contextValue = useMemo(() => ({
		hasValue,
		visible
	}), [hasValue, visible]);
	const handleInputValueChange = useCallback((nextInputValue, eventDetails) => {
		if (inputValue === void 0) setUncontrolledInputValue(nextInputValue);
		onInputValueChange?.(nextInputValue, eventDetails);
	}, [inputValue, onInputValueChange]);
	const handleValueChange = useCallback((nextValue, eventDetails) => {
		if (value === void 0) setUncontrolledValue(nextValue);
		onValueChange?.(nextValue, eventDetails);
	}, [value, onValueChange]);
	return /* @__PURE__ */ jsx(ComboboxContext.Provider, {
		value: contextValue,
		children: /* @__PURE__ */ jsx(Combobox$1.Root, {
			"data-slot": "combobox",
			defaultInputValue,
			defaultValue,
			inputValue,
			value,
			onInputValueChange: handleInputValueChange,
			onValueChange: handleValueChange,
			...props
		})
	});
}
function ComboboxLabel({ className, ...props }) {
	const { label } = combobox();
	return /* @__PURE__ */ jsx(Combobox$1.Label, {
		"data-slot": "combobox-label",
		className: label({ className }),
		...props
	});
}
function ComboboxValue(props) {
	return /* @__PURE__ */ jsx(Combobox$1.Value, {
		"data-slot": "combobox-value",
		...props
	});
}
function ComboboxTrigger({ className, children, render, ...props }) {
	const { hasValue } = use(ComboboxContext);
	const { trigger } = combobox();
	return /* @__PURE__ */ jsx(Combobox$1.Trigger, {
		"data-slot": "combobox-trigger",
		"data-has-value": hasValue ? "" : void 0,
		render: render ?? /* @__PURE__ */ jsx(Button, {
			variant: "outline",
			size: "md",
			className: trigger({ className })
		}),
		...props,
		children: /* @__PURE__ */ jsx("span", {
			"data-slot": "combobox-trigger-content",
			"data-picker-trigger-content": "combobox",
			className: "flex min-w-0 flex-1 items-center gap-1.5",
			children
		})
	});
}
function ComboboxTriggerCount({ className, ...props }) {
	const { triggerCount } = combobox();
	return /* @__PURE__ */ jsx("span", {
		"data-slot": "combobox-trigger-count",
		className: triggerCount({ className }),
		...props
	});
}
function ComboboxTriggerIndicator({ className, ...props }) {
	const { triggerIndicator } = combobox();
	return /* @__PURE__ */ jsx("span", {
		"data-slot": "combobox-trigger-indicator",
		"data-picker-trigger-indicator": "",
		className: triggerIndicator({ className }),
		...props
	});
}
function ComboboxInputGroup({ className, ...props }) {
	const { inputGroup } = combobox();
	return /* @__PURE__ */ jsx(ComboboxInputOwnerContext, {
		value: "group",
		children: /* @__PURE__ */ jsx(Combobox$1.InputGroup, {
			"data-slot": "combobox-input-group",
			className: inputGroup({ className }),
			...props
		})
	});
}
function ComboboxControl({ className, ...props }) {
	const { control } = combobox();
	return /* @__PURE__ */ jsx(ComboboxInputOwnerContext, {
		value: "control",
		children: /* @__PURE__ */ jsx(Combobox$1.InputGroup, {
			"data-slot": "combobox-control",
			className: control({ className }),
			...props
		})
	});
}
function ComboboxInput({ suppressPasswordManager, className, ...props }) {
	const inputOwner = use(ComboboxInputOwnerContext);
	const { input } = combobox({ inputOwner });
	return /* @__PURE__ */ jsx(Combobox$1.Input, {
		"data-slot": "combobox-input",
		className: input({ className: [suppressPasswordManager && "keeper-ignore", className] }),
		"data-1p-ignore": suppressPasswordManager ? "true" : void 0,
		"data-bwignore": suppressPasswordManager ? "true" : void 0,
		"data-form-type": suppressPasswordManager ? "other" : void 0,
		"data-lpignore": suppressPasswordManager ? "true" : void 0,
		...props
	});
}
function ComboboxPortal(props) {
	return /* @__PURE__ */ jsx(Combobox$1.Portal, {
		"data-slot": "combobox-portal",
		...useThemeScopeProps(props)
	});
}
function ComboboxPopup({ className, ...props }) {
	const { content } = combobox();
	return /* @__PURE__ */ jsx("div", {
		"data-slot": "combobox-content",
		className: content({ className }),
		...props
	});
}
function ComboboxHeader({ className, ...props }) {
	const { header } = combobox();
	return /* @__PURE__ */ jsx("div", {
		"data-slot": "combobox-header",
		className: header({ className }),
		...props
	});
}
function ComboboxSeparator({ className, ...props }) {
	const { separator } = combobox();
	return /* @__PURE__ */ jsx("div", {
		role: "separator",
		"aria-orientation": "horizontal",
		"data-slot": "combobox-separator",
		className: separator({ className }),
		...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 }) {
	const { positioner, content } = combobox();
	return /* @__PURE__ */ jsx(ComboboxPortal, {
		...portalProps,
		children: /* @__PURE__ */ jsx(Combobox$1.Positioner, {
			align,
			alignOffset,
			anchor,
			arrowPadding,
			collisionAvoidance,
			collisionBoundary,
			collisionPadding,
			disableAnchorTracking,
			positionMethod,
			side,
			sideOffset: sideOffset ?? 4,
			sticky,
			className: positioner(),
			children: /* @__PURE__ */ jsx(Combobox$1.Popup, {
				"data-slot": "combobox-content",
				className: content({ className }),
				initialFocus,
				finalFocus,
				...props
			})
		})
	});
}
function ComboboxList({ className, ...props }) {
	const { list } = combobox();
	return /* @__PURE__ */ jsx(Combobox$1.List, {
		"data-slot": "combobox-list",
		className: list({ className }),
		...props
	});
}
function ComboboxItem({ className, ...props }) {
	const { item } = combobox();
	return /* @__PURE__ */ jsx(Combobox$1.Item, {
		"data-slot": "combobox-item",
		className: item({ className }),
		...props
	});
}
function ComboboxItemIndicator({ className, children, ...props }) {
	const { itemIndicator } = combobox();
	return /* @__PURE__ */ jsx(Combobox$1.ItemIndicator, {
		"data-slot": "combobox-item-indicator",
		className: itemIndicator({ className }),
		...props,
		children: children ?? /* @__PURE__ */ jsx(Check, {
			"aria-hidden": true,
			className: "size-3.5 shrink-0 stroke-[1.5]"
		})
	});
}
function ComboboxClear({ className, children, keepMounted = true, ...props }) {
	const { visible } = use(ComboboxContext);
	const { clear } = combobox();
	return /* @__PURE__ */ jsx(Combobox$1.Clear, {
		"data-slot": "combobox-clear",
		"data-visible": visible ? "" : void 0,
		"aria-hidden": visible ? props["aria-hidden"] : true,
		keepMounted,
		className: clear({ className }),
		...props,
		children: children ?? /* @__PURE__ */ jsx(X, {
			"aria-hidden": true,
			className: "size-3.5 shrink-0"
		})
	});
}
function ComboboxEmpty({ className, children, ...props }) {
	const { empty } = combobox();
	return /* @__PURE__ */ jsx(Combobox$1.Empty, {
		"data-slot": "combobox-empty",
		...props,
		children: children == null ? null : /* @__PURE__ */ jsx("div", {
			"data-slot": "combobox-empty-content",
			className: empty({ className }),
			children
		})
	});
}
function ComboboxGroup({ className, ...props }) {
	return /* @__PURE__ */ jsx(Combobox$1.Group, {
		"data-slot": "combobox-group",
		className,
		...props
	});
}
function ComboboxGroupLabel({ className, ...props }) {
	const { groupLabel } = combobox();
	return /* @__PURE__ */ jsx(Combobox$1.GroupLabel, {
		"data-slot": "combobox-group-label",
		className: groupLabel({ className }),
		...props
	});
}
function ComboboxRow({ className, ...props }) {
	return /* @__PURE__ */ jsx(Combobox$1.Row, {
		"data-slot": "combobox-row",
		className,
		...props
	});
}
function ComboboxCollection(props) {
	return /* @__PURE__ */ jsx(Combobox$1.Collection, {
		"data-slot": "combobox-collection",
		...props
	});
}
function ComboboxChips({ className, ...props }) {
	const { chips } = combobox();
	return /* @__PURE__ */ jsx(Combobox$1.Chips, {
		"data-slot": "combobox-chips",
		className: chips({ className }),
		...props
	});
}
function ComboboxChip({ className, ...props }) {
	const { chip } = combobox();
	return /* @__PURE__ */ jsx(Combobox$1.Chip, {
		"data-slot": "combobox-chip",
		className: chip({ className }),
		...props
	});
}
function ComboboxChipRemove({ className, children, ...props }) {
	const { chipRemove } = combobox();
	return /* @__PURE__ */ jsx(Combobox$1.ChipRemove, {
		"data-slot": "combobox-chip-remove",
		className: chipRemove({ className }),
		...props,
		children: children ?? /* @__PURE__ */ jsx(X, {
			"aria-hidden": true,
			className: "size-3 shrink-0"
		})
	});
}
//#endregion
//#region src/components/picker-trigger-button/picker-trigger-button.tsx
const pickerTriggerButton = tv({ base: [
	"relative inline-flex h-8 shrink-0 items-center justify-center",
	"whitespace-nowrap select-none",
	"outline-[1px] outline-offset-2 outline-transparent transition-colors duration-100 focus-visible:outline-transparent",
	"disabled:pointer-events-none disabled:transform-none",
	"has-data-[icon=inline-start]:pl-2.5 has-data-[icon=inline-end]:pr-2.5",
	"[&_svg]:pointer-events-none [&_svg]:shrink-0 **:data-icon:size-[1em]",
	"gap-1.5 rounded-control border-0 bg-transparent px-2.5 py-0",
	"font-sans text-footnote font-semibold text-foreground-muted",
	"inset-ring inset-ring-line-seam",
	"hover:bg-fill-pressed active:bg-fill-pressed",
	"data-has-value:bg-info-soft data-has-value:text-foreground data-has-value:inset-ring-0",
	"data-has-value:hover:bg-info-soft data-has-value:hover:press-overlay data-has-value:active:press-overlay",
	"data-invalid:inset-ring data-invalid:inset-ring-danger-strong",
	"focus-visible:shadow-raft-focus",
	"disabled:bg-fill-muted disabled:text-foreground-disabled disabled:opacity-100 disabled:inset-ring-0",
	"[&_svg:not([class*='size-'])]:size-3.5 [&_svg:not([class*='stroke-'])]:stroke-2",
	"**:data-picker-trigger-indicator:text-foreground-hint **:data-picker-trigger-indicator:opacity-100",
	"[&_[data-picker-trigger-indicator]>svg]:size-3.5 [&_[data-picker-trigger-indicator]>svg]:stroke-2 [&_[data-picker-trigger-indicator]>svg_*]:stroke-2"
] });
function PickerTriggerButton({ className, render, nativeButton, ...props }) {
	return /* @__PURE__ */ jsx(Button$1, {
		...props,
		render,
		nativeButton: nativeButton ?? defaultNativeButton(render),
		"data-slot": "picker-trigger-button",
		className: pickerTriggerButton({ className })
	});
}
//#endregion
//#region src/components/select/select.tsx
const select = tv({
	slots: {
		trigger: [
			"inline-flex select-none items-center justify-between",
			"outline-none transition-colors",
			"data-invalid:focus-visible:ring-[color-mix(in_oklch,var(--danger)_60%,transparent)]",
			"**:data-[slot='button-content']:w-full **:data-[slot='button-content']:justify-between",
			"[&>span[data-slot='select-trigger-content']]:min-w-0 [&>span[data-slot='select-trigger-content']]:flex-1",
			"[&_[data-slot='select-trigger-content']_svg]:shrink-0",
			"h-11 w-full gap-2 pr-3 pl-3.5",
			"text-subhead font-semibold text-foreground",
			"data-placeholder:font-medium data-placeholder:text-foreground-hint",
			"data-invalid:border-danger-strong data-invalid:hover:border-danger-strong",
			"data-invalid:focus-visible:border-danger-strong data-invalid:focus-visible:ring-0",
			"[&_[data-slot='select-trigger-content']_svg:not([class*='size-'])]:size-4",
			"[&_[data-slot='select-trigger-content']_svg:not([class*='stroke-'])]:stroke-2"
		],
		icon: [
			"ml-auto flex shrink-0 items-center justify-center transition-transform",
			"[&>svg]:shrink-0",
			"text-foreground-hint opacity-100",
			"[&>svg]:size-4 [&>svg]:stroke-2 [&>svg_*]:stroke-2"
		],
		value: ["flex min-w-0 flex-1 truncate text-left"],
		positioner: ["isolate z-50 outline-none"],
		content: [
			"relative max-h-(--available-height) min-w-[max(var(--anchor-width),220px)] overflow-hidden",
			"outline-none",
			"rounded-container bg-layer-popover p-1.5 text-foreground",
			"shadow-raft-float ring-1 ring-line-seam"
		],
		list: ["max-h-64 overflow-y-auto overscroll-contain scroll-py-6", "flex flex-col"],
		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",
			"text-callout font-medium text-foreground",
			"bg-transparent hover:bg-primary-soft data-highlighted:bg-primary-soft",
			"data-selected:font-bold data-selected:**:data-[slot='select-item-text']:font-bold",
			"data-disabled:pointer-events-none data-disabled:text-foreground-disabled",
			"[&>svg]:pointer-events-none [&>svg]:shrink-0 [&>svg]:text-foreground-icon",
			"[&>svg:not([class*='size-'])]:size-4",
			"[&>svg:not([class*='stroke-'])]:stroke-2"
		],
		itemLeading: [
			"flex shrink-0 items-center justify-center",
			"[&_svg]:pointer-events-none [&_svg]:shrink-0",
			"size-4 text-foreground-icon",
			"[&>svg]:pointer-events-none [&>svg]:shrink-0",
			"[&>svg:not([class*='size-'])]:size-4",
			"[&>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"],
		label: ["m-0", "font-sans text-footnote font-semibold text-foreground-muted"],
		group: ["flex flex-col"],
		groupLabel: ["py-2", "px-2.5 pt-2 pb-1 text-caption font-bold text-foreground-hint"],
		separator: ["h-px shrink-0 border-0", "-mx-1.5 my-1.5 bg-line-muted"],
		scrollArrow: [
			"absolute inset-x-0 z-10 flex h-6 w-full cursor-default items-center justify-center",
			"outline-none transition-colors",
			"data-[direction=up]:top-0 data-[direction=down]:bottom-0",
			"[&_svg]:pointer-events-none [&_svg]:shrink-0",
			"bg-layer-popover text-foreground-hint"
		],
		empty: ["px-2.5 py-2 text-left text-callout text-foreground-hint"]
	},
	variants: { chrome: {
		default: {},
		field: {
			trigger: [
				"px-3 text-field font-field",
				"**:data-[slot='button-content']:font-field **:data-[slot='select-value']:font-field",
				"h-11 py-0",
				"data-placeholder:font-field"
			],
			item: ["text-field font-field", "**:data-[slot='select-item-text']:font-field"]
		}
	} },
	defaultVariants: { chrome: "default" }
});
/**
* Declared once on the root and read by both the trigger and the popup.
*
* The popup renders through a portal, so it has no DOM ancestor in common with
* its trigger. React context follows the component tree rather than the DOM,
* so both ends read one source instead of each resolving its own — which is
* what lets a Select keep the same typography whether its content mounts at the
* document root or into a `portalProps.container`.
*
* Deliberately NOT a prop on the trigger and another on the content: that shape
* asks every callsite to restate the decision, which is exactly the duplication
* this variant exists to remove.
*/
const SelectChromeContext = createContext("default");
function useSelectChrome() {
	return useContext(SelectChromeContext);
}
function Select({ chrome = "default", ...props }) {
	return /* @__PURE__ */ jsx(SelectChromeContext, {
		value: chrome,
		children: /* @__PURE__ */ jsx(Select$1.Root, {
			"data-slot": "select",
			"data-chrome": chrome,
			...props
		})
	});
}
function SelectTrigger({ className, children, render, "data-invalid": dataInvalid, ...props }) {
	const chrome = useSelectChrome();
	const { trigger } = select({ chrome });
	return /* @__PURE__ */ jsx(Select$1.Trigger, {
		"data-slot": "select-trigger",
		render: render ?? /* @__PURE__ */ jsx(Button, {
			variant: "outline",
			size: "md",
			className: trigger({ className })
		}),
		...props,
		"data-invalid": dataInvalid || void 0,
		"aria-invalid": dataInvalid ? "true" : void 0,
		children: /* @__PURE__ */ jsx("span", {
			"data-slot": "select-trigger-content",
			"data-picker-trigger-content": "select",
			className: "flex min-w-0 flex-1 items-center gap-1.5",
			children
		})
	});
}
function SelectValue({ className, ...props }) {
	const { value } = select();
	return /* @__PURE__ */ jsx(Select$1.Value, {
		"data-slot": "select-value",
		className: value({ className }),
		...props
	});
}
function SelectIcon({ className, children, ...props }) {
	const { icon } = select();
	return /* @__PURE__ */ jsx(Select$1.Icon, {
		"data-slot": "select-icon",
		"data-picker-trigger-indicator": "",
		className: icon({ className }),
		...props,
		children: children ?? /* @__PURE__ */ jsx(ChevronDown, {
			"aria-hidden": true,
			className: "size-3.5 shrink-0"
		})
	});
}
function SelectPortal(props) {
	return /* @__PURE__ */ jsx(Select$1.Portal, {
		"data-slot": "select-portal",
		...useThemeScopeProps(props)
	});
}
function SelectPopup({ className, ...props }) {
	const { content } = select();
	return /* @__PURE__ */ jsx("div", {
		"data-slot": "select-content",
		className: content({ className }),
		...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 }) {
	const { positioner, content } = select();
	const positionerNode = /* @__PURE__ */ jsx(Select$1.Positioner, {
		align,
		alignItemWithTrigger,
		alignOffset,
		anchor,
		arrowPadding,
		collisionAvoidance,
		collisionBoundary,
		collisionPadding,
		disableAnchorTracking,
		positionMethod,
		side,
		sideOffset: sideOffset ?? 4,
		sticky,
		className: positioner(),
		children: /* @__PURE__ */ jsx(Select$1.Popup, {
			"data-slot": "select-content",
			className: content({ className }),
			...props
		})
	});
	return /* @__PURE__ */ jsx(SelectPortal, {
		...portalProps,
		children: positionerNode
	});
}
function SelectList({ className, ...props }) {
	const { list } = select();
	return /* @__PURE__ */ jsx(Select$1.List, {
		"data-slot": "select-list",
		className: list({ className }),
		...props
	});
}
function SelectItem({ className, ...props }) {
	const chrome = useSelectChrome();
	const { item } = select({ chrome });
	return /* @__PURE__ */ jsx(Select$1.Item, {
		"data-slot": "select-item",
		className: item({ className }),
		...props
	});
}
function SelectItemLeading({ className, ...props }) {
	const { itemLeading } = select();
	return /* @__PURE__ */ jsx("span", {
		"data-slot": "select-item-leading",
		className: itemLeading({ className }),
		...props
	});
}
function SelectItemIndicator({ className, children, ...props }) {
	const { itemIndicator } = select();
	const defaultIndicator = /* @__PURE__ */ jsx(Check, {
		"aria-hidden": true,
		className: "size-3 shrink-0"
	});
	return /* @__PURE__ */ jsx(Select$1.ItemIndicator, {
		"data-slot": "select-item-indicator",
		className: itemIndicator({ className }),
		...props,
		children: children ?? defaultIndicator
	});
}
function SelectItemText({ className, ...props }) {
	const { itemText } = select();
	return /* @__PURE__ */ jsx(Select$1.ItemText, {
		"data-slot": "select-item-text",
		className: itemText({ className }),
		...props
	});
}
function SelectLabel({ className, ...props }) {
	const { label } = select();
	return /* @__PURE__ */ jsx(Select$1.Label, {
		"data-slot": "select-label",
		className: label({ className }),
		...props
	});
}
function SelectGroup({ className, ...props }) {
	const { group } = select();
	return /* @__PURE__ */ jsx(Select$1.Group, {
		"data-slot": "select-group",
		className: group({ className }),
		...props
	});
}
function SelectGroupLabel({ className, ...props }) {
	const { groupLabel } = select();
	return /* @__PURE__ */ jsx(Select$1.GroupLabel, {
		"data-slot": "select-group-label",
		className: groupLabel({ className }),
		...props
	});
}
function SelectSeparator({ className, ...props }) {
	const { separator } = select();
	return /* @__PURE__ */ jsx("div", {
		role: "separator",
		"aria-orientation": "horizontal",
		"data-slot": "select-separator",
		className: separator({ className }),
		...props
	});
}
function SelectScrollUpArrow({ className, children, ...props }) {
	const { scrollArrow } = select();
	return /* @__PURE__ */ jsx(Select$1.ScrollUpArrow, {
		"data-slot": "select-scroll-up-arrow",
		"data-direction": "up",
		className: scrollArrow({ className }),
		...props,
		children: children ?? /* @__PURE__ */ jsx(ChevronDown, {
			"aria-hidden": true,
			className: "size-3.5 shrink-0 rotate-180"
		})
	});
}
function SelectScrollDownArrow({ className, children, ...props }) {
	const { scrollArrow } = select();
	return /* @__PURE__ */ jsx(Select$1.ScrollDownArrow, {
		"data-slot": "select-scroll-down-arrow",
		"data-direction": "down",
		className: scrollArrow({ className }),
		...props,
		children: children ?? /* @__PURE__ */ jsx(ChevronDown, {
			"aria-hidden": true,
			className: "size-3.5 shrink-0"
		})
	});
}
function SelectArrow({ className, ...props }) {
	return /* @__PURE__ */ jsx(Select$1.Arrow, {
		"data-slot": "select-arrow",
		className,
		...props
	});
}
//#endregion
//#region src/components/radio-group/radio-group.tsx
const radioGroup = tv({ slots: {
	root: [
		"grid w-full gap-2",
		"data-disabled:[&>label]:cursor-not-allowed data-disabled:[&>label]:text-foreground-disabled",
		"data-disabled:[&>label_*]:text-foreground-disabled",
		"font-sans [&>label]:font-semibold"
	],
	item: [
		"relative inline-flex shrink-0 touch-manipulation items-center justify-center rounded-full outline-none",
		"data-disabled:cursor-not-allowed",
		"after:absolute after:-inset-x-3 after:-inset-y-2 after:content-['']",
		"size-5 border-[1.5px] border-line-strong bg-layer-card text-foreground",
		"focus-visible:shadow-raft-focus",
		"data-disabled:border-foreground-disabled data-disabled:bg-fill-muted data-disabled:text-foreground-disabled"
	],
	indicator: ["pointer-events-none flex size-full items-center justify-center"],
	dot: ["block rounded-full bg-current", "size-2"]
} });
function RadioGroup({ className, ...props }) {
	const { root } = radioGroup();
	return /* @__PURE__ */ jsx(RadioGroup$1, {
		"data-slot": "radio-group",
		className: root({ className }),
		...props
	});
}
function RadioGroupIndicator({ className, children, ...props }) {
	const { indicator, dot } = radioGroup();
	return /* @__PURE__ */ jsx(Radio.Indicator, {
		"data-slot": "radio-group-indicator",
		className: indicator({ className }),
		...props,
		children: children ?? /* @__PURE__ */ jsx("span", {
			"data-slot": "radio-group-dot",
			className: dot()
		})
	});
}
function RadioGroupItem({ appearance = "default", className, children, ...props }) {
	const { item } = radioGroup();
	const itemClassName = appearance === "none" ? cn("sr-only", "data-disabled:cursor-not-allowed", className) : item({ className });
	return /* @__PURE__ */ jsx(Radio.Root, {
		"data-slot": "radio-group-item",
		className: itemClassName,
		...props,
		children: children ?? (appearance === "default" ? /* @__PURE__ */ jsx(RadioGroupIndicator, {}) : null)
	});
}
//#endregion
//#region src/components/switch/switch.tsx
const switchRecipe = tv({ slots: {
	root: [
		"relative inline-flex shrink-0 touch-manipulation items-center outline-none",
		"transition-[background-color,box-shadow,transform] ease-out",
		"motion-reduce:transition-none",
		"not-data-disabled:cursor-pointer",
		"data-disabled:cursor-not-allowed",
		"after:absolute after:-inset-x-3 after:-inset-y-2 after:content-['']",
		"focus-visible:ring-line-strong focus-visible:ring-offset-layer-canvas-muted",
		"h-[30px] w-[50px] rounded-full border-[1.5px] border-line-strong bg-fill-muted p-[2.5px]",
		"duration-150",
		"data-checked:border-sticker-ink data-checked:bg-primary data-checked:ring-[1.5px] data-checked:ring-sticker-edge",
		"focus-visible:ring-0 focus-visible:ring-offset-0 focus-visible:shadow-raft-focus",
		"data-disabled:border-foreground-disabled data-disabled:bg-fill-muted",
		"data-checked:data-disabled:border-foreground-disabled data-checked:data-disabled:bg-fill-muted"
	],
	thumb: [
		"pointer-events-none block",
		"transition-transform ease-out",
		"motion-reduce:transition-none",
		"size-[22px] rounded-full bg-layer-card shadow-[0_0_0_1.5px_var(--line-strong)] data-[checked]:translate-x-5",
		"duration-220 ease-slide",
		"data-checked:bg-sticker-paper data-checked:shadow-[0_0_0_1.5px_var(--sticker-ink)]",
		"data-disabled:bg-fill-muted data-disabled:shadow-[0_0_0_1.5px_var(--foreground-disabled)]",
		"data-checked:data-disabled:bg-fill-muted data-checked:data-disabled:shadow-[0_0_0_1.5px_var(--foreground-disabled)]"
	]
} });
function Switch({ className, children, ...props }) {
	const { root } = switchRecipe();
	return /* @__PURE__ */ jsx(Switch$1.Root, {
		"data-slot": "switch",
		className: root({ className }),
		...props,
		children: children ?? /* @__PURE__ */ jsx(SwitchThumb, {})
	});
}
function SwitchThumb({ className, ...props }) {
	const { thumb } = switchRecipe();
	return /* @__PURE__ */ jsx(Switch$1.Thumb, {
		"data-slot": "switch-thumb",
		className: thumb({ className }),
		...props
	});
}
//#endregion
//#region src/components/segmented-control/segmented-control.tsx
const segmentedControl = tv({ slots: {
	root: ["inline-flex max-w-full items-center", "w-fit flex-nowrap gap-0.5 rounded-[11px] bg-fill-muted p-[3px]"],
	item: [
		"inline-flex min-w-0 shrink-0 items-center gap-1.5",
		"outline-none disabled:pointer-events-none",
		"[&_svg]:pointer-events-none [&_svg]:shrink-0",
		"h-8 justify-center rounded-control border-[1.5px] border-transparent bg-transparent px-3",
		"font-sans text-callout font-semibold text-foreground-muted",
		"[&_svg:not([class*='size-'])]:size-4",
		"hover:bg-fill-pressed",
		"data-checked:border-sticker-ink data-checked:bg-primary data-checked:font-bold data-checked:text-sticker-ink data-checked:ring-[1.5px] data-checked:ring-sticker-edge",
		"data-checked:hover:bg-primary data-checked:hover:press-overlay-sticker data-checked:active:press-overlay-sticker",
		"focus-visible:shadow-raft-focus",
		"data-disabled:cursor-not-allowed data-disabled:text-foreground-disabled data-disabled:hover:bg-transparent"
	],
	label: ["truncate"],
	count: ["font-mono", "text-mono-meta font-normal"]
} });
function SegmentedControl({ disabled = false, className, ...props }) {
	const { root } = segmentedControl();
	return /* @__PURE__ */ jsx(RadioGroup$1, {
		disabled,
		"data-slot": "segmented-control",
		className: root({ className }),
		...props
	});
}
function SegmentedControlItem({ className, ...props }) {
	const { item } = segmentedControl();
	return /* @__PURE__ */ jsx(Radio.Root, {
		render: /* @__PURE__ */ jsx("button", { type: "button" }),
		nativeButton: true,
		"data-slot": "segmented-control-item",
		className: item({ className: `group/segmented-control-item ${className ?? ""}`.trim() }),
		...props
	});
}
function SegmentedControlLabel({ className, ...props }) {
	const { label } = segmentedControl();
	return /* @__PURE__ */ jsx("span", {
		"data-slot": "segmented-control-label",
		className: label({ className }),
		...props
	});
}
function SegmentedControlCount({ className, ...props }) {
	const { count } = segmentedControl();
	return /* @__PURE__ */ jsx("span", {
		"data-slot": "segmented-control-count",
		className: count({ className }),
		...props
	});
}
//#endregion
//#region src/components/toggle-group/toggle-group.tsx
const toggleGroup = tv({ slots: {
	root: [
		"inline-flex max-w-full items-center",
		"data-[orientation=horizontal]:flex-row data-[orientation=horizontal]:flex-wrap",
		"data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-stretch",
		"gap-0.5 rounded-[11px] bg-fill-muted p-[3px]"
	],
	item: [
		"inline-flex h-8 min-w-0 shrink-0 items-center justify-center gap-1.5",
		"whitespace-nowrap",
		"outline-2 outline-offset-2 outline-transparent transition-[background-color,color,box-shadow,transform] duration-100",
		"disabled:pointer-events-none data-disabled:cursor-not-allowed",
		"[&_svg]:pointer-events-none [&_svg]:shrink-0",
		"rounded-control border-[1.5px] border-transparent bg-transparent px-3",
		"font-sans text-callout font-semibold text-foreground-muted",
		"[&_svg:not([class*='size-'])]:size-4",
		"hover:bg-fill-pressed",
		"data-pressed:border-sticker-ink data-pressed:bg-primary data-pressed:font-bold data-pressed:text-sticker-ink data-pressed:ring-[1.5px] data-pressed:ring-sticker-edge",
		"data-pressed:hover:bg-primary data-pressed:hover:press-overlay-sticker data-pressed:active:press-overlay-sticker",
		"focus-visible:shadow-raft-focus",
		"data-disabled:opacity-100 data-disabled:text-foreground-disabled data-disabled:hover:bg-transparent"
	],
	label: ["truncate"]
} });
function ToggleGroup({ className, ...props }) {
	const { root } = toggleGroup();
	return /* @__PURE__ */ jsx(ToggleGroup$1, {
		"data-slot": "toggle-group",
		className: root({ className }),
		...props
	});
}
function ToggleGroupItem({ className, nativeButton, render, ...props }) {
	const { item } = toggleGroup();
	return /* @__PURE__ */ jsx(Toggle, {
		render,
		nativeButton: nativeButton ?? defaultNativeButton(render),
		type: "button",
		"data-slot": "toggle-group-item",
		className: item({ className }),
		...props
	});
}
function ToggleGroupLabel({ className, ...props }) {
	const { label } = toggleGroup();
	return /* @__PURE__ */ jsx("span", {
		"data-slot": "toggle-group-label",
		className: label({ className }),
		...props
	});
}
//#endregion
//#region src/components/textarea/textarea.tsx
const textarea = tv({ slots: { root: [
	"block w-full min-h-24 resize-y pl-3 pr-(--ta-pr,0.75rem)",
	"scroll-pb-(--ta-scroll-pb,0)",
	"font-heading text-field font-field outline-none",
	"py-2.5",
	"rounded-control border-[1.5px] border-line-strong bg-layer-card",
	"text-foreground placeholder:text-foreground-placeholder",
	"shadow-none transition-shadow duration-90 ease-out focus:shadow-raft-focus",
	"data-invalid:border-danger-strong",
	"disabled:cursor-not-allowed disabled:resize-none disabled:border-line-muted disabled:bg-fill-muted disabled:text-foreground-disabled disabled:placeholder:text-foreground-disabled"
] } });
const textareaGroup = tv({ slots: { root: ["w-full", "flex flex-col items-end gap-1.5"] } });
const textareaCounter = tv({
	slots: { root: [
		"font-mono tabular-nums",
		"text-mono-meta text-foreground-hint",
		"group-data-[invalid]/field:font-bold group-data-invalid/field:text-danger-strong"
	] },
	variants: { overLimit: {
		true: { root: ["font-bold text-danger-strong"] },
		false: { root: "" }
	} },
	defaultVariants: { overLimit: false }
});
function TextareaGroup({ className, ...props }) {
	const { root } = textareaGroup();
	return /* @__PURE__ */ jsx("div", {
		"data-slot": "textarea-group",
		className: root({ className }),
		...props
	});
}
function Textarea({ className, "data-invalid": dataInvalid, ...props }) {
	const { root } = textarea();
	return /* @__PURE__ */ jsx("textarea", {
		"data-slot": "textarea",
		className: root({ className }),
		...props,
		"data-invalid": dataInvalid || void 0,
		"aria-invalid": dataInvalid ? "true" : void 0
	});
}
function TextareaCounter({ value, count, limit, getLength, className, ...props }) {
	const text = value ?? "";
	const length = count ?? getLength?.(text) ?? text.length;
	const { root } = textareaCounter({ overLimit: length > limit });
	return /* @__PURE__ */ jsxs("span", {
		"data-slot": "textarea-counter",
		className: root({ className }),
		...props,
		children: [
			length,
			"/",
			limit
		]
	});
}
//#endregion
//#region src/components/description-list/description-list.tsx
const descriptionList = tv({
	slots: {
		root: ["m-0"],
		item: ["", "[&+&]:pt-2"],
		term: [
			"flex items-center",
			"*:data-[slot=button]:ml-[-5px]",
			"mb-0 gap-1.5",
			"font-sans text-footnote font-medium text-foreground-hint"
		],
		details: [
			"m-0",
			"flex min-h-7 min-w-0 flex-wrap items-center gap-1.5",
			"font-sans text-callout text-foreground"
		]
	},
	variants: { direction: {
		vertical: {},
		horizontal: { root: [
			"grid items-baseline",
			"max-sm:grid-cols-1 max-sm:gap-y-0.5",
			"*:data-[slot=description-item]:contents",
			"[&>[data-slot=description-item]>[data-slot=description-term]]:mb-0",
			"[&>[data-slot=description-item]>[data-slot=description-term]]:max-w-40",
			"[&>[data-slot=description-item]>[data-slot=description-term]]:min-w-0",
			"[&>[data-slot=description-item]>[data-slot=description-term]]:wrap-break-word",
			"[&>[data-slot=description-item]>[data-slot=description-details]]:min-w-0",
			"[&>[data-slot=description-item]>[data-slot=description-details]]:wrap-break-word",
			"grid-cols-[minmax(88px,max-content)_minmax(0,1fr)] gap-x-4 gap-y-0.5",
			"[&>[data-slot=description-item]>[data-slot=description-details]]:min-h-8"
		] }
	} },
	defaultVariants: { direction: "vertical" }
});
function DescriptionList({ direction = "vertical", className, render, ...props }) {
	const { root } = descriptionList({ direction });
	const defaultProps = { className: root({ className }) };
	return useRender({
		defaultTagName: "dl",
		render,
		props: mergeProps(defaultProps, props),
		state: { slot: "description-list" }
	});
}
function DescriptionItem({ className, render, ...props }) {
	const { item } = descriptionList();
	const defaultProps = { className: item({ className }) };
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps(defaultProps, props),
		state: { slot: "description-item" }
	});
}
function DescriptionTerm({ className, render, ...props }) {
	const { term } = descriptionList();
	const defaultProps = { className: term({ className }) };
	return useRender({
		defaultTagName: "dt",
		render,
		props: mergeProps(defaultProps, props),
		state: { slot: "description-term" }
	});
}
function DescriptionDetails({ className, render, ...props }) {
	const { details } = descriptionList();
	const defaultProps = { className: details({ className }) };
	return useRender({
		defaultTagName: "dd",
		render,
		props: mergeProps(defaultProps, props),
		state: { slot: "description-details" }
	});
}
//#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-panel",
			"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-[9px] group-data-[size=xs]/avatar:right-[-3px] group-data-[size=xs]/avatar:bottom-[-3px]",
			"group-data-[size=2xs]/avatar:size-[9px] group-data-[size=2xs]/avatar:right-[-3px] group-data-[size=2xs]/avatar:bottom-[-3px]",
			"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-presence-online text-sticker-ink outline-layer-panel",
			"group-data-[size=xl]/avatar:border-2",
			"group-data-[size=3xs]/avatar:border"
		],
		group: [
			"group/avatar-group flex items-center",
			"space-x-[-5px]",
			"*:data-[slot=avatar]:shadow-[0_0_0_1.5px_var(--sticker-edge),0_0_0_3px_var(--layer-panel)]",
			"*:data-[slot=avatar-group-count]:shadow-[0_0_0_1.5px_var(--sticker-edge),0_0_0_3px_var(--layer-panel)]"
		]
	},
	variants: {
		type: {
			agent: { root: ["bg-inactive"] },
			human: { root: ["bg-brutal-lavender"] }
		},
		size: {
			xl: { root: ["size-[99px] shadow-[0_0_0_1.5px_var(--sticker-edge),var(--theme-shadow-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, ...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 }) }),
		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: [
		"group/code-block relative my-2 min-w-0",
		"[--code-block-header-height:--spacing(10)]",
		"overflow-clip px-0 pb-0",
		"rounded-container border border-line-muted bg-layer-code text-foreground"
	],
	header: [
		"flex h-(--code-block-header-height) items-center",
		"gap-2 border-b border-line-muted pr-1 pl-3",
		"font-mono text-mono-meta text-foreground-hint"
	],
	title: ["min-w-0 flex-1 truncate font-mono", "text-mono-meta"],
	actions: [
		"ml-auto flex items-center gap-2",
		"[[data-slot=code-block-body]>&]:absolute [[data-slot=code-block-body]>&]:top-2",
		"[[data-slot=code-block-body]>&]:right-2 [[data-slot=code-block-body]>&]:z-10"
	],
	corner: [
		"pointer-events-none absolute z-20 size-1",
		"data-[y=top]:top-0 data-[y=bottom]:bottom-0",
		"data-[x=left]:left-0 data-[x=right]:right-0",
		"hidden"
	],
	body: [
		"relative min-w-0 overflow-x-auto p-4 font-mono",
		"px-3 py-2 text-mono-code text-foreground",
		"[&_pre_span]:text-(--shiki-light,currentColor)",
		"dark:[&_pre_span]:text-(--shiki-dark,currentColor)"
	],
	action: [
		"inline-flex shrink-0 items-center justify-center",
		"transition-[color,background-color,opacity]",
		"focus-visible:outline-none",
		"size-8 rounded-control text-foreground",
		"hover:bg-fill-pressed active:bg-fill-pressed",
		"focus-visible:ring-0 focus-visible:shadow-raft-focus",
		"[&_svg:not([class*='size-'])]:size-4.5"
	]
} });
//#endregion
//#region src/components/code-block/code-block.tsx
const CORNERS = [
	{
		x: "left",
		y: "top"
	},
	{
		x: "right",
		y: "top"
	},
	{
		x: "left",
		y: "bottom"
	},
	{
		x: "right",
		y: "bottom"
	}
];
/** Framed code surface. Compose a header and a body inside it. */
function CodeBlock({ className, render, ...props }) {
	const { root } = codeBlock();
	const defaultProps = { className: root({ className }) };
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps(defaultProps, props),
		state: { slot: "code-block" }
	});
}
function CodeBlockHeader({ className, render, ...props }) {
	const { header } = codeBlock();
	const defaultProps = { className: header({ className }) };
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps(defaultProps, props),
		state: { slot: "code-block-header" }
	});
}
function CodeBlockTitle({ className, render, ...props }) {
	const { title } = codeBlock();
	const defaultProps = { className: title({ className }) };
	return useRender({
		defaultTagName: "span",
		render,
		props: mergeProps(defaultProps, props),
		state: { slot: "code-block-title" }
	});
}
/** Trailing action region. Placed inside the body it floats over the code panel. */
function CodeBlockActions({ className, render, ...props }) {
	const { actions } = codeBlock();
	const defaultProps = { className: actions({ className }) };
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps(defaultProps, props),
		state: { slot: "code-block-actions" }
	});
}
/** Styled action shell. The consumer owns the icon and the behavior. */
function CodeBlockAction({ className, render, ...props }) {
	const { action } = codeBlock();
	const defaultProps = {
		type: "button",
		className: action({ className })
	};
	return useRender({
		defaultTagName: "button",
		render,
		props: mergeProps(defaultProps, props),
		state: { slot: "code-block-action" }
	});
}
/** Inner code panel. Render the complete pre and code as children. */
function CodeBlockBody({ children, className, render, ...props }) {
	const { body, corner } = codeBlock();
	const defaultProps = {
		className: body({ className }),
		children: /* @__PURE__ */ jsxs(Fragment$1, { children: [CORNERS.map(({ x, y }) => /* @__PURE__ */ jsx("span", {
			"data-slot": "code-block-corner",
			"data-x": x,
			"data-y": y,
			className: corner(),
			"aria-hidden": true
		}, `${y}-${x}`)), children] })
	};
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps(defaultProps, props),
		state: { slot: "code-block-body" }
	});
}
//#endregion
//#region src/components/inline-code/inline-code.tsx
const inlineCode = tv({
	slots: { root: [
		"rounded-sticker px-1 py-px",
		"font-mono text-[0.875em] font-normal text-foreground wrap-anywhere",
		"bg-fill-muted"
	] },
	variants: { appearance: {
		default: {},
		message: { root: [
			"inline border-0 px-1 align-baseline",
			"[font-size:0.875em] leading-[1.3em] font-normal",
			"wrap-anywhere",
			"rounded-sticker bg-fill-muted py-px text-foreground"
		] }
	} },
	defaultVariants: { appearance: "default" }
});
function InlineCode({ className, appearance, ...props }) {
	const { root } = inlineCode({ appearance });
	return /* @__PURE__ */ jsx("code", {
		"data-slot": "inline-code",
		className: root({ className }),
		...props
	});
}
//#endregion
//#region src/lib/search-hit.ts
/**
* The DS search hit: what you looked for is a small yellow sticker, like an @
* to you. Every place that marks a hit (message text, Markdown, search
* results) uses this. The hit keeps the surrounding font (`[font:inherit]`
* drops the browser's mark styling) but is always bold, which needs `!` to win
* over that shorthand.
*/
const searchHit = [
	"[font:inherit] font-bold!",
	"rounded-sticker bg-primary 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: {
		heading: ["leading-tight", "font-bold text-foreground"],
		paragraph: ["mb-1 last:mb-0"],
		link: [
			"select-text underline decoration-2 underline-offset-2",
			"rounded-[2px] text-foreground-link hover:decoration-accent-500",
			"outline-none focus-visible:shadow-raft-focus"
		],
		mark: searchHit,
		list: ["mb-1 pl-5"],
		listItem: ["mb-0.5"],
		blockquote: ["my-1 border-l-2 border-line-seam pl-2.5", "text-foreground-muted not-italic"],
		rule: ["my-3 border-0 border-t border-line-muted"],
		tableScroll: [
			"overflow-x-auto",
			"my-2 w-fit max-w-full",
			"rounded-container border border-line-muted bg-layer-card"
		],
		table: ["border-collapse", "border-0 text-callout"],
		tableRow: ["last:[&>td]:border-b-0"],
		headerCell: [
			"px-3 py-1.5",
			"border-0 border-b border-line-muted not-last:border-r",
			"bg-fill-muted",
			"text-left font-semibold whitespace-nowrap text-foreground"
		],
		cell: ["px-3 py-1.5", "border-0 border-b border-line-muted not-last:border-r"],
		checkbox: ["mr-1.5 align-middle"],
		image: ["image-transparency-bg max-w-full", "my-2 rounded-container border border-line-muted"],
		inlineCode: ["inline leading-[inherit] wrap-anywhere"]
	},
	variants: {
		level: {
			1: { heading: "mt-3 mb-1 text-[1.286em]" },
			2: { heading: "mt-2 mb-1 text-[1.143em]" },
			3: { heading: "mt-2 mb-1 text-[1.071em]" },
			4: { heading: "mt-1 mb-0.5 text-[1em]" },
			5: { heading: "mt-1 mb-0.5 text-[1em]" },
			6: { heading: "mt-1 mb-0.5 text-[1em]" }
		},
		ordered: {
			false: { list: "list-disc" },
			true: { list: "list-decimal" }
		}
	},
	compoundVariants: [
		{
			level: 1,
			class: { heading: "mt-4 mb-1 text-title" }
		},
		{
			level: 2,
			class: { heading: "mt-3 mb-1 text-headline" }
		},
		{
			level: 3,
			class: { heading: "mt-3 mb-0.5 text-subhead font-bold" }
		},
		{
			level: [
				4,
				5,
				6
			],
			class: { heading: "mt-2 mb-0.5 text-footnote font-bold text-foreground-muted" }
		}
	],
	defaultVariants: { ordered: false }
});
//#endregion
//#region src/components/markdown/markdown-parts.tsx
const HEADING_TAGS = {
	1: "h1",
	2: "h2",
	3: "h3",
	4: "h4",
	5: "h5",
	6: "h6"
};
function MarkdownHeading({ className, level, ...props }) {
	const { heading } = markdown({ level });
	const Tag = HEADING_TAGS[level];
	return /* @__PURE__ */ jsx(Tag, {
		"data-slot": "markdown-heading",
		className: heading({ className }),
		...props
	});
}
function MarkdownParagraph({ className, ...props }) {
	const { paragraph } = markdown();
	return /* @__PURE__ */ jsx("p", {
		"data-slot": "markdown-paragraph",
		className: paragraph({ className }),
		...props
	});
}
function MarkdownLink({ className, ...props }) {
	const { link } = markdown();
	return /* @__PURE__ */ jsx("a", {
		"data-slot": "markdown-link",
		className: link({ className }),
		...props
	});
}
function MarkdownMark({ className, ...props }) {
	const { mark } = markdown();
	return /* @__PURE__ */ jsx("mark", {
		"data-slot": "markdown-mark",
		className: mark({ className }),
		...props
	});
}
function MarkdownList({ className, ...props }) {
	const { list } = markdown();
	return /* @__PURE__ */ jsx("ul", {
		"data-slot": "markdown-list",
		className: list({ className }),
		...props
	});
}
function MarkdownOrderedList({ className, ...props }) {
	const { list } = markdown({ ordered: true });
	return /* @__PURE__ */ jsx("ol", {
		"data-slot": "markdown-list",
		className: list({ className }),
		...props
	});
}
function MarkdownListItem({ className, ...props }) {
	const { listItem } = markdown();
	return /* @__PURE__ */ jsx("li", {
		"data-slot": "markdown-list-item",
		className: listItem({ className }),
		...props
	});
}
function MarkdownBlockquote({ className, ...props }) {
	const { blockquote } = markdown();
	return /* @__PURE__ */ jsx("blockquote", {
		"data-slot": "markdown-blockquote",
		className: blockquote({ className }),
		...props
	});
}
function MarkdownRule({ className, ...props }) {
	const { rule } = markdown();
	return /* @__PURE__ */ jsx("hr", {
		"data-slot": "markdown-rule",
		className: rule({ className }),
		...props
	});
}
/** Horizontal scroll container for wide tables. */
function MarkdownTableScroll({ className, ...props }) {
	const { tableScroll } = markdown();
	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 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-2",
			"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 tabular-nums",
			"top-1 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",
		sender: [
			"min-w-0 shrink-0 truncate",
			"data-[slot=message-item-sender-button]:cursor-pointer",
			"text-subhead font-bold text-foreground",
			"data-[slot=message-item-sender-button]:hover:underline data-[slot=message-item-sender-button]:hover:decoration-[1.5px] data-[slot=message-item-sender-button]:hover:underline-offset-[3px]",
			"rounded-[2px] outline-none focus-visible:shadow-raft-focus"
		],
		senderBadges: ["inline-flex shrink-0 items-center gap-1"],
		meta: ["min-w-0 truncate", "text-caption text-foreground-hint"],
		time: [
			"shrink-0 whitespace-nowrap",
			"ml-auto font-mono text-mono-meta tabular-nums text-foreground-hint",
			"opacity-[calc(1-var(--mi-toolbar-opacity,0))]"
		],
		inlineStatus: ["shrink-0", "text-caption text-foreground-hint"],
		body: [
			"wrap-break-word select-text",
			"**:select-text",
			"text-body text-foreground",
			"selection:bg-primary-soft"
		],
		searchMatch: searchHit,
		embedded: ["min-w-0", "mt-2"],
		attachments: ["space-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-[-18px] right-3 gap-0.5 overflow-visible rounded-control p-[3px]",
			"bg-layer-popover ring-1 ring-line-seam shadow-raft-float"
		],
		toolbarButton: [
			"inline-flex shrink-0 items-center justify-center",
			"[&_svg]:shrink-0",
			"size-8 rounded-control border-0 bg-transparent p-0",
			"text-foreground-icon hover:bg-fill-pressed active:bg-fill-pressed",
			"data-popup-open:bg-fill-pressed data-active:text-foreground",
			"outline-none focus-visible:shadow-raft-focus",
			"[&_svg]:size-[18px]"
		]
	},
	variants: { compact: { true: { root: ["pt-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. Pass 24h `HH:MM` (no AM/PM). */
function MessageItemContinuationTime({ className, render, ...props }) {
	const { continuationTime } = messageItem();
	const defaultProps = { className: continuationTime({ className }) };
	return useRender({
		defaultTagName: "span",
		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" }
	});
}
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" }
	});
}
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 { sender } = messageItem();
	const defaultProps = {
		type: "button",
		className: sender({ 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" }
	});
}
function MessageItemTime({ className, render, ...props }) {
	const { time } = messageItem();
	const defaultProps = { className: time({ className }) };
	return useRender({
		defaultTagName: "span",
		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-raft-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-strong/45"]
	},
	variants: {
		badgeStatus: {
			read: {},
			unread: { badge: ["text-foreground"] }
		},
		elevation: {
			none: {},
			xs: { savedIndicator: "shadow-raft-xs" },
			sm: { savedIndicator: "shadow-raft-sm" }
		},
		iconOnly: {
			true: { savedIndicator: [
				"justify-center p-0",
				"size-8 rounded-control bg-transparent",
				"[&_svg]:size-[18px] [&_svg]:text-foreground-icon"
			] },
			false: {}
		}
	},
	defaultVariants: {
		elevation: "none",
		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, elevation = "none", iconOnly = false, render, ...props }) {
	const { savedIndicator } = messageFooter({
		elevation,
		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-accent-soft",
		"has-data-[slot=message-reaction-error-indicator]:bg-warning-soft",
		"outline-none focus-visible:shadow-raft-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-icon hover:press-overlay active:press-overlay",
		"outline-none focus-visible:shadow-raft-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-icon",
		"hover:bg-primary-soft data-highlighted:bg-primary-soft active:bg-primary-soft",
		"outline-none focus-visible:shadow-raft-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-raft-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-layer-hud-foreground/70"],
	tooltipMeta: ["leading-5", "text-layer-hud-foreground/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) => [
	"h-[22px] items-center gap-0.5 rounded-sticker px-1.5 has-[>svg]:pl-[3px] align-[1px]",
	"[font-size:0.875em] leading-5 font-semibold",
	"[&_svg]:size-3.5 [&_svg]:text-foreground-icon",
	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-raft-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-primary 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",
			"underline decoration-foreground-hint decoration-[1.5px] underline-offset-[3px]",
			"hover:decoration-foreground"
		] },
		accent: { root: linkChip("bg-accent-soft") },
		muted: { root: linkChip("bg-inactive-soft") },
		info: { root: linkChip("bg-info-soft") },
		link: { root: linkChip("bg-info-soft") },
		pending: { root: chip("cursor-wait bg-inactive-soft text-foreground-muted") },
		unavailable: { root: chip("cursor-default bg-inactive-soft text-foreground-hint") }
	} },
	defaultVariants: { variant: "muted" }
});
//#endregion
//#region src/components/message-item/message-reference.tsx
function useReferenceRender(className, render, props) {
	return useRender({
		defaultTagName: "span",
		render,
		props: mergeProps({ className }, props),
		state: { slot: "message-reference" }
	});
}
function MessageReferenceText({ className, render, variant = "secondary", ...props }) {
	const { root } = messageReference({ variant });
	return useReferenceRender(root({ className }), render, props);
}
function MessageReferenceIndicator({ className, render, ...props }) {
	const { indicator } = messageReference();
	const defaultProps = { className: indicator({ className }) };
	return useRender({
		defaultTagName: "span",
		render,
		props: mergeProps(defaultProps, props),
		state: { slot: "message-reference-indicator" }
	});
}
function MessageReferenceChip({ className, render, variant = "muted", ...props }) {
	const { root } = messageReference({ variant });
	return useReferenceRender(root({ className }), render, props);
}
function MessageReferenceLabel({ className, render, ...props }) {
	const { chipLabel } = messageReference();
	const defaultProps = { className: chipLabel({ className }) };
	return useRender({
		defaultTagName: "span",
		render,
		props: mergeProps(defaultProps, props),
		state: { slot: "message-reference-label" }
	});
}
function MessageReferencePending({ className, render, ...props }) {
	const { root } = messageReference({ variant: "pending" });
	return useReferenceRender(root({ className }), render, props);
}
function MessageReferenceUnavailable({ className, render, ...props }) {
	const { root } = messageReference({ variant: "unavailable" });
	return useReferenceRender(root({ className }), render, props);
}
//#endregion
//#region src/components/message-item/message-multi-select.recipe.ts
const messageMultiSelect = tv({ 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-raft-float"
	]
} });
//#endregion
//#region src/components/message-item/message-multi-select.tsx
function MessageMultiSelect({ className, render, ...props }) {
	const { root } = messageMultiSelect();
	const defaultProps = { className: root({ className }) };
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps(defaultProps, props),
		state: { slot: "message-multi-select" }
	});
}
/** Shared select-mode toolbar shell. Consumers compose the count and actions as children. */
function MessageMultiSelectToolbar({ className, render, ...props }) {
	const { toolbar } = messageMultiSelect();
	const defaultProps = { className: toolbar({ className }) };
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps(defaultProps, props),
		state: { slot: "message-multi-select-toolbar" }
	});
}
function MessageMultiSelectCheckbox({ className, ...props }) {
	const { checkbox } = messageMultiSelect();
	return /* @__PURE__ */ jsx(Checkbox, {
		"data-slot": "message-multi-select-checkbox",
		className: checkbox({ className }),
		shape: "square",
		...props
	});
}
//#endregion
//#region src/components/message-item/message-text-selection-toolbar.recipe.ts
const messageTextSelectionToolbar = tv({ slots: {
	toolbar: [
		"flex min-w-0 items-center select-none",
		"gap-0.5 overflow-visible rounded-control p-[3px] text-footnote font-bold",
		"bg-layer-popover ring-1 ring-line-seam shadow-raft-float"
	],
	button: [
		"flex items-center gap-1.5 outline-none transition-colors",
		"h-8 rounded-control px-2.5 text-foreground",
		"hover:bg-fill-pressed active:bg-fill-pressed",
		"focus-visible:shadow-raft-focus",
		"[&_svg]:size-4 [&_svg]:text-foreground-icon"
	],
	separator: ["w-px", "mx-0.5 h-5 bg-line-muted"]
} });
//#endregion
//#region src/components/message-item/message-text-selection-toolbar.tsx
function MessageTextSelectionToolbar({ className, ...props }) {
	const { toolbar } = messageTextSelectionToolbar();
	return /* @__PURE__ */ jsx(Toolbar.Root, {
		"data-slot": "message-text-selection-toolbar",
		className: toolbar({ className }),
		...props
	});
}
function MessageTextSelectionToolbarButton({ className, ...props }) {
	const { button } = messageTextSelectionToolbar();
	return /* @__PURE__ */ jsx(Toolbar.Button, {
		"data-slot": "message-text-selection-toolbar-button",
		type: "button",
		className: button({ className }),
		...props
	});
}
function MessageTextSelectionToolbarSeparator({ className, ...props }) {
	const { separator } = messageTextSelectionToolbar();
	return /* @__PURE__ */ jsx(Toolbar.Separator, {
		"data-slot": "message-text-selection-toolbar-separator",
		className: separator({ className }),
		...props
	});
}
//#endregion
//#region src/components/system-message/system-message.recipe.ts
const messageSystem = tv({ slots: {
	systemRoot: [
		"flex min-w-0 items-center justify-center",
		"gap-2 px-4 py-3 in-data-[slot=system-message-group-panel]:py-1.5",
		"font-mono text-mono-meta text-foreground-hint",
		"before:min-w-3 before:flex-1 before:border-t before:border-line-muted",
		"after:min-w-3 after:flex-1 after:border-t after:border-line-muted"
	],
	systemTime: ["shrink-0 whitespace-nowrap", "font-mono text-mono-meta text-foreground-hint"],
	systemContent: ["min-w-0 truncate", "text-foreground-hint"],
	systemGroup: [""],
	systemGroupHeader: [
		"flex justify-center",
		"items-center gap-2 px-4 py-1.5",
		"before:min-w-3 before:flex-1 before:border-t before:border-line-muted",
		"after:min-w-3 after:flex-1 after:border-t after:border-line-muted"
	],
	systemGroupDisclosure: [
		"group relative flex max-w-full items-center",
		"[&[data-panel-open]_[data-slot=system-message-group-chevron]]:-rotate-90",
		"h-7 gap-1 rounded-control px-2 py-0",
		"font-mono text-mono-meta text-foreground-hint",
		"hover:bg-fill-pressed hover:text-foreground",
		"outline-none focus-visible:shadow-raft-focus"
	],
	systemGroupSummary: ["truncate"],
	systemGroupChevron: ["size-3 shrink-0 rotate-90 transition-transform", "text-foreground-hint"]
} });
//#endregion
//#region src/components/system-message/system-message.tsx
function SystemMessage({ className, render, ...props }) {
	const { systemRoot } = messageSystem();
	const defaultProps = { className: systemRoot({ className }) };
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps(defaultProps, props),
		state: { slot: "system-message-item" }
	});
}
function SystemMessageTime({ className, render, ...props }) {
	const { systemTime } = messageSystem();
	const defaultProps = { className: systemTime({ className }) };
	return useRender({
		defaultTagName: "span",
		render,
		props: mergeProps(defaultProps, props),
		state: { slot: "system-message-item-time" }
	});
}
function SystemMessageContent({ children, className, render, title, ...props }) {
	const { systemContent } = messageSystem();
	const defaultProps = {
		className: systemContent({ className }),
		children,
		title: title ?? (typeof children === "string" ? children : void 0)
	};
	return useRender({
		defaultTagName: "span",
		render,
		props: mergeProps(defaultProps, props),
		state: { slot: "system-message-item-content" }
	});
}
function SystemMessageGroup({ className, render, ...props }) {
	const { systemGroup } = messageSystem();
	const defaultProps = {
		"data-slot": "system-message-group",
		className: systemGroup({ className })
	};
	return /* @__PURE__ */ jsx(Collapsible.Root, {
		render,
		...mergeProps(defaultProps, props)
	});
}
function SystemMessageGroupHeader({ className, render, ...props }) {
	const { systemGroupHeader } = messageSystem();
	const defaultProps = {
		"data-slot": "system-message-group-header",
		className: systemGroupHeader({ className })
	};
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function SystemMessageGroupDisclosure({ className, render, ...props }) {
	const { systemGroupDisclosure } = messageSystem();
	const defaultProps = {
		type: "button",
		"data-slot": "system-message-group-disclosure",
		className: systemGroupDisclosure({ className })
	};
	return useRender({
		render: render ?? /* @__PURE__ */ jsx(Collapsible.Trigger, {}),
		props: mergeProps(defaultProps, props)
	});
}
function SystemMessageGroupSummary({ className, render, ...props }) {
	const { systemGroupSummary } = messageSystem();
	const defaultProps = {
		"data-slot": "system-message-group-summary",
		className: systemGroupSummary({ className })
	};
	return useRender({
		defaultTagName: "span",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function SystemMessageGroupChevron({ className, render, ...props }) {
	const { systemGroupChevron } = messageSystem();
	const defaultProps = {
		"data-slot": "system-message-group-chevron",
		"aria-hidden": true,
		className: systemGroupChevron({ className })
	};
	return useRender({
		render: render ?? /* @__PURE__ */ jsx(ChevronRight, {}),
		props: mergeProps(defaultProps, props)
	});
}
function SystemMessageGroupPanel({ className, render, ...props }) {
	const defaultProps = {
		"data-slot": "system-message-group-panel",
		className: cn(className)
	};
	return /* @__PURE__ */ jsx(Collapsible.Panel, {
		render,
		...mergeProps(defaultProps, 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-muted bg-layer-card",
		"outline-none focus-visible:shadow-raft-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-raft-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: [
		"group/message-replies flex min-w-0 w-full flex-col text-left",
		"transition-colors focus-visible:outline-1 focus-visible:outline-line-strong",
		"mt-2 max-w-[480px] gap-1 rounded-container border-0 px-2.5 py-2",
		"bg-fill-muted text-foreground-muted hover:press-overlay active:press-overlay",
		"focus-visible:outline-none focus-visible:shadow-raft-focus"
	],
	summary: [
		"flex shrink-0 flex-wrap items-center transition-colors",
		"gap-1.5 text-footnote font-bold text-foreground-muted has-[strong]:text-foreground",
		"[&_strong]:inline-flex [&_strong]:h-5 [&_strong]:min-w-5 [&_strong]:items-center [&_strong]:justify-center",
		"[&_strong]:rounded-sticker [&_strong]:px-1.5 [&_strong]:font-mono [&_strong]:text-mono-meta [&_strong]:font-bold",
		"[&_strong]:bg-accent [&_strong]:text-sticker-ink [&_strong]:inset-ring-[1.5px] [&_strong]:inset-ring-sticker-ink [&_strong]:ring-[1.5px] [&_strong]:ring-sticker-edge"
	],
	summaryItem: ["inline-flex items-center gap-0.5 align-middle", "[&_svg]:size-3.5"],
	reply: ["flex min-w-0 items-center", "gap-1.5 text-footnote"],
	sender: ["min-w-0 shrink truncate", "font-semibold text-foreground-muted"],
	content: ["min-w-0 flex-1 truncate", "text-foreground-hint"],
	time: ["ml-auto shrink-0", "font-mono text-mono-meta tabular-nums text-foreground-hint"]
} });
//#endregion
//#region src/components/message-replies/message-replies.tsx
function MessageReplies({ className, render, ...props }) {
	const { root } = messageReplies();
	const { root: embedRoot } = messageEmbed();
	const defaultProps = { className: embedRoot({ className: root({ className }) }) };
	return useRender({
		defaultTagName: "button",
		render: render ?? /* @__PURE__ */ jsx("button", { type: "button" }),
		props: mergeProps(defaultProps, props),
		state: { slot: "message-embed" }
	});
}
function MessageRepliesSummary({ className, render, ...props }) {
	const { summary } = messageReplies();
	const defaultProps = { className: summary({ className }) };
	return useRender({
		defaultTagName: "span",
		render,
		props: mergeProps(defaultProps, props),
		state: { slot: "message-replies-summary" }
	});
}
function MessageRepliesSummaryItem({ className, render, ...props }) {
	const { summaryItem } = messageReplies();
	const defaultProps = { className: summaryItem({ className }) };
	return useRender({
		defaultTagName: "span",
		render,
		props: mergeProps(defaultProps, props),
		state: { slot: "message-replies-summary-item" }
	});
}
function MessageRepliesItem({ className, render, ...props }) {
	const { reply } = messageReplies();
	const defaultProps = { className: reply({ className }) };
	return useRender({
		defaultTagName: "span",
		render,
		props: mergeProps(defaultProps, props),
		state: { slot: "message-replies-item" }
	});
}
function MessageRepliesItemSender({ className, render, ...props }) {
	const { sender } = messageReplies();
	const defaultProps = { className: sender({ className }) };
	return useRender({
		defaultTagName: "span",
		render,
		props: mergeProps(defaultProps, props),
		state: { slot: "message-replies-item-sender" }
	});
}
function MessageRepliesItemContent({ className, render, ...props }) {
	const { content } = messageReplies();
	const defaultProps = { className: content({ className }) };
	return useRender({
		defaultTagName: "span",
		render,
		props: mergeProps(defaultProps, props),
		state: { slot: "message-replies-item-content" }
	});
}
function MessageRepliesItemTime({ className, render, ...props }) {
	const { time } = messageReplies();
	const defaultProps = { className: time({ className }) };
	return useRender({
		defaultTagName: "time",
		render,
		props: mergeProps(defaultProps, props),
		state: { slot: "message-replies-item-time" }
	});
}
//#endregion
//#region src/components/message-action-card/message-action-card.recipe.ts
const messageActionCard = tv({
	slots: {
		root: ["w-full", "group/action-card mt-2 max-w-[440px]"],
		header: [
			"flex items-start",
			"gap-2 px-3 pt-3 pb-2 group-data-closed/action-card:pb-3",
			"text-subhead font-bold text-foreground"
		],
		headerIcon: [
			"flex shrink-0 items-center justify-center",
			"[&>svg]:shrink-0",
			"size-[27px] rounded-sticker bg-fill-muted text-foreground-icon",
			"[&>svg]:size-3.5"
		],
		headerTitle: ["min-w-0 flex-1", "pt-[3.5px]"],
		headerDescription: ["block", "mt-0.5 text-footnote font-normal text-foreground-muted"],
		headerStatus: ["ml-auto shrink-0", "mt-[5.5px] text-caption font-semibold text-foreground-muted"],
		status: [
			"inline-flex h-auto items-center gap-1.5 rounded-none border-0 bg-transparent p-0 shadow-none",
			"text-caption font-semibold text-foreground-muted",
			"before:size-[9px] before:shrink-0 before:rounded-[2px] before:border-[1.5px] before:border-sticker-ink before:content-['']"
		],
		collapseTrigger: [
			"flex shrink-0 cursor-pointer items-center justify-center",
			"[&>svg]:transition-transform [&>svg]:duration-200 motion-reduce:[&>svg]:transition-none",
			"data-panel-open:[&>svg]:rotate-180",
			"focus-visible:outline-2 focus-visible:outline-offset-1",
			"my-0 -mr-1 size-[27px] rounded-control text-foreground-icon",
			"hover:bg-fill-pressed hover:text-foreground active:bg-fill-pressed",
			"focus-visible:outline-none focus-visible:shadow-raft-focus",
			"[&>svg]:size-4"
		]
	},
	variants: { tone: {
		neutral: { status: ["before:bg-inactive"] },
		primary: { status: ["before:bg-primary"] },
		information: { status: ["before:bg-info"] },
		accent: { status: ["before:bg-accent"] },
		success: { status: ["before:bg-success"] },
		warning: { status: ["before:bg-warning"] },
		danger: { status: ["before:bg-danger"] }
	} }
});
//#endregion
//#region src/components/message-action-card/message-action-card-content.recipe.ts
const messageActionCardContent = tv({ slots: {
	root: ["p-3", "flex flex-col gap-2 px-3 pt-0 pb-3"],
	panel: [
		"h-(--collapsible-panel-height) overflow-hidden",
		"transition-[height] duration-200 ease-out motion-reduce:transition-none",
		"data-starting-style:h-0 data-ending-style:h-0"
	],
	properties: [
		"m-0 grid",
		"max-sm:grid-cols-1 max-sm:gap-y-0.5",
		"grid-cols-[minmax(88px,max-content)_minmax(0,1fr)] items-center gap-x-4 gap-y-0.5"
	],
	property: ["contents"],
	propertyLabel: ["max-w-40 min-w-0 wrap-break-word", "text-footnote font-medium text-foreground-hint"],
	propertyValue: ["m-0 min-w-0 wrap-break-word", "min-h-8 py-1.5 text-callout text-foreground"],
	scopeList: ["mt-0 space-y-1.5"],
	scopeListViewport: ["overflow-y-auto overscroll-contain", "max-h-[164px] space-y-1.5 pr-1"],
	scopeListLabel: ["text-footnote font-medium text-foreground-hint"],
	scope: ["min-w-0 border p-1.5", "rounded-control border-line-muted bg-layer-card px-2.5 py-2"],
	scopeName: ["break-all font-mono", "text-mono-meta font-normal text-foreground"],
	scopeDescription: ["mt-0.5 text-footnote text-pretty text-foreground-muted"],
	hintLabel: ["text-footnote font-medium text-foreground-hint"],
	hint: [
		"border-l-2 border-line-seam pl-2.5",
		"text-footnote text-foreground-muted",
		"[[data-slot=message-action-card-hint-label]+&]:-mt-1"
	],
	notice: [
		"flex items-start gap-2",
		"[&>svg]:size-3.5 [&>svg]:shrink-0",
		"mb-0 rounded-control bg-fill-muted px-2.5 py-2",
		"text-footnote text-foreground-muted",
		"[&>svg]:mt-0.5 [&>svg]:text-foreground-icon"
	],
	completion: ["inline-flex items-center gap-1.5 text-footnote text-foreground-muted", "[&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-foreground"],
	actions: ["flex flex-wrap items-center justify-end", "mt-1 gap-2"],
	actionsNote: ["min-w-0 flex-1 basis-40", "text-footnote text-foreground-muted"]
} });
//#endregion
//#region src/components/message-action-card/message-action-card.tsx
/**
* The card is a disclosure: open by default, and a consumer can fold a
* resolved or view-only card to its header with `defaultOpen={false}` (or
* control it with `open` / `onOpenChange`). The fold is offered by placing a
* MessageActionCardCollapseTrigger in the header; without one the card simply
* stays open.
*/
function MessageActionCard({ className, render, open, defaultOpen = true, onOpenChange, ...props }) {
	const { root } = messageActionCard();
	return /* @__PURE__ */ jsx(Collapsible.Root, {
		open,
		defaultOpen,
		onOpenChange,
		render: /* @__PURE__ */ jsx(MessageEmbed, {
			className: root({ className }),
			render,
			...props
		})
	});
}
function MessageActionCardContent({ className, render, ...props }) {
	const { root, panel } = messageActionCardContent();
	return /* @__PURE__ */ jsx(Collapsible.Panel, {
		className: panel(),
		children: /* @__PURE__ */ jsx(MessageEmbedContent, {
			className: root({ className }),
			render,
			...props
		})
	});
}
/** The card type's icon. Without children it shows a generic action icon. */
function MessageActionCardHeaderIcon({ className, render, children, ...props }) {
	const { headerIcon } = messageActionCard();
	return useRender({
		defaultTagName: "span",
		render,
		props: mergeProps({
			className: headerIcon({ className }),
			"aria-hidden": true,
			children: children ?? /* @__PURE__ */ jsx(Zap, {})
		}, props),
		state: { slot: "message-action-card-header-icon" }
	});
}
function MessageActionCardHeaderTitle({ className, render, ...props }) {
	const { headerTitle } = messageActionCard();
	return useRender({
		defaultTagName: "span",
		render,
		props: mergeProps({ className: headerTitle({ className }) }, props),
		state: { slot: "message-action-card-header-title" }
	});
}
/**
* A line under the title: what happened on a resolved card ("Installed by Ada
* → Lens"), or why you cannot act on a view-only one. Place it inside
* MessageActionCardHeaderTitle; it stays visible while the card is folded.
*/
function MessageActionCardHeaderDescription({ className, render, ...props }) {
	const { headerDescription } = messageActionCard();
	return useRender({
		defaultTagName: "span",
		render,
		props: mergeProps({ className: headerDescription({ className }) }, props),
		state: { slot: "message-action-card-header-description" }
	});
}
const STATUS_TONES = {
	default: "neutral",
	muted: "neutral",
	primary: "primary",
	information: "information",
	accent: "accent",
	success: "success",
	warning: "warning",
	danger: "danger"
};
/**
* The card's state label in the header: plain text led by a square pixel in
* the variant's colour, so a column of "Done" cards does not shout.
*/
function MessageActionCardStatus({ className, appearance, ...props }) {
	const { headerStatus, status } = messageActionCard({ tone: STATUS_TONES[props.variant ?? "default"] });
	return /* @__PURE__ */ jsx(Badge, {
		appearance: appearance ?? "soft",
		className: headerStatus({ className: status({ className }) }),
		...props
	});
}
/** Folds the card to its header and back. Needs an accessible `aria-label`. */
function MessageActionCardCollapseTrigger({ className, ...props }) {
	const { collapseTrigger } = messageActionCard();
	return /* @__PURE__ */ jsx(Collapsible.Trigger, {
		className: collapseTrigger({ className }),
		...props,
		children: /* @__PURE__ */ jsx(ChevronDown, { "aria-hidden": true })
	});
}
function MessageActionCardHeader({ className, render, ...props }) {
	const { header } = messageActionCard();
	return /* @__PURE__ */ jsx(MessageEmbedHeader, {
		className: header({ className }),
		render,
		...props
	});
}
function MessageActionCardHeaderStatus({ className, render, ...props }) {
	const { headerStatus } = messageActionCard();
	return useRender({
		defaultTagName: "span",
		render,
		props: mergeProps({ className: headerStatus({ className }) }, props),
		state: { slot: "message-action-card-header-status" }
	});
}
function MessageActionCardProperties({ className, render, ...props }) {
	const { properties } = messageActionCardContent();
	return useRender({
		defaultTagName: "dl",
		render,
		props: mergeProps({ className: properties({ className }) }, props),
		state: { slot: "message-action-card-properties" }
	});
}
function MessageActionCardProperty({ className, render, ...props }) {
	const { property } = messageActionCardContent();
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps({ className: property({ className }) }, props),
		state: { slot: "message-action-card-property" }
	});
}
function MessageActionCardPropertyLabel({ className, render, ...props }) {
	const { propertyLabel } = messageActionCardContent();
	return useRender({
		defaultTagName: "dt",
		render,
		props: mergeProps({ className: propertyLabel({ className }) }, props),
		state: { slot: "message-action-card-property-label" }
	});
}
function MessageActionCardPropertyValue({ className, render, ...props }) {
	const { propertyValue } = messageActionCardContent();
	return useRender({
		defaultTagName: "dd",
		render,
		props: mergeProps({ className: propertyValue({ className }) }, props),
		state: { slot: "message-action-card-property-value" }
	});
}
function MessageActionCardScopeList({ className, render, ...props }) {
	const { scopeList } = messageActionCardContent();
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps({ className: scopeList({ className }) }, props),
		state: { slot: "message-action-card-scope-list" }
	});
}
function MessageActionCardScopeListLabel({ className, render, ...props }) {
	const { scopeListLabel } = messageActionCardContent();
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps({ className: scopeListLabel({ className }) }, props),
		state: { slot: "message-action-card-scope-list-label" }
	});
}
/**
* Scrolls a long permission list. It is a Tab stop only while it overflows, so
* keyboard users can scroll it; a short list adds no empty stop.
*/
function MessageActionCardScopeListViewport({ className, render, ...props }) {
	const { scopeListViewport } = messageActionCardContent();
	const [element, setElement] = useState(null);
	const [overflows, setOverflows] = useState(false);
	useEffect(() => {
		if (element === null) return;
		const measure = () => setOverflows(element.scrollHeight > element.clientHeight);
		measure();
		const observer = new ResizeObserver(measure);
		observer.observe(element);
		for (const child of element.children) observer.observe(child);
		return () => observer.disconnect();
	}, [element]);
	return useRender({
		defaultTagName: "div",
		render,
		ref: setElement,
		props: mergeProps({
			className: scopeListViewport({ className }),
			tabIndex: overflows ? 0 : void 0
		}, props),
		state: { slot: "message-action-card-scope-list-viewport" }
	});
}
function MessageActionCardScope({ className, render, ...props }) {
	const { scope } = messageActionCardContent();
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps({ className: scope({ className }) }, props),
		state: { slot: "message-action-card-scope" }
	});
}
function MessageActionCardScopeName({ className, render, ...props }) {
	const { scopeName } = messageActionCardContent();
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps({ className: scopeName({ className }) }, props),
		state: { slot: "message-action-card-scope-name" }
	});
}
function MessageActionCardScopeDescription({ className, render, ...props }) {
	const { scopeDescription } = messageActionCardContent();
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps({ className: scopeDescription({ className }) }, props),
		state: { slot: "message-action-card-scope-description" }
	});
}
function MessageActionCardHintLabel({ className, render, ...props }) {
	const { hintLabel } = messageActionCardContent();
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps({ className: hintLabel({ className }) }, props),
		state: { slot: "message-action-card-hint-label" }
	});
}
function MessageActionCardHint({ className, render, ...props }) {
	const { hint } = messageActionCardContent();
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps({ className: hint({ className }) }, props),
		state: { slot: "message-action-card-hint" }
	});
}
/** Raft's standing note. Leads with an info icon unless `icon` replaces it. */
function MessageActionCardNotice({ className, render, icon, children, ...props }) {
	const { notice } = messageActionCardContent();
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps({
			className: notice({ className }),
			children: /* @__PURE__ */ jsxs(Fragment$1, { children: [icon ?? /* @__PURE__ */ jsx(Info, { "aria-hidden": true }), /* @__PURE__ */ jsx("span", { children })] })
		}, props),
		state: { slot: "message-action-card-notice" }
	});
}
function MessageActionCardCompletion({ className, render, ...props }) {
	const { completion } = messageActionCardContent();
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps({ className: completion({ className }) }, props),
		state: { slot: "message-action-card-completion" }
	});
}
function MessageActionCardActions({ className, render, ...props }) {
	const { actions } = messageActionCardContent();
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps({ className: actions({ className }) }, props),
		state: { slot: "message-action-card-actions" }
	});
}
function MessageActionCardActionsNote({ className, render, ...props }) {
	const { actionsNote } = messageActionCardContent();
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps({ className: actionsNote({ className }) }, props),
		state: { slot: "message-action-card-actions-note" }
	});
}
//#endregion
//#region src/components/message-attachment/message-attachment.recipe.ts
const messageAttachment = tv({ slots: {
	group: "flex max-w-[360px] flex-wrap items-start gap-2",
	card: [
		"group/attachment relative inline-flex h-20 w-44 min-w-44 max-w-44 shrink-0 flex-col overflow-hidden",
		"text-left",
		"rounded-container border border-line-muted bg-layer-card py-2 pr-1.5 pl-2.5 text-foreground",
		"outline-none hover:press-overlay active:press-overlay focus-visible:shadow-raft-focus",
		"[&_[data-slot=message-attachment-action]_svg]:size-4"
	],
	title: ["block w-full max-w-full shrink-0 truncate", "pr-1 font-sans text-callout font-semibold text-foreground"],
	meta: ["mt-auto flex w-full min-w-0 max-w-full items-center justify-between", "gap-2 font-mono text-mono-meta text-foreground-hint"],
	metaStart: "min-w-0 flex-1 truncate",
	metaEnd: ["ml-auto inline-flex shrink-0 items-center gap-1", "[&_svg]:size-[10px] [&_svg]:shrink-0"],
	summary: [
		"mt-0.5 inline-flex shrink-0 items-center whitespace-nowrap",
		"[&_svg]:shrink-0",
		"pr-1 font-mono text-mono-meta text-foreground-hint [&_svg]:size-3.5"
	],
	commentSummary: "gap-[2.5px]",
	diffSummary: "gap-1.5",
	diffAddition: ["text-success-strong"],
	diffDeletion: ["text-danger-strong"],
	action: [
		"relative flex items-center justify-center",
		"before:absolute before:-inset-1 before:content-['']",
		"[&_svg]:shrink-0",
		"-my-1 size-6 rounded-control text-foreground",
		"outline-none hover:bg-fill-pressed active:bg-fill-pressed",
		"focus-visible:shadow-raft-focus",
		"[&_svg]:size-4"
	]
} });
//#endregion
//#region src/components/message-attachment/message-attachment.tsx
function MessageAttachmentGroup({ className, render, ...props }) {
	const { group } = messageAttachment();
	const defaultProps = { className: group({ className }) };
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps(defaultProps, props),
		state: { slot: "message-attachment-group" }
	});
}
function MessageAttachmentCard({ className, render, ...props }) {
	const { card } = messageAttachment();
	const defaultProps = { className: card({ className }) };
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps(defaultProps, props),
		state: { slot: "message-attachment-card" }
	});
}
function MessageAttachmentTitle({ className, render, ...props }) {
	const { title } = messageAttachment();
	const defaultProps = { className: title({ className }) };
	return useRender({
		defaultTagName: "span",
		render,
		props: mergeProps(defaultProps, props),
		state: { slot: "message-attachment-title" }
	});
}
function MessageAttachmentMeta({ className, render, ...props }) {
	const { meta } = messageAttachment();
	const defaultProps = { className: meta({ className }) };
	return useRender({
		defaultTagName: "span",
		render,
		props: mergeProps(defaultProps, props),
		state: { slot: "message-attachment-meta" }
	});
}
function MessageAttachmentMetaStart({ className, render, ...props }) {
	const { metaStart } = messageAttachment();
	const defaultProps = { className: metaStart({ className }) };
	return useRender({
		defaultTagName: "span",
		render,
		props: mergeProps(defaultProps, props),
		state: { slot: "message-attachment-meta-start" }
	});
}
function MessageAttachmentMetaEnd({ className, render, ...props }) {
	const { metaEnd } = messageAttachment();
	const defaultProps = { className: metaEnd({ className }) };
	return useRender({
		defaultTagName: "span",
		render,
		props: mergeProps(defaultProps, props),
		state: { slot: "message-attachment-meta-end" }
	});
}
function MessageAttachmentSummary({ className, render, ...props }) {
	const { summary } = messageAttachment();
	const defaultProps = { className: summary({ className }) };
	return useRender({
		defaultTagName: "span",
		render,
		props: mergeProps(defaultProps, props),
		state: { slot: "message-attachment-summary" }
	});
}
function MessageAttachmentCommentSummary({ className, render, ...props }) {
	const { commentSummary } = messageAttachment();
	const defaultProps = { className: commentSummary({ className }) };
	return useRender({
		defaultTagName: "span",
		render,
		props: mergeProps(defaultProps, props),
		state: { slot: "message-attachment-comment-summary" }
	});
}
function MessageAttachmentDiffSummary({ className, render, ...props }) {
	const { diffSummary } = messageAttachment();
	const defaultProps = { className: diffSummary({ className }) };
	return useRender({
		defaultTagName: "span",
		render,
		props: mergeProps(defaultProps, props),
		state: { slot: "message-attachment-diff-summary" }
	});
}
function MessageAttachmentDiffAddition({ className, render, ...props }) {
	const { diffAddition } = messageAttachment();
	const defaultProps = { className: diffAddition({ className }) };
	return useRender({
		defaultTagName: "span",
		render,
		props: mergeProps(defaultProps, props),
		state: { slot: "message-attachment-diff-addition" }
	});
}
function MessageAttachmentDiffDeletion({ className, render, ...props }) {
	const { diffDeletion } = messageAttachment();
	const defaultProps = { className: diffDeletion({ className }) };
	return useRender({
		defaultTagName: "span",
		render,
		props: mergeProps(defaultProps, props),
		state: { slot: "message-attachment-diff-deletion" }
	});
}
function MessageAttachmentAction({ className, render, ...props }) {
	const { action } = messageAttachment();
	const defaultProps = {
		type: "button",
		className: action({ className })
	};
	return useRender({
		defaultTagName: "button",
		render,
		props: mergeProps(defaultProps, props),
		state: { slot: "message-attachment-action" }
	});
}
//#endregion
//#region src/components/message-attachment/message-image-gallery.recipe.ts
const messageImageGallery = tv({
	slots: {
		root: ["max-w-[min(360px,calc(100vw-112px))] space-y-1 md:max-w-[360px]"],
		row: ["grid", "gap-1"],
		item: [
			"group/img relative overflow-hidden text-left",
			"rounded-control border border-line-muted bg-fill-muted",
			"has-data-[slot=message-image-gallery-overlay]:opacity-70"
		],
		media: "block size-full ",
		overlay: "absolute inset-0 flex items-center justify-center",
		preview: ["absolute inset-0", "outline-none focus-visible:inset-ring-2 focus-visible:inset-ring-foreground"],
		action: [
			"absolute z-10 hidden items-center justify-center",
			"focus:flex",
			"group-hover/img:flex",
			"right-1.5 bottom-1.5 size-8 rounded-control border-[1.5px] border-line-strong",
			"bg-layer-card text-foreground hover:press-overlay active:press-overlay",
			"outline-none focus-visible:shadow-raft-focus",
			"[&_svg]:size-4"
		]
	},
	defaultVariants: { single: false },
	compoundVariants: [
		{
			count: 1,
			single: false,
			class: { row: "auto-rows-[8rem] sm:auto-rows-[9rem]" }
		},
		{
			count: 2,
			single: false,
			class: { row: "auto-rows-[8rem] sm:auto-rows-[9rem]" }
		},
		{
			count: 3,
			single: false,
			class: { row: "auto-rows-[7rem] sm:auto-rows-[8rem]" }
		},
		{
			count: 3,
			class: { row: "md:grid-cols-2" }
		}
	],
	variants: {
		count: {
			1: { row: "grid-cols-1" },
			2: { row: "grid-cols-2" },
			3: { row: "grid-cols-2 md:grid-cols-3" }
		},
		/** A single-image gallery keeps the image's proportions instead of a row height. */
		single: { true: { item: ["inline-block w-fit max-w-[26rem] justify-self-start", "rounded-container"] } },
		/** Set from an item layout: the cell owns its media sizing. */
		laidOut: { true: { item: "[&_img]:block [&_img]:size-full" } },
		/** How the media fills its cell: cropped, or fully visible on a neutral backdrop. */
		fit: {
			cover: { item: "[&_img]:object-cover" },
			contain: { item: ["[&_img]:object-contain", "[&_img]:bg-transparent"] }
		}
	}
});
//#endregion
//#region src/components/message-attachment/message-image-gallery.tsx
function MessageImageGallery({ className, render, ...props }) {
	const { root } = messageImageGallery();
	const defaultProps = { className: root({ className }) };
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps(defaultProps, props),
		state: { slot: "message-image-gallery" }
	});
}
/**
* One row of a gallery: the grid and its height come from the row data, so
* consumers place the items (`MessageImageGalleryItem` with the row's item
* layouts) without touching layout classes.
*/
function MessageImageGalleryRow({ className, render, row, ...props }) {
	const { row: rowSlot } = messageImageGallery();
	const single = row.items.length === 1 && row.items[0].reserved != null;
	const defaultProps = {
		className: rowSlot({
			className,
			count: row.items.length,
			single
		}),
		"data-count": String(row.items.length)
	};
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps(defaultProps, props),
		state: { slot: "message-image-gallery-row" }
	});
}
function MessageImageGalleryItem({ className, render, layout, ...props }) {
	const { item } = messageImageGallery();
	const defaultProps = {
		className: item({
			className,
			laidOut: layout ? true : void 0,
			single: layout?.reserved ? true : void 0,
			fit: layout?.fit
		}),
		...layout?.reserved ? { style: layout.reserved } : null,
		"data-fit": layout?.fit,
		"data-single": layout?.reserved ? "true" : void 0
	};
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps(defaultProps, props),
		state: { slot: "message-image-gallery-item" }
	});
}
function MessageImageGalleryMedia({ className, render, ...props }) {
	const { media } = messageImageGallery();
	const defaultProps = { className: media({ className }) };
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps(defaultProps, props),
		state: { slot: "message-image-gallery-media" }
	});
}
function MessageImageGalleryOverlay({ className, render, ...props }) {
	const { overlay } = messageImageGallery();
	const defaultProps = { className: overlay({ className }) };
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps(defaultProps, props),
		state: { slot: "message-image-gallery-overlay" }
	});
}
function MessageImageGalleryPreview({ className, render, ...props }) {
	const { preview } = messageImageGallery();
	const defaultProps = {
		type: "button",
		className: preview({ className })
	};
	return useRender({
		defaultTagName: "button",
		render,
		props: mergeProps(defaultProps, props),
		state: { slot: "message-image-gallery-preview" }
	});
}
function MessageImageGalleryAction({ className, render, ...props }) {
	const { action } = messageImageGallery();
	const defaultProps = {
		type: "button",
		className: action({ className })
	};
	return useRender({
		defaultTagName: "button",
		render,
		props: mergeProps(defaultProps, props),
		state: { slot: "message-image-gallery-action" }
	});
}
//#endregion
//#region src/components/message-attachment/message-image-gallery-rows.ts
const SINGLE_IMAGE_MAX_WIDTH = 416;
const SINGLE_IMAGE_MAX_HEIGHT = 288;
function classifyMessageImageAspect(image) {
	if (!image.width || !image.height || image.width <= 0 || image.height <= 0) return "normal";
	const ratio = image.width / image.height;
	if (ratio >= 2.2) return "wide";
	if (ratio <= .55) return "tall";
	return "normal";
}
function reserveSingleImage(image) {
	if (!image.width || !image.height || image.width <= 0 || image.height <= 0) return {
		width: "min(11rem, 100%)",
		aspectRatio: "4 / 3"
	};
	const scale = Math.min(416 / image.width, 288 / image.height, 1);
	return {
		width: `min(${Math.max(1, Math.round(image.width * scale))}px, 100%)`,
		aspectRatio: `${image.width} / ${image.height}`
	};
}
function itemLayout(image, index, single) {
	if (single) return {
		index,
		fit: "contain",
		reserved: reserveSingleImage(image)
	};
	return {
		index,
		fit: classifyMessageImageAspect(image) === "normal" ? "cover" : "contain"
	};
}
function buildMessageImageGalleryRows(images) {
	if (images.length === 1) return [{ items: [itemLayout(images[0], 0, true)] }];
	const rows = [];
	let buffer = [];
	const pushBufferedRows = () => {
		if (buffer.length === 0) return;
		const chunkSize = buffer.length === 4 ? 2 : 3;
		for (let i = 0; i < buffer.length; i += chunkSize) rows.push({ items: buffer.slice(i, i + chunkSize).map((index) => itemLayout(images[index], index, false)) });
		buffer = [];
	};
	images.forEach((image, index) => {
		if (classifyMessageImageAspect(image) === "wide") {
			pushBufferedRows();
			rows.push({ items: [itemLayout(image, index, false)] });
			return;
		}
		buffer.push(index);
	});
	pushBufferedRows();
	return rows;
}
//#endregion
//#region src/components/message-attachment/message-video-preview.recipe.ts
const messageVideoPreview = tv({ slots: {
	root: [
		"group/video relative aspect-video w-full overflow-hidden",
		"bg-black text-left",
		"max-w-[min(360px,calc(100vw-112px))] rounded-container border border-line-muted bg-clip-padding"
	],
	media: "block size-full  bg-black object-contain",
	fallback: "flex size-full  items-center justify-center bg-black text-white",
	failureContent: ["flex max-w-[256px] flex-col items-center px-4 text-center", "gap-2 font-sans text-caption font-semibold"],
	failureIcon: ["[&_svg]:size-6 [&_svg]:stroke-2"],
	failureTitle: [],
	failureAction: [
		"inline-flex cursor-pointer items-center gap-1 border-0 bg-transparent p-0 text-white/75 [font:inherit]",
		"hover:text-white",
		"outline-1 outline-offset-2 outline-transparent focus-visible:outline-white",
		"[&_svg]:size-[13px]"
	],
	action: [
		"absolute flex items-center justify-center",
		"transition-colors duration-150",
		"outline-[1px] outline-offset-2 outline-transparent focus-visible:outline-foreground",
		"disabled:cursor-default [&_svg]:shrink-0",
		"top-2 right-2 size-8 rounded-control border-[1.5px] border-line-strong",
		"bg-layer-card text-foreground hover:bg-layer-card hover:text-foreground hover:press-overlay active:press-overlay",
		"outline-none focus-visible:shadow-raft-focus",
		"disabled:border-line-muted disabled:bg-fill-muted disabled:bg-none disabled:text-foreground-disabled",
		"[&_svg]:size-4"
	]
} });
//#endregion
//#region src/components/message-attachment/message-video-preview.tsx
function MessageVideoPreview({ className, render, ...props }) {
	const { root } = messageVideoPreview();
	const defaultProps = { className: root({ className }) };
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps(defaultProps, props),
		state: { slot: "message-video-preview" }
	});
}
function MessageVideoPreviewMedia({ className, render, ...props }) {
	const { media } = messageVideoPreview();
	const defaultProps = { className: media({ className }) };
	return useRender({
		defaultTagName: "video",
		render,
		props: mergeProps(defaultProps, props),
		state: { slot: "message-video-preview-media" }
	});
}
function MessageVideoPreviewFallback({ className, render, ...props }) {
	const { fallback } = messageVideoPreview();
	const defaultProps = { className: fallback({ className }) };
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps(defaultProps, props),
		state: { slot: "message-video-preview-fallback" }
	});
}
function MessageVideoPreviewFailureContent({ className, render, ...props }) {
	const { failureContent } = messageVideoPreview();
	const defaultProps = { className: failureContent({ className }) };
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps(defaultProps, props),
		state: { slot: "message-video-preview-failure-content" }
	});
}
function MessageVideoPreviewFailureIcon({ className, render, ...props }) {
	const { failureIcon } = messageVideoPreview();
	const defaultProps = { className: failureIcon({ className }) };
	return useRender({
		defaultTagName: "span",
		render,
		props: mergeProps(defaultProps, props),
		state: { slot: "message-video-preview-failure-icon" }
	});
}
function MessageVideoPreviewFailureTitle({ className, render, ...props }) {
	const { failureTitle } = messageVideoPreview();
	const defaultProps = { className: failureTitle({ className }) };
	return useRender({
		defaultTagName: "span",
		render,
		props: mergeProps(defaultProps, props),
		state: { slot: "message-video-preview-failure-title" }
	});
}
function MessageVideoPreviewFailureAction({ className, render, ...props }) {
	const { failureAction } = messageVideoPreview();
	const defaultProps = {
		type: "button",
		className: failureAction({ className })
	};
	return useRender({
		defaultTagName: "button",
		render,
		props: mergeProps(defaultProps, props),
		state: { slot: "message-video-preview-failure-action" }
	});
}
function MessageVideoPreviewAction({ className, render, ...props }) {
	const { action } = messageVideoPreview();
	const defaultProps = {
		type: "button",
		className: action({ className })
	};
	return useRender({
		defaultTagName: "button",
		render,
		props: mergeProps(defaultProps, props),
		state: { slot: "message-video-preview-action" }
	});
}
//#endregion
//#region src/components/message-forwarded-bundle/message-forwarded-bundle.recipe.ts
const messageForwardedBundle = tv({
	slots: {
		root: ["mt-1 max-w-[min(34rem,100%)]"],
		header: ["flex flex-wrap items-center justify-between", "gap-2"],
		headerContent: ["flex min-w-0 items-center", "gap-2"],
		headerLabel: ["inline-flex shrink-0 items-center", "gap-1 text-footnote font-bold text-foreground-muted [&_svg]:size-3.5"],
		headerCount: ["shrink-0", "font-mono text-mono-meta text-foreground-hint"],
		source: [
			"min-w-0 truncate",
			"inline-flex items-center gap-1 rounded-[2px] text-caption font-semibold text-foreground-hint",
			"decoration-[1.5px] underline-offset-[3px] hover:text-foreground hover:underline",
			"outline-none focus-visible:shadow-raft-focus",
			"[&_svg]:size-3.5"
		],
		sourceLabel: ["min-w-0 truncate", "inline-flex items-center gap-1 text-caption text-foreground-hint [&_svg]:size-3.5"],
		items: ["relative", ""],
		footerAction: [
			"inline-flex items-center gap-1 rounded-[2px] text-footnote font-semibold text-foreground",
			"underline decoration-[1.5px] underline-offset-[3px] hover:decoration-accent-500",
			"outline-none focus-visible:shadow-raft-focus"
		]
	},
	variants: {
		fullWidth: { true: { root: "w-full max-w-none" } },
		collapsed: { true: { items: [
			"max-h-40 overflow-clip",
			"after:pointer-events-none after:absolute after:inset-x-0 after:bottom-0 after:h-10 after:bg-linear-to-t",
			"data-[tight-fold]:after:h-5",
			"after:from-layer-card after:via-layer-card/80 after:to-layer-card/0"
		] } }
	}
});
const messageForwardedBundleItem = tv({
	slots: {
		root: ["px-3 py-2.5 text-body text-foreground"],
		meta: ["flex min-w-0 flex-wrap items-center", "mb-0.5 gap-1.5 font-mono text-mono-meta tabular-nums text-foreground-hint"],
		author: ["font-sans text-footnote font-bold text-foreground"],
		/** The item's text body — also the fold measurement's reading surface. */
		itemContent: ["min-w-0 max-w-full wrap-break-word"],
		attachments: ["flex flex-wrap", "mt-1.5 gap-1.5"],
		attachment: [
			"inline-flex max-w-full items-center",
			"h-[22px] gap-1 rounded-chip bg-fill-muted px-1.5",
			"text-caption font-semibold text-foreground [&_svg]:size-3.5"
		],
		attachmentName: ["min-w-0 truncate"],
		attachmentMeta: ["shrink-0", "font-mono font-normal text-foreground-hint"]
	},
	variants: { 
	/**
	* `interactive` marks an attachment the consumer wired to open (preview
	* or download). The affordance is style-only here; the element and the
	* action stay with the consumer via `render`.
	*/
action: {
		static: {},
		interactive: { attachment: [
			"cursor-pointer transition-colors hover:border-line-strong focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-line-strong",
			"hover:press-overlay active:press-overlay",
			"focus-visible:outline-none focus-visible:shadow-raft-focus"
		] }
	} },
	defaultVariants: { action: "static" }
});
/**
* Image rows for forwarded attachments: message-scale rows that compose the
* shared MessageImageGallery surfaces, so forwarded images read the same as
* images in a message. The component owns the layout (rows of three; a lone
* row of exactly four splits two-and-two) and the consumer owns the media.
*/
const messageForwardedBundleGallery = tv({
	slots: {
		root: ["min-w-0"],
		row: ["grid gap-2"],
		tile: ["[&_img]:block [&_img]:size-full [&_img]:object-cover"]
	},
	variants: { count: {
		1: { row: "grid-cols-1 auto-rows-[8rem] sm:auto-rows-[9rem]" },
		2: { row: "grid-cols-2 auto-rows-[8rem] sm:auto-rows-[9rem]" },
		3: { row: "grid-cols-2 auto-rows-[7rem] sm:auto-rows-[8rem] md:grid-cols-3" }
	} }
});
//#endregion
//#region src/components/message-forwarded-bundle/message-forwarded-bundle.tsx
const MessageForwardedBundleFoldContext = createContext(null);
/**
* The card folds when the items' text renders beyond this many lines in
* total. This is the component's own rule — consumers render the parts and get
* the fold for free — and it is measured from the rendered content, so
* wrapping, zoom and language do not need to be modelled anywhere.
*/
const FOLD_LINE_LIMIT = 8;
/** Fallback line height when the computed style reports `normal`. */
const FOLD_LINE_HEIGHT_FALLBACK = 20;
function measureLineHeight(slot) {
	if (!slot) return FOLD_LINE_HEIGHT_FALLBACK;
	return Number.parseFloat(getComputedStyle(slot).lineHeight) || FOLD_LINE_HEIGHT_FALLBACK;
}
function exceedsFoldLineLimit(slots, lineHeight, lineLimit) {
	if (slots.length === 0) return false;
	return slots.reduce((height, slot) => height + slot.getBoundingClientRect().height, 0) > lineHeight * lineLimit + 1;
}
function MessageForwardedBundle({ className, fullWidth = false, render, ...props }) {
	const { root } = messageForwardedBundle({ fullWidth });
	const [collapsed, setCollapsed] = useState(false);
	const [foldable, setFoldable] = useState(false);
	const [auto, setAuto] = useState(false);
	const touchedRef = useRef(false);
	const toggle = useCallback(() => {
		touchedRef.current = true;
		setCollapsed((current) => !current);
	}, []);
	const reportFold = useCallback((nextFoldable) => {
		setFoldable(nextFoldable);
		setAuto(true);
		if (!nextFoldable) setCollapsed(false);
		else if (!touchedRef.current) setCollapsed(true);
	}, []);
	const fold = useMemo(() => ({
		collapsed,
		foldable,
		auto,
		toggle,
		reportFold
	}), [
		collapsed,
		foldable,
		auto,
		toggle,
		reportFold
	]);
	return /* @__PURE__ */ jsx(MessageForwardedBundleFoldContext.Provider, {
		value: fold,
		children: /* @__PURE__ */ jsx(MessageEmbed, {
			className: root({ className }),
			render,
			...props
		})
	});
}
function MessageForwardedBundleHeader({ className, render, ...props }) {
	const { header } = messageForwardedBundle();
	return /* @__PURE__ */ jsx(MessageEmbedHeader, {
		className: header({ className }),
		render,
		...props
	});
}
function MessageForwardedBundleHeaderContent({ className, render, ...props }) {
	const { headerContent } = messageForwardedBundle();
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps({ className: headerContent({ className }) }, props),
		state: { slot: "message-forwarded-bundle-header-content" }
	});
}
function MessageForwardedBundleHeaderLabel({ className, render, ...props }) {
	const { headerLabel } = messageForwardedBundle();
	return useRender({
		defaultTagName: "span",
		render,
		props: mergeProps({ className: headerLabel({ className }) }, props),
		state: { slot: "message-forwarded-bundle-header-label" }
	});
}
function MessageForwardedBundleHeaderCount({ className, render, ...props }) {
	const { headerCount } = messageForwardedBundle();
	return useRender({
		defaultTagName: "span",
		render,
		props: mergeProps({ className: headerCount({ className }) }, props),
		state: { slot: "message-forwarded-bundle-header-count" }
	});
}
/**
* The items surface. Without a `collapsed` prop the fold is component-owned:
* the surface measures its item-content slots and collapses itself to
* `foldLineLimit` lines when the text renders beyond that many lines in total
* (eight by default). Passing `collapsed` switches to the controlled mode
* (the detail view pins everything open) and skips the measurement.
*/
function MessageForwardedBundleItems({ className, collapsed, foldLineLimit = FOLD_LINE_LIMIT, render, style, ...props }) {
	const fold = useContext(MessageForwardedBundleFoldContext);
	const controlled = collapsed !== void 0;
	const isCollapsed = controlled ? collapsed : fold?.collapsed ?? false;
	const { items } = messageForwardedBundle({ collapsed: isCollapsed });
	const containerRef = useRef(null);
	const [foldHeight, setFoldHeight] = useState(null);
	useLayoutEffect(() => {
		if (controlled || !fold) return;
		const container = containerRef.current;
		if (!container) return;
		let cancelled = false;
		const measure = () => {
			if (cancelled) return;
			const slots = [...container.querySelectorAll("[data-slot=\"message-forwarded-bundle-item-content\"]")];
			const lineHeight = measureLineHeight(slots[0]);
			fold.reportFold(exceedsFoldLineLimit(slots, lineHeight, foldLineLimit));
			setFoldHeight(slots.length > 0 ? lineHeight * foldLineLimit : null);
		};
		measure();
		const resizeObserver = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(measure);
		resizeObserver?.observe(container);
		const mutationObserver = typeof MutationObserver === "undefined" ? null : new MutationObserver(measure);
		mutationObserver?.observe(container, {
			childList: true,
			subtree: true,
			characterData: true
		});
		return () => {
			cancelled = true;
			resizeObserver?.disconnect();
			mutationObserver?.disconnect();
		};
	}, [
		controlled,
		fold,
		foldLineLimit
	]);
	const clampStyle = useMemo(() => isCollapsed && foldHeight !== null ? { maxHeight: `${foldHeight}px` } : void 0, [isCollapsed, foldHeight]);
	const mergedStyle = useMemo(() => clampStyle || style ? {
		...clampStyle,
		...style
	} : void 0, [clampStyle, style]);
	const tightFold = foldHeight !== null && foldHeight < 60;
	return /* @__PURE__ */ jsx(MessageEmbedContent, {
		ref: containerRef,
		className: items({ className }),
		"data-collapsed": isCollapsed || void 0,
		"data-tight-fold": tightFold || void 0,
		style: mergedStyle,
		render,
		...props
	});
}
function MessageForwardedBundleItem({ className, render, ...props }) {
	const { root } = messageForwardedBundleItem();
	return useRender({
		defaultTagName: "article",
		render,
		props: mergeProps({ className: root({ className }) }, props),
		state: { slot: "message-forwarded-bundle-item" }
	});
}
function MessageForwardedBundleItemMeta({ className, render, ...props }) {
	const { meta } = messageForwardedBundleItem();
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps({ className: meta({ className }) }, props),
		state: { slot: "message-forwarded-bundle-item-meta" }
	});
}
function MessageForwardedBundleItemAuthor({ className, render, ...props }) {
	const { author } = messageForwardedBundleItem();
	return useRender({
		defaultTagName: "span",
		render,
		props: mergeProps({ className: author({ className }) }, props),
		state: { slot: "message-forwarded-bundle-item-author" }
	});
}
/**
* The item's text body. The component-owned fold measures these slots: when
* their combined content renders beyond the fold line limit the card folds.
*/
function MessageForwardedBundleItemContent({ className, render, ...props }) {
	const { itemContent } = messageForwardedBundleItem();
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps({ className: itemContent({ className }) }, props),
		state: { slot: "message-forwarded-bundle-item-content" }
	});
}
function MessageForwardedBundleAttachments({ className, render, ...props }) {
	const { attachments } = messageForwardedBundleItem();
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps({ className: attachments({ className }) }, props),
		state: { slot: "message-forwarded-bundle-attachments" }
	});
}
function MessageForwardedBundleAttachment({ className, interactive = false, render, ...props }) {
	const { attachment } = messageForwardedBundleItem({ action: interactive ? "interactive" : "static" });
	return useRender({
		defaultTagName: "span",
		render,
		props: mergeProps({ className: attachment({ className }) }, props),
		state: { slot: "message-forwarded-bundle-attachment" }
	});
}
function MessageForwardedBundleAttachmentName({ className, render, ...props }) {
	const { attachmentName } = messageForwardedBundleItem();
	return useRender({
		defaultTagName: "span",
		render,
		props: mergeProps({ className: attachmentName({ className }) }, props),
		state: { slot: "message-forwarded-bundle-attachment-name" }
	});
}
function MessageForwardedBundleAttachmentMeta({ className, render, ...props }) {
	const { attachmentMeta } = messageForwardedBundleItem();
	return useRender({
		defaultTagName: "span",
		render,
		props: mergeProps({ className: attachmentMeta({ className }) }, props),
		state: { slot: "message-forwarded-bundle-attachment-meta" }
	});
}
function MessageForwardedBundleFooter({ className, render, ...props }) {
	const fold = useContext(MessageForwardedBundleFoldContext);
	if (fold?.auto && !fold.foldable) return null;
	return /* @__PURE__ */ jsx(MessageEmbedFooter, {
		className,
		render,
		...props
	});
}
function MessageForwardedBundleSource({ className, render, ...props }) {
	const { source } = messageForwardedBundle();
	return useRender({
		defaultTagName: "button",
		render,
		props: mergeProps({
			type: "button",
			className: source({ className })
		}, props),
		state: { slot: "message-forwarded-bundle-source" }
	});
}
function MessageForwardedBundleSourceLabel({ className, render, ...props }) {
	const { sourceLabel } = messageForwardedBundle();
	return useRender({
		defaultTagName: "span",
		render,
		props: mergeProps({ className: sourceLabel({ className }) }, props),
		state: { slot: "message-forwarded-bundle-source-label" }
	});
}
function MessageForwardedBundleFooterAction({ className, render, onClick, children, expandedContent, ...props }) {
	const fold = useContext(MessageForwardedBundleFoldContext);
	const { footerAction } = messageForwardedBundle();
	const handleClick = useCallback((event) => {
		onClick?.(event);
		if (!event.defaultPrevented) fold?.toggle();
	}, [fold, onClick]);
	const expanded = fold ? fold.auto && !fold.collapsed : false;
	return useRender({
		defaultTagName: "button",
		render,
		props: mergeProps({
			type: "button",
			className: footerAction({ className }),
			onClick: handleClick,
			"aria-expanded": fold?.auto ? expanded : void 0,
			children: expanded && expandedContent !== void 0 ? expandedContent : children
		}, props),
		state: { slot: "message-forwarded-bundle-footer-action" }
	});
}
/**
* Image rows for forwarded attachments. The gallery owns the layout — rows of
* three (a lone row of exactly four splits two-and-two) at the message gallery
* row heights — and composes the shared MessageImageGallery surfaces, so
* forwarded images are the same component family as images in a message.
* Consumers only place the media (`MessageForwardedBundleGalleryTile`).
*/
function MessageForwardedBundleGallery({ className, children, ...props }) {
	const { root, row } = messageForwardedBundleGallery();
	const items = Children.toArray(children);
	const chunkSize = items.length === 4 ? 2 : 3;
	const rows = [];
	for (let index = 0; index < items.length; index += chunkSize) rows.push(items.slice(index, index + chunkSize));
	return /* @__PURE__ */ jsx(MessageImageGallery, {
		className: root({ className }),
		...props,
		children: rows.map((rowItems, index) => /* @__PURE__ */ jsx("div", {
			className: row({ count: rowItems.length }),
			"data-slot": "message-forwarded-bundle-gallery-row",
			children: rowItems
		}, index))
	});
}
/**
* A media cell in the forwarded gallery rows: the shared message gallery item
* (its surface and rounding come from MessageImageGalleryItem).
*/
function MessageForwardedBundleGalleryTile({ className, render, ...props }) {
	const { tile } = messageForwardedBundleGallery();
	return /* @__PURE__ */ jsx(MessageImageGalleryItem, {
		className: tile({ className }),
		render,
		...props
	});
}
//#endregion
//#region src/components/progress/progress.tsx
const PROGRESS_STYLE = `
@keyframes raft-progress-indeterminate {
  0% {
    transform: translateX(-65%) scaleX(0.35);
  }
  50% {
    transform: translateX(70%) scaleX(0.6);
  }
  100% {
    transform: translateX(185%) scaleX(0.35);
  }
}

@keyframes raft-progress-sweep {
  0% {
    transform: translateX(-110%);
  }
  100% {
    transform: translateX(360%);
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-slot="progress-indicator"][data-indeterminate] {
    animation-duration: 2400ms;
  }
}
`;
const progress = tv({
	slots: {
		root: [
			"group/progress grid w-full min-w-0 gap-1.5",
			"[--progress-color:var(--foreground)]",
			"[--progress-light:var(--fill-muted)]",
			"[--progress-indicator:var(--progress-color)]",
			"[--progress-track:var(--fill-muted)]",
			"font-sans",
			"data-complete:[--progress-indicator:var(--color-success)]"
		],
		header: ["flex min-w-0 items-center justify-between gap-3"],
		label: ["min-w-0 truncate", "text-footnote font-semibold text-foreground"],
		value: ["shrink-0 tabular-nums", "font-mono text-mono-meta text-foreground-hint"],
		track: [
			"relative w-full overflow-hidden bg-(--progress-track)",
			"h-2 group-data-[size=sm]/progress:h-1.5 group-data-[size=lg]/progress:h-2.5",
			"rounded-sticker"
		],
		indicator: [
			"block h-full bg-(--progress-indicator)",
			"transition-[width,background-color] duration-200 ease-out",
			"data-indeterminate:absolute data-[indeterminate]:inset-y-0 data-indeterminate:w-1/2",
			"data-indeterminate:origin-left data-indeterminate:animate-[raft-progress-indeterminate_1.4s_ease-in-out_infinite]",
			"rounded-[inherit] inset-ring-[1.5px] inset-ring-sticker-ink"
		]
	},
	variants: {
		variant: {
			primary: { root: ["[--progress-color:var(--color-info)]", "[--progress-light:var(--color-info-muted)]"] },
			information: { root: ["[--progress-color:var(--color-info)]", "[--progress-light:var(--color-info-muted)]"] },
			accent: { root: ["[--progress-color:var(--color-info)]", "[--progress-light:var(--color-info-muted)]"] },
			success: { root: ["[--progress-color:var(--color-success)]", "[--progress-light:var(--color-success-muted)]"] },
			warning: { root: ["[--progress-color:var(--color-warning)]", "[--progress-light:var(--color-warning-muted)]"] },
			danger: { root: ["[--progress-color:var(--color-danger)]", "[--progress-light:var(--color-danger-muted)]"] }
		},
		size: {
			sm: {},
			md: {},
			lg: {}
		}
	},
	defaultVariants: {
		variant: "primary",
		size: "md"
	}
});
const progressStyle = /* @__PURE__ */ jsx("style", {
	href: "raft-ui-progress",
	precedence: "default",
	children: PROGRESS_STYLE
});
function Progress({ size = "md", variant = "primary", className, ...props }) {
	const { root } = progress({
		size,
		variant
	});
	return /* @__PURE__ */ jsx(Progress$1.Root, {
		"data-slot": "progress",
		"data-size": size,
		"data-variant": variant,
		className: root({ className }),
		...props
	});
}
function ProgressHeader({ className, ...props }) {
	const { header } = progress();
	return /* @__PURE__ */ jsx("div", {
		"data-slot": "progress-header",
		className: header({ className }),
		...props
	});
}
function ProgressLabel({ className, ...props }) {
	const { label } = progress();
	return /* @__PURE__ */ jsx(Progress$1.Label, {
		"data-slot": "progress-label",
		className: label({ className }),
		...props
	});
}
function ProgressValue({ className, ...props }) {
	const { value } = progress();
	return /* @__PURE__ */ jsx(Progress$1.Value, {
		"data-slot": "progress-value",
		className: value({ className }),
		...props
	});
}
function ProgressTrack({ className, ...props }) {
	const { track } = progress();
	return /* @__PURE__ */ jsx(Progress$1.Track, {
		"data-slot": "progress-track",
		className: track({ className }),
		...props
	});
}
function ProgressIndicator({ className, ...props }) {
	const { indicator } = progress();
	return /* @__PURE__ */ jsx(Progress$1.Indicator, {
		"data-slot": "progress-indicator",
		className: indicator({ className }),
		...props,
		children: progressStyle
	});
}
//#endregion
//#region src/components/message-translation/message-translation.recipe.ts
const messageTranslation = tv({ slots: {
	translationOriginal: ["not-italic", "mt-1"],
	translationOriginalLabel: ["mb-0.5 font-mono text-mono-meta text-foreground-hint"],
	translationStatus: ["inline-flex items-center gap-1.5", "mt-1 font-mono text-mono-meta text-foreground-hint [&_svg]:size-3"],
	translationFailedStatus: [
		"inline-flex items-center gap-1.5",
		"mt-1 font-mono text-mono-meta text-warning-strong",
		"[&_svg]:size-3"
	],
	translationProgressTrack: ["h-1"],
	translationAction: [
		"inline-flex items-center gap-1",
		"underline",
		"rounded-[2px] font-sans text-caption font-semibold text-foreground",
		"decoration-[1.5px] underline-offset-[3px] hover:decoration-accent-500",
		"outline-none focus-visible:shadow-raft-focus"
	],
	translationRetryAction: [
		"inline-flex items-center gap-1",
		"underline",
		"rounded-[2px] font-sans text-caption font-semibold text-foreground",
		"decoration-[1.5px] underline-offset-[3px] hover:decoration-accent-500",
		"outline-none focus-visible:shadow-raft-focus"
	]
} });
//#endregion
//#region src/components/message-translation/message-translation.tsx
function MessageItemTranslationOriginal({ className, ...props }) {
	const { translationOriginal } = messageTranslation();
	return /* @__PURE__ */ jsx(MarkdownBlockquote, {
		"data-slot": "message-item-translation-original",
		className: translationOriginal({ className }),
		...props
	});
}
function MessageItemTranslationOriginalLabel({ className, ...props }) {
	const { translationOriginalLabel } = messageTranslation();
	return /* @__PURE__ */ jsx("div", {
		"data-slot": "message-item-translation-original-label",
		className: translationOriginalLabel({ className }),
		...props
	});
}
function MessageItemTranslationStatus({ className, ...props }) {
	const { translationStatus } = messageTranslation();
	return /* @__PURE__ */ jsx("div", {
		"data-slot": "message-item-translation-status",
		className: translationStatus({ className }),
		...props
	});
}
function MessageItemTranslationProgressTrack({ className, ...props }) {
	const { translationProgressTrack } = messageTranslation();
	return /* @__PURE__ */ jsx(ProgressTrack, {
		className: translationProgressTrack({ className }),
		...props
	});
}
function MessageItemTranslationFailedStatus({ className, ...props }) {
	const { translationFailedStatus } = messageTranslation();
	return /* @__PURE__ */ jsx("div", {
		"data-slot": "message-item-translation-status",
		className: translationFailedStatus({ className }),
		...props
	});
}
function MessageItemTranslationAction({ className, ...props }) {
	const { translationAction } = messageTranslation();
	return /* @__PURE__ */ jsx("button", {
		type: "button",
		"data-slot": "message-item-translation-action",
		className: translationAction({ className }),
		...props
	});
}
function MessageItemTranslationRetryAction({ className, ...props }) {
	const { translationRetryAction } = messageTranslation();
	return /* @__PURE__ */ jsx("button", {
		type: "button",
		"data-slot": "message-item-translation-retry-action",
		className: translationRetryAction({ 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-muted"],
		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-muted",
			"[&_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/text/text.tsx
const textColorVariants = {
	default: ["text-foreground"],
	primary: ["text-primary-700"],
	information: ["text-info-strong"],
	muted: ["text-foreground-muted"],
	placeholder: ["text-foreground-placeholder"],
	accent: ["text-accent-700"],
	success: ["text-success"],
	warning: ["text-warning"],
	danger: ["text-danger"]
};
const heading = tv({
	base: ["m-0 font-heading font-medium text-foreground"],
	variants: {
		level: {
			1: ["text-[56px] tracking-[-0.01em] leading-16"],
			2: ["text-5xl tracking-[-0.01em] leading-14"],
			3: ["text-[40px] tracking-[-0.01em] leading-12"],
			4: ["text-[32px] tracking-[-0.005em] leading-10"],
			5: ["text-2xl leading-8"],
			6: ["text-xl leading-7"]
		},
		variant: textColorVariants
	},
	defaultVariants: { level: 1 }
});
const sans = tv({
	base: ["m-0 font-sans font-normal"],
	variants: {
		size: {
			large: ["text-lg leading-7 text-foreground-strong"],
			body: ["text-base leading-6 text-foreground-strong"],
			small: ["text-sm leading-5 text-foreground-muted"],
			caption: ["text-xs leading-4 text-foreground-muted"]
		},
		variant: textColorVariants
	},
	defaultVariants: { size: "body" }
});
const mono = tv({
	base: ["m-0 font-mono font-normal"],
	variants: {
		size: {
			code: ["text-sm leading-5 text-foreground-strong"],
			meta: ["text-xs leading-4 text-foreground-muted"],
			eyebrow: ["text-[10px] font-medium uppercase tracking-wide leading-none", "text-foreground-placeholder"],
			tabular: ["text-sm tabular-nums leading-5 text-foreground-strong"]
		},
		variant: textColorVariants
	},
	defaultVariants: { size: "code" }
});
function TextHeading({ level = 1, variant, className, render, ...props }) {
	const defaultProps = { className: heading({
		level,
		variant,
		className
	}) };
	return useRender({
		defaultTagName: `h${level}`,
		render,
		props: mergeProps(defaultProps, props),
		state: {
			slot: "text-heading",
			level,
			variant
		}
	});
}
function TextSans({ size = "body", variant, className, render, ...props }) {
	const defaultProps = { className: sans({
		size,
		variant,
		className
	}) };
	return useRender({
		defaultTagName: "p",
		render,
		props: mergeProps(defaultProps, props),
		state: {
			slot: "text-sans",
			size,
			variant
		}
	});
}
function TextMono({ size = "code", variant, className, render, ...props }) {
	const defaultProps = { className: mono({
		size,
		variant,
		className
	}) };
	return useRender({
		defaultTagName: "p",
		render,
		props: mergeProps(defaultProps, props),
		state: {
			slot: "text-mono",
			size,
			variant
		}
	});
}
const Text = {
	Heading: TextHeading,
	Sans: TextSans,
	Mono: TextMono
};
//#endregion
//#region src/components/timeline/timeline.tsx
/** Maps a task status to the shared `--task-status-*` token the marker should
*  paint with — the SAME token the icon/chip/badge read, so a task status can
*  never look different on the Timeline than everywhere else. */
function taskStatusMarkerColor(status) {
	return `var(--task-status-${status})`;
}
/** An ordered list of events; each `TimelineItem` has a marker and a line to the next. */
function Timeline({ size = "md", itemPlacement = "left", horizontal = false, iconSize, className, style, ...props }) {
	const mergedStyle = iconSize === void 0 ? style : {
		...style,
		"--r-timeline-custom-icon-size": `${iconSize}px`
	};
	return /* @__PURE__ */ jsx("ol", {
		"data-slot": "timeline",
		className: cn("r-timeline", `r-timeline--${size}`, horizontal ? "r-timeline--horizontal" : `r-timeline--${itemPlacement}`, className),
		style: mergedStyle,
		...props
	});
}
/** One event: a marker on the axis, then its title, content and time as children. */
function TimelineItem({ variant = "default", color, taskStatus, icon, lineType = "solid", className, style, children, ...props }) {
	const resolvedColor = color ?? (taskStatus ? taskStatusMarkerColor(taskStatus) : void 0);
	const mergedStyle = resolvedColor === void 0 ? style : {
		...style,
		"--r-timeline-custom-color": resolvedColor
	};
	return /* @__PURE__ */ jsxs("li", {
		"data-slot": "timeline-item",
		"data-task-status": taskStatus,
		"data-icon": icon === void 0 ? void 0 : "",
		className: cn("r-timeline-item", `r-timeline-item--${variant}`, lineType === "dashed" && "r-timeline-item--dashed", resolvedColor !== void 0 && "r-timeline-item--color", className),
		style: mergedStyle,
		...props,
		children: [/* @__PURE__ */ jsxs("div", {
			"aria-hidden": "true",
			"data-slot": "timeline-item-axis",
			className: "r-timeline-item__axis",
			children: [icon === void 0 ? /* @__PURE__ */ jsx("span", {
				"data-slot": "timeline-item-marker",
				className: "r-timeline-item__marker"
			}) : /* @__PURE__ */ jsx("span", {
				"data-slot": "timeline-item-icon",
				className: "r-timeline-item__icon",
				children: icon
			}), /* @__PURE__ */ jsx("span", {
				"data-slot": "timeline-item-line",
				className: "r-timeline-item__line"
			})]
		}), /* @__PURE__ */ jsx("div", {
			"data-slot": "timeline-item-body",
			className: "r-timeline-item__body",
			children
		})]
	});
}
function TimelineTitle({ className, ...props }) {
	return /* @__PURE__ */ jsx("div", {
		"data-slot": "timeline-title",
		className: cn("r-timeline-title", className),
		...props
	});
}
function TimelineContent({ className, ...props }) {
	return /* @__PURE__ */ jsx("div", {
		"data-slot": "timeline-content",
		className: cn("r-timeline-content", className),
		...props
	});
}
function TimelineTime({ className, ...props }) {
	return /* @__PURE__ */ jsx("div", {
		"data-slot": "timeline-time",
		className: cn("r-timeline-time", className),
		...props
	});
}
//#endregion
//#region src/components/steps/steps.tsx
const StepsContext = createContext({
	current: void 0,
	status: "process",
	finishIcon: void 0,
	errorIcon: void 0,
	finishLabel: "Completed",
	errorLabel: "Failed",
	select: void 0
});
/** The step's number, counted from 1, given by `Steps` to each child. */
const StepIndexContext = createContext(0);
const finishMark = /* @__PURE__ */ jsx("svg", {
	"aria-hidden": "true",
	fill: "none",
	viewBox: "0 0 16 16",
	children: /* @__PURE__ */ jsx("path", {
		d: "M3.5 8.5l3 3 6-7",
		stroke: "currentColor",
		strokeLinecap: "round",
		strokeLinejoin: "round",
		strokeWidth: "2"
	})
});
const errorMark = /* @__PURE__ */ jsx("svg", {
	"aria-hidden": "true",
	fill: "none",
	viewBox: "0 0 16 16",
	children: /* @__PURE__ */ jsx("path", {
		d: "M4.5 4.5l7 7M11.5 4.5l-7 7",
		stroke: "currentColor",
		strokeLinecap: "round",
		strokeWidth: "2"
	})
});
/**
* A step's own `status` wins; otherwise steps before `current` are finished,
* after it waiting, and the current step takes the steps' `status`. Without a
* `current` every step is in progress.
*/
function stepStatus(index, current, currentStatus, own) {
	if (own) return own;
	if (current === void 0) return "process";
	if (index < current) return "finish";
	if (index > current) return "wait";
	return currentStatus;
}
/**
* Numbered steps through a process, as an ordered list of `Step`s. Each child
* is numbered by its position; the step at `current` gets `aria-current="step"`.
*/
function Steps({ current: currentProp, defaultCurrent, status = "process", vertical = false, finishIcon, errorIcon, finishLabel = "Completed", errorLabel = "Failed", onUpdateCurrent, className, children, ref, ...props }) {
	const [uncontrolledCurrent, setUncontrolledCurrent] = useState(defaultCurrent);
	const current = currentProp ?? uncontrolledCurrent;
	const clickable = onUpdateCurrent !== void 0;
	const select = useCallback((index) => {
		if (index === current) return;
		setUncontrolledCurrent(index);
		onUpdateCurrent?.(index);
	}, [current, onUpdateCurrent]);
	const steps = Children.toArray(children).filter(isValidElement);
	const context = useMemo(() => ({
		current,
		status,
		finishIcon,
		errorIcon,
		finishLabel,
		errorLabel,
		select: clickable ? select : void 0
	}), [
		current,
		status,
		finishIcon,
		errorIcon,
		finishLabel,
		errorLabel,
		clickable,
		select
	]);
	return /* @__PURE__ */ jsx(StepsContext, {
		value: context,
		children: /* @__PURE__ */ jsx("ol", {
			ref,
			"data-slot": "steps",
			className: cn("r-steps", vertical ? "r-steps--vertical" : "r-steps--horizontal", className),
			...props,
			children: steps.map((child, index) => /* @__PURE__ */ jsx(StepIndexContext, {
				value: index + 1,
				children: child
			}, child.key))
		})
	});
}
/** The marker of a step: the finish or error mark, else its icon or number. */
function stepMarker(status, icon, index, steps) {
	if (status === "finish") return steps.finishIcon ?? finishMark;
	if (status === "error") return steps.errorIcon ?? errorMark;
	return icon ?? /* @__PURE__ */ jsx("span", {
		"data-slot": "step-index",
		className: "r-step__index",
		children: index
	});
}
/** Read out after the title: the marker's check or cross says it only by look. */
function StepStatusLabel({ status, steps }) {
	if (status !== "finish" && status !== "error") return null;
	const text = status === "finish" ? steps.finishLabel : steps.errorLabel;
	return /* @__PURE__ */ jsx("span", {
		"data-slot": "step-status",
		className: "r-step__status",
		children: ` ${text}`
	});
}
/** One step in `Steps`: a numbered marker, a title and a description. */
function Step({ title, description, status: statusProp, icon, disabled = false, className, children, ...props }) {
	const steps = use(StepsContext);
	const index = use(StepIndexContext);
	const descriptionId = useId();
	const status = stepStatus(index, steps.current, steps.status, statusProp);
	const isCurrent = steps.current !== void 0 && index === steps.current;
	const { select } = steps;
	const body = children ?? description;
	const handleClick = useCallback(() => select?.(index), [select, index]);
	const statusLabel = /* @__PURE__ */ jsx(StepStatusLabel, {
		status,
		steps
	});
	return /* @__PURE__ */ jsxs("li", {
		"data-slot": "step",
		"aria-current": isCurrent ? "step" : void 0,
		className: cn("r-step", `r-step--${status}`, select !== void 0 && !disabled && "r-step--clickable", disabled && "r-step--disabled", className),
		...props,
		children: [/* @__PURE__ */ jsxs("div", {
			"data-slot": "step-main",
			className: "r-step__main",
			children: [/* @__PURE__ */ jsx("div", {
				"aria-hidden": "true",
				"data-slot": "step-indicator",
				className: "r-step__indicator",
				children: stepMarker(status, icon, index, steps)
			}), /* @__PURE__ */ jsxs("div", {
				"data-slot": "step-content",
				className: "r-step__content",
				children: [select === void 0 ? /* @__PURE__ */ jsxs("div", {
					"data-slot": "step-title",
					className: "r-step__title",
					children: [title, statusLabel]
				}) : /* @__PURE__ */ jsxs("button", {
					type: "button",
					"data-slot": "step-title",
					"aria-describedby": body == null ? void 0 : descriptionId,
					className: "r-step__title r-step__button",
					disabled,
					onClick: handleClick,
					children: [title, statusLabel]
				}), body == null ? null : /* @__PURE__ */ jsx("div", {
					"data-slot": "step-description",
					className: "r-step__description",
					id: descriptionId,
					children: body
				})]
			})]
		}), /* @__PURE__ */ jsx("div", {
			"aria-hidden": "true",
			"data-slot": "step-connector",
			className: "r-step__connector"
		})]
	});
}
//#endregion
//#region src/components/steps/otter-indicator.tsx
const WAVE_PATH = "M-12 30q3-1.6 6 0t6 0t6 0t6 0t6 0t6 0t6 0t6 0t6 0t6 0t6 0t6 0V48H-12Z";
const FUR = "oklch(0.5 0.07 55)";
const FUR_DARK = "oklch(0.42 0.06 55)";
const INK = "oklch(0.22 0.03 45)";
const WHITE = "oklch(1 0 0)";
function Parcel({ x, y }) {
	return /* @__PURE__ */ jsxs("g", {
		transform: `translate(${x} ${y})`,
		children: [/* @__PURE__ */ jsx("rect", {
			width: "9",
			height: "7",
			rx: "0.8",
			fill: "oklch(0.78 0.12 75)",
			stroke: FUR_DARK,
			strokeWidth: "0.8"
		}), /* @__PURE__ */ jsx("path", {
			d: "M4.5 0v7M0 3h9",
			stroke: "oklch(0.63 0.11 65)",
			strokeWidth: "0.8"
		})]
	});
}
/** The face changes with the step: asleep, paddling, pleased or upset. */
function Face({ status }) {
	const line = {
		fill: "none",
		stroke: INK,
		strokeWidth: .8,
		strokeLinecap: "round"
	};
	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
		status === "process" && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("circle", {
			cx: "36.3",
			cy: "20.6",
			r: "1.1",
			fill: INK
		}), /* @__PURE__ */ jsx("circle", {
			cx: "36.7",
			cy: "20.2",
			r: "0.35",
			fill: WHITE
		})] }),
		status === "wait" && /* @__PURE__ */ jsx("path", {
			d: "M35.2 20.6q1.1 0.9 2.2 0",
			...line
		}),
		status === "finish" && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("path", {
			d: "M35.2 21.2q1.1-1.3 2.2 0",
			...line
		}), /* @__PURE__ */ jsx("ellipse", {
			cx: "38.6",
			cy: "22.4",
			rx: "1.3",
			ry: "0.8",
			fill: "oklch(0.8 0.1 20)",
			opacity: "0.8"
		})] }),
		status === "error" && /* @__PURE__ */ jsxs(Fragment$1, { children: [
			/* @__PURE__ */ jsx("circle", {
				cx: "36.3",
				cy: "20.8",
				r: "1.2",
				fill: WHITE,
				stroke: INK,
				strokeWidth: "0.5"
			}),
			/* @__PURE__ */ jsx("circle", {
				cx: "36.5",
				cy: "21",
				r: "0.55",
				fill: INK
			}),
			/* @__PURE__ */ jsx("path", {
				d: "M34.6 18.2l2.8 0.8",
				...line
			})
		] }),
		/* @__PURE__ */ jsx("ellipse", {
			cx: "42.6",
			cy: "23.6",
			rx: "1.4",
			ry: "1.1",
			fill: INK
		}),
		/* @__PURE__ */ jsx("path", {
			d: status === "error" ? "M39.6 27.2q1-0.9 2.1 0" : "M39.6 26.6q1 0.9 2.1 0",
			...line,
			strokeWidth: .7
		}),
		/* @__PURE__ */ jsx("path", {
			d: "M41 25.2l4.2-0.8M41 26l4.2 0.6",
			stroke: FUR_DARK,
			strokeWidth: "0.4",
			strokeLinecap: "round"
		})
	] });
}
/** A small badge above the head: ✓ when done, ! when failed. */
function Badge$1({ status }) {
	if (status !== "finish" && status !== "error") return null;
	return /* @__PURE__ */ jsxs("g", {
		transform: "translate(43 9)",
		children: [/* @__PURE__ */ jsx("circle", {
			r: "4.6",
			fill: status === "finish" ? "var(--success)" : "var(--danger)",
			stroke: WHITE,
			strokeWidth: "1"
		}), status === "finish" ? /* @__PURE__ */ jsx("path", {
			d: "M-2 0l1.4 1.5L2.1-1.4",
			fill: "none",
			stroke: WHITE,
			strokeWidth: "1.2",
			strokeLinecap: "round",
			strokeLinejoin: "round"
		}) : /* @__PURE__ */ jsx("path", {
			d: "M0-2.4v2.6M0 2.1v0.1",
			stroke: WHITE,
			strokeWidth: "1.3",
			strokeLinecap: "round"
		})]
	});
}
/** The otter on its back, posed by the step: paddling, at ease, upset or asleep. */
function OtterBody({ status }) {
	return /* @__PURE__ */ jsxs("g", {
		className: "r-otter-indicator__body",
		children: [
			/* @__PURE__ */ jsx("path", {
				d: "M13 26.5Q6 26.5 1.5 30.5Q7 32 13 31Z",
				fill: FUR_DARK
			}),
			/* @__PURE__ */ jsx("ellipse", {
				cx: "11",
				cy: "21.5",
				rx: "1.9",
				ry: "3",
				fill: FUR_DARK,
				transform: "rotate(-25 11 21.5)"
			}),
			/* @__PURE__ */ jsx("ellipse", {
				cx: "14.5",
				cy: "20.5",
				rx: "1.9",
				ry: "3",
				fill: FUR_DARK,
				transform: "rotate(-10 14.5 20.5)"
			}),
			/* @__PURE__ */ jsx("g", {
				className: "r-otter-indicator__arm",
				children: /* @__PURE__ */ jsx("path", {
					d: status === "process" ? "M29 27q4 3.5 2.5 8" : "M29 26q3 0.5 4-2",
					fill: "none",
					stroke: FUR_DARK,
					strokeWidth: "2.8",
					strokeLinecap: "round"
				})
			}),
			/* @__PURE__ */ jsx("ellipse", {
				cx: "22",
				cy: "28",
				rx: "12",
				ry: "6.5",
				fill: FUR
			}),
			/* @__PURE__ */ jsx("ellipse", {
				cx: "22",
				cy: "25",
				rx: "9",
				ry: "3.6",
				fill: "oklch(0.8 0.06 70)"
			}),
			status !== "error" && /* @__PURE__ */ jsx(Parcel, {
				x: 16.5,
				y: 16.5
			}),
			/* @__PURE__ */ jsx("ellipse", {
				cx: "26.5",
				cy: "21",
				rx: "1.7",
				ry: "2.4",
				fill: FUR_DARK,
				transform: "rotate(30 26.5 21)"
			}),
			status === "finish" && /* @__PURE__ */ jsx("ellipse", {
				cx: "16",
				cy: "21.5",
				rx: "1.6",
				ry: "2.2",
				fill: FUR_DARK,
				transform: "rotate(-30 16 21.5)"
			}),
			/* @__PURE__ */ jsx("circle", {
				cx: "31.5",
				cy: "17.3",
				r: "1.8",
				fill: FUR_DARK
			}),
			/* @__PURE__ */ jsx("circle", {
				cx: "35",
				cy: "23",
				r: "7",
				fill: FUR
			}),
			/* @__PURE__ */ jsx("ellipse", {
				cx: "39",
				cy: "25",
				rx: "4.2",
				ry: "3.2",
				fill: "oklch(0.87 0.05 75)"
			}),
			/* @__PURE__ */ jsx(Face, { status }),
			status === "error" && /* @__PURE__ */ jsx("path", {
				d: "M37.4 22.3q-0.8 1.4 0 1.9q0.8-0.5 0-1.9Z",
				fill: "oklch(0.8 0.08 230)"
			})
		]
	});
}
/**
* An otter on its back, one pose per status:
* - `wait`: asleep on the dry bank, the parcel still on its belly.
* - `process`: afloat, paddling with one arm, the parcel on its belly.
* - `finish`: drifting at ease, hugging the delivered parcel.
* - `error`: shivering in the water; the parcel has slipped away.
*
* It fills its box; give it 48px or more so the poses read.
*/
function OtterIndicator({ status, className, ...props }) {
	const pondId = `otter-pond${useId().replace(/[^\w-]/g, "")}`;
	const pond = `url(#${pondId})`;
	const wet = status !== "wait";
	return /* @__PURE__ */ jsxs("svg", {
		"aria-hidden": "true",
		viewBox: "0 0 48 48",
		width: "100%",
		height: "100%",
		"data-slot": "otter-indicator",
		...props,
		className: cn("r-otter-indicator", `r-otter-indicator--${status}`, className),
		children: [
			/* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("clipPath", {
				id: pondId,
				children: /* @__PURE__ */ jsx("ellipse", {
					cx: "24",
					cy: "35",
					rx: "23.5",
					ry: "8"
				})
			}) }),
			/* @__PURE__ */ jsxs("g", {
				transform: "translate(0 -5)",
				children: [
					wet ? /* @__PURE__ */ jsx("g", {
						clipPath: pond,
						children: /* @__PURE__ */ jsx("path", {
							className: "r-otter-indicator__wave r-otter-indicator__wave--back",
							d: WAVE_PATH,
							fill: "oklch(0.88 0.07 215)",
							transform: "translate(0 -1.5)"
						})
					}) : /* @__PURE__ */ jsxs("g", { children: [
						/* @__PURE__ */ jsx("ellipse", {
							cx: "24",
							cy: "34",
							rx: "22",
							ry: "5.5",
							fill: "oklch(0.9 0.06 85)"
						}),
						/* @__PURE__ */ jsx("ellipse", {
							cx: "7",
							cy: "34.5",
							rx: "1.6",
							ry: "1",
							fill: "oklch(0.78 0.06 75)"
						}),
						/* @__PURE__ */ jsx("ellipse", {
							cx: "41",
							cy: "35.5",
							rx: "1.2",
							ry: "0.8",
							fill: "oklch(0.78 0.06 75)"
						})
					] }),
					status === "process" && ["", " r-otter-indicator__ripple--late"].map((late) => /* @__PURE__ */ jsx("ellipse", {
						className: `r-otter-indicator__ripple${late}`,
						cx: "6",
						cy: "30.5",
						rx: "5",
						ry: "1.4",
						fill: "none",
						stroke: WHITE,
						strokeWidth: "0.8"
					}, late)),
					status === "error" && /* @__PURE__ */ jsx("g", {
						className: "r-otter-indicator__parcel--adrift",
						children: /* @__PURE__ */ jsx(Parcel, {
							x: 1.5,
							y: 22
						})
					}),
					/* @__PURE__ */ jsx(OtterBody, { status }),
					wet && /* @__PURE__ */ jsx("g", {
						clipPath: pond,
						children: /* @__PURE__ */ jsx("path", {
							className: "r-otter-indicator__wave",
							d: WAVE_PATH,
							fill: "oklch(0.78 0.11 220)",
							fillOpacity: "0.9"
						})
					}),
					status === "wait" && ["", " r-otter-indicator__z--late"].map((late, i) => /* @__PURE__ */ jsx("text", {
						className: `r-otter-indicator__z${late}`,
						x: i === 0 ? 38 : 43,
						y: i === 0 ? 15 : 9,
						fontSize: i === 0 ? 9 : 7,
						fontWeight: "700",
						fill: "var(--foreground-muted, currentColor)",
						children: "z"
					}, late))
				]
			}),
			/* @__PURE__ */ jsx(Badge$1, { status })
		]
	});
}
//#endregion
//#region src/components/table/table.recipe.ts
/**
* The settings-grade table: unified header, row separators and cell padding in
* the shared theme language (matching the markdown table's chrome tokens).
* Column widths are the caller's business — pair `<TableColgroup>` with the
* `table-fixed` class when stable widths matter; the base writes no
* `table-layout` so that override is always available.
*/
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"],
	head: [
		"text-left whitespace-nowrap",
		"border-b border-line-muted px-3 py-2",
		"text-footnote font-bold normal-case tracking-normal text-foreground-hint"
	],
	cell: ["align-top wrap-anywhere", "border-b border-line-muted px-3 py-2"],
	colgroup: [],
	column: [],
	caption: ["pt-2 text-caption text-foreground-hint"]
} });
//#endregion
//#region src/components/table/table.tsx
/**
* Native `<table>` semantics with the kit's chrome: render real
* table/thead/tbody/tr/th/td elements (useRender passthrough), so `scope`,
* screen-reader navigation and keyboard behaviour stay intact. A caller that
* wants a visually header-less table keeps its `<TableHead>` and hides it with
* `sr-only`; omitting the header would drop the semantics.
*/
function Table({ className, render, ...props }) {
	const { root } = table();
	return useRender({
		defaultTagName: "table",
		render,
		props: mergeProps({ className: root({ className }) }, props),
		state: { slot: "table" }
	});
}
function TableHeader({ className, render, ...props }) {
	const { header } = table();
	return useRender({
		defaultTagName: "thead",
		render,
		props: mergeProps({ className: header({ className }) }, props),
		state: { slot: "table-header" }
	});
}
function TableBody({ className, render, ...props }) {
	const { body } = table();
	return useRender({
		defaultTagName: "tbody",
		render,
		props: mergeProps({ className: body({ className }) }, props),
		state: { slot: "table-body" }
	});
}
function TableRow({ className, render, ...props }) {
	const { row } = table();
	return useRender({
		defaultTagName: "tr",
		render,
		props: mergeProps({ className: row({ className }) }, props),
		state: { slot: "table-row" }
	});
}
function TableHead({ className, render, scope = "col", ...props }) {
	const { head } = table();
	return useRender({
		defaultTagName: "th",
		render,
		props: mergeProps({
			scope,
			className: head({ className })
		}, props),
		state: { slot: "table-head" }
	});
}
function TableCell({ className, render, ...props }) {
	const { cell } = table();
	return useRender({
		defaultTagName: "td",
		render,
		props: mergeProps({ className: cell({ className }) }, props),
		state: { slot: "table-cell" }
	});
}
/**
* The table's accessible name. Render it visually or hide it with `sr-only`;
* a table without a caption should carry `aria-label` instead.
*/
function TableCaption({ className, render, ...props }) {
	const { caption } = table();
	return useRender({
		defaultTagName: "caption",
		render,
		props: mergeProps({ className: caption({ className }) }, props),
		state: { slot: "table-caption" }
	});
}
/** Column-width declarations: pair with `<Table className="table-fixed">`. */
function TableColgroup({ className, render, ...props }) {
	const { colgroup } = table();
	return useRender({
		defaultTagName: "colgroup",
		render,
		props: mergeProps({ className: colgroup({ className }) }, props),
		state: { slot: "table-colgroup" }
	});
}
function TableColumn({ className, render, ...props }) {
	const { column } = table();
	return useRender({
		defaultTagName: "col",
		render,
		props: mergeProps({ className: column({ className }) }, props),
		state: { slot: "table-column" }
	});
}
//#endregion
//#region src/components/file-preview/file-preview.recipe.ts
const filePreview = tv({
	slots: {
		root: ["relative flex h-10 w-10 shrink-0 items-center justify-center"],
		document: ["relative h-10 w-8 space-y-1.5 rounded-md rounded-tr-[15%] p-1.5 ring-1", "bg-layer-card shadow-none ring-line-muted"],
		file: ["relative flex h-10 w-8 items-center justify-center rounded-md rounded-tr-[15%] ring-1", "bg-layer-card shadow-none ring-line-muted"],
		code: ["relative flex h-10 w-8 items-center justify-center rounded-md rounded-tr-[15%] ring-1", "bg-layer-card shadow-none ring-line-muted"],
		fileZip: ["flex h-7 items-center justify-center"],
		fileZipStack: ["relative -translate-y-0.5 flex flex-col items-center"],
		fileZipTeeth: ["space-y-px"],
		fileZipRow: ["flex overflow-hidden rounded-full"],
		fileZipDark: ["size-0.5", "bg-foreground/40"],
		fileZipLight: ["size-0.5", "bg-foreground/15"],
		fileZipPull: ["mt-0.5 h-1 w-2.5 rounded-sm border", "border-foreground/40 bg-foreground/10"],
		codeStack: ["-translate-y-0.5 space-y-px"],
		codeRow: ["flex items-center gap-0.5 leading-none"],
		codeRowIndent: ["flex items-center gap-0.5 pl-1.5 leading-none"],
		codeTextRow: ["block pl-3"],
		codeGlyph: ["font-mono text-[4px] leading-none text-foreground-strong/30"],
		codeTagLine: ["h-0.5 w-3 rounded-full", "bg-foreground/40"],
		codeAttributeLine: ["h-0.5 w-2.5 rounded-full", "bg-foreground/25"],
		codeTextLine: ["h-0.5 w-6 rounded-full bg-foreground-strong/10"],
		codeSelfClosingLine: ["h-0.5 w-2 rounded-full", "bg-foreground/40"],
		badge: [
			"w-fit whitespace-nowrap",
			"rounded-sticker bg-fill-muted px-1 py-0.5 ring-1 ring-line-muted",
			"font-mono text-[10px] leading-none font-bold text-foreground-muted"
		],
		media: ["relative h-10 w-8 overflow-hidden rounded-md ring-1", "bg-fill-muted shadow-none ring-line-muted"]
	},
	variants: { placement: {
		corner: { badge: "absolute -right-1.5 bottom-0.5 z-10" },
		inline: { badge: "inline-flex h-3.5 w-7 shrink-0 items-center justify-center px-0 py-0" }
	} },
	defaultVariants: { placement: "corner" }
});
//#endregion
//#region src/components/file-preview/file-preview.tsx
function FilePreview({ className, render, ...props }) {
	const { root } = filePreview();
	const defaultProps = {
		"data-slot": "file-preview",
		className: root({ className })
	};
	return useRender({
		defaultTagName: "span",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function FilePreviewDocument({ children, className, render, ...props }) {
	const { document } = filePreview();
	const defaultProps = {
		"aria-hidden": true,
		"data-slot": "file-preview-document",
		className: document({ className }),
		children: /* @__PURE__ */ jsxs(Fragment$1, { children: [
			/* @__PURE__ */ jsx("span", { className: "block h-0.5 w-full rounded-full bg-ink-10" }),
			/* @__PURE__ */ jsxs("span", {
				className: "flex gap-0.5",
				children: [/* @__PURE__ */ jsx("span", { className: "h-0.5 w-1/3 rounded-full bg-ink-10" }), /* @__PURE__ */ jsx("span", { className: "h-0.5 w-2/3 rounded-full bg-ink-10" })]
			}),
			/* @__PURE__ */ jsxs("span", {
				className: "flex gap-0.5",
				children: [/* @__PURE__ */ jsx("span", { className: "h-0.5 w-1/2 rounded-full bg-ink-10" }), /* @__PURE__ */ jsx("span", { className: "h-0.5 w-1/2 rounded-full bg-ink-10" })]
			}),
			/* @__PURE__ */ jsxs("span", {
				className: "flex gap-0.5",
				children: [/* @__PURE__ */ jsx("span", { className: "h-0.5 w-1/3 rounded-full bg-ink-10" }), /* @__PURE__ */ jsx("span", { className: "h-0.5 w-2/3 rounded-full bg-ink-10" })]
			}),
			children
		] })
	};
	return useRender({
		defaultTagName: "span",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function FilePreviewFile({ children, className, render, ...props }) {
	const { file, fileZip, fileZipDark, fileZipLight, fileZipPull, fileZipRow, fileZipStack, fileZipTeeth } = filePreview();
	const defaultProps = {
		"aria-hidden": true,
		"data-slot": "file-preview-file",
		className: file({ className }),
		children: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
			className: fileZip(),
			children: /* @__PURE__ */ jsxs("span", {
				className: fileZipStack(),
				children: [/* @__PURE__ */ jsxs("span", {
					className: fileZipTeeth(),
					children: [
						/* @__PURE__ */ jsxs("span", {
							className: fileZipRow(),
							children: [/* @__PURE__ */ jsx("span", { className: fileZipDark() }), /* @__PURE__ */ jsx("span", { className: fileZipLight() })]
						}),
						/* @__PURE__ */ jsxs("span", {
							className: fileZipRow(),
							children: [/* @__PURE__ */ jsx("span", { className: fileZipLight() }), /* @__PURE__ */ jsx("span", { className: fileZipDark() })]
						}),
						/* @__PURE__ */ jsxs("span", {
							className: fileZipRow(),
							children: [/* @__PURE__ */ jsx("span", { className: fileZipDark() }), /* @__PURE__ */ jsx("span", { className: fileZipLight() })]
						}),
						/* @__PURE__ */ jsxs("span", {
							className: fileZipRow(),
							children: [/* @__PURE__ */ jsx("span", { className: fileZipLight() }), /* @__PURE__ */ jsx("span", { className: fileZipDark() })]
						}),
						/* @__PURE__ */ jsxs("span", {
							className: fileZipRow(),
							children: [/* @__PURE__ */ jsx("span", { className: fileZipDark() }), /* @__PURE__ */ jsx("span", { className: fileZipLight() })]
						})
					]
				}), /* @__PURE__ */ jsx("span", { className: fileZipPull() })]
			})
		}), children] })
	};
	return useRender({
		defaultTagName: "span",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function FilePreviewCode({ children, className, render, ...props }) {
	const { code, codeAttributeLine, codeGlyph, codeRow, codeRowIndent, codeSelfClosingLine, codeStack, codeTagLine, codeTextLine, codeTextRow } = filePreview();
	const defaultProps = {
		"aria-hidden": true,
		"data-slot": "file-preview-code",
		className: code({ className }),
		children: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("span", {
			className: codeStack(),
			children: [
				/* @__PURE__ */ jsxs("span", {
					className: codeRow(),
					children: [
						/* @__PURE__ */ jsx("span", {
							className: codeGlyph(),
							children: "<"
						}),
						/* @__PURE__ */ jsx("span", { className: codeTagLine() }),
						/* @__PURE__ */ jsx("span", {
							className: codeGlyph(),
							children: ">"
						})
					]
				}),
				/* @__PURE__ */ jsxs("span", {
					className: codeRowIndent(),
					children: [
						/* @__PURE__ */ jsx("span", {
							className: codeGlyph(),
							children: "<"
						}),
						/* @__PURE__ */ jsx("span", { className: codeAttributeLine() }),
						/* @__PURE__ */ jsx("span", {
							className: codeGlyph(),
							children: ">"
						})
					]
				}),
				/* @__PURE__ */ jsx("span", {
					className: codeTextRow(),
					children: /* @__PURE__ */ jsx("span", { className: codeTextLine() })
				}),
				/* @__PURE__ */ jsxs("span", {
					className: codeRowIndent(),
					children: [
						/* @__PURE__ */ jsx("span", {
							className: codeGlyph(),
							children: "</"
						}),
						/* @__PURE__ */ jsx("span", { className: codeAttributeLine() }),
						/* @__PURE__ */ jsx("span", {
							className: codeGlyph(),
							children: ">"
						})
					]
				}),
				/* @__PURE__ */ jsxs("span", {
					className: codeRowIndent(),
					children: [
						/* @__PURE__ */ jsx("span", {
							className: codeGlyph(),
							children: "<"
						}),
						/* @__PURE__ */ jsx("span", { className: codeSelfClosingLine() }),
						/* @__PURE__ */ jsx("span", {
							className: codeGlyph(),
							children: "/>"
						})
					]
				}),
				/* @__PURE__ */ jsxs("span", {
					className: codeRow(),
					children: [
						/* @__PURE__ */ jsx("span", {
							className: codeGlyph(),
							children: "</"
						}),
						/* @__PURE__ */ jsx("span", { className: codeTagLine() }),
						/* @__PURE__ */ jsx("span", {
							className: codeGlyph(),
							children: ">"
						})
					]
				})
			]
		}), children] })
	};
	return useRender({
		defaultTagName: "span",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function FilePreviewBadge({ placement, className, render, ...props }) {
	const { badge } = filePreview({ placement });
	const defaultProps = {
		"data-slot": "file-preview-badge",
		className: badge({ className })
	};
	return useRender({
		defaultTagName: "span",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function FilePreviewMedia({ children, className, render, ...props }) {
	const { media } = filePreview();
	const defaultProps = {
		"aria-hidden": true,
		"data-slot": "file-preview-media",
		className: media({ className }),
		children
	};
	return useRender({
		defaultTagName: "span",
		render,
		props: mergeProps(defaultProps, props)
	});
}
//#endregion
//#region src/components/files/files.recipe.ts
const files = tv({ slots: {
	panel: ["flex min-h-0 flex-1 flex-col", "bg-layer-panel text-foreground"],
	viewport: ["min-h-0 flex-1 overflow-y-auto"],
	list: ["flex flex-col gap-2 px-5 py-3", "max-md:px-4"],
	row: [
		"group/file-row flex w-full min-w-0 gap-3 px-3",
		"transition-colors",
		"items-center rounded-container border border-line-muted bg-layer-card py-2.5 pr-1.5 pl-2.5 shadow-none",
		"has-[[data-slot=file-row-open]:hover]:press-overlay has-[[data-slot=file-row-open]:active]:press-overlay",
		"has-[[data-slot=file-row-open]:focus-visible]:shadow-raft-focus"
	],
	rowOpen: [
		"flex min-w-0 flex-1 gap-3 text-left",
		"focus-visible:outline-2 focus-visible:outline-offset-2",
		"items-center outline-none",
		"focus-visible:outline-none"
	],
	thumbnail: [
		"flex shrink-0 items-center justify-center overflow-hidden",
		"[&_svg]:size-4.5 [&_svg]:shrink-0",
		"has-data-[slot=file-preview]:overflow-visible has-data-[slot=file-preview]:border-0 has-data-[slot=file-preview]:bg-transparent",
		"size-9 rounded-chip border-0 bg-fill-muted text-foreground-muted",
		"has-[[data-slot=file-preview]]:size-9"
	],
	image: [
		"block size-full",
		"data-[fit=contain]:object-contain data-[fit=cover]:object-cover",
		"bg-layer-card"
	],
	content: ["flex min-w-0 flex-1 flex-col", "justify-center gap-0.5"],
	name: ["block truncate", "font-sans text-callout font-semibold text-foreground"],
	meta: ["flex min-w-0 flex-wrap items-center gap-y-1", "mt-0 gap-x-1.5 font-mono text-mono-meta text-foreground-hint"],
	metaItem: ["inline-flex items-center gap-1 [&_svg]:size-3 [&_svg]:shrink-0"],
	actions: ["flex shrink-0 self-center items-center gap-1.5"]
} });
//#endregion
//#region src/components/files/files.tsx
function useFileSlot(slotName, dataSlot, defaultTagName, props) {
	const slot = files()[slotName];
	const { className, render, ...otherProps } = props;
	return useRender({
		defaultTagName,
		render,
		props: {
			"data-slot": dataSlot,
			className: slot({ className }),
			...otherProps
		}
	});
}
function FilesPanel(props) {
	return useFileSlot("panel", "files-panel", "section", props);
}
function FilesViewport(props) {
	return useFileSlot("viewport", "files-viewport", "div", props);
}
function FilesList(props) {
	return useFileSlot("list", "files-list", "div", props);
}
function FileRow(props) {
	return useFileSlot("row", "file-row", "div", props);
}
function FileRowOpen(props) {
	return useFileSlot("rowOpen", "file-row-open", "button", {
		type: "button",
		...props
	});
}
function FileThumbnail(props) {
	return useFileSlot("thumbnail", "file-thumbnail", "span", props);
}
function FileImage({ fit = "cover", ...props }) {
	return useFileSlot("image", "file-image", "img", {
		"data-fit": fit,
		...props
	});
}
function FileContent(props) {
	return useFileSlot("content", "file-content", "span", props);
}
function FileName(props) {
	return useFileSlot("name", "file-name", "span", props);
}
function FileMeta(props) {
	return useFileSlot("meta", "file-meta", "span", props);
}
function FileMetaItem(props) {
	return useFileSlot("metaItem", "file-meta-item", "span", props);
}
function FileActions(props) {
	return useFileSlot("actions", "file-actions", "span", props);
}
function FileAction({ variant, size = "icon-sm", ...props }) {
	return /* @__PURE__ */ jsx(Button, {
		variant: variant ?? "ghost",
		size,
		...props
	});
}
//#endregion
//#region src/components/composer/composer.recipe.ts
const composer = tv({ slots: {
	root: [
		"flex w-full flex-col gap-2 p-2",
		"rounded-container border-[1.5px] px-3 pt-3 pb-2",
		"border-line-strong bg-layer-card text-foreground shadow-none",
		"focus-within:shadow-raft-focus"
	],
	input: [
		"max-h-32 w-full resize-none bg-transparent outline-none",
		"field-sizing-content overflow-y-auto",
		"min-h-6 px-0.5",
		"font-sans text-body font-normal text-foreground md:text-body",
		"placeholder:text-foreground-placeholder"
	],
	toolbar: ["flex items-center justify-between", "gap-2"],
	actions: ["flex items-center gap-2"],
	meta: ["flex items-center", "gap-2"],
	iconButton: [
		"size-8 rounded-control text-foreground-icon",
		"disabled:border-transparent disabled:bg-transparent",
		"aria-disabled:border-transparent aria-disabled:bg-transparent",
		"[[data-slot=composer-actions]:first-child>&:first-child]:ml-[-5px]",
		"[&_svg:not([class*='size-'])]:size-4.5"
	]
} });
//#endregion
//#region src/components/composer/composer.tsx
function Composer({ className, render, ...props }) {
	const { root } = composer();
	const defaultProps = {
		"data-slot": "composer",
		className: root({ className })
	};
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function ComposerInput({ className, render, ...props }) {
	const { input } = composer();
	const defaultProps = {
		rows: 1,
		"data-slot": "composer-input",
		className: input({ className })
	};
	return useRender({
		defaultTagName: "textarea",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function ComposerToolbar({ className, render, ...props }) {
	const { toolbar } = composer();
	const defaultProps = {
		"data-slot": "composer-toolbar",
		className: toolbar({ className })
	};
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function ComposerActions({ className, render, ...props }) {
	const { actions } = composer();
	const defaultProps = {
		"data-slot": "composer-actions",
		className: actions({ className })
	};
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function ComposerMeta({ className, render, ...props }) {
	const { meta } = composer();
	const defaultProps = {
		"data-slot": "composer-meta",
		className: meta({ className })
	};
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function ComposerIconButton({ className, ...props }) {
	const { iconButton } = composer();
	return /* @__PURE__ */ jsx(Button, {
		type: "button",
		size: "icon-sm",
		variant: "ghost",
		className: iconButton({ className }),
		...props
	});
}
function ComposerSubmit({ type = "submit", ...props }) {
	return /* @__PURE__ */ jsx(Button, {
		...props,
		type,
		variant: "accent"
	});
}
//#endregion
//#region src/components/composer/composer-attachment.recipe.ts
const composerAttachment = tv({
	slots: {
		attachments: [
			"flex flex-wrap gap-2",
			"has-data-[slot=composer-attachments-scroll-area]:relative",
			"has-data-[slot=composer-attachments-scroll-area]:block",
			"has-[[data-slot=composer-attachments-scroll-area]]:min-w-0",
			"has-data-[slot=sortable-composer-attachments-list]:block",
			"has-[[data-slot=sortable-composer-attachments-list]]:min-w-0",
			"pt-1.5 pe-1.5",
			"has-[[data-slot=composer-attachments-scroll-area]]:p-0",
			"has-[[data-slot=sortable-composer-attachments-list]]:pt-0"
		],
		attachmentsScrollArea: ["relative w-full min-w-0"],
		attachmentsViewport: [
			"flex flex-nowrap gap-2 overflow-x-auto overflow-y-hidden overscroll-x-contain py-1.5",
			"scrollbar-none [&::-webkit-scrollbar]:hidden",
			"**:data-[slot=composer-attachment]:shrink-0",
			"pe-1.5"
		],
		attachmentsNav: [
			"absolute top-1/2 z-30 -translate-y-1/2",
			"size-8 shadow-none",
			"[&_svg:not([class*='size-'])]:size-4.5"
		],
		attachment: ["group/composer-attachment relative", "[--ca-overlay-border:1px]"],
		attachmentFile: [
			"relative flex h-16 w-44",
			"[&_svg]:size-4 [&_svg]:shrink-0",
			"items-center gap-2.5 rounded-control border border-line-muted bg-fill-muted px-2",
			"text-foreground [&_svg]:text-foreground-icon"
		],
		attachmentImage: [
			"relative block size-16 shrink-0 overflow-hidden",
			"**:data-[slot=file-preview]:size-full **:data-[slot=file-preview-media]:size-full",
			"**:data-[slot=file-preview-media]:border-0 **:data-[slot=file-preview-media]:bg-transparent",
			"**:data-[slot=file-preview-media]:shadow-none **:data-[slot=file-preview-media]:ring-0",
			"rounded-control border border-line-muted bg-fill-muted"
		],
		attachmentBody: ["min-w-0 flex-1", "flex flex-col justify-center gap-0.5"],
		attachmentTitle: ["block truncate", "font-sans text-footnote font-semibold text-foreground"],
		attachmentMeta: ["block w-full truncate", "text-left font-mono text-mono-meta text-foreground-hint"],
		attachmentUploadingOverlay: [
			"absolute inset-0 z-10 flex flex-col items-center justify-center px-1",
			"text-center",
			"rounded-control bg-layer-card/80",
			"font-mono text-mono-meta font-bold text-foreground"
		],
		attachmentUploadProgressBar: [
			"absolute z-20 h-1 overflow-hidden",
			"right-1.5 bottom-1.5 left-1.5 w-auto rounded-[2px]",
			"bg-layer-card"
		],
		attachmentUploadProgressBarIndicator: ["block h-full", "rounded-[inherit] bg-info"],
		attachmentFailedOverlay: [
			"absolute inset-0 z-10 flex flex-col items-center justify-center px-1",
			"[border-width:var(--ca-overlay-border,2px)]",
			"text-center",
			"rounded-control border-danger-strong bg-layer-card/90",
			"font-sans text-caption font-semibold text-danger-strong"
		],
		attachmentRemove: [
			"absolute z-20 flex items-center justify-center",
			"transition-opacity group-hover/composer-attachment:opacity-100",
			"[@media(hover:none)]:opacity-100",
			"[&_svg]:shrink-0",
			"-top-1.5 -right-1.5 size-5 rounded-sticker border-[1.5px] border-line-strong",
			"bg-layer-card text-foreground opacity-100",
			"hover:press-overlay active:press-overlay",
			"outline-none focus-visible:shadow-raft-focus",
			"disabled:cursor-not-allowed disabled:border-line-muted disabled:bg-fill-muted disabled:text-foreground-disabled",
			"after:absolute after:-inset-3 after:content-['']",
			"[@media(hover:none)]:size-5",
			"[&_svg]:size-3"
		]
	},
	variants: { side: {
		prev: { attachmentsNav: "left-1.5" },
		next: { attachmentsNav: "right-1.5" }
	} }
});
//#endregion
//#region src/components/composer/composer-attachments.tsx
function ComposerAttachments({ className, render, ...props }) {
	const { attachments } = composerAttachment();
	const defaultProps = {
		"data-slot": "composer-attachments",
		className: attachments({ className })
	};
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function ComposerAttachment({ className, render, ...props }) {
	const { attachment } = composerAttachment();
	const defaultProps = {
		"data-slot": "composer-attachment",
		className: attachment({ className })
	};
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function ComposerAttachmentFile({ className, render, ...props }) {
	const { attachmentFile } = composerAttachment();
	const defaultProps = {
		"data-slot": "composer-attachment-file",
		className: attachmentFile({ className })
	};
	return useRender({
		defaultTagName: "span",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function ComposerAttachmentImage({ className, render, ...props }) {
	const { attachmentImage } = composerAttachment();
	const defaultProps = {
		"data-slot": "composer-attachment-image",
		className: attachmentImage({ className })
	};
	return useRender({
		defaultTagName: "span",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function ComposerAttachmentBody({ className, render, ...props }) {
	const { attachmentBody } = composerAttachment();
	const defaultProps = {
		"data-slot": "composer-attachment-body",
		className: attachmentBody({ className })
	};
	return useRender({
		defaultTagName: "span",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function ComposerAttachmentTitle({ className, render, ...props }) {
	const { attachmentTitle } = composerAttachment();
	const defaultProps = {
		"data-slot": "composer-attachment-title",
		className: attachmentTitle({ className })
	};
	return useRender({
		defaultTagName: "span",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function ComposerAttachmentMeta({ className, render, ...props }) {
	const { attachmentMeta } = composerAttachment();
	const defaultProps = {
		"data-slot": "composer-attachment-meta",
		className: attachmentMeta({ className })
	};
	return useRender({
		defaultTagName: "span",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function ComposerAttachmentUploadingOverlay({ className, render, ...props }) {
	const { attachmentUploadingOverlay } = composerAttachment();
	const defaultProps = {
		"data-slot": "composer-attachment-uploading-overlay",
		className: attachmentUploadingOverlay({ className })
	};
	return useRender({
		defaultTagName: "span",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function ComposerAttachmentUploadProgressBar({ className, render, value, ...props }) {
	const { attachmentUploadProgressBar, attachmentUploadProgressBarIndicator } = composerAttachment();
	const progress = Math.max(4, Math.min(value, 100));
	const defaultProps = {
		"aria-hidden": true,
		"data-slot": "composer-attachment-upload-progress-bar",
		className: attachmentUploadProgressBar({ className }),
		children: /* @__PURE__ */ jsx("span", {
			"data-slot": "composer-attachment-upload-progress-bar-indicator",
			className: attachmentUploadProgressBarIndicator(),
			style: { width: `${progress}%` }
		})
	};
	return useRender({
		defaultTagName: "span",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function ComposerAttachmentFailedOverlay({ className, render, ...props }) {
	const { attachmentFailedOverlay } = composerAttachment();
	const defaultProps = {
		"data-slot": "composer-attachment-failed-overlay",
		className: attachmentFailedOverlay({ className })
	};
	return useRender({
		defaultTagName: "span",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function ComposerAttachmentRemove({ className, render, ...props }) {
	const { attachmentRemove } = composerAttachment();
	const defaultProps = {
		type: "button",
		"data-slot": "composer-attachment-remove",
		className: attachmentRemove({ className })
	};
	return useRender({
		render: render ?? /* @__PURE__ */ jsx(Button$1, {}),
		props: mergeProps(defaultProps, props)
	});
}
//#endregion
//#region src/components/composer/composer-attachments-scroll-area.tsx
function scrollByPage(viewport, direction) {
	if (!viewport) return;
	const page = viewport.clientWidth;
	if (page <= 0) return;
	const target = Math.round(viewport.scrollLeft / page) * page + direction * page;
	const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
	viewport.scrollTo({
		left: target,
		behavior: prefersReducedMotion ? "auto" : "smooth"
	});
}
function ComposerAttachmentsScrollArea({ children, className, onMouseEnter, onMouseLeave, ...props }) {
	const { attachmentsScrollArea, attachmentsViewport } = composerAttachment();
	const prevNavClassName = composerAttachment({ side: "prev" }).attachmentsNav();
	const nextNavClassName = composerAttachment({ side: "next" }).attachmentsNav();
	const viewportRef = useRef(null);
	const [canPrev, setCanPrev] = useState(false);
	const [canNext, setCanNext] = useState(false);
	const updateScrollState = () => {
		const viewport = viewportRef.current;
		if (!viewport) return;
		const maxScrollLeft = viewport.scrollWidth - viewport.clientWidth;
		setCanPrev(viewport.scrollLeft > 1);
		setCanNext(maxScrollLeft - viewport.scrollLeft > 1);
	};
	useEffect(() => {
		const viewport = viewportRef.current;
		if (!viewport) return;
		updateScrollState();
		const resizeObserver = new ResizeObserver(updateScrollState);
		resizeObserver.observe(viewport);
		for (const child of viewport.children) resizeObserver.observe(child);
		const mutationObserver = new MutationObserver(() => {
			for (const child of viewport.children) resizeObserver.observe(child);
			updateScrollState();
		});
		mutationObserver.observe(viewport, { childList: true });
		viewport.addEventListener("scroll", updateScrollState, { passive: true });
		window.addEventListener("resize", updateScrollState);
		return () => {
			resizeObserver.disconnect();
			mutationObserver.disconnect();
			viewport.removeEventListener("scroll", updateScrollState);
			window.removeEventListener("resize", updateScrollState);
		};
	}, []);
	const handleScrollPrev = useCallback(() => scrollByPage(viewportRef.current, -1), []);
	const handleScrollNext = useCallback(() => scrollByPage(viewportRef.current, 1), []);
	const showPrev = canPrev;
	const showNext = canNext;
	const navVariant = "default";
	return /* @__PURE__ */ jsxs("div", {
		"data-slot": "composer-attachments-scroll-area",
		className: attachmentsScrollArea({ className }),
		onMouseEnter,
		onMouseLeave,
		...props,
		children: [
			showPrev ? /* @__PURE__ */ jsx(Button, {
				type: "button",
				size: "icon-sm",
				variant: navVariant,
				"aria-label": "Scroll attachments left",
				className: prevNavClassName,
				onClick: handleScrollPrev,
				children: /* @__PURE__ */ jsx(ChevronLeft, {})
			}) : null,
			/* @__PURE__ */ jsx("div", {
				ref: viewportRef,
				"data-slot": "composer-attachments-viewport",
				className: attachmentsViewport(),
				children
			}),
			showNext ? /* @__PURE__ */ jsx(Button, {
				type: "button",
				size: "icon-sm",
				variant: navVariant,
				"aria-label": "Scroll attachments right",
				className: nextNavClassName,
				onClick: handleScrollNext,
				children: /* @__PURE__ */ jsx(ChevronRight, {})
			}) : null
		]
	});
}
//#endregion
//#region src/components/composer/sortable-composer-attachments.tsx
const SORTABLE_TRANSITION = {
	duration: 160,
	easing: "cubic-bezier(0.25, 1, 0.5, 1)"
};
/**
* Mixed-width flex-wrap cannot be predicted by rectSortingStrategy. Preview
* position by live DOM reorder on dragOver instead; strategy returns null so
* siblings are not shifted by incorrect transforms on top of that reflow.
* @see https://github.com/clauderic/dnd-kit/issues/44
*/
const liveReorderStrategy = () => null;
const restrictToHorizontalAxis = ({ transform }) => ({
	...transform,
	y: 0
});
const HORIZONTAL_MODIFIERS = [restrictToHorizontalAxis];
const HORIZONTAL_AUTO_SCROLL = {
	threshold: {
		x: .15,
		y: 0
	},
	canScroll: (element) => element.scrollWidth > element.clientWidth + 1
};
/**
* Prefer pointer hits; if the active droppable is still under the pointer /
* closest center, keep it so layout reflow alone cannot claim a neighbor.
*/
const sortableCollisionDetection = (args) => {
	const pointerCollisions = pointerWithin(args);
	const collisions = pointerCollisions.length > 0 ? pointerCollisions : closestCenter(args);
	const self = collisions.find((collision) => collision.id === args.active.id);
	return self ? [self] : collisions;
};
function reorderItems(items, activeId, overId) {
	const oldIndex = items.indexOf(String(activeId));
	const newIndex = items.indexOf(String(overId));
	if (oldIndex === -1 || newIndex === -1 || oldIndex === newIndex) return null;
	return arrayMove([...items], oldIndex, newIndex);
}
function pointerFromDragEvent(event) {
	const { activatorEvent, delta } = event;
	if (!activatorEvent || !("clientX" in activatorEvent) || !("clientY" in activatorEvent) || typeof activatorEvent.clientX !== "number" || typeof activatorEvent.clientY !== "number") return null;
	return {
		x: activatorEvent.clientX + delta.x,
		y: activatorEvent.clientY + delta.y
	};
}
function samePointer(a, b, tolerance = .5) {
	return Math.abs(a.x - b.x) <= tolerance && Math.abs(a.y - b.y) <= tolerance;
}
/** Attachment tiles keyed by id; also the source of the DragOverlay ghost content. */
function attachmentsById(children) {
	const byId = /* @__PURE__ */ new Map();
	Children.forEach(children, (child) => {
		if (!isValidElement(child) || child.props.id == null) return;
		byId.set(String(child.props.id), child);
	});
	return byId;
}
function SortableComposerAttachmentsRoot({ items, onReorder, children, axis, strategy }) {
	const dndContextId = useId();
	const listRef = useRef(null);
	const [activeId, setActiveId] = useState(null);
	const [draftIds, setDraftIds] = useState([]);
	const [overlay, setOverlay] = useState(null);
	const [listMinHeight, setListMinHeight] = useState();
	const draftIdsRef = useRef([]);
	const lastReorderPointerRef = useRef(null);
	const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 6 } }), useSensor(TouchSensor, { activationConstraint: {
		delay: 350,
		tolerance: 8
	} }), useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }));
	const attachments = useMemo(() => attachmentsById(children), [children]);
	const itemIds = useMemo(() => items.map(String), [items]);
	const horizontal = axis === "x";
	const displayIds = activeId !== null ? draftIds : itemIds;
	const orderedChildren = useMemo(() => displayIds.flatMap((id) => {
		const child = attachments.get(id);
		return child ? [child] : [];
	}), [attachments, displayIds]);
	const listClassName = horizontal ? "contents" : "flex w-full min-w-0 flex-wrap content-start items-start gap-2 py-1.5";
	const handleDragStart = useCallback(({ active }) => {
		const id = String(active.id);
		lastReorderPointerRef.current = null;
		const nextDraft = [...itemIds];
		draftIdsRef.current = nextDraft;
		setDraftIds(nextDraft);
		if (!horizontal && listRef.current) setListMinHeight(listRef.current.getBoundingClientRect().height);
		setActiveId(id);
		setOverlay(attachments.get(id)?.props.children ?? null);
	}, [
		attachments,
		horizontal,
		itemIds
	]);
	const handleDragOver = useCallback(({ active, over, activatorEvent, delta }) => {
		if (!over || active.id === over.id) return;
		const next = reorderItems(draftIdsRef.current, active.id, over.id);
		if (!next) return;
		const pointer = pointerFromDragEvent({
			activatorEvent,
			delta
		});
		if (pointer && lastReorderPointerRef.current && samePointer(pointer, lastReorderPointerRef.current)) return;
		if (pointer) lastReorderPointerRef.current = pointer;
		draftIdsRef.current = next;
		setDraftIds(next);
	}, []);
	const clearDrag = useCallback(() => {
		lastReorderPointerRef.current = null;
		draftIdsRef.current = [];
		setActiveId(null);
		setDraftIds([]);
		setOverlay(null);
		setListMinHeight(void 0);
	}, []);
	const handleDragCancel = useCallback(() => {
		clearDrag();
	}, [clearDrag]);
	const handleDragEnd = useCallback(() => {
		onReorder(draftIdsRef.current);
		clearDrag();
	}, [clearDrag, onReorder]);
	const modifiers = horizontal ? HORIZONTAL_MODIFIERS : void 0;
	return /* @__PURE__ */ jsxs(DndContext, {
		id: dndContextId,
		sensors,
		collisionDetection: sortableCollisionDetection,
		modifiers,
		autoScroll: horizontal ? HORIZONTAL_AUTO_SCROLL : false,
		onDragStart: handleDragStart,
		onDragOver: handleDragOver,
		onDragCancel: handleDragCancel,
		onDragEnd: handleDragEnd,
		children: [/* @__PURE__ */ jsx("div", {
			ref: listRef,
			"data-slot": "sortable-composer-attachments-list",
			className: listClassName,
			style: listMinHeight != null ? { minHeight: listMinHeight } : void 0,
			children: /* @__PURE__ */ jsx(SortableContext, {
				items: displayIds,
				strategy,
				children: orderedChildren
			})
		}), /* @__PURE__ */ jsx(DragOverlay, {
			dropAnimation: null,
			modifiers,
			children: activeId && overlay ? /* @__PURE__ */ jsx("div", {
				className: "w-max max-w-full shrink-0 cursor-grabbing",
				children: overlay
			}) : null
		})]
	});
}
/** Wrap / flex-pack attachment reorder (mixed widths). */
function SortableComposerAttachments(props) {
	return /* @__PURE__ */ jsx(SortableComposerAttachmentsRoot, {
		...props,
		axis: "xy",
		strategy: liveReorderStrategy
	});
}
/** Horizontal scroll strip reorder — wraps `ComposerAttachmentsScrollArea`. */
function SortableComposerAttachmentsScroll(props) {
	return /* @__PURE__ */ jsx(ComposerAttachmentsScrollArea, { children: /* @__PURE__ */ jsx(SortableComposerAttachmentsRoot, {
		...props,
		axis: "x",
		strategy: horizontalListSortingStrategy
	}) });
}
/**
* Sized placeholder stays in the flex flow (opacity 0). DragOverlay is the
* pointer ghost — the root reads these `children` for it. Live draft reorder
* moves this slot to the drop index; wrap skips strategy transforms so siblings
* FLIP via layout instead of wrong gaps.
*/
function SortableComposerAttachment({ id, label, children }) {
	const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
		id,
		animateLayoutChanges: defaultAnimateLayoutChanges,
		transition: SORTABLE_TRANSITION
	});
	const { role: _sortableRole, tabIndex: _sortableTabIndex, ...sortableAttributes } = attributes;
	const style = {
		transform: isDragging ? void 0 : CSS.Translate.toString(transform),
		transition: isDragging ? void 0 : transition,
		opacity: isDragging ? 0 : void 0,
		zIndex: isDragging ? 0 : void 0
	};
	return /* @__PURE__ */ jsx("div", {
		ref: setNodeRef,
		"aria-label": `Reorder ${label}`,
		className: "w-max max-w-full shrink-0 cursor-grab touch-none active:cursor-grabbing",
		"data-dragging": isDragging ? "true" : void 0,
		"data-slot": "sortable-composer-attachment",
		style,
		...sortableAttributes,
		...listeners,
		children
	});
}
//#endregion
//#region src/components/composer/composer-drop-overlay.recipe.ts
const composerDropOverlay = tv({ slots: {
	dropOverlay: [
		"absolute inset-0 z-30 flex items-center justify-center",
		"rounded-container border-[1.5px] border-dashed border-line-seam",
		"bg-layer-card bg-[linear-gradient(var(--info-soft),var(--info-soft))]"
	],
	dropOverlayLabel: [
		"flex flex-col items-center border-0 p-0",
		"text-center",
		"gap-3 font-sans text-callout font-semibold",
		"text-foreground"
	],
	dropOverlayIconCluster: ["relative flex items-center justify-center", "h-10 w-22"],
	dropOverlayIcon: [
		"rounded-control p-2",
		"bg-layer-card shadow-none ring-1 ring-line-muted",
		"[&_svg]:size-4"
	]
} });
//#endregion
//#region src/components/composer/composer-drop-overlay.tsx
function ComposerDropOverlay({ className, render, ...props }) {
	const { dropOverlay } = composerDropOverlay();
	const defaultProps = {
		"data-slot": "composer-drop-overlay",
		className: dropOverlay({ className })
	};
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function ComposerDropOverlayLabel({ className, render, ...props }) {
	const { dropOverlayLabel } = composerDropOverlay();
	const defaultProps = {
		"data-slot": "composer-drop-overlay-label",
		className: dropOverlayLabel({ className })
	};
	return useRender({
		defaultTagName: "span",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function ComposerDropOverlayPrompt({ children, ...props }) {
	const { dropOverlayIcon, dropOverlayIconCluster } = composerDropOverlay();
	if (children) return /* @__PURE__ */ jsx(ComposerDropOverlayLabel, {
		...props,
		children
	});
	return /* @__PURE__ */ jsxs(ComposerDropOverlayLabel, {
		...props,
		children: [/* @__PURE__ */ jsxs("span", {
			"aria-hidden": true,
			className: dropOverlayIconCluster(),
			children: [
				/* @__PURE__ */ jsx("span", {
					className: dropOverlayIcon({ className: "absolute -translate-x-6 translate-y-1 -rotate-12" }),
					children: /* @__PURE__ */ jsx(FileText, { className: "text-foreground-icon" })
				}),
				/* @__PURE__ */ jsx("span", {
					className: dropOverlayIcon({ className: "absolute z-10" }),
					children: /* @__PURE__ */ jsx(Upload, { className: "text-foreground-icon" })
				}),
				/* @__PURE__ */ jsx("span", {
					className: dropOverlayIcon({ className: "absolute z-20 translate-x-7 translate-y-1 rotate-12" }),
					children: /* @__PURE__ */ jsx(Image, { className: "text-foreground-icon" })
				})
			]
		}), /* @__PURE__ */ jsx("span", { children: "Drop files to attach" })]
	});
}
//#endregion
//#region src/components/composer/composer-suggestion-list.tsx
const composerSuggestionList = tv({
	slots: {
		root: [
			"absolute inset-x-0 bottom-full w-auto overflow-y-auto",
			"mb-2 max-h-60 overflow-x-hidden rounded-container p-1.5",
			"bg-layer-popover text-foreground ring-1 ring-line-seam shadow-raft-float"
		],
		group: ["flex flex-col"],
		groupLabel: ["py-1.5", "px-2.5 pt-2 pb-1 font-sans text-caption font-bold text-foreground-hint"],
		item: [
			"flex w-full items-center text-left",
			"min-h-9 cursor-pointer gap-2.5 rounded-control px-2.5 py-1",
			"font-sans text-callout font-medium text-foreground",
			"hover:bg-primary-soft data-[highlighted=true]:bg-primary-soft",
			"data-[disabled=true]:cursor-default data-[disabled=true]:text-foreground-disabled",
			"data-[disabled=true]:hover:bg-transparent"
		],
		content: ["flex min-w-0 flex-1 items-center gap-1.5 text-left"],
		icon: ["shrink-0"],
		title: ["min-w-0 truncate"],
		aside: ["ml-auto flex max-w-[33%] min-w-0 shrink-0 items-center justify-end"],
		meta: ["text-caption text-foreground-hint"]
	},
	variants: {
		separated: {
			true: { group: ["-mx-1.5 mt-1.5 border-t border-line-muted px-1.5 pt-1.5"] },
			false: {}
		},
		iconVariant: {
			avatar: {},
			framed: { icon: ["flex size-[19px] items-center justify-center rounded-sticker", "bg-fill-muted text-foreground-muted [&_svg]:size-[11px]"] },
			auxiliary: { icon: ["-ml-1 size-3", "text-foreground-hint"] },
			inline: { icon: ["flex size-3.5 items-center justify-center [&_svg]:size-3.5", "text-foreground-hint"] }
		},
		metaVariant: {
			text: { meta: "min-w-0 flex-1 basis-0 truncate" },
			code: { meta: ["min-w-0 truncate font-mono", "text-mono-meta text-foreground-hint"] }
		}
	},
	defaultVariants: {
		separated: false,
		iconVariant: "avatar",
		metaVariant: "text"
	}
});
function ComposerSuggestionList({ className, render, ...props }) {
	const { root } = composerSuggestionList();
	const defaultProps = {
		"data-slot": "composer-suggestion-list",
		className: root({ className })
	};
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function ComposerSuggestionGroup({ separated, className, render, ...props }) {
	const { group } = composerSuggestionList({ separated });
	const defaultProps = {
		"data-slot": "composer-suggestion-group",
		className: group({ className })
	};
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function ComposerSuggestionGroupLabel({ className, render, ...props }) {
	const { groupLabel } = composerSuggestionList();
	const defaultProps = {
		"data-slot": "composer-suggestion-group-label",
		className: groupLabel({ className })
	};
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function ComposerSuggestionOption({ className, render, ...props }) {
	const { item } = composerSuggestionList();
	const defaultProps = {
		"data-slot": "composer-suggestion-option",
		className: item({ className }),
		role: "option"
	};
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function ComposerSuggestionContent({ className, render, ...props }) {
	const { content } = composerSuggestionList();
	const defaultProps = {
		"data-slot": "composer-suggestion-content",
		className: content({ className })
	};
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function ComposerSuggestionIcon({ variant = "avatar", className, render, ...props }) {
	const { icon } = composerSuggestionList({ iconVariant: variant });
	const defaultProps = {
		"data-slot": "composer-suggestion-icon",
		className: icon({ className })
	};
	return useRender({
		defaultTagName: "span",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function ComposerSuggestionTitle({ className, render, ...props }) {
	const { title } = composerSuggestionList();
	const defaultProps = {
		"data-slot": "composer-suggestion-title",
		className: title({ className })
	};
	return useRender({
		defaultTagName: "span",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function ComposerSuggestionAside({ className, render, ...props }) {
	const { aside } = composerSuggestionList();
	const defaultProps = {
		"data-slot": "composer-suggestion-aside",
		className: aside({ className })
	};
	return useRender({
		defaultTagName: "span",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function ComposerSuggestionMeta({ variant = "text", className, render, ...props }) {
	const { meta } = composerSuggestionList({ metaVariant: variant });
	const defaultProps = {
		"data-slot": "composer-suggestion-meta",
		className: meta({ className })
	};
	return useRender({
		defaultTagName: "span",
		render,
		props: mergeProps(defaultProps, props)
	});
}
//#endregion
//#region src/components/composer/composer-root.tsx
const composerRoot = tv({ base: ["relative flex w-full flex-col", "gap-2"] });
function ComposerRoot({ className, render, ...props }) {
	const defaultProps = {
		"data-slot": "composer-root",
		className: composerRoot({ className })
	};
	return useRender({
		defaultTagName: "form",
		render,
		props: mergeProps(defaultProps, props)
	});
}
//#endregion
//#region src/components/composer/composer-toolbar-label.tsx
const composerToolbarLabel = tv({ slots: { root: [
	"inline-flex cursor-pointer select-none items-center",
	"min-h-8 gap-2",
	"font-sans text-callout font-semibold text-foreground",
	"has-data-disabled:cursor-not-allowed has-data-disabled:text-foreground-disabled"
] } });
function ComposerToolbarLabel({ className, render, ...props }) {
	const { root } = composerToolbarLabel();
	const defaultProps = {
		"data-slot": "composer-toolbar-label",
		className: root({ className })
	};
	return useRender({
		defaultTagName: "label",
		render,
		props: mergeProps(defaultProps, props)
	});
}
//#endregion
//#region src/components/composer/use-composer-suggestions.ts
function findNextEnabledIndex(items, current, direction, isItemDisabled) {
	if (items.length === 0) return -1;
	const start = current >= 0 ? current : direction === 1 ? -1 : 0;
	for (let offset = 1; offset <= items.length; offset += 1) {
		const index = (start + direction * offset + items.length) % items.length;
		if (!isItemDisabled(items[index])) return index;
	}
	return -1;
}
function normalizeHighlightedIndex(items, highlightedIndex, isItemDisabled) {
	const highlightedItem = items[highlightedIndex];
	if (highlightedItem !== void 0 && !isItemDisabled(highlightedItem)) return highlightedIndex;
	return findNextEnabledIndex(items, -1, 1, isItemDisabled);
}
/**
* Headless behavior for an inline trigger-driven suggestion popup (@mention, #channel)
* layered over a composer textarea. Owns open state, highlighted option, keyboard
* navigation, IME guarding, and caret-preserving insertion. The consumer supplies
* trigger detection, item data, insertion text, and textarea/listbox option semantics.
*/
function useComposerSuggestions({ value, onValueChange, detectTrigger, getItems, getItemText, isItemDisabled = () => false }) {
	const listId = `composer-suggestions-${useId()}`;
	const inputRef = useRef(null);
	const listRef = useRef(null);
	const composingRef = useRef(false);
	const frameRef = useRef(null);
	const caretRef = useRef(value.length);
	const [interaction, setInteraction] = useState(() => {
		const initialMatch = detectTrigger(value);
		return {
			highlightedIndex: initialMatch ? findNextEnabledIndex(getItems(initialMatch), -1, 1, isItemDisabled) : -1,
			match: initialMatch,
			value
		};
	});
	const match = interaction.value === value ? interaction.match : null;
	const items = match ? getItems(match) : [];
	const highlightedIndex = normalizeHighlightedIndex(items, interaction.highlightedIndex, isItemDisabled);
	const hasActiveItem = highlightedIndex >= 0 && highlightedIndex < items.length;
	const activeItem = hasActiveItem ? items[highlightedIndex] : void 0;
	const open = Boolean(match && items.length > 0);
	const syncTrigger = (nextValue, caret) => {
		const nextMatch = detectTrigger(nextValue.slice(0, caret));
		setInteraction({
			highlightedIndex: nextMatch ? findNextEnabledIndex(getItems(nextMatch), -1, 1, isItemDisabled) : -1,
			match: nextMatch,
			value: nextValue
		});
	};
	const commit = (nextValue, caret) => {
		onValueChange(nextValue);
		setInteraction({
			highlightedIndex: -1,
			match: null,
			value: nextValue
		});
		caretRef.current = caret;
		if (frameRef.current !== null) cancelAnimationFrame(frameRef.current);
		frameRef.current = requestAnimationFrame(() => {
			inputRef.current?.focus({ preventScroll: true });
			inputRef.current?.setSelectionRange(caret, caret);
			frameRef.current = null;
		});
	};
	const select = (item) => {
		if (!match || isItemDisabled(item)) return;
		const caret = interaction.value === value ? caretRef.current : value.length;
		const insertion = getItemText(item);
		const nextValue = `${value.slice(0, match.start)}${insertion}${value.slice(caret)}`;
		commit(nextValue, match.start + insertion.length);
	};
	const insert = (text) => {
		const caret = interaction.value === value ? caretRef.current : value.length;
		const nextValue = `${value.slice(0, caret)}${text}${value.slice(caret)}`;
		commit(nextValue, caret + text.length);
	};
	const clear = () => {
		onValueChange("");
		setInteraction({
			highlightedIndex: -1,
			match: null,
			value: ""
		});
		caretRef.current = 0;
	};
	const handleChange = (event) => {
		caretRef.current = event.currentTarget.selectionStart ?? 0;
		onValueChange(event.currentTarget.value);
		syncTrigger(event.currentTarget.value, caretRef.current);
	};
	const handleSelect = (event) => {
		caretRef.current = event.currentTarget.selectionStart ?? 0;
		syncTrigger(event.currentTarget.value, caretRef.current);
	};
	const handleCompositionEnd = (event) => {
		composingRef.current = false;
		caretRef.current = event.currentTarget.selectionStart ?? 0;
		syncTrigger(event.currentTarget.value, caretRef.current);
	};
	const handleBlur = (event) => {
		const nextTarget = event.relatedTarget;
		if (nextTarget instanceof Node && listRef.current?.contains(nextTarget)) return;
		setInteraction({
			highlightedIndex: -1,
			match: null,
			value
		});
	};
	const handleKeyDown = (event) => {
		if (composingRef.current || event.nativeEvent.isComposing || event.keyCode === 229) return;
		if (event.key === "Escape" && open) {
			event.preventDefault();
			setInteraction({
				highlightedIndex: -1,
				match: null,
				value
			});
			return;
		}
		if (!open) return;
		if (event.key === "Enter" && !event.shiftKey && !hasActiveItem) {
			event.preventDefault();
			return;
		}
		if (event.key === "ArrowDown" || event.key === "ArrowUp") {
			event.preventDefault();
			setInteraction({
				highlightedIndex: findNextEnabledIndex(items, highlightedIndex, event.key === "ArrowDown" ? 1 : -1, isItemDisabled),
				match,
				value
			});
			return;
		}
		if ((event.key === "Tab" || event.key === "Enter" && !event.shiftKey) && hasActiveItem && activeItem !== void 0 && !isItemDisabled(activeItem)) {
			event.preventDefault();
			select(activeItem);
		}
	};
	useEffect(() => {
		if (!open || highlightedIndex < 0) return;
		const list = listRef.current;
		const option = list?.querySelector(`[data-composer-suggestion-index="${highlightedIndex}"]`);
		if (!list || !option) return;
		const listRect = list.getBoundingClientRect();
		const optionRect = option.getBoundingClientRect();
		if (optionRect.top < listRect.top || optionRect.bottom > listRect.bottom) option.scrollIntoView({ block: "nearest" });
	}, [highlightedIndex, open]);
	useEffect(() => () => {
		if (frameRef.current !== null) cancelAnimationFrame(frameRef.current);
	}, []);
	const getInputProps = (props = {}) => mergeProps(props, {
		"aria-activedescendant": open && highlightedIndex >= 0 ? `${listId}-option-${highlightedIndex}` : void 0,
		"aria-autocomplete": "list",
		"aria-controls": open ? listId : void 0,
		ref: inputRef,
		value,
		onBlur: handleBlur,
		onChange: handleChange,
		onCompositionEnd: handleCompositionEnd,
		onCompositionStart: () => {
			composingRef.current = true;
		},
		onKeyDown: handleKeyDown,
		onSelect: handleSelect
	});
	const getListProps = (props) => mergeProps(props, {
		id: listId,
		ref: listRef,
		role: "listbox"
	});
	const getOptionProps = (item, index, props = {}) => {
		const highlighted = index === highlightedIndex;
		const internalProps = {
			"aria-disabled": isItemDisabled(item),
			"aria-selected": highlighted,
			"data-disabled": isItemDisabled(item),
			"data-composer-suggestion-index": index,
			"data-highlighted": highlighted,
			id: `${listId}-option-${index}`,
			role: "option",
			onClick: () => select(item),
			onPointerDown: (event) => {
				event.preventDefault();
			}
		};
		return mergeProps(props, internalProps);
	};
	return {
		open,
		items,
		highlightedIndex,
		activeItem,
		inputRef,
		listRef,
		getInputProps,
		getListProps,
		getOptionProps,
		select,
		insert,
		clear
	};
}
//#endregion
//#region src/components/skeleton/skeleton.tsx
const skeleton = tv({
	slots: { root: [
		"animate-pulse",
		"pointer-events-none",
		"data-[variant=line]:rounded-sticker data-[variant=line]:bg-fill-muted",
		"data-[variant=block]:rounded-sticker data-[variant=block]:bg-fill-muted"
	] },
	variants: { variant: {
		line: { root: "h-3" },
		block: { root: "" },
		circle: { root: ["rounded-sticker bg-fill-muted"] }
	} },
	defaultVariants: { variant: "block" }
});
function Skeleton({ variant = "block", className, ...props }) {
	const { root } = skeleton({ variant });
	return /* @__PURE__ */ jsx("div", {
		"aria-hidden": "true",
		"data-slot": "skeleton",
		"data-variant": variant,
		className: root({ className }),
		...props
	});
}
//#endregion
//#region src/components/banner/banner.tsx
const banner = tv({
	slots: {
		root: [
			"group/banner @container grid gap-y-0",
			"[&>svg]:col-start-1 [&>svg]:shrink-0",
			"*:data-[slot=status]:col-start-1 *:data-[slot=status]:row-start-1",
			"w-full grid-cols-[minmax(0,1fr)] items-start gap-x-2.5 rounded-container border-0",
			"font-sans text-callout text-foreground ring-1 ring-line-muted ring-inset",
			"has-[>svg]:grid-cols-[20px_minmax(0,1fr)]",
			"has-[>[data-slot=status]]:grid-cols-[20px_minmax(0,1fr)]",
			"[&>svg]:row-start-1 [&>svg]:size-5 [&>svg]:text-foreground",
			"*:data-[slot=status]:mt-[5.5px] *:data-[slot=status]:self-start *:data-[slot=status]:justify-self-center",
			"has-[>svg]:[--banner-text-col:2]",
			"has-[>[data-slot=status]]:[--banner-text-col:2]",
			"has-[>[data-slot=banner-title]]:[--banner-desc-row:2]"
		],
		title: [
			"min-w-0 text-foreground",
			"row-start-1 font-bold",
			"col-start-(--banner-text-col,1)"
		],
		description: [
			"min-w-0 font-normal",
			"text-foreground",
			"col-start-(--banner-text-col,1)",
			"row-start-(--banner-desc-row,1)"
		],
		action: [
			"shrink-0 self-start",
			"mt-2 flex flex-wrap items-center gap-2",
			"col-start-(--banner-text-col,1)"
		]
	},
	variants: {
		status: {
			default: { root: ["bg-fill-muted"] },
			destructive: { root: ["bg-danger-soft"] },
			warning: { root: ["bg-warning-soft"] },
			info: { root: ["bg-info-soft"] },
			success: { root: ["bg-success-soft"] }
		},
		size: {
			sm: { root: [
				"gap-x-2 px-3 py-2 text-footnote",
				"has-[>svg]:grid-cols-[16px_minmax(0,1fr)] has-[>[data-slot=status]]:grid-cols-[16px_minmax(0,1fr)]",
				"[&>svg]:mt-px [&>svg]:size-4 *:data-[slot=status]:mt-[4.5px]"
			] },
			md: { root: ["px-3.5 py-3"] },
			lg: { root: ["px-4 py-3.5"] }
		}
	},
	defaultVariants: { size: "md" }
});
function Banner({ status, size = "md", className, render, ...props }) {
	const { root } = banner({
		status,
		size
	});
	const defaultProps = {
		className: root({ className }),
		role: "alert"
	};
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps(defaultProps, props),
		state: {
			slot: "banner",
			size,
			status
		}
	});
}
function BannerTitle({ render, className, ...props }) {
	const { title } = banner();
	const defaultProps = { className: title({ className }) };
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps(defaultProps, props),
		state: { slot: "banner-title" }
	});
}
function BannerDescription({ render, className, ...props }) {
	const { description } = banner();
	const defaultProps = { className: description({ className }) };
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps(defaultProps, props),
		state: { slot: "banner-description" }
	});
}
function BannerAction({ render, className, ...props }) {
	const { action } = banner();
	const defaultProps = { className: action({ className }) };
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps(defaultProps, props),
		state: { slot: "banner-action" }
	});
}
//#endregion
//#region src/components/empty-state/empty-state.tsx
const emptyState = tv({ slots: {
	root: ["flex w-full min-w-0 flex-col items-center justify-center px-6 py-12 text-center"],
	content: [
		"flex w-full max-w-sm min-w-0 flex-col items-center gap-2 text-center",
		"[&>[data-slot=empty-state-icon]]:mb-0",
		"[&>[data-slot=empty-state-title]]:mb-0"
	],
	icon: ["mb-4 inline-flex items-center justify-center [&_svg]:shrink-0", "text-foreground-hint [&_svg]:size-9"],
	title: ["mb-2 w-full max-w-full text-center text-balance", "font-sans text-headline font-bold text-foreground-muted"],
	description: [
		"mx-auto w-full text-center text-pretty",
		"[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-foreground",
		"max-w-[300px] text-callout text-foreground-hint"
	],
	actions: ["mt-5"]
} });
function EmptyState({ render, className, ...props }) {
	const { root } = emptyState();
	const defaultProps = {
		"data-slot": "empty-state",
		className: root({ className })
	};
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps(defaultProps, props),
		state: { slot: "empty-state" }
	});
}
function EmptyStateContent({ render, className, ...props }) {
	const { content } = emptyState();
	const defaultProps = {
		"data-slot": "empty-state-content",
		className: content({ className })
	};
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps(defaultProps, props),
		state: { slot: "empty-state-content" }
	});
}
function EmptyStateIcon({ render, className, ...props }) {
	const { icon } = emptyState();
	const defaultProps = {
		"data-slot": "empty-state-icon",
		className: icon({ className })
	};
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps(defaultProps, props),
		state: { slot: "empty-state-icon" }
	});
}
function EmptyStateTitle({ render, className, ...props }) {
	const { title } = emptyState();
	const defaultProps = {
		"data-slot": "empty-state-title",
		className: title({ className })
	};
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps(defaultProps, props),
		state: { slot: "empty-state-title" }
	});
}
function EmptyStateDescription({ render, className, ...props }) {
	const { description } = emptyState();
	const defaultProps = {
		"data-slot": "empty-state-description",
		className: description({ className })
	};
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps(defaultProps, props),
		state: { slot: "empty-state-description" }
	});
}
function EmptyStateActions({ render, className, ...props }) {
	const { actions } = emptyState();
	const defaultProps = {
		"data-slot": "empty-state-actions",
		className: actions({ className })
	};
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps(defaultProps, props),
		state: { slot: "empty-state-actions" }
	});
}
//#endregion
//#region src/components/notification-center/notification-center.tsx
const notificationCenter = tv({
	slots: {
		trigger: [
			"relative inline-flex size-10 items-center justify-center overflow-visible p-0",
			"rounded-control border-[1.5px] border-transparent bg-transparent text-foreground-on-frame",
			"select-none outline-none",
			"hover:bg-fill-frame-pressed active:bg-fill-frame-pressed data-popup-open:bg-fill-frame-pressed",
			"focus-visible:shadow-raft-focus",
			"[&_svg]:size-5 [&_svg]:shrink-0"
		],
		triggerIcon: ["relative inline-flex size-5 items-center justify-center"],
		triggerBell: ["size-5 shrink-0 text-current"],
		triggerDot: ["pointer-events-none absolute top-1.5 right-1.5"],
		popup: [
			"flex flex-col overflow-hidden",
			"rounded-container bg-layer-popover text-foreground",
			"shadow-raft-float ring-1 ring-line-seam"
		],
		header: ["flex items-center px-4", "min-h-13 gap-2 border-b border-line-seam py-0 pr-2 pl-4"],
		title: ["font-sans text-headline text-foreground"],
		count: ["ml-auto", "font-mono text-mono-meta text-foreground-hint"],
		scroller: ["min-h-0 flex-1 overflow-y-auto overscroll-contain"],
		list: ["divide-y-0"],
		item: [
			"group/notification-center-item relative px-4 py-3",
			"before:pointer-events-none before:absolute before:top-0 before:right-0 before:left-4 before:hidden before:border-t before:border-line-muted",
			"not-first:before:block has-data-[slot=notification-center-item-icon]:before:left-[63px]"
		],
		itemRow: ["flex items-start", "gap-3"],
		itemIcon: [
			"flex shrink-0 items-center justify-center",
			"mt-0 size-[35px] rounded-sticker bg-fill-muted text-foreground-muted",
			"[&_svg]:size-[18px]"
		],
		itemContent: ["min-w-0 flex-1"],
		itemTitle: [
			"wrap-break-word",
			"font-sans text-subhead font-bold text-foreground",
			"group-data-read/notification-center-item:font-semibold group-data-read/notification-center-item:text-foreground-muted"
		],
		itemBody: ["mt-0.5 wrap-break-word", "line-clamp-2 font-sans text-callout text-foreground-muted"],
		itemActions: ["flex items-center", "mt-2 ml-0 flex-wrap justify-start gap-2"],
		actionButton: []
	},
	variants: {
		viewport: {
			desktop: { popup: "w-[380px]" },
			mobile: { popup: "w-[min(92vw,360px)]" }
		},
		size: {
			sm: { popup: "h-56" },
			md: { popup: "h-72" },
			lg: { popup: "h-96" }
		},
		read: {
			true: { item: ["opacity-100"] },
			false: { item: [
				"pr-[37px]",
				"after:pointer-events-none after:absolute after:top-[17.5px] after:right-4 after:size-[9px]",
				"after:rounded-[2px] after:border-[1.5px] after:border-sticker-ink after:bg-accent-400"
			] }
		},
		status: {
			error: { itemIcon: ["bg-warning-soft text-foreground"] },
			warning: { itemIcon: ["bg-warning-soft text-foreground"] },
			info: { itemIcon: ["bg-info-soft text-foreground"] },
			success: {}
		}
	},
	defaultVariants: {
		viewport: "desktop",
		size: "md",
		read: false,
		status: "info"
	}
});
function NotificationCenter({ modal = false, ...props }) {
	return /* @__PURE__ */ jsx(Popover$1.Root, {
		modal,
		...props
	});
}
function NotificationCenterTriggerContent() {
	const { triggerIcon, triggerBell, triggerDot } = notificationCenter();
	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
		"aria-hidden": true,
		className: triggerIcon(),
		children: /* @__PURE__ */ jsx(Bell, {
			className: triggerBell(),
			strokeWidth: 2
		})
	}), /* @__PURE__ */ jsx(Status, {
		"aria-hidden": true,
		variant: "accent",
		size: "md",
		className: triggerDot()
	})] });
}
function NotificationCenterTrigger({ className, children, ...props }) {
	const { trigger } = notificationCenter();
	return /* @__PURE__ */ jsx(Popover$1.Trigger, {
		"data-slot": "notification-center-trigger",
		className: trigger({ className }),
		...props,
		children: children ?? /* @__PURE__ */ jsx(NotificationCenterTriggerContent, {})
	});
}
function NotificationCenterPortal(props) {
	return /* @__PURE__ */ jsx(Popover$1.Portal, { ...useThemeScopeProps(props) });
}
function NotificationCenterPopup({ viewport = "desktop", size = "md", className, initialFocus = false, align = "center", alignOffset = 0, anchor, arrowPadding, collisionAvoidance, collisionBoundary, collisionPadding, disableAnchorTracking = true, positionMethod = "fixed", side = "bottom", sideOffset = 4, sticky, portalProps, ...props }) {
	const { popup } = notificationCenter({
		viewport,
		size
	});
	return /* @__PURE__ */ jsx(NotificationCenterPortal, {
		...portalProps,
		children: /* @__PURE__ */ jsx(Popover$1.Positioner, {
			align,
			alignOffset,
			anchor,
			arrowPadding,
			collisionAvoidance,
			collisionBoundary,
			collisionPadding,
			disableAnchorTracking,
			positionMethod,
			side,
			sideOffset,
			sticky,
			className: "isolate z-50 outline-none",
			children: /* @__PURE__ */ jsx(Popover$1.Popup, {
				"aria-label": props["aria-label"] ?? "Notification center",
				"data-slot": "notification-center-popup",
				"data-size": size,
				"data-viewport": viewport,
				initialFocus,
				className: popup({ className }),
				...props
			})
		})
	});
}
function NotificationCenterHeader({ render, className, ...props }) {
	const { header } = notificationCenter();
	const defaultProps = { className: header({ className }) };
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps(defaultProps, props),
		state: { slot: "notification-center-header" }
	});
}
function NotificationCenterTitle({ render, className, ...props }) {
	const { title } = notificationCenter();
	const defaultProps = { className: title({ className }) };
	return useRender({
		defaultTagName: "span",
		render,
		props: mergeProps(defaultProps, props),
		state: { slot: "notification-center-title" }
	});
}
function NotificationCenterCount({ render, className, ...props }) {
	const { count } = notificationCenter();
	const defaultProps = { className: count({ className }) };
	return useRender({
		defaultTagName: "span",
		render,
		props: mergeProps(defaultProps, props),
		state: { slot: "notification-center-count" }
	});
}
function NotificationCenterScroller({ render, className, ...props }) {
	const { scroller } = notificationCenter();
	const defaultProps = { className: scroller({ className }) };
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps(defaultProps, props),
		state: { slot: "notification-center-scroller" }
	});
}
function NotificationCenterList({ render, className, ...props }) {
	const { list } = notificationCenter();
	const defaultProps = {
		"aria-label": "Notifications",
		className: list({ className })
	};
	return useRender({
		defaultTagName: "ul",
		render,
		props: mergeProps(defaultProps, props),
		state: { slot: "notification-center-list" }
	});
}
function NotificationCenterItem({ read = false, render, className, ...props }) {
	const { item } = notificationCenter({ read });
	const defaultProps = { className: item({ className }) };
	return useRender({
		defaultTagName: "li",
		render,
		props: mergeProps(defaultProps, props),
		state: {
			slot: "notification-center-item",
			read
		}
	});
}
function NotificationCenterItemRow({ render, className, ...props }) {
	const { itemRow } = notificationCenter();
	const defaultProps = { className: itemRow({ className }) };
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps(defaultProps, props),
		state: { slot: "notification-center-item-row" }
	});
}
const STATUS_LABEL = {
	error: "Error",
	warning: "Warning",
	info: "Info",
	success: "Success"
};
const DEFAULT_STATUS_ICON = {
	error: /* @__PURE__ */ jsx(AlertTriangle, {}),
	warning: /* @__PURE__ */ jsx(AlertTriangle, {}),
	info: /* @__PURE__ */ jsx(Info, {}),
	success: /* @__PURE__ */ jsx(CheckCircle2, {})
};
function NotificationCenterItemIcon({ status = "info", render, className, children, ...props }) {
	const { itemIcon } = notificationCenter({ status });
	const defaultProps = {
		"aria-label": STATUS_LABEL[status],
		className: itemIcon({ className }),
		children: children ?? DEFAULT_STATUS_ICON[status]
	};
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps(defaultProps, props),
		state: {
			slot: "notification-center-item-icon",
			status
		}
	});
}
function NotificationCenterItemContent({ render, className, ...props }) {
	const { itemContent } = notificationCenter();
	const defaultProps = { className: itemContent({ className }) };
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps(defaultProps, props),
		state: { slot: "notification-center-item-content" }
	});
}
function NotificationCenterItemTitle({ render, className, ...props }) {
	const { itemTitle } = notificationCenter();
	const defaultProps = { className: itemTitle({ className }) };
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps(defaultProps, props),
		state: { slot: "notification-center-item-title" }
	});
}
function NotificationCenterItemBody({ render, className, ...props }) {
	const { itemBody } = notificationCenter();
	const defaultProps = { className: itemBody({ className }) };
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps(defaultProps, props),
		state: { slot: "notification-center-item-body" }
	});
}
function NotificationCenterItemActions({ render, className, ...props }) {
	const { itemActions } = notificationCenter();
	const defaultProps = { className: itemActions({ className }) };
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps(defaultProps, props),
		state: { slot: "notification-center-item-actions" }
	});
}
function NotificationCenterActionButton({ className, ...props }) {
	const { actionButton } = notificationCenter();
	return /* @__PURE__ */ jsx(Button, {
		type: "button",
		size: "md",
		variant: "outline",
		className: actionButton({ className }),
		...props
	});
}
function NotificationCenterEmptyState(props) {
	return /* @__PURE__ */ jsx(EmptyState, {
		"data-slot": "notification-center-empty-state",
		...props
	});
}
//#endregion
//#region src/components/toast/toast.tsx
const toastStyles = tv({
	slots: {
		viewport: ["pointer-events-none isolate z-70 w-[min(24rem,calc(100vw-2rem))]", "outline-none"],
		positioner: ["isolate z-[calc(70-var(--toast-index))] outline-none"],
		root: [
			"group/toast pointer-events-auto",
			"select-text",
			"outline-1 outline-offset-2 outline-transparent",
			"[--toast-scale:calc(max(0.84,1-(var(--toast-index)*0.04)))]",
			"[--toast-peek:0.5rem]",
			"[--toast-gap:0.5rem]",
			"[--toast-stack-height:var(--toast-frontmost-height,var(--toast-height))]",
			"[--toast-y:calc((var(--toast-offset-y)*-1)-(var(--toast-index)*var(--toast-gap))+var(--toast-swipe-movement-y))]",
			"transition-[transform,opacity,height] duration-220 ease-[cubic-bezier(0.22,1,0.36,1)]",
			"data-limited:opacity-0",
			"data-starting-style:opacity-0",
			"data-ending-style:opacity-0",
			"motion-reduce:transition-none",
			"rounded-container bg-layer-hud text-layer-hud-foreground",
			"shadow-raft-float",
			"focus-visible:outline-2 focus-visible:outline-foreground"
		],
		content: [
			"relative grid grid-cols-[minmax(0,1fr)] items-center overflow-hidden",
			"[&[data-has-description]_[data-slot=toast-body]]:self-start [&[data-has-description]_[data-slot=toast-icon]]:self-start",
			"[&:not([data-has-icon]):not([data-has-actions]):not([data-has-description])]:min-h-(--toast-title-only-min-h,2.25rem)",
			"[&:not([data-has-icon]):not([data-has-actions]):not([data-has-description])]:min-w-(--toast-title-only-min-w,7rem)",
			"[&:not([data-has-icon]):not([data-has-actions]):not([data-has-description])]:px-(--toast-title-only-px,0.75rem)",
			"[&:not([data-has-icon]):not([data-has-actions]):not([data-has-description])]:py-(--toast-title-only-py,0.5rem)",
			"[&:not([data-has-description])>[data-slot=toast-body]:only-child]:justify-self-center [&:not([data-has-description])>[data-slot=toast-body]:only-child]:text-center",
			"transition-opacity duration-200 ease-[cubic-bezier(0.22,1,0.36,1)]",
			"motion-reduce:transition-none",
			"gap-x-3 gap-y-2 px-4 py-3 font-sans text-callout",
			"[--toast-title-only-min-h:2.75rem] [--toast-title-only-px:1rem] [--toast-title-only-py:0.75rem]",
			"data-has-icon:grid-cols-[auto_minmax(0,1fr)]",
			"data-has-actions:grid-cols-[minmax(0,1fr)_auto]",
			"[&[data-has-icon][data-has-actions]]:grid-cols-[auto_minmax(0,1fr)_auto]"
		],
		icon: [
			"flex size-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-layer-hud-foreground"],
		description: ["m-0 text-sm/5", "text-layer-hud-foreground/70"],
		actions: ["flex items-center justify-end", "gap-4"],
		progress: [
			"pointer-events-none absolute h-[3px] origin-left",
			"animate-[raft-toast-timeout-progress_var(--toast-progress-duration)_linear_forwards]",
			"group-hover/toast:[animation-play-state:paused] group-focus-within/toast:[animation-play-state:paused]",
			"motion-reduce:animate-none motion-reduce:scale-x-100",
			"inset-x-4 bottom-1.5 rounded-[2px] bg-layer-hud-foreground/40"
		],
		close: [
			"inline-flex items-center justify-center",
			"outline-1 outline-offset-2 outline-transparent",
			"transition-[background-color,color,border-color,box-shadow,transform] duration-150",
			"disabled:pointer-events-none disabled:opacity-40",
			"relative inset-auto order-1 size-auto shrink-0 whitespace-nowrap",
			"border-0 bg-transparent p-0 shadow-none",
			"font-sans text-callout font-bold text-layer-hud-foreground",
			"underline decoration-[1.5px] underline-offset-[3px]",
			"after:absolute after:-inset-x-2 after:-inset-y-3 after:rounded-control after:content-['']",
			"active:after:bg-layer-hud-foreground/15",
			"focus-visible:outline-2 focus-visible:outline-layer-hud-foreground",
			"[&_svg]:size-4"
		],
		arrow: [
			"pointer-events-none flex",
			"data-[side=top]:bottom-[-5px]",
			"data-[side=bottom]:top-[-5px] data-[side=bottom]:rotate-180",
			"data-[side=left]:right-[-7px] data-[side=left]:-rotate-90",
			"data-[side=right]:left-[-7px] data-[side=right]:rotate-90",
			"data-[side=inline-start]:right-[-7px] data-[side=inline-start]:-rotate-90",
			"data-[side=inline-end]:left-[-7px] data-[side=inline-end]:rotate-90"
		]
	},
	variants: {
		placement: {
			"bottom-center": { viewport: "bottom-4 left-1/2 -translate-x-1/2" },
			"bottom-right": { viewport: "right-4 bottom-4" },
			"top-center": { viewport: "top-4 left-1/2 -translate-x-1/2" },
			"top-right": { viewport: "top-4 right-4" },
			none: { viewport: "contents" }
		},
		strategy: {
			fixed: { viewport: "fixed" },
			absolute: { viewport: "absolute" }
		},
		layout: {
			stacked: { root: [
				"absolute inset-x-0 bottom-0 mx-auto h-(--toast-stack-height) origin-bottom",
				"z-[calc(70-var(--toast-index))]",
				"before:pointer-events-auto before:absolute before:inset-x-0 before:top-full before:h-[calc(var(--toast-gap)+3px)] before:content-['']",
				"[--toast-peek-dir:-1]",
				"transform-[translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)+(var(--toast-index)*var(--toast-peek)*var(--toast-peek-dir))))_scale(var(--toast-scale))]",
				"data-expanded:h-(--toast-height)",
				"data-expanded:transform-[translateX(var(--toast-swipe-movement-x))_translateY(var(--toast-y))_scale(1)]",
				"data-starting-style:transform-[translateY(120%)_scale(0.98)]",
				"[&[data-ending-style]:not([data-swipe-direction])]:transform-[translateY(120%)_scale(0.98)]",
				"data-ending-style:data-[swipe-direction=right]:transform-[translateX(calc(var(--toast-swipe-movement-x)+120%))_translateY(var(--toast-y))]",
				"data-ending-style:data-[swipe-direction=left]:transform-[translateX(calc(var(--toast-swipe-movement-x)-120%))_translateY(var(--toast-y))]",
				"data-ending-style:data-[swipe-direction=down]:transform-[translateY(calc(var(--toast-swipe-movement-y)+120%))]",
				"data-ending-style:data-[swipe-direction=up]:transform-[translateY(calc(var(--toast-swipe-movement-y)-120%))]",
				"[&_[data-slot=toast-content][data-behind]]:opacity-0 [&_[data-slot=toast-content][data-expanded]]:opacity-100",
				"in-data-[toast-placement$=right]:left-auto in-data-[toast-placement$=right]:mx-0",
				"in-data-[toast-placement^=top]:top-0 in-data-[toast-placement^=top]:bottom-auto in-data-[toast-placement^=top]:origin-top",
				"in-data-[toast-placement^=top]:before:top-auto in-data-[toast-placement^=top]:before:bottom-full",
				"in-data-[toast-placement^=top]:[--toast-y:calc(var(--toast-offset-y)+(var(--toast-index)*var(--toast-gap))+var(--toast-swipe-movement-y))]",
				"in-data-[toast-placement^=top]:[--toast-peek-dir:1]",
				"[[data-toast-placement^=top]_&[data-starting-style]]:transform-[translateY(-120%)_scale(0.98)]",
				"[[data-toast-placement^=top]_&[data-ending-style]:not([data-swipe-direction])]:transform-[translateY(-120%)_scale(0.98)]",
				"w-max max-w-full"
			] },
			inline: { root: [
				"relative mx-auto w-max max-w-[min(24rem,var(--available-width,calc(100vw-2rem)))] overflow-visible",
				"origin-(--transform-origin)",
				"data-starting-style:transform-[scale(0.97)]",
				"data-ending-style:transform-[scale(0.99)]",
				"**:data-[slot=toast-content]:opacity-100"
			] }
		}
	},
	defaultVariants: {
		placement: "bottom-center",
		layout: "stacked",
		strategy: "fixed"
	}
});
const toastProgressStyle = /* @__PURE__ */ jsx("style", {
	href: "raft-ui-toast-progress",
	precedence: "default",
	children: `
@keyframes raft-toast-timeout-progress {
  0% {
    transform: scaleX(1);
  }
  100% {
    transform: scaleX(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-slot="toast-progress"] {
    animation: none;
    transform: scaleX(1);
  }
}
`
});
const DEFAULT_TOAST_TIMEOUT_MS = 5e3;
const ToastProviderConfigContext = createContext({ timeout: DEFAULT_TOAST_TIMEOUT_MS });
const toastAction = tv({ slots: {
	root: [
		"relative order-2 inline-flex shrink-0 items-center justify-center whitespace-nowrap select-none",
		"border-0 bg-transparent p-0",
		"font-sans text-callout font-bold text-layer-hud-foreground",
		"underline decoration-[1.5px] underline-offset-[3px]",
		"after:absolute after:-inset-x-2 after:-inset-y-3 after:rounded-control after:content-['']",
		"active:after:bg-layer-hud-foreground/15",
		"outline-1 outline-offset-2 outline-transparent focus-visible:outline-2 focus-visible:outline-layer-hud-foreground",
		"disabled:pointer-events-none disabled:opacity-40 aria-disabled:cursor-not-allowed aria-disabled:opacity-40",
		"data-[loading=true]:cursor-wait data-[loading=true]:opacity-100",
		"[&_svg]:pointer-events-none [&_svg]:shrink-0 **:data-icon:size-[1em] [&_svg:not([class*='size-'])]:size-3"
	],
	content: "relative z-10 inline-flex items-center justify-center gap-[inherit] data-[loading=true]:invisible",
	loadingIndicator: "pointer-events-none absolute inset-0 z-10 flex items-center justify-center"
} });
const createToastManager = Toast.createToastManager;
const useToastManager = Toast.useToastManager;
const defaultToastManager = createToastManager();
function addDefaultToast(intent, title, options = {}) {
	const { action, contentClassName, dismissible, icon, priority, progress, ...toastOptions } = options;
	return defaultToastManager.add({
		...toastOptions,
		actionProps: action ? {
			children: action.label,
			onClick: action.onClick
		} : void 0,
		title,
		type: intent,
		priority: priority ?? (intent === "error" ? "high" : void 0),
		data: {
			intent,
			contentClassName,
			hasClose: dismissible,
			hasIcon: icon,
			hasProgress: progress
		}
	});
}
const toast = {
	add(options) {
		const { title, type = "info", ...toastOptions } = options;
		return addDefaultToast(type, title, toastOptions);
	},
	info(title, options) {
		return addDefaultToast("info", title, options);
	},
	success(title, options) {
		return addDefaultToast("success", title, options);
	},
	warning(title, options) {
		return addDefaultToast("warning", title, options);
	},
	error(title, options) {
		return addDefaultToast("error", title, options);
	},
	dismiss(id) {
		return defaultToastManager.close(id);
	}
};
function getToastTone(type) {
	if (type === "success" || type === "warning" || type === "error") return type;
	return "info";
}
function ToastProvider({ children, portalContainer, renderViewport = true, toastManager = defaultToastManager, timeout = DEFAULT_TOAST_TIMEOUT_MS, viewportClassName, viewportPlacement = "bottom-center", viewportStrategy = "fixed", ...props }) {
	const config = useMemo(() => ({ timeout }), [timeout]);
	return /* @__PURE__ */ jsx(ToastProviderConfigContext.Provider, {
		value: config,
		children: /* @__PURE__ */ jsxs(Toast.Provider, {
			toastManager,
			timeout,
			...props,
			children: [children, renderViewport ? /* @__PURE__ */ jsx(DefaultToastLayer, {
				placement: viewportPlacement,
				portalContainer,
				strategy: viewportStrategy,
				viewportClassName
			}) : null]
		})
	});
}
function ToastPortal(props) {
	return /* @__PURE__ */ jsx(Toast.Portal, {
		"data-slot": "toast-portal",
		...useThemeScopeProps(props)
	});
}
function ToastViewport({ placement = "bottom-center", strategy = "fixed", className, ...props }) {
	const { viewport } = toastStyles({
		placement,
		strategy
	});
	return /* @__PURE__ */ jsx(Toast.Viewport, {
		"data-slot": "toast-viewport",
		"data-toast-placement": placement,
		className: viewport({ className }),
		...props
	});
}
function ToastPositioner({ className, ...props }) {
	const { positioner } = toastStyles();
	return /* @__PURE__ */ jsx(Toast.Positioner, {
		"data-slot": "toast-positioner",
		className: positioner({ className }),
		...props
	});
}
function ToastRoot({ layout = "stacked", className, toast: toastObject, ...props }) {
	const { root } = toastStyles({ layout });
	return /* @__PURE__ */ jsx(Toast.Root, {
		"data-slot": "toast",
		"data-toast-type": toastObject.type ?? "info",
		toast: toastObject,
		className: root({ className }),
		...props
	});
}
/**
* The content layout (self-start, title-only sizing, body centering) needs to
* know which parts actually rendered. That used to be an ancestor `:has()`
* styling descendants — a whole-page recalculation trap in Chromium (#133).
* It measures the rendered DOM after layout instead, so wrapped parts and
* parts that render nothing behave exactly like the old selectors did.
*
* The three attributes are not React-managed props: the layout effect toggles
* them on this element directly (an attribute write on the component's own
* node, not a structural change, so it stays outside the #133 invalidation
* pattern). The measurement re-runs whenever this component renders; the
* default item rebuilds the content on every toast update, and a hand-written
* composition that flips a part without re-rendering ToastContent is not
* observed.
*/
function ToastContent({ children, className, ref, ...props }) {
	const { content } = toastStyles();
	const internalRef = useRef(null);
	const setRef = useCallback((node) => {
		internalRef.current = node;
		if (typeof ref === "function") ref(node);
		else if (ref) ref.current = node;
	}, [ref]);
	useLayoutEffect(() => {
		const el = internalRef.current;
		if (!el) return;
		for (const [attribute, selector] of [
			["data-has-icon", "[data-slot=\"toast-icon\"]"],
			["data-has-description", "[data-slot=\"toast-description\"]"],
			["data-has-actions", "[data-slot=\"toast-actions\"]"]
		]) {
			const present = el.querySelector(selector) !== null;
			if (present !== el.hasAttribute(attribute)) el.toggleAttribute(attribute, present);
		}
	});
	return /* @__PURE__ */ jsx(Toast.Content, {
		ref: setRef,
		"data-slot": "toast-content",
		className: content({ className }),
		...props,
		children
	});
}
function ToastIcon({ className, ...props }) {
	const { icon } = toastStyles();
	return /* @__PURE__ */ jsx("div", {
		"data-slot": "toast-icon",
		className: icon({ className }),
		...props
	});
}
function ToastBody({ className, ...props }) {
	const { body } = toastStyles();
	return /* @__PURE__ */ jsx("div", {
		"data-slot": "toast-body",
		className: body({ className }),
		...props
	});
}
function ToastActions({ className, ...props }) {
	const { actions } = toastStyles();
	return /* @__PURE__ */ jsx("div", {
		"data-slot": "toast-actions",
		className: actions({ className }),
		...props
	});
}
function ToastProgress({ className, duration = DEFAULT_TOAST_TIMEOUT_MS, style, ...props }) {
	const { progress } = toastStyles();
	const progressStyle = {
		...style,
		"--toast-progress-duration": `${duration}ms`
	};
	return /* @__PURE__ */ jsx("div", {
		"aria-hidden": true,
		"data-slot": "toast-progress",
		className: progress({ className }),
		style: progressStyle,
		...props,
		children: toastProgressStyle
	});
}
function ToastTitle({ className, ...props }) {
	const { title } = toastStyles();
	return /* @__PURE__ */ jsx(Toast.Title, {
		"data-slot": "toast-title",
		className: title({ className }),
		...props
	});
}
function ToastDescription({ className, ...props }) {
	const { description } = toastStyles();
	return /* @__PURE__ */ jsx(Toast.Description, {
		"data-slot": "toast-description",
		className: description({ className }),
		...props
	});
}
function ToastAction({ className, children, disabled, loading = false, loadingLabel = "Loading", render, ...props }) {
	const { root, content, loadingIndicator } = toastAction();
	const renderAction = useCallback((renderProps, state) => {
		const actionChildren = /* @__PURE__ */ jsxs(Fragment$1, { children: [loading ? /* @__PURE__ */ jsx("span", {
			"data-slot": "toast-action-loading-indicator",
			className: loadingIndicator(),
			children: /* @__PURE__ */ jsx(Spinner, { "aria-label": loadingLabel })
		}) : null, /* @__PURE__ */ jsx("span", {
			"data-slot": "toast-action-content",
			"data-loading": loading ? "true" : void 0,
			className: content(),
			children: renderProps.children
		})] });
		const nextRenderProps = {
			...renderProps,
			children: actionChildren
		};
		if (typeof render === "function") return render(nextRenderProps, state);
		if (isValidElement(render)) {
			const renderElement = render;
			return cloneElement(renderElement, {
				...nextRenderProps,
				className: cn(renderProps.className, renderElement.props.className),
				children: actionChildren
			});
		}
		return /* @__PURE__ */ jsx("button", { ...nextRenderProps });
	}, [
		content,
		loading,
		loadingIndicator,
		loadingLabel,
		render
	]);
	return /* @__PURE__ */ jsx(Toast.Action, {
		"data-slot": "toast-action",
		"data-loading": loading ? "true" : void 0,
		className: root({ className }),
		disabled: disabled || loading,
		"aria-disabled": loading || void 0,
		render: renderAction,
		...props,
		children
	});
}
function ToastClose({ className, children, ...props }) {
	const { close } = toastStyles();
	const usesDefaultText = children == null;
	return /* @__PURE__ */ jsx(Toast.Close, {
		"aria-label": usesDefaultText ? void 0 : "Dismiss toast",
		"data-slot": "toast-close",
		className: close({ className }),
		...props,
		children: children ?? "Dismiss"
	});
}
function ToastArrow({ className, ...props }) {
	const { arrow } = toastStyles();
	return /* @__PURE__ */ jsx(Toast.Arrow, {
		"data-slot": "toast-arrow",
		className: arrow({ className }),
		...props,
		children: /* @__PURE__ */ jsx(ToastArrowSvg, {})
	});
}
function DefaultToastLayer({ placement, portalContainer, strategy, viewportClassName }) {
	return /* @__PURE__ */ jsx(ToastPortal, {
		container: portalContainer,
		children: /* @__PURE__ */ jsx(ToastViewport, {
			placement,
			strategy,
			className: viewportClassName,
			children: /* @__PURE__ */ jsx(DefaultToastList, { placement })
		})
	});
}
function DefaultToastList({ placement }) {
	const { toasts } = useToastManager();
	return toasts.map((toastObject) => /* @__PURE__ */ jsx(DefaultToastItem, {
		placement,
		toast: toastObject
	}, toastObject.id));
}
const TOP_SWIPE_DIRECTION = ["up", "right"];
function DefaultToastItem({ placement, toast: toastObject }) {
	const { timeout } = useContext(ToastProviderConfigContext);
	const showDescription = Boolean(toastObject.description);
	const showAction = Boolean(toastObject.actionProps?.children);
	const showClose = toastObject.data?.hasClose !== false;
	const showIcon = toastObject.data?.hasIcon !== false;
	const progressDuration = toastObject.timeout ?? timeout;
	const showProgress = toastObject.data?.hasProgress === true && toastObject.type !== "loading" && progressDuration > 0;
	return /* @__PURE__ */ jsx(ToastRoot, {
		toast: toastObject,
		swipeDirection: placement.startsWith("top-") ? TOP_SWIPE_DIRECTION : void 0,
		children: /* @__PURE__ */ jsxs(ToastContent, {
			className: toastObject.data?.contentClassName,
			children: [
				showIcon ? /* @__PURE__ */ jsx(DefaultToastIcon, { toast: toastObject }) : null,
				/* @__PURE__ */ jsxs(ToastBody, { children: [/* @__PURE__ */ jsx(ToastTitle, {}), showDescription ? /* @__PURE__ */ jsx(ToastDescription, {}) : null] }),
				showAction || showClose ? /* @__PURE__ */ jsxs(ToastActions, { children: [showClose ? /* @__PURE__ */ jsx(ToastClose, {}) : null, showAction ? /* @__PURE__ */ jsx(ToastAction, {}) : null] }) : null,
				showProgress ? /* @__PURE__ */ jsx(ToastProgress, { duration: progressDuration }) : null
			]
		})
	});
}
const TOAST_PIXEL = {
	info: "information",
	success: "success",
	warning: "warning",
	error: "warning"
};
function DefaultToastIcon({ toast: toastObject }) {
	const intent = toastObject.data?.intent ?? getToastTone(toastObject.type);
	return /* @__PURE__ */ jsx(ToastIcon, { children: /* @__PURE__ */ jsx(Status, {
		"aria-hidden": true,
		variant: TOAST_PIXEL[intent]
	}) });
}
function ToastArrowSvg(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"
		})
	});
}
//#endregion
//#region src/components/tabs/tabs.tsx
const tabs = tv({
	slots: {
		root: ["w-full"],
		list: [
			"relative isolate flex w-max max-w-full",
			"overscroll-contain whitespace-nowrap",
			"scrollbar-none [&::-webkit-scrollbar]:hidden",
			"data-[overflow=end]:mask-[linear-gradient(to_right,black_calc(100%-32px),transparent)]",
			"data-[overflow=start]:mask-[linear-gradient(to_right,transparent,black_32px)]",
			"data-[overflow=both]:mask-[linear-gradient(to_right,transparent,black_32px,black_calc(100%-32px),transparent)]"
		],
		background: ["", "hidden"],
		tab: [
			"relative z-10 flex shrink-0 cursor-pointer touch-manipulation items-center gap-1.5 whitespace-nowrap outline-none",
			"data-[reorderable=true]:cursor-pointer data-[dragging-source=true]:cursor-grabbing",
			"font-sans text-callout font-semibold text-foreground-muted",
			"transition-[background-color,box-shadow,color] duration-100 ease-out",
			"after:absolute after:content-['']",
			"focus-visible:shadow-raft-focus",
			"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:stroke-2 [&_svg:not([class*='size-'])]:size-4",
			"data-disabled:pointer-events-none data-disabled:text-foreground-disabled"
		],
		content: ["relative z-10 inline-flex items-center gap-[inherit]"],
		label: [""],
		panel: ["outline-none"],
		indicator: ["", "hidden"]
	},
	variants: {
		variant: {
			default: {
				list: ["gap-0.5"],
				tab: [
					"h-8 justify-center gap-1.5 rounded-control border-[1.5px] border-transparent px-3",
					"after:inset-x-0 after:-inset-y-1.5",
					"hover:bg-fill-pressed active:bg-fill-pressed",
					"data-active:border-sticker-ink data-active:bg-primary data-active:font-bold data-active:text-sticker-ink data-active:ring-[1.5px] data-active:ring-sticker-edge",
					"data-active:active:press-overlay-sticker",
					"data-disabled:bg-transparent"
				]
			},
			underline: {
				list: ["gap-5"],
				tab: [
					"h-11 justify-center rounded-none border-0 bg-transparent px-0",
					"after:inset-y-0 after:-inset-x-2.5",
					"hover:text-foreground active:text-foreground",
					"data-active:text-foreground"
				]
			}
		},
		placement: {
			top: { list: ["items-center overflow-x-auto overflow-y-hidden", "data-[sorting=true]:overflow-x-hidden"] },
			bottom: {
				root: "flex flex-col",
				list: [
					"order-last",
					"items-center overflow-x-auto overflow-y-hidden",
					"data-[sorting=true]:overflow-x-hidden"
				]
			},
			left: {
				root: "flex items-start",
				panel: "min-w-0 flex-1",
				list: ["flex-col items-stretch overflow-x-hidden overflow-y-auto", "data-[sorting=true]:overflow-y-hidden"],
				tab: ["justify-start"]
			},
			right: {
				root: "flex items-start",
				list: [
					"order-last",
					"flex-col items-stretch overflow-x-hidden overflow-y-auto",
					"data-[sorting=true]:overflow-y-hidden"
				],
				panel: "min-w-0 flex-1",
				tab: ["justify-start"]
			}
		}
	},
	defaultVariants: {
		variant: "default",
		placement: "top"
	},
	compoundVariants: [
		{
			variant: "underline",
			placement: "top",
			class: { tab: "data-active:shadow-[inset_0_-2px_0_var(--foreground)]" }
		},
		{
			variant: "underline",
			placement: "bottom",
			class: { tab: "data-active:shadow-[inset_0_2px_0_var(--foreground)]" }
		},
		{
			variant: "underline",
			placement: "left",
			class: {
				list: "gap-0 border-r border-line-seam",
				tab: "h-9 px-4 data-active:shadow-[inset_-2px_0_0_var(--foreground)]"
			}
		},
		{
			variant: "underline",
			placement: "right",
			class: {
				list: "gap-0 border-l border-line-seam",
				tab: "h-9 px-4 data-active:shadow-[inset_2px_0_0_var(--foreground)]"
			}
		}
	]
});
const TabsPlacementContext = createContext("top");
const TabsReorderContext = createContext({ enabled: false });
const TabsValueContext = createContext(void 0);
const TabsListVariantContext = createContext("default");
function Tabs({ value, defaultValue, onValueChange, placement = "top", orientation, className, ...props }) {
	const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
	const resolvedValue = value ?? uncontrolledValue;
	const { root } = tabs({ placement });
	const handleValueChange = useCallback((nextValue, eventDetails) => {
		if (nextValue == null) return;
		const typedValue = String(nextValue);
		if (value === void 0) setUncontrolledValue(typedValue);
		onValueChange?.(typedValue, eventDetails);
	}, [value, onValueChange]);
	return /* @__PURE__ */ jsx(TabsPlacementContext.Provider, {
		value: placement,
		children: /* @__PURE__ */ jsx(TabsValueContext.Provider, {
			value: resolvedValue == null ? void 0 : String(resolvedValue),
			children: /* @__PURE__ */ jsx(Tabs$1.Root, {
				orientation: orientation ?? (placement === "left" || placement === "right" ? "vertical" : "horizontal"),
				value,
				defaultValue,
				onValueChange: handleValueChange,
				"data-slot": "tabs",
				"data-placement": placement,
				className: root({ className }),
				...props
			})
		})
	});
}
/**
* A horizontal tab row that has more tabs than room: it scrolls by itself
* (its scrollbar hidden), a vertical mouse wheel scrolls it sideways, it marks
* which side holds hidden tabs (`data-overflow="start" | "end" | "both"`, for
* the edge fade), and it keeps the selected tab in view.
*/
function useTabsRowOverflow(enabled) {
	const ref = useRef(null);
	useEffect(() => {
		const row = ref.current;
		if (!enabled || !row) return;
		const update = () => {
			const max = row.scrollWidth - row.clientWidth;
			const start = row.scrollLeft > 1;
			const end = max > 1 && row.scrollLeft < max - 1;
			const next = start && end ? "both" : start ? "start" : end ? "end" : null;
			if (next) row.setAttribute("data-overflow", next);
			else row.removeAttribute("data-overflow");
		};
		const revealActive = () => {
			const active = row.querySelector("[data-slot=tabs-tab][data-active]");
			if (!active || row.scrollWidth <= row.clientWidth) return;
			const inset = parseFloat(getComputedStyle(row).paddingLeft) || 0;
			const left = active.offsetLeft - inset;
			const right = active.offsetLeft + active.offsetWidth + inset - row.clientWidth;
			if (left < row.scrollLeft) row.scrollLeft = left;
			else if (right > row.scrollLeft) row.scrollLeft = right;
		};
		const onWheel = (event) => {
			if (row.scrollWidth <= row.clientWidth) return;
			if (Math.abs(event.deltaY) <= Math.abs(event.deltaX)) return;
			const before = row.scrollLeft;
			row.scrollLeft += event.deltaY;
			if (row.scrollLeft !== before) event.preventDefault();
		};
		revealActive();
		update();
		row.addEventListener("scroll", update, { passive: true });
		row.addEventListener("wheel", onWheel, { passive: false });
		const resize = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(update);
		resize?.observe(row);
		const mutations = typeof MutationObserver === "undefined" ? null : new MutationObserver(() => {
			revealActive();
			update();
		});
		mutations?.observe(row, {
			childList: true,
			subtree: true,
			attributes: true,
			attributeFilter: ["data-active"]
		});
		return () => {
			row.removeEventListener("scroll", update);
			row.removeEventListener("wheel", onWheel);
			resize?.disconnect();
			mutations?.disconnect();
		};
	}, [enabled]);
	return ref;
}
function TabsList({ className, children, variant = "default", ref, ...props }) {
	const placement = use(TabsPlacementContext);
	const { list } = tabs({
		variant,
		placement
	});
	const overflowRef = useTabsRowOverflow(placement === "top" || placement === "bottom");
	const listRef = useCallback((node) => {
		overflowRef.current = node;
		if (typeof ref === "function") ref(node);
		else if (ref) ref.current = node;
	}, [overflowRef, ref]);
	return /* @__PURE__ */ jsx(TabsListVariantContext.Provider, {
		value: variant,
		children: /* @__PURE__ */ jsx(Tabs$1.List, {
			ref: listRef,
			"data-slot": "tabs-list",
			"data-variant": variant,
			"data-placement": placement,
			className: list({ className }),
			...props,
			children
		})
	});
}
function SortableTabsList({ value, onReorder, children, variant = "default", ...props }) {
	const [activeId, setActiveId] = useState(void 0);
	const placement = use(TabsPlacementContext);
	const dndContextId = useId();
	const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 6 } }), useSensor(TouchSensor, { activationConstraint: {
		delay: 350,
		tolerance: 8
	} }));
	const tabIds = useMemo(() => value.map(String), [value]);
	const reorderContext = useMemo(() => ({
		enabled: true,
		activeId
	}), [activeId]);
	const handleDragStart = useCallback(({ active }) => {
		setActiveId(String(active.id));
	}, []);
	const handleDragCancel = useCallback(() => {
		setActiveId(void 0);
	}, []);
	const handleDragEnd = useCallback(({ active, over }) => {
		setActiveId(void 0);
		if (!over || active.id === over.id) return;
		const oldIndex = tabIds.indexOf(String(active.id));
		const newIndex = tabIds.indexOf(String(over.id));
		if (oldIndex === -1 || newIndex === -1) return;
		onReorder(arrayMove([...value], oldIndex, newIndex));
	}, [
		onReorder,
		tabIds,
		value
	]);
	return /* @__PURE__ */ jsx(DndContext, {
		id: dndContextId,
		autoScroll: false,
		sensors,
		collisionDetection: closestCenter,
		onDragStart: handleDragStart,
		onDragCancel: handleDragCancel,
		onDragEnd: handleDragEnd,
		children: /* @__PURE__ */ jsx(SortableContext, {
			items: tabIds,
			strategy: placement === "left" || placement === "right" ? verticalListSortingStrategy : horizontalListSortingStrategy,
			children: /* @__PURE__ */ jsx(TabsReorderContext.Provider, {
				value: reorderContext,
				children: /* @__PURE__ */ jsx(TabsList, {
					variant,
					...props,
					"data-sorting": activeId ? "true" : void 0,
					children
				})
			})
		})
	});
}
function TabsTab({ value, ...props }) {
	return /* @__PURE__ */ jsx(TabsTabButton, {
		value,
		...props
	});
}
function SortableTabsTab({ value, ...props }) {
	const reorder = use(TabsReorderContext);
	const activeValue = use(TabsValueContext);
	const placement = use(TabsPlacementContext);
	const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
		id: value,
		disabled: !reorder.enabled
	});
	const isDraggingActive = isDragging && activeValue === String(value);
	const baseStyle = typeof props.style === "function" ? void 0 : props.style;
	const vertical = placement === "left" || placement === "right";
	const translate = vertical ? transform?.y : transform?.x;
	const style = useMemo(() => ({
		...baseStyle,
		transform: translate === void 0 ? void 0 : vertical ? `translate3d(0, ${translate}px, 0)` : `translate3d(${translate}px, 0, 0)`,
		transition,
		zIndex: isDragging ? 20 : baseStyle?.zIndex,
		cursor: isDragging ? "grabbing" : "pointer"
	}), [
		baseStyle,
		vertical,
		translate,
		transition,
		isDragging
	]);
	if (!reorder.enabled) return /* @__PURE__ */ jsx(TabsTabButton, {
		value,
		...props
	});
	const { role: _sortableRole, tabIndex: _sortableTabIndex, ...sortableAttributes } = attributes;
	return /* @__PURE__ */ jsx(TabsTabButton, {
		value,
		sortableRef: setNodeRef,
		...props,
		"data-dragging-active": isDraggingActive ? "true" : void 0,
		"data-dragging-source": isDragging ? "true" : void 0,
		"data-reorderable": "true",
		style,
		...sortableAttributes,
		...listeners
	});
}
function TabsTabButton({ value, sortableRef, className, children, ...props }) {
	const variant = use(TabsListVariantContext);
	const placement = use(TabsPlacementContext);
	const { content, tab } = tabs({
		variant,
		placement
	});
	return /* @__PURE__ */ jsx(Tabs$1.Tab, {
		ref: sortableRef,
		value,
		"data-slot": "tabs-tab",
		className: tab({ className }),
		...props,
		children: /* @__PURE__ */ jsx("span", {
			"data-slot": "tabs-tab-content",
			className: content(),
			children
		})
	});
}
function TabsLabel({ className, ...props }) {
	const { label } = tabs();
	return /* @__PURE__ */ jsx("span", {
		"data-slot": "tabs-label",
		className: label({ className }),
		...props
	});
}
function TabsPanel({ className, ...props }) {
	const placement = use(TabsPlacementContext);
	const { panel } = tabs({ placement });
	return /* @__PURE__ */ jsx(Tabs$1.Panel, {
		"data-slot": "tabs-panel",
		className: panel({ className }),
		...props
	});
}
function useOrderedTabs(items, storedOrder) {
	return useMemo(() => reconcileTabOrder(items, storedOrder), [items, storedOrder]);
}
function reconcileTabOrder(items, order) {
	const byId = new Map(items.map((item) => [item.id, item]));
	const next = [];
	const seen = /* @__PURE__ */ new Set();
	for (const id of order) {
		const item = byId.get(id);
		if (!item || seen.has(item.id)) continue;
		next.push(item);
		seen.add(item.id);
	}
	for (const item of items) {
		if (seen.has(item.id)) continue;
		next.push(item);
		seen.add(item.id);
	}
	return next;
}
//#endregion
//#region src/components/separator/separator.tsx
const separator = tv({ slots: {
	root: [
		"shrink-0",
		"data-[orientation=horizontal]:w-full",
		"data-[orientation=vertical]:self-stretch",
		"bg-line-muted",
		"data-[orientation=horizontal]:h-px",
		"data-[orientation=vertical]:w-px"
	],
	labeledRoot: ["grid grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] items-center gap-3 py-3"],
	labeledLine: ["w-full shrink-0", "h-px bg-line-muted"],
	labeledContent: ["min-w-0", "font-sans text-footnote font-semibold text-foreground-hint"]
} });
function Separator({ children, className, orientation = "horizontal", ...props }) {
	const { labeledContent, labeledLine, labeledRoot, root } = separator();
	if (children != null && orientation === "horizontal") return /* @__PURE__ */ jsxs(Separator$1, {
		"data-slot": "separator",
		orientation,
		className: labeledRoot({ className }),
		...props,
		children: [
			/* @__PURE__ */ jsx("span", {
				"aria-hidden": "true",
				className: labeledLine()
			}),
			/* @__PURE__ */ jsx("span", {
				"data-slot": "separator-content",
				className: labeledContent(),
				children
			}),
			/* @__PURE__ */ jsx("span", {
				"aria-hidden": "true",
				className: labeledLine()
			})
		]
	});
	return /* @__PURE__ */ jsx(Separator$1, {
		"data-slot": "separator",
		orientation,
		className: root({ className }),
		...props
	});
}
//#endregion
//#region src/components/panel/panel-action.recipe.ts
const panelActionBase = tv({ base: [
	"relative inline-flex w-auto shrink-0 items-center justify-center",
	"overflow-visible font-sans leading-none tabular-nums select-none outline-none",
	"transition-all duration-100",
	"[&>svg]:pointer-events-none [&>svg]:shrink-0",
	"h-11 min-w-11 rounded-control border-[1.5px] border-transparent bg-transparent px-2 py-0",
	"md:h-8 md:min-w-8 md:px-[5px] md:after:absolute md:after:-inset-1.5",
	"text-foreground",
	"hover:bg-fill-pressed active:bg-fill-pressed",
	"focus-visible:shadow-raft-focus",
	"[&>svg]:size-[22px] md:[&>svg]:size-[18px]"
] });
const panelAction = tv({
	extend: panelActionBase,
	base: [
		"whitespace-nowrap",
		"disabled:pointer-events-none disabled:transform-none",
		"gap-1.5 text-footnote font-bold",
		"disabled:bg-transparent disabled:text-foreground-disabled disabled:opacity-100",
		"aria-pressed:border-sticker-ink aria-pressed:bg-primary aria-pressed:text-sticker-ink aria-pressed:ring-[1.5px] aria-pressed:ring-sticker-edge",
		"aria-pressed:active:press-overlay-sticker"
	]
});
const panelToggleAction = tv({
	extend: panelActionBase,
	base: [
		"data-disabled:pointer-events-none data-disabled:transform-none",
		"gap-1.5 text-footnote font-bold",
		"data-disabled:bg-transparent data-disabled:text-foreground-disabled data-disabled:opacity-100",
		"data-pressed:border-sticker-ink data-pressed:bg-primary data-pressed:text-sticker-ink data-pressed:ring-[1.5px] data-pressed:ring-sticker-edge",
		"data-pressed:active:press-overlay-sticker"
	]
});
//#endregion
//#region src/components/panel/panel-action.tsx
function PanelAction({ className, render, nativeButton, ...props }) {
	return /* @__PURE__ */ jsx(Button$1, {
		...props,
		render,
		nativeButton: nativeButton ?? defaultNativeButton(render),
		type: "button",
		"data-slot": "panel-action",
		className: panelAction({ className })
	});
}
//#endregion
//#region src/components/app-shell/app-shell.tsx
const appShell = tv({
	slots: {
		root: [
			"flex min-h-0 w-full overflow-visible md:overflow-clip",
			"max-md:flex-col max-md:pt-[env(safe-area-inset-top,0px)]",
			"font-sans",
			"[--shell-header-height:56px] [@media(max-height:600px)]:[--shell-header-height:48px]",
			"bg-layer-panel text-foreground"
		],
		railSlot: ["hidden h-full shrink-0 flex-col md:flex"],
		sidebarSlot: ["hidden min-h-0 shrink-0 flex-col md:flex"],
		mainSlot: ["flex min-h-0 min-w-0 flex-1 flex-col"],
		panelSlot: ["hidden min-h-0 min-w-0 flex-col md:flex"],
		overlaySlot: ["absolute inset-0 z-20 flex min-h-0 min-w-0"]
	},
	variants: { overlay: {
		false: {},
		true: { mainSlot: "relative" }
	} },
	defaultVariants: { overlay: false }
});
const AppShellSidebarContext = createContext(null);
function useOptionalAppShellSidebar() {
	return useContext(AppShellSidebarContext);
}
function AppShellRoot({ className, defaultSidebarOpen = true, onSidebarOpenChange, render, sidebarCollapsible = false, sidebarOpen: sidebarOpenProp, style, ...props }) {
	const { root } = appShell();
	const [uncontrolledSidebarOpen, setUncontrolledSidebarOpen] = useState(defaultSidebarOpen);
	const [sidebarWidth, setSidebarWidth] = useState(0);
	const sidebarOpen = sidebarOpenProp ?? uncontrolledSidebarOpen;
	const setSidebarOpen = useCallback((open) => {
		if (sidebarOpenProp === void 0) setUncontrolledSidebarOpen(open);
		onSidebarOpenChange?.(open);
	}, [onSidebarOpenChange, sidebarOpenProp]);
	const toggleSidebar = useCallback(() => {
		setSidebarOpen(!sidebarOpen);
	}, [setSidebarOpen, sidebarOpen]);
	const setMeasuredSidebarWidth = useCallback((width) => {
		if (width <= 0) return;
		setSidebarWidth((currentWidth) => Math.abs(currentWidth - width) < 1 ? currentWidth : width);
	}, []);
	const sidebarContext = useMemo(() => ({
		collapsible: sidebarCollapsible,
		open: sidebarOpen,
		setOpen: setSidebarOpen,
		sidebarWidth,
		setSidebarWidth: setMeasuredSidebarWidth,
		toggle: toggleSidebar
	}), [
		setMeasuredSidebarWidth,
		setSidebarOpen,
		sidebarCollapsible,
		sidebarOpen,
		sidebarWidth,
		toggleSidebar
	]);
	const rootStyle = sidebarCollapsible ? {
		...style,
		"--app-shell-sidebar-width": `${sidebarWidth}px`
	} : style;
	const defaultProps = {
		"data-state": sidebarCollapsible ? sidebarOpen ? "expanded" : "collapsed" : void 0,
		"data-slot": "app-shell-root",
		className: root({ className: cn("group/app-shell", className) }),
		style: rootStyle
	};
	const rootElement = useRender({
		defaultTagName: "div",
		render,
		props: mergeProps(defaultProps, props)
	});
	return /* @__PURE__ */ jsx(AppShellSidebarContext, {
		value: sidebarContext,
		children: rootElement
	});
}
function AppShellRailSlot({ className, render, ...props }) {
	const { railSlot } = appShell();
	const defaultProps = {
		"data-slot": "app-shell-rail-slot",
		className: railSlot({ className })
	};
	return useRender({
		defaultTagName: "aside",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function AppShellSidebarSlot({ className, render, ...props }) {
	const { sidebarSlot } = appShell();
	const sidebar = useOptionalAppShellSidebar();
	const elementRef = useRef(null);
	const isCollapsible = sidebar?.collapsible ?? false;
	const setSidebarWidth = sidebar?.setSidebarWidth;
	const setElementRef = useCallback((element) => {
		elementRef.current = element;
	}, []);
	useLayoutEffect(() => {
		if (!isCollapsible || !setSidebarWidth || !elementRef.current) return;
		const sidebarElement = elementRef.current;
		const observe = () => setSidebarWidth(sidebarElement.getBoundingClientRect().width);
		const observer = new ResizeObserver(observe);
		observe();
		observer.observe(sidebarElement);
		return () => observer.disconnect();
	}, [isCollapsible, setSidebarWidth]);
	const defaultProps = {
		"aria-hidden": sidebar?.collapsible && !sidebar.open ? true : void 0,
		"data-slot": "app-shell-sidebar-slot",
		className: sidebarSlot({ className: cn(className, sidebar?.collapsible && [
			"will-change-[opacity]",
			"transition-opacity duration-160 ease-slide",
			"motion-reduce:transition-none",
			"group-data-[state=collapsed]/app-shell:pointer-events-none",
			"group-data-[state=collapsed]/app-shell:opacity-0",
			"group-data-[state=collapsed]/app-shell:duration-120"
		]) }),
		ref: setElementRef
	};
	return useRender({
		defaultTagName: "aside",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function AppShellPanelSlot({ className, render, ...props }) {
	const { panelSlot } = appShell();
	const defaultProps = {
		"data-slot": "app-shell-panel-slot",
		className: panelSlot({ className })
	};
	return useRender({
		defaultTagName: "aside",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function AppShellOverlaySlot({ className, render, ...props }) {
	const { overlaySlot } = appShell();
	const defaultProps = {
		"data-slot": "app-shell-overlay-slot",
		className: overlaySlot({ className })
	};
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function AppShellMainSlot({ className, overlay = false, render, ...props }) {
	const { mainSlot } = appShell({ overlay });
	const sidebar = useOptionalAppShellSidebar();
	const defaultProps = {
		"data-slot": "app-shell-main-slot",
		className: mainSlot({ className: cn(className, sidebar?.collapsible && [
			"absolute inset-y-0 right-0 left-0 z-45",
			"transition-[left] duration-220 ease-slide",
			"motion-reduce:transition-none",
			"group-data-[state=collapsed]/app-shell:-left-(--app-shell-sidebar-width)"
		]) })
	};
	return useRender({
		defaultTagName: "main",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function AppShellSidebarTrigger(props) {
	const sidebar = useOptionalAppShellSidebar();
	if (!sidebar?.collapsible) return null;
	return /* @__PURE__ */ jsx(AppShellSidebarTriggerButton, {
		sidebar,
		...props
	});
}
function AppShellSidebarTriggerButton({ sidebar, className, children, onClick, render, ...props }) {
	const label = sidebar.open ? "Collapse sidebar" : "Expand sidebar";
	const defaultProps = {
		className: cn("group/app-shell-sidebar-trigger max-md:hidden", className),
		"aria-label": label,
		"aria-pressed": sidebar.open,
		"data-state": sidebar.open ? "expanded" : "collapsed",
		title: label,
		children,
		onClick: (event) => {
			onClick?.(event);
			if (!event.defaultPrevented) sidebar.toggle();
		}
	};
	return useRender({
		defaultTagName: "button",
		render: render ?? /* @__PURE__ */ jsx(PanelAction, {}),
		props: mergeProps(defaultProps, props)
	});
}
//#endregion
//#region src/components/resizable/resizable.recipe.ts
const resizable = tv({ slots: {
	group: ["flex size-full  min-h-0 min-w-0", "data-[orientation=vertical]:flex-col"],
	panel: ["min-h-0 min-w-0"],
	handle: [
		"right-0 z-10 cursor-ew-resize touch-none select-none",
		"relative -ml-1.5 -mr-1.5 flex w-3 shrink-0 items-center justify-center",
		"before:pointer-events-none before:absolute before:transition-colors before:content-['']",
		"focus-visible:outline-none focus-visible:before:outline-2 focus-visible:before:outline-offset-2 focus-visible:before:outline-foreground-strong",
		"data-[orientation=horizontal]:-mt-1.5 data-[orientation=horizontal]:-mb-1.5 data-[orientation=horizontal]:ml-0 data-[orientation=horizontal]:mr-0 data-[orientation=horizontal]:h-3 data-[orientation=horizontal]:w-full data-[orientation=horizontal]:cursor-ns-resize",
		"bg-transparent",
		"before:top-0 before:left-[5px] before:h-full before:w-px before:translate-none before:rounded-none",
		"before:bg-transparent",
		"hover:before:bg-foreground-muted",
		"data-[separator=active]:before:bg-foreground-muted",
		"focus-visible:before:w-0.5 focus-visible:before:bg-foreground focus-visible:before:outline-none",
		"data-[orientation=horizontal]:before:top-[5px] data-[orientation=horizontal]:before:left-0",
		"data-[orientation=horizontal]:before:h-px data-[orientation=horizontal]:before:w-full",
		"data-[orientation=horizontal]:focus-visible:before:h-0.5"
	]
} });
//#endregion
//#region src/components/resizable/resizable.tsx
const ResizableOrientationContext = createContext("horizontal");
function ResizableGroup({ className, orientation = "horizontal", ...props }) {
	const { group } = resizable();
	return /* @__PURE__ */ jsx(ResizableOrientationContext.Provider, {
		value: orientation,
		children: /* @__PURE__ */ jsx(Group, {
			"data-slot": "resizable-group",
			"data-orientation": orientation,
			orientation,
			className: group({ className }),
			...props
		})
	});
}
function ResizablePanel({ className, ...props }) {
	const { panel } = resizable();
	return /* @__PURE__ */ jsx(Panel$1, {
		"data-slot": "resizable-panel",
		className: panel({ className }),
		...props
	});
}
function ResizableHandle({ className, ...props }) {
	const { handle } = resizable();
	const handleOrientation = useContext(ResizableOrientationContext) === "horizontal" ? "vertical" : "horizontal";
	return /* @__PURE__ */ jsx(Separator$2, {
		"data-slot": "resizable-handle",
		"data-orientation": handleOrientation,
		className: handle({ className }),
		...props
	});
}
//#endregion
//#region src/components/panel/panel-header.tsx
function PanelHeader({ children, className, render, ...props }) {
	const { header } = panelHeader();
	return /* @__PURE__ */ jsx(PanelHeaderRoot, {
		...props,
		render,
		"data-panel-frame-header": "",
		"data-slot": "panel-header",
		className: header({ className }),
		children
	});
}
function PanelSectionHeader({ children, className, render, ...props }) {
	const { sectionHeader } = panelHeader();
	return /* @__PURE__ */ jsx(PanelHeaderRoot, {
		...props,
		render,
		"data-slot": "panel-section-header",
		className: sectionHeader({ className }),
		children
	});
}
function PanelHeaderIcon({ className, render, ...props }) {
	const { headerIcon } = panelHeader();
	const defaultProps = {
		"data-slot": "panel-header-icon",
		className: headerIcon({ className })
	};
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function PanelHeaderContent({ className, render, ...props }) {
	const { headerContent } = panelHeader();
	const defaultProps = {
		"data-slot": "panel-header-content",
		className: headerContent({ className })
	};
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function PanelHeading({ className, render, ...props }) {
	const { heading } = panelHeader();
	const defaultProps = {
		"data-slot": "panel-heading",
		className: heading({ className })
	};
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function PanelTitle({ className, render, ...props }) {
	const { title } = panelHeader();
	const defaultProps = {
		"data-slot": "panel-title",
		className: title({ className })
	};
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function PanelMeta({ className, render, size = "sm", ...props }) {
	const { meta } = panelHeader({ size });
	const defaultProps = {
		"data-slot": "panel-meta",
		className: meta({ className })
	};
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps(defaultProps, props)
	});
}
/**
* Attribute badge in a panel header, such as a muted or archived marker.
* Use `PanelActivity` for a live status readout wrapping a `Status`.
*/
function PanelStatus({ className, render, ...props }) {
	const { status } = panelHeader();
	const defaultProps = {
		"data-slot": "panel-status",
		className: status({ className })
	};
	return useRender({
		defaultTagName: "span",
		render,
		props: mergeProps(defaultProps, props)
	});
}
/**
* Live status readout in a panel header, such as agent activity or presence.
* Wraps a `Status` and supplies header-appropriate spacing and typography;
* use `PanelStatus` for a standalone attribute badge.
*/
function PanelActivity({ className, render, ...props }) {
	const { activity } = panelHeader();
	const defaultProps = {
		"data-slot": "panel-activity",
		className: activity({ className })
	};
	return useRender({
		defaultTagName: "span",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function PanelActions({ className, render, ...props }) {
	const { actions } = panelHeader();
	const defaultProps = {
		"data-slot": "panel-actions",
		className: actions({ className })
	};
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps(defaultProps, props)
	});
}
//#endregion
//#region src/components/panel/panel-toggle-action.tsx
function PanelToggleAction({ className, ...props }) {
	return /* @__PURE__ */ jsx(Toggle, {
		...props,
		type: "button",
		"data-slot": "panel-toggle-action",
		className: panelToggleAction({ className })
	});
}
//#endregion
//#region src/components/panel/panel-notice.tsx
/**
* A notice strip that runs the full width of a panel, under its head (a
* runtime error, a setting that failed to save). It is a region of its own,
* so it is closed by the region seam, the same line the head draws above it
* — never the lighter in-region divider. Its edges are the panel's (20 / 16
* on a phone), and its trailing actions overhang the padding so a 32px
* button sits on the first text line instead of making the strip taller.
*
* Inside a card or a dialog, where a notice is part of the content, use
* Banner instead.
*/
const panelNotice = tv({
	slots: {
		root: [
			"flex shrink-0 items-start",
			"min-h-10 gap-2.5 border-b border-line-seam px-5 py-2.5 max-md:px-4",
			"font-sans text-callout font-semibold text-foreground"
		],
		content: ["min-w-0 flex-1"],
		actions: ["flex shrink-0 items-center", "-my-1.5 gap-3"]
	},
	variants: { status: {
		default: { root: ["bg-fill-muted"] },
		warning: { root: ["bg-warning-soft"] },
		destructive: { root: ["bg-danger-soft"] },
		info: { root: ["bg-info-soft"] },
		success: { root: ["bg-success-soft"] }
	} },
	defaultVariants: { status: "warning" }
});
function PanelNotice({ className, render, status = "warning", ...props }) {
	const { root } = panelNotice({ status });
	const defaultProps = {
		"data-slot": "panel-notice",
		"data-status": status,
		className: root({ className })
	};
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps(defaultProps, props)
	});
}
/** The message: takes the width left and wraps or clamps as the caller says. */
function PanelNoticeContent({ className, render, ...props }) {
	const { content } = panelNotice();
	const defaultProps = {
		"data-slot": "panel-notice-content",
		className: content({ className })
	};
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps(defaultProps, props)
	});
}
/** Trailing controls (copy, a link, ×), centred on the first text line. */
function PanelNoticeActions({ className, render, ...props }) {
	const { actions } = panelNotice();
	const defaultProps = {
		"data-slot": "panel-notice-actions",
		className: actions({ className })
	};
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps(defaultProps, props)
	});
}
//#endregion
//#region src/components/profile-panel/profile-panel.recipe.ts
const profilePanel = tv({ slots: {
	root: [
		"flex h-full min-h-0 min-w-0 flex-1 flex-col",
		"[--panel-footer-clearance:0rem]",
		"relative bg-layer-panel font-sans text-foreground"
	],
	header: [],
	headerContent: ["items-stretch gap-0"],
	section: ["border-line-muted px-5 py-4"]
} });
//#endregion
//#region src/components/profile-panel/profile-panel.tsx
function ProfilePanel({ className, edge = "inset", ...props }) {
	const { root } = profilePanel();
	return /* @__PURE__ */ jsx(Panel, {
		...props,
		edge,
		"data-slot": "profile-panel",
		className: root({ className })
	});
}
function ProfilePanelHeader({ className, ...props }) {
	const { header } = profilePanel();
	return /* @__PURE__ */ jsx(PanelHeader, {
		...props,
		className: header({ className })
	});
}
function ProfilePanelHeaderContent({ className, ...props }) {
	const { headerContent } = profilePanel();
	return /* @__PURE__ */ jsx(PanelHeaderContent, {
		...props,
		className: headerContent({ className })
	});
}
function ProfilePanelBody({ className, ...props }) {
	const { content } = conversationPanel();
	return /* @__PURE__ */ jsx(PanelBody, {
		...props,
		"data-slot": "profile-panel-body",
		className: content({ className })
	});
}
function ProfilePanelSection({ className, ...props }) {
	const { section } = profilePanel();
	return /* @__PURE__ */ jsx(PanelSection, {
		...props,
		className: section({ className })
	});
}
//#endregion
//#region src/components/thread-panel/thread-panel.recipe.ts
const threadPanel = tv({ slots: {
	root: ["isolate flex size-full min-h-0  flex-col", "relative bg-layer-panel font-sans text-foreground"],
	header: [
		"flex h-(--shell-header-height,56px) shrink-0 items-center gap-3 max-md:gap-2",
		panelHeadEdges,
		"border-b border-line-seam bg-layer-panel"
	],
	content: ["flex min-h-0 min-w-0 flex-1 flex-col", "relative bg-layer-panel"],
	title: [
		"m-0 min-w-0 flex-1 truncate",
		"font-bold",
		"font-sans text-headline text-foreground"
	],
	titleMeta: ["font-normal text-foreground-hint"],
	actions: panelHeadActions,
	search: [
		"relative z-20 flex shrink-0 items-center gap-1.5 py-2",
		"[&>[data-slot=input-group]]:min-w-0 *:data-[slot=input-group]:flex-1",
		"border-b border-line-muted bg-layer-panel px-5"
	],
	searchTrailing: ["ml-auto flex shrink-0 items-center gap-1.5"],
	searchCount: ["shrink-0 whitespace-nowrap font-mono tabular-nums", "text-mono-meta text-foreground-hint"],
	originalMessage: [
		"relative shrink-0",
		"border-b border-line-muted bg-transparent pb-2",
		"**:data-message-item:bg-transparent"
	],
	replySummary: ["pt-2", "px-5"],
	replyCount: ["mb-1 border-b pb-2 text-center font-mono", "border-line-muted text-mono-meta text-foreground-hint"],
	footer: ["text-caption text-foreground-hint"]
} });
//#endregion
//#region src/components/thread-panel/thread-panel.tsx
function ThreadPanelRoot({ className, render, ...props }) {
	const { root } = threadPanel();
	return /* @__PURE__ */ jsx(Panel, {
		...props,
		render,
		edge: "attached",
		"data-slot": "thread-panel-root",
		className: root({ className })
	});
}
function ThreadPanelHeader({ className, render, ...props }) {
	const { header } = threadPanel();
	return /* @__PURE__ */ jsx(PanelHeaderRoot, {
		...props,
		render,
		"data-panel-frame-header": "",
		"data-slot": "thread-panel-header",
		className: header({ className })
	});
}
function ThreadPanelContent({ className, render, ...props }) {
	const { content } = threadPanel();
	const defaultProps = {
		"data-slot": "thread-panel-content",
		className: content({ className })
	};
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function ThreadPanelTitle({ className, render, ...props }) {
	const { title } = threadPanel();
	const defaultProps = {
		"data-slot": "thread-panel-title",
		className: title({ className })
	};
	return useRender({
		defaultTagName: "h2",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function ThreadPanelTitleMeta({ className, render, ...props }) {
	const { titleMeta } = threadPanel();
	const defaultProps = {
		"data-slot": "thread-panel-title-meta",
		className: titleMeta({ className })
	};
	return useRender({
		defaultTagName: "span",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function ThreadPanelActions({ className, render, ...props }) {
	const { actions } = threadPanel();
	const defaultProps = {
		"data-slot": "thread-panel-actions",
		className: actions({ className })
	};
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function ThreadPanelBody({ className, render, ...props }) {
	return /* @__PURE__ */ jsx(PanelBody, {
		...props,
		render,
		"data-slot": "thread-panel-body",
		className
	});
}
function ThreadPanelOriginalMessage({ className, ...props }) {
	const { originalMessage } = threadPanel();
	return /* @__PURE__ */ jsx("div", {
		...props,
		"data-slot": "thread-panel-original-message",
		className: originalMessage({ className })
	});
}
function ThreadPanelReplySummary({ className, render, ...props }) {
	const { replySummary } = threadPanel();
	const defaultProps = {
		"data-slot": "thread-panel-reply-summary",
		className: replySummary({ className })
	};
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function ThreadPanelReplyCount({ className, render, ...props }) {
	const { replyCount } = threadPanel();
	const defaultProps = {
		"data-slot": "thread-panel-reply-count",
		className: replyCount({ className })
	};
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function ThreadPanelFooter({ className, render, ...props }) {
	const { footer } = threadPanel();
	return /* @__PURE__ */ jsx(PanelFooter, {
		...props,
		render,
		"data-slot": "thread-panel-footer",
		className: footer({ className })
	});
}
function ThreadPanelSearch({ className, render, ...props }) {
	const { search } = threadPanel();
	const defaultProps = {
		"data-slot": "thread-panel-search",
		className: search({ className })
	};
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function ThreadPanelSearchTrailing({ className, render, ...props }) {
	const { searchTrailing } = threadPanel();
	const defaultProps = {
		"data-slot": "thread-panel-search-trailing",
		className: searchTrailing({ className })
	};
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function ThreadPanelSearchCount({ className, render, ...props }) {
	const { searchCount } = threadPanel();
	const defaultProps = {
		"data-slot": "thread-panel-search-count",
		className: searchCount({ className })
	};
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps(defaultProps, props)
	});
}
//#endregion
//#region src/components/live-agent-activity-bar/live-agent-activity-bar.tsx
const liveAgentActivityBar = tv({ slots: {
	root: ["shrink-0", "rounded-container border border-line-muted bg-layer-card px-3 py-2 shadow-none"],
	row: [
		"flex min-h-8 items-center",
		"gap-2",
		"[&>[data-slot=avatar]+[data-slot=avatar]]:ml-[-5px]"
	],
	avatar: ["shrink-0 overflow-hidden", "size-[19px]"],
	content: ["flex min-w-0 flex-1 items-center", "gap-1.5"],
	status: ["animate-none [--status-color:var(--presence-busy)]"],
	text: ["min-w-0 truncate", "font-sans text-footnote font-semibold text-foreground"]
} });
function LiveAgentActivityBarRoot({ children, className, render, ...props }) {
	const { root } = liveAgentActivityBar();
	const defaultProps = {
		"aria-live": "polite",
		"data-slot": "live-agent-activity-bar",
		"data-testid": "live-agent-activity-bar",
		className: root({ className }),
		children
	};
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function LiveAgentActivityBar({ children, className, render, ...props }) {
	return children == null ? null : /* @__PURE__ */ jsx(LiveAgentActivityBarRoot, {
		className,
		render,
		...props,
		children
	});
}
function LiveAgentActivityBarRow({ className, render, ...props }) {
	const { row } = liveAgentActivityBar();
	const defaultProps = {
		"data-slot": "live-agent-activity-bar-row",
		className: row({ className })
	};
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function LiveAgentActivityBarAvatar({ children, className, render, ...props }) {
	const { avatar } = liveAgentActivityBar();
	return /* @__PURE__ */ jsxs(Avatar, {
		render: render ?? /* @__PURE__ */ jsx("div", {}),
		size: "xs",
		type: "agent",
		className: avatar({ className }),
		...props,
		children: [children, /* @__PURE__ */ jsx(AvatarFallback, {})]
	});
}
function LiveAgentActivityBarContent({ className, render, ...props }) {
	const { content } = liveAgentActivityBar();
	const defaultProps = {
		"data-slot": "live-agent-activity-bar-content",
		className: content({ className })
	};
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function LiveAgentActivityBarStatus({ className, ...props }) {
	const { status } = liveAgentActivityBar();
	return /* @__PURE__ */ jsx(Status, {
		"aria-hidden": true,
		size: "md",
		variant: "primary",
		className: status({ className }),
		...props
	});
}
function LiveAgentActivityBarText({ className, render, ...props }) {
	const { text } = liveAgentActivityBar();
	const defaultProps = {
		"data-slot": "live-agent-activity-bar-text",
		className: text({ className })
	};
	return useRender({
		defaultTagName: "span",
		render,
		props: mergeProps(defaultProps, props)
	});
}
//#endregion
//#region src/components/tasks/task-status-icon.tsx
/** Raft draws every status as its pixel: a 9px square in the status colour
*  with a 1.5px sticker-ink edge (2px outer radius). The square keeps its size
*  and sits centred in whatever box the context gives the icon, so an icon
*  slot sized for a glyph still shows the same pixel. */
const TASK_STATUS_PIXEL_STYLE = {
	todo: {
		fill: "var(--task-status-todo)",
		stroke: "var(--sticker-ink)"
	},
	"in-progress": {
		fill: "var(--task-status-in-progress)",
		stroke: "var(--sticker-ink)"
	},
	"in-review": {
		fill: "var(--task-status-in-review)",
		stroke: "var(--sticker-ink)"
	},
	done: {
		fill: "var(--task-status-done)",
		stroke: "var(--sticker-ink)"
	},
	closed: {
		fill: "var(--task-status-closed)",
		stroke: "var(--sticker-ink)"
	}
};
function TaskStatusPixel({ status, className, ...props }) {
	return /* @__PURE__ */ jsx("svg", {
		"aria-hidden": true,
		"data-slot": "task-status-icon",
		"data-status": status,
		width: "9",
		height: "9",
		overflow: "visible",
		className,
		...props,
		children: /* @__PURE__ */ jsx("rect", {
			x: "50%",
			y: "50%",
			width: "7.5",
			height: "7.5",
			rx: "1.25",
			strokeWidth: "1.5",
			transform: "translate(-3.75 -3.75)",
			style: TASK_STATUS_PIXEL_STYLE[status]
		})
	});
}
function TaskTodoIcon(props) {
	return /* @__PURE__ */ jsx(TaskStatusPixel, {
		status: "todo",
		...props
	});
}
function TaskInProgressIcon(props) {
	return /* @__PURE__ */ jsx(TaskStatusPixel, {
		status: "in-progress",
		...props
	});
}
function TaskInReviewIcon(props) {
	return /* @__PURE__ */ jsx(TaskStatusPixel, {
		status: "in-review",
		...props
	});
}
function TaskDoneIcon(props) {
	return /* @__PURE__ */ jsx(TaskStatusPixel, {
		status: "done",
		...props
	});
}
function TaskClosedIcon(props) {
	return /* @__PURE__ */ jsx(TaskStatusPixel, {
		status: "closed",
		...props
	});
}
function TaskStatusIcon({ status, className, ...props }) {
	return /* @__PURE__ */ jsx(TaskStatusPixel, {
		status,
		className,
		...props
	});
}
//#endregion
//#region src/components/task-board/task-board-column.recipe.ts
const taskBoardColumn = tv({ slots: {
	root: [
		"group flex shrink-0 self-start flex-col",
		"w-[232px] grow rounded-container p-0",
		"data-[drop-collapsed=true]:data-[drop-state=allowed]:[outline:1.5px_dashed_var(--line-strong)] data-[drop-collapsed=true]:data-[drop-state=allowed]:outline-offset-4"
	],
	trigger: [
		"group flex w-full touch-manipulation items-center justify-between text-left outline-none",
		"min-h-8 gap-2 rounded-control",
		"font-sans text-footnote font-bold text-foreground-muted",
		"data-[panel-open]:mb-2",
		"focus-visible:shadow-raft-focus"
	],
	heading: ["flex min-w-0 items-center", "gap-2"],
	badge: [
		"inline-flex items-center gap-2 p-0",
		"font-sans text-footnote font-bold text-foreground-muted",
		"[&>svg]:shrink-0"
	],
	count: ["font-mono text-mono-meta font-normal text-foreground-hint"],
	chevron: [
		"inline-flex shrink-0 -rotate-90 items-center transition-transform",
		"[&_svg]:size-3.5",
		"group-data-panel-open:rotate-0",
		"motion-reduce:transition-none",
		"text-foreground-hint",
		"group-hover:text-foreground"
	],
	panel: ["data-ending-style:hidden"],
	items: ["flex flex-col", "gap-2"],
	empty: [
		"px-3",
		"group-data-[drop-state=allowed]:hidden",
		"flex min-h-16 items-center justify-center py-3",
		"rounded-container border border-dashed border-line-seam",
		"text-center text-footnote text-foreground-hint",
		"group-data-[drop-state=blocked]:text-foreground-muted"
	],
	emptyIdle: ["group-data-[drop-state=allowed]:hidden group-data-[drop-state=blocked]:hidden"],
	emptyAllowed: ["hidden group-data-[drop-state=allowed]:block"],
	emptyBlocked: ["hidden group-data-[drop-state=blocked]:block"]
} });
//#endregion
//#region src/components/task-board/task-board.tsx
function TaskBoardRoot({ className, render, ...props }) {
	const defaultProps = {
		"data-slot": "task-board-root",
		className: cn("flex min-w-max items-start gap-4 pr-4", className)
	};
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function TaskBoardColumn({ className, render, ...props }) {
	const { root } = taskBoardColumn();
	return /* @__PURE__ */ jsx(Collapsible.Root, {
		"data-slot": "task-board-column",
		className: root({ className }),
		render: render ?? /* @__PURE__ */ jsx("section", {}),
		...props
	});
}
function TaskBoardColumnTrigger({ className, ...props }) {
	const { trigger } = taskBoardColumn();
	return /* @__PURE__ */ jsx(Collapsible.Trigger, {
		"data-slot": "task-board-column-trigger",
		className: trigger({ className }),
		...props
	});
}
function TaskBoardColumnHeading({ className, render, ...props }) {
	const { heading } = taskBoardColumn();
	const defaultProps = {
		"data-slot": "task-board-column-heading",
		className: heading({ className })
	};
	return useRender({
		defaultTagName: "span",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function TaskBoardColumnBadge({ status, children, className, render, ...props }) {
	const { badge } = taskBoardColumn();
	const resolvedChildren = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(TaskStatusIcon, { status }), children] });
	const defaultProps = {
		"data-slot": "task-board-column-badge",
		className: cn(badge(), className)
	};
	return useRender({
		defaultTagName: "span",
		render,
		props: mergeProps(defaultProps, props, { children: resolvedChildren })
	});
}
function TaskBoardColumnCount({ className, render, ...props }) {
	const { count } = taskBoardColumn();
	const defaultProps = {
		"data-slot": "task-board-column-count",
		className: count({ className })
	};
	return useRender({
		defaultTagName: "span",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function TaskBoardColumnChevron({ className, render, ...props }) {
	const { chevron } = taskBoardColumn();
	const defaultProps = {
		"data-slot": "task-board-column-chevron",
		className: chevron({ className })
	};
	return useRender({
		defaultTagName: "span",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function TaskBoardColumnPanel({ className, ...props }) {
	const { panel } = taskBoardColumn();
	return /* @__PURE__ */ jsx(Collapsible.Panel, {
		"data-slot": "task-board-column-panel",
		className: panel({ className }),
		...props
	});
}
function TaskBoardColumnItems({ className, render, ...props }) {
	const { items } = taskBoardColumn();
	const defaultProps = {
		"data-slot": "task-board-column-items",
		className: items({ className })
	};
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function TaskBoardColumnEmpty({ className, render, ...props }) {
	const { empty } = taskBoardColumn();
	const defaultProps = {
		"data-slot": "task-board-column-empty",
		className: empty({ className })
	};
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function TaskBoardColumnEmptyIdle({ className, render, ...props }) {
	const { emptyIdle } = taskBoardColumn();
	const defaultProps = {
		"data-slot": "task-board-column-empty-idle",
		className: emptyIdle({ className })
	};
	return useRender({
		defaultTagName: "span",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function TaskBoardColumnEmptyAllowed({ className, render, ...props }) {
	const { emptyAllowed } = taskBoardColumn();
	const defaultProps = {
		"data-slot": "task-board-column-empty-allowed",
		className: emptyAllowed({ className })
	};
	return useRender({
		defaultTagName: "span",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function TaskBoardColumnEmptyBlocked({ className, render, ...props }) {
	const { emptyBlocked } = taskBoardColumn();
	const defaultProps = {
		"data-slot": "task-board-column-empty-blocked",
		className: emptyBlocked({ className })
	};
	return useRender({
		defaultTagName: "span",
		render,
		props: mergeProps(defaultProps, props)
	});
}
//#endregion
//#region src/components/tasks/task-status.recipe.ts
const TASK_STATUS_IDS = [
	"todo",
	"in-progress",
	"in-review",
	"done",
	"closed"
];
/**
* A task status's colour is the `task-status-*` token scale (see
* `foundation.css`): every task-status surface (the pixel, the chip, the badge,
* the Timeline dot) reads the same token for a given status, so they cannot
* drift apart.
*/
/** The soft (washed) background for a status: the chip and the card status. */
const taskStatusSoft = tv({ variants: { status: {
	todo: "bg-task-status-todo-soft",
	"in-progress": "bg-task-status-in-progress-soft",
	"in-review": "bg-task-status-in-review-soft",
	done: "bg-task-status-done-soft",
	closed: "bg-task-status-closed-soft"
} } });
/** The strong (readable-on-soft) ink slot for a status. */
const taskStatusStrong = tv({ variants: { status: {
	todo: "text-task-status-todo-strong",
	"in-progress": "text-task-status-in-progress-strong",
	"in-review": "text-task-status-in-review-strong",
	done: "text-task-status-done-strong",
	closed: "text-task-status-closed-strong"
} } });
//#endregion
//#region src/components/task-card/task-card-status.recipe.ts
const taskCardStatus = tv({ base: [
	"inline-flex min-w-0 shrink-0 touch-manipulation items-center",
	"transition-[filter,opacity] duration-100 outline-none",
	"data-[busy=true]:pointer-events-none data-[busy=true]:cursor-wait data-[busy=true]:opacity-60 data-[busy=true]:disabled:opacity-100",
	"h-[22px] gap-1.5 rounded-chip border-0 py-0 pr-2 pl-1.5",
	"font-sans text-[12px] leading-4 font-semibold text-foreground",
	"[&:not(:has([data-slot=task-card-status-label]))]:hidden",
	"**:data-[slot=task-card-status-label]:inline-flex **:data-[slot=task-card-status-label]:items-center [&_[data-slot=task-card-status-label]]:gap-1.5",
	"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:size-3 [&_svg:not([data-slot=task-status-icon])]:-mx-0.5 [&_svg[data-slot=task-status-icon]]:size-[9px]",
	"[button&]:cursor-pointer [button&]:enabled:hover:press-overlay [button&]:enabled:active:press-overlay",
	"disabled:cursor-default disabled:opacity-100",
	"focus-visible:shadow-raft-focus"
] });
//#endregion
//#region src/components/task-card/task-card.recipe.ts
const taskCard = tv({ slots: {
	root: [
		"relative w-full text-left",
		"transition-all duration-100",
		"data-[interactive=true]:cursor-pointer",
		"data-[disabled=true]:pointer-events-none data-[disabled=true]:transform-none",
		"group-data-[dragging=true]/task-draggable:transform-none",
		"motion-reduce:transform-none motion-reduce:transition-none",
		"rounded-container border border-line-muted bg-layer-card p-3 text-foreground shadow-none",
		"data-[interactive=true]:hover:press-overlay data-[interactive=true]:active:press-overlay",
		"data-[disabled=true]:bg-fill-muted data-[disabled=true]:opacity-100",
		"group-data-[dragging=true]/task-draggable:shadow-raft-float"
	],
	row: ["flex min-w-0 items-start gap-2"],
	body: ["min-w-0 flex-1"],
	meta: ["flex min-w-0 flex-nowrap items-center gap-2", "mb-2"],
	channel: ["min-w-0 truncate", "font-mono text-mono-meta font-normal text-foreground-hint"],
	number: ["shrink-0", "font-mono text-mono-meta font-normal text-foreground-hint"],
	legacy: [
		"shrink-0",
		"inline-flex h-[22px] items-center rounded-chip px-1.5 py-0",
		"inset-ring inset-ring-line-muted",
		"font-mono text-mono-meta font-normal text-foreground-muted"
	],
	title: [
		"line-clamp-3 wrap-break-word",
		"text-body font-semibold text-foreground",
		"in-data-[disabled=true]:text-foreground-disabled"
	],
	description: [
		"line-clamp-2 wrap-break-word",
		"mt-1 text-callout text-foreground-muted",
		"in-data-[disabled=true]:text-foreground-disabled"
	]
} });
//#endregion
//#region src/components/task-card/task-card.tsx
function TaskCard({ busy = false, disabled = false, className, render, ...props }) {
	const { root } = taskCard();
	const interactive = props.onClick != null;
	const defaultProps = {
		"data-slot": "task-card",
		"aria-busy": busy || void 0,
		"aria-disabled": disabled || void 0,
		"data-busy": busy ? "true" : void 0,
		"data-disabled": disabled ? "true" : void 0,
		"data-interactive": interactive ? "true" : void 0,
		className: root({ className })
	};
	return useRender({
		defaultTagName: "article",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function TaskCardRow({ className, render, ...props }) {
	const { row } = taskCard();
	const defaultProps = {
		"data-slot": "task-card-row",
		className: row({ className })
	};
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function TaskCardBody({ className, render, ...props }) {
	const { body } = taskCard();
	const defaultProps = {
		"data-slot": "task-card-body",
		className: body({ className })
	};
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function TaskCardMeta({ className, render, ...props }) {
	const { meta } = taskCard();
	const defaultProps = {
		"data-slot": "task-card-meta",
		className: meta({ className })
	};
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function TaskCardChannel({ className, render, ...props }) {
	const { channel } = taskCard();
	const defaultProps = {
		"data-slot": "task-card-channel",
		className: channel({ className })
	};
	return useRender({
		defaultTagName: "span",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function TaskCardNumber({ className, render, ...props }) {
	const { number } = taskCard();
	const defaultProps = {
		"data-slot": "task-card-number",
		className: number({ className })
	};
	return useRender({
		defaultTagName: "span",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function TaskCardLegacy({ className, render, ...props }) {
	const { legacy } = taskCard();
	const defaultProps = {
		"data-slot": "task-card-legacy",
		className: legacy({ className })
	};
	return useRender({
		defaultTagName: "span",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function TaskCardTitle({ className, render, ...props }) {
	const { title } = taskCard();
	const defaultProps = {
		"data-slot": "task-card-title",
		className: title({ className })
	};
	return useRender({
		defaultTagName: "p",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function TaskCardDescription({ className, render, ...props }) {
	const { description } = taskCard();
	const defaultProps = {
		"data-slot": "task-card-description",
		className: description({ className })
	};
	return useRender({
		defaultTagName: "p",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function TaskCardStatus({ busy = false, status, className, render, children, ...props }) {
	const styles = taskCardStatus();
	const resolvedChildren = children ?? /* @__PURE__ */ jsx(TaskStatusIcon, { status });
	const defaultProps = {
		type: "button",
		"data-slot": "task-card-status",
		"data-busy": busy ? "true" : void 0,
		"aria-busy": busy || void 0,
		className: cn(styles, taskStatusSoft({ status }), className)
	};
	return useRender({
		defaultTagName: "button",
		render,
		props: mergeProps(defaultProps, props, { children: resolvedChildren })
	});
}
//#endregion
//#region src/components/task-dnd/task-dnd.recipe.ts
const taskDnd = tv({ slots: {
	draggable: [
		"group/task-draggable relative cursor-grab touch-none active:cursor-grabbing",
		"outline-none",
		"data-[dragging=true]:z-20 data-[dragging=true]:will-change-transform",
		"data-[disabled=true]:cursor-default data-[disabled=true]:touch-auto",
		"rounded-container",
		"focus-visible:shadow-raft-focus"
	],
	overlay: [
		"group/task-drag-overlay pointer-events-none",
		"z-20",
		"**:data-[slot=task-card]:shadow-raft-float"
	],
	placeholder: [
		"hidden w-full shrink-0",
		"h-(--task-dnd-placeholder-height,72px) rounded-container",
		"border-[1.5px] border-dashed border-line-strong bg-transparent",
		"data-[drop-state=allowed]:block"
	]
} });
//#endregion
//#region src/components/task-dnd/task-dnd.tsx
const TaskDndContext = createContext(null);
const EMPTY_OVER_SNAPSHOT = {
	overId: null,
	overPlacement: null,
	overData: void 0
};
const EMPTY_OVER_STORE = createTaskDndOverStore();
const TaskDndOverContext = createContext(null);
const allowTaskDrop = () => true;
const NO_SENSORS = [];
function TaskDndProvider({ children, disabled = false, isDropAllowed = allowTaskDrop, onMove, onMoveError, onDragStart, onDragMove, onDragOver, onDragCancel, onDragEnd }) {
	const id = useId();
	const [activeId, setActiveId] = useState(null);
	const [activeHeight, setActiveHeight] = useState(null);
	const [overStore] = useState(createTaskDndOverStore);
	const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 5 } }), useSensor(TouchSensor, { activationConstraint: {
		delay: 200,
		tolerance: 5
	} }), useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }));
	const context = useMemo(() => ({
		activeId,
		activeHeight,
		isDropAllowed
	}), [
		activeHeight,
		activeId,
		isDropAllowed
	]);
	const reset = useCallback(() => {
		setActiveId(null);
		setActiveHeight(null);
		overStore.update(EMPTY_OVER_SNAPSHOT);
	}, [overStore]);
	const handleDragStart = useCallback((event) => {
		overStore.update(EMPTY_OVER_SNAPSHOT);
		setActiveId(event.active.id);
		setActiveHeight(event.active.rect.current.initial?.height ?? null);
		onDragStart?.(event);
	}, [overStore, onDragStart]);
	const handleDragMove = useCallback((event) => {
		const current = overStore.getSnapshot();
		overStore.update({
			...current,
			overPlacement: getDropPlacement(event)
		});
		onDragMove?.(event);
	}, [overStore, onDragMove]);
	const handleDragOver = useCallback((event) => {
		overStore.update({
			overId: event.over?.id ?? null,
			overPlacement: getDropPlacement(event),
			overData: event.over?.data.current
		});
		onDragOver?.(event);
	}, [overStore, onDragOver]);
	const handleDragCancel = useCallback((event) => {
		reset();
		onDragCancel?.(event);
	}, [reset, onDragCancel]);
	const handleDragEnd = useCallback((event) => {
		const nextActiveId = event.active.id;
		const nextOverId = event.over?.id;
		const nextOverData = event.over?.data.current;
		if (nextOverId != null && isDropAllowed(nextActiveId, nextOverId, nextOverData)) {
			const details = {
				activeId: nextActiveId,
				overId: nextOverId,
				overData: nextOverData,
				placement: getDropPlacement(event)
			};
			Promise.resolve(onMove?.(details)).catch((error) => {
				onMoveError?.(error, details);
			});
		}
		reset();
		onDragEnd?.(event);
	}, [
		isDropAllowed,
		onMove,
		onMoveError,
		reset,
		onDragEnd
	]);
	return /* @__PURE__ */ jsx(DndContext, {
		id,
		sensors: disabled ? NO_SENSORS : sensors,
		onDragStart: handleDragStart,
		onDragMove: handleDragMove,
		onDragOver: handleDragOver,
		onDragCancel: handleDragCancel,
		onDragEnd: handleDragEnd,
		children: /* @__PURE__ */ jsx(TaskDndContext, {
			value: context,
			children: /* @__PURE__ */ jsx(TaskDndOverContext, {
				value: overStore,
				children
			})
		})
	});
}
function TaskDraggable({ id, disabled = false, dropId, dropData, dropDisabled = false, className, ref: consumerRef, style, ...props }) {
	const { draggable } = taskDnd();
	const { attributes, listeners, setNodeRef, transform, isDragging } = useDraggable({
		id,
		disabled
	});
	const { setNodeRef: setDropNodeRef, isOver: isDropOver } = useDroppable({
		id: dropId ?? id,
		data: dropData,
		disabled: dropId == null || dropDisabled
	});
	const dragStyle = {
		transform: CSS.Translate.toString(transform),
		...style
	};
	const mergedRef = useCallback((node) => {
		setNodeRef(node);
		setDropNodeRef(node);
		assignRef(consumerRef, node);
	}, [
		consumerRef,
		setDropNodeRef,
		setNodeRef
	]);
	const mergedProps = mergeProps(attributes, listeners, props);
	return /* @__PURE__ */ jsx("div", {
		...mergedProps,
		ref: mergedRef,
		"data-slot": "task-draggable",
		"data-dragging": isDragging ? "true" : void 0,
		"data-drop-over": isDropOver ? "true" : void 0,
		"data-disabled": disabled ? "true" : void 0,
		className: draggable({ className }),
		style: dragStyle
	});
}
function assignRef(ref, value) {
	if (typeof ref === "function") ref(value);
	else if (ref) ref.current = value;
}
function TaskDropZone({ id, data, disabled = false, render, ...props }) {
	const context = use(TaskDndContext);
	const { setNodeRef, isOver } = useDroppable({
		id,
		data,
		disabled
	});
	const dropState = getDropState(context, id, isOver, data);
	return useRender({
		defaultTagName: "div",
		render,
		ref: setNodeRef,
		state: { dropState },
		props: {
			"data-slot": "task-drop-zone",
			"data-drop-state": dropState,
			...props
		}
	});
}
function TaskDropPlaceholder({ id, placement, className, render, style, ...props }) {
	const context = use(TaskDndContext);
	const overStore = use(TaskDndOverContext) ?? EMPTY_OVER_STORE;
	const { placeholder } = taskDnd();
	const dropState = useSyncExternalStore(overStore.subscribe, () => getPlaceholderDropState(context, overStore.getSnapshot(), id, placement), () => "idle");
	const placeholderStyle = {
		...style,
		...context?.activeHeight == null ? {} : { "--task-dnd-placeholder-height": `${context.activeHeight}px` }
	};
	return useRender({
		defaultTagName: "div",
		render,
		state: { dropState },
		props: {
			"aria-hidden": true,
			"data-slot": "task-drop-placeholder",
			"data-drop-state": dropState,
			className: placeholder({ className }),
			style: placeholderStyle,
			...props
		}
	});
}
function TaskDragOverlay({ children, className }) {
	const { overlay } = taskDnd();
	return /* @__PURE__ */ jsx(DragOverlay, {
		dropAnimation: null,
		children: children == null ? null : /* @__PURE__ */ jsx("div", {
			"data-slot": "task-drag-overlay",
			"data-dragging": "true",
			className: overlay({ className }),
			children
		})
	});
}
function getDropPlacement(event) {
	const activeRect = event.active.rect.current.translated ?? event.active.rect.current.initial;
	const overRect = event.over?.rect;
	if (activeRect == null || overRect == null) return null;
	return activeRect.top + activeRect.height / 2 < overRect.top + overRect.height / 2 ? "before" : "after";
}
function getDropState(context, id, isOver, overData) {
	const activeId = context?.activeId ?? null;
	if (!isOver || activeId == null) return "idle";
	return context?.isDropAllowed(activeId, id, overData) ? "allowed" : "blocked";
}
function getPlaceholderDropState(context, over, id, placement) {
	return getDropState(context, id, over.overId === id && (placement == null || over.overPlacement === placement), over.overData);
}
function createTaskDndOverStore() {
	let snapshot = EMPTY_OVER_SNAPSHOT;
	const listeners = /* @__PURE__ */ new Set();
	return {
		getSnapshot: () => snapshot,
		subscribe: (listener) => {
			listeners.add(listener);
			return () => listeners.delete(listener);
		},
		update: (nextSnapshot) => {
			if (snapshot.overId === nextSnapshot.overId && snapshot.overPlacement === nextSnapshot.overPlacement && snapshot.overData === nextSnapshot.overData) return;
			snapshot = nextSnapshot;
			listeners.forEach((listener) => listener());
		}
	};
}
//#endregion
//#region src/components/task-list/task-list-section.recipe.ts
const taskListSection = tv({ slots: {
	root: ["space-y-2"],
	trigger: [
		"group flex w-full touch-manipulation items-center text-left outline-none",
		"disabled:cursor-default",
		"min-h-8 justify-start gap-2 rounded-control",
		"font-sans text-footnote font-bold text-foreground-hint",
		"focus-visible:shadow-raft-focus"
	],
	heading: ["flex min-w-0 items-center", "gap-2"],
	badge: [
		"inline-flex items-center gap-2 p-0",
		"font-sans text-footnote font-bold text-foreground-hint",
		"[&>svg]:shrink-0"
	],
	count: ["font-mono text-mono-meta font-normal text-foreground-hint"],
	chevron: [
		"inline-flex shrink-0 -rotate-90 items-center transition-transform",
		"[&_svg]:size-3.5",
		"group-data-panel-open:rotate-0",
		"motion-reduce:transition-none",
		"-order-1 text-foreground-hint",
		"group-hover:text-foreground"
	],
	panel: ["data-ending-style:hidden"],
	items: ["space-y-2"],
	empty: [
		"px-3",
		"flex min-h-16 items-center justify-center py-3",
		"rounded-container border border-dashed border-line-seam",
		"text-center text-footnote text-foreground-hint"
	]
} });
//#endregion
//#region src/components/task-list/task-list.tsx
function TaskListRoot({ className, render, ...props }) {
	const defaultProps = {
		"data-slot": "task-list-root",
		className: cn("space-y-6", className)
	};
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function TaskSection({ className, render, ...props }) {
	const { root } = taskListSection();
	return /* @__PURE__ */ jsx(Collapsible.Root, {
		"data-slot": "task-section",
		className: root({ className }),
		render: render ?? /* @__PURE__ */ jsx("section", {}),
		...props
	});
}
function TaskSectionTrigger({ className, ...props }) {
	const { trigger } = taskListSection();
	return /* @__PURE__ */ jsx(Collapsible.Trigger, {
		"data-slot": "task-section-trigger",
		className: trigger({ className }),
		...props
	});
}
function TaskSectionHeading({ className, render, ...props }) {
	const { heading } = taskListSection();
	const defaultProps = {
		"data-slot": "task-section-heading",
		className: heading({ className })
	};
	return useRender({
		defaultTagName: "span",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function TaskSectionBadge({ status, children, className, render, ...props }) {
	const { badge } = taskListSection();
	const resolvedChildren = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(TaskStatusIcon, { status }), children] });
	const defaultProps = {
		"data-slot": "task-section-badge",
		className: cn(badge(), className)
	};
	return useRender({
		defaultTagName: "span",
		render,
		props: mergeProps(defaultProps, props, { children: resolvedChildren })
	});
}
function TaskSectionCount({ className, render, ...props }) {
	const { count } = taskListSection();
	const defaultProps = {
		"data-slot": "task-section-count",
		className: count({ className })
	};
	return useRender({
		defaultTagName: "span",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function TaskSectionChevron({ className, render, ...props }) {
	const { chevron } = taskListSection();
	const defaultProps = {
		"data-slot": "task-section-chevron",
		className: chevron({ className })
	};
	return useRender({
		defaultTagName: "span",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function TaskSectionPanel({ className, ...props }) {
	const { panel } = taskListSection();
	return /* @__PURE__ */ jsx(Collapsible.Panel, {
		"data-slot": "task-section-panel",
		className: panel({ className }),
		...props
	});
}
function TaskSectionItems({ className, render, ...props }) {
	const { items } = taskListSection();
	const defaultProps = {
		"data-slot": "task-section-items",
		className: items({ className })
	};
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function TaskSectionEmpty({ className, render, ...props }) {
	const { empty } = taskListSection();
	const defaultProps = {
		"data-slot": "task-section-empty",
		className: empty({ className })
	};
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps(defaultProps, props)
	});
}
//#endregion
//#region src/components/tasks/tasks-panel.recipe.ts
const tasksPanel = tv({ slots: {
	root: ["flex min-h-0 min-w-0 flex-1 flex-col", "bg-layer-panel text-foreground"],
	toolbar: [
		"grid shrink-0 grid-cols-[minmax(0,1fr)_auto] items-center gap-2",
		"md:flex md:flex-wrap md:items-center md:justify-between",
		"min-h-14 border-b border-line-seam bg-layer-panel px-5 py-3",
		"max-md:px-4"
	],
	toolbarGroup: ["flex flex-wrap items-center gap-2"],
	toolbarNewTask: ["col-start-1 row-start-1 justify-self-start", "flex flex-wrap items-center gap-2"],
	toolbarFilters: [
		"col-span-2 row-start-2 min-w-0",
		"only:col-auto only:row-auto",
		"md:mr-auto",
		"flex flex-wrap items-center gap-2"
	],
	toolbarView: ["col-start-2 row-start-1 justify-self-end", "flex flex-wrap items-center gap-2"],
	toolbarLabel: [
		"inline-flex items-center",
		"[&_svg]:size-3.5 [&_svg]:shrink-0 [&>svg:last-child]:size-3",
		"h-8 gap-1.5 rounded-control px-2.5",
		"bg-transparent inset-ring inset-ring-line-seam",
		"font-sans text-footnote font-semibold text-foreground-muted whitespace-nowrap"
	],
	viewport: [
		"min-h-0 flex-1 overflow-auto overscroll-contain p-4",
		"pb-[calc(1rem+env(safe-area-inset-bottom,0px))]",
		"bg-layer-panel px-5",
		"max-md:px-4"
	],
	empty: ["flex h-full flex-col items-center justify-center"]
} });
//#endregion
//#region src/components/tasks/tasks-panel.tsx
function TasksPanelRoot({ className, render, ...props }) {
	const { root } = tasksPanel();
	const defaultProps = {
		"data-slot": "tasks-panel-root",
		className: root({ className })
	};
	return useRender({
		defaultTagName: "section",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function TasksPanelToolbar({ className, render, ...props }) {
	const { toolbar } = tasksPanel();
	const defaultProps = {
		"data-slot": "tasks-panel-toolbar",
		className: toolbar({ className })
	};
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function TasksPanelToolbarGroup({ className, render, ...props }) {
	const { toolbarGroup } = tasksPanel();
	const defaultProps = {
		"data-slot": "tasks-panel-toolbar-group",
		className: toolbarGroup({ className })
	};
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function TasksPanelToolbarNewTask({ className, render, ...props }) {
	const { toolbarNewTask } = tasksPanel();
	const defaultProps = {
		"data-slot": "tasks-panel-toolbar-new-task",
		className: toolbarNewTask({ className })
	};
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function TasksPanelToolbarFilters({ className, render, ...props }) {
	const { toolbarFilters } = tasksPanel();
	const defaultProps = {
		"data-slot": "tasks-panel-toolbar-filters",
		className: toolbarFilters({ className })
	};
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function TasksPanelToolbarView({ className, render, ...props }) {
	const { toolbarView } = tasksPanel();
	const defaultProps = {
		"data-slot": "tasks-panel-toolbar-view",
		className: toolbarView({ className })
	};
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function TasksPanelToolbarLabel({ className, render, ...props }) {
	const { toolbarLabel } = tasksPanel();
	const defaultProps = {
		"data-slot": "tasks-panel-toolbar-label",
		className: toolbarLabel({ className })
	};
	return useRender({
		defaultTagName: "span",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function TasksPanelViewport({ className, render, ...props }) {
	const { viewport } = tasksPanel();
	const defaultProps = {
		"data-slot": "tasks-panel-viewport",
		className: viewport({ className })
	};
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function TasksPanelEmpty({ className, render, ...props }) {
	const { empty } = tasksPanel();
	const defaultProps = {
		"data-slot": "tasks-panel-empty",
		className: empty({ className })
	};
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps(defaultProps, props)
	});
}
//#endregion
//#region src/components/tasks/task-loading.recipe.ts
const taskLoading = tv({ slots: {
	list: ["flex flex-col gap-2"],
	row: ["flex min-w-0 flex-col p-3", "gap-2 rounded-container border border-line-muted bg-layer-card shadow-none"]
} });
//#endregion
//#region src/components/tasks/task-loading.tsx
function TaskLoadingList({ className, render, ...props }) {
	const { list } = taskLoading();
	const defaultProps = {
		"data-slot": "task-loading-list",
		"aria-busy": true,
		className: list({ className })
	};
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function TaskLoadingRow({ className, render, ...props }) {
	const { row } = taskLoading();
	const defaultProps = {
		"data-slot": "task-loading-row",
		"aria-hidden": true,
		className: row({ className })
	};
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps(defaultProps, props)
	});
}
//#endregion
//#region src/components/tasks/task-chip.tsx
const taskChip = tv({
	slots: { root: [
		"inline-flex max-w-full items-center gap-1.5 align-baseline overflow-hidden px-2 py-0 [font-size:inherit] leading-[1.4] tracking-normal whitespace-nowrap",
		"[&>svg]:shrink-0 [&>svg]:size-3",
		"no-underline select-text",
		"transition-[filter,opacity] duration-100",
		"focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-line-strong",
		"rounded-chip border-0",
		"font-sans font-semibold text-foreground",
		"[&>svg:not([data-slot=task-status-icon])]:-mx-0.5 [&>svg[data-slot=task-status-icon]]:size-[9px]",
		"hover:brightness-100",
		"[a,button]:cursor-pointer [a,button]:hover:press-overlay [a,button]:active:press-overlay",
		"focus-visible:outline-none focus-visible:shadow-raft-focus"
	] },
	variants: {
		status: {
			todo: { root: ["bg-task-status-todo-soft"] },
			"in-progress": { root: ["bg-task-status-in-progress-soft"] },
			"in-review": { root: ["bg-task-status-in-review-soft"] },
			done: { root: ["bg-task-status-done-soft"] },
			closed: { root: ["bg-task-status-closed-soft"] }
		},
		variant: {
			default: { root: ["h-[22px] gap-1.5 py-0 pr-2 pl-1.5", "text-[12px] leading-4"] },
			inline: {}
		},
		size: {
			default: {},
			sm: {}
		}
	},
	compoundVariants: [
		{
			variant: "inline",
			status: [
				"todo",
				"in-progress",
				"in-review",
				"done",
				"closed"
			],
			class: { root: [
				"items-baseline gap-1.5 rounded-full border py-0 pr-2 pl-1 align-baseline",
				"[font-size:inherit] leading-[1.2em] font-[450] hover:brightness-100",
				"[&>svg]:size-[0.857em] [&>svg]:self-center"
			] }
		},
		{
			variant: "default",
			size: "sm",
			class: { root: ["h-5 gap-1 pr-1.5 pl-1"] }
		},
		{
			variant: "inline",
			status: [
				"todo",
				"in-progress",
				"in-review",
				"done",
				"closed"
			],
			class: { root: ["rounded-sticker border-0 pr-1.5 pl-[3px]", "font-semibold"] }
		}
	],
	defaultVariants: {
		variant: "default",
		size: "default"
	}
});
function TaskChip({ status, loading = false, variant = "default", size = "default", className, render, children, ...props }) {
	const { root } = taskChip({
		status,
		variant,
		size
	});
	const defaultProps = {
		"data-slot": "task-chip",
		"data-inline-reference": "",
		"data-loading": loading ? "true" : void 0,
		className: cn(root({ className }), loading && "pointer-events-none opacity-60"),
		children
	};
	return useRender({
		defaultTagName: "span",
		render,
		props: mergeProps(defaultProps, props),
		state: {
			slot: "task-chip",
			status
		}
	});
}
//#endregion
//#region src/components/tasks/task-status-badge.tsx
/**
* A task status with its label: the status icon + caller-provided text.
*
* This is `TaskChip` showing a status name instead of a task number. It has no
* look of its own: a status badge in the task panel and a task chip in a
* message are one component that differs only in what it shows, so shape,
* size, border and colour all come from `TaskChip`. The slot name is kept for callers that select on it.
*/
function TaskStatusBadgeRoot({ status, children, ...props }) {
	return /* @__PURE__ */ jsxs(TaskChip, {
		status,
		"data-slot": "task-status-badge",
		"data-status": status,
		...props,
		children: [/* @__PURE__ */ jsx(TaskStatusIcon, { status }), children]
	});
}
const TaskStatusBadge = Object.assign(TaskStatusBadgeRoot, {});
//#endregion
//#region src/components/legacy-task-panel/legacy-task-panel.recipe.ts
const legacyTaskPanel = tv({
	slots: {
		frame: ["size-full min-h-[512px]  max-w-md overflow-hidden", "rounded-container border border-line-seam bg-layer-panel shadow-none"],
		icon: [
			"flex shrink-0 items-center justify-center",
			"size-[27px] rounded-sticker bg-fill-muted text-foreground-muted",
			"[&_svg]:size-3.5"
		],
		title: ["flex flex-col items-start gap-0.5 overflow-visible whitespace-normal"],
		body: ["space-y-4 overflow-y-auto px-5 py-4"],
		status: ["flex flex-wrap items-center gap-2"],
		section: ["p-4", "space-y-3 rounded-container border border-line-muted bg-layer-card shadow-none"],
		field: [],
		fieldLabel: ["mb-0.5 font-sans text-footnote font-medium text-foreground-hint"],
		fieldTitle: ["m-0 wrap-break-word", "text-body font-semibold text-foreground"],
		fieldText: ["m-0 whitespace-pre-wrap wrap-break-word", "text-subhead text-foreground-muted"],
		meta: ["p-4 text-sm", "space-y-0 rounded-container border border-line-muted bg-layer-card px-4 py-2 shadow-none"],
		metaRow: ["flex justify-between gap-3", "min-h-8 items-center"],
		metaLabel: ["font-sans text-footnote font-medium text-foreground-hint"],
		metaValue: ["text-right", "text-callout text-foreground"]
	},
	variants: { framed: {
		true: {},
		false: {}
	} }
});
//#endregion
//#region src/components/legacy-task-panel/legacy-task-panel.tsx
function LegacyTaskPanelRoot({ className, framed = false, render, children, ...props }) {
	if (!framed) return /* @__PURE__ */ jsx(ThreadPanelRoot, {
		"data-slot": "legacy-task-panel-root",
		className,
		render,
		...props,
		children
	});
	return /* @__PURE__ */ jsx(LegacyTaskPanelFrame, {
		className,
		render,
		...props,
		children
	});
}
function LegacyTaskPanelFrame({ className, render, children, ...props }) {
	const { frame } = legacyTaskPanel({ framed: true });
	const defaultProps = {
		"data-slot": "legacy-task-panel-frame",
		className: frame({ className }),
		children: /* @__PURE__ */ jsx(ThreadPanelRoot, {
			"data-slot": "legacy-task-panel-root",
			children
		})
	};
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function LegacyTaskPanelHeader({ className, ...props }) {
	return /* @__PURE__ */ jsx(ThreadPanelHeader, {
		"data-slot": "legacy-task-panel-header",
		className,
		...props
	});
}
function LegacyTaskPanelIcon({ className, render, children, ...props }) {
	const { icon } = legacyTaskPanel();
	const defaultProps = {
		"data-slot": "legacy-task-panel-icon",
		className: icon({ className }),
		children: children ?? /* @__PURE__ */ jsx(FileText, {
			"aria-hidden": true,
			size: 18
		})
	};
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function LegacyTaskPanelTitle({ className, ...props }) {
	const { title } = legacyTaskPanel();
	return /* @__PURE__ */ jsx(ThreadPanelTitle, {
		"data-slot": "legacy-task-panel-title",
		className: title({ className }),
		...props
	});
}
function LegacyTaskPanelTitleMeta({ className, ...props }) {
	return /* @__PURE__ */ jsx(ThreadPanelTitleMeta, {
		"data-slot": "legacy-task-panel-title-meta",
		className,
		...props
	});
}
function LegacyTaskPanelActions({ className, ...props }) {
	return /* @__PURE__ */ jsx(ThreadPanelActions, {
		"data-slot": "legacy-task-panel-actions",
		className,
		...props
	});
}
function LegacyTaskPanelBody({ className, children, ...props }) {
	const { body } = legacyTaskPanel();
	return /* @__PURE__ */ jsx(ThreadPanelContent, {
		"data-slot": "legacy-task-panel-content",
		...props,
		children: /* @__PURE__ */ jsx(ThreadPanelBody, {
			"data-slot": "legacy-task-panel-body",
			className: body({ className }),
			children
		})
	});
}
function LegacyTaskPanelStatus({ className, render, ...props }) {
	const { status } = legacyTaskPanel();
	const defaultProps = {
		"data-slot": "legacy-task-panel-status",
		className: status({ className })
	};
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function LegacyTaskPanelSection({ className, render, ...props }) {
	const { section } = legacyTaskPanel();
	const defaultProps = {
		"data-slot": "legacy-task-panel-section",
		className: section({ className })
	};
	return useRender({
		defaultTagName: "section",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function LegacyTaskPanelField({ className, render, ...props }) {
	const { field } = legacyTaskPanel();
	const defaultProps = {
		"data-slot": "legacy-task-panel-field",
		className: field({ className })
	};
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function LegacyTaskPanelFieldLabel({ className, render, ...props }) {
	const { fieldLabel } = legacyTaskPanel();
	const defaultProps = {
		"data-slot": "legacy-task-panel-field-label",
		className: fieldLabel({ className })
	};
	return useRender({
		defaultTagName: "p",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function LegacyTaskPanelFieldTitle({ className, render, ...props }) {
	const { fieldTitle } = legacyTaskPanel();
	const defaultProps = {
		"data-slot": "legacy-task-panel-field-title",
		className: fieldTitle({ className })
	};
	return useRender({
		defaultTagName: "h3",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function LegacyTaskPanelFieldText({ className, render, ...props }) {
	const { fieldText } = legacyTaskPanel();
	const defaultProps = {
		"data-slot": "legacy-task-panel-field-text",
		className: fieldText({ className })
	};
	return useRender({
		defaultTagName: "p",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function LegacyTaskPanelMeta({ className, render, ...props }) {
	const { meta } = legacyTaskPanel();
	const defaultProps = {
		"data-slot": "legacy-task-panel-meta",
		className: meta({ className })
	};
	return useRender({
		defaultTagName: "section",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function LegacyTaskPanelMetaRow({ className, render, ...props }) {
	const { metaRow } = legacyTaskPanel();
	const defaultProps = {
		"data-slot": "legacy-task-panel-meta-row",
		className: metaRow({ className })
	};
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function LegacyTaskPanelMetaLabel({ className, render, ...props }) {
	const { metaLabel } = legacyTaskPanel();
	const defaultProps = {
		"data-slot": "legacy-task-panel-meta-label",
		className: metaLabel({ className })
	};
	return useRender({
		defaultTagName: "span",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function LegacyTaskPanelMetaValue({ className, render, ...props }) {
	const { metaValue } = legacyTaskPanel();
	const defaultProps = {
		"data-slot": "legacy-task-panel-meta-value",
		className: metaValue({ className })
	};
	return useRender({
		defaultTagName: "span",
		render,
		props: mergeProps(defaultProps, props)
	});
}
//#endregion
//#region src/components/activity-inbox/activity-inbox-shell.recipe.ts
const activityInboxShell = tv({ slots: {
	panel: ["flex h-full min-h-0 flex-1 flex-col overflow-hidden", "bg-layer-panel font-sans text-foreground"],
	viewport: ["relative flex-1 overflow-y-auto", "bg-layer-panel p-0 pb-[env(safe-area-inset-bottom,0px)]"],
	loadingMore: ["py-3 text-center", "text-caption text-foreground-hint"]
} });
//#endregion
//#region src/components/activity-inbox/activity-inbox-shell.tsx
function ActivityInboxPanel({ className, ...props }) {
	const { panel } = activityInboxShell();
	return /* @__PURE__ */ jsx(Panel, {
		render: /* @__PURE__ */ jsx("div", {}),
		edge: "inset",
		"data-slot": "activity-inbox-root",
		className: panel({ className }),
		...props
	});
}
function ActivityInboxViewport({ className, ...props }) {
	const { viewport } = activityInboxShell();
	return /* @__PURE__ */ jsx("div", {
		"data-slot": "activity-inbox-viewport",
		className: viewport({ className }),
		...props
	});
}
function ActivityInboxLoadingMore({ className, ...props }) {
	const { loadingMore } = activityInboxShell();
	return /* @__PURE__ */ jsx("div", {
		"data-slot": "activity-inbox-loading-more",
		className: loadingMore({ className }),
		...props
	});
}
//#endregion
//#region src/components/activity-inbox/activity-inbox-sidebar.recipe.ts
const activityInboxSidebar = tv({ slots: {
	sidebar: [
		"shrink-0",
		"max-md:hidden",
		"md:flex",
		"w-56 border-r border-line-seam bg-layer-panel"
	],
	sidebarBody: ["bg-layer-panel"],
	sidebarContent: [
		"p-3",
		"[&_[data-slot=sidebar-group-label]]:mt-5 [&_[data-slot=sidebar-group-label]]:mb-1",
		"**:data-[slot=sidebar-group-label]:flex **:data-[slot=sidebar-group-label]:items-center [&_[data-slot=sidebar-group-label]]:gap-2",
		"[&_[data-slot=sidebar-group-label]]:px-2 [&_[data-slot=sidebar-group-label]]:py-0",
		"**:data-[slot=sidebar-group-label]:font-sans **:data-[slot=sidebar-group-label]:text-footnote [&_[data-slot=sidebar-group-label]]:font-bold",
		"**:data-[slot=sidebar-group-label]:text-foreground-hint **:data-[slot=sidebar-group-label]:normal-case [&_[data-slot=sidebar-group-label]]:tracking-normal",
		"**:data-activity-inbox-show-all:font-sans **:data-activity-inbox-show-all:text-footnote [&_[data-activity-inbox-show-all]]:font-semibold",
		"[&_[data-activity-inbox-show-all]]:tracking-normal **:data-activity-inbox-show-all:whitespace-nowrap **:data-activity-inbox-show-all:normal-case",
		"**:data-activity-inbox-show-all:text-foreground **:data-activity-inbox-show-all:underline **:data-activity-inbox-show-all:decoration-[1.5px] **:data-activity-inbox-show-all:underline-offset-[3px]"
	]
} });
//#endregion
//#region src/components/activity-inbox/activity-inbox-sidebar.tsx
function ActivityInboxSidebar({ className, children, ...props }) {
	const { sidebar, sidebarBody, sidebarContent } = activityInboxSidebar();
	return /* @__PURE__ */ jsx(SidebarRoot, {
		render: /* @__PURE__ */ jsx("aside", {}),
		"data-slot": "activity-inbox-sidebar",
		className: sidebar({ className }),
		...props,
		children: /* @__PURE__ */ jsx(SidebarBody, {
			className: sidebarBody(),
			children: /* @__PURE__ */ jsx(SidebarContent, {
				className: sidebarContent(),
				children
			})
		})
	});
}
//#endregion
//#region src/components/activity-inbox/activity-inbox-toolbar.recipe.ts
const activityInboxToolbar = tv({ slots: {
	controls: ["flex shrink-0 flex-nowrap items-center gap-2", "bg-layer-panel px-4 py-3"],
	selectionToolbar: [
		"flex min-h-11 shrink-0 items-center gap-2",
		"max-md:flex-wrap max-md:py-2",
		"md:h-11 md:flex-nowrap md:py-0",
		"border-b border-line-muted bg-layer-panel px-4",
		"**:data-[activity-inbox-action=sort]:text-foreground-muted",
		"[&_[data-activity-inbox-action=sort]:hover]:text-foreground"
	],
	selectionCount: ["mr-1", "text-footnote font-bold text-foreground"]
} });
//#endregion
//#region src/components/activity-inbox/activity-inbox-toolbar.tsx
function ActivityInboxControls({ className, ...props }) {
	const { controls } = activityInboxToolbar();
	return /* @__PURE__ */ jsx("div", {
		"data-slot": "activity-inbox-controls",
		className: controls({ className }),
		...props
	});
}
function ActivityInboxSelectionToolbar({ className, ...props }) {
	const { selectionToolbar } = activityInboxToolbar();
	return /* @__PURE__ */ jsx("div", {
		"data-slot": "activity-inbox-selection-toolbar",
		className: selectionToolbar({ className }),
		...props
	});
}
function ActivityInboxSelectionCount({ className, ...props }) {
	const { selectionCount } = activityInboxToolbar();
	return /* @__PURE__ */ jsx("span", {
		"data-slot": "activity-inbox-selection-count",
		className: selectionCount({ className }),
		...props
	});
}
//#endregion
//#region src/components/inbox-item/inbox-item.recipe.ts
const inboxItem = tv({ slots: {
	item: [
		"relative grid w-full grid-cols-[minmax(0,1fr)_auto] items-start gap-3 p-3 text-left",
		"has-data-[slot=inbox-item-selection]:grid-cols-[auto_minmax(0,1fr)_auto]",
		"transition-colors",
		"gap-x-3 gap-y-0 rounded-none border-0 bg-transparent px-4 py-3 shadow-none",
		"before:pointer-events-none before:absolute before:top-0 before:right-0 before:left-4 before:hidden before:border-t before:border-line-muted",
		"[[data-slot=inbox-item]+&]:before:block has-data-[slot=inbox-item-selection]:before:left-11",
		"hover:bg-fill-pressed",
		"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]:inset-ring-2 has-[[data-slot=inbox-item-open]:focus-visible]:inset-ring-foreground"
	],
	itemTrigger: ["absolute inset-0 z-0 outline-none"],
	itemSelection: ["relative z-10 mt-0.5 flex size-4 shrink-0 items-center justify-center"],
	itemContent: ["pointer-events-none relative z-10 min-w-0 flex-1 text-left"],
	itemContext: [
		"flex min-w-0 items-center",
		"mb-0.5 gap-1.5 py-0",
		"text-caption text-foreground-hint"
	],
	itemSubtitle: [
		"min-w-0",
		"mt-0.5 mb-0 py-0",
		"text-caption text-foreground-hint"
	],
	itemHeading: ["flex min-w-0 items-start gap-2", "mb-0"],
	itemTitle: [
		"relative line-clamp-2 min-w-0 flex-1 pl-[18px]",
		"[&>svg]:absolute [&>svg]:top-[3px] [&>svg]:left-0 [&>svg]:size-3.5",
		"font-sans text-subhead font-semibold text-foreground-muted",
		"group-data-[unread=true]/inbox-item:font-bold group-data-[unread=true]/inbox-item:text-foreground",
		"[&>svg]:text-foreground-hint"
	],
	itemTrailing: [
		"pointer-events-none relative z-10",
		"flex shrink-0",
		"mt-0 flex-col items-end gap-2 pt-px",
		"max-md:flex-col max-md:items-end max-md:gap-2",
		"after:hidden after:size-[9px] after:shrink-0 after:rounded-[2px] after:border-[1.5px] after:border-sticker-ink after:bg-accent-400",
		"group-data-[unread=true]/inbox-item:after:block"
	],
	itemTimestamp: ["shrink-0 whitespace-nowrap text-right tabular-nums", "font-mono text-mono-meta text-foreground-hint"],
	itemBody: ["line-clamp-2", "mt-0.5 text-callout text-foreground-muted"],
	itemMessage: ["min-w-0", "mt-0.5 line-clamp-2 text-callout text-foreground-muted"],
	itemSender: ["font-semibold text-foreground"],
	itemMetadata: ["flex min-h-5 flex-wrap items-center gap-1.5", "mt-2"],
	itemActions: [
		"pointer-events-auto flex shrink-0 items-center",
		"order-last gap-0.5",
		"*:data-[slot=panel-action]:h-8 *:data-[slot=panel-action]:min-w-8 [&>[data-slot=panel-action]>svg]:size-[18px]",
		"*:data-[slot=panel-toggle-action]:h-8 *:data-[slot=panel-toggle-action]:min-w-8 [&>[data-slot=panel-toggle-action]>svg]:size-[18px]",
		"[&>[data-slot=panel-toggle-action][data-pressed]]:border-transparent",
		"[&>[data-slot=panel-toggle-action][data-pressed]]:bg-transparent",
		"[&>[data-slot=panel-toggle-action][data-pressed]]:text-foreground",
		"[&>[data-slot=panel-toggle-action][data-pressed]:hover]:bg-fill-pressed"
	]
} });
//#endregion
//#region src/components/inbox-item/inbox-item.tsx
const InboxItemDisabledContext = createContext(false);
function InboxItem({ active = false, className, disabled = false, render, ...props }) {
	const { item } = inboxItem();
	const defaultProps = {
		"aria-disabled": disabled || void 0,
		"data-active": active ? "true" : void 0,
		"data-disabled": disabled ? "true" : void 0,
		"data-slot": "inbox-item",
		className: item({ className: `group/inbox-item ${className ?? ""}`.trim() })
	};
	const element = useRender({
		defaultTagName: "div",
		render,
		props: mergeProps(defaultProps, props)
	});
	return /* @__PURE__ */ jsx(InboxItemDisabledContext.Provider, {
		value: disabled,
		children: element
	});
}
function InboxItemTrigger({ className, onClick, render, ...props }) {
	const disabled = useContext(InboxItemDisabledContext);
	const { itemTrigger } = inboxItem();
	const defaultProps = {
		type: render ? void 0 : "button",
		"aria-disabled": disabled || void 0,
		"data-disabled": disabled ? "true" : void 0,
		"data-slot": "inbox-item-open",
		disabled: render ? void 0 : disabled,
		tabIndex: disabled && render ? -1 : void 0,
		className: itemTrigger({ className }),
		onClick: (event) => {
			if (disabled) {
				event.preventDefault();
				event.stopPropagation();
				return;
			}
			onClick?.(event);
		}
	};
	return useRender({
		defaultTagName: "button",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function InboxItemSelection({ className, render, ...props }) {
	const { itemSelection } = inboxItem();
	const defaultProps = {
		"data-slot": "inbox-item-selection",
		className: itemSelection({ className })
	};
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function InboxItemContent({ className, render, ...props }) {
	const { itemContent } = inboxItem();
	const defaultProps = {
		"data-slot": "inbox-item-content",
		className: itemContent({ className })
	};
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function InboxItemContext({ className, render, ...props }) {
	const { itemContext } = inboxItem();
	const defaultProps = {
		"data-slot": "inbox-item-context",
		className: itemContext({ className })
	};
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function InboxItemSubtitle({ className, render, ...props }) {
	const { itemSubtitle } = inboxItem();
	const defaultProps = {
		"data-slot": "inbox-item-subtitle",
		className: itemSubtitle({ className })
	};
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function InboxItemHeading({ className, render, ...props }) {
	const { itemHeading } = inboxItem();
	const defaultProps = {
		"data-slot": "inbox-item-heading",
		className: itemHeading({ className })
	};
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function InboxItemTitle({ className, render, ...props }) {
	const { itemTitle } = inboxItem();
	const defaultProps = {
		"data-slot": "inbox-item-title",
		className: itemTitle({ className })
	};
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function InboxItemTrailing({ className, render, ...props }) {
	const { itemTrailing } = inboxItem();
	const defaultProps = {
		"data-slot": "inbox-item-trailing",
		className: itemTrailing({ className })
	};
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function InboxItemTimestamp({ className, render, ...props }) {
	const { itemTimestamp } = inboxItem();
	const defaultProps = {
		"data-slot": "inbox-item-timestamp",
		className: itemTimestamp({ className })
	};
	return useRender({
		defaultTagName: "span",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function InboxItemBody({ className, render, ...props }) {
	const { itemBody } = inboxItem();
	const defaultProps = {
		"data-slot": "inbox-item-body",
		className: itemBody({ className })
	};
	return useRender({
		defaultTagName: "p",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function InboxItemMessage({ className, render, ...props }) {
	const { itemMessage } = inboxItem();
	const defaultProps = {
		"data-slot": "inbox-item-message",
		className: itemMessage({ className })
	};
	return useRender({
		defaultTagName: "p",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function InboxItemSender({ className, render, ...props }) {
	const { itemSender } = inboxItem();
	const defaultProps = {
		"data-slot": "inbox-item-sender",
		className: itemSender({ className })
	};
	return useRender({
		defaultTagName: "span",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function InboxItemMetadata({ className, render, ...props }) {
	const { itemMetadata } = inboxItem();
	const defaultProps = {
		"data-slot": "inbox-item-metadata",
		className: itemMetadata({ className })
	};
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function InboxItemActions({ className, render, ...props }) {
	const { itemActions } = inboxItem();
	const defaultProps = {
		"data-slot": "inbox-item-actions",
		className: itemActions({ className })
	};
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps(defaultProps, props)
	});
}
//#endregion
//#region src/components/search/search.recipe.ts
const search = tv({ slots: {
	frame: ["flex h-full min-h-0 flex-1 flex-col", "bg-layer-panel text-foreground"],
	filtersRow: ["shrink-0", "border-b border-line-seam bg-layer-panel px-4 py-3"],
	viewport: ["min-h-0 flex-1 overflow-y-auto p-4", "bg-layer-panel px-0 pt-0 pb-4"],
	summary: ["block", "mb-0 px-4 pt-2 font-sans text-footnote text-foreground-hint"],
	section: ["mb-0"],
	sectionHeading: [
		"py-2",
		"flex items-center gap-2 px-4 pt-5 pb-2",
		"font-sans text-footnote font-bold text-foreground-hint"
	],
	list: ["flex flex-col", "gap-0"]
} });
//#endregion
//#region src/components/search/search.tsx
function SearchShellRoot({ className, edge = "inset", render, ...props }) {
	const { frame } = search();
	return /* @__PURE__ */ jsx(Panel, {
		...props,
		render: render ?? /* @__PURE__ */ jsx("div", {}),
		edge,
		className: frame({ className })
	});
}
function SearchShellFilters({ className, ...props }) {
	const { filtersRow } = search();
	return /* @__PURE__ */ jsx("div", {
		"data-slot": "search-shell-filters",
		className: filtersRow({ className }),
		...props
	});
}
function SearchShellViewport({ className, ...props }) {
	const { viewport } = search();
	return /* @__PURE__ */ jsx("div", {
		"data-slot": "search-shell-viewport",
		className: viewport({ className }),
		...props
	});
}
function SearchResultsSummary({ className, render, ...props }) {
	const { summary } = search();
	const defaultProps = {
		"data-slot": "search-results-summary",
		className: summary({ className })
	};
	return useRender({
		defaultTagName: "span",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function SearchResultsSection({ className, render, ...props }) {
	const { section } = search();
	const defaultProps = {
		"data-slot": "search-results-section",
		className: section({ className })
	};
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function SearchResultsSectionHeading({ className, render, ...props }) {
	const { sectionHeading } = search();
	const defaultProps = {
		"data-slot": "search-results-section-heading",
		className: sectionHeading({ className })
	};
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function SearchResultsList({ className, render, ...props }) {
	const { list } = search();
	const defaultProps = {
		"data-slot": "search-results-list",
		className: list({ className })
	};
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps(defaultProps, props)
	});
}
//#endregion
//#region src/components/search/search-entity.recipe.ts
const searchEntity = tv({ slots: {
	entity: [
		"flex min-w-0 w-full items-center gap-3 p-3 text-left transition-colors",
		"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-muted",
		"hover:bg-fill-pressed active:bg-fill-pressed",
		"disabled:cursor-default disabled:hover:bg-transparent disabled:active:bg-transparent",
		"data-[selected=true]:bg-primary-soft data-[selected=true]:hover:bg-primary-soft",
		"outline-none focus-visible:inset-ring-2 focus-visible:inset-ring-foreground"
	],
	entityLeading: ["relative flex shrink-0"],
	entityIcon: [
		"flex items-center justify-center overflow-hidden",
		"size-[27px] rounded-sticker bg-fill-muted text-foreground-muted",
		"[&_svg]:size-3.5"
	],
	entityActivity: [
		"absolute inline-block shrink-0",
		"right-[-3px] bottom-[-3px] size-[9px] rounded-[2px]",
		"border-[1.5px] border-sticker-ink bg-presence-online",
		"shadow-[0_0_0_2px_var(--layer-panel)]"
	],
	entityContent: ["min-w-0 flex-1", "flex flex-col gap-0.5"],
	entityHeader: ["flex min-w-0 items-center gap-2"],
	entityTitle: [
		"truncate",
		"font-sans text-body font-semibold text-foreground",
		"data-muted:text-foreground-hint"
	],
	entityDescription: [
		"block truncate",
		"text-callout text-foreground-muted",
		"data-muted:text-foreground-hint"
	]
} });
//#endregion
//#region src/components/search/search-entity.tsx
function SearchEntityResult({ selected = false, className, render, ...props }) {
	const { entity } = searchEntity();
	const defaultProps = {
		"data-slot": "search-entity-result",
		"data-selected": selected ? "true" : void 0,
		className: entity({ className }),
		type: render ? void 0 : "button"
	};
	return useRender({
		defaultTagName: "button",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function SearchEntityResultContent({ className, render, ...props }) {
	const { entityContent } = searchEntity();
	const defaultProps = {
		"data-slot": "search-entity-result-content",
		className: entityContent({ className })
	};
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function SearchEntityResultHeader({ className, render, ...props }) {
	const { entityHeader } = searchEntity();
	const defaultProps = {
		"data-slot": "search-entity-result-header",
		className: entityHeader({ className })
	};
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function SearchEntityResultLeading({ className, render, ...props }) {
	const { entityLeading } = searchEntity();
	const defaultProps = {
		"data-slot": "search-entity-result-leading",
		className: entityLeading({ className })
	};
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function SearchEntityResultIcon({ className, render, ...props }) {
	const { entityIcon } = searchEntity();
	const defaultProps = {
		"data-slot": "search-entity-result-icon",
		className: entityIcon({ className })
	};
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function SearchEntityResultActivity({ className, render, ...props }) {
	const { entityActivity } = searchEntity();
	const defaultProps = {
		"data-slot": "search-entity-result-activity",
		className: entityActivity({ className })
	};
	return useRender({
		defaultTagName: "span",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function SearchEntityResultTitle({ muted = false, className, render, ...props }) {
	const { entityTitle } = searchEntity();
	const defaultProps = {
		"data-slot": "search-entity-result-title",
		"data-muted": muted ? "" : void 0,
		className: entityTitle({ className })
	};
	return useRender({
		defaultTagName: "span",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function SearchEntityResultDescription({ muted = false, className, render, ...props }) {
	const { entityDescription } = searchEntity();
	const defaultProps = {
		"data-slot": "search-entity-result-description",
		"data-muted": muted ? "" : void 0,
		className: entityDescription({ className })
	};
	return useRender({
		defaultTagName: "span",
		render,
		props: mergeProps(defaultProps, props)
	});
}
//#endregion
//#region src/components/search/search-message.recipe.ts
const searchMessage = tv({ slots: {
	message: [
		"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-muted",
		"hover:bg-fill-pressed active:bg-fill-pressed",
		"disabled:cursor-default disabled:hover:bg-transparent disabled:active:bg-transparent",
		"data-[selected=true]:bg-primary-soft data-[selected=true]:hover:bg-primary-soft",
		"outline-none focus-visible:inset-ring-2 focus-visible:inset-ring-foreground"
	],
	messageHeader: [
		"flex items-center",
		"min-w-0 flex-nowrap gap-1.5",
		"font-mono text-mono-meta text-foreground-hint"
	],
	messageBody: ["min-w-0 line-clamp-2", "mt-0.5 font-sans text-callout text-foreground-muted"],
	messageMeta: ["min-w-0 truncate"],
	messageThreadMeta: ["inline-flex items-center gap-1", "shrink-0 [&_svg]:size-3"],
	messageSender: [
		"inline-flex items-center",
		"order-first shrink-0 gap-1.5 whitespace-nowrap",
		"font-sans text-callout font-bold text-foreground"
	],
	messageTimestamp: ["ml-auto shrink-0 whitespace-nowrap"],
	messageMatch: searchHit
} });
//#endregion
//#region src/components/search/search-message.tsx
function SearchMessageResultBase({ nested = false, selected = false, className, render, ...props }) {
	const { message } = searchMessage();
	const defaultProps = {
		"data-slot": "search-message-result",
		"data-nested": nested ? "true" : void 0,
		"data-selected": selected ? "true" : void 0,
		className: message({ className }),
		type: render ? void 0 : "button"
	};
	return useRender({
		defaultTagName: "button",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function SearchMessageResult(props) {
	return /* @__PURE__ */ jsx(SearchMessageResultBase, { ...props });
}
function SearchThreadMessageResult(props) {
	return /* @__PURE__ */ jsx(SearchMessageResultBase, {
		...props,
		nested: true
	});
}
function SearchMessageResultHeader({ className, render, ...props }) {
	const { messageHeader } = searchMessage();
	const defaultProps = {
		"data-slot": "search-message-result-header",
		className: messageHeader({ className })
	};
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function SearchMessageResultBody({ className, render, ...props }) {
	const { messageBody } = searchMessage();
	const defaultProps = {
		"data-slot": "search-message-result-body",
		className: messageBody({ className })
	};
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function SearchMessageResultMeta({ className, render, ...props }) {
	const { messageMeta } = searchMessage();
	const defaultProps = {
		"data-slot": "search-message-result-meta",
		className: messageMeta({ className })
	};
	return useRender({
		defaultTagName: "span",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function SearchMessageResultThreadMeta({ className, render, ...props }) {
	const { messageThreadMeta } = searchMessage();
	const defaultProps = {
		"data-slot": "search-message-result-thread-meta",
		className: messageThreadMeta({ className })
	};
	return useRender({
		defaultTagName: "span",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function SearchMessageResultSender({ className, render, ...props }) {
	const { messageSender } = searchMessage();
	const defaultProps = {
		"data-slot": "search-message-result-sender",
		className: messageSender({ className })
	};
	return useRender({
		defaultTagName: "span",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function SearchMessageResultTimestamp({ className, render, ...props }) {
	const { messageTimestamp } = searchMessage();
	const defaultProps = {
		"data-slot": "search-message-result-timestamp",
		className: messageTimestamp({ className })
	};
	return useRender({
		defaultTagName: "span",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function SearchMessageResultMatch({ className, render, ...props }) {
	const { messageMatch } = searchMessage();
	const defaultProps = {
		"data-slot": "search-message-result-match",
		className: messageMatch({ className })
	};
	return useRender({
		defaultTagName: "mark",
		render,
		props: mergeProps(defaultProps, props)
	});
}
//#endregion
//#region src/components/search/search-thread.recipe.ts
const searchThread = tv({ slots: {
	thread: [
		"overflow-hidden transition-colors",
		"relative rounded-none border-0 bg-transparent 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-muted"
	],
	threadHeader: ["py-2", "px-4 pt-3 pb-1"],
	threadMeta: [
		"flex flex-wrap items-center",
		"mb-0.5 gap-1.5",
		"font-mono text-mono-meta font-normal text-foreground-hint"
	],
	threadTimestamp: ["normal-case", "ml-auto"],
	threadTitle: ["font-sans text-callout font-semibold text-foreground"],
	threadMessages: ["flex flex-col [&>*:first-child]:border-t-0", "border-t-0 bg-transparent"]
} });
//#endregion
//#region src/components/search/search-thread.tsx
function SearchThreadResult({ selected = false, className, render, ...props }) {
	const { thread } = searchThread();
	const defaultProps = {
		"data-slot": "search-thread-result",
		"data-selected": selected ? "true" : void 0,
		className: thread({ className })
	};
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function SearchThreadResultHeader({ className, render, ...props }) {
	const { threadHeader } = searchThread();
	const defaultProps = {
		"data-slot": "search-thread-result-header",
		className: threadHeader({ className })
	};
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function SearchThreadResultMeta({ className, render, ...props }) {
	const { threadMeta } = searchThread();
	const defaultProps = {
		"data-slot": "search-thread-result-meta",
		className: threadMeta({ className })
	};
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function SearchThreadResultTimestamp({ className, render, ...props }) {
	const { threadTimestamp } = searchThread();
	const defaultProps = {
		"data-slot": "search-thread-result-timestamp",
		className: threadTimestamp({ className })
	};
	return useRender({
		defaultTagName: "span",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function SearchThreadResultTitle({ className, render, ...props }) {
	const { threadTitle } = searchThread();
	const defaultProps = {
		"data-slot": "search-thread-result-title",
		className: threadTitle({ className })
	};
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps(defaultProps, props)
	});
}
function SearchThreadResultMessages({ className, render, ...props }) {
	const { threadMessages } = searchThread();
	const defaultProps = {
		"data-slot": "search-thread-result-messages",
		className: threadMessages({ className })
	};
	return useRender({
		defaultTagName: "div",
		render,
		props: mergeProps(defaultProps, props)
	});
}
//#endregion
//#region src/lib/theme/theme-provider.tsx
function readStoredMode(storageKey, fallback) {
	if (typeof window === "undefined" || !storageKey) return fallback;
	const stored = window.localStorage.getItem(storageKey);
	return stored === "light" || stored === "dark" || stored === "system" ? stored : fallback;
}
function subscribeSystemMode(onStoreChange) {
	if (typeof window === "undefined") return () => void 0;
	const media = window.matchMedia("(prefers-color-scheme: dark)");
	media.addEventListener("change", onStoreChange);
	return () => media.removeEventListener("change", onStoreChange);
}
function getSystemMode() {
	if (typeof window === "undefined") return "light";
	return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
}
function ThemeProvider({ mode, defaultMode = "light", onModeChange, storageKey, syncDom = true, children }) {
	const [uncontrolledMode, setUncontrolledMode] = useState(() => readStoredMode(storageKey, defaultMode));
	const activeMode = mode ?? uncontrolledMode;
	const systemMode = useSyncExternalStore(subscribeSystemMode, getSystemMode, () => "light");
	const resolvedMode = activeMode === "system" ? systemMode : activeMode;
	const setMode = useCallback((nextMode) => {
		if (mode === void 0) {
			setUncontrolledMode(nextMode);
			if (typeof window !== "undefined" && storageKey) window.localStorage.setItem(storageKey, nextMode);
		}
		onModeChange?.(nextMode);
	}, [
		mode,
		onModeChange,
		storageKey
	]);
	const themeState = useMemo(() => ({
		mode: activeMode,
		resolvedMode,
		setMode
	}), [
		activeMode,
		resolvedMode,
		setMode
	]);
	useEffect(() => {
		if (!syncDom) return;
		const root = document.documentElement;
		root.classList.toggle("light", resolvedMode === "light");
		root.classList.toggle("dark", resolvedMode === "dark");
		root.style.colorScheme = resolvedMode;
	}, [resolvedMode, syncDom]);
	return /* @__PURE__ */ jsx(ThemeStateContext.Provider, {
		value: themeState,
		children
	});
}
//#endregion
export { ActivityInboxControls, ActivityInboxLoadingMore, ActivityInboxPanel, ActivityInboxSelectionCount, ActivityInboxSelectionToolbar, ActivityInboxSidebar, ActivityInboxViewport, AlertDialog, AlertDialogAction, AlertDialogBody, AlertDialogCancel, AlertDialogClose, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AppRailFooter, AppRailHeader, AppRailItem, AppRailItemAttention, AppRailItemBadge, AppRailItemIcon, AppRailItemIndicator, AppRailItemLabel, AppRailNav, AppRailRoot, AppShellMainSlot, AppShellOverlaySlot, AppShellPanelSlot, AppShellRailSlot, AppShellRoot, AppShellSidebarSlot, AppShellSidebarTrigger, Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, Badge, Banner, BannerAction, BannerDescription, BannerTitle, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardLeading, CardTitle, CardTrailing, ChatIcon, Checkbox, CheckboxIndicator, CodeBlock, CodeBlockAction, CodeBlockActions, CodeBlockBody, CodeBlockHeader, CodeBlockTitle, Combobox, ComboboxChip, ComboboxChipRemove, ComboboxChips, ComboboxClear, ComboboxCollection, ComboboxContent, ComboboxControl, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxHeader, ComboboxInput, ComboboxInputGroup, ComboboxItem, ComboboxItemIndicator, ComboboxLabel, ComboboxList, ComboboxPopup, ComboboxPortal, ComboboxRow, ComboboxSeparator, ComboboxTrigger, ComboboxTriggerCount, ComboboxTriggerIndicator, ComboboxValue, Composer, ComposerActions, ComposerAttachment, ComposerAttachmentBody, ComposerAttachmentFailedOverlay, ComposerAttachmentFile, ComposerAttachmentImage, ComposerAttachmentMeta, ComposerAttachmentRemove, ComposerAttachmentTitle, ComposerAttachmentUploadProgressBar, ComposerAttachmentUploadingOverlay, ComposerAttachments, ComposerAttachmentsScrollArea, ComposerDropOverlay, ComposerDropOverlayLabel, ComposerDropOverlayPrompt, ComposerIconButton, ComposerInput, ComposerMeta, ComposerRoot, ComposerSubmit, ComposerSuggestionAside, ComposerSuggestionContent, ComposerSuggestionGroup, ComposerSuggestionGroupLabel, ComposerSuggestionIcon, ComposerSuggestionList, ComposerSuggestionMeta, ComposerSuggestionOption, ComposerSuggestionTitle, ComposerToolbar, ComposerToolbarLabel, ContextMenu, ContextMenuCheckboxItem, ContextMenuCheckboxItemIndicator, ContextMenuContent, ContextMenuFooter, ContextMenuItem, ContextMenuItemLabel, ContextMenuLabel, ContextMenuPopup, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuRadioItemIndicator, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSubmenu, ContextMenuSubmenuTrigger, ContextMenuTrigger, ConversationPanelBody, ConversationPanelContent, ConversationPanelEmptyState, ConversationPanelEmptyStateBrand, ConversationPanelEmptyStateBrandMark, ConversationPanelFooter, ConversationPanelRoot, ConversationPanelTabs, CopyableCode, CopyableCodeAction, CopyableCodeRoot, DescriptionDetails, DescriptionItem, DescriptionList, DescriptionTerm, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogNav, DialogOverlay, DialogPortal, DialogSurface, DialogTitle, DialogTrigger, DirectMessageIcon, Drawer, DrawerActions, DrawerBody, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuCheckboxItemIndicator, DropdownMenuContent, DropdownMenuFooter, DropdownMenuItem, DropdownMenuItemCount, DropdownMenuItemLabel, DropdownMenuLabel, DropdownMenuPopup, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuRadioItemIndicator, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSubmenu, DropdownMenuSubmenuTrigger, DropdownMenuTrigger, EmptyState, EmptyStateActions, EmptyStateContent, EmptyStateDescription, EmptyStateIcon, EmptyStateTitle, Field, FieldControl, FieldDescription, FieldError, FieldItem, FieldLabel, FieldValidity, FileAction, FileActions, FileContent, FileImage, FileMeta, FileMetaItem, FileName, FilePreview, FilePreviewBadge, FilePreviewCode, FilePreviewDocument, FilePreviewFile, FilePreviewMedia, FileRow, FileRowOpen, FileThumbnail, FilesList, FilesPanel, FilesViewport, FloatButton, FloatButtonGroup, FormSection, InboxItem, InboxItemActions, InboxItemBody, InboxItemContent, InboxItemContext, InboxItemHeading, InboxItemMessage, InboxItemMetadata, InboxItemSelection, InboxItemSender, InboxItemSubtitle, InboxItemTimestamp, InboxItemTitle, InboxItemTrailing, InboxItemTrigger, InlineCode, Input, InputGroup, InputGroupAddon, InputGroupInput, Kbd, KbdGroup, Label, LabelAsterisk, LabelOptional, LabelSub, LegacyTaskPanelActions, LegacyTaskPanelBody, LegacyTaskPanelField, LegacyTaskPanelFieldLabel, LegacyTaskPanelFieldText, LegacyTaskPanelFieldTitle, LegacyTaskPanelHeader, LegacyTaskPanelIcon, LegacyTaskPanelMeta, LegacyTaskPanelMetaLabel, LegacyTaskPanelMetaRow, LegacyTaskPanelMetaValue, LegacyTaskPanelRoot, LegacyTaskPanelSection, LegacyTaskPanelStatus, LegacyTaskPanelTitle, LegacyTaskPanelTitleMeta, Lightbox, LightboxActions, LightboxClose, LightboxContent, LightboxHeader, LightboxHeaderLabel, LightboxHeaderMeta, LightboxInfoActions, LightboxInfoBar, LightboxInfoDock, LightboxInfoTitle, LightboxMedia, LightboxNavigationButton, LightboxPortal, LightboxStage, LightboxThumbnail, LightboxThumbnailStrip, LightboxTitle, LightboxToolbar, LightboxTrigger, LiveAgentActivityBar, LiveAgentActivityBarAvatar, LiveAgentActivityBarContent, LiveAgentActivityBarRow, LiveAgentActivityBarStatus, LiveAgentActivityBarText, MarkdownBlockquote, MarkdownCell, MarkdownCheckbox, MarkdownHeaderCell, MarkdownHeading, MarkdownImage, MarkdownInlineCode, MarkdownLink, MarkdownList, MarkdownListItem, MarkdownMark, MarkdownOrderedList, MarkdownParagraph, MarkdownRule, MarkdownTable, MarkdownTableRow, MarkdownTableScroll, MessageActionCard, MessageActionCardActions, MessageActionCardActionsNote, MessageActionCardCollapseTrigger, MessageActionCardCompletion, MessageActionCardContent, MessageActionCardHeader, MessageActionCardHeaderDescription, MessageActionCardHeaderIcon, MessageActionCardHeaderStatus, MessageActionCardHeaderTitle, MessageActionCardHint, MessageActionCardHintLabel, MessageActionCardNotice, MessageActionCardProperties, MessageActionCardProperty, MessageActionCardPropertyLabel, MessageActionCardPropertyValue, MessageActionCardScope, MessageActionCardScopeDescription, MessageActionCardScopeList, MessageActionCardScopeListLabel, MessageActionCardScopeListViewport, MessageActionCardScopeName, MessageActionCardStatus, MessageAttachmentAction, MessageAttachmentCard, MessageAttachmentCommentSummary, MessageAttachmentDiffAddition, MessageAttachmentDiffDeletion, MessageAttachmentDiffSummary, MessageAttachmentGroup, MessageAttachmentMeta, MessageAttachmentMetaEnd, MessageAttachmentMetaStart, MessageAttachmentSummary, MessageAttachmentTitle, MessageEmbed, MessageEmbedContent, MessageEmbedFooter, MessageEmbedHeader, MessageForwardedBundle, MessageForwardedBundleAttachment, MessageForwardedBundleAttachmentMeta, MessageForwardedBundleAttachmentName, MessageForwardedBundleAttachments, MessageForwardedBundleFooter, MessageForwardedBundleFooterAction, MessageForwardedBundleGallery, MessageForwardedBundleGalleryTile, MessageForwardedBundleHeader, MessageForwardedBundleHeaderContent, MessageForwardedBundleHeaderCount, MessageForwardedBundleHeaderLabel, MessageForwardedBundleItem, MessageForwardedBundleItemAuthor, MessageForwardedBundleItemContent, MessageForwardedBundleItemMeta, MessageForwardedBundleItems, MessageForwardedBundleSource, MessageForwardedBundleSourceLabel, MessageIcon, MessageImageGallery, MessageImageGalleryAction, MessageImageGalleryItem, MessageImageGalleryMedia, MessageImageGalleryOverlay, MessageImageGalleryPreview, MessageImageGalleryRow, MessageItem, MessageItemAttachments, MessageItemAvatarSlot, MessageItemBadge, MessageItemBadgeSeparator, MessageItemBody, MessageItemContent, MessageItemContinuationTime, MessageItemEmbedded, MessageItemFooter, MessageItemGutter, MessageItemHeader, MessageItemInlineStatus, MessageItemMeta, MessageItemReadReceipt, MessageItemSavedIndicator, MessageItemSearchMatch, MessageItemSender, MessageItemSenderBadges, MessageItemSenderButton, MessageItemTime, MessageItemToolbar, MessageItemToolbarButton, MessageItemTranslationAction, MessageItemTranslationFailedStatus, MessageItemTranslationOriginal, MessageItemTranslationOriginalLabel, MessageItemTranslationProgressTrack, MessageItemTranslationRetryAction, MessageItemTranslationStatus, MessageList, MessageListDateDivider, MessageListHistoryLimited, MessageListNotice, MessageMultiSelect, MessageMultiSelectCheckbox, MessageMultiSelectToolbar, MessageQuotedPreview, MessageQuotedPreviewAttachment, MessageQuotedPreviewAttachments, MessageQuotedPreviewAuthor, MessageQuotedPreviewAuthorMeta, MessageQuotedPreviewAuthorName, MessageQuotedPreviewChannel, MessageQuotedPreviewContent, MessageQuotedPreviewHeader, MessageQuotedPreviewLoading, MessageQuotedPreviewText, MessageQuotedPreviewThread, MessageQuotedPreviewTimestamp, MessageQuotedPreviewUnavailable, MessageReactionAddButton, MessageReactionChip, MessageReactionCount, MessageReactionErrorIndicator, MessageReactionGlyph, MessageReactionPickerContent, MessageReactionPickerStatic, MessageReactionQuickButton, MessageReactionQuickRow, MessageReactionTooltipContent, MessageReactionTooltipMeta, MessageReactionTooltipName, MessageReactionTooltipNameText, MessageReactionTooltipNames, MessageReactionTooltipSeparator, MessageReferenceChip, MessageReferenceIndicator, MessageReferenceLabel, MessageReferencePending, MessageReferenceText, MessageReferenceUnavailable, MessageReplies, MessageRepliesItem, MessageRepliesItemContent, MessageRepliesItemSender, MessageRepliesItemTime, MessageRepliesSummary, MessageRepliesSummaryItem, MessageTextSelectionToolbar, MessageTextSelectionToolbarButton, MessageTextSelectionToolbarSeparator, MessageVideoPreview, MessageVideoPreviewAction, MessageVideoPreviewFailureAction, MessageVideoPreviewFailureContent, MessageVideoPreviewFailureIcon, MessageVideoPreviewFailureTitle, MessageVideoPreviewFallback, MessageVideoPreviewMedia, MobileNavItem, MobileNavLabel, MobileNavRoot, NotificationCenter, NotificationCenterActionButton, NotificationCenterCount, NotificationCenterEmptyState, NotificationCenterHeader, NotificationCenterItem, NotificationCenterItemActions, NotificationCenterItemBody, NotificationCenterItemContent, NotificationCenterItemIcon, NotificationCenterItemRow, NotificationCenterItemTitle, NotificationCenterList, NotificationCenterPopup, NotificationCenterScroller, NotificationCenterTitle, NotificationCenterTrigger, OtterIndicator, Panel, PanelAction, PanelActions, PanelActivity, PanelBody, PanelFooter, PanelHeader, PanelHeaderContent, PanelHeaderIcon, PanelHeaderRoot, PanelHeading, PanelMeta, PanelNotice, PanelNoticeActions, PanelNoticeContent, PanelScrollContent, PanelScrollViewport, PanelSection, PanelSectionHeader, PanelStatus, PanelTitle, PanelToggleAction, PickerTriggerButton, Popover, PopoverArrow, PopoverBackdrop, PopoverClose, PopoverContent, PopoverDescription, PopoverHeader, PopoverPopup, PopoverPortal, PopoverSeparator, PopoverTitle, PopoverTrigger, PopoverViewport, PreviewCard, PreviewCardArrow, PreviewCardContent, PreviewCardDescription, PreviewCardHeader, PreviewCardPopup, PreviewCardPortal, PreviewCardSeparator, PreviewCardTitle, PreviewCardTrigger, ProfilePanel, ProfilePanelBody, ProfilePanelHeader, ProfilePanelHeaderContent, ProfilePanelSection, Progress, ProgressHeader, ProgressIndicator, ProgressLabel, ProgressTrack, ProgressValue, RadioGroup, RadioGroupIndicator, RadioGroupItem, RaftLogo, RaftLogoLockup, RaftWordmark, ResizableGroup, ResizableHandle, ResizablePanel, SINGLE_IMAGE_MAX_HEIGHT, SINGLE_IMAGE_MAX_WIDTH, ScrollArea, ScrollAreaContent, ScrollAreaCorner, ScrollAreaScrollbar, ScrollAreaThumb, ScrollAreaViewport, SearchEntityResult, SearchEntityResultActivity, SearchEntityResultContent, SearchEntityResultDescription, SearchEntityResultHeader, SearchEntityResultIcon, SearchEntityResultLeading, SearchEntityResultTitle, SearchMessageResult, SearchMessageResultBody, SearchMessageResultHeader, SearchMessageResultMatch, SearchMessageResultMeta, SearchMessageResultSender, SearchMessageResultThreadMeta, SearchMessageResultTimestamp, SearchResultsList, SearchResultsSection, SearchResultsSectionHeading, SearchResultsSummary, SearchShellFilters, SearchShellRoot, SearchShellViewport, SearchThreadMessageResult, SearchThreadResult, SearchThreadResultHeader, SearchThreadResultMessages, SearchThreadResultMeta, SearchThreadResultTimestamp, SearchThreadResultTitle, SegmentedControl, SegmentedControlCount, SegmentedControlItem, SegmentedControlLabel, Select, SelectArrow, SelectContent, SelectGroup, SelectGroupLabel, SelectIcon, SelectItem, SelectItemIndicator, SelectItemLeading, SelectItemText, SelectLabel, SelectList, SelectPopup, SelectPortal, SelectScrollDownArrow, SelectScrollUpArrow, SelectSeparator, SelectTrigger, SelectValue, Separator, SidebarBody, SidebarContent, SidebarControl, SidebarGroupLabel, SidebarHeader, SidebarHeaderTitle, SidebarItem, SidebarItemAside, SidebarItemChannelIcon, SidebarItemContent, SidebarItemCount, SidebarItemCountSeparator, SidebarItemIcon, SidebarItemIndicator, SidebarItemMeta, SidebarItemMetaIcon, SidebarItemStatus, SidebarItemSubtitle, SidebarItemThreadCount, SidebarItemTitle, SidebarList, SidebarLiveActivity, SidebarMenu, SidebarMenuAside, SidebarMenuCount, SidebarMenuIcon, SidebarMenuTitle, SidebarRoot, SidebarSection, SidebarSectionAttention, SidebarSectionChevron, SidebarSectionControl, SidebarSectionControls, SidebarSectionCount, SidebarSectionDisclosure, SidebarSectionEmpty, SidebarSectionHeader, SidebarSectionTitle, SidebarSectionTrailing, Skeleton, SortableComposerAttachment, SortableComposerAttachments, SortableComposerAttachmentsScroll, SortableTabsList, SortableTabsTab, Spinner, Status, Step, Steps, Switch, SwitchThumb, SystemMessage, SystemMessageContent, SystemMessageGroup, SystemMessageGroupChevron, SystemMessageGroupDisclosure, SystemMessageGroupHeader, SystemMessageGroupPanel, SystemMessageGroupSummary, SystemMessageTime, TASK_STATUS_IDS, Table, TableBody, TableCaption, TableCell, TableColgroup, TableColumn, TableHead, TableHeader, TableRow, Tabs, TabsLabel, TabsList, TabsPanel, TabsTab, TaskBoardColumn, TaskBoardColumnBadge, TaskBoardColumnChevron, TaskBoardColumnCount, TaskBoardColumnEmpty, TaskBoardColumnEmptyAllowed, TaskBoardColumnEmptyBlocked, TaskBoardColumnEmptyIdle, TaskBoardColumnHeading, TaskBoardColumnItems, TaskBoardColumnPanel, TaskBoardColumnTrigger, TaskBoardRoot, TaskCard, TaskCardBody, TaskCardChannel, TaskCardDescription, TaskCardLegacy, TaskCardMeta, TaskCardNumber, TaskCardRow, TaskCardStatus, TaskCardTitle, TaskChip, TaskClosedIcon, TaskDndProvider, TaskDoneIcon, TaskDragOverlay, TaskDraggable, TaskDropPlaceholder, TaskDropZone, TaskInProgressIcon, TaskInReviewIcon, TaskListRoot, TaskLoadingList, TaskLoadingRow, TaskSection, TaskSectionBadge, TaskSectionChevron, TaskSectionCount, TaskSectionEmpty, TaskSectionHeading, TaskSectionItems, TaskSectionPanel, TaskSectionTrigger, TaskStatusBadge, TaskStatusIcon, TaskTodoIcon, TasksPanelEmpty, TasksPanelRoot, TasksPanelToolbar, TasksPanelToolbarFilters, TasksPanelToolbarGroup, TasksPanelToolbarLabel, TasksPanelToolbarNewTask, TasksPanelToolbarView, TasksPanelViewport, Text, TextHeading, TextMono, TextSans, Textarea, TextareaCounter, TextareaGroup, ThemeProvider, ThreadIcon, ThreadPanelActions, ThreadPanelBody, ThreadPanelContent, ThreadPanelFooter, ThreadPanelHeader, ThreadPanelOriginalMessage, ThreadPanelReplyCount, ThreadPanelReplySummary, ThreadPanelRoot, ThreadPanelSearch, ThreadPanelSearchCount, ThreadPanelSearchTrailing, ThreadPanelTitle, ThreadPanelTitleMeta, Timeline, TimelineContent, TimelineItem, TimelineTime, TimelineTitle, ToastAction, ToastActions, ToastArrow, ToastBody, ToastClose, ToastContent, ToastDescription, ToastIcon, ToastPortal, ToastPositioner, ToastProgress, ToastProvider, ToastRoot, ToastTitle, ToastViewport, ToggleGroup, ToggleGroupItem, ToggleGroupLabel, Tooltip, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger, buildMessageImageGalleryRows, buttonVariants, classifyMessageImageAspect, cn, createToastManager, taskStatusSoft, taskStatusStrong, toast, useComposerSuggestions, useOrderedTabs, useTheme, useToastManager };