@inui/design-system 0.0.0-stage → 1.22.0

package/dist/components/ui/data-table.js

@@ -0,0 +1,3423 @@
+"use client";
+import { cn } from "../../lib/utils.js";
+import { AISparkle } from "./ai-sparkle.js";
+import { Button } from "./button.js";
+import { Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger } from "./popover.js";
+import { AILabel, AILabelContent, AILabelTrigger } from "./ai-label.js";
+import { Input } from "./input.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip.js";
+import { Label } from "./label.js";
+import { Checkbox } from "./checkbox.js";
+import { InputGroup, InputGroupAddon, InputGroupInput } from "./input-group.js";
+import { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow } from "./table.js";
+import { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious } from "./pagination.js";
+import { Skeleton } from "./skeleton.js";
+import { Empty, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "./empty.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "./dropdown-menu.js";
+import { Select, SelectContent, SelectItem, SelectMultiple, SelectMultipleContent, SelectMultipleFooter, SelectMultipleGroup, SelectMultipleItem, SelectMultipleLabel, SelectMultipleTrigger, SelectTrigger, SelectValue } from "./select.js";
+import * as React from "react";
+import { ArrowDownIcon, ArrowLeftIcon, ArrowLeftToLineIcon, ArrowRightIcon, ArrowRightToLineIcon, ArrowUpIcon, CheckCheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronsUpDownIcon, CircleAlertIcon, Columns3Icon, EllipsisIcon, EyeOffIcon, ListFilterIcon, PinIcon, PinOffIcon, RotateCcwIcon, SearchIcon, SearchXIcon, UnfoldHorizontalIcon, XIcon } from "lucide-react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { flexRender, getCoreRowModel, getExpandedRowModel, getFacetedMinMaxValues, getFacetedRowModel, getFacetedUniqueValues, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useReactTable } from "@tanstack/react-table";
+//#region src/components/ui/data-table.tsx
+/**
+* DataTable — Table plus sorting, filtering, search, row selection,
+* row actions, expandable rows, AI affordances, column management, and
+* pagination.
+*
+* A composite over the existing `Table` primitive (unmodified) — state is
+* owned by `@tanstack/react-table`, a headless logic-only library with no
+* rendered markup of its own (same "headless engine, MMDS renders every
+* pixel" shape as RichTextEditor's use of draft-js), not hand-rolled here.
+* Every visible piece (checkboxes, buttons, the search field, filter
+* popovers, the column menu, pagination, loading/empty states) is an
+* existing MMDS primitive — Checkbox, Button, InputGroup, Input, Select,
+* Popover, DropdownMenu, Skeleton, Empty, AISparkle.
+*/
+var SELECTION_CHECKBOX_CLASS = "size-6 rounded-[6px] border-0 p-1 bg-clip-content [outline-style:solid]! outline-1 -outline-offset-4 outline-input data-[state=checked]:[outline-style:none]! data-[state=indeterminate]:[outline-style:none]!";
+var SELECTION_COLUMN_ID = "__select__";
+var EXPAND_COLUMN_ID = "__expand__";
+var AI_COLUMN_ID = "__ai__";
+var INJECTED_COLUMN_IDS = /* @__PURE__ */ new Set([
+	SELECTION_COLUMN_ID,
+	EXPAND_COLUMN_ID,
+	AI_COLUMN_ID
+]);
+function AIMarkerTrigger({ size, ariaLabel }) {
+	return /* @__PURE__ */ jsx(AILabelTrigger, {
+		size: size === "default" ? "default" : "sm",
+		"aria-label": ariaLabel
+	});
+}
+function getColumnId(column) {
+	if (column.id) return column.id;
+	if ("accessorKey" in column && typeof column.accessorKey === "string") return column.accessorKey;
+}
+/** The dev-configured default pinning — every column's own `meta.pin`, collected into TanStack's `{ left, right }` shape. Seeds `columnPinning`'s initial state and is what "Reset to defaults" restores it to. */
+function derivePinningFromMeta(columns) {
+	const left = [];
+	const right = [];
+	columns.forEach((col) => {
+		const id = getColumnId(col);
+		if (!id) return;
+		if (col.meta?.pin === "left") left.push(id);
+		if (col.meta?.pin === "right") right.push(id);
+	});
+	return {
+		left,
+		right
+	};
+}
+function idListsEqual(a, b) {
+	const left = a ?? [];
+	const right = b ?? [];
+	return left.length === right.length && left.every((value, index) => value === right[index]);
+}
+var measureCanvasContext;
+function getMeasureContext() {
+	if (measureCanvasContext !== void 0) return measureCanvasContext;
+	measureCanvasContext = typeof document === "undefined" ? null : document.createElement("canvas").getContext("2d") ?? null;
+	return measureCanvasContext;
+}
+var MIN_SIZE_FALLBACK_CHAR_WIDTH = 8;
+function measureTextWidth(text, font) {
+	const ctx = getMeasureContext();
+	if (!ctx) return text.length * MIN_SIZE_FALLBACK_CHAR_WIDTH;
+	ctx.font = font;
+	return ctx.measureText(text).width;
+}
+var HEADER_ICON_CONTROL_ALLOWANCE = 26;
+/**
+* The narrowest a column should ever resize to — just enough for its
+* header's first character, an ellipsis, the sort icon (if sortable),
+* and the filter icon/headerActions cluster (if this column has them —
+* both occupy real layout space in the header row regardless of their
+* own hover-reveal opacity), so a squeezed column still reads as "this
+* column, truncated" rather than disappearing into an unreadable sliver
+* or squeezing its own label to nothing to make room for its sibling
+* controls. Measured per column via an offscreen canvas (the "W" in
+* "Website" needs more room than the "I" in "Invoice") rather than one
+* flat constant for every column — that's what makes this "dynamic."
+* Only works out the real first character when `header` is a plain
+* string; a render-function header falls back to
+* `MIN_SIZE_FALLBACK_CHAR_WIDTH` since there's no text to introspect
+* without actually mounting it.
+*/
+function computeColumnMinSize(col, tableSize) {
+	const font = tableSize === "xs" ? "500 12px system-ui, sans-serif" : "500 14px system-ui, sans-serif";
+	const label = (col.meta?.label ?? (typeof col.header === "string" ? col.header : "")).trim();
+	const charWidth = label ? measureTextWidth(label.charAt(0), font) : MIN_SIZE_FALLBACK_CHAR_WIDTH;
+	const ellipsisWidth = measureTextWidth("…", font);
+	const canSort = col.enableSorting !== false;
+	const sortIconAllowance = canSort ? 18 : 0;
+	const canFilter = col.enableColumnFilter !== false;
+	const hasHeaderActions = Boolean(col.meta?.headerActions);
+	const siblingControlsAllowance = (canFilter ? HEADER_ICON_CONTROL_ALLOWANCE : 0) + (hasHeaderActions ? HEADER_ICON_CONTROL_ALLOWANCE : 0);
+	const cellPadding = 16;
+	const buttonPadding = canSort ? 8 : 0;
+	return Math.ceil(charWidth + ellipsisWidth + sortIconAllowance + siblingControlsAllowance + cellPadding + buttonPadding);
+}
+/** A column absent from either map is implicitly visible (`true`) — comparing raw keys would treat "never touched" and "explicitly shown again" as different when they're not. */
+function visibilityEqual(a, b) {
+	return [.../* @__PURE__ */ new Set([...Object.keys(a), ...Object.keys(b)])].every((key) => (a[key] ?? true) === (b[key] ?? true));
+}
+/** A column absent from either map has no explicit width set — same "missing means untouched" comparison as `visibilityEqual`, just with no shared implicit value to fall back to (there's no one universal default width), so a column present in only one side always counts as a difference. */
+function sizingEqual(a, b) {
+	return [.../* @__PURE__ */ new Set([...Object.keys(a), ...Object.keys(b)])].every((key) => a[key] === b[key]);
+}
+var selectFilterFn = (row, columnId, filterValue) => {
+	if (!Array.isArray(filterValue) || filterValue.length === 0) return true;
+	return filterValue.includes(String(row.getValue(columnId)));
+};
+var singleSelectFilterFn = (row, columnId, filterValue) => {
+	if (!filterValue) return true;
+	return String(row.getValue(columnId)) === filterValue;
+};
+var DEFAULT_RANGE_BUCKET_SIZE = 3;
+var ALL_VALUE = "__all__";
+/** The last run of digits in a string — "INV003" -> 3. Powers `filterVariant: "range"`. */
+function extractTrailingNumber(value) {
+	const match = String(value ?? "").match(/(\d+)(?!.*\d)/);
+	return match ? Number(match[0]) : null;
+}
+var rangeBucketCache = /* @__PURE__ */ new WeakMap();
+/** Buckets a column's sorted unique values (by trailing number) into fixed-size groups, each rendered as a "min-max" (or just "min" for a single-value bucket) label. */
+function computeRangeBuckets(column, bucketSize) {
+	const uniqueValues = column.getFacetedUniqueValues();
+	const cached = rangeBucketCache.get(uniqueValues)?.get(bucketSize);
+	if (cached) return cached;
+	const numbers = Array.from(uniqueValues.keys()).map(extractTrailingNumber).filter((value) => value !== null).sort((a, b) => a - b);
+	const buckets = [];
+	for (let index = 0; index < numbers.length; index += bucketSize) {
+		const slice = numbers.slice(index, index + bucketSize);
+		const min = slice[0];
+		const max = slice[slice.length - 1];
+		buckets.push(min === max ? `${min}` : `${min}-${max}`);
+	}
+	const byBucketSize = rangeBucketCache.get(uniqueValues) ?? /* @__PURE__ */ new Map();
+	byBucketSize.set(bucketSize, buckets);
+	rangeBucketCache.set(uniqueValues, byBucketSize);
+	return buckets;
+}
+/** A "min-max" (or single "n") bucket label back into its numeric bounds. */
+function parseRangeBucket(label) {
+	const [min, max] = label.split("-").map(Number);
+	return max === void 0 ? [min, min] : [min, max];
+}
+var rangeFilterFn = (row, columnId, filterValue) => {
+	if (!Array.isArray(filterValue) || filterValue.length === 0) return true;
+	const value = extractTrailingNumber(row.getValue(columnId));
+	if (value === null) return false;
+	return filterValue.some((bucket) => {
+		const [min, max] = parseRangeBucket(bucket);
+		return value >= min && value <= max;
+	});
+};
+/** Matches `query` only where a word starts — at the beginning of the text or right after anything that isn't a letter or digit. The one pattern behind both the `searchMatch="startsWith"` filter and its highlight, so they can never disagree. Capture group 1 is the (possibly empty) boundary character, so the highlight can skip it; a consuming prefix instead of a lookbehind keeps this working on Safari before 16.4. */
+function wordStartPattern(query, flags) {
+	return new RegExp(`(^|[^\\p{L}\\p{N}])${query.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}`, flags);
+}
+var startsWithWordFilterFn = (row, columnId, filterValue) => {
+	const query = String(filterValue ?? "").trim();
+	if (!query) return true;
+	return wordStartPattern(query, "iu").test(String(row.getValue(columnId) ?? ""));
+};
+/**
+* Wraps the substring of `text` matching `query` in a `<mark>`. Exported so a
+* column with a custom `cell` can highlight matches itself — read the live
+* query off `info.table.getState().globalFilter` inside that `cell`. Pass
+* `startsWith` when the table's `searchMatch` is `"startsWith"`, so only
+* word-start matches are marked.
+*/
+function HighlightMatch({ text, query, startsWith = false }) {
+	const trimmed = query.trim();
+	if (!trimmed) return /* @__PURE__ */ jsx(Fragment, { children: text });
+	const mark = (part, index) => /* @__PURE__ */ jsx("mark", {
+		className: "rounded-[2px] bg-primary/15 text-inherit",
+		children: part
+	}, index);
+	if (startsWith) {
+		const parts = [];
+		let last = 0;
+		for (const match of text.matchAll(wordStartPattern(trimmed, "giu"))) {
+			const start = match.index + match[1].length;
+			if (start > last) parts.push(text.slice(last, start));
+			parts.push(mark(match[0].slice(match[1].length), parts.length));
+			last = match.index + match[0].length;
+		}
+		if (last < text.length) parts.push(text.slice(last));
+		return /* @__PURE__ */ jsx(Fragment, { children: parts });
+	}
+	const pattern = new RegExp(`(${trimmed.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")})`, "gi");
+	const parts = text.split(pattern);
+	return /* @__PURE__ */ jsx(Fragment, { children: parts.map((part, index) => part.toLowerCase() === trimmed.toLowerCase() ? mark(part, index) : part) });
+}
+/**
+* Renders `actions` as inline icon buttons (≤2 actions) or an overflow
+* menu (>2) — `mode` overrides the auto pick. Stops its own click from
+* bubbling, so it composes safely inside a row that also has `onRowClick`.
+*/
+function RowActions({ actions, mode = "auto", revealClassName, onOpenChange }) {
+	const [overflowOpen, setOverflowOpenState] = React.useState(false);
+	const setOverflowOpen = (open) => {
+		setOverflowOpenState(open);
+		onOpenChange?.(open);
+	};
+	if ((mode === "auto" ? actions.length <= 2 ? "inline" : "overflow" : mode) === "inline") return /* @__PURE__ */ jsx("div", {
+		"data-fit-exclude": true,
+		draggable: false,
+		className: cn("flex items-center justify-end gap-1", revealClassName),
+		onClick: (event) => event.stopPropagation(),
+		children: actions.map((action) => /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+			asChild: true,
+			children: /* @__PURE__ */ jsx(Button, {
+				type: "button",
+				variant: "ghost",
+				size: "xs",
+				iconOnly: true,
+				"aria-label": action.label,
+				className: cn(action.variant === "destructive" && "text-destructive hover:text-destructive"),
+				onClick: action.onClick,
+				onMouseEnter: action.onMouseEnter,
+				onMouseLeave: action.onMouseLeave,
+				onFocus: action.onFocus,
+				onBlur: action.onBlur,
+				children: action.icon ? /* @__PURE__ */ jsx(action.icon, {}) : null
+			})
+		}), /* @__PURE__ */ jsx(TooltipContent, { children: action.label })] }, action.label))
+	});
+	return /* @__PURE__ */ jsx("div", {
+		"data-fit-exclude": true,
+		draggable: false,
+		className: cn("flex justify-end", overflowOpen ? "opacity-100" : revealClassName),
+		onClick: (event) => event.stopPropagation(),
+		children: /* @__PURE__ */ jsxs(DropdownMenu, {
+			open: overflowOpen,
+			onOpenChange: setOverflowOpen,
+			children: [/* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+				asChild: true,
+				children: /* @__PURE__ */ jsx(DropdownMenuTrigger, {
+					asChild: true,
+					children: /* @__PURE__ */ jsx(Button, {
+						type: "button",
+						variant: "ghost",
+						size: "xs",
+						iconOnly: true,
+						"aria-label": "Row actions",
+						children: /* @__PURE__ */ jsx(EllipsisIcon, {})
+					})
+				})
+			}), /* @__PURE__ */ jsx(TooltipContent, { children: "Row actions" })] }), /* @__PURE__ */ jsx(DropdownMenuContent, {
+				align: "end",
+				children: actions.map((action) => /* @__PURE__ */ jsxs(DropdownMenuItem, {
+					variant: action.variant,
+					onClick: action.onClick,
+					onMouseEnter: action.onMouseEnter,
+					onMouseLeave: action.onMouseLeave,
+					onFocus: action.onFocus,
+					onBlur: action.onBlur,
+					children: [action.icon ? /* @__PURE__ */ jsx(action.icon, { "data-icon": "inline-start" }) : null, action.label]
+				}, action.label))
+			})]
+		})
+	});
+}
+var FIT_TO_CONTENT_PADDING = 2;
+var DEFAULT_MAX_COLUMN_SIZE = 1200;
+var PAGE_SELECT_THRESHOLD = 50;
+/**
+* The page numbers (and `"ellipsis"` gaps) a numbered `Pagination` control
+* actually renders for `current` (1-indexed) out of `total` pages — always
+* page 1 and `total`, always `current`'s own immediate neighbors, an
+* ellipsis standing in for whatever's skipped between those two clusters.
+*/
+function getPaginationWindow(current, total) {
+	const pages = /* @__PURE__ */ new Set([1, total]);
+	for (let page = current - 1; page <= current + 1; page++) if (page >= 1 && page <= total) pages.add(page);
+	const sorted = [...pages].sort((a, b) => a - b);
+	const result = [];
+	let previous = 0;
+	for (const page of sorted) {
+		if (page - previous > 1) result.push("ellipsis");
+		result.push(page);
+		previous = page;
+	}
+	return result;
+}
+/**
+* Clones every element in `elements` into one shared, unconstrained, hidden
+* container appended to `document.body` exactly once, to measure each
+* clone's natural (unwrapped, unclipped) content width independent of
+* whatever width the live layout currently gives it — one batch of
+* append/measure/remove instead of one full reflow-triggering cycle per
+* cell, which is what a header plus a full page of body rows would
+* otherwise cost on every "Fit to content" click. Measuring the live
+* elements' own `scrollWidth` directly doesn't work here: once a column
+* has already been fit once, its cells are exactly as wide as their
+* content, so `scrollWidth` on those *live* cells just reports back their
+* own current box width (there's nothing left to overflow) rather than the
+* true minimum — clicking "Fit to content" again would then add
+* `FIT_TO_CONTENT_PADDING` on top of that every time, growing the column a
+* couple pixels on every click forever. The clones sidestep that by never
+* being constrained by the table's own column width to begin with. Strips
+* anything marked `data-fit-exclude` first — hover-only header actions
+* shouldn't force permanent extra width onto a column just because they're
+* in the DOM.
+*/
+function measureNaturalWidths(elements) {
+	const container = document.createElement("div");
+	Object.assign(container.style, {
+		position: "absolute",
+		visibility: "hidden",
+		left: "-9999px",
+		top: "-9999px"
+	});
+	const clones = elements.map((element) => {
+		const clone = element.cloneNode(true);
+		clone.querySelectorAll("[data-fit-exclude]").forEach((node) => node.remove());
+		Object.assign(clone.style, {
+			display: "inline-block",
+			width: "auto",
+			maxWidth: "none",
+			whiteSpace: "nowrap"
+		});
+		container.appendChild(clone);
+		return clone;
+	});
+	document.body.appendChild(container);
+	const widths = clones.map((clone) => clone.scrollWidth);
+	container.remove();
+	return widths;
+}
+/**
+* Measures every currently-rendered cell in `column` — its header plus
+* this page's body rows, via `measureNaturalWidths` — and sets the
+* column's size to the widest one found, via `table.setColumnSizing`.
+* Only rows rendered on the *current* page are measured — a deliberate,
+* cheaper scope than the whole dataset. Requires `enableColumnResizing`
+* on `DataTable` (a column that can't resize can't be fit either — see
+* `columnMenuActions`). The measuring pass runs one frame later
+* (`requestAnimationFrame`) so it never shares a frame with whatever
+* triggered it (a click, a double-click) — it's a batch of forced
+* layout reads either way, just not fighting that frame's own paint too.
+*/
+function fitColumnToContent(column, table) {
+	const elements = table.options.meta?.getColumnCellElements?.(column.id) ?? [];
+	if (elements.length === 0) return;
+	requestAnimationFrame(() => {
+		const widest = Math.max(...measureNaturalWidths(elements));
+		table.setColumnSizing((old) => ({
+			...old,
+			[column.id]: widest + FIT_TO_CONTENT_PADDING
+		}));
+	});
+}
+/**
+* Pin left/Pin right `RowAction`s for `column` — each becomes "Unpin"
+* instead once the column's already pinned to that side. Empty when the
+* column can't pin (`getCanPin()`) or `meta.pinLocked` is set. Shared by
+* `columnMenuActions` (the header-cell menu) and the Columns-menu popover
+* row, which renders these same two actions as plain inline icon buttons
+* instead of inside a dropdown.
+*/
+function pinActions(column) {
+	if (!column.getCanPin() || column.columnDef.meta?.pinLocked) return [];
+	const pinned = column.getIsPinned();
+	return [pinned === "left" ? {
+		label: "Unpin",
+		icon: PinOffIcon,
+		onClick: () => column.pin(false)
+	} : {
+		label: "Pin left",
+		icon: ArrowLeftToLineIcon,
+		onClick: () => column.pin("left")
+	}, pinned === "right" ? {
+		label: "Unpin",
+		icon: PinOffIcon,
+		onClick: () => column.pin(false)
+	} : {
+		label: "Pin right",
+		icon: ArrowRightToLineIcon,
+		onClick: () => column.pin("right")
+	}];
+}
+/**
+* A ready-made column-menu bundle for `headerActions` — Pin left, Pin
+* right (via `pinActions`), Hide column, and Fit to content — each
+* omitted when the column can't do it (`getCanPin()`/`getCanHide()`/
+* `getCanResize()`, the last only true once `enableColumnResizing` is
+* set). Typically 3-4 actions, so `RowActions`' own auto mode already
+* renders it as a single overflow "more" menu — no need to force
+* `mode="overflow"`.
+*/
+function columnMenuActions(column, table) {
+	const actions = [...pinActions(column)];
+	if (column.getCanHide()) actions.push({
+		label: "Hide column",
+		icon: EyeOffIcon,
+		onClick: () => column.toggleVisibility(false)
+	});
+	if (column.getCanResize()) actions.push({
+		label: "Fit to content",
+		icon: UnfoldHorizontalIcon,
+		onClick: () => fitColumnToContent(column, table)
+	});
+	return actions;
+}
+var numericAwareCollator = new Intl.Collator(void 0, { numeric: true });
+/** `"bucket"` is the canonical name; `"range"` is still accepted (with a dev warning — see the deprecation checks near the component's other dev warnings) since it originally had no more specific name to disambiguate against. */
+function isBucketFilterVariant(column) {
+	const variant = column.columnDef.meta?.filterVariant;
+	return variant === "bucket" || variant === "range";
+}
+/** `bucketSize` is the canonical name; `rangeBucketSize` is still accepted (same deprecation as `"range"` above). */
+function resolveBucketSize(column) {
+	const meta = column.columnDef.meta;
+	return meta?.bucketSize ?? meta?.rangeBucketSize ?? DEFAULT_RANGE_BUCKET_SIZE;
+}
+/** The resolved option list for an enumerable filter (`select`/`singleSelect`/`bucket`) — `meta.filterOptions` if given, else raw unique values or computed range buckets, sorted per `meta.filterOptionsSort` and decorated with a facet `count` when `showFilterCounts`. Shared by the header filter icon, the inline pinned filter, and the "more filters" pane — all three render the same resolved list the same way, see `renderFilterOptionContent`. */
+function resolveFilterOptions(column, showFilterCounts) {
+	const meta = column.columnDef.meta;
+	const explicit = meta?.filterOptions;
+	let options;
+	if (explicit) options = typeof explicit === "function" ? explicit(column) : explicit;
+	else if (isBucketFilterVariant(column)) options = computeRangeBuckets(column, resolveBucketSize(column)).map((value) => ({ value }));
+	else options = Array.from(column.getFacetedUniqueValues().keys()).map((value) => ({ value: String(value) }));
+	const sortMode = meta?.filterOptionsSort ?? "auto";
+	if (typeof sortMode === "function") options = [...options].sort(sortMode);
+	else if (sortMode === "auto") options = [...options].sort((a, b) => numericAwareCollator.compare(a.textValue ?? (typeof a.label === "string" ? a.label : a.value), b.textValue ?? (typeof b.label === "string" ? b.label : b.value)));
+	if (showFilterCounts) {
+		const counts = column.getFacetedUniqueValues();
+		options = options.map((option) => ({
+			...option,
+			count: counts.get(option.value)
+		}));
+	}
+	return options;
+}
+/** Whether any option in the list opts into grouping — grouping only activates once at least one option sets `group`; a list with none renders flat. */
+function hasGroupedFilterOptions(options) {
+	return options.some((option) => option.group);
+}
+/** Stable-orders `options` into `{ group, options }` buckets, in whichever order each group first appears — used by every surface that renders grouped options the same way. */
+function groupFilterOptions(options) {
+	const order = [];
+	const byGroup = /* @__PURE__ */ new Map();
+	for (const option of options) {
+		if (!byGroup.has(option.group)) {
+			order.push(option.group);
+			byGroup.set(option.group, []);
+		}
+		byGroup.get(option.group).push(option);
+	}
+	return order.map((group) => ({
+		group,
+		options: byGroup.get(group)
+	}));
+}
+/** The label content shared by every filter surface for one resolved option — icon, label (falling back to the raw value), a muted count when present, and a muted `description` line underneath when given. `size-4` is explicit, not left to each surface's own ambient `[&_svg:not([class*='size-'])]:size-4` ("skip if the class already sets a size") sizing rule — the checklist's plain `Label`+`Checkbox` row has no such rule the way `SelectItem`/`SelectMultipleItem` do, so an unsized icon there falls back to the browser's native (much larger) SVG default instead. */
+function FilterOptionContent({ option }) {
+	const Icon = option.icon;
+	return /* @__PURE__ */ jsxs("span", {
+		className: "flex min-w-0 flex-1 items-center gap-1.5",
+		children: [Icon && /* @__PURE__ */ jsx(Icon, { className: "size-4 shrink-0" }), /* @__PURE__ */ jsxs("span", {
+			className: "flex min-w-0 flex-col",
+			children: [/* @__PURE__ */ jsxs("span", {
+				className: "flex items-center gap-1 truncate",
+				children: [option.label ?? option.value, option.count != null && /* @__PURE__ */ jsxs("span", {
+					className: "text-muted-foreground",
+					children: [
+						"(",
+						option.count,
+						")"
+					]
+				})]
+			}), option.description && /* @__PURE__ */ jsx("span", {
+				className: "truncate text-xs text-muted-foreground",
+				children: option.description
+			})]
+		})]
+	});
+}
+/** Stand-in for the option list while `meta.filterOptionsLoading` is set — same shape in every surface (checklist, `SelectMultipleContent`, plain `Select`'s content), since DataTable never fetches anything itself and has no real option count to size the skeleton to. */
+function FilterOptionsSkeleton() {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-1.5 p-1",
+		children: [
+			/* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-full" }),
+			/* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-4/5" }),
+			/* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-3/5" })
+		]
+	});
+}
+var FILTER_SEARCH_THRESHOLD = 8;
+var FILTER_SELECT_ALL_THRESHOLD = 2;
+function optionSearchText(option) {
+	return option.textValue ?? (typeof option.label === "string" ? option.label : option.value);
+}
+/** The always-open checklist `ColumnFilterField`'s `select`/`range` branch renders — its own component so the search/select-all state doesn't leak into the parent's. */
+function FilterOptionChecklist({ options, selected, onValueChange, stickySelectAll }) {
+	const [query, setQuery] = React.useState("");
+	const showSearch = options.length > FILTER_SEARCH_THRESHOLD;
+	const grouped = hasGroupedFilterOptions(options);
+	const visibleOptions = showSearch ? options.filter((option) => optionSearchText(option).toLowerCase().includes(query.toLowerCase())) : options;
+	const allVisibleSelected = visibleOptions.length > 0 && visibleOptions.every((option) => selected.includes(option.value));
+	const someVisibleSelected = visibleOptions.some((option) => selected.includes(option.value));
+	function toggleAll() {
+		if (allVisibleSelected) {
+			const visibleValues = new Set(visibleOptions.map((option) => option.value));
+			const next = selected.filter((value) => !visibleValues.has(value));
+			onValueChange(next.length ? next : void 0);
+		} else onValueChange(Array.from(/* @__PURE__ */ new Set([...selected, ...visibleOptions.map((option) => option.value)])));
+	}
+	function renderOption(option) {
+		return /* @__PURE__ */ jsxs(Label, {
+			className: "flex items-center gap-2 font-normal",
+			children: [/* @__PURE__ */ jsx(Checkbox, {
+				checked: selected.includes(option.value),
+				disabled: option.disabled,
+				onCheckedChange: (checked) => {
+					const next = checked ? [...selected, option.value] : selected.filter((value) => value !== option.value);
+					onValueChange(next.length ? next : void 0);
+				}
+			}), /* @__PURE__ */ jsx(FilterOptionContent, { option })]
+		}, option.value);
+	}
+	const selectAllRow = options.length > FILTER_SELECT_ALL_THRESHOLD && visibleOptions.length > 0 && /* @__PURE__ */ jsxs(Label, {
+		className: "flex items-center gap-2 pb-1.5 font-normal",
+		children: [/* @__PURE__ */ jsx(Checkbox, {
+			checked: allVisibleSelected ? true : someVisibleSelected ? "indeterminate" : false,
+			onCheckedChange: toggleAll
+		}), "Select all"]
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-1.5",
+		children: [
+			showSearch && /* @__PURE__ */ jsx(Input, {
+				placeholder: "Search...",
+				value: query,
+				onChange: (event) => setQuery(event.target.value)
+			}),
+			stickySelectAll && selectAllRow,
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex max-h-64 flex-col gap-1.5 overflow-y-auto",
+				children: [
+					!stickySelectAll && selectAllRow,
+					visibleOptions.length === 0 && /* @__PURE__ */ jsx("p", {
+						className: "text-sm text-muted-foreground",
+						children: "No values"
+					}),
+					grouped ? groupFilterOptions(visibleOptions).map(({ group, options }) => /* @__PURE__ */ jsxs("div", { children: [group && /* @__PURE__ */ jsx(Label, {
+						className: "mb-1 block text-xs text-muted-foreground",
+						children: group
+					}), /* @__PURE__ */ jsx("div", {
+						className: "flex flex-col gap-1.5",
+						children: options.map(renderOption)
+					})] }, group ?? "__ungrouped__")) : visibleOptions.map(renderOption)
+				]
+			})
+		]
+	});
+}
+/**
+* `value`/`onValueChange` are handed in rather than read straight off
+* `column` so this same field can drive either the real, immediately-applied
+* filter state or a popover's own pending draft — see `ColumnFilterTrigger`'s
+* `deferred` prop for the latter. Both still read `column` itself for
+* `filterVariant`/unique values; only the value being edited is decoupled.
+*/
+/** A text filter input whose own displayed value updates every keystroke, while the real filter it drives only catches up 200ms after typing stops (flushed immediately on blur or Enter) — same "instant to type into, debounced to act on" split as the toolbar's global search. */
+function DebouncedFilterInput({ value, onValueChange, placeholder = "Filter..." }) {
+	const [inputValue, setInputValue] = React.useState(value);
+	const debouncedOnValueChange = useDebouncedCallback(onValueChange, 200);
+	React.useEffect(() => {
+		setInputValue(value);
+	}, [value]);
+	return /* @__PURE__ */ jsx(Input, {
+		placeholder,
+		value: inputValue,
+		onChange: (event) => {
+			setInputValue(event.target.value);
+			debouncedOnValueChange(event.target.value || void 0);
+		},
+		onBlur: () => onValueChange(inputValue || void 0),
+		onKeyDown: (event) => {
+			if (event.key === "Enter") onValueChange(inputValue || void 0);
+		}
+	});
+}
+function ColumnFilterField({ column, value, onValueChange, showFilterCounts, stickyFilterSelectAll }) {
+	const meta = column.columnDef.meta;
+	if (meta?.filterRender) return meta.filterRender({
+		column,
+		value,
+		onValueChange
+	});
+	if (meta?.filterOptionsLoading) return /* @__PURE__ */ jsx(FilterOptionsSkeleton, {});
+	if (meta?.filterVariant === "select" || isBucketFilterVariant(column)) {
+		const options = resolveFilterOptions(column, showFilterCounts);
+		return /* @__PURE__ */ jsx(FilterOptionChecklist, {
+			options,
+			selected: value ?? [],
+			onValueChange,
+			stickySelectAll: stickyFilterSelectAll
+		});
+	}
+	if (meta?.filterVariant === "singleSelect") {
+		const options = resolveFilterOptions(column, showFilterCounts);
+		return /* @__PURE__ */ jsxs(Select, {
+			value: value ?? ALL_VALUE,
+			onValueChange: (next) => onValueChange(next === ALL_VALUE ? void 0 : next),
+			children: [/* @__PURE__ */ jsx(SelectTrigger, {
+				className: "w-full",
+				children: /* @__PURE__ */ jsx(SelectValue, {})
+			}), /* @__PURE__ */ jsxs(SelectContent, { children: [/* @__PURE__ */ jsx(SelectItem, {
+				value: ALL_VALUE,
+				children: "All"
+			}), options.map((option) => /* @__PURE__ */ jsx(SelectItem, {
+				value: option.value,
+				disabled: option.disabled,
+				children: /* @__PURE__ */ jsx(FilterOptionContent, { option })
+			}, option.value))] })]
+		});
+	}
+	return /* @__PURE__ */ jsx(DebouncedFilterInput, {
+		value: value ?? "",
+		onValueChange
+	});
+}
+/** The search input + select-all/clear row + grouped-or-flat `SelectMultipleItem`s shared by every `SelectMultiple`-based filter surface (inline toolbar chip and pane, for `select`/`range`/`singleSelect` alike) — matches `select.tsx`'s own documented search recipe: hidden via `className`, never unmounted, so a selected-but-filtered-out item keeps its label registered for the trigger's own comma-list. `showSelectAll` is only meaningful for true multi-select (`select`/`range`) — a `singleSelect` list has nothing for "select all" to mean. */
+function SelectMultipleOptionsContent({ options, value, onValueChangeAll, showSelectAll = true, stickySelectAll }) {
+	const [query, setQuery] = React.useState("");
+	const showSearch = options.length > FILTER_SEARCH_THRESHOLD;
+	const grouped = hasGroupedFilterOptions(options);
+	const matches = (option) => !showSearch || !query || optionSearchText(option).toLowerCase().includes(query.toLowerCase());
+	const visibleOptions = options.filter(matches);
+	const allVisibleSelected = visibleOptions.length > 0 && visibleOptions.every((option) => value.includes(option.value));
+	const someVisibleSelected = visibleOptions.some((option) => value.includes(option.value));
+	function toggleAll() {
+		if (allVisibleSelected) {
+			const visibleValues = new Set(visibleOptions.map((option) => option.value));
+			const next = value.filter((v) => !visibleValues.has(v));
+			onValueChangeAll(next.length ? next : void 0);
+		} else onValueChangeAll(Array.from(/* @__PURE__ */ new Set([...value, ...visibleOptions.map((option) => option.value)])));
+	}
+	function renderItem(option) {
+		return /* @__PURE__ */ jsx(SelectMultipleItem, {
+			value: option.value,
+			disabled: option.disabled,
+			textValue: option.textValue ?? (typeof option.label === "string" ? option.label : void 0),
+			className: cn(!matches(option) && "hidden"),
+			children: /* @__PURE__ */ jsx(FilterOptionContent, { option })
+		}, option.value);
+	}
+	const selectAllRow = showSelectAll && options.length > FILTER_SELECT_ALL_THRESHOLD && options.length > 0 && /* @__PURE__ */ jsxs(Label, {
+		className: "flex items-center gap-2 p-1.5 font-normal",
+		children: [/* @__PURE__ */ jsx(Checkbox, {
+			checked: allVisibleSelected ? true : someVisibleSelected ? "indeterminate" : false,
+			onCheckedChange: toggleAll
+		}), "Select all"]
+	});
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		showSearch && /* @__PURE__ */ jsx("div", {
+			className: "p-1 pb-0",
+			children: /* @__PURE__ */ jsx(Input, {
+				placeholder: "Search...",
+				value: query,
+				onChange: (event) => setQuery(event.target.value)
+			})
+		}),
+		stickySelectAll && selectAllRow,
+		/* @__PURE__ */ jsxs("div", {
+			className: "max-h-64 overflow-y-auto",
+			children: [!stickySelectAll && selectAllRow, grouped ? groupFilterOptions(options).map(({ group, options: groupOptions }) => /* @__PURE__ */ jsxs(SelectMultipleGroup, { children: [group && /* @__PURE__ */ jsx(SelectMultipleLabel, { children: group }), groupOptions.map(renderItem)] }, group ?? "__ungrouped__")) : options.map(renderItem)]
+		})
+	] });
+}
+/** Same filtering as `ColumnFilterField` (including `meta.filterRender`, checked first), but the select/range/singleSelect variants stay closed by default (a `SelectMultiple`/`Select`) instead of listing every value upfront — the filters pane holds every filterable column at once, so an always-open checklist per column would be too much to scan. `value`/`onValueChange` are the pane's own shared draft under `filterApplyMode="deferred"` (see the pane's footer), or the real filter directly otherwise — same dual-mode shape `ColumnFilterField` already uses. */
+/**
+* Same filter shapes as `ColumnFilterField`, but self-contained rather
+* than taking `value`/`onValueChange` from a caller — the pane has no
+* shared batch draft or footer of its own (just "Clear filters", which
+* clears the real, already-applied filters). A multiselect field
+* (`select`/`range`) is still always deferred, same as everywhere else,
+* but that's *this* field's own popover — its own draft, its own
+* Cancel/Apply footer inside it — exactly like the inline toolbar's
+* identical field, not a pane-wide batch.
+*/
+/** The pane's `filterRender` field under a deferred apply mode — a local draft plus an inline Cancel/Apply row, since `filterRender` in the pane isn't wrapped in a popover of its own the way every other variant here is (it just renders directly, always visible), so there's no popover footer to hang Cancel/Apply off of the way `SelectMultipleFooter`/`FilterPopoverFooter` do elsewhere. */
+function DeferredPaneFilterRender({ column, filterRender }) {
+	const committedValue = column.getFilterValue();
+	const [pendingValue, setPendingValue] = React.useState(committedValue);
+	React.useEffect(() => {
+		setPendingValue(committedValue);
+	}, [committedValue]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-2",
+		children: [filterRender({
+			column,
+			value: pendingValue,
+			onValueChange: setPendingValue
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center justify-end gap-1",
+			children: [/* @__PURE__ */ jsx(Button, {
+				type: "button",
+				variant: "ghost",
+				size: "xs",
+				onClick: () => setPendingValue(committedValue),
+				children: "Cancel"
+			}), /* @__PURE__ */ jsx(Button, {
+				type: "button",
+				size: "xs",
+				disabled: filterDraftUnchanged(committedValue, pendingValue),
+				onClick: () => column.setFilterValue(pendingValue),
+				children: "Apply"
+			})]
+		})]
+	});
+}
+function PaneColumnFilterField({ column, showFilterCounts, tableDeferred, stickyFilterSelectAll }) {
+	const meta = column.columnDef.meta;
+	const [open, setOpenState] = React.useState(false);
+	const [pendingValue, setPendingValue] = React.useState(void 0);
+	const setOpen = (value) => {
+		if (value) setPendingValue(column.getFilterValue());
+		setOpenState(value);
+	};
+	if (meta?.filterRender) {
+		if (isColumnDeferred(column, !!tableDeferred)) return /* @__PURE__ */ jsx(DeferredPaneFilterRender, {
+			column,
+			filterRender: meta.filterRender
+		});
+		return meta.filterRender({
+			column,
+			value: column.getFilterValue(),
+			onValueChange: (value) => column.setFilterValue(value)
+		});
+	}
+	if (meta?.filterOptionsLoading) return /* @__PURE__ */ jsx(FilterOptionsSkeleton, {});
+	if (meta?.filterVariant === "select" || isBucketFilterVariant(column)) {
+		const options = resolveFilterOptions(column, showFilterCounts);
+		const selected = open ? pendingValue ?? [] : column.getFilterValue() ?? [];
+		return /* @__PURE__ */ jsxs(SelectMultiple, {
+			open,
+			onOpenChange: setOpen,
+			value: selected,
+			onValueChange: (next) => setPendingValue(next.length ? next : void 0),
+			children: [/* @__PURE__ */ jsx(SelectMultipleTrigger, {
+				placeholder: "All",
+				className: "w-full"
+			}), /* @__PURE__ */ jsxs(SelectMultipleContent, { children: [/* @__PURE__ */ jsx(SelectMultipleOptionsContent, {
+				options,
+				value: selected,
+				onValueChangeAll: setPendingValue,
+				stickySelectAll: stickyFilterSelectAll
+			}), /* @__PURE__ */ jsxs(SelectMultipleFooter, { children: [/* @__PURE__ */ jsx(Button, {
+				type: "button",
+				variant: "ghost",
+				size: "xs",
+				onClick: () => setOpen(false),
+				children: "Cancel"
+			}), /* @__PURE__ */ jsx(Button, {
+				type: "button",
+				size: "xs",
+				disabled: filterDraftUnchanged(column.getFilterValue(), pendingValue),
+				onClick: () => {
+					column.setFilterValue(pendingValue);
+					setOpen(false);
+				},
+				children: "Apply"
+			})] })] })]
+		});
+	}
+	if (meta?.filterVariant === "singleSelect") {
+		const options = resolveFilterOptions(column, showFilterCounts);
+		const selected = column.getFilterValue() ?? "";
+		return /* @__PURE__ */ jsxs(SelectMultiple, {
+			closeOnSelect: true,
+			value: selected ? [selected] : [],
+			onValueChange: (next) => column.setFilterValue(next.at(-1)),
+			children: [/* @__PURE__ */ jsx(SelectMultipleTrigger, {
+				placeholder: "All",
+				className: "w-full"
+			}), /* @__PURE__ */ jsx(SelectMultipleContent, { children: /* @__PURE__ */ jsx(SelectMultipleOptionsContent, {
+				options,
+				value: selected ? [selected] : [],
+				onValueChangeAll: () => {},
+				showSelectAll: false,
+				stickySelectAll: stickyFilterSelectAll
+			}) })]
+		});
+	}
+	return /* @__PURE__ */ jsx(DebouncedFilterInput, {
+		value: column.getFilterValue() ?? "",
+		onValueChange: (value) => column.setFilterValue(value)
+	});
+}
+var warnedMissingLabelIds = /* @__PURE__ */ new Set();
+function columnLabel(column) {
+	if (column.columnDef.meta?.label) return column.columnDef.meta.label;
+	if (typeof column.columnDef.header === "string") return column.columnDef.header;
+	if (process.env.NODE_ENV !== "production" && !warnedMissingLabelIds.has(column.id)) {
+		warnedMissingLabelIds.add(column.id);
+		console.warn(`DataTable: column "${column.id}" has a non-string \`header\` (an icon, a custom component, ...) and no \`meta.label\` — every place that needs this column's *name* rather than its rendered header (the Columns menu, the "All filters" pane, tooltips, applied-filter/chip copy) falls back to its raw \`id\` instead. Set \`meta.label\` to fix this.`);
+	}
+	return column.id;
+}
+/**
+* Bulk-actions bar shown while any row is selected — hovers over the
+* bottom edge of the table's own viewport, never the screen: `sticky`
+* inside `tableContainerRef`, which is unconditionally a genuine scroll
+* container (its own `overflow-auto`) by the time this renders. `sticky`
+* (not `absolute`) is what actually matters here:
+* `absolute` positions against the *content* box, so it scrolls away
+* with the rows above it instead of staying put — `sticky` is what
+* tracks the scroll *viewport* itself. Since `tableContainerRef` is the
+* nearest scrolling ancestor either way, this never hits the Card
+* `overflow-hidden` problem `sticky` usually has (that only happens when
+* `sticky` has to bubble past a non-scrolling container to find one).
+* Either way it's a child of `tableContainerRef`, not a portal, so it's
+* bounded by the table's own box, not the viewport.
+*/
+var BulkActionsBar = React.forwardRef(function BulkActionsBar({ count, hiddenByFilterCount = 0, totalCount, isAllSelected, maxSelectedRows, atSelectionCap = false, onSelectAll, onClear, clearLabel = "Clear selection", controlSize, controlIconSize, children }, ref) {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: "pointer-events-none sticky bottom-2 z-10 flex justify-center",
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "pointer-events-auto flex items-center gap-1 rounded-full border border-border bg-popover p-1.5 shadow-popover",
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					className: "flex items-center gap-1.5 px-2",
+					children: /* @__PURE__ */ jsx("span", {
+						className: "text-sm text-muted-foreground",
+						children: isAllSelected ? `All ${totalCount} selected` : /* @__PURE__ */ jsxs(Fragment, { children: [
+							count,
+							" ",
+							maxSelectedRows != null ? `of ${maxSelectedRows} max selected` : "selected",
+							hiddenByFilterCount > 0 && ` (${hiddenByFilterCount} hidden by filters)`
+						] })
+					})
+				}),
+				/* @__PURE__ */ jsx(Button, {
+					type: "button",
+					variant: "ghost",
+					size: controlSize,
+					disabled: !isAllSelected && atSelectionCap,
+					title: !isAllSelected && atSelectionCap ? `Up to ${maxSelectedRows} rows can be selected` : void 0,
+					onClick: isAllSelected ? onClear : onSelectAll,
+					children: isAllSelected ? "Clear selection" : /* @__PURE__ */ jsxs(Fragment, { children: [
+						/* @__PURE__ */ jsx(CheckCheckIcon, {}),
+						"Select all ",
+						totalCount
+					] })
+				}),
+				children && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", { className: "h-5 w-px shrink-0 bg-border" }), /* @__PURE__ */ jsx("div", {
+					className: "flex items-center gap-1",
+					children
+				})] }),
+				/* @__PURE__ */ jsx("div", { className: "h-5 w-px shrink-0 bg-border" }),
+				/* @__PURE__ */ jsx(Button, {
+					type: "button",
+					variant: "ghost",
+					size: controlIconSize,
+					iconOnly: true,
+					"aria-label": clearLabel,
+					onClick: onClear,
+					children: /* @__PURE__ */ jsx(XIcon, {})
+				})
+			]
+		})
+	});
+});
+/** Sticky offset for a pinned column — `undefined` (no inline style) when the column isn't pinned. */
+function getPinnedStyle(column) {
+	const pinned = column.getIsPinned();
+	if (!pinned) return void 0;
+	return pinned === "left" ? {
+		position: "sticky",
+		left: column.getStart("left")
+	} : {
+		position: "sticky",
+		right: column.getAfter("right")
+	};
+}
+/**
+* Solid `bg-card` (the table's own real white surface, not `bg-background`
+* — that token is the page canvas gray, which read as a mismatched "grey
+* bg" against the rest of the table) so scrolled content doesn't show
+* through underneath, plus a thicker boundary divider on the outermost
+* pinned column of each side — on its right edge for the left-pinned
+* group, its left edge for the right-pinned group, i.e. towards whichever
+* side actually borders the scrollable/center columns. `bg-card` is opaque
+* and painted directly on this cell, which would otherwise hide this row's
+* own hover/selected tint (both painted on the `<tr>`, a layer down) for
+* just this one column — `group-hover/row`/`group-data-[state=selected]/row`
+* (reacting to `TableRow`'s own `group/row`, see table.tsx) repaints the
+* same tint directly on this cell instead of relying on it showing through.
+*/
+function getPinnedClassName(column, table) {
+	const pinned = column.getIsPinned();
+	if (!pinned) return "";
+	const visibleLeft = table.getLeftLeafColumns().filter((c) => c.getIsVisible());
+	const visibleRight = table.getRightLeafColumns().filter((c) => c.getIsVisible());
+	const isLastLeft = pinned === "left" && visibleLeft.at(-1)?.id === column.id;
+	const isFirstRight = pinned === "right" && visibleRight[0]?.id === column.id;
+	return cn("z-10 bg-card", "group-hover/row:bg-[color-mix(in_oklab,var(--color-muted)_50%,var(--color-card))]", "group-data-[state=selected]/row:bg-[color-mix(in_oklab,var(--color-muted)_100%,var(--color-card))]", isLastLeft && "border-r-2 border-border", isFirstRight && "border-l-2 border-border");
+}
+/**
+* The "scroll fade" cue — an inset shadow indicating there's scrollable
+* content sliding in underneath a pinned column — lives on the *scrolling*
+* side of the pinned boundary (the first/last center column next to it),
+* not on the pinned column itself: the fade represents content that's
+* about to disappear under something fixed, which is a property of the
+* content moving, not of the fixed thing it's moving under. Only rendered
+* once `canScroll` is true (the table actually overflows horizontally) —
+* a shadow implying "more content behind this edge" would be misleading
+* otherwise.
+*/
+function getScrollFadeClassName(column, table, canScroll) {
+	if (!canScroll || column.getIsPinned()) return "";
+	const visibleLeft = table.getLeftLeafColumns().filter((c) => c.getIsVisible());
+	const visibleRight = table.getRightLeafColumns().filter((c) => c.getIsVisible());
+	const visibleCenter = table.getCenterLeafColumns().filter((c) => c.getIsVisible());
+	const isFirstCenter = visibleLeft.length > 0 && visibleCenter[0]?.id === column.id;
+	const isLastCenter = visibleRight.length > 0 && visibleCenter.at(-1)?.id === column.id;
+	return cn(isFirstCenter && "shadow-[inset_8px_0_8px_-8px_rgba(0,0,0,0.15)]", isLastCenter && "shadow-[inset_-8px_0_8px_-8px_rgba(0,0,0,0.15)]");
+}
+/**
+* Cancel/Apply footer for a plain-`Popover`-based filter field (see
+* `ColumnFilterTrigger` and `InlineColumnFilter`'s own fallback branch) —
+* picks edit a local draft only, never the real filter; Apply commits that
+* draft, Cancel just closes and discards it, leaving the real filter
+* exactly as it was before the popover opened.
+*/
+function FilterPopoverFooter({ onCancel, onApply, applyDisabled }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "-mx-2.5 mt-2 flex w-[calc(100%+--spacing(5))] items-center justify-end gap-1 border-t border-border px-2.5 pt-2",
+		children: [/* @__PURE__ */ jsx(Button, {
+			type: "button",
+			variant: "ghost",
+			size: "xs",
+			onClick: onCancel,
+			children: "Cancel"
+		}), /* @__PURE__ */ jsx(Button, {
+			type: "button",
+			size: "xs",
+			disabled: applyDisabled,
+			onClick: onApply,
+			children: "Apply"
+		})]
+	});
+}
+/**
+* A multiselect filter (`filterVariant: "select"` or `"range"` — either
+* way, a checklist of several values at once) always needs a deliberate
+* Apply, in every surface, regardless of `filterApplyMode` — picking one
+* value out of a list of many isn't a complete thought the way a single
+* text edit or a `singleSelect` pick already is; the whole point of
+* checking several boxes is to review the set before it takes effect.
+* `filterApplyMode="deferred"` still separately opts every *other* filter
+* shape into the same Cancel/Apply step.
+*/
+/** True for every filter shape with more than one field/pick to review before it's a complete thought — `select`/`range`/`bucket` checklists. */
+function isMultiSelectFilterVariant(column) {
+	const variant = column.columnDef.meta?.filterVariant;
+	return variant === "select" || variant === "range" || variant === "bucket";
+}
+/** `singleSelect` commits on a single click/pick — there's never a moment an open draft exists to defer in the first place, so it can never be put into deferred mode, the same way a multiselect variant can never be taken *out* of it (see `isMultiSelectFilterVariant`). */
+function isNeverDeferredFilterVariant(column) {
+	return column.columnDef.meta?.filterVariant === "singleSelect";
+}
+/** Whether this column's filter should defer to an explicit Apply — `meta.filterApplyMode` overrides the table-wide `filterApplyMode` when set, but neither can turn a multiselect (`select`/`range`/`bucket`) *off* deferred, or a `singleSelect` *into* it. */
+function isColumnDeferred(column, tableDeferred) {
+	const columnMode = column.columnDef.meta?.filterApplyMode;
+	if (column.columnDef.meta?.filterRender) return columnMode === "deferred" || !columnMode && tableDeferred;
+	if (isNeverDeferredFilterVariant(column)) return false;
+	return (columnMode ? columnMode === "deferred" : tableDeferred) || isMultiSelectFilterVariant(column);
+}
+/**
+* Whether a filter draft actually differs from what's currently applied —
+* gates every deferred filter surface's Apply button so it's disabled
+* (not just harmless) when clicking it would be a no-op. Filter values
+* here are always plain JSON-serializable data (strings, string arrays,
+* small plain objects from a custom `filterRender`), so a `JSON.stringify`
+* comparison is a legitimate deep-equality check, not a shortcut.
+*/
+function filterDraftUnchanged(committed, pending) {
+	return JSON.stringify(committed ?? null) === JSON.stringify(pending ?? null);
+}
+/** Delays invoking `callback` until `delayMs` have passed with no new call — the returned function is stable across renders (safe in a dep array), always calling whatever `callback` currently is by the time the delay elapses, not whatever it was when the delay started. */
+function useDebouncedCallback(callback, delayMs) {
+	const callbackRef = React.useRef(callback);
+	React.useEffect(() => {
+		callbackRef.current = callback;
+	});
+	const timeoutRef = React.useRef(void 0);
+	React.useEffect(() => () => clearTimeout(timeoutRef.current), []);
+	return React.useCallback((...args) => {
+		clearTimeout(timeoutRef.current);
+		timeoutRef.current = setTimeout(() => callbackRef.current(...args), delayMs);
+	}, [delayMs]);
+}
+/** Resolves `column`'s own `meta.filterMergeWith` ids against `table`, dropping any that don't resolve to a real column — the list `ColumnFilterTrigger` actually renders a field for, `column` itself always first. */
+function mergedFilterColumns(column, table) {
+	return [column, ...(column.columnDef.meta?.filterMergeWith ?? []).map((id) => table.getColumn(id)).filter((c) => !!c)];
+}
+function ColumnFilterTrigger({ column, table, revealClassName, onOpenChange, tableDeferred, showFilterCounts, stickyFilterSelectAll }) {
+	const [open, setOpenState] = React.useState(false);
+	const [pendingValues, setPendingValues] = React.useState({});
+	const mergedColumns = mergedFilterColumns(column, table);
+	const deferred = mergedColumns.some((c) => isColumnDeferred(c, !!tableDeferred));
+	const setOpen = (value) => {
+		if (value) setPendingValues(Object.fromEntries(mergedColumns.map((c) => [c.id, c.getFilterValue()])));
+		setOpenState(value);
+		onOpenChange?.(value);
+	};
+	const label = columnLabel(column);
+	const filtered = mergedColumns.some((c) => c.getIsFiltered());
+	return /* @__PURE__ */ jsx("div", {
+		"data-fit-exclude": true,
+		draggable: false,
+		className: cn("shrink-0", filtered || open ? "opacity-100" : revealClassName),
+		children: /* @__PURE__ */ jsxs(Popover, {
+			open,
+			onOpenChange: setOpen,
+			children: [/* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+				asChild: true,
+				children: /* @__PURE__ */ jsx(PopoverTrigger, {
+					asChild: true,
+					children: /* @__PURE__ */ jsx(Button, {
+						type: "button",
+						variant: "ghost",
+						size: "xs",
+						iconOnly: true,
+						"aria-label": `Filter ${label}`,
+						className: cn("shrink-0", filtered && "text-primary"),
+						children: /* @__PURE__ */ jsx(ListFilterIcon, {})
+					})
+				})
+			}), /* @__PURE__ */ jsx(TooltipContent, { children: `Filter ${label}` })] }), /* @__PURE__ */ jsxs(PopoverContent, {
+				align: "start",
+				className: "max-w-(--radix-popover-content-available-width) min-w-56",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "flex flex-col gap-3",
+					children: mergedColumns.map((c, index) => /* @__PURE__ */ jsxs("div", {
+						className: cn(index > 0 && "border-t border-border pt-3"),
+						children: [mergedColumns.length > 1 && /* @__PURE__ */ jsx(Label, {
+							className: "mb-1.5 block text-xs text-muted-foreground",
+							children: columnLabel(c)
+						}), /* @__PURE__ */ jsx(ColumnFilterField, {
+							column: c,
+							value: deferred ? pendingValues[c.id] : c.getFilterValue(),
+							onValueChange: (value) => deferred ? setPendingValues((prev) => ({
+								...prev,
+								[c.id]: value
+							})) : c.setFilterValue(value),
+							showFilterCounts,
+							stickyFilterSelectAll
+						})]
+					}, c.id))
+				}), deferred && /* @__PURE__ */ jsx(FilterPopoverFooter, {
+					onCancel: () => setOpen(false),
+					onApply: () => {
+						mergedColumns.forEach((c) => c.setFilterValue(pendingValues[c.id]));
+						setOpen(false);
+					},
+					applyDisabled: mergedColumns.every((c) => filterDraftUnchanged(c.getFilterValue(), pendingValues[c.id]))
+				})]
+			})]
+		})
+	});
+}
+/** A pinned/always-visible filter, shown as a labeled button in the toolbar next to search. */
+function InlineColumnFilter({ column, size, tableDeferred, showFilterCounts, stickyFilterSelectAll }) {
+	const label = columnLabel(column);
+	const filterVariant = column.columnDef.meta?.filterVariant;
+	const deferred = isColumnDeferred(column, !!tableDeferred);
+	const [open, setOpenState] = React.useState(false);
+	const [pendingValue, setPendingValue] = React.useState(void 0);
+	const setOpen = (value) => {
+		if (value) setPendingValue(column.getFilterValue());
+		setOpenState(value);
+	};
+	if (column.columnDef.meta?.filterRender && !deferred) return column.columnDef.meta.filterRender({
+		column,
+		value: column.getFilterValue(),
+		onValueChange: (value) => column.setFilterValue(value)
+	});
+	if (column.columnDef.meta?.filterOptionsLoading) return /* @__PURE__ */ jsx(FilterOptionsSkeleton, {});
+	if (filterVariant === "select" || isBucketFilterVariant(column)) {
+		const options = resolveFilterOptions(column, showFilterCounts);
+		const committed = column.getFilterValue() ?? [];
+		const effectiveDeferred = deferred && open;
+		const selected = effectiveDeferred ? pendingValue ?? [] : committed;
+		return /* @__PURE__ */ jsxs(SelectMultiple, {
+			size,
+			value: selected,
+			onValueChange: (next) => {
+				const value = next.length ? next : void 0;
+				if (effectiveDeferred) setPendingValue(value);
+				else column.setFilterValue(value);
+			},
+			...deferred ? {
+				open,
+				onOpenChange: setOpen
+			} : {},
+			children: [/* @__PURE__ */ jsx(SelectMultipleTrigger, {
+				placeholder: label,
+				inlineLabel: label,
+				maxLabelChars: 12
+			}), /* @__PURE__ */ jsxs(SelectMultipleContent, { children: [/* @__PURE__ */ jsx(SelectMultipleOptionsContent, {
+				options,
+				value: selected,
+				onValueChangeAll: (next) => {
+					if (effectiveDeferred) setPendingValue(next);
+					else column.setFilterValue(next);
+				},
+				stickySelectAll: stickyFilterSelectAll
+			}), deferred && /* @__PURE__ */ jsxs(SelectMultipleFooter, { children: [/* @__PURE__ */ jsx(Button, {
+				type: "button",
+				variant: "ghost",
+				size: "xs",
+				onClick: () => setOpen(false),
+				children: "Cancel"
+			}), /* @__PURE__ */ jsx(Button, {
+				type: "button",
+				size: "xs",
+				disabled: filterDraftUnchanged(column.getFilterValue(), pendingValue),
+				onClick: () => {
+					column.setFilterValue(pendingValue);
+					setOpen(false);
+				},
+				children: "Apply"
+			})] })] })]
+		});
+	}
+	if (filterVariant === "singleSelect") {
+		const options = resolveFilterOptions(column, showFilterCounts);
+		const selected = column.getFilterValue() ?? "";
+		return /* @__PURE__ */ jsxs(SelectMultiple, {
+			size,
+			closeOnSelect: true,
+			value: selected ? [selected] : [],
+			onValueChange: (next) => column.setFilterValue(next.at(-1)),
+			children: [/* @__PURE__ */ jsx(SelectMultipleTrigger, {
+				placeholder: label,
+				inlineLabel: label
+			}), /* @__PURE__ */ jsx(SelectMultipleContent, { children: /* @__PURE__ */ jsx(SelectMultipleOptionsContent, {
+				options,
+				value: selected ? [selected] : [],
+				onValueChangeAll: () => {},
+				showSelectAll: false,
+				stickySelectAll: stickyFilterSelectAll
+			}) })]
+		});
+	}
+	return /* @__PURE__ */ jsxs(Popover, {
+		open: deferred ? open : void 0,
+		onOpenChange: deferred ? setOpen : void 0,
+		children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+			asChild: true,
+			children: /* @__PURE__ */ jsxs(Button, {
+				type: "button",
+				variant: "outline",
+				size,
+				className: cn(column.getIsFiltered() && "border-primary text-primary"),
+				children: [label, /* @__PURE__ */ jsx(ChevronDownIcon, {
+					"data-icon": "inline-end",
+					className: "opacity-50"
+				})]
+			})
+		}), /* @__PURE__ */ jsxs(PopoverContent, {
+			align: "start",
+			className: "max-w-(--radix-popover-content-available-width) min-w-56",
+			children: [/* @__PURE__ */ jsx(ColumnFilterField, {
+				column,
+				value: deferred ? pendingValue : column.getFilterValue(),
+				onValueChange: deferred ? setPendingValue : (value) => column.setFilterValue(value),
+				showFilterCounts,
+				stickyFilterSelectAll
+			}), deferred && /* @__PURE__ */ jsx(FilterPopoverFooter, {
+				onCancel: () => setOpen(false),
+				onApply: () => {
+					column.setFilterValue(pendingValue);
+					setOpen(false);
+				},
+				applyDisabled: filterDraftUnchanged(column.getFilterValue(), pendingValue)
+			})]
+		})]
+	});
+}
+function DataTable({ columns: userColumns, data, loading = false, error, errorDescription, emptyTitle = "No results", emptyDescription = "Try adjusting your search.", searchPlaceholder = "Search...", searchableColumnIds, searchMatch = "contains", filterApplyMode = "immediate", defaultSorting, defaultColumnFilters, defaultGlobalFilter, defaultPageIndex, defaultColumnVisibility, defaultColumnOrder, defaultColumnPinning, defaultColumnSizing, defaultExpanded, onExpandedChange, tableRef, onColumnLayoutChange, defaultPinnedFilterIds, allowFilterPinning = true, showFilterCounts = false, stickyFilterSelectAll = false, clearFiltersOnHide = false, enableRowSelection = false, selectionScope = "filtered", maxSelectedRows, defaultRowSelection, selectionBarPlacement, onRowSelectionChange, onStateChange, renderBulkActions, onRowClick, renderExpandedRow, getRowId, lockedColumnIds = [], enableColumnResizing = false, enableMultiSort = false, revealColumnControlsOnHover = true, striped = false, cellDividers = false, aiAction, actionButtons, aiRowPredicate, aiColumnIds, aiCellPredicate, pageSize = 10, pageSizeOptions = [
+	10,
+	20,
+	30
+], showPageSizeSelector = true, paginationStyle = "compact", onLoadMore, loadMoreOffset = 200, hasMore = false, showColumnToggle = true, loadingMore = false, maxHeight, stickyHeader = true, caption, captionHidden = true, size = "default", className, "aria-label": ariaLabel }) {
+	React.useEffect(() => {
+		if (process.env.NODE_ENV === "production") return;
+		if (actionButtons && actionButtons.length > 3) console.warn(`DataTable: \`actionButtons\` has ${actionButtons.length} entries, but only the first 3 render in the toolbar — the rest are silently dropped. Move the overflow into a dropdown of your own, or trim the list.`);
+		if (typeof error !== "boolean" && error != null) console.warn("DataTable: passing a string/node to `error` is deprecated — put that copy in `errorDescription` instead and pass `error={true}`. `error` will stop accepting anything but a boolean in a future version.");
+		if (!ariaLabel && !caption) console.warn("DataTable: no `aria-label` or `caption` provided — the table has no accessible name, so assistive tech has nothing to announce it by. Pass one describing what the table shows.");
+		if (userColumns.some((col) => col.meta?.filterVariant === "range")) console.warn("DataTable: `filterVariant: \"range\"` is deprecated — use `\"bucket\"` instead (same behavior, clearer name). `\"range\"` will stop being accepted in a future version.");
+		if (userColumns.some((col) => col.meta?.rangeBucketSize != null)) console.warn("DataTable: `meta.rangeBucketSize` is deprecated — use `meta.bucketSize` instead (same option, renamed to match `filterVariant: \"bucket\"`).");
+	}, [
+		actionButtons,
+		error,
+		ariaLabel,
+		caption
+	]);
+	const [sorting, setSorting] = React.useState(defaultSorting ?? []);
+	const [columnVisibility, setColumnVisibility] = React.useState(defaultColumnVisibility ?? {});
+	const [columnOrder, setColumnOrder] = React.useState(defaultColumnOrder ?? []);
+	const [columnPinning, setColumnPinning] = React.useState(() => defaultColumnPinning ?? derivePinningFromMeta(userColumns));
+	const [columnSizing, setColumnSizing] = React.useState(defaultColumnSizing ?? {});
+	const tableContainerRef = React.useRef(null);
+	const bulkActionsBarRef = React.useRef(null);
+	const [bulkActionsBarHeight, setBulkActionsBarHeight] = React.useState(0);
+	const mainColumnRef = React.useRef(null);
+	const footerRef = React.useRef(null);
+	const [columnSearchQuery, setColumnSearchQuery] = React.useState("");
+	const [filtersPaneOpen, setFiltersPaneOpen] = React.useState(false);
+	const [columnsMenuOpen, setColumnsMenuOpen] = React.useState(false);
+	const columnsMenuSnapshotRef = React.useRef(null);
+	const columnsMenuAppliedRef = React.useRef(false);
+	const [paginationState, setPaginationState] = React.useState({
+		pageSize,
+		pageIndex: defaultPageIndex ?? 0
+	});
+	const [pageRestorePending, setPageRestorePending] = React.useState(Boolean(defaultPageIndex) && data.length === 0);
+	React.useEffect(() => {
+		if (pageRestorePending && data.length > 0) setPageRestorePending(false);
+	}, [pageRestorePending, data.length]);
+	const [rowSelection, setRowSelection] = React.useState(defaultRowSelection ?? {});
+	const atSelectionCap = maxSelectedRows != null && Object.keys(rowSelection).length >= maxSelectedRows;
+	const effectiveEnableRowSelection = React.useCallback((row) => {
+		if (!(typeof enableRowSelection === "function" ? enableRowSelection(row) : enableRowSelection)) return false;
+		return !atSelectionCap || row.getIsSelected();
+	}, [enableRowSelection, atSelectionCap]);
+	const [columnFilters, setColumnFilters] = React.useState(defaultColumnFilters ?? []);
+	const filtersPaneRef = React.useRef(null);
+	const filtersPaneId = React.useId();
+	const filtersPaneHeadingId = React.useId();
+	const filtersPaneTriggerRef = React.useRef(null);
+	const filtersPaneCloseButtonRef = React.useRef(null);
+	const filtersPaneWasOpenRef = React.useRef(false);
+	React.useEffect(() => {
+		if (filtersPaneOpen && !filtersPaneWasOpenRef.current) filtersPaneCloseButtonRef.current?.focus();
+		else if (!filtersPaneOpen && filtersPaneWasOpenRef.current) filtersPaneTriggerRef.current?.focus();
+		filtersPaneWasOpenRef.current = filtersPaneOpen;
+	}, [filtersPaneOpen]);
+	const [filtersPaneEdgeAdjust, setFiltersPaneEdgeAdjust] = React.useState(null);
+	const [expanded, setExpanded] = React.useState(defaultExpanded ?? {});
+	React.useEffect(() => {
+		onExpandedChange?.(expanded);
+	}, [expanded]);
+	const [globalFilter, setGlobalFilter] = React.useState(defaultGlobalFilter ?? "");
+	const [searchInput, setSearchInput] = React.useState(defaultGlobalFilter ?? "");
+	const debouncedSetGlobalFilter = useDebouncedCallback(setGlobalFilter, 200);
+	const [pinnedFilterIds, setPinnedFilterIds] = React.useState(() => {
+		if (defaultPinnedFilterIds) return defaultPinnedFilterIds;
+		const mergedAwayIds = new Set(userColumns.flatMap((col) => col.meta?.filterMergeWith ?? []));
+		return userColumns.filter((col) => col.enableColumnFilter !== false && !col.meta?.filterOnly && !mergedAwayIds.has(getColumnId(col) ?? "")).slice(0, 2).map(getColumnId).filter((id) => !!id);
+	});
+	function toggleFilterPin(columnId) {
+		setPinnedFilterIds((prev) => prev.includes(columnId) ? prev.filter((id) => id !== columnId) : [...prev, columnId]);
+	}
+	const searchableIds = React.useMemo(() => {
+		if (searchableColumnIds === "all") return userColumns.filter((col) => "accessorKey" in col || "accessorFn" in col).map(getColumnId).filter((id) => !!id);
+		return searchableColumnIds ?? userColumns.slice(0, 2).map(getColumnId).filter((id) => !!id);
+	}, [searchableColumnIds, userColumns]);
+	const columns = React.useMemo(() => {
+		const processedUserColumns = userColumns.map((col) => {
+			const id = getColumnId(col);
+			const isSearchable = id !== void 0 && searchableIds.includes(id);
+			const isLocked = id !== void 0 && lockedColumnIds.includes(id);
+			const isFilterOnly = !!col.meta?.filterOnly;
+			const next = {
+				...col,
+				enableGlobalFilter: col.enableGlobalFilter ?? isSearchable,
+				enableColumnFilter: col.enableColumnFilter ?? true,
+				enableHiding: isLocked || isFilterOnly ? false : col.enableHiding,
+				minSize: col.minSize ?? computeColumnMinSize(col, size),
+				maxSize: col.maxSize ?? (col.size && col.size > DEFAULT_MAX_COLUMN_SIZE ? void 0 : DEFAULT_MAX_COLUMN_SIZE),
+				filterFn: col.filterFn ?? (col.meta?.filterVariant === "select" ? selectFilterFn : col.meta?.filterVariant === "range" || col.meta?.filterVariant === "bucket" ? rangeFilterFn : col.meta?.filterVariant === "singleSelect" ? singleSelectFilterFn : "includesString")
+			};
+			if (!col.cell && isSearchable) next.cell = (info) => /* @__PURE__ */ jsx(HighlightMatch, {
+				text: String(info.getValue() ?? ""),
+				query: String(info.table.getState().globalFilter ?? ""),
+				startsWith: searchMatch === "startsWith"
+			});
+			return next;
+		});
+		const leadingColumns = [];
+		if (aiRowPredicate) leadingColumns.push({
+			id: AI_COLUMN_ID,
+			header: () => /* @__PURE__ */ jsx("span", {
+				className: "sr-only",
+				children: "AI"
+			}),
+			cell: ({ row }) => aiRowPredicate(row.original) ? /* @__PURE__ */ jsxs(AILabel, { children: [/* @__PURE__ */ jsx(AIMarkerTrigger, {
+				size,
+				ariaLabel: "AI-suggested row"
+			}), /* @__PURE__ */ jsxs(AILabelContent, { children: [/* @__PURE__ */ jsx(PopoverHeader, { children: /* @__PURE__ */ jsx(PopoverTitle, { children: "Why you're seeing this" }) }), /* @__PURE__ */ jsx(PopoverDescription, { children: "This row's values are generated or suggested by AI." })] })] }) : null,
+			enableSorting: false,
+			enableHiding: false,
+			enableGlobalFilter: false,
+			enableColumnFilter: false,
+			enablePinning: false,
+			enableResizing: false,
+			size: 56
+		});
+		if (renderExpandedRow) leadingColumns.push({
+			id: EXPAND_COLUMN_ID,
+			header: () => /* @__PURE__ */ jsx("span", {
+				className: "sr-only",
+				children: "Expand"
+			}),
+			cell: ({ row }) => row.getCanExpand() ? /* @__PURE__ */ jsx(Button, {
+				type: "button",
+				variant: "ghost",
+				size: "xs",
+				iconOnly: true,
+				"aria-label": row.getIsExpanded() ? "Collapse row" : "Expand row",
+				"aria-expanded": row.getIsExpanded(),
+				"aria-controls": `data-table-expanded-${row.id}`,
+				onClick: (event) => {
+					event.stopPropagation();
+					row.toggleExpanded();
+				},
+				children: /* @__PURE__ */ jsx(ChevronRightIcon, { className: cn("transition-transform", row.getIsExpanded() && "rotate-90") })
+			}) : null,
+			enableSorting: false,
+			enableHiding: false,
+			enableGlobalFilter: false,
+			enableColumnFilter: false,
+			enablePinning: false,
+			enableResizing: false,
+			size: 32
+		});
+		if (enableRowSelection) leadingColumns.push({
+			id: SELECTION_COLUMN_ID,
+			header: ({ table }) => {
+				const state = table.getState().rowSelection;
+				const pageRows = table.getRowModel().rows.filter((row) => typeof enableRowSelection === "function" ? enableRowSelection(row) : !!enableRowSelection);
+				const selectedCount = pageRows.filter((row) => state[row.id]).length;
+				const allSelected = pageRows.length > 0 && selectedCount === pageRows.length;
+				const capReached = maxSelectedRows != null && Object.keys(state).length >= maxSelectedRows;
+				return /* @__PURE__ */ jsx(Checkbox, {
+					className: SELECTION_CHECKBOX_CLASS,
+					"aria-label": onLoadMore ? "Select all rows" : "Select all rows on this page",
+					checked: allSelected ? true : selectedCount > 0 ? "indeterminate" : false,
+					disabled: capReached && !allSelected && selectedCount === 0,
+					title: capReached && !allSelected && selectedCount === 0 ? `Up to ${maxSelectedRows} rows can be selected` : void 0,
+					onCheckedChange: (value) => {
+						const next = { ...state };
+						if (!value || capReached && !allSelected) pageRows.forEach((row) => delete next[row.id]);
+						else {
+							let remaining = maxSelectedRows != null ? Math.max(0, maxSelectedRows - Object.keys(next).length) : Infinity;
+							for (const row of pageRows) {
+								if (next[row.id]) continue;
+								if (remaining <= 0) break;
+								next[row.id] = true;
+								remaining -= 1;
+							}
+						}
+						table.setRowSelection(next);
+					}
+				});
+			},
+			cell: ({ row }) => /* @__PURE__ */ jsx(Checkbox, {
+				className: SELECTION_CHECKBOX_CLASS,
+				"aria-label": "Select row",
+				checked: row.getIsSelected(),
+				disabled: !row.getCanSelect(),
+				title: !row.getCanSelect() && atSelectionCap && !row.getIsSelected() ? `Up to ${maxSelectedRows} rows can be selected` : void 0,
+				onCheckedChange: (value) => row.toggleSelected(!!value),
+				onClick: (event) => event.stopPropagation()
+			}),
+			enableSorting: false,
+			enableHiding: false,
+			enableGlobalFilter: false,
+			enableColumnFilter: false,
+			enablePinning: false,
+			enableResizing: false,
+			size: 40
+		});
+		return [...leadingColumns, ...processedUserColumns];
+	}, [
+		userColumns,
+		enableRowSelection,
+		atSelectionCap,
+		maxSelectedRows,
+		searchableIds,
+		searchMatch,
+		renderExpandedRow,
+		aiRowPredicate,
+		lockedColumnIds,
+		size,
+		onLoadMore
+	]);
+	const effectiveColumnVisibility = React.useMemo(() => {
+		const forcedHidden = userColumns.reduce((acc, col) => {
+			const id = getColumnId(col);
+			if (id && col.meta?.filterOnly) acc[id] = false;
+			return acc;
+		}, {});
+		return {
+			...columnVisibility,
+			...forcedHidden
+		};
+	}, [columnVisibility, userColumns]);
+	const effectiveColumnPinning = React.useMemo(() => {
+		const leadingIds = [
+			aiRowPredicate && AI_COLUMN_ID,
+			renderExpandedRow && EXPAND_COLUMN_ID,
+			enableRowSelection && SELECTION_COLUMN_ID
+		].filter((id) => !!id);
+		const left = columnPinning.left ?? [];
+		if (leadingIds.length === 0 || left.length === 0) return columnPinning;
+		return {
+			...columnPinning,
+			left: [...leadingIds, ...left.filter((id) => !leadingIds.includes(id))]
+		};
+	}, [
+		columnPinning,
+		aiRowPredicate,
+		renderExpandedRow,
+		enableRowSelection
+	]);
+	const needsFacetedFiltering = userColumns.some((col) => col.meta?.filterVariant === "select" || col.meta?.filterVariant === "singleSelect" || col.meta?.filterVariant === "range" || col.meta?.filterVariant === "bucket" || col.meta?.filterRender);
+	const needsFacetedMinMax = userColumns.some((col) => col.meta?.filterRender);
+	const table = useReactTable({
+		data,
+		columns,
+		getRowId,
+		state: {
+			sorting,
+			columnVisibility: effectiveColumnVisibility,
+			columnOrder,
+			columnPinning: effectiveColumnPinning,
+			columnSizing,
+			rowSelection,
+			columnFilters,
+			expanded,
+			globalFilter,
+			pagination: paginationState
+		},
+		onSortingChange: setSorting,
+		onColumnVisibilityChange: (updater) => {
+			setColumnVisibility((old) => {
+				const next = typeof updater === "function" ? updater(old) : updater;
+				if (clearFiltersOnHide) {
+					const newlyHidden = Object.keys(next).filter((id) => next[id] === false && old[id] !== false);
+					if (newlyHidden.length > 0) setColumnFilters((filters) => filters.filter((filter) => !newlyHidden.includes(filter.id)));
+				}
+				return next;
+			});
+		},
+		onColumnOrderChange: setColumnOrder,
+		onColumnPinningChange: setColumnPinning,
+		onColumnSizingChange: setColumnSizing,
+		onRowSelectionChange: setRowSelection,
+		onColumnFiltersChange: setColumnFilters,
+		onExpandedChange: setExpanded,
+		onGlobalFilterChange: setGlobalFilter,
+		enableRowSelection: effectiveEnableRowSelection,
+		getRowCanExpand: renderExpandedRow ? () => true : void 0,
+		getCoreRowModel: getCoreRowModel(),
+		getSortedRowModel: getSortedRowModel(),
+		globalFilterFn: searchMatch === "startsWith" ? startsWithWordFilterFn : "auto",
+		getFilteredRowModel: getFilteredRowModel(),
+		getPaginationRowModel: onLoadMore ? void 0 : getPaginationRowModel(),
+		getFacetedRowModel: needsFacetedFiltering || needsFacetedMinMax ? getFacetedRowModel() : void 0,
+		getFacetedUniqueValues: needsFacetedFiltering ? getFacetedUniqueValues() : void 0,
+		getFacetedMinMaxValues: needsFacetedMinMax ? getFacetedMinMaxValues() : void 0,
+		getExpandedRowModel: getExpandedRowModel(),
+		initialState: { pagination: {
+			pageSize,
+			pageIndex: 0
+		} },
+		onPaginationChange: setPaginationState,
+		autoResetPageIndex: pageRestorePending ? false : void 0,
+		enableColumnResizing,
+		columnResizeMode: "onChange",
+		enableMultiSort,
+		meta: { getColumnCellElements: (columnId) => {
+			const root = tableContainerRef.current;
+			if (!root) return [];
+			return Array.from(root.querySelectorAll(`[data-column-id="${columnId}"]`));
+		} }
+	});
+	React.useEffect(() => {
+		if (!tableRef) return;
+		tableRef(table);
+		return () => tableRef(null);
+	}, [tableRef, table]);
+	const clampPageCount = onLoadMore ? 0 : table.getPageCount();
+	const clampPageIndex = paginationState.pageIndex;
+	React.useEffect(() => {
+		if (clampPageCount > 0 && clampPageIndex >= clampPageCount) setPaginationState((prev) => ({
+			...prev,
+			pageIndex: clampPageCount - 1
+		}));
+	}, [clampPageCount, clampPageIndex]);
+	const previousPageSizeRef = React.useRef(pageSize);
+	React.useEffect(() => {
+		if (previousPageSizeRef.current !== pageSize) {
+			previousPageSizeRef.current = pageSize;
+			table.setPageSize(pageSize);
+		}
+	}, [pageSize, table]);
+	const isResizingColumn = table.getState().columnSizingInfo.isResizingColumn;
+	const previousIsResizingColumnRef = React.useRef(isResizingColumn);
+	React.useEffect(() => {
+		if (previousIsResizingColumnRef.current && !isResizingColumn) onColumnLayoutChange?.({
+			visibility: columnVisibility,
+			order: columnOrder,
+			pinning: columnPinning,
+			sizing: columnSizing
+		});
+		previousIsResizingColumnRef.current = isResizingColumn;
+	}, [
+		isResizingColumn,
+		columnVisibility,
+		columnOrder,
+		columnPinning,
+		columnSizing,
+		onColumnLayoutChange
+	]);
+	const pagination = table.getState().pagination;
+	React.useEffect(() => {
+		onStateChange?.({
+			sorting,
+			columnFilters,
+			globalFilter,
+			pagination,
+			expanded,
+			pinnedFilterIds
+		});
+	}, [
+		sorting,
+		columnFilters,
+		globalFilter,
+		pagination,
+		expanded,
+		pinnedFilterIds
+	]);
+	const lockedIds = React.useMemo(() => /* @__PURE__ */ new Set([...INJECTED_COLUMN_IDS, ...lockedColumnIds]), [lockedColumnIds]);
+	const [draggedColumnId, setDraggedColumnId] = React.useState(null);
+	const [dragOverColumnId, setDragOverColumnId] = React.useState(null);
+	const orderedRealColumns = React.useMemo(() => {
+		const leaf = table.getAllLeafColumns().filter((column) => !INJECTED_COLUMN_IDS.has(column.id));
+		if (!columnOrder.length) return leaf;
+		const rank = new Map(columnOrder.map((id, index) => [id, index]));
+		return [...leaf].sort((a, b) => (rank.get(a.id) ?? 0) - (rank.get(b.id) ?? 0));
+	}, [table, columnOrder]);
+	const manageableColumns = React.useMemo(() => orderedRealColumns.filter((column) => !column.columnDef.meta?.filterOnly), [orderedRealColumns]);
+	function columnSection(columnId) {
+		if (columnPinning.left?.includes(columnId)) return "left";
+		if (columnPinning.right?.includes(columnId)) return "right";
+		return "center";
+	}
+	const manageableColumnsBySection = React.useMemo(() => {
+		const byId = new Map(manageableColumns.map((column) => [column.id, column]));
+		const toColumns = (ids) => (ids ?? []).map((id) => byId.get(id)).filter((column) => column !== void 0);
+		const left = toColumns(columnPinning.left);
+		const right = toColumns(columnPinning.right);
+		const pinnedIds = /* @__PURE__ */ new Set([...columnPinning.left ?? [], ...columnPinning.right ?? []]);
+		return {
+			left,
+			center: manageableColumns.filter((column) => !pinnedIds.has(column.id)),
+			right
+		};
+	}, [manageableColumns, columnPinning]);
+	function computeReorderedIds(draggedId, targetId) {
+		if (!draggedId || !targetId || draggedId === targetId) return null;
+		if (lockedIds.has(draggedId) || lockedIds.has(targetId)) return null;
+		const section = columnSection(draggedId);
+		if (section !== columnSection(targetId)) return null;
+		const order = manageableColumnsBySection[section].map((column) => column.id);
+		const fromIndex = order.indexOf(draggedId);
+		const toIndex = order.indexOf(targetId);
+		if (fromIndex === -1 || toIndex === -1) return null;
+		const next = [...order];
+		next.splice(fromIndex, 1);
+		next.splice(toIndex, 0, draggedId);
+		return {
+			section,
+			order: next
+		};
+	}
+	function dropInsertSide(draggedId, targetId) {
+		if (!draggedId || !targetId || draggedId === targetId) return null;
+		if (lockedIds.has(draggedId) || lockedIds.has(targetId)) return null;
+		const section = columnSection(draggedId);
+		if (section !== columnSection(targetId)) return null;
+		const order = manageableColumnsBySection[section].map((column) => column.id);
+		const fromIndex = order.indexOf(draggedId);
+		const toIndex = order.indexOf(targetId);
+		if (fromIndex === -1 || toIndex === -1) return null;
+		return fromIndex < toIndex ? "after" : "before";
+	}
+	const previewReorder = React.useMemo(() => {
+		if (!draggedColumnId || !dragOverColumnId) return null;
+		return computeReorderedIds(draggedColumnId, dragOverColumnId);
+	}, [
+		draggedColumnId,
+		dragOverColumnId,
+		manageableColumnsBySection,
+		lockedIds
+	]);
+	function displayedSection(section) {
+		const base = manageableColumnsBySection[section];
+		if (!previewReorder || previewReorder.section !== section) return base;
+		const byId = new Map(base.map((column) => [column.id, column]));
+		return previewReorder.order.map((id) => byId.get(id)).filter((column) => column !== void 0);
+	}
+	const displayedLeft = displayedSection("left");
+	const displayedCenter = displayedSection("center");
+	const displayedRight = displayedSection("right");
+	const displayedColumns = [
+		...displayedLeft,
+		...displayedCenter,
+		...displayedRight
+	];
+	const derivedDefaultColumnPinning = React.useMemo(() => derivePinningFromMeta(userColumns), [userColumns]);
+	const effectiveDefaultColumnPinning = defaultColumnPinning ?? derivedDefaultColumnPinning;
+	const effectiveDefaultColumnVisibility = defaultColumnVisibility ?? {};
+	const effectiveDefaultColumnOrder = defaultColumnOrder ?? [];
+	const effectiveDefaultColumnSizing = defaultColumnSizing ?? {};
+	const hasColumnCustomization = !idListsEqual(columnOrder, effectiveDefaultColumnOrder) || !visibilityEqual(columnVisibility, effectiveDefaultColumnVisibility) || !idListsEqual(columnPinning.left, effectiveDefaultColumnPinning.left) || !idListsEqual(columnPinning.right, effectiveDefaultColumnPinning.right) || !sizingEqual(columnSizing, effectiveDefaultColumnSizing);
+	const columnsMenuSnapshot = columnsMenuSnapshotRef.current;
+	const hasPendingColumnsMenuChanges = columnsMenuSnapshot ? !visibilityEqual(columnVisibility, columnsMenuSnapshot.visibility) || !idListsEqual(columnOrder, columnsMenuSnapshot.order) || !idListsEqual(columnPinning.left, columnsMenuSnapshot.pinning.left) || !idListsEqual(columnPinning.right, columnsMenuSnapshot.pinning.right) : false;
+	function commitColumnOrder(centerOrder) {
+		const leadingIds = table.getAllLeafColumns().filter((column) => INJECTED_COLUMN_IDS.has(column.id)).map((column) => column.id);
+		const pinnedIds = [...columnPinning.left ?? [], ...columnPinning.right ?? []];
+		setColumnOrder([
+			...leadingIds,
+			...centerOrder,
+			...pinnedIds
+		]);
+	}
+	function commitPinOrder(section, order) {
+		setColumnPinning((old) => ({
+			...old,
+			[section]: order
+		}));
+	}
+	function commitSectionOrder(section, order) {
+		if (section === "center") commitColumnOrder(order);
+		else commitPinOrder(section, order);
+	}
+	function findMoveTargetIndex(columnId, direction) {
+		const section = columnSection(columnId);
+		const order = manageableColumnsBySection[section].map((column) => column.id);
+		const index = order.indexOf(columnId);
+		if (index === -1) return null;
+		let targetIndex = direction === "up" ? index - 1 : index + 1;
+		while (targetIndex >= 0 && targetIndex < order.length && lockedIds.has(order[targetIndex])) targetIndex += direction === "up" ? -1 : 1;
+		return targetIndex >= 0 && targetIndex < order.length ? targetIndex : null;
+	}
+	function canMoveColumn(columnId, direction) {
+		return findMoveTargetIndex(columnId, direction) !== null;
+	}
+	function moveColumn(columnId, direction) {
+		const section = columnSection(columnId);
+		const order = manageableColumnsBySection[section].map((column) => column.id);
+		const index = order.indexOf(columnId);
+		const targetIndex = findMoveTargetIndex(columnId, direction);
+		if (index === -1 || targetIndex === null) return;
+		const next = [...order];
+		next.splice(index, 1);
+		next.splice(targetIndex, 0, columnId);
+		commitSectionOrder(section, next);
+		const newPosition = (section === "left" ? [] : section === "center" ? manageableColumnsBySection.left : [...manageableColumnsBySection.left, ...manageableColumnsBySection.center]).length + targetIndex + 1;
+		const column = manageableColumnsBySection[section].find((c) => c.id === columnId);
+		if (column) setLiveAnnouncement(`${columnLabel(column)} moved ${direction === "up" ? "left" : "right"}, now column ${newPosition} of ${manageableColumns.length}`);
+	}
+	function resetColumns() {
+		setColumnOrder(effectiveDefaultColumnOrder);
+		setColumnVisibility(effectiveDefaultColumnVisibility);
+		setColumnPinning(effectiveDefaultColumnPinning);
+		setColumnSizing(effectiveDefaultColumnSizing);
+		onColumnLayoutChange?.({
+			visibility: effectiveDefaultColumnVisibility,
+			order: effectiveDefaultColumnOrder,
+			pinning: effectiveDefaultColumnPinning,
+			sizing: effectiveDefaultColumnSizing
+		});
+	}
+	function handleColumnsMenuOpenChange(open) {
+		if (open) {
+			columnsMenuSnapshotRef.current = {
+				visibility: columnVisibility,
+				order: columnOrder,
+				pinning: columnPinning
+			};
+			columnsMenuAppliedRef.current = false;
+		} else {
+			if (!columnsMenuAppliedRef.current && columnsMenuSnapshotRef.current) {
+				setColumnVisibility(columnsMenuSnapshotRef.current.visibility);
+				setColumnOrder(columnsMenuSnapshotRef.current.order);
+				setColumnPinning(columnsMenuSnapshotRef.current.pinning);
+			}
+			setColumnSearchQuery("");
+		}
+		setColumnsMenuOpen(open);
+	}
+	React.useLayoutEffect(() => {
+		if (!filtersPaneOpen) {
+			setFiltersPaneEdgeAdjust(null);
+			return;
+		}
+		const pane = filtersPaneRef.current;
+		const surface = pane?.closest("[data-slot=\"card\"]");
+		if (!pane || !surface) {
+			setFiltersPaneEdgeAdjust(null);
+			return;
+		}
+		const paneRect = pane.getBoundingClientRect();
+		const surfaceRect = surface.getBoundingClientRect();
+		const topDelta = Math.max(0, paneRect.top - surfaceRect.top);
+		const bottomDelta = Math.max(0, surfaceRect.bottom - paneRect.bottom);
+		if (topDelta === 0 && bottomDelta === 0) {
+			setFiltersPaneEdgeAdjust(null);
+			return;
+		}
+		setFiltersPaneEdgeAdjust({
+			marginTop: -topDelta,
+			height: paneRect.height + topDelta + bottomDelta
+		});
+	}, [filtersPaneOpen]);
+	const columnRowRefs = React.useRef(/* @__PURE__ */ new Map());
+	const columnRowRefCallbacks = React.useRef(/* @__PURE__ */ new Map());
+	const columnRowRectsRef = React.useRef(/* @__PURE__ */ new Map());
+	const pendingFrameRef = React.useRef(null);
+	const dragOverDebounceRef = React.useRef(null);
+	const displayedOrderKey = displayedColumns.map((column) => column.id).join(",");
+	function getColumnRowRef(id) {
+		let callback = columnRowRefCallbacks.current.get(id);
+		if (!callback) {
+			callback = (element) => {
+				if (element) columnRowRefs.current.set(id, element);
+				else columnRowRefs.current.delete(id);
+			};
+			columnRowRefCallbacks.current.set(id, callback);
+		}
+		return callback;
+	}
+	React.useLayoutEffect(() => {
+		const previousRects = columnRowRectsRef.current;
+		if (pendingFrameRef.current !== null) {
+			cancelAnimationFrame(pendingFrameRef.current);
+			pendingFrameRef.current = null;
+		}
+		columnRowRefs.current.forEach((element) => {
+			element.style.transition = "none";
+			element.style.transform = "";
+		});
+		const nextRects = /* @__PURE__ */ new Map();
+		columnRowRefs.current.forEach((element, id) => {
+			nextRects.set(id, element.getBoundingClientRect());
+		});
+		const toAnimate = [];
+		columnRowRefs.current.forEach((element, id) => {
+			const previous = previousRects.get(id);
+			const next = nextRects.get(id);
+			if (!previous || !next) return;
+			const deltaY = previous.top - next.top;
+			if (Math.abs(deltaY) < .5) return;
+			element.style.transform = `translateY(${deltaY}px)`;
+			toAnimate.push(element);
+		});
+		if (toAnimate.length > 0) {
+			toAnimate.forEach((element) => void element.getBoundingClientRect());
+			pendingFrameRef.current = requestAnimationFrame(() => {
+				toAnimate.forEach((element) => {
+					element.style.transition = "transform 180ms ease";
+					element.style.transform = "";
+				});
+				pendingFrameRef.current = null;
+			});
+		}
+		columnRowRectsRef.current = nextRects;
+	}, [displayedOrderKey]);
+	const { filterableColumns, showAllFiltersInline, inlineFilterColumns, paneFilterCount } = React.useMemo(() => {
+		const mergedAwayFilterIds = new Set(userColumns.flatMap((col) => {
+			const hostId = getColumnId(col);
+			return !hostId || effectiveColumnVisibility[hostId] !== false ? col.meta?.filterMergeWith ?? [] : [];
+		}));
+		const withFilterOrderPositions = orderedRealColumns.filter((column) => column.getCanFilter() && !mergedAwayFilterIds.has(column.id)).map((column, index) => ({
+			column,
+			order: column.columnDef.meta?.filterOrder ?? index
+		}));
+		withFilterOrderPositions.sort((a, b) => a.order - b.order);
+		const filterableColumns = withFilterOrderPositions.map((entry) => entry.column);
+		const hasFilterOnlyColumn = filterableColumns.some((column) => !!column.columnDef.meta?.filterOnly);
+		const showAllFiltersInline = !hasFilterOnlyColumn && filterableColumns.length <= 3;
+		const inlineFilterColumns = showAllFiltersInline ? filterableColumns : filterableColumns.filter((column) => !column.columnDef.meta?.filterOnly && pinnedFilterIds.includes(column.id));
+		return {
+			filterableColumns,
+			hasFilterOnlyColumn,
+			showAllFiltersInline,
+			inlineFilterColumns,
+			paneFilterCount: showAllFiltersInline ? 0 : filterableColumns.length - inlineFilterColumns.length
+		};
+	}, [
+		orderedRealColumns,
+		userColumns,
+		pinnedFilterIds,
+		effectiveColumnVisibility
+	]);
+	const allSelectedRows = table.getSelectedRowModel().rows;
+	const filteredSelectedRows = table.getFilteredSelectedRowModel().rows;
+	const selectedRows = selectionScope === "all" ? allSelectedRows : filteredSelectedRows;
+	const hiddenByFilterCount = selectionScope === "all" ? 0 : allSelectedRows.length - filteredSelectedRows.length;
+	const hasSelection = selectedRows.length > 0;
+	const isRowSelectableIgnoringCap = (row) => typeof enableRowSelection === "function" ? enableRowSelection(row) : !!enableRowSelection;
+	const selectableFilteredRows = table.getFilteredRowModel().rows.filter(isRowSelectableIgnoringCap);
+	const isAllFilteredSelected = selectableFilteredRows.length > 0 && selectableFilteredRows.every((row) => !!rowSelection[row.id]);
+	const selectAllFiltered = () => {
+		const next = { ...rowSelection };
+		let remaining = maxSelectedRows != null ? Math.max(0, maxSelectedRows - Object.keys(next).length) : Infinity;
+		for (const row of selectableFilteredRows) {
+			if (next[row.id]) continue;
+			if (remaining <= 0) break;
+			next[row.id] = true;
+			remaining -= 1;
+		}
+		setRowSelection(next);
+	};
+	const effectiveSelectionBarPlacement = onLoadMore ? "floating" : selectionBarPlacement ?? "toolbar";
+	const bulkActionsBarMounted = hasSelection && effectiveSelectionBarPlacement === "floating";
+	React.useLayoutEffect(() => {
+		const el = bulkActionsBarRef.current;
+		if (!el) {
+			setBulkActionsBarHeight(0);
+			return;
+		}
+		const observer = new ResizeObserver(([entry]) => setBulkActionsBarHeight(entry.contentRect.height));
+		observer.observe(el);
+		return () => observer.disconnect();
+	}, [bulkActionsBarMounted]);
+	const [canScrollHorizontally, setCanScrollHorizontally] = React.useState(false);
+	React.useLayoutEffect(() => {
+		const container = tableContainerRef.current;
+		const tableEl = container?.querySelector("table");
+		if (!container || !tableEl) return;
+		function measure() {
+			if (!container) return;
+			setCanScrollHorizontally(container.scrollWidth > container.clientWidth);
+		}
+		measure();
+		const observer = new ResizeObserver(measure);
+		observer.observe(tableEl);
+		observer.observe(container);
+		return () => observer.disconnect();
+	}, []);
+	const rowClickHintId = React.useId();
+	const selectedIdsKey = selectedRows.map((row) => row.id).join("\0");
+	React.useEffect(() => {
+		onRowSelectionChange?.(selectedRows.map((row) => row.original), {
+			allSelectedRows: allSelectedRows.map((row) => row.original),
+			hiddenByFilterCount
+		});
+	}, [
+		rowSelection,
+		columnFilters,
+		globalFilter,
+		selectionScope,
+		selectedIdsKey
+	]);
+	const rows = table.getRowModel().rows;
+	const visibleLeafColumns = table.getVisibleLeafColumns();
+	const resizableColumnIds = visibleLeafColumns.filter((column) => column.getCanResize()).map((column) => column.id);
+	const [activeResizeColumnId, setActiveResizeColumnId] = React.useState(null);
+	const resizeHandleRefs = React.useRef(/* @__PURE__ */ new Map());
+	const showFooter = !loading && !error && !onLoadMore;
+	const headerRowHeightPx = size === "xs" ? 32 : size === "sm" ? 36 : 40;
+	const headerGroupsForRender = table.getHeaderGroups();
+	const passthroughLeafIds = new Set(headerGroupsForRender[0]?.headers.filter((header) => header.subHeaders.length > 0 && !Array.isArray(header.column.columnDef.columns)).map((header) => header.column.id) ?? []);
+	const groupBoundaryColumnIds = React.useMemo(() => {
+		const starts = /* @__PURE__ */ new Set();
+		const ends = /* @__PURE__ */ new Set();
+		for (const header of headerGroupsForRender[0]?.headers ?? []) {
+			if (header.subHeaders.length === 0) continue;
+			if (passthroughLeafIds.has(header.column.id)) continue;
+			const leaves = header.getLeafHeaders().filter((leaf) => leaf.subHeaders.length === 0);
+			if (leaves.length === 0) continue;
+			starts.add(leaves[0].column.id);
+			ends.add(leaves[leaves.length - 1].column.id);
+		}
+		return {
+			starts,
+			ends
+		};
+	}, [headerGroupsForRender]);
+	const mergedCellRowSpans = React.useMemo(() => {
+		const spans = /* @__PURE__ */ new Map();
+		for (const column of visibleLeafColumns) {
+			if (!column.columnDef.meta?.mergeRepeatedValues) continue;
+			const columnSpans = /* @__PURE__ */ new Map();
+			let runStart = 0;
+			for (let i = 1; i <= rows.length; i++) {
+				if (i < rows.length && rows[i].getValue(column.id) === rows[runStart].getValue(column.id)) continue;
+				columnSpans.set(rows[runStart].id, i - runStart);
+				for (let covered = runStart + 1; covered < i; covered++) columnSpans.set(rows[covered].id, 0);
+				runStart = i;
+			}
+			spans.set(column.id, columnSpans);
+		}
+		return spans;
+	}, [visibleLeafColumns, rows]);
+	const [rowsAreaHeight, setRowsAreaHeight] = React.useState(null);
+	React.useLayoutEffect(() => {
+		const mainColumn = mainColumnRef.current;
+		const container = tableContainerRef.current;
+		if (!mainColumn || !container) return;
+		function measure() {
+			if (!mainColumn || !container) return;
+			const mainRect = mainColumn.getBoundingClientRect();
+			const containerRect = container.getBoundingClientRect();
+			const footerEl = footerRef.current;
+			const footerHeight = footerEl ? footerEl.getBoundingClientRect().height : 0;
+			const available = mainRect.bottom - containerRect.top - footerHeight;
+			setRowsAreaHeight(Math.max(available, 0));
+		}
+		measure();
+		const observer = new ResizeObserver(measure);
+		observer.observe(mainColumn);
+		if (footerRef.current) observer.observe(footerRef.current);
+		return () => observer.disconnect();
+	}, [showFooter]);
+	const pageIndex = table.getState().pagination.pageIndex;
+	const filteredRowCount = table.getFilteredRowModel().rows.length;
+	const currentPageSize = table.getState().pagination.pageSize;
+	const rangeStart = filteredRowCount === 0 ? 0 : pageIndex * currentPageSize + 1;
+	const rangeEnd = Math.min((pageIndex + 1) * currentPageSize, filteredRowCount);
+	const [liveAnnouncement, setLiveAnnouncement] = React.useState("");
+	React.useEffect(() => {
+		const timeout = setTimeout(() => {
+			setLiveAnnouncement(!hasSelection ? "" : isAllFilteredSelected ? `All ${filteredRowCount} rows selected` : `${selectedRows.length} of ${filteredRowCount} rows selected`);
+		}, 400);
+		return () => clearTimeout(timeout);
+	}, [
+		hasSelection,
+		isAllFilteredSelected,
+		selectedRows.length,
+		filteredRowCount
+	]);
+	React.useEffect(() => {
+		const timeout = setTimeout(() => {
+			setLiveAnnouncement(filteredRowCount === 0 ? "No results" : `Showing ${rangeStart}–${rangeEnd} of ${filteredRowCount} results`);
+		}, 500);
+		return () => clearTimeout(timeout);
+	}, [
+		columnFilters,
+		globalFilter,
+		filteredRowCount,
+		rangeStart,
+		rangeEnd
+	]);
+	const sortingMountedRef = React.useRef(false);
+	React.useEffect(() => {
+		if (!sortingMountedRef.current) {
+			sortingMountedRef.current = true;
+			return;
+		}
+		if (sorting.length === 0) {
+			setLiveAnnouncement("Sort cleared");
+			return;
+		}
+		const labels = sorting.map((sort) => `${columnLabel(table.getColumn(sort.id))}, ${sort.desc ? "descending" : "ascending"}`);
+		setLiveAnnouncement(`Sorted by ${labels.join(", then ")}`);
+	}, [sorting]);
+	const previousColumnPinningRef = React.useRef(columnPinning);
+	React.useEffect(() => {
+		const previous = previousColumnPinningRef.current;
+		previousColumnPinningRef.current = columnPinning;
+		const newlyPinned = (side) => (columnPinning[side] ?? []).find((id) => !(previous[side] ?? []).includes(id));
+		const newlyUnpinned = [...previous.left ?? [], ...previous.right ?? []].find((id) => !(columnPinning.left ?? []).includes(id) && !(columnPinning.right ?? []).includes(id));
+		const pinnedLeftId = newlyPinned("left");
+		const pinnedRightId = newlyPinned("right");
+		const columnId = pinnedLeftId ?? pinnedRightId ?? newlyUnpinned;
+		if (!columnId) return;
+		const column = table.getColumn(columnId);
+		if (!column) return;
+		setLiveAnnouncement(pinnedLeftId ? `${columnLabel(column)} pinned left` : pinnedRightId ? `${columnLabel(column)} pinned right` : `${columnLabel(column)} unpinned`);
+	}, [columnPinning]);
+	const loadMoreSentinelRef = React.useRef(null);
+	React.useEffect(() => {
+		if (!onLoadMore || !hasMore) return;
+		const sentinel = loadMoreSentinelRef.current;
+		if (!sentinel) return;
+		const observer = new IntersectionObserver((entries) => {
+			if (entries[0]?.isIntersecting) onLoadMore();
+		}, { rootMargin: `${loadMoreOffset}px` });
+		observer.observe(sentinel);
+		return () => observer.disconnect();
+	}, [
+		onLoadMore,
+		hasMore,
+		loadMoreOffset
+	]);
+	const controlSize = size === "default" ? "sm" : "xs";
+	const controlIconSize = size === "default" ? "sm" : "xs";
+	const hoverRevealClass = revealColumnControlsOnHover ? "opacity-0 transition-opacity group-hover/header-actions:opacity-100 group-focus-within/header-actions:opacity-100 [@media(hover:none)]:opacity-100" : "";
+	const hoverRevealRowClass = revealColumnControlsOnHover ? "opacity-0 transition-opacity group-hover/column-row:opacity-100 group-focus-within/column-row:opacity-100 [@media(hover:none)]:opacity-100" : "";
+	const hoverRevealFilterRowClass = revealColumnControlsOnHover ? "opacity-0 transition-opacity group-hover/filter-row:opacity-100 group-focus-within/filter-row:opacity-100 [@media(hover:none)]:opacity-100" : "";
+	const [openHeaderColumnId, setOpenHeaderColumnId] = React.useState(null);
+	function renderColumnMenuRow(column) {
+		const locked = lockedIds.has(column.id);
+		const canHide = column.getCanHide();
+		const label = columnLabel(column);
+		const isDragging = draggedColumnId === column.id;
+		const isDropTarget = dragOverColumnId === column.id && draggedColumnId !== null && !isDragging;
+		const dropSide = isDropTarget && draggedColumnId ? dropInsertSide(draggedColumnId, column.id) : null;
+		const pins = pinActions(column);
+		return /* @__PURE__ */ jsxs("div", {
+			ref: getColumnRowRef(column.id),
+			draggable: !locked,
+			onDragStart: () => {
+				if (locked) return;
+				setDraggedColumnId(column.id);
+			},
+			onDragEnd: () => {
+				if (dragOverDebounceRef.current) {
+					clearTimeout(dragOverDebounceRef.current);
+					dragOverDebounceRef.current = null;
+				}
+				setDraggedColumnId(null);
+				setDragOverColumnId(null);
+			},
+			onDragEnter: (event) => {
+				if (locked || !draggedColumnId) return;
+				event.preventDefault();
+			},
+			onDragOver: (event) => {
+				if (locked || !draggedColumnId) return;
+				event.preventDefault();
+				if (dragOverColumnId === column.id) return;
+				if (dragOverDebounceRef.current) clearTimeout(dragOverDebounceRef.current);
+				dragOverDebounceRef.current = setTimeout(() => {
+					setDragOverColumnId(column.id);
+					dragOverDebounceRef.current = null;
+				}, 80);
+			},
+			onDrop: (event) => {
+				event.preventDefault();
+				if (dragOverDebounceRef.current) {
+					clearTimeout(dragOverDebounceRef.current);
+					dragOverDebounceRef.current = null;
+				}
+				if (draggedColumnId) {
+					const finalReorder = computeReorderedIds(draggedColumnId, column.id);
+					if (finalReorder) commitSectionOrder(finalReorder.section, finalReorder.order);
+				}
+				setDraggedColumnId(null);
+				setDragOverColumnId(null);
+			},
+			className: cn("group/column-row relative flex items-center gap-1 rounded-md px-1.5 py-1 hover:bg-accent/50", !locked && "cursor-grab active:cursor-grabbing", isDragging && "opacity-40", isDropTarget && "bg-accent"),
+			children: [
+				dropSide && /* @__PURE__ */ jsx("div", {
+					"aria-hidden": "true",
+					className: cn("absolute inset-x-1.5 z-10 h-0.5 bg-primary", dropSide === "before" ? "top-0" : "bottom-0")
+				}),
+				/* @__PURE__ */ jsxs(Label, {
+					className: "flex flex-1 items-center gap-2 truncate font-normal",
+					children: [/* @__PURE__ */ jsx(Checkbox, {
+						checked: canHide ? column.getIsVisible() : true,
+						disabled: !canHide,
+						onCheckedChange: (value) => column.toggleVisibility(!!value)
+					}), /* @__PURE__ */ jsx("span", {
+						className: "truncate",
+						children: label
+					})]
+				}),
+				pins.length > 0 && /* @__PURE__ */ jsx("div", {
+					className: cn("flex shrink-0 items-center", hoverRevealRowClass),
+					children: pins.map((action) => /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+						asChild: true,
+						children: /* @__PURE__ */ jsx(Button, {
+							type: "button",
+							variant: "ghost",
+							size: "xs",
+							iconOnly: true,
+							"aria-label": action.label,
+							onClick: action.onClick,
+							children: action.icon ? /* @__PURE__ */ jsx(action.icon, { className: "size-3.5" }) : null
+						})
+					}), /* @__PURE__ */ jsx(TooltipContent, { children: action.label })] }, action.label))
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: cn("flex shrink-0 items-center", hoverRevealRowClass),
+					children: [/* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+						asChild: true,
+						children: /* @__PURE__ */ jsx(Button, {
+							type: "button",
+							variant: "ghost",
+							size: "xs",
+							iconOnly: true,
+							disabled: locked || !canMoveColumn(column.id, "up"),
+							"aria-label": `Move ${label} left`,
+							onClick: () => moveColumn(column.id, "up"),
+							children: /* @__PURE__ */ jsx(ArrowLeftIcon, { className: "size-3.5" })
+						})
+					}), /* @__PURE__ */ jsx(TooltipContent, { children: "Move left" })] }), /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+						asChild: true,
+						children: /* @__PURE__ */ jsx(Button, {
+							type: "button",
+							variant: "ghost",
+							size: "xs",
+							iconOnly: true,
+							disabled: locked || !canMoveColumn(column.id, "down"),
+							"aria-label": `Move ${label} right`,
+							onClick: () => moveColumn(column.id, "down"),
+							children: /* @__PURE__ */ jsx(ArrowRightIcon, { className: "size-3.5" })
+						})
+					}), /* @__PURE__ */ jsx(TooltipContent, { children: "Move right" })] })]
+				})
+			]
+		}, column.id);
+	}
+	function commitPageJump(value) {
+		if (value.trim() === "") return;
+		const page = Number(value);
+		if (!Number.isFinite(page)) return;
+		const clamped = Math.min(table.getPageCount(), Math.max(1, Math.round(page)));
+		table.setPageIndex(clamped - 1);
+	}
+	const renderPageSelect = (triggerClassName) => table.getPageCount() > PAGE_SELECT_THRESHOLD ? /* @__PURE__ */ jsx(Input, {
+		type: "number",
+		min: 1,
+		max: table.getPageCount(),
+		defaultValue: pageIndex + 1,
+		"aria-label": "Current page",
+		className: cn("w-14 text-center", triggerClassName),
+		onKeyDown: (event) => {
+			if (event.key !== "Enter") return;
+			commitPageJump(event.currentTarget.value);
+		},
+		onBlur: (event) => commitPageJump(event.currentTarget.value)
+	}, pageIndex) : /* @__PURE__ */ jsxs(Select, {
+		value: String(pageIndex + 1),
+		onValueChange: (value) => table.setPageIndex(Number(value) - 1),
+		children: [/* @__PURE__ */ jsx(SelectTrigger, {
+			size: controlSize,
+			"aria-label": "Current page",
+			className: triggerClassName,
+			children: /* @__PURE__ */ jsx(SelectValue, {})
+		}), /* @__PURE__ */ jsx(SelectContent, { children: Array.from({ length: table.getPageCount() }, (_, index) => /* @__PURE__ */ jsx(SelectItem, {
+			value: String(index + 1),
+			children: index + 1
+		}, index)) })]
+	});
+	const renderNumberedPagination = () => {
+		const pageCount = table.getPageCount();
+		const currentPage = pageIndex + 1;
+		return /* @__PURE__ */ jsx(Pagination, {
+			className: "mx-0 w-auto justify-start",
+			children: /* @__PURE__ */ jsxs(PaginationContent, { children: [
+				/* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(PaginationPrevious, {
+					size: controlIconSize,
+					disabled: !table.getCanPreviousPage(),
+					onClick: () => table.previousPage()
+				}) }),
+				getPaginationWindow(currentPage, pageCount).map((page, index) => page === "ellipsis" ? /* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(PaginationEllipsis, {}) }, `ellipsis-${index}`) : /* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(PaginationLink, {
+					size: controlIconSize,
+					isActive: page === currentPage,
+					onClick: () => table.setPageIndex(page - 1),
+					children: page
+				}) }, page)),
+				/* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(PaginationNext, {
+					size: controlIconSize,
+					disabled: !table.getCanNextPage(),
+					onClick: () => table.nextPage()
+				}) })
+			] })
+		});
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "data-table",
+		className: cn("flex h-full", className),
+		children: [/* @__PURE__ */ jsxs("div", {
+			ref: mainColumnRef,
+			className: "flex min-h-0 min-w-0 flex-1 flex-col",
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: cn("@container/data-table-toolbar mb-[calc(var(--card-spacing,1rem)*0.75)] flex flex-wrap items-center justify-between gap-2 px-(--card-spacing,1rem) @max-sm/data-table-toolbar:flex-col @max-sm/data-table-toolbar:items-stretch", filtersPaneOpen ? "-ml-(--card-spacing,0px) w-[calc(100%+var(--card-spacing,0px))]" : "-mx-(--card-spacing,0px) w-[calc(100%+var(--card-spacing,0px)*2)]"),
+					children: [/* @__PURE__ */ jsx("div", {
+						className: cn("flex min-w-0 flex-1 flex-wrap items-center gap-2", size === "default" && "min-h-8", size === "sm" && "min-h-7", size === "xs" && "min-h-6"),
+						children: hasSelection && effectiveSelectionBarPlacement === "toolbar" ? /* @__PURE__ */ jsxs("div", {
+							className: "flex min-w-0 flex-1 items-center gap-1.5",
+							children: [
+								isAllFilteredSelected ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("span", {
+									className: "px-1 text-sm whitespace-nowrap text-muted-foreground",
+									children: [
+										"All ",
+										table.getFilteredRowModel().rows.length,
+										" selected"
+									]
+								}), /* @__PURE__ */ jsx(Button, {
+									type: "button",
+									variant: "ghost",
+									size: controlSize,
+									onClick: () => setRowSelection({}),
+									children: "Clear selection"
+								})] }) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("span", {
+									className: "px-1 text-sm whitespace-nowrap text-muted-foreground",
+									children: [maxSelectedRows != null ? `${selectedRows.length} of ${maxSelectedRows} max selected` : `${selectedRows.length} selected`, hiddenByFilterCount > 0 && ` (${hiddenByFilterCount} hidden by filters)`]
+								}), /* @__PURE__ */ jsxs(Button, {
+									type: "button",
+									variant: "ghost",
+									size: controlSize,
+									disabled: atSelectionCap,
+									title: atSelectionCap ? `Up to ${maxSelectedRows} rows can be selected` : void 0,
+									onClick: selectAllFiltered,
+									children: [
+										/* @__PURE__ */ jsx(CheckCheckIcon, {}),
+										"Select all ",
+										selectableFilteredRows.length
+									]
+								})] }),
+								renderBulkActions && /* @__PURE__ */ jsx("div", {
+									className: "flex items-center gap-1",
+									children: renderBulkActions(selectedRows.map((row) => row.original), () => setRowSelection({}))
+								}),
+								/* @__PURE__ */ jsx(Button, {
+									type: "button",
+									variant: "ghost",
+									size: controlIconSize,
+									iconOnly: true,
+									"aria-label": "Clear selection",
+									onClick: () => setRowSelection({}),
+									children: /* @__PURE__ */ jsx(XIcon, {})
+								})
+							]
+						}) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(InputGroup, {
+							className: cn("max-w-64", controlSize === "sm" && "h-7", controlSize === "xs" && "h-6"),
+							children: [/* @__PURE__ */ jsx(InputGroupAddon, { children: /* @__PURE__ */ jsx(SearchIcon, {}) }), /* @__PURE__ */ jsx(InputGroupInput, {
+								"aria-label": searchPlaceholder,
+								placeholder: searchPlaceholder,
+								value: searchInput,
+								onChange: (event) => {
+									setSearchInput(event.target.value);
+									debouncedSetGlobalFilter(event.target.value);
+								},
+								onBlur: () => setGlobalFilter(searchInput),
+								onKeyDown: (event) => {
+									if (event.key === "Enter") setGlobalFilter(searchInput);
+								}
+							})]
+						}), (inlineFilterColumns.length > 0 || !showAllFiltersInline && paneFilterCount > 0) && /* @__PURE__ */ jsxs("div", {
+							className: "flex flex-wrap items-center gap-1",
+							children: [inlineFilterColumns.map((column) => /* @__PURE__ */ jsx("div", {
+								className: cn(filtersPaneOpen && "hidden"),
+								children: /* @__PURE__ */ jsx(InlineColumnFilter, {
+									column,
+									size: controlSize,
+									tableDeferred: filterApplyMode === "deferred",
+									showFilterCounts,
+									stickyFilterSelectAll
+								})
+							}, column.id)), /* @__PURE__ */ jsxs("div", {
+								className: "flex items-center gap-4",
+								children: [!showAllFiltersInline && /* @__PURE__ */ jsx(Button, {
+									ref: filtersPaneTriggerRef,
+									type: "button",
+									variant: "outline",
+									size: controlSize,
+									"aria-expanded": filtersPaneOpen,
+									"aria-controls": filtersPaneId,
+									onClick: () => setFiltersPaneOpen((open) => !open),
+									children: "All filters"
+								}), !showAllFiltersInline && !filtersPaneOpen && columnFilters.length > 0 && /* @__PURE__ */ jsxs("div", {
+									className: "flex items-center gap-2",
+									children: [/* @__PURE__ */ jsxs("span", {
+										className: "text-sm text-muted-foreground",
+										children: [
+											columnFilters.length,
+											" filter",
+											columnFilters.length === 1 ? "" : "s",
+											" applied"
+										]
+									}), /* @__PURE__ */ jsx(Button, {
+										type: "button",
+										variant: "ghost",
+										size: controlSize,
+										onClick: () => setColumnFilters([]),
+										children: "Clear filters"
+									})]
+								})]
+							})]
+						})] })
+					}), /* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-2",
+						children: [
+							aiAction && /* @__PURE__ */ jsxs(Button, {
+								type: "button",
+								variant: "ai",
+								size,
+								onClick: aiAction.onClick,
+								children: [/* @__PURE__ */ jsx(AISparkle, {
+									size: "sm",
+									"data-icon": "inline-start"
+								}), aiAction.label]
+							}),
+							actionButtons?.slice(0, 3).map((action, index) => action.variant === "icon" ? /* @__PURE__ */ jsx(Button, {
+								type: "button",
+								variant: "outline",
+								size: controlIconSize,
+								iconOnly: true,
+								disabled: action.disabled,
+								"aria-label": action.label,
+								onClick: action.onClick,
+								children: action.icon
+							}, index) : /* @__PURE__ */ jsxs(Button, {
+								type: "button",
+								variant: action.variant === "secondary" ? "outline" : "default",
+								size: controlSize,
+								disabled: action.disabled,
+								onClick: action.onClick,
+								children: [action.icon && /* @__PURE__ */ jsx("span", {
+									"data-icon": "inline-start",
+									children: action.icon
+								}), action.label]
+							}, index)),
+							showColumnToggle && manageableColumns.length > 0 && /* @__PURE__ */ jsxs(Popover, {
+								open: columnsMenuOpen,
+								onOpenChange: handleColumnsMenuOpenChange,
+								children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+									asChild: true,
+									children: /* @__PURE__ */ jsx(Button, {
+										type: "button",
+										variant: "outline",
+										size: controlIconSize,
+										iconOnly: true,
+										"aria-label": "Columns",
+										children: /* @__PURE__ */ jsx(Columns3Icon, {})
+									})
+								}), /* @__PURE__ */ jsxs(PopoverContent, {
+									align: "end",
+									className: "w-72 gap-0 p-1",
+									children: [
+										manageableColumns.length > 10 && /* @__PURE__ */ jsx("div", {
+											className: "px-1.5 pb-1",
+											children: /* @__PURE__ */ jsx(Input, {
+												"aria-label": "Search columns",
+												placeholder: "Search columns...",
+												value: columnSearchQuery,
+												onChange: (event) => setColumnSearchQuery(event.target.value),
+												className: "h-7",
+												onKeyDown: (event) => event.stopPropagation()
+											})
+										}),
+										/* @__PURE__ */ jsx("div", {
+											className: "max-h-72 overflow-y-auto",
+											children: (() => {
+												const matchesSearch = (column) => columnLabel(column).toLowerCase().includes(columnSearchQuery.toLowerCase());
+												const filteredLeft = displayedLeft.filter(matchesSearch);
+												const filteredCenter = displayedCenter.filter(matchesSearch);
+												const filteredRight = displayedRight.filter(matchesSearch);
+												return /* @__PURE__ */ jsxs(Fragment, { children: [
+													filteredLeft.map(renderColumnMenuRow),
+													filteredLeft.length > 0 && (filteredCenter.length > 0 || filteredRight.length > 0) && /* @__PURE__ */ jsx("div", { className: "my-1 border-t border-border" }),
+													filteredCenter.map(renderColumnMenuRow),
+													filteredRight.length > 0 && (filteredLeft.length > 0 || filteredCenter.length > 0) && /* @__PURE__ */ jsx("div", { className: "my-1 border-t border-border" }),
+													filteredRight.map(renderColumnMenuRow)
+												] });
+											})()
+										}),
+										/* @__PURE__ */ jsxs("div", {
+											className: "-mx-1 flex w-[calc(100%+--spacing(2))] items-center justify-between gap-2 border-t border-border px-1.5 pt-2 pb-1.5",
+											children: [hasColumnCustomization ? /* @__PURE__ */ jsxs(Button, {
+												type: "button",
+												variant: "ghost",
+												size: "xs",
+												onClick: resetColumns,
+												children: [/* @__PURE__ */ jsx(RotateCcwIcon, { "data-icon": "inline-start" }), "Reset to defaults"]
+											}) : /* @__PURE__ */ jsx("span", {}), /* @__PURE__ */ jsxs("div", {
+												className: "flex items-center gap-1",
+												children: [/* @__PURE__ */ jsx(Button, {
+													type: "button",
+													variant: "ghost",
+													size: "xs",
+													onClick: () => handleColumnsMenuOpenChange(false),
+													children: "Cancel"
+												}), /* @__PURE__ */ jsx(Button, {
+													type: "button",
+													size: "xs",
+													disabled: !hasPendingColumnsMenuChanges,
+													onClick: () => {
+														columnsMenuAppliedRef.current = true;
+														handleColumnsMenuOpenChange(false);
+														onColumnLayoutChange?.({
+															visibility: columnVisibility,
+															order: columnOrder,
+															pinning: columnPinning,
+															sizing: columnSizing
+														});
+													},
+													children: "Apply"
+												})]
+											})]
+										})
+									]
+								})]
+							})
+						]
+					})]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					ref: tableContainerRef,
+					tabIndex: canScrollHorizontally ? 0 : void 0,
+					"aria-label": canScrollHorizontally ? `${ariaLabel ?? "Table"} scroll area` : void 0,
+					className: cn(canScrollHorizontally && "focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:outline-none", "relative min-h-0", "-mx-(--card-spacing,0px) w-[calc(100%+var(--card-spacing,0px)*2)] [scrollbar-width:thin] [scrollbar-color:var(--color-border)_transparent] overflow-auto", "[&_[data-slot=table-container]]:mx-0 [&_[data-slot=table-container]]:w-full [&_[data-slot=table-container]]:overflow-visible", size === "xs" ? "[&_tbody_:focus-visible]:scroll-mt-8" : size === "sm" ? "[&_tbody_:focus-visible]:scroll-mt-9" : "[&_tbody_:focus-visible]:scroll-mt-10", filtersPaneOpen && "mr-0 w-[calc(100%+var(--card-spacing,0px))]"),
+					style: onLoadMore ? { maxHeight: maxHeight ?? "32rem" } : {
+						...rowsAreaHeight === null ? void 0 : { height: rowsAreaHeight },
+						...maxHeight ? { maxHeight } : void 0
+					},
+					children: [
+						onRowClick && /* @__PURE__ */ jsx("span", {
+							id: rowClickHintId,
+							className: "sr-only",
+							children: "Press Enter to view details"
+						}),
+						(loading || loadingMore) && /* @__PURE__ */ jsx("span", {
+							role: "status",
+							className: "sr-only",
+							children: "Loading…"
+						}),
+						/* @__PURE__ */ jsx("span", {
+							role: "status",
+							className: "sr-only",
+							children: liveAnnouncement
+						}),
+						/* @__PURE__ */ jsxs(Table, {
+							size,
+							"aria-label": ariaLabel,
+							"aria-rowcount": filteredRowCount + headerGroupsForRender.length,
+							"aria-colcount": visibleLeafColumns.length,
+							className: cn("table-fixed border-separate border-spacing-0", striped && "[&_tbody_tr:nth-child(even)]:bg-muted/20", striped && "[&_tbody_tr:hover]:bg-muted/50!", cellDividers && "[&_td]:border-r [&_td:last-child]:border-r-0 [&_th]:border-r [&_th:last-child]:border-r-0"),
+							children: [
+								caption != null && /* @__PURE__ */ jsx(TableCaption, {
+									className: cn(captionHidden && "sr-only"),
+									children: caption
+								}),
+								/* @__PURE__ */ jsx("colgroup", { children: table.getHeaderGroups().at(-1)?.headers.filter((header) => !header.column.columnDef.meta?.filterOnly).map((header) => /* @__PURE__ */ jsx("col", { style: { width: header.column.getSize() } }, header.column.id)) }),
+								/* @__PURE__ */ jsx(TableHeader, { children: headerGroupsForRender.map((headerGroup, headerGroupIndex) => /* @__PURE__ */ jsx(TableRow, { children: headerGroup.headers.filter((header) => !header.column.columnDef.meta?.filterOnly && !(headerGroupIndex > 0 && passthroughLeafIds.has(header.column.id))).map((header) => {
+									const isPassthroughLeaf = passthroughLeafIds.has(header.column.id);
+									const isRealGroupHeader = header.subHeaders.length > 0 && !isPassthroughLeaf;
+									const isLeafHeader = !isRealGroupHeader && (!header.isPlaceholder || isPassthroughLeaf);
+									const canSort = isLeafHeader && header.column.getCanSort();
+									const sortDirection = header.column.getIsSorted();
+									const canResize = isLeafHeader && header.column.getCanResize();
+									const align = header.column.columnDef.meta?.align ?? "left";
+									const headerControlsReveal = openHeaderColumnId === header.column.id ? "opacity-100" : hoverRevealClass;
+									const setHeaderOpen = (open) => setOpenHeaderColumnId(open ? header.column.id : null);
+									const headerActions = !isLeafHeader ? [] : header.column.columnDef.meta?.headerActions?.(header.column, table) ?? [];
+									return /* @__PURE__ */ jsxs(TableHead, {
+										"data-column-id": header.column.id,
+										colSpan: header.colSpan,
+										rowSpan: isPassthroughLeaf && headerGroupIndex === 0 ? headerGroupsForRender.length : void 0,
+										"aria-sort": !canSort ? void 0 : sortDirection === "asc" ? "ascending" : sortDirection === "desc" ? "descending" : "none",
+										style: {
+											...stickyHeader && {
+												position: "sticky",
+												top: headerGroupIndex * headerRowHeightPx
+											},
+											...getPinnedStyle(header.column)
+										},
+										className: cn("group/header-actions relative", isRealGroupHeader && "border-x border-b border-border text-center", groupBoundaryColumnIds.starts.has(header.column.id) && "border-l border-border", groupBoundaryColumnIds.ends.has(header.column.id) && "border-r border-border", header.column.columnDef.meta?.mergeRepeatedValues && "border-x border-border", getPinnedClassName(header.column, table), getScrollFadeClassName(header.column, table, canScrollHorizontally), stickyHeader && "z-20 bg-background", stickyHeader && header.column.getIsPinned() && "z-30", isLeafHeader && aiColumnIds?.includes(header.column.id) && "border-t-2 border-t-ai-wash bg-ai-glow"),
+										children: [/* @__PURE__ */ jsxs("div", {
+											className: cn("flex items-center gap-0.5", align === "right" && "flex-row-reverse"),
+											children: [
+												/* @__PURE__ */ jsx("div", {
+													className: cn("min-w-0 flex-1", align === "right" && "flex justify-end"),
+													children: isRealGroupHeader ? /* @__PURE__ */ jsx("div", {
+														className: "min-w-0 truncate text-center text-xs font-medium",
+														children: flexRender(header.column.columnDef.header, header.getContext())
+													}) : header.isPlaceholder && !isPassthroughLeaf ? null : canSort ? /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+														asChild: true,
+														children: /* @__PURE__ */ jsxs(Button, {
+															type: "button",
+															variant: "ghost",
+															size: "xs",
+															className: cn("h-7 max-w-full min-w-0 shrink! gap-1 px-2 font-medium", align === "right" ? "-mr-2" : "-ml-2"),
+															onClick: header.column.getToggleSortingHandler(),
+															children: [
+																/* @__PURE__ */ jsx("span", {
+																	className: "min-w-0 truncate",
+																	children: flexRender(header.column.columnDef.header, header.getContext())
+																}),
+																enableMultiSort && sorting.length > 1 && sortDirection && (() => {
+																	const sortRank = sorting.findIndex((sort) => sort.id === header.column.id) + 1;
+																	return /* @__PURE__ */ jsx("span", {
+																		"aria-hidden": "true",
+																		className: "flex size-3.5 shrink-0 items-center justify-center rounded-full bg-muted text-[10px] font-medium text-muted-foreground",
+																		children: sortRank
+																	});
+																})(),
+																sortDirection === "asc" ? /* @__PURE__ */ jsx(ArrowUpIcon, { className: "size-3.5 shrink-0" }) : sortDirection === "desc" ? /* @__PURE__ */ jsx(ArrowDownIcon, { className: "size-3.5 shrink-0" }) : /* @__PURE__ */ jsx(ChevronsUpDownIcon, { className: "size-3.5 shrink-0 opacity-50" })
+															]
+														})
+													}), /* @__PURE__ */ jsxs(TooltipContent, { children: [sortDirection === "asc" ? "Sort descending" : sortDirection === "desc" ? "Clear sort" : "Sort ascending", enableMultiSort && " — Shift+click to sort by multiple columns"] })] }) : /* @__PURE__ */ jsx("div", {
+														className: "min-w-0 truncate text-xs",
+														children: flexRender(header.column.columnDef.header, header.getContext())
+													})
+												}),
+												isLeafHeader && mergedFilterColumns(header.column, table).some((c) => c.getCanFilter()) && /* @__PURE__ */ jsx(ColumnFilterTrigger, {
+													column: header.column,
+													table,
+													revealClassName: headerControlsReveal,
+													onOpenChange: setHeaderOpen,
+													tableDeferred: filterApplyMode === "deferred",
+													showFilterCounts,
+													stickyFilterSelectAll
+												}),
+												headerActions.length > 0 && /* @__PURE__ */ jsx(RowActions, {
+													actions: headerActions,
+													revealClassName: headerControlsReveal,
+													onOpenChange: setHeaderOpen
+												}),
+												isLeafHeader && aiColumnIds?.includes(header.column.id) && /* @__PURE__ */ jsxs(AILabel, { children: [/* @__PURE__ */ jsx(AIMarkerTrigger, {
+													size,
+													ariaLabel: `AI-generated column: ${columnLabel(header.column)}`
+												}), /* @__PURE__ */ jsxs(AILabelContent, { children: [/* @__PURE__ */ jsx(PopoverHeader, { children: /* @__PURE__ */ jsx(PopoverTitle, { children: "Why you're seeing this" }) }), /* @__PURE__ */ jsx(PopoverDescription, { children: "This column's values are generated or suggested by AI." })] })] })
+											]
+										}), canResize && /* @__PURE__ */ jsx("div", {
+											ref: (element) => {
+												if (element) resizeHandleRefs.current.set(header.column.id, element);
+												else resizeHandleRefs.current.delete(header.column.id);
+											},
+											onMouseDown: header.getResizeHandler(),
+											onTouchStart: header.getResizeHandler(),
+											onDoubleClick: () => fitColumnToContent(header.column, table),
+											tabIndex: (activeResizeColumnId ?? resizableColumnIds[0]) === header.column.id ? 0 : -1,
+											onFocus: () => setActiveResizeColumnId(header.column.id),
+											onKeyDown: (event) => {
+												if (event.key === "ArrowUp" || event.key === "ArrowDown") {
+													event.preventDefault();
+													const index = resizableColumnIds.indexOf(header.column.id);
+													const nextIndex = event.key === "ArrowDown" ? index + 1 : index - 1;
+													const nextId = resizableColumnIds[nextIndex];
+													if (!nextId) return;
+													resizeHandleRefs.current.get(nextId)?.focus();
+													setActiveResizeColumnId(nextId);
+													return;
+												}
+												const minSize = header.column.columnDef.minSize ?? 20;
+												const maxSize = header.column.columnDef.maxSize ?? Number.MAX_SAFE_INTEGER;
+												const clamp = (size) => Math.min(maxSize, Math.max(minSize, size));
+												let nextSize;
+												if (event.key === "Home") nextSize = minSize;
+												else if (event.key === "End") nextSize = maxSize < 1e6 ? maxSize : void 0;
+												else if (event.key === "ArrowLeft" || event.key === "ArrowRight") {
+													const step = event.shiftKey ? 50 : 10;
+													const delta = event.key === "ArrowRight" ? step : -step;
+													nextSize = clamp(header.getSize() + delta);
+												}
+												if (nextSize === void 0) return;
+												event.preventDefault();
+												setColumnSizing((prev) => ({
+													...prev,
+													[header.column.id]: nextSize
+												}));
+											},
+											role: "separator",
+											"aria-orientation": "vertical",
+											"aria-label": `Resize ${columnLabel(header.column)}`,
+											"aria-valuenow": header.getSize(),
+											"aria-valuemin": header.column.columnDef.minSize ?? 20,
+											"aria-valuemax": typeof header.column.columnDef.maxSize === "number" && header.column.columnDef.maxSize < 1e6 ? header.column.columnDef.maxSize : void 0,
+											className: cn("absolute top-0 right-0 h-full w-1 cursor-col-resize touch-none select-none hover:bg-primary/50 focus-visible:bg-primary focus-visible:outline-none", header.column.getIsResizing() && "bg-primary")
+										})]
+									}, header.id);
+								}) }, headerGroup.id)) }),
+								/* @__PURE__ */ jsxs(TableBody, { children: [loading ? Array.from({ length: table.getState().pagination.pageSize }).map((_, rowIndex) => /* @__PURE__ */ jsx(TableRow, { children: visibleLeafColumns.map((_, columnIndex) => /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-full" }) }, columnIndex)) }, rowIndex)) : error ? /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, {
+									colSpan: visibleLeafColumns.length,
+									className: "h-56 text-center",
+									children: /* @__PURE__ */ jsx(Empty, {
+										role: "alert",
+										children: /* @__PURE__ */ jsxs(EmptyHeader, { children: [
+											/* @__PURE__ */ jsx(EmptyMedia, {
+												variant: "icon",
+												children: /* @__PURE__ */ jsx(CircleAlertIcon, {})
+											}),
+											/* @__PURE__ */ jsx(EmptyTitle, { children: "Failed to load data" }),
+											/* @__PURE__ */ jsx(EmptyDescription, { children: errorDescription ?? (typeof error === "boolean" ? "Something went wrong. Try again." : error) })
+										] })
+									})
+								}) }) : rows.length === 0 ? /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, {
+									colSpan: visibleLeafColumns.length,
+									className: "h-56 text-center",
+									children: /* @__PURE__ */ jsx(Empty, { children: /* @__PURE__ */ jsxs(EmptyHeader, { children: [
+										/* @__PURE__ */ jsx(EmptyMedia, {
+											variant: "icon",
+											children: /* @__PURE__ */ jsx(SearchXIcon, {})
+										}),
+										/* @__PURE__ */ jsx(EmptyTitle, { children: emptyTitle }),
+										/* @__PURE__ */ jsx(EmptyDescription, { children: emptyDescription })
+									] }) })
+								}) }) : rows.map((row, rowIndex) => /* @__PURE__ */ jsxs(React.Fragment, { children: [/* @__PURE__ */ jsx(TableRow, {
+									"aria-rowindex": (onLoadMore ? 0 : pageIndex * currentPageSize) + rowIndex + headerGroupsForRender.length + 1,
+									"data-state": row.getIsSelected() ? "selected" : void 0,
+									onClick: onRowClick ? () => onRowClick(row.original) : void 0,
+									onKeyDown: onRowClick ? (event) => {
+										if (event.key !== "Enter" && event.key !== " ") return;
+										event.preventDefault();
+										onRowClick(row.original);
+									} : void 0,
+									tabIndex: onRowClick ? 0 : void 0,
+									"aria-describedby": onRowClick ? rowClickHintId : void 0,
+									className: cn(onRowClick && "cursor-pointer outline-none focus-visible:bg-muted/50 focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:ring-inset", aiRowPredicate?.(row.original) && "bg-ai-glow", renderExpandedRow && row.getIsExpanded() && "border-b-0"),
+									children: row.getVisibleCells().filter((cell) => !cell.column.columnDef.meta?.filterOnly && mergedCellRowSpans.get(cell.column.id)?.get(row.id) !== 0).map((cell, cellIndex) => {
+										const alignRight = cell.column.columnDef.meta?.align === "right";
+										const mergeRowSpan = mergedCellRowSpans.get(cell.column.id)?.get(row.id);
+										const cellContent = aiCellPredicate?.(row.original, cell.column.id) ? /* @__PURE__ */ jsxs("span", {
+											className: "inline-flex items-center gap-1",
+											children: [flexRender(cell.column.columnDef.cell, cell.getContext()), /* @__PURE__ */ jsxs(AILabel, { children: [/* @__PURE__ */ jsx(AIMarkerTrigger, {
+												size,
+												ariaLabel: "AI-suggested value"
+											}), /* @__PURE__ */ jsxs(AILabelContent, { children: [/* @__PURE__ */ jsx(PopoverHeader, { children: /* @__PURE__ */ jsx(PopoverTitle, { children: "Why you're seeing this" }) }), /* @__PURE__ */ jsx(PopoverDescription, { children: "This value is generated or suggested by AI." })] })] })]
+										}) : flexRender(cell.column.columnDef.cell, cell.getContext());
+										const needsPinnedAiGlow = cell.column.getIsPinned() === "left" && aiRowPredicate?.(row.original);
+										return /* @__PURE__ */ jsx(TableCell, {
+											"data-column-id": cell.column.id,
+											rowSpan: mergeRowSpan && mergeRowSpan > 1 ? mergeRowSpan : void 0,
+											style: {
+												...getPinnedStyle(cell.column),
+												...needsPinnedAiGlow && {
+													backgroundSize: `${table.getTotalSize()}px 100%`,
+													backgroundPositionX: `-${cell.column.getStart("left")}px`
+												}
+											},
+											className: cn("overflow-hidden text-ellipsis", mergeRowSpan != null && "align-top", mergeRowSpan != null && "border-x border-border", groupBoundaryColumnIds.starts.has(cell.column.id) && "border-l border-border", groupBoundaryColumnIds.ends.has(cell.column.id) && "border-r border-border", getPinnedClassName(cell.column, table), getScrollFadeClassName(cell.column, table, canScrollHorizontally), aiColumnIds?.includes(cell.column.id) && "bg-ai-glow", cellIndex === 0 && aiRowPredicate?.(row.original) && "shadow-[inset_2px_0_0_0_var(--color-ai-wash)]", needsPinnedAiGlow && "bg-ai-glow"),
+											children: alignRight ? /* @__PURE__ */ jsx("div", {
+												className: "flex items-center justify-end",
+												children: cellContent
+											}) : cellContent
+										}, cell.id);
+									})
+								}), renderExpandedRow && row.getIsExpanded() && /* @__PURE__ */ jsx(TableRow, {
+									"data-slot": "data-table-expanded-row",
+									id: `data-table-expanded-${row.id}`,
+									children: /* @__PURE__ */ jsx(TableCell, {
+										colSpan: visibleLeafColumns.length,
+										className: "bg-muted/20 p-0",
+										children: /* @__PURE__ */ jsx("div", {
+											className: "ml-8 border-t border-border p-4",
+											children: renderExpandedRow(row.original)
+										})
+									})
+								})] }, row.id)), onLoadMore && hasMore && rows.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(TableRow, {
+									ref: loadMoreSentinelRef,
+									"aria-hidden": "true",
+									"data-slot": "data-table-load-more-sentinel",
+									className: "border-none",
+									children: /* @__PURE__ */ jsx(TableCell, {
+										colSpan: visibleLeafColumns.length,
+										className: "h-px p-0"
+									})
+								}), loadingMore && Array.from({ length: 3 }).map((_, rowIndex) => /* @__PURE__ */ jsx(TableRow, { children: visibleLeafColumns.map((_, columnIndex) => /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-full" }) }, columnIndex)) }, `load-more-skeleton-${rowIndex}`))] })] })
+							]
+						}),
+						bulkActionsBarMounted && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+							"aria-hidden": "true",
+							style: { height: bulkActionsBarHeight + 8 }
+						}), /* @__PURE__ */ jsx(BulkActionsBar, {
+							ref: bulkActionsBarRef,
+							count: selectedRows.length,
+							hiddenByFilterCount,
+							totalCount: selectableFilteredRows.length,
+							isAllSelected: isAllFilteredSelected,
+							maxSelectedRows,
+							atSelectionCap,
+							onSelectAll: selectAllFiltered,
+							onClear: () => setRowSelection({}),
+							controlSize,
+							controlIconSize,
+							children: renderBulkActions?.(selectedRows.map((row) => row.original), () => setRowSelection({}))
+						})] })
+					]
+				}),
+				showFooter && /* @__PURE__ */ jsxs("div", {
+					ref: footerRef,
+					"data-slot": "card-footer",
+					className: cn("flex flex-wrap items-center gap-4 border-t border-border bg-muted/50 px-(--card-spacing,1rem) py-1.5", filtersPaneOpen ? "-ml-(--card-spacing,0px) w-[calc(100%+var(--card-spacing,0px))] rounded-bl-xl" : "-mx-(--card-spacing,0px) w-[calc(100%+var(--card-spacing,0px)*2)] rounded-b-xl"),
+					children: [
+						/* @__PURE__ */ jsx("p", {
+							role: "status",
+							className: "text-sm whitespace-nowrap text-muted-foreground",
+							children: filteredRowCount === 0 ? "0 items" : `${rangeStart}–${rangeEnd} of ${filteredRowCount} items`
+						}),
+						showPageSizeSelector && /* @__PURE__ */ jsxs("div", {
+							className: "flex items-center gap-1.5 text-sm text-muted-foreground",
+							children: [/* @__PURE__ */ jsx("span", {
+								className: "whitespace-nowrap",
+								children: "Items per page:"
+							}), /* @__PURE__ */ jsxs(Select, {
+								value: String(currentPageSize),
+								onValueChange: (value) => table.setPageSize(Number(value)),
+								children: [/* @__PURE__ */ jsx(SelectTrigger, {
+									size: controlSize,
+									"aria-label": "Items per page",
+									className: "h-auto border-none bg-transparent px-1 font-medium text-foreground",
+									children: /* @__PURE__ */ jsx(SelectValue, {})
+								}), /* @__PURE__ */ jsx(SelectContent, { children: pageSizeOptions.map((option) => /* @__PURE__ */ jsx(SelectItem, {
+									value: String(option),
+									children: option
+								}, option)) })]
+							})]
+						}),
+						table.getPageCount() > 1 && (paginationStyle === "numbered" ? /* @__PURE__ */ jsx("div", {
+							className: "ml-auto border-l border-border pl-4",
+							children: renderNumberedPagination()
+						}) : /* @__PURE__ */ jsxs("div", {
+							className: "ml-auto flex items-center gap-3 border-l border-border pl-4",
+							children: [/* @__PURE__ */ jsxs("div", {
+								className: "flex items-center gap-1.5 text-sm text-muted-foreground",
+								children: [renderPageSelect("h-auto border-none bg-transparent px-1 font-medium text-foreground"), /* @__PURE__ */ jsxs("span", {
+									className: "whitespace-nowrap",
+									children: [
+										"of ",
+										table.getPageCount(),
+										" pages"
+									]
+								})]
+							}), /* @__PURE__ */ jsxs("div", {
+								className: "flex items-center gap-0.5",
+								children: [/* @__PURE__ */ jsx(Button, {
+									type: "button",
+									variant: "ghost",
+									size: controlIconSize,
+									iconOnly: true,
+									"aria-label": "Previous page",
+									disabled: !table.getCanPreviousPage(),
+									onClick: () => table.previousPage(),
+									children: /* @__PURE__ */ jsx(ChevronLeftIcon, {})
+								}), /* @__PURE__ */ jsx(Button, {
+									type: "button",
+									variant: "ghost",
+									size: controlIconSize,
+									iconOnly: true,
+									"aria-label": "Next page",
+									disabled: !table.getCanNextPage(),
+									onClick: () => table.nextPage(),
+									children: /* @__PURE__ */ jsx(ChevronRightIcon, {})
+								})]
+							})]
+						}))
+					]
+				})
+			]
+		}), filtersPaneOpen && /* @__PURE__ */ jsxs("div", {
+			ref: filtersPaneRef,
+			id: filtersPaneId,
+			role: "region",
+			"aria-labelledby": filtersPaneHeadingId,
+			onKeyDown: (event) => {
+				if (event.key !== "Escape") return;
+				if (event.target.closest("[data-slot=popover-content], [role=listbox]")) return;
+				setFiltersPaneOpen(false);
+			},
+			style: filtersPaneEdgeAdjust ? {
+				marginTop: filtersPaneEdgeAdjust.marginTop,
+				height: filtersPaneEdgeAdjust.height
+			} : void 0,
+			className: "-mr-(--card-spacing,0px) flex w-72 shrink-0 flex-col gap-4 border-l border-border bg-card p-(--card-spacing,1rem)",
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex items-center justify-between gap-2",
+					children: [/* @__PURE__ */ jsx("h2", {
+						id: filtersPaneHeadingId,
+						className: "text-base font-medium text-foreground",
+						children: "All filters"
+					}), /* @__PURE__ */ jsx(Button, {
+						ref: filtersPaneCloseButtonRef,
+						type: "button",
+						variant: "ghost",
+						size: "xs",
+						iconOnly: true,
+						"aria-label": "Close filters",
+						onClick: () => setFiltersPaneOpen(false),
+						children: /* @__PURE__ */ jsx(XIcon, {})
+					})]
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "-m-1 flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto p-1",
+					children: filterableColumns.map((column) => {
+						const pinned = pinnedFilterIds.includes(column.id);
+						const label = columnLabel(column);
+						return /* @__PURE__ */ jsxs("div", {
+							className: "group/filter-row flex flex-col gap-1.5",
+							children: [/* @__PURE__ */ jsxs("div", {
+								className: "flex items-center justify-between gap-2",
+								children: [/* @__PURE__ */ jsxs(Label, { children: [label, !column.getIsVisible() && !column.columnDef.meta?.filterOnly && /* @__PURE__ */ jsx("span", {
+									className: "ml-1 font-normal text-muted-foreground",
+									children: "(hidden)"
+								})] }), allowFilterPinning && !column.columnDef.meta?.filterOnly && /* @__PURE__ */ jsx(Button, {
+									type: "button",
+									variant: "ghost",
+									size: "xs",
+									iconOnly: true,
+									"aria-label": pinned ? `Unpin ${label}` : `Pin ${label}`,
+									className: hoverRevealFilterRowClass,
+									onClick: () => toggleFilterPin(column.id),
+									children: pinned ? /* @__PURE__ */ jsx(PinOffIcon, { className: "size-3.5" }) : /* @__PURE__ */ jsx(PinIcon, { className: "size-3.5" })
+								})]
+							}), /* @__PURE__ */ jsx(PaneColumnFilterField, {
+								column,
+								showFilterCounts,
+								tableDeferred: filterApplyMode === "deferred",
+								stickyFilterSelectAll
+							})]
+						}, column.id);
+					})
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "-mx-(--card-spacing,1rem) -mb-(--card-spacing,1rem) flex w-[calc(100%+var(--card-spacing,1rem)*2)] items-center justify-center border-t border-border px-(--card-spacing,1rem) py-1.5",
+					children: /* @__PURE__ */ jsx(Button, {
+						type: "button",
+						variant: "ghost",
+						size: controlSize,
+						className: "w-full",
+						disabled: columnFilters.length === 0,
+						onClick: () => setColumnFilters([]),
+						children: "Clear filters"
+					})
+				})
+			]
+		})]
+	});
+}
+/**
+* WHEN TO USE
+* - Tabular data that needs sorting, search, column filters, selectable
+*   rows with bulk actions, row actions, expandable detail rows, row-click
+*   navigation, AI affordances, column management, or pagination handled
+*   for you — an admin list, a resource picker, anything past "just render
+*   some rows."
+*
+* NOT WHEN
+* - A fixed, small table with no interaction beyond display — use Table
+*   directly, it's lighter and this adds nothing over it.
+* - You need virtualization or server-driven async fetching — neither is
+*   built in this pass. Virtualization has no existing MMDS primitive to
+*   lean on and would need a further headless dependency (e.g.
+*   `@tanstack/react-virtual`) — out of scope here. (Column resize is
+*   already built — `enableColumnResizing` — this isn't that.)
+*
+* KEY RULES
+* - `columns`/`data` follow `@tanstack/react-table`'s `ColumnDef<TData>[]`
+*   shape directly — this component doesn't wrap or reinvent that API, it
+*   renders it. Read TanStack Table's own docs for `accessorKey`, custom
+*   `cell` renderers, `enableSorting: false` per column, etc.
+* - Sorting, filtering, search, selection, expansion, column order/
+*   visibility, and pagination state all live inside DataTable (via
+*   `useReactTable`) — an exception to MMDS's usual fully-uncontrolled
+*   convention, because the whole point of this component is to own that
+*   state so you don't have to. `onRowSelectionChange` is one escape
+*   hatch, for wiring selection to something outside (a bulk delete call, a
+*   parent form); `onStateChange` is another, firing sorting/columnFilters/
+*   globalFilter live for the same reason (a URL param, analytics, a
+*   server-driven refetch) — read-only, no live two-way binding, but
+*   paired with `defaultSorting`/`defaultColumnFilters`/`defaultGlobalFilter`
+*   (seeding each on first render) it's enough to round-trip state out to
+*   a URL and back in on next mount. `defaultPinnedFilterIds` seeds the
+*   toolbar's inline-filter set the same way — all four still fully
+*   uncontrolled after first render, same as everything else here.
+* - Columns render at a fixed width (`table-fixed` + a `<colgroup>` driven by
+*   each column's `ColumnDef.size`, default 150) instead of auto-fitting to
+*   content — set `size` per column for anything narrower/wider than that.
+*   This trades content-driven auto-sizing for widths that stay put across
+*   sorting, filtering, and pagination.
+* - The toolbar carries the same edge-to-edge treatment as `Table` itself
+*   (see Table's own KEY RULES) — its outer box matches the table's wider
+*   footprint instead of looking narrower next to it, and its own padding
+*   keeps search/filter/Columns content at the same inset as the table's
+*   cell content. Automatic, no prop for it.
+* - Toolbar controls (search, inline/"All filters" filters, Columns) and
+*   footer controls (items-per-page, page-jump, Previous/Next) render one
+*   size notch below `size` itself — "default" gets "sm" controls, "sm"
+*   gets "xs", "xs" stays "xs" (already the floor). They're always-visible,
+*   repetitive chrome, not row content competing for the same emphasis —
+*   automatic, not a prop, and it scales with `size` rather than being
+*   fixed at one density. The `aiAction` button is the deliberate exception
+*   — it's meant to stand out, so it stays at `size` itself.
+* - `loading` swaps every cell for a `Skeleton` shaped to the real columns —
+*   don't also filter `data` to empty while loading, pass the real (stale
+*   or previous) data and let `loading` cover it, or column widths jump.
+* - `error` (a boolean) swaps the whole body for an Empty-based failure
+*   state — same composition the error-state pattern uses elsewhere
+*   (Patterns/UI States), just pre-wired here — and `errorDescription`
+*   supplies its copy (default "Something went wrong. Try again."). Two
+*   props on purpose: whether it failed and what to say are different
+*   things; passing the copy as `error` itself still works but is
+*   deprecated. A plain empty `data` array
+*   (not loading, no error) renders the "no results" Empty state instead.
+* - `enableRowSelection` injects a checkbox column automatically — don't
+*   add your own selection column to `columns`.
+* - Row actions are just a normal column whose `cell` renders the exported
+*   `RowActions` helper (inline icon buttons for ≤2 actions, an overflow
+*   menu past that) — there's no dedicated `actions` prop, this is the same
+*   "put a Button in a cell" technique any custom `cell` already uses.
+*   `RowActions` stops its own clicks from bubbling, so it's safe inside a
+*   row that also sets `onRowClick`.
+* - `renderExpandedRow` adds a leading expand/collapse toggle to every row;
+*   expanding inserts a full-width row below it with whatever you return —
+*   a detail card, or a nested table of its own. The toggle stops its click
+*   from bubbling, so it composes with `onRowClick` too.
+* - `onRowClick` makes the whole row clickable and keyboard-activatable
+*   (Enter/Space), for row→detail navigation. It composes with
+*   `enableRowSelection` — the selection checkbox stops its own click from
+*   bubbling up, so checking a row never also triggers `onRowClick`. Any
+*   other interactive element you put inside a cell (a button, a link)
+*   needs its own `stopPropagation` the same way if it shouldn't also
+*   trigger the row click.
+* - `striped` and `cellDividers` are independent visual modifiers — zebra
+*   row tinting and vertical column rules, respectively — for tables where
+*   plain row/column boundaries are hard to scan.
+* - AI presence has a distinct answer at each level, but DataTable's own
+*   outer surface never takes a border/shadow of its own — there's no `ai`
+*   boolean prop. For whole-table AI presence, the table just sits inside
+*   an AI Card — the exact same recipe AI/Card's "BoundaryTreatments" story uses (a
+*   `bg-gradient-to-r from-ai-wash to-ai-grad-from p-px` wrapper div, not
+*   a one-off DataTable-specific border) — plus a soft inward glow rising
+*   from the Card's own bottom edge (`bg-ai-glow-bottom`, fading out at 15%
+*   of the Card's own height) as a plain Card className — a background-image,
+*   so it layers over Card's own `bg-card` (`cn` registers the glow classes
+*   as background-image utilities so tailwind-merge keeps both).
+*   `AILabel` sits in the
+*   Card's top corner (a `CardAction`) — see the "WithAIWholeTable" story.
+*   The whole-table treatment is a boundary (gradient outline), an inward
+*   bottom glow and a corner marker — not the row/column glow used below.
+*   Below that: `aiAction` (table level)
+*   renders a `variant="ai"` toolbar button; `aiRowPredicate` (row level)
+*   puts a leading `AILabel` as the very first thing in the row — ahead
+*   of the expand toggle and selection checkbox, its own leading slot —
+*   plus a colored left edge (an inset box-shadow on the row's first
+*   cell, not `border-l` on the `<tr>` — the table is `border-separate`
+*   for pinned columns, and in that model a `<tr>` never paints borders)
+*   and a soft inward glow (`bg-ai-glow`, fading out at 20% of the row's own
+*   width, a background-image, not a solid fill) bleeding in from that
+*   same left edge — plus a second copy of that same glow painted directly
+*   on every left-pinned cell (however many — the injected AI column and a
+*   genuinely pinned column can both land in that same sticky group, see
+*   `effectiveColumnPinning` above), needed because pinning makes each
+*   `position: sticky` with its own opaque background, so the `<tr>`'s copy
+*   (anchored to the row's original, unscrolled left edge) would otherwise
+*   end up hidden behind them once the table scrolls horizontally. Each
+*   copy is sized via an explicit `backgroundSize` (the row's real total
+*   width, from `table.getTotalSize()`, not that cell's own narrower one)
+*   and shifted by `backgroundPositionX: -column.getStart("left")` so it
+*   shows the exact slice of that same gradient that falls at its actual
+*   position in the row — the whole pinned group reads as one continuous
+*   glow, pixel-identical to the unpinned case, rather than a smaller
+*   version of it; `aiColumnIds` (column level)
+*   adds the same left-edge glow down the whole column, header cell
+*   included (every cell in a column shares the same width, so 20% of it
+*   resolves to the same px value down the whole column, tiling into one
+*   continuous glow with no visible seam), a colored top rule on that
+*   column's header cell
+*   (mirrored by the row's own left edge above), and a leading
+*   `AILabel` (generic copy) automatically in that header;
+*   `aiCellPredicate` (cell level) adds just a trailing `AILabel` inline
+*   after the value — no glow, no border, since a single AI-touched value
+*   doesn't need its own boundary treatment, only the explainability
+*   entry point. Every `AILabelTrigger` here follows DataTable's own
+*   density prop — "default" at default density, "sm" at both sm and xs
+*   — never AILabel's `iconOnly`, which is opt-in only for when a
+*   designer explicitly asks for it. Give an AI-marked column enough
+*   width for its title plus the visible "AI" marker (the header keeps
+*   both; the title truncates first). Row/column backgrounds use
+*   `background-image` rather than `box-shadow` specifically for the row
+*   case — `box-shadow` doesn't paint reliably on `<tr>` in every
+*   browser, `background-image` does. Compose `AILabel` directly into a
+*   column's own `header`/`cell` instead of `aiColumnIds` when a column
+*   needs its own specific explanation text.
+* - `meta: { align: "left" | "right" }` (default `"left"`) aligns both a
+*   column's header and its cell content — the guideline is quantitative
+*   content (amounts, counts, percentages, anything meant to be compared
+*   or summed down the column) gets `"right"`, text stays `"left"`. Cell
+*   alignment uses `flex justify-end`, not just `text-align`, so it also
+*   right-aligns a custom `cell` that renders its own Badge/icon cluster,
+*   not only plain text. `"right"` mirrors the header too — the sort
+*   button's label moves to that side and the filter icon/`headerActions`
+*   cluster moves to the *other* side (`flex-row-reverse` on the same row,
+*   not a second layout to maintain), so a numeric column's controls sit
+*   off to the side its digits don't occupy.
+* - Search matches only `searchableColumnIds` (default: the first two
+*   entries in `columns`) — set it explicitly to widen/narrow the scope.
+*   Matches highlight automatically for plain columns (no custom `cell`);
+*   for a column with a custom `cell`, highlight it yourself with the
+*   exported `HighlightMatch`, reading the query off
+*   `info.table.getState().globalFilter`.
+* - Every column gets a filter icon in its header cell. In the toolbar,
+*   filters show inline right after search — all of them if there are 3 or
+*   fewer filterable columns, otherwise just the pinned ones (the first two
+*   by default, and however many the user pins from the pane after that —
+*   uncapped, the row wraps onto more lines rather than overflowing) plus
+*   an "All filters" button, shown whenever there are more than 3
+*   filterable columns at all — regardless of how many are currently
+*   pinned inline, even every one of them, since the pane is still the
+*   only place to *unpin* one. That button opens a docked pane, not a
+*   floating overlay — the table area (`flex-1`) shrinks to make room for
+*   it on the surface DataTable sits on, instead of the pane covering the
+*   table, and reaches that surface's true top/right/bottom edge (measured
+*   in JS against the nearest Card, since a header/footer's height isn't a
+*   fixed token) while never growing taller than that surface — its own
+*   filter-list area is a `min-h-0` flex child so a long list scrolls
+*   internally instead of pushing the pane past the surface's edge. While
+*   the pane is open, the inline pinned filter buttons and the "All
+*   filters" trigger both hide — every filterable column and its current
+*   value already lives in the pane itself, each with a pin/unpin toggle
+*   (hover/keyboard-focus-revealed by default, like the header cell's own
+*   controls — see `revealColumnControlsOnHover`), so there's one place to
+*   look, not two copies of the same control. `allowFilterPinning` (default
+*   `true`) turns that toggle off entirely for a designer-fixed toolbar —
+*   `defaultPinnedFilterIds` (or its first-two default) becomes the
+*   permanent inline set, with no user-facing way to change which columns
+*   those are; every other filterable column still lives in the pane, just
+*   with nothing to move it out. Both the inline pinned chips and the pane
+*   list order their filterable columns by the table's own column order by
+*   default; set `meta: { filterOrder: N }` on a `ColumnDef` to decouple a
+*   filter's display position from where its column currently sits — handy
+*   when drag-and-drop/the Columns menu can reorder columns but a filter
+*   should stay put regardless. Once
+*   any filter is set, the toolbar shows "N filters applied" (every
+*   applied filter, inline pinned ones included, not just pane-only ones)
+*   next to a "Clear filters" button that clears all of them the same way
+*   — the pane's own footer "Clear filters" does the same, just from
+*   inside the pane. Default filter is text-contains; set
+*   `meta: { filterVariant: "select" }` on a `ColumnDef` for a
+*   multi-select filter instead — a checklist in the header icon's own
+*   popover; a `SelectMultiple` for the inline pinned button (its
+*   trigger's placeholder is the column label, its value only ever the
+*   first selected value's label, `maxLabelChars={12}` ellipsis-truncating
+*   that one past 12 characters even with just one selected, plus "+N"
+*   once more than one is — so neither a single long value nor a long list
+*   can run the toolbar out of room) and for the pane (which holds every
+*   filterable column at once). A multiselect filter (`"select"` or
+*   `"range"`) always requires a deliberate Apply — in every surface,
+*   regardless of `filterApplyMode` — since checking several boxes is a
+*   set to review before committing, not a single complete thought; picks
+*   still show as checked/selected immediately, on the trigger and in the
+*   list both — only the real filtering of the table's rows waits for
+*   Apply, not the visible selection itself. Closed (nothing open to
+*   preview into), the trigger always reflects whatever's actually
+*   committed. Its Cancel/Apply footer always lives inside that one
+*   field's own popover — the header icon's, the inline pinned button's,
+*   or (in the pane) that field's own, not a pane-wide batch, even though
+*   the pane holds every filterable column open at once; each field there
+*   resolves independently, exactly like the toolbar's. `filterVariant:
+*   "singleSelect"` picks exactly one value from that same kind of list —
+*   `SelectMultiple` capped at one value (`closeOnSelect`), in every
+*   surface including the pane, not a native-feeling dropdown — and,
+*   since it closes the instant a pick is made, is never itself deferred
+*   regardless of `filterApplyMode` (no open popover left by the time a
+*   footer could matter). `meta: { filterRender: (props) => node }` is
+*   the escape hatch past those four built-in shapes — a date-range
+*   picker, a slider, a radio group, colored selection badges, anything a
+*   designer's own filter needs — given the same `{ column, value,
+*   onValueChange }` every built-in variant already receives. Deferred
+*   under `filterApplyMode="deferred"` in every surface, not just the
+*   header-icon popover: the inline toolbar button wraps it in a Popover +
+*   the same shared Cancel/Apply footer text filters get there; the pane —
+*   which has no popover for any variant — adds an inline Cancel/Apply row
+*   directly under the rendered content instead. Immediate, every surface
+*   renders it with no extra chrome, same as always.
+* - `meta: { filterOnly: true }` defines a column purely to filter a data
+*   point that isn't shown anywhere in the table — its `header`/`cell`
+*   never render, and unlike a plain hidden column it has no checkbox
+*   anywhere to show it (excluded from the Columns menu entirely, not just
+*   defaulted off), while still showing up as a normal filterable column in
+*   the "All filters" pane — never inline in the toolbar, and never
+*   pinnable there either (no header cell for either to point back at).
+*   Its presence alone forces the pane to exist even when 3 or fewer
+*   *other* columns are filterable, since the pane is its only access
+*   point.
+* - `meta: { filterMergeWith: [...ids] }` folds other columns' filter
+*   fields into *this* column's own header-icon popover instead of each
+*   getting a separate toolbar/pane entry — for a cell whose custom `cell`
+*   already displays more than one filterable value at once (e.g. a name
+*   plus an MRN below it), so filtering either reads as one decision from
+*   one icon. Pairs naturally with `filterOnly` on the merged column(s),
+*   since the value being merged in is usually already folded into this
+*   column's own `cell` rather than shown in a column of its own — but
+*   that's a convention, not a requirement. Each merged field renders
+*   below this column's own (always first, unlabeled), under a divider,
+*   labeled with its own `header`. The icon fills, and the
+*   `filterApplyMode="deferred"` footer commits/discards, based on any of
+*   them having an active filter — not just this column's own.
+* - Column reordering lives only in the Columns menu, not the header
+*   cells themselves — drag a row there (a thin primary-colored line
+*   marks exactly where it'll land) or use its Move left/Move right
+*   buttons — real, individually focusable/clickable buttons, so no
+*   custom keyboard handling is needed for them to be keyboard-operable,
+*   unlike the mouse-only drag. They say left/right, not up/down, even
+*   though the list itself is vertical — that's what the button actually
+*   does to the real table, which is what the label should describe, not
+*   the popover's own incidental layout. Every one of these buttons —
+*   Move left/right, and (once a column can pin) Pin left/Pin right or
+*   "Unpin" using the same icons `columnMenuActions` renders in the
+*   header — is hover/keyboard-focus-revealed by default (see
+*   `revealColumnControlsOnHover`) and carries its own Tooltip labelling
+*   it. Once any column is pinned, the list splits into up to three
+*   sections — pinned left, unpinned/center, pinned right, each separated
+*   by its own divider — mirroring the same grouping the real header/body
+*   cells render in; reordering (drag or the Move buttons) stays confined
+*   to one section at a time, matching what a plain visual drag could
+*   mean anyway. Moving a column *into* or *out of* a pinned section is
+*   what the Pin left/Pin right/Unpin buttons are for instead. Past 10
+*   manageable columns the list grows a search box and scrolls instead of
+*   pushing the menu taller. Visibility, order, and pinning changes apply
+*   live as you make them (so the menu's own rows and the real table
+*   never disagree), but the menu's footer still offers Cancel (reverts
+*   all three to whatever was committed when the menu opened, including
+*   if you dismiss it by clicking outside or Escape) and Apply (disabled
+*   until at least one of the three has actually changed since the menu
+*   opened) — so the whole session reads as one reviewable batch of
+*   changes, not silent live edits. "Reset to defaults" sits in that same
+*   footer, only rendered once order, hidden columns, or pinning have
+*   actually changed from default — a different comparison than Apply's
+*   (against the dev-configured default, not against this session's own
+*   starting point).
+* - `lockedColumnIds` marks a column as fully static: the user can't
+*   reorder it (shows a lock glyph instead of a drag handle, and isn't a
+*   valid drop target) or hide it (the show/hide checkbox doesn't even
+*   render — `enableHiding: false` is forced regardless of what the
+*   column's own `ColumnDef` says). Every injected column (selection,
+*   expand, AI) is always locked. Column-visibility control (the checkbox
+*   on each row) also only lists columns that don't set
+*   `enableHiding: false` themselves — non-hideable columns still show up
+*   for reordering.
+* - Column pinning: set `meta: { pin: "left" | "right" }` on a `ColumnDef`
+*   to seed a column's *initial* pinned side. From there it's live,
+*   user-togglable `@tanstack/react-table` state — wire the exported
+*   `columnMenuActions` into `meta.headerActions` for a ready-made Pin
+*   left/Pin right toggle (see below), or call `column.pin(...)` from any
+*   custom action of your own. Any number of columns can pin to the same
+*   side at once — they render as a contiguous group at that edge, in the
+*   order they were pinned (reorderable afterward from the Columns menu,
+*   confined to that group — see above), with a divider towards whichever
+*   edge actually borders the scrollable/center columns (the left group's
+*   right edge, the right group's left edge) on top of the solid
+*   background every pinned cell already gets so scrolled content doesn't
+*   show through it. Set `meta: { pinLocked: true }` to keep a column's
+*   pin fully dev-controlled with no user-facing toggle (`columnMenuActions`
+*   omits both Pin actions for it — a custom `headerActions` entry could
+*   still call `column.pin()` on it directly, since this only suppresses
+*   the built-in affordance, not the underlying state). A pinned column
+*   renders `position: sticky` at the correct cumulative offset, so it
+*   stays in view while the rest of the table scrolls horizontally —
+*   hover/selected/striped row tinting won't show through a pinned cell
+*   either, a known trade-off of frozen columns. Pinning a real column left
+*   also pulls the injected AI/expand/selection columns (whichever are
+*   present) into that same left-pinned group ahead of it, live — so they
+*   stay genuinely first and sticky too, matching their own "leading slot"
+*   documentation, instead of being pushed behind a real pinned column the
+*   moment one exists. Only kicks in once something's actually pinned left;
+*   otherwise these render exactly as before (unpinned, first in the
+*   unpinned/center group by definition order — no sticky, no divider).
+*   Nothing to configure — this is automatic and not itself user-togglable.
+* - "Sticky first column" isn't its own prop — it's this same pinning
+*   recipe, combined with `lockedColumnIds` so the user can't unpin or
+*   reorder it away from that edge: `defaultColumnPinning={{ left: ["id"] }}`
+*   plus `lockedColumnIds={["id"]}` (see `ColumnManagement`).
+* - `meta.headerActions` adds custom actions to a column's header cell,
+*   next to its sort button and filter icon — hidden until that header
+*   cell is hovered or keyboard-focused (see `revealColumnControlsOnHover`
+*   below), and rendered with the same exported `RowActions` helper row
+*   actions use (inline for ≤2 actions, an overflow menu past that),
+*   uniformly for every column including pinned ones. It's a function of
+*   `(column, table)`, not a static array, so it can reflect live
+*   per-column state. The exported `columnMenuActions` is the ready-made
+*   bundle for this slot — Pin left/Pin right (each becomes "Unpin" once
+*   pinned to that side, and both are omitted for a `pinLocked` column),
+*   Hide column, and Fit to content, each omitted when the column can't
+*   do it. Being 3-4 actions, it renders as a single overflow "more" menu
+*   in practice — the same shape as a plain custom `headerActions`
+*   function returning your own `RowAction[]` would, if you need
+*   something `columnMenuActions` doesn't cover.
+* - `revealColumnControlsOnHover` (default `true`) is the one knob for
+*   whether the filter icon, `headerActions`/`columnMenuActions`, and the
+*   Columns menu's own pin/move controls stay hidden until hovered or
+*   keyboard-focused, or render always-visible — set `false` for a
+*   consumer whose final UX calls for every control visible up front.
+* - `enableColumnResizing` adds a drag handle to every resizable column's
+*   right border (`ColumnDef.enableResizing: false` exempts one; injected
+*   columns already are). It's also what unlocks `columnMenuActions`' "Fit
+*   to content" — that action measures every currently-rendered cell in
+*   the column (this page's rows, not the whole dataset) via `scrollWidth`
+*   and sets the column to the widest one found.
+* - Bulk actions while any row is selected land in one of two places,
+*   never both:
+*   - `onLoadMore` (infinite scroll, no footer): the toolbar stays
+*     mounted and interactive (search, filters) — searching/filtering
+*     the rows loaded so far while some of them are selected is exactly
+*     the "load more, then narrow down what's loaded" flow this mode is
+*     for. Instead, a floating bar hovers over the table's own bottom
+*     edge (never the raw viewport). Three sections divided by a line:
+*     count + "Select all" (every filtered row across everything loaded
+*     so far, not just what's rendered), `renderBulkActions`'s own
+*     product-configured actions in the middle, and a close button that
+*     clears the selection. Scrolling to the last row while any row is
+*     selected reveals extra bottom padding sized to the bar's own
+*     height — otherwise the last row(s) would stay hidden behind it
+*     permanently.
+*   - Paginated (a real footer): no floating bar, and the toolbar's own
+*     search/filter controls are swapped out in place for the selection
+*     itself — count, "Select all" (every filtered row across every
+*     page, not just the current one — same as infinite scroll's own),
+*     `renderBulkActions`'s actions, then a close button. Search/filters
+*     act on rows that may not even be the ones selected once paging is
+*     involved, so showing both the selection and a still-live search
+*     box read as two competing toolbars — this is the table's original
+*     selection behavior, kept for exactly that reason.
+* - `getRowId` (e.g. `(row) => row.id`) gives each row a stable identity
+*   across a sort/filter/pagination change, passed straight through to
+*   `@tanstack/react-table` — without it, a row's identity defaults to its
+*   index, which is meaningless the moment the row set changes underneath
+*   it (filtering 100 rows down to 30 shouldn't treat "row 3" before and
+*   after as the same thing unless it actually is).
+* - Footer is a full-width bar with the current range/total first, then
+*   "Items per page" (`pageSizeOptions`, default `[10, 20, 30]`; set
+*   `showPageSizeSelector={false}` to drop it — a design call for tables
+*   where the consumer shouldn't be choosing page size, not a user
+*   preference), and — past one page — a jump-to-page select plus
+*   Previous/Next. It carries the same
+*   edge-to-edge treatment as the toolbar and `Table` itself, but on all
+*   three sides it borders — left, right, *and* bottom — so on a Card it
+*   reads as that Card's own footer (same border-t/bg-muted/rounded-b-xl
+*   look as a real CardFooter, and it borrows CardFooter's own
+*   `data-slot` so a surrounding Card zeroes its bottom padding for it
+*   too).
+* - `onLoadMore` switches to infinite scroll instead of pagination: every
+*   row in `data` renders (no client-side page slicing), there's no footer
+*   at all, and the table scrolls inside its own `maxHeight`-bounded
+*   container (default `32rem`) instead of the page — the header (and any
+*   pinned columns) stay locked in place via `position: sticky` while the
+*   body scrolls. `onLoadMore` fires once an invisible sentinel below the
+*   last row scrolls near-into view. Fetch the next page and append it to
+*   `data` yourself; `hasMore` stops rendering the sentinel once there's
+*   nothing left, and `loadingMore` renders 3 skeleton rows below the last
+*   real one — same shape as `loading`, not a spinner — while a fetch is
+*   in flight. Sorting/filtering still run client-side over whatever's
+*   currently loaded — an inherent limitation with partial data, not
+*   something this mode solves.
+*
+* USAGE
+* const columns: ColumnDef<Invoice>[] = [
+*   { accessorKey: "id", header: "Invoice" },
+*   { accessorKey: "amount", header: "Amount" },
+*   { accessorKey: "status", header: "Status", meta: { filterVariant: "select" } },
+* ]
+*
+* <DataTable columns={columns} data={invoices} aria-label="Invoices" />
+*
+* // Selectable rows with a bulk-delete action — the count (swapped
+* // into the toolbar here, since this table paginates), "Select all",
+* // and the close/clear button are all built in; this only fills the
+* // actions themselves
+* <DataTable
+*   columns={columns}
+*   data={invoices}
+*   enableRowSelection
+*   renderBulkActions={(selected, clear) => (
+*     <Button size="sm" variant="ghost" onClick={() => { onDelete(selected); clear() }}>
+*       <TrashIcon />
+*       Delete
+*     </Button>
+*   )}
+* />
+*
+* // Row actions (inline for ≤2, overflow menu for >2)
+* const withActions: ColumnDef<Invoice>[] = [
+*   ...columns,
+*   {
+*     id: "actions",
+*     header: "",
+*     size: 72,
+*     enableSorting: false,
+*     enableHiding: false,
+*     enableColumnFilter: false,
+*     cell: ({ row }) => (
+*       <RowActions
+*         actions={[
+*           { label: "Edit", icon: PencilIcon, onClick: () => onEdit(row.original) },
+*           { label: "Delete", icon: TrashIcon, variant: "destructive", onClick: () => onDelete(row.original) },
+*         ]}
+*       />
+*     ),
+*   },
+* ]
+*
+* // Header-cell actions: a fully custom one, for anything columnMenuActions
+* // doesn't cover
+* const withHeaderActions: ColumnDef<Invoice>[] = columns.map((col) =>
+*   col.id === "status"
+*     ? {
+*         ...col,
+*         meta: {
+*           ...col.meta,
+*           headerActions: () => [
+*             { label: "Search", icon: SearchIcon, onClick: () => openColumnSearch("status") },
+*           ],
+*         },
+*       }
+*     : col
+* )
+*
+* // Column resizing (drag handles) plus the ready-made Pin left/Pin
+* // right/Hide/Fit-to-content menu on every column
+* const withColumnMenu: ColumnDef<Invoice>[] = columns.map((col) => ({
+*   ...col,
+*   meta: { ...col.meta, headerActions: columnMenuActions },
+* }))
+* <DataTable columns={withColumnMenu} data={invoices} enableColumnResizing />
+*
+* // Right-align a quantitative column — header and cells both flip
+* const withAlignedAmount: ColumnDef<Invoice>[] = columns.map((col) =>
+*   col.id === "amount"
+*     ? { ...col, meta: { ...col.meta, align: "right" } }
+*     : col
+* )
+*
+* // Expandable detail row, striping, and column dividers
+* <DataTable
+*   columns={columns}
+*   data={invoices}
+*   renderExpandedRow={(invoice) => <InvoiceDetailCard invoice={invoice} />}
+*   striped
+*   cellDividers
+* />
+*
+* // AI presence at every level (except whole-table — wrap in a Card for that, see below)
+* <DataTable
+*   columns={columns}
+*   data={invoices}
+*   aiAction={{ label: "Summarize", onClick: () => runAISummary(invoices) }}
+*   aiRowPredicate={(invoice) => invoice.flaggedByAI}
+*   aiColumnIds={["amount"]}
+*   aiCellPredicate={(invoice, columnId) => columnId === "customer" && invoice.customerSuggestedByAI}
+* />
+*
+* // Whole-table AI presence: the table just sits inside an AI Card (the
+* // same recipe AI/Card's "BoundaryTreatments" story uses) plus a soft glow rising from
+* // the Card's own bottom edge (bg-ai-glow-bottom, a plain Card className) —
+* // AILabel in its top corner, never on DataTable's own surface
+* <div className="rounded-xl bg-gradient-to-r from-ai-wash to-ai-grad-from p-px">
+*   <Card className="w-full bg-ai-glow-bottom">
+*     <CardHeader>
+*       <CardTitle>Invoices</CardTitle>
+*       <CardAction>
+*         <AILabel>
+*           <AILabelTrigger />
+*           <AILabelContent>...</AILabelContent>
+*         </AILabel>
+*       </CardAction>
+*     </CardHeader>
+*     <CardContent>
+*       <DataTable columns={columns} data={invoices} />
+*     </CardContent>
+*   </Card>
+* </div>
+*
+* // Loading and error states
+* <DataTable columns={columns} data={[]} loading />
+* <DataTable columns={columns} data={[]} error errorDescription="Couldn't reach the server." />
+*
+* // Clickable rows (e.g. navigate to a detail view), a locked first column,
+* // and a wider items-per-page range
+* <DataTable
+*   columns={columns}
+*   data={invoices}
+*   onRowClick={(invoice) => router.push(`/invoices/${invoice.id}`)}
+*   lockedColumnIds={["id"]}
+*   pageSizeOptions={[10, 25, 50]}
+* />
+*
+* // Drop the "Items per page" control from the static footer — page size
+* // stays fixed at whatever `pageSize` is, not something the user picks
+* <DataTable columns={columns} data={invoices} showPageSizeSelector={false} />
+*
+* // Infinite scroll instead of pagination — no footer
+* const [invoices, setInvoices] = useState(firstPage)
+* const [loadingMore, setLoadingMore] = useState(false)
+* <DataTable
+*   columns={columns}
+*   data={invoices}
+*   hasMore={invoices.length < total}
+*   loadingMore={loadingMore}
+*   onLoadMore={async () => {
+*     setLoadingMore(true)
+*     setInvoices((current) => [...current, ...await fetchNextPage(current.length)])
+*     setLoadingMore(false)
+*   }}
+* />
+*/
+//#endregion
+export { DataTable, HighlightMatch, RowActions, columnMenuActions };
+
+//# sourceMappingURL=data-table.js.map