@smallwebco/tinypivot-react 1.0.74 → 1.0.79

package/README.md

@@ -1,15 +1,16 @@
 # @smallwebco/tinypivot-react
 
-A lightweight data grid with pivot tables, charts, and optional AI-powered data exploration for React. **Under 40KB gzipped** — 10x smaller than AG Grid.
+A lightweight data grid with free pivot tables, Pro charts, and optional AI-powered data exploration for React. **Under 40KB gzipped** — 10x smaller than AG Grid.
 
 **[Live Demo](https://tiny-pivot.com)** · **[Buy License](https://tiny-pivot.com/#pricing)**
 
 ## Why TinyPivot?
 
 - **Lightweight**: Under 40KB gzipped vs 500KB+ for AG Grid
-- **Batteries Included**: Pivot tables, 6 chart types, Excel-like features out of the box
+- **Free Pivot Tables**: Sum aggregations, totals, and calculated fields included
+- **Pro Upgrade**: Advanced aggregations, charts, AI Data Analyst, and no watermark
 - **AI Data Analyst** (Pro): Natural language queries with BYOK — use your own OpenAI/Anthropic key
-- **One-Time License**: No subscriptions — pay once, use forever
+- **Lifetime License**: No subscriptions — buy once, use forever
 
 ## Installation
 
@@ -56,11 +57,12 @@ export default function App() {
 | Column resizing | ✅ | ✅ |
 | Clipboard (Ctrl+C) | ✅ | ✅ |
 | Dark mode | ✅ | ✅ |
+| Pivot table with Sum aggregation | ✅ | ✅ |
+| Row/column totals | ✅ | ✅ |
+| Calculated fields with formulas | ✅ | ✅ |
 | **AI Data Analyst** (natural language, BYOK) | ❌ | ✅ |
 | **Chart Builder** (6 chart types) | ❌ | ✅ |
-| Pivot table | ❌ | ✅ |
-| Aggregations (Sum, Avg, etc.) | ❌ | ✅ |
-| Row/column totals | ❌ | ✅ |
+| Advanced aggregations (Count, Avg, Min, Max, Unique, Median, Std Dev, %) | ❌ | ✅ |
 | No watermark | ❌ | ✅ |
 
 ## Props
@@ -70,7 +72,7 @@ export default function App() {
 | `data` | `Record<string, unknown>[]` | **required** | Array of data objects |
 | `loading` | `boolean` | `false` | Show loading spinner |
 | `fontSize` | `'xs' \| 'sm' \| 'base'` | `'xs'` | Font size preset |
-| `showPivot` | `boolean` | `true` | Show pivot toggle (Pro) |
+| `showPivot` | `boolean` | `true` | Show pivot toggle |
 | `enableExport` | `boolean` | `true` | Show CSV export button |
 | `enableSearch` | `boolean` | `true` | Show global search |
 | `enablePagination` | `boolean` | `false` | Enable pagination |
@@ -180,7 +182,7 @@ See the [full documentation](https://github.com/Small-Web-Co/tinypivot) for comp
 
 ## License
 
-- **Free Tier**: MIT License for basic grid features
+- **Free Tier**: MIT License for core grid and pivot features
 - **Pro Features**: Commercial license required
 
 **[Purchase at tiny-pivot.com/#pricing](https://tiny-pivot.com/#pricing)**

package/dist/index.cjs

@@ -99,14 +99,22 @@ function useAIAnalyst(options) {
       }
     }
   }, [storageKey]);
-  const [conversation, setConversation] = (0, import_react.useState)(() => loadFromStorage());
+  const initialConversationRef = (0, import_react.useRef)(null);
+  if (!initialConversationRef.current) {
+    initialConversationRef.current = loadFromStorage();
+  }
+  const [conversation, setConversation] = (0, import_react.useState)(initialConversationRef.current);
   const [schemas, setSchemas] = (0, import_react.useState)(/* @__PURE__ */ new Map());
   const [allSchemas, setAllSchemas] = (0, import_react.useState)([]);
   const [isLoading, setIsLoading] = (0, import_react.useState)(false);
   const [error, setError] = (0, import_react.useState)(null);
-  const [lastLoadedData, setLastLoadedData] = (0, import_react.useState)(null);
+  const [lastLoadedData, setLastLoadedData] = (0, import_react.useState)(
+    () => (0, import_tinypivot_core.getLatestConversationData)(initialConversationRef.current)
+  );
   const [discoveredDataSources, setDiscoveredDataSources] = (0, import_react.useState)([]);
   const [isLoadingTables, setIsLoadingTables] = (0, import_react.useState)(false);
+  const dataSourceLoadPromisesRef = (0, import_react.useRef)(/* @__PURE__ */ new Map());
+  const hydratedPersistedSelectionRef = (0, import_react.useRef)(false);
   const effectiveDataSources = (0, import_react.useMemo)(() => {
     if (config.dataSources && config.dataSources.length > 0) {
       return config.dataSources;
@@ -251,6 +259,59 @@ function useAIAnalyst(options) {
       console.warn("Failed to fetch sample data:", err);
     }
   }, [onDataLoaded]);
+  const loadDataSourceState = (0, import_react.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 = (0, import_tinypivot_core.getDemoSchema)(dataSource.id);
+      if (demoSchema) {
+        setSchemas((prev) => new Map(prev).set(dataSource.id, demoSchema));
+      }
+      const initialData = (0, import_tinypivot_core.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 = (0, import_react.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 = (0, import_react.useCallback)(async (dataSourceId) => {
     const dataSource = effectiveDataSources.find((ds) => ds.id === dataSourceId);
     if (!dataSource) {
@@ -270,44 +331,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 = (0, import_tinypivot_core.getDemoSchema)(dataSourceId);
-      if (demoSchema) {
-        setSchemas((prev) => new Map(prev).set(dataSourceId, demoSchema));
-      }
-      const initialData = (0, import_tinypivot_core.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]);
+  (0, import_react.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 = !!(0, import_tinypivot_core.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 = (0, import_react.useCallback)(async (userInput, currentConversation, currentSchemas, currentDataSources, currentAllSchemas) => {
     if (!configRef.current.endpoint) {
       throw new Error("No endpoint configured. Set `endpoint` in AI analyst config.");
@@ -710,6 +757,7 @@ What would you like to know about this data?`
     return null;
   }, [conversation.dataSourceId, effectiveDataSources, onError]);
   const clearConversation = (0, import_react.useCallback)(() => {
+    hydratedPersistedSelectionRef.current = true;
     const newConv = (0, import_tinypivot_core.createConversation)(configRef.current.sessionId);
     setConversation(newConv);
     setError(null);
@@ -720,7 +768,9 @@ What would you like to know about this data?`
     return { ...conversation };
   }, [conversation]);
   const importConversation = (0, import_react.useCallback)((conv) => {
+    hydratedPersistedSelectionRef.current = true;
     setConversation(conv);
+    setLastLoadedData((0, import_tinypivot_core.getLatestConversationData)(conv));
     onConversationUpdate?.({ conversation: conv });
   }, [onConversationUpdate]);
   return {
@@ -4715,9 +4765,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__ */ (0, import_jsx_runtime8.jsx)("h3", { children: "Pro Feature" }),
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { children: "Pivot Table functionality requires a Pro license." }),
-          /* @__PURE__ */ (0, import_jsx_runtime8.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_runtime8.jsx)("h3", { children: "Pivot Unavailable" }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { children: "Pivot mode could not be enabled in this session. Try reloading the page." })
         ] }) }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
           /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "vpg-config-bar", children: [
             /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(