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

package/dist/index.cjs

@@ -38,6 +38,8 @@ function useCapabilities() {
     canDelete: !!c.deleteDashboard,
     canAnalyze: !!c.analyzeDataset,
     canRefine: !!c.refineDashboard,
+    canNew: !!c.newDashboard,
+    canAddPanel: !!c.addPanel,
     canEditPanels: !!c.removePanel
   };
 }
@@ -1624,7 +1626,7 @@ function DataExplorer({
   onSelectState,
   onRefreshStates
 }) {
-  const { theme, 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] = react.useState("dashboard");
   const [fullscreen, setFullscreen] = react.useState(false);
@@ -1694,6 +1696,21 @@ function DataExplorer({
         /* @__PURE__ */ jsxRuntime.jsx(ModeTab, { active: mode === "dashboard", onClick: () => setMode("dashboard"), icon: lucideReact.Sparkles, label: "Dashboard" }),
         /* @__PURE__ */ jsxRuntime.jsx(ModeTab, { active: mode === "builder", onClick: () => setMode("builder"), icon: lucideReact.BarChart3, label: "Chart Builder" }),
         /* @__PURE__ */ jsxRuntime.jsx(ModeTab, { active: mode === "sql", onClick: () => setMode("sql"), icon: lucideReact.Terminal, label: "SQL" }),
+        caps.canNew && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "w-3.5 h-3.5" }),
+              " New Dashboard"
+            ]
+          }
+        ),
         showPersistence && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1 ml-auto", children: [
           caps.canSave && showSaveInput && /* @__PURE__ */ jsxRuntime.jsx(
             "input",
@@ -1762,14 +1779,39 @@ function DataExplorer({
           )
         ] }, d.id))
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: `border ${theme.border} bg-midnight-surface flex-1 flex flex-col min-h-0`, children: mode === "sql" ? /* @__PURE__ */ jsxRuntime.jsx(SqlConsole, { columns, stateId: activeStateId ?? void 0 }) : mode === "builder" ? /* @__PURE__ */ jsxRuntime.jsx(ChartBuilder, { records, columns, stateId: activeStateId ?? void 0 }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: `border ${theme.border} bg-midnight-surface flex-1 flex flex-col min-h-0`, children: mode === "sql" ? /* @__PURE__ */ jsxRuntime.jsx(SqlConsole, { columns, stateId: activeStateId ?? void 0 }) : mode === "builder" ? /* @__PURE__ */ jsxRuntime.jsx(
+        ChartBuilder,
+        {
+          records,
+          columns,
+          stateId: activeStateId ?? void 0,
+          onSave: addPanel ? (panel) => {
+            addPanel(panel);
+            setMode("dashboard");
+          } : void 0
+        }
+      ) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-h-0 overflow-auto", children: dashboard ? /* @__PURE__ */ jsxRuntime.jsx(DashboardRenderer, { dashboard, records, columns }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center justify-center h-full gap-4 text-midnight-text-muted", children: [
           /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Sparkles, { className: "w-8 h-8" }),
           /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm", children: caps.canAnalyze ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
             "Click ",
             /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "w-4 h-4" }),
+                " Create Dashboard"
+              ]
+            }
+          )
         ] }) }),
         dashboard && caps.canRefine && refineDashboard && /* @__PURE__ */ jsxRuntime.jsx(ChatInput, { onSend: refineDashboard, loading: analyzing, theme })
       ] }) })