@hina-ui/vue 1.7.4 → 1.7.6

package/dist/index.js

@@ -1,12 +1,13 @@
 import { clsx } from "clsx";
 import { extendTailwindMerge } from "tailwind-merge";
 import { createTV } from "tailwind-variants";
-import { Fragment, Transition, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, getCurrentInstance, guardReactiveProps, h, inject, isRef, isVNode, markRaw, mergeModels, mergeProps, nextTick, normalizeClass, normalizeProps, normalizeStyle, onBeforeUnmount, onBeforeUpdate, onMounted, onScopeDispose, onUpdated, openBlock, provide, reactive, ref, render, renderList, renderSlot, resolveDynamicComponent, shallowRef, toDisplayString, toHandlers, toRaw, toRef, toValue, unref, useAttrs, useId, useModel, useSlots, useTemplateRef, vModelDynamic, vModelSelect, vModelText, vShow, watch, watchEffect, watchPostEffect, withCtx, withDirectives, withKeys, withModifiers } from "vue";
-import { AccordionContent, AccordionHeader, AccordionItem, AccordionRoot, AccordionTrigger, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogOverlay, AlertDialogPortal, AlertDialogRoot, AlertDialogTitle, AlertDialogTrigger, AspectRatio, CalendarCell, CalendarCellTrigger, CalendarGrid, CalendarGridBody, CalendarGridHead, CalendarGridRow, CalendarHeadCell, CalendarNext, CalendarPrev, CalendarRoot, CheckboxGroupRoot, CheckboxRoot, CollapsibleContent, CollapsibleRoot, CollapsibleTrigger, ComboboxAnchor, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxItemIndicator, ComboboxLabel, ComboboxPortal, ComboboxRoot, ComboboxTrigger, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuItemIndicator, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuRoot, ContextMenuSeparator, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, DateFieldInput, DateFieldRoot, DateRangeFieldInput, DateRangeFieldRoot, DialogClose, DialogContent, DialogDescription, DialogOverlay, DialogPortal, DialogRoot, DialogTitle, DialogTrigger, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuItemIndicator, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuRoot, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, HoverCardContent, HoverCardPortal, HoverCardRoot, HoverCardTrigger, ListboxContent, ListboxFilter, ListboxGroup, ListboxGroupLabel, ListboxItem, ListboxItemIndicator, ListboxRoot, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarItemIndicator, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarRoot, MenubarSeparator, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, MonthPickerCell, MonthPickerCellTrigger, MonthPickerGrid, MonthPickerGridBody, MonthPickerGridRow, MonthPickerNext, MonthPickerPrev, MonthPickerRoot, NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuRoot, NavigationMenuTrigger, NavigationMenuViewport, NumberFieldDecrement, NumberFieldIncrement, NumberFieldInput, NumberFieldRoot, PaginationFirst, PaginationLast, PaginationList, PaginationListItem, PaginationNext, PaginationPrev, PaginationRoot, PinInputInput, PinInputRoot, PopoverAnchor, PopoverContent, PopoverPortal, PopoverRoot, PopoverTrigger, Primitive, ProgressIndicator, ProgressRoot, RadioGroupItem, RadioGroupRoot, RangeCalendarCell, RangeCalendarCellTrigger, RangeCalendarGrid, RangeCalendarGridBody, RangeCalendarGridHead, RangeCalendarGridRow, RangeCalendarHeadCell, RangeCalendarNext, RangeCalendarPrev, RangeCalendarRoot, RatingItem, RatingItemIndicator, RatingRoot, SelectContent, SelectGroup, SelectItem, SelectItemIndicator, SelectItemText, SelectLabel, SelectPortal, SelectRoot, SelectTrigger, Separator, SliderRoot, SliderThumb, SliderTrack, SplitterGroup, SplitterPanel, SplitterResizeHandle, StepperDescription, StepperIndicator, StepperItem, StepperRoot, StepperSeparator, StepperTitle, StepperTrigger, SwitchRoot, TabsContent, TabsList, TabsRoot, TabsTrigger, TagsInputInput, TagsInputItem, TagsInputItemText, TagsInputRoot, TimeFieldInput, TimeFieldRoot, ToastClose, ToastDescription, ToastPortal, ToastProvider, ToastRoot, ToastTitle, ToastViewport, Toggle, ToggleGroupItem, ToggleGroupRoot, ToolbarButton, ToolbarRoot, ToolbarToggleGroup, ToolbarToggleItem, TooltipArrow, TooltipContent, TooltipPortal, TooltipProvider, TooltipRoot, TooltipTrigger, TreeItem, TreeRoot, VisuallyHidden, YearPickerCell, YearPickerCellTrigger, YearPickerGrid, YearPickerGridBody, YearPickerGridRow, YearPickerNext, YearPickerPrev, YearPickerRoot, injectComboboxRootContext, injectConfigProviderContext, injectDialogRootContext, injectHoverCardRootContext, injectListboxItemContext, injectListboxRootContext, injectPopoverRootContext, injectSelectRootContext, injectTabsRootContext, injectTooltipProviderContext, injectTooltipRootContext, injectTreeRootContext, useBodyScrollLock, useDirection, useFilter, useForwardExpose, useForwardPropsEmits } from "reka-ui";
+import { Fragment, Transition, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, getCurrentInstance, guardReactiveProps, h, inject, isRef, isVNode, markRaw, mergeModels, mergeProps, nextTick, normalizeClass, normalizeProps, normalizeStyle, onBeforeUnmount, onBeforeUpdate, onMounted, onScopeDispose, onUpdated, openBlock, provide, reactive, ref, render, renderList, renderSlot, resolveDynamicComponent, shallowRef, toDisplayString, toHandlers, toRaw, toRef, toRefs, toValue, unref, useAttrs, useId, useModel, useSlots, useTemplateRef, vModelDynamic, vModelSelect, vModelText, vShow, watch, watchEffect, watchPostEffect, withCtx, withDirectives, withKeys, withModifiers } from "vue";
+import { AccordionContent, AccordionHeader, AccordionItem, AccordionRoot, AccordionTrigger, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogOverlay, AlertDialogPortal, AlertDialogRoot, AlertDialogTitle, AlertDialogTrigger, AspectRatio, CalendarCell, CalendarCellTrigger, CalendarGrid, CalendarGridBody, CalendarGridHead, CalendarGridRow, CalendarHeadCell, CalendarNext, CalendarPrev, CalendarRoot, CheckboxGroupRoot, CheckboxRoot, CollapsibleContent, CollapsibleRoot, CollapsibleTrigger, ComboboxAnchor, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxItemIndicator, ComboboxLabel, ComboboxPortal, ComboboxRoot, ComboboxTrigger, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuItemIndicator, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuRoot, ContextMenuSeparator, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, DateFieldInput, DateFieldRoot, DateRangeFieldInput, DateRangeFieldRoot, DialogClose, DialogContent, DialogDescription, DialogOverlay, DialogPortal, DialogRoot, DialogTitle, DialogTrigger, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuItemIndicator, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuRoot, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, HoverCardContent, HoverCardPortal, HoverCardRoot, HoverCardTrigger, ListboxContent, ListboxFilter, ListboxGroup, ListboxGroupLabel, ListboxItem, ListboxItemIndicator, ListboxRoot, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarItemIndicator, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarRoot, MenubarSeparator, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, MonthPickerCell, MonthPickerCellTrigger, MonthPickerGrid, MonthPickerGridBody, MonthPickerGridRow, MonthPickerNext, MonthPickerPrev, MonthPickerRoot, NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuRoot, NavigationMenuTrigger, NavigationMenuViewport, PaginationFirst, PaginationLast, PaginationList, PaginationListItem, PaginationNext, PaginationPrev, PaginationRoot, PinInputInput, PinInputRoot, PopoverAnchor, PopoverContent, PopoverPortal, PopoverRoot, PopoverTrigger, Primitive, ProgressIndicator, ProgressRoot, RadioGroupItem, RadioGroupRoot, RangeCalendarCell, RangeCalendarCellTrigger, RangeCalendarGrid, RangeCalendarGridBody, RangeCalendarGridHead, RangeCalendarGridRow, RangeCalendarHeadCell, RangeCalendarNext, RangeCalendarPrev, RangeCalendarRoot, RatingItem, RatingItemIndicator, RatingRoot, SelectContent, SelectGroup, SelectItem, SelectItemIndicator, SelectItemText, SelectLabel, SelectPortal, SelectRoot, SelectTrigger, Separator, SliderRoot, SliderThumb, SliderTrack, SplitterGroup, SplitterPanel, SplitterResizeHandle, StepperDescription, StepperIndicator, StepperItem, StepperRoot, StepperSeparator, StepperTitle, StepperTrigger, SwitchRoot, TabsContent, TabsList, TabsRoot, TabsTrigger, TagsInputInput, TagsInputItem, TagsInputItemText, TagsInputRoot, TimeFieldInput, TimeFieldRoot, ToastClose, ToastDescription, ToastPortal, ToastProvider, ToastRoot, ToastTitle, ToastViewport, Toggle, ToggleGroupItem, ToggleGroupRoot, ToolbarButton, ToolbarRoot, ToolbarToggleGroup, ToolbarToggleItem, TooltipArrow, TooltipContent, TooltipPortal, TooltipProvider, TooltipRoot, TooltipTrigger, TreeItem, TreeRoot, VisuallyHidden, YearPickerCell, YearPickerCellTrigger, YearPickerGrid, YearPickerGridBody, YearPickerGridRow, YearPickerNext, YearPickerPrev, YearPickerRoot, injectCollapsibleRootContext, injectComboboxRootContext, injectConfigProviderContext, injectDialogRootContext, injectHoverCardRootContext, injectListboxItemContext, injectListboxRootContext, injectPopoverRootContext, injectSelectRootContext, injectTabsRootContext, injectTooltipProviderContext, injectTooltipRootContext, injectTreeRootContext, useBodyScrollLock, useDirection, useFilter, useForwardExpose, useForwardPropsEmits, useId as useId$1 } from "reka-ui";
 import { ArrowDown, ArrowLeft, ArrowRight, ArrowUp, CalendarClock, CalendarDays, CalendarRange, Check, ChevronDown, ChevronLeft, ChevronRight, ChevronUp, ChevronsLeft, ChevronsRight, ChevronsUpDown, CircleAlert, CircleCheck, CircleX, Copy, Download, Eye, EyeOff, File, GripVertical, Inbox, Info, LayoutGrid, Lightbulb, List, Megaphone, Minus, MoreHorizontal, PanelLeft, Pause, Pencil, Play, QrCode, RefreshCw, RotateCw, Scan, Search, Shrink, Star, TrendingDown, TrendingUp, TriangleAlert, Upload, User, X, ZoomIn, ZoomOut } from "@lucide/vue";
 import { createSharedComposable, defaultDocument, useDocumentVisibility, useElementBounding, useEventListener, useIntersectionObserver, useIntervalFn, useMediaQuery, useMutationObserver, usePreferredReducedMotion, useRafFn, useResizeObserver, useVModel, useWindowSize } from "@vueuse/core";
 import { Motion, animate, useMotionValue, useTransform } from "motion-v";
 import { defaultRangeExtractor, measureElement, observeElementRect, useVirtualizer } from "@tanstack/vue-virtual";
+import { NumberFormatter, NumberParser } from "@internationalized/number";
 import { CalendarDate, CalendarDateTime, Time, getLocalTimeZone, parseDate, parseDateTime, parseTime, today } from "@internationalized/date";
 import { columnFilteringFeature, columnGroupingFeature, columnVisibilityFeature, createExpandedRowModel, createFilteredRowModel, createGroupedRowModel, createPaginatedRowModel, createSortedRowModel, globalFilteringFeature, rowExpandingFeature, rowPaginationFeature, rowSelectionFeature, rowSortingFeature, tableFeatures, useTable } from "@tanstack/vue-table";
 import { encode } from "uqr";
@@ -128,7 +129,7 @@ function prefersReducedMotion() {
 	return typeof window !== "undefined" && matchMedia("(prefers-reduced-motion: reduce)").matches;
 }
 //#endregion
-//#region src/locale/zh-CN.ts
+//#region ../shared/src/locale/zh-CN.ts
 var zhCN = {
 	qrCode: {
 		label: "二维码",
@@ -329,7 +330,7 @@ var zhCN = {
 	}
 };
 //#endregion
-//#region src/locale/en-US.ts
+//#region ../shared/src/locale/en-US.ts
 var enUS = {
 	qrCode: {
 		label: "QR code",
@@ -530,10 +531,8 @@ var enUS = {
 	}
 };
 //#endregion
-//#region src/locale/index.ts
-var UI_LOCALE_KEY = Symbol("hn-ui-locale");
-var fallbackLocale = computed(() => zhCN);
-function merge(base, patch) {
+//#region ../shared/src/locale/index.ts
+function mergeUiMessages(base, patch) {
 	return {
 		qrCode: {
 			...base.qrCode,
@@ -702,8 +701,12 @@ function merge(base, patch) {
 		}
 	};
 }
+//#endregion
+//#region src/locale/index.ts
+var UI_LOCALE_KEY = Symbol("hn-ui-locale");
+var fallbackLocale = computed(() => zhCN);
 function provideUiLocale(messages) {
-	const resolved = computed(() => merge(zhCN, toValue(messages)));
+	const resolved = computed(() => mergeUiMessages(zhCN, toValue(messages)));
 	provide(UI_LOCALE_KEY, resolved);
 	return resolved;
 }
@@ -920,7 +923,7 @@ var IconSlot_default$1 = /* @__PURE__ */ defineComponent({
 	}
 });
 //#endregion
-//#region src/components/ripple/useRipple.ts
+//#region ../shared/src/behavior/ripple.ts
 var INITIAL_ORIGIN_SCALE = .2;
 var PADDING = 12;
 var SOFT_EDGE_MINIMUM_SIZE = 75;
@@ -934,8 +937,7 @@ var STATE = {
 	holding: 2,
 	waitingForClick: 3
 };
-function useRipple(container, surface, isDisabled) {
-	const pressed = ref(false);
+function createRipple(options) {
 	let host = null;
 	let state = STATE.inactive;
 	let startEvent;
@@ -944,20 +946,28 @@ function useRipple(container, surface, isDisabled) {
 	let initialSize = 0;
 	let rippleScale = "";
 	let rippleSize = "";
+	const timers = /* @__PURE__ */ new Set();
+	function later(callback, ms) {
+		const timer = window.setTimeout(() => {
+			timers.delete(timer);
+			callback();
+		}, ms);
+		timers.add(timer);
+	}
 	const isTouch = ({ pointerType }) => pointerType === "touch";
 	function shouldReact(event) {
-		if (isDisabled() || !event.isPrimary) return false;
+		if (options.disabled() || !event.isPrimary) return false;
 		if (startEvent && startEvent.pointerId !== event.pointerId) return false;
 		if (event.type === "pointerenter" || event.type === "pointerleave") return !isTouch(event);
 		return isTouch(event) || event.buttons === 1;
 	}
 	function inBounds({ x, y }) {
-		const rect = container.value?.getBoundingClientRect();
+		const rect = options.container()?.getBoundingClientRect();
 		if (!rect) return false;
 		return x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom;
 	}
 	function determineRippleSize() {
-		const rect = container.value?.getBoundingClientRect();
+		const rect = options.container()?.getBoundingClientRect();
 		if (!rect) return;
 		const maxDim = Math.max(rect.height, rect.width);
 		const softEdgeSize = Math.max(SOFT_EDGE_CONTAINER_RATIO * maxDim, SOFT_EDGE_MINIMUM_SIZE);
@@ -966,7 +976,7 @@ function useRipple(container, surface, isDisabled) {
 		rippleSize = `${initialSize}px`;
 	}
 	function normalizedCoords(event) {
-		const rect = container.value?.getBoundingClientRect();
+		const rect = options.container()?.getBoundingClientRect();
 		if (!rect) return {
 			x: 0,
 			y: 0
@@ -977,7 +987,7 @@ function useRipple(container, surface, isDisabled) {
 		};
 	}
 	function translationCoords(positionEvent) {
-		const rect = container.value?.getBoundingClientRect();
+		const rect = options.container()?.getBoundingClientRect();
 		if (!rect) return {
 			startPoint: {
 				x: 0,
@@ -998,9 +1008,9 @@ function useRipple(container, surface, isDisabled) {
 		};
 	}
 	function startPress(positionEvent) {
-		const el = surface.value;
+		const el = options.surface();
 		if (!el) return;
-		pressed.value = true;
+		options.onPressedChange(true);
 		growAnimation?.cancel();
 		growAnimation = void 0;
 		determineRippleSize();
@@ -1027,12 +1037,12 @@ function useRipple(container, surface, isDisabled) {
 		if (typeof animation?.currentTime === "number") playedMs = animation.currentTime;
 		else if (animation?.currentTime) playedMs = animation.currentTime.to("ms").value;
 		if (playedMs >= MINIMUM_PRESS_MS) {
-			pressed.value = false;
+			options.onPressedChange(false);
 			return;
 		}
-		window.setTimeout(() => {
+		later(() => {
 			if (growAnimation !== animation) return;
-			pressed.value = false;
+			options.onPressedChange(false);
 		}, MINIMUM_PRESS_MS - playedMs);
 	}
 	function onPointerDown(event) {
@@ -1046,7 +1056,7 @@ function useRipple(container, surface, isDisabled) {
 		if (checkBoundsAfterContextMenu && !inBounds(event)) return;
 		checkBoundsAfterContextMenu = false;
 		state = STATE.touchDelay;
-		window.setTimeout(() => {
+		later(() => {
 			if (state !== STATE.touchDelay) return;
 			state = STATE.holding;
 			startPress(event);
@@ -1072,7 +1082,7 @@ function useRipple(container, surface, isDisabled) {
 		endPress();
 	}
 	function onClick() {
-		if (isDisabled()) return;
+		if (options.disabled()) return;
 		if (state === STATE.waitingForClick) {
 			endPress();
 			return;
@@ -1083,7 +1093,7 @@ function useRipple(container, surface, isDisabled) {
 		}
 	}
 	function onContextMenu() {
-		if (isDisabled()) return;
+		if (options.disabled()) return;
 		checkBoundsAfterContextMenu = true;
 		endPress();
 	}
@@ -1095,16 +1105,37 @@ function useRipple(container, surface, isDisabled) {
 		["pointerleave", onPointerLeave],
 		["pointerup", onPointerUp]
 	];
-	onMounted(() => {
-		host = container.value?.parentElement ?? null;
+	function connect() {
+		host = options.container()?.parentElement ?? null;
 		if (!host) return;
 		for (const [name, fn] of listeners) host.addEventListener(name, fn, true);
-	});
-	onBeforeUnmount(() => {
+	}
+	function disconnect() {
+		for (const timer of timers) window.clearTimeout(timer);
+		timers.clear();
 		if (!host) return;
 		for (const [name, fn] of listeners) host.removeEventListener(name, fn, true);
 		host = null;
+	}
+	return {
+		connect,
+		disconnect
+	};
+}
+//#endregion
+//#region src/components/ripple/useRipple.ts
+function useRipple(container, surface, isDisabled) {
+	const pressed = ref(false);
+	const ripple = createRipple({
+		container: () => container.value,
+		surface: () => surface.value,
+		disabled: isDisabled,
+		onPressedChange: (value) => {
+			pressed.value = value;
+		}
 	});
+	onMounted(ripple.connect);
+	onBeforeUnmount(ripple.disconnect);
 	return { pressed };
 }
 //#endregion
@@ -2244,13 +2275,40 @@ function useOverlayPortal(open) {
 	};
 }
 //#endregion
-//#region src/lib/overlay-anchor.ts
+//#region ../shared/src/lib/overlay-anchor.ts
 function overlayAnchorElement(anchor) {
 	return anchor && "nodeType" in anchor ? anchor : void 0;
 }
 function overlayAnchorContext(anchor) {
 	return overlayAnchorElement(anchor) ?? (anchor && "contextElement" in anchor ? anchor.contextElement : void 0);
 }
+function createOverlayReference(anchor, current) {
+	const contextElement = overlayAnchorContext(anchor);
+	if (contextElement && !contextElement.isConnected) return void 0;
+	const measure = () => {
+		const { x, y, width, height, top, right, bottom, left } = anchor.getBoundingClientRect();
+		return {
+			x,
+			y,
+			width,
+			height,
+			top,
+			right,
+			bottom,
+			left
+		};
+	};
+	let rect = measure();
+	return {
+		contextElement,
+		getBoundingClientRect: () => {
+			if (current() && (!contextElement || contextElement.isConnected)) rect = measure();
+			return rect;
+		}
+	};
+}
+//#endregion
+//#region src/lib/overlay-anchor.ts
 function useOverlayAnchor(source, open, present, strategy, direction = () => void 0) {
 	const reference = shallowRef();
 	let current;
@@ -2267,30 +2325,10 @@ function useOverlayAnchor(source, open, present, strategy, direction = () => voi
 			return;
 		}
 		if (!anchor || !active && reference.value && anchor !== current) return;
-		const contextElement = overlayAnchorContext(anchor);
-		if (contextElement && !contextElement.isConnected) return;
+		const next = createOverlayReference(anchor, () => source() === anchor);
+		if (!next) return;
 		current = anchor;
-		const measure = () => {
-			const { x, y, width, height, top, right, bottom, left } = anchor.getBoundingClientRect();
-			return {
-				x,
-				y,
-				width,
-				height,
-				top,
-				right,
-				bottom,
-				left
-			};
-		};
-		let rect = measure();
-		reference.value = {
-			contextElement,
-			getBoundingClientRect: () => {
-				if (source() === anchor && (!contextElement || contextElement.isConnected)) rect = measure();
-				return rect;
-			}
-		};
+		reference.value = next;
 	}, {
 		immediate: true,
 		flush: "post"
@@ -3159,12 +3197,36 @@ var Skeleton_default = /* @__PURE__ */ defineComponent({
 var VisuallyHidden_default = /* @__PURE__ */ defineComponent({
 	name: "HnVisuallyHidden",
 	__name: "VisuallyHidden",
+	props: {
+		asChild: { type: Boolean },
+		as: { default: "span" }
+	},
 	setup(__props) {
+		const props = __props;
+		const hidden = {
+			position: "absolute",
+			border: 0,
+			width: "1px",
+			height: "1px",
+			padding: 0,
+			margin: "-1px",
+			overflow: "hidden",
+			clip: "rect(0, 0, 0, 0)",
+			clipPath: "inset(50%)",
+			whiteSpace: "nowrap",
+			wordWrap: "normal",
+			top: "-1px",
+			left: "-1px"
+		};
 		return (_ctx, _cache) => {
-			return openBlock(), createBlock(unref(VisuallyHidden), null, {
+			return openBlock(), createBlock(unref(Primitive), {
+				as: props.as,
+				"as-child": props.asChild,
+				style: hidden
+			}, {
 				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
 				_: 3
-			});
+			}, 8, ["as", "as-child"]);
 		};
 	}
 });
@@ -3349,7 +3411,7 @@ var d = getApi("ResizeObserver");
 var p = getApi("ScrollTimeline");
 var isUndefined = (t) => t === void 0;
 var isNull = (t) => t === null;
-var isNumber = (t) => typeof t === "number";
+var isNumber$1 = (t) => typeof t === "number";
 var isString = (t) => typeof t === "string";
 var isBoolean = (t) => typeof t === "boolean";
 var isFunction = (t) => typeof t === "function";
@@ -3357,7 +3419,7 @@ var isArray = (t) => Array.isArray(t);
 var isObject = (t) => typeof t === "object" && !isArray(t) && !isNull(t);
 var isArrayLike = (t) => {
 	const n = !!t && t.length;
-	const o = isNumber(n) && n > -1 && n % 1 == 0;
+	const o = isNumber$1(n) && n > -1 && n % 1 == 0;
 	return isArray(t) || !isFunction(t) && o ? n > 0 && isObject(t) ? n - 1 in t : true : false;
 };
 var isPlainObject = (t) => !!t && t.constructor === Object;
@@ -3371,7 +3433,7 @@ function each(t, n) {
 }
 var inArray = (t, n) => t.indexOf(n) >= 0;
 var concat = (t, n) => t.concat(n);
-var push$1 = (t, n, o) => {
+var push = (t, n, o) => {
 	if (!isString(n) && isArrayLike(n)) Array.prototype.push.apply(t, n);
 	else t.push(n);
 	return t;
@@ -3436,7 +3498,7 @@ var selfClearTimeout = (t) => {
 };
 var getDebouncer = (t) => {
 	const n = isFunction(t) ? t() : t;
-	if (isNumber(n)) {
+	if (isNumber$1(n)) {
 		const t = n ? a : l;
 		const o = n ? u : i;
 		return (s) => {
@@ -3628,7 +3690,7 @@ function setStyles(t, n) {
 	t && n && each(n, ((n, o) => {
 		try {
 			const s = t.style;
-			const e = isNull(n) || isBoolean(n) ? "" : isNumber(n) ? numberToCssPx(n) : n;
+			const e = isNull(n) || isBoolean(n) ? "" : isNumber$1(n) ? numberToCssPx(n) : n;
 			if (o.indexOf("--") === 0) s.setProperty(o, e);
 			else s[o] = e;
 		} catch (s) {}
@@ -3722,12 +3784,12 @@ var stopPropagation = (t) => t.stopPropagation();
 var preventDefault = (t) => t.preventDefault();
 var stopAndPrevent = (t) => stopPropagation(t) || preventDefault(t);
 var scrollElementTo = (t, n) => {
-	const { x: o, y: s } = isNumber(n) ? {
+	const { x: o, y: s } = isNumber$1(n) ? {
 		x: n,
 		y: n
 	} : n || {};
-	isNumber(o) && (t.scrollLeft = o);
-	isNumber(s) && (t.scrollTop = s);
+	isNumber$1(o) && (t.scrollLeft = o);
+	isNumber$1(s) && (t.scrollTop = s);
 };
 var getElementScroll = (t) => ({
 	x: t.scrollLeft,
@@ -3823,7 +3885,7 @@ var createEventListenerHub = (t) => {
 		const e = [];
 		each(s, ((n) => {
 			const o = t[n];
-			if (o) push$1(e, addEvent(n, o));
+			if (o) push(e, addEvent(n, o));
 		}));
 		return bind(runEachAndClear, e);
 	};
@@ -4107,7 +4169,7 @@ var createEventContentChange = (t, n, o) => {
 						e.delete(c);
 					} else n(o);
 				}));
-				e.set(c, push$1(i, t));
+				e.set(c, push(i, t));
 			} else {
 				runEachAndClear(i);
 				e.delete(c);
@@ -4146,18 +4208,18 @@ var createDOMObserver = (t, n, o, s) => {
 					const n = b && C;
 					const a = n && l && is(c, l);
 					const p = (a ? !r(c, e, u, O) : !b || n) && !i(o, !!a, t, s);
-					each(d, ((t) => push$1(f, t)));
-					each(h, ((t) => push$1(f, t)));
+					each(d, ((t) => push(f, t)));
+					each(h, ((t) => push(f, t)));
 					g = g || p;
 				}
 				if (!n && w && C && !r(c, e, u, O)) {
-					push$1(_, e);
+					push(_, e);
 					p = p || $;
 				}
 			}));
 			d(((t) => deduplicateArray(f).reduce(((n, o) => {
-				push$1(n, find(t, o));
-				return is(o, t) ? push$1(n, o) : n;
+				push(n, find(t, o));
+				return is(o, t) ? push(n, o) : n;
 			}), [])));
 			if (n) {
 				if (!e && g) o(false);
@@ -4236,17 +4298,17 @@ var createSizeObserver = (t, n, o) => {
 			const resizeObserverCallback = (t) => n(t);
 			const s = new d(resizeObserverCallback);
 			s.observe(Rt ? t : l);
-			push$1(o, [() => {
+			push(o, [() => {
 				s.disconnect();
 			}, !Rt && appendChildren(t, i)]);
 			if (Rt) {
 				const n = new d(resizeObserverCallback);
 				n.observe(t, { box: "border-box" });
-				push$1(o, (() => n.disconnect()));
+				push(o, (() => n.disconnect()));
 			}
 		} else if (e) {
 			const [n, c] = e(l, onSizeChangedCallbackProxy, s);
-			push$1(o, concat([
+			push(o, concat([
 				addClass(i, ot),
 				addEventListener(i, "animationstart", n),
 				appendChildren(t, i)
@@ -4273,7 +4335,7 @@ var createTrinsicObserver = (t, n) => {
 		if (_) {
 			o = new _(bind(intersectionObserverCallback, false), { root: t });
 			o.observe(s);
-			push$1(n, (() => {
+			push(n, (() => {
 				o.disconnect();
 			}));
 		} else {
@@ -4281,10 +4343,10 @@ var createTrinsicObserver = (t, n) => {
 				const t = I(s);
 				triggerOnTrinsicChangedCallback(t);
 			};
-			push$1(n, createSizeObserver(s, onSizeChanged)());
+			push(n, createSizeObserver(s, onSizeChanged)());
 			onSizeChanged();
 		}
-		return bind(runEachAndClear, push$1(n, appendChildren(t, s)));
+		return bind(runEachAndClear, push(n, appendChildren(t, s)));
 	}, () => o && intersectionObserverCallback(true, o.takeRecords())];
 };
 var createObserversSetup = (t, n, o, s, sleeping) => {
@@ -4332,7 +4394,7 @@ var createObserversSetup = (t, n, o, s, sleeping) => {
 				t = s;
 				n = e;
 				o = r;
-			} else if (isNumber(c)) {
+			} else if (isNumber$1(c)) {
 				t = c;
 				n = false;
 				o = false;
@@ -4479,7 +4541,7 @@ var createObserversSetup = (t, n, o, s, sleeping) => {
 			}
 			if (m) {
 				z.O();
-				if (isArray(y) || isNumber(y)) {
+				if (isArray(y) || isNumber$1(y)) {
 					e = y;
 					c = false;
 					r = It;
@@ -4665,8 +4727,8 @@ var createScrollbarsSetupElements = (t, n, o, s) => {
 			kt: r
 		};
 		const l = C[n];
-		push$1(t ? S : m, i);
-		push$1(w, [
+		push(t ? S : m, i);
+		push(w, [
 			appendChildren(e, c),
 			appendChildren(c, r),
 			bind(removeElements, e),
@@ -4789,10 +4851,10 @@ var createScrollbarsSetupEvents = (t, n, o, s, r) => (i, l, u) => {
 						const { Vt: n } = o;
 						const s = t(scrollRelative, moveHandleRelative, bind(getHandleOffset), k, n[f], S, !!u, ((t) => {
 							if (t) V();
-							else push$1(L, V);
+							else push(L, V);
 						}));
-						push$1(L, s);
-						push$1(_, bind(s, true));
+						push(L, s);
+						push(_, bind(s, true));
 					}
 				}
 			}
@@ -4933,7 +4995,7 @@ var createScrollbarsSetup = (t, n, o, s, e, c, r) => {
 	];
 	const R = getStaticPluginModuleInstance(xt);
 	return [
-		() => bind(runEachAndClear, push$1(M, C())),
+		() => bind(runEachAndClear, push(M, C())),
 		({ Dt: t, It: n, Zt: o, tn: c }) => {
 			const { nn: r, sn: i, en: p, cn: v } = c || {};
 			const { Ct: g, ft: h } = o || {};
@@ -5107,7 +5169,7 @@ var createStructureSetupElements = (t) => {
 		appendChildren(W, J);
 		appendChildren(J || W, !H && Q);
 		appendChildren(Q, nt);
-		push$1(ot, [c, () => {
+		push(ot, [c, () => {
 			const t = getFocusedElement();
 			const n = elementIsGenerated(Q);
 			const e = n && t === Q ? Y : t;
@@ -5126,7 +5188,7 @@ var createStructureSetupElements = (t) => {
 		}]);
 		if (e && !H) {
 			addAttrClass(Q, j, K);
-			push$1(ot, bind(removeAttrs, Q, j));
+			push(ot, bind(removeAttrs, Q, j));
 		}
 		focusElement(!H && g && n === Y && t.top === t ? Q : n);
 		c();
@@ -5699,7 +5761,7 @@ var OverlayScrollbars = (t, n, o) => {
 			sleep: h,
 			plugin: (t) => i[keys(t)[0]]
 		};
-		push$1(r, [S]);
+		push(r, [S]);
 		addInstance(c, m);
 		registerPluginModuleInstances(k, OverlayScrollbars, [
 			m,
@@ -5710,7 +5772,7 @@ var OverlayScrollbars = (t, n, o) => {
 			destroy(true);
 			return m;
 		}
-		push$1(r, v());
+		push(r, v());
 		triggerEvent("initialized", [m]);
 		m.update();
 		return m;
@@ -5805,6 +5867,81 @@ function useOverlayScrollbars(host, content, options) {
 	};
 }
 //#endregion
+//#region ../shared/src/lib/scroll-area.ts
+var NONE = {
+	xStart: false,
+	xEnd: false,
+	yStart: false,
+	yEnd: false
+};
+function scrollEdges(element, direction, shadow) {
+	if (!element || !shadow) return NONE;
+	const room = 1;
+	const x = direction !== "vertical";
+	const y = direction !== "horizontal";
+	return {
+		xStart: x && Math.abs(element.scrollLeft) > room,
+		xEnd: x && Math.abs(element.scrollLeft) + element.clientWidth < element.scrollWidth - room,
+		yStart: y && element.scrollTop > room,
+		yEnd: y && element.scrollTop + element.clientHeight < element.scrollHeight - room
+	};
+}
+function redirectWheel(element, event) {
+	if (Math.abs(event.deltaY) <= Math.abs(event.deltaX)) return;
+	const max = element.scrollWidth - element.clientWidth;
+	if (max <= 0) return;
+	const sign = getComputedStyle(element).direction === "rtl" ? -1 : 1;
+	const offset = Math.max(0, Math.min(max, element.scrollLeft * sign));
+	const atStart = offset <= 1 && event.deltaY < 0;
+	const atEnd = offset >= max - 1 && event.deltaY > 0;
+	if (atStart || atEnd) return;
+	event.preventDefault();
+	element.scrollLeft = (offset + event.deltaY) * sign;
+}
+function blockWhenInert(element) {
+	const block = (event) => {
+		if (getComputedStyle(element).pointerEvents === "none") event.preventDefault();
+	};
+	element.addEventListener("wheel", block, {
+		passive: false,
+		capture: true
+	});
+	element.addEventListener("touchmove", block, {
+		passive: false,
+		capture: true
+	});
+	return () => {
+		element.removeEventListener("wheel", block, true);
+		element.removeEventListener("touchmove", block, true);
+	};
+}
+var SCROLL_AREA_OVERFLOW = {
+	vertical: {
+		x: "hidden",
+		y: "scroll"
+	},
+	horizontal: {
+		x: "scroll",
+		y: "hidden"
+	},
+	both: {
+		x: "scroll",
+		y: "scroll"
+	}
+};
+function scrollAreaOptions(options) {
+	return {
+		scrollbars: {
+			theme: "os-theme-dark",
+			visibility: options.scrollbar ? "auto" : "hidden",
+			autoHide: options.autoHide,
+			autoHideDelay: 800
+		},
+		overflow: SCROLL_AREA_OVERFLOW[options.direction],
+		update: { elementEvents: [["img", "load"]] }
+	};
+}
+//#endregion
 //#region src/components/scroll-area/composables/useEdgeShadow.ts
 function useEdgeShadow(viewport, opts) {
 	const showXStart = shallowRef(false);
@@ -5812,22 +5949,12 @@ function useEdgeShadow(viewport, opts) {
 	const showYStart = shallowRef(false);
 	const showYEnd = shallowRef(false);
 	function updateEdges() {
-		const el = viewport.value;
 		const { direction, shadow } = opts();
-		if (!el || !shadow) {
-			showXStart.value = false;
-			showXEnd.value = false;
-			showYStart.value = false;
-			showYEnd.value = false;
-			return;
-		}
-		const room = 1;
-		const x = direction !== "vertical";
-		const y = direction !== "horizontal";
-		showXStart.value = x && Math.abs(el.scrollLeft) > room;
-		showXEnd.value = x && Math.abs(el.scrollLeft) + el.clientWidth < el.scrollWidth - room;
-		showYStart.value = y && el.scrollTop > room;
-		showYEnd.value = y && el.scrollTop + el.clientHeight < el.scrollHeight - room;
+		const edges = scrollEdges(viewport.value, direction, shadow);
+		showXStart.value = edges.xStart;
+		showXEnd.value = edges.xEnd;
+		showYStart.value = edges.yStart;
+		showYEnd.value = edges.yEnd;
 	}
 	return {
 		showXStart,
@@ -5844,16 +5971,7 @@ function useWheelRedirect(viewport, enabled) {
 		if (event.defaultPrevented || !enabled()) return;
 		const el = viewport.value;
 		if (!el) return;
-		if (Math.abs(event.deltaY) <= Math.abs(event.deltaX)) return;
-		const max = el.scrollWidth - el.clientWidth;
-		if (max <= 0) return;
-		const sign = getComputedStyle(el).direction === "rtl" ? -1 : 1;
-		const offset = Math.max(0, Math.min(max, el.scrollLeft * sign));
-		const atStart = offset <= 1 && event.deltaY < 0;
-		const atEnd = offset >= max - 1 && event.deltaY > 0;
-		if (atStart || atEnd) return;
-		event.preventDefault();
-		el.scrollLeft = (offset + event.deltaY) * sign;
+		redirectWheel(el, event);
 	}
 	watch(viewport, (el, _, onCleanup) => {
 		if (!el) return;
@@ -5885,21 +6003,7 @@ function useLayerLock(viewport) {
 		release = void 0;
 		const el = viewport.value;
 		if (!el || !locked.value) return;
-		const block = (event) => {
-			if (getComputedStyle(el).pointerEvents === "none") event.preventDefault();
-		};
-		el.addEventListener("wheel", block, {
-			passive: false,
-			capture: true
-		});
-		el.addEventListener("touchmove", block, {
-			passive: false,
-			capture: true
-		});
-		release = () => {
-			el.removeEventListener("wheel", block, true);
-			el.removeEventListener("touchmove", block, true);
-		};
+		release = blockWhenInert(el);
 	}
 	watch([locked, viewport], apply, { flush: "post" });
 	onBeforeUnmount(() => release?.());
@@ -5971,31 +6075,12 @@ var ScrollArea_default = /* @__PURE__ */ defineComponent({
 		const t = useUiLocale();
 		const host = shallowRef();
 		const content = shallowRef();
-		const overflow = {
-			vertical: {
-				x: "hidden",
-				y: "scroll"
-			},
-			horizontal: {
-				x: "scroll",
-				y: "hidden"
-			},
-			both: {
-				x: "scroll",
-				y: "scroll"
-			}
-		};
 		function options() {
-			return {
-				scrollbars: {
-					theme: "os-theme-dark",
-					visibility: props.scrollbar ? "auto" : "hidden",
-					autoHide: props.autoHide,
-					autoHideDelay: 800
-				},
-				overflow: overflow[props.direction],
-				update: { elementEvents: [["img", "load"]] }
-			};
+			return scrollAreaOptions({
+				direction: props.direction,
+				autoHide: props.autoHide,
+				scrollbar: props.scrollbar
+			});
 		}
 		const { viewport, instance, onEvent } = useOverlayScrollbars(host, content, options);
 		const { hostFocus, viewportFocus } = useScrollFocus(host, viewport, () => ({
@@ -6530,7 +6615,7 @@ function stepZoom(zoom, direction, max = 2) {
 	return clampZoom(zoom * ZOOM_STEP ** direction, 1, max);
 }
 //#endregion
-//#region src/components/lightbox/utils/pose.ts
+//#region ../shared/src/lib/lightbox/pose.ts
 var REST_POSE = {
 	x: 0,
 	y: 0,
@@ -7462,7 +7547,7 @@ function useLightboxLarge(item, active) {
 	};
 }
 //#endregion
-//#region src/components/lightbox/utils/clip.ts
+//#region ../shared/src/lib/lightbox/clip.ts
 function emptyCorners() {
 	return [
 		{
@@ -7587,7 +7672,7 @@ function clipOf(el, box) {
 	};
 }
 //#endregion
-//#region src/components/lightbox/utils/source.ts
+//#region ../shared/src/lib/lightbox/source.ts
 function sourceRect(source) {
 	if (!source) return null;
 	const isElement = "getBoundingClientRect" in source;
@@ -7685,6 +7770,10 @@ function useLightboxPhase(options) {
 //#endregion
 //#region src/components/lightbox/composables/useLightboxHint.ts
 function useLightboxHint(options) {
+	if (typeof window === "undefined") return {
+		x: useMotionValue(0),
+		y: useMotionValue(0)
+	};
 	const { motion, frames, paging } = options;
 	function corner() {
 		const frame = frames.frameOf(options.current());
@@ -7810,7 +7899,7 @@ function useLightboxRotation(frames, current) {
 	};
 }
 //#endregion
-//#region src/components/lightbox/utils/download.ts
+//#region ../shared/src/lib/lightbox/download.ts
 function fileNameOf(url, fallback = "image") {
 	try {
 		const parsed = new URL(url, "http://localhost");
@@ -8751,7 +8840,7 @@ var Callout_default = /* @__PURE__ */ defineComponent({
 	}
 });
 //#endregion
-//#region src/lib/collapse.ts
+//#region ../shared/src/lib/collapse.ts
 function collapseGapOf(parent, axis = "y") {
 	if (!parent) return "0px";
 	const style = getComputedStyle(parent);
@@ -8778,6 +8867,8 @@ function collapseHooks(axis = "y", parentOf) {
 		beforeLeave
 	};
 }
+//#endregion
+//#region src/lib/collapse.ts
 function useCollapseHooks(axis = "y") {
 	const instance = getCurrentInstance();
 	let parent = null;
@@ -9564,7 +9655,10 @@ var PaginationPopup_default = /* @__PURE__ */ defineComponent({
 	}
 });
 //#endregion
-//#region src/components/pagination/utils/ranges.ts
+//#region ../shared/src/lib/pagination.ts
+function paginationInteger(value, fallback, minimum) {
+	return Number.isFinite(value) ? Math.max(minimum, Math.floor(value)) : fallback;
+}
 function paginationRanges(items) {
 	return items.flatMap((item, index) => {
 		if (item.type !== "ellipsis") return [];
@@ -9579,7 +9673,7 @@ function paginationRanges(items) {
 	});
 }
 //#endregion
-//#region src/lib/pointer-corridor.ts
+//#region ../shared/src/lib/pointer-corridor.ts
 var cross = (a, b, c) => (b.x - a.x) * (c.y - a.y) - (b.y - a.y) * (c.x - a.x);
 function inPointerCorridor(point, first, second) {
 	const points = [first, second].flatMap((rect) => [
@@ -10045,12 +10139,22 @@ function injectInputGroup() {
 	return inject(INPUT_GROUP_KEY, null);
 }
 //#endregion
-//#region src/components/select/types.ts
-function isOptionGroup(item) {
-	return !("value" in item) && "options" in item;
+//#region ../shared/src/lib/virtual/flow.ts
+function virtualFlow(items, total, margin = 0) {
+	return {
+		entries: items.map((item, index) => ({
+			...item,
+			gapBefore: index ? Math.max(0, item.start - items[index - 1].end) : 0
+		})),
+		before: Math.max(0, (items[0]?.start ?? margin) - margin),
+		after: Math.max(0, total - ((items.at(-1)?.end ?? margin) - margin))
+	};
 }
-function flattenOptions(items) {
-	return items.flatMap((item) => isOptionGroup(item) ? item.options : [item]);
+function measuredSize(size, cached, estimate) {
+	return size > 0 ? size : cached ?? estimate();
+}
+function scrollPosition(offset, adjustments, horizontal, rtl) {
+	return { [horizontal ? "left" : "top"]: (offset + adjustments) * (horizontal && rtl ? -1 : 1) };
 }
 //#endregion
 //#region src/lib/virtual/useVirtualWindow.ts
@@ -10058,65 +10162,85 @@ function useVirtualWindow(options) {
 	return useVirtualizer(computed(() => ({
 		useAnimationFrameWithResizeObserver: true,
 		measureElement: (element, entry, instance) => {
-			const size = measureElement(element, entry, instance);
 			const index = instance.indexFromElement(element);
-			return size > 0 ? size : instance.itemSizeCache.get(instance.options.getItemKey(index)) ?? instance.options.estimateSize(index);
+			return measuredSize(measureElement(element, entry, instance), instance.itemSizeCache.get(instance.options.getItemKey(index)), () => instance.options.estimateSize(index));
 		},
 		scrollToFn: (offset, { adjustments = 0, behavior }, instance) => {
 			instance.scrollElement?.scrollTo({
-				[instance.options.horizontal ? "left" : "top"]: (offset + adjustments) * (instance.options.horizontal && instance.options.isRtl ? -1 : 1),
+				...scrollPosition(offset, adjustments, instance.options.horizontal, instance.options.isRtl),
 				behavior
 			});
 		},
 		...toValue(options)
 	})));
 }
-function virtualFlow(items, total, margin = 0) {
+//#endregion
+//#region ../shared/src/lib/virtual/collection.ts
+var VIRTUAL_RECT = {
+	width: 320,
+	height: 320
+};
+function finite(value, fallback) {
+	return value !== void 0 && Number.isFinite(value) ? value : fallback;
+}
+function virtualConfig(config) {
+	return typeof config === "object" ? config : {};
+}
+function collectionEstimator(items, config, estimate) {
+	return (index) => Math.max(1, finite(config.estimateSize, estimate?.(items[index]) ?? 36));
+}
+function collectionOverscan(config) {
+	return Math.max(0, Math.floor(finite(config.overscan, 6)));
+}
+function centeredOffset(index, count, estimateSize, viewport = VIRTUAL_RECT.height) {
+	if (index < 0 || index >= count) return 0;
+	let offset = (estimateSize(index) - viewport) / 2;
+	for (let current = 0; current < index; current++) offset += estimateSize(current);
+	return Math.max(0, offset);
+}
+function mergeRange(indexes, retained, count, include) {
+	const merged = [...indexes, ...retained];
+	return [.../* @__PURE__ */ new Set([...merged, ...include?.(merged) ?? []])].filter((index) => index >= 0 && index < count).sort((a, b) => a - b);
+}
+function fallbackRect(rect) {
 	return {
-		entries: items.map((item, index) => ({
-			...item,
-			gapBefore: index ? Math.max(0, item.start - items[index - 1].end) : 0
-		})),
-		before: Math.max(0, (items[0]?.start ?? margin) - margin),
-		after: Math.max(0, total - ((items.at(-1)?.end ?? margin) - margin))
+		width: rect.width || VIRTUAL_RECT.width,
+		height: rect.height || VIRTUAL_RECT.height
 	};
 }
+function layoutTop(element) {
+	let top = 0;
+	for (let node = element; node; node = node.offsetParent) top += node.offsetTop;
+	return top;
+}
+function scrollMargin(body, viewport) {
+	return Math.max(0, layoutTop(body) - layoutTop(viewport));
+}
+function overscrolledOffset(scrollTop, total, clientHeight) {
+	const max = Math.max(0, total - clientHeight);
+	return scrollTop > max ? max : void 0;
+}
 //#endregion
 //#region src/lib/virtual/useVirtualCollection.ts
 function useVirtualCollection(options) {
 	const margin = shallowRef(0);
-	const finite = (value, fallback) => value !== void 0 && Number.isFinite(value) ? value : fallback;
-	const config = computed(() => typeof options.config() === "object" ? options.config() : {});
+	const config = computed(() => virtualConfig(options.config()));
 	const virtualizer = useVirtualWindow(computed(() => {
 		const items = options.items();
 		const retained = options.retain?.() ?? [];
 		const initialIndex = options.initialIndex?.() ?? -1;
-		const estimateSize = (index) => Math.max(1, finite(config.value.estimateSize, options.estimate?.(items[index]) ?? 36));
+		const estimateSize = collectionEstimator(items, config.value, options.estimate);
 		return {
 			count: items.length,
 			getScrollElement: () => options.viewport.value ?? null,
 			getItemKey: (index) => options.key(items[index]),
 			estimateSize,
-			overscan: Math.max(0, Math.floor(finite(config.value.overscan, 6))),
-			initialRect: {
-				width: 320,
-				height: 320
-			},
-			initialOffset: () => {
-				if (initialIndex < 0 || initialIndex >= items.length) return 0;
-				let offset = (estimateSize(initialIndex) - 320) / 2;
-				for (let index = 0; index < initialIndex; index++) offset += estimateSize(index);
-				return Math.max(0, offset);
-			},
+			overscan: collectionOverscan(config.value),
+			initialRect: VIRTUAL_RECT,
+			initialOffset: () => centeredOffset(initialIndex, items.length, estimateSize),
 			scrollMargin: margin.value,
-			observeElementRect: (instance, callback) => observeElementRect(instance, (rect) => callback({
-				width: rect.width || 320,
-				height: rect.height || 320
-			})),
-			rangeExtractor: (range) => {
-				const indexes = [...defaultRangeExtractor(range), ...retained];
-				return [.../* @__PURE__ */ new Set([...indexes, ...options.include?.(indexes) ?? []])].filter((index) => index >= 0 && index < items.length).sort((a, b) => a - b);
-			}
+			observeElementRect: (instance, callback) => observeElementRect(instance, (rect) => callback(fallbackRect(rect))),
+			rangeExtractor: (range) => mergeRange(defaultRangeExtractor(range), retained, items.length, options.include)
 		};
 	}));
 	const flow = computed(() => virtualFlow(virtualizer.value.getVirtualItems(), virtualizer.value.getTotalSize(), margin.value));
@@ -10128,15 +10252,10 @@ function useVirtualCollection(options) {
 		if (element === null) virtualizer.value.measureElement(null);
 		else if (options.viewport.value && element instanceof HTMLElement && element.isConnected) virtualizer.value.measureElement(element);
 	}
-	function layoutTop(element) {
-		let top = 0;
-		for (let node = element; node; node = node.offsetParent) top += node.offsetTop;
-		return top;
-	}
 	async function refresh() {
 		const viewport = options.viewport.value;
 		const body = options.body.value;
-		if (viewport && body?.isConnected) margin.value = Math.max(0, layoutTop(body) - layoutTop(viewport));
+		if (viewport && body?.isConnected) margin.value = scrollMargin(body, viewport);
 		virtualizer.value.measure();
 		await nextTick();
 		for (const child of options.body.value?.children ?? []) measure(child);
@@ -10159,7 +10278,9 @@ function useVirtualCollection(options) {
 	watch(() => [config.value.estimateSize, options.items().length], async () => {
 		await nextTick();
 		const viewport = options.viewport.value;
-		if (viewport && viewport.scrollTop > Math.max(0, virtualizer.value.getTotalSize() - viewport.clientHeight)) virtualizer.value.scrollToOffset(Math.max(0, virtualizer.value.getTotalSize() - viewport.clientHeight));
+		if (!viewport) return;
+		const offset = overscrolledOffset(viewport.scrollTop, virtualizer.value.getTotalSize(), viewport.clientHeight);
+		if (offset !== void 0) virtualizer.value.scrollToOffset(offset);
 	});
 	onScopeDispose(() => {
 		if (frame !== void 0) cancelAnimationFrame(frame);
@@ -10176,7 +10297,7 @@ function useVirtualCollection(options) {
 	};
 }
 //#endregion
-//#region src/lib/virtual/navigation.ts
+//#region ../shared/src/lib/virtual/navigation.ts
 function nextEnabled(length, from, step, disabled) {
 	for (let index = from; index >= 0 && index < length; index += step) if (!disabled(index)) return index;
 	return -1;
@@ -10192,6 +10313,123 @@ function typeaheadMatch(labels, query, current, disabled) {
 	return -1;
 }
 //#endregion
+//#region ../shared/src/types/select.ts
+function isOptionGroup(item) {
+	return !("value" in item) && "options" in item;
+}
+function flattenOptions(items) {
+	return items.flatMap((item) => isOptionGroup(item) ? item.options : [item]);
+}
+function choiceKey(value) {
+	return `option:${typeof value}:${value}`;
+}
+function choiceRows(items, query, contains) {
+	const result = [];
+	let position = 0;
+	items.forEach((item, groupIndex) => {
+		if (isOptionGroup(item)) {
+			const options = item.options.filter((option) => !query || contains(option.label, query));
+			if (!options.length) return;
+			const group = result.length;
+			result.push({
+				key: `group:${groupIndex}`,
+				label: item.label,
+				position: 0
+			});
+			for (const option of options) result.push({
+				key: choiceKey(option.value),
+				label: option.label,
+				option,
+				group,
+				position: ++position
+			});
+		} else if (!query || contains(item.label, query)) result.push({
+			key: choiceKey(item.value),
+			label: item.label,
+			option: item,
+			position: ++position
+		});
+	});
+	return result;
+}
+function choiceSize(rows) {
+	return rows.filter((row) => row.option).length;
+}
+function choiceDisabled(rows, index) {
+	return !rows[index]?.option || !!rows[index]?.option?.disabled;
+}
+function choiceEstimate(row) {
+	return row.option ? row.option.description ? 54 : 36 : 30;
+}
+function choiceGroups(rows, indexes) {
+	return indexes.flatMap((index) => rows[index]?.group === void 0 ? [] : [rows[index].group]);
+}
+function selectedChoice(rows, model) {
+	const value = Array.isArray(model) ? model[0] : model;
+	return rows.findIndex((row) => row.option?.value === value && !!row.option);
+}
+function choiceAttrs(rows, index, size, id) {
+	const row = rows[index];
+	return {
+		"aria-posinset": row.position,
+		"aria-setsize": size,
+		"aria-describedby": row.group === void 0 ? void 0 : `${id}-${row.group}`
+	};
+}
+function enabledChoiceValues(rows) {
+	return rows.flatMap((row) => row.option && !row.option.disabled ? [row.option.value] : []);
+}
+function choiceRangeValues(rows, anchor, target) {
+	const start = rows.findIndex((row) => row.option?.value === anchor);
+	if (start < 0) return void 0;
+	return enabledChoiceValues(rows.slice(Math.min(start, target), Math.max(start, target) + 1));
+}
+function createChoiceTypeahead(now = () => Date.now()) {
+	let search = "";
+	let searchedAt = 0;
+	return {
+		get search() {
+			return search;
+		},
+		expire() {
+			if (now() - searchedAt > 1e3) search = "";
+		},
+		extend(key) {
+			const time = now();
+			search = (time - searchedAt > 1e3 ? "" : search) + key;
+			searchedAt = time;
+			return search;
+		}
+	};
+}
+function choiceKeyAction(event, state) {
+	const { count, current, input, disabled, typeahead } = state;
+	const meta = event.ctrlKey || event.metaKey || event.altKey;
+	typeahead.expire();
+	if ((event.ctrlKey || event.metaKey) && !event.altKey && event.key.toLowerCase() === "a" && !input && state.multiple) return { type: "select-all" };
+	if (meta) return { type: "none" };
+	let target = -1;
+	if (event.key === "ArrowDown") target = nextEnabled(count, current + 1, 1, disabled);
+	else if (event.key === "ArrowUp") target = nextEnabled(count, current < 0 ? count - 1 : current - 1, -1, disabled);
+	else if (event.key === "Home") target = nextEnabled(count, 0, 1, disabled);
+	else if (event.key === "End") target = nextEnabled(count, count - 1, -1, disabled);
+	else if (event.key === "PageDown" || event.key === "PageUp") {
+		const step = event.key === "PageDown" ? 1 : -1;
+		target = nextEnabled(count, Math.max(0, Math.min(count - 1, Math.max(0, current) + step * Math.max(1, Math.floor(state.page / 36)))), step, disabled);
+	} else if (event.key === "Enter" || event.key === " " && !input && !typeahead.search) {
+		if (current < 0 || disabled(current)) return { type: "none" };
+		return {
+			type: "commit",
+			index: current
+		};
+	} else if (!input && event.key.length === 1) target = typeaheadMatch(state.labels(), typeahead.extend(event.key), current, disabled);
+	else return { type: "none" };
+	return {
+		type: "move",
+		target
+	};
+}
+//#endregion
 //#region src/lib/reka/useVirtualChoices.ts
 function useVirtualChoices(props) {
 	const select = props.kind === "select" ? injectSelectRootContext() : void 0;
@@ -10203,44 +10441,11 @@ function useVirtualChoices(props) {
 	const activeKey = shallowRef();
 	const id = useId();
 	const { contains } = useFilter({ sensitivity: "base" });
-	const rows = computed(() => {
-		const result = [];
-		const query = combobox && !combobox.ignoreFilter.value ? combobox.filterSearch.value : "";
-		let position = 0;
-		props.options.forEach((item, groupIndex) => {
-			if (isOptionGroup(item)) {
-				const options = item.options.filter((option) => !query || contains(option.label, query));
-				if (!options.length) return;
-				const group = result.length;
-				result.push({
-					key: `group:${groupIndex}`,
-					label: item.label,
-					position: 0
-				});
-				for (const option of options) result.push({
-					key: `option:${typeof option.value}:${option.value}`,
-					label: option.label,
-					option,
-					group,
-					position: ++position
-				});
-			} else if (!query || contains(item.label, query)) result.push({
-				key: `option:${typeof item.value}:${item.value}`,
-				label: item.label,
-				option: item,
-				position: ++position
-			});
-		});
-		return result;
-	});
-	const size = computed(() => rows.value.filter((row) => row.option).length);
-	const disabled = (index) => !rows.value[index]?.option || !!rows.value[index]?.option?.disabled;
+	const rows = computed(() => choiceRows(props.options, combobox && !combobox.ignoreFilter.value ? combobox.filterSearch.value : "", contains));
+	const size = computed(() => choiceSize(rows.value));
+	const disabled = (index) => choiceDisabled(rows.value, index);
 	const first = () => nextEnabled(rows.value.length, 0, 1, disabled);
-	const selectedIndex = computed(() => {
-		const model = select?.modelValue.value ?? listbox?.modelValue.value;
-		const value = Array.isArray(model) ? model[0] : model;
-		return rows.value.findIndex((row) => row.option?.value === value && !!row.option);
-	});
+	const selectedIndex = computed(() => selectedChoice(rows.value, select?.modelValue.value ?? listbox?.modelValue.value));
 	const activeIndex = computed(() => rows.value.findIndex((row) => row.key === activeKey.value));
 	const collection = useVirtualCollection({
 		items: () => rows.value,
@@ -10250,8 +10455,8 @@ function useVirtualChoices(props) {
 		config: () => props.virtualize,
 		initialIndex: props.kind === "listbox" ? void 0 : () => selectedIndex.value,
 		retain: () => [activeIndex.value, selectedIndex.value],
-		include: (indexes) => indexes.flatMap((index) => rows.value[index]?.group === void 0 ? [] : [rows.value[index].group]),
-		estimate: (row) => row.option ? row.option.description ? 54 : 36 : 30
+		include: (indexes) => choiceGroups(rows.value, indexes),
+		estimate: choiceEstimate
 	});
 	let generation = 0;
 	let disposed = false;
@@ -10273,52 +10478,39 @@ function useVirtualChoices(props) {
 		const wrapper = event.target.closest("[data-index]");
 		if (wrapper && body.value?.contains(wrapper)) activeKey.value = rows.value[Number(wrapper.dataset.index)]?.key;
 	}
-	let search = "";
-	let searchedAt = 0;
+	const typeahead = createChoiceTypeahead();
 	function keydown(event) {
 		if (event.isComposing || event.defaultPrevented || select?.disabled?.value || listbox?.disabled.value) return;
-		const input = event.target instanceof HTMLInputElement || event.target instanceof HTMLTextAreaElement;
-		const meta = event.ctrlKey || event.metaKey || event.altKey;
-		const current = activeIndex.value;
-		if (Date.now() - searchedAt > 1e3) search = "";
-		let target = -1;
-		if ((event.ctrlKey || event.metaKey) && !event.altKey && event.key.toLowerCase() === "a" && !input && listbox?.multiple.value) {
-			event.preventDefault();
-			event.stopImmediatePropagation();
-			listbox.modelValue.value = rows.value.flatMap((row) => row.option && !row.option.disabled ? [row.option.value] : []);
+		const action = choiceKeyAction(event, {
+			labels: () => rows.value.map((row) => row.label),
+			count: rows.value.length,
+			current: activeIndex.value,
+			input: event.target instanceof HTMLInputElement || event.target instanceof HTMLTextAreaElement,
+			multiple: !!listbox?.multiple.value,
+			page: viewport.value?.clientHeight ?? 320,
+			disabled,
+			typeahead
+		});
+		if (action.type === "none") return;
+		event.preventDefault();
+		event.stopImmediatePropagation();
+		if (action.type === "select-all") {
+			listbox.modelValue.value = enabledChoiceValues(rows.value);
 			return;
 		}
-		if (meta) return;
-		if (event.key === "ArrowDown") target = nextEnabled(rows.value.length, current + 1, 1, disabled);
-		else if (event.key === "ArrowUp") target = nextEnabled(rows.value.length, current < 0 ? rows.value.length - 1 : current - 1, -1, disabled);
-		else if (event.key === "Home") target = first();
-		else if (event.key === "End") target = nextEnabled(rows.value.length, rows.value.length - 1, -1, disabled);
-		else if (event.key === "PageDown" || event.key === "PageUp") {
-			const step = event.key === "PageDown" ? 1 : -1;
-			target = nextEnabled(rows.value.length, Math.max(0, Math.min(rows.value.length - 1, Math.max(0, current) + step * Math.max(1, Math.floor((viewport.value?.clientHeight ?? 320) / 36)))), step, disabled);
-		} else if (event.key === "Enter" || event.key === " " && !input && !search) {
-			if (current < 0 || disabled(current)) return;
-			event.preventDefault();
-			event.stopImmediatePropagation();
+		if (action.type === "commit") {
 			if (select) {
-				select.onValueChange(rows.value[current].option.value);
+				select.onValueChange(rows.value[action.index].option.value);
 				if (!select.multiple.value) select.onOpenChange(false);
-			} else highlight(current, false, false).then((element) => element?.click());
+			} else highlight(action.index, false, false).then((element) => element?.click());
 			return;
-		} else if (!input && event.key.length === 1) {
-			const now = Date.now();
-			search = (now - searchedAt > 1e3 ? "" : search) + event.key;
-			searchedAt = now;
-			target = typeaheadMatch(rows.value.map((row) => row.label), search, current, disabled);
-		} else return;
-		event.preventDefault();
-		event.stopImmediatePropagation();
-		if (target < 0) return;
+		}
+		if (action.target < 0) return;
 		if (event.shiftKey && listbox?.multiple.value && listbox.selectionBehavior?.value === "replace") {
-			const start = rows.value.findIndex((row) => row.option?.value === listbox.firstValue?.value);
-			if (start >= 0) listbox.modelValue.value = rows.value.slice(Math.min(start, target), Math.max(start, target) + 1).flatMap((row) => row.option && !row.option.disabled ? [row.option.value] : []);
+			const values = choiceRangeValues(rows.value, listbox.firstValue?.value, action.target);
+			if (values) listbox.modelValue.value = values;
 		}
-		highlight(target);
+		highlight(action.target);
 	}
 	useEventListener(body, "keydown", keydown, { capture: true });
 	useEventListener(() => combobox?.inputElement.value ?? props.input, "keydown", keydown, { capture: true });
@@ -10368,21 +10560,13 @@ function useVirtualChoices(props) {
 		generation++;
 		stops.forEach((stop) => stop());
 	});
-	function itemAttrs(index) {
-		const row = rows.value[index];
-		return {
-			"aria-posinset": row.position,
-			"aria-setsize": size.value,
-			"aria-describedby": row.group === void 0 ? void 0 : `${id}-${row.group}`
-		};
-	}
 	return {
 		area,
 		body,
 		viewport,
 		rows,
 		...collection,
-		itemAttrs,
+		itemAttrs: (index) => choiceAttrs(rows.value, index, size.value, id),
 		labelId: (index) => `${id}-${index}`
 	};
 }
@@ -10900,7 +11084,7 @@ var PaginationSize_default = /* @__PURE__ */ defineComponent({
 	}
 });
 //#endregion
-//#region src/lib/field-focus.ts
+//#region ../shared/src/lib/field-focus.ts
 var INTERACTIVE = "button, a, input, textarea, select, [contenteditable], [role=\"button\"]";
 var CONTROL = "input:not([type=\"hidden\"]), textarea";
 function controlOf(node) {
@@ -11191,9 +11375,6 @@ var PaginationJump_default = /* @__PURE__ */ defineComponent({
 });
 //#endregion
 //#region src/components/pagination/composables/usePagination.ts
-function paginationInteger(value, fallback, minimum) {
-	return Number.isFinite(value) ? Math.max(minimum, Math.floor(value)) : fallback;
-}
 function usePagination(props, model, sizeModel, change) {
 	const total = computed(() => paginationInteger(props.total, 0, 0));
 	const pageSize = computed(() => paginationInteger(sizeModel.value, 10, 1));
@@ -11401,7 +11582,7 @@ var PrevNext_default = /* @__PURE__ */ defineComponent({
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("nav", {
 				"aria-label": props.label ?? unref(t).pagination.navLabel,
-				class: normalizeClass(unref(cn)("grid gap-4 sm:grid-cols-2", props.class))
+				class: normalizeClass(unref(cn)("grid grid-cols-1 gap-4 sm:grid-cols-2", props.class))
 			}, [renderSlot(_ctx.$slots, "default")], 10, _hoisted_1$104);
 		};
 	}
@@ -11426,7 +11607,7 @@ var prevNextEyebrow = tv({
 });
 //#endregion
 //#region src/components/prev-next/PrevNextLink.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$103 = { class: "text-fg font-medium" };
+var _hoisted_1$103 = { class: "text-fg max-w-full font-medium" };
 //#endregion
 //#region src/components/prev-next/PrevNextLink.vue
 var PrevNextLink_default = /* @__PURE__ */ defineComponent({
@@ -11558,10 +11739,17 @@ var Table_default = /* @__PURE__ */ defineComponent({
 		caption: {},
 		class: {}
 	},
-	setup(__props) {
+	setup(__props, { expose: __expose }) {
 		const props = __props;
+		const area = shallowRef(null);
+		__expose({
+			viewport: computed(() => area.value?.viewport),
+			instance: computed(() => area.value?.instance)
+		});
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(ScrollArea_default, {
+				ref_key: "area",
+				ref: area,
 				direction: props.stickyHeader ? "both" : "horizontal",
 				class: normalizeClass(unref(cn)(unref(tableWrapper)({
 					variant: props.variant,
@@ -11895,11 +12083,18 @@ var TabsList_default = /* @__PURE__ */ defineComponent({
 		label: {},
 		class: {}
 	},
-	setup(__props) {
+	setup(__props, { expose: __expose }) {
 		const props = __props;
 		const { variant, orientation } = useTabsStyle();
+		const area = shallowRef(null);
+		__expose({
+			viewport: computed(() => area.value?.viewport),
+			instance: computed(() => area.value?.instance)
+		});
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(ScrollArea_default, {
+				ref_key: "area",
+				ref: area,
 				direction: unref(orientation),
 				scrollbar: false,
 				class: normalizeClass(unref(cn)(unref(tabsScroll)({
@@ -11996,7 +12191,7 @@ var TabsContent_default = /* @__PURE__ */ defineComponent({
 	}
 });
 //#endregion
-//#region src/lib/caret.ts
+//#region ../shared/src/lib/caret.ts
 var MIRRORED = [
 	"font-family",
 	"font-size",
@@ -12211,38 +12406,741 @@ var Textarea_default = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-//#endregion
-//#region ../shared/src/variants/number-input.ts
-var numberInputStepper = tv({
-	base: "flex shrink-0 flex-col",
-	variants: {
-		divided: { true: "border-line border-s" },
-		size: {
-			sm: "[&_svg]:size-3",
-			md: "[&_svg]:size-3",
-			lg: "[&_svg]:size-3.5"
-		}
-	},
-	defaultVariants: {
-		size: "md",
-		divided: true
+function clamp(value, min = Number.NEGATIVE_INFINITY, max = Number.POSITIVE_INFINITY) {
+	return Math.min(max, Math.max(min, value));
+}
+function roundToStepPrecision(value, step) {
+	let rounded = value;
+	const text = step.toString();
+	const point = text.indexOf(".");
+	const precision = point >= 0 ? text.length - point : 0;
+	if (precision > 0) {
+		const pow = 10 ** precision;
+		rounded = Math.round(rounded * pow) / pow;
 	}
-});
-var numberInputStep = tv({
-	base: [
-		"hn-interactive hn-state-layer hn-press-none text-muted",
-		"flex min-h-0 flex-1 basis-0 items-center justify-center px-1.5 outline-none",
-		"disabled:pointer-events-none disabled:opacity-40"
-	],
-	variants: { divided: { true: "border-line border-t" } }
-});
-//#endregion
-//#region src/components/number-input/NumberInput.vue
-var NumberInput_default = /* @__PURE__ */ defineComponent({
-	name: "HnNumberInput",
-	inheritAttrs: false,
-	__name: "NumberInput",
-	props: {
+	return rounded;
+}
+function snapValueToStep(value, minValue, maxValue, step) {
+	const min = Number(minValue);
+	const max = Number(maxValue);
+	const remainder = (value - (Number.isNaN(min) ? 0 : min)) % step;
+	let snapped = roundToStepPrecision(Math.abs(remainder) * 2 >= step ? value + Math.sign(remainder) * (step - Math.abs(remainder)) : value - remainder, step);
+	if (!Number.isNaN(min)) {
+		if (snapped < min) snapped = min;
+		else if (!Number.isNaN(max) && snapped > max) snapped = min + Math.floor(roundToStepPrecision((max - min) / step, step)) * step;
+	} else if (!Number.isNaN(max) && snapped > max) snapped = Math.floor(roundToStepPrecision(max / step, step)) * step;
+	return roundToStepPrecision(snapped, step);
+}
+function handleDecimalOperation(operator, left, right) {
+	let result = operator === "+" ? left + right : left - right;
+	if (left % 1 !== 0 || right % 1 !== 0) {
+		const leftDecimals = left.toString().split(".")[1]?.length ?? 0;
+		const rightDecimals = right.toString().split(".")[1]?.length ?? 0;
+		const multiplier = 10 ** Math.max(leftDecimals, rightDecimals);
+		const a = Math.round(left * multiplier);
+		const b = Math.round(right * multiplier);
+		result = (operator === "+" ? a + b : a - b) / multiplier;
+	}
+	return result;
+}
+function isNullish(value) {
+	return value === null || value === void 0;
+}
+function isNumber(value) {
+	return !isNullish(value) && !Number.isNaN(value);
+}
+function resolveNumberFieldLocale(locale, inherited) {
+	return locale || inherited || "en";
+}
+function createNumberFieldFormat(locale, options) {
+	return {
+		formatter: new NumberFormatter(locale, options),
+		parser: new NumberParser(locale, options)
+	};
+}
+function numberFieldInputMode(format) {
+	return format.formatter.resolvedOptions().maximumFractionDigits > 0 ? "decimal" : "numeric";
+}
+function formatNumberFieldValue(value, format) {
+	return isNumber(value) ? format.formatter.format(value) : "";
+}
+function clampNumberFieldValue(value, range, format) {
+	const { min, max, step, stepSnapping } = range;
+	const clamped = Number.isNaN(step) || !stepSnapping ? clamp(value, min, max) : snapValueToStep(value, min, max, step);
+	return format.parser.parse(format.formatter.format(clamped));
+}
+function nextNumberFieldValue(direction, from, range, format, multiplier = 1) {
+	const { step } = range;
+	const operator = direction === "increase" ? "+" : "-";
+	let next;
+	if (range.stepSnapping && !Number.isNaN(step)) {
+		const snapped = snapValueToStep(from, range.min, range.max, step);
+		if (snapped === from) next = handleDecimalOperation(operator, from, step * multiplier);
+		else {
+			const aligned = direction === "increase" ? snapped > from ? snapped : handleDecimalOperation("+", snapped, step) : snapped < from ? snapped : handleDecimalOperation("-", snapped, step);
+			next = multiplier > 1 ? handleDecimalOperation(operator, aligned, step * (multiplier - 1)) : aligned;
+		}
+	} else next = handleDecimalOperation(operator, from, step * multiplier);
+	return clampNumberFieldValue(next, range, format);
+}
+function isNumberFieldAtLimit(direction, value, range, format) {
+	if (!isNumber(value)) return false;
+	const next = nextNumberFieldValue(direction, value, range, format);
+	return direction === "increase" ? next <= value : next >= value;
+}
+function stepNumberFieldText(direction, text, range, format, multiplier = 1) {
+	const current = format.parser.parse(text);
+	if (Number.isNaN(current)) return clampNumberFieldValue(range.min ?? 0, range, format);
+	return nextNumberFieldValue(direction, current, range, format, multiplier);
+}
+function boundNumberFieldValue(bound, range, format) {
+	const target = bound === "min" ? range.min : range.max;
+	return target === void 0 ? void 0 : clampNumberFieldValue(target, range, format);
+}
+function commitNumberFieldText(text, range, format) {
+	const parsed = format.parser.parse(text);
+	return {
+		value: Number.isNaN(parsed) ? void 0 : clampNumberFieldValue(parsed, range, format),
+		reformat: text.length > 0
+	};
+}
+function rejectsNumberFieldInput(event, input, range, format) {
+	if (event.isComposing) return false;
+	if (event.inputType.startsWith("delete") || event.inputType.startsWith("history")) return false;
+	const next = input.value.slice(0, input.selectionStart ?? void 0) + (event.data ?? "") + input.value.slice(input.selectionEnd ?? void 0);
+	return !format.parser.isValidPartialNumber(next, range.min, range.max);
+}
+function numberFieldKeyAction(event, composing) {
+	if (composing || event.isComposing) return void 0;
+	switch (event.key) {
+		case "ArrowUp": return {
+			type: "step",
+			direction: "increase",
+			multiplier: 1,
+			prevent: true
+		};
+		case "ArrowDown": return {
+			type: "step",
+			direction: "decrease",
+			multiplier: 1,
+			prevent: true
+		};
+		case "PageUp": return {
+			type: "step",
+			direction: "increase",
+			multiplier: 10,
+			prevent: true
+		};
+		case "PageDown": return {
+			type: "step",
+			direction: "decrease",
+			multiplier: 10,
+			prevent: true
+		};
+		case "Home": return {
+			type: "bound",
+			bound: "min",
+			prevent: true
+		};
+		case "End": return {
+			type: "bound",
+			bound: "max",
+			prevent: true
+		};
+		case "Enter": return {
+			type: "commit",
+			prevent: false
+		};
+		default: return;
+	}
+}
+function numberFieldWheelStep(event, state) {
+	if (state.disabled || !state.focused) return void 0;
+	if (Math.abs(event.deltaY) <= Math.abs(event.deltaX)) return void 0;
+	return event.deltaY > 0 !== state.inverted ? "increase" : "decrease";
+}
+function deepActiveElement(root) {
+	let active = root.activeElement;
+	while (active?.shadowRoot?.activeElement) active = active.shadowRoot.activeElement;
+	return active;
+}
+function createNumberFieldPressHold(options) {
+	let handle;
+	let pressed = false;
+	const reset = () => options.timers.clearTimeout(handle);
+	const repeat = (delay) => {
+		reset();
+		if (options.disabled()) return;
+		options.trigger();
+		handle = options.timers.setTimeout(() => repeat(60), delay);
+	};
+	return {
+		press(event) {
+			if (event.button !== 0 || pressed) return;
+			event.preventDefault();
+			pressed = true;
+			options.pressed(true);
+			repeat(400);
+		},
+		release() {
+			pressed = false;
+			options.pressed(false);
+			reset();
+		},
+		dispose: reset
+	};
+}
+function numberFieldRootAttributes(state) {
+	return {
+		role: "group",
+		"data-disabled": state.disabled ? "" : void 0,
+		"data-readonly": state.readonly ? "" : void 0
+	};
+}
+function numberFieldInputAttributes(state) {
+	return {
+		id: state.id,
+		value: state.value,
+		role: "spinbutton",
+		type: "text",
+		tabindex: "0",
+		inputmode: state.inputMode,
+		disabled: state.disabled ? "" : void 0,
+		"data-disabled": state.disabled ? "" : void 0,
+		readonly: state.readonly ? "" : void 0,
+		"data-readonly": state.readonly ? "" : void 0,
+		autocomplete: "off",
+		autocorrect: "off",
+		spellcheck: "false",
+		"aria-roledescription": "Number field",
+		"aria-valuenow": state.modelValue,
+		"aria-valuemin": state.min,
+		"aria-valuemax": state.max
+	};
+}
+function isNumberFieldStepDisabled(state) {
+	return state.disabled || state.readonly || state.own || state.atLimit;
+}
+function numberFieldStepAttributes(state) {
+	return {
+		tabindex: "-1",
+		"aria-label": state.direction === "increase" ? "Increase" : "Decrease",
+		type: state.button ? "button" : void 0,
+		style: { userSelect: state.pressed ? "none" : void 0 },
+		disabled: state.disabled ? "" : void 0,
+		"data-disabled": state.disabled ? "" : void 0,
+		"data-pressed": state.pressed ? "true" : void 0
+	};
+}
+//#endregion
+//#region src/primitives/utils/usePrimitiveElement.ts
+function usePrimitiveElement() {
+	const primitiveElement = ref();
+	return {
+		primitiveElement,
+		currentElement: computed(() => {
+			const element = primitiveElement.value?.$el;
+			if (element && ["#text", "#comment"].includes(element.nodeName)) return element.nextElementSibling;
+			return element ?? primitiveElement.value;
+		})
+	};
+}
+//#endregion
+//#region src/primitives/utils/useVModel.ts
+function useVModel$1(props, key, emit, options = {}) {
+	const event = `update:${key}`;
+	const current = () => props[key] !== void 0 ? props[key] : options.defaultValue;
+	if (!options.passive) return computed({
+		get: current,
+		set: (value) => emit(event, value)
+	});
+	const proxy = ref(current());
+	let updating = false;
+	watch(() => props[key], (value) => {
+		if (updating) return;
+		updating = true;
+		proxy.value = value;
+		nextTick(() => updating = false);
+	});
+	watch(proxy, (value) => {
+		if (!updating && value !== props[key]) emit(event, value);
+	});
+	return proxy;
+}
+//#endregion
+//#region src/primitives/visually-hidden/VisuallyHiddenInputBubble.vue
+var VisuallyHiddenInputBubble_default = /* @__PURE__ */ defineComponent({
+	inheritAttrs: false,
+	__name: "VisuallyHiddenInputBubble",
+	props: {
+		name: {},
+		value: {},
+		checked: {
+			type: Boolean,
+			default: void 0
+		},
+		required: { type: Boolean },
+		disabled: { type: Boolean },
+		feature: { default: "fully-hidden" }
+	},
+	setup(__props) {
+		const props = __props;
+		const { primitiveElement, currentElement } = usePrimitiveElement();
+		const valueState = computed(() => props.checked ?? props.value);
+		watch(valueState, (cur, prev) => {
+			if (!currentElement.value) return;
+			const input = currentElement.value;
+			const setValue = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value").set;
+			if (setValue && cur !== prev) {
+				const inputEvent = new Event("input", { bubbles: true });
+				const changeEvent = new Event("change", { bubbles: true });
+				setValue.call(input, cur);
+				input.dispatchEvent(inputEvent);
+				input.dispatchEvent(changeEvent);
+			}
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(VisuallyHidden), mergeProps({
+				ref_key: "primitiveElement",
+				ref: primitiveElement
+			}, {
+				...props,
+				..._ctx.$attrs
+			}, { as: "input" }), null, 16);
+		};
+	}
+});
+//#endregion
+//#region src/primitives/visually-hidden/VisuallyHiddenInput.ts
+var REQUIRED_NOTE = " We render single input if it's required ";
+var VisuallyHiddenInput_default = defineComponent({
+	name: "VisuallyHiddenInput",
+	inheritAttrs: false,
+	props: {
+		name: {
+			type: String,
+			required: true
+		},
+		value: {
+			type: null,
+			required: true
+		},
+		checked: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		required: {
+			type: Boolean,
+			required: false
+		},
+		disabled: {
+			type: Boolean,
+			required: false
+		},
+		feature: {
+			type: String,
+			required: false,
+			default: "fully-hidden"
+		}
+	},
+	setup(props, { attrs }) {
+		const isFormArrayEmptyAndRequired = computed(() => Array.isArray(props.value) && props.value.length === 0 && props.required);
+		const parsedValue = computed(() => {
+			const value = props.value;
+			if (typeof value === "string" || typeof value === "number" || typeof value === "boolean" || value === null || value === void 0) return [{
+				name: props.name,
+				value
+			}];
+			if (Array.isArray(value)) return value.flatMap((item, index) => typeof item === "object" ? Object.entries(item).map(([key, entry]) => ({
+				name: `${props.name}[${index}][${key}]`,
+				value: entry
+			})) : {
+				name: `${props.name}[${index}]`,
+				value: item
+			});
+			if (typeof value === "object") return Object.entries(value).map(([key, entry]) => ({
+				name: `${props.name}[${key}]`,
+				value: entry
+			}));
+			return [];
+		});
+		return () => h(Fragment, null, [createCommentVNode(REQUIRED_NOTE), isFormArrayEmptyAndRequired.value ? h(VisuallyHiddenInputBubble_default, mergeProps({ key: props.name }, {
+			...props,
+			...attrs
+		}, {
+			name: props.name,
+			value: props.value
+		})) : h(Fragment, { key: 1 }, parsedValue.value.map((parsed) => h(VisuallyHiddenInputBubble_default, mergeProps({ key: parsed.name }, {
+			...props,
+			...attrs
+		}, {
+			name: parsed.name,
+			value: parsed.value
+		}))))]);
+	}
+});
+//#endregion
+//#region src/primitives/utils/timers.ts
+var windowTimers = {
+	setTimeout: (callback, delay) => window.setTimeout(callback, delay),
+	clearTimeout: (handle) => window.clearTimeout(handle)
+};
+var isClient = typeof window !== "undefined" && typeof document !== "undefined";
+//#endregion
+//#region src/primitives/number-field/context.ts
+var NUMBER_FIELD_ROOT = Symbol("NumberFieldRootContext");
+function provideNumberFieldRootContext(context) {
+	provide(NUMBER_FIELD_ROOT, context);
+	return context;
+}
+function injectNumberFieldRootContext() {
+	const context = inject(NUMBER_FIELD_ROOT, null);
+	if (!context) throw new Error("Injection `Symbol(NumberFieldRootContext)` not found. Component must be used within `NumberFieldRoot`");
+	return context;
+}
+function useNumberFieldStep(direction, props) {
+	const root = injectNumberFieldRootContext();
+	const isDisabled = computed(() => isNumberFieldStepDisabled({
+		disabled: root.disabled.value,
+		readonly: root.readonly.value,
+		own: !!props.disabled,
+		atLimit: direction === "increase" ? root.isIncreaseDisabled.value : root.isDecreaseDisabled.value
+	}));
+	const { primitiveElement, currentElement } = usePrimitiveElement();
+	const isPressed = ref(false);
+	const hold = createNumberFieldPressHold({
+		timers: windowTimers,
+		disabled: () => isDisabled.value,
+		trigger: () => root.step(direction),
+		pressed: (pressed) => isPressed.value = pressed
+	});
+	if (isClient) {
+		watch(currentElement, (element, _, onCleanup) => {
+			if (!element) return;
+			element.addEventListener("pointerdown", hold.press);
+			onCleanup(() => element.removeEventListener("pointerdown", hold.press));
+		}, {
+			immediate: true,
+			flush: "post"
+		});
+		window.addEventListener("pointerup", hold.release);
+		window.addEventListener("pointercancel", hold.release);
+		onScopeDispose(() => {
+			window.removeEventListener("pointerup", hold.release);
+			window.removeEventListener("pointercancel", hold.release);
+		});
+	}
+	return {
+		primitiveElement,
+		attributes: computed(() => numberFieldStepAttributes({
+			direction,
+			button: props.as === "button",
+			disabled: isDisabled.value,
+			pressed: isPressed.value
+		}))
+	};
+}
+//#endregion
+//#region src/primitives/number-field/NumberFieldRoot.vue
+var NumberFieldRoot_default = /* @__PURE__ */ defineComponent({
+	inheritAttrs: false,
+	__name: "NumberFieldRoot",
+	props: {
+		defaultValue: { default: void 0 },
+		modelValue: {},
+		min: {},
+		max: {},
+		step: { default: 1 },
+		stepSnapping: {
+			type: Boolean,
+			default: true
+		},
+		focusOnChange: {
+			type: Boolean,
+			default: true
+		},
+		formatOptions: {},
+		locale: {},
+		disabled: { type: Boolean },
+		readonly: { type: Boolean },
+		disableWheelChange: { type: Boolean },
+		invertWheelChange: { type: Boolean },
+		id: {},
+		name: {},
+		required: { type: Boolean },
+		asChild: { type: Boolean },
+		as: { default: "div" }
+	},
+	emits: ["update:modelValue"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emits = __emit;
+		const { disabled, readonly, disableWheelChange, invertWheelChange, id } = toRefs(props);
+		const modelValue = useVModel$1(props, "modelValue", emits, {
+			defaultValue: props.defaultValue,
+			passive: props.modelValue === void 0
+		});
+		const { primitiveElement, currentElement } = usePrimitiveElement();
+		const config = injectConfigProviderContext(null);
+		const locale = computed(() => resolveNumberFieldLocale(props.locale, config?.locale?.value));
+		const isFormControl = computed(() => currentElement.value ? Boolean(currentElement.value.closest("form")) : true);
+		const inputEl = ref();
+		const format = computed(() => createNumberFieldFormat(locale.value, props.formatOptions));
+		const range = computed(() => ({
+			min: props.min,
+			max: props.max,
+			step: props.step,
+			stepSnapping: props.stepSnapping
+		}));
+		const isDecreaseDisabled = computed(() => isNumberFieldAtLimit("decrease", modelValue.value, range.value, format.value));
+		const isIncreaseDisabled = computed(() => isNumberFieldAtLimit("increase", modelValue.value, range.value, format.value));
+		const inputMode = computed(() => numberFieldInputMode(format.value));
+		const textValue = computed(() => formatNumberFieldValue(modelValue.value, format.value));
+		const attributes = computed(() => numberFieldRootAttributes({
+			disabled: props.disabled,
+			readonly: props.readonly
+		}));
+		function step(direction, multiplier = 1) {
+			if (props.focusOnChange) inputEl.value?.focus();
+			if (props.disabled || props.readonly) return;
+			modelValue.value = stepNumberFieldText(direction, inputEl.value?.value ?? "", range.value, format.value, multiplier);
+		}
+		function jump(bound) {
+			const next = boundNumberFieldValue(bound, range.value, format.value);
+			if (next !== void 0) modelValue.value = next;
+		}
+		function commit(text) {
+			const { value, reformat } = commitNumberFieldText(text, range.value, format.value);
+			modelValue.value = value;
+			if (inputEl.value) inputEl.value.value = reformat ? textValue.value : text;
+		}
+		const FormInput = () => isFormControl.value && props.name ? h(VisuallyHiddenInput_default, {
+			type: "text",
+			value: modelValue.value,
+			name: props.name,
+			disabled: props.disabled,
+			readonly: props.readonly,
+			required: props.required
+		}) : createCommentVNode("v-if", true);
+		provideNumberFieldRootContext({
+			modelValue,
+			step,
+			jump,
+			commit,
+			inputEl,
+			onInputElement: (element) => inputEl.value = element,
+			inputMode,
+			textValue,
+			range,
+			format,
+			disabled,
+			readonly,
+			disableWheelChange,
+			invertWheelChange,
+			isDecreaseDisabled,
+			isIncreaseDisabled,
+			id
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(Primitive), mergeProps({
+				..._ctx.$attrs,
+				...attributes.value
+			}, {
+				ref_key: "primitiveElement",
+				ref: primitiveElement,
+				as: __props.as,
+				"as-child": __props.asChild
+			}), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default", {
+					modelValue: unref(modelValue),
+					textValue: textValue.value,
+					readonly: unref(readonly)
+				}), createVNode(FormInput)]),
+				_: 3
+			}, 16, ["as", "as-child"]);
+		};
+	}
+});
+//#endregion
+//#region src/primitives/number-field/NumberFieldInput.vue
+var NumberFieldInput_default = /* @__PURE__ */ defineComponent({
+	__name: "NumberFieldInput",
+	props: {
+		asChild: { type: Boolean },
+		as: { default: "input" }
+	},
+	setup(__props) {
+		const props = __props;
+		const { primitiveElement, currentElement } = usePrimitiveElement();
+		const root = injectNumberFieldRootContext();
+		const composing = ref(false);
+		function handleKeydown(event) {
+			const action = numberFieldKeyAction(event, composing.value);
+			if (!action) return;
+			if (action.prevent) event.preventDefault();
+			if (action.type === "step") root.step(action.direction, action.multiplier);
+			else if (action.type === "bound") root.jump(action.bound);
+			else root.commit(event.target?.value);
+		}
+		function handleWheel(event) {
+			const direction = numberFieldWheelStep(event, {
+				focused: event.target === deepActiveElement(document),
+				disabled: root.disableWheelChange.value,
+				inverted: root.invertWheelChange.value
+			});
+			if (!direction) return;
+			event.preventDefault();
+			root.step(direction);
+		}
+		function handleBeforeInput(event) {
+			const input = event.target;
+			if (rejectsNumberFieldInput(event, input, root.range.value, root.format.value)) event.preventDefault();
+		}
+		function handleInput(event) {
+			inputValue.value = event.target.value;
+		}
+		function handleChange() {
+			requestAnimationFrame(() => {
+				inputValue.value = root.textValue.value;
+			});
+		}
+		function handleBlur(event) {
+			root.commit(event.target?.value);
+		}
+		function handleCompositionEnd() {
+			nextTick(() => {
+				composing.value = false;
+			});
+		}
+		onMounted(() => {
+			root.onInputElement(currentElement.value);
+		});
+		const inputValue = ref(root.textValue.value);
+		watch(() => root.textValue.value, () => {
+			inputValue.value = root.textValue.value;
+		}, {
+			immediate: true,
+			deep: true
+		});
+		const attributes = computed(() => numberFieldInputAttributes({
+			id: root.id.value,
+			value: inputValue.value,
+			inputMode: root.inputMode.value,
+			disabled: root.disabled.value,
+			readonly: root.readonly.value,
+			modelValue: root.modelValue.value,
+			min: root.range.value.min,
+			max: root.range.value.max
+		}));
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(Primitive), mergeProps({
+				...props,
+				...attributes.value
+			}, {
+				ref_key: "primitiveElement",
+				ref: primitiveElement,
+				onKeydown: handleKeydown,
+				onWheel: handleWheel,
+				onBeforeinput: handleBeforeInput,
+				onInput: handleInput,
+				onChange: handleChange,
+				onBlur: handleBlur,
+				onCompositionstart: _cache[0] || (_cache[0] = ($event) => composing.value = true),
+				onCompositionend: handleCompositionEnd
+			}), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16);
+		};
+	}
+});
+//#endregion
+//#region src/primitives/number-field/NumberFieldIncrement.vue
+var NumberFieldIncrement_default = /* @__PURE__ */ defineComponent({
+	__name: "NumberFieldIncrement",
+	props: {
+		disabled: { type: Boolean },
+		asChild: { type: Boolean },
+		as: { default: "button" }
+	},
+	setup(__props) {
+		const props = __props;
+		const { primitiveElement, attributes } = useNumberFieldStep("increase", props);
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(Primitive), mergeProps({
+				...props,
+				...unref(attributes)
+			}, {
+				ref_key: "primitiveElement",
+				ref: primitiveElement,
+				onContextmenu: _cache[0] || (_cache[0] = withModifiers(() => {}, ["prevent"]))
+			}), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16);
+		};
+	}
+});
+//#endregion
+//#region src/primitives/number-field/NumberFieldDecrement.vue
+var NumberFieldDecrement_default = /* @__PURE__ */ defineComponent({
+	__name: "NumberFieldDecrement",
+	props: {
+		disabled: { type: Boolean },
+		asChild: { type: Boolean },
+		as: { default: "button" }
+	},
+	setup(__props) {
+		const props = __props;
+		const { primitiveElement, attributes } = useNumberFieldStep("decrease", props);
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(Primitive), mergeProps({
+				...props,
+				...unref(attributes)
+			}, {
+				ref_key: "primitiveElement",
+				ref: primitiveElement,
+				onContextmenu: _cache[0] || (_cache[0] = withModifiers(() => {}, ["prevent"]))
+			}), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16);
+		};
+	}
+});
+//#endregion
+//#region ../shared/src/variants/number-input.ts
+var numberInputStepper = tv({
+	base: "flex shrink-0 flex-col",
+	variants: {
+		divided: { true: "border-line border-s" },
+		size: {
+			sm: "[&_svg]:size-3",
+			md: "[&_svg]:size-3",
+			lg: "[&_svg]:size-3.5"
+		}
+	},
+	defaultVariants: {
+		size: "md",
+		divided: true
+	}
+});
+var numberInputStep = tv({
+	base: [
+		"hn-interactive hn-state-layer hn-press-none text-muted",
+		"flex min-h-0 flex-1 basis-0 items-center justify-center px-1.5 outline-none",
+		"disabled:pointer-events-none disabled:opacity-40"
+	],
+	variants: { divided: { true: "border-line border-t" } }
+});
+//#endregion
+//#region src/components/number-input/NumberInput.vue
+var NumberInput_default = /* @__PURE__ */ defineComponent({
+	name: "HnNumberInput",
+	inheritAttrs: false,
+	__name: "NumberInput",
+	props: {
 		modelValue: {},
 		defaultValue: {},
 		min: {},
@@ -12288,7 +13186,7 @@ var NumberInput_default = /* @__PURE__ */ defineComponent({
 			readonly: props.readonly
 		}), emits);
 		return (_ctx, _cache) => {
-			return openBlock(), createBlock(unref(NumberFieldRoot), mergeProps(unref(forwarded), {
+			return openBlock(), createBlock(unref(NumberFieldRoot_default), mergeProps(unref(forwarded), {
 				locale: props.locale ?? unref(t).tag,
 				disabled: unref(disabled),
 				"data-hn-number-input": "",
@@ -12299,7 +13197,7 @@ var NumberInput_default = /* @__PURE__ */ defineComponent({
 					size: props.size
 				}), props.class)
 			}), {
-				default: withCtx(() => [createVNode(unref(NumberFieldInput), mergeProps(_ctx.$attrs, {
+				default: withCtx(() => [createVNode(unref(NumberFieldInput_default), mergeProps(_ctx.$attrs, {
 					id: unref(fieldId),
 					"aria-invalid": unref(invalid) || void 0,
 					"aria-describedby": unref(describedBy),
@@ -12315,13 +13213,13 @@ var NumberInput_default = /* @__PURE__ */ defineComponent({
 						size: size.value,
 						divided: divided.value
 					}))
-				}, [createVNode(unref(NumberFieldIncrement), {
+				}, [createVNode(unref(NumberFieldIncrement_default), {
 					"aria-label": unref(t).numberInput.increase,
 					class: normalizeClass(unref(numberInputStep)())
 				}, {
 					default: withCtx(() => [createVNode(unref(ChevronUp))]),
 					_: 1
-				}, 8, ["aria-label", "class"]), createVNode(unref(NumberFieldDecrement), {
+				}, 8, ["aria-label", "class"]), createVNode(unref(NumberFieldDecrement_default), {
 					"aria-label": unref(t).numberInput.decrease,
 					class: normalizeClass(unref(numberInputStep)({ divided: divided.value }))
 				}, {
@@ -12364,13 +13262,21 @@ var PasswordInput_default = /* @__PURE__ */ defineComponent({
 		"visibleModifiers": {}
 	}),
 	emits: ["update:modelValue", "update:visible"],
-	setup(__props) {
+	setup(__props, { expose: __expose }) {
 		const props = __props;
 		const model = useModel(__props, "modelValue");
 		const visible = useModel(__props, "visible");
 		const t = useUiLocale();
+		const base = shallowRef(null);
+		__expose({
+			clear: () => base.value?.clear(),
+			focus: () => base.value?.focus()
+		});
 		return (_ctx, _cache) => {
-			return openBlock(), createBlock(InputBase_default, mergeProps(_ctx.$attrs, {
+			return openBlock(), createBlock(InputBase_default, mergeProps({
+				ref_key: "base",
+				ref: base
+			}, _ctx.$attrs, {
 				modelValue: model.value,
 				"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => model.value = $event),
 				type: visible.value ? "text" : "password",
@@ -12430,7 +13336,7 @@ var SearchInput_default = /* @__PURE__ */ defineComponent({
 		"modelModifiers": {}
 	}),
 	emits: /*@__PURE__*/ mergeModels(["search", "clear"], ["update:modelValue"]),
-	setup(__props, { emit: __emit }) {
+	setup(__props, { expose: __expose, emit: __emit }) {
 		const props = __props;
 		const emit = __emit;
 		const model = useModel(__props, "modelValue");
@@ -12440,8 +13346,15 @@ var SearchInput_default = /* @__PURE__ */ defineComponent({
 			model.value = "";
 			emit("clear");
 		}
+		const base = shallowRef(null);
+		__expose({
+			clear: () => base.value?.clear(),
+			focus: () => base.value?.focus()
+		});
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(InputBase_default, mergeProps({
+				ref_key: "base",
+				ref: base,
 				type: "search",
 				enterkeyhint: "search"
 			}, _ctx.$attrs, {
@@ -12707,7 +13620,7 @@ var MultiSelect_default = /* @__PURE__ */ defineComponent({
 						"aria-invalid",
 						"class"
 					]),
-					props.name ? (openBlock(), createBlock(VisuallyHidden_default, {
+					props.name ? (openBlock(), createBlock(unref(VisuallyHidden), {
 						key: 0,
 						"as-child": ""
 					}, {
@@ -13785,12 +14698,10 @@ var CommandPaletteItem_default = /* @__PURE__ */ defineComponent({
 	}
 });
 //#endregion
-//#region src/components/command-palette/types.ts
-function isCommandGroup(entry) {
+//#region ../shared/src/lib/command-palette/match.ts
+function isGroup(entry) {
 	return "items" in entry;
 }
-//#endregion
-//#region src/components/command-palette/utils/match.ts
 function score(item, query) {
 	if (!query) return {
 		item,
@@ -13860,7 +14771,7 @@ function filterCommands(items, query) {
 		loose = [];
 	};
 	for (const entry of items) {
-		if (!isCommandGroup(entry)) {
+		if (!isGroup(entry)) {
 			loose.push(entry);
 			continue;
 		}
@@ -14018,7 +14929,7 @@ var CommandPalettePanel_default = /* @__PURE__ */ defineComponent({
 	}
 });
 //#endregion
-//#region src/components/command-palette/utils/hotkey.ts
+//#region ../shared/src/lib/command-palette/hotkey.ts
 function parseHotkey(spec) {
 	const parts = spec.toLowerCase().split("+").map((part) => part.trim()).filter(Boolean);
 	const modifiers = parts.slice(0, -1);
@@ -14502,13 +15413,56 @@ var TreeCheck_default = /* @__PURE__ */ defineComponent({
 	}
 });
 //#endregion
+//#region ../shared/src/lib/virtual/tree.ts
+function virtualTreeDisabled(rows, index, rootDisabled, disabled) {
+	const row = rows[index];
+	return !row || rootDisabled || (disabled?.(row.value) ?? !!row.value.disabled);
+}
+function virtualTreeKeyTarget(event, state) {
+	const { rows, current, expanded, disabled } = state;
+	if (event.ctrlKey || event.metaKey || event.altKey) return void 0;
+	const count = rows.length;
+	const item = rows[current];
+	if (event.key === "ArrowDown") return nextEnabled(count, current + 1, 1, disabled);
+	if (event.key === "ArrowUp") return nextEnabled(count, current - 1, -1, disabled);
+	if (event.key === "Home") return nextEnabled(count, 0, 1, disabled);
+	if (event.key === "End") return nextEnabled(count, count - 1, -1, disabled);
+	if (event.key === "PageDown" || event.key === "PageUp") {
+		const step = event.key === "PageDown" ? 1 : -1;
+		return nextEnabled(count, Math.max(0, Math.min(count - 1, current + step * Math.max(1, Math.floor(state.page / 36)))), step, disabled);
+	}
+	if (event.key === (state.dir === "rtl" ? "ArrowLeft" : "ArrowRight")) {
+		if (!item?.hasChildren) return void 0;
+		if (!expanded.includes(item._id)) return void 0;
+		const child = nextEnabled(count, current + 1, 1, disabled);
+		return rows[child]?.level === item.level + 1 ? child : -1;
+	}
+	if (event.key === (state.dir === "rtl" ? "ArrowRight" : "ArrowLeft")) {
+		if (!item || expanded.includes(item._id)) return void 0;
+		if (!item.parentItem) return -1;
+		const parent = state.getKey(item.parentItem);
+		return rows.findIndex((row) => row._id === parent);
+	}
+	if (event.key.length === 1 && event.key !== " ") return typeaheadMatch(rows.map((row) => row.value.label), state.typeahead.extend(event.key), current, disabled);
+}
+function survivingTreeAncestor(rows, previous, active, getKey) {
+	let removed = previous?.find((row) => row._id === active);
+	let target = -1;
+	while (removed?.parentItem && target < 0) {
+		const parent = getKey(removed.parentItem);
+		target = rows.findIndex((row) => row._id === parent);
+		removed = previous?.find((row) => row._id === parent);
+	}
+	return target;
+}
+//#endregion
 //#region src/lib/reka/useVirtualTree.ts
 function useVirtualTree(props, viewport) {
 	const root = injectTreeRootContext();
 	const body = shallowRef();
 	const active = shallowRef();
 	const index = computed(() => props.items.findIndex((item) => item._id === active.value));
-	const disabled = (i) => !props.items[i] || root.disabled.value || (props.disabled?.(props.items[i].value) ?? !!props.items[i].value.disabled);
+	const disabled = (i) => virtualTreeDisabled(props.items, i, root.disabled.value, props.disabled);
 	const selected = computed(() => props.items.findIndex((item) => root.selectedKeys.value.includes(item._id)));
 	const collection = useVirtualCollection({
 		items: () => props.items,
@@ -14535,34 +15489,20 @@ function useVirtualTree(props, viewport) {
 	}
 	const first = () => nextEnabled(props.items.length, 0, 1, disabled);
 	const last = () => nextEnabled(props.items.length, props.items.length - 1, -1, disabled);
-	let search = "";
-	let searchedAt = 0;
+	const typeahead = createChoiceTypeahead();
 	function keydown(event) {
-		if (event.defaultPrevented || event.isComposing || event.ctrlKey || event.metaKey || event.altKey || root.disabled.value) return;
-		const current = index.value;
-		const item = props.items[current];
-		let target = -1;
-		if (event.key === "ArrowDown") target = nextEnabled(props.items.length, current + 1, 1, disabled);
-		else if (event.key === "ArrowUp") target = nextEnabled(props.items.length, current - 1, -1, disabled);
-		else if (event.key === "Home") target = first();
-		else if (event.key === "End") target = last();
-		else if (event.key === "PageDown" || event.key === "PageUp") {
-			const step = event.key === "PageDown" ? 1 : -1;
-			target = nextEnabled(props.items.length, Math.max(0, Math.min(props.items.length - 1, current + step * Math.max(1, Math.floor((viewport.value?.clientHeight ?? 320) / 36)))), step, disabled);
-		} else if (event.key === (root.dir.value === "rtl" ? "ArrowLeft" : "ArrowRight")) {
-			if (!item?.hasChildren) return;
-			if (!root.expanded.value.includes(item._id)) return;
-			const child = nextEnabled(props.items.length, current + 1, 1, disabled);
-			if (props.items[child]?.level === item.level + 1) target = child;
-		} else if (event.key === (root.dir.value === "rtl" ? "ArrowRight" : "ArrowLeft")) {
-			if (!item || root.expanded.value.includes(item._id)) return;
-			if (item.parentItem) target = props.items.findIndex((row) => row._id === root.getKey(item.parentItem));
-		} else if (event.key.length === 1 && event.key !== " ") {
-			const now = Date.now();
-			search = (now - searchedAt > 1e3 ? "" : search) + event.key;
-			searchedAt = now;
-			target = typeaheadMatch(props.items.map((row) => row.value.label), search, current, disabled);
-		} else return;
+		if (event.defaultPrevented || event.isComposing || root.disabled.value) return;
+		const target = virtualTreeKeyTarget(event, {
+			rows: props.items,
+			current: index.value,
+			expanded: root.expanded.value,
+			dir: root.dir.value,
+			page: viewport.value?.clientHeight ?? 320,
+			getKey: root.getKey,
+			disabled,
+			typeahead
+		});
+		if (target === void 0) return;
 		event.preventDefault();
 		event.stopImmediatePropagation();
 		focus(target);
@@ -14574,13 +15514,7 @@ function useVirtualTree(props, viewport) {
 	});
 	watch(() => props.items, (items, old) => {
 		if (index.value >= 0 || !active.value) return;
-		let removed = old?.find((item) => item._id === active.value);
-		let target = -1;
-		while (removed?.parentItem && target < 0) {
-			const parent = root.getKey(removed.parentItem);
-			target = items.findIndex((item) => item._id === parent);
-			removed = old?.find((item) => item._id === parent);
-		}
+		const target = survivingTreeAncestor(items, old, active.value, root.getKey);
 		focus(target >= 0 ? target : first(), body.value?.contains(document.activeElement));
 	}, { flush: "pre" });
 	watch(viewport, (element) => {
@@ -14703,7 +15637,7 @@ var TreeRows_default = /* @__PURE__ */ defineComponent({
 	}
 });
 //#endregion
-//#region src/components/tree/utils/selection.ts
+//#region ../shared/src/lib/tree/selection.ts
 function indexTree(nodes) {
 	const entries = /* @__PURE__ */ new Map();
 	function visit(node, parent, disabled = false) {
@@ -14766,29 +15700,48 @@ function toggleChecked(tree, values, value) {
 	const next = checkedState(tree, [...checked]);
 	return [...[...checked].filter((value) => !tree.entries.has(value)), ...[...tree.entries.keys()].filter((value) => next.get(value).selected)];
 }
+function treeKey(node) {
+	return `${typeof node.value}:${node.value}`;
+}
+function treeStates(tree, multiple, model) {
+	if (multiple) return checkedState(tree, Array.isArray(model) ? model : []);
+	return new Map([...tree.entries].map(([value, entry]) => [value, {
+		selected: value === model,
+		indeterminate: false,
+		disabled: entry.disabled
+	}]));
+}
+function selectedTreeNodes(tree, states) {
+	return [...tree.entries.values()].filter((entry) => states.get(entry.node.value)?.selected).map((entry) => entry.node);
+}
+function treeKeyMap(tree) {
+	return new Map([...tree.entries].map(([value, entry]) => [treeKey(entry.node), value]));
+}
+function expandedTreeKeys(values) {
+	return values.map((value) => treeKey({ value }));
+}
+function expandedTreeValues(keys, expanded) {
+	return expanded.flatMap((key) => keys.has(key) ? [keys.get(key)] : []);
+}
+function nextTreeModel(tree, multiple, model, value) {
+	return multiple ? toggleChecked(tree, Array.isArray(model) ? model : [], value) : model === value ? null : value;
+}
 //#endregion
 //#region src/components/tree/composables/useTree.ts
 function useTree(props, model, expandedModel, disabled) {
 	const initialExpanded = [...props.defaultExpanded];
 	const index = computed(() => indexTree(props.items));
-	const states = computed(() => {
-		if (props.multiple) return checkedState(index.value, Array.isArray(model.value) ? model.value : []);
-		return new Map([...index.value.entries].map(([value, entry]) => [value, {
-			selected: value === model.value,
-			indeterminate: false,
-			disabled: entry.disabled
-		}]));
-	});
-	const selected = computed(() => [...index.value.entries.values()].filter((entry) => states.value.get(entry.node.value)?.selected).map((entry) => entry.node));
-	const keys = computed(() => new Map([...index.value.entries].map(([value, entry]) => [key(entry.node), value])));
+	const states = computed(() => treeStates(index.value, props.multiple, model.value));
+	const selected = computed(() => selectedTreeNodes(index.value, states.value));
+	const keys = computed(() => treeKeyMap(index.value));
 	const expanded = computed({
-		get: () => (expandedModel.value ?? initialExpanded).map((value) => key({ value })),
+		get: () => expandedTreeKeys(expandedModel.value ?? initialExpanded),
 		set: (value) => {
-			expandedModel.value = value.flatMap((key) => keys.value.has(key) ? [keys.value.get(key)] : []);
+			expandedModel.value = expandedTreeValues(keys.value, value);
 		}
 	});
 	function key(node) {
-		return `${typeof node.value}:${node.value}`;
+		return treeKey(node);
 	}
 	function getChildren(node) {
 		return node.children?.length ? node.children : void 0;
@@ -14804,7 +15757,7 @@ function useTree(props, model, expandedModel, disabled) {
 		event.preventDefault();
 		const node = event.detail.value;
 		if (!node || state(node).disabled) return;
-		model.value = props.multiple ? toggleChecked(index.value, Array.isArray(model.value) ? model.value : [], node.value) : model.value === node.value ? null : node.value;
+		model.value = nextTreeModel(index.value, props.multiple, model.value, node.value);
 	}
 	function toggle(node) {
 		if (state(node).disabled || !getChildren(node)) return;
@@ -15084,7 +16037,7 @@ var TreeSelectSearch_default = /* @__PURE__ */ defineComponent({
 	}
 });
 //#endregion
-//#region src/components/tree-select/types.ts
+//#region ../shared/src/types/tree-select.ts
 function findNode(nodes, value) {
 	for (const node of nodes) {
 		if (node.value === value) return node;
@@ -15103,7 +16056,7 @@ function pathTo(nodes, value, trail = []) {
 	return null;
 }
 //#endregion
-//#region src/components/tree-select/utils/filterTree.ts
+//#region ../shared/src/lib/tree-select/filter.ts
 function filterTree(nodes, matches) {
 	const children = /* @__PURE__ */ new Map();
 	const expanded = [];
@@ -17826,7 +18779,7 @@ var MultiCombobox_default = /* @__PURE__ */ defineComponent({
 	}
 });
 //#endregion
-//#region src/lib/date.ts
+//#region ../shared/src/lib/date.ts
 var TIME_LENGTH = {
 	hour: 5,
 	minute: 5,
@@ -18042,7 +18995,7 @@ var CalendarHeader_default = /* @__PURE__ */ defineComponent({
 	}
 });
 //#endregion
-//#region src/components/calendar/utils/format.ts
+//#region ../shared/src/lib/calendar/format.ts
 var local = (date) => date.toDate(getLocalTimeZone());
 function formatMonthHeading(tag, date) {
 	return new Intl.DateTimeFormat(tag, {
@@ -18891,7 +19844,7 @@ var DatePicker_default = /* @__PURE__ */ defineComponent({
 //#region ../shared/src/variants/date-range-field.ts
 var dateRangeFieldSeparator = tv({ base: "text-faint shrink-0 px-1 select-none" });
 //#endregion
-//#region src/components/date-range-field/utils/validity.ts
+//#region ../shared/src/lib/date-range-field/validity.ts
 function outside(value, { min, max }) {
 	if (!value) return false;
 	return !!min && value.compare(min) < 0 || !!max && value.compare(max) > 0;
@@ -19113,7 +20066,7 @@ var rangeCalendarDay = tv({
 	]
 });
 //#endregion
-//#region src/components/range-calendar/utils/limit.ts
+//#region ../shared/src/lib/range-calendar/limit.ts
 function maximumDaysMatcher(start, end, maximumDays) {
 	if (!start || end || !maximumDays) return void 0;
 	const reach = maximumDays - 1;
@@ -19898,7 +20851,7 @@ var ratingStar = tv({
 });
 var ratingFill = tv({ base: "absolute inset-y-0 start-0 overflow-hidden" });
 //#endregion
-//#region src/components/rating/utils/fill.ts
+//#region ../shared/src/lib/rating.ts
 function starFill(value, index) {
 	const portion = Math.min(Math.max(value - (index - 1), 0), 1);
 	return `${Math.round(portion * 1e3) / 10}%`;
@@ -20126,7 +21079,7 @@ var fileUploadItem = tv({ base: "bg-subtle flex min-w-0 items-center gap-3 round
 var fileUploadThumb = tv({ base: "text-muted flex size-10 shrink-0 items-center justify-center overflow-hidden rounded-sm bg-inset [&>img]:size-full [&>img]:object-cover [&>svg]:size-5" });
 var fileUploadMeta = tv({ base: "flex min-w-0 flex-1 flex-col" });
 //#endregion
-//#region src/components/file-upload/utils/select.ts
+//#region ../shared/src/lib/file-upload/select.ts
 function matchesAccept(file, accept) {
 	if (!accept) return true;
 	const name = file.name.toLowerCase();
@@ -20178,7 +21131,7 @@ function selectFiles(current, incoming, rules) {
 	};
 }
 //#endregion
-//#region src/components/file-upload/utils/size.ts
+//#region ../shared/src/lib/file-upload/size.ts
 var UNITS = [
 	"byte",
 	"kilobyte",
@@ -22048,7 +23001,7 @@ var meterLegend = tv({ base: "flex flex-wrap gap-x-4 gap-y-1 text-sm" });
 var meterLegendItem = tv({ base: "inline-flex items-center gap-1.5" });
 var meterValue = tv({ base: "text-muted tabular-nums" });
 //#endregion
-//#region src/components/meter-group/utils/tones.ts
+//#region ../shared/src/lib/meter-group.ts
 var METER_TONES = [
 	"accent",
 	"info",
@@ -22551,7 +23504,7 @@ var bannerIcons = {
 	accent: Megaphone
 };
 //#endregion
-//#region src/components/banner/utils/direction.ts
+//#region ../shared/src/lib/banner.ts
 function stepBetween(previous, next, count) {
 	if (count < 2) return 1;
 	const from = (previous % count + count) % count;
@@ -23073,12 +24026,12 @@ var MenubarRadioItem_default = /* @__PURE__ */ defineComponent({
 	}
 });
 //#endregion
-//#region src/components/form/standard-schema.ts
+//#region ../shared/src/lib/form/standard-schema.ts
 function isStandardSchema(rules) {
 	return typeof rules === "object" && rules !== null && "~standard" in rules;
 }
 //#endregion
-//#region src/components/form/utils/errors.ts
+//#region ../shared/src/lib/form/errors.ts
 function issueKey(issue) {
 	return (issue.path ?? []).map((part) => String(typeof part === "object" && part !== null ? part.key : part)).join(".");
 }
@@ -23102,7 +24055,7 @@ async function runRules(rules, values) {
 	return await rules(values);
 }
 //#endregion
-//#region src/components/form/utils/values.ts
+//#region ../shared/src/lib/form/values.ts
 function isPlain(value) {
 	return Object.prototype.toString.call(value) === "[object Object]";
 }
@@ -23121,31 +24074,41 @@ function same(a, b) {
 	return false;
 }
 //#endregion
-//#region src/components/form/composables/useForm.ts
-function useForm(options) {
-	const found = shallowRef({});
-	const touched = ref(/* @__PURE__ */ new Set());
-	const submitted = ref(false);
-	const submitting = ref(false);
-	const server = shallowRef(/* @__PURE__ */ new Map());
+//#region ../shared/src/behavior/form.ts
+function createForm(options) {
+	let found = {};
+	let touched = /* @__PURE__ */ new Set();
+	let submitted = false;
+	let submitting = false;
+	let server = /* @__PURE__ */ new Map();
 	let pending;
 	let validation = 0;
 	let submission = 0;
 	let initial = snapshot(options.values());
+	let version = 0;
+	const listeners = /* @__PURE__ */ new Set();
+	function notify() {
+		version++;
+		for (const listener of [...listeners]) listener();
+	}
 	function shown(key) {
-		if (submitted.value || touched.value.has(key)) return true;
+		if (submitted || touched.has(key)) return true;
 		return options.validateOn() === "change" && !same(readPath(options.values(), key), readPath(initial, key));
 	}
-	const errors = computed(() => {
+	function errors() {
 		const result = {};
-		for (const [key, message] of Object.entries(found.value)) if (key !== "" && shown(key)) result[key] = message;
-		for (const [key, entry] of server.value) result[key] = entry.message;
+		for (const [key, message] of Object.entries(found)) if (key !== "" && shown(key)) result[key] = message;
+		for (const [key, entry] of server) result[key] = entry.message;
 		return result;
-	});
-	const formError = computed(() => found.value[""]);
-	const invalid = computed(() => Object.keys(errors.value).length > 0 || !!formError.value);
+	}
+	function formError() {
+		return found[""];
+	}
+	function invalid() {
+		return Object.keys(errors()).length > 0 || !!formError();
+	}
 	async function validate() {
-		const version = ++validation;
+		const current = ++validation;
 		const values = snapshot(options.values());
 		const rules = options.rules();
 		const request = {
@@ -23155,8 +24118,9 @@ function useForm(options) {
 		pending = request;
 		try {
 			const result = await runRules(rules, values);
-			if (version !== validation || rules !== options.rules() || !same(values, options.values())) return false;
-			found.value = result;
+			if (current !== validation || rules !== options.rules() || !same(values, options.values())) return false;
+			found = result;
+			notify();
 			return Object.keys(result).length === 0;
 		} finally {
 			if (pending === request) pending = void 0;
@@ -23167,31 +24131,39 @@ function useForm(options) {
 		validate();
 	}
 	function touch(name) {
-		if (touched.value.has(name)) return;
-		touched.value = new Set(touched.value).add(name);
+		if (touched.has(name)) return;
+		touched = new Set(touched).add(name);
+		notify();
 		if (options.validateOn() !== "submit") revalidate();
 	}
 	function onChange() {
 		const values = options.values();
-		if (server.value.size) {
-			const next = new Map(server.value);
+		if (server.size) {
+			const next = new Map(server);
 			for (const [key, entry] of next) if (readPath(values, key) !== entry.value) next.delete(key);
-			if (next.size !== server.value.size) server.value = next;
+			if (next.size !== server.size) {
+				server = next;
+				notify();
+			}
 		}
-		if (submitted.value || options.validateOn() !== "submit") revalidate();
+		if (submitted || options.validateOn() !== "submit") revalidate();
 	}
 	async function submit(handler) {
-		if (submitting.value) return false;
-		const version = ++submission;
+		if (submitting) return false;
+		const current = ++submission;
 		const values = snapshot(options.values());
-		submitted.value = true;
-		submitting.value = true;
+		submitted = true;
+		submitting = true;
+		notify();
 		try {
-			if (!await validate() || version !== submission || server.value.size || !same(values, options.values())) return false;
+			if (!await validate() || current !== submission || server.size || !same(values, options.values())) return false;
 			await handler?.(options.values());
 			return true;
 		} finally {
-			if (version === submission) submitting.value = false;
+			if (current === submission) {
+				submitting = false;
+				notify();
+			}
 		}
 	}
 	function setErrors(next) {
@@ -23201,25 +24173,35 @@ function useForm(options) {
 			message,
 			value: readPath(values, key)
 		});
-		server.value = map;
+		server = map;
+		notify();
 	}
 	function reset() {
 		validation++;
 		submission++;
 		pending = void 0;
-		submitting.value = false;
-		found.value = {};
-		touched.value = /* @__PURE__ */ new Set();
-		submitted.value = false;
-		server.value = /* @__PURE__ */ new Map();
+		submitting = false;
+		found = {};
+		touched = /* @__PURE__ */ new Set();
+		submitted = false;
+		server = /* @__PURE__ */ new Map();
 		initial = snapshot(options.values());
+		notify();
+	}
+	function subscribe(listener) {
+		listeners.add(listener);
+		return () => {
+			listeners.delete(listener);
+		};
 	}
 	return {
 		errors,
 		formError,
 		invalid,
-		submitted,
-		submitting,
+		submitted: () => submitted,
+		submitting: () => submitting,
+		version: () => version,
+		subscribe,
 		validate,
 		touch,
 		onChange,
@@ -23229,6 +24211,34 @@ function useForm(options) {
 	};
 }
 //#endregion
+//#region src/components/form/composables/useForm.ts
+function useForm(options) {
+	const form = createForm(options);
+	const version = shallowRef(form.version());
+	form.subscribe(() => {
+		version.value = form.version();
+	});
+	function track(read) {
+		return computed(() => {
+			version.value;
+			return read();
+		});
+	}
+	return {
+		errors: track(form.errors),
+		formError: track(form.formError),
+		invalid: track(form.invalid),
+		submitted: track(form.submitted),
+		submitting: track(form.submitting),
+		validate: form.validate,
+		touch: form.touch,
+		onChange: form.onChange,
+		submit: form.submit,
+		setErrors: form.setErrors,
+		reset: form.reset
+	};
+}
+//#endregion
 //#region src/components/form/context.ts
 var FORM_KEY = Symbol("hn-form");
 function provideForm(context) {
@@ -23241,7 +24251,7 @@ function injectForm() {
 //#region ../shared/src/variants/form.ts
 var formRoot = tv({ base: "flex flex-col gap-4" });
 //#endregion
-//#region src/components/form/utils/focus.ts
+//#region ../shared/src/lib/form/focus.ts
 var FOCUSABLE = "input,select,textarea,button,[tabindex],[contenteditable=\"true\"]";
 function focusFirstInvalid(root) {
 	const invalid = root.querySelector("[aria-invalid=\"true\"]");
@@ -23406,7 +24416,8 @@ var FormField_default = /* @__PURE__ */ defineComponent({
 		const t = useUiLocale();
 		const form = injectForm();
 		const root = shallowRef(null);
-		const hooks = collapseHooks("y", () => root.value);
+		const body = shallowRef(null);
+		const hooks = collapseHooks("y", () => body.value);
 		const id = useId();
 		const labelId = useId();
 		const descriptionId = useId();
@@ -23480,6 +24491,8 @@ var FormField_default = /* @__PURE__ */ defineComponent({
 				id: unref(descriptionId),
 				class: normalizeClass(unref(formFieldDescription)())
 			}, [renderSlot(_ctx.$slots, "description", {}, () => [createTextVNode(toDisplayString(props.description), 1)])], 10, _hoisted_3$20)) : createCommentVNode("", true)], 2)) : createCommentVNode("", true), createElementVNode("div", {
+				ref_key: "body",
+				ref: body,
 				"data-hn-form-field-body": "",
 				class: normalizeClass(unref(formFieldContent)())
 			}, [
@@ -23947,7 +24960,7 @@ var Mark_default = /* @__PURE__ */ defineComponent({
 	}
 });
 //#endregion
-//#region src/components/code-block/highlighter.ts
+//#region ../shared/src/lib/highlighter.ts
 var langLoaders = {
 	typescript: () => import("shiki/langs/typescript.mjs"),
 	tsx: () => import("shiki/langs/tsx.mjs"),
@@ -24184,7 +25197,7 @@ var DescriptionDetails_default = /* @__PURE__ */ defineComponent({
 	}
 });
 //#endregion
-//#region src/components/time/utils/relativeTime.ts
+//#region ../shared/src/lib/relative-time.ts
 var DIVISIONS = [
 	[60, "second"],
 	[60, "minute"],
@@ -24871,6 +25884,8 @@ var CollapsibleTrigger_default = /* @__PURE__ */ defineComponent({
 		class: {}
 	},
 	setup(__props) {
+		const root = injectCollapsibleRootContext();
+		root.contentId ||= useId$1(void 0, "reka-collapsible-content");
 		const props = __props;
 		const slots = useSlots();
 		return (_ctx, _cache) => {
@@ -25005,6 +26020,8 @@ var AccordionTrigger_default = /* @__PURE__ */ defineComponent({
 		class: {}
 	},
 	setup(__props) {
+		const root = injectCollapsibleRootContext();
+		root.contentId ||= useId$1(void 0, "reka-collapsible-content");
 		const props = __props;
 		const slots = useSlots();
 		return (_ctx, _cache) => {
@@ -25915,52 +26932,85 @@ var Section_default = /* @__PURE__ */ defineComponent({
 	}
 });
 //#endregion
+//#region ../shared/src/lib/anchor.ts
+var SCROLL_SPY_OPTIONS = {
+	rootMargin: "0px 0px -15% 0px",
+	threshold: [0, Number.EPSILON]
+};
+function anchorEntries(items) {
+	return items.flatMap((item) => [{
+		id: item.id,
+		label: item.label,
+		depth: 0,
+		item
+	}, ...(item.children ?? []).map((child) => ({
+		id: child.id,
+		label: child.label,
+		depth: 1,
+		item: child
+	}))]);
+}
+function coveredEntries(entries, visible) {
+	return entries.filter((entry) => visible.has(entry.id));
+}
+function coveredSpan(entries, visible) {
+	const rows = entries.flatMap((entry, index) => visible.has(entry.id) ? [index] : []);
+	return rows.length ? `${rows[0] + 1} / ${rows.at(-1) + 2}` : void 0;
+}
+function sameTargets(next, previous) {
+	return next.length === previous.length && next.every((entry, index) => entry.id === previous[index]?.id);
+}
+function hashTarget(entries) {
+	const hash = decodeURIComponent(location.hash.slice(1));
+	return hash && entries.some((entry) => entry.id === hash) ? hash : void 0;
+}
+function spyTargets(entries) {
+	return entries.map(({ id }) => document.getElementById(id));
+}
+function applyIntersections(intersecting, observed, current) {
+	for (const entry of observed) if (entry.isIntersecting && entry.intersectionRatio > 0) intersecting.add(entry.target.id);
+	else intersecting.delete(entry.target.id);
+	return intersecting.size ? new Set(intersecting) : new Set(current ? [current] : []);
+}
+function jumpToAnchor(event, id) {
+	const el = document.getElementById(id);
+	if (!el) return false;
+	event.preventDefault();
+	el.scrollIntoView({
+		behavior: prefersReducedMotion() ? "auto" : "smooth",
+		block: "start"
+	});
+	history.replaceState(history.state, "", `#${id}`);
+	return true;
+}
+//#endregion
 //#region src/components/anchor/composables/useScrollSpy.ts
 function useScrollSpy(entries) {
 	const visible = shallowRef(/* @__PURE__ */ new Set());
 	const targets = shallowRef([]);
 	const intersecting = /* @__PURE__ */ new Set();
-	const covered = computed(() => entries().filter((entry) => visible.value.has(entry.id)));
+	const covered = computed(() => coveredEntries(entries(), visible.value));
 	const current = computed(() => covered.value[0]?.id);
-	const span = computed(() => {
-		const rows = entries().flatMap((entry, index) => visible.value.has(entry.id) ? [index] : []);
-		return rows.length ? `${rows[0] + 1} / ${rows.at(-1) + 2}` : void 0;
-	});
+	const span = computed(() => coveredSpan(entries(), visible.value));
 	useIntersectionObserver(targets, (observed) => {
-		for (const entry of observed) if (entry.isIntersecting && entry.intersectionRatio > 0) intersecting.add(entry.target.id);
-		else intersecting.delete(entry.target.id);
-		visible.value = intersecting.size ? new Set(intersecting) : new Set(current.value ? [current.value] : []);
-	}, {
-		rootMargin: "0px 0px -15% 0px",
-		threshold: [0, Number.EPSILON]
-	});
-	function targetOf(id) {
-		return document.getElementById(id);
-	}
+		visible.value = applyIntersections(intersecting, observed, current.value);
+	}, SCROLL_SPY_OPTIONS);
 	function locate() {
 		intersecting.clear();
-		targets.value = entries().map(({ id }) => targetOf(id));
+		targets.value = spyTargets(entries());
 	}
 	onMounted(() => {
-		const hash = decodeURIComponent(location.hash.slice(1));
-		if (hash && entries().some((entry) => entry.id === hash)) visible.value = /* @__PURE__ */ new Set([hash]);
+		const hash = hashTarget(entries());
+		if (hash) visible.value = /* @__PURE__ */ new Set([hash]);
 		locate();
 		watch(entries, (next, previous) => {
-			if (next.length === previous.length && next.every((entry, index) => entry.id === previous[index]?.id)) return;
+			if (sameTargets(next, previous)) return;
 			visible.value = /* @__PURE__ */ new Set();
 			locate();
 		});
 	});
 	function jump(event, id) {
-		const el = targetOf(id);
-		if (!el) return;
-		event.preventDefault();
-		el.scrollIntoView({
-			behavior: prefersReducedMotion() ? "auto" : "smooth",
-			block: "start"
-		});
-		history.replaceState(history.state, "", `#${id}`);
-		visible.value = /* @__PURE__ */ new Set([id]);
+		if (jumpToAnchor(event, id)) visible.value = /* @__PURE__ */ new Set([id]);
 	}
 	return {
 		visible,
@@ -25973,58 +27023,57 @@ function useScrollSpy(entries) {
 //#endregion
 //#region src/components/anchor/composables/useAnchor.ts
 function useAnchor(items) {
-	const entries = computed(() => items().flatMap((item) => [{
-		id: item.id,
-		label: item.label,
-		depth: 0,
-		item
-	}, ...(item.children ?? []).map((child) => ({
-		id: child.id,
-		label: child.label,
-		depth: 1,
-		item: child
-	}))]));
+	const entries = computed(() => anchorEntries(items()));
 	return {
 		entries,
 		...useScrollSpy(() => entries.value)
 	};
 }
 //#endregion
-//#region src/components/anchor/composables/useAnchorFollow.ts
-function useAnchorFollow(root, current, enabled) {
-	const viewport = shallowRef();
-	let mounted = false;
-	let frame = 0;
-	let lastCurrent;
-	function findViewport(nav, target) {
-		const doc = nav.ownerDocument;
-		const view = doc.defaultView;
-		for (let node = nav; node && node !== doc.body && node !== doc.documentElement; node = node.parentElement) {
-			if (node.contains(target)) break;
-			if (/^(auto|scroll|overlay)$/.test(view.getComputedStyle(node).overflowY)) return node;
-		}
+//#region ../shared/src/behavior/anchor-follow.ts
+function findViewport(nav, target) {
+	const doc = nav.ownerDocument;
+	const view = doc.defaultView;
+	for (let node = nav; node && node !== doc.body && node !== doc.documentElement; node = node.parentElement) {
+		if (node.contains(target)) break;
+		if (/^(auto|scroll|overlay)$/.test(view.getComputedStyle(node).overflowY)) return node;
 	}
-	function follow() {
-		frame = 0;
-		const nav = root.value;
-		const id = current.value;
-		if (!enabled() || !nav || !id) return;
+}
+function createAnchorFollow() {
+	let lastCurrent;
+	let lastEnd;
+	function follow({ nav, current: id, lastCovered, enabled }) {
+		if (!enabled || !nav || !id) return;
 		const target = nav.ownerDocument.getElementById(id);
 		const link = nav.querySelector("a[aria-current=\"location\"]");
 		if (!target || !link || !link.getClientRects().length) return;
 		const port = findViewport(nav, target);
-		viewport.value = port;
-		const changed = lastCurrent !== void 0 && lastCurrent !== id;
+		const result = { viewport: port };
+		const endId = lastCovered ?? id;
+		const changed = lastCurrent !== void 0 && (lastCurrent !== id || lastEnd !== endId);
 		lastCurrent = id;
-		if (!port || port.clientHeight <= 0 || port.scrollHeight <= port.clientHeight) return;
+		lastEnd = endId;
+		if (!port || port.clientHeight <= 0 || port.scrollHeight <= port.clientHeight) return result;
 		const box = port.getBoundingClientRect();
-		const row = link.getBoundingClientRect();
+		let row = link.getBoundingClientRect();
 		const scale = port.offsetHeight ? box.height / port.offsetHeight : 1;
-		if (scale <= 0) return;
+		if (scale <= 0) return result;
+		if (endId !== id) {
+			const end = nav.querySelector(`a[href="#${CSS.escape(endId)}"]`);
+			if (end?.getClientRects().length) {
+				const bottom = end.getBoundingClientRect().bottom;
+				const height = bottom - row.top;
+				if (height >= row.height && height <= port.clientHeight * scale) row = {
+					top: row.top,
+					bottom,
+					height
+				};
+			}
+		}
 		const top = box.top + port.clientTop * scale;
 		const bottom = top + port.clientHeight * scale;
-		if (row.top >= top && row.bottom <= bottom) return;
-		if (row.top <= top && row.bottom >= bottom) return;
+		if (row.top >= top && row.bottom <= bottom) return result;
+		if (row.top <= top && row.bottom >= bottom) return result;
 		const style = port.ownerDocument.defaultView.getComputedStyle(port);
 		const margin = Math.min(row.height / scale / 2, port.clientHeight / 4);
 		const padding = (value) => Math.min(Math.max(0, (port.clientHeight - row.height / scale) / 2), value === "auto" ? margin : (parseFloat(value) || 0) * (value.endsWith("%") ? port.clientHeight / 100 : 1));
@@ -26032,11 +27081,31 @@ function useAnchorFollow(root, current, enabled) {
 		const after = padding(style.scrollPaddingBottom);
 		const delta = row.height > bottom - top || row.top < top ? (row.top - top) / scale - before : (row.bottom - bottom) / scale + after;
 		const next = Math.max(0, Math.min(port.scrollHeight - port.clientHeight, port.scrollTop + delta));
-		if (Math.abs(next - port.scrollTop) < 1) return;
+		if (Math.abs(next - port.scrollTop) < 1) return result;
 		port.scrollTo({
 			top: next,
 			behavior: changed && !prefersReducedMotion() ? "smooth" : "instant"
 		});
+		return result;
+	}
+	return { follow };
+}
+//#endregion
+//#region src/components/anchor/composables/useAnchorFollow.ts
+function useAnchorFollow(root, current, lastCovered, enabled) {
+	const viewport = shallowRef();
+	const follower = createAnchorFollow();
+	let mounted = false;
+	let frame = 0;
+	function follow() {
+		frame = 0;
+		const result = follower.follow({
+			nav: root.value,
+			current: current.value,
+			lastCovered: lastCovered.value,
+			enabled: enabled()
+		});
+		if (result) viewport.value = result.viewport;
 	}
 	function schedule() {
 		if (mounted && !frame) frame = requestAnimationFrame(follow);
@@ -26044,6 +27113,7 @@ function useAnchorFollow(root, current, enabled) {
 	watch([
 		root,
 		current,
+		lastCovered,
 		enabled
 	], schedule, { flush: "post" });
 	useResizeObserver(() => [
@@ -26082,7 +27152,10 @@ var Anchor_default = /* @__PURE__ */ defineComponent({
 	props: {
 		items: {},
 		label: {},
-		autoScroll: { type: Boolean },
+		autoScroll: {
+			type: Boolean,
+			default: true
+		},
 		class: {}
 	},
 	emits: ["change"],
@@ -26090,9 +27163,10 @@ var Anchor_default = /* @__PURE__ */ defineComponent({
 		const props = __props;
 		const emit = __emit;
 		const t = useUiLocale();
-		const { entries, visible, current, span, jump } = useAnchor(() => props.items);
+		const { entries, visible, covered, current, span, jump } = useAnchor(() => props.items);
+		const lastCovered = computed(() => covered.value.at(-1)?.id);
 		const root = useTemplateRef("root");
-		useAnchorFollow(root, current, () => props.autoScroll !== false);
+		useAnchorFollow(root, current, lastCovered, () => props.autoScroll);
 		watch(current, (id) => emit("change", id), { flush: "post" });
 		__expose({ current });
 		return (_ctx, _cache) => {
@@ -26656,198 +27730,230 @@ var SidebarTrigger_default = /* @__PURE__ */ defineComponent({
 	}
 });
 //#endregion
-//#region src/components/toast/store.ts
+//#region ../shared/src/behavior/toast.ts
 var MAX_VISIBLE = 5;
 var SETTLE_DELAY = (DURATION.exit + .06) * 1e3;
-var seed = 0;
-var toastState = reactive({ items: [] });
-var timers = /* @__PURE__ */ new Map();
-var pauseReasons = /* @__PURE__ */ new Set();
-function fire(id) {
-	timers.delete(id);
-	const item = toastState.items.find((t) => t.id === id);
-	if (item) close(item, "auto");
-}
-function startTimer(item) {
-	stopTimer(item.id);
-	if (item.duration <= 0) return;
-	const timer = {
-		handle: void 0,
-		remaining: item.duration,
-		startedAt: Date.now()
-	};
-	timers.set(item.id, timer);
-	if (pauseReasons.size === 0) timer.handle = setTimeout(() => fire(item.id), timer.remaining);
-}
-function stopTimer(id) {
-	const timer = timers.get(id);
-	if (timer?.handle) clearTimeout(timer.handle);
-	timers.delete(id);
-}
-function pauseTimers(reason) {
-	if (pauseReasons.has(reason)) return;
-	const wasRunning = pauseReasons.size === 0;
-	pauseReasons.add(reason);
-	if (!wasRunning) return;
-	for (const timer of timers.values()) {
-		if (!timer.handle) continue;
-		clearTimeout(timer.handle);
-		timer.handle = void 0;
-		timer.remaining = Math.max(0, timer.remaining - (Date.now() - timer.startedAt));
-	}
-}
-function resumeTimers(reason) {
-	pauseReasons.delete(reason);
-	if (pauseReasons.size > 0) return;
-	for (const [id, timer] of timers) {
-		if (timer.handle) continue;
-		timer.startedAt = Date.now();
-		timer.handle = setTimeout(() => fire(id), timer.remaining);
-	}
-}
-function settle(item) {
-	const index = toastState.items.indexOf(item);
-	if (index >= 0) toastState.items.splice(index, 1);
-}
-function close(item, source) {
-	if (!item.open) return;
-	item.open = false;
-	stopTimer(item.id);
-	if (source === "auto") item.onAutoClose?.(item.id);
-	item.onDismiss?.(item.id);
-	setTimeout(() => settle(item), SETTLE_DELAY);
-}
-function dismiss(id) {
-	for (const item of toastState.items) {
-		if (id !== void 0 && item.id !== id) continue;
-		close(item, "manual");
-	}
-}
 function defaultDuration(tone) {
 	return tone === "loading" ? 0 : 4e3;
 }
-function push(message, options = {}) {
-	const tone = options.tone ?? "neutral";
-	const existing = options.id !== void 0 ? toastState.items.find((t) => t.id === options.id) : void 0;
-	if (existing && existing.open) {
-		existing.tone = tone;
-		existing.message = message;
-		existing.description = options.description;
-		existing.duration = options.duration ?? defaultDuration(tone);
-		existing.action = options.action;
-		existing.cancel = options.cancel;
-		existing.component = options.component ? markRaw(options.component) : void 0;
-		existing.componentProps = options.componentProps;
-		if (options.onDismiss) existing.onDismiss = options.onDismiss;
-		if (options.onAutoClose) existing.onAutoClose = options.onAutoClose;
-		startTimer(existing);
-		return existing.id;
-	}
-	if (existing) settle(existing);
-	const item = {
-		id: options.id ?? ++seed,
-		tone,
-		message,
-		description: options.description,
-		duration: options.duration ?? defaultDuration(tone),
-		open: true,
-		action: options.action,
-		cancel: options.cancel,
-		component: options.component ? markRaw(options.component) : void 0,
-		componentProps: options.componentProps,
-		onDismiss: options.onDismiss,
-		onAutoClose: options.onAutoClose
-	};
-	toastState.items.push(item);
-	startTimer(item);
-	const visible = toastState.items.filter((t) => t.open);
-	for (const stale of visible.slice(0, Math.max(0, visible.length - MAX_VISIBLE))) close(stale, "manual");
-	return item.id;
-}
 function resolveMessage(input, value) {
 	const raw = typeof input === "function" ? input(value) : input;
 	if (typeof raw === "string") return { message: raw };
 	return raw;
 }
-function promiseToast(promise, messages, options = {}) {
-	const id = push(messages.loading, {
-		...options,
-		tone: "loading",
-		duration: 0
-	});
-	promise.then((value) => {
-		const done = resolveMessage(messages.success, value);
-		push(done.message, {
+function createToastStore(options) {
+	const state = options.state;
+	const wrap = options.raw ?? ((component) => component);
+	const notify = options.notify ?? (() => {});
+	let seed = 0;
+	const timers = /* @__PURE__ */ new Map();
+	const pauseReasons = /* @__PURE__ */ new Set();
+	function fire(id) {
+		timers.delete(id);
+		const item = state.items.find((t) => t.id === id);
+		if (item) close(item, "auto");
+	}
+	function startTimer(item) {
+		stopTimer(item.id);
+		if (item.duration <= 0) return;
+		const timer = {
+			handle: void 0,
+			remaining: item.duration,
+			startedAt: Date.now()
+		};
+		timers.set(item.id, timer);
+		if (pauseReasons.size === 0) timer.handle = setTimeout(() => fire(item.id), timer.remaining);
+	}
+	function stopTimer(id) {
+		const timer = timers.get(id);
+		if (timer?.handle) clearTimeout(timer.handle);
+		timers.delete(id);
+	}
+	function pauseTimers(reason) {
+		if (pauseReasons.has(reason)) return;
+		const wasRunning = pauseReasons.size === 0;
+		pauseReasons.add(reason);
+		if (!wasRunning) return;
+		for (const timer of timers.values()) {
+			if (!timer.handle) continue;
+			clearTimeout(timer.handle);
+			timer.handle = void 0;
+			timer.remaining = Math.max(0, timer.remaining - (Date.now() - timer.startedAt));
+		}
+	}
+	function resumeTimers(reason) {
+		pauseReasons.delete(reason);
+		if (pauseReasons.size > 0) return;
+		for (const [id, timer] of timers) {
+			if (timer.handle) continue;
+			timer.startedAt = Date.now();
+			timer.handle = setTimeout(() => fire(id), timer.remaining);
+		}
+	}
+	function settle(item) {
+		const index = state.items.indexOf(item);
+		if (index >= 0) state.items.splice(index, 1);
+		notify();
+	}
+	function close(item, source) {
+		if (!item.open) return;
+		item.open = false;
+		stopTimer(item.id);
+		notify();
+		if (source === "auto") item.onAutoClose?.(item.id);
+		item.onDismiss?.(item.id);
+		setTimeout(() => settle(item), SETTLE_DELAY);
+	}
+	function dismiss(id) {
+		for (const item of state.items) {
+			if (id !== void 0 && item.id !== id) continue;
+			close(item, "manual");
+		}
+	}
+	function push(message, options = {}) {
+		const tone = options.tone ?? "neutral";
+		const existing = options.id !== void 0 ? state.items.find((t) => t.id === options.id) : void 0;
+		if (existing && existing.open) {
+			existing.tone = tone;
+			existing.message = message;
+			existing.description = options.description;
+			existing.duration = options.duration ?? defaultDuration(tone);
+			existing.action = options.action;
+			existing.cancel = options.cancel;
+			existing.component = options.component ? wrap(options.component) : void 0;
+			existing.componentProps = options.componentProps;
+			if (options.onDismiss) existing.onDismiss = options.onDismiss;
+			if (options.onAutoClose) existing.onAutoClose = options.onAutoClose;
+			startTimer(existing);
+			notify();
+			return existing.id;
+		}
+		if (existing) settle(existing);
+		const item = {
+			id: options.id ?? ++seed,
+			tone,
+			message,
+			description: options.description,
+			duration: options.duration ?? defaultDuration(tone),
+			open: true,
+			action: options.action,
+			cancel: options.cancel,
+			component: options.component ? wrap(options.component) : void 0,
+			componentProps: options.componentProps,
+			onDismiss: options.onDismiss,
+			onAutoClose: options.onAutoClose
+		};
+		state.items.push(item);
+		startTimer(item);
+		notify();
+		const visible = state.items.filter((t) => t.open);
+		for (const stale of visible.slice(0, Math.max(0, visible.length - MAX_VISIBLE))) close(stale, "manual");
+		return item.id;
+	}
+	function promiseToast(promise, messages, options = {}) {
+		const id = push(messages.loading, {
 			...options,
-			id,
-			tone: "success",
-			description: done.description
+			tone: "loading",
+			duration: 0
 		});
-	}).catch((reason) => {
-		const done = resolveMessage(messages.error, reason);
-		push(done.message, {
-			...options,
-			id,
-			tone: "danger",
-			description: done.description
+		promise.then((value) => {
+			const done = resolveMessage(messages.success, value);
+			push(done.message, {
+				...options,
+				id,
+				tone: "success",
+				description: done.description
+			});
+		}).catch((reason) => {
+			const done = resolveMessage(messages.error, reason);
+			push(done.message, {
+				...options,
+				id,
+				tone: "danger",
+				description: done.description
+			});
 		});
-	});
-	return promise;
+		return promise;
+	}
+	return {
+		toast: Object.assign((message, options) => push(message, options), {
+			success: (message, options) => push(message, {
+				...options,
+				tone: "success"
+			}),
+			danger: (message, options) => push(message, {
+				...options,
+				tone: "danger"
+			}),
+			warning: (message, options) => push(message, {
+				...options,
+				tone: "warning"
+			}),
+			info: (message, options) => push(message, {
+				...options,
+				tone: "info"
+			}),
+			loading: (message, options) => push(message, {
+				...options,
+				tone: "loading"
+			}),
+			custom: (component, options) => {
+				const { props: componentProps, ...rest } = options ?? {};
+				return push("", {
+					...rest,
+					component,
+					componentProps
+				});
+			},
+			promise: promiseToast,
+			dismiss
+		}),
+		dismiss,
+		pauseTimers,
+		resumeTimers
+	};
 }
-var toast = Object.assign((message, options) => push(message, options), {
-	success: (message, options) => push(message, {
-		...options,
-		tone: "success"
-	}),
-	danger: (message, options) => push(message, {
-		...options,
-		tone: "danger"
-	}),
-	warning: (message, options) => push(message, {
-		...options,
-		tone: "warning"
-	}),
-	info: (message, options) => push(message, {
-		...options,
-		tone: "info"
-	}),
-	loading: (message, options) => push(message, {
-		...options,
-		tone: "loading"
-	}),
-	custom: (component, options) => {
-		const { props: componentProps, ...rest } = options ?? {};
-		return push("", {
-			...rest,
-			component,
-			componentProps
+//#endregion
+//#region src/components/toast/store.ts
+var toastState = reactive({ items: [] });
+var { toast, dismiss, pauseTimers, resumeTimers } = createToastStore({
+	state: toastState,
+	raw: (component) => markRaw(component)
+});
+function toastLayout(open, heightOf) {
+	const map = /* @__PURE__ */ new Map();
+	let offset = 0;
+	for (let i = open.length - 1; i >= 0; i -= 1) {
+		const item = open[i];
+		const index = open.length - 1 - i;
+		map.set(item.id, {
+			index,
+			offset
 		});
-	},
-	promise: promiseToast,
-	dismiss
-});
+		offset += (heightOf(item.id) ?? 0) + 12;
+	}
+	return map;
+}
+function toastItemStyle(slot, selfHeight, frontHeight) {
+	return {
+		"--hn-t-index": String(slot.index),
+		"--hn-t-offset": `${slot.offset}px`,
+		...selfHeight ? { "--hn-t-self-h": `${selfHeight}px` } : {},
+		...frontHeight > 0 ? { "--hn-t-front-h": `${frontHeight}px` } : {}
+	};
+}
+function toastCardHeight(body) {
+	return body.offsetHeight + 34;
+}
 //#endregion
 //#region src/components/toast/composables/useToastLayout.ts
-var GAP = 12;
-var CARD_CHROME_BLOCK = 34;
 function useToastLayout() {
 	const heights = reactive(/* @__PURE__ */ new Map());
 	const observers = /* @__PURE__ */ new Map();
 	const lastLayout = /* @__PURE__ */ new Map();
 	const openItems = computed(() => toastState.items.filter((item) => item.open));
 	const layout = computed(() => {
-		const map = /* @__PURE__ */ new Map();
-		const open = openItems.value;
-		let offset = 0;
-		for (let i = open.length - 1; i >= 0; i -= 1) {
-			const item = open[i];
-			const index = open.length - 1 - i;
-			map.set(item.id, {
-				index,
-				offset
-			});
-			offset += (heights.get(item.id) ?? 0) + GAP;
-		}
+		const map = toastLayout(openItems.value, (id) => heights.get(id));
 		for (const [id, slot] of map) lastLayout.set(id, slot);
 		return map;
 	});
@@ -26862,14 +27968,7 @@ function useToastLayout() {
 		};
 	}
 	function itemStyle(item) {
-		const slot = slotOf(item);
-		const selfHeight = heights.get(item.id);
-		return {
-			"--hn-t-index": String(slot.index),
-			"--hn-t-offset": `${slot.offset}px`,
-			...selfHeight ? { "--hn-t-self-h": `${selfHeight}px` } : {},
-			...frontHeight.value > 0 ? { "--hn-t-front-h": `${frontHeight.value}px` } : {}
-		};
+		return toastItemStyle(slotOf(item), heights.get(item.id), frontHeight.value);
 	}
 	function setItemRef(id, refValue) {
 		const el = refValue;
@@ -26878,10 +27977,10 @@ function useToastLayout() {
 		if (existing?.el === el) return;
 		existing?.observer.disconnect();
 		const observer = new ResizeObserver(() => {
-			heights.set(id, el.offsetHeight + CARD_CHROME_BLOCK);
+			heights.set(id, toastCardHeight(el));
 		});
 		observer.observe(el);
-		heights.set(id, el.offsetHeight + CARD_CHROME_BLOCK);
+		heights.set(id, toastCardHeight(el));
 		observers.set(id, {
 			observer,
 			el
@@ -27095,7 +28194,7 @@ var Toaster_default = /* @__PURE__ */ defineComponent({
 	}
 });
 //#endregion
-//#region src/components/spoiler/worklet.ts
+//#region ../shared/src/behavior/spoiler/worklet.ts
 var workletMain = () => {
 	const M = Math;
 	const lcgrand = (seed = 1) => (a = 0, b = 1) => a + M.abs(b - a) * (M.imul(48271, seed = M.imul(214013, seed) + 2531011) & 2147483647) / 2147483647;
@@ -27248,7 +28347,7 @@ var workletMain = () => {
 };
 var workletSource = `(${workletMain.toString()})()`;
 //#endregion
-//#region src/components/spoiler/SpoilerPainter.ts
+//#region ../shared/src/behavior/spoiler/painter.ts
 var isPaintWorkletSupported = typeof CSS !== "undefined" && CSS.paintWorklet !== void 0;
 var workletRegistered = false;
 function registerSpoilerWorklet() {
@@ -27428,7 +28527,7 @@ function useSpoiler(host, hidden, forceFallback) {
 	return { usesFallback };
 }
 //#endregion
-//#region src/components/spoiler/utils/irisOrigin.ts
+//#region ../shared/src/lib/iris-origin.ts
 function irisOrigin(rects, clientX, clientY) {
 	const valid = rects.filter((r) => r.width > 0 && r.height > 0);
 	if (valid.length === 0) return null;
@@ -27600,7 +28699,7 @@ var ImageGroup_default = /* @__PURE__ */ defineComponent({
 	}
 });
 //#endregion
-//#region src/components/scroll-area/scroll-restore.ts
+//#region ../shared/src/lib/scroll-restore.ts
 var SCROLL_STATE_FIELD = "hnScroll";
 var RESTORE_DEADLINE_MS = 3e3;
 var SAVE_THROTTLE_MS = 500;
@@ -28101,7 +29200,7 @@ var DataTableText_default = /* @__PURE__ */ defineComponent({
 	}
 });
 //#endregion
-//#region src/components/data-table/utils.ts
+//#region ../shared/src/lib/data-table/utils.ts
 function rowId(key) {
 	return `${typeof key}:${key}`;
 }
@@ -28527,6 +29626,140 @@ var features = tableFeatures({
 	paginatedRowModel: createPaginatedRowModel()
 });
 //#endregion
+//#region ../shared/src/lib/data-table/state.ts
+function keyOf(row, field) {
+	return typeof field === "function" ? field(row) : row[field];
+}
+function labelOf(row, label, key) {
+	return String(typeof label === "function" ? label(row) : label === void 0 ? key(row) : row[label]);
+}
+function valueOf(row, column) {
+	return column.accessor ? column.accessor(row) : row[column.field ?? column.key];
+}
+function displayValue(row, column) {
+	const value = valueOf(row, column);
+	return column.format ? column.format(value, row) : value == null ? "—" : String(value);
+}
+function compareValues(left, right, collator) {
+	if (typeof left === "number" && typeof right === "number") return left - right;
+	if (left instanceof Date && right instanceof Date) return left.getTime() - right.getTime();
+	return collator.compare(String(left), String(right));
+}
+function engineSorting(sorting) {
+	return sorting.map((sort) => ({
+		id: sort.key,
+		desc: sort.desc
+	}));
+}
+function modelSorting(sorting) {
+	return sorting.map((sort) => ({
+		key: sort.id,
+		desc: sort.desc
+	}));
+}
+function engineSelection(selected) {
+	return Object.fromEntries(selected.map((key) => [rowId(key), true]));
+}
+function modelSelection(selection) {
+	return Object.keys(selection).filter((key) => selection[key]).map(rowKey);
+}
+function engineColumnFilters(leaves, filters) {
+	return filters.filter((filter) => leaves.some((column) => column.key === filter.key)).map((filter) => ({
+		id: filter.key,
+		value: filter.value
+	}));
+}
+function engineGrouping(leaves, grouping) {
+	return grouping.filter((key) => leaves.some((column) => column.key === key));
+}
+function engineExpanded(expanded, groups) {
+	return Object.fromEntries([...expanded.map(rowId), ...groups].map((key) => [key, true]));
+}
+function engineVisibility(hidden) {
+	return Object.fromEntries(hidden.map((key) => [key, false]));
+}
+function engineState(leaves, models, page, pageSize) {
+	return {
+		sorting: engineSorting(models.sorting),
+		globalFilter: models.filter.trim(),
+		columnFilters: engineColumnFilters(leaves, models.columnFilters),
+		grouping: engineGrouping(leaves, models.grouping),
+		expanded: engineExpanded(models.expanded, models.expandedGroups),
+		pagination: {
+			pageIndex: page - 1,
+			pageSize
+		},
+		rowSelection: engineSelection(models.selected),
+		columnVisibility: engineVisibility(models.hiddenColumns)
+	};
+}
+function orderColumns(leaves, hidden, order) {
+	const visible = leaves.filter((column) => !hidden.includes(column.key));
+	const ranking = [.../* @__PURE__ */ new Set([...order, ...visible.map((column) => column.key)])];
+	return visible.sort((a, b) => {
+		const rank = (column) => column.pin === "start" ? 0 : column.pin === "end" ? 2 : 1;
+		return rank(a) - rank(b) || ranking.indexOf(a.key) - ranking.indexOf(b.key);
+	});
+}
+function toggleKey(list, key, next) {
+	return next ? [.../* @__PURE__ */ new Set([...list, key])] : list.filter((item) => item !== key);
+}
+function nextColumnFilters(filters, column, value) {
+	const next = filters.filter((filter) => filter.key !== column);
+	if (value != null && value !== "" && !(Array.isArray(value) && !value.length)) next.push({
+		key: column,
+		value
+	});
+	return next;
+}
+function totalRows(manual, total, supplied, processed) {
+	return manual ? Math.max(0, Math.floor(Number.isFinite(total) ? total : supplied)) : processed();
+}
+function pageCount(total, pageSize) {
+	return Math.max(1, Math.ceil(total / pageSize));
+}
+function canGoNext(knownTotal, page, count, hasNextPage, rows, pageSize) {
+	return knownTotal ? page < count : hasNextPage ?? rows >= pageSize;
+}
+function clampedPage(pagination, loading, knownTotal, page, count) {
+	return pagination && !loading && knownTotal && page > count ? count : void 0;
+}
+function uniqueSelectable(rows) {
+	return [...new Map(rows.filter((row) => row.getCanSelect()).map((row) => [row.id, row])).values()];
+}
+function selectionState(eligible) {
+	if (!eligible.length) return false;
+	const count = eligible.filter((row) => row.getIsSelected()).length;
+	return count === eligible.length ? true : count || eligible.some((row) => row.getIsSomeSelected()) ? "indeterminate" : false;
+}
+function toggleSelection(selected, rows, value, cascade, key) {
+	const keys = new Set(selected);
+	for (const row of rows) {
+		const descendants = cascade ? [row, ...row.getLeafRows()] : [row];
+		for (const item of descendants) if (item.getCanSelect()) {
+			if (value === true) keys.add(key(item.original));
+			else keys.delete(key(item.original));
+		}
+	}
+	return [...keys];
+}
+function sortLabel(next, messages) {
+	return next === "asc" ? messages.sortAsc : next === "desc" ? messages.sortDesc : messages.sortNone;
+}
+function ariaSort(sorting) {
+	return sorting ? sorting === "asc" ? "ascending" : "descending" : void 0;
+}
+function tableQuery(page, pageSize, models) {
+	return {
+		page,
+		pageSize,
+		sorting: models.sorting.map((sort) => ({ ...sort })),
+		filter: models.filter,
+		columnFilters: models.columnFilters.map((filter) => ({ ...filter })),
+		grouping: [...models.grouping]
+	};
+}
+//#endregion
 //#region src/components/data-table/composables/useDataTable.ts
 function useDataTable(props, models, onChange, onRowClick) {
 	const t = useUiLocale();
@@ -28539,27 +29772,24 @@ function useDataTable(props, models, onChange, onRowClick) {
 		numeric: true,
 		sensitivity: "base"
 	}));
-	const keyOf = (row) => typeof props.rowKey === "function" ? props.rowKey(row) : row[props.rowKey];
-	const labelOf = (row) => String(typeof props.rowLabel === "function" ? props.rowLabel(row) : props.rowLabel === void 0 ? keyOf(row) : row[props.rowLabel]);
-	const valueOf = (row, column) => column.accessor ? column.accessor(row) : row[column.field ?? column.key];
+	const keyOf$1 = (row) => keyOf(row, props.rowKey);
+	const labelOf$1 = (row) => labelOf(row, props.rowLabel, keyOf$1);
+	const valueOf$1 = (row, column) => valueOf(row, column);
 	const selectable = (row) => typeof props.selectable === "function" ? props.selectable(row) : !!props.selectable;
 	const expandable = (row) => typeof props.expandable === "function" ? props.expandable(row) : !!props.expandable;
 	const columns = computed(() => {
 		const compare = collator.value;
 		return leaves.value.map((column) => ({
 			id: column.key,
-			accessorFn: (row) => valueOf(row, column) ?? void 0,
+			accessorFn: (row) => valueOf$1(row, column) ?? void 0,
 			enableSorting: !!column.sortable,
 			enableGlobalFilter: column.filterable !== false,
-			filterFn: (row, _id, value) => column.filterValue ? column.filterValue(row.original, value) : filterValue(valueOf(row.original, column), value, column.filterMode, t.value.tag),
+			filterFn: (row, _id, value) => column.filterValue ? column.filterValue(row.original, value) : filterValue(valueOf$1(row.original, column), value, column.filterMode, t.value.tag),
 			sortDescFirst: false,
 			sortUndefined: "last",
 			sortFn: (a, b, id) => {
 				if (column.sort) return column.sort(a.original, b.original);
-				const left = a.getValue(id), right = b.getValue(id);
-				if (typeof left === "number" && typeof right === "number") return left - right;
-				if (left instanceof Date && right instanceof Date) return left.getTime() - right.getTime();
-				return compare.compare(String(left), String(right));
+				return compareValues(a.getValue(id), b.getValue(id), compare);
 			}
 		}));
 	});
@@ -28567,7 +29797,7 @@ function useDataTable(props, models, onChange, onRowClick) {
 		features,
 		data: computed(() => props.rows),
 		columns,
-		getRowId: (row) => rowId(keyOf(row)),
+		getRowId: (row) => rowId(keyOf$1(row)),
 		getSubRows: (row) => props.getChildren?.(row),
 		manualSorting: computed(() => !!props.manual),
 		manualFiltering: computed(() => !!props.manual),
@@ -28588,61 +29818,39 @@ function useDataTable(props, models, onChange, onRowClick) {
 			const column = leaves.value.find((column) => column.key === id);
 			return column.filter ? column.filter(row.original, query) : filterValue(row.getValue(id), query, "contains", t.value.tag);
 		},
-		state: computed(() => ({
-			sorting: models.sorting.value.map((sort) => ({
-				id: sort.key,
-				desc: sort.desc
-			})),
-			globalFilter: models.filter.value.trim(),
-			columnFilters: models.columnFilters.value.filter((filter) => leaves.value.some((column) => column.key === filter.key)).map((filter) => ({
-				id: filter.key,
-				value: filter.value
-			})),
-			grouping: models.grouping.value.filter((key) => leaves.value.some((column) => column.key === key)),
-			expanded: Object.fromEntries([...models.expanded.value.map(rowId), ...models.expandedGroups.value].map((key) => [key, true])),
-			pagination: {
-				pageIndex: page.value - 1,
-				pageSize: pageSize.value
-			},
-			rowSelection: Object.fromEntries(models.selected.value.map((key) => [rowId(key), true])),
-			columnVisibility: Object.fromEntries(models.hiddenColumns.value.map((key) => [key, false]))
-		})),
+		state: computed(() => engineState(leaves.value, {
+			sorting: models.sorting.value,
+			filter: models.filter.value,
+			columnFilters: models.columnFilters.value,
+			grouping: models.grouping.value,
+			selected: models.selected.value,
+			expanded: models.expanded.value,
+			expandedGroups: models.expandedGroups.value,
+			hiddenColumns: models.hiddenColumns.value
+		}, page.value, pageSize.value)),
 		onSortingChange: (updater) => {
 			if (blocked.value) return;
-			const current = models.sorting.value.map((sort) => ({
-				id: sort.key,
-				desc: sort.desc
-			}));
+			const current = engineSorting(models.sorting.value);
 			const next = typeof updater === "function" ? updater(current) : updater;
-			models.sorting.value = next.map((sort) => ({
-				key: sort.id,
-				desc: sort.desc
-			}));
+			models.sorting.value = modelSorting(next);
 		},
 		onRowSelectionChange: (updater) => {
 			if (blocked.value) return;
-			const current = Object.fromEntries(models.selected.value.map((key) => [rowId(key), true]));
+			const current = engineSelection(models.selected.value);
 			const next = typeof updater === "function" ? updater(current) : updater;
-			models.selected.value = Object.keys(next).filter((key) => next[key]).map(rowKey);
+			models.selected.value = modelSelection(next);
 		}
 	});
-	const visibleColumns = computed(() => {
-		const visible = leaves.value.filter((column) => !models.hiddenColumns.value.includes(column.key));
-		const order = [.../* @__PURE__ */ new Set([...models.columnOrder.value, ...visible.map((column) => column.key)])];
-		return visible.sort((a, b) => {
-			const rank = (column) => column.pin === "start" ? 0 : column.pin === "end" ? 2 : 1;
-			return rank(a) - rank(b) || order.indexOf(a.key) - order.indexOf(b.key);
-		});
-	});
+	const visibleColumns = computed(() => orderColumns(leaves.value, models.hiddenColumns.value, models.columnOrder.value));
 	const knownTotal = computed(() => !props.manual || props.total !== void 0);
-	const total = computed(() => props.manual ? Math.max(0, Math.floor(Number.isFinite(props.total) ? props.total : props.rows.length)) : table.getPreExpandedRowModel().rows.length);
-	const pageCount = computed(() => Math.max(1, Math.ceil(total.value / pageSize.value)));
-	const canNext = computed(() => knownTotal.value ? page.value < pageCount.value : props.hasNextPage ?? props.rows.length >= pageSize.value);
+	const total = computed(() => totalRows(props.manual, props.total, props.rows.length, () => table.getPreExpandedRowModel().rows.length));
+	const pageCount$1 = computed(() => pageCount(total.value, pageSize.value));
+	const canNext = computed(() => canGoNext(knownTotal.value, page.value, pageCount$1.value, props.hasNextPage, props.rows.length, pageSize.value));
 	function toggleExpanded(key, value) {
 		if (blocked.value) return;
 		if (!table.getCoreRowModel().rowsById[rowId(key)]?.getCanExpand()) return;
 		const next = value ?? !models.expanded.value.includes(key);
-		models.expanded.value = next ? [.../* @__PURE__ */ new Set([...models.expanded.value, key])] : models.expanded.value.filter((item) => item !== key);
+		models.expanded.value = toggleKey(models.expanded.value, key, next);
 	}
 	function toggleSelected(key, value) {
 		if (blocked.value) return;
@@ -28652,7 +29860,7 @@ function useDataTable(props, models, onChange, onRowClick) {
 	const rows = computed(() => table.getRowModel().rows.map((row) => {
 		const context = {
 			row: row.original,
-			key: keyOf(row.original),
+			key: keyOf$1(row.original),
 			index: row.index,
 			depth: row.depth,
 			selected: row.getIsSelected(),
@@ -28660,9 +29868,9 @@ function useDataTable(props, models, onChange, onRowClick) {
 			indeterminate: props.selectChildren !== false && row.getIsSomeSelected(),
 			expanded: row.getIsExpanded(),
 			expandable: row.getCanExpand(),
-			toggleSelected: (value) => toggleSelected(keyOf(row.original), value),
-			toggleExpanded: (value) => toggleExpanded(keyOf(row.original), value),
-			startEdit: (column) => api.startEdit(keyOf(row.original), column)
+			toggleSelected: (value) => toggleSelected(keyOf$1(row.original), value),
+			toggleExpanded: (value) => toggleExpanded(keyOf$1(row.original), value),
+			startEdit: (column) => api.startEdit(keyOf$1(row.original), column)
 		};
 		const group = row.getIsGrouped() ? {
 			key: row.id,
@@ -28674,51 +29882,30 @@ function useDataTable(props, models, onChange, onRowClick) {
 			toggleExpanded: (value) => {
 				if (blocked.value) return;
 				const next = value ?? !models.expandedGroups.value.includes(row.id);
-				models.expandedGroups.value = next ? [.../* @__PURE__ */ new Set([...models.expandedGroups.value, row.id])] : models.expandedGroups.value.filter((key) => key !== row.id);
+				models.expandedGroups.value = toggleKey(models.expandedGroups.value, row.id, next);
 			},
 			aggregate: (key) => {
 				const column = leaves.value.find((column) => column.key === key);
-				return column ? aggregate(row.getLeafRows().map((leaf) => leaf.original), column, valueOf) : void 0;
+				return column ? aggregate(row.getLeafRows().map((leaf) => leaf.original), column, valueOf$1) : void 0;
 			}
 		} : void 0;
 		return {
 			...context,
 			id: row.id,
-			label: labelOf(row.original),
+			label: labelOf$1(row.original),
 			group
 		};
 	}));
-	const selectionRows = computed(() => {
-		const source = props.selectAll === "filtered" ? table.getFilteredRowModel().flatRows : table.getRowModel().rows.flatMap((row) => row.getIsGrouped() ? row.getLeafRows() : [row]);
-		return [...new Map(source.filter((row) => row.getCanSelect()).map((row) => [row.id, row])).values()];
-	});
-	const pageSelection = computed(() => {
-		const eligible = selectionRows.value;
-		if (!eligible.length) return false;
-		const count = eligible.filter((row) => row.getIsSelected()).length;
-		return count === eligible.length ? true : count || eligible.some((row) => row.getIsSomeSelected()) ? "indeterminate" : false;
-	});
+	const selectionRows = computed(() => uniqueSelectable(props.selectAll === "filtered" ? table.getFilteredRowModel().flatRows : table.getRowModel().rows.flatMap((row) => row.getIsGrouped() ? row.getLeafRows() : [row])));
+	const pageSelection = computed(() => selectionState(selectionRows.value));
 	const selectionDisabled = computed(() => blocked.value || !selectionRows.value.length);
 	function togglePage(selected) {
 		if (blocked.value || props.selectionMode === "single") return;
-		const keys = new Set(models.selected.value);
-		for (const row of selectionRows.value) {
-			const descendants = props.selectChildren === false ? [row] : [row, ...row.getLeafRows()];
-			for (const item of descendants) if (item.getCanSelect()) {
-				if (selected === true) keys.add(keyOf(item.original));
-				else keys.delete(keyOf(item.original));
-			}
-		}
-		models.selected.value = [...keys];
+		models.selected.value = toggleSelection(models.selected.value, selectionRows.value, selected, props.selectChildren !== false, keyOf$1);
 	}
 	function setFilter(column, value) {
 		if (blocked.value) return;
-		const next = models.columnFilters.value.filter((filter) => filter.key !== column);
-		if (value != null && value !== "" && !(Array.isArray(value) && !value.length)) next.push({
-			key: column,
-			value
-		});
-		models.columnFilters.value = next;
+		models.columnFilters.value = nextColumnFilters(models.columnFilters.value, column, value);
 	}
 	function headerContext(column) {
 		const engine = leaves.value.some((item) => item.key === column.key) ? table.getColumn(column.key) : void 0;
@@ -28730,8 +29917,8 @@ function useDataTable(props, models, onChange, onRowClick) {
 			sortIndex: engine?.getSortIndex() ?? -1,
 			filterValue: models.columnFilters.value.find((filter) => filter.key === column.key)?.value,
 			setFilter: (value) => setFilter(column.key, value),
-			nextLabel: next === "asc" ? t.value.table.sortAsc : next === "desc" ? t.value.table.sortDesc : t.value.table.sortNone,
-			ariaSort: sorting ? sorting === "asc" ? "ascending" : "descending" : void 0,
+			nextLabel: sortLabel(next, t.value.table),
+			ariaSort: ariaSort(sorting),
 			toggleSort: (multi = false) => {
 				if (!blocked.value && column.sortable) engine?.toggleSorting(void 0, !!props.multiSort && multi);
 			}
@@ -28746,7 +29933,7 @@ function useDataTable(props, models, onChange, onRowClick) {
 		toggleExpanded,
 		setFilter,
 		setColumnHidden: (key, hidden) => {
-			models.hiddenColumns.value = hidden ? [.../* @__PURE__ */ new Set([...models.hiddenColumns.value, key])] : models.hiddenColumns.value.filter((value) => value !== key);
+			models.hiddenColumns.value = toggleKey(models.hiddenColumns.value, key, hidden);
 		}
 	});
 	const state = computed(() => ({
@@ -28773,13 +29960,14 @@ function useDataTable(props, models, onChange, onRowClick) {
 		if (props.autoResetPage !== false) models.page.value = 1;
 	}, { deep: true });
 	watch([
-		pageCount,
+		pageCount$1,
 		page,
 		() => props.loading,
 		() => props.pagination,
 		knownTotal
 	], () => {
-		if (props.pagination && !props.loading && knownTotal.value && page.value > pageCount.value) models.page.value = pageCount.value;
+		const target = clampedPage(props.pagination, props.loading, knownTotal.value, page.value, pageCount$1.value);
+		if (target !== void 0) models.page.value = target;
 	}, { immediate: true });
 	watch(() => [
 		page.value,
@@ -28789,14 +29977,12 @@ function useDataTable(props, models, onChange, onRowClick) {
 		models.columnFilters.value,
 		models.grouping.value
 	], () => {
-		onChange({
-			page: page.value,
-			pageSize: pageSize.value,
-			sorting: models.sorting.value.map((sort) => ({ ...sort })),
+		onChange(tableQuery(page.value, pageSize.value, {
+			sorting: models.sorting.value,
 			filter: models.filter.value,
-			columnFilters: models.columnFilters.value.map((filter) => ({ ...filter })),
-			grouping: [...models.grouping.value]
-		});
+			columnFilters: models.columnFilters.value,
+			grouping: models.grouping.value
+		}));
 	}, {
 		deep: true,
 		flush: "post"
@@ -28806,9 +29992,8 @@ function useDataTable(props, models, onChange, onRowClick) {
 		if (event.type === "keydown") event.preventDefault();
 		onRowClick(row, event);
 	}
-	function displayValue(row, column) {
-		const value = valueOf(row, column);
-		return column.format ? column.format(value, row) : value == null ? "—" : String(value);
+	function displayValue$1(row, column) {
+		return displayValue(row, column);
 	}
 	return {
 		api,
@@ -28825,17 +30010,17 @@ function useDataTable(props, models, onChange, onRowClick) {
 		pageSelection,
 		selectionDisabled,
 		state,
-		valueOf,
-		displayValue,
+		valueOf: valueOf$1,
+		displayValue: displayValue$1,
 		togglePage,
 		activate,
 		headerContext,
-		keyOf,
-		labelOf
+		keyOf: keyOf$1,
+		labelOf: labelOf$1
 	};
 }
 //#endregion
-//#region src/components/data-table/column-sizing.ts
+//#region ../shared/src/lib/data-table/column-sizing.ts
 function pixelWidth(value, fallback) {
 	return typeof value === "number" && Number.isFinite(value) ? value : typeof value === "string" && /^\d+(\.\d+)?px$/.test(value) ? parseFloat(value) : fallback;
 }
@@ -28903,7 +30088,7 @@ function resizeWidths(column, neighbor, widths, value, minimumTotalWidth = 0, ma
 	};
 }
 //#endregion
-//#region src/components/data-table/column-sizing-styles.ts
+//#region ../shared/src/lib/data-table/column-sizing-styles.ts
 function columnSizingStyles(columns, overrides, controls) {
 	const initial = allocateWidths(columns, overrides, 0);
 	const total = Object.values(initial).reduce((sum, width) => sum + width, controls);
@@ -28923,26 +30108,165 @@ function columnSizingStyles(columns, overrides, controls) {
 	};
 }
 //#endregion
+//#region ../shared/src/lib/data-table/layout.ts
+function pinStyle(layout, column, head = false) {
+	if (!column.pin) return {};
+	const siblings = layout.columns.filter((item) => item.pin === column.pin);
+	const index = siblings.findIndex((item) => item.key === column.key);
+	const preceding = column.pin === "start" ? siblings.slice(0, index) : siblings.slice(index + 1);
+	const controls = column.pin === "start" ? layout.leading * 48 : layout.trailing * 72;
+	const offset = `${preceding.reduce((sum, column) => sum + (layout.constrained ? layout.fixedWidths[column.key] : layout.width(column)), controls)}px`;
+	return {
+		position: "sticky",
+		[column.pin === "start" ? "insetInlineStart" : "insetInlineEnd"]: offset,
+		zIndex: head ? 5 : 1,
+		backgroundColor: head ? "var(--hn-table-head-bg)" : "var(--hn-table-bg)",
+		boxShadow: `${column.pin === "start" ? "1px" : "-1px"} 0 0 var(--hn-border)`
+	};
+}
+function cellStyle(layout, column, head = false) {
+	return {
+		...layout.constrained ? {} : {
+			width: cssSize(column.width),
+			minWidth: cssSize(column.minWidth ?? column.width),
+			maxWidth: cssSize(column.maxWidth)
+		},
+		...pinStyle(layout, column, head)
+	};
+}
+function controlStyle(columns, side, index, head = false) {
+	return {
+		width: side === "end" ? "72px" : "48px",
+		minWidth: side === "end" ? "72px" : "48px",
+		paddingInline: "8px",
+		textAlign: "center",
+		...columns.some((column) => column.pin === side) ? {
+			position: "sticky",
+			[side === "start" ? "insetInlineStart" : "insetInlineEnd"]: `${index * 48}px`,
+			zIndex: head ? 5 : 1,
+			backgroundColor: head ? "var(--hn-table-head-bg)" : "var(--hn-table-bg)"
+		} : {}
+	};
+}
+function headerRows(columns, visible, heights, sticky, context, styleOf) {
+	const paths = /* @__PURE__ */ new Map();
+	function visit(columns, parent = []) {
+		for (const column of columns) {
+			const path = [...parent, column];
+			if (column.children?.length) visit(column.children, path);
+			else paths.set(column.key, path);
+		}
+	}
+	visit(columns);
+	const depth = Math.max(1, ...visible.map((column) => paths.get(column.key).length));
+	return Array.from({ length: depth }, (_, level) => {
+		const result = [];
+		for (let index = 0; index < visible.length;) {
+			const first = visible[index];
+			const path = paths.get(first.key);
+			const column = path[level];
+			if (!column) {
+				index++;
+				continue;
+			}
+			const leaf = level === path.length - 1;
+			let end = index + 1;
+			if (!leaf) while (end < visible.length && paths.get(visible[end].key)?.[level]?.key === column.key && visible[end].pin === first.pin) end++;
+			const top = Array.from({ length: level }, (_, i) => heights[i] ?? 44).reduce((a, b) => a + b, 0);
+			result.push({
+				...context(column),
+				id: leaf ? `leaf:${column.key}` : `${level}:${column.key}:${first.key}`,
+				leaf,
+				colspan: end - index,
+				rowspan: leaf ? depth - level : 1,
+				top,
+				style: {
+					...leaf ? styleOf(column, true) : styleOf(first.pin === "end" ? visible[end - 1] : first, false),
+					...sticky ? { top: `${top}px` } : {}
+				}
+			});
+			index = end;
+		}
+		return result;
+	});
+}
+function canMoveColumn(columns, key, target) {
+	if (key === target) return false;
+	const source = columns.find((column) => column.key === key), destination = columns.find((column) => column.key === target);
+	return !(!source || !destination || source.pin !== destination.pin || source.reorderable === false || destination.reorderable === false);
+}
+function columnOrder(order, leaves) {
+	return [.../* @__PURE__ */ new Set([...order, ...leaves.map((column) => column.key)])];
+}
+function moveColumnOrder(order, leaves, key, target) {
+	const next = columnOrder(order, leaves);
+	const from = next.indexOf(key), to = next.indexOf(target);
+	next.splice(from, 1);
+	next.splice(to, 0, key);
+	return next;
+}
+function dropColumnOrder(order, leaves, key, target, before) {
+	const next = columnOrder(order, leaves);
+	next.splice(next.indexOf(key), 1);
+	next.splice(next.indexOf(target) + (before ? 0 : 1), 0, key);
+	return next;
+}
+function reorderPosition(from, to, before) {
+	return before === void 0 ? to : to + (before ? 0 : 1) - (from < to ? 1 : 0);
+}
+function reorderedRows(source, from, position, row) {
+	const rows = [...source];
+	rows.splice(from, 1);
+	rows.splice(position, 0, row);
+	return rows;
+}
+//#endregion
+//#region ../shared/src/lib/data-table/resize.ts
+function resizeHandlePositions(columns, cells, box, scale, rtl) {
+	let left = box.left;
+	let right = box.right;
+	for (const column of columns) {
+		const rect = cells.get(column.key);
+		if (!rect || !column.pin) continue;
+		if (column.pin === "start" !== rtl) left = Math.max(left, rect.right);
+		else right = Math.min(right, rect.left);
+	}
+	const next = {};
+	for (const column of columns) {
+		const rect = cells.get(column.key);
+		if (!rect) continue;
+		const start = Math.max(rect.left, column.pin ? box.left : left);
+		const end = Math.min(rect.right, column.pin ? box.right : right);
+		const fromLeft = column.pin === "end" !== rtl;
+		next[column.key] = {
+			inset: Math.max(0, (fromLeft ? start - rect.left : rect.right - end) / scale),
+			visible: end - start >= 9 * scale - .01
+		};
+	}
+	return next;
+}
+function resizeAffectedColumns(columns, column, mode) {
+	const edge = resizeBoundary(columns, column, mode);
+	return edge?.neighbor ? edge.side === "start" ? [edge.neighbor, column] : [column, edge.neighbor] : [column];
+}
+function pinnedMaximumWidth(columns, column, mode, source, available) {
+	if (!column.pin || resizeBoundary(columns, column, mode)?.neighbor?.pin) return Infinity;
+	const otherPinned = columns.reduce((sum, item) => sum + (item.pin && item.key !== column.key ? source[item.key] : 0), 0);
+	const center = columns.some((item) => !item.pin) ? 48 : 0;
+	return Math.max(source[column.key], available - otherPinned - center);
+}
+//#endregion
 //#region src/components/data-table/composables/useTableResize.ts
 function useTableResize(props, models, ctl, element, viewport, widths, active, available, updateHandles) {
 	const resizing = shallowRef();
 	const guide = shallowRef();
 	let release;
 	const boundary = (column) => resizeBoundary(ctl.visibleColumns.value, column, props.resizeMode ?? "fit");
-	const affectedColumns = (column) => {
-		const edge = boundary(column);
-		return edge?.neighbor ? edge.side === "start" ? [edge.neighbor, column] : [column, edge.neighbor] : [column];
-	};
+	const affectedColumns = (column) => resizeAffectedColumns(ctl.visibleColumns.value, column, props.resizeMode ?? "fit");
 	const resizeLabel = (column) => affectedColumns(column).map((item) => item.label).join(" / ");
 	const resizeValueText = (column) => affectedColumns(column).map((item) => `${item.label}: ${Math.round(widths.value[item.key])}px`).join(" / ");
 	const minimumTotalWidth = () => props.resizeMode === "expand" ? Math.max(0, available.value) : 0;
-	const maximumWidth = (column, source) => {
-		if (!column.pin || boundary(column)?.neighbor?.pin) return Infinity;
-		const columns = ctl.visibleColumns.value;
-		const otherPinned = columns.reduce((sum, item) => sum + (item.pin && item.key !== column.key ? source[item.key] : 0), 0);
-		const center = columns.some((item) => !item.pin) ? 48 : 0;
-		return Math.max(source[column.key], available.value - otherPinned - center);
-	};
+	const maximumWidth = (column, source) => pinnedMaximumWidth(ctl.visibleColumns.value, column, props.resizeMode ?? "fit", source, available.value);
 	const bounds = (column) => resizeBounds(column, boundary(column)?.neighbor, widths.value, minimumTotalWidth(), maximumWidth(column, widths.value));
 	const canResize = (column) => {
 		if (!props.resizable || !boundary(column)) return false;
@@ -29169,26 +30493,7 @@ function useTableResizeHandles(element, viewport, columns, enabled) {
 		const scale = box.width / area.clientWidth || 1;
 		const rtl = getComputedStyle(table).direction === "rtl";
 		const cells = new Map([...table.querySelectorAll("thead [data-hn-column]")].map((cell) => [cell.dataset.hnColumn, cell.getBoundingClientRect()]));
-		let left = box.left;
-		let right = box.right;
-		for (const column of columns.value) {
-			const rect = cells.get(column.key);
-			if (!rect || !column.pin) continue;
-			if (column.pin === "start" !== rtl) left = Math.max(left, rect.right);
-			else right = Math.min(right, rect.left);
-		}
-		const next = {};
-		for (const column of columns.value) {
-			const rect = cells.get(column.key);
-			if (!rect) continue;
-			const start = Math.max(rect.left, column.pin ? box.left : left);
-			const end = Math.min(rect.right, column.pin ? box.right : right);
-			const fromLeft = column.pin === "end" !== rtl;
-			next[column.key] = {
-				inset: Math.max(0, (fromLeft ? start - rect.left : rect.right - end) / scale),
-				visible: end - start >= 9 * scale - .01
-			};
-		}
+		const next = resizeHandlePositions(columns.value, cells, box, scale, rtl);
 		if (JSON.stringify(next) !== JSON.stringify(positions.value)) positions.value = next;
 	}
 	function schedule() {
@@ -29295,88 +30600,26 @@ function useTableColumns(props, models, ctl, element, viewport, leading, trailin
 	function columnStyle(column) {
 		return { width: cssSize(constrained.value ? widthVariable(column) : column.width) };
 	}
-	function pinStyle(column, head = false) {
-		if (!column.pin) return {};
-		const siblings = ctl.visibleColumns.value.filter((item) => item.pin === column.pin);
-		const index = siblings.findIndex((item) => item.key === column.key);
-		const preceding = column.pin === "start" ? siblings.slice(0, index) : siblings.slice(index + 1);
-		const controls = column.pin === "start" ? leading.value * 48 : trailing.value * 72;
-		const offset = `${preceding.reduce((sum, column) => sum + (constrained.value ? fixedWidths.value[column.key] : width(column)), controls)}px`;
-		return {
-			position: "sticky",
-			[column.pin === "start" ? "insetInlineStart" : "insetInlineEnd"]: offset,
-			zIndex: head ? 5 : 1,
-			backgroundColor: head ? "var(--hn-table-head-bg)" : "var(--hn-table-bg)",
-			boxShadow: `${column.pin === "start" ? "1px" : "-1px"} 0 0 var(--hn-border)`
-		};
+	const pinLayout = () => ({
+		columns: ctl.visibleColumns.value,
+		constrained: constrained.value,
+		leading: leading.value,
+		trailing: trailing.value,
+		get fixedWidths() {
+			return fixedWidths.value;
+		},
+		width
+	});
+	function pinStyle$1(column, head = false) {
+		return pinStyle(pinLayout(), column, head);
 	}
-	function cellStyle(column, head = false) {
-		return {
-			...constrained.value ? {} : {
-				width: cssSize(column.width),
-				minWidth: cssSize(column.minWidth ?? column.width),
-				maxWidth: cssSize(column.maxWidth)
-			},
-			...pinStyle(column, head)
-		};
+	function cellStyle$1(column, head = false) {
+		return cellStyle(pinLayout(), column, head);
 	}
-	function controlStyle(side, index, head = false) {
-		return {
-			width: side === "end" ? "72px" : "48px",
-			minWidth: side === "end" ? "72px" : "48px",
-			paddingInline: "8px",
-			textAlign: "center",
-			...ctl.visibleColumns.value.some((column) => column.pin === side) ? {
-				position: "sticky",
-				[side === "start" ? "insetInlineStart" : "insetInlineEnd"]: `${index * 48}px`,
-				zIndex: head ? 5 : 1,
-				backgroundColor: head ? "var(--hn-table-head-bg)" : "var(--hn-table-bg)"
-			} : {}
-		};
-	}
-	const headerRows = computed(() => {
-		const paths = /* @__PURE__ */ new Map();
-		function visit(columns, parent = []) {
-			for (const column of columns) {
-				const path = [...parent, column];
-				if (column.children?.length) visit(column.children, path);
-				else paths.set(column.key, path);
-			}
-		}
-		visit(props.columns);
-		const visible = ctl.visibleColumns.value;
-		const depth = Math.max(1, ...visible.map((column) => paths.get(column.key).length));
-		return Array.from({ length: depth }, (_, level) => {
-			const result = [];
-			for (let index = 0; index < visible.length;) {
-				const first = visible[index];
-				const path = paths.get(first.key);
-				const column = path[level];
-				if (!column) {
-					index++;
-					continue;
-				}
-				const leaf = level === path.length - 1;
-				let end = index + 1;
-				if (!leaf) while (end < visible.length && paths.get(visible[end].key)?.[level]?.key === column.key && visible[end].pin === first.pin) end++;
-				const top = Array.from({ length: level }, (_, i) => heights.value[i] ?? 44).reduce((a, b) => a + b, 0);
-				result.push({
-					...ctl.headerContext(column),
-					id: leaf ? `leaf:${column.key}` : `${level}:${column.key}:${first.key}`,
-					leaf,
-					colspan: end - index,
-					rowspan: leaf ? depth - level : 1,
-					top,
-					style: {
-						...leaf ? cellStyle(column, true) : pinStyle(first.pin === "end" ? visible[end - 1] : first, true),
-						...props.stickyHeader ? { top: `${top}px` } : {}
-					}
-				});
-				index = end;
-			}
-			return result;
-		});
-	});
+	function controlStyle$1(side, index, head = false) {
+		return controlStyle(ctl.visibleColumns.value, side, index, head);
+	}
+	const headerRows$1 = computed(() => headerRows(props.columns, ctl.visibleColumns.value, heights.value, props.stickyHeader, ctl.headerContext, (column, leaf) => leaf ? cellStyle$1(column, true) : pinStyle$1(column, true)));
 	const sizing = computed(() => constrained.value ? columnSizingStyles(ctl.visibleColumns.value, active.value ?? models.columnWidths.value, leading.value * 48 + trailing.value * 72) : {});
 	const tableStyle = computed(() => ({
 		tableLayout: constrained.value ? "fixed" : "auto",
@@ -29388,15 +30631,8 @@ function useTableColumns(props, models, ctl, element, viewport, leading, trailin
 	});
 	const errorStyle = computed(() => ({ "--hn-table-viewport-width": available.value ? `${available.value}px` : void 0 }));
 	function moveColumn(key, target) {
-		if (ctl.blocked.value || key === target) return;
-		const columns = ctl.visibleColumns.value;
-		const source = columns.find((column) => column.key === key), destination = columns.find((column) => column.key === target);
-		if (!source || !destination || source.pin !== destination.pin || source.reorderable === false || destination.reorderable === false) return;
-		const order = [.../* @__PURE__ */ new Set([...models.columnOrder.value, ...ctl.leaves.value.map((column) => column.key)])];
-		const from = order.indexOf(key), to = order.indexOf(target);
-		order.splice(from, 1);
-		order.splice(to, 0, key);
-		models.columnOrder.value = order;
+		if (ctl.blocked.value || !canMoveColumn(ctl.visibleColumns.value, key, target)) return;
+		models.columnOrder.value = moveColumnOrder(models.columnOrder.value, ctl.leaves.value, key, target);
 	}
 	Object.assign(ctl.api, {
 		setColumnWidth: resizing.setWidth,
@@ -29409,13 +30645,13 @@ function useTableColumns(props, models, ctl, element, viewport, leading, trailin
 	});
 	return {
 		constrained,
-		headerRows,
+		headerRows: headerRows$1,
 		tableStyle,
 		columnStyles,
 		columnStyle,
 		errorStyle,
-		cellStyle,
-		controlStyle,
+		cellStyle: cellStyle$1,
+		controlStyle: controlStyle$1,
 		...resizing,
 		...handles,
 		width
@@ -29438,19 +30674,16 @@ function useTableDrag(props, models, ctl, element, viewport, onReorder) {
 		const parent = row.parentId ? all[row.parentId]?.original : void 0;
 		const source = parent ? props.getChildren?.(parent) : props.rows;
 		if (!source) return;
-		const from = source.findIndex((item) => ctl.keyOf(item) === key), to = source.findIndex((item) => ctl.keyOf(item) === targetKey);
-		const position = before === void 0 ? to : to + (before ? 0 : 1) - (from < to ? 1 : 0);
+		const from = source.findIndex((item) => ctl.keyOf(item) === key);
+		const position = reorderPosition(from, source.findIndex((item) => ctl.keyOf(item) === targetKey), before);
 		if (position === from) return;
-		const rows = [...source];
-		rows.splice(from, 1);
-		rows.splice(position, 0, row.original);
 		onReorder({
 			row: row.original,
 			target: target.original,
 			parent,
 			from,
 			to: position,
-			rows
+			rows: reorderedRows(source, from, position, row.original)
 		});
 	}
 	function start(kind, key, label, event) {
@@ -29558,12 +30791,8 @@ function useTableDrag(props, models, ctl, element, viewport, onReorder) {
 			const destination = moved && targetAtPoint();
 			cleanup?.();
 			if (!apply || !destination) return;
-			if (kind === "column") {
-				const order = [.../* @__PURE__ */ new Set([...models.columnOrder.value, ...ctl.leaves.value.map((column) => column.key)])];
-				order.splice(order.indexOf(key), 1);
-				order.splice(order.indexOf(destination.target) + (destination.before ? 0 : 1), 0, key);
-				models.columnOrder.value = order;
-			} else {
+			if (kind === "column") models.columnOrder.value = dropColumnOrder(models.columnOrder.value, ctl.leaves.value, key, destination.target, destination.before);
+			else {
 				const all = ctl.table.getCoreRowModel().rowsById;
 				const row = all[key], target = all[destination.target];
 				if (row && target) moveRow(ctl.keyOf(row.original), ctl.keyOf(target.original), destination.before);
@@ -29823,28 +31052,40 @@ function useTableEditing(props, ctl, onEdit, onError, element) {
 	};
 }
 //#endregion
+//#region ../shared/src/lib/data-table/csv.ts
+function exportColumns(columns, options) {
+	return columns.filter((column) => column.exportable !== false && (!options.columns || options.columns.includes(column.key)));
+}
+function tableCsv(visible, rows, options, valueOf, displayValue) {
+	const delimiter = options.delimiter ?? ",";
+	const columns = exportColumns(visible, options);
+	const escape = (value) => {
+		let text = value == null ? "" : String(value);
+		if (typeof value === "string" && /^[\s]*[=+@-]/.test(text)) text = "'" + text;
+		return "\"" + text.replaceAll("\"", "\"\"") + "\"";
+	};
+	const lines = [columns.map((column) => escape(column.label)).join(delimiter)];
+	for (const row of rows) lines.push(columns.map((column) => escape(column.exportValue ? column.exportValue(row) : options.formatted ? displayValue(row, column) : valueOf(row, column))).join(delimiter));
+	return (options.bom === false ? "" : "") + lines.join("\r\n");
+}
+function downloadCsv(text, filename = "data.csv") {
+	if (typeof document === "undefined") return;
+	const url = URL.createObjectURL(new Blob([text], { type: "text/csv;charset=utf-8" }));
+	const anchor = document.createElement("a");
+	anchor.href = url;
+	anchor.download = filename;
+	anchor.click();
+	setTimeout(() => URL.revokeObjectURL(url), 1e3);
+}
+//#endregion
 //#region src/components/data-table/composables/useTableExport.ts
 function useTableExport(ctl) {
 	function toCsv(options = {}) {
-		const delimiter = options.delimiter ?? ",";
-		const columns = ctl.visibleColumns.value.filter((column) => column.exportable !== false && (!options.columns || options.columns.includes(column.key)));
-		const escape = (value) => {
-			let text = value == null ? "" : String(value);
-			if (typeof value === "string" && /^[\s]*[=+@-]/.test(text)) text = "'" + text;
-			return "\"" + text.replaceAll("\"", "\"\"") + "\"";
-		};
-		const lines = [columns.map((column) => escape(column.label)).join(delimiter)];
-		for (const row of ctl.api.getRows(options.scope ?? "filtered")) lines.push(columns.map((column) => escape(column.exportValue ? column.exportValue(row) : options.formatted ? ctl.displayValue(row, column) : ctl.valueOf(row, column))).join(delimiter));
-		return (options.bom === false ? "" : "") + lines.join("\r\n");
+		return tableCsv(ctl.visibleColumns.value, ctl.api.getRows(options.scope ?? "filtered"), options, ctl.valueOf, ctl.displayValue);
 	}
 	function exportCsv(options = {}) {
 		if (typeof document === "undefined") return;
-		const url = URL.createObjectURL(new Blob([toCsv(options)], { type: "text/csv;charset=utf-8" }));
-		const anchor = document.createElement("a");
-		anchor.href = url;
-		anchor.download = options.filename ?? "data.csv";
-		anchor.click();
-		setTimeout(() => URL.revokeObjectURL(url), 1e3);
+		downloadCsv(toCsv(options), options.filename);
 	}
 	Object.assign(ctl.api, {
 		toCsv,
@@ -30577,7 +31818,11 @@ var DataListLayoutToggle_default = /* @__PURE__ */ defineComponent({
 	}
 });
 //#endregion
-//#region src/components/data-list/utils/scroll.ts
+//#region ../shared/src/lib/data-list.ts
+function dataListText(item, index, field) {
+	const value = typeof field === "function" ? field(item, index) : field ? item[field] : void 0;
+	return value !== "" && (typeof value === "string" || typeof value === "number") ? value : void 0;
+}
 function scrollDataListItem(element, viewport, { align = "auto", behavior }) {
 	if (!viewport) {
 		element.scrollIntoView({
@@ -30945,8 +32190,7 @@ var DataListItem_default = /* @__PURE__ */ defineComponent({
 function useDataList(props, pageModel, sizeModel, change, layoutModel) {
 	const layout = computed(() => layoutModel?.value ?? props.layout ?? "list");
 	function text(item, index, field) {
-		const value = typeof field === "function" ? field(item, index) : field ? item[field] : void 0;
-		return value !== "" && (typeof value === "string" || typeof value === "number") ? value : void 0;
+		return dataListText(item, index, field);
 	}
 	const pageSize = computed(() => paginationInteger(sizeModel.value, 10, 1));
 	const total = computed(() => props.manual ? props.total === void 0 ? void 0 : paginationInteger(props.total, 0, 0) : props.items.length);
@@ -31384,10 +32628,51 @@ var Timeline_default = /* @__PURE__ */ defineComponent({
 	}
 });
 //#endregion
-//#region src/components/virtual-list/composables/useVirtualList.ts
+//#region ../shared/src/lib/virtual/list.ts
 function nonnegative(value) {
 	return Number.isFinite(value) ? Math.max(0, value) : 0;
 }
+function listEstimator(items, estimate) {
+	const value = estimate ?? 48;
+	return (index) => Math.max(1, nonnegative(typeof value === "function" ? value(items[index], index) : value));
+}
+function listInitialRect(initialRect, height) {
+	return initialRect ?? {
+		width: VIRTUAL_RECT.width,
+		height: typeof height === "number" ? height : VIRTUAL_RECT.height
+	};
+}
+function retainIndex(indexes, retained) {
+	if (retained >= 0 && !indexes.includes(retained)) indexes.push(retained);
+	return indexes.sort((a, b) => a - b);
+}
+function listContentStyle(flow, horizontal) {
+	const { before: start, after: end } = flow;
+	return horizontal ? {
+		width: "max-content",
+		height: "100%",
+		paddingInlineStart: `${start}px`,
+		paddingInlineEnd: `${end}px`
+	} : {
+		width: "100%",
+		paddingBlockStart: `${start}px`,
+		paddingBlockEnd: `${end}px`
+	};
+}
+function listRootStyle(height) {
+	return { height: typeof height === "string" ? height : `${height ?? VIRTUAL_RECT.height}px` };
+}
+function listItemStyle(entry, horizontal, dynamic) {
+	return horizontal ? {
+		marginInlineStart: `${entry.gapBefore}px`,
+		width: dynamic === false ? `${entry.size}px` : void 0
+	} : {
+		marginBlockStart: `${entry.gapBefore}px`,
+		height: dynamic === false ? `${entry.size}px` : void 0
+	};
+}
+//#endregion
+//#region src/components/virtual-list/composables/useVirtualList.ts
 function useVirtualList(props, onRangeChange) {
 	const { root, direction, rootDirection } = useDirection$1(() => props.dir);
 	const area = shallowRef();
@@ -31404,12 +32689,11 @@ function useVirtualList(props, onRangeChange) {
 		const items = props.items;
 		const itemKeys = keys.value;
 		const retained = focusedIndex.value;
-		const estimate = props.estimateSize ?? 48;
 		return {
 			count: items.length,
 			getScrollElement: () => viewport.value ?? null,
 			getItemKey: (index) => itemKeys[index],
-			estimateSize: (index) => Math.max(1, nonnegative(typeof estimate === "function" ? estimate(items[index], index) : estimate)),
+			estimateSize: listEstimator(items, props.estimateSize),
 			horizontal: horizontal.value,
 			isRtl: direction.value === "rtl",
 			overscan: Math.floor(nonnegative(props.overscan ?? 5)),
@@ -31417,15 +32701,8 @@ function useVirtualList(props, onRangeChange) {
 			paddingStart: nonnegative(props.paddingStart ?? 0),
 			paddingEnd: nonnegative(props.paddingEnd ?? 0),
 			initialOffset: nonnegative(props.initialOffset ?? 0),
-			initialRect: props.initialRect ?? {
-				width: 320,
-				height: typeof props.height === "number" ? props.height : 320
-			},
-			rangeExtractor: (range) => {
-				const indexes = defaultRangeExtractor(range);
-				if (retained >= 0 && !indexes.includes(retained)) indexes.push(retained);
-				return indexes.sort((a, b) => a - b);
-			}
+			initialRect: listInitialRect(props.initialRect, props.height),
+			rangeExtractor: (range) => retainIndex(defaultRangeExtractor(range), retained)
 		};
 	}));
 	const flow = computed(() => virtualFlow(virtualizer.value.getVirtualItems(), virtualizer.value.getTotalSize()));
@@ -31433,28 +32710,10 @@ function useVirtualList(props, onRangeChange) {
 		...entry,
 		key: keys.value[entry.index]
 	})));
-	const contentStyle = computed(() => {
-		const { before: start, after: end } = flow.value;
-		return horizontal.value ? {
-			width: "max-content",
-			height: "100%",
-			paddingInlineStart: `${start}px`,
-			paddingInlineEnd: `${end}px`
-		} : {
-			width: "100%",
-			paddingBlockStart: `${start}px`,
-			paddingBlockEnd: `${end}px`
-		};
-	});
-	const rootStyle = computed(() => ({ height: typeof props.height === "string" ? props.height : `${props.height ?? 320}px` }));
+	const contentStyle = computed(() => listContentStyle(flow.value, horizontal.value));
+	const rootStyle = computed(() => listRootStyle(props.height));
 	function itemStyle(entry) {
-		return horizontal.value ? {
-			marginInlineStart: `${entry.gapBefore}px`,
-			width: props.dynamic === false ? `${entry.size}px` : void 0
-		} : {
-			marginBlockStart: `${entry.gapBefore}px`,
-			height: props.dynamic === false ? `${entry.size}px` : void 0
-		};
+		return listItemStyle(entry, horizontal.value, props.dynamic);
 	}
 	function measureElement(element) {
 		if (element === null) {
@@ -32715,7 +33974,7 @@ var qrCode = tv({
 var qrCodeSvg = tv({ base: "block size-full" });
 var qrCodeStatus = tv({ base: "bg-subtle text-muted absolute inset-0 flex flex-col items-center justify-center gap-2 p-3 text-center text-sm" });
 //#endregion
-//#region src/components/qr-code/export.ts
+//#region ../shared/src/lib/qr-code-export.ts
 function dataURL(blob) {
 	return new Promise((resolve, reject) => {
 		const reader = new FileReader();