@wordrhyme/auto-crud 0.10.0 → 1.0.1

package/dist/index.cjs

@@ -35,6 +35,8 @@ let tailwind_merge = require("tailwind-merge");
 tailwind_merge = __toESM(tailwind_merge);
 let react_jsx_runtime = require("react/jsx-runtime");
 react_jsx_runtime = __toESM(react_jsx_runtime);
+let nanoid = require("nanoid");
+nanoid = __toESM(nanoid);
 let __dnd_kit_core = require("@dnd-kit/core");
 __dnd_kit_core = __toESM(__dnd_kit_core);
 let __dnd_kit_modifiers = require("@dnd-kit/modifiers");
@@ -47,8 +49,6 @@ let __radix_ui_react_slot = require("@radix-ui/react-slot");
 __radix_ui_react_slot = __toESM(__radix_ui_react_slot);
 let react_dom = require("react-dom");
 react_dom = __toESM(react_dom);
-let nanoid = require("nanoid");
-nanoid = __toESM(nanoid);
 let __radix_ui_react_direction = require("@radix-ui/react-direction");
 __radix_ui_react_direction = __toESM(__radix_ui_react_direction);
 let zod = require("zod");
@@ -474,6 +474,104 @@ function DataTable({ table, actionBar, children, className,...props }) {
 	});
 }
 
+//#endregion
+//#region src/lib/id.ts
+const prefixes = {};
+function generateId(prefixOrOptions, inputOptions = {}) {
+	const finalOptions = typeof prefixOrOptions === "object" ? prefixOrOptions : inputOptions;
+	const prefix = typeof prefixOrOptions === "object" ? void 0 : prefixOrOptions;
+	const { length = 12, separator = "_" } = finalOptions;
+	const id = (0, nanoid.customAlphabet)("0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz", length)();
+	return prefix && prefix in prefixes ? `${prefixes[prefix]}${separator}${id}` : id;
+}
+
+//#endregion
+//#region src/lib/readable-filters.ts
+const OP_SUFFIX = "__op";
+const INDEX_SEPARATOR = "__";
+const RANGE_VARIANTS = new Set(["range", "dateRange"]);
+function getColumnId(column) {
+	if ("id" in column && column.id) return String(column.id);
+	if ("accessorKey" in column && column.accessorKey) return String(column.accessorKey);
+	return null;
+}
+function getColumnVariant(column) {
+	if ("columnDef" in column) return column.columnDef.meta?.variant;
+	return column.meta?.variant;
+}
+function splitKey(key) {
+	const match = key.match(/^(.*?)(?:__(\d+))?$/);
+	if (!match) return { base: key };
+	const index = match[2] ? Number(match[2]) : void 0;
+	return {
+		base: match[1] ?? key,
+		index
+	};
+}
+function isFilterKey(key, columnIds) {
+	const { base } = splitKey(key.endsWith(OP_SUFFIX) ? key.slice(0, -4) : key);
+	return columnIds.has(base);
+}
+function parseValueByVariant(value, variant) {
+	if (variant === "multiSelect") return value ? value.split(",").filter(Boolean) : [];
+	if (RANGE_VARIANTS.has(variant)) {
+		const parts = value.split(",");
+		return [parts[0] ?? "", parts[1] ?? ""];
+	}
+	if (variant === "select") return value.split(",").filter(Boolean)[0] ?? "";
+	return value;
+}
+function serializeValue(value, variant) {
+	if (Array.isArray(value)) {
+		if (RANGE_VARIANTS.has(variant)) return [value[0] ?? "", value[1] ?? ""].join(",");
+		return value.join(",");
+	}
+	return value;
+}
+function parseReadableFilters(params, columns) {
+	const columnsById = /* @__PURE__ */ new Map();
+	for (const column of columns) {
+		const id = getColumnId(column);
+		if (id) columnsById.set(id, column);
+	}
+	const filters = [];
+	for (const [key, rawValue] of params.entries()) {
+		if (key.endsWith(OP_SUFFIX)) continue;
+		const { base } = splitKey(key);
+		const column = columnsById.get(base);
+		if (!column) continue;
+		const variant = getColumnVariant(column) ?? "text";
+		const opKey = `${key}${OP_SUFFIX}`;
+		const operator = params.get(opKey) ?? getDefaultFilterOperator(variant);
+		const parsedValue = operator === "isEmpty" || operator === "isNotEmpty" ? "" : parseValueByVariant(rawValue, variant);
+		filters.push({
+			id: base,
+			value: parsedValue,
+			variant,
+			operator,
+			filterId: key || generateId({ length: 8 })
+		});
+	}
+	return filters;
+}
+function applyReadableFilters(params, columns, filters) {
+	const columnIds = new Set(columns.map((column) => getColumnId(column)).filter(Boolean));
+	for (const key of Array.from(params.keys())) if (isFilterKey(key, columnIds)) params.delete(key);
+	const counters = /* @__PURE__ */ new Map();
+	for (const filter of filters) {
+		const columnId = String(filter.id);
+		const count = (counters.get(columnId) ?? 0) + 1;
+		counters.set(columnId, count);
+		const key = count === 1 ? columnId : `${columnId}${INDEX_SEPARATOR}${count}`;
+		const variant = filter.variant ?? "text";
+		const value = serializeValue(filter.value, variant);
+		params.set(key, filter.operator === "isEmpty" || filter.operator === "isNotEmpty" ? "" : value);
+		const defaultOperator = getDefaultFilterOperator(variant);
+		if (filter.operator !== defaultOperator) params.set(`${key}${OP_SUFFIX}`, filter.operator);
+	}
+	return params;
+}
+
 //#endregion
 //#region src/hooks/use-url-state.ts
 const parseAsInteger = {
@@ -724,6 +822,54 @@ function useQueryStates(parsers, options = {}) {
 	}, [setValues])];
 }
 
+//#endregion
+//#region src/hooks/use-readable-filters.ts
+const URL_CHANGE_EVENT = "urlchange";
+function useReadableFilters(columns, options = {}) {
+	const { history = "replace", scroll = false } = options;
+	const columnSnapshot = react.useMemo(() => columns, [columns]);
+	const lastWrittenUrlRef = react.useRef("");
+	const filtersRef = react.useRef(null);
+	const [filters, setFilters] = react.useState(() => {
+		const initial = parseReadableFilters(getUrlParams(), columnSnapshot);
+		filtersRef.current = initial;
+		return initial;
+	});
+	react.useEffect(() => {
+		const handleUrlChange = () => {
+			if (window.location.search === lastWrittenUrlRef.current) return;
+			const next = parseReadableFilters(getUrlParams(), columnSnapshot);
+			filtersRef.current = next;
+			setFilters(next);
+		};
+		window.addEventListener("popstate", handleUrlChange);
+		window.addEventListener(URL_CHANGE_EVENT, handleUrlChange);
+		return () => {
+			window.removeEventListener("popstate", handleUrlChange);
+			window.removeEventListener(URL_CHANGE_EVENT, handleUrlChange);
+		};
+	}, [columnSnapshot]);
+	const writeToUrl = react.useCallback((next) => {
+		const params = getUrlParams();
+		applyReadableFilters(params, columnSnapshot, next);
+		setSearchParams(params, {
+			history,
+			scroll
+		});
+		lastWrittenUrlRef.current = `?${params.toString()}`;
+	}, [
+		columnSnapshot,
+		history,
+		scroll
+	]);
+	return [filters, react.useCallback((updater) => {
+		const next = typeof updater === "function" ? updater(filtersRef.current) : updater;
+		filtersRef.current = next;
+		setFilters(next);
+		writeToUrl(next);
+	}, [writeToUrl])];
+}
+
 //#endregion
 //#region src/components/data-table/data-table-range-filter.tsx
 function DataTableRangeFilter({ filter, column, inputId, onFilterUpdate, className,...props }) {
@@ -1291,159 +1437,6 @@ function formatDate(date, opts = {}) {
 	}
 }
 
-//#endregion
-//#region src/lib/id.ts
-const prefixes = {};
-function generateId(prefixOrOptions, inputOptions = {}) {
-	const finalOptions = typeof prefixOrOptions === "object" ? prefixOrOptions : inputOptions;
-	const prefix = typeof prefixOrOptions === "object" ? void 0 : prefixOrOptions;
-	const { length = 12, separator = "_" } = finalOptions;
-	const id = (0, nanoid.customAlphabet)("0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz", length)();
-	return prefix && prefix in prefixes ? `${prefixes[prefix]}${separator}${id}` : id;
-}
-
-//#endregion
-//#region src/lib/readable-filters.ts
-const OP_SUFFIX = "__op";
-const INDEX_SEPARATOR = "__";
-const RANGE_VARIANTS = new Set(["range", "dateRange"]);
-function getColumnId(column) {
-	if ("id" in column && column.id) return String(column.id);
-	if ("accessorKey" in column && column.accessorKey) return String(column.accessorKey);
-	return null;
-}
-function getColumnVariant(column) {
-	if ("columnDef" in column) return column.columnDef.meta?.variant;
-	return column.meta?.variant;
-}
-function splitKey(key) {
-	const match = key.match(/^(.*?)(?:__(\d+))?$/);
-	if (!match) return { base: key };
-	const index = match[2] ? Number(match[2]) : void 0;
-	return {
-		base: match[1] ?? key,
-		index
-	};
-}
-function isFilterKey(key, columnIds) {
-	const { base } = splitKey(key.endsWith(OP_SUFFIX) ? key.slice(0, -4) : key);
-	return columnIds.has(base);
-}
-function parseValueByVariant(value, variant) {
-	if (variant === "multiSelect") return value ? value.split(",").filter(Boolean) : [];
-	if (RANGE_VARIANTS.has(variant)) {
-		const parts = value.split(",");
-		return [parts[0] ?? "", parts[1] ?? ""];
-	}
-	if (variant === "select") return value.split(",").filter(Boolean)[0] ?? "";
-	return value;
-}
-function serializeValue(value, variant) {
-	if (Array.isArray(value)) {
-		if (RANGE_VARIANTS.has(variant)) return [value[0] ?? "", value[1] ?? ""].join(",");
-		return value.join(",");
-	}
-	return value;
-}
-function parseReadableFilters(params, columns) {
-	const columnsById = /* @__PURE__ */ new Map();
-	for (const column of columns) {
-		const id = getColumnId(column);
-		if (id) columnsById.set(id, column);
-	}
-	const filters = [];
-	for (const [key, rawValue] of params.entries()) {
-		if (key.endsWith(OP_SUFFIX)) continue;
-		const { base } = splitKey(key);
-		const column = columnsById.get(base);
-		if (!column) continue;
-		const variant = getColumnVariant(column) ?? "text";
-		const opKey = `${key}${OP_SUFFIX}`;
-		const operator = params.get(opKey) ?? getDefaultFilterOperator(variant);
-		if (!rawValue && operator !== "isEmpty" && operator !== "isNotEmpty") continue;
-		const parsedValue = operator === "isEmpty" || operator === "isNotEmpty" ? "" : parseValueByVariant(rawValue, variant);
-		filters.push({
-			id: base,
-			value: parsedValue,
-			variant,
-			operator,
-			filterId: key || generateId({ length: 8 })
-		});
-	}
-	return filters;
-}
-function applyReadableFilters(params, columns, filters) {
-	const columnIds = new Set(columns.map((column) => getColumnId(column)).filter(Boolean));
-	for (const key of Array.from(params.keys())) if (isFilterKey(key, columnIds)) params.delete(key);
-	const counters = /* @__PURE__ */ new Map();
-	for (const filter of filters) {
-		const columnId = String(filter.id);
-		const count = (counters.get(columnId) ?? 0) + 1;
-		counters.set(columnId, count);
-		const key = count === 1 ? columnId : `${columnId}${INDEX_SEPARATOR}${count}`;
-		const variant = filter.variant ?? "text";
-		const value = serializeValue(filter.value, variant);
-		params.set(key, filter.operator === "isEmpty" || filter.operator === "isNotEmpty" ? "" : value);
-		const defaultOperator = getDefaultFilterOperator(variant);
-		if (filter.operator !== defaultOperator) params.set(`${key}${OP_SUFFIX}`, filter.operator);
-	}
-	return params;
-}
-
-//#endregion
-//#region src/hooks/use-readable-filters.ts
-const URL_CHANGE_EVENT = "urlchange";
-function useReadableFilters(columns, options = {}) {
-	const { debounceMs = 300, history = "replace", scroll = false } = options;
-	const columnSnapshot = react.useMemo(() => columns, [columns]);
-	const skipWriteRef = react.useRef(true);
-	const [filters, setFilters] = react.useState(() => parseReadableFilters(getUrlParams(), columnSnapshot));
-	react.useEffect(() => {
-		const handleUrlChange = () => {
-			skipWriteRef.current = true;
-			setFilters(parseReadableFilters(getUrlParams(), columnSnapshot));
-		};
-		window.addEventListener("popstate", handleUrlChange);
-		window.addEventListener(URL_CHANGE_EVENT, handleUrlChange);
-		return () => {
-			window.removeEventListener("popstate", handleUrlChange);
-			window.removeEventListener(URL_CHANGE_EVENT, handleUrlChange);
-		};
-	}, [columnSnapshot]);
-	const writeFilters = react.useCallback((next) => {
-		const params = getUrlParams();
-		applyReadableFilters(params, columnSnapshot, next);
-		setSearchParams(params, {
-			history,
-			scroll
-		});
-	}, [
-		columnSnapshot,
-		history,
-		scroll
-	]);
-	const updateFilters = react.useCallback((updater) => {
-		setFilters((prev) => {
-			return typeof updater === "function" ? updater(prev) : updater;
-		});
-	}, []);
-	const debouncedWrite = useDebouncedCallback(writeFilters, debounceMs);
-	react.useEffect(() => {
-		if (skipWriteRef.current) {
-			skipWriteRef.current = false;
-			return;
-		}
-		if (debounceMs > 0) debouncedWrite(filters);
-		else writeFilters(filters);
-	}, [
-		filters,
-		debounceMs,
-		debouncedWrite,
-		writeFilters
-	]);
-	return [filters, updateFilters];
-}
-
 //#endregion
 //#region src/components/data-table/data-table-filter-list.tsx
 const DEBOUNCE_MS$2 = 300;
@@ -1457,13 +1450,14 @@ function DataTableFilterList({ table, debounceMs = DEBOUNCE_MS$2, throttleMs = T
 	const [open, setOpen] = react.useState(false);
 	const addButtonRef = react.useRef(null);
 	const columns = react.useMemo(() => {
-		return table.getAllColumns().filter((column) => column.columnDef.enableColumnFilter);
+		return table.getAllColumns().filter((column) => {
+			if (!column.getCanFilter()) return false;
+			const modes = column.columnDef.meta?.modes;
+			if (modes && !modes.includes("advanced")) return false;
+			return true;
+		});
 	}, [table]);
-	const queryStateOptions = table.options.meta?.queryStateOptions;
-	const [filters, setFilters] = useReadableFilters(columns, {
-		...queryStateOptions,
-		debounceMs: 0
-	});
+	const [filters, setFilters] = useReadableFilters(columns, { debounceMs });
 	const debouncedSetFilters = useDebouncedCallback(setFilters, debounceMs);
 	const [joinOperator, setJoinOperator] = useQueryState(table.options.meta?.queryKeys?.joinOperator ?? "", parseAsStringEnum(["and", "or"]).withDefault("and"));
 	const onFilterAdd = react.useCallback(() => {
@@ -1499,7 +1493,7 @@ function DataTableFilterList({ table, debounceMs = DEBOUNCE_MS$2, throttleMs = T
 		});
 	}, [filters, setFilters]);
 	const onFiltersReset = react.useCallback(() => {
-		setFilters(null);
+		setFilters([]);
 		setJoinOperator("and");
 	}, [setFilters, setJoinOperator]);
 	react.useEffect(() => {
@@ -1943,7 +1937,12 @@ const REMOVE_FILTER_SHORTCUTS = ["backspace", "delete"];
 function DataTableFilterMenu({ table, debounceMs = DEBOUNCE_MS$1, throttleMs = THROTTLE_MS$1, shallow = true, disabled,...props }) {
 	const id = react.useId();
 	const columns = react.useMemo(() => {
-		return table.getAllColumns().filter((column) => column.columnDef.enableColumnFilter);
+		return table.getAllColumns().filter((column) => {
+			if (!column.columnDef.enableColumnFilter) return false;
+			const modes = column.columnDef.meta?.modes;
+			if (modes && !modes.includes("command")) return false;
+			return true;
+		});
 	}, [table]);
 	const [open, setOpen] = react.useState(false);
 	const [selectedColumn, setSelectedColumn] = react.useState(null);
@@ -1963,11 +1962,7 @@ function DataTableFilterMenu({ table, debounceMs = DEBOUNCE_MS$1, throttleMs = T
 			setSelectedColumn(null);
 		}
 	}, [inputValue, selectedColumn]);
-	const queryStateOptions = table.options.meta?.queryStateOptions;
-	const [filters, setFilters] = useReadableFilters(columns, {
-		...queryStateOptions,
-		debounceMs: 0
-	});
+	const [filters, setFilters] = useReadableFilters(columns, { debounceMs });
 	const debouncedSetFilters = useDebouncedCallback(setFilters, debounceMs);
 	const onFilterAdd = react.useCallback((column, value) => {
 		if (!value.trim() && column.columnDef.meta?.variant !== "boolean") return;
@@ -2704,7 +2699,7 @@ function DataTableViewOptions({ table, disabled,...props }) {
 //#endregion
 //#region src/components/auto-crud/auto-table-simple-filters.tsx
 function AutoTableSimpleFilters({ table, shallow = false, filters: externalFilters, onFiltersChange }) {
-	const columns = react.useMemo(() => table.getAllColumns().filter((col) => col.columnDef.enableColumnFilter), [table]);
+	const columns = react.useMemo(() => table.getAllColumns().filter((col) => col.getCanFilter()), [table]);
 	const queryStateOptions = table.options.meta?.queryStateOptions;
 	const [queryFilters, setQueryFilters] = useReadableFilters(columns, {
 		...queryStateOptions,
@@ -2724,9 +2719,10 @@ function AutoTableSimpleFilters({ table, shallow = false, filters: externalFilte
 	react.useEffect(() => {
 		setMounted(true);
 	}, []);
-	const getFilterValue = (columnId) => {
-		return filters.find((f) => f.id === columnId)?.value;
-	};
+	const filterMap = react.useMemo(() => new Map(filters.map((f) => [f.id, f])), [filters]);
+	const getFilterValue = react.useCallback((columnId) => {
+		return filterMap.get(columnId)?.value;
+	}, [filterMap]);
 	const updateFilter = react.useCallback((columnId, value) => {
 		const column = columns.find((c) => c.id === columnId);
 		if (!column) return;
@@ -2749,56 +2745,154 @@ function AutoTableSimpleFilters({ table, shallow = false, filters: externalFilte
 		setFilters
 	]);
 	const hasFilters = filters.length > 0;
+	const filterColumns = react.useMemo(() => columns.filter((col) => {
+		const meta = col.columnDef.meta;
+		const enableFilter = col.columnDef.enableColumnFilter !== false;
+		if (!meta?.variant || !enableFilter) return false;
+		const modes = meta.modes;
+		if (modes && !modes.includes("simple")) return false;
+		return true;
+	}), [columns]);
+	const [expanded, setExpanded] = react.useState(false);
+	const [visibleCount, setVisibleCount] = react.useState(null);
+	const containerRef = react.useRef(null);
+	const calcVisibleCount = react.useCallback(() => {
+		const el = containerRef.current;
+		if (!el) return;
+		const items = el.querySelectorAll("[data-filter-item]");
+		if (items.length === 0) return;
+		const restoreList = [];
+		el.querySelectorAll(".hidden").forEach((node) => {
+			const htmlNode = node;
+			htmlNode.classList.remove("hidden");
+			restoreList.push(htmlNode);
+		});
+		el.style.flex = "1 1 0%";
+		el.offsetHeight;
+		const firstTop = items[0].offsetTop;
+		let count = 0;
+		for (const item of Array.from(items)) {
+			if (item.offsetTop > firstTop) break;
+			count++;
+		}
+		const btn = el.querySelector("[data-filter-toggle]");
+		if (btn && count < items.length && count > 0) {
+			if (btn.offsetTop > firstTop) count--;
+		}
+		el.style.flex = "";
+		restoreList.forEach((node) => node.classList.add("hidden"));
+		setVisibleCount(count >= items.length ? null : count);
+	}, []);
+	react.useLayoutEffect(() => {
+		if (!mounted) return;
+		calcVisibleCount();
+	}, [
+		mounted,
+		filterColumns.length,
+		calcVisibleCount
+	]);
+	react.useEffect(() => {
+		const parent = containerRef.current?.closest("[data-filter-parent]");
+		if (!mounted || !parent) return;
+		let lastWidth = parent.offsetWidth;
+		let rafId = 0;
+		const ro = new ResizeObserver(() => {
+			const newWidth = parent.offsetWidth;
+			if (newWidth === lastWidth) return;
+			lastWidth = newWidth;
+			cancelAnimationFrame(rafId);
+			rafId = requestAnimationFrame(calcVisibleCount);
+		});
+		ro.observe(parent);
+		return () => {
+			cancelAnimationFrame(rafId);
+			ro.disconnect();
+		};
+	}, [
+		mounted,
+		filterColumns.length,
+		calcVisibleCount
+	]);
 	if (!mounted) return null;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "flex flex-wrap items-center gap-2",
-		children: [columns.map((column) => {
-			const meta = column.columnDef.meta;
-			if (!meta?.variant) return null;
-			const value = getFilterValue(column.id);
-			switch (meta.variant) {
-				case "text": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.Input, {
-					placeholder: meta.label ?? column.id,
-					value: typeof value === "string" ? value : "",
-					onChange: (e) => updateFilter(column.id, e.target.value || void 0),
-					className: "h-8 w-36"
-				}, column.id);
-				case "select":
-				case "multiSelect": return /* @__PURE__ */ (0, react_jsx_runtime.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 "range": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SimpleSliderFilter, {
-					title: meta.label ?? column.id,
-					range: meta.range,
-					unit: meta.unit,
-					value: Array.isArray(value) ? value.map(Number) : void 0,
-					onChange: (v) => updateFilter(column.id, v ? v.map(String) : void 0)
-				}, column.id);
-				case "date":
-				case "dateRange": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SimpleDateFilter, {
-					title: meta.label ?? column.id,
-					multiple: meta.variant === "dateRange",
-					value,
-					onChange: (v) => updateFilter(column.id, v)
-				}, column.id);
-				default: return null;
-			}
-		}), hasFilters && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.Button, {
-			variant: "outline",
-			size: "sm",
-			className: "h-8 border-dashed",
-			onClick: () => setFilters([]),
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.X, { className: "size-4" }), "Reset"]
-		})]
+		ref: containerRef,
+		className: "flex flex-wrap items-center gap-2 min-w-0",
+		children: [
+			filterColumns.map((column, index) => {
+				const meta = column.columnDef.meta;
+				const value = getFilterValue(column.id);
+				const isHidden = !expanded && visibleCount !== null && index >= visibleCount;
+				switch (meta.variant) {
+					case "text": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: isHidden ? "hidden" : "",
+						"data-filter-item": true,
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.Input, {
+							placeholder: meta.placeholder ?? meta.label ?? column.id,
+							value: typeof value === "string" ? value : "",
+							onChange: (e) => updateFilter(column.id, e.target.value || void 0),
+							className: "h-8 w-36 shrink-0"
+						})
+					}, column.id);
+					case "select":
+					case "multiSelect": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: isHidden ? "hidden" : "",
+						"data-filter-item": true,
+						children: /* @__PURE__ */ (0, react_jsx_runtime.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 "range": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: isHidden ? "hidden" : "",
+						"data-filter-item": true,
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SimpleSliderFilter, {
+							title: meta.label ?? column.id,
+							range: meta.range,
+							unit: meta.unit,
+							value: Array.isArray(value) ? value.map(Number) : void 0,
+							onChange: (v) => updateFilter(column.id, v ? v.map(String) : void 0)
+						})
+					}, column.id);
+					case "date":
+					case "dateRange": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: isHidden ? "hidden" : "",
+						"data-filter-item": true,
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SimpleDateFilter, {
+							title: meta.label ?? column.id,
+							multiple: meta.variant === "dateRange",
+							value,
+							onChange: (v) => updateFilter(column.id, v)
+						})
+					}, column.id);
+					default: return null;
+				}
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.Button, {
+				"data-filter-toggle": true,
+				variant: "ghost",
+				size: "icon",
+				className: cn("h-8 w-8 shrink-0 text-muted-foreground hover:text-foreground", visibleCount === null && "hidden"),
+				onClick: () => setExpanded((prev) => !prev),
+				"aria-label": expanded ? "收起筛选" : "展开更多筛选",
+				"aria-expanded": expanded,
+				children: expanded ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronUp, { className: "size-4" }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronDown, { className: "size-4" })
+			}),
+			hasFilters && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.Button, {
+				variant: "outline",
+				size: "sm",
+				className: "h-8 border-dashed shrink-0",
+				onClick: () => setFilters([]),
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.X, { className: "size-4" }), "Reset"]
+			})
+		]
 	});
 }
 function SimpleFacetedFilter({ title, options, multiple, value, onChange }) {
 	const [open, setOpen] = react.useState(false);
-	const selectedValues = new Set(value);
+	const selectedValues = react.useMemo(() => new Set(value), [value]);
 	const onItemSelect = (option, isSelected) => {
 		if (multiple) {
 			const newValues = new Set(selectedValues);
@@ -2829,6 +2923,12 @@ function SimpleFacetedFilter({ title, options, multiple, value, onChange }) {
 						tabIndex: 0,
 						className: "rounded-sm opacity-70 hover:opacity-100",
 						onClick: onReset,
+						onKeyDown: (e) => {
+							if (e.key === "Enter" || e.key === " ") {
+								e.preventDefault();
+								onReset(e);
+							}
+						},
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.XCircle, {})
 					}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.PlusCircle, {}),
 					title,
@@ -2936,6 +3036,12 @@ function SimpleSliderFilter({ title, range, unit, value, onChange }) {
 					tabIndex: 0,
 					className: "rounded-sm opacity-70 hover:opacity-100",
 					onClick: onReset,
+					onKeyDown: (e) => {
+						if (e.key === "Enter" || e.key === " ") {
+							e.preventDefault();
+							onReset(e);
+						}
+					},
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.XCircle, {})
 				}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.PlusCircle, {}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: title }),
@@ -3059,6 +3165,12 @@ function SimpleDateFilter({ title, multiple, value, onChange }) {
 					tabIndex: 0,
 					className: "rounded-sm opacity-70 hover:opacity-100",
 					onClick: onReset,
+					onKeyDown: (e) => {
+						if (e.key === "Enter" || e.key === " ") {
+							e.preventDefault();
+							onReset(e);
+						}
+					},
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.XCircle, {})
 				}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.CalendarIcon, {}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: title }),
@@ -3671,33 +3783,47 @@ function inferFilterVariantByFieldName(fieldName) {
 
 //#endregion
 //#region src/lib/schema-bridge/zod-to-columns.tsx
+const parsedFieldCache = /* @__PURE__ */ new WeakMap();
+const baseTableSchemaCache = /* @__PURE__ */ new WeakMap();
 /**
 * 解析 Zod 字段类型
 */
 function parseZodField(schema) {
+	const cached = parsedFieldCache.get(schema);
+	if (cached) return cached;
+	const finalize = (result) => {
+		parsedFieldCache.set(schema, result);
+		return result;
+	};
 	const def = schema._zod?.def ?? schema._def;
-	const testNull = schema.safeParse(null);
-	const required = !schema.safeParse(void 0).success && !testNull.success;
 	const typeName = def?.typeName;
-	if (def?.type === "nullable" || def?.type === "optional" || typeName === "ZodNullable" || typeName === "ZodOptional") {
+	const isOptional = def?.type === "optional" || typeName === "ZodOptional";
+	const isNullable = def?.type === "nullable" || typeName === "ZodNullable";
+	if (isOptional || isNullable) {
 		const innerType = def?.innerType;
-		if (innerType) return {
+		if (innerType) return finalize({
 			...parseZodField(innerType),
 			required: false
-		};
+		});
+	}
+	let required;
+	if (isOptional || isNullable) required = false;
+	else {
+		const testNull = schema.safeParse(null);
+		required = !schema.safeParse(void 0).success && !testNull.success;
 	}
-	if (def?.type === "boolean") return {
+	if (def?.type === "boolean") return finalize({
 		type: "boolean",
 		required
-	};
-	if (def?.type === "number") return {
+	});
+	if (def?.type === "number") return finalize({
 		type: "number",
 		required
-	};
-	if (def?.type === "date") return {
+	});
+	if (def?.type === "date") return finalize({
 		type: "date",
 		required
-	};
+	});
 	if (def?.type === "enum") {
 		let enumValues$1;
 		if (def?.entries) {
@@ -3708,20 +3834,20 @@ function parseZodField(schema) {
 			const values = def.values;
 			if (Array.isArray(values)) enumValues$1 = values.map(String);
 		}
-		if (enumValues$1 && enumValues$1.length > 0) return {
+		if (enumValues$1 && enumValues$1.length > 0) return finalize({
 			type: "enum",
 			required,
 			enumValues: enumValues$1
-		};
+		});
 	}
-	if (def?.type === "string") return {
+	if (def?.type === "string") return finalize({
 		type: "string",
 		required
-	};
-	if (typeName === "ZodBoolean") return {
+	});
+	if (typeName === "ZodBoolean") return finalize({
 		type: "boolean",
 		required
-	};
+	});
 	let enumValues;
 	if (def?.entries) {
 		const entries = def.entries;
@@ -3731,51 +3857,51 @@ function parseZodField(schema) {
 		const values = def.values;
 		if (Array.isArray(values)) enumValues = values.map(String);
 	}
-	if (enumValues && Array.isArray(enumValues) && enumValues.length > 0) return {
+	if (enumValues && Array.isArray(enumValues) && enumValues.length > 0) return finalize({
 		type: "enum",
 		required,
 		enumValues
-	};
-	if (typeName === "ZodNumber") return {
+	});
+	if (typeName === "ZodNumber") return finalize({
 		type: "number",
 		required
-	};
-	if (typeName === "ZodDate") return {
+	});
+	if (typeName === "ZodDate") return finalize({
 		type: "date",
 		required
-	};
-	if (typeName === "ZodArray") return {
+	});
+	if (typeName === "ZodArray") return finalize({
 		type: "array",
 		required
-	};
-	if (typeName === "ZodObject") return {
+	});
+	if (typeName === "ZodObject") return finalize({
 		type: "object",
 		required
-	};
+	});
 	const testString = schema.safeParse("test");
 	const testNumber = schema.safeParse(123);
 	const testBoolean = schema.safeParse(true);
 	const testDate = schema.safeParse(17040672e5);
-	if (testBoolean.success && !testString.success && !testNumber.success) return {
+	if (testBoolean.success && !testString.success && !testNumber.success) return finalize({
 		type: "boolean",
 		required
-	};
-	if (testDate.success && !testString.success) return {
+	});
+	if (testDate.success && !testString.success) return finalize({
 		type: "date",
 		required
-	};
-	if (testNumber.success && !testString.success) return {
+	});
+	if (testNumber.success && !testString.success) return finalize({
 		type: "number",
 		required
-	};
-	if (schema.safeParse([]).success && !testString.success) return {
+	});
+	if (schema.safeParse([]).success && !testString.success) return finalize({
 		type: "array",
 		required
-	};
-	return {
+	});
+	return finalize({
 		type: "string",
 		required
-	};
+	});
 }
 /**
 * 渲染单元格内容
@@ -3817,9 +3943,14 @@ function renderCell(value, type) {
 * 从 Zod Schema 创建 Table Schema (ColumnDef 数组)
 */
 function createTableSchema(schema, options) {
+	const { overrides, exclude = [] } = options ?? {};
+	const canCache = !(!!overrides && Object.keys(overrides).length > 0) && exclude.length === 0;
+	if (canCache) {
+		const cached = baseTableSchemaCache.get(schema);
+		if (cached) return [...cached];
+	}
 	const shape = schema.shape;
 	const columns = [];
-	const { overrides, exclude = [] } = options ?? {};
 	for (const [key, fieldSchema] of Object.entries(shape)) {
 		if (exclude.includes(key)) continue;
 		const override = overrides?.[key];
@@ -3854,6 +3985,7 @@ function createTableSchema(schema, options) {
 			...restOverride
 		});
 	}
+	if (canCache) baseTableSchemaCache.set(schema, columns);
 	return columns;
 }
 /**
@@ -4222,25 +4354,32 @@ function createParser(config) {
 		})
 	};
 }
-const sortingItemSchema = zod.z.object({
-	id: zod.z.string(),
-	desc: zod.z.boolean()
-});
 const getSortingStateParser = (columnIds) => {
 	const validKeys = columnIds ? columnIds instanceof Set ? columnIds : new Set(columnIds) : null;
 	return createParser({
 		parse: (value) => {
 			try {
-				const parsed = JSON.parse(value);
-				const result = zod.z.array(sortingItemSchema).safeParse(parsed);
-				if (!result.success) return null;
-				if (validKeys && result.data.some((item) => !validKeys.has(item.id))) return null;
-				return result.data;
+				if (!value || value.trim() === "") return [];
+				const items = value.split(",").map((item) => {
+					const lastDot = item.lastIndexOf(".");
+					if (lastDot === -1) return null;
+					const id = item.slice(0, lastDot);
+					const dir = item.slice(lastDot + 1);
+					if (!id || dir !== "asc" && dir !== "desc") return null;
+					return {
+						id,
+						desc: dir === "desc"
+					};
+				});
+				if (items.some((item) => item === null)) return null;
+				const result = items;
+				if (validKeys && result.some((item) => !validKeys.has(item.id))) return null;
+				return result;
 			} catch {
 				return null;
 			}
 		},
-		serialize: (value) => JSON.stringify(value)
+		serialize: (value) => value.map((item) => `${item.id}.${item.desc ? "desc" : "asc"}`).join(",")
 	});
 };
 const filterItemSchema = zod.z.object({
@@ -4363,6 +4502,13 @@ function useDataTable(props) {
 		filterableColumns,
 		enableAdvancedFilter
 	]);
+	const getCoreRowModelFn = react.useMemo(() => (0, __tanstack_react_table.getCoreRowModel)(), []);
+	const getFilteredRowModelFn = react.useMemo(() => (0, __tanstack_react_table.getFilteredRowModel)(), []);
+	const getPaginationRowModelFn = react.useMemo(() => (0, __tanstack_react_table.getPaginationRowModel)(), []);
+	const getSortedRowModelFn = react.useMemo(() => (0, __tanstack_react_table.getSortedRowModel)(), []);
+	const getFacetedRowModelFn = react.useMemo(() => (0, __tanstack_react_table.getFacetedRowModel)(), []);
+	const getFacetedUniqueValuesFn = react.useMemo(() => (0, __tanstack_react_table.getFacetedUniqueValues)(), []);
+	const getFacetedMinMaxValuesFn = react.useMemo(() => (0, __tanstack_react_table.getFacetedMinMaxValues)(), []);
 	const table = (0, __tanstack_react_table.useReactTable)({
 		...tableProps,
 		columns,
@@ -4385,13 +4531,13 @@ function useDataTable(props) {
 		onSortingChange,
 		onColumnFiltersChange,
 		onColumnVisibilityChange: setColumnVisibility,
-		getCoreRowModel: (0, __tanstack_react_table.getCoreRowModel)(),
-		getFilteredRowModel: (0, __tanstack_react_table.getFilteredRowModel)(),
-		getPaginationRowModel: (0, __tanstack_react_table.getPaginationRowModel)(),
-		getSortedRowModel: (0, __tanstack_react_table.getSortedRowModel)(),
-		getFacetedRowModel: (0, __tanstack_react_table.getFacetedRowModel)(),
-		getFacetedUniqueValues: (0, __tanstack_react_table.getFacetedUniqueValues)(),
-		getFacetedMinMaxValues: (0, __tanstack_react_table.getFacetedMinMaxValues)(),
+		getCoreRowModel: getCoreRowModelFn,
+		getFilteredRowModel: getFilteredRowModelFn,
+		getPaginationRowModel: getPaginationRowModelFn,
+		getSortedRowModel: getSortedRowModelFn,
+		getFacetedRowModel: getFacetedRowModelFn,
+		getFacetedUniqueValues: getFacetedUniqueValuesFn,
+		getFacetedMinMaxValues: getFacetedMinMaxValuesFn,
 		manualPagination: true,
 		manualSorting: true,
 		manualFiltering: true,
@@ -4422,6 +4568,11 @@ function useDataTable(props) {
 
 //#endregion
 //#region src/components/auto-crud/auto-table.tsx
+const DEFAULT_MODES = [
+	"simple",
+	"advanced",
+	"command"
+];
 /** 过滤模式配置 */
 const filterModeConfig = {
 	simple: {
@@ -4441,12 +4592,8 @@ const filterModeConfig = {
 	}
 };
 function AutoTable({ schema, data, pageCount = 1, overrides, enableRowSelection = true, exclude, actions, pinnedColumns, filterMode = "simple", onDeleteSelected, onUpdateSelected, batchUpdateFields, actionBarExtra, initialSorting, enableExport = true, onSelectedCountChange, getSelectedRows }) {
-	const modes = filterMode ? Array.isArray(filterMode) ? filterMode : [filterMode] : [
-		"simple",
-		"advanced",
-		"command"
-	];
-	const [currentMode, setCurrentMode] = (0, react.useState)(modes[0] ?? "simple");
+	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;
 	const { table, shallow, debounceMs, throttleMs } = useDataTable({
 		data,
@@ -4467,13 +4614,18 @@ function AutoTable({ schema, data, pageCount = 1, overrides, enableRowSelection
 		]),
 		pageCount,
 		enableAdvancedFilter: true,
-		initialState: {
+		initialState: (0, react.useMemo)(() => ({
 			sorting: initialSorting,
 			columnPinning: pinnedColumns ?? {
 				left: enableRowSelection ? ["select"] : [],
 				right: actions ? ["actions"] : []
 			}
-		},
+		}), [
+			initialSorting,
+			pinnedColumns,
+			enableRowSelection,
+			actions
+		]),
 		shallow: false,
 		clearOnDefault: true
 	});
@@ -4514,7 +4666,7 @@ function AutoTable({ schema, data, pageCount = 1, overrides, enableRowSelection
 			})
 		})
 	})] }) : null;
-	const renderFilters = () => {
+	const filtersContent = (0, react.useMemo)(() => {
 		switch (currentMode) {
 			case "simple": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AutoTableSimpleFilters, {
 				table,
@@ -4534,18 +4686,25 @@ function AutoTable({ schema, data, pageCount = 1, overrides, enableRowSelection
 				align: "start"
 			});
 		}
-	};
+	}, [
+		currentMode,
+		table,
+		shallow,
+		debounceMs,
+		throttleMs
+	]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: "space-y-4",
 		children: [
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "flex w-full items-start justify-between gap-2 p-1",
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: "flex flex-1 flex-wrap items-center gap-2",
+					className: "flex flex-1 items-start gap-2 min-h-[40px]",
+					"data-filter-parent": true,
 					children: [currentMode !== "simple" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DataTableSortList, {
 						table,
 						align: "start"
-					}), renderFilters()]
+					}), filtersContent]
 				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 					className: "flex items-center gap-2",
 					children: [
@@ -5125,92 +5284,61 @@ function ImportDialog({ open, onOpenChange, onImport, columns = [], title = "导
 	});
 }
 
-//#endregion
-//#region src/components/auto-crud/export-dialog.tsx
-function ExportDialog({ open, onOpenChange, selectedCount, onExport, canExportFiltered = false }) {
-	const [exporting, setExporting] = react.useState(null);
-	const [done, setDone] = react.useState(false);
-	const reset = react.useCallback(() => {
-		setExporting(null);
-		setDone(false);
-	}, []);
-	const handleOpenChange = react.useCallback((value) => {
-		if (!value) reset();
-		onOpenChange(value);
-	}, [onOpenChange, reset]);
-	const handleExport = react.useCallback(async (mode) => {
-		setExporting(mode);
-		try {
-			await onExport(mode);
-			setDone(true);
-			setTimeout(() => handleOpenChange(false), 800);
-		} catch {
-			setExporting(null);
-		}
-	}, [onExport, handleOpenChange]);
-	const hasSelected = selectedCount > 0;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.Dialog, {
-		open,
-		onOpenChange: handleOpenChange,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.DialogContent, {
-			className: "sm:max-w-[400px]",
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.DialogHeader, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.DialogTitle, { children: "导出数据" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.DialogDescription, { children: "选择导出范围" })] }), done ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "flex flex-col items-center gap-3 py-6",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.CheckCircle2, { className: "h-10 w-10 text-green-500" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-					className: "text-sm text-muted-foreground",
-					children: "导出成功"
-				})]
-			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "grid gap-3 py-2",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.Button, {
-					variant: "outline",
-					className: "h-auto justify-start gap-3 px-4 py-3",
-					disabled: !hasSelected || exporting !== null,
-					onClick: () => handleExport("selected"),
-					children: [exporting === "selected" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Loader2, { className: "h-5 w-5 shrink-0 animate-spin" }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.FileDown, { className: "h-5 w-5 shrink-0" }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: "flex flex-col items-start",
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-							className: "font-medium",
-							children: ["导出选中", hasSelected ? ` (${selectedCount} 条)` : ""]
-						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-							className: "text-xs text-muted-foreground",
-							children: hasSelected ? "导出当前勾选的数据行" : "请先在表格中勾选数据行"
-						})]
-					})]
-				}), canExportFiltered && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.Button, {
-					variant: "outline",
-					className: "h-auto justify-start gap-3 px-4 py-3",
-					disabled: exporting !== null,
-					onClick: () => handleExport("filtered"),
-					children: [exporting === "filtered" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Loader2, { className: "h-5 w-5 shrink-0 animate-spin" }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.FileDown, { className: "h-5 w-5 shrink-0" }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: "flex flex-col items-start",
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-							className: "font-medium",
-							children: "导出筛选结果"
-						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-							className: "text-xs text-muted-foreground",
-							children: "导出当前筛选条件下的所有数据"
-						})]
-					})]
-				})]
-			})]
-		})
-	});
-}
-
 //#endregion
 //#region src/components/auto-crud/auto-crud-table.tsx
 /**
 * 从统一配置生成表格 overrides
+* 当 filter 配置存在时，合并到 meta 中（不影响列隐藏）
 */
 function buildTableOverrides(fields, legacyOverrides) {
 	const result = { ...legacyOverrides };
-	if (fields) for (const [key, config] of Object.entries(fields)) result[key] = {
-		...result[key],
-		...config.label && { label: config.label },
-		...config.hidden && { hidden: true },
-		...config.table
-	};
+	if (fields) for (const [key, config] of Object.entries(fields)) {
+		const tableMeta = config.table !== false && typeof config.table === "object" ? config.table.meta : void 0;
+		let filterMeta;
+		if (config.filter && typeof config.filter === "object") {
+			if (config.filter.enabled !== false && config.filter.hidden !== true) {
+				const { enabled: _, hidden: __,...filterProps } = config.filter;
+				if (Object.keys(filterProps).length > 0) filterMeta = filterProps;
+			}
+		}
+		if (config.filter === false) result[key] = {
+			...result[key],
+			enableColumnFilter: false
+		};
+		else if (config.filter && typeof config.filter === "object") {
+			if (config.filter.enabled === false || config.filter.hidden === true) result[key] = {
+				...result[key],
+				enableColumnFilter: false
+			};
+		}
+		if (tableMeta || filterMeta) result[key] = {
+			...result[key],
+			meta: {
+				...result[key]?.meta ?? {},
+				...tableMeta ?? {},
+				...filterMeta ?? {}
+			}
+		};
+		if (config.label) result[key] = {
+			...result[key],
+			label: config.label
+		};
+		if (config.hidden) result[key] = {
+			...result[key],
+			hidden: true
+		};
+		if (config.table === false) result[key] = {
+			...result[key],
+			hidden: true
+		};
+		else if (config.table && typeof config.table === "object") {
+			const { meta,...tableProps } = config.table;
+			result[key] = {
+				...result[key],
+				...tableProps
+			};
+		}
+	}
 	return result;
 }
 /**
@@ -5223,12 +5351,24 @@ function buildFormOverrides(fields, legacyOverrides, denyFields) {
 		...result[field],
 		"x-hidden": true
 	};
-	if (fields) for (const [key, config] of Object.entries(fields)) result[key] = {
-		...result[key],
-		...config.label && { title: config.label },
-		...config.hidden && { "x-hidden": true },
-		...config.form
-	};
+	if (fields) for (const [key, config] of Object.entries(fields)) {
+		if (config.label) result[key] = {
+			...result[key],
+			title: config.label
+		};
+		if (config.hidden) result[key] = {
+			...result[key],
+			"x-hidden": true
+		};
+		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;
 }
 /**
@@ -5237,7 +5377,9 @@ function buildFormOverrides(fields, legacyOverrides, denyFields) {
 function buildHiddenColumns(fields, legacyHidden, denyFields) {
 	const hidden = new Set([...legacyHidden ?? [], ...denyFields ?? []]);
 	if (fields) {
-		for (const [key, config] of Object.entries(fields)) if (config.hidden || config.table?.hidden) hidden.add(key);
+		for (const [key, config] of Object.entries(fields)) if (config.hidden) hidden.add(key);
+		else if (config.table === false) hidden.add(key);
+		else if (config.table && typeof config.table === "object" && config.table.hidden) hidden.add(key);
 	}
 	return Array.from(hidden);
 }
@@ -5364,8 +5506,8 @@ function AutoCrudTable({ title, description, schema, resource, fields, table: ta
 	const canImport = can.import && !!resource.handlers.import;
 	const canExport = can.export;
 	const [importOpen, setImportOpen] = react.useState(false);
-	const [exportOpen, setExportOpen] = react.useState(false);
 	const [selectedCount, setSelectedCount] = react.useState(0);
+	const [exporting, setExporting] = react.useState(false);
 	const getSelectedRowsRef = react.useRef(null);
 	const importColumns = react.useMemo(() => {
 		const shape = schema.shape;
@@ -5394,10 +5536,31 @@ function AutoCrudTable({ title, description, schema, resource, fields, table: ta
 		title,
 		denyFields
 	]);
-	const tableOverrides = buildTableOverrides(fields, tableConfig?.overrides);
-	const formOverrides = buildFormOverrides(fields, formConfig?.overrides, denyFields);
-	const hiddenColumns = buildHiddenColumns(fields, tableConfig?.hidden, denyFields);
-	const batchFields = buildBatchUpdateFields(schema, tableConfig?.batchFields, fields);
+	const handleExportClick = react.useCallback(async () => {
+		const mode = selectedCount > 0 ? "selected" : "filtered";
+		setExporting(true);
+		try {
+			await handleExport(mode);
+		} finally {
+			setExporting(false);
+		}
+	}, [selectedCount, handleExport]);
+	const tableOverrides = react.useMemo(() => buildTableOverrides(fields, tableConfig?.overrides), [fields, tableConfig?.overrides]);
+	const formOverrides = react.useMemo(() => buildFormOverrides(fields, formConfig?.overrides, denyFields), [
+		fields,
+		formConfig?.overrides,
+		denyFields
+	]);
+	const hiddenColumns = react.useMemo(() => buildHiddenColumns(fields, tableConfig?.hidden, denyFields), [
+		fields,
+		tableConfig?.hidden,
+		denyFields
+	]);
+	const batchFields = react.useMemo(() => buildBatchUpdateFields(schema, tableConfig?.batchFields, fields), [
+		schema,
+		tableConfig?.batchFields,
+		fields
+	]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: "space-y-4",
 		children: [
@@ -5429,8 +5592,9 @@ function AutoCrudTable({ title, description, schema, resource, fields, table: ta
 						canExport && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.Button, {
 							variant: "outline",
 							size: "sm",
-							onClick: () => setExportOpen(true),
-							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Upload, { className: "mr-2 h-4 w-4" }), "导出"]
+							onClick: handleExportClick,
+							disabled: exporting || selectedCount === 0 && !resource.handlers.export,
+							children: [exporting ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Loader2, { className: "mr-2 h-4 w-4 animate-spin" }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Upload, { className: "mr-2 h-4 w-4" }), selectedCount > 0 ? `导出(${selectedCount})` : "导出"]
 						}),
 						can.create && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.Button, {
 							onClick: resource.handlers.openCreate,
@@ -5497,18 +5661,84 @@ function AutoCrudTable({ title, description, schema, resource, fields, table: ta
 				onOpenChange: setImportOpen,
 				onImport: resource.handlers.import,
 				columns: importColumns
-			}),
-			canExport && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ExportDialog, {
-				open: exportOpen,
-				onOpenChange: setExportOpen,
-				selectedCount,
-				onExport: handleExport,
-				canExportFiltered: !!resource.handlers.export
 			})
 		]
 	});
 }
 
+//#endregion
+//#region src/components/auto-crud/export-dialog.tsx
+function ExportDialog({ open, onOpenChange, selectedCount, onExport, canExportFiltered = false }) {
+	const [exporting, setExporting] = react.useState(null);
+	const [done, setDone] = react.useState(false);
+	const reset = react.useCallback(() => {
+		setExporting(null);
+		setDone(false);
+	}, []);
+	const handleOpenChange = react.useCallback((value) => {
+		if (!value) reset();
+		onOpenChange(value);
+	}, [onOpenChange, reset]);
+	const handleExport = react.useCallback(async (mode) => {
+		setExporting(mode);
+		try {
+			await onExport(mode);
+			setDone(true);
+			setTimeout(() => handleOpenChange(false), 800);
+		} catch {
+			setExporting(null);
+		}
+	}, [onExport, handleOpenChange]);
+	const hasSelected = selectedCount > 0;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.Dialog, {
+		open,
+		onOpenChange: handleOpenChange,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.DialogContent, {
+			className: "sm:max-w-[400px]",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.DialogHeader, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.DialogTitle, { children: "导出数据" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.DialogDescription, { children: "选择导出范围" })] }), done ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex flex-col items-center gap-3 py-6",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.CheckCircle2, { className: "h-10 w-10 text-green-500" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: "text-sm text-muted-foreground",
+					children: "导出成功"
+				})]
+			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "grid gap-3 py-2",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.Button, {
+					variant: "outline",
+					className: "h-auto justify-start gap-3 px-4 py-3",
+					disabled: !hasSelected || exporting !== null,
+					onClick: () => handleExport("selected"),
+					children: [exporting === "selected" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Loader2, { className: "h-5 w-5 shrink-0 animate-spin" }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.FileDown, { className: "h-5 w-5 shrink-0" }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "flex flex-col items-start",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+							className: "font-medium",
+							children: ["导出选中", hasSelected ? ` (${selectedCount} 条)` : ""]
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "text-xs text-muted-foreground",
+							children: hasSelected ? "导出当前勾选的数据行" : "请先在表格中勾选数据行"
+						})]
+					})]
+				}), canExportFiltered && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.Button, {
+					variant: "outline",
+					className: "h-auto justify-start gap-3 px-4 py-3",
+					disabled: exporting !== null,
+					onClick: () => handleExport("filtered"),
+					children: [exporting === "filtered" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Loader2, { className: "h-5 w-5 shrink-0 animate-spin" }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.FileDown, { className: "h-5 w-5 shrink-0" }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "flex flex-col items-start",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "font-medium",
+							children: "导出筛选结果"
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "text-xs text-muted-foreground",
+							children: "导出当前筛选条件下的所有数据"
+						})]
+					})]
+				})]
+			})]
+		})
+	});
+}
+
 //#endregion
 //#region src/components/data-table/data-table-advanced-toolbar.tsx
 function DataTableAdvancedToolbar({ table, children, className,...props }) {
@@ -6062,6 +6292,8 @@ function DataTableToolbarFilter({ column }) {
 		const columnMeta = column.columnDef.meta;
 		return react.useCallback(() => {
 			if (!columnMeta?.variant) return null;
+			const modes = columnMeta.modes;
+			if (modes && !modes.includes("advanced")) return null;
 			switch (columnMeta.variant) {
 				case "text": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.Input, {
 					placeholder: columnMeta.placeholder ?? columnMeta.label,
@@ -6183,6 +6415,10 @@ function modalReducer(state, action) {
 function useAutoCrudResource({ router, schema, query: queryTransform, options = {} }) {
 	const { idKey = "id", defaultVariant = "dialog", hooks, toast: toastAdapter, exportFetcher } = options;
 	const toast = (0, react.useMemo)(() => toastAdapter === false ? noopToastAdapter : toastAdapter ?? defaultToastAdapter, [toastAdapter]);
+	const hooksRef = (0, react.useRef)(hooks);
+	(0, react.useEffect)(() => {
+		hooksRef.current = hooks;
+	}, [hooks]);
 	const columns = (0, react.useMemo)(() => createTableSchema(schema), [schema]);
 	const [urlParams] = useQueryStates({
 		page: parseAsInteger.withDefault(1),
@@ -6246,15 +6482,16 @@ function useAutoCrudResource({ router, schema, query: queryTransform, options =
 		payload: variant
 	}), []);
 	const submitCreate = (0, react.useCallback)(async (values) => {
+		const currentHooks = hooksRef.current;
 		try {
-			if (hooks?.beforeCreate) {
-				const result = await hooks.beforeCreate(values);
+			if (currentHooks?.beforeCreate) {
+				const result = await currentHooks.beforeCreate(values);
 				if (typeof result === "boolean") {
 					if (result) {
 						toast.success("创建成功");
 						closeModals();
 						listQuery.refetch();
-						hooks?.onSuccess?.("create", values);
+						currentHooks?.onSuccess?.("create", values);
 					}
 					return;
 				}
@@ -6265,36 +6502,36 @@ function useAutoCrudResource({ router, schema, query: queryTransform, options =
 					toast.success("创建成功");
 					closeModals();
 					listQuery.refetch();
-					hooks?.onSuccess?.("create", data);
+					currentHooks?.onSuccess?.("create", data);
 				},
 				onError: (error) => {
 					const err = error;
 					toast.error(`创建失败: ${err.message}`);
-					hooks?.onError?.("create", err);
+					currentHooks?.onError?.("create", err);
 				}
 			});
 		} catch (error) {
 			const err = error;
 			toast.error(`创建失败: ${err.message}`);
-			hooks?.onError?.("create", err);
+			currentHooks?.onError?.("create", err);
 		}
 	}, [
 		createMutation,
 		closeModals,
-		listQuery,
-		hooks
+		listQuery
 	]);
 	const submitUpdate = (0, react.useCallback)(async (values) => {
+		const currentHooks = hooksRef.current;
 		if (!modal.selected) return;
 		try {
-			if (hooks?.beforeUpdate) {
-				const result = await hooks.beforeUpdate(values, modal.selected);
+			if (currentHooks?.beforeUpdate) {
+				const result = await currentHooks.beforeUpdate(values, modal.selected);
 				if (typeof result === "boolean") {
 					if (result) {
 						toast.success("更新成功");
 						closeModals();
 						listQuery.refetch();
-						hooks?.onSuccess?.("update", values);
+						currentHooks?.onSuccess?.("update", values);
 					}
 					return;
 				}
@@ -6309,38 +6546,38 @@ function useAutoCrudResource({ router, schema, query: queryTransform, options =
 					toast.success("更新成功");
 					closeModals();
 					listQuery.refetch();
-					hooks?.onSuccess?.("update", data);
+					currentHooks?.onSuccess?.("update", data);
 				},
 				onError: (error) => {
 					const err = error;
 					toast.error(`更新失败: ${err.message}`);
-					hooks?.onError?.("update", err);
+					currentHooks?.onError?.("update", err);
 				}
 			});
 		} catch (error) {
 			const err = error;
 			toast.error(`更新失败: ${err.message}`);
-			hooks?.onError?.("update", err);
+			currentHooks?.onError?.("update", err);
 		}
 	}, [
 		modal.selected,
 		idKey,
 		updateMutation,
 		closeModals,
-		listQuery,
-		hooks
+		listQuery
 	]);
 	const confirmDelete = (0, react.useCallback)(async () => {
+		const currentHooks = hooksRef.current;
 		if (!modal.selected) return;
 		try {
-			if (hooks?.beforeDelete) {
-				const result = await hooks.beforeDelete(modal.selected);
+			if (currentHooks?.beforeDelete) {
+				const result = await currentHooks.beforeDelete(modal.selected);
 				if (typeof result === "boolean") {
 					if (result) {
 						toast.success("删除成功");
 						closeModals();
 						listQuery.refetch();
-						hooks?.onSuccess?.("delete", modal.selected);
+						currentHooks?.onSuccess?.("delete", modal.selected);
 					}
 					return;
 				}
@@ -6351,28 +6588,28 @@ function useAutoCrudResource({ router, schema, query: queryTransform, options =
 					toast.success("删除成功");
 					closeModals();
 					listQuery.refetch();
-					hooks?.onSuccess?.("delete", data);
+					currentHooks?.onSuccess?.("delete", data);
 				},
 				onError: (error) => {
 					const err = error;
 					toast.error(`删除失败: ${err.message}`);
-					hooks?.onError?.("delete", err);
+					currentHooks?.onError?.("delete", err);
 				}
 			});
 		} catch (error) {
 			const err = error;
 			toast.error(`删除失败: ${err.message}`);
-			hooks?.onError?.("delete", err);
+			currentHooks?.onError?.("delete", err);
 		}
 	}, [
 		modal.selected,
 		idKey,
 		deleteMutation,
 		closeModals,
-		listQuery,
-		hooks
+		listQuery
 	]);
 	const deleteMany = (0, react.useCallback)((rows) => {
+		const currentHooks = hooksRef.current;
 		if (!deleteManyMutation) {
 			toast.error("批量删除功能未启用");
 			return;
@@ -6382,21 +6619,21 @@ function useAutoCrudResource({ router, schema, query: queryTransform, options =
 			onSuccess: (data) => {
 				toast.success(`成功删除 ${ids.length} 条记录`);
 				listQuery.refetch();
-				hooks?.onSuccess?.("delete", data);
+				currentHooks?.onSuccess?.("delete", data);
 			},
 			onError: (error) => {
 				const err = error;
 				toast.error(`批量删除失败: ${err.message}`);
-				hooks?.onError?.("delete", err);
+				currentHooks?.onError?.("delete", err);
 			}
 		});
 	}, [
 		deleteManyMutation,
 		idKey,
-		listQuery,
-		hooks
+		listQuery
 	]);
 	const updateMany = (0, react.useCallback)((rows, data) => {
+		const currentHooks = hooksRef.current;
 		if (!updateManyMutation) {
 			toast.error("批量更新功能未启用");
 			return;
@@ -6409,19 +6646,18 @@ function useAutoCrudResource({ router, schema, query: queryTransform, options =
 			onSuccess: (result) => {
 				toast.success(`成功更新 ${ids.length} 条记录`);
 				listQuery.refetch();
-				hooks?.onSuccess?.("update", result);
+				currentHooks?.onSuccess?.("update", result);
 			},
 			onError: (error) => {
 				const err = error;
 				toast.error(`批量更新失败: ${err.message}`);
-				hooks?.onError?.("update", err);
+				currentHooks?.onError?.("update", err);
 			}
 		});
 	}, [
 		updateManyMutation,
 		idKey,
-		listQuery,
-		hooks
+		listQuery
 	]);
 	const copyRow = (0, react.useCallback)((row) => {
 		dispatch({
@@ -6742,12 +6978,12 @@ function createMemoryDataSource(initialData = []) {
 				});
 			});
 			if (params.sort && params.sort.length > 0) {
-				const { id, desc } = params.sort[0];
+				const sortItem = params.sort[0];
 				filtered.sort((a, b) => {
-					const aVal = a[id];
-					const bVal = b[id];
+					const aVal = a[sortItem.id];
+					const bVal = b[sortItem.id];
 					const result = aVal > bVal ? 1 : aVal < bVal ? -1 : 0;
-					return desc ? -result : result;
+					return sortItem.desc ? -result : result;
 				});
 			}
 			const start = (params.page - 1) * params.perPage;
@@ -6775,11 +7011,12 @@ function createMemoryDataSource(initialData = []) {
 		async update(id, updateData) {
 			const index = data.findIndex((item) => item.id === id);
 			if (index === -1) throw new Error(`Item with id ${id} not found`);
-			data[index] = {
+			const updated = {
 				...data[index],
 				...updateData
 			};
-			return data[index];
+			data[index] = updated;
+			return updated;
 		},
 		async delete(id) {
 			const index = data.findIndex((item) => item.id === id);