@weichenlin/swell-ui 0.0.0-stage → 0.2.0

package/dist/index.js

@@ -0,0 +1,3453 @@
+import { Check, ChevronDown, CircleAlert, CircleCheck, CircleDashed, CircleX, Copy, Eye, EyeOff, Info, LoaderCircle, Menu, Moon, Search, Sun, TriangleAlert, X } from "lucide-react";
+import { clsx } from "clsx";
+import { extendTailwindMerge } from "tailwind-merge";
+import { Fragment, 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";
+//#region src/lib/cn.ts
+const tone = (name) => [
+	name,
+	`${name}-fg`,
+	`${name}-subtle-bg`,
+	`${name}-subtle-fg`,
+	`${name}-border`
+];
+const twMerge = extendTailwindMerge({ extend: { theme: {
+	color: [
+		"bg",
+		"surface",
+		"surface-raised",
+		"surface-muted",
+		"fg",
+		"fg-strong",
+		"fg-muted",
+		"fg-subtle",
+		"border",
+		"border-strong",
+		"ring",
+		"ring-deep",
+		"primary",
+		"primary-fg",
+		"accent",
+		"inverse",
+		"inverse-fg",
+		"focus",
+		"input-bg",
+		"input-bg-hover",
+		"input-border",
+		"input-border-hover",
+		"input-placeholder",
+		"input-focus",
+		"input-highlight",
+		"input-halo",
+		"input-halo-invalid",
+		"input-halo-invalid-focus",
+		"control-checked",
+		"control-checked-fg",
+		"popover-bg",
+		"popover-border",
+		"popover-highlight",
+		"dialog-backdrop",
+		...[
+			"success",
+			"warning",
+			"danger",
+			"info",
+			"neutral"
+		].flatMap(tone)
+	],
+	shadow: [
+		"input",
+		"input-lift",
+		"switch-thumb",
+		"popover",
+		"dialog",
+		"whisper"
+	],
+	container: ["page"],
+	font: [
+		"sans",
+		"serif",
+		"mono"
+	]
+} } });
+function cn(...inputs) {
+	return twMerge(clsx(inputs));
+}
+//#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/hooks/use-press-feedback.ts
+const GROW_MS = 450;
+const FADE_MS = 300;
+const OPACITY = .16;
+const RELEASE_EVENTS = [
+	"pointerup",
+	"pointerleave",
+	"pointercancel",
+	"keyup",
+	"blur"
+];
+/**
+* Press feedback for buttons and button-styled links: toggles `data-pressed`
+* on the host (styled as a scale) and, when `ripple` is on, spawns a
+* Material-style ripple via the Web Animations API.
+*
+* Attach the returned ref to an absolutely positioned, clipped overlay inside
+* the host. Listeners are bound natively to the overlay's parent so the host's
+* own props/ref stay untouched. Hosts with aria-disabled="true" get no feedback.
+*/
+function usePressFeedback(ripple = true) {
+	const ref = useRef(null);
+	useEffect(() => {
+		const layer = ref.current;
+		const host = layer?.parentElement;
+		if (!layer || !host) return;
+		const live = /* @__PURE__ */ new Set();
+		const activationKeys = host instanceof HTMLAnchorElement ? ["Enter"] : ["Enter", " "];
+		const isInert = () => host.getAttribute("aria-disabled") === "true";
+		const canRipple = () => ripple && typeof layer.animate === "function" && !(typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches);
+		const spawn = (x, y, rect) => {
+			const r = Math.hypot(Math.max(x, rect.width - x), Math.max(y, rect.height - y));
+			const el = document.createElement("span");
+			el.style.cssText = `position:absolute;left:${x - r}px;top:${y - r}px;width:${r * 2}px;height:${r * 2}px;border-radius:50%;background:currentColor;opacity:${OPACITY};pointer-events:none`;
+			layer.append(el);
+			const grow = el.animate([{ transform: "scale(0)" }, { transform: "scale(1)" }], {
+				duration: GROW_MS,
+				easing: "cubic-bezier(0.2, 0, 0, 1)",
+				fill: "forwards"
+			});
+			live.add({
+				el,
+				grow
+			});
+		};
+		const press = (x, y) => {
+			host.dataset.pressed = "";
+			if (!canRipple()) return;
+			const rect = layer.getBoundingClientRect();
+			spawn(x ?? rect.width / 2, y ?? rect.height / 2, rect);
+		};
+		const release = () => {
+			delete host.dataset.pressed;
+			for (const r of live) {
+				live.delete(r);
+				r.grow.finished.catch(() => {}).then(() => r.el.animate([{ opacity: 0 }], {
+					duration: FADE_MS,
+					easing: "linear",
+					fill: "forwards"
+				}).finished).catch(() => {}).finally(() => r.el.remove());
+			}
+		};
+		const onPointerDown = (e) => {
+			if (e.button !== 0 || e.isPrimary === false || isInert()) return;
+			const rect = layer.getBoundingClientRect();
+			press(e.clientX - rect.left, e.clientY - rect.top);
+		};
+		const onKeyDown = (e) => {
+			if (e.repeat || !activationKeys.includes(e.key) || isInert()) return;
+			press();
+		};
+		host.addEventListener("pointerdown", onPointerDown);
+		host.addEventListener("keydown", onKeyDown);
+		for (const type of RELEASE_EVENTS) host.addEventListener(type, release);
+		return () => {
+			host.removeEventListener("pointerdown", onPointerDown);
+			host.removeEventListener("keydown", onKeyDown);
+			for (const type of RELEASE_EVENTS) host.removeEventListener(type, release);
+			release();
+		};
+	}, [ripple]);
+	return ref;
+}
+//#endregion
+//#region src/components/tooltip.tsx
+const OPEN_DELAY_MS = 300;
+const GAP_PX = 6;
+const VIEWPORT_PADDING_PX = 8;
+const opposite = {
+	top: "bottom",
+	bottom: "top",
+	left: "right",
+	right: "left"
+};
+function isFocusVisible$1(el) {
+	try {
+		return el.matches(":focus-visible");
+	} catch {
+		return true;
+	}
+}
+function clamp(value, min, max) {
+	return Math.max(min, Math.min(value, Math.max(min, max)));
+}
+/**
+* Bubble placement in viewport coordinates. left/top are for the outer box, which
+* includes the GAP_PX padding facing the trigger, so the box always touches the trigger.
+*/
+function place(anchor, width, height, preferred) {
+	const vw = document.documentElement.clientWidth;
+	const vh = document.documentElement.clientHeight;
+	const room = {
+		top: anchor.top,
+		bottom: vh - anchor.bottom,
+		left: anchor.left,
+		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;
+	if (side === "top" || side === "bottom") return {
+		side,
+		left: clamp(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),
+		left: side === "left" ? anchor.left - width - GAP_PX : anchor.right
+	};
+}
+/**
+* Hover/focus tooltip around any element. The bubble is portaled to `<body>` with
+* fixed positioning, so scroll containers (tables, drawers) never clip it.
+* Events are read on the wrapper, so aria-disabled triggers work; React still
+* treats the portaled bubble as inside the wrapper, so the pointer can rest on it.
+*/
+function Tooltip({ content, side = "top", describe = true, className, children }) {
+	const id = useId();
+	const [open, setOpen] = useState(false);
+	const [position, setPosition] = useState();
+	const anchorRef = useRef(null);
+	const bubbleRef = useRef(null);
+	const timer = useRef(void 0);
+	const active = content != null && content !== false && content !== "";
+	const clearTimer = () => clearTimeout(timer.current);
+	const show = () => {
+		clearTimer();
+		setOpen(true);
+	};
+	const hide = () => {
+		clearTimer();
+		setOpen(false);
+	};
+	useEffect(() => () => clearTimeout(timer.current), []);
+	const [wasActive, setWasActive] = useState(active);
+	if (active !== wasActive) {
+		setWasActive(active);
+		if (!active) setOpen(false);
+	}
+	useEffect(() => {
+		if (!open) return;
+		const onKeyDown = (e) => {
+			if (e.key === "Escape") setOpen(false);
+		};
+		document.addEventListener("keydown", onKeyDown);
+		return () => document.removeEventListener("keydown", onKeyDown);
+	}, [open]);
+	useLayoutEffect(() => {
+		if (!open) return;
+		const update = () => {
+			const anchor = anchorRef.current;
+			const bubble = bubbleRef.current;
+			if (!anchor || !bubble) return;
+			const next = place(anchor.getBoundingClientRect(), bubble.offsetWidth, bubble.offsetHeight, side);
+			setPosition({
+				...next,
+				left: Math.round(next.left),
+				top: Math.round(next.top)
+			});
+		};
+		update();
+		window.addEventListener("scroll", update, true);
+		window.addEventListener("resize", update);
+		return () => {
+			window.removeEventListener("scroll", update, true);
+			window.removeEventListener("resize", update);
+		};
+	}, [
+		open,
+		side,
+		content
+	]);
+	const describedBy = active && describe ? [children.props["aria-describedby"], id].filter(Boolean).join(" ") : children.props["aria-describedby"];
+	const placed = position?.side ?? side;
+	return /* @__PURE__ */ jsxs("span", {
+		ref: anchorRef,
+		className: cn("relative inline-flex", className),
+		onPointerEnter: () => {
+			if (!active) return;
+			clearTimer();
+			timer.current = setTimeout(() => setOpen(true), OPEN_DELAY_MS);
+		},
+		onPointerLeave: hide,
+		onPointerDown: hide,
+		onFocus: (e) => {
+			if (active && isFocusVisible$1(e.target)) show();
+		},
+		onBlur: (e) => {
+			if (!e.currentTarget.contains(e.relatedTarget)) hide();
+		},
+		children: [cloneElement(children, { "aria-describedby": describedBy }), active && createPortal(/* @__PURE__ */ jsx("span", {
+			id,
+			role: "tooltip",
+			"aria-hidden": describe ? void 0 : true,
+			hidden: !open,
+			"data-side": placed,
+			style: position && {
+				left: position.left,
+				top: position.top
+			},
+			className: cn("fixed top-0 left-0 z-50", {
+				top: "pb-1.5",
+				bottom: "pt-1.5",
+				left: "pr-1.5",
+				right: "pl-1.5"
+			}[placed]),
+			children: /* @__PURE__ */ jsx("span", {
+				ref: bubbleRef,
+				className: cn("block w-max max-w-xs rounded-md border border-border-strong bg-inverse px-2 py-1", "text-xs/snug font-medium text-inverse-fg shadow-whisper", "transition-[opacity,translate] duration-150 ease-out starting:opacity-0", {
+					top: "starting:translate-y-0.5",
+					bottom: "starting:-translate-y-0.5",
+					left: "starting:translate-x-0.5",
+					right: "starting:-translate-x-0.5"
+				}[placed], "motion-reduce:transition-none"),
+				children: content
+			})
+		}), document.body)]
+	});
+}
+//#endregion
+//#region src/components/button/button.tsx
+const buttonVariants = cva([
+	"relative inline-flex cursor-pointer items-center justify-center font-medium whitespace-nowrap",
+	"touch-manipulation select-none [-webkit-tap-highlight-color:transparent]",
+	"transition-[color,background-color,box-shadow,opacity,scale] duration-150 ease-out",
+	"data-pressed:scale-[0.97]",
+	"focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus",
+	"after:pointer-events-none after:absolute after:inset-0 after:rounded-[inherit] after:border after:border-transparent",
+	"forced-colors:after:border-[ButtonText]",
+	"pointer-coarse:before:absolute pointer-coarse:before:top-1/2 pointer-coarse:before:left-1/2",
+	"pointer-coarse:before:size-full pointer-coarse:before:min-h-11 pointer-coarse:before:min-w-11",
+	"pointer-coarse:before:-translate-1/2"
+], {
+	variants: {
+		intent: {
+			primary: "bg-primary text-primary-fg rounded-lg shadow-[0_0_0_1px_var(--color-primary)] hover:not-aria-disabled:opacity-90",
+			secondary: "bg-surface-muted text-fg-strong rounded-lg shadow-[0_0_0_1px_var(--color-ring)] hover:not-aria-disabled:bg-ring",
+			surface: "bg-surface-raised text-fg rounded-xl hover:not-aria-disabled:bg-surface-muted",
+			dark: "bg-inverse text-inverse-fg rounded-lg shadow-[0_0_0_1px_var(--color-ring)] hover:not-aria-disabled:opacity-90",
+			ghost: "bg-transparent text-fg rounded-lg hover:not-aria-disabled:bg-surface-muted"
+		},
+		size: {
+			sm: "h-8.5 px-3 text-sm",
+			md: "h-9.5 px-4 text-sm",
+			lg: "h-10.5 px-5 text-base"
+		},
+		tone: {
+			default: "",
+			danger: ""
+		},
+		fullWidth: {
+			true: "w-full",
+			false: ""
+		},
+		square: {
+			true: "aspect-square px-0",
+			false: ""
+		}
+	},
+	compoundVariants: [
+		{
+			intent: "primary",
+			tone: "danger",
+			class: "bg-danger text-danger-fg shadow-[0_0_0_1px_var(--color-danger)]"
+		},
+		{
+			intent: "secondary",
+			tone: "danger",
+			class: "text-danger shadow-[0_0_0_1px_var(--color-danger)] hover:not-aria-disabled:bg-danger hover:not-aria-disabled:text-danger-fg"
+		},
+		{
+			intent: "surface",
+			tone: "danger",
+			class: "text-danger hover:not-aria-disabled:bg-danger hover:not-aria-disabled:text-danger-fg"
+		},
+		{
+			intent: "dark",
+			tone: "danger",
+			class: "bg-danger text-danger-fg shadow-[0_0_0_1px_var(--color-danger)]"
+		},
+		{
+			intent: "ghost",
+			tone: "danger",
+			class: "text-danger hover:not-aria-disabled:bg-danger/10"
+		}
+	],
+	defaultVariants: {
+		intent: "primary",
+		size: "md",
+		tone: "default",
+		fullWidth: false,
+		square: false
+	}
+});
+const spinnerSize = {
+	sm: 16,
+	md: 18,
+	lg: 20
+};
+const iconSize$1 = {
+	sm: "[&_svg]:size-4",
+	md: "[&_svg]:size-4",
+	lg: "[&_svg]:size-[18px]"
+};
+const iconStartPadding$1 = {
+	sm: "ps-2",
+	md: "ps-3",
+	lg: "ps-4"
+};
+const iconEndPadding = {
+	sm: "pe-2",
+	md: "pe-3",
+	lg: "pe-4"
+};
+/** 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: [
+		/* @__PURE__ */ jsx("span", {
+			ref: layerRef,
+			"data-ripple": ripple ? "" : void 0,
+			"aria-hidden": true,
+			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"),
+			children: [
+				iconLeft && /* @__PURE__ */ jsx("span", {
+					"aria-hidden": true,
+					className: "inline-flex",
+					children: iconLeft
+				}),
+				children,
+				iconRight && /* @__PURE__ */ jsx("span", {
+					"aria-hidden": true,
+					className: "inline-flex",
+					children: iconRight
+				})
+			]
+		}),
+		loading && /* @__PURE__ */ jsx("span", {
+			className: "absolute inset-0 flex items-center justify-center",
+			children: /* @__PURE__ */ jsx(LoaderCircle, {
+				className: "animate-spin forced-colors:text-[ButtonText]",
+				size: spinnerSize[size],
+				"aria-hidden": true
+			})
+		})
+	] });
+}
+function iconPadding(size, iconLeft, iconRight) {
+	return [iconLeft ? iconStartPadding$1[size] : "", iconRight ? iconEndPadding[size] : ""];
+}
+function stateClass(disabled, loading) {
+	if (loading) return "cursor-progress opacity-70";
+	if (disabled) return "cursor-not-allowed opacity-50 forced-colors:opacity-100 forced-colors:text-[GrayText] forced-colors:after:border-[GrayText]";
+}
+function ButtonImpl({ className, intent, size, tone, fullWidth, square, loading = false, loadingText = "Loading", disabled = false, iconLeft, iconRight, ripple, tooltip, type = "button", onClick, children, ...props }) {
+	const s = size ?? "md";
+	const inert = disabled || loading;
+	const button = /* @__PURE__ */ jsx("button", {
+		...props,
+		type,
+		"data-slot": "button",
+		"aria-disabled": inert || void 0,
+		"aria-busy": loading || void 0,
+		className: cn(buttonVariants({
+			intent,
+			size,
+			tone,
+			fullWidth,
+			square
+		}), iconPadding(s, iconLeft, iconRight), stateClass(disabled, loading), className),
+		onClick: (e) => {
+			if (inert) {
+				e.preventDefault();
+				return;
+			}
+			onClick?.(e);
+		},
+		children: /* @__PURE__ */ jsx(ButtonContent, {
+			size: s,
+			ripple: ripple ?? true,
+			loading,
+			iconLeft,
+			iconRight,
+			children
+		})
+	});
+	return /* @__PURE__ */ jsxs(Fragment, { children: [tooltip ? /* @__PURE__ */ jsx(Tooltip, {
+		...tooltip,
+		className: fullWidth ? "flex w-full" : void 0,
+		children: button
+	}) : button, /* @__PURE__ */ jsx("span", {
+		"aria-live": "polite",
+		"aria-atomic": true,
+		className: "sr-only",
+		children: loading ? loadingText : ""
+	})] });
+}
+function IconOnlyButton({ icon, tooltip = true, tooltipSide, disabledReason, className, size, ...props }) {
+	const reason = props.disabled ? disabledReason : void 0;
+	const tip = reason ? {
+		content: reason,
+		side: tooltipSide
+	} : tooltip ? {
+		content: props["aria-label"],
+		side: tooltipSide,
+		describe: false
+	} : disabledReason !== void 0 ? { content: void 0 } : void 0;
+	return /* @__PURE__ */ jsx(ButtonImpl, {
+		...props,
+		size,
+		tooltip: tip,
+		square: true,
+		className,
+		children: icon
+	});
+}
+function Button(props) {
+	if (props.icon !== void 0) return /* @__PURE__ */ jsx(IconOnlyButton, { ...props });
+	const { disabledReason, ...rest } = props;
+	const tooltip = disabledReason === void 0 ? void 0 : { content: rest.disabled ? disabledReason : void 0 };
+	return /* @__PURE__ */ jsx(ButtonImpl, {
+		...rest,
+		tooltip
+	});
+}
+//#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
+	});
+}
+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):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
+			})
+		})
+	});
+}
+/** 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` 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, 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
+		] })
+	});
+}
+//#endregion
+//#region src/components/checkbox/choice-row.tsx
+/**
+* The row Switch and Checkbox share: one `<label>` holding the control, its label, description
+* and error, so the whole row toggles it natively. The label line is 24px tall, which is the
+* WCAG 2.5.8 minimum target; touch gets a 44px band without changing the layout.
+* Disabled styling reads `:disabled` off the input, so a disabled fieldset dims rows too.
+*/
+function ChoiceRow({ slot, label, description, error, labelPosition = "end", gap, controlOffset, className, "aria-describedby": describedByProp, control }) {
+	const id = useId();
+	const labelId = `${id}-label`;
+	const descriptionId = `${id}-description`;
+	const errorId = `${id}-error`;
+	const hasLabel = isPresent(label);
+	const hasDescription = isPresent(description);
+	const invalid = Boolean(error);
+	const hasErrorText = invalid && error !== true && isPresent(error);
+	const describedBy = [
+		describedByProp,
+		hasDescription && descriptionId,
+		hasErrorText && errorId
+	].filter(Boolean).join(" ") || void 0;
+	const text = hasLabel || hasDescription || hasErrorText ? /* @__PURE__ */ jsxs("span", {
+		className: "flex min-w-0 flex-col",
+		children: [
+			hasLabel && /* @__PURE__ */ jsx("span", {
+				id: labelId,
+				children: label
+			}),
+			hasDescription && /* @__PURE__ */ jsx("span", {
+				id: descriptionId,
+				className: "text-xs/snug text-fg-muted",
+				children: description
+			}),
+			hasErrorText && /* @__PURE__ */ jsxs("span", {
+				id: errorId,
+				className: cn("flex items-start gap-1 text-xs/snug text-danger", hasDescription && "mt-1"),
+				children: [/* @__PURE__ */ jsx(CircleAlert, {
+					"aria-hidden": true,
+					className: "mt-px size-3.5 shrink-0"
+				}), /* @__PURE__ */ jsx("span", { children: error })]
+			})
+		]
+	}) : null;
+	const controlSlot = /* @__PURE__ */ jsx("span", {
+		className: cn("flex shrink-0", controlOffset),
+		children: control({
+			labelledBy: hasLabel ? labelId : void 0,
+			describedBy,
+			invalid
+		})
+	});
+	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] })
+	});
+}
+//#endregion
+//#region src/components/checkbox/checkbox.tsx
+/**
+* Drawn from the short end, like a pen stroke. As wide as the dash (Geist's 8-unit check reads
+* small next to it). Length ~14.1; the dash pattern rounds it up to 15.
+*/
+const CHECK_PATH = "M5 10L8.5 13.5L15 7";
+const markBase = ["pointer-events-none col-start-1 row-start-1 size-3.5 text-control-checked-fg", "forced-colors:forced-color-adjust-none forced-colors:text-[HighlightText] forced-colors:peer-disabled:text-[Canvas]"];
+function Checkbox({ label, description, error, indeterminate = false, className, inputClassName, ref, checked, "aria-describedby": describedBy, "aria-invalid": ariaInvalid, ...props }) {
+	const ownRef = useRef(null);
+	const setRef = useMergedRef(ownRef, ref);
+	useLayoutEffect(() => {
+		if (ownRef.current) ownRef.current.indeterminate = indeterminate;
+	}, [indeterminate, checked]);
+	return /* @__PURE__ */ jsx(ChoiceRow, {
+		slot: "checkbox",
+		label,
+		description,
+		error,
+		gap: "gap-2",
+		controlOffset: "mt-1",
+		className,
+		"aria-describedby": describedBy,
+		control: (row) => /* @__PURE__ */ jsxs("span", {
+			className: cn("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: setRef,
+					type: "checkbox",
+					checked,
+					"aria-labelledby": props["aria-labelledby"] ?? row.labelledBy,
+					"aria-describedby": row.describedBy,
+					"aria-invalid": row.invalid ? true : ariaInvalid,
+					className: cn("peer col-start-1 row-start-1 m-0 size-4 cursor-pointer appearance-none rounded-sm border outline-hidden", "disabled:cursor-not-allowed", "border-(--checkbox-border) bg-(--checkbox-bg) [box-shadow:0_0_0_3px_var(--checkbox-halo)]", "transition-[background-color,border-color,box-shadow] duration-200 ease-in-out", "[--checkbox-bg:var(--color-input-bg)] [--checkbox-halo:transparent]", "checked:[--checkbox-bg:var(--color-control-checked)] indeterminate:[--checkbox-bg:var(--color-control-checked)]", row.invalid ? [
+						"[--checkbox-border:var(--color-danger)] [--checkbox-halo:var(--color-input-halo-invalid)]",
+						"focus-visible:[--checkbox-halo:var(--color-input-halo-invalid-focus)]",
+						"not-forced-colors:checked:focus-visible:outline-danger not-forced-colors:indeterminate:focus-visible:outline-danger"
+					] : [
+						"[--checkbox-border:var(--color-input-border)]",
+						"checked:[--checkbox-border:var(--color-control-checked)] indeterminate:[--checkbox-border:var(--color-control-checked)]",
+						"enabled:not-checked:not-indeterminate:hover:[--checkbox-border:var(--color-input-border-hover)]",
+						"enabled:not-checked:not-indeterminate:hover:[--checkbox-bg:var(--color-input-bg-hover)]",
+						"focus-visible:[--checkbox-border:var(--color-input-focus)] focus-visible:[--checkbox-halo:var(--color-input-halo)]",
+						"not-forced-colors:checked:focus-visible:outline-control-checked not-forced-colors:indeterminate:focus-visible:outline-control-checked"
+					], "checked:focus-visible:[--checkbox-halo:transparent] indeterminate:focus-visible:[--checkbox-halo:transparent]", "checked:focus-visible:outline-solid checked:focus-visible:outline-2 checked:focus-visible:outline-offset-2", "indeterminate:focus-visible:outline-solid indeterminate:focus-visible:outline-2 indeterminate:focus-visible:outline-offset-2", "forced-colors:forced-color-adjust-none forced-colors:[box-shadow:none]", "forced-colors:border-[CanvasText] forced-colors:bg-[Canvas]", "forced-colors:checked:border-[Highlight] forced-colors:checked:bg-[Highlight]", "forced-colors:indeterminate:border-[Highlight] forced-colors:indeterminate:bg-[Highlight]", "forced-colors:disabled:border-[GrayText] forced-colors:disabled:checked:bg-[GrayText] forced-colors:disabled:indeterminate:bg-[GrayText]", "forced-colors:focus-visible:outline-[CanvasText]", inputClassName)
+				}),
+				/* @__PURE__ */ jsx("svg", {
+					"aria-hidden": true,
+					viewBox: "0 0 20 20",
+					fill: "none",
+					stroke: "currentColor",
+					strokeWidth: 2,
+					strokeLinecap: "round",
+					strokeLinejoin: "round",
+					className: cn(markBase, "[stroke-dasharray:15] [stroke-dashoffset:15] opacity-0", "[transition:opacity_80ms_ease-out,stroke-dashoffset_0s_80ms]", "peer-[:checked:not(:indeterminate)]:[stroke-dashoffset:0] peer-[:checked:not(:indeterminate)]:opacity-100", "peer-[:checked:not(:indeterminate)]:[transition:stroke-dashoffset_150ms_ease-out]"),
+					children: /* @__PURE__ */ jsx("path", { d: CHECK_PATH })
+				}),
+				/* @__PURE__ */ jsx("svg", {
+					"aria-hidden": true,
+					viewBox: "0 0 20 20",
+					fill: "none",
+					stroke: "currentColor",
+					strokeWidth: 2,
+					strokeLinecap: "round",
+					className: cn(markBase, "scale-x-0 opacity-0 [transition:opacity_80ms_ease-out,scale_0s_80ms]", "peer-indeterminate:scale-x-100 peer-indeterminate:opacity-100", "peer-indeterminate:[transition:scale_150ms_ease-out]"),
+					children: /* @__PURE__ */ jsx("path", { d: "M5 10H15" })
+				})
+			]
+		})
+	});
+}
+//#endregion
+//#region src/components/checkbox/checkbox-group.tsx
+/** A `<fieldset>` + `<legend>` around related checkboxes; holds no value of its own. */
+function CheckboxGroup({ legend, description, error, orientation = "vertical", className, "aria-describedby": describedByProp, children, ...props }) {
+	const id = useId();
+	const descriptionId = `${id}-description`;
+	const errorId = `${id}-error`;
+	const hasDescription = isPresent(description);
+	const hasError = Boolean(error) && error !== true && isPresent(error);
+	const describedBy = [
+		describedByProp,
+		hasDescription && descriptionId,
+		hasError && errorId
+	].filter(Boolean).join(" ") || void 0;
+	return /* @__PURE__ */ jsxs("fieldset", {
+		...props,
+		"data-slot": "checkbox-group",
+		"aria-describedby": describedBy,
+		className: cn("group/checkbox-group m-0 min-w-0 border-0 p-0", className),
+		children: [/* @__PURE__ */ jsx("legend", {
+			className: "float-start mb-1.5 w-full p-0 text-sm font-medium text-fg group-disabled/checkbox-group:opacity-50",
+			children: legend
+		}), /* @__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/checkbox-group:opacity-50",
+					children: description
+				}),
+				/* @__PURE__ */ jsx("div", {
+					"data-orientation": orientation,
+					className: cn("flex", orientation === "vertical" ? "flex-col gap-2" : "flex-row flex-wrap gap-x-6 gap-y-2"),
+					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 })]
+				})
+			]
+		})]
+	});
+}
+//#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. */
+function useModalContext(part, kind, owner) {
+	const context = useContext(ModalContext);
+	if (!context || context.kind !== kind) throw new Error(`${part} must be rendered inside <${owner}>`);
+	return context;
+}
+/** Registers a rendered title (and description) so the dialog's aria-* point at them. */
+function useAnnounceHeading({ setHasTitle, setHasDescription }, hasDescription) {
+	useLayoutEffect(() => {
+		setHasTitle(true);
+		return () => setHasTitle(false);
+	}, [setHasTitle]);
+	useLayoutEffect(() => {
+		if (!hasDescription) return;
+		setHasDescription(true);
+		return () => setHasDescription(false);
+	}, [hasDescription, setHasDescription]);
+}
+const lockHolders = /* @__PURE__ */ new Set();
+let unlockedStyle = {
+	overflow: "",
+	paddingInlineEnd: ""
+};
+function lockScroll(el) {
+	if (lockHolders.has(el)) return;
+	lockHolders.add(el);
+	if (lockHolders.size > 1) return;
+	const root = document.documentElement;
+	unlockedStyle = {
+		overflow: root.style.overflow,
+		paddingInlineEnd: root.style.paddingInlineEnd
+	};
+	root.style.paddingInlineEnd = `${window.innerWidth - root.clientWidth}px`;
+	root.style.overflow = "hidden";
+}
+function unlockScroll(el) {
+	if (!lockHolders.delete(el) || lockHolders.size > 0) return;
+	const root = document.documentElement;
+	root.style.overflow = unlockedStyle.overflow;
+	root.style.paddingInlineEnd = unlockedStyle.paddingInlineEnd;
+}
+const BOUNCE_MS = 200;
+const bounces = /* @__PURE__ */ new WeakMap();
+function bounce(el, keyframes) {
+	if (!keyframes || typeof el.animate !== "function" || typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
+	bounces.get(el)?.cancel();
+	bounces.set(el, el.animate(keyframes(), { duration: BOUNCE_MS }));
+}
+/**
+* Native `<dialog>` + showModal(): top layer (no portal), inert page, focus containment and
+* restore, and Esc all come from the platform. Controlled: `open` drives it and every close
+* request goes through `onOpenChange`. `children` is the wrapper's panel, mounted only while open
+* or exiting.
+*/
+function ModalShell({ kind, open, onOpenChange, alert = false, dismissible = true, bounceKeyframes, className, children, ref, onCancel, onClose, onPointerDown, onMouseDown, onClick, "aria-labelledby": labelledByProp, "aria-describedby": describedByProp, ...props }) {
+	const dialogRef = useRef(null);
+	const setRef = useMergedRef(dialogRef, ref);
+	const titleId = useId();
+	const descriptionId = useId();
+	const [hasTitle, setHasTitle] = useState(false);
+	const [hasDescription, setHasDescription] = useState(false);
+	const [present, setPresent] = useState(open);
+	if (open && !present) setPresent(true);
+	const [closeCount, setCloseCount] = useState(0);
+	const latest = useRef({
+		open,
+		onOpenChange,
+		alert,
+		dismissible,
+		bounceKeyframes
+	});
+	useInsertionEffect(() => {
+		latest.current = {
+			open,
+			onOpenChange,
+			alert,
+			dismissible,
+			bounceKeyframes
+		};
+	});
+	const requestClose = useCallback((reason) => {
+		const el = dialogRef.current;
+		const { open, onOpenChange, alert, dismissible, bounceKeyframes } = latest.current;
+		if (!el || !open || el.hasAttribute("data-closing")) return;
+		if (!dismissible || alert && reason === "backdrop") {
+			bounce(el, bounceKeyframes);
+			return;
+		}
+		onOpenChange(false, reason);
+	}, []);
+	const showOnAttach = useCallback((node) => {
+		const el = node?.parentElement;
+		if (!open || !(el instanceof HTMLDialogElement)) return;
+		el.removeAttribute("data-closing");
+		if (!el.open) {
+			lockScroll(el);
+			el.showModal();
+		}
+	}, [open]);
+	useLayoutEffect(() => {
+		const el = dialogRef.current;
+		if (open || !el?.open) return;
+		el.setAttribute("data-closing", "");
+		let cancelled = false;
+		Promise.allSettled(el.getAnimations().map((animation) => animation.finished)).then(() => {
+			if (!cancelled && el.open && el.hasAttribute("data-closing")) el.close();
+		});
+		return () => {
+			cancelled = true;
+		};
+	}, [open]);
+	const handleCancel = (event) => {
+		onCancel?.(event);
+		event.preventDefault();
+		requestClose("escape");
+	};
+	const handleClose = (event) => {
+		onClose?.(event);
+		const el = event.currentTarget;
+		if (el.open) return;
+		el.removeAttribute("data-closing");
+		unlockScroll(el);
+		setPresent(false);
+		setCloseCount((count) => count + 1);
+		if (latest.current.open) latest.current.onOpenChange(false, "escape");
+	};
+	const pressedBackdrop = useRef(false);
+	const handlePointerDown = (event) => {
+		onPointerDown?.(event);
+		pressedBackdrop.current = event.target === event.currentTarget;
+	};
+	const handleMouseDown = (event) => {
+		onMouseDown?.(event);
+		if (event.target === event.currentTarget) event.preventDefault();
+	};
+	const handleClick = (event) => {
+		onClick?.(event);
+		const onBackdrop = pressedBackdrop.current && event.target === event.currentTarget;
+		pressedBackdrop.current = false;
+		if (onBackdrop) requestClose("backdrop");
+	};
+	useEffect(() => {
+		const el = dialogRef.current;
+		if (!el) return;
+		if (el.open) lockScroll(el);
+		return () => unlockScroll(el);
+	}, []);
+	const rendered = open || present;
+	return /* @__PURE__ */ jsx(ModalContext, {
+		value: {
+			kind,
+			titleId,
+			descriptionId,
+			alert,
+			dismissible,
+			setHasTitle,
+			setHasDescription,
+			requestClose
+		},
+		children: /* @__PURE__ */ jsx("dialog", {
+			...props,
+			ref: setRef,
+			"data-slot": kind,
+			role: alert ? "alertdialog" : void 0,
+			"aria-labelledby": labelledByProp ?? (hasTitle ? titleId : void 0),
+			"aria-describedby": describedByProp ?? (hasDescription ? descriptionId : void 0),
+			onCancel: handleCancel,
+			onClose: handleClose,
+			onPointerDown: handlePointerDown,
+			onMouseDown: handleMouseDown,
+			onClick: handleClick,
+			className,
+			children: rendered && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+				hidden: true,
+				ref: showOnAttach
+			}, closeCount), children] })
+		})
+	});
+}
+//#endregion
+//#region src/components/dialog/dialog.tsx
+function useDialogContext(part) {
+	return useModalContext(part, "dialog", "Dialog");
+}
+const sizeClasses$2 = {
+	sm: "max-w-[384px]",
+	md: "max-w-[480px]",
+	lg: "max-w-[640px]"
+};
+const motionClasses$1 = [
+	"transition-[opacity,translate,scale] duration-200 ease-[cubic-bezier(0.16,1,0.3,1)]",
+	"starting:open:translate-y-1 starting:open:scale-96 starting:open:opacity-0",
+	"data-closing:pointer-events-none data-closing:scale-98 data-closing:opacity-0",
+	"data-closing:duration-120 data-closing:ease-[cubic-bezier(0.2,0,1,0.9)]",
+	"backdrop:bg-dialog-backdrop backdrop:transition-opacity backdrop:duration-200 backdrop:ease-[cubic-bezier(0.16,1,0.3,1)]",
+	"starting:open:backdrop:opacity-0",
+	"data-closing:backdrop:opacity-0 data-closing:backdrop:duration-120",
+	"data-closing:backdrop:ease-[cubic-bezier(0.2,0,1,0.9)]"
+];
+const sheetClasses = [
+	"max-sm:mx-0 max-sm:mt-auto max-sm:mb-0 max-sm:w-full max-sm:max-w-none",
+	"max-sm:max-h-[calc(100dvh-32px)]",
+	"max-sm:duration-250 max-sm:ease-[cubic-bezier(0.33,1,0.68,1)]",
+	"max-sm:starting:open:translate-y-full max-sm:starting:open:scale-100 max-sm:starting:open:opacity-100",
+	"max-sm:data-closing:translate-y-full max-sm:data-closing:scale-100 max-sm:data-closing:opacity-100",
+	"max-sm:data-closing:duration-180",
+	"max-sm:backdrop:duration-250 max-sm:backdrop:ease-[cubic-bezier(0.33,1,0.68,1)]",
+	"max-sm:data-closing:backdrop:duration-180"
+];
+function bounceKeyframes() {
+	const sheet = typeof window.matchMedia === "function" && window.matchMedia("(width < 40rem)").matches;
+	const rest = sheet ? { translate: "0 0" } : { scale: "1" };
+	const peak = sheet ? { translate: "0 -6px" } : { scale: "1.02" };
+	return [
+		{
+			...rest,
+			easing: "ease-out"
+		},
+		{
+			...peak,
+			easing: "ease-out"
+		},
+		rest
+	];
+}
+/**
+* Modal dialog on the native `<dialog>` + showModal() (behavior in ModalShell). Controlled: `open`
+* drives it and every close request goes through `onOpenChange`.
+*/
+function Dialog({ size = "md", className, children, ...props }) {
+	return /* @__PURE__ */ jsx(ModalShell, {
+		...props,
+		kind: "dialog",
+		bounceKeyframes,
+		className: cn("m-auto w-[calc(100%-2rem)] max-h-[calc(100dvh-64px)] overflow-visible border-0 bg-transparent p-0 text-fg", "overscroll-contain outline-none", sizeClasses$2[size], motionClasses$1, sheetClasses, className),
+		children: /* @__PURE__ */ jsx("div", {
+			"data-slot": "dialog-panel",
+			className: cn("flex max-h-[inherit] flex-col rounded-xl border border-popover-border bg-popover-bg shadow-dialog", "forced-colors:border-[CanvasText]", "max-sm:rounded-b-none max-sm:border-b-0 max-sm:pb-[env(safe-area-inset-bottom)]"),
+			children
+		})
+	});
+}
+function DialogHeader({ title, description, closeButton, className, ...props }) {
+	const context = useDialogContext("DialogHeader");
+	const hasDescription = description != null && description !== false && description !== "";
+	const showClose = closeButton ?? !context.alert;
+	useAnnounceHeading(context, hasDescription);
+	return /* @__PURE__ */ jsxs("div", {
+		...props,
+		"data-slot": "dialog-header",
+		className: cn("flex shrink-0 items-start gap-4 px-6 pt-6 pb-4", className),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "min-w-0 flex-1",
+			children: [/* @__PURE__ */ jsx("h2", {
+				id: context.titleId,
+				className: "m-0 text-xl/tight font-medium text-fg",
+				children: title
+			}), hasDescription && /* @__PURE__ */ jsx("p", {
+				id: context.descriptionId,
+				className: "mt-1.5 mb-0 text-sm text-fg-muted",
+				children: description
+			})]
+		}), showClose && /* @__PURE__ */ jsx(Button, {
+			intent: "ghost",
+			size: "sm",
+			icon: /* @__PURE__ */ jsx(X, {}),
+			"aria-label": "Close",
+			tooltip: false,
+			disabled: !context.dismissible,
+			className: "-me-2 -mt-1 shrink-0",
+			onClick: () => context.requestClose("close-button")
+		})]
+	});
+}
+/** Scrolls when the content is taller than the space left between header and footer. */
+function DialogBody({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		"data-slot": "dialog-body",
+		className: cn("min-h-0 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 DialogFooter({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		"data-slot": "dialog-footer",
+		className: cn("flex shrink-0 flex-wrap items-center justify-end gap-2 px-6 pt-5 pb-6", "max-sm:*:data-[slot=button]:flex-1", className)
+	});
+}
+//#endregion
+//#region src/components/drawer/drawer.tsx
+function useDrawerContext(part) {
+	return useModalContext(part, "drawer", "Drawer");
+}
+const sizeClasses$1 = {
+	sm: "w-[280px]",
+	md: "w-[384px]",
+	lg: "w-[480px]"
+};
+const sideClasses = {
+	left: ["mr-auto ml-0", "motion-safe:starting:open:-translate-x-full motion-safe:data-closing:-translate-x-full"],
+	right: ["mr-0 ml-auto", "motion-safe:starting:open:translate-x-full motion-safe:data-closing:translate-x-full"]
+};
+const motionClasses = [
+	"transition-[translate,opacity] duration-200 ease-[cubic-bezier(0.4,0,0.2,1)]",
+	"motion-reduce:starting:open:opacity-0 motion-reduce:data-closing:opacity-0",
+	"data-closing:pointer-events-none",
+	"backdrop:bg-dialog-backdrop backdrop:transition-opacity backdrop:duration-200 backdrop:ease-[cubic-bezier(0.4,0,0.2,1)]",
+	"starting:open:backdrop:opacity-0 data-closing:backdrop:opacity-0"
+];
+const panelSideClasses = {
+	left: "border-r",
+	right: "border-l"
+};
+/**
+* Modal side panel on the native `<dialog>` (behavior shared with Dialog through ModalShell).
+* Controlled through `open` / `onOpenChange(open, reason)`; Esc, the backdrop, DrawerHeader's close
+* button and DrawerClose all ask through `onOpenChange`. Needs a name: `aria-label` /
+* `aria-labelledby`, or a DrawerHeader title.
+*/
+function Drawer({ side = "right", size = "md", className, children, ref, ...props }) {
+	const dialogRef = useRef(null);
+	const setRef = useMergedRef(dialogRef, ref);
+	useEffect(() => {
+		if (process.env.NODE_ENV === "production" || !props.open) return;
+		const timer = setTimeout(() => {
+			const el = dialogRef.current;
+			if (!el?.open) return;
+			if (el.getAttribute("aria-label")?.trim() || el.getAttribute("aria-labelledby")) return;
+			console.warn("Drawer needs an accessible name: pass aria-label or render a DrawerHeader title.");
+		});
+		return () => clearTimeout(timer);
+	}, [props.open]);
+	return /* @__PURE__ */ jsx(ModalShell, {
+		...props,
+		ref: setRef,
+		kind: "drawer",
+		"data-side": side,
+		"data-size": size,
+		className: cn("my-0 h-dvh max-h-none max-w-[calc(100vw-56px)] overflow-visible border-0 bg-transparent p-0 text-fg", "overscroll-contain outline-none", sizeClasses$1[size], sideClasses[side], motionClasses, className),
+		children: /* @__PURE__ */ jsx("div", {
+			"data-slot": "drawer-panel",
+			className: cn("flex h-full flex-col border-popover-border bg-popover-bg shadow-dialog", panelSideClasses[side], "forced-colors:border-[CanvasText]"),
+			children
+		})
+	});
+}
+/** Title, optional description and the close button, pinned above the body. */
+function DrawerHeader({ title, description, className, ...props }) {
+	const context = useDrawerContext("DrawerHeader");
+	const hasDescription = description != null && description !== false && description !== "";
+	useAnnounceHeading(context, hasDescription);
+	return /* @__PURE__ */ jsxs("div", {
+		...props,
+		"data-slot": "drawer-header",
+		className: cn("flex shrink-0 items-start gap-4 px-6 pt-6 pb-4", className),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "min-w-0 flex-1",
+			children: [/* @__PURE__ */ jsx("h2", {
+				id: context.titleId,
+				className: "m-0 text-xl/tight font-medium wrap-anywhere text-fg",
+				children: title
+			}), hasDescription && /* @__PURE__ */ jsx("p", {
+				id: context.descriptionId,
+				className: "mt-1.5 mb-0 text-sm wrap-anywhere text-fg-muted",
+				children: description
+			})]
+		}), /* @__PURE__ */ jsx(Button, {
+			intent: "ghost",
+			size: "sm",
+			icon: /* @__PURE__ */ jsx(X, {}),
+			"aria-label": "Close",
+			tooltip: false,
+			className: "-me-2 -mt-1 shrink-0",
+			onClick: () => context.requestClose("close-button")
+		})]
+	});
+}
+/** 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/input/copy-input.tsx
+const RESET_MS = 1500;
+function CopyInput({ value, mono = true, size = "md", onFocus, onClick, ...props }) {
+	const inputRef = useRef(null);
+	const [result, setResult] = useState("idle");
+	const timer = useRef(void 0);
+	useEffect(() => () => clearTimeout(timer.current), []);
+	const copy = async () => {
+		clearTimeout(timer.current);
+		try {
+			await navigator.clipboard.writeText(value);
+			setResult("copied");
+		} catch {
+			setResult("failed");
+		}
+		timer.current = setTimeout(() => setResult("idle"), RESET_MS);
+	};
+	return /* @__PURE__ */ jsx(FieldFrame, {
+		...props,
+		value,
+		readOnly: true,
+		mono,
+		size,
+		inputRef,
+		status: result === "copied" ? "Copied" : result === "failed" ? "Copy failed" : "",
+		onFocus: (e) => {
+			e.currentTarget.select();
+			onFocus?.(e);
+		},
+		onClick: (e) => {
+			e.currentTarget.select();
+			onClick?.(e);
+		},
+		actions: props.disabled ? null : /* @__PURE__ */ jsx(Button, {
+			icon: result === "copied" ? /* @__PURE__ */ jsx(Check, {}) : /* @__PURE__ */ jsx(Copy, {}),
+			"aria-label": "Copy",
+			intent: "ghost",
+			size,
+			className: compactButton[size],
+			onClick: copy
+		})
+	});
+}
+//#endregion
+//#region src/components/input/input.tsx
+function Input({ type = "text", ...props }) {
+	return /* @__PURE__ */ jsx(FieldFrame, {
+		...props,
+		type
+	});
+}
+//#endregion
+//#region src/components/input/password-input.tsx
+function PasswordInput({ autoComplete = "current-password", size = "md", ...props }) {
+	const inputRef = useRef(null);
+	const [visible, setVisible] = useState(false);
+	return /* @__PURE__ */ jsx(FieldFrame, {
+		...props,
+		size,
+		type: visible ? "text" : "password",
+		autoComplete,
+		inputRef,
+		actions: props.disabled ? null : /* @__PURE__ */ jsx(Button, {
+			icon: visible ? /* @__PURE__ */ jsx(EyeOff, {}) : /* @__PURE__ */ jsx(Eye, {}),
+			"aria-label": "Show password",
+			"aria-pressed": visible,
+			intent: "ghost",
+			size,
+			className: compactButton[size],
+			onMouseDown: (e) => e.preventDefault(),
+			onClick: () => setVisible((v) => !v)
+		})
+	});
+}
+//#endregion
+//#region src/components/input/search-input.tsx
+function setNativeValue(input, value) {
+	Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value")?.set?.call(input, value);
+	input.dispatchEvent(new Event("input", { bubbles: true }));
+}
+function SearchInput({ onClear, onChange, onKeyDown, inputClassName, size = "md", ...props }) {
+	const inputRef = useRef(null);
+	const controlled = props.value !== void 0;
+	const [filled, setFilled] = useState(() => Boolean(props.defaultValue));
+	const canClear = (controlled ? String(props.value) !== "" : filled) && !props.disabled && !props.readOnly;
+	const clear = () => {
+		const input = inputRef.current;
+		if (!input) return;
+		setNativeValue(input, "");
+		onClear?.();
+		input.focus();
+	};
+	return /* @__PURE__ */ jsx(FieldFrame, {
+		...props,
+		size,
+		type: "search",
+		inputRef,
+		start: /* @__PURE__ */ jsx(Search, {}),
+		inputClassName: cn("[&::-webkit-search-cancel-button]:appearance-none [&::-webkit-search-decoration]:appearance-none", inputClassName),
+		onChange: (e) => {
+			if (!controlled) setFilled(e.currentTarget.value !== "");
+			onChange?.(e);
+		},
+		onKeyDown: (e) => {
+			onKeyDown?.(e);
+			if (e.key !== "Escape" || e.defaultPrevented || e.currentTarget.value === "") return;
+			if (props.readOnly) return;
+			e.preventDefault();
+			e.stopPropagation();
+			clear();
+		},
+		actions: canClear ? /* @__PURE__ */ jsx(Button, {
+			icon: /* @__PURE__ */ jsx(X, {}),
+			"aria-label": "Clear search",
+			intent: "ghost",
+			size,
+			className: compactButton[size],
+			onMouseDown: (e) => e.preventDefault(),
+			onClick: clear
+		}) : null
+	});
+}
+//#endregion
+//#region src/components/meter/meter.tsx
+const toneClasses = {
+	neutral: "bg-neutral-border",
+	info: "bg-info",
+	success: "bg-success",
+	warning: "bg-warning",
+	danger: "bg-danger"
+};
+/**
+* Stacked proportion bar with a legend. The bar is decorative; the legend list carries the
+* numbers for assistive tech, so nothing is conveyed by color alone.
+*/
+function Meter({ label, summary, segments, className, ...props }) {
+	const labelId = useId();
+	const shown = segments.filter((s) => s.value > 0);
+	return /* @__PURE__ */ jsxs("div", {
+		...props,
+		"data-slot": "meter",
+		className: cn("text-xs", className),
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex justify-between gap-3",
+				children: [/* @__PURE__ */ jsx("span", {
+					id: labelId,
+					className: "font-medium",
+					children: label
+				}), summary && /* @__PURE__ */ jsx("span", {
+					className: "text-fg-muted",
+					children: summary
+				})]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				"aria-hidden": true,
+				className: "mt-2 flex h-2 gap-0.5 overflow-hidden rounded-full bg-surface-muted",
+				children: shown.map((s) => /* @__PURE__ */ jsx("span", {
+					className: cn("min-w-1", toneClasses[s.tone]),
+					style: { flex: s.value }
+				}, s.label))
+			}),
+			shown.length > 0 && /* @__PURE__ */ jsx("ul", {
+				"aria-labelledby": labelId,
+				className: "mt-2 flex flex-wrap gap-x-3.5 gap-y-1 text-fg-muted",
+				children: shown.map((s) => /* @__PURE__ */ jsxs("li", {
+					className: "flex items-center gap-1.5",
+					children: [
+						/* @__PURE__ */ jsx("span", {
+							"aria-hidden": true,
+							className: cn("size-2 rounded-xs", toneClasses[s.tone])
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: "font-medium text-fg",
+							children: s.value
+						}),
+						s.label
+					]
+				}, s.label))
+			})
+		]
+	});
+}
+//#endregion
+//#region src/components/select/select.tsx
+const selectPadding = {
+	sm: "px-3",
+	md: "px-3",
+	lg: "px-4"
+};
+const iconStartPadding = {
+	sm: "ps-8",
+	md: "ps-[34px]",
+	lg: "ps-[38px]"
+};
+const chevronEndPadding = {
+	sm: "pe-8",
+	md: "pe-[34px]",
+	lg: "pe-[38px]"
+};
+const labelRestingWidth = {
+	sm: "max-w-[calc(100%-40px)]",
+	md: "max-w-[calc(100%-42px)]",
+	lg: "max-w-[calc(100%-50px)]"
+};
+const isGroup = (item) => "options" in item;
+const pickerClasses = cn("supports-[appearance:base-select]:[@media(hover:hover)_and_(pointer:fine)]:[appearance:base-select]", "supports-[appearance:base-select]:[@media(hover:hover)_and_(pointer:fine)]:[&::picker(select)]:[appearance:base-select]", "supports-[appearance:base-select]:[@media(hover:hover)_and_(pointer:fine)]:[&::picker-icon]:hidden", "supports-[appearance:base-select]:[@media(hover:hover)_and_(pointer:fine)]:[&::picker(select)]:[position-area:block-end_span-inline-end]", "supports-[appearance:base-select]:[@media(hover:hover)_and_(pointer:fine)]:[&::picker(select)]:[position-try-fallbacks:flip-block]", "supports-[appearance:base-select]:[@media(hover:hover)_and_(pointer:fine)]:[&::picker(select)]:mt-1", "supports-[appearance:base-select]:[@media(hover:hover)_and_(pointer:fine)]:[&::picker(select)]:min-w-[anchor-size(width)]", "supports-[appearance:base-select]:[@media(hover:hover)_and_(pointer:fine)]:[&::picker(select)]:max-h-[max(10rem,calc(100%-12px))]", "supports-[appearance:base-select]:[@media(hover:hover)_and_(pointer:fine)]:[&::picker(select)]:overflow-y-auto", "supports-[appearance:base-select]:[@media(hover:hover)_and_(pointer:fine)]:[&::picker(select)]:rounded-xl", "supports-[appearance:base-select]:[@media(hover:hover)_and_(pointer:fine)]:[&::picker(select)]:border", "supports-[appearance:base-select]:[@media(hover:hover)_and_(pointer:fine)]:[&::picker(select)]:border-popover-border", "supports-[appearance:base-select]:[@media(hover:hover)_and_(pointer:fine)]:[&::picker(select)]:bg-popover-bg", "supports-[appearance:base-select]:[@media(hover:hover)_and_(pointer:fine)]:[&::picker(select)]:p-1", "supports-[appearance:base-select]:[@media(hover:hover)_and_(pointer:fine)]:[&::picker(select)]:shadow-popover", "supports-[appearance:base-select]:[@media(hover:hover)_and_(pointer:fine)]:[&::picker(select)]:text-fg", "supports-[appearance:base-select]:[@media(hover:hover)_and_(pointer:fine)]:[&::picker(select)]:origin-top", "supports-[appearance:base-select]:[@media(hover:hover)_and_(pointer:fine)]:[&::picker(select)]:opacity-0", "supports-[appearance:base-select]:[@media(hover:hover)_and_(pointer:fine)]:[&::picker(select)]:scale-96", "supports-[appearance:base-select]:[@media(hover:hover)_and_(pointer:fine)]:[&::picker(select)]:transition-[opacity,scale,display,overlay]", "supports-[appearance:base-select]:[@media(hover:hover)_and_(pointer:fine)]:[&::picker(select)]:transition-discrete", "supports-[appearance:base-select]:[@media(hover:hover)_and_(pointer:fine)]:[&::picker(select)]:duration-80", "supports-[appearance:base-select]:[@media(hover:hover)_and_(pointer:fine)]:[&::picker(select)]:ease-out", "supports-[appearance:base-select]:[@media(hover:hover)_and_(pointer:fine)]:open:[&::picker(select)]:opacity-100", "supports-[appearance:base-select]:[@media(hover:hover)_and_(pointer:fine)]:open:[&::picker(select)]:scale-100", "supports-[appearance:base-select]:[@media(hover:hover)_and_(pointer:fine)]:open:[&::picker(select)]:duration-120", "supports-[appearance:base-select]:[@media(hover:hover)_and_(pointer:fine)]:open:[&::picker(select)]:starting:opacity-0", "supports-[appearance:base-select]:[@media(hover:hover)_and_(pointer:fine)]:open:[&::picker(select)]:starting:scale-96", "supports-[appearance:base-select]:[@media(hover:hover)_and_(pointer:fine)]:motion-reduce:[&::picker(select)]:transition-none");
+function optionClasses(size, mono) {
+	return cn("bg-popover-bg text-fg checked:font-medium disabled:text-fg-subtle", textSize[size], mono && "font-mono", "supports-[appearance:base-select]:[@media(hover:hover)_and_(pointer:fine)]:flex", "supports-[appearance:base-select]:[@media(hover:hover)_and_(pointer:fine)]:cursor-default", "supports-[appearance:base-select]:[@media(hover:hover)_and_(pointer:fine)]:items-center", "supports-[appearance:base-select]:[@media(hover:hover)_and_(pointer:fine)]:gap-2", "supports-[appearance:base-select]:[@media(hover:hover)_and_(pointer:fine)]:rounded-lg", "supports-[appearance:base-select]:[@media(hover:hover)_and_(pointer:fine)]:bg-transparent", "supports-[appearance:base-select]:[@media(hover:hover)_and_(pointer:fine)]:px-2", "supports-[appearance:base-select]:[@media(hover:hover)_and_(pointer:fine)]:py-1.5", "supports-[appearance:base-select]:[@media(hover:hover)_and_(pointer:fine)]:not-disabled:hover:bg-popover-highlight", "supports-[appearance:base-select]:[@media(hover:hover)_and_(pointer:fine)]:focus-visible:bg-popover-highlight", "supports-[appearance:base-select]:[@media(hover:hover)_and_(pointer:fine)]:focus-visible:outline-hidden", "supports-[appearance:base-select]:[@media(hover:hover)_and_(pointer:fine)]:disabled:text-fg", "supports-[appearance:base-select]:[@media(hover:hover)_and_(pointer:fine)]:disabled:opacity-50", "supports-[appearance:base-select]:[@media(hover:hover)_and_(pointer:fine)]:[&::checkmark]:order-1", "supports-[appearance:base-select]:[@media(hover:hover)_and_(pointer:fine)]:[&::checkmark]:ms-auto");
+}
+function openPicker(select) {
+	select.focus();
+	try {
+		select.showPicker?.();
+	} catch {}
+}
+/**
+* Single-choice select: a real `<select>` (native keyboard, typeahead, forms, validation and
+* autofill), customized through `appearance: base-select` where supported. Same frame as Input.
+*/
+function Select({ options, placeholder, helperText, error, size = "md", start, mono = false, className, selectClassName, label, floating = false, id, required, disabled, value, defaultValue, onChange, ref, "aria-describedby": describedByProp, "aria-invalid": ariaInvalid, ...props }) {
+	const selectRef = useRef(null);
+	const setRef = useMergedRef(selectRef, ref);
+	const controlled = value !== void 0;
+	const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue ?? "");
+	const current = controlled ? value : uncontrolledValue;
+	useEffect(() => {
+		const form = selectRef.current?.form;
+		if (!form) return;
+		let timer;
+		const onReset = () => {
+			timer = setTimeout(() => {
+				if (selectRef.current) setUncontrolledValue(selectRef.current.value);
+			});
+		};
+		form.addEventListener("reset", onReset);
+		return () => {
+			form.removeEventListener("reset", onReset);
+			clearTimeout(timer);
+		};
+	}, [props.form]);
+	const leading = options.flatMap((item) => isGroup(item) ? item.options : [item]).find((option) => option.value === current)?.icon ?? start;
+	const hasLeading = isPresent(leading);
+	const optionClass = optionClasses(size, mono);
+	const renderOption = (option) => /* @__PURE__ */ jsxs("option", {
+		value: option.value,
+		disabled: option.disabled,
+		className: optionClass,
+		children: [isPresent(option.icon) && /* @__PURE__ */ jsx("span", {
+			"aria-hidden": true,
+			className: "flex shrink-0 text-fg-muted [&_svg]:size-4 [&_svg]:shrink-0",
+			children: option.icon
+		}), /* @__PURE__ */ jsx("span", { children: option.label })]
+	}, option.value);
+	return /* @__PURE__ */ jsx(FieldShell, {
+		label,
+		floating,
+		helperText,
+		error,
+		size,
+		id,
+		required,
+		disabled,
+		"aria-describedby": describedByProp,
+		hasStart: hasLeading,
+		className,
+		controlRef: selectRef,
+		activate: openPicker,
+		children: (field) => /* @__PURE__ */ jsxs(Fragment, { children: [
+			field.floatingLabel(labelRestingWidth[size]),
+			/* @__PURE__ */ jsxs("select", {
+				...props,
+				ref: setRef,
+				id: field.id,
+				required,
+				disabled,
+				...controlled ? { value } : { defaultValue: defaultValue ?? "" },
+				onChange: (e) => {
+					if (!controlled) setUncontrolledValue(e.currentTarget.value);
+					onChange?.(e);
+				},
+				"aria-invalid": field.invalid ? true : ariaInvalid,
+				"aria-describedby": field.describedBy,
+				className: cn("size-full min-w-0 appearance-none items-center truncate rounded-[inherit] bg-transparent text-fg outline-none", "pointer-coarse:text-base disabled:cursor-not-allowed", "[&:has(option[value=\"\"]:checked)]:text-input-placeholder", textSize[size], selectPadding[size], hasLeading && iconStartPadding[size], chevronEndPadding[size], mono && "font-mono", pickerClasses, selectClassName),
+				children: [/* @__PURE__ */ jsx("option", {
+					value: "",
+					disabled: true,
+					hidden: true,
+					children: field.floating ? "" : placeholder ?? ""
+				}), options.map((item) => isGroup(item) ? /* @__PURE__ */ jsx("optgroup", {
+					label: item.label,
+					className: cn("bg-popover-bg font-sans text-fg", "supports-[appearance:base-select]:[@media(hover:hover)_and_(pointer:fine)]:text-xs", "supports-[appearance:base-select]:[@media(hover:hover)_and_(pointer:fine)]:font-medium", "supports-[appearance:base-select]:[@media(hover:hover)_and_(pointer:fine)]:text-fg-muted", "supports-[appearance:base-select]:[@media(hover:hover)_and_(pointer:fine)]:not-first-of-type:mt-1"),
+					children: item.options.map(renderOption)
+				}, `group:${item.label}`) : renderOption(item))]
+			}),
+			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]),
+				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]),
+				children: /* @__PURE__ */ jsx(ChevronDown, { className: "transition-transform duration-150 ease-out group-has-[select:open]/control:rotate-180 motion-reduce:transition-none" })
+			})
+		] })
+	});
+}
+//#endregion
+//#region src/lib/slot.tsx
+function setRef(ref, node) {
+	if (typeof ref === "function") return ref(node);
+	if (ref) ref.current = node;
+}
+function composeRefs(...refs) {
+	return (node) => {
+		const cleanups = refs.map((ref) => setRef(ref, node));
+		return () => {
+			for (const [i, ref] of refs.entries()) {
+				const cleanup = cleanups[i];
+				if (typeof cleanup === "function") cleanup();
+				else setRef(ref, null);
+			}
+		};
+	};
+}
+function mergeProps(slot, child) {
+	const merged = {
+		...slot,
+		...child
+	};
+	for (const key of Object.keys(slot)) {
+		const own = slot[key];
+		const theirs = child[key];
+		if (/^on[A-Z]/.test(key) && typeof own === "function" && typeof theirs === "function") merged[key] = (...args) => {
+			theirs(...args);
+			own(...args);
+		};
+		else if (key === "className") merged.className = cn(own, theirs);
+		else if (key === "style") merged.style = {
+			...own,
+			...theirs
+		};
+	}
+	return merged;
+}
+/** Applies `wrap` to an element's children, or to what a render-prop child returns. */
+function wrapChildren(children, wrap) {
+	if (typeof children !== "function") return wrap(children);
+	return (...args) => wrap(children(...args));
+}
+/** Renders its only child with these props merged in (Radix Slot style). */
+function Slot({ children, ref, ...props }) {
+	const child = Children.only(children);
+	const childProps = isValidElement(child) ? child.props : {};
+	const childRef = childProps.ref;
+	const composedRef = useMemo(() => composeRefs(ref, childRef), [ref, childRef]);
+	if (!isValidElement(child)) return null;
+	return cloneElement(child, {
+		...mergeProps(props, childProps),
+		ref: composedRef
+	});
+}
+//#endregion
+//#region src/components/tabs/shared.tsx
+const listBase = [
+	"relative isolate max-w-full overflow-x-auto overscroll-x-contain scroll-px-6",
+	"[mask-image:linear-gradient(to_right,transparent,#000_var(--tabs-fade-left,0px),#000_calc(100%-var(--tabs-fade-right,0px)),transparent)]",
+	"[scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
+	"before:pointer-events-none before:absolute before:left-0 before:-z-1 before:opacity-0",
+	"before:w-(--tabs-indicator-w) data-indicator:before:opacity-100",
+	"before:duration-200 before:ease-[cubic-bezier(0.16,1,0.3,1)]",
+	"data-instant:before:transition-none data-instant:after:transition-none"
+];
+const listVariant = {
+	line: [
+		"flex items-center shadow-[inset_0_-1px_0_var(--color-border-strong)]",
+		"before:bottom-0 before:h-0.5 before:bg-fg before:[translate:var(--tabs-indicator-x)_0]",
+		"before:transition-[translate,width]",
+		"forced-colors:before:bg-[Highlight] forced-colors:before:[forced-color-adjust:none]",
+		"after:pointer-events-none after:absolute after:top-0 after:left-0 after:-z-1 after:rounded-lg",
+		"after:bg-fg/7 after:opacity-0 data-hover:after:opacity-100",
+		"after:h-(--tabs-hover-h) after:w-(--tabs-hover-w)",
+		"after:[translate:var(--tabs-hover-x)_var(--tabs-hover-y)]",
+		"after:transition-[translate,width,height,opacity] after:duration-150",
+		"after:ease-[cubic-bezier(0.33,1,0.68,1)]",
+		"data-hover-enter:after:transition-opacity"
+	],
+	segmented: [
+		"inline-flex w-fit rounded-md p-1 shadow-[inset_0_0_0_1px_var(--color-ring)]",
+		"before:top-0 before:h-(--tabs-indicator-h) before:rounded-sm before:bg-fg/8",
+		"before:[translate:var(--tabs-indicator-x)_var(--tabs-indicator-y)]",
+		"before:transition-[translate,width,height]",
+		"forced-colors:before:border-2 forced-colors:before:border-[Highlight]"
+	]
+};
+const listSize = {
+	line: {
+		sm: "h-10",
+		md: "h-12"
+	},
+	segmented: {
+		sm: "h-8",
+		md: "h-9"
+	}
+};
+function listClasses(variant, size) {
+	return [
+		...listBase,
+		...listVariant[variant],
+		listSize[variant][size],
+		variant === "segmented" ? "pointer-coarse:h-13" : "pointer-coarse:h-12"
+	];
+}
+const itemBase = [
+	"relative inline-flex shrink-0 cursor-pointer items-center justify-center",
+	"text-sm whitespace-nowrap text-fg-muted no-underline select-none",
+	"touch-manipulation [-webkit-tap-highlight-color:transparent]",
+	"transition-colors duration-150 ease-[cubic-bezier(0.4,0,0.2,1)]",
+	"focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-focus",
+	"pointer-coarse:min-h-11 pointer-coarse:min-w-11",
+	"not-data-disabled:not-aria-disabled:hover:text-fg data-selected:text-fg aria-[current=page]:text-fg",
+	"data-disabled:cursor-not-allowed data-disabled:opacity-50",
+	"aria-disabled:cursor-not-allowed aria-disabled:opacity-50",
+	"forced-colors:data-disabled:text-[GrayText] forced-colors:data-disabled:opacity-100",
+	"forced-colors:aria-disabled:text-[GrayText] forced-colors:aria-disabled:opacity-100"
+];
+const itemVariant = {
+	line: ["rounded-lg data-selected:font-medium aria-[current=page]:font-medium"],
+	segmented: ["h-full rounded-sm font-medium"]
+};
+const itemSize = {
+	line: {
+		sm: "h-7 px-2.5",
+		md: "h-8 px-3"
+	},
+	segmented: {
+		sm: "px-2.5",
+		md: "px-3"
+	}
+};
+function itemClasses$1(variant, size) {
+	return [
+		...itemBase,
+		...itemVariant[variant],
+		itemSize[variant][size]
+	];
+}
+/** Icon, label and badge, laid out the same in both components. */
+function TabContent({ icon, badge, children }) {
+	return /* @__PURE__ */ jsxs("span", {
+		"data-slot": "tab-content",
+		className: "inline-flex items-center gap-2",
+		children: [
+			icon != null && icon !== false && /* @__PURE__ */ jsx("span", {
+				"aria-hidden": true,
+				"data-slot": "tab-icon",
+				className: "inline-flex shrink-0 [&_svg]:size-4",
+				children: icon
+			}),
+			/* @__PURE__ */ jsxs("span", {
+				className: "grid justify-items-center",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "col-start-1 row-start-1",
+					children
+				}), /* @__PURE__ */ jsx("span", {
+					"aria-hidden": true,
+					"data-slot": "tab-label-sizer",
+					className: "invisible col-start-1 row-start-1 font-medium",
+					children
+				})]
+			}),
+			badge != null && badge !== false && /* @__PURE__ */ jsxs(Fragment, { children: [" ", /* @__PURE__ */ jsx("span", {
+				"data-slot": "tab-badge",
+				className: "inline-flex",
+				children: badge
+			})] })
+		]
+	});
+}
+function boxIn(list, el) {
+	const lr = list.getBoundingClientRect();
+	const r = el.getBoundingClientRect();
+	const scale = list.offsetWidth ? lr.width / list.offsetWidth : 1;
+	return {
+		x: (r.left - lr.left) / scale - list.clientLeft + list.scrollLeft,
+		y: (r.top - lr.top) / scale - list.clientTop + list.scrollTop,
+		w: r.width / scale,
+		h: r.height / scale
+	};
+}
+function setBox(list, name, { x, y, w, h }) {
+	list.style.setProperty(`--tabs-${name}-x`, `${x}px`);
+	list.style.setProperty(`--tabs-${name}-y`, `${y}px`);
+	list.style.setProperty(`--tabs-${name}-w`, `${w}px`);
+	list.style.setProperty(`--tabs-${name}-h`, `${h}px`);
+}
+const isSelected = (item) => item.dataset.selected !== void 0 || item.getAttribute("aria-current") === "page";
+const isDisabled = (item) => item.dataset.disabled !== void 0 || item.getAttribute("aria-disabled") === "true";
+/** This list's own items; a nested tab list keeps its items to itself. */
+function ownItems(list) {
+	return [...list.querySelectorAll("[data-slot=\"tab\"]")].filter((item) => item.closest("[data-slot=\"tab-list\"]") === list);
+}
+const LINE_BAR_OUTSET = 2;
+const EDGE_FADE = 24;
+function setEdgeFade(list) {
+	const max = list.scrollWidth - list.clientWidth;
+	const left = getComputedStyle(list).direction === "rtl" ? max + list.scrollLeft : list.scrollLeft;
+	const fade = (distance) => Math.min(Math.max(Math.round(distance), 0), EDGE_FADE);
+	list.style.setProperty("--tabs-fade-left", `${fade(left)}px`);
+	list.style.setProperty("--tabs-fade-right", `${fade(max - left)}px`);
+}
+function useTabListMotion(variant, { revealSelected = false } = {}) {
+	const listRef = useRef(null);
+	const hovered = useRef(null);
+	useLayoutEffect(() => {
+		const list = listRef.current;
+		if (!list) return;
+		let revealed;
+		const place = (instant) => {
+			setEdgeFade(list);
+			const item = ownItems(list).find(isSelected);
+			if (!item) {
+				delete list.dataset.indicator;
+				return;
+			}
+			if (revealSelected && item !== revealed) {
+				revealed = item;
+				revealInList(list, item);
+			}
+			const content = item.querySelector("[data-slot=\"tab-content\"]");
+			const box = boxIn(list, variant === "line" && content ? content : item);
+			if (variant === "line") {
+				box.x -= LINE_BAR_OUTSET;
+				box.w += 4;
+			}
+			if (instant || list.dataset.indicator === void 0) {
+				list.dataset.instant = "";
+				setBox(list, "indicator", box);
+				list.dataset.indicator = "";
+				list.offsetWidth;
+				delete list.dataset.instant;
+			} else setBox(list, "indicator", box);
+		};
+		place(true);
+		const onScroll = () => setEdgeFade(list);
+		list.addEventListener("scroll", onScroll, { passive: true });
+		const resizes = typeof ResizeObserver === "undefined" ? void 0 : new ResizeObserver(() => place(true));
+		resizes?.observe(list);
+		for (const item of ownItems(list)) resizes?.observe(item);
+		const mutations = new MutationObserver(() => {
+			place(false);
+			for (const item of ownItems(list)) resizes?.observe(item);
+		});
+		mutations.observe(list, {
+			subtree: true,
+			childList: true,
+			attributes: true,
+			attributeFilter: ["data-selected", "aria-current"]
+		});
+		return () => {
+			list.removeEventListener("scroll", onScroll);
+			mutations.disconnect();
+			resizes?.disconnect();
+		};
+	}, [variant, revealSelected]);
+	const onPointerMove = (e) => {
+		const list = listRef.current;
+		if (variant !== "line" || !list || e.pointerType && e.pointerType !== "mouse") return;
+		const item = e.target.closest("[data-slot=\"tab\"]");
+		if (!item || isDisabled(item) || !ownItems(list).includes(item)) return;
+		const entering = list.dataset.hover === void 0;
+		if (item === hovered.current && !entering) return;
+		hovered.current = item;
+		if (entering) list.dataset.hoverEnter = "";
+		else delete list.dataset.hoverEnter;
+		setBox(list, "hover", boxIn(list, item));
+		list.dataset.hover = "";
+	};
+	const onPointerLeave = () => {
+		const list = listRef.current;
+		if (!list) return;
+		hovered.current = null;
+		delete list.dataset.hover;
+	};
+	return {
+		listRef,
+		onPointerMove,
+		onPointerLeave
+	};
+}
+function revealInList(list, el) {
+	const pad = Number.parseFloat(getComputedStyle(list).scrollPaddingInlineStart) || 0;
+	const start = el.getBoundingClientRect().left - list.getBoundingClientRect().left;
+	const end = start + el.offsetWidth;
+	if (start < pad) list.scrollLeft += start - pad;
+	else if (end > list.clientWidth - pad) list.scrollLeft += end - list.clientWidth + pad;
+}
+function useRevealWhenSelected(ref, selected) {
+	useLayoutEffect(() => {
+		const el = ref.current;
+		const list = el?.closest("[data-slot=\"tab-list\"]");
+		if (selected && el && list) revealInList(list, el);
+	}, [ref, selected]);
+}
+function revealOnFocus(el) {
+	el.scrollIntoView?.({
+		block: "nearest",
+		inline: "nearest"
+	});
+}
+//#endregion
+//#region src/components/sidebar/sidebar.tsx
+/** At and above this width the sidebar is part of the layout; below it, a drawer. */
+const WIDE_QUERY = "(min-width: 960px)";
+const SidebarContext = createContext(null);
+function useSidebarContext(part) {
+	const context = useContext(SidebarContext);
+	if (!context) throw new Error(`${part} must be rendered inside <SidebarProvider>`);
+	return context;
+}
+const PanelContext = createContext(null);
+function usePanelContext(part) {
+	const context = useContext(PanelContext);
+	if (!context) throw new Error(`${part} must be rendered inside <Sidebar>`);
+	return context;
+}
+/**
+* Drawer open state shared by Sidebar and SidebarTrigger, which usually sit in different parts of
+* the app shell. One per sidebar; no shortcuts, no persistence.
+*/
+function SidebarProvider({ children }) {
+	const [open, setOpen] = useState(false);
+	const drawerId = useId();
+	useEffect(() => {
+		if (!open || typeof window.matchMedia !== "function") return;
+		const wide = window.matchMedia(WIDE_QUERY);
+		const onChange = () => {
+			if (wide.matches) setOpen(false);
+		};
+		wide.addEventListener("change", onChange);
+		return () => wide.removeEventListener("change", onChange);
+	}, [open]);
+	return /* @__PURE__ */ jsx(SidebarContext, {
+		value: {
+			open,
+			setOpen,
+			drawerId
+		},
+		children
+	});
+}
+/**
+* App navigation. From 960px up it is docked at the start of the layout: 240px, full height, only
+* the body scrolls. Below 960px it is hidden and SidebarTrigger opens the same content in a drawer.
+* Needs a SidebarProvider around both.
+*/
+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, {
+		value: { drawer: false },
+		children: /* @__PURE__ */ jsx("nav", {
+			...props,
+			"data-slot": "sidebar",
+			className: cn("sticky top-0 hidden h-dvh w-60 shrink-0 flex-col border-e border-border-strong bg-bg", "min-[960px]:flex", className),
+			children
+		})
+	}), /* @__PURE__ */ jsx(Drawer, {
+		...label,
+		id: drawerId,
+		open,
+		onOpenChange: setOpen,
+		side: "left",
+		size: "sm",
+		children: /* @__PURE__ */ jsx(PanelContext, {
+			value: { drawer: true },
+			children: /* @__PURE__ */ jsx("nav", {
+				...label,
+				"data-slot": "sidebar",
+				"data-drawer": "",
+				className: "flex min-h-0 flex-1 flex-col",
+				children
+			})
+		})
+	})] });
+}
+/** Menu button that opens the drawer; only shown below 960px. Focus returns here on close. */
+function SidebarTrigger({ "aria-label": ariaLabel = "Open navigation", className, onClick, ...props }) {
+	const { open, setOpen, drawerId } = useSidebarContext("SidebarTrigger");
+	return /* @__PURE__ */ jsx(Button, {
+		...props,
+		intent: "ghost",
+		icon: /* @__PURE__ */ jsx(Menu, {}),
+		"aria-label": ariaLabel,
+		"aria-expanded": open,
+		"aria-controls": drawerId,
+		tooltip: false,
+		className: cn("min-[960px]:hidden", className),
+		onClick: (e) => {
+			onClick?.(e);
+			if (!e.defaultPrevented) setOpen(true);
+		}
+	});
+}
+/** Brand row, pinned above the body. In the drawer it also holds the close button. */
+function SidebarHeader({ className, children, ...props }) {
+	const { drawer } = usePanelContext("SidebarHeader");
+	return /* @__PURE__ */ jsxs("div", {
+		...props,
+		"data-slot": "sidebar-header",
+		className: cn("flex h-14 shrink-0 items-center gap-2 px-3", className),
+		children: [children, drawer && /* @__PURE__ */ jsx(DrawerClose, {
+			"aria-label": "Close navigation",
+			className: "ms-auto shrink-0"
+		})]
+	});
+}
+function useHoverPill() {
+	const ref = useRef(null);
+	const hovered = useRef(null);
+	const onPointerMove = (e) => {
+		const body = ref.current;
+		if (!body || e.pointerType && e.pointerType !== "mouse") return;
+		const item = e.target.closest("[data-slot=\"sidebar-item\"]");
+		if (!item || item.closest("[data-slot=\"sidebar-body\"]") !== body) return;
+		const entering = body.dataset.hover === void 0;
+		if (item === hovered.current && !entering) return;
+		hovered.current = item;
+		if (entering) body.dataset.hoverEnter = "";
+		else delete body.dataset.hoverEnter;
+		const { x, y, w, h } = boxIn(body, item);
+		body.style.setProperty("--sidebar-hover-x", `${x}px`);
+		body.style.setProperty("--sidebar-hover-y", `${y}px`);
+		body.style.setProperty("--sidebar-hover-w", `${w}px`);
+		body.style.setProperty("--sidebar-hover-h", `${h}px`);
+		body.dataset.hover = "";
+	};
+	const onPointerLeave = () => {
+		const body = ref.current;
+		if (!body) return;
+		hovered.current = null;
+		delete body.dataset.hover;
+	};
+	return {
+		ref,
+		onPointerMove,
+		onPointerLeave
+	};
+}
+const bodyClasses = [
+	"relative isolate flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto overscroll-contain px-3 py-2",
+	"after:pointer-events-none after:absolute after:top-0 after:left-0 after:-z-1 after:rounded-md",
+	"after:bg-fg/5 after:opacity-0 data-hover:after:opacity-100",
+	"after:h-(--sidebar-hover-h) after:w-(--sidebar-hover-w)",
+	"after:[translate:var(--sidebar-hover-x)_var(--sidebar-hover-y)]",
+	"after:transition-[translate,width,height,opacity] after:duration-150",
+	"after:ease-[cubic-bezier(0.33,1,0.68,1)]",
+	"data-hover-enter:after:transition-opacity"
+];
+/** The groups, between header and footer; the only part that scrolls. */
+function SidebarBody({ className, ref, onPointerMove, onPointerLeave, ...props }) {
+	const hover = useHoverPill();
+	const mergedRef = useMergedRef(hover.ref, ref);
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		ref: mergedRef,
+		"data-slot": "sidebar-body",
+		className: cn(bodyClasses, className),
+		onPointerMove: (e) => {
+			onPointerMove?.(e);
+			hover.onPointerMove(e);
+		},
+		onPointerLeave: (e) => {
+			onPointerLeave?.(e);
+			hover.onPointerLeave();
+		}
+	});
+}
+/** Pinned below the body. */
+function SidebarFooter({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		"data-slot": "sidebar-footer",
+		className: cn("shrink-0 p-3", className)
+	});
+}
+function SidebarGroup({ label, className, children, ...props }) {
+	const labelId = useId();
+	const hasLabel = label != null && label !== false && label !== "";
+	return /* @__PURE__ */ jsxs("div", {
+		...props,
+		"data-slot": "sidebar-group",
+		className: cn("flex flex-col", className),
+		children: [hasLabel && /* @__PURE__ */ jsx("div", {
+			id: labelId,
+			"data-slot": "sidebar-group-label",
+			className: "px-2 pt-2 pb-1 text-xs/4 text-fg-muted",
+			children: label
+		}), /* @__PURE__ */ jsx("ul", {
+			"aria-labelledby": hasLabel ? labelId : void 0,
+			className: "flex flex-col gap-px",
+			children
+		})]
+	});
+}
+const itemClasses = [
+	"flex h-9 w-full items-center gap-2 rounded-md ps-2.5 pe-2",
+	"text-sm leading-5 font-medium text-fg-muted no-underline select-none",
+	"touch-manipulation [-webkit-tap-highlight-color:transparent]",
+	"transition-[color,background-color] duration-150 ease-[cubic-bezier(0.4,0,0.2,1)]",
+	"focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-focus",
+	"hover:text-fg aria-[current=page]:bg-fg/8 aria-[current=page]:text-fg",
+	"active:bg-fg/8 aria-[current=page]:active:bg-fg/12",
+	"forced-colors:aria-[current=page]:bg-[Highlight] forced-colors:aria-[current=page]:text-[HighlightText]",
+	"forced-colors:aria-[current=page]:[forced-color-adjust:none]"
+];
+/** Wraps runs of plain text in the truncating label span; icons and badges pass through. */
+function withLabel(children) {
+	const out = [];
+	let text = [];
+	const flush = () => {
+		if (text.length === 0) return;
+		out.push(/* @__PURE__ */ jsx("span", {
+			className: "min-w-0 flex-1 truncate",
+			children: text
+		}, `label-${out.length}`));
+		text = [];
+	};
+	for (const child of Children.toArray(children)) if (typeof child === "string" || typeof child === "number") text.push(child);
+	else {
+		flush();
+		out.push(child);
+	}
+	flush();
+	return out;
+}
+/**
+* A sidebar link. Plain `<a>` by default; with `asChild`, your router's Link. Mark the current one
+* aria-current="page". Inside the drawer, a click the link handles in place (preventDefault, as
+* router links do) closes the drawer; a modified click opens a new tab and leaves it open.
+*/
+function SidebarItem({ asChild = false, className, children, ...props }) {
+	const { setOpen } = useSidebarContext("SidebarItem");
+	const { drawer } = usePanelContext("SidebarItem");
+	const itemProps = {
+		...props,
+		"data-slot": "sidebar-item",
+		className: cn(itemClasses, className)
+	};
+	let item;
+	if (asChild) {
+		const child = Children.only(children);
+		item = isValidElement(child) ? /* @__PURE__ */ jsx(Slot, {
+			...itemProps,
+			children: cloneElement(child, { children: wrapChildren(child.props.children, withLabel) })
+		}) : null;
+	} else item = /* @__PURE__ */ jsx("a", {
+		...itemProps,
+		children: withLabel(children)
+	});
+	return /* @__PURE__ */ jsx("li", {
+		className: "flex",
+		onClick: (e) => {
+			if (drawer && e.defaultPrevented) setOpen(false);
+		},
+		children: item
+	});
+}
+/** Decorative 16px leading icon for a SidebarItem (hidden from assistive tech); takes the text color. */
+function SidebarIcon({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"aria-hidden": true,
+		...props,
+		"data-slot": "sidebar-item-icon",
+		className: cn("flex shrink-0 [&_svg]:size-4", className)
+	});
+}
+/** 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, {
+		size: "sm",
+		...props,
+		className: cn("shrink-0", className)
+	})] });
+}
+//#endregion
+//#region src/components/switch/switch.tsx
+const sizeClasses = {
+	sm: {
+		track: "h-3.5 w-7 [--switch-thumb:10px] [--switch-travel:14px] [--switch-stretch:2px]",
+		offset: "mt-[5px]",
+		icon: "[&_svg]:size-2"
+	},
+	md: {
+		track: "h-5 w-9 [--switch-thumb:16px] [--switch-travel:16px] [--switch-stretch:4px]",
+		offset: "mt-0.5",
+		icon: "[&_svg]:size-3"
+	}
+};
+function Switch({ label, description, error, size = "md", loading = false, labelPosition = "end", className, inputClassName, disabled, onChange, "aria-describedby": describedBy, "aria-invalid": ariaInvalid, ...props }) {
+	const s = sizeClasses[size];
+	const pressable = !disabled && !loading;
+	const handleChange = (e) => {
+		if (loading) {
+			e.currentTarget.checked = !e.currentTarget.checked;
+			return;
+		}
+		onChange?.(e);
+	};
+	return /* @__PURE__ */ jsx(ChoiceRow, {
+		slot: "switch",
+		label,
+		description,
+		error,
+		labelPosition,
+		gap: "gap-3",
+		controlOffset: s.offset,
+		className,
+		"aria-describedby": describedBy,
+		control: (row) => /* @__PURE__ */ jsxs("span", {
+			className: cn("relative inline-flex", s.track),
+			children: [/* @__PURE__ */ jsx("input", {
+				...props,
+				type: "checkbox",
+				role: "switch",
+				disabled,
+				"aria-busy": loading || void 0,
+				"aria-labelledby": props["aria-labelledby"] ?? row.labelledBy,
+				"aria-describedby": row.describedBy,
+				"aria-invalid": row.invalid ? true : ariaInvalid,
+				onChange: handleChange,
+				className: cn("peer m-0 size-full cursor-pointer appearance-none rounded-full border border-transparent outline-hidden", "disabled:cursor-not-allowed aria-busy:cursor-progress", "bg-(--switch-track) [box-shadow:0_0_0_1px_var(--switch-ring),0_0_0_4px_var(--switch-halo)]", "transition-[background-color,border-color,box-shadow] duration-150 ease-out", "[--switch-track:var(--color-input-border)] checked:[--switch-track:var(--color-control-checked)]", pressable && "not-checked:hover:[--switch-track:var(--color-input-border-hover)]", row.invalid ? ["[--switch-ring:var(--color-danger)] [--switch-halo:var(--color-input-halo-invalid)]", "focus-visible:[--switch-halo:var(--color-input-halo-invalid-focus)]"] : [
+					"[--switch-ring:transparent] [--switch-halo:transparent]",
+					"focus-visible:[--switch-ring:var(--color-input-focus)] focus-visible:[--switch-halo:var(--color-input-halo)]",
+					"not-forced-colors:checked:focus-visible:outline-control-checked"
+				], "checked:focus-visible:[--switch-ring:transparent] checked:focus-visible:[--switch-halo:transparent]", "checked:focus-visible:outline-solid checked:focus-visible:outline-2 checked:focus-visible:outline-offset-2", row.invalid && "not-forced-colors:checked:focus-visible:outline-danger", "forced-colors:forced-color-adjust-none forced-colors:[box-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]", "forced-colors:focus-visible:outline-[CanvasText]", inputClassName)
+			}), /* @__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-control-checked-fg 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" })] })
+			})]
+		})
+	});
+}
+//#endregion
+//#region src/components/tabs/tab-nav.tsx
+const TabNavContext = createContext(null);
+/**
+* Tabs that change the URL: a `<nav>` of links, the current one marked (by the router, usually)
+* with aria-current="page". Same look as Tabs, but link semantics: Tab moves between links, Enter
+* follows one, and each can be opened in a new tab. For in-page panels, use Tabs.
+*/
+function TabNav({ variant = "line", size = "md", className, listClassName, children, ...props }) {
+	const { listRef, onPointerMove, onPointerLeave } = useTabListMotion(variant, { revealSelected: true });
+	return /* @__PURE__ */ jsx(TabNavContext.Provider, {
+		value: {
+			variant,
+			size
+		},
+		children: /* @__PURE__ */ jsx("nav", {
+			...props,
+			"data-slot": "tab-nav",
+			className,
+			children: /* @__PURE__ */ jsx("ul", {
+				ref: listRef,
+				"data-slot": "tab-list",
+				"data-variant": variant,
+				className: cn(listClasses(variant, size), listClassName),
+				onPointerMove,
+				onPointerLeave,
+				children
+			})
+		})
+	});
+}
+/**
+* A link styled as a tab. Plain `<a>` by default; with `asChild`, your router's Link (for an index
+* route, make it current only on an exact match, or it stays current on every child route).
+*/
+function TabNavLink({ asChild = false, icon, badge, className, onFocus, children, ...props }) {
+	const context = useContext(TabNavContext);
+	if (!context) throw new Error("TabNavLink must be rendered inside <TabNav>");
+	const itemProps = {
+		...props,
+		"data-slot": "tab",
+		className: cn(itemClasses$1(context.variant, context.size), className),
+		onFocus: (e) => {
+			onFocus?.(e);
+			revealOnFocus(e.currentTarget);
+		}
+	};
+	const content = (label) => /* @__PURE__ */ jsx(TabContent, {
+		icon,
+		badge,
+		children: label
+	});
+	let item;
+	if (asChild) {
+		const child = Children.only(children);
+		item = isValidElement(child) ? /* @__PURE__ */ jsx(Slot, {
+			...itemProps,
+			children: cloneElement(child, { children: wrapChildren(child.props.children, content) })
+		}) : null;
+	} else item = /* @__PURE__ */ jsx("a", {
+		...itemProps,
+		children: content(children)
+	});
+	return /* @__PURE__ */ jsx("li", {
+		className: "flex shrink-0",
+		children: item
+	});
+}
+//#endregion
+//#region src/components/tabs/tabs.tsx
+const TabsContext = createContext(null);
+function useTabsContext(part) {
+	const context = useContext(TabsContext);
+	if (!context) throw new Error(`${part} must be rendered inside <Tabs>`);
+	return context;
+}
+const partId = (baseId, part, value) => `${baseId}-${part}-${value.replace(/\s+/g, "-")}`;
+/**
+* In-page tabs (WAI-ARIA APG tabs pattern): a tablist that switches panels without changing the
+* URL. For tabs that navigate between routes, use TabNav.
+*/
+function Tabs({ value, defaultValue, onValueChange, activationMode = "automatic", variant = "line", size = "md", "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, children, ...props }) {
+	const id = useId();
+	const [inner, setInner] = useState(defaultValue);
+	const controlled = value !== void 0;
+	const selected = controlled ? value : inner;
+	const select = (next) => {
+		if (next === selected) return;
+		if (!controlled) setInner(next);
+		onValueChange?.(next);
+	};
+	return /* @__PURE__ */ jsx(TabsContext.Provider, {
+		value: {
+			baseId: id,
+			selected,
+			select,
+			activationMode,
+			variant,
+			size,
+			label: {
+				"aria-label": ariaLabel,
+				"aria-labelledby": ariaLabelledby
+			}
+		},
+		children: /* @__PURE__ */ jsx("div", {
+			...props,
+			"data-slot": "tabs",
+			children
+		})
+	});
+}
+const keyMoves = {
+	ArrowRight: (i, last, rtl) => rtl ? i === 0 ? last : i - 1 : i === last ? 0 : i + 1,
+	ArrowLeft: (i, last, rtl) => rtl ? i === last ? 0 : i + 1 : i === 0 ? last : i - 1,
+	Home: () => 0,
+	End: (_, last) => last
+};
+function TabList({ className, ref, onKeyDown, onPointerMove, onPointerLeave, children, ...props }) {
+	const { select, activationMode, variant, size, label } = useTabsContext("TabList");
+	const motion = useTabListMotion(variant);
+	const mergedRef = useMergedRef(motion.listRef, ref);
+	const handleKeyDown = (e) => {
+		onKeyDown?.(e);
+		const move = keyMoves[e.key];
+		if (e.defaultPrevented || !move || e.altKey || e.ctrlKey || e.metaKey) return;
+		const list = e.currentTarget;
+		const tabs = [...list.querySelectorAll("[role=\"tab\"]:not(:disabled)")].filter((tab) => tab.closest("[role=\"tablist\"]") === list);
+		const index = tabs.indexOf(e.target);
+		if (index === -1) return;
+		e.preventDefault();
+		const rtl = getComputedStyle(list).direction === "rtl";
+		const next = tabs[move(index, tabs.length - 1, rtl)];
+		next.focus();
+		if (activationMode === "automatic" && next.dataset.value !== void 0) select(next.dataset.value);
+	};
+	return /* @__PURE__ */ jsx("div", {
+		...label,
+		...props,
+		ref: mergedRef,
+		role: "tablist",
+		"data-slot": "tab-list",
+		"data-variant": variant,
+		className: cn(listClasses(variant, size), className),
+		onKeyDown: handleKeyDown,
+		onPointerMove: (e) => {
+			onPointerMove?.(e);
+			motion.onPointerMove(e);
+		},
+		onPointerLeave: (e) => {
+			onPointerLeave?.(e);
+			motion.onPointerLeave();
+		},
+		children
+	});
+}
+function Tab({ value, icon, badge, disabled = false, className, ref, onClick, onFocus, children, ...props }) {
+	const context = useTabsContext("Tab");
+	const isSelected = context.selected === value;
+	const ownRef = useRef(null);
+	const mergedRef = useMergedRef(ownRef, ref);
+	useRevealWhenSelected(ownRef, isSelected);
+	return /* @__PURE__ */ jsx("button", {
+		...props,
+		ref: mergedRef,
+		type: "button",
+		role: "tab",
+		id: partId(context.baseId, "tab", value),
+		"aria-controls": partId(context.baseId, "panel", value),
+		"aria-selected": isSelected,
+		tabIndex: isSelected ? 0 : -1,
+		disabled,
+		"data-slot": "tab",
+		"data-value": value,
+		"data-selected": isSelected || void 0,
+		"data-disabled": disabled || void 0,
+		className: cn(itemClasses$1(context.variant, context.size), className),
+		onClick: (e) => {
+			onClick?.(e);
+			if (!e.defaultPrevented) context.select(value);
+		},
+		onFocus: (e) => {
+			onFocus?.(e);
+			revealOnFocus(e.currentTarget);
+		},
+		children: /* @__PURE__ */ jsx(TabContent, {
+			icon,
+			badge,
+			children
+		})
+	});
+}
+function TabPanel({ value, keepMounted = false, className, ...props }) {
+	const { baseId, selected } = useTabsContext("TabPanel");
+	const isSelected = selected === value;
+	if (!isSelected && !keepMounted) return null;
+	return /* @__PURE__ */ jsx("div", {
+		tabIndex: 0,
+		...props,
+		role: "tabpanel",
+		id: partId(baseId, "panel", value),
+		"aria-labelledby": partId(baseId, "tab", value),
+		hidden: !isSelected,
+		"data-slot": "tab-panel",
+		className: cn("focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus", className)
+	});
+}
+//#endregion
+//#region src/components/theme-switcher/theme-switcher.tsx
+const systemThemeQuery = "(prefers-color-scheme: dark)";
+function subscribeSystemTheme(onChange) {
+	const query = window.matchMedia?.(systemThemeQuery);
+	query?.addEventListener("change", onChange);
+	return () => query?.removeEventListener("change", onChange);
+}
+const systemIsDark = () => window.matchMedia?.(systemThemeQuery).matches ?? false;
+const serverIsDark = () => false;
+/** Toggle the visible theme in one click, including when the initial choice follows the system. */
+function ThemeSwitcher({ value, onChange, onClick, className, "aria-label": ariaLabel, ...props }) {
+	const systemDark = useSyncExternalStore(subscribeSystemTheme, systemIsDark, serverIsDark);
+	const dark = value === "system" ? systemDark : value === "dark";
+	const next = dark ? "light" : "dark";
+	const label = ariaLabel ?? (dark ? "Switch to light theme" : "Switch to dark theme");
+	return /* @__PURE__ */ jsx(Button, {
+		...props,
+		intent: "ghost",
+		icon: dark ? /* @__PURE__ */ jsx(Sun, {}) : /* @__PURE__ */ jsx(Moon, {}),
+		"aria-label": label,
+		title: label,
+		tooltip: false,
+		"data-slot": "theme-switcher",
+		className: cn("size-11 shrink-0 text-fg-muted hover:text-fg [&_svg]:size-5", className),
+		onClick: (event) => {
+			onClick?.(event);
+			if (!event.defaultPrevented) onChange(next);
+		}
+	});
+}
+//#endregion
+//#region src/components/theme-switcher/use-theme.ts
+const validTheme = (value) => value === "light" || value === "dark" ? value : "system";
+/** Persisted color theme; `system` clears data-theme so prefers-color-scheme decides. */
+function useTheme({ storageKey = "swell-ui-theme" } = {}) {
+	const [theme, setTheme] = useState(() => {
+		try {
+			return validTheme(localStorage.getItem(storageKey));
+		} catch {
+			return "system";
+		}
+	});
+	useEffect(() => {
+		if (theme === "system") delete document.documentElement.dataset.theme;
+		else document.documentElement.dataset.theme = theme;
+		try {
+			localStorage.setItem(storageKey, theme);
+		} catch {}
+	}, [theme, storageKey]);
+	return {
+		theme,
+		setTheme
+	};
+}
+//#endregion
+//#region src/components/toast/store.ts
+function isActionButton(action) {
+	return typeof action === "object" && action !== null && !isValidElement(action) && !(Symbol.iterator in action) && "label" in action;
+}
+function resolveDuration(record) {
+	if (record.duration !== void 0) return record.duration;
+	if (record.type === "danger" || record.type === "loading") return Number.POSITIVE_INFINITY;
+	return record.action != null && record.action !== false ? 1e4 : 5e3;
+}
+let toasts = [];
+const listeners = /* @__PURE__ */ new Set();
+let nextId = 0;
+let nextKey = 0;
+function emit(next) {
+	toasts = next;
+	for (const listener of listeners) listener();
+}
+function subscribe(listener) {
+	listeners.add(listener);
+	return () => {
+		listeners.delete(listener);
+	};
+}
+function getSnapshot() {
+	return toasts;
+}
+const serverSnapshot = [];
+function getServerSnapshot() {
+	return serverSnapshot;
+}
+function findLive(id) {
+	return toasts.find((t) => t.id === id && !t.removed);
+}
+function create(options) {
+	const id = options.id ?? `toast-${++nextId}`;
+	const { id: _id, type = "neutral", dismissible = true, ...rest } = options;
+	const live = findLive(id);
+	if (live) {
+		const next = {
+			...rest,
+			id,
+			type,
+			dismissible,
+			key: live.key,
+			version: live.version + 1,
+			removed: false
+		};
+		emit(toasts.map((t) => t === live ? next : t));
+		return id;
+	}
+	emit([{
+		...rest,
+		id,
+		type,
+		dismissible,
+		key: ++nextKey,
+		version: 0,
+		removed: false
+	}, ...toasts]);
+	return id;
+}
+function update(id, patch) {
+	const live = findLive(id);
+	if (!live) return;
+	const { type = live.type, dismissible = live.dismissible, ...rest } = patch;
+	emit(toasts.map((t) => t === live ? {
+		...live,
+		...rest,
+		type,
+		dismissible,
+		version: live.version + 1
+	} : t));
+}
+function dismiss(id, swipeOut) {
+	const hit = (t) => !t.removed && (id === void 0 || t.id === id);
+	if (!toasts.some(hit)) return;
+	if (listeners.size === 0) {
+		emit(toasts.filter((t) => !hit(t)));
+		return;
+	}
+	emit(toasts.map((t) => hit(t) ? {
+		...t,
+		removed: true,
+		swipeOut
+	} : t));
+}
+/** Called by the Toaster once a dismissed toast's exit has finished. */
+function removeToast(key) {
+	if (toasts.some((t) => t.key === key)) emit(toasts.filter((t) => t.key !== key));
+}
+function isStepOptions(step) {
+	return typeof step === "object" && step !== null && !isValidElement(step) && !(Symbol.iterator in step) && "title" in step;
+}
+function stepPatch(step, type) {
+	const base = {
+		type,
+		description: void 0,
+		action: void 0,
+		duration: void 0
+	};
+	return isStepOptions(step) ? {
+		...base,
+		...step
+	} : {
+		...base,
+		title: step
+	};
+}
+function shortcut(type) {
+	return (title, options) => create({
+		...options,
+		title,
+		type
+	});
+}
+/**
+* Imperative toasts, callable from anywhere (event handlers, mutations, loaders) once a
+* `<Toaster />` is mounted. Every call returns the toast's id. `toasterId` routes a toast to a
+* `<Toaster id>` instead.
+*/
+const toast = Object.assign((options) => create(options), {
+	success: shortcut("success"),
+	info: shortcut("info"),
+	warning: shortcut("warning"),
+	/** Renders as the `danger` type. Stays until dismissed. */
+	error: shortcut("danger"),
+	/** Spinner; stays until updated or dismissed. */
+	loading: shortcut("loading"),
+	/** Merges into a toast still on screen and restarts its timer. No-op for unknown ids. */
+	update,
+	/** Plays the exit of one toast, or of all of them without an id. */
+	dismiss: (id) => dismiss(id),
+	/**
+	* Loading toast that turns into success or danger in place when the promise settles. Steps
+	* are a title or full options; success/error may be functions of the result / the error.
+	*/
+	promise(promise, steps) {
+		const id = create({
+			id: steps.id,
+			toasterId: steps.toasterId,
+			...stepPatch(steps.loading, "loading")
+		});
+		const settle = (step, type) => update(id, stepPatch(step, type));
+		(typeof promise === "function" ? promise() : promise).then((data) => settle(typeof steps.success === "function" ? steps.success(data) : steps.success, "success"), (error) => settle(typeof steps.error === "function" ? steps.error(error) : steps.error, "danger"));
+		return id;
+	}
+});
+//#endregion
+//#region src/components/toast/toaster.tsx
+const GAP = 14;
+const SCALE_STEP = .05;
+const SWIPE_DISTANCE = 45;
+const SWIPE_VELOCITY = .11;
+const EXIT_FALLBACK_MS = 600;
+const ENTER_MS = 400;
+const MOBILE_QUERY = "(width <= 600px)";
+const MOBILE_VISIBLE = 2;
+const CARD_BORDERS = 2;
+const owners = [];
+const ownerListeners = /* @__PURE__ */ new Set();
+function subscribeOwners(listener) {
+	ownerListeners.add(listener);
+	return () => {
+		ownerListeners.delete(listener);
+	};
+}
+function useIsActiveToaster(id) {
+	const [owner] = useState(() => Symbol("toaster"));
+	useLayoutEffect(() => {
+		const entry = {
+			owner,
+			id
+		};
+		owners.push(entry);
+		for (const listener of ownerListeners) listener();
+		return () => {
+			owners.splice(owners.indexOf(entry), 1);
+			for (const listener of ownerListeners) listener();
+		};
+	}, [owner, id]);
+	return useSyncExternalStore(subscribeOwners, () => owners.find((entry) => entry.id === id)?.owner === owner, () => false);
+}
+function useMediaQuery(query) {
+	return useSyncExternalStore((onChange) => {
+		if (typeof window.matchMedia !== "function") return () => {};
+		const mql = window.matchMedia(query);
+		mql.addEventListener("change", onChange);
+		return () => mql.removeEventListener("change", onChange);
+	}, () => typeof window.matchMedia === "function" && window.matchMedia(query).matches, () => false);
+}
+function useDocumentHidden() {
+	return useSyncExternalStore((onChange) => {
+		document.addEventListener("visibilitychange", onChange);
+		return () => document.removeEventListener("visibilitychange", onChange);
+	}, () => document.visibilityState === "hidden", () => false);
+}
+function isFocusVisible(el) {
+	if (!el) return false;
+	try {
+		return el.matches(":focus-visible");
+	} catch {
+		return true;
+	}
+}
+function showPopover(el) {
+	if (!el?.isConnected || typeof el.showPopover !== "function") return;
+	let open = false;
+	try {
+		open = el.matches(":popover-open");
+	} catch {}
+	try {
+		if (!open) el.showPopover();
+	} catch {}
+}
+function modalDialogs() {
+	try {
+		return [...document.querySelectorAll("dialog:modal")].filter((dialog) => !dialog.hasAttribute("data-closing"));
+	} catch {
+		return [];
+	}
+}
+function useToastHost(enabled) {
+	const [host, setHost] = useState(null);
+	useLayoutEffect(() => {
+		if (!enabled) return;
+		const el = document.createElement("div");
+		el.dataset.slot = "toast-host";
+		el.style.display = "contents";
+		document.body.append(el);
+		setHost(el);
+		return () => {
+			el.remove();
+			setHost(null);
+		};
+	}, [enabled]);
+	return host;
+}
+function useFollowModalDialogs(host, viewportRef) {
+	useLayoutEffect(() => {
+		const stack = [];
+		const relocate = () => {
+			const open = modalDialogs();
+			for (let i = stack.length - 1; i >= 0; i--) if (!open.includes(stack[i])) stack.splice(i, 1);
+			for (const dialog of open) if (!stack.includes(dialog)) stack.push(dialog);
+			const target = stack.at(-1) ?? document.body;
+			const viewport = viewportRef.current;
+			if (host.parentElement !== target) {
+				viewport?.setAttribute("data-moving", "");
+				target.append(host);
+				showPopover(viewport);
+				viewport?.offsetWidth;
+				viewport?.removeAttribute("data-moving");
+			} else showPopover(viewport);
+		};
+		relocate();
+		const observer = new MutationObserver(relocate);
+		observer.observe(document.documentElement, {
+			subtree: true,
+			attributes: true,
+			attributeFilter: ["open", "data-closing"]
+		});
+		return () => observer.disconnect();
+	}, [host, viewportRef]);
+}
+/**
+* The single place toasts render: mount one near the app root (inside the router, so a `<Link>`
+* action has its context). Toasts themselves come from `toast()` and friends.
+*/
+function Toaster(props) {
+	const host = useToastHost(useIsActiveToaster(props.id));
+	if (!host) return null;
+	return createPortal(/* @__PURE__ */ jsx(Viewport, {
+		...props,
+		host
+	}), host);
+}
+const positionClasses = {
+	"bottom-right": "top-auto bottom-6 left-auto right-6 max-[601px]:bottom-4",
+	"bottom-left": "top-auto bottom-6 left-6 right-auto max-[601px]:bottom-4",
+	"bottom-center": "top-auto bottom-6 left-1/2 right-auto -translate-x-1/2 max-[601px]:bottom-4",
+	"top-right": "top-6 bottom-auto left-auto right-6 max-[601px]:top-4",
+	"top-left": "top-6 bottom-auto left-6 right-auto max-[601px]:top-4",
+	"top-center": "top-6 bottom-auto left-1/2 right-auto -translate-x-1/2 max-[601px]:top-4"
+};
+function Viewport({ id, position = "bottom-right", visibleToasts = 3, host }) {
+	const all = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+	const toasts = useMemo(() => all.filter((t) => t.toasterId === id), [all, id]);
+	const viewportRef = useRef(null);
+	const statusRef = useRef(null);
+	const alertRef = useRef(null);
+	const returnFocus = useRef(null);
+	const [heights, setHeights] = useState({});
+	const [hovered, setHovered] = useState(false);
+	const [focusWithin, setFocusWithin] = useState(false);
+	const [interacting, setInteracting] = useState(false);
+	const mobile = useMediaQuery(MOBILE_QUERY);
+	const documentHidden = useDocumentHidden();
+	useFollowModalDialogs(host, viewportRef);
+	const live = toasts.filter((t) => !t.removed);
+	const limit = Math.max(1, mobile ? Math.min(visibleToasts, MOBILE_VISIBLE) : visibleToasts);
+	const expanded = live.length > 0 && (hovered || focusWithin);
+	const paused = expanded || interacting || documentHidden;
+	const frontHeight = live.length ? heights[live[0].key] : void 0;
+	const layouts = /* @__PURE__ */ new Map();
+	let before = 0;
+	live.forEach((t, index) => {
+		layouts.set(t.key, {
+			index,
+			offset: before + index * GAP,
+			visible: index < limit
+		});
+		before += heights[t.key] ?? 0;
+	});
+	const onHeight = useCallback((key, height) => {
+		setHeights((prev) => {
+			if (prev[key] === height) return prev;
+			const next = { ...prev };
+			if (height === void 0) delete next[key];
+			else next[key] = height;
+			return next;
+		});
+	}, []);
+	const pending = useRef({
+		polite: [],
+		assertive: [],
+		frame: 0
+	});
+	const announce = useCallback((text, assertive) => {
+		const queue = pending.current;
+		const list = assertive ? queue.assertive : queue.polite;
+		const region = assertive ? alertRef.current : statusRef.current;
+		if (!region || list.includes(text)) return;
+		list.push(text);
+		region.textContent = "";
+		if (queue.frame) return;
+		queue.frame = requestAnimationFrame(() => {
+			queue.frame = 0;
+			if (statusRef.current && queue.polite.length) statusRef.current.textContent = queue.polite.join(" ");
+			if (alertRef.current && queue.assertive.length) alertRef.current.textContent = queue.assertive.join(" ");
+			queue.polite = [];
+			queue.assertive = [];
+		});
+	}, []);
+	useEffect(() => {
+		const queue = pending.current;
+		return () => cancelAnimationFrame(queue.frame);
+	}, []);
+	const restoreFocus = useCallback(() => {
+		const target = returnFocus.current;
+		returnFocus.current = null;
+		if (target?.isConnected && target !== document.body) target.focus({ preventScroll: true });
+		if (viewportRef.current?.contains(document.activeElement)) document.activeElement.blur();
+	}, []);
+	const onFocusLost = useCallback((index) => {
+		const viewport = viewportRef.current;
+		if (viewport && isFocusVisible(document.activeElement)) {
+			const cards = [...viewport.querySelectorAll("li[data-slot=\"toast\"]:not([data-removed]):not([inert])")].sort((a, b) => Number(a.dataset.index) - Number(b.dataset.index));
+			const next = cards.find((card) => Number(card.dataset.index) >= index) ?? cards.at(-1);
+			if (next) {
+				next.focus({ preventScroll: true });
+				return;
+			}
+		}
+		restoreFocus();
+	}, [restoreFocus]);
+	useEffect(() => {
+		const onKeyDown = (event) => {
+			const f6 = event.key === "F6" && !event.altKey && !event.ctrlKey && !event.metaKey;
+			const target = event.target instanceof HTMLElement ? event.target : null;
+			const typing = !!target && (target.isContentEditable || target.matches("input, textarea, select"));
+			const altT = event.code === "KeyT" && event.altKey && !event.ctrlKey && !event.metaKey && !typing;
+			const viewport = viewportRef.current;
+			if (!f6 && !altT || event.defaultPrevented || !viewport) return;
+			if (viewport.contains(document.activeElement)) {
+				event.preventDefault();
+				restoreFocus();
+				return;
+			}
+			const newest = viewport.querySelector("li[data-slot=\"toast\"][data-index=\"0\"]:not([data-removed])");
+			if (!newest) return;
+			event.preventDefault();
+			returnFocus.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+			newest.focus({ preventScroll: true });
+		};
+		document.addEventListener("keydown", onKeyDown);
+		return () => document.removeEventListener("keydown", onKeyDown);
+	}, [restoreFocus]);
+	const handleKeyDown = (event) => {
+		if (event.key !== "Escape") return;
+		const card = event.target.closest("li[data-slot=\"toast\"]");
+		if (!card || card.dataset.dismissible === void 0 || !card.dataset.toastId) return;
+		event.preventDefault();
+		event.stopPropagation();
+		dismiss(card.dataset.toastId);
+	};
+	const handleFocus = (event) => {
+		const from = event.relatedTarget;
+		if (!event.currentTarget.contains(from) && returnFocus.current === null) returnFocus.current = from instanceof HTMLElement ? from : null;
+		setFocusWithin(isFocusVisible(event.target));
+	};
+	const handleBlur = (event) => {
+		if (event.currentTarget.contains(event.relatedTarget)) return;
+		setFocusWithin(false);
+		returnFocus.current = null;
+	};
+	const handlePointerEnter = (event) => {
+		if (event.pointerType !== "touch") setHovered(true);
+	};
+	const handlePointerLeave = (event) => {
+		if (event.pointerType !== "touch") setHovered(false);
+	};
+	const [y, x] = position.split("-");
+	const directions = x === "center" ? [y] : [y, x];
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx("section", {
+			ref: viewportRef,
+			popover: "manual",
+			"aria-label": "Notifications (F6)",
+			tabIndex: -1,
+			"data-slot": "toast-viewport",
+			"data-position": position,
+			"data-expanded": expanded || void 0,
+			onKeyDown: handleKeyDown,
+			onFocus: handleFocus,
+			onBlur: handleBlur,
+			onPointerDown: () => setInteracting(true),
+			onPointerUp: () => setInteracting(false),
+			onPointerCancel: () => setInteracting(false),
+			className: cn("group/viewport fixed m-0 h-auto w-95 overflow-visible border-0 bg-transparent p-0 text-fg outline-none", "max-[601px]:inset-x-4 max-[601px]:w-auto max-[601px]:translate-x-0", positionClasses[position]),
+			children: /* @__PURE__ */ jsx("ol", {
+				className: "relative m-0 list-none p-0",
+				onPointerEnter: handlePointerEnter,
+				onPointerLeave: handlePointerLeave,
+				children: toasts.map((record) => /* @__PURE__ */ jsx(ToastCard, {
+					record,
+					layout: layouts.get(record.key),
+					total: live.length,
+					expanded,
+					paused,
+					frontHeight,
+					ownHeight: heights[record.key],
+					edge: y,
+					directions,
+					onHeight,
+					onFocusLost,
+					announce
+				}, record.key))
+			})
+		}),
+		/* @__PURE__ */ jsx("div", {
+			ref: statusRef,
+			role: "status",
+			"data-slot": "toast-announcer",
+			className: "sr-only"
+		}),
+		/* @__PURE__ */ jsx("div", {
+			ref: alertRef,
+			role: "alert",
+			"data-slot": "toast-announcer",
+			className: "sr-only"
+		})
+	] });
+}
+const typeClasses = {
+	neutral: "border-popover-border bg-popover-bg text-fg",
+	loading: "border-popover-border bg-popover-bg text-fg",
+	success: "border-success-border bg-success-subtle-bg text-success-subtle-fg",
+	info: "border-info-border bg-info-subtle-bg text-info-subtle-fg",
+	warning: "border-warning-border bg-warning-subtle-bg text-warning-subtle-fg",
+	danger: "border-danger-border bg-danger-subtle-bg text-danger-subtle-fg"
+};
+const icons = [
+	[
+		"success",
+		"text-success",
+		/* @__PURE__ */ jsx(CircleCheck, {}, "success")
+	],
+	[
+		"info",
+		"text-info",
+		/* @__PURE__ */ jsx(Info, {}, "info")
+	],
+	[
+		"warning",
+		"text-warning",
+		/* @__PURE__ */ jsx(TriangleAlert, {}, "warning")
+	],
+	[
+		"danger",
+		"text-danger",
+		/* @__PURE__ */ jsx(CircleX, {}, "danger")
+	]
+];
+const iconLayer = "inline-flex opacity-0 transition-opacity duration-200 data-active:opacity-100";
+function ToastIcon({ type }) {
+	const loading = type === "loading";
+	return /* @__PURE__ */ jsxs("span", {
+		"aria-hidden": true,
+		"data-slot": "toast-icon",
+		className: cn("mt-0.5 grid size-4 shrink-0 [&_svg]:size-4 *:col-start-1 *:row-start-1", type === "neutral" && "hidden"),
+		children: [icons.map(([iconType, color, icon]) => /* @__PURE__ */ jsx("span", {
+			"data-active": iconType === type || void 0,
+			className: cn(iconLayer, color),
+			children: icon
+		}, iconType)), /* @__PURE__ */ jsxs("span", {
+			"data-active": loading || void 0,
+			className: cn(iconLayer, "text-fg-muted"),
+			children: [/* @__PURE__ */ jsx(LoaderCircle, { className: cn(loading && "animate-spin", "motion-reduce:hidden") }), /* @__PURE__ */ jsx(CircleDashed, { className: "hidden motion-reduce:block" })]
+		})]
+	});
+}
+const enterFrom = {
+	bottom: "starting:[translate:0_100%]",
+	top: "starting:[translate:0_-100%]"
+};
+function ToastCard({ record, layout, total, expanded, paused, frontHeight, ownHeight, edge, directions, onHeight, onFocusLost, announce }) {
+	const { id, key, type, title, description, action, dismissible, version, removed, swipeOut } = record;
+	const liRef = useRef(null);
+	const bodyRef = useRef(null);
+	const titleRef = useRef(null);
+	const descriptionRef = useRef(null);
+	const titleId = useId();
+	const descriptionId = useId();
+	const [entered, setEntered] = useState(false);
+	const [kept, setKept] = useState(layout ?? {
+		index: 0,
+		offset: 0,
+		visible: true
+	});
+	if (layout && (layout.index !== kept.index || layout.offset !== kept.offset || layout.visible !== kept.visible)) setKept(layout);
+	const { index, offset, visible } = layout ?? kept;
+	const stacked = !expanded && index > 0;
+	const sign = edge === "bottom" ? -1 : 1;
+	const height = stacked ? frontHeight : ownHeight;
+	useLayoutEffect(() => {
+		const body = bodyRef.current;
+		if (!body) return;
+		const measure = () => onHeight(key, body.offsetHeight + CARD_BORDERS);
+		measure();
+		const observer = typeof ResizeObserver === "undefined" ? void 0 : new ResizeObserver(measure);
+		observer?.observe(body);
+		return () => {
+			observer?.disconnect();
+			onHeight(key, void 0);
+		};
+	}, [key, onHeight]);
+	useEffect(() => {
+		const timer = setTimeout(() => setEntered(true), ENTER_MS);
+		return () => clearTimeout(timer);
+	}, []);
+	useLayoutEffect(() => {
+		const titleText = titleRef.current?.textContent?.trim() ?? "";
+		const descriptionText = descriptionRef.current?.textContent?.trim() ?? "";
+		const text = titleText && descriptionText && !/[.!?…:]$/.test(titleText) ? `${titleText}. ${descriptionText}` : `${titleText} ${descriptionText}`.trim();
+		if (text) announce(text, type === "danger");
+	}, [
+		version,
+		type,
+		announce
+	]);
+	const duration = resolveDuration(record);
+	const timer = useRef({
+		version: -1,
+		duration: 0,
+		remaining: 0
+	});
+	const holding = paused || !visible;
+	useEffect(() => {
+		const t = timer.current;
+		if (t.version !== version || t.duration !== duration) {
+			t.version = version;
+			t.duration = duration;
+			t.remaining = duration;
+		}
+		if (holding || removed || !Number.isFinite(t.remaining)) return;
+		const start = Date.now();
+		const handle = setTimeout(() => dismiss(id), Math.max(0, t.remaining));
+		return () => {
+			clearTimeout(handle);
+			t.remaining -= Date.now() - start;
+		};
+	}, [
+		id,
+		version,
+		duration,
+		holding,
+		removed
+	]);
+	useLayoutEffect(() => {
+		if (!removed) return;
+		const li = liRef.current;
+		if (li?.contains(document.activeElement)) onFocusLost(index);
+		let done = false;
+		const finish = () => {
+			if (done) return;
+			done = true;
+			removeToast(key);
+		};
+		const fallback = setTimeout(finish, EXIT_FALLBACK_MS);
+		const animations = typeof li?.getAnimations === "function" ? li.getAnimations() : void 0;
+		if (animations) Promise.allSettled(animations.map((a) => a.finished)).then(finish);
+		return () => {
+			done = true;
+			clearTimeout(fallback);
+		};
+	}, [
+		removed,
+		key,
+		index,
+		onFocusLost
+	]);
+	const drag = useRef(null);
+	const swipeable = dismissible && !removed;
+	const setSwipe = (li, dx, dy) => {
+		li.style.setProperty("--toast-swipe-x", `${dx}px`);
+		li.style.setProperty("--toast-swipe-y", `${dy}px`);
+	};
+	const handlePointerDown = (event) => {
+		if (!swipeable || event.button !== 0) return;
+		if (event.target.closest("button, a, input, textarea, select, [data-no-swipe]")) return;
+		drag.current = {
+			x: event.clientX,
+			y: event.clientY,
+			time: Date.now(),
+			amount: 0
+		};
+		event.currentTarget.setPointerCapture?.(event.pointerId);
+	};
+	const handlePointerMove = (event) => {
+		const d = drag.current;
+		const li = event.currentTarget;
+		if (!d) return;
+		const dx = event.clientX - d.x;
+		const dy = event.clientY - d.y;
+		if (!d.axis) {
+			if (Math.abs(dx) <= 1 && Math.abs(dy) <= 1) return;
+			if (window.getSelection()?.toString()) {
+				drag.current = null;
+				return;
+			}
+			d.axis = Math.abs(dx) > Math.abs(dy) ? "x" : "y";
+			li.setAttribute("data-swiping", "");
+		}
+		const delta = d.axis === "x" ? dx : dy;
+		const toward = d.axis === "x" ? delta > 0 ? "right" : "left" : delta > 0 ? "bottom" : "top";
+		const allowed = directions.includes(toward);
+		d.amount = allowed ? delta : delta / (1.5 + Math.abs(delta) / 20);
+		d.direction = allowed ? toward : void 0;
+		if (d.axis === "x") setSwipe(li, d.amount, 0);
+		else setSwipe(li, 0, d.amount);
+	};
+	const endDrag = (event, cancelled) => {
+		const d = drag.current;
+		drag.current = null;
+		const li = event.currentTarget;
+		if (!d?.axis) return;
+		li.removeAttribute("data-swiping");
+		const velocity = Math.abs(d.amount) / Math.max(1, Date.now() - d.time);
+		if (!cancelled && d.direction && (Math.abs(d.amount) >= SWIPE_DISTANCE || velocity > SWIPE_VELOCITY)) {
+			dismiss(id, d.direction);
+			return;
+		}
+		setSwipe(li, 0, 0);
+	};
+	const touchAction = !swipeable ? void 0 : directions.length === 1 ? "touch-pan-x" : "touch-none";
+	const style = {
+		"--toast-y": `${sign * (expanded ? offset : index * GAP)}px`,
+		"--toast-scale": expanded ? 1 : Math.max(0, 1 - index * SCALE_STEP),
+		zIndex: total - index
+	};
+	const hasAction = action != null && action !== false;
+	return /* @__PURE__ */ jsx("li", {
+		ref: liRef,
+		tabIndex: 0,
+		"aria-labelledby": titleId,
+		"aria-describedby": description != null && description !== false ? descriptionId : void 0,
+		inert: removed || !visible,
+		"data-slot": "toast",
+		"data-toast-id": id,
+		"data-type": type,
+		"data-index": index,
+		"data-front": index === 0 || void 0,
+		"data-stacked": stacked || void 0,
+		"data-visible": visible,
+		"data-removed": removed || void 0,
+		"data-swipe-out": removed ? swipeOut : void 0,
+		"data-dismissible": dismissible || void 0,
+		"data-entered": entered || void 0,
+		style,
+		onPointerDown: handlePointerDown,
+		onPointerMove: handlePointerMove,
+		onPointerUp: (event) => endDrag(event, false),
+		onPointerCancel: (event) => endDrag(event, true),
+		className: cn("group/toast absolute inset-x-0 rounded-xl outline-none select-none", edge === "bottom" ? "bottom-0 origin-top" : "top-0 origin-bottom", "transform-[translateY(var(--toast-y))_scale(var(--toast-scale))]", "[translate:var(--toast-swipe-x,0px)_var(--toast-swipe-y,0px)]", "transition-[transform,translate,scale,opacity] duration-350 ease-[cubic-bezier(0.25,0.75,0.6,0.98)]", enterFrom[edge], "starting:opacity-0", "after:absolute after:inset-x-0 after:h-3.75", edge === "bottom" ? "after:bottom-full" : "after:top-full", "data-[visible=false]:pointer-events-none data-[visible=false]:opacity-0", "data-removed:pointer-events-none data-removed:scale-99 data-removed:opacity-0 data-removed:duration-150", "data-removed:data-swipe-out:duration-200 data-removed:data-swipe-out:ease-out", "data-[swipe-out=right]:[translate:calc(100%+24px)_0]", "data-[swipe-out=left]:[translate:calc(-100%-24px)_0]", "data-[swipe-out=bottom]:[translate:0_calc(100%+24px)]", "data-[swipe-out=top]:[translate:0_calc(-100%-24px)]", "data-swiping:transition-none", "group-data-moving/viewport:data-entered:transition-none", "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus", touchAction),
+		children: /* @__PURE__ */ jsx("div", {
+			"data-slot": "toast-card",
+			style: { height },
+			className: cn("overflow-hidden rounded-[inherit] border shadow-popover", "forced-colors:border-[CanvasText]", "[transition-property:height,background-color,border-color,color]", "duration-[350ms,200ms,200ms,200ms] ease-[cubic-bezier(0.25,0.75,0.6,0.98)]", typeClasses[type]),
+			children: /* @__PURE__ */ jsxs("div", {
+				ref: bodyRef,
+				"data-slot": "toast-body",
+				className: cn("relative p-4 transition-opacity duration-200", "group-data-stacked/toast:pointer-events-none group-data-stacked/toast:opacity-0"),
+				children: [
+					/* @__PURE__ */ jsxs("div", {
+						className: cn("flex items-start gap-3", dismissible && "pe-9.5"),
+						children: [/* @__PURE__ */ jsx(ToastIcon, { type }), /* @__PURE__ */ jsxs("div", {
+							className: "min-w-0 flex-1",
+							children: [/* @__PURE__ */ jsx("div", {
+								ref: titleRef,
+								id: titleId,
+								"data-slot": "toast-title",
+								className: "text-sm/5 font-medium",
+								children: title
+							}), description != null && description !== false && /* @__PURE__ */ jsx("div", {
+								ref: descriptionRef,
+								id: descriptionId,
+								"data-slot": "toast-description",
+								className: "mt-0.5 text-sm/5 text-fg-muted",
+								children: description
+							})]
+						})]
+					}),
+					hasAction && /* @__PURE__ */ jsx("div", {
+						"data-slot": "toast-action",
+						className: "mt-3 flex justify-end gap-2",
+						children: isActionButton(action) ? /* @__PURE__ */ jsx(Button, {
+							intent: "secondary",
+							size: "sm",
+							onClick: (event) => {
+								action.onClick?.(event);
+								if (!event.defaultPrevented) dismiss(id);
+							},
+							children: action.label
+						}) : action
+					}),
+					dismissible && /* @__PURE__ */ jsx(Button, {
+						intent: "ghost",
+						size: "sm",
+						icon: /* @__PURE__ */ jsx(X, {}),
+						"aria-label": "Close",
+						tooltip: false,
+						className: "absolute top-2.25 right-2 text-current hover:not-aria-disabled:bg-current/10",
+						onClick: () => dismiss(id)
+					})
+				]
+			})
+		})
+	});
+}
+//#endregion
+export { 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, Tabs, ThemeSwitcher, Toaster, Tooltip, cn, toast, useTheme };