@datum-cloud/datum-ui 0.3.0-alpha.ffa8392 → 0.4.0

package/dist/data-table/index.mjs

@@ -1,20 +1,24 @@
-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 "../utils-DJboNGQM.mjs";
+import { t as Badge } from "../badge-BgFj4Nsc.mjs";
+import { t as Button } from "../button-0N61fmAR.mjs";
+import "../button-D6AORsOz.mjs";
+import { t as Checkbox } from "../checkbox-CQrjygFt.mjs";
+import "../dialog-DdrHeboM.mjs";
+import { a as CommandInput, i as CommandGroup, o as CommandItem, r as CommandEmpty, s as CommandList, t as Command } from "../command-DVroicgn.mjs";
+import "../input-DEMoi_8F.mjs";
+import { t as Input } from "../input-CYFN0Ap2.mjs";
+import { t as Label } from "../label-mOg07fuQ.mjs";
+import { i as DropdownMenuItem, l as DropdownMenuTrigger, r as DropdownMenuContent, t as DropdownMenu } from "../dropdown-menu-CdShrDz_.mjs";
+import { i as PopoverTrigger, r as PopoverContent, t as Popover } from "../popover-ugw5MpuT.mjs";
+import { i as SelectItem, l as SelectTrigger, n as SelectContent, t as Select, u as SelectValue } from "../select-BZOKWjlH.mjs";
+import "../skeleton-2vQ0vFQk.mjs";
+import { t as Skeleton } from "../skeleton-BgOwIgE0.mjs";
+import { c as TableRow, i as TableCell, n as TableBody, o as TableHead, s as TableHeader, t as Table } from "../table-Cl3UzIhI.mjs";
+import { t as CalendarDatePicker } from "../calendar-date-picker-B9mxJM7f.mjs";
 import { ArrowDown, ArrowUp, ArrowUpDown, Check, ChevronDown, ChevronLeft, ChevronRight, MoreHorizontal, X } from "lucide-react";
-import { createContext, use, useCallback, useEffect, useId, useMemo, useRef, useState, useSyncExternalStore } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+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";
 
@@ -154,6 +158,16 @@ function withSelectionColumn(columns, options = {}) {
 
 //#endregion
 //#region src/components/features/data-table/core/filter-engine.ts
+/**
+* Resolve a dot-path on an object (e.g. "status.registrationApproval").
+* Falls back to a flat key lookup when the path has no dots.
+*/
+function resolvePath(obj, path) {
+	if (obj == null) return void 0;
+	const record = obj;
+	if (!path.includes(".")) return record[path];
+	return path.split(".").reduce((acc, key) => acc != null ? acc[key] : void 0, record);
+}
 const FILTER_STRATEGIES = {
 	"checkbox": (cellValue, filterValue) => {
 		if (filterValue == null) return true;
@@ -197,14 +211,13 @@ function applyFilters(data, filters, search, registeredFilters, customFilterFns,
 				console.warn(`[DataTable] No filter strategy registered for column "${column}". Filter ignored.`);
 				continue;
 			}
-			const cellValue = row[column];
-			if (!fn(cellValue, value)) return false;
+			if (!fn(resolvePath(row, column), 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];
+				const cellValue = resolvePath(row, col);
 				return cellValue != null && String(cellValue).toLowerCase().includes(query);
 			});
 			return Object.values(row).some((val) => {
@@ -219,7 +232,7 @@ function applyFilters(data, filters, search, registeredFilters, customFilterFns,
 //#endregion
 //#region src/components/features/data-table/core/store.ts
 function createDataTableStore(options) {
-	const registeredFilters = /* @__PURE__ */ new Map();
+	let registeredFilters = /* @__PURE__ */ new Map();
 	const listeners = /* @__PURE__ */ new Set();
 	function computeFilteredData(s) {
 		if (s.mode === "server") return s.data;
@@ -237,10 +250,12 @@ function createDataTableStore(options) {
 		rowSelection: {},
 		pageIndex: 0,
 		pageSize: options.pageSize ?? DEFAULT_PAGE_SIZE,
+		columnCount: options.columnCount ?? 0,
 		mode: options.mode,
-		isLoading: false,
+		isLoading: options.isLoading ?? false,
 		error: null,
-		inlineContents: []
+		inlineContents: [],
+		_version: 0
 	};
 	if (options.defaultFilters && Object.keys(options.defaultFilters).length > 0) state = {
 		...state,
@@ -250,7 +265,10 @@ function createDataTableStore(options) {
 		for (const listener of listeners) listener();
 	}
 	function setState(next) {
-		state = next;
+		state = {
+			...next,
+			_version: state._version + 1
+		};
 		notify();
 	}
 	return {
@@ -278,7 +296,6 @@ function createDataTableStore(options) {
 				filteredData: data
 			});
 		},
-		setTable: (_t) => {},
 		setSorting: (sorting) => {
 			setState({
 				...state,
@@ -357,20 +374,32 @@ function createDataTableStore(options) {
 			});
 		},
 		setPageIndex: (pageIndex) => {
+			if (!Number.isFinite(pageIndex) || pageIndex < 0) return;
 			setState({
 				...state,
-				pageIndex,
+				pageIndex: Math.floor(pageIndex),
 				rowSelection: {}
 			});
 		},
 		setPageSize: (pageSize) => {
+			if (!Number.isFinite(pageSize) || pageSize < 1) return;
 			setState({
 				...state,
-				pageSize,
+				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,
@@ -384,7 +413,9 @@ function createDataTableStore(options) {
 			});
 		},
 		registerFilter: (column, strategy) => {
-			registeredFilters.set(column, strategy);
+			const next = new Map(registeredFilters);
+			next.set(column, strategy);
+			registeredFilters = next;
 			const filteredData = computeFilteredData(state);
 			setState({
 				...state,
@@ -392,7 +423,9 @@ function createDataTableStore(options) {
 			});
 		},
 		unregisterFilter: (column) => {
-			registeredFilters.delete(column);
+			const next = new Map(registeredFilters);
+			next.delete(column);
+			registeredFilters = next;
 			if (column in state.filters) {
 				const filteredData = computeFilteredData(state);
 				setState({
@@ -423,16 +456,34 @@ function createDataTableStore(options) {
 //#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 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;
+/**
+* Returns the table instance or null if not yet available.
+* Used by hooks that need to handle the null-table window during SSR.
+*/
+function useTableInstanceOrNull() {
+	return use(TableInstanceContext);
 }
 
 //#endregion
@@ -463,7 +514,7 @@ function useSliceSelector(selector) {
 		cachedRef.current = next;
 		return next;
 	}, [store, selector]);
-	return useSyncExternalStore(store.subscribe, getSnapshot);
+	return useSyncExternalStore(store.subscribe, getSnapshot, getSnapshot);
 }
 function useDataTableFilters() {
 	const store = useDataTableStore();
@@ -492,49 +543,64 @@ function useDataTableSorting() {
 	}), [store]));
 }
 function useDataTableSelection() {
+	useRenderKey();
 	const store = useDataTableStore();
-	const table = useTableInstance();
-	return useSliceSelector(useCallback((state) => ({
-		rowSelection: state.rowSelection,
+	const table = useTableInstanceOrNull();
+	return {
+		rowSelection: store.getSnapshot().rowSelection,
 		setRowSelection: store.setRowSelection,
-		selectedRows: table.getFilteredSelectedRowModel().rows.map((r) => r.original)
-	}), [store, table]));
+		selectedRows: table ? table.getFilteredSelectedRowModel().rows.map((r) => r.original) : []
+	};
 }
 function useDataTablePagination() {
+	useRenderKey();
 	const store = useDataTableStore();
-	const table = useTableInstance();
-	const nextPage = useCallback(() => table.nextPage(), [table]);
-	const prevPage = useCallback(() => table.previousPage(), [table]);
-	return useSliceSelector(useCallback((state) => ({
+	const table = useTableInstanceOrNull();
+	const state = store.getSnapshot();
+	if (!table) return {
+		canNextPage: false,
+		canPrevPage: false,
+		nextPage: () => {},
+		prevPage: () => {},
+		pageIndex: state.pageIndex,
+		pageCount: 0,
+		setPageIndex: store.setPageIndex,
+		pageSize: state.pageSize,
+		setPageSize: store.setPageSize,
+		totalRows: 0
+	};
+	return {
 		canNextPage: table.getCanNextPage(),
 		canPrevPage: table.getCanPreviousPage(),
-		nextPage,
-		prevPage,
+		nextPage: () => table.nextPage(),
+		prevPage: () => table.previousPage(),
 		pageIndex: state.pageIndex,
 		pageCount: table.getPageCount(),
 		setPageIndex: store.setPageIndex,
 		pageSize: state.pageSize,
 		setPageSize: store.setPageSize,
 		totalRows: state.filteredData.length
-	}), [
-		store,
-		table,
-		nextPage,
-		prevPage
-	]));
+	};
 }
 function useDataTableRows() {
-	const table = useTableInstance();
-	return useSliceSelector(useCallback((_state) => ({
+	useRenderKey();
+	const table = useTableInstanceOrNull();
+	if (!table) return {
+		rows: [],
+		headerGroups: [],
+		totalColumns: 0
+	};
+	return {
 		rows: table.getRowModel().rows,
 		headerGroups: table.getHeaderGroups(),
 		totalColumns: table.getAllColumns().length
-	}), [table]));
+	};
 }
 function useDataTableLoading() {
 	return useSliceSelector(useCallback((state) => ({
 		isLoading: state.isLoading,
-		error: state.error
+		error: state.error,
+		columnCount: state.columnCount
 	}), []));
 }
 function useDataTableInlineContents() {
@@ -545,41 +611,153 @@ function useDataTableInlineContents() {
 		unregisterInlineContent: store.unregisterInlineContent
 	}), [store]));
 }
-function useDataTableContext() {
-	const store = useDataTableStore();
-	const table = useTableInstance();
-	const state = useSyncExternalStore(store.subscribe, store.getSnapshot);
-	return {
-		table,
-		mode: state.mode,
-		sorting: state.sorting,
-		filters: state.filters,
-		search: state.search,
-		rowSelection: state.rowSelection,
-		isLoading: state.isLoading,
-		setSorting: store.setSorting,
-		setFilter: store.setFilter,
-		clearFilter: store.clearFilter,
-		clearAllFilters: store.clearAllFilters,
-		setSearch: store.setSearch,
-		clearSearch: store.clearSearch,
-		setRowSelection: store.setRowSelection,
-		pagination: {
-			canNextPage: table.getCanNextPage(),
-			canPrevPage: table.getCanPreviousPage(),
-			nextPage: () => table.nextPage(),
-			prevPage: () => table.previousPage(),
-			pageIndex: state.pageIndex,
-			pageCount: table.getPageCount(),
-			setPageIndex: store.setPageIndex,
-			pageSize: state.pageSize,
-			setPageSize: store.setPageSize
-		},
-		inlineContents: state.inlineContents,
-		registerInlineContent: store.registerInlineContent,
-		unregisterInlineContent: store.unregisterInlineContent
+
+//#endregion
+//#region src/components/features/data-table/components/active-filters.tsx
+function formatValue(column, value, formatters) {
+	const fn = formatters?.[column];
+	if (fn) return fn(value);
+	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", excludeFilters, filterLabels = EMPTY_LABELS, formatFilterValue: formatters, clearAll = "icon", clearAllLabel = "Clear all", className, groupClassName, badgeClassName }) {
+	const { filters, setFilter, clearFilter, clearAllFilters } = useDataTableFilters();
+	const { search, clearSearch } = useDataTableSearch();
+	const excludeSet = useMemo(() => new Set(excludeFilters ?? []), [excludeFilters]);
+	const activeFilterEntries = Object.entries(filters).filter(([key, value]) => !excludeSet.has(key) && value != null && value !== "" && !(Array.isArray(value) && value.length === 0));
+	const showSearch = search.length > 0 && !excludeSet.has("search");
+	const hasFilters = activeFilterEntries.length > 0;
+	if (!showSearch && !hasFilters) return null;
+	const totalGroups = activeFilterEntries.length + (showSearch ? 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 (search.length > 0) 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
+			}),
+			showSearch && /* @__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, formatters) }), /* @__PURE__ */ jsx(Button, {
+							theme: "borderless",
+							size: "small",
+							"aria-label": `Remove ${formatValue(column, item, formatters)} 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, formatters) }), /* @__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
@@ -609,6 +787,7 @@ function DataTableColumnHeader({ column, title, className }) {
 			type: "button",
 			className: "flex items-center gap-1 hover:text-foreground -ml-3 h-8 px-3 cursor-pointer",
 			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" })]
 		})
 	});
@@ -636,9 +815,12 @@ function renderInlineContentRow(entry, colSpan, rows) {
 }
 function DataTableContent({ emptyMessage, className, tableClassName, headerClassName, headerRowClassName, headerCellClassName, bodyClassName, rowClassName, cellClassName }) {
 	const { rows, headerGroups, totalColumns } = useDataTableRows();
+	const { isLoading, columnCount } = useDataTableLoading();
+	const { pageSize } = useDataTablePagination();
 	const { inlineContents } = useDataTableInlineContents();
 	const openInlineContents = useMemo(() => inlineContents.filter((e) => e.open), [inlineContents]);
 	const colSpan = totalColumns;
+	const skeletonColumns = totalColumns || columnCount || DEFAULT_LOADING_ROWS;
 	return /* @__PURE__ */ jsx("div", {
 		className: cn("datum-ui-data-table", className),
 		"data-slot": "dt",
@@ -675,7 +857,13 @@ function DataTableContent({ emptyMessage, className, tableClassName, headerClass
 							children: flexRender(cell.column.columnDef.cell, cell.getContext())
 						}, cell.id))
 					}, row.id);
-				}) : /* @__PURE__ */ jsx(TableRow, {
+				}) : isLoading ? Array.from({ length: pageSize }, (_, i) => /* @__PURE__ */ jsx(TableRow, {
+					"data-slot": "dt-skeleton-row",
+					children: Array.from({ length: skeletonColumns }, (_, j) => /* @__PURE__ */ jsx(TableCell, {
+						"data-slot": "dt-skeleton-cell",
+						children: /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-full" })
+					}, j))
+				}, i)) : /* @__PURE__ */ jsx(TableRow, {
 					"data-slot": "dt-row",
 					children: /* @__PURE__ */ jsx(TableCell, {
 						colSpan,
@@ -746,19 +934,8 @@ function DataTableLoading({ rows = DEFAULT_LOADING_ROWS, columns = 4, className
 	return /* @__PURE__ */ jsx("div", {
 		className,
 		"data-slot": "dt-loading",
-		children: /* @__PURE__ */ jsxs("div", {
-			className: "rounded-md border",
-			children: [/* @__PURE__ */ jsx("div", {
-				className: "border-b",
-				children: /* @__PURE__ */ jsx("div", {
-					className: "flex gap-4 p-4",
-					children: Array.from({ length: columns }, (_, i) => /* @__PURE__ */ jsx(Skeleton, { className: "h-4 flex-1" }, i))
-				})
-			}), Array.from({ length: rows }, (_, rowIndex) => /* @__PURE__ */ jsx("div", {
-				className: "flex gap-4 border-b p-4 last:border-b-0",
-				children: Array.from({ length: columns }, (_, colIndex) => /* @__PURE__ */ jsx(Skeleton, { className: "h-4 flex-1" }, colIndex))
-			}, rowIndex))]
-		})
+		style: { overflowX: "auto" },
+		children: /* @__PURE__ */ jsxs(Table, { children: [/* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsx(TableRow, { children: Array.from({ length: columns }, (_, i) => /* @__PURE__ */ jsx(TableHead, { children: /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-24" }) }, i)) }) }), /* @__PURE__ */ jsx(TableBody, { children: Array.from({ length: rows }, (_, rowIndex) => /* @__PURE__ */ jsx(TableRow, { children: Array.from({ length: columns }, (_, colIndex) => /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-full" }) }, colIndex)) }, rowIndex)) })] })
 	});
 }
 
@@ -835,15 +1012,17 @@ function DataTablePagination({ pageSizes = DEFAULT_PAGE_SIZES, className }) {
 					})]
 				})]
 			})]
-		}), /* @__PURE__ */ jsxs("div", {
+		}), /* @__PURE__ */ jsxs("nav", {
+			"aria-label": "Table pagination",
 			className: "flex items-center gap-1",
 			children: [
 				/* @__PURE__ */ jsx(Button, {
-					variant: "outline",
+					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) => {
@@ -853,11 +1032,13 @@ function DataTablePagination({ pageSizes = DEFAULT_PAGE_SIZES, className }) {
 					}, `ellipsis-${index}`);
 					const isActive = page === pageIndex + 1;
 					return /* @__PURE__ */ jsx(Button, {
-						variant: isActive ? "default" : "outline",
-						size: "sm",
-						className: cn("h-8 min-w-8 px-2", isActive && "font-semibold"),
+						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),
-						disabled: isActive,
+						"aria-disabled": isActive || void 0,
+						"aria-label": `Page ${page}`,
+						"aria-current": isActive ? "page" : void 0,
 						children: page
 					}, page);
 				}) : !isClientMode && /* @__PURE__ */ jsxs("span", {
@@ -869,11 +1050,12 @@ function DataTablePagination({ pageSizes = DEFAULT_PAGE_SIZES, className }) {
 					]
 				}),
 				/* @__PURE__ */ jsx(Button, {
-					variant: "outline",
+					theme: "outline",
 					size: "icon",
 					className: "size-8",
 					onClick: nextPage,
 					disabled: !canNextPage,
+					"aria-label": "Next page",
 					children: /* @__PURE__ */ jsx(ChevronRight, { className: "size-4" })
 				})
 			]
@@ -893,8 +1075,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",
@@ -918,7 +1100,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 }) {
+function DataTableSearch({ placeholder = "Search...", debounceMs = DEFAULT_DEBOUNCE_MS, className, disabled }) {
 	const { search, setSearch } = useDataTableSearch();
 	const [inputValue, setInputValue] = useState(search);
 	useEffect(() => {
@@ -940,17 +1122,105 @@ function DataTableSearch({ placeholder = "Search...", debounceMs = DEFAULT_DEBOU
 		value: inputValue,
 		onChange: (e) => setInputValue(e.target.value),
 		className,
+		disabled,
+		"aria-label": placeholder,
 		"data-slot": "dt-search"
 	});
 }
 
+//#endregion
+//#region src/components/features/data-table/hooks/use-data-table-client.ts
+/**
+* Creates a TanStack Table instance from an existing store.
+* Does NOT create the store or sync data — the caller is responsible for that.
+*/
+function useClientTable(store, options) {
+	const { columns, getRowId, enableRowSelection = false, stateAdapter } = options;
+	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: filteredData,
+		columns: resolvedColumns,
+		state: {
+			sorting,
+			rowSelection,
+			pagination: {
+				pageIndex,
+				pageSize: storePageSize
+			}
+		},
+		onSortingChange: (updater) => {
+			const next = typeof updater === "function" ? updater(sorting) : updater;
+			store.setSorting(next);
+		},
+		onRowSelectionChange: (updater) => {
+			const next = typeof updater === "function" ? updater(rowSelection) : updater;
+			store.setRowSelection(next);
+		},
+		onPaginationChange: (updater) => {
+			const next = typeof updater === "function" ? updater({
+				pageIndex,
+				pageSize: storePageSize
+			}) : updater;
+			store.setPagination(next.pageIndex, next.pageSize);
+		},
+		getCoreRowModel: getCoreRowModel(),
+		getSortedRowModel: getSortedRowModel(),
+		getPaginationRowModel: getPaginationRowModel(),
+		getRowId,
+		enableRowSelection: !!enableRowSelection
+	});
+	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,
+			pageIndex,
+			pageSize: storePageSize
+		});
+	}, [
+		sorting,
+		filters,
+		search,
+		pageIndex,
+		storePageSize,
+		stateAdapter
+	]);
+	return { table };
+}
+
 //#endregion
 //#region src/components/features/data-table/core/client-provider.tsx
-function ClientProvider({ store, table, className, children }) {
-	return /* @__PURE__ */ jsx(DataTableStoreContext, {
-		value: store,
-		children: /* @__PURE__ */ jsx(TableInstanceContext, {
-			value: table,
+/**
+* Inner component that calls useClientTable.
+* Only rendered after hydration (gated by tableReady).
+*/
+function ClientProviderInner({ store, className, children, ...options }) {
+	const { table } = useClientTable(store, options);
+	return /* @__PURE__ */ jsx(TableInstanceContext, {
+		value: table,
+		children: /* @__PURE__ */ jsx(DataTableRenderKeyContext, {
+			value: store.getSnapshot()._version,
 			children: /* @__PURE__ */ jsx("div", {
 				className,
 				children
@@ -958,68 +1228,277 @@ function ClientProvider({ store, table, className, children }) {
 		})
 	});
 }
-
-//#endregion
-//#region src/components/features/data-table/core/server-provider.tsx
-function ServerProvider({ store, table, className, children }) {
+function ClientProvider(props) {
+	const { data, columns, loading, pageSize, getRowId, enableRowSelection, defaultSort, defaultFilters, searchableColumns, searchFn, filterFns, stateAdapter, className, children } = props;
+	const store = useMemo(() => createDataTableStore({
+		data,
+		mode: "client",
+		isLoading: true,
+		defaultSort,
+		defaultFilters,
+		pageSize,
+		columnCount: columns.length,
+		searchableColumns,
+		searchFn,
+		filterFns
+	}), []);
+	const isInitialRender = useRef(true);
+	useEffect(() => {
+		if (isInitialRender.current) {
+			isInitialRender.current = false;
+			return;
+		}
+		store.setData(data);
+	}, [data, store]);
+	const [tableReady, setTableReady] = useState(false);
+	useEffect(() => setTableReady(true), []);
+	useEffect(() => {
+		if (!tableReady) return;
+		store.setLoading(loading ?? false);
+	}, [
+		loading,
+		tableReady,
+		store
+	]);
 	return /* @__PURE__ */ jsx(DataTableStoreContext, {
 		value: store,
-		children: /* @__PURE__ */ jsx(TableInstanceContext, {
-			value: table,
-			children: /* @__PURE__ */ jsx("div", {
-				className,
-				children
+		children: tableReady ? /* @__PURE__ */ jsx(ClientProviderInner, {
+			store,
+			columns,
+			getRowId,
+			enableRowSelection,
+			stateAdapter,
+			className,
+			children
+		}) : /* @__PURE__ */ jsx(TableInstanceContext, {
+			value: null,
+			children: /* @__PURE__ */ jsx(DataTableRenderKeyContext, {
+				value: 0,
+				children: /* @__PURE__ */ jsx("div", {
+					className,
+					children
+				})
 			})
 		})
 	});
 }
 
 //#endregion
-//#region ../shadcn/ui/badge.tsx
+//#region src/components/features/data-table/hooks/use-data-table-server.ts
 /**
-* Vanilla shadcn/ui Badge Component
-* Pure shadcn badge without Datum customizations
-* For Datum-specific variants (sunglow, butter), import from @/modules/datum-ui
+* Creates a TanStack Table instance from an existing store.
+* Handles fetch-on-query-change, cursor pagination, and state adapter sync.
+* Does NOT create the store — the caller is responsible for that.
 */
-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 useServerTable(store, options) {
+	const { columns, fetchFn, transform, getRowId, enableRowSelection = false, 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 { sorting, filters, search, rowSelection, pageSize, pageIndex } = useSyncExternalStore(store.subscribe, store.getSnapshot, store.getSnapshot);
+	const prevQueryRef = useRef({
+		sorting,
+		filters,
+		search,
+		pageSize
 	});
-}
-
-//#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, registerFilter, unregisterFilter } = useDataTableFilters();
-	const [open, setOpen] = useState(false);
 	useEffect(() => {
-		registerFilter(column, "checkbox");
-		return () => unregisterFilter(column);
+		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.cursor) cursorMapRef.current.set(pageIndex + 1, result.cursor);
+			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;
+		};
 	}, [
-		column,
-		registerFilter,
-		unregisterFilter
+		sorting,
+		filters,
+		search,
+		pageSize,
+		pageIndex,
+		store
 	]);
-	const selectedValues = filters[column] ?? [];
-	const updateValues = (newValues) => {
-		if (newValues.length > 0) setFilter(column, newValues);
-		else clearFilter(column);
-	};
-	const handleToggle = (optionValue, checked) => {
-		updateValues(checked ? [...selectedValues, optionValue] : selectedValues.filter((v) => v !== optionValue));
-	};
-	const removeValue = (optionValue) => {
+	const resolvedColumns = useMemo(() => enableRowSelection ? withSelectionColumn(columns, typeof enableRowSelection === "object" ? enableRowSelection : {}) : columns, [columns, enableRowSelection]);
+	const table = useReactTable({
+		data: store.getSnapshot().data,
+		columns: resolvedColumns,
+		state: {
+			sorting,
+			rowSelection,
+			pagination: {
+				pageIndex,
+				pageSize
+			}
+		},
+		manualPagination: true,
+		manualSorting: true,
+		manualFiltering: true,
+		pageCount: hasNextPageRef.current ? pageIndex + 2 : pageIndex + 1,
+		getCoreRowModel: getCoreRowModel(),
+		getRowId,
+		enableRowSelection: !!enableRowSelection,
+		onSortingChange: (updater) => {
+			const next = typeof updater === "function" ? updater(sorting) : updater;
+			store.setSorting(next);
+		},
+		onRowSelectionChange: (updater) => {
+			const next = typeof updater === "function" ? updater(rowSelection) : updater;
+			store.setRowSelection(next);
+		},
+		onPaginationChange: (updater) => {
+			const next = typeof updater === "function" ? updater({
+				pageIndex,
+				pageSize
+			}) : updater;
+			store.setPagination(next.pageIndex, next.pageSize);
+		}
+	});
+	useEffect(() => {
+		if (stateAdapter) stateAdapter.write({
+			sorting,
+			filters,
+			search,
+			pageSize
+		});
+	}, [
+		sorting,
+		filters,
+		search,
+		pageSize,
+		stateAdapter
+	]);
+	return { table };
+}
+
+//#endregion
+//#region src/components/features/data-table/core/server-provider.tsx
+/**
+* Inner component that calls useServerTable.
+* Only rendered after hydration (gated by tableReady).
+*/
+function ServerProviderInner({ store, className, children, ...options }) {
+	const { table } = useServerTable(store, options);
+	return /* @__PURE__ */ jsx(TableInstanceContext, {
+		value: table,
+		children: /* @__PURE__ */ jsx(DataTableRenderKeyContext, {
+			value: store.getSnapshot()._version,
+			children: /* @__PURE__ */ jsx("div", {
+				className,
+				children
+			})
+		})
+	});
+}
+function ServerProvider(props) {
+	const { columns, fetchFn, transform, limit = 20, getRowId, enableRowSelection, defaultSort, defaultFilters, stateAdapter, className, children } = props;
+	const store = useMemo(() => createDataTableStore({
+		data: [],
+		mode: "server",
+		isLoading: true,
+		defaultSort,
+		defaultFilters,
+		pageSize: limit,
+		columnCount: columns.length
+	}), []);
+	const [tableReady, setTableReady] = useState(false);
+	useEffect(() => setTableReady(true), []);
+	return /* @__PURE__ */ jsx(DataTableStoreContext, {
+		value: store,
+		children: tableReady ? /* @__PURE__ */ jsx(ServerProviderInner, {
+			store,
+			columns,
+			fetchFn,
+			transform,
+			limit,
+			getRowId,
+			enableRowSelection,
+			stateAdapter,
+			className,
+			children
+		}) : /* @__PURE__ */ jsx(TableInstanceContext, {
+			value: null,
+			children: /* @__PURE__ */ jsx(DataTableRenderKeyContext, {
+				value: 0,
+				children: /* @__PURE__ */ jsx("div", {
+					className,
+					children
+				})
+			})
+		})
+	});
+}
+
+//#endregion
+//#region src/components/features/data-table/filters/checkbox-filter.tsx
+const MAX_VISIBLE_BADGES = 2;
+function CheckboxFilter({ column, label, options, className, checkboxPopoverClassName, disabled }) {
+	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);
+		else clearFilter(column);
+	};
+	const handleToggle = (optionValue, checked) => {
+		updateValues(checked ? [...selectedValues, optionValue] : selectedValues.filter((v) => v !== optionValue));
+	};
+	const removeValue = (optionValue) => {
 		updateValues(selectedValues.filter((v) => v !== optionValue));
 	};
 	const visibleBadges = selectedValues.slice(0, MAX_VISIBLE_BADGES);
@@ -1030,8 +1509,9 @@ function CheckboxFilter({ column, label, options, className, checkboxPopoverClas
 		children: [/* @__PURE__ */ jsx(PopoverTrigger, {
 			asChild: true,
 			children: /* @__PURE__ */ jsxs(Button, {
-				variant: "outline",
-				className: cn("justify-between gap-1", className),
+				theme: "outline",
+				disabled,
+				className: cn("h-10 justify-between gap-1", className),
 				"data-slot": "dt-filter",
 				"data-testid": "dt-filter-trigger",
 				children: [selectedValues.length > 0 ? /* @__PURE__ */ jsxs("div", {
@@ -1039,7 +1519,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",
@@ -1079,8 +1560,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"
@@ -1109,7 +1590,7 @@ 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 }) {
+function DatePickerFilter({ column, label, className, datePickerPopoverClassName, disableFuture, disablePast, minDate, maxDate, disabled }) {
 	const { filters, setFilter, clearFilter, registerFilter, unregisterFilter } = useDataTableFilters();
 	const rawValue = filters[column];
 	useEffect(() => {
@@ -1134,8 +1615,9 @@ function DatePickerFilter({ column, label, className, datePickerPopoverClassName
 			numberOfMonths: 1,
 			closeOnSelect: true,
 			placeholder: label,
-			triggerClassName: className,
+			triggerClassName: cn("h-10", className),
 			variant: "outline",
+			disabled,
 			disableFuture,
 			disablePast,
 			minDate,
@@ -1151,7 +1633,7 @@ 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 }) {
+function SelectFilter({ column, label, options, placeholder, searchable = true, className, selectPopoverClassName, disabled }) {
 	const { filters, setFilter, clearFilter, registerFilter, unregisterFilter } = useDataTableFilters();
 	const [open, setOpen] = useState(false);
 	const value = filters[column];
@@ -1170,10 +1652,11 @@ 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),
+				disabled,
+				className: cn("h-10 justify-between", className),
 				"data-slot": "dt-filter",
 				"data-testid": "dt-filter-trigger",
 				children: [/* @__PURE__ */ jsx("span", {
@@ -1221,6 +1704,7 @@ function SelectFilter({ column, label, options, placeholder, searchable = true,
 const DataTable = {
 	Client: ClientProvider,
 	Server: ServerProvider,
+	ActiveFilters: DataTableActiveFilters,
 	Content: DataTableContent,
 	InlineContent: DataTableInlineContent,
 	ColumnHeader: DataTableColumnHeader,
@@ -1235,243 +1719,4 @@ const DataTable = {
 };
 
 //#endregion
-//#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;
-		}
-		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);
-	const table = useReactTable({
-		data: filteredData,
-		columns: resolvedColumns,
-		state: {
-			sorting,
-			rowSelection,
-			pagination: {
-				pageIndex,
-				pageSize: storePageSize
-			}
-		},
-		onSortingChange: (updater) => {
-			const next = typeof updater === "function" ? updater(sorting) : updater;
-			store.setSorting(next);
-		},
-		onRowSelectionChange: (updater) => {
-			const next = typeof updater === "function" ? updater(rowSelection) : updater;
-			store.setRowSelection(next);
-		},
-		onPaginationChange: (updater) => {
-			const next = typeof updater === "function" ? updater({
-				pageIndex,
-				pageSize: storePageSize
-			}) : updater;
-			store.setPageIndex(next.pageIndex);
-			store.setPageSize(next.pageSize);
-		},
-		getCoreRowModel: getCoreRowModel(),
-		getSortedRowModel: getSortedRowModel(),
-		getPaginationRowModel: getPaginationRowModel(),
-		getRowId,
-		enableRowSelection: !!enableRowSelection
-	});
-	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,
-			pageIndex,
-			pageSize: storePageSize
-		});
-	}, [
-		sorting,
-		filters,
-		search,
-		pageIndex,
-		storePageSize,
-		stateAdapter
-	]);
-	return {
-		store,
-		table
-	};
-}
-
-//#endregion
-//#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 [hasNextPage, setHasNextPage] = useState(false);
-	const store = useMemo(() => createDataTableStore({
-		data: [],
-		mode: "server",
-		defaultSort,
-		defaultFilters,
-		pageSize: limit
-	}), []);
-	const { sorting, filters, search, rowSelection, pageSize, pageIndex } = useSyncExternalStore(store.subscribe, store.getSnapshot);
-	useEffect(() => {
-		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);
-			setHasNextPage(result.hasNextPage);
-		}).catch((error) => {
-			if (cancelled) return;
-			store.setServerData([]);
-			store.setError(error instanceof Error ? error : new Error(String(error)));
-			setHasNextPage(false);
-		}).finally(() => {
-			if (!cancelled) store.setLoading(false);
-		});
-		return () => {
-			cancelled = true;
-		};
-	}, [
-		sorting,
-		filters,
-		search,
-		pageSize,
-		pageIndex,
-		store
-	]);
-	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();
-			store.setPageIndex(0);
-			setHasNextPage(false);
-		}
-		prevQueryRef.current = {
-			sorting,
-			filters,
-			search,
-			pageSize
-		};
-	}, [
-		sorting,
-		filters,
-		search,
-		pageSize,
-		store
-	]);
-	const resolvedColumns = useMemo(() => enableRowSelection ? withSelectionColumn(columns, typeof enableRowSelection === "object" ? enableRowSelection : {}) : columns, [columns, enableRowSelection]);
-	const table = useReactTable({
-		data: store.getSnapshot().data,
-		columns: resolvedColumns,
-		state: {
-			sorting,
-			rowSelection,
-			pagination: {
-				pageIndex,
-				pageSize
-			}
-		},
-		manualPagination: true,
-		manualSorting: true,
-		manualFiltering: true,
-		pageCount: hasNextPage ? pageIndex + 2 : pageIndex + 1,
-		getCoreRowModel: getCoreRowModel(),
-		getRowId,
-		enableRowSelection: !!enableRowSelection,
-		onSortingChange: (updater) => {
-			const next = typeof updater === "function" ? updater(sorting) : updater;
-			store.setSorting(next);
-		},
-		onRowSelectionChange: (updater) => {
-			const next = typeof updater === "function" ? updater(rowSelection) : updater;
-			store.setRowSelection(next);
-		},
-		onPaginationChange: (updater) => {
-			const next = typeof updater === "function" ? updater({
-				pageIndex,
-				pageSize
-			}) : updater;
-			if (next.pageIndex !== pageIndex) store.setPageIndex(next.pageIndex);
-			if (next.pageSize !== pageSize) store.setPageSize(next.pageSize);
-		}
-	});
-	useEffect(() => {
-		if (stateAdapter) stateAdapter.write({
-			sorting,
-			filters,
-			search,
-			pageSize
-		});
-	}, [
-		sorting,
-		filters,
-		search,
-		pageSize,
-		stateAdapter
-	]);
-	return {
-		store,
-		table
-	};
-}
-
-//#endregion
-export { DEFAULT_DEBOUNCE_MS, DEFAULT_LOADING_ROWS, DEFAULT_PAGE_SIZE, DEFAULT_PAGE_SIZES, DataTable, createDataTableStore, createSelectionColumn, useDataTableClient, useDataTableContext, useDataTableFilters, useDataTableInlineContents, useDataTableLoading, useDataTablePagination, useDataTableRows, useDataTableSearch, useDataTableSelection, useDataTableServer, useDataTableSorting, 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 };