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

package/dist/index.d.cts

@@ -11,6 +11,13 @@ interface SavedDashboard {
     name: string;
     [key: string]: unknown;
 }
+interface PanelInput {
+    title: string;
+    type: string;
+    config: Record<string, unknown>;
+    width: number;
+    height: number;
+}
 interface DashboardCapabilities {
     runQuery: (sql: string, stateId?: string) => Promise<QueryResult>;
     saveDashboard?: (name?: string) => Promise<void> | void;
@@ -20,6 +27,8 @@ 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;
 }
 interface DashboardContextValue extends DashboardCapabilities {
@@ -40,6 +49,8 @@ declare function useCapabilities(): {
     canDelete: boolean;
     canAnalyze: boolean;
     canRefine: boolean;
+    canNew: boolean;
+    canAddPanel: boolean;
     canEditPanels: boolean;
 };
 
@@ -474,4 +485,4 @@ interface DataExplorerProps {
 }
 declare function DataExplorer({ records, columns, states, activeStateId, profile, dashboard, dashboardId, savedDashboards, loading, analyzing, 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 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 };
+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

@@ -11,6 +11,13 @@ interface SavedDashboard {
     name: string;
     [key: string]: unknown;
 }
+interface PanelInput {
+    title: string;
+    type: string;
+    config: Record<string, unknown>;
+    width: number;
+    height: number;
+}
 interface DashboardCapabilities {
     runQuery: (sql: string, stateId?: string) => Promise<QueryResult>;
     saveDashboard?: (name?: string) => Promise<void> | void;
@@ -20,6 +27,8 @@ 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;
 }
 interface DashboardContextValue extends DashboardCapabilities {
@@ -40,6 +49,8 @@ declare function useCapabilities(): {
     canDelete: boolean;
     canAnalyze: boolean;
     canRefine: boolean;
+    canNew: boolean;
+    canAddPanel: boolean;
     canEditPanels: boolean;
 };
 
@@ -474,4 +485,4 @@ interface DataExplorerProps {
 }
 declare function DataExplorer({ records, columns, states, activeStateId, profile, dashboard, dashboardId, savedDashboards, loading, analyzing, 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 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 };
+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

@@ -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,8 @@ function useCapabilities() {
     canDelete: !!c.deleteDashboard,
     canAnalyze: !!c.analyzeDataset,
     canRefine: !!c.refineDashboard,
+    canNew: !!c.newDashboard,
+    canAddPanel: !!c.addPanel,
     canEditPanels: !!c.removePanel
   };
 }
@@ -1618,7 +1620,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] = useState("dashboard");
   const [fullscreen, setFullscreen] = useState(false);
@@ -1688,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",
@@ -1756,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 }) : /* @__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 })
       ] }) })