@loykin/gridkit 0.0.1-beta.1

package/dist/index.js

@@ -0,0 +1,2454 @@
+import * as React from 'react';
+import React__default, { useEffect, useState, useContext, useMemo, useRef, useCallback, useSyncExternalStore, useLayoutEffect } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useReactTable, getPaginationRowModel, getFilteredRowModel, getSortedRowModel, getExpandedRowModel, getCoreRowModel, memo, createRow, getMemoOptions, flexRender } from '@tanstack/react-table';
+import { create } from 'zustand';
+import { Columns3, Search, X, ChevronDown, Check, ChevronRight, GripVertical, ChevronsLeft, ChevronLeft, ChevronsRight, Loader2, ChevronsUpDown, ArrowUp, ArrowDown, ArrowUpDown, ChevronUp, Filter, SlidersHorizontal, MoreHorizontal } from 'lucide-react';
+import { Button as Button$1 } from '@base-ui/react/button';
+import { cva } from 'class-variance-authority';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { Select as Select$1 } from '@base-ui/react/select';
+import { useVirtualizer } from '@tanstack/react-virtual';
+import { Menu } from '@base-ui/react/menu';
+import { Input as Input$1 } from '@base-ui/react/input';
+import { Checkbox as Checkbox$1 } from '@base-ui/react/checkbox';
+import { Popover as Popover$1 } from '@base-ui/react/popover';
+import { useSensors, useSensor, PointerSensor, DndContext, closestCenter, DragOverlay } from '@dnd-kit/core';
+import { SortableContext, verticalListSortingStrategy, arrayMove, useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+
+// src/DataGrid.tsx
+function IndeterminateCheckbox({ checked, indeterminate, onChange }) {
+  const ref = useRef(null);
+  useEffect(() => {
+    if (ref.current) {
+      ref.current.indeterminate = indeterminate;
+    }
+  }, [indeterminate]);
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      ref,
+      type: "checkbox",
+      checked,
+      onChange: (e) => onChange(e.target.checked),
+      className: "size-4 cursor-pointer rounded border-input accent-primary"
+    }
+  );
+}
+function createCheckboxColumn(checkboxConfig) {
+  const { getRowId, selectedIds, onSelectAll, onSelectOne } = checkboxConfig;
+  return {
+    id: "__select__",
+    size: 40,
+    enableResizing: false,
+    enableSorting: false,
+    enableColumnFilter: false,
+    header: ({ table }) => {
+      const rows = table.getRowModel().rows;
+      const allSelected = rows.length > 0 && rows.every((r) => selectedIds.has(getRowId(r.original)));
+      const someSelected = !allSelected && rows.some((r) => selectedIds.has(getRowId(r.original)));
+      return /* @__PURE__ */ jsx(
+        IndeterminateCheckbox,
+        {
+          checked: allSelected,
+          indeterminate: someSelected,
+          onChange: (checked) => onSelectAll(rows, checked)
+        }
+      );
+    },
+    cell: ({ row }) => {
+      const id = getRowId(row.original);
+      return /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "checkbox",
+          checked: selectedIds.has(id),
+          onChange: (e) => onSelectOne(id, e.target.checked),
+          onClick: (e) => e.stopPropagation(),
+          className: "size-4 cursor-pointer rounded border-input accent-primary"
+        }
+      );
+    }
+  };
+}
+var DEFAULT_STATE = {
+  pagination: { pageIndex: 0, pageSize: 20 },
+  searchTerm: ""
+};
+var useTableStore = create((set, get) => ({
+  tables: {},
+  register: (key, initial) => {
+    if (get().tables[key]) return;
+    set((s) => ({
+      tables: {
+        ...s.tables,
+        [key]: { ...DEFAULT_STATE, ...initial }
+      }
+    }));
+  },
+  update: (key, partial) => set((s) => ({
+    tables: {
+      ...s.tables,
+      [key]: { ...s.tables[key] ?? DEFAULT_STATE, ...partial }
+    }
+  })),
+  reset: (key) => set((s) => ({
+    tables: { ...s.tables, [key]: { ...DEFAULT_STATE } }
+  }))
+}));
+function getDataStoreCoreRowModel() {
+  return (table) => {
+    const rowCache = /* @__PURE__ */ new Map();
+    return memo(
+      () => {
+        const store = table.options.dataStore;
+        return [store?.getVersion() ?? -1];
+      },
+      () => {
+        const store = table.options.dataStore;
+        const data = store.getSnapshot();
+        const rowModel = { rows: [], flatRows: [], rowsById: {} };
+        const seenIds = /* @__PURE__ */ new Set();
+        for (let i = 0; i < data.length; i++) {
+          const item = data[i];
+          const id = table._getRowId(item, i);
+          seenIds.add(id);
+          let row = rowCache.get(id);
+          if (row) {
+            if (row.original !== item) {
+              row.original = item;
+              row._valuesCache = {};
+            }
+          } else {
+            row = createRow(table, id, item, i, 0);
+            rowCache.set(id, row);
+          }
+          rowModel.rows.push(row);
+          rowModel.flatRows.push(row);
+          rowModel.rowsById[id] = row;
+        }
+        for (const id of rowCache.keys()) {
+          if (!seenIds.has(id)) rowCache.delete(id);
+        }
+        return rowModel;
+      },
+      getMemoOptions(
+        table.options,
+        "debugTable",
+        "getRowModel",
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        () => table._autoResetPageIndex?.()
+      )
+    );
+  };
+}
+var DataStoreFeature = {
+  createTable: (table) => {
+    const store = table.options.dataStore;
+    table._dataStore = store;
+    table.applyTransaction = (tx) => {
+      if (!store) {
+        console.warn("[GridKit] applyTransaction called without dataStore");
+        return;
+      }
+      store.applyTransaction(tx);
+    };
+    table.getRowNodeById = (id) => store?.get(id);
+  }
+};
+
+// src/core/engine/extensions/ColumnFlexFeature.ts
+var ColumnFlexFeature = {
+  getDefaultColumnDef: () => ({ minSize: 60 }),
+  createTable: (table) => {
+    table.getFlexColumnSizing = (containerWidth) => {
+      const columns = table.getAllLeafColumns();
+      const sizing = {};
+      const flexCols = columns.filter((col) => col.columnDef.meta?.flex != null);
+      if (flexCols.length === 0) return sizing;
+      const fixedWidth = columns.filter((col) => col.columnDef.meta?.flex == null).reduce((sum, col) => sum + col.getSize(), 0);
+      const totalFlex = flexCols.reduce((sum, col) => sum + col.columnDef.meta.flex, 0);
+      const available = Math.max(0, containerWidth - fixedWidth);
+      let distributed = 0;
+      flexCols.forEach((col, i) => {
+        const flex = col.columnDef.meta.flex;
+        const minW = col.columnDef.meta?.minWidth ?? 60;
+        const isLast = i === flexCols.length - 1;
+        const w = isLast ? Math.max(minW, available - distributed) : Math.max(minW, Math.floor(flex / totalFlex * available));
+        sizing[col.id] = w;
+        distributed += w;
+      });
+      return sizing;
+    };
+  }
+};
+
+// src/core/engine/extensions/ColumnFilterExtension.ts
+var ColumnFilterExtension = {};
+
+// src/core/engine/extensions/RowActionsFeature.ts
+var RowActionsFeature = {};
+
+// src/core/engine/gridKitFeatures.ts
+var gridKitFeatures = [
+  DataStoreFeature,
+  ColumnFlexFeature,
+  ColumnFilterExtension,
+  RowActionsFeature
+];
+
+// src/core/hooks/useDataGridCore.ts
+var _noopSubscribe = (_listener) => () => {
+};
+var _noopGetVersion = () => 0;
+var defaultGlobalFilterFn = (row, columnId, value) => String(row.getValue(columnId) ?? "").toLowerCase().includes(value.toLowerCase());
+var multiSelectFilterFn = (row, columnId, value) => value.includes(String(row.getValue(columnId) ?? ""));
+multiSelectFilterFn.autoRemove = (val) => !val || val.length === 0;
+var betweenFilterFn = (row, columnId, value) => {
+  const raw = row.getValue(columnId);
+  const [minStr, maxStr] = value;
+  const min = minStr !== "" ? Number(minStr) : -Infinity;
+  const max = maxStr !== "" ? Number(maxStr) : Infinity;
+  return raw >= min && raw <= max;
+};
+betweenFilterFn.autoRemove = (val) => !val || val[0] === "" && val[1] === "";
+function useDataGridCore({
+  data = [],
+  dataStore,
+  columns,
+  enableSorting = true,
+  initialSorting,
+  onSortingChange,
+  manualSorting = false,
+  columnFilters: externalColumnFilters,
+  globalFilter: externalGlobalFilter,
+  onGlobalFilterChange,
+  searchableColumns,
+  enableColumnResizing = true,
+  enableColumnFilters = false,
+  visibilityState,
+  initialPinning,
+  tableKey,
+  syncState = false,
+  enablePagination = true,
+  paginationConfig,
+  totalCount,
+  onPageChange,
+  onTableReady,
+  onColumnSizingChange,
+  enableExpanding = false,
+  getSubRows,
+  getRowId,
+  sizing,
+  setSizing
+}) {
+  const { register, update, tables } = useTableStore();
+  const persisted = tableKey ? tables[tableKey] : void 0;
+  const [expanded, setExpanded] = useState({});
+  const [sorting, setSorting] = useState(initialSorting ?? []);
+  const [columnPinning] = useState(() => {
+    const fromMeta = { left: [], right: [] };
+    for (const col of columns) {
+      const pin = col.meta?.pin;
+      const id = col.accessorKey ?? col.id;
+      if (!pin || !id) continue;
+      if (pin === "left") fromMeta.left.push(id);
+      else fromMeta.right.push(id);
+    }
+    return {
+      left: [...fromMeta.left ?? [], ...initialPinning?.left ?? []],
+      right: [...fromMeta.right ?? [], ...initialPinning?.right ?? []]
+    };
+  });
+  const [internalFilters, setInternalFilters] = useState([]);
+  const [internalGlobal, setInternalGlobal] = useState(persisted?.searchTerm ?? "");
+  const [columnVisibility, setColumnVisibility] = useState(visibilityState ?? {});
+  const [pagination, setPagination] = useState({
+    pageIndex: persisted?.pagination.pageIndex ?? paginationConfig?.initialPageIndex ?? 0,
+    pageSize: persisted?.pagination.pageSize ?? paginationConfig?.pageSize ?? 20
+  });
+  const tableReadyCalled = useRef(false);
+  useEffect(() => {
+    if (tableKey && syncState) {
+      register(tableKey, {
+        pagination: {
+          pageIndex: paginationConfig?.initialPageIndex ?? 0,
+          pageSize: paginationConfig?.pageSize ?? 20
+        }
+      });
+    }
+  }, [tableKey, syncState, register, paginationConfig]);
+  const effectiveGlobalFilter = externalGlobalFilter ?? internalGlobal;
+  const effectiveColumnFilters = externalColumnFilters ?? internalFilters;
+  const searchableFilterFn = searchableColumns?.length ? (row, _, value) => {
+    const search = String(value).toLowerCase();
+    return searchableColumns.some(
+      (colId) => String(row.getValue(colId) ?? "").toLowerCase().includes(search)
+    );
+  } : void 0;
+  const enrichedColumns = columns.map((col) => {
+    if (col.meta?.filterType === "number" && !col.filterFn) {
+      return { ...col, filterFn: betweenFilterFn };
+    }
+    if (col.meta?.filterType === "multi-select" && !col.filterFn) {
+      return { ...col, filterFn: multiSelectFilterFn };
+    }
+    return col;
+  });
+  useSyncExternalStore(
+    dataStore ? dataStore.subscribe : _noopSubscribe,
+    dataStore ? dataStore.getVersion : _noopGetVersion
+  );
+  const table = useReactTable({
+    // When dataStore is active, data is irrelevant — getDataStoreCoreRowModel
+    // reads directly from the store. Pass empty array to satisfy the type.
+    data: dataStore ? [] : data,
+    columns: enrichedColumns,
+    getRowId,
+    _features: [...gridKitFeatures],
+    dataStore,
+    state: {
+      sorting,
+      columnFilters: effectiveColumnFilters,
+      globalFilter: effectiveGlobalFilter,
+      columnVisibility,
+      columnSizing: sizing,
+      columnPinning,
+      ...enablePagination ? { pagination } : {},
+      ...enableExpanding ? { expanded } : {}
+    },
+    manualSorting,
+    manualPagination: totalCount !== void 0,
+    pageCount: totalCount !== void 0 && pagination.pageSize > 0 ? Math.ceil(totalCount / pagination.pageSize) : void 0,
+    onSortingChange: (updater) => {
+      setSorting((prev) => {
+        const next = typeof updater === "function" ? updater(prev) : updater;
+        onSortingChange?.(next);
+        return next;
+      });
+    },
+    onColumnFiltersChange: externalColumnFilters ? void 0 : (updater) => {
+      setInternalFilters((prev) => typeof updater === "function" ? updater(prev) : updater);
+    },
+    onGlobalFilterChange: externalGlobalFilter ? void 0 : (updater) => {
+      const next = typeof updater === "function" ? updater(internalGlobal) : updater;
+      setInternalGlobal(next);
+      onGlobalFilterChange?.(next);
+    },
+    onColumnVisibilityChange: (updater) => {
+      setColumnVisibility((prev) => typeof updater === "function" ? updater(prev) : updater);
+    },
+    onColumnSizingChange: (updater) => {
+      setSizing((prev) => {
+        const next = typeof updater === "function" ? updater(prev) : updater;
+        onColumnSizingChange?.(next);
+        return next;
+      });
+    },
+    onPaginationChange: enablePagination ? (updater) => {
+      setPagination((prev) => {
+        const next = typeof updater === "function" ? updater(prev) : updater;
+        if (tableKey && syncState) update(tableKey, { pagination: next });
+        onPageChange?.(next.pageIndex, next.pageSize);
+        return next;
+      });
+    } : void 0,
+    onExpandedChange: enableExpanding ? setExpanded : void 0,
+    getSubRows,
+    autoResetExpanded: false,
+    // Explicitly derive canExpand from source data so depth-N rows show the
+    // toggle button even before their children have been loaded into subRows
+    // by the filtered/sorted row models.
+    getRowCanExpand: getSubRows ? (row) => {
+      const subs = getSubRows(row.original, row.index);
+      return Array.isArray(subs) && subs.length > 0;
+    } : void 0,
+    // Phase 3: row-caching model when DataStore is present; stock model otherwise
+    getCoreRowModel: dataStore ? getDataStoreCoreRowModel() : getCoreRowModel(),
+    getExpandedRowModel: enableExpanding ? getExpandedRowModel() : void 0,
+    getSortedRowModel: manualSorting ? void 0 : getSortedRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    getPaginationRowModel: enablePagination ? getPaginationRowModel() : void 0,
+    globalFilterFn: searchableFilterFn ?? defaultGlobalFilterFn,
+    enableColumnResizing,
+    columnResizeMode: "onChange",
+    enableSorting,
+    enableColumnFilters
+  });
+  const handleGlobalFilterChange = useCallback(
+    (value) => {
+      table.setGlobalFilter(value);
+      if (externalGlobalFilter === void 0) {
+        setInternalGlobal(value);
+        onGlobalFilterChange?.(value);
+      }
+      if (tableKey && syncState) update(tableKey, { searchTerm: value });
+    },
+    [table, externalGlobalFilter, onGlobalFilterChange, tableKey, syncState, update]
+  );
+  useEffect(() => {
+    if (!tableReadyCalled.current && onTableReady) {
+      tableReadyCalled.current = true;
+      onTableReady(table);
+    }
+  }, [table, onTableReady]);
+  return {
+    table,
+    pagination,
+    globalFilter: effectiveGlobalFilter,
+    handleGlobalFilterChange
+  };
+}
+var VIRTUAL_THRESHOLD = 100;
+function useColumnSizing({
+  columns,
+  containerRef,
+  mode
+}) {
+  const userResized = useRef(/* @__PURE__ */ new Set());
+  const lastComputed = useRef({});
+  const lastContainerWidth = useRef(0);
+  const lastFlexFixedWidth = useRef(null);
+  const hasSized = useRef(false);
+  const [state, setState] = useState({ sizing: {}, isSized: false });
+  const setSizing = useCallback(
+    (updater) => {
+      setState((prev) => ({
+        ...prev,
+        sizing: typeof updater === "function" ? updater(prev.sizing) : updater
+      }));
+    },
+    []
+  );
+  const columnsRef = useRef(columns);
+  columnsRef.current = columns;
+  const modeRef = useRef(mode);
+  modeRef.current = mode;
+  const sizingRef = useRef(state.sizing);
+  sizingRef.current = state.sizing;
+  const measure = useCallback(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    const containerWidth = container.clientWidth;
+    if (containerWidth === 0) return;
+    const prevContainerWidth = lastContainerWidth.current;
+    lastContainerWidth.current = containerWidth;
+    const cols = columnsRef.current;
+    const currentSizing = sizingRef.current;
+    const m = modeRef.current;
+    for (const [colId, currentSize] of Object.entries(currentSizing)) {
+      const computed = lastComputed.current[colId];
+      if (computed !== void 0 && computed !== currentSize) {
+        userResized.current.add(colId);
+      }
+    }
+    const newSizing = {};
+    if (m === "auto") {
+      const cells = container.querySelectorAll("[data-col-id]");
+      cells.forEach((cell) => {
+        const colId = cell.dataset.colId;
+        if (!colId || userResized.current.has(colId)) return;
+        const w = cell.scrollWidth;
+        const current = newSizing[colId] ?? currentSizing[colId] ?? 0;
+        if (w > current) newSizing[colId] = w;
+      });
+    }
+    const getColId = (col) => col.id ?? col.accessorKey;
+    const flexCols = cols.filter((col) => col.meta?.flex != null);
+    if (flexCols.length > 0) {
+      const containerWidthChanged = Math.abs(containerWidth - prevContainerWidth) > 1;
+      const anyUserResized = flexCols.some((col) => userResized.current.has(getColId(col)));
+      const freeCols = flexCols.filter((col) => !userResized.current.has(getColId(col)));
+      const totalFlex = freeCols.reduce((sum, col) => sum + col.meta.flex, 0);
+      const fixedWidth = cols.filter((col) => col.meta?.flex == null).reduce((sum, col) => {
+        const colId = getColId(col);
+        const colDefSize = typeof col.size === "number" ? col.size : 150;
+        return sum + (newSizing[colId] ?? currentSizing[colId] ?? colDefSize);
+      }, 0);
+      const userResizedFlexWidth = flexCols.filter((col) => userResized.current.has(getColId(col))).reduce((sum, col) => sum + (currentSizing[getColId(col)] ?? 0), 0);
+      const fixedWidthChanged = lastFlexFixedWidth.current !== null && lastFlexFixedWidth.current !== fixedWidth;
+      if (anyUserResized && !containerWidthChanged) ; else if (!containerWidthChanged && hasSized.current && !fixedWidthChanged) ; else {
+        lastFlexFixedWidth.current = fixedWidth;
+        const availableWidth = Math.max(0, containerWidth - fixedWidth - userResizedFlexWidth);
+        let distributed = 0;
+        for (let i = 0; i < freeCols.length; i++) {
+          const col = freeCols[i];
+          const colId = getColId(col);
+          if (!colId) continue;
+          const flex = col.meta.flex;
+          const minW = col.meta?.minWidth ?? 60;
+          const isLast = i === freeCols.length - 1;
+          const w = isLast ? Math.max(minW, availableWidth - distributed) : Math.max(minW, Math.floor(flex / totalFlex * availableWidth));
+          newSizing[colId] = w;
+          distributed += w;
+        }
+      }
+    }
+    const sizingChanged = Object.keys(newSizing).length > 0 && Object.entries(newSizing).some(([id, w]) => currentSizing[id] !== w);
+    const firstTime = !hasSized.current;
+    if (sizingChanged || firstTime) {
+      if (sizingChanged) Object.assign(lastComputed.current, newSizing);
+      if (firstTime) hasSized.current = true;
+      setState((prev) => ({
+        sizing: sizingChanged ? { ...prev.sizing, ...newSizing } : prev.sizing,
+        isSized: true
+      }));
+    }
+  }, [containerRef]);
+  const roTimerRef = useRef(null);
+  useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    const ro = new ResizeObserver((entries) => {
+      const entry = entries[0];
+      if (!entry) return;
+      const width = entry.contentRect.width;
+      if (width === 0 || Math.abs(width - lastContainerWidth.current) < 1) return;
+      if (roTimerRef.current) clearTimeout(roTimerRef.current);
+      roTimerRef.current = setTimeout(measure, 150);
+    });
+    ro.observe(el);
+    return () => {
+      ro.disconnect();
+      if (roTimerRef.current) clearTimeout(roTimerRef.current);
+    };
+  }, [measure, containerRef]);
+  const resetSizing = useCallback(() => {
+    userResized.current.clear();
+    lastComputed.current = {};
+    lastContainerWidth.current = 0;
+    lastFlexFixedWidth.current = null;
+    hasSized.current = false;
+    setState({ sizing: {}, isSized: false });
+    measure();
+  }, [measure]);
+  return { sizing: state.sizing, isSized: state.isSized, setSizing, resetSizing, measure };
+}
+
+// src/core/hooks/useDataGridBase.ts
+function useDataGridBase(options) {
+  const {
+    data = [],
+    dataStore,
+    columns,
+    enableSorting = true,
+    initialSorting,
+    onSortingChange,
+    manualSorting,
+    columnFilters,
+    globalFilter,
+    onGlobalFilterChange,
+    searchableColumns,
+    enableColumnResizing = true,
+    enableColumnFilters = false,
+    visibilityState,
+    initialPinning,
+    columnSizingMode = "flex",
+    checkboxConfig,
+    enableExpanding,
+    getSubRows,
+    getRowId,
+    tableKey,
+    syncState,
+    enablePagination = true,
+    paginationConfig,
+    totalCount,
+    onPageChange,
+    onTableReady,
+    onColumnSizingChange,
+    bordered
+  } = options;
+  const wrapperRef = useRef(null);
+  const containerRef = useRef(null);
+  const columnsWithCheckbox = useMemo(() => {
+    if (!checkboxConfig) return columns;
+    return [createCheckboxColumn(checkboxConfig), ...columns];
+  }, [columns, checkboxConfig]);
+  const { sizing, isSized, setSizing, measure } = useColumnSizing({
+    columns,
+    containerRef,
+    mode: columnSizingMode
+  });
+  const { table } = useDataGridCore({
+    data,
+    dataStore,
+    columns: columnsWithCheckbox,
+    enableSorting,
+    initialSorting,
+    onSortingChange,
+    manualSorting,
+    columnFilters,
+    globalFilter,
+    onGlobalFilterChange,
+    searchableColumns,
+    enableColumnResizing,
+    enableColumnFilters,
+    visibilityState,
+    initialPinning,
+    tableKey,
+    syncState,
+    enablePagination,
+    paginationConfig,
+    totalCount,
+    onPageChange,
+    onTableReady,
+    onColumnSizingChange,
+    enableExpanding,
+    getSubRows,
+    getRowId,
+    sizing,
+    setSizing
+  });
+  const rows = table.getRowModel().rows;
+  return { wrapperRef, containerRef, table, rows, isSized, bordered, measure };
+}
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var buttonVariants = cva(
+  "group/button inline-flex shrink-0 items-center justify-center rounded-none border border-transparent bg-clip-padding text-xs font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-1 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-1 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+        outline: "border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+        ghost: "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
+        destructive: "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
+        link: "text-primary underline-offset-4 hover:underline"
+      },
+      size: {
+        default: "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        xs: "h-6 gap-1 rounded-none px-2 text-xs has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-7 gap-1 rounded-none px-2.5 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+        lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        icon: "size-8",
+        "icon-xs": "size-6 rounded-none [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm": "size-7 rounded-none",
+        "icon-lg": "size-9"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Button$1,
+    {
+      "data-slot": "button",
+      className: cn(buttonVariants({ variant, size, className })),
+      ...props
+    }
+  );
+}
+var Select = Select$1.Root;
+function SelectValue({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Select$1.Value,
+    {
+      "data-slot": "select-value",
+      className: cn("flex flex-1 text-left", className),
+      ...props
+    }
+  );
+}
+function SelectTrigger({
+  className,
+  size = "default",
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    Select$1.Trigger,
+    {
+      "data-slot": "select-trigger",
+      "data-size": size,
+      className: cn(
+        "flex w-fit items-center justify-between gap-1.5 rounded-none border border-input bg-transparent py-2 pr-2 pl-2.5 text-xs whitespace-nowrap transition-colors outline-none select-none focus-visible:border-ring focus-visible:ring-1 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-1 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-none *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx(
+          Select$1.Icon,
+          {
+            render: /* @__PURE__ */ jsx(ChevronsUpDown, { className: "pointer-events-none size-4 text-muted-foreground" })
+          }
+        )
+      ]
+    }
+  );
+}
+function SelectContent({
+  className,
+  children,
+  side = "bottom",
+  sideOffset = 4,
+  align = "center",
+  alignOffset = 0,
+  alignItemWithTrigger = true,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(Select$1.Portal, { children: /* @__PURE__ */ jsx(
+    Select$1.Positioner,
+    {
+      side,
+      sideOffset,
+      align,
+      alignOffset,
+      alignItemWithTrigger,
+      className: "isolate z-50",
+      children: /* @__PURE__ */ jsxs(
+        Select$1.Popup,
+        {
+          "data-slot": "select-content",
+          "data-align-trigger": alignItemWithTrigger,
+          className: cn(
+            "dark isolate z-50 max-h-(--available-height) w-(--anchor-width) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-none text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[align-trigger=true]:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 animate-none! relative bg-popover/70 before:pointer-events-none before:absolute before:inset-0 before:-z-1 before:rounded-[inherit] before:backdrop-blur-2xl before:backdrop-saturate-150 **:data-[slot$=-item]:focus:bg-foreground/10 **:data-[slot$=-item]:data-highlighted:bg-foreground/10 **:data-[slot$=-separator]:bg-foreground/5 **:data-[slot$=-trigger]:focus:bg-foreground/10 **:data-[slot$=-trigger]:aria-expanded:bg-foreground/10! **:data-[variant=destructive]:focus:bg-foreground/10! **:data-[variant=destructive]:text-accent-foreground! **:data-[variant=destructive]:**:text-accent-foreground!",
+            className
+          ),
+          ...props,
+          children: [
+            /* @__PURE__ */ jsx(SelectScrollUpButton, {}),
+            /* @__PURE__ */ jsx(Select$1.List, { children }),
+            /* @__PURE__ */ jsx(SelectScrollDownButton, {})
+          ]
+        }
+      )
+    }
+  ) });
+}
+function SelectItem({ className, children, ...props }) {
+  return /* @__PURE__ */ jsxs(
+    Select$1.Item,
+    {
+      "data-slot": "select-item",
+      className: cn(
+        "relative flex w-full cursor-default items-center gap-2 rounded-none py-2 pr-8 pl-2 text-xs outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(Select$1.ItemText, { className: "flex flex-1 shrink-0 gap-2 whitespace-nowrap", children }),
+        /* @__PURE__ */ jsx(
+          Select$1.ItemIndicator,
+          {
+            render: /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute right-2 flex size-4 items-center justify-center" }),
+            children: /* @__PURE__ */ jsx(Check, { className: "pointer-events-none size-3.5" })
+          }
+        )
+      ]
+    }
+  );
+}
+function SelectScrollUpButton({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Select$1.ScrollUpArrow,
+    {
+      "data-slot": "select-scroll-up-button",
+      className: cn(
+        "top-0 z-10 flex w-full cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx(ChevronUp, {})
+    }
+  );
+}
+function SelectScrollDownButton({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Select$1.ScrollDownArrow,
+    {
+      "data-slot": "select-scroll-down-button",
+      className: cn(
+        "bottom-0 z-10 flex w-full cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx(ChevronDown, {})
+    }
+  );
+}
+function DataGridPaginationBar({
+  table,
+  pageSizes,
+  totalCount
+}) {
+  const { pageIndex, pageSize } = table.getState().pagination;
+  const pageCount = table.getPageCount();
+  const pageSizeItems = pageSizes.map((size) => ({ label: String(size), value: size }));
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-4 px-1 py-1 text-sm text-muted-foreground", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx("span", { children: "Rows per page" }),
+      /* @__PURE__ */ jsxs(
+        Select,
+        {
+          items: pageSizeItems,
+          value: pageSize,
+          onValueChange: (val) => table.setPageSize(val),
+          children: [
+            /* @__PURE__ */ jsx(SelectTrigger, { size: "sm", className: "w-16", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+            /* @__PURE__ */ jsx(SelectContent, { children: pageSizeItems.map((item) => /* @__PURE__ */ jsx(SelectItem, { value: item.value, children: item.label }, item.value)) })
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+      /* @__PURE__ */ jsx("span", { children: totalCount !== void 0 ? `${pageIndex * pageSize + 1}\u2013${Math.min((pageIndex + 1) * pageSize, totalCount)} of ${totalCount}` : `Page ${pageIndex + 1} of ${Math.max(pageCount, 1)}` }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "ghost",
+          size: "icon-sm",
+          onClick: () => table.firstPage(),
+          disabled: !table.getCanPreviousPage(),
+          children: /* @__PURE__ */ jsx(ChevronsLeft, {})
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "ghost",
+          size: "icon-sm",
+          onClick: () => table.previousPage(),
+          disabled: !table.getCanPreviousPage(),
+          children: /* @__PURE__ */ jsx(ChevronLeft, {})
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "ghost",
+          size: "icon-sm",
+          onClick: () => table.nextPage(),
+          disabled: !table.getCanNextPage(),
+          children: /* @__PURE__ */ jsx(ChevronRight, {})
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "ghost",
+          size: "icon-sm",
+          onClick: () => table.lastPage(),
+          disabled: !table.getCanNextPage(),
+          children: /* @__PURE__ */ jsx(ChevronsRight, {})
+        }
+      )
+    ] })
+  ] });
+}
+function DataGridToolbar({
+  table,
+  leftFilters,
+  rightFilters
+}) {
+  if (!(leftFilters || rightFilters)) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 shrink-0", children: [
+    /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: leftFilters?.(table) }),
+    /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: rightFilters?.(table) })
+  ] });
+}
+function Input({ className, type, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Input$1,
+    {
+      type,
+      "data-slot": "input",
+      className: cn(
+        "h-8 w-full min-w-0 rounded-none border border-input bg-transparent px-2.5 py-1 text-xs transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-xs file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-1 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-1 aria-invalid:ring-destructive/20 md:text-xs dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function Checkbox({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Checkbox$1.Root,
+    {
+      "data-slot": "checkbox",
+      className: cn(
+        "peer relative flex size-4 shrink-0 items-center justify-center rounded-none border border-input transition-colors outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-1 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-1 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        Checkbox$1.Indicator,
+        {
+          "data-slot": "checkbox-indicator",
+          className: "grid place-content-center text-current transition-none [&>svg]:size-3.5",
+          children: /* @__PURE__ */ jsx(Check, {})
+        }
+      )
+    }
+  );
+}
+function Popover({ ...props }) {
+  return /* @__PURE__ */ jsx(Popover$1.Root, { "data-slot": "popover", ...props });
+}
+function PopoverTrigger({ ...props }) {
+  return /* @__PURE__ */ jsx(Popover$1.Trigger, { "data-slot": "popover-trigger", ...props });
+}
+function PopoverContent({
+  className,
+  align = "center",
+  alignOffset = 0,
+  side = "bottom",
+  sideOffset = 4,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(Popover$1.Portal, { children: /* @__PURE__ */ jsx(
+    Popover$1.Positioner,
+    {
+      align,
+      alignOffset,
+      side,
+      sideOffset,
+      className: "isolate z-50",
+      children: /* @__PURE__ */ jsx(
+        Popover$1.Popup,
+        {
+          "data-slot": "popover-content",
+          className: cn(
+            "z-50 flex w-72 origin-(--transform-origin) flex-col gap-2.5 rounded-none bg-popover p-2.5 text-xs text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+            className
+          ),
+          ...props
+        }
+      )
+    }
+  ) });
+}
+var ScrollTable = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      role: "table",
+      className: ["text-sm", className].filter(Boolean).join(" "),
+      ...props
+    }
+  )
+);
+ScrollTable.displayName = "ScrollTable";
+function CustomScrollbar({ scrollRef, direction, className, style }) {
+  const isV = direction === "vertical";
+  const trackRef = useRef(null);
+  const scrollSizeRef = useRef(0);
+  const clientSizeRef = useRef(0);
+  const [thumbStart, setThumbStart] = useState(0);
+  const [thumbEnd, setThumbEnd] = useState(1);
+  const sync = useCallback(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+    const scrollPos = isV ? el.scrollTop : el.scrollLeft;
+    const scrollSize = isV ? el.scrollHeight : el.scrollWidth;
+    const clientSize = isV ? el.clientHeight : el.clientWidth;
+    scrollSizeRef.current = scrollSize;
+    clientSizeRef.current = clientSize;
+    if (scrollSize <= clientSize) {
+      setThumbStart(0);
+      setThumbEnd(1);
+      return;
+    }
+    setThumbStart(scrollPos / scrollSize);
+    setThumbEnd((scrollPos + clientSize) / scrollSize);
+  }, [scrollRef, isV]);
+  useLayoutEffect(() => {
+    sync();
+  }, [sync]);
+  useEffect(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+    el.addEventListener("scroll", sync, { passive: true });
+    const ro = new ResizeObserver(sync);
+    ro.observe(el);
+    if (el.firstElementChild) ro.observe(el.firstElementChild);
+    return () => {
+      el.removeEventListener("scroll", sync);
+      ro.disconnect();
+    };
+  }, [scrollRef, sync]);
+  const thumbFrac = thumbEnd - thumbStart;
+  const visible = thumbFrac < 0.9999;
+  const handleThumbMouseDown = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    const el = scrollRef.current;
+    if (!el) return;
+    const startMouse = isV ? e.clientY : e.clientX;
+    const startScroll = isV ? el.scrollTop : el.scrollLeft;
+    const onMove = (e2) => {
+      const el2 = scrollRef.current;
+      const track = trackRef.current;
+      if (!el2 || !track) return;
+      const trackPx = isV ? track.clientHeight : track.clientWidth;
+      const thumbPx = trackPx * thumbFrac;
+      const delta = (isV ? e2.clientY : e2.clientX) - startMouse;
+      const maxScroll = scrollSizeRef.current - clientSizeRef.current;
+      const scrollDelta = delta / (trackPx - thumbPx) * maxScroll;
+      if (isV) el2.scrollTop = startScroll + scrollDelta;
+      else el2.scrollLeft = startScroll + scrollDelta;
+    };
+    const onUp = () => {
+      window.removeEventListener("mousemove", onMove);
+      window.removeEventListener("mouseup", onUp);
+    };
+    window.addEventListener("mousemove", onMove);
+    window.addEventListener("mouseup", onUp);
+  };
+  const handleTrackClick = (e) => {
+    const track = trackRef.current;
+    const el = scrollRef.current;
+    if (!track || !el) return;
+    const rect = track.getBoundingClientRect();
+    const clickFrac = isV ? (e.clientY - rect.top) / rect.height : (e.clientX - rect.left) / rect.width;
+    const targetFrac = Math.max(0, Math.min(1, (clickFrac - thumbFrac / 2) / (1 - thumbFrac)));
+    const maxScroll = scrollSizeRef.current - clientSizeRef.current;
+    if (isV) el.scrollTop = targetFrac * maxScroll;
+    else el.scrollLeft = targetFrac * maxScroll;
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: trackRef,
+      onClick: handleTrackClick,
+      className: cn("relative", !visible && "hidden", className),
+      style,
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "absolute rounded-full bg-foreground/20 hover:bg-foreground/35 transition-colors cursor-pointer",
+          onMouseDown: handleThumbMouseDown,
+          onClick: (e) => e.stopPropagation(),
+          style: isV ? { top: `${thumbStart * 100}%`, bottom: `${(1 - thumbEnd) * 100}%`, left: 2, right: 2 } : { left: `${thumbStart * 100}%`, right: `${(1 - thumbEnd) * 100}%`, top: 2, bottom: 2 }
+        }
+      )
+    }
+  );
+}
+var RowWrapperContext = React__default.createContext(null);
+function colStyle(col) {
+  const pinned = col.getIsPinned();
+  return {
+    width: col.getSize(),
+    flexShrink: 0,
+    ...pinned === "left" && {
+      position: "sticky",
+      left: col.getStart("left"),
+      zIndex: 1
+    },
+    ...pinned === "right" && {
+      position: "sticky",
+      right: col.getAfter("right"),
+      zIndex: 1
+    }
+  };
+}
+function isPinnedEdge(col, table) {
+  const pinned = col.getIsPinned();
+  if (pinned === "left") {
+    const leftCols = table.getLeftLeafColumns();
+    return leftCols[leftCols.length - 1]?.id === col.id ? "left-edge" : false;
+  }
+  if (pinned === "right") {
+    const rightCols = table.getRightLeafColumns();
+    return rightCols[0]?.id === col.id ? "right-edge" : false;
+  }
+  return false;
+}
+function DataGridHeaderRow({
+  headerGroup,
+  table,
+  enableColumnResizing,
+  virtual,
+  bordered,
+  tableWidthMode = "spacer",
+  enableColumnFilters,
+  filterDisplay = "row",
+  classNames
+}) {
+  const headers = headerGroup.headers;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "row",
+      className: "border-b border-border",
+      style: { display: "flex", width: "100%", height: "36px" },
+      children: [
+        headers.map((header, idx) => {
+          const edge = isPinnedEdge(header.column, table);
+          const isLast = idx === headers.length - 1;
+          const isFillLast = tableWidthMode === "fill-last" && isLast;
+          return /* @__PURE__ */ jsxs(
+            "div",
+            {
+              role: "columnheader",
+              "data-col-id": header.column.id,
+              className: cn(
+                "relative px-3 text-xs font-medium h-full bg-muted",
+                "text-muted-foreground whitespace-normal",
+                "select-none group",
+                header.column.getCanSort() && "cursor-pointer",
+                bordered && "border-r border-border",
+                edge === "left-edge" && "shadow-[1px_0_0_0_hsl(var(--border))]",
+                edge === "right-edge" && "shadow-[-1px_0_0_0_hsl(var(--border))]",
+                classNames?.headerCell
+              ),
+              style: virtual ? {
+                display: "flex",
+                alignItems: "center",
+                width: isFillLast ? void 0 : header.getSize(),
+                ...isFillLast && { flex: 1, minWidth: header.getSize() }
+              } : {
+                ...colStyle(header.column),
+                display: "flex",
+                alignItems: "center",
+                overflow: "hidden",
+                ...isFillLast && { flex: 1, width: "auto" }
+              },
+              onClick: header.column.getCanSort() ? header.column.getToggleSortingHandler() : void 0,
+              children: [
+                /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1 min-w-0 overflow-hidden flex-1", children: [
+                  /* @__PURE__ */ jsx("span", { className: "truncate", children: header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext()) }),
+                  header.column.getCanSort() && /* @__PURE__ */ jsx("span", { className: "ml-1 shrink-0", children: header.column.getIsSorted() === "asc" ? /* @__PURE__ */ jsx(ArrowUp, { className: "h-3.5 w-3.5" }) : header.column.getIsSorted() === "desc" ? /* @__PURE__ */ jsx(ArrowDown, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx(ArrowUpDown, { className: "h-3.5 w-3.5 opacity-40 group-hover:opacity-100" }) })
+                ] }),
+                enableColumnFilters && filterDisplay === "icon" && /* @__PURE__ */ jsx(HeaderFilterPopover, { col: header.column, table }),
+                enableColumnResizing && header.column.getCanResize() && /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    onMouseDown: (e) => {
+                      e.stopPropagation();
+                      header.getResizeHandler()(e);
+                    },
+                    onTouchStart: (e) => {
+                      e.stopPropagation();
+                      header.getResizeHandler()(e);
+                    },
+                    onClick: (e) => e.stopPropagation(),
+                    className: "absolute right-0 top-0 h-full w-3 cursor-col-resize select-none touch-none",
+                    children: /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        className: cn(
+                          "absolute right-1.5 top-2 bottom-2 w-px rounded-full transition-colors",
+                          "opacity-0 group-hover:opacity-100",
+                          header.column.getIsResizing() ? "opacity-100 bg-primary" : "bg-border hover:bg-primary"
+                        )
+                      }
+                    )
+                  }
+                )
+              ]
+            },
+            header.id
+          );
+        }),
+        !virtual && tableWidthMode === "spacer" && /* @__PURE__ */ jsx(
+          "div",
+          {
+            role: "columnheader",
+            style: { flex: 1, minWidth: 0, padding: 0 },
+            className: "bg-muted"
+          }
+        )
+      ]
+    }
+  );
+}
+function HeaderFilterPopover({
+  col,
+  table
+}) {
+  const [open, setOpen] = useState(false);
+  const focusRef = useCallback((el) => {
+    el?.focus({ preventScroll: true });
+  }, []);
+  const ft = col.columnDef.meta?.filterType;
+  if (ft === false || ft === void 0) return null;
+  const hasFilter = col.getIsFiltered();
+  const filterValue = col.getFilterValue() ?? "";
+  const numFilter = col.getFilterValue();
+  const min = numFilter?.[0] ?? "";
+  const max = numFilter?.[1] ?? "";
+  return /* @__PURE__ */ jsx("div", { onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx(
+      PopoverTrigger,
+      {
+        render: (props) => /* @__PURE__ */ jsx(
+          Button,
+          {
+            ...props,
+            variant: "ghost",
+            size: "icon-xs",
+            className: cn(
+              "h-5 w-5 shrink-0",
+              hasFilter ? "text-primary opacity-100" : "opacity-0 group-hover:opacity-60"
+            ),
+            children: /* @__PURE__ */ jsx(Filter, { className: "h-3 w-3" })
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx(PopoverContent, { side: "bottom", align: "start", className: "w-52", children: ft === "select" ? /* @__PURE__ */ jsx(SelectFilterCell, { col, table, onSelect: () => setOpen(false) }) : ft === "multi-select" ? /* @__PURE__ */ jsx(MultiSelectContent, { col, table }) : ft === "number" ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: "Min" }),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            type: "number",
+            placeholder: "Min",
+            value: min,
+            onChange: (e) => col.setFilterValue((old = ["", ""]) => [
+              e.target.value,
+              old[1]
+            ]),
+            className: "h-7 text-xs"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: "Max" }),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            type: "number",
+            placeholder: "Max",
+            value: max,
+            onChange: (e) => col.setFilterValue((old = ["", ""]) => [
+              old[0],
+              e.target.value
+            ]),
+            className: "h-7 text-xs"
+          }
+        )
+      ] }),
+      hasFilter && /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "ghost",
+          size: "sm",
+          className: "h-7 text-xs",
+          onClick: () => col.setFilterValue(void 0),
+          children: "Clear"
+        }
+      )
+    ] }) : /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          type: "text",
+          placeholder: "Filter\u2026",
+          value: filterValue,
+          onChange: (e) => col.setFilterValue(e.target.value || void 0),
+          className: "h-7 text-xs pr-6",
+          ref: focusRef
+        }
+      ),
+      filterValue && /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "ghost",
+          size: "icon-xs",
+          onClick: () => col.setFilterValue(void 0),
+          className: "absolute right-0.5 top-1/2 -translate-y-1/2",
+          children: /* @__PURE__ */ jsx(X, {})
+        }
+      )
+    ] }) })
+  ] }) });
+}
+function NumberFilterPopover({ col }) {
+  const numFilter = col.getFilterValue();
+  const min = numFilter?.[0] ?? "";
+  const max = numFilter?.[1] ?? "";
+  const hasFilter = min !== "" || max !== "";
+  const label = hasFilter ? [min && `\u2265${min}`, max && `\u2264${max}`].filter(Boolean).join(" ") : "Filter\u2026";
+  return /* @__PURE__ */ jsxs(Popover, { children: [
+    /* @__PURE__ */ jsx(
+      PopoverTrigger,
+      {
+        render: (props) => /* @__PURE__ */ jsxs(
+          Button,
+          {
+            ...props,
+            variant: hasFilter ? "outline" : "ghost",
+            size: "sm",
+            className: "h-7 w-full justify-start text-xs font-normal",
+            children: [
+              /* @__PURE__ */ jsx(SlidersHorizontal, { className: "h-3 w-3 shrink-0" }),
+              /* @__PURE__ */ jsx("span", { className: "truncate", children: label })
+            ]
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx(PopoverContent, { side: "bottom", align: "start", className: "w-48", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: "Min" }),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            type: "number",
+            placeholder: "Min",
+            value: min,
+            onChange: (e) => col.setFilterValue((old = ["", ""]) => [e.target.value, old[1]]),
+            className: "h-7 text-xs"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: "Max" }),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            type: "number",
+            placeholder: "Max",
+            value: max,
+            onChange: (e) => col.setFilterValue((old = ["", ""]) => [old[0], e.target.value]),
+            className: "h-7 text-xs"
+          }
+        )
+      ] }),
+      hasFilter && /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "ghost",
+          size: "sm",
+          className: "h-7 text-xs",
+          onClick: () => col.setFilterValue(void 0),
+          children: "Clear"
+        }
+      )
+    ] }) })
+  ] });
+}
+function SelectFilterCell({
+  col,
+  table,
+  onSelect
+}) {
+  const [options, setOptions] = useState(null);
+  const filterValue = col.getFilterValue() ?? "";
+  const handleOpenChange = (open) => {
+    if (open && options === null) {
+      const vals = /* @__PURE__ */ new Set();
+      table.getCoreRowModel().rows.forEach((row) => {
+        const v = row.getValue(col.id);
+        if (v != null) vals.add(String(v));
+      });
+      const sorted = Array.from(vals).sort();
+      setOptions([{ label: "All", value: null }, ...sorted.map((v) => ({ label: v, value: v }))]);
+    }
+  };
+  const items = options ?? [];
+  return /* @__PURE__ */ jsxs(
+    Select,
+    {
+      items,
+      value: filterValue || null,
+      onValueChange: (val) => {
+        col.setFilterValue(val ?? void 0);
+        onSelect?.();
+      },
+      onOpenChange: handleOpenChange,
+      children: [
+        /* @__PURE__ */ jsx(SelectTrigger, { size: "sm", className: "h-7 w-full text-xs", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+        /* @__PURE__ */ jsx(SelectContent, { children: items.map((item) => /* @__PURE__ */ jsx(SelectItem, { value: item.value, children: item.label }, item.value ?? "__all__")) })
+      ]
+    }
+  );
+}
+function MultiSelectContent({ col, table }) {
+  const [options, setOptions] = useState(null);
+  const selected = col.getFilterValue() ?? [];
+  useEffect(() => {
+    const vals = /* @__PURE__ */ new Set();
+    table.getCoreRowModel().rows.forEach((row) => {
+      const v = row.getValue(col.id);
+      if (v != null) vals.add(String(v));
+    });
+    setOptions(Array.from(vals).sort());
+  }, []);
+  const toggle = (val) => {
+    const next = selected.includes(val) ? selected.filter((v) => v !== val) : [...selected, val];
+    col.setFilterValue(next.length > 0 ? next : void 0);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5", children: [
+    /* @__PURE__ */ jsx("div", { className: "max-h-48 overflow-y-auto flex flex-col gap-0.5", children: (options ?? []).map((opt) => /* @__PURE__ */ jsxs(
+      "label",
+      {
+        className: "flex items-center gap-2 px-1 py-1 cursor-pointer hover:bg-muted rounded-sm text-xs select-none",
+        children: [
+          /* @__PURE__ */ jsx(
+            Checkbox,
+            {
+              checked: selected.includes(opt),
+              onCheckedChange: () => toggle(opt),
+              className: "shrink-0"
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "truncate", children: opt })
+        ]
+      },
+      opt
+    )) }),
+    selected.length > 0 && /* @__PURE__ */ jsxs(
+      Button,
+      {
+        variant: "ghost",
+        size: "sm",
+        className: "h-6 text-xs mt-1",
+        onClick: () => col.setFilterValue(void 0),
+        children: [
+          "Clear (",
+          selected.length,
+          ")"
+        ]
+      }
+    )
+  ] });
+}
+function MultiSelectFilterCell({
+  col,
+  table
+}) {
+  const selected = col.getFilterValue() ?? [];
+  const label = selected.length > 0 ? `${selected.length} selected` : "Filter\u2026";
+  return /* @__PURE__ */ jsxs(Popover, { children: [
+    /* @__PURE__ */ jsx(
+      PopoverTrigger,
+      {
+        render: (props) => /* @__PURE__ */ jsx(
+          Button,
+          {
+            ...props,
+            variant: selected.length > 0 ? "outline" : "ghost",
+            size: "sm",
+            className: "h-7 w-full justify-start text-xs font-normal",
+            children: /* @__PURE__ */ jsx("span", { className: "truncate", children: label })
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx(PopoverContent, { side: "bottom", align: "start", className: "w-48", children: /* @__PURE__ */ jsx(MultiSelectContent, { col, table }) })
+  ] });
+}
+function DataGridFilterRow({
+  visibleLeafColumns,
+  table,
+  virtual,
+  bordered,
+  tableWidthMode = "spacer"
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "row",
+      className: "border-b border-border bg-muted",
+      style: { display: "flex", width: "100%", height: "36px" },
+      children: [
+        visibleLeafColumns.map((col) => {
+          const ft = col.columnDef.meta?.filterType;
+          const filterValue = col.getFilterValue() ?? "";
+          const cellStyle = virtual ? { display: "flex", alignItems: "center", width: col.getSize() } : { ...colStyle(col), display: "flex", alignItems: "center" };
+          if (ft === false) {
+            return /* @__PURE__ */ jsx(
+              "div",
+              {
+                role: "columnheader",
+                className: cn("px-2 py-1", bordered && "border-r border-border"),
+                style: cellStyle
+              },
+              col.id
+            );
+          }
+          return /* @__PURE__ */ jsx(
+            "div",
+            {
+              role: "columnheader",
+              className: cn("px-2 py-1 font-normal", bordered && "border-r border-border"),
+              style: cellStyle,
+              children: ft === "select" ? /* @__PURE__ */ jsx(SelectFilterCell, { col, table }) : ft === "multi-select" ? /* @__PURE__ */ jsx(MultiSelectFilterCell, { col, table }) : ft === "number" ? /* @__PURE__ */ jsx(NumberFilterPopover, { col }) : /* @__PURE__ */ jsxs("div", { className: "relative w-full", children: [
+                /* @__PURE__ */ jsx(
+                  Input,
+                  {
+                    type: "text",
+                    placeholder: "Filter\u2026",
+                    value: filterValue,
+                    onChange: (e) => col.setFilterValue(e.target.value || void 0),
+                    className: "h-7 text-xs pr-6"
+                  }
+                ),
+                filterValue && /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    variant: "ghost",
+                    size: "icon-xs",
+                    onClick: () => col.setFilterValue(void 0),
+                    className: "absolute right-0.5 top-1/2 -translate-y-1/2",
+                    children: /* @__PURE__ */ jsx(X, {})
+                  }
+                )
+              ] })
+            },
+            col.id
+          );
+        }),
+        !virtual && tableWidthMode === "spacer" && /* @__PURE__ */ jsx(
+          "div",
+          {
+            role: "columnheader",
+            style: { flex: 1, minWidth: 0, padding: 0 },
+            className: "bg-muted"
+          }
+        )
+      ]
+    }
+  );
+}
+function DataGridBodyRow({
+  row,
+  table,
+  onRowClick,
+  rowCursor,
+  style,
+  dataIndex,
+  measureRef,
+  showSpacer = false,
+  fillLast = false,
+  bordered = false,
+  rowHeight,
+  onActionTrigger,
+  classNames
+}) {
+  const visibleCells = row.getVisibleCells();
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "row",
+      "data-index": dataIndex,
+      ref: measureRef,
+      onClick: onRowClick ? () => onRowClick(row.original) : void 0,
+      className: cn(
+        "flex w-full border-b border-border transition-colors",
+        onRowClick || rowCursor ? "cursor-pointer hover:bg-muted/50" : "hover:bg-muted/30",
+        classNames?.row
+      ),
+      style: { minHeight: rowHeight, ...style },
+      children: [
+        visibleCells.map((cell, idx) => {
+          const meta = cell.column.columnDef.meta;
+          const edge = isPinnedEdge(cell.column, table);
+          const isLast = idx === visibleCells.length - 1;
+          const isFillCell = fillLast && isLast;
+          return /* @__PURE__ */ jsx(
+            "div",
+            {
+              role: "gridcell",
+              "data-col-id": cell.column.id,
+              className: cn(
+                "flex items-center px-3 py-1 overflow-hidden bg-background",
+                meta?.align === "right" && "justify-end",
+                meta?.align === "center" && "justify-center",
+                meta?.wrap && "items-start whitespace-normal",
+                bordered && "border-r border-border",
+                edge === "left-edge" && "shadow-[1px_0_0_0_hsl(var(--border))]",
+                edge === "right-edge" && "shadow-[-1px_0_0_0_hsl(var(--border))]",
+                classNames?.cell
+              ),
+              style: { ...colStyle(cell.column), ...isFillCell && { flex: 1, width: "auto" } },
+              children: meta?.actions != null ? /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: "ghost",
+                  size: "icon-xs",
+                  className: "h-6 w-6",
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    onActionTrigger?.(row.original, e.currentTarget);
+                  },
+                  children: /* @__PURE__ */ jsx(MoreHorizontal, { className: "h-4 w-4" })
+                }
+              ) : flexRender(cell.column.columnDef.cell, cell.getContext())
+            },
+            cell.id
+          );
+        }),
+        showSpacer && /* @__PURE__ */ jsx(
+          "div",
+          {
+            role: "gridcell",
+            style: { flex: 1, minWidth: 0, padding: 0 },
+            className: "bg-background"
+          }
+        )
+      ]
+    }
+  );
+}
+function DataGridVirtualBody({
+  rows,
+  table,
+  rowVirtualizer,
+  onRowClick,
+  rowCursor,
+  bordered,
+  rowHeight,
+  onActionTrigger,
+  tableWidthMode = "spacer",
+  classNames
+}) {
+  const virtualItems = rowVirtualizer.getVirtualItems();
+  const totalSize = rowVirtualizer.getTotalSize();
+  return /* @__PURE__ */ jsx("div", { role: "rowgroup", style: { display: "block", height: totalSize, position: "relative" }, children: virtualItems.map((virtualRow) => {
+    const row = rows[virtualRow.index];
+    return /* @__PURE__ */ jsx(
+      DataGridBodyRow,
+      {
+        row,
+        table,
+        onRowClick,
+        rowCursor,
+        bordered,
+        rowHeight,
+        dataIndex: virtualRow.index,
+        measureRef: rowVirtualizer.measureElement,
+        style: {
+          position: "absolute",
+          width: "100%",
+          transform: `translateY(${virtualRow.start}px)`
+        },
+        onActionTrigger,
+        fillLast: tableWidthMode === "fill-last",
+        classNames
+      },
+      row.id
+    );
+  }) });
+}
+function DataGridFlexBody({
+  rows,
+  table,
+  visibleLeafColumns,
+  isLoading,
+  emptyMessage,
+  emptyContent,
+  onRowClick,
+  rowCursor,
+  bordered,
+  rowHeight,
+  onActionTrigger,
+  tableWidthMode = "spacer",
+  classNames
+}) {
+  const showSpacer = tableWidthMode === "spacer";
+  const fillLast = tableWidthMode === "fill-last";
+  const RowWrapper = useContext(RowWrapperContext);
+  if (isLoading) {
+    return /* @__PURE__ */ jsx("div", { role: "rowgroup", style: { display: "block" }, className: "[&>div:last-child]:border-b-0", children: Array.from({ length: 6 }).map((_, i) => /* @__PURE__ */ jsxs(
+      "div",
+      {
+        role: "row",
+        className: "flex w-full border-b border-border",
+        style: { minHeight: rowHeight },
+        children: [
+          visibleLeafColumns.map((col, colIdx) => {
+            const isLast = colIdx === visibleLeafColumns.length - 1;
+            return /* @__PURE__ */ jsx(
+              "div",
+              {
+                role: "gridcell",
+                "data-col-id": col.id,
+                className: cn(
+                  "flex items-center px-3 py-1",
+                  bordered && "border-r border-border"
+                ),
+                style: {
+                  ...colStyle(col),
+                  ...fillLast && isLast && { flex: 1, width: "auto" }
+                },
+                children: /* @__PURE__ */ jsx("div", { className: "h-4 w-full animate-pulse rounded bg-muted" })
+              },
+              col.id
+            );
+          }),
+          showSpacer && /* @__PURE__ */ jsx("div", { role: "gridcell", style: { flex: 1, minWidth: 0, padding: 0 } })
+        ]
+      },
+      i
+    )) });
+  }
+  if (rows.length === 0) {
+    return /* @__PURE__ */ jsx("div", { role: "rowgroup", style: { display: "block" }, children: /* @__PURE__ */ jsx("div", { role: "row", className: "flex w-full", children: /* @__PURE__ */ jsx("div", { role: "gridcell", className: "flex-1", children: emptyContent ?? /* @__PURE__ */ jsx("div", { className: "py-12 text-center text-muted-foreground text-sm", children: emptyMessage }) }) }) });
+  }
+  return /* @__PURE__ */ jsx("div", { role: "rowgroup", style: { display: "block" }, className: "[&>div:last-child]:border-b-0", children: rows.map((row) => {
+    const bodyRow = /* @__PURE__ */ jsx(
+      DataGridBodyRow,
+      {
+        row,
+        table,
+        onRowClick,
+        rowCursor,
+        bordered,
+        rowHeight,
+        showSpacer,
+        fillLast,
+        onActionTrigger,
+        classNames
+      }
+    );
+    if (RowWrapper) {
+      return /* @__PURE__ */ jsx(RowWrapper, { row, children: bodyRow }, row.id);
+    }
+    return /* @__PURE__ */ jsx(React__default.Fragment, { children: bodyRow }, row.id);
+  }) });
+}
+function DataGridTableView({
+  table,
+  rows,
+  containerRef,
+  isLoading,
+  emptyMessage = "No data",
+  emptyContent,
+  showHeader = true,
+  onRowClick,
+  rowCursor,
+  enableColumnResizing = true,
+  enableColumnFilters = false,
+  filterDisplay = "row",
+  tableHeight,
+  tableWidthMode = "spacer",
+  rowHeight,
+  estimateRowHeight,
+  overscan = 10,
+  loadMoreRef,
+  isFetchingNextPage,
+  bordered = false,
+  onMeasureColumns,
+  classNames
+}) {
+  const effectiveEstimate = estimateRowHeight ?? rowHeight ?? 33;
+  const [actionMenuOpen, setActionMenuOpen] = useState(false);
+  const [activeRow, setActiveRow] = useState(null);
+  const anchorRef = useRef(null);
+  const handleActionTrigger = useCallback((row, el) => {
+    const rect = el.getBoundingClientRect();
+    anchorRef.current = { getBoundingClientRect: () => rect };
+    setActiveRow(row);
+    setActionMenuOpen(true);
+  }, []);
+  const headerGroups = table.getHeaderGroups();
+  const visibleLeafColumns = table.getVisibleLeafColumns();
+  const actionCol = visibleLeafColumns.find((col) => col.columnDef.meta?.actions != null);
+  const actionItems = actionCol && activeRow ? actionCol.columnDef.meta.actions(activeRow) : [];
+  const hasFixedHeight = tableHeight != null && tableHeight !== "auto";
+  const virtual = hasFixedHeight && rows.length >= VIRTUAL_THRESHOLD;
+  useEffect(() => {
+    if (!table.getState().columnSizingInfo.isResizingColumn) {
+      onMeasureColumns?.();
+    }
+  });
+  const headerScrollRef = useRef(null);
+  const bodyScrollRef = useRef(null);
+  const syncScroll = useCallback((e) => {
+    if (headerScrollRef.current) {
+      headerScrollRef.current.scrollLeft = e.currentTarget.scrollLeft;
+    }
+  }, []);
+  const rowVirtualizer = useVirtualizer({
+    count: rows.length,
+    getScrollElement: () => bodyScrollRef.current,
+    estimateSize: () => effectiveEstimate,
+    overscan,
+    enabled: virtual
+  });
+  const bodyWrapperStyle = {
+    display: "flex",
+    flexDirection: "column",
+    position: "relative",
+    ...tableHeight && tableHeight !== "auto" ? { height: tableHeight } : {}
+  };
+  const bodyStyle = {
+    flex: 1,
+    minHeight: 0,
+    overflow: "auto"
+  };
+  const innerWidth = table.getTotalSize();
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: containerRef,
+        style: {
+          position: "relative",
+          width: "100%",
+          minWidth: 0,
+          isolation: "isolate",
+          // Limit reflow scope to this subtree.
+          // 'layout paint' isolates layout and paint without size containment,
+          // which is required since the outer div's height is determined by its children.
+          contain: "layout paint"
+        },
+        className: cn("rounded-md border border-border", classNames?.container),
+        children: [
+          showHeader && /* @__PURE__ */ jsx("div", { ref: headerScrollRef, style: { overflow: "hidden" }, className: cn("bg-muted", classNames?.header), children: /* @__PURE__ */ jsxs("div", { style: { width: innerWidth, minWidth: "100%" }, children: [
+            headerGroups.map((headerGroup) => /* @__PURE__ */ jsx(
+              DataGridHeaderRow,
+              {
+                headerGroup,
+                table,
+                enableColumnResizing,
+                enableColumnFilters,
+                filterDisplay,
+                virtual,
+                bordered,
+                tableWidthMode,
+                classNames
+              },
+              headerGroup.id
+            )),
+            enableColumnFilters && filterDisplay !== "icon" && /* @__PURE__ */ jsx(
+              DataGridFilterRow,
+              {
+                visibleLeafColumns,
+                table,
+                virtual,
+                bordered,
+                tableWidthMode
+              }
+            )
+          ] }) }),
+          /* @__PURE__ */ jsxs("div", { style: bodyWrapperStyle, children: [
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                ref: bodyScrollRef,
+                style: bodyStyle,
+                onScroll: syncScroll,
+                className: "scrollbar-none",
+                children: [
+                  /* @__PURE__ */ jsx(ScrollTable, { style: { width: innerWidth, minWidth: "100%" }, children: virtual ? /* @__PURE__ */ jsx(
+                    DataGridVirtualBody,
+                    {
+                      rows,
+                      table,
+                      rowVirtualizer,
+                      onRowClick,
+                      rowCursor,
+                      bordered,
+                      rowHeight,
+                      onActionTrigger: actionCol ? handleActionTrigger : void 0,
+                      tableWidthMode,
+                      classNames
+                    }
+                  ) : /* @__PURE__ */ jsx(
+                    DataGridFlexBody,
+                    {
+                      rows,
+                      table,
+                      visibleLeafColumns,
+                      isLoading,
+                      emptyMessage,
+                      emptyContent,
+                      onRowClick,
+                      rowCursor,
+                      bordered,
+                      rowHeight,
+                      onActionTrigger: actionCol ? handleActionTrigger : void 0,
+                      tableWidthMode,
+                      classNames
+                    }
+                  ) }),
+                  loadMoreRef && /* @__PURE__ */ jsx("div", { ref: loadMoreRef, className: "py-2 flex justify-center", children: isFetchingNextPage && /* @__PURE__ */ jsx(Loader2, { className: "h-5 w-5 animate-spin text-muted-foreground" }) })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              CustomScrollbar,
+              {
+                scrollRef: bodyScrollRef,
+                direction: "vertical",
+                className: "absolute right-0 top-0 bottom-0",
+                style: { width: 8 }
+              }
+            ),
+            /* @__PURE__ */ jsx(CustomScrollbar, { scrollRef: bodyScrollRef, direction: "horizontal", style: { height: 8 } })
+          ] })
+        ]
+      }
+    ),
+    actionCol && /* @__PURE__ */ jsx(Menu.Root, { open: actionMenuOpen, onOpenChange: setActionMenuOpen, children: /* @__PURE__ */ jsx(Menu.Portal, { children: /* @__PURE__ */ jsx(
+      Menu.Positioner,
+      {
+        anchor: anchorRef.current,
+        side: "bottom",
+        align: "end",
+        sideOffset: 4,
+        className: "isolate z-50 outline-none",
+        children: /* @__PURE__ */ jsx(Menu.Popup, { className: "min-w-32 origin-(--transform-origin) overflow-hidden rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 outline-none data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", children: actionItems.map((item, i) => /* @__PURE__ */ jsxs(
+          Menu.Item,
+          {
+            disabled: item.disabled,
+            "data-variant": item.variant ?? "default",
+            onClick: () => {
+              item.onClick(activeRow);
+              setActionMenuOpen(false);
+            },
+            className: "relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+            children: [
+              item.icon,
+              item.label
+            ]
+          },
+          i
+        )) })
+      }
+    ) }) })
+  ] });
+}
+function DataGridShell({
+  wrapperRef,
+  containerRef,
+  table,
+  rows,
+  isSized,
+  measure,
+  error,
+  leftFilters,
+  rightFilters,
+  loadMoreRef,
+  isFetchingNextPage,
+  footer,
+  ...viewConfig
+}) {
+  if (error) {
+    return /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-12 text-sm text-destructive", children: error.message });
+  }
+  return /* @__PURE__ */ jsxs("div", { ref: wrapperRef, className: "flex flex-col gap-3 w-full min-w-0 overflow-hidden", children: [
+    /* @__PURE__ */ jsx(DataGridToolbar, { table, leftFilters, rightFilters }),
+    /* @__PURE__ */ jsx("div", { className: cn("min-w-0", !isSized && "invisible"), children: /* @__PURE__ */ jsx(
+      DataGridTableView,
+      {
+        table,
+        rows,
+        containerRef,
+        loadMoreRef,
+        isFetchingNextPage,
+        onMeasureColumns: measure,
+        ...viewConfig
+      }
+    ) }),
+    footer
+  ] });
+}
+function DataGrid(props) {
+  const {
+    error,
+    leftFilters,
+    rightFilters,
+    enablePagination = true,
+    pageSizes = [10, 20, 50, 100],
+    totalCount,
+    tableRef
+  } = props;
+  const { wrapperRef, containerRef, table, rows, isSized, measure } = useDataGridBase(props);
+  useEffect(() => {
+    if (tableRef) {
+      tableRef.current = table;
+      return () => {
+        tableRef.current = null;
+      };
+    }
+  }, [table, tableRef]);
+  return /* @__PURE__ */ jsx(
+    DataGridShell,
+    {
+      ...props,
+      wrapperRef,
+      containerRef,
+      table,
+      rows,
+      isSized,
+      measure,
+      error,
+      leftFilters,
+      rightFilters,
+      footer: enablePagination ? /* @__PURE__ */ jsx(DataGridPaginationBar, { table, pageSizes, totalCount }) : null
+    }
+  );
+}
+function useInfiniteScroll({
+  hasNextPage,
+  isFetchingNextPage,
+  fetchNextPage,
+  rootMargin = "100px",
+  enabled = true
+}) {
+  const loadMoreRef = useRef(null);
+  useEffect(() => {
+    if (!enabled || !loadMoreRef.current) return;
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry?.isIntersecting && hasNextPage && !isFetchingNextPage) {
+          fetchNextPage?.();
+        }
+      },
+      { rootMargin }
+    );
+    observer.observe(loadMoreRef.current);
+    return () => observer.disconnect();
+  }, [hasNextPage, isFetchingNextPage, fetchNextPage, rootMargin, enabled]);
+  return { loadMoreRef };
+}
+function DataGridInfinity(props) {
+  const {
+    error,
+    leftFilters,
+    rightFilters,
+    hasNextPage,
+    isFetchingNextPage,
+    fetchNextPage,
+    rootMargin = "100px",
+    isLoading
+  } = props;
+  const { wrapperRef, containerRef, table, rows, isSized, measure } = useDataGridBase({
+    ...props,
+    enablePagination: false
+  });
+  const { loadMoreRef } = useInfiniteScroll({
+    hasNextPage,
+    isFetchingNextPage,
+    fetchNextPage,
+    rootMargin,
+    enabled: !isLoading
+  });
+  return /* @__PURE__ */ jsx(
+    DataGridShell,
+    {
+      ...props,
+      wrapperRef,
+      containerRef,
+      table,
+      rows,
+      isSized,
+      measure,
+      error,
+      leftFilters,
+      rightFilters,
+      loadMoreRef,
+      isFetchingNextPage
+    }
+  );
+}
+var RowDragContext = React__default.createContext(null);
+function SortableRow({ row, children }) {
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
+    id: row.id
+  });
+  return /* @__PURE__ */ jsx(RowDragContext.Provider, { value: { listeners, attributes, isDragging }, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: setNodeRef,
+      style: {
+        transform: CSS.Transform.toString(transform),
+        transition,
+        opacity: isDragging ? 0.4 : 1,
+        position: "relative",
+        zIndex: isDragging ? 1 : 0
+      },
+      children
+    }
+  ) });
+}
+function DataGridDrag(props) {
+  const { data = [], onRowReorder, getRowId } = props;
+  const { wrapperRef, containerRef, table, rows, isSized, measure } = useDataGridBase({
+    ...props,
+    // Sorting changes visual order — incompatible with manual row reordering
+    enableSorting: false,
+    // Pagination splits data — reorder applies within the loaded set only
+    enablePagination: false,
+    getRowId
+  });
+  const [activeRowId, setActiveRowId] = useState(null);
+  const sensors = useSensors(
+    useSensor(PointerSensor, {
+      // Require a small move before drag starts — prevents click from triggering drag
+      activationConstraint: { distance: 5 }
+    })
+  );
+  const rowIds = rows.map((r) => r.id);
+  const handleDragStart = ({ active }) => {
+    setActiveRowId(String(active.id));
+  };
+  const handleDragEnd = ({ active, over }) => {
+    setActiveRowId(null);
+    if (!over || active.id === over.id) return;
+    const activeRow2 = rows.find((r) => r.id === String(active.id));
+    const overRow = rows.find((r) => r.id === String(over.id));
+    if (!activeRow2 || !overRow) return;
+    const fromIdx = data.indexOf(activeRow2.original);
+    const toIdx = data.indexOf(overRow.original);
+    if (fromIdx === -1 || toIdx === -1) return;
+    onRowReorder(arrayMove(data, fromIdx, toIdx));
+  };
+  const activeRow = activeRowId ? rows.find((r) => r.id === activeRowId) : null;
+  return /* @__PURE__ */ jsx(RowWrapperContext.Provider, { value: SortableRow, children: /* @__PURE__ */ jsxs(
+    DndContext,
+    {
+      sensors,
+      collisionDetection: closestCenter,
+      onDragStart: handleDragStart,
+      onDragEnd: handleDragEnd,
+      children: [
+        /* @__PURE__ */ jsx(SortableContext, { items: rowIds, strategy: verticalListSortingStrategy, children: /* @__PURE__ */ jsx(
+          DataGridShell,
+          {
+            ...props,
+            wrapperRef,
+            containerRef,
+            table,
+            rows,
+            isSized,
+            measure,
+            footer: null
+          }
+        ) }),
+        /* @__PURE__ */ jsx(DragOverlay, { children: activeRow && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "rounded border border-primary/40 bg-primary/5 shadow-xl ring-1 ring-primary/20",
+            style: { height: props.rowHeight ?? 36 }
+          }
+        ) })
+      ]
+    }
+  ) });
+}
+function ColumnVisibilityDropdown({ table }) {
+  return /* @__PURE__ */ jsxs(Popover, { children: [
+    /* @__PURE__ */ jsx(
+      PopoverTrigger,
+      {
+        render: (props) => /* @__PURE__ */ jsxs(Button, { ...props, variant: "outline", size: "sm", className: "gap-1.5", children: [
+          /* @__PURE__ */ jsx(Columns3, { className: "h-4 w-4" }),
+          "Columns"
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx(PopoverContent, { align: "end", className: "w-48", children: /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1.5", children: table.getAllLeafColumns().filter((col) => col.id !== "__select__").map((col) => /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-2 cursor-pointer text-sm", children: [
+      /* @__PURE__ */ jsx(Checkbox, { checked: col.getIsVisible(), onCheckedChange: col.toggleVisibility }),
+      /* @__PURE__ */ jsx("span", { className: "truncate", children: typeof col.columnDef.header === "string" ? col.columnDef.header : col.id })
+    ] }, col.id)) }) })
+  ] });
+}
+function GlobalSearch({
+  table,
+  placeholder = "Search\u2026",
+  className
+}) {
+  const [value, setValue] = useState(String(table.getState().globalFilter ?? ""));
+  useEffect(() => {
+    const timeout = setTimeout(() => table.setGlobalFilter(value || void 0), 200);
+    return () => clearTimeout(timeout);
+  }, [value, table]);
+  return /* @__PURE__ */ jsxs("div", { className: cn("relative", className), children: [
+    /* @__PURE__ */ jsx(Search, { className: "absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground pointer-events-none" }),
+    /* @__PURE__ */ jsx(
+      Input,
+      {
+        value,
+        onChange: (e) => setValue(e.target.value),
+        placeholder,
+        className: "h-8 pl-8 pr-7 text-xs w-52"
+      }
+    ),
+    value && /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "ghost",
+        size: "icon-xs",
+        onClick: () => {
+          setValue("");
+          table.setGlobalFilter(void 0);
+        },
+        className: "absolute right-0.5 top-1/2 -translate-y-1/2",
+        children: /* @__PURE__ */ jsx(X, { className: "h-3 w-3" })
+      }
+    )
+  ] });
+}
+function SelectFilter({ table, columnId, label }) {
+  const [options, setOptions] = useState(null);
+  const col = table.getColumn(columnId);
+  const value = col?.getFilterValue() ?? "";
+  const handleOpenChange = (open) => {
+    if (open && options === null) {
+      const vals = /* @__PURE__ */ new Set();
+      table.getCoreRowModel().rows.forEach((row) => {
+        const v = row.getValue(columnId);
+        if (v != null) vals.add(String(v));
+      });
+      setOptions(Array.from(vals).sort());
+    }
+  };
+  if (!col) return null;
+  return /* @__PURE__ */ jsxs(Popover, { onOpenChange: handleOpenChange, children: [
+    /* @__PURE__ */ jsx(
+      PopoverTrigger,
+      {
+        render: (props) => /* @__PURE__ */ jsxs(
+          Button,
+          {
+            ...props,
+            variant: value ? "secondary" : "outline",
+            size: "sm",
+            className: "h-8 gap-1.5 text-xs",
+            children: [
+              value ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsxs("span", { className: "font-normal text-muted-foreground", children: [
+                  label,
+                  ":"
+                ] }),
+                " ",
+                value
+              ] }) : label,
+              /* @__PURE__ */ jsx(ChevronDown, { className: "h-3.5 w-3.5 text-muted-foreground" })
+            ]
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx(PopoverContent, { align: "start", className: "w-44 p-1", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+      value && /* @__PURE__ */ jsxs(
+        "button",
+        {
+          onClick: () => col.setFilterValue(void 0),
+          className: "flex items-center gap-2 px-2 py-1.5 text-xs rounded-sm hover:bg-muted text-muted-foreground",
+          children: [
+            /* @__PURE__ */ jsx(X, { className: "h-3 w-3" }),
+            " Clear"
+          ]
+        }
+      ),
+      (options ?? []).map((opt) => /* @__PURE__ */ jsxs(
+        "button",
+        {
+          onClick: () => col.setFilterValue(opt === value ? void 0 : opt),
+          className: "flex items-center gap-2 px-2 py-1.5 text-xs rounded-sm hover:bg-muted",
+          children: [
+            /* @__PURE__ */ jsx(Check, { className: cn("h-3 w-3", opt === value ? "opacity-100" : "opacity-0") }),
+            opt
+          ]
+        },
+        opt
+      ))
+    ] }) })
+  ] });
+}
+function MultiSelectFilter({
+  table,
+  columnId,
+  label
+}) {
+  const [options, setOptions] = useState(null);
+  const col = table.getColumn(columnId);
+  const selected = col?.getFilterValue() ?? [];
+  useEffect(() => {
+    const vals = /* @__PURE__ */ new Set();
+    table.getCoreRowModel().rows.forEach((row) => {
+      const v = row.getValue(columnId);
+      if (v != null) vals.add(String(v));
+    });
+    setOptions(Array.from(vals).sort());
+  }, []);
+  const toggle = (val) => {
+    if (!col) return;
+    const next = selected.includes(val) ? selected.filter((v) => v !== val) : [...selected, val];
+    col.setFilterValue(next.length > 0 ? next : void 0);
+  };
+  if (!col) return null;
+  return /* @__PURE__ */ jsxs(Popover, { children: [
+    /* @__PURE__ */ jsx(
+      PopoverTrigger,
+      {
+        render: (props) => /* @__PURE__ */ jsxs(
+          Button,
+          {
+            ...props,
+            variant: selected.length > 0 ? "secondary" : "outline",
+            size: "sm",
+            className: "h-8 gap-1.5 text-xs",
+            children: [
+              selected.length > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsxs("span", { className: "font-normal text-muted-foreground", children: [
+                  label,
+                  ":"
+                ] }),
+                " ",
+                selected.length,
+                " selected"
+              ] }) : label,
+              /* @__PURE__ */ jsx(ChevronDown, { className: "h-3.5 w-3.5 text-muted-foreground" })
+            ]
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx(PopoverContent, { align: "start", className: "w-48", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5", children: [
+      /* @__PURE__ */ jsx("div", { className: "max-h-52 overflow-y-auto flex flex-col gap-0.5", children: (options ?? []).map((opt) => /* @__PURE__ */ jsxs(
+        "label",
+        {
+          className: "flex items-center gap-2 px-1 py-1 cursor-pointer hover:bg-muted rounded-sm text-xs select-none",
+          children: [
+            /* @__PURE__ */ jsx(
+              Checkbox,
+              {
+                checked: selected.includes(opt),
+                onCheckedChange: () => toggle(opt),
+                className: "shrink-0"
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: "truncate", children: opt })
+          ]
+        },
+        opt
+      )) }),
+      selected.length > 0 && /* @__PURE__ */ jsxs(
+        Button,
+        {
+          variant: "ghost",
+          size: "sm",
+          className: "h-6 text-xs mt-1",
+          onClick: () => col.setFilterValue(void 0),
+          children: [
+            "Clear (",
+            selected.length,
+            ")"
+          ]
+        }
+      )
+    ] }) })
+  ] });
+}
+function TreeCell({ row, indentSize = 16, children }) {
+  const canExpand = row.getCanExpand();
+  const indent = row.depth * indentSize;
+  return /* @__PURE__ */ jsxs("div", { style: { paddingLeft: indent }, className: "flex items-center gap-1 min-w-0", children: [
+    canExpand ? /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: (e) => {
+          e.stopPropagation();
+          row.toggleExpanded();
+        },
+        className: "flex items-center justify-center w-5 h-5 shrink-0 rounded hover:bg-black/10 dark:hover:bg-white/10 transition-colors",
+        children: row.getIsExpanded() ? /* @__PURE__ */ jsx(ChevronDown, { className: "h-3.5 w-3.5 text-foreground/60" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "h-3.5 w-3.5 text-foreground/60" })
+      }
+    ) : (
+      // Leaf or non-expandable: spacer keeps content aligned with siblings
+      /* @__PURE__ */ jsx("span", { className: "w-5 h-5 shrink-0" })
+    ),
+    children
+  ] });
+}
+function DragHandleCell() {
+  const ctx = useContext(RowDragContext);
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      ...ctx?.listeners,
+      ...ctx?.attributes,
+      className: "flex items-center justify-center w-full h-full cursor-grab active:cursor-grabbing text-muted-foreground/40 hover:text-muted-foreground transition-colors",
+      style: { touchAction: "none" },
+      children: /* @__PURE__ */ jsx(GripVertical, { className: "h-4 w-4" })
+    }
+  );
+}
+
+// src/core/engine/DataStore.ts
+function createDataStore(getRowId) {
+  const map = /* @__PURE__ */ new Map();
+  const orderedIds = [];
+  const listeners = /* @__PURE__ */ new Set();
+  let version = 0;
+  let cachedSnapshot = [];
+  let cachedSnapshotVersion = -1;
+  function notify() {
+    version++;
+    listeners.forEach((fn) => fn());
+  }
+  return {
+    get: (id) => map.get(id),
+    getSnapshot: () => {
+      if (cachedSnapshotVersion !== version) {
+        cachedSnapshot = orderedIds.map((id) => map.get(id));
+        cachedSnapshotVersion = version;
+      }
+      return cachedSnapshot;
+    },
+    getVersion: () => version,
+    subscribe: (listener) => {
+      listeners.add(listener);
+      return () => listeners.delete(listener);
+    },
+    applyTransaction: (tx) => {
+      let changed = false;
+      tx.add?.forEach((item, i) => {
+        const id = getRowId(item, map.size + i);
+        if (!map.has(id)) {
+          map.set(id, item);
+          orderedIds.push(id);
+          changed = true;
+        }
+      });
+      tx.update?.forEach(({ id, data }) => {
+        if (map.has(id)) {
+          map.set(id, { ...map.get(id), ...data });
+          changed = true;
+        }
+      });
+      tx.remove?.forEach((id) => {
+        if (map.delete(id)) {
+          const idx = orderedIds.indexOf(id);
+          if (idx !== -1) orderedIds.splice(idx, 1);
+          changed = true;
+        }
+      });
+      if (changed) notify();
+    }
+  };
+}
+
+// src/core/engine/useDataStore.ts
+function useDataStore(options) {
+  const { getRowId } = options;
+  return useMemo(() => createDataStore(getRowId), []);
+}
+
+export { ColumnVisibilityDropdown, DataGrid, DataGridDrag, DataGridInfinity, DragHandleCell, GlobalSearch, MultiSelectFilter, SelectFilter, TreeCell, createDataStore, useDataStore };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map