@smallwebco/tinypivot-react 1.0.52 → 1.0.54

package/dist/style.css

@@ -178,6 +178,32 @@
 
 .vpg-filter-info svg { color: #4f46e5; }
 
+/* Reset to Full Data Button */
+.vpg-reset-data-btn {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0.375rem 0.75rem;
+  font-size: 0.75rem;
+  font-weight: 500;
+  border-radius: 0.375rem;
+  background: #fef3c7;
+  border: 1px solid #fcd34d;
+  color: #92400e;
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.vpg-reset-data-btn:hover {
+  background: #fde68a;
+  border-color: #f59e0b;
+}
+
+.vpg-reset-data-btn svg {
+  width: 1rem;
+  height: 1rem;
+}
+
 /* Search */
 .vpg-search-container { display: flex; align-items: center; }
 
@@ -622,6 +648,18 @@
   border-color: #64748b;
 }
 
+/* Reset Data Button Dark Mode */
+.vpg-theme-dark .vpg-reset-data-btn {
+  background: rgba(251, 191, 36, 0.15);
+  border-color: rgba(251, 191, 36, 0.4);
+  color: #fbbf24;
+}
+
+.vpg-theme-dark .vpg-reset-data-btn:hover {
+  background: rgba(251, 191, 36, 0.25);
+  border-color: rgba(251, 191, 36, 0.6);
+}
+
 /* Demo Banner */
 .vpg-demo-banner {
   display: flex;
@@ -2790,6 +2828,13 @@
   margin: 0 0 0.5rem 0;
 }
 
+.vpg-chart-fields-hint {
+  font-weight: 400;
+  text-transform: none;
+  color: #94a3b8;
+  margin-left: 0.25rem;
+}
+
 .vpg-chart-fields-list {
   display: flex;
   flex-direction: column;
@@ -3039,6 +3084,37 @@
   color: #8b5cf6;
 }
 
+/* Chart loading state (async component loading) */
+.vpg-chart-loading {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.75rem;
+  height: 100%;
+  color: #64748b;
+}
+
+.vpg-chart-spinner {
+  width: 2rem;
+  height: 2rem;
+  border: 2px solid #e2e8f0;
+  border-top-color: #8b5cf6;
+  border-radius: 50%;
+  animation: vpg-chart-spin 0.8s linear infinite;
+}
+
+@keyframes vpg-chart-spin {
+  to { transform: rotate(360deg); }
+}
+
+.vpg-chart-loading span {
+  font-size: 0.875rem;
+}
+
+.vpg-theme-dark .vpg-chart-loading { color: #94a3b8; }
+.vpg-theme-dark .vpg-chart-spinner { border-color: #334155; border-top-color: #8b5cf6; }
+
 /* Dark mode support */
 .vpg-theme-dark .vpg-chart-filter-bar { background: #1e1b4b; border-color: #4c1d95; color: #a5b4fc; }
 .vpg-theme-dark .vpg-chart-filter-bar svg { color: #8b5cf6; }
@@ -3071,3 +3147,26 @@
 .vpg-theme-dark .vpg-chart-empty-state p { color: #64748b; }
 .vpg-theme-dark .vpg-chart-hint { background: #1e293b; color: #94a3b8; }
 
+/* ==========================================================================
+   ApexCharts Tooltip Overrides
+   ========================================================================== */
+/* Light mode tooltip - ensure dark text for better contrast */
+.apexcharts-tooltip.apexcharts-theme-light {
+  color: #1e293b !important;
+}
+
+.apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title {
+  color: #0f172a !important;
+  background: #f1f5f9 !important;
+  border-bottom-color: #e2e8f0 !important;
+}
+
+.apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-series-group {
+  color: #334155 !important;
+}
+
+.apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-text-y-label,
+.apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-text-y-value {
+  color: #1e293b !important;
+}
+

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@smallwebco/tinypivot-react",
   "type": "module",
-  "version": "1.0.52",
-  "description": "TinyPivot React - Excel-like data grid and pivot table components",
+  "version": "1.0.54",
+  "description": "TinyPivot React - AI-ready data grid, pivot table, and chart builder. Natural language data exploration with BYOK. Under 40KB gzipped.",
   "author": "Small Web, LLC",
   "license": "SEE LICENSE IN LICENSE.md",
   "homepage": "https://github.com/Small-Web-Co/tinypivot",
@@ -14,6 +14,9 @@
     "url": "https://github.com/Small-Web-Co/tinypivot/issues"
   },
   "keywords": [
+    "ai-data-analyst",
+    "natural-language-query",
+    "byok",
     "react",
     "react-component",
     "datagrid",
@@ -31,7 +34,9 @@
     "sorting",
     "aggregation",
     "csv-export",
-    "clipboard"
+    "clipboard",
+    "chart-builder",
+    "lightweight"
   ],
   "sideEffects": [
     "*.css"
@@ -58,7 +63,7 @@
     "@tanstack/react-table": "^8.20.0",
     "apexcharts": "^4.3.0",
     "react-apexcharts": "^1.6.0",
-    "@smallwebco/tinypivot-core": "1.0.52"
+    "@smallwebco/tinypivot-core": "1.0.54"
   },
   "devDependencies": {
     "@types/react": "^18.2.0",