npm - @weichenlin/swell-ui - Versions diffs - 0.3.0 → 0.4.0 - Mend

@weichenlin/swell-ui 0.3.0 → 0.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (4) hide show

package/dist/index.js CHANGED Viewed

@@ -1,10 +1,10 @@
 import { ArrowDown, ArrowUp, ArrowUpDown, Check, ChevronDown, ChevronLeft, ChevronRight, CircleAlert, CircleCheck, CircleDashed, CircleX, Copy, Eye, EyeOff, Info, LoaderCircle, Menu, Moon, Search, Sun, TriangleAlert, X } from "lucide-react";
+import { Children, Fragment, cloneElement, createContext, isValidElement, use, useCallback, useContext, useEffect, useEffectEvent, useId, useInsertionEffect, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
 import { clsx } from "clsx";
 import { extendTailwindMerge } from "tailwind-merge";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
-import { Children, cloneElement, createContext, isValidElement, useCallback, useContext, useEffect, useId, useInsertionEffect, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
 import { createPortal } from "react-dom";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/lib/cn.ts
 const tone = (name) => [
 	name,
@@ -78,6 +78,595 @@ function cn(...inputs) {
 	return twMerge(clsx(inputs));
 }
 //#endregion
+//#region src/components/input/field.tsx
+const controlHeight = {
+	sm: "h-[34px]",
+	md: "h-[38px]",
+	lg: "h-[42px]"
+};
+const textSize = {
+	sm: "text-sm",
+	md: "text-sm",
+	lg: "text-base"
+};
+const iconSize$1 = {
+	sm: "[&_svg]:size-4",
+	md: "[&_svg]:size-4",
+	lg: "[&_svg]:size-[18px]"
+};
+const inputPadding = {
+	sm: "px-3",
+	md: "px-3",
+	lg: "px-4"
+};
+const startSlotPadding = {
+	sm: "ps-2",
+	md: "ps-2.5",
+	lg: "ps-3"
+};
+const endSlotPadding = {
+	sm: "pe-2",
+	md: "pe-2.5",
+	lg: "pe-3"
+};
+const actionsPadding = {
+	sm: "pe-[3px]",
+	md: "pe-1",
+	lg: "pe-1"
+};
+/** Compact Button square that fits inside the field's inner height with an even inset. */
+const compactButton = {
+	sm: "size-[26px]",
+	md: "size-7",
+	lg: "size-8"
+};
+const labelStart = {
+	sm: "start-2",
+	md: "start-2",
+	lg: "start-3"
+};
+const floatShift = {
+	sm: "[[data-slot=input-control]:is([data-start],:has(input:focus),:has(textarea:focus),:has(textarea:not(:placeholder-shown)),:has(input:not(:placeholder-shown)),:has(input:autofill),:has(input:-webkit-autofill),:has(select:focus),:has(select:open),:has(select):not(:has(option[value=\"\"]:checked)))_&]:-translate-y-[calc(50%+var(--field-label-shift,17px))]",
+	md: "[[data-slot=input-control]:is([data-start],:has(input:focus),:has(textarea:focus),:has(textarea:not(:placeholder-shown)),:has(input:not(:placeholder-shown)),:has(input:autofill),:has(input:-webkit-autofill),:has(select:focus),:has(select:open),:has(select):not(:has(option[value=\"\"]:checked)))_&]:-translate-y-[calc(50%+var(--field-label-shift,19px))]",
+	lg: "[[data-slot=input-control]:is([data-start],:has(input:focus),:has(textarea:focus),:has(textarea:not(:placeholder-shown)),:has(input:not(:placeholder-shown)),:has(input:autofill),:has(input:-webkit-autofill),:has(select:focus),:has(select:open),:has(select):not(:has(option[value=\"\"]:checked)))_&]:-translate-y-[calc(50%+var(--field-label-shift,21px))]"
+};
+const isText = (node) => typeof node === "string" || typeof node === "number";
+const isPresent = (node) => node != null && node !== false && node !== "";
+function Adornment({ node, side, size }) {
+	const text = isText(node);
+	return /* @__PURE__ */ jsx("span", {
+		"aria-hidden": text ? void 0 : true,
+		className: cn("flex shrink-0 items-center self-stretch text-fg-muted [&_svg]:shrink-0", text ? ["whitespace-nowrap select-none pointer-coarse:text-base", textSize[size]] : iconSize$1[size], side === "start" ? startSlotPadding[size] : endSlotPadding[size]),
+		children: node
+	});
+}
+const notchPadding = {
+	border: {
+		sm: "ps-2 pe-2",
+		md: "ps-2 pe-2",
+		lg: "ps-3 pe-1"
+	},
+	halo: {
+		sm: "ps-[9px] pe-[9px]",
+		md: "ps-[9px] pe-[9px]",
+		lg: "ps-[13px] pe-[5px]"
+	}
+};
+/**
+* MUI-style notched outline: a fieldset draws the ring and an invisible legend holding the label
+* text at its floated size cuts the gap. The legend collapses while the label rests in the field.
+* A legend as tall as the border keeps the border at the fieldset's top edge.
+*/
+function Notch({ ring, size, disabled, children }) {
+	const halo = ring === "halo";
+	return /* @__PURE__ */ jsx("fieldset", {
+		"aria-hidden": true,
+		className: cn("pointer-events-none absolute m-0 min-w-0 p-0", "transition-[border-color] duration-200 ease-in-out motion-reduce:transition-none", notchPadding[ring][size], halo ? ["-inset-1 rounded-[calc(var(--radius-lg)+3px)] border-[3px] border-(--field-halo)", "forced-colors:invisible forced-colors:group-has-[:is(input,select,textarea):is(:focus,:open)]/control:visible forced-colors:border-[Highlight]"] : ["-inset-px rounded-[inherit] border border-(--field-border)", disabled && "forced-colors:border-[GrayText]"]),
+		children: /* @__PURE__ */ jsx("legend", {
+			className: cn("invisible float-none block w-auto max-w-[0.01px] overflow-hidden p-0 text-xs whitespace-nowrap", halo ? "h-0.75" : "h-px", "transition-[max-width] duration-50 ease-out motion-reduce:transition-none", "[[data-slot=input-control]:is([data-start],:has(input:focus),:has(textarea:focus),:has(textarea:not(:placeholder-shown)),:has(input:not(:placeholder-shown)),:has(input:autofill),:has(input:-webkit-autofill),:has(select:focus),:has(select:open),:has(select):not(:has(option[value=\"\"]:checked)))_&]:max-w-full", "[[data-slot=input-control]:is([data-start],:has(input:focus),:has(textarea:focus),:has(textarea:not(:placeholder-shown)),:has(input:not(:placeholder-shown)),:has(input:autofill),:has(input:-webkit-autofill),:has(select:focus),:has(select:open),:has(select):not(:has(option[value=\"\"]:checked)))_&]:delay-50", "[[data-slot=input-control]:is([data-start],:has(input:focus),:has(textarea:focus),:has(textarea:not(:placeholder-shown)),:has(input:not(:placeholder-shown)),:has(input:autofill),:has(input:-webkit-autofill),:has(select:focus),:has(select:open),:has(select):not(:has(option[value=\"\"]:checked)))_&]:duration-100"),
+			children: /* @__PURE__ */ jsx("span", {
+				className: "px-1",
+				children
+			})
+		})
+	});
+}
+/** Keeps an internal ref (focus forwarding, clear, reset) alongside the caller's ref. */
+function useMergedRef(ownRef, ref) {
+	return useCallback((node) => {
+		ownRef.current = node;
+		if (typeof ref === "function") return ref(node);
+		if (ref) ref.current = node;
+	}, [ownRef, ref]);
+}
+const focusControl = (control) => control.focus();
+/**
+* The frame every field shares (input family, Select): label above or floating with a notched
+* outline, the bordered control with its border/halo/hover states, description and live region.
+* State selectors match `input`, `textarea` or `select`, never the inner buttons, so a focused clear or copy
+* button shows only its own ring. `:open` too: an open base-select picker moves focus onto its
+* options, and the select then matches neither `:focus` nor `:focus-within`. Inside `:is()` an
+* unsupported `:open` is dropped alone instead of invalidating the rule.
+*/
+function FieldShell({ label, floating = false, helperText, error, size, id: idProp, required, disabled, readOnly, "aria-describedby": describedByProp, hasStart = false, multiline = false, footer, className, status = "", controlRef, activate = focusControl, children }) {
+	const autoId = useId();
+	const id = idProp ?? `${autoId}-control`;
+	const descriptionId = `${autoId}-description`;
+	const invalid = Boolean(error);
+	const description = invalid ? error === true ? null : error : helperText;
+	const hasDescription = isPresent(description);
+	const describedBy = [describedByProp, hasDescription ? descriptionId : null].filter(Boolean).join(" ") || void 0;
+	const hasLabel = Boolean(label);
+	const floatingLabel = floating && hasLabel;
+	const asterisk = required ? /* @__PURE__ */ jsx("span", {
+		"aria-hidden": true,
+		className: "text-danger",
+		children: " *"
+	}) : null;
+	const forwardClick = (e) => {
+		const control = controlRef.current;
+		const target = e.target;
+		if (!control || control.contains(target) || target.closest("button")) return;
+		e.preventDefault();
+		activate(control);
+	};
+	const renderFloatingLabel = (restingWidth) => floatingLabel ? /* @__PURE__ */ jsxs("label", {
+		htmlFor: id,
+		className: cn("pointer-events-none absolute top-1/2 -translate-y-1/2 truncate px-1 leading-normal", "text-fg-muted pointer-coarse:text-base", "transition-[translate,font-size,color] duration-150 ease-out motion-reduce:transition-none", multiline && {
+			sm: "top-[18px]",
+			md: "top-5",
+			lg: "top-6"
+		}[size], labelStart[size], textSize[size], restingWidth, floatShift[size], "[[data-slot=input-control]:is([data-start],:has(input:focus),:has(textarea:focus),:has(textarea:not(:placeholder-shown)),:has(input:not(:placeholder-shown)),:has(input:autofill),:has(input:-webkit-autofill),:has(select:focus),:has(select:open),:has(select):not(:has(option[value=\"\"]:checked)))_&]:max-w-[calc(100%-1rem)]", "[[data-slot=input-control]:is([data-start],:has(input:focus),:has(textarea:focus),:has(textarea:not(:placeholder-shown)),:has(input:not(:placeholder-shown)),:has(input:autofill),:has(input:-webkit-autofill),:has(select:focus),:has(select:open),:has(select):not(:has(option[value=\"\"]:checked)))_&]:text-xs", invalid ? "text-danger" : ["[[data-slot=input-control]:is([data-start],:has(input:focus),:has(textarea:focus),:has(textarea:not(:placeholder-shown)),:has(input:not(:placeholder-shown)),:has(input:autofill),:has(input:-webkit-autofill),:has(select:focus),:has(select:open),:has(select):not(:has(option[value=\"\"]:checked)))_&]:group-has-[:is(input,select,textarea):not(:is(:focus,:open))]/control:text-fg-strong", "group-has-[:is(input,select,textarea):is(:focus,:open)]/control:text-input-focus"]),
+		children: [label, asterisk]
+	}) : null;
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "input-field",
+		className: cn("flex w-full flex-col gap-1.5", disabled && "opacity-50", className),
+		children: [
+			hasLabel && !floating && /* @__PURE__ */ jsxs("label", {
+				htmlFor: id,
+				className: "self-start text-sm font-medium text-fg",
+				children: [label, asterisk]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				"data-slot": "input-control",
+				"data-start": hasStart ? "" : void 0,
+				onMouseDown: forwardClick,
+				className: cn("group/control relative isolate flex items-center rounded-lg border", floatingLabel ? "bg-transparent" : "[--field-bg:var(--color-input-bg)] bg-(--field-bg)", "transition-[border-color,box-shadow,background-color] duration-200 ease-in-out motion-reduce:transition-none", multiline ? {
+					sm: "[--field-label-shift:19px]",
+					md: "[--field-label-shift:21px]",
+					lg: "[--field-label-shift:25px]"
+				}[size] : controlHeight[size], invalid ? ["[--field-border:var(--color-danger)] [--field-halo:var(--color-input-halo-invalid)]", "has-[:is(input,select,textarea):is(:focus,:open)]:[--field-halo:var(--color-input-halo-invalid-focus)]"] : ["[--field-border:var(--color-input-border)] [--field-halo:transparent]", "has-[:is(input,select,textarea):is(:focus,:open)]:[--field-border:var(--color-input-focus)] has-[:is(input,select,textarea):is(:focus,:open)]:[--field-halo:var(--color-input-halo)]"], "[--field-lift:0_0_#0000]", !invalid && !disabled && !readOnly && [
+					"hover:not-has-[:is(input,select,textarea):is(:focus,:open)]:[--field-border:var(--color-input-border-hover)]",
+					!floatingLabel && "hover:not-has-[:is(input,select,textarea):is(:focus,:open)]:[--field-bg:var(--color-input-bg-hover)]",
+					"hover:not-has-[:is(input,select,textarea):is(:focus,:open)]:[--field-lift:var(--shadow-input-lift)]"
+				], floatingLabel ? ["border-transparent forced-colors:border-[Canvas]", !readOnly && "[box-shadow:var(--field-lift)]"] : [
+					"border-(--field-border)",
+					readOnly ? "[box-shadow:0_0_0_3px_var(--field-halo)]" : "[box-shadow:var(--shadow-input),var(--field-lift),0_0_0_3px_var(--field-halo)]",
+					"has-[:is(input,select,textarea):is(:focus,:open)]:outline-hidden",
+					disabled && "forced-colors:border-[GrayText]"
+				], readOnly && !floatingLabel && "[--field-bg:var(--color-bg)]", disabled && "cursor-not-allowed", "pointer-coarse:before:absolute pointer-coarse:before:inset-x-0 pointer-coarse:before:top-1/2", "pointer-coarse:before:-z-10 pointer-coarse:before:h-11 pointer-coarse:before:-translate-y-1/2"),
+				children: [floatingLabel && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(Notch, {
+					size,
+					ring: "halo",
+					disabled,
+					children: [label, asterisk]
+				}), /* @__PURE__ */ jsxs(Notch, {
+					size,
+					ring: "border",
+					disabled,
+					children: [label, asterisk]
+				})] }), children({
+					id,
+					invalid,
+					describedBy,
+					floating: floatingLabel,
+					floatingLabel: renderFloatingLabel
+				})]
+			}),
+			(hasDescription || isPresent(footer)) && /* @__PURE__ */ jsxs("div", {
+				className: "flex items-start justify-between gap-3",
+				children: [hasDescription && /* @__PURE__ */ jsxs("p", {
+					id: descriptionId,
+					className: cn("m-0 flex min-w-0 flex-1 items-start gap-1 text-xs/snug", invalid ? "text-danger" : "text-fg-muted"),
+					children: [invalid && /* @__PURE__ */ jsx(CircleAlert, {
+						"aria-hidden": true,
+						className: "mt-px size-3.5 shrink-0"
+					}), /* @__PURE__ */ jsx("span", { children: description })]
+				}), footer]
+			}),
+			/* @__PURE__ */ jsx("span", {
+				"aria-live": "polite",
+				"aria-atomic": true,
+				className: "sr-only",
+				children: status
+			})
+		]
+	});
+}
+/** The input family's frame: adornments, actions and the input itself inside FieldShell. */
+function FieldFrame({ label, floating = false, helperText, error, size = "md", start, end, mono = false, validating = false, validatingText = "Checking…", className, inputClassName, inputRef: inputRefProp, actions, status, ref, id, required, disabled, readOnly, placeholder, "aria-describedby": describedByProp, "aria-invalid": ariaInvalid, ...props }) {
+	const ownRef = useRef(null);
+	const inputRef = inputRefProp ?? ownRef;
+	const setRef = useMergedRef(inputRef, ref);
+	const hasStart = isPresent(start);
+	const hasEnd = isPresent(end);
+	return /* @__PURE__ */ jsx(FieldShell, {
+		label,
+		floating,
+		helperText,
+		error,
+		size,
+		id,
+		required,
+		disabled,
+		readOnly,
+		"aria-describedby": describedByProp,
+		hasStart,
+		className,
+		status: validating ? validatingText : status ?? "",
+		controlRef: inputRef,
+		children: (field) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			hasStart ? /* @__PURE__ */ jsx(Adornment, {
+				node: start,
+				side: "start",
+				size
+			}) : null,
+			/* @__PURE__ */ jsxs("span", {
+				className: "@container flex min-w-0 flex-1 self-stretch rounded-[inherit]",
+				children: [field.floatingLabel("max-w-[calc(100cqw-1rem)]"), /* @__PURE__ */ jsx("input", {
+					...props,
+					ref: setRef,
+					id: field.id,
+					required,
+					disabled,
+					readOnly,
+					placeholder: field.floating ? placeholder || " " : placeholder,
+					"aria-invalid": field.invalid ? true : ariaInvalid,
+					"aria-describedby": field.describedBy,
+					spellCheck: mono ? false : props.spellCheck,
+					autoCapitalize: mono ? "off" : props.autoCapitalize,
+					autoCorrect: mono ? "off" : props.autoCorrect,
+					className: cn("h-full min-w-0 flex-1 rounded-[inherit] bg-transparent text-fg outline-none", "placeholder:text-input-placeholder pointer-coarse:text-base", "disabled:cursor-not-allowed", "autofill:[transition:background-color_0s_600000s] autofill:[-webkit-text-fill-color:var(--color-fg)]", textSize[size], inputPadding[size], hasStart && (isText(start) ? "ps-1" : "ps-2"), !validating && hasEnd && isText(end) ? "pe-1" : (validating || hasEnd || actions) && "pe-2", mono && "font-mono", field.floating && ["placeholder:opacity-0", "[[data-slot=input-control]:is([data-start],:has(input:focus),:has(textarea:focus),:has(textarea:not(:placeholder-shown)),:has(input:not(:placeholder-shown)),:has(input:autofill),:has(input:-webkit-autofill),:has(select:focus),:has(select:open),:has(select):not(:has(option[value=\"\"]:checked)))_&]:placeholder:opacity-100"], inputClassName)
+				})]
+			}),
+			validating ? /* @__PURE__ */ jsx("span", {
+				className: cn("flex shrink-0 items-center self-stretch text-fg-muted", iconSize$1[size], endSlotPadding[size]),
+				children: /* @__PURE__ */ jsx(LoaderCircle, {
+					"aria-hidden": true,
+					className: "animate-spin motion-reduce:[animation-duration:2.5s]"
+				})
+			}) : hasEnd ? /* @__PURE__ */ jsx(Adornment, {
+				node: end,
+				side: "end",
+				size
+			}) : null,
+			actions ? /* @__PURE__ */ jsx("span", {
+				className: cn("flex shrink-0 items-center gap-0.5", actionsPadding[size]),
+				children: actions
+			}) : null
+		] })
+	});
+}
+//#endregion
+//#region src/components/accordion/use-accordion-motion.ts
+/** Animate measured heights; never cap content with an arbitrary max-height. */
+function useAccordionMotion(open, itemRef, restoreFocus) {
+	const panelRef = useRef(null);
+	const innerRef = useRef(null);
+	const previousOpen = useRef(open);
+	const [present, setPresent] = useState(open);
+	useLayoutEffect(() => {
+		const panel = panelRef.current;
+		const inner = innerRef.current;
+		if (!panel || !inner) return;
+		const changed = previousOpen.current !== open;
+		previousOpen.current = open;
+		let active = true;
+		let animation;
+		let observer;
+		let target = -1;
+		let settled = false;
+		const reduced = window.matchMedia?.("(prefers-reduced-motion: reduce)");
+		if (!open && panel.contains(panel.ownerDocument.activeElement) && itemRef.current) restoreFocus(itemRef.current);
+		panel.inert = !open;
+		panel.toggleAttribute("inert", !open);
+		if (open) panel.removeAttribute("aria-hidden");
+		else panel.setAttribute("aria-hidden", "true");
+		const finish = () => {
+			if (!active) return;
+			settled = true;
+			observer?.disconnect();
+			animation?.cancel();
+			animation = void 0;
+			panel.style.removeProperty("height");
+			panel.style.removeProperty("overflow");
+			panel.hidden = !open;
+			setPresent(open);
+		};
+		const run = () => {
+			if (!active || settled) return;
+			const nextTarget = open ? inner.getBoundingClientRect().height : 0;
+			if (nextTarget === target && animation) return;
+			target = nextTarget;
+			const from = panel.getBoundingClientRect().height;
+			animation?.cancel();
+			panel.style.height = `${from}px`;
+			const current = panel.animate([{ height: `${from}px` }, { height: `${target}px` }], {
+				duration: open ? 200 : 160,
+				easing: "cubic-bezier(.16,1,.3,1)",
+				fill: "both"
+			});
+			animation = current;
+			current.finished.then(() => {
+				if (active && animation === current) finish();
+			}, () => {});
+		};
+		if (!changed || reduced?.matches || typeof panel.animate !== "function") finish();
+		else {
+			if (open && !panel.style.height) panel.style.height = "0px";
+			panel.hidden = false;
+			panel.style.overflow = "hidden";
+			setPresent(true);
+			run();
+			if (open && typeof ResizeObserver !== "undefined") {
+				observer = new ResizeObserver(run);
+				observer.observe(inner);
+			}
+		}
+		const onReducedMotion = () => {
+			if (reduced?.matches) finish();
+		};
+		reduced?.addEventListener("change", onReducedMotion);
+		return () => {
+			active = false;
+			observer?.disconnect();
+			reduced?.removeEventListener("change", onReducedMotion);
+			if (animation) {
+				panel.style.height = `${panel.getBoundingClientRect().height}px`;
+				animation.cancel();
+			}
+		};
+	}, [
+		open,
+		itemRef,
+		restoreFocus
+	]);
+	return {
+		panelRef,
+		innerRef,
+		present
+	};
+}
+//#endregion
+//#region src/components/accordion/accordion.tsx
+const AccordionContext = createContext(null);
+const ItemContext = createContext(null);
+function useAccordionContext(part) {
+	const context = useContext(AccordionContext);
+	if (!context) throw new Error(`${part} must be rendered inside <Accordion>`);
+	return context;
+}
+function useItemContext(part) {
+	const context = useContext(ItemContext);
+	if (!context) throw new Error(`${part} must be rendered inside <AccordionItem>`);
+	return context;
+}
+const valuesOf = (value) => typeof value === "string" ? [value] : [...new Set(value ?? [])];
+const ownTriggers = (root) => [...root.querySelectorAll("[data-slot=\"accordion-trigger\"]")].filter((node) => node.closest("[data-slot=\"accordion\"]") === root);
+/** Vertical disclosure group. Changing type requires a new React key. */
+function Accordion({ type = "single", value, defaultValue, onValueChange, collapsible = true, variant = "line", headingLevel = 3, disabled = false, className, children, ref, onKeyDown, ...props }) {
+	const [initialType] = useState(type);
+	if (initialType !== type) throw new Error("Changing Accordion type requires a new key");
+	const controlled = value !== void 0;
+	const [internal, setInternal] = useState(() => valuesOf(defaultValue));
+	const selected = controlled ? valuesOf(value) : internal;
+	const rootRef = useRef(null);
+	const mergedRef = useMergedRef(rootRef, ref);
+	const items = useRef(/* @__PURE__ */ new Map());
+	const internalRef = useRef(internal);
+	useLayoutEffect(() => {
+		internalRef.current = internal;
+	}, [internal]);
+	const restoreFocus = useCallback((item, removing = false) => {
+		const root = rootRef.current;
+		if (!root) return;
+		const triggers = ownTriggers(root);
+		const own = triggers.find((node) => node.closest("[data-slot=\"accordion-item\"]") === item);
+		const index = own ? triggers.indexOf(own) : -1;
+		const next = (!removing && own && !own.disabled ? own : void 0) ?? triggers.slice(index + 1).find((node) => !node.disabled) ?? triggers.slice(0, Math.max(index, 0)).reverse().find((node) => !node.disabled);
+		if (next) next.focus({ preventScroll: true });
+		else {
+			const previous = root.getAttribute("tabindex");
+			root.tabIndex = -1;
+			root.focus({ preventScroll: true });
+			if (previous === null) root.removeAttribute("tabindex");
+			else root.setAttribute("tabindex", previous);
+		}
+	}, []);
+	const register = useCallback((itemValue, node) => {
+		const members = items.current;
+		if (members.has(itemValue)) throw new Error(`Accordion item values must be unique: "${itemValue}"`);
+		members.set(itemValue, node);
+		const reconcile = () => {
+			queueMicrotask(() => {
+				if (controlled || !rootRef.current) return;
+				if (internalRef.current.every((entry) => members.has(entry))) return;
+				setInternal((current) => {
+					const next = current.filter((entry) => members.has(entry));
+					return next.length === current.length ? current : next;
+				});
+			});
+		};
+		reconcile();
+		return () => {
+			members.delete(itemValue);
+			const focused = node.ownerDocument.activeElement;
+			if (focused && node.contains(focused)) {
+				const root = rootRef.current;
+				const triggers = root ? ownTriggers(root) : [];
+				const index = triggers.findIndex((trigger) => node.contains(trigger));
+				const candidates = [...triggers.slice(index + 1), ...triggers.slice(0, index).reverse()];
+				queueMicrotask(() => {
+					const active = node.ownerDocument.activeElement;
+					if (node.isConnected || !rootRef.current || active !== node.ownerDocument.body && active !== focused) return;
+					const next = candidates.find((trigger) => trigger.isConnected && !trigger.disabled);
+					if (next) next.focus({ preventScroll: true });
+					else restoreFocus(node, true);
+				});
+			}
+			reconcile();
+		};
+	}, [controlled, restoreFocus]);
+	const toggle = (itemValue) => {
+		const open = selected.includes(itemValue);
+		if (disabled || type === "single" && open && !collapsible) return;
+		const next = open ? selected.filter((entry) => entry !== itemValue) : type === "single" ? [itemValue] : [...selected, itemValue];
+		if (!controlled) setInternal(next);
+		if (type === "multiple") onValueChange?.(next);
+		else onValueChange?.(next[0] ?? null);
+	};
+	return /* @__PURE__ */ jsx(AccordionContext, {
+		value: {
+			selected,
+			variant,
+			headingLevel,
+			disabled,
+			collapsible: type === "multiple" || collapsible,
+			toggle,
+			register,
+			restoreFocus
+		},
+		children: /* @__PURE__ */ jsx(ItemContext, {
+			value: null,
+			children: /* @__PURE__ */ jsx("div", {
+				...props,
+				ref: mergedRef,
+				"data-slot": "accordion",
+				"data-variant": variant,
+				"data-disabled": disabled || void 0,
+				className: cn("min-w-0", variant === "outline" && "flex flex-col gap-2", className),
+				onKeyDown: (event) => {
+					onKeyDown?.(event);
+					if (event.defaultPrevented || event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) return;
+					if (![
+						"ArrowDown",
+						"ArrowUp",
+						"Home",
+						"End"
+					].includes(event.key)) return;
+					const triggers = ownTriggers(event.currentTarget).filter((node) => !node.disabled);
+					const index = triggers.indexOf(event.target);
+					if (index === -1) return;
+					event.preventDefault();
+					triggers[event.key === "Home" ? 0 : event.key === "End" ? triggers.length - 1 : Math.max(0, Math.min(triggers.length - 1, index + (event.key === "ArrowDown" ? 1 : -1)))]?.focus();
+				},
+				children
+			})
+		})
+	});
+}
+function AccordionItem({ value, disabled = false, className, children, ref, ...props }) {
+	const group = useAccordionContext("AccordionItem");
+	if (!value.trim()) throw new Error("AccordionItem value must be a non-empty string");
+	const id = useId();
+	const itemRef = useRef(null);
+	const mergedRef = useMergedRef(itemRef, ref);
+	const register = group.register;
+	useLayoutEffect(() => {
+		if (itemRef.current) return register(value, itemRef.current);
+	}, [register, value]);
+	const open = group.selected.includes(value);
+	const isDisabled = group.disabled || disabled;
+	return /* @__PURE__ */ jsx(ItemContext, {
+		value: {
+			id,
+			value,
+			open,
+			disabled: isDisabled,
+			itemRef
+		},
+		children: /* @__PURE__ */ jsx("div", {
+			...props,
+			ref: mergedRef,
+			"data-slot": "accordion-item",
+			"data-state": open ? "open" : "closed",
+			"data-disabled": isDisabled || void 0,
+			className: cn("min-w-0 border-input-border", group.variant === "outline" ? "rounded-xl border bg-surface" : "border-b", className),
+			children
+		})
+	});
+}
+function AccordionTrigger({ children, description, className, onClick, "aria-describedby": describedBy, ...props }) {
+	const group = useAccordionContext("AccordionTrigger");
+	const item = useItemContext("AccordionTrigger");
+	const Heading = `h${group.headingLevel}`;
+	const hasDescription = isPresent(description);
+	const locked = item.open && !group.collapsible;
+	return /* @__PURE__ */ jsx(Heading, {
+		"data-slot": "accordion-heading",
+		className: "m-0 text-inherit",
+		children: /* @__PURE__ */ jsxs("button", {
+			...props,
+			id: `${item.id}-trigger`,
+			type: "button",
+			disabled: item.disabled,
+			"aria-expanded": item.open,
+			"aria-controls": `${item.id}-content`,
+			"aria-disabled": locked || void 0,
+			"aria-labelledby": props["aria-label"] ? void 0 : `${item.id}-title`,
+			"aria-describedby": [describedBy, hasDescription && `${item.id}-description`].filter(Boolean).join(" ") || void 0,
+			"data-slot": "accordion-trigger",
+			"data-state": item.open ? "open" : "closed",
+			className: cn("group/accordion-trigger flex min-h-12 w-full cursor-pointer items-start gap-3 rounded-sm py-3 text-start text-sm/6 font-medium text-fg outline-none", "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus", "disabled:cursor-not-allowed disabled:opacity-50 aria-disabled:cursor-default", "forced-colors:disabled:text-[GrayText]", group.variant === "outline" && "rounded-xl px-4", className),
+			onClick: (event) => {
+				onClick?.(event);
+				if (!event.defaultPrevented && !item.disabled && !locked) group.toggle(item.value);
+			},
+			children: [/* @__PURE__ */ jsxs("span", {
+				className: "min-w-0 flex-1 wrap-anywhere",
+				children: [/* @__PURE__ */ jsx("span", {
+					id: `${item.id}-title`,
+					className: "underline-offset-4 group-enabled/accordion-trigger:group-hover/accordion-trigger:underline",
+					children
+				}), hasDescription && /* @__PURE__ */ jsx("span", {
+					id: `${item.id}-description`,
+					className: "mt-0.5 block text-xs/4.5 font-normal text-fg-muted",
+					children: description
+				})]
+			}), /* @__PURE__ */ jsx(ChevronDown, {
+				"aria-hidden": true,
+				className: cn("mt-1 size-4 shrink-0 text-fg-muted transition-transform duration-200 ease-out motion-reduce:transition-none", item.open && "rotate-180")
+			})]
+		})
+	});
+}
+function AccordionContent({ keepMounted = true, region = false, className, contentClassName, children, ref, ...props }) {
+	const group = useAccordionContext("AccordionContent");
+	const item = useItemContext("AccordionContent");
+	const { panelRef, innerRef, present } = useAccordionMotion(item.open, item.itemRef, group.restoreFocus);
+	const mergedRef = useMergedRef(panelRef, ref);
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		ref: mergedRef,
+		id: `${item.id}-content`,
+		role: region ? "region" : void 0,
+		"aria-labelledby": region ? `${item.id}-title` : void 0,
+		hidden: !item.open && !present,
+		inert: !item.open && !present,
+		"aria-hidden": !item.open && !present ? true : void 0,
+		"data-slot": "accordion-content",
+		"data-state": item.open ? "open" : "closed",
+		className: cn("min-w-0", contentClassName),
+		children: /* @__PURE__ */ jsx("div", {
+			ref: innerRef,
+			"data-slot": "accordion-content-inner",
+			className: cn("flow-root min-w-0 pb-4 text-sm/5.5 wrap-anywhere text-fg-muted", group.variant === "outline" ? "ps-4 pe-11" : "pe-7", className),
+			children: (keepMounted || item.open || present) && children
+		})
+	});
+}
+//#endregion
 //#region src/hooks/use-press-feedback.ts
 const GROW_MS = 450;
 const FADE_MS = 300;
@@ -221,7 +810,7 @@ function Slot({ children, ref, ...props }) {
 const OPEN_DELAY_MS = 300;
 const GAP_PX = 6;
 const VIEWPORT_PADDING_PX = 8;
-const opposite = {
+const opposite$1 = {
 	top: "bottom",
 	bottom: "top",
 	left: "right",
@@ -234,7 +823,7 @@ function isFocusVisible$1(el) {
 		return true;
 	}
 }
-function clamp(value, min, max) {
+function clamp$2(value, min, max) {
 	return Math.max(min, Math.min(value, Math.max(min, max)));
 }
 /**
@@ -251,15 +840,15 @@ function place(anchor, width, height, preferred) {
 		right: vw - anchor.right
 	};
 	const need = (s) => (s === "top" || s === "bottom" ? height : width) + GAP_PX + VIEWPORT_PADDING_PX;
-	const side = room[preferred] < need(preferred) && room[opposite[preferred]] > room[preferred] ? opposite[preferred] : preferred;
+	const side = room[preferred] < need(preferred) && room[opposite$1[preferred]] > room[preferred] ? opposite$1[preferred] : preferred;
 	if (side === "top" || side === "bottom") return {
 		side,
-		left: clamp(anchor.left + anchor.width / 2 - width / 2, VIEWPORT_PADDING_PX, vw - width - VIEWPORT_PADDING_PX),
+		left: clamp$2(anchor.left + anchor.width / 2 - width / 2, VIEWPORT_PADDING_PX, vw - width - VIEWPORT_PADDING_PX),
 		top: side === "top" ? anchor.top - height - GAP_PX : anchor.bottom
 	};
 	return {
 		side,
-		top: clamp(anchor.top + anchor.height / 2 - height / 2, VIEWPORT_PADDING_PX, vh - height - VIEWPORT_PADDING_PX),
+		top: clamp$2(anchor.top + anchor.height / 2 - height / 2, VIEWPORT_PADDING_PX, vh - height - VIEWPORT_PADDING_PX),
 		left: side === "left" ? anchor.left - width - GAP_PX : anchor.right
 	};
 }
@@ -452,7 +1041,7 @@ const spinnerSize = {
 	md: 18,
 	lg: 20
 };
-const iconSize$1 = {
+const iconSize = {
 	sm: "[&_svg]:size-4",
 	md: "[&_svg]:size-4",
 	lg: "[&_svg]:size-[18px]"
@@ -470,7 +1059,7 @@ const iconEndPadding = {
 /** Press layer + content + spinner; shared by every button-styled host. */
 function ButtonContent({ size, ripple, loading = false, iconLeft, iconRight, children }) {
 	const layerRef = usePressFeedback(ripple);
-	return /* @__PURE__ */ jsxs(Fragment, { children: [
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
 		/* @__PURE__ */ jsx("span", {
 			ref: layerRef,
 			"data-ripple": ripple ? "" : void 0,
@@ -478,7 +1067,7 @@ function ButtonContent({ size, ripple, loading = false, iconLeft, iconRight, chi
 			className: "pointer-events-none absolute inset-0 overflow-hidden rounded-[inherit] forced-colors:hidden"
 		}),
 		/* @__PURE__ */ jsxs("span", {
-			className: cn("relative inline-flex items-center gap-2 [&_svg]:shrink-0", iconSize$1[size], loading && "opacity-0"),
+			className: cn("relative inline-flex items-center gap-2 [&_svg]:shrink-0", iconSize[size], loading && "opacity-0"),
 			children: [
 				iconLeft && /* @__PURE__ */ jsx("span", {
 					"aria-hidden": true,
@@ -569,7 +1158,7 @@ function ButtonImpl({ asChild = false, className, intent, size, tone, fullWidth,
 		},
 		children: content(children)
 	});
-	return /* @__PURE__ */ jsxs(Fragment, { children: [tooltip ? /* @__PURE__ */ jsx(Tooltip, {
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [tooltip ? /* @__PURE__ */ jsx(Tooltip, {
 		...tooltip,
 		className: fullWidth ? "flex w-full" : void 0,
 		children: button
@@ -667,395 +1256,135 @@ function Alert({ tone = "neutral", title, action, onDismiss, dismissLabel = "Dis
 					children: action
 				})
 			]
-		}), onDismiss && /* @__PURE__ */ jsx(Button, {
-			"aria-label": dismissLabel,
-			className: "-my-1.5 -me-1.5 shrink-0 text-fg-muted @md/alert:self-center",
-			icon: /* @__PURE__ */ jsx(X, {}),
-			intent: "ghost",
-			size: "sm",
-			onClick: onDismiss
-		})]
-	});
-}
-//#endregion
-//#region src/components/badge/badge.tsx
-const toneClasses$1 = {
-	neutral: {
-		subtle: ["border-neutral-border bg-neutral-subtle-bg text-neutral-subtle-fg", "text-neutral"],
-		outline: ["border-neutral-border bg-transparent text-neutral-subtle-fg", "text-neutral"],
-		solid: ["border-neutral bg-neutral text-neutral-fg", "text-neutral-fg"]
-	},
-	info: {
-		subtle: ["border-info-border bg-info-subtle-bg text-info-subtle-fg", "text-info"],
-		outline: ["border-info-border bg-transparent text-info-subtle-fg", "text-info"],
-		solid: ["border-info bg-info text-info-fg", "text-info-fg"]
-	},
-	success: {
-		subtle: ["border-success-border bg-success-subtle-bg text-success-subtle-fg", "text-success"],
-		outline: ["border-success-border bg-transparent text-success-subtle-fg", "text-success"],
-		solid: ["border-success bg-success text-success-fg", "text-success-fg"]
-	},
-	warning: {
-		subtle: ["border-warning-border bg-warning-subtle-bg text-warning-subtle-fg", "text-warning"],
-		outline: ["border-warning-border bg-transparent text-warning-subtle-fg", "text-warning"],
-		solid: ["border-warning bg-warning text-warning-fg", "text-warning-fg"]
-	},
-	danger: {
-		subtle: ["border-danger-border bg-danger-subtle-bg text-danger-subtle-fg", "text-danger"],
-		outline: ["border-danger-border bg-transparent text-danger-subtle-fg", "text-danger"],
-		solid: ["border-danger bg-danger text-danger-fg", "text-danger-fg"]
-	}
-};
-const sizeClasses$3 = {
-	sm: {
-		base: "h-5 px-1.5",
-		withIcon: "ps-1"
-	},
-	md: {
-		base: "h-6 px-2",
-		withIcon: "ps-1.5"
-	}
-};
-function Badge({ tone = "neutral", variant = "subtle", size = "md", icon, busy = false, context, className, children, ...props }) {
-	const [toneClass, iconClass] = toneClasses$1[tone][variant];
-	const hasIcon = busy || icon !== void 0 && icon !== null && icon !== false;
-	return /* @__PURE__ */ jsxs("span", {
-		...props,
-		"data-slot": "badge",
-		className: cn("inline-flex items-center gap-1 rounded-md border text-xs leading-none font-medium whitespace-nowrap", "forced-colors:border-[CanvasText]", sizeClasses$3[size].base, hasIcon && sizeClasses$3[size].withIcon, toneClass, className),
-		children: [hasIcon && /* @__PURE__ */ jsx("span", {
-			"aria-hidden": "true",
-			"data-slot": "badge-icon",
-			className: cn("inline-flex shrink-0 items-center [&_svg]:size-3 [&_svg]:shrink-0", iconClass),
-			children: busy ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(LoaderCircle, { className: "animate-spin motion-reduce:hidden" }), /* @__PURE__ */ jsx(CircleDashed, { className: "hidden motion-reduce:block" })] }) : icon
-		}), /* @__PURE__ */ jsxs("span", {
-			"data-slot": "badge-label",
-			className: "min-w-0 truncate leading-4",
-			children: [context && /* @__PURE__ */ jsxs("span", {
-				className: "sr-only",
-				children: [context, ": "]
-			}), children]
-		})]
-	});
-}
-//#endregion
-//#region src/components/card/card.tsx
-const CardContext = createContext({
-	titleId: "",
-	setTitled: () => {}
-});
-/**
-* Bordered surface for a group of related content. No padding of its own: CardHeader and
-* CardContent add it, so full-bleed rows (lists, tables) can sit edge to edge.
-*/
-function Card({ as: Comp = "div", className, ...props }) {
-	const titleId = useId();
-	const [titled, setTitled] = useState(false);
-	return /* @__PURE__ */ jsx(CardContext, {
-		value: {
-			titleId,
-			setTitled
-		},
-		children: /* @__PURE__ */ jsx(Comp, {
-			"aria-labelledby": (Comp === "section" || Comp === "article") && titled && !props["aria-label"] ? titleId : void 0,
-			...props,
-			"data-slot": "card",
-			className: cn("rounded-xl border border-border-strong bg-surface", className)
-		})
-	});
-}
-function CardHeader({ title, description, action, headingLevel = 2, className, ...props }) {
-	const { titleId, setTitled } = useContext(CardContext);
-	useLayoutEffect(() => {
-		setTitled(true);
-		return () => setTitled(false);
-	}, [setTitled]);
-	const Heading = headingLevel === 2 ? "h2" : "h3";
-	return /* @__PURE__ */ jsxs("div", {
-		...props,
-		"data-slot": "card-header",
-		className: cn("flex items-start justify-between gap-4 px-5 pt-5", className),
-		children: [/* @__PURE__ */ jsxs("div", {
-			className: "min-w-0",
-			children: [/* @__PURE__ */ jsx(Heading, {
-				id: titleId,
-				className: "font-sans text-sm font-medium",
-				children: title
-			}), description && /* @__PURE__ */ jsx("p", {
-				className: "text-xs text-fg-muted",
-				children: description
-			})]
-		}), action && /* @__PURE__ */ jsx("div", {
-			className: "shrink-0",
-			children: action
-		})]
-	});
-}
-function CardContent({ className, ...props }) {
-	return /* @__PURE__ */ jsx("div", {
-		...props,
-		"data-slot": "card-content",
-		className: cn("p-5 [[data-slot=card-header]+&]:pt-4", className)
-	});
-}
-//#endregion
-//#region src/components/input/field.tsx
-const controlHeight = {
-	sm: "h-[34px]",
-	md: "h-[38px]",
-	lg: "h-[42px]"
-};
-const textSize = {
-	sm: "text-sm",
-	md: "text-sm",
-	lg: "text-base"
-};
-const iconSize = {
-	sm: "[&_svg]:size-4",
-	md: "[&_svg]:size-4",
-	lg: "[&_svg]:size-[18px]"
-};
-const inputPadding = {
-	sm: "px-3",
-	md: "px-3",
-	lg: "px-4"
-};
-const startSlotPadding = {
-	sm: "ps-2",
-	md: "ps-2.5",
-	lg: "ps-3"
-};
-const endSlotPadding = {
-	sm: "pe-2",
-	md: "pe-2.5",
-	lg: "pe-3"
-};
-const actionsPadding = {
-	sm: "pe-[3px]",
-	md: "pe-1",
-	lg: "pe-1"
-};
-/** Compact Button square that fits inside the field's inner height with an even inset. */
-const compactButton = {
-	sm: "size-[26px]",
-	md: "size-7",
-	lg: "size-8"
-};
-const labelStart = {
-	sm: "start-2",
-	md: "start-2",
-	lg: "start-3"
-};
-const floatShift = {
-	sm: "[[data-slot=input-control]:is([data-start],:has(input:focus),:has(input:not(:placeholder-shown)),:has(input:autofill),:has(input:-webkit-autofill),:has(select:focus),:has(select:open),:has(select):not(:has(option[value=\"\"]:checked)))_&]:-translate-y-[calc(50%+17px)]",
-	md: "[[data-slot=input-control]:is([data-start],:has(input:focus),:has(input:not(:placeholder-shown)),:has(input:autofill),:has(input:-webkit-autofill),:has(select:focus),:has(select:open),:has(select):not(:has(option[value=\"\"]:checked)))_&]:-translate-y-[calc(50%+19px)]",
-	lg: "[[data-slot=input-control]:is([data-start],:has(input:focus),:has(input:not(:placeholder-shown)),:has(input:autofill),:has(input:-webkit-autofill),:has(select:focus),:has(select:open),:has(select):not(:has(option[value=\"\"]:checked)))_&]:-translate-y-[calc(50%+21px)]"
-};
-const isText = (node) => typeof node === "string" || typeof node === "number";
-const isPresent = (node) => node != null && node !== false && node !== "";
-function Adornment({ node, side, size }) {
-	const text = isText(node);
-	return /* @__PURE__ */ jsx("span", {
-		"aria-hidden": text ? void 0 : true,
-		className: cn("flex shrink-0 items-center self-stretch text-fg-muted [&_svg]:shrink-0", text ? ["whitespace-nowrap select-none pointer-coarse:text-base", textSize[size]] : iconSize[size], side === "start" ? startSlotPadding[size] : endSlotPadding[size]),
-		children: node
+		}), onDismiss && /* @__PURE__ */ jsx(Button, {
+			"aria-label": dismissLabel,
+			className: "-my-1.5 -me-1.5 shrink-0 text-fg-muted @md/alert:self-center",
+			icon: /* @__PURE__ */ jsx(X, {}),
+			intent: "ghost",
+			size: "sm",
+			onClick: onDismiss
+		})]
 	});
 }
-const notchPadding = {
-	border: {
-		sm: "ps-2 pe-2",
-		md: "ps-2 pe-2",
-		lg: "ps-3 pe-1"
+//#endregion
+//#region src/components/badge/badge.tsx
+const toneClasses$1 = {
+	neutral: {
+		subtle: ["border-neutral-border bg-neutral-subtle-bg text-neutral-subtle-fg", "text-neutral"],
+		outline: ["border-neutral-border bg-transparent text-neutral-subtle-fg", "text-neutral"],
+		solid: ["border-neutral bg-neutral text-neutral-fg", "text-neutral-fg"]
 	},
-	halo: {
-		sm: "ps-[9px] pe-[9px]",
-		md: "ps-[9px] pe-[9px]",
-		lg: "ps-[13px] pe-[5px]"
+	info: {
+		subtle: ["border-info-border bg-info-subtle-bg text-info-subtle-fg", "text-info"],
+		outline: ["border-info-border bg-transparent text-info-subtle-fg", "text-info"],
+		solid: ["border-info bg-info text-info-fg", "text-info-fg"]
+	},
+	success: {
+		subtle: ["border-success-border bg-success-subtle-bg text-success-subtle-fg", "text-success"],
+		outline: ["border-success-border bg-transparent text-success-subtle-fg", "text-success"],
+		solid: ["border-success bg-success text-success-fg", "text-success-fg"]
+	},
+	warning: {
+		subtle: ["border-warning-border bg-warning-subtle-bg text-warning-subtle-fg", "text-warning"],
+		outline: ["border-warning-border bg-transparent text-warning-subtle-fg", "text-warning"],
+		solid: ["border-warning bg-warning text-warning-fg", "text-warning-fg"]
+	},
+	danger: {
+		subtle: ["border-danger-border bg-danger-subtle-bg text-danger-subtle-fg", "text-danger"],
+		outline: ["border-danger-border bg-transparent text-danger-subtle-fg", "text-danger"],
+		solid: ["border-danger bg-danger text-danger-fg", "text-danger-fg"]
 	}
 };
-/**
-* MUI-style notched outline: a fieldset draws the ring and an invisible legend holding the label
-* text at its floated size cuts the gap. The legend collapses while the label rests in the field.
-* A legend as tall as the border keeps the border at the fieldset's top edge.
-*/
-function Notch({ ring, size, disabled, children }) {
-	const halo = ring === "halo";
-	return /* @__PURE__ */ jsx("fieldset", {
-		"aria-hidden": true,
-		className: cn("pointer-events-none absolute m-0 min-w-0 p-0", "transition-[border-color] duration-200 ease-in-out motion-reduce:transition-none", notchPadding[ring][size], halo ? ["-inset-1 rounded-[calc(var(--radius-lg)+3px)] border-[3px] border-(--field-halo)", "forced-colors:invisible forced-colors:group-has-[:is(input,select):is(:focus,:open)]/control:visible forced-colors:border-[Highlight]"] : ["-inset-px rounded-[inherit] border border-(--field-border)", disabled && "forced-colors:border-[GrayText]"]),
-		children: /* @__PURE__ */ jsx("legend", {
-			className: cn("invisible float-none block w-auto max-w-[0.01px] overflow-hidden p-0 text-xs whitespace-nowrap", halo ? "h-0.75" : "h-px", "transition-[max-width] duration-50 ease-out motion-reduce:transition-none", "[[data-slot=input-control]:is([data-start],:has(input:focus),:has(input:not(:placeholder-shown)),:has(input:autofill),:has(input:-webkit-autofill),:has(select:focus),:has(select:open),:has(select):not(:has(option[value=\"\"]:checked)))_&]:max-w-full", "[[data-slot=input-control]:is([data-start],:has(input:focus),:has(input:not(:placeholder-shown)),:has(input:autofill),:has(input:-webkit-autofill),:has(select:focus),:has(select:open),:has(select):not(:has(option[value=\"\"]:checked)))_&]:delay-50", "[[data-slot=input-control]:is([data-start],:has(input:focus),:has(input:not(:placeholder-shown)),:has(input:autofill),:has(input:-webkit-autofill),:has(select:focus),:has(select:open),:has(select):not(:has(option[value=\"\"]:checked)))_&]:duration-100"),
-			children: /* @__PURE__ */ jsx("span", {
-				className: "px-1",
-				children
-			})
-		})
+const sizeClasses$3 = {
+	sm: {
+		base: "h-5 px-1.5",
+		withIcon: "ps-1"
+	},
+	md: {
+		base: "h-6 px-2",
+		withIcon: "ps-1.5"
+	}
+};
+function Badge({ tone = "neutral", variant = "subtle", size = "md", icon, busy = false, context, className, children, ...props }) {
+	const [toneClass, iconClass] = toneClasses$1[tone][variant];
+	const hasIcon = busy || icon !== void 0 && icon !== null && icon !== false;
+	return /* @__PURE__ */ jsxs("span", {
+		...props,
+		"data-slot": "badge",
+		className: cn("inline-flex items-center gap-1 rounded-md border text-xs leading-none font-medium whitespace-nowrap", "forced-colors:border-[CanvasText]", sizeClasses$3[size].base, hasIcon && sizeClasses$3[size].withIcon, toneClass, className),
+		children: [hasIcon && /* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			"data-slot": "badge-icon",
+			className: cn("inline-flex shrink-0 items-center [&_svg]:size-3 [&_svg]:shrink-0", iconClass),
+			children: busy ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(LoaderCircle, { className: "animate-spin motion-reduce:hidden" }), /* @__PURE__ */ jsx(CircleDashed, { className: "hidden motion-reduce:block" })] }) : icon
+		}), /* @__PURE__ */ jsxs("span", {
+			"data-slot": "badge-label",
+			className: "min-w-0 truncate leading-4",
+			children: [context && /* @__PURE__ */ jsxs("span", {
+				className: "sr-only",
+				children: [context, ": "]
+			}), children]
+		})]
 	});
 }
-/** Keeps an internal ref (focus forwarding, clear, reset) alongside the caller's ref. */
-function useMergedRef(ownRef, ref) {
-	return useCallback((node) => {
-		ownRef.current = node;
-		if (typeof ref === "function") return ref(node);
-		if (ref) ref.current = node;
-	}, [ownRef, ref]);
-}
-const focusControl = (control) => control.focus();
+//#endregion
+//#region src/components/card/card.tsx
+const CardContext = createContext({
+	titleId: "",
+	setTitled: () => {}
+});
 /**
-* The frame every field shares (input family, Select): label above or floating with a notched
-* outline, the bordered control with its border/halo/hover states, description and live region.
-* State selectors match `input` or `select`, never the inner buttons, so a focused clear or copy
-* button shows only its own ring. `:open` too: an open base-select picker moves focus onto its
-* options, and the select then matches neither `:focus` nor `:focus-within`. Inside `:is()` an
-* unsupported `:open` is dropped alone instead of invalidating the rule.
+* Bordered surface for a group of related content. No padding of its own: CardHeader and
+* CardContent add it, so full-bleed rows (lists, tables) can sit edge to edge.
 */
-function FieldShell({ label, floating = false, helperText, error, size, id: idProp, required, disabled, readOnly, "aria-describedby": describedByProp, hasStart = false, className, status = "", controlRef, activate = focusControl, children }) {
-	const autoId = useId();
-	const id = idProp ?? `${autoId}-control`;
-	const descriptionId = `${autoId}-description`;
-	const invalid = Boolean(error);
-	const description = invalid ? error === true ? null : error : helperText;
-	const hasDescription = isPresent(description);
-	const describedBy = [describedByProp, hasDescription ? descriptionId : null].filter(Boolean).join(" ") || void 0;
-	const hasLabel = Boolean(label);
-	const floatingLabel = floating && hasLabel;
-	const asterisk = required ? /* @__PURE__ */ jsx("span", {
-		"aria-hidden": true,
-		className: "text-danger",
-		children: " *"
-	}) : null;
-	const forwardClick = (e) => {
-		const control = controlRef.current;
-		const target = e.target;
-		if (!control || control.contains(target) || target.closest("button")) return;
-		e.preventDefault();
-		activate(control);
-	};
-	const renderFloatingLabel = (restingWidth) => floatingLabel ? /* @__PURE__ */ jsxs("label", {
-		htmlFor: id,
-		className: cn("pointer-events-none absolute top-1/2 -translate-y-1/2 truncate px-1 leading-normal", "text-fg-muted pointer-coarse:text-base", "transition-[translate,font-size,color] duration-150 ease-out motion-reduce:transition-none", labelStart[size], textSize[size], restingWidth, floatShift[size], "[[data-slot=input-control]:is([data-start],:has(input:focus),:has(input:not(:placeholder-shown)),:has(input:autofill),:has(input:-webkit-autofill),:has(select:focus),:has(select:open),:has(select):not(:has(option[value=\"\"]:checked)))_&]:max-w-[calc(100%-1rem)]", "[[data-slot=input-control]:is([data-start],:has(input:focus),:has(input:not(:placeholder-shown)),:has(input:autofill),:has(input:-webkit-autofill),:has(select:focus),:has(select:open),:has(select):not(:has(option[value=\"\"]:checked)))_&]:text-xs", invalid ? "text-danger" : ["[[data-slot=input-control]:is([data-start],:has(input:focus),:has(input:not(:placeholder-shown)),:has(input:autofill),:has(input:-webkit-autofill),:has(select:focus),:has(select:open),:has(select):not(:has(option[value=\"\"]:checked)))_&]:group-has-[:is(input,select):not(:is(:focus,:open))]/control:text-fg-strong", "group-has-[:is(input,select):is(:focus,:open)]/control:text-input-focus"]),
-		children: [label, asterisk]
-	}) : null;
-	return /* @__PURE__ */ jsxs("div", {
-		"data-slot": "input-field",
-		className: cn("flex w-full flex-col gap-1.5", disabled && "opacity-50", className),
-		children: [
-			hasLabel && !floating && /* @__PURE__ */ jsxs("label", {
-				htmlFor: id,
-				className: "self-start text-sm font-medium text-fg",
-				children: [label, asterisk]
-			}),
-			/* @__PURE__ */ jsxs("div", {
-				"data-slot": "input-control",
-				"data-start": hasStart ? "" : void 0,
-				onMouseDown: forwardClick,
-				className: cn("group/control relative isolate flex items-center rounded-lg border", floatingLabel ? "bg-transparent" : "[--field-bg:var(--color-input-bg)] bg-(--field-bg)", "transition-[border-color,box-shadow,background-color] duration-200 ease-in-out motion-reduce:transition-none", controlHeight[size], invalid ? ["[--field-border:var(--color-danger)] [--field-halo:var(--color-input-halo-invalid)]", "has-[:is(input,select):is(:focus,:open)]:[--field-halo:var(--color-input-halo-invalid-focus)]"] : ["[--field-border:var(--color-input-border)] [--field-halo:transparent]", "has-[:is(input,select):is(:focus,:open)]:[--field-border:var(--color-input-focus)] has-[:is(input,select):is(:focus,:open)]:[--field-halo:var(--color-input-halo)]"], "[--field-lift:0_0_#0000]", !invalid && !disabled && !readOnly && [
-					"hover:not-has-[:is(input,select):is(:focus,:open)]:[--field-border:var(--color-input-border-hover)]",
-					!floatingLabel && "hover:not-has-[:is(input,select):is(:focus,:open)]:[--field-bg:var(--color-input-bg-hover)]",
-					"hover:not-has-[:is(input,select):is(:focus,:open)]:[--field-lift:var(--shadow-input-lift)]"
-				], floatingLabel ? ["border-transparent forced-colors:border-[Canvas]", !readOnly && "[box-shadow:var(--field-lift)]"] : [
-					"border-(--field-border)",
-					readOnly ? "[box-shadow:0_0_0_3px_var(--field-halo)]" : "[box-shadow:var(--shadow-input),var(--field-lift),0_0_0_3px_var(--field-halo)]",
-					"has-[:is(input,select):is(:focus,:open)]:outline-hidden",
-					disabled && "forced-colors:border-[GrayText]"
-				], readOnly && !floatingLabel && "[--field-bg:var(--color-bg)]", disabled && "cursor-not-allowed", "pointer-coarse:before:absolute pointer-coarse:before:inset-x-0 pointer-coarse:before:top-1/2", "pointer-coarse:before:-z-10 pointer-coarse:before:h-11 pointer-coarse:before:-translate-y-1/2"),
-				children: [floatingLabel && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(Notch, {
-					size,
-					ring: "halo",
-					disabled,
-					children: [label, asterisk]
-				}), /* @__PURE__ */ jsxs(Notch, {
-					size,
-					ring: "border",
-					disabled,
-					children: [label, asterisk]
-				})] }), children({
-					id,
-					invalid,
-					describedBy,
-					floating: floatingLabel,
-					floatingLabel: renderFloatingLabel
-				})]
-			}),
-			hasDescription && /* @__PURE__ */ jsxs("p", {
-				id: descriptionId,
-				className: cn("m-0 flex items-start gap-1 text-xs/snug", invalid ? "text-danger" : "text-fg-muted"),
-				children: [invalid && /* @__PURE__ */ jsx(CircleAlert, {
-					"aria-hidden": true,
-					className: "mt-px size-3.5 shrink-0"
-				}), /* @__PURE__ */ jsx("span", { children: description })]
-			}),
-			/* @__PURE__ */ jsx("span", {
-				"aria-live": "polite",
-				"aria-atomic": true,
-				className: "sr-only",
-				children: status
-			})
-		]
-	});
-}
-/** The input family's frame: adornments, actions and the input itself inside FieldShell. */
-function FieldFrame({ label, floating = false, helperText, error, size = "md", start, end, mono = false, validating = false, validatingText = "Checking…", className, inputClassName, inputRef: inputRefProp, actions, status, ref, id, required, disabled, readOnly, placeholder, "aria-describedby": describedByProp, "aria-invalid": ariaInvalid, ...props }) {
-	const ownRef = useRef(null);
-	const inputRef = inputRefProp ?? ownRef;
-	const setRef = useMergedRef(inputRef, ref);
-	const hasStart = isPresent(start);
-	const hasEnd = isPresent(end);
-	return /* @__PURE__ */ jsx(FieldShell, {
-		label,
-		floating,
-		helperText,
-		error,
-		size,
-		id,
-		required,
-		disabled,
-		readOnly,
-		"aria-describedby": describedByProp,
-		hasStart,
-		className,
-		status: validating ? validatingText : status ?? "",
-		controlRef: inputRef,
-		children: (field) => /* @__PURE__ */ jsxs(Fragment, { children: [
-			hasStart ? /* @__PURE__ */ jsx(Adornment, {
-				node: start,
-				side: "start",
-				size
-			}) : null,
-			/* @__PURE__ */ jsxs("span", {
-				className: "@container flex min-w-0 flex-1 self-stretch rounded-[inherit]",
-				children: [field.floatingLabel("max-w-[calc(100cqw-1rem)]"), /* @__PURE__ */ jsx("input", {
-					...props,
-					ref: setRef,
-					id: field.id,
-					required,
-					disabled,
-					readOnly,
-					placeholder: field.floating ? placeholder || " " : placeholder,
-					"aria-invalid": field.invalid ? true : ariaInvalid,
-					"aria-describedby": field.describedBy,
-					spellCheck: mono ? false : props.spellCheck,
-					autoCapitalize: mono ? "off" : props.autoCapitalize,
-					autoCorrect: mono ? "off" : props.autoCorrect,
-					className: cn("h-full min-w-0 flex-1 rounded-[inherit] bg-transparent text-fg outline-none", "placeholder:text-input-placeholder pointer-coarse:text-base", "disabled:cursor-not-allowed", "autofill:[transition:background-color_0s_600000s] autofill:[-webkit-text-fill-color:var(--color-fg)]", textSize[size], inputPadding[size], hasStart && (isText(start) ? "ps-1" : "ps-2"), !validating && hasEnd && isText(end) ? "pe-1" : (validating || hasEnd || actions) && "pe-2", mono && "font-mono", field.floating && ["placeholder:opacity-0", "[[data-slot=input-control]:is([data-start],:has(input:focus),:has(input:not(:placeholder-shown)),:has(input:autofill),:has(input:-webkit-autofill),:has(select:focus),:has(select:open),:has(select):not(:has(option[value=\"\"]:checked)))_&]:placeholder:opacity-100"], inputClassName)
-				})]
-			}),
-			validating ? /* @__PURE__ */ jsx("span", {
-				className: cn("flex shrink-0 items-center self-stretch text-fg-muted", iconSize[size], endSlotPadding[size]),
-				children: /* @__PURE__ */ jsx(LoaderCircle, {
-					"aria-hidden": true,
-					className: "animate-spin motion-reduce:[animation-duration:2.5s]"
-				})
-			}) : hasEnd ? /* @__PURE__ */ jsx(Adornment, {
-				node: end,
-				side: "end",
-				size
-			}) : null,
-			actions ? /* @__PURE__ */ jsx("span", {
-				className: cn("flex shrink-0 items-center gap-0.5", actionsPadding[size]),
-				children: actions
-			}) : null
-		] })
+function Card({ as: Comp = "div", className, ...props }) {
+	const titleId = useId();
+	const [titled, setTitled] = useState(false);
+	return /* @__PURE__ */ jsx(CardContext, {
+		value: {
+			titleId,
+			setTitled
+		},
+		children: /* @__PURE__ */ jsx(Comp, {
+			"aria-labelledby": (Comp === "section" || Comp === "article") && titled && !props["aria-label"] ? titleId : void 0,
+			...props,
+			"data-slot": "card",
+			className: cn("rounded-xl border border-border-strong bg-surface", className)
+		})
+	});
+}
+function CardHeader({ title, description, action, headingLevel = 2, className, ...props }) {
+	const { titleId, setTitled } = useContext(CardContext);
+	useLayoutEffect(() => {
+		setTitled(true);
+		return () => setTitled(false);
+	}, [setTitled]);
+	const Heading = headingLevel === 2 ? "h2" : "h3";
+	return /* @__PURE__ */ jsxs("div", {
+		...props,
+		"data-slot": "card-header",
+		className: cn("flex items-start justify-between gap-4 px-5 pt-5", className),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "min-w-0",
+			children: [/* @__PURE__ */ jsx(Heading, {
+				id: titleId,
+				className: "font-sans text-sm font-medium",
+				children: title
+			}), description && /* @__PURE__ */ jsx("p", {
+				className: "text-xs text-fg-muted",
+				children: description
+			})]
+		}), action && /* @__PURE__ */ jsx("div", {
+			className: "shrink-0",
+			children: action
+		})]
+	});
+}
+function CardContent({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		"data-slot": "card-content",
+		className: cn("p-5 [[data-slot=card-header]+&]:pt-4", className)
 	});
 }
 //#endregion
@@ -1113,7 +1442,7 @@ function ChoiceRow({ slot, label, description, error, labelPosition = "end", gap
 	return /* @__PURE__ */ jsx("label", {
 		"data-slot": slot,
 		className: cn("relative isolate flex min-h-6 min-w-6 items-start text-sm/6 text-fg", "cursor-pointer has-[input:disabled]:cursor-not-allowed has-[input[aria-busy=true]]:cursor-progress", "has-[input:disabled]:opacity-50", "forced-colors:has-[input:disabled]:text-[GrayText] forced-colors:has-[input:disabled]:opacity-100", "pointer-coarse:before:absolute pointer-coarse:before:top-1/2 pointer-coarse:before:left-1/2", "pointer-coarse:before:-z-10 pointer-coarse:before:size-full pointer-coarse:before:min-h-11", "pointer-coarse:before:min-w-11 pointer-coarse:before:-translate-1/2", gap, labelPosition === "start" ? "w-full justify-between" : "w-fit max-w-full", className),
-		children: labelPosition === "start" ? /* @__PURE__ */ jsxs(Fragment, { children: [text, controlSlot] }) : /* @__PURE__ */ jsxs(Fragment, { children: [controlSlot, text] })
+		children: labelPosition === "start" ? /* @__PURE__ */ jsxs(Fragment$1, { children: [text, controlSlot] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [controlSlot, text] })
 	});
 }
 //#endregion
@@ -1236,6 +1565,515 @@ function CheckboxGroup({ legend, description, error, orientation = "vertical", c
 	});
 }
 //#endregion
+//#region src/components/combobox/types.ts
+const isGroup$1 = (item) => "options" in item;
+const normalize = (text) => text.trim().normalize("NFD").replace(/[\u0300-\u036f]/g, "").toLocaleLowerCase();
+const defaultFilter = (option, query) => normalize([option.label, ...option.keywords ?? []].join(" ")).includes(normalize(query));
+//#endregion
+//#region src/components/combobox/use-combobox-position.ts
+const clamp$1 = (n, min, max) => Math.max(min, Math.min(n, Math.max(min, max)));
+/** Top-layer positioning only: unlike Menu, a combobox never transfers focus into the list. */
+function useComboboxPosition(open, inputRef, contentRef) {
+	useLayoutEffect(() => {
+		const content = contentRef.current;
+		const anchor = inputRef.current?.closest("[data-slot=\"input-control\"]");
+		if (!open || !content || !anchor) return;
+		content.showPopover?.();
+		const update = () => {
+			const rect = anchor.getBoundingClientRect();
+			const viewport = window.visualViewport;
+			const left = viewport?.offsetLeft ?? 0;
+			const top = viewport?.offsetTop ?? 0;
+			const width = viewport?.width ?? document.documentElement.clientWidth;
+			const height = viewport?.height ?? document.documentElement.clientHeight;
+			content.style.width = `${Math.min(rect.width, Math.max(0, width - 16))}px`;
+			const below = top + height - rect.bottom - 12;
+			const above = rect.top - top - 12;
+			const side = below < Math.min(content.scrollHeight, 280) && above > below ? "top" : "bottom";
+			content.style.maxHeight = `${Math.max(0, Math.min(280, side === "top" ? above : below))}px`;
+			const w = content.offsetWidth;
+			const h = content.offsetHeight;
+			const rtl = getComputedStyle(anchor).direction === "rtl";
+			content.style.left = `${Math.round(clamp$1(rtl ? rect.right - w : rect.left, left + 8, left + width - w - 8))}px`;
+			content.style.top = `${Math.round(clamp$1(side === "top" ? rect.top - h - 4 : rect.bottom + 4, top + 8, top + height - h - 8))}px`;
+			content.dataset.side = side;
+		};
+		update();
+		const observer = typeof ResizeObserver === "undefined" ? void 0 : new ResizeObserver(update);
+		observer?.observe(anchor);
+		observer?.observe(content);
+		const mutation = new MutationObserver(update);
+		mutation.observe(content, {
+			childList: true,
+			subtree: true,
+			characterData: true
+		});
+		window.addEventListener("resize", update);
+		window.addEventListener("scroll", update, true);
+		window.visualViewport?.addEventListener("resize", update);
+		window.visualViewport?.addEventListener("scroll", update);
+		return () => {
+			observer?.disconnect();
+			mutation.disconnect();
+			window.removeEventListener("resize", update);
+			window.removeEventListener("scroll", update, true);
+			window.visualViewport?.removeEventListener("resize", update);
+			window.visualViewport?.removeEventListener("scroll", update);
+			content.hidePopover?.();
+		};
+	}, [
+		open,
+		inputRef,
+		contentRef
+	]);
+}
+//#endregion
+//#region src/components/combobox/combobox.tsx
+const resultsText = (count) => `${count} ${count === 1 ? "option" : "options"} available.`;
+function Combobox({ options, value, defaultValue = null, onValueChange, inputValue, onInputValueChange, open: openProp, defaultOpen = false, onOpenChange, filter = defaultFilter, selectedOption, loading = false, loadingText = "Loading…", searchError, onRetry, retryText = "Retry", emptyText = "No matching options.", clearable = true, openOnFocus = false, clearLabel = "Clear selection", openLabel = "Open options", closeLabel = "Close options", requiredText = "Choose an option from the list.", unresolvedText = "The selected option is unavailable.", getResultsText = resultsText, label, floating, helperText, error, size = "md", start, mono, inputClassName, contentClassName, className, name, form, disabled, readOnly, required, ref, id: idProp, onClick, onFocus, onBlur, onKeyDown, onCompositionStart, onCompositionEnd, onInvalid, ...props }) {
+	const autoId = useId();
+	const id = idProp ?? `${autoId}-input`;
+	const listId = `${autoId}-list`;
+	const rootRef = useRef(null);
+	const inputRef = useRef(null);
+	const contentRef = useRef(null);
+	const hiddenRef = useRef(null);
+	const composing = useRef(false);
+	const skipFocusOpen = useRef(false);
+	const [internalValue, setInternalValue] = useState(defaultValue);
+	const [internalOpen, setInternalOpen] = useState(defaultOpen);
+	const [draft, setDraft] = useState(null);
+	const [dirty, setDirty] = useState(false);
+	const [compositionText, setCompositionText] = useState(null);
+	const [active, setActive] = useState(null);
+	const [nativeInvalid, setNativeInvalid] = useState(false);
+	const selectedValue = value === void 0 ? internalValue : value;
+	const open = !disabled && !readOnly && (openProp ?? internalOpen);
+	const flat = useMemo(() => {
+		const items = options.flatMap((item) => isGroup$1(item) ? [...item.options] : [item]);
+		const seen = /* @__PURE__ */ new Set();
+		for (const item of items) {
+			if (!item.value || seen.has(item.value)) throw new Error("Combobox option values must be unique, non-empty strings");
+			seen.add(item.value);
+		}
+		return items;
+	}, [options]);
+	const resolved = flat.find((item) => item.value === selectedValue) ?? (selectedOption?.value === selectedValue ? selectedOption : null);
+	const [cached, setCached] = useState(resolved);
+	const selected = resolved ?? (cached?.value === selectedValue ? cached : null);
+	const [initialOption, setInitialOption] = useState(resolved?.value === defaultValue ? resolved : null);
+	if (resolved?.value === defaultValue && resolved !== initialOption) setInitialOption(resolved);
+	const text = compositionText !== null ? draft ?? inputValue ?? selected?.label ?? "" : inputValue ?? draft ?? selected?.label ?? "";
+	const query = dirty ? compositionText ?? text : "";
+	const blocked = loading || Boolean(searchError);
+	const [previousResults, setPreviousResults] = useState({
+		options,
+		blocked,
+		filter
+	});
+	if (previousResults.options !== options || previousResults.blocked !== blocked || previousResults.filter !== filter) {
+		setPreviousResults({
+			options,
+			blocked,
+			filter
+		});
+		setActive(null);
+	}
+	const visible = flat.filter((item) => filter === false || !query || filter(item, query));
+	const activeItem = !blocked && active?.options === options && active.query === query ? visible.find((item) => item.value === active.value && !item.disabled) : void 0;
+	const optionId = (item) => `${autoId}-option-${encodeURIComponent(item.value)}`;
+	const activeId = open && activeItem ? optionId(activeItem) : void 0;
+	const invalidMessage = selectedValue !== null && !selected ? unresolvedText : required && selectedValue === null ? requiredText : "";
+	const fieldError = error || (nativeInvalid && invalidMessage ? invalidMessage : void 0);
+	const count = visible.filter((item) => !item.disabled).length;
+	const status = open ? searchError ? typeof searchError === "string" ? searchError : "Unable to load options." : loading ? loadingText : getResultsText(count) : "";
+	const [previousSelection, setPreviousSelection] = useState({
+		value: selectedValue,
+		label: selected?.label
+	});
+	if (resolved && resolved !== cached) setCached(resolved);
+	if (previousSelection.value !== selectedValue || previousSelection.label !== selected?.label) {
+		setPreviousSelection({
+			value: selectedValue,
+			label: selected?.label
+		});
+		setDraft(null);
+		setDirty(false);
+		setActive(null);
+	}
+	if (nativeInvalid && !invalidMessage) setNativeInvalid(false);
+	useLayoutEffect(() => {
+		inputRef.current?.setCustomValidity(disabled || readOnly ? "" : invalidMessage);
+	}, [
+		invalidMessage,
+		disabled,
+		readOnly
+	]);
+	useComboboxPosition(open, inputRef, contentRef);
+	useLayoutEffect(() => {
+		if (activeId) document.getElementById(activeId)?.scrollIntoView?.({ block: "nearest" });
+	}, [activeId]);
+	const updateText = (next, reason, fallback = false) => {
+		setDraft(fallback ? null : next);
+		if (next !== text || reason === "input") onInputValueChange?.(next, { reason });
+	};
+	const changeOpen = (next, reason) => {
+		if (openProp === void 0) setInternalOpen(next);
+		if (next !== open) onOpenChange?.(next, { reason });
+	};
+	const close = (reason) => {
+		changeOpen(false, reason);
+		updateText(selected?.label ?? "", "revert", true);
+		setDirty(false);
+		setActive(null);
+	};
+	const show = (reason, direction) => {
+		if (disabled || readOnly) return;
+		changeOpen(true, reason);
+		setDirty(false);
+		const items = flat.filter((item) => !item.disabled);
+		const initial = items.find((item) => item.value === selectedValue) ?? (direction === 1 ? items[0] : direction === -1 ? items.at(-1) : void 0);
+		setActive(initial ? {
+			value: initial.value,
+			options,
+			query: ""
+		} : null);
+	};
+	const focusInput = () => {
+		skipFocusOpen.current = true;
+		inputRef.current?.focus({ preventScroll: true });
+		skipFocusOpen.current = false;
+	};
+	const clear = (reason) => {
+		if (value === void 0) setInternalValue(null);
+		if (selectedValue !== null) onValueChange?.(null, {
+			reason: "clear",
+			option: null
+		});
+		updateText("", reason);
+		setDirty(true);
+		setActive(null);
+		changeOpen(true, "clear");
+	};
+	const edit = (next) => {
+		if (disabled || readOnly) return;
+		if (next === "") clear("input");
+		else {
+			updateText(next, "input");
+			setDirty(true);
+			setActive(null);
+			changeOpen(true, "input");
+		}
+	};
+	const choose = (item) => {
+		if (blocked || disabled || readOnly || item.disabled) return;
+		setCached(item);
+		if (value === void 0) setInternalValue(item.value);
+		if (selectedValue !== item.value) onValueChange?.(item.value, {
+			reason: "select",
+			option: item
+		});
+		updateText(item.label, "selection", true);
+		setDirty(false);
+		setActive(null);
+		changeOpen(false, "select");
+		focusInput();
+	};
+	const dismiss = useEffectEvent(close);
+	useLayoutEffect(() => {
+		if (!open) return;
+		const outside = (event) => {
+			if (!event.composedPath().includes(rootRef.current)) dismiss("outside");
+		};
+		document.addEventListener("pointerdown", outside, true);
+		return () => {
+			document.removeEventListener("pointerdown", outside, true);
+		};
+	}, [open]);
+	const wasOpen = useRef(open);
+	const settle = useEffectEvent(() => {
+		updateText(selected?.label ?? "", "revert", true);
+		setDirty(false);
+		setActive(null);
+	});
+	useLayoutEffect(() => {
+		if (wasOpen.current && !open) settle();
+		wasOpen.current = open;
+	}, [open]);
+	const reset = useEffectEvent(() => {
+		const nextValue = value === void 0 ? defaultValue : value;
+		const nextOption = flat.find((item) => item.value === nextValue) ?? (selectedOption?.value === nextValue ? selectedOption : null) ?? (cached?.value === nextValue ? cached : null) ?? (initialOption?.value === nextValue ? initialOption : null);
+		if (nextOption) setCached(nextOption);
+		const nextText = inputValue ?? nextOption?.label ?? "";
+		if (value === void 0) setInternalValue(nextValue);
+		if (openProp === void 0) setInternalOpen(false);
+		updateText(nextText, "reset", true);
+		setDirty(false);
+		setCompositionText(null);
+		composing.current = false;
+		setActive(null);
+		setNativeInvalid(false);
+		if (inputRef.current) inputRef.current.value = nextText;
+		if (hiddenRef.current) hiddenRef.current.value = nextValue ?? "";
+	});
+	useLayoutEffect(() => {
+		const owner = inputRef.current?.form;
+		if (!owner) return;
+		let timer;
+		const handleReset = (event) => {
+			clearTimeout(timer);
+			timer = setTimeout(() => {
+				if (!event.defaultPrevented) reset();
+			}, 0);
+		};
+		owner.addEventListener("reset", handleReset);
+		return () => {
+			clearTimeout(timer);
+			owner.removeEventListener("reset", handleReset);
+		};
+	}, [form]);
+	const renderOption = (item) => /* @__PURE__ */ jsxs("div", {
+		id: optionId(item),
+		role: "option",
+		"aria-selected": item.value === selectedValue,
+		"aria-disabled": item.disabled || void 0,
+		"aria-labelledby": `${optionId(item)}-label`,
+		"aria-describedby": item.description ? `${optionId(item)}-description` : void 0,
+		"data-slot": "combobox-option",
+		"data-active": activeItem?.value === item.value ? "" : void 0,
+		className: cn("flex min-h-8.5 cursor-default items-center gap-2 rounded-lg px-2 py-1.5 text-sm/5 text-fg outline-none select-none pointer-coarse:min-h-11", "data-active:bg-popover-highlight data-active:outline-1 data-active:-outline-offset-1 data-active:outline-input-border", "aria-disabled:cursor-not-allowed aria-disabled:opacity-50 forced-colors:data-active:outline-[Highlight]"),
+		onPointerMove: (event) => {
+			if (event.pointerType !== "touch" && !item.disabled) setActive({
+				value: item.value,
+				options,
+				query
+			});
+		},
+		onMouseDown: (event) => event.preventDefault(),
+		onClick: () => choose(item),
+		children: [
+			item.icon && /* @__PURE__ */ jsx("span", {
+				"aria-hidden": true,
+				className: "shrink-0 text-fg-muted [&_svg]:size-4",
+				children: item.icon
+			}),
+			/* @__PURE__ */ jsxs("span", {
+				className: "min-w-0 flex-1 wrap-anywhere",
+				children: [/* @__PURE__ */ jsx("span", {
+					id: `${optionId(item)}-label`,
+					children: item.label
+				}), item.description && /* @__PURE__ */ jsx("span", {
+					id: `${optionId(item)}-description`,
+					className: "mt-0.5 block text-xs/snug text-fg-muted",
+					children: item.description
+				})]
+			}),
+			/* @__PURE__ */ jsx(Check, {
+				"aria-hidden": true,
+				className: cn("size-4 shrink-0", item.value !== selectedValue && "invisible")
+			})
+		]
+	}, item.value);
+	return /* @__PURE__ */ jsxs("div", {
+		ref: rootRef,
+		onBlur: (event) => {
+			if ((open || dirty) && !rootRef.current?.contains(event.relatedTarget)) close("blur");
+		},
+		"data-slot": "combobox",
+		"data-state": open ? "open" : "closed",
+		className: cn("w-full", className),
+		children: [
+			/* @__PURE__ */ jsx(FieldFrame, {
+				...props,
+				ref,
+				inputRef,
+				id,
+				type: "text",
+				form,
+				label,
+				floating,
+				helperText,
+				error: fieldError,
+				required,
+				disabled,
+				readOnly,
+				size,
+				start,
+				mono,
+				value: text,
+				role: "combobox",
+				"aria-autocomplete": "list",
+				"aria-expanded": open,
+				"aria-controls": open ? listId : void 0,
+				"aria-activedescendant": activeId,
+				autoComplete: props.autoComplete ?? "off",
+				status,
+				inputClassName,
+				className: "pointer-coarse:**:data-[slot=input-control]:min-h-11",
+				onChange: (event) => {
+					if (composing.current) setDraft(event.currentTarget.value);
+					else edit(event.currentTarget.value);
+				},
+				onCompositionStart: (event) => {
+					onCompositionStart?.(event);
+					composing.current = true;
+					setCompositionText(query);
+				},
+				onCompositionEnd: (event) => {
+					onCompositionEnd?.(event);
+					composing.current = false;
+					setCompositionText(null);
+					edit(event.currentTarget.value);
+				},
+				onClick: (event) => {
+					onClick?.(event);
+					if (!event.defaultPrevented && !open) show("trigger");
+				},
+				onFocus: (event) => {
+					onFocus?.(event);
+					if (!event.defaultPrevented && openOnFocus && !open && !skipFocusOpen.current) show("input");
+				},
+				onBlur,
+				onInvalid: (event) => {
+					setNativeInvalid(true);
+					onInvalid?.(event);
+				},
+				onKeyDown: (event) => {
+					onKeyDown?.(event);
+					if (event.defaultPrevented || disabled || readOnly || composing.current || event.nativeEvent.isComposing || event.nativeEvent.keyCode === 229) return;
+					if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+						event.preventDefault();
+						const direction = event.key === "ArrowDown" ? 1 : -1;
+						if (!open) {
+							show("keyboard", direction);
+							return;
+						}
+						if (blocked) return;
+						const enabled = visible.filter((item) => !item.disabled);
+						const index = enabled.findIndex((item) => item.value === activeItem?.value);
+						const next = index < 0 ? direction === 1 ? enabled[0] : enabled.at(-1) : enabled[index + direction];
+						if (next) setActive({
+							value: next.value,
+							options,
+							query
+						});
+					} else if (event.key === "Enter" && open) {
+						event.preventDefault();
+						if (activeItem) choose(activeItem);
+					} else if (event.key === "Escape" && open) {
+						event.preventDefault();
+						event.stopPropagation();
+						close("escape");
+					} else if (event.key === "Tab" && !(searchError && onRetry)) close("blur");
+				},
+				actions: !readOnly && /* @__PURE__ */ jsxs(Fragment$1, { children: [clearable && (text !== "" || selectedValue !== null) && /* @__PURE__ */ jsx(Button, {
+					type: "button",
+					icon: /* @__PURE__ */ jsx(X, {}),
+					"aria-label": clearLabel,
+					intent: "ghost",
+					size,
+					disabled,
+					className: cn(compactButton[size], "pointer-coarse:size-11 pointer-coarse:before:hidden"),
+					onMouseDown: (event) => event.preventDefault(),
+					onClick: () => {
+						clear("clear");
+						focusInput();
+					}
+				}), /* @__PURE__ */ jsx(Button, {
+					type: "button",
+					icon: /* @__PURE__ */ jsx(ChevronDown, {}),
+					tabIndex: -1,
+					"aria-label": open ? closeLabel : openLabel,
+					"aria-expanded": open,
+					"aria-controls": open ? listId : void 0,
+					disabled,
+					intent: "ghost",
+					size,
+					className: cn(compactButton[size], "pointer-coarse:size-11 pointer-coarse:before:hidden"),
+					onMouseDown: (event) => event.preventDefault(),
+					onClick: () => {
+						focusInput();
+						if (open) close("trigger");
+						else show("trigger");
+					}
+				})] })
+			}),
+			name && /* @__PURE__ */ jsx("input", {
+				ref: hiddenRef,
+				type: "hidden",
+				name,
+				form,
+				disabled,
+				value: selectedValue ?? ""
+			}),
+			open && /* @__PURE__ */ jsxs("div", {
+				ref: contentRef,
+				popover: "manual",
+				"data-slot": "combobox-content",
+				className: cn("fixed inset-auto z-50 m-0 box-border max-h-70 overflow-y-auto rounded-xl border border-popover-border bg-popover-bg p-1 font-sans text-sm text-fg shadow-popover outline-none scrollbar-subtle", "transition-opacity duration-150 starting:opacity-0 motion-reduce:transition-none", contentClassName),
+				onKeyDown: (event) => {
+					if (event.key === "Escape") {
+						event.preventDefault();
+						event.stopPropagation();
+						close("escape");
+						focusInput();
+					}
+				},
+				children: [/* @__PURE__ */ jsx("div", {
+					id: listId,
+					role: "listbox",
+					"aria-label": label ?? props["aria-label"],
+					"aria-busy": loading || void 0,
+					children: !blocked && options.map((item, index) => {
+						if (!isGroup$1(item)) return visible.includes(item) ? renderOption(item) : null;
+						const members = item.options.filter((option) => visible.includes(option));
+						if (!members.length) return null;
+						return /* @__PURE__ */ jsxs("div", {
+							role: "group",
+							"aria-labelledby": `${autoId}-group-${index}`,
+							"data-slot": "combobox-group",
+							className: "not-first:mt-1 not-first:border-t not-first:border-popover-border not-first:pt-1",
+							children: [/* @__PURE__ */ jsx("div", {
+								id: `${autoId}-group-${index}`,
+								className: "px-2 pt-1.5 pb-1 text-xs font-medium text-fg-muted",
+								children: item.label
+							}), members.map(renderOption)]
+						}, `${item.label}-${index}`);
+					})
+				}), searchError ? /* @__PURE__ */ jsxs("div", {
+					className: "flex items-start gap-2 p-3 text-xs text-danger",
+					children: [
+						/* @__PURE__ */ jsx(CircleAlert, {
+							"aria-hidden": true,
+							className: "mt-px size-3.5 shrink-0"
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: "flex-1",
+							children: searchError
+						}),
+						onRetry && /* @__PURE__ */ jsx(Button, {
+							type: "button",
+							size: "sm",
+							intent: "secondary",
+							onClick: onRetry,
+							children: retryText
+						})
+					]
+				}) : loading ? /* @__PURE__ */ jsxs("div", {
+					className: "flex items-center justify-center gap-2 p-4 text-sm text-fg-muted",
+					children: [/* @__PURE__ */ jsx(LoaderCircle, {
+						"aria-hidden": true,
+						className: "size-4 animate-spin motion-reduce:[animation-duration:2.5s]"
+					}), loadingText]
+				}) : visible.length === 0 ? /* @__PURE__ */ jsx("div", {
+					className: "p-4 text-center text-sm text-fg-muted",
+					children: emptyText
+				}) : null]
+			})
+		]
+	});
+}
+//#endregion
 //#region src/components/modal/modal-shell.tsx
 const ModalContext = createContext(null);
 /** Parts of one wrapper must not work inside the other: a DialogHeader in a Drawer throws too. */
@@ -1410,7 +2248,7 @@ function ModalShell({ kind, open, onOpenChange, alert = false, dismissible = tru
 			onMouseDown: handleMouseDown,
 			onClick: handleClick,
 			className,
-			children: rendered && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+			children: rendered && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
 				hidden: true,
 				ref: showOnAttach
 			}, closeCount), children] })
@@ -1617,32 +2455,352 @@ function DrawerHeader({ title, description, className, ...props }) {
 		})]
 	});
 }
-/** Fills the space between header and footer and scrolls on its own; they stay put. */
-function DrawerBody({ className, ...props }) {
+/** Fills the space between header and footer and scrolls on its own; they stay put. */
+function DrawerBody({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		"data-slot": "drawer-body",
+		className: cn("min-h-0 flex-1 overflow-y-auto overscroll-contain px-6 py-1 text-sm text-fg", className)
+	});
+}
+/** Actions, right-aligned: Cancel first, the primary action last (rightmost). */
+function DrawerFooter({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		"data-slot": "drawer-footer",
+		className: cn("flex shrink-0 flex-wrap items-center justify-end gap-2 px-6 pt-5 pb-6", className)
+	});
+}
+/** A ghost icon button that closes the drawer, for custom headers. */
+function DrawerClose({ size = "sm", icon, ...props }) {
+	const { requestClose } = useDrawerContext("DrawerClose");
+	return /* @__PURE__ */ jsx(Button, {
+		...props,
+		intent: "ghost",
+		size,
+		icon: icon ?? /* @__PURE__ */ jsx(X, {}),
+		tooltip: false,
+		onClick: () => requestClose("close-button")
+	});
+}
+//#endregion
+//#region src/components/dropdown-menu/dropdown-menu.tsx
+const MenuContext = createContext(null);
+function useMenu() {
+	const value = use(MenuContext);
+	if (!value) throw new Error("DropdownMenu parts must be inside DropdownMenu");
+	return value;
+}
+function DropdownMenu({ children, open: controlled, defaultOpen = false, onOpenChange }) {
+	const [internal, setInternal] = useState(defaultOpen);
+	const id = useId();
+	const trigger = useRef(null);
+	const content = useRef(null);
+	const initialFocus = useRef("first");
+	const reason = useRef("trigger");
+	return /* @__PURE__ */ jsx(MenuContext, {
+		value: {
+			open: controlled ?? internal,
+			triggerId: `${id}-trigger`,
+			contentId: `${id}-menu`,
+			trigger,
+			content,
+			initialFocus,
+			reason,
+			change(next, why, focus = "first") {
+				if (next) initialFocus.current = focus;
+				reason.current = why;
+				if (controlled === void 0) setInternal(next);
+				onOpenChange?.(next, why);
+			}
+		},
+		children
+	});
+}
+function DropdownMenuTrigger({ asChild = false, ref, onClick, onClickCapture, onKeyDown, disabled, ...props }) {
+	const menu = useMenu();
+	const mergedRef = useMergedRef(menu.trigger, ref);
+	return /* @__PURE__ */ jsx(asChild ? Slot : "button", {
+		...props,
+		ref: mergedRef,
+		id: menu.triggerId,
+		type: "button",
+		"data-slot": "dropdown-menu-trigger",
+		"data-state": menu.open ? "open" : "closed",
+		disabled: asChild ? disabled : void 0,
+		"aria-haspopup": "menu",
+		"aria-expanded": menu.open,
+		"aria-controls": menu.open ? menu.contentId : void 0,
+		"aria-disabled": disabled || props["aria-disabled"] || void 0,
+		onClickCapture: (event) => {
+			if (disabled) {
+				event.preventDefault();
+				event.stopPropagation();
+				return;
+			}
+			onClickCapture?.(event);
+		},
+		onClick: (event) => {
+			onClick?.(event);
+			if (disabled || event.defaultPrevented || event.currentTarget.getAttribute("aria-disabled") === "true") return;
+			menu.change(!menu.open, "trigger");
+		},
+		onKeyDown: (event) => {
+			onKeyDown?.(event);
+			if (disabled || event.defaultPrevented || event.currentTarget.getAttribute("aria-disabled") === "true") return;
+			if (["ArrowDown", "ArrowUp"].includes(event.key)) {
+				event.preventDefault();
+				menu.change(true, "trigger", event.key === "ArrowUp" ? "last" : "first");
+			}
+		}
+	});
+}
+const opposite = {
+	top: "bottom",
+	bottom: "top",
+	left: "right",
+	right: "left"
+};
+const clamp = (value, low, high) => Math.max(low, Math.min(value, Math.max(low, high)));
+function items(content) {
+	return Array.from(content.querySelectorAll("[role=\"menuitem\"]")).filter((item) => !item.hidden && item.getAttribute("aria-hidden") !== "true");
+}
+function DropdownMenuContent(props) {
+	const { open } = useMenu();
+	return open ? /* @__PURE__ */ jsx(OpenContent, { ...props }) : null;
+}
+function OpenContent({ side = "bottom", align = "end", sideOffset = 6, className, ref, onKeyDown, style, ...props }) {
+	const menu = useMenu();
+	const { content: contentRef, trigger: triggerRef, initialFocus, reason: closeReason } = menu;
+	const mergedRef = useMergedRef(contentRef, ref);
+	const query = useRef({
+		text: "",
+		time: 0
+	});
+	const dismiss = useEffectEvent((reason) => menu.change(false, reason));
+	useLayoutEffect(() => {
+		const content = contentRef.current;
+		const trigger = triggerRef.current;
+		if (!content || !trigger) return;
+		content.showPopover?.();
+		const entries = items(content);
+		((initialFocus.current === "last" ? entries.at(-1) : entries[0]) ?? content).focus({ preventScroll: true });
+		const outside = (event) => {
+			const path = event.composedPath();
+			if (!path.includes(content) && !path.includes(trigger)) dismiss("outside");
+		};
+		const focusOutside = (event) => {
+			if (closeReason.current === "tab") return;
+			if (!content.contains(event.target) && !trigger.contains(event.target)) dismiss("outside");
+		};
+		const reasonRef = closeReason;
+		document.addEventListener("pointerdown", outside, true);
+		document.addEventListener("focusin", focusOutside);
+		return () => {
+			document.removeEventListener("pointerdown", outside, true);
+			document.removeEventListener("focusin", focusOutside);
+			const restore = content.contains(document.activeElement) && !["outside", "tab"].includes(reasonRef.current);
+			content.hidePopover?.();
+			if (restore && trigger.isConnected) trigger.focus({ preventScroll: true });
+		};
+	}, [
+		contentRef,
+		triggerRef,
+		initialFocus,
+		closeReason
+	]);
+	useLayoutEffect(() => {
+		const content = contentRef.current;
+		const trigger = triggerRef.current;
+		if (!content || !trigger) return;
+		const update = () => {
+			const rect = trigger.getBoundingClientRect();
+			const viewport = window.visualViewport;
+			const left = viewport?.offsetLeft ?? 0;
+			const top = viewport?.offsetTop ?? 0;
+			const width = viewport?.width ?? document.documentElement.clientWidth;
+			const height = viewport?.height ?? document.documentElement.clientHeight;
+			const gap = Math.max(0, sideOffset);
+			content.style.maxWidth = `${Math.max(0, width - 16)}px`;
+			content.style.maxHeight = `${Math.max(0, height - 16)}px`;
+			const room = {
+				top: rect.top - top,
+				bottom: top + height - rect.bottom,
+				left: rect.left - left,
+				right: left + width - rect.right
+			};
+			const vertical = side === "top" || side === "bottom";
+			const needed = (vertical ? content.scrollHeight : content.offsetWidth) + gap + 8;
+			const actual = room[side] < needed && room[opposite[side]] > room[side] ? opposite[side] : side;
+			if (vertical) content.style.maxHeight = `${Math.max(0, room[actual] - gap - 8)}px`;
+			else content.style.maxWidth = `${Math.max(0, room[actual] - gap - 8)}px`;
+			const w = content.offsetWidth;
+			const h = content.offsetHeight;
+			const rtl = getComputedStyle(trigger).direction === "rtl";
+			const fraction = {
+				start: 0,
+				center: .5,
+				end: 1
+			}[align];
+			const horizontalFraction = rtl ? 1 - fraction : fraction;
+			const x = vertical ? rect.left + (rect.width - w) * horizontalFraction : actual === "left" ? rect.left - w - gap : rect.right + gap;
+			const y = vertical ? actual === "top" ? rect.top - h - gap : rect.bottom + gap : rect.top + (rect.height - h) * fraction;
+			content.style.left = `${Math.round(clamp(x, left + 8, left + width - w - 8))}px`;
+			content.style.top = `${Math.round(clamp(y, top + 8, top + height - h - 8))}px`;
+			content.dataset.side = actual;
+		};
+		update();
+		const observer = new ResizeObserver(update);
+		observer.observe(trigger);
+		observer.observe(content);
+		window.addEventListener("resize", update);
+		window.addEventListener("scroll", update, true);
+		window.visualViewport?.addEventListener("resize", update);
+		window.visualViewport?.addEventListener("scroll", update);
+		return () => {
+			observer.disconnect();
+			window.removeEventListener("resize", update);
+			window.removeEventListener("scroll", update, true);
+			window.visualViewport?.removeEventListener("resize", update);
+			window.visualViewport?.removeEventListener("scroll", update);
+		};
+	}, [
+		side,
+		align,
+		sideOffset,
+		contentRef,
+		triggerRef
+	]);
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		ref: mergedRef,
+		id: menu.contentId,
+		role: "menu",
+		tabIndex: -1,
+		"aria-labelledby": props["aria-label"] ? void 0 : menu.triggerId,
+		popover: "manual",
+		"data-slot": "dropdown-menu-content",
+		"data-state": "open",
+		style,
+		className: cn("fixed inset-auto z-50 m-0 box-border w-max min-w-50 overflow-y-auto rounded-lg border border-popover-border bg-popover-bg p-1 font-sans text-sm text-fg shadow-popover outline-none", "transition-opacity duration-150 starting:opacity-0 motion-reduce:transition-none", className),
+		onKeyDown: (event) => {
+			onKeyDown?.(event);
+			if (event.defaultPrevented) return;
+			const entries = items(event.currentTarget);
+			const index = entries.indexOf(document.activeElement);
+			if (event.key === "Escape") {
+				event.preventDefault();
+				event.stopPropagation();
+				menu.change(false, "escape");
+			} else if (event.key === "Tab") {
+				event.preventDefault();
+				const trigger = menu.trigger.current;
+				if (!trigger) return;
+				const scope = trigger.closest("dialog[open]") ?? document.body;
+				const tabbables = Array.from(scope.querySelectorAll("a[href], button, input, select, textarea, [tabindex]")).filter((el) => el.tabIndex >= 0 && !el.matches(":disabled") && !el.closest("[inert]") && !event.currentTarget.contains(el) && el.getClientRects().length > 0);
+				const target = tabbables[tabbables.indexOf(trigger) + (event.shiftKey ? -1 : 1)];
+				menu.change(false, "tab");
+				(target ?? trigger).focus();
+			} else if ([
+				"ArrowDown",
+				"ArrowUp",
+				"Home",
+				"End"
+			].includes(event.key)) {
+				event.preventDefault();
+				entries[event.key === "Home" ? 0 : event.key === "End" ? entries.length - 1 : (index + (event.key === "ArrowDown" ? 1 : -1) + entries.length) % entries.length]?.focus();
+			} else if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey && event.key !== " ") {
+				event.preventDefault();
+				const now = Date.now();
+				query.current.text = (now - query.current.time > 500 ? "" : query.current.text) + event.key.toLocaleLowerCase();
+				query.current.time = now;
+				const text = query.current.text;
+				const term = Array.from(text).every((char) => char === text[0]) ? text[0] : text;
+				[...entries.slice(index + 1), ...entries.slice(0, index + 1)].find((item) => (item.dataset.textValue ?? item.textContent ?? "").trim().toLocaleLowerCase().startsWith(term))?.focus();
+			}
+		}
+	});
+}
+function DropdownMenuItem({ asChild = false, iconLeft, tone = "default", textValue, disabled, onSelect, onClick, onClickCapture, onAuxClickCapture, onKeyDown, onPointerMove, children, className, ...props }) {
+	const menu = useMenu();
+	const Component = asChild ? Slot : "button";
+	const renderContent = (label) => /* @__PURE__ */ jsxs(Fragment$1, { children: [iconLeft && /* @__PURE__ */ jsx("span", {
+		"aria-hidden": true,
+		children: iconLeft
+	}), label] });
+	const child = asChild ? Children.only(children) : null;
+	const content = isValidElement(child) ? cloneElement(child, { children: wrapChildren(child.props.children, renderContent) }) : renderContent(children);
+	return /* @__PURE__ */ jsx(Component, {
+		...props,
+		type: asChild ? void 0 : "button",
+		role: "menuitem",
+		tabIndex: -1,
+		"aria-disabled": disabled || void 0,
+		"data-slot": "dropdown-menu-item",
+		"data-tone": tone,
+		"data-text-value": textValue,
+		className: cn("flex min-h-8 w-full cursor-default items-center gap-2 rounded-md px-2 py-1.5 text-start text-sm/snug outline-none select-none pointer-coarse:min-h-10", "focus:bg-popover-highlight focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-focus", "aria-disabled:cursor-not-allowed aria-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0", tone === "danger" ? "text-danger-subtle-fg focus:bg-danger-subtle-bg" : "text-fg [&_svg]:text-fg-muted", className),
+		onClickCapture: (event) => {
+			if (disabled) {
+				event.preventDefault();
+				event.stopPropagation();
+				return;
+			}
+			onClickCapture?.(event);
+		},
+		onAuxClickCapture: (event) => {
+			if (disabled) {
+				event.preventDefault();
+				event.stopPropagation();
+				return;
+			}
+			onAuxClickCapture?.(event);
+		},
+		onPointerMove: (event) => {
+			onPointerMove?.(event);
+			if (!event.defaultPrevented && event.pointerType !== "touch") event.currentTarget.focus({ preventScroll: true });
+		},
+		onKeyDown: (event) => {
+			onKeyDown?.(event);
+			if (event.defaultPrevented) return;
+			if (event.key === " " || event.key === "Enter") {
+				event.preventDefault();
+				event.currentTarget.click();
+			}
+		},
+		onClick: (event) => {
+			if (disabled) {
+				event.preventDefault();
+				return;
+			}
+			onClick?.(event);
+			const selection = new Event("select", { cancelable: true });
+			onSelect?.(selection);
+			if (!selection.defaultPrevented) menu.change(false, "item-select");
+		},
+		children: content
+	});
+}
+function DropdownMenuGroup({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		...props,
-		"data-slot": "drawer-body",
-		className: cn("min-h-0 flex-1 overflow-y-auto overscroll-contain px-6 py-1 text-sm text-fg", className)
+		role: "group",
+		"data-slot": "dropdown-menu-group",
+		className
 	});
 }
-/** Actions, right-aligned: Cancel first, the primary action last (rightmost). */
-function DrawerFooter({ className, ...props }) {
+function DropdownMenuLabel({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		...props,
-		"data-slot": "drawer-footer",
-		className: cn("flex shrink-0 flex-wrap items-center justify-end gap-2 px-6 pt-5 pb-6", className)
+		"data-slot": "dropdown-menu-label",
+		className: cn("px-2 py-1.5 text-xs text-fg-muted", className)
 	});
 }
-/** A ghost icon button that closes the drawer, for custom headers. */
-function DrawerClose({ size = "sm", icon, ...props }) {
-	const { requestClose } = useDrawerContext("DrawerClose");
-	return /* @__PURE__ */ jsx(Button, {
+function DropdownMenuSeparator({ className, ...props }) {
+	return /* @__PURE__ */ jsx("hr", {
 		...props,
-		intent: "ghost",
-		size,
-		icon: icon ?? /* @__PURE__ */ jsx(X, {}),
-		tooltip: false,
-		onClick: () => requestClose("close-button")
+		"data-slot": "dropdown-menu-separator",
+		className: cn("my-1 h-px border-0 bg-popover-border", className)
 	});
 }
 //#endregion
@@ -1830,6 +2988,197 @@ function Meter({ label, summary, segments, className, ...props }) {
 	});
 }
 //#endregion
+//#region src/components/radio-group/radio-group.tsx
+const RadioContext = createContext(null);
+function RadioGroup({ name, legend, description, error, value, defaultValue, onValueChange, variant = "default", orientation = "vertical", itemsClassName, children, className, disabled, required, form, ref, "aria-invalid": ariaInvalid, "aria-describedby": describedByProp, ...props }) {
+	const id = useId();
+	const descriptionId = `${id}-description`;
+	const errorId = `${id}-error`;
+	const legendId = `${id}-legend`;
+	const invalid = Boolean(error) || ariaInvalid === true || ariaInvalid === "true";
+	const hasDescription = isPresent(description);
+	const hasError = Boolean(error) && error !== true && isPresent(error);
+	const describedBy = [
+		describedByProp,
+		hasDescription && descriptionId,
+		hasError && errorId
+	].filter(Boolean).join(" ") || void 0;
+	const controlled = value !== void 0;
+	const [internalValue, setInternalValue] = useState(defaultValue ?? null);
+	const selected = controlled ? value : internalValue;
+	const groupRef = useRef(null);
+	const mergedRef = useMergedRef(groupRef, ref);
+	const inputs = useRef(/* @__PURE__ */ new Set());
+	const currentSelection = useRef(selected);
+	useLayoutEffect(() => {
+		currentSelection.current = selected;
+	}, [selected]);
+	const register = useCallback((node) => {
+		const members = inputs.current;
+		if ([...members].some((input) => input.value === node.value)) throw new Error(`Radio values must be unique within a RadioGroup: "${node.value}"`);
+		members.add(node);
+		const reconcile = () => {
+			queueMicrotask(() => {
+				if (controlled || !groupRef.current) return;
+				setInternalValue((current) => [...members].some((input) => input.value === current) ? current : null);
+			});
+		};
+		reconcile();
+		return () => {
+			members.delete(node);
+			reconcile();
+		};
+	}, [controlled]);
+	useLayoutEffect(() => {
+		const owner = groupRef.current?.form;
+		if (!owner) return;
+		let timer;
+		const reset = (event) => {
+			clearTimeout(timer);
+			timer = setTimeout(() => {
+				if (event.defaultPrevented) return;
+				const next = controlled ? currentSelection.current : defaultValue ?? null;
+				const members = [...inputs.current];
+				if (!controlled) setInternalValue(members.some((input) => input.value === next) ? next : null);
+				for (const input of members) input.checked = input.value === next;
+			}, 0);
+		};
+		owner.addEventListener("reset", reset);
+		return () => {
+			clearTimeout(timer);
+			owner.removeEventListener("reset", reset);
+		};
+	}, [
+		controlled,
+		defaultValue,
+		form
+	]);
+	return /* @__PURE__ */ jsx(RadioContext, {
+		value: {
+			name,
+			form,
+			selected,
+			disabled,
+			required,
+			invalid,
+			describedBy,
+			variant,
+			orientation,
+			register,
+			select: (event) => {
+				if (!event.currentTarget.checked) return;
+				const next = event.currentTarget.value;
+				if (!controlled) setInternalValue(next);
+				onValueChange?.(next, event);
+			}
+		},
+		children: /* @__PURE__ */ jsxs("fieldset", {
+			...props,
+			ref: mergedRef,
+			name,
+			form,
+			disabled,
+			"data-slot": "radio-group",
+			"data-variant": variant,
+			role: "radiogroup",
+			"aria-labelledby": props["aria-labelledby"] ?? legendId,
+			"aria-describedby": describedBy,
+			"aria-invalid": invalid ? true : ariaInvalid,
+			"aria-required": required || void 0,
+			"aria-orientation": orientation,
+			className: cn("group/radio-group m-0 min-w-0 border-0 p-0", className),
+			children: [/* @__PURE__ */ jsxs("legend", {
+				id: legendId,
+				className: "float-start mb-1.5 w-full p-0 text-sm font-medium text-fg group-disabled/radio-group:opacity-50",
+				children: [legend, required && /* @__PURE__ */ jsx("span", {
+					"aria-hidden": true,
+					className: "text-danger",
+					children: " *"
+				})]
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "clear-both flex flex-col",
+				children: [
+					hasDescription && /* @__PURE__ */ jsx("p", {
+						id: descriptionId,
+						className: "m-0 -mt-1 mb-2.5 text-xs/snug text-fg-muted group-disabled/radio-group:opacity-50",
+						children: description
+					}),
+					/* @__PURE__ */ jsx("div", {
+						"data-slot": "radio-group-items",
+						"data-orientation": orientation,
+						className: cn("flex gap-2", orientation === "vertical" ? "flex-col" : "flex-row flex-wrap gap-x-6", variant === "card" && orientation === "horizontal" && "gap-3", itemsClassName),
+						children
+					}),
+					hasError && /* @__PURE__ */ jsxs("p", {
+						id: errorId,
+						className: "m-0 mt-2 flex items-start gap-1 text-xs/snug text-danger",
+						children: [/* @__PURE__ */ jsx(CircleAlert, {
+							"aria-hidden": true,
+							className: "mt-px size-3.5 shrink-0"
+						}), /* @__PURE__ */ jsx("span", { children: error })]
+					})
+				]
+			})]
+		})
+	});
+}
+function Radio({ value, label, description, disabled, className, inputClassName, ref, onChange, "aria-describedby": describedBy, ...props }) {
+	const group = useContext(RadioContext);
+	if (!group) throw new Error("Radio must be rendered inside <RadioGroup>");
+	if (value === "") throw new Error("Radio value must be a non-empty string");
+	const ownRef = useRef(null);
+	const mergedRef = useMergedRef(ownRef, ref);
+	const register = group.register;
+	useLayoutEffect(() => {
+		if (ownRef.current) return register(ownRef.current);
+	}, [register, value]);
+	const card = group.variant === "card";
+	const invalid = group.invalid;
+	return /* @__PURE__ */ jsx(ChoiceRow, {
+		slot: "radio",
+		label,
+		description,
+		gap: card ? "gap-3" : "gap-2",
+		controlOffset: "mt-1",
+		"aria-describedby": [describedBy, group.describedBy].filter(Boolean).join(" ") || void 0,
+		className: cn("group/radio wrap-anywhere motion-reduce:**:transition-none", "pointer-coarse:min-h-11 pointer-coarse:py-2.5", card && [
+			"w-full rounded-lg border bg-surface p-3 pointer-coarse:p-3",
+			"transition-[border-color,background-color] duration-150 ease-out",
+			"[&>span:last-child>span:first-child]:font-medium",
+			"has-[input:checked]:bg-[color-mix(in_oklab,var(--color-control-checked)_4%,var(--color-surface))]",
+			"has-[input:focus-visible]:outline-solid has-[input:focus-visible]:outline-2 has-[input:focus-visible]:outline-offset-2",
+			invalid ? "border-danger has-[input:focus-visible]:outline-danger" : "border-input-border has-[input:checked]:border-control-checked has-[input:enabled]:hover:border-input-border-hover has-[input:focus-visible]:outline-control-checked",
+			"forced-colors:has-[input:checked]:border-[Highlight] forced-colors:has-[input:focus-visible]:outline-[Highlight]",
+			group.orientation === "horizontal" && "flex-[1_1_14rem]"
+		], className),
+		control: (row) => /* @__PURE__ */ jsxs("span", {
+			className: "relative inline-grid size-4 place-items-center transition-[scale] duration-100 ease-out has-[input:enabled:active]:scale-[0.92]",
+			children: [/* @__PURE__ */ jsx("input", {
+				...props,
+				ref: mergedRef,
+				"data-slot": "radio-input",
+				type: "radio",
+				name: group.name,
+				form: group.form,
+				value,
+				checked: group.selected === value,
+				disabled: group.disabled || disabled,
+				required: group.required,
+				"aria-labelledby": props["aria-labelledby"] ?? row.labelledBy,
+				"aria-describedby": row.describedBy,
+				onChange: (event) => {
+					onChange?.(event);
+					group.select(event);
+				},
+				className: cn("peer col-start-1 row-start-1 m-0 size-4 cursor-pointer appearance-none rounded-full border outline-hidden disabled:cursor-not-allowed", "bg-input-bg checked:bg-control-checked", "transition-[border-color,background-color,box-shadow] duration-150 ease-out", invalid ? "border-danger [box-shadow:0_0_0_3px_var(--color-input-halo-invalid)]" : "border-input-border checked:border-control-checked group-hover/radio:enabled:not-checked:border-input-border-hover", !card && [invalid ? "focus-visible:[box-shadow:0_0_0_3px_var(--color-input-halo-invalid-focus)] not-forced-colors:focus-visible:outline-danger" : "focus-visible:border-input-focus focus-visible:[box-shadow:0_0_0_3px_var(--color-input-halo)] not-forced-colors:focus-visible:outline-control-checked", "checked:focus-visible:shadow-none checked:focus-visible:outline-solid checked:focus-visible:outline-2 checked:focus-visible:outline-offset-2"], card && "focus-visible:outline-none", "forced-colors:forced-color-adjust-none forced-colors:shadow-none forced-colors:border-[CanvasText] forced-colors:bg-[Canvas]", "forced-colors:checked:border-[Highlight] forced-colors:checked:bg-[Highlight]", "forced-colors:disabled:border-[GrayText] forced-colors:disabled:checked:bg-[GrayText]", !card && "forced-colors:focus-visible:outline-[Highlight]", inputClassName)
+			}), /* @__PURE__ */ jsx("span", {
+				"aria-hidden": true,
+				className: "pointer-events-none col-start-1 row-start-1 size-1.5 scale-0 rounded-full bg-control-checked-fg transition-[scale] duration-150 ease-out peer-checked:scale-100 forced-colors:forced-color-adjust-none forced-colors:bg-[HighlightText] forced-colors:peer-disabled:bg-[Canvas]"
+			})]
+		})
+	});
+}
+//#endregion
 //#region src/components/select/select.tsx
 const selectPadding = {
 	sm: "px-3",
@@ -1914,7 +3263,7 @@ function Select({ options, placeholder, helperText, error, size = "md", start, m
 		className,
 		controlRef: selectRef,
 		activate: openPicker,
-		children: (field) => /* @__PURE__ */ jsxs(Fragment, { children: [
+		children: (field) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
 			field.floatingLabel(labelRestingWidth[size]),
 			/* @__PURE__ */ jsxs("select", {
 				...props,
@@ -1943,12 +3292,12 @@ function Select({ options, placeholder, helperText, error, size = "md", start, m
 			}),
 			hasLeading && /* @__PURE__ */ jsx("span", {
 				"aria-hidden": true,
-				className: cn("pointer-events-none absolute inset-y-0 inset-s-0 flex items-center text-fg-muted [&_svg]:shrink-0", iconSize[size], startSlotPadding[size]),
+				className: cn("pointer-events-none absolute inset-y-0 inset-s-0 flex items-center text-fg-muted [&_svg]:shrink-0", iconSize$1[size], startSlotPadding[size]),
 				children: leading
 			}),
 			/* @__PURE__ */ jsx("span", {
 				"aria-hidden": true,
-				className: cn("pointer-events-none absolute inset-y-0 inset-e-0 flex items-center text-fg-muted", iconSize[size], endSlotPadding[size]),
+				className: cn("pointer-events-none absolute inset-y-0 inset-e-0 flex items-center text-fg-muted", iconSize$1[size], endSlotPadding[size]),
 				children: /* @__PURE__ */ jsx(ChevronDown, { className: "transition-transform duration-150 ease-out group-has-[select:open]/control:rotate-180 motion-reduce:transition-none" })
 			})
 		] })
@@ -2063,7 +3412,7 @@ function TabContent({ icon, badge, children }) {
 					children
 				})]
 			}),
-			badge != null && badge !== false && /* @__PURE__ */ jsxs(Fragment, { children: [" ", /* @__PURE__ */ jsx("span", {
+			badge != null && badge !== false && /* @__PURE__ */ jsxs(Fragment$1, { children: [" ", /* @__PURE__ */ jsx("span", {
 				"data-slot": "tab-badge",
 				className: "inline-flex",
 				children: badge
@@ -2251,7 +3600,7 @@ function SidebarProvider({ children }) {
 function Sidebar({ className, children, ...props }) {
 	const { open, setOpen, drawerId } = useSidebarContext("Sidebar");
 	const label = props["aria-label"] ? { "aria-label": props["aria-label"] } : { "aria-labelledby": props["aria-labelledby"] };
-	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(PanelContext, {
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(PanelContext, {
 		value: { drawer: false },
 		children: /* @__PURE__ */ jsx("nav", {
 			...props,
@@ -2471,13 +3820,586 @@ function SidebarIcon({ className, ...props }) {
 }
 /** Count at the end of a SidebarItem, as a small neutral Badge; part of the name ("Projects 8"). */
 function SidebarBadge({ className, ...props }) {
-	return /* @__PURE__ */ jsxs(Fragment, { children: [" ", /* @__PURE__ */ jsx(Badge, {
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [" ", /* @__PURE__ */ jsx(Badge, {
 		size: "sm",
 		...props,
 		className: cn("shrink-0", className)
 	})] });
 }
 //#endregion
+//#region src/components/slider/scale.ts
+const fail = (message) => {
+	throw new Error(`Slider: ${message}`);
+};
+const close = (value, integer) => Math.abs(value - integer) <= 1e-7;
+const decimals = (value) => {
+	const [digits, exponent = "0"] = String(value).toLowerCase().split("e");
+	return Math.max(0, (digits.split(".")[1]?.length ?? 0) - Number(exponent));
+};
+/** Work in integer ticks, not repeated floating point additions. */
+function createScale(min, max, step, gap) {
+	if (![
+		min,
+		max,
+		step,
+		gap
+	].every(Number.isFinite)) fail("bounds, step and gap must be finite");
+	if (min >= max || step <= 0) fail("min must be less than max and step must be positive");
+	if (!Number.isInteger(gap) || gap < 0) fail("minStepsBetweenThumbs must be a non-negative integer");
+	const factor = 10 ** Math.max(decimals(min), decimals(max), decimals(step));
+	const start = Math.round(min * factor), end = Math.round(max * factor), increment = Math.round(step * factor);
+	if (![
+		start,
+		end,
+		increment,
+		end - start
+	].every(Number.isSafeInteger) || increment < 1) fail("bounds and step exceed safe numeric precision");
+	const count = (end - start) / increment;
+	if (!Number.isSafeInteger(count)) fail("(max - min) must be evenly divisible by step");
+	if (gap > count) fail("minimum thumb distance exceeds the available range");
+	const fromTick = (tick) => (start + tick * increment) / factor;
+	const toTick = (value) => (value * factor - start) / increment;
+	const validate = (values, length) => {
+		if (values.length !== length) fail(`expected ${length} value${length === 1 ? "" : "s"}`);
+		const ticks = values.map((value) => {
+			if (!Number.isFinite(value)) fail("values must be finite");
+			const tick = toTick(value), rounded = Math.round(tick);
+			if (!close(tick, rounded) || rounded < 0 || rounded > count) fail("values must be on a step within min and max");
+			return rounded;
+		});
+		if (ticks.length === 2 && ticks[1] - ticks[0] < gap) fail("range values must be ordered and satisfy the minimum distance");
+		return ticks.map(fromTick);
+	};
+	const normalize = (values) => {
+		const ticks = values.map((value) => Math.max(0, Math.min(count, Math.round(toTick(value)))));
+		if (ticks.length === 2) {
+			ticks[0] = Math.min(ticks[0], count - gap);
+			ticks[1] = Math.max(ticks[1], ticks[0] + gap);
+		}
+		return ticks.map(fromTick);
+	};
+	const limits = (values, index) => values.length === 1 ? [0, count] : index === 0 ? [0, Math.round(toTick(values[1])) - gap] : [Math.round(toTick(values[0])) + gap, count];
+	const move = (values, index, tick) => {
+		const [low, high] = limits(values, index);
+		return values.map((value, i) => i === index ? fromTick(Math.max(low, Math.min(high, Math.round(tick)))) : value);
+	};
+	return {
+		min,
+		max,
+		step,
+		gap,
+		count,
+		fromTick,
+		toTick,
+		validate,
+		normalize,
+		limits,
+		move,
+		key: `${min}/${max}/${step}/${gap}`
+	};
+}
+const sameValues = (left, right) => left.length === right.length && left.every((value, index) => value === right[index]);
+//#endregion
+//#region src/components/slider/use-slider.ts
+const keys = [
+	"ArrowRight",
+	"ArrowLeft",
+	"ArrowUp",
+	"ArrowDown",
+	"Home",
+	"End",
+	"PageUp",
+	"PageDown"
+];
+function useSlider(options) {
+	const { scale, value, defaultValue, disabled, form } = options;
+	const controlled = value !== void 0;
+	const [internal, setInternal] = useState(() => [...defaultValue]);
+	const values = controlled ? value : scale.normalize(internal);
+	if (!controlled && !sameValues(internal, values)) setInternal([...values]);
+	const [dragging, setDragging] = useState(false);
+	const [activeIndex, setActiveIndex] = useState(0);
+	const inputs = useRef([]);
+	const controlRef = useRef(null);
+	const railRef = useRef(null);
+	const session = useRef(null);
+	const lastIndex = useRef(0);
+	const mounted = useRef(false);
+	const generation = useRef(0);
+	const latest = useRef({
+		...options,
+		values,
+		controlled
+	});
+	function release() {
+		const current = session.current;
+		session.current = null;
+		if (!current) return null;
+		current.removeListeners?.();
+		if (current.pointerId !== void 0 && current.control?.hasPointerCapture?.(current.pointerId)) current.control.releasePointerCapture(current.pointerId);
+		if (mounted.current) setDragging(false);
+		return current;
+	}
+	function canUse(index) {
+		return !latest.current.disabled && !!inputs.current[index] && !inputs.current[index].matches(":disabled");
+	}
+	function publish(next, details) {
+		const state = latest.current;
+		if (sameValues(state.values, next)) return;
+		if (session.current) session.current.expected = next;
+		if (!state.controlled) {
+			latest.current = {
+				...state,
+				values: next
+			};
+			setInternal(next);
+		}
+		state.onValueChange?.(next, details);
+	}
+	function commit(start, expected, details, key, defer = false) {
+		const token = generation.current;
+		const notify = () => {
+			const state = latest.current;
+			if (!mounted.current || token !== generation.current || state.scale.key !== key || !canUse(details.thumbIndex)) return;
+			if (!sameValues(state.values, expected) || sameValues(start, state.values)) return;
+			state.onValueCommit?.([...state.values], details);
+		};
+		if (defer) queueMicrotask(notify);
+		else notify();
+	}
+	function finish(canceled = false) {
+		const current = release();
+		if (!current) return;
+		if (canceled) {
+			generation.current++;
+			publish(current.start, {
+				thumbIndex: current.index,
+				reason: "cancel"
+			});
+		} else commit(current.start, current.expected, {
+			thumbIndex: current.index,
+			reason: current.reason
+		}, current.scaleKey);
+	}
+	function begin(index, reason) {
+		const state = latest.current;
+		const current = {
+			index,
+			reason,
+			start: [...state.values],
+			expected: [...state.values],
+			scaleKey: state.scale.key,
+			keys: /* @__PURE__ */ new Set(),
+			offset: 0,
+			startX: 0,
+			pending: false
+		};
+		session.current = current;
+		return current;
+	}
+	function move(index, tick, reason) {
+		if (!canUse(index)) {
+			release();
+			return;
+		}
+		const state = latest.current;
+		publish(state.scale.move(state.values, index, tick), {
+			thumbIndex: index,
+			reason
+		});
+	}
+	function direction() {
+		const node = controlRef.current;
+		return node ? getComputedStyle(node).direction || node.closest("[dir]")?.getAttribute("dir") || "ltr" : "ltr";
+	}
+	function tickAt(clientX) {
+		const rect = railRef.current?.getBoundingClientRect();
+		if (!rect || rect.width <= 0) return null;
+		let ratio = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
+		if (direction() === "rtl") ratio = 1 - ratio;
+		return ratio * latest.current.scale.count;
+	}
+	function focus(index) {
+		lastIndex.current = index;
+		setActiveIndex(index);
+		inputs.current[index]?.focus({ preventScroll: true });
+	}
+	function onPointerDown(event) {
+		if (event.defaultPrevented || event.button !== 0 || event.isPrimary === false || session.current?.reason === "pointer") return;
+		if (!canUse(0)) return;
+		const tick = tickAt(event.clientX);
+		if (tick === null) return;
+		if (session.current) finish();
+		const state = latest.current;
+		const distances = state.values.map((v) => Math.abs(state.scale.toTick(v) - tick));
+		const index = distances.length === 1 ? 0 : distances[0] === distances[1] ? lastIndex.current : distances[0] < distances[1] ? 0 : 1;
+		event.preventDefault();
+		focus(index);
+		const current = begin(index, "pointer");
+		current.pointerId = event.pointerId;
+		current.control = event.currentTarget;
+		current.startX = event.clientX;
+		const rect = railRef.current.getBoundingClientRect();
+		const ratio = state.scale.toTick(state.values[index]) / state.scale.count;
+		const center = rect.left + (direction() === "rtl" ? 1 - ratio : ratio) * rect.width;
+		const grabbed = Math.abs(event.clientX - center) <= 22;
+		current.offset = grabbed ? event.clientX - center : 0;
+		current.pending = state.values.length === 2 && state.values[0] === state.values[1] && grabbed;
+		setDragging(true);
+		const owner = event.currentTarget.ownerDocument.defaultView;
+		const pointerMove = (next) => {
+			if (session.current !== current || next.pointerId !== current.pointerId) return;
+			const target = tickAt(next.clientX - current.offset);
+			if (target === null) return;
+			if (current.pending) {
+				if (Math.abs(next.clientX - current.startX) < 2) return;
+				current.index = target < latest.current.scale.toTick(current.start[0]) ? 0 : 1;
+				current.pending = false;
+				focus(current.index);
+			}
+			move(current.index, target, "pointer");
+		};
+		const pointerEnd = (next) => {
+			if (session.current === current && next.pointerId === current.pointerId) finish(next.type !== "pointerup");
+		};
+		owner.addEventListener("pointermove", pointerMove);
+		owner.addEventListener("pointerup", pointerEnd);
+		owner.addEventListener("pointercancel", pointerEnd);
+		current.control.addEventListener("lostpointercapture", pointerEnd);
+		current.removeListeners = () => {
+			owner.removeEventListener("pointermove", pointerMove);
+			owner.removeEventListener("pointerup", pointerEnd);
+			owner.removeEventListener("pointercancel", pointerEnd);
+			current.control?.removeEventListener("lostpointercapture", pointerEnd);
+		};
+		event.currentTarget.setPointerCapture?.(event.pointerId);
+		if (!grabbed) move(index, tick, "pointer");
+	}
+	function onKeyDown(event, index) {
+		if (event.defaultPrevented || event.altKey || event.ctrlKey || event.metaKey || event.shiftKey || !keys.includes(event.key) || !canUse(index)) return;
+		event.preventDefault();
+		if (session.current?.reason === "pointer") return;
+		(session.current ?? begin(index, "keyboard")).keys.add(event.key);
+		const state = latest.current;
+		const right = direction() === "rtl" ? -1 : 1;
+		const deltas = {
+			ArrowRight: right,
+			ArrowLeft: -right,
+			ArrowUp: 1,
+			ArrowDown: -1,
+			PageUp: 10,
+			PageDown: -10
+		};
+		const [low, high] = state.scale.limits(state.values, index);
+		move(index, event.key === "Home" ? low : event.key === "End" ? high : state.scale.toTick(state.values[index]) + deltas[event.key], "keyboard");
+	}
+	function onKeyUp(event) {
+		const current = session.current;
+		if (current?.reason !== "keyboard" || !current.keys.has(event.key)) return;
+		current.keys.delete(event.key);
+		if (!current.keys.size) finish();
+	}
+	function onInput(value, index) {
+		if (session.current || !canUse(index) || !Number.isFinite(value)) return;
+		const state = latest.current, start = [...state.values];
+		const next = state.scale.move(start, index, state.scale.toTick(value));
+		publish(next, {
+			thumbIndex: index,
+			reason: "input"
+		});
+		commit(start, next, {
+			thumbIndex: index,
+			reason: "input"
+		}, state.scale.key, true);
+	}
+	useLayoutEffect(() => {
+		latest.current = {
+			...options,
+			values,
+			controlled
+		};
+		const current = session.current;
+		if (current && (current.scaleKey !== scale.key || disabled || !sameValues(values, current.expected))) {
+			generation.current++;
+			release();
+		}
+	});
+	const cancelRef = useRef(() => {});
+	useLayoutEffect(() => {
+		cancelRef.current = () => finish(true);
+	});
+	useLayoutEffect(() => {
+		mounted.current = true;
+		const owner = controlRef.current?.ownerDocument.defaultView;
+		const blur = () => cancelRef.current();
+		owner?.addEventListener("blur", blur);
+		return () => {
+			mounted.current = false;
+			generation.current++;
+			release();
+			owner?.removeEventListener("blur", blur);
+		};
+	}, []);
+	useLayoutEffect(() => {
+		const owner = inputs.current[0]?.form;
+		if (!owner) return;
+		let timer;
+		const reset = (event) => {
+			clearTimeout(timer);
+			timer = setTimeout(() => {
+				if (event.defaultPrevented) return;
+				generation.current++;
+				release();
+				const state = latest.current;
+				const next = state.controlled ? state.values : state.defaultValue;
+				if (!state.controlled) {
+					latest.current = {
+						...state,
+						values: next
+					};
+					setInternal([...next]);
+				}
+				inputs.current.forEach((input, index) => {
+					if (!input) return;
+					const [low, high] = state.scale.limits(next, index);
+					input.min = String(state.scale.fromTick(low));
+					input.max = String(state.scale.fromTick(high));
+					input.value = String(next[index]);
+				});
+			}, 0);
+		};
+		owner.addEventListener("reset", reset);
+		return () => {
+			clearTimeout(timer);
+			owner.removeEventListener("reset", reset);
+		};
+	}, [form]);
+	return {
+		values,
+		dragging,
+		activeIndex,
+		inputs,
+		controlRef,
+		railRef,
+		onPointerDown,
+		onKeyDown,
+		onKeyUp,
+		onInput,
+		onFocus: (index) => {
+			lastIndex.current = index;
+			setActiveIndex(index);
+		},
+		onBlur: () => {
+			if (session.current?.reason === "keyboard") finish(!controlRef.current?.ownerDocument.hasFocus());
+		}
+	};
+}
+//#endregion
+//#region src/components/slider/slider.tsx
+function SliderControl({ values, defaults, names, thumbLabels, range = false, minStepsBetweenThumbs = 0, min = 0, max = 100, step = 1, disabled = false, form, label, helperText, error, showValue = true, formatValue = String, getValueText, marks, change, commit, className, ref, onPointerDown, onKeyDown, onKeyUp, onBlur, onFocus, "aria-label": ariaLabel, "aria-describedby": describedBy, "aria-invalid": ariaInvalid, ...props }) {
+	const id = useId();
+	const scale = createScale(min, max, step, minStepsBetweenThumbs);
+	const length = range ? 2 : 1;
+	const initial = scale.validate(defaults ?? (range ? [min, max] : [min]), length);
+	const selected = values === void 0 ? void 0 : scale.validate(values, length);
+	const hasLabel = isPresent(label);
+	if (!hasLabel && !ariaLabel?.trim()) throw new Error("Slider requires a label or aria-label");
+	if (range && (!thumbLabels || thumbLabels.length !== 2 || thumbLabels.some((text) => !text.trim()))) throw new Error("RangeSlider requires two non-empty thumbLabels");
+	if (names && (names.length !== length || names.some((name) => !name.trim()))) throw new Error("Slider requires one non-empty name per thumb");
+	if (marks) {
+		const seen = /* @__PURE__ */ new Set();
+		for (const mark of marks) {
+			const normalized = scale.validate([mark.value], 1)[0];
+			if (seen.has(normalized)) throw new Error("Slider mark values must be unique");
+			seen.add(normalized);
+		}
+	}
+	const { inputs, controlRef, railRef, ...slider } = useSlider({
+		scale,
+		value: selected,
+		defaultValue: initial,
+		disabled,
+		form,
+		onValueChange: change,
+		onValueCommit: commit
+	});
+	const mergedRef = useMergedRef(useRef(null), ref);
+	const invalid = Boolean(error) || ariaInvalid === true || ariaInvalid === "true";
+	const message = error && error !== true ? error : helperText;
+	const description = [describedBy, isPresent(message) && `${id}-description`].filter(Boolean).join(" ") || void 0;
+	const percentages = slider.values.map((value) => scale.toTick(value) / scale.count * 100);
+	const start = range ? percentages[0] : 0;
+	const end = percentages.at(-1);
+	return /* @__PURE__ */ jsxs("div", {
+		...props,
+		ref: mergedRef,
+		role: "group",
+		"aria-label": hasLabel ? void 0 : ariaLabel,
+		"aria-labelledby": hasLabel ? `${id}-label` : void 0,
+		"data-slot": "slider",
+		"data-range": range || void 0,
+		"data-disabled": disabled || void 0,
+		"data-invalid": invalid || void 0,
+		"data-dragging": slider.dragging || void 0,
+		className: cn("min-w-0 has-[input:disabled]:opacity-50 forced-colors:has-[input:disabled]:opacity-100", className),
+		onPointerDown: (event) => {
+			onPointerDown?.(event);
+			if (!event.defaultPrevented && controlRef.current?.contains(event.target)) slider.onPointerDown(event);
+		},
+		onKeyDown: (event) => {
+			onKeyDown?.(event);
+			const index = inputs.current.indexOf(event.target);
+			if (!event.defaultPrevented && index !== -1) slider.onKeyDown(event, index);
+		},
+		onKeyUp: (event) => {
+			onKeyUp?.(event);
+			if (inputs.current.includes(event.target)) slider.onKeyUp(event);
+		},
+		onBlur: (event) => {
+			onBlur?.(event);
+			if (inputs.current.includes(event.target)) slider.onBlur();
+		},
+		onFocus: (event) => {
+			onFocus?.(event);
+			const index = inputs.current.indexOf(event.target);
+			if (index !== -1) slider.onFocus(index);
+		},
+		children: [
+			(hasLabel || showValue) && /* @__PURE__ */ jsxs("div", {
+				className: "mb-0.5 flex flex-wrap items-baseline justify-between gap-x-4 gap-y-1",
+				children: [hasLabel && /* @__PURE__ */ jsx("span", {
+					id: `${id}-label`,
+					className: "min-w-0 text-sm font-medium wrap-anywhere text-fg",
+					children: label
+				}), showValue && /* @__PURE__ */ jsx("span", {
+					"data-slot": "slider-value",
+					"aria-hidden": true,
+					className: "ms-auto text-sm font-medium wrap-anywhere text-fg tabular-nums",
+					children: /* @__PURE__ */ jsx("bdi", {
+						dir: "ltr",
+						children: slider.values.map(formatValue).join(" – ")
+					})
+				})]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				ref: controlRef,
+				"data-slot": "slider-control",
+				className: cn("group/slider-control relative h-11 touch-pan-y touch-pinch-zoom select-none", disabled ? "cursor-not-allowed" : "cursor-pointer"),
+				children: /* @__PURE__ */ jsxs("div", {
+					ref: railRef,
+					className: "pointer-events-none absolute inset-x-5.5 top-0 h-full",
+					children: [
+						/* @__PURE__ */ jsx("div", {
+							"aria-hidden": true,
+							"data-slot": "slider-track",
+							className: "absolute inset-x-0 top-5 h-1 rounded-full border border-input-border bg-surface-muted forced-colors:border-[CanvasText] forced-colors:bg-[Canvas]"
+						}),
+						/* @__PURE__ */ jsx("div", {
+							"aria-hidden": true,
+							"data-slot": "slider-range",
+							className: cn("absolute top-5 h-1 rounded-full forced-colors:forced-color-adjust-none forced-colors:bg-[Highlight]", invalid ? "bg-danger" : "bg-control-checked", disabled && "forced-colors:bg-[GrayText]"),
+							style: {
+								insetInlineStart: `${start}%`,
+								width: `${end - start}%`
+							}
+						}),
+						slider.values.map((value, i) => {
+							const index = i;
+							const [low, high] = scale.limits(slider.values, index);
+							return /* @__PURE__ */ jsxs(Fragment, { children: [range && /* @__PURE__ */ jsx("span", {
+								id: `${id}-thumb-label-${index}`,
+								className: "sr-only",
+								children: thumbLabels[index]
+							}), /* @__PURE__ */ jsxs("span", {
+								className: "absolute top-0 size-11 -translate-x-1/2 rtl:translate-x-1/2",
+								style: {
+									insetInlineStart: `${percentages[index]}%`,
+									zIndex: slider.activeIndex === index ? 2 : 1
+								},
+								children: [/* @__PURE__ */ jsx("input", {
+									ref: (node) => {
+										inputs.current[index] = node;
+									},
+									type: "range",
+									"data-slot": "slider-input",
+									name: names?.[index],
+									form,
+									min: scale.fromTick(low),
+									max: scale.fromTick(high),
+									step,
+									value,
+									disabled,
+									"aria-label": hasLabel ? void 0 : [ariaLabel, thumbLabels?.[index]].filter(Boolean).join(" "),
+									"aria-labelledby": hasLabel ? [`${id}-label`, range && `${id}-thumb-label-${index}`].filter(Boolean).join(" ") : void 0,
+									"aria-describedby": description,
+									"aria-invalid": invalid ? true : ariaInvalid,
+									"aria-valuetext": getValueText?.(value, index) ?? formatValue(value),
+									className: "peer pointer-events-none absolute inset-0 m-0 size-full opacity-0",
+									onChange: (event) => slider.onInput(event.currentTarget.valueAsNumber, index)
+								}), /* @__PURE__ */ jsx("span", {
+									"aria-hidden": true,
+									"data-slot": "slider-thumb",
+									"data-active": slider.dragging && slider.activeIndex === index || void 0,
+									className: cn("pointer-events-none absolute inset-s-3.25 top-3.25 size-4.5 rounded-full border bg-surface-raised", "peer-focus-visible:outline-solid peer-focus-visible:outline-2 peer-focus-visible:outline-offset-3 peer-focus-visible:outline-focus", "transition-[border-color,box-shadow] duration-100 ease-out motion-reduce:transition-none", "data-active:[box-shadow:0_0_0_4px_var(--color-input-halo)]", invalid ? "border-danger" : "border-control-checked peer-enabled:group-hover/slider-control:border-input-border-hover", "forced-colors:forced-color-adjust-none forced-colors:border-[ButtonText] forced-colors:bg-[ButtonFace] forced-colors:shadow-none", "forced-colors:peer-focus-visible:outline-[Highlight] forced-colors:peer-disabled:border-[GrayText]")
+								})]
+							})] }, index);
+						})
+					]
+				})
+			}),
+			marks?.length ? /* @__PURE__ */ jsx("div", {
+				"aria-hidden": true,
+				"data-slot": "slider-marks",
+				className: "relative mx-5.5 min-h-6 text-xs text-fg-muted tabular-nums",
+				children: marks.map((mark) => {
+					const fraction = scale.toTick(mark.value) / scale.count;
+					return /* @__PURE__ */ jsxs("span", {
+						className: "absolute top-0 w-0",
+						style: { insetInlineStart: `${fraction * 100}%` },
+						children: [/* @__PURE__ */ jsx("span", { className: "block h-1 w-px bg-input-border forced-colors:bg-[CanvasText]" }), /* @__PURE__ */ jsx("span", {
+							className: cn("mt-0.5 inline-block whitespace-nowrap", fraction === 1 ? "-translate-x-full rtl:translate-x-full" : fraction !== 0 && "-translate-x-1/2 rtl:translate-x-1/2"),
+							children: mark.label
+						})]
+					}, mark.value);
+				})
+			}) : /* @__PURE__ */ jsxs("div", {
+				"aria-hidden": true,
+				className: "mx-5.5 flex justify-between gap-2 text-xs text-fg-muted tabular-nums",
+				children: [/* @__PURE__ */ jsx("span", { children: formatValue(min) }), /* @__PURE__ */ jsx("span", { children: formatValue(max) })]
+			}),
+			isPresent(message) && /* @__PURE__ */ jsxs("p", {
+				id: `${id}-description`,
+				className: cn("mt-2 mb-0 flex items-start gap-1 text-xs/relaxed", invalid ? "text-danger" : "text-fg-muted"),
+				children: [invalid && /* @__PURE__ */ jsx(CircleAlert, {
+					"aria-hidden": true,
+					className: "mt-0.5 size-3.5 shrink-0"
+				}), /* @__PURE__ */ jsx("span", { children: message })]
+			})
+		]
+	});
+}
+function Slider({ value, defaultValue, name, onValueChange, onValueCommit, ...props }) {
+	return /* @__PURE__ */ jsx(SliderControl, {
+		...props,
+		values: value === void 0 ? void 0 : [value],
+		defaults: defaultValue === void 0 ? void 0 : [defaultValue],
+		names: name === void 0 ? void 0 : [name],
+		change: (next, details) => onValueChange?.(next[0], details),
+		commit: (next, details) => onValueCommit?.(next[0], details)
+	});
+}
+function RangeSlider({ value, defaultValue, name, onValueChange, onValueCommit, ...props }) {
+	return /* @__PURE__ */ jsx(SliderControl, {
+		...props,
+		range: true,
+		values: value,
+		defaults: defaultValue,
+		names: name,
+		change: (next, details) => onValueChange?.([next[0], next[1]], details),
+		commit: (next, details) => onValueCommit?.([next[0], next[1]], details)
+	});
+}
+//#endregion
 //#region src/components/switch/switch.tsx
 const sizeClasses = {
 	sm: {
@@ -2531,7 +4453,7 @@ function Switch({ label, description, error, size = "md", loading = false, label
 			}), /* @__PURE__ */ jsx("span", {
 				"aria-hidden": true,
 				className: cn("pointer-events-none absolute inset-s-0.5 top-0.5 grid place-items-center rounded-full", "h-(--switch-thumb) w-(--switch-thumb-w) bg-switch-handle peer-checked:bg-switch-handle-checked text-control-checked shadow-switch-thumb", "[--switch-dir:1] rtl:[--switch-dir:-1] [translate:calc(var(--switch-x)*var(--switch-dir))_0]", "[--switch-x:0px] [--switch-thumb-w:var(--switch-thumb)] peer-checked:[--switch-x:var(--switch-travel)]", "transition-[translate,width] duration-150 ease-in-out", pressable && ["peer-active:[--switch-thumb-w:calc(var(--switch-thumb)+var(--switch-stretch))]", "peer-checked:peer-active:[--switch-x:calc(var(--switch-travel)-var(--switch-stretch))]"], "peer-disabled:shadow-none", "forced-colors:forced-color-adjust-none forced-colors:shadow-none", "forced-colors:bg-[CanvasText] forced-colors:text-[Canvas]", "forced-colors:peer-checked:bg-[HighlightText] forced-colors:peer-checked:text-[Highlight]", "forced-colors:peer-disabled:bg-[GrayText] forced-colors:peer-disabled:peer-checked:bg-[Canvas]", s.icon),
-				children: loading && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(LoaderCircle, { className: "animate-spin motion-reduce:hidden" }), /* @__PURE__ */ jsx(CircleDashed, { className: "hidden motion-reduce:block" })] })
+				children: loading && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(LoaderCircle, { className: "animate-spin motion-reduce:hidden" }), /* @__PURE__ */ jsx(CircleDashed, { className: "hidden motion-reduce:block" })] })
 			})]
 		})
 	});
@@ -2635,7 +4557,7 @@ function Table({ data, columns, getRowId, title, emptyState, noResults, filtered
 			tabIndex: -1,
 			className: "grid min-h-48 place-items-center px-4 py-8 text-center text-sm text-fg-muted outline-hidden focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-solid focus-visible:outline-focus",
 			children: emptyState === void 0 ? text.emptyState : emptyState
-		}) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("section", {
+		}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("section", {
 			ref: scrollRef,
 			"data-slot": "table-scroll",
 			"aria-labelledby": tableName,
@@ -2970,6 +4892,155 @@ function TabPanel({ value, keepMounted = false, className, ...props }) {
 	});
 }
 //#endregion
+//#region src/components/textarea/use-auto-resize.ts
+/** Measure the native control so wrapping, fonts and IME text keep their browser behavior. */
+function useAutoResize(ref, enabled, minRows, maxRows) {
+	const resize = useCallback(() => {
+		const node = ref.current;
+		if (!enabled || !node || node.getClientRects().length === 0) return;
+		const style = getComputedStyle(node);
+		const lineHeight = Number.parseFloat(style.lineHeight);
+		if (!Number.isFinite(lineHeight)) return;
+		const padding = Number.parseFloat(style.paddingTop) + Number.parseFloat(style.paddingBottom);
+		const border = Number.parseFloat(style.borderTopWidth) + Number.parseFloat(style.borderBottomWidth);
+		const min = minRows * lineHeight + padding;
+		const max = maxRows == null ? Infinity : maxRows * lineHeight + padding;
+		const scrollTop = node.scrollTop;
+		node.style.overflowY = "hidden";
+		node.style.height = "0px";
+		const contentHeight = node.scrollHeight;
+		const height = Math.max(min, Math.min(max, contentHeight));
+		node.style.height = `${height + (style.boxSizing === "border-box" ? border : -padding)}px`;
+		node.style.overflowY = contentHeight > max ? "auto" : "hidden";
+		node.scrollTop = scrollTop;
+	}, [
+		enabled,
+		ref,
+		minRows,
+		maxRows
+	]);
+	useLayoutEffect(resize);
+	useLayoutEffect(() => {
+		if (!enabled) return;
+		const node = ref.current;
+		if (!node) return;
+		let width = node.getBoundingClientRect().width;
+		const observer = typeof ResizeObserver === "undefined" ? void 0 : new ResizeObserver(() => {
+			const nextWidth = node.getBoundingClientRect().width;
+			if (nextWidth !== width) {
+				width = nextWidth;
+				resize();
+			}
+		});
+		observer?.observe(node);
+		window.addEventListener("resize", resize);
+		document.fonts?.addEventListener("loadingdone", resize);
+		let active = true;
+		document.fonts?.ready.then(() => {
+			if (active) resize();
+		});
+		return () => {
+			active = false;
+			observer?.disconnect();
+			window.removeEventListener("resize", resize);
+			document.fonts?.removeEventListener("loadingdone", resize);
+			node.style.removeProperty("height");
+			node.style.removeProperty("overflow-y");
+		};
+	}, [
+		enabled,
+		ref,
+		resize
+	]);
+	return resize;
+}
+//#endregion
+//#region src/components/textarea/textarea.tsx
+const sizes = {
+	sm: "px-3 py-2 text-sm/5",
+	md: "px-3 py-2.5 text-sm/5",
+	lg: "px-4 py-3 text-base/6"
+};
+function positiveRows(value, name) {
+	if (!Number.isInteger(value) || value < 1) throw new RangeError(`Textarea ${name} must be a positive integer.`);
+	return value;
+}
+const textLength = (value) => String(value ?? "").replace(/\r\n?/g, "\n").length;
+function Textarea({ label, floating = false, helperText, error, size = "md", autoResize = false, rows = 3, minRows = 3, maxRows, resize = "vertical", showCount = false, mono = false, className, textareaClassName, ref, id, required, disabled, readOnly, placeholder, value, defaultValue, maxLength, onChange, "aria-describedby": describedBy, "aria-invalid": ariaInvalid, ...props }) {
+	const nativeRows = positiveRows(autoResize ? minRows : rows, autoResize ? "minRows" : "rows");
+	if (autoResize && maxRows != null && positiveRows(maxRows, "maxRows") < nativeRows) throw new RangeError("Textarea maxRows must be greater than or equal to minRows.");
+	const controlRef = useRef(null);
+	const mergedRef = useMergedRef(controlRef, ref);
+	const [uncontrolledLength, setUncontrolledLength] = useState(() => textLength(defaultValue));
+	const length = value == null ? uncontrolledLength : textLength(value);
+	const overLimit = maxLength != null && maxLength >= 0 && length > maxLength;
+	const countId = `${useId()}-count`;
+	const resizeToContent = useAutoResize(controlRef, autoResize, nativeRows, maxRows);
+	useLayoutEffect(() => {
+		const node = controlRef.current;
+		const form = node?.form;
+		if (!form || !node) return;
+		let resetTimer;
+		const reset = (event) => {
+			clearTimeout(resetTimer);
+			resetTimer = setTimeout(() => {
+				if (event.defaultPrevented) return;
+				setUncontrolledLength(node.value.length);
+				resizeToContent();
+			}, 0);
+		};
+		form.addEventListener("reset", reset);
+		return () => {
+			clearTimeout(resetTimer);
+			form.removeEventListener("reset", reset);
+		};
+	}, [props.form, resizeToContent]);
+	return /* @__PURE__ */ jsx(FieldShell, {
+		multiline: true,
+		label,
+		floating,
+		helperText,
+		error: error || overLimit,
+		size,
+		id,
+		required,
+		disabled,
+		readOnly,
+		"aria-describedby": [describedBy, showCount ? countId : null].filter(Boolean).join(" ") || void 0,
+		className,
+		controlRef,
+		footer: showCount ? /* @__PURE__ */ jsxs("span", {
+			id: countId,
+			className: cn("ms-auto shrink-0 text-xs/snug tabular-nums", overLimit ? "text-danger" : "text-fg-muted"),
+			children: [length, maxLength != null && maxLength >= 0 ? ` / ${maxLength}` : ""]
+		}) : void 0,
+		children: (field) => /* @__PURE__ */ jsxs(Fragment$1, { children: [field.floatingLabel("max-w-[calc(100%-1rem)]"), /* @__PURE__ */ jsx("textarea", {
+			...props,
+			ref: mergedRef,
+			id: field.id,
+			rows: nativeRows,
+			value,
+			defaultValue,
+			maxLength,
+			required,
+			disabled,
+			readOnly,
+			placeholder: field.floating ? placeholder || " " : placeholder,
+			"aria-invalid": field.invalid ? true : ariaInvalid,
+			"aria-describedby": field.describedBy,
+			spellCheck: mono ? false : props.spellCheck,
+			autoCapitalize: mono ? "off" : props.autoCapitalize,
+			autoCorrect: mono ? "off" : props.autoCorrect,
+			onChange: (event) => {
+				setUncontrolledLength(event.currentTarget.value.length);
+				resizeToContent();
+				onChange?.(event);
+			},
+			className: cn("block w-full min-w-0 flex-1 rounded-[inherit] border-0 bg-transparent text-fg outline-none", "placeholder:text-input-placeholder disabled:cursor-not-allowed pointer-coarse:text-base", sizes[size], autoResize || resize === "none" ? "resize-none" : "resize-y", mono && "font-mono", field.floating && "placeholder:opacity-0 focus:placeholder:opacity-100", textareaClassName)
+		})] })
+	});
+}
+//#endregion
 //#region src/components/theme-switcher/theme-switcher.tsx
 const systemThemeQuery = "(prefers-color-scheme: dark)";
 function subscribeSystemTheme(onChange) {
@@ -3438,7 +5509,7 @@ function Viewport({ id, position = "bottom-right", visibleToasts = 3, host }) {
 	};
 	const [y, x] = position.split("-");
 	const directions = x === "center" ? [y] : [y, x];
-	return /* @__PURE__ */ jsxs(Fragment, { children: [
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
 		/* @__PURE__ */ jsx("section", {
 			ref: viewportRef,
 			popover: "manual",
@@ -3775,4 +5846,4 @@ function ToastCard({ record, layout, total, expanded, paused, frontHeight, ownHe
 	});
 }
 //#endregion
-export { Alert, Badge, Button, Card, CardContent, CardHeader, Checkbox, CheckboxGroup, CopyInput, Dialog, DialogBody, DialogFooter, DialogHeader, Drawer, DrawerBody, DrawerClose, DrawerFooter, DrawerHeader, Input, Meter, PasswordInput, SearchInput, Select, Sidebar, SidebarBadge, SidebarBody, SidebarFooter, SidebarGroup, SidebarHeader, SidebarIcon, SidebarItem, SidebarProvider, SidebarTrigger, Switch, Tab, TabList, TabNav, TabNavLink, TabPanel, Table, Tabs, ThemeSwitcher, Toaster, Tooltip, cn, toast, useTheme };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, Badge, Button, Card, CardContent, CardHeader, Checkbox, CheckboxGroup, Combobox, CopyInput, Dialog, DialogBody, DialogFooter, DialogHeader, Drawer, DrawerBody, DrawerClose, DrawerFooter, DrawerHeader, DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, Input, Meter, PasswordInput, Radio, RadioGroup, RangeSlider, SearchInput, Select, Sidebar, SidebarBadge, SidebarBody, SidebarFooter, SidebarGroup, SidebarHeader, SidebarIcon, SidebarItem, SidebarProvider, SidebarTrigger, Slider, Switch, Tab, TabList, TabNav, TabNavLink, TabPanel, Table, Tabs, Textarea, ThemeSwitcher, Toaster, Tooltip, cn, toast, useTheme };