@smallwebco/tinypivot-react 1.0.0

package/dist/index.cjs

@@ -0,0 +1,2773 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  ColumnFilter: () => ColumnFilter,
+  DataGrid: () => DataGrid,
+  PivotConfig: () => PivotConfig,
+  PivotSkeleton: () => PivotSkeleton,
+  configureLicenseSecret: () => configureLicenseSecret,
+  copyToClipboard: () => copyToClipboard,
+  enableDemoMode: () => enableDemoMode,
+  exportPivotToCSV: () => exportPivotToCSV,
+  exportToCSV: () => exportToCSV,
+  formatCellValue: () => import_tinypivot_core.formatCellValue,
+  formatSelectionForClipboard: () => formatSelectionForClipboard,
+  getAggregationLabel: () => import_tinypivot_core3.getAggregationLabel,
+  getColumnUniqueValues: () => import_tinypivot_core.getColumnUniqueValues,
+  setLicenseKey: () => setLicenseKey,
+  useColumnResize: () => useColumnResize,
+  useExcelGrid: () => useExcelGrid,
+  useGlobalSearch: () => useGlobalSearch,
+  useLicense: () => useLicense,
+  usePagination: () => usePagination,
+  usePivotTable: () => usePivotTable,
+  useRowSelection: () => useRowSelection
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/components/DataGrid.tsx
+var import_react8 = require("react");
+var import_react_dom = require("react-dom");
+
+// src/hooks/useExcelGrid.ts
+var import_react = require("react");
+var import_react_table = require("@tanstack/react-table");
+var import_tinypivot_core = require("@smallwebco/tinypivot-core");
+var multiSelectFilter = (row, columnId, filterValue) => {
+  if (!filterValue || !Array.isArray(filterValue) || filterValue.length === 0) {
+    return true;
+  }
+  const cellValue = row.getValue(columnId);
+  const cellString = cellValue === null || cellValue === void 0 || cellValue === "" ? "(blank)" : String(cellValue);
+  return filterValue.includes(cellString);
+};
+function useExcelGrid(options) {
+  const { data, enableSorting = true, enableFiltering = true } = options;
+  const [sorting, setSorting] = (0, import_react.useState)([]);
+  const [columnFilters, setColumnFilters] = (0, import_react.useState)([]);
+  const [columnVisibility, setColumnVisibility] = (0, import_react.useState)({});
+  const [globalFilter, setGlobalFilter] = (0, import_react.useState)("");
+  const [columnStatsCache, setColumnStatsCache] = (0, import_react.useState)({});
+  const columnKeys = (0, import_react.useMemo)(() => {
+    if (data.length === 0) return [];
+    return Object.keys(data[0]);
+  }, [data]);
+  const getColumnStats = (0, import_react.useCallback)(
+    (columnKey) => {
+      const cacheKey = `${columnKey}-${data.length}`;
+      if (!columnStatsCache[cacheKey]) {
+        const stats = (0, import_tinypivot_core.getColumnUniqueValues)(data, columnKey);
+        setColumnStatsCache((prev) => ({ ...prev, [cacheKey]: stats }));
+        return stats;
+      }
+      return columnStatsCache[cacheKey];
+    },
+    [data, columnStatsCache]
+  );
+  const clearStatsCache = (0, import_react.useCallback)(() => {
+    setColumnStatsCache({});
+  }, []);
+  const columnDefs = (0, import_react.useMemo)(() => {
+    return columnKeys.map((key) => {
+      const stats = getColumnStats(key);
+      return {
+        id: key,
+        accessorKey: key,
+        header: key,
+        cell: (info) => (0, import_tinypivot_core.formatCellValue)(info.getValue(), stats.type),
+        filterFn: multiSelectFilter,
+        meta: {
+          type: stats.type,
+          uniqueCount: stats.uniqueValues.length
+        }
+      };
+    });
+  }, [columnKeys, getColumnStats]);
+  const table = (0, import_react_table.useReactTable)({
+    data,
+    columns: columnDefs,
+    state: {
+      sorting,
+      columnFilters,
+      columnVisibility,
+      globalFilter
+    },
+    onSortingChange: setSorting,
+    onColumnFiltersChange: setColumnFilters,
+    onColumnVisibilityChange: setColumnVisibility,
+    onGlobalFilterChange: setGlobalFilter,
+    getCoreRowModel: (0, import_react_table.getCoreRowModel)(),
+    getSortedRowModel: enableSorting ? (0, import_react_table.getSortedRowModel)() : void 0,
+    getFilteredRowModel: enableFiltering ? (0, import_react_table.getFilteredRowModel)() : void 0,
+    filterFns: {
+      multiSelect: multiSelectFilter
+    },
+    enableSorting,
+    enableFilters: enableFiltering
+  });
+  const filteredRowCount = table.getFilteredRowModel().rows.length;
+  const totalRowCount = data.length;
+  const activeFilters = (0, import_react.useMemo)(() => {
+    return columnFilters.map((f) => ({
+      column: f.id,
+      values: f.value
+    }));
+  }, [columnFilters]);
+  const hasActiveFilter = (0, import_react.useCallback)(
+    (columnId) => {
+      const column = table.getColumn(columnId);
+      if (!column) return false;
+      const filterValue = column.getFilterValue();
+      return filterValue !== void 0 && Array.isArray(filterValue) && filterValue.length > 0;
+    },
+    [table]
+  );
+  const setColumnFilter = (0, import_react.useCallback)(
+    (columnId, values) => {
+      const column = table.getColumn(columnId);
+      if (column) {
+        column.setFilterValue(values.length === 0 ? void 0 : values);
+      }
+    },
+    [table]
+  );
+  const clearAllFilters = (0, import_react.useCallback)(() => {
+    table.resetColumnFilters();
+    setGlobalFilter("");
+  }, [table]);
+  const getColumnFilterValues = (0, import_react.useCallback)(
+    (columnId) => {
+      const column = table.getColumn(columnId);
+      if (!column) return [];
+      const filterValue = column.getFilterValue();
+      return Array.isArray(filterValue) ? filterValue : [];
+    },
+    [table]
+  );
+  const toggleSort = (0, import_react.useCallback)((columnId) => {
+    setSorting((prev) => {
+      const current = prev.find((s) => s.id === columnId);
+      if (!current) {
+        return [{ id: columnId, desc: false }];
+      } else if (!current.desc) {
+        return [{ id: columnId, desc: true }];
+      } else {
+        return [];
+      }
+    });
+  }, []);
+  const getSortDirection = (0, import_react.useCallback)(
+    (columnId) => {
+      const sort = sorting.find((s) => s.id === columnId);
+      if (!sort) return null;
+      return sort.desc ? "desc" : "asc";
+    },
+    [sorting]
+  );
+  return {
+    // Table instance
+    table,
+    // State
+    sorting,
+    columnFilters,
+    columnVisibility,
+    globalFilter,
+    columnKeys,
+    setSorting,
+    setColumnFilters,
+    setGlobalFilter,
+    // Computed
+    filteredRowCount,
+    totalRowCount,
+    activeFilters,
+    // Methods
+    getColumnStats,
+    clearStatsCache,
+    hasActiveFilter,
+    setColumnFilter,
+    getColumnFilterValues,
+    clearAllFilters,
+    toggleSort,
+    getSortDirection
+  };
+}
+
+// src/hooks/usePivotTable.ts
+var import_react3 = require("react");
+var import_tinypivot_core3 = require("@smallwebco/tinypivot-core");
+
+// src/hooks/useLicense.ts
+var import_react2 = require("react");
+var import_tinypivot_core2 = require("@smallwebco/tinypivot-core");
+var globalLicenseInfo = (0, import_tinypivot_core2.getFreeLicenseInfo)();
+var globalDemoMode = false;
+var listeners = /* @__PURE__ */ new Set();
+function notifyListeners() {
+  listeners.forEach((listener) => listener());
+}
+async function setLicenseKey(key) {
+  globalLicenseInfo = await (0, import_tinypivot_core2.validateLicenseKey)(key);
+  if (!globalLicenseInfo.isValid) {
+    console.warn("[TinyPivot] Invalid or expired license key. Running in free mode.");
+  } else if (globalLicenseInfo.type !== "free") {
+    console.info(`[TinyPivot] Pro license activated (${globalLicenseInfo.type})`);
+  }
+  notifyListeners();
+}
+function enableDemoMode() {
+  globalDemoMode = true;
+  globalLicenseInfo = (0, import_tinypivot_core2.getDemoLicenseInfo)();
+  console.info("[TinyPivot] Demo mode enabled - all Pro features unlocked for evaluation");
+  notifyListeners();
+}
+function configureLicenseSecret(secret) {
+  (0, import_tinypivot_core2.configureLicenseSecret)(secret);
+}
+function useLicense() {
+  const [, forceUpdate] = (0, import_react2.useState)({});
+  (0, import_react2.useState)(() => {
+    const update = () => forceUpdate({});
+    listeners.add(update);
+    return () => listeners.delete(update);
+  });
+  const isDemo = globalDemoMode;
+  const licenseInfo = globalLicenseInfo;
+  const isPro = (0, import_react2.useMemo)(
+    () => globalDemoMode || (0, import_tinypivot_core2.isPro)(licenseInfo),
+    [licenseInfo]
+  );
+  const canUsePivot = (0, import_react2.useMemo)(
+    () => globalDemoMode || (0, import_tinypivot_core2.canUsePivot)(licenseInfo),
+    [licenseInfo]
+  );
+  const canUseAdvancedAggregations = (0, import_react2.useMemo)(
+    () => globalDemoMode || licenseInfo.features.advancedAggregations,
+    [licenseInfo]
+  );
+  const canUsePercentageMode = (0, import_react2.useMemo)(
+    () => globalDemoMode || licenseInfo.features.percentageMode,
+    [licenseInfo]
+  );
+  const showWatermark = (0, import_react2.useMemo)(
+    () => (0, import_tinypivot_core2.shouldShowWatermark)(licenseInfo, globalDemoMode),
+    [licenseInfo]
+  );
+  const requirePro = (0, import_react2.useCallback)((feature) => {
+    if (!isPro) {
+      (0, import_tinypivot_core2.logProRequired)(feature);
+      return false;
+    }
+    return true;
+  }, [isPro]);
+  return {
+    licenseInfo,
+    isDemo,
+    isPro,
+    canUsePivot,
+    canUseAdvancedAggregations,
+    canUsePercentageMode,
+    showWatermark,
+    requirePro
+  };
+}
+
+// src/hooks/usePivotTable.ts
+function usePivotTable(data) {
+  const { canUsePivot, requirePro } = useLicense();
+  const [rowFields, setRowFieldsState] = (0, import_react3.useState)([]);
+  const [columnFields, setColumnFieldsState] = (0, import_react3.useState)([]);
+  const [valueFields, setValueFields] = (0, import_react3.useState)([]);
+  const [showRowTotals, setShowRowTotals] = (0, import_react3.useState)(true);
+  const [showColumnTotals, setShowColumnTotals] = (0, import_react3.useState)(true);
+  const [currentStorageKey, setCurrentStorageKey] = (0, import_react3.useState)(null);
+  const availableFields = (0, import_react3.useMemo)(() => {
+    return (0, import_tinypivot_core3.computeAvailableFields)(data);
+  }, [data]);
+  const unassignedFields = (0, import_react3.useMemo)(() => {
+    return (0, import_tinypivot_core3.getUnassignedFields)(availableFields, rowFields, columnFields, valueFields);
+  }, [availableFields, rowFields, columnFields, valueFields]);
+  const isConfigured = (0, import_react3.useMemo)(() => {
+    return (0, import_tinypivot_core3.isPivotConfigured)({
+      rowFields,
+      columnFields,
+      valueFields,
+      showRowTotals,
+      showColumnTotals
+    });
+  }, [rowFields, columnFields, valueFields, showRowTotals, showColumnTotals]);
+  const pivotResult = (0, import_react3.useMemo)(() => {
+    if (!isConfigured) return null;
+    if (!canUsePivot) return null;
+    return (0, import_tinypivot_core3.computePivotResult)(data, {
+      rowFields,
+      columnFields,
+      valueFields,
+      showRowTotals,
+      showColumnTotals
+    });
+  }, [data, isConfigured, canUsePivot, rowFields, columnFields, valueFields, showRowTotals, showColumnTotals]);
+  (0, import_react3.useEffect)(() => {
+    if (data.length === 0) return;
+    const newKeys = Object.keys(data[0]);
+    const storageKey = (0, import_tinypivot_core3.generateStorageKey)(newKeys);
+    if (storageKey !== currentStorageKey) {
+      setCurrentStorageKey(storageKey);
+      const savedConfig = (0, import_tinypivot_core3.loadPivotConfig)(storageKey);
+      if (savedConfig && (0, import_tinypivot_core3.isConfigValidForFields)(savedConfig, newKeys)) {
+        setRowFieldsState(savedConfig.rowFields);
+        setColumnFieldsState(savedConfig.columnFields);
+        setValueFields(savedConfig.valueFields);
+        setShowRowTotals(savedConfig.showRowTotals);
+        setShowColumnTotals(savedConfig.showColumnTotals);
+      } else {
+        const currentConfig = {
+          rowFields,
+          columnFields,
+          valueFields,
+          showRowTotals,
+          showColumnTotals
+        };
+        if (!(0, import_tinypivot_core3.isConfigValidForFields)(currentConfig, newKeys)) {
+          setRowFieldsState([]);
+          setColumnFieldsState([]);
+          setValueFields([]);
+        }
+      }
+    }
+  }, [data]);
+  (0, import_react3.useEffect)(() => {
+    if (!currentStorageKey) return;
+    const config = {
+      rowFields,
+      columnFields,
+      valueFields,
+      showRowTotals,
+      showColumnTotals
+    };
+    (0, import_tinypivot_core3.savePivotConfig)(currentStorageKey, config);
+  }, [currentStorageKey, rowFields, columnFields, valueFields, showRowTotals, showColumnTotals]);
+  const addRowField = (0, import_react3.useCallback)(
+    (field) => {
+      if (!requirePro("Pivot Table - Row Fields")) return;
+      if (!rowFields.includes(field)) {
+        setRowFieldsState((prev) => [...prev, field]);
+      }
+    },
+    [rowFields, requirePro]
+  );
+  const removeRowField = (0, import_react3.useCallback)((field) => {
+    setRowFieldsState((prev) => prev.filter((f) => f !== field));
+  }, []);
+  const setRowFields = (0, import_react3.useCallback)((fields) => {
+    setRowFieldsState(fields);
+  }, []);
+  const addColumnField = (0, import_react3.useCallback)(
+    (field) => {
+      if (!requirePro("Pivot Table - Column Fields")) return;
+      if (!columnFields.includes(field)) {
+        setColumnFieldsState((prev) => [...prev, field]);
+      }
+    },
+    [columnFields, requirePro]
+  );
+  const removeColumnField = (0, import_react3.useCallback)((field) => {
+    setColumnFieldsState((prev) => prev.filter((f) => f !== field));
+  }, []);
+  const setColumnFields = (0, import_react3.useCallback)((fields) => {
+    setColumnFieldsState(fields);
+  }, []);
+  const addValueField = (0, import_react3.useCallback)(
+    (field, aggregation = "sum") => {
+      if (!requirePro("Pivot Table - Value Fields")) return;
+      setValueFields((prev) => {
+        if (prev.some((v) => v.field === field && v.aggregation === aggregation)) {
+          return prev;
+        }
+        return [...prev, { field, aggregation }];
+      });
+    },
+    [requirePro]
+  );
+  const removeValueField = (0, import_react3.useCallback)((field, aggregation) => {
+    setValueFields((prev) => {
+      if (aggregation) {
+        return prev.filter((v) => !(v.field === field && v.aggregation === aggregation));
+      }
+      return prev.filter((v) => v.field !== field);
+    });
+  }, []);
+  const updateValueFieldAggregation = (0, import_react3.useCallback)(
+    (field, oldAgg, newAgg) => {
+      setValueFields(
+        (prev) => prev.map((v) => {
+          if (v.field === field && v.aggregation === oldAgg) {
+            return { ...v, aggregation: newAgg };
+          }
+          return v;
+        })
+      );
+    },
+    []
+  );
+  const clearConfig = (0, import_react3.useCallback)(() => {
+    setRowFieldsState([]);
+    setColumnFieldsState([]);
+    setValueFields([]);
+  }, []);
+  const autoSuggestConfig = (0, import_react3.useCallback)(() => {
+    if (!requirePro("Pivot Table - Auto Suggest")) return;
+    if (availableFields.length === 0) return;
+    const categoricalFields = availableFields.filter((f) => !f.isNumeric && f.uniqueCount < 50);
+    const numericFields = availableFields.filter((f) => f.isNumeric);
+    if (categoricalFields.length > 0 && numericFields.length > 0) {
+      setRowFieldsState([categoricalFields[0].field]);
+      setValueFields([{ field: numericFields[0].field, aggregation: "sum" }]);
+    }
+  }, [availableFields, requirePro]);
+  return {
+    // State
+    rowFields,
+    columnFields,
+    valueFields,
+    showRowTotals,
+    showColumnTotals,
+    // Computed
+    availableFields,
+    unassignedFields,
+    isConfigured,
+    pivotResult,
+    // Actions
+    addRowField,
+    removeRowField,
+    addColumnField,
+    removeColumnField,
+    addValueField,
+    removeValueField,
+    updateValueFieldAggregation,
+    clearConfig,
+    setShowRowTotals,
+    setShowColumnTotals,
+    autoSuggestConfig,
+    setRowFields,
+    setColumnFields
+  };
+}
+
+// src/hooks/useGridFeatures.ts
+var import_react4 = require("react");
+var import_tinypivot_core4 = require("@smallwebco/tinypivot-core");
+function exportToCSV(data, columns, options) {
+  (0, import_tinypivot_core4.exportToCSV)(data, columns, options);
+}
+function exportPivotToCSV(pivotData, rowFields, columnFields, valueFields, options) {
+  (0, import_tinypivot_core4.exportPivotToCSV)(pivotData, rowFields, columnFields, valueFields, options);
+}
+function copyToClipboard(text, onSuccess, onError) {
+  (0, import_tinypivot_core4.copyToClipboard)(text, onSuccess, onError);
+}
+function formatSelectionForClipboard(rows, columns, selectionBounds) {
+  return (0, import_tinypivot_core4.formatSelectionForClipboard)(rows, columns, selectionBounds);
+}
+function usePagination(data, options = {}) {
+  const [pageSize, setPageSize] = (0, import_react4.useState)(options.pageSize ?? 50);
+  const [currentPage, setCurrentPage] = (0, import_react4.useState)(options.currentPage ?? 1);
+  const totalPages = (0, import_react4.useMemo)(
+    () => Math.max(1, Math.ceil(data.length / pageSize)),
+    [data.length, pageSize]
+  );
+  const paginatedData = (0, import_react4.useMemo)(() => {
+    const start = (currentPage - 1) * pageSize;
+    const end = start + pageSize;
+    return data.slice(start, end);
+  }, [data, currentPage, pageSize]);
+  const startIndex = (0, import_react4.useMemo)(() => (currentPage - 1) * pageSize + 1, [currentPage, pageSize]);
+  const endIndex = (0, import_react4.useMemo)(
+    () => Math.min(currentPage * pageSize, data.length),
+    [currentPage, pageSize, data.length]
+  );
+  const goToPage = (0, import_react4.useCallback)(
+    (page) => {
+      setCurrentPage(Math.max(1, Math.min(page, totalPages)));
+    },
+    [totalPages]
+  );
+  const nextPage = (0, import_react4.useCallback)(() => {
+    if (currentPage < totalPages) {
+      setCurrentPage((prev) => prev + 1);
+    }
+  }, [currentPage, totalPages]);
+  const prevPage = (0, import_react4.useCallback)(() => {
+    if (currentPage > 1) {
+      setCurrentPage((prev) => prev - 1);
+    }
+  }, [currentPage]);
+  const firstPage = (0, import_react4.useCallback)(() => {
+    setCurrentPage(1);
+  }, []);
+  const lastPage = (0, import_react4.useCallback)(() => {
+    setCurrentPage(totalPages);
+  }, [totalPages]);
+  const updatePageSize = (0, import_react4.useCallback)((size) => {
+    setPageSize(size);
+    setCurrentPage(1);
+  }, []);
+  return {
+    pageSize,
+    currentPage,
+    totalPages,
+    paginatedData,
+    startIndex,
+    endIndex,
+    goToPage,
+    nextPage,
+    prevPage,
+    firstPage,
+    lastPage,
+    setPageSize: updatePageSize
+  };
+}
+function useGlobalSearch(data, columns) {
+  const [searchTerm, setSearchTerm] = (0, import_react4.useState)("");
+  const [caseSensitive, setCaseSensitive] = (0, import_react4.useState)(false);
+  const filteredData = (0, import_react4.useMemo)(() => {
+    if (!searchTerm.trim()) {
+      return data;
+    }
+    const term = caseSensitive ? searchTerm.trim() : searchTerm.trim().toLowerCase();
+    return data.filter((row) => {
+      for (const col of columns) {
+        const value = row[col];
+        if (value === null || value === void 0) continue;
+        const strValue = caseSensitive ? String(value) : String(value).toLowerCase();
+        if (strValue.includes(term)) {
+          return true;
+        }
+      }
+      return false;
+    });
+  }, [data, columns, searchTerm, caseSensitive]);
+  const clearSearch = (0, import_react4.useCallback)(() => {
+    setSearchTerm("");
+  }, []);
+  return {
+    searchTerm,
+    setSearchTerm,
+    caseSensitive,
+    setCaseSensitive,
+    filteredData,
+    clearSearch
+  };
+}
+function useRowSelection(data) {
+  const [selectedRowIndices, setSelectedRowIndices] = (0, import_react4.useState)(/* @__PURE__ */ new Set());
+  const selectedRows = (0, import_react4.useMemo)(() => {
+    return Array.from(selectedRowIndices).sort((a, b) => a - b).map((idx) => data[idx]).filter(Boolean);
+  }, [data, selectedRowIndices]);
+  const allSelected = (0, import_react4.useMemo)(() => {
+    return data.length > 0 && selectedRowIndices.size === data.length;
+  }, [data.length, selectedRowIndices.size]);
+  const someSelected = (0, import_react4.useMemo)(() => {
+    return selectedRowIndices.size > 0 && selectedRowIndices.size < data.length;
+  }, [data.length, selectedRowIndices.size]);
+  const toggleRow = (0, import_react4.useCallback)((index) => {
+    setSelectedRowIndices((prev) => {
+      const next = new Set(prev);
+      if (next.has(index)) {
+        next.delete(index);
+      } else {
+        next.add(index);
+      }
+      return next;
+    });
+  }, []);
+  const selectRow = (0, import_react4.useCallback)((index) => {
+    setSelectedRowIndices((prev) => /* @__PURE__ */ new Set([...prev, index]));
+  }, []);
+  const deselectRow = (0, import_react4.useCallback)((index) => {
+    setSelectedRowIndices((prev) => {
+      const next = new Set(prev);
+      next.delete(index);
+      return next;
+    });
+  }, []);
+  const selectAll = (0, import_react4.useCallback)(() => {
+    setSelectedRowIndices(new Set(data.map((_, idx) => idx)));
+  }, [data]);
+  const deselectAll = (0, import_react4.useCallback)(() => {
+    setSelectedRowIndices(/* @__PURE__ */ new Set());
+  }, []);
+  const toggleAll = (0, import_react4.useCallback)(() => {
+    if (allSelected) {
+      deselectAll();
+    } else {
+      selectAll();
+    }
+  }, [allSelected, selectAll, deselectAll]);
+  const isSelected = (0, import_react4.useCallback)(
+    (index) => {
+      return selectedRowIndices.has(index);
+    },
+    [selectedRowIndices]
+  );
+  const selectRange = (0, import_react4.useCallback)((startIndex, endIndex) => {
+    const min = Math.min(startIndex, endIndex);
+    const max = Math.max(startIndex, endIndex);
+    setSelectedRowIndices((prev) => {
+      const next = new Set(prev);
+      for (let i = min; i <= max; i++) {
+        next.add(i);
+      }
+      return next;
+    });
+  }, []);
+  return {
+    selectedRowIndices,
+    selectedRows,
+    allSelected,
+    someSelected,
+    toggleRow,
+    selectRow,
+    deselectRow,
+    selectAll,
+    deselectAll,
+    toggleAll,
+    isSelected,
+    selectRange
+  };
+}
+function useColumnResize(initialWidths, minWidth = 60, maxWidth = 600) {
+  const [columnWidths, setColumnWidths] = (0, import_react4.useState)({ ...initialWidths });
+  const [isResizing, setIsResizing] = (0, import_react4.useState)(false);
+  const [resizingColumn, setResizingColumn] = (0, import_react4.useState)(null);
+  const startResize = (0, import_react4.useCallback)(
+    (columnId, event) => {
+      setIsResizing(true);
+      setResizingColumn(columnId);
+      const startX = event.clientX;
+      const startWidth = columnWidths[columnId] || 150;
+      const handleMouseMove = (e) => {
+        const diff = e.clientX - startX;
+        const newWidth = Math.max(minWidth, Math.min(maxWidth, startWidth + diff));
+        setColumnWidths((prev) => ({
+          ...prev,
+          [columnId]: newWidth
+        }));
+      };
+      const handleMouseUp = () => {
+        setIsResizing(false);
+        setResizingColumn(null);
+        document.removeEventListener("mousemove", handleMouseMove);
+        document.removeEventListener("mouseup", handleMouseUp);
+      };
+      document.addEventListener("mousemove", handleMouseMove);
+      document.addEventListener("mouseup", handleMouseUp);
+    },
+    [columnWidths, minWidth, maxWidth]
+  );
+  const resetColumnWidth = (0, import_react4.useCallback)(
+    (columnId) => {
+      if (initialWidths[columnId]) {
+        setColumnWidths((prev) => ({
+          ...prev,
+          [columnId]: initialWidths[columnId]
+        }));
+      }
+    },
+    [initialWidths]
+  );
+  const resetAllWidths = (0, import_react4.useCallback)(() => {
+    setColumnWidths({ ...initialWidths });
+  }, [initialWidths]);
+  return {
+    columnWidths,
+    setColumnWidths,
+    isResizing,
+    resizingColumn,
+    startResize,
+    resetColumnWidth,
+    resetAllWidths
+  };
+}
+
+// src/components/ColumnFilter.tsx
+var import_react5 = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+function ColumnFilter({
+  columnName,
+  stats,
+  selectedValues,
+  sortDirection,
+  onFilter,
+  onSort,
+  onClose
+}) {
+  const [searchQuery, setSearchQuery] = (0, import_react5.useState)("");
+  const [localSelected, setLocalSelected] = (0, import_react5.useState)(new Set(selectedValues));
+  const dropdownRef = (0, import_react5.useRef)(null);
+  const searchInputRef = (0, import_react5.useRef)(null);
+  const hasBlankValues = stats.nullCount > 0;
+  const filteredValues = (0, import_react5.useMemo)(() => {
+    const values = stats.uniqueValues;
+    if (!searchQuery) return values;
+    const query = searchQuery.toLowerCase();
+    return values.filter((v) => v.toLowerCase().includes(query));
+  }, [stats.uniqueValues, searchQuery]);
+  const allValues = (0, import_react5.useMemo)(() => {
+    const values = [...filteredValues];
+    if (hasBlankValues && (!searchQuery || "(blank)".includes(searchQuery.toLowerCase()))) {
+      values.unshift("(blank)");
+    }
+    return values;
+  }, [filteredValues, hasBlankValues, searchQuery]);
+  const isAllSelected = (0, import_react5.useMemo)(
+    () => allValues.every((v) => localSelected.has(v)),
+    [allValues, localSelected]
+  );
+  const toggleValue = (0, import_react5.useCallback)((value) => {
+    setLocalSelected((prev) => {
+      const next = new Set(prev);
+      if (next.has(value)) {
+        next.delete(value);
+      } else {
+        next.add(value);
+      }
+      return next;
+    });
+  }, []);
+  const selectAll = (0, import_react5.useCallback)(() => {
+    setLocalSelected((prev) => {
+      const next = new Set(prev);
+      for (const value of allValues) {
+        next.add(value);
+      }
+      return next;
+    });
+  }, [allValues]);
+  const clearAll = (0, import_react5.useCallback)(() => {
+    setLocalSelected(/* @__PURE__ */ new Set());
+  }, []);
+  const applyFilter = (0, import_react5.useCallback)(() => {
+    if (localSelected.size === 0) {
+      onFilter([]);
+    } else {
+      onFilter(Array.from(localSelected));
+    }
+    onClose();
+  }, [localSelected, onFilter, onClose]);
+  const sortAscending = (0, import_react5.useCallback)(() => {
+    onSort(sortDirection === "asc" ? null : "asc");
+  }, [sortDirection, onSort]);
+  const sortDescending = (0, import_react5.useCallback)(() => {
+    onSort(sortDirection === "desc" ? null : "desc");
+  }, [sortDirection, onSort]);
+  const clearFilter = (0, import_react5.useCallback)(() => {
+    setLocalSelected(/* @__PURE__ */ new Set());
+    onFilter([]);
+    onClose();
+  }, [onFilter, onClose]);
+  (0, import_react5.useEffect)(() => {
+    const handleClickOutside = (event) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+        onClose();
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [onClose]);
+  (0, import_react5.useEffect)(() => {
+    const handleKeydown = (event) => {
+      if (event.key === "Escape") {
+        onClose();
+      } else if (event.key === "Enter" && event.ctrlKey) {
+        applyFilter();
+      }
+    };
+    document.addEventListener("keydown", handleKeydown);
+    return () => document.removeEventListener("keydown", handleKeydown);
+  }, [onClose, applyFilter]);
+  (0, import_react5.useEffect)(() => {
+    searchInputRef.current?.focus();
+  }, []);
+  (0, import_react5.useEffect)(() => {
+    setLocalSelected(new Set(selectedValues));
+  }, [selectedValues]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { ref: dropdownRef, className: "vpg-filter-dropdown", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "vpg-filter-header", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "vpg-filter-title", children: columnName }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "vpg-filter-count", children: [
+        stats.uniqueValues.length.toLocaleString(),
+        " unique"
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "vpg-sort-controls", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        "button",
+        {
+          className: `vpg-sort-btn ${sortDirection === "asc" ? "active" : ""}`,
+          title: "Sort A to Z",
+          onClick: sortAscending,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { className: "vpg-icon-sm", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "path",
+              {
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeWidth: 2,
+                d: "M3 4h13M3 8h9m-9 4h6m4 0l4-4m0 0l4 4m-4-4v12"
+              }
+            ) }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "A\u2192Z" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        "button",
+        {
+          className: `vpg-sort-btn ${sortDirection === "desc" ? "active" : ""}`,
+          title: "Sort Z to A",
+          onClick: sortDescending,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { className: "vpg-icon-sm", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "path",
+              {
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeWidth: 2,
+                d: "M3 4h13M3 8h9m-9 4h9m5-4v12m0 0l-4-4m4 4l4-4"
+              }
+            ) }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "Z\u2192A" })
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "vpg-divider" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "vpg-search-container", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { className: "vpg-search-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "path",
+        {
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          strokeWidth: 2,
+          d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "input",
+        {
+          ref: searchInputRef,
+          type: "text",
+          value: searchQuery,
+          onChange: (e) => setSearchQuery(e.target.value),
+          placeholder: "Search values...",
+          className: "vpg-search-input"
+        }
+      ),
+      searchQuery && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { className: "vpg-clear-search", onClick: () => setSearchQuery(""), children: "\xD7" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "vpg-bulk-actions", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", { className: "vpg-bulk-btn", onClick: selectAll, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { className: "vpg-icon-sm", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "path",
+          {
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            strokeWidth: 2,
+            d: "M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
+          }
+        ) }),
+        "Select All"
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", { className: "vpg-bulk-btn", onClick: clearAll, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { className: "vpg-icon-sm", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "path",
+          {
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            strokeWidth: 2,
+            d: "M6 18L18 6M6 6l12 12"
+          }
+        ) }),
+        "Clear All"
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "vpg-values-list", children: [
+      allValues.map((value) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        "label",
+        {
+          className: `vpg-value-item ${localSelected.has(value) ? "selected" : ""}`,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "input",
+              {
+                type: "checkbox",
+                checked: localSelected.has(value),
+                onChange: () => toggleValue(value),
+                className: "vpg-value-checkbox"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: `vpg-value-text ${value === "(blank)" ? "vpg-blank" : ""}`, children: value })
+          ]
+        },
+        value
+      )),
+      allValues.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "vpg-no-results", children: "No matching values" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "vpg-filter-footer", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { className: "vpg-btn-clear", onClick: clearFilter, children: "Clear Filter" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { className: "vpg-btn-apply", onClick: applyFilter, children: "Apply" })
+    ] })
+  ] });
+}
+
+// src/components/PivotConfig.tsx
+var import_react6 = require("react");
+var import_tinypivot_core5 = require("@smallwebco/tinypivot-core");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function getFieldIcon(type) {
+  switch (type) {
+    case "number":
+      return "#";
+    case "date":
+      return "\u{1F4C5}";
+    case "boolean":
+      return "\u2713";
+    default:
+      return "Aa";
+  }
+}
+function PivotConfig({
+  availableFields,
+  rowFields,
+  columnFields,
+  valueFields,
+  showRowTotals,
+  onShowRowTotalsChange,
+  onClearConfig,
+  onAutoSuggest,
+  onDragStart,
+  onDragEnd,
+  onUpdateAggregation,
+  onRemoveRowField,
+  onRemoveColumnField,
+  onRemoveValueField,
+  onAddRowField,
+  onAddColumnField
+}) {
+  const { showWatermark } = useLicense();
+  const [fieldSearch, setFieldSearch] = (0, import_react6.useState)("");
+  const assignedFields = (0, import_react6.useMemo)(() => {
+    const rowSet = new Set(rowFields);
+    const colSet = new Set(columnFields);
+    const valueMap = new Map(valueFields.map((v) => [v.field, v]));
+    return availableFields.filter((f) => rowSet.has(f.field) || colSet.has(f.field) || valueMap.has(f.field)).map((f) => ({
+      ...f,
+      assignedTo: rowSet.has(f.field) ? "row" : colSet.has(f.field) ? "column" : "value",
+      valueConfig: valueMap.get(f.field)
+    }));
+  }, [availableFields, rowFields, columnFields, valueFields]);
+  const unassignedFields = (0, import_react6.useMemo)(() => {
+    const rowSet = new Set(rowFields);
+    const colSet = new Set(columnFields);
+    const valSet = new Set(valueFields.map((v) => v.field));
+    return availableFields.filter(
+      (f) => !rowSet.has(f.field) && !colSet.has(f.field) && !valSet.has(f.field)
+    );
+  }, [availableFields, rowFields, columnFields, valueFields]);
+  const filteredUnassignedFields = (0, import_react6.useMemo)(() => {
+    if (!fieldSearch.trim()) return unassignedFields;
+    const search = fieldSearch.toLowerCase().trim();
+    return unassignedFields.filter((f) => f.field.toLowerCase().includes(search));
+  }, [unassignedFields, fieldSearch]);
+  const assignedCount = assignedFields.length;
+  const handleDragStart = (0, import_react6.useCallback)(
+    (field, event) => {
+      event.dataTransfer?.setData("text/plain", field);
+      event.dataTransfer.effectAllowed = "move";
+      onDragStart(field, event);
+    },
+    [onDragStart]
+  );
+  const handleAggregationChange = (0, import_react6.useCallback)(
+    (field, currentAgg, newAgg) => {
+      onUpdateAggregation(field, currentAgg, newAgg);
+    },
+    [onUpdateAggregation]
+  );
+  const toggleRowColumn = (0, import_react6.useCallback)(
+    (field, currentAssignment) => {
+      if (currentAssignment === "row") {
+        onRemoveRowField(field);
+        onAddColumnField(field);
+      } else {
+        onRemoveColumnField(field);
+        onAddRowField(field);
+      }
+    },
+    [onRemoveRowField, onAddColumnField, onRemoveColumnField, onAddRowField]
+  );
+  const removeField = (0, import_react6.useCallback)(
+    (field, assignedTo, valueConfig) => {
+      if (assignedTo === "row") {
+        onRemoveRowField(field);
+      } else if (assignedTo === "column") {
+        onRemoveColumnField(field);
+      } else if (valueConfig) {
+        onRemoveValueField(field, valueConfig.aggregation);
+      }
+    },
+    [onRemoveRowField, onRemoveColumnField, onRemoveValueField]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "vpg-pivot-config", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "vpg-config-header", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("h3", { className: "vpg-config-title", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { className: "vpg-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "path",
+          {
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            strokeWidth: 2,
+            d: "M4 6h16M4 10h16M4 14h16M4 18h16"
+          }
+        ) }),
+        "Fields"
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "vpg-header-actions", children: assignedCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "button",
+        {
+          className: "vpg-action-btn vpg-clear-btn",
+          title: "Clear all",
+          onClick: onClearConfig,
+          children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { className: "vpg-icon-sm", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            "path",
+            {
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              strokeWidth: 2,
+              d: "M6 18L18 6M6 6l12 12"
+            }
+          ) })
+        }
+      ) })
+    ] }),
+    assignedCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "vpg-assigned-section", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "vpg-section-label", children: "Active" }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "vpg-assigned-list", children: assignedFields.map((field) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+        "div",
+        {
+          className: `vpg-assigned-item vpg-type-${field.assignedTo}`,
+          title: field.field,
+          draggable: true,
+          onDragStart: (e) => handleDragStart(field.field, e),
+          onDragEnd,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "vpg-item-main", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: `vpg-item-badge ${field.assignedTo}`, children: field.assignedTo === "row" ? "R" : field.assignedTo === "column" ? "C" : (0, import_tinypivot_core5.getAggregationSymbol)(field.valueConfig?.aggregation || "sum") }),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "vpg-item-name", children: field.field })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "vpg-item-actions", children: [
+              (field.assignedTo === "row" || field.assignedTo === "column") && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                "button",
+                {
+                  className: "vpg-toggle-btn",
+                  title: field.assignedTo === "row" ? "Move to Columns" : "Move to Rows",
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    toggleRowColumn(field.field, field.assignedTo);
+                  },
+                  children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                    "svg",
+                    {
+                      className: "vpg-icon-xs",
+                      fill: "none",
+                      stroke: "currentColor",
+                      viewBox: "0 0 24 24",
+                      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                        "path",
+                        {
+                          strokeLinecap: "round",
+                          strokeLinejoin: "round",
+                          strokeWidth: 2,
+                          d: "M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4"
+                        }
+                      )
+                    }
+                  )
+                }
+              ),
+              field.assignedTo === "value" && field.valueConfig && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                "select",
+                {
+                  className: "vpg-agg-select",
+                  value: field.valueConfig.aggregation,
+                  onChange: (e) => {
+                    e.stopPropagation();
+                    handleAggregationChange(
+                      field.field,
+                      field.valueConfig.aggregation,
+                      e.target.value
+                    );
+                  },
+                  onClick: (e) => e.stopPropagation(),
+                  children: import_tinypivot_core5.AGGREGATION_OPTIONS.map((agg) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("option", { value: agg.value, children: [
+                    agg.symbol,
+                    " ",
+                    agg.label
+                  ] }, agg.value))
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                "button",
+                {
+                  className: "vpg-remove-btn",
+                  title: "Remove",
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    removeField(field.field, field.assignedTo, field.valueConfig);
+                  },
+                  children: "\xD7"
+                }
+              )
+            ] })
+          ]
+        },
+        field.field
+      )) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "vpg-unassigned-section", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "vpg-section-header", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "vpg-section-label", children: [
+        "Available ",
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "vpg-count", children: unassignedFields.length })
+      ] }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "vpg-field-search", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { className: "vpg-search-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "path",
+          {
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            strokeWidth: 2,
+            d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "input",
+          {
+            type: "text",
+            value: fieldSearch,
+            onChange: (e) => setFieldSearch(e.target.value),
+            placeholder: "Search fields...",
+            className: "vpg-search-input"
+          }
+        ),
+        fieldSearch && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { className: "vpg-clear-search", onClick: () => setFieldSearch(""), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { className: "vpg-icon-xs", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "path",
+          {
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            strokeWidth: 2,
+            d: "M6 18L18 6M6 6l12 12"
+          }
+        ) }) })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "vpg-field-list", children: [
+        filteredUnassignedFields.map((field) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+          "div",
+          {
+            className: `vpg-field-item ${field.isNumeric ? "vpg-is-numeric" : ""}`,
+            title: field.field,
+            draggable: true,
+            onDragStart: (e) => handleDragStart(field.field, e),
+            onDragEnd,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "vpg-field-type-icon", title: field.type, children: getFieldIcon(field.type) }),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "vpg-field-name", children: field.field }),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "vpg-unique-count", children: field.uniqueCount })
+            ]
+          },
+          field.field
+        )),
+        filteredUnassignedFields.length === 0 && fieldSearch && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "vpg-empty-hint", children: [
+          'No fields match "',
+          fieldSearch,
+          '"'
+        ] }),
+        unassignedFields.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "vpg-empty-hint", children: "All fields assigned" })
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "vpg-options-section", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("label", { className: "vpg-option-toggle", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "input",
+          {
+            type: "checkbox",
+            checked: showRowTotals,
+            onChange: (e) => onShowRowTotalsChange(e.target.checked)
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "Totals" })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("button", { className: "vpg-auto-btn", onClick: onAutoSuggest, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { className: "vpg-icon-sm", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "path",
+          {
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            strokeWidth: 2,
+            d: "M13 10V3L4 14h7v7l9-11h-7z"
+          }
+        ) }),
+        "Auto"
+      ] })
+    ] }),
+    showWatermark && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "vpg-watermark", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("a", { href: "https://tiny-pivot.com", target: "_blank", rel: "noopener noreferrer", children: "TinyPivot" }) })
+  ] });
+}
+
+// src/components/PivotSkeleton.tsx
+var import_react7 = require("react");
+var import_tinypivot_core6 = require("@smallwebco/tinypivot-core");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function PivotSkeleton({
+  rowFields,
+  columnFields,
+  valueFields,
+  isConfigured,
+  draggingField,
+  pivotResult,
+  fontSize = "xs",
+  activeFilters,
+  totalRowCount,
+  filteredRowCount,
+  onAddRowField,
+  onRemoveRowField,
+  onAddColumnField,
+  onRemoveColumnField,
+  onAddValueField,
+  onRemoveValueField
+}) {
+  const { showWatermark, canUsePivot, isDemo } = useLicense();
+  const [dragOverArea, setDragOverArea] = (0, import_react7.useState)(null);
+  const [sortDirection, setSortDirection] = (0, import_react7.useState)("asc");
+  const [sortTarget, setSortTarget] = (0, import_react7.useState)("row");
+  const toggleSort = (0, import_react7.useCallback)((target = "row") => {
+    if (sortTarget === target) {
+      setSortDirection((prev) => prev === "asc" ? "desc" : "asc");
+    } else {
+      setSortTarget(target);
+      setSortDirection("asc");
+    }
+  }, [sortTarget]);
+  const sortedRowIndices = (0, import_react7.useMemo)(() => {
+    if (!pivotResult) return [];
+    const indices = pivotResult.rowHeaders.map((_, i) => i);
+    const headers = pivotResult.rowHeaders;
+    const data = pivotResult.data;
+    indices.sort((a, b) => {
+      let cmp;
+      if (sortTarget === "row") {
+        const aHeader = headers[a]?.join(" / ") || "";
+        const bHeader = headers[b]?.join(" / ") || "";
+        cmp = aHeader.localeCompare(bHeader, void 0, { numeric: true, sensitivity: "base" });
+      } else {
+        const colIdx = sortTarget;
+        const aVal = data[a]?.[colIdx]?.value ?? null;
+        const bVal = data[b]?.[colIdx]?.value ?? null;
+        if (aVal === null && bVal === null) cmp = 0;
+        else if (aVal === null) cmp = 1;
+        else if (bVal === null) cmp = -1;
+        else cmp = aVal - bVal;
+      }
+      return sortDirection === "asc" ? cmp : -cmp;
+    });
+    return indices;
+  }, [pivotResult, sortTarget, sortDirection]);
+  const columnHeaderCells = (0, import_react7.useMemo)(() => {
+    if (!pivotResult || pivotResult.headers.length === 0) {
+      return [
+        valueFields.map((vf) => ({
+          label: `${vf.field} (${(0, import_tinypivot_core6.getAggregationLabel)(vf.aggregation)})`,
+          colspan: 1
+        }))
+      ];
+    }
+    const result = [];
+    for (let level = 0; level < pivotResult.headers.length; level++) {
+      const headerRow = pivotResult.headers[level];
+      const cells = [];
+      let i = 0;
+      while (i < headerRow.length) {
+        const value = headerRow[i];
+        let colspan = 1;
+        while (i + colspan < headerRow.length && headerRow[i + colspan] === value) {
+          colspan++;
+        }
+        cells.push({ label: value, colspan });
+        i += colspan;
+      }
+      result.push(cells);
+    }
+    return result;
+  }, [pivotResult, valueFields]);
+  const hasActiveFilters = activeFilters && activeFilters.length > 0;
+  const filterSummary = (0, import_react7.useMemo)(() => {
+    if (!activeFilters || activeFilters.length === 0) return "";
+    return activeFilters.map((f) => f.column).join(", ");
+  }, [activeFilters]);
+  const handleDragOver = (0, import_react7.useCallback)(
+    (area, event) => {
+      event.preventDefault();
+      event.dataTransfer.dropEffect = "move";
+      setDragOverArea(area);
+    },
+    []
+  );
+  const handleDragLeave = (0, import_react7.useCallback)(() => {
+    setDragOverArea(null);
+  }, []);
+  const handleDrop = (0, import_react7.useCallback)(
+    (area, event) => {
+      event.preventDefault();
+      const field = event.dataTransfer?.getData("text/plain");
+      if (!field || field.startsWith("reorder:")) {
+        setDragOverArea(null);
+        return;
+      }
+      if (rowFields.includes(field)) onRemoveRowField(field);
+      if (columnFields.includes(field)) onRemoveColumnField(field);
+      const existingValue = valueFields.find((v) => v.field === field);
+      if (existingValue) onRemoveValueField(field, existingValue.aggregation);
+      switch (area) {
+        case "row":
+          onAddRowField(field);
+          break;
+        case "column":
+          onAddColumnField(field);
+          break;
+        case "value":
+          onAddValueField(field, "sum");
+          break;
+      }
+      setDragOverArea(null);
+    },
+    [rowFields, columnFields, valueFields, onAddRowField, onRemoveRowField, onAddColumnField, onRemoveColumnField, onAddValueField, onRemoveValueField]
+  );
+  const currentFontSize = fontSize;
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    "div",
+    {
+      className: `vpg-pivot-skeleton vpg-font-${currentFontSize} ${draggingField ? "vpg-is-dragging" : ""}`,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "vpg-skeleton-header", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "vpg-skeleton-title", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { className: "vpg-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              "path",
+              {
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeWidth: 2,
+                d: "M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z"
+              }
+            ) }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: "Pivot Table" })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "vpg-header-right", children: [
+            hasActiveFilters && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "vpg-filter-indicator", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                "svg",
+                {
+                  className: "vpg-filter-icon",
+                  fill: "none",
+                  stroke: "currentColor",
+                  viewBox: "0 0 24 24",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                    "path",
+                    {
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      strokeWidth: 2,
+                      d: "M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: "vpg-filter-text", children: [
+                "Filtered: ",
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("strong", { children: filterSummary }),
+                filteredRowCount !== void 0 && totalRowCount !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: "vpg-filter-count", children: [
+                  "(",
+                  filteredRowCount.toLocaleString(),
+                  " of ",
+                  totalRowCount.toLocaleString(),
+                  " rows)"
+                ] })
+              ] })
+            ] }),
+            isConfigured && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "vpg-config-summary", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: "vpg-summary-badge vpg-rows", children: [
+                rowFields.length,
+                " row",
+                rowFields.length !== 1 ? "s" : ""
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: "vpg-summary-badge vpg-cols", children: [
+                columnFields.length,
+                " col",
+                columnFields.length !== 1 ? "s" : ""
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: "vpg-summary-badge vpg-vals", children: [
+                valueFields.length,
+                " val",
+                valueFields.length !== 1 ? "s" : ""
+              ] })
+            ] })
+          ] })
+        ] }),
+        !canUsePivot ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "vpg-pro-required", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "vpg-pro-content", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { className: "vpg-pro-icon", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "path",
+            {
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              strokeWidth: 2,
+              d: "M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
+            }
+          ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h3", { children: "Pro Feature" }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { children: "Pivot Table functionality requires a Pro license." }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("a", { href: "https://tiny-pivot.com/#pricing", target: "_blank", rel: "noopener noreferrer", className: "vpg-pro-link", children: "Get Pro License \u2192" })
+        ] }) }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "vpg-config-bar", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+              "div",
+              {
+                className: `vpg-drop-zone vpg-row-zone ${dragOverArea === "row" ? "vpg-drag-over" : ""}`,
+                onDragOver: (e) => handleDragOver("row", e),
+                onDragLeave: handleDragLeave,
+                onDrop: (e) => handleDrop("row", e),
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "vpg-zone-header", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "vpg-zone-icon vpg-row-icon", children: "\u2193" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "vpg-zone-label", children: "Rows" })
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "vpg-zone-chips", children: [
+                    rowFields.map((field) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "vpg-mini-chip vpg-row-chip", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "vpg-mini-name", children: field }),
+                      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                        "button",
+                        {
+                          className: "vpg-mini-remove",
+                          onClick: () => onRemoveRowField(field),
+                          children: "\xD7"
+                        }
+                      )
+                    ] }, field)),
+                    rowFields.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "vpg-zone-hint", children: "Drop here" })
+                  ] })
+                ]
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+              "div",
+              {
+                className: `vpg-drop-zone vpg-column-zone ${dragOverArea === "column" ? "vpg-drag-over" : ""}`,
+                onDragOver: (e) => handleDragOver("column", e),
+                onDragLeave: handleDragLeave,
+                onDrop: (e) => handleDrop("column", e),
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "vpg-zone-header", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "vpg-zone-icon vpg-column-icon", children: "\u2192" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "vpg-zone-label", children: "Columns" })
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "vpg-zone-chips", children: [
+                    columnFields.map((field) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "vpg-mini-chip vpg-column-chip", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "vpg-mini-name", children: field }),
+                      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                        "button",
+                        {
+                          className: "vpg-mini-remove",
+                          onClick: () => onRemoveColumnField(field),
+                          children: "\xD7"
+                        }
+                      )
+                    ] }, field)),
+                    columnFields.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "vpg-zone-hint", children: "Drop here" })
+                  ] })
+                ]
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+              "div",
+              {
+                className: `vpg-drop-zone vpg-value-zone ${dragOverArea === "value" ? "vpg-drag-over" : ""}`,
+                onDragOver: (e) => handleDragOver("value", e),
+                onDragLeave: handleDragLeave,
+                onDrop: (e) => handleDrop("value", e),
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "vpg-zone-header", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "vpg-zone-icon vpg-value-icon", children: "\u03A3" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "vpg-zone-label", children: "Values" })
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "vpg-zone-chips", children: [
+                    valueFields.map((vf) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                      "div",
+                      {
+                        className: "vpg-mini-chip vpg-value-chip",
+                        children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "vpg-agg-symbol", children: (0, import_tinypivot_core6.getAggregationSymbol)(vf.aggregation) }),
+                          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "vpg-mini-name", children: vf.field }),
+                          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                            "button",
+                            {
+                              className: "vpg-mini-remove",
+                              onClick: () => onRemoveValueField(vf.field, vf.aggregation),
+                              children: "\xD7"
+                            }
+                          )
+                        ]
+                      },
+                      `${vf.field}-${vf.aggregation}`
+                    )),
+                    valueFields.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "vpg-zone-hint", children: "Drop numeric" })
+                  ] })
+                ]
+              }
+            )
+          ] }),
+          (!isConfigured || !pivotResult) && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "vpg-placeholder", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "vpg-placeholder-content", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              "svg",
+              {
+                className: "vpg-placeholder-icon",
+                fill: "none",
+                viewBox: "0 0 24 24",
+                stroke: "currentColor",
+                children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  "path",
+                  {
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    strokeWidth: 1.5,
+                    d: "M3 10h18M3 14h18m-9-4v8m-7 0h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "vpg-placeholder-text", children: valueFields.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+              "Add a ",
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("strong", { children: "Values" }),
+              " field to see your pivot table"
+            ] }) : rowFields.length === 0 && columnFields.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+              "Add ",
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("strong", { children: "Row" }),
+              " or ",
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("strong", { children: "Column" }),
+              " fields to group your data"
+            ] }) : "Your pivot table will appear here" })
+          ] }) }),
+          isConfigured && pivotResult && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "vpg-table-container", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("table", { className: "vpg-pivot-table", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("thead", { children: columnHeaderCells.map((headerRow, levelIdx) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("tr", { className: "vpg-column-header-row", children: [
+              levelIdx === 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                "th",
+                {
+                  className: "vpg-row-header-label",
+                  rowSpan: columnHeaderCells.length,
+                  onClick: () => toggleSort("row"),
+                  children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "vpg-header-content", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: rowFields.join(" / ") || "Rows" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: `vpg-sort-indicator ${sortTarget === "row" ? "active" : ""}`, children: sortTarget === "row" ? sortDirection === "asc" ? "\u2191" : "\u2193" : "\u21C5" })
+                  ] })
+                }
+              ),
+              headerRow.map((cell, idx) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                "th",
+                {
+                  className: "vpg-column-header-cell",
+                  colSpan: cell.colspan,
+                  onClick: () => levelIdx === columnHeaderCells.length - 1 && toggleSort(idx),
+                  children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "vpg-header-content", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: cell.label }),
+                    levelIdx === columnHeaderCells.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: `vpg-sort-indicator ${sortTarget === idx ? "active" : ""}`, children: sortTarget === idx ? sortDirection === "asc" ? "\u2191" : "\u2193" : "\u21C5" })
+                  ] })
+                },
+                idx
+              )),
+              pivotResult.rowTotals.length > 0 && levelIdx === 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("th", { className: "vpg-total-header", rowSpan: columnHeaderCells.length, children: "Total" })
+            ] }, `header-${levelIdx}`)) }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("tbody", { children: [
+              sortedRowIndices.map((sortedIdx) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("tr", { className: "vpg-data-row", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("th", { className: "vpg-row-header-cell", children: pivotResult.rowHeaders[sortedIdx].map((val, idx) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "vpg-row-value", children: val }, idx)) }),
+                pivotResult.data[sortedIdx].map((cell, colIdx) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  "td",
+                  {
+                    className: `vpg-data-cell ${cell.value === null ? "vpg-is-null" : ""}`,
+                    children: cell.formattedValue
+                  },
+                  colIdx
+                )),
+                pivotResult.rowTotals[sortedIdx] && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("td", { className: "vpg-data-cell vpg-total-cell", children: pivotResult.rowTotals[sortedIdx].formattedValue })
+              ] }, sortedIdx)),
+              pivotResult.columnTotals.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("tr", { className: "vpg-totals-row", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("th", { className: "vpg-row-header-cell vpg-total-label", children: "Total" }),
+                pivotResult.columnTotals.map((cell, colIdx) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("td", { className: "vpg-data-cell vpg-total-cell", children: cell.formattedValue }, colIdx)),
+                pivotResult.rowTotals.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("td", { className: "vpg-data-cell vpg-grand-total-cell", children: pivotResult.grandTotal.formattedValue })
+              ] })
+            ] })
+          ] }) }),
+          isConfigured && pivotResult && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "vpg-skeleton-footer", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { children: [
+            pivotResult.rowHeaders.length,
+            " rows \xD7 ",
+            pivotResult.data[0]?.length || 0,
+            " columns"
+          ] }) })
+        ] }),
+        showWatermark && canUsePivot && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: `vpg-watermark ${isDemo ? "vpg-demo-mode" : ""}`, children: isDemo ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "vpg-demo-badge", children: "DEMO" }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: "Pro features unlocked for evaluation" }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "a",
+            {
+              href: "https://tiny-pivot.com/#pricing",
+              target: "_blank",
+              rel: "noopener noreferrer",
+              className: "vpg-get-pro",
+              children: "Get Pro License \u2192"
+            }
+          )
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("a", { href: "https://tiny-pivot.com", target: "_blank", rel: "noopener noreferrer", children: "Powered by TinyPivot" }) })
+      ]
+    }
+  );
+}
+
+// src/components/DataGrid.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var MIN_COL_WIDTH = 120;
+var MAX_COL_WIDTH = 350;
+function DataGrid({
+  data,
+  loading = false,
+  fontSize: initialFontSize = "xs",
+  showPivot = true,
+  enableExport = true,
+  enableSearch = true,
+  enablePagination = false,
+  pageSize = 50,
+  enableColumnResize = true,
+  enableClipboard = true,
+  theme = "light",
+  stripedRows = true,
+  exportFilename = "data-export.csv",
+  enableVerticalResize = true,
+  initialHeight = 600,
+  minHeight = 300,
+  maxHeight = 1200,
+  onCellClick,
+  onExport,
+  onCopy
+}) {
+  const { showWatermark, canUsePivot, isDemo } = useLicense();
+  const currentTheme = (0, import_react8.useMemo)(() => {
+    if (theme === "auto") {
+      return window.matchMedia?.("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+    }
+    return theme;
+  }, [theme]);
+  const [currentFontSize, setCurrentFontSize] = (0, import_react8.useState)(initialFontSize);
+  const [globalSearchTerm, setGlobalSearchTerm] = (0, import_react8.useState)("");
+  const [showSearchInput, setShowSearchInput] = (0, import_react8.useState)(false);
+  const [currentPage, setCurrentPage] = (0, import_react8.useState)(1);
+  const [columnWidths, setColumnWidths] = (0, import_react8.useState)({});
+  const [resizingColumnId, setResizingColumnId] = (0, import_react8.useState)(null);
+  const [resizeStartX, setResizeStartX] = (0, import_react8.useState)(0);
+  const [resizeStartWidth, setResizeStartWidth] = (0, import_react8.useState)(0);
+  const [gridHeight, setGridHeight] = (0, import_react8.useState)(initialHeight);
+  const [isResizingVertically, setIsResizingVertically] = (0, import_react8.useState)(false);
+  const [verticalResizeStartY, setVerticalResizeStartY] = (0, import_react8.useState)(0);
+  const [verticalResizeStartHeight, setVerticalResizeStartHeight] = (0, import_react8.useState)(0);
+  const [showCopyToast, setShowCopyToast] = (0, import_react8.useState)(false);
+  const [copyToastMessage, setCopyToastMessage] = (0, import_react8.useState)("");
+  const [viewMode, setViewMode] = (0, import_react8.useState)("grid");
+  const [showPivotConfig, setShowPivotConfig] = (0, import_react8.useState)(true);
+  const [draggingField, setDraggingField] = (0, import_react8.useState)(null);
+  const [activeFilterColumn, setActiveFilterColumn] = (0, import_react8.useState)(null);
+  const [filterDropdownPosition, setFilterDropdownPosition] = (0, import_react8.useState)({ top: 0, left: 0, maxHeight: 400 });
+  const [selectedCell, setSelectedCell] = (0, import_react8.useState)(null);
+  const [selectionStart, setSelectionStart] = (0, import_react8.useState)(null);
+  const [selectionEnd, setSelectionEnd] = (0, import_react8.useState)(null);
+  const [isSelecting, setIsSelecting] = (0, import_react8.useState)(false);
+  const tableContainerRef = (0, import_react8.useRef)(null);
+  const tableBodyRef = (0, import_react8.useRef)(null);
+  const fontSizeOptions = [
+    { value: "xs", label: "S" },
+    { value: "sm", label: "M" },
+    { value: "base", label: "L" }
+  ];
+  const {
+    table,
+    columnKeys,
+    filteredRowCount,
+    totalRowCount,
+    getColumnStats,
+    hasActiveFilter,
+    setColumnFilter,
+    getColumnFilterValues,
+    clearAllFilters,
+    toggleSort,
+    getSortDirection,
+    columnFilters,
+    activeFilters
+  } = useExcelGrid({ data, enableSorting: true, enableFiltering: true });
+  const filteredDataForPivot = (0, import_react8.useMemo)(() => {
+    const filteredRows = table.getFilteredRowModel().rows;
+    return filteredRows.map((row) => row.original);
+  }, [table]);
+  const {
+    rowFields: pivotRowFields,
+    columnFields: pivotColumnFields,
+    valueFields: pivotValueFields,
+    showRowTotals: pivotShowRowTotals,
+    showColumnTotals: pivotShowColumnTotals,
+    availableFields: pivotAvailableFields,
+    isConfigured: pivotIsConfigured,
+    pivotResult,
+    addRowField,
+    removeRowField,
+    addColumnField,
+    removeColumnField,
+    addValueField,
+    removeValueField,
+    updateValueFieldAggregation,
+    clearConfig: clearPivotConfig,
+    autoSuggestConfig,
+    setShowRowTotals: setPivotShowRowTotals,
+    setShowColumnTotals: setPivotShowColumnTotals,
+    setRowFields,
+    setColumnFields
+  } = usePivotTable(filteredDataForPivot);
+  const activeFilterInfo = (0, import_react8.useMemo)(() => {
+    if (activeFilters.length === 0) return null;
+    return activeFilters.map((f) => ({
+      column: f.column,
+      valueCount: f.values?.length || 0,
+      values: f.values || []
+    }));
+  }, [activeFilters]);
+  const rows = (0, import_react8.useMemo)(() => table.getRowModel().rows, [table]);
+  const searchFilteredData = (0, import_react8.useMemo)(() => {
+    if (!globalSearchTerm.trim() || !enableSearch) {
+      return rows;
+    }
+    const term = globalSearchTerm.toLowerCase().trim();
+    return rows.filter((row) => {
+      for (const col of columnKeys) {
+        const value = row.original[col];
+        if (value === null || value === void 0) continue;
+        if (String(value).toLowerCase().includes(term)) {
+          return true;
+        }
+      }
+      return false;
+    });
+  }, [rows, globalSearchTerm, enableSearch, columnKeys]);
+  const totalSearchedRows = searchFilteredData.length;
+  const totalPages = (0, import_react8.useMemo)(() => {
+    if (!enablePagination) return 1;
+    return Math.max(1, Math.ceil(totalSearchedRows / pageSize));
+  }, [enablePagination, totalSearchedRows, pageSize]);
+  const paginatedRows = (0, import_react8.useMemo)(() => {
+    if (!enablePagination) return searchFilteredData;
+    const start = (currentPage - 1) * pageSize;
+    const end = start + pageSize;
+    return searchFilteredData.slice(start, end);
+  }, [enablePagination, searchFilteredData, currentPage, pageSize]);
+  const selectionBounds = (0, import_react8.useMemo)(() => {
+    if (!selectionStart || !selectionEnd) return null;
+    return {
+      minRow: Math.min(selectionStart.row, selectionEnd.row),
+      maxRow: Math.max(selectionStart.row, selectionEnd.row),
+      minCol: Math.min(selectionStart.col, selectionEnd.col),
+      maxCol: Math.max(selectionStart.col, selectionEnd.col)
+    };
+  }, [selectionStart, selectionEnd]);
+  const selectionStats = (0, import_react8.useMemo)(() => {
+    if (!selectionBounds) return null;
+    const { minRow, maxRow, minCol, maxCol } = selectionBounds;
+    const values = [];
+    let count = 0;
+    for (let r = minRow; r <= maxRow; r++) {
+      const row = rows[r];
+      if (!row) continue;
+      for (let c = minCol; c <= maxCol; c++) {
+        const colId = columnKeys[c];
+        if (!colId) continue;
+        const value = row.original[colId];
+        count++;
+        if (value !== null && value !== void 0 && value !== "") {
+          const num = typeof value === "number" ? value : Number.parseFloat(String(value));
+          if (!Number.isNaN(num)) {
+            values.push(num);
+          }
+        }
+      }
+    }
+    if (values.length === 0) return { count, sum: null, avg: null, numericCount: 0 };
+    const sum = values.reduce((a, b) => a + b, 0);
+    const avg = sum / values.length;
+    return { count, sum, avg, numericCount: values.length };
+  }, [selectionBounds, rows, columnKeys]);
+  (0, import_react8.useEffect)(() => {
+    if (data.length === 0) return;
+    const widths = {};
+    const sampleSize = Math.min(100, data.length);
+    const canvas = document.createElement("canvas");
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+    ctx.font = "13px system-ui, -apple-system, sans-serif";
+    for (const key of columnKeys) {
+      let maxWidth = ctx.measureText(key).width + 56;
+      for (let i = 0; i < sampleSize; i++) {
+        const value = data[i][key];
+        const text = value === null || value === void 0 ? "" : String(value);
+        const width = ctx.measureText(text).width + 28;
+        maxWidth = Math.max(maxWidth, width);
+      }
+      widths[key] = Math.min(Math.max(maxWidth, MIN_COL_WIDTH), MAX_COL_WIDTH);
+    }
+    setColumnWidths(widths);
+  }, [data, columnKeys]);
+  const startColumnResize = (0, import_react8.useCallback)(
+    (columnId, event) => {
+      if (!enableColumnResize) return;
+      event.preventDefault();
+      event.stopPropagation();
+      setResizingColumnId(columnId);
+      setResizeStartX(event.clientX);
+      setResizeStartWidth(columnWidths[columnId] || MIN_COL_WIDTH);
+    },
+    [enableColumnResize, columnWidths]
+  );
+  (0, import_react8.useEffect)(() => {
+    if (!resizingColumnId) return;
+    const handleResizeMove = (event) => {
+      const diff = event.clientX - resizeStartX;
+      const newWidth = Math.max(MIN_COL_WIDTH, Math.min(MAX_COL_WIDTH, resizeStartWidth + diff));
+      setColumnWidths((prev) => ({
+        ...prev,
+        [resizingColumnId]: newWidth
+      }));
+    };
+    const handleResizeEnd = () => {
+      setResizingColumnId(null);
+    };
+    document.addEventListener("mousemove", handleResizeMove);
+    document.addEventListener("mouseup", handleResizeEnd);
+    return () => {
+      document.removeEventListener("mousemove", handleResizeMove);
+      document.removeEventListener("mouseup", handleResizeEnd);
+    };
+  }, [resizingColumnId, resizeStartX, resizeStartWidth]);
+  const startVerticalResize = (0, import_react8.useCallback)(
+    (event) => {
+      if (!enableVerticalResize) return;
+      event.preventDefault();
+      setIsResizingVertically(true);
+      setVerticalResizeStartY(event.clientY);
+      setVerticalResizeStartHeight(gridHeight);
+    },
+    [enableVerticalResize, gridHeight]
+  );
+  (0, import_react8.useEffect)(() => {
+    if (!isResizingVertically) return;
+    const handleVerticalResizeMove = (event) => {
+      const diff = event.clientY - verticalResizeStartY;
+      const newHeight = Math.max(minHeight, Math.min(maxHeight, verticalResizeStartHeight + diff));
+      setGridHeight(newHeight);
+    };
+    const handleVerticalResizeEnd = () => {
+      setIsResizingVertically(false);
+    };
+    document.addEventListener("mousemove", handleVerticalResizeMove);
+    document.addEventListener("mouseup", handleVerticalResizeEnd);
+    return () => {
+      document.removeEventListener("mousemove", handleVerticalResizeMove);
+      document.removeEventListener("mouseup", handleVerticalResizeEnd);
+    };
+  }, [isResizingVertically, verticalResizeStartY, verticalResizeStartHeight, minHeight, maxHeight]);
+  const handleExport = (0, import_react8.useCallback)(() => {
+    if (viewMode === "pivot") {
+      if (!pivotResult) return;
+      const pivotFilename = exportFilename.replace(".csv", "-pivot.csv");
+      exportPivotToCSV(
+        {
+          headers: pivotResult.headers,
+          rowHeaders: pivotResult.rowHeaders,
+          data: pivotResult.data,
+          rowTotals: pivotResult.rowTotals,
+          columnTotals: pivotResult.columnTotals,
+          grandTotal: pivotResult.grandTotal,
+          showRowTotals: pivotShowRowTotals,
+          showColumnTotals: pivotShowColumnTotals
+        },
+        pivotRowFields,
+        pivotColumnFields,
+        pivotValueFields,
+        { filename: pivotFilename }
+      );
+      onExport?.({ rowCount: pivotResult.rowHeaders.length, filename: pivotFilename });
+      return;
+    }
+    const dataToExport = enableSearch && globalSearchTerm.trim() ? searchFilteredData.map((row) => row.original) : rows.map((row) => row.original);
+    exportToCSV(dataToExport, columnKeys, {
+      filename: exportFilename,
+      includeHeaders: true
+    });
+    onExport?.({ rowCount: dataToExport.length, filename: exportFilename });
+  }, [
+    viewMode,
+    pivotResult,
+    exportFilename,
+    pivotShowRowTotals,
+    pivotShowColumnTotals,
+    pivotRowFields,
+    pivotColumnFields,
+    pivotValueFields,
+    enableSearch,
+    globalSearchTerm,
+    searchFilteredData,
+    rows,
+    columnKeys,
+    onExport
+  ]);
+  const copySelectionToClipboard = (0, import_react8.useCallback)(() => {
+    if (!selectionBounds || !enableClipboard) return;
+    const text = formatSelectionForClipboard(
+      rows.map((r) => r.original),
+      columnKeys,
+      selectionBounds
+    );
+    copyToClipboard(
+      text,
+      () => {
+        const cellCount = (selectionBounds.maxRow - selectionBounds.minRow + 1) * (selectionBounds.maxCol - selectionBounds.minCol + 1);
+        setCopyToastMessage(`Copied ${cellCount} cell${cellCount > 1 ? "s" : ""}`);
+        setShowCopyToast(true);
+        setTimeout(() => setShowCopyToast(false), 2e3);
+        onCopy?.({ text, cellCount });
+      },
+      (err) => {
+        setCopyToastMessage("Copy failed");
+        setShowCopyToast(true);
+        setTimeout(() => setShowCopyToast(false), 2e3);
+        console.error("Copy failed:", err);
+      }
+    );
+  }, [selectionBounds, enableClipboard, rows, columnKeys, onCopy]);
+  const handleMouseDown = (0, import_react8.useCallback)(
+    (rowIndex, colIndex, event) => {
+      event.preventDefault();
+      if (event.shiftKey && selectedCell) {
+        setSelectionEnd({ row: rowIndex, col: colIndex });
+      } else {
+        setSelectedCell({ row: rowIndex, col: colIndex });
+        setSelectionStart({ row: rowIndex, col: colIndex });
+        setSelectionEnd({ row: rowIndex, col: colIndex });
+        setIsSelecting(true);
+      }
+      const row = rows[rowIndex];
+      if (row) {
+        const colId = columnKeys[colIndex];
+        onCellClick?.({
+          row: rowIndex,
+          col: colIndex,
+          value: row.original[colId],
+          rowData: row.original
+        });
+      }
+    },
+    [selectedCell, rows, columnKeys, onCellClick]
+  );
+  const handleMouseEnter = (0, import_react8.useCallback)(
+    (rowIndex, colIndex) => {
+      if (isSelecting) {
+        setSelectionEnd({ row: rowIndex, col: colIndex });
+      }
+    },
+    [isSelecting]
+  );
+  (0, import_react8.useEffect)(() => {
+    const handleMouseUp = () => setIsSelecting(false);
+    document.addEventListener("mouseup", handleMouseUp);
+    return () => document.removeEventListener("mouseup", handleMouseUp);
+  }, []);
+  (0, import_react8.useEffect)(() => {
+    const handleKeydown = (event) => {
+      if ((event.ctrlKey || event.metaKey) && event.key === "c" && selectionBounds) {
+        event.preventDefault();
+        copySelectionToClipboard();
+        return;
+      }
+      if (event.key === "Escape") {
+        setSelectedCell(null);
+        setSelectionStart(null);
+        setSelectionEnd(null);
+        setShowSearchInput(false);
+        setGlobalSearchTerm("");
+      }
+    };
+    document.addEventListener("keydown", handleKeydown);
+    return () => document.removeEventListener("keydown", handleKeydown);
+  }, [selectionBounds, copySelectionToClipboard]);
+  const openFilterDropdown = (0, import_react8.useCallback)(
+    (columnId, event) => {
+      event.stopPropagation();
+      const target = event.currentTarget;
+      const headerCell = target.closest(".vpg-header-cell");
+      const rect = headerCell?.getBoundingClientRect() || target.getBoundingClientRect();
+      const dropdownWidth = 280;
+      const padding = 12;
+      let left = rect.left;
+      if (left + dropdownWidth > window.innerWidth - padding) {
+        left = window.innerWidth - dropdownWidth - padding;
+      }
+      left = Math.max(padding, left);
+      const spaceBelow = window.innerHeight - rect.bottom - padding;
+      const spaceAbove = rect.top - padding;
+      let top;
+      let maxDropdownHeight;
+      if (spaceBelow >= 300 || spaceBelow >= spaceAbove) {
+        top = rect.bottom + 4;
+        maxDropdownHeight = Math.min(400, spaceBelow - 4);
+      } else {
+        maxDropdownHeight = Math.min(400, spaceAbove - 4);
+        top = rect.top - maxDropdownHeight - 4;
+      }
+      setFilterDropdownPosition({ top, left, maxHeight: maxDropdownHeight });
+      setActiveFilterColumn(columnId);
+    },
+    []
+  );
+  const closeFilterDropdown = (0, import_react8.useCallback)(() => {
+    setActiveFilterColumn(null);
+  }, []);
+  const handleFilter = (0, import_react8.useCallback)(
+    (columnId, values) => {
+      setColumnFilter(columnId, values);
+    },
+    [setColumnFilter]
+  );
+  const handleSort = (0, import_react8.useCallback)(
+    (columnId, direction) => {
+      if (direction === null) {
+        const current = getSortDirection(columnId);
+        if (current) {
+          toggleSort(columnId);
+          if (getSortDirection(columnId)) {
+            toggleSort(columnId);
+          }
+        }
+      } else {
+        const current = getSortDirection(columnId);
+        if (current === null) {
+          toggleSort(columnId);
+          if (direction === "desc" && getSortDirection(columnId) === "asc") {
+            toggleSort(columnId);
+          }
+        } else if (current !== direction) {
+          toggleSort(columnId);
+        }
+      }
+    },
+    [getSortDirection, toggleSort]
+  );
+  const isCellSelected = (0, import_react8.useCallback)(
+    (rowIndex, colIndex) => {
+      if (!selectionBounds) {
+        return selectedCell?.row === rowIndex && selectedCell?.col === colIndex;
+      }
+      const { minRow, maxRow, minCol, maxCol } = selectionBounds;
+      return rowIndex >= minRow && rowIndex <= maxRow && colIndex >= minCol && colIndex <= maxCol;
+    },
+    [selectionBounds, selectedCell]
+  );
+  const formatStatValue = (value) => {
+    if (value === null) return "-";
+    if (Math.abs(value) >= 1e3) {
+      return value.toLocaleString("en-US", { maximumFractionDigits: 2 });
+    }
+    return value.toLocaleString("en-US", { maximumFractionDigits: 4 });
+  };
+  const noFormatPatterns = /^(?:.*_)?(?:id|code|year|month|quarter|day|week|date|zip|phone|fax|ssn|ein|npi|ndc|gpi|hcpcs|icd|cpt|rx|bin|pcn|group|member|claim|rx_number|script|fill)(?:_.*)?$/i;
+  const shouldFormatNumber = (columnId) => {
+    return !noFormatPatterns.test(columnId);
+  };
+  const formatCellValueDisplay = (value, columnId) => {
+    if (value === null || value === void 0) return "";
+    if (value === "") return "";
+    const stats = getColumnStats(columnId);
+    if (stats.type === "number") {
+      const num = typeof value === "number" ? value : Number.parseFloat(String(value));
+      if (Number.isNaN(num)) return String(value);
+      if (shouldFormatNumber(columnId) && Math.abs(num) >= 1e3) {
+        return num.toLocaleString("en-US", { maximumFractionDigits: 2 });
+      }
+      if (Number.isInteger(num)) {
+        return String(num);
+      }
+      return num.toLocaleString("en-US", { maximumFractionDigits: 4, useGrouping: false });
+    }
+    return String(value);
+  };
+  const totalTableWidth = (0, import_react8.useMemo)(() => {
+    return columnKeys.reduce((sum, key) => sum + (columnWidths[key] || MIN_COL_WIDTH), 0);
+  }, [columnKeys, columnWidths]);
+  const activeFilterCount = columnFilters.length;
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    "div",
+    {
+      className: `vpg-data-grid vpg-font-${currentFontSize} vpg-theme-${currentTheme} ${stripedRows ? "vpg-striped" : ""} ${resizingColumnId ? "vpg-resizing" : ""} ${isResizingVertically ? "vpg-resizing-vertical" : ""}`,
+      style: { height: `${gridHeight}px` },
+      children: [
+        showCopyToast && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "vpg-toast", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { className: "vpg-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) }),
+          copyToastMessage
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "vpg-toolbar", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "vpg-toolbar-left", children: [
+            showPivot && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "vpg-view-toggle", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+                "button",
+                {
+                  className: `vpg-view-btn ${viewMode === "grid" ? "active" : ""}`,
+                  onClick: () => setViewMode("grid"),
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { className: "vpg-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                      "path",
+                      {
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round",
+                        strokeWidth: 2,
+                        d: "M3 10h18M3 14h18m-9-4v8m-7 0h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"
+                      }
+                    ) }),
+                    "Grid"
+                  ]
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+                "button",
+                {
+                  className: `vpg-view-btn vpg-pivot-btn ${viewMode === "pivot" ? "active" : ""}`,
+                  onClick: () => setViewMode("pivot"),
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { className: "vpg-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                      "path",
+                      {
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round",
+                        strokeWidth: 2,
+                        d: "M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z"
+                      }
+                    ) }),
+                    "Pivot"
+                  ]
+                }
+              )
+            ] }),
+            viewMode === "grid" && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+              enableSearch && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "vpg-search-container", children: !showSearchInput ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                "button",
+                {
+                  className: "vpg-icon-btn",
+                  title: "Search (Ctrl+F)",
+                  onClick: () => setShowSearchInput(true),
+                  children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { className: "vpg-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                    "path",
+                    {
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      strokeWidth: 2,
+                      d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+                    }
+                  ) })
+                }
+              ) : /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "vpg-search-box", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                  "svg",
+                  {
+                    className: "vpg-search-icon",
+                    fill: "none",
+                    stroke: "currentColor",
+                    viewBox: "0 0 24 24",
+                    children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                      "path",
+                      {
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round",
+                        strokeWidth: 2,
+                        d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                  "input",
+                  {
+                    type: "text",
+                    value: globalSearchTerm,
+                    onChange: (e) => setGlobalSearchTerm(e.target.value),
+                    className: "vpg-search-input",
+                    placeholder: "Search all columns...",
+                    onKeyDown: (e) => {
+                      if (e.key === "Escape") {
+                        setShowSearchInput(false);
+                        setGlobalSearchTerm("");
+                      }
+                    },
+                    autoFocus: true
+                  }
+                ),
+                globalSearchTerm && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { className: "vpg-search-clear", onClick: () => setGlobalSearchTerm(""), children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                  "svg",
+                  {
+                    className: "vpg-icon-xs",
+                    fill: "none",
+                    stroke: "currentColor",
+                    viewBox: "0 0 24 24",
+                    children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                      "path",
+                      {
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round",
+                        strokeWidth: 2,
+                        d: "M6 18L18 6M6 6l12 12"
+                      }
+                    )
+                  }
+                ) })
+              ] }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "vpg-font-size-control", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "vpg-label", children: "Size:" }),
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "vpg-font-size-toggle", children: fontSizeOptions.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                  "button",
+                  {
+                    className: `vpg-font-size-btn ${currentFontSize === opt.value ? "active" : ""}`,
+                    onClick: () => setCurrentFontSize(opt.value),
+                    children: opt.label
+                  },
+                  opt.value
+                )) })
+              ] }),
+              activeFilterCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "vpg-filter-info", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { className: "vpg-icon", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                  "path",
+                  {
+                    fillRule: "evenodd",
+                    d: "M3 3a1 1 0 011-1h12a1 1 0 011 1v3a1 1 0 01-.293.707L12 11.414V15a1 1 0 01-.293.707l-2 2A1 1 0 018 17v-5.586L3.293 6.707A1 1 0 013 6V3z",
+                    clipRule: "evenodd"
+                  }
+                ) }),
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { children: [
+                  activeFilterCount,
+                  " filter",
+                  activeFilterCount > 1 ? "s" : ""
+                ] })
+              ] }),
+              globalSearchTerm && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "vpg-search-info", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { children: [
+                totalSearchedRows,
+                " match",
+                totalSearchedRows !== 1 ? "es" : ""
+              ] }) })
+            ] }),
+            viewMode === "pivot" && canUsePivot && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+                "button",
+                {
+                  className: `vpg-config-toggle ${showPivotConfig ? "active" : ""}`,
+                  onClick: () => setShowPivotConfig(!showPivotConfig),
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { className: "vpg-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                      "path",
+                      {
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round",
+                        strokeWidth: 2,
+                        d: "M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"
+                      }
+                    ) }),
+                    showPivotConfig ? "Hide" : "Show",
+                    " Config"
+                  ]
+                }
+              ),
+              pivotIsConfigured && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "vpg-pivot-status", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { className: "vpg-icon", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                  "path",
+                  {
+                    fillRule: "evenodd",
+                    d: "M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z",
+                    clipRule: "evenodd"
+                  }
+                ) }),
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: "Pivot configured" })
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "vpg-toolbar-right", children: [
+            viewMode === "grid" && activeFilterCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("button", { className: "vpg-clear-filters", onClick: clearAllFilters, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { className: "vpg-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                "path",
+                {
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  strokeWidth: 2,
+                  d: "M6 18L18 6M6 6l12 12"
+                }
+              ) }),
+              "Clear Filters"
+            ] }),
+            enableClipboard && selectionBounds && viewMode === "grid" && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              "button",
+              {
+                className: "vpg-icon-btn",
+                title: "Copy selection (Ctrl+C)",
+                onClick: copySelectionToClipboard,
+                children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { className: "vpg-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                  "path",
+                  {
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    strokeWidth: 2,
+                    d: "M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
+                  }
+                ) })
+              }
+            ),
+            enableExport && (viewMode === "grid" || viewMode === "pivot" && pivotIsConfigured) && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+              "button",
+              {
+                className: "vpg-export-btn",
+                title: viewMode === "pivot" ? "Export Pivot to CSV" : "Export to CSV",
+                onClick: handleExport,
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { className: "vpg-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                    "path",
+                    {
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      strokeWidth: 2,
+                      d: "M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
+                    }
+                  ) }),
+                  "Export",
+                  viewMode === "pivot" ? " Pivot" : ""
+                ]
+              }
+            )
+          ] })
+        ] }),
+        viewMode === "grid" && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { ref: tableContainerRef, className: "vpg-grid-container", tabIndex: 0, children: [
+          loading && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "vpg-loading", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "vpg-spinner" }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: "Loading data..." })
+          ] }),
+          !loading && data.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "vpg-empty", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "vpg-empty-icon", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { className: "vpg-icon-lg", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              "path",
+              {
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeWidth: 1.5,
+                d: "M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
+              }
+            ) }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: "No data available" })
+          ] }),
+          !loading && data.length > 0 && filteredRowCount === 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "vpg-empty", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "vpg-empty-icon vpg-warning", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { className: "vpg-icon-lg", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              "path",
+              {
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeWidth: 1.5,
+                d: "M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"
+              }
+            ) }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: "No matching records" }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { className: "vpg-clear-link", onClick: clearAllFilters, children: "Clear all filters" })
+          ] }),
+          !loading && filteredRowCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "vpg-table-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("table", { className: "vpg-table", style: { minWidth: `${totalTableWidth}px` }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("tr", { children: columnKeys.map((colId, colIndex) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+              "th",
+              {
+                className: `vpg-header-cell ${hasActiveFilter(colId) ? "vpg-has-filter" : ""} ${getSortDirection(colId) !== null ? "vpg-is-sorted" : ""} ${activeFilterColumn === colId ? "vpg-is-active" : ""}`,
+                style: {
+                  width: `${columnWidths[colId] || MIN_COL_WIDTH}px`,
+                  minWidth: `${columnWidths[colId] || MIN_COL_WIDTH}px`
+                },
+                onClick: (e) => {
+                  const target = e.target;
+                  if (target.closest(".vpg-dropdown-arrow")) {
+                    openFilterDropdown(colId, e);
+                  }
+                },
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "vpg-header-content", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "vpg-header-text", children: colId }),
+                    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "vpg-header-icons", children: [
+                      getSortDirection(colId) && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "vpg-sort-indicator", children: getSortDirection(colId) === "asc" ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                        "svg",
+                        {
+                          className: "vpg-icon-sm",
+                          fill: "currentColor",
+                          viewBox: "0 0 20 20",
+                          children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                            "path",
+                            {
+                              fillRule: "evenodd",
+                              d: "M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 010 1.414z",
+                              clipRule: "evenodd"
+                            }
+                          )
+                        }
+                      ) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                        "svg",
+                        {
+                          className: "vpg-icon-sm",
+                          fill: "currentColor",
+                          viewBox: "0 0 20 20",
+                          children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                            "path",
+                            {
+                              fillRule: "evenodd",
+                              d: "M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z",
+                              clipRule: "evenodd"
+                            }
+                          )
+                        }
+                      ) }),
+                      hasActiveFilter(colId) && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "vpg-filter-indicator", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                        "svg",
+                        {
+                          className: "vpg-icon-xs",
+                          fill: "currentColor",
+                          viewBox: "0 0 20 20",
+                          children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                            "path",
+                            {
+                              fillRule: "evenodd",
+                              d: "M3 3a1 1 0 011-1h12a1 1 0 011 1v3a1 1 0 01-.293.707L12 11.414V15a1 1 0 01-.293.707l-2 2A1 1 0 018 17v-5.586L3.293 6.707A1 1 0 013 6V3z",
+                              clipRule: "evenodd"
+                            }
+                          )
+                        }
+                      ) }),
+                      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "vpg-dropdown-arrow", title: "Filter & Sort", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                        "svg",
+                        {
+                          className: "vpg-icon-sm",
+                          fill: "none",
+                          stroke: "currentColor",
+                          viewBox: "0 0 24 24",
+                          children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                            "path",
+                            {
+                              strokeLinecap: "round",
+                              strokeLinejoin: "round",
+                              strokeWidth: 2,
+                              d: "M19 9l-7 7-7-7"
+                            }
+                          )
+                        }
+                      ) })
+                    ] })
+                  ] }),
+                  enableColumnResize && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                    "div",
+                    {
+                      className: "vpg-resize-handle",
+                      onMouseDown: (e) => startColumnResize(colId, e)
+                    }
+                  )
+                ]
+              },
+              colId
+            )) }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("tbody", { ref: tableBodyRef, children: paginatedRows.map((row, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("tr", { className: "vpg-row", children: columnKeys.map((colId, colIndex) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              "td",
+              {
+                className: `vpg-cell ${isCellSelected(rowIndex, colIndex) ? "vpg-selected" : ""} ${getColumnStats(colId).type === "number" ? "vpg-is-number" : ""}`,
+                "data-row": rowIndex,
+                "data-col": colIndex,
+                style: {
+                  width: `${columnWidths[colId] || MIN_COL_WIDTH}px`,
+                  minWidth: `${columnWidths[colId] || MIN_COL_WIDTH}px`
+                },
+                onMouseDown: (e) => handleMouseDown(rowIndex, colIndex, e),
+                onMouseEnter: () => handleMouseEnter(rowIndex, colIndex),
+                children: formatCellValueDisplay(row.original[colId], colId)
+              },
+              colId
+            )) }, row.id)) })
+          ] }) })
+        ] }),
+        viewMode === "pivot" && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "vpg-pivot-container", children: [
+          showPivotConfig && canUsePivot && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "vpg-pivot-config-panel", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            PivotConfig,
+            {
+              availableFields: pivotAvailableFields,
+              rowFields: pivotRowFields,
+              columnFields: pivotColumnFields,
+              valueFields: pivotValueFields,
+              showRowTotals: pivotShowRowTotals,
+              showColumnTotals: pivotShowColumnTotals,
+              onShowRowTotalsChange: setPivotShowRowTotals,
+              onShowColumnTotalsChange: setPivotShowColumnTotals,
+              onClearConfig: clearPivotConfig,
+              onAutoSuggest: autoSuggestConfig,
+              onDragStart: (field, e) => setDraggingField(field),
+              onDragEnd: () => setDraggingField(null),
+              onUpdateAggregation: updateValueFieldAggregation,
+              onAddRowField: addRowField,
+              onRemoveRowField: removeRowField,
+              onAddColumnField: addColumnField,
+              onRemoveColumnField: removeColumnField,
+              onAddValueField: addValueField,
+              onRemoveValueField: removeValueField
+            }
+          ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: `vpg-pivot-main ${!showPivotConfig ? "vpg-full-width" : ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            PivotSkeleton,
+            {
+              rowFields: pivotRowFields,
+              columnFields: pivotColumnFields,
+              valueFields: pivotValueFields,
+              isConfigured: pivotIsConfigured,
+              draggingField,
+              pivotResult,
+              fontSize: currentFontSize,
+              activeFilters: activeFilterInfo,
+              totalRowCount,
+              filteredRowCount,
+              onAddRowField: addRowField,
+              onRemoveRowField: removeRowField,
+              onAddColumnField: addColumnField,
+              onRemoveColumnField: removeColumnField,
+              onAddValueField: addValueField,
+              onRemoveValueField: removeValueField,
+              onUpdateAggregation: updateValueFieldAggregation,
+              onReorderRowFields: setRowFields,
+              onReorderColumnFields: setColumnFields
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "vpg-footer", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "vpg-footer-left", children: viewMode === "grid" ? enablePagination ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { children: [
+              ((currentPage - 1) * pageSize + 1).toLocaleString(),
+              "-",
+              Math.min(currentPage * pageSize, totalSearchedRows).toLocaleString()
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "vpg-separator", children: "of" }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: totalSearchedRows.toLocaleString() }),
+            totalSearchedRows !== totalRowCount && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "vpg-filtered-note", children: [
+              "(",
+              totalRowCount.toLocaleString(),
+              " total)"
+            ] })
+          ] }) : filteredRowCount === totalRowCount && totalSearchedRows === totalRowCount ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { children: [
+            totalRowCount.toLocaleString(),
+            " records"
+          ] }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "vpg-filtered-count", children: totalSearchedRows.toLocaleString() }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "vpg-separator", children: "of" }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: totalRowCount.toLocaleString() }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "vpg-separator", children: "records" })
+          ] }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "vpg-pivot-label", children: "Pivot Table" }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "vpg-separator", children: "\u2022" }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { children: [
+              totalRowCount.toLocaleString(),
+              " source records"
+            ] })
+          ] }) }),
+          enablePagination && viewMode === "grid" && totalPages > 1 && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "vpg-pagination", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              "button",
+              {
+                className: "vpg-page-btn",
+                disabled: currentPage === 1,
+                onClick: () => setCurrentPage(1),
+                children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { className: "vpg-icon-sm", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                  "path",
+                  {
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    strokeWidth: 2,
+                    d: "M11 19l-7-7 7-7m8 14l-7-7 7-7"
+                  }
+                ) })
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              "button",
+              {
+                className: "vpg-page-btn",
+                disabled: currentPage === 1,
+                onClick: () => setCurrentPage((p) => Math.max(1, p - 1)),
+                children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { className: "vpg-icon-sm", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                  "path",
+                  {
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    strokeWidth: 2,
+                    d: "M15 19l-7-7 7-7"
+                  }
+                ) })
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "vpg-page-info", children: [
+              "Page ",
+              currentPage,
+              " of ",
+              totalPages
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              "button",
+              {
+                className: "vpg-page-btn",
+                disabled: currentPage === totalPages,
+                onClick: () => setCurrentPage((p) => Math.min(totalPages, p + 1)),
+                children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { className: "vpg-icon-sm", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                  "path",
+                  {
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    strokeWidth: 2,
+                    d: "M9 5l7 7-7 7"
+                  }
+                ) })
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              "button",
+              {
+                className: "vpg-page-btn",
+                disabled: currentPage === totalPages,
+                onClick: () => setCurrentPage(totalPages),
+                children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { className: "vpg-icon-sm", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                  "path",
+                  {
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    strokeWidth: 2,
+                    d: "M13 5l7 7-7 7M5 5l7 7-7 7"
+                  }
+                ) })
+              }
+            )
+          ] }),
+          viewMode === "grid" && selectionStats && selectionStats.count > 1 && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "vpg-selection-stats", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "vpg-stat", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "vpg-stat-label", children: "Count:" }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "vpg-stat-value", children: selectionStats.count })
+            ] }),
+            selectionStats.numericCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "vpg-stat-divider", children: "|" }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "vpg-stat", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "vpg-stat-label", children: "Sum:" }),
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "vpg-stat-value", children: formatStatValue(selectionStats.sum) })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "vpg-stat-divider", children: "|" }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "vpg-stat", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "vpg-stat-label", children: "Avg:" }),
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "vpg-stat-value", children: formatStatValue(selectionStats.avg) })
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "vpg-footer-right", children: isDemo ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "vpg-demo-banner", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "vpg-demo-badge", children: "DEMO" }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: "Pro features enabled" }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("a", { href: "https://tiny-pivot.com/#pricing", target: "_blank", rel: "noopener noreferrer", children: "Get License \u2192" })
+          ] }) : showWatermark ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "vpg-watermark-inline", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("a", { href: "https://tiny-pivot.com", target: "_blank", rel: "noopener noreferrer", children: "TinyPivot" }) }) : null })
+        ] }),
+        enableVerticalResize && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "vpg-vertical-resize-handle", onMouseDown: startVerticalResize, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "vpg-resize-grip", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", {}),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", {}),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", {})
+        ] }) }),
+        activeFilterColumn && (0, import_react_dom.createPortal)(
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            "div",
+            {
+              className: "vpg-filter-portal",
+              style: {
+                position: "fixed",
+                top: `${filterDropdownPosition.top}px`,
+                left: `${filterDropdownPosition.left}px`,
+                maxHeight: `${filterDropdownPosition.maxHeight}px`,
+                zIndex: 9999
+              },
+              children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                ColumnFilter,
+                {
+                  columnId: activeFilterColumn,
+                  columnName: activeFilterColumn,
+                  stats: getColumnStats(activeFilterColumn),
+                  selectedValues: getColumnFilterValues(activeFilterColumn),
+                  sortDirection: getSortDirection(activeFilterColumn),
+                  onFilter: (values) => handleFilter(activeFilterColumn, values),
+                  onSort: (dir) => handleSort(activeFilterColumn, dir),
+                  onClose: closeFilterDropdown
+                }
+              )
+            }
+          ),
+          document.body
+        )
+      ]
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ColumnFilter,
+  DataGrid,
+  PivotConfig,
+  PivotSkeleton,
+  configureLicenseSecret,
+  copyToClipboard,
+  enableDemoMode,
+  exportPivotToCSV,
+  exportToCSV,
+  formatCellValue,
+  formatSelectionForClipboard,
+  getAggregationLabel,
+  getColumnUniqueValues,
+  setLicenseKey,
+  useColumnResize,
+  useExcelGrid,
+  useGlobalSearch,
+  useLicense,
+  usePagination,
+  usePivotTable,
+  useRowSelection
+});
+//# sourceMappingURL=index.cjs.map