@glyphui/ui 0.2.0 → 0.4.0

package/dist/index.js

@@ -1,15 +1,22 @@
 "use client";
-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 { a as themedBorder, c as GlyphContext, d as useIsActive, f as useLinkComponent, i as popover, l as neverActive, n as twMergeConfig, o as transition, r as focusRing, s as useComponentConfig, t as tv, u as useGlyph } from "./tv-DLbT66dC.js";
+import { _ as MenuIcon, a as buttonStyles, b as SearchIcon, d as CheckIcon$4, f as ChevronDownIcon$1, h as ChevronsUpDownIcon, i as IconButton, m as ChevronRightIcon$2, n as useFieldControl, o as Spinner, p as ChevronLeftIcon, r as Button, s as spinnerStyles, t as FieldContext, x as XIcon$2, y as PanelLeftIcon } from "./field-context-7I-cWvvS.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-IvhjBgna.js";
+import { i as labelStyles, n as fieldStyles, r as Label, t as Field } from "./field-CVbywksE.js";
+import { n as DEFAULT_STORAGE_KEY, r as getColorModeScript, t as DARK_QUERY } from "./color-mode-script-Bf7LYkOj.js";
 import { defineTheme, defineTheme as defineTheme$1, presets as presets$1, scopeSelector, themeToCss, themeToCss as themeToCss$1, tokenVar } from "@glyphui/tokens";
-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 { Accordion as Accordion$1, AlertDialog as AlertDialog$1, AspectRatio as AspectRatio$1, Avatar as Avatar$1, Collapsible as Collapsible$1, ContextMenu as ContextMenu$1, Dialog as Dialog$1, DropdownMenu as DropdownMenu$1, HoverCard as HoverCard$1, NavigationMenu as NavigationMenu$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, Toggle as Toggle$1, ToggleGroup as ToggleGroup$1, Tooltip as Tooltip$1, VisuallyHidden as VisuallyHidden$1 } from "radix-ui";
+import { Children, 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 { DayPicker } from "react-day-picker";
+import useEmblaCarousel from "embla-carousel-react";
 import { clsx } from "clsx";
 import { extendTailwindMerge } from "tailwind-merge";
+import { Command as Command$1 } from "cmdk";
+import { format, isSameDay } from "date-fns";
+import { OTPInput, OTPInputContext, REGEXP_ONLY_CHARS, REGEXP_ONLY_DIGITS, REGEXP_ONLY_DIGITS_AND_CHARS } from "input-otp";
+import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
+import { Toaster as Toaster$1, toast } from "sonner";
 //#region src/components/accordion/accordion.styles.ts
 const accordionStyles = tv({
 	slots: {
@@ -23,8 +30,8 @@ const accordionStyles = tv({
 			"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"
+		content: "overflow-hidden text-small text-muted-foreground data-[state=open]:animate-collapse-down data-[state=closed]:animate-collapse-up",
+		contentInner: "pb-4"
 	},
 	variants: { variant: {
 		default: { item: "border-b border-border last:border-b-0" },
@@ -38,7 +45,7 @@ const accordionStyles = tv({
 //#endregion
 //#region src/components/accordion/accordion.tsx
 const AccordionContext = createContext(null);
-function useParts$4() {
+function useParts$6() {
 	return useContext(AccordionContext) ?? {
 		s: accordionStyles(),
 		slots: {}
@@ -65,7 +72,7 @@ function Accordion(inProps) {
 	});
 }
 function AccordionItem({ className, ...props }) {
-	const { s, slots } = useParts$4();
+	const { s, slots } = useParts$6();
 	return /* @__PURE__ */ jsx(Accordion$1.Item, {
 		"data-slot": "accordion-item",
 		className: s.item({ class: [slots.item, className] }),
@@ -73,19 +80,19 @@ function AccordionItem({ className, ...props }) {
 	});
 }
 function AccordionTrigger({ className, children, ...props }) {
-	const { s, slots } = useParts$4();
+	const { s, slots } = useParts$6();
 	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 }) })]
+			children: [children, /* @__PURE__ */ jsx(ChevronDownIcon$1, { className: s.chevron({ class: slots.chevron }) })]
 		})
 	});
 }
 function AccordionContent({ className, children, ...props }) {
-	const { s, slots } = useParts$4();
+	const { s, slots } = useParts$6();
 	return /* @__PURE__ */ jsx(Accordion$1.Content, {
 		"data-slot": "accordion-content",
 		className: s.content({ class: slots.content }),
@@ -285,7 +292,7 @@ function Alert(inProps) {
 			}),
 			onDismiss && /* @__PURE__ */ jsx(IconButton, {
 				size: "sm",
-				icon: /* @__PURE__ */ jsx(XIcon, {}),
+				icon: /* @__PURE__ */ jsx(XIcon$2, {}),
 				"aria-label": dismissLabel,
 				onClick: onDismiss,
 				className: s.dismiss({ class: slots.dismiss })
@@ -309,7 +316,7 @@ const alertDialogStyles = tv({ slots: {
 } });
 //#endregion
 //#region src/components/alert-dialog/alert-dialog.tsx
-function useParts$3() {
+function useParts$5() {
 	const [, slots] = useComponentConfig("AlertDialog", {});
 	return {
 		s: alertDialogStyles(),
@@ -336,7 +343,7 @@ function AlertDialogContent(inProps) {
 	})] });
 }
 function AlertDialogHeader({ className, ...props }) {
-	const { s, slots } = useParts$3();
+	const { s, slots } = useParts$5();
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "alert-dialog-header",
 		className: s.header({ class: [slots.header, className] }),
@@ -344,7 +351,7 @@ function AlertDialogHeader({ className, ...props }) {
 	});
 }
 function AlertDialogTitle({ className, ...props }) {
-	const { s, slots } = useParts$3();
+	const { s, slots } = useParts$5();
 	return /* @__PURE__ */ jsx(AlertDialog$1.Title, {
 		"data-slot": "alert-dialog-title",
 		className: s.title({ class: [slots.title, className] }),
@@ -352,7 +359,7 @@ function AlertDialogTitle({ className, ...props }) {
 	});
 }
 function AlertDialogDescription({ className, ...props }) {
-	const { s, slots } = useParts$3();
+	const { s, slots } = useParts$5();
 	return /* @__PURE__ */ jsx(AlertDialog$1.Description, {
 		"data-slot": "alert-dialog-description",
 		className: s.description({ class: [slots.description, className] }),
@@ -360,7 +367,7 @@ function AlertDialogDescription({ className, ...props }) {
 	});
 }
 function AlertDialogFooter({ className, ...props }) {
-	const { s, slots } = useParts$3();
+	const { s, slots } = useParts$5();
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "alert-dialog-footer",
 		className: s.footer({ class: [slots.footer, className] }),
@@ -555,29 +562,29 @@ const tones = {
 		outline: "border-border-strong text-foreground"
 	},
 	primary: {
-		soft: "bg-primary/14 text-[color-mix(in_oklab,var(--color-primary)_62%,var(--color-foreground))]",
+		soft: "bg-primary/14 text-primary-text",
 		solid: "bg-primary text-primary-foreground",
-		outline: "border-primary/50 text-[color-mix(in_oklab,var(--color-primary)_62%,var(--color-foreground))]"
+		outline: "border-primary/50 text-primary-text"
 	},
 	success: {
-		soft: "bg-success/14 text-[color-mix(in_oklab,var(--color-success)_62%,var(--color-foreground))]",
+		soft: "bg-success/14 text-success-text",
 		solid: "bg-success text-success-foreground",
-		outline: "border-success/50 text-[color-mix(in_oklab,var(--color-success)_62%,var(--color-foreground))]"
+		outline: "border-success/50 text-success-text"
 	},
 	warning: {
-		soft: "bg-warning/16 text-[color-mix(in_oklab,var(--color-warning)_62%,var(--color-foreground))]",
+		soft: "bg-warning/14 text-warning-text",
 		solid: "bg-warning text-warning-foreground",
-		outline: "border-warning/50 text-[color-mix(in_oklab,var(--color-warning)_62%,var(--color-foreground))]"
+		outline: "border-warning/50 text-warning-text"
 	},
 	danger: {
-		soft: "bg-danger/14 text-[color-mix(in_oklab,var(--color-danger)_62%,var(--color-foreground))]",
+		soft: "bg-danger/14 text-danger-text",
 		solid: "bg-danger text-danger-foreground",
-		outline: "border-danger/50 text-[color-mix(in_oklab,var(--color-danger)_62%,var(--color-foreground))]"
+		outline: "border-danger/50 text-danger-text"
 	},
 	info: {
-		soft: "bg-info/14 text-[color-mix(in_oklab,var(--color-info)_62%,var(--color-foreground))]",
+		soft: "bg-info/14 text-info-text",
 		solid: "bg-info text-info-foreground",
-		outline: "border-info/50 text-[color-mix(in_oklab,var(--color-info)_62%,var(--color-foreground))]"
+		outline: "border-info/50 text-info-text"
 	}
 };
 const badgeStyles = tv({
@@ -653,10 +660,10 @@ const bannerStyles = tv({
 			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))]" }
+		info: { root: "border-info/25 bg-info/10 text-info-text" },
+		success: { root: "border-success/25 bg-success/10 text-success-text" },
+		warning: { root: "border-warning/30 bg-warning/14 text-warning-text" },
+		danger: { root: "border-danger/25 bg-danger/10 text-danger-text" }
 	} },
 	defaultVariants: { tone: "neutral" }
 });
@@ -713,7 +720,7 @@ function Banner(inProps) {
 				}),
 				dismissible && /* @__PURE__ */ jsx(IconButton, {
 					size: "sm",
-					icon: /* @__PURE__ */ jsx(XIcon, {}),
+					icon: /* @__PURE__ */ jsx(XIcon$2, {}),
 					"aria-label": dismissLabel,
 					onClick: dismiss,
 					className: s.dismiss({ class: slots.dismiss })
@@ -780,17 +787,17 @@ const breadcrumbStyles = tv({ slots: {
 } });
 //#endregion
 //#region src/components/breadcrumb/breadcrumb.tsx
-const s$2 = breadcrumbStyles();
-function useSlots$2() {
+const s$5 = breadcrumbStyles();
+function useSlots$4() {
 	return useComponentConfig("Breadcrumb", {})[1];
 }
 /** Shows where the current page sits in the hierarchy. */
 function Breadcrumb({ items, separator, className, children, ...props }) {
-	const slots = useSlots$2();
+	const slots = useSlots$4();
 	return /* @__PURE__ */ jsx("nav", {
 		"aria-label": "Breadcrumb",
 		"data-slot": "breadcrumb",
-		className: s$2.root({ class: [slots.root, className] }),
+		className: s$5.root({ class: [slots.root, className] }),
 		...props,
 		children: items ? /* @__PURE__ */ jsx(BreadcrumbList, { children: items.map((item, index) => {
 			const last = index === items.length - 1;
@@ -805,25 +812,25 @@ function Breadcrumb({ items, separator, className, children, ...props }) {
 	});
 }
 function BreadcrumbList({ className, ...props }) {
-	const slots = useSlots$2();
+	const slots = useSlots$4();
 	return /* @__PURE__ */ jsx("ol", {
 		"data-slot": "breadcrumb-list",
-		className: s$2.list({ class: [slots.list, className] }),
+		className: s$5.list({ class: [slots.list, className] }),
 		...props
 	});
 }
 function BreadcrumbItem({ className, ...props }) {
-	const slots = useSlots$2();
+	const slots = useSlots$4();
 	return /* @__PURE__ */ jsx("li", {
 		"data-slot": "breadcrumb-item",
-		className: s$2.item({ class: [slots.item, className] }),
+		className: s$5.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] });
+	const slots = useSlots$4();
+	const classes = s$5.link({ class: [slots.link, className] });
 	if (asChild) return /* @__PURE__ */ jsx(Slot.Root, {
 		"data-slot": "breadcrumb-link",
 		className: classes,
@@ -836,23 +843,130 @@ function BreadcrumbLink({ href, className, children, asChild }) {
 	});
 }
 function BreadcrumbPage({ className, ...props }) {
-	const slots = useSlots$2();
+	const slots = useSlots$4();
 	return /* @__PURE__ */ jsx("span", {
 		"data-slot": "breadcrumb-page",
 		"aria-current": "page",
-		className: s$2.page({ class: [slots.page, className] }),
+		className: s$5.page({ class: [slots.page, className] }),
 		...props
 	});
 }
 function BreadcrumbSeparator({ className, children, ...props }) {
-	const slots = useSlots$2();
+	const slots = useSlots$4();
 	return /* @__PURE__ */ jsx("span", {
 		"data-slot": "breadcrumb-separator",
 		role: "presentation",
 		"aria-hidden": "true",
-		className: s$2.separator({ class: [slots.separator, className] }),
+		className: s$5.separator({ class: [slots.separator, className] }),
 		...props,
-		children: children ?? /* @__PURE__ */ jsx(ChevronRightIcon$1, {})
+		children: children ?? /* @__PURE__ */ jsx(ChevronRightIcon$2, {})
+	});
+}
+//#endregion
+//#region src/components/calendar/calendar.styles.ts
+const calendarStyles = tv({ slots: {
+	root: "relative w-fit p-3 text-small text-foreground",
+	months: "relative flex flex-col gap-6 sm:flex-row",
+	month: "grid content-start gap-3",
+	monthCaption: "flex h-8 items-center justify-center px-9",
+	captionLabel: "font-medium text-foreground",
+	nav: "pointer-events-none absolute inset-x-3 top-3 z-10 flex items-center justify-between",
+	navButton: [
+		"pointer-events-auto inline-flex size-8 cursor-pointer items-center justify-center rounded-md text-muted-foreground",
+		"hover:bg-muted hover:text-foreground disabled:pointer-events-none disabled:opacity-40",
+		transition,
+		focusRing
+	],
+	chevron: "size-4",
+	monthGrid: "border-collapse",
+	weekdays: "",
+	weekday: "size-9 p-0 text-caption font-normal text-faint-foreground",
+	weeks: "",
+	week: "",
+	day: "size-9 p-0 text-center align-middle",
+	dayButton: [
+		"inline-flex size-9 cursor-pointer items-center justify-center rounded-md text-small tabular-nums text-foreground",
+		"hover:bg-muted",
+		transition,
+		focusRing
+	],
+	today: "[&>button]:font-semibold [&:not([data-selected])>button]:text-primary-text",
+	selected: "[&>button]:bg-primary [&>button]:text-primary-foreground [&>button]:hover:bg-primary/90",
+	outside: "[&:not([data-selected])>button]:text-faint-foreground",
+	disabled: "[&>button]:pointer-events-none [&>button]:opacity-35 [&>button]:line-through",
+	rangeStart: "rounded-l-md bg-primary/14",
+	rangeMiddle: "bg-primary/14 [&>button]:rounded-none [&>button]:bg-transparent! [&>button]:text-foreground! [&>button]:hover:bg-primary/10!",
+	rangeEnd: "rounded-r-md bg-primary/14",
+	hidden: "invisible",
+	footer: "pt-2 text-small text-muted-foreground"
+} });
+//#endregion
+//#region src/components/calendar/calendar.tsx
+function ChevronIcon({ className, orientation = "left" }) {
+	const d = {
+		left: "m15 18-6-6 6-6",
+		right: "m9 18 6-6-6-6",
+		up: "m18 15-6-6-6 6",
+		down: "m6 9 6 6 6-6"
+	}[orientation];
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		className,
+		children: /* @__PURE__ */ jsx("path", { d })
+	});
+}
+/**
+* A month grid for picking dates, built on react-day-picker and styled by the theme.
+* Supports `mode="single" | "multiple" | "range"`, disabled dates and several months.
+*/
+function Calendar(inProps) {
+	const [props, slots] = useComponentConfig("Calendar", inProps);
+	const { className, classNames, components, showOutsideDays = true, ...rest } = props;
+	const s = calendarStyles();
+	return /* @__PURE__ */ jsx(DayPicker, {
+		showOutsideDays,
+		className: s.root({ class: [slots.root, className] }),
+		classNames: {
+			months: s.months({ class: slots.months }),
+			month: s.month({ class: slots.month }),
+			month_caption: s.monthCaption({ class: slots.monthCaption }),
+			caption_label: s.captionLabel({ class: slots.captionLabel }),
+			nav: s.nav({ class: slots.nav }),
+			button_previous: s.navButton({ class: slots.navButton }),
+			button_next: s.navButton({ class: slots.navButton }),
+			chevron: s.chevron({ class: slots.chevron }),
+			month_grid: s.monthGrid({ class: slots.monthGrid }),
+			weekdays: s.weekdays({ class: slots.weekdays }),
+			weekday: s.weekday({ class: slots.weekday }),
+			weeks: s.weeks({ class: slots.weeks }),
+			week: s.week({ class: slots.week }),
+			day: s.day({ class: slots.day }),
+			day_button: s.dayButton({ class: slots.dayButton }),
+			today: s.today({ class: slots.today }),
+			selected: s.selected({ class: slots.selected }),
+			outside: s.outside({ class: slots.outside }),
+			disabled: s.disabled({ class: slots.disabled }),
+			range_start: s.rangeStart({ class: slots.rangeStart }),
+			range_middle: s.rangeMiddle({ class: slots.rangeMiddle }),
+			range_end: s.rangeEnd({ class: slots.rangeEnd }),
+			hidden: s.hidden({ class: slots.hidden }),
+			footer: s.footer({ class: slots.footer }),
+			...classNames
+		},
+		components: {
+			Chevron: ({ className: chevronClass, orientation }) => /* @__PURE__ */ jsx(ChevronIcon, {
+				className: chevronClass,
+				orientation
+			}),
+			...components
+		},
+		...rest
 	});
 }
 //#endregion
@@ -962,6 +1076,225 @@ function CardFooter({ className, ...props }) {
 	});
 }
 //#endregion
+//#region src/utils/cn.ts
+const twMerge = extendTailwindMerge(twMergeConfig);
+/** Joins class names and resolves Tailwind conflicts (last one wins). */
+function cn(...inputs) {
+	return twMerge(clsx(inputs));
+}
+//#endregion
+//#region src/components/carousel/carousel.styles.ts
+const carouselStyles = tv({
+	slots: {
+		root: "relative",
+		viewport: "overflow-hidden rounded-lg",
+		container: "flex",
+		item: "min-w-0 shrink-0 grow-0 basis-full",
+		control: "absolute z-10 border-border bg-surface/85 shadow-sm backdrop-blur disabled:opacity-0",
+		dots: "mt-3 flex items-center justify-center gap-1.5",
+		dot: [
+			"h-2 w-2 cursor-pointer rounded-pill bg-border-strong",
+			transition,
+			focusRing,
+			"hover:bg-muted-foreground aria-[current=true]:w-5 aria-[current=true]:bg-primary"
+		]
+	},
+	variants: { orientation: {
+		horizontal: {
+			container: "-ml-4",
+			item: "pl-4",
+			control: "top-1/2 -translate-y-1/2"
+		},
+		vertical: {
+			container: "-mt-4 h-full flex-col",
+			item: "pt-4",
+			control: "left-1/2 -translate-x-1/2 [&_svg]:rotate-90"
+		}
+	} },
+	defaultVariants: { orientation: "horizontal" }
+});
+//#endregion
+//#region src/components/carousel/carousel.tsx
+const CarouselContext = createContext(null);
+function useCarousel() {
+	const value = useContext(CarouselContext);
+	if (!value) throw new Error("Carousel parts must be used inside <Carousel>.");
+	return value;
+}
+/**
+* Swipeable, keyboard-accessible slides. Compose with CarouselContent, CarouselItem,
+* CarouselPrevious, CarouselNext and CarouselDots.
+*/
+function Carousel(inProps) {
+	const [props, slots] = useComponentConfig("Carousel", inProps);
+	const { opts, plugins, loop, setApi, orientation = "horizontal", className, children, ...rest } = props;
+	const [viewportRef, api] = useEmblaCarousel({
+		...opts,
+		...loop !== void 0 && { loop },
+		axis: orientation === "horizontal" ? "x" : "y"
+	}, plugins);
+	const [state, setState] = useState({
+		selectedIndex: 0,
+		snapCount: 0,
+		canScrollPrev: false,
+		canScrollNext: false
+	});
+	const sync = useCallback((embla) => {
+		setState({
+			selectedIndex: embla.selectedScrollSnap(),
+			snapCount: embla.scrollSnapList().length,
+			canScrollPrev: embla.canScrollPrev(),
+			canScrollNext: embla.canScrollNext()
+		});
+	}, []);
+	useEffect(() => {
+		if (!api) return;
+		setApi?.(api);
+		sync(api);
+		api.on("select", sync).on("reInit", sync);
+		return () => {
+			api.off("select", sync).off("reInit", sync);
+		};
+	}, [
+		api,
+		setApi,
+		sync
+	]);
+	const scrollPrev = useCallback(() => api?.scrollPrev(), [api]);
+	const scrollNext = useCallback(() => api?.scrollNext(), [api]);
+	const scrollTo = useCallback((index) => api?.scrollTo(index), [api]);
+	const onKeyDownCapture = (event) => {
+		const prevKey = orientation === "horizontal" ? "ArrowLeft" : "ArrowUp";
+		const nextKey = orientation === "horizontal" ? "ArrowRight" : "ArrowDown";
+		if (event.key === prevKey) {
+			event.preventDefault();
+			scrollPrev();
+		} else if (event.key === nextKey) {
+			event.preventDefault();
+			scrollNext();
+		}
+	};
+	const s = carouselStyles({ orientation });
+	return /* @__PURE__ */ jsx(CarouselContext.Provider, {
+		value: {
+			viewportRef,
+			api,
+			orientation,
+			...state,
+			scrollPrev,
+			scrollNext,
+			scrollTo,
+			s,
+			slots
+		},
+		children: /* @__PURE__ */ jsx("section", {
+			"data-slot": "carousel",
+			"aria-roledescription": "carousel",
+			onKeyDownCapture,
+			className: s.root({ class: [slots.root, className] }),
+			...rest,
+			children
+		})
+	});
+}
+const SlideContext = createContext(null);
+function CarouselContent({ className, children, ...props }) {
+	const { viewportRef, s, slots } = useCarousel();
+	const items = Children.toArray(children);
+	return /* @__PURE__ */ jsx("div", {
+		ref: viewportRef,
+		"data-slot": "carousel-viewport",
+		className: s.viewport({ class: slots.viewport }),
+		children: /* @__PURE__ */ jsx("div", {
+			"data-slot": "carousel-content",
+			className: s.container({ class: [slots.container, className] }),
+			...props,
+			children: items.map((child, index) => /* @__PURE__ */ jsx(SlideContext.Provider, {
+				value: {
+					index,
+					total: items.length
+				},
+				children: child
+			}, index))
+		})
+	});
+}
+function CarouselItem({ className, ...props }) {
+	const { s, slots } = useCarousel();
+	const slide = useContext(SlideContext);
+	return /* @__PURE__ */ jsx("div", {
+		role: "group",
+		"aria-roledescription": "slide",
+		"aria-label": slide ? `${slide.index + 1} of ${slide.total}` : void 0,
+		"data-slot": "carousel-item",
+		className: s.item({ class: [slots.item, className] }),
+		...props
+	});
+}
+function Chevron({ direction }) {
+	return /* @__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: direction === "left" ? "m15 18-6-6 6-6" : "m9 18 6-6-6-6" })
+	});
+}
+function CarouselPrevious({ className, icon, ...props }) {
+	const { scrollPrev, canScrollPrev, orientation, s, slots } = useCarousel();
+	return /* @__PURE__ */ jsx(IconButton, {
+		variant: "outline",
+		size: "sm",
+		"aria-label": "Previous slide",
+		icon: icon ?? /* @__PURE__ */ jsx(Chevron, { direction: "left" }),
+		disabled: !canScrollPrev,
+		onClick: scrollPrev,
+		className: s.control({ class: [
+			slots.control,
+			orientation === "horizontal" ? "left-3" : "top-3",
+			className
+		] }),
+		...props
+	});
+}
+function CarouselNext({ className, icon, ...props }) {
+	const { scrollNext, canScrollNext, orientation, s, slots } = useCarousel();
+	return /* @__PURE__ */ jsx(IconButton, {
+		variant: "outline",
+		size: "sm",
+		"aria-label": "Next slide",
+		icon: icon ?? /* @__PURE__ */ jsx(Chevron, { direction: "right" }),
+		disabled: !canScrollNext,
+		onClick: scrollNext,
+		className: s.control({ class: [
+			slots.control,
+			orientation === "horizontal" ? "right-3" : "bottom-3",
+			className
+		] }),
+		...props
+	});
+}
+/** One button per snap point; the current one is highlighted. */
+function CarouselDots({ className, ...props }) {
+	const { snapCount, selectedIndex, scrollTo, s, slots } = useCarousel();
+	if (snapCount < 2) return null;
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "carousel-dots",
+		className: s.dots({ class: [slots.dots, className] }),
+		...props,
+		children: Array.from({ length: snapCount }, (_, index) => /* @__PURE__ */ jsx("button", {
+			type: "button",
+			"aria-label": `Go to slide ${index + 1}`,
+			"aria-current": index === selectedIndex,
+			onClick: () => scrollTo(index),
+			className: cn(s.dot({ class: slots.dot }))
+		}, index))
+	});
+}
+//#endregion
 //#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({
@@ -986,7 +1319,7 @@ function Code(inProps) {
 		...rest
 	});
 }
-const CopyIcon = () => /* @__PURE__ */ jsxs("svg", {
+const CopyIcon$1 = () => /* @__PURE__ */ jsxs("svg", {
 	viewBox: "0 0 24 24",
 	fill: "none",
 	stroke: "currentColor",
@@ -1021,7 +1354,7 @@ function CodeBlock(inProps) {
 	};
 	const copyButton = copyable ? /* @__PURE__ */ jsx(IconButton, {
 		size: "sm",
-		icon: copied ? /* @__PURE__ */ jsx(CheckIcon$1, {}) : /* @__PURE__ */ jsx(CopyIcon, {}),
+		icon: copied ? /* @__PURE__ */ jsx(CheckIcon$4, {}) : /* @__PURE__ */ jsx(CopyIcon$1, {}),
 		"aria-label": copied ? "Copied" : "Copy code",
 		onClick: copy,
 		className: heading ? s.copy({ class: slots.copy }) : s.floatingCopy({ class: slots.floatingCopy })
@@ -1043,6 +1376,43 @@ function CodeBlock(inProps) {
 	});
 }
 //#endregion
+//#region src/components/collapsible/collapsible.tsx
+const collapsibleStyles = tv({ slots: {
+	root: "",
+	trigger: "",
+	content: "overflow-hidden data-[state=closed]:animate-collapse-up data-[state=open]:animate-collapse-down"
+} });
+const s$4 = collapsibleStyles();
+/**
+* Shows and hides one region, e.g. "Show advanced options". For a list of expandable
+* sections use Accordion.
+*/
+function Collapsible(inProps) {
+	const [{ className, ...rest }, slots] = useComponentConfig("Collapsible", inProps);
+	return /* @__PURE__ */ jsx(Collapsible$1.Root, {
+		"data-slot": "collapsible",
+		className: s$4.root({ class: [slots.root, className] }),
+		...rest
+	});
+}
+function CollapsibleTrigger({ className, ...props }) {
+	const [, slots] = useComponentConfig("Collapsible", {});
+	return /* @__PURE__ */ jsx(Collapsible$1.Trigger, {
+		"data-slot": "collapsible-trigger",
+		className: s$4.trigger({ class: [slots.trigger, className] }),
+		...props
+	});
+}
+/** Animates its height open and closed; stays mounted until the closing animation ends. */
+function CollapsibleContent({ className, ...props }) {
+	const [, slots] = useComponentConfig("Collapsible", {});
+	return /* @__PURE__ */ jsx(Collapsible$1.Content, {
+		"data-slot": "collapsible-content",
+		className: s$4.content({ class: [slots.content, className] }),
+		...props
+	});
+}
+//#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 }) {
@@ -1215,7 +1585,7 @@ function Combobox(inProps) {
 										className: s.itemDescription({ class: slots.itemDescription }),
 										children: option.description
 									})]
-								}), checked && /* @__PURE__ */ jsx(CheckIcon$1, { className: s.check({ class: slots.check }) })]
+								}), checked && /* @__PURE__ */ jsx(CheckIcon$4, { className: s.check({ class: slots.check }) })]
 							}, option.value);
 						})]
 					})]
@@ -1260,9 +1630,9 @@ const commandMenuStyles = tv({ slots: {
 } });
 //#endregion
 //#region src/components/command-menu/command-menu.tsx
-const s$1 = commandMenuStyles();
+const s$3 = commandMenuStyles();
 const CommandMenuContext = createContext(null);
-function useSlots$1() {
+function useSlots$3() {
 	return useComponentConfig("CommandMenu", {})[1];
 }
 /**
@@ -1280,10 +1650,10 @@ function CommandMenu(inProps) {
 	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, {
+		children: /* @__PURE__ */ jsxs(Dialog$1.Portal, { children: [/* @__PURE__ */ jsx(Dialog$1.Overlay, { className: s$3.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] }),
+			className: s$3.content({ class: [slots.content, className] }),
 			children: [/* @__PURE__ */ jsx(Dialog$1.Title, {
 				className: "sr-only",
 				children: label
@@ -1301,51 +1671,51 @@ function CommandMenu(inProps) {
 }
 /** The palette without a dialog, for inline search panels. */
 function Command({ className, ...props }) {
-	const slots = useSlots$1();
+	const slots = useSlots$3();
 	return /* @__PURE__ */ jsx(Command$1, {
 		"data-slot": "command",
-		className: s$1.root({ class: [slots.root, className] }),
+		className: s$3.root({ class: [slots.root, className] }),
 		...props
 	});
 }
 function CommandInput({ className, ...props }) {
-	const slots = useSlots$1();
+	const slots = useSlots$3();
 	return /* @__PURE__ */ jsxs("div", {
-		className: s$1.search({ class: slots.search }),
+		className: s$3.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] }),
+			className: s$3.input({ class: [slots.input, className] }),
 			...props
 		})]
 	});
 }
 function CommandList({ className, ...props }) {
-	const slots = useSlots$1();
+	const slots = useSlots$3();
 	return /* @__PURE__ */ jsx(Command$1.List, {
 		"data-slot": "command-list",
-		className: s$1.list({ class: [slots.list, className] }),
+		className: s$3.list({ class: [slots.list, className] }),
 		...props
 	});
 }
 function CommandEmpty({ className, children = "No results", ...props }) {
-	const slots = useSlots$1();
+	const slots = useSlots$3();
 	return /* @__PURE__ */ jsx(Command$1.Empty, {
 		"data-slot": "command-empty",
-		className: s$1.empty({ class: [slots.empty, className] }),
+		className: s$3.empty({ class: [slots.empty, className] }),
 		...props,
 		children
 	});
 }
 function CommandGroup({ className, ...props }) {
-	const slots = useSlots$1();
+	const slots = useSlots$3();
 	return /* @__PURE__ */ jsx(Command$1.Group, {
 		"data-slot": "command-group",
-		className: s$1.group({ class: [slots.group, className] }),
+		className: s$3.group({ class: [slots.group, className] }),
 		...props
 	});
 }
 function CommandItem({ icon, shortcut, closeOnSelect = true, onSelect, className, children, ...props }) {
-	const slots = useSlots$1();
+	const slots = useSlots$3();
 	const menu = useContext(CommandMenuContext);
 	const keys = shortcut === void 0 ? [] : typeof shortcut === "string" ? [shortcut] : shortcut;
 	return /* @__PURE__ */ jsxs(Command$1.Item, {
@@ -1354,20 +1724,20 @@ function CommandItem({ icon, shortcut, closeOnSelect = true, onSelect, className
 			onSelect?.(value);
 			if (closeOnSelect) menu?.close();
 		},
-		className: s$1.item({ class: [slots.item, className] }),
+		className: s$3.item({ class: [slots.item, className] }),
 		...props,
 		children: [
 			icon && /* @__PURE__ */ jsx("span", {
-				className: s$1.itemIcon({ class: slots.itemIcon }),
+				className: s$3.itemIcon({ class: slots.itemIcon }),
 				"aria-hidden": "true",
 				children: icon
 			}),
 			/* @__PURE__ */ jsx("span", {
-				className: s$1.itemLabel({ class: slots.itemLabel }),
+				className: s$3.itemLabel({ class: slots.itemLabel }),
 				children
 			}),
 			keys.length > 0 && /* @__PURE__ */ jsx("span", {
-				className: s$1.shortcut({ class: slots.shortcut }),
+				className: s$3.shortcut({ class: slots.shortcut }),
 				"aria-hidden": "true",
 				children: keys.map((key) => /* @__PURE__ */ jsx(Kbd, { children: key }, key))
 			})
@@ -1375,10 +1745,10 @@ function CommandItem({ icon, shortcut, closeOnSelect = true, onSelect, className
 	});
 }
 function CommandSeparator({ className, ...props }) {
-	const slots = useSlots$1();
+	const slots = useSlots$3();
 	return /* @__PURE__ */ jsx(Command$1.Separator, {
 		"data-slot": "command-separator",
-		className: s$1.separator({ class: [slots.separator, className] }),
+		className: s$3.separator({ class: [slots.separator, className] }),
 		...props
 	});
 }
@@ -1421,89 +1791,631 @@ function Container({ size, asChild, className, ...props }) {
 	});
 }
 //#endregion
-//#region src/components/description-list/description-list.styles.ts
-const descriptionListStyles = tv({
+//#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: {
-		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"
+		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: {
-		layout: {
-			stacked: { root: "gap-4" },
-			inline: { item: "sm:grid-cols-[minmax(0,12rem)_1fr] sm:gap-4" }
+		tone: {
+			default: {},
+			danger: {
+				item: "text-danger-text data-highlighted:bg-danger/10",
+				icon: "text-danger-text"
+			}
 		},
-		dividers: {
-			true: {
-				root: "gap-0 divide-y divide-border",
-				item: "py-3 first:pt-0 last:pb-0"
-			},
-			false: {}
-		}
+		inset: { true: {
+			item: "pl-8",
+			label: "pl-8"
+		} }
 	},
-	compoundVariants: [{
-		layout: "inline",
-		dividers: false,
-		class: { root: "gap-3" }
-	}],
-	defaultVariants: {
-		layout: "stacked",
-		dividers: false
-	}
+	defaultVariants: { tone: "default" }
 });
 //#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
-		})]
-	});
-}
+//#region src/components/context-menu/context-menu.styles.ts
+/** Same look as DropdownMenu; only the available-height variable differs. */
+const contextMenuStyles = tv({
+	extend: dropdownMenuStyles,
+	slots: { content: "max-h-(--radix-context-menu-content-available-height)" }
+});
 //#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",
+//#region src/components/context-menu/context-menu.tsx
+function useParts$4(tone, inset) {
+	const [, slots] = useComponentConfig("ContextMenu", {});
+	return {
+		s: contextMenuStyles({
+			tone,
+			inset
+		}),
+		slots
+	};
+}
+const svg$1 = {
+	xmlns: "http://www.w3.org/2000/svg",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: 2,
+	strokeLinecap: "round",
+	strokeLinejoin: "round"
+};
+const CheckIcon$3 = () => /* @__PURE__ */ jsx("svg", {
+	"aria-hidden": "true",
+	...svg$1,
+	children: /* @__PURE__ */ jsx("path", { d: "M20 6 9 17l-5-5" })
+});
+const DotIcon$1 = () => /* @__PURE__ */ jsx("svg", {
+	"aria-hidden": "true",
+	...svg$1,
+	children: /* @__PURE__ */ jsx("circle", {
+		cx: "12",
+		cy: "12",
+		r: "4",
+		fill: "currentColor"
+	})
+});
+const ChevronRightIcon$1 = () => /* @__PURE__ */ jsx("svg", {
+	"aria-hidden": "true",
+	...svg$1,
+	children: /* @__PURE__ */ jsx("path", { d: "m9 18 6-6-6-6" })
+});
+/** A menu opened by right-click or long-press on an area. Same items as DropdownMenu. */
+const ContextMenu = ContextMenu$1.Root;
+const ContextMenuTrigger = ContextMenu$1.Trigger;
+const ContextMenuGroup = ContextMenu$1.Group;
+const ContextMenuRadioGroup = ContextMenu$1.RadioGroup;
+const ContextMenuSub = ContextMenu$1.Sub;
+function ContextMenuContent(inProps) {
+	const [props, slots] = useComponentConfig("ContextMenu", inProps);
+	const { className, ...rest } = props;
+	const s = contextMenuStyles();
+	return /* @__PURE__ */ jsx(ContextMenu$1.Portal, { children: /* @__PURE__ */ jsx(ContextMenu$1.Content, {
+		"data-slot": "context-menu-content",
+		className: s.content({ class: [slots.content, className] }),
+		...rest
+	}) });
+}
+function ContextMenuItem({ icon, shortcut, tone, inset, className, children, ...props }) {
+	const { s, slots } = useParts$4(tone, inset);
+	return /* @__PURE__ */ jsxs(ContextMenu$1.Item, {
+		"data-slot": "context-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(ContextMenuShortcut, { children: shortcut })
+		]
+	});
+}
+function ContextMenuCheckboxItem({ className, children, ...props }) {
+	const { s, slots } = useParts$4(void 0, true);
+	return /* @__PURE__ */ jsxs(ContextMenu$1.CheckboxItem, {
+		"data-slot": "context-menu-checkbox-item",
+		className: s.item({ class: [slots.item, className] }),
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: s.indicator({ class: slots.indicator }),
+			children: /* @__PURE__ */ jsx(ContextMenu$1.ItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon$3, {}) })
+		}), children]
+	});
+}
+function ContextMenuRadioItem({ className, children, ...props }) {
+	const { s, slots } = useParts$4(void 0, true);
+	return /* @__PURE__ */ jsxs(ContextMenu$1.RadioItem, {
+		"data-slot": "context-menu-radio-item",
+		className: s.item({ class: [slots.item, className] }),
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: s.indicator({ class: slots.indicator }),
+			children: /* @__PURE__ */ jsx(ContextMenu$1.ItemIndicator, { children: /* @__PURE__ */ jsx(DotIcon$1, {}) })
+		}), children]
+	});
+}
+function ContextMenuLabel({ inset, className, ...props }) {
+	const { s, slots } = useParts$4(void 0, inset);
+	return /* @__PURE__ */ jsx(ContextMenu$1.Label, {
+		"data-slot": "context-menu-label",
+		className: s.label({ class: [slots.label, className] }),
+		...props
+	});
+}
+function ContextMenuSeparator({ className, ...props }) {
+	const { s, slots } = useParts$4();
+	return /* @__PURE__ */ jsx(ContextMenu$1.Separator, {
+		"data-slot": "context-menu-separator",
+		className: s.separator({ class: [slots.separator, className] }),
+		...props
+	});
+}
+function ContextMenuShortcut({ className, ...props }) {
+	const { s, slots } = useParts$4();
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "context-menu-shortcut",
+		className: s.shortcut({ class: [slots.shortcut, className] }),
+		...props
+	});
+}
+function ContextMenuSubTrigger({ icon, className, children, ...props }) {
+	const { s, slots } = useParts$4();
+	return /* @__PURE__ */ jsxs(ContextMenu$1.SubTrigger, {
+		"data-slot": "context-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$1, {})
+			})
+		]
+	});
+}
+function ContextMenuSubContent({ className, ...props }) {
+	const { s, slots } = useParts$4();
+	return /* @__PURE__ */ jsx(ContextMenu$1.Portal, { children: /* @__PURE__ */ jsx(ContextMenu$1.SubContent, {
+		"data-slot": "context-menu-sub-content",
+		className: s.subContent({ class: [slots.subContent, className] }),
+		...props
+	}) });
+}
+//#endregion
+//#region src/components/copy-button/copy-button.tsx
+const copyButtonStyles = tv({ slots: {
+	base: "",
+	icon: "size-4",
+	status: "sr-only"
+} });
+const icon$1 = {
+	xmlns: "http://www.w3.org/2000/svg",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: 2,
+	strokeLinecap: "round",
+	strokeLinejoin: "round"
+};
+const CopyIcon = ({ className }) => /* @__PURE__ */ jsxs("svg", {
+	"aria-hidden": "true",
+	...icon$1,
+	className,
+	children: [/* @__PURE__ */ jsx("rect", {
+		width: "13",
+		height: "13",
+		x: "9",
+		y: "9",
+		rx: "2"
+	}), /* @__PURE__ */ jsx("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" })]
+});
+const CheckIcon$2 = ({ className }) => /* @__PURE__ */ jsx("svg", {
+	"aria-hidden": "true",
+	...icon$1,
+	className,
+	children: /* @__PURE__ */ jsx("path", { d: "M20 6 9 17l-5-5" })
+});
+/** Copies a value to the clipboard and confirms it visually and to screen readers. */
+function CopyButton(inProps) {
+	const [props, slots] = useComponentConfig("CopyButton", inProps);
+	const { value, children, copiedLabel = "Copied", timeout = 1500, onCopy, variant = "outline", className, "aria-label": ariaLabel, ...rest } = props;
+	const [copied, setCopied] = useState(false);
+	const timer = useRef(void 0);
+	const s = copyButtonStyles();
+	useEffect(() => () => clearTimeout(timer.current), []);
+	const copy = async () => {
+		try {
+			await navigator.clipboard.writeText(value);
+		} catch {
+			return;
+		}
+		setCopied(true);
+		onCopy?.(value);
+		clearTimeout(timer.current);
+		timer.current = setTimeout(() => setCopied(false), timeout);
+	};
+	const glyph = copied ? /* @__PURE__ */ jsx(CheckIcon$2, { className: s.icon({ class: slots.icon }) }) : /* @__PURE__ */ jsx(CopyIcon, { className: s.icon({ class: slots.icon }) });
+	const iconOnly = children === void 0;
+	return /* @__PURE__ */ jsxs(Button, {
+		"data-slot": "copy-button",
+		"data-copied": copied || void 0,
+		variant,
+		iconOnly,
+		onClick: copy,
+		className: s.base({ class: [slots.base, className] }),
+		"aria-label": iconOnly ? copied ? copiedLabel : ariaLabel ?? "Copy" : ariaLabel,
+		...!iconOnly && { leftIcon: glyph },
+		...rest,
+		children: [iconOnly ? glyph : copied ? copiedLabel : children, /* @__PURE__ */ jsx("span", {
+			role: "status",
+			className: s.status({ class: slots.status }),
+			children: copied ? copiedLabel : ""
+		})]
+	});
+}
+//#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/date-picker/date-picker.styles.ts
+const datePickerStyles = tv({
+	slots: {
+		trigger: [
+			...fieldControl,
+			"flex cursor-pointer items-center 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"
+		],
+		icon: "size-4 shrink-0 text-faint-foreground",
+		value: "min-w-0 flex-1 truncate",
+		placeholder: "min-w-0 flex-1 truncate text-faint-foreground",
+		clear: "inline-flex size-5 shrink-0 cursor-pointer items-center justify-center rounded-xs text-faint-foreground hover:bg-muted hover:text-foreground [&>svg]:size-3.5",
+		content: [popover, "w-auto p-0"],
+		layout: "flex flex-col sm:flex-row",
+		presets: "flex gap-1 overflow-x-auto border-b border-border p-2 sm:w-40 sm:flex-col sm:overflow-visible sm:border-r sm:border-b-0",
+		preset: "shrink-0 cursor-pointer rounded-sm px-2 py-1.5 text-left text-small whitespace-nowrap text-muted-foreground hover:bg-muted hover:text-foreground data-[active=true]:bg-muted data-[active=true]:text-foreground"
+	},
+	variants: { size: {
+		sm: { trigger: "h-(--glyph-control-sm) text-small" },
+		md: { trigger: "h-(--glyph-control-md) text-small" },
+		lg: { trigger: "h-(--glyph-control-lg) text-body" }
+	} },
+	defaultVariants: { size: "md" }
+});
+//#endregion
+//#region src/components/date-picker/date-picker.tsx
+function CalendarIcon({ className }) {
+	return /* @__PURE__ */ jsxs("svg", {
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		className,
+		children: [/* @__PURE__ */ jsx("rect", {
+			x: "3",
+			y: "4",
+			width: "18",
+			height: "18",
+			rx: "2"
+		}), /* @__PURE__ */ jsx("path", { d: "M16 2v4M8 2v4M3 10h18" })]
+	});
+}
+function ClearIcon() {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsx("path", { d: "M18 6 6 18M6 6l12 12" })
+	});
+}
+function disabledMatchers({ minDate, maxDate, disabledDates }) {
+	const list = [];
+	if (minDate) list.push({ before: minDate });
+	if (maxDate) list.push({ after: maxDate });
+	if (disabledDates) list.push(...Array.isArray(disabledDates) ? disabledDates : [disabledDates]);
+	return list;
+}
+const iso = (date) => format(date, "yyyy-MM-dd");
+/** A date field that opens a calendar. Works with Field and with `Form` (`value` + `onValueChange`). */
+function DatePicker(inProps) {
+	const [props, slots] = useComponentConfig("DatePicker", useFieldControl(inProps));
+	const { value: valueProp, defaultValue, onValueChange, placeholder = "Pick a date", format: format$1 = "MMM d, yyyy", clearable = false, size, disabled, name, id, className, contentClassName, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid } = props;
+	const [open, setOpen] = useState(false);
+	const [value, setValue] = useControllableState({
+		value: valueProp,
+		defaultValue,
+		onChange: onValueChange
+	});
+	const current = "value" in inProps ? valueProp : value;
+	const s = datePickerStyles({ size });
+	return /* @__PURE__ */ jsxs(Popover, {
+		open,
+		onOpenChange: setOpen,
+		children: [
+			/* @__PURE__ */ jsx(PopoverTrigger, {
+				asChild: true,
+				children: /* @__PURE__ */ jsxs("button", {
+					type: "button",
+					id,
+					"data-slot": "date-picker",
+					disabled,
+					"aria-label": ariaLabel,
+					"aria-describedby": ariaDescribedBy,
+					"aria-invalid": ariaInvalid,
+					className: s.trigger({ class: [slots.trigger, className] }),
+					children: [
+						/* @__PURE__ */ jsx(CalendarIcon, { className: s.icon({ class: slots.icon }) }),
+						current ? /* @__PURE__ */ jsx("span", {
+							className: s.value({ class: slots.value }),
+							children: format(current, format$1)
+						}) : /* @__PURE__ */ jsx("span", {
+							className: s.placeholder({ class: slots.placeholder }),
+							children: placeholder
+						}),
+						clearable && current && !disabled && /* @__PURE__ */ jsx("span", {
+							role: "button",
+							tabIndex: 0,
+							"aria-label": "Clear date",
+							className: s.clear({ class: slots.clear }),
+							onPointerDown: (event) => event.stopPropagation(),
+							onClick: (event) => {
+								event.stopPropagation();
+								setValue(void 0);
+							},
+							onKeyDown: (event) => {
+								if (event.key === "Enter" || event.key === " ") {
+									event.preventDefault();
+									event.stopPropagation();
+									setValue(void 0);
+								}
+							},
+							children: /* @__PURE__ */ jsx(ClearIcon, {})
+						})
+					]
+				})
+			}),
+			/* @__PURE__ */ jsx(PopoverContent, {
+				align: "start",
+				className: s.content({ class: [slots.content, contentClassName] }),
+				children: /* @__PURE__ */ jsx(Calendar, {
+					mode: "single",
+					selected: current,
+					defaultMonth: current,
+					disabled: disabledMatchers(props),
+					onSelect: (date) => {
+						setValue(date);
+						if (date) setOpen(false);
+					},
+					autoFocus: true
+				})
+			}),
+			name && /* @__PURE__ */ jsx("input", {
+				type: "hidden",
+				name,
+				value: current ? iso(current) : ""
+			})
+		]
+	});
+}
+function formatRange(range, format$2) {
+	if (!range.from) return "";
+	if (!range.to || isSameDay(range.from, range.to)) return format(range.from, format$2);
+	return `${format(range.from, format$2)} – ${format(range.to, format$2)}`;
+}
+/** A date-range field with a two-month calendar and optional presets. */
+function DateRangePicker(inProps) {
+	const [props, slots] = useComponentConfig("DatePicker", useFieldControl(inProps));
+	const { value: valueProp, defaultValue, onValueChange, presets, numberOfMonths = 2, placeholder = "Pick a date range", format = "MMM d, yyyy", clearable = false, size, disabled, name, id, className, contentClassName, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid } = props;
+	const [open, setOpen] = useState(false);
+	const [value, setValue] = useControllableState({
+		value: valueProp,
+		defaultValue,
+		onChange: onValueChange
+	});
+	const current = "value" in inProps ? valueProp : value;
+	const s = datePickerStyles({ size });
+	const label = current ? formatRange(current, format) : "";
+	return /* @__PURE__ */ jsxs(Popover, {
+		open,
+		onOpenChange: setOpen,
+		children: [
+			/* @__PURE__ */ jsx(PopoverTrigger, {
+				asChild: true,
+				children: /* @__PURE__ */ jsxs("button", {
+					type: "button",
+					id,
+					"data-slot": "date-range-picker",
+					disabled,
+					"aria-label": ariaLabel,
+					"aria-describedby": ariaDescribedBy,
+					"aria-invalid": ariaInvalid,
+					className: s.trigger({ class: [slots.trigger, className] }),
+					children: [
+						/* @__PURE__ */ jsx(CalendarIcon, { className: s.icon({ class: slots.icon }) }),
+						label ? /* @__PURE__ */ jsx("span", {
+							className: s.value({ class: slots.value }),
+							children: label
+						}) : /* @__PURE__ */ jsx("span", {
+							className: s.placeholder({ class: slots.placeholder }),
+							children: placeholder
+						}),
+						clearable && current?.from && !disabled && /* @__PURE__ */ jsx("span", {
+							role: "button",
+							tabIndex: 0,
+							"aria-label": "Clear dates",
+							className: s.clear({ class: slots.clear }),
+							onPointerDown: (event) => event.stopPropagation(),
+							onClick: (event) => {
+								event.stopPropagation();
+								setValue(void 0);
+							},
+							onKeyDown: (event) => {
+								if (event.key === "Enter" || event.key === " ") {
+									event.preventDefault();
+									event.stopPropagation();
+									setValue(void 0);
+								}
+							},
+							children: /* @__PURE__ */ jsx(ClearIcon, {})
+						})
+					]
+				})
+			}),
+			/* @__PURE__ */ jsx(PopoverContent, {
+				align: "start",
+				className: s.content({ class: [slots.content, contentClassName] }),
+				children: /* @__PURE__ */ jsxs("div", {
+					className: s.layout({ class: slots.layout }),
+					children: [presets && presets.length > 0 && /* @__PURE__ */ jsx("div", {
+						className: s.presets({ class: slots.presets }),
+						children: presets.map((preset) => /* @__PURE__ */ jsx("button", {
+							type: "button",
+							className: s.preset({ class: slots.preset }),
+							onClick: () => {
+								setValue(preset.range());
+								setOpen(false);
+							},
+							children: preset.label
+						}, preset.label))
+					}), /* @__PURE__ */ jsx(Calendar, {
+						mode: "range",
+						selected: current,
+						defaultMonth: current?.from,
+						numberOfMonths,
+						disabled: disabledMatchers(props),
+						onSelect: (range) => setValue(range),
+						autoFocus: true
+					})]
+				})
+			}),
+			name && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("input", {
+				type: "hidden",
+				name: `${name}.from`,
+				value: current?.from ? iso(current.from) : ""
+			}), /* @__PURE__ */ jsx("input", {
+				type: "hidden",
+				name: `${name}.to`,
+				value: current?.to ? iso(current.to) : ""
+			})] })
+		]
+	});
+}
+//#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",
@@ -1547,7 +2459,7 @@ const dialogStyles = tv({
 });
 //#endregion
 //#region src/components/dialog/dialog.tsx
-function useParts$2() {
+function useParts$3() {
 	const [, slots] = useComponentConfig("Dialog", {});
 	return {
 		s: dialogStyles(),
@@ -1578,7 +2490,7 @@ function DialogContent(inProps) {
 	})] });
 }
 function DialogHeader({ className, ...props }) {
-	const { s, slots } = useParts$2();
+	const { s, slots } = useParts$3();
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "dialog-header",
 		className: s.header({ class: [slots.header, className] }),
@@ -1586,7 +2498,7 @@ function DialogHeader({ className, ...props }) {
 	});
 }
 function DialogTitle({ className, ...props }) {
-	const { s, slots } = useParts$2();
+	const { s, slots } = useParts$3();
 	return /* @__PURE__ */ jsx(Dialog$1.Title, {
 		"data-slot": "dialog-title",
 		className: s.title({ class: [slots.title, className] }),
@@ -1594,7 +2506,7 @@ function DialogTitle({ className, ...props }) {
 	});
 }
 function DialogDescription({ className, ...props }) {
-	const { s, slots } = useParts$2();
+	const { s, slots } = useParts$3();
 	return /* @__PURE__ */ jsx(Dialog$1.Description, {
 		"data-slot": "dialog-description",
 		className: s.description({ class: [slots.description, className] }),
@@ -1602,7 +2514,7 @@ function DialogDescription({ className, ...props }) {
 	});
 }
 function DialogBody({ className, ...props }) {
-	const { s, slots } = useParts$2();
+	const { s, slots } = useParts$3();
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "dialog-body",
 		className: s.body({ class: [slots.body, className] }),
@@ -1610,7 +2522,7 @@ function DialogBody({ className, ...props }) {
 	});
 }
 function DialogFooter({ className, ...props }) {
-	const { s, slots } = useParts$2();
+	const { s, slots } = useParts$3();
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "dialog-footer",
 		className: s.footer({ class: [slots.footer, className] }),
@@ -1618,42 +2530,8 @@ function DialogFooter({ 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) {
+function useParts$2(tone, inset) {
 	const [, slots] = useComponentConfig("DropdownMenu", {});
 	return {
 		s: dropdownMenuStyles({
@@ -1672,7 +2550,7 @@ const svg = {
 	strokeLinecap: "round",
 	strokeLinejoin: "round"
 };
-const CheckIcon = () => /* @__PURE__ */ jsx("svg", {
+const CheckIcon$1 = () => /* @__PURE__ */ jsx("svg", {
 	"aria-hidden": "true",
 	...svg,
 	children: /* @__PURE__ */ jsx("path", { d: "M20 6 9 17l-5-5" })
@@ -1711,7 +2589,7 @@ function DropdownMenuContent(inProps) {
 	}) });
 }
 function DropdownMenuItem({ icon, shortcut, tone, inset, className, children, ...props }) {
-	const { s, slots } = useParts$1(tone, inset);
+	const { s, slots } = useParts$2(tone, inset);
 	return /* @__PURE__ */ jsxs(DropdownMenu$1.Item, {
 		"data-slot": "dropdown-menu-item",
 		"data-tone": tone ?? "default",
@@ -1729,19 +2607,19 @@ function DropdownMenuItem({ icon, shortcut, tone, inset, className, children, ..
 	});
 }
 function DropdownMenuCheckboxItem({ className, children, ...props }) {
-	const { s, slots } = useParts$1(void 0, true);
+	const { s, slots } = useParts$2(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: /* @__PURE__ */ jsx(DropdownMenu$1.ItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon$1, {}) })
 		}), children]
 	});
 }
 function DropdownMenuRadioItem({ className, children, ...props }) {
-	const { s, slots } = useParts$1(void 0, true);
+	const { s, slots } = useParts$2(void 0, true);
 	return /* @__PURE__ */ jsxs(DropdownMenu$1.RadioItem, {
 		"data-slot": "dropdown-menu-radio-item",
 		className: s.item({ class: [slots.item, className] }),
@@ -1753,7 +2631,7 @@ function DropdownMenuRadioItem({ className, children, ...props }) {
 	});
 }
 function DropdownMenuLabel({ inset, className, ...props }) {
-	const { s, slots } = useParts$1(void 0, inset);
+	const { s, slots } = useParts$2(void 0, inset);
 	return /* @__PURE__ */ jsx(DropdownMenu$1.Label, {
 		"data-slot": "dropdown-menu-label",
 		className: s.label({ class: [slots.label, className] }),
@@ -1761,7 +2639,7 @@ function DropdownMenuLabel({ inset, className, ...props }) {
 	});
 }
 function DropdownMenuSeparator({ className, ...props }) {
-	const { s, slots } = useParts$1();
+	const { s, slots } = useParts$2();
 	return /* @__PURE__ */ jsx(DropdownMenu$1.Separator, {
 		"data-slot": "dropdown-menu-separator",
 		className: s.separator({ class: [slots.separator, className] }),
@@ -1769,7 +2647,7 @@ function DropdownMenuSeparator({ className, ...props }) {
 	});
 }
 function DropdownMenuShortcut({ className, ...props }) {
-	const { s, slots } = useParts$1();
+	const { s, slots } = useParts$2();
 	return /* @__PURE__ */ jsx("span", {
 		"data-slot": "dropdown-menu-shortcut",
 		className: s.shortcut({ class: [slots.shortcut, className] }),
@@ -1777,7 +2655,7 @@ function DropdownMenuShortcut({ className, ...props }) {
 	});
 }
 function DropdownMenuSubTrigger({ icon, className, children, ...props }) {
-	const { s, slots } = useParts$1();
+	const { s, slots } = useParts$2();
 	return /* @__PURE__ */ jsxs(DropdownMenu$1.SubTrigger, {
 		"data-slot": "dropdown-menu-sub-trigger",
 		className: s.subTrigger({ class: [slots.subTrigger, className] }),
@@ -1797,7 +2675,7 @@ function DropdownMenuSubTrigger({ icon, className, children, ...props }) {
 	});
 }
 function DropdownMenuSubContent({ sideOffset = 4, className, ...props }) {
-	const { s, slots } = useParts$1();
+	const { s, slots } = useParts$2();
 	return /* @__PURE__ */ jsx(DropdownMenu$1.Portal, { children: /* @__PURE__ */ jsx(DropdownMenu$1.SubContent, {
 		"data-slot": "dropdown-menu-sub-content",
 		sideOffset,
@@ -1811,7 +2689,7 @@ const eyebrowStyles = tv({
 	slots: { base: "font-mono text-caption uppercase tracking-[0.12em]" },
 	variants: { tone: {
 		muted: { base: "text-muted-foreground" },
-		primary: { base: "text-primary" }
+		primary: { base: "text-primary-text" }
 	} },
 	defaultVariants: { tone: "muted" }
 });
@@ -1830,6 +2708,290 @@ function Eyebrow(inProps) {
 	});
 }
 //#endregion
+//#region src/components/file-upload/file-upload.styles.ts
+const fileUploadStyles = tv({ slots: {
+	root: "grid gap-3",
+	dropzone: [
+		"flex w-full cursor-pointer flex-col items-center justify-center gap-2 rounded-lg border-dashed border-border-strong bg-subtle px-6 py-8 text-center",
+		themedBorder,
+		transition,
+		focusRing,
+		"hover:border-primary/60 hover:bg-primary/4",
+		"data-[dragging=true]:border-primary data-[dragging=true]:bg-primary/8",
+		"disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-danger"
+	],
+	icon: "flex size-10 items-center justify-center rounded-md border border-border bg-surface text-muted-foreground shadow-xs [&>svg]:size-5",
+	title: "text-small font-medium text-foreground",
+	highlight: "text-primary-text",
+	hint: "text-caption text-faint-foreground",
+	rejections: "grid gap-1 text-small font-medium text-danger-text",
+	list: "grid gap-2",
+	item: ["grid grid-cols-[auto_1fr_auto] items-center gap-3 rounded-md border-border bg-surface px-3 py-2.5", themedBorder],
+	fileIcon: "flex size-8 items-center justify-center rounded-sm bg-muted text-muted-foreground [&>svg]:size-4",
+	fileText: "grid min-w-0 gap-1",
+	fileName: "truncate text-small font-medium text-foreground",
+	fileMeta: "text-caption tabular-nums text-faint-foreground",
+	fileError: "text-caption font-medium text-danger-text",
+	progress: "h-1 overflow-hidden rounded-pill bg-muted",
+	progressBar: "h-full rounded-pill bg-primary transition-[width] duration-(--glyph-duration-base)"
+} });
+//#endregion
+//#region src/components/file-upload/file-upload.tsx
+/** Formats bytes for people: 1 KB = 1024 bytes. */
+function formatBytes(bytes) {
+	if (bytes < 1024) return `${bytes} B`;
+	const units = [
+		"KB",
+		"MB",
+		"GB",
+		"TB"
+	];
+	let value = bytes / 1024;
+	let unit = 0;
+	while (value >= 1024 && unit < units.length - 1) {
+		value /= 1024;
+		unit++;
+	}
+	return `${value >= 10 ? Math.round(value) : value.toFixed(1)} ${units[unit]}`;
+}
+/** Matches a file against an `accept` string like `"image/*,.pdf,application/zip"`. */
+function matchesAccept(file, accept) {
+	if (!accept) return true;
+	const name = file.name.toLowerCase();
+	const type = file.type.toLowerCase();
+	return accept.split(",").map((rule) => rule.trim().toLowerCase()).filter(Boolean).some((rule) => {
+		if (rule.startsWith(".")) return name.endsWith(rule);
+		if (rule.endsWith("/*")) return type.startsWith(rule.slice(0, -1));
+		return type === rule;
+	});
+}
+let counter = 0;
+const newId = () => `file-${Date.now().toString(36)}-${(counter++).toString(36)}`;
+function UploadIcon() {
+	return /* @__PURE__ */ jsxs("svg", {
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		children: [/* @__PURE__ */ jsx("path", { d: "M12 16V4M7 9l5-5 5 5" }), /* @__PURE__ */ jsx("path", { d: "M20 16v2a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-2" })]
+	});
+}
+function FileIcon() {
+	return /* @__PURE__ */ jsxs("svg", {
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		children: [/* @__PURE__ */ jsx("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z" }), /* @__PURE__ */ jsx("path", { d: "M14 2v6h6" })]
+	});
+}
+function XIcon$1() {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsx("path", { d: "M18 6 6 18M6 6l12 12" })
+	});
+}
+/**
+* Drag-and-drop or click to choose files, with type, size and count checks and a file
+* list. It does no uploading: you get `File` objects and can set `progress` and `error`
+* on each item while your own code uploads them.
+*/
+function FileUpload(inProps) {
+	const [props, slots] = useComponentConfig("FileUpload", useFieldControl(inProps));
+	const { files: filesProp, defaultFiles = [], onFilesChange, onReject, accept, maxSize, maxFiles, multiple = true, disabled, label, hint, id, className, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid } = props;
+	const [files, setFiles] = useControllableState({
+		value: filesProp,
+		defaultValue: defaultFiles,
+		onChange: onFilesChange
+	});
+	const [dragging, setDragging] = useState(false);
+	const [rejections, setRejections] = useState([]);
+	const inputRef = useRef(null);
+	const hintId = useId();
+	const rejectionsId = useId();
+	const s = fileUploadStyles();
+	const limit = multiple ? maxFiles ?? Number.POSITIVE_INFINITY : 1;
+	const full = files.length >= limit;
+	const addFiles = (incoming) => {
+		const accepted = [];
+		const rejected = [];
+		let room = limit - (multiple ? files.length : 0);
+		for (const file of incoming) if (!matchesAccept(file, accept)) rejected.push({
+			file,
+			reason: "wrong-type",
+			message: `${file.name} isn't an allowed file type.`
+		});
+		else if (maxSize !== void 0 && file.size > maxSize) rejected.push({
+			file,
+			reason: "too-large",
+			message: `${file.name} is too large (${formatBytes(file.size)}). The limit is ${formatBytes(maxSize)}.`
+		});
+		else if (room <= 0) rejected.push({
+			file,
+			reason: "too-many",
+			message: `${file.name} wasn't added: the limit is ${limit} file${limit === 1 ? "" : "s"}.`
+		});
+		else {
+			accepted.push({
+				id: newId(),
+				file
+			});
+			room--;
+		}
+		if (accepted.length > 0) setFiles(multiple ? [...files, ...accepted] : accepted);
+		setRejections(rejected);
+		if (rejected.length > 0) onReject?.(rejected);
+	};
+	const onDrop = (event) => {
+		event.preventDefault();
+		setDragging(false);
+		if (disabled) return;
+		addFiles(Array.from(event.dataTransfer.files));
+	};
+	const defaultHint = [
+		accept ? `Accepted: ${accept.split(",").map((a) => a.trim()).join(", ")}` : null,
+		maxSize !== void 0 ? `up to ${formatBytes(maxSize)} each` : null,
+		multiple && maxFiles !== void 0 ? `max ${maxFiles} files` : null
+	].filter(Boolean).join(" · ");
+	const describedBy = [
+		ariaDescribedBy,
+		hintId,
+		rejections.length > 0 ? rejectionsId : void 0
+	].filter(Boolean).join(" ") || void 0;
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "file-upload",
+		className: s.root({ class: [slots.root, className] }),
+		children: [
+			/* @__PURE__ */ jsxs("button", {
+				type: "button",
+				id,
+				"data-dragging": dragging,
+				disabled: disabled || full,
+				"aria-describedby": describedBy,
+				"aria-invalid": ariaInvalid,
+				className: s.dropzone({ class: slots.dropzone }),
+				onClick: () => inputRef.current?.click(),
+				onDragEnter: (event) => {
+					event.preventDefault();
+					if (!disabled) setDragging(true);
+				},
+				onDragOver: (event) => event.preventDefault(),
+				onDragLeave: (event) => {
+					if (!event.currentTarget.contains(event.relatedTarget)) setDragging(false);
+				},
+				onDrop,
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: s.icon({ class: slots.icon }),
+						children: /* @__PURE__ */ jsx(UploadIcon, {})
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: s.title({ class: slots.title }),
+						children: label ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+							"Drop ",
+							multiple ? "files" : "a file",
+							" here or",
+							" ",
+							/* @__PURE__ */ jsx("span", {
+								className: s.highlight({ class: slots.highlight }),
+								children: "browse"
+							})
+						] })
+					}),
+					/* @__PURE__ */ jsx("span", {
+						id: hintId,
+						className: s.hint({ class: slots.hint }),
+						children: full ? "File limit reached. Remove a file to add another." : hint ?? defaultHint
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx("input", {
+				ref: inputRef,
+				type: "file",
+				tabIndex: -1,
+				"aria-hidden": "true",
+				className: "sr-only",
+				accept,
+				multiple,
+				disabled,
+				onChange: (event) => {
+					addFiles(Array.from(event.target.files ?? []));
+					event.target.value = "";
+				}
+			}),
+			rejections.length > 0 && /* @__PURE__ */ jsx("ul", {
+				id: rejectionsId,
+				role: "alert",
+				className: s.rejections({ class: slots.rejections }),
+				children: rejections.map((r) => /* @__PURE__ */ jsx("li", { children: r.message }, `${r.file.name}-${r.reason}`))
+			}),
+			files.length > 0 && /* @__PURE__ */ jsx("ul", {
+				className: s.list({ class: slots.list }),
+				"aria-label": "Selected files",
+				children: files.map((item) => /* @__PURE__ */ jsxs("li", {
+					"data-slot": "file-upload-item",
+					className: s.item({ class: slots.item }),
+					children: [
+						/* @__PURE__ */ jsx("span", {
+							className: s.fileIcon({ class: slots.fileIcon }),
+							children: /* @__PURE__ */ jsx(FileIcon, {})
+						}),
+						/* @__PURE__ */ jsxs("span", {
+							className: s.fileText({ class: slots.fileText }),
+							children: [
+								/* @__PURE__ */ jsx("span", {
+									className: s.fileName({ class: slots.fileName }),
+									children: item.file.name
+								}),
+								item.error ? /* @__PURE__ */ jsx("span", {
+									className: s.fileError({ class: slots.fileError }),
+									children: item.error
+								}) : /* @__PURE__ */ jsxs("span", {
+									className: s.fileMeta({ class: slots.fileMeta }),
+									children: [formatBytes(item.file.size), item.progress !== void 0 && item.progress < 100 && ` · ${Math.round(item.progress)}%`]
+								}),
+								item.progress !== void 0 && item.progress < 100 && !item.error && /* @__PURE__ */ jsx("span", {
+									role: "progressbar",
+									"aria-label": `Uploading ${item.file.name}`,
+									"aria-valuemin": 0,
+									"aria-valuemax": 100,
+									"aria-valuenow": Math.round(item.progress),
+									className: s.progress({ class: slots.progress }),
+									children: /* @__PURE__ */ jsx("span", {
+										className: s.progressBar({ class: slots.progressBar }),
+										style: { width: `${Math.max(0, Math.min(100, item.progress))}%` }
+									})
+								})
+							]
+						}),
+						/* @__PURE__ */ jsx(IconButton, {
+							size: "sm",
+							icon: /* @__PURE__ */ jsx(XIcon$1, {}),
+							"aria-label": `Remove ${item.file.name}`,
+							disabled,
+							onClick: () => {
+								setFiles(files.filter((f) => f.id !== item.id));
+								setRejections([]);
+							}
+						})
+					]
+				}, item.id))
+			})
+		]
+	});
+}
+//#endregion
 //#region src/components/grid/grid.tsx
 const colClasses = {
 	base: {
@@ -1949,38 +3111,162 @@ function Grid(inProps) {
 		...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/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/hover-card/hover-card.tsx
+const hoverCardStyles = tv({ slots: { content: [popover, "w-72 max-w-[calc(100vw-2rem)] p-4 text-small outline-none"] } });
+/**
+* A rich preview shown while hovering or focusing a link, such as a user or repository card.
+* Sighted mouse users only see it on hover; keep the same information reachable elsewhere.
+*/
+const HoverCard = HoverCard$1.Root;
+const HoverCardTrigger = HoverCard$1.Trigger;
+function HoverCardContent(inProps) {
+	const [props, slots] = useComponentConfig("HoverCard", inProps);
+	const { sideOffset = 6, align = "center", className, ...rest } = props;
+	return /* @__PURE__ */ jsx(HoverCard$1.Portal, { children: /* @__PURE__ */ jsx(HoverCard$1.Content, {
+		"data-slot": "hover-card-content",
+		sideOffset,
+		align,
+		className: hoverCardStyles().content({ class: [slots.content, className] }),
+		...rest
+	}) });
+}
+//#endregion
+//#region src/components/input-otp/input-otp.styles.ts
+const inputOtpStyles = tv({
+	slots: {
+		root: "flex items-center gap-2 has-disabled:opacity-50",
+		input: "disabled:cursor-not-allowed",
+		group: "flex items-center",
+		slot: [
+			"relative flex items-center justify-center border-input bg-surface font-medium tabular-nums text-foreground shadow-xs",
+			"border-y-(length:--glyph-border-width) border-r-(length:--glyph-border-width)",
+			"first:rounded-l-md first:border-l-(length:--glyph-border-width) last:rounded-r-md",
+			"data-[active=true]:z-10 data-[active=true]:border-ring data-[active=true]:ring-3 data-[active=true]:ring-ring/20",
+			"aria-invalid:border-danger",
+			transition
+		],
+		caret: "pointer-events-none absolute inset-0 flex items-center justify-center",
+		caretBar: "h-4 w-px animate-pulse bg-foreground",
+		separator: "flex items-center text-faint-foreground [&>svg]:size-4"
+	},
+	variants: { size: {
+		sm: { slot: "size-8 text-small" },
+		md: { slot: "size-10 text-body" },
+		lg: { slot: "size-12 text-h4" }
+	} },
+	defaultVariants: { size: "md" }
+});
+//#endregion
+//#region src/components/input-otp/input-otp.tsx
+const PartsContext = createContext(null);
+function useParts$1() {
+	return useContext(PartsContext) ?? {
+		s: inputOtpStyles(),
+		slots: {},
+		invalid: false
+	};
+}
+/**
+* One-time code input: one box per character, paste support, and autofill from SMS on
+* mobile. Built on input-otp. Restrict characters with `pattern`, e.g. `REGEXP_ONLY_DIGITS`.
+*/
+function InputOTP(inProps) {
+	const [props, slots] = useComponentConfig("InputOTP", useFieldControl(inProps));
+	const { length = 6, size, children, className, containerClassName, ...rest } = props;
+	const s = inputOtpStyles({ size });
+	const invalid = rest["aria-invalid"] === true || rest["aria-invalid"] === "true";
+	return /* @__PURE__ */ jsx(PartsContext.Provider, {
+		value: {
+			s,
+			slots,
+			invalid
+		},
+		children: /* @__PURE__ */ jsx(OTPInput, {
+			"data-slot": "input-otp",
+			maxLength: length,
+			autoComplete: "one-time-code",
+			inputMode: "numeric",
+			containerClassName: s.root({ class: [slots.root, containerClassName] }),
+			className: s.input({ class: [slots.input, className] }),
+			...rest,
+			children: children ?? /* @__PURE__ */ jsx(InputOTPGroup, { children: Array.from({ length }, (_, index) => /* @__PURE__ */ jsx(InputOTPSlot, { index }, index)) })
+		})
+	});
+}
+function InputOTPGroup({ className, ...props }) {
+	const { s, slots } = useParts$1();
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "input-otp-group",
+		className: s.group({ class: [slots.group, className] }),
+		...props
+	});
+}
+function InputOTPSlot({ index, className, ...props }) {
+	const { s, slots, invalid } = useParts$1();
+	const slot = useContext(OTPInputContext).slots[index];
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "input-otp-slot",
+		"data-active": slot?.isActive ?? false,
+		"aria-invalid": invalid || void 0,
+		className: s.slot({ class: [slots.slot, className] }),
+		...props,
+		children: [slot?.char ?? slot?.placeholderChar, slot?.hasFakeCaret && /* @__PURE__ */ jsx("div", {
+			className: s.caret({ class: slots.caret }),
+			children: /* @__PURE__ */ jsx("div", { className: s.caretBar({ class: slots.caretBar }) })
+		})]
+	});
+}
+function InputOTPSeparator({ className, ...props }) {
+	const { s, slots } = useParts$1();
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "input-otp-separator",
+		"aria-hidden": "true",
+		className: s.separator({ class: [slots.separator, className] }),
+		...props,
+		children: /* @__PURE__ */ jsx("svg", {
+			viewBox: "0 0 24 24",
+			fill: "none",
+			stroke: "currentColor",
+			strokeWidth: "2",
+			strokeLinecap: "round",
+			"aria-hidden": "true",
+			children: /* @__PURE__ */ jsx("path", { d: "M6 12h12" })
+		})
 	});
 }
 //#endregion
@@ -1999,7 +3285,7 @@ const linkStyles = tv({
 		tone: {
 			default: { base: "text-foreground" },
 			muted: { base: "text-muted-foreground hover:text-foreground" },
-			primary: { base: "text-primary" }
+			primary: { base: "text-primary-text" }
 		},
 		underline: {
 			hover: { base: "bg-[length:0%_1px] hover:bg-[length:100%_1px] focus-visible:bg-[length:100%_1px]" },
@@ -2064,6 +3350,406 @@ function Link(inProps) {
 	});
 }
 //#endregion
+//#region src/components/modal/modal.styles.ts
+/** Modal is built from Dialog parts; these slots add Modal-specific classes on top. */
+const modalStyles = tv({ slots: {
+	content: "",
+	header: "",
+	body: "grid gap-4",
+	footer: "",
+	/** Wraps body and footer when `onSubmit` is set; `contents` keeps the dialog layout. */
+	form: "contents"
+} });
+//#endregion
+//#region src/components/modal/modal.tsx
+/**
+* The everyday modal in one component: title, description, body and footer as props.
+* For custom layouts use the Dialog parts; for yes/no decisions use `useConfirm()`.
+*/
+function Modal(inProps) {
+	const [props, slots] = useComponentConfig("Modal", inProps);
+	const { open, defaultOpen, onOpenChange, title, description, trigger, footer, closeOnOverlayClick = true, onSubmit, onPointerDownOutside, className, children, ...rest } = props;
+	const s = modalStyles();
+	const content = /* @__PURE__ */ jsxs(Fragment$1, { children: [children && /* @__PURE__ */ jsx(DialogBody, {
+		className: s.body({ class: slots.body }),
+		children
+	}), footer && /* @__PURE__ */ jsx(DialogFooter, {
+		className: s.footer({ class: slots.footer }),
+		children: footer
+	})] });
+	return /* @__PURE__ */ jsxs(Dialog, {
+		...open !== void 0 && { open },
+		...defaultOpen !== void 0 && { defaultOpen },
+		...onOpenChange && { onOpenChange },
+		children: [trigger && /* @__PURE__ */ jsx(DialogTrigger, {
+			asChild: true,
+			children: trigger
+		}), /* @__PURE__ */ jsxs(DialogContent, {
+			"data-slot": "modal",
+			className: s.content({ class: [slots.content, className] }),
+			onPointerDownOutside: (event) => {
+				onPointerDownOutside?.(event);
+				if (!closeOnOverlayClick) event.preventDefault();
+			},
+			...!description && { "aria-describedby": void 0 },
+			...rest,
+			children: [/* @__PURE__ */ jsxs(DialogHeader, {
+				className: s.header({ class: slots.header }),
+				children: [/* @__PURE__ */ jsx(DialogTitle, { children: title }), description && /* @__PURE__ */ jsx(DialogDescription, { children: description })]
+			}), onSubmit ? /* @__PURE__ */ jsx("form", {
+				"data-slot": "modal-form",
+				className: s.form({ class: slots.form }),
+				onSubmit: (event) => {
+					event.preventDefault();
+					onSubmit(event);
+				},
+				children: content
+			}) : content]
+		})]
+	});
+}
+/** Closes the surrounding Modal. Use with `asChild` around a button. */
+const ModalClose = DialogClose;
+//#endregion
+//#region src/components/navigation-menu/navigation-menu.styles.ts
+const topLevel = [
+	"group inline-flex h-9 cursor-pointer select-none items-center justify-center gap-1 rounded-md px-3 text-small font-medium text-muted-foreground",
+	transition,
+	focusRing,
+	"hover:bg-muted hover:text-foreground data-[state=open]:bg-muted data-[state=open]:text-foreground",
+	"data-active:text-foreground"
+];
+const navigationMenuStyles = tv({ slots: {
+	root: "relative z-10 flex max-w-max flex-1 items-center justify-center",
+	list: "group flex flex-1 list-none items-center justify-center gap-1",
+	item: "relative",
+	trigger: topLevel,
+	chevron: "size-3 text-faint-foreground transition-transform duration-(--glyph-duration-base) ease-standard group-data-[state=open]:rotate-180",
+	content: "top-0 left-0 w-full p-2 animate-fade-in md:absolute md:w-auto",
+	viewportWrapper: "absolute top-full left-0 flex justify-center",
+	viewport: [
+		"relative mt-1.5 h-(--radix-navigation-menu-viewport-height) w-[calc(100vw-2rem)] origin-top overflow-hidden rounded-lg border-border bg-raised text-foreground shadow-lg animate-pop-in",
+		"md:w-(--radix-navigation-menu-viewport-width)",
+		"transition-[width,height] duration-(--glyph-duration-base) ease-standard",
+		themedBorder
+	],
+	link: topLevel,
+	card: [
+		"flex select-none gap-3 rounded-md p-3 text-foreground no-underline outline-none",
+		transition,
+		focusRing,
+		"hover:bg-muted focus-visible:bg-muted"
+	],
+	cardIcon: "flex size-9 shrink-0 items-center justify-center rounded-md border border-border bg-surface text-muted-foreground shadow-xs [&_svg]:size-4",
+	cardText: "grid min-w-0 gap-0.5",
+	cardTitle: "text-small font-medium text-foreground",
+	cardDescription: "text-small text-muted-foreground"
+} });
+//#endregion
+//#region src/components/navigation-menu/navigation-menu.tsx
+const s$2 = navigationMenuStyles();
+function useSlots$2() {
+	return useComponentConfig("NavigationMenu", {})[1];
+}
+const ChevronDownIcon = ({ className }) => /* @__PURE__ */ jsx("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: "2",
+	strokeLinecap: "round",
+	strokeLinejoin: "round",
+	"aria-hidden": "true",
+	className,
+	children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" })
+});
+/**
+* Site navigation with dropdown panels (mega menus) for marketing headers.
+* Keyboard: Tab between items, arrows inside panels, Escape to close.
+*/
+function NavigationMenu(inProps) {
+	const [props, slots] = useComponentConfig("NavigationMenu", inProps);
+	const { viewport = true, className, children, ...rest } = props;
+	return /* @__PURE__ */ jsxs(NavigationMenu$1.Root, {
+		"data-slot": "navigation-menu",
+		className: s$2.root({ class: [slots.root, className] }),
+		...rest,
+		children: [children, viewport && /* @__PURE__ */ jsx(NavigationMenuViewport, {})]
+	});
+}
+function NavigationMenuList({ className, ...props }) {
+	const slots = useSlots$2();
+	return /* @__PURE__ */ jsx(NavigationMenu$1.List, {
+		"data-slot": "navigation-menu-list",
+		className: s$2.list({ class: [slots.list, className] }),
+		...props
+	});
+}
+function NavigationMenuItem({ className, ...props }) {
+	const slots = useSlots$2();
+	return /* @__PURE__ */ jsx(NavigationMenu$1.Item, {
+		"data-slot": "navigation-menu-item",
+		className: s$2.item({ class: [slots.item, className] }),
+		...props
+	});
+}
+function NavigationMenuTrigger({ className, children, ...props }) {
+	const slots = useSlots$2();
+	return /* @__PURE__ */ jsxs(NavigationMenu$1.Trigger, {
+		"data-slot": "navigation-menu-trigger",
+		className: s$2.trigger({ class: [slots.trigger, className] }),
+		...props,
+		children: [children, /* @__PURE__ */ jsx(ChevronDownIcon, { className: s$2.chevron({ class: slots.chevron }) })]
+	});
+}
+function NavigationMenuContent({ className, ...props }) {
+	const slots = useSlots$2();
+	return /* @__PURE__ */ jsx(NavigationMenu$1.Content, {
+		"data-slot": "navigation-menu-content",
+		className: s$2.content({ class: [slots.content, className] }),
+		...props
+	});
+}
+function NavigationMenuViewport({ className, ...props }) {
+	const slots = useSlots$2();
+	return /* @__PURE__ */ jsx("div", {
+		className: s$2.viewportWrapper({ class: slots.viewportWrapper }),
+		children: /* @__PURE__ */ jsx(NavigationMenu$1.Viewport, {
+			"data-slot": "navigation-menu-viewport",
+			className: s$2.viewport({ class: [slots.viewport, className] }),
+			...props
+		})
+	});
+}
+/**
+* A top-level link (no panel). Marked active automatically from the provider's `router`;
+* set `active` to override.
+*/
+function NavigationMenuLink({ href, active: activeProp, className, children, ...props }) {
+	const slots = useSlots$2();
+	const Link = useLinkComponent();
+	const active = useIsActive(href, { explicit: activeProp });
+	const cls = s$2.link({ class: [slots.link, className] });
+	if (href === void 0) return /* @__PURE__ */ jsx(NavigationMenu$1.Link, {
+		"data-slot": "navigation-menu-link",
+		className: cls,
+		active,
+		...props,
+		children
+	});
+	return /* @__PURE__ */ jsx(NavigationMenu$1.Link, {
+		"data-slot": "navigation-menu-link",
+		asChild: true,
+		active,
+		...props,
+		children: /* @__PURE__ */ jsx(Link, {
+			href,
+			className: cls,
+			children
+		})
+	});
+}
+/** A link tile for mega-menu panels: icon, title and one line of description. */
+function NavigationMenuCard({ href, title, description, icon, className }) {
+	const slots = useSlots$2();
+	const Link = useLinkComponent();
+	return /* @__PURE__ */ jsx(NavigationMenu$1.Link, {
+		"data-slot": "navigation-menu-card",
+		asChild: true,
+		children: /* @__PURE__ */ jsxs(Link, {
+			href,
+			className: s$2.card({ class: [slots.card, className] }),
+			children: [icon && /* @__PURE__ */ jsx("span", {
+				className: s$2.cardIcon({ class: slots.cardIcon }),
+				"aria-hidden": "true",
+				children: icon
+			}), /* @__PURE__ */ jsxs("span", {
+				className: s$2.cardText({ class: slots.cardText }),
+				children: [/* @__PURE__ */ jsx("span", {
+					className: s$2.cardTitle({ class: slots.cardTitle }),
+					children: title
+				}), description && /* @__PURE__ */ jsx("span", {
+					className: s$2.cardDescription({ class: slots.cardDescription }),
+					children: description
+				})]
+			})]
+		})
+	});
+}
+//#endregion
+//#region src/components/number-input/number-input.styles.ts
+const numberInputStyles = tv({
+	slots: {
+		root: [
+			...fieldControl,
+			"flex items-center gap-2 pl-3",
+			"focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/20",
+			"data-invalid:focus-within:ring-danger/20",
+			"has-[input:disabled]:cursor-not-allowed has-[input:disabled]:opacity-50"
+		],
+		input: "h-full w-full min-w-0 bg-transparent tabular-nums text-foreground outline-none placeholder:text-faint-foreground disabled:cursor-not-allowed",
+		adornment: "flex shrink-0 items-center text-faint-foreground [&>svg]:size-4",
+		steppers: "flex h-full shrink-0 items-stretch border-l border-input",
+		stepper: [
+			"inline-flex w-8 cursor-pointer items-center justify-center text-muted-foreground hover:bg-muted hover:text-foreground",
+			"disabled:pointer-events-none disabled:opacity-40 [&>svg]:size-3.5 last:rounded-r-[calc(var(--radius-md)-1px)]",
+			focusRing
+		]
+	},
+	variants: { size: {
+		sm: { root: "h-(--glyph-control-sm) text-small" },
+		md: { root: "h-(--glyph-control-md) text-small" },
+		lg: {
+			root: "h-(--glyph-control-lg) text-body",
+			stepper: "w-10"
+		}
+	} },
+	defaultVariants: { size: "md" }
+});
+//#endregion
+//#region src/components/number-input/number-input.tsx
+function clamp(value, min, max) {
+	return Math.min(max ?? Number.POSITIVE_INFINITY, Math.max(min ?? Number.NEGATIVE_INFINITY, value));
+}
+/** Parses user text leniently: keeps digits, one leading minus and the decimal point. */
+function parse(text) {
+	const cleaned = text.replace(/[^\d.-]/g, "").replace(/(?!^)-/g, "");
+	if (cleaned === "" || cleaned === "-" || cleaned === ".") return null;
+	const n = Number(cleaned);
+	return Number.isFinite(n) ? n : null;
+}
+/** Round away float noise from repeated steps (0.1 + 0.2). */
+function roundToStep(value, step) {
+	const decimals = (String(step).split(".")[1] ?? "").length;
+	return Number(value.toFixed(Math.min(decimals + 2, 10)));
+}
+/**
+* A number field with − / + steppers, arrow-key stepping, min/max clamping on blur, and
+* locale formatting when not focused. The value is a `number`, never a string.
+*/
+function NumberInput(inProps) {
+	const [props, slots] = useComponentConfig("NumberInput", useFieldControl(inProps));
+	const { value: valueProp, defaultValue = null, onValueChange, min, max, step = 1, formatOptions, locale, prefix, suffix, hideSteppers = false, size, className, inputClassName, disabled, readOnly, onBlur, onFocus, onKeyDown, ...rest } = props;
+	const [value, setValue] = useControllableState({
+		value: valueProp,
+		defaultValue,
+		onChange: onValueChange
+	});
+	const [draft, setDraft] = useState(null);
+	const s = numberInputStyles({ size });
+	const invalid = rest["aria-invalid"] === true || rest["aria-invalid"] === "true";
+	const display = draft ?? (value === null || value === void 0 ? "" : formatOptions ? new Intl.NumberFormat(locale, formatOptions).format(value) : String(value));
+	const commit = (next) => {
+		setValue(next === null ? null : roundToStep(clamp(next, min, max), step));
+	};
+	const stepBy = (direction, multiplier = 1) => {
+		const base = draft !== null ? parse(draft) : value;
+		commit((base ?? min ?? 0) + direction * step * multiplier);
+		setDraft(null);
+	};
+	const handleKeyDown = (event) => {
+		onKeyDown?.(event);
+		if (event.defaultPrevented || readOnly) return;
+		const multiplier = event.shiftKey ? 10 : 1;
+		if (event.key === "ArrowUp") {
+			event.preventDefault();
+			stepBy(1, multiplier);
+		} else if (event.key === "ArrowDown") {
+			event.preventDefault();
+			stepBy(-1, multiplier);
+		} else if (event.key === "Home" && min !== void 0) {
+			event.preventDefault();
+			commit(min);
+			setDraft(null);
+		} else if (event.key === "End" && max !== void 0) {
+			event.preventDefault();
+			commit(max);
+			setDraft(null);
+		} else if (event.key === "Enter" && draft !== null) {
+			commit(parse(draft));
+			setDraft(null);
+		}
+	};
+	const atMin = value !== null && value !== void 0 && min !== void 0 && value <= min;
+	const atMax = value !== null && value !== void 0 && max !== void 0 && value >= max;
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "number-input",
+		"data-invalid": invalid || void 0,
+		className: s.root({ class: [slots.root, className] }),
+		children: [
+			prefix && /* @__PURE__ */ jsx("span", {
+				className: s.adornment({ class: slots.adornment }),
+				children: prefix
+			}),
+			/* @__PURE__ */ jsx("input", {
+				type: "text",
+				inputMode: "decimal",
+				role: "spinbutton",
+				"aria-valuenow": value ?? void 0,
+				"aria-valuemin": min,
+				"aria-valuemax": max,
+				autoComplete: "off",
+				disabled,
+				readOnly,
+				value: display,
+				className: s.input({ class: [slots.input, inputClassName] }),
+				onFocus: (event) => {
+					setDraft(value === null || value === void 0 ? "" : String(value));
+					onFocus?.(event);
+				},
+				onChange: (event) => setDraft(event.target.value),
+				onBlur: (event) => {
+					if (draft !== null) commit(parse(draft));
+					setDraft(null);
+					onBlur?.(event);
+				},
+				onKeyDown: handleKeyDown,
+				...rest
+			}),
+			suffix && /* @__PURE__ */ jsx("span", {
+				className: s.adornment({ class: slots.adornment }),
+				children: suffix
+			}),
+			!hideSteppers && /* @__PURE__ */ jsxs("span", {
+				className: s.steppers({ class: slots.steppers }),
+				children: [/* @__PURE__ */ jsx("button", {
+					type: "button",
+					tabIndex: -1,
+					"aria-label": "Decrease",
+					disabled: disabled || readOnly || atMin,
+					className: s.stepper({ class: slots.stepper }),
+					onClick: () => stepBy(-1),
+					children: /* @__PURE__ */ jsx("svg", {
+						viewBox: "0 0 24 24",
+						fill: "none",
+						stroke: "currentColor",
+						strokeWidth: "2",
+						strokeLinecap: "round",
+						"aria-hidden": "true",
+						children: /* @__PURE__ */ jsx("path", { d: "M5 12h14" })
+					})
+				}), /* @__PURE__ */ jsx("button", {
+					type: "button",
+					tabIndex: -1,
+					"aria-label": "Increase",
+					disabled: disabled || readOnly || atMax,
+					className: s.stepper({ class: slots.stepper }),
+					onClick: () => stepBy(1),
+					children: /* @__PURE__ */ jsx("svg", {
+						viewBox: "0 0 24 24",
+						fill: "none",
+						stroke: "currentColor",
+						strokeWidth: "2",
+						strokeLinecap: "round",
+						"aria-hidden": "true",
+						children: /* @__PURE__ */ jsx("path", { d: "M12 5v14M5 12h14" })
+					})
+				})]
+			})
+		]
+	});
+}
+//#endregion
 //#region src/components/pagination/pagination.styles.ts
 const paginationStyles = tv({
 	slots: {
@@ -2205,39 +3891,127 @@ function Pagination(inProps) {
 					"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, {})) }),
+				/* @__PURE__ */ jsx("li", { children: control(current + 1, "Next page", /* @__PURE__ */ jsx(ChevronRightIcon$2, {})) }),
 				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 })
+//#region src/components/password-input/password-input.styles.ts
+const passwordInputStyles = tv({
+	slots: {
+		root: "grid gap-1.5",
+		toggle: ["-mr-1 inline-flex size-7 cursor-pointer items-center justify-center rounded-sm text-faint-foreground hover:bg-muted hover:text-foreground [&>svg]:size-4", focusRing],
+		meter: "flex items-center gap-2",
+		bars: "grid flex-1 grid-cols-3 gap-1",
+		bar: "h-1 rounded-pill bg-muted transition-colors duration-(--glyph-duration-base)",
+		label: "w-14 text-right text-caption text-muted-foreground"
+	},
+	variants: { strength: {
+		weak: { label: "text-danger-text" },
+		fair: { label: "text-warning-text" },
+		strong: { label: "text-success-text" }
+	} }
+});
+//#endregion
+//#region src/components/password-input/password-input.tsx
+/**
+* A quick strength estimate from length and character variety. A hint for users,
+* not a security check: enforce real rules on the server.
+*/
+function passwordStrength(password) {
+	let score = 0;
+	if (password.length >= 8) score++;
+	if (password.length >= 12) score++;
+	if (/[a-z]/.test(password) && /[A-Z]/.test(password)) score++;
+	if (/\d/.test(password)) score++;
+	if (/[^A-Za-z0-9]/.test(password)) score++;
+	return {
+		score,
+		strength: score >= 4 ? "strong" : score >= 3 ? "fair" : "weak"
+	};
+}
+const filled = {
+	weak: 1,
+	fair: 2,
+	strong: 3
+};
+const barColor = {
+	weak: "bg-danger",
+	fair: "bg-warning",
+	strong: "bg-success"
+};
+const labels = {
+	weak: "Weak",
+	fair: "Fair",
+	strong: "Strong"
+};
+function EyeIcon({ off }) {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		children: off ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("path", { d: "M10.7 5.1A10.4 10.4 0 0 1 12 5c7 0 10 7 10 7a13 13 0 0 1-1.7 2.7M6.6 6.6A13.5 13.5 0 0 0 2 12s3 7 10 7a9.7 9.7 0 0 0 5.4-1.6" }), /* @__PURE__ */ jsx("path", { d: "M9.9 9.9a3 3 0 1 0 4.2 4.2M2 2l20 20" })] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("path", { d: "M2 12s3-7 10-7 10 7 10 7-3 7-10 7S2 12 2 12Z" }), /* @__PURE__ */ jsx("circle", {
+			cx: "12",
+			cy: "12",
+			r: "3"
+		})] })
+	});
+}
+/** A password field with a show/hide toggle and an optional strength meter. */
+function PasswordInput(inProps) {
+	const [props, slots] = useComponentConfig("PasswordInput", inProps);
+	const { showStrength = false, defaultVisible = false, value, defaultValue, onChange, className, ...rest } = props;
+	const [visible, setVisible] = useState(defaultVisible);
+	const [typed, setTyped] = useState(String(defaultValue ?? ""));
+	const current = value !== void 0 ? String(value) : typed;
+	const { strength } = passwordStrength(current);
+	const s = passwordInputStyles({ strength });
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "password-input",
+		className: s.root({ class: [slots.root, className] }),
+		children: [/* @__PURE__ */ jsx(Input, {
+			...rest,
+			...value !== void 0 && { value },
+			...defaultValue !== void 0 && { defaultValue },
+			type: visible ? "text" : "password",
+			autoComplete: rest.autoComplete ?? "current-password",
+			spellCheck: false,
+			onChange: (event) => {
+				setTyped(event.target.value);
+				onChange?.(event);
+			},
+			suffix: /* @__PURE__ */ jsx("button", {
+				type: "button",
+				"aria-label": visible ? "Hide password" : "Show password",
+				"aria-pressed": visible,
+				disabled: rest.disabled,
+				className: s.toggle({ class: slots.toggle }),
+				onClick: () => setVisible((v) => !v),
+				children: /* @__PURE__ */ jsx(EyeIcon, { off: visible })
+			})
+		}), showStrength && current.length > 0 && /* @__PURE__ */ jsxs("div", {
+			className: s.meter({ class: slots.meter }),
+			children: [/* @__PURE__ */ jsx("div", {
+				className: s.bars({ class: slots.bars }),
+				"aria-hidden": "true",
+				children: [
+					1,
+					2,
+					3
+				].map((n) => /* @__PURE__ */ jsx("span", { className: s.bar({ class: [slots.bar, n <= filled[strength] && barColor[strength]] }) }, n))
+			}), /* @__PURE__ */ jsx("span", {
+				className: s.label({ class: slots.label }),
+				"aria-live": "polite",
+				children: labels[strength]
+			})]
 		})]
-	}) });
+	});
 }
 //#endregion
 //#region src/components/progress/progress.styles.ts
@@ -2421,7 +4195,7 @@ const proseStyles = tv({
 		"[&_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",
+		"[&_a]:font-medium [&_a]:text-primary-text [&_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",
@@ -2595,22 +4369,113 @@ function RadioGroupItem({ label, description, children, className, id, ...props
 		...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
-			})]
-		})]
+	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/resizable/resizable.styles.ts
+const resizableStyles = tv({ slots: {
+	group: "flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
+	panel: "min-w-0",
+	handle: [
+		"relative flex w-px shrink-0 items-center justify-center bg-border outline-none",
+		"transition-colors duration-(--glyph-duration-fast)",
+		"after:absolute after:inset-y-0 after:left-1/2 after:w-2 after:-translate-x-1/2",
+		"hover:bg-border-strong data-[resize-handle-state=drag]:bg-primary",
+		"focus-visible:bg-primary focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background",
+		"data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full",
+		"data-[panel-group-direction=vertical]:after:inset-x-0 data-[panel-group-direction=vertical]:after:inset-y-auto data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:top-1/2 data-[panel-group-direction=vertical]:after:h-2 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:translate-x-0 data-[panel-group-direction=vertical]:after:-translate-y-1/2"
+	],
+	grip: "z-10 flex h-5 w-3 items-center justify-center rounded-xs border border-border bg-surface text-faint-foreground shadow-xs in-data-[panel-group-direction=vertical]:h-3 in-data-[panel-group-direction=vertical]:w-5 [&>svg]:size-2.5 in-data-[panel-group-direction=vertical]:[&>svg]:rotate-90"
+} });
+//#endregion
+//#region src/components/resizable/resizable.tsx
+const s$1 = resizableStyles();
+function useSlots$1() {
+	return useComponentConfig("Resizable", {})[1];
+}
+/**
+* Panels separated by draggable, keyboard-accessible dividers, for editors and split views.
+* Set `direction` to "horizontal" or "vertical"; pass `autoSaveId` to remember sizes.
+*/
+function ResizablePanelGroup({ className, ...props }) {
+	const slots = useSlots$1();
+	return /* @__PURE__ */ jsx(PanelGroup, {
+		"data-slot": "resizable-group",
+		className: s$1.group({ class: [slots.group, className] }),
+		...props
+	});
+}
+function ResizablePanel({ className, ...props }) {
+	const slots = useSlots$1();
+	return /* @__PURE__ */ jsx(Panel, {
+		"data-slot": "resizable-panel",
+		className: s$1.panel({ class: [slots.panel, className] }),
+		...props
+	});
+}
+function ResizableHandle({ withHandle, className, ...props }) {
+	const slots = useSlots$1();
+	return /* @__PURE__ */ jsx(PanelResizeHandle, {
+		"data-slot": "resizable-handle",
+		className: s$1.handle({ class: [slots.handle, className] }),
+		...props,
+		children: withHandle && /* @__PURE__ */ jsx("div", {
+			className: s$1.grip({ class: slots.grip }),
+			"aria-hidden": "true",
+			children: /* @__PURE__ */ jsxs("svg", {
+				viewBox: "0 0 24 24",
+				fill: "currentColor",
+				"aria-hidden": "true",
+				children: [
+					/* @__PURE__ */ jsx("circle", {
+						cx: "9",
+						cy: "6",
+						r: "1.5"
+					}),
+					/* @__PURE__ */ jsx("circle", {
+						cx: "15",
+						cy: "6",
+						r: "1.5"
+					}),
+					/* @__PURE__ */ jsx("circle", {
+						cx: "9",
+						cy: "12",
+						r: "1.5"
+					}),
+					/* @__PURE__ */ jsx("circle", {
+						cx: "15",
+						cy: "12",
+						r: "1.5"
+					}),
+					/* @__PURE__ */ jsx("circle", {
+						cx: "9",
+						cy: "18",
+						r: "1.5"
+					}),
+					/* @__PURE__ */ jsx("circle", {
+						cx: "15",
+						cy: "18",
+						r: "1.5"
+					})
+				]
+			})
+		})
 	});
 }
 //#endregion
@@ -2626,6 +4491,22 @@ const scrollAreaStyles = tv({ slots: {
 	thumb: "relative flex-1 rounded-pill bg-border-strong hover:bg-faint-foreground",
 	corner: "bg-transparent"
 } });
+/** True while the element's content overflows it, so keyboard users need to reach it. */
+function useOverflowing() {
+	const ref = useRef(null);
+	const [overflowing, setOverflowing] = useState(false);
+	useEffect(() => {
+		const el = ref.current;
+		if (!el) return;
+		const measure = () => setOverflowing(el.scrollHeight > el.clientHeight || el.scrollWidth > el.clientWidth);
+		measure();
+		const observer = new ResizeObserver(measure);
+		observer.observe(el);
+		if (el.firstElementChild) observer.observe(el.firstElementChild);
+		return () => observer.disconnect();
+	}, []);
+	return [ref, overflowing];
+}
 /**
 * A scrollable region with slim, theme-colored scrollbars. Give it a height (or width)
 * with `className`, e.g. `h-72`.
@@ -2634,6 +4515,7 @@ function ScrollArea(inProps) {
 	const [props, slots] = useComponentConfig("ScrollArea", inProps);
 	const { orientation = "vertical", viewportClassName, className, children, ...rest } = props;
 	const s = scrollAreaStyles();
+	const [viewportRef, overflowing] = useOverflowing();
 	const bar = (o) => /* @__PURE__ */ jsx(ScrollArea$1.Scrollbar, {
 		"data-slot": "scroll-area-scrollbar",
 		orientation: o,
@@ -2646,7 +4528,9 @@ function ScrollArea(inProps) {
 		...rest,
 		children: [
 			/* @__PURE__ */ jsx(ScrollArea$1.Viewport, {
+				ref: viewportRef,
 				"data-slot": "scroll-area-viewport",
+				tabIndex: overflowing ? 0 : void 0,
 				className: s.viewport({ class: [slots.viewport, viewportClassName] }),
 				children
 			}),
@@ -2693,6 +4577,16 @@ function Section({ spacing, tone, divided, asChild, className, ...props }) {
 	});
 }
 //#endregion
+//#region src/internal/dev.ts
+const warned = /* @__PURE__ */ new Set();
+/** Logs a console warning once per key, in development only. */
+function warnOnce(key, message) {
+	if (typeof process === "undefined" || process.env.NODE_ENV === "production") return;
+	if (warned.has(key)) return;
+	warned.add(key);
+	console.warn(`[glyph] ${message}`);
+}
+//#endregion
 //#region src/components/segmented-control/segmented-control.tsx
 const segmentedControlStyles = tv({
 	slots: {
@@ -2730,19 +4624,25 @@ const segmentedControlStyles = tv({
 function SegmentedControl(inProps) {
 	const [props, slots] = useComponentConfig("SegmentedControl", inProps);
 	const { options, value, defaultValue, onValueChange, size, fullWidth, className, ...rest } = props;
+	const field = useContext(FieldContext);
 	const s = segmentedControlStyles({
 		size,
 		fullWidth
 	});
-	return /* @__PURE__ */ jsx(ToggleGroup.Root, {
+	const labelledBy = rest["aria-labelledby"] ?? (rest["aria-label"] ? void 0 : field?.labelId);
+	if (!rest["aria-label"] && !labelledBy) warnOnce("segmented-control-label", "SegmentedControl needs a label: pass aria-label, or place it in a <Field label=\"…\">.");
+	const describedBy = [field?.descriptionId, field?.errorId].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(ToggleGroup$1.Root, {
 		type: "single",
 		"data-slot": "segmented-control",
 		...value !== void 0 && { value },
 		...defaultValue !== void 0 && { defaultValue },
 		onValueChange: (next) => next && onValueChange?.(next),
 		className: s.root({ class: [slots.root, className] }),
+		"aria-labelledby": labelledBy,
+		"aria-describedby": describedBy || void 0,
 		...rest,
-		children: options.map((option) => /* @__PURE__ */ jsx(ToggleGroup.Item, {
+		children: options.map((option) => /* @__PURE__ */ jsx(ToggleGroup$1.Item, {
 			value: option.value,
 			disabled: option.disabled,
 			className: s.item({ class: slots.item }),
@@ -2794,7 +4694,7 @@ function Select(inProps) {
 			className: s.trigger({ class: [slots.trigger, className] }),
 			children: [/* @__PURE__ */ jsx(Select$1.Value, { placeholder }), /* @__PURE__ */ jsx(Select$1.Icon, {
 				asChild: true,
-				children: /* @__PURE__ */ jsx(ChevronDownIcon, { className: s.icon({ class: slots.icon }) })
+				children: /* @__PURE__ */ jsx(ChevronDownIcon$1, { className: s.icon({ class: slots.icon }) })
 			})]
 		}), /* @__PURE__ */ jsx(Select$1.Portal, { children: /* @__PURE__ */ jsx(Select$1.Content, {
 			position: "popper",
@@ -2817,7 +4717,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$1, {})
+			children: /* @__PURE__ */ jsx(CheckIcon$4, {})
 		})]
 	});
 }
@@ -2846,8 +4746,8 @@ function Separator(inProps) {
 //#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"],
+		overlay: "fixed inset-0 z-50 bg-overlay data-[state=open]:animate-fade-in data-[state=closed]:animate-fade-out",
+		content: ["fixed z-50 flex flex-col gap-5 border-border bg-surface p-6 text-foreground shadow-lg outline-none"],
 		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,
@@ -2861,10 +4761,10 @@ const sheetStyles = tv({
 	},
 	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" }
+			right: { content: "inset-y-0 right-0 h-full w-full border-l-(length:--glyph-border-width) data-[state=open]:animate-sheet-in-right data-[state=closed]:animate-sheet-out-right" },
+			left: { content: "inset-y-0 left-0 h-full w-full border-r-(length:--glyph-border-width) data-[state=open]:animate-sheet-in-left data-[state=closed]:animate-sheet-out-left" },
+			top: { content: "inset-x-0 top-0 max-h-[85dvh] border-b-(length:--glyph-border-width) data-[state=open]:animate-sheet-in-top data-[state=closed]:animate-sheet-out-top" },
+			bottom: { content: "inset-x-0 bottom-0 max-h-[85dvh] rounded-t-xl border-t-(length:--glyph-border-width) data-[state=open]:animate-sheet-in-bottom data-[state=closed]:animate-sheet-out-bottom" }
 		},
 		size: {
 			sm: {},
@@ -3002,7 +4902,9 @@ const toArray = (value) => value === void 0 ? void 0 : typeof value === "number"
 /** 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 { 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-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid } = props;
+	const field = useContext(FieldContext);
+	const labelledBy = ariaLabelledBy ?? (ariaLabel ? void 0 : field?.labelId);
 	const isRange = Array.isArray(value ?? defaultValue);
 	const fromArray = (next) => isRange ? [next[0], next[1]] : next[0];
 	const current = toArray(value) ?? toArray(defaultValue) ?? [min];
@@ -3029,6 +4931,7 @@ function Slider(inProps) {
 			}), current.map((thumbValue, index) => /* @__PURE__ */ jsx(Slider$1.Thumb, {
 				id: index === 0 ? id : void 0,
 				"aria-label": isRange ? thumbLabels[index] : ariaLabel,
+				"aria-labelledby": isRange ? void 0 : labelledBy,
 				"aria-describedby": ariaDescribedBy,
 				"aria-invalid": ariaInvalid,
 				className: s.thumb({ class: slots.thumb }),
@@ -3199,6 +5102,164 @@ function StatCard(inProps) {
 	});
 }
 //#endregion
+//#region src/components/stepper/stepper.styles.ts
+const stepperStyles = tv({
+	slots: {
+		root: "flex w-full list-none p-0",
+		step: "relative flex min-w-0",
+		trigger: ["flex min-w-0 rounded-md text-left", focusRing],
+		indicator: [
+			"relative z-10 flex size-8 shrink-0 items-center justify-center rounded-pill text-small font-medium tabular-nums [&>svg]:size-4",
+			themedBorder,
+			transition
+		],
+		connector: "absolute transition-colors duration-(--glyph-duration-base)",
+		text: "grid min-w-0 gap-0.5",
+		title: "text-small font-medium",
+		description: "text-caption text-muted-foreground"
+	},
+	variants: {
+		orientation: {
+			horizontal: {
+				root: "items-start",
+				step: "flex-1 flex-col items-center text-center",
+				trigger: "flex-col items-center gap-2 text-center",
+				connector: "top-4 right-[calc(-50%+1.25rem)] left-[calc(50%+1.25rem)] h-px",
+				text: "px-2"
+			},
+			vertical: {
+				root: "flex-col",
+				step: "gap-3 pb-7 last:pb-0",
+				trigger: "items-start gap-3",
+				connector: "top-9.5 bottom-1.5 left-4 w-px -translate-x-1/2",
+				text: "pt-1.5"
+			}
+		},
+		status: {
+			complete: {
+				indicator: "border-primary bg-primary text-primary-foreground",
+				connector: "bg-primary",
+				title: "text-foreground"
+			},
+			current: {
+				indicator: "border-primary bg-surface text-primary-text ring-4 ring-primary/15",
+				connector: "bg-border",
+				title: "text-foreground"
+			},
+			upcoming: {
+				indicator: "border-border bg-surface text-muted-foreground",
+				connector: "bg-border",
+				title: "text-muted-foreground"
+			},
+			error: {
+				indicator: "border-danger bg-danger text-danger-foreground",
+				connector: "bg-border",
+				title: "text-danger-text"
+			}
+		},
+		clickable: { true: { trigger: "cursor-pointer hover:[&_[data-slot=stepper-title]]:underline underline-offset-4" } }
+	},
+	defaultVariants: {
+		orientation: "horizontal",
+		status: "upcoming"
+	}
+});
+//#endregion
+//#region src/components/stepper/stepper.tsx
+const statusText = {
+	complete: "completed",
+	current: "current step",
+	upcoming: "not started",
+	error: "needs attention"
+};
+const icon = {
+	xmlns: "http://www.w3.org/2000/svg",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: 2.5,
+	strokeLinecap: "round",
+	strokeLinejoin: "round"
+};
+const CheckIcon = () => /* @__PURE__ */ jsx("svg", {
+	"aria-hidden": "true",
+	...icon,
+	children: /* @__PURE__ */ jsx("path", { d: "M20 6 9 17l-5-5" })
+});
+const AlertIcon = () => /* @__PURE__ */ jsx("svg", {
+	"aria-hidden": "true",
+	...icon,
+	children: /* @__PURE__ */ jsx("path", { d: "M12 7v6M12 17h.01" })
+});
+function statusOf(step, index, current) {
+	if (step.status) return step.status;
+	if (index < current) return "complete";
+	return index === current ? "current" : "upcoming";
+}
+/** Progress through a multi-step flow such as onboarding or checkout. */
+function Stepper(inProps) {
+	const [props, slots] = useComponentConfig("Stepper", inProps);
+	const { steps, current, orientation = "horizontal", onStepClick, className, "aria-label": ariaLabel = "Progress", ...rest } = props;
+	const root = stepperStyles({ orientation });
+	return /* @__PURE__ */ jsx("ol", {
+		"data-slot": "stepper",
+		"data-orientation": orientation,
+		"aria-label": ariaLabel,
+		className: root.root({ class: [slots.root, className] }),
+		...rest,
+		children: steps.map((step, index) => {
+			const status = statusOf(step, index, current);
+			const clickable = Boolean(onStepClick) && status === "complete";
+			const s = stepperStyles({
+				orientation,
+				status,
+				clickable
+			});
+			const content = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+				"data-slot": "stepper-indicator",
+				className: s.indicator({ class: slots.indicator }),
+				children: status === "complete" ? /* @__PURE__ */ jsx(CheckIcon, {}) : status === "error" ? /* @__PURE__ */ jsx(AlertIcon, {}) : index + 1
+			}), /* @__PURE__ */ jsxs("span", {
+				className: s.text({ class: slots.text }),
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						"data-slot": "stepper-title",
+						className: s.title({ class: slots.title }),
+						children: step.title
+					}),
+					step.description && /* @__PURE__ */ jsx("span", {
+						className: s.description({ class: slots.description }),
+						children: step.description
+					}),
+					/* @__PURE__ */ jsxs("span", {
+						className: "sr-only",
+						children: [", ", statusText[status]]
+					})
+				]
+			})] });
+			return /* @__PURE__ */ jsxs("li", {
+				"data-slot": "stepper-step",
+				"data-status": status,
+				"aria-current": status === "current" ? "step" : void 0,
+				className: s.step({ class: slots.step }),
+				children: [index < steps.length - 1 && /* @__PURE__ */ jsx("span", {
+					"data-slot": "stepper-connector",
+					"aria-hidden": "true",
+					className: s.connector({ class: slots.connector })
+				}), clickable ? /* @__PURE__ */ jsx("button", {
+					type: "button",
+					onClick: () => onStepClick?.(index),
+					className: s.trigger({ class: slots.trigger }),
+					children: content
+				}) : /* @__PURE__ */ jsx("span", {
+					className: s.trigger({ class: slots.trigger }),
+					children: content
+				})]
+			}, index);
+		})
+	});
+}
+//#endregion
 //#region src/components/switch/switch.tsx
 const switchStyles = tv({
 	slots: {
@@ -3305,6 +5366,170 @@ function TabsContent({ className, ...props }) {
 	});
 }
 //#endregion
+//#region src/components/tag-input/tag-input.styles.ts
+const tagInputStyles = tv({
+	slots: {
+		root: "grid gap-1.5",
+		frame: [
+			...fieldControl,
+			"flex cursor-text flex-wrap items-center gap-1.5 px-2 py-1",
+			"focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/20",
+			"data-invalid:focus-within:ring-danger/20",
+			"has-[input:disabled]:cursor-not-allowed has-[input:disabled]:opacity-50"
+		],
+		tag: "inline-flex h-6 max-w-full items-center gap-1 rounded-pill bg-muted pr-1 pl-2.5 text-caption text-foreground",
+		tagLabel: "truncate",
+		remove: "inline-flex size-4 shrink-0 cursor-pointer items-center justify-center rounded-pill text-muted-foreground hover:bg-border-strong/40 hover:text-foreground focus-visible:outline-2 focus-visible:outline-ring [&>svg]:size-3",
+		input: "h-7 min-w-24 flex-1 bg-transparent px-1 text-foreground outline-none placeholder:text-faint-foreground disabled:cursor-not-allowed",
+		message: "text-small font-medium text-danger-text"
+	},
+	variants: { size: {
+		sm: { frame: "min-h-(--glyph-control-sm) text-small" },
+		md: { frame: "min-h-(--glyph-control-md) text-small" },
+		lg: { frame: "min-h-(--glyph-control-lg) text-body" }
+	} },
+	defaultVariants: { size: "md" }
+});
+//#endregion
+//#region src/components/tag-input/tag-input.tsx
+function XIcon() {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2.5",
+		strokeLinecap: "round",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsx("path", { d: "M18 6 6 18M6 6l12 12" })
+	});
+}
+/**
+* Free-form multi-value input. Enter or a comma turns the text into a removable tag;
+* Backspace on an empty input removes the last one. Pasting a comma-separated list adds them all.
+*/
+function TagInput(inProps) {
+	const [props, slots] = useComponentConfig("TagInput", useFieldControl(inProps));
+	const { value: valueProp, defaultValue = [], onValueChange, placeholder = "Add a tag…", maxTags, validate, allowDuplicates = false, separators = [","], disabled, name, id, size, className, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid } = props;
+	const [tags, setTags] = useControllableState({
+		value: valueProp,
+		defaultValue,
+		onChange: onValueChange
+	});
+	const [draft, setDraft] = useState("");
+	const [error, setError] = useState(null);
+	const inputRef = useRef(null);
+	const errorId = useId();
+	const s = tagInputStyles({ size });
+	const full = maxTags !== void 0 && tags.length >= maxTags;
+	const invalid = Boolean(error) || ariaInvalid === true;
+	const add = (raw) => {
+		let next = [...tags];
+		let problem = null;
+		for (const candidate of raw.map((t) => t.trim()).filter(Boolean)) {
+			if (maxTags !== void 0 && next.length >= maxTags) {
+				problem = `You can add up to ${maxTags} tags.`;
+				break;
+			}
+			if (!allowDuplicates && next.includes(candidate)) {
+				problem = `“${candidate}” is already added.`;
+				continue;
+			}
+			const verdict = validate?.(candidate, next) ?? true;
+			if (verdict !== true) {
+				problem = verdict;
+				continue;
+			}
+			next = [...next, candidate];
+		}
+		if (next.length !== tags.length) setTags(next);
+		setError(problem);
+		return problem === null;
+	};
+	const commitDraft = () => {
+		if (!draft.trim()) return;
+		if (add([draft])) setDraft("");
+	};
+	const remove = (index) => {
+		setTags(tags.filter((_, i) => i !== index));
+		setError(null);
+		inputRef.current?.focus();
+	};
+	const handleKeyDown = (event) => {
+		if (event.key === "Enter" || separators.includes(event.key)) {
+			if (event.key === "Enter" && !draft.trim()) return;
+			event.preventDefault();
+			commitDraft();
+		} else if (event.key === "Backspace" && draft === "" && tags.length > 0) {
+			event.preventDefault();
+			remove(tags.length - 1);
+		}
+	};
+	const handlePaste = (event) => {
+		const text = event.clipboardData.getData("text");
+		const pattern = new RegExp(`[${["\n", ...separators].map((s) => s.replace(/[-\\^\]]/g, "\\$&")).join("")}]`);
+		if (!pattern.test(text)) return;
+		event.preventDefault();
+		add(text.split(pattern));
+	};
+	const describedBy = [ariaDescribedBy, error ? errorId : void 0].filter(Boolean).join(" ") || void 0;
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "tag-input",
+		className: s.root({ class: [slots.root, className] }),
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				"data-invalid": invalid || void 0,
+				className: s.frame({ class: slots.frame }),
+				onClick: () => inputRef.current?.focus(),
+				children: [tags.map((tag, index) => /* @__PURE__ */ jsxs("span", {
+					"data-slot": "tag",
+					className: s.tag({ class: slots.tag }),
+					children: [/* @__PURE__ */ jsx("span", {
+						className: s.tagLabel({ class: slots.tagLabel }),
+						children: tag
+					}), !disabled && /* @__PURE__ */ jsx("button", {
+						type: "button",
+						"aria-label": `Remove ${tag}`,
+						className: s.remove({ class: slots.remove }),
+						onClick: (event) => {
+							event.stopPropagation();
+							remove(index);
+						},
+						children: /* @__PURE__ */ jsx(XIcon, {})
+					})]
+				}, `${tag}-${index}`)), /* @__PURE__ */ jsx("input", {
+					ref: inputRef,
+					id,
+					value: draft,
+					disabled: disabled || full,
+					placeholder: full ? void 0 : tags.length === 0 ? placeholder : void 0,
+					"aria-label": ariaLabel,
+					"aria-describedby": describedBy,
+					"aria-invalid": invalid || void 0,
+					className: s.input({ class: slots.input }),
+					onChange: (event) => {
+						setDraft(event.target.value);
+						if (error) setError(null);
+					},
+					onKeyDown: handleKeyDown,
+					onPaste: handlePaste,
+					onBlur: commitDraft
+				})]
+			}),
+			error && /* @__PURE__ */ jsx("p", {
+				id: errorId,
+				role: "alert",
+				className: s.message({ class: slots.message }),
+				children: error
+			}),
+			name && tags.map((tag, index) => /* @__PURE__ */ jsx("input", {
+				type: "hidden",
+				name,
+				value: tag
+			}, `${tag}-${index}`))
+		]
+	});
+}
+//#endregion
 //#region src/components/text/text.styles.ts
 const textStyles = tv({
 	slots: { base: "" },
@@ -3319,10 +5544,10 @@ const textStyles = tv({
 			default: { base: "text-foreground" },
 			muted: { base: "text-muted-foreground" },
 			faint: { base: "text-faint-foreground" },
-			primary: { base: "text-primary" },
-			success: { base: "text-success" },
-			warning: { base: "text-warning" },
-			danger: { base: "text-danger" }
+			primary: { base: "text-primary-text" },
+			success: { base: "text-success-text" },
+			warning: { base: "text-warning-text" },
+			danger: { base: "text-danger-text" }
 		},
 		weight: {
 			regular: { base: "font-normal" },
@@ -3373,6 +5598,87 @@ function Textarea(inProps) {
 	});
 }
 //#endregion
+//#region src/components/timeline/timeline.styles.ts
+const timelineStyles = tv({
+	slots: {
+		root: "grid",
+		item: "group/item relative grid grid-cols-[auto_1fr] gap-x-3",
+		rail: "flex flex-col items-center",
+		marker: ["z-10 flex size-6 shrink-0 items-center justify-center rounded-pill bg-surface [&>svg]:size-3.5", themedBorder],
+		dot: "size-2 rounded-pill bg-current",
+		connector: "my-1 w-px flex-1 bg-border group-last/item:hidden",
+		content: "grid min-w-0 gap-0.5 pt-0.5 pb-6 group-last/item:pb-0",
+		header: "flex flex-wrap items-baseline justify-between gap-x-3 gap-y-0.5",
+		title: "text-small font-medium text-foreground",
+		time: "font-mono text-caption text-faint-foreground tabular-nums",
+		description: "text-small text-muted-foreground"
+	},
+	variants: { tone: {
+		neutral: { marker: "border-border text-muted-foreground" },
+		primary: { marker: "border-primary/40 text-[color-mix(in_oklab,var(--color-primary)_80%,var(--color-foreground))]" },
+		info: { marker: "border-info/40 text-[color-mix(in_oklab,var(--color-info)_80%,var(--color-foreground))]" },
+		success: { marker: "border-success/40 text-[color-mix(in_oklab,var(--color-success)_80%,var(--color-foreground))]" },
+		warning: { marker: "border-warning/50 text-[color-mix(in_oklab,var(--color-warning)_80%,var(--color-foreground))]" },
+		danger: { marker: "border-danger/40 text-[color-mix(in_oklab,var(--color-danger)_80%,var(--color-foreground))]" }
+	} },
+	defaultVariants: { tone: "neutral" }
+});
+//#endregion
+//#region src/components/timeline/timeline.tsx
+const TimelineContext = createContext({});
+/** A vertical list of events in order, for activity feeds, changelogs and order tracking. */
+function Timeline(inProps) {
+	const [props, slots] = useComponentConfig("Timeline", inProps);
+	const { items, className, children, ...rest } = props;
+	const s = timelineStyles();
+	return /* @__PURE__ */ jsx(TimelineContext.Provider, {
+		value: slots,
+		children: /* @__PURE__ */ jsx("ol", {
+			"data-slot": "timeline",
+			className: s.root({ class: [slots.root, className] }),
+			...rest,
+			children: items ? items.map(({ id, description, ...item }, index) => /* @__PURE__ */ jsx(TimelineItem, {
+				...item,
+				children: description
+			}, id ?? index)) : children
+		})
+	});
+}
+function TimelineItem({ title, time, dateTime, icon, tone, className, children, ...props }) {
+	const slots = useContext(TimelineContext);
+	const s = timelineStyles({ tone });
+	return /* @__PURE__ */ jsxs("li", {
+		"data-slot": "timeline-item",
+		"data-tone": tone ?? "neutral",
+		className: s.item({ class: [slots.item, className] }),
+		...props,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: s.rail({ class: slots.rail }),
+			"aria-hidden": "true",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: s.marker({ class: slots.marker }),
+				children: icon ?? /* @__PURE__ */ jsx("span", { className: s.dot({ class: slots.dot }) })
+			}), /* @__PURE__ */ jsx("span", { className: s.connector({ class: slots.connector }) })]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: s.content({ class: slots.content }),
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: s.header({ class: slots.header }),
+				children: [/* @__PURE__ */ jsx("p", {
+					className: s.title({ class: slots.title }),
+					children: title
+				}), time && /* @__PURE__ */ jsx("time", {
+					dateTime,
+					className: s.time({ class: slots.time }),
+					children: time
+				})]
+			}), children && /* @__PURE__ */ jsx("div", {
+				className: s.description({ class: slots.description }),
+				children
+			})]
+		})]
+	});
+}
+//#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],
@@ -3441,6 +5747,87 @@ function Toaster(inProps) {
 	});
 }
 //#endregion
+//#region src/components/toggle/toggle.styles.ts
+const toggleStyles = tv({
+	slots: {
+		base: [
+			"inline-flex shrink-0 cursor-pointer select-none items-center justify-center gap-2 whitespace-nowrap rounded-md font-medium text-muted-foreground",
+			transition,
+			focusRing,
+			"hover:bg-muted hover:text-foreground",
+			"data-[state=on]:bg-muted data-[state=on]:text-foreground",
+			"disabled:pointer-events-none disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0"
+		],
+		group: "inline-flex items-center gap-1"
+	},
+	variants: {
+		variant: {
+			default: { base: "bg-transparent" },
+			outline: { base: ["border-border bg-transparent shadow-xs hover:border-border-strong", themedBorder] }
+		},
+		size: {
+			sm: { base: "h-(--glyph-control-sm) min-w-(--glyph-control-sm) px-2 text-caption" },
+			md: { base: "h-(--glyph-control-md) min-w-(--glyph-control-md) px-2.5 text-small" },
+			lg: { base: "h-(--glyph-control-lg) min-w-(--glyph-control-lg) px-3 text-small" }
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		size: "md"
+	}
+});
+//#endregion
+//#region src/components/toggle/toggle.tsx
+/**
+* A two-state button, e.g. Bold in a toolbar. Use Switch for settings that take effect
+* immediately, and Checkbox inside forms.
+*/
+function Toggle(inProps) {
+	const [props, slots] = useComponentConfig("Toggle", inProps);
+	const { variant, size, className, ...rest } = props;
+	return /* @__PURE__ */ jsx(Toggle$1.Root, {
+		"data-slot": "toggle",
+		className: toggleStyles({
+			variant,
+			size
+		}).base({ class: [slots.base, className] }),
+		...rest
+	});
+}
+const ToggleGroupContext = createContext({});
+/**
+* A set of toggles. `type="single"` behaves like a radio group (text alignment),
+* `type="multiple"` like checkboxes (bold, italic, underline). Arrow keys move between items.
+*/
+function ToggleGroup(inProps) {
+	const [props, slots] = useComponentConfig("Toggle", inProps);
+	const { variant, size, className, ...rest } = props;
+	return /* @__PURE__ */ jsx(ToggleGroupContext.Provider, {
+		value: {
+			variant,
+			size
+		},
+		children: /* @__PURE__ */ jsx(ToggleGroup$1.Root, {
+			"data-slot": "toggle-group",
+			className: toggleStyles().group({ class: [slots.group, className] }),
+			...rest
+		})
+	});
+}
+function ToggleGroupItem({ variant, size, className, ...props }) {
+	const group = useContext(ToggleGroupContext);
+	const [, slots] = useComponentConfig("Toggle", {});
+	const s = toggleStyles({
+		variant: variant ?? group.variant,
+		size: size ?? group.size
+	});
+	return /* @__PURE__ */ jsx(ToggleGroup$1.Item, {
+		"data-slot": "toggle-group-item",
+		className: s.base({ class: [slots.base, className] }),
+		...props
+	});
+}
+//#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). */
@@ -3463,6 +5850,231 @@ function Tooltip(inProps) {
 	});
 }
 //#endregion
+//#region src/components/tree-view/tree-view.styles.ts
+const treeViewStyles = tv({
+	slots: {
+		root: "grid gap-px text-small",
+		item: [
+			"outline-none",
+			"focus-visible:[&>[data-slot=tree-row]]:ring-2 focus-visible:[&>[data-slot=tree-row]]:ring-ring",
+			"aria-selected:[&>[data-slot=tree-row]]:bg-muted aria-selected:[&>[data-slot=tree-row]]:text-foreground aria-selected:[&>[data-slot=tree-row]]:font-medium",
+			"aria-disabled:[&>[data-slot=tree-row]]:pointer-events-none aria-disabled:[&>[data-slot=tree-row]]:opacity-50"
+		],
+		row: [
+			"group/row flex h-8 cursor-pointer select-none items-center gap-1.5 rounded-sm pr-2 text-muted-foreground",
+			transition,
+			"hover:bg-muted hover:text-foreground"
+		],
+		chevron: "size-4 shrink-0 text-faint-foreground transition-transform duration-(--glyph-duration-fast) ease-standard group-data-[state=open]/row:rotate-90",
+		spacer: "size-4 shrink-0",
+		icon: "flex size-4 shrink-0 items-center justify-center text-faint-foreground [&>svg]:size-4",
+		label: "min-w-0 flex-1 truncate",
+		group: "grid gap-px"
+	},
+	variants: { size: {
+		sm: { row: "h-7 text-caption" },
+		md: {}
+	} },
+	defaultVariants: { size: "md" }
+});
+//#endregion
+//#region src/components/tree-view/tree-view.tsx
+function flattenVisible(nodes, expanded) {
+	const out = [];
+	const walk = (list, level, parentId) => {
+		for (const node of list) {
+			out.push({
+				node,
+				level,
+				parentId
+			});
+			if (node.children?.length && expanded.has(node.id)) walk(node.children, level + 1, node.id);
+		}
+	};
+	walk(nodes, 1, null);
+	return out;
+}
+function textOf(node) {
+	return (node.textValue ?? (typeof node.label === "string" ? node.label : "")).toLowerCase();
+}
+const NO_IDS = [];
+/**
+* An accessible tree for file browsers and nested navigation. Arrow keys move and
+* expand/collapse, Home/End jump, typing a letter finds the next match, Enter or Space selects.
+*/
+function TreeView(inProps) {
+	const [props, slots] = useComponentConfig("TreeView", inProps);
+	const { nodes, expanded: expandedProp, defaultExpanded = NO_IDS, onExpandedChange, selected: selectedProp, defaultSelected = null, onSelect, size, className, ...rest } = props;
+	const [expandedList, setExpandedList] = useControllableState({
+		value: expandedProp,
+		defaultValue: defaultExpanded,
+		onChange: onExpandedChange
+	});
+	const [selected, setSelected] = useControllableState({
+		value: selectedProp,
+		defaultValue: defaultSelected
+	});
+	const expanded = useMemo(() => new Set(expandedList), [expandedList]);
+	const visible = useMemo(() => flattenVisible(nodes, expanded), [nodes, expanded]);
+	const [focusedId, setFocusedId] = useState(null);
+	const refs = useRef(/* @__PURE__ */ new Map());
+	const baseId = useId();
+	const tabbableId = focusedId && visible.some((v) => v.node.id === focusedId) && focusedId || selected && visible.some((v) => v.node.id === selected) && selected || visible[0]?.node.id;
+	const focus = useCallback((id) => {
+		if (!id) return;
+		setFocusedId(id);
+		refs.current.get(id)?.focus();
+	}, []);
+	const toggle = useCallback((id, open) => {
+		const isOpen = expanded.has(id);
+		const next = open ?? !isOpen;
+		if (next === isOpen) return;
+		setExpandedList(next ? [...expandedList, id] : expandedList.filter((x) => x !== id));
+	}, [
+		expanded,
+		expandedList,
+		setExpandedList
+	]);
+	const select = useCallback((node) => {
+		if (node.disabled) return;
+		setSelected(node.id);
+		onSelect?.(node.id, node);
+	}, [onSelect, setSelected]);
+	const onKeyDown = (event) => {
+		const index = visible.findIndex((v) => v.node.id === tabbableId);
+		const current = visible[index];
+		if (!current) return;
+		const { node } = current;
+		const hasChildren = Boolean(node.children?.length);
+		const isOpen = expanded.has(node.id);
+		let handled = true;
+		switch (event.key) {
+			case "ArrowDown":
+				focus(visible[index + 1]?.node.id);
+				break;
+			case "ArrowUp":
+				focus(visible[index - 1]?.node.id);
+				break;
+			case "ArrowRight":
+				if (hasChildren && !isOpen) toggle(node.id, true);
+				else if (hasChildren) focus(node.children?.[0]?.id);
+				break;
+			case "ArrowLeft":
+				if (hasChildren && isOpen) toggle(node.id, false);
+				else if (current.parentId) focus(current.parentId);
+				break;
+			case "Home":
+				focus(visible[0]?.node.id);
+				break;
+			case "End":
+				focus(visible.at(-1)?.node.id);
+				break;
+			case "Enter":
+			case " ":
+				select(node);
+				break;
+			default:
+				handled = false;
+				if (event.key.length === 1 && /\S/.test(event.key) && !event.metaKey && !event.ctrlKey) {
+					const char = event.key.toLowerCase();
+					const match = [...visible.slice(index + 1), ...visible.slice(0, index + 1)].find((v) => textOf(v.node).startsWith(char));
+					if (match) {
+						focus(match.node.id);
+						handled = true;
+					}
+				}
+		}
+		if (handled) event.preventDefault();
+	};
+	const s = treeViewStyles({ size });
+	/** Clicks bubble from nested items; only handle the item whose own row was clicked. */
+	const onItemClick = (event, node, hasChildren) => {
+		if (event.target.closest("[data-slot=tree-row]")?.parentElement !== event.currentTarget) return;
+		focus(node.id);
+		if (hasChildren) toggle(node.id);
+		select(node);
+	};
+	const renderNodes = (list, level) => list.map((node, i) => {
+		const hasChildren = Boolean(node.children?.length);
+		const isOpen = hasChildren && expanded.has(node.id);
+		return /* @__PURE__ */ jsxs("div", {
+			ref: (el) => {
+				if (el) refs.current.set(node.id, el);
+				else refs.current.delete(node.id);
+			},
+			role: "treeitem",
+			"data-slot": "tree-item",
+			"aria-labelledby": `${baseId}-${node.id}`,
+			"aria-level": level,
+			"aria-setsize": list.length,
+			"aria-posinset": i + 1,
+			"aria-expanded": hasChildren ? isOpen : void 0,
+			"aria-selected": selected === node.id,
+			"aria-disabled": node.disabled || void 0,
+			tabIndex: node.id === tabbableId ? 0 : -1,
+			onFocus: (event) => {
+				if (event.target === event.currentTarget) setFocusedId(node.id);
+			},
+			onClick: (event) => onItemClick(event, node, hasChildren),
+			className: s.item({ class: slots.item }),
+			children: [/* @__PURE__ */ jsxs("div", {
+				"data-slot": "tree-row",
+				"data-state": isOpen ? "open" : "closed",
+				className: s.row({ class: slots.row }),
+				style: { paddingInlineStart: `calc(${level - 1} * 1rem + 0.25rem)` },
+				children: [
+					hasChildren ? /* @__PURE__ */ jsx("svg", {
+						"data-slot": "tree-chevron",
+						viewBox: "0 0 24 24",
+						fill: "none",
+						stroke: "currentColor",
+						strokeWidth: "2",
+						strokeLinecap: "round",
+						strokeLinejoin: "round",
+						"aria-hidden": "true",
+						className: s.chevron({ class: slots.chevron }),
+						children: /* @__PURE__ */ jsx("path", { d: "m9 18 6-6-6-6" })
+					}) : /* @__PURE__ */ jsx("span", { className: s.spacer({ class: slots.spacer }) }),
+					node.icon && /* @__PURE__ */ jsx("span", {
+						className: s.icon({ class: slots.icon }),
+						"aria-hidden": "true",
+						children: node.icon
+					}),
+					/* @__PURE__ */ jsx("span", {
+						id: `${baseId}-${node.id}`,
+						className: s.label({ class: slots.label }),
+						children: node.label
+					})
+				]
+			}), isOpen && /* @__PURE__ */ jsx("div", {
+				role: "group",
+				className: s.group({ class: slots.group }),
+				children: renderNodes(node.children ?? [], level + 1)
+			})]
+		}, node.id);
+	});
+	return /* @__PURE__ */ jsx("div", {
+		role: "tree",
+		"data-slot": "tree-view",
+		onKeyDown,
+		className: s.root({ class: [slots.root, className] }),
+		...rest,
+		children: renderNodes(nodes, 1)
+	});
+}
+//#endregion
+//#region src/components/visually-hidden/visually-hidden.tsx
+/**
+* Hides content visually while keeping it available to screen readers, e.g. a label for an
+* icon-only control or extra context in a table cell.
+*/
+function VisuallyHidden(props) {
+	return /* @__PURE__ */ jsx(VisuallyHidden$1.Root, {
+		"data-slot": "visually-hidden",
+		...props
+	});
+}
+//#endregion
 //#region src/hooks/use-media-query.ts
 /** Subscribes to a CSS media query. Returns `fallback` during SSR. */
 function useMediaQuery(query, fallback = false) {
@@ -3531,7 +6143,7 @@ const sidebarStyles = tv({ slots: {
 		"group-data-[collapsed=true]/sidebar:justify-center group-data-[collapsed=true]/sidebar:px-0"
 	],
 	itemIcon: "flex size-4 shrink-0 items-center justify-center [&>svg]:size-4",
-	itemLabel: "min-w-0 flex-1 truncate text-left group-data-[collapsed=true]/sidebar:hidden",
+	itemLabel: "min-w-0 flex-1 truncate text-left group-data-[collapsed=true]/sidebar:sr-only",
 	itemBadge: "ml-auto font-mono text-caption text-faint-foreground tabular-nums group-data-[collapsed=true]/sidebar:hidden",
 	footer: ["mt-auto flex shrink-0 items-center gap-2 border-t-border px-3 py-3 group-data-[collapsed=true]/sidebar:justify-center", "border-t-(length:--glyph-border-width)"]
 } });
@@ -3646,7 +6258,11 @@ function SidebarSection({ label, className, children, ...props }) {
 		}), children]
 	});
 }
-function SidebarItem({ href, icon, badge, active, onClick, className, children }) {
+function SidebarItem({ href, icon, badge, active: activeProp, end, onClick, className, children }) {
+	const active = useIsActive(href, {
+		explicit: activeProp,
+		...end !== void 0 && { end }
+	});
 	const { collapsed, inDrawer, setMobileOpen } = useAppShell();
 	const Link = useLinkComponent();
 	const slots = useSlots();
@@ -3787,6 +6403,20 @@ function AppShell(inProps) {
 }
 //#endregion
 //#region src/patterns/app-shell/navbar.tsx
+function NavbarLink({ link, className, onClick }) {
+	const Link = useLinkComponent();
+	const active = useIsActive(link.href, {
+		explicit: link.active,
+		...link.end !== void 0 && { end: link.end }
+	});
+	return /* @__PURE__ */ jsx(Link, {
+		href: link.href,
+		"aria-current": active ? "page" : void 0,
+		className,
+		...onClick && { onClick },
+		children: link.label
+	});
+}
 /**
 * Site header from data: brand, links, actions. Responsive out of the box: links collapse
 * into a focus-trapped menu panel on small screens.
@@ -3796,7 +6426,6 @@ function Navbar(inProps) {
 	const { brand, links = [], actions, sticky = true, blurOnScroll = true, containerSize, className, ...rest } = props;
 	const [open, setOpen] = useState(false);
 	const scrolled = useScrolled(8, blurOnScroll);
-	const Link = useLinkComponent();
 	const s = navbarStyles({
 		sticky,
 		blur: blurOnScroll
@@ -3817,11 +6446,9 @@ function Navbar(inProps) {
 				links.length > 0 && /* @__PURE__ */ jsx("nav", {
 					"aria-label": "Main",
 					className: s.links({ class: slots.links }),
-					children: links.map((link) => /* @__PURE__ */ jsx(Link, {
-						href: link.href,
-						"aria-current": link.active ? "page" : void 0,
-						className: s.link({ class: slots.link }),
-						children: link.label
+					children: links.map((link) => /* @__PURE__ */ jsx(NavbarLink, {
+						link,
+						className: s.link({ class: slots.link })
 					}, link.href))
 				}),
 				actions && /* @__PURE__ */ jsx("div", {
@@ -3853,7 +6480,7 @@ function Navbar(inProps) {
 								}), /* @__PURE__ */ jsx(Dialog$1.Close, {
 									asChild: true,
 									children: /* @__PURE__ */ jsx(IconButton, {
-										icon: /* @__PURE__ */ jsx(XIcon, {}),
+										icon: /* @__PURE__ */ jsx(XIcon$2, {}),
 										"aria-label": "Close menu"
 									})
 								})]
@@ -3861,12 +6488,10 @@ function Navbar(inProps) {
 							/* @__PURE__ */ jsx("nav", {
 								"aria-label": "Main",
 								className: s.panelLinks({ class: slots.panelLinks }),
-								children: links.map((link) => /* @__PURE__ */ jsx(Link, {
-									href: link.href,
-									"aria-current": link.active ? "page" : void 0,
+								children: links.map((link) => /* @__PURE__ */ jsx(NavbarLink, {
+									link,
 									className: s.panelLink({ class: slots.panelLink }),
-									onClick: () => setOpen(false),
-									children: link.label
+									onClick: () => setOpen(false)
 								}, link.href))
 							}),
 							actions && /* @__PURE__ */ jsx("div", {
@@ -3972,7 +6597,6 @@ function useAsync(fn, deps) {
 //#endregion
 //#region src/provider/color-mode.tsx
 const ColorModeContext = createContext(null);
-const DARK_QUERY = "(prefers-color-scheme: dark)";
 const isBrowser = typeof window !== "undefined";
 function readStoredMode(storageKey) {
 	if (!isBrowser || !storageKey) return null;
@@ -3984,7 +6608,7 @@ function readStoredMode(storageKey) {
 	}
 }
 function systemMode() {
-	return isBrowser && window.matchMedia(DARK_QUERY).matches ? "dark" : "light";
+	return isBrowser && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
 }
 /** Disables transitions for one frame so a mode switch doesn't animate every color. */
 function suppressTransitions() {
@@ -3996,7 +6620,7 @@ function suppressTransitions() {
 		requestAnimationFrame(() => style.remove());
 	};
 }
-function ColorModeProvider({ children, defaultMode = "system", storageKey = "glyph-mode" }) {
+function ColorModeProvider({ children, defaultMode = "system", storageKey = DEFAULT_STORAGE_KEY }) {
 	const [mode, setModeState] = useState(() => readStoredMode(storageKey) ?? defaultMode);
 	const [system, setSystem] = useState(systemMode);
 	useEffect(() => {
@@ -4045,9 +6669,6 @@ function useColorMode() {
 * Inline script that sets `data-mode` on `<html>` before first paint, so a dark-mode
 * visitor never sees a light flash. Put it in `<head>`.
 */
-function getColorModeScript({ defaultMode = "system", storageKey = "glyph-mode" } = {}) {
-	return `(function(){try{var d=${JSON.stringify(defaultMode)},m=null;${storageKey ? `m=localStorage.getItem(${JSON.stringify(storageKey)});` : ""}if(m!=='light'&&m!=='dark'&&m!=='system')m=d;if(m==='system')m=matchMedia('${DARK_QUERY}').matches?'dark':'light';var r=document.documentElement;r.dataset.mode=m;r.style.colorScheme=m}catch(e){}})()`;
-}
 /** `<script>` element version of `getColorModeScript` for SSR frameworks. */
 function ColorModeScript(props) {
 	return /* @__PURE__ */ jsx("script", {
@@ -4114,11 +6735,18 @@ function ThemeStyle({ theme, selector }) {
 //#endregion
 //#region src/provider/glyph-provider.tsx
 /** 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 }) {
+function GlyphProvider({ children, theme = glyph, defaultMode, storageKey, router, linkComponent, toaster = false }) {
+	const Link = router?.Link ?? linkComponent ?? "a";
+	const useIsActive = router?.useIsActive ?? neverActive;
 	const value = useMemo(() => ({
 		theme,
-		linkComponent
-	}), [theme, linkComponent]);
+		linkComponent: Link,
+		useIsActive
+	}), [
+		theme,
+		Link,
+		useIsActive
+	]);
 	return /* @__PURE__ */ jsx(ColorModeProvider, {
 		...defaultMode !== void 0 && { defaultMode },
 		...storageKey !== void 0 && { storageKey },
@@ -4132,21 +6760,19 @@ function GlyphProvider({ children, theme = glyph, defaultMode, storageKey, linkC
 	});
 }
 //#endregion
-//#region src/utils/cn.ts
-const twMerge = extendTailwindMerge(twMergeConfig);
-/** Joins class names and resolves Tailwind conflicts (last one wins). */
-function cn(...inputs) {
-	return twMerge(clsx(inputs));
-}
-//#endregion
 //#region src/provider/theme-scope.tsx
 /** Renders a subtree with a different theme, e.g. to compare themes side by side. */
 function ThemeScope({ theme, mode, asChild, children, ...props }) {
 	const parent = useContext(GlyphContext);
 	const value = useMemo(() => ({
 		theme,
-		linkComponent: parent?.linkComponent ?? "a"
-	}), [theme, parent?.linkComponent]);
+		linkComponent: parent?.linkComponent ?? "a",
+		useIsActive: parent?.useIsActive ?? neverActive
+	}), [
+		theme,
+		parent?.linkComponent,
+		parent?.useIsActive
+	]);
 	const Comp = asChild ? Slot.Root : "div";
 	return /* @__PURE__ */ jsxs(GlyphContext.Provider, {
 		value,
@@ -4163,4 +6789,4 @@ function ThemeScope({ theme, mode, asChild, children, ...props }) {
 	});
 }
 //#endregion
-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 };
+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, Calendar, Card, CardBody, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, CarouselContent, CarouselDots, CarouselItem, CarouselNext, CarouselPrevious, Checkbox, Code, CodeBlock, Collapsible, CollapsibleContent, CollapsibleTrigger, ColorModeProvider, ColorModeScript, Combobox, Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandMenu, CommandSeparator, ConfirmProvider, Container, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, CopyButton, DatePicker, DateRangePicker, 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, FileUpload, GlyphProvider, Grid, Heading, HoverCard, HoverCardContent, HoverCardTrigger, IconButton, Input, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Kbd, Label, Link, LoadingState, Modal, ModalClose, Navbar, NavigationMenu, NavigationMenuCard, NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, NumberInput, PageHeader, Pagination, PasswordInput, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger, Progress, ProgressCircle, Prose, REGEXP_ONLY_CHARS, REGEXP_ONLY_DIGITS, REGEXP_ONLY_DIGITS_AND_CHARS, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, 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, Stepper, Switch, Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, TagInput, Text, Textarea, ThemeScope, Timeline, TimelineItem, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TreeView, VisuallyHidden, accordionStyles, alertDialogStyles, alertStyles, appShellStyles, aspectRatioStyles, avatarStyles, badgeStyles, bannerStyles, blockquoteStyles, breadcrumbStyles, brutalist, buttonStyles, calendarStyles, cardStyles, carouselStyles, checkboxStyles, cn, codeBlockStyles, codeStyles, collapsibleStyles, comboboxStyles, commandMenuStyles, containerStyles, contextMenuStyles, copyButtonStyles, datePickerStyles, defineTheme, descriptionListStyles, dialogStyles, dropdownMenuStyles, editorial, eyebrowStyles, fieldControl, fieldStyles, fileUploadStyles, formatBytes, getColorModeScript, glyph, gridStyles, headingStyles, hoverCardStyles, inputOtpStyles, inputStyles, kbdStyles, labelStyles, linkStyles, matchesAccept, modalStyles, navbarStyles, navigationMenuStyles, numberInputStyles, pageHeaderStyles, paginationRange, paginationStyles, passwordInputStyles, passwordStrength, playful, popoverStyles, presets, progressCircleStyles, progressStyles, proseStyles, radioGroupStyles, resizableStyles, scrollAreaStyles, sectionStyles, segmentedControlStyles, selectStyles, separatorStyles, sheetStyles, sidebarStyles, skeletonStyles, sliderStyles, spinnerStyles, stackStyles, statCardStyles, stateStyles, stepperStyles, switchStyles, tableStyles, tabsStyles, tagInputStyles, textStyles, textareaStyles, themeToCss, timelineStyles, toast, toastStyles, toggleStyles, tokenVar, tooltipStyles, treeViewStyles, tv, useAppShell, useAsync, useColorMode, useCommandMenuShortcut, useComponentConfig, useConfirm, useControllableState, useFieldControl, useGlyph, useIsActive, useLinkComponent, useMediaQuery, useScrolled };