@wordrhyme/auto-crud 1.5.7 → 1.6.0

package/dist/index.cjs

@@ -420,13 +420,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 +437,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) {
@@ -1043,6 +1046,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 +1282,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 +1571,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 +1597,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 +1838,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 +1949,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 +1978,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 +2140,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 +2165,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 +2941,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 +2970,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
@@ -3974,7 +4085,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 +4094,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;
@@ -6136,13 +6252,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;
@@ -6679,7 +6788,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 +6803,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,12 +6820,12 @@ 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]
 			})]
 		});
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__wordrhyme_shadcn.Badge, {
@@ -6735,48 +6844,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,
@@ -6897,7 +7039,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 +7065,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(() => {
@@ -7266,9 +7396,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 +7597,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 +7608,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 +7684,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 +7709,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 +7727,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 +7739,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 +7750,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 +7761,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
 		})