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

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;
 };
@@ -324,6 +326,9 @@ interface SqlConsoleColumn {
 interface SqlConsoleProps {
     columns?: SqlConsoleColumn[];
     stateId?: string;
+    defaultColumnsOpen?: boolean;
+    defaultSql?: string;
+    autoRun?: boolean;
 }
 /**
  * SqlConsole — a HuggingFace-style read-only SQL editor over a state's full
@@ -331,7 +336,7 @@ interface SqlConsoleProps {
  * in the viewer) as a view named `data`; queries run against the entire dataset,
  * not a client sample.
  */
-declare function SqlConsole({ columns, stateId }: SqlConsoleProps): react.JSX.Element;
+declare function SqlConsole({ columns, stateId, defaultColumnsOpen, defaultSql, autoRun }: SqlConsoleProps): react.JSX.Element;
 
 interface PanelConfig {
     sql?: string;
@@ -455,6 +460,7 @@ interface Dashboard {
     panels?: DashboardPanel[];
     [key: string]: unknown;
 }
+type Mode = 'dashboard' | 'builder' | 'sql';
 interface DataExplorerProps {
     /** All records for the active state (viz/builder source). Empty when not loaded. */
     records: Row[];
@@ -476,11 +482,17 @@ interface DataExplorerProps {
     loading?: boolean;
     /** True while the AI is generating/refining the dashboard. */
     analyzing?: boolean;
+    /** Initial mode tab. Defaults to 'dashboard'; the published viewer uses 'sql'
+     *  so the SQL console is the primary surface. Clamped to `tabs`. */
+    defaultMode?: Mode;
+    /** Which mode tabs to show, in order. Defaults to all three. Pass a subset to
+     *  turn tabs off (e.g. ['sql'] for a SQL-only explorer). */
+    tabs?: Mode[];
     /** Select a state (host fetches its profile/records). */
     onSelectState: (id: string) => void;
     /** Refresh the states catalog. */
     onRefreshStates?: () => void;
 }
-declare function DataExplorer({ records, columns, states, activeStateId, profile, dashboard, dashboardId, savedDashboards, loading, analyzing, onSelectState, onRefreshStates, }: DataExplorerProps): react.JSX.Element;
+declare function DataExplorer({ records, columns, states, activeStateId, profile, dashboard, dashboardId, savedDashboards, loading, analyzing, defaultMode, tabs, onSelectState, onRefreshStates, }: DataExplorerProps): react.JSX.Element;
 
 export { type AggFn, type BarDatum, BarView, type BarViewProps, ChartBuilder, type ChartBuilderColumn, type ChartBuilderProps, type ChartConfig, type ChartField, type ChartFilter, type ChartPanel, type ChartStyle, ChartStyleControls, type ChartStyleControlsProps, type ChartType, DEFAULT_CHART_STYLE, type Dashboard$1 as Dashboard, type DashboardCapabilities, type DashboardContextValue, type DashboardPanel$1 as DashboardPanel, DashboardProvider, type DashboardProviderProps, DashboardRenderer, type DashboardRendererProps, type DashboardTheme, DataExplorer, type DataExplorerProps, type HeatmapSerie, HeatmapView, type HeatmapViewProps, type InsightConfig, InsightView, type InsightViewProps, LEGEND_ANCHORS, type LegendAnchor, type LegendPosition, type LineSerie, LineView, type LineViewProps, type MetricConfig, MetricView, type MetricViewProps, type PanelInput, type PieDatum, PieView, type PieViewProps, PivotView, type PivotViewProps, type QueryResult, type Row, type SavedDashboard, type ScatterSerie, ScatterView, type ScatterViewProps, SqlConsole, type SqlConsoleColumn, type SqlConsoleProps, type TitleAlign, aggExpr, aggregate, axisLegend, buildChartSQL, buildNivoTheme, compileWhere, groupBy, legendConfig, qIdent, qLit, shapeChartData, useCapabilities, useDashboard, withStyleDefaults };

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;
 };
@@ -324,6 +326,9 @@ interface SqlConsoleColumn {
 interface SqlConsoleProps {
     columns?: SqlConsoleColumn[];
     stateId?: string;
+    defaultColumnsOpen?: boolean;
+    defaultSql?: string;
+    autoRun?: boolean;
 }
 /**
  * SqlConsole — a HuggingFace-style read-only SQL editor over a state's full
@@ -331,7 +336,7 @@ interface SqlConsoleProps {
  * in the viewer) as a view named `data`; queries run against the entire dataset,
  * not a client sample.
  */
-declare function SqlConsole({ columns, stateId }: SqlConsoleProps): react.JSX.Element;
+declare function SqlConsole({ columns, stateId, defaultColumnsOpen, defaultSql, autoRun }: SqlConsoleProps): react.JSX.Element;
 
 interface PanelConfig {
     sql?: string;
@@ -455,6 +460,7 @@ interface Dashboard {
     panels?: DashboardPanel[];
     [key: string]: unknown;
 }
+type Mode = 'dashboard' | 'builder' | 'sql';
 interface DataExplorerProps {
     /** All records for the active state (viz/builder source). Empty when not loaded. */
     records: Row[];
@@ -476,11 +482,17 @@ interface DataExplorerProps {
     loading?: boolean;
     /** True while the AI is generating/refining the dashboard. */
     analyzing?: boolean;
+    /** Initial mode tab. Defaults to 'dashboard'; the published viewer uses 'sql'
+     *  so the SQL console is the primary surface. Clamped to `tabs`. */
+    defaultMode?: Mode;
+    /** Which mode tabs to show, in order. Defaults to all three. Pass a subset to
+     *  turn tabs off (e.g. ['sql'] for a SQL-only explorer). */
+    tabs?: Mode[];
     /** Select a state (host fetches its profile/records). */
     onSelectState: (id: string) => void;
     /** Refresh the states catalog. */
     onRefreshStates?: () => void;
 }
-declare function DataExplorer({ records, columns, states, activeStateId, profile, dashboard, dashboardId, savedDashboards, loading, analyzing, onSelectState, onRefreshStates, }: DataExplorerProps): react.JSX.Element;
+declare function DataExplorer({ records, columns, states, activeStateId, profile, dashboard, dashboardId, savedDashboards, loading, analyzing, defaultMode, tabs, onSelectState, onRefreshStates, }: DataExplorerProps): react.JSX.Element;
 
 export { type AggFn, type BarDatum, BarView, type BarViewProps, ChartBuilder, type ChartBuilderColumn, type ChartBuilderProps, type ChartConfig, type ChartField, type ChartFilter, type ChartPanel, type ChartStyle, ChartStyleControls, type ChartStyleControlsProps, type ChartType, DEFAULT_CHART_STYLE, type Dashboard$1 as Dashboard, type DashboardCapabilities, type DashboardContextValue, type DashboardPanel$1 as DashboardPanel, DashboardProvider, type DashboardProviderProps, DashboardRenderer, type DashboardRendererProps, type DashboardTheme, DataExplorer, type DataExplorerProps, type HeatmapSerie, HeatmapView, type HeatmapViewProps, type InsightConfig, InsightView, type InsightViewProps, LEGEND_ANCHORS, type LegendAnchor, type LegendPosition, type LineSerie, LineView, type LineViewProps, type MetricConfig, MetricView, type MetricViewProps, type PanelInput, type PieDatum, PieView, type PieViewProps, PivotView, type PivotViewProps, type QueryResult, type Row, type SavedDashboard, type ScatterSerie, ScatterView, type ScatterViewProps, SqlConsole, type SqlConsoleColumn, type SqlConsoleProps, type TitleAlign, aggExpr, aggregate, axisLegend, buildChartSQL, buildNivoTheme, compileWhere, groupBy, legendConfig, qIdent, qLit, shapeChartData, useCapabilities, useDashboard, withStyleDefaults };

package/dist/index.js

@@ -1,4 +1,4 @@
-import { createContext, useContext, useMemo, useState, useRef, useEffect, Suspense } from 'react';
+import { createContext, useContext, useMemo, useState, useEffect, useRef, Suspense } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { ResponsiveBar } from '@nivo/bar';
 import { ResponsivePie } from '@nivo/pie';
@@ -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, ChevronDown, AlertCircle, Rows3, BarChart3, PieChart, TrendingUp, ScatterChart, LayoutGrid, Code, Sparkles, X, Terminal, RefreshCw, Minimize2, Maximize2, 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
   };
@@ -642,18 +643,19 @@ var renderCell = (v) => {
   if (typeof v === "boolean") return v ? "true" : "false";
   return String(v);
 };
-function SqlConsole({ columns = [], stateId }) {
+function SqlConsole({ columns = [], stateId, defaultColumnsOpen = false, defaultSql = DEFAULT_SQL, autoRun = false }) {
   const { theme, runQuery } = useDashboard();
-  const [sql, setSql] = useState(DEFAULT_SQL);
+  const [sql, setSql] = useState(defaultSql);
   const [result, setResult] = useState(null);
   const [error, setError] = useState(null);
   const [running, setRunning] = useState(false);
-  const run = async () => {
-    if (running || !sql.trim()) return;
+  const [columnsOpen, setColumnsOpen] = useState(defaultColumnsOpen);
+  const run = async (text = sql) => {
+    if (running || !text.trim()) return;
     setRunning(true);
     setError(null);
     try {
-      const data = await runQuery(sql, stateId);
+      const data = await runQuery(text, stateId);
       setResult({ columns: data.columns || [], rows: data.rows || [] });
     } catch (err) {
       setResult(null);
@@ -662,6 +664,11 @@ function SqlConsole({ columns = [], stateId }) {
       setRunning(false);
     }
   };
+  useEffect(() => {
+    if (!autoRun || !stateId) return;
+    setSql(defaultSql);
+    void run(defaultSql);
+  }, [stateId, autoRun, defaultSql]);
   const onKeyDown = (e) => {
     if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
       e.preventDefault();
@@ -702,19 +709,34 @@ function SqlConsole({ columns = [], stateId }) {
           placeholder: "SELECT ... FROM data"
         }
       ),
-      columns.length > 0 && /* @__PURE__ */ jsx("div", { className: "mt-2 flex flex-wrap gap-1", children: columns.map((c) => /* @__PURE__ */ jsxs(
-        "button",
-        {
-          title: `Insert ${c.name}`,
-          onClick: () => setSql((s) => `${s}${s.endsWith(" ") || s.endsWith("\n") || !s ? "" : " "}${c.name}`),
-          className: "px-1.5 py-0.5 border border-midnight-border text-[11px] font-mono text-midnight-text-muted hover:bg-midnight-raised transition-colors",
-          children: [
-            c.name,
-            /* @__PURE__ */ jsx("span", { className: "opacity-50 ml-1", children: c.type })
-          ]
-        },
-        c.name
-      )) })
+      columns.length > 0 && /* @__PURE__ */ jsxs("div", { className: "mt-2", children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: () => setColumnsOpen((o) => !o),
+            className: "flex items-center gap-1 text-[11px] font-mono text-midnight-text-muted hover:text-midnight-text-body transition-colors",
+            children: [
+              /* @__PURE__ */ jsx(ChevronDown, { className: `w-3 h-3 transition-transform ${columnsOpen ? "" : "-rotate-90"}` }),
+              "Columns (",
+              columns.length,
+              ")"
+            ]
+          }
+        ),
+        columnsOpen && /* @__PURE__ */ jsx("div", { className: "mt-1.5 flex flex-wrap gap-1", children: columns.map((c) => /* @__PURE__ */ jsxs(
+          "button",
+          {
+            title: `Insert ${c.name}`,
+            onClick: () => setSql((s) => `${s}${s.endsWith(" ") || s.endsWith("\n") || !s ? "" : " "}${c.name}`),
+            className: "px-1.5 py-0.5 border border-midnight-border text-[11px] font-mono text-midnight-text-muted hover:bg-midnight-raised transition-colors",
+            children: [
+              c.name,
+              /* @__PURE__ */ jsx("span", { className: "opacity-50 ml-1", children: c.type })
+            ]
+          },
+          c.name
+        )) })
+      ] })
     ] }),
     (result || error) && /* @__PURE__ */ jsx("div", { className: `flex items-center gap-4 px-3 py-1.5 border-b ${theme.border} text-xs font-mono shrink-0 ${error ? "text-red-400" : "text-midnight-text-muted"}`, children: error ? /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1.5", children: [
       /* @__PURE__ */ jsx(AlertCircle, { className: "w-3.5 h-3.5" }),
@@ -1605,6 +1627,11 @@ function ModeTab({ active, onClick, icon: Icon, label }) {
     }
   );
 }
+var MODE_TABS = [
+  { mode: "dashboard", icon: Sparkles, label: "Dashboard" },
+  { mode: "builder", icon: BarChart3, label: "Chart Builder" },
+  { mode: "sql", icon: Terminal, label: "SQL" }
+];
 function DataExplorer({
   records,
   columns,
@@ -1616,12 +1643,15 @@ function DataExplorer({
   savedDashboards = [],
   loading = false,
   analyzing = false,
+  defaultMode = "dashboard",
+  tabs = ["dashboard", "builder", "sql"],
   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 visibleTabs = MODE_TABS.filter((t) => tabs.includes(t.mode));
+  const [mode, setMode] = useState(tabs.includes(defaultMode) ? defaultMode : tabs[0] ?? "sql");
   const [fullscreen, setFullscreen] = useState(false);
   const [showSaved, setShowSaved] = useState(false);
   const [saveName, setSaveName] = useState("");
@@ -1686,9 +1716,22 @@ function DataExplorer({
         )
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 mb-3 shrink-0", children: [
-        /* @__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" }),
+        visibleTabs.map((t) => /* @__PURE__ */ jsx(ModeTab, { active: mode === t.mode, onClick: () => setMode(t.mode), icon: t.icon, label: t.label }, t.mode)),
+        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 +1800,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 })
       ] }) })