@structyl/data-table 1.0.0

package/dist/index.mjs

@@ -0,0 +1,4434 @@
+import * as React from 'react';
+import { useReactTable, getFacetedUniqueValues, getFacetedRowModel, getGroupedRowModel, getExpandedRowModel, getPaginationRowModel, getFilteredRowModel, getSortedRowModel, getCoreRowModel, flexRender } from '@tanstack/react-table';
+export { createColumnHelper } from '@tanstack/react-table';
+import { useVirtualizer } from '@tanstack/react-virtual';
+import { ChevronsDown, ChevronsUpDown, Filter, GitBranch, Bookmark, RefreshCw, Printer, Minimize2, Maximize2, HelpCircle, ChevronUp, ChevronDown, ChevronsLeft, ChevronLeft, ChevronRight, ChevronsRight, Columns3, X, BarChart2, AlignJustify, Download, FileSpreadsheet, Trash2 } from '@structyl/icons';
+import * as XLSX from 'xlsx';
+import { Input, Button, DropdownMenu, Select, Popover, Combobox, Checkbox, Drawer, Tooltip, ColorPicker } from '@structyl/styled';
+import { hsvaToHex } from '@structyl/primitives';
+import { cn } from '@structyl/utils';
+
+// src/data-table.tsx
+var defaultLocaleText = {
+  searchPlaceholder: "Search\u2026",
+  filters: "Filters",
+  filterColumnLabel: "Column",
+  filterOperatorLabel: "Operator",
+  filterValueLabel: "Value",
+  filterLogicLabel: "Logic",
+  addFilter: "Add filter",
+  addFilterGroup: "Add group",
+  clearFilters: "Clear filters",
+  removeFilter: "Remove filter",
+  removeFilterGroup: "Remove group",
+  columns: "Columns",
+  columnMenu: "Column menu",
+  sortAsc: "Sort ascending",
+  sortDesc: "Sort descending",
+  clearSort: "Clear sort",
+  hideColumn: "Hide column",
+  pinLeft: "Pin left",
+  pinRight: "Pin right",
+  unpin: "Unpin",
+  groupBy: "Group by",
+  ungroup: "Ungroup",
+  selectColumn: "Select column",
+  selectedRows: (selected, total) => `${selected} of ${total} row(s) selected.`,
+  page: (page, pageCount) => `Page ${page} of ${pageCount}`,
+  previous: "Previous",
+  next: "Next",
+  noResults: "No results.",
+  loading: "Loading\u2026",
+  loadingMore: "Loading more\u2026",
+  error: "Something went wrong.",
+  addRow: "Add row",
+  cancel: "Cancel",
+  save: "Save",
+  rowActions: "Actions",
+  rowTotal: "Row total",
+  pinRowTop: "Pin top",
+  pinRowBottom: "Pin bottom",
+  total: "Total",
+  expandRow: "Expand row",
+  collapseRow: "Collapse row",
+  expandAll: "Expand all",
+  collapseAll: "Collapse all",
+  copyRows: "Copy rows",
+  copyRow: "Copy row",
+  copyColumn: "Copy column",
+  density: "Density",
+  densityCompact: "Compact",
+  densityStandard: "Standard",
+  densityComfortable: "Comfortable",
+  refresh: "Refresh",
+  exportCsv: "Export CSV",
+  exportJson: "Export JSON",
+  noRows: "No data.",
+  rowsPerPage: "Rows per page",
+  totalRows: (count) => `${count.toLocaleString()} rows`,
+  goToPage: "Go to page",
+  firstPage: "First page",
+  lastPage: "Last page",
+  bulkActionsTitle: (count) => `${count} selected`,
+  clearSelection: "Clear selection",
+  rowNumberHeader: "#",
+  statusBarRows: (count) => `${count.toLocaleString()} rows`,
+  statusBarSelected: (count) => `${count} selected`,
+  printTitle: "Print",
+  enterFullscreen: "Enter fullscreen",
+  exitFullscreen: "Exit fullscreen",
+  autoSizeColumn: "Auto-size column",
+  quickFilterPlaceholder: "Filter\u2026",
+  lockColumn: "Lock column",
+  unlockColumn: "Unlock column",
+  export: "Export",
+  exportCSV: "Export as CSV",
+  exportJSON: "Export as JSON",
+  exportSelectedCSV: "Export selected rows",
+  conditionalFormatting: "Conditional formatting"
+};
+var liveDataStyleInjected = false;
+var printStyleInjected = false;
+function injectLiveDataStyles() {
+  if (liveDataStyleInjected || typeof document === "undefined") return;
+  liveDataStyleInjected = true;
+  const styleEl = document.createElement("style");
+  styleEl.textContent = `
+@keyframes cell-flash {
+  0% { background-color: hsl(var(--primary) / 0.3); }
+  100% { background-color: transparent; }
+}
+@keyframes row-slide-in {
+  0% { opacity: 0; transform: translateX(-12px); }
+  100% { opacity: 1; transform: translateX(0); }
+}
+@keyframes row-fade-out {
+  0% { opacity: 1; background-color: hsl(var(--destructive) / 0.12); }
+  100% { opacity: 0; background-color: hsl(var(--destructive) / 0.12); }
+}
+[data-flash="true"] { animation: cell-flash 1.2s ease-out; }
+[data-new-row="true"] { animation: row-slide-in 0.4s ease-out; }
+[data-removed-row="true"] { animation: row-fade-out 0.6s ease-out forwards; }
+`;
+  document.head.appendChild(styleEl);
+}
+function injectPrintStyles() {
+  if (printStyleInjected || typeof document === "undefined") return;
+  printStyleInjected = true;
+  const styleEl = document.createElement("style");
+  styleEl.textContent = `
+@media print {
+  [data-datatable-root] .data-table-toolbar { display: none !important; }
+  [data-datatable-root] .data-table-pagination { display: none !important; }
+  [data-datatable-root] { overflow: visible !important; height: auto !important; max-height: none !important; }
+  [data-datatable-root] table { page-break-inside: auto; width: 100% !important; }
+  [data-datatable-root] tr { page-break-inside: avoid; page-break-after: auto; }
+  [data-datatable-root] thead { display: table-header-group; }
+  [data-datatable-root] tfoot { display: table-footer-group; }
+}
+`;
+  document.head.appendChild(styleEl);
+}
+function applyPrintTheme() {
+  if (typeof document === "undefined") return () => {
+  };
+  const rootStyle = getComputedStyle(document.documentElement);
+  const tokens = [
+    "--background",
+    "--foreground",
+    "--muted",
+    "--muted-foreground",
+    "--border",
+    "--primary",
+    "--primary-foreground",
+    "--secondary",
+    "--secondary-foreground",
+    "--accent",
+    "--accent-foreground",
+    "--card",
+    "--card-foreground",
+    "--destructive",
+    "--destructive-foreground",
+    "--ring",
+    "--radius",
+    "--sidebar",
+    "--sidebar-foreground"
+  ];
+  const vars = tokens.map((t) => {
+    const v = rootStyle.getPropertyValue(t).trim();
+    return v ? `${t}: ${v};` : "";
+  }).filter(Boolean).join(" ");
+  const el = document.createElement("style");
+  el.setAttribute("data-structyl-print-theme", "");
+  el.textContent = `
+@media print {
+  :root { ${vars} color-scheme: light dark; }
+  *, *::before, *::after { print-color-adjust: exact !important; -webkit-print-color-adjust: exact !important; }
+  [data-datatable-root] .data-table-toolbar { display: none !important; }
+  [data-datatable-root] .data-table-pagination { display: none !important; }
+  [data-datatable-root] { overflow: visible !important; height: auto !important; max-height: none !important; }
+  [data-datatable-root] table { page-break-inside: auto; width: 100% !important; }
+  [data-datatable-root] tr { page-break-inside: avoid; page-break-after: auto; }
+  [data-datatable-root] thead { display: table-header-group; }
+  [data-datatable-root] tfoot { display: table-footer-group; }
+}
+`;
+  document.head.appendChild(el);
+  return () => el.remove();
+}
+function useDataFlash(data, liveDataKey, enabled) {
+  const idKey = liveDataKey ?? "id";
+  const prevDataRef = React.useRef(/* @__PURE__ */ new Map());
+  const [flashedCells, setFlashedCells] = React.useState(/* @__PURE__ */ new Map());
+  const [newRowIds, setNewRowIds] = React.useState(/* @__PURE__ */ new Set());
+  const [removedRowIds, setRemovedRowIds] = React.useState(/* @__PURE__ */ new Set());
+  React.useEffect(() => {
+    if (!enabled) return;
+    const prevMap = prevDataRef.current;
+    const currentMap = /* @__PURE__ */ new Map();
+    const changedCells = /* @__PURE__ */ new Map();
+    const addedIds = /* @__PURE__ */ new Set();
+    for (const row of data) {
+      const rowId = String(row[idKey] ?? "");
+      const rowRecord = row;
+      currentMap.set(rowId, rowRecord);
+      if (!prevMap.has(rowId)) {
+        addedIds.add(rowId);
+      } else {
+        const prevRow = prevMap.get(rowId);
+        for (const key of Object.keys(rowRecord)) {
+          if (rowRecord[key] !== prevRow[key]) {
+            if (!changedCells.has(rowId)) changedCells.set(rowId, /* @__PURE__ */ new Set());
+            changedCells.get(rowId).add(key);
+          }
+        }
+      }
+    }
+    const removedIds = /* @__PURE__ */ new Set();
+    for (const id of prevMap.keys()) {
+      if (!currentMap.has(id)) removedIds.add(id);
+    }
+    prevDataRef.current = currentMap;
+    let timer;
+    if (changedCells.size > 0) {
+      setFlashedCells(changedCells);
+      timer = setTimeout(() => setFlashedCells(/* @__PURE__ */ new Map()), 1200);
+    } else if (addedIds.size > 0) {
+      setNewRowIds(addedIds);
+      timer = setTimeout(() => setNewRowIds(/* @__PURE__ */ new Set()), 400);
+    } else if (removedIds.size > 0) {
+      setRemovedRowIds(removedIds);
+      timer = setTimeout(() => setRemovedRowIds(/* @__PURE__ */ new Set()), 600);
+    }
+    return () => {
+      if (timer !== void 0) clearTimeout(timer);
+    };
+  }, [data, enabled]);
+  return { flashedCells, newRowIds, removedRowIds };
+}
+function DataTable(props) {
+  const {
+    columns,
+    data,
+    virtual,
+    virtualColumns,
+    enableSorting = true,
+    enableFiltering = false,
+    enableAdvancedFiltering = false,
+    enableGlobalSearch = false,
+    enableRowSelection = false,
+    enableColumnSelection = false,
+    enablePagination = false,
+    enableExpanding = false,
+    enableGrouping = false,
+    enableColumnResizing = false,
+    enableColumnReordering = false,
+    enableRowReordering = false,
+    enableColumnPinning = false,
+    enableRowPinning = false,
+    enableColumnConfiguration = false,
+    pageSize = 10,
+    loading,
+    loadingMore,
+    loadingVariant = "text",
+    skeletonRows = 5,
+    error,
+    emptyState,
+    className,
+    tableClassName,
+    toolbar,
+    toolbarStart,
+    toolbarEnd,
+    globalFilter: globalFilterProp,
+    defaultGlobalFilter,
+    onGlobalFilterChange,
+    globalFilterPlaceholder,
+    advancedFilter: advancedFilterProp,
+    defaultAdvancedFilter,
+    onAdvancedFilterChange,
+    getAdvancedFilterValue,
+    rowActions,
+    inlineCreateRow,
+    aggregations,
+    showColumnTotals = !!aggregations,
+    rowTotals,
+    rowPinning: rowPinningProp,
+    defaultRowPinning,
+    onRowPinningChange,
+    columnSelection: columnSelectionProp,
+    defaultColumnSelection,
+    onColumnSelectionChange,
+    renderDetailPanel,
+    getCellColSpan,
+    getCellRowSpan,
+    getRowClassName,
+    getRowStyle,
+    getRowHeight,
+    height,
+    maxHeight,
+    fullHeight,
+    autoHeight,
+    onLoadMore,
+    hasMore,
+    loadMoreThreshold = 96,
+    onRowOrderChange,
+    onColumnOrderChange,
+    localeText,
+    serverSide,
+    getRowId,
+    getSubRows,
+    onRowSelectionChange,
+    onSortingChange,
+    tableRef,
+    density: densityProp,
+    defaultDensity = "standard",
+    enableDensityToggle = false,
+    onDensityChange,
+    treeData = false,
+    enableCopyPaste = false,
+    onCopy,
+    toolbarActions,
+    onRefresh,
+    slots,
+    pageSizeOptions = [10, 25, 50, 100],
+    showTotalRows = true,
+    noRowsOverlay,
+    noResultsOverlay,
+    bulkActions,
+    rowActionMenu,
+    rowActionButtons,
+    enableRowCopy = false,
+    enableColumnCopy = false,
+    getCellClassName,
+    enableRowNumbers = false,
+    striped = false,
+    enableCellTooltip = false,
+    stateKey,
+    enableStatusBar = false,
+    fullscreen: fullscreenProp,
+    onFullscreenChange,
+    enableFullscreen = false,
+    loadingRowIds,
+    onPrint,
+    quickFilterColumns,
+    onCellContextMenu,
+    onRowContextMenu,
+    enableColumnAutoSize = false,
+    lockedColumns: lockedColumnsProp,
+    onLockedColumnsChange,
+    mobileBreakpoint,
+    enableExport = false,
+    enableConditionalFormatting = false,
+    conditionalFormattingRules: conditionalFormattingRulesProp,
+    onConditionalFormattingRulesChange,
+    // Feature 3
+    getRowStatus,
+    // Feature 4
+    rowHeight,
+    // Feature 5
+    enableFilterChips = false,
+    // Feature 6
+    enablePaste = false,
+    // Feature 7
+    dir,
+    // Feature 8
+    enableKeyboardShortcuts = false,
+    // Feature 10
+    editMode: _editMode,
+    onCellEditCommit: _onCellEditCommit,
+    enableUndoRedo = false,
+    dirtyRows: dirtyRowsProp,
+    onDirtyRowsChange,
+    // Round 2: Feature 1
+    enableCellSelection = false,
+    onCellSelectionChange,
+    // Round 2: Feature 2
+    enableToolPanel = false,
+    defaultToolPanelTab = "columns",
+    // Round 2: Feature 3
+    enableLiveData = false,
+    liveDataKey,
+    onLiveDataUpdate,
+    // Round 2: Feature 5A
+    loadDetailPanel,
+    detailPanelCacheSize = 20,
+    // Round 2: Feature 5B
+    enablePrintStyles = false,
+    // Round 3: Feature 1
+    enablePivot = false,
+    pivotConfig: pivotConfigProp,
+    onPivotConfigChange,
+    // Round 3: Feature 2
+    enableSavedViews = false,
+    savedViews: savedViewsProp,
+    onSavedViewsChange,
+    // Round 3: Feature 3
+    ariaLabel,
+    ariaLabelledBy,
+    // Round 3: Feature 4
+    enableHeaderStats = false,
+    headerStatsConfig,
+    // Round 3: Feature 5
+    enableValidation = false,
+    onValidationChange,
+    // Round 3: Feature 6
+    locale: propLocale
+  } = props;
+  const [internalLockedColumns, setInternalLockedColumns] = React.useState(
+    lockedColumnsProp ?? []
+  );
+  const lockedColumns = lockedColumnsProp ?? internalLockedColumns;
+  const handleLockedColumnsChange = React.useCallback(
+    (cols) => {
+      setInternalLockedColumns(cols);
+      onLockedColumnsChange?.(cols);
+    },
+    [onLockedColumnsChange]
+  );
+  const [internalConditionalRules, setInternalConditionalRules] = React.useState(
+    conditionalFormattingRulesProp ?? []
+  );
+  const conditionalFormattingRules = conditionalFormattingRulesProp ?? internalConditionalRules;
+  const handleConditionalRulesChange = React.useCallback(
+    (rules) => {
+      setInternalConditionalRules(rules);
+      onConditionalFormattingRulesChange?.(rules);
+    },
+    [onConditionalFormattingRulesChange]
+  );
+  const [cfDrawerOpen, setCfDrawerOpen] = React.useState(false);
+  const [cfInitialColumnId, setCfInitialColumnId] = React.useState();
+  const handleOpenCfDrawer = React.useCallback((columnId) => {
+    setCfInitialColumnId(columnId);
+    setCfDrawerOpen(true);
+  }, []);
+  const text = React.useMemo(
+    () => ({ ...defaultLocaleText, ...localeText }),
+    [localeText]
+  );
+  const [sorting, setSorting] = React.useState(serverSide?.state.sorting ?? []);
+  const [columnFilters, setColumnFilters] = React.useState(
+    serverSide?.state.filters ?? []
+  );
+  const [internalGlobalFilter, setInternalGlobalFilter] = React.useState(
+    serverSide?.state.globalFilter ?? defaultGlobalFilter ?? ""
+  );
+  const [internalAdvancedFilter, setInternalAdvancedFilter] = React.useState(serverSide?.state.advancedFilter ?? defaultAdvancedFilter);
+  const [columnVisibility, setColumnVisibility] = React.useState({});
+  const [rowSelection, setRowSelection] = React.useState(
+    serverSide?.state.rowSelection ?? {}
+  );
+  const [expanded, setExpanded] = React.useState({});
+  const [grouping, setGrouping] = React.useState([]);
+  const [columnSizing, setColumnSizing] = React.useState({});
+  const [columnOrder, setColumnOrder] = React.useState([]);
+  const [columnPinning, setColumnPinning] = React.useState({});
+  const [pagination, setPagination] = React.useState(
+    serverSide?.state.pagination ?? { pageIndex: 0, pageSize }
+  );
+  const [internalRowPinning, setInternalRowPinning] = React.useState(
+    serverSide?.state.rowSelection ? {} : defaultRowPinning ?? {}
+  );
+  const [internalColumnSelection, setInternalColumnSelection] = React.useState(
+    defaultColumnSelection ?? []
+  );
+  const [draggedRowId, setDraggedRowId] = React.useState(null);
+  const [draggedColumnId, setDraggedColumnId] = React.useState(null);
+  const [internalDensity, setInternalDensity] = React.useState(
+    densityProp ?? defaultDensity
+  );
+  const [internalFullscreen, setInternalFullscreen] = React.useState(false);
+  const [_pasteVersion, setPasteVersion] = React.useState(0);
+  const [internalPivotConfig, setInternalPivotConfig] = React.useState();
+  const pivotConfig = pivotConfigProp ?? internalPivotConfig;
+  const [pivotDrawerOpen, setPivotDrawerOpen] = React.useState(false);
+  const handlePivotConfigChange = React.useCallback(
+    (config) => {
+      setInternalPivotConfig(config);
+      onPivotConfigChange?.(config);
+    },
+    [onPivotConfigChange]
+  );
+  const [internalViews, setInternalViews] = React.useState(savedViewsProp ?? []);
+  const savedViews = savedViewsProp ?? internalViews;
+  const [savedViewsDrawerOpen, setSavedViewsDrawerOpen] = React.useState(false);
+  const handleViewsChange = React.useCallback(
+    (views) => {
+      setInternalViews(views);
+      onSavedViewsChange?.(views);
+    },
+    [onSavedViewsChange]
+  );
+  const [shortcutsOpen, setShortcutsOpen] = React.useState(false);
+  const [cellSelection, setCellSelection] = React.useState(null);
+  const [isSelectingCells, setIsSelectingCells] = React.useState(false);
+  const handleCellSelectionChange = React.useCallback(
+    (next) => {
+      setCellSelection(next);
+      onCellSelectionChange?.(next);
+    },
+    [onCellSelectionChange]
+  );
+  React.useEffect(() => {
+    if (!enableCellSelection) return;
+    const handleMouseUp = () => setIsSelectingCells(false);
+    document.addEventListener("mouseup", handleMouseUp);
+    return () => document.removeEventListener("mouseup", handleMouseUp);
+  }, [enableCellSelection]);
+  const [bulkEditValue, setBulkEditValue] = React.useState("");
+  const [toolPanelTab, setToolPanelTab] = React.useState(
+    defaultToolPanelTab
+  );
+  const [toolPanelOpen, setToolPanelOpen] = React.useState(false);
+  const [statsColumnId, setStatsColumnId] = React.useState();
+  const handleViewStats = React.useCallback((columnId) => {
+    setStatsColumnId(columnId);
+    setToolPanelTab("stats");
+    setToolPanelOpen(true);
+  }, []);
+  const detailPanelCacheRef = React.useRef(/* @__PURE__ */ new Map());
+  const detailPanelLoadingRef = React.useRef(/* @__PURE__ */ new Set());
+  const [detailPanelVersion, setDetailPanelVersion] = React.useState(0);
+  const [_editHistory, setEditHistory] = React.useState([]);
+  const [_redoStack, setRedoStack] = React.useState([]);
+  const [internalDirtyRows, setInternalDirtyRows] = React.useState(/* @__PURE__ */ new Set());
+  const dirtyRows = dirtyRowsProp ?? internalDirtyRows;
+  const handleDirtyRowsChange = React.useCallback(
+    (next) => {
+      setInternalDirtyRows(next);
+      onDirtyRowsChange?.(next);
+    },
+    [onDirtyRowsChange]
+  );
+  const hasMounted = React.useRef(false);
+  React.useEffect(() => {
+    hasMounted.current = true;
+  }, []);
+  const { flashedCells, newRowIds, removedRowIds } = useDataFlash(data, liveDataKey, enableLiveData);
+  React.useEffect(() => {
+    if (!enableLiveData || flashedCells.size === 0) return;
+    const updatedIds = new Set(flashedCells.keys());
+    const updatedRows = data.filter((row) => {
+      const id = String(row[liveDataKey ?? "id"] ?? "");
+      return updatedIds.has(id);
+    });
+    if (updatedRows.length > 0) onLiveDataUpdate?.(updatedRows);
+  }, [flashedCells]);
+  React.useEffect(() => {
+    if (enableLiveData) injectLiveDataStyles();
+  }, [enableLiveData]);
+  React.useEffect(() => {
+    if (enablePrintStyles) injectPrintStyles();
+  }, [enablePrintStyles]);
+  React.useEffect(() => {
+    if (!stateKey) return;
+    try {
+      const raw = localStorage.getItem(`structyl-dt:${stateKey}`);
+      if (!raw) return;
+      const saved = JSON.parse(raw);
+      if (saved.sorting) setSorting(saved.sorting);
+      if (saved.columnFilters) setColumnFilters(saved.columnFilters);
+      if (saved.columnVisibility) setColumnVisibility(saved.columnVisibility);
+      if (saved.columnOrder) setColumnOrder(saved.columnOrder);
+      if (saved.columnSizing) setColumnSizing(saved.columnSizing);
+      if (saved.pagination) setPagination(saved.pagination);
+      if (saved.density) setInternalDensity(saved.density);
+    } catch {
+    }
+  }, [stateKey]);
+  const globalFilter = globalFilterProp ?? internalGlobalFilter;
+  const advancedFilter = advancedFilterProp ?? internalAdvancedFilter;
+  const rowPinning = rowPinningProp ?? internalRowPinning;
+  const selectedColumnIds = columnSelectionProp ?? internalColumnSelection;
+  const density = densityProp ?? internalDensity;
+  const isFullscreen = fullscreenProp ?? internalFullscreen;
+  const handleDensityChange = (next) => {
+    setInternalDensity(next);
+    onDensityChange?.(next);
+  };
+  const handleFullscreenToggle = React.useCallback(() => {
+    const el = rootElRef.current;
+    const supportsApi = typeof document !== "undefined" && !!document.fullscreenEnabled && !!el?.requestFullscreen;
+    if (supportsApi && el) {
+      if (!document.fullscreenElement) {
+        el.requestFullscreen().catch(() => {
+          setInternalFullscreen(true);
+          onFullscreenChange?.(true);
+        });
+      } else {
+        document.exitFullscreen().catch(() => {
+          setInternalFullscreen(false);
+          onFullscreenChange?.(false);
+        });
+      }
+    } else {
+      const next = !isFullscreen;
+      setInternalFullscreen(next);
+      onFullscreenChange?.(next);
+    }
+  }, [isFullscreen, onFullscreenChange]);
+  React.useEffect(() => {
+    if (typeof document === "undefined") return;
+    const onChange = () => {
+      const isFull = !!document.fullscreenElement;
+      setInternalFullscreen(isFull);
+      onFullscreenChange?.(isFull);
+    };
+    document.addEventListener("fullscreenchange", onChange);
+    return () => document.removeEventListener("fullscreenchange", onChange);
+  }, [onFullscreenChange]);
+  const persistState = React.useCallback(() => {
+    if (!stateKey) return;
+    try {
+      localStorage.setItem(
+        `structyl-dt:${stateKey}`,
+        JSON.stringify({
+          sorting,
+          columnFilters,
+          columnVisibility,
+          columnOrder,
+          columnSizing,
+          pagination,
+          density
+        })
+      );
+    } catch {
+    }
+  }, [stateKey, sorting, columnFilters, columnVisibility, columnOrder, columnSizing, pagination, density]);
+  React.useEffect(() => {
+    if (hasMounted.current) persistState();
+  }, [persistState]);
+  const globalFilterFn = React.useMemo(
+    () => (row, columnId, filterValue) => {
+      const query = normalizeSearch(filterValue);
+      if (!query) return true;
+      return normalizeSearch(row.getValue(columnId)).includes(query);
+    },
+    []
+  );
+  const advancedFilteredData = React.useMemo(() => {
+    if (!advancedFilter || serverSide) return data;
+    return data.filter(
+      (row) => evaluateFilterGroup(advancedFilter, row, getAdvancedFilterValue ?? getValueByPath)
+    );
+  }, [advancedFilter, data, getAdvancedFilterValue, serverSide]);
+  const normalizedColumns = React.useMemo(
+    () => normalizeColumnDefs(columns, propLocale),
+    [columns, propLocale]
+  );
+  const tableColumns = React.useMemo(() => {
+    const next = [];
+    if (enableRowNumbers) {
+      next.push(createRowNumberColumn(text));
+    }
+    if (enableRowSelection) {
+      next.push(createSelectionColumn(enableRowSelection === true));
+    }
+    next.push(...normalizedColumns);
+    if (rowTotals) {
+      next.push(createRowTotalColumn(rowTotals, text));
+    }
+    if (rowActionButtons?.length) {
+      next.push(createRowActionButtonsColumn(rowActionButtons, text));
+    }
+    if (rowActionMenu?.length) {
+      next.push(createRowActionMenuColumn(rowActionMenu, text));
+    }
+    if (rowActions) {
+      next.push(createActionColumn(rowActions, text));
+    }
+    return next;
+  }, [normalizedColumns, enableRowSelection, enableRowNumbers, rowActions, rowActionMenu, rowActionButtons, rowTotals, text]);
+  const handleSorting = (updater) => {
+    if (!hasMounted.current) return;
+    const next = typeof updater === "function" ? updater(sorting) : updater;
+    setSorting(next);
+    onSortingChange?.(next);
+    serverSide?.onStateChange({ ...serverSide.state, sorting: next });
+  };
+  const handleSelection = (updater) => {
+    if (!hasMounted.current) return;
+    const next = typeof updater === "function" ? updater(rowSelection) : updater;
+    setRowSelection(next);
+    onRowSelectionChange?.(next);
+    serverSide?.onStateChange({ ...serverSide.state, rowSelection: next });
+  };
+  const handlePagination = (updater) => {
+    if (!hasMounted.current) return;
+    const next = typeof updater === "function" ? updater(pagination) : updater;
+    setPagination(next);
+    serverSide?.onStateChange({ ...serverSide.state, pagination: next });
+  };
+  const handleFilters = (updater) => {
+    if (!hasMounted.current) return;
+    const next = typeof updater === "function" ? updater(columnFilters) : updater;
+    setColumnFilters(next);
+    serverSide?.onStateChange({ ...serverSide.state, filters: next });
+  };
+  const handleGlobalFilter = (next) => {
+    if (!hasMounted.current) return;
+    setInternalGlobalFilter(next);
+    onGlobalFilterChange?.(next);
+    serverSide?.onStateChange({ ...serverSide.state, globalFilter: next });
+  };
+  const handleAdvancedFilter = (next) => {
+    if (!hasMounted.current) return;
+    setInternalAdvancedFilter(next);
+    onAdvancedFilterChange?.(next);
+    serverSide?.onStateChange({ ...serverSide.state, advancedFilter: next });
+  };
+  const handleRowPinning = (next) => {
+    setInternalRowPinning(next);
+    onRowPinningChange?.(next);
+  };
+  const handleColumnSelection = (next) => {
+    setInternalColumnSelection(next);
+    onColumnSelectionChange?.(next);
+  };
+  const handleColumnOrder = (updater) => {
+    const next = typeof updater === "function" ? updater(columnOrder) : updater;
+    setColumnOrder(next);
+    onColumnOrderChange?.(next);
+  };
+  const tableRef2 = React.useRef(null);
+  const handleCopyPaste = React.useCallback(
+    (event) => {
+      const isCtrlOrMeta = event.ctrlKey || event.metaKey;
+      if (enableCopyPaste && isCtrlOrMeta && event.key === "c") {
+        const t = tableRef2.current;
+        if (!t) return;
+        const selected = t.getFilteredSelectedRowModel().rows;
+        const rowsToCopy = selected.length > 0 ? selected : t.getRowModel().rows.slice(0, 1);
+        const cols = t.getVisibleLeafColumns().filter((c) => !c.id.startsWith("__"));
+        const tsv = rowsToCopy.map((row) => cols.map((col) => String(row.getValue(col.id) ?? "")).join("	")).join("\n");
+        navigator.clipboard?.writeText(tsv).catch(() => void 0);
+        onCopy?.(rowsToCopy, tsv);
+        return;
+      }
+      if (enablePaste && isCtrlOrMeta && event.key === "v") {
+        event.preventDefault();
+        const t = tableRef2.current;
+        if (!t) return;
+        const selectedRows = t.getSelectedRowModel().rows;
+        if (selectedRows.length === 0) {
+          console.warn("[DataTable] enablePaste: no rows selected \u2014 paste skipped");
+          return;
+        }
+        navigator.clipboard?.readText().then((clipText) => {
+          const tsvRows = clipText.split("\n").map((line) => line.split("	"));
+          const visibleCols = t.getVisibleLeafColumns().filter(
+            (c) => !c.id.startsWith("__") && c.columnDef.meta?._structyl && c.columnDef.meta._structyl?.valueSetter
+          );
+          tsvRows.forEach((tsvCols, rowIdx) => {
+            const row = selectedRows[rowIdx];
+            if (!row) return;
+            tsvCols.forEach((cellValue, colIdx) => {
+              const col = visibleCols[colIdx];
+              if (!col) return;
+              const structylMeta = col.columnDef.meta?._structyl;
+              const vs = structylMeta?.valueSetter;
+              if (vs) vs(row.original, cellValue, row.index);
+            });
+          });
+          setPasteVersion((v) => v + 1);
+        }).catch(() => void 0);
+        return;
+      }
+      if (enableUndoRedo && isCtrlOrMeta && event.key === "z") {
+        event.preventDefault();
+        setEditHistory((prev) => {
+          if (prev.length === 0) return prev;
+          const last = prev[prev.length - 1];
+          if (!last) return prev;
+          const t = tableRef2.current;
+          if (t) {
+            const row = t.getRowModel().rows.find((r) => r.id === last.rowId);
+            if (row) {
+              const col = t.getColumn(last.field);
+              if (col) {
+                const structylMeta = col.columnDef.meta?._structyl;
+                const vs = structylMeta?.valueSetter;
+                if (vs) vs(row.original, last.oldValue, row.index);
+              }
+            }
+          }
+          setRedoStack((redo) => [...redo, last]);
+          const remaining = prev.slice(0, -1);
+          const stillDirty = new Set(remaining.map((e) => e.rowId));
+          if (!stillDirty.has(last.rowId)) {
+            const next = new Set(dirtyRows);
+            next.delete(last.rowId);
+            handleDirtyRowsChange(next);
+          }
+          return remaining;
+        });
+        return;
+      }
+      if (enableUndoRedo && isCtrlOrMeta && event.key === "y") {
+        event.preventDefault();
+        setRedoStack((prev) => {
+          if (prev.length === 0) return prev;
+          const last = prev[prev.length - 1];
+          if (!last) return prev;
+          const t = tableRef2.current;
+          if (t) {
+            const row = t.getRowModel().rows.find((r) => r.id === last.rowId);
+            if (row) {
+              const col = t.getColumn(last.field);
+              if (col) {
+                const structylMeta = col.columnDef.meta?._structyl;
+                const vs = structylMeta?.valueSetter;
+                if (vs) vs(row.original, last.newValue, row.index);
+              }
+            }
+          }
+          setEditHistory((history) => [...history, last]);
+          const next = new Set(dirtyRows);
+          next.add(last.rowId);
+          handleDirtyRowsChange(next);
+          return prev.slice(0, -1);
+        });
+        return;
+      }
+    },
+    [enableCopyPaste, onCopy, enablePaste, enableUndoRedo, dirtyRows, handleDirtyRowsChange]
+  );
+  const table = useReactTable({
+    data: advancedFilteredData,
+    columns: tableColumns,
+    state: {
+      sorting,
+      columnFilters,
+      globalFilter,
+      columnVisibility,
+      rowSelection,
+      expanded,
+      grouping,
+      columnSizing,
+      columnOrder,
+      columnPinning,
+      pagination
+    },
+    enableRowSelection: enableRowSelection !== false,
+    enableMultiRowSelection: enableRowSelection === true,
+    enableSorting,
+    enableFilters: enableFiltering || enableAdvancedFiltering || enableGlobalSearch,
+    enableGlobalFilter: enableGlobalSearch,
+    enableExpanding: enableExpanding || !!renderDetailPanel || treeData,
+    enableGrouping,
+    enableColumnResizing,
+    enableColumnPinning,
+    columnResizeMode: "onChange",
+    manualPagination: !!serverSide,
+    manualSorting: !!serverSide,
+    manualFiltering: !!serverSide,
+    rowCount: serverSide?.rowCount,
+    globalFilterFn,
+    getRowId,
+    getSubRows,
+    onSortingChange: handleSorting,
+    onColumnFiltersChange: handleFilters,
+    onGlobalFilterChange: handleGlobalFilter,
+    onColumnVisibilityChange: setColumnVisibility,
+    onRowSelectionChange: handleSelection,
+    onExpandedChange: setExpanded,
+    onGroupingChange: setGrouping,
+    onColumnSizingChange: setColumnSizing,
+    onColumnOrderChange: handleColumnOrder,
+    onColumnPinningChange: setColumnPinning,
+    onPaginationChange: handlePagination,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: enableSorting && !serverSide ? getSortedRowModel() : void 0,
+    getFilteredRowModel: (enableFiltering || enableGlobalSearch) && !serverSide ? getFilteredRowModel() : void 0,
+    getPaginationRowModel: enablePagination && !serverSide ? getPaginationRowModel() : void 0,
+    getExpandedRowModel: enableExpanding || renderDetailPanel || treeData ? getExpandedRowModel() : void 0,
+    getGroupedRowModel: enableGrouping ? getGroupedRowModel() : void 0,
+    getFacetedRowModel: enableFiltering ? getFacetedRowModel() : void 0,
+    getFacetedUniqueValues: enableFiltering ? getFacetedUniqueValues() : void 0
+  });
+  React.useEffect(() => {
+    tableRef2.current = table;
+    if (tableRef) tableRef.current = table;
+  }, [table, tableRef]);
+  const validationErrors = React.useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    if (!enableValidation) return map;
+    const rows = table.getFilteredRowModel().rows;
+    for (const row of rows) {
+      for (const cell of row.getVisibleCells()) {
+        const structylMeta = getStructylMeta(cell.column);
+        const dv = structylMeta.displayValidate;
+        if (!dv) continue;
+        const cellValue = cell.getValue();
+        const msg = dv(cellValue, row.original);
+        if (msg) {
+          if (!map.has(row.id)) map.set(row.id, /* @__PURE__ */ new Map());
+          map.get(row.id).set(cell.column.id, msg);
+        }
+      }
+    }
+    return map;
+  }, [enableValidation, table.getFilteredRowModel().rows]);
+  React.useEffect(() => {
+    if (!enableValidation) return;
+    const errors = [];
+    for (const [rowId, fieldMap] of validationErrors.entries()) {
+      for (const [field, message] of fieldMap.entries()) {
+        const row = table.getRow(rowId);
+        errors.push({ rowId, field, value: row ? row.getValue(field) : void 0, message });
+      }
+    }
+    onValidationChange?.(errors);
+  }, [validationErrors]);
+  React.useEffect(() => {
+    if (!enableKeyboardShortcuts) return;
+    const handleKeyDown = (event) => {
+      if (event.key === "?" && !event.ctrlKey && !event.metaKey && !event.altKey) {
+        const tag = event.target?.tagName?.toLowerCase();
+        if (tag === "input" || tag === "textarea") return;
+        event.preventDefault();
+        setShortcutsOpen((prev) => !prev);
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [enableKeyboardShortcuts]);
+  const tableContainerRef = React.useRef(null);
+  const [overlayBoundary, setOverlayBoundary] = React.useState(null);
+  const rootElRef = React.useRef(null);
+  const handleRootRef = React.useCallback((node) => {
+    rootElRef.current = node;
+    setOverlayBoundary(node);
+  }, []);
+  const allRows = table.getRowModel().rows;
+  const pinnedRows = splitPinnedRows(allRows, rowPinning);
+  const scrollRows = pinnedRows.center;
+  const isVirtual = !!virtual;
+  const rowVirtualOpts = typeof virtual === "object" && virtual !== null ? virtual : {};
+  const rowVirtualizer = useVirtualizer({
+    count: scrollRows.length,
+    estimateSize: (index) => {
+      const row = scrollRows[index];
+      return (row ? getRowHeight?.(row) : void 0) ?? rowVirtualOpts.estimatedRowHeight ?? 44;
+    },
+    getScrollElement: () => tableContainerRef.current,
+    overscan: rowVirtualOpts.overscan ?? 10,
+    enabled: isVirtual
+  });
+  const virtualRows = isVirtual ? rowVirtualizer.getVirtualItems() : [];
+  const fallbackVirtualRows = isVirtual && virtualRows.length === 0 ? scrollRows.slice(0, Math.min(scrollRows.length, Math.max(1, rowVirtualOpts.overscan ?? 10))) : [];
+  const paddingTop = isVirtual && virtualRows.length > 0 ? virtualRows[0]?.start ?? 0 : 0;
+  const paddingBottom = isVirtual && virtualRows.length > 0 ? rowVirtualizer.getTotalSize() - (virtualRows[virtualRows.length - 1]?.end ?? 0) : 0;
+  const leafColumns = table.getVisibleLeafColumns();
+  const isColumnVirtual = !!virtualColumns;
+  const columnVirtualOpts = typeof virtualColumns === "object" && virtualColumns !== null ? virtualColumns : {};
+  const columnVirtualizer = useVirtualizer({
+    count: leafColumns.length,
+    estimateSize: (index) => leafColumns[index]?.getSize() ?? columnVirtualOpts.estimatedColumnWidth ?? 160,
+    getScrollElement: () => tableContainerRef.current,
+    horizontal: true,
+    overscan: columnVirtualOpts.overscan ?? 4,
+    enabled: isColumnVirtual
+  });
+  const virtualColumnItems = isColumnVirtual ? columnVirtualizer.getVirtualItems() : [];
+  const fallbackColumnCount = Math.min(
+    leafColumns.length,
+    Math.max(1, (columnVirtualOpts.overscan ?? 4) * 2 + 4)
+  );
+  const renderedColumns = isColumnVirtual ? virtualColumnItems.length > 0 ? virtualColumnItems.map((item) => leafColumns[item.index]).filter(isDefined) : leafColumns.slice(0, fallbackColumnCount) : leafColumns;
+  const renderedColumnIds = new Set(renderedColumns.map((column) => column.id));
+  const columnPaddingLeft = isColumnVirtual && virtualColumnItems.length > 0 ? virtualColumnItems[0]?.start ?? 0 : 0;
+  const columnPaddingRight = isColumnVirtual && virtualColumnItems.length > 0 ? columnVirtualizer.getTotalSize() - (virtualColumnItems[virtualColumnItems.length - 1]?.end ?? 0) : 0;
+  const colSpan = Math.max(
+    renderedColumns.length + (columnPaddingLeft ? 1 : 0) + (columnPaddingRight ? 1 : 0),
+    1
+  );
+  const showToolbar = enableGlobalSearch || enableAdvancedFiltering || enableColumnConfiguration || toolbar || toolbarStart || toolbarEnd || toolbarActions && toolbarActions.length > 0 || enableDensityToggle || treeData || onRefresh || enableKeyboardShortcuts || enableExport || enableConditionalFormatting || enableFullscreen || onPrint || enablePivot || enableSavedViews;
+  const densityCellClass = density === "compact" ? "py-1 px-2" : density === "comfortable" ? "py-4 px-4" : "p-3";
+  const containerStyle = {
+    height: fullHeight ? "100%" : height,
+    maxHeight: autoHeight ? void 0 : maxHeight ?? (isVirtual ? 600 : void 0)
+  };
+  const handleScroll = React.useCallback(
+    (event) => {
+      if (!onLoadMore || !hasMore || loadingMore) return;
+      const element = event.currentTarget;
+      const remaining = element.scrollHeight - element.scrollTop - element.clientHeight;
+      if (remaining <= loadMoreThreshold) onLoadMore();
+    },
+    [hasMore, loadMoreThreshold, loadingMore, onLoadMore]
+  );
+  const pinRow = (rowId, position) => {
+    const top = new Set(rowPinning.top ?? []);
+    const bottom = new Set(rowPinning.bottom ?? []);
+    top.delete(rowId);
+    bottom.delete(rowId);
+    if (position === "top") top.add(rowId);
+    if (position === "bottom") bottom.add(rowId);
+    handleRowPinning({ top: Array.from(top), bottom: Array.from(bottom) });
+  };
+  const rowStatusBorderColor = {
+    success: "#22c55e",
+    warning: "#f59e0b",
+    error: "#ef4444",
+    info: "#3b82f6"
+  };
+  const normalizedCellSelection = React.useMemo(() => {
+    if (!cellSelection) return null;
+    return {
+      startRowIndex: Math.min(cellSelection.startRowIndex, cellSelection.endRowIndex),
+      startColIndex: Math.min(cellSelection.startColIndex, cellSelection.endColIndex),
+      endRowIndex: Math.max(cellSelection.startRowIndex, cellSelection.endRowIndex),
+      endColIndex: Math.max(cellSelection.startColIndex, cellSelection.endColIndex)
+    };
+  }, [cellSelection]);
+  const isCellSelected = React.useCallback(
+    (rowIndex, colIndex) => {
+      if (!normalizedCellSelection) return false;
+      return rowIndex >= normalizedCellSelection.startRowIndex && rowIndex <= normalizedCellSelection.endRowIndex && colIndex >= normalizedCellSelection.startColIndex && colIndex <= normalizedCellSelection.endColIndex;
+    },
+    [normalizedCellSelection]
+  );
+  const renderDataRow = (row, rowIndex) => {
+    const rowIsPinnedTop = rowPinning.top?.includes(row.id) ?? false;
+    const rowIsPinnedBottom = rowPinning.bottom?.includes(row.id) ?? false;
+    const isRowLoading = loadingRowIds?.includes(row.id) ?? false;
+    const rowStatus = getRowStatus?.(row);
+    const isDirty = dirtyRows.has(row.id);
+    const isNewRow = enableLiveData && newRowIds.has(row.id);
+    const isRemovedRow = enableLiveData && removedRowIds.has(row.id);
+    const computedRowHeight = rowHeight != null ? typeof rowHeight === "function" ? rowHeight(row, rowIndex) : rowHeight : void 0;
+    const rowStyle = {
+      ...getRowStyle?.(row),
+      borderLeft: rowStatus ? `3px solid ${rowStatusBorderColor[rowStatus] ?? "transparent"}` : isDirty ? "3px solid #f59e0b" : void 0,
+      height: computedRowHeight
+    };
+    const resolveDetailContent = () => {
+      if (loadDetailPanel) {
+        const cache = detailPanelCacheRef.current;
+        if (cache.has(row.id)) return cache.get(row.id);
+        if (!detailPanelLoadingRef.current.has(row.id)) {
+          detailPanelLoadingRef.current.add(row.id);
+          loadDetailPanel(row).then((content) => {
+            if (cache.size >= detailPanelCacheSize) {
+              const firstKey = cache.keys().next().value;
+              if (firstKey !== void 0) cache.delete(firstKey);
+            }
+            cache.set(row.id, content);
+            detailPanelLoadingRef.current.delete(row.id);
+            setDetailPanelVersion((v) => v + 1);
+          }).catch(() => {
+            detailPanelLoadingRef.current.delete(row.id);
+          });
+        }
+        return /* @__PURE__ */ React.createElement("span", { className: "text-muted-foreground inline-flex items-center gap-2 text-sm" }, /* @__PURE__ */ React.createElement("span", { className: "border-primary h-4 w-4 animate-spin rounded-full border-2 border-t-transparent" }), "Loading\u2026");
+      }
+      return renderDetailPanel?.(row);
+    };
+    const rowValidationErrors = enableValidation ? validationErrors.get(row.id) ?? /* @__PURE__ */ new Map() : /* @__PURE__ */ new Map();
+    return /* @__PURE__ */ React.createElement(React.Fragment, { key: row.id }, /* @__PURE__ */ React.createElement(
+      "tr",
+      {
+        role: "row",
+        "aria-rowindex": rowIndex + 2,
+        "aria-selected": enableRowSelection !== false ? row.getIsSelected() : void 0,
+        "data-state": row.getIsSelected() ? "selected" : void 0,
+        "data-pinned": rowIsPinnedTop ? "top" : rowIsPinnedBottom ? "bottom" : void 0,
+        "data-loading": isRowLoading || void 0,
+        "data-new-row": isNewRow || void 0,
+        "data-removed-row": isRemovedRow || void 0,
+        draggable: enableRowReordering,
+        onContextMenu: onRowContextMenu ? (event) => {
+          event.preventDefault();
+          onRowContextMenu(row, event);
+        } : void 0,
+        onDragStart: (event) => {
+          if (!enableRowReordering) return;
+          setDraggedRowId(row.id);
+          event.dataTransfer.effectAllowed = "move";
+        },
+        onDragOver: (event) => {
+          if (enableRowReordering) event.preventDefault();
+        },
+        onDrop: (event) => {
+          if (!enableRowReordering || !draggedRowId) return;
+          event.preventDefault();
+          const nextRows = reorderRows(scrollRows, draggedRowId, row.id);
+          onRowOrderChange?.(
+            nextRows.map((item) => item.original),
+            nextRows.map((item) => item.id)
+          );
+          setDraggedRowId(null);
+        },
+        style: rowStyle,
+        className: cn(
+          "border-border hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
+          striped && rowIndex % 2 !== 0 && "bg-muted/30",
+          rowIsPinnedTop && "bg-bg shadow-sm",
+          rowIsPinnedBottom && "bg-bg shadow-sm",
+          enableRowReordering && "cursor-grab active:cursor-grabbing",
+          isRowLoading && "opacity-60 pointer-events-none",
+          getRowClassName?.(row)
+        )
+      },
+      columnPaddingLeft > 0 ? /* @__PURE__ */ React.createElement("td", { style: { width: columnPaddingLeft } }) : null,
+      renderRowCells({
+        row,
+        rowIndex,
+        renderedColumnIds,
+        enableExpanding,
+        renderDetailPanel,
+        getCellColSpan,
+        getCellRowSpan,
+        enableRowPinning,
+        pinRow,
+        text,
+        overlayBoundary,
+        treeData,
+        densityCellClass,
+        enableRowCopy,
+        getCellClassName,
+        enableCellTooltip,
+        onCellContextMenu,
+        conditionalFormattingRules,
+        enableCellSelection,
+        isCellSelected,
+        isSelectingCells,
+        onCellMouseDown: enableCellSelection ? (ri, ci) => {
+          handleCellSelectionChange({ startRowIndex: ri, startColIndex: ci, endRowIndex: ri, endColIndex: ci });
+          setIsSelectingCells(true);
+        } : void 0,
+        onCellMouseEnter: enableCellSelection ? (ri, ci) => {
+          if (!isSelectingCells) return;
+          setCellSelection((prev) => prev ? { ...prev, endRowIndex: ri, endColIndex: ci } : prev);
+        } : void 0,
+        flashedCells: enableLiveData ? flashedCells.get(row.id) : void 0,
+        onViewStats: enableToolPanel ? handleViewStats : void 0,
+        rowValidationErrors
+      }),
+      columnPaddingRight > 0 ? /* @__PURE__ */ React.createElement("td", { style: { width: columnPaddingRight } }) : null
+    ), (renderDetailPanel || loadDetailPanel) && row.getIsExpanded() ? /* @__PURE__ */ React.createElement("tr", { className: "border-border bg-muted/20 border-b" }, /* @__PURE__ */ React.createElement("td", { colSpan, className: "p-4" }, detailPanelVersion >= 0 ? resolveDetailContent() : null)) : null);
+  };
+  const tbodyId = React.useId();
+  const tbodyIdAttr = tbodyId ? `datatable-tbody-${tbodyId.replace(/:/g, "")}` : void 0;
+  if (enablePivot && pivotConfig) {
+    return /* @__PURE__ */ React.createElement(
+      DataTablePivotView,
+      {
+        data,
+        pivotConfig,
+        columns,
+        className,
+        onClearPivot: () => {
+          setInternalPivotConfig(void 0);
+          onPivotConfigChange?.({ rowGroupField: "", pivotField: "", valueField: "", aggregation: "sum" });
+        }
+      }
+    );
+  }
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      ref: handleRootRef,
+      "data-datatable-root": "",
+      "data-fullscreen": isFullscreen || void 0,
+      dir,
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledBy,
+      tabIndex: enableCopyPaste || enablePaste || enableUndoRedo ? -1 : void 0,
+      onKeyDown: enableCopyPaste || enablePaste || enableUndoRedo ? handleCopyPaste : void 0,
+      className: cn(
+        "relative isolate flex w-full min-w-0 flex-col rounded-lg border border-border",
+        isFullscreen ? "overflow-auto" : "overflow-hidden",
+        fullHeight && "h-full",
+        isFullscreen && "fixed inset-0 z-50 bg-bg h-screen w-screen rounded-none border-none",
+        "[&:fullscreen]:bg-bg [&:fullscreen]:overflow-auto [&:fullscreen]:p-4 [&:fullscreen]:border-none",
+        mobileBreakpoint === "sm" && "sm:[display:revert]",
+        mobileBreakpoint === "md" && "md:[display:revert]",
+        className
+      )
+    },
+    showToolbar ? slots?.Toolbar ? /* @__PURE__ */ React.createElement(slots.Toolbar, { table, localeText: text }) : /* @__PURE__ */ React.createElement("div", { className: "data-table-toolbar relative flex flex-wrap items-center justify-between gap-2 border-b border-border px-3 py-2" }, /* @__PURE__ */ React.createElement("div", { className: "flex flex-wrap items-center gap-2" }, enableGlobalSearch ? slots?.Search ? /* @__PURE__ */ React.createElement(
+      slots.Search,
+      {
+        value: globalFilter,
+        onValueChange: handleGlobalFilter,
+        placeholder: globalFilterPlaceholder ?? text.searchPlaceholder
+      }
+    ) : /* @__PURE__ */ React.createElement(
+      DataTableGlobalSearch,
+      {
+        value: globalFilter,
+        onValueChange: handleGlobalFilter,
+        placeholder: globalFilterPlaceholder ?? text.searchPlaceholder
+      }
+    ) : null, enableAdvancedFiltering ? slots?.Filter ? /* @__PURE__ */ React.createElement(
+      slots.Filter,
+      {
+        table,
+        filter: advancedFilter,
+        onFilterChange: handleAdvancedFilter,
+        localeText: text,
+        overlayBoundary
+      }
+    ) : /* @__PURE__ */ React.createElement(
+      DataTableAdvancedFilter,
+      {
+        table,
+        filter: advancedFilter,
+        onFilterChange: handleAdvancedFilter,
+        localeText: text,
+        overlayBoundary
+      }
+    ) : null, toolbarStart), /* @__PURE__ */ React.createElement("div", { className: "flex flex-wrap items-center gap-2" }, typeof toolbar === "function" ? toolbar(table) : toolbar, treeData ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+      DataTableToolbarButton,
+      {
+        tooltip: text.expandAll,
+        onClick: () => table.toggleAllRowsExpanded(true),
+        "aria-label": text.expandAll
+      },
+      /* @__PURE__ */ React.createElement(ChevronsDown, { className: "mr-1.5 size-4" }),
+      text.expandAll
+    ), /* @__PURE__ */ React.createElement(
+      DataTableToolbarButton,
+      {
+        tooltip: text.collapseAll,
+        onClick: () => table.toggleAllRowsExpanded(false),
+        "aria-label": text.collapseAll
+      },
+      /* @__PURE__ */ React.createElement(ChevronsUpDown, { className: "mr-1.5 size-4" }),
+      text.collapseAll
+    )) : null, toolbarActions?.map(
+      (action) => action.render ? /* @__PURE__ */ React.createElement(React.Fragment, { key: action.id }, action.render(table)) : /* @__PURE__ */ React.createElement(
+        DataTableToolbarButton,
+        {
+          key: action.id,
+          tooltip: action.tooltip,
+          disabled: action.disabled,
+          onClick: () => action.onClick?.(table),
+          "aria-label": typeof action.label === "string" ? action.label : action.id
+        },
+        action.icon ?? action.label
+      )
+    ), enableDensityToggle ? /* @__PURE__ */ React.createElement(
+      DataTableDensityMenu,
+      {
+        density,
+        onDensityChange: handleDensityChange,
+        localeText: text,
+        overlayBoundary
+      }
+    ) : null, enableExport ? /* @__PURE__ */ React.createElement(
+      DataTableExportMenu,
+      {
+        table,
+        localeText: text,
+        overlayBoundary,
+        options: typeof enableExport === "object" ? enableExport : { csv: true, json: true, selectedCsv: true, xlsx: true }
+      }
+    ) : null, enableConditionalFormatting ? /* @__PURE__ */ React.createElement(
+      DataTableToolbarButton,
+      {
+        tooltip: text.conditionalFormatting ?? "Conditional formatting",
+        onClick: () => handleOpenCfDrawer(),
+        "aria-label": text.conditionalFormatting ?? "Conditional formatting"
+      },
+      /* @__PURE__ */ React.createElement(Filter, { className: "mr-1.5 size-4" }),
+      "Format"
+    ) : null, enablePivot ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+      DataTableToolbarButton,
+      {
+        tooltip: "Pivot mode",
+        onClick: () => setPivotDrawerOpen(true),
+        "aria-label": "Pivot mode"
+      },
+      /* @__PURE__ */ React.createElement(GitBranch, { className: "mr-1.5 size-4" }),
+      "Pivot"
+    ), pivotConfig ? /* @__PURE__ */ React.createElement("span", { className: "bg-primary/10 text-primary border-primary/30 inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-xs font-medium" }, "Pivot active", /* @__PURE__ */ React.createElement(
+      "button",
+      {
+        type: "button",
+        "aria-label": "Clear pivot",
+        className: "hover:text-destructive ml-0.5 leading-none",
+        onClick: () => {
+          setInternalPivotConfig(void 0);
+          onPivotConfigChange?.({ rowGroupField: "", pivotField: "", valueField: "", aggregation: "sum" });
+        }
+      },
+      "\xD7"
+    )) : null) : null, enableSavedViews ? /* @__PURE__ */ React.createElement(
+      DataTableToolbarButton,
+      {
+        tooltip: "Saved views",
+        onClick: () => setSavedViewsDrawerOpen(true),
+        "aria-label": "Saved views"
+      },
+      /* @__PURE__ */ React.createElement(Bookmark, { className: "mr-1.5 size-4" }),
+      "Views"
+    ) : null, onRefresh ? /* @__PURE__ */ React.createElement(
+      DataTableToolbarButton,
+      {
+        tooltip: text.refresh,
+        onClick: onRefresh,
+        "aria-label": text.refresh
+      },
+      /* @__PURE__ */ React.createElement(RefreshCw, { className: "mr-1.5 size-4" }),
+      text.refresh
+    ) : null, onPrint ? /* @__PURE__ */ React.createElement(
+      DataTableToolbarButton,
+      {
+        tooltip: text.printTitle,
+        onClick: () => {
+          onPrint?.();
+          const cleanup = applyPrintTheme();
+          window.print();
+          window.addEventListener("afterprint", cleanup, { once: true });
+        },
+        "aria-label": text.printTitle
+      },
+      /* @__PURE__ */ React.createElement(Printer, { className: "mr-1.5 size-4" }),
+      text.printTitle
+    ) : null, enableFullscreen ? /* @__PURE__ */ React.createElement(
+      DataTableToolbarButton,
+      {
+        tooltip: isFullscreen ? text.exitFullscreen : text.enterFullscreen,
+        onClick: handleFullscreenToggle,
+        "aria-label": isFullscreen ? text.exitFullscreen : text.enterFullscreen
+      },
+      isFullscreen ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Minimize2, { className: "mr-1.5 size-4" }), text.exitFullscreen) : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Maximize2, { className: "mr-1.5 size-4" }), text.enterFullscreen)
+    ) : null, enableColumnConfiguration ? /* @__PURE__ */ React.createElement(
+      DataTableColumnConfiguration,
+      {
+        table,
+        selectedColumnIds,
+        onSelectedColumnIdsChange: handleColumnSelection,
+        localeText: text,
+        enableColumnSelection,
+        enableGrouping,
+        enableColumnPinning,
+        overlayBoundary
+      }
+    ) : null, enableKeyboardShortcuts ? /* @__PURE__ */ React.createElement(
+      DataTableToolbarButton,
+      {
+        tooltip: "Keyboard shortcuts",
+        onClick: () => setShortcutsOpen(true),
+        "aria-label": "Keyboard shortcuts"
+      },
+      /* @__PURE__ */ React.createElement(HelpCircle, { className: "mr-1.5 size-4" }),
+      "Shortcuts"
+    ) : null, toolbarEnd)) : null,
+    bulkActions && bulkActions.length > 0 && table.getFilteredSelectedRowModel().rows.length > 0 ? /* @__PURE__ */ React.createElement(
+      DataTableBulkActionsBar,
+      {
+        table,
+        actions: bulkActions,
+        localeText: text
+      }
+    ) : null,
+    enableCellSelection && normalizedCellSelection && (() => {
+      const rowSpan = normalizedCellSelection.endRowIndex - normalizedCellSelection.startRowIndex + 1;
+      const colSpan2 = normalizedCellSelection.endColIndex - normalizedCellSelection.startColIndex + 1;
+      const totalCells = rowSpan * colSpan2;
+      if (totalCells <= 1) return null;
+      return /* @__PURE__ */ React.createElement("div", { className: "bg-primary/10 border-primary/30 flex flex-wrap items-center gap-3 rounded-md border px-3 py-2 text-sm" }, /* @__PURE__ */ React.createElement("span", { className: "text-primary font-medium" }, totalCells, " cells selected across ", rowSpan, " rows"), /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React.createElement(
+        Input,
+        {
+          value: bulkEditValue,
+          onChange: (e) => setBulkEditValue(e.target.value),
+          placeholder: "Set all to\u2026",
+          className: "h-7 w-36 text-xs"
+        }
+      ), /* @__PURE__ */ React.createElement(
+        Button,
+        {
+          type: "button",
+          variant: "default",
+          size: "sm",
+          className: "h-7 px-2 text-xs",
+          onClick: () => {
+            const visibleLeafCols = table.getVisibleLeafColumns();
+            const rowModel = table.getRowModel().rows;
+            for (let ri = normalizedCellSelection.startRowIndex; ri <= normalizedCellSelection.endRowIndex; ri++) {
+              const row = rowModel[ri];
+              if (!row) continue;
+              for (let ci = normalizedCellSelection.startColIndex; ci <= normalizedCellSelection.endColIndex; ci++) {
+                const col = visibleLeafCols[ci];
+                if (!col) continue;
+                const structylMeta = getStructylMeta(col);
+                if (structylMeta.valueSetter) {
+                  structylMeta.valueSetter(row.original, bulkEditValue, ri);
+                }
+              }
+            }
+            setBulkEditValue("");
+          }
+        },
+        "Apply"
+      ), /* @__PURE__ */ React.createElement(
+        Button,
+        {
+          type: "button",
+          variant: "ghost",
+          size: "sm",
+          className: "h-7 px-2 text-xs",
+          onClick: () => handleCellSelectionChange(null)
+        },
+        "Clear"
+      )));
+    })(),
+    enableFilterChips && table.getState().columnFilters.length > 0 ? /* @__PURE__ */ React.createElement("div", { className: "flex flex-wrap items-center gap-2 border-b border-border px-3 pb-2 pt-1.5" }, table.getState().columnFilters.map((filter) => {
+      const col = table.getColumn(filter.id);
+      const label = col ? typeof col.columnDef.header === "string" ? col.columnDef.header : filter.id : filter.id;
+      return /* @__PURE__ */ React.createElement(
+        "span",
+        {
+          key: filter.id,
+          className: "border-border bg-muted inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-xs"
+        },
+        /* @__PURE__ */ React.createElement("span", { className: "font-medium" }, label, ":"),
+        /* @__PURE__ */ React.createElement("span", null, String(filter.value ?? "")),
+        /* @__PURE__ */ React.createElement(
+          "button",
+          {
+            type: "button",
+            className: "text-muted-foreground hover:text-foreground ml-0.5 leading-none",
+            "aria-label": `Remove ${label} filter`,
+            onClick: () => col?.setFilterValue(void 0)
+          },
+          "\xD7"
+        )
+      );
+    }), /* @__PURE__ */ React.createElement(
+      Button,
+      {
+        type: "button",
+        variant: "ghost",
+        size: "sm",
+        className: "h-6 px-2 text-xs",
+        onClick: () => table.resetColumnFilters()
+      },
+      "Clear filters"
+    )) : null,
+    mobileBreakpoint ? /* @__PURE__ */ React.createElement(
+      DataTableCardView,
+      {
+        table,
+        breakpoint: mobileBreakpoint,
+        allRows
+      }
+    ) : null,
+    /* @__PURE__ */ React.createElement("div", { className: cn("flex min-h-0 min-w-0", enableToolPanel && "flex-1 gap-0", fullHeight && "flex-1") }, /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        ref: tableContainerRef,
+        onScroll: handleScroll,
+        style: containerStyle,
+        className: cn(
+          "min-w-0",
+          !autoHeight && "overflow-auto",
+          fullHeight && "min-h-0 flex-1",
+          enableToolPanel && "flex-1",
+          mobileBreakpoint === "sm" && "hidden sm:block",
+          mobileBreakpoint === "md" && "hidden md:block",
+          mobileBreakpoint === "lg" && "hidden lg:block",
+          tableClassName
+        )
+      },
+      /* @__PURE__ */ React.createElement(
+        "table",
+        {
+          className: "w-full caption-bottom text-sm",
+          role: "grid",
+          "aria-rowcount": serverSide ? serverSide.rowCount : table.getFilteredRowModel().rows.length + 1,
+          "aria-colcount": table.getVisibleLeafColumns().length
+        },
+        /* @__PURE__ */ React.createElement("thead", { className: "bg-bg [&_tr]:border-border sticky top-0 z-20 [&_tr]:border-b" }, isColumnVirtual ? /* @__PURE__ */ React.createElement("tr", { role: "row", "aria-rowindex": 1, className: "hover:bg-muted/50" }, columnPaddingLeft > 0 ? /* @__PURE__ */ React.createElement("th", { style: { width: columnPaddingLeft } }) : null, renderedColumns.map((column, colIdx) => /* @__PURE__ */ React.createElement(
+          DataTableLeafHeader,
+          {
+            key: column.id,
+            column,
+            colIndex: colIdx,
+            table,
+            enableSorting,
+            enableColumnResizing,
+            enableColumnReordering,
+            enableColumnPinning,
+            enableGrouping,
+            enableColumnSelection,
+            selectedColumnIds,
+            onSelectedColumnIdsChange: handleColumnSelection,
+            draggedColumnId,
+            onDraggedColumnIdChange: setDraggedColumnId,
+            onColumnOrderChange: handleColumnOrder,
+            localeText: text,
+            overlayBoundary,
+            CustomColumnMenu: slots?.ColumnMenu,
+            enableColumnCopy,
+            enableColumnAutoSize,
+            lockedColumns,
+            onLockedColumnsChange: handleLockedColumnsChange,
+            quickFilterColumns,
+            onOpenConditionalFormatting: enableConditionalFormatting ? handleOpenCfDrawer : void 0,
+            onViewStats: enableToolPanel ? handleViewStats : void 0
+          }
+        )), columnPaddingRight > 0 ? /* @__PURE__ */ React.createElement("th", { style: { width: columnPaddingRight } }) : null) : table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ React.createElement("tr", { key: headerGroup.id, role: "row", "aria-rowindex": 1, className: "hover:bg-muted/50" }, headerGroup.headers.map((header, colIdx) => /* @__PURE__ */ React.createElement(
+          DataTableHeader,
+          {
+            key: header.id,
+            header,
+            colIndex: colIdx,
+            table,
+            enableSorting,
+            enableColumnResizing,
+            enableColumnReordering,
+            enableColumnPinning,
+            enableGrouping,
+            enableColumnSelection,
+            selectedColumnIds,
+            onSelectedColumnIdsChange: handleColumnSelection,
+            draggedColumnId,
+            onDraggedColumnIdChange: setDraggedColumnId,
+            onColumnOrderChange: handleColumnOrder,
+            localeText: text,
+            overlayBoundary,
+            CustomColumnMenu: slots?.ColumnMenu,
+            enableColumnCopy,
+            enableColumnAutoSize,
+            lockedColumns,
+            onLockedColumnsChange: handleLockedColumnsChange,
+            quickFilterColumns,
+            onOpenConditionalFormatting: enableConditionalFormatting ? handleOpenCfDrawer : void 0,
+            onViewStats: enableToolPanel ? handleViewStats : void 0
+          }
+        )))), enableHeaderStats ? /* @__PURE__ */ React.createElement(
+          DataTableHeaderStatsRow,
+          {
+            table,
+            renderedColumnIds,
+            columnPaddingLeft,
+            columnPaddingRight,
+            headerStatsConfig
+          }
+        ) : null),
+        /* @__PURE__ */ React.createElement("tbody", { id: tbodyIdAttr, className: "[&_tr:last-child]:border-0" }, error ? /* @__PURE__ */ React.createElement("tr", null, /* @__PURE__ */ React.createElement("td", { colSpan, className: "text-destructive h-24 text-center" }, error)) : loading ? renderLoadingRows({
+          colSpan,
+          columns: renderedColumns.length,
+          variant: loadingVariant,
+          rows: skeletonRows,
+          text,
+          LoadingSkeleton: slots?.LoadingSkeleton,
+          LoadingOverlay: slots?.LoadingOverlay
+        }) : allRows.length === 0 ? /* @__PURE__ */ React.createElement("tr", null, /* @__PURE__ */ React.createElement("td", { colSpan, className: "h-24 text-center" }, data.length === 0 ? slots?.NoRowsOverlay ? /* @__PURE__ */ React.createElement(slots.NoRowsOverlay, null) : noRowsOverlay ?? emptyState ?? /* @__PURE__ */ React.createElement("span", { className: "text-muted-foreground" }, text.noRows) : slots?.NoResultsOverlay ? /* @__PURE__ */ React.createElement(slots.NoResultsOverlay, null) : noResultsOverlay ?? emptyState ?? /* @__PURE__ */ React.createElement("span", { className: "text-muted-foreground" }, text.noResults))) : /* @__PURE__ */ React.createElement(React.Fragment, null, inlineCreateRow ? /* @__PURE__ */ React.createElement(
+          DataTableInlineCreateRow,
+          {
+            createRow: inlineCreateRow,
+            colSpan,
+            localeText: text
+          }
+        ) : null, pinnedRows.top.map((row, i) => renderDataRow(row, i)), isVirtual ? virtualRows.length > 0 ? /* @__PURE__ */ React.createElement(React.Fragment, null, paddingTop > 0 ? /* @__PURE__ */ React.createElement("tr", null, /* @__PURE__ */ React.createElement("td", { style: { height: paddingTop }, colSpan })) : null, virtualRows.map((virtualRow) => {
+          const row = scrollRows[virtualRow.index];
+          return row ? renderDataRow(row, virtualRow.index) : null;
+        }), paddingBottom > 0 ? /* @__PURE__ */ React.createElement("tr", null, /* @__PURE__ */ React.createElement("td", { style: { height: paddingBottom }, colSpan })) : null) : fallbackVirtualRows.map((row, i) => renderDataRow(row, i)) : scrollRows.map((row, i) => renderDataRow(row, i)), pinnedRows.bottom.map((row, i) => renderDataRow(row, scrollRows.length + i)), loadingMore ? /* @__PURE__ */ React.createElement("tr", null, /* @__PURE__ */ React.createElement("td", { colSpan, className: "text-muted-foreground h-12 text-center" }, text.loadingMore)) : null)),
+        showColumnTotals && aggregations ? /* @__PURE__ */ React.createElement(
+          DataTableFooter,
+          {
+            table,
+            aggregations,
+            renderedColumnIds,
+            columnPaddingLeft,
+            columnPaddingRight,
+            localeText: text
+          }
+        ) : null
+      )
+    ), enableToolPanel ? /* @__PURE__ */ React.createElement(
+      DataTableToolPanel,
+      {
+        table,
+        open: toolPanelOpen,
+        tab: toolPanelTab,
+        onTabChange: setToolPanelTab,
+        onOpenChange: setToolPanelOpen,
+        statsColumnId,
+        onStatsColumnChange: setStatsColumnId
+      }
+    ) : null),
+    enablePagination ? /* @__PURE__ */ React.createElement("div", { className: "data-table-pagination border-t border-border" }, slots?.Pagination ? /* @__PURE__ */ React.createElement(slots.Pagination, { table, localeText: text, pageSizeOptions }) : /* @__PURE__ */ React.createElement(
+      DataTablePagination,
+      {
+        table,
+        localeText: text,
+        pageSizeOptions,
+        showTotalRows,
+        overlayBoundary
+      }
+    )) : null,
+    enableStatusBar ? /* @__PURE__ */ React.createElement(
+      DataTableStatusBar,
+      {
+        table,
+        localeText: text,
+        validationErrorCount: enableValidation ? (() => {
+          let count = 0;
+          for (const m of validationErrors.values()) count += m.size;
+          return count;
+        })() : 0
+      }
+    ) : null,
+    enableConditionalFormatting ? /* @__PURE__ */ React.createElement(
+      DataTableConditionalFormattingDrawer,
+      {
+        table,
+        open: cfDrawerOpen,
+        onOpenChange: setCfDrawerOpen,
+        initialColumnId: cfInitialColumnId,
+        rules: conditionalFormattingRules,
+        onRulesChange: handleConditionalRulesChange
+      }
+    ) : null,
+    enableKeyboardShortcuts ? /* @__PURE__ */ React.createElement(
+      DataTableKeyboardShortcutsModal,
+      {
+        open: shortcutsOpen,
+        onOpenChange: setShortcutsOpen,
+        enablePaste
+      }
+    ) : null,
+    enablePivot ? /* @__PURE__ */ React.createElement(
+      DataTablePivotConfigPanel,
+      {
+        open: pivotDrawerOpen,
+        onOpenChange: setPivotDrawerOpen,
+        columns,
+        currentConfig: pivotConfig,
+        onApply: handlePivotConfigChange,
+        onClear: () => {
+          setInternalPivotConfig(void 0);
+          onPivotConfigChange?.({ rowGroupField: "", pivotField: "", valueField: "", aggregation: "sum" });
+        }
+      }
+    ) : null,
+    enableSavedViews ? /* @__PURE__ */ React.createElement(
+      DataTableSavedViewsDrawer,
+      {
+        open: savedViewsDrawerOpen,
+        onOpenChange: setSavedViewsDrawerOpen,
+        views: savedViews,
+        onViewsChange: handleViewsChange,
+        table,
+        density,
+        setDensity: handleDensityChange,
+        conditionalFormattingRules,
+        handleConditionalRulesChange
+      }
+    ) : null
+  );
+}
+function DataTableHeader({ header, colIndex, ...props }) {
+  if (header.isPlaceholder) {
+    return /* @__PURE__ */ React.createElement("th", { colSpan: header.colSpan, "aria-colindex": colIndex !== void 0 ? colIndex + 1 : void 0 });
+  }
+  if (header.colSpan > 1) {
+    return /* @__PURE__ */ React.createElement(
+      "th",
+      {
+        colSpan: header.colSpan,
+        "aria-colindex": colIndex !== void 0 ? colIndex + 1 : void 0,
+        className: "border-b border-border bg-muted/30 px-3 py-1.5 text-center text-xs font-semibold tracking-wide text-muted-foreground"
+      },
+      flexRender(header.column.columnDef.header, header.getContext())
+    );
+  }
+  return /* @__PURE__ */ React.createElement(
+    DataTableLeafHeader,
+    {
+      column: header.column,
+      colSpan: header.colSpan,
+      colIndex,
+      headerContent: flexRender(header.column.columnDef.header, header.getContext()),
+      resizeHandler: header.getResizeHandler(),
+      ...props
+    }
+  );
+}
+function getColumnHeaderText(column) {
+  return typeof column.columnDef.header === "string" ? column.columnDef.header : column.id;
+}
+function DataTableLeafHeader({
+  column,
+  table,
+  colSpan,
+  headerContent,
+  resizeHandler,
+  colIndex,
+  enableSorting,
+  enableColumnResizing,
+  enableColumnReordering,
+  enableColumnPinning,
+  enableGrouping,
+  enableColumnSelection,
+  selectedColumnIds,
+  onSelectedColumnIdsChange,
+  draggedColumnId,
+  onDraggedColumnIdChange,
+  onColumnOrderChange,
+  localeText,
+  overlayBoundary,
+  CustomColumnMenu,
+  enableColumnCopy,
+  enableColumnAutoSize,
+  lockedColumns,
+  onLockedColumnsChange,
+  quickFilterColumns,
+  onOpenConditionalFormatting,
+  onViewStats
+}) {
+  const [quickFilter, setQuickFilter] = React.useState("");
+  const isLocked = lockedColumns?.includes(column.id) ?? false;
+  const showQuickFilter = quickFilterColumns?.includes(column.id) ?? false;
+  const canSort = enableSorting && column.getCanSort();
+  const sortDir = column.getIsSorted();
+  const isPinned = column.getIsPinned();
+  const selected = selectedColumnIds.includes(column.id);
+  const structylMeta = getStructylMeta(column);
+  const align = structylMeta.align ?? "left";
+  const flex = structylMeta.flex;
+  const description = structylMeta.description;
+  return /* @__PURE__ */ React.createElement(
+    "th",
+    {
+      scope: "col",
+      role: "columnheader",
+      colSpan,
+      "aria-colindex": colIndex !== void 0 ? colIndex + 1 : void 0,
+      "aria-selected": selected || void 0,
+      "aria-sort": sortDir === "asc" ? "ascending" : sortDir === "desc" ? "descending" : canSort ? "none" : void 0,
+      "data-pinned": isPinned || void 0,
+      "data-state": selected ? "selected" : void 0,
+      draggable: enableColumnReordering,
+      onDragStart: (event) => {
+        if (!enableColumnReordering) return;
+        onDraggedColumnIdChange(column.id);
+        event.dataTransfer.effectAllowed = "move";
+      },
+      onDragOver: (event) => {
+        if (enableColumnReordering) event.preventDefault();
+      },
+      onDrop: (event) => {
+        if (!enableColumnReordering || !draggedColumnId) return;
+        event.preventDefault();
+        const ids = table.getAllLeafColumns().map((item) => item.id);
+        const next = reorderIds(ids, draggedColumnId, column.id);
+        onColumnOrderChange(next);
+        onDraggedColumnIdChange(null);
+      },
+      style: {
+        width: flex ? void 0 : column.getSize(),
+        minWidth: flex ? column.getSize() : void 0,
+        flex: flex ? String(flex) : void 0,
+        position: isPinned ? "sticky" : void 0,
+        left: isPinned === "left" ? column.getStart("left") : void 0,
+        right: isPinned === "right" ? column.getAfter("right") : void 0,
+        background: isPinned ? "inherit" : void 0,
+        zIndex: isPinned ? 1 : void 0
+      },
+      className: cn(
+        "text-muted-foreground group relative h-10 whitespace-nowrap px-3 align-middle font-medium",
+        align === "left" && "text-left",
+        align === "center" && "text-center",
+        align === "right" && "text-right",
+        canSort && "cursor-pointer select-none",
+        enableColumnReordering && "cursor-grab active:cursor-grabbing",
+        selected && "bg-muted text-foreground"
+      ),
+      onClick: canSort ? column.getToggleSortingHandler() : void 0
+    },
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: cn(
+          "flex min-w-0 items-center gap-1.5",
+          align === "center" && "justify-center",
+          align === "right" && "justify-end"
+        )
+      },
+      canSort && align === "right" ? /* @__PURE__ */ React.createElement("span", { className: "inline-flex shrink-0 items-center gap-0.5" }, sortDir === "asc" ? /* @__PURE__ */ React.createElement(ChevronUp, { className: "size-4" }) : sortDir === "desc" ? /* @__PURE__ */ React.createElement(ChevronDown, { className: "size-4" }) : /* @__PURE__ */ React.createElement(ChevronsUpDown, { className: "size-4 opacity-50" }), sortDir && (() => {
+        const sortedCols = table.getState().sorting;
+        const idx = sortedCols.findIndex((s) => s.id === column.id);
+        return sortedCols.length > 1 && idx >= 0 ? /* @__PURE__ */ React.createElement("span", { className: "text-primary text-[10px] font-bold leading-none" }, idx + 1) : null;
+      })()) : null,
+      /* @__PURE__ */ React.createElement("span", { className: "min-w-0 truncate", title: description }, headerContent ?? getColumnHeaderText(column)),
+      description ? /* @__PURE__ */ React.createElement(
+        "span",
+        {
+          className: "text-muted-foreground/60 inline-flex shrink-0 cursor-help",
+          title: description,
+          "aria-label": description
+        },
+        "\u2139"
+      ) : null,
+      canSort && align !== "right" ? /* @__PURE__ */ React.createElement("span", { className: "inline-flex shrink-0 items-center gap-0.5" }, sortDir === "asc" ? /* @__PURE__ */ React.createElement(ChevronUp, { className: "size-4" }) : sortDir === "desc" ? /* @__PURE__ */ React.createElement(ChevronDown, { className: "size-4" }) : /* @__PURE__ */ React.createElement(ChevronsUpDown, { className: "size-4 opacity-50" }), sortDir && (() => {
+        const sortedCols = table.getState().sorting;
+        const idx = sortedCols.findIndex((s) => s.id === column.id);
+        return sortedCols.length > 1 && idx >= 0 ? /* @__PURE__ */ React.createElement("span", { className: "text-primary text-[10px] font-bold leading-none" }, idx + 1) : null;
+      })()) : null
+    ),
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: "absolute right-0 top-0 z-[5] flex h-full items-center px-1 opacity-0 focus-within:opacity-100 group-hover:opacity-100",
+        onClick: (e) => e.stopPropagation(),
+        onPointerDown: (e) => e.stopPropagation()
+      },
+      CustomColumnMenu ? /* @__PURE__ */ React.createElement(CustomColumnMenu, { column, table }) : /* @__PURE__ */ React.createElement(
+        DataTableColumnMenu,
+        {
+          column,
+          table,
+          localeText,
+          enableColumnPinning,
+          enableGrouping,
+          enableColumnSelection,
+          selectedColumnIds,
+          onSelectedColumnIdsChange,
+          overlayBoundary,
+          enableColumnCopy,
+          lockedColumns,
+          onLockedColumnsChange,
+          onOpenConditionalFormatting,
+          onViewStats
+        }
+      )
+    ),
+    enableColumnResizing && column.getCanResize() && resizeHandler && !isLocked ? /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        onMouseDown: (event) => resizeHandler(event),
+        onTouchStart: (event) => resizeHandler(event),
+        onDoubleClick: enableColumnAutoSize ? () => {
+          const tableEl = document.querySelector("[data-datatable-root] table");
+          if (!tableEl) return;
+          const colIndex2 = table.getAllLeafColumns().findIndex((c) => c.id === column.id);
+          const cells = tableEl.querySelectorAll(`tr td:nth-child(${colIndex2 + 1}), tr th:nth-child(${colIndex2 + 1})`);
+          let maxWidth = 60;
+          cells.forEach((el) => {
+            maxWidth = Math.max(maxWidth, el.scrollWidth);
+          });
+          table.setColumnSizing((prev) => ({ ...prev, [column.id]: maxWidth }));
+        } : void 0,
+        className: cn(
+          "absolute right-0 top-0 z-10 flex h-full w-3 cursor-col-resize touch-none select-none items-center justify-center",
+          "opacity-0 group-hover:opacity-100",
+          column.getIsResizing() && "opacity-100"
+        ),
+        title: enableColumnAutoSize ? localeText.autoSizeColumn : void 0
+      },
+      /* @__PURE__ */ React.createElement("div", { className: cn(
+        "bg-border h-full w-px",
+        column.getIsResizing() && "bg-primary w-0.5"
+      ) })
+    ) : null,
+    showQuickFilter ? /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: "px-1 pb-1 pt-0.5",
+        onClick: (event) => event.stopPropagation(),
+        onPointerDown: (event) => event.stopPropagation()
+      },
+      /* @__PURE__ */ React.createElement(
+        Input,
+        {
+          value: quickFilter,
+          onChange: (event) => {
+            setQuickFilter(event.target.value);
+            column.setFilterValue(event.target.value || void 0);
+          },
+          placeholder: localeText.quickFilterPlaceholder,
+          className: "h-6 text-xs",
+          "aria-label": `Filter ${getColumnHeaderText(column)}`
+        }
+      )
+    ) : null
+  );
+}
+function DataTableColumnMenu({
+  column,
+  table,
+  localeText,
+  enableColumnPinning,
+  enableGrouping,
+  enableColumnSelection,
+  selectedColumnIds,
+  onSelectedColumnIdsChange,
+  overlayBoundary,
+  enableColumnCopy,
+  lockedColumns,
+  onLockedColumnsChange,
+  onOpenConditionalFormatting,
+  onViewStats
+}) {
+  const handleCopyColumn = () => {
+    const rows = table.getFilteredRowModel().rows;
+    const header = typeof column.columnDef.header === "string" ? column.columnDef.header : column.id;
+    const values = [header, ...rows.map((row) => String(row.getValue(column.id) ?? ""))].join("\n");
+    navigator.clipboard?.writeText(values).catch(() => void 0);
+  };
+  const isLocked = lockedColumns?.includes(column.id) ?? false;
+  const handleToggleLock = () => {
+    if (!onLockedColumnsChange) return;
+    const current = lockedColumns ?? [];
+    onLockedColumnsChange(
+      isLocked ? current.filter((id) => id !== column.id) : [...current, column.id]
+    );
+  };
+  return /* @__PURE__ */ React.createElement("span", { className: "inline-flex" }, /* @__PURE__ */ React.createElement(DropdownMenu.Root, null, /* @__PURE__ */ React.createElement(DropdownMenu.Trigger, { asChild: true }, /* @__PURE__ */ React.createElement(
+    Button,
+    {
+      type: "button",
+      variant: "ghost",
+      size: "icon-sm",
+      "aria-label": `${column.id} ${localeText.columnMenu}`,
+      className: "h-7 w-7"
+    },
+    "\u22EE"
+  )), /* @__PURE__ */ React.createElement(
+    DropdownMenu.Content,
+    {
+      align: "end",
+      container: overlayBoundary,
+      collisionBoundary: overlayBoundary,
+      collisionPadding: 8,
+      strategy: "absolute",
+      sticky: "always",
+      className: "bg-popover relative z-[1000] max-h-[min(45dvh,18rem,var(--structyl-popper-available-height))] min-w-44 overflow-y-auto"
+    },
+    /* @__PURE__ */ React.createElement(MenuButton, { onClick: () => column.toggleSorting(false) }, localeText.sortAsc),
+    /* @__PURE__ */ React.createElement(MenuButton, { onClick: () => column.toggleSorting(true) }, localeText.sortDesc),
+    /* @__PURE__ */ React.createElement(
+      MenuButton,
+      {
+        onClick: () => table.setSorting((state) => state.filter((item) => item.id !== column.id))
+      },
+      localeText.clearSort
+    ),
+    column.getCanHide() ? /* @__PURE__ */ React.createElement(MenuButton, { onClick: () => column.toggleVisibility(false) }, localeText.hideColumn) : null,
+    enableColumnPinning ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(MenuButton, { onClick: () => column.pin("left") }, localeText.pinLeft), /* @__PURE__ */ React.createElement(MenuButton, { onClick: () => column.pin("right") }, localeText.pinRight), /* @__PURE__ */ React.createElement(MenuButton, { onClick: () => column.pin(false) }, localeText.unpin)) : null,
+    enableGrouping && column.getCanGroup() ? /* @__PURE__ */ React.createElement(MenuButton, { onClick: () => column.toggleGrouping() }, column.getIsGrouped() ? localeText.ungroup : localeText.groupBy) : null,
+    enableColumnSelection ? /* @__PURE__ */ React.createElement(
+      MenuButton,
+      {
+        onClick: () => onSelectedColumnIdsChange(toggleId(selectedColumnIds, column.id))
+      },
+      localeText.selectColumn
+    ) : null,
+    enableColumnCopy ? /* @__PURE__ */ React.createElement(MenuButton, { onClick: handleCopyColumn }, localeText.copyColumn) : null,
+    onLockedColumnsChange ? /* @__PURE__ */ React.createElement(MenuButton, { onClick: handleToggleLock }, isLocked ? localeText.unlockColumn : localeText.lockColumn) : null,
+    onOpenConditionalFormatting ? /* @__PURE__ */ React.createElement(MenuButton, { onClick: () => onOpenConditionalFormatting(column.id) }, localeText.conditionalFormatting ?? "Conditional formatting") : null,
+    onViewStats ? /* @__PURE__ */ React.createElement(MenuButton, { onClick: () => onViewStats(column.id) }, "View statistics") : null
+  )));
+}
+function MenuButton({ children, onClick }) {
+  return /* @__PURE__ */ React.createElement(DropdownMenu.Item, { className: "cursor-pointer", onSelect: onClick }, children);
+}
+function renderRowCells({
+  row,
+  rowIndex,
+  renderedColumnIds,
+  enableExpanding,
+  renderDetailPanel,
+  getCellColSpan,
+  getCellRowSpan,
+  enableRowPinning,
+  pinRow,
+  text,
+  overlayBoundary,
+  treeData,
+  densityCellClass,
+  enableRowCopy,
+  getCellClassName,
+  enableCellTooltip,
+  onCellContextMenu,
+  conditionalFormattingRules,
+  enableCellSelection,
+  isCellSelected,
+  isSelectingCells: _isSelectingCells,
+  onCellMouseDown,
+  onCellMouseEnter,
+  flashedCells,
+  onViewStats: _onViewStats,
+  rowValidationErrors
+}) {
+  const copyRow = (row2) => {
+    const cells2 = row2.getVisibleCells().filter((c) => !c.column.id.startsWith("__"));
+    const tsv = cells2.map((c) => String(c.getValue() ?? "")).join("	");
+    navigator.clipboard?.writeText(tsv).catch(() => void 0);
+  };
+  const cells = row.getVisibleCells().filter((cell) => renderedColumnIds.has(cell.column.id));
+  let skip = 0;
+  return cells.map((cell, index) => {
+    if (skip > 0) {
+      skip -= 1;
+      return null;
+    }
+    const isPinned = cell.column.getIsPinned();
+    const requestedColSpan = Math.max(getCellColSpan?.(cell, row) ?? 1, 1);
+    const colSpan = Math.min(requestedColSpan, cells.length - index);
+    const rowSpan = Math.max(getCellRowSpan?.(cell, row) ?? 1, 1);
+    skip = colSpan - 1;
+    const canExpand = enableExpanding && row.getCanExpand() || !!renderDetailPanel;
+    const structylMeta = getStructylMeta(cell.column);
+    const align = structylMeta.align ?? "left";
+    const flex = structylMeta.flex;
+    const treeIndent = treeData && index === 0 ? row.depth * 16 : 0;
+    const cellIsSelected = isCellSelected ? isCellSelected(rowIndex, index) : false;
+    const cellIsFlashed = flashedCells ? flashedCells.has(cell.column.id) : false;
+    const validationError = rowValidationErrors?.get(cell.column.id);
+    const conditionalRule = conditionalFormattingRules?.find((r) => {
+      if (r.columnId !== cell.column.id) return false;
+      const v = cell.getValue();
+      const sv = String(v ?? "");
+      const rv = r.value ?? "";
+      switch (r.operator) {
+        case "equals":
+          return sv === rv;
+        case "notEquals":
+          return sv !== rv;
+        case "contains":
+          return sv.toLowerCase().includes(rv.toLowerCase());
+        case "gt":
+          return Number(v) > Number(rv);
+        case "gte":
+          return Number(v) >= Number(rv);
+        case "lt":
+          return Number(v) < Number(rv);
+        case "lte":
+          return Number(v) <= Number(rv);
+        case "empty":
+          return sv === "";
+        case "notEmpty":
+          return sv !== "";
+        default:
+          return false;
+      }
+    });
+    const tdEl = /* @__PURE__ */ React.createElement(
+      "td",
+      {
+        key: cell.id,
+        role: "gridcell",
+        "aria-colindex": index + 1,
+        colSpan,
+        rowSpan,
+        "data-pinned": isPinned || void 0,
+        "data-flash": cellIsFlashed || void 0,
+        style: {
+          width: flex ? void 0 : cell.column.getSize(),
+          minWidth: flex ? cell.column.getSize() : void 0,
+          flex: flex ? String(flex) : void 0,
+          position: isPinned ? "sticky" : "relative",
+          left: isPinned === "left" ? cell.column.getStart("left") : void 0,
+          right: isPinned === "right" ? cell.column.getAfter("right") : void 0,
+          background: isPinned ? "hsl(var(--color-bg))" : conditionalRule?.backgroundColor ?? void 0,
+          color: conditionalRule?.textColor ?? void 0,
+          zIndex: isPinned ? 1 : void 0,
+          paddingLeft: treeIndent > 0 ? treeIndent : void 0
+        },
+        onContextMenu: onCellContextMenu ? (event) => {
+          event.preventDefault();
+          onCellContextMenu(cell, row, event);
+        } : void 0,
+        onMouseDown: enableCellSelection ? (event) => {
+          event.preventDefault();
+          onCellMouseDown?.(rowIndex, index);
+        } : void 0,
+        onMouseEnter: enableCellSelection ? () => {
+          onCellMouseEnter?.(rowIndex, index);
+        } : void 0,
+        className: cn(
+          densityCellClass,
+          "relative align-middle",
+          align === "center" && "text-center",
+          align === "right" && "text-right",
+          getCellClassName?.(cell, row),
+          cellIsSelected && "bg-primary/10 outline outline-1 outline-primary",
+          enableCellSelection && "select-none cursor-cell",
+          validationError && "outline outline-1 outline-destructive"
+        )
+      },
+      validationError ? /* @__PURE__ */ React.createElement("span", { className: "absolute top-0.5 right-0.5 h-1.5 w-1.5 rounded-full bg-destructive", "aria-hidden": "true" }) : null,
+      /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          className: cn(
+            "flex min-w-0 items-center gap-1",
+            align === "center" && "justify-center",
+            align === "right" && "justify-end"
+          )
+        },
+        index === 0 && canExpand ? /* @__PURE__ */ React.createElement(
+          Button,
+          {
+            type: "button",
+            variant: "ghost",
+            size: "icon-sm",
+            onClick: () => row.toggleExpanded(),
+            className: "mr-1 h-5 w-5 shrink-0",
+            "aria-label": row.getIsExpanded() ? text.collapseRow : text.expandRow
+          },
+          row.getIsExpanded() ? /* @__PURE__ */ React.createElement(ChevronDown, { className: "size-3.5" }) : /* @__PURE__ */ React.createElement(ChevronRight, { className: "size-3.5" })
+        ) : null,
+        enableRowPinning && index === 0 ? /* @__PURE__ */ React.createElement(
+          "span",
+          {
+            className: "mr-1 inline-flex",
+            onClick: (event) => event.stopPropagation(),
+            onPointerDown: (event) => event.stopPropagation()
+          },
+          /* @__PURE__ */ React.createElement(DropdownMenu.Root, null, /* @__PURE__ */ React.createElement(DropdownMenu.Trigger, { asChild: true }, /* @__PURE__ */ React.createElement(
+            Button,
+            {
+              type: "button",
+              variant: "ghost",
+              size: "icon-sm",
+              "aria-label": text.rowActions,
+              className: "h-5 w-5"
+            },
+            "\u22EE"
+          )), /* @__PURE__ */ React.createElement(
+            DropdownMenu.Content,
+            {
+              align: "start",
+              container: overlayBoundary,
+              collisionBoundary: overlayBoundary,
+              collisionPadding: 8,
+              strategy: "absolute",
+              sticky: "always",
+              className: "bg-popover relative z-[1000] max-h-[min(45dvh,18rem,var(--structyl-popper-available-height))] min-w-28 overflow-y-auto"
+            },
+            /* @__PURE__ */ React.createElement(MenuButton, { onClick: () => pinRow(row.id, "top") }, text.pinRowTop),
+            /* @__PURE__ */ React.createElement(MenuButton, { onClick: () => pinRow(row.id, "bottom") }, text.pinRowBottom),
+            /* @__PURE__ */ React.createElement(MenuButton, { onClick: () => pinRow(row.id, false) }, text.unpin),
+            enableRowCopy ? /* @__PURE__ */ React.createElement(MenuButton, { onClick: () => copyRow(row) }, text.copyRow) : null
+          ))
+        ) : null,
+        /* @__PURE__ */ React.createElement(
+          "span",
+          {
+            className: "min-w-0 truncate",
+            title: enableCellTooltip ? String(cell.getValue() ?? "") : void 0
+          },
+          flexRender(cell.column.columnDef.cell, cell.getContext())
+        )
+      )
+    );
+    if (validationError) {
+      return /* @__PURE__ */ React.createElement(Tooltip.Provider, { key: cell.id }, /* @__PURE__ */ React.createElement(Tooltip.Root, null, /* @__PURE__ */ React.createElement(Tooltip.Trigger, { asChild: true }, tdEl), /* @__PURE__ */ React.createElement(Tooltip.Content, null, validationError)));
+    }
+    return tdEl;
+  });
+}
+function renderLoadingRows({
+  colSpan,
+  columns,
+  variant,
+  rows,
+  text,
+  LoadingSkeleton,
+  LoadingOverlay
+}) {
+  if (LoadingOverlay && variant !== "skeleton") {
+    return /* @__PURE__ */ React.createElement("tr", null, /* @__PURE__ */ React.createElement("td", { colSpan, className: "h-24 text-center" }, /* @__PURE__ */ React.createElement(LoadingOverlay, { text: text.loading, variant })));
+  }
+  if (LoadingSkeleton && variant === "skeleton") {
+    return /* @__PURE__ */ React.createElement("tr", null, /* @__PURE__ */ React.createElement("td", { colSpan }, /* @__PURE__ */ React.createElement(LoadingSkeleton, { rows, columns })));
+  }
+  if (variant === "spinner") {
+    return /* @__PURE__ */ React.createElement("tr", null, /* @__PURE__ */ React.createElement("td", { colSpan, className: "text-muted-foreground h-24 text-center" }, /* @__PURE__ */ React.createElement("span", { className: "inline-flex items-center gap-2" }, /* @__PURE__ */ React.createElement("span", { className: "border-primary h-4 w-4 animate-spin rounded-full border-2 border-t-transparent" }), text.loading)));
+  }
+  if (variant === "skeleton") {
+    return Array.from({ length: rows }, (_, rowIndex) => /* @__PURE__ */ React.createElement("tr", { key: rowIndex, className: "border-border border-b" }, Array.from({ length: Math.max(columns, 1) }, (_2, columnIndex) => /* @__PURE__ */ React.createElement("td", { key: columnIndex, className: "p-3" }, /* @__PURE__ */ React.createElement("div", { className: "bg-muted h-4 w-full animate-pulse rounded" })))));
+  }
+  return /* @__PURE__ */ React.createElement("tr", null, /* @__PURE__ */ React.createElement("td", { colSpan, className: "text-muted-foreground h-24 text-center" }, text.loading));
+}
+function DataTableFooter({
+  table,
+  aggregations,
+  renderedColumnIds,
+  columnPaddingLeft,
+  columnPaddingRight,
+  localeText
+}) {
+  const rows = table.getFilteredRowModel().rows;
+  return /* @__PURE__ */ React.createElement("tfoot", { className: "border-border bg-bg sticky bottom-0 z-10 border-t" }, /* @__PURE__ */ React.createElement("tr", null, columnPaddingLeft > 0 ? /* @__PURE__ */ React.createElement("td", { style: { width: columnPaddingLeft } }) : null, table.getVisibleLeafColumns().filter((column) => renderedColumnIds.has(column.id)).map((column, index) => {
+    const aggregation = aggregations[column.id];
+    return /* @__PURE__ */ React.createElement("td", { key: column.id, className: "p-3 font-medium" }, aggregation ? aggregateColumn(
+      aggregation,
+      rows.map((row) => row.getValue(column.id)),
+      rows
+    ) : index === 0 ? localeText.total : null);
+  }), columnPaddingRight > 0 ? /* @__PURE__ */ React.createElement("td", { style: { width: columnPaddingRight } }) : null));
+}
+function DataTablePagination({
+  table,
+  localeText = defaultLocaleText,
+  pageSizeOptions = [10, 25, 50, 100],
+  showTotalRows = true,
+  overlayBoundary
+}) {
+  const { pageIndex, pageSize } = table.getState().pagination;
+  const pageCount = table.getPageCount();
+  const totalRows = table.getFilteredRowModel().rows.length;
+  const pageOptions = Array.from({ length: Math.max(pageCount, 1) }, (_, i) => i + 1);
+  return /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-3 py-3 sm:flex-row sm:items-center sm:justify-between" }, /* @__PURE__ */ React.createElement("div", { className: "text-muted-foreground flex flex-wrap items-center gap-4 text-sm" }, showTotalRows ? /* @__PURE__ */ React.createElement("span", { className: "tabular-nums" }, localeText.totalRows(totalRows)) : null, /* @__PURE__ */ React.createElement("label", { className: "flex items-center gap-2" }, /* @__PURE__ */ React.createElement("span", { className: "whitespace-nowrap" }, localeText.rowsPerPage), /* @__PURE__ */ React.createElement(
+    Select.Root,
+    {
+      value: String(pageSize),
+      onValueChange: (v) => table.setPageSize(Number(v))
+    },
+    /* @__PURE__ */ React.createElement(Select.Trigger, { className: "h-8 w-20" }, /* @__PURE__ */ React.createElement(Select.Value, null)),
+    /* @__PURE__ */ React.createElement(
+      Select.Content,
+      {
+        options: pageSizeOptions.map((s) => ({ value: String(s), label: String(s) })),
+        container: overlayBoundary
+      }
+    )
+  ))), /* @__PURE__ */ React.createElement("div", { className: "flex flex-wrap items-center gap-1" }, /* @__PURE__ */ React.createElement("span", { className: "text-muted-foreground mr-1 text-sm tabular-nums" }, localeText.page(pageIndex + 1, Math.max(pageCount, 1))), /* @__PURE__ */ React.createElement(
+    Button,
+    {
+      type: "button",
+      variant: "outline",
+      size: "icon-sm",
+      className: "h-8 w-8",
+      onClick: () => table.setPageIndex(0),
+      disabled: !table.getCanPreviousPage(),
+      "aria-label": localeText.firstPage,
+      title: localeText.firstPage
+    },
+    /* @__PURE__ */ React.createElement(ChevronsLeft, { className: "size-4" })
+  ), /* @__PURE__ */ React.createElement(
+    Button,
+    {
+      type: "button",
+      variant: "outline",
+      size: "icon-sm",
+      className: "h-8 w-8",
+      onClick: () => table.previousPage(),
+      disabled: !table.getCanPreviousPage(),
+      "aria-label": localeText.previous,
+      title: localeText.previous
+    },
+    /* @__PURE__ */ React.createElement(ChevronLeft, { className: "size-4" })
+  ), /* @__PURE__ */ React.createElement(
+    Select.Root,
+    {
+      value: String(pageIndex + 1),
+      onValueChange: (v) => table.setPageIndex(Number(v) - 1)
+    },
+    /* @__PURE__ */ React.createElement(Select.Trigger, { className: "h-8 w-16", "aria-label": localeText.goToPage }, /* @__PURE__ */ React.createElement(Select.Value, null)),
+    /* @__PURE__ */ React.createElement(
+      Select.Content,
+      {
+        options: pageOptions.map((p) => ({ value: String(p), label: String(p) })),
+        container: overlayBoundary
+      }
+    )
+  ), /* @__PURE__ */ React.createElement(
+    Button,
+    {
+      type: "button",
+      variant: "outline",
+      size: "icon-sm",
+      className: "h-8 w-8",
+      onClick: () => table.nextPage(),
+      disabled: !table.getCanNextPage(),
+      "aria-label": localeText.next,
+      title: localeText.next
+    },
+    /* @__PURE__ */ React.createElement(ChevronRight, { className: "size-4" })
+  ), /* @__PURE__ */ React.createElement(
+    Button,
+    {
+      type: "button",
+      variant: "outline",
+      size: "icon-sm",
+      className: "h-8 w-8",
+      onClick: () => table.setPageIndex(pageCount - 1),
+      disabled: !table.getCanNextPage(),
+      "aria-label": localeText.lastPage,
+      title: localeText.lastPage
+    },
+    /* @__PURE__ */ React.createElement(ChevronsRight, { className: "size-4" })
+  )));
+}
+function DataTableToolbar({
+  table,
+  filterColumnId,
+  filterPlaceholder = "Search\u2026",
+  globalFilter,
+  onGlobalFilterChange,
+  children
+}) {
+  const column = filterColumnId ? table.getColumn(filterColumnId) : null;
+  return /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-2 py-2 sm:flex-row sm:items-center sm:justify-between" }, onGlobalFilterChange ? /* @__PURE__ */ React.createElement(
+    DataTableGlobalSearch,
+    {
+      value: globalFilter ?? "",
+      onValueChange: onGlobalFilterChange,
+      placeholder: filterPlaceholder
+    }
+  ) : column ? /* @__PURE__ */ React.createElement(
+    Input,
+    {
+      type: "text",
+      value: column.getFilterValue() ?? "",
+      onChange: (event) => column.setFilterValue(event.target.value),
+      placeholder: filterPlaceholder,
+      className: "min-w-0 sm:w-64"
+    }
+  ) : null, children);
+}
+function DataTableGlobalSearch({
+  value,
+  onValueChange,
+  placeholder
+}) {
+  return /* @__PURE__ */ React.createElement(
+    Input,
+    {
+      type: "search",
+      value,
+      onChange: (event) => onValueChange(event.target.value),
+      placeholder,
+      className: "min-w-0 sm:w-64"
+    }
+  );
+}
+function DataTableSelect({
+  value,
+  onValueChange,
+  options,
+  ariaLabel,
+  className,
+  searchable,
+  overlayBoundary
+}) {
+  const selectedOption = options.find((option) => option.value === value);
+  return /* @__PURE__ */ React.createElement(Select.Root, { value, onValueChange, searchable }, /* @__PURE__ */ React.createElement(Select.Trigger, { "aria-label": ariaLabel, className: cn("min-w-0", className) }, /* @__PURE__ */ React.createElement(Select.Value, { placeholder: selectedOption?.label ?? value }, selectedOption?.label ?? value)), /* @__PURE__ */ React.createElement(
+    Select.Content,
+    {
+      container: overlayBoundary,
+      collisionBoundary: overlayBoundary,
+      collisionPadding: 8,
+      strategy: "absolute",
+      sticky: "always",
+      showCreateItem: false,
+      className: "bg-popover relative z-[1100] max-h-[min(45dvh,18rem,var(--structyl-popper-available-height))] min-w-44"
+    },
+    options.map((option) => /* @__PURE__ */ React.createElement(Select.Item, { key: option.value, value: option.value }, option.label))
+  ));
+}
+function DataTableAdvancedFilter({
+  table,
+  filter,
+  onFilterChange,
+  localeText = defaultLocaleText,
+  overlayBoundary
+}) {
+  const columns = table.getAllLeafColumns().filter((column) => column.getCanFilter());
+  const group = filter ?? createFilterGroup("root");
+  return /* @__PURE__ */ React.createElement(Popover.Root, null, /* @__PURE__ */ React.createElement(Popover.Trigger, { asChild: true }, /* @__PURE__ */ React.createElement(Button, { type: "button", variant: "outline", size: "sm" }, /* @__PURE__ */ React.createElement(Filter, { className: "mr-1.5 size-4" }), localeText.filters)), /* @__PURE__ */ React.createElement(
+    Popover.Content,
+    {
+      align: "start",
+      sideOffset: 6,
+      container: overlayBoundary,
+      collisionBoundary: overlayBoundary,
+      collisionPadding: 12,
+      strategy: "absolute",
+      sticky: "always",
+      role: "region",
+      "aria-label": localeText.filters,
+      "data-datatable-filter-panel": "",
+      className: "bg-popover relative z-[1000] flex max-h-[min(55dvh,24rem,var(--structyl-popper-available-height))] w-[min(44rem,var(--structyl-popper-available-width),calc(100vw-2rem))] min-w-0 flex-col gap-2 overflow-hidden rounded-md p-3"
+    },
+    /* @__PURE__ */ React.createElement("div", { className: "min-h-0 flex-1 overflow-y-auto" }, /* @__PURE__ */ React.createElement(
+      DataTableFilterGroupEditor,
+      {
+        group,
+        columns,
+        localeText,
+        overlayBoundary,
+        onGroupChange: (next) => onFilterChange(next.items.length ? next : void 0)
+      }
+    )),
+    /* @__PURE__ */ React.createElement("div", { className: "border-border flex justify-end border-t pt-2" }, /* @__PURE__ */ React.createElement(
+      Button,
+      {
+        type: "button",
+        variant: "outline",
+        size: "sm",
+        onClick: () => onFilterChange(void 0)
+      },
+      localeText.clearFilters
+    ))
+  ));
+}
+function DataTableFilterGroupEditor({
+  group,
+  columns,
+  localeText,
+  overlayBoundary,
+  depth = 0,
+  onGroupChange,
+  onRemove
+}) {
+  const addRule = () => {
+    const firstColumn = columns[0];
+    if (!firstColumn) return;
+    onGroupChange({
+      ...group,
+      items: [...group.items, createFilterRule(firstColumn.id)]
+    });
+  };
+  const addGroup = () => {
+    onGroupChange({
+      ...group,
+      items: [...group.items, createFilterGroup()]
+    });
+  };
+  const updateItem = (item) => {
+    onGroupChange({
+      ...group,
+      items: group.items.map((current) => current.id === item.id ? item : current)
+    });
+  };
+  const removeItem = (itemId) => {
+    onGroupChange({
+      ...group,
+      items: group.items.filter((item) => item.id !== itemId)
+    });
+  };
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: cn("border-border grid gap-2 rounded-md border p-2", depth > 0 && "bg-muted/30")
+    },
+    /* @__PURE__ */ React.createElement("div", { className: "grid gap-2 sm:flex sm:flex-wrap sm:items-end" }, /* @__PURE__ */ React.createElement("div", { className: "text-muted-foreground grid gap-1 text-xs font-medium sm:min-w-40" }, /* @__PURE__ */ React.createElement("span", null, localeText.filterLogicLabel), /* @__PURE__ */ React.createElement(
+      DataTableSelect,
+      {
+        value: group.logic,
+        onValueChange: (value) => onGroupChange({ ...group, logic: value }),
+        options: [
+          { value: "and", label: "AND" },
+          { value: "or", label: "OR" }
+        ],
+        ariaLabel: localeText.filterLogicLabel,
+        className: "sm:w-40",
+        overlayBoundary
+      }
+    )), /* @__PURE__ */ React.createElement(
+      Button,
+      {
+        type: "button",
+        variant: "outline",
+        size: "sm",
+        className: "w-full sm:w-auto",
+        onClick: addRule,
+        disabled: columns.length === 0
+      },
+      localeText.addFilter
+    ), /* @__PURE__ */ React.createElement(
+      Button,
+      {
+        type: "button",
+        variant: "outline",
+        size: "sm",
+        className: "w-full sm:w-auto",
+        onClick: addGroup
+      },
+      localeText.addFilterGroup
+    ), onRemove ? /* @__PURE__ */ React.createElement(
+      Button,
+      {
+        type: "button",
+        variant: "outline",
+        size: "sm",
+        className: "w-full sm:w-auto",
+        onClick: onRemove
+      },
+      localeText.removeFilterGroup
+    ) : null),
+    group.items.map(
+      (item) => isFilterRule(item) ? /* @__PURE__ */ React.createElement(
+        DataTableFilterRuleEditor,
+        {
+          key: item.id,
+          rule: item,
+          columns,
+          localeText,
+          overlayBoundary,
+          onRuleChange: updateItem,
+          onRemove: () => removeItem(item.id)
+        }
+      ) : /* @__PURE__ */ React.createElement(
+        DataTableFilterGroupEditor,
+        {
+          key: item.id,
+          group: item,
+          columns,
+          localeText,
+          overlayBoundary,
+          depth: depth + 1,
+          onGroupChange: updateItem,
+          onRemove: () => removeItem(item.id)
+        }
+      )
+    )
+  );
+}
+function DataTableFilterRuleEditor({
+  rule,
+  columns,
+  localeText,
+  overlayBoundary,
+  onRuleChange,
+  onRemove
+}) {
+  return /* @__PURE__ */ React.createElement("div", { className: "grid min-w-0 gap-2" }, /* @__PURE__ */ React.createElement("div", { className: "grid grid-cols-2 gap-2" }, /* @__PURE__ */ React.createElement("div", { className: "text-muted-foreground grid gap-1 text-xs font-medium" }, /* @__PURE__ */ React.createElement("span", null, localeText.filterColumnLabel), /* @__PURE__ */ React.createElement(
+    DataTableSelect,
+    {
+      value: rule.columnId,
+      onValueChange: (value) => onRuleChange({ ...rule, columnId: value }),
+      options: columns.map((column) => ({ value: column.id, label: column.id })),
+      ariaLabel: localeText.filterColumnLabel,
+      searchable: columns.length > 8,
+      overlayBoundary
+    }
+  )), /* @__PURE__ */ React.createElement("div", { className: "text-muted-foreground grid gap-1 text-xs font-medium" }, /* @__PURE__ */ React.createElement("span", null, localeText.filterOperatorLabel), /* @__PURE__ */ React.createElement(
+    DataTableSelect,
+    {
+      value: rule.operator,
+      onValueChange: (value) => onRuleChange({ ...rule, operator: value }),
+      options: filterOperators.map((operator) => ({ value: operator, label: operator })),
+      ariaLabel: localeText.filterOperatorLabel,
+      overlayBoundary
+    }
+  ))), /* @__PURE__ */ React.createElement("div", { className: "grid grid-cols-[1fr_auto] items-end gap-2" }, /* @__PURE__ */ React.createElement("label", { className: "text-muted-foreground grid min-w-0 gap-1 text-xs font-medium" }, localeText.filterValueLabel, /* @__PURE__ */ React.createElement(
+    Input,
+    {
+      value: String(rule.value ?? ""),
+      onChange: (event) => onRuleChange({ ...rule, value: event.target.value }),
+      className: "min-w-0"
+    }
+  )), /* @__PURE__ */ React.createElement(Button, { type: "button", variant: "outline", size: "sm", onClick: onRemove }, localeText.removeFilter)));
+}
+function DataTableColumnFilter({
+  column,
+  title
+}) {
+  const facets = column.getFacetedUniqueValues();
+  const filterValue = String(column.getFilterValue() ?? "");
+  const options = Array.from(facets.keys()).map((option) => String(option)).filter((option) => normalizeSearch(option).includes(normalizeSearch(filterValue))).slice(0, 200);
+  return /* @__PURE__ */ React.createElement("div", { className: "flex w-full max-w-sm flex-col gap-1" }, /* @__PURE__ */ React.createElement("span", { className: "text-xs font-medium" }, title ?? column.id), /* @__PURE__ */ React.createElement(
+    Combobox.Root,
+    {
+      inputValue: filterValue,
+      onInputValueChange: (value) => column.setFilterValue(value),
+      value: filterValue,
+      onValueChange: (value) => column.setFilterValue(value)
+    },
+    /* @__PURE__ */ React.createElement(Combobox.Input, { "aria-label": title ?? column.id }),
+    /* @__PURE__ */ React.createElement(Combobox.Content, { className: "bg-popover relative z-[1100] max-h-[min(45dvh,18rem)] w-[var(--structyl-popper-anchor-width)]" }, options.length ? options.map((option) => /* @__PURE__ */ React.createElement(Combobox.Item, { key: option, value: option }, option)) : /* @__PURE__ */ React.createElement(Combobox.Empty, null, "No options"))
+  ));
+}
+function DataTableColumnVisibility({ table }) {
+  return /* @__PURE__ */ React.createElement(DataTableColumnConfiguration, { table });
+}
+function DataTableColumnConfiguration({
+  table,
+  selectedColumnIds = [],
+  onSelectedColumnIdsChange,
+  localeText = defaultLocaleText,
+  enableColumnSelection,
+  enableGrouping,
+  enableColumnPinning,
+  overlayBoundary
+}) {
+  return /* @__PURE__ */ React.createElement(Popover.Root, null, /* @__PURE__ */ React.createElement(Popover.Trigger, { asChild: true }, /* @__PURE__ */ React.createElement(Button, { type: "button", variant: "outline", size: "sm" }, /* @__PURE__ */ React.createElement(Columns3, { className: "mr-1.5 size-4" }), localeText.columns)), /* @__PURE__ */ React.createElement(
+    Popover.Content,
+    {
+      align: "end",
+      sideOffset: 6,
+      container: overlayBoundary,
+      collisionBoundary: overlayBoundary,
+      collisionPadding: 8,
+      strategy: "absolute",
+      sticky: "always",
+      "data-datatable-column-panel": "",
+      className: "bg-popover relative z-[1000] grid max-h-[min(45dvh,18rem,var(--structyl-popper-available-height))] w-[min(18rem,var(--structyl-popper-available-width),calc(100vw-2rem))] gap-1 overflow-auto rounded-md p-1"
+    },
+    table.getAllLeafColumns().map((column) => /* @__PURE__ */ React.createElement("div", { key: column.id, className: "hover:bg-accent grid gap-1 rounded-sm px-2 py-1 text-sm" }, /* @__PURE__ */ React.createElement("label", { className: "flex items-center gap-2" }, /* @__PURE__ */ React.createElement(
+      Checkbox,
+      {
+        checked: column.getIsVisible(),
+        disabled: !column.getCanHide(),
+        onCheckedChange: (checked) => column.toggleVisibility(checked === true),
+        "aria-label": `Toggle ${column.id}`
+      }
+    ), /* @__PURE__ */ React.createElement("span", { className: "min-w-0 flex-1 truncate" }, column.id)), /* @__PURE__ */ React.createElement("div", { className: "flex flex-wrap gap-1 pl-5" }, enableColumnSelection ? /* @__PURE__ */ React.createElement(
+      Button,
+      {
+        type: "button",
+        variant: "outline",
+        size: "sm",
+        className: "h-7 px-2 text-xs",
+        onClick: () => onSelectedColumnIdsChange?.(toggleId(selectedColumnIds, column.id))
+      },
+      localeText.selectColumn
+    ) : null, enableColumnPinning ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+      Button,
+      {
+        type: "button",
+        variant: "outline",
+        size: "sm",
+        className: "h-7 px-2 text-xs",
+        onClick: () => column.pin("left")
+      },
+      localeText.pinLeft
+    ), /* @__PURE__ */ React.createElement(
+      Button,
+      {
+        type: "button",
+        variant: "outline",
+        size: "sm",
+        className: "h-7 px-2 text-xs",
+        onClick: () => column.pin(false)
+      },
+      localeText.unpin
+    )) : null, enableGrouping && column.getCanGroup() ? /* @__PURE__ */ React.createElement(
+      Button,
+      {
+        type: "button",
+        variant: "outline",
+        size: "sm",
+        className: "h-7 px-2 text-xs",
+        onClick: () => column.toggleGrouping()
+      },
+      column.getIsGrouped() ? localeText.ungroup : localeText.groupBy
+    ) : null)))
+  ));
+}
+function DataTableInlineCreateRow({
+  createRow,
+  colSpan,
+  localeText
+}) {
+  const initialValues = React.useMemo(
+    () => Object.fromEntries(createRow.fields.map((field) => [field.id, ""])),
+    [createRow.fields]
+  );
+  const [values, setValues] = React.useState(initialValues);
+  React.useEffect(() => setValues(initialValues), [initialValues]);
+  return /* @__PURE__ */ React.createElement("tr", { className: "border-border bg-muted/20 border-b" }, /* @__PURE__ */ React.createElement("td", { colSpan, className: "p-3" }, /* @__PURE__ */ React.createElement(
+    "form",
+    {
+      className: "flex flex-wrap items-end gap-2",
+      onSubmit: (event) => {
+        event.preventDefault();
+        createRow.onAdd(values);
+        setValues(initialValues);
+      }
+    },
+    createRow.fields.map((field) => /* @__PURE__ */ React.createElement("label", { key: field.id, className: "text-muted-foreground grid gap-1 text-xs font-medium" }, field.label ?? field.id, /* @__PURE__ */ React.createElement(
+      Input,
+      {
+        type: field.type ?? "text",
+        value: values[field.id] ?? "",
+        placeholder: field.placeholder,
+        onChange: (event) => setValues((current) => ({ ...current, [field.id]: event.target.value }))
+      }
+    ))),
+    /* @__PURE__ */ React.createElement(Button, { type: "submit", variant: "outline", size: "sm" }, createRow.label ?? localeText.addRow)
+  )));
+}
+function exportToCSV(table, filename = "export.csv", options) {
+  const cols = options?.includeHidden ? table.getAllLeafColumns() : table.getVisibleLeafColumns();
+  const headers = cols.map((column) => column.id);
+  const rows = options?.onlySelected ? table.getFilteredSelectedRowModel().rows : table.getFilteredRowModel().rows;
+  const lines = [headers.join(",")];
+  for (const row of rows) {
+    lines.push(cols.map((column) => escapeCsv(row.getValue(column.id))).join(","));
+  }
+  download(lines.join("\n"), filename, "text/csv;charset=utf-8;");
+}
+function exportToJSON(table, filename = "export.json", options) {
+  const rows = options?.onlySelected ? table.getFilteredSelectedRowModel().rows : table.getFilteredRowModel().rows;
+  const data = rows.map((row) => row.original);
+  download(JSON.stringify(data, null, 2), filename, "application/json");
+}
+function download(content, filename, mime) {
+  if (typeof document === "undefined") return;
+  const blob = new Blob([content], { type: mime });
+  const url = URL.createObjectURL(blob);
+  const anchor = document.createElement("a");
+  anchor.href = url;
+  anchor.download = filename;
+  anchor.click();
+  setTimeout(() => URL.revokeObjectURL(url), 0);
+}
+function EditableCell({ value, onCommit, type = "text" }) {
+  const [editing, setEditing] = React.useState(false);
+  const [local, setLocal] = React.useState(String(value ?? ""));
+  React.useEffect(() => {
+    if (!editing) setLocal(String(value ?? ""));
+  }, [value, editing]);
+  if (!editing) {
+    return /* @__PURE__ */ React.createElement(
+      "span",
+      {
+        tabIndex: 0,
+        onClick: () => setEditing(true),
+        onKeyDown: (event) => {
+          if (event.key === "Enter" || event.key === " ") setEditing(true);
+        },
+        className: "hover:bg-accent cursor-text rounded px-1"
+      },
+      String(value ?? "")
+    );
+  }
+  return /* @__PURE__ */ React.createElement(
+    Input,
+    {
+      autoFocus: true,
+      type,
+      value: local,
+      onChange: (event) => setLocal(event.target.value),
+      onBlur: () => {
+        const next = type === "number" ? Number(local) : local;
+        onCommit(next);
+        setEditing(false);
+      },
+      onKeyDown: (event) => {
+        if (event.key === "Enter") {
+          const next = type === "number" ? Number(local) : local;
+          onCommit(next);
+          setEditing(false);
+        } else if (event.key === "Escape") {
+          setLocal(String(value ?? ""));
+          setEditing(false);
+        }
+      },
+      className: "w-full"
+    }
+  );
+}
+function DataTableCardView({
+  table,
+  breakpoint,
+  allRows
+}) {
+  const leafColumns = table.getAllLeafColumns().filter(
+    (c) => c.getIsVisible() && !c.id.startsWith("__")
+  );
+  const hiddenClass = breakpoint === "sm" ? "sm:hidden" : breakpoint === "md" ? "md:hidden" : "lg:hidden";
+  return /* @__PURE__ */ React.createElement("div", { className: cn("grid gap-3", hiddenClass) }, allRows.map((row) => /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      key: row.id,
+      className: "border-border bg-card rounded-lg border p-4",
+      "data-state": row.getIsSelected() ? "selected" : void 0
+    },
+    leafColumns.map((col) => {
+      const cell = row.getAllCells().find((c) => c.column.id === col.id);
+      if (!cell) return null;
+      const label = typeof col.columnDef.header === "string" ? col.columnDef.header : col.id;
+      return /* @__PURE__ */ React.createElement("div", { key: col.id, className: "mb-2 flex items-start justify-between gap-2 text-sm last:mb-0" }, /* @__PURE__ */ React.createElement("span", { className: "text-muted-foreground shrink-0 font-medium" }, label), /* @__PURE__ */ React.createElement("span", { className: "text-right" }, flexRender(col.columnDef.cell, cell.getContext())));
+    })
+  )));
+}
+function createRowNumberColumn(text) {
+  return {
+    id: "__rownum",
+    size: 48,
+    enableSorting: false,
+    enableHiding: false,
+    enableResizing: false,
+    header: () => /* @__PURE__ */ React.createElement("span", { className: "text-muted-foreground text-xs font-medium" }, text.rowNumberHeader),
+    cell: ({ row }) => /* @__PURE__ */ React.createElement("span", { className: "text-muted-foreground tabular-nums text-xs" }, row.index + 1)
+  };
+}
+function DataTableStatusBar({
+  table,
+  localeText,
+  validationErrorCount = 0
+}) {
+  const totalRows = table.getFilteredRowModel().rows.length;
+  const selectedRows = table.getFilteredSelectedRowModel().rows.length;
+  return /* @__PURE__ */ React.createElement("div", { className: "border-border text-muted-foreground flex items-center gap-4 border-t px-3 py-1.5 text-xs" }, /* @__PURE__ */ React.createElement("span", null, localeText.statusBarRows(totalRows)), selectedRows > 0 ? /* @__PURE__ */ React.createElement("span", null, localeText.statusBarSelected(selectedRows)) : null, validationErrorCount > 0 ? /* @__PURE__ */ React.createElement("span", { className: "text-destructive" }, validationErrorCount, " validation error", validationErrorCount !== 1 ? "s" : "") : null);
+}
+function createSelectionColumn(multi) {
+  return {
+    id: "__select",
+    size: 42,
+    enableSorting: false,
+    enableHiding: false,
+    header: ({ table }) => multi ? /* @__PURE__ */ React.createElement(
+      Checkbox,
+      {
+        "aria-label": "Select all rows",
+        checked: table.getIsAllPageRowsSelected() ? true : table.getIsSomePageRowsSelected() ? "indeterminate" : false,
+        onCheckedChange: (checked) => table.toggleAllPageRowsSelected(checked === true)
+      }
+    ) : null,
+    cell: ({ row }) => /* @__PURE__ */ React.createElement(
+      Checkbox,
+      {
+        "aria-label": "Select row",
+        checked: row.getIsSelected(),
+        disabled: !row.getCanSelect(),
+        onCheckedChange: (checked) => row.toggleSelected(checked === true)
+      }
+    )
+  };
+}
+function createActionColumn(rowActions, text) {
+  return {
+    id: "__actions",
+    header: text.rowActions,
+    enableSorting: false,
+    enableHiding: false,
+    cell: ({ row }) => rowActions(row)
+  };
+}
+function createRowTotalColumn(rowTotals, text) {
+  const options = typeof rowTotals === "object" ? rowTotals : {};
+  const id = options.id ?? "__row_total";
+  return {
+    id,
+    header: () => options.header ?? text.rowTotal,
+    enableSorting: false,
+    cell: ({ row, table }) => {
+      const columns = options.columns ?? table.getVisibleLeafColumns().map((column) => column.id);
+      const total = columns.reduce((sum, columnId) => sum + toNumber(row.getValue(columnId)), 0);
+      return options.format?.(total, row) ?? total;
+    }
+  };
+}
+function DataTableBulkActionsBar({
+  table,
+  actions,
+  localeText
+}) {
+  const selectedRows = table.getFilteredSelectedRowModel().rows;
+  const count = selectedRows.length;
+  if (count === 0) return null;
+  return /* @__PURE__ */ React.createElement("div", { className: "bg-primary/10 border-primary/30 flex flex-wrap items-center justify-between gap-2 rounded-md border px-3 py-2" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-3" }, /* @__PURE__ */ React.createElement("span", { className: "text-primary text-sm font-medium" }, localeText.bulkActionsTitle(count)), /* @__PURE__ */ React.createElement(
+    Button,
+    {
+      type: "button",
+      variant: "ghost",
+      size: "sm",
+      className: "text-muted-foreground h-7 px-2 text-xs",
+      onClick: () => table.resetRowSelection()
+    },
+    localeText.clearSelection
+  )), /* @__PURE__ */ React.createElement("div", { className: "flex flex-wrap items-center gap-2" }, actions.map((action) => {
+    const isDisabled = typeof action.disabled === "function" ? action.disabled(selectedRows) : action.disabled ?? false;
+    return /* @__PURE__ */ React.createElement(
+      Button,
+      {
+        key: action.id,
+        type: "button",
+        variant: action.variant === "destructive" ? "destructive" : "outline",
+        size: "sm",
+        disabled: isDisabled,
+        title: action.tooltip,
+        "aria-label": typeof action.label === "string" ? action.label : action.id,
+        onClick: () => action.onClick(selectedRows, table),
+        className: "h-8"
+      },
+      action.icon ? /* @__PURE__ */ React.createElement("span", { className: "inline-flex items-center gap-1.5" }, action.icon, action.label) : action.label
+    );
+  })));
+}
+function createRowActionMenuColumn(items, text) {
+  return {
+    id: "__action_menu",
+    header: text.rowActions,
+    size: 52,
+    enableSorting: false,
+    enableHiding: false,
+    cell: ({ row }) => {
+      const visibleItems = items.filter((item) => {
+        const hidden = typeof item.hidden === "function" ? item.hidden(row) : item.hidden ?? false;
+        return !hidden;
+      });
+      if (!visibleItems.length) return null;
+      return /* @__PURE__ */ React.createElement(
+        "span",
+        {
+          className: "inline-flex",
+          onClick: (e) => e.stopPropagation(),
+          onPointerDown: (e) => e.stopPropagation()
+        },
+        /* @__PURE__ */ React.createElement(DropdownMenu.Root, null, /* @__PURE__ */ React.createElement(DropdownMenu.Trigger, { asChild: true }, /* @__PURE__ */ React.createElement(
+          Button,
+          {
+            type: "button",
+            variant: "ghost",
+            size: "icon-sm",
+            "aria-label": text.rowActions,
+            className: "h-7 w-7"
+          },
+          "\u22EE"
+        )), /* @__PURE__ */ React.createElement(
+          DropdownMenu.Content,
+          {
+            align: "end",
+            strategy: "absolute",
+            sticky: "always",
+            className: "bg-popover relative z-[1000] min-w-36 overflow-hidden"
+          },
+          visibleItems.map((item) => {
+            const isDisabled = typeof item.disabled === "function" ? item.disabled(row) : item.disabled ?? false;
+            return /* @__PURE__ */ React.createElement(React.Fragment, { key: item.id }, item.separator ? /* @__PURE__ */ React.createElement(DropdownMenu.Separator, null) : null, /* @__PURE__ */ React.createElement(
+              DropdownMenu.Item,
+              {
+                disabled: isDisabled,
+                className: cn(
+                  "flex cursor-pointer items-center gap-2",
+                  item.variant === "destructive" && "text-destructive",
+                  isDisabled && "cursor-not-allowed opacity-50"
+                ),
+                onSelect: () => item.onClick(row)
+              },
+              item.icon ? /* @__PURE__ */ React.createElement("span", { className: "size-4 shrink-0" }, item.icon) : null,
+              item.label
+            ));
+          })
+        ))
+      );
+    }
+  };
+}
+function createRowActionButtonsColumn(items, text) {
+  return {
+    id: "__action_buttons",
+    header: text.rowActions,
+    size: Math.max(items.length * 80, 100),
+    enableSorting: false,
+    enableHiding: false,
+    cell: ({ row }) => {
+      const visibleItems = items.filter((item) => {
+        const hidden = typeof item.hidden === "function" ? item.hidden(row) : item.hidden ?? false;
+        return !hidden;
+      });
+      return /* @__PURE__ */ React.createElement("div", { className: "flex flex-wrap items-center gap-1" }, visibleItems.map((item) => {
+        const isDisabled = typeof item.disabled === "function" ? item.disabled(row) : item.disabled ?? false;
+        return /* @__PURE__ */ React.createElement(
+          Button,
+          {
+            key: item.id,
+            type: "button",
+            variant: item.variant === "destructive" ? "destructive" : "outline",
+            size: "sm",
+            disabled: isDisabled,
+            title: item.tooltip,
+            "aria-label": typeof item.label === "string" ? item.label : item.id,
+            onClick: () => item.onClick(row),
+            className: "h-7"
+          },
+          item.icon ? /* @__PURE__ */ React.createElement("span", { className: "inline-flex items-center gap-1" }, item.icon, item.label) : item.label
+        );
+      }));
+    }
+  };
+}
+function SparklineSVG({
+  data,
+  type = "line"
+}) {
+  const width = 60;
+  const height = 20;
+  if (!data.length) return /* @__PURE__ */ React.createElement("svg", { width, height });
+  const min = Math.min(...data);
+  const max = Math.max(...data);
+  const range = max - min || 1;
+  const normalize = (v) => height - (v - min) / range * (height - 2) - 1;
+  if (type === "bar") {
+    const barW = Math.max(1, width / data.length - 1);
+    return /* @__PURE__ */ React.createElement("svg", { width, height, "aria-hidden": "true" }, data.map((v, i) => {
+      const barH = Math.max(1, (v - min) / range * (height - 2));
+      return /* @__PURE__ */ React.createElement(
+        "rect",
+        {
+          key: i,
+          x: i * (width / data.length),
+          y: height - barH,
+          width: barW,
+          height: barH,
+          fill: "hsl(var(--primary))"
+        }
+      );
+    }));
+  }
+  const points = data.map((v, i) => `${i / Math.max(data.length - 1, 1) * width},${normalize(v)}`).join(" ");
+  if (type === "area") {
+    const firstX = 0;
+    const lastX = width;
+    const areaPath = `M${firstX},${height} L${points.split(" ").map((p) => p).join(" L")} L${lastX},${height} Z`;
+    return /* @__PURE__ */ React.createElement("svg", { width, height, "aria-hidden": "true" }, /* @__PURE__ */ React.createElement("path", { d: areaPath, fill: "hsl(var(--primary))", fillOpacity: "0.3", stroke: "none" }), /* @__PURE__ */ React.createElement(
+      "polyline",
+      {
+        points,
+        fill: "none",
+        stroke: "hsl(var(--primary))",
+        strokeWidth: "1.5",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    ));
+  }
+  return /* @__PURE__ */ React.createElement("svg", { width, height, "aria-hidden": "true" }, /* @__PURE__ */ React.createElement(
+    "polyline",
+    {
+      points,
+      fill: "none",
+      stroke: "hsl(var(--primary))",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ));
+}
+function buildBuiltinCellRenderer({
+  type,
+  badgeMap,
+  currencyCode,
+  currencyLocale,
+  linkHref,
+  linkTarget,
+  avatarSrc,
+  sparklineData,
+  sparklineType,
+  progressMax = 100,
+  ratingMax = 5,
+  locale: colLocale,
+  dateFormat,
+  numberFormat,
+  timezone
+}) {
+  const resolvedLocale = colLocale ?? "en-US";
+  switch (type) {
+    case "badge":
+      return ({ getValue }) => {
+        const value = getValue();
+        const str = String(value ?? "");
+        const spec = badgeMap?.[str];
+        const label = spec?.label ?? str;
+        const bg = spec?.color ?? "#6b7280";
+        const fg = spec?.textColor ?? "#ffffff";
+        return /* @__PURE__ */ React.createElement(
+          "span",
+          {
+            style: { background: bg, color: fg },
+            className: "inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium"
+          },
+          label
+        );
+      };
+    case "progress":
+      return ({ getValue }) => {
+        const value = Number(getValue() ?? 0);
+        const percent = Math.min(100, Math.max(0, value / progressMax * 100));
+        return /* @__PURE__ */ React.createElement("div", { className: "relative h-4 w-full min-w-12 overflow-hidden rounded bg-muted" }, /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            className: "h-full rounded bg-primary transition-all",
+            style: { width: `${percent}%` }
+          }
+        ), /* @__PURE__ */ React.createElement("span", { className: "absolute inset-0 flex items-center justify-center text-[10px] font-medium leading-none" }, value, "%"));
+      };
+    case "link":
+      return ({ getValue, row }) => {
+        const value = getValue();
+        const str = String(value ?? "");
+        const href = typeof linkHref === "function" ? linkHref(value, row.original) : linkHref ?? str;
+        return /* @__PURE__ */ React.createElement(
+          "a",
+          {
+            href,
+            target: linkTarget ?? "_blank",
+            rel: "noopener noreferrer",
+            className: "text-primary underline-offset-2 hover:underline",
+            onClick: (e) => e.stopPropagation()
+          },
+          str
+        );
+      };
+    case "avatar":
+      return ({ getValue, row }) => {
+        const value = getValue();
+        const str = String(value ?? "");
+        const src = avatarSrc ? avatarSrc(value, row.original) : "";
+        return /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2" }, src ? /* @__PURE__ */ React.createElement(
+          "img",
+          {
+            src,
+            alt: str,
+            className: "h-7 w-7 rounded-full object-cover"
+          }
+        ) : /* @__PURE__ */ React.createElement("span", { className: "flex h-7 w-7 items-center justify-center rounded-full bg-muted text-xs font-medium" }, str.charAt(0).toUpperCase()), /* @__PURE__ */ React.createElement("span", null, str));
+      };
+    case "date":
+      return ({ getValue }) => {
+        const raw = getValue();
+        if (raw == null || raw === "") return null;
+        try {
+          const d = new Date(raw);
+          if (isNaN(d.getTime())) return /* @__PURE__ */ React.createElement("span", null, String(raw));
+          return /* @__PURE__ */ React.createElement("span", null, new Intl.DateTimeFormat(resolvedLocale, dateFormat ?? { year: "numeric", month: "short", day: "numeric" }).format(d));
+        } catch {
+          return /* @__PURE__ */ React.createElement("span", null, String(raw));
+        }
+      };
+    case "dateTime":
+      return ({ getValue }) => {
+        const raw = getValue();
+        if (raw == null || raw === "") return null;
+        try {
+          const d = new Date(raw);
+          if (isNaN(d.getTime())) return /* @__PURE__ */ React.createElement("span", null, String(raw));
+          const opts = dateFormat ?? {
+            year: "numeric",
+            month: "short",
+            day: "numeric",
+            hour: "2-digit",
+            minute: "2-digit",
+            ...timezone ? { timeZone: timezone } : {}
+          };
+          return /* @__PURE__ */ React.createElement("span", null, new Intl.DateTimeFormat(resolvedLocale, opts).format(d));
+        } catch {
+          return /* @__PURE__ */ React.createElement("span", null, String(raw));
+        }
+      };
+    case "number":
+      return ({ getValue }) => {
+        const raw = getValue();
+        if (raw == null || raw === "") return null;
+        const num = Number(raw);
+        if (!Number.isFinite(num)) return /* @__PURE__ */ React.createElement("span", null, String(raw));
+        return /* @__PURE__ */ React.createElement("span", { className: "tabular-nums" }, new Intl.NumberFormat(resolvedLocale, numberFormat).format(num));
+      };
+    case "currency":
+      return ({ getValue }) => {
+        const value = Number(getValue() ?? 0);
+        const formatted = new Intl.NumberFormat(colLocale ?? currencyLocale ?? "en-US", {
+          style: "currency",
+          currency: currencyCode ?? "USD",
+          ...numberFormat ?? {}
+        }).format(value);
+        return /* @__PURE__ */ React.createElement("span", { className: "tabular-nums" }, formatted);
+      };
+    case "sparkline":
+      return ({ row }) => {
+        const data = sparklineData ? sparklineData(row.original) : [];
+        return /* @__PURE__ */ React.createElement(SparklineSVG, { data, type: sparklineType });
+      };
+    case "rating":
+      return ({ getValue }) => {
+        const value = Number(getValue() ?? 0);
+        const stars = Array.from({ length: ratingMax }, (_, i) => i + 1);
+        return /* @__PURE__ */ React.createElement("span", { className: "inline-flex items-center gap-0.5", "aria-label": `${value} out of ${ratingMax} stars` }, stars.map((star) => /* @__PURE__ */ React.createElement(
+          "span",
+          {
+            key: star,
+            className: star <= value ? "text-yellow-400" : "text-muted-foreground/30",
+            "aria-hidden": "true"
+          },
+          "\u2605"
+        )));
+      };
+    case "boolean":
+      return ({ getValue }) => {
+        const value = getValue();
+        const isTrue = value === true || value === "true" || value === 1 || value === "1";
+        return isTrue ? /* @__PURE__ */ React.createElement("span", { className: "text-green-500 font-bold", "aria-label": "Yes" }, "\u2713") : /* @__PURE__ */ React.createElement("span", { className: "text-muted-foreground", "aria-label": "No" }, "\u2717");
+      };
+    default:
+      return void 0;
+  }
+}
+function DataTableKeyboardShortcutsModal({
+  open,
+  onOpenChange,
+  enablePaste: showPaste
+}) {
+  const shortcuts = [
+    { key: "Ctrl+F", action: "Focus search" },
+    { key: "Ctrl+C", action: "Copy selected rows" },
+    { key: "Ctrl+V", action: "Paste (if enablePaste)", show: showPaste },
+    { key: "Shift+Click", action: "Multi-sort column" },
+    { key: "Space", action: "Toggle row selection" },
+    { key: "Enter", action: "Expand / collapse row" },
+    { key: "?", action: "Show this help" },
+    { key: "Escape", action: "Close panels" },
+    { key: "F11", action: "Toggle fullscreen" },
+    { key: "Ctrl+Z", action: "Undo last edit" },
+    { key: "Ctrl+Y", action: "Redo last edit" }
+  ];
+  const visible = shortcuts.filter((s) => s.show !== false);
+  return /* @__PURE__ */ React.createElement(Drawer.Root, { open, onOpenChange }, /* @__PURE__ */ React.createElement(
+    Drawer.Content,
+    {
+      style: {
+        top: "50%",
+        left: "50%",
+        right: "auto",
+        bottom: "auto",
+        transform: "translate(-50%, -50%)",
+        height: "auto",
+        maxHeight: "90vh",
+        width: "480px",
+        maxWidth: "95vw",
+        marginTop: 0,
+        borderRadius: "0.5rem",
+        "--tw-enter-translate-y": "0",
+        "--tw-exit-translate-y": "0"
+      },
+      className: "flex flex-col overflow-hidden [&>div:first-child]:hidden"
+    },
+    /* @__PURE__ */ React.createElement(Drawer.Header, { className: "border-border flex-shrink-0 border-b px-4 py-3 text-left" }, /* @__PURE__ */ React.createElement(Drawer.Title, null, "Keyboard Shortcuts"), /* @__PURE__ */ React.createElement(Drawer.Description, null, "All keyboard shortcuts available in the data table.")),
+    /* @__PURE__ */ React.createElement("div", { className: "overflow-y-auto p-4" }, /* @__PURE__ */ React.createElement("table", { className: "w-full text-sm" }, /* @__PURE__ */ React.createElement("thead", null, /* @__PURE__ */ React.createElement("tr", { className: "border-border border-b" }, /* @__PURE__ */ React.createElement("th", { className: "pb-2 text-left font-medium" }, "Shortcut"), /* @__PURE__ */ React.createElement("th", { className: "pb-2 text-left font-medium" }, "Action"))), /* @__PURE__ */ React.createElement("tbody", null, visible.map((s) => /* @__PURE__ */ React.createElement("tr", { key: s.key, className: "border-border border-b last:border-0" }, /* @__PURE__ */ React.createElement("td", { className: "py-2 pr-4" }, /* @__PURE__ */ React.createElement("kbd", { className: "bg-muted border-border rounded border px-1.5 py-0.5 font-mono text-xs" }, s.key)), /* @__PURE__ */ React.createElement("td", { className: "text-muted-foreground py-2" }, s.action)))))),
+    /* @__PURE__ */ React.createElement("div", { className: "border-border border-t p-3" }, /* @__PURE__ */ React.createElement(Button, { type: "button", variant: "outline", size: "sm", className: "w-full", onClick: () => onOpenChange(false) }, "Close"))
+  ));
+}
+function computeColumnStats(rows, columnId) {
+  const values = rows.map((row) => row.getValue(columnId));
+  const count = values.length;
+  const nullCount = values.filter((v) => v == null || v === "").length;
+  const uniqueValues = new Set(values.map((v) => String(v ?? "")));
+  const uniqueCount = uniqueValues.size;
+  const numericValues = values.map((v) => Number(v)).filter((n) => Number.isFinite(n));
+  const isNumeric = numericValues.length > 0 && numericValues.length === values.filter((v) => v != null && v !== "").length;
+  let min;
+  let max;
+  let mean;
+  let median;
+  let sum;
+  if (isNumeric && numericValues.length > 0) {
+    min = Math.min(...numericValues);
+    max = Math.max(...numericValues);
+    sum = numericValues.reduce((a, b) => a + b, 0);
+    mean = sum / numericValues.length;
+    const sorted = [...numericValues].sort((a, b) => a - b);
+    const mid = Math.floor(sorted.length / 2);
+    median = sorted.length % 2 === 0 ? ((sorted[mid - 1] ?? 0) + (sorted[mid] ?? 0)) / 2 : sorted[mid] ?? 0;
+  }
+  const stringValues = values.map((v) => String(v ?? ""));
+  const minLength = Math.min(...stringValues.map((s) => s.length));
+  const maxLength = Math.max(...stringValues.map((s) => s.length));
+  const avgLength = stringValues.length > 0 ? stringValues.reduce((a, s) => a + s.length, 0) / stringValues.length : 0;
+  const freq = /* @__PURE__ */ new Map();
+  for (const sv of stringValues) {
+    freq.set(sv, (freq.get(sv) ?? 0) + 1);
+  }
+  const topValues = [...freq.entries()].sort((a, b) => b[1] - a[1]).slice(0, 5).map(([value, cnt]) => ({
+    value,
+    count: cnt,
+    pct: count > 0 ? cnt / count * 100 : 0
+  }));
+  return {
+    count,
+    nullCount,
+    uniqueCount,
+    min: isNumeric ? min : void 0,
+    max: isNumeric ? max : void 0,
+    mean: isNumeric ? mean : void 0,
+    median: isNumeric ? median : void 0,
+    sum: isNumeric ? sum : void 0,
+    minLength: !isNumeric ? minLength : void 0,
+    maxLength: !isNumeric ? maxLength : void 0,
+    avgLength: !isNumeric ? avgLength : void 0,
+    topValues
+  };
+}
+function ColumnStatsPanel({
+  table,
+  columnId
+}) {
+  const col = columnId ? table.getColumn(columnId) : void 0;
+  const rows = table.getFilteredRowModel().rows;
+  const stats = React.useMemo(() => {
+    if (!col) return null;
+    return computeColumnStats(rows, col.id);
+  }, [col, rows]);
+  if (!col || !stats) {
+    return /* @__PURE__ */ React.createElement("p", { className: "text-muted-foreground py-6 text-center text-xs" }, "Select a column to view statistics.");
+  }
+  const colHeader = typeof col.columnDef.header === "string" ? col.columnDef.header : col.id;
+  const isNumeric = stats.min !== void 0;
+  const histData = (() => {
+    if (isNumeric) {
+      const numVals = rows.map((r) => Number(r.getValue(col.id))).filter((n) => Number.isFinite(n));
+      if (numVals.length === 0) return [];
+      const minV = stats.min ?? 0;
+      const maxV = stats.max ?? 0;
+      const bucketCount = 8;
+      const bucketSize = (maxV - minV) / bucketCount || 1;
+      const buckets = Array.from({ length: bucketCount }, (_, i) => ({
+        label: (minV + i * bucketSize).toFixed(1),
+        count: 0
+      }));
+      for (const v of numVals) {
+        const idx = Math.min(Math.floor((v - minV) / bucketSize), bucketCount - 1);
+        if (buckets[idx]) buckets[idx].count++;
+      }
+      return buckets;
+    } else {
+      return stats.topValues.slice(0, 8).map((tv) => ({ label: tv.value || "(empty)", count: tv.count }));
+    }
+  })();
+  const maxHistCount = Math.max(...histData.map((b) => b.count), 1);
+  const svgW = 200;
+  const svgH = 60;
+  const barW = Math.floor((svgW - (histData.length - 1) * 2) / Math.max(histData.length, 1));
+  return /* @__PURE__ */ React.createElement("div", { className: "grid gap-3 p-1" }, /* @__PURE__ */ React.createElement("p", { className: "text-xs font-semibold" }, colHeader), /* @__PURE__ */ React.createElement("div", { className: "grid grid-cols-2 gap-1 text-xs" }, [
+    { label: "Count", value: stats.count },
+    { label: "Nulls", value: stats.nullCount },
+    { label: "Unique", value: stats.uniqueCount },
+    ...isNumeric ? [
+      { label: "Min", value: stats.min?.toFixed(2) },
+      { label: "Max", value: stats.max?.toFixed(2) },
+      { label: "Mean", value: stats.mean?.toFixed(2) },
+      { label: "Median", value: stats.median?.toFixed(2) },
+      { label: "Sum", value: stats.sum?.toFixed(2) }
+    ] : [
+      { label: "Min len", value: stats.minLength },
+      { label: "Max len", value: stats.maxLength },
+      { label: "Avg len", value: stats.avgLength?.toFixed(1) }
+    ]
+  ].map((metric) => /* @__PURE__ */ React.createElement("div", { key: metric.label, className: "bg-muted/40 rounded px-2 py-1" }, /* @__PURE__ */ React.createElement("div", { className: "text-muted-foreground text-[10px]" }, metric.label), /* @__PURE__ */ React.createElement("div", { className: "font-medium tabular-nums" }, String(metric.value ?? "\u2014"))))), histData.length > 0 ? /* @__PURE__ */ React.createElement("div", { className: "grid gap-1" }, /* @__PURE__ */ React.createElement("p", { className: "text-muted-foreground text-[10px] font-medium uppercase tracking-wide" }, "Distribution"), /* @__PURE__ */ React.createElement("svg", { width: svgW, height: svgH, "aria-label": "Distribution histogram" }, histData.map((bucket, i) => {
+    const barH = Math.max(2, bucket.count / maxHistCount * (svgH - 4));
+    return /* @__PURE__ */ React.createElement(
+      "rect",
+      {
+        key: i,
+        x: i * (barW + 2),
+        y: svgH - barH,
+        width: barW,
+        height: barH,
+        fill: "hsl(var(--primary))",
+        fillOpacity: 0.7,
+        rx: 1
+      },
+      /* @__PURE__ */ React.createElement("title", null, bucket.label, ": ", bucket.count)
+    );
+  }))) : null, stats.topValues.length > 0 ? /* @__PURE__ */ React.createElement("div", { className: "grid gap-1" }, /* @__PURE__ */ React.createElement("p", { className: "text-muted-foreground text-[10px] font-medium uppercase tracking-wide" }, "Top values"), stats.topValues.map((tv) => /* @__PURE__ */ React.createElement("div", { key: tv.value, className: "grid gap-0.5" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-between text-[10px]" }, /* @__PURE__ */ React.createElement("span", { className: "max-w-[130px] truncate" }, tv.value || "(empty)"), /* @__PURE__ */ React.createElement("span", { className: "text-muted-foreground tabular-nums" }, tv.count)), /* @__PURE__ */ React.createElement("div", { className: "bg-muted h-1.5 w-full rounded-full" }, /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: "bg-primary h-1.5 rounded-full",
+      style: { width: `${tv.pct.toFixed(1)}%` }
+    }
+  ))))) : null);
+}
+function DataTableToolPanel({
+  table,
+  open,
+  tab,
+  onTabChange,
+  onOpenChange,
+  statsColumnId,
+  onStatsColumnChange
+}) {
+  const tabTitles = {
+    columns: "Columns",
+    filters: "Filters",
+    stats: "Statistics"
+  };
+  const handleTabClick = (t) => {
+    if (open && tab === t) {
+      onOpenChange(false);
+    } else {
+      onTabChange(t);
+      onOpenChange(true);
+    }
+  };
+  const allColumns = table.getAllLeafColumns().filter((c) => !c.id.startsWith("__"));
+  const filterableColumns = allColumns.filter((c) => c.getCanFilter());
+  return /* @__PURE__ */ React.createElement("div", { className: "flex" }, /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: cn(
+        "border-border bg-bg overflow-hidden border-l transition-all duration-200",
+        open ? "w-64" : "w-0"
+      ),
+      "aria-hidden": !open
+    },
+    open ? /* @__PURE__ */ React.createElement("div", { className: "flex h-full w-64 flex-col overflow-hidden" }, /* @__PURE__ */ React.createElement("div", { className: "border-border flex items-center justify-between border-b px-3 py-2" }, /* @__PURE__ */ React.createElement("span", { className: "text-sm font-semibold" }, tabTitles[tab]), /* @__PURE__ */ React.createElement(
+      Button,
+      {
+        type: "button",
+        variant: "ghost",
+        size: "icon-sm",
+        onClick: () => onOpenChange(false),
+        "aria-label": "Close panel",
+        className: "h-6 w-6"
+      },
+      /* @__PURE__ */ React.createElement(X, { className: "size-3.5" })
+    )), /* @__PURE__ */ React.createElement("div", { className: "min-h-0 flex-1 overflow-y-auto p-2" }, tab === "columns" ? /* @__PURE__ */ React.createElement("div", { className: "grid gap-0.5" }, /* @__PURE__ */ React.createElement("div", { className: "mb-1 flex gap-1" }, /* @__PURE__ */ React.createElement(
+      Button,
+      {
+        type: "button",
+        variant: "outline",
+        size: "sm",
+        className: "h-6 flex-1 px-1 text-xs",
+        onClick: () => table.getAllLeafColumns().forEach((c) => c.toggleVisibility(true))
+      },
+      "Show all"
+    ), /* @__PURE__ */ React.createElement(
+      Button,
+      {
+        type: "button",
+        variant: "outline",
+        size: "sm",
+        className: "h-6 flex-1 px-1 text-xs",
+        onClick: () => table.getAllLeafColumns().filter((c) => c.getCanHide()).forEach((c) => c.toggleVisibility(false))
+      },
+      "Hide all"
+    )), allColumns.map((col) => {
+      const structylMeta = getStructylMeta(col);
+      const label = typeof col.columnDef.header === "string" ? col.columnDef.header : col.id;
+      return /* @__PURE__ */ React.createElement(
+        "label",
+        {
+          key: col.id,
+          className: "hover:bg-accent flex items-center gap-2 rounded px-2 py-1 text-xs"
+        },
+        /* @__PURE__ */ React.createElement(
+          Checkbox,
+          {
+            checked: col.getIsVisible(),
+            disabled: !col.getCanHide(),
+            onCheckedChange: (checked) => col.toggleVisibility(checked === true),
+            "aria-label": `Toggle ${label}`
+          }
+        ),
+        /* @__PURE__ */ React.createElement("span", { className: "min-w-0 flex-1 truncate" }, label),
+        structylMeta.type ? /* @__PURE__ */ React.createElement("span", { className: "text-muted-foreground bg-muted rounded px-1 py-0.5 font-mono text-[9px]" }, structylMeta.type) : null
+      );
+    })) : tab === "filters" ? /* @__PURE__ */ React.createElement("div", { className: "grid gap-2" }, filterableColumns.length === 0 ? /* @__PURE__ */ React.createElement("p", { className: "text-muted-foreground py-4 text-center text-xs" }, "No filterable columns.") : /* @__PURE__ */ React.createElement(React.Fragment, null, filterableColumns.map((col) => {
+      const label = typeof col.columnDef.header === "string" ? col.columnDef.header : col.id;
+      return /* @__PURE__ */ React.createElement("label", { key: col.id, className: "grid gap-0.5 text-xs" }, /* @__PURE__ */ React.createElement("span", { className: "text-muted-foreground font-medium" }, label), /* @__PURE__ */ React.createElement(
+        Input,
+        {
+          value: String(col.getFilterValue() ?? ""),
+          onChange: (e) => col.setFilterValue(e.target.value || void 0),
+          placeholder: "Filter\u2026",
+          className: "h-7 text-xs"
+        }
+      ));
+    }), /* @__PURE__ */ React.createElement(
+      Button,
+      {
+        type: "button",
+        variant: "outline",
+        size: "sm",
+        className: "mt-1 h-7 text-xs",
+        onClick: () => filterableColumns.forEach((c) => c.setFilterValue(void 0))
+      },
+      "Clear all"
+    ))) : /* @__PURE__ */ React.createElement("div", { className: "grid gap-2" }, statsColumnId ? null : /* @__PURE__ */ React.createElement("div", { className: "grid gap-0.5" }, /* @__PURE__ */ React.createElement("p", { className: "text-muted-foreground mb-1 text-xs" }, "Select column:"), allColumns.map((col) => {
+      const label = typeof col.columnDef.header === "string" ? col.columnDef.header : col.id;
+      return /* @__PURE__ */ React.createElement(
+        "button",
+        {
+          key: col.id,
+          type: "button",
+          onClick: () => onStatsColumnChange?.(col.id),
+          className: cn(
+            "hover:bg-accent rounded px-2 py-1 text-left text-xs",
+            statsColumnId === col.id && "bg-accent"
+          )
+        },
+        label
+      );
+    })), /* @__PURE__ */ React.createElement(ColumnStatsPanel, { table, columnId: statsColumnId }), statsColumnId ? /* @__PURE__ */ React.createElement(
+      Button,
+      {
+        type: "button",
+        variant: "ghost",
+        size: "sm",
+        className: "h-6 text-xs",
+        onClick: () => onStatsColumnChange?.(void 0)
+      },
+      "\u2190 Back to column list"
+    ) : null))) : null
+  ), /* @__PURE__ */ React.createElement("div", { className: "border-border bg-muted/20 flex flex-col border-l" }, [["columns", /* @__PURE__ */ React.createElement(Columns3, { key: "c", className: "size-4" })], ["filters", /* @__PURE__ */ React.createElement(Filter, { key: "f", className: "size-4" })], ["stats", /* @__PURE__ */ React.createElement(BarChart2, { key: "s", className: "size-4" })]].map(([t, icon]) => /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      key: t,
+      type: "button",
+      onClick: () => handleTabClick(t),
+      title: tabTitles[t],
+      "aria-label": tabTitles[t],
+      className: cn(
+        "flex h-10 w-8 items-center justify-center transition-colors",
+        open && tab === t ? "bg-primary/10 text-primary" : "text-muted-foreground hover:bg-accent hover:text-foreground"
+      )
+    },
+    icon
+  ))));
+}
+function exportToXLSX(table, options) {
+  if (typeof document === "undefined") return;
+  const cols = table.getVisibleLeafColumns().filter(
+    (c) => !["__select", "__rownum", "__row_actions", "__row_total", "__action_menu", "__action_buttons", "__actions"].includes(c.id)
+  );
+  const rows = options?.onlySelected ? table.getFilteredSelectedRowModel().rows : table.getFilteredRowModel().rows;
+  const headerRow = cols.map(
+    (c) => typeof c.columnDef.header === "string" ? c.columnDef.header : c.id
+  );
+  const dataRows = rows.map((row) => cols.map((c) => row.getValue(c.id) ?? ""));
+  const wsData = [headerRow, ...dataRows];
+  const ws = XLSX.utils.aoa_to_sheet(wsData);
+  ws["!cols"] = headerRow.map((h) => ({ wch: Math.max(String(h).length + 4, 10) }));
+  const wb = XLSX.utils.book_new();
+  XLSX.utils.book_append_sheet(wb, ws, options?.sheetName ?? "Sheet1");
+  XLSX.writeFile(wb, options?.filename ?? "export.xlsx");
+}
+function getStructylMeta(column) {
+  const meta = column.columnDef.meta;
+  return meta?._structyl ?? {};
+}
+function getDefaultColumnAlign(type) {
+  if (type === "number" || type === "currency") return "right";
+  if (type === "date" || type === "dateTime") return "right";
+  if (type === "boolean" || type === "rating") return "center";
+  return void 0;
+}
+function normalizeColumnDefs(defs, tablePropLocale) {
+  return defs.map((def) => {
+    const {
+      field,
+      fieldId,
+      headerName,
+      type,
+      align,
+      flex,
+      valueGetter,
+      valueSetter,
+      renderCell,
+      renderHeader,
+      description,
+      filterOperators: colFilterOps,
+      // Extended column type fields
+      badgeMap,
+      currencyCode,
+      currencyLocale,
+      linkHref,
+      linkTarget,
+      avatarSrc,
+      sparklineData,
+      sparklineType,
+      progressMax,
+      ratingMax,
+      editable,
+      validate,
+      displayValidate,
+      // Feature 6: formatting
+      locale: colLocale,
+      dateFormat,
+      numberFormat,
+      timezone,
+      ...rest
+    } = def;
+    const col = { ...rest };
+    const restRecord = rest;
+    if (def.columns && def.columns.length > 0) {
+      col.columns = normalizeColumnDefs(def.columns, tablePropLocale);
+      if (headerName && !restRecord.header && !renderHeader) col.header = headerName;
+      if (renderHeader && !restRecord.header) {
+        col.header = (ctx) => renderHeader({ column: ctx.column });
+      }
+      delete col.accessorKey;
+      delete col.accessorFn;
+      col.meta = { ...restRecord.meta };
+      return col;
+    }
+    if (fieldId && !restRecord.id) col.id = fieldId;
+    if (field && !restRecord.accessorKey && !restRecord.accessorFn) col.accessorKey = field;
+    if (valueGetter && !restRecord.accessorFn && !(field ?? restRecord.accessorKey)) {
+      col.accessorFn = (row) => valueGetter(row);
+    }
+    if (headerName && !restRecord.header && !renderHeader) col.header = headerName;
+    if (renderHeader && !restRecord.header) {
+      col.header = (ctx) => renderHeader({ column: ctx.column });
+    }
+    if (renderCell && !restRecord.cell) {
+      col.cell = (ctx) => renderCell({
+        row: ctx.row,
+        value: ctx.getValue(),
+        field: String(field ?? restRecord.accessorKey ?? restRecord.id ?? "")
+      });
+    }
+    if (!renderCell && !restRecord.cell && type) {
+      col.cell = buildBuiltinCellRenderer({
+        type,
+        badgeMap,
+        currencyCode,
+        currencyLocale,
+        linkHref,
+        linkTarget,
+        avatarSrc,
+        sparklineData,
+        sparklineType,
+        progressMax,
+        ratingMax,
+        field: String(field ?? restRecord.accessorKey ?? restRecord.id ?? ""),
+        locale: colLocale ?? tablePropLocale,
+        dateFormat,
+        numberFormat,
+        timezone
+      });
+    }
+    col.meta = {
+      ...restRecord.meta,
+      _structyl: {
+        type,
+        align: align ?? getDefaultColumnAlign(type),
+        flex,
+        fieldId,
+        description,
+        valueSetter,
+        filterOperators: colFilterOps,
+        badgeMap,
+        currencyCode,
+        currencyLocale,
+        // Cast TData-specific function types to unknown to satisfy StructylColumnMeta
+        linkHref,
+        linkTarget,
+        avatarSrc,
+        sparklineData,
+        sparklineType,
+        progressMax,
+        ratingMax,
+        editable,
+        validate,
+        displayValidate,
+        locale: colLocale,
+        dateFormat,
+        numberFormat,
+        timezone,
+        propLocale: tablePropLocale
+      }
+    };
+    return col;
+  });
+}
+function DataTableToolbarButton({
+  tooltip,
+  children,
+  className,
+  ...props
+}) {
+  const btn = /* @__PURE__ */ React.createElement(
+    Button,
+    {
+      type: "button",
+      variant: "outline",
+      size: "sm",
+      "aria-label": tooltip ?? (typeof children === "string" ? children : void 0),
+      className,
+      ...props
+    },
+    children
+  );
+  if (!tooltip) return btn;
+  return /* @__PURE__ */ React.createElement(Tooltip.Provider, null, /* @__PURE__ */ React.createElement(Tooltip.Root, null, /* @__PURE__ */ React.createElement(Tooltip.Trigger, { asChild: true }, btn), /* @__PURE__ */ React.createElement(Tooltip.Content, null, tooltip)));
+}
+function DataTableDensityMenu({
+  density,
+  onDensityChange,
+  localeText,
+  overlayBoundary
+}) {
+  const options = [
+    { value: "compact", label: localeText.densityCompact },
+    { value: "standard", label: localeText.densityStandard },
+    { value: "comfortable", label: localeText.densityComfortable }
+  ];
+  return /* @__PURE__ */ React.createElement(DropdownMenu.Root, null, /* @__PURE__ */ React.createElement(DropdownMenu.Trigger, { asChild: true }, /* @__PURE__ */ React.createElement(Button, { type: "button", variant: "outline", size: "sm", title: localeText.density }, /* @__PURE__ */ React.createElement(AlignJustify, { className: "mr-1.5 size-4" }), localeText.density)), /* @__PURE__ */ React.createElement(
+    DropdownMenu.Content,
+    {
+      align: "end",
+      container: overlayBoundary,
+      collisionBoundary: overlayBoundary,
+      collisionPadding: 8,
+      strategy: "absolute",
+      sticky: "always",
+      className: "bg-popover relative z-[1000] min-w-36 overflow-hidden"
+    },
+    options.map((option) => /* @__PURE__ */ React.createElement(
+      DropdownMenu.Item,
+      {
+        key: option.value,
+        className: cn("cursor-pointer", density === option.value && "font-semibold"),
+        onSelect: () => onDensityChange(option.value)
+      },
+      option.label
+    ))
+  ));
+}
+function DataTableExportMenu({ table, localeText, overlayBoundary, options }) {
+  return /* @__PURE__ */ React.createElement(Tooltip.Provider, null, /* @__PURE__ */ React.createElement(Tooltip.Root, null, /* @__PURE__ */ React.createElement(DropdownMenu.Root, null, /* @__PURE__ */ React.createElement(Tooltip.Trigger, { asChild: true }, /* @__PURE__ */ React.createElement(DropdownMenu.Trigger, { asChild: true }, /* @__PURE__ */ React.createElement(Button, { type: "button", variant: "outline", size: "sm" }, /* @__PURE__ */ React.createElement(Download, { className: "mr-1.5 size-4" }), localeText.export ?? "Export", /* @__PURE__ */ React.createElement(ChevronDown, { className: "ml-1 size-3" })))), /* @__PURE__ */ React.createElement(Tooltip.Content, null, localeText.export ?? "Export data"), /* @__PURE__ */ React.createElement(
+    DropdownMenu.Content,
+    {
+      align: "end",
+      container: overlayBoundary,
+      collisionBoundary: overlayBoundary,
+      collisionPadding: 8,
+      strategy: "absolute",
+      sticky: "always",
+      className: "bg-popover relative z-[1000] min-w-40"
+    },
+    options.csv !== false ? /* @__PURE__ */ React.createElement(DropdownMenu.Item, { className: "cursor-pointer", onSelect: () => exportToCSV(table, "export.csv") }, localeText.exportCSV ?? "Export as CSV") : null,
+    options.json !== false ? /* @__PURE__ */ React.createElement(DropdownMenu.Item, { className: "cursor-pointer", onSelect: () => exportToJSON(table, "export.json") }, localeText.exportJSON ?? "Export as JSON") : null,
+    options.selectedCsv !== false ? /* @__PURE__ */ React.createElement(DropdownMenu.Item, { className: "cursor-pointer", onSelect: () => exportToCSV(table, "selected.csv", { onlySelected: true }) }, localeText.exportSelectedCSV ?? "Export selected rows") : null,
+    options.xlsx ? /* @__PURE__ */ React.createElement(
+      DropdownMenu.Item,
+      {
+        className: "cursor-pointer flex items-center gap-2",
+        onSelect: () => exportToXLSX(table)
+      },
+      /* @__PURE__ */ React.createElement(FileSpreadsheet, { className: "size-4" }),
+      "Export as Excel"
+    ) : null
+  ))));
+}
+function hexToHsva(hex) {
+  let h = hex.replace("#", "");
+  if (h.length === 3) h = h.split("").map((c) => c + c).join("");
+  const r = parseInt(h.slice(0, 2), 16) / 255;
+  const g = parseInt(h.slice(2, 4), 16) / 255;
+  const b = parseInt(h.slice(4, 6), 16) / 255;
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  const d = max - min;
+  let hue = 0;
+  if (d !== 0) {
+    if (max === r) hue = (g - b) / d % 6;
+    else if (max === g) hue = (b - r) / d + 2;
+    else hue = (r - g) / d + 4;
+    hue *= 60;
+    if (hue < 0) hue += 360;
+  }
+  return { h: hue, s: max === 0 ? 0 : d / max, v: max, a: 1 };
+}
+var CF_OPERATORS = [
+  { value: "equals", label: "Equals" },
+  { value: "notEquals", label: "Not equals" },
+  { value: "contains", label: "Contains" },
+  { value: "gt", label: "Greater than" },
+  { value: "gte", label: "Greater than or equal" },
+  { value: "lt", label: "Less than" },
+  { value: "lte", label: "Less than or equal" },
+  { value: "empty", label: "Is empty" },
+  { value: "notEmpty", label: "Is not empty" }
+];
+function ColorSection({ label, color, onChange }) {
+  const enabled = !!color;
+  const [localHex, setLocalHex] = React.useState(color ?? "#3b82f6");
+  React.useEffect(() => {
+    if (color && color !== localHex) setLocalHex(color);
+  }, [color]);
+  const hsva = React.useMemo(() => {
+    try {
+      return hexToHsva(localHex);
+    } catch {
+      return { h: 217, s: 0.91, v: 0.96, a: 1 };
+    }
+  }, [localHex]);
+  const handleHsvaChange = (v) => {
+    const hex = hsvaToHex(v);
+    setLocalHex(hex);
+    onChange(hex);
+  };
+  const handleHexInput = (raw) => {
+    const clean = raw.replace(/[^0-9a-fA-F]/g, "").slice(0, 6);
+    setLocalHex("#" + clean);
+    if (clean.length === 6) onChange("#" + clean);
+  };
+  return /* @__PURE__ */ React.createElement("div", { className: "grid gap-2" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ React.createElement("span", { className: "text-xs font-medium" }, label), /* @__PURE__ */ React.createElement("div", { className: "flex gap-1" }, /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      type: "button",
+      onClick: () => onChange(void 0),
+      className: cn(
+        "rounded px-2 py-0.5 text-xs transition-colors",
+        !enabled ? "bg-muted text-foreground font-medium" : "text-muted-foreground hover:bg-muted"
+      )
+    },
+    "None"
+  ), /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      type: "button",
+      onClick: () => {
+        if (!enabled) onChange(localHex || "#3b82f6");
+      },
+      className: cn(
+        "rounded px-2 py-0.5 text-xs transition-colors",
+        enabled ? "bg-primary text-primary-foreground font-medium" : "text-muted-foreground hover:bg-muted"
+      )
+    },
+    "Apply"
+  ))), enabled ? /* @__PURE__ */ React.createElement("div", { className: "grid gap-2" }, /* @__PURE__ */ React.createElement(ColorPicker.Root, { value: hsva, onValueChange: handleHsvaChange, className: "w-full gap-2 p-0" }, /* @__PURE__ */ React.createElement(ColorPicker.Area, { className: "h-28 w-full" }), /* @__PURE__ */ React.createElement(ColorPicker.HueSlider, { className: "h-3 w-full rounded-full" })), /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React.createElement("span", { className: "text-muted-foreground font-mono text-xs" }, "#"), /* @__PURE__ */ React.createElement(
+    Input,
+    {
+      value: localHex.replace("#", ""),
+      onChange: (e) => handleHexInput(e.target.value),
+      className: "h-7 flex-1 font-mono text-xs",
+      maxLength: 6,
+      placeholder: "ffffff",
+      spellCheck: false
+    }
+  ), /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: "border-border h-7 w-7 flex-shrink-0 rounded border",
+      style: { background: color },
+      "aria-label": "Color preview"
+    }
+  ))) : /* @__PURE__ */ React.createElement("p", { className: "text-muted-foreground py-1 text-xs" }, "No color \u2014 click Apply to set."));
+}
+function DataTableConditionalFormattingDrawer({
+  table,
+  open,
+  onOpenChange,
+  initialColumnId,
+  rules,
+  onRulesChange
+}) {
+  const columns = table.getAllLeafColumns().filter(
+    (col) => !["__select", "__rownum", "__row_actions"].includes(col.id)
+  );
+  const defaultColumnId = initialColumnId ?? columns[0]?.id ?? "";
+  const [draft, setDraft] = React.useState(rules);
+  React.useEffect(() => {
+    if (open) setDraft(rules);
+  }, [open]);
+  const addRule = () => {
+    setDraft((prev) => [
+      ...prev,
+      {
+        id: Math.random().toString(36).slice(2),
+        columnId: defaultColumnId,
+        operator: "equals",
+        value: "",
+        backgroundColor: "#fef9c3",
+        textColor: void 0
+      }
+    ]);
+  };
+  const updateRule = (id, patch) => {
+    setDraft((prev) => prev.map((r) => r.id === id ? { ...r, ...patch } : r));
+  };
+  const removeRule = (id) => {
+    setDraft((prev) => prev.filter((r) => r.id !== id));
+  };
+  const handleSave = () => {
+    onRulesChange(draft);
+    onOpenChange(false);
+  };
+  const needsValue = (op) => !["empty", "notEmpty"].includes(op);
+  return /* @__PURE__ */ React.createElement(Drawer.Root, { open, onOpenChange }, /* @__PURE__ */ React.createElement(
+    Drawer.Content,
+    {
+      style: {
+        // Override bottom-drawer positioning to right-side full-height panel
+        top: 0,
+        right: 0,
+        bottom: 0,
+        left: "auto",
+        height: "100%",
+        width: "400px",
+        maxWidth: "95vw",
+        marginTop: 0,
+        borderRadius: 0,
+        borderTop: "none",
+        borderRight: "none",
+        borderBottom: "none",
+        // Reset vertical slide animation variable so it only slides from right
+        "--tw-enter-translate-y": "0",
+        "--tw-exit-translate-y": "0"
+      },
+      className: "flex flex-col overflow-hidden data-[state=open]:slide-in-from-right data-[state=closed]:slide-out-to-right [&>div:first-child]:hidden"
+    },
+    /* @__PURE__ */ React.createElement(Drawer.Header, { className: "border-border flex-shrink-0 border-b px-4 py-3 text-left" }, /* @__PURE__ */ React.createElement(Drawer.Title, null, "Conditional Formatting"), /* @__PURE__ */ React.createElement(Drawer.Description, null, "Highlight cells based on column values. Rules are applied top-to-bottom; the first match wins.")),
+    /* @__PURE__ */ React.createElement("div", { className: "min-h-0 flex-1 overflow-y-auto" }, /* @__PURE__ */ React.createElement("div", { className: "grid gap-3 p-4" }, draft.length === 0 ? /* @__PURE__ */ React.createElement("p", { className: "text-muted-foreground py-6 text-center text-sm" }, "No rules yet. Click \u201C+ Add rule\u201D to get started.") : null, draft.map((rule, idx) => /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        key: rule.id,
+        className: "border-border bg-muted/20 grid gap-3 rounded-lg border p-3"
+      },
+      /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ React.createElement("span", { className: "text-muted-foreground text-xs font-medium" }, "Rule ", idx + 1), /* @__PURE__ */ React.createElement(
+        Button,
+        {
+          type: "button",
+          variant: "ghost",
+          size: "sm",
+          onClick: () => removeRule(rule.id),
+          className: "text-destructive h-6 px-2 text-xs"
+        },
+        "Remove"
+      )),
+      /* @__PURE__ */ React.createElement("div", { className: "grid gap-1" }, /* @__PURE__ */ React.createElement("label", { className: "text-xs font-medium" }, "Column"), /* @__PURE__ */ React.createElement(
+        Select.Root,
+        {
+          value: rule.columnId,
+          onValueChange: (v) => updateRule(rule.id, { columnId: v })
+        },
+        /* @__PURE__ */ React.createElement(Select.Trigger, { className: "h-8 w-full" }, /* @__PURE__ */ React.createElement(Select.Value, null)),
+        /* @__PURE__ */ React.createElement(
+          Select.Content,
+          {
+            options: columns.map((col) => ({
+              value: col.id,
+              label: typeof col.columnDef.header === "string" ? col.columnDef.header : col.id
+            }))
+          }
+        )
+      )),
+      /* @__PURE__ */ React.createElement("div", { className: "grid gap-1" }, /* @__PURE__ */ React.createElement("label", { className: "text-xs font-medium" }, "Condition"), /* @__PURE__ */ React.createElement(
+        Select.Root,
+        {
+          value: rule.operator,
+          onValueChange: (v) => updateRule(rule.id, { operator: v })
+        },
+        /* @__PURE__ */ React.createElement(Select.Trigger, { className: "h-8 w-full" }, /* @__PURE__ */ React.createElement(Select.Value, null)),
+        /* @__PURE__ */ React.createElement(Select.Content, { options: CF_OPERATORS.map((o) => ({ value: o.value, label: o.label })) })
+      )),
+      needsValue(rule.operator) ? /* @__PURE__ */ React.createElement("div", { className: "grid gap-1" }, /* @__PURE__ */ React.createElement("label", { className: "text-xs font-medium" }, "Value"), /* @__PURE__ */ React.createElement(
+        Input,
+        {
+          value: rule.value ?? "",
+          onChange: (e) => updateRule(rule.id, { value: e.target.value }),
+          placeholder: "Enter value\u2026",
+          className: "h-8"
+        }
+      )) : null,
+      /* @__PURE__ */ React.createElement("div", { className: "border-border rounded-md border p-2" }, /* @__PURE__ */ React.createElement(
+        ColorSection,
+        {
+          label: "Background color",
+          color: rule.backgroundColor,
+          onChange: (c) => updateRule(rule.id, { backgroundColor: c })
+        }
+      )),
+      /* @__PURE__ */ React.createElement("div", { className: "border-border rounded-md border p-2" }, /* @__PURE__ */ React.createElement(
+        ColorSection,
+        {
+          label: "Text color",
+          color: rule.textColor,
+          onChange: (c) => updateRule(rule.id, { textColor: c })
+        }
+      )),
+      /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React.createElement("span", { className: "text-muted-foreground text-xs" }, "Preview:"), /* @__PURE__ */ React.createElement(
+        "span",
+        {
+          className: "rounded px-2 py-0.5 text-xs font-medium",
+          style: {
+            backgroundColor: rule.backgroundColor ?? "transparent",
+            color: rule.textColor ?? "inherit",
+            border: "1px solid var(--border)"
+          }
+        },
+        "Cell value"
+      ))
+    )))),
+    /* @__PURE__ */ React.createElement("div", { className: "border-border flex-shrink-0 border-t p-4" }, /* @__PURE__ */ React.createElement(Button, { type: "button", variant: "outline", size: "sm", onClick: addRule, className: "mb-3 w-full" }, "+ Add rule"), /* @__PURE__ */ React.createElement("div", { className: "flex gap-2" }, /* @__PURE__ */ React.createElement(
+      Button,
+      {
+        type: "button",
+        variant: "outline",
+        size: "sm",
+        onClick: () => onOpenChange(false),
+        className: "flex-1"
+      },
+      "Cancel"
+    ), /* @__PURE__ */ React.createElement(
+      Button,
+      {
+        type: "button",
+        variant: "default",
+        size: "sm",
+        onClick: handleSave,
+        className: "flex-1"
+      },
+      "Save"
+    )))
+  ));
+}
+var filterOperators = [
+  "contains",
+  "equals",
+  "startsWith",
+  "endsWith",
+  "gt",
+  "gte",
+  "lt",
+  "lte",
+  "empty",
+  "notEmpty"
+];
+function createFilterRule(columnId) {
+  return {
+    id: `filter-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`,
+    columnId,
+    operator: "contains",
+    value: ""
+  };
+}
+function createFilterGroup(id = `group-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`) {
+  return {
+    id,
+    logic: "and",
+    items: []
+  };
+}
+function isFilterRule(item) {
+  return "columnId" in item;
+}
+function evaluateFilterGroup(group, row, getValue) {
+  const results = group.items.map(
+    (item) => isFilterRule(item) ? evaluateFilterRule(item, getValue(row, item.columnId)) : evaluateFilterGroup(item, row, getValue)
+  );
+  return group.logic === "or" ? results.some(Boolean) : results.every(Boolean);
+}
+function evaluateFilterRule(rule, value) {
+  const actual = String(value ?? "").toLowerCase();
+  const expected = String(rule.value ?? "").toLowerCase();
+  const actualNumber = Number(value);
+  const expectedNumber = Number(rule.value);
+  if (rule.operator === "contains") return actual.includes(expected);
+  if (rule.operator === "equals") return actual === expected;
+  if (rule.operator === "startsWith") return actual.startsWith(expected);
+  if (rule.operator === "endsWith") return actual.endsWith(expected);
+  if (rule.operator === "empty") return value == null || actual === "";
+  if (rule.operator === "notEmpty") return value != null && actual !== "";
+  if (!Number.isFinite(actualNumber) || !Number.isFinite(expectedNumber)) return false;
+  if (rule.operator === "gt") return actualNumber > expectedNumber;
+  if (rule.operator === "gte") return actualNumber >= expectedNumber;
+  if (rule.operator === "lt") return actualNumber < expectedNumber;
+  return actualNumber <= expectedNumber;
+}
+function getValueByPath(row, columnId) {
+  let current = row;
+  for (const part of columnId.split(".")) {
+    if (typeof current !== "object" || current === null) return void 0;
+    current = current[part];
+  }
+  return current;
+}
+function normalizeSearch(value) {
+  return String(value ?? "").trim().toLowerCase();
+}
+function splitPinnedRows(rows, rowPinning) {
+  const topIds = new Set(rowPinning.top ?? []);
+  const bottomIds = new Set(rowPinning.bottom ?? []);
+  const top = [];
+  const center = [];
+  const bottom = [];
+  for (const row of rows) {
+    if (topIds.has(row.id)) top.push(row);
+    else if (bottomIds.has(row.id)) bottom.push(row);
+    else center.push(row);
+  }
+  return { top, center, bottom };
+}
+function reorderRows(rows, fromId, toId) {
+  const ids = reorderIds(
+    rows.map((row) => row.id),
+    fromId,
+    toId
+  );
+  const byId = new Map(rows.map((row) => [row.id, row]));
+  return ids.map((id) => byId.get(id)).filter(isDefined);
+}
+function reorderIds(ids, fromId, toId) {
+  if (fromId === toId) return ids;
+  const fromIndex = ids.indexOf(fromId);
+  const toIndex = ids.indexOf(toId);
+  if (fromIndex < 0 || toIndex < 0) return ids;
+  const next = [...ids];
+  const [item] = next.splice(fromIndex, 1);
+  if (!item) return ids;
+  next.splice(toIndex, 0, item);
+  return next;
+}
+function toggleId(ids, id) {
+  return ids.includes(id) ? ids.filter((item) => item !== id) : [...ids, id];
+}
+function aggregateColumn(aggregation, values, rows) {
+  if (typeof aggregation === "function") {
+    return aggregation(values, rows);
+  }
+  if (aggregation === "count") return values.length;
+  const numbers = values.map(toNumber).filter((value) => Number.isFinite(value));
+  if (!numbers.length) return 0;
+  if (aggregation === "sum") return numbers.reduce((sum, value) => sum + value, 0);
+  if (aggregation === "avg") return numbers.reduce((sum, value) => sum + value, 0) / numbers.length;
+  if (aggregation === "min") return Math.min(...numbers);
+  return Math.max(...numbers);
+}
+function toNumber(value) {
+  if (typeof value === "number") return value;
+  const parsed = Number(value);
+  return Number.isFinite(parsed) ? parsed : 0;
+}
+function escapeCsv(value) {
+  const stringValue = value == null ? "" : String(value);
+  return /[",\n]/.test(stringValue) ? `"${stringValue.replace(/"/g, '""')}"` : stringValue;
+}
+function isDefined(value) {
+  return value !== void 0;
+}
+function computePivotAgg(values, aggregation) {
+  if (aggregation === "count") return values.length;
+  const nums = values.map(Number).filter(Number.isFinite);
+  if (!nums.length) return 0;
+  if (aggregation === "sum") return nums.reduce((a, b) => a + b, 0);
+  if (aggregation === "avg") return nums.reduce((a, b) => a + b, 0) / nums.length;
+  if (aggregation === "min") return Math.min(...nums);
+  return Math.max(...nums);
+}
+function DataTablePivotView({
+  data,
+  pivotConfig,
+  columns,
+  className,
+  onClearPivot
+}) {
+  const { rowGroupField, pivotField, valueField, aggregation } = pivotConfig;
+  const { pivotValues, rowGroupValues, cellMap } = React.useMemo(() => {
+    const pivotSet = /* @__PURE__ */ new Set();
+    const rowGroupSet = /* @__PURE__ */ new Set();
+    const cellMap2 = /* @__PURE__ */ new Map();
+    for (const row of data) {
+      const rec = row;
+      const rv = String(rec[rowGroupField] ?? "");
+      const pv = String(rec[pivotField] ?? "");
+      const val = rec[valueField];
+      rowGroupSet.add(rv);
+      pivotSet.add(pv);
+      if (!cellMap2.has(rv)) cellMap2.set(rv, /* @__PURE__ */ new Map());
+      const inner = cellMap2.get(rv);
+      if (!inner.has(pv)) inner.set(pv, []);
+      inner.get(pv).push(val);
+    }
+    const pivotValues2 = Array.from(pivotSet).sort();
+    const rowGroupValues2 = Array.from(rowGroupSet).sort();
+    return { pivotValues: pivotValues2, rowGroupValues: rowGroupValues2, cellMap: cellMap2 };
+  }, [data, rowGroupField, pivotField, valueField]);
+  const getColLabel = (fieldId) => {
+    const col = columns.find((c) => c.field === fieldId || c.fieldId === fieldId || c.id === fieldId);
+    return col?.headerName ?? fieldId;
+  };
+  return /* @__PURE__ */ React.createElement("div", { className: cn("flex flex-col gap-2", className) }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React.createElement("span", { className: "bg-primary/10 text-primary border-primary/30 inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-xs font-medium" }, /* @__PURE__ */ React.createElement(GitBranch, { className: "size-3" }), "Pivot mode active: ", getColLabel(rowGroupField), " \xD7 ", getColLabel(pivotField), " (", aggregation, ")"), onClearPivot ? /* @__PURE__ */ React.createElement(Button, { type: "button", variant: "ghost", size: "sm", className: "h-6 px-2 text-xs", onClick: onClearPivot }, "Clear pivot") : null), /* @__PURE__ */ React.createElement("div", { className: "border-border overflow-auto rounded-md border" }, /* @__PURE__ */ React.createElement("table", { className: "w-full caption-bottom text-sm", role: "grid" }, /* @__PURE__ */ React.createElement("thead", { className: "bg-bg sticky top-0 z-20" }, /* @__PURE__ */ React.createElement("tr", { role: "row" }, /* @__PURE__ */ React.createElement("th", { className: "text-muted-foreground border-border border-b px-3 py-2 text-left font-medium" }, getColLabel(rowGroupField)), pivotValues.map((pv) => /* @__PURE__ */ React.createElement("th", { key: pv, className: "text-muted-foreground border-border border-b px-3 py-2 text-right font-medium whitespace-nowrap" }, pv)))), /* @__PURE__ */ React.createElement("tbody", null, rowGroupValues.map((rgv) => /* @__PURE__ */ React.createElement("tr", { key: rgv, className: "border-border hover:bg-muted/50 border-b" }, /* @__PURE__ */ React.createElement("td", { className: "px-3 py-2 font-medium" }, rgv), pivotValues.map((pv) => {
+    const vals = cellMap.get(rgv)?.get(pv) ?? [];
+    const agg = computePivotAgg(vals, aggregation);
+    return /* @__PURE__ */ React.createElement("td", { key: pv, className: "px-3 py-2 text-right tabular-nums" }, agg);
+  })))))));
+}
+function DataTablePivotConfigPanel({
+  open,
+  onOpenChange,
+  columns,
+  currentConfig,
+  onApply,
+  onClear
+}) {
+  const colOptions = columns.filter((c) => c.field ?? c.fieldId ?? c.id).map((c) => ({ value: String(c.field ?? c.fieldId ?? c.id ?? ""), label: c.headerName ?? String(c.field ?? c.id ?? "") }));
+  const firstColId = colOptions[0]?.value ?? "";
+  const [rowGroupField, setRowGroupField] = React.useState(currentConfig?.rowGroupField ?? firstColId);
+  const [pivotField, setPivotField] = React.useState(currentConfig?.pivotField ?? firstColId);
+  const [valueField, setValueField] = React.useState(currentConfig?.valueField ?? firstColId);
+  const [aggregation, setAggregation] = React.useState(currentConfig?.aggregation ?? "sum");
+  React.useEffect(() => {
+    if (open && currentConfig) {
+      setRowGroupField(currentConfig.rowGroupField);
+      setPivotField(currentConfig.pivotField);
+      setValueField(currentConfig.valueField);
+      setAggregation(currentConfig.aggregation);
+    }
+  }, [open, currentConfig]);
+  const aggOptions = [
+    { value: "count", label: "Count" },
+    { value: "sum", label: "Sum" },
+    { value: "avg", label: "Average" },
+    { value: "min", label: "Minimum" },
+    { value: "max", label: "Maximum" }
+  ];
+  return /* @__PURE__ */ React.createElement(Drawer.Root, { open, onOpenChange }, /* @__PURE__ */ React.createElement(
+    Drawer.Content,
+    {
+      style: {
+        top: 0,
+        right: 0,
+        bottom: 0,
+        left: "auto",
+        height: "100%",
+        width: "380px",
+        maxWidth: "95vw",
+        marginTop: 0,
+        borderRadius: 0,
+        borderTop: "none",
+        borderRight: "none",
+        borderBottom: "none",
+        "--tw-enter-translate-y": "0",
+        "--tw-exit-translate-y": "0"
+      },
+      className: "flex flex-col overflow-hidden data-[state=open]:slide-in-from-right data-[state=closed]:slide-out-to-right [&>div:first-child]:hidden"
+    },
+    /* @__PURE__ */ React.createElement(Drawer.Header, { className: "border-border flex-shrink-0 border-b px-4 py-3 text-left" }, /* @__PURE__ */ React.createElement(Drawer.Title, null, "Pivot Mode"), /* @__PURE__ */ React.createElement(Drawer.Description, null, "Configure pivot table settings.")),
+    /* @__PURE__ */ React.createElement("div", { className: "min-h-0 flex-1 overflow-y-auto p-4" }, /* @__PURE__ */ React.createElement("div", { className: "grid gap-4" }, /* @__PURE__ */ React.createElement("div", { className: "grid gap-1" }, /* @__PURE__ */ React.createElement("label", { className: "text-xs font-medium" }, "Group rows by"), /* @__PURE__ */ React.createElement(Select.Root, { value: rowGroupField, onValueChange: setRowGroupField }, /* @__PURE__ */ React.createElement(Select.Trigger, { className: "h-8 w-full" }, /* @__PURE__ */ React.createElement(Select.Value, null)), /* @__PURE__ */ React.createElement(Select.Content, { options: colOptions }))), /* @__PURE__ */ React.createElement("div", { className: "grid gap-1" }, /* @__PURE__ */ React.createElement("label", { className: "text-xs font-medium" }, "Pivot columns by"), /* @__PURE__ */ React.createElement(Select.Root, { value: pivotField, onValueChange: setPivotField }, /* @__PURE__ */ React.createElement(Select.Trigger, { className: "h-8 w-full" }, /* @__PURE__ */ React.createElement(Select.Value, null)), /* @__PURE__ */ React.createElement(Select.Content, { options: colOptions }))), /* @__PURE__ */ React.createElement("div", { className: "grid gap-1" }, /* @__PURE__ */ React.createElement("label", { className: "text-xs font-medium" }, "Value field"), /* @__PURE__ */ React.createElement(Select.Root, { value: valueField, onValueChange: setValueField }, /* @__PURE__ */ React.createElement(Select.Trigger, { className: "h-8 w-full" }, /* @__PURE__ */ React.createElement(Select.Value, null)), /* @__PURE__ */ React.createElement(Select.Content, { options: colOptions }))), /* @__PURE__ */ React.createElement("div", { className: "grid gap-1" }, /* @__PURE__ */ React.createElement("label", { className: "text-xs font-medium" }, "Aggregation"), /* @__PURE__ */ React.createElement(Select.Root, { value: aggregation, onValueChange: (v) => setAggregation(v) }, /* @__PURE__ */ React.createElement(Select.Trigger, { className: "h-8 w-full" }, /* @__PURE__ */ React.createElement(Select.Value, null)), /* @__PURE__ */ React.createElement(Select.Content, { options: aggOptions }))))),
+    /* @__PURE__ */ React.createElement("div", { className: "border-border flex-shrink-0 border-t p-4 grid gap-2" }, /* @__PURE__ */ React.createElement(
+      Button,
+      {
+        type: "button",
+        variant: "default",
+        size: "sm",
+        className: "w-full",
+        onClick: () => {
+          onApply({ rowGroupField, pivotField, valueField, aggregation });
+          onOpenChange(false);
+        }
+      },
+      "Apply"
+    ), /* @__PURE__ */ React.createElement(
+      Button,
+      {
+        type: "button",
+        variant: "outline",
+        size: "sm",
+        className: "w-full",
+        onClick: () => {
+          onClear();
+          onOpenChange(false);
+        }
+      },
+      "Clear pivot"
+    ))
+  ));
+}
+function DataTableSavedViewsDrawer({
+  open,
+  onOpenChange,
+  views,
+  onViewsChange,
+  table,
+  density,
+  setDensity,
+  conditionalFormattingRules,
+  handleConditionalRulesChange
+}) {
+  const [newViewName, setNewViewName] = React.useState("");
+  const captureCurrentState = () => ({
+    sorting: table.getState().sorting,
+    columnFilters: table.getState().columnFilters,
+    globalFilter: table.getState().globalFilter,
+    columnVisibility: table.getState().columnVisibility,
+    columnOrder: table.getState().columnOrder,
+    columnSizing: table.getState().columnSizing,
+    columnPinning: table.getState().columnPinning,
+    density,
+    grouping: table.getState().grouping,
+    conditionalFormattingRules
+  });
+  const loadView = (view) => {
+    table.setSorting(view.state.sorting ?? []);
+    table.setColumnFilters(view.state.columnFilters ?? []);
+    table.setGlobalFilter(view.state.globalFilter ?? "");
+    table.setColumnVisibility(view.state.columnVisibility ?? {});
+    table.setColumnOrder(view.state.columnOrder ?? []);
+    table.setColumnSizing(view.state.columnSizing ?? {});
+    table.setColumnPinning(view.state.columnPinning ?? {});
+    if (view.state.density) setDensity(view.state.density);
+    if (view.state.grouping) table.setGrouping(view.state.grouping);
+    if (view.state.conditionalFormattingRules) handleConditionalRulesChange(view.state.conditionalFormattingRules);
+  };
+  const saveNewView = () => {
+    const name = newViewName.trim();
+    if (!name) return;
+    const newView = {
+      id: `view-${Date.now()}-${Math.random().toString(36).slice(2)}`,
+      name,
+      createdAt: (/* @__PURE__ */ new Date()).toISOString(),
+      state: captureCurrentState()
+    };
+    onViewsChange([...views, newView]);
+    setNewViewName("");
+  };
+  const updateView = (id) => {
+    onViewsChange(views.map((v) => v.id === id ? { ...v, state: captureCurrentState() } : v));
+  };
+  const deleteView = (id) => {
+    onViewsChange(views.filter((v) => v.id !== id));
+  };
+  return /* @__PURE__ */ React.createElement(Drawer.Root, { open, onOpenChange }, /* @__PURE__ */ React.createElement(
+    Drawer.Content,
+    {
+      style: {
+        top: 0,
+        right: 0,
+        bottom: 0,
+        left: "auto",
+        height: "100%",
+        width: "380px",
+        maxWidth: "95vw",
+        marginTop: 0,
+        borderRadius: 0,
+        borderTop: "none",
+        borderRight: "none",
+        borderBottom: "none",
+        "--tw-enter-translate-y": "0",
+        "--tw-exit-translate-y": "0"
+      },
+      className: "flex flex-col overflow-hidden data-[state=open]:slide-in-from-right data-[state=closed]:slide-out-to-right [&>div:first-child]:hidden"
+    },
+    /* @__PURE__ */ React.createElement(Drawer.Header, { className: "border-border flex-shrink-0 border-b px-4 py-3 text-left" }, /* @__PURE__ */ React.createElement(Drawer.Title, null, "Saved Views"), /* @__PURE__ */ React.createElement(Drawer.Description, null, "Save and restore table display states.")),
+    /* @__PURE__ */ React.createElement("div", { className: "min-h-0 flex-1 overflow-y-auto p-4" }, /* @__PURE__ */ React.createElement("div", { className: "border-border mb-4 rounded-lg border p-3" }, /* @__PURE__ */ React.createElement("p", { className: "mb-2 text-xs font-semibold" }, "Save current view"), /* @__PURE__ */ React.createElement("div", { className: "flex gap-2" }, /* @__PURE__ */ React.createElement(
+      Input,
+      {
+        value: newViewName,
+        onChange: (e) => setNewViewName(e.target.value),
+        placeholder: "View name\u2026",
+        className: "flex-1 h-8 text-xs",
+        onKeyDown: (e) => {
+          if (e.key === "Enter") saveNewView();
+        }
+      }
+    ), /* @__PURE__ */ React.createElement(Button, { type: "button", variant: "default", size: "sm", className: "h-8 px-3 text-xs", onClick: saveNewView }, "Save"))), views.length === 0 ? /* @__PURE__ */ React.createElement("p", { className: "text-muted-foreground py-6 text-center text-sm" }, "No saved views yet.") : /* @__PURE__ */ React.createElement("div", { className: "grid gap-2" }, views.map((view) => /* @__PURE__ */ React.createElement("div", { key: view.id, className: "border-border bg-muted/20 rounded-lg border p-3" }, /* @__PURE__ */ React.createElement("div", { className: "mb-2 flex items-start justify-between gap-2" }, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("p", { className: "text-sm font-semibold" }, view.name), /* @__PURE__ */ React.createElement("p", { className: "text-muted-foreground text-[10px]" }, new Date(view.createdAt).toLocaleDateString())), /* @__PURE__ */ React.createElement(
+      Button,
+      {
+        type: "button",
+        variant: "ghost",
+        size: "icon-sm",
+        className: "text-destructive h-6 w-6 shrink-0",
+        "aria-label": `Delete view ${view.name}`,
+        onClick: () => deleteView(view.id)
+      },
+      /* @__PURE__ */ React.createElement(Trash2, { className: "size-3.5" })
+    )), /* @__PURE__ */ React.createElement("div", { className: "flex gap-2" }, /* @__PURE__ */ React.createElement(
+      Button,
+      {
+        type: "button",
+        variant: "outline",
+        size: "sm",
+        className: "flex-1 h-7 text-xs",
+        onClick: () => loadView(view)
+      },
+      "Load"
+    ), /* @__PURE__ */ React.createElement(
+      Button,
+      {
+        type: "button",
+        variant: "outline",
+        size: "sm",
+        className: "flex-1 h-7 text-xs",
+        onClick: () => updateView(view.id)
+      },
+      "Update"
+    )))))),
+    /* @__PURE__ */ React.createElement("div", { className: "border-border flex-shrink-0 border-t p-4" }, /* @__PURE__ */ React.createElement(Button, { type: "button", variant: "outline", size: "sm", className: "w-full", onClick: () => onOpenChange(false) }, "Close"))
+  ));
+}
+function computeHeaderStat(rows, columnId, statType) {
+  const values = rows.map((r) => r.getValue(columnId));
+  switch (statType) {
+    case "count":
+      return String(values.length);
+    case "nullCount":
+      return String(values.filter((v) => v == null || v === "").length);
+    case "unique":
+      return String(new Set(values.map((v) => String(v ?? ""))).size);
+    default: {
+      const nums = values.map(Number).filter(Number.isFinite);
+      if (!nums.length) return "\u2014";
+      if (statType === "sum") return new Intl.NumberFormat().format(nums.reduce((a, b) => a + b, 0));
+      if (statType === "avg") return new Intl.NumberFormat().format(nums.reduce((a, b) => a + b, 0) / nums.length);
+      if (statType === "min") return new Intl.NumberFormat().format(Math.min(...nums));
+      return new Intl.NumberFormat().format(Math.max(...nums));
+    }
+  }
+}
+function getDefaultStatType(columnId, table) {
+  const col = table.getColumn(columnId);
+  if (!col) return "count";
+  const structylMeta = getStructylMeta(col);
+  if (structylMeta.type === "number" || structylMeta.type === "currency") return "sum";
+  return "count";
+}
+function DataTableHeaderStatsRow({
+  table,
+  renderedColumnIds,
+  columnPaddingLeft,
+  columnPaddingRight,
+  headerStatsConfig
+}) {
+  const rows = table.getFilteredRowModel().rows;
+  const visibleLeafCols = table.getVisibleLeafColumns().filter((c) => renderedColumnIds.has(c.id));
+  const statsMap = React.useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const col of visibleLeafCols) {
+      const statType = headerStatsConfig?.[col.id] ?? getDefaultStatType(col.id, table);
+      const value = computeHeaderStat(rows, col.id, statType);
+      map.set(col.id, { label: statType, value });
+    }
+    return map;
+  }, [rows, visibleLeafCols, headerStatsConfig]);
+  return /* @__PURE__ */ React.createElement("tr", { className: "bg-muted/40 border-border border-b text-xs text-muted-foreground" }, columnPaddingLeft > 0 ? /* @__PURE__ */ React.createElement("td", { style: { width: columnPaddingLeft } }) : null, visibleLeafCols.map((col) => {
+    const stat = statsMap.get(col.id);
+    const structylMeta = getStructylMeta(col);
+    const align = structylMeta.align ?? "left";
+    return /* @__PURE__ */ React.createElement(
+      "td",
+      {
+        key: col.id,
+        className: cn(
+          "px-3 py-1",
+          align === "center" && "text-center",
+          align === "right" && "text-right"
+        )
+      },
+      stat ? /* @__PURE__ */ React.createElement("div", { className: "flex flex-col" }, /* @__PURE__ */ React.createElement("span", { className: "text-[9px] font-medium uppercase tracking-wide opacity-60" }, stat.label), /* @__PURE__ */ React.createElement("span", { className: "tabular-nums" }, stat.value)) : null
+    );
+  }), columnPaddingRight > 0 ? /* @__PURE__ */ React.createElement("td", { style: { width: columnPaddingRight } }) : null);
+}
+
+export { DataTable, DataTableAdvancedFilter, DataTableColumnConfiguration, DataTableColumnFilter, DataTableColumnVisibility, DataTablePagination, DataTableToolbar, DataTableToolbarButton, EditableCell, exportToCSV, exportToJSON, exportToXLSX };
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map