@smallwebco/tinypivot-react 1.0.51 → 1.0.53

package/dist/index.cjs

@@ -1,7 +1,9 @@
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -15,6 +17,14 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
@@ -29,10 +39,10 @@ __export(index_exports, {
   enableDemoMode: () => enableDemoMode,
   exportPivotToCSV: () => exportPivotToCSV,
   exportToCSV: () => exportToCSV,
-  formatCellValue: () => import_tinypivot_core2.formatCellValue,
+  formatCellValue: () => import_tinypivot_core3.formatCellValue,
   formatSelectionForClipboard: () => formatSelectionForClipboard,
-  getAggregationLabel: () => import_tinypivot_core5.getAggregationLabel,
-  getColumnUniqueValues: () => import_tinypivot_core2.getColumnUniqueValues,
+  getAggregationLabel: () => import_tinypivot_core6.getAggregationLabel,
+  getColumnUniqueValues: () => import_tinypivot_core3.getColumnUniqueValues,
   setLicenseKey: () => setLicenseKey,
   useColumnResize: () => useColumnResize,
   useExcelGrid: () => useExcelGrid,
@@ -234,21 +244,690 @@ function CalculatedFieldModal({
   return (0, import_react_dom.createPortal)(modalContent, document.body);
 }
 
+// src/components/ChartBuilder.tsx
+var import_tinypivot_core2 = require("@smallwebco/tinypivot-core");
+var import_react2 = require("react");
+var import_react_apexcharts = __toESM(require("react-apexcharts"), 1);
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function ChartBuilder({
+  data,
+  theme = "light",
+  onConfigChange
+}) {
+  const [chartConfig, setChartConfig] = (0, import_react2.useState)((0, import_tinypivot_core2.createDefaultChartConfig)());
+  const [draggingField, setDraggingField] = (0, import_react2.useState)(null);
+  const [dragOverZone, setDragOverZone] = (0, import_react2.useState)(null);
+  const fieldInfos = (0, import_react2.useMemo)(() => (0, import_tinypivot_core2.analyzeFieldsForChart)(data), [data]);
+  const dimensions = (0, import_react2.useMemo)(
+    () => fieldInfos.filter((f) => f.role === "dimension" || f.role === "temporal"),
+    [fieldInfos]
+  );
+  const measures = (0, import_react2.useMemo)(
+    () => fieldInfos.filter((f) => f.role === "measure"),
+    [fieldInfos]
+  );
+  const guidance = (0, import_react2.useMemo)(() => (0, import_tinypivot_core2.getChartGuidance)(chartConfig), [chartConfig]);
+  const chartIsValid = (0, import_react2.useMemo)(() => (0, import_tinypivot_core2.isChartConfigValid)(chartConfig), [chartConfig]);
+  const selectedChartType = (0, import_react2.useMemo)(
+    () => import_tinypivot_core2.CHART_TYPES.find((ct) => ct.type === chartConfig.type),
+    [chartConfig.type]
+  );
+  const isScatterType = (0, import_react2.useMemo)(
+    () => ["scatter", "bubble"].includes(chartConfig.type),
+    [chartConfig.type]
+  );
+  const isHeatmapType = (0, import_react2.useMemo)(
+    () => chartConfig.type === "heatmap",
+    [chartConfig.type]
+  );
+  const zoneLabels = (0, import_react2.useMemo)(() => {
+    const type = chartConfig.type;
+    switch (type) {
+      case "scatter":
+      case "bubble":
+        return {
+          xAxis: "X-Axis (measure)",
+          xAxisPlaceholder: "Drop a measure",
+          yAxis: "Y-Axis (measure)",
+          yAxisPlaceholder: "Drop a measure",
+          series: "Color by (optional)",
+          seriesPlaceholder: "Group points by dimension",
+          showSize: type === "bubble",
+          showSeries: true
+        };
+      case "heatmap":
+        return {
+          xAxis: "X-Axis (dimension)",
+          xAxisPlaceholder: "Drop a dimension",
+          yAxis: "Y-Axis (dimension)",
+          yAxisPlaceholder: "Drop a dimension",
+          series: "Value / Intensity",
+          seriesPlaceholder: "Drop a measure for color intensity",
+          showSize: false,
+          showSeries: true
+        };
+      case "pie":
+      case "donut":
+        return {
+          xAxis: "Slices (dimension)",
+          xAxisPlaceholder: "Drop a dimension",
+          yAxis: "Values (measure)",
+          yAxisPlaceholder: "Drop a measure",
+          series: "",
+          seriesPlaceholder: "",
+          showSize: false,
+          showSeries: false
+        };
+      case "radar":
+        return {
+          xAxis: "Axes (dimension)",
+          xAxisPlaceholder: "Drop a dimension",
+          yAxis: "Values (measure)",
+          yAxisPlaceholder: "Drop a measure",
+          series: "Compare by (optional)",
+          seriesPlaceholder: "Group by dimension",
+          showSize: false,
+          showSeries: true
+        };
+      default:
+        return {
+          xAxis: "X-Axis (dimension)",
+          xAxisPlaceholder: "Drop a dimension",
+          yAxis: "Y-Axis (measure)",
+          yAxisPlaceholder: "Drop a measure",
+          series: "Color / Series (optional)",
+          seriesPlaceholder: "Group by dimension",
+          showSize: false,
+          showSeries: true
+        };
+    }
+  }, [chartConfig.type]);
+  const handleDragStart = (0, import_react2.useCallback)((field, event) => {
+    setDraggingField(field);
+    event.dataTransfer?.setData("text/plain", field.field);
+  }, []);
+  const handleDragEnd = (0, import_react2.useCallback)(() => {
+    setDraggingField(null);
+    setDragOverZone(null);
+  }, []);
+  const handleDragOver = (0, import_react2.useCallback)((zone, event) => {
+    event.preventDefault();
+    setDragOverZone(zone);
+  }, []);
+  const handleDragLeave = (0, import_react2.useCallback)(() => {
+    setDragOverZone(null);
+  }, []);
+  const handleDrop = (0, import_react2.useCallback)((zone, event) => {
+    event.preventDefault();
+    setDragOverZone(null);
+    if (!draggingField)
+      return;
+    const field = draggingField;
+    const chartField = {
+      field: field.field,
+      label: field.label,
+      role: field.role,
+      aggregation: field.role === "measure" ? "sum" : void 0
+    };
+    let newConfig = { ...chartConfig };
+    switch (zone) {
+      case "xAxis":
+        newConfig = { ...newConfig, xAxis: chartField };
+        break;
+      case "yAxis":
+        newConfig = { ...newConfig, yAxis: chartField };
+        break;
+      case "series":
+        newConfig = { ...newConfig, seriesField: chartField };
+        break;
+      case "size":
+        newConfig = { ...newConfig, sizeField: chartField };
+        break;
+      case "color":
+        newConfig = { ...newConfig, colorField: chartField };
+        break;
+    }
+    setChartConfig(newConfig);
+    onConfigChange?.(newConfig);
+  }, [chartConfig, draggingField, onConfigChange]);
+  const removeField = (0, import_react2.useCallback)((zone) => {
+    let newConfig = { ...chartConfig };
+    switch (zone) {
+      case "xAxis":
+        newConfig = { ...newConfig, xAxis: void 0 };
+        break;
+      case "yAxis":
+        newConfig = { ...newConfig, yAxis: void 0 };
+        break;
+      case "series":
+        newConfig = { ...newConfig, seriesField: void 0 };
+        break;
+      case "size":
+        newConfig = { ...newConfig, sizeField: void 0 };
+        break;
+      case "color":
+        newConfig = { ...newConfig, colorField: void 0 };
+        break;
+    }
+    setChartConfig(newConfig);
+    onConfigChange?.(newConfig);
+  }, [chartConfig, onConfigChange]);
+  const selectChartType = (0, import_react2.useCallback)((type) => {
+    const newConfig = { ...chartConfig, type };
+    setChartConfig(newConfig);
+    onConfigChange?.(newConfig);
+  }, [chartConfig, onConfigChange]);
+  const updateAggregation = (0, import_react2.useCallback)((zone, aggregation) => {
+    let field;
+    switch (zone) {
+      case "xAxis":
+        field = chartConfig.xAxis;
+        break;
+      case "yAxis":
+        field = chartConfig.yAxis;
+        break;
+      case "size":
+        field = chartConfig.sizeField;
+        break;
+      case "color":
+        field = chartConfig.colorField;
+        break;
+      default:
+        return;
+    }
+    if (!field)
+      return;
+    const updated = { ...field, aggregation };
+    let newConfig = { ...chartConfig };
+    switch (zone) {
+      case "xAxis":
+        newConfig = { ...newConfig, xAxis: updated };
+        break;
+      case "yAxis":
+        newConfig = { ...newConfig, yAxis: updated };
+        break;
+      case "size":
+        newConfig = { ...newConfig, sizeField: updated };
+        break;
+      case "color":
+        newConfig = { ...newConfig, colorField: updated };
+        break;
+    }
+    setChartConfig(newConfig);
+    onConfigChange?.(newConfig);
+  }, [chartConfig, onConfigChange]);
+  const getApexChartType = (0, import_react2.useCallback)((type) => {
+    const mapping = {
+      bar: "bar",
+      line: "line",
+      area: "area",
+      pie: "pie",
+      donut: "donut",
+      radar: "radar",
+      scatter: "scatter",
+      bubble: "bubble",
+      heatmap: "heatmap"
+    };
+    return mapping[type] || "bar";
+  }, []);
+  const formatValue = (0, import_react2.useCallback)((val, format, decimals) => {
+    if (val === null || val === void 0)
+      return "";
+    if (typeof val !== "number")
+      return String(val);
+    if (Number.isNaN(val))
+      return "";
+    const dec = decimals ?? 0;
+    if (format === "percent") {
+      return `${val.toFixed(dec)}%`;
+    }
+    if (format === "currency") {
+      return `$${val.toLocaleString(void 0, { minimumFractionDigits: dec, maximumFractionDigits: dec })}`;
+    }
+    if (Math.abs(val) >= 1e3) {
+      return val.toLocaleString(void 0, { maximumFractionDigits: dec });
+    }
+    return val.toFixed(dec);
+  }, []);
+  const chartOptions = (0, import_react2.useMemo)(() => {
+    const isDark = theme === "dark";
+    const config = chartConfig;
+    const options = config.options || {};
+    const baseOptions = {
+      chart: {
+        type: getApexChartType(config.type),
+        background: "transparent",
+        foreColor: isDark ? "#e2e8f0" : "#334155",
+        toolbar: {
+          show: true,
+          tools: {
+            download: true,
+            selection: false,
+            zoom: options.enableZoom ?? false,
+            zoomin: options.enableZoom ?? false,
+            zoomout: options.enableZoom ?? false,
+            pan: false,
+            reset: options.enableZoom ?? false
+          },
+          export: {
+            csv: { filename: "chart-data" },
+            svg: { filename: "chart" },
+            png: { filename: "chart" }
+          }
+        },
+        animations: {
+          enabled: options.animated ?? true,
+          speed: 400,
+          dynamicAnimation: { enabled: true, speed: 300 }
+        },
+        fontFamily: "system-ui, -apple-system, sans-serif"
+      },
+      colors: options.colors || import_tinypivot_core2.CHART_COLORS,
+      theme: {
+        mode: isDark ? "dark" : "light"
+      },
+      grid: {
+        show: options.showGrid ?? true,
+        borderColor: isDark ? "#334155" : "#e2e8f0"
+      },
+      legend: {
+        show: options.showLegend ?? true,
+        position: options.legendPosition || "top"
+      },
+      dataLabels: {
+        enabled: options.showDataLabels ?? false
+      },
+      tooltip: {
+        theme: isDark ? "dark" : "light",
+        style: {
+          fontSize: "12px"
+        }
+      },
+      stroke: {
+        curve: "smooth",
+        width: config.type === "line" ? 3 : config.type === "area" ? 2 : 0
+      },
+      fill: {
+        opacity: config.type === "area" ? 0.4 : 1
+      }
+    };
+    if (config.xAxis) {
+      baseOptions.xaxis = {
+        ...baseOptions.xaxis,
+        title: { text: options.xAxisTitle || config.xAxis.label },
+        labels: {
+          style: { colors: isDark ? "#94a3b8" : "#64748b" }
+        }
+      };
+    }
+    if (config.yAxis && !["pie", "donut", "radar"].includes(config.type)) {
+      baseOptions.yaxis = {
+        title: { text: options.yAxisTitle || config.yAxis.label },
+        labels: {
+          style: { colors: isDark ? "#94a3b8" : "#64748b" },
+          formatter: (val) => formatValue(val, options.valueFormat, options.decimals)
+        }
+      };
+    }
+    if (options.title) {
+      baseOptions.title = {
+        text: options.title,
+        style: {
+          fontSize: "16px",
+          fontWeight: "600",
+          color: isDark ? "#e2e8f0" : "#334155"
+        }
+      };
+    }
+    if (options.stacked && ["bar", "area"].includes(config.type)) {
+      baseOptions.chart.stacked = true;
+    }
+    if (config.type === "pie" || config.type === "donut") {
+      baseOptions.plotOptions = {
+        pie: {
+          donut: {
+            size: config.type === "donut" ? "55%" : "0%",
+            labels: {
+              show: config.type === "donut",
+              total: {
+                show: true,
+                label: "Total",
+                formatter: (w) => {
+                  const total = w.globals.seriesTotals.reduce((a, b) => a + b, 0);
+                  return formatValue(total, options.valueFormat, options.decimals);
+                }
+              }
+            }
+          }
+        }
+      };
+    }
+    if (config.type === "radar") {
+      baseOptions.plotOptions = {
+        radar: {
+          polygons: {
+            strokeColors: isDark ? "#334155" : "#e2e8f0",
+            fill: { colors: isDark ? ["#1e293b", "#0f172a"] : ["#f8fafc", "#f1f5f9"] }
+          }
+        }
+      };
+    }
+    return baseOptions;
+  }, [chartConfig, theme, getApexChartType, formatValue]);
+  const chartSeries = (0, import_react2.useMemo)(() => {
+    const config = chartConfig;
+    if (!chartIsValid)
+      return [];
+    if (config.type === "pie" || config.type === "donut") {
+      const chartData2 = (0, import_tinypivot_core2.processChartDataForPie)(data, config);
+      return chartData2.series[0]?.data || [];
+    }
+    if (config.type === "scatter" || config.type === "bubble") {
+      const scatterData = (0, import_tinypivot_core2.processChartDataForScatter)(data, config);
+      return scatterData.series;
+    }
+    if (config.type === "heatmap") {
+      const heatmapData = (0, import_tinypivot_core2.processChartDataForHeatmap)(data, config);
+      return heatmapData.series;
+    }
+    const chartData = (0, import_tinypivot_core2.processChartData)(data, config);
+    return chartData.series;
+  }, [data, chartConfig, chartIsValid]);
+  const chartLabels = (0, import_react2.useMemo)(() => {
+    const config = chartConfig;
+    if (!chartIsValid)
+      return [];
+    if (config.type === "pie" || config.type === "donut") {
+      const chartData2 = (0, import_tinypivot_core2.processChartDataForPie)(data, config);
+      return chartData2.categories;
+    }
+    const chartData = (0, import_tinypivot_core2.processChartData)(data, config);
+    return chartData.categories;
+  }, [data, chartConfig, chartIsValid]);
+  const chartOptionsWithCategories = (0, import_react2.useMemo)(() => {
+    const options = { ...chartOptions };
+    const config = chartConfig;
+    if (!["pie", "donut", "scatter", "bubble", "heatmap"].includes(config.type)) {
+      options.xaxis = {
+        ...options.xaxis,
+        categories: chartLabels
+      };
+    }
+    if (config.type === "pie" || config.type === "donut") {
+      options.labels = chartLabels;
+    }
+    if (config.type === "heatmap") {
+      options.chart = {
+        ...options.chart,
+        type: "heatmap"
+      };
+      options.xaxis = {
+        ...options.xaxis,
+        type: "category"
+      };
+      options.dataLabels = {
+        enabled: true,
+        style: {
+          colors: ["#fff"],
+          fontSize: "10px"
+        },
+        formatter: (val) => {
+          if (val === null || val === void 0)
+            return "";
+          if (typeof val !== "number")
+            return String(val);
+          if (val >= 1e6)
+            return `${(val / 1e6).toFixed(1)}M`;
+          if (val >= 1e3)
+            return `${(val / 1e3).toFixed(0)}K`;
+          return Math.round(val).toLocaleString();
+        }
+      };
+      options.plotOptions = {
+        heatmap: {
+          shadeIntensity: 0.5,
+          radius: 2,
+          enableShades: true,
+          colorScale: {
+            inverse: false
+          }
+        }
+      };
+      options.colors = ["#6366f1"];
+      options.legend = { show: false };
+    }
+    return options;
+  }, [chartOptions, chartConfig, chartLabels]);
+  const getChartIcon = (0, import_react2.useCallback)((type) => {
+    const icons = {
+      bar: "M3 3v18h18V3H3zm4 14H5v-6h2v6zm4 0H9V7h2v10zm4 0h-2V9h2v8zm4 0h-2v-4h2v4z",
+      line: "M3.5 18.5l6-6 4 4 8-8M14.5 8.5h6v6",
+      area: "M3 17l6-6 4 4 8-8v10H3z",
+      pie: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8v8l5.66 5.66C14.28 19.04 13.18 20 12 20z",
+      donut: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 14c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4z",
+      scatter: "M7 14a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm5-6a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm5 8a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm-3 4a2 2 0 1 0 0-4 2 2 0 0 0 0 4z",
+      bubble: "M7 14a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm5-5a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm5 7a4 4 0 1 0 0-8 4 4 0 0 0 0 8z",
+      heatmap: "M3 3h4v4H3V3zm6 0h4v4H9V3zm6 0h4v4h-4V3zM3 9h4v4H3V9zm6 0h4v4H9V9zm6 0h4v4h-4V9zM3 15h4v4H3v-4zm6 0h4v4H9v-4zm6 0h4v4h-4v-4z",
+      radar: "M12 2L4 6v6c0 5.55 3.84 10.74 8 12 4.16-1.26 8-6.45 8-12V6l-8-4zm0 3.18l6 3v5.09c0 4.08-2.76 7.91-6 9.14V5.18z"
+    };
+    return icons[type] || icons.bar;
+  }, []);
+  (0, import_react2.useEffect)(() => {
+    onConfigChange?.(chartConfig);
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "vpg-chart-builder", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "vpg-chart-type-bar", children: import_tinypivot_core2.CHART_TYPES.map((ct) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+      "button",
+      {
+        className: `vpg-chart-type-btn ${chartConfig.type === ct.type ? "active" : ""}`,
+        title: ct.description,
+        onClick: () => selectChartType(ct.type),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { className: "vpg-icon", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: getChartIcon(ct.type) }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "vpg-chart-type-label", children: ct.label.replace(" Chart", "") })
+        ]
+      },
+      ct.type
+    )) }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "vpg-chart-builder-content", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "vpg-chart-fields-panel", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "vpg-chart-fields-section", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("h4", { className: "vpg-chart-fields-title", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { className: "vpg-icon-sm", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M4 6h16M4 12h10M4 18h6" }) }),
+            "Dimensions",
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "vpg-chart-fields-hint", children: "(text/date)" })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "vpg-chart-fields-list", children: [
+            dimensions.map((field) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+              "div",
+              {
+                className: "vpg-chart-field-chip vpg-field-dimension",
+                draggable: true,
+                onDragStart: (e) => handleDragStart(field, e),
+                onDragEnd: handleDragEnd,
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "vpg-field-name", children: field.label }),
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "vpg-field-type", children: field.role === "temporal" ? "date" : "text" })
+                ]
+              },
+              field.field
+            )),
+            dimensions.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "vpg-chart-fields-empty", children: "No dimension fields detected" })
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "vpg-chart-fields-section", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("h4", { className: "vpg-chart-fields-title", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { className: "vpg-icon-sm", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M16 8v8M12 11v5M8 14v2M4 4v16h16" }) }),
+            "Measures",
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "vpg-chart-fields-hint", children: "(numbers)" })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "vpg-chart-fields-list", children: [
+            measures.map((field) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+              "div",
+              {
+                className: "vpg-chart-field-chip vpg-field-measure",
+                draggable: true,
+                onDragStart: (e) => handleDragStart(field, e),
+                onDragEnd: handleDragEnd,
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "vpg-field-name", children: field.label }),
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "vpg-field-type", children: "#" })
+                ]
+              },
+              field.field
+            )),
+            measures.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "vpg-chart-fields-empty", children: "No numeric fields detected" })
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "vpg-chart-config-panel", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "vpg-chart-drop-zone-wrapper", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { className: "vpg-chart-zone-label", children: zoneLabels.xAxis }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            "div",
+            {
+              className: `vpg-chart-drop-zone ${dragOverZone === "xAxis" ? "drag-over" : ""} ${chartConfig.xAxis ? "has-field" : ""}`,
+              onDragOver: (e) => handleDragOver("xAxis", e),
+              onDragLeave: handleDragLeave,
+              onDrop: (e) => handleDrop("xAxis", e),
+              children: chartConfig.xAxis ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "vpg-zone-field-name", children: chartConfig.xAxis.label }),
+                isScatterType && chartConfig.xAxis.role === "measure" && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                  "select",
+                  {
+                    className: "vpg-zone-aggregation",
+                    value: chartConfig.xAxis.aggregation || "sum",
+                    onChange: (e) => updateAggregation("xAxis", e.target.value),
+                    children: import_tinypivot_core2.CHART_AGGREGATIONS.map((agg) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("option", { value: agg.value, children: agg.symbol }, agg.value))
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { className: "vpg-zone-remove-btn", onClick: () => removeField("xAxis"), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { className: "vpg-icon-xs", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M6 18L18 6M6 6l12 12" }) }) })
+              ] }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "vpg-zone-placeholder", children: zoneLabels.xAxisPlaceholder })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "vpg-chart-drop-zone-wrapper", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { className: "vpg-chart-zone-label", children: zoneLabels.yAxis }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            "div",
+            {
+              className: `vpg-chart-drop-zone ${dragOverZone === "yAxis" ? "drag-over" : ""} ${chartConfig.yAxis ? "has-field" : ""}`,
+              onDragOver: (e) => handleDragOver("yAxis", e),
+              onDragLeave: handleDragLeave,
+              onDrop: (e) => handleDrop("yAxis", e),
+              children: chartConfig.yAxis ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "vpg-zone-field-name", children: chartConfig.yAxis.label }),
+                chartConfig.yAxis.role === "measure" && !isHeatmapType && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                  "select",
+                  {
+                    className: "vpg-zone-aggregation",
+                    value: chartConfig.yAxis.aggregation || "sum",
+                    onChange: (e) => updateAggregation("yAxis", e.target.value),
+                    children: import_tinypivot_core2.CHART_AGGREGATIONS.map((agg) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("option", { value: agg.value, children: agg.symbol }, agg.value))
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { className: "vpg-zone-remove-btn", onClick: () => removeField("yAxis"), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { className: "vpg-icon-xs", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M6 18L18 6M6 6l12 12" }) }) })
+              ] }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "vpg-zone-placeholder", children: zoneLabels.yAxisPlaceholder })
+            }
+          )
+        ] }),
+        zoneLabels.showSeries && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "vpg-chart-drop-zone-wrapper", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { className: "vpg-chart-zone-label", children: zoneLabels.series }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            "div",
+            {
+              className: `vpg-chart-drop-zone vpg-zone-optional ${dragOverZone === "series" ? "drag-over" : ""} ${(isHeatmapType ? chartConfig.colorField : chartConfig.seriesField) ? "has-field" : ""}`,
+              onDragOver: (e) => handleDragOver(isHeatmapType ? "color" : "series", e),
+              onDragLeave: handleDragLeave,
+              onDrop: (e) => handleDrop(isHeatmapType ? "color" : "series", e),
+              children: (isHeatmapType ? chartConfig.colorField : chartConfig.seriesField) ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "vpg-zone-field-name", children: isHeatmapType ? chartConfig.colorField?.label : chartConfig.seriesField?.label }),
+                isHeatmapType && chartConfig.colorField?.role === "measure" && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                  "select",
+                  {
+                    className: "vpg-zone-aggregation",
+                    value: chartConfig.colorField?.aggregation || "sum",
+                    onChange: (e) => updateAggregation("color", e.target.value),
+                    children: import_tinypivot_core2.CHART_AGGREGATIONS.map((agg) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("option", { value: agg.value, children: agg.symbol }, agg.value))
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { className: "vpg-zone-remove-btn", onClick: () => removeField(isHeatmapType ? "color" : "series"), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { className: "vpg-icon-xs", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M6 18L18 6M6 6l12 12" }) }) })
+              ] }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "vpg-zone-placeholder", children: zoneLabels.seriesPlaceholder })
+            }
+          )
+        ] }),
+        zoneLabels.showSize && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "vpg-chart-drop-zone-wrapper", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { className: "vpg-chart-zone-label", children: "Size (number)" }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            "div",
+            {
+              className: `vpg-chart-drop-zone vpg-zone-optional ${dragOverZone === "size" ? "drag-over" : ""} ${chartConfig.sizeField ? "has-field" : ""}`,
+              onDragOver: (e) => handleDragOver("size", e),
+              onDragLeave: handleDragLeave,
+              onDrop: (e) => handleDrop("size", e),
+              children: chartConfig.sizeField ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "vpg-zone-field-name", children: chartConfig.sizeField.label }),
+                chartConfig.sizeField.role === "measure" && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                  "select",
+                  {
+                    className: "vpg-zone-aggregation",
+                    value: chartConfig.sizeField.aggregation || "sum",
+                    onChange: (e) => updateAggregation("size", e.target.value),
+                    children: import_tinypivot_core2.CHART_AGGREGATIONS.map((agg) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("option", { value: agg.value, children: agg.symbol }, agg.value))
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { className: "vpg-zone-remove-btn", onClick: () => removeField("size"), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { className: "vpg-icon-xs", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M6 18L18 6M6 6l12 12" }) }) })
+              ] }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "vpg-zone-placeholder", children: "Drop a number for bubble size" })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "vpg-chart-guidance", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("svg", { className: "vpg-icon-sm", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M12 16v-4M12 8h.01" })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: guidance })
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "vpg-chart-preview-panel", children: chartIsValid ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "vpg-chart-container", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        import_react_apexcharts.default,
+        {
+          type: getApexChartType(chartConfig.type),
+          options: chartOptionsWithCategories,
+          series: chartSeries,
+          height: "100%"
+        },
+        `${chartConfig.type}-${JSON.stringify(chartConfig.xAxis)}-${JSON.stringify(chartConfig.yAxis)}`
+      ) }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "vpg-chart-empty-state", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { className: "vpg-icon-lg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: getChartIcon(chartConfig.type) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h3", { children: "Build your chart" }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { children: "Drag fields from the left panel to configure your visualization" }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "vpg-chart-hint", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("strong", { children: selectedChartType?.label }),
+          ":",
+          " ",
+          selectedChartType?.description
+        ] })
+      ] }) })
+    ] })
+  ] });
+}
+
 // src/components/ColumnFilter.tsx
-var import_react3 = require("react");
+var import_react4 = require("react");
 
 // src/components/NumericRangeFilter.tsx
-var import_react2 = require("react");
-var import_jsx_runtime2 = require("react/jsx-runtime");
+var import_react3 = require("react");
+var import_jsx_runtime3 = require("react/jsx-runtime");
 function NumericRangeFilter({
   dataMin,
   dataMax,
   currentRange,
   onChange
 }) {
-  const [localMin, setLocalMin] = (0, import_react2.useState)(currentRange?.min ?? null);
-  const [localMax, setLocalMax] = (0, import_react2.useState)(currentRange?.max ?? null);
-  const step = (0, import_react2.useMemo)(() => {
+  const [localMin, setLocalMin] = (0, import_react3.useState)(currentRange?.min ?? null);
+  const [localMax, setLocalMax] = (0, import_react3.useState)(currentRange?.max ?? null);
+  const step = (0, import_react3.useMemo)(() => {
     const range = dataMax - dataMin;
     if (range === 0)
       return 1;
@@ -262,7 +941,7 @@ function NumericRangeFilter({
       return 10;
     return 10 ** (Math.floor(Math.log10(range)) - 2);
   }, [dataMin, dataMax]);
-  const formatValue = (0, import_react2.useCallback)((val) => {
+  const formatValue = (0, import_react3.useCallback)((val) => {
     if (val === null)
       return "";
     if (Number.isInteger(val))
@@ -270,17 +949,17 @@ function NumericRangeFilter({
     return val.toLocaleString(void 0, { maximumFractionDigits: 2 });
   }, []);
   const isFilterActive = localMin !== null || localMax !== null;
-  const minPercent = (0, import_react2.useMemo)(() => {
+  const minPercent = (0, import_react3.useMemo)(() => {
     if (localMin === null || dataMax === dataMin)
       return 0;
     return (localMin - dataMin) / (dataMax - dataMin) * 100;
   }, [localMin, dataMin, dataMax]);
-  const maxPercent = (0, import_react2.useMemo)(() => {
+  const maxPercent = (0, import_react3.useMemo)(() => {
     if (localMax === null || dataMax === dataMin)
       return 100;
     return (localMax - dataMin) / (dataMax - dataMin) * 100;
   }, [localMax, dataMin, dataMax]);
-  const handleMinSlider = (0, import_react2.useCallback)((event) => {
+  const handleMinSlider = (0, import_react3.useCallback)((event) => {
     const value = Number.parseFloat(event.target.value);
     setLocalMin(() => {
       if (localMax !== null && value > localMax) {
@@ -289,7 +968,7 @@ function NumericRangeFilter({
       return value;
     });
   }, [localMax]);
-  const handleMaxSlider = (0, import_react2.useCallback)((event) => {
+  const handleMaxSlider = (0, import_react3.useCallback)((event) => {
     const value = Number.parseFloat(event.target.value);
     setLocalMax(() => {
       if (localMin !== null && value < localMin) {
@@ -298,14 +977,14 @@ function NumericRangeFilter({
       return value;
     });
   }, [localMin]);
-  const handleSliderChange = (0, import_react2.useCallback)(() => {
+  const handleSliderChange = (0, import_react3.useCallback)(() => {
     if (localMin === null && localMax === null) {
       onChange(null);
     } else {
       onChange({ min: localMin, max: localMax });
     }
   }, [localMin, localMax, onChange]);
-  const handleMinInput = (0, import_react2.useCallback)((event) => {
+  const handleMinInput = (0, import_react3.useCallback)((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)));
@@ -313,7 +992,7 @@ function NumericRangeFilter({
       setLocalMin(null);
     }
   }, [dataMin, dataMax, localMax]);
-  const handleMaxInput = (0, import_react2.useCallback)((event) => {
+  const handleMaxInput = (0, import_react3.useCallback)((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)));
@@ -321,39 +1000,39 @@ function NumericRangeFilter({
       setLocalMax(null);
     }
   }, [dataMin, dataMax, localMin]);
-  const handleInputBlur = (0, import_react2.useCallback)(() => {
+  const handleInputBlur = (0, import_react3.useCallback)(() => {
     if (localMin === null && localMax === null) {
       onChange(null);
     } else {
       onChange({ min: localMin, max: localMax });
     }
   }, [localMin, localMax, onChange]);
-  const clearFilter = (0, import_react2.useCallback)(() => {
+  const clearFilter = (0, import_react3.useCallback)(() => {
     setLocalMin(null);
     setLocalMax(null);
     onChange(null);
   }, [onChange]);
-  const setFullRange = (0, import_react2.useCallback)(() => {
+  const setFullRange = (0, import_react3.useCallback)(() => {
     setLocalMin(dataMin);
     setLocalMax(dataMax);
     onChange({ min: dataMin, max: dataMax });
   }, [dataMin, dataMax, onChange]);
-  (0, import_react2.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     setLocalMin(currentRange?.min ?? null);
     setLocalMax(currentRange?.max ?? null);
   }, [currentRange]);
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "vpg-range-filter", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "vpg-range-info", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "vpg-range-label", children: "Data range:" }),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "vpg-range-bounds", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "vpg-range-filter", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "vpg-range-info", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "vpg-range-label", children: "Data range:" }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: "vpg-range-bounds", children: [
         formatValue(dataMin),
         " ",
         "\u2013",
         formatValue(dataMax)
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "vpg-slider-container", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "vpg-slider-track", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "vpg-slider-container", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "vpg-slider-track", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
         "div",
         {
           className: "vpg-slider-fill",
@@ -363,7 +1042,7 @@ function NumericRangeFilter({
           }
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
         "input",
         {
           type: "range",
@@ -377,7 +1056,7 @@ function NumericRangeFilter({
           onTouchEnd: handleSliderChange
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
         "input",
         {
           type: "range",
@@ -392,10 +1071,10 @@ function NumericRangeFilter({
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "vpg-range-inputs", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "vpg-input-group", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { className: "vpg-input-label", children: "Min" }),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "vpg-range-inputs", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "vpg-input-group", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("label", { className: "vpg-input-label", children: "Min" }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
           "input",
           {
             type: "number",
@@ -408,10 +1087,10 @@ function NumericRangeFilter({
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "vpg-input-separator", children: "to" }),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "vpg-input-group", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { className: "vpg-input-label", children: "Max" }),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "vpg-input-separator", children: "to" }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "vpg-input-group", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("label", { className: "vpg-input-label", children: "Max" }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
           "input",
           {
             type: "number",
@@ -425,15 +1104,15 @@ function NumericRangeFilter({
         )
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "vpg-range-actions", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "vpg-range-actions", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
         "button",
         {
           className: "vpg-range-btn",
           disabled: !isFilterActive,
           onClick: clearFilter,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { className: "vpg-icon-xs", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { className: "vpg-icon-xs", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
               "path",
               {
                 strokeLinecap: "round",
@@ -446,8 +1125,8 @@ function NumericRangeFilter({
           ]
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("button", { className: "vpg-range-btn", onClick: setFullRange, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { className: "vpg-icon-xs", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("button", { className: "vpg-range-btn", onClick: setFullRange, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { className: "vpg-icon-xs", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
           "path",
           {
             strokeLinecap: "round",
@@ -459,8 +1138,8 @@ function NumericRangeFilter({
         "Full Range"
       ] })
     ] }),
-    isFilterActive && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "vpg-filter-summary", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { className: "vpg-icon-xs", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    isFilterActive && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "vpg-filter-summary", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { className: "vpg-icon-xs", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
         "path",
         {
           strokeLinecap: "round",
@@ -469,15 +1148,15 @@ function NumericRangeFilter({
           d: "M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { children: [
         "Showing values",
         " ",
-        localMin !== null && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("strong", { children: [
+        localMin !== null && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("strong", { children: [
           "\u2265",
           formatValue(localMin)
         ] }),
         localMin !== null && localMax !== null && " and ",
-        localMax !== null && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("strong", { children: [
+        localMax !== null && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("strong", { children: [
           "\u2264",
           formatValue(localMax)
         ] })
@@ -487,7 +1166,7 @@ function NumericRangeFilter({
 }
 
 // src/components/ColumnFilter.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 function ColumnFilter({
   columnName,
   stats,
@@ -499,33 +1178,33 @@ function ColumnFilter({
   onClose,
   onRangeFilter
 }) {
-  const [searchQuery, setSearchQuery] = (0, import_react3.useState)("");
-  const [localSelected, setLocalSelected] = (0, import_react3.useState)(new Set(selectedValues));
-  const dropdownRef = (0, import_react3.useRef)(null);
-  const searchInputRef = (0, import_react3.useRef)(null);
+  const [searchQuery, setSearchQuery] = (0, import_react4.useState)("");
+  const [localSelected, setLocalSelected] = (0, import_react4.useState)(new Set(selectedValues));
+  const dropdownRef = (0, import_react4.useRef)(null);
+  const searchInputRef = (0, import_react4.useRef)(null);
   const isNumericColumn = stats.type === "number" && stats.numericMin !== void 0 && stats.numericMax !== void 0;
-  const [filterMode, setFilterMode] = (0, import_react3.useState)(numericRange ? "range" : "values");
-  const [localRange, setLocalRange] = (0, import_react3.useState)(numericRange ?? null);
+  const [filterMode, setFilterMode] = (0, import_react4.useState)(numericRange ? "range" : "values");
+  const [localRange, setLocalRange] = (0, import_react4.useState)(numericRange ?? null);
   const hasBlankValues = stats.nullCount > 0;
-  const filteredValues = (0, import_react3.useMemo)(() => {
+  const filteredValues = (0, import_react4.useMemo)(() => {
     const values = stats.uniqueValues;
     if (!searchQuery)
       return values;
     const query = searchQuery.toLowerCase();
     return values.filter((v) => v.toLowerCase().includes(query));
   }, [stats.uniqueValues, searchQuery]);
-  const allValues = (0, import_react3.useMemo)(() => {
+  const allValues = (0, import_react4.useMemo)(() => {
     const values = [...filteredValues];
     if (hasBlankValues && (!searchQuery || "(blank)".includes(searchQuery.toLowerCase()))) {
       values.unshift("(blank)");
     }
     return values;
   }, [filteredValues, hasBlankValues, searchQuery]);
-  const _isAllSelected = (0, import_react3.useMemo)(
+  const _isAllSelected = (0, import_react4.useMemo)(
     () => allValues.every((v) => localSelected.has(v)),
     [allValues, localSelected]
   );
-  const toggleValue = (0, import_react3.useCallback)((value) => {
+  const toggleValue = (0, import_react4.useCallback)((value) => {
     setLocalSelected((prev) => {
       const next = new Set(prev);
       if (next.has(value)) {
@@ -536,7 +1215,7 @@ function ColumnFilter({
       return next;
     });
   }, []);
-  const selectAll = (0, import_react3.useCallback)(() => {
+  const selectAll = (0, import_react4.useCallback)(() => {
     setLocalSelected((prev) => {
       const next = new Set(prev);
       for (const value of allValues) {
@@ -545,10 +1224,10 @@ function ColumnFilter({
       return next;
     });
   }, [allValues]);
-  const clearAll = (0, import_react3.useCallback)(() => {
+  const clearAll = (0, import_react4.useCallback)(() => {
     setLocalSelected(/* @__PURE__ */ new Set());
   }, []);
-  const applyFilter = (0, import_react3.useCallback)(() => {
+  const applyFilter = (0, import_react4.useCallback)(() => {
     if (localSelected.size === 0) {
       onFilter([]);
     } else {
@@ -556,30 +1235,30 @@ function ColumnFilter({
     }
     onClose();
   }, [localSelected, onFilter, onClose]);
-  const sortAscending = (0, import_react3.useCallback)(() => {
+  const sortAscending = (0, import_react4.useCallback)(() => {
     onSort(sortDirection === "asc" ? null : "asc");
   }, [sortDirection, onSort]);
-  const sortDescending = (0, import_react3.useCallback)(() => {
+  const sortDescending = (0, import_react4.useCallback)(() => {
     onSort(sortDirection === "desc" ? null : "desc");
   }, [sortDirection, onSort]);
-  const clearFilter = (0, import_react3.useCallback)(() => {
+  const clearFilter = (0, import_react4.useCallback)(() => {
     setLocalSelected(/* @__PURE__ */ new Set());
     onFilter([]);
     onClose();
   }, [onFilter, onClose]);
-  const handleRangeChange = (0, import_react3.useCallback)((range) => {
+  const handleRangeChange = (0, import_react4.useCallback)((range) => {
     setLocalRange(range);
   }, []);
-  const applyRangeFilter = (0, import_react3.useCallback)(() => {
+  const applyRangeFilter = (0, import_react4.useCallback)(() => {
     onRangeFilter?.(localRange);
     onClose();
   }, [localRange, onRangeFilter, onClose]);
-  const clearRangeFilter = (0, import_react3.useCallback)(() => {
+  const clearRangeFilter = (0, import_react4.useCallback)(() => {
     setLocalRange(null);
     onRangeFilter?.(null);
     onClose();
   }, [onRangeFilter, onClose]);
-  (0, import_react3.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     const handleClickOutside = (event) => {
       if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
         onClose();
@@ -588,7 +1267,7 @@ function ColumnFilter({
     document.addEventListener("mousedown", handleClickOutside);
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, [onClose]);
-  (0, import_react3.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     const handleKeydown = (event) => {
       if (event.key === "Escape") {
         onClose();
@@ -599,36 +1278,36 @@ function ColumnFilter({
     document.addEventListener("keydown", handleKeydown);
     return () => document.removeEventListener("keydown", handleKeydown);
   }, [onClose, applyFilter]);
-  (0, import_react3.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     searchInputRef.current?.focus();
   }, []);
-  (0, import_react3.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     setLocalSelected(new Set(selectedValues));
   }, [selectedValues]);
-  (0, import_react3.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     setLocalRange(numericRange ?? null);
     if (numericRange) {
       setFilterMode("range");
     }
   }, [numericRange]);
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { ref: dropdownRef, className: "vpg-filter-dropdown", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "vpg-filter-header", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "vpg-filter-title", children: columnName }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: "vpg-filter-count", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { ref: dropdownRef, className: "vpg-filter-dropdown", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "vpg-filter-header", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "vpg-filter-title", children: columnName }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "vpg-filter-count", children: [
         stats.uniqueValues.length.toLocaleString(),
         " ",
         "unique"
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "vpg-sort-controls", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "vpg-sort-controls", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
         "button",
         {
           className: `vpg-sort-btn ${sortDirection === "asc" ? "active" : ""}`,
           title: isNumericColumn ? "Sort Low to High" : "Sort A to Z",
           onClick: sortAscending,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { className: "vpg-icon-sm", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { className: "vpg-icon-sm", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
               "path",
               {
                 strokeLinecap: "round",
@@ -637,18 +1316,18 @@ function ColumnFilter({
                 d: "M3 4h13M3 8h9m-9 4h6m4 0l4-4m0 0l4 4m-4-4v12"
               }
             ) }),
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: isNumericColumn ? "1\u21929" : "A\u2192Z" })
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: isNumericColumn ? "1\u21929" : "A\u2192Z" })
           ]
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
         "button",
         {
           className: `vpg-sort-btn ${sortDirection === "desc" ? "active" : ""}`,
           title: isNumericColumn ? "Sort High to Low" : "Sort Z to A",
           onClick: sortDescending,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { className: "vpg-icon-sm", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { className: "vpg-icon-sm", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
               "path",
               {
                 strokeLinecap: "round",
@@ -657,20 +1336,20 @@ function ColumnFilter({
                 d: "M3 4h13M3 8h9m-9 4h9m5-4v12m0 0l-4-4m4 4l4-4"
               }
             ) }),
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: isNumericColumn ? "9\u21921" : "Z\u2192A" })
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: isNumericColumn ? "9\u21921" : "Z\u2192A" })
           ]
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "vpg-divider" }),
-    isNumericColumn && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "vpg-filter-tabs", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "vpg-divider" }),
+    isNumericColumn && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "vpg-filter-tabs", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
         "button",
         {
           className: `vpg-tab-btn ${filterMode === "values" ? "active" : ""}`,
           onClick: () => setFilterMode("values"),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { className: "vpg-icon-sm", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { className: "vpg-icon-sm", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
               "path",
               {
                 strokeLinecap: "round",
@@ -683,13 +1362,13 @@ function ColumnFilter({
           ]
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
         "button",
         {
           className: `vpg-tab-btn ${filterMode === "range" ? "active" : ""}`,
           onClick: () => setFilterMode("range"),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { className: "vpg-icon-sm", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { className: "vpg-icon-sm", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
               "path",
               {
                 strokeLinecap: "round",
@@ -703,9 +1382,9 @@ function ColumnFilter({
         }
       )
     ] }),
-    (!isNumericColumn || filterMode === "values") && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "vpg-search-container", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { className: "vpg-search-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    (!isNumericColumn || filterMode === "values") && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "vpg-search-container", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { className: "vpg-search-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           "path",
           {
             strokeLinecap: "round",
@@ -714,7 +1393,7 @@ function ColumnFilter({
             d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           "input",
           {
             ref: searchInputRef,
@@ -725,11 +1404,11 @@ function ColumnFilter({
             className: "vpg-search-input"
           }
         ),
-        searchQuery && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { className: "vpg-clear-search", onClick: () => setSearchQuery(""), children: "\xD7" })
+        searchQuery && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { className: "vpg-clear-search", onClick: () => setSearchQuery(""), children: "\xD7" })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "vpg-bulk-actions", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("button", { className: "vpg-bulk-btn", onClick: selectAll, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { className: "vpg-icon-sm", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "vpg-bulk-actions", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("button", { className: "vpg-bulk-btn", onClick: selectAll, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { className: "vpg-icon-sm", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
             "path",
             {
               strokeLinecap: "round",
@@ -740,8 +1419,8 @@ function ColumnFilter({
           ) }),
           "Select All"
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("button", { className: "vpg-bulk-btn", onClick: clearAll, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { className: "vpg-icon-sm", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("button", { className: "vpg-bulk-btn", onClick: clearAll, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { className: "vpg-icon-sm", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
             "path",
             {
               strokeLinecap: "round",
@@ -753,13 +1432,13 @@ function ColumnFilter({
           "Clear All"
         ] })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "vpg-values-list", children: [
-        allValues.map((value) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "vpg-values-list", children: [
+        allValues.map((value) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
           "label",
           {
             className: `vpg-value-item ${localSelected.has(value) ? "selected" : ""}`,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                 "input",
                 {
                   type: "checkbox",
@@ -768,20 +1447,20 @@ function ColumnFilter({
                   className: "vpg-value-checkbox"
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: `vpg-value-text ${value === "(blank)" ? "vpg-blank" : ""}`, children: value })
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: `vpg-value-text ${value === "(blank)" ? "vpg-blank" : ""}`, children: value })
             ]
           },
           value
         )),
-        allValues.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "vpg-no-results", children: "No matching values" })
+        allValues.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "vpg-no-results", children: "No matching values" })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "vpg-filter-footer", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { className: "vpg-btn-clear", onClick: clearFilter, children: "Clear Filter" }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { className: "vpg-btn-apply", onClick: applyFilter, children: "Apply" })
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "vpg-filter-footer", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { className: "vpg-btn-clear", onClick: clearFilter, children: "Clear Filter" }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { className: "vpg-btn-apply", onClick: applyFilter, children: "Apply" })
       ] })
     ] }),
-    isNumericColumn && filterMode === "range" && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    isNumericColumn && filterMode === "range" && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
         NumericRangeFilter,
         {
           dataMin: stats.numericMin,
@@ -790,26 +1469,26 @@ function ColumnFilter({
           onChange: handleRangeChange
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "vpg-filter-footer", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { className: "vpg-btn-clear", onClick: clearRangeFilter, children: "Clear Filter" }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { className: "vpg-btn-apply", onClick: applyRangeFilter, children: "Apply" })
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "vpg-filter-footer", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { className: "vpg-btn-clear", onClick: clearRangeFilter, children: "Clear Filter" }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { className: "vpg-btn-apply", onClick: applyRangeFilter, children: "Apply" })
       ] })
     ] })
   ] });
 }
 
 // src/components/DataGrid.tsx
-var import_react10 = require("react");
+var import_react11 = require("react");
 var import_react_dom2 = require("react-dom");
 
 // src/hooks/useExcelGrid.ts
-var import_tinypivot_core2 = require("@smallwebco/tinypivot-core");
+var import_tinypivot_core3 = require("@smallwebco/tinypivot-core");
 var import_react_table = require("@tanstack/react-table");
-var import_react4 = require("react");
+var import_react5 = require("react");
 var multiSelectFilter = (row, columnId, filterValue) => {
   if (!filterValue)
     return true;
-  if ((0, import_tinypivot_core2.isNumericRange)(filterValue)) {
+  if ((0, import_tinypivot_core3.isNumericRange)(filterValue)) {
     const cellValue = row.getValue(columnId);
     if (cellValue === null || cellValue === void 0 || cellValue === "") {
       return false;
@@ -833,25 +1512,25 @@ var multiSelectFilter = (row, columnId, filterValue) => {
 };
 function useExcelGrid(options) {
   const { data, enableSorting = true, enableFiltering = true } = options;
-  const [sorting, setSorting] = (0, import_react4.useState)([]);
-  const [columnFilters, setColumnFilters] = (0, import_react4.useState)([]);
-  const [columnVisibility, setColumnVisibility] = (0, import_react4.useState)({});
-  const [globalFilter, setGlobalFilter] = (0, import_react4.useState)("");
-  const [columnStatsCache, setColumnStatsCache] = (0, import_react4.useState)({});
-  const dataSignature = (0, import_react4.useMemo)(
+  const [sorting, setSorting] = (0, import_react5.useState)([]);
+  const [columnFilters, setColumnFilters] = (0, import_react5.useState)([]);
+  const [columnVisibility, setColumnVisibility] = (0, import_react5.useState)({});
+  const [globalFilter, setGlobalFilter] = (0, import_react5.useState)("");
+  const [columnStatsCache, setColumnStatsCache] = (0, import_react5.useState)({});
+  const dataSignature = (0, import_react5.useMemo)(
     () => `${Date.now()}-${Math.random().toString(36).slice(2)}`,
     [data]
   );
-  const columnKeys = (0, import_react4.useMemo)(() => {
+  const columnKeys = (0, import_react5.useMemo)(() => {
     if (data.length === 0)
       return [];
     return Object.keys(data[0]);
   }, [data]);
-  const getColumnStats = (0, import_react4.useCallback)(
+  const getColumnStats = (0, import_react5.useCallback)(
     (columnKey) => {
       const cacheKey = `${columnKey}-${dataSignature}`;
       if (!columnStatsCache[cacheKey]) {
-        const stats = (0, import_tinypivot_core2.getColumnUniqueValues)(data, columnKey);
+        const stats = (0, import_tinypivot_core3.getColumnUniqueValues)(data, columnKey);
         setColumnStatsCache((prev) => ({ ...prev, [cacheKey]: stats }));
         return stats;
       }
@@ -859,20 +1538,20 @@ function useExcelGrid(options) {
     },
     [data, columnStatsCache, dataSignature]
   );
-  const clearStatsCache = (0, import_react4.useCallback)(() => {
+  const clearStatsCache = (0, import_react5.useCallback)(() => {
     setColumnStatsCache({});
   }, []);
-  (0, import_react4.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     clearStatsCache();
   }, [dataSignature, clearStatsCache]);
-  const columnDefs = (0, import_react4.useMemo)(() => {
+  const columnDefs = (0, import_react5.useMemo)(() => {
     return columnKeys.map((key) => {
       const stats = getColumnStats(key);
       return {
         id: key,
         accessorKey: key,
         header: key,
-        cell: (info) => (0, import_tinypivot_core2.formatCellValue)(info.getValue(), stats.type),
+        cell: (info) => (0, import_tinypivot_core3.formatCellValue)(info.getValue(), stats.type),
         filterFn: multiSelectFilter,
         meta: {
           type: stats.type,
@@ -905,10 +1584,10 @@ function useExcelGrid(options) {
   });
   const filteredRowCount = table.getFilteredRowModel().rows.length;
   const totalRowCount = data.length;
-  const activeFilters = (0, import_react4.useMemo)(() => {
+  const activeFilters = (0, import_react5.useMemo)(() => {
     return columnFilters.map((f) => {
       const filterValue = f.value;
-      if (filterValue && (0, import_tinypivot_core2.isNumericRange)(filterValue)) {
+      if (filterValue && (0, import_tinypivot_core3.isNumericRange)(filterValue)) {
         return {
           column: f.id,
           type: "range",
@@ -924,7 +1603,7 @@ function useExcelGrid(options) {
       };
     });
   }, [columnFilters]);
-  const hasActiveFilter = (0, import_react4.useCallback)(
+  const hasActiveFilter = (0, import_react5.useCallback)(
     (columnId) => {
       const column = table.getColumn(columnId);
       if (!column)
@@ -932,14 +1611,14 @@ function useExcelGrid(options) {
       const filterValue = column.getFilterValue();
       if (!filterValue)
         return false;
-      if ((0, import_tinypivot_core2.isNumericRange)(filterValue)) {
+      if ((0, import_tinypivot_core3.isNumericRange)(filterValue)) {
         return filterValue.min !== null || filterValue.max !== null;
       }
       return Array.isArray(filterValue) && filterValue.length > 0;
     },
     [table]
   );
-  const setColumnFilter = (0, import_react4.useCallback)(
+  const setColumnFilter = (0, import_react5.useCallback)(
     (columnId, values) => {
       const column = table.getColumn(columnId);
       if (column) {
@@ -948,7 +1627,7 @@ function useExcelGrid(options) {
     },
     [table]
   );
-  const setNumericRangeFilter = (0, import_react4.useCallback)(
+  const setNumericRangeFilter = (0, import_react5.useCallback)(
     (columnId, range) => {
       const column = table.getColumn(columnId);
       if (column) {
@@ -961,25 +1640,25 @@ function useExcelGrid(options) {
     },
     [table]
   );
-  const getNumericRangeFilter = (0, import_react4.useCallback)(
+  const getNumericRangeFilter = (0, import_react5.useCallback)(
     (columnId) => {
       const column = table.getColumn(columnId);
       if (!column)
         return null;
       const filterValue = column.getFilterValue();
-      if (filterValue && (0, import_tinypivot_core2.isNumericRange)(filterValue)) {
+      if (filterValue && (0, import_tinypivot_core3.isNumericRange)(filterValue)) {
         return filterValue;
       }
       return null;
     },
     [table]
   );
-  const clearAllFilters = (0, import_react4.useCallback)(() => {
+  const clearAllFilters = (0, import_react5.useCallback)(() => {
     table.resetColumnFilters();
     setGlobalFilter("");
     setColumnFilters([]);
   }, [table]);
-  const getColumnFilterValues = (0, import_react4.useCallback)(
+  const getColumnFilterValues = (0, import_react5.useCallback)(
     (columnId) => {
       const column = table.getColumn(columnId);
       if (!column)
@@ -989,7 +1668,7 @@ function useExcelGrid(options) {
     },
     [table]
   );
-  const toggleSort = (0, import_react4.useCallback)((columnId) => {
+  const toggleSort = (0, import_react5.useCallback)((columnId) => {
     setSorting((prev) => {
       const current = prev.find((s) => s.id === columnId);
       if (!current) {
@@ -1001,7 +1680,7 @@ function useExcelGrid(options) {
       }
     });
   }, []);
-  const getSortDirection = (0, import_react4.useCallback)(
+  const getSortDirection = (0, import_react5.useCallback)(
     (columnId) => {
       const sort = sorting.find((s) => s.id === columnId);
       if (!sort)
@@ -1042,60 +1721,60 @@ function useExcelGrid(options) {
 }
 
 // src/hooks/useGridFeatures.ts
-var import_tinypivot_core3 = require("@smallwebco/tinypivot-core");
-var import_react5 = require("react");
+var import_tinypivot_core4 = require("@smallwebco/tinypivot-core");
+var import_react6 = require("react");
 function exportToCSV(data, columns, options) {
-  (0, import_tinypivot_core3.exportToCSV)(data, columns, options);
+  (0, import_tinypivot_core4.exportToCSV)(data, columns, options);
 }
 function exportPivotToCSV(pivotData, rowFields, columnFields, valueFields, options) {
-  (0, import_tinypivot_core3.exportPivotToCSV)(pivotData, rowFields, columnFields, valueFields, options);
+  (0, import_tinypivot_core4.exportPivotToCSV)(pivotData, rowFields, columnFields, valueFields, options);
 }
 function copyToClipboard(text, onSuccess, onError) {
-  (0, import_tinypivot_core3.copyToClipboard)(text, onSuccess, onError);
+  (0, import_tinypivot_core4.copyToClipboard)(text, onSuccess, onError);
 }
 function formatSelectionForClipboard(rows, columns, selectionBounds) {
-  return (0, import_tinypivot_core3.formatSelectionForClipboard)(rows, columns, selectionBounds);
+  return (0, import_tinypivot_core4.formatSelectionForClipboard)(rows, columns, selectionBounds);
 }
 function usePagination(data, options = {}) {
-  const [pageSize, setPageSize] = (0, import_react5.useState)(options.pageSize ?? 50);
-  const [currentPage, setCurrentPage] = (0, import_react5.useState)(options.currentPage ?? 1);
-  const totalPages = (0, import_react5.useMemo)(
+  const [pageSize, setPageSize] = (0, import_react6.useState)(options.pageSize ?? 50);
+  const [currentPage, setCurrentPage] = (0, import_react6.useState)(options.currentPage ?? 1);
+  const totalPages = (0, import_react6.useMemo)(
     () => Math.max(1, Math.ceil(data.length / pageSize)),
     [data.length, pageSize]
   );
-  const paginatedData = (0, import_react5.useMemo)(() => {
+  const paginatedData = (0, import_react6.useMemo)(() => {
     const start = (currentPage - 1) * pageSize;
     const end = start + pageSize;
     return data.slice(start, end);
   }, [data, currentPage, pageSize]);
-  const startIndex = (0, import_react5.useMemo)(() => (currentPage - 1) * pageSize + 1, [currentPage, pageSize]);
-  const endIndex = (0, import_react5.useMemo)(
+  const startIndex = (0, import_react6.useMemo)(() => (currentPage - 1) * pageSize + 1, [currentPage, pageSize]);
+  const endIndex = (0, import_react6.useMemo)(
     () => Math.min(currentPage * pageSize, data.length),
     [currentPage, pageSize, data.length]
   );
-  const goToPage = (0, import_react5.useCallback)(
+  const goToPage = (0, import_react6.useCallback)(
     (page) => {
       setCurrentPage(Math.max(1, Math.min(page, totalPages)));
     },
     [totalPages]
   );
-  const nextPage = (0, import_react5.useCallback)(() => {
+  const nextPage = (0, import_react6.useCallback)(() => {
     if (currentPage < totalPages) {
       setCurrentPage((prev) => prev + 1);
     }
   }, [currentPage, totalPages]);
-  const prevPage = (0, import_react5.useCallback)(() => {
+  const prevPage = (0, import_react6.useCallback)(() => {
     if (currentPage > 1) {
       setCurrentPage((prev) => prev - 1);
     }
   }, [currentPage]);
-  const firstPage = (0, import_react5.useCallback)(() => {
+  const firstPage = (0, import_react6.useCallback)(() => {
     setCurrentPage(1);
   }, []);
-  const lastPage = (0, import_react5.useCallback)(() => {
+  const lastPage = (0, import_react6.useCallback)(() => {
     setCurrentPage(totalPages);
   }, [totalPages]);
-  const updatePageSize = (0, import_react5.useCallback)((size) => {
+  const updatePageSize = (0, import_react6.useCallback)((size) => {
     setPageSize(size);
     setCurrentPage(1);
   }, []);
@@ -1115,9 +1794,9 @@ function usePagination(data, options = {}) {
   };
 }
 function useGlobalSearch(data, columns) {
-  const [searchTerm, setSearchTerm] = (0, import_react5.useState)("");
-  const [caseSensitive, setCaseSensitive] = (0, import_react5.useState)(false);
-  const filteredData = (0, import_react5.useMemo)(() => {
+  const [searchTerm, setSearchTerm] = (0, import_react6.useState)("");
+  const [caseSensitive, setCaseSensitive] = (0, import_react6.useState)(false);
+  const filteredData = (0, import_react6.useMemo)(() => {
     if (!searchTerm.trim()) {
       return data;
     }
@@ -1135,7 +1814,7 @@ function useGlobalSearch(data, columns) {
       return false;
     });
   }, [data, columns, searchTerm, caseSensitive]);
-  const clearSearch = (0, import_react5.useCallback)(() => {
+  const clearSearch = (0, import_react6.useCallback)(() => {
     setSearchTerm("");
   }, []);
   return {
@@ -1148,17 +1827,17 @@ function useGlobalSearch(data, columns) {
   };
 }
 function useRowSelection(data) {
-  const [selectedRowIndices, setSelectedRowIndices] = (0, import_react5.useState)(/* @__PURE__ */ new Set());
-  const selectedRows = (0, import_react5.useMemo)(() => {
+  const [selectedRowIndices, setSelectedRowIndices] = (0, import_react6.useState)(/* @__PURE__ */ new Set());
+  const selectedRows = (0, import_react6.useMemo)(() => {
     return Array.from(selectedRowIndices).sort((a, b) => a - b).map((idx) => data[idx]).filter(Boolean);
   }, [data, selectedRowIndices]);
-  const allSelected = (0, import_react5.useMemo)(() => {
+  const allSelected = (0, import_react6.useMemo)(() => {
     return data.length > 0 && selectedRowIndices.size === data.length;
   }, [data.length, selectedRowIndices.size]);
-  const someSelected = (0, import_react5.useMemo)(() => {
+  const someSelected = (0, import_react6.useMemo)(() => {
     return selectedRowIndices.size > 0 && selectedRowIndices.size < data.length;
   }, [data.length, selectedRowIndices.size]);
-  const toggleRow = (0, import_react5.useCallback)((index) => {
+  const toggleRow = (0, import_react6.useCallback)((index) => {
     setSelectedRowIndices((prev) => {
       const next = new Set(prev);
       if (next.has(index)) {
@@ -1169,36 +1848,36 @@ function useRowSelection(data) {
       return next;
     });
   }, []);
-  const selectRow = (0, import_react5.useCallback)((index) => {
+  const selectRow = (0, import_react6.useCallback)((index) => {
     setSelectedRowIndices((prev) => /* @__PURE__ */ new Set([...prev, index]));
   }, []);
-  const deselectRow = (0, import_react5.useCallback)((index) => {
+  const deselectRow = (0, import_react6.useCallback)((index) => {
     setSelectedRowIndices((prev) => {
       const next = new Set(prev);
       next.delete(index);
       return next;
     });
   }, []);
-  const selectAll = (0, import_react5.useCallback)(() => {
+  const selectAll = (0, import_react6.useCallback)(() => {
     setSelectedRowIndices(new Set(data.map((_, idx) => idx)));
   }, [data]);
-  const deselectAll = (0, import_react5.useCallback)(() => {
+  const deselectAll = (0, import_react6.useCallback)(() => {
     setSelectedRowIndices(/* @__PURE__ */ new Set());
   }, []);
-  const toggleAll = (0, import_react5.useCallback)(() => {
+  const toggleAll = (0, import_react6.useCallback)(() => {
     if (allSelected) {
       deselectAll();
     } else {
       selectAll();
     }
   }, [allSelected, selectAll, deselectAll]);
-  const isSelected = (0, import_react5.useCallback)(
+  const isSelected = (0, import_react6.useCallback)(
     (index) => {
       return selectedRowIndices.has(index);
     },
     [selectedRowIndices]
   );
-  const selectRange = (0, import_react5.useCallback)((startIndex, endIndex) => {
+  const selectRange = (0, import_react6.useCallback)((startIndex, endIndex) => {
     const min = Math.min(startIndex, endIndex);
     const max = Math.max(startIndex, endIndex);
     setSelectedRowIndices((prev) => {
@@ -1225,10 +1904,10 @@ function useRowSelection(data) {
   };
 }
 function useColumnResize(initialWidths, minWidth = 60, maxWidth = 600) {
-  const [columnWidths, setColumnWidths] = (0, import_react5.useState)({ ...initialWidths });
-  const [isResizing, setIsResizing] = (0, import_react5.useState)(false);
-  const [resizingColumn, setResizingColumn] = (0, import_react5.useState)(null);
-  const startResize = (0, import_react5.useCallback)(
+  const [columnWidths, setColumnWidths] = (0, import_react6.useState)({ ...initialWidths });
+  const [isResizing, setIsResizing] = (0, import_react6.useState)(false);
+  const [resizingColumn, setResizingColumn] = (0, import_react6.useState)(null);
+  const startResize = (0, import_react6.useCallback)(
     (columnId, event) => {
       setIsResizing(true);
       setResizingColumn(columnId);
@@ -1253,7 +1932,7 @@ function useColumnResize(initialWidths, minWidth = 60, maxWidth = 600) {
     },
     [columnWidths, minWidth, maxWidth]
   );
-  const resetColumnWidth = (0, import_react5.useCallback)(
+  const resetColumnWidth = (0, import_react6.useCallback)(
     (columnId) => {
       if (initialWidths[columnId]) {
         setColumnWidths((prev) => ({
@@ -1264,7 +1943,7 @@ function useColumnResize(initialWidths, minWidth = 60, maxWidth = 600) {
     },
     [initialWidths]
   );
-  const resetAllWidths = (0, import_react5.useCallback)(() => {
+  const resetAllWidths = (0, import_react6.useCallback)(() => {
     setColumnWidths({ ...initialWidths });
   }, [initialWidths]);
   return {
@@ -1279,16 +1958,16 @@ function useColumnResize(initialWidths, minWidth = 60, maxWidth = 600) {
 }
 
 // src/hooks/useLicense.ts
-var import_tinypivot_core4 = require("@smallwebco/tinypivot-core");
-var import_react6 = require("react");
-var globalLicenseInfo = (0, import_tinypivot_core4.getFreeLicenseInfo)();
+var import_tinypivot_core5 = require("@smallwebco/tinypivot-core");
+var import_react7 = require("react");
+var globalLicenseInfo = (0, import_tinypivot_core5.getFreeLicenseInfo)();
 var globalDemoMode = false;
 var listeners = /* @__PURE__ */ new Set();
 function notifyListeners() {
   listeners.forEach((listener) => listener());
 }
 async function setLicenseKey(key) {
-  globalLicenseInfo = await (0, import_tinypivot_core4.validateLicenseKey)(key);
+  globalLicenseInfo = await (0, import_tinypivot_core5.validateLicenseKey)(key);
   if (!globalLicenseInfo.isValid) {
     console.warn("[TinyPivot] Invalid or expired license key. Running in free mode.");
   } else if (globalLicenseInfo.type !== "free") {
@@ -1297,7 +1976,7 @@ async function setLicenseKey(key) {
   notifyListeners();
 }
 async function enableDemoMode(secret) {
-  const demoLicense = await (0, import_tinypivot_core4.getDemoLicenseInfo)(secret);
+  const demoLicense = await (0, import_tinypivot_core5.getDemoLicenseInfo)(secret);
   if (!demoLicense) {
     console.warn("[TinyPivot] Demo mode activation failed - invalid secret");
     return false;
@@ -1309,40 +1988,44 @@ async function enableDemoMode(secret) {
   return true;
 }
 function configureLicenseSecret(secret) {
-  (0, import_tinypivot_core4.configureLicenseSecret)(secret);
+  (0, import_tinypivot_core5.configureLicenseSecret)(secret);
 }
 function useLicense() {
-  const [, forceUpdate] = (0, import_react6.useState)({});
-  (0, import_react6.useState)(() => {
+  const [, forceUpdate] = (0, import_react7.useState)({});
+  (0, import_react7.useState)(() => {
     const update = () => forceUpdate({});
     listeners.add(update);
     return () => listeners.delete(update);
   });
   const isDemo = globalDemoMode;
   const licenseInfo = globalLicenseInfo;
-  const isPro = (0, import_react6.useMemo)(
-    () => globalDemoMode || (0, import_tinypivot_core4.isPro)(licenseInfo),
+  const isPro = (0, import_react7.useMemo)(
+    () => globalDemoMode || (0, import_tinypivot_core5.isPro)(licenseInfo),
     [licenseInfo]
   );
-  const canUsePivot = (0, import_react6.useMemo)(
-    () => globalDemoMode || (0, import_tinypivot_core4.canUsePivot)(licenseInfo),
+  const canUsePivot = (0, import_react7.useMemo)(
+    () => globalDemoMode || (0, import_tinypivot_core5.canUsePivot)(licenseInfo),
     [licenseInfo]
   );
-  const canUseAdvancedAggregations = (0, import_react6.useMemo)(
+  const canUseAdvancedAggregations = (0, import_react7.useMemo)(
     () => globalDemoMode || licenseInfo.features.advancedAggregations,
     [licenseInfo]
   );
-  const canUsePercentageMode = (0, import_react6.useMemo)(
+  const canUsePercentageMode = (0, import_react7.useMemo)(
     () => globalDemoMode || licenseInfo.features.percentageMode,
     [licenseInfo]
   );
-  const showWatermark = (0, import_react6.useMemo)(
-    () => (0, import_tinypivot_core4.shouldShowWatermark)(licenseInfo, globalDemoMode),
+  const canUseCharts = (0, import_react7.useMemo)(
+    () => globalDemoMode || (0, import_tinypivot_core5.canUseCharts)(licenseInfo),
+    [licenseInfo]
+  );
+  const showWatermark = (0, import_react7.useMemo)(
+    () => (0, import_tinypivot_core5.shouldShowWatermark)(licenseInfo, globalDemoMode),
     [licenseInfo]
   );
-  const requirePro = (0, import_react6.useCallback)((feature) => {
+  const requirePro = (0, import_react7.useCallback)((feature) => {
     if (!isPro) {
-      (0, import_tinypivot_core4.logProRequired)(feature);
+      (0, import_tinypivot_core5.logProRequired)(feature);
       return false;
     }
     return true;
@@ -1354,31 +2037,32 @@ function useLicense() {
     canUsePivot,
     canUseAdvancedAggregations,
     canUsePercentageMode,
+    canUseCharts,
     showWatermark,
     requirePro
   };
 }
 
 // src/hooks/usePivotTable.ts
-var import_tinypivot_core5 = require("@smallwebco/tinypivot-core");
-var import_react7 = require("react");
+var import_tinypivot_core6 = require("@smallwebco/tinypivot-core");
+var import_react8 = require("react");
 function usePivotTable(data) {
   const { canUsePivot, requirePro } = useLicense();
-  const [rowFields, setRowFieldsState] = (0, import_react7.useState)([]);
-  const [columnFields, setColumnFieldsState] = (0, import_react7.useState)([]);
-  const [valueFields, setValueFields] = (0, import_react7.useState)([]);
-  const [showRowTotals, setShowRowTotals] = (0, import_react7.useState)(true);
-  const [showColumnTotals, setShowColumnTotals] = (0, import_react7.useState)(true);
-  const [calculatedFields, setCalculatedFields] = (0, import_react7.useState)(() => (0, import_tinypivot_core5.loadCalculatedFields)());
-  const [currentStorageKey, setCurrentStorageKey] = (0, import_react7.useState)(null);
-  const availableFields = (0, import_react7.useMemo)(() => {
-    return (0, import_tinypivot_core5.computeAvailableFields)(data);
+  const [rowFields, setRowFieldsState] = (0, import_react8.useState)([]);
+  const [columnFields, setColumnFieldsState] = (0, import_react8.useState)([]);
+  const [valueFields, setValueFields] = (0, import_react8.useState)([]);
+  const [showRowTotals, setShowRowTotals] = (0, import_react8.useState)(true);
+  const [showColumnTotals, setShowColumnTotals] = (0, import_react8.useState)(true);
+  const [calculatedFields, setCalculatedFields] = (0, import_react8.useState)(() => (0, import_tinypivot_core6.loadCalculatedFields)());
+  const [currentStorageKey, setCurrentStorageKey] = (0, import_react8.useState)(null);
+  const availableFields = (0, import_react8.useMemo)(() => {
+    return (0, import_tinypivot_core6.computeAvailableFields)(data);
   }, [data]);
-  const unassignedFields = (0, import_react7.useMemo)(() => {
-    return (0, import_tinypivot_core5.getUnassignedFields)(availableFields, rowFields, columnFields, valueFields);
+  const unassignedFields = (0, import_react8.useMemo)(() => {
+    return (0, import_tinypivot_core6.getUnassignedFields)(availableFields, rowFields, columnFields, valueFields);
   }, [availableFields, rowFields, columnFields, valueFields]);
-  const isConfigured = (0, import_react7.useMemo)(() => {
-    return (0, import_tinypivot_core5.isPivotConfigured)({
+  const isConfigured = (0, import_react8.useMemo)(() => {
+    return (0, import_tinypivot_core6.isPivotConfigured)({
       rowFields,
       columnFields,
       valueFields,
@@ -1386,12 +2070,12 @@ function usePivotTable(data) {
       showColumnTotals
     });
   }, [rowFields, columnFields, valueFields, showRowTotals, showColumnTotals]);
-  const pivotResult = (0, import_react7.useMemo)(() => {
+  const pivotResult = (0, import_react8.useMemo)(() => {
     if (!isConfigured)
       return null;
     if (!canUsePivot)
       return null;
-    return (0, import_tinypivot_core5.computePivotResult)(data, {
+    return (0, import_tinypivot_core6.computePivotResult)(data, {
       rowFields,
       columnFields,
       valueFields,
@@ -1400,15 +2084,15 @@ function usePivotTable(data) {
       calculatedFields
     });
   }, [data, isConfigured, canUsePivot, rowFields, columnFields, valueFields, showRowTotals, showColumnTotals, calculatedFields]);
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     if (data.length === 0)
       return;
     const newKeys = Object.keys(data[0]);
-    const storageKey = (0, import_tinypivot_core5.generateStorageKey)(newKeys);
+    const storageKey = (0, import_tinypivot_core6.generateStorageKey)(newKeys);
     if (storageKey !== currentStorageKey) {
       setCurrentStorageKey(storageKey);
-      const savedConfig = (0, import_tinypivot_core5.loadPivotConfig)(storageKey);
-      if (savedConfig && (0, import_tinypivot_core5.isConfigValidForFields)(savedConfig, newKeys)) {
+      const savedConfig = (0, import_tinypivot_core6.loadPivotConfig)(storageKey);
+      if (savedConfig && (0, import_tinypivot_core6.isConfigValidForFields)(savedConfig, newKeys)) {
         setRowFieldsState(savedConfig.rowFields);
         setColumnFieldsState(savedConfig.columnFields);
         setValueFields(savedConfig.valueFields);
@@ -1425,7 +2109,7 @@ function usePivotTable(data) {
           showRowTotals,
           showColumnTotals
         };
-        if (!(0, import_tinypivot_core5.isConfigValidForFields)(currentConfig, newKeys)) {
+        if (!(0, import_tinypivot_core6.isConfigValidForFields)(currentConfig, newKeys)) {
           setRowFieldsState([]);
           setColumnFieldsState([]);
           setValueFields([]);
@@ -1433,7 +2117,7 @@ function usePivotTable(data) {
       }
     }
   }, [data]);
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     if (!currentStorageKey)
       return;
     const config = {
@@ -1444,9 +2128,9 @@ function usePivotTable(data) {
       showColumnTotals,
       calculatedFields
     };
-    (0, import_tinypivot_core5.savePivotConfig)(currentStorageKey, config);
+    (0, import_tinypivot_core6.savePivotConfig)(currentStorageKey, config);
   }, [currentStorageKey, rowFields, columnFields, valueFields, showRowTotals, showColumnTotals, calculatedFields]);
-  const addRowField = (0, import_react7.useCallback)(
+  const addRowField = (0, import_react8.useCallback)(
     (field) => {
       if (!rowFields.includes(field)) {
         setRowFieldsState((prev) => [...prev, field]);
@@ -1454,13 +2138,13 @@ function usePivotTable(data) {
     },
     [rowFields]
   );
-  const removeRowField = (0, import_react7.useCallback)((field) => {
+  const removeRowField = (0, import_react8.useCallback)((field) => {
     setRowFieldsState((prev) => prev.filter((f) => f !== field));
   }, []);
-  const setRowFields = (0, import_react7.useCallback)((fields) => {
+  const setRowFields = (0, import_react8.useCallback)((fields) => {
     setRowFieldsState(fields);
   }, []);
-  const addColumnField = (0, import_react7.useCallback)(
+  const addColumnField = (0, import_react8.useCallback)(
     (field) => {
       if (!columnFields.includes(field)) {
         setColumnFieldsState((prev) => [...prev, field]);
@@ -1468,13 +2152,13 @@ function usePivotTable(data) {
     },
     [columnFields]
   );
-  const removeColumnField = (0, import_react7.useCallback)((field) => {
+  const removeColumnField = (0, import_react8.useCallback)((field) => {
     setColumnFieldsState((prev) => prev.filter((f) => f !== field));
   }, []);
-  const setColumnFields = (0, import_react7.useCallback)((fields) => {
+  const setColumnFields = (0, import_react8.useCallback)((fields) => {
     setColumnFieldsState(fields);
   }, []);
-  const addValueField = (0, import_react7.useCallback)(
+  const addValueField = (0, import_react8.useCallback)(
     (field, aggregation = "sum") => {
       if (aggregation !== "sum" && !requirePro(`${aggregation} aggregation`)) {
         return;
@@ -1488,7 +2172,7 @@ function usePivotTable(data) {
     },
     [requirePro]
   );
-  const removeValueField = (0, import_react7.useCallback)((field, aggregation) => {
+  const removeValueField = (0, import_react8.useCallback)((field, aggregation) => {
     setValueFields((prev) => {
       if (aggregation) {
         return prev.filter((v) => !(v.field === field && v.aggregation === aggregation));
@@ -1496,7 +2180,7 @@ function usePivotTable(data) {
       return prev.filter((v) => v.field !== field);
     });
   }, []);
-  const updateValueFieldAggregation = (0, import_react7.useCallback)(
+  const updateValueFieldAggregation = (0, import_react8.useCallback)(
     (field, oldAgg, newAgg) => {
       setValueFields(
         (prev) => prev.map((v) => {
@@ -1509,12 +2193,12 @@ function usePivotTable(data) {
     },
     []
   );
-  const clearConfig = (0, import_react7.useCallback)(() => {
+  const clearConfig = (0, import_react8.useCallback)(() => {
     setRowFieldsState([]);
     setColumnFieldsState([]);
     setValueFields([]);
   }, []);
-  const autoSuggestConfig = (0, import_react7.useCallback)(() => {
+  const autoSuggestConfig = (0, import_react8.useCallback)(() => {
     if (!requirePro("Pivot Table - Auto Suggest"))
       return;
     if (availableFields.length === 0)
@@ -1526,7 +2210,7 @@ function usePivotTable(data) {
       setValueFields([{ field: numericFields[0].field, aggregation: "sum" }]);
     }
   }, [availableFields, requirePro]);
-  const addCalculatedField = (0, import_react7.useCallback)((field) => {
+  const addCalculatedField = (0, import_react8.useCallback)((field) => {
     setCalculatedFields((prev) => {
       const existing = prev.findIndex((f) => f.id === field.id);
       let updated;
@@ -1535,14 +2219,14 @@ function usePivotTable(data) {
       } else {
         updated = [...prev, field];
       }
-      (0, import_tinypivot_core5.saveCalculatedFields)(updated);
+      (0, import_tinypivot_core6.saveCalculatedFields)(updated);
       return updated;
     });
   }, []);
-  const removeCalculatedField = (0, import_react7.useCallback)((id) => {
+  const removeCalculatedField = (0, import_react8.useCallback)((id) => {
     setCalculatedFields((prev) => {
       const updated = prev.filter((f) => f.id !== id);
-      (0, import_tinypivot_core5.saveCalculatedFields)(updated);
+      (0, import_tinypivot_core6.saveCalculatedFields)(updated);
       return updated;
     });
     setValueFields((prev) => prev.filter((v) => v.field !== `calc:${id}`));
@@ -1580,9 +2264,9 @@ function usePivotTable(data) {
 }
 
 // src/components/PivotConfig.tsx
-var import_tinypivot_core6 = require("@smallwebco/tinypivot-core");
-var import_react8 = require("react");
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_tinypivot_core7 = require("@smallwebco/tinypivot-core");
+var import_react9 = require("react");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 function aggregationRequiresPro(agg) {
   return agg !== "sum";
 }
@@ -1623,15 +2307,15 @@ function PivotConfig({
   onRemoveCalculatedField,
   onUpdateCalculatedField
 }) {
-  const [fieldSearch, setFieldSearch] = (0, import_react8.useState)("");
-  const [showCalcModal, setShowCalcModal] = (0, import_react8.useState)(false);
-  const [editingCalcField, setEditingCalcField] = (0, import_react8.useState)(null);
+  const [fieldSearch, setFieldSearch] = (0, import_react9.useState)("");
+  const [showCalcModal, setShowCalcModal] = (0, import_react9.useState)(false);
+  const [editingCalcField, setEditingCalcField] = (0, import_react9.useState)(null);
   const { canUseAdvancedAggregations } = useLicense();
-  const isAggregationAvailable = (0, import_react8.useCallback)((agg) => {
+  const isAggregationAvailable = (0, import_react9.useCallback)((agg) => {
     return !aggregationRequiresPro(agg) || canUseAdvancedAggregations;
   }, [canUseAdvancedAggregations]);
-  const numericFieldNames = (0, import_react8.useMemo)(() => availableFields.filter((f) => f.isNumeric).map((f) => f.field), [availableFields]);
-  const calculatedFieldsAsStats = (0, import_react8.useMemo)(() => {
+  const numericFieldNames = (0, import_react9.useMemo)(() => availableFields.filter((f) => f.isNumeric).map((f) => f.field), [availableFields]);
+  const calculatedFieldsAsStats = (0, import_react9.useMemo)(() => {
     if (!calculatedFields)
       return [];
     return calculatedFields.map((calc) => ({
@@ -1645,11 +2329,11 @@ function PivotConfig({
       calcFormula: calc.formula
     }));
   }, [calculatedFields]);
-  const allAvailableFields = (0, import_react8.useMemo)(() => [
+  const allAvailableFields = (0, import_react9.useMemo)(() => [
     ...availableFields.map((f) => ({ ...f, isCalculated: false })),
     ...calculatedFieldsAsStats
   ], [availableFields, calculatedFieldsAsStats]);
-  const assignedFields = (0, import_react8.useMemo)(() => {
+  const assignedFields = (0, import_react9.useMemo)(() => {
     const rowSet = new Set(rowFields);
     const colSet = new Set(columnFields);
     const valueMap = new Map(valueFields.map((v) => [v.field, v]));
@@ -1659,7 +2343,7 @@ function PivotConfig({
       valueConfig: valueMap.get(f.field)
     }));
   }, [allAvailableFields, rowFields, columnFields, valueFields]);
-  const unassignedFields = (0, import_react8.useMemo)(() => {
+  const unassignedFields = (0, import_react9.useMemo)(() => {
     const rowSet = new Set(rowFields);
     const colSet = new Set(columnFields);
     const valSet = new Set(valueFields.map((v) => v.field));
@@ -1667,7 +2351,7 @@ function PivotConfig({
       (f) => !rowSet.has(f.field) && !colSet.has(f.field) && !valSet.has(f.field)
     );
   }, [allAvailableFields, rowFields, columnFields, valueFields]);
-  const filteredUnassignedFields = (0, import_react8.useMemo)(() => {
+  const filteredUnassignedFields = (0, import_react9.useMemo)(() => {
     if (!fieldSearch.trim())
       return unassignedFields;
     const search = fieldSearch.toLowerCase().trim();
@@ -1678,13 +2362,13 @@ function PivotConfig({
     });
   }, [unassignedFields, fieldSearch]);
   const assignedCount = assignedFields.length;
-  const getFieldDisplayName = (0, import_react8.useCallback)((field) => {
+  const getFieldDisplayName = (0, import_react9.useCallback)((field) => {
     if (field.isCalculated && field.calcName) {
       return field.calcName;
     }
     return field.field;
   }, []);
-  const handleDragStart = (0, import_react8.useCallback)(
+  const handleDragStart = (0, import_react9.useCallback)(
     (field, event) => {
       event.dataTransfer?.setData("text/plain", field);
       event.dataTransfer.effectAllowed = "move";
@@ -1692,7 +2376,7 @@ function PivotConfig({
     },
     [onDragStart]
   );
-  const handleAggregationChange = (0, import_react8.useCallback)(
+  const handleAggregationChange = (0, import_react9.useCallback)(
     (field, currentAgg, newAgg) => {
       if (!isAggregationAvailable(newAgg)) {
         console.warn(`[TinyPivot] "${newAgg}" aggregation requires a Pro license. Visit https://tiny-pivot.com/#pricing to upgrade.`);
@@ -1702,7 +2386,7 @@ function PivotConfig({
     },
     [onUpdateAggregation, isAggregationAvailable]
   );
-  const toggleRowColumn = (0, import_react8.useCallback)(
+  const toggleRowColumn = (0, import_react9.useCallback)(
     (field, currentAssignment) => {
       if (currentAssignment === "row") {
         onRemoveRowField(field);
@@ -1714,7 +2398,7 @@ function PivotConfig({
     },
     [onRemoveRowField, onAddColumnField, onRemoveColumnField, onAddRowField]
   );
-  const removeField = (0, import_react8.useCallback)(
+  const removeField = (0, import_react9.useCallback)(
     (field, assignedTo, valueConfig) => {
       if (assignedTo === "row") {
         onRemoveRowField(field);
@@ -1726,15 +2410,15 @@ function PivotConfig({
     },
     [onRemoveRowField, onRemoveColumnField, onRemoveValueField]
   );
-  const handleTotalsToggle = (0, import_react8.useCallback)((checked) => {
+  const handleTotalsToggle = (0, import_react9.useCallback)((checked) => {
     onShowRowTotalsChange(checked);
     onShowColumnTotalsChange(checked);
   }, [onShowRowTotalsChange, onShowColumnTotalsChange]);
-  const openCalcModal = (0, import_react8.useCallback)((field) => {
+  const openCalcModal = (0, import_react9.useCallback)((field) => {
     setEditingCalcField(field || null);
     setShowCalcModal(true);
   }, []);
-  const handleSaveCalcField = (0, import_react8.useCallback)((field) => {
+  const handleSaveCalcField = (0, import_react9.useCallback)((field) => {
     if (editingCalcField && onUpdateCalculatedField) {
       onUpdateCalculatedField(field);
     } else if (onAddCalculatedField) {
@@ -1743,14 +2427,14 @@ function PivotConfig({
     setShowCalcModal(false);
     setEditingCalcField(null);
   }, [editingCalcField, onAddCalculatedField, onUpdateCalculatedField]);
-  const handleCloseCalcModal = (0, import_react8.useCallback)(() => {
+  const handleCloseCalcModal = (0, import_react9.useCallback)(() => {
     setShowCalcModal(false);
     setEditingCalcField(null);
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "vpg-pivot-config", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "vpg-config-header", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("h3", { className: "vpg-config-title", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { className: "vpg-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "vpg-pivot-config", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "vpg-config-header", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("h3", { className: "vpg-config-title", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { className: "vpg-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
           "path",
           {
             strokeLinecap: "round",
@@ -1761,13 +2445,13 @@ function PivotConfig({
         ) }),
         "Fields"
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "vpg-header-actions", children: assignedCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "vpg-header-actions", children: assignedCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
         "button",
         {
           className: "vpg-action-btn vpg-clear-btn",
           title: "Clear all",
           onClick: onClearConfig,
-          children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { className: "vpg-icon-sm", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { className: "vpg-icon-sm", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
             "path",
             {
               strokeLinecap: "round",
@@ -1779,9 +2463,9 @@ function PivotConfig({
         }
       ) })
     ] }),
-    assignedCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "vpg-assigned-section", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "vpg-section-label", children: "Active" }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "vpg-assigned-list", children: assignedFields.map((field) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    assignedCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "vpg-assigned-section", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "vpg-section-label", children: "Active" }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "vpg-assigned-list", children: assignedFields.map((field) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
         "div",
         {
           className: `vpg-assigned-item vpg-type-${field.assignedTo}${field.isCalculated ? " vpg-type-calc" : ""}`,
@@ -1790,12 +2474,12 @@ function PivotConfig({
           onDragStart: (e) => handleDragStart(field.field, e),
           onDragEnd,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "vpg-item-main", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: `vpg-item-badge ${field.assignedTo}${field.isCalculated ? " calc" : ""}`, children: field.isCalculated ? "\u0192" : field.assignedTo === "row" ? "R" : field.assignedTo === "column" ? "C" : (0, import_tinypivot_core6.getAggregationSymbol)(field.valueConfig?.aggregation || "sum") }),
-              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "vpg-item-name", children: getFieldDisplayName(field) })
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "vpg-item-main", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: `vpg-item-badge ${field.assignedTo}${field.isCalculated ? " calc" : ""}`, children: field.isCalculated ? "\u0192" : field.assignedTo === "row" ? "R" : field.assignedTo === "column" ? "C" : (0, import_tinypivot_core7.getAggregationSymbol)(field.valueConfig?.aggregation || "sum") }),
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "vpg-item-name", children: getFieldDisplayName(field) })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "vpg-item-actions", children: [
-              (field.assignedTo === "row" || field.assignedTo === "column") && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "vpg-item-actions", children: [
+              (field.assignedTo === "row" || field.assignedTo === "column") && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                 "button",
                 {
                   className: "vpg-toggle-btn",
@@ -1804,14 +2488,14 @@ function PivotConfig({
                     e.stopPropagation();
                     toggleRowColumn(field.field, field.assignedTo);
                   },
-                  children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                  children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                     "svg",
                     {
                       className: "vpg-icon-xs",
                       fill: "none",
                       stroke: "currentColor",
                       viewBox: "0 0 24 24",
-                      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                      children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                         "path",
                         {
                           strokeLinecap: "round",
@@ -1824,7 +2508,7 @@ function PivotConfig({
                   )
                 }
               ),
-              field.assignedTo === "value" && field.valueConfig && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              field.assignedTo === "value" && field.valueConfig && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                 "select",
                 {
                   className: "vpg-agg-select",
@@ -1838,7 +2522,7 @@ function PivotConfig({
                     );
                   },
                   onClick: (e) => e.stopPropagation(),
-                  children: import_tinypivot_core6.AGGREGATION_OPTIONS.map((agg) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+                  children: import_tinypivot_core7.AGGREGATION_OPTIONS.map((agg) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
                     "option",
                     {
                       value: agg.value,
@@ -1854,7 +2538,7 @@ function PivotConfig({
                   ))
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                 "button",
                 {
                   className: "vpg-remove-btn",
@@ -1872,14 +2556,14 @@ function PivotConfig({
         field.field
       )) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "vpg-unassigned-section", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "vpg-section-header", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "vpg-section-label", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "vpg-unassigned-section", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "vpg-section-header", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "vpg-section-label", children: [
         "Available",
         " ",
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "vpg-count", children: unassignedFields.length })
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "vpg-count", children: unassignedFields.length })
       ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "vpg-field-search", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { className: "vpg-search-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "vpg-field-search", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { className: "vpg-search-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
           "path",
           {
             strokeLinecap: "round",
@@ -1888,7 +2572,7 @@ function PivotConfig({
             d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
           "input",
           {
             type: "text",
@@ -1898,7 +2582,7 @@ function PivotConfig({
             className: "vpg-search-input"
           }
         ),
-        fieldSearch && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { className: "vpg-clear-search", onClick: () => setFieldSearch(""), children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { className: "vpg-icon-xs", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        fieldSearch && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { className: "vpg-clear-search", onClick: () => setFieldSearch(""), children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { className: "vpg-icon-xs", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
           "path",
           {
             strokeLinecap: "round",
@@ -1908,8 +2592,8 @@ function PivotConfig({
           }
         ) }) })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "vpg-field-list", children: [
-        filteredUnassignedFields.map((field) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "vpg-field-list", children: [
+        filteredUnassignedFields.map((field) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
           "div",
           {
             className: `vpg-field-item${field.isNumeric && !field.isCalculated ? " vpg-is-numeric" : ""}${field.isCalculated ? " vpg-is-calculated" : ""}`,
@@ -1918,10 +2602,10 @@ function PivotConfig({
             onDragStart: (e) => handleDragStart(field.field, e),
             onDragEnd,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: `vpg-field-type-icon${field.isCalculated ? " vpg-calc-type" : ""}`, title: field.type, children: getFieldIcon(field.type, field.isCalculated) }),
-              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "vpg-field-name", children: getFieldDisplayName(field) }),
-              field.isCalculated ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: `vpg-field-type-icon${field.isCalculated ? " vpg-calc-type" : ""}`, title: field.type, children: getFieldIcon(field.type, field.isCalculated) }),
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "vpg-field-name", children: getFieldDisplayName(field) }),
+              field.isCalculated ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                   "button",
                   {
                     className: "vpg-field-edit",
@@ -1935,7 +2619,7 @@ function PivotConfig({
                     children: "\u270E"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                   "button",
                   {
                     className: "vpg-field-delete",
@@ -1949,22 +2633,22 @@ function PivotConfig({
                     children: "\xD7"
                   }
                 )
-              ] }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "vpg-unique-count", children: field.uniqueCount })
+              ] }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "vpg-unique-count", children: field.uniqueCount })
             ]
           },
           field.field
         )),
-        filteredUnassignedFields.length === 0 && fieldSearch && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "vpg-empty-hint", children: [
+        filteredUnassignedFields.length === 0 && fieldSearch && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "vpg-empty-hint", children: [
           'No fields match "',
           fieldSearch,
           '"'
         ] }),
-        unassignedFields.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "vpg-empty-hint", children: "All fields assigned" })
+        unassignedFields.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "vpg-empty-hint", children: "All fields assigned" })
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "vpg-options-section", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("label", { className: "vpg-option-toggle", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "vpg-options-section", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("label", { className: "vpg-option-toggle", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
           "input",
           {
             type: "checkbox",
@@ -1972,14 +2656,14 @@ function PivotConfig({
             onChange: (e) => handleTotalsToggle(e.target.checked)
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: "Totals" })
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: "Totals" })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("button", { className: "vpg-calc-btn", onClick: () => openCalcModal(), title: "Add calculated field (e.g. Profit Margin %)", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "vpg-calc-icon", children: "\u0192" }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: "+ Calc" })
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("button", { className: "vpg-calc-btn", onClick: () => openCalcModal(), title: "Add calculated field (e.g. Profit Margin %)", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "vpg-calc-icon", children: "\u0192" }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: "+ Calc" })
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       CalculatedFieldModal,
       {
         show: showCalcModal,
@@ -1993,9 +2677,9 @@ function PivotConfig({
 }
 
 // src/components/PivotSkeleton.tsx
-var import_tinypivot_core7 = require("@smallwebco/tinypivot-core");
-var import_react9 = require("react");
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_tinypivot_core8 = require("@smallwebco/tinypivot-core");
+var import_react10 = require("react");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 function PivotSkeleton({
   rowFields,
   columnFields,
@@ -2018,7 +2702,7 @@ function PivotSkeleton({
   onReorderColumnFields
 }) {
   const { showWatermark, canUsePivot, isDemo } = useLicense();
-  const getValueFieldDisplayName = (0, import_react9.useCallback)((field) => {
+  const getValueFieldDisplayName = (0, import_react10.useCallback)((field) => {
     if (field.startsWith("calc:")) {
       const calcId = field.replace("calc:", "");
       const calcField = calculatedFields?.find((c) => c.id === calcId);
@@ -2026,15 +2710,15 @@ function PivotSkeleton({
     }
     return field;
   }, [calculatedFields]);
-  const isCalculatedField = (0, import_react9.useCallback)((field) => {
+  const isCalculatedField = (0, import_react10.useCallback)((field) => {
     return field.startsWith("calc:");
   }, []);
-  const [dragOverArea, setDragOverArea] = (0, import_react9.useState)(null);
-  const [reorderDragSource, setReorderDragSource] = (0, import_react9.useState)(null);
-  const [reorderDropTarget, setReorderDropTarget] = (0, import_react9.useState)(null);
-  const [sortDirection, setSortDirection] = (0, import_react9.useState)("asc");
-  const [sortTarget, setSortTarget] = (0, import_react9.useState)("row");
-  const toggleSort = (0, import_react9.useCallback)((target = "row") => {
+  const [dragOverArea, setDragOverArea] = (0, import_react10.useState)(null);
+  const [reorderDragSource, setReorderDragSource] = (0, import_react10.useState)(null);
+  const [reorderDropTarget, setReorderDropTarget] = (0, import_react10.useState)(null);
+  const [sortDirection, setSortDirection] = (0, import_react10.useState)("asc");
+  const [sortTarget, setSortTarget] = (0, import_react10.useState)("row");
+  const toggleSort = (0, import_react10.useCallback)((target = "row") => {
     if (sortTarget === target) {
       setSortDirection((prev) => prev === "asc" ? "desc" : "asc");
     } else {
@@ -2042,13 +2726,13 @@ function PivotSkeleton({
       setSortDirection("asc");
     }
   }, [sortTarget]);
-  const [selectedCell, setSelectedCell] = (0, import_react9.useState)(null);
-  const [selectionStart, setSelectionStart] = (0, import_react9.useState)(null);
-  const [selectionEnd, setSelectionEnd] = (0, import_react9.useState)(null);
-  const [isSelecting, setIsSelecting] = (0, import_react9.useState)(false);
-  const [showCopyToast, setShowCopyToast] = (0, import_react9.useState)(false);
-  const [copyToastMessage, setCopyToastMessage] = (0, import_react9.useState)("");
-  const selectionBounds = (0, import_react9.useMemo)(() => {
+  const [selectedCell, setSelectedCell] = (0, import_react10.useState)(null);
+  const [selectionStart, setSelectionStart] = (0, import_react10.useState)(null);
+  const [selectionEnd, setSelectionEnd] = (0, import_react10.useState)(null);
+  const [isSelecting, setIsSelecting] = (0, import_react10.useState)(false);
+  const [showCopyToast, setShowCopyToast] = (0, import_react10.useState)(false);
+  const [copyToastMessage, setCopyToastMessage] = (0, import_react10.useState)("");
+  const selectionBounds = (0, import_react10.useMemo)(() => {
     if (!selectionStart || !selectionEnd)
       return null;
     return {
@@ -2058,7 +2742,7 @@ function PivotSkeleton({
       maxCol: Math.max(selectionStart.col, selectionEnd.col)
     };
   }, [selectionStart, selectionEnd]);
-  const handleCellMouseDown = (0, import_react9.useCallback)(
+  const handleCellMouseDown = (0, import_react10.useCallback)(
     (rowIndex, colIndex, event) => {
       event.preventDefault();
       if (event.shiftKey && selectedCell) {
@@ -2072,7 +2756,7 @@ function PivotSkeleton({
     },
     [selectedCell]
   );
-  const handleCellMouseEnter = (0, import_react9.useCallback)(
+  const handleCellMouseEnter = (0, import_react10.useCallback)(
     (rowIndex, colIndex) => {
       if (isSelecting) {
         setSelectionEnd({ row: rowIndex, col: colIndex });
@@ -2080,7 +2764,7 @@ function PivotSkeleton({
     },
     [isSelecting]
   );
-  const isCellSelected = (0, import_react9.useCallback)(
+  const isCellSelected = (0, import_react10.useCallback)(
     (rowIndex, colIndex) => {
       if (!selectionBounds) {
         return selectedCell?.row === rowIndex && selectedCell?.col === colIndex;
@@ -2090,12 +2774,12 @@ function PivotSkeleton({
     },
     [selectionBounds, selectedCell]
   );
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     const handleMouseUp = () => setIsSelecting(false);
     document.addEventListener("mouseup", handleMouseUp);
     return () => document.removeEventListener("mouseup", handleMouseUp);
   }, []);
-  const sortedRowIndices = (0, import_react9.useMemo)(() => {
+  const sortedRowIndices = (0, import_react10.useMemo)(() => {
     if (!pivotResult)
       return [];
     const indices = pivotResult.rowHeaders.map((_, i) => i);
@@ -2123,7 +2807,7 @@ function PivotSkeleton({
     });
     return indices;
   }, [pivotResult, sortTarget, sortDirection]);
-  const copySelectionToClipboard = (0, import_react9.useCallback)(() => {
+  const copySelectionToClipboard = (0, import_react10.useCallback)(() => {
     if (!selectionBounds || !pivotResult)
       return;
     const { minRow, maxRow, minCol, maxCol } = selectionBounds;
@@ -2149,7 +2833,7 @@ function PivotSkeleton({
       console.error("Copy failed:", err);
     });
   }, [selectionBounds, pivotResult, sortedRowIndices]);
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     const handleKeydown = (event) => {
       if (!selectionBounds)
         return;
@@ -2167,7 +2851,7 @@ function PivotSkeleton({
     document.addEventListener("keydown", handleKeydown);
     return () => document.removeEventListener("keydown", handleKeydown);
   }, [selectionBounds, copySelectionToClipboard]);
-  const selectionStats = (0, import_react9.useMemo)(() => {
+  const selectionStats = (0, import_react10.useMemo)(() => {
     if (!selectionBounds || !pivotResult)
       return null;
     const { minRow, maxRow, minCol, maxCol } = selectionBounds;
@@ -2196,18 +2880,18 @@ function PivotSkeleton({
       avg
     };
   }, [selectionBounds, pivotResult, sortedRowIndices]);
-  const formatStatValue = (0, import_react9.useCallback)((val) => {
+  const formatStatValue = (0, import_react10.useCallback)((val) => {
     if (Math.abs(val) >= 1e6)
       return `${(val / 1e6).toFixed(2)}M`;
     if (Math.abs(val) >= 1e3)
       return `${(val / 1e3).toFixed(2)}K`;
     return val.toFixed(2);
   }, []);
-  const columnHeaderCells = (0, import_react9.useMemo)(() => {
+  const columnHeaderCells = (0, import_react10.useMemo)(() => {
     if (!pivotResult || pivotResult.headers.length === 0) {
       return [
         valueFields.map((vf) => ({
-          label: `${getValueFieldDisplayName(vf.field)} (${(0, import_tinypivot_core7.getAggregationLabel)(vf.aggregation)})`,
+          label: `${getValueFieldDisplayName(vf.field)} (${(0, import_tinypivot_core8.getAggregationLabel)(vf.aggregation)})`,
           colspan: 1
         }))
       ];
@@ -2231,13 +2915,13 @@ function PivotSkeleton({
     return result;
   }, [pivotResult, valueFields]);
   const hasActiveFilters = activeFilters && activeFilters.length > 0;
-  const filterSummary = (0, import_react9.useMemo)(() => {
+  const filterSummary = (0, import_react10.useMemo)(() => {
     if (!activeFilters || activeFilters.length === 0)
       return "";
     return activeFilters.map((f) => f.column).join(", ");
   }, [activeFilters]);
-  const [showFilterTooltip, setShowFilterTooltip] = (0, import_react9.useState)(false);
-  const filterTooltipDetails = (0, import_react9.useMemo)(() => {
+  const [showFilterTooltip, setShowFilterTooltip] = (0, import_react10.useState)(false);
+  const filterTooltipDetails = (0, import_react10.useMemo)(() => {
     if (!activeFilters || activeFilters.length === 0)
       return [];
     return activeFilters.map((f) => {
@@ -2262,7 +2946,7 @@ function PivotSkeleton({
       };
     });
   }, [activeFilters]);
-  const handleDragOver = (0, import_react9.useCallback)(
+  const handleDragOver = (0, import_react10.useCallback)(
     (area, event) => {
       event.preventDefault();
       event.dataTransfer.dropEffect = "move";
@@ -2270,10 +2954,10 @@ function PivotSkeleton({
     },
     []
   );
-  const handleDragLeave = (0, import_react9.useCallback)(() => {
+  const handleDragLeave = (0, import_react10.useCallback)(() => {
     setDragOverArea(null);
   }, []);
-  const handleDrop = (0, import_react9.useCallback)(
+  const handleDrop = (0, import_react10.useCallback)(
     (area, event) => {
       event.preventDefault();
       const field = event.dataTransfer?.getData("text/plain");
@@ -2303,7 +2987,7 @@ function PivotSkeleton({
     },
     [rowFields, columnFields, valueFields, onAddRowField, onRemoveRowField, onAddColumnField, onRemoveColumnField, onAddValueField, onRemoveValueField]
   );
-  const handleChipDragStart = (0, import_react9.useCallback)(
+  const handleChipDragStart = (0, import_react10.useCallback)(
     (zone, index, event) => {
       setReorderDragSource({ zone, index });
       event.dataTransfer.effectAllowed = "move";
@@ -2314,11 +2998,11 @@ function PivotSkeleton({
     },
     []
   );
-  const handleChipDragEnd = (0, import_react9.useCallback)(() => {
+  const handleChipDragEnd = (0, import_react10.useCallback)(() => {
     setReorderDragSource(null);
     setReorderDropTarget(null);
   }, []);
-  const handleChipDragOver = (0, import_react9.useCallback)(
+  const handleChipDragOver = (0, import_react10.useCallback)(
     (zone, index, event) => {
       event.preventDefault();
       if (reorderDragSource && reorderDragSource.zone === zone) {
@@ -2328,10 +3012,10 @@ function PivotSkeleton({
     },
     [reorderDragSource]
   );
-  const handleChipDragLeave = (0, import_react9.useCallback)(() => {
+  const handleChipDragLeave = (0, import_react10.useCallback)(() => {
     setReorderDropTarget(null);
   }, []);
-  const handleChipDrop = (0, import_react9.useCallback)(
+  const handleChipDrop = (0, import_react10.useCallback)(
     (zone, targetIndex, event) => {
       event.preventDefault();
       event.stopPropagation();
@@ -2357,13 +3041,13 @@ function PivotSkeleton({
     },
     [reorderDragSource, rowFields, columnFields, onReorderRowFields, onReorderColumnFields]
   );
-  const isChipDragSource = (0, import_react9.useCallback)(
+  const isChipDragSource = (0, import_react10.useCallback)(
     (zone, index) => {
       return reorderDragSource?.zone === zone && reorderDragSource?.index === index;
     },
     [reorderDragSource]
   );
-  const isChipDropTarget = (0, import_react9.useCallback)(
+  const isChipDropTarget = (0, import_react10.useCallback)(
     (zone, index) => {
       return reorderDropTarget?.zone === zone && reorderDropTarget?.index === index;
     },
@@ -2371,25 +3055,25 @@ function PivotSkeleton({
   );
   const currentFontSize = fontSize;
   const rowHeaderWidth = 180;
-  const rowHeaderColWidth = (0, import_react9.useMemo)(() => {
+  const rowHeaderColWidth = (0, import_react10.useMemo)(() => {
     const numCols = Math.max(rowFields.length, 1);
     return Math.max(rowHeaderWidth / numCols, 80);
   }, [rowFields.length]);
-  const getRowHeaderLeftOffset = (0, import_react9.useCallback)((fieldIdx) => {
+  const getRowHeaderLeftOffset = (0, import_react10.useCallback)((fieldIdx) => {
     return fieldIdx * rowHeaderColWidth;
   }, [rowHeaderColWidth]);
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
     "div",
     {
       className: `vpg-pivot-skeleton vpg-font-${currentFontSize} ${draggingField ? "vpg-is-dragging" : ""}`,
       children: [
-        showCopyToast && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "vpg-toast", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { className: "vpg-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) }),
+        showCopyToast && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "vpg-toast", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("svg", { className: "vpg-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) }),
           copyToastMessage
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "vpg-skeleton-header", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "vpg-skeleton-title", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { className: "vpg-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "vpg-skeleton-header", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "vpg-skeleton-title", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("svg", { className: "vpg-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
               "path",
               {
                 strokeLinecap: "round",
@@ -2398,24 +3082,24 @@ function PivotSkeleton({
                 d: "M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z"
               }
             ) }),
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: "Pivot Table" })
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: "Pivot Table" })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "vpg-header-right", children: [
-            hasActiveFilters && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "vpg-header-right", children: [
+            hasActiveFilters && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
               "div",
               {
                 className: "vpg-filter-indicator",
                 onMouseEnter: () => setShowFilterTooltip(true),
                 onMouseLeave: () => setShowFilterTooltip(false),
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                     "svg",
                     {
                       className: "vpg-filter-icon",
                       fill: "none",
                       stroke: "currentColor",
                       viewBox: "0 0 24 24",
-                      children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                         "path",
                         {
                           strokeLinecap: "round",
@@ -2426,11 +3110,11 @@ function PivotSkeleton({
                       )
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "vpg-filter-text", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "vpg-filter-text", children: [
                     "Filtered:",
                     " ",
-                    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("strong", { children: filterSummary }),
-                    filteredRowCount !== void 0 && totalRowCount !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "vpg-filter-count", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("strong", { children: filterSummary }),
+                    filteredRowCount !== void 0 && totalRowCount !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "vpg-filter-count", children: [
                       "(",
                       filteredRowCount.toLocaleString(),
                       " ",
@@ -2441,13 +3125,13 @@ function PivotSkeleton({
                       "rows)"
                     ] })
                   ] }),
-                  showFilterTooltip && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "vpg-filter-tooltip", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "vpg-tooltip-header", children: "Active Filters" }),
-                    filterTooltipDetails.map((filter) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "vpg-tooltip-filter", children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "vpg-tooltip-column", children: filter.column }),
-                      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "vpg-tooltip-values", children: filter.isRange ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "vpg-tooltip-value vpg-range-value", children: filter.displayText }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
-                        filter.values.map((val, idx) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "vpg-tooltip-value", children: val }, idx)),
-                        filter.remaining > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "vpg-tooltip-more", children: [
+                  showFilterTooltip && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "vpg-filter-tooltip", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "vpg-tooltip-header", children: "Active Filters" }),
+                    filterTooltipDetails.map((filter) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "vpg-tooltip-filter", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "vpg-tooltip-column", children: filter.column }),
+                      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "vpg-tooltip-values", children: filter.isRange ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "vpg-tooltip-value vpg-range-value", children: filter.displayText }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+                        filter.values.map((val, idx) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "vpg-tooltip-value", children: val }, idx)),
+                        filter.remaining > 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "vpg-tooltip-more", children: [
                           "+",
                           filter.remaining,
                           " ",
@@ -2455,7 +3139,7 @@ function PivotSkeleton({
                         ] })
                       ] }) })
                     ] }, filter.column)),
-                    filteredRowCount !== void 0 && totalRowCount !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "vpg-tooltip-summary", children: [
+                    filteredRowCount !== void 0 && totalRowCount !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "vpg-tooltip-summary", children: [
                       "Showing",
                       " ",
                       filteredRowCount.toLocaleString(),
@@ -2470,20 +3154,20 @@ function PivotSkeleton({
                 ]
               }
             ),
-            isConfigured && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "vpg-config-summary", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "vpg-summary-badge vpg-rows", children: [
+            isConfigured && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "vpg-config-summary", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "vpg-summary-badge vpg-rows", children: [
                 rowFields.length,
                 " ",
                 "row",
                 rowFields.length !== 1 ? "s" : ""
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "vpg-summary-badge vpg-cols", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "vpg-summary-badge vpg-cols", children: [
                 columnFields.length,
                 " ",
                 "col",
                 columnFields.length !== 1 ? "s" : ""
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "vpg-summary-badge vpg-vals", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "vpg-summary-badge vpg-vals", children: [
                 valueFields.length,
                 " ",
                 "val",
@@ -2492,8 +3176,8 @@ function PivotSkeleton({
             ] })
           ] })
         ] }),
-        !canUsePivot ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "vpg-pro-required", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "vpg-pro-content", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { className: "vpg-pro-icon", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        !canUsePivot ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "vpg-pro-required", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "vpg-pro-content", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("svg", { className: "vpg-pro-icon", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
             "path",
             {
               strokeLinecap: "round",
@@ -2502,12 +3186,12 @@ function PivotSkeleton({
               d: "M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
             }
           ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("h3", { children: "Pro Feature" }),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { children: "Pivot Table functionality requires a Pro license." }),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("a", { href: "https://tiny-pivot.com/#pricing", target: "_blank", rel: "noopener noreferrer", className: "vpg-pro-link", children: "Get Pro License \u2192" })
-        ] }) }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "vpg-config-bar", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("h3", { children: "Pro Feature" }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { children: "Pivot Table functionality requires a Pro license." }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("a", { href: "https://tiny-pivot.com/#pricing", target: "_blank", rel: "noopener noreferrer", className: "vpg-pro-link", children: "Get Pro License \u2192" })
+        ] }) }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "vpg-config-bar", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
               "div",
               {
                 className: `vpg-drop-zone vpg-row-zone ${dragOverArea === "row" ? "vpg-drag-over" : ""}`,
@@ -2515,12 +3199,12 @@ function PivotSkeleton({
                 onDragLeave: handleDragLeave,
                 onDrop: (e) => handleDrop("row", e),
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "vpg-zone-header", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "vpg-zone-icon vpg-row-icon", children: "\u2193" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "vpg-zone-label", children: "Rows" })
+                  /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "vpg-zone-header", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "vpg-zone-icon vpg-row-icon", children: "\u2193" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "vpg-zone-label", children: "Rows" })
                   ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "vpg-zone-chips", children: [
-                    rowFields.map((field, idx) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+                  /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "vpg-zone-chips", children: [
+                    rowFields.map((field, idx) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
                       "div",
                       {
                         className: `vpg-mini-chip vpg-row-chip ${isChipDragSource("row", idx) ? "vpg-chip-dragging" : ""} ${isChipDropTarget("row", idx) ? "vpg-chip-drop-target" : ""}`,
@@ -2531,9 +3215,9 @@ function PivotSkeleton({
                         onDragLeave: handleChipDragLeave,
                         onDrop: (e) => handleChipDrop("row", idx, e),
                         children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "vpg-drag-handle", children: "\u22EE\u22EE" }),
-                          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "vpg-mini-name", children: field }),
-                          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "vpg-drag-handle", children: "\u22EE\u22EE" }),
+                          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "vpg-mini-name", children: field }),
+                          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                             "button",
                             {
                               className: "vpg-mini-remove",
@@ -2548,12 +3232,12 @@ function PivotSkeleton({
                       },
                       field
                     )),
-                    rowFields.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "vpg-zone-hint", children: "Drop here" })
+                    rowFields.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "vpg-zone-hint", children: "Drop here" })
                   ] })
                 ]
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
               "div",
               {
                 className: `vpg-drop-zone vpg-column-zone ${dragOverArea === "column" ? "vpg-drag-over" : ""}`,
@@ -2561,12 +3245,12 @@ function PivotSkeleton({
                 onDragLeave: handleDragLeave,
                 onDrop: (e) => handleDrop("column", e),
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "vpg-zone-header", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "vpg-zone-icon vpg-column-icon", children: "\u2192" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "vpg-zone-label", children: "Columns" })
+                  /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "vpg-zone-header", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "vpg-zone-icon vpg-column-icon", children: "\u2192" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "vpg-zone-label", children: "Columns" })
                   ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "vpg-zone-chips", children: [
-                    columnFields.map((field, idx) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+                  /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "vpg-zone-chips", children: [
+                    columnFields.map((field, idx) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
                       "div",
                       {
                         className: `vpg-mini-chip vpg-column-chip ${isChipDragSource("column", idx) ? "vpg-chip-dragging" : ""} ${isChipDropTarget("column", idx) ? "vpg-chip-drop-target" : ""}`,
@@ -2577,9 +3261,9 @@ function PivotSkeleton({
                         onDragLeave: handleChipDragLeave,
                         onDrop: (e) => handleChipDrop("column", idx, e),
                         children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "vpg-drag-handle", children: "\u22EE\u22EE" }),
-                          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "vpg-mini-name", children: field }),
-                          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "vpg-drag-handle", children: "\u22EE\u22EE" }),
+                          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "vpg-mini-name", children: field }),
+                          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                             "button",
                             {
                               className: "vpg-mini-remove",
@@ -2594,12 +3278,12 @@ function PivotSkeleton({
                       },
                       field
                     )),
-                    columnFields.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "vpg-zone-hint", children: "Drop here" })
+                    columnFields.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "vpg-zone-hint", children: "Drop here" })
                   ] })
                 ]
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
               "div",
               {
                 className: `vpg-drop-zone vpg-value-zone ${dragOverArea === "value" ? "vpg-drag-over" : ""}`,
@@ -2607,19 +3291,19 @@ function PivotSkeleton({
                 onDragLeave: handleDragLeave,
                 onDrop: (e) => handleDrop("value", e),
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "vpg-zone-header", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "vpg-zone-icon vpg-value-icon", children: "\u03A3" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "vpg-zone-label", children: "Values" })
+                  /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "vpg-zone-header", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "vpg-zone-icon vpg-value-icon", children: "\u03A3" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "vpg-zone-label", children: "Values" })
                   ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "vpg-zone-chips", children: [
-                    valueFields.map((vf) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+                  /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "vpg-zone-chips", children: [
+                    valueFields.map((vf) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
                       "div",
                       {
                         className: `vpg-mini-chip vpg-value-chip${isCalculatedField(vf.field) ? " vpg-calc-chip" : ""}`,
                         children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "vpg-agg-symbol", children: isCalculatedField(vf.field) ? "\u0192" : (0, import_tinypivot_core7.getAggregationSymbol)(vf.aggregation) }),
-                          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "vpg-mini-name", children: getValueFieldDisplayName(vf.field) }),
-                          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "vpg-agg-symbol", children: isCalculatedField(vf.field) ? "\u0192" : (0, import_tinypivot_core8.getAggregationSymbol)(vf.aggregation) }),
+                          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "vpg-mini-name", children: getValueFieldDisplayName(vf.field) }),
+                          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                             "button",
                             {
                               className: "vpg-mini-remove",
@@ -2631,21 +3315,21 @@ function PivotSkeleton({
                       },
                       `${vf.field}-${vf.aggregation}`
                     )),
-                    valueFields.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "vpg-zone-hint", children: "Drop numeric" })
+                    valueFields.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "vpg-zone-hint", children: "Drop numeric" })
                   ] })
                 ]
               }
             )
           ] }),
-          (!isConfigured || !pivotResult) && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "vpg-placeholder", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "vpg-placeholder-content", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          (!isConfigured || !pivotResult) && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "vpg-placeholder", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "vpg-placeholder-content", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
               "svg",
               {
                 className: "vpg-placeholder-icon",
                 fill: "none",
                 viewBox: "0 0 24 24",
                 stroke: "currentColor",
-                children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                   "path",
                   {
                     strokeLinecap: "round",
@@ -2656,58 +3340,58 @@ function PivotSkeleton({
                 )
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "vpg-placeholder-text", children: valueFields.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "vpg-placeholder-text", children: valueFields.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
               "Add a",
               " ",
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("strong", { children: "Values" }),
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("strong", { children: "Values" }),
               " ",
               "field to see your pivot table"
-            ] }) : rowFields.length === 0 && columnFields.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+            ] }) : rowFields.length === 0 && columnFields.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
               "Add",
               " ",
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("strong", { children: "Row" }),
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("strong", { children: "Row" }),
               " ",
               "or",
               " ",
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("strong", { children: "Column" }),
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("strong", { children: "Column" }),
               " ",
               "fields to group your data"
             ] }) : "Your pivot table will appear here" })
           ] }) }),
-          isConfigured && pivotResult && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "vpg-table-container", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("table", { className: "vpg-pivot-table", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("thead", { children: columnHeaderCells.map((headerRow, levelIdx) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("tr", { className: "vpg-column-header-row", children: [
-              levelIdx === 0 && (rowFields.length > 0 ? rowFields : ["Rows"]).map((field, fieldIdx) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          isConfigured && pivotResult && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "vpg-table-container", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("table", { className: "vpg-pivot-table", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("thead", { children: columnHeaderCells.map((headerRow, levelIdx) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("tr", { className: "vpg-column-header-row", children: [
+              levelIdx === 0 && (rowFields.length > 0 ? rowFields : ["Rows"]).map((field, fieldIdx) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                 "th",
                 {
                   className: "vpg-row-header-label",
                   rowSpan: columnHeaderCells.length,
                   style: { width: `${rowHeaderColWidth}px`, minWidth: "80px", left: `${getRowHeaderLeftOffset(fieldIdx)}px` },
                   onClick: () => toggleSort("row"),
-                  children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "vpg-header-content", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: field }),
-                    (fieldIdx === rowFields.length - 1 || rowFields.length === 0) && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: `vpg-sort-indicator ${sortTarget === "row" ? "active" : ""}`, children: sortTarget === "row" ? sortDirection === "asc" ? "\u2191" : "\u2193" : "\u21C5" })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "vpg-header-content", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: field }),
+                    (fieldIdx === rowFields.length - 1 || rowFields.length === 0) && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: `vpg-sort-indicator ${sortTarget === "row" ? "active" : ""}`, children: sortTarget === "row" ? sortDirection === "asc" ? "\u2191" : "\u2193" : "\u21C5" })
                   ] })
                 },
                 `row-header-${fieldIdx}`
               )),
-              headerRow.map((cell, idx) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              headerRow.map((cell, idx) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                 "th",
                 {
                   className: "vpg-column-header-cell",
                   colSpan: cell.colspan,
                   onClick: () => levelIdx === columnHeaderCells.length - 1 && toggleSort(idx),
-                  children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "vpg-header-content", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: cell.label }),
-                    levelIdx === columnHeaderCells.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: `vpg-sort-indicator ${sortTarget === idx ? "active" : ""}`, children: sortTarget === idx ? sortDirection === "asc" ? "\u2191" : "\u2193" : "\u21C5" })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "vpg-header-content", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: cell.label }),
+                    levelIdx === columnHeaderCells.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: `vpg-sort-indicator ${sortTarget === idx ? "active" : ""}`, children: sortTarget === idx ? sortDirection === "asc" ? "\u2191" : "\u2193" : "\u21C5" })
                   ] })
                 },
                 idx
               )),
-              pivotResult.rowTotals.length > 0 && levelIdx === 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("th", { className: "vpg-total-header", rowSpan: columnHeaderCells.length, children: "Total" })
+              pivotResult.rowTotals.length > 0 && levelIdx === 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("th", { className: "vpg-total-header", rowSpan: columnHeaderCells.length, children: "Total" })
             ] }, `header-${levelIdx}`)) }),
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("tbody", { children: [
-              sortedRowIndices.map((sortedIdx) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("tr", { className: "vpg-data-row", children: [
-                pivotResult.rowHeaders[sortedIdx].map((val, idx) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("tbody", { children: [
+              sortedRowIndices.map((sortedIdx) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("tr", { className: "vpg-data-row", children: [
+                pivotResult.rowHeaders[sortedIdx].map((val, idx) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                   "th",
                   {
                     className: "vpg-row-header-cell",
@@ -2718,7 +3402,7 @@ function PivotSkeleton({
                 )),
                 pivotResult.data[sortedIdx].map((cell, colIdx) => {
                   const displayRowIdx = sortedRowIndices.indexOf(sortedIdx);
-                  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                     "td",
                     {
                       className: `vpg-data-cell ${isCellSelected(displayRowIdx, colIdx) ? "selected" : ""} ${cell.value === null ? "vpg-is-null" : ""}`,
@@ -2729,10 +3413,10 @@ function PivotSkeleton({
                     colIdx
                   );
                 }),
-                pivotResult.rowTotals[sortedIdx] && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("td", { className: "vpg-data-cell vpg-total-cell", children: pivotResult.rowTotals[sortedIdx].formattedValue })
+                pivotResult.rowTotals[sortedIdx] && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("td", { className: "vpg-data-cell vpg-total-cell", children: pivotResult.rowTotals[sortedIdx].formattedValue })
               ] }, sortedIdx)),
-              pivotResult.columnTotals.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("tr", { className: "vpg-totals-row", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              pivotResult.columnTotals.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("tr", { className: "vpg-totals-row", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                   "th",
                   {
                     className: "vpg-row-header-cell vpg-total-label",
@@ -2741,13 +3425,13 @@ function PivotSkeleton({
                     children: "Total"
                   }
                 ),
-                pivotResult.columnTotals.map((cell, colIdx) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("td", { className: "vpg-data-cell vpg-total-cell", children: cell.formattedValue }, colIdx)),
-                pivotResult.rowTotals.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("td", { className: "vpg-data-cell vpg-grand-total-cell", children: pivotResult.grandTotal.formattedValue })
+                pivotResult.columnTotals.map((cell, colIdx) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("td", { className: "vpg-data-cell vpg-total-cell", children: cell.formattedValue }, colIdx)),
+                pivotResult.rowTotals.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("td", { className: "vpg-data-cell vpg-grand-total-cell", children: pivotResult.grandTotal.formattedValue })
               ] })
             ] })
           ] }) }),
-          isConfigured && pivotResult && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "vpg-skeleton-footer", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "vpg-footer-info", children: [
+          isConfigured && pivotResult && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "vpg-skeleton-footer", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "vpg-footer-info", children: [
               pivotResult.rowHeaders.length,
               " ",
               "rows \xD7",
@@ -2755,30 +3439,30 @@ function PivotSkeleton({
               " ",
               "columns"
             ] }),
-            selectionStats && selectionStats.count > 1 && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "vpg-selection-stats", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "vpg-stat", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "vpg-stat-label", children: "Count:" }),
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "vpg-stat-value", children: selectionStats.count })
+            selectionStats && selectionStats.count > 1 && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "vpg-selection-stats", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "vpg-stat", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "vpg-stat-label", children: "Count:" }),
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "vpg-stat-value", children: selectionStats.count })
               ] }),
-              selectionStats.numericCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "vpg-stat-divider", children: "|" }),
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "vpg-stat", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "vpg-stat-label", children: "Sum:" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "vpg-stat-value", children: formatStatValue(selectionStats.sum) })
+              selectionStats.numericCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "vpg-stat-divider", children: "|" }),
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "vpg-stat", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "vpg-stat-label", children: "Sum:" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "vpg-stat-value", children: formatStatValue(selectionStats.sum) })
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "vpg-stat-divider", children: "|" }),
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "vpg-stat", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "vpg-stat-label", children: "Avg:" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "vpg-stat-value", children: formatStatValue(selectionStats.avg) })
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "vpg-stat-divider", children: "|" }),
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "vpg-stat", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "vpg-stat-label", children: "Avg:" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "vpg-stat-value", children: formatStatValue(selectionStats.avg) })
                 ] })
               ] })
             ] })
           ] })
         ] }),
-        showWatermark && canUsePivot && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: `vpg-watermark ${isDemo ? "vpg-demo-mode" : ""}`, children: isDemo ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "vpg-demo-badge", children: "DEMO" }),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: "Pro features unlocked for evaluation" }),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        showWatermark && canUsePivot && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: `vpg-watermark ${isDemo ? "vpg-demo-mode" : ""}`, children: isDemo ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "vpg-demo-badge", children: "DEMO" }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: "Pro features unlocked for evaluation" }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
             "a",
             {
               href: "https://tiny-pivot.com/#pricing",
@@ -2788,14 +3472,14 @@ function PivotSkeleton({
               children: "Get Pro License \u2192"
             }
           )
-        ] }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("a", { href: "https://tiny-pivot.com", target: "_blank", rel: "noopener noreferrer", children: "Powered by TinyPivot" }) })
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("a", { href: "https://tiny-pivot.com", target: "_blank", rel: "noopener noreferrer", children: "Powered by TinyPivot" }) })
       ]
     }
   );
 }
 
 // src/components/DataGrid.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 var MIN_COL_WIDTH = 120;
 var MAX_COL_WIDTH = 350;
 function DataGrid({
@@ -2820,38 +3504,42 @@ function DataGrid({
   onExport,
   onCopy
 }) {
-  const { showWatermark, canUsePivot, isDemo, isPro } = useLicense();
-  const currentTheme = (0, import_react10.useMemo)(() => {
+  const { showWatermark, canUsePivot, canUseCharts, isDemo, isPro } = useLicense();
+  const currentTheme = (0, import_react11.useMemo)(() => {
     if (theme === "auto") {
       return window.matchMedia?.("(prefers-color-scheme: dark)").matches ? "dark" : "light";
     }
     return theme;
   }, [theme]);
-  const [currentFontSize, setCurrentFontSize] = (0, import_react10.useState)(initialFontSize);
-  const [globalSearchTerm, setGlobalSearchTerm] = (0, import_react10.useState)("");
-  const [showSearchInput, setShowSearchInput] = (0, import_react10.useState)(false);
-  const [currentPage, setCurrentPage] = (0, import_react10.useState)(1);
-  const [columnWidths, setColumnWidths] = (0, import_react10.useState)({});
-  const [resizingColumnId, setResizingColumnId] = (0, import_react10.useState)(null);
-  const [resizeStartX, setResizeStartX] = (0, import_react10.useState)(0);
-  const [resizeStartWidth, setResizeStartWidth] = (0, import_react10.useState)(0);
-  const [gridHeight, setGridHeight] = (0, import_react10.useState)(initialHeight);
-  const [isResizingVertically, setIsResizingVertically] = (0, import_react10.useState)(false);
-  const [verticalResizeStartY, setVerticalResizeStartY] = (0, import_react10.useState)(0);
-  const [verticalResizeStartHeight, setVerticalResizeStartHeight] = (0, import_react10.useState)(0);
-  const [showCopyToast, setShowCopyToast] = (0, import_react10.useState)(false);
-  const [copyToastMessage, setCopyToastMessage] = (0, import_react10.useState)("");
-  const [viewMode, setViewMode] = (0, import_react10.useState)("grid");
-  const [showPivotConfig, setShowPivotConfig] = (0, import_react10.useState)(true);
-  const [draggingField, setDraggingField] = (0, import_react10.useState)(null);
-  const [activeFilterColumn, setActiveFilterColumn] = (0, import_react10.useState)(null);
-  const [filterDropdownPosition, setFilterDropdownPosition] = (0, import_react10.useState)({ top: 0, left: 0, maxHeight: 400 });
-  const [selectedCell, setSelectedCell] = (0, import_react10.useState)(null);
-  const [selectionStart, setSelectionStart] = (0, import_react10.useState)(null);
-  const [selectionEnd, setSelectionEnd] = (0, import_react10.useState)(null);
-  const [isSelecting, setIsSelecting] = (0, import_react10.useState)(false);
-  const tableContainerRef = (0, import_react10.useRef)(null);
-  const tableBodyRef = (0, import_react10.useRef)(null);
+  const [currentFontSize, setCurrentFontSize] = (0, import_react11.useState)(initialFontSize);
+  const [globalSearchTerm, setGlobalSearchTerm] = (0, import_react11.useState)("");
+  const [showSearchInput, setShowSearchInput] = (0, import_react11.useState)(false);
+  const [currentPage, setCurrentPage] = (0, import_react11.useState)(1);
+  const [columnWidths, setColumnWidths] = (0, import_react11.useState)({});
+  const [resizingColumnId, setResizingColumnId] = (0, import_react11.useState)(null);
+  const [resizeStartX, setResizeStartX] = (0, import_react11.useState)(0);
+  const [resizeStartWidth, setResizeStartWidth] = (0, import_react11.useState)(0);
+  const [gridHeight, setGridHeight] = (0, import_react11.useState)(initialHeight);
+  const [isResizingVertically, setIsResizingVertically] = (0, import_react11.useState)(false);
+  const [verticalResizeStartY, setVerticalResizeStartY] = (0, import_react11.useState)(0);
+  const [verticalResizeStartHeight, setVerticalResizeStartHeight] = (0, import_react11.useState)(0);
+  const [showCopyToast, setShowCopyToast] = (0, import_react11.useState)(false);
+  const [copyToastMessage, setCopyToastMessage] = (0, import_react11.useState)("");
+  const [viewMode, setViewMode] = (0, import_react11.useState)("grid");
+  const [_chartConfig, setChartConfig] = (0, import_react11.useState)(null);
+  const handleChartConfigChange = (0, import_react11.useCallback)((config) => {
+    setChartConfig(config);
+  }, []);
+  const [showPivotConfig, setShowPivotConfig] = (0, import_react11.useState)(true);
+  const [draggingField, setDraggingField] = (0, import_react11.useState)(null);
+  const [activeFilterColumn, setActiveFilterColumn] = (0, import_react11.useState)(null);
+  const [filterDropdownPosition, setFilterDropdownPosition] = (0, import_react11.useState)({ top: 0, left: 0, maxHeight: 400 });
+  const [selectedCell, setSelectedCell] = (0, import_react11.useState)(null);
+  const [selectionStart, setSelectionStart] = (0, import_react11.useState)(null);
+  const [selectionEnd, setSelectionEnd] = (0, import_react11.useState)(null);
+  const [isSelecting, setIsSelecting] = (0, import_react11.useState)(false);
+  const tableContainerRef = (0, import_react11.useRef)(null);
+  const tableBodyRef = (0, import_react11.useRef)(null);
   const fontSizeOptions = [
     { value: "xs", label: "S" },
     { value: "sm", label: "M" },
@@ -2875,7 +3563,7 @@ function DataGrid({
     setNumericRangeFilter,
     getNumericRangeFilter
   } = useExcelGrid({ data, enableSorting: true, enableFiltering: true });
-  const filteredDataForPivot = (0, import_react10.useMemo)(() => {
+  const filteredDataForPivot = (0, import_react11.useMemo)(() => {
     const filteredRows = table.getFilteredRowModel().rows;
     return filteredRows.map((row) => row.original);
   }, [table, columnFilters]);
@@ -2905,7 +3593,7 @@ function DataGrid({
     addCalculatedField,
     removeCalculatedField
   } = usePivotTable(filteredDataForPivot);
-  const activeFilterInfo = (0, import_react10.useMemo)(() => {
+  const activeFilterInfo = (0, import_react11.useMemo)(() => {
     if (activeFilters.length === 0)
       return null;
     return activeFilters.map((f) => {
@@ -2930,8 +3618,8 @@ function DataGrid({
       };
     });
   }, [activeFilters]);
-  const rows = (0, import_react10.useMemo)(() => table.getFilteredRowModel().rows, [table, columnFilters]);
-  const searchFilteredData = (0, import_react10.useMemo)(() => {
+  const rows = (0, import_react11.useMemo)(() => table.getFilteredRowModel().rows, [table, columnFilters]);
+  const searchFilteredData = (0, import_react11.useMemo)(() => {
     if (!globalSearchTerm.trim() || !enableSearch) {
       return rows;
     }
@@ -2949,22 +3637,22 @@ function DataGrid({
     });
   }, [rows, globalSearchTerm, enableSearch, columnKeys]);
   const totalSearchedRows = searchFilteredData.length;
-  const totalPages = (0, import_react10.useMemo)(() => {
+  const totalPages = (0, import_react11.useMemo)(() => {
     if (!enablePagination)
       return 1;
     return Math.max(1, Math.ceil(totalSearchedRows / pageSize));
   }, [enablePagination, totalSearchedRows, pageSize]);
-  const paginatedRows = (0, import_react10.useMemo)(() => {
+  const paginatedRows = (0, import_react11.useMemo)(() => {
     if (!enablePagination)
       return searchFilteredData;
     const start = (currentPage - 1) * pageSize;
     const end = start + pageSize;
     return searchFilteredData.slice(start, end);
   }, [enablePagination, searchFilteredData, currentPage, pageSize]);
-  (0, import_react10.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     setCurrentPage(1);
   }, [columnFilters, globalSearchTerm]);
-  const selectionBounds = (0, import_react10.useMemo)(() => {
+  const selectionBounds = (0, import_react11.useMemo)(() => {
     if (!selectionStart || !selectionEnd)
       return null;
     return {
@@ -2974,7 +3662,7 @@ function DataGrid({
       maxCol: Math.max(selectionStart.col, selectionEnd.col)
     };
   }, [selectionStart, selectionEnd]);
-  const selectionStats = (0, import_react10.useMemo)(() => {
+  const selectionStats = (0, import_react11.useMemo)(() => {
     if (!selectionBounds)
       return null;
     const { minRow, maxRow, minCol, maxCol } = selectionBounds;
@@ -3004,7 +3692,7 @@ function DataGrid({
     const avg = sum / values.length;
     return { count, sum, avg, numericCount: values.length };
   }, [selectionBounds, rows, columnKeys]);
-  (0, import_react10.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     if (typeof document === "undefined")
       return;
     if (data.length === 0)
@@ -3028,7 +3716,7 @@ function DataGrid({
     }
     setColumnWidths(widths);
   }, [data, columnKeys]);
-  const startColumnResize = (0, import_react10.useCallback)(
+  const startColumnResize = (0, import_react11.useCallback)(
     (columnId, event) => {
       if (!enableColumnResize)
         return;
@@ -3040,7 +3728,7 @@ function DataGrid({
     },
     [enableColumnResize, columnWidths]
   );
-  (0, import_react10.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     if (!resizingColumnId)
       return;
     const handleResizeMove = (event) => {
@@ -3061,7 +3749,7 @@ function DataGrid({
       document.removeEventListener("mouseup", handleResizeEnd);
     };
   }, [resizingColumnId, resizeStartX, resizeStartWidth]);
-  const startVerticalResize = (0, import_react10.useCallback)(
+  const startVerticalResize = (0, import_react11.useCallback)(
     (event) => {
       if (!enableVerticalResize)
         return;
@@ -3072,7 +3760,7 @@ function DataGrid({
     },
     [enableVerticalResize, gridHeight]
   );
-  (0, import_react10.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     if (!isResizingVertically)
       return;
     const handleVerticalResizeMove = (event) => {
@@ -3090,7 +3778,7 @@ function DataGrid({
       document.removeEventListener("mouseup", handleVerticalResizeEnd);
     };
   }, [isResizingVertically, verticalResizeStartY, verticalResizeStartHeight, minHeight, maxHeight]);
-  const handleExport = (0, import_react10.useCallback)(() => {
+  const handleExport = (0, import_react11.useCallback)(() => {
     if (viewMode === "pivot") {
       if (!pivotResult)
         return;
@@ -3136,7 +3824,7 @@ function DataGrid({
     columnKeys,
     onExport
   ]);
-  const copySelectionToClipboard = (0, import_react10.useCallback)(() => {
+  const copySelectionToClipboard = (0, import_react11.useCallback)(() => {
     if (!selectionBounds || !enableClipboard)
       return;
     const text = formatSelectionForClipboard(
@@ -3161,7 +3849,7 @@ function DataGrid({
       }
     );
   }, [selectionBounds, enableClipboard, rows, columnKeys, onCopy]);
-  const handleMouseDown = (0, import_react10.useCallback)(
+  const handleMouseDown = (0, import_react11.useCallback)(
     (rowIndex, colIndex, event) => {
       event.preventDefault();
       if (event.shiftKey && selectedCell) {
@@ -3185,7 +3873,7 @@ function DataGrid({
     },
     [selectedCell, rows, columnKeys, onCellClick]
   );
-  const handleMouseEnter = (0, import_react10.useCallback)(
+  const handleMouseEnter = (0, import_react11.useCallback)(
     (rowIndex, colIndex) => {
       if (isSelecting) {
         setSelectionEnd({ row: rowIndex, col: colIndex });
@@ -3193,12 +3881,12 @@ function DataGrid({
     },
     [isSelecting]
   );
-  (0, import_react10.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     const handleMouseUp = () => setIsSelecting(false);
     document.addEventListener("mouseup", handleMouseUp);
     return () => document.removeEventListener("mouseup", handleMouseUp);
   }, []);
-  (0, import_react10.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     const handleKeydown = (event) => {
       if ((event.ctrlKey || event.metaKey) && event.key === "c" && selectionBounds) {
         event.preventDefault();
@@ -3216,7 +3904,7 @@ function DataGrid({
     document.addEventListener("keydown", handleKeydown);
     return () => document.removeEventListener("keydown", handleKeydown);
   }, [selectionBounds, copySelectionToClipboard]);
-  const openFilterDropdown = (0, import_react10.useCallback)(
+  const openFilterDropdown = (0, import_react11.useCallback)(
     (columnId, event) => {
       event.stopPropagation();
       const target = event.currentTarget;
@@ -3245,22 +3933,22 @@ function DataGrid({
     },
     []
   );
-  const closeFilterDropdown = (0, import_react10.useCallback)(() => {
+  const closeFilterDropdown = (0, import_react11.useCallback)(() => {
     setActiveFilterColumn(null);
   }, []);
-  const handleFilter = (0, import_react10.useCallback)(
+  const handleFilter = (0, import_react11.useCallback)(
     (columnId, values) => {
       setColumnFilter(columnId, values);
     },
     [setColumnFilter]
   );
-  const handleRangeFilter = (0, import_react10.useCallback)(
+  const handleRangeFilter = (0, import_react11.useCallback)(
     (columnId, range) => {
       setNumericRangeFilter(columnId, range);
     },
     [setNumericRangeFilter]
   );
-  const handleSort = (0, import_react10.useCallback)(
+  const handleSort = (0, import_react11.useCallback)(
     (columnId, direction) => {
       if (direction === null) {
         const current = getSortDirection(columnId);
@@ -3284,7 +3972,7 @@ function DataGrid({
     },
     [getSortDirection, toggleSort]
   );
-  const isCellSelected = (0, import_react10.useCallback)(
+  const isCellSelected = (0, import_react11.useCallback)(
     (rowIndex, colIndex) => {
       if (!selectionBounds) {
         return selectedCell?.row === rowIndex && selectedCell?.col === colIndex;
@@ -3326,30 +4014,30 @@ function DataGrid({
     }
     return String(value);
   };
-  const totalTableWidth = (0, import_react10.useMemo)(() => {
+  const totalTableWidth = (0, import_react11.useMemo)(() => {
     return columnKeys.reduce((sum, key) => sum + (columnWidths[key] || MIN_COL_WIDTH), 0);
   }, [columnKeys, columnWidths]);
   const activeFilterCount = columnFilters.length;
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
     "div",
     {
       className: `vpg-data-grid vpg-font-${currentFontSize} vpg-theme-${currentTheme} ${stripedRows ? "vpg-striped" : ""} ${resizingColumnId ? "vpg-resizing" : ""} ${isResizingVertically ? "vpg-resizing-vertical" : ""}`,
       style: { height: `${gridHeight}px` },
       children: [
-        showCopyToast && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "vpg-toast", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("svg", { className: "vpg-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) }),
+        showCopyToast && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "vpg-toast", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("svg", { className: "vpg-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) }),
           copyToastMessage
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "vpg-toolbar", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "vpg-toolbar-left", children: [
-            showPivot && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "vpg-view-toggle", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "vpg-toolbar", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "vpg-toolbar-left", children: [
+            showPivot && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "vpg-view-toggle", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
                 "button",
                 {
                   className: `vpg-view-btn ${viewMode === "grid" ? "active" : ""}`,
                   onClick: () => setViewMode("grid"),
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("svg", { className: "vpg-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("svg", { className: "vpg-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                       "path",
                       {
                         strokeLinecap: "round",
@@ -3362,13 +4050,13 @@ function DataGrid({
                   ]
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
                 "button",
                 {
                   className: `vpg-view-btn vpg-pivot-btn ${viewMode === "pivot" ? "active" : ""}`,
                   onClick: () => setViewMode("pivot"),
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("svg", { className: "vpg-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("svg", { className: "vpg-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                       "path",
                       {
                         strokeLinecap: "round",
@@ -3380,16 +4068,37 @@ function DataGrid({
                     "Pivot"
                   ]
                 }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+                "button",
+                {
+                  className: `vpg-view-btn vpg-chart-btn ${viewMode === "chart" ? "active" : ""} ${!canUseCharts ? "vpg-pro-feature" : ""}`,
+                  title: canUseCharts ? "Chart Builder" : "Chart Builder (Pro feature)",
+                  onClick: () => canUseCharts && setViewMode("chart"),
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("svg", { className: "vpg-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                      "path",
+                      {
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round",
+                        strokeWidth: 2,
+                        d: "M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"
+                      }
+                    ) }),
+                    "Chart",
+                    !canUseCharts && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "vpg-pro-badge", children: "Pro" })
+                  ]
+                }
               )
             ] }),
-            viewMode === "grid" && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
-              enableSearch && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "vpg-search-container", children: !showSearchInput ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            viewMode === "grid" && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+              enableSearch && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "vpg-search-container", children: !showSearchInput ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                 "button",
                 {
                   className: "vpg-icon-btn",
                   title: "Search (Ctrl+F)",
                   onClick: () => setShowSearchInput(true),
-                  children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("svg", { className: "vpg-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                  children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("svg", { className: "vpg-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                     "path",
                     {
                       strokeLinecap: "round",
@@ -3399,15 +4108,15 @@ function DataGrid({
                     }
                   ) })
                 }
-              ) : /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "vpg-search-box", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              ) : /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "vpg-search-box", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                   "svg",
                   {
                     className: "vpg-search-icon",
                     fill: "none",
                     stroke: "currentColor",
                     viewBox: "0 0 24 24",
-                    children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                    children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                       "path",
                       {
                         strokeLinecap: "round",
@@ -3418,7 +4127,7 @@ function DataGrid({
                     )
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                   "input",
                   {
                     type: "text",
@@ -3435,14 +4144,14 @@ function DataGrid({
                     autoFocus: true
                   }
                 ),
-                globalSearchTerm && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { className: "vpg-search-clear", onClick: () => setGlobalSearchTerm(""), children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                globalSearchTerm && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { className: "vpg-search-clear", onClick: () => setGlobalSearchTerm(""), children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                   "svg",
                   {
                     className: "vpg-icon-xs",
                     fill: "none",
                     stroke: "currentColor",
                     viewBox: "0 0 24 24",
-                    children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                    children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                       "path",
                       {
                         strokeLinecap: "round",
@@ -3454,9 +4163,9 @@ function DataGrid({
                   }
                 ) })
               ] }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "vpg-font-size-control", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "vpg-label", children: "Size:" }),
-                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "vpg-font-size-toggle", children: fontSizeOptions.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "vpg-font-size-control", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "vpg-label", children: "Size:" }),
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "vpg-font-size-toggle", children: fontSizeOptions.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                   "button",
                   {
                     className: `vpg-font-size-btn ${currentFontSize === opt.value ? "active" : ""}`,
@@ -3466,8 +4175,8 @@ function DataGrid({
                   opt.value
                 )) })
               ] }),
-              activeFilterCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "vpg-filter-info", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("svg", { className: "vpg-icon", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              activeFilterCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "vpg-filter-info", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("svg", { className: "vpg-icon", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                   "path",
                   {
                     fillRule: "evenodd",
@@ -3475,28 +4184,28 @@ function DataGrid({
                     clipRule: "evenodd"
                   }
                 ) }),
-                /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { children: [
                   activeFilterCount,
                   " ",
                   "filter",
                   activeFilterCount > 1 ? "s" : ""
                 ] })
               ] }),
-              globalSearchTerm && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "vpg-search-info", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { children: [
+              globalSearchTerm && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "vpg-search-info", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { children: [
                 totalSearchedRows,
                 " ",
                 "match",
                 totalSearchedRows !== 1 ? "es" : ""
               ] }) })
             ] }),
-            viewMode === "pivot" && canUsePivot && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+            viewMode === "pivot" && canUsePivot && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
                 "button",
                 {
                   className: `vpg-config-toggle ${showPivotConfig ? "active" : ""}`,
                   onClick: () => setShowPivotConfig(!showPivotConfig),
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("svg", { className: "vpg-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("svg", { className: "vpg-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                       "path",
                       {
                         strokeLinecap: "round",
@@ -3511,8 +4220,8 @@ function DataGrid({
                   ]
                 }
               ),
-              pivotIsConfigured && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "vpg-pivot-status", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("svg", { className: "vpg-icon", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              pivotIsConfigured && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "vpg-pivot-status", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("svg", { className: "vpg-icon", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                   "path",
                   {
                     fillRule: "evenodd",
@@ -3520,13 +4229,13 @@ function DataGrid({
                     clipRule: "evenodd"
                   }
                 ) }),
-                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: "Pivot configured" })
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: "Pivot configured" })
               ] })
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "vpg-toolbar-right", children: [
-            viewMode === "grid" && activeFilterCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("button", { className: "vpg-clear-filters", onClick: clearAllFilters, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("svg", { className: "vpg-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "vpg-toolbar-right", children: [
+            viewMode === "grid" && activeFilterCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("button", { className: "vpg-clear-filters", onClick: clearAllFilters, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("svg", { className: "vpg-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                 "path",
                 {
                   strokeLinecap: "round",
@@ -3537,13 +4246,13 @@ function DataGrid({
               ) }),
               "Clear Filters"
             ] }),
-            enableClipboard && selectionBounds && viewMode === "grid" && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            enableClipboard && selectionBounds && viewMode === "grid" && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
               "button",
               {
                 className: "vpg-icon-btn",
                 title: "Copy selection (Ctrl+C)",
                 onClick: copySelectionToClipboard,
-                children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("svg", { className: "vpg-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("svg", { className: "vpg-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                   "path",
                   {
                     strokeLinecap: "round",
@@ -3554,14 +4263,14 @@ function DataGrid({
                 ) })
               }
             ),
-            enableExport && viewMode === "grid" && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+            enableExport && viewMode === "grid" && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
               "button",
               {
                 className: "vpg-export-btn",
                 title: "Export to CSV",
                 onClick: handleExport,
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("svg", { className: "vpg-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("svg", { className: "vpg-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                     "path",
                     {
                       strokeLinecap: "round",
@@ -3574,7 +4283,7 @@ function DataGrid({
                 ]
               }
             ),
-            enableExport && viewMode === "pivot" && pivotIsConfigured && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+            enableExport && viewMode === "pivot" && pivotIsConfigured && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
               "button",
               {
                 className: `vpg-export-btn ${!isPro ? "vpg-export-btn-disabled" : ""}`,
@@ -3582,7 +4291,7 @@ function DataGrid({
                 title: isPro ? "Export Pivot to CSV" : "Export Pivot to CSV (Pro feature)",
                 onClick: () => isPro && handleExport(),
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("svg", { className: "vpg-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("svg", { className: "vpg-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                     "path",
                     {
                       strokeLinecap: "round",
@@ -3598,13 +4307,13 @@ function DataGrid({
             )
           ] })
         ] }),
-        viewMode === "grid" && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { ref: tableContainerRef, className: "vpg-grid-container", tabIndex: 0, children: [
-          loading && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "vpg-loading", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "vpg-spinner" }),
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: "Loading data..." })
+        viewMode === "grid" && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { ref: tableContainerRef, className: "vpg-grid-container", tabIndex: 0, children: [
+          loading && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "vpg-loading", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "vpg-spinner" }),
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: "Loading data..." })
           ] }),
-          !loading && data.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "vpg-empty", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "vpg-empty-icon", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("svg", { className: "vpg-icon-lg", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          !loading && data.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "vpg-empty", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "vpg-empty-icon", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("svg", { className: "vpg-icon-lg", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
               "path",
               {
                 strokeLinecap: "round",
@@ -3613,10 +4322,10 @@ function DataGrid({
                 d: "M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
               }
             ) }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: "No data available" })
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: "No data available" })
           ] }),
-          !loading && data.length > 0 && filteredRowCount === 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "vpg-empty", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "vpg-empty-icon vpg-warning", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("svg", { className: "vpg-icon-lg", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          !loading && data.length > 0 && filteredRowCount === 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "vpg-empty", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "vpg-empty-icon vpg-warning", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("svg", { className: "vpg-icon-lg", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
               "path",
               {
                 strokeLinecap: "round",
@@ -3625,11 +4334,11 @@ function DataGrid({
                 d: "M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"
               }
             ) }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: "No matching records" }),
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { className: "vpg-clear-link", onClick: clearAllFilters, children: "Clear all filters" })
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: "No matching records" }),
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { className: "vpg-clear-link", onClick: clearAllFilters, children: "Clear all filters" })
           ] }),
-          !loading && filteredRowCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "vpg-table-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("table", { className: "vpg-table", style: { minWidth: `${totalTableWidth}px` }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("tr", { children: columnKeys.map((colId) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+          !loading && filteredRowCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "vpg-table-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("table", { className: "vpg-table", style: { minWidth: `${totalTableWidth}px` }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("tr", { children: columnKeys.map((colId) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
               "th",
               {
                 className: `vpg-header-cell ${hasActiveFilter(colId) ? "vpg-has-filter" : ""} ${getSortDirection(colId) !== null ? "vpg-is-sorted" : ""} ${activeFilterColumn === colId ? "vpg-is-active" : ""}`,
@@ -3644,16 +4353,16 @@ function DataGrid({
                   }
                 },
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "vpg-header-content", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "vpg-header-text", children: colId }),
-                    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "vpg-header-icons", children: [
-                      getSortDirection(colId) && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "vpg-sort-indicator", children: getSortDirection(colId) === "asc" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "vpg-header-content", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "vpg-header-text", children: colId }),
+                    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "vpg-header-icons", children: [
+                      getSortDirection(colId) && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "vpg-sort-indicator", children: getSortDirection(colId) === "asc" ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                         "svg",
                         {
                           className: "vpg-icon-sm",
                           fill: "currentColor",
                           viewBox: "0 0 20 20",
-                          children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                          children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                             "path",
                             {
                               fillRule: "evenodd",
@@ -3662,13 +4371,13 @@ function DataGrid({
                             }
                           )
                         }
-                      ) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                      ) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                         "svg",
                         {
                           className: "vpg-icon-sm",
                           fill: "currentColor",
                           viewBox: "0 0 20 20",
-                          children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                          children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                             "path",
                             {
                               fillRule: "evenodd",
@@ -3678,13 +4387,13 @@ function DataGrid({
                           )
                         }
                       ) }),
-                      hasActiveFilter(colId) && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "vpg-filter-indicator", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                      hasActiveFilter(colId) && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "vpg-filter-indicator", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                         "svg",
                         {
                           className: "vpg-icon-xs",
                           fill: "currentColor",
                           viewBox: "0 0 20 20",
-                          children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                          children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                             "path",
                             {
                               fillRule: "evenodd",
@@ -3694,14 +4403,14 @@ function DataGrid({
                           )
                         }
                       ) }),
-                      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "vpg-dropdown-arrow", title: "Filter & Sort", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "vpg-dropdown-arrow", title: "Filter & Sort", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                         "svg",
                         {
                           className: "vpg-icon-sm",
                           fill: "none",
                           stroke: "currentColor",
                           viewBox: "0 0 24 24",
-                          children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                          children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                             "path",
                             {
                               strokeLinecap: "round",
@@ -3714,7 +4423,7 @@ function DataGrid({
                       ) })
                     ] })
                   ] }),
-                  enableColumnResize && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                  enableColumnResize && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                     "div",
                     {
                       className: "vpg-resize-handle",
@@ -3725,7 +4434,7 @@ function DataGrid({
               },
               colId
             )) }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("tbody", { ref: tableBodyRef, children: paginatedRows.map((row, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("tr", { className: "vpg-row", children: columnKeys.map((colId, colIndex) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("tbody", { ref: tableBodyRef, children: paginatedRows.map((row, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("tr", { className: "vpg-row", children: columnKeys.map((colId, colIndex) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
               "td",
               {
                 className: `vpg-cell ${isCellSelected(rowIndex, colIndex) ? "vpg-selected" : ""} ${getColumnStats(colId).type === "number" ? "vpg-is-number" : ""}`,
@@ -3743,8 +4452,8 @@ function DataGrid({
             )) }, row.id)) })
           ] }) })
         ] }),
-        viewMode === "pivot" && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "vpg-pivot-container", children: [
-          showPivotConfig && canUsePivot && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "vpg-pivot-config-panel", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        viewMode === "pivot" && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "vpg-pivot-container", children: [
+          showPivotConfig && canUsePivot && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "vpg-pivot-config-panel", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
             PivotConfig,
             {
               availableFields: pivotAvailableFields,
@@ -3772,7 +4481,7 @@ function DataGrid({
               onUpdateCalculatedField: addCalculatedField
             }
           ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: `vpg-pivot-main ${!showPivotConfig ? "vpg-full-width" : ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: `vpg-pivot-main ${!showPivotConfig ? "vpg-full-width" : ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
             PivotSkeleton,
             {
               rowFields: pivotRowFields,
@@ -3798,47 +4507,78 @@ function DataGrid({
             }
           ) })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "vpg-footer", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "vpg-footer-left", children: viewMode === "grid" ? enablePagination ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { children: [
+        viewMode === "chart" && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "vpg-chart-view", children: [
+          activeFilterInfo && activeFilterInfo.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "vpg-chart-filter-bar", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("svg", { className: "vpg-icon", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { fillRule: "evenodd", d: "M3 3a1 1 0 011-1h12a1 1 0 011 1v3a1 1 0 01-.293.707L12 11.414V15a1 1 0 01-.293.707l-2 2A1 1 0 018 17v-5.586L3.293 6.707A1 1 0 013 6V3z", clipRule: "evenodd" }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { children: [
+              "Chart showing",
+              filteredRowCount.toLocaleString(),
+              " ",
+              "of",
+              totalRowCount.toLocaleString(),
+              " ",
+              "records"
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { className: "vpg-chart-clear-filters", onClick: clearAllFilters, children: "Clear filters" })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            ChartBuilder,
+            {
+              data: filteredDataForPivot,
+              theme: currentTheme,
+              onConfigChange: handleChartConfigChange
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "vpg-footer", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "vpg-footer-left", children: viewMode === "grid" ? enablePagination ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { children: [
               ((currentPage - 1) * pageSize + 1).toLocaleString(),
               "-",
               Math.min(currentPage * pageSize, totalSearchedRows).toLocaleString()
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "vpg-separator", children: "of" }),
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: totalSearchedRows.toLocaleString() }),
-            totalSearchedRows !== totalRowCount && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "vpg-filtered-note", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "vpg-separator", children: "of" }),
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: totalSearchedRows.toLocaleString() }),
+            totalSearchedRows !== totalRowCount && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "vpg-filtered-note", children: [
               "(",
               totalRowCount.toLocaleString(),
               " ",
               "total)"
             ] })
-          ] }) : filteredRowCount === totalRowCount && totalSearchedRows === totalRowCount ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { children: [
+          ] }) : filteredRowCount === totalRowCount && totalSearchedRows === totalRowCount ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { children: [
             totalRowCount.toLocaleString(),
             " ",
             "records"
-          ] }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "vpg-filtered-count", children: totalSearchedRows.toLocaleString() }),
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "vpg-separator", children: "of" }),
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: totalRowCount.toLocaleString() }),
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "vpg-separator", children: "records" })
-          ] }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "vpg-pivot-label", children: "Pivot Table" }),
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "vpg-separator", children: "\u2022" }),
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { children: [
+          ] }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "vpg-filtered-count", children: totalSearchedRows.toLocaleString() }),
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "vpg-separator", children: "of" }),
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: totalRowCount.toLocaleString() }),
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "vpg-separator", children: "records" })
+          ] }) : viewMode === "pivot" ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "vpg-pivot-label", children: "Pivot Table" }),
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "vpg-separator", children: "\u2022" }),
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { children: [
               totalRowCount.toLocaleString(),
               " ",
               "source records"
             ] })
+          ] }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "vpg-chart-label", children: "Chart Builder" }),
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "vpg-separator", children: "\u2022" }),
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { children: [
+              totalRowCount.toLocaleString(),
+              " ",
+              "records"
+            ] })
           ] }) }),
-          enablePagination && viewMode === "grid" && totalPages > 1 && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "vpg-pagination", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          enablePagination && viewMode === "grid" && totalPages > 1 && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "vpg-pagination", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
               "button",
               {
                 className: "vpg-page-btn",
                 disabled: currentPage === 1,
                 onClick: () => setCurrentPage(1),
-                children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("svg", { className: "vpg-icon-sm", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("svg", { className: "vpg-icon-sm", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                   "path",
                   {
                     strokeLinecap: "round",
@@ -3849,13 +4589,13 @@ function DataGrid({
                 ) })
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
               "button",
               {
                 className: "vpg-page-btn",
                 disabled: currentPage === 1,
                 onClick: () => setCurrentPage((p) => Math.max(1, p - 1)),
-                children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("svg", { className: "vpg-icon-sm", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("svg", { className: "vpg-icon-sm", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                   "path",
                   {
                     strokeLinecap: "round",
@@ -3866,7 +4606,7 @@ function DataGrid({
                 ) })
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "vpg-page-info", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "vpg-page-info", children: [
               "Page",
               " ",
               currentPage,
@@ -3875,13 +4615,13 @@ function DataGrid({
               " ",
               totalPages
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
               "button",
               {
                 className: "vpg-page-btn",
                 disabled: currentPage === totalPages,
                 onClick: () => setCurrentPage((p) => Math.min(totalPages, p + 1)),
-                children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("svg", { className: "vpg-icon-sm", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("svg", { className: "vpg-icon-sm", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                   "path",
                   {
                     strokeLinecap: "round",
@@ -3892,13 +4632,13 @@ function DataGrid({
                 ) })
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
               "button",
               {
                 className: "vpg-page-btn",
                 disabled: currentPage === totalPages,
                 onClick: () => setCurrentPage(totalPages),
-                children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("svg", { className: "vpg-icon-sm", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("svg", { className: "vpg-icon-sm", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                   "path",
                   {
                     strokeLinecap: "round",
@@ -3910,45 +4650,45 @@ function DataGrid({
               }
             )
           ] }),
-          viewMode === "grid" && selectionStats && selectionStats.count > 1 && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "vpg-selection-stats", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "vpg-stat", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "vpg-stat-label", children: "Count:" }),
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "vpg-stat-value", children: selectionStats.count })
+          viewMode === "grid" && selectionStats && selectionStats.count > 1 && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "vpg-selection-stats", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "vpg-stat", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "vpg-stat-label", children: "Count:" }),
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "vpg-stat-value", children: selectionStats.count })
             ] }),
-            selectionStats.numericCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "vpg-stat-divider", children: "|" }),
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "vpg-stat", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "vpg-stat-label", children: "Sum:" }),
-                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "vpg-stat-value", children: formatStatValue(selectionStats.sum) })
+            selectionStats.numericCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "vpg-stat-divider", children: "|" }),
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "vpg-stat", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "vpg-stat-label", children: "Sum:" }),
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "vpg-stat-value", children: formatStatValue(selectionStats.sum) })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "vpg-stat-divider", children: "|" }),
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "vpg-stat", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "vpg-stat-label", children: "Avg:" }),
-                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "vpg-stat-value", children: formatStatValue(selectionStats.avg) })
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "vpg-stat-divider", children: "|" }),
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "vpg-stat", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "vpg-stat-label", children: "Avg:" }),
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "vpg-stat-value", children: formatStatValue(selectionStats.avg) })
               ] })
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "vpg-footer-right", children: isDemo ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "vpg-demo-banner", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "vpg-demo-badge", children: "DEMO" }),
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: "Pro features enabled" }),
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("a", { href: "https://tiny-pivot.com/#pricing", target: "_blank", rel: "noopener noreferrer", children: "Get License \u2192" })
-          ] }) : showWatermark ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "vpg-watermark-inline", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("a", { href: "https://tiny-pivot.com", target: "_blank", rel: "noopener noreferrer", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("rect", { x: "3", y: "3", width: "7", height: "7" }),
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("rect", { x: "14", y: "3", width: "7", height: "7" }),
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("rect", { x: "14", y: "14", width: "7", height: "7" }),
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("rect", { x: "3", y: "14", width: "7", height: "7" })
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "vpg-footer-right", children: isDemo ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "vpg-demo-banner", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "vpg-demo-badge", children: "DEMO" }),
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: "Pro features enabled" }),
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("a", { href: "https://tiny-pivot.com/#pricing", target: "_blank", rel: "noopener noreferrer", children: "Get License \u2192" })
+          ] }) : showWatermark ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "vpg-watermark-inline", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("a", { href: "https://tiny-pivot.com", target: "_blank", rel: "noopener noreferrer", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("rect", { x: "3", y: "3", width: "7", height: "7" }),
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("rect", { x: "14", y: "3", width: "7", height: "7" }),
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("rect", { x: "14", y: "14", width: "7", height: "7" }),
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("rect", { x: "3", y: "14", width: "7", height: "7" })
             ] }),
             "Powered by TinyPivot"
           ] }) }) : null })
         ] }),
-        enableVerticalResize && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "vpg-vertical-resize-handle", onMouseDown: startVerticalResize, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "vpg-resize-grip", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", {}),
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", {}),
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", {})
+        enableVerticalResize && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "vpg-vertical-resize-handle", onMouseDown: startVerticalResize, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "vpg-resize-grip", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", {}),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", {}),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", {})
         ] }) }),
         activeFilterColumn && typeof document !== "undefined" && (0, import_react_dom2.createPortal)(
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
             "div",
             {
               className: "vpg-filter-portal",
@@ -3959,7 +4699,7 @@ function DataGrid({
                 maxHeight: `${filterDropdownPosition.maxHeight}px`,
                 zIndex: 9999
               },
-              children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                 ColumnFilter,
                 {
                   columnId: activeFilterColumn,