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

package/dist/index.cjs

@@ -10,10 +10,13 @@ var heatmap = require('@nivo/heatmap');
 var PivotTableUI = require('react-pivottable/PivotTableUI');
 require('react-pivottable/pivottable.css');
 var lucideReact = require('lucide-react');
+var CodeMirror = require('@uiw/react-codemirror');
+var langSql = require('@codemirror/lang-sql');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var PivotTableUI__default = /*#__PURE__*/_interopDefault(PivotTableUI);
+var CodeMirror__default = /*#__PURE__*/_interopDefault(CodeMirror);
 
 // src/context/DashboardContext.tsx
 var DashboardContext = react.createContext(null);
@@ -649,18 +652,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,12 +673,29 @@ function SqlConsole({ columns = [], stateId }) {
       setRunning(false);
     }
   };
-  const onKeyDown = (e) => {
-    if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
-      e.preventDefault();
-      void run();
-    }
+  react.useEffect(() => {
+    if (!autoRun || !stateId) return;
+    setSql(defaultSql);
+    void run(defaultSql);
+  }, [stateId, autoRun, defaultSql]);
+  const runRef = react.useRef(() => {
+  });
+  runRef.current = () => {
+    void run();
   };
+  const schemaKey = columns.map((c) => c.name).join(",");
+  const extensions = react.useMemo(
+    () => [
+      langSql.sql({ schema: { data: columns.map((c) => c.name) }, upperCaseKeywords: true }),
+      CodeMirror.EditorView.lineWrapping,
+      CodeMirror.Prec.highest(CodeMirror.keymap.of([{ key: "Mod-Enter", run: () => {
+        runRef.current();
+        return true;
+      } }]))
+    ],
+    [schemaKey]
+    // eslint-disable-line react-hooks/exhaustive-deps
+  );
   const resultColumns = result?.columns || [];
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col h-full", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `border-b ${theme.border} bg-midnight-elevated p-3 shrink-0`, children: [
@@ -698,30 +719,46 @@ function SqlConsole({ columns = [], stateId }) {
         )
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx(
-        "textarea",
+        CodeMirror__default.default,
         {
           value: sql,
-          onChange: (e) => setSql(e.target.value),
-          onKeyDown,
-          spellCheck: false,
-          rows: 5,
-          className: "w-full bg-midnight-surface border border-midnight-border px-3 py-2 text-sm font-mono outline-none text-midnight-text-body resize-y focus:border-midnight-accent transition-colors",
-          placeholder: "SELECT ... FROM data"
+          onChange: setSql,
+          extensions,
+          theme: "dark",
+          basicSetup: { lineNumbers: false, foldGutter: false, highlightActiveLine: false },
+          height: "120px",
+          placeholder: "SELECT ... FROM data",
+          className: "border border-midnight-border text-sm overflow-hidden focus-within:border-midnight-accent"
         }
       ),
-      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 +1649,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 +1665,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 +1738,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",
           {