@quantumwake/terminal-ux-dashboard-components 0.1.2 → 0.1.3

package/dist/index.d.cts

@@ -27,6 +27,7 @@ interface DashboardCapabilities {
     deleteDashboard?: (id: string) => Promise<void> | void;
     analyzeDataset?: () => Promise<void> | void;
     refineDashboard?: (prompt: string) => Promise<void> | void;
+    newDashboard?: () => void;
     addPanel?: (panel: PanelInput) => void;
     removePanel?: (panelId: string) => void;
 }
@@ -48,6 +49,7 @@ declare function useCapabilities(): {
     canDelete: boolean;
     canAnalyze: boolean;
     canRefine: boolean;
+    canNew: boolean;
     canAddPanel: boolean;
     canEditPanels: boolean;
 };

package/dist/index.d.ts

@@ -27,6 +27,7 @@ interface DashboardCapabilities {
     deleteDashboard?: (id: string) => Promise<void> | void;
     analyzeDataset?: () => Promise<void> | void;
     refineDashboard?: (prompt: string) => Promise<void> | void;
+    newDashboard?: () => void;
     addPanel?: (panel: PanelInput) => void;
     removePanel?: (panelId: string) => void;
 }
@@ -48,6 +49,7 @@ declare function useCapabilities(): {
     canDelete: boolean;
     canAnalyze: boolean;
     canRefine: boolean;
+    canNew: boolean;
     canAddPanel: boolean;
     canEditPanels: boolean;
 };

package/dist/index.js

@@ -7,7 +7,7 @@ import { ResponsiveScatterPlot } from '@nivo/scatterplot';
 import { ResponsiveHeatMap } from '@nivo/heatmap';
 import PivotTableUI from 'react-pivottable/PivotTableUI';
 import 'react-pivottable/pivottable.css';
-import { Loader2, Play, AlertCircle, Rows3, BarChart3, PieChart, TrendingUp, ScatterChart, LayoutGrid, Code, ChevronDown, Sparkles, X, RefreshCw, Minimize2, Maximize2, Terminal, Save, FolderOpen, Trash2, Plus, Filter, Database, Send, GripVertical } from 'lucide-react';
+import { Loader2, Play, AlertCircle, Rows3, BarChart3, PieChart, TrendingUp, ScatterChart, LayoutGrid, Code, ChevronDown, Sparkles, X, RefreshCw, Minimize2, Maximize2, Terminal, Plus, Save, FolderOpen, Trash2, Filter, Database, Send, GripVertical } from 'lucide-react';
 
 // src/context/DashboardContext.tsx
 var DashboardContext = createContext(null);
@@ -32,6 +32,7 @@ function useCapabilities() {
     canDelete: !!c.deleteDashboard,
     canAnalyze: !!c.analyzeDataset,
     canRefine: !!c.refineDashboard,
+    canNew: !!c.newDashboard,
     canAddPanel: !!c.addPanel,
     canEditPanels: !!c.removePanel
   };
@@ -1619,7 +1620,7 @@ function DataExplorer({
   onSelectState,
   onRefreshStates
 }) {
-  const { theme, addPanel, saveDashboard, listDashboards, searchDashboards, loadDashboard, deleteDashboard, analyzeDataset, refineDashboard } = useDashboard();
+  const { theme, newDashboard, addPanel, saveDashboard, listDashboards, searchDashboards, loadDashboard, deleteDashboard, analyzeDataset, refineDashboard } = useDashboard();
   const caps = useCapabilities();
   const [mode, setMode] = useState("dashboard");
   const [fullscreen, setFullscreen] = useState(false);
@@ -1689,6 +1690,21 @@ function DataExplorer({
         /* @__PURE__ */ jsx(ModeTab, { active: mode === "dashboard", onClick: () => setMode("dashboard"), icon: Sparkles, label: "Dashboard" }),
         /* @__PURE__ */ jsx(ModeTab, { active: mode === "builder", onClick: () => setMode("builder"), icon: BarChart3, label: "Chart Builder" }),
         /* @__PURE__ */ jsx(ModeTab, { active: mode === "sql", onClick: () => setMode("sql"), icon: Terminal, label: "SQL" }),
+        caps.canNew && /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: () => {
+              newDashboard?.();
+              setMode("builder");
+            },
+            title: "Start a new dashboard",
+            className: "flex items-center gap-1 px-2 py-1 text-xs font-mono border border-midnight-border text-midnight-text-muted hover:bg-midnight-raised hover:text-midnight-accent transition-colors",
+            children: [
+              /* @__PURE__ */ jsx(Plus, { className: "w-3.5 h-3.5" }),
+              " New Dashboard"
+            ]
+          }
+        ),
         showPersistence && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 ml-auto", children: [
           caps.canSave && showSaveInput && /* @__PURE__ */ jsx(
             "input",
@@ -1757,14 +1773,39 @@ function DataExplorer({
           )
         ] }, d.id))
       ] }),
-      /* @__PURE__ */ jsx("div", { className: `border ${theme.border} bg-midnight-surface flex-1 flex flex-col min-h-0`, children: mode === "sql" ? /* @__PURE__ */ jsx(SqlConsole, { columns, stateId: activeStateId ?? void 0 }) : mode === "builder" ? /* @__PURE__ */ jsx(ChartBuilder, { records, columns, stateId: activeStateId ?? void 0, onSave: addPanel }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("div", { className: `border ${theme.border} bg-midnight-surface flex-1 flex flex-col min-h-0`, children: mode === "sql" ? /* @__PURE__ */ jsx(SqlConsole, { columns, stateId: activeStateId ?? void 0 }) : mode === "builder" ? /* @__PURE__ */ jsx(
+        ChartBuilder,
+        {
+          records,
+          columns,
+          stateId: activeStateId ?? void 0,
+          onSave: addPanel ? (panel) => {
+            addPanel(panel);
+            setMode("dashboard");
+          } : void 0
+        }
+      ) : /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx("div", { className: "flex-1 min-h-0 overflow-auto", children: dashboard ? /* @__PURE__ */ jsx(DashboardRenderer, { dashboard, records, columns }) : /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center h-full gap-4 text-midnight-text-muted", children: [
           /* @__PURE__ */ jsx(Sparkles, { className: "w-8 h-8" }),
           /* @__PURE__ */ jsx("p", { className: "text-sm", children: caps.canAnalyze ? /* @__PURE__ */ jsxs(Fragment, { children: [
             "Click ",
             /* @__PURE__ */ jsx("strong", { children: "Auto-Analyze" }),
             " to generate an AI dashboard"
-          ] }) : "No dashboard to display" })
+          ] }) : caps.canNew ? "Start a new dashboard, then add charts from the Chart Builder" : "No dashboard to display" }),
+          caps.canNew && /* @__PURE__ */ jsxs(
+            "button",
+            {
+              onClick: () => {
+                newDashboard?.();
+                setMode("builder");
+              },
+              className: "flex items-center gap-1.5 px-3 py-1.5 text-xs font-mono border border-midnight-accent text-midnight-accent hover:bg-midnight-accent/10 transition-colors",
+              children: [
+                /* @__PURE__ */ jsx(Plus, { className: "w-4 h-4" }),
+                " Create Dashboard"
+              ]
+            }
+          )
         ] }) }),
         dashboard && caps.canRefine && refineDashboard && /* @__PURE__ */ jsx(ChatInput, { onSend: refineDashboard, loading: analyzing, theme })
       ] }) })