@smallwebco/tinypivot-react 1.0.48 → 1.0.50

package/dist/index.js

@@ -1,1296 +1,701 @@
-// src/components/DataGrid.tsx
-import { useState as useState10, useMemo as useMemo10, useCallback as useCallback10, useEffect as useEffect7, useRef as useRef2 } from "react";
-import { createPortal as createPortal2 } from "react-dom";
-
-// src/hooks/useExcelGrid.ts
-import { useState, useMemo, useCallback, useEffect } from "react";
-import {
-  useReactTable,
-  getCoreRowModel,
-  getFilteredRowModel,
-  getSortedRowModel
-} from "@tanstack/react-table";
-import { getColumnUniqueValues, formatCellValue, isNumericRange } from "@smallwebco/tinypivot-core";
-var multiSelectFilter = (row, columnId, filterValue) => {
-  if (!filterValue) return true;
-  if (isNumericRange(filterValue)) {
-    const cellValue = row.getValue(columnId);
-    if (cellValue === null || cellValue === void 0 || cellValue === "") {
-      return false;
-    }
-    const num = typeof cellValue === "number" ? cellValue : Number.parseFloat(String(cellValue));
-    if (Number.isNaN(num)) return false;
-    const { min, max } = filterValue;
-    if (min !== null && num < min) return false;
-    if (max !== null && num > max) return false;
-    return true;
-  }
-  if (Array.isArray(filterValue) && filterValue.length > 0) {
-    const cellValue = row.getValue(columnId);
-    const cellString = cellValue === null || cellValue === void 0 || cellValue === "" ? "(blank)" : String(cellValue);
-    return filterValue.includes(cellString);
-  }
-  return true;
-};
-function useExcelGrid(options) {
-  const { data, enableSorting = true, enableFiltering = true } = options;
-  const [sorting, setSorting] = useState([]);
-  const [columnFilters, setColumnFilters] = useState([]);
-  const [columnVisibility, setColumnVisibility] = useState({});
-  const [globalFilter, setGlobalFilter] = useState("");
-  const [columnStatsCache, setColumnStatsCache] = useState({});
-  const dataSignature = useMemo(
-    () => `${Date.now()}-${Math.random().toString(36).slice(2)}`,
-    [data]
-  );
-  const columnKeys = useMemo(() => {
-    if (data.length === 0) return [];
-    return Object.keys(data[0]);
-  }, [data]);
-  const getColumnStats = useCallback(
-    (columnKey) => {
-      const cacheKey = `${columnKey}-${dataSignature}`;
-      if (!columnStatsCache[cacheKey]) {
-        const stats = getColumnUniqueValues(data, columnKey);
-        setColumnStatsCache((prev) => ({ ...prev, [cacheKey]: stats }));
-        return stats;
-      }
-      return columnStatsCache[cacheKey];
-    },
-    [data, columnStatsCache, dataSignature]
-  );
-  const clearStatsCache = useCallback(() => {
-    setColumnStatsCache({});
-  }, []);
+// src/components/CalculatedFieldModal.tsx
+import { validateSimpleFormula } from "@smallwebco/tinypivot-core";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { createPortal } from "react-dom";
+import { jsx, jsxs } from "react/jsx-runtime";
+function CalculatedFieldModal({
+  show,
+  availableFields,
+  existingField,
+  onClose,
+  onSave
+}) {
+  const [name, setName] = useState("");
+  const [formula, setFormula] = useState("");
+  const [formatAs, setFormatAs] = useState("number");
+  const [decimals, setDecimals] = useState(2);
+  const [error, setError] = useState(null);
   useEffect(() => {
-    clearStatsCache();
-  }, [dataSignature, clearStatsCache]);
-  const columnDefs = useMemo(() => {
-    return columnKeys.map((key) => {
-      const stats = getColumnStats(key);
-      return {
-        id: key,
-        accessorKey: key,
-        header: key,
-        cell: (info) => formatCellValue(info.getValue(), stats.type),
-        filterFn: multiSelectFilter,
-        meta: {
-          type: stats.type,
-          uniqueCount: stats.uniqueValues.length
-        }
-      };
-    });
-  }, [columnKeys, getColumnStats]);
-  const table = useReactTable({
-    data,
-    columns: columnDefs,
-    state: {
-      sorting,
-      columnFilters,
-      columnVisibility,
-      globalFilter
-    },
-    onSortingChange: setSorting,
-    onColumnFiltersChange: setColumnFilters,
-    onColumnVisibilityChange: setColumnVisibility,
-    onGlobalFilterChange: setGlobalFilter,
-    getCoreRowModel: getCoreRowModel(),
-    getSortedRowModel: enableSorting ? getSortedRowModel() : void 0,
-    getFilteredRowModel: enableFiltering ? getFilteredRowModel() : void 0,
-    filterFns: {
-      multiSelect: multiSelectFilter
-    },
-    enableSorting,
-    enableFilters: enableFiltering
-  });
-  const filteredRowCount = table.getFilteredRowModel().rows.length;
-  const totalRowCount = data.length;
-  const activeFilters = useMemo(() => {
-    return columnFilters.map((f) => {
-      const filterValue = f.value;
-      if (filterValue && isNumericRange(filterValue)) {
-        return {
-          column: f.id,
-          type: "range",
-          range: filterValue,
-          values: []
-        };
-      }
-      return {
-        column: f.id,
-        type: "values",
-        values: Array.isArray(filterValue) ? filterValue : [],
-        range: null
-      };
-    });
-  }, [columnFilters]);
-  const hasActiveFilter = useCallback(
-    (columnId) => {
-      const column = table.getColumn(columnId);
-      if (!column) return false;
-      const filterValue = column.getFilterValue();
-      if (!filterValue) return false;
-      if (isNumericRange(filterValue)) {
-        return filterValue.min !== null || filterValue.max !== null;
-      }
-      return Array.isArray(filterValue) && filterValue.length > 0;
-    },
-    [table]
-  );
-  const setColumnFilter = useCallback(
-    (columnId, values) => {
-      const column = table.getColumn(columnId);
-      if (column) {
-        column.setFilterValue(values.length === 0 ? void 0 : values);
-      }
-    },
-    [table]
-  );
-  const setNumericRangeFilter = useCallback(
-    (columnId, range) => {
-      const column = table.getColumn(columnId);
-      if (column) {
-        if (!range || range.min === null && range.max === null) {
-          column.setFilterValue(void 0);
-        } else {
-          column.setFilterValue(range);
-        }
-      }
-    },
-    [table]
-  );
-  const getNumericRangeFilter = useCallback(
-    (columnId) => {
-      const column = table.getColumn(columnId);
-      if (!column) return null;
-      const filterValue = column.getFilterValue();
-      if (filterValue && isNumericRange(filterValue)) {
-        return filterValue;
+    if (show) {
+      if (existingField) {
+        setName(existingField.name);
+        setFormula(existingField.formula);
+        setFormatAs(existingField.formatAs || "number");
+        setDecimals(existingField.decimals ?? 2);
+      } else {
+        setName("");
+        setFormula("");
+        setFormatAs("number");
+        setDecimals(2);
       }
+      setError(null);
+    }
+  }, [show, existingField]);
+  const validationError = useMemo(() => {
+    if (!formula.trim())
       return null;
-    },
-    [table]
-  );
-  const clearAllFilters = useCallback(() => {
-    table.resetColumnFilters();
-    setGlobalFilter("");
-    setColumnFilters([]);
-  }, [table]);
-  const getColumnFilterValues = useCallback(
-    (columnId) => {
-      const column = table.getColumn(columnId);
-      if (!column) return [];
-      const filterValue = column.getFilterValue();
-      return Array.isArray(filterValue) ? filterValue : [];
-    },
-    [table]
-  );
-  const toggleSort = useCallback((columnId) => {
-    setSorting((prev) => {
-      const current = prev.find((s) => s.id === columnId);
-      if (!current) {
-        return [{ id: columnId, desc: false }];
-      } else if (!current.desc) {
-        return [{ id: columnId, desc: true }];
-      } else {
-        return [];
+    return validateSimpleFormula(formula, availableFields);
+  }, [formula, availableFields]);
+  const insertField = useCallback((field) => {
+    setFormula((prev) => {
+      if (prev.trim() && !prev.endsWith(" ")) {
+        return `${prev} ${field}`;
       }
+      return prev + field;
     });
   }, []);
-  const getSortDirection = useCallback(
-    (columnId) => {
-      const sort = sorting.find((s) => s.id === columnId);
-      if (!sort) return null;
-      return sort.desc ? "desc" : "asc";
-    },
-    [sorting]
-  );
-  return {
-    // Table instance
-    table,
-    // State
-    sorting,
-    columnFilters,
-    columnVisibility,
-    globalFilter,
-    columnKeys,
-    setSorting,
-    setColumnFilters,
-    setGlobalFilter,
-    // Computed
-    filteredRowCount,
-    totalRowCount,
-    activeFilters,
-    // Methods
-    getColumnStats,
-    clearStatsCache,
-    hasActiveFilter,
-    setColumnFilter,
-    getColumnFilterValues,
-    clearAllFilters,
-    toggleSort,
-    getSortDirection,
-    // Numeric range filters
-    setNumericRangeFilter,
-    getNumericRangeFilter
-  };
-}
-
-// src/hooks/usePivotTable.ts
-import { useState as useState3, useMemo as useMemo3, useEffect as useEffect2, useCallback as useCallback3 } from "react";
-import {
-  computeAvailableFields,
-  getUnassignedFields,
-  isPivotConfigured,
-  computePivotResult,
-  generateStorageKey,
-  savePivotConfig,
-  loadPivotConfig,
-  isConfigValidForFields,
-  getAggregationLabel,
-  loadCalculatedFields,
-  saveCalculatedFields
-} from "@smallwebco/tinypivot-core";
-
-// src/hooks/useLicense.ts
-import { useState as useState2, useCallback as useCallback2, useMemo as useMemo2 } from "react";
-import {
-  validateLicenseKey,
-  configureLicenseSecret as coreConfigureLicenseSecret,
-  getDemoLicenseInfo,
-  getFreeLicenseInfo,
-  canUsePivot as coreCanUsePivot,
-  isPro as coreIsPro,
-  shouldShowWatermark as coreShouldShowWatermark,
-  logProRequired
-} from "@smallwebco/tinypivot-core";
-var globalLicenseInfo = getFreeLicenseInfo();
-var globalDemoMode = false;
-var listeners = /* @__PURE__ */ new Set();
-function notifyListeners() {
-  listeners.forEach((listener) => listener());
-}
-async function setLicenseKey(key) {
-  globalLicenseInfo = await validateLicenseKey(key);
-  if (!globalLicenseInfo.isValid) {
-    console.warn("[TinyPivot] Invalid or expired license key. Running in free mode.");
-  } else if (globalLicenseInfo.type !== "free") {
-    console.info(`[TinyPivot] Pro license activated (${globalLicenseInfo.type})`);
-  }
-  notifyListeners();
-}
-async function enableDemoMode(secret) {
-  const demoLicense = await getDemoLicenseInfo(secret);
-  if (!demoLicense) {
-    console.warn("[TinyPivot] Demo mode activation failed - invalid secret");
-    return false;
-  }
-  globalDemoMode = true;
-  globalLicenseInfo = demoLicense;
-  console.info("[TinyPivot] Demo mode enabled - all Pro features unlocked for evaluation");
-  notifyListeners();
-  return true;
-}
-function configureLicenseSecret(secret) {
-  coreConfigureLicenseSecret(secret);
-}
-function useLicense() {
-  const [, forceUpdate] = useState2({});
-  useState2(() => {
-    const update = () => forceUpdate({});
-    listeners.add(update);
-    return () => listeners.delete(update);
-  });
-  const isDemo = globalDemoMode;
-  const licenseInfo = globalLicenseInfo;
-  const isPro = useMemo2(
-    () => globalDemoMode || coreIsPro(licenseInfo),
-    [licenseInfo]
-  );
-  const canUsePivot = useMemo2(
-    () => globalDemoMode || coreCanUsePivot(licenseInfo),
-    [licenseInfo]
-  );
-  const canUseAdvancedAggregations = useMemo2(
-    () => globalDemoMode || licenseInfo.features.advancedAggregations,
-    [licenseInfo]
-  );
-  const canUsePercentageMode = useMemo2(
-    () => globalDemoMode || licenseInfo.features.percentageMode,
-    [licenseInfo]
-  );
-  const showWatermark = useMemo2(
-    () => coreShouldShowWatermark(licenseInfo, globalDemoMode),
-    [licenseInfo]
-  );
-  const requirePro = useCallback2((feature) => {
-    if (!isPro) {
-      logProRequired(feature);
-      return false;
+  const insertOperator = useCallback((op) => {
+    setFormula((prev) => {
+      if (prev.trim() && !prev.endsWith(" ")) {
+        return `${prev} ${op} `;
+      }
+      return `${prev + op} `;
+    });
+  }, []);
+  const handleSave = useCallback(() => {
+    if (!name.trim()) {
+      setError("Name is required");
+      return;
     }
-    return true;
-  }, [isPro]);
-  return {
-    licenseInfo,
-    isDemo,
-    isPro,
-    canUsePivot,
-    canUseAdvancedAggregations,
-    canUsePercentageMode,
-    showWatermark,
-    requirePro
-  };
+    const validationResult = validateSimpleFormula(formula, availableFields);
+    if (validationResult) {
+      setError(validationResult);
+      return;
+    }
+    const field = {
+      id: existingField?.id || `calc_${Date.now()}`,
+      name: name.trim(),
+      formula: formula.trim(),
+      formatAs,
+      decimals
+    };
+    onSave(field);
+    onClose();
+  }, [name, formula, formatAs, decimals, existingField, availableFields, onSave, onClose]);
+  const handleOverlayClick = useCallback((e) => {
+    if (e.target === e.currentTarget) {
+      onClose();
+    }
+  }, [onClose]);
+  if (!show)
+    return null;
+  const modalContent = /* @__PURE__ */ jsx("div", { className: "vpg-modal-overlay", onClick: handleOverlayClick, children: /* @__PURE__ */ jsxs("div", { className: "vpg-modal", children: [
+    /* @__PURE__ */ jsxs("div", { className: "vpg-modal-header", children: [
+      /* @__PURE__ */ jsxs("h3", { children: [
+        existingField ? "Edit" : "Create",
+        " ",
+        "Calculated Field"
+      ] }),
+      /* @__PURE__ */ jsx("button", { className: "vpg-modal-close", onClick: onClose, children: "\xD7" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "vpg-modal-body", children: [
+      /* @__PURE__ */ jsxs("div", { className: "vpg-form-group", children: [
+        /* @__PURE__ */ jsx("label", { className: "vpg-label", children: "Name" }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "text",
+            className: "vpg-input",
+            placeholder: "e.g., Profit Margin %",
+            value: name,
+            onChange: (e) => setName(e.target.value)
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "vpg-form-group", children: [
+        /* @__PURE__ */ jsx("label", { className: "vpg-label", children: "Formula" }),
+        /* @__PURE__ */ jsx(
+          "textarea",
+          {
+            className: "vpg-textarea",
+            placeholder: "e.g., revenue / units",
+            rows: 2,
+            value: formula,
+            onChange: (e) => setFormula(e.target.value)
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "vpg-formula-hint", children: "Use field names with math operators: + - * / ( )" }),
+        validationError && /* @__PURE__ */ jsx("div", { className: "vpg-error", children: validationError })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "vpg-form-group", children: [
+        /* @__PURE__ */ jsx("label", { className: "vpg-label-small", children: "Operators" }),
+        /* @__PURE__ */ jsxs("div", { className: "vpg-button-group", children: [
+          /* @__PURE__ */ jsx("button", { className: "vpg-insert-btn vpg-op-btn", onClick: () => insertOperator("+"), children: "+" }),
+          /* @__PURE__ */ jsx("button", { className: "vpg-insert-btn vpg-op-btn", onClick: () => insertOperator("-"), children: "\u2212" }),
+          /* @__PURE__ */ jsx("button", { className: "vpg-insert-btn vpg-op-btn", onClick: () => insertOperator("*"), children: "\xD7" }),
+          /* @__PURE__ */ jsx("button", { className: "vpg-insert-btn vpg-op-btn", onClick: () => insertOperator("/"), children: "\xF7" }),
+          /* @__PURE__ */ jsx("button", { className: "vpg-insert-btn vpg-op-btn", onClick: () => insertOperator("("), children: "(" }),
+          /* @__PURE__ */ jsx("button", { className: "vpg-insert-btn vpg-op-btn", onClick: () => insertOperator(")"), children: ")" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "vpg-form-group", children: [
+        /* @__PURE__ */ jsx("label", { className: "vpg-label-small", children: "Insert Field" }),
+        availableFields.length > 0 ? /* @__PURE__ */ jsx("div", { className: "vpg-button-group vpg-field-buttons", children: availableFields.map((field) => /* @__PURE__ */ jsx(
+          "button",
+          {
+            className: "vpg-insert-btn vpg-field-btn",
+            onClick: () => insertField(field),
+            children: field
+          },
+          field
+        )) }) : /* @__PURE__ */ jsx("div", { className: "vpg-no-fields", children: "No numeric fields available" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "vpg-form-row", children: [
+        /* @__PURE__ */ jsxs("div", { className: "vpg-form-group vpg-form-group-half", children: [
+          /* @__PURE__ */ jsx("label", { className: "vpg-label", children: "Format As" }),
+          /* @__PURE__ */ jsxs(
+            "select",
+            {
+              className: "vpg-select",
+              value: formatAs,
+              onChange: (e) => setFormatAs(e.target.value),
+              children: [
+                /* @__PURE__ */ jsx("option", { value: "number", children: "Number" }),
+                /* @__PURE__ */ jsx("option", { value: "percent", children: "Percentage" }),
+                /* @__PURE__ */ jsx("option", { value: "currency", children: "Currency ($)" })
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "vpg-form-group vpg-form-group-half", children: [
+          /* @__PURE__ */ jsx("label", { className: "vpg-label", children: "Decimals" }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "number",
+              className: "vpg-input",
+              min: 0,
+              max: 6,
+              value: decimals,
+              onChange: (e) => setDecimals(Number(e.target.value))
+            }
+          )
+        ] })
+      ] }),
+      error && /* @__PURE__ */ jsx("div", { className: "vpg-error vpg-error-box", children: error })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "vpg-modal-footer", children: [
+      /* @__PURE__ */ jsx("button", { className: "vpg-btn vpg-btn-secondary", onClick: onClose, children: "Cancel" }),
+      /* @__PURE__ */ jsxs("button", { className: "vpg-btn vpg-btn-primary", onClick: handleSave, children: [
+        existingField ? "Update" : "Add",
+        " ",
+        "Field"
+      ] })
+    ] })
+  ] }) });
+  if (typeof document === "undefined")
+    return null;
+  return createPortal(modalContent, document.body);
 }
 
-// src/hooks/usePivotTable.ts
-function usePivotTable(data) {
-  const { canUsePivot, requirePro } = useLicense();
-  const [rowFields, setRowFieldsState] = useState3([]);
-  const [columnFields, setColumnFieldsState] = useState3([]);
-  const [valueFields, setValueFields] = useState3([]);
-  const [showRowTotals, setShowRowTotals] = useState3(true);
-  const [showColumnTotals, setShowColumnTotals] = useState3(true);
-  const [calculatedFields, setCalculatedFields] = useState3(() => loadCalculatedFields());
-  const [currentStorageKey, setCurrentStorageKey] = useState3(null);
-  const availableFields = useMemo3(() => {
-    return computeAvailableFields(data);
-  }, [data]);
-  const unassignedFields = useMemo3(() => {
-    return getUnassignedFields(availableFields, rowFields, columnFields, valueFields);
-  }, [availableFields, rowFields, columnFields, valueFields]);
-  const isConfigured = useMemo3(() => {
-    return isPivotConfigured({
-      rowFields,
-      columnFields,
-      valueFields,
-      showRowTotals,
-      showColumnTotals
-    });
-  }, [rowFields, columnFields, valueFields, showRowTotals, showColumnTotals]);
-  const pivotResult = useMemo3(() => {
-    if (!isConfigured) return null;
-    if (!canUsePivot) return null;
-    return computePivotResult(data, {
-      rowFields,
-      columnFields,
-      valueFields,
-      showRowTotals,
-      showColumnTotals,
-      calculatedFields
+// src/components/ColumnFilter.tsx
+import { useCallback as useCallback3, useEffect as useEffect3, useMemo as useMemo3, useRef, useState as useState3 } from "react";
+
+// src/components/NumericRangeFilter.tsx
+import { useCallback as useCallback2, useEffect as useEffect2, useMemo as useMemo2, useState as useState2 } from "react";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function NumericRangeFilter({
+  dataMin,
+  dataMax,
+  currentRange,
+  onChange
+}) {
+  const [localMin, setLocalMin] = useState2(currentRange?.min ?? null);
+  const [localMax, setLocalMax] = useState2(currentRange?.max ?? null);
+  const step = useMemo2(() => {
+    const range = dataMax - dataMin;
+    if (range === 0)
+      return 1;
+    if (range <= 1)
+      return 0.01;
+    if (range <= 10)
+      return 0.1;
+    if (range <= 100)
+      return 1;
+    if (range <= 1e3)
+      return 10;
+    return 10 ** (Math.floor(Math.log10(range)) - 2);
+  }, [dataMin, dataMax]);
+  const formatValue = useCallback2((val) => {
+    if (val === null)
+      return "";
+    if (Number.isInteger(val))
+      return val.toLocaleString();
+    return val.toLocaleString(void 0, { maximumFractionDigits: 2 });
+  }, []);
+  const isFilterActive = localMin !== null || localMax !== null;
+  const minPercent = useMemo2(() => {
+    if (localMin === null || dataMax === dataMin)
+      return 0;
+    return (localMin - dataMin) / (dataMax - dataMin) * 100;
+  }, [localMin, dataMin, dataMax]);
+  const maxPercent = useMemo2(() => {
+    if (localMax === null || dataMax === dataMin)
+      return 100;
+    return (localMax - dataMin) / (dataMax - dataMin) * 100;
+  }, [localMax, dataMin, dataMax]);
+  const handleMinSlider = useCallback2((event) => {
+    const value = Number.parseFloat(event.target.value);
+    setLocalMin(() => {
+      if (localMax !== null && value > localMax) {
+        return localMax;
+      }
+      return value;
     });
-  }, [data, isConfigured, canUsePivot, rowFields, columnFields, valueFields, showRowTotals, showColumnTotals, calculatedFields]);
-  useEffect2(() => {
-    if (data.length === 0) return;
-    const newKeys = Object.keys(data[0]);
-    const storageKey = generateStorageKey(newKeys);
-    if (storageKey !== currentStorageKey) {
-      setCurrentStorageKey(storageKey);
-      const savedConfig = loadPivotConfig(storageKey);
-      if (savedConfig && isConfigValidForFields(savedConfig, newKeys)) {
-        setRowFieldsState(savedConfig.rowFields);
-        setColumnFieldsState(savedConfig.columnFields);
-        setValueFields(savedConfig.valueFields);
-        setShowRowTotals(savedConfig.showRowTotals);
-        setShowColumnTotals(savedConfig.showColumnTotals);
-        if (savedConfig.calculatedFields) {
-          setCalculatedFields(savedConfig.calculatedFields);
-        }
-      } else {
-        const currentConfig = {
-          rowFields,
-          columnFields,
-          valueFields,
-          showRowTotals,
-          showColumnTotals
-        };
-        if (!isConfigValidForFields(currentConfig, newKeys)) {
-          setRowFieldsState([]);
-          setColumnFieldsState([]);
-          setValueFields([]);
-        }
+  }, [localMax]);
+  const handleMaxSlider = useCallback2((event) => {
+    const value = Number.parseFloat(event.target.value);
+    setLocalMax(() => {
+      if (localMin !== null && value < localMin) {
+        return localMin;
       }
+      return value;
+    });
+  }, [localMin]);
+  const handleSliderChange = useCallback2(() => {
+    if (localMin === null && localMax === null) {
+      onChange(null);
+    } else {
+      onChange({ min: localMin, max: localMax });
     }
-  }, [data]);
-  useEffect2(() => {
-    if (!currentStorageKey) return;
-    const config = {
-      rowFields,
-      columnFields,
-      valueFields,
-      showRowTotals,
-      showColumnTotals,
-      calculatedFields
-    };
-    savePivotConfig(currentStorageKey, config);
-  }, [currentStorageKey, rowFields, columnFields, valueFields, showRowTotals, showColumnTotals, calculatedFields]);
-  const addRowField = useCallback3(
-    (field) => {
-      if (!rowFields.includes(field)) {
-        setRowFieldsState((prev) => [...prev, field]);
-      }
-    },
-    [rowFields]
-  );
-  const removeRowField = useCallback3((field) => {
-    setRowFieldsState((prev) => prev.filter((f) => f !== field));
-  }, []);
-  const setRowFields = useCallback3((fields) => {
-    setRowFieldsState(fields);
-  }, []);
-  const addColumnField = useCallback3(
-    (field) => {
-      if (!columnFields.includes(field)) {
-        setColumnFieldsState((prev) => [...prev, field]);
-      }
-    },
-    [columnFields]
-  );
-  const removeColumnField = useCallback3((field) => {
-    setColumnFieldsState((prev) => prev.filter((f) => f !== field));
-  }, []);
-  const setColumnFields = useCallback3((fields) => {
-    setColumnFieldsState(fields);
-  }, []);
-  const addValueField = useCallback3(
-    (field, aggregation = "sum") => {
-      if (aggregation !== "sum" && !requirePro(`${aggregation} aggregation`)) {
-        return;
-      }
-      setValueFields((prev) => {
-        if (prev.some((v) => v.field === field && v.aggregation === aggregation)) {
-          return prev;
+  }, [localMin, localMax, onChange]);
+  const handleMinInput = useCallback2((event) => {
+    const value = event.target.value === "" ? null : Number.parseFloat(event.target.value);
+    if (value !== null && !Number.isNaN(value)) {
+      setLocalMin(Math.max(dataMin, Math.min(value, localMax ?? dataMax)));
+    } else if (value === null) {
+      setLocalMin(null);
+    }
+  }, [dataMin, dataMax, localMax]);
+  const handleMaxInput = useCallback2((event) => {
+    const value = event.target.value === "" ? null : Number.parseFloat(event.target.value);
+    if (value !== null && !Number.isNaN(value)) {
+      setLocalMax(Math.min(dataMax, Math.max(value, localMin ?? dataMin)));
+    } else if (value === null) {
+      setLocalMax(null);
+    }
+  }, [dataMin, dataMax, localMin]);
+  const handleInputBlur = useCallback2(() => {
+    if (localMin === null && localMax === null) {
+      onChange(null);
+    } else {
+      onChange({ min: localMin, max: localMax });
+    }
+  }, [localMin, localMax, onChange]);
+  const clearFilter = useCallback2(() => {
+    setLocalMin(null);
+    setLocalMax(null);
+    onChange(null);
+  }, [onChange]);
+  const setFullRange = useCallback2(() => {
+    setLocalMin(dataMin);
+    setLocalMax(dataMax);
+    onChange({ min: dataMin, max: dataMax });
+  }, [dataMin, dataMax, onChange]);
+  useEffect2(() => {
+    setLocalMin(currentRange?.min ?? null);
+    setLocalMax(currentRange?.max ?? null);
+  }, [currentRange]);
+  return /* @__PURE__ */ jsxs2("div", { className: "vpg-range-filter", children: [
+    /* @__PURE__ */ jsxs2("div", { className: "vpg-range-info", children: [
+      /* @__PURE__ */ jsx2("span", { className: "vpg-range-label", children: "Data range:" }),
+      /* @__PURE__ */ jsxs2("span", { className: "vpg-range-bounds", children: [
+        formatValue(dataMin),
+        " ",
+        "\u2013",
+        formatValue(dataMax)
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs2("div", { className: "vpg-slider-container", children: [
+      /* @__PURE__ */ jsx2("div", { className: "vpg-slider-track", children: /* @__PURE__ */ jsx2(
+        "div",
+        {
+          className: "vpg-slider-fill",
+          style: {
+            left: `${minPercent}%`,
+            right: `${100 - maxPercent}%`
+          }
         }
-        return [...prev, { field, aggregation }];
-      });
-    },
-    [requirePro]
-  );
-  const removeValueField = useCallback3((field, aggregation) => {
-    setValueFields((prev) => {
-      if (aggregation) {
-        return prev.filter((v) => !(v.field === field && v.aggregation === aggregation));
-      }
-      return prev.filter((v) => v.field !== field);
-    });
-  }, []);
-  const updateValueFieldAggregation = useCallback3(
-    (field, oldAgg, newAgg) => {
-      setValueFields(
-        (prev) => prev.map((v) => {
-          if (v.field === field && v.aggregation === oldAgg) {
-            return { ...v, aggregation: newAgg };
+      ) }),
+      /* @__PURE__ */ jsx2(
+        "input",
+        {
+          type: "range",
+          className: "vpg-slider vpg-slider-min",
+          min: dataMin,
+          max: dataMax,
+          step,
+          value: localMin ?? dataMin,
+          onChange: handleMinSlider,
+          onMouseUp: handleSliderChange,
+          onTouchEnd: handleSliderChange
+        }
+      ),
+      /* @__PURE__ */ jsx2(
+        "input",
+        {
+          type: "range",
+          className: "vpg-slider vpg-slider-max",
+          min: dataMin,
+          max: dataMax,
+          step,
+          value: localMax ?? dataMax,
+          onChange: handleMaxSlider,
+          onMouseUp: handleSliderChange,
+          onTouchEnd: handleSliderChange
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs2("div", { className: "vpg-range-inputs", children: [
+      /* @__PURE__ */ jsxs2("div", { className: "vpg-input-group", children: [
+        /* @__PURE__ */ jsx2("label", { className: "vpg-input-label", children: "Min" }),
+        /* @__PURE__ */ jsx2(
+          "input",
+          {
+            type: "number",
+            className: "vpg-range-input",
+            placeholder: formatValue(dataMin),
+            value: localMin ?? "",
+            step,
+            onChange: handleMinInput,
+            onBlur: handleInputBlur
           }
-          return v;
-        })
-      );
-    },
-    []
-  );
-  const clearConfig = useCallback3(() => {
-    setRowFieldsState([]);
-    setColumnFieldsState([]);
-    setValueFields([]);
-  }, []);
-  const autoSuggestConfig = useCallback3(() => {
-    if (!requirePro("Pivot Table - Auto Suggest")) return;
-    if (availableFields.length === 0) return;
-    const categoricalFields = availableFields.filter((f) => !f.isNumeric && f.uniqueCount < 50);
-    const numericFields = availableFields.filter((f) => f.isNumeric);
-    if (categoricalFields.length > 0 && numericFields.length > 0) {
-      setRowFieldsState([categoricalFields[0].field]);
-      setValueFields([{ field: numericFields[0].field, aggregation: "sum" }]);
+        )
+      ] }),
+      /* @__PURE__ */ jsx2("span", { className: "vpg-input-separator", children: "to" }),
+      /* @__PURE__ */ jsxs2("div", { className: "vpg-input-group", children: [
+        /* @__PURE__ */ jsx2("label", { className: "vpg-input-label", children: "Max" }),
+        /* @__PURE__ */ jsx2(
+          "input",
+          {
+            type: "number",
+            className: "vpg-range-input",
+            placeholder: formatValue(dataMax),
+            value: localMax ?? "",
+            step,
+            onChange: handleMaxInput,
+            onBlur: handleInputBlur
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs2("div", { className: "vpg-range-actions", children: [
+      /* @__PURE__ */ jsxs2(
+        "button",
+        {
+          className: "vpg-range-btn",
+          disabled: !isFilterActive,
+          onClick: clearFilter,
+          children: [
+            /* @__PURE__ */ jsx2("svg", { className: "vpg-icon-xs", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx2(
+              "path",
+              {
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeWidth: 2,
+                d: "M6 18L18 6M6 6l12 12"
+              }
+            ) }),
+            "Clear"
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs2("button", { className: "vpg-range-btn", onClick: setFullRange, children: [
+        /* @__PURE__ */ jsx2("svg", { className: "vpg-icon-xs", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx2(
+          "path",
+          {
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            strokeWidth: 2,
+            d: "M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4"
+          }
+        ) }),
+        "Full Range"
+      ] })
+    ] }),
+    isFilterActive && /* @__PURE__ */ jsxs2("div", { className: "vpg-filter-summary", children: [
+      /* @__PURE__ */ jsx2("svg", { className: "vpg-icon-xs", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx2(
+        "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__ */ jsxs2("span", { children: [
+        "Showing values",
+        " ",
+        localMin !== null && /* @__PURE__ */ jsxs2("strong", { children: [
+          "\u2265",
+          formatValue(localMin)
+        ] }),
+        localMin !== null && localMax !== null && " and ",
+        localMax !== null && /* @__PURE__ */ jsxs2("strong", { children: [
+          "\u2264",
+          formatValue(localMax)
+        ] })
+      ] })
+    ] })
+  ] });
+}
+
+// src/components/ColumnFilter.tsx
+import { Fragment, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function ColumnFilter({
+  columnName,
+  stats,
+  selectedValues,
+  sortDirection,
+  numericRange,
+  onFilter,
+  onSort,
+  onClose,
+  onRangeFilter
+}) {
+  const [searchQuery, setSearchQuery] = useState3("");
+  const [localSelected, setLocalSelected] = useState3(new Set(selectedValues));
+  const dropdownRef = useRef(null);
+  const searchInputRef = useRef(null);
+  const isNumericColumn = stats.type === "number" && stats.numericMin !== void 0 && stats.numericMax !== void 0;
+  const [filterMode, setFilterMode] = useState3(numericRange ? "range" : "values");
+  const [localRange, setLocalRange] = useState3(numericRange ?? null);
+  const hasBlankValues = stats.nullCount > 0;
+  const filteredValues = useMemo3(() => {
+    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 = useMemo3(() => {
+    const values = [...filteredValues];
+    if (hasBlankValues && (!searchQuery || "(blank)".includes(searchQuery.toLowerCase()))) {
+      values.unshift("(blank)");
     }
-  }, [availableFields, requirePro]);
-  const addCalculatedField = useCallback3((field) => {
-    setCalculatedFields((prev) => {
-      const existing = prev.findIndex((f) => f.id === field.id);
-      let updated;
-      if (existing >= 0) {
-        updated = [...prev.slice(0, existing), field, ...prev.slice(existing + 1)];
+    return values;
+  }, [filteredValues, hasBlankValues, searchQuery]);
+  const _isAllSelected = useMemo3(
+    () => allValues.every((v) => localSelected.has(v)),
+    [allValues, localSelected]
+  );
+  const toggleValue = useCallback3((value) => {
+    setLocalSelected((prev) => {
+      const next = new Set(prev);
+      if (next.has(value)) {
+        next.delete(value);
       } else {
-        updated = [...prev, field];
+        next.add(value);
       }
-      saveCalculatedFields(updated);
-      return updated;
-    });
-  }, []);
-  const removeCalculatedField = useCallback3((id) => {
-    setCalculatedFields((prev) => {
-      const updated = prev.filter((f) => f.id !== id);
-      saveCalculatedFields(updated);
-      return updated;
+      return next;
     });
-    setValueFields((prev) => prev.filter((v) => v.field !== `calc:${id}`));
   }, []);
-  return {
-    // State
-    rowFields,
-    columnFields,
-    valueFields,
-    showRowTotals,
-    showColumnTotals,
-    calculatedFields,
-    // Computed
-    availableFields,
-    unassignedFields,
-    isConfigured,
-    pivotResult,
-    // Actions
-    addRowField,
-    removeRowField,
-    addColumnField,
-    removeColumnField,
-    addValueField,
-    removeValueField,
-    updateValueFieldAggregation,
-    clearConfig,
-    setShowRowTotals,
-    setShowColumnTotals,
-    autoSuggestConfig,
-    setRowFields,
-    setColumnFields,
-    addCalculatedField,
-    removeCalculatedField
-  };
-}
-
-// src/hooks/useGridFeatures.ts
-import { useState as useState4, useMemo as useMemo4, useCallback as useCallback4 } from "react";
-import {
-  exportToCSV as coreExportToCSV,
-  exportPivotToCSV as coreExportPivotToCSV,
-  copyToClipboard as coreCopyToClipboard,
-  formatSelectionForClipboard as coreFormatSelection
-} from "@smallwebco/tinypivot-core";
-function exportToCSV(data, columns, options) {
-  coreExportToCSV(data, columns, options);
-}
-function exportPivotToCSV(pivotData, rowFields, columnFields, valueFields, options) {
-  coreExportPivotToCSV(pivotData, rowFields, columnFields, valueFields, options);
-}
-function copyToClipboard(text, onSuccess, onError) {
-  coreCopyToClipboard(text, onSuccess, onError);
-}
-function formatSelectionForClipboard(rows, columns, selectionBounds) {
-  return coreFormatSelection(rows, columns, selectionBounds);
-}
-function usePagination(data, options = {}) {
-  const [pageSize, setPageSize] = useState4(options.pageSize ?? 50);
-  const [currentPage, setCurrentPage] = useState4(options.currentPage ?? 1);
-  const totalPages = useMemo4(
-    () => Math.max(1, Math.ceil(data.length / pageSize)),
-    [data.length, pageSize]
-  );
-  const paginatedData = useMemo4(() => {
-    const start = (currentPage - 1) * pageSize;
-    const end = start + pageSize;
-    return data.slice(start, end);
-  }, [data, currentPage, pageSize]);
-  const startIndex = useMemo4(() => (currentPage - 1) * pageSize + 1, [currentPage, pageSize]);
-  const endIndex = useMemo4(
-    () => Math.min(currentPage * pageSize, data.length),
-    [currentPage, pageSize, data.length]
-  );
-  const goToPage = useCallback4(
-    (page) => {
-      setCurrentPage(Math.max(1, Math.min(page, totalPages)));
-    },
-    [totalPages]
-  );
-  const nextPage = useCallback4(() => {
-    if (currentPage < totalPages) {
-      setCurrentPage((prev) => prev + 1);
-    }
-  }, [currentPage, totalPages]);
-  const prevPage = useCallback4(() => {
-    if (currentPage > 1) {
-      setCurrentPage((prev) => prev - 1);
-    }
-  }, [currentPage]);
-  const firstPage = useCallback4(() => {
-    setCurrentPage(1);
-  }, []);
-  const lastPage = useCallback4(() => {
-    setCurrentPage(totalPages);
-  }, [totalPages]);
-  const updatePageSize = useCallback4((size) => {
-    setPageSize(size);
-    setCurrentPage(1);
-  }, []);
-  return {
-    pageSize,
-    currentPage,
-    totalPages,
-    paginatedData,
-    startIndex,
-    endIndex,
-    goToPage,
-    nextPage,
-    prevPage,
-    firstPage,
-    lastPage,
-    setPageSize: updatePageSize
-  };
-}
-function useGlobalSearch(data, columns) {
-  const [searchTerm, setSearchTerm] = useState4("");
-  const [caseSensitive, setCaseSensitive] = useState4(false);
-  const filteredData = useMemo4(() => {
-    if (!searchTerm.trim()) {
-      return data;
-    }
-    const term = caseSensitive ? searchTerm.trim() : searchTerm.trim().toLowerCase();
-    return data.filter((row) => {
-      for (const col of columns) {
-        const value = row[col];
-        if (value === null || value === void 0) continue;
-        const strValue = caseSensitive ? String(value) : String(value).toLowerCase();
-        if (strValue.includes(term)) {
-          return true;
-        }
-      }
-      return false;
-    });
-  }, [data, columns, searchTerm, caseSensitive]);
-  const clearSearch = useCallback4(() => {
-    setSearchTerm("");
-  }, []);
-  return {
-    searchTerm,
-    setSearchTerm,
-    caseSensitive,
-    setCaseSensitive,
-    filteredData,
-    clearSearch
-  };
-}
-function useRowSelection(data) {
-  const [selectedRowIndices, setSelectedRowIndices] = useState4(/* @__PURE__ */ new Set());
-  const selectedRows = useMemo4(() => {
-    return Array.from(selectedRowIndices).sort((a, b) => a - b).map((idx) => data[idx]).filter(Boolean);
-  }, [data, selectedRowIndices]);
-  const allSelected = useMemo4(() => {
-    return data.length > 0 && selectedRowIndices.size === data.length;
-  }, [data.length, selectedRowIndices.size]);
-  const someSelected = useMemo4(() => {
-    return selectedRowIndices.size > 0 && selectedRowIndices.size < data.length;
-  }, [data.length, selectedRowIndices.size]);
-  const toggleRow = useCallback4((index) => {
-    setSelectedRowIndices((prev) => {
+  const selectAll = useCallback3(() => {
+    setLocalSelected((prev) => {
       const next = new Set(prev);
-      if (next.has(index)) {
-        next.delete(index);
-      } else {
-        next.add(index);
+      for (const value of allValues) {
+        next.add(value);
       }
       return next;
     });
+  }, [allValues]);
+  const clearAll = useCallback3(() => {
+    setLocalSelected(/* @__PURE__ */ new Set());
   }, []);
-  const selectRow = useCallback4((index) => {
-    setSelectedRowIndices((prev) => /* @__PURE__ */ new Set([...prev, index]));
-  }, []);
-  const deselectRow = useCallback4((index) => {
-    setSelectedRowIndices((prev) => {
-      const next = new Set(prev);
-      next.delete(index);
-      return next;
-    });
-  }, []);
-  const selectAll = useCallback4(() => {
-    setSelectedRowIndices(new Set(data.map((_, idx) => idx)));
-  }, [data]);
-  const deselectAll = useCallback4(() => {
-    setSelectedRowIndices(/* @__PURE__ */ new Set());
-  }, []);
-  const toggleAll = useCallback4(() => {
-    if (allSelected) {
-      deselectAll();
+  const applyFilter = useCallback3(() => {
+    if (localSelected.size === 0) {
+      onFilter([]);
     } else {
-      selectAll();
+      onFilter(Array.from(localSelected));
     }
-  }, [allSelected, selectAll, deselectAll]);
-  const isSelected = useCallback4(
-    (index) => {
-      return selectedRowIndices.has(index);
-    },
-    [selectedRowIndices]
-  );
-  const selectRange = useCallback4((startIndex, endIndex) => {
-    const min = Math.min(startIndex, endIndex);
-    const max = Math.max(startIndex, endIndex);
-    setSelectedRowIndices((prev) => {
-      const next = new Set(prev);
-      for (let i = min; i <= max; i++) {
-        next.add(i);
-      }
-      return next;
-    });
+    onClose();
+  }, [localSelected, onFilter, onClose]);
+  const sortAscending = useCallback3(() => {
+    onSort(sortDirection === "asc" ? null : "asc");
+  }, [sortDirection, onSort]);
+  const sortDescending = useCallback3(() => {
+    onSort(sortDirection === "desc" ? null : "desc");
+  }, [sortDirection, onSort]);
+  const clearFilter = useCallback3(() => {
+    setLocalSelected(/* @__PURE__ */ new Set());
+    onFilter([]);
+    onClose();
+  }, [onFilter, onClose]);
+  const handleRangeChange = useCallback3((range) => {
+    setLocalRange(range);
   }, []);
-  return {
-    selectedRowIndices,
-    selectedRows,
-    allSelected,
-    someSelected,
-    toggleRow,
-    selectRow,
-    deselectRow,
-    selectAll,
-    deselectAll,
-    toggleAll,
-    isSelected,
-    selectRange
-  };
-}
-function useColumnResize(initialWidths, minWidth = 60, maxWidth = 600) {
-  const [columnWidths, setColumnWidths] = useState4({ ...initialWidths });
-  const [isResizing, setIsResizing] = useState4(false);
-  const [resizingColumn, setResizingColumn] = useState4(null);
-  const startResize = useCallback4(
-    (columnId, event) => {
-      setIsResizing(true);
-      setResizingColumn(columnId);
-      const startX = event.clientX;
-      const startWidth = columnWidths[columnId] || 150;
-      const handleMouseMove = (e) => {
-        const diff = e.clientX - startX;
-        const newWidth = Math.max(minWidth, Math.min(maxWidth, startWidth + diff));
-        setColumnWidths((prev) => ({
-          ...prev,
-          [columnId]: newWidth
-        }));
-      };
-      const handleMouseUp = () => {
-        setIsResizing(false);
-        setResizingColumn(null);
-        document.removeEventListener("mousemove", handleMouseMove);
-        document.removeEventListener("mouseup", handleMouseUp);
-      };
-      document.addEventListener("mousemove", handleMouseMove);
-      document.addEventListener("mouseup", handleMouseUp);
-    },
-    [columnWidths, minWidth, maxWidth]
-  );
-  const resetColumnWidth = useCallback4(
-    (columnId) => {
-      if (initialWidths[columnId]) {
-        setColumnWidths((prev) => ({
-          ...prev,
-          [columnId]: initialWidths[columnId]
-        }));
+  const applyRangeFilter = useCallback3(() => {
+    onRangeFilter?.(localRange);
+    onClose();
+  }, [localRange, onRangeFilter, onClose]);
+  const clearRangeFilter = useCallback3(() => {
+    setLocalRange(null);
+    onRangeFilter?.(null);
+    onClose();
+  }, [onRangeFilter, onClose]);
+  useEffect3(() => {
+    const handleClickOutside = (event) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+        onClose();
       }
-    },
-    [initialWidths]
-  );
-  const resetAllWidths = useCallback4(() => {
-    setColumnWidths({ ...initialWidths });
-  }, [initialWidths]);
-  return {
-    columnWidths,
-    setColumnWidths,
-    isResizing,
-    resizingColumn,
-    startResize,
-    resetColumnWidth,
-    resetAllWidths
-  };
-}
-
-// src/components/ColumnFilter.tsx
-import { useState as useState6, useEffect as useEffect4, useRef, useCallback as useCallback6, useMemo as useMemo6 } from "react";
-
-// src/components/NumericRangeFilter.tsx
-import { useState as useState5, useCallback as useCallback5, useMemo as useMemo5, useEffect as useEffect3 } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-function NumericRangeFilter({
-  dataMin,
-  dataMax,
-  currentRange,
-  onChange
-}) {
-  const [localMin, setLocalMin] = useState5(currentRange?.min ?? null);
-  const [localMax, setLocalMax] = useState5(currentRange?.max ?? null);
-  const step = useMemo5(() => {
-    const range = dataMax - dataMin;
-    if (range === 0) return 1;
-    if (range <= 1) return 0.01;
-    if (range <= 10) return 0.1;
-    if (range <= 100) return 1;
-    if (range <= 1e3) return 10;
-    return Math.pow(10, Math.floor(Math.log10(range)) - 2);
-  }, [dataMin, dataMax]);
-  const formatValue = useCallback5((val) => {
-    if (val === null) return "";
-    if (Number.isInteger(val)) return val.toLocaleString();
-    return val.toLocaleString(void 0, { maximumFractionDigits: 2 });
-  }, []);
-  const isFilterActive = localMin !== null || localMax !== null;
-  const minPercent = useMemo5(() => {
-    if (localMin === null || dataMax === dataMin) return 0;
-    return (localMin - dataMin) / (dataMax - dataMin) * 100;
-  }, [localMin, dataMin, dataMax]);
-  const maxPercent = useMemo5(() => {
-    if (localMax === null || dataMax === dataMin) return 100;
-    return (localMax - dataMin) / (dataMax - dataMin) * 100;
-  }, [localMax, dataMin, dataMax]);
-  const handleMinSlider = useCallback5((event) => {
-    const value = Number.parseFloat(event.target.value);
-    setLocalMin((prev) => {
-      if (localMax !== null && value > localMax) {
-        return localMax;
-      }
-      return value;
-    });
-  }, [localMax]);
-  const handleMaxSlider = useCallback5((event) => {
-    const value = Number.parseFloat(event.target.value);
-    setLocalMax((prev) => {
-      if (localMin !== null && value < localMin) {
-        return localMin;
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [onClose]);
+  useEffect3(() => {
+    const handleKeydown = (event) => {
+      if (event.key === "Escape") {
+        onClose();
+      } else if (event.key === "Enter" && event.ctrlKey) {
+        applyFilter();
       }
-      return value;
-    });
-  }, [localMin]);
-  const handleSliderChange = useCallback5(() => {
-    if (localMin === null && localMax === null) {
-      onChange(null);
-    } else {
-      onChange({ min: localMin, max: localMax });
-    }
-  }, [localMin, localMax, onChange]);
-  const handleMinInput = useCallback5((event) => {
-    const value = event.target.value === "" ? null : Number.parseFloat(event.target.value);
-    if (value !== null && !Number.isNaN(value)) {
-      setLocalMin(Math.max(dataMin, Math.min(value, localMax ?? dataMax)));
-    } else if (value === null) {
-      setLocalMin(null);
-    }
-  }, [dataMin, dataMax, localMax]);
-  const handleMaxInput = useCallback5((event) => {
-    const value = event.target.value === "" ? null : Number.parseFloat(event.target.value);
-    if (value !== null && !Number.isNaN(value)) {
-      setLocalMax(Math.min(dataMax, Math.max(value, localMin ?? dataMin)));
-    } else if (value === null) {
-      setLocalMax(null);
-    }
-  }, [dataMin, dataMax, localMin]);
-  const handleInputBlur = useCallback5(() => {
-    if (localMin === null && localMax === null) {
-      onChange(null);
-    } else {
-      onChange({ min: localMin, max: localMax });
-    }
-  }, [localMin, localMax, onChange]);
-  const clearFilter = useCallback5(() => {
-    setLocalMin(null);
-    setLocalMax(null);
-    onChange(null);
-  }, [onChange]);
-  const setFullRange = useCallback5(() => {
-    setLocalMin(dataMin);
-    setLocalMax(dataMax);
-    onChange({ min: dataMin, max: dataMax });
-  }, [dataMin, dataMax, onChange]);
+    };
+    document.addEventListener("keydown", handleKeydown);
+    return () => document.removeEventListener("keydown", handleKeydown);
+  }, [onClose, applyFilter]);
   useEffect3(() => {
-    setLocalMin(currentRange?.min ?? null);
-    setLocalMax(currentRange?.max ?? null);
-  }, [currentRange]);
-  return /* @__PURE__ */ jsxs("div", { className: "vpg-range-filter", children: [
-    /* @__PURE__ */ jsxs("div", { className: "vpg-range-info", children: [
-      /* @__PURE__ */ jsx("span", { className: "vpg-range-label", children: "Data range:" }),
-      /* @__PURE__ */ jsxs("span", { className: "vpg-range-bounds", children: [
-        formatValue(dataMin),
-        " \u2013 ",
-        formatValue(dataMax)
+    searchInputRef.current?.focus();
+  }, []);
+  useEffect3(() => {
+    setLocalSelected(new Set(selectedValues));
+  }, [selectedValues]);
+  useEffect3(() => {
+    setLocalRange(numericRange ?? null);
+    if (numericRange) {
+      setFilterMode("range");
+    }
+  }, [numericRange]);
+  return /* @__PURE__ */ jsxs3("div", { ref: dropdownRef, className: "vpg-filter-dropdown", children: [
+    /* @__PURE__ */ jsxs3("div", { className: "vpg-filter-header", children: [
+      /* @__PURE__ */ jsx3("span", { className: "vpg-filter-title", children: columnName }),
+      /* @__PURE__ */ jsxs3("span", { className: "vpg-filter-count", children: [
+        stats.uniqueValues.length.toLocaleString(),
+        " ",
+        "unique"
       ] })
     ] }),
-    /* @__PURE__ */ jsxs("div", { className: "vpg-slider-container", children: [
-      /* @__PURE__ */ jsx("div", { className: "vpg-slider-track", children: /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: "vpg-slider-fill",
-          style: {
-            left: `${minPercent}%`,
-            right: `${100 - maxPercent}%`
-          }
-        }
-      ) }),
-      /* @__PURE__ */ jsx(
-        "input",
+    /* @__PURE__ */ jsxs3("div", { className: "vpg-sort-controls", children: [
+      /* @__PURE__ */ jsxs3(
+        "button",
         {
-          type: "range",
-          className: "vpg-slider vpg-slider-min",
-          min: dataMin,
-          max: dataMax,
-          step,
-          value: localMin ?? dataMin,
-          onChange: handleMinSlider,
-          onMouseUp: handleSliderChange,
-          onTouchEnd: handleSliderChange
+          className: `vpg-sort-btn ${sortDirection === "asc" ? "active" : ""}`,
+          title: isNumericColumn ? "Sort Low to High" : "Sort A to Z",
+          onClick: sortAscending,
+          children: [
+            /* @__PURE__ */ jsx3("svg", { className: "vpg-icon-sm", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx3(
+              "path",
+              {
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeWidth: 2,
+                d: "M3 4h13M3 8h9m-9 4h6m4 0l4-4m0 0l4 4m-4-4v12"
+              }
+            ) }),
+            /* @__PURE__ */ jsx3("span", { children: isNumericColumn ? "1\u21929" : "A\u2192Z" })
+          ]
         }
       ),
-      /* @__PURE__ */ jsx(
-        "input",
+      /* @__PURE__ */ jsxs3(
+        "button",
         {
-          type: "range",
-          className: "vpg-slider vpg-slider-max",
-          min: dataMin,
-          max: dataMax,
-          step,
-          value: localMax ?? dataMax,
-          onChange: handleMaxSlider,
-          onMouseUp: handleSliderChange,
-          onTouchEnd: handleSliderChange
+          className: `vpg-sort-btn ${sortDirection === "desc" ? "active" : ""}`,
+          title: isNumericColumn ? "Sort High to Low" : "Sort Z to A",
+          onClick: sortDescending,
+          children: [
+            /* @__PURE__ */ jsx3("svg", { className: "vpg-icon-sm", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx3(
+              "path",
+              {
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeWidth: 2,
+                d: "M3 4h13M3 8h9m-9 4h9m5-4v12m0 0l-4-4m4 4l4-4"
+              }
+            ) }),
+            /* @__PURE__ */ jsx3("span", { children: isNumericColumn ? "9\u21921" : "Z\u2192A" })
+          ]
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs("div", { className: "vpg-range-inputs", children: [
-      /* @__PURE__ */ jsxs("div", { className: "vpg-input-group", children: [
-        /* @__PURE__ */ jsx("label", { className: "vpg-input-label", children: "Min" }),
-        /* @__PURE__ */ jsx(
-          "input",
-          {
-            type: "number",
-            className: "vpg-range-input",
-            placeholder: formatValue(dataMin),
-            value: localMin ?? "",
-            step,
-            onChange: handleMinInput,
-            onBlur: handleInputBlur
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsx("span", { className: "vpg-input-separator", children: "to" }),
-      /* @__PURE__ */ jsxs("div", { className: "vpg-input-group", children: [
-        /* @__PURE__ */ jsx("label", { className: "vpg-input-label", children: "Max" }),
-        /* @__PURE__ */ jsx(
-          "input",
-          {
-            type: "number",
-            className: "vpg-range-input",
-            placeholder: formatValue(dataMax),
-            value: localMax ?? "",
-            step,
-            onChange: handleMaxInput,
-            onBlur: handleInputBlur
-          }
-        )
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: "vpg-range-actions", children: [
-      /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ jsx3("div", { className: "vpg-divider" }),
+    isNumericColumn && /* @__PURE__ */ jsxs3("div", { className: "vpg-filter-tabs", children: [
+      /* @__PURE__ */ jsxs3(
         "button",
         {
-          className: "vpg-range-btn",
-          disabled: !isFilterActive,
-          onClick: clearFilter,
+          className: `vpg-tab-btn ${filterMode === "values" ? "active" : ""}`,
+          onClick: () => setFilterMode("values"),
           children: [
-            /* @__PURE__ */ jsx("svg", { className: "vpg-icon-xs", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx(
+            /* @__PURE__ */ jsx3("svg", { className: "vpg-icon-sm", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx3(
               "path",
               {
                 strokeLinecap: "round",
                 strokeLinejoin: "round",
                 strokeWidth: 2,
-                d: "M6 18L18 6M6 6l12 12"
+                d: "M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"
               }
             ) }),
-            "Clear"
+            "Values"
           ]
         }
       ),
-      /* @__PURE__ */ jsxs("button", { className: "vpg-range-btn", onClick: setFullRange, children: [
-        /* @__PURE__ */ jsx("svg", { className: "vpg-icon-xs", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsxs3(
+        "button",
+        {
+          className: `vpg-tab-btn ${filterMode === "range" ? "active" : ""}`,
+          onClick: () => setFilterMode("range"),
+          children: [
+            /* @__PURE__ */ jsx3("svg", { className: "vpg-icon-sm", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx3(
+              "path",
+              {
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeWidth: 2,
+                d: "M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01"
+              }
+            ) }),
+            "Range"
+          ]
+        }
+      )
+    ] }),
+    (!isNumericColumn || filterMode === "values") && /* @__PURE__ */ jsxs3(Fragment, { children: [
+      /* @__PURE__ */ jsxs3("div", { className: "vpg-search-container", children: [
+        /* @__PURE__ */ jsx3("svg", { className: "vpg-search-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx3(
           "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"
+            d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
           }
         ) }),
-        "Full Range"
-      ] })
-    ] }),
-    isFilterActive && /* @__PURE__ */ jsxs("div", { className: "vpg-filter-summary", children: [
-      /* @__PURE__ */ jsx("svg", { className: "vpg-icon-xs", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx(
-        "path",
-        {
-          strokeLinecap: "round",
-          strokeLinejoin: "round",
-          strokeWidth: 2,
-          d: "M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"
-        }
-      ) }),
-      /* @__PURE__ */ jsxs("span", { children: [
-        "Showing values",
-        " ",
-        localMin !== null && /* @__PURE__ */ jsxs("strong", { children: [
-          "\u2265 ",
-          formatValue(localMin)
+        /* @__PURE__ */ jsx3(
+          "input",
+          {
+            ref: searchInputRef,
+            type: "text",
+            value: searchQuery,
+            onChange: (e) => setSearchQuery(e.target.value),
+            placeholder: "Search values...",
+            className: "vpg-search-input"
+          }
+        ),
+        searchQuery && /* @__PURE__ */ jsx3("button", { className: "vpg-clear-search", onClick: () => setSearchQuery(""), children: "\xD7" })
+      ] }),
+      /* @__PURE__ */ jsxs3("div", { className: "vpg-bulk-actions", children: [
+        /* @__PURE__ */ jsxs3("button", { className: "vpg-bulk-btn", onClick: selectAll, children: [
+          /* @__PURE__ */ jsx3("svg", { className: "vpg-icon-sm", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx3(
+            "path",
+            {
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              strokeWidth: 2,
+              d: "M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
+            }
+          ) }),
+          "Select All"
         ] }),
-        localMin !== null && localMax !== null && " and ",
-        localMax !== null && /* @__PURE__ */ jsxs("strong", { children: [
-          "\u2264 ",
-          formatValue(localMax)
-        ] })
-      ] })
-    ] })
-  ] });
-}
-
-// src/components/ColumnFilter.tsx
-import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-function ColumnFilter({
-  columnName,
-  stats,
-  selectedValues,
-  sortDirection,
-  numericRange,
-  onFilter,
-  onSort,
-  onClose,
-  onRangeFilter
-}) {
-  const [searchQuery, setSearchQuery] = useState6("");
-  const [localSelected, setLocalSelected] = useState6(new Set(selectedValues));
-  const dropdownRef = useRef(null);
-  const searchInputRef = useRef(null);
-  const isNumericColumn = stats.type === "number" && stats.numericMin !== void 0 && stats.numericMax !== void 0;
-  const [filterMode, setFilterMode] = useState6(numericRange ? "range" : "values");
-  const [localRange, setLocalRange] = useState6(numericRange ?? null);
-  const hasBlankValues = stats.nullCount > 0;
-  const filteredValues = useMemo6(() => {
-    const values = stats.uniqueValues;
-    if (!searchQuery) return values;
-    const query = searchQuery.toLowerCase();
-    return values.filter((v) => v.toLowerCase().includes(query));
-  }, [stats.uniqueValues, searchQuery]);
-  const allValues = useMemo6(() => {
-    const values = [...filteredValues];
-    if (hasBlankValues && (!searchQuery || "(blank)".includes(searchQuery.toLowerCase()))) {
-      values.unshift("(blank)");
-    }
-    return values;
-  }, [filteredValues, hasBlankValues, searchQuery]);
-  const isAllSelected = useMemo6(
-    () => allValues.every((v) => localSelected.has(v)),
-    [allValues, localSelected]
-  );
-  const toggleValue = useCallback6((value) => {
-    setLocalSelected((prev) => {
-      const next = new Set(prev);
-      if (next.has(value)) {
-        next.delete(value);
-      } else {
-        next.add(value);
-      }
-      return next;
-    });
-  }, []);
-  const selectAll = useCallback6(() => {
-    setLocalSelected((prev) => {
-      const next = new Set(prev);
-      for (const value of allValues) {
-        next.add(value);
-      }
-      return next;
-    });
-  }, [allValues]);
-  const clearAll = useCallback6(() => {
-    setLocalSelected(/* @__PURE__ */ new Set());
-  }, []);
-  const applyFilter = useCallback6(() => {
-    if (localSelected.size === 0) {
-      onFilter([]);
-    } else {
-      onFilter(Array.from(localSelected));
-    }
-    onClose();
-  }, [localSelected, onFilter, onClose]);
-  const sortAscending = useCallback6(() => {
-    onSort(sortDirection === "asc" ? null : "asc");
-  }, [sortDirection, onSort]);
-  const sortDescending = useCallback6(() => {
-    onSort(sortDirection === "desc" ? null : "desc");
-  }, [sortDirection, onSort]);
-  const clearFilter = useCallback6(() => {
-    setLocalSelected(/* @__PURE__ */ new Set());
-    onFilter([]);
-    onClose();
-  }, [onFilter, onClose]);
-  const handleRangeChange = useCallback6((range) => {
-    setLocalRange(range);
-  }, []);
-  const applyRangeFilter = useCallback6(() => {
-    onRangeFilter?.(localRange);
-    onClose();
-  }, [localRange, onRangeFilter, onClose]);
-  const clearRangeFilter = useCallback6(() => {
-    setLocalRange(null);
-    onRangeFilter?.(null);
-    onClose();
-  }, [onRangeFilter, onClose]);
-  useEffect4(() => {
-    const handleClickOutside = (event) => {
-      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
-        onClose();
-      }
-    };
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => document.removeEventListener("mousedown", handleClickOutside);
-  }, [onClose]);
-  useEffect4(() => {
-    const handleKeydown = (event) => {
-      if (event.key === "Escape") {
-        onClose();
-      } else if (event.key === "Enter" && event.ctrlKey) {
-        applyFilter();
-      }
-    };
-    document.addEventListener("keydown", handleKeydown);
-    return () => document.removeEventListener("keydown", handleKeydown);
-  }, [onClose, applyFilter]);
-  useEffect4(() => {
-    searchInputRef.current?.focus();
-  }, []);
-  useEffect4(() => {
-    setLocalSelected(new Set(selectedValues));
-  }, [selectedValues]);
-  useEffect4(() => {
-    setLocalRange(numericRange ?? null);
-    if (numericRange) {
-      setFilterMode("range");
-    }
-  }, [numericRange]);
-  return /* @__PURE__ */ jsxs2("div", { ref: dropdownRef, className: "vpg-filter-dropdown", children: [
-    /* @__PURE__ */ jsxs2("div", { className: "vpg-filter-header", children: [
-      /* @__PURE__ */ jsx2("span", { className: "vpg-filter-title", children: columnName }),
-      /* @__PURE__ */ jsxs2("span", { className: "vpg-filter-count", children: [
-        stats.uniqueValues.length.toLocaleString(),
-        " unique"
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxs2("div", { className: "vpg-sort-controls", children: [
-      /* @__PURE__ */ jsxs2(
-        "button",
-        {
-          className: `vpg-sort-btn ${sortDirection === "asc" ? "active" : ""}`,
-          title: isNumericColumn ? "Sort Low to High" : "Sort A to Z",
-          onClick: sortAscending,
-          children: [
-            /* @__PURE__ */ jsx2("svg", { className: "vpg-icon-sm", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx2(
-              "path",
-              {
-                strokeLinecap: "round",
-                strokeLinejoin: "round",
-                strokeWidth: 2,
-                d: "M3 4h13M3 8h9m-9 4h6m4 0l4-4m0 0l4 4m-4-4v12"
-              }
-            ) }),
-            /* @__PURE__ */ jsx2("span", { children: isNumericColumn ? "1\u21929" : "A\u2192Z" })
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsxs2(
-        "button",
-        {
-          className: `vpg-sort-btn ${sortDirection === "desc" ? "active" : ""}`,
-          title: isNumericColumn ? "Sort High to Low" : "Sort Z to A",
-          onClick: sortDescending,
-          children: [
-            /* @__PURE__ */ jsx2("svg", { className: "vpg-icon-sm", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx2(
-              "path",
-              {
-                strokeLinecap: "round",
-                strokeLinejoin: "round",
-                strokeWidth: 2,
-                d: "M3 4h13M3 8h9m-9 4h9m5-4v12m0 0l-4-4m4 4l4-4"
-              }
-            ) }),
-            /* @__PURE__ */ jsx2("span", { children: isNumericColumn ? "9\u21921" : "Z\u2192A" })
-          ]
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsx2("div", { className: "vpg-divider" }),
-    isNumericColumn && /* @__PURE__ */ jsxs2("div", { className: "vpg-filter-tabs", children: [
-      /* @__PURE__ */ jsxs2(
-        "button",
-        {
-          className: `vpg-tab-btn ${filterMode === "values" ? "active" : ""}`,
-          onClick: () => setFilterMode("values"),
-          children: [
-            /* @__PURE__ */ jsx2("svg", { className: "vpg-icon-sm", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx2(
-              "path",
-              {
-                strokeLinecap: "round",
-                strokeLinejoin: "round",
-                strokeWidth: 2,
-                d: "M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"
-              }
-            ) }),
-            "Values"
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsxs2(
-        "button",
-        {
-          className: `vpg-tab-btn ${filterMode === "range" ? "active" : ""}`,
-          onClick: () => setFilterMode("range"),
-          children: [
-            /* @__PURE__ */ jsx2("svg", { className: "vpg-icon-sm", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx2(
-              "path",
-              {
-                strokeLinecap: "round",
-                strokeLinejoin: "round",
-                strokeWidth: 2,
-                d: "M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01"
-              }
-            ) }),
-            "Range"
-          ]
-        }
-      )
-    ] }),
-    (!isNumericColumn || filterMode === "values") && /* @__PURE__ */ jsxs2(Fragment, { children: [
-      /* @__PURE__ */ jsxs2("div", { className: "vpg-search-container", children: [
-        /* @__PURE__ */ jsx2("svg", { className: "vpg-search-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx2(
-          "path",
-          {
-            strokeLinecap: "round",
-            strokeLinejoin: "round",
-            strokeWidth: 2,
-            d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
-          }
-        ) }),
-        /* @__PURE__ */ jsx2(
-          "input",
-          {
-            ref: searchInputRef,
-            type: "text",
-            value: searchQuery,
-            onChange: (e) => setSearchQuery(e.target.value),
-            placeholder: "Search values...",
-            className: "vpg-search-input"
-          }
-        ),
-        searchQuery && /* @__PURE__ */ jsx2("button", { className: "vpg-clear-search", onClick: () => setSearchQuery(""), children: "\xD7" })
-      ] }),
-      /* @__PURE__ */ jsxs2("div", { className: "vpg-bulk-actions", children: [
-        /* @__PURE__ */ jsxs2("button", { className: "vpg-bulk-btn", onClick: selectAll, children: [
-          /* @__PURE__ */ jsx2("svg", { className: "vpg-icon-sm", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx2(
-            "path",
-            {
-              strokeLinecap: "round",
-              strokeLinejoin: "round",
-              strokeWidth: 2,
-              d: "M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
-            }
-          ) }),
-          "Select All"
-        ] }),
-        /* @__PURE__ */ jsxs2("button", { className: "vpg-bulk-btn", onClick: clearAll, children: [
-          /* @__PURE__ */ jsx2("svg", { className: "vpg-icon-sm", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx2(
+        /* @__PURE__ */ jsxs3("button", { className: "vpg-bulk-btn", onClick: clearAll, children: [
+          /* @__PURE__ */ jsx3("svg", { className: "vpg-icon-sm", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx3(
             "path",
             {
               strokeLinecap: "round",
@@ -1302,13 +707,13 @@ function ColumnFilter({
           "Clear All"
         ] })
       ] }),
-      /* @__PURE__ */ jsxs2("div", { className: "vpg-values-list", children: [
-        allValues.map((value) => /* @__PURE__ */ jsxs2(
+      /* @__PURE__ */ jsxs3("div", { className: "vpg-values-list", children: [
+        allValues.map((value) => /* @__PURE__ */ jsxs3(
           "label",
           {
             className: `vpg-value-item ${localSelected.has(value) ? "selected" : ""}`,
             children: [
-              /* @__PURE__ */ jsx2(
+              /* @__PURE__ */ jsx3(
                 "input",
                 {
                   type: "checkbox",
@@ -1317,20 +722,20 @@ function ColumnFilter({
                   className: "vpg-value-checkbox"
                 }
               ),
-              /* @__PURE__ */ jsx2("span", { className: `vpg-value-text ${value === "(blank)" ? "vpg-blank" : ""}`, children: value })
+              /* @__PURE__ */ jsx3("span", { className: `vpg-value-text ${value === "(blank)" ? "vpg-blank" : ""}`, children: value })
             ]
           },
           value
         )),
-        allValues.length === 0 && /* @__PURE__ */ jsx2("div", { className: "vpg-no-results", children: "No matching values" })
+        allValues.length === 0 && /* @__PURE__ */ jsx3("div", { className: "vpg-no-results", children: "No matching values" })
       ] }),
-      /* @__PURE__ */ jsxs2("div", { className: "vpg-filter-footer", children: [
-        /* @__PURE__ */ jsx2("button", { className: "vpg-btn-clear", onClick: clearFilter, children: "Clear Filter" }),
-        /* @__PURE__ */ jsx2("button", { className: "vpg-btn-apply", onClick: applyFilter, children: "Apply" })
+      /* @__PURE__ */ jsxs3("div", { className: "vpg-filter-footer", children: [
+        /* @__PURE__ */ jsx3("button", { className: "vpg-btn-clear", onClick: clearFilter, children: "Clear Filter" }),
+        /* @__PURE__ */ jsx3("button", { className: "vpg-btn-apply", onClick: applyFilter, children: "Apply" })
       ] })
     ] }),
-    isNumericColumn && filterMode === "range" && /* @__PURE__ */ jsxs2(Fragment, { children: [
-      /* @__PURE__ */ jsx2(
+    isNumericColumn && filterMode === "range" && /* @__PURE__ */ jsxs3(Fragment, { children: [
+      /* @__PURE__ */ jsx3(
         NumericRangeFilter,
         {
           dataMin: stats.numericMin,
@@ -1339,210 +744,836 @@ function ColumnFilter({
           onChange: handleRangeChange
         }
       ),
-      /* @__PURE__ */ jsxs2("div", { className: "vpg-filter-footer", children: [
-        /* @__PURE__ */ jsx2("button", { className: "vpg-btn-clear", onClick: clearRangeFilter, children: "Clear Filter" }),
-        /* @__PURE__ */ jsx2("button", { className: "vpg-btn-apply", onClick: applyRangeFilter, children: "Apply" })
+      /* @__PURE__ */ jsxs3("div", { className: "vpg-filter-footer", children: [
+        /* @__PURE__ */ jsx3("button", { className: "vpg-btn-clear", onClick: clearRangeFilter, children: "Clear Filter" }),
+        /* @__PURE__ */ jsx3("button", { className: "vpg-btn-apply", onClick: applyRangeFilter, children: "Apply" })
       ] })
     ] })
   ] });
 }
 
-// src/components/PivotConfig.tsx
-import { useState as useState8, useMemo as useMemo8, useCallback as useCallback8 } from "react";
-import { AGGREGATION_OPTIONS, getAggregationSymbol } from "@smallwebco/tinypivot-core";
+// src/components/DataGrid.tsx
+import { useCallback as useCallback10, useEffect as useEffect7, useMemo as useMemo10, useRef as useRef2, useState as useState10 } from "react";
+import { createPortal as createPortal2 } from "react-dom";
 
-// src/components/CalculatedFieldModal.tsx
-import { useState as useState7, useEffect as useEffect5, useMemo as useMemo7, useCallback as useCallback7 } from "react";
-import { createPortal } from "react-dom";
-import { validateSimpleFormula } from "@smallwebco/tinypivot-core";
-import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
-function CalculatedFieldModal({
-  show,
-  availableFields,
-  existingField,
-  onClose,
-  onSave
-}) {
-  const [name, setName] = useState7("");
-  const [formula, setFormula] = useState7("");
-  const [formatAs, setFormatAs] = useState7("number");
-  const [decimals, setDecimals] = useState7(2);
-  const [error, setError] = useState7(null);
-  useEffect5(() => {
-    if (show) {
-      if (existingField) {
-        setName(existingField.name);
-        setFormula(existingField.formula);
-        setFormatAs(existingField.formatAs || "number");
-        setDecimals(existingField.decimals ?? 2);
-      } else {
-        setName("");
-        setFormula("");
-        setFormatAs("number");
-        setDecimals(2);
+// src/hooks/useExcelGrid.ts
+import { formatCellValue, getColumnUniqueValues, isNumericRange } from "@smallwebco/tinypivot-core";
+import {
+  getCoreRowModel,
+  getFilteredRowModel,
+  getSortedRowModel,
+  useReactTable
+} from "@tanstack/react-table";
+import { useCallback as useCallback4, useEffect as useEffect4, useMemo as useMemo4, useState as useState4 } from "react";
+var multiSelectFilter = (row, columnId, filterValue) => {
+  if (!filterValue)
+    return true;
+  if (isNumericRange(filterValue)) {
+    const cellValue = row.getValue(columnId);
+    if (cellValue === null || cellValue === void 0 || cellValue === "") {
+      return false;
+    }
+    const num = typeof cellValue === "number" ? cellValue : Number.parseFloat(String(cellValue));
+    if (Number.isNaN(num))
+      return false;
+    const { min, max } = filterValue;
+    if (min !== null && num < min)
+      return false;
+    if (max !== null && num > max)
+      return false;
+    return true;
+  }
+  if (Array.isArray(filterValue) && filterValue.length > 0) {
+    const cellValue = row.getValue(columnId);
+    const cellString = cellValue === null || cellValue === void 0 || cellValue === "" ? "(blank)" : String(cellValue);
+    return filterValue.includes(cellString);
+  }
+  return true;
+};
+function useExcelGrid(options) {
+  const { data, enableSorting = true, enableFiltering = true } = options;
+  const [sorting, setSorting] = useState4([]);
+  const [columnFilters, setColumnFilters] = useState4([]);
+  const [columnVisibility, setColumnVisibility] = useState4({});
+  const [globalFilter, setGlobalFilter] = useState4("");
+  const [columnStatsCache, setColumnStatsCache] = useState4({});
+  const dataSignature = useMemo4(
+    () => `${Date.now()}-${Math.random().toString(36).slice(2)}`,
+    [data]
+  );
+  const columnKeys = useMemo4(() => {
+    if (data.length === 0)
+      return [];
+    return Object.keys(data[0]);
+  }, [data]);
+  const getColumnStats = useCallback4(
+    (columnKey) => {
+      const cacheKey = `${columnKey}-${dataSignature}`;
+      if (!columnStatsCache[cacheKey]) {
+        const stats = getColumnUniqueValues(data, columnKey);
+        setColumnStatsCache((prev) => ({ ...prev, [cacheKey]: stats }));
+        return stats;
+      }
+      return columnStatsCache[cacheKey];
+    },
+    [data, columnStatsCache, dataSignature]
+  );
+  const clearStatsCache = useCallback4(() => {
+    setColumnStatsCache({});
+  }, []);
+  useEffect4(() => {
+    clearStatsCache();
+  }, [dataSignature, clearStatsCache]);
+  const columnDefs = useMemo4(() => {
+    return columnKeys.map((key) => {
+      const stats = getColumnStats(key);
+      return {
+        id: key,
+        accessorKey: key,
+        header: key,
+        cell: (info) => formatCellValue(info.getValue(), stats.type),
+        filterFn: multiSelectFilter,
+        meta: {
+          type: stats.type,
+          uniqueCount: stats.uniqueValues.length
+        }
+      };
+    });
+  }, [columnKeys, getColumnStats]);
+  const table = useReactTable({
+    data,
+    columns: columnDefs,
+    state: {
+      sorting,
+      columnFilters,
+      columnVisibility,
+      globalFilter
+    },
+    onSortingChange: setSorting,
+    onColumnFiltersChange: setColumnFilters,
+    onColumnVisibilityChange: setColumnVisibility,
+    onGlobalFilterChange: setGlobalFilter,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: enableSorting ? getSortedRowModel() : void 0,
+    getFilteredRowModel: enableFiltering ? getFilteredRowModel() : void 0,
+    filterFns: {
+      multiSelect: multiSelectFilter
+    },
+    enableSorting,
+    enableFilters: enableFiltering
+  });
+  const filteredRowCount = table.getFilteredRowModel().rows.length;
+  const totalRowCount = data.length;
+  const activeFilters = useMemo4(() => {
+    return columnFilters.map((f) => {
+      const filterValue = f.value;
+      if (filterValue && isNumericRange(filterValue)) {
+        return {
+          column: f.id,
+          type: "range",
+          range: filterValue,
+          values: []
+        };
+      }
+      return {
+        column: f.id,
+        type: "values",
+        values: Array.isArray(filterValue) ? filterValue : [],
+        range: null
+      };
+    });
+  }, [columnFilters]);
+  const hasActiveFilter = useCallback4(
+    (columnId) => {
+      const column = table.getColumn(columnId);
+      if (!column)
+        return false;
+      const filterValue = column.getFilterValue();
+      if (!filterValue)
+        return false;
+      if (isNumericRange(filterValue)) {
+        return filterValue.min !== null || filterValue.max !== null;
+      }
+      return Array.isArray(filterValue) && filterValue.length > 0;
+    },
+    [table]
+  );
+  const setColumnFilter = useCallback4(
+    (columnId, values) => {
+      const column = table.getColumn(columnId);
+      if (column) {
+        column.setFilterValue(values.length === 0 ? void 0 : values);
+      }
+    },
+    [table]
+  );
+  const setNumericRangeFilter = useCallback4(
+    (columnId, range) => {
+      const column = table.getColumn(columnId);
+      if (column) {
+        if (!range || range.min === null && range.max === null) {
+          column.setFilterValue(void 0);
+        } else {
+          column.setFilterValue(range);
+        }
+      }
+    },
+    [table]
+  );
+  const getNumericRangeFilter = useCallback4(
+    (columnId) => {
+      const column = table.getColumn(columnId);
+      if (!column)
+        return null;
+      const filterValue = column.getFilterValue();
+      if (filterValue && isNumericRange(filterValue)) {
+        return filterValue;
+      }
+      return null;
+    },
+    [table]
+  );
+  const clearAllFilters = useCallback4(() => {
+    table.resetColumnFilters();
+    setGlobalFilter("");
+    setColumnFilters([]);
+  }, [table]);
+  const getColumnFilterValues = useCallback4(
+    (columnId) => {
+      const column = table.getColumn(columnId);
+      if (!column)
+        return [];
+      const filterValue = column.getFilterValue();
+      return Array.isArray(filterValue) ? filterValue : [];
+    },
+    [table]
+  );
+  const toggleSort = useCallback4((columnId) => {
+    setSorting((prev) => {
+      const current = prev.find((s) => s.id === columnId);
+      if (!current) {
+        return [{ id: columnId, desc: false }];
+      } else if (!current.desc) {
+        return [{ id: columnId, desc: true }];
+      } else {
+        return [];
+      }
+    });
+  }, []);
+  const getSortDirection = useCallback4(
+    (columnId) => {
+      const sort = sorting.find((s) => s.id === columnId);
+      if (!sort)
+        return null;
+      return sort.desc ? "desc" : "asc";
+    },
+    [sorting]
+  );
+  return {
+    // Table instance
+    table,
+    // State
+    sorting,
+    columnFilters,
+    columnVisibility,
+    globalFilter,
+    columnKeys,
+    setSorting,
+    setColumnFilters,
+    setGlobalFilter,
+    // Computed
+    filteredRowCount,
+    totalRowCount,
+    activeFilters,
+    // Methods
+    getColumnStats,
+    clearStatsCache,
+    hasActiveFilter,
+    setColumnFilter,
+    getColumnFilterValues,
+    clearAllFilters,
+    toggleSort,
+    getSortDirection,
+    // Numeric range filters
+    setNumericRangeFilter,
+    getNumericRangeFilter
+  };
+}
+
+// src/hooks/useGridFeatures.ts
+import {
+  copyToClipboard as coreCopyToClipboard,
+  exportPivotToCSV as coreExportPivotToCSV,
+  exportToCSV as coreExportToCSV,
+  formatSelectionForClipboard as coreFormatSelection
+} from "@smallwebco/tinypivot-core";
+import { useCallback as useCallback5, useMemo as useMemo5, useState as useState5 } from "react";
+function exportToCSV(data, columns, options) {
+  coreExportToCSV(data, columns, options);
+}
+function exportPivotToCSV(pivotData, rowFields, columnFields, valueFields, options) {
+  coreExportPivotToCSV(pivotData, rowFields, columnFields, valueFields, options);
+}
+function copyToClipboard(text, onSuccess, onError) {
+  coreCopyToClipboard(text, onSuccess, onError);
+}
+function formatSelectionForClipboard(rows, columns, selectionBounds) {
+  return coreFormatSelection(rows, columns, selectionBounds);
+}
+function usePagination(data, options = {}) {
+  const [pageSize, setPageSize] = useState5(options.pageSize ?? 50);
+  const [currentPage, setCurrentPage] = useState5(options.currentPage ?? 1);
+  const totalPages = useMemo5(
+    () => Math.max(1, Math.ceil(data.length / pageSize)),
+    [data.length, pageSize]
+  );
+  const paginatedData = useMemo5(() => {
+    const start = (currentPage - 1) * pageSize;
+    const end = start + pageSize;
+    return data.slice(start, end);
+  }, [data, currentPage, pageSize]);
+  const startIndex = useMemo5(() => (currentPage - 1) * pageSize + 1, [currentPage, pageSize]);
+  const endIndex = useMemo5(
+    () => Math.min(currentPage * pageSize, data.length),
+    [currentPage, pageSize, data.length]
+  );
+  const goToPage = useCallback5(
+    (page) => {
+      setCurrentPage(Math.max(1, Math.min(page, totalPages)));
+    },
+    [totalPages]
+  );
+  const nextPage = useCallback5(() => {
+    if (currentPage < totalPages) {
+      setCurrentPage((prev) => prev + 1);
+    }
+  }, [currentPage, totalPages]);
+  const prevPage = useCallback5(() => {
+    if (currentPage > 1) {
+      setCurrentPage((prev) => prev - 1);
+    }
+  }, [currentPage]);
+  const firstPage = useCallback5(() => {
+    setCurrentPage(1);
+  }, []);
+  const lastPage = useCallback5(() => {
+    setCurrentPage(totalPages);
+  }, [totalPages]);
+  const updatePageSize = useCallback5((size) => {
+    setPageSize(size);
+    setCurrentPage(1);
+  }, []);
+  return {
+    pageSize,
+    currentPage,
+    totalPages,
+    paginatedData,
+    startIndex,
+    endIndex,
+    goToPage,
+    nextPage,
+    prevPage,
+    firstPage,
+    lastPage,
+    setPageSize: updatePageSize
+  };
+}
+function useGlobalSearch(data, columns) {
+  const [searchTerm, setSearchTerm] = useState5("");
+  const [caseSensitive, setCaseSensitive] = useState5(false);
+  const filteredData = useMemo5(() => {
+    if (!searchTerm.trim()) {
+      return data;
+    }
+    const term = caseSensitive ? searchTerm.trim() : searchTerm.trim().toLowerCase();
+    return data.filter((row) => {
+      for (const col of columns) {
+        const value = row[col];
+        if (value === null || value === void 0)
+          continue;
+        const strValue = caseSensitive ? String(value) : String(value).toLowerCase();
+        if (strValue.includes(term)) {
+          return true;
+        }
+      }
+      return false;
+    });
+  }, [data, columns, searchTerm, caseSensitive]);
+  const clearSearch = useCallback5(() => {
+    setSearchTerm("");
+  }, []);
+  return {
+    searchTerm,
+    setSearchTerm,
+    caseSensitive,
+    setCaseSensitive,
+    filteredData,
+    clearSearch
+  };
+}
+function useRowSelection(data) {
+  const [selectedRowIndices, setSelectedRowIndices] = useState5(/* @__PURE__ */ new Set());
+  const selectedRows = useMemo5(() => {
+    return Array.from(selectedRowIndices).sort((a, b) => a - b).map((idx) => data[idx]).filter(Boolean);
+  }, [data, selectedRowIndices]);
+  const allSelected = useMemo5(() => {
+    return data.length > 0 && selectedRowIndices.size === data.length;
+  }, [data.length, selectedRowIndices.size]);
+  const someSelected = useMemo5(() => {
+    return selectedRowIndices.size > 0 && selectedRowIndices.size < data.length;
+  }, [data.length, selectedRowIndices.size]);
+  const toggleRow = useCallback5((index) => {
+    setSelectedRowIndices((prev) => {
+      const next = new Set(prev);
+      if (next.has(index)) {
+        next.delete(index);
+      } else {
+        next.add(index);
+      }
+      return next;
+    });
+  }, []);
+  const selectRow = useCallback5((index) => {
+    setSelectedRowIndices((prev) => /* @__PURE__ */ new Set([...prev, index]));
+  }, []);
+  const deselectRow = useCallback5((index) => {
+    setSelectedRowIndices((prev) => {
+      const next = new Set(prev);
+      next.delete(index);
+      return next;
+    });
+  }, []);
+  const selectAll = useCallback5(() => {
+    setSelectedRowIndices(new Set(data.map((_, idx) => idx)));
+  }, [data]);
+  const deselectAll = useCallback5(() => {
+    setSelectedRowIndices(/* @__PURE__ */ new Set());
+  }, []);
+  const toggleAll = useCallback5(() => {
+    if (allSelected) {
+      deselectAll();
+    } else {
+      selectAll();
+    }
+  }, [allSelected, selectAll, deselectAll]);
+  const isSelected = useCallback5(
+    (index) => {
+      return selectedRowIndices.has(index);
+    },
+    [selectedRowIndices]
+  );
+  const selectRange = useCallback5((startIndex, endIndex) => {
+    const min = Math.min(startIndex, endIndex);
+    const max = Math.max(startIndex, endIndex);
+    setSelectedRowIndices((prev) => {
+      const next = new Set(prev);
+      for (let i = min; i <= max; i++) {
+        next.add(i);
+      }
+      return next;
+    });
+  }, []);
+  return {
+    selectedRowIndices,
+    selectedRows,
+    allSelected,
+    someSelected,
+    toggleRow,
+    selectRow,
+    deselectRow,
+    selectAll,
+    deselectAll,
+    toggleAll,
+    isSelected,
+    selectRange
+  };
+}
+function useColumnResize(initialWidths, minWidth = 60, maxWidth = 600) {
+  const [columnWidths, setColumnWidths] = useState5({ ...initialWidths });
+  const [isResizing, setIsResizing] = useState5(false);
+  const [resizingColumn, setResizingColumn] = useState5(null);
+  const startResize = useCallback5(
+    (columnId, event) => {
+      setIsResizing(true);
+      setResizingColumn(columnId);
+      const startX = event.clientX;
+      const startWidth = columnWidths[columnId] || 150;
+      const handleMouseMove = (e) => {
+        const diff = e.clientX - startX;
+        const newWidth = Math.max(minWidth, Math.min(maxWidth, startWidth + diff));
+        setColumnWidths((prev) => ({
+          ...prev,
+          [columnId]: newWidth
+        }));
+      };
+      const handleMouseUp = () => {
+        setIsResizing(false);
+        setResizingColumn(null);
+        document.removeEventListener("mousemove", handleMouseMove);
+        document.removeEventListener("mouseup", handleMouseUp);
+      };
+      document.addEventListener("mousemove", handleMouseMove);
+      document.addEventListener("mouseup", handleMouseUp);
+    },
+    [columnWidths, minWidth, maxWidth]
+  );
+  const resetColumnWidth = useCallback5(
+    (columnId) => {
+      if (initialWidths[columnId]) {
+        setColumnWidths((prev) => ({
+          ...prev,
+          [columnId]: initialWidths[columnId]
+        }));
+      }
+    },
+    [initialWidths]
+  );
+  const resetAllWidths = useCallback5(() => {
+    setColumnWidths({ ...initialWidths });
+  }, [initialWidths]);
+  return {
+    columnWidths,
+    setColumnWidths,
+    isResizing,
+    resizingColumn,
+    startResize,
+    resetColumnWidth,
+    resetAllWidths
+  };
+}
+
+// src/hooks/useLicense.ts
+import {
+  canUsePivot as coreCanUsePivot,
+  configureLicenseSecret as coreConfigureLicenseSecret,
+  isPro as coreIsPro,
+  shouldShowWatermark as coreShouldShowWatermark,
+  getDemoLicenseInfo,
+  getFreeLicenseInfo,
+  logProRequired,
+  validateLicenseKey
+} from "@smallwebco/tinypivot-core";
+import { useCallback as useCallback6, useMemo as useMemo6, useState as useState6 } from "react";
+var globalLicenseInfo = getFreeLicenseInfo();
+var globalDemoMode = false;
+var listeners = /* @__PURE__ */ new Set();
+function notifyListeners() {
+  listeners.forEach((listener) => listener());
+}
+async function setLicenseKey(key) {
+  globalLicenseInfo = await validateLicenseKey(key);
+  if (!globalLicenseInfo.isValid) {
+    console.warn("[TinyPivot] Invalid or expired license key. Running in free mode.");
+  } else if (globalLicenseInfo.type !== "free") {
+    console.info(`[TinyPivot] Pro license activated (${globalLicenseInfo.type})`);
+  }
+  notifyListeners();
+}
+async function enableDemoMode(secret) {
+  const demoLicense = await getDemoLicenseInfo(secret);
+  if (!demoLicense) {
+    console.warn("[TinyPivot] Demo mode activation failed - invalid secret");
+    return false;
+  }
+  globalDemoMode = true;
+  globalLicenseInfo = demoLicense;
+  console.info("[TinyPivot] Demo mode enabled - all Pro features unlocked for evaluation");
+  notifyListeners();
+  return true;
+}
+function configureLicenseSecret(secret) {
+  coreConfigureLicenseSecret(secret);
+}
+function useLicense() {
+  const [, forceUpdate] = useState6({});
+  useState6(() => {
+    const update = () => forceUpdate({});
+    listeners.add(update);
+    return () => listeners.delete(update);
+  });
+  const isDemo = globalDemoMode;
+  const licenseInfo = globalLicenseInfo;
+  const isPro = useMemo6(
+    () => globalDemoMode || coreIsPro(licenseInfo),
+    [licenseInfo]
+  );
+  const canUsePivot = useMemo6(
+    () => globalDemoMode || coreCanUsePivot(licenseInfo),
+    [licenseInfo]
+  );
+  const canUseAdvancedAggregations = useMemo6(
+    () => globalDemoMode || licenseInfo.features.advancedAggregations,
+    [licenseInfo]
+  );
+  const canUsePercentageMode = useMemo6(
+    () => globalDemoMode || licenseInfo.features.percentageMode,
+    [licenseInfo]
+  );
+  const showWatermark = useMemo6(
+    () => coreShouldShowWatermark(licenseInfo, globalDemoMode),
+    [licenseInfo]
+  );
+  const requirePro = useCallback6((feature) => {
+    if (!isPro) {
+      logProRequired(feature);
+      return false;
+    }
+    return true;
+  }, [isPro]);
+  return {
+    licenseInfo,
+    isDemo,
+    isPro,
+    canUsePivot,
+    canUseAdvancedAggregations,
+    canUsePercentageMode,
+    showWatermark,
+    requirePro
+  };
+}
+
+// src/hooks/usePivotTable.ts
+import {
+  computeAvailableFields,
+  computePivotResult,
+  generateStorageKey,
+  getAggregationLabel,
+  getUnassignedFields,
+  isConfigValidForFields,
+  isPivotConfigured,
+  loadCalculatedFields,
+  loadPivotConfig,
+  saveCalculatedFields,
+  savePivotConfig
+} from "@smallwebco/tinypivot-core";
+import { useCallback as useCallback7, useEffect as useEffect5, useMemo as useMemo7, useState as useState7 } from "react";
+function usePivotTable(data) {
+  const { canUsePivot, requirePro } = useLicense();
+  const [rowFields, setRowFieldsState] = useState7([]);
+  const [columnFields, setColumnFieldsState] = useState7([]);
+  const [valueFields, setValueFields] = useState7([]);
+  const [showRowTotals, setShowRowTotals] = useState7(true);
+  const [showColumnTotals, setShowColumnTotals] = useState7(true);
+  const [calculatedFields, setCalculatedFields] = useState7(() => loadCalculatedFields());
+  const [currentStorageKey, setCurrentStorageKey] = useState7(null);
+  const availableFields = useMemo7(() => {
+    return computeAvailableFields(data);
+  }, [data]);
+  const unassignedFields = useMemo7(() => {
+    return getUnassignedFields(availableFields, rowFields, columnFields, valueFields);
+  }, [availableFields, rowFields, columnFields, valueFields]);
+  const isConfigured = useMemo7(() => {
+    return isPivotConfigured({
+      rowFields,
+      columnFields,
+      valueFields,
+      showRowTotals,
+      showColumnTotals
+    });
+  }, [rowFields, columnFields, valueFields, showRowTotals, showColumnTotals]);
+  const pivotResult = useMemo7(() => {
+    if (!isConfigured)
+      return null;
+    if (!canUsePivot)
+      return null;
+    return computePivotResult(data, {
+      rowFields,
+      columnFields,
+      valueFields,
+      showRowTotals,
+      showColumnTotals,
+      calculatedFields
+    });
+  }, [data, isConfigured, canUsePivot, rowFields, columnFields, valueFields, showRowTotals, showColumnTotals, calculatedFields]);
+  useEffect5(() => {
+    if (data.length === 0)
+      return;
+    const newKeys = Object.keys(data[0]);
+    const storageKey = generateStorageKey(newKeys);
+    if (storageKey !== currentStorageKey) {
+      setCurrentStorageKey(storageKey);
+      const savedConfig = loadPivotConfig(storageKey);
+      if (savedConfig && isConfigValidForFields(savedConfig, newKeys)) {
+        setRowFieldsState(savedConfig.rowFields);
+        setColumnFieldsState(savedConfig.columnFields);
+        setValueFields(savedConfig.valueFields);
+        setShowRowTotals(savedConfig.showRowTotals);
+        setShowColumnTotals(savedConfig.showColumnTotals);
+        if (savedConfig.calculatedFields) {
+          setCalculatedFields(savedConfig.calculatedFields);
+        }
+      } else {
+        const currentConfig = {
+          rowFields,
+          columnFields,
+          valueFields,
+          showRowTotals,
+          showColumnTotals
+        };
+        if (!isConfigValidForFields(currentConfig, newKeys)) {
+          setRowFieldsState([]);
+          setColumnFieldsState([]);
+          setValueFields([]);
+        }
       }
-      setError(null);
     }
-  }, [show, existingField]);
-  const validationError = useMemo7(() => {
-    if (!formula.trim()) return null;
-    return validateSimpleFormula(formula, availableFields);
-  }, [formula, availableFields]);
-  const insertField = useCallback7((field) => {
-    setFormula((prev) => {
-      if (prev.trim() && !prev.endsWith(" ")) {
-        return prev + " " + field;
+  }, [data]);
+  useEffect5(() => {
+    if (!currentStorageKey)
+      return;
+    const config = {
+      rowFields,
+      columnFields,
+      valueFields,
+      showRowTotals,
+      showColumnTotals,
+      calculatedFields
+    };
+    savePivotConfig(currentStorageKey, config);
+  }, [currentStorageKey, rowFields, columnFields, valueFields, showRowTotals, showColumnTotals, calculatedFields]);
+  const addRowField = useCallback7(
+    (field) => {
+      if (!rowFields.includes(field)) {
+        setRowFieldsState((prev) => [...prev, field]);
       }
-      return prev + field;
-    });
+    },
+    [rowFields]
+  );
+  const removeRowField = useCallback7((field) => {
+    setRowFieldsState((prev) => prev.filter((f) => f !== field));
   }, []);
-  const insertOperator = useCallback7((op) => {
-    setFormula((prev) => {
-      if (prev.trim() && !prev.endsWith(" ")) {
-        return prev + " " + op + " ";
+  const setRowFields = useCallback7((fields) => {
+    setRowFieldsState(fields);
+  }, []);
+  const addColumnField = useCallback7(
+    (field) => {
+      if (!columnFields.includes(field)) {
+        setColumnFieldsState((prev) => [...prev, field]);
+      }
+    },
+    [columnFields]
+  );
+  const removeColumnField = useCallback7((field) => {
+    setColumnFieldsState((prev) => prev.filter((f) => f !== field));
+  }, []);
+  const setColumnFields = useCallback7((fields) => {
+    setColumnFieldsState(fields);
+  }, []);
+  const addValueField = useCallback7(
+    (field, aggregation = "sum") => {
+      if (aggregation !== "sum" && !requirePro(`${aggregation} aggregation`)) {
+        return;
+      }
+      setValueFields((prev) => {
+        if (prev.some((v) => v.field === field && v.aggregation === aggregation)) {
+          return prev;
+        }
+        return [...prev, { field, aggregation }];
+      });
+    },
+    [requirePro]
+  );
+  const removeValueField = useCallback7((field, aggregation) => {
+    setValueFields((prev) => {
+      if (aggregation) {
+        return prev.filter((v) => !(v.field === field && v.aggregation === aggregation));
       }
-      return prev + op + " ";
+      return prev.filter((v) => v.field !== field);
     });
   }, []);
-  const handleSave = useCallback7(() => {
-    if (!name.trim()) {
-      setError("Name is required");
+  const updateValueFieldAggregation = useCallback7(
+    (field, oldAgg, newAgg) => {
+      setValueFields(
+        (prev) => prev.map((v) => {
+          if (v.field === field && v.aggregation === oldAgg) {
+            return { ...v, aggregation: newAgg };
+          }
+          return v;
+        })
+      );
+    },
+    []
+  );
+  const clearConfig = useCallback7(() => {
+    setRowFieldsState([]);
+    setColumnFieldsState([]);
+    setValueFields([]);
+  }, []);
+  const autoSuggestConfig = useCallback7(() => {
+    if (!requirePro("Pivot Table - Auto Suggest"))
       return;
-    }
-    const validationResult = validateSimpleFormula(formula, availableFields);
-    if (validationResult) {
-      setError(validationResult);
+    if (availableFields.length === 0)
       return;
+    const categoricalFields = availableFields.filter((f) => !f.isNumeric && f.uniqueCount < 50);
+    const numericFields = availableFields.filter((f) => f.isNumeric);
+    if (categoricalFields.length > 0 && numericFields.length > 0) {
+      setRowFieldsState([categoricalFields[0].field]);
+      setValueFields([{ field: numericFields[0].field, aggregation: "sum" }]);
     }
-    const field = {
-      id: existingField?.id || `calc_${Date.now()}`,
-      name: name.trim(),
-      formula: formula.trim(),
-      formatAs,
-      decimals
-    };
-    onSave(field);
-    onClose();
-  }, [name, formula, formatAs, decimals, existingField, availableFields, onSave, onClose]);
-  const handleOverlayClick = useCallback7((e) => {
-    if (e.target === e.currentTarget) {
-      onClose();
-    }
-  }, [onClose]);
-  if (!show) return null;
-  const modalContent = /* @__PURE__ */ jsx3("div", { className: "vpg-modal-overlay", onClick: handleOverlayClick, children: /* @__PURE__ */ jsxs3("div", { className: "vpg-modal", children: [
-    /* @__PURE__ */ jsxs3("div", { className: "vpg-modal-header", children: [
-      /* @__PURE__ */ jsxs3("h3", { children: [
-        existingField ? "Edit" : "Create",
-        " Calculated Field"
-      ] }),
-      /* @__PURE__ */ jsx3("button", { className: "vpg-modal-close", onClick: onClose, children: "\xD7" })
-    ] }),
-    /* @__PURE__ */ jsxs3("div", { className: "vpg-modal-body", children: [
-      /* @__PURE__ */ jsxs3("div", { className: "vpg-form-group", children: [
-        /* @__PURE__ */ jsx3("label", { className: "vpg-label", children: "Name" }),
-        /* @__PURE__ */ jsx3(
-          "input",
-          {
-            type: "text",
-            className: "vpg-input",
-            placeholder: "e.g., Profit Margin %",
-            value: name,
-            onChange: (e) => setName(e.target.value)
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxs3("div", { className: "vpg-form-group", children: [
-        /* @__PURE__ */ jsx3("label", { className: "vpg-label", children: "Formula" }),
-        /* @__PURE__ */ jsx3(
-          "textarea",
-          {
-            className: "vpg-textarea",
-            placeholder: "e.g., revenue / units",
-            rows: 2,
-            value: formula,
-            onChange: (e) => setFormula(e.target.value)
-          }
-        ),
-        /* @__PURE__ */ jsx3("div", { className: "vpg-formula-hint", children: "Use field names with math operators: + - * / ( )" }),
-        validationError && /* @__PURE__ */ jsx3("div", { className: "vpg-error", children: validationError })
-      ] }),
-      /* @__PURE__ */ jsxs3("div", { className: "vpg-form-group", children: [
-        /* @__PURE__ */ jsx3("label", { className: "vpg-label-small", children: "Operators" }),
-        /* @__PURE__ */ jsxs3("div", { className: "vpg-button-group", children: [
-          /* @__PURE__ */ jsx3("button", { className: "vpg-insert-btn vpg-op-btn", onClick: () => insertOperator("+"), children: "+" }),
-          /* @__PURE__ */ jsx3("button", { className: "vpg-insert-btn vpg-op-btn", onClick: () => insertOperator("-"), children: "\u2212" }),
-          /* @__PURE__ */ jsx3("button", { className: "vpg-insert-btn vpg-op-btn", onClick: () => insertOperator("*"), children: "\xD7" }),
-          /* @__PURE__ */ jsx3("button", { className: "vpg-insert-btn vpg-op-btn", onClick: () => insertOperator("/"), children: "\xF7" }),
-          /* @__PURE__ */ jsx3("button", { className: "vpg-insert-btn vpg-op-btn", onClick: () => insertOperator("("), children: "(" }),
-          /* @__PURE__ */ jsx3("button", { className: "vpg-insert-btn vpg-op-btn", onClick: () => insertOperator(")"), children: ")" })
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxs3("div", { className: "vpg-form-group", children: [
-        /* @__PURE__ */ jsx3("label", { className: "vpg-label-small", children: "Insert Field" }),
-        availableFields.length > 0 ? /* @__PURE__ */ jsx3("div", { className: "vpg-button-group vpg-field-buttons", children: availableFields.map((field) => /* @__PURE__ */ jsx3(
-          "button",
-          {
-            className: "vpg-insert-btn vpg-field-btn",
-            onClick: () => insertField(field),
-            children: field
-          },
-          field
-        )) }) : /* @__PURE__ */ jsx3("div", { className: "vpg-no-fields", children: "No numeric fields available" })
-      ] }),
-      /* @__PURE__ */ jsxs3("div", { className: "vpg-form-row", children: [
-        /* @__PURE__ */ jsxs3("div", { className: "vpg-form-group vpg-form-group-half", children: [
-          /* @__PURE__ */ jsx3("label", { className: "vpg-label", children: "Format As" }),
-          /* @__PURE__ */ jsxs3(
-            "select",
-            {
-              className: "vpg-select",
-              value: formatAs,
-              onChange: (e) => setFormatAs(e.target.value),
-              children: [
-                /* @__PURE__ */ jsx3("option", { value: "number", children: "Number" }),
-                /* @__PURE__ */ jsx3("option", { value: "percent", children: "Percentage" }),
-                /* @__PURE__ */ jsx3("option", { value: "currency", children: "Currency ($)" })
-              ]
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsxs3("div", { className: "vpg-form-group vpg-form-group-half", children: [
-          /* @__PURE__ */ jsx3("label", { className: "vpg-label", children: "Decimals" }),
-          /* @__PURE__ */ jsx3(
-            "input",
-            {
-              type: "number",
-              className: "vpg-input",
-              min: 0,
-              max: 6,
-              value: decimals,
-              onChange: (e) => setDecimals(Number(e.target.value))
-            }
-          )
-        ] })
-      ] }),
-      error && /* @__PURE__ */ jsx3("div", { className: "vpg-error vpg-error-box", children: error })
-    ] }),
-    /* @__PURE__ */ jsxs3("div", { className: "vpg-modal-footer", children: [
-      /* @__PURE__ */ jsx3("button", { className: "vpg-btn vpg-btn-secondary", onClick: onClose, children: "Cancel" }),
-      /* @__PURE__ */ jsxs3("button", { className: "vpg-btn vpg-btn-primary", onClick: handleSave, children: [
-        existingField ? "Update" : "Add",
-        " Field"
-      ] })
-    ] })
-  ] }) });
-  if (typeof document === "undefined") return null;
-  return createPortal(modalContent, document.body);
+  }, [availableFields, requirePro]);
+  const addCalculatedField = useCallback7((field) => {
+    setCalculatedFields((prev) => {
+      const existing = prev.findIndex((f) => f.id === field.id);
+      let updated;
+      if (existing >= 0) {
+        updated = [...prev.slice(0, existing), field, ...prev.slice(existing + 1)];
+      } else {
+        updated = [...prev, field];
+      }
+      saveCalculatedFields(updated);
+      return updated;
+    });
+  }, []);
+  const removeCalculatedField = useCallback7((id) => {
+    setCalculatedFields((prev) => {
+      const updated = prev.filter((f) => f.id !== id);
+      saveCalculatedFields(updated);
+      return updated;
+    });
+    setValueFields((prev) => prev.filter((v) => v.field !== `calc:${id}`));
+  }, []);
+  return {
+    // State
+    rowFields,
+    columnFields,
+    valueFields,
+    showRowTotals,
+    showColumnTotals,
+    calculatedFields,
+    // Computed
+    availableFields,
+    unassignedFields,
+    isConfigured,
+    pivotResult,
+    // Actions
+    addRowField,
+    removeRowField,
+    addColumnField,
+    removeColumnField,
+    addValueField,
+    removeValueField,
+    updateValueFieldAggregation,
+    clearConfig,
+    setShowRowTotals,
+    setShowColumnTotals,
+    autoSuggestConfig,
+    setRowFields,
+    setColumnFields,
+    addCalculatedField,
+    removeCalculatedField
+  };
 }
 
 // src/components/PivotConfig.tsx
+import { AGGREGATION_OPTIONS, getAggregationSymbol } from "@smallwebco/tinypivot-core";
+import { useCallback as useCallback8, useMemo as useMemo8, useState as useState8 } from "react";
 import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 function aggregationRequiresPro(agg) {
   return agg !== "sum";
 }
 function getFieldIcon(type, isCalculated) {
-  if (isCalculated) return "\u0192";
+  if (isCalculated)
+    return "\u0192";
   switch (type) {
     case "number":
       return "#";
@@ -1564,7 +1595,7 @@ function PivotConfig({
   onShowRowTotalsChange,
   onShowColumnTotalsChange,
   onClearConfig,
-  onAutoSuggest,
+  onAutoSuggest: _onAutoSuggest,
   onDragStart,
   onDragEnd,
   onUpdateAggregation,
@@ -1584,12 +1615,10 @@ function PivotConfig({
   const isAggregationAvailable = useCallback8((agg) => {
     return !aggregationRequiresPro(agg) || canUseAdvancedAggregations;
   }, [canUseAdvancedAggregations]);
-  const numericFieldNames = useMemo8(
-    () => availableFields.filter((f) => f.isNumeric).map((f) => f.field),
-    [availableFields]
-  );
+  const numericFieldNames = useMemo8(() => availableFields.filter((f) => f.isNumeric).map((f) => f.field), [availableFields]);
   const calculatedFieldsAsStats = useMemo8(() => {
-    if (!calculatedFields) return [];
+    if (!calculatedFields)
+      return [];
     return calculatedFields.map((calc) => ({
       field: `calc:${calc.id}`,
       type: "number",
@@ -1624,7 +1653,8 @@ function PivotConfig({
     );
   }, [allAvailableFields, rowFields, columnFields, valueFields]);
   const filteredUnassignedFields = useMemo8(() => {
-    if (!fieldSearch.trim()) return unassignedFields;
+    if (!fieldSearch.trim())
+      return unassignedFields;
     const search = fieldSearch.toLowerCase().trim();
     return unassignedFields.filter((f) => {
       const fieldName = f.field.toLowerCase();
@@ -1829,7 +1859,8 @@ function PivotConfig({
     ] }),
     /* @__PURE__ */ jsxs4("div", { className: "vpg-unassigned-section", children: [
       /* @__PURE__ */ jsx4("div", { className: "vpg-section-header", children: /* @__PURE__ */ jsxs4("div", { className: "vpg-section-label", children: [
-        "Available ",
+        "Available",
+        " ",
         /* @__PURE__ */ jsx4("span", { className: "vpg-count", children: unassignedFields.length })
       ] }) }),
       /* @__PURE__ */ jsxs4("div", { className: "vpg-field-search", children: [
@@ -1883,7 +1914,8 @@ function PivotConfig({
                     onClick: (e) => {
                       e.stopPropagation();
                       const calcField = calculatedFields?.find((c) => c.id === field.calcId);
-                      if (calcField) openCalcModal(calcField);
+                      if (calcField)
+                        openCalcModal(calcField);
                     },
                     children: "\u270E"
                   }
@@ -1946,8 +1978,8 @@ function PivotConfig({
 }
 
 // src/components/PivotSkeleton.tsx
-import { useState as useState9, useMemo as useMemo9, useCallback as useCallback9, useEffect as useEffect6 } from "react";
 import { getAggregationLabel as getAggregationLabel2, getAggregationSymbol as getAggregationSymbol2 } from "@smallwebco/tinypivot-core";
+import { useCallback as useCallback9, useEffect as useEffect6, useMemo as useMemo9, useState as useState9 } from "react";
 import { Fragment as Fragment3, jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 function PivotSkeleton({
   rowFields,
@@ -2002,7 +2034,8 @@ function PivotSkeleton({
   const [showCopyToast, setShowCopyToast] = useState9(false);
   const [copyToastMessage, setCopyToastMessage] = useState9("");
   const selectionBounds = useMemo9(() => {
-    if (!selectionStart || !selectionEnd) return null;
+    if (!selectionStart || !selectionEnd)
+      return null;
     return {
       minRow: Math.min(selectionStart.row, selectionEnd.row),
       maxRow: Math.max(selectionStart.row, selectionEnd.row),
@@ -2048,7 +2081,8 @@ function PivotSkeleton({
     return () => document.removeEventListener("mouseup", handleMouseUp);
   }, []);
   const sortedRowIndices = useMemo9(() => {
-    if (!pivotResult) return [];
+    if (!pivotResult)
+      return [];
     const indices = pivotResult.rowHeaders.map((_, i) => i);
     const headers = pivotResult.rowHeaders;
     const data = pivotResult.data;
@@ -2062,9 +2096,12 @@ function PivotSkeleton({
         const colIdx = sortTarget;
         const aVal = data[a]?.[colIdx]?.value ?? null;
         const bVal = data[b]?.[colIdx]?.value ?? null;
-        if (aVal === null && bVal === null) cmp = 0;
-        else if (aVal === null) cmp = 1;
-        else if (bVal === null) cmp = -1;
+        if (aVal === null && bVal === null)
+          cmp = 0;
+        else if (aVal === null)
+          cmp = 1;
+        else if (bVal === null)
+          cmp = -1;
         else cmp = aVal - bVal;
       }
       return sortDirection === "asc" ? cmp : -cmp;
@@ -2072,12 +2109,14 @@ function PivotSkeleton({
     return indices;
   }, [pivotResult, sortTarget, sortDirection]);
   const copySelectionToClipboard = useCallback9(() => {
-    if (!selectionBounds || !pivotResult) return;
+    if (!selectionBounds || !pivotResult)
+      return;
     const { minRow, maxRow, minCol, maxCol } = selectionBounds;
     const lines = [];
     for (let r = minRow; r <= maxRow; r++) {
       const sortedIdx = sortedRowIndices[r];
-      if (sortedIdx === void 0) continue;
+      if (sortedIdx === void 0)
+        continue;
       const rowValues = [];
       for (let c = minCol; c <= maxCol; c++) {
         const cell = pivotResult.data[sortedIdx]?.[c];
@@ -2097,7 +2136,8 @@ function PivotSkeleton({
   }, [selectionBounds, pivotResult, sortedRowIndices]);
   useEffect6(() => {
     const handleKeydown = (event) => {
-      if (!selectionBounds) return;
+      if (!selectionBounds)
+        return;
       if ((event.ctrlKey || event.metaKey) && event.key === "c") {
         event.preventDefault();
         copySelectionToClipboard();
@@ -2113,13 +2153,15 @@ function PivotSkeleton({
     return () => document.removeEventListener("keydown", handleKeydown);
   }, [selectionBounds, copySelectionToClipboard]);
   const selectionStats = useMemo9(() => {
-    if (!selectionBounds || !pivotResult) return null;
+    if (!selectionBounds || !pivotResult)
+      return null;
     const { minRow, maxRow, minCol, maxCol } = selectionBounds;
     const values = [];
     let count = 0;
     for (let r = minRow; r <= maxRow; r++) {
       const sortedIdx = sortedRowIndices[r];
-      if (sortedIdx === void 0) continue;
+      if (sortedIdx === void 0)
+        continue;
       for (let c = minCol; c <= maxCol; c++) {
         const cell = pivotResult.data[sortedIdx]?.[c];
         count++;
@@ -2128,7 +2170,8 @@ function PivotSkeleton({
         }
       }
     }
-    if (count <= 1) return null;
+    if (count <= 1)
+      return null;
     const sum = values.reduce((a, b) => a + b, 0);
     const avg = values.length > 0 ? sum / values.length : 0;
     return {
@@ -2139,8 +2182,10 @@ function PivotSkeleton({
     };
   }, [selectionBounds, pivotResult, sortedRowIndices]);
   const formatStatValue = useCallback9((val) => {
-    if (Math.abs(val) >= 1e6) return `${(val / 1e6).toFixed(2)}M`;
-    if (Math.abs(val) >= 1e3) return `${(val / 1e3).toFixed(2)}K`;
+    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 = useMemo9(() => {
@@ -2172,12 +2217,14 @@ function PivotSkeleton({
   }, [pivotResult, valueFields]);
   const hasActiveFilters = activeFilters && activeFilters.length > 0;
   const filterSummary = useMemo9(() => {
-    if (!activeFilters || activeFilters.length === 0) return "";
+    if (!activeFilters || activeFilters.length === 0)
+      return "";
     return activeFilters.map((f) => f.column).join(", ");
   }, [activeFilters]);
   const [showFilterTooltip, setShowFilterTooltip] = useState9(false);
   const filterTooltipDetails = useMemo9(() => {
-    if (!activeFilters || activeFilters.length === 0) return [];
+    if (!activeFilters || activeFilters.length === 0)
+      return [];
     return activeFilters.map((f) => {
       if (f.isRange && f.displayText) {
         return {
@@ -2219,10 +2266,13 @@ function PivotSkeleton({
         setDragOverArea(null);
         return;
       }
-      if (rowFields.includes(field)) onRemoveRowField(field);
-      if (columnFields.includes(field)) onRemoveColumnField(field);
+      if (rowFields.includes(field))
+        onRemoveRowField(field);
+      if (columnFields.includes(field))
+        onRemoveColumnField(field);
       const existingValue = valueFields.find((v) => v.field === field);
-      if (existingValue) onRemoveValueField(field, existingValue.aggregation);
+      if (existingValue)
+        onRemoveValueField(field, existingValue.aggregation);
       switch (area) {
         case "row":
           onAddRowField(field);
@@ -2305,6 +2355,14 @@ function PivotSkeleton({
     [reorderDropTarget]
   );
   const currentFontSize = fontSize;
+  const rowHeaderWidth = 180;
+  const rowHeaderColWidth = useMemo9(() => {
+    const numCols = Math.max(rowFields.length, 1);
+    return Math.max(rowHeaderWidth / numCols, 80);
+  }, [rowFields.length]);
+  const getRowHeaderLeftOffset = useCallback9((fieldIdx) => {
+    return fieldIdx * rowHeaderColWidth;
+  }, [rowHeaderColWidth]);
   return /* @__PURE__ */ jsxs5(
     "div",
     {
@@ -2354,14 +2412,18 @@ function PivotSkeleton({
                     }
                   ),
                   /* @__PURE__ */ jsxs5("span", { className: "vpg-filter-text", children: [
-                    "Filtered: ",
+                    "Filtered:",
+                    " ",
                     /* @__PURE__ */ jsx5("strong", { children: filterSummary }),
                     filteredRowCount !== void 0 && totalRowCount !== void 0 && /* @__PURE__ */ jsxs5("span", { className: "vpg-filter-count", children: [
                       "(",
                       filteredRowCount.toLocaleString(),
-                      " of ",
+                      " ",
+                      "of",
+                      " ",
                       totalRowCount.toLocaleString(),
-                      " rows)"
+                      " ",
+                      "rows)"
                     ] })
                   ] }),
                   showFilterTooltip && /* @__PURE__ */ jsxs5("div", { className: "vpg-filter-tooltip", children: [
@@ -2373,16 +2435,21 @@ function PivotSkeleton({
                         filter.remaining > 0 && /* @__PURE__ */ jsxs5("span", { className: "vpg-tooltip-more", children: [
                           "+",
                           filter.remaining,
-                          " more"
+                          " ",
+                          "more"
                         ] })
                       ] }) })
                     ] }, filter.column)),
                     filteredRowCount !== void 0 && totalRowCount !== void 0 && /* @__PURE__ */ jsxs5("div", { className: "vpg-tooltip-summary", children: [
-                      "Showing ",
+                      "Showing",
+                      " ",
                       filteredRowCount.toLocaleString(),
-                      " of ",
+                      " ",
+                      "of",
+                      " ",
                       totalRowCount.toLocaleString(),
-                      " rows"
+                      " ",
+                      "rows"
                     ] })
                   ] })
                 ]
@@ -2391,17 +2458,20 @@ function PivotSkeleton({
             isConfigured && /* @__PURE__ */ jsxs5("div", { className: "vpg-config-summary", children: [
               /* @__PURE__ */ jsxs5("span", { className: "vpg-summary-badge vpg-rows", children: [
                 rowFields.length,
-                " row",
+                " ",
+                "row",
                 rowFields.length !== 1 ? "s" : ""
               ] }),
               /* @__PURE__ */ jsxs5("span", { className: "vpg-summary-badge vpg-cols", children: [
                 columnFields.length,
-                " col",
+                " ",
+                "col",
                 columnFields.length !== 1 ? "s" : ""
               ] }),
               /* @__PURE__ */ jsxs5("span", { className: "vpg-summary-badge vpg-vals", children: [
                 valueFields.length,
-                " val",
+                " ",
+                "val",
                 valueFields.length !== 1 ? "s" : ""
               ] })
             ] })
@@ -2572,31 +2642,39 @@ function PivotSkeleton({
               }
             ),
             /* @__PURE__ */ jsx5("span", { className: "vpg-placeholder-text", children: valueFields.length === 0 ? /* @__PURE__ */ jsxs5(Fragment3, { children: [
-              "Add a ",
+              "Add a",
+              " ",
               /* @__PURE__ */ jsx5("strong", { children: "Values" }),
-              " field to see your pivot table"
+              " ",
+              "field to see your pivot table"
             ] }) : rowFields.length === 0 && columnFields.length === 0 ? /* @__PURE__ */ jsxs5(Fragment3, { children: [
-              "Add ",
+              "Add",
+              " ",
               /* @__PURE__ */ jsx5("strong", { children: "Row" }),
-              " or ",
+              " ",
+              "or",
+              " ",
               /* @__PURE__ */ jsx5("strong", { children: "Column" }),
-              " fields to group your data"
+              " ",
+              "fields to group your data"
             ] }) : "Your pivot table will appear here" })
           ] }) }),
           isConfigured && pivotResult && /* @__PURE__ */ jsx5("div", { className: "vpg-table-container", children: /* @__PURE__ */ jsxs5("table", { className: "vpg-pivot-table", children: [
             /* @__PURE__ */ jsx5("thead", { children: columnHeaderCells.map((headerRow, levelIdx) => /* @__PURE__ */ jsxs5("tr", { className: "vpg-column-header-row", children: [
-              levelIdx === 0 && /* @__PURE__ */ jsx5(
+              levelIdx === 0 && (rowFields.length > 0 ? rowFields : ["Rows"]).map((field, fieldIdx) => /* @__PURE__ */ jsx5(
                 "th",
                 {
                   className: "vpg-row-header-label",
                   rowSpan: columnHeaderCells.length,
+                  style: { width: `${rowHeaderColWidth}px`, minWidth: "80px", left: `${getRowHeaderLeftOffset(fieldIdx)}px` },
                   onClick: () => toggleSort("row"),
                   children: /* @__PURE__ */ jsxs5("div", { className: "vpg-header-content", children: [
-                    /* @__PURE__ */ jsx5("span", { children: rowFields.join(" / ") || "Rows" }),
-                    /* @__PURE__ */ jsx5("span", { className: `vpg-sort-indicator ${sortTarget === "row" ? "active" : ""}`, children: sortTarget === "row" ? sortDirection === "asc" ? "\u2191" : "\u2193" : "\u21C5" })
+                    /* @__PURE__ */ jsx5("span", { children: field }),
+                    (fieldIdx === rowFields.length - 1 || rowFields.length === 0) && /* @__PURE__ */ jsx5("span", { className: `vpg-sort-indicator ${sortTarget === "row" ? "active" : ""}`, children: sortTarget === "row" ? sortDirection === "asc" ? "\u2191" : "\u2193" : "\u21C5" })
                   ] })
-                }
-              ),
+                },
+                `row-header-${fieldIdx}`
+              )),
               headerRow.map((cell, idx) => /* @__PURE__ */ jsx5(
                 "th",
                 {
@@ -2614,7 +2692,15 @@ function PivotSkeleton({
             ] }, `header-${levelIdx}`)) }),
             /* @__PURE__ */ jsxs5("tbody", { children: [
               sortedRowIndices.map((sortedIdx) => /* @__PURE__ */ jsxs5("tr", { className: "vpg-data-row", children: [
-                /* @__PURE__ */ jsx5("th", { className: "vpg-row-header-cell", children: pivotResult.rowHeaders[sortedIdx].map((val, idx) => /* @__PURE__ */ jsx5("span", { className: "vpg-row-value", children: val }, idx)) }),
+                pivotResult.rowHeaders[sortedIdx].map((val, idx) => /* @__PURE__ */ jsx5(
+                  "th",
+                  {
+                    className: "vpg-row-header-cell",
+                    style: { width: `${rowHeaderColWidth}px`, minWidth: "80px", left: `${getRowHeaderLeftOffset(idx)}px` },
+                    children: val
+                  },
+                  `row-${sortedIdx}-${idx}`
+                )),
                 pivotResult.data[sortedIdx].map((cell, colIdx) => {
                   const displayRowIdx = sortedRowIndices.indexOf(sortedIdx);
                   return /* @__PURE__ */ jsx5(
@@ -2631,7 +2717,15 @@ function PivotSkeleton({
                 pivotResult.rowTotals[sortedIdx] && /* @__PURE__ */ jsx5("td", { className: "vpg-data-cell vpg-total-cell", children: pivotResult.rowTotals[sortedIdx].formattedValue })
               ] }, sortedIdx)),
               pivotResult.columnTotals.length > 0 && /* @__PURE__ */ jsxs5("tr", { className: "vpg-totals-row", children: [
-                /* @__PURE__ */ jsx5("th", { className: "vpg-row-header-cell vpg-total-label", children: "Total" }),
+                /* @__PURE__ */ jsx5(
+                  "th",
+                  {
+                    className: "vpg-row-header-cell vpg-total-label",
+                    colSpan: Math.max(rowFields.length, 1),
+                    style: { width: `${rowHeaderWidth}px` },
+                    children: "Total"
+                  }
+                ),
                 pivotResult.columnTotals.map((cell, colIdx) => /* @__PURE__ */ jsx5("td", { className: "vpg-data-cell vpg-total-cell", children: cell.formattedValue }, colIdx)),
                 pivotResult.rowTotals.length > 0 && /* @__PURE__ */ jsx5("td", { className: "vpg-data-cell vpg-grand-total-cell", children: pivotResult.grandTotal.formattedValue })
               ] })
@@ -2640,9 +2734,11 @@ function PivotSkeleton({
           isConfigured && pivotResult && /* @__PURE__ */ jsxs5("div", { className: "vpg-skeleton-footer", children: [
             /* @__PURE__ */ jsxs5("span", { className: "vpg-footer-info", children: [
               pivotResult.rowHeaders.length,
-              " rows \xD7 ",
+              " ",
+              "rows \xD7",
               pivotResult.data[0]?.length || 0,
-              " columns"
+              " ",
+              "columns"
             ] }),
             selectionStats && selectionStats.count > 1 && /* @__PURE__ */ jsxs5("div", { className: "vpg-selection-stats", children: [
               /* @__PURE__ */ jsxs5("span", { className: "vpg-stat", children: [
@@ -2795,12 +2891,15 @@ function DataGrid({
     removeCalculatedField
   } = usePivotTable(filteredDataForPivot);
   const activeFilterInfo = useMemo10(() => {
-    if (activeFilters.length === 0) return null;
+    if (activeFilters.length === 0)
+      return null;
     return activeFilters.map((f) => {
       if (f.type === "range" && f.range) {
         const parts = [];
-        if (f.range.min !== null) parts.push(`\u2265 ${f.range.min}`);
-        if (f.range.max !== null) parts.push(`\u2264 ${f.range.max}`);
+        if (f.range.min !== null)
+          parts.push(`\u2265 ${f.range.min}`);
+        if (f.range.max !== null)
+          parts.push(`\u2264 ${f.range.max}`);
         return {
           column: f.column,
           valueCount: 1,
@@ -2825,7 +2924,8 @@ function DataGrid({
     return rows.filter((row) => {
       for (const col of columnKeys) {
         const value = row.original[col];
-        if (value === null || value === void 0) continue;
+        if (value === null || value === void 0)
+          continue;
         if (String(value).toLowerCase().includes(term)) {
           return true;
         }
@@ -2835,11 +2935,13 @@ function DataGrid({
   }, [rows, globalSearchTerm, enableSearch, columnKeys]);
   const totalSearchedRows = searchFilteredData.length;
   const totalPages = useMemo10(() => {
-    if (!enablePagination) return 1;
+    if (!enablePagination)
+      return 1;
     return Math.max(1, Math.ceil(totalSearchedRows / pageSize));
   }, [enablePagination, totalSearchedRows, pageSize]);
   const paginatedRows = useMemo10(() => {
-    if (!enablePagination) return searchFilteredData;
+    if (!enablePagination)
+      return searchFilteredData;
     const start = (currentPage - 1) * pageSize;
     const end = start + pageSize;
     return searchFilteredData.slice(start, end);
@@ -2848,7 +2950,8 @@ function DataGrid({
     setCurrentPage(1);
   }, [columnFilters, globalSearchTerm]);
   const selectionBounds = useMemo10(() => {
-    if (!selectionStart || !selectionEnd) return null;
+    if (!selectionStart || !selectionEnd)
+      return null;
     return {
       minRow: Math.min(selectionStart.row, selectionEnd.row),
       maxRow: Math.max(selectionStart.row, selectionEnd.row),
@@ -2857,16 +2960,19 @@ function DataGrid({
     };
   }, [selectionStart, selectionEnd]);
   const selectionStats = useMemo10(() => {
-    if (!selectionBounds) return null;
+    if (!selectionBounds)
+      return null;
     const { minRow, maxRow, minCol, maxCol } = selectionBounds;
     const values = [];
     let count = 0;
     for (let r = minRow; r <= maxRow; r++) {
       const row = rows[r];
-      if (!row) continue;
+      if (!row)
+        continue;
       for (let c = minCol; c <= maxCol; c++) {
         const colId = columnKeys[c];
-        if (!colId) continue;
+        if (!colId)
+          continue;
         const value = row.original[colId];
         count++;
         if (value !== null && value !== void 0 && value !== "") {
@@ -2877,19 +2983,23 @@ function DataGrid({
         }
       }
     }
-    if (values.length === 0) return { count, sum: null, avg: null, numericCount: 0 };
+    if (values.length === 0)
+      return { count, sum: null, avg: null, numericCount: 0 };
     const sum = values.reduce((a, b) => a + b, 0);
     const avg = sum / values.length;
     return { count, sum, avg, numericCount: values.length };
   }, [selectionBounds, rows, columnKeys]);
   useEffect7(() => {
-    if (typeof document === "undefined") return;
-    if (data.length === 0) return;
+    if (typeof document === "undefined")
+      return;
+    if (data.length === 0)
+      return;
     const widths = {};
     const sampleSize = Math.min(100, data.length);
     const canvas = document.createElement("canvas");
     const ctx = canvas.getContext("2d");
-    if (!ctx) return;
+    if (!ctx)
+      return;
     ctx.font = "13px system-ui, -apple-system, sans-serif";
     for (const key of columnKeys) {
       let maxWidth = ctx.measureText(key).width + 56;
@@ -2905,7 +3015,8 @@ function DataGrid({
   }, [data, columnKeys]);
   const startColumnResize = useCallback10(
     (columnId, event) => {
-      if (!enableColumnResize) return;
+      if (!enableColumnResize)
+        return;
       event.preventDefault();
       event.stopPropagation();
       setResizingColumnId(columnId);
@@ -2915,7 +3026,8 @@ function DataGrid({
     [enableColumnResize, columnWidths]
   );
   useEffect7(() => {
-    if (!resizingColumnId) return;
+    if (!resizingColumnId)
+      return;
     const handleResizeMove = (event) => {
       const diff = event.clientX - resizeStartX;
       const newWidth = Math.max(MIN_COL_WIDTH, Math.min(MAX_COL_WIDTH, resizeStartWidth + diff));
@@ -2936,7 +3048,8 @@ function DataGrid({
   }, [resizingColumnId, resizeStartX, resizeStartWidth]);
   const startVerticalResize = useCallback10(
     (event) => {
-      if (!enableVerticalResize) return;
+      if (!enableVerticalResize)
+        return;
       event.preventDefault();
       setIsResizingVertically(true);
       setVerticalResizeStartY(event.clientY);
@@ -2945,7 +3058,8 @@ function DataGrid({
     [enableVerticalResize, gridHeight]
   );
   useEffect7(() => {
-    if (!isResizingVertically) return;
+    if (!isResizingVertically)
+      return;
     const handleVerticalResizeMove = (event) => {
       const diff = event.clientY - verticalResizeStartY;
       const newHeight = Math.max(minHeight, Math.min(maxHeight, verticalResizeStartHeight + diff));
@@ -2963,7 +3077,8 @@ function DataGrid({
   }, [isResizingVertically, verticalResizeStartY, verticalResizeStartHeight, minHeight, maxHeight]);
   const handleExport = useCallback10(() => {
     if (viewMode === "pivot") {
-      if (!pivotResult) return;
+      if (!pivotResult)
+        return;
       const pivotFilename = exportFilename.replace(".csv", "-pivot.csv");
       exportPivotToCSV(
         {
@@ -3007,7 +3122,8 @@ function DataGrid({
     onExport
   ]);
   const copySelectionToClipboard = useCallback10(() => {
-    if (!selectionBounds || !enableClipboard) return;
+    if (!selectionBounds || !enableClipboard)
+      return;
     const text = formatSelectionForClipboard(
       rows.map((r) => r.original),
       columnKeys,
@@ -3164,7 +3280,8 @@ function DataGrid({
     [selectionBounds, selectedCell]
   );
   const formatStatValue = (value) => {
-    if (value === null) return "-";
+    if (value === null)
+      return "-";
     if (Math.abs(value) >= 1e3) {
       return value.toLocaleString("en-US", { maximumFractionDigits: 2 });
     }
@@ -3175,12 +3292,15 @@ function DataGrid({
     return !noFormatPatterns.test(columnId);
   };
   const formatCellValueDisplay = (value, columnId) => {
-    if (value === null || value === void 0) return "";
-    if (value === "") return "";
+    if (value === null || value === void 0)
+      return "";
+    if (value === "")
+      return "";
     const stats = getColumnStats(columnId);
     if (stats.type === "number") {
       const num = typeof value === "number" ? value : Number.parseFloat(String(value));
-      if (Number.isNaN(num)) return String(value);
+      if (Number.isNaN(num))
+        return String(value);
       if (shouldFormatNumber(columnId) && Math.abs(num) >= 1e3) {
         return num.toLocaleString("en-US", { maximumFractionDigits: 2 });
       }
@@ -3342,13 +3462,15 @@ function DataGrid({
                 ) }),
                 /* @__PURE__ */ jsxs6("span", { children: [
                   activeFilterCount,
-                  " filter",
+                  " ",
+                  "filter",
                   activeFilterCount > 1 ? "s" : ""
                 ] })
               ] }),
               globalSearchTerm && /* @__PURE__ */ jsx6("div", { className: "vpg-search-info", children: /* @__PURE__ */ jsxs6("span", { children: [
                 totalSearchedRows,
-                " match",
+                " ",
+                "match",
                 totalSearchedRows !== 1 ? "es" : ""
               ] }) })
             ] }),
@@ -3369,7 +3491,8 @@ function DataGrid({
                       }
                     ) }),
                     showPivotConfig ? "Hide" : "Show",
-                    " Config"
+                    " ",
+                    "Config"
                   ]
                 }
               ),
@@ -3491,7 +3614,7 @@ function DataGrid({
             /* @__PURE__ */ jsx6("button", { className: "vpg-clear-link", onClick: clearAllFilters, children: "Clear all filters" })
           ] }),
           !loading && filteredRowCount > 0 && /* @__PURE__ */ jsx6("div", { className: "vpg-table-wrapper", children: /* @__PURE__ */ jsxs6("table", { className: "vpg-table", style: { minWidth: `${totalTableWidth}px` }, children: [
-            /* @__PURE__ */ jsx6("thead", { children: /* @__PURE__ */ jsx6("tr", { children: columnKeys.map((colId, colIndex) => /* @__PURE__ */ jsxs6(
+            /* @__PURE__ */ jsx6("thead", { children: /* @__PURE__ */ jsx6("tr", { children: columnKeys.map((colId) => /* @__PURE__ */ jsxs6(
               "th",
               {
                 className: `vpg-header-cell ${hasActiveFilter(colId) ? "vpg-has-filter" : ""} ${getSortDirection(colId) !== null ? "vpg-is-sorted" : ""} ${activeFilterColumn === colId ? "vpg-is-active" : ""}`,
@@ -3620,7 +3743,7 @@ function DataGrid({
               onShowColumnTotalsChange: setPivotShowColumnTotals,
               onClearConfig: clearPivotConfig,
               onAutoSuggest: autoSuggestConfig,
-              onDragStart: (field, e) => setDraggingField(field),
+              onDragStart: (field, _e) => setDraggingField(field),
               onDragEnd: () => setDraggingField(null),
               onUpdateAggregation: updateValueFieldAggregation,
               onAddRowField: addRowField,
@@ -3672,11 +3795,13 @@ function DataGrid({
             totalSearchedRows !== totalRowCount && /* @__PURE__ */ jsxs6("span", { className: "vpg-filtered-note", children: [
               "(",
               totalRowCount.toLocaleString(),
-              " total)"
+              " ",
+              "total)"
             ] })
           ] }) : filteredRowCount === totalRowCount && totalSearchedRows === totalRowCount ? /* @__PURE__ */ jsxs6("span", { children: [
             totalRowCount.toLocaleString(),
-            " records"
+            " ",
+            "records"
           ] }) : /* @__PURE__ */ jsxs6(Fragment4, { children: [
             /* @__PURE__ */ jsx6("span", { className: "vpg-filtered-count", children: totalSearchedRows.toLocaleString() }),
             /* @__PURE__ */ jsx6("span", { className: "vpg-separator", children: "of" }),
@@ -3687,7 +3812,8 @@ function DataGrid({
             /* @__PURE__ */ jsx6("span", { className: "vpg-separator", children: "\u2022" }),
             /* @__PURE__ */ jsxs6("span", { children: [
               totalRowCount.toLocaleString(),
-              " source records"
+              " ",
+              "source records"
             ] })
           ] }) }),
           enablePagination && viewMode === "grid" && totalPages > 1 && /* @__PURE__ */ jsxs6("div", { className: "vpg-pagination", children: [
@@ -3726,9 +3852,12 @@ function DataGrid({
               }
             ),
             /* @__PURE__ */ jsxs6("span", { className: "vpg-page-info", children: [
-              "Page ",
+              "Page",
+              " ",
               currentPage,
-              " of ",
+              " ",
+              "of",
+              " ",
               totalPages
             ] }),
             /* @__PURE__ */ jsx6(