@wordrhyme/auto-crud 1.5.7 → 1.7.0

package/dist/index.cjs

@@ -39,6 +39,8 @@ let nanoid = require("nanoid");
 nanoid = __toESM(nanoid);
 let __wordrhyme_shadcn_ui = require("@wordrhyme/shadcn-ui");
 __wordrhyme_shadcn_ui = __toESM(__wordrhyme_shadcn_ui);
+let __wordrhyme_ui = require("@wordrhyme/ui");
+__wordrhyme_ui = __toESM(__wordrhyme_ui);
 let zod = require("zod");
 zod = __toESM(zod);
 let __formily_core = require("@formily/core");
@@ -420,13 +422,15 @@ function hasValidCanonicalDateTimePrefix(value) {
 	const match = canonicalDateTimePrefixPattern.exec(value);
 	return !match || isValidCalendarDate(match[1], match[2], match[3]);
 }
+function getDateLocaleOptions() {
+	return hostDateFormatters[hostDateFormatters.length - 1]?.options;
+}
 /**
-* Register the host's process-wide date presentation policy without coupling
-* AutoCrud to locale or timezone selection. The returned cleanup removes only
-* this registration, so overlapping registrations may be disposed out of order.
+* Register the host's date formatter and optional calendar locale policy.
+* Cleanup removes only this registration, including out-of-order cleanup.
 * Passing undefined clears every registration.
 */
-function setDateFormatter(formatter) {
+function setDateFormatter(formatter, options) {
 	if (formatter === void 0) {
 		const hadFormatter = hostDateFormatters.length > 0;
 		hostDateFormatters = [];
@@ -435,15 +439,16 @@ function setDateFormatter(formatter) {
 	}
 	const registration = {
 		formatter,
+		...options ? { options } : {},
 		token: Symbol("date-formatter")
 	};
 	hostDateFormatters.push(registration);
 	notifyDateFormatterChange();
 	return () => {
-		const currentFormatter = getHostDateFormatter();
+		const currentRegistration = hostDateFormatters[hostDateFormatters.length - 1];
 		const previousLength = hostDateFormatters.length;
 		hostDateFormatters = hostDateFormatters.filter(({ token }) => token !== registration.token);
-		if (hostDateFormatters.length !== previousLength && getHostDateFormatter() !== currentFormatter) notifyDateFormatterChange();
+		if (hostDateFormatters.length !== previousLength && hostDateFormatters[hostDateFormatters.length - 1] !== currentRegistration) notifyDateFormatterChange();
 	};
 }
 function formatDate(date, opts = {}, preset) {
@@ -492,8 +497,14 @@ function formatDate(date, opts = {}, preset) {
 
 //#endregion
 //#region src/components/data-table/data-table.tsx
-function DataTable({ table, actionBar, children, className,...props }) {
+function DataTable({ table, actionBar, children, className, classNames,...props }) {
 	useDateFormatterVersion();
+	const columns = [
+		...table.getLeftVisibleLeafColumns(),
+		...table.getCenterVisibleLeafColumns(),
+		...table.getRightVisibleLeafColumns()
+	];
+	const hasWidthCap = columns.some((column) => (column.columnDef.maxSize ?? Number.MAX_SAFE_INTEGER) < Number.MAX_SAFE_INTEGER);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: cn("flex w-full flex-col gap-2.5 overflow-auto", className),
 		...props,
@@ -501,21 +512,53 @@ function DataTable({ table, actionBar, children, className,...props }) {
 			children,
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				className: "overflow-hidden rounded-md border",
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__wordrhyme_shadcn.Table, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__wordrhyme_shadcn.TableHeader, { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__wordrhyme_shadcn.TableRow, { children: headerGroup.headers.map((header) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__wordrhyme_shadcn.TableHead, {
-					colSpan: header.colSpan,
-					style: { ...getColumnPinningStyle({ column: header.column }) },
-					children: header.isPlaceholder ? null : (0, __tanstack_react_table.flexRender)(header.column.columnDef.header, header.getContext())
-				}, header.id)) }, headerGroup.id)) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__wordrhyme_shadcn.TableBody, { children: table.getRowModel().rows?.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__wordrhyme_shadcn.TableRow, {
-					"data-state": row.getIsSelected() && "selected",
-					children: row.getVisibleCells().map((cell) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__wordrhyme_shadcn.TableCell, {
-						style: { ...getColumnPinningStyle({ column: cell.column }) },
-						children: (0, __tanstack_react_table.flexRender)(cell.column.columnDef.cell, cell.getContext())
-					}, cell.id))
-				}, row.id)) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__wordrhyme_shadcn.TableRow, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__wordrhyme_shadcn.TableCell, {
-					colSpan: table.getAllColumns().length,
-					className: "h-24 text-center",
-					children: "No results."
-				}) }) })] })
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__wordrhyme_shadcn.Table, {
+					className: classNames?.table,
+					style: hasWidthCap ? {
+						tableLayout: "fixed",
+						width: columns.reduce((width, column) => width + column.getSize(), 0)
+					} : void 0,
+					children: [
+						hasWidthCap && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("colgroup", { children: columns.map((column) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("col", { style: { width: column.getSize() } }, column.id)) }),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__wordrhyme_shadcn.TableHeader, {
+							className: classNames?.thead,
+							children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__wordrhyme_shadcn.TableRow, {
+								className: classNames?.tr,
+								children: headerGroup.headers.map((header) => {
+									const columnClassName = header.column.columnDef.meta?.classNames?.th;
+									return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__wordrhyme_shadcn.TableHead, {
+										colSpan: header.colSpan,
+										className: cn(hasWidthCap && "overflow-hidden text-ellipsis", classNames?.th, typeof columnClassName === "string" ? columnClassName : void 0),
+										style: { ...getColumnPinningStyle({ column: header.column }) },
+										children: header.isPlaceholder ? null : (0, __tanstack_react_table.flexRender)(header.column.columnDef.header, header.getContext())
+									}, header.id);
+								})
+							}, headerGroup.id))
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__wordrhyme_shadcn.TableBody, {
+							className: classNames?.tbody,
+							children: table.getRowModel().rows?.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__wordrhyme_shadcn.TableRow, {
+								className: classNames?.tr,
+								"data-state": row.getIsSelected() && "selected",
+								children: row.getVisibleCells().map((cell) => {
+									const columnClassName = cell.column.columnDef.meta?.classNames?.td;
+									return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__wordrhyme_shadcn.TableCell, {
+										className: cn(hasWidthCap && "overflow-hidden text-ellipsis", classNames?.td, typeof columnClassName === "string" ? columnClassName : void 0),
+										style: { ...getColumnPinningStyle({ column: cell.column }) },
+										children: (0, __tanstack_react_table.flexRender)(cell.column.columnDef.cell, cell.getContext())
+									}, cell.id);
+								})
+							}, row.id)) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__wordrhyme_shadcn.TableRow, {
+								className: classNames?.tr,
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__wordrhyme_shadcn.TableCell, {
+									colSpan: table.getAllColumns().length,
+									className: cn("h-24 text-center", classNames?.td),
+									children: "No results."
+								})
+							})
+						})
+					]
+				})
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "flex flex-col gap-2.5",
@@ -1043,6 +1086,71 @@ function useDebouncedCallback(callback, delay) {
 	}, [handleCallback, delay]);
 }
 
+//#endregion
+//#region src/lib/calendar-date.ts
+/** Calendar days are wall dates, never instants in the host's time zone. */
+function serializeCalendarDate(date) {
+	return `${String(date.getFullYear()).padStart(4, "0")}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")}`;
+}
+function parseCalendarDate(value) {
+	if (value === void 0 || value === "") return void 0;
+	if (typeof value === "string" && /^\d{4}-\d{2}-\d{2}$/.test(value)) {
+		const date$1 = /* @__PURE__ */ new Date(`${value}T00:00:00`);
+		return !Number.isNaN(date$1.getTime()) && serializeCalendarDate(date$1) === value ? date$1 : void 0;
+	}
+	const date = new Date(Number(value));
+	return Number.isNaN(date.getTime()) ? void 0 : date;
+}
+function calendarPresentation() {
+	const localeOptions = getDateLocaleOptions();
+	const locale = localeOptions?.locale ?? "en-US";
+	const chinese = locale.toLowerCase().startsWith("zh");
+	const localeInfo = new Intl.Locale(locale);
+	const firstDay = localeInfo.getWeekInfo?.().firstDay ?? localeInfo.weekInfo?.firstDay ?? (chinese ? 1 : 7);
+	const format = (date, options) => new Intl.DateTimeFormat(locale, {
+		...options,
+		timeZone: "UTC"
+	}).format(/* @__PURE__ */ new Date(`${serializeCalendarDate(date)}T00:00:00Z`));
+	return {
+		locale,
+		weekStartsOn: firstDay % 7,
+		formatDate: (date) => {
+			if (!localeOptions) return formatDate(date);
+			return date ? format(date, {
+				year: "numeric",
+				month: "long",
+				day: "numeric"
+			}) : "";
+		},
+		clearLabel: (title) => chinese ? `清除${title ?? ""}筛选` : `Clear ${title ?? ""} filter`,
+		formatters: {
+			formatCaption: (date) => format(date, {
+				year: "numeric",
+				month: "long"
+			}),
+			formatMonthDropdown: (date) => format(date, { month: "long" }),
+			formatWeekdayName: (date) => format(date, { weekday: "short" })
+		},
+		labels: {
+			labelNext: () => chinese ? "下个月" : "Go to the Next Month",
+			labelPrevious: () => chinese ? "上个月" : "Go to the Previous Month",
+			labelMonthDropdown: () => chinese ? "选择月份" : "Choose the Month",
+			labelYearDropdown: () => chinese ? "选择年份" : "Choose the Year",
+			labelGrid: (date) => format(date, {
+				year: "numeric",
+				month: "long"
+			}),
+			labelWeekday: (date) => format(date, { weekday: "long" }),
+			labelDayButton: (date) => format(date, {
+				year: "numeric",
+				month: "long",
+				day: "numeric",
+				weekday: "long"
+			})
+		}
+	};
+}
+
 //#endregion
 //#region src/components/data-table/data-table-filter-list.tsx
 const DEBOUNCE_MS$2 = 300;
@@ -1214,6 +1322,7 @@ function DataTableFilterList({ table, debounceMs = DEBOUNCE_MS$2, throttleMs = T
 	});
 }
 function DataTableFilterItem$1({ filter, index: index$1, filterItemId, joinOperator, setJoinOperator, columns, onFilterUpdate, onFilterRemove }) {
+	useDateFormatterVersion();
 	const [showFieldSelector, setShowFieldSelector] = react.useState(false);
 	const [showOperatorSelector, setShowOperatorSelector] = react.useState(false);
 	const [showValueSelector, setShowValueSelector] = react.useState(false);
@@ -1502,10 +1611,10 @@ function onFilterInputRender$1({ filter, inputId, column, columnMeta, onFilterUp
 		case "dateRange": {
 			const inputListboxId = `${inputId}-listbox`;
 			const dateValue = Array.isArray(filter.value) ? filter.value.filter(Boolean) : [filter.value, filter.value].filter(Boolean);
-			const startDate = dateValue[0] ? new Date(Number(dateValue[0])) : void 0;
-			const endDate = dateValue[1] ? new Date(Number(dateValue[1])) : void 0;
+			const startDate = dateValue[0] ? parseCalendarDate(dateValue[0]) : void 0;
+			const endDate = dateValue[1] ? parseCalendarDate(dateValue[1]) : void 0;
 			const isSameDate = startDate && endDate && startDate.toDateString() === endDate.toDateString();
-			const displayValue = filter.operator === "isBetween" && dateValue.length === 2 && !isSameDate ? `${formatDate(startDate, { month: "short" })} - ${formatDate(endDate, { month: "short" })}` : startDate ? formatDate(startDate, { month: "short" }) : "Pick a date";
+			const displayValue = filter.operator === "isBetween" && dateValue.length === 2 && !isSameDate ? `${calendarPresentation().formatDate(startDate)} - ${calendarPresentation().formatDate(endDate)}` : startDate ? calendarPresentation().formatDate(startDate) : "Pick a date";
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__wordrhyme_shadcn.Popover, {
 				open: showValueSelector,
 				onOpenChange: setShowValueSelector,
@@ -1528,28 +1637,36 @@ function onFilterInputRender$1({ filter, inputId, column, columnMeta, onFilterUp
 					align: "start",
 					className: "w-auto p-0",
 					children: filter.operator === "isBetween" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__wordrhyme_shadcn.Calendar, {
+						lang: calendarPresentation().locale,
+						weekStartsOn: calendarPresentation().weekStartsOn,
+						formatters: calendarPresentation().formatters,
+						labels: calendarPresentation().labels,
 						"aria-label": `Select ${columnMeta?.label} date range`,
 						autoFocus: true,
 						captionLayout: "dropdown",
 						mode: "range",
 						selected: dateValue.length === 2 ? {
-							from: new Date(Number(dateValue[0])),
-							to: new Date(Number(dateValue[1]))
+							from: parseCalendarDate(dateValue[0]),
+							to: parseCalendarDate(dateValue[1])
 						} : {
 							from: /* @__PURE__ */ new Date(),
 							to: /* @__PURE__ */ new Date()
 						},
 						onSelect: (date) => {
-							onFilterUpdate(filter.filterId, { value: date ? [(date.from?.getTime() ?? "").toString(), (date.to?.getTime() ?? "").toString()] : [] });
+							onFilterUpdate(filter.filterId, { value: date ? [date.from ? serializeCalendarDate(date.from) : "", date.to ? serializeCalendarDate(date.to) : ""] : [] });
 						}
 					}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__wordrhyme_shadcn.Calendar, {
+						lang: calendarPresentation().locale,
+						weekStartsOn: calendarPresentation().weekStartsOn,
+						formatters: calendarPresentation().formatters,
+						labels: calendarPresentation().labels,
 						"aria-label": `Select ${columnMeta?.label} date`,
 						autoFocus: true,
 						captionLayout: "dropdown",
 						mode: "single",
-						selected: dateValue[0] ? new Date(Number(dateValue[0])) : void 0,
+						selected: dateValue[0] ? parseCalendarDate(dateValue[0]) : void 0,
 						onSelect: (date) => {
-							onFilterUpdate(filter.filterId, { value: (date?.getTime() ?? "").toString() });
+							onFilterUpdate(filter.filterId, { value: date ? serializeCalendarDate(date) : "" });
 							setShowValueSelector(false);
 						}
 					})
@@ -1761,6 +1878,7 @@ function DataTableFilterMenu({ table, debounceMs = DEBOUNCE_MS$1, throttleMs = T
 }
 function DataTableFilterItem({ filter, filterItemId, columns, onFilterUpdate, onFilterRemove }) {
 	{
+		useDateFormatterVersion();
 		const [showFieldSelector, setShowFieldSelector] = react.useState(false);
 		const [showOperatorSelector, setShowOperatorSelector] = react.useState(false);
 		const [showValueSelector, setShowValueSelector] = react.useState(false);
@@ -1871,6 +1989,7 @@ function DataTableFilterItem({ filter, filterItemId, columns, onFilterUpdate, on
 	}
 }
 function FilterValueSelector({ column, value, onSelect }) {
+	useDateFormatterVersion();
 	switch (column.columnDef.meta?.variant ?? "text") {
 		case "boolean": return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__wordrhyme_shadcn.CommandGroup, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__wordrhyme_shadcn.CommandItem, {
 			value: "true",
@@ -1899,11 +2018,15 @@ function FilterValueSelector({ column, value, onSelect }) {
 		}, option.value)) });
 		case "date":
 		case "dateRange": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__wordrhyme_shadcn.Calendar, {
+			lang: calendarPresentation().locale,
+			weekStartsOn: calendarPresentation().weekStartsOn,
+			formatters: calendarPresentation().formatters,
+			labels: calendarPresentation().labels,
 			autoFocus: true,
 			captionLayout: "dropdown",
 			mode: "single",
-			selected: value ? new Date(value) : void 0,
-			onSelect: (date) => onSelect(date?.getTime().toString() ?? "")
+			selected: parseCalendarDate(value),
+			onSelect: (date) => onSelect(date ? serializeCalendarDate(date) : "")
 		});
 		default: {
 			const isEmpty = !value.trim();
@@ -2057,10 +2180,10 @@ function onFilterInputRender({ filter, column, inputId, onFilterUpdate, showValu
 		case "dateRange": {
 			const inputListboxId = `${inputId}-listbox`;
 			const dateValue = Array.isArray(filter.value) ? filter.value.filter(Boolean) : [filter.value, filter.value].filter(Boolean);
-			const startDate = dateValue[0] ? new Date(Number(dateValue[0])) : void 0;
-			const endDate = dateValue[1] ? new Date(Number(dateValue[1])) : void 0;
+			const startDate = dateValue[0] ? parseCalendarDate(dateValue[0]) : void 0;
+			const endDate = dateValue[1] ? parseCalendarDate(dateValue[1]) : void 0;
 			const isSameDate = startDate && endDate && startDate.toDateString() === endDate.toDateString();
-			const displayValue = filter.operator === "isBetween" && dateValue.length === 2 && !isSameDate ? `${formatDate(startDate, { month: "short" })} - ${formatDate(endDate, { month: "short" })}` : startDate ? formatDate(startDate, { month: "short" }) : "Pick date...";
+			const displayValue = filter.operator === "isBetween" && dateValue.length === 2 && !isSameDate ? `${calendarPresentation().formatDate(startDate)} - ${calendarPresentation().formatDate(endDate)}` : startDate ? calendarPresentation().formatDate(startDate) : "Pick date...";
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__wordrhyme_shadcn.Popover, {
 				open: showValueSelector,
 				onOpenChange: setShowValueSelector,
@@ -2082,26 +2205,34 @@ function onFilterInputRender({ filter, column, inputId, onFilterUpdate, showValu
 					align: "start",
 					className: "w-auto p-0",
 					children: filter.operator === "isBetween" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__wordrhyme_shadcn.Calendar, {
+						lang: calendarPresentation().locale,
+						weekStartsOn: calendarPresentation().weekStartsOn,
+						formatters: calendarPresentation().formatters,
+						labels: calendarPresentation().labels,
 						autoFocus: true,
 						captionLayout: "dropdown",
 						mode: "range",
 						selected: dateValue.length === 2 ? {
-							from: new Date(Number(dateValue[0])),
-							to: new Date(Number(dateValue[1]))
+							from: parseCalendarDate(dateValue[0]),
+							to: parseCalendarDate(dateValue[1])
 						} : {
 							from: /* @__PURE__ */ new Date(),
 							to: /* @__PURE__ */ new Date()
 						},
 						onSelect: (date) => {
-							onFilterUpdate(filter.filterId, { value: date ? [(date.from?.getTime() ?? "").toString(), (date.to?.getTime() ?? "").toString()] : [] });
+							onFilterUpdate(filter.filterId, { value: date ? [date.from ? serializeCalendarDate(date.from) : "", date.to ? serializeCalendarDate(date.to) : ""] : [] });
 						}
 					}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__wordrhyme_shadcn.Calendar, {
+						lang: calendarPresentation().locale,
+						weekStartsOn: calendarPresentation().weekStartsOn,
+						formatters: calendarPresentation().formatters,
+						labels: calendarPresentation().labels,
 						autoFocus: true,
 						captionLayout: "dropdown",
 						mode: "single",
-						selected: dateValue[0] ? new Date(Number(dateValue[0])) : void 0,
+						selected: dateValue[0] ? parseCalendarDate(dateValue[0]) : void 0,
 						onSelect: (date) => {
-							onFilterUpdate(filter.filterId, { value: (date?.getTime() ?? "").toString() });
+							onFilterUpdate(filter.filterId, { value: date ? serializeCalendarDate(date) : "" });
 						}
 					})
 				})]
@@ -2850,11 +2981,17 @@ function SimpleSliderFilter({ title, range, unit, value, onChange }) {
 	})] });
 }
 function SimpleDateFilter({ title, multiple, value, onChange }) {
+	const [open, setOpen] = react.useState(false);
+	const commit = (next) => {
+		setOpen(false);
+		onChange(next);
+	};
+	const formatterVersion = useDateFormatterVersion();
+	const presentation = react.useMemo(() => calendarPresentation(), [formatterVersion]);
+	const { formatDate: formatDate$1 } = presentation;
 	const timestamps = Array.isArray(value) ? value : value ? [value] : [];
-	const fromTimestamp = timestamps[0] ? Number(timestamps[0]) : void 0;
-	const toTimestamp = timestamps[1] ? Number(timestamps[1]) : void 0;
-	const fromDate = fromTimestamp ? new Date(fromTimestamp) : void 0;
-	const toDate = toTimestamp ? new Date(toTimestamp) : void 0;
+	const fromDate = parseCalendarDate(timestamps[0]);
+	const toDate = parseCalendarDate(timestamps[1]);
 	const [localRange, setLocalRange] = react.useState({
 		from: void 0,
 		to: void 0
@@ -2873,100 +3010,114 @@ function SimpleDateFilter({ title, multiple, value, onChange }) {
 	const hasValue = multiple ? fromDate || toDate : fromDate;
 	const onReset = (e) => {
 		e.stopPropagation();
-		onChange(void 0);
+		commit(void 0);
 	};
-	const label = multiple ? fromDate && toDate ? `${formatDate(fromDate)} - ${formatDate(toDate)}` : fromDate ? formatDate(fromDate) : void 0 : fromDate ? formatDate(fromDate) : void 0;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__wordrhyme_shadcn.Popover, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__wordrhyme_shadcn.PopoverTrigger, {
-		asChild: true,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__wordrhyme_shadcn.Button, {
-			variant: "outline",
-			size: "sm",
-			className: "border-dashed font-normal",
-			children: [
-				hasValue ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					role: "button",
-					tabIndex: 0,
-					className: "rounded-sm opacity-70 hover:opacity-100",
-					onClick: onReset,
-					onKeyDown: (e) => {
-						if (e.key === "Enter" || e.key === " ") {
-							e.preventDefault();
-							onReset(e);
+	const label = multiple ? fromDate && toDate ? `${formatDate$1(fromDate)} - ${formatDate$1(toDate)}` : fromDate ? formatDate$1(fromDate) : void 0 : fromDate ? formatDate$1(fromDate) : void 0;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__wordrhyme_shadcn.Popover, {
+		open,
+		onOpenChange: setOpen,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__wordrhyme_shadcn.PopoverTrigger, {
+			asChild: true,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__wordrhyme_shadcn.Button, {
+				variant: "outline",
+				size: "sm",
+				className: "border-dashed font-normal",
+				children: [
+					hasValue ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						role: "button",
+						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 }),
+					label && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__wordrhyme_shadcn.Separator, {
+						orientation: "vertical",
+						className: "mx-0.5 h-4"
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: label })] })
+				]
+			})
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__wordrhyme_shadcn.PopoverContent, {
+			className: "w-auto p-0",
+			align: "start",
+			children: multiple ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__wordrhyme_shadcn.Calendar, {
+				lang: presentation.locale,
+				weekStartsOn: presentation.weekStartsOn,
+				formatters: presentation.formatters,
+				labels: presentation.labels,
+				defaultMonth: fromDate,
+				autoFocus: true,
+				captionLayout: "dropdown",
+				mode: "range",
+				selected: localRange,
+				onSelect: (range) => {
+					if (!range?.from && !range?.to) {
+						commit(void 0);
+						setLocalRange({
+							from: void 0,
+							to: void 0
+						});
+						return;
+					}
+					const hadFrom = Boolean(localRange.from);
+					const hadTo = Boolean(localRange.to);
+					const from = range.from?.getTime();
+					const to = range.to?.getTime();
+					if (from != null && to != null && from === to) {
+						if (!hadFrom || hadTo) {
+							setLocalRange({
+								from: range.from,
+								to: void 0
+							});
+							return;
 						}
-					},
-					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 }),
-				label && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__wordrhyme_shadcn.Separator, {
-					orientation: "vertical",
-					className: "mx-0.5 h-4"
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: label })] })
-			]
-		})
-	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__wordrhyme_shadcn.PopoverContent, {
-		className: "w-auto p-0",
-		align: "start",
-		children: multiple ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__wordrhyme_shadcn.Calendar, {
-			autoFocus: true,
-			captionLayout: "dropdown",
-			mode: "range",
-			selected: localRange,
-			onSelect: (range) => {
-				if (!range?.from && !range?.to) {
-					onChange(void 0);
-					setLocalRange({
-						from: void 0,
-						to: void 0
-					});
-					return;
-				}
-				const hadFrom = Boolean(localRange.from);
-				const hadTo = Boolean(localRange.to);
-				const from = range.from?.getTime();
-				const to = range.to?.getTime();
-				if (from != null && to != null && from === to) {
-					if (!hadFrom || hadTo) {
+						if (hadFrom && !hadTo && localRange.from) {
+							const prevFrom = localRange.from;
+							const newDate = range.from;
+							const [finalFrom, finalTo] = prevFrom <= newDate ? [prevFrom, newDate] : [newDate, prevFrom];
+							setLocalRange({
+								from: finalFrom,
+								to: finalTo
+							});
+							commit([serializeCalendarDate(finalFrom), serializeCalendarDate(finalTo)]);
+							return;
+						}
+					}
+					if (from != null && to != null && from !== to) {
 						setLocalRange({
 							from: range.from,
-							to: void 0
+							to: range.to
 						});
+						commit([serializeCalendarDate(range.from), serializeCalendarDate(range.to)]);
 						return;
 					}
-					if (hadFrom && !hadTo && localRange.from) {
-						const prevFrom = localRange.from;
-						const newDate = range.from;
-						const [finalFrom, finalTo] = prevFrom <= newDate ? [prevFrom, newDate] : [newDate, prevFrom];
+					if (range.from && !range.to) {
 						setLocalRange({
-							from: finalFrom,
-							to: finalTo
+							from: range.from,
+							to: void 0
 						});
-						onChange([finalFrom.getTime().toString(), finalTo.getTime().toString()]);
 						return;
 					}
 				}
-				if (from != null && to != null && from !== to) {
-					setLocalRange({
-						from: range.from,
-						to: range.to
-					});
-					onChange([range.from.getTime().toString(), range.to.getTime().toString()]);
-					return;
-				}
-				if (range.from && !range.to) {
-					setLocalRange({
-						from: range.from,
-						to: void 0
-					});
-					return;
-				}
-			}
-		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__wordrhyme_shadcn.Calendar, {
-			captionLayout: "dropdown",
-			mode: "single",
-			selected: fromDate,
-			onSelect: (date) => onChange(date ? date.getTime().toString() : void 0)
-		})
-	})] });
+			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__wordrhyme_shadcn.Calendar, {
+				lang: presentation.locale,
+				weekStartsOn: presentation.weekStartsOn,
+				formatters: presentation.formatters,
+				labels: presentation.labels,
+				defaultMonth: fromDate,
+				captionLayout: "dropdown",
+				mode: "single",
+				selected: fromDate,
+				onSelect: (date) => commit(date ? serializeCalendarDate(date) : void 0)
+			})
+		})]
+	});
 }
 
 //#endregion
@@ -3301,10 +3452,7 @@ function renderCell(value, type, options) {
 			className: "tabular-nums",
 			children: String(value)
 		});
-		default: return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-			className: "truncate max-w-48",
-			children: String(value)
-		});
+		default: return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: String(value) });
 	}
 }
 /**
@@ -3390,33 +3538,38 @@ function createSelectColumn() {
 		size: 40
 	};
 }
+function ActionsCell({ row, column }) {
+	const items = column.columnDef.meta?.rowActions ?? [];
+	const renderActionComponent = (item) => {
+		if (!item.component) return null;
+		return typeof item.component === "function" ? item.component(item.getContext?.(row.original)) : item.component;
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__wordrhyme_ui.DropdownMenu, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__wordrhyme_ui.DropdownMenuTrigger, {
+		asChild: true,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__wordrhyme_shadcn.Button, {
+			"aria-label": "Open menu",
+			variant: "ghost",
+			className: "flex size-8 p-0 data-[state=open]:bg-muted",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Ellipsis, { className: "size-4" })
+		})
+	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__wordrhyme_ui.DropdownMenuContent, {
+		align: "end",
+		className: "w-40",
+		children: items.map((item, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react.Fragment, { children: [item.separator && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__wordrhyme_ui.DropdownMenuSeparator, {}), item.component ? renderActionComponent(item) : item.label && item.onClick ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__wordrhyme_ui.DropdownMenuItem, {
+			className: item.variant === "destructive" ? "text-destructive" : "",
+			onClick: () => item.onClick?.(row.original),
+			children: item.label
+		}) : null] }, i))
+	})] });
+}
 /**
 * 创建操作列
 */
 function createActionsColumn(items) {
-	const renderActionComponent = (item, row) => {
-		if (!item.component) return null;
-		return typeof item.component === "function" ? item.component(item.getContext?.(row.original)) : item.component;
-	};
 	return {
 		id: "actions",
-		cell: ({ row }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__wordrhyme_shadcn.DropdownMenu, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__wordrhyme_shadcn.DropdownMenuTrigger, {
-			asChild: true,
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__wordrhyme_shadcn.Button, {
-				"aria-label": "Open menu",
-				variant: "ghost",
-				className: "flex size-8 p-0 data-[state=open]:bg-muted",
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Ellipsis, { className: "size-4" })
-			})
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__wordrhyme_shadcn.DropdownMenuContent, {
-			align: "end",
-			className: "w-40",
-			children: items.map((item, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react.Fragment, { children: [item.separator && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__wordrhyme_shadcn.DropdownMenuSeparator, {}), item.component ? renderActionComponent(item, row) : item.label && item.onClick ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__wordrhyme_shadcn.DropdownMenuItem, {
-				className: item.variant === "destructive" ? "text-destructive" : "",
-				onClick: () => item.onClick?.(row.original),
-				children: item.label
-			}) : null] }, i))
-		})] }),
+		cell: ActionsCell,
+		meta: { rowActions: items },
 		size: 40
 	};
 }
@@ -3974,7 +4127,8 @@ function useDataTable(props) {
 		if (enableAdvancedFilter) return [];
 		return Object.entries(filterValues).reduce((filters, [key, value]) => {
 			if (value !== null) {
-				const processedValue = Array.isArray(value) ? value : typeof value === "string" && /[^a-zA-Z0-9]/.test(value) ? value.split(/[^a-zA-Z0-9]+/).filter(Boolean) : [value];
+				const variant = filterableColumns.find((column) => column.id === key)?.meta?.variant;
+				const processedValue = Array.isArray(value) ? value : typeof value === "string" && (variant === "date" || variant === "dateRange") ? value.split(",").filter(Boolean) : typeof value === "string" && /[^a-zA-Z0-9]/.test(value) ? value.split(/[^a-zA-Z0-9]+/).filter(Boolean) : [value];
 				filters.push({
 					id: key,
 					value: processedValue
@@ -3982,7 +4136,11 @@ function useDataTable(props) {
 			}
 			return filters;
 		}, []);
-	}, [filterValues, enableAdvancedFilter]);
+	}, [
+		filterValues,
+		enableAdvancedFilter,
+		filterableColumns
+	]);
 	const [columnFilters, setColumnFilters] = react.useState(initialColumnFilters);
 	const onColumnFiltersChange = react.useCallback((updaterOrValue) => {
 		if (enableAdvancedFilter) return;
@@ -4090,7 +4248,7 @@ const filterModeConfig = {
 		tooltip: "Linear-style command filters"
 	}
 };
-function AutoTable({ schema, data, pageCount = 1, total, overrides, enableRowSelection = true, exclude, actions, pinnedColumns, filterMode, search = false, onDeleteSelected, onUpdateSelected, batchUpdateFields, actionBarExtra, actionBarActions, deleteConfirmation, initialSorting, enableExport = true, showDefaultExport = true, onSelectedCountChange, onSelectedRowsChange, getSelectedRows }) {
+function AutoTable({ schema, data, pageCount = 1, total, overrides, classNames, enableRowSelection = true, exclude, actions, pinnedColumns, filterMode, 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;
@@ -4252,7 +4410,10 @@ function AutoTable({ schema, data, pageCount = 1, total, overrides, enableRowSel
 					]
 				})]
 			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DataTable, { table }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DataTable, {
+				table,
+				classNames
+			}),
 			enableRowSelection && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AutoTableActionBar, {
 				table,
 				onDeleteSelected,
@@ -4272,16 +4433,16 @@ function AutoTable({ schema, data, pageCount = 1, total, overrides, enableRowSel
 //#endregion
 //#region src/components/auto-crud/form-modal.tsx
 function FormModal({ open, onOpenChange, title, description, children, variant = "dialog", side = "right", className, footer }) {
-	if (variant === "sheet") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__wordrhyme_shadcn.Sheet, {
+	if (variant === "sheet") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__wordrhyme_ui.Sheet, {
 		open,
 		onOpenChange,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__wordrhyme_shadcn.SheetContent, {
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__wordrhyme_ui.SheetContent, {
 			side,
 			className: cn("sm:max-w-lg flex flex-col p-0", className),
 			children: [
-				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__wordrhyme_shadcn.SheetHeader, {
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__wordrhyme_ui.SheetHeader, {
 					className: "flex-shrink-0 px-6 pt-6",
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__wordrhyme_shadcn.SheetTitle, { children: title }), description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__wordrhyme_shadcn.SheetDescription, { children: description })]
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__wordrhyme_ui.SheetTitle, { children: title }), description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__wordrhyme_ui.SheetDescription, { children: description })]
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					className: "flex-1 overflow-y-auto min-h-0",
@@ -4297,15 +4458,15 @@ function FormModal({ open, onOpenChange, title, description, children, variant =
 			]
 		})
 	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__wordrhyme_shadcn.Dialog, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__wordrhyme_ui.Dialog, {
 		open,
 		onOpenChange,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__wordrhyme_shadcn.DialogContent, {
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__wordrhyme_ui.DialogContent, {
 			className: cn("max-w-2xl sm:max-w-2xl flex flex-col max-h-[85vh] overflow-hidden p-0", className),
 			children: [
-				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__wordrhyme_shadcn.DialogHeader, {
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__wordrhyme_ui.DialogHeader, {
 					className: "flex-shrink-0 px-6 pt-6",
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__wordrhyme_shadcn.DialogTitle, { children: title }), description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__wordrhyme_shadcn.DialogDescription, { children: description })]
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__wordrhyme_ui.DialogTitle, { children: title }), description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__wordrhyme_ui.DialogDescription, { children: description })]
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					className: "flex-1 overflow-y-auto min-h-0",
@@ -5481,6 +5642,31 @@ function CrudFormModal({ open, onOpenChange, mode, schema, initialValues, onSubm
 	});
 }
 
+//#endregion
+//#region src/lib/row-action-dialog.tsx
+/** Keep custom dialogs at table level, independently of the source row's lifetime. */
+function useRowActionDialog() {
+	const [dialog, setDialog] = react.useState(null);
+	const session = react.useRef(0);
+	return {
+		openComponent: react.useCallback((next) => {
+			const id = ++session.current;
+			const dismiss = () => {
+				if (session.current === id) setDialog(null);
+			};
+			setDialog(react.cloneElement(next, {
+				key: id,
+				open: true,
+				onOpenChange: (open) => {
+					if (!open) dismiss();
+				},
+				onDismiss: dismiss
+			}));
+		}, []),
+		dialog
+	};
+}
+
 //#endregion
 //#region src/components/auto-crud/import-dialog.tsx
 function ImportDialog({ open, onOpenChange, onImport, columns = [], title, locale = zhCN.importDialog }) {
@@ -5837,22 +6023,29 @@ function isCustomAction$1(action$1) {
 	return action$1.type === "custom";
 }
 function resolveActions$1(targetId, zone, ownerActions) {
-	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);
+	const registered = targetId ? crudActions.get(targetId, zone) : [];
+	const hiddenCustomIds = new Set(registered.flatMap(({ action: action$1 }) => isCustomAction$1(action$1) && action$1.hidden && action$1.id ? [action$1.id] : []));
+	const isMaskedCustom = (action$1) => isCustomAction$1(action$1) && Boolean(action$1.id && hiddenCustomIds.has(action$1.id));
+	const customOverrides = /* @__PURE__ */ new Map();
+	for (const entry of registered) {
+		const { action: action$1 } = entry;
+		if (isCustomAction$1(action$1) && action$1.id && !isMaskedCustom(action$1)) customOverrides.set(action$1.id, entry);
+	}
+	const ownerCustomIds = new Set(ownerActions.flatMap((action$1) => isCustomAction$1(action$1) && action$1.id ? [action$1.id] : []));
+	const baseActions = ownerActions.filter((action$1) => !action$1.hidden && !isMaskedCustom(action$1)).map((action$1) => withoutRegistryMeta(isCustomAction$1(action$1) && action$1.id ? customOverrides.get(action$1.id)?.action ?? action$1 : action$1));
+	const isReplacedCustom = ({ action: action$1, seq: seq$1 }) => isCustomAction$1(action$1) && Boolean(action$1.id && (ownerCustomIds.has(action$1.id) || customOverrides.get(action$1.id)?.seq !== seq$1));
 	if (registered.length === 0) return baseActions;
 	const nextActions = [...baseActions];
 	const startCustomActions = [];
 	const endCustomActions = [];
+	const groups = /* @__PURE__ */ new Map();
 	for (const entry of registered) {
+		if (isMaskedCustom(entry.action)) continue;
+		const group = groups.get(entry.ownerId) ?? [];
+		group.push(entry);
+		groups.set(entry.ownerId, group);
 		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;
-		}
+		if (isCustomAction$1(action$1)) continue;
 		const existingIndex = nextActions.findIndex((item) => item.type === action$1.type);
 		if (action$1.hidden) {
 			if (existingIndex >= 0) nextActions.splice(existingIndex, 1);
@@ -5865,6 +6058,31 @@ function resolveActions$1(targetId, zone, ownerActions) {
 		};
 		else nextActions.push(builtin);
 	}
+	for (const group of groups.values()) {
+		const items = group.sort((left, right) => left.seq - right.seq).flatMap((entry) => {
+			const { action: action$1 } = entry;
+			if (action$1.hidden || isReplacedCustom(entry)) return [];
+			if (isCustomAction$1(action$1)) return [withoutRegistryMeta(action$1)];
+			const builtin = nextActions.find((item) => item.type === action$1.type);
+			return builtin ? [builtin] : [];
+		});
+		const firstBuiltin = items.find((item) => !isCustomAction$1(item));
+		if (firstBuiltin) {
+			let cursor = nextActions.indexOf(firstBuiltin);
+			for (const item of items) {
+				const existing = nextActions.indexOf(item);
+				if (existing >= cursor) cursor = existing + 1;
+				else {
+					if (existing >= 0) {
+						nextActions.splice(existing, 1);
+						cursor -= 1;
+					}
+					nextActions.splice(cursor, 0, item);
+					cursor += 1;
+				}
+			}
+		} else for (const custom of items) (custom.position === "start" ? startCustomActions : endCustomActions).push(custom);
+	}
 	return [
 		...startCustomActions,
 		...nextActions,
@@ -6136,13 +6354,6 @@ function mergeFieldOptions(current, incoming) {
 	if ((!current || current.length === 0) && (!incoming || incoming.length === 0)) return;
 	return mergeFilterOptions(current, incoming ?? []);
 }
-function mergeOptionsByField(left, right) {
-	const keys = new Set([...Object.keys(left ?? {}), ...Object.keys(right ?? {})]);
-	return Object.fromEntries(Array.from(keys).flatMap((key) => {
-		const options = mergeFieldOptions(left?.[key], right?.[key]);
-		return options ? [[key, options]] : [];
-	}));
-}
 function shouldResolveOptions(field, config, hiddenColumns) {
 	if (!config) return false;
 	if (hiddenColumns.has(field)) return false;
@@ -6500,6 +6711,7 @@ function buildTableOverrides(fields, legacyOverrides, dynamicFilterState, dynami
 		const mergedSharedDynamicOptions = mergeFieldOptions(dynamicFilterLabelOptions, tableConfig?.dataSource ? void 0 : dynamicResolveOptions);
 		const dynamicOptions = !fieldOptions && mergedSharedDynamicOptions ? toTableOptions(mergedSharedDynamicOptions) : void 0;
 		const tableMeta = config.table !== false && typeof config.table === "object" ? config.table.meta : void 0;
+		const tableClassNames = tableConfig?.classNames;
 		const fieldEnumMeta = tableOptions ? {
 			options: tableOptions,
 			variant: "multiSelect"
@@ -6539,13 +6751,14 @@ function buildTableOverrides(fields, legacyOverrides, dynamicFilterState, dynami
 				enableColumnFilter: false
 			};
 		}
-		if (fieldEnumMeta || fieldDataSourceMeta || tableMeta || filterMeta) result[key] = {
+		if (fieldEnumMeta || fieldDataSourceMeta || tableMeta || tableClassNames !== void 0 || filterMeta) result[key] = {
 			...result[key],
 			meta: {
 				...result[key]?.meta ?? {},
 				...fieldEnumMeta ?? {},
 				...fieldDataSourceMeta ?? {},
 				...tableMeta ?? {},
+				...tableClassNames !== void 0 ? { classNames: tableClassNames } : {},
 				...filterMeta ?? {}
 			}
 		};
@@ -6563,6 +6776,7 @@ function buildTableOverrides(fields, legacyOverrides, dynamicFilterState, dynami
 		};
 		else if (config.table && typeof config.table === "object") {
 			const { meta, display,...tableProps } = config.table;
+			delete tableProps.classNames;
 			delete tableProps.options;
 			delete tableProps.dataSource;
 			result[key] = {
@@ -6595,7 +6809,7 @@ function buildCapabilityTableOverrides(schema, capabilities) {
 		const override = {};
 		if (capabilities.filters) {
 			if (!capabilities.filters.enabled) override.enableColumnFilter = false;
-			else if (filterSet) override.enableColumnFilter = filterSet.has(key);
+			else if (filterSet && !filterSet.has(key)) override.enableColumnFilter = false;
 		}
 		if (capabilities.sort) {
 			if (!capabilities.sort.enabled) override.enableSorting = false;
@@ -6679,7 +6893,7 @@ function buildBatchUpdateFields(schema, batchFields, fields) {
 /**
 * 渲染字段值
 */
-function renderFieldValue(value, type, booleanLocale, options, display = "auto") {
+function renderFieldValue(value, type, booleanLocale, options, display = "auto", maxItems = 5) {
 	if (value === null || value === void 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 		className: "text-muted-foreground",
 		children: "-"
@@ -6694,12 +6908,12 @@ function renderFieldValue(value, type, booleanLocale, options, display = "auto")
 	if (display === "badge" && (!options || options.length === 0)) {
 		if (Array.isArray(value)) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: "flex gap-1 flex-wrap",
-			children: [value.slice(0, 5).map((item, index$1) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__wordrhyme_shadcn.Badge, {
+			children: [value.slice(0, maxItems).map((item, index$1) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__wordrhyme_shadcn.Badge, {
 				variant: "secondary",
 				children: String(item)
-			}, index$1)), value.length > 5 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__wordrhyme_shadcn.Badge, {
+			}, index$1)), value.length > maxItems && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__wordrhyme_shadcn.Badge, {
 				variant: "outline",
-				children: ["+", value.length - 5]
+				children: ["+", value.length - maxItems]
 			})]
 		});
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__wordrhyme_shadcn.Badge, {
@@ -6711,14 +6925,29 @@ function renderFieldValue(value, type, booleanLocale, options, display = "auto")
 	if ((display === "badge" || display === "auto") && options && options.length > 0) {
 		if (Array.isArray(value)) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: "flex gap-1 flex-wrap",
-			children: [value.slice(0, 5).map((v, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__wordrhyme_shadcn.Badge, {
+			children: [value.slice(0, maxItems).map((v, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__wordrhyme_shadcn.Badge, {
 				variant: "secondary",
 				children: getOptionLabel(v, options)
-			}, i)), value.length > 5 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__wordrhyme_shadcn.Badge, {
+			}, i)), value.length > maxItems && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__wordrhyme_shadcn.Badge, {
 				variant: "outline",
-				children: ["+", value.length - 5]
+				children: ["+", value.length - maxItems]
 			})]
 		});
+		const tone = options.find((option) => option.value === String(value))?.badgeTone;
+		const toneClassName = tone && {
+			neutral: "border-border bg-muted text-muted-foreground",
+			success: "border-emerald-200 bg-emerald-50 text-emerald-700 dark:border-emerald-800 dark:bg-emerald-950 dark:text-emerald-300",
+			warning: "border-amber-200 bg-amber-50 text-amber-700 dark:border-amber-800 dark:bg-amber-950 dark:text-amber-300",
+			info: "border-blue-200 bg-blue-50 text-blue-700 dark:border-blue-800 dark:bg-blue-950 dark:text-blue-300"
+		}[tone];
+		if (toneClassName) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__wordrhyme_shadcn.Badge, {
+			variant: "outline",
+			className: toneClassName,
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				"aria-hidden": "true",
+				className: "size-1.5 shrink-0 rounded-full bg-current"
+			}), getOptionLabel(value, options)]
+		});
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__wordrhyme_shadcn.Badge, {
 			variant: "outline",
 			className: "capitalize",
@@ -6735,48 +6964,81 @@ function renderFieldValue(value, type, booleanLocale, options, display = "auto")
 		});
 		case "array": return Array.isArray(value) ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: "flex gap-1 flex-wrap",
-			children: [value.slice(0, 5).map((v, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__wordrhyme_shadcn.Badge, {
+			children: [value.slice(0, maxItems).map((v, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__wordrhyme_shadcn.Badge, {
 				variant: "secondary",
 				children: String(v)
-			}, i)), value.length > 5 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__wordrhyme_shadcn.Badge, {
+			}, i)), value.length > maxItems && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__wordrhyme_shadcn.Badge, {
 				variant: "outline",
-				children: ["+", value.length - 5]
+				children: ["+", value.length - maxItems]
 			})]
 		}) : null;
 		default: return String(value);
 	}
 }
-/**
-* ViewModal 组件 - 详情查看弹窗
-*/
-function ViewModal({ open, onOpenChange, variant, data, schema, fields: fieldConfig, dynamicOptions, denyFields, locale }) {
-	if (!data) return null;
-	const shape = schema.shape;
-	const denySet = new Set(denyFields ?? []);
+function ViewModal(props) {
+	if (!props.open || !props.data) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ViewModalContent, { ...props });
+}
+function ViewModalContent({ open, onOpenChange, variant, data, schema, fields: fieldConfig, dynamicOptions, denyFields, locale, tableOverrides, view }) {
+	const excluded = react.useMemo(() => {
+		const denied = new Set(denyFields ?? []);
+		return Object.keys(schema.shape).filter((key) => {
+			const config = fieldConfig?.[key];
+			return denied.has(key) || config?.hidden || view?.overrides?.[key]?.hidden || isDefaultHiddenAuditField(key) && !isFieldTableExplicitlyVisible(config) && view?.overrides?.[key]?.hidden !== false;
+		});
+	}, [
+		schema,
+		fieldConfig,
+		denyFields,
+		view?.overrides
+	]);
+	const rows = react.useMemo(() => data ? [data] : [], [data]);
+	const resolvedOptions = useDynamicResolveOptions(fieldConfig, rows, excluded);
 	const content = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("dl", {
 		className: "grid gap-4 py-4",
-		children: Object.entries(shape).filter(([key]) => {
-			if (denySet.has(key)) return false;
-			const config = fieldConfig?.[key];
-			if (config?.hidden) return false;
-			if (isDefaultHiddenAuditField(key) && !isFieldTableExplicitlyVisible(config)) return false;
-			return true;
-		}).map(([key, fieldSchema]) => {
-			const parsed = parseZodField(fieldSchema);
-			const label = fieldConfig?.[key]?.label ?? humanize(key);
-			const value = data[key];
-			const options = normalizeFieldOptions(fieldConfig?.[key]?.enum) ?? normalizeFieldOptions(dynamicOptions?.[key]);
-			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "grid grid-cols-3 items-start gap-4",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("dt", {
-					className: "text-sm font-medium text-muted-foreground",
-					children: label
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("dd", {
-					className: "col-span-2 text-sm",
-					children: renderFieldValue(value, parsed.type, locale.boolean, options)
-				})]
-			}, key);
-		})
+		children: (0, __tanstack_react_table.useReactTable)({
+			data: rows,
+			columns: react.useMemo(() => {
+				const overrides = {};
+				for (const [key, fieldSchema] of Object.entries(schema.shape).filter(([fieldKey]) => !excluded.includes(fieldKey))) {
+					const config = fieldConfig?.[key] ?? {};
+					const tableConfig = getTableConfig(config);
+					const listOverride = tableOverrides?.[key];
+					const options = getTableOptions(config) ?? resolvedOptions.optionsByField[key] ?? (tableConfig?.dataSource !== void 0 ? void 0 : dynamicOptions?.[key]);
+					overrides[key] = {
+						label: tableConfig?.label ?? config.label ?? listOverride?.label ?? humanize(key),
+						index: tableConfig?.index ?? listOverride?.index,
+						cell: ({ getValue }) => renderFieldValue(getValue(), parseZodField(fieldSchema).type, locale.boolean, options, tableConfig?.display ?? "auto", Infinity),
+						...view?.presentation === "table" ? listOverride : void 0,
+						hidden: false,
+						...view?.overrides?.[key]
+					};
+				}
+				return createTableSchema(schema, {
+					overrides,
+					exclude: excluded
+				});
+			}, [
+				schema,
+				excluded,
+				fieldConfig,
+				tableOverrides,
+				view,
+				resolvedOptions.optionsByField,
+				dynamicOptions,
+				locale.boolean
+			]),
+			getCoreRowModel: (0, __tanstack_react_table.getCoreRowModel)()
+		}).getRowModel().rows[0]?.getAllCells().map((cell) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "grid grid-cols-3 items-start gap-4",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("dt", {
+				className: "text-sm font-medium text-muted-foreground",
+				children: cell.column.columnDef.meta?.label ?? humanize(cell.column.id)
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("dd", {
+				className: "col-span-2 min-w-0 whitespace-pre-wrap break-words text-sm",
+				children: (0, __tanstack_react_table.flexRender)(cell.column.columnDef.cell, cell.getContext())
+			})]
+		}, cell.id))
 	});
 	if (variant === "sheet") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__wordrhyme_shadcn.Sheet, {
 		open,
@@ -6796,14 +7058,9 @@ function ViewModal({ open, onOpenChange, variant, data, schema, fields: fieldCon
 /**
 * 解析列表行操作
 */
-function resolveActions(actionsOrFn, defaults, rowActionsLocale, context) {
-	const resolvedItems = typeof actionsOrFn === "function" ? actionsOrFn([
-		{ type: "view" },
-		{ type: "edit" },
-		{ type: "copy" },
-		{ type: "delete" }
-	]) : actionsOrFn;
+function resolveActions(actions, defaults, rowActionsLocale, context) {
 	const getContext = (row) => ({
+		MenuItem: __wordrhyme_ui.DropdownMenuItem,
 		crudId: context.crudId,
 		idKey: context.idKey,
 		row,
@@ -6811,54 +7068,13 @@ function resolveActions(actionsOrFn, defaults, rowActionsLocale, context) {
 		openView: defaults.openView,
 		...defaults.openEdit ? { openEdit: defaults.openEdit } : {},
 		...defaults.copyRow ? { copyRow: defaults.copyRow } : {},
-		...defaults.openDelete ? { openDelete: defaults.openDelete } : {}
+		...defaults.openDelete ? { openDelete: defaults.openDelete } : {},
+		open: (options) => {
+			if (options.type === "custom") context.openComponent(options.component);
+			else handlerMap[options.type]?.(options.row);
+		}
 	});
-	const defaultItems = [
-		{
-			label: rowActionsLocale.view,
-			onClick: defaults.openView
-		},
-		...defaults.openEdit ? [{
-			label: rowActionsLocale.edit,
-			onClick: defaults.openEdit
-		}] : [],
-		...defaults.copyRow ? [{
-			label: rowActionsLocale.copy,
-			onClick: defaults.copyRow
-		}] : [],
-		...defaults.openDelete ? [{
-			label: rowActionsLocale.delete,
-			onClick: defaults.openDelete,
-			separator: true,
-			variant: "destructive"
-		}] : []
-	];
-	if (resolvedItems === void 0) return defaultItems;
-	const items = resolvedItems.filter((item) => !item.hidden);
-	if (items.length === 0) return [];
-	if (!items.some((i) => i.type !== "custom")) {
-		const startItems = items.filter((i) => i.type === "custom" && i.position === "start").map(({ label, onClick, component, separator, variant }) => ({
-			label,
-			onClick,
-			component,
-			getContext,
-			separator,
-			variant
-		}));
-		const endItems = items.filter((i) => i.type === "custom" && i.position !== "start").map(({ label, onClick, component, separator, variant }) => ({
-			label,
-			onClick,
-			component,
-			getContext,
-			separator,
-			variant
-		}));
-		return [
-			...startItems,
-			...defaultItems,
-			...endItems
-		];
-	}
+	const items = actions.filter((item) => !item.hidden);
 	const handlerMap = {
 		view: defaults.openView,
 		edit: defaults.openEdit,
@@ -6897,7 +7113,7 @@ function resolveActions(actionsOrFn, defaults, rowActionsLocale, context) {
 *
 * 高级 CRUD 表格组件，封装了完整的增删改查流程
 */
-function AutoCrudTable({ id, title, description, schema, resource, fields, table: tableConfig, form: formConfig, permissions, actions: actionItems, toolbar, toolbarActions, locale: localeProp, onCreate }) {
+function AutoCrudTable({ id, title, description, schema, resource, fields, table: tableConfig, form: formConfig, view: viewConfig, permissions, actions: actionItems, toolbar, toolbarActions, locale: localeProp, onCreate }) {
 	const locale = resolveLocale(localeProp);
 	const resolvedSchema = resource.schema ?? schema;
 	const resolvedFields = react.useMemo(() => applyResourceTablePresentation(mergeFields(resource.fields, fields), resource.fields) ?? {}, [fields, resource.fields]);
@@ -6923,18 +7139,6 @@ function AutoCrudTable({ id, title, description, schema, resource, fields, table
 		tableConfig?.overrides
 	]);
 	const dynamicResolveOptions = useDynamicResolveOptions(resolvedFields, resource.tableData.data, hiddenColumns);
-	const sharedResolveOptions = useDynamicResolveOptions(react.useMemo(() => Object.fromEntries(Object.entries(resolvedFields).flatMap(([field, config]) => {
-		const table = getTableConfig(config);
-		if (table?.options === void 0 && table?.dataSource === void 0) return [];
-		const { table: _table,...sharedConfig } = config;
-		return [[field, sharedConfig]];
-	})), [resolvedFields]), resource.tableData.data, hiddenColumns);
-	const viewDynamicOptionsByField = react.useMemo(() => mergeOptionsByField(mergeOptionsByField(dynamicFilterOptions.labelOptionsByField, sharedResolveOptions.optionsByField), Object.fromEntries(Object.entries(dynamicResolveOptions.optionsByField).filter(([field]) => !getTableConfig(resolvedFields[field] ?? {})?.dataSource))), [
-		dynamicFilterOptions.labelOptionsByField,
-		dynamicResolveOptions.optionsByField,
-		sharedResolveOptions.optionsByField,
-		resolvedFields
-	]);
 	const resourceIdKey = resource.idKey ?? "id";
 	const actionRegistryVersion = useCrudActionsVersion();
 	const unifiedActions = react.useMemo(() => {
@@ -7122,15 +7326,18 @@ function AutoCrudTable({ id, title, description, schema, resource, fields, table
 		resource.handlers.openEdit,
 		resource.handlers.openView
 	]);
+	const { openComponent, dialog: rowActionDialog } = useRowActionDialog();
 	const tableRowActions = react.useMemo(() => resolveActions(registryRowActions, rowActionDefaults, locale.rowActions, {
 		crudId: id ?? "",
-		idKey: resourceIdKey
+		idKey: resourceIdKey,
+		openComponent
 	}), [
 		id,
 		locale.rowActions,
 		registryRowActions,
 		resourceIdKey,
-		rowActionDefaults
+		rowActionDefaults,
+		openComponent
 	]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: "space-y-4",
@@ -7226,6 +7433,7 @@ function AutoCrudTable({ id, title, description, schema, resource, fields, table
 				pageCount: resource.tableData.pageCount,
 				...resource.tableData.total !== void 0 ? { total: resource.tableData.total } : {},
 				overrides: tableOverrides,
+				classNames: tableConfig?.classNames,
 				exclude: hiddenColumns,
 				filterMode: tableConfig?.filterModes,
 				search: searchConfig,
@@ -7241,6 +7449,7 @@ function AutoCrudTable({ id, title, description, schema, resource, fields, table
 				onSelectedRowsChange: handleSelectedRowsChange,
 				getSelectedRows: getSelectedRowsRef
 			}),
+			rowActionDialog,
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CrudFormModal, {
 				open: resource.modal.createOpen || resource.modal.editOpen,
 				onOpenChange: (open) => !open && resource.handlers.closeModals(),
@@ -7266,9 +7475,11 @@ function AutoCrudTable({ id, title, description, schema, resource, fields, table
 				data: resource.modal.selected,
 				schema: resolvedSchema,
 				fields: resolvedFields,
-				dynamicOptions: viewDynamicOptionsByField,
+				dynamicOptions: dynamicFilterOptions.labelOptionsByField,
 				denyFields,
-				locale
+				locale,
+				tableOverrides,
+				view: viewConfig
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__wordrhyme_shadcn.AlertDialog, {
 				open: resource.modal.deleteOpen,
@@ -7465,10 +7676,7 @@ function getIsDateRange(value) {
 	return value && typeof value === "object" && !Array.isArray(value);
 }
 function parseAsDate(timestamp) {
-	if (!timestamp) return void 0;
-	const numericTimestamp = typeof timestamp === "string" ? Number(timestamp) : timestamp;
-	const date = new Date(numericTimestamp);
-	return !Number.isNaN(date.getTime()) ? date : void 0;
+	return parseCalendarDate(timestamp);
 }
 function parseColumnFilterValue(value) {
 	if (value === null || value === void 0) return [];
@@ -7479,6 +7687,9 @@ function parseColumnFilterValue(value) {
 	return [];
 }
 function DataTableDateFilter({ column, title, multiple }) {
+	const formatterVersion = useDateFormatterVersion();
+	const presentation = react.useMemo(() => calendarPresentation(), [formatterVersion]);
+	const { formatDate: formatDate$1 } = presentation;
 	const columnFilterValue = column.getFilterValue();
 	const selectedDates = react.useMemo(() => {
 		if (!columnFilterValue) return multiple ? {
@@ -7552,12 +7763,12 @@ function DataTableDateFilter({ column, title, multiple }) {
 					from: nextFrom,
 					to: nextTo
 				});
-				if (nextTo) column.setFilterValue([nextFrom.getTime(), nextTo.getTime()]);
+				if (nextTo) column.setFilterValue([serializeCalendarDate(nextFrom), serializeCalendarDate(nextTo)]);
 				return;
 			}
 			setLocalRange(date);
-			if (from && to) column.setFilterValue([from, to]);
-		} else if (!multiple && "getTime" in date) column.setFilterValue(date.getTime());
+			if (from && to) column.setFilterValue([serializeCalendarDate(new Date(from)), serializeCalendarDate(new Date(to))]);
+		} else if (!multiple && "getTime" in date) column.setFilterValue(serializeCalendarDate(date));
 	}, [
 		column,
 		multiple,
@@ -7577,9 +7788,9 @@ function DataTableDateFilter({ column, title, multiple }) {
 	}, [multiple, selectedDates]);
 	const formatDateRange = react.useCallback((range) => {
 		if (!range.from && !range.to) return "";
-		if (range.from && range.to) return `${formatDate(range.from)} - ${formatDate(range.to)}`;
-		return formatDate(range.from ?? range.to);
-	}, []);
+		if (range.from && range.to) return `${formatDate$1(range.from)} - ${formatDate$1(range.to)}`;
+		return formatDate$1(range.from ?? range.to);
+	}, [formatDate$1]);
 	const label = react.useMemo(() => {
 		if (multiple) {
 			if (!getIsDateRange(selectedDates)) return null;
@@ -7595,7 +7806,7 @@ function DataTableDateFilter({ column, title, multiple }) {
 		}
 		if (getIsDateRange(selectedDates)) return null;
 		const hasSelectedDate = selectedDates.length > 0;
-		const dateText = hasSelectedDate ? formatDate(selectedDates[0]) : "Select date";
+		const dateText = hasSelectedDate ? formatDate$1(selectedDates[0]) : "Select date";
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
 			className: "flex items-center gap-2",
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: title }), hasSelectedDate && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__wordrhyme_shadcn.Separator, {
@@ -7607,7 +7818,8 @@ function DataTableDateFilter({ column, title, multiple }) {
 		selectedDates,
 		multiple,
 		formatDateRange,
-		title
+		title,
+		formatDate$1
 	]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__wordrhyme_shadcn.Popover, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__wordrhyme_shadcn.PopoverTrigger, {
 		asChild: true,
@@ -7617,7 +7829,7 @@ function DataTableDateFilter({ column, title, multiple }) {
 			className: "border-dashed font-normal",
 			children: [hasValue ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				role: "button",
-				"aria-label": `Clear ${title} filter`,
+				"aria-label": presentation.clearLabel(title),
 				tabIndex: 0,
 				onClick: onReset,
 				className: "rounded-sm opacity-70 transition-opacity hover:opacity-100 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
@@ -7628,14 +7840,24 @@ function DataTableDateFilter({ column, title, multiple }) {
 		className: "w-auto p-0",
 		align: "start",
 		children: multiple ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__wordrhyme_shadcn.Calendar, {
+			lang: presentation.locale,
+			weekStartsOn: presentation.weekStartsOn,
+			formatters: presentation.formatters,
+			labels: presentation.labels,
 			autoFocus: true,
 			captionLayout: "dropdown",
 			mode: "range",
+			defaultMonth: localRange.from,
 			selected: localRange,
 			onSelect
 		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__wordrhyme_shadcn.Calendar, {
+			lang: presentation.locale,
+			weekStartsOn: presentation.weekStartsOn,
+			formatters: presentation.formatters,
+			labels: presentation.labels,
 			captionLayout: "dropdown",
 			mode: "single",
+			defaultMonth: !getIsDateRange(selectedDates) ? selectedDates[0] : void 0,
 			selected: !getIsDateRange(selectedDates) ? selectedDates[0] : void 0,
 			onSelect
 		})