@quantumwake/terminal-ux-dashboard-components 0.1.5 → 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);
@@ -675,12 +678,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 = 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: [
@@ -704,15 +719,16 @@ function SqlConsole({ columns = [], stateId, defaultColumnsOpen = false, default
         )
       ] }),
       /* @__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.jsxs("div", { className: "mt-2", children: [