@wordrhyme/auto-crud 1.3.0 → 1.3.2

package/dist/index.js

@@ -1,23 +1,17 @@
 import * as React from "react";
 import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useReducer, useRef, useState } from "react";
-import { ArrowDownUp, BadgeCheck, CalendarIcon, Check, CheckCircle2, ChevronDown, ChevronLeft, ChevronRight, ChevronUp, ChevronsLeft, ChevronsRight, ChevronsUpDown, CommandIcon, Download, Ellipsis, EyeOff, FileDown, FileSpreadsheetIcon, GripVertical, ListFilter, ListFilterIcon, Loader2, PlusCircle, Settings2, Text, Trash2, Upload, X, XCircle } from "lucide-react";
+import { ArrowDownUp, BadgeCheck, CalendarIcon, Check, CheckCircle2, ChevronDown, ChevronLeft, ChevronRight, ChevronUp, ChevronsLeft, ChevronsRight, ChevronsUpDown, CommandIcon, Download, Ellipsis, EyeOff, FileDown, FileSpreadsheetIcon, GripVertical, ListFilter, ListFilterIcon, Loader2, PlusCircle, RefreshCw, Settings2, Text, Trash2, Upload, X, XCircle } from "lucide-react";
 import { flexRender, getCoreRowModel, getFacetedMinMaxValues, getFacetedRowModel, getFacetedUniqueValues, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useReactTable } from "@tanstack/react-table";
-import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, Badge, Button, Calendar, Checkbox, Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuTrigger, Input, Label, Popover, PopoverContent, PopoverTrigger, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Separator, Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, Slider, Switch, cn as cn$1 } from "@pixpilot/shadcn";
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, Badge, Button, Calendar, Checkbox, Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuTrigger, Input, Label, Popover, PopoverContent, PopoverTrigger, Select as Select$1, SelectContent, SelectItem, SelectTrigger, SelectValue, Separator, Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, Slider, Switch, Table as Table$1, TableBody, TableCell, TableHead, TableHeader, TableRow, cn as cn$1 } from "@wordrhyme/shadcn";
 import { clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { customAlphabet } from "nanoid";
-import { DndContext, DragOverlay, KeyboardSensor, MouseSensor, TouchSensor, closestCenter, closestCorners, defaultDropAnimationSideEffects, useSensor, useSensors } from "@dnd-kit/core";
-import { restrictToHorizontalAxis, restrictToParentElement, restrictToVerticalAxis } from "@dnd-kit/modifiers";
-import { SortableContext, arrayMove, horizontalListSortingStrategy, sortableKeyboardCoordinates, useSortable, verticalListSortingStrategy } from "@dnd-kit/sortable";
-import { CSS } from "@dnd-kit/utilities";
-import { Slot } from "@radix-ui/react-slot";
-import * as ReactDOM from "react-dom";
-import { useDirection } from "@radix-ui/react-direction";
+import { ActionBar, ActionBarClose, ActionBarGroup, ActionBarItem, ActionBarSelection, ActionBarSeparator, Faceted, FacetedBadgeList, FacetedContent, FacetedEmpty, FacetedGroup, FacetedInput, FacetedItem, FacetedList, FacetedTrigger, MultiCombobox, Select, Select as Select$2, Sortable, SortableContent, SortableItem, SortableItemHandle, SortableOverlay } from "@wordrhyme/shadcn-ui";
 import { z } from "zod";
-import { createForm, onFieldValueChange } from "@formily/core";
-import { Form, JsonSchemaField } from "@pixpilot/formily-shadcn";
-import { connect, mapProps } from "@formily/react";
+import { createForm } from "@formily/core";
+import { action, observable } from "@formily/reactive";
+import { Form, JsonSchemaField, connect, mapProps } from "@wordrhyme/formily-shadcn";
 import { toast } from "sonner";
 import { keepPreviousData } from "@tanstack/react-query";
 
@@ -55,7 +49,7 @@ function DataTablePagination({ table, pageSizeOptions = [
 					children: [/* @__PURE__ */ jsx("p", {
 						className: "whitespace-nowrap font-medium text-sm",
 						children: "Rows per page"
-					}), /* @__PURE__ */ jsxs(Select, {
+					}), /* @__PURE__ */ jsxs(Select$1, {
 						value: `${table.getState().pagination.pageSize}`,
 						onValueChange: (value) => {
 							table.setPageSize(Number(value));
@@ -128,55 +122,6 @@ function DataTablePagination({ table, pageSizeOptions = [
 	});
 }
 
-//#endregion
-//#region src/components/ui/table.tsx
-function Table$1({ className,...props }) {
-	return /* @__PURE__ */ jsx("div", {
-		"data-slot": "table-container",
-		className: "relative w-full overflow-x-auto",
-		children: /* @__PURE__ */ jsx("table", {
-			"data-slot": "table",
-			className: cn("w-full caption-bottom text-sm", className),
-			...props
-		})
-	});
-}
-function TableHeader({ className,...props }) {
-	return /* @__PURE__ */ jsx("thead", {
-		"data-slot": "table-header",
-		className: cn("[&_tr]:border-b", className),
-		...props
-	});
-}
-function TableBody({ className,...props }) {
-	return /* @__PURE__ */ jsx("tbody", {
-		"data-slot": "table-body",
-		className: cn("[&_tr:last-child]:border-0", className),
-		...props
-	});
-}
-function TableRow({ className,...props }) {
-	return /* @__PURE__ */ jsx("tr", {
-		"data-slot": "table-row",
-		className: cn("border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted", className),
-		...props
-	});
-}
-function TableHead({ className,...props }) {
-	return /* @__PURE__ */ jsx("th", {
-		"data-slot": "table-head",
-		className: cn("h-10 whitespace-nowrap px-2 text-left align-middle font-medium text-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]", className),
-		...props
-	});
-}
-function TableCell({ className,...props }) {
-	return /* @__PURE__ */ jsx("td", {
-		"data-slot": "table-cell",
-		className: cn("whitespace-nowrap p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]", className),
-		...props
-	});
-}
-
 //#endregion
 //#region src/config/data-table.ts
 const dataTableConfig = {
@@ -911,454 +856,6 @@ function DataTableRangeFilter({ filter, column, inputId, onFilterUpdate, classNa
 	});
 }
 
-//#endregion
-//#region src/components/ui/faceted.tsx
-const FacetedContext = React.createContext(null);
-function useFacetedContext(name) {
-	const context = React.useContext(FacetedContext);
-	if (!context) throw new Error(`\`${name}\` must be within Faceted`);
-	return context;
-}
-function Faceted(props) {
-	const { open: openProp, onOpenChange: onOpenChangeProp, value, onValueChange, children, multiple = false,...facetedProps } = props;
-	const [uncontrolledOpen, setUncontrolledOpen] = React.useState(false);
-	const isControlled = openProp !== void 0;
-	const open = isControlled ? openProp : uncontrolledOpen;
-	const onOpenChange = React.useCallback((newOpen) => {
-		if (!isControlled) setUncontrolledOpen(newOpen);
-		onOpenChangeProp?.(newOpen);
-	}, [isControlled, onOpenChangeProp]);
-	const onItemSelect = React.useCallback((selectedValue) => {
-		if (!onValueChange) return;
-		if (multiple) {
-			const currentValue = Array.isArray(value) ? value : [];
-			onValueChange(currentValue.includes(selectedValue) ? currentValue.filter((v) => v !== selectedValue) : [...currentValue, selectedValue]);
-		} else {
-			if (value === selectedValue) onValueChange(void 0);
-			else onValueChange(selectedValue);
-			requestAnimationFrame(() => onOpenChange(false));
-		}
-	}, [
-		multiple,
-		value,
-		onValueChange,
-		onOpenChange
-	]);
-	const contextValue = React.useMemo(() => ({
-		value,
-		onItemSelect,
-		multiple
-	}), [
-		value,
-		onItemSelect,
-		multiple
-	]);
-	return /* @__PURE__ */ jsx(FacetedContext.Provider, {
-		value: contextValue,
-		children: /* @__PURE__ */ jsx(Popover, {
-			open,
-			onOpenChange,
-			...facetedProps,
-			children
-		})
-	});
-}
-function FacetedTrigger(props) {
-	const { className, children,...triggerProps } = props;
-	return /* @__PURE__ */ jsx(PopoverTrigger, {
-		...triggerProps,
-		className: cn("justify-between text-left", className),
-		children
-	});
-}
-function FacetedBadgeList(props) {
-	const { options = [], max = 2, placeholder = "Select options...", className, badgeClassName,...badgeListProps } = props;
-	const context = useFacetedContext("FacetedBadgeList");
-	const values = Array.isArray(context.value) ? context.value : [context.value].filter(Boolean);
-	const getLabel = React.useCallback((value) => {
-		return options.find((opt) => opt.value === value)?.label ?? value;
-	}, [options]);
-	if (!values || values.length === 0) return /* @__PURE__ */ jsxs("div", {
-		...badgeListProps,
-		className: "flex w-full items-center gap-1 text-muted-foreground",
-		children: [placeholder, /* @__PURE__ */ jsx(ChevronsUpDown, { className: "ml-auto size-4 shrink-0 opacity-50" })]
-	});
-	return /* @__PURE__ */ jsx("div", {
-		...badgeListProps,
-		className: cn("flex flex-wrap items-center gap-1", className),
-		children: values.length > max ? /* @__PURE__ */ jsxs(Badge, {
-			variant: "secondary",
-			className: cn("rounded-sm px-1 font-normal", badgeClassName),
-			children: [values.length, " selected"]
-		}) : values.map((value) => /* @__PURE__ */ jsx(Badge, {
-			variant: "secondary",
-			className: cn("rounded-sm px-1 font-normal", badgeClassName),
-			children: /* @__PURE__ */ jsx("span", {
-				className: "truncate",
-				children: getLabel(value)
-			})
-		}, value))
-	});
-}
-function FacetedContent(props) {
-	const { className, children,...contentProps } = props;
-	return /* @__PURE__ */ jsx(PopoverContent, {
-		...contentProps,
-		align: "start",
-		className: cn("w-[200px] origin-(--radix-popover-content-transform-origin) p-0", className),
-		children: /* @__PURE__ */ jsx(Command, { children })
-	});
-}
-const FacetedInput = CommandInput;
-const FacetedList = CommandList;
-const FacetedEmpty = CommandEmpty;
-const FacetedGroup = CommandGroup;
-function FacetedItem(props) {
-	const { value, onSelect, className, children,...itemProps } = props;
-	const context = useFacetedContext("FacetedItem");
-	const isSelected = context.multiple ? Array.isArray(context.value) && context.value.includes(value) : context.value === value;
-	const onItemSelect = React.useCallback((currentValue) => {
-		if (onSelect) onSelect(currentValue);
-		else if (context.onItemSelect) context.onItemSelect(currentValue);
-	}, [onSelect, context]);
-	return /* @__PURE__ */ jsxs(CommandItem, {
-		value,
-		"aria-selected": isSelected,
-		"data-selected": isSelected,
-		className: cn("gap-2", className),
-		onSelect: () => onItemSelect(value),
-		...itemProps,
-		children: [/* @__PURE__ */ jsx("span", {
-			className: cn("flex size-4 items-center justify-center rounded-sm border border-primary", isSelected ? "bg-primary text-primary-foreground" : "opacity-50 [&_svg]:invisible"),
-			children: /* @__PURE__ */ jsx(Check, { className: "size-4" })
-		}), children]
-	});
-}
-
-//#endregion
-//#region src/lib/compose-refs.ts
-/**
-* Set a given ref to a given value
-* This utility takes care of different types of refs: callback refs and RefObject(s)
-*/
-function setRef(ref, value) {
-	if (typeof ref === "function") return ref(value);
-	if (ref !== null && ref !== void 0) ref.current = value;
-}
-/**
-* A utility to compose multiple refs together
-* Accepts callback refs and RefObject(s)
-*/
-function composeRefs(...refs) {
-	return (node) => {
-		let hasCleanup = false;
-		const cleanups = refs.map((ref) => {
-			const cleanup = setRef(ref, node);
-			if (!hasCleanup && typeof cleanup === "function") hasCleanup = true;
-			return cleanup;
-		});
-		if (hasCleanup) return () => {
-			for (let i = 0; i < cleanups.length; i++) {
-				const cleanup = cleanups[i];
-				if (typeof cleanup === "function") cleanup();
-				else setRef(refs[i], null);
-			}
-		};
-	};
-}
-/**
-* A custom hook that composes multiple refs
-* Accepts callback refs and RefObject(s)
-*/
-function useComposedRefs(...refs) {
-	return React.useCallback(composeRefs(...refs), refs);
-}
-
-//#endregion
-//#region src/components/ui/sortable.tsx
-const orientationConfig = {
-	vertical: {
-		modifiers: [restrictToVerticalAxis, restrictToParentElement],
-		strategy: verticalListSortingStrategy,
-		collisionDetection: closestCenter
-	},
-	horizontal: {
-		modifiers: [restrictToHorizontalAxis, restrictToParentElement],
-		strategy: horizontalListSortingStrategy,
-		collisionDetection: closestCenter
-	},
-	mixed: {
-		modifiers: [restrictToParentElement],
-		strategy: void 0,
-		collisionDetection: closestCorners
-	}
-};
-const ROOT_NAME$1 = "Sortable";
-const CONTENT_NAME = "SortableContent";
-const ITEM_NAME$1 = "SortableItem";
-const ITEM_HANDLE_NAME = "SortableItemHandle";
-const OVERLAY_NAME = "SortableOverlay";
-const SortableRootContext = React.createContext(null);
-function useSortableContext(consumerName) {
-	const context = React.useContext(SortableRootContext);
-	if (!context) throw new Error(`\`${consumerName}\` must be used within \`${ROOT_NAME$1}\``);
-	return context;
-}
-function SortableRoot(props) {
-	const { value, onValueChange, collisionDetection, modifiers, strategy, onMove, orientation = "vertical", flatCursor = false, getItemValue: getItemValueProp, accessibility, onDragStart: onDragStartProp, onDragEnd: onDragEndProp, onDragCancel: onDragCancelProp,...sortableProps } = props;
-	const id = React.useId();
-	const [activeId, setActiveId] = React.useState(null);
-	const sensors = useSensors(useSensor(MouseSensor), useSensor(TouchSensor), useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }));
-	const config = React.useMemo(() => orientationConfig[orientation], [orientation]);
-	const getItemValue = React.useCallback((item) => {
-		if (typeof item === "object" && !getItemValueProp) throw new Error("getItemValue is required when using array of objects");
-		return getItemValueProp ? getItemValueProp(item) : item;
-	}, [getItemValueProp]);
-	const items = React.useMemo(() => {
-		return value.map((item) => getItemValue(item));
-	}, [value, getItemValue]);
-	const onDragStart = React.useCallback((event) => {
-		onDragStartProp?.(event);
-		if (event.activatorEvent.defaultPrevented) return;
-		setActiveId(event.active.id);
-	}, [onDragStartProp]);
-	const onDragEnd = React.useCallback((event) => {
-		onDragEndProp?.(event);
-		if (event.activatorEvent.defaultPrevented) return;
-		const { active, over } = event;
-		if (over && active.id !== over?.id) {
-			const activeIndex = value.findIndex((item) => getItemValue(item) === active.id);
-			const overIndex = value.findIndex((item) => getItemValue(item) === over.id);
-			if (onMove) onMove({
-				...event,
-				activeIndex,
-				overIndex
-			});
-			else onValueChange?.(arrayMove(value, activeIndex, overIndex));
-		}
-		setActiveId(null);
-	}, [
-		value,
-		onValueChange,
-		onMove,
-		getItemValue,
-		onDragEndProp
-	]);
-	const onDragCancel = React.useCallback((event) => {
-		onDragCancelProp?.(event);
-		if (event.activatorEvent.defaultPrevented) return;
-		setActiveId(null);
-	}, [onDragCancelProp]);
-	const announcements = React.useMemo(() => ({
-		onDragStart({ active }) {
-			return `Grabbed sortable item "${active.id.toString()}". Current position is ${active.data.current?.sortable.index + 1} of ${value.length}. Use arrow keys to move, space to drop.`;
-		},
-		onDragOver({ active, over }) {
-			if (over) {
-				const overIndex = over.data.current?.sortable.index ?? 0;
-				const moveDirection = overIndex > (active.data.current?.sortable.index ?? 0) ? "down" : "up";
-				return `Sortable item "${active.id.toString()}" moved ${moveDirection} to position ${overIndex + 1} of ${value.length}.`;
-			}
-			return "Sortable item is no longer over a droppable area. Press escape to cancel.";
-		},
-		onDragEnd({ active, over }) {
-			const activeValue = active.id.toString();
-			if (over) return `Sortable item "${activeValue}" dropped at position ${(over.data.current?.sortable.index ?? 0) + 1} of ${value.length}.`;
-			return `Sortable item "${activeValue}" dropped. No changes were made.`;
-		},
-		onDragCancel({ active }) {
-			const activeIndex = active.data.current?.sortable.index ?? 0;
-			return `Sorting cancelled. Sortable item "${active.id.toString()}" returned to position ${activeIndex + 1} of ${value.length}.`;
-		},
-		onDragMove({ active, over }) {
-			if (over) {
-				const overIndex = over.data.current?.sortable.index ?? 0;
-				const moveDirection = overIndex > (active.data.current?.sortable.index ?? 0) ? "down" : "up";
-				return `Sortable item "${active.id.toString()}" is moving ${moveDirection} to position ${overIndex + 1} of ${value.length}.`;
-			}
-			return "Sortable item is no longer over a droppable area. Press escape to cancel.";
-		}
-	}), [value]);
-	const screenReaderInstructions = React.useMemo(() => ({ draggable: `
-        To pick up a sortable item, press space or enter.
-        While dragging, use the ${orientation === "vertical" ? "up and down" : orientation === "horizontal" ? "left and right" : "arrow"} keys to move the item.
-        Press space or enter again to drop the item in its new position, or press escape to cancel.
-      ` }), [orientation]);
-	const contextValue = React.useMemo(() => ({
-		id,
-		items,
-		modifiers: modifiers ?? config.modifiers,
-		strategy: strategy ?? config.strategy,
-		activeId,
-		setActiveId,
-		getItemValue,
-		flatCursor
-	}), [
-		id,
-		items,
-		modifiers,
-		strategy,
-		config.modifiers,
-		config.strategy,
-		activeId,
-		getItemValue,
-		flatCursor
-	]);
-	return /* @__PURE__ */ jsx(SortableRootContext.Provider, {
-		value: contextValue,
-		children: /* @__PURE__ */ jsx(DndContext, {
-			collisionDetection: collisionDetection ?? config.collisionDetection,
-			modifiers: modifiers ?? config.modifiers,
-			sensors,
-			...sortableProps,
-			id,
-			onDragStart,
-			onDragEnd,
-			onDragCancel,
-			accessibility: {
-				announcements,
-				screenReaderInstructions,
-				...accessibility
-			}
-		})
-	});
-}
-const SortableContentContext = React.createContext(false);
-function SortableContent(props) {
-	const { strategy: strategyProp, asChild, withoutSlot, children, ref,...contentProps } = props;
-	const context = useSortableContext(CONTENT_NAME);
-	const ContentPrimitive = asChild ? Slot : "div";
-	return /* @__PURE__ */ jsx(SortableContentContext.Provider, {
-		value: true,
-		children: /* @__PURE__ */ jsx(SortableContext, {
-			items: context.items,
-			strategy: strategyProp ?? context.strategy,
-			children: withoutSlot ? children : /* @__PURE__ */ jsx(ContentPrimitive, {
-				"data-slot": "sortable-content",
-				...contentProps,
-				ref,
-				children
-			})
-		})
-	});
-}
-const SortableItemContext = React.createContext(null);
-function useSortableItemContext(consumerName) {
-	const context = React.useContext(SortableItemContext);
-	if (!context) throw new Error(`\`${consumerName}\` must be used within \`${ITEM_NAME$1}\``);
-	return context;
-}
-function SortableItem(props) {
-	const { value, style, asHandle, asChild, disabled, className, ref,...itemProps } = props;
-	const inSortableContent = React.useContext(SortableContentContext);
-	const inSortableOverlay = React.useContext(SortableOverlayContext);
-	if (!inSortableContent && !inSortableOverlay) throw new Error(`\`${ITEM_NAME$1}\` must be used within \`${CONTENT_NAME}\` or \`${OVERLAY_NAME}\``);
-	if (value === "") throw new Error(`\`${ITEM_NAME$1}\` value cannot be an empty string`);
-	const context = useSortableContext(ITEM_NAME$1);
-	const id = React.useId();
-	const { attributes, listeners: listeners$1, setNodeRef, setActivatorNodeRef, transform, transition, isDragging } = useSortable({
-		id: value,
-		disabled
-	});
-	const composedRef = useComposedRefs(ref, (node) => {
-		if (disabled) return;
-		setNodeRef(node);
-		if (asHandle) setActivatorNodeRef(node);
-	});
-	const composedStyle = React.useMemo(() => {
-		return {
-			transform: CSS.Translate.toString(transform),
-			transition,
-			...style
-		};
-	}, [
-		transform,
-		transition,
-		style
-	]);
-	const itemContext = React.useMemo(() => ({
-		id,
-		attributes,
-		listeners: listeners$1,
-		setActivatorNodeRef,
-		isDragging,
-		disabled
-	}), [
-		id,
-		attributes,
-		listeners$1,
-		setActivatorNodeRef,
-		isDragging,
-		disabled
-	]);
-	const ItemPrimitive = asChild ? Slot : "div";
-	return /* @__PURE__ */ jsx(SortableItemContext.Provider, {
-		value: itemContext,
-		children: /* @__PURE__ */ jsx(ItemPrimitive, {
-			id,
-			"data-disabled": disabled,
-			"data-dragging": isDragging ? "" : void 0,
-			"data-slot": "sortable-item",
-			...itemProps,
-			...asHandle && !disabled ? attributes : {},
-			...asHandle && !disabled ? listeners$1 : {},
-			ref: composedRef,
-			style: composedStyle,
-			className: cn("focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1", {
-				"touch-none select-none": asHandle,
-				"cursor-default": context.flatCursor,
-				"data-dragging:cursor-grabbing": !context.flatCursor,
-				"cursor-grab": !isDragging && asHandle && !context.flatCursor,
-				"opacity-50": isDragging,
-				"pointer-events-none opacity-50": disabled
-			}, className)
-		})
-	});
-}
-function SortableItemHandle(props) {
-	const { asChild, disabled, className, ref,...itemHandleProps } = props;
-	const context = useSortableContext(ITEM_HANDLE_NAME);
-	const itemContext = useSortableItemContext(ITEM_HANDLE_NAME);
-	const isDisabled = disabled ?? itemContext.disabled;
-	const composedRef = useComposedRefs(ref, (node) => {
-		if (!isDisabled) return;
-		itemContext.setActivatorNodeRef(node);
-	});
-	return /* @__PURE__ */ jsx(asChild ? Slot : "button", {
-		type: "button",
-		"aria-controls": itemContext.id,
-		"data-disabled": isDisabled,
-		"data-dragging": itemContext.isDragging ? "" : void 0,
-		"data-slot": "sortable-item-handle",
-		...itemHandleProps,
-		...isDisabled ? {} : itemContext.attributes,
-		...isDisabled ? {} : itemContext.listeners,
-		ref: composedRef,
-		className: cn("select-none disabled:pointer-events-none disabled:opacity-50", context.flatCursor ? "cursor-default" : "cursor-grab data-dragging:cursor-grabbing", className),
-		disabled: isDisabled
-	});
-}
-const SortableOverlayContext = React.createContext(false);
-const dropAnimation = { sideEffects: defaultDropAnimationSideEffects({ styles: { active: { opacity: "0.4" } } }) };
-function SortableOverlay(props) {
-	const { container: containerProp, children,...overlayProps } = props;
-	const context = useSortableContext(OVERLAY_NAME);
-	const [mounted, setMounted] = React.useState(false);
-	React.useLayoutEffect(() => setMounted(true), []);
-	const container = containerProp ?? (mounted ? globalThis.document?.body : null);
-	if (!container) return null;
-	return ReactDOM.createPortal(/* @__PURE__ */ jsx(DragOverlay, {
-		dropAnimation,
-		modifiers: context.modifiers,
-		className: cn(!context.flatCursor && "cursor-grabbing"),
-		...overlayProps,
-		children: /* @__PURE__ */ jsx(SortableOverlayContext.Provider, {
-			value: true,
-			children: context.activeId ? typeof children === "function" ? children({ value: context.activeId }) : children : null
-		})
-	}), container);
-}
-
 //#endregion
 //#region src/hooks/use-callback-ref.ts
 /**
@@ -1475,7 +972,7 @@ function DataTableFilterList({ table, debounceMs = DEBOUNCE_MS$2, throttleMs = T
 		window.addEventListener("keydown", onKeyDown);
 		return () => window.removeEventListener("keydown", onKeyDown);
 	}, []);
-	return /* @__PURE__ */ jsxs(SortableRoot, {
+	return /* @__PURE__ */ jsxs(Sortable, {
 		value: filters,
 		onValueChange: setFilters,
 		getItemValue: (item) => item.filterId,
@@ -1612,7 +1109,7 @@ function DataTableFilterItem$1({ filter, index: index$1, filterItemId, joinOpera
 					children: index$1 === 0 ? /* @__PURE__ */ jsx("span", {
 						className: "text-muted-foreground text-sm",
 						children: "Where"
-					}) : index$1 === 1 ? /* @__PURE__ */ jsxs(Select, {
+					}) : index$1 === 1 ? /* @__PURE__ */ jsxs(Select$1, {
 						value: joinOperator,
 						onValueChange: (value) => setJoinOperator(value),
 						children: [/* @__PURE__ */ jsx(SelectTrigger, {
@@ -1672,7 +1169,7 @@ function DataTableFilterItem$1({ filter, index: index$1, filterItemId, joinOpera
 						}, column$1.id)) })] })] })
 					})]
 				}),
-				/* @__PURE__ */ jsxs(Select, {
+				/* @__PURE__ */ jsxs(Select$1, {
 					open: showOperatorSelector,
 					onOpenChange: setShowOperatorSelector,
 					value: filter.operator,
@@ -1764,7 +1261,7 @@ function onFilterInputRender$1({ filter, inputId, column, columnMeta, onFilterUp
 		case "boolean": {
 			if (Array.isArray(filter.value)) return null;
 			const inputListboxId = `${inputId}-listbox`;
-			return /* @__PURE__ */ jsxs(Select, {
+			return /* @__PURE__ */ jsxs(Select$1, {
 				open: showValueSelector,
 				onOpenChange: setShowValueSelector,
 				value: filter.value,
@@ -1791,6 +1288,7 @@ function onFilterInputRender$1({ filter, inputId, column, columnMeta, onFilterUp
 		case "select":
 		case "multiSelect": {
 			const inputListboxId = `${inputId}-listbox`;
+			const optionList = columnMeta?.autoCrudFilterOptions ?? columnMeta?.options;
 			const multiple = filter.variant === "multiSelect";
 			return /* @__PURE__ */ jsxs(Faceted, {
 				open: showValueSelector,
@@ -1817,20 +1315,41 @@ function onFilterInputRender$1({ filter, inputId, column, columnMeta, onFilterUp
 				}), /* @__PURE__ */ jsxs(FacetedContent, {
 					id: inputListboxId,
 					className: "w-[200px]",
+					commandProps: { shouldFilter: columnMeta?.autoCrudFilterShouldFilter },
 					children: [/* @__PURE__ */ jsx(FacetedInput, {
 						"aria-label": `Search ${columnMeta?.label} options`,
-						placeholder: columnMeta?.placeholder ?? "Search options..."
-					}), /* @__PURE__ */ jsxs(FacetedList, { children: [/* @__PURE__ */ jsx(FacetedEmpty, { children: "No options found." }), /* @__PURE__ */ jsx(FacetedGroup, { children: columnMeta?.options?.map((option) => /* @__PURE__ */ jsxs(FacetedItem, {
-						value: option.value,
+						placeholder: columnMeta?.placeholder ?? "Search options...",
+						value: columnMeta?.autoCrudFilterSearchValue,
+						onValueChange: columnMeta?.autoCrudFilterOnSearch
+					}), /* @__PURE__ */ jsxs(FacetedList, {
+						onScroll: columnMeta?.autoCrudFilterOnPopupScroll,
 						children: [
-							option.icon && /* @__PURE__ */ jsx(option.icon, {}),
-							/* @__PURE__ */ jsx("span", { children: option.label }),
-							option.count && /* @__PURE__ */ jsx("span", {
-								className: "ml-auto font-mono text-xs",
-								children: option.count
+							/* @__PURE__ */ jsx(FacetedEmpty, { children: "No options found." }),
+							/* @__PURE__ */ jsx(FacetedGroup, { children: optionList?.map((option) => /* @__PURE__ */ jsxs(FacetedItem, {
+								value: option.value,
+								children: [
+									option.icon && /* @__PURE__ */ jsx(option.icon, {}),
+									/* @__PURE__ */ jsx("span", { children: option.label }),
+									option.count && /* @__PURE__ */ jsx("span", {
+										className: "ml-auto font-mono text-xs",
+										children: option.count
+									})
+								]
+							}, option.value)) }),
+							columnMeta?.autoCrudFilterLoading && /* @__PURE__ */ jsx(FacetedGroup, { children: /* @__PURE__ */ jsx("div", {
+								role: "status",
+								"aria-live": "polite",
+								className: "py-2 text-center text-sm text-muted-foreground",
+								children: "Loading..."
+							}) }),
+							!columnMeta?.autoCrudFilterLoading && columnMeta?.autoCrudFilterHasMore && /* @__PURE__ */ jsx("div", {
+								role: "status",
+								"aria-live": "polite",
+								className: "sr-only",
+								children: "Load more"
 							})
 						]
-					}, option.value)) })] })]
+					})]
 				})]
 			});
 		}
@@ -1909,6 +1428,9 @@ function getOptionCommandValue(option) {
 		option.searchText
 	].filter(Boolean).join(" ");
 }
+function getColumnFilterOptions(column) {
+	return column.columnDef.meta?.autoCrudFilterOptions ?? column.columnDef.meta?.options;
+}
 function DataTableFilterMenu({ table, debounceMs = DEBOUNCE_MS$1, throttleMs = THROTTLE_MS$1, shallow = true, disabled,...props }) {
 	const id = React.useId();
 	const columnDefs = table.options.columns;
@@ -1994,6 +1516,12 @@ function DataTableFilterMenu({ table, debounceMs = DEBOUNCE_MS$1, throttleMs = T
 			onFilterRemove(filters[filters.length - 1]?.filterId ?? "");
 		}
 	}, [filters, onFilterRemove]);
+	const selectedColumnMeta = selectedColumn?.columnDef.meta;
+	const commandInputValue = selectedColumnMeta?.autoCrudFilterOnSearch !== void 0 ? selectedColumnMeta.autoCrudFilterSearchValue ?? "" : inputValue;
+	const onCommandInputValueChange = React.useCallback((value) => {
+		setInputValue(value);
+		selectedColumn?.columnDef.meta?.autoCrudFilterOnSearch?.(value);
+	}, [selectedColumn]);
 	return /* @__PURE__ */ jsxs("div", {
 		role: "list",
 		className: "flex flex-wrap items-center gap-2",
@@ -2033,31 +1561,50 @@ function DataTableFilterMenu({ table, debounceMs = DEBOUNCE_MS$1, throttleMs = T
 					...props,
 					children: /* @__PURE__ */ jsxs(Command, {
 						loop: true,
+						shouldFilter: selectedColumnMeta?.autoCrudFilterShouldFilter,
 						className: "[&_[cmdk-input-wrapper]_svg]:hidden",
 						children: [/* @__PURE__ */ jsx(CommandInput, {
 							ref: inputRef,
 							placeholder: selectedColumn ? selectedColumn.columnDef.meta?.label ?? selectedColumn.id : "Search fields...",
-							value: inputValue,
-							onValueChange: setInputValue,
+							value: commandInputValue,
+							onValueChange: onCommandInputValueChange,
 							onKeyDown: onInputKeyDown
-						}), /* @__PURE__ */ jsx(CommandList, { children: selectedColumn ? /* @__PURE__ */ jsxs(Fragment, { children: [selectedColumn.columnDef.meta?.options && /* @__PURE__ */ jsx(CommandEmpty, { children: "No options found." }), /* @__PURE__ */ jsx(FilterValueSelector, {
-							column: selectedColumn,
-							value: inputValue,
-							onSelect: (value) => onFilterAdd(selectedColumn, value)
-						})] }) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(CommandEmpty, { children: "No fields found." }), /* @__PURE__ */ jsx(CommandGroup, { children: columns.map((column) => /* @__PURE__ */ jsxs(CommandItem, {
-							value: column.id,
-							onSelect: () => {
-								setSelectedColumn(column);
-								setInputValue("");
-								requestAnimationFrame(() => {
-									inputRef.current?.focus();
-								});
-							},
-							children: [column.columnDef.meta?.icon && /* @__PURE__ */ jsx(column.columnDef.meta.icon, {}), /* @__PURE__ */ jsx("span", {
-								className: "truncate",
-								children: column.columnDef.meta?.label ?? column.id
-							})]
-						}, column.id)) })] }) })]
+						}), /* @__PURE__ */ jsx(CommandList, {
+							onScroll: selectedColumnMeta?.autoCrudFilterOnPopupScroll,
+							children: selectedColumn ? /* @__PURE__ */ jsxs(Fragment, { children: [
+								selectedColumn.columnDef.meta?.options && /* @__PURE__ */ jsx(CommandEmpty, { children: "No options found." }),
+								/* @__PURE__ */ jsx(FilterValueSelector, {
+									column: selectedColumn,
+									value: inputValue,
+									onSelect: (value) => onFilterAdd(selectedColumn, value)
+								}),
+								selectedColumnMeta?.autoCrudFilterLoading && /* @__PURE__ */ jsx(CommandGroup, { children: /* @__PURE__ */ jsx("div", {
+									role: "status",
+									"aria-live": "polite",
+									className: "py-2 text-center text-sm text-muted-foreground",
+									children: "Loading..."
+								}) }),
+								!selectedColumnMeta?.autoCrudFilterLoading && selectedColumnMeta?.autoCrudFilterHasMore && /* @__PURE__ */ jsx("div", {
+									role: "status",
+									"aria-live": "polite",
+									className: "sr-only",
+									children: "Load more"
+								})
+							] }) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(CommandEmpty, { children: "No fields found." }), /* @__PURE__ */ jsx(CommandGroup, { children: columns.map((column) => /* @__PURE__ */ jsxs(CommandItem, {
+								value: column.id,
+								onSelect: () => {
+									setSelectedColumn(column);
+									setInputValue("");
+									requestAnimationFrame(() => {
+										inputRef.current?.focus();
+									});
+								},
+								children: [column.columnDef.meta?.icon && /* @__PURE__ */ jsx(column.columnDef.meta.icon, {}), /* @__PURE__ */ jsx("span", {
+									className: "truncate",
+									children: column.columnDef.meta?.label ?? column.id
+								})]
+							}, column.id)) })] })
+						})]
 					})
 				})]
 			})
@@ -2134,7 +1681,7 @@ function DataTableFilterItem({ filter, filterItemId, columns, onFilterUpdate, on
 						})
 					})]
 				}),
-				/* @__PURE__ */ jsxs(Select, {
+				/* @__PURE__ */ jsxs(Select$1, {
 					open: showOperatorSelector,
 					onOpenChange: setShowOperatorSelector,
 					value: filter.operator,
@@ -2187,7 +1734,7 @@ function FilterValueSelector({ column, value, onSelect }) {
 			children: "False"
 		})] });
 		case "select":
-		case "multiSelect": return /* @__PURE__ */ jsx(CommandGroup, { children: column.columnDef.meta?.options?.map((option) => /* @__PURE__ */ jsxs(CommandItem, {
+		case "multiSelect": return /* @__PURE__ */ jsx(CommandGroup, { children: getColumnFilterOptions(column)?.map((option) => /* @__PURE__ */ jsxs(CommandItem, {
 			value: getOptionCommandValue(option),
 			onSelect: () => onSelect(option.value),
 			children: [
@@ -2260,7 +1807,7 @@ function onFilterInputRender({ filter, column, inputId, onFilterUpdate, showValu
 		}
 		case "boolean": {
 			const inputListboxId = `${inputId}-listbox`;
-			return /* @__PURE__ */ jsxs(Select, {
+			return /* @__PURE__ */ jsxs(Select$1, {
 				open: showValueSelector,
 				onOpenChange: setShowValueSelector,
 				value: typeof filter.value === "string" ? filter.value : "true",
@@ -2286,6 +1833,7 @@ function onFilterInputRender({ filter, column, inputId, onFilterUpdate, showValu
 		case "multiSelect": {
 			const inputListboxId = `${inputId}-listbox`;
 			const options = column.columnDef.meta?.options ?? [];
+			const optionList = getColumnFilterOptions(column) ?? [];
 			const selectedValues = Array.isArray(filter.value) ? filter.value : [filter.value];
 			const selectedOptions = options.filter((option) => selectedValues.includes(option.value));
 			return /* @__PURE__ */ jsxs(Popover, {
@@ -2314,21 +1862,46 @@ function onFilterInputRender({ filter, column, inputId, onFilterUpdate, showValu
 					id: inputListboxId,
 					align: "start",
 					className: "w-48 p-0",
-					children: /* @__PURE__ */ jsxs(Command, { children: [/* @__PURE__ */ jsx(CommandInput, { placeholder: "Search options..." }), /* @__PURE__ */ jsxs(CommandList, { children: [/* @__PURE__ */ jsx(CommandEmpty, { children: "No options found." }), /* @__PURE__ */ jsx(CommandGroup, { children: options.map((option) => /* @__PURE__ */ jsxs(CommandItem, {
-						value: getOptionCommandValue(option),
-						onSelect: () => {
-							const value = filter.variant === "multiSelect" ? selectedValues.includes(option.value) ? selectedValues.filter((v) => v !== option.value) : [...selectedValues, option.value] : option.value;
-							onFilterUpdate(filter.filterId, { value });
-						},
-						children: [
-							option.icon && /* @__PURE__ */ jsx(option.icon, {}),
-							/* @__PURE__ */ jsx("span", {
-								className: "truncate",
-								children: option.label
-							}),
-							filter.variant === "multiSelect" && /* @__PURE__ */ jsx(Check, { className: cn("ml-auto", selectedValues.includes(option.value) ? "opacity-100" : "opacity-0") })
-						]
-					}, option.value)) })] })] })
+					children: /* @__PURE__ */ jsxs(Command, {
+						shouldFilter: column.columnDef.meta?.autoCrudFilterShouldFilter,
+						children: [/* @__PURE__ */ jsx(CommandInput, {
+							placeholder: "Search options...",
+							value: column.columnDef.meta?.autoCrudFilterSearchValue,
+							onValueChange: column.columnDef.meta?.autoCrudFilterOnSearch
+						}), /* @__PURE__ */ jsxs(CommandList, {
+							onScroll: column.columnDef.meta?.autoCrudFilterOnPopupScroll,
+							children: [
+								/* @__PURE__ */ jsx(CommandEmpty, { children: "No options found." }),
+								/* @__PURE__ */ jsx(CommandGroup, { children: optionList.map((option) => /* @__PURE__ */ jsxs(CommandItem, {
+									value: getOptionCommandValue(option),
+									onSelect: () => {
+										const value = filter.variant === "multiSelect" ? selectedValues.includes(option.value) ? selectedValues.filter((v) => v !== option.value) : [...selectedValues, option.value] : option.value;
+										onFilterUpdate(filter.filterId, { value });
+									},
+									children: [
+										option.icon && /* @__PURE__ */ jsx(option.icon, {}),
+										/* @__PURE__ */ jsx("span", {
+											className: "truncate",
+											children: option.label
+										}),
+										filter.variant === "multiSelect" && /* @__PURE__ */ jsx(Check, { className: cn("ml-auto", selectedValues.includes(option.value) ? "opacity-100" : "opacity-0") })
+									]
+								}, option.value)) }),
+								column.columnDef.meta?.autoCrudFilterLoading && /* @__PURE__ */ jsx(CommandGroup, { children: /* @__PURE__ */ jsx("div", {
+									role: "status",
+									"aria-live": "polite",
+									className: "py-2 text-center text-sm text-muted-foreground",
+									children: "Loading..."
+								}) }),
+								!column.columnDef.meta?.autoCrudFilterLoading && column.columnDef.meta?.autoCrudFilterHasMore && /* @__PURE__ */ jsx("div", {
+									role: "status",
+									"aria-live": "polite",
+									className: "sr-only",
+									children: "Load more"
+								})
+							]
+						})]
+					})
 				})]
 			});
 		}
@@ -2452,7 +2025,7 @@ function DataTableSortList({ table, disabled,...props }) {
 		window.addEventListener("keydown", onKeyDown);
 		return () => window.removeEventListener("keydown", onKeyDown);
 	}, []);
-	return /* @__PURE__ */ jsxs(SortableRoot, {
+	return /* @__PURE__ */ jsxs(Sortable, {
 		value: sorting,
 		onValueChange: onSortingChange,
 		getItemValue: (item) => item.id,
@@ -2603,7 +2176,7 @@ function DataTableSortItem({ sort, sortItemId, columns, columnLabels, onSortUpda
 						}, column.id)) })] })] })
 					})]
 				}),
-				/* @__PURE__ */ jsxs(Select, {
+				/* @__PURE__ */ jsxs(Select$1, {
 					open: showDirectionSelector,
 					onOpenChange: setShowDirectionSelector,
 					value: sort.desc ? "desc" : "asc",
@@ -2672,207 +2245,12 @@ function DataTableViewOptions({ table, disabled,...props }) {
 	})] });
 }
 
-//#endregion
-//#region src/components/ui/multi-combobox.tsx
-const DEFAULT_OPTIONS = [];
-const SCROLLABLE_COMMAND_GROUP_STYLE = {
-	maxHeight: "300px",
-	overscrollBehavior: "contain",
-	overflowX: "hidden",
-	overflowY: "auto"
-};
-function getWheelDeltaY(event) {
-	if (event.deltaMode === 1) return event.deltaY * 16;
-	if (event.deltaMode === 2) return event.deltaY * event.currentTarget.clientHeight;
-	return event.deltaY;
-}
-function handleScrollableCommandGroupWheel(event) {
-	const target = event.currentTarget;
-	if (target.scrollHeight <= target.clientHeight) return;
-	const maxScrollTop = target.scrollHeight - target.clientHeight;
-	const nextScrollTop = Math.max(0, Math.min(target.scrollTop + getWheelDeltaY(event), maxScrollTop));
-	if (nextScrollTop === target.scrollTop) return;
-	event.preventDefault();
-	event.stopPropagation();
-	target.scrollTop = nextScrollTop;
-}
-function collectSearchText(...parts) {
-	const texts = [];
-	for (const part of parts) {
-		if (!part) continue;
-		if (Array.isArray(part)) texts.push(...part.map(String));
-		else if (typeof part === "object") texts.push(...Object.values(part).filter(Boolean).map(String));
-		else texts.push(String(part));
-	}
-	return texts.join(" ");
-}
-function getOptionKeywords(option) {
-	return collectSearchText(typeof option.label === "string" || typeof option.label === "number" ? option.label : void 0, option.searchText, option.keywords).split(/\s+/).filter(Boolean);
-}
-function getOptionText(option) {
-	if (typeof option.label === "string" || typeof option.label === "number") return String(option.label);
-	return option.value;
-}
-function createNextValue(currentValue, optionValue, isSelected, selectionMode) {
-	if (selectionMode === "single") return isSelected ? [] : [optionValue];
-	return isSelected ? currentValue.filter((value) => value !== optionValue) : [...currentValue, optionValue];
-}
-function DefaultMultiComboboxTrigger({ open, selectedOptions, selectedValues, clearSelection, disabled, readOnly, placeholder, selectedText, className,...buttonProps }) {
-	return /* @__PURE__ */ jsxs(Button, {
-		...buttonProps,
-		type: "button",
-		variant: "outline",
-		role: "combobox",
-		"aria-expanded": open,
-		disabled,
-		className: cn$1("w-full justify-between", className),
-		children: [/* @__PURE__ */ jsx("span", {
-			className: "flex min-w-0 flex-1 items-center gap-1 overflow-hidden",
-			children: selectedValues.length === 0 ? /* @__PURE__ */ jsx("span", {
-				className: "truncate text-muted-foreground",
-				children: placeholder
-			}) : selectedOptions.length <= 2 ? selectedOptions.map((option) => /* @__PURE__ */ jsx(Badge, {
-				variant: "secondary",
-				className: "max-w-[8rem] rounded-sm px-1 font-normal",
-				children: /* @__PURE__ */ jsx("span", {
-					className: "truncate",
-					children: option.label
-				})
-			}, option.value)) : /* @__PURE__ */ jsxs(Badge, {
-				variant: "secondary",
-				className: "rounded-sm px-1 font-normal",
-				children: [
-					selectedValues.length,
-					" ",
-					selectedText
-				]
-			})
-		}), /* @__PURE__ */ jsxs("span", {
-			className: "ml-2 flex shrink-0 items-center gap-1",
-			children: [selectedValues.length > 0 && !readOnly && /* @__PURE__ */ jsx("span", {
-				role: "button",
-				"aria-label": "Clear selection",
-				tabIndex: 0,
-				className: "rounded-sm px-1 text-muted-foreground opacity-70 transition-opacity hover:opacity-100 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
-				onClick: clearSelection,
-				onKeyDown: (event) => {
-					if (event.key === "Enter" || event.key === " ") {
-						event.preventDefault();
-						clearSelection(event);
-					}
-				},
-				children: /* @__PURE__ */ jsx(X, { className: "size-3" })
-			}), /* @__PURE__ */ jsx(ChevronsUpDown, { className: "h-4 w-4 opacity-50" })]
-		})]
-	});
-}
-const MultiCombobox = ({ value, defaultValue, onChange, options = DEFAULT_OPTIONS, placeholder = "Select options...", searchPlaceholder = "Search...", emptyText = "No options found.", clearText = "Clear selection", selectedText = "selected", selectionMode = "multiple", disabled, readOnly, className, contentClassName, triggerClassName, matchTriggerWidth = true, renderTrigger, filter,...commandProps }) => {
-	const [open, setOpen] = React.useState(false);
-	const [internalValue, setInternalValue] = React.useState(defaultValue ?? []);
-	const selectedValues = value ?? internalValue;
-	const selectedValueSet = React.useMemo(() => new Set(selectedValues), [selectedValues]);
-	const selectedOptions = React.useMemo(() => options.filter((option) => selectedValueSet.has(option.value)), [options, selectedValueSet]);
-	const commitChange = React.useCallback((nextValue) => {
-		if (value === void 0) setInternalValue(nextValue);
-		onChange?.(nextValue);
-	}, [onChange, value]);
-	const clearSelection = React.useCallback((event) => {
-		event?.preventDefault();
-		event?.stopPropagation();
-		if (readOnly) return;
-		commitChange([]);
-	}, [commitChange, readOnly]);
-	const onItemSelect = React.useCallback((option) => {
-		if (option.disabled || readOnly) return;
-		const isSelected = selectedValueSet.has(option.value);
-		commitChange(createNextValue(selectedValues, option.value, isSelected, selectionMode));
-		if (selectionMode === "single") setOpen(false);
-	}, [
-		commitChange,
-		readOnly,
-		selectedValues,
-		selectedValueSet,
-		selectionMode
-	]);
-	return /* @__PURE__ */ jsxs(Popover, {
-		open,
-		onOpenChange: setOpen,
-		children: [/* @__PURE__ */ jsx(PopoverTrigger, {
-			asChild: true,
-			children: renderTrigger ? renderTrigger({
-				open,
-				selectedOptions,
-				selectedValues,
-				clearSelection,
-				disabled,
-				readOnly
-			}) : /* @__PURE__ */ jsx(DefaultMultiComboboxTrigger, {
-				open,
-				selectedOptions,
-				selectedValues,
-				clearSelection,
-				disabled,
-				readOnly,
-				placeholder,
-				selectedText,
-				className: triggerClassName
-			})
-		}), /* @__PURE__ */ jsx(PopoverContent, {
-			className: cn$1("w-full p-0", contentClassName),
-			style: matchTriggerWidth ? { width: "var(--radix-popover-trigger-width)" } : void 0,
-			children: /* @__PURE__ */ jsxs(Command, {
-				className,
-				filter,
-				...commandProps,
-				children: [/* @__PURE__ */ jsx(CommandInput, { placeholder: searchPlaceholder }), /* @__PURE__ */ jsxs(CommandList, {
-					className: "max-h-full",
-					children: [
-						/* @__PURE__ */ jsx(CommandEmpty, { children: emptyText }),
-						/* @__PURE__ */ jsx(CommandGroup, {
-							className: "max-h-[300px] scroll-py-1 overflow-y-auto overflow-x-hidden",
-							onWheelCapture: handleScrollableCommandGroupWheel,
-							style: SCROLLABLE_COMMAND_GROUP_STYLE,
-							children: options.map((option) => {
-								const isSelected = selectedValueSet.has(option.value);
-								const Icon = option.icon;
-								return /* @__PURE__ */ jsxs(CommandItem, {
-									value: option.value,
-									keywords: getOptionKeywords(option),
-									disabled: option.disabled,
-									onSelect: () => onItemSelect(option),
-									children: [
-										/* @__PURE__ */ jsx("div", {
-											className: cn$1("flex size-4 items-center justify-center rounded-sm border border-primary", isSelected ? "bg-primary text-primary-foreground" : "opacity-50 [&_svg]:invisible"),
-											children: /* @__PURE__ */ jsx(Check, {})
-										}),
-										Icon && /* @__PURE__ */ jsx(Icon, { className: "size-4" }),
-										/* @__PURE__ */ jsx("span", {
-											className: "truncate",
-											children: getOptionText(option)
-										}),
-										option.count !== void 0 && /* @__PURE__ */ jsx("span", {
-											className: "ml-auto font-mono text-xs",
-											children: option.count
-										})
-									]
-								}, option.value);
-							})
-						}),
-						selectedValues.length > 0 && !readOnly && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(CommandSeparator, {}), /* @__PURE__ */ jsx(CommandGroup, { children: /* @__PURE__ */ jsx(CommandItem, {
-							onSelect: () => commitChange([]),
-							className: "justify-center text-center",
-							children: clearText
-						}) })] })
-					]
-				})]
-			})
-		})]
-	});
-};
-MultiCombobox.displayName = "MultiCombobox";
-
 //#endregion
 //#region src/components/auto-crud/auto-table-simple-filters.tsx
+function mergeSelectedFilterOptions(currentOptions, labelOptions, selectedValues) {
+	const currentValues = new Set(currentOptions.map((option) => option.value));
+	return [...labelOptions.filter((option) => selectedValues.includes(option.value) && !currentValues.has(option.value)), ...currentOptions];
+}
 function AutoTableSimpleFilters({ table, shallow = false, filters: externalFilters, onFiltersChange, leading }) {
 	const columnDefs = table.options.columns;
 	const columns = React.useMemo(() => table.getAllColumns().filter((col) => col.getCanFilter()).sort((a, b) => {
@@ -3061,17 +2439,27 @@ function AutoTableSimpleFilters({ table, shallow = false, filters: externalFilte
 						})
 					}, column.id);
 					case "select":
-					case "multiSelect": return /* @__PURE__ */ jsx("div", {
-						className: isHidden ? "hidden" : "",
-						"data-filter-item": true,
-						children: /* @__PURE__ */ jsx(SimpleFacetedFilter, {
-							title: meta.label ?? column.id,
-							options: meta.options ?? [],
-							multiple: meta.variant === "multiSelect",
-							value: Array.isArray(value) ? value : value ? [value] : [],
-							onChange: (v) => updateFilter(column.id, v.length ? v : void 0)
-						})
-					}, column.id);
+					case "multiSelect": {
+						const selectedValues = Array.isArray(value) ? value : value ? [value] : [];
+						const filterOptions = mergeSelectedFilterOptions(meta.autoCrudFilterOptions ?? meta.options ?? [], meta.options ?? [], selectedValues);
+						return /* @__PURE__ */ jsx("div", {
+							className: isHidden ? "hidden" : "",
+							"data-filter-item": true,
+							children: /* @__PURE__ */ jsx(SimpleFacetedFilter, {
+								title: meta.label ?? column.id,
+								options: filterOptions,
+								multiple: meta.variant === "multiSelect",
+								value: selectedValues,
+								hasMore: meta.autoCrudFilterHasMore,
+								loading: meta.autoCrudFilterLoading,
+								searchValue: meta.autoCrudFilterSearchValue,
+								shouldFilter: meta.autoCrudFilterShouldFilter,
+								onChange: (v) => updateFilter(column.id, v.length ? v : void 0),
+								onPopupScroll: meta.autoCrudFilterOnPopupScroll,
+								onSearch: meta.autoCrudFilterOnSearch
+							})
+						}, column.id);
+					}
 					case "range": return /* @__PURE__ */ jsx("div", {
 						className: isHidden ? "hidden" : "",
 						"data-filter-item": true,
@@ -3118,13 +2506,23 @@ function AutoTableSimpleFilters({ table, shallow = false, filters: externalFilte
 		]
 	});
 }
-function SimpleFacetedFilter({ title, options, multiple, value, onChange }) {
-	return /* @__PURE__ */ jsx(MultiCombobox, {
-		value,
-		onChange,
+function SimpleFacetedFilter({ title, options, multiple, value, hasMore, loading, searchValue, shouldFilter, onChange, onPopupScroll, onSearch }) {
+	const onSelectChange = (nextValue) => {
+		onChange(Array.isArray(nextValue) ? nextValue : nextValue ? [nextValue] : []);
+	};
+	return /* @__PURE__ */ jsx(Select$2, {
+		mode: "searchable",
+		multiple: Boolean(multiple),
+		value: multiple ? value : value[0] ?? "",
+		onChange: onSelectChange,
 		options,
-		selectionMode: multiple ? "multiple" : "single",
 		searchPlaceholder: title,
+		hasMore,
+		loading,
+		searchValue,
+		shouldFilter,
+		onPopupScroll,
+		onSearch,
 		contentClassName: "w-50",
 		matchTriggerWidth: false,
 		clearText: "Clear filters",
@@ -3422,386 +2820,6 @@ function SimpleDateFilter({ title, multiple, value, onChange }) {
 	})] });
 }
 
-//#endregion
-//#region src/hooks/use-isomorphic-layout-effect.ts
-const useIsomorphicLayoutEffect = typeof window !== "undefined" ? React.useLayoutEffect : React.useEffect;
-
-//#endregion
-//#region src/hooks/use-as-ref.ts
-function useAsRef(props) {
-	const ref = React.useRef(props);
-	useIsomorphicLayoutEffect(() => {
-		ref.current = props;
-	});
-	return ref;
-}
-
-//#endregion
-//#region src/components/ui/action-bar.tsx
-const ROOT_NAME = "ActionBar";
-const GROUP_NAME = "ActionBarGroup";
-const ITEM_NAME = "ActionBarItem";
-const CLOSE_NAME = "ActionBarClose";
-const SEPARATOR_NAME = "ActionBarSeparator";
-const ITEM_SELECT = "actionbar.itemSelect";
-const ENTRY_FOCUS = "actionbarFocusGroup.onEntryFocus";
-const EVENT_OPTIONS = {
-	bubbles: false,
-	cancelable: true
-};
-function focusFirst(candidates, preventScroll = false) {
-	const PREVIOUSLY_FOCUSED_ELEMENT = document.activeElement;
-	for (const candidateRef of candidates) {
-		const candidate = candidateRef.current;
-		if (!candidate) continue;
-		if (candidate === PREVIOUSLY_FOCUSED_ELEMENT) return;
-		candidate.focus({ preventScroll });
-		if (document.activeElement !== PREVIOUSLY_FOCUSED_ELEMENT) return;
-	}
-}
-function wrapArray(array, startIndex) {
-	return array.map((_, index$1) => array[(startIndex + index$1) % array.length]);
-}
-function getDirectionAwareKey(key, dir) {
-	if (dir !== "rtl") return key;
-	return key === "ArrowLeft" ? "ArrowRight" : key === "ArrowRight" ? "ArrowLeft" : key;
-}
-const ActionBarContext = React.createContext(null);
-function useActionBarContext(consumerName) {
-	const context = React.useContext(ActionBarContext);
-	if (!context) throw new Error(`\`${consumerName}\` must be used within \`${ROOT_NAME}\``);
-	return context;
-}
-const FocusContext = React.createContext(null);
-function useFocusContext(consumerName) {
-	const context = React.useContext(FocusContext);
-	if (!context) throw new Error(`\`${consumerName}\` must be used within \`FocusProvider\``);
-	return context;
-}
-function ActionBar(props) {
-	const { open = false, onOpenChange, onEscapeKeyDown, side = "bottom", alignOffset = 0, align = "center", sideOffset = 16, portalContainer: portalContainerProp, dir: dirProp, orientation = "horizontal", loop = true, className, style, ref, asChild,...rootProps } = props;
-	const [mounted, setMounted] = React.useState(false);
-	const rootRef = React.useRef(null);
-	const composedRef = useComposedRefs(ref, rootRef);
-	const propsRef = useAsRef({
-		onEscapeKeyDown,
-		onOpenChange
-	});
-	const dir = useDirection(dirProp);
-	React.useLayoutEffect(() => {
-		setMounted(true);
-	}, []);
-	React.useEffect(() => {
-		if (!open) return;
-		const ownerDocument = rootRef.current?.ownerDocument ?? document;
-		function onKeyDown(event) {
-			if (event.key === "Escape") {
-				propsRef.current.onEscapeKeyDown?.(event);
-				if (!event.defaultPrevented) propsRef.current.onOpenChange?.(false);
-			}
-		}
-		ownerDocument.addEventListener("keydown", onKeyDown);
-		return () => ownerDocument.removeEventListener("keydown", onKeyDown);
-	}, [open, propsRef]);
-	const contextValue = React.useMemo(() => ({
-		onOpenChange,
-		dir,
-		orientation,
-		loop
-	}), [
-		onOpenChange,
-		dir,
-		orientation,
-		loop
-	]);
-	const portalContainer = portalContainerProp ?? (mounted ? globalThis.document?.body : null);
-	if (!portalContainer || !open) return null;
-	const RootPrimitive = asChild ? Slot : "div";
-	return /* @__PURE__ */ jsx(ActionBarContext.Provider, {
-		value: contextValue,
-		children: ReactDOM.createPortal(/* @__PURE__ */ jsx(RootPrimitive, {
-			role: "toolbar",
-			"aria-orientation": orientation,
-			"data-slot": "action-bar",
-			"data-side": side,
-			"data-align": align,
-			"data-orientation": orientation,
-			dir,
-			...rootProps,
-			ref: composedRef,
-			className: cn("fixed z-50 rounded-lg border bg-card shadow-lg outline-none", "fade-in-0 zoom-in-95 animate-in duration-250 [animation-timing-function:cubic-bezier(0.16,1,0.3,1)]", "data-[side=bottom]:slide-in-from-bottom-4 data-[side=top]:slide-in-from-top-4", "motion-reduce:animate-none motion-reduce:transition-none", orientation === "horizontal" ? "flex flex-row items-center gap-2 px-2 py-1.5" : "flex flex-col items-start gap-2 px-1.5 py-2", className),
-			style: {
-				[side]: `${sideOffset}px`,
-				...align === "center" && {
-					left: "50%",
-					translate: "-50% 0"
-				},
-				...align === "start" && { left: `${alignOffset}px` },
-				...align === "end" && { right: `${alignOffset}px` },
-				...style
-			}
-		}), portalContainer)
-	});
-}
-function ActionBarSelection(props) {
-	const { className, asChild,...selectionProps } = props;
-	return /* @__PURE__ */ jsx(asChild ? Slot : "div", {
-		"data-slot": "action-bar-selection",
-		...selectionProps,
-		className: cn("flex items-center gap-1 rounded-sm border px-2 py-1 font-medium text-sm tabular-nums", className)
-	});
-}
-function ActionBarGroup(props) {
-	const { onBlur: onBlurProp, onFocus: onFocusProp, onMouseDown: onMouseDownProp, className, asChild, ref,...groupProps } = props;
-	const [tabStopId, setTabStopId] = React.useState(null);
-	const [isTabbingBackOut, setIsTabbingBackOut] = React.useState(false);
-	const [focusableItemCount, setFocusableItemCount] = React.useState(0);
-	const composedRef = useComposedRefs(ref, React.useRef(null));
-	const isClickFocusRef = React.useRef(false);
-	const itemsRef = React.useRef(/* @__PURE__ */ new Map());
-	const { dir, orientation } = useActionBarContext(GROUP_NAME);
-	const onItemFocus = React.useCallback((tabStopId$1) => {
-		setTabStopId(tabStopId$1);
-	}, []);
-	const onItemShiftTab = React.useCallback(() => {
-		setIsTabbingBackOut(true);
-	}, []);
-	const onFocusableItemAdd = React.useCallback(() => {
-		setFocusableItemCount((prevCount) => prevCount + 1);
-	}, []);
-	const onFocusableItemRemove = React.useCallback(() => {
-		setFocusableItemCount((prevCount) => prevCount - 1);
-	}, []);
-	const onItemRegister = React.useCallback((item) => {
-		itemsRef.current.set(item.id, item);
-	}, []);
-	const onItemUnregister = React.useCallback((id) => {
-		itemsRef.current.delete(id);
-	}, []);
-	const getItems = React.useCallback(() => {
-		return Array.from(itemsRef.current.values()).filter((item) => item.ref.current).sort((a, b) => {
-			const elementA = a.ref.current;
-			const elementB = b.ref.current;
-			if (!elementA || !elementB) return 0;
-			const position = elementA.compareDocumentPosition(elementB);
-			if (position & Node.DOCUMENT_POSITION_FOLLOWING) return -1;
-			if (position & Node.DOCUMENT_POSITION_PRECEDING) return 1;
-			return 0;
-		});
-	}, []);
-	const onBlur = React.useCallback((event) => {
-		onBlurProp?.(event);
-		if (event.defaultPrevented) return;
-		setIsTabbingBackOut(false);
-	}, [onBlurProp]);
-	const onFocus = React.useCallback((event) => {
-		onFocusProp?.(event);
-		if (event.defaultPrevented) return;
-		const isKeyboardFocus = !isClickFocusRef.current;
-		if (event.target === event.currentTarget && isKeyboardFocus && !isTabbingBackOut) {
-			const entryFocusEvent = new CustomEvent(ENTRY_FOCUS, EVENT_OPTIONS);
-			event.currentTarget.dispatchEvent(entryFocusEvent);
-			if (!entryFocusEvent.defaultPrevented) {
-				const items = Array.from(itemsRef.current.values()).filter((item) => !item.disabled);
-				focusFirst([items.find((item) => item.id === tabStopId), ...items].filter(Boolean).map((item) => item.ref), false);
-			}
-		}
-		isClickFocusRef.current = false;
-	}, [
-		onFocusProp,
-		isTabbingBackOut,
-		tabStopId
-	]);
-	const onMouseDown = React.useCallback((event) => {
-		onMouseDownProp?.(event);
-		if (event.defaultPrevented) return;
-		isClickFocusRef.current = true;
-	}, [onMouseDownProp]);
-	const focusContextValue = React.useMemo(() => ({
-		tabStopId,
-		onItemFocus,
-		onItemShiftTab,
-		onFocusableItemAdd,
-		onFocusableItemRemove,
-		onItemRegister,
-		onItemUnregister,
-		getItems
-	}), [
-		tabStopId,
-		onItemFocus,
-		onItemShiftTab,
-		onFocusableItemAdd,
-		onFocusableItemRemove,
-		onItemRegister,
-		onItemUnregister,
-		getItems
-	]);
-	const GroupPrimitive = asChild ? Slot : "div";
-	return /* @__PURE__ */ jsx(FocusContext.Provider, {
-		value: focusContextValue,
-		children: /* @__PURE__ */ jsx(GroupPrimitive, {
-			role: "group",
-			"data-slot": "action-bar-group",
-			"data-orientation": orientation,
-			dir,
-			tabIndex: isTabbingBackOut || focusableItemCount === 0 ? -1 : 0,
-			...groupProps,
-			ref: composedRef,
-			className: cn("flex gap-2 outline-none", orientation === "horizontal" ? "items-center" : "w-full flex-col items-start", className),
-			onBlur,
-			onFocus,
-			onMouseDown
-		})
-	});
-}
-function ActionBarItem(props) {
-	const { onSelect, onClick: onClickProp, onFocus: onFocusProp, onKeyDown: onKeyDownProp, onMouseDown: onMouseDownProp, className, disabled, ref,...itemProps } = props;
-	const itemRef = React.useRef(null);
-	const composedRef = useComposedRefs(ref, itemRef);
-	const isMouseClickRef = React.useRef(false);
-	const { onOpenChange, dir, orientation, loop } = useActionBarContext(ITEM_NAME);
-	const focusContext = useFocusContext(ITEM_NAME);
-	const itemId = React.useId();
-	const isTabStop = focusContext.tabStopId === itemId;
-	useIsomorphicLayoutEffect(() => {
-		focusContext.onItemRegister({
-			id: itemId,
-			ref: itemRef,
-			disabled: !!disabled
-		});
-		if (!disabled) focusContext.onFocusableItemAdd();
-		return () => {
-			focusContext.onItemUnregister(itemId);
-			if (!disabled) focusContext.onFocusableItemRemove();
-		};
-	}, [
-		focusContext,
-		itemId,
-		disabled
-	]);
-	const onClick = React.useCallback((event) => {
-		onClickProp?.(event);
-		if (event.defaultPrevented) return;
-		const item = itemRef.current;
-		if (!item) return;
-		const itemSelectEvent = new CustomEvent(ITEM_SELECT, {
-			bubbles: true,
-			cancelable: true
-		});
-		item.addEventListener(ITEM_SELECT, (event$1) => onSelect?.(event$1), { once: true });
-		item.dispatchEvent(itemSelectEvent);
-		if (!itemSelectEvent.defaultPrevented) onOpenChange?.(false);
-	}, [
-		onClickProp,
-		onOpenChange,
-		onSelect
-	]);
-	const onFocus = React.useCallback((event) => {
-		onFocusProp?.(event);
-		if (event.defaultPrevented) return;
-		focusContext.onItemFocus(itemId);
-		isMouseClickRef.current = false;
-	}, [
-		onFocusProp,
-		focusContext,
-		itemId
-	]);
-	const onKeyDown = React.useCallback((event) => {
-		onKeyDownProp?.(event);
-		if (event.defaultPrevented) return;
-		if (event.key === "Tab" && event.shiftKey) {
-			focusContext.onItemShiftTab();
-			return;
-		}
-		if (event.target !== event.currentTarget) return;
-		const key = getDirectionAwareKey(event.key, dir);
-		let focusIntent;
-		if (orientation === "horizontal") {
-			if (key === "ArrowLeft") focusIntent = "prev";
-			else if (key === "ArrowRight") focusIntent = "next";
-			else if (key === "Home") focusIntent = "first";
-			else if (key === "End") focusIntent = "last";
-		} else if (key === "ArrowUp") focusIntent = "prev";
-		else if (key === "ArrowDown") focusIntent = "next";
-		else if (key === "Home") focusIntent = "first";
-		else if (key === "End") focusIntent = "last";
-		if (focusIntent !== void 0) {
-			if (event.metaKey || event.ctrlKey || event.altKey || event.shiftKey) return;
-			event.preventDefault();
-			let candidateRefs = focusContext.getItems().filter((item) => !item.disabled).map((item) => item.ref);
-			if (focusIntent === "last") candidateRefs.reverse();
-			else if (focusIntent === "prev" || focusIntent === "next") {
-				if (focusIntent === "prev") candidateRefs.reverse();
-				const currentIndex = candidateRefs.findIndex((ref$1) => ref$1.current === event.currentTarget);
-				candidateRefs = loop ? wrapArray(candidateRefs, currentIndex + 1) : candidateRefs.slice(currentIndex + 1);
-			}
-			queueMicrotask(() => focusFirst(candidateRefs));
-		}
-	}, [
-		onKeyDownProp,
-		focusContext,
-		dir,
-		orientation,
-		loop
-	]);
-	const onMouseDown = React.useCallback((event) => {
-		onMouseDownProp?.(event);
-		if (event.defaultPrevented) return;
-		isMouseClickRef.current = true;
-		if (disabled) event.preventDefault();
-		else focusContext.onItemFocus(itemId);
-	}, [
-		onMouseDownProp,
-		focusContext,
-		itemId,
-		disabled
-	]);
-	return /* @__PURE__ */ jsx(Button, {
-		type: "button",
-		"data-slot": "action-bar-item",
-		variant: "secondary",
-		size: "sm",
-		disabled,
-		tabIndex: isTabStop ? 0 : -1,
-		...itemProps,
-		className: cn(orientation === "vertical" && "w-full", className),
-		ref: composedRef,
-		onClick,
-		onFocus,
-		onKeyDown,
-		onMouseDown
-	});
-}
-function ActionBarClose(props) {
-	const { asChild, className, onClick,...closeProps } = props;
-	const { onOpenChange } = useActionBarContext(CLOSE_NAME);
-	const onCloseClick = React.useCallback((event) => {
-		onClick?.(event);
-		if (event.defaultPrevented) return;
-		onOpenChange?.(false);
-	}, [onOpenChange, onClick]);
-	return /* @__PURE__ */ jsx(asChild ? Slot : "button", {
-		type: "button",
-		"data-slot": "action-bar-close",
-		...closeProps,
-		className: cn("rounded-xs opacity-70 outline-none hover:opacity-100 focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/50 disabled:pointer-events-none [&_svg:not([class*='size-'])]:size-3.5 [&_svg]:pointer-events-none [&_svg]:shrink-0", className),
-		onClick: onCloseClick
-	});
-}
-function ActionBarSeparator(props) {
-	const { orientation: orientationProp, asChild, className,...separatorProps } = props;
-	const context = useActionBarContext(SEPARATOR_NAME);
-	const orientation = orientationProp ?? context.orientation;
-	return /* @__PURE__ */ jsx(asChild ? Slot : "div", {
-		role: "separator",
-		"aria-orientation": orientation,
-		"aria-hidden": "true",
-		"data-slot": "action-bar-separator",
-		...separatorProps,
-		className: cn("in-data-[slot=action-bar-selection]:ml-0.5 in-data-[slot=action-bar-selection]:h-4 in-data-[slot=action-bar-selection]:w-px bg-border", orientation === "horizontal" ? "h-6 w-px" : "h-px w-full", className)
-	});
-}
-
 //#endregion
 //#region src/components/data-table/data-table-column-header.tsx
 function DataTableColumnHeader({ column, label, className,...props }) {
@@ -4462,12 +3480,22 @@ function downloadCSV(csvContent, filename) {
 
 //#endregion
 //#region src/components/auto-crud/auto-table-action-bar.tsx
-function isBatchCustomAction(action) {
-	return action.type === "custom";
+const DEFAULT_DELETE_CONFIRMATION = {
+	title: "确认批量删除",
+	description: (count) => `此操作无法撤销。确定要删除选中的 ${count} 条记录吗？`,
+	cancel: "取消",
+	confirm: "确认删除"
+};
+function isBatchCustomAction(action$1) {
+	return action$1.type === "custom";
 }
-function AutoTableActionBar({ table, onDeleteSelected, onUpdateSelected, batchUpdateFields, enableExport = true, showDefaultExport = true, enableDelete = true, extraActions, actions }) {
+function AutoTableActionBar({ table, onDeleteSelected, onUpdateSelected, batchUpdateFields, enableExport = true, showDefaultExport = true, enableDelete = true, extraActions, actions, deleteConfirmation = DEFAULT_DELETE_CONFIRMATION }) {
 	const rows = table.getFilteredSelectedRowModel().rows;
 	const selectedRows = React.useMemo(() => rows.map((row) => row.original), [rows]);
+	const [deleteDialogOpen, setDeleteDialogOpen] = React.useState(false);
+	React.useEffect(() => {
+		if (selectedRows.length === 0) setDeleteDialogOpen(false);
+	}, [selectedRows.length]);
 	const clearSelection = React.useCallback(() => {
 		table.toggleAllRowsSelected(false);
 	}, [table]);
@@ -4490,8 +3518,34 @@ function AutoTableActionBar({ table, onDeleteSelected, onUpdateSelected, batchUp
 		});
 	}, [table]);
 	const onDelete = React.useCallback(() => {
-		if (onDeleteSelected) onDeleteSelected(selectedRows);
-	}, [selectedRows, onDeleteSelected]);
+		if (onDeleteSelected && selectedRows.length > 0) {
+			onDeleteSelected(selectedRows);
+			clearSelection();
+		}
+		setDeleteDialogOpen(false);
+	}, [
+		selectedRows,
+		onDeleteSelected,
+		clearSelection
+	]);
+	const runDeleteAction = React.useCallback((action$1, event) => {
+		if (selectedRows.length === 0) {
+			setDeleteDialogOpen(false);
+			return;
+		}
+		if (action$1.onClick) {
+			action$1.onClick(selectedRows, actionContext, event);
+			clearSelection();
+			setDeleteDialogOpen(false);
+			return;
+		}
+		onDelete();
+	}, [
+		actionContext,
+		clearSelection,
+		onDelete,
+		selectedRows
+	]);
 	const handleBatchUpdate = React.useCallback((field, value) => {
 		if (onUpdateSelected) {
 			onUpdateSelected(selectedRows, { [field]: value });
@@ -4518,18 +3572,28 @@ function AutoTableActionBar({ table, onDeleteSelected, onUpdateSelected, batchUp
 			children: option.label
 		}, option.value))
 	})] }, `${keyPrefix}-${fieldConfig.field}`)), [batchUpdateFields, handleBatchUpdate]);
-	const renderBuiltinAction = React.useCallback((action) => {
-		if (!(action.type === "batchUpdate" ? !!onUpdateSelected && !!batchUpdateFields?.length : action.type === "export" ? enableExport : enableDelete && !!onDeleteSelected)) return null;
-		if (action.component) return renderComponent(action.component);
-		if (action.type === "batchUpdate") return renderBatchUpdate(action.type);
-		if (action.type === "export") return /* @__PURE__ */ jsxs(ActionBarItem, {
-			onClick: (event) => action.onClick ? action.onClick(selectedRows, actionContext, event) : onExport(),
-			children: [/* @__PURE__ */ jsx(Download, {}), action.label ?? "Export"]
+	const renderBuiltinAction = React.useCallback((action$1) => {
+		if (!(action$1.type === "batchUpdate" ? !!onUpdateSelected && !!batchUpdateFields?.length : action$1.type === "export" ? enableExport : enableDelete && !!onDeleteSelected)) return null;
+		if (action$1.component) return renderComponent(action$1.component);
+		if (action$1.type === "batchUpdate") return renderBatchUpdate(action$1.type);
+		if (action$1.type === "export") return /* @__PURE__ */ jsxs(ActionBarItem, {
+			onClick: (event) => action$1.onClick ? action$1.onClick(selectedRows, actionContext, event) : onExport(),
+			children: [/* @__PURE__ */ jsx(Download, {}), action$1.label ?? "Export"]
 		}, "export");
-		if (action.type === "delete") return /* @__PURE__ */ jsxs(ActionBarItem, {
-			variant: "destructive",
-			onClick: (event) => action.onClick ? action.onClick(selectedRows, actionContext, event) : onDelete(),
-			children: [/* @__PURE__ */ jsx(Trash2, {}), action.label ?? "Delete"]
+		if (action$1.type === "delete") return /* @__PURE__ */ jsxs(AlertDialog, {
+			open: deleteDialogOpen,
+			onOpenChange: setDeleteDialogOpen,
+			children: [/* @__PURE__ */ jsxs(ActionBarItem, {
+				variant: "destructive",
+				onClick: () => setDeleteDialogOpen(true),
+				onSelect: (event) => event.preventDefault(),
+				children: [/* @__PURE__ */ jsx(Trash2, {}), action$1.label ?? "Delete"]
+			}), /* @__PURE__ */ jsxs(AlertDialogContent, { children: [/* @__PURE__ */ jsxs(AlertDialogHeader, { children: [/* @__PURE__ */ jsx(AlertDialogTitle, { children: deleteConfirmation.title }), /* @__PURE__ */ jsx(AlertDialogDescription, { children: deleteConfirmation.description(selectedRows.length) })] }), /* @__PURE__ */ jsxs(AlertDialogFooter, { children: [/* @__PURE__ */ jsx(AlertDialogCancel, { children: deleteConfirmation.cancel }), /* @__PURE__ */ jsx(AlertDialogAction, {
+				className: "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30",
+				disabled: selectedRows.length === 0,
+				onClick: (event) => runDeleteAction(action$1, event),
+				children: deleteConfirmation.confirm
+			})] })] })]
 		}, "delete");
 		return null;
 	}, [
@@ -4537,21 +3601,24 @@ function AutoTableActionBar({ table, onDeleteSelected, onUpdateSelected, batchUp
 		batchUpdateFields?.length,
 		enableDelete,
 		enableExport,
+		deleteConfirmation,
+		deleteDialogOpen,
 		onDelete,
 		onDeleteSelected,
 		onUpdateSelected,
 		onExport,
 		renderBatchUpdate,
 		renderComponent,
+		runDeleteAction,
 		selectedRows
 	]);
-	const renderCustomAction = React.useCallback((action, index$1) => {
-		if (action.component) return /* @__PURE__ */ jsx(React.Fragment, { children: renderComponent(action.component) }, `custom-${index$1}`);
-		if (!action.label || !action.onClick) return null;
+	const renderCustomAction = React.useCallback((action$1, index$1) => {
+		if (action$1.component) return /* @__PURE__ */ jsx(React.Fragment, { children: renderComponent(action$1.component) }, `custom-${index$1}`);
+		if (!action$1.label || !action$1.onClick) return null;
 		return /* @__PURE__ */ jsx(ActionBarItem, {
-			variant: action.variant === "destructive" ? "destructive" : "secondary",
-			onClick: (event) => action.onClick?.(selectedRows, actionContext, event),
-			children: action.label
+			variant: action$1.variant === "destructive" ? "destructive" : "secondary",
+			onClick: (event) => action$1.onClick?.(selectedRows, actionContext, event),
+			children: action$1.label
 		}, `custom-${index$1}`);
 	}, [
 		actionContext,
@@ -4564,7 +3631,7 @@ function AutoTableActionBar({ table, onDeleteSelected, onUpdateSelected, batchUp
 			{ type: "export" },
 			{ type: "delete" }
 		]) : actions;
-		const resolvedActions = configuredActions?.filter((action) => !action.hidden);
+		const resolvedActions = configuredActions?.filter((action$1) => !action$1.hidden);
 		if (configuredActions === void 0) return /* @__PURE__ */ jsxs(Fragment, { children: [
 			renderBuiltinAction({ type: "batchUpdate" }),
 			extraActions,
@@ -4572,9 +3639,9 @@ function AutoTableActionBar({ table, onDeleteSelected, onUpdateSelected, batchUp
 			renderBuiltinAction({ type: "delete" })
 		] });
 		if (!resolvedActions || resolvedActions.length === 0) return null;
-		if (!resolvedActions.some((action) => action.type !== "custom")) {
-			const startNodes = resolvedActions.filter(isBatchCustomAction).filter((action) => action.position === "start").map((action, index$1) => renderCustomAction(action, index$1));
-			const endNodes = resolvedActions.filter(isBatchCustomAction).filter((action) => action.position !== "start").map((action, index$1) => renderCustomAction(action, index$1));
+		if (!resolvedActions.some((action$1) => action$1.type !== "custom")) {
+			const startNodes = resolvedActions.filter(isBatchCustomAction).filter((action$1) => action$1.position === "start").map((action$1, index$1) => renderCustomAction(action$1, index$1));
+			const endNodes = resolvedActions.filter(isBatchCustomAction).filter((action$1) => action$1.position !== "start").map((action$1, index$1) => renderCustomAction(action$1, index$1));
 			return /* @__PURE__ */ jsxs(Fragment, { children: [
 				startNodes,
 				renderBuiltinAction({ type: "batchUpdate" }),
@@ -4584,9 +3651,9 @@ function AutoTableActionBar({ table, onDeleteSelected, onUpdateSelected, batchUp
 				endNodes
 			] });
 		}
-		return resolvedActions.map((action, index$1) => {
-			if (action.type === "custom") return renderCustomAction(action, index$1);
-			return /* @__PURE__ */ jsx(React.Fragment, { children: renderBuiltinAction(action) }, action.type);
+		return resolvedActions.map((action$1, index$1) => {
+			if (action$1.type === "custom") return renderCustomAction(action$1, index$1);
+			return /* @__PURE__ */ jsx(React.Fragment, { children: renderBuiltinAction(action$1) }, action$1.type);
 		});
 	}, [
 		actions,
@@ -4870,7 +3937,7 @@ const filterModeConfig = {
 		tooltip: "Linear-style command filters"
 	}
 };
-function AutoTable({ schema, data, pageCount = 1, overrides, enableRowSelection = true, exclude, actions, pinnedColumns, filterMode = "simple", search = false, onDeleteSelected, onUpdateSelected, batchUpdateFields, actionBarExtra, actionBarActions, initialSorting, enableExport = true, showDefaultExport = true, onSelectedCountChange, onSelectedRowsChange, getSelectedRows }) {
+function AutoTable({ schema, data, pageCount = 1, overrides, enableRowSelection = true, exclude, actions, pinnedColumns, filterMode = "simple", search = false, onDeleteSelected, onUpdateSelected, batchUpdateFields, actionBarExtra, actionBarActions, deleteConfirmation, initialSorting, enableExport = true, showDefaultExport = true, onSelectedCountChange, onSelectedRowsChange, getSelectedRows }) {
 	const modes = filterMode ? Array.isArray(filterMode) ? filterMode : [filterMode] : DEFAULT_MODES;
 	const [currentMode, setCurrentMode] = useQueryState("filterMode", parseAsStringEnum(modes).withDefault(modes[0] ?? "simple"));
 	const showToggle = modes.length > 1;
@@ -5047,7 +4114,8 @@ function AutoTable({ schema, data, pageCount = 1, overrides, enableRowSelection
 				enableExport,
 				showDefaultExport,
 				extraActions: actionBarExtra,
-				actions: actionBarActions
+				actions: actionBarActions,
+				deleteConfirmation
 			})
 		]
 	});
@@ -5249,11 +4317,19 @@ function normalizeDataSourceRegistration(registration) {
 	if (typeof registration === "function") return {
 		dependencies: [],
 		reset: false,
+		search: false,
+		debounceMs: 300,
+		loadMore: false,
+		pageSize: 20,
 		load: registration
 	};
 	return {
 		dependencies: Array.isArray(registration.dependencies) ? registration.dependencies : [],
 		reset: registration.reset === true,
+		search: registration.search === true,
+		debounceMs: typeof registration.debounceMs === "number" && registration.debounceMs >= 0 ? registration.debounceMs : 300,
+		loadMore: registration.loadMore === true,
+		pageSize: typeof registration.pageSize === "number" && registration.pageSize > 0 ? registration.pageSize : 20,
 		load: registration.load
 	};
 }
@@ -5280,10 +4356,63 @@ function normalizeOptions(result) {
 		value: String(option.value)
 	}));
 }
+function normalizeHasMore(result) {
+	return !Array.isArray(result) && result?.hasMore === true;
+}
+
+//#endregion
+//#region src/lib/field-config.ts
+function normalizeFieldOptions$1(options) {
+	if (!options || options.length === 0) return void 0;
+	return options.map((option) => ({
+		...option,
+		value: String(option.value)
+	}));
+}
+/**
+* 从统一字段配置生成 Formily overrides。
+* `legacyOverrides` 保持兼容旧 API，字段级 `form` 配置优先级最高。
+*/
+function buildFormOverrides(fields, legacyOverrides, denyFields) {
+	const result = { ...legacyOverrides };
+	if (denyFields) for (const field of denyFields) result[field] = {
+		...result[field],
+		"x-hidden": true
+	};
+	if (fields) for (const [key, config] of Object.entries(fields)) {
+		const fieldOptions = normalizeFieldOptions$1((config.form && typeof config.form === "object" ? config.form : void 0)?.enum) ?? normalizeFieldOptions$1(config.enum);
+		const fieldDataSource = fieldOptions || !config.dataSource ? void 0 : normalizeDataSourceConfig(config.dataSource);
+		if (config.label) result[key] = {
+			...result[key],
+			title: config.label
+		};
+		if (config.hidden) result[key] = {
+			...result[key],
+			"x-hidden": true
+		};
+		if (fieldOptions) result[key] = {
+			...result[key],
+			enum: fieldOptions
+		};
+		if (fieldDataSource) result[key] = {
+			...result[key],
+			"x-data-source": config.dataSource
+		};
+		if (config.form === false) result[key] = {
+			...result[key],
+			"x-hidden": true
+		};
+		else if (config.form && typeof config.form === "object") result[key] = {
+			...result[key],
+			...config.form
+		};
+	}
+	return result;
+}
 
 //#endregion
 //#region src/components/auto-crud/auto-form.tsx
-const COMBOBOX_LIST_CLASS = "[&_[cmdk-list]]:max-h-[360px] [&_[cmdk-list]]:overflow-x-hidden [&_[cmdk-list]]:overflow-y-auto";
+const COMBOBOX_LIST_CLASS = "[&_[data-multi-combobox-viewport]]:max-h-[360px] [&_[data-multi-combobox-viewport]]:overflow-x-hidden [&_[data-multi-combobox-viewport]]:overflow-y-auto";
 const FormilySwitch = connect(Switch, mapProps({
 	value: "checked",
 	onInput: "onCheckedChange"
@@ -5293,25 +4422,27 @@ const FormilyMultiCombobox = connect(AutoCrudMultiCombobox, mapProps({
 	dataSource: "options",
 	onInput: "onChange"
 }, (props, field) => {
-	const fieldValue = field.value;
+	const fieldValue = field && typeof field === "object" && "value" in field ? field.value : props.value;
 	return {
 		...props,
 		value: Array.isArray(fieldValue) ? fieldValue.map(String) : []
 	};
 }));
 function AutoCrudCombobox({ options = [], className, value, onChange,...props }) {
-	return /* @__PURE__ */ jsx(MultiCombobox, {
+	return /* @__PURE__ */ jsx(Select$2, {
 		...props,
-		value: value ? [value] : [],
+		mode: "searchable",
+		value: value ?? "",
 		options,
-		selectionMode: "single",
-		onChange: (nextValues) => onChange?.(nextValues[0] ?? ""),
+		onChange: (nextValue) => onChange?.(nextValue),
 		className: cn$1(COMBOBOX_LIST_CLASS, className)
 	});
 }
 function AutoCrudMultiCombobox({ options = [],...props }) {
-	return /* @__PURE__ */ jsx(MultiCombobox, {
+	return /* @__PURE__ */ jsx(Select$2, {
 		...props,
+		mode: "searchable",
+		multiple: true,
 		options
 	});
 }
@@ -5329,99 +4460,280 @@ const defaultFieldComponents = {
 		decorator: "FormItem"
 	}
 };
-function useRegistryVersion$1(subscribe) {
+const AUTO_CRUD_DATA_SOURCE_SCOPE_KEY = "$autoCrudDataSource";
+const POPUP_SCROLL_LOAD_THRESHOLD$1 = 24;
+const dataSourceReactionStates = /* @__PURE__ */ new WeakMap();
+function createBoundAction(callback) {
+	return action.bound?.(callback) ?? ((...args) => action(() => callback(...args)));
+}
+function useRegistryVersion$1(subscribe, onChange) {
 	const [version$1, setVersion] = useState(0);
-	useEffect(() => subscribe(() => setVersion((current) => current + 1)), [subscribe]);
+	useEffect(() => subscribe(() => {
+		onChange?.();
+		setVersion((current) => current + 1);
+	}), [onChange, subscribe]);
 	return version$1;
 }
 function isDataSourceConfig(value) {
 	return typeof value === "string" && value.length > 0;
 }
-function collectDataSourceConfigs(schema, result = {}) {
+function getSchemaDataSourceConfig(schema) {
+	const customDataSource = schema["x-data-source"];
+	const schemaDataSource = schema.dataSource;
+	return isDataSourceConfig(customDataSource) ? customDataSource : isDataSourceConfig(schemaDataSource) ? schemaDataSource : void 0;
+}
+function mergeReactions(existing, reaction) {
+	if (existing == null) return reaction;
+	if (existing === reaction) return existing;
+	if (Array.isArray(existing)) return existing.includes(reaction) ? existing : [...existing, reaction];
+	return [existing, reaction];
+}
+function applyDataSourceReactions(schema) {
+	const dataSourceConfig = getSchemaDataSourceConfig(schema);
+	if (dataSourceConfig) {
+		const reaction = `{{${AUTO_CRUD_DATA_SOURCE_SCOPE_KEY}(${JSON.stringify(dataSourceConfig)})}}`;
+		schema["x-reactions"] = mergeReactions(schema["x-reactions"], reaction);
+	}
 	const properties = schema.properties;
-	if (!properties || typeof properties !== "object") return result;
-	for (const [key, property] of Object.entries(properties)) {
-		if (!property || typeof property !== "object" || Array.isArray(property)) continue;
-		const record = property;
-		const customDataSource = record["x-data-source"];
-		const schemaDataSource = record.dataSource;
-		const dataSourceConfig = isDataSourceConfig(customDataSource) ? customDataSource : isDataSourceConfig(schemaDataSource) ? schemaDataSource : void 0;
-		if (dataSourceConfig) result[key] = dataSourceConfig;
-		collectDataSourceConfigs(record, result);
+	if (properties && typeof properties === "object" && !Array.isArray(properties)) {
+		for (const property of Object.values(properties)) if (property && typeof property === "object" && !Array.isArray(property)) applyDataSourceReactions(property);
 	}
-	return result;
+	const items = schema.items;
+	if (Array.isArray(items)) {
+		for (const item of items) if (item && typeof item === "object") applyDataSourceReactions(item);
+	} else if (items && typeof items === "object") applyDataSourceReactions(items);
+}
+function getDataSourceReactionState(field) {
+	const existing = dataSourceReactionStates.get(field);
+	if (existing) return existing;
+	const next = {
+		hasMore: false,
+		initialized: false,
+		appendLoading: false,
+		options: [],
+		page: 0,
+		requestVersion: 0
+	};
+	dataSourceReactionStates.set(field, next);
+	return next;
+}
+function mergeDataSourceOptions(current, incoming) {
+	const optionsByValue = new Map(current.map((option) => [option.value, option]));
+	for (const option of incoming) optionsByValue.set(option.value, option);
+	return Array.from(optionsByValue.values());
+}
+function isNearPopupScrollBottom$1(target) {
+	return target.scrollHeight - target.scrollTop - target.clientHeight <= POPUP_SCROLL_LOAD_THRESHOLD$1;
+}
+function getDataSourceDependencyValues(entry, field) {
+	return Object.fromEntries(entry.dependencies.map((dependency) => [dependency, field.form.getValuesIn(dependency)]));
+}
+function loadAutoCrudDataSource({ entry, field, registryVersion, search, sourceKey, state, append = false }) {
+	const values = getDataSourceDependencyValues(entry, field);
+	const dependencyKey = JSON.stringify(values);
+	const searchValue = entry.search ? search ?? "" : void 0;
+	const page = entry.loadMore ? append ? state.page + 1 : 1 : void 0;
+	const loadKey = JSON.stringify({
+		values,
+		search: searchValue
+	});
+	if (!append && state.loadKey === loadKey && state.registryVersion === registryVersion) return;
+	if (entry.reset && state.dependencyKey !== void 0 && state.dependencyKey !== dependencyKey) field.setValue(void 0);
+	state.dependencyKey = dependencyKey;
+	if (!append) {
+		state.loadKey = loadKey;
+		state.options = [];
+		state.page = 0;
+		state.hasMore = false;
+	}
+	state.registryVersion = registryVersion;
+	state.controller?.abort();
+	const requestVersion = state.requestVersion + 1;
+	state.requestVersion = requestVersion;
+	const controller = typeof AbortController === "undefined" ? void 0 : new AbortController();
+	state.controller = controller;
+	if (append) {
+		state.appendLoading = true;
+		field.setComponentProps({ loading: true });
+	} else {
+		field.setLoading(true);
+		field.setComponentProps({
+			loading: true,
+			...entry.loadMore ? { hasMore: false } : {}
+		});
+	}
+	Promise.resolve(entry.load({
+		field: field.path.toString(),
+		page,
+		pageSize: entry.loadMore ? entry.pageSize : void 0,
+		search: searchValue,
+		values,
+		signal: controller?.signal
+	})).then(createBoundAction((result) => {
+		if (dataSourceReactionStates.get(field)?.requestVersion !== requestVersion || controller?.signal.aborted) return;
+		const options = normalizeOptions(result);
+		const nextOptions = append ? mergeDataSourceOptions(state.options, options) : options;
+		state.options = nextOptions;
+		state.page = page ?? 0;
+		state.hasMore = entry.loadMore ? normalizeHasMore(result) : false;
+		state.appendLoading = false;
+		field.setDataSource(nextOptions);
+		field.setLoading(false);
+		field.setComponentProps({
+			loading: false,
+			...entry.loadMore ? { hasMore: state.hasMore } : {}
+		});
+	}), createBoundAction((error) => {
+		if (dataSourceReactionStates.get(field)?.requestVersion !== requestVersion || controller?.signal.aborted) return;
+		console.warn(`[AutoCrud] Failed to load data source "${sourceKey}".`, error);
+		if (!append) {
+			state.options = [];
+			state.hasMore = false;
+			field.setDataSource([]);
+		}
+		state.appendLoading = false;
+		field.setLoading(false);
+		field.setComponentProps({
+			loading: false,
+			...entry.loadMore ? { hasMore: state.hasMore } : {}
+		});
+	}));
 }
-function useFormDataSources(form, schema) {
-	useEffect(() => {
-		const sourceEntries = Object.entries(collectDataSourceConfigs(schema)).map(([fieldName, config]) => {
-			const normalized = normalizeDataSourceConfig(config);
-			return normalized ? [fieldName, normalized] : void 0;
-		}).filter((entry) => entry !== void 0);
-		if (sourceEntries.length === 0) return;
-		let active = true;
-		const effectId = Symbol("autoCrudDataSources");
-		const loadVersions = /* @__PURE__ */ new Map();
-		const controller = typeof AbortController === "undefined" ? void 0 : new AbortController();
-		const loadFieldOptions = async (fieldName, source) => {
-			const version$1 = (loadVersions.get(fieldName) ?? 0) + 1;
-			loadVersions.set(fieldName, version$1);
-			const entry = dataSources.get(source.key);
-			if (!entry) {
-				form.setFieldState(fieldName, (state) => {
-					state.dataSource = [];
-				});
-				return;
-			}
-			try {
-				const options = normalizeOptions(await entry.load({
-					field: fieldName,
-					values: Object.fromEntries(entry.dependencies.map((dependency) => [dependency, form.getValuesIn(dependency)])),
-					signal: controller?.signal
-				}));
-				if (!active || loadVersions.get(fieldName) !== version$1) return;
-				form.setFieldState(fieldName, (state) => {
-					state.dataSource = options;
+function applySearchComponentProps({ entry, field, registryState, sourceKey, state }) {
+	if (!entry.search) return;
+	field.setComponentProps({
+		searchValue: state.search ?? "",
+		shouldFilter: false,
+		onSearch: (search) => {
+			if (state.search === search) return;
+			state.search = search;
+			field.setComponentProps({ searchValue: search });
+			if (state.searchTimer) clearTimeout(state.searchTimer);
+			state.searchTimer = setTimeout(() => {
+				const currentEntry = dataSources.get(sourceKey);
+				if (!currentEntry) {
+					state.controller?.abort();
+					field.setDataSource([]);
+					field.setLoading(false);
+					field.setComponentProps({ loading: false });
+					return;
+				}
+				loadAutoCrudDataSource({
+					entry: currentEntry,
+					field,
+					registryVersion: registryState.version,
+					search,
+					sourceKey,
+					state
 				});
-			} catch (error) {
-				if (!active || controller?.signal.aborted) return;
-				console.warn(`[AutoCrud] Failed to load data source "${source.key}".`, error);
-				form.setFieldState(fieldName, (state) => {
-					state.dataSource = [];
+			}, entry.debounceMs);
+		}
+	});
+}
+function applyLoadMoreComponentProps({ entry, field, registryState, sourceKey, state }) {
+	if (!entry.loadMore) return;
+	field.setComponentProps({
+		hasMore: state.hasMore,
+		loading: state.appendLoading,
+		onPopupScroll: (event) => {
+			if (!isNearPopupScrollBottom$1(event.currentTarget)) return;
+			if (!state.hasMore || state.appendLoading) return;
+			const currentEntry = dataSources.get(sourceKey);
+			if (!currentEntry) {
+				state.controller?.abort();
+				state.hasMore = false;
+				state.appendLoading = false;
+				field.setDataSource([]);
+				field.setLoading(false);
+				field.setComponentProps({
+					hasMore: false,
+					loading: false
 				});
+				return;
 			}
-		};
-		for (const [fieldName, source] of sourceEntries) loadFieldOptions(fieldName, source);
-		form.addEffects(effectId, () => {
-			for (const dependency of new Set(sourceEntries.flatMap(([, source]) => dataSources.get(source.key)?.dependencies ?? []))) onFieldValueChange(dependency, () => {
-				for (const [fieldName, source] of sourceEntries) {
-					const entry = dataSources.get(source.key);
-					if (!entry?.dependencies.includes(dependency)) continue;
-					if (entry.reset) form.setValuesIn(fieldName, void 0);
-					loadFieldOptions(fieldName, source);
-				}
+			loadAutoCrudDataSource({
+				append: true,
+				entry: currentEntry,
+				field,
+				registryVersion: registryState.version,
+				search: state.search,
+				sourceKey,
+				state
+			});
+		}
+	});
+}
+function createAutoCrudDataSourceReaction(config, registryState) {
+	const source = normalizeDataSourceConfig(config);
+	return (field) => {
+		const registryVersion = registryState.version;
+		const state = getDataSourceReactionState(field);
+		if (!state.initialized) {
+			field.disposers.push(() => {
+				state.controller?.abort();
+				if (state.searchTimer) clearTimeout(state.searchTimer);
 			});
+			state.initialized = true;
+		}
+		if (!source) {
+			field.setDataSource([]);
+			field.setLoading(false);
+			return;
+		}
+		const entry = dataSources.get(source.key);
+		if (!entry) {
+			state.controller?.abort();
+			field.setDataSource([]);
+			field.setLoading(false);
+			return;
+		}
+		applySearchComponentProps({
+			entry,
+			field,
+			registryState,
+			sourceKey: source.key,
+			state
 		});
-		return () => {
-			active = false;
-			controller?.abort();
-			form.removeEffects(effectId);
-		};
-	}, [
-		form,
-		schema,
-		useRegistryVersion$1(dataSources.subscribe)
-	]);
+		applyLoadMoreComponentProps({
+			entry,
+			field,
+			registryState,
+			sourceKey: source.key,
+			state
+		});
+		loadAutoCrudDataSource({
+			entry,
+			field,
+			registryVersion,
+			search: state.search,
+			sourceKey: source.key,
+			state
+		});
+	};
 }
-function AutoFormInner({ schema: zodSchema, initialValues, onSubmit, overrides, mode = "create", loading = false, gridColumns = 1, labelAlign = "top", labelWidth, showSubmitButton = true }, ref) {
+function AutoFormInner({ schema: zodSchema, initialValues, onSubmit, fields, overrides, scope: scopeProp, mode = "create", loading = false, gridColumns = 1, labelAlign = "top", labelWidth, showSubmitButton = true }, ref) {
 	const form = useMemo(() => createForm({ initialValues }), [JSON.stringify(initialValues)]);
-	const formSchema = useMemo(() => createEditFormSchema(zodSchema, {
-		overrides,
-		layout: "grid",
-		gridColumns
-	}), [
+	const dataSourceRegistryState = useMemo(() => observable({ version: 0 }), []);
+	const updateDataSourceRegistryState = useCallback(() => {
+		action(() => {
+			dataSourceRegistryState.version += 1;
+		});
+	}, [dataSourceRegistryState]);
+	const dataSourceRegistryVersion = useRegistryVersion$1(dataSources.subscribe, updateDataSourceRegistryState);
+	const formOverrides = useMemo(() => buildFormOverrides(fields, overrides), [fields, overrides]);
+	const formSchema = useMemo(() => {
+		const nextSchema = createEditFormSchema(zodSchema, {
+			overrides: formOverrides,
+			layout: "grid",
+			gridColumns
+		});
+		applyDataSourceReactions(nextSchema);
+		return nextSchema;
+	}, [
 		zodSchema,
-		overrides,
-		gridColumns
+		formOverrides,
+		gridColumns,
+		dataSourceRegistryVersion
 	]);
 	const formLayout = useMemo(() => {
 		const inlineLabel = labelAlign === "left" || labelAlign === "right";
@@ -5437,7 +4749,10 @@ function AutoFormInner({ schema: zodSchema, initialValues, onSubmit, overrides,
 		...defaultFieldComponents,
 		...components.all()
 	} }), [useRegistryVersion$1(components.subscribe)]);
-	useFormDataSources(form, formSchema);
+	const scope = useMemo(() => ({
+		...scopeProp,
+		[AUTO_CRUD_DATA_SOURCE_SCOPE_KEY]: (config) => createAutoCrudDataSourceReaction(config, dataSourceRegistryState)
+	}), [dataSourceRegistryState, scopeProp]);
 	const handleSubmit = async () => {
 		await form.validate();
 		if (form.valid) await onSubmit(form.values);
@@ -5448,7 +4763,8 @@ function AutoFormInner({ schema: zodSchema, initialValues, onSubmit, overrides,
 		layout: formLayout,
 		children: [/* @__PURE__ */ jsx(JsonSchemaField, {
 			schema: formSchema,
-			components: fieldComponents
+			components: fieldComponents,
+			scope
 		}), showSubmitButton && /* @__PURE__ */ jsx("div", {
 			className: "flex justify-end gap-2 mt-6",
 			children: /* @__PURE__ */ jsx(Button, {
@@ -5466,6 +4782,7 @@ const AutoForm = forwardRef(AutoFormInner);
 //#region src/i18n/locale.ts
 const zhCN = {
 	toolbar: {
+		refresh: "刷新",
 		create: "新建",
 		import: "导入",
 		export: "导出",
@@ -5497,6 +4814,12 @@ const zhCN = {
 		confirm: "确认删除",
 		confirming: "删除中..."
 	},
+	bulkDeleteModal: {
+		title: "确认批量删除",
+		description: (count) => `此操作无法撤销。确定要删除选中的 ${count} 条记录吗？`,
+		cancel: "取消",
+		confirm: "确认删除"
+	},
 	importDialog: {
 		title: "导入数据",
 		uploadDescription: "上传 CSV 或 JSON 文件以批量导入数据",
@@ -5526,6 +4849,7 @@ const zhCN = {
 };
 const enUS = {
 	toolbar: {
+		refresh: "Refresh",
 		create: "New",
 		import: "Import",
 		export: "Export",
@@ -5557,6 +4881,12 @@ const enUS = {
 		confirm: "Delete",
 		confirming: "Deleting..."
 	},
+	bulkDeleteModal: {
+		title: "Confirm Bulk Delete",
+		description: (count) => `This action cannot be undone. Are you sure you want to delete ${count} selected ${count === 1 ? "record" : "records"}?`,
+		cancel: "Cancel",
+		confirm: "Delete"
+	},
 	importDialog: {
 		title: "Import Data",
 		uploadDescription: "Upload a CSV or JSON file to bulk import data",
@@ -5586,6 +4916,7 @@ const enUS = {
 };
 const jaJP = {
 	toolbar: {
+		refresh: "更新",
 		create: "新規作成",
 		import: "インポート",
 		export: "エクスポート",
@@ -5617,6 +4948,12 @@ const jaJP = {
 		confirm: "削除する",
 		confirming: "削除中..."
 	},
+	bulkDeleteModal: {
+		title: "一括削除の確認",
+		description: (count) => `この操作は元に戻せません。選択した${count}件のレコードを削除してもよろしいですか？`,
+		cancel: "キャンセル",
+		confirm: "削除する"
+	},
 	importDialog: {
 		title: "データのインポート",
 		uploadDescription: "CSVまたはJSONファイルをアップロードして一括インポート",
@@ -5646,6 +4983,7 @@ const jaJP = {
 };
 const koKR = {
 	toolbar: {
+		refresh: "새로고침",
 		create: "새로 만들기",
 		import: "가져오기",
 		export: "내보내기",
@@ -5677,6 +5015,12 @@ const koKR = {
 		confirm: "삭제",
 		confirming: "삭제 중..."
 	},
+	bulkDeleteModal: {
+		title: "일괄 삭제 확인",
+		description: (count) => `이 작업은 취소할 수 없습니다. 선택한 ${count}개 레코드를 삭제하시겠습니까?`,
+		cancel: "취소",
+		confirm: "삭제"
+	},
 	importDialog: {
 		title: "데이터 가져오기",
 		uploadDescription: "CSV 또는 JSON 파일을 업로드하여 일괄 가져오기",
@@ -5706,6 +5050,7 @@ const koKR = {
 };
 const frFR = {
 	toolbar: {
+		refresh: "Actualiser",
 		create: "Nouveau",
 		import: "Importer",
 		export: "Exporter",
@@ -5737,6 +5082,12 @@ const frFR = {
 		confirm: "Supprimer",
 		confirming: "Suppression..."
 	},
+	bulkDeleteModal: {
+		title: "Confirmer la suppression en masse",
+		description: (count) => `Cette action est irréversible. Voulez-vous vraiment supprimer les ${count} enregistrements sélectionnés ?`,
+		cancel: "Annuler",
+		confirm: "Supprimer"
+	},
 	importDialog: {
 		title: "Importer des données",
 		uploadDescription: "Téléchargez un fichier CSV ou JSON pour importer en masse",
@@ -5766,6 +5117,7 @@ const frFR = {
 };
 const deDE = {
 	toolbar: {
+		refresh: "Aktualisieren",
 		create: "Neu",
 		import: "Importieren",
 		export: "Exportieren",
@@ -5797,6 +5149,12 @@ const deDE = {
 		confirm: "Löschen",
 		confirming: "Wird gelöscht..."
 	},
+	bulkDeleteModal: {
+		title: "Mehrfaches Löschen bestätigen",
+		description: (count) => `Diese Aktion kann nicht rückgängig gemacht werden. Möchten Sie die ${count} ausgewählten Datensätze wirklich löschen?`,
+		cancel: "Abbrechen",
+		confirm: "Löschen"
+	},
 	importDialog: {
 		title: "Daten importieren",
 		uploadDescription: "CSV- oder JSON-Datei hochladen, um Daten massenweise zu importieren",
@@ -5826,6 +5184,7 @@ const deDE = {
 };
 const esES = {
 	toolbar: {
+		refresh: "Actualizar",
 		create: "Nuevo",
 		import: "Importar",
 		export: "Exportar",
@@ -5857,6 +5216,12 @@ const esES = {
 		confirm: "Eliminar",
 		confirming: "Eliminando..."
 	},
+	bulkDeleteModal: {
+		title: "Confirmar eliminación masiva",
+		description: (count) => `Esta acción no se puede deshacer. ¿Está seguro de que desea eliminar los ${count} registros seleccionados?`,
+		cancel: "Cancelar",
+		confirm: "Eliminar"
+	},
 	importDialog: {
 		title: "Importar datos",
 		uploadDescription: "Suba un archivo CSV o JSON para importar datos de forma masiva",
@@ -5916,7 +5281,7 @@ function resolveLocale(localeProp) {
 
 //#endregion
 //#region src/components/auto-crud/crud-form-modal.tsx
-function CrudFormModal({ open, onOpenChange, mode, schema, initialValues, onSubmit, loading = false, variant = "dialog", overrides, title, locale = zhCN.formModal, gridColumns, labelAlign, labelWidth, className }) {
+function CrudFormModal({ open, onOpenChange, mode, schema, initialValues, onSubmit, loading = false, variant = "dialog", overrides, scope, title, locale = zhCN.formModal, gridColumns, labelAlign, labelWidth, className }) {
 	const defaultTitle = mode === "create" ? locale.createTitle : locale.editTitle;
 	const formRef = useRef(null);
 	const handleSubmit = async () => {
@@ -5950,6 +5315,7 @@ function CrudFormModal({ open, onOpenChange, mode, schema, initialValues, onSubm
 			loading,
 			onSubmit,
 			overrides,
+			scope,
 			gridColumns,
 			labelAlign,
 			labelWidth,
@@ -6028,7 +5394,7 @@ function ImportDialog({ open, onOpenChange, onImport, columns = [], title, local
 		open,
 		onOpenChange: handleOpenChange,
 		children: /* @__PURE__ */ jsxs(DialogContent, {
-			className: "sm:max-w-[600px]",
+			className: "w-[calc(100vw-2rem)] sm:max-w-5xl",
 			children: [/* @__PURE__ */ jsxs(DialogHeader, { children: [/* @__PURE__ */ jsx(DialogTitle, { children: title ?? locale.title }), /* @__PURE__ */ jsxs(DialogDescription, { children: [
 				step === "upload" && locale.uploadDescription,
 				step === "preview" && locale.previewDescription(parsedData?.rows.length ?? 0),
@@ -6089,41 +5455,30 @@ function ImportDialog({ open, onOpenChange, onImport, columns = [], title, local
 						/* @__PURE__ */ jsx("div", {
 							className: "rounded-md border",
 							children: /* @__PURE__ */ jsx("div", {
-								className: "max-h-[300px] overflow-auto",
+								className: "max-h-[45vh] overflow-auto",
 								children: /* @__PURE__ */ jsxs("table", {
-									className: "w-full text-sm",
+									className: "min-w-max text-sm",
 									children: [/* @__PURE__ */ jsx("thead", {
 										className: "sticky top-0 bg-muted",
-										children: /* @__PURE__ */ jsxs("tr", { children: [
-											/* @__PURE__ */ jsx("th", {
-												className: "px-3 py-2 text-left font-medium text-muted-foreground",
-												children: "#"
-											}),
-											parsedData.headers.slice(0, 6).map((h) => /* @__PURE__ */ jsx("th", {
-												className: "px-3 py-2 text-left font-medium text-muted-foreground",
-												children: h
-											}, h)),
-											parsedData.headers.length > 6 && /* @__PURE__ */ jsx("th", {
-												className: "px-3 py-2 text-left font-medium text-muted-foreground",
-												children: locale.moreColumns(parsedData.headers.length - 6)
-											})
-										] })
+										children: /* @__PURE__ */ jsxs("tr", { children: [/* @__PURE__ */ jsx("th", {
+											className: "sticky left-0 z-10 bg-muted px-3 py-2 text-left font-medium text-muted-foreground",
+											children: "#"
+										}), parsedData.headers.map((h) => /* @__PURE__ */ jsx("th", {
+											className: "max-w-[180px] whitespace-nowrap px-3 py-2 text-left font-medium text-muted-foreground",
+											children: h
+										}, h))] })
 									}), /* @__PURE__ */ jsx("tbody", { children: parsedData.rows.slice(0, 10).map((row, i) => /* @__PURE__ */ jsxs("tr", {
 										className: "border-t",
-										children: [
-											/* @__PURE__ */ jsx("td", {
-												className: "px-3 py-2 text-muted-foreground",
-												children: i + 1
-											}),
-											parsedData.headers.slice(0, 6).map((h) => /* @__PURE__ */ jsx("td", {
-												className: "px-3 py-2 max-w-[150px] truncate",
+										children: [/* @__PURE__ */ jsx("td", {
+											className: "sticky left-0 bg-background px-3 py-2 text-muted-foreground",
+											children: i + 1
+										}), parsedData.headers.map((h) => /* @__PURE__ */ jsx("td", {
+											className: "max-w-[180px] truncate px-3 py-2",
+											children: /* @__PURE__ */ jsx("span", {
+												title: String(row[h] ?? ""),
 												children: String(row[h] ?? "")
-											}, h)),
-											parsedData.headers.length > 6 && /* @__PURE__ */ jsx("td", {
-												className: "px-3 py-2 text-muted-foreground",
-												children: "..."
 											})
-										]
+										}, h))]
 									}, i)) })]
 								})
 							})
@@ -6255,12 +5610,12 @@ const listeners = /* @__PURE__ */ new Set();
 let seq = 0;
 let version = 0;
 let notifyScheduled = false;
-function actionKey(registration, action, index$1) {
+function actionKey(registration, action$1, index$1) {
 	return [
 		registration.ownerId,
 		registration.targetId,
 		registration.zone,
-		action.id ?? action.type,
+		action$1.id ?? action$1.type,
 		index$1
 	].join(":");
 }
@@ -6308,15 +5663,15 @@ function sortEntries(left, right) {
 	if (ownerDiff !== 0) return ownerDiff;
 	return left.seq - right.seq;
 }
-function withoutRegistryMeta(action) {
-	const { id, order,...rest } = action;
+function withoutRegistryMeta(action$1) {
+	const { id, order,...rest } = action$1;
 	return rest;
 }
-function isCustomAction$1(action) {
-	return action.type === "custom";
+function isCustomAction$1(action$1) {
+	return action$1.type === "custom";
 }
 function resolveActions$1(targetId, zone, ownerActions) {
-	const baseActions = ownerActions.filter((action) => !action.hidden).map((action) => withoutRegistryMeta(action));
+	const baseActions = ownerActions.filter((action$1) => !action$1.hidden).map((action$1) => withoutRegistryMeta(action$1));
 	if (!targetId) return baseActions;
 	const registered = crudActions.get(targetId, zone);
 	if (registered.length === 0) return baseActions;
@@ -6324,20 +5679,20 @@ function resolveActions$1(targetId, zone, ownerActions) {
 	const startCustomActions = [];
 	const endCustomActions = [];
 	for (const entry of registered) {
-		const action = entry.action;
-		if (action.hidden && isCustomAction$1(action)) continue;
-		if (isCustomAction$1(action)) {
-			const custom = withoutRegistryMeta(action);
+		const action$1 = entry.action;
+		if (action$1.hidden && isCustomAction$1(action$1)) continue;
+		if (isCustomAction$1(action$1)) {
+			const custom = withoutRegistryMeta(action$1);
 			if (custom.position === "start") startCustomActions.push(custom);
 			else endCustomActions.push(custom);
 			continue;
 		}
-		const existingIndex = nextActions.findIndex((item) => item.type === action.type);
-		if (action.hidden) {
+		const existingIndex = nextActions.findIndex((item) => item.type === action$1.type);
+		if (action$1.hidden) {
 			if (existingIndex >= 0) nextActions.splice(existingIndex, 1);
 			continue;
 		}
-		const builtin = withoutRegistryMeta(action);
+		const builtin = withoutRegistryMeta(action$1);
 		if (existingIndex >= 0) nextActions[existingIndex] = {
 			...nextActions[existingIndex],
 			...builtin
@@ -6356,14 +5711,14 @@ const crudActions = {
 			targetId: registration.targetId,
 			zone: registration.zone
 		}, false);
-		registration.actions.forEach((action, index$1) => {
-			const key = actionKey(registration, action, index$1);
+		registration.actions.forEach((action$1, index$1) => {
+			const key = actionKey(registration, action$1, index$1);
 			const entry = {
 				targetId: registration.targetId,
 				zone: registration.zone,
 				ownerId: registration.ownerId,
-				action,
-				order: action.order ?? 100,
+				action: action$1,
+				order: action$1.order ?? 100,
 				seq: seq++
 			};
 			entries.set(key, entry);
@@ -6402,6 +5757,7 @@ function setToolbarResolver(resolver) {
 }
 function getDefaultToolbarActions() {
 	return [
+		{ type: "refresh" },
 		{ type: "import" },
 		{ type: "export" },
 		{ type: "create" }
@@ -6418,8 +5774,8 @@ function getDefaultRowActions() {
 function getDefaultBatchActions() {
 	return [{ type: "batchUpdate" }, { type: "delete" }];
 }
-function isCustomAction(action) {
-	return action.type === "custom";
+function isCustomAction(action$1) {
+	return action$1.type === "custom";
 }
 function resolveOwnerActions(config, defaults) {
 	const resolved = typeof config === "function" ? config([...defaults]) : config;
@@ -6467,7 +5823,7 @@ function haveSameRowSelection(left, right, idKey) {
 	return left.every((row, index$1) => row === right[index$1]);
 }
 function readCreateAction(actions) {
-	return actions.find((action) => action.type === "create");
+	return actions.find((action$1) => action$1.type === "create");
 }
 function resolveToolbarActionsWithResolver(targetId, ownerActions, context) {
 	const resolver = autoCrudToolbarResolver;
@@ -6519,6 +5875,15 @@ function toBatchOptions(options) {
 		value
 	}));
 }
+const POPUP_SCROLL_LOAD_THRESHOLD = 24;
+function isNearPopupScrollBottom(target) {
+	return target.scrollHeight - target.scrollTop - target.clientHeight <= POPUP_SCROLL_LOAD_THRESHOLD;
+}
+function mergeFilterOptions(current, incoming) {
+	const optionsByValue = new Map((current ?? []).map((option) => [option.value, option]));
+	for (const option of incoming) optionsByValue.set(option.value, option);
+	return Array.from(optionsByValue.values());
+}
 function getFilterDataSource(config) {
 	if (config.filter && typeof config.filter === "object") return config.filter.dataSource ?? config.dataSource;
 	return config.dataSource;
@@ -6542,7 +5907,20 @@ function useCrudActionsVersion() {
 }
 function useDynamicFilterOptions(fields) {
 	const registryVersion = useRegistryVersion(dataSources.subscribe);
+	const [searchValues, setSearchValues] = React.useState({});
+	const [hasMoreByField, setHasMoreByField] = React.useState({});
+	const [labelOptionsByField, setLabelOptionsByField] = React.useState({});
+	const [loadingByField, setLoadingByField] = React.useState({});
 	const [optionsByField, setOptionsByField] = React.useState({});
+	const controllersRef = React.useRef({});
+	const hasMoreByFieldRef = React.useRef({});
+	const loadingByFieldRef = React.useRef({});
+	const optionsByFieldRef = React.useRef({});
+	const pageByFieldRef = React.useRef({});
+	const requestVersionsRef = React.useRef({});
+	const searchValuesRef = React.useRef({});
+	const sourceEntriesByFieldRef = React.useRef({});
+	const timersRef = React.useRef({});
 	const sourceEntries = React.useMemo(() => {
 		if (!fields) return [];
 		return Object.entries(fields).flatMap(([field, config]) => {
@@ -6554,36 +5932,185 @@ function useDynamicFilterOptions(fields) {
 			}] : [];
 		});
 	}, [fields]);
+	const sourceEntriesByField = React.useMemo(() => Object.fromEntries(sourceEntries.map(({ field, source }) => [field, source])), [sourceEntries]);
 	React.useEffect(() => {
-		if (sourceEntries.length === 0) {
-			setOptionsByField({});
+		searchValuesRef.current = searchValues;
+	}, [searchValues]);
+	React.useEffect(() => {
+		sourceEntriesByFieldRef.current = sourceEntriesByField;
+	}, [sourceEntriesByField]);
+	const registeredByField = React.useMemo(() => Object.fromEntries(sourceEntries.map(({ field, source }) => [field, dataSources.get(source.key) !== void 0])), [sourceEntries, registryVersion]);
+	const searchableByField = React.useMemo(() => Object.fromEntries(sourceEntries.map(({ field, source }) => [field, dataSources.get(source.key)?.search === true])), [sourceEntries, registryVersion]);
+	const setFieldState = React.useCallback((setter, ref, field, value) => {
+		ref.current = {
+			...ref.current,
+			[field]: value
+		};
+		setter(ref.current);
+	}, []);
+	const removeInactiveFieldState = React.useCallback((setter, ref, activeFields) => {
+		const nextEntries = Object.entries(ref.current).filter(([field]) => activeFields.has(field));
+		if (nextEntries.length === Object.keys(ref.current).length) return;
+		ref.current = Object.fromEntries(nextEntries);
+		setter(ref.current);
+	}, []);
+	const setFieldOptions = React.useCallback((field, options) => {
+		optionsByFieldRef.current = {
+			...optionsByFieldRef.current,
+			[field]: options
+		};
+		setOptionsByField(optionsByFieldRef.current);
+	}, []);
+	const setFieldLoading = React.useCallback((field, loading) => {
+		setFieldState(setLoadingByField, loadingByFieldRef, field, loading);
+	}, [setFieldState]);
+	const setFieldHasMore = React.useCallback((field, hasMore) => {
+		setFieldState(setHasMoreByField, hasMoreByFieldRef, field, hasMore);
+	}, [setFieldState]);
+	const clearFieldRequest = React.useCallback((field) => {
+		const timer = timersRef.current[field];
+		if (timer) clearTimeout(timer);
+		timersRef.current[field] = void 0;
+		controllersRef.current[field]?.abort();
+		controllersRef.current[field] = void 0;
+	}, []);
+	const resetField = React.useCallback((field, { clearLabels = false } = {}) => {
+		clearFieldRequest(field);
+		setFieldOptions(field, []);
+		setFieldLoading(field, false);
+		setFieldHasMore(field, false);
+		pageByFieldRef.current = {
+			...pageByFieldRef.current,
+			[field]: 0
+		};
+		if (clearLabels) setLabelOptionsByField((current) => {
+			const { [field]: _,...rest } = current;
+			return rest;
+		});
+	}, [
+		clearFieldRequest,
+		setFieldHasMore,
+		setFieldLoading,
+		setFieldOptions
+	]);
+	const loadFieldOptions = React.useCallback((field, append = false) => {
+		if (append) {
+			if (loadingByFieldRef.current[field] || !hasMoreByFieldRef.current[field]) return;
+		}
+		const source = sourceEntriesByFieldRef.current[field];
+		const entry = source ? dataSources.get(source.key) : void 0;
+		if (!source || !entry) {
+			resetField(field);
 			return;
 		}
-		let active = true;
+		const requestVersion = (requestVersionsRef.current[field] ?? 0) + 1;
+		requestVersionsRef.current = {
+			...requestVersionsRef.current,
+			[field]: requestVersion
+		};
+		clearFieldRequest(field);
 		const controller = typeof AbortController === "undefined" ? void 0 : new AbortController();
-		Promise.all(sourceEntries.map(async ({ field, source }) => {
-			const entry = dataSources.get(source.key);
-			if (!entry) return [field, []];
-			try {
-				return [field, normalizeOptions(await entry.load({
-					field,
-					values: {},
-					signal: controller?.signal
-				}))];
-			} catch (error) {
-				if (!controller?.signal.aborted) console.warn(`[AutoCrud] Failed to load filter data source "${source.key}".`, error);
-				return [field, []];
-			}
-		})).then((entries$1) => {
-			if (!active) return;
-			setOptionsByField(Object.fromEntries(entries$1));
-		});
-		return () => {
-			active = false;
-			controller?.abort();
+		controllersRef.current[field] = controller;
+		const search = entry.search ? searchValuesRef.current[field] ?? "" : void 0;
+		const page = entry.loadMore ? append ? (pageByFieldRef.current[field] ?? 0) + 1 : 1 : void 0;
+		setFieldLoading(field, true);
+		if (!append) setFieldHasMore(field, false);
+		const timer = setTimeout(() => {
+			Promise.resolve(entry.load({
+				field,
+				page,
+				pageSize: entry.loadMore ? entry.pageSize : void 0,
+				search,
+				values: {},
+				signal: controller?.signal
+			})).then((result) => {
+				if (requestVersionsRef.current[field] !== requestVersion || controller?.signal.aborted) return;
+				const options = normalizeOptions(result);
+				const nextOptions = append ? mergeFilterOptions(optionsByFieldRef.current[field], options) : options;
+				const hasMore = normalizeHasMore(result);
+				setFieldOptions(field, nextOptions);
+				setLabelOptionsByField((current) => ({
+					...current,
+					[field]: mergeFilterOptions(current[field], nextOptions)
+				}));
+				pageByFieldRef.current = {
+					...pageByFieldRef.current,
+					[field]: page ?? 0
+				};
+				setFieldHasMore(field, hasMore);
+				setFieldLoading(field, false);
+			}, (error) => {
+				if (controller?.signal.aborted) return;
+				console.warn(`[AutoCrud] Failed to load filter data source "${source.key}".`, error);
+				if (!append) {
+					setFieldOptions(field, []);
+					setFieldHasMore(field, false);
+					pageByFieldRef.current = {
+						...pageByFieldRef.current,
+						[field]: 0
+					};
+				}
+				setFieldLoading(field, false);
+			});
+		}, !append && entry.search ? entry.debounceMs : 0);
+		timersRef.current[field] = timer;
+	}, [
+		clearFieldRequest,
+		resetField,
+		setFieldHasMore,
+		setFieldLoading,
+		setFieldOptions
+	]);
+	const setSearchValue = React.useCallback((field, value) => {
+		searchValuesRef.current = {
+			...searchValuesRef.current,
+			[field]: value
 		};
-	}, [sourceEntries, registryVersion]);
-	return optionsByField;
+		setSearchValues((current) => current[field] === value ? current : {
+			...current,
+			[field]: value
+		});
+	}, []);
+	React.useEffect(() => {
+		if (sourceEntries.length === 0) {
+			hasMoreByFieldRef.current = {};
+			loadingByFieldRef.current = {};
+			optionsByFieldRef.current = {};
+			pageByFieldRef.current = {};
+			Object.keys(controllersRef.current).forEach(clearFieldRequest);
+			setHasMoreByField({});
+			setLoadingByField({});
+			setOptionsByField({});
+			return;
+		}
+		const activeFields = new Set(sourceEntries.map(({ field }) => field));
+		removeInactiveFieldState(setHasMoreByField, hasMoreByFieldRef, activeFields);
+		removeInactiveFieldState(setLoadingByField, loadingByFieldRef, activeFields);
+		removeInactiveFieldState(setOptionsByField, optionsByFieldRef, activeFields);
+		for (const field of Object.keys(controllersRef.current)) if (!activeFields.has(field)) clearFieldRequest(field);
+		for (const { field } of sourceEntries) loadFieldOptions(field);
+	}, [
+		clearFieldRequest,
+		loadFieldOptions,
+		removeInactiveFieldState,
+		sourceEntries,
+		registryVersion,
+		searchValues
+	]);
+	React.useEffect(() => () => {
+		for (const field of Object.keys(controllersRef.current)) clearFieldRequest(field);
+	}, [clearFieldRequest]);
+	return {
+		hasMoreByField,
+		labelOptionsByField,
+		loadingByField,
+		optionsByField,
+		registeredByField,
+		searchValues,
+		searchableByField,
+		loadMore: (field) => loadFieldOptions(field, true),
+		setSearchValue
+	};
 }
 function getOptionLabel(value, options) {
 	const stringValue = String(value);
@@ -6593,12 +6120,15 @@ function getOptionLabel(value, options) {
 * 从统一配置生成表格 overrides
 * 当 filter 配置存在时，合并到 meta 中（不影响列隐藏）
 */
-function buildTableOverrides(fields, legacyOverrides, dynamicFilterOptions) {
+function buildTableOverrides(fields, legacyOverrides, dynamicFilterState) {
 	const result = { ...legacyOverrides };
 	if (fields) for (const [key, config] of Object.entries(fields)) {
 		const fieldOptions = normalizeFieldOptions(config.enum);
 		const tableOptions = toTableOptions(fieldOptions);
-		const dynamicOptions = !fieldOptions ? toTableOptions(normalizeFieldOptions(dynamicFilterOptions?.[key])) : void 0;
+		const filterDataSourceRegistered = dynamicFilterState?.registeredByField[key];
+		const filterDataSourceSearchable = dynamicFilterState?.searchableByField[key];
+		const currentDynamicOptions = !fieldOptions && filterDataSourceRegistered ? toTableOptions(dynamicFilterState?.optionsByField[key] ?? []) : void 0;
+		const dynamicOptions = !fieldOptions && filterDataSourceRegistered ? toTableOptions(dynamicFilterState?.labelOptionsByField[key] ?? dynamicFilterState?.optionsByField[key] ?? []) : void 0;
 		const tableMeta = config.table !== false && typeof config.table === "object" ? config.table.meta : void 0;
 		const fieldEnumMeta = tableOptions ? {
 			options: tableOptions,
@@ -6606,7 +6136,19 @@ function buildTableOverrides(fields, legacyOverrides, dynamicFilterOptions) {
 		} : void 0;
 		const fieldDataSourceMeta = dynamicOptions ? {
 			options: dynamicOptions,
-			variant: "multiSelect"
+			autoCrudFilterOptions: currentDynamicOptions ?? dynamicOptions,
+			autoCrudFilterHasMore: dynamicFilterState?.hasMoreByField[key] ?? false,
+			autoCrudFilterLoading: dynamicFilterState?.loadingByField[key] ?? false,
+			autoCrudFilterOnPopupScroll: (event) => {
+				if (!isNearPopupScrollBottom(event.currentTarget)) return;
+				dynamicFilterState?.loadMore(key);
+			},
+			variant: "multiSelect",
+			...filterDataSourceSearchable ? {
+				autoCrudFilterSearchValue: dynamicFilterState?.searchValues[key] ?? "",
+				autoCrudFilterOnSearch: (value) => dynamicFilterState?.setSearchValue(key, value),
+				autoCrudFilterShouldFilter: false
+			} : void 0
 		} : void 0;
 		let filterMeta;
 		if (config.filter && typeof config.filter === "object") {
@@ -6658,46 +6200,6 @@ function buildTableOverrides(fields, legacyOverrides, dynamicFilterOptions) {
 	return result;
 }
 /**
-* 从统一配置生成表单 overrides
-* Critical #2: 支持 denyFields 隐藏敏感字段
-*/
-function buildFormOverrides(fields, legacyOverrides, denyFields) {
-	const result = { ...legacyOverrides };
-	if (denyFields) for (const field of denyFields) result[field] = {
-		...result[field],
-		"x-hidden": true
-	};
-	if (fields) for (const [key, config] of Object.entries(fields)) {
-		const fieldOptions = normalizeFieldOptions((config.form && typeof config.form === "object" ? config.form : void 0)?.enum) ?? normalizeFieldOptions(config.enum);
-		const fieldDataSource = fieldOptions || !config.dataSource ? void 0 : normalizeDataSourceConfig(config.dataSource);
-		if (config.label) result[key] = {
-			...result[key],
-			title: config.label
-		};
-		if (config.hidden) result[key] = {
-			...result[key],
-			"x-hidden": true
-		};
-		if (fieldOptions) result[key] = {
-			...result[key],
-			enum: fieldOptions
-		};
-		if (fieldDataSource) result[key] = {
-			...result[key],
-			"x-data-source": config.dataSource
-		};
-		if (config.form === false) result[key] = {
-			...result[key],
-			"x-hidden": true
-		};
-		else if (config.form && typeof config.form === "object") result[key] = {
-			...result[key],
-			...config.form
-		};
-	}
-	return result;
-}
-/**
 * 从统一配置生成隐藏列列表
 */
 function buildHiddenColumns(fields, legacyHidden, denyFields) {
@@ -7004,6 +6506,8 @@ function AutoCrudTable({ id, title, description, schema, resource, fields, table
 		rowIds,
 		selectedRowIds,
 		selectedCount,
+		isRefreshing: resource.tableData.isFetching,
+		...resource.handlers.refresh ? { refresh: resource.handlers.refresh } : {},
 		...toolbarOpenCreate ? { openCreate: toolbarOpenCreate } : {}
 	}), [
 		id,
@@ -7011,6 +6515,8 @@ function AutoCrudTable({ id, title, description, schema, resource, fields, table
 		rowIds,
 		selectedRowIds,
 		selectedCount,
+		resource.handlers.refresh,
+		resource.tableData.isFetching,
 		toolbarOpenCreate
 	]);
 	const resolvedToolbarActions = resolveToolbarActionsWithResolver(id, registryToolbarActions, toolbarContext);
@@ -7124,6 +6630,17 @@ function AutoCrudTable({ id, title, description, schema, resource, fields, table
 				className: "flex items-center justify-end gap-4",
 				children: (() => {
 					const renderBuiltinButton = (type, overrides) => {
+						if (type === "refresh") {
+							const onRefresh = overrides?.onClick ?? resource.handlers.refresh;
+							if (!onRefresh) return null;
+							return /* @__PURE__ */ jsxs(Button, {
+								variant: "outline",
+								size: "sm",
+								onClick: onRefresh,
+								disabled: resource.tableData.isFetching,
+								children: [/* @__PURE__ */ jsx(RefreshCw, { className: resource.tableData.isFetching ? "mr-2 h-4 w-4 animate-spin" : "mr-2 h-4 w-4" }), overrides?.label ?? locale.toolbar.refresh]
+							}, "refresh");
+						}
 						if (type === "import" && canImport) return /* @__PURE__ */ jsxs(Button, {
 							variant: "outline",
 							size: "sm",
@@ -7152,6 +6669,7 @@ function AutoCrudTable({ id, title, description, schema, resource, fields, table
 							className: "flex items-center gap-2",
 							children: [
 								startNodes,
+								renderBuiltinButton("refresh"),
 								renderBuiltinButton("import"),
 								renderBuiltinButton("export"),
 								renderBuiltinButton("create"),
@@ -7161,13 +6679,20 @@ function AutoCrudTable({ id, title, description, schema, resource, fields, table
 					}
 					return /* @__PURE__ */ jsx("div", {
 						className: "flex items-center gap-2",
-						children: resolvedToolbarActions.map((action, index$1) => {
-							if (action.type === "custom") return /* @__PURE__ */ jsx(React.Fragment, { children: renderToolbarComponent(action.component) }, `custom-${index$1}`);
-							if (!(action.type === "import" ? canImport : action.type === "export" ? canExport : can.create)) return null;
-							if (action.component) return /* @__PURE__ */ jsx(React.Fragment, { children: renderToolbarComponent(action.component) }, action.type);
-							return renderBuiltinButton(action.type, {
-								onClick: action.onClick,
-								label: action.label
+						children: resolvedToolbarActions.map((action$1, index$1) => {
+							if (action$1.type === "custom") return /* @__PURE__ */ jsx(React.Fragment, { children: renderToolbarComponent(action$1.component) }, `custom-${index$1}`);
+							if (!(() => {
+								switch (action$1.type) {
+									case "refresh": return !!(resource.handlers.refresh || action$1.onClick || action$1.component);
+									case "import": return canImport;
+									case "export": return canExport;
+									case "create": return can.create;
+								}
+							})()) return null;
+							if (action$1.component) return /* @__PURE__ */ jsx(React.Fragment, { children: renderToolbarComponent(action$1.component) }, action$1.type);
+							return renderBuiltinButton(action$1.type, {
+								onClick: action$1.onClick,
+								label: action$1.label
 							});
 						})
 					});
@@ -7186,6 +6711,7 @@ function AutoCrudTable({ id, title, description, schema, resource, fields, table
 				onUpdateSelected: can.update ? resource.handlers.updateMany : void 0,
 				batchUpdateFields: can.update ? batchFields : void 0,
 				actionBarActions: registryBatchActions,
+				deleteConfirmation: locale.bulkDeleteModal,
 				enableExport: canExport,
 				showDefaultExport: false,
 				initialSorting: tableConfig?.defaultSort,
@@ -7205,6 +6731,7 @@ function AutoCrudTable({ id, title, description, schema, resource, fields, table
 				loading: resource.mutations.isCreating || resource.mutations.isUpdating,
 				variant: resource.modal.variant,
 				overrides: formOverrides,
+				scope: formConfig?.scope,
 				locale: locale.formModal,
 				gridColumns: formConfig?.columns,
 				className: formConfig?.className
@@ -7216,7 +6743,7 @@ function AutoCrudTable({ id, title, description, schema, resource, fields, table
 				data: resource.modal.selected,
 				schema: resolvedSchema,
 				fields: resolvedFields,
-				dynamicOptions: dynamicFilterOptions,
+				dynamicOptions: dynamicFilterOptions.optionsByField,
 				denyFields,
 				locale
 			}),
@@ -7339,15 +6866,29 @@ function DataTableAdvancedToolbar({ table, children, className,...props }) {
 function DataTableFacetedFilter({ column, title, options, multiple }) {
 	const columnFilterValue = column?.getFilterValue();
 	const selectedValues = Array.isArray(columnFilterValue) ? columnFilterValue.filter((value) => typeof value === "string") : [];
+	const currentOptions = column?.columnDef.meta?.autoCrudFilterOptions ?? options;
+	const currentOptionValues = new Set(currentOptions.map((option) => option.value));
+	const selectedOptionValues = new Set(selectedValues);
+	const comboboxOptions = currentOptions === options ? currentOptions : [...options.filter((option) => selectedOptionValues.has(option.value) && !currentOptionValues.has(option.value)), ...currentOptions];
 	const onChange = (nextValues) => {
 		column?.setFilterValue(nextValues.length ? nextValues : void 0);
 	};
-	return /* @__PURE__ */ jsx(MultiCombobox, {
-		value: selectedValues,
-		onChange,
-		options,
-		selectionMode: multiple ? "multiple" : "single",
+	const onSelectChange = (nextValue) => {
+		onChange(Array.isArray(nextValue) ? nextValue : nextValue ? [nextValue] : []);
+	};
+	return /* @__PURE__ */ jsx(Select$2, {
+		mode: "searchable",
+		multiple: Boolean(multiple),
+		value: multiple ? selectedValues : selectedValues[0] ?? "",
+		onChange: onSelectChange,
+		options: comboboxOptions,
 		searchPlaceholder: title,
+		hasMore: column?.columnDef.meta?.autoCrudFilterHasMore,
+		loading: column?.columnDef.meta?.autoCrudFilterLoading,
+		searchValue: column?.columnDef.meta?.autoCrudFilterSearchValue,
+		shouldFilter: column?.columnDef.meta?.autoCrudFilterShouldFilter,
+		onPopupScroll: column?.columnDef.meta?.autoCrudFilterOnPopupScroll,
+		onSearch: column?.columnDef.meta?.autoCrudFilterOnSearch,
 		contentClassName: "w-50",
 		matchTriggerWidth: false,
 		clearText: "Clear filters",
@@ -7926,8 +7467,8 @@ function readMetadataFields(fields) {
 /**
 * Modal 状态 Reducer
 */
-function modalReducer(state, action) {
-	switch (action.type) {
+function modalReducer(state, action$1) {
+	switch (action$1.type) {
 		case "OPEN_CREATE": return {
 			...state,
 			createOpen: true,
@@ -7938,22 +7479,22 @@ function modalReducer(state, action) {
 			...state,
 			createOpen: true,
 			selected: null,
-			copySource: action.payload
+			copySource: action$1.payload
 		};
 		case "OPEN_EDIT": return {
 			...state,
 			editOpen: true,
-			selected: action.payload
+			selected: action$1.payload
 		};
 		case "OPEN_DELETE": return {
 			...state,
 			deleteOpen: true,
-			selected: action.payload
+			selected: action$1.payload
 		};
 		case "OPEN_VIEW": return {
 			...state,
 			viewOpen: true,
-			selected: action.payload
+			selected: action$1.payload
 		};
 		case "CLOSE_ALL": return {
 			...state,
@@ -7966,7 +7507,7 @@ function modalReducer(state, action) {
 		};
 		case "SET_VARIANT": return {
 			...state,
-			variant: action.payload
+			variant: action$1.payload
 		};
 		default: return state;
 	}
@@ -8263,6 +7804,9 @@ function useAutoCrudResource({ router, schema, query: queryTransform, options =
 		queryInput
 	]);
 	const canExport = !!(exportFetcher || exportQuery);
+	const refresh = useCallback(async () => {
+		return listQuery.refetch();
+	}, [listQuery]);
 	return {
 		idKey,
 		tableData: {
@@ -8293,6 +7837,7 @@ function useAutoCrudResource({ router, schema, query: queryTransform, options =
 			deleteMany,
 			updateMany,
 			setVariant,
+			refresh,
 			import: importMutation ? handleImport : null,
 			export: canExport ? handleExport : null
 		}
@@ -8604,4 +8149,4 @@ function createMemoryDataSource(initialData = []) {
 }
 
 //#endregion
-export { AutoCrudTable, AutoForm, AutoTable, AutoTableActionBar, AutoTableSimpleFilters, CrudFormModal, DataTable, DataTableAdvancedToolbar, DataTableColumnHeader, DataTableFacetedFilter, DataTablePagination, DataTableToolbar, DataTableViewOptions, ExportDialog, ImportDialog, MultiCombobox, SchemaAdapter, cn, coerceRowValues, components, createActionsColumn, createEditFormSchema, createFormSchema, createMemoryDataSource, createSelectColumn, createTRPCDataSource, createTableSchema, crudActions, dataSources, dataToCSV, deDE, downloadCSVTemplate, enUS, esES, exportAllToCSV, exportTableToCSV, formComponents, formatDate, frFR, generateCSVTemplate, getUrlParams, humanize, jaJP, koKR, noopToastAdapter, normalizeDataSourceConfig, normalizeOptions, parseAsArrayOf, parseAsInteger, parseAsString, parseAsStringEnum, parseCSV, parseImportFile, parseJSON, parseZodField, resolveLocale, setSearchParams, setToolbarResolver, useAutoCrudResource, useDataTable, useQueryState, useQueryStates, useReadableFilters, useUrlState, useUrlStates, zhCN };
+export { AutoCrudTable, AutoForm, AutoTable, AutoTableActionBar, AutoTableSimpleFilters, CrudFormModal, DataTable, DataTableAdvancedToolbar, DataTableColumnHeader, DataTableFacetedFilter, DataTablePagination, DataTableToolbar, DataTableViewOptions, ExportDialog, ImportDialog, MultiCombobox, SchemaAdapter, Select, cn, coerceRowValues, components, createActionsColumn, createEditFormSchema, createFormSchema, createMemoryDataSource, createSelectColumn, createTRPCDataSource, createTableSchema, crudActions, dataSources, dataToCSV, deDE, downloadCSVTemplate, enUS, esES, exportAllToCSV, exportTableToCSV, formComponents, formatDate, frFR, generateCSVTemplate, getUrlParams, humanize, jaJP, koKR, noopToastAdapter, normalizeDataSourceConfig, normalizeOptions, parseAsArrayOf, parseAsInteger, parseAsString, parseAsStringEnum, parseCSV, parseImportFile, parseJSON, parseZodField, resolveLocale, setSearchParams, setToolbarResolver, useAutoCrudResource, useDataTable, useQueryState, useQueryStates, useReadableFilters, useUrlState, useUrlStates, zhCN };