npm - @smallwebco/tinypivot-react - Versions diffs - 1.0.66 → 1.0.68 - Mend

@smallwebco/tinypivot-react 1.0.66 → 1.0.68

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (8) hide show

package/dist/index.js CHANGED Viewed

@@ -2133,20 +2133,178 @@ function ChartBuilder({
 }
 // src/components/ColumnFilter.tsx
-import { useCallback as useCallback6, useEffect as useEffect6, useMemo as useMemo6, useRef as useRef3, useState as useState6 } from "react";
+import { useCallback as useCallback7, useEffect as useEffect7, useMemo as useMemo7, useRef as useRef3, useState as useState7 } from "react";
-// src/components/NumericRangeFilter.tsx
+// src/components/DateRangeFilter.tsx
+import { formatDate, getDatePlaceholder, parseDateInput } from "@smallwebco/tinypivot-core";
 import { useCallback as useCallback5, useEffect as useEffect5, useMemo as useMemo5, useState as useState5 } from "react";
 import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+function DateRangeFilter({
+  dataMin,
+  dataMax,
+  currentRange,
+  onChange,
+  dateFormat = "iso"
+}) {
+  const [localMinText, setLocalMinText] = useState5("");
+  const [localMaxText, setLocalMaxText] = useState5("");
+  const [minError, setMinError] = useState5(false);
+  const [maxError, setMaxError] = useState5(false);
+  const formattedMin = useMemo5(() => formatDate(dataMin, dateFormat), [dataMin, dateFormat]);
+  const formattedMax = useMemo5(() => formatDate(dataMax, dateFormat), [dataMax, dateFormat]);
+  const isFilterActive = localMinText !== "" || localMaxText !== "";
+  const emitChange = useCallback5(() => {
+    const min = localMinText ? parseDateInput(localMinText, dateFormat) : null;
+    const max = localMaxText ? parseDateInput(localMaxText, dateFormat) : null;
+    if (min === null && max === null) {
+      onChange(null);
+    } else {
+      onChange({ min, max });
+    }
+  }, [localMinText, localMaxText, dateFormat, onChange]);
+  const handleMinBlur = useCallback5(() => {
+    if (localMinText === "") {
+      setMinError(false);
+      emitChange();
+      return;
+    }
+    const parsed = parseDateInput(localMinText, dateFormat);
+    setMinError(parsed === null);
+    if (parsed !== null)
+      emitChange();
+  }, [localMinText, dateFormat, emitChange]);
+  const handleMaxBlur = useCallback5(() => {
+    if (localMaxText === "") {
+      setMaxError(false);
+      emitChange();
+      return;
+    }
+    const parsed = parseDateInput(localMaxText, dateFormat);
+    setMaxError(parsed === null);
+    if (parsed !== null)
+      emitChange();
+  }, [localMaxText, dateFormat, emitChange]);
+  const clearFilter = useCallback5(() => {
+    setLocalMinText("");
+    setLocalMaxText("");
+    setMinError(false);
+    setMaxError(false);
+    onChange(null);
+  }, [onChange]);
+  const setFullRange = useCallback5(() => {
+    setLocalMinText(formatDate(dataMin, dateFormat));
+    setLocalMaxText(formatDate(dataMax, dateFormat));
+    setMinError(false);
+    setMaxError(false);
+    onChange({ min: dataMin, max: dataMax });
+  }, [dataMin, dataMax, dateFormat, onChange]);
+  useEffect5(() => {
+    if (currentRange?.min) {
+      setLocalMinText(formatDate(currentRange.min, dateFormat));
+    } else {
+      setLocalMinText("");
+    }
+    if (currentRange?.max) {
+      setLocalMaxText(formatDate(currentRange.max, dateFormat));
+    } else {
+      setLocalMaxText("");
+    }
+    setMinError(false);
+    setMaxError(false);
+  }, [currentRange, dateFormat]);
+  const handleKeyDown = useCallback5((e, handler) => {
+    if (e.key === "Enter")
+      handler();
+  }, []);
+  return /* @__PURE__ */ jsxs4("div", { className: "vpg-range-filter", children: [
+    /* @__PURE__ */ jsxs4("div", { className: "vpg-range-info", children: [
+      /* @__PURE__ */ jsx4("span", { className: "vpg-range-label", children: "Data range:" }),
+      /* @__PURE__ */ jsxs4("span", { className: "vpg-range-bounds", children: [
+        formattedMin,
+        " ",
+        "\u2013",
+        " ",
+        formattedMax
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs4("div", { className: "vpg-range-inputs", children: [
+      /* @__PURE__ */ jsxs4("div", { className: "vpg-input-group", children: [
+        /* @__PURE__ */ jsx4("label", { className: "vpg-input-label", children: "From" }),
+        /* @__PURE__ */ jsx4(
+          "input",
+          {
+            type: "text",
+            className: `vpg-range-input ${minError ? "vpg-input-error" : ""}`,
+            placeholder: getDatePlaceholder(dateFormat),
+            value: localMinText,
+            onChange: (e) => setLocalMinText(e.target.value),
+            onBlur: handleMinBlur,
+            onKeyDown: (e) => handleKeyDown(e, handleMinBlur)
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx4("span", { className: "vpg-input-separator", children: "to" }),
+      /* @__PURE__ */ jsxs4("div", { className: "vpg-input-group", children: [
+        /* @__PURE__ */ jsx4("label", { className: "vpg-input-label", children: "To" }),
+        /* @__PURE__ */ jsx4(
+          "input",
+          {
+            type: "text",
+            className: `vpg-range-input ${maxError ? "vpg-input-error" : ""}`,
+            placeholder: getDatePlaceholder(dateFormat),
+            value: localMaxText,
+            onChange: (e) => setLocalMaxText(e.target.value),
+            onBlur: handleMaxBlur,
+            onKeyDown: (e) => handleKeyDown(e, handleMaxBlur)
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs4("div", { className: "vpg-range-actions", children: [
+      /* @__PURE__ */ jsxs4("button", { className: "vpg-range-btn", disabled: !isFilterActive, onClick: clearFilter, children: [
+        /* @__PURE__ */ jsx4("svg", { className: "vpg-icon-xs", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx4("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }),
+        "Clear"
+      ] }),
+      /* @__PURE__ */ jsxs4("button", { className: "vpg-range-btn", onClick: setFullRange, children: [
+        /* @__PURE__ */ jsx4("svg", { className: "vpg-icon-xs", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx4("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 && !minError && !maxError && /* @__PURE__ */ jsxs4("div", { className: "vpg-filter-summary", children: [
+      /* @__PURE__ */ jsx4("svg", { className: "vpg-icon-xs", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx4("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__ */ jsxs4("span", { children: [
+        "Showing dates",
+        localMinText && /* @__PURE__ */ jsxs4("strong", { children: [
+          " ",
+          "from",
+          " ",
+          localMinText
+        ] }),
+        localMinText && localMaxText && " ",
+        localMaxText && /* @__PURE__ */ jsxs4("strong", { children: [
+          "to",
+          " ",
+          localMaxText
+        ] })
+      ] })
+    ] })
+  ] });
+}
+// src/components/NumericRangeFilter.tsx
+import { formatNumber } from "@smallwebco/tinypivot-core";
+import { useCallback as useCallback6, useEffect as useEffect6, useMemo as useMemo6, useState as useState6 } from "react";
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 function NumericRangeFilter({
   dataMin,
   dataMax,
   currentRange,
-  onChange
+  onChange,
+  numberFormat = "us"
 }) {
-  const [localMin, setLocalMin] = useState5(currentRange?.min ?? null);
-  const [localMax, setLocalMax] = useState5(currentRange?.max ?? null);
-  const step = useMemo5(() => {
+  const [localMin, setLocalMin] = useState6(currentRange?.min ?? null);
+  const [localMax, setLocalMax] = useState6(currentRange?.max ?? null);
+  const step = useMemo6(() => {
     const range = dataMax - dataMin;
     if (range === 0)
       return 1;
@@ -2160,25 +2318,23 @@ function NumericRangeFilter({
       return 10;
     return 10 ** (Math.floor(Math.log10(range)) - 2);
   }, [dataMin, dataMax]);
-  const formatValue = useCallback5((val) => {
+  const formatValue = useCallback6((val) => {
     if (val === null)
       return "";
-    if (Number.isInteger(val))
-      return val.toLocaleString();
-    return val.toLocaleString(void 0, { maximumFractionDigits: 2 });
-  }, []);
+    return formatNumber(val, numberFormat);
+  }, [numberFormat]);
   const isFilterActive = localMin !== null || localMax !== null;
-  const minPercent = useMemo5(() => {
+  const minPercent = useMemo6(() => {
     if (localMin === null || dataMax === dataMin)
       return 0;
     return (localMin - dataMin) / (dataMax - dataMin) * 100;
   }, [localMin, dataMin, dataMax]);
-  const maxPercent = useMemo5(() => {
+  const maxPercent = useMemo6(() => {
     if (localMax === null || dataMax === dataMin)
       return 100;
     return (localMax - dataMin) / (dataMax - dataMin) * 100;
   }, [localMax, dataMin, dataMax]);
-  const handleMinSlider = useCallback5((event) => {
+  const handleMinSlider = useCallback6((event) => {
     const value = Number.parseFloat(event.target.value);
     setLocalMin(() => {
       if (localMax !== null && value > localMax) {
@@ -2187,7 +2343,7 @@ function NumericRangeFilter({
       return value;
     });
   }, [localMax]);
-  const handleMaxSlider = useCallback5((event) => {
+  const handleMaxSlider = useCallback6((event) => {
     const value = Number.parseFloat(event.target.value);
     setLocalMax(() => {
       if (localMin !== null && value < localMin) {
@@ -2196,14 +2352,14 @@ function NumericRangeFilter({
       return value;
     });
   }, [localMin]);
-  const handleSliderChange = useCallback5(() => {
+  const handleSliderChange = useCallback6(() => {
     if (localMin === null && localMax === null) {
       onChange(null);
     } else {
       onChange({ min: localMin, max: localMax });
     }
   }, [localMin, localMax, onChange]);
-  const handleMinInput = useCallback5((event) => {
+  const handleMinInput = useCallback6((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)));
@@ -2211,7 +2367,7 @@ function NumericRangeFilter({
       setLocalMin(null);
     }
   }, [dataMin, dataMax, localMax]);
-  const handleMaxInput = useCallback5((event) => {
+  const handleMaxInput = useCallback6((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)));
@@ -2219,39 +2375,39 @@ function NumericRangeFilter({
       setLocalMax(null);
     }
   }, [dataMin, dataMax, localMin]);
-  const handleInputBlur = useCallback5(() => {
+  const handleInputBlur = useCallback6(() => {
     if (localMin === null && localMax === null) {
       onChange(null);
     } else {
       onChange({ min: localMin, max: localMax });
     }
   }, [localMin, localMax, onChange]);
-  const clearFilter = useCallback5(() => {
+  const clearFilter = useCallback6(() => {
     setLocalMin(null);
     setLocalMax(null);
     onChange(null);
   }, [onChange]);
-  const setFullRange = useCallback5(() => {
+  const setFullRange = useCallback6(() => {
     setLocalMin(dataMin);
     setLocalMax(dataMax);
     onChange({ min: dataMin, max: dataMax });
   }, [dataMin, dataMax, onChange]);
-  useEffect5(() => {
+  useEffect6(() => {
     setLocalMin(currentRange?.min ?? null);
     setLocalMax(currentRange?.max ?? null);
   }, [currentRange]);
-  return /* @__PURE__ */ jsxs4("div", { className: "vpg-range-filter", children: [
-    /* @__PURE__ */ jsxs4("div", { className: "vpg-range-info", children: [
-      /* @__PURE__ */ jsx4("span", { className: "vpg-range-label", children: "Data range:" }),
-      /* @__PURE__ */ jsxs4("span", { className: "vpg-range-bounds", children: [
+  return /* @__PURE__ */ jsxs5("div", { className: "vpg-range-filter", children: [
+    /* @__PURE__ */ jsxs5("div", { className: "vpg-range-info", children: [
+      /* @__PURE__ */ jsx5("span", { className: "vpg-range-label", children: "Data range:" }),
+      /* @__PURE__ */ jsxs5("span", { className: "vpg-range-bounds", children: [
         formatValue(dataMin),
         " ",
         "\u2013",
         formatValue(dataMax)
       ] })
     ] }),
-    /* @__PURE__ */ jsxs4("div", { className: "vpg-slider-container", children: [
-      /* @__PURE__ */ jsx4("div", { className: "vpg-slider-track", children: /* @__PURE__ */ jsx4(
+    /* @__PURE__ */ jsxs5("div", { className: "vpg-slider-container", children: [
+      /* @__PURE__ */ jsx5("div", { className: "vpg-slider-track", children: /* @__PURE__ */ jsx5(
         "div",
         {
           className: "vpg-slider-fill",
@@ -2261,7 +2417,7 @@ function NumericRangeFilter({
           }
         }
       ) }),
-      /* @__PURE__ */ jsx4(
+      /* @__PURE__ */ jsx5(
         "input",
         {
           type: "range",
@@ -2275,7 +2431,7 @@ function NumericRangeFilter({
           onTouchEnd: handleSliderChange
         }
       ),
-      /* @__PURE__ */ jsx4(
+      /* @__PURE__ */ jsx5(
         "input",
         {
           type: "range",
@@ -2290,10 +2446,10 @@ function NumericRangeFilter({
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs4("div", { className: "vpg-range-inputs", children: [
-      /* @__PURE__ */ jsxs4("div", { className: "vpg-input-group", children: [
-        /* @__PURE__ */ jsx4("label", { className: "vpg-input-label", children: "Min" }),
-        /* @__PURE__ */ jsx4(
+    /* @__PURE__ */ jsxs5("div", { className: "vpg-range-inputs", children: [
+      /* @__PURE__ */ jsxs5("div", { className: "vpg-input-group", children: [
+        /* @__PURE__ */ jsx5("label", { className: "vpg-input-label", children: "Min" }),
+        /* @__PURE__ */ jsx5(
           "input",
           {
             type: "number",
@@ -2306,10 +2462,10 @@ function NumericRangeFilter({
           }
         )
       ] }),
-      /* @__PURE__ */ jsx4("span", { className: "vpg-input-separator", children: "to" }),
-      /* @__PURE__ */ jsxs4("div", { className: "vpg-input-group", children: [
-        /* @__PURE__ */ jsx4("label", { className: "vpg-input-label", children: "Max" }),
-        /* @__PURE__ */ jsx4(
+      /* @__PURE__ */ jsx5("span", { className: "vpg-input-separator", children: "to" }),
+      /* @__PURE__ */ jsxs5("div", { className: "vpg-input-group", children: [
+        /* @__PURE__ */ jsx5("label", { className: "vpg-input-label", children: "Max" }),
+        /* @__PURE__ */ jsx5(
           "input",
           {
             type: "number",
@@ -2323,15 +2479,15 @@ function NumericRangeFilter({
         )
       ] })
     ] }),
-    /* @__PURE__ */ jsxs4("div", { className: "vpg-range-actions", children: [
-      /* @__PURE__ */ jsxs4(
+    /* @__PURE__ */ jsxs5("div", { className: "vpg-range-actions", children: [
+      /* @__PURE__ */ jsxs5(
         "button",
         {
           className: "vpg-range-btn",
           disabled: !isFilterActive,
           onClick: clearFilter,
           children: [
-            /* @__PURE__ */ jsx4("svg", { className: "vpg-icon-xs", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx4(
+            /* @__PURE__ */ jsx5("svg", { className: "vpg-icon-xs", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx5(
               "path",
               {
                 strokeLinecap: "round",
@@ -2344,8 +2500,8 @@ function NumericRangeFilter({
           ]
         }
       ),
-      /* @__PURE__ */ jsxs4("button", { className: "vpg-range-btn", onClick: setFullRange, children: [
-        /* @__PURE__ */ jsx4("svg", { className: "vpg-icon-xs", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx4(
+      /* @__PURE__ */ jsxs5("button", { className: "vpg-range-btn", onClick: setFullRange, children: [
+        /* @__PURE__ */ jsx5("svg", { className: "vpg-icon-xs", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx5(
           "path",
           {
             strokeLinecap: "round",
@@ -2357,8 +2513,8 @@ function NumericRangeFilter({
         "Full Range"
       ] })
     ] }),
-    isFilterActive && /* @__PURE__ */ jsxs4("div", { className: "vpg-filter-summary", children: [
-      /* @__PURE__ */ jsx4("svg", { className: "vpg-icon-xs", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx4(
+    isFilterActive && /* @__PURE__ */ jsxs5("div", { className: "vpg-filter-summary", children: [
+      /* @__PURE__ */ jsx5("svg", { className: "vpg-icon-xs", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx5(
         "path",
         {
           strokeLinecap: "round",
@@ -2367,15 +2523,15 @@ function NumericRangeFilter({
           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__ */ jsxs4("span", { children: [
+      /* @__PURE__ */ jsxs5("span", { children: [
         "Showing values",
         " ",
-        localMin !== null && /* @__PURE__ */ jsxs4("strong", { children: [
+        localMin !== null && /* @__PURE__ */ jsxs5("strong", { children: [
           "\u2265",
           formatValue(localMin)
         ] }),
         localMin !== null && localMax !== null && " and ",
-        localMax !== null && /* @__PURE__ */ jsxs4("strong", { children: [
+        localMax !== null && /* @__PURE__ */ jsxs5("strong", { children: [
           "\u2264",
           formatValue(localMax)
         ] })
@@ -2385,45 +2541,53 @@ function NumericRangeFilter({
 }
 // src/components/ColumnFilter.tsx
-import { Fragment as Fragment3, jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
 function ColumnFilter({
   columnName,
   stats,
   selectedValues,
   sortDirection,
   numericRange,
+  dateRange,
+  numberFormat,
+  dateFormat,
   onFilter,
   onSort,
   onClose,
-  onRangeFilter
+  onRangeFilter,
+  onDateRangeFilter
 }) {
-  const [searchQuery, setSearchQuery] = useState6("");
-  const [localSelected, setLocalSelected] = useState6(new Set(selectedValues));
+  const [searchQuery, setSearchQuery] = useState7("");
+  const [localSelected, setLocalSelected] = useState7(new Set(selectedValues));
   const dropdownRef = useRef3(null);
   const searchInputRef = useRef3(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 isDateColumn = stats.type === "date" && stats.dateMin !== void 0 && stats.dateMax !== void 0;
+  const [filterMode, setFilterMode] = useState7(
+    numericRange || dateRange ? "range" : "values"
+  );
+  const [localRange, setLocalRange] = useState7(numericRange ?? null);
+  const [localDateRange, setLocalDateRange] = useState7(dateRange ?? null);
   const hasBlankValues = stats.nullCount > 0;
-  const filteredValues = useMemo6(() => {
+  const filteredValues = useMemo7(() => {
     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 = useMemo6(() => {
+  const allValues = useMemo7(() => {
     const values = [...filteredValues];
     if (hasBlankValues && (!searchQuery || "(blank)".includes(searchQuery.toLowerCase()))) {
       values.unshift("(blank)");
     }
     return values;
   }, [filteredValues, hasBlankValues, searchQuery]);
-  const _isAllSelected = useMemo6(
+  const _isAllSelected = useMemo7(
     () => allValues.every((v) => localSelected.has(v)),
     [allValues, localSelected]
   );
-  const toggleValue = useCallback6((value) => {
+  const toggleValue = useCallback7((value) => {
     setLocalSelected((prev) => {
       const next = new Set(prev);
       if (next.has(value)) {
@@ -2434,7 +2598,7 @@ function ColumnFilter({
       return next;
     });
   }, []);
-  const selectAll = useCallback6(() => {
+  const selectAll = useCallback7(() => {
     setLocalSelected((prev) => {
       const next = new Set(prev);
       for (const value of allValues) {
@@ -2443,10 +2607,10 @@ function ColumnFilter({
       return next;
     });
   }, [allValues]);
-  const clearAll = useCallback6(() => {
+  const clearAll = useCallback7(() => {
     setLocalSelected(/* @__PURE__ */ new Set());
   }, []);
-  const applyFilter = useCallback6(() => {
+  const applyFilter = useCallback7(() => {
     if (localSelected.size === 0) {
       onFilter([]);
     } else {
@@ -2454,30 +2618,42 @@ function ColumnFilter({
     }
     onClose();
   }, [localSelected, onFilter, onClose]);
-  const sortAscending = useCallback6(() => {
+  const sortAscending = useCallback7(() => {
     onSort(sortDirection === "asc" ? null : "asc");
   }, [sortDirection, onSort]);
-  const sortDescending = useCallback6(() => {
+  const sortDescending = useCallback7(() => {
     onSort(sortDirection === "desc" ? null : "desc");
   }, [sortDirection, onSort]);
-  const clearFilter = useCallback6(() => {
+  const clearFilter = useCallback7(() => {
     setLocalSelected(/* @__PURE__ */ new Set());
     onFilter([]);
     onClose();
   }, [onFilter, onClose]);
-  const handleRangeChange = useCallback6((range) => {
+  const handleRangeChange = useCallback7((range) => {
     setLocalRange(range);
   }, []);
-  const applyRangeFilter = useCallback6(() => {
+  const applyRangeFilter = useCallback7(() => {
     onRangeFilter?.(localRange);
     onClose();
   }, [localRange, onRangeFilter, onClose]);
-  const clearRangeFilter = useCallback6(() => {
+  const clearRangeFilter = useCallback7(() => {
     setLocalRange(null);
     onRangeFilter?.(null);
     onClose();
   }, [onRangeFilter, onClose]);
-  useEffect6(() => {
+  const handleDateRangeChange = useCallback7((range) => {
+    setLocalDateRange(range);
+  }, []);
+  const applyDateRangeFilter = useCallback7(() => {
+    onDateRangeFilter?.(localDateRange);
+    onClose();
+  }, [localDateRange, onDateRangeFilter, onClose]);
+  const clearDateRangeFilter = useCallback7(() => {
+    setLocalDateRange(null);
+    onDateRangeFilter?.(null);
+    onClose();
+  }, [onDateRangeFilter, onClose]);
+  useEffect7(() => {
     const handleClickOutside = (event) => {
       if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
         onClose();
@@ -2486,7 +2662,7 @@ function ColumnFilter({
     document.addEventListener("mousedown", handleClickOutside);
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, [onClose]);
-  useEffect6(() => {
+  useEffect7(() => {
     const handleKeydown = (event) => {
       if (event.key === "Escape") {
         onClose();
@@ -2497,36 +2673,42 @@ function ColumnFilter({
     document.addEventListener("keydown", handleKeydown);
     return () => document.removeEventListener("keydown", handleKeydown);
   }, [onClose, applyFilter]);
-  useEffect6(() => {
+  useEffect7(() => {
     searchInputRef.current?.focus();
   }, []);
-  useEffect6(() => {
+  useEffect7(() => {
     setLocalSelected(new Set(selectedValues));
   }, [selectedValues]);
-  useEffect6(() => {
+  useEffect7(() => {
     setLocalRange(numericRange ?? null);
     if (numericRange) {
       setFilterMode("range");
     }
   }, [numericRange]);
-  return /* @__PURE__ */ jsxs5("div", { ref: dropdownRef, className: "vpg-filter-dropdown", children: [
-    /* @__PURE__ */ jsxs5("div", { className: "vpg-filter-header", children: [
-      /* @__PURE__ */ jsx5("span", { className: "vpg-filter-title", children: columnName }),
-      /* @__PURE__ */ jsxs5("span", { className: "vpg-filter-count", children: [
+  useEffect7(() => {
+    setLocalDateRange(dateRange ?? null);
+    if (dateRange) {
+      setFilterMode("range");
+    }
+  }, [dateRange]);
+  return /* @__PURE__ */ jsxs6("div", { ref: dropdownRef, className: "vpg-filter-dropdown", children: [
+    /* @__PURE__ */ jsxs6("div", { className: "vpg-filter-header", children: [
+      /* @__PURE__ */ jsx6("span", { className: "vpg-filter-title", children: columnName }),
+      /* @__PURE__ */ jsxs6("span", { className: "vpg-filter-count", children: [
         stats.uniqueValues.length.toLocaleString(),
         " ",
         "unique"
       ] })
     ] }),
-    /* @__PURE__ */ jsxs5("div", { className: "vpg-sort-controls", children: [
-      /* @__PURE__ */ jsxs5(
+    /* @__PURE__ */ jsxs6("div", { className: "vpg-sort-controls", children: [
+      /* @__PURE__ */ jsxs6(
         "button",
         {
           className: `vpg-sort-btn ${sortDirection === "asc" ? "active" : ""}`,
-          title: isNumericColumn ? "Sort Low to High" : "Sort A to Z",
+          title: isDateColumn ? "Sort Old to New" : isNumericColumn ? "Sort Low to High" : "Sort A to Z",
           onClick: sortAscending,
           children: [
-            /* @__PURE__ */ jsx5("svg", { className: "vpg-icon-sm", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx5(
+            /* @__PURE__ */ jsx6("svg", { className: "vpg-icon-sm", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx6(
               "path",
               {
                 strokeLinecap: "round",
@@ -2535,18 +2717,18 @@ function ColumnFilter({
                 d: "M3 4h13M3 8h9m-9 4h6m4 0l4-4m0 0l4 4m-4-4v12"
               }
             ) }),
-            /* @__PURE__ */ jsx5("span", { children: isNumericColumn ? "1\u21929" : "A\u2192Z" })
+            /* @__PURE__ */ jsx6("span", { children: isDateColumn ? "Old\u2192New" : isNumericColumn ? "1\u21929" : "A\u2192Z" })
           ]
         }
       ),
-      /* @__PURE__ */ jsxs5(
+      /* @__PURE__ */ jsxs6(
         "button",
         {
           className: `vpg-sort-btn ${sortDirection === "desc" ? "active" : ""}`,
-          title: isNumericColumn ? "Sort High to Low" : "Sort Z to A",
+          title: isDateColumn ? "Sort New to Old" : isNumericColumn ? "Sort High to Low" : "Sort Z to A",
           onClick: sortDescending,
           children: [
-            /* @__PURE__ */ jsx5("svg", { className: "vpg-icon-sm", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx5(
+            /* @__PURE__ */ jsx6("svg", { className: "vpg-icon-sm", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx6(
               "path",
               {
                 strokeLinecap: "round",
@@ -2555,20 +2737,20 @@ function ColumnFilter({
                 d: "M3 4h13M3 8h9m-9 4h9m5-4v12m0 0l-4-4m4 4l4-4"
               }
             ) }),
-            /* @__PURE__ */ jsx5("span", { children: isNumericColumn ? "9\u21921" : "Z\u2192A" })
+            /* @__PURE__ */ jsx6("span", { children: isDateColumn ? "New\u2192Old" : isNumericColumn ? "9\u21921" : "Z\u2192A" })
           ]
         }
       )
     ] }),
-    /* @__PURE__ */ jsx5("div", { className: "vpg-divider" }),
-    isNumericColumn && /* @__PURE__ */ jsxs5("div", { className: "vpg-filter-tabs", children: [
-      /* @__PURE__ */ jsxs5(
+    /* @__PURE__ */ jsx6("div", { className: "vpg-divider" }),
+    (isNumericColumn || isDateColumn) && /* @__PURE__ */ jsxs6("div", { className: "vpg-filter-tabs", children: [
+      /* @__PURE__ */ jsxs6(
         "button",
         {
           className: `vpg-tab-btn ${filterMode === "values" ? "active" : ""}`,
           onClick: () => setFilterMode("values"),
           children: [
-            /* @__PURE__ */ jsx5("svg", { className: "vpg-icon-sm", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx5(
+            /* @__PURE__ */ jsx6("svg", { className: "vpg-icon-sm", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx6(
               "path",
               {
                 strokeLinecap: "round",
@@ -2581,13 +2763,13 @@ function ColumnFilter({
           ]
         }
       ),
-      /* @__PURE__ */ jsxs5(
+      /* @__PURE__ */ jsxs6(
         "button",
         {
           className: `vpg-tab-btn ${filterMode === "range" ? "active" : ""}`,
           onClick: () => setFilterMode("range"),
           children: [
-            /* @__PURE__ */ jsx5("svg", { className: "vpg-icon-sm", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx5(
+            /* @__PURE__ */ jsx6("svg", { className: "vpg-icon-sm", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx6(
               "path",
               {
                 strokeLinecap: "round",
@@ -2601,9 +2783,9 @@ function ColumnFilter({
         }
       )
     ] }),
-    (!isNumericColumn || filterMode === "values") && /* @__PURE__ */ jsxs5(Fragment3, { children: [
-      /* @__PURE__ */ jsxs5("div", { className: "vpg-search-container", children: [
-        /* @__PURE__ */ jsx5("svg", { className: "vpg-search-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx5(
+    (!isNumericColumn && !isDateColumn || filterMode === "values") && /* @__PURE__ */ jsxs6(Fragment3, { children: [
+      /* @__PURE__ */ jsxs6("div", { className: "vpg-search-container", children: [
+        /* @__PURE__ */ jsx6("svg", { className: "vpg-search-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx6(
           "path",
           {
             strokeLinecap: "round",
@@ -2612,7 +2794,7 @@ function ColumnFilter({
             d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
           }
         ) }),
-        /* @__PURE__ */ jsx5(
+        /* @__PURE__ */ jsx6(
           "input",
           {
             ref: searchInputRef,
@@ -2623,11 +2805,11 @@ function ColumnFilter({
             className: "vpg-search-input"
           }
         ),
-        searchQuery && /* @__PURE__ */ jsx5("button", { className: "vpg-clear-search", onClick: () => setSearchQuery(""), children: "\xD7" })
+        searchQuery && /* @__PURE__ */ jsx6("button", { className: "vpg-clear-search", onClick: () => setSearchQuery(""), children: "\xD7" })
       ] }),
-      /* @__PURE__ */ jsxs5("div", { className: "vpg-bulk-actions", children: [
-        /* @__PURE__ */ jsxs5("button", { className: "vpg-bulk-btn", onClick: selectAll, children: [
-          /* @__PURE__ */ jsx5("svg", { className: "vpg-icon-sm", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx5(
+      /* @__PURE__ */ jsxs6("div", { className: "vpg-bulk-actions", children: [
+        /* @__PURE__ */ jsxs6("button", { className: "vpg-bulk-btn", onClick: selectAll, children: [
+          /* @__PURE__ */ jsx6("svg", { className: "vpg-icon-sm", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx6(
             "path",
             {
               strokeLinecap: "round",
@@ -2638,8 +2820,8 @@ function ColumnFilter({
           ) }),
           "Select All"
         ] }),
-        /* @__PURE__ */ jsxs5("button", { className: "vpg-bulk-btn", onClick: clearAll, children: [
-          /* @__PURE__ */ jsx5("svg", { className: "vpg-icon-sm", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx5(
+        /* @__PURE__ */ jsxs6("button", { className: "vpg-bulk-btn", onClick: clearAll, children: [
+          /* @__PURE__ */ jsx6("svg", { className: "vpg-icon-sm", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx6(
             "path",
             {
               strokeLinecap: "round",
@@ -2651,13 +2833,13 @@ function ColumnFilter({
           "Clear All"
         ] })
       ] }),
-      /* @__PURE__ */ jsxs5("div", { className: "vpg-values-list", children: [
-        allValues.map((value) => /* @__PURE__ */ jsxs5(
+      /* @__PURE__ */ jsxs6("div", { className: "vpg-values-list", children: [
+        allValues.map((value) => /* @__PURE__ */ jsxs6(
           "label",
           {
             className: `vpg-value-item ${localSelected.has(value) ? "selected" : ""}`,
             children: [
-              /* @__PURE__ */ jsx5(
+              /* @__PURE__ */ jsx6(
                 "input",
                 {
                   type: "checkbox",
@@ -2666,49 +2848,67 @@ function ColumnFilter({
                   className: "vpg-value-checkbox"
                 }
               ),
-              /* @__PURE__ */ jsx5("span", { className: `vpg-value-text ${value === "(blank)" ? "vpg-blank" : ""}`, children: value })
+              /* @__PURE__ */ jsx6("span", { className: `vpg-value-text ${value === "(blank)" ? "vpg-blank" : ""}`, children: value })
             ]
           },
           value
         )),
-        allValues.length === 0 && /* @__PURE__ */ jsx5("div", { className: "vpg-no-results", children: "No matching values" })
+        allValues.length === 0 && /* @__PURE__ */ jsx6("div", { className: "vpg-no-results", children: "No matching values" })
       ] }),
-      /* @__PURE__ */ jsxs5("div", { className: "vpg-filter-footer", children: [
-        /* @__PURE__ */ jsx5("button", { className: "vpg-btn-clear", onClick: clearFilter, children: "Clear Filter" }),
-        /* @__PURE__ */ jsx5("button", { className: "vpg-btn-apply", onClick: applyFilter, children: "Apply" })
+      /* @__PURE__ */ jsxs6("div", { className: "vpg-filter-footer", children: [
+        /* @__PURE__ */ jsx6("button", { className: "vpg-btn-clear", onClick: clearFilter, children: "Clear Filter" }),
+        /* @__PURE__ */ jsx6("button", { className: "vpg-btn-apply", onClick: applyFilter, children: "Apply" })
       ] })
     ] }),
-    isNumericColumn && filterMode === "range" && /* @__PURE__ */ jsxs5(Fragment3, { children: [
-      /* @__PURE__ */ jsx5(
+    isNumericColumn && filterMode === "range" && /* @__PURE__ */ jsxs6(Fragment3, { children: [
+      /* @__PURE__ */ jsx6(
         NumericRangeFilter,
         {
           dataMin: stats.numericMin,
           dataMax: stats.numericMax,
           currentRange: localRange,
-          onChange: handleRangeChange
+          onChange: handleRangeChange,
+          numberFormat
         }
       ),
-      /* @__PURE__ */ jsxs5("div", { className: "vpg-filter-footer", children: [
-        /* @__PURE__ */ jsx5("button", { className: "vpg-btn-clear", onClick: clearRangeFilter, children: "Clear Filter" }),
-        /* @__PURE__ */ jsx5("button", { className: "vpg-btn-apply", onClick: applyRangeFilter, children: "Apply" })
+      /* @__PURE__ */ jsxs6("div", { className: "vpg-filter-footer", children: [
+        /* @__PURE__ */ jsx6("button", { className: "vpg-btn-clear", onClick: clearRangeFilter, children: "Clear Filter" }),
+        /* @__PURE__ */ jsx6("button", { className: "vpg-btn-apply", onClick: applyRangeFilter, children: "Apply" })
+      ] })
+    ] }),
+    isDateColumn && filterMode === "range" && /* @__PURE__ */ jsxs6(Fragment3, { children: [
+      /* @__PURE__ */ jsx6(
+        DateRangeFilter,
+        {
+          dataMin: stats.dateMin,
+          dataMax: stats.dateMax,
+          currentRange: localDateRange,
+          onChange: handleDateRangeChange,
+          dateFormat
+        }
+      ),
+      /* @__PURE__ */ jsxs6("div", { className: "vpg-filter-footer", children: [
+        /* @__PURE__ */ jsx6("button", { className: "vpg-btn-clear", onClick: clearDateRangeFilter, children: "Clear Filter" }),
+        /* @__PURE__ */ jsx6("button", { className: "vpg-btn-apply", onClick: applyDateRangeFilter, children: "Apply" })
       ] })
     ] })
   ] });
 }
 // src/components/DataGrid.tsx
-import { useCallback as useCallback13, useEffect as useEffect10, useMemo as useMemo13, useRef as useRef4, useState as useState13 } from "react";
+import { formatDate as coreFormatDate, formatNumber as coreFormatNumber } from "@smallwebco/tinypivot-core";
+import { useCallback as useCallback14, useEffect as useEffect11, useMemo as useMemo14, useRef as useRef4, useState as useState14 } from "react";
 import { createPortal as createPortal2 } from "react-dom";
 // src/hooks/useExcelGrid.ts
-import { formatCellValue, getColumnUniqueValues, isNumericRange } from "@smallwebco/tinypivot-core";
+import { formatCellValue, getColumnUniqueValues, isDateRange, isNumericRange } from "@smallwebco/tinypivot-core";
 import {
   getCoreRowModel,
   getFilteredRowModel,
   getSortedRowModel,
   useReactTable
 } from "@tanstack/react-table";
-import { useCallback as useCallback7, useEffect as useEffect7, useMemo as useMemo7, useState as useState7 } from "react";
+import { useCallback as useCallback8, useEffect as useEffect8, useMemo as useMemo8, useState as useState8 } from "react";
 var multiSelectFilter = (row, columnId, filterValue) => {
   if (!filterValue)
     return true;
@@ -2727,6 +2927,22 @@ var multiSelectFilter = (row, columnId, filterValue) => {
       return false;
     return true;
   }
+  if (isDateRange(filterValue)) {
+    const cellValue = row.getValue(columnId);
+    if (cellValue === null || cellValue === void 0 || cellValue === "") {
+      return false;
+    }
+    const dateObj = cellValue instanceof Date ? cellValue : new Date(String(cellValue));
+    if (Number.isNaN(dateObj.getTime()))
+      return false;
+    const dateStr = dateObj.toISOString().split("T")[0];
+    const { min, max } = filterValue;
+    if (min !== null && dateStr < min)
+      return false;
+    if (max !== null && dateStr > max)
+      return false;
+    return true;
+  }
   if (Array.isArray(filterValue) && filterValue.length > 0) {
     const cellValue = row.getValue(columnId);
     const cellString = cellValue === null || cellValue === void 0 || cellValue === "" ? "(blank)" : String(cellValue);
@@ -2736,21 +2952,21 @@ var multiSelectFilter = (row, columnId, filterValue) => {
 };
 function useExcelGrid(options) {
   const { data, enableSorting = true, enableFiltering = true } = options;
-  const [sorting, setSorting] = useState7([]);
-  const [columnFilters, setColumnFilters] = useState7([]);
-  const [columnVisibility, setColumnVisibility] = useState7({});
-  const [globalFilter, setGlobalFilter] = useState7("");
-  const [columnStatsCache, setColumnStatsCache] = useState7({});
-  const dataSignature = useMemo7(
+  const [sorting, setSorting] = useState8([]);
+  const [columnFilters, setColumnFilters] = useState8([]);
+  const [columnVisibility, setColumnVisibility] = useState8({});
+  const [globalFilter, setGlobalFilter] = useState8("");
+  const [columnStatsCache, setColumnStatsCache] = useState8({});
+  const dataSignature = useMemo8(
     () => `${Date.now()}-${Math.random().toString(36).slice(2)}`,
     [data]
   );
-  const columnKeys = useMemo7(() => {
+  const columnKeys = useMemo8(() => {
     if (data.length === 0)
       return [];
     return Object.keys(data[0]);
   }, [data]);
-  const getColumnStats = useCallback7(
+  const getColumnStats = useCallback8(
     (columnKey) => {
       const cacheKey = `${columnKey}-${dataSignature}`;
       if (!columnStatsCache[cacheKey]) {
@@ -2762,13 +2978,13 @@ function useExcelGrid(options) {
     },
     [data, columnStatsCache, dataSignature]
   );
-  const clearStatsCache = useCallback7(() => {
+  const clearStatsCache = useCallback8(() => {
     setColumnStatsCache({});
   }, []);
-  useEffect7(() => {
+  useEffect8(() => {
     clearStatsCache();
   }, [dataSignature, clearStatsCache]);
-  const columnDefs = useMemo7(() => {
+  const columnDefs = useMemo8(() => {
     return columnKeys.map((key) => {
       const stats = getColumnStats(key);
       return {
@@ -2808,7 +3024,7 @@ function useExcelGrid(options) {
   });
   const filteredRowCount = table.getFilteredRowModel().rows.length;
   const totalRowCount = data.length;
-  const activeFilters = useMemo7(() => {
+  const activeFilters = useMemo8(() => {
     return columnFilters.map((f) => {
       const filterValue = f.value;
       if (filterValue && isNumericRange(filterValue)) {
@@ -2816,6 +3032,16 @@ function useExcelGrid(options) {
           column: f.id,
           type: "range",
           range: filterValue,
+          dateRange: null,
+          values: []
+        };
+      }
+      if (filterValue && isDateRange(filterValue)) {
+        return {
+          column: f.id,
+          type: "dateRange",
+          range: null,
+          dateRange: filterValue,
           values: []
         };
       }
@@ -2823,11 +3049,12 @@ function useExcelGrid(options) {
         column: f.id,
         type: "values",
         values: Array.isArray(filterValue) ? filterValue : [],
-        range: null
+        range: null,
+        dateRange: null
       };
     });
   }, [columnFilters]);
-  const hasActiveFilter = useCallback7(
+  const hasActiveFilter = useCallback8(
     (columnId) => {
       const column = table.getColumn(columnId);
       if (!column)
@@ -2838,11 +3065,14 @@ function useExcelGrid(options) {
       if (isNumericRange(filterValue)) {
         return filterValue.min !== null || filterValue.max !== null;
       }
+      if (isDateRange(filterValue)) {
+        return filterValue.min !== null || filterValue.max !== null;
+      }
       return Array.isArray(filterValue) && filterValue.length > 0;
     },
     [table]
   );
-  const setColumnFilter = useCallback7(
+  const setColumnFilter = useCallback8(
     (columnId, values) => {
       const column = table.getColumn(columnId);
       if (column) {
@@ -2851,7 +3081,7 @@ function useExcelGrid(options) {
     },
     [table]
   );
-  const setNumericRangeFilter = useCallback7(
+  const setNumericRangeFilter = useCallback8(
     (columnId, range) => {
       const column = table.getColumn(columnId);
       if (column) {
@@ -2864,7 +3094,7 @@ function useExcelGrid(options) {
     },
     [table]
   );
-  const getNumericRangeFilter = useCallback7(
+  const getNumericRangeFilter = useCallback8(
     (columnId) => {
       const column = table.getColumn(columnId);
       if (!column)
@@ -2877,12 +3107,38 @@ function useExcelGrid(options) {
     },
     [table]
   );
-  const clearAllFilters = useCallback7(() => {
+  const setDateRangeFilter = useCallback8(
+    (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 getDateRangeFilter = useCallback8(
+    (columnId) => {
+      const column = table.getColumn(columnId);
+      if (!column)
+        return null;
+      const filterValue = column.getFilterValue();
+      if (filterValue && isDateRange(filterValue)) {
+        return filterValue;
+      }
+      return null;
+    },
+    [table]
+  );
+  const clearAllFilters = useCallback8(() => {
     table.resetColumnFilters();
     setGlobalFilter("");
     setColumnFilters([]);
   }, [table]);
-  const getColumnFilterValues = useCallback7(
+  const getColumnFilterValues = useCallback8(
     (columnId) => {
       const column = table.getColumn(columnId);
       if (!column)
@@ -2892,7 +3148,7 @@ function useExcelGrid(options) {
     },
     [table]
   );
-  const toggleSort = useCallback7((columnId) => {
+  const toggleSort = useCallback8((columnId) => {
     setSorting((prev) => {
       const current = prev.find((s) => s.id === columnId);
       if (!current) {
@@ -2904,7 +3160,7 @@ function useExcelGrid(options) {
       }
     });
   }, []);
-  const getSortDirection = useCallback7(
+  const getSortDirection = useCallback8(
     (columnId) => {
       const sort = sorting.find((s) => s.id === columnId);
       if (!sort)
@@ -2940,7 +3196,10 @@ function useExcelGrid(options) {
     getSortDirection,
     // Numeric range filters
     setNumericRangeFilter,
-    getNumericRangeFilter
+    getNumericRangeFilter,
+    // Date range filters
+    setDateRangeFilter,
+    getDateRangeFilter
   };
 }
@@ -2951,7 +3210,7 @@ import {
   exportToCSV as coreExportToCSV,
   formatSelectionForClipboard as coreFormatSelection
 } from "@smallwebco/tinypivot-core";
-import { useCallback as useCallback8, useMemo as useMemo8, useState as useState8 } from "react";
+import { useCallback as useCallback9, useMemo as useMemo9, useState as useState9 } from "react";
 function exportToCSV(data, columns, options) {
   coreExportToCSV(data, columns, options);
 }
@@ -2965,45 +3224,45 @@ function formatSelectionForClipboard(rows, columns, selectionBounds) {
   return coreFormatSelection(rows, columns, selectionBounds);
 }
 function usePagination(data, options = {}) {
-  const [pageSize, setPageSize] = useState8(options.pageSize ?? 50);
-  const [currentPage, setCurrentPage] = useState8(options.currentPage ?? 1);
-  const totalPages = useMemo8(
+  const [pageSize, setPageSize] = useState9(options.pageSize ?? 50);
+  const [currentPage, setCurrentPage] = useState9(options.currentPage ?? 1);
+  const totalPages = useMemo9(
     () => Math.max(1, Math.ceil(data.length / pageSize)),
     [data.length, pageSize]
   );
-  const paginatedData = useMemo8(() => {
+  const paginatedData = useMemo9(() => {
     const start = (currentPage - 1) * pageSize;
     const end = start + pageSize;
     return data.slice(start, end);
   }, [data, currentPage, pageSize]);
-  const startIndex = useMemo8(() => (currentPage - 1) * pageSize + 1, [currentPage, pageSize]);
-  const endIndex = useMemo8(
+  const startIndex = useMemo9(() => (currentPage - 1) * pageSize + 1, [currentPage, pageSize]);
+  const endIndex = useMemo9(
     () => Math.min(currentPage * pageSize, data.length),
     [currentPage, pageSize, data.length]
   );
-  const goToPage = useCallback8(
+  const goToPage = useCallback9(
     (page) => {
       setCurrentPage(Math.max(1, Math.min(page, totalPages)));
     },
     [totalPages]
   );
-  const nextPage = useCallback8(() => {
+  const nextPage = useCallback9(() => {
     if (currentPage < totalPages) {
       setCurrentPage((prev) => prev + 1);
     }
   }, [currentPage, totalPages]);
-  const prevPage = useCallback8(() => {
+  const prevPage = useCallback9(() => {
     if (currentPage > 1) {
       setCurrentPage((prev) => prev - 1);
     }
   }, [currentPage]);
-  const firstPage = useCallback8(() => {
+  const firstPage = useCallback9(() => {
     setCurrentPage(1);
   }, []);
-  const lastPage = useCallback8(() => {
+  const lastPage = useCallback9(() => {
     setCurrentPage(totalPages);
   }, [totalPages]);
-  const updatePageSize = useCallback8((size) => {
+  const updatePageSize = useCallback9((size) => {
     setPageSize(size);
     setCurrentPage(1);
   }, []);
@@ -3023,9 +3282,9 @@ function usePagination(data, options = {}) {
   };
 }
 function useGlobalSearch(data, columns) {
-  const [searchTerm, setSearchTerm] = useState8("");
-  const [caseSensitive, setCaseSensitive] = useState8(false);
-  const filteredData = useMemo8(() => {
+  const [searchTerm, setSearchTerm] = useState9("");
+  const [caseSensitive, setCaseSensitive] = useState9(false);
+  const filteredData = useMemo9(() => {
     if (!searchTerm.trim()) {
       return data;
     }
@@ -3043,7 +3302,7 @@ function useGlobalSearch(data, columns) {
       return false;
     });
   }, [data, columns, searchTerm, caseSensitive]);
-  const clearSearch = useCallback8(() => {
+  const clearSearch = useCallback9(() => {
     setSearchTerm("");
   }, []);
   return {
@@ -3056,17 +3315,17 @@ function useGlobalSearch(data, columns) {
   };
 }
 function useRowSelection(data) {
-  const [selectedRowIndices, setSelectedRowIndices] = useState8(/* @__PURE__ */ new Set());
-  const selectedRows = useMemo8(() => {
+  const [selectedRowIndices, setSelectedRowIndices] = useState9(/* @__PURE__ */ new Set());
+  const selectedRows = useMemo9(() => {
     return Array.from(selectedRowIndices).sort((a, b) => a - b).map((idx) => data[idx]).filter(Boolean);
   }, [data, selectedRowIndices]);
-  const allSelected = useMemo8(() => {
+  const allSelected = useMemo9(() => {
     return data.length > 0 && selectedRowIndices.size === data.length;
   }, [data.length, selectedRowIndices.size]);
-  const someSelected = useMemo8(() => {
+  const someSelected = useMemo9(() => {
     return selectedRowIndices.size > 0 && selectedRowIndices.size < data.length;
   }, [data.length, selectedRowIndices.size]);
-  const toggleRow = useCallback8((index) => {
+  const toggleRow = useCallback9((index) => {
     setSelectedRowIndices((prev) => {
       const next = new Set(prev);
       if (next.has(index)) {
@@ -3077,36 +3336,36 @@ function useRowSelection(data) {
       return next;
     });
   }, []);
-  const selectRow = useCallback8((index) => {
+  const selectRow = useCallback9((index) => {
     setSelectedRowIndices((prev) => /* @__PURE__ */ new Set([...prev, index]));
   }, []);
-  const deselectRow = useCallback8((index) => {
+  const deselectRow = useCallback9((index) => {
     setSelectedRowIndices((prev) => {
       const next = new Set(prev);
       next.delete(index);
       return next;
     });
   }, []);
-  const selectAll = useCallback8(() => {
+  const selectAll = useCallback9(() => {
     setSelectedRowIndices(new Set(data.map((_, idx) => idx)));
   }, [data]);
-  const deselectAll = useCallback8(() => {
+  const deselectAll = useCallback9(() => {
     setSelectedRowIndices(/* @__PURE__ */ new Set());
   }, []);
-  const toggleAll = useCallback8(() => {
+  const toggleAll = useCallback9(() => {
     if (allSelected) {
       deselectAll();
     } else {
       selectAll();
     }
   }, [allSelected, selectAll, deselectAll]);
-  const isSelected = useCallback8(
+  const isSelected = useCallback9(
     (index) => {
       return selectedRowIndices.has(index);
     },
     [selectedRowIndices]
   );
-  const selectRange = useCallback8((startIndex, endIndex) => {
+  const selectRange = useCallback9((startIndex, endIndex) => {
     const min = Math.min(startIndex, endIndex);
     const max = Math.max(startIndex, endIndex);
     setSelectedRowIndices((prev) => {
@@ -3133,10 +3392,10 @@ function useRowSelection(data) {
   };
 }
 function useColumnResize(initialWidths, minWidth = 60, maxWidth = 600) {
-  const [columnWidths, setColumnWidths] = useState8({ ...initialWidths });
-  const [isResizing, setIsResizing] = useState8(false);
-  const [resizingColumn, setResizingColumn] = useState8(null);
-  const startResize = useCallback8(
+  const [columnWidths, setColumnWidths] = useState9({ ...initialWidths });
+  const [isResizing, setIsResizing] = useState9(false);
+  const [resizingColumn, setResizingColumn] = useState9(null);
+  const startResize = useCallback9(
     (columnId, event) => {
       setIsResizing(true);
       setResizingColumn(columnId);
@@ -3161,7 +3420,7 @@ function useColumnResize(initialWidths, minWidth = 60, maxWidth = 600) {
     },
     [columnWidths, minWidth, maxWidth]
   );
-  const resetColumnWidth = useCallback8(
+  const resetColumnWidth = useCallback9(
     (columnId) => {
       if (initialWidths[columnId]) {
         setColumnWidths((prev) => ({
@@ -3172,7 +3431,7 @@ function useColumnResize(initialWidths, minWidth = 60, maxWidth = 600) {
     },
     [initialWidths]
   );
-  const resetAllWidths = useCallback8(() => {
+  const resetAllWidths = useCallback9(() => {
     setColumnWidths({ ...initialWidths });
   }, [initialWidths]);
   return {
@@ -3199,7 +3458,7 @@ import {
   logProRequired,
   validateLicenseKey
 } from "@smallwebco/tinypivot-core";
-import { useCallback as useCallback9, useMemo as useMemo9, useState as useState9 } from "react";
+import { useCallback as useCallback10, useMemo as useMemo10, useState as useState10 } from "react";
 var globalLicenseInfo = getFreeLicenseInfo();
 var globalDemoMode = false;
 var listeners = /* @__PURE__ */ new Set();
@@ -3231,43 +3490,43 @@ function configureLicenseSecret(secret) {
   coreConfigureLicenseSecret(secret);
 }
 function useLicense() {
-  const [, forceUpdate] = useState9({});
-  useState9(() => {
+  const [, forceUpdate] = useState10({});
+  useState10(() => {
     const update = () => forceUpdate({});
     listeners.add(update);
     return () => listeners.delete(update);
   });
   const isDemo = globalDemoMode;
   const licenseInfo = globalLicenseInfo;
-  const isPro = useMemo9(
+  const isPro = useMemo10(
     () => globalDemoMode || coreIsPro(licenseInfo),
     [licenseInfo]
   );
-  const canUsePivot = useMemo9(
+  const canUsePivot = useMemo10(
     () => globalDemoMode || coreCanUsePivot(licenseInfo),
     [licenseInfo]
   );
-  const canUseAdvancedAggregations = useMemo9(
+  const canUseAdvancedAggregations = useMemo10(
     () => globalDemoMode || licenseInfo.features.advancedAggregations,
     [licenseInfo]
   );
-  const canUsePercentageMode = useMemo9(
+  const canUsePercentageMode = useMemo10(
     () => globalDemoMode || licenseInfo.features.percentageMode,
     [licenseInfo]
   );
-  const canUseCharts = useMemo9(
+  const canUseCharts = useMemo10(
     () => globalDemoMode || coreCanUseCharts(licenseInfo),
     [licenseInfo]
   );
-  const canUseAIAnalyst = useMemo9(
+  const canUseAIAnalyst = useMemo10(
     () => globalDemoMode || coreCanUseAIAnalyst(licenseInfo),
     [licenseInfo]
   );
-  const showWatermark = useMemo9(
+  const showWatermark = useMemo10(
     () => coreShouldShowWatermark(licenseInfo, globalDemoMode),
     [licenseInfo]
   );
-  const requirePro = useCallback9((feature) => {
+  const requirePro = useCallback10((feature) => {
     if (!isPro) {
       logProRequired(feature);
       return false;
@@ -3302,23 +3561,23 @@ import {
   saveCalculatedFields,
   savePivotConfig
 } from "@smallwebco/tinypivot-core";
-import { useCallback as useCallback10, useEffect as useEffect8, useMemo as useMemo10, useState as useState10 } from "react";
+import { useCallback as useCallback11, useEffect as useEffect9, useMemo as useMemo11, useState as useState11 } from "react";
 function usePivotTable(data) {
   const { canUsePivot, requirePro } = useLicense();
-  const [rowFields, setRowFieldsState] = useState10([]);
-  const [columnFields, setColumnFieldsState] = useState10([]);
-  const [valueFields, setValueFields] = useState10([]);
-  const [showRowTotals, setShowRowTotals] = useState10(true);
-  const [showColumnTotals, setShowColumnTotals] = useState10(true);
-  const [calculatedFields, setCalculatedFields] = useState10(() => loadCalculatedFields());
-  const [currentStorageKey, setCurrentStorageKey] = useState10(null);
-  const availableFields = useMemo10(() => {
+  const [rowFields, setRowFieldsState] = useState11([]);
+  const [columnFields, setColumnFieldsState] = useState11([]);
+  const [valueFields, setValueFields] = useState11([]);
+  const [showRowTotals, setShowRowTotals] = useState11(true);
+  const [showColumnTotals, setShowColumnTotals] = useState11(true);
+  const [calculatedFields, setCalculatedFields] = useState11(() => loadCalculatedFields());
+  const [currentStorageKey, setCurrentStorageKey] = useState11(null);
+  const availableFields = useMemo11(() => {
     return computeAvailableFields(data);
   }, [data]);
-  const unassignedFields = useMemo10(() => {
+  const unassignedFields = useMemo11(() => {
     return getUnassignedFields(availableFields, rowFields, columnFields, valueFields);
   }, [availableFields, rowFields, columnFields, valueFields]);
-  const isConfigured = useMemo10(() => {
+  const isConfigured = useMemo11(() => {
     return isPivotConfigured({
       rowFields,
       columnFields,
@@ -3327,7 +3586,7 @@ function usePivotTable(data) {
       showColumnTotals
     });
   }, [rowFields, columnFields, valueFields, showRowTotals, showColumnTotals]);
-  const pivotResult = useMemo10(() => {
+  const pivotResult = useMemo11(() => {
     if (!isConfigured)
       return null;
     if (!canUsePivot)
@@ -3341,7 +3600,7 @@ function usePivotTable(data) {
       calculatedFields
     });
   }, [data, isConfigured, canUsePivot, rowFields, columnFields, valueFields, showRowTotals, showColumnTotals, calculatedFields]);
-  useEffect8(() => {
+  useEffect9(() => {
     if (data.length === 0)
       return;
     const newKeys = Object.keys(data[0]);
@@ -3374,7 +3633,7 @@ function usePivotTable(data) {
       }
     }
   }, [data]);
-  useEffect8(() => {
+  useEffect9(() => {
     if (!currentStorageKey)
       return;
     const config = {
@@ -3387,7 +3646,7 @@ function usePivotTable(data) {
     };
     savePivotConfig(currentStorageKey, config);
   }, [currentStorageKey, rowFields, columnFields, valueFields, showRowTotals, showColumnTotals, calculatedFields]);
-  const addRowField = useCallback10(
+  const addRowField = useCallback11(
     (field) => {
       if (!rowFields.includes(field)) {
         setRowFieldsState((prev) => [...prev, field]);
@@ -3395,13 +3654,13 @@ function usePivotTable(data) {
     },
     [rowFields]
   );
-  const removeRowField = useCallback10((field) => {
+  const removeRowField = useCallback11((field) => {
     setRowFieldsState((prev) => prev.filter((f) => f !== field));
   }, []);
-  const setRowFields = useCallback10((fields) => {
+  const setRowFields = useCallback11((fields) => {
     setRowFieldsState(fields);
   }, []);
-  const addColumnField = useCallback10(
+  const addColumnField = useCallback11(
     (field) => {
       if (!columnFields.includes(field)) {
         setColumnFieldsState((prev) => [...prev, field]);
@@ -3409,13 +3668,13 @@ function usePivotTable(data) {
     },
     [columnFields]
   );
-  const removeColumnField = useCallback10((field) => {
+  const removeColumnField = useCallback11((field) => {
     setColumnFieldsState((prev) => prev.filter((f) => f !== field));
   }, []);
-  const setColumnFields = useCallback10((fields) => {
+  const setColumnFields = useCallback11((fields) => {
     setColumnFieldsState(fields);
   }, []);
-  const addValueField = useCallback10(
+  const addValueField = useCallback11(
     (field, aggregation = "sum") => {
       if (aggregation !== "sum" && !requirePro(`${aggregation} aggregation`)) {
         return;
@@ -3429,7 +3688,7 @@ function usePivotTable(data) {
     },
     [requirePro]
   );
-  const removeValueField = useCallback10((field, aggregation) => {
+  const removeValueField = useCallback11((field, aggregation) => {
     setValueFields((prev) => {
       if (aggregation) {
         return prev.filter((v) => !(v.field === field && v.aggregation === aggregation));
@@ -3437,7 +3696,7 @@ function usePivotTable(data) {
       return prev.filter((v) => v.field !== field);
     });
   }, []);
-  const updateValueFieldAggregation = useCallback10(
+  const updateValueFieldAggregation = useCallback11(
     (field, oldAgg, newAgg) => {
       setValueFields(
         (prev) => prev.map((v) => {
@@ -3450,12 +3709,12 @@ function usePivotTable(data) {
     },
     []
   );
-  const clearConfig = useCallback10(() => {
+  const clearConfig = useCallback11(() => {
     setRowFieldsState([]);
     setColumnFieldsState([]);
     setValueFields([]);
   }, []);
-  const autoSuggestConfig = useCallback10(() => {
+  const autoSuggestConfig = useCallback11(() => {
     if (!requirePro("Pivot Table - Auto Suggest"))
       return;
     if (availableFields.length === 0)
@@ -3467,7 +3726,7 @@ function usePivotTable(data) {
       setValueFields([{ field: numericFields[0].field, aggregation: "sum" }]);
     }
   }, [availableFields, requirePro]);
-  const addCalculatedField = useCallback10((field) => {
+  const addCalculatedField = useCallback11((field) => {
     setCalculatedFields((prev) => {
       const existing = prev.findIndex((f) => f.id === field.id);
       let updated;
@@ -3480,7 +3739,7 @@ function usePivotTable(data) {
       return updated;
     });
   }, []);
-  const removeCalculatedField = useCallback10((id) => {
+  const removeCalculatedField = useCallback11((id) => {
     setCalculatedFields((prev) => {
       const updated = prev.filter((f) => f.id !== id);
       saveCalculatedFields(updated);
@@ -3522,8 +3781,8 @@ function usePivotTable(data) {
 // src/components/PivotConfig.tsx
 import { AGGREGATION_OPTIONS, getAggregationSymbol } from "@smallwebco/tinypivot-core";
-import { useCallback as useCallback11, useMemo as useMemo11, useState as useState11 } from "react";
-import { Fragment as Fragment4, jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+import { useCallback as useCallback12, useMemo as useMemo12, useState as useState12 } from "react";
+import { Fragment as Fragment4, jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
 function aggregationRequiresPro(agg) {
   return agg !== "sum";
 }
@@ -3564,15 +3823,15 @@ function PivotConfig({
   onRemoveCalculatedField,
   onUpdateCalculatedField
 }) {
-  const [fieldSearch, setFieldSearch] = useState11("");
-  const [showCalcModal, setShowCalcModal] = useState11(false);
-  const [editingCalcField, setEditingCalcField] = useState11(null);
+  const [fieldSearch, setFieldSearch] = useState12("");
+  const [showCalcModal, setShowCalcModal] = useState12(false);
+  const [editingCalcField, setEditingCalcField] = useState12(null);
   const { canUseAdvancedAggregations } = useLicense();
-  const isAggregationAvailable = useCallback11((agg) => {
+  const isAggregationAvailable = useCallback12((agg) => {
     return !aggregationRequiresPro(agg) || canUseAdvancedAggregations;
   }, [canUseAdvancedAggregations]);
-  const numericFieldNames = useMemo11(() => availableFields.filter((f) => f.isNumeric).map((f) => f.field), [availableFields]);
-  const calculatedFieldsAsStats = useMemo11(() => {
+  const numericFieldNames = useMemo12(() => availableFields.filter((f) => f.isNumeric).map((f) => f.field), [availableFields]);
+  const calculatedFieldsAsStats = useMemo12(() => {
     if (!calculatedFields)
       return [];
     return calculatedFields.map((calc) => ({
@@ -3586,11 +3845,11 @@ function PivotConfig({
       calcFormula: calc.formula
     }));
   }, [calculatedFields]);
-  const allAvailableFields = useMemo11(() => [
+  const allAvailableFields = useMemo12(() => [
     ...availableFields.map((f) => ({ ...f, isCalculated: false })),
     ...calculatedFieldsAsStats
   ], [availableFields, calculatedFieldsAsStats]);
-  const assignedFields = useMemo11(() => {
+  const assignedFields = useMemo12(() => {
     const rowSet = new Set(rowFields);
     const colSet = new Set(columnFields);
     const valueMap = new Map(valueFields.map((v) => [v.field, v]));
@@ -3600,7 +3859,7 @@ function PivotConfig({
       valueConfig: valueMap.get(f.field)
     }));
   }, [allAvailableFields, rowFields, columnFields, valueFields]);
-  const unassignedFields = useMemo11(() => {
+  const unassignedFields = useMemo12(() => {
     const rowSet = new Set(rowFields);
     const colSet = new Set(columnFields);
     const valSet = new Set(valueFields.map((v) => v.field));
@@ -3608,7 +3867,7 @@ function PivotConfig({
       (f) => !rowSet.has(f.field) && !colSet.has(f.field) && !valSet.has(f.field)
     );
   }, [allAvailableFields, rowFields, columnFields, valueFields]);
-  const filteredUnassignedFields = useMemo11(() => {
+  const filteredUnassignedFields = useMemo12(() => {
     if (!fieldSearch.trim())
       return unassignedFields;
     const search = fieldSearch.toLowerCase().trim();
@@ -3619,13 +3878,13 @@ function PivotConfig({
     });
   }, [unassignedFields, fieldSearch]);
   const assignedCount = assignedFields.length;
-  const getFieldDisplayName = useCallback11((field) => {
+  const getFieldDisplayName = useCallback12((field) => {
     if (field.isCalculated && field.calcName) {
       return field.calcName;
     }
     return field.field;
   }, []);
-  const handleDragStart = useCallback11(
+  const handleDragStart = useCallback12(
     (field, event) => {
       event.dataTransfer?.setData("text/plain", field);
       event.dataTransfer.effectAllowed = "move";
@@ -3633,7 +3892,7 @@ function PivotConfig({
     },
     [onDragStart]
   );
-  const handleAggregationChange = useCallback11(
+  const handleAggregationChange = useCallback12(
     (field, currentAgg, newAgg) => {
       if (!isAggregationAvailable(newAgg)) {
         console.warn(`[TinyPivot] "${newAgg}" aggregation requires a Pro license. Visit https://tiny-pivot.com/#pricing to upgrade.`);
@@ -3643,7 +3902,7 @@ function PivotConfig({
     },
     [onUpdateAggregation, isAggregationAvailable]
   );
-  const toggleRowColumn = useCallback11(
+  const toggleRowColumn = useCallback12(
     (field, currentAssignment) => {
       if (currentAssignment === "row") {
         onRemoveRowField(field);
@@ -3655,7 +3914,7 @@ function PivotConfig({
     },
     [onRemoveRowField, onAddColumnField, onRemoveColumnField, onAddRowField]
   );
-  const removeField = useCallback11(
+  const removeField = useCallback12(
     (field, assignedTo, valueConfig) => {
       if (assignedTo === "row") {
         onRemoveRowField(field);
@@ -3667,15 +3926,15 @@ function PivotConfig({
     },
     [onRemoveRowField, onRemoveColumnField, onRemoveValueField]
   );
-  const handleTotalsToggle = useCallback11((checked) => {
+  const handleTotalsToggle = useCallback12((checked) => {
     onShowRowTotalsChange(checked);
     onShowColumnTotalsChange(checked);
   }, [onShowRowTotalsChange, onShowColumnTotalsChange]);
-  const openCalcModal = useCallback11((field) => {
+  const openCalcModal = useCallback12((field) => {
     setEditingCalcField(field || null);
     setShowCalcModal(true);
   }, []);
-  const handleSaveCalcField = useCallback11((field) => {
+  const handleSaveCalcField = useCallback12((field) => {
     if (editingCalcField && onUpdateCalculatedField) {
       onUpdateCalculatedField(field);
     } else if (onAddCalculatedField) {
@@ -3684,14 +3943,14 @@ function PivotConfig({
     setShowCalcModal(false);
     setEditingCalcField(null);
   }, [editingCalcField, onAddCalculatedField, onUpdateCalculatedField]);
-  const handleCloseCalcModal = useCallback11(() => {
+  const handleCloseCalcModal = useCallback12(() => {
     setShowCalcModal(false);
     setEditingCalcField(null);
   }, []);
-  return /* @__PURE__ */ jsxs6("div", { className: "vpg-pivot-config", children: [
-    /* @__PURE__ */ jsxs6("div", { className: "vpg-config-header", children: [
-      /* @__PURE__ */ jsxs6("h3", { className: "vpg-config-title", children: [
-        /* @__PURE__ */ jsx6("svg", { className: "vpg-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsxs7("div", { className: "vpg-pivot-config", children: [
+    /* @__PURE__ */ jsxs7("div", { className: "vpg-config-header", children: [
+      /* @__PURE__ */ jsxs7("h3", { className: "vpg-config-title", children: [
+        /* @__PURE__ */ jsx7("svg", { className: "vpg-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx7(
           "path",
           {
             strokeLinecap: "round",
@@ -3702,13 +3961,13 @@ function PivotConfig({
         ) }),
         "Fields"
       ] }),
-      /* @__PURE__ */ jsx6("div", { className: "vpg-header-actions", children: assignedCount > 0 && /* @__PURE__ */ jsx6(
+      /* @__PURE__ */ jsx7("div", { className: "vpg-header-actions", children: assignedCount > 0 && /* @__PURE__ */ jsx7(
         "button",
         {
           className: "vpg-action-btn vpg-clear-btn",
           title: "Clear all",
           onClick: onClearConfig,
-          children: /* @__PURE__ */ jsx6("svg", { className: "vpg-icon-sm", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx6(
+          children: /* @__PURE__ */ jsx7("svg", { className: "vpg-icon-sm", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx7(
             "path",
             {
               strokeLinecap: "round",
@@ -3720,9 +3979,9 @@ function PivotConfig({
         }
       ) })
     ] }),
-    assignedCount > 0 && /* @__PURE__ */ jsxs6("div", { className: "vpg-assigned-section", children: [
-      /* @__PURE__ */ jsx6("div", { className: "vpg-section-label", children: "Active" }),
-      /* @__PURE__ */ jsx6("div", { className: "vpg-assigned-list", children: assignedFields.map((field) => /* @__PURE__ */ jsxs6(
+    assignedCount > 0 && /* @__PURE__ */ jsxs7("div", { className: "vpg-assigned-section", children: [
+      /* @__PURE__ */ jsx7("div", { className: "vpg-section-label", children: "Active" }),
+      /* @__PURE__ */ jsx7("div", { className: "vpg-assigned-list", children: assignedFields.map((field) => /* @__PURE__ */ jsxs7(
         "div",
         {
           className: `vpg-assigned-item vpg-type-${field.assignedTo}${field.isCalculated ? " vpg-type-calc" : ""}`,
@@ -3731,12 +3990,12 @@ function PivotConfig({
           onDragStart: (e) => handleDragStart(field.field, e),
           onDragEnd,
           children: [
-            /* @__PURE__ */ jsxs6("div", { className: "vpg-item-main", children: [
-              /* @__PURE__ */ jsx6("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__ */ jsx6("span", { className: "vpg-item-name", children: getFieldDisplayName(field) })
+            /* @__PURE__ */ jsxs7("div", { className: "vpg-item-main", children: [
+              /* @__PURE__ */ jsx7("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__ */ jsx7("span", { className: "vpg-item-name", children: getFieldDisplayName(field) })
             ] }),
-            /* @__PURE__ */ jsxs6("div", { className: "vpg-item-actions", children: [
-              (field.assignedTo === "row" || field.assignedTo === "column") && /* @__PURE__ */ jsx6(
+            /* @__PURE__ */ jsxs7("div", { className: "vpg-item-actions", children: [
+              (field.assignedTo === "row" || field.assignedTo === "column") && /* @__PURE__ */ jsx7(
                 "button",
                 {
                   className: "vpg-toggle-btn",
@@ -3745,14 +4004,14 @@ function PivotConfig({
                     e.stopPropagation();
                     toggleRowColumn(field.field, field.assignedTo);
                   },
-                  children: /* @__PURE__ */ jsx6(
+                  children: /* @__PURE__ */ jsx7(
                     "svg",
                     {
                       className: "vpg-icon-xs",
                       fill: "none",
                       stroke: "currentColor",
                       viewBox: "0 0 24 24",
-                      children: /* @__PURE__ */ jsx6(
+                      children: /* @__PURE__ */ jsx7(
                         "path",
                         {
                           strokeLinecap: "round",
@@ -3765,7 +4024,7 @@ function PivotConfig({
                   )
                 }
               ),
-              field.assignedTo === "value" && field.valueConfig && /* @__PURE__ */ jsx6(
+              field.assignedTo === "value" && field.valueConfig && /* @__PURE__ */ jsx7(
                 "select",
                 {
                   className: "vpg-agg-select",
@@ -3779,7 +4038,7 @@ function PivotConfig({
                     );
                   },
                   onClick: (e) => e.stopPropagation(),
-                  children: AGGREGATION_OPTIONS.map((agg) => /* @__PURE__ */ jsxs6(
+                  children: AGGREGATION_OPTIONS.map((agg) => /* @__PURE__ */ jsxs7(
                     "option",
                     {
                       value: agg.value,
@@ -3795,7 +4054,7 @@ function PivotConfig({
                   ))
                 }
               ),
-              /* @__PURE__ */ jsx6(
+              /* @__PURE__ */ jsx7(
                 "button",
                 {
                   className: "vpg-remove-btn",
@@ -3813,14 +4072,14 @@ function PivotConfig({
         field.field
       )) })
     ] }),
-    /* @__PURE__ */ jsxs6("div", { className: "vpg-unassigned-section", children: [
-      /* @__PURE__ */ jsx6("div", { className: "vpg-section-header", children: /* @__PURE__ */ jsxs6("div", { className: "vpg-section-label", children: [
+    /* @__PURE__ */ jsxs7("div", { className: "vpg-unassigned-section", children: [
+      /* @__PURE__ */ jsx7("div", { className: "vpg-section-header", children: /* @__PURE__ */ jsxs7("div", { className: "vpg-section-label", children: [
         "Available",
         " ",
-        /* @__PURE__ */ jsx6("span", { className: "vpg-count", children: unassignedFields.length })
+        /* @__PURE__ */ jsx7("span", { className: "vpg-count", children: unassignedFields.length })
       ] }) }),
-      /* @__PURE__ */ jsxs6("div", { className: "vpg-field-search", children: [
-        /* @__PURE__ */ jsx6("svg", { className: "vpg-search-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx6(
+      /* @__PURE__ */ jsxs7("div", { className: "vpg-field-search", children: [
+        /* @__PURE__ */ jsx7("svg", { className: "vpg-search-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx7(
           "path",
           {
             strokeLinecap: "round",
@@ -3829,7 +4088,7 @@ function PivotConfig({
             d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
           }
         ) }),
-        /* @__PURE__ */ jsx6(
+        /* @__PURE__ */ jsx7(
           "input",
           {
             type: "text",
@@ -3839,7 +4098,7 @@ function PivotConfig({
             className: "vpg-search-input"
           }
         ),
-        fieldSearch && /* @__PURE__ */ jsx6("button", { className: "vpg-clear-search", onClick: () => setFieldSearch(""), children: /* @__PURE__ */ jsx6("svg", { className: "vpg-icon-xs", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx6(
+        fieldSearch && /* @__PURE__ */ jsx7("button", { className: "vpg-clear-search", onClick: () => setFieldSearch(""), children: /* @__PURE__ */ jsx7("svg", { className: "vpg-icon-xs", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx7(
           "path",
           {
             strokeLinecap: "round",
@@ -3849,8 +4108,8 @@ function PivotConfig({
           }
         ) }) })
       ] }),
-      /* @__PURE__ */ jsxs6("div", { className: "vpg-field-list", children: [
-        filteredUnassignedFields.map((field) => /* @__PURE__ */ jsxs6(
+      /* @__PURE__ */ jsxs7("div", { className: "vpg-field-list", children: [
+        filteredUnassignedFields.map((field) => /* @__PURE__ */ jsxs7(
           "div",
           {
             className: `vpg-field-item${field.isNumeric && !field.isCalculated ? " vpg-is-numeric" : ""}${field.isCalculated ? " vpg-is-calculated" : ""}`,
@@ -3859,10 +4118,10 @@ function PivotConfig({
             onDragStart: (e) => handleDragStart(field.field, e),
             onDragEnd,
             children: [
-              /* @__PURE__ */ jsx6("span", { className: `vpg-field-type-icon${field.isCalculated ? " vpg-calc-type" : ""}`, title: field.type, children: getFieldIcon(field.type, field.isCalculated) }),
-              /* @__PURE__ */ jsx6("span", { className: "vpg-field-name", children: getFieldDisplayName(field) }),
-              field.isCalculated ? /* @__PURE__ */ jsxs6(Fragment4, { children: [
-                /* @__PURE__ */ jsx6(
+              /* @__PURE__ */ jsx7("span", { className: `vpg-field-type-icon${field.isCalculated ? " vpg-calc-type" : ""}`, title: field.type, children: getFieldIcon(field.type, field.isCalculated) }),
+              /* @__PURE__ */ jsx7("span", { className: "vpg-field-name", children: getFieldDisplayName(field) }),
+              field.isCalculated ? /* @__PURE__ */ jsxs7(Fragment4, { children: [
+                /* @__PURE__ */ jsx7(
                   "button",
                   {
                     className: "vpg-field-edit",
@@ -3876,7 +4135,7 @@ function PivotConfig({
                     children: "\u270E"
                   }
                 ),
-                /* @__PURE__ */ jsx6(
+                /* @__PURE__ */ jsx7(
                   "button",
                   {
                     className: "vpg-field-delete",
@@ -3890,22 +4149,22 @@ function PivotConfig({
                     children: "\xD7"
                   }
                 )
-              ] }) : /* @__PURE__ */ jsx6("span", { className: "vpg-unique-count", children: field.uniqueCount })
+              ] }) : /* @__PURE__ */ jsx7("span", { className: "vpg-unique-count", children: field.uniqueCount })
             ]
           },
           field.field
         )),
-        filteredUnassignedFields.length === 0 && fieldSearch && /* @__PURE__ */ jsxs6("div", { className: "vpg-empty-hint", children: [
+        filteredUnassignedFields.length === 0 && fieldSearch && /* @__PURE__ */ jsxs7("div", { className: "vpg-empty-hint", children: [
           'No fields match "',
           fieldSearch,
           '"'
         ] }),
-        unassignedFields.length === 0 && /* @__PURE__ */ jsx6("div", { className: "vpg-empty-hint", children: "All fields assigned" })
+        unassignedFields.length === 0 && /* @__PURE__ */ jsx7("div", { className: "vpg-empty-hint", children: "All fields assigned" })
       ] })
     ] }),
-    /* @__PURE__ */ jsxs6("div", { className: "vpg-options-section", children: [
-      /* @__PURE__ */ jsxs6("label", { className: "vpg-option-toggle", children: [
-        /* @__PURE__ */ jsx6(
+    /* @__PURE__ */ jsxs7("div", { className: "vpg-options-section", children: [
+      /* @__PURE__ */ jsxs7("label", { className: "vpg-option-toggle", children: [
+        /* @__PURE__ */ jsx7(
           "input",
           {
             type: "checkbox",
@@ -3913,14 +4172,14 @@ function PivotConfig({
             onChange: (e) => handleTotalsToggle(e.target.checked)
           }
         ),
-        /* @__PURE__ */ jsx6("span", { children: "Totals" })
+        /* @__PURE__ */ jsx7("span", { children: "Totals" })
       ] }),
-      /* @__PURE__ */ jsxs6("button", { className: "vpg-calc-btn", onClick: () => openCalcModal(), title: "Add calculated field (e.g. Profit Margin %)", children: [
-        /* @__PURE__ */ jsx6("span", { className: "vpg-calc-icon", children: "\u0192" }),
-        /* @__PURE__ */ jsx6("span", { children: "+ Calc" })
+      /* @__PURE__ */ jsxs7("button", { className: "vpg-calc-btn", onClick: () => openCalcModal(), title: "Add calculated field (e.g. Profit Margin %)", children: [
+        /* @__PURE__ */ jsx7("span", { className: "vpg-calc-icon", children: "\u0192" }),
+        /* @__PURE__ */ jsx7("span", { children: "+ Calc" })
       ] })
     ] }),
-    /* @__PURE__ */ jsx6(
+    /* @__PURE__ */ jsx7(
       CalculatedFieldModal,
       {
         show: showCalcModal,
@@ -3935,8 +4194,8 @@ function PivotConfig({
 // src/components/PivotSkeleton.tsx
 import { getAggregationLabel as getAggregationLabel2, getAggregationSymbol as getAggregationSymbol2 } from "@smallwebco/tinypivot-core";
-import { useCallback as useCallback12, useEffect as useEffect9, useMemo as useMemo12, useState as useState12 } from "react";
-import { Fragment as Fragment5, jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+import { useCallback as useCallback13, useEffect as useEffect10, useMemo as useMemo13, useState as useState13 } from "react";
+import { Fragment as Fragment5, jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
 function PivotSkeleton({
   rowFields,
   columnFields,
@@ -3959,7 +4218,7 @@ function PivotSkeleton({
   onReorderColumnFields
 }) {
   const { showWatermark, canUsePivot, isDemo } = useLicense();
-  const getValueFieldDisplayName = useCallback12((field) => {
+  const getValueFieldDisplayName = useCallback13((field) => {
     if (field.startsWith("calc:")) {
       const calcId = field.replace("calc:", "");
       const calcField = calculatedFields?.find((c) => c.id === calcId);
@@ -3967,15 +4226,15 @@ function PivotSkeleton({
     }
     return field;
   }, [calculatedFields]);
-  const isCalculatedField = useCallback12((field) => {
+  const isCalculatedField = useCallback13((field) => {
     return field.startsWith("calc:");
   }, []);
-  const [dragOverArea, setDragOverArea] = useState12(null);
-  const [reorderDragSource, setReorderDragSource] = useState12(null);
-  const [reorderDropTarget, setReorderDropTarget] = useState12(null);
-  const [sortDirection, setSortDirection] = useState12("asc");
-  const [sortTarget, setSortTarget] = useState12("row");
-  const toggleSort = useCallback12((target = "row") => {
+  const [dragOverArea, setDragOverArea] = useState13(null);
+  const [reorderDragSource, setReorderDragSource] = useState13(null);
+  const [reorderDropTarget, setReorderDropTarget] = useState13(null);
+  const [sortDirection, setSortDirection] = useState13("asc");
+  const [sortTarget, setSortTarget] = useState13("row");
+  const toggleSort = useCallback13((target = "row") => {
     if (sortTarget === target) {
       setSortDirection((prev) => prev === "asc" ? "desc" : "asc");
     } else {
@@ -3983,13 +4242,13 @@ function PivotSkeleton({
       setSortDirection("asc");
     }
   }, [sortTarget]);
-  const [selectedCell, setSelectedCell] = useState12(null);
-  const [selectionStart, setSelectionStart] = useState12(null);
-  const [selectionEnd, setSelectionEnd] = useState12(null);
-  const [isSelecting, setIsSelecting] = useState12(false);
-  const [showCopyToast, setShowCopyToast] = useState12(false);
-  const [copyToastMessage, setCopyToastMessage] = useState12("");
-  const selectionBounds = useMemo12(() => {
+  const [selectedCell, setSelectedCell] = useState13(null);
+  const [selectionStart, setSelectionStart] = useState13(null);
+  const [selectionEnd, setSelectionEnd] = useState13(null);
+  const [isSelecting, setIsSelecting] = useState13(false);
+  const [showCopyToast, setShowCopyToast] = useState13(false);
+  const [copyToastMessage, setCopyToastMessage] = useState13("");
+  const selectionBounds = useMemo13(() => {
     if (!selectionStart || !selectionEnd)
       return null;
     return {
@@ -3999,7 +4258,7 @@ function PivotSkeleton({
       maxCol: Math.max(selectionStart.col, selectionEnd.col)
     };
   }, [selectionStart, selectionEnd]);
-  const handleCellMouseDown = useCallback12(
+  const handleCellMouseDown = useCallback13(
     (rowIndex, colIndex, event) => {
       event.preventDefault();
       if (event.shiftKey && selectedCell) {
@@ -4013,7 +4272,7 @@ function PivotSkeleton({
     },
     [selectedCell]
   );
-  const handleCellMouseEnter = useCallback12(
+  const handleCellMouseEnter = useCallback13(
     (rowIndex, colIndex) => {
       if (isSelecting) {
         setSelectionEnd({ row: rowIndex, col: colIndex });
@@ -4021,7 +4280,7 @@ function PivotSkeleton({
     },
     [isSelecting]
   );
-  const isCellSelected = useCallback12(
+  const isCellSelected = useCallback13(
     (rowIndex, colIndex) => {
       if (!selectionBounds) {
         return selectedCell?.row === rowIndex && selectedCell?.col === colIndex;
@@ -4031,12 +4290,12 @@ function PivotSkeleton({
     },
     [selectionBounds, selectedCell]
   );
-  useEffect9(() => {
+  useEffect10(() => {
     const handleMouseUp = () => setIsSelecting(false);
     document.addEventListener("mouseup", handleMouseUp);
     return () => document.removeEventListener("mouseup", handleMouseUp);
   }, []);
-  const sortedRowIndices = useMemo12(() => {
+  const sortedRowIndices = useMemo13(() => {
     if (!pivotResult)
       return [];
     const indices = pivotResult.rowHeaders.map((_, i) => i);
@@ -4064,7 +4323,7 @@ function PivotSkeleton({
     });
     return indices;
   }, [pivotResult, sortTarget, sortDirection]);
-  const copySelectionToClipboard = useCallback12(() => {
+  const copySelectionToClipboard = useCallback13(() => {
     if (!selectionBounds || !pivotResult)
       return;
     const { minRow, maxRow, minCol, maxCol } = selectionBounds;
@@ -4090,7 +4349,7 @@ function PivotSkeleton({
       console.error("Copy failed:", err);
     });
   }, [selectionBounds, pivotResult, sortedRowIndices]);
-  useEffect9(() => {
+  useEffect10(() => {
     const handleKeydown = (event) => {
       if (!selectionBounds)
         return;
@@ -4108,7 +4367,7 @@ function PivotSkeleton({
     document.addEventListener("keydown", handleKeydown);
     return () => document.removeEventListener("keydown", handleKeydown);
   }, [selectionBounds, copySelectionToClipboard]);
-  const selectionStats = useMemo12(() => {
+  const selectionStats = useMemo13(() => {
     if (!selectionBounds || !pivotResult)
       return null;
     const { minRow, maxRow, minCol, maxCol } = selectionBounds;
@@ -4137,14 +4396,14 @@ function PivotSkeleton({
       avg
     };
   }, [selectionBounds, pivotResult, sortedRowIndices]);
-  const formatStatValue = useCallback12((val) => {
+  const formatStatValue = useCallback13((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 = useMemo12(() => {
+  const columnHeaderCells = useMemo13(() => {
     if (!pivotResult || pivotResult.headers.length === 0) {
       return [
         valueFields.map((vf) => ({
@@ -4172,13 +4431,13 @@ function PivotSkeleton({
     return result;
   }, [pivotResult, valueFields]);
   const hasActiveFilters = activeFilters && activeFilters.length > 0;
-  const filterSummary = useMemo12(() => {
+  const filterSummary = useMemo13(() => {
     if (!activeFilters || activeFilters.length === 0)
       return "";
     return activeFilters.map((f) => f.column).join(", ");
   }, [activeFilters]);
-  const [showFilterTooltip, setShowFilterTooltip] = useState12(false);
-  const filterTooltipDetails = useMemo12(() => {
+  const [showFilterTooltip, setShowFilterTooltip] = useState13(false);
+  const filterTooltipDetails = useMemo13(() => {
     if (!activeFilters || activeFilters.length === 0)
       return [];
     return activeFilters.map((f) => {
@@ -4203,7 +4462,7 @@ function PivotSkeleton({
       };
     });
   }, [activeFilters]);
-  const handleDragOver = useCallback12(
+  const handleDragOver = useCallback13(
     (area, event) => {
       event.preventDefault();
       event.dataTransfer.dropEffect = "move";
@@ -4211,10 +4470,10 @@ function PivotSkeleton({
     },
     []
   );
-  const handleDragLeave = useCallback12(() => {
+  const handleDragLeave = useCallback13(() => {
     setDragOverArea(null);
   }, []);
-  const handleDrop = useCallback12(
+  const handleDrop = useCallback13(
     (area, event) => {
       event.preventDefault();
       const field = event.dataTransfer?.getData("text/plain");
@@ -4244,7 +4503,7 @@ function PivotSkeleton({
     },
     [rowFields, columnFields, valueFields, onAddRowField, onRemoveRowField, onAddColumnField, onRemoveColumnField, onAddValueField, onRemoveValueField]
   );
-  const handleChipDragStart = useCallback12(
+  const handleChipDragStart = useCallback13(
     (zone, index, event) => {
       setReorderDragSource({ zone, index });
       event.dataTransfer.effectAllowed = "move";
@@ -4255,11 +4514,11 @@ function PivotSkeleton({
     },
     []
   );
-  const handleChipDragEnd = useCallback12(() => {
+  const handleChipDragEnd = useCallback13(() => {
     setReorderDragSource(null);
     setReorderDropTarget(null);
   }, []);
-  const handleChipDragOver = useCallback12(
+  const handleChipDragOver = useCallback13(
     (zone, index, event) => {
       event.preventDefault();
       if (reorderDragSource && reorderDragSource.zone === zone) {
@@ -4269,10 +4528,10 @@ function PivotSkeleton({
     },
     [reorderDragSource]
   );
-  const handleChipDragLeave = useCallback12(() => {
+  const handleChipDragLeave = useCallback13(() => {
     setReorderDropTarget(null);
   }, []);
-  const handleChipDrop = useCallback12(
+  const handleChipDrop = useCallback13(
     (zone, targetIndex, event) => {
       event.preventDefault();
       event.stopPropagation();
@@ -4298,13 +4557,13 @@ function PivotSkeleton({
     },
     [reorderDragSource, rowFields, columnFields, onReorderRowFields, onReorderColumnFields]
   );
-  const isChipDragSource = useCallback12(
+  const isChipDragSource = useCallback13(
     (zone, index) => {
       return reorderDragSource?.zone === zone && reorderDragSource?.index === index;
     },
     [reorderDragSource]
   );
-  const isChipDropTarget = useCallback12(
+  const isChipDropTarget = useCallback13(
     (zone, index) => {
       return reorderDropTarget?.zone === zone && reorderDropTarget?.index === index;
     },
@@ -4312,25 +4571,25 @@ function PivotSkeleton({
   );
   const currentFontSize = fontSize;
   const rowHeaderWidth = 180;
-  const rowHeaderColWidth = useMemo12(() => {
+  const rowHeaderColWidth = useMemo13(() => {
     const numCols = Math.max(rowFields.length, 1);
     return Math.max(rowHeaderWidth / numCols, 80);
   }, [rowFields.length]);
-  const getRowHeaderLeftOffset = useCallback12((fieldIdx) => {
+  const getRowHeaderLeftOffset = useCallback13((fieldIdx) => {
     return fieldIdx * rowHeaderColWidth;
   }, [rowHeaderColWidth]);
-  return /* @__PURE__ */ jsxs7(
+  return /* @__PURE__ */ jsxs8(
     "div",
     {
       className: `vpg-pivot-skeleton vpg-font-${currentFontSize} ${draggingField ? "vpg-is-dragging" : ""}`,
       children: [
-        showCopyToast && /* @__PURE__ */ jsxs7("div", { className: "vpg-toast", children: [
-          /* @__PURE__ */ jsx7("svg", { className: "vpg-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx7("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) }),
+        showCopyToast && /* @__PURE__ */ jsxs8("div", { className: "vpg-toast", children: [
+          /* @__PURE__ */ jsx8("svg", { className: "vpg-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx8("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) }),
           copyToastMessage
         ] }),
-        /* @__PURE__ */ jsxs7("div", { className: "vpg-skeleton-header", children: [
-          /* @__PURE__ */ jsxs7("div", { className: "vpg-skeleton-title", children: [
-            /* @__PURE__ */ jsx7("svg", { className: "vpg-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx7(
+        /* @__PURE__ */ jsxs8("div", { className: "vpg-skeleton-header", children: [
+          /* @__PURE__ */ jsxs8("div", { className: "vpg-skeleton-title", children: [
+            /* @__PURE__ */ jsx8("svg", { className: "vpg-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx8(
               "path",
               {
                 strokeLinecap: "round",
@@ -4339,24 +4598,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__ */ jsx7("span", { children: "Pivot Table" })
+            /* @__PURE__ */ jsx8("span", { children: "Pivot Table" })
           ] }),
-          /* @__PURE__ */ jsxs7("div", { className: "vpg-header-right", children: [
-            hasActiveFilters && /* @__PURE__ */ jsxs7(
+          /* @__PURE__ */ jsxs8("div", { className: "vpg-header-right", children: [
+            hasActiveFilters && /* @__PURE__ */ jsxs8(
               "div",
               {
                 className: "vpg-filter-indicator",
                 onMouseEnter: () => setShowFilterTooltip(true),
                 onMouseLeave: () => setShowFilterTooltip(false),
                 children: [
-                  /* @__PURE__ */ jsx7(
+                  /* @__PURE__ */ jsx8(
                     "svg",
                     {
                       className: "vpg-filter-icon",
                       fill: "none",
                       stroke: "currentColor",
                       viewBox: "0 0 24 24",
-                      children: /* @__PURE__ */ jsx7(
+                      children: /* @__PURE__ */ jsx8(
                         "path",
                         {
                           strokeLinecap: "round",
@@ -4367,11 +4626,11 @@ function PivotSkeleton({
                       )
                     }
                   ),
-                  /* @__PURE__ */ jsxs7("span", { className: "vpg-filter-text", children: [
+                  /* @__PURE__ */ jsxs8("span", { className: "vpg-filter-text", children: [
                     "Filtered:",
                     " ",
-                    /* @__PURE__ */ jsx7("strong", { children: filterSummary }),
-                    filteredRowCount !== void 0 && totalRowCount !== void 0 && /* @__PURE__ */ jsxs7("span", { className: "vpg-filter-count", children: [
+                    /* @__PURE__ */ jsx8("strong", { children: filterSummary }),
+                    filteredRowCount !== void 0 && totalRowCount !== void 0 && /* @__PURE__ */ jsxs8("span", { className: "vpg-filter-count", children: [
                       "(",
                       filteredRowCount.toLocaleString(),
                       " ",
@@ -4382,13 +4641,13 @@ function PivotSkeleton({
                       "rows)"
                     ] })
                   ] }),
-                  showFilterTooltip && /* @__PURE__ */ jsxs7("div", { className: "vpg-filter-tooltip", children: [
-                    /* @__PURE__ */ jsx7("div", { className: "vpg-tooltip-header", children: "Active Filters" }),
-                    filterTooltipDetails.map((filter) => /* @__PURE__ */ jsxs7("div", { className: "vpg-tooltip-filter", children: [
-                      /* @__PURE__ */ jsx7("div", { className: "vpg-tooltip-column", children: filter.column }),
-                      /* @__PURE__ */ jsx7("div", { className: "vpg-tooltip-values", children: filter.isRange ? /* @__PURE__ */ jsx7("span", { className: "vpg-tooltip-value vpg-range-value", children: filter.displayText }) : /* @__PURE__ */ jsxs7(Fragment5, { children: [
-                        filter.values.map((val, idx) => /* @__PURE__ */ jsx7("span", { className: "vpg-tooltip-value", children: val }, idx)),
-                        filter.remaining > 0 && /* @__PURE__ */ jsxs7("span", { className: "vpg-tooltip-more", children: [
+                  showFilterTooltip && /* @__PURE__ */ jsxs8("div", { className: "vpg-filter-tooltip", children: [
+                    /* @__PURE__ */ jsx8("div", { className: "vpg-tooltip-header", children: "Active Filters" }),
+                    filterTooltipDetails.map((filter) => /* @__PURE__ */ jsxs8("div", { className: "vpg-tooltip-filter", children: [
+                      /* @__PURE__ */ jsx8("div", { className: "vpg-tooltip-column", children: filter.column }),
+                      /* @__PURE__ */ jsx8("div", { className: "vpg-tooltip-values", children: filter.isRange ? /* @__PURE__ */ jsx8("span", { className: "vpg-tooltip-value vpg-range-value", children: filter.displayText }) : /* @__PURE__ */ jsxs8(Fragment5, { children: [
+                        filter.values.map((val, idx) => /* @__PURE__ */ jsx8("span", { className: "vpg-tooltip-value", children: val }, idx)),
+                        filter.remaining > 0 && /* @__PURE__ */ jsxs8("span", { className: "vpg-tooltip-more", children: [
                           "+",
                           filter.remaining,
                           " ",
@@ -4396,7 +4655,7 @@ function PivotSkeleton({
                         ] })
                       ] }) })
                     ] }, filter.column)),
-                    filteredRowCount !== void 0 && totalRowCount !== void 0 && /* @__PURE__ */ jsxs7("div", { className: "vpg-tooltip-summary", children: [
+                    filteredRowCount !== void 0 && totalRowCount !== void 0 && /* @__PURE__ */ jsxs8("div", { className: "vpg-tooltip-summary", children: [
                       "Showing",
                       " ",
                       filteredRowCount.toLocaleString(),
@@ -4411,20 +4670,20 @@ function PivotSkeleton({
                 ]
               }
             ),
-            isConfigured && /* @__PURE__ */ jsxs7("div", { className: "vpg-config-summary", children: [
-              /* @__PURE__ */ jsxs7("span", { className: "vpg-summary-badge vpg-rows", children: [
+            isConfigured && /* @__PURE__ */ jsxs8("div", { className: "vpg-config-summary", children: [
+              /* @__PURE__ */ jsxs8("span", { className: "vpg-summary-badge vpg-rows", children: [
                 rowFields.length,
                 " ",
                 "row",
                 rowFields.length !== 1 ? "s" : ""
               ] }),
-              /* @__PURE__ */ jsxs7("span", { className: "vpg-summary-badge vpg-cols", children: [
+              /* @__PURE__ */ jsxs8("span", { className: "vpg-summary-badge vpg-cols", children: [
                 columnFields.length,
                 " ",
                 "col",
                 columnFields.length !== 1 ? "s" : ""
               ] }),
-              /* @__PURE__ */ jsxs7("span", { className: "vpg-summary-badge vpg-vals", children: [
+              /* @__PURE__ */ jsxs8("span", { className: "vpg-summary-badge vpg-vals", children: [
                 valueFields.length,
                 " ",
                 "val",
@@ -4433,8 +4692,8 @@ function PivotSkeleton({
             ] })
           ] })
         ] }),
-        !canUsePivot ? /* @__PURE__ */ jsx7("div", { className: "vpg-pro-required", children: /* @__PURE__ */ jsxs7("div", { className: "vpg-pro-content", children: [
-          /* @__PURE__ */ jsx7("svg", { className: "vpg-pro-icon", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx7(
+        !canUsePivot ? /* @__PURE__ */ jsx8("div", { className: "vpg-pro-required", children: /* @__PURE__ */ jsxs8("div", { className: "vpg-pro-content", children: [
+          /* @__PURE__ */ jsx8("svg", { className: "vpg-pro-icon", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx8(
             "path",
             {
               strokeLinecap: "round",
@@ -4443,12 +4702,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__ */ jsx7("h3", { children: "Pro Feature" }),
-          /* @__PURE__ */ jsx7("p", { children: "Pivot Table functionality requires a Pro license." }),
-          /* @__PURE__ */ jsx7("a", { href: "https://tiny-pivot.com/#pricing", target: "_blank", rel: "noopener noreferrer", className: "vpg-pro-link", children: "Get Pro License \u2192" })
-        ] }) }) : /* @__PURE__ */ jsxs7(Fragment5, { children: [
-          /* @__PURE__ */ jsxs7("div", { className: "vpg-config-bar", children: [
-            /* @__PURE__ */ jsxs7(
+          /* @__PURE__ */ jsx8("h3", { children: "Pro Feature" }),
+          /* @__PURE__ */ jsx8("p", { children: "Pivot Table functionality requires a Pro license." }),
+          /* @__PURE__ */ jsx8("a", { href: "https://tiny-pivot.com/#pricing", target: "_blank", rel: "noopener noreferrer", className: "vpg-pro-link", children: "Get Pro License \u2192" })
+        ] }) }) : /* @__PURE__ */ jsxs8(Fragment5, { children: [
+          /* @__PURE__ */ jsxs8("div", { className: "vpg-config-bar", children: [
+            /* @__PURE__ */ jsxs8(
               "div",
               {
                 className: `vpg-drop-zone vpg-row-zone ${dragOverArea === "row" ? "vpg-drag-over" : ""}`,
@@ -4456,12 +4715,12 @@ function PivotSkeleton({
                 onDragLeave: handleDragLeave,
                 onDrop: (e) => handleDrop("row", e),
                 children: [
-                  /* @__PURE__ */ jsxs7("div", { className: "vpg-zone-header", children: [
-                    /* @__PURE__ */ jsx7("span", { className: "vpg-zone-icon vpg-row-icon", children: "\u2193" }),
-                    /* @__PURE__ */ jsx7("span", { className: "vpg-zone-label", children: "Rows" })
+                  /* @__PURE__ */ jsxs8("div", { className: "vpg-zone-header", children: [
+                    /* @__PURE__ */ jsx8("span", { className: "vpg-zone-icon vpg-row-icon", children: "\u2193" }),
+                    /* @__PURE__ */ jsx8("span", { className: "vpg-zone-label", children: "Rows" })
                   ] }),
-                  /* @__PURE__ */ jsxs7("div", { className: "vpg-zone-chips", children: [
-                    rowFields.map((field, idx) => /* @__PURE__ */ jsxs7(
+                  /* @__PURE__ */ jsxs8("div", { className: "vpg-zone-chips", children: [
+                    rowFields.map((field, idx) => /* @__PURE__ */ jsxs8(
                       "div",
                       {
                         className: `vpg-mini-chip vpg-row-chip ${isChipDragSource("row", idx) ? "vpg-chip-dragging" : ""} ${isChipDropTarget("row", idx) ? "vpg-chip-drop-target" : ""}`,
@@ -4472,9 +4731,9 @@ function PivotSkeleton({
                         onDragLeave: handleChipDragLeave,
                         onDrop: (e) => handleChipDrop("row", idx, e),
                         children: [
-                          /* @__PURE__ */ jsx7("span", { className: "vpg-drag-handle", children: "\u22EE\u22EE" }),
-                          /* @__PURE__ */ jsx7("span", { className: "vpg-mini-name", children: field }),
-                          /* @__PURE__ */ jsx7(
+                          /* @__PURE__ */ jsx8("span", { className: "vpg-drag-handle", children: "\u22EE\u22EE" }),
+                          /* @__PURE__ */ jsx8("span", { className: "vpg-mini-name", children: field }),
+                          /* @__PURE__ */ jsx8(
                             "button",
                             {
                               className: "vpg-mini-remove",
@@ -4489,12 +4748,12 @@ function PivotSkeleton({
                       },
                       field
                     )),
-                    rowFields.length === 0 && /* @__PURE__ */ jsx7("span", { className: "vpg-zone-hint", children: "Drop here" })
+                    rowFields.length === 0 && /* @__PURE__ */ jsx8("span", { className: "vpg-zone-hint", children: "Drop here" })
                   ] })
                 ]
               }
             ),
-            /* @__PURE__ */ jsxs7(
+            /* @__PURE__ */ jsxs8(
               "div",
               {
                 className: `vpg-drop-zone vpg-column-zone ${dragOverArea === "column" ? "vpg-drag-over" : ""}`,
@@ -4502,12 +4761,12 @@ function PivotSkeleton({
                 onDragLeave: handleDragLeave,
                 onDrop: (e) => handleDrop("column", e),
                 children: [
-                  /* @__PURE__ */ jsxs7("div", { className: "vpg-zone-header", children: [
-                    /* @__PURE__ */ jsx7("span", { className: "vpg-zone-icon vpg-column-icon", children: "\u2192" }),
-                    /* @__PURE__ */ jsx7("span", { className: "vpg-zone-label", children: "Columns" })
+                  /* @__PURE__ */ jsxs8("div", { className: "vpg-zone-header", children: [
+                    /* @__PURE__ */ jsx8("span", { className: "vpg-zone-icon vpg-column-icon", children: "\u2192" }),
+                    /* @__PURE__ */ jsx8("span", { className: "vpg-zone-label", children: "Columns" })
                   ] }),
-                  /* @__PURE__ */ jsxs7("div", { className: "vpg-zone-chips", children: [
-                    columnFields.map((field, idx) => /* @__PURE__ */ jsxs7(
+                  /* @__PURE__ */ jsxs8("div", { className: "vpg-zone-chips", children: [
+                    columnFields.map((field, idx) => /* @__PURE__ */ jsxs8(
                       "div",
                       {
                         className: `vpg-mini-chip vpg-column-chip ${isChipDragSource("column", idx) ? "vpg-chip-dragging" : ""} ${isChipDropTarget("column", idx) ? "vpg-chip-drop-target" : ""}`,
@@ -4518,9 +4777,9 @@ function PivotSkeleton({
                         onDragLeave: handleChipDragLeave,
                         onDrop: (e) => handleChipDrop("column", idx, e),
                         children: [
-                          /* @__PURE__ */ jsx7("span", { className: "vpg-drag-handle", children: "\u22EE\u22EE" }),
-                          /* @__PURE__ */ jsx7("span", { className: "vpg-mini-name", children: field }),
-                          /* @__PURE__ */ jsx7(
+                          /* @__PURE__ */ jsx8("span", { className: "vpg-drag-handle", children: "\u22EE\u22EE" }),
+                          /* @__PURE__ */ jsx8("span", { className: "vpg-mini-name", children: field }),
+                          /* @__PURE__ */ jsx8(
                             "button",
                             {
                               className: "vpg-mini-remove",
@@ -4535,12 +4794,12 @@ function PivotSkeleton({
                       },
                       field
                     )),
-                    columnFields.length === 0 && /* @__PURE__ */ jsx7("span", { className: "vpg-zone-hint", children: "Drop here" })
+                    columnFields.length === 0 && /* @__PURE__ */ jsx8("span", { className: "vpg-zone-hint", children: "Drop here" })
                   ] })
                 ]
               }
             ),
-            /* @__PURE__ */ jsxs7(
+            /* @__PURE__ */ jsxs8(
               "div",
               {
                 className: `vpg-drop-zone vpg-value-zone ${dragOverArea === "value" ? "vpg-drag-over" : ""}`,
@@ -4548,19 +4807,19 @@ function PivotSkeleton({
                 onDragLeave: handleDragLeave,
                 onDrop: (e) => handleDrop("value", e),
                 children: [
-                  /* @__PURE__ */ jsxs7("div", { className: "vpg-zone-header", children: [
-                    /* @__PURE__ */ jsx7("span", { className: "vpg-zone-icon vpg-value-icon", children: "\u03A3" }),
-                    /* @__PURE__ */ jsx7("span", { className: "vpg-zone-label", children: "Values" })
+                  /* @__PURE__ */ jsxs8("div", { className: "vpg-zone-header", children: [
+                    /* @__PURE__ */ jsx8("span", { className: "vpg-zone-icon vpg-value-icon", children: "\u03A3" }),
+                    /* @__PURE__ */ jsx8("span", { className: "vpg-zone-label", children: "Values" })
                   ] }),
-                  /* @__PURE__ */ jsxs7("div", { className: "vpg-zone-chips", children: [
-                    valueFields.map((vf) => /* @__PURE__ */ jsxs7(
+                  /* @__PURE__ */ jsxs8("div", { className: "vpg-zone-chips", children: [
+                    valueFields.map((vf) => /* @__PURE__ */ jsxs8(
                       "div",
                       {
                         className: `vpg-mini-chip vpg-value-chip${isCalculatedField(vf.field) ? " vpg-calc-chip" : ""}`,
                         children: [
-                          /* @__PURE__ */ jsx7("span", { className: "vpg-agg-symbol", children: isCalculatedField(vf.field) ? "\u0192" : getAggregationSymbol2(vf.aggregation) }),
-                          /* @__PURE__ */ jsx7("span", { className: "vpg-mini-name", children: getValueFieldDisplayName(vf.field) }),
-                          /* @__PURE__ */ jsx7(
+                          /* @__PURE__ */ jsx8("span", { className: "vpg-agg-symbol", children: isCalculatedField(vf.field) ? "\u0192" : getAggregationSymbol2(vf.aggregation) }),
+                          /* @__PURE__ */ jsx8("span", { className: "vpg-mini-name", children: getValueFieldDisplayName(vf.field) }),
+                          /* @__PURE__ */ jsx8(
                             "button",
                             {
                               className: "vpg-mini-remove",
@@ -4572,21 +4831,21 @@ function PivotSkeleton({
                       },
                       `${vf.field}-${vf.aggregation}`
                     )),
-                    valueFields.length === 0 && /* @__PURE__ */ jsx7("span", { className: "vpg-zone-hint", children: "Drop numeric" })
+                    valueFields.length === 0 && /* @__PURE__ */ jsx8("span", { className: "vpg-zone-hint", children: "Drop numeric" })
                   ] })
                 ]
               }
             )
           ] }),
-          (!isConfigured || !pivotResult) && /* @__PURE__ */ jsx7("div", { className: "vpg-placeholder", children: /* @__PURE__ */ jsxs7("div", { className: "vpg-placeholder-content", children: [
-            /* @__PURE__ */ jsx7(
+          (!isConfigured || !pivotResult) && /* @__PURE__ */ jsx8("div", { className: "vpg-placeholder", children: /* @__PURE__ */ jsxs8("div", { className: "vpg-placeholder-content", children: [
+            /* @__PURE__ */ jsx8(
               "svg",
               {
                 className: "vpg-placeholder-icon",
                 fill: "none",
                 viewBox: "0 0 24 24",
                 stroke: "currentColor",
-                children: /* @__PURE__ */ jsx7(
+                children: /* @__PURE__ */ jsx8(
                   "path",
                   {
                     strokeLinecap: "round",
@@ -4597,58 +4856,58 @@ function PivotSkeleton({
                 )
               }
             ),
-            /* @__PURE__ */ jsx7("span", { className: "vpg-placeholder-text", children: valueFields.length === 0 ? /* @__PURE__ */ jsxs7(Fragment5, { children: [
+            /* @__PURE__ */ jsx8("span", { className: "vpg-placeholder-text", children: valueFields.length === 0 ? /* @__PURE__ */ jsxs8(Fragment5, { children: [
               "Add a",
               " ",
-              /* @__PURE__ */ jsx7("strong", { children: "Values" }),
+              /* @__PURE__ */ jsx8("strong", { children: "Values" }),
               " ",
               "field to see your pivot table"
-            ] }) : rowFields.length === 0 && columnFields.length === 0 ? /* @__PURE__ */ jsxs7(Fragment5, { children: [
+            ] }) : rowFields.length === 0 && columnFields.length === 0 ? /* @__PURE__ */ jsxs8(Fragment5, { children: [
               "Add",
               " ",
-              /* @__PURE__ */ jsx7("strong", { children: "Row" }),
+              /* @__PURE__ */ jsx8("strong", { children: "Row" }),
               " ",
               "or",
               " ",
-              /* @__PURE__ */ jsx7("strong", { children: "Column" }),
+              /* @__PURE__ */ jsx8("strong", { children: "Column" }),
               " ",
               "fields to group your data"
             ] }) : "Your pivot table will appear here" })
           ] }) }),
-          isConfigured && pivotResult && /* @__PURE__ */ jsx7("div", { className: "vpg-table-container", children: /* @__PURE__ */ jsxs7("table", { className: "vpg-pivot-table", children: [
-            /* @__PURE__ */ jsx7("thead", { children: columnHeaderCells.map((headerRow, levelIdx) => /* @__PURE__ */ jsxs7("tr", { className: "vpg-column-header-row", children: [
-              levelIdx === 0 && (rowFields.length > 0 ? rowFields : ["Rows"]).map((field, fieldIdx) => /* @__PURE__ */ jsx7(
+          isConfigured && pivotResult && /* @__PURE__ */ jsx8("div", { className: "vpg-table-container", children: /* @__PURE__ */ jsxs8("table", { className: "vpg-pivot-table", children: [
+            /* @__PURE__ */ jsx8("thead", { children: columnHeaderCells.map((headerRow, levelIdx) => /* @__PURE__ */ jsxs8("tr", { className: "vpg-column-header-row", children: [
+              levelIdx === 0 && (rowFields.length > 0 ? rowFields : ["Rows"]).map((field, fieldIdx) => /* @__PURE__ */ jsx8(
                 "th",
                 {
                   className: "vpg-row-header-label",
                   rowSpan: columnHeaderCells.length,
                   style: { width: `${rowHeaderColWidth}px`, minWidth: "80px", left: `${getRowHeaderLeftOffset(fieldIdx)}px` },
                   onClick: () => toggleSort("row"),
-                  children: /* @__PURE__ */ jsxs7("div", { className: "vpg-header-content", children: [
-                    /* @__PURE__ */ jsx7("span", { children: field }),
-                    (fieldIdx === rowFields.length - 1 || rowFields.length === 0) && /* @__PURE__ */ jsx7("span", { className: `vpg-sort-indicator ${sortTarget === "row" ? "active" : ""}`, children: sortTarget === "row" ? sortDirection === "asc" ? "\u2191" : "\u2193" : "\u21C5" })
+                  children: /* @__PURE__ */ jsxs8("div", { className: "vpg-header-content", children: [
+                    /* @__PURE__ */ jsx8("span", { children: field }),
+                    (fieldIdx === rowFields.length - 1 || rowFields.length === 0) && /* @__PURE__ */ jsx8("span", { className: `vpg-sort-indicator ${sortTarget === "row" ? "active" : ""}`, children: sortTarget === "row" ? sortDirection === "asc" ? "\u2191" : "\u2193" : "\u21C5" })
                   ] })
                 },
                 `row-header-${fieldIdx}`
               )),
-              headerRow.map((cell, idx) => /* @__PURE__ */ jsx7(
+              headerRow.map((cell, idx) => /* @__PURE__ */ jsx8(
                 "th",
                 {
                   className: "vpg-column-header-cell",
                   colSpan: cell.colspan,
                   onClick: () => levelIdx === columnHeaderCells.length - 1 && toggleSort(idx),
-                  children: /* @__PURE__ */ jsxs7("div", { className: "vpg-header-content", children: [
-                    /* @__PURE__ */ jsx7("span", { children: cell.label }),
-                    levelIdx === columnHeaderCells.length - 1 && /* @__PURE__ */ jsx7("span", { className: `vpg-sort-indicator ${sortTarget === idx ? "active" : ""}`, children: sortTarget === idx ? sortDirection === "asc" ? "\u2191" : "\u2193" : "\u21C5" })
+                  children: /* @__PURE__ */ jsxs8("div", { className: "vpg-header-content", children: [
+                    /* @__PURE__ */ jsx8("span", { children: cell.label }),
+                    levelIdx === columnHeaderCells.length - 1 && /* @__PURE__ */ jsx8("span", { className: `vpg-sort-indicator ${sortTarget === idx ? "active" : ""}`, children: sortTarget === idx ? sortDirection === "asc" ? "\u2191" : "\u2193" : "\u21C5" })
                   ] })
                 },
                 idx
               )),
-              pivotResult.rowTotals.length > 0 && levelIdx === 0 && /* @__PURE__ */ jsx7("th", { className: "vpg-total-header", rowSpan: columnHeaderCells.length, children: "Total" })
+              pivotResult.rowTotals.length > 0 && levelIdx === 0 && /* @__PURE__ */ jsx8("th", { className: "vpg-total-header", rowSpan: columnHeaderCells.length, children: "Total" })
             ] }, `header-${levelIdx}`)) }),
-            /* @__PURE__ */ jsxs7("tbody", { children: [
-              sortedRowIndices.map((sortedIdx) => /* @__PURE__ */ jsxs7("tr", { className: "vpg-data-row", children: [
-                pivotResult.rowHeaders[sortedIdx].map((val, idx) => /* @__PURE__ */ jsx7(
+            /* @__PURE__ */ jsxs8("tbody", { children: [
+              sortedRowIndices.map((sortedIdx) => /* @__PURE__ */ jsxs8("tr", { className: "vpg-data-row", children: [
+                pivotResult.rowHeaders[sortedIdx].map((val, idx) => /* @__PURE__ */ jsx8(
                   "th",
                   {
                     className: "vpg-row-header-cell",
@@ -4659,7 +4918,7 @@ function PivotSkeleton({
                 )),
                 pivotResult.data[sortedIdx].map((cell, colIdx) => {
                   const displayRowIdx = sortedRowIndices.indexOf(sortedIdx);
-                  return /* @__PURE__ */ jsx7(
+                  return /* @__PURE__ */ jsx8(
                     "td",
                     {
                       className: `vpg-data-cell ${isCellSelected(displayRowIdx, colIdx) ? "selected" : ""} ${cell.value === null ? "vpg-is-null" : ""}`,
@@ -4670,10 +4929,10 @@ function PivotSkeleton({
                     colIdx
                   );
                 }),
-                pivotResult.rowTotals[sortedIdx] && /* @__PURE__ */ jsx7("td", { className: "vpg-data-cell vpg-total-cell", children: pivotResult.rowTotals[sortedIdx].formattedValue })
+                pivotResult.rowTotals[sortedIdx] && /* @__PURE__ */ jsx8("td", { className: "vpg-data-cell vpg-total-cell", children: pivotResult.rowTotals[sortedIdx].formattedValue })
               ] }, sortedIdx)),
-              pivotResult.columnTotals.length > 0 && /* @__PURE__ */ jsxs7("tr", { className: "vpg-totals-row", children: [
-                /* @__PURE__ */ jsx7(
+              pivotResult.columnTotals.length > 0 && /* @__PURE__ */ jsxs8("tr", { className: "vpg-totals-row", children: [
+                /* @__PURE__ */ jsx8(
                   "th",
                   {
                     className: "vpg-row-header-cell vpg-total-label",
@@ -4682,13 +4941,13 @@ function PivotSkeleton({
                     children: "Total"
                   }
                 ),
-                pivotResult.columnTotals.map((cell, colIdx) => /* @__PURE__ */ jsx7("td", { className: "vpg-data-cell vpg-total-cell", children: cell.formattedValue }, colIdx)),
-                pivotResult.rowTotals.length > 0 && /* @__PURE__ */ jsx7("td", { className: "vpg-data-cell vpg-grand-total-cell", children: pivotResult.grandTotal.formattedValue })
+                pivotResult.columnTotals.map((cell, colIdx) => /* @__PURE__ */ jsx8("td", { className: "vpg-data-cell vpg-total-cell", children: cell.formattedValue }, colIdx)),
+                pivotResult.rowTotals.length > 0 && /* @__PURE__ */ jsx8("td", { className: "vpg-data-cell vpg-grand-total-cell", children: pivotResult.grandTotal.formattedValue })
               ] })
             ] })
           ] }) }),
-          isConfigured && pivotResult && /* @__PURE__ */ jsxs7("div", { className: "vpg-skeleton-footer", children: [
-            /* @__PURE__ */ jsxs7("span", { className: "vpg-footer-info", children: [
+          isConfigured && pivotResult && /* @__PURE__ */ jsxs8("div", { className: "vpg-skeleton-footer", children: [
+            /* @__PURE__ */ jsxs8("span", { className: "vpg-footer-info", children: [
               pivotResult.rowHeaders.length,
               " ",
               "rows \xD7",
@@ -4696,30 +4955,30 @@ function PivotSkeleton({
               " ",
               "columns"
             ] }),
-            selectionStats && selectionStats.count > 1 && /* @__PURE__ */ jsxs7("div", { className: "vpg-selection-stats", children: [
-              /* @__PURE__ */ jsxs7("span", { className: "vpg-stat", children: [
-                /* @__PURE__ */ jsx7("span", { className: "vpg-stat-label", children: "Count:" }),
-                /* @__PURE__ */ jsx7("span", { className: "vpg-stat-value", children: selectionStats.count })
+            selectionStats && selectionStats.count > 1 && /* @__PURE__ */ jsxs8("div", { className: "vpg-selection-stats", children: [
+              /* @__PURE__ */ jsxs8("span", { className: "vpg-stat", children: [
+                /* @__PURE__ */ jsx8("span", { className: "vpg-stat-label", children: "Count:" }),
+                /* @__PURE__ */ jsx8("span", { className: "vpg-stat-value", children: selectionStats.count })
               ] }),
-              selectionStats.numericCount > 0 && /* @__PURE__ */ jsxs7(Fragment5, { children: [
-                /* @__PURE__ */ jsx7("span", { className: "vpg-stat-divider", children: "|" }),
-                /* @__PURE__ */ jsxs7("span", { className: "vpg-stat", children: [
-                  /* @__PURE__ */ jsx7("span", { className: "vpg-stat-label", children: "Sum:" }),
-                  /* @__PURE__ */ jsx7("span", { className: "vpg-stat-value", children: formatStatValue(selectionStats.sum) })
+              selectionStats.numericCount > 0 && /* @__PURE__ */ jsxs8(Fragment5, { children: [
+                /* @__PURE__ */ jsx8("span", { className: "vpg-stat-divider", children: "|" }),
+                /* @__PURE__ */ jsxs8("span", { className: "vpg-stat", children: [
+                  /* @__PURE__ */ jsx8("span", { className: "vpg-stat-label", children: "Sum:" }),
+                  /* @__PURE__ */ jsx8("span", { className: "vpg-stat-value", children: formatStatValue(selectionStats.sum) })
                 ] }),
-                /* @__PURE__ */ jsx7("span", { className: "vpg-stat-divider", children: "|" }),
-                /* @__PURE__ */ jsxs7("span", { className: "vpg-stat", children: [
-                  /* @__PURE__ */ jsx7("span", { className: "vpg-stat-label", children: "Avg:" }),
-                  /* @__PURE__ */ jsx7("span", { className: "vpg-stat-value", children: formatStatValue(selectionStats.avg) })
+                /* @__PURE__ */ jsx8("span", { className: "vpg-stat-divider", children: "|" }),
+                /* @__PURE__ */ jsxs8("span", { className: "vpg-stat", children: [
+                  /* @__PURE__ */ jsx8("span", { className: "vpg-stat-label", children: "Avg:" }),
+                  /* @__PURE__ */ jsx8("span", { className: "vpg-stat-value", children: formatStatValue(selectionStats.avg) })
                 ] })
               ] })
             ] })
           ] })
         ] }),
-        showWatermark && canUsePivot && /* @__PURE__ */ jsx7("div", { className: `vpg-watermark ${isDemo ? "vpg-demo-mode" : ""}`, children: isDemo ? /* @__PURE__ */ jsxs7(Fragment5, { children: [
-          /* @__PURE__ */ jsx7("span", { className: "vpg-demo-badge", children: "DEMO" }),
-          /* @__PURE__ */ jsx7("span", { children: "Pro features unlocked for evaluation" }),
-          /* @__PURE__ */ jsx7(
+        showWatermark && canUsePivot && /* @__PURE__ */ jsx8("div", { className: `vpg-watermark ${isDemo ? "vpg-demo-mode" : ""}`, children: isDemo ? /* @__PURE__ */ jsxs8(Fragment5, { children: [
+          /* @__PURE__ */ jsx8("span", { className: "vpg-demo-badge", children: "DEMO" }),
+          /* @__PURE__ */ jsx8("span", { children: "Pro features unlocked for evaluation" }),
+          /* @__PURE__ */ jsx8(
             "a",
             {
               href: "https://tiny-pivot.com/#pricing",
@@ -4729,14 +4988,14 @@ function PivotSkeleton({
               children: "Get Pro License \u2192"
             }
           )
-        ] }) : /* @__PURE__ */ jsx7("a", { href: "https://tiny-pivot.com", target: "_blank", rel: "noopener noreferrer", children: "Powered by TinyPivot" }) })
+        ] }) : /* @__PURE__ */ jsx8("a", { href: "https://tiny-pivot.com", target: "_blank", rel: "noopener noreferrer", children: "Powered by TinyPivot" }) })
       ]
     }
   );
 }
 // src/components/DataGrid.tsx
-import { Fragment as Fragment6, jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
 var MIN_COL_WIDTH = 120;
 var MAX_COL_WIDTH = 350;
 function DataGrid({
@@ -4757,6 +5016,8 @@ function DataGrid({
   initialHeight = 600,
   minHeight = 300,
   maxHeight = 1200,
+  numberFormat = "us",
+  dateFormat = "iso",
   aiAnalyst,
   onCellClick,
   onExport,
@@ -4768,43 +5029,43 @@ function DataGrid({
 }) {
   const { showWatermark, canUsePivot, canUseCharts, canUseAIAnalyst, isDemo, isPro } = useLicense();
   const showAIAnalyst = aiAnalyst?.enabled && canUseAIAnalyst;
-  const currentTheme = useMemo13(() => {
+  const currentTheme = useMemo14(() => {
     if (theme === "auto") {
       return window.matchMedia?.("(prefers-color-scheme: dark)").matches ? "dark" : "light";
     }
     return theme;
   }, [theme]);
-  const [currentFontSize, setCurrentFontSize] = useState13(initialFontSize);
-  const [globalSearchTerm, setGlobalSearchTerm] = useState13("");
-  const [showSearchInput, setShowSearchInput] = useState13(false);
-  const [currentPage, setCurrentPage] = useState13(1);
-  const [columnWidths, setColumnWidths] = useState13({});
-  const [resizingColumnId, setResizingColumnId] = useState13(null);
-  const [resizeStartX, setResizeStartX] = useState13(0);
-  const [resizeStartWidth, setResizeStartWidth] = useState13(0);
-  const [gridHeight, setGridHeight] = useState13(initialHeight);
-  const [isResizingVertically, setIsResizingVertically] = useState13(false);
-  const [verticalResizeStartY, setVerticalResizeStartY] = useState13(0);
-  const [verticalResizeStartHeight, setVerticalResizeStartHeight] = useState13(0);
-  const [showCopyToast, setShowCopyToast] = useState13(false);
-  const [copyToastMessage, setCopyToastMessage] = useState13("");
-  const [viewMode, setViewMode] = useState13("grid");
+  const [currentFontSize, setCurrentFontSize] = useState14(initialFontSize);
+  const [globalSearchTerm, setGlobalSearchTerm] = useState14("");
+  const [showSearchInput, setShowSearchInput] = useState14(false);
+  const [currentPage, setCurrentPage] = useState14(1);
+  const [columnWidths, setColumnWidths] = useState14({});
+  const [resizingColumnId, setResizingColumnId] = useState14(null);
+  const [resizeStartX, setResizeStartX] = useState14(0);
+  const [resizeStartWidth, setResizeStartWidth] = useState14(0);
+  const [gridHeight, setGridHeight] = useState14(initialHeight);
+  const [isResizingVertically, setIsResizingVertically] = useState14(false);
+  const [verticalResizeStartY, setVerticalResizeStartY] = useState14(0);
+  const [verticalResizeStartHeight, setVerticalResizeStartHeight] = useState14(0);
+  const [showCopyToast, setShowCopyToast] = useState14(false);
+  const [copyToastMessage, setCopyToastMessage] = useState14("");
+  const [viewMode, setViewMode] = useState14("grid");
   const aiAnalystRef = useRef4(null);
-  const [aiLoadedData, setAiLoadedData] = useState13(null);
-  const [isLoadingFullData, setIsLoadingFullData] = useState13(false);
-  const displayData = useMemo13(() => aiLoadedData || data, [aiLoadedData, data]);
-  const [_chartConfig, setChartConfig] = useState13(null);
-  const handleChartConfigChange = useCallback13((config) => {
+  const [aiLoadedData, setAiLoadedData] = useState14(null);
+  const [isLoadingFullData, setIsLoadingFullData] = useState14(false);
+  const displayData = useMemo14(() => aiLoadedData || data, [aiLoadedData, data]);
+  const [_chartConfig, setChartConfig] = useState14(null);
+  const handleChartConfigChange = useCallback14((config) => {
     setChartConfig(config);
   }, []);
-  const [showPivotConfig, setShowPivotConfig] = useState13(true);
-  const [draggingField, setDraggingField] = useState13(null);
-  const [activeFilterColumn, setActiveFilterColumn] = useState13(null);
-  const [filterDropdownPosition, setFilterDropdownPosition] = useState13({ top: 0, left: 0, maxHeight: 400 });
-  const [selectedCell, setSelectedCell] = useState13(null);
-  const [selectionStart, setSelectionStart] = useState13(null);
-  const [selectionEnd, setSelectionEnd] = useState13(null);
-  const [isSelecting, setIsSelecting] = useState13(false);
+  const [showPivotConfig, setShowPivotConfig] = useState14(true);
+  const [draggingField, setDraggingField] = useState14(null);
+  const [activeFilterColumn, setActiveFilterColumn] = useState14(null);
+  const [filterDropdownPosition, setFilterDropdownPosition] = useState14({ top: 0, left: 0, maxHeight: 400 });
+  const [selectedCell, setSelectedCell] = useState14(null);
+  const [selectionStart, setSelectionStart] = useState14(null);
+  const [selectionEnd, setSelectionEnd] = useState14(null);
+  const [isSelecting, setIsSelecting] = useState14(false);
   const tableContainerRef = useRef4(null);
   const tableBodyRef = useRef4(null);
   const fontSizeOptions = [
@@ -4828,9 +5089,12 @@ function DataGrid({
     activeFilters,
     // Numeric range filters
     setNumericRangeFilter,
-    getNumericRangeFilter
+    getNumericRangeFilter,
+    // Date range filters
+    setDateRangeFilter,
+    getDateRangeFilter
   } = useExcelGrid({ data: displayData, enableSorting: true, enableFiltering: true });
-  const filteredDataForPivot = useMemo13(() => {
+  const filteredDataForPivot = useMemo14(() => {
     const filteredRows = table.getFilteredRowModel().rows;
     return filteredRows.map((row) => row.original);
   }, [table, columnFilters]);
@@ -4860,7 +5124,7 @@ function DataGrid({
     addCalculatedField,
     removeCalculatedField
   } = usePivotTable(filteredDataForPivot);
-  const activeFilterInfo = useMemo13(() => {
+  const activeFilterInfo = useMemo14(() => {
     if (activeFilters.length === 0)
       return null;
     return activeFilters.map((f) => {
@@ -4877,6 +5141,19 @@ function DataGrid({
           isRange: true
         };
       }
+      if (f.type === "dateRange" && f.dateRange) {
+        const parts = [];
+        if (f.dateRange.min !== null)
+          parts.push(`from ${coreFormatDate(f.dateRange.min, dateFormat)}`);
+        if (f.dateRange.max !== null)
+          parts.push(`to ${coreFormatDate(f.dateRange.max, dateFormat)}`);
+        return {
+          column: f.column,
+          valueCount: 1,
+          displayText: parts.join(" "),
+          isRange: true
+        };
+      }
       return {
         column: f.column,
         valueCount: f.values?.length || 0,
@@ -4884,9 +5161,9 @@ function DataGrid({
         isRange: false
       };
     });
-  }, [activeFilters]);
-  const rows = useMemo13(() => table.getFilteredRowModel().rows, [table, columnFilters]);
-  const searchFilteredData = useMemo13(() => {
+  }, [activeFilters, dateFormat]);
+  const rows = useMemo14(() => table.getFilteredRowModel().rows, [table, columnFilters]);
+  const searchFilteredData = useMemo14(() => {
     if (!globalSearchTerm.trim() || !enableSearch) {
       return rows;
     }
@@ -4904,22 +5181,22 @@ function DataGrid({
     });
   }, [rows, globalSearchTerm, enableSearch, columnKeys]);
   const totalSearchedRows = searchFilteredData.length;
-  const totalPages = useMemo13(() => {
+  const totalPages = useMemo14(() => {
     if (!enablePagination)
       return 1;
     return Math.max(1, Math.ceil(totalSearchedRows / pageSize));
   }, [enablePagination, totalSearchedRows, pageSize]);
-  const paginatedRows = useMemo13(() => {
+  const paginatedRows = useMemo14(() => {
     if (!enablePagination)
       return searchFilteredData;
     const start = (currentPage - 1) * pageSize;
     const end = start + pageSize;
     return searchFilteredData.slice(start, end);
   }, [enablePagination, searchFilteredData, currentPage, pageSize]);
-  useEffect10(() => {
+  useEffect11(() => {
     setCurrentPage(1);
   }, [columnFilters, globalSearchTerm]);
-  const selectionBounds = useMemo13(() => {
+  const selectionBounds = useMemo14(() => {
     if (!selectionStart || !selectionEnd)
       return null;
     return {
@@ -4929,7 +5206,7 @@ function DataGrid({
       maxCol: Math.max(selectionStart.col, selectionEnd.col)
     };
   }, [selectionStart, selectionEnd]);
-  const selectionStats = useMemo13(() => {
+  const selectionStats = useMemo14(() => {
     if (!selectionBounds)
       return null;
     const { minRow, maxRow, minCol, maxCol } = selectionBounds;
@@ -4959,7 +5236,7 @@ function DataGrid({
     const avg = sum / values.length;
     return { count, sum, avg, numericCount: values.length };
   }, [selectionBounds, rows, columnKeys]);
-  useEffect10(() => {
+  useEffect11(() => {
     if (typeof document === "undefined")
       return;
     if (displayData.length === 0)
@@ -4983,7 +5260,7 @@ function DataGrid({
     }
     setColumnWidths(widths);
   }, [displayData, columnKeys]);
-  const startColumnResize = useCallback13(
+  const startColumnResize = useCallback14(
     (columnId, event) => {
       if (!enableColumnResize)
         return;
@@ -4995,7 +5272,7 @@ function DataGrid({
     },
     [enableColumnResize, columnWidths]
   );
-  useEffect10(() => {
+  useEffect11(() => {
     if (!resizingColumnId)
       return;
     const handleResizeMove = (event) => {
@@ -5016,7 +5293,7 @@ function DataGrid({
       document.removeEventListener("mouseup", handleResizeEnd);
     };
   }, [resizingColumnId, resizeStartX, resizeStartWidth]);
-  const startVerticalResize = useCallback13(
+  const startVerticalResize = useCallback14(
     (event) => {
       if (!enableVerticalResize)
         return;
@@ -5027,7 +5304,7 @@ function DataGrid({
     },
     [enableVerticalResize, gridHeight]
   );
-  useEffect10(() => {
+  useEffect11(() => {
     if (!isResizingVertically)
       return;
     const handleVerticalResizeMove = (event) => {
@@ -5045,7 +5322,7 @@ function DataGrid({
       document.removeEventListener("mouseup", handleVerticalResizeEnd);
     };
   }, [isResizingVertically, verticalResizeStartY, verticalResizeStartHeight, minHeight, maxHeight]);
-  const handleExport = useCallback13(() => {
+  const handleExport = useCallback14(() => {
     if (viewMode === "pivot") {
       if (!pivotResult)
         return;
@@ -5091,7 +5368,7 @@ function DataGrid({
     columnKeys,
     onExport
   ]);
-  const copySelectionToClipboard = useCallback13(() => {
+  const copySelectionToClipboard = useCallback14(() => {
     if (!selectionBounds || !enableClipboard)
       return;
     const text = formatSelectionForClipboard(
@@ -5116,7 +5393,7 @@ function DataGrid({
       }
     );
   }, [selectionBounds, enableClipboard, rows, columnKeys, onCopy]);
-  const handleMouseDown = useCallback13(
+  const handleMouseDown = useCallback14(
     (rowIndex, colIndex, event) => {
       event.preventDefault();
       if (event.shiftKey && selectedCell) {
@@ -5140,7 +5417,7 @@ function DataGrid({
     },
     [selectedCell, rows, columnKeys, onCellClick]
   );
-  const handleMouseEnter = useCallback13(
+  const handleMouseEnter = useCallback14(
     (rowIndex, colIndex) => {
       if (isSelecting) {
         setSelectionEnd({ row: rowIndex, col: colIndex });
@@ -5149,7 +5426,7 @@ function DataGrid({
     [isSelecting]
   );
   const isShowingAIData = aiLoadedData !== null;
-  const resetToFullData = useCallback13(async () => {
+  const resetToFullData = useCallback14(async () => {
     if (aiAnalystRef.current?.selectedDataSource) {
       setIsLoadingFullData(true);
       try {
@@ -5170,37 +5447,37 @@ function DataGrid({
     }
     clearAllFilters();
   }, [clearAllFilters]);
-  const handleAIDataLoaded = useCallback13(
+  const handleAIDataLoaded = useCallback14(
     (payload) => {
       setAiLoadedData(payload.data);
       onAIDataLoaded?.(payload);
     },
     [onAIDataLoaded]
   );
-  const handleAIConversationUpdate = useCallback13(
+  const handleAIConversationUpdate = useCallback14(
     (payload) => {
       onAIConversationUpdate?.(payload);
     },
     [onAIConversationUpdate]
   );
-  const handleAIQueryExecuted = useCallback13(
+  const handleAIQueryExecuted = useCallback14(
     (payload) => {
       onAIQueryExecuted?.(payload);
     },
     [onAIQueryExecuted]
   );
-  const handleAIError = useCallback13(
+  const handleAIError = useCallback14(
     (payload) => {
       onAIError?.(payload);
     },
     [onAIError]
   );
-  useEffect10(() => {
+  useEffect11(() => {
     const handleMouseUp = () => setIsSelecting(false);
     document.addEventListener("mouseup", handleMouseUp);
     return () => document.removeEventListener("mouseup", handleMouseUp);
   }, []);
-  useEffect10(() => {
+  useEffect11(() => {
     const handleKeydown = (event) => {
       if ((event.ctrlKey || event.metaKey) && event.key === "c" && selectionBounds) {
         event.preventDefault();
@@ -5218,7 +5495,7 @@ function DataGrid({
     document.addEventListener("keydown", handleKeydown);
     return () => document.removeEventListener("keydown", handleKeydown);
   }, [selectionBounds, copySelectionToClipboard]);
-  const openFilterDropdown = useCallback13(
+  const openFilterDropdown = useCallback14(
     (columnId, event) => {
       event.stopPropagation();
       const target = event.currentTarget;
@@ -5247,22 +5524,28 @@ function DataGrid({
     },
     []
   );
-  const closeFilterDropdown = useCallback13(() => {
+  const closeFilterDropdown = useCallback14(() => {
     setActiveFilterColumn(null);
   }, []);
-  const handleFilter = useCallback13(
+  const handleFilter = useCallback14(
     (columnId, values) => {
       setColumnFilter(columnId, values);
     },
     [setColumnFilter]
   );
-  const handleRangeFilter = useCallback13(
+  const handleRangeFilter = useCallback14(
     (columnId, range) => {
       setNumericRangeFilter(columnId, range);
     },
     [setNumericRangeFilter]
   );
-  const handleSort = useCallback13(
+  const handleDateRangeFilter = useCallback14(
+    (columnId, range) => {
+      setDateRangeFilter(columnId, range);
+    },
+    [setDateRangeFilter]
+  );
+  const handleSort = useCallback14(
     (columnId, direction) => {
       if (direction === null) {
         const current = getSortDirection(columnId);
@@ -5286,7 +5569,7 @@ function DataGrid({
     },
     [getSortDirection, toggleSort]
   );
-  const isCellSelected = useCallback13(
+  const isCellSelected = useCallback14(
     (rowIndex, colIndex) => {
       if (!selectionBounds) {
         return selectedCell?.row === rowIndex && selectedCell?.col === colIndex;
@@ -5299,10 +5582,7 @@ function DataGrid({
   const formatStatValue = (value) => {
     if (value === null)
       return "-";
-    if (Math.abs(value) >= 1e3) {
-      return value.toLocaleString("en-US", { maximumFractionDigits: 2 });
-    }
-    return value.toLocaleString("en-US", { maximumFractionDigits: 4 });
+    return coreFormatNumber(value, numberFormat);
   };
   const noFormatPatterns = /^(?:.*_)?(?:id|code|year|month|quarter|day|week|date|zip|phone|fax|ssn|ein|npi|ndc|gpi|hcpcs|icd|cpt|rx|bin|pcn|group|member|claim|rx_number|script|fill)(?:_.*)?$/i;
   const shouldFormatNumber = (columnId) => {
@@ -5314,68 +5594,71 @@ function DataGrid({
     if (value === "")
       return "";
     const stats = getColumnStats(columnId);
+    if (stats.type === "date") {
+      return coreFormatDate(value, dateFormat);
+    }
     if (stats.type === "number") {
       const num = typeof value === "number" ? value : Number.parseFloat(String(value));
       if (Number.isNaN(num))
         return String(value);
       if (shouldFormatNumber(columnId) && Math.abs(num) >= 1e3) {
-        return num.toLocaleString("en-US", { maximumFractionDigits: 2 });
+        return coreFormatNumber(num, numberFormat);
       }
       if (Number.isInteger(num)) {
         return String(num);
       }
-      return num.toLocaleString("en-US", { maximumFractionDigits: 4, useGrouping: false });
+      return coreFormatNumber(num, numberFormat, { maximumFractionDigits: 4 });
     }
     return String(value);
   };
-  const totalTableWidth = useMemo13(() => {
+  const totalTableWidth = useMemo14(() => {
     return columnKeys.reduce((sum, key) => sum + (columnWidths[key] || MIN_COL_WIDTH), 0);
   }, [columnKeys, columnWidths]);
   const activeFilterCount = columnFilters.length;
-  return /* @__PURE__ */ jsxs8(
+  return /* @__PURE__ */ jsxs9(
     "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__ */ jsxs8("div", { className: "vpg-toast", children: [
-          /* @__PURE__ */ jsx8("svg", { className: "vpg-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx8("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) }),
+        showCopyToast && /* @__PURE__ */ jsxs9("div", { className: "vpg-toast", children: [
+          /* @__PURE__ */ jsx9("svg", { className: "vpg-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx9("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) }),
           copyToastMessage
         ] }),
-        /* @__PURE__ */ jsxs8("div", { className: "vpg-toolbar", children: [
-          /* @__PURE__ */ jsxs8("div", { className: "vpg-toolbar-left", children: [
-            showPivot && /* @__PURE__ */ jsxs8("div", { className: "vpg-view-toggle", children: [
-              showAIAnalyst && /* @__PURE__ */ jsxs8(
+        /* @__PURE__ */ jsxs9("div", { className: "vpg-toolbar", children: [
+          /* @__PURE__ */ jsxs9("div", { className: "vpg-toolbar-left", children: [
+            showPivot && /* @__PURE__ */ jsxs9("div", { className: "vpg-view-toggle", children: [
+              showAIAnalyst && /* @__PURE__ */ jsxs9(
                 "button",
                 {
                   className: `vpg-view-btn vpg-ai-btn ${viewMode === "ai" ? "active" : ""}`,
                   onClick: () => setViewMode("ai"),
                   children: [
-                    /* @__PURE__ */ jsx8("svg", { className: "vpg-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx8("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 2a2 2 0 0 1 2 2c0 .74-.4 1.39-1 1.73V7h1a7 7 0 0 1 7 7h1a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1h-1v1a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-1H2a1 1 0 0 1-1-1v-3a1 1 0 0 1 1-1h1a7 7 0 0 1 7-7h1V5.73c-.6-.34-1-.99-1-1.73a2 2 0 0 1 2-2z" }) }),
+                    /* @__PURE__ */ jsx9("svg", { className: "vpg-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx9("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 2a2 2 0 0 1 2 2c0 .74-.4 1.39-1 1.73V7h1a7 7 0 0 1 7 7h1a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1h-1v1a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-1H2a1 1 0 0 1-1-1v-3a1 1 0 0 1 1-1h1a7 7 0 0 1 7-7h1V5.73c-.6-.34-1-.99-1-1.73a2 2 0 0 1 2-2z" }) }),
                     "AI Analyst"
                   ]
                 }
               ),
-              aiAnalyst?.enabled && !canUseAIAnalyst && /* @__PURE__ */ jsxs8(
+              aiAnalyst?.enabled && !canUseAIAnalyst && /* @__PURE__ */ jsxs9(
                 "button",
                 {
                   className: "vpg-view-btn vpg-ai-btn vpg-pro-feature",
                   title: "AI Analyst (Pro feature)",
                   onClick: (e) => e.preventDefault(),
                   children: [
-                    /* @__PURE__ */ jsx8("svg", { className: "vpg-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx8("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 2a2 2 0 0 1 2 2c0 .74-.4 1.39-1 1.73V7h1a7 7 0 0 1 7 7h1a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1h-1v1a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-1H2a1 1 0 0 1-1-1v-3a1 1 0 0 1 1-1h1a7 7 0 0 1 7-7h1V5.73c-.6-.34-1-.99-1-1.73a2 2 0 0 1 2-2z" }) }),
+                    /* @__PURE__ */ jsx9("svg", { className: "vpg-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx9("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 2a2 2 0 0 1 2 2c0 .74-.4 1.39-1 1.73V7h1a7 7 0 0 1 7 7h1a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1h-1v1a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-1H2a1 1 0 0 1-1-1v-3a1 1 0 0 1 1-1h1a7 7 0 0 1 7-7h1V5.73c-.6-.34-1-.99-1-1.73a2 2 0 0 1 2-2z" }) }),
                     "AI Analyst",
-                    /* @__PURE__ */ jsx8("span", { className: "vpg-pro-badge", children: "Pro" })
+                    /* @__PURE__ */ jsx9("span", { className: "vpg-pro-badge", children: "Pro" })
                   ]
                 }
               ),
-              /* @__PURE__ */ jsxs8(
+              /* @__PURE__ */ jsxs9(
                 "button",
                 {
                   className: `vpg-view-btn ${viewMode === "grid" ? "active" : ""}`,
                   onClick: () => setViewMode("grid"),
                   children: [
-                    /* @__PURE__ */ jsx8("svg", { className: "vpg-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx8(
+                    /* @__PURE__ */ jsx9("svg", { className: "vpg-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx9(
                       "path",
                       {
                         strokeLinecap: "round",
@@ -5388,13 +5671,13 @@ function DataGrid({
                   ]
                 }
               ),
-              /* @__PURE__ */ jsxs8(
+              /* @__PURE__ */ jsxs9(
                 "button",
                 {
                   className: `vpg-view-btn vpg-pivot-btn ${viewMode === "pivot" ? "active" : ""}`,
                   onClick: () => setViewMode("pivot"),
                   children: [
-                    /* @__PURE__ */ jsx8("svg", { className: "vpg-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx8(
+                    /* @__PURE__ */ jsx9("svg", { className: "vpg-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx9(
                       "path",
                       {
                         strokeLinecap: "round",
@@ -5407,14 +5690,14 @@ function DataGrid({
                   ]
                 }
               ),
-              /* @__PURE__ */ jsxs8(
+              /* @__PURE__ */ jsxs9(
                 "button",
                 {
                   className: `vpg-view-btn vpg-chart-btn ${viewMode === "chart" ? "active" : ""} ${!canUseCharts ? "vpg-pro-feature" : ""}`,
                   title: canUseCharts ? "Chart Builder" : "Chart Builder (Pro feature)",
                   onClick: () => canUseCharts && setViewMode("chart"),
                   children: [
-                    /* @__PURE__ */ jsx8("svg", { className: "vpg-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx8(
+                    /* @__PURE__ */ jsx9("svg", { className: "vpg-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx9(
                       "path",
                       {
                         strokeLinecap: "round",
@@ -5424,19 +5707,19 @@ function DataGrid({
                       }
                     ) }),
                     "Chart",
-                    !canUseCharts && /* @__PURE__ */ jsx8("span", { className: "vpg-pro-badge", children: "Pro" })
+                    !canUseCharts && /* @__PURE__ */ jsx9("span", { className: "vpg-pro-badge", children: "Pro" })
                   ]
                 }
               )
             ] }),
-            viewMode === "grid" && /* @__PURE__ */ jsxs8(Fragment6, { children: [
-              enableSearch && /* @__PURE__ */ jsx8("div", { className: "vpg-search-container", children: !showSearchInput ? /* @__PURE__ */ jsx8(
+            viewMode === "grid" && /* @__PURE__ */ jsxs9(Fragment6, { children: [
+              enableSearch && /* @__PURE__ */ jsx9("div", { className: "vpg-search-container", children: !showSearchInput ? /* @__PURE__ */ jsx9(
                 "button",
                 {
                   className: "vpg-icon-btn",
                   title: "Search (Ctrl+F)",
                   onClick: () => setShowSearchInput(true),
-                  children: /* @__PURE__ */ jsx8("svg", { className: "vpg-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx8(
+                  children: /* @__PURE__ */ jsx9("svg", { className: "vpg-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx9(
                     "path",
                     {
                       strokeLinecap: "round",
@@ -5446,15 +5729,15 @@ function DataGrid({
                     }
                   ) })
                 }
-              ) : /* @__PURE__ */ jsxs8("div", { className: "vpg-search-box", children: [
-                /* @__PURE__ */ jsx8(
+              ) : /* @__PURE__ */ jsxs9("div", { className: "vpg-search-box", children: [
+                /* @__PURE__ */ jsx9(
                   "svg",
                   {
                     className: "vpg-search-icon",
                     fill: "none",
                     stroke: "currentColor",
                     viewBox: "0 0 24 24",
-                    children: /* @__PURE__ */ jsx8(
+                    children: /* @__PURE__ */ jsx9(
                       "path",
                       {
                         strokeLinecap: "round",
@@ -5465,7 +5748,7 @@ function DataGrid({
                     )
                   }
                 ),
-                /* @__PURE__ */ jsx8(
+                /* @__PURE__ */ jsx9(
                   "input",
                   {
                     type: "text",
@@ -5482,14 +5765,14 @@ function DataGrid({
                     autoFocus: true
                   }
                 ),
-                globalSearchTerm && /* @__PURE__ */ jsx8("button", { className: "vpg-search-clear", onClick: () => setGlobalSearchTerm(""), children: /* @__PURE__ */ jsx8(
+                globalSearchTerm && /* @__PURE__ */ jsx9("button", { className: "vpg-search-clear", onClick: () => setGlobalSearchTerm(""), children: /* @__PURE__ */ jsx9(
                   "svg",
                   {
                     className: "vpg-icon-xs",
                     fill: "none",
                     stroke: "currentColor",
                     viewBox: "0 0 24 24",
-                    children: /* @__PURE__ */ jsx8(
+                    children: /* @__PURE__ */ jsx9(
                       "path",
                       {
                         strokeLinecap: "round",
@@ -5501,9 +5784,9 @@ function DataGrid({
                   }
                 ) })
               ] }) }),
-              /* @__PURE__ */ jsxs8("div", { className: "vpg-font-size-control", children: [
-                /* @__PURE__ */ jsx8("span", { className: "vpg-label", children: "Size:" }),
-                /* @__PURE__ */ jsx8("div", { className: "vpg-font-size-toggle", children: fontSizeOptions.map((opt) => /* @__PURE__ */ jsx8(
+              /* @__PURE__ */ jsxs9("div", { className: "vpg-font-size-control", children: [
+                /* @__PURE__ */ jsx9("span", { className: "vpg-label", children: "Size:" }),
+                /* @__PURE__ */ jsx9("div", { className: "vpg-font-size-toggle", children: fontSizeOptions.map((opt) => /* @__PURE__ */ jsx9(
                   "button",
                   {
                     className: `vpg-font-size-btn ${currentFontSize === opt.value ? "active" : ""}`,
@@ -5513,8 +5796,8 @@ function DataGrid({
                   opt.value
                 )) })
               ] }),
-              activeFilterCount > 0 && /* @__PURE__ */ jsxs8("div", { className: "vpg-filter-info", children: [
-                /* @__PURE__ */ jsx8("svg", { className: "vpg-icon", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx8(
+              activeFilterCount > 0 && /* @__PURE__ */ jsxs9("div", { className: "vpg-filter-info", children: [
+                /* @__PURE__ */ jsx9("svg", { className: "vpg-icon", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx9(
                   "path",
                   {
                     fillRule: "evenodd",
@@ -5522,28 +5805,28 @@ function DataGrid({
                     clipRule: "evenodd"
                   }
                 ) }),
-                /* @__PURE__ */ jsxs8("span", { children: [
+                /* @__PURE__ */ jsxs9("span", { children: [
                   activeFilterCount,
                   " ",
                   "filter",
                   activeFilterCount > 1 ? "s" : ""
                 ] })
               ] }),
-              globalSearchTerm && /* @__PURE__ */ jsx8("div", { className: "vpg-search-info", children: /* @__PURE__ */ jsxs8("span", { children: [
+              globalSearchTerm && /* @__PURE__ */ jsx9("div", { className: "vpg-search-info", children: /* @__PURE__ */ jsxs9("span", { children: [
                 totalSearchedRows,
                 " ",
                 "match",
                 totalSearchedRows !== 1 ? "es" : ""
               ] }) })
             ] }),
-            viewMode === "pivot" && canUsePivot && /* @__PURE__ */ jsxs8(Fragment6, { children: [
-              /* @__PURE__ */ jsxs8(
+            viewMode === "pivot" && canUsePivot && /* @__PURE__ */ jsxs9(Fragment6, { children: [
+              /* @__PURE__ */ jsxs9(
                 "button",
                 {
                   className: `vpg-config-toggle ${showPivotConfig ? "active" : ""}`,
                   onClick: () => setShowPivotConfig(!showPivotConfig),
                   children: [
-                    /* @__PURE__ */ jsx8("svg", { className: "vpg-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx8(
+                    /* @__PURE__ */ jsx9("svg", { className: "vpg-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx9(
                       "path",
                       {
                         strokeLinecap: "round",
@@ -5558,8 +5841,8 @@ function DataGrid({
                   ]
                 }
               ),
-              pivotIsConfigured && /* @__PURE__ */ jsxs8("div", { className: "vpg-pivot-status", children: [
-                /* @__PURE__ */ jsx8("svg", { className: "vpg-icon", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx8(
+              pivotIsConfigured && /* @__PURE__ */ jsxs9("div", { className: "vpg-pivot-status", children: [
+                /* @__PURE__ */ jsx9("svg", { className: "vpg-icon", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx9(
                   "path",
                   {
                     fillRule: "evenodd",
@@ -5567,13 +5850,13 @@ function DataGrid({
                     clipRule: "evenodd"
                   }
                 ) }),
-                /* @__PURE__ */ jsx8("span", { children: "Pivot configured" })
+                /* @__PURE__ */ jsx9("span", { children: "Pivot configured" })
               ] })
             ] })
           ] }),
-          /* @__PURE__ */ jsxs8("div", { className: "vpg-toolbar-right", children: [
-            viewMode === "grid" && activeFilterCount > 0 && /* @__PURE__ */ jsxs8("button", { className: "vpg-clear-filters", onClick: clearAllFilters, children: [
-              /* @__PURE__ */ jsx8("svg", { className: "vpg-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx8(
+          /* @__PURE__ */ jsxs9("div", { className: "vpg-toolbar-right", children: [
+            viewMode === "grid" && activeFilterCount > 0 && /* @__PURE__ */ jsxs9("button", { className: "vpg-clear-filters", onClick: clearAllFilters, children: [
+              /* @__PURE__ */ jsx9("svg", { className: "vpg-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx9(
                 "path",
                 {
                   strokeLinecap: "round",
@@ -5584,7 +5867,7 @@ function DataGrid({
               ) }),
               "Clear Filters"
             ] }),
-            viewMode === "grid" && isShowingAIData && /* @__PURE__ */ jsxs8(
+            viewMode === "grid" && isShowingAIData && /* @__PURE__ */ jsxs9(
               "button",
               {
                 className: `vpg-reset-data-btn${isLoadingFullData ? " vpg-loading-btn" : ""}`,
@@ -5592,7 +5875,7 @@ function DataGrid({
                 title: "Reset to full dataset",
                 onClick: resetToFullData,
                 children: [
-                  /* @__PURE__ */ jsx8("svg", { className: `vpg-icon${isLoadingFullData ? " vpg-spin" : ""}`, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx8(
+                  /* @__PURE__ */ jsx9("svg", { className: `vpg-icon${isLoadingFullData ? " vpg-spin" : ""}`, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx9(
                     "path",
                     {
                       strokeLinecap: "round",
@@ -5601,17 +5884,17 @@ function DataGrid({
                       d: "M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
                     }
                   ) }),
-                  /* @__PURE__ */ jsx8("span", { children: isLoadingFullData ? "Loading..." : "Full Data" })
+                  /* @__PURE__ */ jsx9("span", { children: isLoadingFullData ? "Loading..." : "Full Data" })
                 ]
               }
             ),
-            enableClipboard && selectionBounds && viewMode === "grid" && /* @__PURE__ */ jsx8(
+            enableClipboard && selectionBounds && viewMode === "grid" && /* @__PURE__ */ jsx9(
               "button",
               {
                 className: "vpg-icon-btn",
                 title: "Copy selection (Ctrl+C)",
                 onClick: copySelectionToClipboard,
-                children: /* @__PURE__ */ jsx8("svg", { className: "vpg-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx8(
+                children: /* @__PURE__ */ jsx9("svg", { className: "vpg-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx9(
                   "path",
                   {
                     strokeLinecap: "round",
@@ -5622,14 +5905,14 @@ function DataGrid({
                 ) })
               }
             ),
-            enableExport && viewMode === "grid" && /* @__PURE__ */ jsxs8(
+            enableExport && viewMode === "grid" && /* @__PURE__ */ jsxs9(
               "button",
               {
                 className: "vpg-export-btn",
                 title: "Export to CSV",
                 onClick: handleExport,
                 children: [
-                  /* @__PURE__ */ jsx8("svg", { className: "vpg-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx8(
+                  /* @__PURE__ */ jsx9("svg", { className: "vpg-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx9(
                     "path",
                     {
                       strokeLinecap: "round",
@@ -5642,7 +5925,7 @@ function DataGrid({
                 ]
               }
             ),
-            enableExport && viewMode === "pivot" && pivotIsConfigured && /* @__PURE__ */ jsxs8(
+            enableExport && viewMode === "pivot" && pivotIsConfigured && /* @__PURE__ */ jsxs9(
               "button",
               {
                 className: `vpg-export-btn ${!isPro ? "vpg-export-btn-disabled" : ""}`,
@@ -5650,7 +5933,7 @@ function DataGrid({
                 title: isPro ? "Export Pivot to CSV" : "Export Pivot to CSV (Pro feature)",
                 onClick: () => isPro && handleExport(),
                 children: [
-                  /* @__PURE__ */ jsx8("svg", { className: "vpg-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx8(
+                  /* @__PURE__ */ jsx9("svg", { className: "vpg-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx9(
                     "path",
                     {
                       strokeLinecap: "round",
@@ -5666,7 +5949,7 @@ function DataGrid({
             )
           ] })
         ] }),
-        showAIAnalyst && aiAnalyst && /* @__PURE__ */ jsx8("div", { className: "vpg-ai-view", style: { display: viewMode === "ai" ? void 0 : "none" }, children: /* @__PURE__ */ jsx8(
+        showAIAnalyst && aiAnalyst && /* @__PURE__ */ jsx9("div", { className: "vpg-ai-view", style: { display: viewMode === "ai" ? void 0 : "none" }, children: /* @__PURE__ */ jsx9(
           AIAnalyst,
           {
             ref: aiAnalystRef,
@@ -5678,13 +5961,13 @@ function DataGrid({
             onError: handleAIError
           }
         ) }),
-        viewMode === "grid" && /* @__PURE__ */ jsxs8("div", { ref: tableContainerRef, className: "vpg-grid-container", tabIndex: 0, children: [
-          loading && /* @__PURE__ */ jsxs8("div", { className: "vpg-loading", children: [
-            /* @__PURE__ */ jsx8("div", { className: "vpg-spinner" }),
-            /* @__PURE__ */ jsx8("span", { children: "Loading data..." })
+        viewMode === "grid" && /* @__PURE__ */ jsxs9("div", { ref: tableContainerRef, className: "vpg-grid-container", tabIndex: 0, children: [
+          loading && /* @__PURE__ */ jsxs9("div", { className: "vpg-loading", children: [
+            /* @__PURE__ */ jsx9("div", { className: "vpg-spinner" }),
+            /* @__PURE__ */ jsx9("span", { children: "Loading data..." })
           ] }),
-          !loading && displayData.length === 0 && /* @__PURE__ */ jsxs8("div", { className: "vpg-empty", children: [
-            /* @__PURE__ */ jsx8("div", { className: "vpg-empty-icon", children: /* @__PURE__ */ jsx8("svg", { className: "vpg-icon-lg", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx8(
+          !loading && displayData.length === 0 && /* @__PURE__ */ jsxs9("div", { className: "vpg-empty", children: [
+            /* @__PURE__ */ jsx9("div", { className: "vpg-empty-icon", children: /* @__PURE__ */ jsx9("svg", { className: "vpg-icon-lg", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx9(
               "path",
               {
                 strokeLinecap: "round",
@@ -5693,10 +5976,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__ */ jsx8("span", { children: "No data available" })
+            /* @__PURE__ */ jsx9("span", { children: "No data available" })
           ] }),
-          !loading && displayData.length > 0 && filteredRowCount === 0 && /* @__PURE__ */ jsxs8("div", { className: "vpg-empty", children: [
-            /* @__PURE__ */ jsx8("div", { className: "vpg-empty-icon vpg-warning", children: /* @__PURE__ */ jsx8("svg", { className: "vpg-icon-lg", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx8(
+          !loading && displayData.length > 0 && filteredRowCount === 0 && /* @__PURE__ */ jsxs9("div", { className: "vpg-empty", children: [
+            /* @__PURE__ */ jsx9("div", { className: "vpg-empty-icon vpg-warning", children: /* @__PURE__ */ jsx9("svg", { className: "vpg-icon-lg", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx9(
               "path",
               {
                 strokeLinecap: "round",
@@ -5705,11 +5988,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__ */ jsx8("span", { children: "No matching records" }),
-            /* @__PURE__ */ jsx8("button", { className: "vpg-clear-link", onClick: clearAllFilters, children: "Clear all filters" })
+            /* @__PURE__ */ jsx9("span", { children: "No matching records" }),
+            /* @__PURE__ */ jsx9("button", { className: "vpg-clear-link", onClick: clearAllFilters, children: "Clear all filters" })
           ] }),
-          !loading && filteredRowCount > 0 && /* @__PURE__ */ jsx8("div", { className: "vpg-table-wrapper", children: /* @__PURE__ */ jsxs8("table", { className: "vpg-table", style: { minWidth: `${totalTableWidth}px` }, children: [
-            /* @__PURE__ */ jsx8("thead", { children: /* @__PURE__ */ jsx8("tr", { children: columnKeys.map((colId) => /* @__PURE__ */ jsxs8(
+          !loading && filteredRowCount > 0 && /* @__PURE__ */ jsx9("div", { className: "vpg-table-wrapper", children: /* @__PURE__ */ jsxs9("table", { className: "vpg-table", style: { minWidth: `${totalTableWidth}px` }, children: [
+            /* @__PURE__ */ jsx9("thead", { children: /* @__PURE__ */ jsx9("tr", { children: columnKeys.map((colId) => /* @__PURE__ */ jsxs9(
               "th",
               {
                 className: `vpg-header-cell ${hasActiveFilter(colId) ? "vpg-has-filter" : ""} ${getSortDirection(colId) !== null ? "vpg-is-sorted" : ""} ${activeFilterColumn === colId ? "vpg-is-active" : ""}`,
@@ -5724,16 +6007,16 @@ function DataGrid({
                   }
                 },
                 children: [
-                  /* @__PURE__ */ jsxs8("div", { className: "vpg-header-content", children: [
-                    /* @__PURE__ */ jsx8("span", { className: "vpg-header-text", children: colId }),
-                    /* @__PURE__ */ jsxs8("div", { className: "vpg-header-icons", children: [
-                      getSortDirection(colId) && /* @__PURE__ */ jsx8("span", { className: "vpg-sort-indicator", children: getSortDirection(colId) === "asc" ? /* @__PURE__ */ jsx8(
+                  /* @__PURE__ */ jsxs9("div", { className: "vpg-header-content", children: [
+                    /* @__PURE__ */ jsx9("span", { className: "vpg-header-text", children: colId }),
+                    /* @__PURE__ */ jsxs9("div", { className: "vpg-header-icons", children: [
+                      getSortDirection(colId) && /* @__PURE__ */ jsx9("span", { className: "vpg-sort-indicator", children: getSortDirection(colId) === "asc" ? /* @__PURE__ */ jsx9(
                         "svg",
                         {
                           className: "vpg-icon-sm",
                           fill: "currentColor",
                           viewBox: "0 0 20 20",
-                          children: /* @__PURE__ */ jsx8(
+                          children: /* @__PURE__ */ jsx9(
                             "path",
                             {
                               fillRule: "evenodd",
@@ -5742,13 +6025,13 @@ function DataGrid({
                             }
                           )
                         }
-                      ) : /* @__PURE__ */ jsx8(
+                      ) : /* @__PURE__ */ jsx9(
                         "svg",
                         {
                           className: "vpg-icon-sm",
                           fill: "currentColor",
                           viewBox: "0 0 20 20",
-                          children: /* @__PURE__ */ jsx8(
+                          children: /* @__PURE__ */ jsx9(
                             "path",
                             {
                               fillRule: "evenodd",
@@ -5758,13 +6041,13 @@ function DataGrid({
                           )
                         }
                       ) }),
-                      hasActiveFilter(colId) && /* @__PURE__ */ jsx8("span", { className: "vpg-filter-indicator", children: /* @__PURE__ */ jsx8(
+                      hasActiveFilter(colId) && /* @__PURE__ */ jsx9("span", { className: "vpg-filter-indicator", children: /* @__PURE__ */ jsx9(
                         "svg",
                         {
                           className: "vpg-icon-xs",
                           fill: "currentColor",
                           viewBox: "0 0 20 20",
-                          children: /* @__PURE__ */ jsx8(
+                          children: /* @__PURE__ */ jsx9(
                             "path",
                             {
                               fillRule: "evenodd",
@@ -5774,14 +6057,14 @@ function DataGrid({
                           )
                         }
                       ) }),
-                      /* @__PURE__ */ jsx8("span", { className: "vpg-dropdown-arrow", title: "Filter & Sort", children: /* @__PURE__ */ jsx8(
+                      /* @__PURE__ */ jsx9("span", { className: "vpg-dropdown-arrow", title: "Filter & Sort", children: /* @__PURE__ */ jsx9(
                         "svg",
                         {
                           className: "vpg-icon-sm",
                           fill: "none",
                           stroke: "currentColor",
                           viewBox: "0 0 24 24",
-                          children: /* @__PURE__ */ jsx8(
+                          children: /* @__PURE__ */ jsx9(
                             "path",
                             {
                               strokeLinecap: "round",
@@ -5794,7 +6077,7 @@ function DataGrid({
                       ) })
                     ] })
                   ] }),
-                  enableColumnResize && /* @__PURE__ */ jsx8(
+                  enableColumnResize && /* @__PURE__ */ jsx9(
                     "div",
                     {
                       className: "vpg-resize-handle",
@@ -5805,7 +6088,7 @@ function DataGrid({
               },
               colId
             )) }) }),
-            /* @__PURE__ */ jsx8("tbody", { ref: tableBodyRef, children: paginatedRows.map((row, rowIndex) => /* @__PURE__ */ jsx8("tr", { className: "vpg-row", children: columnKeys.map((colId, colIndex) => /* @__PURE__ */ jsx8(
+            /* @__PURE__ */ jsx9("tbody", { ref: tableBodyRef, children: paginatedRows.map((row, rowIndex) => /* @__PURE__ */ jsx9("tr", { className: "vpg-row", children: columnKeys.map((colId, colIndex) => /* @__PURE__ */ jsx9(
               "td",
               {
                 className: `vpg-cell ${isCellSelected(rowIndex, colIndex) ? "vpg-selected" : ""} ${getColumnStats(colId).type === "number" ? "vpg-is-number" : ""}`,
@@ -5823,8 +6106,8 @@ function DataGrid({
             )) }, row.id)) })
           ] }) })
         ] }),
-        viewMode === "pivot" && /* @__PURE__ */ jsxs8("div", { className: "vpg-pivot-container", children: [
-          showPivotConfig && canUsePivot && /* @__PURE__ */ jsx8("div", { className: "vpg-pivot-config-panel", children: /* @__PURE__ */ jsx8(
+        viewMode === "pivot" && /* @__PURE__ */ jsxs9("div", { className: "vpg-pivot-container", children: [
+          showPivotConfig && canUsePivot && /* @__PURE__ */ jsx9("div", { className: "vpg-pivot-config-panel", children: /* @__PURE__ */ jsx9(
             PivotConfig,
             {
               availableFields: pivotAvailableFields,
@@ -5852,7 +6135,7 @@ function DataGrid({
               onUpdateCalculatedField: addCalculatedField
             }
           ) }),
-          /* @__PURE__ */ jsx8("div", { className: `vpg-pivot-main ${!showPivotConfig ? "vpg-full-width" : ""}`, children: /* @__PURE__ */ jsx8(
+          /* @__PURE__ */ jsx9("div", { className: `vpg-pivot-main ${!showPivotConfig ? "vpg-full-width" : ""}`, children: /* @__PURE__ */ jsx9(
             PivotSkeleton,
             {
               rowFields: pivotRowFields,
@@ -5878,10 +6161,10 @@ function DataGrid({
             }
           ) })
         ] }),
-        viewMode === "chart" && /* @__PURE__ */ jsxs8("div", { className: "vpg-chart-view", children: [
-          activeFilterInfo && activeFilterInfo.length > 0 && /* @__PURE__ */ jsxs8("div", { className: "vpg-chart-filter-bar", children: [
-            /* @__PURE__ */ jsx8("svg", { className: "vpg-icon", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx8("path", { fillRule: "evenodd", d: "M3 3a1 1 0 011-1h12a1 1 0 011 1v3a1 1 0 01-.293.707L12 11.414V15a1 1 0 01-.293.707l-2 2A1 1 0 018 17v-5.586L3.293 6.707A1 1 0 013 6V3z", clipRule: "evenodd" }) }),
-            /* @__PURE__ */ jsxs8("span", { children: [
+        viewMode === "chart" && /* @__PURE__ */ jsxs9("div", { className: "vpg-chart-view", children: [
+          activeFilterInfo && activeFilterInfo.length > 0 && /* @__PURE__ */ jsxs9("div", { className: "vpg-chart-filter-bar", children: [
+            /* @__PURE__ */ jsx9("svg", { className: "vpg-icon", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx9("path", { fillRule: "evenodd", d: "M3 3a1 1 0 011-1h12a1 1 0 011 1v3a1 1 0 01-.293.707L12 11.414V15a1 1 0 01-.293.707l-2 2A1 1 0 018 17v-5.586L3.293 6.707A1 1 0 013 6V3z", clipRule: "evenodd" }) }),
+            /* @__PURE__ */ jsxs9("span", { children: [
               "Chart showing",
               filteredRowCount.toLocaleString(),
               " ",
@@ -5890,9 +6173,9 @@ function DataGrid({
               " ",
               "records"
             ] }),
-            /* @__PURE__ */ jsx8("button", { className: "vpg-chart-clear-filters", onClick: clearAllFilters, children: "Clear filters" })
+            /* @__PURE__ */ jsx9("button", { className: "vpg-chart-clear-filters", onClick: clearAllFilters, children: "Clear filters" })
           ] }),
-          /* @__PURE__ */ jsx8(
+          /* @__PURE__ */ jsx9(
             ChartBuilder,
             {
               data: filteredDataForPivot,
@@ -5901,55 +6184,55 @@ function DataGrid({
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs8("div", { className: "vpg-footer", children: [
-          /* @__PURE__ */ jsx8("div", { className: "vpg-footer-left", children: viewMode === "grid" ? enablePagination ? /* @__PURE__ */ jsxs8(Fragment6, { children: [
-            /* @__PURE__ */ jsxs8("span", { children: [
+        /* @__PURE__ */ jsxs9("div", { className: "vpg-footer", children: [
+          /* @__PURE__ */ jsx9("div", { className: "vpg-footer-left", children: viewMode === "grid" ? enablePagination ? /* @__PURE__ */ jsxs9(Fragment6, { children: [
+            /* @__PURE__ */ jsxs9("span", { children: [
               ((currentPage - 1) * pageSize + 1).toLocaleString(),
               "-",
               Math.min(currentPage * pageSize, totalSearchedRows).toLocaleString()
             ] }),
-            /* @__PURE__ */ jsx8("span", { className: "vpg-separator", children: "of" }),
-            /* @__PURE__ */ jsx8("span", { children: totalSearchedRows.toLocaleString() }),
-            totalSearchedRows !== totalRowCount && /* @__PURE__ */ jsxs8("span", { className: "vpg-filtered-note", children: [
+            /* @__PURE__ */ jsx9("span", { className: "vpg-separator", children: "of" }),
+            /* @__PURE__ */ jsx9("span", { children: totalSearchedRows.toLocaleString() }),
+            totalSearchedRows !== totalRowCount && /* @__PURE__ */ jsxs9("span", { className: "vpg-filtered-note", children: [
               "(",
               totalRowCount.toLocaleString(),
               " ",
               "total)"
             ] })
-          ] }) : filteredRowCount === totalRowCount && totalSearchedRows === totalRowCount ? /* @__PURE__ */ jsxs8("span", { children: [
+          ] }) : filteredRowCount === totalRowCount && totalSearchedRows === totalRowCount ? /* @__PURE__ */ jsxs9("span", { children: [
             totalRowCount.toLocaleString(),
             " ",
             "records"
-          ] }) : /* @__PURE__ */ jsxs8(Fragment6, { children: [
-            /* @__PURE__ */ jsx8("span", { className: "vpg-filtered-count", children: totalSearchedRows.toLocaleString() }),
-            /* @__PURE__ */ jsx8("span", { className: "vpg-separator", children: "of" }),
-            /* @__PURE__ */ jsx8("span", { children: totalRowCount.toLocaleString() }),
-            /* @__PURE__ */ jsx8("span", { className: "vpg-separator", children: "records" })
-          ] }) : viewMode === "pivot" ? /* @__PURE__ */ jsxs8(Fragment6, { children: [
-            /* @__PURE__ */ jsx8("span", { className: "vpg-pivot-label", children: "Pivot Table" }),
-            /* @__PURE__ */ jsx8("span", { className: "vpg-separator", children: "\u2022" }),
-            /* @__PURE__ */ jsxs8("span", { children: [
+          ] }) : /* @__PURE__ */ jsxs9(Fragment6, { children: [
+            /* @__PURE__ */ jsx9("span", { className: "vpg-filtered-count", children: totalSearchedRows.toLocaleString() }),
+            /* @__PURE__ */ jsx9("span", { className: "vpg-separator", children: "of" }),
+            /* @__PURE__ */ jsx9("span", { children: totalRowCount.toLocaleString() }),
+            /* @__PURE__ */ jsx9("span", { className: "vpg-separator", children: "records" })
+          ] }) : viewMode === "pivot" ? /* @__PURE__ */ jsxs9(Fragment6, { children: [
+            /* @__PURE__ */ jsx9("span", { className: "vpg-pivot-label", children: "Pivot Table" }),
+            /* @__PURE__ */ jsx9("span", { className: "vpg-separator", children: "\u2022" }),
+            /* @__PURE__ */ jsxs9("span", { children: [
               totalRowCount.toLocaleString(),
               " ",
               "source records"
             ] })
-          ] }) : /* @__PURE__ */ jsxs8(Fragment6, { children: [
-            /* @__PURE__ */ jsx8("span", { className: "vpg-chart-label", children: "Chart Builder" }),
-            /* @__PURE__ */ jsx8("span", { className: "vpg-separator", children: "\u2022" }),
-            /* @__PURE__ */ jsxs8("span", { children: [
+          ] }) : /* @__PURE__ */ jsxs9(Fragment6, { children: [
+            /* @__PURE__ */ jsx9("span", { className: "vpg-chart-label", children: "Chart Builder" }),
+            /* @__PURE__ */ jsx9("span", { className: "vpg-separator", children: "\u2022" }),
+            /* @__PURE__ */ jsxs9("span", { children: [
               totalRowCount.toLocaleString(),
               " ",
               "records"
             ] })
           ] }) }),
-          enablePagination && viewMode === "grid" && totalPages > 1 && /* @__PURE__ */ jsxs8("div", { className: "vpg-pagination", children: [
-            /* @__PURE__ */ jsx8(
+          enablePagination && viewMode === "grid" && totalPages > 1 && /* @__PURE__ */ jsxs9("div", { className: "vpg-pagination", children: [
+            /* @__PURE__ */ jsx9(
               "button",
               {
                 className: "vpg-page-btn",
                 disabled: currentPage === 1,
                 onClick: () => setCurrentPage(1),
-                children: /* @__PURE__ */ jsx8("svg", { className: "vpg-icon-sm", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx8(
+                children: /* @__PURE__ */ jsx9("svg", { className: "vpg-icon-sm", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx9(
                   "path",
                   {
                     strokeLinecap: "round",
@@ -5960,13 +6243,13 @@ function DataGrid({
                 ) })
               }
             ),
-            /* @__PURE__ */ jsx8(
+            /* @__PURE__ */ jsx9(
               "button",
               {
                 className: "vpg-page-btn",
                 disabled: currentPage === 1,
                 onClick: () => setCurrentPage((p) => Math.max(1, p - 1)),
-                children: /* @__PURE__ */ jsx8("svg", { className: "vpg-icon-sm", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx8(
+                children: /* @__PURE__ */ jsx9("svg", { className: "vpg-icon-sm", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx9(
                   "path",
                   {
                     strokeLinecap: "round",
@@ -5977,7 +6260,7 @@ function DataGrid({
                 ) })
               }
             ),
-            /* @__PURE__ */ jsxs8("span", { className: "vpg-page-info", children: [
+            /* @__PURE__ */ jsxs9("span", { className: "vpg-page-info", children: [
               "Page",
               " ",
               currentPage,
@@ -5986,13 +6269,13 @@ function DataGrid({
               " ",
               totalPages
             ] }),
-            /* @__PURE__ */ jsx8(
+            /* @__PURE__ */ jsx9(
               "button",
               {
                 className: "vpg-page-btn",
                 disabled: currentPage === totalPages,
                 onClick: () => setCurrentPage((p) => Math.min(totalPages, p + 1)),
-                children: /* @__PURE__ */ jsx8("svg", { className: "vpg-icon-sm", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx8(
+                children: /* @__PURE__ */ jsx9("svg", { className: "vpg-icon-sm", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx9(
                   "path",
                   {
                     strokeLinecap: "round",
@@ -6003,13 +6286,13 @@ function DataGrid({
                 ) })
               }
             ),
-            /* @__PURE__ */ jsx8(
+            /* @__PURE__ */ jsx9(
               "button",
               {
                 className: "vpg-page-btn",
                 disabled: currentPage === totalPages,
                 onClick: () => setCurrentPage(totalPages),
-                children: /* @__PURE__ */ jsx8("svg", { className: "vpg-icon-sm", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx8(
+                children: /* @__PURE__ */ jsx9("svg", { className: "vpg-icon-sm", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx9(
                   "path",
                   {
                     strokeLinecap: "round",
@@ -6021,45 +6304,45 @@ function DataGrid({
               }
             )
           ] }),
-          viewMode === "grid" && selectionStats && selectionStats.count > 1 && /* @__PURE__ */ jsxs8("div", { className: "vpg-selection-stats", children: [
-            /* @__PURE__ */ jsxs8("span", { className: "vpg-stat", children: [
-              /* @__PURE__ */ jsx8("span", { className: "vpg-stat-label", children: "Count:" }),
-              /* @__PURE__ */ jsx8("span", { className: "vpg-stat-value", children: selectionStats.count })
+          viewMode === "grid" && selectionStats && selectionStats.count > 1 && /* @__PURE__ */ jsxs9("div", { className: "vpg-selection-stats", children: [
+            /* @__PURE__ */ jsxs9("span", { className: "vpg-stat", children: [
+              /* @__PURE__ */ jsx9("span", { className: "vpg-stat-label", children: "Count:" }),
+              /* @__PURE__ */ jsx9("span", { className: "vpg-stat-value", children: selectionStats.count })
             ] }),
-            selectionStats.numericCount > 0 && /* @__PURE__ */ jsxs8(Fragment6, { children: [
-              /* @__PURE__ */ jsx8("span", { className: "vpg-stat-divider", children: "|" }),
-              /* @__PURE__ */ jsxs8("span", { className: "vpg-stat", children: [
-                /* @__PURE__ */ jsx8("span", { className: "vpg-stat-label", children: "Sum:" }),
-                /* @__PURE__ */ jsx8("span", { className: "vpg-stat-value", children: formatStatValue(selectionStats.sum) })
+            selectionStats.numericCount > 0 && /* @__PURE__ */ jsxs9(Fragment6, { children: [
+              /* @__PURE__ */ jsx9("span", { className: "vpg-stat-divider", children: "|" }),
+              /* @__PURE__ */ jsxs9("span", { className: "vpg-stat", children: [
+                /* @__PURE__ */ jsx9("span", { className: "vpg-stat-label", children: "Sum:" }),
+                /* @__PURE__ */ jsx9("span", { className: "vpg-stat-value", children: formatStatValue(selectionStats.sum) })
               ] }),
-              /* @__PURE__ */ jsx8("span", { className: "vpg-stat-divider", children: "|" }),
-              /* @__PURE__ */ jsxs8("span", { className: "vpg-stat", children: [
-                /* @__PURE__ */ jsx8("span", { className: "vpg-stat-label", children: "Avg:" }),
-                /* @__PURE__ */ jsx8("span", { className: "vpg-stat-value", children: formatStatValue(selectionStats.avg) })
+              /* @__PURE__ */ jsx9("span", { className: "vpg-stat-divider", children: "|" }),
+              /* @__PURE__ */ jsxs9("span", { className: "vpg-stat", children: [
+                /* @__PURE__ */ jsx9("span", { className: "vpg-stat-label", children: "Avg:" }),
+                /* @__PURE__ */ jsx9("span", { className: "vpg-stat-value", children: formatStatValue(selectionStats.avg) })
               ] })
             ] })
           ] }),
-          /* @__PURE__ */ jsx8("div", { className: "vpg-footer-right", children: isDemo ? /* @__PURE__ */ jsxs8("div", { className: "vpg-demo-banner", children: [
-            /* @__PURE__ */ jsx8("span", { className: "vpg-demo-badge", children: "DEMO" }),
-            /* @__PURE__ */ jsx8("span", { children: "Pro features enabled" }),
-            /* @__PURE__ */ jsx8("a", { href: "https://tiny-pivot.com/#pricing", target: "_blank", rel: "noopener noreferrer", children: "Get License \u2192" })
-          ] }) : showWatermark ? /* @__PURE__ */ jsx8("span", { className: "vpg-watermark-inline", children: /* @__PURE__ */ jsxs8("a", { href: "https://tiny-pivot.com", target: "_blank", rel: "noopener noreferrer", children: [
-            /* @__PURE__ */ jsxs8("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__ */ jsx8("rect", { x: "3", y: "3", width: "7", height: "7" }),
-              /* @__PURE__ */ jsx8("rect", { x: "14", y: "3", width: "7", height: "7" }),
-              /* @__PURE__ */ jsx8("rect", { x: "14", y: "14", width: "7", height: "7" }),
-              /* @__PURE__ */ jsx8("rect", { x: "3", y: "14", width: "7", height: "7" })
+          /* @__PURE__ */ jsx9("div", { className: "vpg-footer-right", children: isDemo ? /* @__PURE__ */ jsxs9("div", { className: "vpg-demo-banner", children: [
+            /* @__PURE__ */ jsx9("span", { className: "vpg-demo-badge", children: "DEMO" }),
+            /* @__PURE__ */ jsx9("span", { children: "Pro features enabled" }),
+            /* @__PURE__ */ jsx9("a", { href: "https://tiny-pivot.com/#pricing", target: "_blank", rel: "noopener noreferrer", children: "Get License \u2192" })
+          ] }) : showWatermark ? /* @__PURE__ */ jsx9("span", { className: "vpg-watermark-inline", children: /* @__PURE__ */ jsxs9("a", { href: "https://tiny-pivot.com", target: "_blank", rel: "noopener noreferrer", children: [
+            /* @__PURE__ */ jsxs9("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__ */ jsx9("rect", { x: "3", y: "3", width: "7", height: "7" }),
+              /* @__PURE__ */ jsx9("rect", { x: "14", y: "3", width: "7", height: "7" }),
+              /* @__PURE__ */ jsx9("rect", { x: "14", y: "14", width: "7", height: "7" }),
+              /* @__PURE__ */ jsx9("rect", { x: "3", y: "14", width: "7", height: "7" })
             ] }),
             "Powered by TinyPivot"
           ] }) }) : null })
         ] }),
-        enableVerticalResize && /* @__PURE__ */ jsx8("div", { className: "vpg-vertical-resize-handle", onMouseDown: startVerticalResize, children: /* @__PURE__ */ jsxs8("div", { className: "vpg-resize-grip", children: [
-          /* @__PURE__ */ jsx8("span", {}),
-          /* @__PURE__ */ jsx8("span", {}),
-          /* @__PURE__ */ jsx8("span", {})
+        enableVerticalResize && /* @__PURE__ */ jsx9("div", { className: "vpg-vertical-resize-handle", onMouseDown: startVerticalResize, children: /* @__PURE__ */ jsxs9("div", { className: "vpg-resize-grip", children: [
+          /* @__PURE__ */ jsx9("span", {}),
+          /* @__PURE__ */ jsx9("span", {}),
+          /* @__PURE__ */ jsx9("span", {})
         ] }) }),
         activeFilterColumn && typeof document !== "undefined" && createPortal2(
-          /* @__PURE__ */ jsx8(
+          /* @__PURE__ */ jsx9(
             "div",
             {
               className: "vpg-filter-portal",
@@ -6070,7 +6353,7 @@ function DataGrid({
                 maxHeight: `${filterDropdownPosition.maxHeight}px`,
                 zIndex: 9999
               },
-              children: /* @__PURE__ */ jsx8(
+              children: /* @__PURE__ */ jsx9(
                 ColumnFilter,
                 {
                   columnId: activeFilterColumn,
@@ -6079,8 +6362,12 @@ function DataGrid({
                   selectedValues: getColumnFilterValues(activeFilterColumn),
                   sortDirection: getSortDirection(activeFilterColumn),
                   numericRange: getNumericRangeFilter(activeFilterColumn),
+                  dateRange: getDateRangeFilter(activeFilterColumn),
+                  numberFormat,
+                  dateFormat,
                   onFilter: (values) => handleFilter(activeFilterColumn, values),
                   onRangeFilter: (range) => handleRangeFilter(activeFilterColumn, range),
+                  onDateRangeFilter: (range) => handleDateRangeFilter(activeFilterColumn, range),
                   onSort: (dir) => handleSort(activeFilterColumn, dir),
                   onClose: closeFilterDropdown
                 }