@vamos-ui/react 0.0.0-stage → 0.2.0

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

@@ -0,0 +1,1259 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from "react";
+import { columnOrderingFeature, columnPinningFeature, columnResizingFeature, columnSizingFeature, columnVisibilityFeature, createPaginatedRowModel, createSortedRowModel, functionalUpdate, rowPaginationFeature, rowSortingFeature, tableFeatures, useTable, } from "@tanstack/react-table";
+import { useVirtualizer } from "@tanstack/react-virtual";
+import { ArrowDown, ArrowDownToLine, ArrowUp, ChevronDown, ChevronUp, ChevronsUpDown, Columns3, Download, EyeOff, ListFilter, MoreHorizontal, Pin, PinOff, RotateCcw, Search, X, } from "lucide-react";
+import { cn } from "../lib/cn.js";
+import { useLabels } from "../lib/labels.js";
+import { useFormat, useLocale } from "../lib/locale.js";
+import { useLink } from "../lib/provider.js";
+import { getCollator } from "../lib/text.js";
+import { useControllableState, useIsomorphicLayoutEffect } from "../lib/use-controllable-state.js";
+import { useContainerWidth } from "../lib/use-container-width.js";
+import { controlVariants } from "../lib/variants.js";
+import { Alert } from "../components/alert.js";
+import { ConfirmDialog } from "../components/alert-dialog.js";
+import { Avatar } from "../components/avatar.js";
+import { Badge } from "../components/badge.js";
+import { Button } from "../components/button.js";
+import { Checkbox } from "../components/checkbox.js";
+import { ActionMenu, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from "../components/dropdown-menu.js";
+import { EmptyState } from "../components/empty-state.js";
+import { Input } from "../components/input.js";
+import { CursorPagination, PaginationBar } from "../components/pagination.js";
+import { Popover, PopoverContent, PopoverTrigger } from "../components/popover.js";
+import { Skeleton } from "../components/skeleton.js";
+import { Spinner } from "../components/spinner.js";
+import { Switch } from "../components/switch.js";
+import { Table, TableBody, TableCaption, TableCell, TableContainer, TableHead, TableHeader, TableRow } from "../components/table.js";
+import { toast } from "../components/toast.js";
+import { FilterBar } from "./filter-bar.js";
+import { applyFilters, hasActiveFilters, searchRows } from "./filter-fns.js";
+import { SavedViews } from "./saved-views.js";
+import { csvDelimiter, downloadCsv, toCsv } from "./csv.js";
+import { applyViewState, toViewState } from "./view-state.js";
+import { createHistoryAdapter, mergeListStateIntoSearch, parseListState } from "./url-state.js";
+import { createListState, emptyFilterGroup, emptySelection, isCursorPage, isRowSelected, selectionCount, } from "./types.js";
+/* ------------------------------------------------------------------ */
+/* Labels                                                              */
+/* ------------------------------------------------------------------ */
+export const dataTableLabels = {
+    search: "Search",
+    searchPlaceholder: "Search…",
+    selectPageRows: "Select all rows on this page",
+    selectRow: "Select {name}",
+    selectedCount: "{count} selected",
+    selectedOnPage: "{count} on this page",
+    selectPage: "Select all {count} on this page",
+    selectAllMatching: "Select all {count}",
+    allSelected: "All {count} selected",
+    clearSelection: "Clear selection",
+    clear: "Clear",
+    selectionReset: "Selection cleared because the filters changed.",
+    bulkActions: "Bulk actions",
+    moreActions: "More actions",
+    rowActions: "Actions for {name}",
+    view: "View",
+    viewOptions: "View options",
+    columns: "Columns",
+    findColumn: "Find a column",
+    density: "Density",
+    compact: "Compact",
+    comfortable: "Comfortable",
+    spacious: "Spacious",
+    resetColumns: "Reset to default",
+    moveUp: "Move {name} up",
+    moveDown: "Move {name} down",
+    sortAsc: "Sort ascending",
+    sortDesc: "Sort descending",
+    clearSort: "Clear sort",
+    sortBy: "Sort by {name}",
+    sortOrder: "sort {index}",
+    pinStart: "Pin to start",
+    pinEnd: "Pin to end",
+    unpin: "Unpin",
+    hide: "Hide column",
+    filterBy: "Filter by this column",
+    columnMenu: "{name} column options",
+    resize: "Resize {name} column",
+    export: "Export",
+    exportPage: "Rows on this page",
+    exportSelected: "Selected rows",
+    exportAll: "All rows",
+    exportAllServer: "All matching rows",
+    exportStarted: "Export started — you’ll get the file shortly.",
+    exported: "{count, plural, one {# row exported} other {# rows exported}}",
+    emptyTitle: "Nothing here yet",
+    emptyDescription: "Records you add will show up here.",
+    noResultsTitle: "No results for these filters",
+    noResultsDescription: "Try a different search or remove a filter.",
+    clearFilters: "Clear filters",
+    errorTitle: "Couldn’t load the list",
+    retry: "Try again",
+    loading: "Loading…",
+    refreshing: "Updating the list",
+    loadMore: "Load more",
+    noMore: "You’ve reached the end.",
+    edit: "{column}: {value}. Edit",
+    editHint: "Press Enter to save, Escape to cancel.",
+    saving: "Saving…",
+    saveFailed: "Couldn’t save {column}. The previous value is back.",
+    invalid: "Invalid value",
+    yes: "Yes",
+    no: "No",
+    none: "—",
+    cancel: "Cancel",
+    bulkDone: "{action}: {count, plural, one {# record} other {# records}}",
+    bulkFailed: "{action} failed. Nothing was changed.",
+    undo: "Undo",
+    undone: "Undone",
+    rowCount: "{count, plural, one {# row} other {# rows}}",
+};
+/* ------------------------------------------------------------------ */
+/* Column helpers                                                      */
+/* ------------------------------------------------------------------ */
+const SELECT = "__select";
+const ACTIONS = "__actions";
+const DEFAULT_SIZE = { text: 220, number: 120, currency: 140, percent: 110, date: 140, datetime: 180, enum: 150, boolean: 110, user: 200, tags: 220 };
+const END_TYPES = new Set(["number", "currency", "percent"]);
+export function readColumnValue(col, row) {
+    if (!col.accessor)
+        return undefined;
+    return typeof col.accessor === "function" ? col.accessor(row) : row[col.accessor];
+}
+const columnAlign = (col) => col.align ?? (END_TYPES.has(col.type ?? "text") ? "end" : "start");
+/** Filter bar fields from Data Table columns (`filter: false` opts out; display-only columns are skipped). */
+export function filterFieldsFromColumns(cols) {
+    return cols
+        .filter((c) => c.accessor && c.filter !== false)
+        .map((c) => ({
+        field: c.id,
+        label: c.header,
+        type: c.type ?? "text",
+        options: c.options,
+        currency: c.currency,
+        accessor: (row) => readColumnValue(c, row),
+        ...(c.filter || {}),
+    }));
+}
+const textOf = (v) => {
+    if (v === null || v === undefined)
+        return "";
+    if (Array.isArray(v))
+        return v.map(textOf).join(" ");
+    if (typeof v === "object") {
+        const o = v;
+        return String(o.name ?? o.label ?? o.title ?? o.id ?? "");
+    }
+    return String(v);
+};
+/* ------------------------------------------------------------------ */
+/* TanStack v9 setup (isolated here)                                   */
+/* ------------------------------------------------------------------ */
+const features = tableFeatures({
+    rowSortingFeature,
+    rowPaginationFeature,
+    columnVisibilityFeature,
+    columnOrderingFeature,
+    columnSizingFeature,
+    columnResizingFeature,
+    columnPinningFeature,
+    sortedRowModel: createSortedRowModel(),
+    paginatedRowModel: createPaginatedRowModel(),
+});
+const DataTableContext = React.createContext(null);
+/**
+ * The table's state and helpers, for custom layouts and bindings inside `<DataTable>`.
+ *
+ * ```tsx
+ * const { state, selection, exportCsv, filterBarProps } = useDataTable<Contact>();
+ * ```
+ */
+export function useDataTable() {
+    const ctx = React.useContext(DataTableContext);
+    if (!ctx)
+        throw new Error("useDataTable must be used inside <DataTable>.");
+    return ctx;
+}
+/* ------------------------------------------------------------------ */
+/* Storage                                                             */
+/* ------------------------------------------------------------------ */
+function readPrefs(key) {
+    try {
+        const raw = window.localStorage.getItem(`vamos-ui:dt:${key}`);
+        return raw ? JSON.parse(raw) : null;
+    }
+    catch {
+        return null;
+    }
+}
+function writePrefs(key, v) {
+    try {
+        window.localStorage.setItem(`vamos-ui:dt:${key}`, JSON.stringify(v));
+    }
+    catch {
+        /* storage blocked */
+    }
+}
+/* ------------------------------------------------------------------ */
+/* DataTable                                                           */
+/* ------------------------------------------------------------------ */
+const sameJSON = (a, b) => JSON.stringify(a) === JSON.stringify(b);
+/**
+ * The backbone of every list screen: sorting, search, filters, column management, selection and
+ * bulk actions, inline editing, pagination, server mode, URL state, mobile cards and CSV.
+ * Built on TanStack Table v9 — `useDataTable().table` is the escape hatch.
+ *
+ * ```tsx
+ * <DataTable caption="Contacts" columns={columns} data={contacts} getRowId={(c) => c.id} selectable bulkActions={actions} />
+ * ```
+ */
+export function DataTable(props) {
+    const { columns, data, getRowId, mode = "client", rowCount, state: stateProp, defaultState, onStateChange, urlState, storageKey, pagination = "pages", pageSizes = [25, 50, 100], selectable, selection: selectionProp, defaultSelection, onSelectionChange, rowSelectable, onCellEdit, getRowLabel, mobile = "cards", density = "inherit", variant = "card", shortcuts = true, labels, me, children, className, caption: _caption, showCaption: _showCaption, loading: _loading, error: _error, onLoadMore: _onLoadMore, hasMore: _hasMore, cursors: _cursors, virtual: _virtual, bulkActions: _bulk, onRowClick: _orc, rowHref: _rh, rowActions: _ra, readOnly: _ro, navigation: _nav, empty: _empty, noResults: _nr, export: _export, toolbar, ...rest } = props;
+    const t = useLabels("dataTable", dataTableLabels, labels);
+    const { locale, timeZone, dir } = useLocale();
+    const server = mode === "server";
+    /* ---- columns ---- */
+    const defaultColumns = React.useMemo(() => {
+        const visible = {};
+        for (const c of columns)
+            if (c.defaultVisible === false)
+                visible[c.id] = false;
+        return { visible, order: columns.map((c) => c.id), sizing: {}, pinned: { start: [], end: [] }, ...defaultState?.columns };
+    }, [columns, defaultState?.columns]);
+    const titleColumn = columns.find((c) => c.mobile === "title") ?? columns.find((c) => c.accessor) ?? columns[0];
+    const fields = React.useMemo(() => filterFieldsFromColumns(columns), [columns]);
+    /* ---- list state (any subset can be controlled) ---- */
+    const base = React.useMemo(() => createListState({ ...defaultState, columns: defaultColumns }, pageSizes[0] ?? 25), [defaultState, defaultColumns, pageSizes]);
+    const [internal, setInternal] = React.useState(base);
+    const state = React.useMemo(() => ({ ...internal, ...stateProp }), [internal, stateProp]);
+    const stateRef = React.useRef(state);
+    stateRef.current = state;
+    const requestId = React.useRef(0);
+    const onStateChangeRef = React.useRef(onStateChange);
+    onStateChangeRef.current = onStateChange;
+    const setState = React.useCallback((patch, reason = "reset") => {
+        const prev = stateRef.current;
+        let next = { ...prev, ...patch };
+        // A new query starts at the first page.
+        if ((reason === "search" || reason === "filters" || reason === "sort" || reason === "pageSize") && !("page" in patch && reason === "pageSize")) {
+            next = { ...next, page: isCursorPage(next.page) ? { cursor: null, size: next.page.size } : { index: 0, size: next.page.size } };
+        }
+        if (sameJSON(prev, next))
+            return;
+        stateRef.current = next;
+        setInternal(next);
+        requestId.current += 1;
+        onStateChangeRef.current?.(next, reason, requestId.current);
+    }, []);
+    /* ---- URL state ---- */
+    const urlOptions = urlState ? (urlState === true ? {} : urlState) : null;
+    const adapter = React.useMemo(() => (urlOptions ? (urlOptions.adapter ?? createHistoryAdapter()) : null), [urlOptions?.adapter, Boolean(urlOptions)]); // eslint-disable-line react-hooks/exhaustive-deps
+    // "pending": the URL was just read; skip one write so the pre-parse state never overwrites it.
+    const urlReady = React.useRef(false);
+    React.useEffect(() => {
+        if (!adapter || !urlOptions)
+            return;
+        const load = () => {
+            const parsed = parseListState(adapter.read(), { ...urlOptions, fields, defaults: { ...base, columns: stateRef.current.columns }, pageSizes });
+            setState({ q: parsed.q, filters: parsed.filters, sort: parsed.sort, page: parsed.page, view: parsed.view, ...(urlOptions.density ? { density: parsed.density } : {}) }, "reset");
+        };
+        load();
+        urlReady.current = "pending";
+        return adapter.subscribe(load);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [adapter]);
+    React.useEffect(() => {
+        if (!adapter || !urlOptions || !urlReady.current)
+            return;
+        if (urlReady.current === "pending") {
+            urlReady.current = true;
+            return;
+        }
+        adapter.write(mergeListStateIntoSearch(adapter.read(), state, { ...urlOptions, defaults: base }), urlOptions.history ?? "replace");
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [adapter, state.q, JSON.stringify(state.filters), JSON.stringify(state.sort), JSON.stringify(state.page), state.view, state.density]);
+    /* ---- column prefs in localStorage ---- */
+    const prefsLoaded = React.useRef(false);
+    React.useEffect(() => {
+        if (!storageKey)
+            return;
+        const prefs = readPrefs(storageKey);
+        prefsLoaded.current = true;
+        if (prefs && !stateRef.current.view)
+            setState({ columns: { ...stateRef.current.columns, ...prefs.columns }, density: prefs.density ?? stateRef.current.density }, "columns");
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [storageKey]);
+    React.useEffect(() => {
+        if (storageKey && prefsLoaded.current)
+            writePrefs(storageKey, { columns: state.columns, density: state.density });
+    }, [storageKey, state.columns, state.density]);
+    /* ---- selection ---- */
+    const [selection, setSelectionRaw] = useControllableState({ value: selectionProp, defaultValue: defaultSelection ?? emptySelection(), onChange: onSelectionChange, name: "DataTable" });
+    const [announcement, setAnnouncement] = React.useState("");
+    const announce = React.useCallback((msg) => setAnnouncement((prev) => (prev === msg ? `${msg} ` : msg)), []);
+    const queryKey = JSON.stringify([state.q, state.filters]);
+    const lastQueryKey = React.useRef(queryKey);
+    React.useEffect(() => {
+        if (lastQueryKey.current === queryKey)
+            return;
+        lastQueryKey.current = queryKey;
+        if (selection.mode === "all") {
+            setSelectionRaw(emptySelection());
+            announce(t("selectionReset"));
+        }
+    }, [queryKey, selection.mode, setSelectionRaw, announce, t]);
+    /* ---- client pipeline: search → filters ---- */
+    const colById = React.useMemo(() => new Map(columns.map((c) => [c.id, c])), [columns]);
+    const searchable = React.useMemo(() => columns.filter((c) => c.accessor && (c.searchable ?? ["text", "enum", "user", "tags", undefined].includes(c.type))), [columns]);
+    const optionLabel = React.useCallback((c, v) => (c.options ? (c.options.find((o) => o.value === v)?.label ?? textOf(v)) : textOf(v)), []);
+    const filteredRows = React.useMemo(() => {
+        if (server)
+            return data;
+        const searched = searchRows(data, state.q, (row) => searchable.map((c) => optionLabel(c, readColumnValue(c, row))).join(" "), locale);
+        return applyFilters(searched, state.filters, fields, { locale, timeZone, me: me?.id });
+    }, [server, data, state.q, state.filters, searchable, fields, locale, timeZone, me?.id, optionLabel]);
+    /* ---- TanStack ---- */
+    const collator = React.useMemo(() => getCollator(locale, { numeric: true, sensitivity: "base" }), [locale]);
+    const tsColumns = React.useMemo(() => {
+        const out = [];
+        if (selectable)
+            out.push({ id: SELECT, header: "", size: 44, minSize: 44, maxSize: 44, enableSorting: false, enableHiding: false, enableResizing: false, enablePinning: false });
+        for (const c of columns) {
+            const type = c.type ?? "text";
+            const optionIndex = c.options ? new Map(c.options.map((o, i) => [o.value, i])) : null;
+            const sortKey = (row) => {
+                if (c.sortValue)
+                    return c.sortValue(row) ?? null;
+                const v = readColumnValue(c, row);
+                if (v === null || v === undefined || v === "")
+                    return null;
+                if (END_TYPES.has(type))
+                    return Number(v);
+                if (type === "boolean")
+                    return v ? 1 : 0;
+                if (type === "enum" && optionIndex)
+                    return optionIndex.get(String(v)) ?? Number.MAX_SAFE_INTEGER;
+                if (type === "date" || type === "datetime")
+                    return typeof v === "string" && /^\d{4}-\d{2}-\d{2}$/.test(v) ? v : new Date(v).getTime();
+                return textOf(v);
+            };
+            out.push({
+                id: c.id,
+                header: c.header,
+                accessorFn: (row) => readColumnValue(c, row),
+                size: c.size ?? DEFAULT_SIZE[type],
+                minSize: c.minSize ?? 72,
+                maxSize: c.maxSize ?? 640,
+                enableSorting: c.sortable ?? Boolean(c.accessor || c.sortValue),
+                enableHiding: c.hideable ?? c !== titleColumn,
+                enableResizing: c.resizable ?? true,
+                enablePinning: c.pinnable ?? true,
+                sortUndefined: "last",
+                sortFn: (a, b) => {
+                    const x = sortKey(a.original);
+                    const y = sortKey(b.original);
+                    if (x === null && y === null)
+                        return 0;
+                    if (x === null)
+                        return 1;
+                    if (y === null)
+                        return -1;
+                    if (typeof x === "number" && typeof y === "number")
+                        return x - y;
+                    return collator.compare(String(x), String(y));
+                },
+            });
+        }
+        if (props.rowActions)
+            out.push({ id: ACTIONS, header: "", size: 52, minSize: 52, maxSize: 52, enableSorting: false, enableHiding: false, enableResizing: false, enablePinning: false });
+        return out;
+    }, [columns, selectable, props.rowActions, collator, titleColumn]);
+    const order = React.useMemo(() => {
+        const known = state.columns.order.filter((id) => colById.has(id));
+        const rest = columns.map((c) => c.id).filter((id) => !known.includes(id));
+        return [...(selectable ? [SELECT] : []), ...known, ...rest, ...(props.rowActions ? [ACTIONS] : [])];
+    }, [state.columns.order, colById, columns, selectable, props.rowActions]);
+    const pinning = React.useMemo(() => {
+        const start = state.columns.pinned.start.filter((id) => colById.has(id));
+        const end = state.columns.pinned.end.filter((id) => colById.has(id));
+        return { start: start.length && selectable ? [SELECT, ...start] : start, end: props.rowActions ? [...end, ACTIONS] : end };
+    }, [state.columns.pinned, colById, selectable, props.rowActions]);
+    const manualPaging = server || pagination !== "pages" || isCursorPage(state.page);
+    const pageState = { pageIndex: isCursorPage(state.page) ? 0 : state.page.index, pageSize: state.page.size };
+    const update = (current, updater) => functionalUpdate(updater, current);
+    const table = useTable({
+        features,
+        columns: tsColumns,
+        data: filteredRows,
+        getRowId: (row) => getRowId(row),
+        state: {
+            sorting: state.sort,
+            pagination: pageState,
+            columnVisibility: state.columns.visible,
+            columnOrder: order,
+            columnSizing: state.columns.sizing,
+            columnPinning: pinning,
+        },
+        onSortingChange: (u) => setState({ sort: update(stateRef.current.sort, u) }, "sort"),
+        onPaginationChange: (u) => {
+            const s = stateRef.current;
+            const prev = { pageIndex: isCursorPage(s.page) ? 0 : s.page.index, pageSize: s.page.size };
+            const next = update(prev, u);
+            setState({ page: { index: next.pageIndex, size: next.pageSize } }, next.pageSize !== prev.pageSize ? "pageSize" : "page");
+        },
+        onColumnVisibilityChange: (u) => setState({ columns: { ...stateRef.current.columns, visible: update(stateRef.current.columns.visible, u) } }, "columns"),
+        onColumnOrderChange: (u) => {
+            const next = update(order, u).filter((id) => id !== SELECT && id !== ACTIONS);
+            setState({ columns: { ...stateRef.current.columns, order: next } }, "columns");
+        },
+        onColumnSizingChange: (u) => setState({ columns: { ...stateRef.current.columns, sizing: update(stateRef.current.columns.sizing, u) } }, "columns"),
+        onColumnPinningChange: (u) => {
+            const next = update(pinning, u);
+            setState({ columns: { ...stateRef.current.columns, pinned: { start: next.start.filter((id) => id !== SELECT), end: next.end.filter((id) => id !== ACTIONS) } } }, "columns");
+        },
+        manualSorting: server,
+        manualPagination: manualPaging,
+        rowCount: server ? (rowCount ?? data.length) : undefined,
+        autoResetPageIndex: false,
+        enableSortingRemoval: true,
+        enableMultiSort: true,
+        sortDescFirst: false,
+        columnResizeMode: "onChange",
+        columnResizeDirection: dir,
+    });
+    const pageRowModels = table.getRowModel().rows;
+    const pageRows = React.useMemo(() => pageRowModels.map((r) => r.original), [pageRowModels]);
+    const total = server ? (rowCount ?? data.length) : filteredRows.length;
+    // Clamp the page when the list shrinks (client).
+    React.useEffect(() => {
+        if (server || manualPaging || isCursorPage(state.page))
+            return;
+        const pages = Math.max(1, Math.ceil(total / state.page.size));
+        if (state.page.index > pages - 1)
+            setState({ page: { index: pages - 1, size: state.page.size } }, "page");
+    }, [server, manualPaging, total, state.page, setState]);
+    /* ---- width / layout ---- */
+    const { ref: measureRef, width } = useContainerWidth();
+    const narrow = width !== undefined && width < 640;
+    const cards = narrow && mobile === "cards";
+    /* ---- inline edit ---- */
+    const [editing, setEditing] = React.useState(null);
+    const [cellStatus, setCellStatus] = React.useState({});
+    React.useEffect(() => {
+        // New data from the parent replaces optimistic values that were saved.
+        setCellStatus((prev) => {
+            const next = {};
+            let changed = false;
+            for (const [k, v] of Object.entries(prev)) {
+                if (v.status === "saved")
+                    changed = true;
+                else
+                    next[k] = v;
+            }
+            return changed ? next : prev;
+        });
+    }, [data]);
+    const rowLabel = React.useCallback((row) => (getRowLabel ? getRowLabel(row) : titleColumn ? textOf(readColumnValue(titleColumn, row)) : getRowId(row)), [getRowLabel, titleColumn, getRowId]);
+    const commitEdit = React.useCallback((row, rowId, col, value) => {
+        const key = `${rowId}:${col.id}`;
+        setEditing(null);
+        if (sameJSON(value, readColumnValue(col, row)))
+            return;
+        setCellStatus((s) => ({ ...s, [key]: { value, status: "saving" } }));
+        Promise.resolve(onCellEdit?.({ row, rowId, columnId: col.id, value })).then(() => setCellStatus((s) => ({ ...s, [key]: { value, status: "saved" } })), (err) => {
+            const message = err instanceof Error && err.message ? err.message : t("saveFailed", { column: col.header });
+            setCellStatus((s) => ({ ...s, [key]: { value, status: "error", error: message } }));
+            announce(message);
+        });
+    }, [onCellEdit, t, announce]);
+    /* ---- misc ---- */
+    const searchRef = React.useRef(null);
+    const [filterBound, setFilterBound] = React.useState(false);
+    const [filterRequest, setFilterRequest] = React.useState(null);
+    const lastClicked = React.useRef(null);
+    const isSelectable = React.useCallback((row) => (rowSelectable ? rowSelectable(row) : true), [rowSelectable]);
+    const hasQuery = state.q.trim() !== "" || hasActiveFilters(state.filters);
+    const orderedColumns = [...table.getStartVisibleLeafColumns(), ...table.getCenterVisibleLeafColumns(), ...table.getEndVisibleLeafColumns()].filter((c) => {
+        if (!(narrow && mobile === "priority"))
+            return true;
+        const p = colById.get(c.id)?.priority;
+        return !(p === 3 || (p === 2 && width !== undefined && width < 480));
+    });
+    if (process.env.NODE_ENV !== "production" && !props.virtual && pageRows.length > 300) {
+        warnOnce("[vamos-ui] DataTable is rendering more than 300 rows without `virtual`. Turn on `virtual` or paginate.");
+    }
+    const exportCsv = (o = {}) => {
+        const scope = o.scope ?? "all";
+        const formatted = o.formatted ?? props.export?.formatted ?? false;
+        const filename = o.filename ?? props.export?.filename ?? "export";
+        let rows;
+        if (scope === "page")
+            rows = pageRows;
+        else if (scope === "selected")
+            rows = (server ? data : filteredRows).filter((r) => isRowSelected(selection, getRowId(r)));
+        else {
+            if (server && props.export?.onServerExport) {
+                void props.export.onServerExport(stateRef.current);
+                toast.info(t("exportStarted"));
+                return;
+            }
+            rows = server ? data : table.getPrePaginatedRowModel().rows.map((r) => r.original);
+        }
+        const cols = orderedColumns.map((c) => colById.get(c.id)).filter((c) => Boolean(c && c.accessor));
+        const matrix = [cols.map((c) => c.header)];
+        for (const row of rows)
+            matrix.push(cols.map((c) => exportCell(c, row, formatted, formatRef.current)));
+        downloadCsv(filename, toCsv(matrix, { locale, delimiter: csvDelimiter(locale) }));
+        announce(t("exported", { count: rows.length }));
+    };
+    const format = useFormat();
+    const formatRef = React.useRef(format);
+    formatRef.current = format;
+    const ctx = {
+        table,
+        state,
+        setState,
+        selection,
+        setSelection: setSelectionRaw,
+        columns,
+        fields,
+        pageRows,
+        filteredRows,
+        total,
+        filterBarProps: {
+            fields,
+            value: state.filters,
+            onChange: (g) => setState({ filters: g }, "filters"),
+            q: state.q,
+            onQChange: (q) => setState({ q }, "search"),
+            addRequest: filterRequest,
+            resultCount: total,
+            me,
+        },
+        savedViewsBinding: (views) => ({
+            activeId: state.view ?? null,
+            current: toViewState(state),
+            onSelect: (id) => setState(applyViewState(stateRef.current, views.find((v) => v.id === id)?.state, id, { ...defaultState, columns: defaultColumns }), "view"),
+            onReset: () => {
+                const id = stateRef.current.view ?? null;
+                setState(applyViewState(stateRef.current, views.find((v) => v.id === id)?.state, id, { ...defaultState, columns: defaultColumns }), "view");
+            },
+        }),
+        exportCsv,
+        requestFilter: (field) => setFilterRequest({ field, key: Date.now() }),
+        props,
+        internal: {
+            t,
+            width,
+            narrow,
+            cards,
+            searchRef,
+            filterBound,
+            setFilterBound,
+            editing,
+            setEditing,
+            cellStatus,
+            commitEdit,
+            announce,
+            rowLabel,
+            titleColumn,
+            orderedColumns,
+            defaultColumns,
+            lastClicked,
+            isSelectable,
+            hasQuery,
+            requestId,
+            filterRequest,
+        },
+    };
+    const onKeyDown = (e) => {
+        if (!shortcuts || e.defaultPrevented)
+            return;
+        const target = e.target;
+        const typing = target.closest("input, textarea, select, [contenteditable=true], [role=dialog], [role=menu], [role=listbox]");
+        if (e.key === "Escape" && selectionCount(selection) > 0 && !typing) {
+            e.preventDefault();
+            setSelectionRaw(emptySelection());
+            return;
+        }
+        if (typing || e.metaKey || e.ctrlKey || e.altKey)
+            return;
+        if (e.key === "/" && searchRef.current) {
+            e.preventDefault();
+            searchRef.current.focus();
+        }
+        else if ((e.key === "x" || e.key === "X") && selectable) {
+            const tr = target.closest("[data-row-id]");
+            const id = tr?.dataset.rowId;
+            const row = id ? pageRows.find((r) => getRowId(r) === id) : undefined;
+            if (row && isSelectable(row) === true) {
+                e.preventDefault();
+                setSelectionRaw(toggleId(selection, id, selectable === "single"));
+            }
+        }
+    };
+    return (_jsx(DataTableContext.Provider, { value: ctx, children: _jsxs("div", { ref: measureRef, "data-slot": "data-table", "data-variant": variant, "data-density": density === "inherit" ? (state.density ?? undefined) : density, "data-layout": cards ? "cards" : "table", className: cn("ui-dt relative flex min-w-0 flex-col text-fg", variant === "card" && "surface overflow-hidden rounded-ui-lg", className), onKeyDown: onKeyDown, ...rest, children: [children ?? (_jsxs(_Fragment, { children: [_jsxs(DataTableToolbar, { children: [_jsx(DataTableSearch, {}), toolbar, _jsxs("div", { className: "ms-auto flex items-center gap-1.5", children: [_jsx(DataTableViewOptions, {}), props.export ? _jsx(DataTableExport, {}) : null] })] }), _jsx(DataTableContent, {}), _jsx(DataTableFooter, {})] })), _jsx("div", { "aria-live": "polite", className: "sr-only", "data-slot": "data-table-live", children: announcement })] }) }));
+}
+const warned = new Set();
+function warnOnce(msg) {
+    if (warned.has(msg))
+        return;
+    warned.add(msg);
+    console.warn(msg);
+}
+function toggleId(s, id, single) {
+    if (s.mode === "all")
+        return { ...s, except: s.except.includes(id) ? s.except.filter((x) => x !== id) : [...s.except, id] };
+    if (single)
+        return { mode: "ids", ids: s.ids.includes(id) ? [] : [id] };
+    return { mode: "ids", ids: s.ids.includes(id) ? s.ids.filter((x) => x !== id) : [...s.ids, id] };
+}
+function exportCell(c, row, formatted, f) {
+    if (c.exportValue)
+        return c.exportValue(row);
+    const v = readColumnValue(c, row);
+    if (v === null || v === undefined)
+        return null;
+    const type = c.type ?? "text";
+    if (formatted)
+        return formatPlain(c, v, f);
+    if (type === "enum")
+        return String(v);
+    if (type === "boolean")
+        return Boolean(v);
+    if (type === "number" || type === "percent")
+        return typeof v === "number" ? v : Number(v);
+    if (type === "currency")
+        return typeof v === "number" ? v : Number(v);
+    if (Array.isArray(v))
+        return v.map(textOf).join(", ");
+    if (typeof v === "object" && !(v instanceof Date))
+        return textOf(v);
+    return v;
+}
+function formatPlain(c, v, f) {
+    if (v === null || v === undefined || v === "")
+        return "";
+    switch (c.type ?? "text") {
+        case "currency":
+            return f.currency(v, c.currency);
+        case "number":
+            return f.number(v);
+        case "percent":
+            return f.percent(Number(v));
+        case "date":
+            return f.date(v);
+        case "datetime":
+            return f.dateTime(v);
+        case "enum":
+            return c.options?.find((o) => o.value === v)?.label ?? String(v);
+        case "boolean":
+            return v ? "Yes" : "No";
+        default:
+            return textOf(v);
+    }
+}
+/* ------------------------------------------------------------------ */
+/* Toolbar, search, bulk bar                                           */
+/* ------------------------------------------------------------------ */
+/**
+ * The bar above the table. While rows are selected it shows the bulk bar in the same place
+ * (same height, no layout jump).
+ */
+export function DataTableToolbar({ className, children, ...props }) {
+    const { selection, props: p } = useDataTable();
+    const bulk = Boolean(p.selectable) && selectionCount(selection) > 0;
+    return (_jsx("div", { "data-slot": "data-table-toolbar", className: cn("ui-dt-toolbar flex min-h-[calc(var(--control-h)+1.5rem)] flex-wrap items-center gap-2 px-(--cell-px) py-3", p.variant !== "flush" && "border-b border-line", className), ...props, children: bulk ? _jsx(DataTableBulkBar, {}) : children }));
+}
+/** Global search across the searchable columns. `/` focuses it. */
+export function DataTableSearch({ debounce = 300, className, placeholder, ...props }) {
+    const { state, setState, internal } = useDataTable();
+    const { t, searchRef } = internal;
+    const [value, setValue] = React.useState(state.q);
+    const timer = React.useRef(undefined);
+    React.useEffect(() => setValue(state.q), [state.q]);
+    React.useEffect(() => () => clearTimeout(timer.current), []);
+    const push = (q, wait) => {
+        clearTimeout(timer.current);
+        if (wait === 0)
+            setState({ q }, "search");
+        else
+            timer.current = setTimeout(() => setState({ q }, "search"), wait);
+    };
+    return (_jsx(Input, { ref: searchRef, type: "search", size: "sm", "aria-label": t("search"), placeholder: placeholder ?? t("searchPlaceholder"), value: value, leading: _jsx(Search, {}), clearable: true, onClear: () => push("", 0), onChange: (e) => {
+            setValue(e.target.value);
+            push(e.target.value, debounce);
+        }, onKeyDown: (e) => {
+            if (e.key === "Enter")
+                push(value, 0);
+        }, className: cn("w-full sm:w-64", className), "data-slot": "data-table-search", ...props }));
+}
+/** A Filter bar bound to the table (fields from the columns, "Filter by this column" opens it). */
+export function DataTableFilterBar(props) {
+    const { filterBarProps, internal } = useDataTable();
+    const { setFilterBound } = internal;
+    React.useEffect(() => {
+        setFilterBound(true);
+        return () => setFilterBound(false);
+    }, [setFilterBound]);
+    const { q: _q, onQChange: _oq, ...bound } = filterBarProps;
+    return _jsx(FilterBar, { ...bound, ...props, className: cn("min-w-0 flex-1", props.className) });
+}
+/** Saved views bound to the table: switching applies the view, edits mark it modified. */
+export function DataTableSavedViews(props) {
+    const { savedViewsBinding } = useDataTable();
+    return _jsx(SavedViews, { ...savedViewsBinding(props.views), ...props });
+}
+/** Replaces the toolbar while rows are selected: count, select-all across pages, actions. */
+export function DataTableBulkBar({ className }) {
+    const { selection, setSelection, pageRows, filteredRows, total, state, props: p, internal } = useDataTable();
+    const { t } = internal;
+    const f = useFormat();
+    const [busy, setBusy] = React.useState(null);
+    const [confirming, setConfirming] = React.useState(null);
+    const count = selectionCount(selection);
+    const pageIds = pageRows.map((r) => p.getRowId(r));
+    const onPage = pageIds.filter((id) => isRowSelected(selection, id)).length;
+    const allPage = pageIds.length > 0 && onPage === pageIds.length;
+    const server = p.mode === "server";
+    const allMatching = selection.mode === "all" || count >= total;
+    const selectedRows = (server ? p.data : filteredRows).filter((r) => isRowSelected(selection, p.getRowId(r)));
+    const selectAll = () => {
+        if (server)
+            setSelection({ mode: "all", except: [], filters: state.filters, q: state.q, total });
+        else
+            setSelection({ mode: "ids", ids: filteredRows.filter((r) => internal.isSelectable(r) === true).map((r) => p.getRowId(r)) });
+    };
+    const selectPage = () => {
+        const add = pageRows.filter((r) => internal.isSelectable(r) === true).map((r) => p.getRowId(r));
+        if (selection.mode === "all")
+            setSelection({ ...selection, except: selection.except.filter((id) => !add.includes(id)) });
+        else
+            setSelection({ mode: "ids", ids: Array.from(new Set([...selection.ids, ...add])) });
+    };
+    const run = async (action) => {
+        setBusy(action.id);
+        try {
+            const result = await action.run(selection, selectedRows);
+            const n = count;
+            setSelection(emptySelection());
+            const undo = result && typeof result === "object" && "undo" in result ? result.undo : undefined;
+            toast.success(t("bulkDone", { action: action.label, count: n }), undo ? { action: { label: t("undo"), onClick: () => void Promise.resolve(undo()).then(() => toast(t("undone"))) } } : undefined);
+        }
+        catch {
+            toast.danger(t("bulkFailed", { action: action.label }));
+        }
+        finally {
+            setBusy(null);
+        }
+    };
+    const actions = p.bulkActions ?? [];
+    const inline = actions.slice(0, 3);
+    const extra = actions.slice(3);
+    const disabledReason = (a) => {
+        const r = a.disabled?.(selection, selectedRows);
+        return r === true ? "" : typeof r === "string" ? r : null;
+    };
+    return (_jsxs("div", { role: "toolbar", "aria-label": t("bulkActions"), "data-slot": "data-table-bulk-bar", className: cn("ui-dt-bulk ui-fade flex w-full flex-wrap items-center gap-x-1 gap-y-2 text-[13px]", className), children: [_jsxs("span", { className: "inline-flex items-center gap-2 pe-2 font-medium text-fg tabular", children: [_jsx("span", { "aria-hidden": true, className: "inline-flex h-5 min-w-5 items-center justify-center rounded-full bg-accent px-1.5 text-[11px] font-semibold text-accent-fg", children: f.count(count, 9999) }), allMatching && selection.mode === "all" ? t("allSelected", { count: f.number(count) }) : t("selectedCount", { count: f.number(count) }), selection.mode === "ids" && onPage !== count && onPage > 0 ? _jsxs("span", { className: "font-normal text-fg-muted", children: ["(", t("selectedOnPage", { count: f.number(onPage) }), ")"] }) : null] }), !allPage && pageIds.length > 1 && p.selectable !== "single" ? (_jsx(Button, { size: "xs", variant: "ghost", onClick: selectPage, children: t("selectPage", { count: f.number(pageIds.length) }) })) : null, !allMatching && allPage && p.selectable !== "single" ? (_jsx(Button, { size: "xs", variant: "ghost", className: "text-accent-ink", onClick: selectAll, children: t("selectAllMatching", { count: f.number(total) }) })) : null, _jsx(Button, { size: "xs", variant: "ghost", className: "text-fg-muted", onClick: () => setSelection(emptySelection()), children: t("clear") }), _jsx("span", { "aria-hidden": true, className: "mx-1 hidden h-4 w-px bg-line sm:block" }), _jsxs("div", { className: "ms-auto flex flex-wrap items-center gap-1.5", children: [inline.map((a) => {
+                        const reason = disabledReason(a);
+                        return (_jsxs(Button, { size: "sm", variant: a.tone === "danger" ? "danger-ghost" : "secondary", disabled: reason !== null, title: reason || undefined, loading: busy === a.id, onClick: () => (a.confirm ? setConfirming(a) : run(a)), children: [a.icon, a.label] }, a.id));
+                    }), extra.length ? (_jsx(ActionMenu, { triggerLabel: t("moreActions"), items: extra.map((a) => ({ id: a.id, label: a.label, icon: a.icon, tone: a.tone, disabled: disabledReason(a) !== null, onSelect: () => (a.confirm ? setConfirming(a) : run(a)) })) })) : null] }), _jsx(ConfirmDialog, { open: confirming !== null, tone: confirming?.tone === "danger" ? "danger" : "default", title: confirming?.confirm?.title ?? "", description: confirming?.confirm?.description?.(count), confirmLabel: confirming?.confirm?.confirmLabel ?? confirming?.label, onResult: (ok) => {
+                    const a = confirming;
+                    setConfirming(null);
+                    if (ok && a)
+                        void run(a);
+                } })] }));
+}
+/* ------------------------------------------------------------------ */
+/* View options                                                        */
+/* ------------------------------------------------------------------ */
+/** "View" popover: show/hide and reorder columns, density, reset. */
+export function DataTableViewOptions({ className }) {
+    const { state, setState, columns, internal } = useDataTable();
+    const { t, defaultColumns } = internal;
+    const { locale } = useLocale();
+    const [query, setQuery] = React.useState("");
+    const order = [...state.columns.order.filter((id) => columns.some((c) => c.id === id)), ...columns.map((c) => c.id).filter((id) => !state.columns.order.includes(id))];
+    const list = order.map((id) => columns.find((c) => c.id === id)).filter((c) => !query || c.header.toLocaleLowerCase(locale).includes(query.toLocaleLowerCase(locale)));
+    const move = (id, by) => {
+        const next = [...order];
+        const i = next.indexOf(id);
+        const j = i + by;
+        if (j < 0 || j >= next.length)
+            return;
+        [next[i], next[j]] = [next[j], next[i]];
+        setState({ columns: { ...state.columns, order: next } }, "columns");
+    };
+    const densities = ["compact", "comfortable", "spacious"];
+    const current = state.density ?? "comfortable";
+    return (_jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { size: "sm", variant: "ghost", className: cn("text-fg-muted", className), "aria-label": t("viewOptions"), children: [_jsx(Columns3, { "aria-hidden": true }), _jsx("span", { className: "max-sm:sr-only", children: t("view") })] }) }), _jsxs(PopoverContent, { align: "end", size: "sm", padded: false, "aria-label": t("viewOptions"), className: "w-72", children: [_jsxs("div", { className: "border-b border-line p-2", children: [_jsx("p", { className: "px-1 pb-1.5 text-[11px] font-medium tracking-[0.04em] text-fg-subtle", children: t("columns") }), columns.length > 7 ? _jsx(Input, { size: "sm", type: "search", "aria-label": t("findColumn"), placeholder: t("findColumn"), value: query, onChange: (e) => setQuery(e.target.value), leading: _jsx(Search, {}) }) : null] }), _jsx("ul", { className: "max-h-64 overflow-y-auto p-1", "aria-label": t("columns"), children: list.map((c) => {
+                            const hideable = c.hideable ?? c !== internal.titleColumn;
+                            const visible = state.columns.visible[c.id] !== false;
+                            const i = order.indexOf(c.id);
+                            return (_jsxs("li", { className: "group/col flex items-center gap-1 rounded-ui-sm py-0.5 ps-2 pe-1 hover:bg-hover", children: [_jsx(Checkbox, { size: "sm", label: c.header, checked: visible, disabled: !hideable, onCheckedChange: (v) => setState({ columns: { ...state.columns, visible: { ...state.columns.visible, [c.id]: v === true } } }, "columns"), className: "min-w-0 flex-1 py-1 text-[13px]" }), _jsx("button", { type: "button", "aria-label": t("moveUp", { name: c.header }), disabled: i === 0 || Boolean(query), onClick: () => move(c.id, -1), className: "inline-flex size-6 items-center justify-center rounded-ui-sm text-fg-subtle hover:bg-selected hover:text-fg focus-ring disabled:opacity-30", children: _jsx(ChevronUp, { "aria-hidden": true, className: "size-3.5" }) }), _jsx("button", { type: "button", "aria-label": t("moveDown", { name: c.header }), disabled: i === order.length - 1 || Boolean(query), onClick: () => move(c.id, 1), className: "inline-flex size-6 items-center justify-center rounded-ui-sm text-fg-subtle hover:bg-selected hover:text-fg focus-ring disabled:opacity-30", children: _jsx(ChevronDown, { "aria-hidden": true, className: "size-3.5" }) })] }, c.id));
+                        }) }), _jsxs("div", { className: "border-t border-line p-2", children: [_jsx("p", { id: "dt-density-label", className: "px-1 pb-1.5 text-[11px] font-medium tracking-[0.04em] text-fg-subtle", children: t("density") }), _jsx("div", { role: "radiogroup", "aria-label": t("density"), className: "grid grid-cols-3 gap-0.5 rounded-ui-sm bg-selected p-0.5", children: densities.map((d) => (_jsx("button", { type: "button", role: "radio", "aria-checked": current === d, onClick: () => setState({ density: d }, "density"), className: cn("h-7 rounded-[calc(var(--radius)-6px)] text-xs font-medium transition-colors focus-ring", current === d ? "bg-surface text-fg shadow-[0_1px_2px_rgb(0_0_0/0.08)]" : "text-fg-muted hover:text-fg"), children: t(d) }, d))) })] }), _jsx("div", { className: "border-t border-line p-1", children: _jsxs("button", { type: "button", onClick: () => setState({ columns: defaultColumns, density: undefined }, "columns"), className: "flex h-8 w-full items-center gap-2 rounded-ui-sm px-2 text-[13px] text-fg-muted hover:bg-hover hover:text-fg focus-ring", children: [_jsx(RotateCcw, { "aria-hidden": true, className: "size-3.5" }), t("resetColumns")] }) })] })] }));
+}
+/** "Export" menu: rows on this page, selected rows, all rows (or your server export). */
+export function DataTableExport({ className }) {
+    const { exportCsv, selection, pageRows, total, props: p, internal } = useDataTable();
+    const { t } = internal;
+    const f = useFormat();
+    const selected = selectionCount(selection);
+    return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(Button, { size: "sm", variant: "ghost", className: cn("text-fg-muted", className), "aria-label": t("export"), children: [_jsx(Download, { "aria-hidden": true }), _jsx("span", { className: "max-sm:sr-only", children: t("export") })] }) }), _jsxs(DropdownMenuContent, { align: "end", size: "md", children: [_jsx(DropdownMenuLabel, { children: "CSV" }), _jsx(DropdownMenuItem, { icon: _jsx(ArrowDownToLine, {}), badge: f.number(pageRows.length), onSelect: () => exportCsv({ scope: "page" }), children: t("exportPage") }), _jsx(DropdownMenuItem, { icon: _jsx(ArrowDownToLine, {}), badge: f.number(selected), disabled: selected === 0, onSelect: () => exportCsv({ scope: "selected" }), children: t("exportSelected") }), _jsx(DropdownMenuSeparator, {}), _jsx(DropdownMenuItem, { icon: _jsx(Download, {}), badge: p.mode === "server" && p.export?.onServerExport ? undefined : f.number(total), onSelect: () => exportCsv({ scope: "all" }), children: p.mode === "server" && p.export?.onServerExport ? t("exportAllServer") : t("exportAll") })] })] }));
+}
+/* ------------------------------------------------------------------ */
+/* Header cell                                                         */
+/* ------------------------------------------------------------------ */
+function pinStyle(col, header) {
+    const pinned = col.getIsPinned();
+    if (!pinned)
+        return undefined;
+    return pinned === "start"
+        ? { position: "sticky", insetInlineStart: col.getStart("start"), zIndex: header ? 4 : 1 }
+        : { position: "sticky", insetInlineEnd: col.getAfter("end"), zIndex: header ? 4 : 1 };
+}
+function pinAttrs(col) {
+    const pinned = col.getIsPinned();
+    if (!pinned)
+        return {};
+    const edge = pinned === "start" ? col.getIsLastColumn("start") : col.getIsFirstColumn("end");
+    return { "data-pinned": pinned, "data-pin-edge": edge ? "" : undefined };
+}
+function HeaderCell({ header, def }) {
+    const { state, setState, internal, requestFilter, fields } = useDataTable();
+    const { t } = internal;
+    const col = header.column;
+    const sorted = col.getIsSorted();
+    const sortIndex = state.sort.length > 1 ? col.getSortIndex() : -1;
+    const align = columnAlign(def);
+    const canSort = col.getCanSort();
+    const canPin = col.getCanPin();
+    const canHide = col.getCanHide();
+    const pinned = col.getIsPinned();
+    const filterable = internal.filterBound && fields.some((f) => f.field === def.id);
+    const size = header.getSize();
+    const resizeHandler = header.getResizeHandler();
+    const thRef = React.useRef(null);
+    const setSize = (px) => setState({ columns: { ...state.columns, sizing: { ...state.columns.sizing, [def.id]: Math.round(Math.min(col.columnDef.maxSize ?? 640, Math.max(col.columnDef.minSize ?? 72, px))) } } }, "columns");
+    const autofit = () => {
+        const table = thRef.current?.closest("table");
+        if (!table)
+            return;
+        let max = 0;
+        table.querySelectorAll(`[data-col="${CSS.escape(def.id)}"] > [data-fit]`).forEach((el) => {
+            max = Math.max(max, el.scrollWidth);
+        });
+        if (max)
+            setSize(max + 36);
+    };
+    return (_jsxs(TableHead, { ref: thRef, "data-col": def.id, align: align, "aria-sort": canSort ? (sorted === "asc" ? "ascending" : sorted === "desc" ? "descending" : "none") : undefined, style: { width: size, ...pinStyle(col, true) }, ...pinAttrs(col), className: "group/th relative", children: [_jsxs("div", { "data-fit": true, className: cn("flex min-w-0 items-center gap-0.5", align === "end" && "flex-row-reverse", align === "center" && "justify-center"), children: [canSort ? (_jsxs("button", { type: "button", onClick: col.getToggleSortingHandler(), "aria-label": t("sortBy", { name: def.header }), className: cn("-mx-1.5 inline-flex min-w-0 items-center gap-1 rounded-ui-sm px-1.5 py-1 font-medium transition-colors hover:bg-hover hover:text-fg focus-ring", sorted && "text-fg", align === "end" && "flex-row-reverse"), children: [_jsx("span", { className: "truncate", children: def.header }), sorted === "asc" ? _jsx(ArrowUp, { "aria-hidden": true, className: "size-3.5 shrink-0" }) : sorted === "desc" ? _jsx(ArrowDown, { "aria-hidden": true, className: "size-3.5 shrink-0" }) : _jsx(ChevronsUpDown, { "aria-hidden": true, className: "size-3.5 shrink-0 text-fg-subtle opacity-0 transition-opacity group-hover/th:opacity-100" }), sortIndex >= 0 ? (_jsx("span", { className: "inline-flex size-4 items-center justify-center rounded-full bg-accent-soft font-mono text-[10px] text-accent-ink", "aria-label": t("sortOrder", { index: sortIndex + 1 }), children: sortIndex + 1 })) : null] })) : (_jsx("span", { className: "truncate", children: def.header })), canSort || canPin || canHide || filterable ? (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx("button", { type: "button", "aria-label": t("columnMenu", { name: def.header }), className: "inline-flex size-6 shrink-0 items-center justify-center rounded-ui-sm text-fg-subtle opacity-0 transition-opacity group-hover/th:opacity-100 hover:bg-hover hover:text-fg focus-visible:opacity-100 focus-ring data-[state=open]:opacity-100 pointer-coarse:opacity-100", children: _jsx(MoreHorizontal, { "aria-hidden": true, className: "size-3.5" }) }) }), _jsxs(DropdownMenuContent, { align: align === "end" ? "end" : "start", size: "sm", children: [canSort ? (_jsxs(_Fragment, { children: [_jsx(DropdownMenuItem, { icon: _jsx(ArrowUp, {}), onSelect: () => col.toggleSorting(false), children: t("sortAsc") }), _jsx(DropdownMenuItem, { icon: _jsx(ArrowDown, {}), onSelect: () => col.toggleSorting(true), children: t("sortDesc") }), sorted ? (_jsx(DropdownMenuItem, { icon: _jsx(X, {}), onSelect: () => col.clearSorting(), children: t("clearSort") })) : null] })) : null, filterable ? (_jsxs(_Fragment, { children: [_jsx(DropdownMenuSeparator, {}), _jsx(DropdownMenuItem, { icon: _jsx(ListFilter, {}), onSelect: () => requestFilter(def.id), children: t("filterBy") })] })) : null, canPin || canHide ? _jsx(DropdownMenuSeparator, {}) : null, canPin && pinned !== "start" ? (_jsx(DropdownMenuItem, { icon: _jsx(Pin, {}), onSelect: () => col.pin("start"), children: t("pinStart") })) : null, canPin && pinned !== "end" ? (_jsx(DropdownMenuItem, { icon: _jsx(Pin, { className: "rotate-90" }), onSelect: () => col.pin("end"), children: t("pinEnd") })) : null, canPin && pinned ? (_jsx(DropdownMenuItem, { icon: _jsx(PinOff, {}), onSelect: () => col.pin(false), children: t("unpin") })) : null, canHide ? (_jsx(DropdownMenuItem, { icon: _jsx(EyeOff, {}), onSelect: () => col.toggleVisibility(false), children: t("hide") })) : null] })] })) : null] }), col.getCanResize() ? (_jsx("div", { role: "separator", "aria-orientation": "vertical", "aria-label": t("resize", { name: def.header }), "aria-valuenow": Math.round(size), "aria-valuemin": col.columnDef.minSize ?? 72, "aria-valuemax": col.columnDef.maxSize ?? 640, tabIndex: 0, "data-resizing": col.getIsResizing() ? "" : undefined, onMouseDown: resizeHandler, onTouchStart: resizeHandler, onDoubleClick: autofit, onKeyDown: (e) => {
+                    const step = e.shiftKey ? 64 : 16;
+                    const rtl = getComputedStyle(e.currentTarget).direction === "rtl";
+                    if (e.key === "ArrowRight" || e.key === "ArrowLeft") {
+                        e.preventDefault();
+                        const grow = (e.key === "ArrowRight") !== rtl;
+                        setSize(size + (grow ? step : -step));
+                    }
+                    else if (e.key === "Enter") {
+                        e.preventDefault();
+                        autofit();
+                    }
+                }, className: "ui-dt-resize" })) : null] }));
+}
+/* ------------------------------------------------------------------ */
+/* Cells                                                               */
+/* ------------------------------------------------------------------ */
+/** Default rendering of a value by column type. */
+export function DataTableValue({ column, value }) {
+    const f = useFormat();
+    const t = useLabels("dataTable", dataTableLabels);
+    if (value === null || value === undefined || value === "" || (Array.isArray(value) && value.length === 0)) {
+        return _jsx("span", { className: "text-fg-subtle", children: t("none") });
+    }
+    switch (column.type ?? "text") {
+        case "currency":
+            return _jsx(_Fragment, { children: f.currency(value, column.currency) });
+        case "number":
+            return _jsx(_Fragment, { children: f.number(value) });
+        case "percent":
+            return _jsx(_Fragment, { children: f.percent(Number(value)) });
+        case "date":
+            return _jsx("time", { dateTime: String(value), children: f.date(value) });
+        case "datetime":
+            return _jsx("time", { dateTime: String(value), children: f.dateTime(value) });
+        case "boolean":
+            return value ? _jsx("span", { className: "text-fg", children: t("yes") }) : _jsx("span", { className: "text-fg-subtle", children: t("no") });
+        case "enum": {
+            const o = column.options?.find((x) => x.value === value);
+            return (_jsx(Badge, { tone: o?.tone ?? "neutral", dot: Boolean(o?.tone && o.tone !== "neutral"), children: o?.label ?? String(value) }));
+        }
+        case "user": {
+            const name = textOf(value);
+            const src = typeof value === "object" && value ? (value.avatar ?? value.image) : undefined;
+            return (_jsxs("span", { className: "inline-flex min-w-0 items-center gap-2", children: [_jsx(Avatar, { name: name, src: src, size: "xs" }), _jsx("span", { className: "truncate", children: name })] }));
+        }
+        case "tags": {
+            const list = (Array.isArray(value) ? value : [value]).map(textOf);
+            return (_jsxs("span", { className: "inline-flex min-w-0 items-center gap-1", children: [list.slice(0, 2).map((x) => (_jsx(Badge, { tone: "outline", children: x }, x))), list.length > 2 ? _jsxs("span", { className: "text-xs text-fg-subtle tabular", children: ["+", list.length - 2] }) : null] }));
+        }
+        default:
+            return _jsx(_Fragment, { children: textOf(value) });
+    }
+}
+function CellEditorInput({ def, row, value, onCommit, onCancel }) {
+    const { internal } = useDataTable();
+    const { t } = internal;
+    const editor = def.edit;
+    const [draft, setDraft] = React.useState(() => (value === null || value === undefined ? "" : String(value)));
+    const [error, setError] = React.useState(null);
+    const errorId = React.useId();
+    const parse = (s) => {
+        if (editor.type === "number")
+            return s === "" ? null : Number(s.replace(",", "."));
+        if (editor.type === "currency")
+            return s === "" ? null : s.replace(",", ".").replace(/[^\d.-]/g, "");
+        return s;
+    };
+    const commit = () => {
+        const v = parse(draft);
+        if ((editor.type === "number" || editor.type === "currency") && v !== null && !Number.isFinite(Number(v))) {
+            setError(t("invalid"));
+            return;
+        }
+        const msg = editor.validate?.(v, row) ?? null;
+        if (msg) {
+            setError(msg);
+            return;
+        }
+        onCommit(v);
+    };
+    const keys = (e) => {
+        if (e.key === "Enter" || e.key === "Tab") {
+            if (e.key === "Enter")
+                e.preventDefault();
+            commit();
+        }
+        else if (e.key === "Escape") {
+            e.preventDefault();
+            e.stopPropagation();
+            onCancel();
+        }
+    };
+    if (editor.type === "select") {
+        return (_jsxs("div", { className: "relative", children: [_jsx("select", { autoFocus: true, "aria-label": def.header, value: draft, onChange: (e) => {
+                        setDraft(e.target.value);
+                        onCommit(e.target.value);
+                    }, onKeyDown: keys, onBlur: onCancel, className: cn(controlVariants({ size: "sm" }), "h-[calc(var(--row-h)-0.75rem)] w-full appearance-none py-0 ps-2 pe-7 text-[13px]"), children: (editor.options ?? def.options ?? []).map((o) => (_jsx("option", { value: o.value, children: o.label }, o.value))) }), _jsx(ChevronDown, { "aria-hidden": true, className: "pointer-events-none absolute end-2 top-1/2 size-3.5 -translate-y-1/2 text-fg-subtle" })] }));
+    }
+    return (_jsxs("div", { className: "relative", children: [_jsx(Input, { autoFocus: true, size: "sm", "aria-label": def.header, type: editor.type === "date" ? "date" : "text", inputMode: editor.type === "number" || editor.type === "currency" ? "decimal" : undefined, value: draft, invalid: Boolean(error), "aria-describedby": error ? errorId : undefined, onChange: (e) => {
+                    setDraft(e.target.value);
+                    setError(null);
+                }, onKeyDown: keys, onBlur: commit, onFocus: (e) => e.currentTarget.select(), className: "h-[calc(var(--row-h)-0.75rem)] w-full", inputClassName: cn("text-[13px]", END_TYPES.has(def.type ?? "text") && "text-end tabular") }), error ? (_jsx("p", { id: errorId, role: "alert", className: "surface-popover absolute start-0 top-full z-(--z-popover) mt-1 rounded-ui-sm px-2 py-1 text-xs whitespace-nowrap text-danger", children: error })) : null] }));
+}
+function BodyCell({ row, rowId, col, def, index, gridPos }) {
+    const { internal, props: p } = useDataTable();
+    const { t, editing, setEditing, cellStatus, commitEdit } = internal;
+    const Link = useLink();
+    const key = `${rowId}:${def.id}`;
+    const status = cellStatus[key];
+    const raw = readColumnValue(def, row);
+    const value = status && status.status !== "error" ? status.value : raw;
+    const editable = Boolean(def.edit && !p.readOnly && p.onCellEdit);
+    const isEditing = editing?.rowId === rowId && editing.columnId === def.id;
+    const align = columnAlign(def);
+    const isTitle = def === internal.titleColumn;
+    const content = def.cell ? def.cell({ row, value, rowId, index, column: def }) : _jsx(DataTableValue, { column: def, value: value });
+    const grid = p.navigation === "grid";
+    const f = useFormat();
+    // The edit button's name carries the value as the cell shows it ("$72,500.00", not "72500"),
+    // or it fails WCAG 2.5.3 label in name. A custom cell renderer falls back to the raw text.
+    const label = (def.cell ? textOf(raw) : formatPlain(def, value, f)) || t("none");
+    let body = content;
+    if (isEditing && def.edit && def.edit.type === "custom") {
+        body = def.edit.render({ value: raw, row, commit: (v) => commitEdit(row, rowId, def, v), cancel: () => setEditing(null) });
+    }
+    else if (isEditing) {
+        body = _jsx(CellEditorInput, { def: def, row: row, value: raw, onCommit: (v) => commitEdit(row, rowId, def, v), onCancel: () => setEditing(null) });
+    }
+    else if (editable && def.edit && def.edit.type === "boolean") {
+        body = _jsx(Switch, { size: "sm", checked: Boolean(value), "aria-label": `${def.header}, ${internal.rowLabel(row)}`, onCheckedChange: (c) => commitEdit(row, rowId, def, c) });
+    }
+    else if (editable && !grid) {
+        body = (_jsx("button", { type: "button", "data-no-row-click": "", onClick: () => setEditing({ rowId, columnId: def.id }), "aria-label": t("edit", { column: def.header, value: label }), className: cn("ui-dt-editable -mx-2 flex w-[calc(100%+1rem)] min-w-0 items-center rounded-ui-sm px-2 py-1 text-start focus-ring", align === "end" && "justify-end text-end"), children: _jsx("span", { className: "min-w-0 truncate", children: content }) }));
+    }
+    else if (isTitle && p.rowHref) {
+        body = (_jsx(Link, { href: p.rowHref(row), className: "min-w-0 truncate font-medium text-fg underline-offset-4 hover:underline focus-ring rounded-ui-sm", children: content }));
+    }
+    const rowHeader = def.rowHeader ?? isTitle;
+    return (_jsx(TableCell, { rowHeader: rowHeader && !grid, "data-col": def.id, align: align, numeric: END_TYPES.has(def.type ?? "text") && !def.cell, role: grid ? "gridcell" : undefined, tabIndex: grid ? -1 : undefined, "data-r": gridPos?.r, "data-c": gridPos?.c, "aria-readonly": grid && !editable ? true : undefined, "data-editable": editable ? "" : undefined, "data-editing": isEditing ? "" : undefined, "data-status": status?.status, title: status?.status === "error" ? status.error : undefined, "aria-invalid": status?.status === "error" || undefined, style: pinStyle(col), ...pinAttrs(col), className: cn("relative", isEditing ? "py-1" : "truncate", rowHeader && "font-medium"), children: _jsxs("div", { "data-fit": true, className: cn("flex min-w-0 items-center gap-2", align === "end" && "justify-end", align === "center" && "justify-center"), children: [body, status?.status === "saving" ? _jsx(Spinner, { size: "xs", tone: "muted", "aria-label": t("saving"), className: "shrink-0" }) : null] }) }));
+}
+/* ------------------------------------------------------------------ */
+/* Rows                                                                */
+/* ------------------------------------------------------------------ */
+function SelectCell({ row, rowId, index, col }) {
+    const { selection, setSelection, pageRows, internal, props: p } = useDataTable();
+    const selected = isRowSelected(selection, rowId);
+    const can = internal.isSelectable(row);
+    return (_jsx(TableCell, { style: pinStyle(col), ...pinAttrs(col), className: "w-11 pe-0", "data-no-row-click": "", children: _jsx("span", { className: "flex items-center", title: typeof can === "string" ? can : undefined, children: _jsx(Checkbox, { size: "sm", checked: selected, disabled: can !== true, "aria-label": internal.t("selectRow", { name: internal.rowLabel(row) }), onClick: (e) => {
+                    if (e.shiftKey && internal.lastClicked.current !== null && p.selectable !== "single") {
+                        e.preventDefault();
+                        const [a, b] = [internal.lastClicked.current, index].sort((x, y) => x - y);
+                        const ids = pageRows.slice(a, b + 1).filter((r) => internal.isSelectable(r) === true).map((r) => p.getRowId(r));
+                        if (selection.mode === "all")
+                            setSelection({ ...selection, except: selection.except.filter((x) => !ids.includes(x)) });
+                        else
+                            setSelection({ mode: "ids", ids: Array.from(new Set([...selection.ids, ...ids])) });
+                    }
+                    internal.lastClicked.current = index;
+                }, onCheckedChange: () => setSelection(toggleId(selection, rowId, p.selectable === "single")) }) }) }));
+}
+function ActionsCell({ row, col }) {
+    const { props: p, internal } = useDataTable();
+    const items = p.rowActions?.(row) ?? [];
+    return (_jsx(TableCell, { style: pinStyle(col), ...pinAttrs(col), align: "end", className: "w-[52px] ps-0", "data-no-row-click": "", children: _jsx(ActionMenu, { items: items, triggerLabel: internal.t("rowActions", { name: internal.rowLabel(row) }), triggerSize: "xs" }) }));
+}
+const INTERACTIVE = "a, button, input, select, textarea, label, [role=checkbox], [role=switch], [role=menuitem], [data-no-row-click]";
+function DataRow({ row, index, measureRef, virtualIndex }) {
+    const { selection, internal, props: p } = useDataTable();
+    const navigate = useNavigateRow();
+    const rowId = row.id;
+    const selected = p.selectable ? isRowSelected(selection, rowId) : undefined;
+    const can = internal.isSelectable(row.original);
+    const clickable = Boolean(p.onRowClick || p.rowHref);
+    const grid = p.navigation === "grid";
+    return (_jsx(TableRow, { ref: measureRef, "data-index": virtualIndex, "data-row-id": rowId, selected: selected, "aria-selected": p.selectable ? selected : undefined, "aria-rowindex": virtualIndex !== undefined ? virtualIndex + 2 : undefined, disabled: p.selectable ? can !== true : undefined, className: cn(clickable && "cursor-pointer"), onClick: (e) => {
+            if (!clickable || e.target.closest(INTERACTIVE))
+                return;
+            navigate(row.original);
+        }, children: internal.orderedColumns.map((col, c) => {
+            if (col.id === SELECT)
+                return _jsx(SelectCell, { row: row.original, rowId: rowId, index: index, col: col }, col.id);
+            if (col.id === ACTIONS)
+                return _jsx(ActionsCell, { row: row.original, col: col }, col.id);
+            const def = p.columns.find((x) => x.id === col.id);
+            return _jsx(BodyCell, { row: row.original, rowId: rowId, col: col, def: def, index: index, gridPos: grid ? { r: index, c } : undefined }, col.id);
+        }) }));
+}
+function useNavigateRow() {
+    const { props: p } = useDataTable();
+    return (row) => {
+        if (p.onRowClick)
+            p.onRowClick(row);
+        else if (p.rowHref && typeof window !== "undefined") {
+            const href = p.rowHref(row);
+            const a = document.querySelector(`a[href="${CSS.escape(href)}"]`);
+            if (a)
+                a.click();
+            else
+                window.location.assign(href);
+        }
+    };
+}
+function SkeletonRows({ count }) {
+    const { internal, props: p } = useDataTable();
+    const widths = ["72%", "54%", "64%", "48%", "80%"];
+    return (_jsx(_Fragment, { children: Array.from({ length: count }, (_, r) => (_jsx(TableRow, { "aria-hidden": true, "data-slot": "data-table-skeleton", children: internal.orderedColumns.map((col, c) => {
+                if (col.id === SELECT || col.id === ACTIONS)
+                    return _jsx(TableCell, { className: "w-11" }, col.id);
+                const def = p.columns.find((x) => x.id === col.id);
+                const type = def.type ?? "text";
+                return (_jsx(TableCell, { align: columnAlign(def), children: type === "user" ? (_jsxs("span", { className: "flex items-center gap-2", children: [_jsx(Skeleton, { shape: "circle", className: "size-5" }), _jsx(Skeleton, { className: "h-3 rounded-full", style: { width: widths[(r + c) % 5] } })] })) : type === "enum" || type === "tags" ? (_jsx(Skeleton, { className: "h-5 w-16 rounded-full" })) : (_jsx(Skeleton, { className: cn("h-3 rounded-full", END_TYPES.has(type) && "ms-auto"), style: { width: END_TYPES.has(type) ? "46%" : widths[(r + c) % 5] } })) }, col.id));
+            }) }, r))) }));
+}
+/* ------------------------------------------------------------------ */
+/* Content                                                             */
+/* ------------------------------------------------------------------ */
+function StatusRow({ colSpan, children }) {
+    return (_jsx("tr", { "data-slot": "table-empty", children: _jsx("td", { colSpan: colSpan, className: "px-(--cell-px) py-10", children: children }) }));
+}
+/** The table (or the mobile cards) with loading, empty, no-results and error states. */
+export function DataTableContent({ className }) {
+    const ctx = useDataTable();
+    const { table, selection, setSelection, pageRows, setState, internal, props: p } = ctx;
+    const { t, orderedColumns } = internal;
+    const scrollRef = React.useRef(null);
+    const rows = table.getRowModel().rows;
+    const virtual = p.virtual ? (p.virtual === true ? {} : p.virtual) : null;
+    const virtualizer = useVirtualizer({
+        count: virtual ? rows.length : 0,
+        getScrollElement: () => scrollRef.current,
+        estimateSize: () => virtual?.estimateRowHeight ?? 48,
+        overscan: virtual?.overscan ?? 8,
+        getItemKey: (i) => rows[i]?.id ?? i,
+        initialRect: { width: 960, height: 600 },
+    });
+    const grid = p.navigation === "grid";
+    const firstLoad = Boolean(p.loading) && p.data.length === 0;
+    const refreshing = Boolean(p.loading) && p.data.length > 0;
+    const noData = !p.loading && p.data.length === 0 && !internal.hasQuery;
+    const noResults = !p.loading && rows.length === 0 && !noData;
+    const pageIds = pageRows.map((r) => p.getRowId(r));
+    const selectablePage = pageRows.filter((r) => internal.isSelectable(r) === true).map((r) => p.getRowId(r));
+    const onPage = pageIds.filter((id) => isRowSelected(selection, id)).length;
+    const headerChecked = onPage === 0 ? false : onPage === pageIds.length ? true : "indeterminate";
+    const toggleAllPage = () => {
+        if (headerChecked === true) {
+            if (selection.mode === "all")
+                setSelection({ ...selection, except: Array.from(new Set([...selection.except, ...pageIds])) });
+            else
+                setSelection({ mode: "ids", ids: selection.ids.filter((id) => !pageIds.includes(id)) });
+        }
+        else if (selection.mode === "all")
+            setSelection({ ...selection, except: selection.except.filter((id) => !selectablePage.includes(id)) });
+        else
+            setSelection({ mode: "ids", ids: Array.from(new Set([...selection.ids, ...selectablePage])) });
+    };
+    // Grid navigation (WAI-ARIA data grid): roving cell focus.
+    const [active, setActive] = React.useState({ r: 0, c: 0 });
+    useIsomorphicLayoutEffect(() => {
+        if (!grid)
+            return;
+        const root = scrollRef.current;
+        if (!root)
+            return;
+        root.querySelectorAll("[data-r]").forEach((el) => {
+            el.tabIndex = Number(el.dataset.r) === active.r && Number(el.dataset.c) === active.c ? 0 : -1;
+        });
+    });
+    const onGridKeyDown = (e) => {
+        if (!grid)
+            return;
+        const cell = e.target.closest("[data-r]");
+        if (!cell || cell !== e.target)
+            return;
+        const r = Number(cell.dataset.r);
+        const c = Number(cell.dataset.c);
+        const maxR = rows.length - 1;
+        const maxC = orderedColumns.length - 1;
+        let next = null;
+        if (e.key === "ArrowDown")
+            next = { r: Math.min(maxR, r + 1), c };
+        else if (e.key === "ArrowUp")
+            next = { r: Math.max(0, r - 1), c };
+        else if (e.key === "ArrowRight")
+            next = { r, c: Math.min(maxC, c + 1) };
+        else if (e.key === "ArrowLeft")
+            next = { r, c: Math.max(0, c - 1) };
+        else if (e.key === "Home")
+            next = e.ctrlKey || e.metaKey ? { r: 0, c: 0 } : { r, c: 0 };
+        else if (e.key === "End")
+            next = e.ctrlKey || e.metaKey ? { r: maxR, c: maxC } : { r, c: maxC };
+        else if (e.key === "PageDown")
+            next = { r: Math.min(maxR, r + 10), c };
+        else if (e.key === "PageUp")
+            next = { r: Math.max(0, r - 10), c };
+        else if (e.key === "Enter" || e.key === "F2") {
+            const colId = orderedColumns[c]?.id;
+            const def = p.columns.find((x) => x.id === colId);
+            if (def?.edit && !p.readOnly && p.onCellEdit) {
+                e.preventDefault();
+                internal.setEditing({ rowId: rows[r].id, columnId: def.id });
+            }
+            return;
+        }
+        if (!next)
+            return;
+        e.preventDefault();
+        setActive(next);
+        const target = scrollRef.current?.querySelector(`[data-r="${next.r}"][data-c="${next.c}"]`);
+        target?.focus();
+    };
+    if (internal.cards)
+        return _jsx(DataTableCards, { className: className });
+    const visibleCount = orderedColumns.length;
+    const items = virtual ? virtualizer.getVirtualItems() : [];
+    const padTop = virtual && items.length ? items[0].start : 0;
+    const padBottom = virtual && items.length ? virtualizer.getTotalSize() - items[items.length - 1].end : 0;
+    return (_jsxs("div", { className: cn("relative min-w-0", className), "data-slot": "data-table-content", children: [p.error ? (_jsx("div", { className: "px-(--cell-px) pt-3", children: _jsx(Alert, { tone: "danger", live: "assertive", title: t("errorTitle"), actions: p.error.onRetry ? (_jsx(Button, { size: "sm", variant: "secondary", onClick: p.error.onRetry, children: t("retry") })) : undefined, children: p.error.message }) })) : null, refreshing ? _jsx("div", { className: "ui-dt-refresh", role: "progressbar", "aria-label": t("refreshing") }) : null, _jsx(TableContainer, { ref: scrollRef, "aria-label": p.caption, maxHeight: virtual ? (virtual.height ?? "32rem") : undefined, onKeyDown: onGridKeyDown, children: _jsxs(Table, { role: grid ? "grid" : undefined, "aria-busy": p.loading || undefined, "aria-rowcount": virtual ? rows.length + 1 : undefined, "aria-multiselectable": grid && p.selectable === true ? true : undefined, layout: "fixed", stickyHeader: Boolean(virtual), stickyFirstColumn: internal.narrow && p.mobile === "scroll", density: "inherit", style: { width: table.getTotalSize(), minWidth: "100%" }, className: "ui-dt-table", children: [_jsx(TableCaption, { visuallyHidden: !p.showCaption, side: "top", children: p.caption }), _jsx(TableHeader, { children: _jsx(TableRow, { "aria-rowindex": virtual ? 1 : undefined, children: orderedColumns.map((col) => {
+                                    if (col.id === SELECT) {
+                                        return (_jsx(TableHead, { style: { width: 44, ...pinStyle(col, true) }, ...pinAttrs(col), className: "pe-0", children: p.selectable === true ? (_jsx("span", { className: "flex items-center", children: _jsx(Checkbox, { size: "sm", checked: headerChecked, disabled: selectablePage.length === 0, onCheckedChange: toggleAllPage, "aria-label": t("selectPageRows") }) })) : (_jsx("span", { className: "sr-only", children: t("selectPageRows") })) }, col.id));
+                                    }
+                                    if (col.id === ACTIONS)
+                                        return (_jsx(TableHead, { style: { width: 52, ...pinStyle(col, true) }, ...pinAttrs(col), children: _jsx("span", { className: "sr-only", children: t("moreActions") }) }, col.id));
+                                    const header = table.getFlatHeaders().find((h) => h.column.id === col.id);
+                                    const def = p.columns.find((x) => x.id === col.id);
+                                    return _jsx(HeaderCell, { header: header, def: def }, col.id);
+                                }) }) }), _jsx(TableBody, { children: firstLoad ? (_jsx(SkeletonRows, { count: Math.min(10, isCursorPage(ctx.state.page) ? 10 : ctx.state.page.size) })) : noData ? (_jsx(StatusRow, { colSpan: visibleCount, children: p.empty ?? _jsx(EmptyState, { kind: "first-use", size: "sm", title: t("emptyTitle"), description: t("emptyDescription") }) })) : noResults ? (_jsx(StatusRow, { colSpan: visibleCount, children: p.noResults ?? (_jsx(EmptyState, { kind: "no-results", size: "sm", title: t("noResultsTitle"), description: t("noResultsDescription"), actions: _jsx(Button, { size: "sm", variant: "secondary", onClick: () => setState({ q: "", filters: emptyFilterGroup() }, "filters"), children: t("clearFilters") }) })) })) : virtual ? (_jsxs(_Fragment, { children: [padTop > 0 ? (_jsx("tr", { "aria-hidden": true, style: { height: padTop }, children: _jsx("td", { colSpan: visibleCount }) })) : null, items.map((item) => {
+                                        const row = rows[item.index];
+                                        return _jsx(DataRow, { row: row, index: item.index, virtualIndex: item.index, measureRef: virtualizer.measureElement }, row.id);
+                                    }), padBottom > 0 ? (_jsx("tr", { "aria-hidden": true, style: { height: padBottom }, children: _jsx("td", { colSpan: visibleCount }) })) : null] })) : (rows.map((row, i) => _jsx(DataRow, { row: row, index: i }, row.id))) })] }) })] }));
+}
+/** Mobile layout: every row a card (title, subtitle, badge, label:value meta, checkbox, actions). */
+export function DataTableCards({ className }) {
+    const { table, selection, setSelection, internal, props: p, setState } = useDataTable();
+    const { t } = internal;
+    const navigate = useNavigateRow();
+    const rows = table.getRowModel().rows;
+    const visibleIds = new Set(internal.orderedColumns.map((c) => c.id));
+    const defs = p.columns.filter((c) => visibleIds.has(c.id) && c.mobile !== "hidden");
+    const title = internal.titleColumn;
+    const subtitle = defs.find((c) => c.mobile === "subtitle");
+    const badge = defs.find((c) => c.mobile === "badge") ?? defs.find((c) => c !== title && c.type === "enum" && !c.mobile);
+    const avatar = defs.find((c) => c.mobile === "avatar");
+    const meta = defs.filter((c) => c !== title && c !== subtitle && c !== badge && c !== avatar && (c.mobile === "meta" || !c.mobile)).slice(0, 4);
+    const Link = useLink();
+    if (p.loading && p.data.length === 0) {
+        return (_jsx("ul", { "aria-label": p.caption, "aria-busy": true, className: cn("grid gap-2 p-3", className), children: Array.from({ length: 4 }, (_, i) => (_jsxs("li", { className: "surface-2 grid gap-2 rounded-ui p-3", children: [_jsx(Skeleton, { className: "h-3.5 w-2/3 rounded-full" }), _jsx(Skeleton, { className: "h-3 w-1/2 rounded-full" })] }, i))) }));
+    }
+    if (rows.length === 0) {
+        return (_jsx("div", { className: cn("px-4 py-10", className), children: internal.hasQuery
+                ? (p.noResults ?? (_jsx(EmptyState, { kind: "no-results", size: "sm", title: t("noResultsTitle"), description: t("noResultsDescription"), actions: _jsx(Button, { size: "sm", variant: "secondary", onClick: () => setState({ q: "", filters: emptyFilterGroup() }, "filters"), children: t("clearFilters") }) })))
+                : (p.empty ?? _jsx(EmptyState, { kind: "first-use", size: "sm", title: t("emptyTitle"), description: t("emptyDescription") })) }));
+    }
+    return (_jsx("ul", { "aria-label": p.caption, "aria-busy": p.loading || undefined, "data-slot": "data-table-cards", className: cn("grid gap-2 p-3", className), children: rows.map((row) => {
+            const r = row.original;
+            const selected = isRowSelected(selection, row.id);
+            const titleValue = title ? readColumnValue(title, r) : row.id;
+            const titleNode = title?.cell ? title.cell({ row: r, value: titleValue, rowId: row.id, index: row.index, column: title }) : textOf(titleValue);
+            return (_jsxs("li", { "data-row-id": row.id, "data-state": selected ? "selected" : undefined, className: cn("ui-dt-card surface-2 relative flex gap-3 rounded-ui p-3 transition-colors", selected && "bg-selected", (p.onRowClick || p.rowHref) && "cursor-pointer"), onClick: (e) => {
+                    if (!(p.onRowClick || p.rowHref) || e.target.closest(INTERACTIVE))
+                        return;
+                    navigate(r);
+                }, children: [p.selectable ? (_jsx("span", { className: "pt-0.5", "data-no-row-click": "", children: _jsx(Checkbox, { size: "sm", checked: selected, disabled: internal.isSelectable(r) !== true, "aria-label": t("selectRow", { name: internal.rowLabel(r) }), onCheckedChange: () => setSelection(toggleId(selection, row.id, p.selectable === "single")) }) })) : null, avatar ? _jsx(DataTableValue, { column: { ...avatar, type: "user" }, value: readColumnValue(avatar, r) }) : null, _jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("div", { className: "flex items-start gap-2", children: [_jsx("p", { className: "min-w-0 flex-1 truncate text-sm font-medium text-fg", children: p.rowHref ? (_jsx(Link, { href: p.rowHref(r), className: "rounded-ui-sm underline-offset-4 hover:underline focus-ring", children: titleNode })) : (titleNode) }), badge ? _jsx("span", { className: "shrink-0", children: badge.cell ? badge.cell({ row: r, value: readColumnValue(badge, r), rowId: row.id, index: row.index, column: badge }) : _jsx(DataTableValue, { column: badge, value: readColumnValue(badge, r) }) }) : null] }), subtitle ? _jsx("p", { className: "mt-0.5 truncate text-[13px] text-fg-muted", children: subtitle.cell ? subtitle.cell({ row: r, value: readColumnValue(subtitle, r), rowId: row.id, index: row.index, column: subtitle }) : _jsx(DataTableValue, { column: subtitle, value: readColumnValue(subtitle, r) }) }) : null, meta.length ? (_jsx("dl", { className: "mt-2 grid grid-cols-2 gap-x-3 gap-y-1 text-xs", children: meta.map((c) => (_jsxs("div", { className: "min-w-0", children: [_jsx("dt", { className: "text-fg-subtle", children: c.header }), _jsx("dd", { className: cn("truncate text-fg", END_TYPES.has(c.type ?? "text") && "tabular"), children: c.cell ? c.cell({ row: r, value: readColumnValue(c, r), rowId: row.id, index: row.index, column: c }) : _jsx(DataTableValue, { column: c, value: readColumnValue(c, r) }) })] }, c.id))) })) : null] }), p.rowActions ? (_jsx("span", { "data-no-row-click": "", className: "-me-1 -mt-1", children: _jsx(ActionMenu, { items: p.rowActions(r), triggerLabel: t("rowActions", { name: internal.rowLabel(r) }), triggerSize: "xs" }) })) : null] }, row.id));
+        }) }));
+}
+/* ------------------------------------------------------------------ */
+/* Footer                                                              */
+/* ------------------------------------------------------------------ */
+/** Pagination (pages, cursor), "Load more" or the infinite-scroll sentinel. */
+export function DataTableFooter({ className }) {
+    const { state, setState, total, internal, props: p } = useDataTable();
+    const { t } = internal;
+    const sentinel = React.useRef(null);
+    const [loadingMore, setLoadingMore] = React.useState(false);
+    const loadMore = React.useCallback(async () => {
+        if (!p.onLoadMore || loadingMore)
+            return;
+        setLoadingMore(true);
+        try {
+            await p.onLoadMore();
+        }
+        finally {
+            setLoadingMore(false);
+        }
+    }, [p, loadingMore]);
+    React.useEffect(() => {
+        if (p.pagination !== "infinite" || !p.hasMore || typeof IntersectionObserver === "undefined" || !sentinel.current)
+            return;
+        const io = new IntersectionObserver((entries) => {
+            if (entries.some((e) => e.isIntersecting))
+                void loadMore();
+        }, { rootMargin: "240px" });
+        io.observe(sentinel.current);
+        return () => io.disconnect();
+    }, [p.pagination, p.hasMore, loadMore]);
+    const pagination = p.pagination ?? "pages";
+    if (pagination === "none" || (p.data.length === 0 && !p.loading && total === 0))
+        return null;
+    const frame = cn("flex items-center gap-3 px-(--cell-px) py-3", p.variant !== "flush" && "border-t border-line", className);
+    if (pagination === "load-more" || pagination === "infinite") {
+        return (_jsxs("div", { className: cn(frame, "justify-center"), "data-slot": "data-table-footer", children: [pagination === "infinite" ? _jsx("div", { ref: sentinel, "aria-hidden": true, className: "h-px w-px" }) : null, p.hasMore ? (_jsx(Button, { size: "sm", variant: "secondary", loading: loadingMore || (Boolean(p.loading) && p.data.length > 0), onClick: () => void loadMore(), children: t("loadMore") })) : (_jsx("p", { className: "text-[13px] text-fg-subtle", children: t("noMore") }))] }));
+    }
+    if (isCursorPage(state.page)) {
+        const size = state.page.size;
+        return (_jsx("div", { className: cn(frame, "justify-end"), "data-slot": "data-table-footer", children: _jsx(CursorPagination, { hasPrev: Boolean(p.cursors?.prev), hasNext: Boolean(p.cursors?.next), loading: p.loading, size: "sm", onPrev: () => setState({ page: { cursor: p.cursors?.prev ?? null, size } }, "page"), onNext: () => setState({ page: { cursor: p.cursors?.next ?? null, size } }, "page") }) }));
+    }
+    return (_jsx("div", { className: frame, "data-slot": "data-table-footer", children: _jsx(PaginationBar, { className: "w-full", size: "sm", total: total, page: state.page.index + 1, pageSize: state.page.size, pageSizeOptions: p.pageSizes ?? [25, 50, 100], loading: Boolean(p.loading) && p.data.length > 0, onPageChange: (page) => setState({ page: { index: page - 1, size: state.page.size } }, "page"), onPageSizeChange: (size) => setState({ page: { index: 0, size } }, "pageSize") }) }));
+}