@smallwebco/tinypivot-react 1.0.29 → 1.0.31

package/dist/index.js

@@ -1,5 +1,5 @@
 // src/components/DataGrid.tsx
-import { useState as useState9, useMemo as useMemo9, useCallback as useCallback9, useEffect as useEffect6, useRef as useRef2 } from "react";
+import { useState as useState10, useMemo as useMemo10, useCallback as useCallback10, useEffect as useEffect7, useRef as useRef2 } from "react";
 import { createPortal as createPortal2 } from "react-dom";
 
 // src/hooks/useExcelGrid.ts
@@ -10,14 +10,27 @@ import {
   getFilteredRowModel,
   getSortedRowModel
 } from "@tanstack/react-table";
-import { getColumnUniqueValues, formatCellValue } from "@smallwebco/tinypivot-core";
+import { getColumnUniqueValues, formatCellValue, isNumericRange } from "@smallwebco/tinypivot-core";
 var multiSelectFilter = (row, columnId, filterValue) => {
-  if (!filterValue || !Array.isArray(filterValue) || filterValue.length === 0) {
+  if (!filterValue) return true;
+  if (isNumericRange(filterValue)) {
+    const cellValue = row.getValue(columnId);
+    if (cellValue === null || cellValue === void 0 || cellValue === "") {
+      return false;
+    }
+    const num = typeof cellValue === "number" ? cellValue : Number.parseFloat(String(cellValue));
+    if (Number.isNaN(num)) return false;
+    const { min, max } = filterValue;
+    if (min !== null && num < min) return false;
+    if (max !== null && num > max) return false;
     return true;
   }
-  const cellValue = row.getValue(columnId);
-  const cellString = cellValue === null || cellValue === void 0 || cellValue === "" ? "(blank)" : String(cellValue);
-  return filterValue.includes(cellString);
+  if (Array.isArray(filterValue) && filterValue.length > 0) {
+    const cellValue = row.getValue(columnId);
+    const cellString = cellValue === null || cellValue === void 0 || cellValue === "" ? "(blank)" : String(cellValue);
+    return filterValue.includes(cellString);
+  }
+  return true;
 };
 function useExcelGrid(options) {
   const { data, enableSorting = true, enableFiltering = true } = options;
@@ -103,7 +116,11 @@ function useExcelGrid(options) {
       const column = table.getColumn(columnId);
       if (!column) return false;
       const filterValue = column.getFilterValue();
-      return filterValue !== void 0 && Array.isArray(filterValue) && filterValue.length > 0;
+      if (!filterValue) return false;
+      if (isNumericRange(filterValue)) {
+        return filterValue.min !== null || filterValue.max !== null;
+      }
+      return Array.isArray(filterValue) && filterValue.length > 0;
     },
     [table]
   );
@@ -116,6 +133,31 @@ function useExcelGrid(options) {
     },
     [table]
   );
+  const setNumericRangeFilter = useCallback(
+    (columnId, range) => {
+      const column = table.getColumn(columnId);
+      if (column) {
+        if (!range || range.min === null && range.max === null) {
+          column.setFilterValue(void 0);
+        } else {
+          column.setFilterValue(range);
+        }
+      }
+    },
+    [table]
+  );
+  const getNumericRangeFilter = useCallback(
+    (columnId) => {
+      const column = table.getColumn(columnId);
+      if (!column) return null;
+      const filterValue = column.getFilterValue();
+      if (filterValue && isNumericRange(filterValue)) {
+        return filterValue;
+      }
+      return null;
+    },
+    [table]
+  );
   const clearAllFilters = useCallback(() => {
     table.resetColumnFilters();
     setGlobalFilter("");
@@ -174,7 +216,10 @@ function useExcelGrid(options) {
     getColumnFilterValues,
     clearAllFilters,
     toggleSort,
-    getSortDirection
+    getSortDirection,
+    // Numeric range filters
+    setNumericRangeFilter,
+    getNumericRangeFilter
   };
 }
 
@@ -738,40 +783,286 @@ function useColumnResize(initialWidths, minWidth = 60, maxWidth = 600) {
 }
 
 // src/components/ColumnFilter.tsx
-import { useState as useState5, useEffect as useEffect3, useRef, useCallback as useCallback5, useMemo as useMemo5 } from "react";
+import { useState as useState6, useEffect as useEffect4, useRef, useCallback as useCallback6, useMemo as useMemo6 } from "react";
+
+// src/components/NumericRangeFilter.tsx
+import { useState as useState5, useCallback as useCallback5, useMemo as useMemo5, useEffect as useEffect3 } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+function NumericRangeFilter({
+  dataMin,
+  dataMax,
+  currentRange,
+  onChange
+}) {
+  const [localMin, setLocalMin] = useState5(currentRange?.min ?? null);
+  const [localMax, setLocalMax] = useState5(currentRange?.max ?? null);
+  const step = useMemo5(() => {
+    const range = dataMax - dataMin;
+    if (range === 0) return 1;
+    if (range <= 1) return 0.01;
+    if (range <= 10) return 0.1;
+    if (range <= 100) return 1;
+    if (range <= 1e3) return 10;
+    return Math.pow(10, Math.floor(Math.log10(range)) - 2);
+  }, [dataMin, dataMax]);
+  const formatValue = useCallback5((val) => {
+    if (val === null) return "";
+    if (Number.isInteger(val)) return val.toLocaleString();
+    return val.toLocaleString(void 0, { maximumFractionDigits: 2 });
+  }, []);
+  const isFilterActive = localMin !== null || localMax !== null;
+  const minPercent = useMemo5(() => {
+    if (localMin === null || dataMax === dataMin) return 0;
+    return (localMin - dataMin) / (dataMax - dataMin) * 100;
+  }, [localMin, dataMin, dataMax]);
+  const maxPercent = useMemo5(() => {
+    if (localMax === null || dataMax === dataMin) return 100;
+    return (localMax - dataMin) / (dataMax - dataMin) * 100;
+  }, [localMax, dataMin, dataMax]);
+  const handleMinSlider = useCallback5((event) => {
+    const value = Number.parseFloat(event.target.value);
+    setLocalMin((prev) => {
+      if (localMax !== null && value > localMax) {
+        return localMax;
+      }
+      return value;
+    });
+  }, [localMax]);
+  const handleMaxSlider = useCallback5((event) => {
+    const value = Number.parseFloat(event.target.value);
+    setLocalMax((prev) => {
+      if (localMin !== null && value < localMin) {
+        return localMin;
+      }
+      return value;
+    });
+  }, [localMin]);
+  const handleSliderChange = useCallback5(() => {
+    if (localMin === null && localMax === null) {
+      onChange(null);
+    } else {
+      onChange({ min: localMin, max: localMax });
+    }
+  }, [localMin, localMax, onChange]);
+  const handleMinInput = useCallback5((event) => {
+    const value = event.target.value === "" ? null : Number.parseFloat(event.target.value);
+    if (value !== null && !Number.isNaN(value)) {
+      setLocalMin(Math.max(dataMin, Math.min(value, localMax ?? dataMax)));
+    } else if (value === null) {
+      setLocalMin(null);
+    }
+  }, [dataMin, dataMax, localMax]);
+  const handleMaxInput = useCallback5((event) => {
+    const value = event.target.value === "" ? null : Number.parseFloat(event.target.value);
+    if (value !== null && !Number.isNaN(value)) {
+      setLocalMax(Math.min(dataMax, Math.max(value, localMin ?? dataMin)));
+    } else if (value === null) {
+      setLocalMax(null);
+    }
+  }, [dataMin, dataMax, localMin]);
+  const handleInputBlur = useCallback5(() => {
+    if (localMin === null && localMax === null) {
+      onChange(null);
+    } else {
+      onChange({ min: localMin, max: localMax });
+    }
+  }, [localMin, localMax, onChange]);
+  const clearFilter = useCallback5(() => {
+    setLocalMin(null);
+    setLocalMax(null);
+    onChange(null);
+  }, [onChange]);
+  const setFullRange = useCallback5(() => {
+    setLocalMin(dataMin);
+    setLocalMax(dataMax);
+    onChange({ min: dataMin, max: dataMax });
+  }, [dataMin, dataMax, onChange]);
+  useEffect3(() => {
+    setLocalMin(currentRange?.min ?? null);
+    setLocalMax(currentRange?.max ?? null);
+  }, [currentRange]);
+  return /* @__PURE__ */ jsxs("div", { className: "vpg-range-filter", children: [
+    /* @__PURE__ */ jsxs("div", { className: "vpg-range-info", children: [
+      /* @__PURE__ */ jsx("span", { className: "vpg-range-label", children: "Data range:" }),
+      /* @__PURE__ */ jsxs("span", { className: "vpg-range-bounds", children: [
+        formatValue(dataMin),
+        " \u2013 ",
+        formatValue(dataMax)
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "vpg-slider-container", children: [
+      /* @__PURE__ */ jsx("div", { className: "vpg-slider-track", children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "vpg-slider-fill",
+          style: {
+            left: `${minPercent}%`,
+            right: `${100 - maxPercent}%`
+          }
+        }
+      ) }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "range",
+          className: "vpg-slider vpg-slider-min",
+          min: dataMin,
+          max: dataMax,
+          step,
+          value: localMin ?? dataMin,
+          onChange: handleMinSlider,
+          onMouseUp: handleSliderChange,
+          onTouchEnd: handleSliderChange
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "range",
+          className: "vpg-slider vpg-slider-max",
+          min: dataMin,
+          max: dataMax,
+          step,
+          value: localMax ?? dataMax,
+          onChange: handleMaxSlider,
+          onMouseUp: handleSliderChange,
+          onTouchEnd: handleSliderChange
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "vpg-range-inputs", children: [
+      /* @__PURE__ */ jsxs("div", { className: "vpg-input-group", children: [
+        /* @__PURE__ */ jsx("label", { className: "vpg-input-label", children: "Min" }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "number",
+            className: "vpg-range-input",
+            placeholder: formatValue(dataMin),
+            value: localMin ?? "",
+            step,
+            onChange: handleMinInput,
+            onBlur: handleInputBlur
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx("span", { className: "vpg-input-separator", children: "to" }),
+      /* @__PURE__ */ jsxs("div", { className: "vpg-input-group", children: [
+        /* @__PURE__ */ jsx("label", { className: "vpg-input-label", children: "Max" }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "number",
+            className: "vpg-range-input",
+            placeholder: formatValue(dataMax),
+            value: localMax ?? "",
+            step,
+            onChange: handleMaxInput,
+            onBlur: handleInputBlur
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "vpg-range-actions", children: [
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          className: "vpg-range-btn",
+          disabled: !isFilterActive,
+          onClick: clearFilter,
+          children: [
+            /* @__PURE__ */ jsx("svg", { className: "vpg-icon-xs", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx(
+              "path",
+              {
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeWidth: 2,
+                d: "M6 18L18 6M6 6l12 12"
+              }
+            ) }),
+            "Clear"
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs("button", { className: "vpg-range-btn", onClick: setFullRange, children: [
+        /* @__PURE__ */ jsx("svg", { className: "vpg-icon-xs", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx(
+          "path",
+          {
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            strokeWidth: 2,
+            d: "M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4"
+          }
+        ) }),
+        "Full Range"
+      ] })
+    ] }),
+    isFilterActive && /* @__PURE__ */ jsxs("div", { className: "vpg-filter-summary", children: [
+      /* @__PURE__ */ jsx("svg", { className: "vpg-icon-xs", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ 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__ */ jsxs("span", { children: [
+        "Showing values",
+        " ",
+        localMin !== null && /* @__PURE__ */ jsxs("strong", { children: [
+          "\u2265 ",
+          formatValue(localMin)
+        ] }),
+        localMin !== null && localMax !== null && " and ",
+        localMax !== null && /* @__PURE__ */ jsxs("strong", { children: [
+          "\u2264 ",
+          formatValue(localMax)
+        ] })
+      ] })
+    ] })
+  ] });
+}
+
+// src/components/ColumnFilter.tsx
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 function ColumnFilter({
   columnName,
   stats,
   selectedValues,
   sortDirection,
+  numericRange,
   onFilter,
   onSort,
-  onClose
+  onClose,
+  onRangeFilter
 }) {
-  const [searchQuery, setSearchQuery] = useState5("");
-  const [localSelected, setLocalSelected] = useState5(new Set(selectedValues));
+  const [searchQuery, setSearchQuery] = useState6("");
+  const [localSelected, setLocalSelected] = useState6(new Set(selectedValues));
   const dropdownRef = useRef(null);
   const searchInputRef = useRef(null);
+  const isNumericColumn = stats.type === "number" && stats.numericMin !== void 0 && stats.numericMax !== void 0;
+  const [filterMode, setFilterMode] = useState6(numericRange ? "range" : "values");
+  const [localRange, setLocalRange] = useState6(numericRange ?? null);
   const hasBlankValues = stats.nullCount > 0;
-  const filteredValues = useMemo5(() => {
+  const filteredValues = useMemo6(() => {
     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 = useMemo5(() => {
+  const allValues = useMemo6(() => {
     const values = [...filteredValues];
     if (hasBlankValues && (!searchQuery || "(blank)".includes(searchQuery.toLowerCase()))) {
       values.unshift("(blank)");
     }
     return values;
   }, [filteredValues, hasBlankValues, searchQuery]);
-  const isAllSelected = useMemo5(
+  const isAllSelected = useMemo6(
     () => allValues.every((v) => localSelected.has(v)),
     [allValues, localSelected]
   );
-  const toggleValue = useCallback5((value) => {
+  const toggleValue = useCallback6((value) => {
     setLocalSelected((prev) => {
       const next = new Set(prev);
       if (next.has(value)) {
@@ -782,7 +1073,7 @@ function ColumnFilter({
       return next;
     });
   }, []);
-  const selectAll = useCallback5(() => {
+  const selectAll = useCallback6(() => {
     setLocalSelected((prev) => {
       const next = new Set(prev);
       for (const value of allValues) {
@@ -791,10 +1082,10 @@ function ColumnFilter({
       return next;
     });
   }, [allValues]);
-  const clearAll = useCallback5(() => {
+  const clearAll = useCallback6(() => {
     setLocalSelected(/* @__PURE__ */ new Set());
   }, []);
-  const applyFilter = useCallback5(() => {
+  const applyFilter = useCallback6(() => {
     if (localSelected.size === 0) {
       onFilter([]);
     } else {
@@ -802,18 +1093,30 @@ function ColumnFilter({
     }
     onClose();
   }, [localSelected, onFilter, onClose]);
-  const sortAscending = useCallback5(() => {
+  const sortAscending = useCallback6(() => {
     onSort(sortDirection === "asc" ? null : "asc");
   }, [sortDirection, onSort]);
-  const sortDescending = useCallback5(() => {
+  const sortDescending = useCallback6(() => {
     onSort(sortDirection === "desc" ? null : "desc");
   }, [sortDirection, onSort]);
-  const clearFilter = useCallback5(() => {
+  const clearFilter = useCallback6(() => {
     setLocalSelected(/* @__PURE__ */ new Set());
     onFilter([]);
     onClose();
   }, [onFilter, onClose]);
-  useEffect3(() => {
+  const handleRangeChange = useCallback6((range) => {
+    setLocalRange(range);
+  }, []);
+  const applyRangeFilter = useCallback6(() => {
+    onRangeFilter?.(localRange);
+    onClose();
+  }, [localRange, onRangeFilter, onClose]);
+  const clearRangeFilter = useCallback6(() => {
+    setLocalRange(null);
+    onRangeFilter?.(null);
+    onClose();
+  }, [onRangeFilter, onClose]);
+  useEffect4(() => {
     const handleClickOutside = (event) => {
       if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
         onClose();
@@ -822,7 +1125,7 @@ function ColumnFilter({
     document.addEventListener("mousedown", handleClickOutside);
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, [onClose]);
-  useEffect3(() => {
+  useEffect4(() => {
     const handleKeydown = (event) => {
       if (event.key === "Escape") {
         onClose();
@@ -833,29 +1136,35 @@ function ColumnFilter({
     document.addEventListener("keydown", handleKeydown);
     return () => document.removeEventListener("keydown", handleKeydown);
   }, [onClose, applyFilter]);
-  useEffect3(() => {
+  useEffect4(() => {
     searchInputRef.current?.focus();
   }, []);
-  useEffect3(() => {
+  useEffect4(() => {
     setLocalSelected(new Set(selectedValues));
   }, [selectedValues]);
-  return /* @__PURE__ */ jsxs("div", { ref: dropdownRef, className: "vpg-filter-dropdown", children: [
-    /* @__PURE__ */ jsxs("div", { className: "vpg-filter-header", children: [
-      /* @__PURE__ */ jsx("span", { className: "vpg-filter-title", children: columnName }),
-      /* @__PURE__ */ jsxs("span", { className: "vpg-filter-count", children: [
+  useEffect4(() => {
+    setLocalRange(numericRange ?? null);
+    if (numericRange) {
+      setFilterMode("range");
+    }
+  }, [numericRange]);
+  return /* @__PURE__ */ jsxs2("div", { ref: dropdownRef, className: "vpg-filter-dropdown", children: [
+    /* @__PURE__ */ jsxs2("div", { className: "vpg-filter-header", children: [
+      /* @__PURE__ */ jsx2("span", { className: "vpg-filter-title", children: columnName }),
+      /* @__PURE__ */ jsxs2("span", { className: "vpg-filter-count", children: [
         stats.uniqueValues.length.toLocaleString(),
         " unique"
       ] })
     ] }),
-    /* @__PURE__ */ jsxs("div", { className: "vpg-sort-controls", children: [
-      /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ jsxs2("div", { className: "vpg-sort-controls", children: [
+      /* @__PURE__ */ jsxs2(
         "button",
         {
           className: `vpg-sort-btn ${sortDirection === "asc" ? "active" : ""}`,
-          title: "Sort A to Z",
+          title: isNumericColumn ? "Sort Low to High" : "Sort A to Z",
           onClick: sortAscending,
           children: [
-            /* @__PURE__ */ jsx("svg", { className: "vpg-icon-sm", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx(
+            /* @__PURE__ */ jsx2("svg", { className: "vpg-icon-sm", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx2(
               "path",
               {
                 strokeLinecap: "round",
@@ -864,18 +1173,18 @@ function ColumnFilter({
                 d: "M3 4h13M3 8h9m-9 4h6m4 0l4-4m0 0l4 4m-4-4v12"
               }
             ) }),
-            /* @__PURE__ */ jsx("span", { children: "A\u2192Z" })
+            /* @__PURE__ */ jsx2("span", { children: isNumericColumn ? "1\u21929" : "A\u2192Z" })
           ]
         }
       ),
-      /* @__PURE__ */ jsxs(
+      /* @__PURE__ */ jsxs2(
         "button",
         {
           className: `vpg-sort-btn ${sortDirection === "desc" ? "active" : ""}`,
-          title: "Sort Z to A",
+          title: isNumericColumn ? "Sort High to Low" : "Sort Z to A",
           onClick: sortDescending,
           children: [
-            /* @__PURE__ */ jsx("svg", { className: "vpg-icon-sm", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx(
+            /* @__PURE__ */ jsx2("svg", { className: "vpg-icon-sm", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx2(
               "path",
               {
                 strokeLinecap: "round",
@@ -884,99 +1193,156 @@ function ColumnFilter({
                 d: "M3 4h13M3 8h9m-9 4h9m5-4v12m0 0l-4-4m4 4l4-4"
               }
             ) }),
-            /* @__PURE__ */ jsx("span", { children: "Z\u2192A" })
+            /* @__PURE__ */ jsx2("span", { children: isNumericColumn ? "9\u21921" : "Z\u2192A" })
           ]
         }
       )
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "vpg-divider" }),
-    /* @__PURE__ */ jsxs("div", { className: "vpg-search-container", children: [
-      /* @__PURE__ */ jsx("svg", { className: "vpg-search-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx(
-        "path",
+    /* @__PURE__ */ jsx2("div", { className: "vpg-divider" }),
+    isNumericColumn && /* @__PURE__ */ jsxs2("div", { className: "vpg-filter-tabs", children: [
+      /* @__PURE__ */ jsxs2(
+        "button",
         {
-          strokeLinecap: "round",
-          strokeLinejoin: "round",
-          strokeWidth: 2,
-          d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+          className: `vpg-tab-btn ${filterMode === "values" ? "active" : ""}`,
+          onClick: () => setFilterMode("values"),
+          children: [
+            /* @__PURE__ */ jsx2("svg", { className: "vpg-icon-sm", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx2(
+              "path",
+              {
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeWidth: 2,
+                d: "M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"
+              }
+            ) }),
+            "Values"
+          ]
         }
-      ) }),
-      /* @__PURE__ */ jsx(
-        "input",
+      ),
+      /* @__PURE__ */ jsxs2(
+        "button",
         {
-          ref: searchInputRef,
-          type: "text",
-          value: searchQuery,
-          onChange: (e) => setSearchQuery(e.target.value),
-          placeholder: "Search values...",
-          className: "vpg-search-input"
+          className: `vpg-tab-btn ${filterMode === "range" ? "active" : ""}`,
+          onClick: () => setFilterMode("range"),
+          children: [
+            /* @__PURE__ */ jsx2("svg", { className: "vpg-icon-sm", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx2(
+              "path",
+              {
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeWidth: 2,
+                d: "M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01"
+              }
+            ) }),
+            "Range"
+          ]
         }
-      ),
-      searchQuery && /* @__PURE__ */ jsx("button", { className: "vpg-clear-search", onClick: () => setSearchQuery(""), children: "\xD7" })
+      )
     ] }),
-    /* @__PURE__ */ jsxs("div", { className: "vpg-bulk-actions", children: [
-      /* @__PURE__ */ jsxs("button", { className: "vpg-bulk-btn", onClick: selectAll, children: [
-        /* @__PURE__ */ jsx("svg", { className: "vpg-icon-sm", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx(
+    (!isNumericColumn || filterMode === "values") && /* @__PURE__ */ jsxs2(Fragment, { children: [
+      /* @__PURE__ */ jsxs2("div", { className: "vpg-search-container", children: [
+        /* @__PURE__ */ jsx2("svg", { className: "vpg-search-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx2(
           "path",
           {
             strokeLinecap: "round",
             strokeLinejoin: "round",
             strokeWidth: 2,
-            d: "M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
+            d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
           }
         ) }),
-        "Select All"
-      ] }),
-      /* @__PURE__ */ jsxs("button", { className: "vpg-bulk-btn", onClick: clearAll, children: [
-        /* @__PURE__ */ jsx("svg", { className: "vpg-icon-sm", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx(
-          "path",
+        /* @__PURE__ */ jsx2(
+          "input",
           {
-            strokeLinecap: "round",
-            strokeLinejoin: "round",
-            strokeWidth: 2,
-            d: "M6 18L18 6M6 6l12 12"
+            ref: searchInputRef,
+            type: "text",
+            value: searchQuery,
+            onChange: (e) => setSearchQuery(e.target.value),
+            placeholder: "Search values...",
+            className: "vpg-search-input"
           }
-        ) }),
-        "Clear All"
+        ),
+        searchQuery && /* @__PURE__ */ jsx2("button", { className: "vpg-clear-search", onClick: () => setSearchQuery(""), children: "\xD7" })
+      ] }),
+      /* @__PURE__ */ jsxs2("div", { className: "vpg-bulk-actions", children: [
+        /* @__PURE__ */ jsxs2("button", { className: "vpg-bulk-btn", onClick: selectAll, children: [
+          /* @__PURE__ */ jsx2("svg", { className: "vpg-icon-sm", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx2(
+            "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__ */ jsxs2("button", { className: "vpg-bulk-btn", onClick: clearAll, children: [
+          /* @__PURE__ */ jsx2("svg", { className: "vpg-icon-sm", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx2(
+            "path",
+            {
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              strokeWidth: 2,
+              d: "M6 18L18 6M6 6l12 12"
+            }
+          ) }),
+          "Clear All"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs2("div", { className: "vpg-values-list", children: [
+        allValues.map((value) => /* @__PURE__ */ jsxs2(
+          "label",
+          {
+            className: `vpg-value-item ${localSelected.has(value) ? "selected" : ""}`,
+            children: [
+              /* @__PURE__ */ jsx2(
+                "input",
+                {
+                  type: "checkbox",
+                  checked: localSelected.has(value),
+                  onChange: () => toggleValue(value),
+                  className: "vpg-value-checkbox"
+                }
+              ),
+              /* @__PURE__ */ jsx2("span", { className: `vpg-value-text ${value === "(blank)" ? "vpg-blank" : ""}`, children: value })
+            ]
+          },
+          value
+        )),
+        allValues.length === 0 && /* @__PURE__ */ jsx2("div", { className: "vpg-no-results", children: "No matching values" })
+      ] }),
+      /* @__PURE__ */ jsxs2("div", { className: "vpg-filter-footer", children: [
+        /* @__PURE__ */ jsx2("button", { className: "vpg-btn-clear", onClick: clearFilter, children: "Clear Filter" }),
+        /* @__PURE__ */ jsx2("button", { className: "vpg-btn-apply", onClick: applyFilter, children: "Apply" })
       ] })
     ] }),
-    /* @__PURE__ */ jsxs("div", { className: "vpg-values-list", children: [
-      allValues.map((value) => /* @__PURE__ */ jsxs(
-        "label",
+    isNumericColumn && filterMode === "range" && /* @__PURE__ */ jsxs2(Fragment, { children: [
+      /* @__PURE__ */ jsx2(
+        NumericRangeFilter,
         {
-          className: `vpg-value-item ${localSelected.has(value) ? "selected" : ""}`,
-          children: [
-            /* @__PURE__ */ jsx(
-              "input",
-              {
-                type: "checkbox",
-                checked: localSelected.has(value),
-                onChange: () => toggleValue(value),
-                className: "vpg-value-checkbox"
-              }
-            ),
-            /* @__PURE__ */ jsx("span", { className: `vpg-value-text ${value === "(blank)" ? "vpg-blank" : ""}`, children: value })
-          ]
-        },
-        value
-      )),
-      allValues.length === 0 && /* @__PURE__ */ jsx("div", { className: "vpg-no-results", children: "No matching values" })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: "vpg-filter-footer", children: [
-      /* @__PURE__ */ jsx("button", { className: "vpg-btn-clear", onClick: clearFilter, children: "Clear Filter" }),
-      /* @__PURE__ */ jsx("button", { className: "vpg-btn-apply", onClick: applyFilter, children: "Apply" })
+          dataMin: stats.numericMin,
+          dataMax: stats.numericMax,
+          currentRange: localRange,
+          onChange: handleRangeChange
+        }
+      ),
+      /* @__PURE__ */ jsxs2("div", { className: "vpg-filter-footer", children: [
+        /* @__PURE__ */ jsx2("button", { className: "vpg-btn-clear", onClick: clearRangeFilter, children: "Clear Filter" }),
+        /* @__PURE__ */ jsx2("button", { className: "vpg-btn-apply", onClick: applyRangeFilter, children: "Apply" })
+      ] })
     ] })
   ] });
 }
 
 // src/components/PivotConfig.tsx
-import { useState as useState7, useMemo as useMemo7, useCallback as useCallback7 } from "react";
+import { useState as useState8, useMemo as useMemo8, useCallback as useCallback8 } from "react";
 import { AGGREGATION_OPTIONS, getAggregationSymbol } from "@smallwebco/tinypivot-core";
 
 // src/components/CalculatedFieldModal.tsx
-import { useState as useState6, useEffect as useEffect4, useMemo as useMemo6, useCallback as useCallback6 } from "react";
+import { useState as useState7, useEffect as useEffect5, useMemo as useMemo7, useCallback as useCallback7 } from "react";
 import { createPortal } from "react-dom";
 import { validateSimpleFormula } from "@smallwebco/tinypivot-core";
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 function CalculatedFieldModal({
   show,
   availableFields,
@@ -984,12 +1350,12 @@ function CalculatedFieldModal({
   onClose,
   onSave
 }) {
-  const [name, setName] = useState6("");
-  const [formula, setFormula] = useState6("");
-  const [formatAs, setFormatAs] = useState6("number");
-  const [decimals, setDecimals] = useState6(2);
-  const [error, setError] = useState6(null);
-  useEffect4(() => {
+  const [name, setName] = useState7("");
+  const [formula, setFormula] = useState7("");
+  const [formatAs, setFormatAs] = useState7("number");
+  const [decimals, setDecimals] = useState7(2);
+  const [error, setError] = useState7(null);
+  useEffect5(() => {
     if (show) {
       if (existingField) {
         setName(existingField.name);
@@ -1005,11 +1371,11 @@ function CalculatedFieldModal({
       setError(null);
     }
   }, [show, existingField]);
-  const validationError = useMemo6(() => {
+  const validationError = useMemo7(() => {
     if (!formula.trim()) return null;
     return validateSimpleFormula(formula, availableFields);
   }, [formula, availableFields]);
-  const insertField = useCallback6((field) => {
+  const insertField = useCallback7((field) => {
     setFormula((prev) => {
       if (prev.trim() && !prev.endsWith(" ")) {
         return prev + " " + field;
@@ -1017,7 +1383,7 @@ function CalculatedFieldModal({
       return prev + field;
     });
   }, []);
-  const insertOperator = useCallback6((op) => {
+  const insertOperator = useCallback7((op) => {
     setFormula((prev) => {
       if (prev.trim() && !prev.endsWith(" ")) {
         return prev + " " + op + " ";
@@ -1025,7 +1391,7 @@ function CalculatedFieldModal({
       return prev + op + " ";
     });
   }, []);
-  const handleSave = useCallback6(() => {
+  const handleSave = useCallback7(() => {
     if (!name.trim()) {
       setError("Name is required");
       return;
@@ -1045,24 +1411,24 @@ function CalculatedFieldModal({
     onSave(field);
     onClose();
   }, [name, formula, formatAs, decimals, existingField, availableFields, onSave, onClose]);
-  const handleOverlayClick = useCallback6((e) => {
+  const handleOverlayClick = useCallback7((e) => {
     if (e.target === e.currentTarget) {
       onClose();
     }
   }, [onClose]);
   if (!show) return null;
-  const modalContent = /* @__PURE__ */ jsx2("div", { className: "vpg-modal-overlay", onClick: handleOverlayClick, children: /* @__PURE__ */ jsxs2("div", { className: "vpg-modal", children: [
-    /* @__PURE__ */ jsxs2("div", { className: "vpg-modal-header", children: [
-      /* @__PURE__ */ jsxs2("h3", { children: [
+  const modalContent = /* @__PURE__ */ jsx3("div", { className: "vpg-modal-overlay", onClick: handleOverlayClick, children: /* @__PURE__ */ jsxs3("div", { className: "vpg-modal", children: [
+    /* @__PURE__ */ jsxs3("div", { className: "vpg-modal-header", children: [
+      /* @__PURE__ */ jsxs3("h3", { children: [
         existingField ? "Edit" : "Create",
         " Calculated Field"
       ] }),
-      /* @__PURE__ */ jsx2("button", { className: "vpg-modal-close", onClick: onClose, children: "\xD7" })
+      /* @__PURE__ */ jsx3("button", { className: "vpg-modal-close", onClick: onClose, children: "\xD7" })
     ] }),
-    /* @__PURE__ */ jsxs2("div", { className: "vpg-modal-body", children: [
-      /* @__PURE__ */ jsxs2("div", { className: "vpg-form-group", children: [
-        /* @__PURE__ */ jsx2("label", { className: "vpg-label", children: "Name" }),
-        /* @__PURE__ */ jsx2(
+    /* @__PURE__ */ jsxs3("div", { className: "vpg-modal-body", children: [
+      /* @__PURE__ */ jsxs3("div", { className: "vpg-form-group", children: [
+        /* @__PURE__ */ jsx3("label", { className: "vpg-label", children: "Name" }),
+        /* @__PURE__ */ jsx3(
           "input",
           {
             type: "text",
@@ -1073,9 +1439,9 @@ function CalculatedFieldModal({
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs2("div", { className: "vpg-form-group", children: [
-        /* @__PURE__ */ jsx2("label", { className: "vpg-label", children: "Formula" }),
-        /* @__PURE__ */ jsx2(
+      /* @__PURE__ */ jsxs3("div", { className: "vpg-form-group", children: [
+        /* @__PURE__ */ jsx3("label", { className: "vpg-label", children: "Formula" }),
+        /* @__PURE__ */ jsx3(
           "textarea",
           {
             className: "vpg-textarea",
@@ -1085,23 +1451,23 @@ function CalculatedFieldModal({
             onChange: (e) => setFormula(e.target.value)
           }
         ),
-        /* @__PURE__ */ jsx2("div", { className: "vpg-formula-hint", children: "Use field names with math operators: + - * / ( )" }),
-        validationError && /* @__PURE__ */ jsx2("div", { className: "vpg-error", children: validationError })
+        /* @__PURE__ */ jsx3("div", { className: "vpg-formula-hint", children: "Use field names with math operators: + - * / ( )" }),
+        validationError && /* @__PURE__ */ jsx3("div", { className: "vpg-error", children: validationError })
       ] }),
-      /* @__PURE__ */ jsxs2("div", { className: "vpg-form-group", children: [
-        /* @__PURE__ */ jsx2("label", { className: "vpg-label-small", children: "Operators" }),
-        /* @__PURE__ */ jsxs2("div", { className: "vpg-button-group", children: [
-          /* @__PURE__ */ jsx2("button", { className: "vpg-insert-btn vpg-op-btn", onClick: () => insertOperator("+"), children: "+" }),
-          /* @__PURE__ */ jsx2("button", { className: "vpg-insert-btn vpg-op-btn", onClick: () => insertOperator("-"), children: "\u2212" }),
-          /* @__PURE__ */ jsx2("button", { className: "vpg-insert-btn vpg-op-btn", onClick: () => insertOperator("*"), children: "\xD7" }),
-          /* @__PURE__ */ jsx2("button", { className: "vpg-insert-btn vpg-op-btn", onClick: () => insertOperator("/"), children: "\xF7" }),
-          /* @__PURE__ */ jsx2("button", { className: "vpg-insert-btn vpg-op-btn", onClick: () => insertOperator("("), children: "(" }),
-          /* @__PURE__ */ jsx2("button", { className: "vpg-insert-btn vpg-op-btn", onClick: () => insertOperator(")"), children: ")" })
+      /* @__PURE__ */ jsxs3("div", { className: "vpg-form-group", children: [
+        /* @__PURE__ */ jsx3("label", { className: "vpg-label-small", children: "Operators" }),
+        /* @__PURE__ */ jsxs3("div", { className: "vpg-button-group", children: [
+          /* @__PURE__ */ jsx3("button", { className: "vpg-insert-btn vpg-op-btn", onClick: () => insertOperator("+"), children: "+" }),
+          /* @__PURE__ */ jsx3("button", { className: "vpg-insert-btn vpg-op-btn", onClick: () => insertOperator("-"), children: "\u2212" }),
+          /* @__PURE__ */ jsx3("button", { className: "vpg-insert-btn vpg-op-btn", onClick: () => insertOperator("*"), children: "\xD7" }),
+          /* @__PURE__ */ jsx3("button", { className: "vpg-insert-btn vpg-op-btn", onClick: () => insertOperator("/"), children: "\xF7" }),
+          /* @__PURE__ */ jsx3("button", { className: "vpg-insert-btn vpg-op-btn", onClick: () => insertOperator("("), children: "(" }),
+          /* @__PURE__ */ jsx3("button", { className: "vpg-insert-btn vpg-op-btn", onClick: () => insertOperator(")"), children: ")" })
         ] })
       ] }),
-      /* @__PURE__ */ jsxs2("div", { className: "vpg-form-group", children: [
-        /* @__PURE__ */ jsx2("label", { className: "vpg-label-small", children: "Insert Field" }),
-        availableFields.length > 0 ? /* @__PURE__ */ jsx2("div", { className: "vpg-button-group vpg-field-buttons", children: availableFields.map((field) => /* @__PURE__ */ jsx2(
+      /* @__PURE__ */ jsxs3("div", { className: "vpg-form-group", children: [
+        /* @__PURE__ */ jsx3("label", { className: "vpg-label-small", children: "Insert Field" }),
+        availableFields.length > 0 ? /* @__PURE__ */ jsx3("div", { className: "vpg-button-group vpg-field-buttons", children: availableFields.map((field) => /* @__PURE__ */ jsx3(
           "button",
           {
             className: "vpg-insert-btn vpg-field-btn",
@@ -1109,28 +1475,28 @@ function CalculatedFieldModal({
             children: field
           },
           field
-        )) }) : /* @__PURE__ */ jsx2("div", { className: "vpg-no-fields", children: "No numeric fields available" })
+        )) }) : /* @__PURE__ */ jsx3("div", { className: "vpg-no-fields", children: "No numeric fields available" })
       ] }),
-      /* @__PURE__ */ jsxs2("div", { className: "vpg-form-row", children: [
-        /* @__PURE__ */ jsxs2("div", { className: "vpg-form-group vpg-form-group-half", children: [
-          /* @__PURE__ */ jsx2("label", { className: "vpg-label", children: "Format As" }),
-          /* @__PURE__ */ jsxs2(
+      /* @__PURE__ */ jsxs3("div", { className: "vpg-form-row", children: [
+        /* @__PURE__ */ jsxs3("div", { className: "vpg-form-group vpg-form-group-half", children: [
+          /* @__PURE__ */ jsx3("label", { className: "vpg-label", children: "Format As" }),
+          /* @__PURE__ */ jsxs3(
             "select",
             {
               className: "vpg-select",
               value: formatAs,
               onChange: (e) => setFormatAs(e.target.value),
               children: [
-                /* @__PURE__ */ jsx2("option", { value: "number", children: "Number" }),
-                /* @__PURE__ */ jsx2("option", { value: "percent", children: "Percentage" }),
-                /* @__PURE__ */ jsx2("option", { value: "currency", children: "Currency ($)" })
+                /* @__PURE__ */ jsx3("option", { value: "number", children: "Number" }),
+                /* @__PURE__ */ jsx3("option", { value: "percent", children: "Percentage" }),
+                /* @__PURE__ */ jsx3("option", { value: "currency", children: "Currency ($)" })
               ]
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs2("div", { className: "vpg-form-group vpg-form-group-half", children: [
-          /* @__PURE__ */ jsx2("label", { className: "vpg-label", children: "Decimals" }),
-          /* @__PURE__ */ jsx2(
+        /* @__PURE__ */ jsxs3("div", { className: "vpg-form-group vpg-form-group-half", children: [
+          /* @__PURE__ */ jsx3("label", { className: "vpg-label", children: "Decimals" }),
+          /* @__PURE__ */ jsx3(
             "input",
             {
               type: "number",
@@ -1143,11 +1509,11 @@ function CalculatedFieldModal({
           )
         ] })
       ] }),
-      error && /* @__PURE__ */ jsx2("div", { className: "vpg-error vpg-error-box", children: error })
+      error && /* @__PURE__ */ jsx3("div", { className: "vpg-error vpg-error-box", children: error })
     ] }),
-    /* @__PURE__ */ jsxs2("div", { className: "vpg-modal-footer", children: [
-      /* @__PURE__ */ jsx2("button", { className: "vpg-btn vpg-btn-secondary", onClick: onClose, children: "Cancel" }),
-      /* @__PURE__ */ jsxs2("button", { className: "vpg-btn vpg-btn-primary", onClick: handleSave, children: [
+    /* @__PURE__ */ jsxs3("div", { className: "vpg-modal-footer", children: [
+      /* @__PURE__ */ jsx3("button", { className: "vpg-btn vpg-btn-secondary", onClick: onClose, children: "Cancel" }),
+      /* @__PURE__ */ jsxs3("button", { className: "vpg-btn vpg-btn-primary", onClick: handleSave, children: [
         existingField ? "Update" : "Add",
         " Field"
       ] })
@@ -1157,7 +1523,7 @@ function CalculatedFieldModal({
 }
 
 // src/components/PivotConfig.tsx
-import { Fragment, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 function getFieldIcon(type, isCalculated) {
   if (isCalculated) return "\u0192";
   switch (type) {
@@ -1194,14 +1560,14 @@ function PivotConfig({
   onRemoveCalculatedField,
   onUpdateCalculatedField
 }) {
-  const [fieldSearch, setFieldSearch] = useState7("");
-  const [showCalcModal, setShowCalcModal] = useState7(false);
-  const [editingCalcField, setEditingCalcField] = useState7(null);
-  const numericFieldNames = useMemo7(
+  const [fieldSearch, setFieldSearch] = useState8("");
+  const [showCalcModal, setShowCalcModal] = useState8(false);
+  const [editingCalcField, setEditingCalcField] = useState8(null);
+  const numericFieldNames = useMemo8(
     () => availableFields.filter((f) => f.isNumeric).map((f) => f.field),
     [availableFields]
   );
-  const calculatedFieldsAsStats = useMemo7(() => {
+  const calculatedFieldsAsStats = useMemo8(() => {
     if (!calculatedFields) return [];
     return calculatedFields.map((calc) => ({
       field: `calc:${calc.id}`,
@@ -1214,11 +1580,11 @@ function PivotConfig({
       calcFormula: calc.formula
     }));
   }, [calculatedFields]);
-  const allAvailableFields = useMemo7(() => [
+  const allAvailableFields = useMemo8(() => [
     ...availableFields.map((f) => ({ ...f, isCalculated: false })),
     ...calculatedFieldsAsStats
   ], [availableFields, calculatedFieldsAsStats]);
-  const assignedFields = useMemo7(() => {
+  const assignedFields = useMemo8(() => {
     const rowSet = new Set(rowFields);
     const colSet = new Set(columnFields);
     const valueMap = new Map(valueFields.map((v) => [v.field, v]));
@@ -1228,7 +1594,7 @@ function PivotConfig({
       valueConfig: valueMap.get(f.field)
     }));
   }, [allAvailableFields, rowFields, columnFields, valueFields]);
-  const unassignedFields = useMemo7(() => {
+  const unassignedFields = useMemo8(() => {
     const rowSet = new Set(rowFields);
     const colSet = new Set(columnFields);
     const valSet = new Set(valueFields.map((v) => v.field));
@@ -1236,7 +1602,7 @@ function PivotConfig({
       (f) => !rowSet.has(f.field) && !colSet.has(f.field) && !valSet.has(f.field)
     );
   }, [allAvailableFields, rowFields, columnFields, valueFields]);
-  const filteredUnassignedFields = useMemo7(() => {
+  const filteredUnassignedFields = useMemo8(() => {
     if (!fieldSearch.trim()) return unassignedFields;
     const search = fieldSearch.toLowerCase().trim();
     return unassignedFields.filter((f) => {
@@ -1246,13 +1612,13 @@ function PivotConfig({
     });
   }, [unassignedFields, fieldSearch]);
   const assignedCount = assignedFields.length;
-  const getFieldDisplayName = useCallback7((field) => {
+  const getFieldDisplayName = useCallback8((field) => {
     if (field.isCalculated && field.calcName) {
       return field.calcName;
     }
     return field.field;
   }, []);
-  const handleDragStart = useCallback7(
+  const handleDragStart = useCallback8(
     (field, event) => {
       event.dataTransfer?.setData("text/plain", field);
       event.dataTransfer.effectAllowed = "move";
@@ -1260,13 +1626,13 @@ function PivotConfig({
     },
     [onDragStart]
   );
-  const handleAggregationChange = useCallback7(
+  const handleAggregationChange = useCallback8(
     (field, currentAgg, newAgg) => {
       onUpdateAggregation(field, currentAgg, newAgg);
     },
     [onUpdateAggregation]
   );
-  const toggleRowColumn = useCallback7(
+  const toggleRowColumn = useCallback8(
     (field, currentAssignment) => {
       if (currentAssignment === "row") {
         onRemoveRowField(field);
@@ -1278,7 +1644,7 @@ function PivotConfig({
     },
     [onRemoveRowField, onAddColumnField, onRemoveColumnField, onAddRowField]
   );
-  const removeField = useCallback7(
+  const removeField = useCallback8(
     (field, assignedTo, valueConfig) => {
       if (assignedTo === "row") {
         onRemoveRowField(field);
@@ -1290,15 +1656,15 @@ function PivotConfig({
     },
     [onRemoveRowField, onRemoveColumnField, onRemoveValueField]
   );
-  const handleTotalsToggle = useCallback7((checked) => {
+  const handleTotalsToggle = useCallback8((checked) => {
     onShowRowTotalsChange(checked);
     onShowColumnTotalsChange(checked);
   }, [onShowRowTotalsChange, onShowColumnTotalsChange]);
-  const openCalcModal = useCallback7((field) => {
+  const openCalcModal = useCallback8((field) => {
     setEditingCalcField(field || null);
     setShowCalcModal(true);
   }, []);
-  const handleSaveCalcField = useCallback7((field) => {
+  const handleSaveCalcField = useCallback8((field) => {
     if (editingCalcField && onUpdateCalculatedField) {
       onUpdateCalculatedField(field);
     } else if (onAddCalculatedField) {
@@ -1307,14 +1673,14 @@ function PivotConfig({
     setShowCalcModal(false);
     setEditingCalcField(null);
   }, [editingCalcField, onAddCalculatedField, onUpdateCalculatedField]);
-  const handleCloseCalcModal = useCallback7(() => {
+  const handleCloseCalcModal = useCallback8(() => {
     setShowCalcModal(false);
     setEditingCalcField(null);
   }, []);
-  return /* @__PURE__ */ jsxs3("div", { className: "vpg-pivot-config", children: [
-    /* @__PURE__ */ jsxs3("div", { className: "vpg-config-header", children: [
-      /* @__PURE__ */ jsxs3("h3", { className: "vpg-config-title", children: [
-        /* @__PURE__ */ jsx3("svg", { className: "vpg-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsxs4("div", { className: "vpg-pivot-config", children: [
+    /* @__PURE__ */ jsxs4("div", { className: "vpg-config-header", children: [
+      /* @__PURE__ */ jsxs4("h3", { className: "vpg-config-title", children: [
+        /* @__PURE__ */ jsx4("svg", { className: "vpg-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx4(
           "path",
           {
             strokeLinecap: "round",
@@ -1325,13 +1691,13 @@ function PivotConfig({
         ) }),
         "Fields"
       ] }),
-      /* @__PURE__ */ jsx3("div", { className: "vpg-header-actions", children: assignedCount > 0 && /* @__PURE__ */ jsx3(
+      /* @__PURE__ */ jsx4("div", { className: "vpg-header-actions", children: assignedCount > 0 && /* @__PURE__ */ jsx4(
         "button",
         {
           className: "vpg-action-btn vpg-clear-btn",
           title: "Clear all",
           onClick: onClearConfig,
-          children: /* @__PURE__ */ jsx3("svg", { className: "vpg-icon-sm", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx3(
+          children: /* @__PURE__ */ jsx4("svg", { className: "vpg-icon-sm", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx4(
             "path",
             {
               strokeLinecap: "round",
@@ -1343,9 +1709,9 @@ function PivotConfig({
         }
       ) })
     ] }),
-    assignedCount > 0 && /* @__PURE__ */ jsxs3("div", { className: "vpg-assigned-section", children: [
-      /* @__PURE__ */ jsx3("div", { className: "vpg-section-label", children: "Active" }),
-      /* @__PURE__ */ jsx3("div", { className: "vpg-assigned-list", children: assignedFields.map((field) => /* @__PURE__ */ jsxs3(
+    assignedCount > 0 && /* @__PURE__ */ jsxs4("div", { className: "vpg-assigned-section", children: [
+      /* @__PURE__ */ jsx4("div", { className: "vpg-section-label", children: "Active" }),
+      /* @__PURE__ */ jsx4("div", { className: "vpg-assigned-list", children: assignedFields.map((field) => /* @__PURE__ */ jsxs4(
         "div",
         {
           className: `vpg-assigned-item vpg-type-${field.assignedTo}${field.isCalculated ? " vpg-type-calc" : ""}`,
@@ -1354,12 +1720,12 @@ function PivotConfig({
           onDragStart: (e) => handleDragStart(field.field, e),
           onDragEnd,
           children: [
-            /* @__PURE__ */ jsxs3("div", { className: "vpg-item-main", children: [
-              /* @__PURE__ */ jsx3("span", { className: `vpg-item-badge ${field.assignedTo}${field.isCalculated ? " calc" : ""}`, children: field.isCalculated ? "\u0192" : field.assignedTo === "row" ? "R" : field.assignedTo === "column" ? "C" : getAggregationSymbol(field.valueConfig?.aggregation || "sum") }),
-              /* @__PURE__ */ jsx3("span", { className: "vpg-item-name", children: getFieldDisplayName(field) })
+            /* @__PURE__ */ jsxs4("div", { className: "vpg-item-main", children: [
+              /* @__PURE__ */ jsx4("span", { className: `vpg-item-badge ${field.assignedTo}${field.isCalculated ? " calc" : ""}`, children: field.isCalculated ? "\u0192" : field.assignedTo === "row" ? "R" : field.assignedTo === "column" ? "C" : getAggregationSymbol(field.valueConfig?.aggregation || "sum") }),
+              /* @__PURE__ */ jsx4("span", { className: "vpg-item-name", children: getFieldDisplayName(field) })
             ] }),
-            /* @__PURE__ */ jsxs3("div", { className: "vpg-item-actions", children: [
-              (field.assignedTo === "row" || field.assignedTo === "column") && /* @__PURE__ */ jsx3(
+            /* @__PURE__ */ jsxs4("div", { className: "vpg-item-actions", children: [
+              (field.assignedTo === "row" || field.assignedTo === "column") && /* @__PURE__ */ jsx4(
                 "button",
                 {
                   className: "vpg-toggle-btn",
@@ -1368,14 +1734,14 @@ function PivotConfig({
                     e.stopPropagation();
                     toggleRowColumn(field.field, field.assignedTo);
                   },
-                  children: /* @__PURE__ */ jsx3(
+                  children: /* @__PURE__ */ jsx4(
                     "svg",
                     {
                       className: "vpg-icon-xs",
                       fill: "none",
                       stroke: "currentColor",
                       viewBox: "0 0 24 24",
-                      children: /* @__PURE__ */ jsx3(
+                      children: /* @__PURE__ */ jsx4(
                         "path",
                         {
                           strokeLinecap: "round",
@@ -1388,7 +1754,7 @@ function PivotConfig({
                   )
                 }
               ),
-              field.assignedTo === "value" && field.valueConfig && /* @__PURE__ */ jsx3(
+              field.assignedTo === "value" && field.valueConfig && /* @__PURE__ */ jsx4(
                 "select",
                 {
                   className: "vpg-agg-select",
@@ -1402,14 +1768,14 @@ function PivotConfig({
                     );
                   },
                   onClick: (e) => e.stopPropagation(),
-                  children: AGGREGATION_OPTIONS.map((agg) => /* @__PURE__ */ jsxs3("option", { value: agg.value, children: [
+                  children: AGGREGATION_OPTIONS.map((agg) => /* @__PURE__ */ jsxs4("option", { value: agg.value, children: [
                     agg.symbol,
                     " ",
                     agg.label
                   ] }, agg.value))
                 }
               ),
-              /* @__PURE__ */ jsx3(
+              /* @__PURE__ */ jsx4(
                 "button",
                 {
                   className: "vpg-remove-btn",
@@ -1427,13 +1793,13 @@ function PivotConfig({
         field.field
       )) })
     ] }),
-    /* @__PURE__ */ jsxs3("div", { className: "vpg-unassigned-section", children: [
-      /* @__PURE__ */ jsx3("div", { className: "vpg-section-header", children: /* @__PURE__ */ jsxs3("div", { className: "vpg-section-label", children: [
+    /* @__PURE__ */ jsxs4("div", { className: "vpg-unassigned-section", children: [
+      /* @__PURE__ */ jsx4("div", { className: "vpg-section-header", children: /* @__PURE__ */ jsxs4("div", { className: "vpg-section-label", children: [
         "Available ",
-        /* @__PURE__ */ jsx3("span", { className: "vpg-count", children: unassignedFields.length })
+        /* @__PURE__ */ jsx4("span", { className: "vpg-count", children: unassignedFields.length })
       ] }) }),
-      /* @__PURE__ */ jsxs3("div", { className: "vpg-field-search", children: [
-        /* @__PURE__ */ jsx3("svg", { className: "vpg-search-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx3(
+      /* @__PURE__ */ jsxs4("div", { className: "vpg-field-search", children: [
+        /* @__PURE__ */ jsx4("svg", { className: "vpg-search-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx4(
           "path",
           {
             strokeLinecap: "round",
@@ -1442,7 +1808,7 @@ function PivotConfig({
             d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
           }
         ) }),
-        /* @__PURE__ */ jsx3(
+        /* @__PURE__ */ jsx4(
           "input",
           {
             type: "text",
@@ -1452,7 +1818,7 @@ function PivotConfig({
             className: "vpg-search-input"
           }
         ),
-        fieldSearch && /* @__PURE__ */ jsx3("button", { className: "vpg-clear-search", onClick: () => setFieldSearch(""), children: /* @__PURE__ */ jsx3("svg", { className: "vpg-icon-xs", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx3(
+        fieldSearch && /* @__PURE__ */ jsx4("button", { className: "vpg-clear-search", onClick: () => setFieldSearch(""), children: /* @__PURE__ */ jsx4("svg", { className: "vpg-icon-xs", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx4(
           "path",
           {
             strokeLinecap: "round",
@@ -1462,8 +1828,8 @@ function PivotConfig({
           }
         ) }) })
       ] }),
-      /* @__PURE__ */ jsxs3("div", { className: "vpg-field-list", children: [
-        filteredUnassignedFields.map((field) => /* @__PURE__ */ jsxs3(
+      /* @__PURE__ */ jsxs4("div", { className: "vpg-field-list", children: [
+        filteredUnassignedFields.map((field) => /* @__PURE__ */ jsxs4(
           "div",
           {
             className: `vpg-field-item${field.isNumeric && !field.isCalculated ? " vpg-is-numeric" : ""}${field.isCalculated ? " vpg-is-calculated" : ""}`,
@@ -1472,10 +1838,10 @@ function PivotConfig({
             onDragStart: (e) => handleDragStart(field.field, e),
             onDragEnd,
             children: [
-              /* @__PURE__ */ jsx3("span", { className: `vpg-field-type-icon${field.isCalculated ? " vpg-calc-type" : ""}`, title: field.type, children: getFieldIcon(field.type, field.isCalculated) }),
-              /* @__PURE__ */ jsx3("span", { className: "vpg-field-name", children: getFieldDisplayName(field) }),
-              field.isCalculated ? /* @__PURE__ */ jsxs3(Fragment, { children: [
-                /* @__PURE__ */ jsx3(
+              /* @__PURE__ */ jsx4("span", { className: `vpg-field-type-icon${field.isCalculated ? " vpg-calc-type" : ""}`, title: field.type, children: getFieldIcon(field.type, field.isCalculated) }),
+              /* @__PURE__ */ jsx4("span", { className: "vpg-field-name", children: getFieldDisplayName(field) }),
+              field.isCalculated ? /* @__PURE__ */ jsxs4(Fragment2, { children: [
+                /* @__PURE__ */ jsx4(
                   "button",
                   {
                     className: "vpg-field-edit",
@@ -1488,7 +1854,7 @@ function PivotConfig({
                     children: "\u270E"
                   }
                 ),
-                /* @__PURE__ */ jsx3(
+                /* @__PURE__ */ jsx4(
                   "button",
                   {
                     className: "vpg-field-delete",
@@ -1502,22 +1868,22 @@ function PivotConfig({
                     children: "\xD7"
                   }
                 )
-              ] }) : /* @__PURE__ */ jsx3("span", { className: "vpg-unique-count", children: field.uniqueCount })
+              ] }) : /* @__PURE__ */ jsx4("span", { className: "vpg-unique-count", children: field.uniqueCount })
             ]
           },
           field.field
         )),
-        filteredUnassignedFields.length === 0 && fieldSearch && /* @__PURE__ */ jsxs3("div", { className: "vpg-empty-hint", children: [
+        filteredUnassignedFields.length === 0 && fieldSearch && /* @__PURE__ */ jsxs4("div", { className: "vpg-empty-hint", children: [
           'No fields match "',
           fieldSearch,
           '"'
         ] }),
-        unassignedFields.length === 0 && /* @__PURE__ */ jsx3("div", { className: "vpg-empty-hint", children: "All fields assigned" })
+        unassignedFields.length === 0 && /* @__PURE__ */ jsx4("div", { className: "vpg-empty-hint", children: "All fields assigned" })
       ] })
     ] }),
-    /* @__PURE__ */ jsxs3("div", { className: "vpg-options-section", children: [
-      /* @__PURE__ */ jsxs3("label", { className: "vpg-option-toggle", children: [
-        /* @__PURE__ */ jsx3(
+    /* @__PURE__ */ jsxs4("div", { className: "vpg-options-section", children: [
+      /* @__PURE__ */ jsxs4("label", { className: "vpg-option-toggle", children: [
+        /* @__PURE__ */ jsx4(
           "input",
           {
             type: "checkbox",
@@ -1525,14 +1891,14 @@ function PivotConfig({
             onChange: (e) => handleTotalsToggle(e.target.checked)
           }
         ),
-        /* @__PURE__ */ jsx3("span", { children: "Totals" })
+        /* @__PURE__ */ jsx4("span", { children: "Totals" })
       ] }),
-      /* @__PURE__ */ jsxs3("button", { className: "vpg-calc-btn", onClick: () => openCalcModal(), title: "Add calculated field (e.g. Profit Margin %)", children: [
-        /* @__PURE__ */ jsx3("span", { className: "vpg-calc-icon", children: "\u0192" }),
-        /* @__PURE__ */ jsx3("span", { children: "+ Calc" })
+      /* @__PURE__ */ jsxs4("button", { className: "vpg-calc-btn", onClick: () => openCalcModal(), title: "Add calculated field (e.g. Profit Margin %)", children: [
+        /* @__PURE__ */ jsx4("span", { className: "vpg-calc-icon", children: "\u0192" }),
+        /* @__PURE__ */ jsx4("span", { children: "+ Calc" })
       ] })
     ] }),
-    /* @__PURE__ */ jsx3(
+    /* @__PURE__ */ jsx4(
       CalculatedFieldModal,
       {
         show: showCalcModal,
@@ -1546,9 +1912,9 @@ function PivotConfig({
 }
 
 // src/components/PivotSkeleton.tsx
-import { useState as useState8, useMemo as useMemo8, useCallback as useCallback8, useEffect as useEffect5 } from "react";
+import { useState as useState9, useMemo as useMemo9, useCallback as useCallback9, useEffect as useEffect6 } from "react";
 import { getAggregationLabel as getAggregationLabel2, getAggregationSymbol as getAggregationSymbol2 } from "@smallwebco/tinypivot-core";
-import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 function PivotSkeleton({
   rowFields,
   columnFields,
@@ -1571,7 +1937,7 @@ function PivotSkeleton({
   onReorderColumnFields
 }) {
   const { showWatermark, canUsePivot, isDemo } = useLicense();
-  const getValueFieldDisplayName = useCallback8((field) => {
+  const getValueFieldDisplayName = useCallback9((field) => {
     if (field.startsWith("calc:")) {
       const calcId = field.replace("calc:", "");
       const calcField = calculatedFields?.find((c) => c.id === calcId);
@@ -1579,15 +1945,15 @@ function PivotSkeleton({
     }
     return field;
   }, [calculatedFields]);
-  const isCalculatedField = useCallback8((field) => {
+  const isCalculatedField = useCallback9((field) => {
     return field.startsWith("calc:");
   }, []);
-  const [dragOverArea, setDragOverArea] = useState8(null);
-  const [reorderDragSource, setReorderDragSource] = useState8(null);
-  const [reorderDropTarget, setReorderDropTarget] = useState8(null);
-  const [sortDirection, setSortDirection] = useState8("asc");
-  const [sortTarget, setSortTarget] = useState8("row");
-  const toggleSort = useCallback8((target = "row") => {
+  const [dragOverArea, setDragOverArea] = useState9(null);
+  const [reorderDragSource, setReorderDragSource] = useState9(null);
+  const [reorderDropTarget, setReorderDropTarget] = useState9(null);
+  const [sortDirection, setSortDirection] = useState9("asc");
+  const [sortTarget, setSortTarget] = useState9("row");
+  const toggleSort = useCallback9((target = "row") => {
     if (sortTarget === target) {
       setSortDirection((prev) => prev === "asc" ? "desc" : "asc");
     } else {
@@ -1595,13 +1961,13 @@ function PivotSkeleton({
       setSortDirection("asc");
     }
   }, [sortTarget]);
-  const [selectedCell, setSelectedCell] = useState8(null);
-  const [selectionStart, setSelectionStart] = useState8(null);
-  const [selectionEnd, setSelectionEnd] = useState8(null);
-  const [isSelecting, setIsSelecting] = useState8(false);
-  const [showCopyToast, setShowCopyToast] = useState8(false);
-  const [copyToastMessage, setCopyToastMessage] = useState8("");
-  const selectionBounds = useMemo8(() => {
+  const [selectedCell, setSelectedCell] = useState9(null);
+  const [selectionStart, setSelectionStart] = useState9(null);
+  const [selectionEnd, setSelectionEnd] = useState9(null);
+  const [isSelecting, setIsSelecting] = useState9(false);
+  const [showCopyToast, setShowCopyToast] = useState9(false);
+  const [copyToastMessage, setCopyToastMessage] = useState9("");
+  const selectionBounds = useMemo9(() => {
     if (!selectionStart || !selectionEnd) return null;
     return {
       minRow: Math.min(selectionStart.row, selectionEnd.row),
@@ -1610,7 +1976,7 @@ function PivotSkeleton({
       maxCol: Math.max(selectionStart.col, selectionEnd.col)
     };
   }, [selectionStart, selectionEnd]);
-  const handleCellMouseDown = useCallback8(
+  const handleCellMouseDown = useCallback9(
     (rowIndex, colIndex, event) => {
       event.preventDefault();
       if (event.shiftKey && selectedCell) {
@@ -1624,7 +1990,7 @@ function PivotSkeleton({
     },
     [selectedCell]
   );
-  const handleCellMouseEnter = useCallback8(
+  const handleCellMouseEnter = useCallback9(
     (rowIndex, colIndex) => {
       if (isSelecting) {
         setSelectionEnd({ row: rowIndex, col: colIndex });
@@ -1632,7 +1998,7 @@ function PivotSkeleton({
     },
     [isSelecting]
   );
-  const isCellSelected = useCallback8(
+  const isCellSelected = useCallback9(
     (rowIndex, colIndex) => {
       if (!selectionBounds) {
         return selectedCell?.row === rowIndex && selectedCell?.col === colIndex;
@@ -1642,12 +2008,12 @@ function PivotSkeleton({
     },
     [selectionBounds, selectedCell]
   );
-  useEffect5(() => {
+  useEffect6(() => {
     const handleMouseUp = () => setIsSelecting(false);
     document.addEventListener("mouseup", handleMouseUp);
     return () => document.removeEventListener("mouseup", handleMouseUp);
   }, []);
-  const sortedRowIndices = useMemo8(() => {
+  const sortedRowIndices = useMemo9(() => {
     if (!pivotResult) return [];
     const indices = pivotResult.rowHeaders.map((_, i) => i);
     const headers = pivotResult.rowHeaders;
@@ -1671,7 +2037,7 @@ function PivotSkeleton({
     });
     return indices;
   }, [pivotResult, sortTarget, sortDirection]);
-  const copySelectionToClipboard = useCallback8(() => {
+  const copySelectionToClipboard = useCallback9(() => {
     if (!selectionBounds || !pivotResult) return;
     const { minRow, maxRow, minCol, maxCol } = selectionBounds;
     const lines = [];
@@ -1695,7 +2061,7 @@ function PivotSkeleton({
       console.error("Copy failed:", err);
     });
   }, [selectionBounds, pivotResult, sortedRowIndices]);
-  useEffect5(() => {
+  useEffect6(() => {
     const handleKeydown = (event) => {
       if (!selectionBounds) return;
       if ((event.ctrlKey || event.metaKey) && event.key === "c") {
@@ -1712,7 +2078,7 @@ function PivotSkeleton({
     document.addEventListener("keydown", handleKeydown);
     return () => document.removeEventListener("keydown", handleKeydown);
   }, [selectionBounds, copySelectionToClipboard]);
-  const selectionStats = useMemo8(() => {
+  const selectionStats = useMemo9(() => {
     if (!selectionBounds || !pivotResult) return null;
     const { minRow, maxRow, minCol, maxCol } = selectionBounds;
     const values = [];
@@ -1738,12 +2104,12 @@ function PivotSkeleton({
       avg
     };
   }, [selectionBounds, pivotResult, sortedRowIndices]);
-  const formatStatValue = useCallback8((val) => {
+  const formatStatValue = useCallback9((val) => {
     if (Math.abs(val) >= 1e6) return `${(val / 1e6).toFixed(2)}M`;
     if (Math.abs(val) >= 1e3) return `${(val / 1e3).toFixed(2)}K`;
     return val.toFixed(2);
   }, []);
-  const columnHeaderCells = useMemo8(() => {
+  const columnHeaderCells = useMemo9(() => {
     if (!pivotResult || pivotResult.headers.length === 0) {
       return [
         valueFields.map((vf) => ({
@@ -1771,12 +2137,12 @@ function PivotSkeleton({
     return result;
   }, [pivotResult, valueFields]);
   const hasActiveFilters = activeFilters && activeFilters.length > 0;
-  const filterSummary = useMemo8(() => {
+  const filterSummary = useMemo9(() => {
     if (!activeFilters || activeFilters.length === 0) return "";
     return activeFilters.map((f) => f.column).join(", ");
   }, [activeFilters]);
-  const [showFilterTooltip, setShowFilterTooltip] = useState8(false);
-  const filterTooltipDetails = useMemo8(() => {
+  const [showFilterTooltip, setShowFilterTooltip] = useState9(false);
+  const filterTooltipDetails = useMemo9(() => {
     if (!activeFilters || activeFilters.length === 0) return [];
     return activeFilters.map((f) => {
       const maxDisplay = 5;
@@ -1789,7 +2155,7 @@ function PivotSkeleton({
       };
     });
   }, [activeFilters]);
-  const handleDragOver = useCallback8(
+  const handleDragOver = useCallback9(
     (area, event) => {
       event.preventDefault();
       event.dataTransfer.dropEffect = "move";
@@ -1797,10 +2163,10 @@ function PivotSkeleton({
     },
     []
   );
-  const handleDragLeave = useCallback8(() => {
+  const handleDragLeave = useCallback9(() => {
     setDragOverArea(null);
   }, []);
-  const handleDrop = useCallback8(
+  const handleDrop = useCallback9(
     (area, event) => {
       event.preventDefault();
       const field = event.dataTransfer?.getData("text/plain");
@@ -1827,7 +2193,7 @@ function PivotSkeleton({
     },
     [rowFields, columnFields, valueFields, onAddRowField, onRemoveRowField, onAddColumnField, onRemoveColumnField, onAddValueField, onRemoveValueField]
   );
-  const handleChipDragStart = useCallback8(
+  const handleChipDragStart = useCallback9(
     (zone, index, event) => {
       setReorderDragSource({ zone, index });
       event.dataTransfer.effectAllowed = "move";
@@ -1838,11 +2204,11 @@ function PivotSkeleton({
     },
     []
   );
-  const handleChipDragEnd = useCallback8(() => {
+  const handleChipDragEnd = useCallback9(() => {
     setReorderDragSource(null);
     setReorderDropTarget(null);
   }, []);
-  const handleChipDragOver = useCallback8(
+  const handleChipDragOver = useCallback9(
     (zone, index, event) => {
       event.preventDefault();
       if (reorderDragSource && reorderDragSource.zone === zone) {
@@ -1852,10 +2218,10 @@ function PivotSkeleton({
     },
     [reorderDragSource]
   );
-  const handleChipDragLeave = useCallback8(() => {
+  const handleChipDragLeave = useCallback9(() => {
     setReorderDropTarget(null);
   }, []);
-  const handleChipDrop = useCallback8(
+  const handleChipDrop = useCallback9(
     (zone, targetIndex, event) => {
       event.preventDefault();
       event.stopPropagation();
@@ -1881,31 +2247,31 @@ function PivotSkeleton({
     },
     [reorderDragSource, rowFields, columnFields, onReorderRowFields, onReorderColumnFields]
   );
-  const isChipDragSource = useCallback8(
+  const isChipDragSource = useCallback9(
     (zone, index) => {
       return reorderDragSource?.zone === zone && reorderDragSource?.index === index;
     },
     [reorderDragSource]
   );
-  const isChipDropTarget = useCallback8(
+  const isChipDropTarget = useCallback9(
     (zone, index) => {
       return reorderDropTarget?.zone === zone && reorderDropTarget?.index === index;
     },
     [reorderDropTarget]
   );
   const currentFontSize = fontSize;
-  return /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs5(
     "div",
     {
       className: `vpg-pivot-skeleton vpg-font-${currentFontSize} ${draggingField ? "vpg-is-dragging" : ""}`,
       children: [
-        showCopyToast && /* @__PURE__ */ jsxs4("div", { className: "vpg-toast", children: [
-          /* @__PURE__ */ jsx4("svg", { className: "vpg-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx4("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) }),
+        showCopyToast && /* @__PURE__ */ jsxs5("div", { className: "vpg-toast", children: [
+          /* @__PURE__ */ jsx5("svg", { className: "vpg-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx5("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) }),
           copyToastMessage
         ] }),
-        /* @__PURE__ */ jsxs4("div", { className: "vpg-skeleton-header", children: [
-          /* @__PURE__ */ jsxs4("div", { className: "vpg-skeleton-title", children: [
-            /* @__PURE__ */ jsx4("svg", { className: "vpg-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx4(
+        /* @__PURE__ */ jsxs5("div", { className: "vpg-skeleton-header", children: [
+          /* @__PURE__ */ jsxs5("div", { className: "vpg-skeleton-title", children: [
+            /* @__PURE__ */ jsx5("svg", { className: "vpg-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx5(
               "path",
               {
                 strokeLinecap: "round",
@@ -1914,24 +2280,24 @@ function PivotSkeleton({
                 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__ */ jsx4("span", { children: "Pivot Table" })
+            /* @__PURE__ */ jsx5("span", { children: "Pivot Table" })
           ] }),
-          /* @__PURE__ */ jsxs4("div", { className: "vpg-header-right", children: [
-            hasActiveFilters && /* @__PURE__ */ jsxs4(
+          /* @__PURE__ */ jsxs5("div", { className: "vpg-header-right", children: [
+            hasActiveFilters && /* @__PURE__ */ jsxs5(
               "div",
               {
                 className: "vpg-filter-indicator",
                 onMouseEnter: () => setShowFilterTooltip(true),
                 onMouseLeave: () => setShowFilterTooltip(false),
                 children: [
-                  /* @__PURE__ */ jsx4(
+                  /* @__PURE__ */ jsx5(
                     "svg",
                     {
                       className: "vpg-filter-icon",
                       fill: "none",
                       stroke: "currentColor",
                       viewBox: "0 0 24 24",
-                      children: /* @__PURE__ */ jsx4(
+                      children: /* @__PURE__ */ jsx5(
                         "path",
                         {
                           strokeLinecap: "round",
@@ -1942,10 +2308,10 @@ function PivotSkeleton({
                       )
                     }
                   ),
-                  /* @__PURE__ */ jsxs4("span", { className: "vpg-filter-text", children: [
+                  /* @__PURE__ */ jsxs5("span", { className: "vpg-filter-text", children: [
                     "Filtered: ",
-                    /* @__PURE__ */ jsx4("strong", { children: filterSummary }),
-                    filteredRowCount !== void 0 && totalRowCount !== void 0 && /* @__PURE__ */ jsxs4("span", { className: "vpg-filter-count", children: [
+                    /* @__PURE__ */ jsx5("strong", { children: filterSummary }),
+                    filteredRowCount !== void 0 && totalRowCount !== void 0 && /* @__PURE__ */ jsxs5("span", { className: "vpg-filter-count", children: [
                       "(",
                       filteredRowCount.toLocaleString(),
                       " of ",
@@ -1953,20 +2319,20 @@ function PivotSkeleton({
                       " rows)"
                     ] })
                   ] }),
-                  showFilterTooltip && /* @__PURE__ */ jsxs4("div", { className: "vpg-filter-tooltip", children: [
-                    /* @__PURE__ */ jsx4("div", { className: "vpg-tooltip-header", children: "Active Filters" }),
-                    filterTooltipDetails.map((filter) => /* @__PURE__ */ jsxs4("div", { className: "vpg-tooltip-filter", children: [
-                      /* @__PURE__ */ jsx4("div", { className: "vpg-tooltip-column", children: filter.column }),
-                      /* @__PURE__ */ jsxs4("div", { className: "vpg-tooltip-values", children: [
-                        filter.values.map((val, idx) => /* @__PURE__ */ jsx4("span", { className: "vpg-tooltip-value", children: val }, idx)),
-                        filter.remaining > 0 && /* @__PURE__ */ jsxs4("span", { className: "vpg-tooltip-more", children: [
+                  showFilterTooltip && /* @__PURE__ */ jsxs5("div", { className: "vpg-filter-tooltip", children: [
+                    /* @__PURE__ */ jsx5("div", { className: "vpg-tooltip-header", children: "Active Filters" }),
+                    filterTooltipDetails.map((filter) => /* @__PURE__ */ jsxs5("div", { className: "vpg-tooltip-filter", children: [
+                      /* @__PURE__ */ jsx5("div", { className: "vpg-tooltip-column", children: filter.column }),
+                      /* @__PURE__ */ jsxs5("div", { className: "vpg-tooltip-values", children: [
+                        filter.values.map((val, idx) => /* @__PURE__ */ jsx5("span", { className: "vpg-tooltip-value", children: val }, idx)),
+                        filter.remaining > 0 && /* @__PURE__ */ jsxs5("span", { className: "vpg-tooltip-more", children: [
                           "+",
                           filter.remaining,
                           " more"
                         ] })
                       ] })
                     ] }, filter.column)),
-                    filteredRowCount !== void 0 && totalRowCount !== void 0 && /* @__PURE__ */ jsxs4("div", { className: "vpg-tooltip-summary", children: [
+                    filteredRowCount !== void 0 && totalRowCount !== void 0 && /* @__PURE__ */ jsxs5("div", { className: "vpg-tooltip-summary", children: [
                       "Showing ",
                       filteredRowCount.toLocaleString(),
                       " of ",
@@ -1977,18 +2343,18 @@ function PivotSkeleton({
                 ]
               }
             ),
-            isConfigured && /* @__PURE__ */ jsxs4("div", { className: "vpg-config-summary", children: [
-              /* @__PURE__ */ jsxs4("span", { className: "vpg-summary-badge vpg-rows", children: [
+            isConfigured && /* @__PURE__ */ jsxs5("div", { className: "vpg-config-summary", children: [
+              /* @__PURE__ */ jsxs5("span", { className: "vpg-summary-badge vpg-rows", children: [
                 rowFields.length,
                 " row",
                 rowFields.length !== 1 ? "s" : ""
               ] }),
-              /* @__PURE__ */ jsxs4("span", { className: "vpg-summary-badge vpg-cols", children: [
+              /* @__PURE__ */ jsxs5("span", { className: "vpg-summary-badge vpg-cols", children: [
                 columnFields.length,
                 " col",
                 columnFields.length !== 1 ? "s" : ""
               ] }),
-              /* @__PURE__ */ jsxs4("span", { className: "vpg-summary-badge vpg-vals", children: [
+              /* @__PURE__ */ jsxs5("span", { className: "vpg-summary-badge vpg-vals", children: [
                 valueFields.length,
                 " val",
                 valueFields.length !== 1 ? "s" : ""
@@ -1996,8 +2362,8 @@ function PivotSkeleton({
             ] })
           ] })
         ] }),
-        !canUsePivot ? /* @__PURE__ */ jsx4("div", { className: "vpg-pro-required", children: /* @__PURE__ */ jsxs4("div", { className: "vpg-pro-content", children: [
-          /* @__PURE__ */ jsx4("svg", { className: "vpg-pro-icon", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx4(
+        !canUsePivot ? /* @__PURE__ */ jsx5("div", { className: "vpg-pro-required", children: /* @__PURE__ */ jsxs5("div", { className: "vpg-pro-content", children: [
+          /* @__PURE__ */ jsx5("svg", { className: "vpg-pro-icon", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx5(
             "path",
             {
               strokeLinecap: "round",
@@ -2006,12 +2372,12 @@ function PivotSkeleton({
               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__ */ jsx4("h3", { children: "Pro Feature" }),
-          /* @__PURE__ */ jsx4("p", { children: "Pivot Table functionality requires a Pro license." }),
-          /* @__PURE__ */ jsx4("a", { href: "https://tiny-pivot.com/#pricing", target: "_blank", rel: "noopener noreferrer", className: "vpg-pro-link", children: "Get Pro License \u2192" })
-        ] }) }) : /* @__PURE__ */ jsxs4(Fragment2, { children: [
-          /* @__PURE__ */ jsxs4("div", { className: "vpg-config-bar", children: [
-            /* @__PURE__ */ jsxs4(
+          /* @__PURE__ */ jsx5("h3", { children: "Pro Feature" }),
+          /* @__PURE__ */ jsx5("p", { children: "Pivot Table functionality requires a Pro license." }),
+          /* @__PURE__ */ jsx5("a", { href: "https://tiny-pivot.com/#pricing", target: "_blank", rel: "noopener noreferrer", className: "vpg-pro-link", children: "Get Pro License \u2192" })
+        ] }) }) : /* @__PURE__ */ jsxs5(Fragment3, { children: [
+          /* @__PURE__ */ jsxs5("div", { className: "vpg-config-bar", children: [
+            /* @__PURE__ */ jsxs5(
               "div",
               {
                 className: `vpg-drop-zone vpg-row-zone ${dragOverArea === "row" ? "vpg-drag-over" : ""}`,
@@ -2019,12 +2385,12 @@ function PivotSkeleton({
                 onDragLeave: handleDragLeave,
                 onDrop: (e) => handleDrop("row", e),
                 children: [
-                  /* @__PURE__ */ jsxs4("div", { className: "vpg-zone-header", children: [
-                    /* @__PURE__ */ jsx4("span", { className: "vpg-zone-icon vpg-row-icon", children: "\u2193" }),
-                    /* @__PURE__ */ jsx4("span", { className: "vpg-zone-label", children: "Rows" })
+                  /* @__PURE__ */ jsxs5("div", { className: "vpg-zone-header", children: [
+                    /* @__PURE__ */ jsx5("span", { className: "vpg-zone-icon vpg-row-icon", children: "\u2193" }),
+                    /* @__PURE__ */ jsx5("span", { className: "vpg-zone-label", children: "Rows" })
                   ] }),
-                  /* @__PURE__ */ jsxs4("div", { className: "vpg-zone-chips", children: [
-                    rowFields.map((field, idx) => /* @__PURE__ */ jsxs4(
+                  /* @__PURE__ */ jsxs5("div", { className: "vpg-zone-chips", children: [
+                    rowFields.map((field, idx) => /* @__PURE__ */ jsxs5(
                       "div",
                       {
                         className: `vpg-mini-chip vpg-row-chip ${isChipDragSource("row", idx) ? "vpg-chip-dragging" : ""} ${isChipDropTarget("row", idx) ? "vpg-chip-drop-target" : ""}`,
@@ -2035,9 +2401,9 @@ function PivotSkeleton({
                         onDragLeave: handleChipDragLeave,
                         onDrop: (e) => handleChipDrop("row", idx, e),
                         children: [
-                          /* @__PURE__ */ jsx4("span", { className: "vpg-drag-handle", children: "\u22EE\u22EE" }),
-                          /* @__PURE__ */ jsx4("span", { className: "vpg-mini-name", children: field }),
-                          /* @__PURE__ */ jsx4(
+                          /* @__PURE__ */ jsx5("span", { className: "vpg-drag-handle", children: "\u22EE\u22EE" }),
+                          /* @__PURE__ */ jsx5("span", { className: "vpg-mini-name", children: field }),
+                          /* @__PURE__ */ jsx5(
                             "button",
                             {
                               className: "vpg-mini-remove",
@@ -2052,12 +2418,12 @@ function PivotSkeleton({
                       },
                       field
                     )),
-                    rowFields.length === 0 && /* @__PURE__ */ jsx4("span", { className: "vpg-zone-hint", children: "Drop here" })
+                    rowFields.length === 0 && /* @__PURE__ */ jsx5("span", { className: "vpg-zone-hint", children: "Drop here" })
                   ] })
                 ]
               }
             ),
-            /* @__PURE__ */ jsxs4(
+            /* @__PURE__ */ jsxs5(
               "div",
               {
                 className: `vpg-drop-zone vpg-column-zone ${dragOverArea === "column" ? "vpg-drag-over" : ""}`,
@@ -2065,12 +2431,12 @@ function PivotSkeleton({
                 onDragLeave: handleDragLeave,
                 onDrop: (e) => handleDrop("column", e),
                 children: [
-                  /* @__PURE__ */ jsxs4("div", { className: "vpg-zone-header", children: [
-                    /* @__PURE__ */ jsx4("span", { className: "vpg-zone-icon vpg-column-icon", children: "\u2192" }),
-                    /* @__PURE__ */ jsx4("span", { className: "vpg-zone-label", children: "Columns" })
+                  /* @__PURE__ */ jsxs5("div", { className: "vpg-zone-header", children: [
+                    /* @__PURE__ */ jsx5("span", { className: "vpg-zone-icon vpg-column-icon", children: "\u2192" }),
+                    /* @__PURE__ */ jsx5("span", { className: "vpg-zone-label", children: "Columns" })
                   ] }),
-                  /* @__PURE__ */ jsxs4("div", { className: "vpg-zone-chips", children: [
-                    columnFields.map((field, idx) => /* @__PURE__ */ jsxs4(
+                  /* @__PURE__ */ jsxs5("div", { className: "vpg-zone-chips", children: [
+                    columnFields.map((field, idx) => /* @__PURE__ */ jsxs5(
                       "div",
                       {
                         className: `vpg-mini-chip vpg-column-chip ${isChipDragSource("column", idx) ? "vpg-chip-dragging" : ""} ${isChipDropTarget("column", idx) ? "vpg-chip-drop-target" : ""}`,
@@ -2081,9 +2447,9 @@ function PivotSkeleton({
                         onDragLeave: handleChipDragLeave,
                         onDrop: (e) => handleChipDrop("column", idx, e),
                         children: [
-                          /* @__PURE__ */ jsx4("span", { className: "vpg-drag-handle", children: "\u22EE\u22EE" }),
-                          /* @__PURE__ */ jsx4("span", { className: "vpg-mini-name", children: field }),
-                          /* @__PURE__ */ jsx4(
+                          /* @__PURE__ */ jsx5("span", { className: "vpg-drag-handle", children: "\u22EE\u22EE" }),
+                          /* @__PURE__ */ jsx5("span", { className: "vpg-mini-name", children: field }),
+                          /* @__PURE__ */ jsx5(
                             "button",
                             {
                               className: "vpg-mini-remove",
@@ -2098,12 +2464,12 @@ function PivotSkeleton({
                       },
                       field
                     )),
-                    columnFields.length === 0 && /* @__PURE__ */ jsx4("span", { className: "vpg-zone-hint", children: "Drop here" })
+                    columnFields.length === 0 && /* @__PURE__ */ jsx5("span", { className: "vpg-zone-hint", children: "Drop here" })
                   ] })
                 ]
               }
             ),
-            /* @__PURE__ */ jsxs4(
+            /* @__PURE__ */ jsxs5(
               "div",
               {
                 className: `vpg-drop-zone vpg-value-zone ${dragOverArea === "value" ? "vpg-drag-over" : ""}`,
@@ -2111,19 +2477,19 @@ function PivotSkeleton({
                 onDragLeave: handleDragLeave,
                 onDrop: (e) => handleDrop("value", e),
                 children: [
-                  /* @__PURE__ */ jsxs4("div", { className: "vpg-zone-header", children: [
-                    /* @__PURE__ */ jsx4("span", { className: "vpg-zone-icon vpg-value-icon", children: "\u03A3" }),
-                    /* @__PURE__ */ jsx4("span", { className: "vpg-zone-label", children: "Values" })
+                  /* @__PURE__ */ jsxs5("div", { className: "vpg-zone-header", children: [
+                    /* @__PURE__ */ jsx5("span", { className: "vpg-zone-icon vpg-value-icon", children: "\u03A3" }),
+                    /* @__PURE__ */ jsx5("span", { className: "vpg-zone-label", children: "Values" })
                   ] }),
-                  /* @__PURE__ */ jsxs4("div", { className: "vpg-zone-chips", children: [
-                    valueFields.map((vf) => /* @__PURE__ */ jsxs4(
+                  /* @__PURE__ */ jsxs5("div", { className: "vpg-zone-chips", children: [
+                    valueFields.map((vf) => /* @__PURE__ */ jsxs5(
                       "div",
                       {
                         className: `vpg-mini-chip vpg-value-chip${isCalculatedField(vf.field) ? " vpg-calc-chip" : ""}`,
                         children: [
-                          /* @__PURE__ */ jsx4("span", { className: "vpg-agg-symbol", children: isCalculatedField(vf.field) ? "\u0192" : getAggregationSymbol2(vf.aggregation) }),
-                          /* @__PURE__ */ jsx4("span", { className: "vpg-mini-name", children: getValueFieldDisplayName(vf.field) }),
-                          /* @__PURE__ */ jsx4(
+                          /* @__PURE__ */ jsx5("span", { className: "vpg-agg-symbol", children: isCalculatedField(vf.field) ? "\u0192" : getAggregationSymbol2(vf.aggregation) }),
+                          /* @__PURE__ */ jsx5("span", { className: "vpg-mini-name", children: getValueFieldDisplayName(vf.field) }),
+                          /* @__PURE__ */ jsx5(
                             "button",
                             {
                               className: "vpg-mini-remove",
@@ -2135,21 +2501,21 @@ function PivotSkeleton({
                       },
                       `${vf.field}-${vf.aggregation}`
                     )),
-                    valueFields.length === 0 && /* @__PURE__ */ jsx4("span", { className: "vpg-zone-hint", children: "Drop numeric" })
+                    valueFields.length === 0 && /* @__PURE__ */ jsx5("span", { className: "vpg-zone-hint", children: "Drop numeric" })
                   ] })
                 ]
               }
             )
           ] }),
-          (!isConfigured || !pivotResult) && /* @__PURE__ */ jsx4("div", { className: "vpg-placeholder", children: /* @__PURE__ */ jsxs4("div", { className: "vpg-placeholder-content", children: [
-            /* @__PURE__ */ jsx4(
+          (!isConfigured || !pivotResult) && /* @__PURE__ */ jsx5("div", { className: "vpg-placeholder", children: /* @__PURE__ */ jsxs5("div", { className: "vpg-placeholder-content", children: [
+            /* @__PURE__ */ jsx5(
               "svg",
               {
                 className: "vpg-placeholder-icon",
                 fill: "none",
                 viewBox: "0 0 24 24",
                 stroke: "currentColor",
-                children: /* @__PURE__ */ jsx4(
+                children: /* @__PURE__ */ jsx5(
                   "path",
                   {
                     strokeLinecap: "round",
@@ -2160,53 +2526,53 @@ function PivotSkeleton({
                 )
               }
             ),
-            /* @__PURE__ */ jsx4("span", { className: "vpg-placeholder-text", children: valueFields.length === 0 ? /* @__PURE__ */ jsxs4(Fragment2, { children: [
+            /* @__PURE__ */ jsx5("span", { className: "vpg-placeholder-text", children: valueFields.length === 0 ? /* @__PURE__ */ jsxs5(Fragment3, { children: [
               "Add a ",
-              /* @__PURE__ */ jsx4("strong", { children: "Values" }),
+              /* @__PURE__ */ jsx5("strong", { children: "Values" }),
               " field to see your pivot table"
-            ] }) : rowFields.length === 0 && columnFields.length === 0 ? /* @__PURE__ */ jsxs4(Fragment2, { children: [
+            ] }) : rowFields.length === 0 && columnFields.length === 0 ? /* @__PURE__ */ jsxs5(Fragment3, { children: [
               "Add ",
-              /* @__PURE__ */ jsx4("strong", { children: "Row" }),
+              /* @__PURE__ */ jsx5("strong", { children: "Row" }),
               " or ",
-              /* @__PURE__ */ jsx4("strong", { children: "Column" }),
+              /* @__PURE__ */ jsx5("strong", { children: "Column" }),
               " fields to group your data"
             ] }) : "Your pivot table will appear here" })
           ] }) }),
-          isConfigured && pivotResult && /* @__PURE__ */ jsx4("div", { className: "vpg-table-container", children: /* @__PURE__ */ jsxs4("table", { className: "vpg-pivot-table", children: [
-            /* @__PURE__ */ jsx4("thead", { children: columnHeaderCells.map((headerRow, levelIdx) => /* @__PURE__ */ jsxs4("tr", { className: "vpg-column-header-row", children: [
-              levelIdx === 0 && /* @__PURE__ */ jsx4(
+          isConfigured && pivotResult && /* @__PURE__ */ jsx5("div", { className: "vpg-table-container", children: /* @__PURE__ */ jsxs5("table", { className: "vpg-pivot-table", children: [
+            /* @__PURE__ */ jsx5("thead", { children: columnHeaderCells.map((headerRow, levelIdx) => /* @__PURE__ */ jsxs5("tr", { className: "vpg-column-header-row", children: [
+              levelIdx === 0 && /* @__PURE__ */ jsx5(
                 "th",
                 {
                   className: "vpg-row-header-label",
                   rowSpan: columnHeaderCells.length,
                   onClick: () => toggleSort("row"),
-                  children: /* @__PURE__ */ jsxs4("div", { className: "vpg-header-content", children: [
-                    /* @__PURE__ */ jsx4("span", { children: rowFields.join(" / ") || "Rows" }),
-                    /* @__PURE__ */ jsx4("span", { className: `vpg-sort-indicator ${sortTarget === "row" ? "active" : ""}`, children: sortTarget === "row" ? sortDirection === "asc" ? "\u2191" : "\u2193" : "\u21C5" })
+                  children: /* @__PURE__ */ jsxs5("div", { className: "vpg-header-content", children: [
+                    /* @__PURE__ */ jsx5("span", { children: rowFields.join(" / ") || "Rows" }),
+                    /* @__PURE__ */ jsx5("span", { className: `vpg-sort-indicator ${sortTarget === "row" ? "active" : ""}`, children: sortTarget === "row" ? sortDirection === "asc" ? "\u2191" : "\u2193" : "\u21C5" })
                   ] })
                 }
               ),
-              headerRow.map((cell, idx) => /* @__PURE__ */ jsx4(
+              headerRow.map((cell, idx) => /* @__PURE__ */ jsx5(
                 "th",
                 {
                   className: "vpg-column-header-cell",
                   colSpan: cell.colspan,
                   onClick: () => levelIdx === columnHeaderCells.length - 1 && toggleSort(idx),
-                  children: /* @__PURE__ */ jsxs4("div", { className: "vpg-header-content", children: [
-                    /* @__PURE__ */ jsx4("span", { children: cell.label }),
-                    levelIdx === columnHeaderCells.length - 1 && /* @__PURE__ */ jsx4("span", { className: `vpg-sort-indicator ${sortTarget === idx ? "active" : ""}`, children: sortTarget === idx ? sortDirection === "asc" ? "\u2191" : "\u2193" : "\u21C5" })
+                  children: /* @__PURE__ */ jsxs5("div", { className: "vpg-header-content", children: [
+                    /* @__PURE__ */ jsx5("span", { children: cell.label }),
+                    levelIdx === columnHeaderCells.length - 1 && /* @__PURE__ */ jsx5("span", { className: `vpg-sort-indicator ${sortTarget === idx ? "active" : ""}`, children: sortTarget === idx ? sortDirection === "asc" ? "\u2191" : "\u2193" : "\u21C5" })
                   ] })
                 },
                 idx
               )),
-              pivotResult.rowTotals.length > 0 && levelIdx === 0 && /* @__PURE__ */ jsx4("th", { className: "vpg-total-header", rowSpan: columnHeaderCells.length, children: "Total" })
+              pivotResult.rowTotals.length > 0 && levelIdx === 0 && /* @__PURE__ */ jsx5("th", { className: "vpg-total-header", rowSpan: columnHeaderCells.length, children: "Total" })
             ] }, `header-${levelIdx}`)) }),
-            /* @__PURE__ */ jsxs4("tbody", { children: [
-              sortedRowIndices.map((sortedIdx) => /* @__PURE__ */ jsxs4("tr", { className: "vpg-data-row", children: [
-                /* @__PURE__ */ jsx4("th", { className: "vpg-row-header-cell", children: pivotResult.rowHeaders[sortedIdx].map((val, idx) => /* @__PURE__ */ jsx4("span", { className: "vpg-row-value", children: val }, idx)) }),
+            /* @__PURE__ */ jsxs5("tbody", { children: [
+              sortedRowIndices.map((sortedIdx) => /* @__PURE__ */ jsxs5("tr", { className: "vpg-data-row", children: [
+                /* @__PURE__ */ jsx5("th", { className: "vpg-row-header-cell", children: pivotResult.rowHeaders[sortedIdx].map((val, idx) => /* @__PURE__ */ jsx5("span", { className: "vpg-row-value", children: val }, idx)) }),
                 pivotResult.data[sortedIdx].map((cell, colIdx) => {
                   const displayRowIdx = sortedRowIndices.indexOf(sortedIdx);
-                  return /* @__PURE__ */ jsx4(
+                  return /* @__PURE__ */ jsx5(
                     "td",
                     {
                       className: `vpg-data-cell ${isCellSelected(displayRowIdx, colIdx) ? "selected" : ""} ${cell.value === null ? "vpg-is-null" : ""}`,
@@ -2217,46 +2583,46 @@ function PivotSkeleton({
                     colIdx
                   );
                 }),
-                pivotResult.rowTotals[sortedIdx] && /* @__PURE__ */ jsx4("td", { className: "vpg-data-cell vpg-total-cell", children: pivotResult.rowTotals[sortedIdx].formattedValue })
+                pivotResult.rowTotals[sortedIdx] && /* @__PURE__ */ jsx5("td", { className: "vpg-data-cell vpg-total-cell", children: pivotResult.rowTotals[sortedIdx].formattedValue })
               ] }, sortedIdx)),
-              pivotResult.columnTotals.length > 0 && /* @__PURE__ */ jsxs4("tr", { className: "vpg-totals-row", children: [
-                /* @__PURE__ */ jsx4("th", { className: "vpg-row-header-cell vpg-total-label", children: "Total" }),
-                pivotResult.columnTotals.map((cell, colIdx) => /* @__PURE__ */ jsx4("td", { className: "vpg-data-cell vpg-total-cell", children: cell.formattedValue }, colIdx)),
-                pivotResult.rowTotals.length > 0 && /* @__PURE__ */ jsx4("td", { className: "vpg-data-cell vpg-grand-total-cell", children: pivotResult.grandTotal.formattedValue })
+              pivotResult.columnTotals.length > 0 && /* @__PURE__ */ jsxs5("tr", { className: "vpg-totals-row", children: [
+                /* @__PURE__ */ jsx5("th", { className: "vpg-row-header-cell vpg-total-label", children: "Total" }),
+                pivotResult.columnTotals.map((cell, colIdx) => /* @__PURE__ */ jsx5("td", { className: "vpg-data-cell vpg-total-cell", children: cell.formattedValue }, colIdx)),
+                pivotResult.rowTotals.length > 0 && /* @__PURE__ */ jsx5("td", { className: "vpg-data-cell vpg-grand-total-cell", children: pivotResult.grandTotal.formattedValue })
               ] })
             ] })
           ] }) }),
-          isConfigured && pivotResult && /* @__PURE__ */ jsxs4("div", { className: "vpg-skeleton-footer", children: [
-            /* @__PURE__ */ jsxs4("span", { className: "vpg-footer-info", children: [
+          isConfigured && pivotResult && /* @__PURE__ */ jsxs5("div", { className: "vpg-skeleton-footer", children: [
+            /* @__PURE__ */ jsxs5("span", { className: "vpg-footer-info", children: [
               pivotResult.rowHeaders.length,
               " rows \xD7 ",
               pivotResult.data[0]?.length || 0,
               " columns"
             ] }),
-            selectionStats && selectionStats.count > 1 && /* @__PURE__ */ jsxs4("div", { className: "vpg-selection-stats", children: [
-              /* @__PURE__ */ jsxs4("span", { className: "vpg-stat", children: [
-                /* @__PURE__ */ jsx4("span", { className: "vpg-stat-label", children: "Count:" }),
-                /* @__PURE__ */ jsx4("span", { className: "vpg-stat-value", children: selectionStats.count })
+            selectionStats && selectionStats.count > 1 && /* @__PURE__ */ jsxs5("div", { className: "vpg-selection-stats", children: [
+              /* @__PURE__ */ jsxs5("span", { className: "vpg-stat", children: [
+                /* @__PURE__ */ jsx5("span", { className: "vpg-stat-label", children: "Count:" }),
+                /* @__PURE__ */ jsx5("span", { className: "vpg-stat-value", children: selectionStats.count })
               ] }),
-              selectionStats.numericCount > 0 && /* @__PURE__ */ jsxs4(Fragment2, { children: [
-                /* @__PURE__ */ jsx4("span", { className: "vpg-stat-divider", children: "|" }),
-                /* @__PURE__ */ jsxs4("span", { className: "vpg-stat", children: [
-                  /* @__PURE__ */ jsx4("span", { className: "vpg-stat-label", children: "Sum:" }),
-                  /* @__PURE__ */ jsx4("span", { className: "vpg-stat-value", children: formatStatValue(selectionStats.sum) })
+              selectionStats.numericCount > 0 && /* @__PURE__ */ jsxs5(Fragment3, { children: [
+                /* @__PURE__ */ jsx5("span", { className: "vpg-stat-divider", children: "|" }),
+                /* @__PURE__ */ jsxs5("span", { className: "vpg-stat", children: [
+                  /* @__PURE__ */ jsx5("span", { className: "vpg-stat-label", children: "Sum:" }),
+                  /* @__PURE__ */ jsx5("span", { className: "vpg-stat-value", children: formatStatValue(selectionStats.sum) })
                 ] }),
-                /* @__PURE__ */ jsx4("span", { className: "vpg-stat-divider", children: "|" }),
-                /* @__PURE__ */ jsxs4("span", { className: "vpg-stat", children: [
-                  /* @__PURE__ */ jsx4("span", { className: "vpg-stat-label", children: "Avg:" }),
-                  /* @__PURE__ */ jsx4("span", { className: "vpg-stat-value", children: formatStatValue(selectionStats.avg) })
+                /* @__PURE__ */ jsx5("span", { className: "vpg-stat-divider", children: "|" }),
+                /* @__PURE__ */ jsxs5("span", { className: "vpg-stat", children: [
+                  /* @__PURE__ */ jsx5("span", { className: "vpg-stat-label", children: "Avg:" }),
+                  /* @__PURE__ */ jsx5("span", { className: "vpg-stat-value", children: formatStatValue(selectionStats.avg) })
                 ] })
               ] })
             ] })
           ] })
         ] }),
-        showWatermark && canUsePivot && /* @__PURE__ */ jsx4("div", { className: `vpg-watermark ${isDemo ? "vpg-demo-mode" : ""}`, children: isDemo ? /* @__PURE__ */ jsxs4(Fragment2, { children: [
-          /* @__PURE__ */ jsx4("span", { className: "vpg-demo-badge", children: "DEMO" }),
-          /* @__PURE__ */ jsx4("span", { children: "Pro features unlocked for evaluation" }),
-          /* @__PURE__ */ jsx4(
+        showWatermark && canUsePivot && /* @__PURE__ */ jsx5("div", { className: `vpg-watermark ${isDemo ? "vpg-demo-mode" : ""}`, children: isDemo ? /* @__PURE__ */ jsxs5(Fragment3, { children: [
+          /* @__PURE__ */ jsx5("span", { className: "vpg-demo-badge", children: "DEMO" }),
+          /* @__PURE__ */ jsx5("span", { children: "Pro features unlocked for evaluation" }),
+          /* @__PURE__ */ jsx5(
             "a",
             {
               href: "https://tiny-pivot.com/#pricing",
@@ -2266,14 +2632,14 @@ function PivotSkeleton({
               children: "Get Pro License \u2192"
             }
           )
-        ] }) : /* @__PURE__ */ jsx4("a", { href: "https://tiny-pivot.com", target: "_blank", rel: "noopener noreferrer", children: "Powered by TinyPivot" }) })
+        ] }) : /* @__PURE__ */ jsx5("a", { href: "https://tiny-pivot.com", target: "_blank", rel: "noopener noreferrer", children: "Powered by TinyPivot" }) })
       ]
     }
   );
 }
 
 // src/components/DataGrid.tsx
-import { Fragment as Fragment3, jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
 var MIN_COL_WIDTH = 120;
 var MAX_COL_WIDTH = 350;
 function DataGrid({
@@ -2299,35 +2665,35 @@ function DataGrid({
   onCopy
 }) {
   const { showWatermark, canUsePivot, isDemo } = useLicense();
-  const currentTheme = useMemo9(() => {
+  const currentTheme = useMemo10(() => {
     if (theme === "auto") {
       return window.matchMedia?.("(prefers-color-scheme: dark)").matches ? "dark" : "light";
     }
     return theme;
   }, [theme]);
-  const [currentFontSize, setCurrentFontSize] = useState9(initialFontSize);
-  const [globalSearchTerm, setGlobalSearchTerm] = useState9("");
-  const [showSearchInput, setShowSearchInput] = useState9(false);
-  const [currentPage, setCurrentPage] = useState9(1);
-  const [columnWidths, setColumnWidths] = useState9({});
-  const [resizingColumnId, setResizingColumnId] = useState9(null);
-  const [resizeStartX, setResizeStartX] = useState9(0);
-  const [resizeStartWidth, setResizeStartWidth] = useState9(0);
-  const [gridHeight, setGridHeight] = useState9(initialHeight);
-  const [isResizingVertically, setIsResizingVertically] = useState9(false);
-  const [verticalResizeStartY, setVerticalResizeStartY] = useState9(0);
-  const [verticalResizeStartHeight, setVerticalResizeStartHeight] = useState9(0);
-  const [showCopyToast, setShowCopyToast] = useState9(false);
-  const [copyToastMessage, setCopyToastMessage] = useState9("");
-  const [viewMode, setViewMode] = useState9("grid");
-  const [showPivotConfig, setShowPivotConfig] = useState9(true);
-  const [draggingField, setDraggingField] = useState9(null);
-  const [activeFilterColumn, setActiveFilterColumn] = useState9(null);
-  const [filterDropdownPosition, setFilterDropdownPosition] = useState9({ top: 0, left: 0, maxHeight: 400 });
-  const [selectedCell, setSelectedCell] = useState9(null);
-  const [selectionStart, setSelectionStart] = useState9(null);
-  const [selectionEnd, setSelectionEnd] = useState9(null);
-  const [isSelecting, setIsSelecting] = useState9(false);
+  const [currentFontSize, setCurrentFontSize] = useState10(initialFontSize);
+  const [globalSearchTerm, setGlobalSearchTerm] = useState10("");
+  const [showSearchInput, setShowSearchInput] = useState10(false);
+  const [currentPage, setCurrentPage] = useState10(1);
+  const [columnWidths, setColumnWidths] = useState10({});
+  const [resizingColumnId, setResizingColumnId] = useState10(null);
+  const [resizeStartX, setResizeStartX] = useState10(0);
+  const [resizeStartWidth, setResizeStartWidth] = useState10(0);
+  const [gridHeight, setGridHeight] = useState10(initialHeight);
+  const [isResizingVertically, setIsResizingVertically] = useState10(false);
+  const [verticalResizeStartY, setVerticalResizeStartY] = useState10(0);
+  const [verticalResizeStartHeight, setVerticalResizeStartHeight] = useState10(0);
+  const [showCopyToast, setShowCopyToast] = useState10(false);
+  const [copyToastMessage, setCopyToastMessage] = useState10("");
+  const [viewMode, setViewMode] = useState10("grid");
+  const [showPivotConfig, setShowPivotConfig] = useState10(true);
+  const [draggingField, setDraggingField] = useState10(null);
+  const [activeFilterColumn, setActiveFilterColumn] = useState10(null);
+  const [filterDropdownPosition, setFilterDropdownPosition] = useState10({ top: 0, left: 0, maxHeight: 400 });
+  const [selectedCell, setSelectedCell] = useState10(null);
+  const [selectionStart, setSelectionStart] = useState10(null);
+  const [selectionEnd, setSelectionEnd] = useState10(null);
+  const [isSelecting, setIsSelecting] = useState10(false);
   const tableContainerRef = useRef2(null);
   const tableBodyRef = useRef2(null);
   const fontSizeOptions = [
@@ -2348,9 +2714,12 @@ function DataGrid({
     toggleSort,
     getSortDirection,
     columnFilters,
-    activeFilters
+    activeFilters,
+    // Numeric range filters
+    setNumericRangeFilter,
+    getNumericRangeFilter
   } = useExcelGrid({ data, enableSorting: true, enableFiltering: true });
-  const filteredDataForPivot = useMemo9(() => {
+  const filteredDataForPivot = useMemo10(() => {
     const filteredRows = table.getFilteredRowModel().rows;
     return filteredRows.map((row) => row.original);
   }, [table, columnFilters]);
@@ -2380,7 +2749,7 @@ function DataGrid({
     addCalculatedField,
     removeCalculatedField
   } = usePivotTable(filteredDataForPivot);
-  const activeFilterInfo = useMemo9(() => {
+  const activeFilterInfo = useMemo10(() => {
     if (activeFilters.length === 0) return null;
     return activeFilters.map((f) => ({
       column: f.column,
@@ -2388,8 +2757,8 @@ function DataGrid({
       values: f.values || []
     }));
   }, [activeFilters]);
-  const rows = useMemo9(() => table.getFilteredRowModel().rows, [table, columnFilters]);
-  const searchFilteredData = useMemo9(() => {
+  const rows = useMemo10(() => table.getFilteredRowModel().rows, [table, columnFilters]);
+  const searchFilteredData = useMemo10(() => {
     if (!globalSearchTerm.trim() || !enableSearch) {
       return rows;
     }
@@ -2406,20 +2775,20 @@ function DataGrid({
     });
   }, [rows, globalSearchTerm, enableSearch, columnKeys]);
   const totalSearchedRows = searchFilteredData.length;
-  const totalPages = useMemo9(() => {
+  const totalPages = useMemo10(() => {
     if (!enablePagination) return 1;
     return Math.max(1, Math.ceil(totalSearchedRows / pageSize));
   }, [enablePagination, totalSearchedRows, pageSize]);
-  const paginatedRows = useMemo9(() => {
+  const paginatedRows = useMemo10(() => {
     if (!enablePagination) return searchFilteredData;
     const start = (currentPage - 1) * pageSize;
     const end = start + pageSize;
     return searchFilteredData.slice(start, end);
   }, [enablePagination, searchFilteredData, currentPage, pageSize]);
-  useEffect6(() => {
+  useEffect7(() => {
     setCurrentPage(1);
   }, [columnFilters, globalSearchTerm]);
-  const selectionBounds = useMemo9(() => {
+  const selectionBounds = useMemo10(() => {
     if (!selectionStart || !selectionEnd) return null;
     return {
       minRow: Math.min(selectionStart.row, selectionEnd.row),
@@ -2428,7 +2797,7 @@ function DataGrid({
       maxCol: Math.max(selectionStart.col, selectionEnd.col)
     };
   }, [selectionStart, selectionEnd]);
-  const selectionStats = useMemo9(() => {
+  const selectionStats = useMemo10(() => {
     if (!selectionBounds) return null;
     const { minRow, maxRow, minCol, maxCol } = selectionBounds;
     const values = [];
@@ -2454,7 +2823,7 @@ function DataGrid({
     const avg = sum / values.length;
     return { count, sum, avg, numericCount: values.length };
   }, [selectionBounds, rows, columnKeys]);
-  useEffect6(() => {
+  useEffect7(() => {
     if (data.length === 0) return;
     const widths = {};
     const sampleSize = Math.min(100, data.length);
@@ -2474,7 +2843,7 @@ function DataGrid({
     }
     setColumnWidths(widths);
   }, [data, columnKeys]);
-  const startColumnResize = useCallback9(
+  const startColumnResize = useCallback10(
     (columnId, event) => {
       if (!enableColumnResize) return;
       event.preventDefault();
@@ -2485,7 +2854,7 @@ function DataGrid({
     },
     [enableColumnResize, columnWidths]
   );
-  useEffect6(() => {
+  useEffect7(() => {
     if (!resizingColumnId) return;
     const handleResizeMove = (event) => {
       const diff = event.clientX - resizeStartX;
@@ -2505,7 +2874,7 @@ function DataGrid({
       document.removeEventListener("mouseup", handleResizeEnd);
     };
   }, [resizingColumnId, resizeStartX, resizeStartWidth]);
-  const startVerticalResize = useCallback9(
+  const startVerticalResize = useCallback10(
     (event) => {
       if (!enableVerticalResize) return;
       event.preventDefault();
@@ -2515,7 +2884,7 @@ function DataGrid({
     },
     [enableVerticalResize, gridHeight]
   );
-  useEffect6(() => {
+  useEffect7(() => {
     if (!isResizingVertically) return;
     const handleVerticalResizeMove = (event) => {
       const diff = event.clientY - verticalResizeStartY;
@@ -2532,7 +2901,7 @@ function DataGrid({
       document.removeEventListener("mouseup", handleVerticalResizeEnd);
     };
   }, [isResizingVertically, verticalResizeStartY, verticalResizeStartHeight, minHeight, maxHeight]);
-  const handleExport = useCallback9(() => {
+  const handleExport = useCallback10(() => {
     if (viewMode === "pivot") {
       if (!pivotResult) return;
       const pivotFilename = exportFilename.replace(".csv", "-pivot.csv");
@@ -2577,7 +2946,7 @@ function DataGrid({
     columnKeys,
     onExport
   ]);
-  const copySelectionToClipboard = useCallback9(() => {
+  const copySelectionToClipboard = useCallback10(() => {
     if (!selectionBounds || !enableClipboard) return;
     const text = formatSelectionForClipboard(
       rows.map((r) => r.original),
@@ -2601,7 +2970,7 @@ function DataGrid({
       }
     );
   }, [selectionBounds, enableClipboard, rows, columnKeys, onCopy]);
-  const handleMouseDown = useCallback9(
+  const handleMouseDown = useCallback10(
     (rowIndex, colIndex, event) => {
       event.preventDefault();
       if (event.shiftKey && selectedCell) {
@@ -2625,7 +2994,7 @@ function DataGrid({
     },
     [selectedCell, rows, columnKeys, onCellClick]
   );
-  const handleMouseEnter = useCallback9(
+  const handleMouseEnter = useCallback10(
     (rowIndex, colIndex) => {
       if (isSelecting) {
         setSelectionEnd({ row: rowIndex, col: colIndex });
@@ -2633,12 +3002,12 @@ function DataGrid({
     },
     [isSelecting]
   );
-  useEffect6(() => {
+  useEffect7(() => {
     const handleMouseUp = () => setIsSelecting(false);
     document.addEventListener("mouseup", handleMouseUp);
     return () => document.removeEventListener("mouseup", handleMouseUp);
   }, []);
-  useEffect6(() => {
+  useEffect7(() => {
     const handleKeydown = (event) => {
       if ((event.ctrlKey || event.metaKey) && event.key === "c" && selectionBounds) {
         event.preventDefault();
@@ -2656,7 +3025,7 @@ function DataGrid({
     document.addEventListener("keydown", handleKeydown);
     return () => document.removeEventListener("keydown", handleKeydown);
   }, [selectionBounds, copySelectionToClipboard]);
-  const openFilterDropdown = useCallback9(
+  const openFilterDropdown = useCallback10(
     (columnId, event) => {
       event.stopPropagation();
       const target = event.currentTarget;
@@ -2685,16 +3054,22 @@ function DataGrid({
     },
     []
   );
-  const closeFilterDropdown = useCallback9(() => {
+  const closeFilterDropdown = useCallback10(() => {
     setActiveFilterColumn(null);
   }, []);
-  const handleFilter = useCallback9(
+  const handleFilter = useCallback10(
     (columnId, values) => {
       setColumnFilter(columnId, values);
     },
     [setColumnFilter]
   );
-  const handleSort = useCallback9(
+  const handleRangeFilter = useCallback10(
+    (columnId, range) => {
+      setNumericRangeFilter(columnId, range);
+    },
+    [setNumericRangeFilter]
+  );
+  const handleSort = useCallback10(
     (columnId, direction) => {
       if (direction === null) {
         const current = getSortDirection(columnId);
@@ -2718,7 +3093,7 @@ function DataGrid({
     },
     [getSortDirection, toggleSort]
   );
-  const isCellSelected = useCallback9(
+  const isCellSelected = useCallback10(
     (rowIndex, colIndex) => {
       if (!selectionBounds) {
         return selectedCell?.row === rowIndex && selectedCell?.col === colIndex;
@@ -2756,30 +3131,30 @@ function DataGrid({
     }
     return String(value);
   };
-  const totalTableWidth = useMemo9(() => {
+  const totalTableWidth = useMemo10(() => {
     return columnKeys.reduce((sum, key) => sum + (columnWidths[key] || MIN_COL_WIDTH), 0);
   }, [columnKeys, columnWidths]);
   const activeFilterCount = columnFilters.length;
-  return /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs6(
     "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__ */ jsxs5("div", { className: "vpg-toast", children: [
-          /* @__PURE__ */ jsx5("svg", { className: "vpg-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx5("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) }),
+        showCopyToast && /* @__PURE__ */ jsxs6("div", { className: "vpg-toast", children: [
+          /* @__PURE__ */ jsx6("svg", { className: "vpg-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx6("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) }),
           copyToastMessage
         ] }),
-        /* @__PURE__ */ jsxs5("div", { className: "vpg-toolbar", children: [
-          /* @__PURE__ */ jsxs5("div", { className: "vpg-toolbar-left", children: [
-            showPivot && /* @__PURE__ */ jsxs5("div", { className: "vpg-view-toggle", children: [
-              /* @__PURE__ */ jsxs5(
+        /* @__PURE__ */ jsxs6("div", { className: "vpg-toolbar", children: [
+          /* @__PURE__ */ jsxs6("div", { className: "vpg-toolbar-left", children: [
+            showPivot && /* @__PURE__ */ jsxs6("div", { className: "vpg-view-toggle", children: [
+              /* @__PURE__ */ jsxs6(
                 "button",
                 {
                   className: `vpg-view-btn ${viewMode === "grid" ? "active" : ""}`,
                   onClick: () => setViewMode("grid"),
                   children: [
-                    /* @__PURE__ */ jsx5("svg", { className: "vpg-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx5(
+                    /* @__PURE__ */ jsx6("svg", { className: "vpg-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx6(
                       "path",
                       {
                         strokeLinecap: "round",
@@ -2792,13 +3167,13 @@ function DataGrid({
                   ]
                 }
               ),
-              /* @__PURE__ */ jsxs5(
+              /* @__PURE__ */ jsxs6(
                 "button",
                 {
                   className: `vpg-view-btn vpg-pivot-btn ${viewMode === "pivot" ? "active" : ""}`,
                   onClick: () => setViewMode("pivot"),
                   children: [
-                    /* @__PURE__ */ jsx5("svg", { className: "vpg-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx5(
+                    /* @__PURE__ */ jsx6("svg", { className: "vpg-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx6(
                       "path",
                       {
                         strokeLinecap: "round",
@@ -2812,14 +3187,14 @@ function DataGrid({
                 }
               )
             ] }),
-            viewMode === "grid" && /* @__PURE__ */ jsxs5(Fragment3, { children: [
-              enableSearch && /* @__PURE__ */ jsx5("div", { className: "vpg-search-container", children: !showSearchInput ? /* @__PURE__ */ jsx5(
+            viewMode === "grid" && /* @__PURE__ */ jsxs6(Fragment4, { children: [
+              enableSearch && /* @__PURE__ */ jsx6("div", { className: "vpg-search-container", children: !showSearchInput ? /* @__PURE__ */ jsx6(
                 "button",
                 {
                   className: "vpg-icon-btn",
                   title: "Search (Ctrl+F)",
                   onClick: () => setShowSearchInput(true),
-                  children: /* @__PURE__ */ jsx5("svg", { className: "vpg-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx5(
+                  children: /* @__PURE__ */ jsx6("svg", { className: "vpg-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx6(
                     "path",
                     {
                       strokeLinecap: "round",
@@ -2829,15 +3204,15 @@ function DataGrid({
                     }
                   ) })
                 }
-              ) : /* @__PURE__ */ jsxs5("div", { className: "vpg-search-box", children: [
-                /* @__PURE__ */ jsx5(
+              ) : /* @__PURE__ */ jsxs6("div", { className: "vpg-search-box", children: [
+                /* @__PURE__ */ jsx6(
                   "svg",
                   {
                     className: "vpg-search-icon",
                     fill: "none",
                     stroke: "currentColor",
                     viewBox: "0 0 24 24",
-                    children: /* @__PURE__ */ jsx5(
+                    children: /* @__PURE__ */ jsx6(
                       "path",
                       {
                         strokeLinecap: "round",
@@ -2848,7 +3223,7 @@ function DataGrid({
                     )
                   }
                 ),
-                /* @__PURE__ */ jsx5(
+                /* @__PURE__ */ jsx6(
                   "input",
                   {
                     type: "text",
@@ -2865,14 +3240,14 @@ function DataGrid({
                     autoFocus: true
                   }
                 ),
-                globalSearchTerm && /* @__PURE__ */ jsx5("button", { className: "vpg-search-clear", onClick: () => setGlobalSearchTerm(""), children: /* @__PURE__ */ jsx5(
+                globalSearchTerm && /* @__PURE__ */ jsx6("button", { className: "vpg-search-clear", onClick: () => setGlobalSearchTerm(""), children: /* @__PURE__ */ jsx6(
                   "svg",
                   {
                     className: "vpg-icon-xs",
                     fill: "none",
                     stroke: "currentColor",
                     viewBox: "0 0 24 24",
-                    children: /* @__PURE__ */ jsx5(
+                    children: /* @__PURE__ */ jsx6(
                       "path",
                       {
                         strokeLinecap: "round",
@@ -2884,9 +3259,9 @@ function DataGrid({
                   }
                 ) })
               ] }) }),
-              /* @__PURE__ */ jsxs5("div", { className: "vpg-font-size-control", children: [
-                /* @__PURE__ */ jsx5("span", { className: "vpg-label", children: "Size:" }),
-                /* @__PURE__ */ jsx5("div", { className: "vpg-font-size-toggle", children: fontSizeOptions.map((opt) => /* @__PURE__ */ jsx5(
+              /* @__PURE__ */ jsxs6("div", { className: "vpg-font-size-control", children: [
+                /* @__PURE__ */ jsx6("span", { className: "vpg-label", children: "Size:" }),
+                /* @__PURE__ */ jsx6("div", { className: "vpg-font-size-toggle", children: fontSizeOptions.map((opt) => /* @__PURE__ */ jsx6(
                   "button",
                   {
                     className: `vpg-font-size-btn ${currentFontSize === opt.value ? "active" : ""}`,
@@ -2896,8 +3271,8 @@ function DataGrid({
                   opt.value
                 )) })
               ] }),
-              activeFilterCount > 0 && /* @__PURE__ */ jsxs5("div", { className: "vpg-filter-info", children: [
-                /* @__PURE__ */ jsx5("svg", { className: "vpg-icon", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx5(
+              activeFilterCount > 0 && /* @__PURE__ */ jsxs6("div", { className: "vpg-filter-info", children: [
+                /* @__PURE__ */ jsx6("svg", { className: "vpg-icon", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx6(
                   "path",
                   {
                     fillRule: "evenodd",
@@ -2905,26 +3280,26 @@ function DataGrid({
                     clipRule: "evenodd"
                   }
                 ) }),
-                /* @__PURE__ */ jsxs5("span", { children: [
+                /* @__PURE__ */ jsxs6("span", { children: [
                   activeFilterCount,
                   " filter",
                   activeFilterCount > 1 ? "s" : ""
                 ] })
               ] }),
-              globalSearchTerm && /* @__PURE__ */ jsx5("div", { className: "vpg-search-info", children: /* @__PURE__ */ jsxs5("span", { children: [
+              globalSearchTerm && /* @__PURE__ */ jsx6("div", { className: "vpg-search-info", children: /* @__PURE__ */ jsxs6("span", { children: [
                 totalSearchedRows,
                 " match",
                 totalSearchedRows !== 1 ? "es" : ""
               ] }) })
             ] }),
-            viewMode === "pivot" && canUsePivot && /* @__PURE__ */ jsxs5(Fragment3, { children: [
-              /* @__PURE__ */ jsxs5(
+            viewMode === "pivot" && canUsePivot && /* @__PURE__ */ jsxs6(Fragment4, { children: [
+              /* @__PURE__ */ jsxs6(
                 "button",
                 {
                   className: `vpg-config-toggle ${showPivotConfig ? "active" : ""}`,
                   onClick: () => setShowPivotConfig(!showPivotConfig),
                   children: [
-                    /* @__PURE__ */ jsx5("svg", { className: "vpg-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx5(
+                    /* @__PURE__ */ jsx6("svg", { className: "vpg-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx6(
                       "path",
                       {
                         strokeLinecap: "round",
@@ -2938,8 +3313,8 @@ function DataGrid({
                   ]
                 }
               ),
-              pivotIsConfigured && /* @__PURE__ */ jsxs5("div", { className: "vpg-pivot-status", children: [
-                /* @__PURE__ */ jsx5("svg", { className: "vpg-icon", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx5(
+              pivotIsConfigured && /* @__PURE__ */ jsxs6("div", { className: "vpg-pivot-status", children: [
+                /* @__PURE__ */ jsx6("svg", { className: "vpg-icon", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx6(
                   "path",
                   {
                     fillRule: "evenodd",
@@ -2947,13 +3322,13 @@ function DataGrid({
                     clipRule: "evenodd"
                   }
                 ) }),
-                /* @__PURE__ */ jsx5("span", { children: "Pivot configured" })
+                /* @__PURE__ */ jsx6("span", { children: "Pivot configured" })
               ] })
             ] })
           ] }),
-          /* @__PURE__ */ jsxs5("div", { className: "vpg-toolbar-right", children: [
-            viewMode === "grid" && activeFilterCount > 0 && /* @__PURE__ */ jsxs5("button", { className: "vpg-clear-filters", onClick: clearAllFilters, children: [
-              /* @__PURE__ */ jsx5("svg", { className: "vpg-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx5(
+          /* @__PURE__ */ jsxs6("div", { className: "vpg-toolbar-right", children: [
+            viewMode === "grid" && activeFilterCount > 0 && /* @__PURE__ */ jsxs6("button", { className: "vpg-clear-filters", onClick: clearAllFilters, children: [
+              /* @__PURE__ */ jsx6("svg", { className: "vpg-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx6(
                 "path",
                 {
                   strokeLinecap: "round",
@@ -2964,13 +3339,13 @@ function DataGrid({
               ) }),
               "Clear Filters"
             ] }),
-            enableClipboard && selectionBounds && viewMode === "grid" && /* @__PURE__ */ jsx5(
+            enableClipboard && selectionBounds && viewMode === "grid" && /* @__PURE__ */ jsx6(
               "button",
               {
                 className: "vpg-icon-btn",
                 title: "Copy selection (Ctrl+C)",
                 onClick: copySelectionToClipboard,
-                children: /* @__PURE__ */ jsx5("svg", { className: "vpg-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx5(
+                children: /* @__PURE__ */ jsx6("svg", { className: "vpg-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx6(
                   "path",
                   {
                     strokeLinecap: "round",
@@ -2981,14 +3356,14 @@ function DataGrid({
                 ) })
               }
             ),
-            enableExport && (viewMode === "grid" || viewMode === "pivot" && pivotIsConfigured) && /* @__PURE__ */ jsxs5(
+            enableExport && (viewMode === "grid" || viewMode === "pivot" && pivotIsConfigured) && /* @__PURE__ */ jsxs6(
               "button",
               {
                 className: "vpg-export-btn",
                 title: viewMode === "pivot" ? "Export Pivot to CSV" : "Export to CSV",
                 onClick: handleExport,
                 children: [
-                  /* @__PURE__ */ jsx5("svg", { className: "vpg-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx5(
+                  /* @__PURE__ */ jsx6("svg", { className: "vpg-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx6(
                     "path",
                     {
                       strokeLinecap: "round",
@@ -3004,13 +3379,13 @@ function DataGrid({
             )
           ] })
         ] }),
-        viewMode === "grid" && /* @__PURE__ */ jsxs5("div", { ref: tableContainerRef, className: "vpg-grid-container", tabIndex: 0, children: [
-          loading && /* @__PURE__ */ jsxs5("div", { className: "vpg-loading", children: [
-            /* @__PURE__ */ jsx5("div", { className: "vpg-spinner" }),
-            /* @__PURE__ */ jsx5("span", { children: "Loading data..." })
+        viewMode === "grid" && /* @__PURE__ */ jsxs6("div", { ref: tableContainerRef, className: "vpg-grid-container", tabIndex: 0, children: [
+          loading && /* @__PURE__ */ jsxs6("div", { className: "vpg-loading", children: [
+            /* @__PURE__ */ jsx6("div", { className: "vpg-spinner" }),
+            /* @__PURE__ */ jsx6("span", { children: "Loading data..." })
           ] }),
-          !loading && data.length === 0 && /* @__PURE__ */ jsxs5("div", { className: "vpg-empty", children: [
-            /* @__PURE__ */ jsx5("div", { className: "vpg-empty-icon", children: /* @__PURE__ */ jsx5("svg", { className: "vpg-icon-lg", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx5(
+          !loading && data.length === 0 && /* @__PURE__ */ jsxs6("div", { className: "vpg-empty", children: [
+            /* @__PURE__ */ jsx6("div", { className: "vpg-empty-icon", children: /* @__PURE__ */ jsx6("svg", { className: "vpg-icon-lg", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx6(
               "path",
               {
                 strokeLinecap: "round",
@@ -3019,10 +3394,10 @@ function DataGrid({
                 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__ */ jsx5("span", { children: "No data available" })
+            /* @__PURE__ */ jsx6("span", { children: "No data available" })
           ] }),
-          !loading && data.length > 0 && filteredRowCount === 0 && /* @__PURE__ */ jsxs5("div", { className: "vpg-empty", children: [
-            /* @__PURE__ */ jsx5("div", { className: "vpg-empty-icon vpg-warning", children: /* @__PURE__ */ jsx5("svg", { className: "vpg-icon-lg", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx5(
+          !loading && data.length > 0 && filteredRowCount === 0 && /* @__PURE__ */ jsxs6("div", { className: "vpg-empty", children: [
+            /* @__PURE__ */ jsx6("div", { className: "vpg-empty-icon vpg-warning", children: /* @__PURE__ */ jsx6("svg", { className: "vpg-icon-lg", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx6(
               "path",
               {
                 strokeLinecap: "round",
@@ -3031,11 +3406,11 @@ function DataGrid({
                 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__ */ jsx5("span", { children: "No matching records" }),
-            /* @__PURE__ */ jsx5("button", { className: "vpg-clear-link", onClick: clearAllFilters, children: "Clear all filters" })
+            /* @__PURE__ */ jsx6("span", { children: "No matching records" }),
+            /* @__PURE__ */ jsx6("button", { className: "vpg-clear-link", onClick: clearAllFilters, children: "Clear all filters" })
           ] }),
-          !loading && filteredRowCount > 0 && /* @__PURE__ */ jsx5("div", { className: "vpg-table-wrapper", children: /* @__PURE__ */ jsxs5("table", { className: "vpg-table", style: { minWidth: `${totalTableWidth}px` }, children: [
-            /* @__PURE__ */ jsx5("thead", { children: /* @__PURE__ */ jsx5("tr", { children: columnKeys.map((colId, colIndex) => /* @__PURE__ */ jsxs5(
+          !loading && filteredRowCount > 0 && /* @__PURE__ */ jsx6("div", { className: "vpg-table-wrapper", children: /* @__PURE__ */ jsxs6("table", { className: "vpg-table", style: { minWidth: `${totalTableWidth}px` }, children: [
+            /* @__PURE__ */ jsx6("thead", { children: /* @__PURE__ */ jsx6("tr", { children: columnKeys.map((colId, colIndex) => /* @__PURE__ */ jsxs6(
               "th",
               {
                 className: `vpg-header-cell ${hasActiveFilter(colId) ? "vpg-has-filter" : ""} ${getSortDirection(colId) !== null ? "vpg-is-sorted" : ""} ${activeFilterColumn === colId ? "vpg-is-active" : ""}`,
@@ -3050,16 +3425,16 @@ function DataGrid({
                   }
                 },
                 children: [
-                  /* @__PURE__ */ jsxs5("div", { className: "vpg-header-content", children: [
-                    /* @__PURE__ */ jsx5("span", { className: "vpg-header-text", children: colId }),
-                    /* @__PURE__ */ jsxs5("div", { className: "vpg-header-icons", children: [
-                      getSortDirection(colId) && /* @__PURE__ */ jsx5("span", { className: "vpg-sort-indicator", children: getSortDirection(colId) === "asc" ? /* @__PURE__ */ jsx5(
+                  /* @__PURE__ */ jsxs6("div", { className: "vpg-header-content", children: [
+                    /* @__PURE__ */ jsx6("span", { className: "vpg-header-text", children: colId }),
+                    /* @__PURE__ */ jsxs6("div", { className: "vpg-header-icons", children: [
+                      getSortDirection(colId) && /* @__PURE__ */ jsx6("span", { className: "vpg-sort-indicator", children: getSortDirection(colId) === "asc" ? /* @__PURE__ */ jsx6(
                         "svg",
                         {
                           className: "vpg-icon-sm",
                           fill: "currentColor",
                           viewBox: "0 0 20 20",
-                          children: /* @__PURE__ */ jsx5(
+                          children: /* @__PURE__ */ jsx6(
                             "path",
                             {
                               fillRule: "evenodd",
@@ -3068,13 +3443,13 @@ function DataGrid({
                             }
                           )
                         }
-                      ) : /* @__PURE__ */ jsx5(
+                      ) : /* @__PURE__ */ jsx6(
                         "svg",
                         {
                           className: "vpg-icon-sm",
                           fill: "currentColor",
                           viewBox: "0 0 20 20",
-                          children: /* @__PURE__ */ jsx5(
+                          children: /* @__PURE__ */ jsx6(
                             "path",
                             {
                               fillRule: "evenodd",
@@ -3084,13 +3459,13 @@ function DataGrid({
                           )
                         }
                       ) }),
-                      hasActiveFilter(colId) && /* @__PURE__ */ jsx5("span", { className: "vpg-filter-indicator", children: /* @__PURE__ */ jsx5(
+                      hasActiveFilter(colId) && /* @__PURE__ */ jsx6("span", { className: "vpg-filter-indicator", children: /* @__PURE__ */ jsx6(
                         "svg",
                         {
                           className: "vpg-icon-xs",
                           fill: "currentColor",
                           viewBox: "0 0 20 20",
-                          children: /* @__PURE__ */ jsx5(
+                          children: /* @__PURE__ */ jsx6(
                             "path",
                             {
                               fillRule: "evenodd",
@@ -3100,14 +3475,14 @@ function DataGrid({
                           )
                         }
                       ) }),
-                      /* @__PURE__ */ jsx5("span", { className: "vpg-dropdown-arrow", title: "Filter & Sort", children: /* @__PURE__ */ jsx5(
+                      /* @__PURE__ */ jsx6("span", { className: "vpg-dropdown-arrow", title: "Filter & Sort", children: /* @__PURE__ */ jsx6(
                         "svg",
                         {
                           className: "vpg-icon-sm",
                           fill: "none",
                           stroke: "currentColor",
                           viewBox: "0 0 24 24",
-                          children: /* @__PURE__ */ jsx5(
+                          children: /* @__PURE__ */ jsx6(
                             "path",
                             {
                               strokeLinecap: "round",
@@ -3120,7 +3495,7 @@ function DataGrid({
                       ) })
                     ] })
                   ] }),
-                  enableColumnResize && /* @__PURE__ */ jsx5(
+                  enableColumnResize && /* @__PURE__ */ jsx6(
                     "div",
                     {
                       className: "vpg-resize-handle",
@@ -3131,7 +3506,7 @@ function DataGrid({
               },
               colId
             )) }) }),
-            /* @__PURE__ */ jsx5("tbody", { ref: tableBodyRef, children: paginatedRows.map((row, rowIndex) => /* @__PURE__ */ jsx5("tr", { className: "vpg-row", children: columnKeys.map((colId, colIndex) => /* @__PURE__ */ jsx5(
+            /* @__PURE__ */ jsx6("tbody", { ref: tableBodyRef, children: paginatedRows.map((row, rowIndex) => /* @__PURE__ */ jsx6("tr", { className: "vpg-row", children: columnKeys.map((colId, colIndex) => /* @__PURE__ */ jsx6(
               "td",
               {
                 className: `vpg-cell ${isCellSelected(rowIndex, colIndex) ? "vpg-selected" : ""} ${getColumnStats(colId).type === "number" ? "vpg-is-number" : ""}`,
@@ -3149,8 +3524,8 @@ function DataGrid({
             )) }, row.id)) })
           ] }) })
         ] }),
-        viewMode === "pivot" && /* @__PURE__ */ jsxs5("div", { className: "vpg-pivot-container", children: [
-          showPivotConfig && canUsePivot && /* @__PURE__ */ jsx5("div", { className: "vpg-pivot-config-panel", children: /* @__PURE__ */ jsx5(
+        viewMode === "pivot" && /* @__PURE__ */ jsxs6("div", { className: "vpg-pivot-container", children: [
+          showPivotConfig && canUsePivot && /* @__PURE__ */ jsx6("div", { className: "vpg-pivot-config-panel", children: /* @__PURE__ */ jsx6(
             PivotConfig,
             {
               availableFields: pivotAvailableFields,
@@ -3178,7 +3553,7 @@ function DataGrid({
               onUpdateCalculatedField: addCalculatedField
             }
           ) }),
-          /* @__PURE__ */ jsx5("div", { className: `vpg-pivot-main ${!showPivotConfig ? "vpg-full-width" : ""}`, children: /* @__PURE__ */ jsx5(
+          /* @__PURE__ */ jsx6("div", { className: `vpg-pivot-main ${!showPivotConfig ? "vpg-full-width" : ""}`, children: /* @__PURE__ */ jsx6(
             PivotSkeleton,
             {
               rowFields: pivotRowFields,
@@ -3204,44 +3579,44 @@ function DataGrid({
             }
           ) })
         ] }),
-        /* @__PURE__ */ jsxs5("div", { className: "vpg-footer", children: [
-          /* @__PURE__ */ jsx5("div", { className: "vpg-footer-left", children: viewMode === "grid" ? enablePagination ? /* @__PURE__ */ jsxs5(Fragment3, { children: [
-            /* @__PURE__ */ jsxs5("span", { children: [
+        /* @__PURE__ */ jsxs6("div", { className: "vpg-footer", children: [
+          /* @__PURE__ */ jsx6("div", { className: "vpg-footer-left", children: viewMode === "grid" ? enablePagination ? /* @__PURE__ */ jsxs6(Fragment4, { children: [
+            /* @__PURE__ */ jsxs6("span", { children: [
               ((currentPage - 1) * pageSize + 1).toLocaleString(),
               "-",
               Math.min(currentPage * pageSize, totalSearchedRows).toLocaleString()
             ] }),
-            /* @__PURE__ */ jsx5("span", { className: "vpg-separator", children: "of" }),
-            /* @__PURE__ */ jsx5("span", { children: totalSearchedRows.toLocaleString() }),
-            totalSearchedRows !== totalRowCount && /* @__PURE__ */ jsxs5("span", { className: "vpg-filtered-note", children: [
+            /* @__PURE__ */ jsx6("span", { className: "vpg-separator", children: "of" }),
+            /* @__PURE__ */ jsx6("span", { children: totalSearchedRows.toLocaleString() }),
+            totalSearchedRows !== totalRowCount && /* @__PURE__ */ jsxs6("span", { className: "vpg-filtered-note", children: [
               "(",
               totalRowCount.toLocaleString(),
               " total)"
             ] })
-          ] }) : filteredRowCount === totalRowCount && totalSearchedRows === totalRowCount ? /* @__PURE__ */ jsxs5("span", { children: [
+          ] }) : filteredRowCount === totalRowCount && totalSearchedRows === totalRowCount ? /* @__PURE__ */ jsxs6("span", { children: [
             totalRowCount.toLocaleString(),
             " records"
-          ] }) : /* @__PURE__ */ jsxs5(Fragment3, { children: [
-            /* @__PURE__ */ jsx5("span", { className: "vpg-filtered-count", children: totalSearchedRows.toLocaleString() }),
-            /* @__PURE__ */ jsx5("span", { className: "vpg-separator", children: "of" }),
-            /* @__PURE__ */ jsx5("span", { children: totalRowCount.toLocaleString() }),
-            /* @__PURE__ */ jsx5("span", { className: "vpg-separator", children: "records" })
-          ] }) : /* @__PURE__ */ jsxs5(Fragment3, { children: [
-            /* @__PURE__ */ jsx5("span", { className: "vpg-pivot-label", children: "Pivot Table" }),
-            /* @__PURE__ */ jsx5("span", { className: "vpg-separator", children: "\u2022" }),
-            /* @__PURE__ */ jsxs5("span", { children: [
+          ] }) : /* @__PURE__ */ jsxs6(Fragment4, { children: [
+            /* @__PURE__ */ jsx6("span", { className: "vpg-filtered-count", children: totalSearchedRows.toLocaleString() }),
+            /* @__PURE__ */ jsx6("span", { className: "vpg-separator", children: "of" }),
+            /* @__PURE__ */ jsx6("span", { children: totalRowCount.toLocaleString() }),
+            /* @__PURE__ */ jsx6("span", { className: "vpg-separator", children: "records" })
+          ] }) : /* @__PURE__ */ jsxs6(Fragment4, { children: [
+            /* @__PURE__ */ jsx6("span", { className: "vpg-pivot-label", children: "Pivot Table" }),
+            /* @__PURE__ */ jsx6("span", { className: "vpg-separator", children: "\u2022" }),
+            /* @__PURE__ */ jsxs6("span", { children: [
               totalRowCount.toLocaleString(),
               " source records"
             ] })
           ] }) }),
-          enablePagination && viewMode === "grid" && totalPages > 1 && /* @__PURE__ */ jsxs5("div", { className: "vpg-pagination", children: [
-            /* @__PURE__ */ jsx5(
+          enablePagination && viewMode === "grid" && totalPages > 1 && /* @__PURE__ */ jsxs6("div", { className: "vpg-pagination", children: [
+            /* @__PURE__ */ jsx6(
               "button",
               {
                 className: "vpg-page-btn",
                 disabled: currentPage === 1,
                 onClick: () => setCurrentPage(1),
-                children: /* @__PURE__ */ jsx5("svg", { className: "vpg-icon-sm", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx5(
+                children: /* @__PURE__ */ jsx6("svg", { className: "vpg-icon-sm", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx6(
                   "path",
                   {
                     strokeLinecap: "round",
@@ -3252,13 +3627,13 @@ function DataGrid({
                 ) })
               }
             ),
-            /* @__PURE__ */ jsx5(
+            /* @__PURE__ */ jsx6(
               "button",
               {
                 className: "vpg-page-btn",
                 disabled: currentPage === 1,
                 onClick: () => setCurrentPage((p) => Math.max(1, p - 1)),
-                children: /* @__PURE__ */ jsx5("svg", { className: "vpg-icon-sm", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx5(
+                children: /* @__PURE__ */ jsx6("svg", { className: "vpg-icon-sm", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx6(
                   "path",
                   {
                     strokeLinecap: "round",
@@ -3269,19 +3644,19 @@ function DataGrid({
                 ) })
               }
             ),
-            /* @__PURE__ */ jsxs5("span", { className: "vpg-page-info", children: [
+            /* @__PURE__ */ jsxs6("span", { className: "vpg-page-info", children: [
               "Page ",
               currentPage,
               " of ",
               totalPages
             ] }),
-            /* @__PURE__ */ jsx5(
+            /* @__PURE__ */ jsx6(
               "button",
               {
                 className: "vpg-page-btn",
                 disabled: currentPage === totalPages,
                 onClick: () => setCurrentPage((p) => Math.min(totalPages, p + 1)),
-                children: /* @__PURE__ */ jsx5("svg", { className: "vpg-icon-sm", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx5(
+                children: /* @__PURE__ */ jsx6("svg", { className: "vpg-icon-sm", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx6(
                   "path",
                   {
                     strokeLinecap: "round",
@@ -3292,13 +3667,13 @@ function DataGrid({
                 ) })
               }
             ),
-            /* @__PURE__ */ jsx5(
+            /* @__PURE__ */ jsx6(
               "button",
               {
                 className: "vpg-page-btn",
                 disabled: currentPage === totalPages,
                 onClick: () => setCurrentPage(totalPages),
-                children: /* @__PURE__ */ jsx5("svg", { className: "vpg-icon-sm", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx5(
+                children: /* @__PURE__ */ jsx6("svg", { className: "vpg-icon-sm", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx6(
                   "path",
                   {
                     strokeLinecap: "round",
@@ -3310,45 +3685,45 @@ function DataGrid({
               }
             )
           ] }),
-          viewMode === "grid" && selectionStats && selectionStats.count > 1 && /* @__PURE__ */ jsxs5("div", { className: "vpg-selection-stats", children: [
-            /* @__PURE__ */ jsxs5("span", { className: "vpg-stat", children: [
-              /* @__PURE__ */ jsx5("span", { className: "vpg-stat-label", children: "Count:" }),
-              /* @__PURE__ */ jsx5("span", { className: "vpg-stat-value", children: selectionStats.count })
+          viewMode === "grid" && selectionStats && selectionStats.count > 1 && /* @__PURE__ */ jsxs6("div", { className: "vpg-selection-stats", children: [
+            /* @__PURE__ */ jsxs6("span", { className: "vpg-stat", children: [
+              /* @__PURE__ */ jsx6("span", { className: "vpg-stat-label", children: "Count:" }),
+              /* @__PURE__ */ jsx6("span", { className: "vpg-stat-value", children: selectionStats.count })
             ] }),
-            selectionStats.numericCount > 0 && /* @__PURE__ */ jsxs5(Fragment3, { children: [
-              /* @__PURE__ */ jsx5("span", { className: "vpg-stat-divider", children: "|" }),
-              /* @__PURE__ */ jsxs5("span", { className: "vpg-stat", children: [
-                /* @__PURE__ */ jsx5("span", { className: "vpg-stat-label", children: "Sum:" }),
-                /* @__PURE__ */ jsx5("span", { className: "vpg-stat-value", children: formatStatValue(selectionStats.sum) })
+            selectionStats.numericCount > 0 && /* @__PURE__ */ jsxs6(Fragment4, { children: [
+              /* @__PURE__ */ jsx6("span", { className: "vpg-stat-divider", children: "|" }),
+              /* @__PURE__ */ jsxs6("span", { className: "vpg-stat", children: [
+                /* @__PURE__ */ jsx6("span", { className: "vpg-stat-label", children: "Sum:" }),
+                /* @__PURE__ */ jsx6("span", { className: "vpg-stat-value", children: formatStatValue(selectionStats.sum) })
               ] }),
-              /* @__PURE__ */ jsx5("span", { className: "vpg-stat-divider", children: "|" }),
-              /* @__PURE__ */ jsxs5("span", { className: "vpg-stat", children: [
-                /* @__PURE__ */ jsx5("span", { className: "vpg-stat-label", children: "Avg:" }),
-                /* @__PURE__ */ jsx5("span", { className: "vpg-stat-value", children: formatStatValue(selectionStats.avg) })
+              /* @__PURE__ */ jsx6("span", { className: "vpg-stat-divider", children: "|" }),
+              /* @__PURE__ */ jsxs6("span", { className: "vpg-stat", children: [
+                /* @__PURE__ */ jsx6("span", { className: "vpg-stat-label", children: "Avg:" }),
+                /* @__PURE__ */ jsx6("span", { className: "vpg-stat-value", children: formatStatValue(selectionStats.avg) })
               ] })
             ] })
           ] }),
-          /* @__PURE__ */ jsx5("div", { className: "vpg-footer-right", children: isDemo ? /* @__PURE__ */ jsxs5("div", { className: "vpg-demo-banner", children: [
-            /* @__PURE__ */ jsx5("span", { className: "vpg-demo-badge", children: "DEMO" }),
-            /* @__PURE__ */ jsx5("span", { children: "Pro features enabled" }),
-            /* @__PURE__ */ jsx5("a", { href: "https://tiny-pivot.com/#pricing", target: "_blank", rel: "noopener noreferrer", children: "Get License \u2192" })
-          ] }) : showWatermark ? /* @__PURE__ */ jsx5("span", { className: "vpg-watermark-inline", children: /* @__PURE__ */ jsxs5("a", { href: "https://tiny-pivot.com", target: "_blank", rel: "noopener noreferrer", children: [
-            /* @__PURE__ */ jsxs5("svg", { xmlns: "http://www.w3.org/2000/svg", width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-              /* @__PURE__ */ jsx5("rect", { x: "3", y: "3", width: "7", height: "7" }),
-              /* @__PURE__ */ jsx5("rect", { x: "14", y: "3", width: "7", height: "7" }),
-              /* @__PURE__ */ jsx5("rect", { x: "14", y: "14", width: "7", height: "7" }),
-              /* @__PURE__ */ jsx5("rect", { x: "3", y: "14", width: "7", height: "7" })
+          /* @__PURE__ */ jsx6("div", { className: "vpg-footer-right", children: isDemo ? /* @__PURE__ */ jsxs6("div", { className: "vpg-demo-banner", children: [
+            /* @__PURE__ */ jsx6("span", { className: "vpg-demo-badge", children: "DEMO" }),
+            /* @__PURE__ */ jsx6("span", { children: "Pro features enabled" }),
+            /* @__PURE__ */ jsx6("a", { href: "https://tiny-pivot.com/#pricing", target: "_blank", rel: "noopener noreferrer", children: "Get License \u2192" })
+          ] }) : showWatermark ? /* @__PURE__ */ jsx6("span", { className: "vpg-watermark-inline", children: /* @__PURE__ */ jsxs6("a", { href: "https://tiny-pivot.com", target: "_blank", rel: "noopener noreferrer", children: [
+            /* @__PURE__ */ jsxs6("svg", { xmlns: "http://www.w3.org/2000/svg", width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+              /* @__PURE__ */ jsx6("rect", { x: "3", y: "3", width: "7", height: "7" }),
+              /* @__PURE__ */ jsx6("rect", { x: "14", y: "3", width: "7", height: "7" }),
+              /* @__PURE__ */ jsx6("rect", { x: "14", y: "14", width: "7", height: "7" }),
+              /* @__PURE__ */ jsx6("rect", { x: "3", y: "14", width: "7", height: "7" })
             ] }),
             "Powered by TinyPivot"
           ] }) }) : null })
         ] }),
-        enableVerticalResize && /* @__PURE__ */ jsx5("div", { className: "vpg-vertical-resize-handle", onMouseDown: startVerticalResize, children: /* @__PURE__ */ jsxs5("div", { className: "vpg-resize-grip", children: [
-          /* @__PURE__ */ jsx5("span", {}),
-          /* @__PURE__ */ jsx5("span", {}),
-          /* @__PURE__ */ jsx5("span", {})
+        enableVerticalResize && /* @__PURE__ */ jsx6("div", { className: "vpg-vertical-resize-handle", onMouseDown: startVerticalResize, children: /* @__PURE__ */ jsxs6("div", { className: "vpg-resize-grip", children: [
+          /* @__PURE__ */ jsx6("span", {}),
+          /* @__PURE__ */ jsx6("span", {}),
+          /* @__PURE__ */ jsx6("span", {})
         ] }) }),
         activeFilterColumn && createPortal2(
-          /* @__PURE__ */ jsx5(
+          /* @__PURE__ */ jsx6(
             "div",
             {
               className: "vpg-filter-portal",
@@ -3359,7 +3734,7 @@ function DataGrid({
                 maxHeight: `${filterDropdownPosition.maxHeight}px`,
                 zIndex: 9999
               },
-              children: /* @__PURE__ */ jsx5(
+              children: /* @__PURE__ */ jsx6(
                 ColumnFilter,
                 {
                   columnId: activeFilterColumn,
@@ -3367,7 +3742,9 @@ function DataGrid({
                   stats: getColumnStats(activeFilterColumn),
                   selectedValues: getColumnFilterValues(activeFilterColumn),
                   sortDirection: getSortDirection(activeFilterColumn),
+                  numericRange: getNumericRangeFilter(activeFilterColumn),
                   onFilter: (values) => handleFilter(activeFilterColumn, values),
+                  onRangeFilter: (range) => handleRangeFilter(activeFilterColumn, range),
                   onSort: (dir) => handleSort(activeFilterColumn, dir),
                   onClose: closeFilterDropdown
                 }