@smallwebco/tinypivot-react 1.0.74 → 1.0.80

package/dist/index.d.cts

@@ -1,5 +1,5 @@
 import * as _smallwebco_tinypivot_core from '@smallwebco/tinypivot-core';
-import { AIAnalystConfig, AIDataLoadedEvent, AIConversationUpdateEvent, AIQueryExecutedEvent, AIErrorEvent, ColumnStats, NumericRange, DateRange, NumberFormat, DateFormat, FieldStats, PivotValueField, CalculatedField, AggregationFunction, PivotResult, AIConversation, AITableSchema, AIDataSource, PivotExportData, ExportOptions, SelectionBounds, PaginationOptions, LicenseInfo } from '@smallwebco/tinypivot-core';
+import { AIAnalystConfig, ResolvedTheme, AIDataLoadedEvent, AIConversationUpdateEvent, AIQueryExecutedEvent, AIErrorEvent, ColumnStats, NumericRange, DateRange, NumberFormat, DateFormat, Theme, FieldStats, PivotValueField, CalculatedField, AggregationFunction, PivotResult, AIConversation, AITableSchema, AIDataSource, PivotExportData, ExportOptions, SelectionBounds, PaginationOptions, LicenseInfo } from '@smallwebco/tinypivot-core';
 export { AIAnalystConfig, AIColumnSchema, AIConversation, AIConversationUpdateEvent, AIDataLoadedEvent, AIDataSource, AIErrorEvent, AIMessage, AIMessageMetadata, AIQueryExecutedEvent, AITableSchema, AggregationFunction, CellClickEvent, ColumnStats, CopyEvent, DataGridProps, ExportEvent, ExportOptions, FieldStats, FilterEvent, GridOptions, LicenseInfo, LicenseType, PaginationOptions, PivotCell, PivotConfig as PivotConfigType, PivotField, PivotResult, PivotTableProps, PivotValueField, RowSelectionChangeEvent, SelectionBounds, SelectionChangeEvent, SortEvent, formatCellValue, getAggregationLabel, getColumnUniqueValues } from '@smallwebco/tinypivot-core';
 import * as react from 'react';
 import react__default from 'react';
@@ -15,7 +15,7 @@ import { SortingState, ColumnFiltersState, VisibilityState } from '@tanstack/rea
 
 interface AIAnalystProps {
     config: AIAnalystConfig;
-    theme?: 'light' | 'dark';
+    theme?: ResolvedTheme;
     onDataLoaded?: (payload: AIDataLoadedEvent) => void;
     onConversationUpdate?: (payload: AIConversationUpdateEvent) => void;
     onQueryExecuted?: (payload: AIQueryExecutedEvent) => void;
@@ -68,7 +68,7 @@ interface DataGridProps {
     pageSize?: number;
     enableColumnResize?: boolean;
     enableClipboard?: boolean;
-    theme?: 'light' | 'dark' | 'auto';
+    theme?: Theme;
     stripedRows?: boolean;
     exportFilename?: string;
     enableVerticalResize?: boolean;
@@ -135,8 +135,9 @@ interface PivotConfigProps {
     onAddCalculatedField?: (field: CalculatedField) => void;
     onRemoveCalculatedField?: (id: string) => void;
     onUpdateCalculatedField?: (field: CalculatedField) => void;
+    theme?: string;
 }
-declare function PivotConfig({ availableFields, rowFields, columnFields, valueFields, showRowTotals, calculatedFields, onShowRowTotalsChange, onShowColumnTotalsChange, onClearConfig, onAutoSuggest, onDragStart, onDragEnd, onUpdateAggregation, onRemoveRowField, onRemoveColumnField, onRemoveValueField, onAddRowField, onAddColumnField, onAddCalculatedField, onRemoveCalculatedField, onUpdateCalculatedField, }: PivotConfigProps): react_jsx_runtime.JSX.Element;
+declare function PivotConfig({ availableFields, rowFields, columnFields, valueFields, showRowTotals, calculatedFields, onShowRowTotalsChange, onShowColumnTotalsChange, onClearConfig, onAutoSuggest, onDragStart, onDragEnd, onUpdateAggregation, onRemoveRowField, onRemoveColumnField, onRemoveValueField, onAddRowField, onAddColumnField, onAddCalculatedField, onRemoveCalculatedField, onUpdateCalculatedField, theme, }: PivotConfigProps): react_jsx_runtime.JSX.Element;
 
 interface ActiveFilter {
     column: string;
@@ -166,8 +167,9 @@ interface PivotSkeletonProps {
     onUpdateAggregation: (field: string, oldAgg: AggregationFunction, newAgg: AggregationFunction) => void;
     onReorderRowFields: (fields: string[]) => void;
     onReorderColumnFields: (fields: string[]) => void;
+    theme?: string;
 }
-declare function PivotSkeleton({ rowFields, columnFields, valueFields, calculatedFields, isConfigured, draggingField, pivotResult, fontSize, activeFilters, totalRowCount, filteredRowCount, onAddRowField, onRemoveRowField, onAddColumnField, onRemoveColumnField, onAddValueField, onRemoveValueField, onReorderRowFields, onReorderColumnFields, }: PivotSkeletonProps): react_jsx_runtime.JSX.Element;
+declare function PivotSkeleton({ rowFields, columnFields, valueFields, calculatedFields, isConfigured, draggingField, pivotResult, fontSize, activeFilters, totalRowCount, filteredRowCount, onAddRowField, onRemoveRowField, onAddColumnField, onRemoveColumnField, onAddValueField, onRemoveValueField, onReorderRowFields, onReorderColumnFields, theme, }: PivotSkeletonProps): react_jsx_runtime.JSX.Element;
 
 interface UseAIAnalystOptions {
     config: AIAnalystConfig;

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as _smallwebco_tinypivot_core from '@smallwebco/tinypivot-core';
-import { AIAnalystConfig, AIDataLoadedEvent, AIConversationUpdateEvent, AIQueryExecutedEvent, AIErrorEvent, ColumnStats, NumericRange, DateRange, NumberFormat, DateFormat, FieldStats, PivotValueField, CalculatedField, AggregationFunction, PivotResult, AIConversation, AITableSchema, AIDataSource, PivotExportData, ExportOptions, SelectionBounds, PaginationOptions, LicenseInfo } from '@smallwebco/tinypivot-core';
+import { AIAnalystConfig, ResolvedTheme, AIDataLoadedEvent, AIConversationUpdateEvent, AIQueryExecutedEvent, AIErrorEvent, ColumnStats, NumericRange, DateRange, NumberFormat, DateFormat, Theme, FieldStats, PivotValueField, CalculatedField, AggregationFunction, PivotResult, AIConversation, AITableSchema, AIDataSource, PivotExportData, ExportOptions, SelectionBounds, PaginationOptions, LicenseInfo } from '@smallwebco/tinypivot-core';
 export { AIAnalystConfig, AIColumnSchema, AIConversation, AIConversationUpdateEvent, AIDataLoadedEvent, AIDataSource, AIErrorEvent, AIMessage, AIMessageMetadata, AIQueryExecutedEvent, AITableSchema, AggregationFunction, CellClickEvent, ColumnStats, CopyEvent, DataGridProps, ExportEvent, ExportOptions, FieldStats, FilterEvent, GridOptions, LicenseInfo, LicenseType, PaginationOptions, PivotCell, PivotConfig as PivotConfigType, PivotField, PivotResult, PivotTableProps, PivotValueField, RowSelectionChangeEvent, SelectionBounds, SelectionChangeEvent, SortEvent, formatCellValue, getAggregationLabel, getColumnUniqueValues } from '@smallwebco/tinypivot-core';
 import * as react from 'react';
 import react__default from 'react';
@@ -15,7 +15,7 @@ import { SortingState, ColumnFiltersState, VisibilityState } from '@tanstack/rea
 
 interface AIAnalystProps {
     config: AIAnalystConfig;
-    theme?: 'light' | 'dark';
+    theme?: ResolvedTheme;
     onDataLoaded?: (payload: AIDataLoadedEvent) => void;
     onConversationUpdate?: (payload: AIConversationUpdateEvent) => void;
     onQueryExecuted?: (payload: AIQueryExecutedEvent) => void;
@@ -68,7 +68,7 @@ interface DataGridProps {
     pageSize?: number;
     enableColumnResize?: boolean;
     enableClipboard?: boolean;
-    theme?: 'light' | 'dark' | 'auto';
+    theme?: Theme;
     stripedRows?: boolean;
     exportFilename?: string;
     enableVerticalResize?: boolean;
@@ -135,8 +135,9 @@ interface PivotConfigProps {
     onAddCalculatedField?: (field: CalculatedField) => void;
     onRemoveCalculatedField?: (id: string) => void;
     onUpdateCalculatedField?: (field: CalculatedField) => void;
+    theme?: string;
 }
-declare function PivotConfig({ availableFields, rowFields, columnFields, valueFields, showRowTotals, calculatedFields, onShowRowTotalsChange, onShowColumnTotalsChange, onClearConfig, onAutoSuggest, onDragStart, onDragEnd, onUpdateAggregation, onRemoveRowField, onRemoveColumnField, onRemoveValueField, onAddRowField, onAddColumnField, onAddCalculatedField, onRemoveCalculatedField, onUpdateCalculatedField, }: PivotConfigProps): react_jsx_runtime.JSX.Element;
+declare function PivotConfig({ availableFields, rowFields, columnFields, valueFields, showRowTotals, calculatedFields, onShowRowTotalsChange, onShowColumnTotalsChange, onClearConfig, onAutoSuggest, onDragStart, onDragEnd, onUpdateAggregation, onRemoveRowField, onRemoveColumnField, onRemoveValueField, onAddRowField, onAddColumnField, onAddCalculatedField, onRemoveCalculatedField, onUpdateCalculatedField, theme, }: PivotConfigProps): react_jsx_runtime.JSX.Element;
 
 interface ActiveFilter {
     column: string;
@@ -166,8 +167,9 @@ interface PivotSkeletonProps {
     onUpdateAggregation: (field: string, oldAgg: AggregationFunction, newAgg: AggregationFunction) => void;
     onReorderRowFields: (fields: string[]) => void;
     onReorderColumnFields: (fields: string[]) => void;
+    theme?: string;
 }
-declare function PivotSkeleton({ rowFields, columnFields, valueFields, calculatedFields, isConfigured, draggingField, pivotResult, fontSize, activeFilters, totalRowCount, filteredRowCount, onAddRowField, onRemoveRowField, onAddColumnField, onRemoveColumnField, onAddValueField, onRemoveValueField, onReorderRowFields, onReorderColumnFields, }: PivotSkeletonProps): react_jsx_runtime.JSX.Element;
+declare function PivotSkeleton({ rowFields, columnFields, valueFields, calculatedFields, isConfigured, draggingField, pivotResult, fontSize, activeFilters, totalRowCount, filteredRowCount, onAddRowField, onRemoveRowField, onAddColumnField, onRemoveColumnField, onAddValueField, onRemoveValueField, onReorderRowFields, onReorderColumnFields, theme, }: PivotSkeletonProps): react_jsx_runtime.JSX.Element;
 
 interface UseAIAnalystOptions {
     config: AIAnalystConfig;

package/dist/index.js

@@ -14,6 +14,7 @@ import {
   getDefaultDemoResponse,
   getDemoSchema,
   getInitialDemoData,
+  getLatestConversationData,
   getMessagesForAPI,
   setConversationDataSource,
   validateSQLSafety
@@ -55,14 +56,22 @@ function useAIAnalyst(options) {
       }
     }
   }, [storageKey]);
-  const [conversation, setConversation] = useState(() => loadFromStorage());
+  const initialConversationRef = useRef(null);
+  if (!initialConversationRef.current) {
+    initialConversationRef.current = loadFromStorage();
+  }
+  const [conversation, setConversation] = useState(initialConversationRef.current);
   const [schemas, setSchemas] = useState(/* @__PURE__ */ new Map());
   const [allSchemas, setAllSchemas] = useState([]);
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState(null);
-  const [lastLoadedData, setLastLoadedData] = useState(null);
+  const [lastLoadedData, setLastLoadedData] = useState(
+    () => getLatestConversationData(initialConversationRef.current)
+  );
   const [discoveredDataSources, setDiscoveredDataSources] = useState([]);
   const [isLoadingTables, setIsLoadingTables] = useState(false);
+  const dataSourceLoadPromisesRef = useRef(/* @__PURE__ */ new Map());
+  const hydratedPersistedSelectionRef = useRef(false);
   const effectiveDataSources = useMemo(() => {
     if (config.dataSources && config.dataSources.length > 0) {
       return config.dataSources;
@@ -207,6 +216,59 @@ function useAIAnalyst(options) {
       console.warn("Failed to fetch sample data:", err);
     }
   }, [onDataLoaded]);
+  const loadDataSourceState = useCallback(async (dataSource) => {
+    const currentConfig = configRef.current;
+    if (currentConfig.dataSourceLoader) {
+      const { data, schema } = await currentConfig.dataSourceLoader(dataSource.id);
+      if (schema) {
+        setSchemas((prev) => new Map(prev).set(dataSource.id, schema));
+      }
+      if (data && data.length > 0) {
+        setLastLoadedData(data);
+        onDataLoaded?.({
+          data,
+          query: `SELECT * FROM ${dataSource.table} LIMIT 100`,
+          dataSourceId: dataSource.id,
+          rowCount: data.length
+        });
+      }
+      return;
+    }
+    if (currentConfig.demoMode) {
+      const demoSchema = getDemoSchema(dataSource.id);
+      if (demoSchema) {
+        setSchemas((prev) => new Map(prev).set(dataSource.id, demoSchema));
+      }
+      const initialData = getInitialDemoData(dataSource.id);
+      if (initialData) {
+        setLastLoadedData(initialData);
+        onDataLoaded?.({
+          data: initialData,
+          query: `SELECT * FROM ${dataSource.table} LIMIT 10`,
+          dataSourceId: dataSource.id,
+          rowCount: initialData.length
+        });
+      }
+      return;
+    }
+    if (currentConfig.endpoint) {
+      await fetchSchema(dataSource);
+      await fetchSampleData(dataSource);
+    }
+  }, [fetchSchema, fetchSampleData, onDataLoaded]);
+  const ensureDataSourceState = useCallback(async (dataSource) => {
+    const existingLoad = dataSourceLoadPromisesRef.current.get(dataSource.id);
+    if (existingLoad) {
+      return existingLoad;
+    }
+    const loadPromise = loadDataSourceState(dataSource).catch((err) => {
+      console.warn("Failed to load data source:", err);
+    }).finally(() => {
+      dataSourceLoadPromisesRef.current.delete(dataSource.id);
+    });
+    dataSourceLoadPromisesRef.current.set(dataSource.id, loadPromise);
+    return loadPromise;
+  }, [loadDataSourceState]);
   const selectDataSource = useCallback(async (dataSourceId) => {
     const dataSource = effectiveDataSources.find((ds) => ds.id === dataSourceId);
     if (!dataSource) {
@@ -226,44 +288,30 @@ What would you like to know about this data?`
       onConversationUpdate?.({ conversation: withMessage });
       return withMessage;
     });
-    if (configRef.current.dataSourceLoader) {
-      try {
-        const { data, schema } = await configRef.current.dataSourceLoader(dataSourceId);
-        if (schema) {
-          setSchemas((prev) => new Map(prev).set(dataSourceId, schema));
-        }
-        if (data && data.length > 0) {
-          setLastLoadedData(data);
-          onDataLoaded?.({
-            data,
-            query: `SELECT * FROM ${dataSource.table} LIMIT 100`,
-            dataSourceId,
-            rowCount: data.length
-          });
-        }
-      } catch (err) {
-        console.warn("Failed to load data source:", err);
-      }
-    } else if (configRef.current.demoMode) {
-      const demoSchema = getDemoSchema(dataSourceId);
-      if (demoSchema) {
-        setSchemas((prev) => new Map(prev).set(dataSourceId, demoSchema));
-      }
-      const initialData = getInitialDemoData(dataSourceId);
-      if (initialData) {
-        setLastLoadedData(initialData);
-        onDataLoaded?.({
-          data: initialData,
-          query: `SELECT * FROM ${dataSource.table} LIMIT 10`,
-          dataSourceId,
-          rowCount: initialData.length
-        });
-      }
-    } else if (configRef.current.endpoint) {
-      await fetchSchema(dataSource);
-      await fetchSampleData(dataSource);
+    await ensureDataSourceState(dataSource);
+  }, [effectiveDataSources, ensureDataSourceState, onConversationUpdate]);
+  useEffect(() => {
+    if (hydratedPersistedSelectionRef.current) {
+      return;
+    }
+    const initialConversation = initialConversationRef.current;
+    const initialDataSourceId = initialConversation?.dataSourceId;
+    if (!initialDataSourceId) {
+      hydratedPersistedSelectionRef.current = true;
+      return;
+    }
+    const dataSource = effectiveDataSources.find((ds) => ds.id === initialDataSourceId);
+    if (!dataSource) {
+      return;
+    }
+    const hasPersistedPreviewData = !!getLatestConversationData(initialConversation);
+    const hasSchema = schemas.has(initialDataSourceId);
+    const hasPreviewData = !!lastLoadedData?.length || hasPersistedPreviewData;
+    hydratedPersistedSelectionRef.current = true;
+    if (!hasSchema || !hasPreviewData) {
+      void ensureDataSourceState(dataSource);
     }
-  }, [effectiveDataSources, fetchSchema, fetchSampleData, onConversationUpdate, onDataLoaded]);
+  }, [effectiveDataSources, ensureDataSourceState, lastLoadedData, schemas]);
   const callAIEndpoint = useCallback(async (userInput, currentConversation, currentSchemas, currentDataSources, currentAllSchemas) => {
     if (!configRef.current.endpoint) {
       throw new Error("No endpoint configured. Set `endpoint` in AI analyst config.");
@@ -666,6 +714,7 @@ What would you like to know about this data?`
     return null;
   }, [conversation.dataSourceId, effectiveDataSources, onError]);
   const clearConversation = useCallback(() => {
+    hydratedPersistedSelectionRef.current = true;
     const newConv = createConversation(configRef.current.sessionId);
     setConversation(newConv);
     setError(null);
@@ -676,7 +725,9 @@ What would you like to know about this data?`
     return { ...conversation };
   }, [conversation]);
   const importConversation = useCallback((conv) => {
+    hydratedPersistedSelectionRef.current = true;
     setConversation(conv);
+    setLastLoadedData(getLatestConversationData(conv));
     onConversationUpdate?.({ conversation: conv });
   }, [onConversationUpdate]);
   return {
@@ -738,6 +789,7 @@ var AIAnalyst = forwardRef(({
     onQueryExecuted,
     onError
   });
+  const isDarkTheme = theme === "dark" || typeof theme === "string" && theme.endsWith("-dark");
   useImperativeHandle(ref, () => ({
     loadFullData,
     selectedDataSource
@@ -899,7 +951,7 @@ var AIAnalyst = forwardRef(({
     return !!message.metadata?.data && message.metadata.data.length > 0;
   };
   if (!selectedDataSource) {
-    return /* @__PURE__ */ jsx("div", { className: `vpg-ai-analyst ${theme === "dark" ? "vpg-theme-dark" : ""}`, children: /* @__PURE__ */ jsx("div", { className: "vpg-ai-picker-fullscreen", children: /* @__PURE__ */ jsxs("div", { className: "vpg-ai-picker-content", children: [
+    return /* @__PURE__ */ jsx("div", { className: `vpg-ai-analyst ${isDarkTheme ? "vpg-theme-dark" : ""}`, children: /* @__PURE__ */ jsx("div", { className: "vpg-ai-picker-fullscreen", children: /* @__PURE__ */ jsxs("div", { className: "vpg-ai-picker-content", children: [
       /* @__PURE__ */ jsxs("div", { className: "vpg-ai-picker-header", children: [
         /* @__PURE__ */ jsx("div", { className: "vpg-ai-icon-lg", children: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
           /* @__PURE__ */ jsx("path", { d: "M12 2a2 2 0 0 1 2 2c0 .74-.4 1.39-1 1.73V7h1a7 7 0 0 1 7 7h1a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1h-1v1a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-1H2a1 1 0 0 1-1-1v-3a1 1 0 0 1 1-1h1a7 7 0 0 1 7-7h1V5.73c-.6-.34-1-.99-1-1.73a2 2 0 0 1 2-2z" }),
@@ -971,7 +1023,7 @@ var AIAnalyst = forwardRef(({
       ] })
     ] }) }) });
   }
-  return /* @__PURE__ */ jsx("div", { className: `vpg-ai-analyst ${theme === "dark" ? "vpg-theme-dark" : ""}`, children: /* @__PURE__ */ jsxs("div", { className: "vpg-ai-split-layout", children: [
+  return /* @__PURE__ */ jsx("div", { className: `vpg-ai-analyst ${isDarkTheme ? "vpg-theme-dark" : ""}`, children: /* @__PURE__ */ jsxs("div", { className: "vpg-ai-split-layout", children: [
     /* @__PURE__ */ jsxs("div", { className: "vpg-ai-chat-panel", children: [
       /* @__PURE__ */ jsxs("div", { className: "vpg-ai-chat-header", children: [
         /* @__PURE__ */ jsx(
@@ -1713,7 +1765,7 @@ function ChartBuilder({
     return val.toFixed(dec);
   }, []);
   const chartOptions = useMemo4(() => {
-    const isDark = theme === "dark";
+    const isDark = theme === "dark" || typeof theme === "string" && theme.endsWith("-dark");
     const config = chartConfig;
     const options = config.options || {};
     const baseOptions = {
@@ -3835,7 +3887,8 @@ function PivotConfig({
   onAddColumnField,
   onAddCalculatedField,
   onRemoveCalculatedField,
-  onUpdateCalculatedField
+  onUpdateCalculatedField,
+  theme
 }) {
   const [fieldSearch, setFieldSearch] = useState12("");
   const [showCalcModal, setShowCalcModal] = useState12(false);
@@ -3961,7 +4014,7 @@ function PivotConfig({
     setShowCalcModal(false);
     setEditingCalcField(null);
   }, []);
-  return /* @__PURE__ */ jsxs7("div", { className: "vpg-pivot-config", children: [
+  return /* @__PURE__ */ jsxs7("div", { className: `vpg-pivot-config ${theme ? `vpg-theme-${theme}` : ""}`, children: [
     /* @__PURE__ */ jsxs7("div", { className: "vpg-config-header", children: [
       /* @__PURE__ */ jsxs7("h3", { className: "vpg-config-title", children: [
         /* @__PURE__ */ jsx7("svg", { className: "vpg-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx7(
@@ -4229,7 +4282,8 @@ function PivotSkeleton({
   onAddValueField,
   onRemoveValueField,
   onReorderRowFields,
-  onReorderColumnFields
+  onReorderColumnFields,
+  theme
 }) {
   const { showWatermark, canUsePivot, isDemo } = useLicense();
   const getValueFieldDisplayName = useCallback13((field) => {
@@ -4595,7 +4649,7 @@ function PivotSkeleton({
   return /* @__PURE__ */ jsxs8(
     "div",
     {
-      className: `vpg-pivot-skeleton vpg-font-${currentFontSize} ${draggingField ? "vpg-is-dragging" : ""}`,
+      className: `vpg-pivot-skeleton vpg-font-${currentFontSize} ${theme ? `vpg-theme-${theme}` : ""} ${draggingField ? "vpg-is-dragging" : ""}`,
       children: [
         showCopyToast && /* @__PURE__ */ jsxs8("div", { className: "vpg-toast", children: [
           /* @__PURE__ */ jsx8("svg", { className: "vpg-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx8("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) }),
@@ -4716,9 +4770,8 @@ 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__ */ jsx8("h3", { children: "Pro Feature" }),
-          /* @__PURE__ */ jsx8("p", { children: "Pivot Table functionality requires a Pro license." }),
-          /* @__PURE__ */ jsx8("a", { href: "https://tiny-pivot.com/#pricing", target: "_blank", rel: "noopener noreferrer", className: "vpg-pro-link", children: "Get Pro License \u2192" })
+          /* @__PURE__ */ jsx8("h3", { children: "Pivot Unavailable" }),
+          /* @__PURE__ */ jsx8("p", { children: "Pivot mode could not be enabled in this session. Try reloading the page." })
         ] }) }) : /* @__PURE__ */ jsxs8(Fragment5, { children: [
           /* @__PURE__ */ jsxs8("div", { className: "vpg-config-bar", children: [
             /* @__PURE__ */ jsxs8(
@@ -6147,7 +6200,8 @@ function DataGrid({
               onRemoveValueField: removeValueField,
               onAddCalculatedField: addCalculatedField,
               onRemoveCalculatedField: removeCalculatedField,
-              onUpdateCalculatedField: addCalculatedField
+              onUpdateCalculatedField: addCalculatedField,
+              theme: currentTheme
             }
           ) }),
           /* @__PURE__ */ jsx9("div", { className: `vpg-pivot-main ${!showPivotConfig ? "vpg-full-width" : ""}`, children: /* @__PURE__ */ jsx9(
@@ -6172,7 +6226,8 @@ function DataGrid({
               onRemoveValueField: removeValueField,
               onUpdateAggregation: updateValueFieldAggregation,
               onReorderRowFields: setRowFields,
-              onReorderColumnFields: setColumnFields
+              onReorderColumnFields: setColumnFields,
+              theme: currentTheme
             }
           ) })
         ] }),