@datum-cloud/datum-ui 0.3.0-alpha.9d90881 → 0.3.0-alpha.bdce331

package/dist/data-table/index.mjs

@@ -1,22 +1,25 @@
-import { t as cn } from "../utils-Bfgoe-Gm.mjs";
-import { t as Button } from "../button-AzpnV-WB.mjs";
-import { t as Checkbox } from "../checkbox-DB5_3E_l.mjs";
-import "../dialog-Bm4trnic.mjs";
-import { a as CommandInput, i as CommandGroup, o as CommandItem, r as CommandEmpty, s as CommandList, t as Command } from "../command-DQlO6uTL.mjs";
-import { t as Input } from "../input-C-ZmsHkk.mjs";
-import { t as Label } from "../label-ClzLBWRT.mjs";
-import { i as DropdownMenuItem, l as DropdownMenuTrigger, r as DropdownMenuContent, t as DropdownMenu } from "../dropdown-menu-Xahj42Gr.mjs";
-import { i as PopoverTrigger, r as PopoverContent, t as Popover } from "../popover-CYzXdp9q.mjs";
-import { d as Select, f as SelectContent, h as SelectValue, m as SelectTrigger, p as SelectItem } from "../select-BznmyqBr.mjs";
-import { t as Skeleton } from "../skeleton-D3qW_KvG.mjs";
-import { c as TableRow, i as TableCell, n as TableBody, o as TableHead, s as TableHeader, t as Table } from "../table-fZEvpdD-.mjs";
-import { t as CalendarDatePicker } from "../calendar-date-picker-BBAg78Lg.mjs";
-import { cva } from "class-variance-authority";
+import { t as cn } from "../cn-DWCc1QRE.mjs";
+import { t as Badge } from "../badge-bFgeYceE.mjs";
+import "../utils-Bfgoe-Gm.mjs";
+import { t as Button } from "../button-C1wRfGtT.mjs";
+import "../button-AzpnV-WB.mjs";
+import { t as Checkbox } from "../checkbox-LG1OKTpG.mjs";
+import "../dialog-DXBaT9gA.mjs";
+import { a as CommandInput, i as CommandGroup, o as CommandItem, r as CommandEmpty, s as CommandList, t as Command } from "../command-s0Yv3abE.mjs";
+import "../input-DuyjEKEW.mjs";
+import { t as Input } from "../input-fzXBheCN.mjs";
+import { t as Label } from "../label-_ste_Re3.mjs";
+import { i as DropdownMenuItem, l as DropdownMenuTrigger, r as DropdownMenuContent, t as DropdownMenu } from "../dropdown-menu-DAFyO-qD.mjs";
+import { i as PopoverTrigger, r as PopoverContent, t as Popover } from "../popover-Ds9624qY.mjs";
+import { i as SelectItem, l as SelectTrigger, n as SelectContent, t as Select, u as SelectValue } from "../select-CwVIFWFO.mjs";
+import { t as Skeleton } from "../skeleton-Cs6Q5GQc.mjs";
+import { c as TableRow, i as TableCell, n as TableBody, o as TableHead, s as TableHeader, t as Table } from "../table-Dc3HfbM4.mjs";
+import { t as CalendarDatePicker } from "../calendar-date-picker-mlbzp3xR.mjs";
 import { ArrowDown, ArrowUp, ArrowUpDown, Check, ChevronDown, ChevronLeft, ChevronRight, MoreHorizontal, X } from "lucide-react";
-import { createContext, use, useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { parseAsInteger, parseAsJson, parseAsString, useQueryStates } from "nuqs";
-import { flexRender, getCoreRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useReactTable } from "@tanstack/react-table";
+import { createContext, memo, use, useCallback, useContext, useEffect, useId, useMemo, useRef, useState, useSyncExternalStore } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { parseAsInteger, parseAsString, useQueryStates } from "nuqs";
+import { flexRender, getCoreRowModel, getPaginationRowModel, getSortedRowModel, useReactTable } from "@tanstack/react-table";
 
 //#region src/components/features/data-table/constants.ts
 const DEFAULT_PAGE_SIZE = 20;
@@ -32,15 +35,32 @@ const DEFAULT_LOADING_ROWS = 5;
 //#endregion
 //#region src/components/features/data-table/adapters/nuqs-adapter.ts
 /**
-* Default parsers for core DataTable state.
-* URL params: ?sort=[...]&q=hello&page=0&size=20
+* Serialize SortingState to URL-friendly string.
+* Format: "name" (asc), "-name" (desc), comma-separated for multi-sort.
+* Example: "-department,name" → [{id:"department",desc:true},{id:"name",desc:false}]
 */
-function sortingValidator(value) {
-	if (!Array.isArray(value)) return null;
-	return value.every((item) => typeof item === "object" && item !== null && typeof item.id === "string" && typeof item.desc === "boolean") ? value : null;
+function serializeSorting(sorting) {
+	if (sorting.length === 0) return "";
+	return sorting.map((s) => s.desc ? `-${s.id}` : s.id).join(",");
+}
+/**
+* Parse URL sort string back to SortingState.
+*/
+function parseSorting(value) {
+	if (!value) return [];
+	return value.split(",").filter(Boolean).map((part) => {
+		if (part.startsWith("-")) return {
+			id: part.slice(1),
+			desc: true
+		};
+		return {
+			id: part,
+			desc: false
+		};
+	});
 }
 const coreSearchParams = {
-	sort: parseAsJson(sortingValidator).withDefault([]),
+	sort: parseAsString.withDefault(""),
 	q: parseAsString.withDefault(""),
 	page: parseAsInteger.withDefault(0),
 	size: parseAsInteger.withDefault(DEFAULT_PAGE_SIZE)
@@ -48,22 +68,21 @@ const coreSearchParams = {
 /**
 * Hook that creates a StateAdapter backed by nuqs URL query state.
 *
-* Manages sorting, search, pageIndex, and pageSize automatically.
-* Consumer only needs to declare custom filter parsers.
+* URL format:
+* - `?sort=name` (asc) or `?sort=-name` (desc), comma-separated for multi-sort
+* - `?q=search` for search text
+* - `?page=0&size=20` for pagination
+* - Custom filter keys as declared in options
 *
 * Requires `nuqs` to be installed in the consumer app.
 *
 * @example
 * ```tsx
-* // Zero config — all defaults synced to URL
-* const stateAdapter = useNuqsAdapter()
-* const tableState = useDataTableClient({ data, columns, stateAdapter })
-*
-* // With custom filters synced to URL
-* import { parseAsString } from 'nuqs'
-*
 * const stateAdapter = useNuqsAdapter({
-*   filters: { status: parseAsString.withDefault('') },
+*   filters: {
+*     status: parseAsString.withDefault(''),
+*     department: parseAsArrayOf(parseAsString).withDefault([]),
+*   },
 * })
 * const tableState = useDataTableClient({ data, columns, stateAdapter })
 * ```
@@ -75,7 +94,7 @@ function useNuqsAdapter(options = {}) {
 	const [filterState, setFilterState] = useQueryStates(hasFilters ? filterParsers : { _dt: parseAsString.withDefault("") });
 	return useMemo(() => ({
 		read: () => ({
-			sorting: coreState.sort,
+			sorting: parseSorting(coreState.sort),
 			search: coreState.q,
 			pageIndex: coreState.page,
 			pageSize: coreState.size,
@@ -83,19 +102,24 @@ function useNuqsAdapter(options = {}) {
 		}),
 		write: (state) => {
 			setCoreState({
-				sort: state.sorting,
+				sort: serializeSorting(state.sorting),
 				q: state.search,
 				page: state.pageIndex ?? 0,
 				size: state.pageSize ?? DEFAULT_PAGE_SIZE
 			});
-			if (hasFilters) setFilterState(state.filters);
+			if (hasFilters && filterParsers) {
+				const update = {};
+				for (const key of Object.keys(filterParsers)) update[key] = state.filters?.[key] ?? null;
+				setFilterState(update);
+			}
 		}
 	}), [
 		coreState,
 		filterState,
 		hasFilters,
 		setCoreState,
-		setFilterState
+		setFilterState,
+		filterParsers
 	]);
 }
 
@@ -131,22 +155,587 @@ function withSelectionColumn(columns, options = {}) {
 	return [createSelectionColumn(options), ...columns];
 }
 
+//#endregion
+//#region src/components/features/data-table/core/filter-engine.ts
+const FILTER_STRATEGIES = {
+	"checkbox": (cellValue, filterValue) => {
+		if (filterValue == null) return true;
+		if (Array.isArray(filterValue) && filterValue.length === 0) return true;
+		if (!Array.isArray(filterValue)) return cellValue === filterValue;
+		if (Array.isArray(cellValue)) return cellValue.some((v) => filterValue.includes(v));
+		return filterValue.includes(cellValue);
+	},
+	"select": (cellValue, filterValue) => {
+		if (filterValue == null || filterValue === "") return true;
+		return cellValue === filterValue;
+	},
+	"date-gte": (cellValue, filterValue) => {
+		if (!filterValue) return true;
+		const cell = new Date(cellValue);
+		const filter = new Date(filterValue);
+		if (Number.isNaN(cell.getTime()) || Number.isNaN(filter.getTime())) return true;
+		return cell >= filter;
+	},
+	"date-lte": (cellValue, filterValue) => {
+		if (!filterValue) return true;
+		const cell = new Date(cellValue);
+		const filter = new Date(filterValue);
+		if (Number.isNaN(cell.getTime()) || Number.isNaN(filter.getTime())) return true;
+		return cell <= filter;
+	}
+};
+function resolveStrategy(strategy) {
+	if (!strategy) return void 0;
+	if (typeof strategy === "function") return strategy;
+	return FILTER_STRATEGIES[strategy];
+}
+function applyFilters(data, filters, search, registeredFilters, customFilterFns, searchConfig) {
+	const hasFilters = Object.keys(filters).length > 0;
+	const hasSearch = search.length > 0;
+	if (!hasFilters && !hasSearch) return data;
+	return data.filter((row) => {
+		if (hasFilters) for (const [column, value] of Object.entries(filters)) {
+			const fn = customFilterFns[column] ?? resolveStrategy(registeredFilters.get(column));
+			if (!fn) {
+				console.warn(`[DataTable] No filter strategy registered for column "${column}". Filter ignored.`);
+				continue;
+			}
+			const cellValue = row[column];
+			if (!fn(cellValue, value)) return false;
+		}
+		if (hasSearch) {
+			const query = search.toLowerCase();
+			if (searchConfig.searchFn) return searchConfig.searchFn(row, search);
+			if (searchConfig.searchableColumns && searchConfig.searchableColumns.length > 0) return searchConfig.searchableColumns.some((col) => {
+				const cellValue = row[col];
+				return cellValue != null && String(cellValue).toLowerCase().includes(query);
+			});
+			return Object.values(row).some((val) => {
+				if (val == null) return false;
+				return String(val).toLowerCase().includes(query);
+			});
+		}
+		return true;
+	});
+}
+
+//#endregion
+//#region src/components/features/data-table/core/store.ts
+function createDataTableStore(options) {
+	let registeredFilters = /* @__PURE__ */ new Map();
+	const listeners = /* @__PURE__ */ new Set();
+	function computeFilteredData(s) {
+		if (s.mode === "server") return s.data;
+		return applyFilters(s.data, s.filters, s.search, registeredFilters, options.filterFns ?? {}, {
+			searchFn: options.searchFn,
+			searchableColumns: options.searchableColumns
+		});
+	}
+	let state = {
+		data: options.data,
+		filteredData: options.data,
+		sorting: options.defaultSort ?? [],
+		filters: options.defaultFilters ?? {},
+		search: "",
+		rowSelection: {},
+		pageIndex: 0,
+		pageSize: options.pageSize ?? DEFAULT_PAGE_SIZE,
+		mode: options.mode,
+		isLoading: false,
+		error: null,
+		inlineContents: [],
+		_version: 0
+	};
+	if (options.defaultFilters && Object.keys(options.defaultFilters).length > 0) state = {
+		...state,
+		filteredData: computeFilteredData(state)
+	};
+	function notify() {
+		for (const listener of listeners) listener();
+	}
+	function setState(next) {
+		state = {
+			...next,
+			_version: state._version + 1
+		};
+		notify();
+	}
+	return {
+		getSnapshot: () => state,
+		subscribe: (listener) => {
+			listeners.add(listener);
+			return () => listeners.delete(listener);
+		},
+		setData: (data) => {
+			const next = {
+				...state,
+				data,
+				pageIndex: 0,
+				rowSelection: {}
+			};
+			setState({
+				...next,
+				filteredData: computeFilteredData(next)
+			});
+		},
+		setServerData: (data) => {
+			setState({
+				...state,
+				data,
+				filteredData: data
+			});
+		},
+		setTable: (_t) => {},
+		setSorting: (sorting) => {
+			setState({
+				...state,
+				sorting,
+				rowSelection: {}
+			});
+		},
+		setFilter: (key, value) => {
+			const next = {
+				...state,
+				filters: {
+					...state.filters,
+					[key]: value
+				},
+				rowSelection: {},
+				pageIndex: 0
+			};
+			setState({
+				...next,
+				filteredData: computeFilteredData(next)
+			});
+		},
+		clearFilter: (key) => {
+			const filters = Object.fromEntries(Object.entries(state.filters).filter(([k]) => k !== key));
+			const next = {
+				...state,
+				filters,
+				rowSelection: {},
+				pageIndex: 0
+			};
+			setState({
+				...next,
+				filteredData: computeFilteredData(next)
+			});
+		},
+		clearAllFilters: () => {
+			const next = {
+				...state,
+				filters: {},
+				rowSelection: {},
+				pageIndex: 0
+			};
+			setState({
+				...next,
+				filteredData: computeFilteredData(next)
+			});
+		},
+		setSearch: (search) => {
+			const next = {
+				...state,
+				search,
+				rowSelection: {},
+				pageIndex: 0
+			};
+			setState({
+				...next,
+				filteredData: computeFilteredData(next)
+			});
+		},
+		clearSearch: () => {
+			const next = {
+				...state,
+				search: "",
+				rowSelection: {},
+				pageIndex: 0
+			};
+			setState({
+				...next,
+				filteredData: computeFilteredData(next)
+			});
+		},
+		setRowSelection: (rowSelection) => {
+			setState({
+				...state,
+				rowSelection
+			});
+		},
+		setPageIndex: (pageIndex) => {
+			if (!Number.isFinite(pageIndex) || pageIndex < 0) return;
+			setState({
+				...state,
+				pageIndex: Math.floor(pageIndex),
+				rowSelection: {}
+			});
+		},
+		setPageSize: (pageSize) => {
+			if (!Number.isFinite(pageSize) || pageSize < 1) return;
+			setState({
+				...state,
+				pageSize: Math.floor(pageSize),
+				pageIndex: 0,
+				rowSelection: {}
+			});
+		},
+		setPagination: (pageIndex, pageSize) => {
+			const safeIndex = Number.isFinite(pageIndex) ? Math.max(0, Math.floor(pageIndex)) : state.pageIndex;
+			const safeSize = Number.isFinite(pageSize) ? Math.max(1, Math.floor(pageSize)) : state.pageSize;
+			setState({
+				...state,
+				pageIndex: safeIndex,
+				pageSize: safeSize,
+				rowSelection: {}
+			});
+		},
+		setLoading: (isLoading) => {
+			setState({
+				...state,
+				isLoading
+			});
+		},
+		setError: (error) => {
+			setState({
+				...state,
+				error
+			});
+		},
+		registerFilter: (column, strategy) => {
+			const next = new Map(registeredFilters);
+			next.set(column, strategy);
+			registeredFilters = next;
+			const filteredData = computeFilteredData(state);
+			setState({
+				...state,
+				filteredData
+			});
+		},
+		unregisterFilter: (column) => {
+			const next = new Map(registeredFilters);
+			next.delete(column);
+			registeredFilters = next;
+			if (column in state.filters) {
+				const filteredData = computeFilteredData(state);
+				setState({
+					...state,
+					filteredData
+				});
+			}
+		},
+		registerInlineContent: (entry) => {
+			const existing = state.inlineContents.findIndex((e) => e.id === entry.id);
+			const inlineContents = existing >= 0 ? state.inlineContents.map((e, i) => i === existing ? entry : e) : [...state.inlineContents, entry];
+			setState({
+				...state,
+				inlineContents
+			});
+		},
+		unregisterInlineContent: (id) => {
+			const inlineContents = state.inlineContents.filter((e) => e.id !== id);
+			setState({
+				...state,
+				inlineContents
+			});
+		}
+	};
+}
+
 //#endregion
 //#region src/components/features/data-table/core/data-table-context.tsx
+const DataTableStoreContext = createContext(null);
+const TableInstanceContext = createContext(null);
+/**
+* Monotonic counter that increments on every store mutation.
+* Table-dependent hooks consume this context to force re-renders
+* through React's {children} composition boundary, since the
+* mutable table singleton (stable ref) cannot trigger context updates.
+*/
+const DataTableRenderKeyContext = createContext(0);
+/**
+* Forces a re-render when the store changes. Used by table-dependent hooks.
+* Uses useContext (not use()) because use() does not reliably register
+* context subscriptions in SSR/hydration scenarios (React Router SSR),
+* preventing re-renders when the context value changes.
+*/
+function useRenderKey() {
+	return useContext(DataTableRenderKeyContext);
+}
 const DataTableContext = createContext(null);
-function useDataTableContext() {
-	const context = use(DataTableContext);
-	if (!context) throw new Error("useDataTableContext must be used within a DataTable provider");
-	return context;
+function useDataTableStore() {
+	const store = use(DataTableStoreContext);
+	if (!store) throw new Error("useDataTableStore must be used within a <DataTable.Client> or <DataTable.Server> provider");
+	return store;
+}
+function useTableInstance() {
+	const table = use(TableInstanceContext);
+	if (!table) throw new Error("useTableInstance must be used within a <DataTable.Client> or <DataTable.Server> provider");
+	return table;
+}
+
+//#endregion
+//#region src/components/features/data-table/hooks/use-selectors.ts
+function shallowEqual(a, b) {
+	const keysA = Object.keys(a);
+	const keysB = Object.keys(b);
+	if (keysA.length !== keysB.length) return false;
+	for (const key of keysA) {
+		const va = a[key];
+		const vb = b[key];
+		if (va === vb) continue;
+		if (Array.isArray(va) && Array.isArray(vb)) {
+			if (va.length !== vb.length) return false;
+			for (let i = 0; i < va.length; i++) if (va[i] !== vb[i]) return false;
+			continue;
+		}
+		return false;
+	}
+	return true;
+}
+function useSliceSelector(selector) {
+	const store = useDataTableStore();
+	const cachedRef = useRef(null);
+	const getSnapshot = useCallback(() => {
+		const next = selector(store.getSnapshot());
+		if (cachedRef.current && shallowEqual(cachedRef.current, next)) return cachedRef.current;
+		cachedRef.current = next;
+		return next;
+	}, [store, selector]);
+	return useSyncExternalStore(store.subscribe, getSnapshot, getSnapshot);
+}
+function useDataTableFilters() {
+	const store = useDataTableStore();
+	return useSliceSelector(useCallback((state) => ({
+		filters: state.filters,
+		setFilter: store.setFilter,
+		clearFilter: store.clearFilter,
+		clearAllFilters: store.clearAllFilters,
+		registerFilter: store.registerFilter,
+		unregisterFilter: store.unregisterFilter
+	}), [store]));
+}
+function useDataTableSearch() {
+	const store = useDataTableStore();
+	return useSliceSelector(useCallback((state) => ({
+		search: state.search,
+		setSearch: store.setSearch,
+		clearSearch: store.clearSearch
+	}), [store]));
+}
+function useDataTableSorting() {
+	const store = useDataTableStore();
+	return useSliceSelector(useCallback((state) => ({
+		sorting: state.sorting,
+		setSorting: store.setSorting
+	}), [store]));
+}
+function useDataTableSelection() {
+	useRenderKey();
+	const store = useDataTableStore();
+	const table = useTableInstance();
+	return {
+		rowSelection: store.getSnapshot().rowSelection,
+		setRowSelection: store.setRowSelection,
+		selectedRows: table.getFilteredSelectedRowModel().rows.map((r) => r.original)
+	};
+}
+function useDataTablePagination() {
+	useRenderKey();
+	const store = useDataTableStore();
+	const table = useTableInstance();
+	const state = store.getSnapshot();
+	const nextPage = useCallback(() => table.nextPage(), [table]);
+	const prevPage = useCallback(() => table.previousPage(), [table]);
+	return {
+		canNextPage: table.getCanNextPage(),
+		canPrevPage: table.getCanPreviousPage(),
+		nextPage,
+		prevPage,
+		pageIndex: state.pageIndex,
+		pageCount: table.getPageCount(),
+		setPageIndex: store.setPageIndex,
+		pageSize: state.pageSize,
+		setPageSize: store.setPageSize,
+		totalRows: state.filteredData.length
+	};
+}
+function useDataTableRows() {
+	useRenderKey();
+	const table = useTableInstance();
+	return {
+		rows: table.getRowModel().rows,
+		headerGroups: table.getHeaderGroups(),
+		totalColumns: table.getAllColumns().length
+	};
+}
+function useDataTableLoading() {
+	return useSliceSelector(useCallback((state) => ({
+		isLoading: state.isLoading,
+		error: state.error
+	}), []));
+}
+function useDataTableInlineContents() {
+	const store = useDataTableStore();
+	return useSliceSelector(useCallback((state) => ({
+		inlineContents: state.inlineContents,
+		registerInlineContent: store.registerInlineContent,
+		unregisterInlineContent: store.unregisterInlineContent
+	}), [store]));
 }
 
+//#endregion
+//#region src/components/features/data-table/components/active-filters.tsx
+function formatValue(column, value, formatter) {
+	if (formatter) {
+		const result = formatter(column, value);
+		if (result !== void 0) return result;
+	}
+	return String(value);
+}
+function FilterGroup({ label, children, className }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex items-center gap-2 rounded-md border px-2 py-1", className),
+		"data-slot": "dt-filter-group",
+		"data-testid": "dt-filter-group",
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "text-muted-foreground border-r pr-2 text-xs",
+			children: label
+		}), children]
+	});
+}
+const EMPTY_LABELS = {};
+function ActiveFiltersInner({ label = "Selected Filters", filterLabels = EMPTY_LABELS, formatFilterValue: formatter, clearAll = "icon", clearAllLabel = "Clear all", className, groupClassName, badgeClassName }) {
+	const { filters, setFilter, clearFilter, clearAllFilters } = useDataTableFilters();
+	const { search, clearSearch } = useDataTableSearch();
+	const activeFilterEntries = Object.entries(filters).filter(([, value]) => value != null && value !== "" && !(Array.isArray(value) && value.length === 0));
+	const hasSearch = search.length > 0;
+	const hasFilters = activeFilterEntries.length > 0;
+	if (!hasSearch && !hasFilters) return null;
+	const totalGroups = activeFilterEntries.length + (hasSearch ? 1 : 0);
+	const removeArrayItem = (column, items, item) => {
+		const remaining = items.filter((v) => v !== item);
+		if (remaining.length > 0) setFilter(column, remaining);
+		else clearFilter(column);
+	};
+	const handleClearAll = () => {
+		clearAllFilters();
+		if (hasSearch) clearSearch();
+	};
+	const badgeCn = cn("flex items-center gap-1.5 px-2 py-0.5 text-xs", badgeClassName);
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex flex-wrap items-center gap-2", className),
+		"data-slot": "dt-active-filters",
+		"data-testid": "dt-active-filters",
+		children: [
+			label !== null && /* @__PURE__ */ jsx("span", {
+				className: "text-sm text-muted-foreground",
+				"data-slot": "dt-active-filters-label",
+				children: label
+			}),
+			hasSearch && /* @__PURE__ */ jsx(FilterGroup, {
+				label: "Search",
+				className: groupClassName,
+				children: /* @__PURE__ */ jsxs(Badge, {
+					type: "muted",
+					theme: "solid",
+					className: badgeCn,
+					children: [/* @__PURE__ */ jsx("span", { children: search }), /* @__PURE__ */ jsx(Button, {
+						theme: "borderless",
+						size: "small",
+						"aria-label": "Clear search",
+						className: "h-auto p-0 text-muted-foreground hover:text-foreground",
+						onClick: clearSearch,
+						children: /* @__PURE__ */ jsx(X, {
+							className: "size-2.5",
+							"aria-hidden": "true"
+						})
+					})]
+				})
+			}),
+			activeFilterEntries.map(([column, value]) => {
+				const groupLabel = filterLabels[column] ?? column;
+				if (Array.isArray(value)) return /* @__PURE__ */ jsx(FilterGroup, {
+					label: groupLabel,
+					className: groupClassName,
+					children: value.map((item) => /* @__PURE__ */ jsxs(Badge, {
+						type: "muted",
+						theme: "solid",
+						className: badgeCn,
+						children: [/* @__PURE__ */ jsx("span", { children: formatValue(column, item, formatter) }), /* @__PURE__ */ jsx(Button, {
+							theme: "borderless",
+							size: "small",
+							"aria-label": `Remove ${formatValue(column, item, formatter)} from ${groupLabel}`,
+							className: "h-auto p-0 text-muted-foreground hover:text-foreground",
+							onClick: () => removeArrayItem(column, value, item),
+							children: /* @__PURE__ */ jsx(X, {
+								className: "size-2.5",
+								"aria-hidden": "true"
+							})
+						})]
+					}, item))
+				}, column);
+				return /* @__PURE__ */ jsx(FilterGroup, {
+					label: groupLabel,
+					className: groupClassName,
+					children: /* @__PURE__ */ jsxs(Badge, {
+						type: "muted",
+						theme: "solid",
+						className: badgeCn,
+						children: [/* @__PURE__ */ jsx("span", { children: formatValue(column, value, formatter) }), /* @__PURE__ */ jsx(Button, {
+							theme: "borderless",
+							size: "small",
+							"aria-label": `Clear ${groupLabel} filter`,
+							className: "h-auto p-0 text-muted-foreground hover:text-foreground",
+							onClick: () => clearFilter(column),
+							children: /* @__PURE__ */ jsx(X, {
+								className: "size-2.5",
+								"aria-hidden": "true"
+							})
+						})]
+					})
+				}, column);
+			}),
+			totalGroups > 1 && /* @__PURE__ */ jsxs(Fragment$1, { children: [
+				clearAll === "icon" && /* @__PURE__ */ jsx(Button, {
+					theme: "borderless",
+					size: "small",
+					"aria-label": clearAllLabel,
+					title: clearAllLabel,
+					className: "h-auto p-1 text-muted-foreground hover:text-foreground",
+					"data-slot": "dt-clear-all-filters",
+					"data-testid": "dt-clear-all-filters",
+					onClick: handleClearAll,
+					children: /* @__PURE__ */ jsx(X, { className: "size-4" })
+				}),
+				clearAll === "button" && /* @__PURE__ */ jsxs(Button, {
+					theme: "outline",
+					size: "small",
+					className: "h-auto px-2 py-1 text-xs",
+					"data-slot": "dt-clear-all-filters",
+					"data-testid": "dt-clear-all-filters",
+					onClick: handleClearAll,
+					children: [/* @__PURE__ */ jsx(X, { className: "size-3 mr-1" }), clearAllLabel]
+				}),
+				clearAll === "text" && /* @__PURE__ */ jsx(Button, {
+					theme: "borderless",
+					size: "small",
+					className: "h-auto px-1 py-0.5 text-xs text-muted-foreground hover:text-foreground",
+					"data-slot": "dt-clear-all-filters",
+					"data-testid": "dt-clear-all-filters",
+					onClick: handleClearAll,
+					children: clearAllLabel
+				})
+			] })
+		]
+	});
+}
+const DataTableActiveFilters = memo(ActiveFiltersInner);
+
 //#endregion
 //#region src/components/features/data-table/components/bulk-actions.tsx
 function DataTableBulkActions({ children, className }) {
-	const { table, rowSelection } = useDataTableContext();
-	const selectedRows = useMemo(() => {
-		return table.getFilteredSelectedRowModel().rows.map((row) => row.original);
-	}, [table, rowSelection]);
+	const { selectedRows } = useDataTableSelection();
 	if (selectedRows.length === 0) return null;
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "dt-bulk-actions",
@@ -170,7 +759,8 @@ function DataTableColumnHeader({ column, title, className }) {
 		children: /* @__PURE__ */ jsxs("button", {
 			type: "button",
 			className: "flex items-center gap-1 hover:text-foreground -ml-3 h-8 px-3 cursor-pointer",
-			onClick: () => column.toggleSorting(sorted === "asc"),
+			onClick: column.getToggleSortingHandler(),
+			"aria-label": `Sort by ${title}${sorted === "asc" ? ", sorted ascending" : sorted === "desc" ? ", sorted descending" : ""}`,
 			children: [/* @__PURE__ */ jsx("span", { children: title }), sorted === "desc" ? /* @__PURE__ */ jsx(ArrowDown, { className: "size-4" }) : sorted === "asc" ? /* @__PURE__ */ jsx(ArrowUp, { className: "size-4" }) : /* @__PURE__ */ jsx(ArrowUpDown, { className: "size-4" })]
 		})
 	});
@@ -197,10 +787,10 @@ function renderInlineContentRow(entry, colSpan, rows) {
 	}, entry.id);
 }
 function DataTableContent({ emptyMessage, className, tableClassName, headerClassName, headerRowClassName, headerCellClassName, bodyClassName, rowClassName, cellClassName }) {
-	const { table, inlineContents } = useDataTableContext();
-	const rows = table.getRowModel().rows;
+	const { rows, headerGroups, totalColumns } = useDataTableRows();
+	const { inlineContents } = useDataTableInlineContents();
 	const openInlineContents = useMemo(() => inlineContents.filter((e) => e.open), [inlineContents]);
-	const colSpan = table.getAllColumns().length;
+	const colSpan = totalColumns;
 	return /* @__PURE__ */ jsx("div", {
 		className: cn("datum-ui-data-table", className),
 		"data-slot": "dt",
@@ -211,7 +801,7 @@ function DataTableContent({ emptyMessage, className, tableClassName, headerClass
 			children: [/* @__PURE__ */ jsx(TableHeader, {
 				className: cn(headerClassName),
 				"data-slot": "dt-header",
-				children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx(TableRow, {
+				children: headerGroups.map((headerGroup) => /* @__PURE__ */ jsx(TableRow, {
 					className: cn(headerRowClassName),
 					"data-slot": "dt-header-row",
 					children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx(TableHead, {
@@ -228,6 +818,7 @@ function DataTableContent({ emptyMessage, className, tableClassName, headerClass
 					if (rowEntry) return renderInlineContentRow(rowEntry, colSpan, rows);
 					return /* @__PURE__ */ jsx(TableRow, {
 						className: cn(resolveClassName(rowClassName, row)),
+						style: { transitionProperty: "none" },
 						"data-slot": "dt-row",
 						"data-state": row.getIsSelected() ? "selected" : void 0,
 						children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx(TableCell, {
@@ -254,7 +845,7 @@ function DataTableContent({ emptyMessage, className, tableClassName, headerClass
 //#region src/components/features/data-table/components/inline-content.tsx
 function DataTableInlineContent({ position, rowId, open, onClose, className, children }) {
 	const id = useId();
-	const { registerInlineContent, unregisterInlineContent } = useDataTableContext();
+	const { registerInlineContent, unregisterInlineContent } = useDataTableInlineContents();
 	const initialRender = useRef(true);
 	useEffect(() => {
 		registerInlineContent({
@@ -325,57 +916,121 @@ function DataTableLoading({ rows = DEFAULT_LOADING_ROWS, columns = 4, className
 
 //#endregion
 //#region src/components/features/data-table/components/pagination.tsx
+/**
+* Generates page numbers with ellipsis for large page counts.
+* Shows up to 7 items: first, last, current +/- 1 neighbor, and ellipsis gaps.
+*/
+function getPageNumbers(currentPage, totalPages) {
+	if (totalPages <= 7) return Array.from({ length: totalPages }, (_, i) => i + 1);
+	const pages = [1];
+	const current = currentPage + 1;
+	if (current <= 4) {
+		for (let i = 2; i <= 5; i++) pages.push(i);
+		pages.push("...");
+		pages.push(totalPages);
+	} else if (current >= totalPages - 3) {
+		pages.push("...");
+		for (let i = totalPages - 4; i <= totalPages; i++) pages.push(i);
+	} else {
+		pages.push("...");
+		for (let i = current - 1; i <= current + 1; i++) pages.push(i);
+		pages.push("...");
+		pages.push(totalPages);
+	}
+	return pages;
+}
 function DataTablePagination({ pageSizes = DEFAULT_PAGE_SIZES, className }) {
-	const { pagination, mode } = useDataTableContext();
+	const { canNextPage, canPrevPage, nextPage, prevPage, pageIndex, pageCount, setPageIndex, pageSize, setPageSize, totalRows } = useDataTablePagination();
+	const isClientMode = pageCount > 0;
+	const startRow = pageIndex * pageSize + 1;
+	const endRow = Math.min((pageIndex + 1) * pageSize, totalRows);
+	const pageNumbers = useMemo(() => getPageNumbers(pageIndex, pageCount), [pageIndex, pageCount]);
 	return /* @__PURE__ */ jsxs("div", {
-		className: cn("flex items-center justify-between px-2 py-4", className),
+		className: cn("flex flex-col-reverse items-center justify-between gap-4 px-2 py-4 sm:flex-row", className),
 		"data-slot": "dt-pagination",
 		children: [/* @__PURE__ */ jsxs("div", {
-			className: "flex items-center gap-2",
-			children: [/* @__PURE__ */ jsx("span", {
-				className: "text-sm text-muted-foreground",
-				children: "Rows per page"
-			}), /* @__PURE__ */ jsxs(Select, {
-				value: String(pagination.pageSize),
-				onValueChange: (value) => pagination.setPageSize(Number(value)),
-				children: [/* @__PURE__ */ jsx(SelectTrigger, {
-					className: "h-8 w-[70px]",
-					children: /* @__PURE__ */ jsx(SelectValue, { placeholder: String(pagination.pageSize) })
-				}), /* @__PURE__ */ jsx(SelectContent, {
-					side: "top",
-					children: pageSizes.map((size) => /* @__PURE__ */ jsx(SelectItem, {
-						value: String(size),
-						children: size
-					}, size))
+			className: "flex items-center gap-4",
+			children: [isClientMode && totalRows > 0 && /* @__PURE__ */ jsxs("span", {
+				className: "text-sm text-muted-foreground whitespace-nowrap",
+				children: [
+					"Showing",
+					" ",
+					startRow,
+					" ",
+					"to",
+					" ",
+					endRow,
+					" ",
+					"of",
+					" ",
+					totalRows,
+					" ",
+					"rows"
+				]
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "text-sm text-muted-foreground whitespace-nowrap",
+					children: "Rows per page"
+				}), /* @__PURE__ */ jsxs(Select, {
+					value: String(pageSize),
+					onValueChange: (value) => setPageSize(Number(value)),
+					children: [/* @__PURE__ */ jsx(SelectTrigger, {
+						className: "h-8 w-[70px]",
+						children: /* @__PURE__ */ jsx(SelectValue, { placeholder: String(pageSize) })
+					}), /* @__PURE__ */ jsx(SelectContent, {
+						side: "top",
+						children: pageSizes.map((size) => /* @__PURE__ */ jsx(SelectItem, {
+							value: String(size),
+							children: size
+						}, size))
+					})]
 				})]
 			})]
-		}), /* @__PURE__ */ jsxs("div", {
-			className: "flex items-center gap-2",
+		}), /* @__PURE__ */ jsxs("nav", {
+			"aria-label": "Table pagination",
+			className: "flex items-center gap-1",
 			children: [
-				mode === "client" && pagination.pageIndex !== void 0 && pagination.pageCount !== void 0 && /* @__PURE__ */ jsxs("span", {
-					className: "text-sm text-muted-foreground",
+				/* @__PURE__ */ jsx(Button, {
+					theme: "outline",
+					size: "icon",
+					className: "size-8",
+					onClick: prevPage,
+					disabled: !canPrevPage,
+					"aria-label": "Previous page",
+					children: /* @__PURE__ */ jsx(ChevronLeft, { className: "size-4" })
+				}),
+				isClientMode && pageCount > 1 ? pageNumbers.map((page, index) => {
+					if (page === "...") return /* @__PURE__ */ jsx("span", {
+						className: "px-2 text-sm text-muted-foreground",
+						children: "..."
+					}, `ellipsis-${index}`);
+					const isActive = page === pageIndex + 1;
+					return /* @__PURE__ */ jsx(Button, {
+						theme: isActive ? "solid" : "outline",
+						size: "small",
+						className: cn("h-8 min-w-8 px-2", isActive && "pointer-events-none font-semibold"),
+						onClick: () => setPageIndex(page - 1),
+						"aria-disabled": isActive || void 0,
+						"aria-label": `Page ${page}`,
+						"aria-current": isActive ? "page" : void 0,
+						children: page
+					}, page);
+				}) : !isClientMode && /* @__PURE__ */ jsxs("span", {
+					className: "px-2 text-sm text-muted-foreground",
 					children: [
 						"Page",
 						" ",
-						pagination.pageIndex + 1,
-						" ",
-						"of",
-						" ",
-						pagination.pageCount
+						pageIndex + 1
 					]
 				}),
 				/* @__PURE__ */ jsx(Button, {
-					variant: "outline",
-					size: "sm",
-					onClick: pagination.prevPage,
-					disabled: !pagination.canPrevPage,
-					children: /* @__PURE__ */ jsx(ChevronLeft, { className: "size-4" })
-				}),
-				/* @__PURE__ */ jsx(Button, {
-					variant: "outline",
-					size: "sm",
-					onClick: pagination.nextPage,
-					disabled: !pagination.canNextPage,
+					theme: "outline",
+					size: "icon",
+					className: "size-8",
+					onClick: nextPage,
+					disabled: !canNextPage,
+					"aria-label": "Next page",
 					children: /* @__PURE__ */ jsx(ChevronRight, { className: "size-4" })
 				})
 			]
@@ -395,8 +1050,8 @@ function DataTableRowActions({ row, actions, isLoading = false, className }) {
 	return /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
 		asChild: true,
 		children: /* @__PURE__ */ jsxs(Button, {
-			variant: "ghost",
-			size: "sm",
+			theme: "borderless",
+			size: "small",
 			className,
 			disabled: isLoading,
 			"data-slot": "dt-row-actions",
@@ -421,7 +1076,7 @@ function DataTableRowActions({ row, actions, isLoading = false, className }) {
 //#endregion
 //#region src/components/features/data-table/components/search.tsx
 function DataTableSearch({ placeholder = "Search...", debounceMs = DEFAULT_DEBOUNCE_MS, className }) {
-	const { search, setSearch } = useDataTableContext();
+	const { search, setSearch } = useDataTableSearch();
 	const [inputValue, setInputValue] = useState(search);
 	useEffect(() => {
 		setInputValue(search);
@@ -442,262 +1097,331 @@ function DataTableSearch({ placeholder = "Search...", debounceMs = DEFAULT_DEBOU
 		value: inputValue,
 		onChange: (e) => setInputValue(e.target.value),
 		className,
+		"aria-label": placeholder,
 		"data-slot": "dt-search"
 	});
 }
 
 //#endregion
-//#region src/components/features/data-table/hooks/use-inline-contents.ts
-function useInlineContents() {
-	const [inlineContents, setInlineContents] = useState([]);
-	return {
-		inlineContents,
-		registerInlineContent: useCallback((entry) => {
-			setInlineContents((prev) => {
-				const index = prev.findIndex((e) => e.id === entry.id);
-				if (index >= 0) {
-					const next = [...prev];
-					next[index] = entry;
-					return next;
-				}
-				return [...prev, entry];
-			});
-		}, []),
-		unregisterInlineContent: useCallback((id) => {
-			setInlineContents((prev) => prev.filter((e) => e.id !== id));
-		}, [])
-	};
-}
-
-//#endregion
-//#region src/components/features/data-table/core/client-provider.tsx
-function ClientProvider({ data, columns, sorting, setSorting, filters, setFilter, clearFilter, clearAllFilters, search, setSearch, clearSearch, searchableColumns, searchFn, rowSelection, setRowSelection, pagination, getRowId, enableRowSelection = false, className, children }) {
-	const columnFilters = useMemo(() => Object.entries(filters).map(([id, value]) => ({
-		id,
-		value
-	})), [filters]);
-	const arrayIncludesFilter = useMemo(() => (row, columnId, filterValue) => {
-		if (filterValue == null) return true;
-		if (Array.isArray(filterValue) && filterValue.length === 0) return true;
-		const cellValue = row.getValue(columnId);
-		if (Array.isArray(filterValue)) {
-			if (Array.isArray(cellValue)) return cellValue.some((v) => filterValue.includes(v));
-			return filterValue.includes(cellValue);
+//#region src/components/features/data-table/hooks/use-data-table-client.ts
+function useDataTableClient(options) {
+	const { data, columns, pageSize, getRowId, enableRowSelection = false, defaultSort, defaultFilters, searchableColumns, searchFn, filterFns, stateAdapter } = options;
+	const store = useMemo(() => createDataTableStore({
+		data,
+		mode: "client",
+		defaultSort,
+		defaultFilters,
+		pageSize,
+		searchableColumns,
+		searchFn,
+		filterFns
+	}), []);
+	const isInitialRender = useRef(true);
+	useEffect(() => {
+		if (isInitialRender.current) {
+			isInitialRender.current = false;
+			return;
 		}
-		if (typeof filterValue === "string" && typeof cellValue === "string") return cellValue.toLowerCase().includes(filterValue.toLowerCase());
-		return cellValue === filterValue;
-	}, []);
-	const globalFilterFn = useMemo(() => {
-		if (searchFn) return (row, _columnId, filterValue) => searchFn(row.original, String(filterValue));
-		if (searchableColumns && searchableColumns.length > 0) return (row, _columnId, filterValue) => {
-			const query = String(filterValue).toLowerCase();
-			return searchableColumns.some((col) => {
-				const cellValue = row.getValue(col);
-				return cellValue != null && String(cellValue).toLowerCase().includes(query);
-			});
-		};
-	}, [searchFn, searchableColumns]);
+		store.setData(data);
+	}, [data, store]);
+	const resolvedColumns = useMemo(() => enableRowSelection ? withSelectionColumn(columns, typeof enableRowSelection === "object" ? enableRowSelection : {}) : columns, [columns, enableRowSelection]);
+	const { filteredData, sorting, rowSelection, pageIndex, pageSize: storePageSize, filters, search } = useSyncExternalStore(store.subscribe, store.getSnapshot, store.getSnapshot);
 	const table = useReactTable({
-		data,
-		columns,
+		data: filteredData,
+		columns: resolvedColumns,
 		state: {
 			sorting,
 			rowSelection,
-			globalFilter: search,
-			columnFilters,
 			pagination: {
-				pageIndex: pagination.pageIndex,
-				pageSize: pagination.pageSize
+				pageIndex,
+				pageSize: storePageSize
 			}
 		},
-		filterFns: { arrayIncludes: arrayIncludesFilter },
-		defaultColumn: { filterFn: arrayIncludesFilter },
-		...globalFilterFn ? { globalFilterFn } : {},
 		onSortingChange: (updater) => {
-			setSorting(typeof updater === "function" ? updater(sorting) : updater);
+			const next = typeof updater === "function" ? updater(sorting) : updater;
+			store.setSorting(next);
 		},
 		onRowSelectionChange: (updater) => {
-			setRowSelection(typeof updater === "function" ? updater(rowSelection) : updater);
+			const next = typeof updater === "function" ? updater(rowSelection) : updater;
+			store.setRowSelection(next);
 		},
 		onPaginationChange: (updater) => {
 			const next = typeof updater === "function" ? updater({
-				pageIndex: pagination.pageIndex,
-				pageSize: pagination.pageSize
+				pageIndex,
+				pageSize: storePageSize
 			}) : updater;
-			pagination.setPageIndex(next.pageIndex);
-			pagination.setPageSize(next.pageSize);
+			store.setPagination(next.pageIndex, next.pageSize);
 		},
 		getCoreRowModel: getCoreRowModel(),
 		getSortedRowModel: getSortedRowModel(),
-		getFilteredRowModel: getFilteredRowModel(),
 		getPaginationRowModel: getPaginationRowModel(),
 		getRowId,
 		enableRowSelection: !!enableRowSelection
 	});
-	const { inlineContents, registerInlineContent, unregisterInlineContent } = useInlineContents();
-	const paginationState = useMemo(() => ({
-		canNextPage: table.getCanNextPage(),
-		canPrevPage: table.getCanPreviousPage(),
-		nextPage: () => table.nextPage(),
-		prevPage: () => table.previousPage(),
-		pageIndex: pagination.pageIndex,
-		pageCount: table.getPageCount(),
-		setPageIndex: pagination.setPageIndex,
-		pageSize: pagination.pageSize,
-		setPageSize: pagination.setPageSize
-	}), [table, pagination]);
-	return /* @__PURE__ */ jsx(DataTableContext, {
-		value: useMemo(() => ({
-			table,
-			mode: "client",
-			sorting,
-			filters,
-			search,
-			rowSelection,
-			isLoading: false,
-			setSorting,
-			setFilter,
-			clearFilter,
-			clearAllFilters,
-			setSearch,
-			clearSearch,
-			setRowSelection,
-			pagination: paginationState,
-			inlineContents,
-			registerInlineContent,
-			unregisterInlineContent
-		}), [
-			table,
+	const hydratedRef = useRef(false);
+	useEffect(() => {
+		if (stateAdapter && !hydratedRef.current) {
+			hydratedRef.current = true;
+			const persisted = stateAdapter.read();
+			if (persisted.sorting && persisted.sorting.length > 0) store.setSorting(persisted.sorting);
+			if (persisted.filters) {
+				for (const [key, value] of Object.entries(persisted.filters)) if (value != null) store.setFilter(key, value);
+			}
+			if (persisted.search) store.setSearch(persisted.search);
+			if (persisted.pageIndex != null && persisted.pageIndex > 0) store.setPageIndex(persisted.pageIndex);
+			if (persisted.pageSize != null) store.setPageSize(persisted.pageSize);
+		}
+	}, []);
+	const isFirstWrite = useRef(true);
+	useEffect(() => {
+		if (!stateAdapter) return;
+		if (isFirstWrite.current) {
+			isFirstWrite.current = false;
+			return;
+		}
+		stateAdapter.write({
 			sorting,
 			filters,
 			search,
-			rowSelection,
-			setSorting,
-			setFilter,
-			clearFilter,
-			clearAllFilters,
-			setSearch,
-			clearSearch,
-			setRowSelection,
-			paginationState,
-			inlineContents,
-			registerInlineContent,
-			unregisterInlineContent
-		]),
-		children: /* @__PURE__ */ jsx("div", {
-			className,
-			children
+			pageIndex,
+			pageSize: storePageSize
+		});
+	}, [
+		sorting,
+		filters,
+		search,
+		pageIndex,
+		storePageSize,
+		stateAdapter
+	]);
+	return {
+		store,
+		table
+	};
+}
+
+//#endregion
+//#region src/components/features/data-table/hooks/use-is-client.ts
+/**
+* Returns `false` during SSR and `true` after hydration.
+* Used to gate components that depend on client-only APIs
+* (e.g. TanStack Table's internal useSyncExternalStore call
+* which omits the getServerSnapshot argument).
+*/
+function useIsClient() {
+	const [isClient, setIsClient] = useState(false);
+	useEffect(() => setIsClient(true), []);
+	return isClient;
+}
+
+//#endregion
+//#region src/components/features/data-table/core/client-provider.tsx
+/**
+* Inner component that calls useDataTableClient.
+* Only rendered on the client (gated by ClientProvider).
+*/
+function ClientProviderInner({ className, children, ssrFallback: _ssrFallback, ...options }) {
+	const { store, table } = useDataTableClient(options);
+	return /* @__PURE__ */ jsx(DataTableStoreContext, {
+		value: store,
+		children: /* @__PURE__ */ jsx(TableInstanceContext, {
+			value: table,
+			children: /* @__PURE__ */ jsx(DataTableRenderKeyContext, {
+				value: store.getSnapshot()._version,
+				children: /* @__PURE__ */ jsx("div", {
+					className,
+					children
+				})
+			})
 		})
 	});
 }
+function ClientProvider(props) {
+	if (!useIsClient()) return /* @__PURE__ */ jsx(Fragment$1, { children: props.ssrFallback ?? null });
+	return /* @__PURE__ */ jsx(ClientProviderInner, { ...props });
+}
 
 //#endregion
-//#region src/components/features/data-table/core/server-provider.tsx
-function ServerProvider({ data, columns, isLoading, sorting, setSorting, filters, setFilter, clearFilter, clearAllFilters, search, setSearch, clearSearch, rowSelection, setRowSelection, pagination, getRowId, enableRowSelection = false, className, children }) {
+//#region src/components/features/data-table/hooks/use-data-table-server.ts
+function useDataTableServer(options) {
+	const { columns, fetchFn, transform, limit = 20, getRowId, enableRowSelection = false, defaultSort, defaultFilters, stateAdapter } = options;
+	const fetchRef = useRef(fetchFn);
+	const transformRef = useRef(transform);
+	useEffect(() => {
+		fetchRef.current = fetchFn;
+	}, [fetchFn]);
+	useEffect(() => {
+		transformRef.current = transform;
+	}, [transform]);
+	const cursorMapRef = useRef(/* @__PURE__ */ new Map());
+	const hasNextPageRef = useRef(false);
+	const store = useMemo(() => createDataTableStore({
+		data: [],
+		mode: "server",
+		defaultSort,
+		defaultFilters,
+		pageSize: limit
+	}), []);
+	const { sorting, filters, search, rowSelection, pageSize, pageIndex } = useSyncExternalStore(store.subscribe, store.getSnapshot, store.getSnapshot);
+	const prevQueryRef = useRef({
+		sorting,
+		filters,
+		search,
+		pageSize
+	});
+	useEffect(() => {
+		const prev = prevQueryRef.current;
+		if (prev.sorting !== sorting || prev.filters !== filters || prev.search !== search || prev.pageSize !== pageSize) {
+			cursorMapRef.current = /* @__PURE__ */ new Map();
+			hasNextPageRef.current = false;
+			if (pageIndex !== 0) {
+				prevQueryRef.current = {
+					sorting,
+					filters,
+					search,
+					pageSize
+				};
+				store.setPageIndex(0);
+				return;
+			}
+		}
+		prevQueryRef.current = {
+			sorting,
+			filters,
+			search,
+			pageSize
+		};
+		let cancelled = false;
+		store.setLoading(true);
+		const cursor = cursorMapRef.current.get(pageIndex);
+		fetchRef.current({
+			sorting,
+			filters,
+			search,
+			cursor,
+			limit: pageSize
+		}).then((response) => {
+			if (cancelled) return;
+			const result = transformRef.current(response);
+			store.setServerData(result.data);
+			store.setError(null);
+			if (result.nextCursor) cursorMapRef.current.set(pageIndex + 1, result.nextCursor);
+			hasNextPageRef.current = result.hasNextPage;
+		}).catch((error) => {
+			if (cancelled) return;
+			store.setServerData([]);
+			store.setError(error instanceof Error ? error : new Error(String(error)));
+			hasNextPageRef.current = false;
+		}).finally(() => {
+			if (!cancelled) store.setLoading(false);
+		});
+		return () => {
+			cancelled = true;
+		};
+	}, [
+		sorting,
+		filters,
+		search,
+		pageSize,
+		pageIndex,
+		store
+	]);
+	const resolvedColumns = useMemo(() => enableRowSelection ? withSelectionColumn(columns, typeof enableRowSelection === "object" ? enableRowSelection : {}) : columns, [columns, enableRowSelection]);
 	const table = useReactTable({
-		data,
-		columns,
+		data: store.getSnapshot().data,
+		columns: resolvedColumns,
 		state: {
 			sorting,
-			rowSelection
+			rowSelection,
+			pagination: {
+				pageIndex,
+				pageSize
+			}
 		},
+		manualPagination: true,
+		manualSorting: true,
+		manualFiltering: true,
+		pageCount: hasNextPageRef.current ? pageIndex + 2 : pageIndex + 1,
+		getCoreRowModel: getCoreRowModel(),
+		getRowId,
+		enableRowSelection: !!enableRowSelection,
 		onSortingChange: (updater) => {
-			setSorting(typeof updater === "function" ? updater(sorting) : updater);
+			const next = typeof updater === "function" ? updater(sorting) : updater;
+			store.setSorting(next);
 		},
 		onRowSelectionChange: (updater) => {
-			setRowSelection(typeof updater === "function" ? updater(rowSelection) : updater);
+			const next = typeof updater === "function" ? updater(rowSelection) : updater;
+			store.setRowSelection(next);
 		},
-		getCoreRowModel: getCoreRowModel(),
-		getRowId,
-		enableRowSelection: !!enableRowSelection,
-		manualPagination: true,
-		manualSorting: true,
-		manualFiltering: true
+		onPaginationChange: (updater) => {
+			const next = typeof updater === "function" ? updater({
+				pageIndex,
+				pageSize
+			}) : updater;
+			store.setPagination(next.pageIndex, next.pageSize);
+		}
 	});
-	const { inlineContents, registerInlineContent, unregisterInlineContent } = useInlineContents();
-	const paginationState = useMemo(() => ({
-		canNextPage: pagination.hasNextPage,
-		canPrevPage: pagination.hasPrevPage,
-		nextPage: pagination.nextPage,
-		prevPage: pagination.prevPage,
-		pageSize: pagination.limit,
-		setPageSize: pagination.setLimit
-	}), [pagination]);
-	return /* @__PURE__ */ jsx(DataTableContext, {
-		value: useMemo(() => ({
-			table,
-			mode: "server",
-			sorting,
-			filters,
-			search,
-			rowSelection,
-			isLoading,
-			setSorting,
-			setFilter,
-			clearFilter,
-			clearAllFilters,
-			setSearch,
-			clearSearch,
-			setRowSelection,
-			pagination: paginationState,
-			inlineContents,
-			registerInlineContent,
-			unregisterInlineContent
-		}), [
-			table,
+	useEffect(() => {
+		if (stateAdapter) stateAdapter.write({
 			sorting,
 			filters,
 			search,
-			rowSelection,
-			isLoading,
-			setSorting,
-			setFilter,
-			clearFilter,
-			clearAllFilters,
-			setSearch,
-			clearSearch,
-			setRowSelection,
-			paginationState,
-			inlineContents,
-			registerInlineContent,
-			unregisterInlineContent
-		]),
-		children: /* @__PURE__ */ jsx("div", {
-			className,
-			children
-		})
-	});
+			pageSize
+		});
+	}, [
+		sorting,
+		filters,
+		search,
+		pageSize,
+		stateAdapter
+	]);
+	return {
+		store,
+		table
+	};
 }
 
 //#endregion
-//#region ../shadcn/ui/badge.tsx
+//#region src/components/features/data-table/core/server-provider.tsx
 /**
-* Vanilla shadcn/ui Badge Component
-* Pure shadcn badge without Datum customizations
-* For Datum-specific variants (sunglow, butter), import from @/modules/datum-ui
+* Inner component that calls useDataTableServer.
+* Only rendered on the client (gated by ServerProvider).
 */
-const badgeVariants = cva("inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2", {
-	variants: { variant: {
-		default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
-		secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
-		destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
-		outline: "text-foreground"
-	} },
-	defaultVariants: { variant: "default" }
-});
-function Badge({ className, variant, ...props }) {
-	return /* @__PURE__ */ jsx("div", {
-		className: cn(badgeVariants({ variant }), className),
-		...props
+function ServerProviderInner({ className, children, ssrFallback: _ssrFallback, ...options }) {
+	const { store, table } = useDataTableServer(options);
+	return /* @__PURE__ */ jsx(DataTableStoreContext, {
+		value: store,
+		children: /* @__PURE__ */ jsx(TableInstanceContext, {
+			value: table,
+			children: /* @__PURE__ */ jsx(DataTableRenderKeyContext, {
+				value: store.getSnapshot()._version,
+				children: /* @__PURE__ */ jsx("div", {
+					className,
+					children
+				})
+			})
+		})
 	});
 }
+function ServerProvider(props) {
+	if (!useIsClient()) return /* @__PURE__ */ jsx(Fragment$1, { children: props.ssrFallback ?? null });
+	return /* @__PURE__ */ jsx(ServerProviderInner, { ...props });
+}
 
 //#endregion
 //#region src/components/features/data-table/filters/checkbox-filter.tsx
 const MAX_VISIBLE_BADGES = 2;
 function CheckboxFilter({ column, label, options, className, checkboxPopoverClassName }) {
-	const { filters, setFilter, clearFilter } = useDataTableContext();
+	const { filters, setFilter, clearFilter, registerFilter, unregisterFilter } = useDataTableFilters();
 	const [open, setOpen] = useState(false);
+	useEffect(() => {
+		registerFilter(column, "checkbox");
+		return () => unregisterFilter(column);
+	}, [
+		column,
+		registerFilter,
+		unregisterFilter
+	]);
 	const selectedValues = filters[column] ?? [];
 	const updateValues = (newValues) => {
 		if (newValues.length > 0) setFilter(column, newValues);
@@ -717,7 +1441,7 @@ function CheckboxFilter({ column, label, options, className, checkboxPopoverClas
 		children: [/* @__PURE__ */ jsx(PopoverTrigger, {
 			asChild: true,
 			children: /* @__PURE__ */ jsxs(Button, {
-				variant: "outline",
+				theme: "outline",
 				className: cn("justify-between gap-1", className),
 				"data-slot": "dt-filter",
 				"data-testid": "dt-filter-trigger",
@@ -726,7 +1450,8 @@ function CheckboxFilter({ column, label, options, className, checkboxPopoverClas
 					children: [visibleBadges.map((val) => {
 						const opt = options.find((o) => o.value === val);
 						return /* @__PURE__ */ jsxs(Badge, {
-							variant: "secondary",
+							type: "secondary",
+							theme: "light",
 							className: "text-xs px-1.5 py-0",
 							children: [opt?.label ?? val, /* @__PURE__ */ jsx("span", {
 								role: "button",
@@ -766,8 +1491,8 @@ function CheckboxFilter({ column, label, options, className, checkboxPopoverClas
 					className: "text-sm font-medium",
 					children: label
 				}), selectedValues.length > 0 && /* @__PURE__ */ jsx(Button, {
-					variant: "ghost",
-					size: "sm",
+					theme: "borderless",
+					size: "small",
 					className: "h-auto p-1 text-xs",
 					onClick: () => clearFilter(column),
 					children: "Clear"
@@ -797,8 +1522,16 @@ function CheckboxFilter({ column, label, options, className, checkboxPopoverClas
 //#endregion
 //#region src/components/features/data-table/filters/date-picker-filter.tsx
 function DatePickerFilter({ column, label, className, datePickerPopoverClassName, disableFuture, disablePast, minDate, maxDate }) {
-	const { filters, setFilter, clearFilter } = useDataTableContext();
+	const { filters, setFilter, clearFilter, registerFilter, unregisterFilter } = useDataTableFilters();
 	const rawValue = filters[column];
+	useEffect(() => {
+		registerFilter(column, "date-gte");
+		return () => unregisterFilter(column);
+	}, [
+		column,
+		registerFilter,
+		unregisterFilter
+	]);
 	const dateRange = useMemo(() => {
 		const date = rawValue ? new Date(rawValue) : void 0;
 		return {
@@ -831,9 +1564,17 @@ function DatePickerFilter({ column, label, className, datePickerPopoverClassName
 //#endregion
 //#region src/components/features/data-table/filters/select-filter.tsx
 function SelectFilter({ column, label, options, placeholder, searchable = true, className, selectPopoverClassName }) {
-	const { filters, setFilter, clearFilter } = useDataTableContext();
+	const { filters, setFilter, clearFilter, registerFilter, unregisterFilter } = useDataTableFilters();
 	const [open, setOpen] = useState(false);
 	const value = filters[column];
+	useEffect(() => {
+		registerFilter(column, "select");
+		return () => unregisterFilter(column);
+	}, [
+		column,
+		registerFilter,
+		unregisterFilter
+	]);
 	const selectedOption = options.find((o) => o.value === value);
 	return /* @__PURE__ */ jsxs(Popover, {
 		open,
@@ -841,7 +1582,7 @@ function SelectFilter({ column, label, options, placeholder, searchable = true,
 		children: [/* @__PURE__ */ jsx(PopoverTrigger, {
 			asChild: true,
 			children: /* @__PURE__ */ jsxs(Button, {
-				variant: "outline",
+				theme: "outline",
 				role: "combobox",
 				"aria-expanded": open,
 				className: cn("justify-between", className),
@@ -892,6 +1633,7 @@ function SelectFilter({ column, label, options, placeholder, searchable = true,
 const DataTable = {
 	Client: ClientProvider,
 	Server: ServerProvider,
+	ActiveFilters: DataTableActiveFilters,
 	Content: DataTableContent,
 	InlineContent: DataTableInlineContent,
 	ColumnHeader: DataTableColumnHeader,
@@ -906,257 +1648,4 @@ const DataTable = {
 };
 
 //#endregion
-//#region src/components/features/data-table/hooks/use-data-table-client.ts
-function useDataTableClient(options) {
-	const { data, columns, pageSize: initialPageSize = DEFAULT_PAGE_SIZE, getRowId, enableRowSelection = false, defaultSort = [], defaultFilters = {}, searchableColumns, searchFn, stateAdapter } = options;
-	const adapterState = useMemo(() => stateAdapter?.read() ?? {}, []);
-	const [sorting, setSorting] = useState(adapterState.sorting ?? defaultSort);
-	const [filters, setFilters] = useState(adapterState.filters ?? defaultFilters);
-	const [search, setSearch] = useState(adapterState.search ?? "");
-	const [rowSelection, setRowSelection] = useState({});
-	const [pageIndex, setPageIndex] = useState(adapterState.pageIndex ?? 0);
-	const [pageSize, setPageSize] = useState(adapterState.pageSize ?? initialPageSize);
-	const setFilter = useCallback((key, value) => {
-		setFilters((prev) => ({
-			...prev,
-			[key]: value
-		}));
-	}, []);
-	const clearFilter = useCallback((key) => {
-		setFilters((prev) => {
-			const { [key]: _, ...rest } = prev;
-			return rest;
-		});
-	}, []);
-	const clearAllFilters = useCallback(() => {
-		setFilters({});
-	}, []);
-	const clearSearch = useCallback(() => {
-		setSearch("");
-	}, []);
-	useEffect(() => {
-		setRowSelection({});
-	}, [
-		sorting,
-		filters,
-		search,
-		pageIndex,
-		pageSize
-	]);
-	useEffect(() => {
-		stateAdapter?.write({
-			sorting,
-			filters,
-			search,
-			pageIndex,
-			pageSize
-		});
-	}, [
-		stateAdapter,
-		sorting,
-		filters,
-		search,
-		pageIndex,
-		pageSize
-	]);
-	const pagination = useMemo(() => ({
-		pageIndex,
-		pageSize,
-		setPageIndex,
-		setPageSize
-	}), [pageIndex, pageSize]);
-	const selectionEnabled = !!enableRowSelection;
-	const selectionOptions = typeof enableRowSelection === "object" ? enableRowSelection : void 0;
-	return {
-		data,
-		columns: useMemo(() => selectionEnabled ? withSelectionColumn(columns, selectionOptions) : columns, [
-			selectionEnabled,
-			columns,
-			selectionOptions
-		]),
-		sorting,
-		setSorting,
-		filters,
-		setFilter,
-		clearFilter,
-		clearAllFilters,
-		search,
-		setSearch,
-		clearSearch,
-		rowSelection,
-		setRowSelection,
-		pagination,
-		getRowId,
-		enableRowSelection: selectionEnabled,
-		searchableColumns,
-		searchFn
-	};
-}
-
-//#endregion
-//#region src/components/features/data-table/hooks/use-data-table-server.ts
-function useDataTableServer(options) {
-	const { columns, fetchFn, transform, limit: initialLimit = DEFAULT_PAGE_SIZE, getRowId, enableRowSelection = false, defaultSort = [], defaultFilters = {}, stateAdapter } = options;
-	const adapterState = useMemo(() => stateAdapter?.read() ?? {}, []);
-	const [data, setData] = useState([]);
-	const [isLoading, setIsLoading] = useState(true);
-	const [sorting, setSorting] = useState(adapterState.sorting ?? defaultSort);
-	const [filters, setFilters] = useState(adapterState.filters ?? defaultFilters);
-	const [search, setSearch] = useState(adapterState.search ?? "");
-	const [rowSelection, setRowSelection] = useState({});
-	const [limit, setLimit] = useState(adapterState.limit ?? initialLimit);
-	const [cursor, setCursor] = useState(void 0);
-	const [nextCursor, setNextCursor] = useState(void 0);
-	const [hasNextPage, setHasNextPage] = useState(false);
-	const [cursorHistory, setCursorHistory] = useState([]);
-	const fetchFnRef = useRef(fetchFn);
-	fetchFnRef.current = fetchFn;
-	const transformRef = useRef(transform);
-	transformRef.current = transform;
-	const setFilter = useCallback((key, value) => {
-		setFilters((prev) => ({
-			...prev,
-			[key]: value
-		}));
-	}, []);
-	const clearFilter = useCallback((key) => {
-		setFilters((prev) => {
-			const { [key]: _, ...rest } = prev;
-			return rest;
-		});
-	}, []);
-	const clearAllFilters = useCallback(() => {
-		setFilters({});
-	}, []);
-	const clearSearch = useCallback(() => {
-		setSearch("");
-	}, []);
-	const resetPagination = useCallback(() => {
-		setCursor(void 0);
-		setNextCursor(void 0);
-		setCursorHistory([]);
-		setHasNextPage(false);
-		setRowSelection({});
-	}, []);
-	useEffect(() => {
-		resetPagination();
-	}, [
-		sorting,
-		filters,
-		search,
-		limit,
-		resetPagination
-	]);
-	useEffect(() => {
-		let cancelled = false;
-		setIsLoading(true);
-		fetchFnRef.current({
-			cursor,
-			limit,
-			sorting,
-			filters,
-			search
-		}).then((response) => {
-			if (cancelled) return;
-			const result = transformRef.current(response);
-			setData(result.data);
-			setNextCursor(result.cursor);
-			setHasNextPage(result.hasNextPage);
-		}).catch(() => {
-			if (cancelled) return;
-			setData([]);
-			setNextCursor(void 0);
-			setHasNextPage(false);
-		}).finally(() => {
-			if (!cancelled) setIsLoading(false);
-		});
-		return () => {
-			cancelled = true;
-		};
-	}, [
-		cursor,
-		limit,
-		sorting,
-		filters,
-		search
-	]);
-	useEffect(() => {
-		stateAdapter?.write({
-			sorting,
-			filters,
-			search,
-			limit
-		});
-	}, [
-		stateAdapter,
-		sorting,
-		filters,
-		search,
-		limit
-	]);
-	const hasPrevPage = cursorHistory.length > 0;
-	const nextPage = useCallback(() => {
-		if (nextCursor && hasNextPage) {
-			setCursorHistory((prev) => [...prev, cursor ?? ""]);
-			setCursor(nextCursor);
-			setRowSelection({});
-		}
-	}, [
-		nextCursor,
-		hasNextPage,
-		cursor
-	]);
-	const prevPage = useCallback(() => {
-		setCursorHistory((prev) => {
-			const newHistory = [...prev];
-			const previousCursor = newHistory.pop();
-			setCursor(previousCursor === "" ? void 0 : previousCursor);
-			return newHistory;
-		});
-		setRowSelection({});
-	}, []);
-	const pagination = useMemo(() => ({
-		cursor,
-		limit,
-		hasNextPage,
-		hasPrevPage,
-		nextPage,
-		prevPage,
-		setLimit
-	}), [
-		cursor,
-		limit,
-		hasNextPage,
-		hasPrevPage,
-		nextPage,
-		prevPage
-	]);
-	const selectionEnabled = !!enableRowSelection;
-	const selectionOptions = typeof enableRowSelection === "object" ? enableRowSelection : void 0;
-	return {
-		data,
-		columns: useMemo(() => selectionEnabled ? withSelectionColumn(columns, selectionOptions) : columns, [
-			selectionEnabled,
-			columns,
-			selectionOptions
-		]),
-		isLoading,
-		sorting,
-		setSorting,
-		filters,
-		setFilter,
-		clearFilter,
-		clearAllFilters,
-		search,
-		setSearch,
-		clearSearch,
-		rowSelection,
-		setRowSelection,
-		pagination,
-		getRowId,
-		enableRowSelection: selectionEnabled
-	};
-}
-
-//#endregion
-export { DEFAULT_DEBOUNCE_MS, DEFAULT_LOADING_ROWS, DEFAULT_PAGE_SIZE, DEFAULT_PAGE_SIZES, DataTable, createSelectionColumn, useDataTableClient, useDataTableContext, useDataTableServer, useNuqsAdapter };
+export { DEFAULT_DEBOUNCE_MS, DEFAULT_LOADING_ROWS, DEFAULT_PAGE_SIZE, DEFAULT_PAGE_SIZES, DataTable, createDataTableStore, createSelectionColumn, useDataTableFilters, useDataTableInlineContents, useDataTableLoading, useDataTablePagination, useDataTableRows, useDataTableSearch, useDataTableSelection, useDataTableSorting, useNuqsAdapter };