@glyphui/ui 0.1.0 → 0.2.0

package/dist/index.js

@@ -1,13 +1,479 @@
 "use client";
-import { A as useGlyph, C as popover, D as twMergeConfig, E as tv, O as useComponentConfig, S as focusRing, T as transition, _ as Button, b as Spinner, f as MenuIcon, g as XIcon, j as useLinkComponent, k as GlyphContext, m as PanelLeftIcon, n as useFieldControl, o as CheckIcon, s as ChevronDownIcon, t as FieldContext, v as IconButton, w as themedBorder, x as spinnerStyles, y as buttonStyles } from "./field-context-B8cYheXz.js";
-import { _ as inputStyles, a as Table, c as TableCell, d as TableRow, f as tableStyles, g as fieldControl, h as Input, i as stateStyles, l as TableHead, m as skeletonStyles, n as ErrorState, o as TableBody, p as Skeleton, r as LoadingState, s as TableCaption, t as EmptyState, u as TableHeader, v as Checkbox, y as checkboxStyles } from "./states-BxPjCUxz.js";
-import { i as labelStyles, n as fieldStyles, r as Label, t as Field } from "./field-DXZD0l8w.js";
+import { A as useGlyph, C as MenuIcon, D as XIcon, E as SearchIcon, O as useComponentConfig, T as PanelLeftIcon, _ as CheckIcon$1, a as buttonStyles, b as ChevronRightIcon$1, c as tv, d as popover, f as themedBorder, i as IconButton, j as useLinkComponent, k as GlyphContext, l as twMergeConfig, n as useFieldControl, o as Spinner, p as transition, r as Button, s as spinnerStyles, t as FieldContext, u as focusRing, v as ChevronDownIcon, x as ChevronsUpDownIcon, y as ChevronLeftIcon } from "./field-context-B6WOcK5m.js";
+import { _ as inputStyles, a as Table, c as TableCell, d as TableRow, f as tableStyles, g as fieldControl, h as Input, i as stateStyles, l as TableHead, m as skeletonStyles, n as ErrorState, o as TableBody, p as Skeleton, r as LoadingState, s as TableCaption, t as EmptyState, u as TableHeader, v as Checkbox, y as checkboxStyles } from "./states-Rp8wZ_jH.js";
+import { i as labelStyles, n as fieldStyles, r as Label, t as Field } from "./field-CCecIzdq.js";
 import { defineTheme, defineTheme as defineTheme$1, presets as presets$1, scopeSelector, themeToCss, themeToCss as themeToCss$1, tokenVar } from "@glyphui/tokens";
-import { Avatar as Avatar$1, Dialog, Select as Select$1, Separator as Separator$1, Slot, Switch as Switch$1, Tabs as Tabs$1, ToggleGroup, Tooltip as Tooltip$1 } from "radix-ui";
-import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
+import { Accordion as Accordion$1, AlertDialog as AlertDialog$1, AspectRatio as AspectRatio$1, Avatar as Avatar$1, Dialog as Dialog$1, DropdownMenu as DropdownMenu$1, Popover as Popover$1, Progress as Progress$1, RadioGroup as RadioGroup$1, ScrollArea as ScrollArea$1, Select as Select$1, Separator as Separator$1, Slider as Slider$1, Slot, Switch as Switch$1, Tabs as Tabs$1, ToggleGroup, Tooltip as Tooltip$1 } from "radix-ui";
+import { createContext, useCallback, useContext, useEffect, useId, useMemo, useRef, useState, useSyncExternalStore } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Command as Command$1 } from "cmdk";
+import { Toaster as Toaster$1, toast } from "sonner";
 import { clsx } from "clsx";
 import { extendTailwindMerge } from "tailwind-merge";
+//#region src/components/accordion/accordion.styles.ts
+const accordionStyles = tv({
+	slots: {
+		root: "w-full",
+		item: "",
+		header: "flex",
+		trigger: [
+			"group flex flex-1 cursor-pointer items-center justify-between gap-4 rounded-xs py-4 text-left text-body font-medium text-foreground",
+			transition,
+			focusRing,
+			"hover:text-foreground/80 disabled:cursor-not-allowed disabled:opacity-50"
+		],
+		chevron: "size-4 shrink-0 text-faint-foreground transition-transform duration-(--glyph-duration-base) ease-standard group-data-[state=open]:rotate-180",
+		content: "overflow-hidden text-small text-muted-foreground",
+		contentInner: "pb-4 transition-[opacity,translate] duration-(--glyph-duration-base) ease-standard starting:-translate-y-1 starting:opacity-0"
+	},
+	variants: { variant: {
+		default: { item: "border-b border-border last:border-b-0" },
+		separated: {
+			root: "grid gap-2",
+			item: ["rounded-lg border-border bg-surface px-4 shadow-xs", themedBorder]
+		}
+	} },
+	defaultVariants: { variant: "default" }
+});
+//#endregion
+//#region src/components/accordion/accordion.tsx
+const AccordionContext = createContext(null);
+function useParts$4() {
+	return useContext(AccordionContext) ?? {
+		s: accordionStyles(),
+		slots: {}
+	};
+}
+/**
+* Stacked sections that expand one at a time (`type="single"`, collapsible) or
+* independently (`type="multiple"`). Good for FAQs and dense settings.
+*/
+function Accordion(inProps) {
+	const [props, slots] = useComponentConfig("Accordion", inProps);
+	const { variant, className, ...rest } = props;
+	const s = accordionStyles({ variant });
+	return /* @__PURE__ */ jsx(AccordionContext.Provider, {
+		value: {
+			s,
+			slots
+		},
+		children: /* @__PURE__ */ jsx(Accordion$1.Root, {
+			"data-slot": "accordion",
+			className: s.root({ class: [slots.root, className] }),
+			...rest
+		})
+	});
+}
+function AccordionItem({ className, ...props }) {
+	const { s, slots } = useParts$4();
+	return /* @__PURE__ */ jsx(Accordion$1.Item, {
+		"data-slot": "accordion-item",
+		className: s.item({ class: [slots.item, className] }),
+		...props
+	});
+}
+function AccordionTrigger({ className, children, ...props }) {
+	const { s, slots } = useParts$4();
+	return /* @__PURE__ */ jsx(Accordion$1.Header, {
+		className: s.header({ class: slots.header }),
+		children: /* @__PURE__ */ jsxs(Accordion$1.Trigger, {
+			"data-slot": "accordion-trigger",
+			className: s.trigger({ class: [slots.trigger, className] }),
+			...props,
+			children: [children, /* @__PURE__ */ jsx(ChevronDownIcon, { className: s.chevron({ class: slots.chevron }) })]
+		})
+	});
+}
+function AccordionContent({ className, children, ...props }) {
+	const { s, slots } = useParts$4();
+	return /* @__PURE__ */ jsx(Accordion$1.Content, {
+		"data-slot": "accordion-content",
+		className: s.content({ class: slots.content }),
+		...props,
+		children: /* @__PURE__ */ jsx("div", {
+			className: s.contentInner({ class: [slots.contentInner, className] }),
+			children
+		})
+	});
+}
+//#endregion
+//#region src/components/alert/alert.styles.ts
+const alertStyles = tv({
+	slots: {
+		root: ["relative flex w-full items-start gap-3 rounded-md px-4 py-3 text-small", themedBorder],
+		icon: "mt-0.5 flex size-4 shrink-0 items-center justify-center [&>svg]:size-4",
+		content: "grid min-w-0 flex-1 gap-0.5",
+		title: "font-medium text-foreground",
+		description: "text-muted-foreground [&_a]:font-medium [&_a]:text-foreground [&_a]:underline [&_a]:underline-offset-2",
+		action: "flex shrink-0 items-center gap-2 self-center",
+		dismiss: "-my-1 -mr-2 shrink-0"
+	},
+	variants: {
+		tone: {
+			neutral: { icon: "text-muted-foreground" },
+			info: { icon: "text-[color-mix(in_oklab,var(--color-info)_80%,var(--color-foreground))]" },
+			success: { icon: "text-[color-mix(in_oklab,var(--color-success)_80%,var(--color-foreground))]" },
+			warning: { icon: "text-[color-mix(in_oklab,var(--color-warning)_80%,var(--color-foreground))]" },
+			danger: { icon: "text-[color-mix(in_oklab,var(--color-danger)_80%,var(--color-foreground))]" }
+		},
+		variant: {
+			soft: {},
+			outline: { root: "bg-surface" }
+		}
+	},
+	compoundVariants: [
+		{
+			variant: "soft",
+			tone: "neutral",
+			class: { root: "border-border bg-muted" }
+		},
+		{
+			variant: "soft",
+			tone: "info",
+			class: { root: "border-info/25 bg-info/8" }
+		},
+		{
+			variant: "soft",
+			tone: "success",
+			class: { root: "border-success/25 bg-success/8" }
+		},
+		{
+			variant: "soft",
+			tone: "warning",
+			class: { root: "border-warning/30 bg-warning/10" }
+		},
+		{
+			variant: "soft",
+			tone: "danger",
+			class: { root: "border-danger/25 bg-danger/8" }
+		},
+		{
+			variant: "outline",
+			tone: "neutral",
+			class: { root: "border-border-strong" }
+		},
+		{
+			variant: "outline",
+			tone: "info",
+			class: { root: "border-info/50" }
+		},
+		{
+			variant: "outline",
+			tone: "success",
+			class: { root: "border-success/50" }
+		},
+		{
+			variant: "outline",
+			tone: "warning",
+			class: { root: "border-warning/60" }
+		},
+		{
+			variant: "outline",
+			tone: "danger",
+			class: { root: "border-danger/50" }
+		}
+	],
+	defaultVariants: {
+		tone: "neutral",
+		variant: "soft"
+	}
+});
+//#endregion
+//#region src/components/alert/alert-icons.tsx
+function Icon({ children, ...props }) {
+	return /* @__PURE__ */ jsx("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		width: "16",
+		height: "16",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		...props,
+		children
+	});
+}
+const InfoIcon = (p) => /* @__PURE__ */ jsxs(Icon, {
+	...p,
+	children: [/* @__PURE__ */ jsx("circle", {
+		cx: "12",
+		cy: "12",
+		r: "10"
+	}), /* @__PURE__ */ jsx("path", { d: "M12 16v-4M12 8h.01" })]
+});
+const SuccessIcon = (p) => /* @__PURE__ */ jsxs(Icon, {
+	...p,
+	children: [/* @__PURE__ */ jsx("circle", {
+		cx: "12",
+		cy: "12",
+		r: "10"
+	}), /* @__PURE__ */ jsx("path", { d: "m9 12 2 2 4-4" })]
+});
+const WarningIcon = (p) => /* @__PURE__ */ jsxs(Icon, {
+	...p,
+	children: [/* @__PURE__ */ jsx("path", { d: "m21.73 18-8-14a2 2 0 0 0-3.46 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3" }), /* @__PURE__ */ jsx("path", { d: "M12 9v4M12 17h.01" })]
+});
+const DangerIcon = (p) => /* @__PURE__ */ jsxs(Icon, {
+	...p,
+	children: [/* @__PURE__ */ jsx("circle", {
+		cx: "12",
+		cy: "12",
+		r: "10"
+	}), /* @__PURE__ */ jsx("path", { d: "m15 9-6 6M9 9l6 6" })]
+});
+const MegaphoneIcon = (p) => /* @__PURE__ */ jsxs(Icon, {
+	...p,
+	children: [/* @__PURE__ */ jsx("path", { d: "m3 11 18-5v12L3 14v-3z" }), /* @__PURE__ */ jsx("path", { d: "M11.6 16.8a3 3 0 1 1-5.8-1.6" })]
+});
+/** The default icon for each tone. */
+const toneIcons = {
+	neutral: () => /* @__PURE__ */ jsx(InfoIcon, {}),
+	primary: () => /* @__PURE__ */ jsx(MegaphoneIcon, {}),
+	info: () => /* @__PURE__ */ jsx(InfoIcon, {}),
+	success: () => /* @__PURE__ */ jsx(SuccessIcon, {}),
+	warning: () => /* @__PURE__ */ jsx(WarningIcon, {}),
+	danger: () => /* @__PURE__ */ jsx(DangerIcon, {})
+};
+//#endregion
+//#region src/components/alert/alert.tsx
+/**
+* An inline message about the content around it. Danger and warning alerts are announced
+* immediately (`role="alert"`); other tones politely (`role="status"`).
+*/
+function Alert(inProps) {
+	const [props, slots] = useComponentConfig("Alert", inProps);
+	const { tone, variant, title, icon, action, onDismiss, dismissLabel = "Dismiss", className, children, ...rest } = props;
+	const resolvedTone = tone ?? "neutral";
+	const s = alertStyles({
+		tone,
+		variant
+	});
+	const iconNode = icon === false ? null : icon ?? toneIcons[resolvedTone]();
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "alert",
+		"data-tone": resolvedTone,
+		role: resolvedTone === "danger" || resolvedTone === "warning" ? "alert" : "status",
+		className: s.root({ class: [slots.root, className] }),
+		...rest,
+		children: [
+			iconNode && /* @__PURE__ */ jsx("span", {
+				"data-slot": "alert-icon",
+				className: s.icon({ class: slots.icon }),
+				"aria-hidden": "true",
+				children: iconNode
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				"data-slot": "alert-content",
+				className: s.content({ class: slots.content }),
+				children: [title && /* @__PURE__ */ jsx("p", {
+					"data-slot": "alert-title",
+					className: s.title({ class: slots.title }),
+					children: title
+				}), children && /* @__PURE__ */ jsx("div", {
+					"data-slot": "alert-description",
+					className: s.description({ class: slots.description }),
+					children
+				})]
+			}),
+			action && /* @__PURE__ */ jsx("div", {
+				"data-slot": "alert-action",
+				className: s.action({ class: slots.action }),
+				children: action
+			}),
+			onDismiss && /* @__PURE__ */ jsx(IconButton, {
+				size: "sm",
+				icon: /* @__PURE__ */ jsx(XIcon, {}),
+				"aria-label": dismissLabel,
+				onClick: onDismiss,
+				className: s.dismiss({ class: slots.dismiss })
+			})
+		]
+	});
+}
+//#endregion
+//#region src/components/alert-dialog/alert-dialog.styles.ts
+const alertDialogStyles = tv({ slots: {
+	overlay: "fixed inset-0 z-50 animate-fade-in bg-overlay",
+	content: [
+		"fixed top-1/2 left-1/2 z-50 grid w-[calc(100vw-2rem)] max-w-md -translate-x-1/2 -translate-y-1/2 gap-5",
+		"rounded-xl border-border bg-surface p-6 text-foreground shadow-lg outline-none animate-pop-in",
+		themedBorder
+	],
+	header: "flex flex-col gap-1.5",
+	title: "font-display text-h4 text-foreground",
+	description: "text-small text-muted-foreground",
+	footer: "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end"
+} });
+//#endregion
+//#region src/components/alert-dialog/alert-dialog.tsx
+function useParts$3() {
+	const [, slots] = useComponentConfig("AlertDialog", {});
+	return {
+		s: alertDialogStyles(),
+		slots
+	};
+}
+/**
+* A modal that interrupts to ask for a decision, e.g. confirming a destructive action.
+* Unlike Dialog it can't be dismissed by clicking outside. For a one-line confirm, use `useConfirm()`.
+*/
+const AlertDialog = AlertDialog$1.Root;
+const AlertDialogTrigger = AlertDialog$1.Trigger;
+function AlertDialogContent(inProps) {
+	const [props, slots] = useComponentConfig("AlertDialog", inProps);
+	const { overlayClassName, className, ...rest } = props;
+	const s = alertDialogStyles();
+	return /* @__PURE__ */ jsxs(AlertDialog$1.Portal, { children: [/* @__PURE__ */ jsx(AlertDialog$1.Overlay, {
+		"data-slot": "alert-dialog-overlay",
+		className: s.overlay({ class: [slots.overlay, overlayClassName] })
+	}), /* @__PURE__ */ jsx(AlertDialog$1.Content, {
+		"data-slot": "alert-dialog-content",
+		className: s.content({ class: [slots.content, className] }),
+		...rest
+	})] });
+}
+function AlertDialogHeader({ className, ...props }) {
+	const { s, slots } = useParts$3();
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "alert-dialog-header",
+		className: s.header({ class: [slots.header, className] }),
+		...props
+	});
+}
+function AlertDialogTitle({ className, ...props }) {
+	const { s, slots } = useParts$3();
+	return /* @__PURE__ */ jsx(AlertDialog$1.Title, {
+		"data-slot": "alert-dialog-title",
+		className: s.title({ class: [slots.title, className] }),
+		...props
+	});
+}
+function AlertDialogDescription({ className, ...props }) {
+	const { s, slots } = useParts$3();
+	return /* @__PURE__ */ jsx(AlertDialog$1.Description, {
+		"data-slot": "alert-dialog-description",
+		className: s.description({ class: [slots.description, className] }),
+		...props
+	});
+}
+function AlertDialogFooter({ className, ...props }) {
+	const { s, slots } = useParts$3();
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "alert-dialog-footer",
+		className: s.footer({ class: [slots.footer, className] }),
+		...props
+	});
+}
+/** The confirming button. Closes the dialog. */
+function AlertDialogAction({ tone = "default", ...props }) {
+	return /* @__PURE__ */ jsx(AlertDialog$1.Action, {
+		asChild: true,
+		children: /* @__PURE__ */ jsx(Button, {
+			"data-slot": "alert-dialog-action",
+			variant: tone === "danger" ? "danger" : "primary",
+			...props
+		})
+	});
+}
+/** The dismissing button. Receives focus when the dialog opens, so Enter never confirms by accident. */
+function AlertDialogCancel(props) {
+	return /* @__PURE__ */ jsx(AlertDialog$1.Cancel, {
+		asChild: true,
+		children: /* @__PURE__ */ jsx(Button, {
+			"data-slot": "alert-dialog-cancel",
+			variant: "outline",
+			...props
+		})
+	});
+}
+//#endregion
+//#region src/components/alert-dialog/confirm.tsx
+const ConfirmContext = createContext(null);
+/**
+* Enables `useConfirm()` for everything inside. Renders one shared AlertDialog.
+* Mount once near the root (inside GlyphProvider).
+*/
+function ConfirmProvider({ children }) {
+	const [pending, setPending] = useState(null);
+	const [open, setOpen] = useState(false);
+	const pendingRef = useRef(null);
+	const settle = useCallback((value) => {
+		pendingRef.current?.resolve(value);
+		pendingRef.current = null;
+		setOpen(false);
+	}, []);
+	const confirm = useCallback((options) => {
+		pendingRef.current?.resolve(false);
+		return new Promise((resolve) => {
+			const next = {
+				options,
+				resolve
+			};
+			pendingRef.current = next;
+			setPending(next);
+			setOpen(true);
+		});
+	}, []);
+	const value = useMemo(() => confirm, [confirm]);
+	const options = pending?.options;
+	const danger = options?.tone === "danger";
+	return /* @__PURE__ */ jsxs(ConfirmContext.Provider, {
+		value,
+		children: [children, /* @__PURE__ */ jsx(AlertDialog, {
+			open,
+			onOpenChange: (next) => !next && settle(false),
+			children: options && /* @__PURE__ */ jsxs(AlertDialogContent, { children: [/* @__PURE__ */ jsxs(AlertDialogHeader, { children: [/* @__PURE__ */ jsx(AlertDialogTitle, { children: options.title }), options.description && /* @__PURE__ */ jsx(AlertDialogDescription, { children: options.description })] }), /* @__PURE__ */ jsxs(AlertDialogFooter, { children: [/* @__PURE__ */ jsx(AlertDialogCancel, {
+				onClick: () => settle(false),
+				children: options.cancelLabel ?? "Cancel"
+			}), /* @__PURE__ */ jsx(AlertDialogAction, {
+				tone: options.tone,
+				onClick: () => settle(true),
+				children: options.confirmLabel ?? (danger ? "Delete" : "Confirm")
+			})] })] })
+		})]
+	});
+}
+/**
+* Ask the user to confirm, in one line:
+*
+* ```tsx
+* const confirm = useConfirm()
+* if (await confirm({ title: 'Delete project?', tone: 'danger' })) await deleteProject()
+* ```
+*
+* Resolves `true` when confirmed, `false` when cancelled or dismissed with Escape.
+*/
+function useConfirm() {
+	const confirm = useContext(ConfirmContext);
+	if (!confirm) throw new Error("useConfirm must be used inside <ConfirmProvider> (or <GlyphProvider>).");
+	return confirm;
+}
+//#endregion
+//#region src/components/aspect-ratio/aspect-ratio.tsx
+const aspectRatioStyles = tv({
+	slots: { base: "overflow-hidden [&>img]:size-full [&>img]:object-cover [&>video]:size-full [&>video]:object-cover" },
+	variants: {
+		rounded: { true: { base: "rounded-lg" } },
+		placeholder: { true: { base: "bg-muted" } }
+	}
+});
+/** Keeps media at a fixed width-to-height ratio, e.g. `ratio={16 / 9}`. Images inside cover the box. */
+function AspectRatio(inProps) {
+	const [props, slots] = useComponentConfig("AspectRatio", inProps);
+	const { rounded, placeholder, className, ...rest } = props;
+	return /* @__PURE__ */ jsx(AspectRatio$1.Root, {
+		"data-slot": "aspect-ratio",
+		className: aspectRatioStyles({
+			rounded,
+			placeholder
+		}).base({ class: [slots.base, className] }),
+		...rest
+	});
+}
+//#endregion
 //#region src/components/avatar/avatar.styles.ts
 const avatarStyles = tv({
 	slots: {
@@ -117,7 +583,7 @@ const tones = {
 const badgeStyles = tv({
 	slots: {
 		base: [
-			"inline-flex h-5.5 shrink-0 items-center gap-1.5 whitespace-nowrap rounded-pill border-transparent px-2",
+			"inline-flex h-5.5 w-fit shrink-0 items-center gap-1.5 whitespace-nowrap rounded-pill border-transparent px-2",
 			"text-caption tabular-nums",
 			themedBorder
 		],
@@ -171,6 +637,225 @@ function Badge(inProps) {
 	});
 }
 //#endregion
+//#region src/components/banner/banner.styles.ts
+const bannerStyles = tv({
+	slots: {
+		root: ["w-full border-b-(length:--glyph-border-width) text-small"],
+		inner: "mx-auto flex w-full max-w-7xl items-center gap-3 px-4 py-2.5 sm:px-6",
+		icon: "flex size-4 shrink-0 items-center justify-center [&>svg]:size-4",
+		content: "min-w-0 flex-1 [&_a]:font-medium [&_a]:underline [&_a]:underline-offset-2",
+		action: "flex shrink-0 items-center gap-2",
+		dismiss: "-my-1 -mr-2 shrink-0 text-current hover:bg-current/10 hover:text-current"
+	},
+	variants: { tone: {
+		neutral: {
+			root: "border-border bg-subtle text-foreground",
+			icon: "text-muted-foreground"
+		},
+		primary: { root: "border-primary bg-primary text-primary-foreground" },
+		info: { root: "border-info/25 bg-info/10 text-[color-mix(in_oklab,var(--color-info)_55%,var(--color-foreground))]" },
+		success: { root: "border-success/25 bg-success/10 text-[color-mix(in_oklab,var(--color-success)_55%,var(--color-foreground))]" },
+		warning: { root: "border-warning/30 bg-warning/14 text-[color-mix(in_oklab,var(--color-warning)_50%,var(--color-foreground))]" },
+		danger: { root: "border-danger/25 bg-danger/10 text-[color-mix(in_oklab,var(--color-danger)_55%,var(--color-foreground))]" }
+	} },
+	defaultVariants: { tone: "neutral" }
+});
+//#endregion
+//#region src/components/banner/banner.tsx
+function readDismissed(key) {
+	if (!key || typeof window === "undefined") return false;
+	try {
+		return window.localStorage.getItem(key) === "dismissed";
+	} catch {
+		return false;
+	}
+}
+/** A full-width announcement at the top of a page or section. */
+function Banner(inProps) {
+	const [props, slots] = useComponentConfig("Banner", inProps);
+	const { tone, icon, action, dismissible = false, storageKey, onDismiss, dismissLabel = "Dismiss", className, children, ...rest } = props;
+	const [dismissed, setDismissed] = useState(() => readDismissed(storageKey));
+	if (dismissed) return null;
+	const resolvedTone = tone ?? "neutral";
+	const s = bannerStyles({ tone });
+	const iconNode = icon === false ? null : icon ?? toneIcons[resolvedTone]();
+	const dismiss = () => {
+		setDismissed(true);
+		if (storageKey) try {
+			window.localStorage.setItem(storageKey, "dismissed");
+		} catch {}
+		onDismiss?.();
+	};
+	return /* @__PURE__ */ jsx("section", {
+		"data-slot": "banner",
+		"data-tone": resolvedTone,
+		"aria-label": "Announcement",
+		className: s.root({ class: [slots.root, className] }),
+		...rest,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: s.inner({ class: slots.inner }),
+			children: [
+				iconNode && /* @__PURE__ */ jsx("span", {
+					"data-slot": "banner-icon",
+					className: s.icon({ class: slots.icon }),
+					"aria-hidden": "true",
+					children: iconNode
+				}),
+				/* @__PURE__ */ jsx("div", {
+					"data-slot": "banner-content",
+					className: s.content({ class: slots.content }),
+					children
+				}),
+				action && /* @__PURE__ */ jsx("div", {
+					"data-slot": "banner-action",
+					className: s.action({ class: slots.action }),
+					children: action
+				}),
+				dismissible && /* @__PURE__ */ jsx(IconButton, {
+					size: "sm",
+					icon: /* @__PURE__ */ jsx(XIcon, {}),
+					"aria-label": dismissLabel,
+					onClick: dismiss,
+					className: s.dismiss({ class: slots.dismiss })
+				})
+			]
+		})
+	});
+}
+//#endregion
+//#region src/components/blockquote/blockquote.tsx
+const blockquoteStyles = tv({
+	slots: {
+		root: "grid gap-3 border-l-2 border-primary pl-5",
+		quote: "font-display text-pretty text-foreground",
+		caption: "text-small text-muted-foreground",
+		author: "font-medium text-foreground not-italic"
+	},
+	variants: { size: {
+		sm: { quote: "text-body" },
+		md: { quote: "text-lead" },
+		lg: { quote: "text-h3" }
+	} },
+	defaultVariants: { size: "md" }
+});
+/** A quotation with an optional attribution. */
+function Blockquote(inProps) {
+	const [props, slots] = useComponentConfig("Blockquote", inProps);
+	const { author, source, citeUrl, size, className, children, ...rest } = props;
+	const s = blockquoteStyles({ size });
+	return /* @__PURE__ */ jsxs("figure", {
+		"data-slot": "blockquote",
+		className: s.root({ class: [slots.root, className] }),
+		...rest,
+		children: [/* @__PURE__ */ jsx("blockquote", {
+			cite: citeUrl,
+			className: s.quote({ class: slots.quote }),
+			children
+		}), (author || source) && /* @__PURE__ */ jsxs("figcaption", {
+			className: s.caption({ class: slots.caption }),
+			children: [
+				author && /* @__PURE__ */ jsx("cite", {
+					className: s.author({ class: slots.author }),
+					children: author
+				}),
+				author && source && ", ",
+				source
+			]
+		})]
+	});
+}
+//#endregion
+//#region src/components/breadcrumb/breadcrumb.styles.ts
+const breadcrumbStyles = tv({ slots: {
+	root: "min-w-0",
+	list: "flex flex-wrap items-center gap-1.5 text-small text-muted-foreground",
+	item: "inline-flex min-w-0 items-center gap-1.5",
+	link: [
+		"truncate rounded-xs hover:text-foreground",
+		transition,
+		focusRing
+	],
+	page: "truncate font-medium text-foreground",
+	separator: "flex items-center text-faint-foreground [&>svg]:size-3.5"
+} });
+//#endregion
+//#region src/components/breadcrumb/breadcrumb.tsx
+const s$2 = breadcrumbStyles();
+function useSlots$2() {
+	return useComponentConfig("Breadcrumb", {})[1];
+}
+/** Shows where the current page sits in the hierarchy. */
+function Breadcrumb({ items, separator, className, children, ...props }) {
+	const slots = useSlots$2();
+	return /* @__PURE__ */ jsx("nav", {
+		"aria-label": "Breadcrumb",
+		"data-slot": "breadcrumb",
+		className: s$2.root({ class: [slots.root, className] }),
+		...props,
+		children: items ? /* @__PURE__ */ jsx(BreadcrumbList, { children: items.map((item, index) => {
+			const last = index === items.length - 1;
+			return /* @__PURE__ */ jsxs(BreadcrumbItem, { children: [last || !item.href ? /* @__PURE__ */ jsx(BreadcrumbPage, {
+				"aria-current": last ? "page" : void 0,
+				children: item.label
+			}) : /* @__PURE__ */ jsx(BreadcrumbLink, {
+				href: item.href,
+				children: item.label
+			}), !last && /* @__PURE__ */ jsx(BreadcrumbSeparator, { children: separator })] }, index);
+		}) }) : children
+	});
+}
+function BreadcrumbList({ className, ...props }) {
+	const slots = useSlots$2();
+	return /* @__PURE__ */ jsx("ol", {
+		"data-slot": "breadcrumb-list",
+		className: s$2.list({ class: [slots.list, className] }),
+		...props
+	});
+}
+function BreadcrumbItem({ className, ...props }) {
+	const slots = useSlots$2();
+	return /* @__PURE__ */ jsx("li", {
+		"data-slot": "breadcrumb-item",
+		className: s$2.item({ class: [slots.item, className] }),
+		...props
+	});
+}
+function BreadcrumbLink({ href, className, children, asChild }) {
+	const Link = useLinkComponent();
+	const slots = useSlots$2();
+	const classes = s$2.link({ class: [slots.link, className] });
+	if (asChild) return /* @__PURE__ */ jsx(Slot.Root, {
+		"data-slot": "breadcrumb-link",
+		className: classes,
+		children
+	});
+	return /* @__PURE__ */ jsx(Link, {
+		href,
+		className: classes,
+		children
+	});
+}
+function BreadcrumbPage({ className, ...props }) {
+	const slots = useSlots$2();
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "breadcrumb-page",
+		"aria-current": "page",
+		className: s$2.page({ class: [slots.page, className] }),
+		...props
+	});
+}
+function BreadcrumbSeparator({ className, children, ...props }) {
+	const slots = useSlots$2();
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "breadcrumb-separator",
+		role: "presentation",
+		"aria-hidden": "true",
+		className: s$2.separator({ class: [slots.separator, className] }),
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(ChevronRightIcon$1, {})
+	});
+}
+//#endregion
 //#region src/components/card/card.styles.ts
 const cardStyles = tv({
 	slots: {
@@ -277,98 +962,1698 @@ function CardFooter({ className, ...props }) {
 	});
 }
 //#endregion
-//#region src/components/container/container.tsx
-const containerStyles = tv({
-	base: "mx-auto w-full px-4 sm:px-6",
-	variants: { size: {
-		sm: "max-w-2xl",
-		md: "max-w-3xl",
-		lg: "max-w-5xl",
-		xl: "max-w-7xl",
-		full: "max-w-none"
-	} },
-	defaultVariants: { size: "xl" }
+//#region src/components/code/code.styles.ts
+const codeStyles = tv({ slots: { base: "rounded-xs bg-muted px-[0.3em] py-[0.15em] font-mono text-[0.875em] text-foreground" } });
+const codeBlockStyles = tv({
+	slots: {
+		root: ["relative min-w-0 overflow-hidden rounded-lg border-border bg-subtle", themedBorder],
+		header: "flex min-h-10 items-center justify-between gap-2 border-b border-border py-1 pr-1.5 pl-4",
+		title: "truncate font-mono text-caption text-faint-foreground",
+		copy: "shrink-0",
+		floatingCopy: "absolute top-2 right-2",
+		pre: "overflow-x-auto p-4 font-mono text-small leading-relaxed text-foreground"
+	},
+	variants: { wrap: { true: { pre: "whitespace-pre-wrap break-words" } } }
 });
-/** Centers content at a readable max width with consistent side gutters. */
-function Container({ size, asChild, className, ...props }) {
-	const Comp = asChild ? Slot.Root : "div";
-	return /* @__PURE__ */ jsx(Comp, {
-		"data-slot": "container",
-		className: containerStyles({
-			size,
-			class: className
-		}),
-		...props
+//#endregion
+//#region src/components/code/code.tsx
+/** Inline code within running text. */
+function Code(inProps) {
+	const [{ className, ...rest }, slots] = useComponentConfig("Code", inProps);
+	return /* @__PURE__ */ jsx("code", {
+		"data-slot": "code",
+		className: codeStyles().base({ class: [slots.base, className] }),
+		...rest
+	});
+}
+const CopyIcon = () => /* @__PURE__ */ jsxs("svg", {
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: "2",
+	strokeLinecap: "round",
+	strokeLinejoin: "round",
+	"aria-hidden": "true",
+	children: [/* @__PURE__ */ jsx("rect", {
+		width: "14",
+		height: "14",
+		x: "8",
+		y: "8",
+		rx: "2"
+	}), /* @__PURE__ */ jsx("path", { d: "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" })]
+});
+/** A block of code with an optional file name and a copy button. No syntax highlighting is applied. */
+function CodeBlock(inProps) {
+	const [props, slots] = useComponentConfig("CodeBlock", inProps);
+	const { code, title, language, copyable = true, wrap, className, ...rest } = props;
+	const [copied, setCopied] = useState(false);
+	const timer = useRef(void 0);
+	const s = codeBlockStyles({ wrap });
+	const heading = title ?? language;
+	useEffect(() => () => clearTimeout(timer.current), []);
+	const copy = async () => {
+		try {
+			await navigator.clipboard.writeText(code);
+			setCopied(true);
+			clearTimeout(timer.current);
+			timer.current = setTimeout(() => setCopied(false), 1600);
+		} catch {}
+	};
+	const copyButton = copyable ? /* @__PURE__ */ jsx(IconButton, {
+		size: "sm",
+		icon: copied ? /* @__PURE__ */ jsx(CheckIcon$1, {}) : /* @__PURE__ */ jsx(CopyIcon, {}),
+		"aria-label": copied ? "Copied" : "Copy code",
+		onClick: copy,
+		className: heading ? s.copy({ class: slots.copy }) : s.floatingCopy({ class: slots.floatingCopy })
+	}) : null;
+	return /* @__PURE__ */ jsxs("figure", {
+		"data-slot": "code-block",
+		className: s.root({ class: [slots.root, className] }),
+		...rest,
+		children: [heading ? /* @__PURE__ */ jsxs("figcaption", {
+			className: s.header({ class: slots.header }),
+			children: [/* @__PURE__ */ jsx("span", {
+				className: s.title({ class: slots.title }),
+				children: heading
+			}), copyButton]
+		}) : copyButton, /* @__PURE__ */ jsx("pre", {
+			className: s.pre({ class: slots.pre }),
+			children: /* @__PURE__ */ jsx("code", { children: code })
+		})]
+	});
+}
+//#endregion
+//#region src/hooks/use-controllable-state.ts
+/** State that can be controlled by a parent (`value` + `onChange`) or left uncontrolled. */
+function useControllableState({ value, defaultValue, onChange }) {
+	const [internal, setInternal] = useState(defaultValue);
+	const isControlled = value !== void 0;
+	const current = isControlled ? value : internal;
+	const onChangeRef = useRef(onChange);
+	onChangeRef.current = onChange;
+	return [current, useCallback((next) => {
+		const resolved = typeof next === "function" ? next(current) : next;
+		if (!isControlled) setInternal(resolved);
+		onChangeRef.current?.(resolved);
+	}, [current, isControlled])];
+}
+//#endregion
+//#region src/components/combobox/combobox.styles.ts
+const comboboxStyles = tv({
+	slots: {
+		trigger: [
+			...fieldControl,
+			"flex cursor-pointer items-center justify-between gap-2 px-3 text-left outline-none",
+			"focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/20",
+			"disabled:cursor-not-allowed disabled:opacity-50"
+		],
+		value: "flex min-w-0 flex-1 items-center gap-1 truncate",
+		placeholder: "truncate text-faint-foreground",
+		chip: "inline-flex h-5.5 max-w-40 shrink-0 items-center truncate rounded-pill bg-muted px-2 text-caption text-foreground",
+		icon: "size-4 shrink-0 text-faint-foreground",
+		content: [popover, "w-(--radix-popover-trigger-width) min-w-56 p-0"],
+		search: "flex items-center gap-2 border-b border-border px-3 text-faint-foreground [&>svg]:size-4 [&>svg]:shrink-0",
+		input: "h-10 w-full min-w-0 bg-transparent text-small text-foreground outline-none placeholder:text-faint-foreground",
+		list: "max-h-72 overflow-y-auto overscroll-contain p-1",
+		empty: "px-3 py-6 text-center text-small text-muted-foreground",
+		item: ["relative flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 text-small text-foreground outline-none", "data-[selected=true]:bg-muted data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50"],
+		itemText: "grid min-w-0 flex-1",
+		itemDescription: "truncate text-caption text-faint-foreground",
+		check: "size-4 shrink-0 text-primary"
+	},
+	variants: {
+		size: {
+			sm: { trigger: "min-h-(--glyph-control-sm) text-small" },
+			md: { trigger: "min-h-(--glyph-control-md) text-small" },
+			lg: { trigger: "min-h-(--glyph-control-lg) text-body" }
+		},
+		multiple: { true: {
+			trigger: "py-1",
+			value: "flex-wrap overflow-visible whitespace-normal"
+		} }
+	},
+	defaultVariants: { size: "md" }
+});
+//#endregion
+//#region src/components/combobox/combobox.tsx
+function toArray$1(value) {
+	if (value === void 0) return void 0;
+	if (value === null) return [];
+	return Array.isArray(value) ? [...value] : [value];
+}
+/**
+* A select with search, for long option lists. `multiple` allows several values, shown
+* as chips. The value type is inferred from `options`.
+*/
+function Combobox(inProps) {
+	const [props, slots] = useComponentConfig("Combobox", useFieldControl(inProps));
+	const { options, multiple = false, placeholder = "Select…", searchPlaceholder = "Search…", emptyText = "No results", maxChips = 3, size, disabled, required, name, id, className, contentClassName, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid } = props;
+	const onValueChange = props.onValueChange;
+	const [open, setOpen] = useState(false);
+	const [selected, setSelected] = useControllableState({
+		value: toArray$1(props.value),
+		defaultValue: toArray$1(props.defaultValue) ?? [],
+		onChange: (next) => onValueChange?.(multiple ? next : next[0] ?? null)
+	});
+	const byValue = useMemo(() => new Map(options.map((o) => [o.value, o])), [options]);
+	const s = comboboxStyles({
+		size,
+		multiple
+	});
+	const choose = (value) => {
+		if (multiple) {
+			setSelected(selected.includes(value) ? selected.filter((v) => v !== value) : [...selected, value]);
+			return;
+		}
+		setSelected(selected[0] === value ? [] : [value]);
+		setOpen(false);
+	};
+	const labels = selected.map((v) => byValue.get(v)?.label ?? v);
+	let display;
+	if (labels.length === 0) display = /* @__PURE__ */ jsx("span", {
+		className: s.placeholder({ class: slots.placeholder }),
+		children: placeholder
+	});
+	else if (multiple) {
+		const shown = labels.slice(0, maxChips);
+		display = /* @__PURE__ */ jsxs(Fragment$1, { children: [shown.map((label, i) => /* @__PURE__ */ jsx("span", {
+			className: s.chip({ class: slots.chip }),
+			children: label
+		}, selected[i])), labels.length > shown.length && /* @__PURE__ */ jsxs("span", {
+			className: s.chip({ class: slots.chip }),
+			children: ["+", labels.length - shown.length]
+		})] });
+	} else display = /* @__PURE__ */ jsx("span", {
+		className: "truncate",
+		children: labels[0]
+	});
+	return /* @__PURE__ */ jsxs(Popover$1.Root, {
+		open,
+		onOpenChange: setOpen,
+		children: [
+			/* @__PURE__ */ jsx(Popover$1.Trigger, {
+				asChild: true,
+				children: /* @__PURE__ */ jsxs("button", {
+					type: "button",
+					id,
+					role: "combobox",
+					"aria-haspopup": "listbox",
+					"aria-expanded": open,
+					"aria-label": ariaLabel,
+					"aria-describedby": ariaDescribedBy,
+					"aria-invalid": ariaInvalid,
+					"aria-required": required,
+					disabled,
+					"data-slot": "combobox-trigger",
+					className: s.trigger({ class: [slots.trigger, className] }),
+					children: [/* @__PURE__ */ jsx("span", {
+						className: s.value({ class: slots.value }),
+						children: display
+					}), /* @__PURE__ */ jsx(ChevronsUpDownIcon, { className: s.icon({ class: slots.icon }) })]
+				})
+			}),
+			name && selected.map((value) => /* @__PURE__ */ jsx("input", {
+				type: "hidden",
+				name,
+				value
+			}, value)),
+			/* @__PURE__ */ jsx(Popover$1.Portal, { children: /* @__PURE__ */ jsx(Popover$1.Content, {
+				align: "start",
+				sideOffset: 4,
+				"data-slot": "combobox-content",
+				className: s.content({ class: [slots.content, contentClassName] }),
+				children: /* @__PURE__ */ jsxs(Command$1, {
+					loop: true,
+					label: ariaLabel ?? "Options",
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: s.search({ class: slots.search }),
+						children: [/* @__PURE__ */ jsx(SearchIcon, {}), /* @__PURE__ */ jsx(Command$1.Input, {
+							placeholder: searchPlaceholder,
+							className: s.input({ class: slots.input })
+						})]
+					}), /* @__PURE__ */ jsxs(Command$1.List, {
+						className: s.list({ class: slots.list }),
+						children: [/* @__PURE__ */ jsx(Command$1.Empty, {
+							className: s.empty({ class: slots.empty }),
+							children: emptyText
+						}), options.map((option) => {
+							const checked = selected.includes(option.value);
+							return /* @__PURE__ */ jsxs(Command$1.Item, {
+								value: option.value,
+								keywords: [option.label, ...option.keywords ?? []],
+								disabled: option.disabled,
+								onSelect: () => choose(option.value),
+								"data-checked": checked || void 0,
+								"aria-checked": checked,
+								className: s.item({ class: slots.item }),
+								children: [/* @__PURE__ */ jsxs("span", {
+									className: s.itemText({ class: slots.itemText }),
+									children: [/* @__PURE__ */ jsx("span", {
+										className: "truncate",
+										children: option.label
+									}), option.description && /* @__PURE__ */ jsx("span", {
+										className: s.itemDescription({ class: slots.itemDescription }),
+										children: option.description
+									})]
+								}), checked && /* @__PURE__ */ jsx(CheckIcon$1, { className: s.check({ class: slots.check }) })]
+							}, option.value);
+						})]
+					})]
+				})
+			}) })
+		]
+	});
+}
+//#endregion
+//#region src/components/kbd/kbd.tsx
+const kbdStyles = tv({ slots: { base: "inline-flex h-5 min-w-5 items-center justify-center rounded-xs border border-border bg-muted px-1 font-mono text-[0.6875rem] font-medium text-muted-foreground shadow-xs" } });
+/** A keyboard key, e.g. `<Kbd>⌘K</Kbd>`. */
+function Kbd(inProps) {
+	const [{ className, ...rest }, slots] = useComponentConfig("Kbd", inProps);
+	return /* @__PURE__ */ jsx("kbd", {
+		"data-slot": "kbd",
+		className: kbdStyles().base({ class: [slots.base, className] }),
+		...rest
+	});
+}
+//#endregion
+//#region src/components/command-menu/command-menu.styles.ts
+const commandMenuStyles = tv({ slots: {
+	overlay: "fixed inset-0 z-50 animate-fade-in bg-overlay",
+	content: ["fixed top-[12vh] left-1/2 z-50 w-[calc(100%-2rem)] max-w-xl -translate-x-1/2 overflow-hidden rounded-xl border-border bg-raised text-foreground shadow-lg outline-none animate-pop-in", themedBorder],
+	root: "flex w-full flex-col overflow-hidden bg-raised text-foreground",
+	search: "flex items-center gap-2.5 border-b border-border px-4 text-faint-foreground [&>svg]:size-4 [&>svg]:shrink-0",
+	input: "h-12 w-full min-w-0 bg-transparent text-body text-foreground outline-none placeholder:text-faint-foreground",
+	list: "max-h-[min(24rem,60vh)] overflow-y-auto overscroll-contain p-2",
+	empty: "py-10 text-center text-small text-muted-foreground",
+	group: [
+		"overflow-hidden",
+		"[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:pt-2 [&_[cmdk-group-heading]]:pb-1",
+		"[&_[cmdk-group-heading]]:font-mono [&_[cmdk-group-heading]]:text-caption [&_[cmdk-group-heading]]:uppercase",
+		"[&_[cmdk-group-heading]]:tracking-[0.1em] [&_[cmdk-group-heading]]:text-faint-foreground"
+	],
+	item: ["relative flex h-10 cursor-pointer select-none items-center gap-3 rounded-md px-2.5 text-small text-foreground outline-none", "data-[selected=true]:bg-muted data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50"],
+	itemIcon: "flex size-4 shrink-0 items-center justify-center text-muted-foreground [&>svg]:size-4",
+	itemLabel: "min-w-0 flex-1 truncate",
+	shortcut: "ml-auto flex shrink-0 items-center gap-1",
+	separator: "-mx-2 my-1.5 h-px bg-border"
+} });
+//#endregion
+//#region src/components/command-menu/command-menu.tsx
+const s$1 = commandMenuStyles();
+const CommandMenuContext = createContext(null);
+function useSlots$1() {
+	return useComponentConfig("CommandMenu", {})[1];
+}
+/**
+* A ⌘K command palette in a modal dialog: search, grouped actions, keyboard navigation.
+* Pair with `useCommandMenuShortcut(setOpen)` to open it from the keyboard.
+*/
+function CommandMenu(inProps) {
+	const [props, slots] = useComponentConfig("CommandMenu", inProps);
+	const { open: openProp, defaultOpen = false, onOpenChange, label = "Command menu", loop = true, filter, className, children } = props;
+	const [open, setOpen] = useControllableState({
+		value: openProp,
+		defaultValue: defaultOpen,
+		onChange: onOpenChange
+	});
+	return /* @__PURE__ */ jsx(Dialog$1.Root, {
+		open,
+		onOpenChange: setOpen,
+		children: /* @__PURE__ */ jsxs(Dialog$1.Portal, { children: [/* @__PURE__ */ jsx(Dialog$1.Overlay, { className: s$1.overlay({ class: slots.overlay }) }), /* @__PURE__ */ jsxs(Dialog$1.Content, {
+			"data-slot": "command-menu",
+			"aria-describedby": void 0,
+			className: s$1.content({ class: [slots.content, className] }),
+			children: [/* @__PURE__ */ jsx(Dialog$1.Title, {
+				className: "sr-only",
+				children: label
+			}), /* @__PURE__ */ jsx(CommandMenuContext.Provider, {
+				value: { close: () => setOpen(false) },
+				children: /* @__PURE__ */ jsx(Command, {
+					label,
+					loop,
+					...filter && { filter },
+					children
+				})
+			})]
+		})] })
+	});
+}
+/** The palette without a dialog, for inline search panels. */
+function Command({ className, ...props }) {
+	const slots = useSlots$1();
+	return /* @__PURE__ */ jsx(Command$1, {
+		"data-slot": "command",
+		className: s$1.root({ class: [slots.root, className] }),
+		...props
+	});
+}
+function CommandInput({ className, ...props }) {
+	const slots = useSlots$1();
+	return /* @__PURE__ */ jsxs("div", {
+		className: s$1.search({ class: slots.search }),
+		children: [/* @__PURE__ */ jsx(SearchIcon, {}), /* @__PURE__ */ jsx(Command$1.Input, {
+			"data-slot": "command-input",
+			className: s$1.input({ class: [slots.input, className] }),
+			...props
+		})]
+	});
+}
+function CommandList({ className, ...props }) {
+	const slots = useSlots$1();
+	return /* @__PURE__ */ jsx(Command$1.List, {
+		"data-slot": "command-list",
+		className: s$1.list({ class: [slots.list, className] }),
+		...props
+	});
+}
+function CommandEmpty({ className, children = "No results", ...props }) {
+	const slots = useSlots$1();
+	return /* @__PURE__ */ jsx(Command$1.Empty, {
+		"data-slot": "command-empty",
+		className: s$1.empty({ class: [slots.empty, className] }),
+		...props,
+		children
+	});
+}
+function CommandGroup({ className, ...props }) {
+	const slots = useSlots$1();
+	return /* @__PURE__ */ jsx(Command$1.Group, {
+		"data-slot": "command-group",
+		className: s$1.group({ class: [slots.group, className] }),
+		...props
+	});
+}
+function CommandItem({ icon, shortcut, closeOnSelect = true, onSelect, className, children, ...props }) {
+	const slots = useSlots$1();
+	const menu = useContext(CommandMenuContext);
+	const keys = shortcut === void 0 ? [] : typeof shortcut === "string" ? [shortcut] : shortcut;
+	return /* @__PURE__ */ jsxs(Command$1.Item, {
+		"data-slot": "command-item",
+		onSelect: (value) => {
+			onSelect?.(value);
+			if (closeOnSelect) menu?.close();
+		},
+		className: s$1.item({ class: [slots.item, className] }),
+		...props,
+		children: [
+			icon && /* @__PURE__ */ jsx("span", {
+				className: s$1.itemIcon({ class: slots.itemIcon }),
+				"aria-hidden": "true",
+				children: icon
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: s$1.itemLabel({ class: slots.itemLabel }),
+				children
+			}),
+			keys.length > 0 && /* @__PURE__ */ jsx("span", {
+				className: s$1.shortcut({ class: slots.shortcut }),
+				"aria-hidden": "true",
+				children: keys.map((key) => /* @__PURE__ */ jsx(Kbd, { children: key }, key))
+			})
+		]
+	});
+}
+function CommandSeparator({ className, ...props }) {
+	const slots = useSlots$1();
+	return /* @__PURE__ */ jsx(Command$1.Separator, {
+		"data-slot": "command-separator",
+		className: s$1.separator({ class: [slots.separator, className] }),
+		...props
+	});
+}
+/** Toggles a command menu with ⌘K (macOS) or Ctrl+K. Pass another key to change it. */
+function useCommandMenuShortcut(setOpen, key = "k") {
+	useEffect(() => {
+		const onKeyDown = (event) => {
+			if (event.key.toLowerCase() === key.toLowerCase() && (event.metaKey || event.ctrlKey)) {
+				event.preventDefault();
+				setOpen((open) => !open);
+			}
+		};
+		document.addEventListener("keydown", onKeyDown);
+		return () => document.removeEventListener("keydown", onKeyDown);
+	}, [setOpen, key]);
+}
+//#endregion
+//#region src/components/container/container.tsx
+const containerStyles = tv({
+	base: "mx-auto w-full px-4 sm:px-6",
+	variants: { size: {
+		sm: "max-w-2xl",
+		md: "max-w-3xl",
+		lg: "max-w-5xl",
+		xl: "max-w-7xl",
+		full: "max-w-none"
+	} },
+	defaultVariants: { size: "xl" }
+});
+/** Centers content at a readable max width with consistent side gutters. */
+function Container({ size, asChild, className, ...props }) {
+	const Comp = asChild ? Slot.Root : "div";
+	return /* @__PURE__ */ jsx(Comp, {
+		"data-slot": "container",
+		className: containerStyles({
+			size,
+			class: className
+		}),
+		...props
+	});
+}
+//#endregion
+//#region src/components/description-list/description-list.styles.ts
+const descriptionListStyles = tv({
+	slots: {
+		root: "grid w-full",
+		item: "grid min-w-0 gap-1",
+		term: "text-small text-muted-foreground",
+		details: "min-w-0 break-words text-small text-foreground"
+	},
+	variants: {
+		layout: {
+			stacked: { root: "gap-4" },
+			inline: { item: "sm:grid-cols-[minmax(0,12rem)_1fr] sm:gap-4" }
+		},
+		dividers: {
+			true: {
+				root: "gap-0 divide-y divide-border",
+				item: "py-3 first:pt-0 last:pb-0"
+			},
+			false: {}
+		}
+	},
+	compoundVariants: [{
+		layout: "inline",
+		dividers: false,
+		class: { root: "gap-3" }
+	}],
+	defaultVariants: {
+		layout: "stacked",
+		dividers: false
+	}
+});
+//#endregion
+//#region src/components/description-list/description-list.tsx
+const DescriptionListContext = createContext(null);
+/**
+* Label–value pairs, such as account details or order metadata.
+* `layout="inline"` puts terms and details side by side from the `sm` breakpoint.
+*/
+function DescriptionList(inProps) {
+	const [props, slots] = useComponentConfig("DescriptionList", inProps);
+	const { layout, dividers, className, ...rest } = props;
+	const s = descriptionListStyles({
+		layout,
+		dividers
+	});
+	return /* @__PURE__ */ jsx(DescriptionListContext.Provider, {
+		value: {
+			s,
+			slots
+		},
+		children: /* @__PURE__ */ jsx("dl", {
+			"data-slot": "description-list",
+			className: s.root({ class: [slots.root, className] }),
+			...rest
+		})
+	});
+}
+function DescriptionItem({ term, children, className, ...props }) {
+	const ctx = useContext(DescriptionListContext);
+	const s = ctx?.s ?? descriptionListStyles();
+	const slots = ctx?.slots ?? {};
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "description-item",
+		className: s.item({ class: [slots.item, className] }),
+		...props,
+		children: [/* @__PURE__ */ jsx("dt", {
+			"data-slot": "description-term",
+			className: s.term({ class: slots.term }),
+			children: term
+		}), /* @__PURE__ */ jsx("dd", {
+			"data-slot": "description-details",
+			className: s.details({ class: slots.details }),
+			children
+		})]
+	});
+}
+//#endregion
+//#region src/components/dialog/close-icon.tsx
+/** Local close icon so overlay components stay self-contained. */
+function CloseIcon(props) {
+	return /* @__PURE__ */ jsx("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		width: "16",
+		height: "16",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		...props,
+		children: /* @__PURE__ */ jsx("path", { d: "M18 6 6 18M6 6l12 12" })
+	});
+}
+//#endregion
+//#region src/components/dialog/dialog.styles.ts
+const dialogStyles = tv({
+	slots: {
+		overlay: "fixed inset-0 z-50 animate-fade-in bg-overlay",
+		content: [
+			"fixed top-1/2 left-1/2 z-50 grid max-h-[calc(100dvh-2rem)] w-[calc(100vw-2rem)] -translate-x-1/2 -translate-y-1/2 gap-5 overflow-y-auto",
+			"rounded-xl border-border bg-surface p-6 text-foreground shadow-lg outline-none animate-pop-in",
+			themedBorder
+		],
+		close: [
+			"absolute top-4 right-4 inline-flex size-7 cursor-pointer items-center justify-center rounded-sm text-muted-foreground hover:bg-muted hover:text-foreground [&>svg]:size-4",
+			transition,
+			focusRing
+		],
+		header: "flex flex-col gap-1.5 pr-8",
+		title: "font-display text-h4 text-foreground",
+		description: "text-small text-muted-foreground",
+		body: "min-w-0 text-small text-foreground",
+		footer: "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end"
+	},
+	variants: { size: {
+		sm: { content: "max-w-sm" },
+		md: { content: "max-w-lg" },
+		lg: { content: "max-w-2xl" },
+		xl: { content: "max-w-4xl" }
+	} },
+	defaultVariants: { size: "md" }
+});
+//#endregion
+//#region src/components/dialog/dialog.tsx
+function useParts$2() {
+	const [, slots] = useComponentConfig("Dialog", {});
+	return {
+		s: dialogStyles(),
+		slots
+	};
+}
+/** A modal window. Focus is trapped inside and returns to the trigger on close. */
+const Dialog = Dialog$1.Root;
+const DialogTrigger = Dialog$1.Trigger;
+const DialogClose = Dialog$1.Close;
+function DialogContent(inProps) {
+	const [props, slots] = useComponentConfig("Dialog", inProps);
+	const { size, showClose = true, overlayClassName, className, children, ...rest } = props;
+	const s = dialogStyles({ size });
+	return /* @__PURE__ */ jsxs(Dialog$1.Portal, { children: [/* @__PURE__ */ jsx(Dialog$1.Overlay, {
+		"data-slot": "dialog-overlay",
+		className: s.overlay({ class: [slots.overlay, overlayClassName] })
+	}), /* @__PURE__ */ jsxs(Dialog$1.Content, {
+		"data-slot": "dialog-content",
+		className: s.content({ class: [slots.content, className] }),
+		...rest,
+		children: [children, showClose && /* @__PURE__ */ jsx(Dialog$1.Close, {
+			"data-slot": "dialog-close",
+			"aria-label": "Close",
+			className: s.close({ class: slots.close }),
+			children: /* @__PURE__ */ jsx(CloseIcon, {})
+		})]
+	})] });
+}
+function DialogHeader({ className, ...props }) {
+	const { s, slots } = useParts$2();
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "dialog-header",
+		className: s.header({ class: [slots.header, className] }),
+		...props
+	});
+}
+function DialogTitle({ className, ...props }) {
+	const { s, slots } = useParts$2();
+	return /* @__PURE__ */ jsx(Dialog$1.Title, {
+		"data-slot": "dialog-title",
+		className: s.title({ class: [slots.title, className] }),
+		...props
+	});
+}
+function DialogDescription({ className, ...props }) {
+	const { s, slots } = useParts$2();
+	return /* @__PURE__ */ jsx(Dialog$1.Description, {
+		"data-slot": "dialog-description",
+		className: s.description({ class: [slots.description, className] }),
+		...props
+	});
+}
+function DialogBody({ className, ...props }) {
+	const { s, slots } = useParts$2();
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "dialog-body",
+		className: s.body({ class: [slots.body, className] }),
+		...props
+	});
+}
+function DialogFooter({ className, ...props }) {
+	const { s, slots } = useParts$2();
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "dialog-footer",
+		className: s.footer({ class: [slots.footer, className] }),
+		...props
+	});
+}
+//#endregion
+//#region src/components/dropdown-menu/dropdown-menu.styles.ts
+const item = [
+	"relative flex h-8 cursor-pointer select-none items-center gap-2 rounded-sm px-2 text-small text-foreground outline-none",
+	"data-highlighted:bg-muted data-disabled:pointer-events-none data-disabled:opacity-50",
+	"[&_svg]:size-4 [&_svg]:shrink-0"
+];
+const dropdownMenuStyles = tv({
+	slots: {
+		content: [popover, "min-w-48 max-h-(--radix-dropdown-menu-content-available-height) overflow-y-auto p-1"],
+		item,
+		icon: "flex size-4 shrink-0 items-center justify-center text-muted-foreground",
+		indicator: "absolute left-2 flex size-4 items-center justify-center text-primary",
+		label: "px-2 pt-1.5 pb-1 text-caption font-medium text-faint-foreground",
+		separator: "-mx-1 my-1 h-px bg-border",
+		shortcut: "ml-auto pl-4 font-mono text-caption tracking-wider text-faint-foreground",
+		subTrigger: [...item, "data-[state=open]:bg-muted"],
+		subContent: [popover, "min-w-40 p-1"]
+	},
+	variants: {
+		tone: {
+			default: {},
+			danger: {
+				item: "text-danger data-highlighted:bg-danger/10",
+				icon: "text-danger"
+			}
+		},
+		inset: { true: {
+			item: "pl-8",
+			label: "pl-8"
+		} }
+	},
+	defaultVariants: { tone: "default" }
+});
+//#endregion
+//#region src/components/dropdown-menu/dropdown-menu.tsx
+function useParts$1(tone, inset) {
+	const [, slots] = useComponentConfig("DropdownMenu", {});
+	return {
+		s: dropdownMenuStyles({
+			tone,
+			inset
+		}),
+		slots
+	};
+}
+const svg = {
+	xmlns: "http://www.w3.org/2000/svg",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: 2,
+	strokeLinecap: "round",
+	strokeLinejoin: "round"
+};
+const CheckIcon = () => /* @__PURE__ */ jsx("svg", {
+	"aria-hidden": "true",
+	...svg,
+	children: /* @__PURE__ */ jsx("path", { d: "M20 6 9 17l-5-5" })
+});
+const DotIcon = () => /* @__PURE__ */ jsx("svg", {
+	"aria-hidden": "true",
+	...svg,
+	children: /* @__PURE__ */ jsx("circle", {
+		cx: "12",
+		cy: "12",
+		r: "4",
+		fill: "currentColor"
+	})
+});
+const ChevronRightIcon = () => /* @__PURE__ */ jsx("svg", {
+	"aria-hidden": "true",
+	...svg,
+	children: /* @__PURE__ */ jsx("path", { d: "m9 18 6-6-6-6" })
+});
+/** A menu of actions opened from a button: row actions, account menus, "more" buttons. */
+const DropdownMenu = DropdownMenu$1.Root;
+const DropdownMenuTrigger = DropdownMenu$1.Trigger;
+const DropdownMenuGroup = DropdownMenu$1.Group;
+const DropdownMenuRadioGroup = DropdownMenu$1.RadioGroup;
+const DropdownMenuSub = DropdownMenu$1.Sub;
+function DropdownMenuContent(inProps) {
+	const [props, slots] = useComponentConfig("DropdownMenu", inProps);
+	const { sideOffset = 6, align = "start", className, ...rest } = props;
+	const s = dropdownMenuStyles();
+	return /* @__PURE__ */ jsx(DropdownMenu$1.Portal, { children: /* @__PURE__ */ jsx(DropdownMenu$1.Content, {
+		"data-slot": "dropdown-menu-content",
+		sideOffset,
+		align,
+		className: s.content({ class: [slots.content, className] }),
+		...rest
+	}) });
+}
+function DropdownMenuItem({ icon, shortcut, tone, inset, className, children, ...props }) {
+	const { s, slots } = useParts$1(tone, inset);
+	return /* @__PURE__ */ jsxs(DropdownMenu$1.Item, {
+		"data-slot": "dropdown-menu-item",
+		"data-tone": tone ?? "default",
+		className: s.item({ class: [slots.item, className] }),
+		...props,
+		children: [
+			icon && /* @__PURE__ */ jsx("span", {
+				className: s.icon({ class: slots.icon }),
+				"aria-hidden": "true",
+				children: icon
+			}),
+			children,
+			shortcut && /* @__PURE__ */ jsx(DropdownMenuShortcut, { children: shortcut })
+		]
+	});
+}
+function DropdownMenuCheckboxItem({ className, children, ...props }) {
+	const { s, slots } = useParts$1(void 0, true);
+	return /* @__PURE__ */ jsxs(DropdownMenu$1.CheckboxItem, {
+		"data-slot": "dropdown-menu-checkbox-item",
+		className: s.item({ class: [slots.item, className] }),
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: s.indicator({ class: slots.indicator }),
+			children: /* @__PURE__ */ jsx(DropdownMenu$1.ItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, {}) })
+		}), children]
+	});
+}
+function DropdownMenuRadioItem({ className, children, ...props }) {
+	const { s, slots } = useParts$1(void 0, true);
+	return /* @__PURE__ */ jsxs(DropdownMenu$1.RadioItem, {
+		"data-slot": "dropdown-menu-radio-item",
+		className: s.item({ class: [slots.item, className] }),
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: s.indicator({ class: slots.indicator }),
+			children: /* @__PURE__ */ jsx(DropdownMenu$1.ItemIndicator, { children: /* @__PURE__ */ jsx(DotIcon, {}) })
+		}), children]
+	});
+}
+function DropdownMenuLabel({ inset, className, ...props }) {
+	const { s, slots } = useParts$1(void 0, inset);
+	return /* @__PURE__ */ jsx(DropdownMenu$1.Label, {
+		"data-slot": "dropdown-menu-label",
+		className: s.label({ class: [slots.label, className] }),
+		...props
+	});
+}
+function DropdownMenuSeparator({ className, ...props }) {
+	const { s, slots } = useParts$1();
+	return /* @__PURE__ */ jsx(DropdownMenu$1.Separator, {
+		"data-slot": "dropdown-menu-separator",
+		className: s.separator({ class: [slots.separator, className] }),
+		...props
+	});
+}
+function DropdownMenuShortcut({ className, ...props }) {
+	const { s, slots } = useParts$1();
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "dropdown-menu-shortcut",
+		className: s.shortcut({ class: [slots.shortcut, className] }),
+		...props
+	});
+}
+function DropdownMenuSubTrigger({ icon, className, children, ...props }) {
+	const { s, slots } = useParts$1();
+	return /* @__PURE__ */ jsxs(DropdownMenu$1.SubTrigger, {
+		"data-slot": "dropdown-menu-sub-trigger",
+		className: s.subTrigger({ class: [slots.subTrigger, className] }),
+		...props,
+		children: [
+			icon && /* @__PURE__ */ jsx("span", {
+				className: s.icon({ class: slots.icon }),
+				"aria-hidden": "true",
+				children: icon
+			}),
+			children,
+			/* @__PURE__ */ jsx("span", {
+				className: "ml-auto flex text-faint-foreground",
+				children: /* @__PURE__ */ jsx(ChevronRightIcon, {})
+			})
+		]
+	});
+}
+function DropdownMenuSubContent({ sideOffset = 4, className, ...props }) {
+	const { s, slots } = useParts$1();
+	return /* @__PURE__ */ jsx(DropdownMenu$1.Portal, { children: /* @__PURE__ */ jsx(DropdownMenu$1.SubContent, {
+		"data-slot": "dropdown-menu-sub-content",
+		sideOffset,
+		className: s.subContent({ class: [slots.subContent, className] }),
+		...props
+	}) });
+}
+//#endregion
+//#region src/components/eyebrow/eyebrow.styles.ts
+const eyebrowStyles = tv({
+	slots: { base: "font-mono text-caption uppercase tracking-[0.12em]" },
+	variants: { tone: {
+		muted: { base: "text-muted-foreground" },
+		primary: { base: "text-primary" }
+	} },
+	defaultVariants: { tone: "muted" }
+});
+//#endregion
+//#region src/components/eyebrow/eyebrow.tsx
+/** Small uppercase label that sits above a heading. */
+function Eyebrow(inProps) {
+	const [props, slots] = useComponentConfig("Eyebrow", inProps);
+	const { tone, asChild, className, ...rest } = props;
+	const s = eyebrowStyles({ tone });
+	const Comp = asChild ? Slot.Root : "p";
+	return /* @__PURE__ */ jsx(Comp, {
+		"data-slot": "eyebrow",
+		className: s.base({ class: [slots.base, className] }),
+		...rest
+	});
+}
+//#endregion
+//#region src/components/grid/grid.tsx
+const colClasses = {
+	base: {
+		1: "grid-cols-1",
+		2: "grid-cols-2",
+		3: "grid-cols-3",
+		4: "grid-cols-4",
+		5: "grid-cols-5",
+		6: "grid-cols-6",
+		7: "grid-cols-7",
+		8: "grid-cols-8",
+		9: "grid-cols-9",
+		10: "grid-cols-10",
+		11: "grid-cols-11",
+		12: "grid-cols-12"
+	},
+	sm: {
+		1: "sm:grid-cols-1",
+		2: "sm:grid-cols-2",
+		3: "sm:grid-cols-3",
+		4: "sm:grid-cols-4",
+		5: "sm:grid-cols-5",
+		6: "sm:grid-cols-6",
+		7: "sm:grid-cols-7",
+		8: "sm:grid-cols-8",
+		9: "sm:grid-cols-9",
+		10: "sm:grid-cols-10",
+		11: "sm:grid-cols-11",
+		12: "sm:grid-cols-12"
+	},
+	md: {
+		1: "md:grid-cols-1",
+		2: "md:grid-cols-2",
+		3: "md:grid-cols-3",
+		4: "md:grid-cols-4",
+		5: "md:grid-cols-5",
+		6: "md:grid-cols-6",
+		7: "md:grid-cols-7",
+		8: "md:grid-cols-8",
+		9: "md:grid-cols-9",
+		10: "md:grid-cols-10",
+		11: "md:grid-cols-11",
+		12: "md:grid-cols-12"
+	},
+	lg: {
+		1: "lg:grid-cols-1",
+		2: "lg:grid-cols-2",
+		3: "lg:grid-cols-3",
+		4: "lg:grid-cols-4",
+		5: "lg:grid-cols-5",
+		6: "lg:grid-cols-6",
+		7: "lg:grid-cols-7",
+		8: "lg:grid-cols-8",
+		9: "lg:grid-cols-9",
+		10: "lg:grid-cols-10",
+		11: "lg:grid-cols-11",
+		12: "lg:grid-cols-12"
+	},
+	xl: {
+		1: "xl:grid-cols-1",
+		2: "xl:grid-cols-2",
+		3: "xl:grid-cols-3",
+		4: "xl:grid-cols-4",
+		5: "xl:grid-cols-5",
+		6: "xl:grid-cols-6",
+		7: "xl:grid-cols-7",
+		8: "xl:grid-cols-8",
+		9: "xl:grid-cols-9",
+		10: "xl:grid-cols-10",
+		11: "xl:grid-cols-11",
+		12: "xl:grid-cols-12"
+	}
+};
+function colsToClasses(cols) {
+	if (typeof cols === "number") return colClasses.base[cols];
+	return Object.entries(cols).map(([bp, n]) => colClasses[bp][n]).join(" ");
+}
+const gridStyles = tv({
+	slots: { base: "grid" },
+	variants: {
+		gap: {
+			0: { base: "gap-0" },
+			1: { base: "gap-1" },
+			2: { base: "gap-2" },
+			3: { base: "gap-3" },
+			4: { base: "gap-4" },
+			5: { base: "gap-5" },
+			6: { base: "gap-6" },
+			8: { base: "gap-8" },
+			10: { base: "gap-10" },
+			12: { base: "gap-12" }
+		},
+		align: {
+			start: { base: "items-start" },
+			center: { base: "items-center" },
+			end: { base: "items-end" },
+			stretch: { base: "items-stretch" }
+		}
+	},
+	defaultVariants: { gap: 4 }
+});
+/** Responsive equal-width columns with spacing from the scale. */
+function Grid(inProps) {
+	const [props, slots] = useComponentConfig("Grid", inProps);
+	const { cols = 1, gap, align, asChild, className, ...rest } = props;
+	const Comp = asChild ? Slot.Root : "div";
+	return /* @__PURE__ */ jsx(Comp, {
+		"data-slot": "grid",
+		className: gridStyles({
+			gap,
+			align
+		}).base({ class: [
+			colsToClasses(cols),
+			slots.base,
+			className
+		] }),
+		...rest
+	});
+}
+//#endregion
+//#region src/components/heading/heading.styles.ts
+const headingStyles = tv({
+	slots: { base: "font-display text-balance text-foreground" },
+	variants: { size: {
+		display: { base: "text-display" },
+		h1: { base: "text-h1" },
+		h2: { base: "text-h2" },
+		h3: { base: "text-h3" },
+		h4: { base: "text-h4" }
+	} }
+});
+//#endregion
+//#region src/components/heading/heading.tsx
+const sizeForLevel = {
+	1: "h1",
+	2: "h2",
+	3: "h3",
+	4: "h4",
+	5: "h4",
+	6: "h4"
+};
+/** A heading whose semantic level and visual size are set independently. */
+function Heading(inProps) {
+	const [props, slots] = useComponentConfig("Heading", inProps);
+	const { level = 2, size, asChild, className, ...rest } = props;
+	const s = headingStyles({ size: size ?? sizeForLevel[level] });
+	const Comp = asChild ? Slot.Root : `h${level}`;
+	return /* @__PURE__ */ jsx(Comp, {
+		"data-slot": "heading",
+		className: s.base({ class: [slots.base, className] }),
+		...rest
+	});
+}
+//#endregion
+//#region src/components/link/link.styles.ts
+const linkStyles = tv({
+	slots: {
+		base: [
+			"inline-flex items-baseline gap-1 rounded-xs font-medium",
+			"bg-[linear-gradient(currentColor,currentColor)] bg-[position:0_100%] bg-no-repeat",
+			"transition-[background-size,color] duration-(--glyph-duration-base) ease-standard",
+			focusRing
+		],
+		icon: "size-3 shrink-0 self-center opacity-70"
+	},
+	variants: {
+		tone: {
+			default: { base: "text-foreground" },
+			muted: { base: "text-muted-foreground hover:text-foreground" },
+			primary: { base: "text-primary" }
+		},
+		underline: {
+			hover: { base: "bg-[length:0%_1px] hover:bg-[length:100%_1px] focus-visible:bg-[length:100%_1px]" },
+			always: { base: "bg-[length:100%_1px] hover:bg-[length:100%_2px]" },
+			none: { base: "bg-none" }
+		}
+	},
+	defaultVariants: {
+		tone: "primary",
+		underline: "hover"
+	}
+});
+//#endregion
+//#region src/components/link/link.tsx
+const ExternalIcon = (props) => /* @__PURE__ */ jsx("svg", {
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: "2",
+	strokeLinecap: "round",
+	strokeLinejoin: "round",
+	"aria-hidden": "true",
+	...props,
+	children: /* @__PURE__ */ jsx("path", { d: "M7 17 17 7M7 7h10v10" })
+});
+/**
+* A text link with an animated underline. Internal links go through the provider's
+* `linkComponent` (your router); external links render a plain `<a>`.
+*/
+function Link(inProps) {
+	const [props, slots] = useComponentConfig("Link", inProps);
+	const { href, external = false, tone, underline, className, children, ...rest } = props;
+	const RouterLink = useLinkComponent();
+	const s = linkStyles({
+		tone,
+		underline
+	});
+	const classes = s.base({ class: [slots.base, className] });
+	if (external) return /* @__PURE__ */ jsxs("a", {
+		"data-slot": "link",
+		href,
+		target: "_blank",
+		rel: "noopener noreferrer",
+		className: classes,
+		...rest,
+		children: [
+			children,
+			/* @__PURE__ */ jsx(ExternalIcon, { className: s.icon({ class: slots.icon }) }),
+			" ",
+			/* @__PURE__ */ jsx("span", {
+				className: "sr-only",
+				children: "(opens in a new tab)"
+			})
+		]
+	});
+	return /* @__PURE__ */ jsx(RouterLink, {
+		"data-slot": "link",
+		href,
+		className: classes,
+		...rest,
+		children
+	});
+}
+//#endregion
+//#region src/components/pagination/pagination.styles.ts
+const paginationStyles = tv({
+	slots: {
+		root: "flex",
+		list: "flex flex-wrap items-center gap-1",
+		item: [
+			"inline-flex shrink-0 cursor-pointer select-none items-center justify-center rounded-md font-medium tabular-nums text-muted-foreground",
+			transition,
+			focusRing,
+			"hover:bg-muted hover:text-foreground",
+			"aria-[current=page]:bg-primary aria-[current=page]:text-primary-foreground aria-[current=page]:shadow-xs",
+			"disabled:pointer-events-none disabled:opacity-40 aria-disabled:pointer-events-none aria-disabled:opacity-40",
+			"[&>svg]:size-4"
+		],
+		ellipsis: "inline-flex items-center justify-center text-faint-foreground"
+	},
+	variants: { size: {
+		sm: {
+			item: "h-(--glyph-control-sm) min-w-(--glyph-control-sm) px-1.5 text-small",
+			ellipsis: "h-(--glyph-control-sm) w-(--glyph-control-sm) text-small"
+		},
+		md: {
+			item: "h-(--glyph-control-md) min-w-(--glyph-control-md) px-2 text-small",
+			ellipsis: "h-(--glyph-control-md) w-(--glyph-control-md) text-small"
+		}
+	} },
+	defaultVariants: { size: "md" }
+});
+//#endregion
+//#region src/components/pagination/pagination-range.ts
+/**
+* The page numbers to show, with `'ellipsis'` for gaps. Always includes the first and
+* last page and `siblingCount` pages on each side of the current one, and keeps the
+* number of items constant so the control doesn't jump in width.
+*
+* `paginationRange(6, 20)` → `[1, 'ellipsis', 5, 6, 7, 'ellipsis', 20]`
+*/
+function paginationRange(page, pageCount, siblingCount = 1) {
+	const count = Math.max(0, Math.floor(pageCount));
+	if (count === 0) return [];
+	const current = Math.min(Math.max(1, Math.floor(page)), count);
+	if (count <= siblingCount * 2 + 5) return range(1, count);
+	const left = Math.max(current - siblingCount, 1);
+	const right = Math.min(current + siblingCount, count);
+	const showLeftGap = left > 2;
+	const showRightGap = right < count - 1;
+	const edge = 3 + siblingCount * 2;
+	if (!showLeftGap && showRightGap) return [
+		...range(1, edge),
+		"ellipsis",
+		count
+	];
+	if (showLeftGap && !showRightGap) return [
+		1,
+		"ellipsis",
+		...range(count - edge + 1, count)
+	];
+	return [
+		1,
+		"ellipsis",
+		...range(left, right),
+		"ellipsis",
+		count
+	];
+}
+function range(from, to) {
+	return Array.from({ length: to - from + 1 }, (_, i) => from + i);
+}
+//#endregion
+//#region src/components/pagination/pagination.tsx
+const ChevronsLeftIcon = () => /* @__PURE__ */ jsx("svg", {
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: "2",
+	strokeLinecap: "round",
+	strokeLinejoin: "round",
+	"aria-hidden": "true",
+	children: /* @__PURE__ */ jsx("path", { d: "m11 17-5-5 5-5M18 17l-5-5 5-5" })
+});
+const ChevronsRightIcon = () => /* @__PURE__ */ jsx("svg", {
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: "2",
+	strokeLinecap: "round",
+	strokeLinejoin: "round",
+	"aria-hidden": "true",
+	children: /* @__PURE__ */ jsx("path", { d: "m6 17 5-5-5-5M13 17l5-5-5-5" })
+});
+/** Page navigation for long lists. Controlled: you own `page`. */
+function Pagination(inProps) {
+	const [props, slots] = useComponentConfig("Pagination", inProps);
+	const { page, pageCount, onPageChange, getHref, siblingCount = 1, showEdges = true, size, className, ...rest } = props;
+	const Link = useLinkComponent();
+	const s = paginationStyles({ size });
+	const itemClass = s.item({ class: slots.item });
+	const current = Math.min(Math.max(1, page), Math.max(1, pageCount));
+	const control = (target, label, content, options = {}) => {
+		const disabled = target < 1 || target > pageCount || target === current && !options.current;
+		const shared = {
+			"aria-label": label,
+			"aria-current": options.current ? "page" : void 0,
+			className: itemClass
+		};
+		if (getHref) {
+			if (disabled) return /* @__PURE__ */ jsx("span", {
+				"aria-disabled": "true",
+				...shared,
+				children: content
+			});
+			return /* @__PURE__ */ jsx(Link, {
+				href: getHref(target),
+				onClick: () => onPageChange?.(target),
+				...shared,
+				children: content
+			});
+		}
+		return /* @__PURE__ */ jsx("button", {
+			type: "button",
+			disabled,
+			onClick: () => onPageChange?.(target),
+			...shared,
+			children: content
+		});
+	};
+	return /* @__PURE__ */ jsx("nav", {
+		"aria-label": "Pagination",
+		"data-slot": "pagination",
+		className: s.root({ class: [slots.root, className] }),
+		...rest,
+		children: /* @__PURE__ */ jsxs("ul", {
+			className: s.list({ class: slots.list }),
+			children: [
+				showEdges && /* @__PURE__ */ jsx("li", { children: control(1, "First page", /* @__PURE__ */ jsx(ChevronsLeftIcon, {})) }),
+				/* @__PURE__ */ jsx("li", { children: control(current - 1, "Previous page", /* @__PURE__ */ jsx(ChevronLeftIcon, {})) }),
+				paginationRange(current, pageCount, siblingCount).map((item, index) => item === "ellipsis" ? /* @__PURE__ */ jsx("li", {
+					className: s.ellipsis({ class: slots.ellipsis }),
+					"aria-hidden": "true",
+					children: "…"
+				}, `gap-${index}`) : /* @__PURE__ */ jsx("li", { children: control(item, `Page ${item}`, item, { current: item === current }) }, item)),
+				/* @__PURE__ */ jsx("li", { children: control(current + 1, "Next page", /* @__PURE__ */ jsx(ChevronRightIcon$1, {})) }),
+				showEdges && /* @__PURE__ */ jsx("li", { children: control(pageCount, "Last page", /* @__PURE__ */ jsx(ChevronsRightIcon, {})) })
+			]
+		})
+	});
+}
+//#endregion
+//#region src/components/popover/popover.tsx
+const popoverStyles = tv({ slots: {
+	content: [popover, "w-72 max-w-[calc(100vw-2rem)] overflow-visible p-4 text-small outline-none"],
+	arrow: "fill-raised"
+} });
+/** Floating content anchored to a trigger: quick settings, details, small forms. */
+const Popover = Popover$1.Root;
+const PopoverTrigger = Popover$1.Trigger;
+const PopoverAnchor = Popover$1.Anchor;
+const PopoverClose = Popover$1.Close;
+function PopoverContent(inProps) {
+	const [props, slots] = useComponentConfig("Popover", inProps);
+	const { showArrow = false, sideOffset = 6, align = "center", className, children, ...rest } = props;
+	const s = popoverStyles();
+	return /* @__PURE__ */ jsx(Popover$1.Portal, { children: /* @__PURE__ */ jsxs(Popover$1.Content, {
+		"data-slot": "popover-content",
+		sideOffset,
+		align,
+		className: s.content({ class: [slots.content, className] }),
+		...rest,
+		children: [children, showArrow && /* @__PURE__ */ jsx(Popover$1.Arrow, {
+			width: 12,
+			height: 6,
+			className: s.arrow({ class: slots.arrow })
+		})]
+	}) });
+}
+//#endregion
+//#region src/components/progress/progress.styles.ts
+const progressStyles = tv({
+	slots: {
+		root: "grid w-full gap-1.5",
+		header: "flex items-baseline justify-between gap-3 text-small",
+		label: "font-medium text-foreground",
+		value: "tabular-nums text-muted-foreground",
+		track: "relative w-full overflow-hidden rounded-pill bg-muted",
+		indicator: ["h-full w-full rounded-pill transition-transform duration-(--glyph-duration-slow) ease-standard", "data-[state=indeterminate]:w-1/3 data-[state=indeterminate]:animate-pulse"]
+	},
+	variants: {
+		size: {
+			sm: { track: "h-1" },
+			md: { track: "h-2" },
+			lg: { track: "h-3" }
+		},
+		tone: {
+			primary: { indicator: "bg-primary" },
+			neutral: { indicator: "bg-foreground" },
+			success: { indicator: "bg-success" },
+			warning: { indicator: "bg-warning" },
+			danger: { indicator: "bg-danger" }
+		}
+	},
+	defaultVariants: {
+		size: "md",
+		tone: "primary"
+	}
+});
+const progressCircleStyles = tv({
+	slots: {
+		root: "relative inline-flex shrink-0 items-center justify-center",
+		svg: "size-full -rotate-90",
+		track: "stroke-muted",
+		indicator: "stroke-current transition-[stroke-dashoffset] duration-(--glyph-duration-slow) ease-standard",
+		value: "absolute font-medium tabular-nums text-foreground"
+	},
+	variants: {
+		size: {
+			sm: {
+				root: "size-6",
+				value: "hidden"
+			},
+			md: {
+				root: "size-10",
+				value: "text-[0.625rem]"
+			},
+			lg: {
+				root: "size-16",
+				value: "text-small"
+			}
+		},
+		tone: {
+			primary: { indicator: "text-primary" },
+			neutral: { indicator: "text-foreground" },
+			success: { indicator: "text-success" },
+			warning: { indicator: "text-warning" },
+			danger: { indicator: "text-danger" }
+		}
+	},
+	defaultVariants: {
+		size: "md",
+		tone: "primary"
+	}
+});
+//#endregion
+//#region src/components/progress/progress.tsx
+function clampPercent(value, max) {
+	if (max <= 0) return 0;
+	return Math.min(100, Math.max(0, value / max * 100));
+}
+const defaultFormat = (value, max) => `${Math.round(clampPercent(value, max))}%`;
+/** A horizontal bar showing how far a task has progressed. */
+function Progress(inProps) {
+	const [props, slots] = useComponentConfig("Progress", inProps);
+	const { value = null, max = 100, label, showValue = false, formatValue = defaultFormat, size, tone, className, "aria-label": ariaLabel, ...rest } = props;
+	const labelId = useId();
+	const s = progressStyles({
+		size,
+		tone
+	});
+	const determinate = typeof value === "number";
+	const percent = determinate ? clampPercent(value, max) : 0;
+	const valueText = determinate ? formatValue(value, max) : void 0;
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "progress",
+		className: s.root({ class: [slots.root, className] }),
+		...rest,
+		children: [(label || showValue && valueText) && /* @__PURE__ */ jsxs("div", {
+			"data-slot": "progress-header",
+			className: s.header({ class: slots.header }),
+			children: [label && /* @__PURE__ */ jsx("span", {
+				id: labelId,
+				className: s.label({ class: slots.label }),
+				children: label
+			}), showValue && valueText && /* @__PURE__ */ jsx("span", {
+				className: s.value({ class: slots.value }),
+				"aria-hidden": "true",
+				children: valueText
+			})]
+		}), /* @__PURE__ */ jsx(Progress$1.Root, {
+			"data-slot": "progress-track",
+			value: determinate ? Math.min(Math.max(value, 0), max) : null,
+			max,
+			getValueLabel: (v, m) => formatValue(v, m),
+			"aria-labelledby": label ? labelId : void 0,
+			"aria-label": label ? void 0 : ariaLabel,
+			className: s.track({ class: slots.track }),
+			children: /* @__PURE__ */ jsx(Progress$1.Indicator, {
+				"data-slot": "progress-indicator",
+				className: s.indicator({ class: slots.indicator }),
+				style: determinate ? { transform: `translateX(-${100 - percent}%)` } : void 0
+			})
+		})]
+	});
+}
+const RADIUS = 16;
+const CIRCUMFERENCE = 2 * Math.PI * RADIUS;
+/** A compact ring for progress or a share of a total. */
+function ProgressCircle(inProps) {
+	const [props, slots] = useComponentConfig("ProgressCircle", inProps);
+	const { value, max = 100, showValue = false, formatValue = defaultFormat, size, tone, className, ...rest } = props;
+	const s = progressCircleStyles({
+		size,
+		tone
+	});
+	const percent = clampPercent(value, max);
+	const valueText = formatValue(value, max);
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "progress-circle",
+		role: "progressbar",
+		"aria-valuemin": 0,
+		"aria-valuemax": max,
+		"aria-valuenow": Math.min(Math.max(value, 0), max),
+		"aria-valuetext": valueText,
+		className: s.root({ class: [slots.root, className] }),
+		...rest,
+		children: [/* @__PURE__ */ jsxs("svg", {
+			viewBox: "0 0 40 40",
+			className: s.svg({ class: slots.svg }),
+			"aria-hidden": "true",
+			children: [/* @__PURE__ */ jsx("circle", {
+				cx: "20",
+				cy: "20",
+				r: RADIUS,
+				fill: "none",
+				strokeWidth: "4",
+				className: s.track({ class: slots.track })
+			}), /* @__PURE__ */ jsx("circle", {
+				cx: "20",
+				cy: "20",
+				r: RADIUS,
+				fill: "none",
+				strokeWidth: "4",
+				strokeLinecap: "round",
+				strokeDasharray: CIRCUMFERENCE,
+				strokeDashoffset: CIRCUMFERENCE * (1 - percent / 100),
+				className: s.indicator({ class: slots.indicator })
+			})]
+		}), showValue && /* @__PURE__ */ jsx("span", {
+			className: s.value({ class: slots.value }),
+			"aria-hidden": "true",
+			children: valueText
+		})]
 	});
 }
 //#endregion
-//#region src/components/eyebrow/eyebrow.styles.ts
-const eyebrowStyles = tv({
-	slots: { base: "font-mono text-caption uppercase tracking-[0.12em]" },
-	variants: { tone: {
-		muted: { base: "text-muted-foreground" },
-		primary: { base: "text-primary" }
-	} },
-	defaultVariants: { tone: "muted" }
+//#region src/components/prose/prose.tsx
+/**
+* Element styles for long-form content. Every value comes from theme tokens, so articles
+* pick up the theme's display font, type scale, colors and radius.
+*/
+const proseStyles = tv({
+	slots: { base: [
+		"text-foreground [&>:first-child]:mt-0 [&>:last-child]:mb-0",
+		"[&_h1]:mt-[1.4em] [&_h1]:mb-[0.5em] [&_h1]:font-display [&_h1]:text-h1 [&_h1]:text-balance",
+		"[&_h2]:mt-[1.6em] [&_h2]:mb-[0.5em] [&_h2]:font-display [&_h2]:text-h2 [&_h2]:text-balance",
+		"[&_h3]:mt-[1.5em] [&_h3]:mb-[0.4em] [&_h3]:font-display [&_h3]:text-h3 [&_h3]:text-balance",
+		"[&_h4]:mt-[1.4em] [&_h4]:mb-[0.4em] [&_h4]:font-display [&_h4]:text-h4",
+		"[&_p]:my-[1em] [&_p]:text-pretty",
+		"[&_strong]:font-semibold [&_strong]:text-foreground",
+		"[&_a]:font-medium [&_a]:text-primary [&_a]:underline [&_a]:decoration-primary/40 [&_a]:underline-offset-4 [&_a:hover]:decoration-primary",
+		"[&_ul]:my-[1em] [&_ul]:list-disc [&_ul]:pl-[1.5em] [&_ol]:my-[1em] [&_ol]:list-decimal [&_ol]:pl-[1.5em]",
+		"[&_li]:my-[0.35em] [&_li]:pl-[0.25em] [&_li::marker]:text-faint-foreground",
+		"[&_blockquote]:my-[1.5em] [&_blockquote]:border-l-2 [&_blockquote]:border-primary [&_blockquote]:pl-[1em] [&_blockquote]:font-display [&_blockquote]:text-muted-foreground",
+		"[&_:not(pre)>code]:rounded-xs [&_:not(pre)>code]:bg-muted [&_:not(pre)>code]:px-[0.3em] [&_:not(pre)>code]:py-[0.15em] [&_:not(pre)>code]:font-mono [&_:not(pre)>code]:text-[0.875em]",
+		"[&_pre]:my-[1.5em] [&_pre]:overflow-x-auto [&_pre]:rounded-lg [&_pre]:border [&_pre]:border-border [&_pre]:bg-subtle [&_pre]:p-4 [&_pre]:font-mono [&_pre]:text-small [&_pre]:leading-relaxed",
+		"[&_hr]:my-[2em] [&_hr]:border-border",
+		"[&_img]:my-[1.5em] [&_img]:max-w-full [&_img]:rounded-lg",
+		"[&_figure]:my-[1.75em] [&_figure_img]:my-0 [&_figcaption]:mt-2 [&_figcaption]:text-small [&_figcaption]:text-faint-foreground",
+		"[&_table]:my-[1.5em] [&_table]:w-full [&_table]:border-collapse [&_table]:text-small [&_table]:tabular-nums",
+		"[&_th]:border-b [&_th]:border-border-strong [&_th]:px-3 [&_th]:py-2 [&_th]:text-left [&_th]:font-medium",
+		"[&_td]:border-b [&_td]:border-border [&_td]:px-3 [&_td]:py-2 [&_td]:align-top"
+	] },
+	variants: {
+		size: {
+			sm: { base: "text-small [&_blockquote]:text-body" },
+			md: { base: "text-body [&_blockquote]:text-lead" },
+			lg: { base: "text-lead [&_blockquote]:text-h4" }
+		},
+		fullWidth: {
+			true: { base: "max-w-none" },
+			false: { base: "max-w-prose" }
+		}
+	},
+	defaultVariants: {
+		size: "md",
+		fullWidth: false
+	}
 });
-//#endregion
-//#region src/components/eyebrow/eyebrow.tsx
-/** Small uppercase label that sits above a heading. */
-function Eyebrow(inProps) {
-	const [props, slots] = useComponentConfig("Eyebrow", inProps);
-	const { tone, asChild, className, ...rest } = props;
-	const s = eyebrowStyles({ tone });
-	const Comp = asChild ? Slot.Root : "p";
+/**
+* Styles raw HTML or MDX (headings, lists, links, quotes, code, tables, images) from theme
+* tokens. Wrap rendered Markdown or CMS content in it.
+*/
+function Prose(inProps) {
+	const [props, slots] = useComponentConfig("Prose", inProps);
+	const { size, fullWidth, asChild, className, ...rest } = props;
+	const Comp = asChild ? Slot.Root : "div";
 	return /* @__PURE__ */ jsx(Comp, {
-		"data-slot": "eyebrow",
-		className: s.base({ class: [slots.base, className] }),
+		"data-slot": "prose",
+		className: proseStyles({
+			size,
+			fullWidth
+		}).base({ class: [slots.base, className] }),
 		...rest
 	});
 }
 //#endregion
-//#region src/components/heading/heading.styles.ts
-const headingStyles = tv({
-	slots: { base: "font-display text-balance text-foreground" },
-	variants: { size: {
-		display: { base: "text-display" },
-		h1: { base: "text-h1" },
-		h2: { base: "text-h2" },
-		h3: { base: "text-h3" },
-		h4: { base: "text-h4" }
-	} }
+//#region src/components/radio-group/radio-group.styles.ts
+const control = [
+	"mt-0.5 inline-flex size-4 shrink-0 items-center justify-center rounded-pill border-input bg-surface shadow-xs",
+	themedBorder,
+	transition
+];
+const radioGroupStyles = tv({
+	slots: {
+		root: "",
+		option: "flex items-start gap-2.5",
+		control: [
+			...control,
+			focusRing,
+			"peer cursor-pointer hover:border-border-strong aria-invalid:border-danger",
+			"data-[state=checked]:border-primary disabled:cursor-not-allowed disabled:opacity-50"
+		],
+		indicator: "flex size-full items-center justify-center after:block after:size-2 after:rounded-pill after:bg-primary",
+		text: "grid gap-0.5",
+		label: "cursor-pointer text-small font-medium text-foreground peer-disabled:cursor-not-allowed peer-disabled:opacity-60",
+		description: "text-small text-faint-foreground",
+		card: [
+			"group relative flex w-full cursor-pointer items-start gap-3 rounded-lg border-border bg-surface p-4 text-left shadow-xs",
+			themedBorder,
+			transition,
+			focusRing,
+			"hover:border-border-strong",
+			"data-[state=checked]:border-primary data-[state=checked]:ring-1 data-[state=checked]:ring-primary",
+			"disabled:cursor-not-allowed disabled:opacity-50"
+		],
+		cardControl: [...control, "group-data-[state=checked]:border-primary"]
+	},
+	variants: {
+		orientation: {
+			vertical: { root: "grid gap-3" },
+			horizontal: { root: "flex flex-wrap gap-x-5 gap-y-3" }
+		},
+		variant: {
+			default: {},
+			card: {}
+		}
+	},
+	compoundVariants: [{
+		variant: "card",
+		orientation: "horizontal",
+		class: { root: "grid grid-cols-[repeat(auto-fit,minmax(12rem,1fr))] gap-3" }
+	}],
+	defaultVariants: {
+		orientation: "vertical",
+		variant: "default"
+	}
 });
 //#endregion
-//#region src/components/heading/heading.tsx
-const sizeForLevel = {
-	1: "h1",
-	2: "h2",
-	3: "h3",
-	4: "h4",
-	5: "h4",
-	6: "h4"
-};
-/** A heading whose semantic level and visual size are set independently. */
-function Heading(inProps) {
-	const [props, slots] = useComponentConfig("Heading", inProps);
-	const { level = 2, size, asChild, className, ...rest } = props;
-	const s = headingStyles({ size: size ?? sizeForLevel[level] });
-	const Comp = asChild ? Slot.Root : `h${level}`;
-	return /* @__PURE__ */ jsx(Comp, {
-		"data-slot": "heading",
-		className: s.base({ class: [slots.base, className] }),
-		...rest
+//#region src/components/radio-group/radio-group.tsx
+const RadioGroupContext = createContext(null);
+function useRadioGroupContext() {
+	return useContext(RadioGroupContext) ?? {
+		s: radioGroupStyles(),
+		slots: {},
+		variant: "default"
+	};
+}
+/**
+* Pick exactly one option from a short visible list. `variant="card"` turns each option
+* into a bordered card with a title and description.
+*/
+function RadioGroup(inProps) {
+	const [props, slots] = useComponentConfig("RadioGroup", useFieldControl(inProps));
+	const { variant = "default", orientation = "vertical", onValueChange, className, ...rest } = props;
+	const s = radioGroupStyles({
+		variant,
+		orientation
+	});
+	return /* @__PURE__ */ jsx(RadioGroupContext.Provider, {
+		value: {
+			s,
+			slots,
+			variant
+		},
+		children: /* @__PURE__ */ jsx(RadioGroup$1.Root, {
+			"data-slot": "radio-group",
+			"data-variant": variant,
+			orientation,
+			...onValueChange && { onValueChange: (value) => onValueChange(value) },
+			className: s.root({ class: [slots.root, className] }),
+			...rest
+		})
+	});
+}
+function RadioGroupItem({ label, description, children, className, id, ...props }) {
+	const { s, slots, variant } = useRadioGroupContext();
+	const generated = useId();
+	const itemId = id ?? generated;
+	const descriptionId = description ? `${itemId}-description` : void 0;
+	if (variant === "card") return /* @__PURE__ */ jsxs(RadioGroup$1.Item, {
+		id: itemId,
+		"data-slot": "radio-group-card",
+		"aria-describedby": descriptionId,
+		className: s.card({ class: [slots.card, className] }),
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: s.cardControl({ class: slots.cardControl }),
+			"aria-hidden": "true",
+			children: /* @__PURE__ */ jsx(RadioGroup$1.Indicator, { className: s.indicator({ class: slots.indicator }) })
+		}), /* @__PURE__ */ jsxs("span", {
+			className: s.text({ class: slots.text }),
+			children: [
+				label && /* @__PURE__ */ jsx("span", {
+					className: s.label({ class: slots.label }),
+					children: label
+				}),
+				description && /* @__PURE__ */ jsx("span", {
+					id: descriptionId,
+					className: s.description({ class: slots.description }),
+					children: description
+				}),
+				children
+			]
+		})]
+	});
+	const control = /* @__PURE__ */ jsx(RadioGroup$1.Item, {
+		id: itemId,
+		"data-slot": "radio-group-item",
+		"aria-describedby": descriptionId,
+		className: s.control({ class: [slots.control, !label && className] }),
+		...props,
+		children: /* @__PURE__ */ jsx(RadioGroup$1.Indicator, { className: s.indicator({ class: slots.indicator }) })
+	});
+	if (!label) return control;
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "radio-group-option",
+		className: s.option({ class: [slots.option, className] }),
+		children: [control, /* @__PURE__ */ jsxs("span", {
+			className: s.text({ class: slots.text }),
+			children: [/* @__PURE__ */ jsx("label", {
+				htmlFor: itemId,
+				className: s.label({ class: slots.label }),
+				children: label
+			}), description && /* @__PURE__ */ jsx("span", {
+				id: descriptionId,
+				className: s.description({ class: slots.description }),
+				children: description
+			})]
+		})]
 	});
 }
 //#endregion
-//#region src/components/kbd/kbd.tsx
-const kbdStyles = tv({ slots: { base: "inline-flex h-5 min-w-5 items-center justify-center rounded-xs border border-border bg-muted px-1 font-mono text-[0.6875rem] font-medium text-muted-foreground shadow-xs" } });
-/** A keyboard key, e.g. `<Kbd>⌘K</Kbd>`. */
-function Kbd(inProps) {
-	const [{ className, ...rest }, slots] = useComponentConfig("Kbd", inProps);
-	return /* @__PURE__ */ jsx("kbd", {
-		"data-slot": "kbd",
-		className: kbdStyles().base({ class: [slots.base, className] }),
-		...rest
+//#region src/components/scroll-area/scroll-area.tsx
+const scrollAreaStyles = tv({ slots: {
+	root: "relative overflow-hidden",
+	viewport: ["size-full rounded-[inherit]", focusRing],
+	scrollbar: [
+		"flex touch-none select-none p-px transition-colors duration-(--glyph-duration-fast)",
+		"data-[orientation=vertical]:h-full data-[orientation=vertical]:w-2.5 data-[orientation=vertical]:border-l data-[orientation=vertical]:border-l-transparent",
+		"data-[orientation=horizontal]:h-2.5 data-[orientation=horizontal]:flex-col data-[orientation=horizontal]:border-t data-[orientation=horizontal]:border-t-transparent"
+	],
+	thumb: "relative flex-1 rounded-pill bg-border-strong hover:bg-faint-foreground",
+	corner: "bg-transparent"
+} });
+/**
+* A scrollable region with slim, theme-colored scrollbars. Give it a height (or width)
+* with `className`, e.g. `h-72`.
+*/
+function ScrollArea(inProps) {
+	const [props, slots] = useComponentConfig("ScrollArea", inProps);
+	const { orientation = "vertical", viewportClassName, className, children, ...rest } = props;
+	const s = scrollAreaStyles();
+	const bar = (o) => /* @__PURE__ */ jsx(ScrollArea$1.Scrollbar, {
+		"data-slot": "scroll-area-scrollbar",
+		orientation: o,
+		className: s.scrollbar({ class: slots.scrollbar }),
+		children: /* @__PURE__ */ jsx(ScrollArea$1.Thumb, { className: s.thumb({ class: slots.thumb }) })
+	});
+	return /* @__PURE__ */ jsxs(ScrollArea$1.Root, {
+		"data-slot": "scroll-area",
+		className: s.root({ class: [slots.root, className] }),
+		...rest,
+		children: [
+			/* @__PURE__ */ jsx(ScrollArea$1.Viewport, {
+				"data-slot": "scroll-area-viewport",
+				className: s.viewport({ class: [slots.viewport, viewportClassName] }),
+				children
+			}),
+			orientation !== "horizontal" && bar("vertical"),
+			orientation !== "vertical" && bar("horizontal"),
+			/* @__PURE__ */ jsx(ScrollArea$1.Corner, { className: s.corner({ class: slots.corner }) })
+		]
 	});
 }
 //#endregion
@@ -532,7 +2817,7 @@ function SelectItem({ className, children, ...props }) {
 		...props,
 		children: [/* @__PURE__ */ jsx(Select$1.ItemText, { children }), /* @__PURE__ */ jsx(Select$1.ItemIndicator, {
 			className: s.indicator({ class: slots.indicator }),
-			children: /* @__PURE__ */ jsx(CheckIcon, {})
+			children: /* @__PURE__ */ jsx(CheckIcon$1, {})
 		})]
 	});
 }
@@ -558,6 +2843,217 @@ function Separator(inProps) {
 	});
 }
 //#endregion
+//#region src/components/sheet/sheet.styles.ts
+const sheetStyles = tv({
+	slots: {
+		overlay: "fixed inset-0 z-50 animate-fade-in bg-overlay",
+		content: ["fixed z-50 flex flex-col gap-5 border-border bg-surface p-6 text-foreground shadow-lg outline-none", "transition-[translate] duration-(--glyph-duration-slow) ease-standard"],
+		close: [
+			"absolute top-4 right-4 inline-flex size-7 cursor-pointer items-center justify-center rounded-sm text-muted-foreground hover:bg-muted hover:text-foreground [&>svg]:size-4",
+			transition,
+			focusRing
+		],
+		header: "flex flex-col gap-1.5 pr-8",
+		title: "font-display text-h4 text-foreground",
+		description: "text-small text-muted-foreground",
+		body: "-mx-6 min-h-0 flex-1 overflow-y-auto px-6 text-small",
+		footer: "mt-auto flex flex-col-reverse gap-2 sm:flex-row sm:justify-end"
+	},
+	variants: {
+		side: {
+			right: { content: "inset-y-0 right-0 h-full w-full border-l-(length:--glyph-border-width) starting:translate-x-full" },
+			left: { content: "inset-y-0 left-0 h-full w-full border-r-(length:--glyph-border-width) starting:-translate-x-full" },
+			top: { content: "inset-x-0 top-0 max-h-[85dvh] border-b-(length:--glyph-border-width) starting:-translate-y-full" },
+			bottom: { content: "inset-x-0 bottom-0 max-h-[85dvh] rounded-t-xl border-t-(length:--glyph-border-width) starting:translate-y-full" }
+		},
+		size: {
+			sm: {},
+			md: {},
+			lg: {},
+			xl: {}
+		}
+	},
+	compoundVariants: [
+		{
+			side: ["left", "right"],
+			size: "sm",
+			class: { content: "sm:max-w-sm" }
+		},
+		{
+			side: ["left", "right"],
+			size: "md",
+			class: { content: "sm:max-w-md" }
+		},
+		{
+			side: ["left", "right"],
+			size: "lg",
+			class: { content: "sm:max-w-xl" }
+		},
+		{
+			side: ["left", "right"],
+			size: "xl",
+			class: { content: "sm:max-w-3xl" }
+		}
+	],
+	defaultVariants: {
+		side: "right",
+		size: "md"
+	}
+});
+//#endregion
+//#region src/components/sheet/sheet.tsx
+function useParts() {
+	const [, slots] = useComponentConfig("Sheet", {});
+	return {
+		s: sheetStyles(),
+		slots
+	};
+}
+/** A panel that slides in from an edge: filters, details, settings, mobile navigation. */
+const Sheet = Dialog$1.Root;
+const SheetTrigger = Dialog$1.Trigger;
+const SheetClose = Dialog$1.Close;
+function SheetContent(inProps) {
+	const [props, slots] = useComponentConfig("Sheet", inProps);
+	const { side, size, showClose = true, overlayClassName, className, children, ...rest } = props;
+	const s = sheetStyles({
+		side,
+		size
+	});
+	return /* @__PURE__ */ jsxs(Dialog$1.Portal, { children: [/* @__PURE__ */ jsx(Dialog$1.Overlay, {
+		"data-slot": "sheet-overlay",
+		className: s.overlay({ class: [slots.overlay, overlayClassName] })
+	}), /* @__PURE__ */ jsxs(Dialog$1.Content, {
+		"data-slot": "sheet-content",
+		"data-side": side ?? "right",
+		className: s.content({ class: [slots.content, className] }),
+		...rest,
+		children: [children, showClose && /* @__PURE__ */ jsx(Dialog$1.Close, {
+			"data-slot": "sheet-close",
+			"aria-label": "Close",
+			className: s.close({ class: slots.close }),
+			children: /* @__PURE__ */ jsx(CloseIcon, {})
+		})]
+	})] });
+}
+function SheetHeader({ className, ...props }) {
+	const { s, slots } = useParts();
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "sheet-header",
+		className: s.header({ class: [slots.header, className] }),
+		...props
+	});
+}
+function SheetTitle({ className, ...props }) {
+	const { s, slots } = useParts();
+	return /* @__PURE__ */ jsx(Dialog$1.Title, {
+		"data-slot": "sheet-title",
+		className: s.title({ class: [slots.title, className] }),
+		...props
+	});
+}
+function SheetDescription({ className, ...props }) {
+	const { s, slots } = useParts();
+	return /* @__PURE__ */ jsx(Dialog$1.Description, {
+		"data-slot": "sheet-description",
+		className: s.description({ class: [slots.description, className] }),
+		...props
+	});
+}
+function SheetBody({ className, ...props }) {
+	const { s, slots } = useParts();
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "sheet-body",
+		className: s.body({ class: [slots.body, className] }),
+		...props
+	});
+}
+function SheetFooter({ className, ...props }) {
+	const { s, slots } = useParts();
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "sheet-footer",
+		className: s.footer({ class: [slots.footer, className] }),
+		...props
+	});
+}
+//#endregion
+//#region src/components/slider/slider.styles.ts
+const sliderStyles = tv({
+	slots: {
+		wrapper: "grid w-full gap-1.5",
+		root: "relative flex h-5 w-full touch-none select-none items-center data-disabled:cursor-not-allowed data-disabled:opacity-50",
+		track: "relative h-1.5 w-full grow overflow-hidden rounded-pill bg-muted",
+		range: "absolute h-full bg-primary",
+		thumb: [
+			"relative block size-4 cursor-grab rounded-pill border-2 border-primary bg-background shadow-sm outline-none active:cursor-grabbing",
+			"transition-[box-shadow] duration-(--glyph-duration-fast) ease-standard",
+			"hover:ring-4 hover:ring-ring/15 focus-visible:ring-4 focus-visible:ring-ring/30",
+			"data-disabled:cursor-not-allowed"
+		],
+		value: "pointer-events-none absolute bottom-full left-1/2 mb-2 -translate-x-1/2 whitespace-nowrap rounded-xs bg-secondary px-1.5 py-0.5 font-mono text-caption text-secondary-foreground tabular-nums",
+		marks: "relative h-4 w-full",
+		mark: "absolute top-0 -translate-x-1/2 text-caption text-faint-foreground tabular-nums"
+	},
+	variants: { showValue: { true: { wrapper: "pt-7" } } }
+});
+//#endregion
+//#region src/components/slider/slider.tsx
+const toArray = (value) => value === void 0 ? void 0 : typeof value === "number" ? [value] : [...value];
+/** Choose a number, or a range with two thumbs, by dragging or with arrow keys. */
+function Slider(inProps) {
+	const [props, slots] = useComponentConfig("Slider", useFieldControl(inProps));
+	const { value, defaultValue, onValueChange, onValueCommit, min = 0, max = 100, step = 1, minStepsBetweenThumbs, marks, showValue = false, disabled, name, id, className, thumbLabels = ["Minimum", "Maximum"], "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid } = props;
+	const isRange = Array.isArray(value ?? defaultValue);
+	const fromArray = (next) => isRange ? [next[0], next[1]] : next[0];
+	const current = toArray(value) ?? toArray(defaultValue) ?? [min];
+	const s = sliderStyles({ showValue: Boolean(showValue) });
+	const format = typeof showValue === "function" ? showValue : (n) => n;
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "slider",
+		className: s.wrapper({ class: [slots.wrapper, className] }),
+		children: [/* @__PURE__ */ jsxs(Slider$1.Root, {
+			className: s.root({ class: slots.root }),
+			min,
+			max,
+			step,
+			disabled,
+			name,
+			...minStepsBetweenThumbs !== void 0 && { minStepsBetweenThumbs },
+			...value !== void 0 && { value: toArray(value) },
+			...defaultValue !== void 0 && { defaultValue: toArray(defaultValue) },
+			...onValueChange && { onValueChange: (next) => onValueChange(fromArray(next)) },
+			...onValueCommit && { onValueCommit: (next) => onValueCommit(fromArray(next)) },
+			children: [/* @__PURE__ */ jsx(Slider$1.Track, {
+				className: s.track({ class: slots.track }),
+				children: /* @__PURE__ */ jsx(Slider$1.Range, { className: s.range({ class: slots.range }) })
+			}), current.map((thumbValue, index) => /* @__PURE__ */ jsx(Slider$1.Thumb, {
+				id: index === 0 ? id : void 0,
+				"aria-label": isRange ? thumbLabels[index] : ariaLabel,
+				"aria-describedby": ariaDescribedBy,
+				"aria-invalid": ariaInvalid,
+				className: s.thumb({ class: slots.thumb }),
+				children: showValue && /* @__PURE__ */ jsx("span", {
+					className: s.value({ class: slots.value }),
+					"aria-hidden": "true",
+					children: format(thumbValue)
+				})
+			}, index))]
+		}), marks && marks.length > 0 && /* @__PURE__ */ jsx("div", {
+			className: s.marks({ class: slots.marks }),
+			"aria-hidden": "true",
+			children: marks.map((mark) => {
+				const m = typeof mark === "number" ? { value: mark } : mark;
+				const percent = (m.value - min) / (max - min || 1) * 100;
+				return /* @__PURE__ */ jsx("span", {
+					className: s.mark({ class: slots.mark }),
+					style: { left: `${percent}%` },
+					children: m.label ?? m.value
+				}, m.value);
+			})
+		})]
+	});
+}
+//#endregion
 //#region src/components/stack/stack.tsx
 const stackStyles = tv({
 	base: "flex",
@@ -615,6 +3111,94 @@ function Stack({ direction, gap, align, justify, wrap, asChild, className, ...pr
 	});
 }
 //#endregion
+//#region src/components/stat-card/stat-card.styles.ts
+const statCardStyles = tv({ slots: {
+	root: "gap-2",
+	header: "flex items-center justify-between gap-2",
+	label: "text-small text-muted-foreground",
+	icon: "flex size-8 shrink-0 items-center justify-center rounded-md bg-muted text-muted-foreground [&>svg]:size-4",
+	valueRow: "flex flex-wrap items-baseline gap-x-2 gap-y-1",
+	value: "font-display text-h2 tabular-nums text-foreground",
+	delta: "gap-1 [&>svg]:size-3",
+	description: "text-small text-faint-foreground",
+	chart: "mt-1 min-w-0 text-primary"
+} });
+//#endregion
+//#region src/components/stat-card/stat-card.tsx
+const ArrowUp = () => /* @__PURE__ */ jsx("svg", {
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: "2.5",
+	strokeLinecap: "round",
+	strokeLinejoin: "round",
+	"aria-hidden": "true",
+	children: /* @__PURE__ */ jsx("path", { d: "M7 17 17 7M8 7h9v9" })
+});
+const ArrowDown = () => /* @__PURE__ */ jsx("svg", {
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: "2.5",
+	strokeLinecap: "round",
+	strokeLinejoin: "round",
+	"aria-hidden": "true",
+	children: /* @__PURE__ */ jsx("path", { d: "M7 7l10 10M17 8v9H8" })
+});
+function deltaTone(trend, invert) {
+	if (trend === "neutral") return "neutral";
+	return trend === "up" !== invert ? "success" : "danger";
+}
+/** A key metric with its label, change versus the last period, and an optional chart. */
+function StatCard(inProps) {
+	const [props, slots] = useComponentConfig("StatCard", inProps);
+	const { label, value, delta, trend = "neutral", invertTrend = false, icon, description, chart, className, ...cardProps } = props;
+	const s = statCardStyles();
+	return /* @__PURE__ */ jsxs(Card, {
+		"data-slot": "stat-card",
+		className: s.root({ class: [slots.root, className] }),
+		...cardProps,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: s.header({ class: slots.header }),
+				children: [/* @__PURE__ */ jsx("p", {
+					className: s.label({ class: slots.label }),
+					children: label
+				}), icon && /* @__PURE__ */ jsx("span", {
+					className: s.icon({ class: slots.icon }),
+					"aria-hidden": "true",
+					children: icon
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: s.valueRow({ class: slots.valueRow }),
+				children: [/* @__PURE__ */ jsx("p", {
+					"data-slot": "stat-card-value",
+					className: s.value({ class: slots.value }),
+					children: value
+				}), delta !== void 0 && /* @__PURE__ */ jsxs(Badge, {
+					"data-trend": trend,
+					tone: deltaTone(trend, invertTrend),
+					className: s.delta({ class: slots.delta }),
+					children: [
+						trend === "up" && /* @__PURE__ */ jsx(ArrowUp, {}),
+						trend === "down" && /* @__PURE__ */ jsx(ArrowDown, {}),
+						delta
+					]
+				})]
+			}),
+			description && /* @__PURE__ */ jsx("p", {
+				className: s.description({ class: slots.description }),
+				children: description
+			}),
+			chart && /* @__PURE__ */ jsx("div", {
+				className: s.chart({ class: slots.chart }),
+				children: chart
+			})
+		]
+	});
+}
+//#endregion
 //#region src/components/switch/switch.tsx
 const switchStyles = tv({
 	slots: {
@@ -789,6 +3373,74 @@ function Textarea(inProps) {
 	});
 }
 //#endregion
+//#region src/components/toast/toast.tsx
+const toastStyles = tv({ slots: {
+	toast: ["group flex w-(--width) items-start gap-3 rounded-lg border-border bg-raised p-4 text-small text-foreground shadow-lg", themedBorder],
+	content: "flex min-w-0 flex-1 flex-col gap-0.5",
+	title: "font-medium text-foreground",
+	description: "text-muted-foreground",
+	icon: "mt-0.5 flex size-4 shrink-0 items-center justify-center [&>svg]:size-4",
+	actionButton: [
+		"inline-flex h-7 shrink-0 cursor-pointer items-center rounded-sm bg-primary px-2.5 text-caption font-medium text-primary-foreground hover:bg-primary/88",
+		transition,
+		focusRing
+	],
+	cancelButton: [
+		"inline-flex h-7 shrink-0 cursor-pointer items-center rounded-sm bg-muted px-2.5 text-caption font-medium text-muted-foreground hover:text-foreground",
+		transition,
+		focusRing
+	],
+	closeButton: [
+		"absolute -top-2 -left-2 flex size-5 cursor-pointer items-center justify-center rounded-pill border-border bg-raised text-muted-foreground shadow-xs hover:text-foreground [&>svg]:size-3",
+		themedBorder,
+		focusRing
+	],
+	success: "[&_[data-icon]]:text-success",
+	error: "[&_[data-icon]]:text-danger",
+	warning: "[&_[data-icon]]:text-warning",
+	info: "[&_[data-icon]]:text-info",
+	loading: "[&_[data-icon]]:text-muted-foreground"
+} });
+/**
+* Renders toasts sent with `toast()`. Mount once near the root. Styled entirely by the
+* theme's tokens, so it follows the theme and color mode automatically.
+*
+* ```tsx
+* toast.success('Saved')
+* toast.promise(save(), { loading: 'Saving…', success: 'Saved', error: 'Couldn’t save' })
+* ```
+*/
+function Toaster(inProps) {
+	const [props, slots] = useComponentConfig("Toast", inProps);
+	const { toastOptions, position = "bottom-right", ...rest } = props;
+	const s = toastStyles();
+	const classNames = toastOptions?.classNames ?? {};
+	return /* @__PURE__ */ jsx(Toaster$1, {
+		position,
+		gap: 10,
+		...rest,
+		toastOptions: {
+			...toastOptions,
+			unstyled: true,
+			classNames: {
+				toast: s.toast({ class: [slots.toast, classNames.toast] }),
+				content: s.content({ class: [slots.content, classNames.content] }),
+				title: s.title({ class: [slots.title, classNames.title] }),
+				description: s.description({ class: [slots.description, classNames.description] }),
+				icon: s.icon({ class: [slots.icon, classNames.icon] }),
+				actionButton: s.actionButton({ class: [slots.actionButton, classNames.actionButton] }),
+				cancelButton: s.cancelButton({ class: [slots.cancelButton, classNames.cancelButton] }),
+				closeButton: s.closeButton({ class: [slots.closeButton, classNames.closeButton] }),
+				success: s.success({ class: [slots.success, classNames.success] }),
+				error: s.error({ class: [slots.error, classNames.error] }),
+				warning: s.warning({ class: [slots.warning, classNames.warning] }),
+				info: s.info({ class: [slots.info, classNames.info] }),
+				loading: s.loading({ class: [slots.loading, classNames.loading] })
+			}
+		}
+	});
+}
+//#endregion
 //#region src/components/tooltip/tooltip.tsx
 const tooltipStyles = tv({ slots: { content: "z-50 max-w-xs animate-pop-in rounded-sm bg-secondary px-2 py-1 text-caption text-secondary-foreground shadow-md" } });
 /** A short hint on hover or focus. The child must be focusable (a button or link). */
@@ -811,21 +3463,6 @@ function Tooltip(inProps) {
 	});
 }
 //#endregion
-//#region src/hooks/use-controllable-state.ts
-/** State that can be controlled by a parent (`value` + `onChange`) or left uncontrolled. */
-function useControllableState({ value, defaultValue, onChange }) {
-	const [internal, setInternal] = useState(defaultValue);
-	const isControlled = value !== void 0;
-	const current = isControlled ? value : internal;
-	const onChangeRef = useRef(onChange);
-	onChangeRef.current = onChange;
-	return [current, useCallback((next) => {
-		const resolved = typeof next === "function" ? next(current) : next;
-		if (!isControlled) setInternal(resolved);
-		onChangeRef.current?.(resolved);
-	}, [current, isControlled])];
-}
-//#endregion
 //#region src/hooks/use-media-query.ts
 /** Subscribes to a CSS media query. Returns `fallback` during SSR. */
 function useMediaQuery(query, fallback = false) {
@@ -1121,13 +3758,13 @@ function AppShell(inProps) {
 					className: s.sidebar({ class: slots.sidebar }),
 					children: sidebar
 				}),
-				/* @__PURE__ */ jsx(Dialog.Root, {
+				/* @__PURE__ */ jsx(Dialog$1.Root, {
 					open: mobileOpen,
 					onOpenChange: setMobileOpen,
-					children: /* @__PURE__ */ jsxs(Dialog.Portal, { children: [/* @__PURE__ */ jsx(Dialog.Overlay, { className: s.overlay({ class: slots.overlay }) }), /* @__PURE__ */ jsxs(Dialog.Content, {
+					children: /* @__PURE__ */ jsxs(Dialog$1.Portal, { children: [/* @__PURE__ */ jsx(Dialog$1.Overlay, { className: s.overlay({ class: slots.overlay }) }), /* @__PURE__ */ jsxs(Dialog$1.Content, {
 						className: s.drawer({ class: slots.drawer }),
 						"aria-describedby": void 0,
-						children: [/* @__PURE__ */ jsx(Dialog.Title, {
+						children: [/* @__PURE__ */ jsx(Dialog$1.Title, {
 							className: "sr-only",
 							children: "Navigation"
 						}), /* @__PURE__ */ jsx(AppShellContext.Provider, {
@@ -1191,29 +3828,29 @@ function Navbar(inProps) {
 					className: s.actions({ class: slots.actions }),
 					children: actions
 				}),
-				/* @__PURE__ */ jsxs(Dialog.Root, {
+				/* @__PURE__ */ jsxs(Dialog$1.Root, {
 					open,
 					onOpenChange: setOpen,
-					children: [/* @__PURE__ */ jsx(Dialog.Trigger, {
+					children: [/* @__PURE__ */ jsx(Dialog$1.Trigger, {
 						asChild: true,
 						children: /* @__PURE__ */ jsx(IconButton, {
 							icon: /* @__PURE__ */ jsx(MenuIcon, {}),
 							"aria-label": "Open menu",
 							className: s.menuButton({ class: slots.menuButton })
 						})
-					}), /* @__PURE__ */ jsxs(Dialog.Portal, { children: [/* @__PURE__ */ jsx(Dialog.Overlay, { className: s.overlay({ class: slots.overlay }) }), /* @__PURE__ */ jsxs(Dialog.Content, {
+					}), /* @__PURE__ */ jsxs(Dialog$1.Portal, { children: [/* @__PURE__ */ jsx(Dialog$1.Overlay, { className: s.overlay({ class: slots.overlay }) }), /* @__PURE__ */ jsxs(Dialog$1.Content, {
 						className: s.panel({ class: slots.panel }),
 						"aria-describedby": void 0,
 						children: [
 							/* @__PURE__ */ jsxs("div", {
 								className: s.panelHeader({ class: slots.panelHeader }),
-								children: [/* @__PURE__ */ jsx(Dialog.Title, {
+								children: [/* @__PURE__ */ jsx(Dialog$1.Title, {
 									asChild: true,
 									children: /* @__PURE__ */ jsx("div", {
 										className: s.brand({ class: slots.brand }),
 										children: brand
 									})
-								}), /* @__PURE__ */ jsx(Dialog.Close, {
+								}), /* @__PURE__ */ jsx(Dialog$1.Close, {
 									asChild: true,
 									children: /* @__PURE__ */ jsx(IconButton, {
 										icon: /* @__PURE__ */ jsx(XIcon, {}),
@@ -1476,8 +4113,8 @@ function ThemeStyle({ theme, selector }) {
 }
 //#endregion
 //#region src/provider/glyph-provider.tsx
-/** Provides the theme, color mode and app settings. Render once at the root. */
-function GlyphProvider({ children, theme = glyph, defaultMode, storageKey, linkComponent = "a" }) {
+/** Provides the theme, color mode, tooltips, `useConfirm()` and (optionally) toasts. Render once at the root. */
+function GlyphProvider({ children, theme = glyph, defaultMode, storageKey, linkComponent = "a", toaster = false }) {
 	const value = useMemo(() => ({
 		theme,
 		linkComponent
@@ -1489,7 +4126,7 @@ function GlyphProvider({ children, theme = glyph, defaultMode, storageKey, linkC
 			value,
 			children: [/* @__PURE__ */ jsx(ThemeStyle, { theme }), /* @__PURE__ */ jsx(Tooltip$1.Provider, {
 				delayDuration: 300,
-				children
+				children: /* @__PURE__ */ jsxs(ConfirmProvider, { children: [children, toaster && /* @__PURE__ */ jsx(Toaster, { ...toaster === true ? {} : toaster })] })
 			})]
 		})
 	});
@@ -1526,4 +4163,4 @@ function ThemeScope({ theme, mode, asChild, children, ...props }) {
 	});
 }
 //#endregion
-export { AppShell, Async, Avatar, AvatarGroup, Badge, Button, Card, CardBody, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, ColorModeProvider, ColorModeScript, Container, EmptyState, ErrorState, Eyebrow, Field, FieldContext, GlyphProvider, Heading, IconButton, Input, Kbd, Label, LoadingState, Navbar, PageHeader, Section, SegmentedControl, Select, SelectItem, Separator, Sidebar, SidebarContent, SidebarFooter, SidebarHeader, SidebarItem, SidebarSection, SidebarTrigger, Skeleton, Spinner, Stack, Switch, Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Text, Textarea, ThemeScope, Tooltip, appShellStyles, avatarStyles, badgeStyles, brutalist, buttonStyles, cardStyles, checkboxStyles, cn, containerStyles, defineTheme, editorial, eyebrowStyles, fieldControl, fieldStyles, getColorModeScript, glyph, headingStyles, inputStyles, kbdStyles, labelStyles, navbarStyles, pageHeaderStyles, playful, presets, sectionStyles, segmentedControlStyles, selectStyles, separatorStyles, sidebarStyles, skeletonStyles, spinnerStyles, stackStyles, stateStyles, switchStyles, tableStyles, tabsStyles, textStyles, textareaStyles, themeToCss, tokenVar, tooltipStyles, tv, useAppShell, useAsync, useColorMode, useComponentConfig, useControllableState, useFieldControl, useGlyph, useLinkComponent, useMediaQuery, useScrolled };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, AppShell, AspectRatio, Async, Avatar, AvatarGroup, Badge, Banner, Blockquote, Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, Card, CardBody, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Code, CodeBlock, ColorModeProvider, ColorModeScript, Combobox, Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandMenu, CommandSeparator, ConfirmProvider, Container, DescriptionItem, DescriptionList, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, ErrorState, Eyebrow, Field, FieldContext, GlyphProvider, Grid, Heading, IconButton, Input, Kbd, Label, Link, LoadingState, Navbar, PageHeader, Pagination, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger, Progress, ProgressCircle, Prose, RadioGroup, RadioGroupItem, ScrollArea, Section, SegmentedControl, Select, SelectItem, Separator, Sheet, SheetBody, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarHeader, SidebarItem, SidebarSection, SidebarTrigger, Skeleton, Slider, Spinner, Stack, StatCard, Switch, Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Text, Textarea, ThemeScope, Toaster, Tooltip, accordionStyles, alertDialogStyles, alertStyles, appShellStyles, aspectRatioStyles, avatarStyles, badgeStyles, bannerStyles, blockquoteStyles, breadcrumbStyles, brutalist, buttonStyles, cardStyles, checkboxStyles, cn, codeBlockStyles, codeStyles, comboboxStyles, commandMenuStyles, containerStyles, defineTheme, descriptionListStyles, dialogStyles, dropdownMenuStyles, editorial, eyebrowStyles, fieldControl, fieldStyles, getColorModeScript, glyph, gridStyles, headingStyles, inputStyles, kbdStyles, labelStyles, linkStyles, navbarStyles, pageHeaderStyles, paginationRange, paginationStyles, playful, popoverStyles, presets, progressCircleStyles, progressStyles, proseStyles, radioGroupStyles, scrollAreaStyles, sectionStyles, segmentedControlStyles, selectStyles, separatorStyles, sheetStyles, sidebarStyles, skeletonStyles, sliderStyles, spinnerStyles, stackStyles, statCardStyles, stateStyles, switchStyles, tableStyles, tabsStyles, textStyles, textareaStyles, themeToCss, toast, toastStyles, tokenVar, tooltipStyles, tv, useAppShell, useAsync, useColorMode, useCommandMenuShortcut, useComponentConfig, useConfirm, useControllableState, useFieldControl, useGlyph, useLinkComponent, useMediaQuery, useScrolled };