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

package/dist/index.js

@@ -8,6 +8,8 @@ import { ResponsiveHeatMap } from '@nivo/heatmap';
 import PivotTableUI from 'react-pivottable/PivotTableUI';
 import 'react-pivottable/pivottable.css';
 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';
+import CodeMirror, { EditorView, Prec, keymap } from '@uiw/react-codemirror';
+import { sql } from '@codemirror/lang-sql';
 
 // src/context/DashboardContext.tsx
 var DashboardContext = createContext(null);
@@ -645,12 +647,12 @@ var renderCell = (v) => {
 };
 function SqlConsole({ columns = [], stateId, defaultColumnsOpen = false, defaultSql = DEFAULT_SQL, autoRun = false }) {
   const { theme, runQuery } = useDashboard();
-  const [sql, setSql] = useState(defaultSql);
+  const [sql$1, setSql] = useState(defaultSql);
   const [result, setResult] = useState(null);
   const [error, setError] = useState(null);
   const [running, setRunning] = useState(false);
   const [columnsOpen, setColumnsOpen] = useState(defaultColumnsOpen);
-  const run = async (text = sql) => {
+  const run = async (text = sql$1) => {
     if (running || !text.trim()) return;
     setRunning(true);
     setError(null);
@@ -669,12 +671,24 @@ function SqlConsole({ columns = [], stateId, defaultColumnsOpen = false, default
     setSql(defaultSql);
     void run(defaultSql);
   }, [stateId, autoRun, defaultSql]);
-  const onKeyDown = (e) => {
-    if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
-      e.preventDefault();
-      void run();
-    }
+  const runRef = useRef(() => {
+  });
+  runRef.current = () => {
+    void run();
   };
+  const schemaKey = columns.map((c) => c.name).join(",");
+  const extensions = useMemo(
+    () => [
+      sql({ schema: { data: columns.map((c) => c.name) }, upperCaseKeywords: true }),
+      EditorView.lineWrapping,
+      Prec.highest(keymap.of([{ key: "Mod-Enter", run: () => {
+        runRef.current();
+        return true;
+      } }]))
+    ],
+    [schemaKey]
+    // eslint-disable-line react-hooks/exhaustive-deps
+  );
   const resultColumns = result?.columns || [];
   return /* @__PURE__ */ jsxs("div", { className: "flex flex-col h-full", children: [
     /* @__PURE__ */ jsxs("div", { className: `border-b ${theme.border} bg-midnight-elevated p-3 shrink-0`, children: [
@@ -687,7 +701,7 @@ function SqlConsole({ columns = [], stateId, defaultColumnsOpen = false, default
           "button",
           {
             onClick: () => void run(),
-            disabled: running || !sql.trim(),
+            disabled: running || !sql$1.trim(),
             className: `flex items-center gap-1.5 px-3 py-1 border text-xs font-mono transition-colors ${running ? "border-midnight-border opacity-50" : "border-midnight-accent text-midnight-accent hover:bg-midnight-accent/10"}`,
             children: [
               running ? /* @__PURE__ */ jsx(Loader2, { className: "w-3.5 h-3.5 animate-spin" }) : /* @__PURE__ */ jsx(Play, { className: "w-3.5 h-3.5" }),
@@ -698,15 +712,16 @@ function SqlConsole({ columns = [], stateId, defaultColumnsOpen = false, default
         )
       ] }),
       /* @__PURE__ */ jsx(
-        "textarea",
+        CodeMirror,
         {
-          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"
+          value: sql$1,
+          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__ */ jsxs("div", { className: "mt-2", children: [