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

package/dist/index.cjs

@@ -649,18 +649,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] = react.useState(DEFAULT_SQL);
+  const [sql, setSql] = react.useState(defaultSql);
   const [result, setResult] = react.useState(null);
   const [error, setError] = react.useState(null);
   const [running, setRunning] = react.useState(false);
-  const run = async () => {
-    if (running || !sql.trim()) return;
+  const [columnsOpen, setColumnsOpen] = react.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);
@@ -669,6 +670,11 @@ function SqlConsole({ columns = [], stateId }) {
       setRunning(false);
     }
   };
+  react.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();
@@ -709,19 +715,34 @@ function SqlConsole({ columns = [], stateId }) {
           placeholder: "SELECT ... FROM data"
         }
       ),
-      columns.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2 flex flex-wrap gap-1", children: columns.map((c) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: "opacity-50 ml-1", children: c.type })
-          ]
-        },
-        c.name
-      )) })
+      columns.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-2", children: [
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: `w-3 h-3 transition-transform ${columnsOpen ? "" : "-rotate-90"}` }),
+              "Columns (",
+              columns.length,
+              ")"
+            ]
+          }
+        ),
+        columnsOpen && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-1.5 flex flex-wrap gap-1", children: columns.map((c) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: "opacity-50 ml-1", children: c.type })
+            ]
+          },
+          c.name
+        )) })
+      ] })
     ] }),
     (result || error) && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-1.5", children: [
       /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertCircle, { className: "w-3.5 h-3.5" }),
@@ -1612,6 +1633,11 @@ function ModeTab({ active, onClick, icon: Icon, label }) {
     }
   );
 }
+var MODE_TABS = [
+  { mode: "dashboard", icon: lucideReact.Sparkles, label: "Dashboard" },
+  { mode: "builder", icon: lucideReact.BarChart3, label: "Chart Builder" },
+  { mode: "sql", icon: lucideReact.Terminal, label: "SQL" }
+];
 function DataExplorer({
   records,
   columns,
@@ -1623,12 +1649,15 @@ function DataExplorer({
   savedDashboards = [],
   loading = false,
   analyzing = false,
+  defaultMode = "dashboard",
+  tabs = ["dashboard", "builder", "sql"],
   onSelectState,
   onRefreshStates
 }) {
   const { theme, newDashboard, addPanel, saveDashboard, listDashboards, searchDashboards, loadDashboard, deleteDashboard, analyzeDataset, refineDashboard } = useDashboard();
   const caps = useCapabilities();
-  const [mode, setMode] = react.useState("dashboard");
+  const visibleTabs = MODE_TABS.filter((t) => tabs.includes(t.mode));
+  const [mode, setMode] = react.useState(tabs.includes(defaultMode) ? defaultMode : tabs[0] ?? "sql");
   const [fullscreen, setFullscreen] = react.useState(false);
   const [showSaved, setShowSaved] = react.useState(false);
   const [saveName, setSaveName] = react.useState("");
@@ -1693,9 +1722,7 @@ function DataExplorer({
         )
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1 mb-3 shrink-0", children: [
-        /* @__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" }),
+        visibleTabs.map((t) => /* @__PURE__ */ jsxRuntime.jsx(ModeTab, { active: mode === t.mode, onClick: () => setMode(t.mode), icon: t.icon, label: t.label }, t.mode)),
         caps.canNew && /* @__PURE__ */ jsxRuntime.jsxs(
           "button",
           {