@reifydb/console 0.4.2 → 0.4.7

package/dist/index.d.ts

@@ -1,7 +1,8 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { Diagnostic } from '@reifydb/core';
 import * as monaco_editor from 'monaco-editor';
-import { languages, editor } from 'monaco-editor';
+import { editor, languages } from 'monaco-editor';
+export { editor } from 'monaco-editor';
+import { Diagnostic } from '@reifydb/core';
 
 interface ExecutionResult {
     success: boolean;
@@ -35,8 +36,9 @@ interface ConsoleProps {
     historyKey?: string;
     connection?: ConnectionConfig;
     theme?: RdbTheme;
+    monacoTheme?: string | editor.IStandaloneThemeData;
 }
-declare function Console({ executor, initialCode, historyKey, connection, theme }: ConsoleProps): react_jsx_runtime.JSX.Element;
+declare function Console({ executor, initialCode, historyKey, connection, theme, monacoTheme }: ConsoleProps): react_jsx_runtime.JSX.Element;
 
 interface SnippetProps {
     executor: Executor;
@@ -45,8 +47,9 @@ interface SnippetProps {
     description?: string;
     className?: string;
     theme?: RdbTheme;
+    monacoTheme?: string | editor.IStandaloneThemeData;
 }
-declare function Snippet({ executor, initialCode, title, description, className, theme, }: SnippetProps): react_jsx_runtime.JSX.Element;
+declare function Snippet({ executor, initialCode, title, description, className, theme, monacoTheme, }: SnippetProps): react_jsx_runtime.JSX.Element;
 
 interface WasmDB {
     admin(rql: string): Promise<unknown> | unknown;

package/dist/index.js

@@ -1,5 +1,5 @@
 // src/components/Console.tsx
-import { useCallback as useCallback3, useEffect as useEffect4, useRef as useRef4, useState as useState5 } from "react";
+import { useCallback as useCallback3, useEffect as useEffect4, useMemo, useRef as useRef4, useState as useState5 } from "react";
 import { Client } from "@reifydb/client";
 
 // src/executor/ws-executor.ts
@@ -538,21 +538,21 @@ var brutalistLightTheme = {
   base: "vs",
   inherit: true,
   rules: [
-    { token: "keyword", foreground: "0D9488", fontStyle: "bold" },
+    { token: "keyword", foreground: "6366F1", fontStyle: "bold" },
     { token: "string", foreground: "16A34A" },
     { token: "string.quote", foreground: "16A34A" },
     { token: "number", foreground: "B91C1C", fontStyle: "bold" },
     { token: "comment", foreground: "6B7280", fontStyle: "italic" },
     { token: "operator", foreground: "383838" },
     { token: "identifier", foreground: "1A1A1A" },
-    { token: "key", foreground: "0D9488", fontStyle: "bold" }
+    { token: "key", foreground: "6366F1", fontStyle: "bold" }
   ],
   colors: {
     "editor.background": "#FFFFFF",
     "editor.foreground": "#1A1A1A",
     "editor.lineHighlightBackground": "#F8F8F7",
-    "editor.selectionBackground": "#A7F3D0",
-    "editorCursor.foreground": "#14B8A6",
+    "editor.selectionBackground": "#818CF840",
+    "editorCursor.foreground": "#818CF8",
     "editorLineNumber.foreground": "#9CA3AF",
     "editorLineNumber.activeForeground": "#383838"
   }
@@ -561,7 +561,7 @@ var brutalistDarkTheme = {
   base: "vs-dark",
   inherit: true,
   rules: [
-    { token: "keyword", foreground: "14B8A6", fontStyle: "bold" },
+    { token: "keyword", foreground: "818CF8", fontStyle: "bold" },
     { token: "string", foreground: "4ADE80" },
     { token: "string.quote", foreground: "4ADE80" },
     { token: "number", foreground: "F87171", fontStyle: "bold" },
@@ -574,8 +574,8 @@ var brutalistDarkTheme = {
     "editor.background": "#1A1A1A",
     "editor.foreground": "#F3F4F6",
     "editor.lineHighlightBackground": "#2A2A2A",
-    "editor.selectionBackground": "#1A3A36",
-    "editorCursor.foreground": "#14B8A6",
+    "editor.selectionBackground": "#818CF830",
+    "editorCursor.foreground": "#818CF8",
     "editorLineNumber.foreground": "#6B7280",
     "editorLineNumber.activeForeground": "#E5E7EB"
   }
@@ -584,21 +584,21 @@ var premiumLightTheme = {
   base: "vs",
   inherit: true,
   rules: [
-    { token: "keyword", foreground: "0D9488", fontStyle: "bold" },
+    { token: "keyword", foreground: "6366F1", fontStyle: "bold" },
     { token: "string", foreground: "059669" },
     { token: "string.quote", foreground: "059669" },
     { token: "number", foreground: "DB2777", fontStyle: "bold" },
     { token: "comment", foreground: "9CA3AF", fontStyle: "italic" },
     { token: "operator", foreground: "525252" },
     { token: "identifier", foreground: "1A1A1A" },
-    { token: "key", foreground: "0D9488", fontStyle: "bold" }
+    { token: "key", foreground: "6366F1", fontStyle: "bold" }
   ],
   colors: {
     "editor.background": "#FFFFFF",
     "editor.foreground": "#1A1A1A",
     "editor.lineHighlightBackground": "#F5F5F5",
-    "editor.selectionBackground": "#99F6E4",
-    "editorCursor.foreground": "#0D9488",
+    "editor.selectionBackground": "#818CF840",
+    "editorCursor.foreground": "#6366F1",
     "editorLineNumber.foreground": "#9CA3AF",
     "editorLineNumber.activeForeground": "#525252"
   }
@@ -607,23 +607,23 @@ var premiumDarkTheme = {
   base: "vs-dark",
   inherit: true,
   rules: [
-    { token: "keyword", foreground: "14B8A6", fontStyle: "bold" },
-    { token: "string", foreground: "34D399" },
-    { token: "string.quote", foreground: "34D399" },
-    { token: "number", foreground: "F472B6", fontStyle: "bold" },
-    { token: "comment", foreground: "525252", fontStyle: "italic" },
-    { token: "operator", foreground: "A3A3A3" },
-    { token: "identifier", foreground: "E5E5E5" },
-    { token: "key", foreground: "14B8A6", fontStyle: "bold" }
+    { token: "keyword", foreground: "818cf8", fontStyle: "bold" },
+    { token: "string", foreground: "22d3ee" },
+    { token: "string.quote", foreground: "22d3ee" },
+    { token: "number", foreground: "22d3ee", fontStyle: "bold" },
+    { token: "comment", foreground: "666666", fontStyle: "italic" },
+    { token: "operator", foreground: "A0A0A0" },
+    { token: "identifier", foreground: "F0F0F0" },
+    { token: "key", foreground: "818cf8", fontStyle: "bold" }
   ],
   colors: {
-    "editor.background": "#1A1A1A",
-    "editor.foreground": "#E5E5E5",
-    "editor.lineHighlightBackground": "#252525",
-    "editor.selectionBackground": "#14B8A640",
-    "editorCursor.foreground": "#14B8A6",
-    "editorLineNumber.foreground": "#525252",
-    "editorLineNumber.activeForeground": "#A3A3A3"
+    "editor.background": "#1a1a1a",
+    "editor.foreground": "#F0F0F0",
+    "editor.lineHighlightBackground": "#222222",
+    "editor.selectionBackground": "#818cf840",
+    "editorCursor.foreground": "#818cf8",
+    "editorLineNumber.foreground": "#666666",
+    "editorLineNumber.activeForeground": "#A0A0A0"
   }
 };
 
@@ -643,10 +643,11 @@ function registerRqlLanguage(monaco) {
 
 // src/components/editor/QueryEditor.tsx
 import { jsx as jsx4 } from "react/jsx-runtime";
-function QueryEditor({ code, onChange, onRun, theme = "light" }) {
+function QueryEditor({ code, onChange, onRun, theme = "light", monacoThemeName, monacoThemeData }) {
   const editorRef = useRef2(null);
   const onRunRef = useRef2(onRun);
   onRunRef.current = onRun;
+  const resolvedTheme = monacoThemeName ?? (theme === "light" ? "premium-light" : "premium-dark");
   const handleMount = (editor, monaco) => {
     editorRef.current = editor;
     registerRqlLanguage(monaco);
@@ -661,13 +662,16 @@ function QueryEditor({ code, onChange, onRun, theme = "light" }) {
   };
   const handleBeforeMount = (monaco) => {
     registerRqlLanguage(monaco);
+    if (monacoThemeName && monacoThemeData) {
+      monaco.editor.defineTheme(monacoThemeName, monacoThemeData);
+    }
   };
   return /* @__PURE__ */ jsx4(
     Editor,
     {
       height: "100%",
       language: "rql",
-      theme: theme === "light" ? "premium-light" : "premium-dark",
+      theme: resolvedTheme,
       value: code,
       onChange: (value) => onChange(value || ""),
       beforeMount: handleBeforeMount,
@@ -739,7 +743,7 @@ function EditorToolbar({
           className: "rdb-editor-toolbar__btn rdb-editor-toolbar__btn--secondary",
           onClick: onClear,
           disabled: isExecuting,
-          children: "[clear]"
+          children: "Clear"
         }
       ),
       /* @__PURE__ */ jsx5(
@@ -748,7 +752,7 @@ function EditorToolbar({
           className: "rdb-editor-toolbar__btn",
           onClick: onRun,
           disabled: isExecuting,
-          children: isExecuting ? "[running...]" : "[run]"
+          children: isExecuting ? "Running..." : "Run"
         }
       )
     ] })
@@ -1466,7 +1470,7 @@ var TABS = [
   { id: "schema", label: "Schema" }
 ];
 var WS_URL_STORAGE_KEY = "rdb-console-ws-url";
-function ConsoleInner({ executor, historyKey, connection, theme = "light" }) {
+function ConsoleInner({ executor, historyKey, connection, theme = "light", monacoTheme }) {
   const { state, dispatch } = useConsoleStore();
   const connectionLocked = connection != null;
   const lockedWsUrl = connection?.mode === "websocket" ? connection.url : null;
@@ -1602,6 +1606,15 @@ function ConsoleInner({ executor, historyKey, connection, theme = "light" }) {
     }
     setConnectionMode(mode);
   }, [connectionMode, executor]);
+  const resolvedMonacoThemeName = useMemo(() => {
+    if (!monacoTheme) return void 0;
+    if (typeof monacoTheme === "string") return monacoTheme;
+    return "rdb-custom";
+  }, [monacoTheme]);
+  const resolvedMonacoThemeData = useMemo(() => {
+    if (!monacoTheme || typeof monacoTheme === "string") return void 0;
+    return monacoTheme;
+  }, [monacoTheme]);
   const connectionLabel = connectionMode === "wasm" ? "wasm" : wsUrl;
   const handleRun = useCallback3(async () => {
     if (state.isExecuting || !state.code.trim()) return;
@@ -1666,7 +1679,9 @@ function ConsoleInner({ executor, historyKey, connection, theme = "light" }) {
         code: state.code,
         onChange: (code) => dispatch({ type: "SET_CODE", code }),
         onRun: handleRun,
-        theme
+        theme,
+        monacoThemeName: resolvedMonacoThemeName,
+        monacoThemeData: resolvedMonacoThemeData
       }
     ) })
   ] });
@@ -1683,12 +1698,12 @@ function ConsoleInner({ executor, historyKey, connection, theme = "light" }) {
   ] });
   return /* @__PURE__ */ jsx16("div", { className: `rdb-console${theme === "light" ? " rdb-theme-light" : ""}`, children: /* @__PURE__ */ jsx16("div", { className: "rdb-console__main", children: /* @__PURE__ */ jsx16(SplitPane, { top: editorPane, bottom: bottomPane, initialSplit: 45 }) }) });
 }
-function Console({ executor, initialCode, historyKey, connection, theme }) {
-  return /* @__PURE__ */ jsx16(ConsoleProvider, { initialCode, children: /* @__PURE__ */ jsx16(ConsoleInner, { executor, historyKey, connection, theme }) });
+function Console({ executor, initialCode, historyKey, connection, theme, monacoTheme }) {
+  return /* @__PURE__ */ jsx16(ConsoleProvider, { initialCode, children: /* @__PURE__ */ jsx16(ConsoleInner, { executor, historyKey, connection, theme, monacoTheme }) });
 }
 
 // src/components/Snippet.tsx
-import { useState as useState6, useCallback as useCallback4, useEffect as useEffect5, useRef as useRef5 } from "react";
+import { useState as useState6, useCallback as useCallback4, useEffect as useEffect5, useMemo as useMemo2, useRef as useRef5 } from "react";
 import Editor2 from "@monaco-editor/react";
 
 // src/components/SnippetResults.tsx
@@ -1726,14 +1741,15 @@ function SnippetResults({ data, columns, maxKeyLength }) {
 }
 
 // src/components/Snippet.tsx
-import { jsx as jsx18, jsxs as jsxs13 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx18, jsxs as jsxs13 } from "react/jsx-runtime";
 function Snippet({
   executor,
   initialCode,
   title = "reifydb playground",
   description,
   className,
-  theme = "light"
+  theme = "light",
+  monacoTheme
 }) {
   const [code, setCode] = useState6(initialCode);
   const [result, setResult] = useState6(null);
@@ -1741,22 +1757,34 @@ function Snippet({
   const [copied, setCopied] = useState6(false);
   const [isFullscreen, setIsFullscreen] = useState6(false);
   const editorRef = useRef5(null);
+  const containerRef = useRef5(null);
   const handleRunRef = useRef5(() => {
   });
+  const resolvedMonacoThemeName = useMemo2(() => {
+    if (!monacoTheme) return void 0;
+    if (typeof monacoTheme === "string") return monacoTheme;
+    return "rdb-custom";
+  }, [monacoTheme]);
+  const resolvedMonacoThemeData = useMemo2(() => {
+    if (!monacoTheme || typeof monacoTheme === "string") return void 0;
+    return monacoTheme;
+  }, [monacoTheme]);
+  const resolvedTheme = resolvedMonacoThemeName ?? (theme === "light" ? "premium-light" : "premium-dark");
   const lineCount = code.split("\n").length;
   const editorHeight = Math.max(lineCount * 20 + 16, 80);
+  const toggleFullscreen = useCallback4(() => {
+    if (!containerRef.current) return;
+    if (!document.fullscreenElement) {
+      containerRef.current.requestFullscreen();
+    } else {
+      document.exitFullscreen();
+    }
+  }, []);
   useEffect5(() => {
-    if (!isFullscreen) return;
-    const handleEsc = (e) => {
-      if (e.key === "Escape") setIsFullscreen(false);
-    };
-    document.addEventListener("keydown", handleEsc);
-    document.body.style.overflow = "hidden";
-    return () => {
-      document.removeEventListener("keydown", handleEsc);
-      document.body.style.overflow = "";
-    };
-  }, [isFullscreen]);
+    const onFsChange = () => setIsFullscreen(!!document.fullscreenElement);
+    document.addEventListener("fullscreenchange", onFsChange);
+    return () => document.removeEventListener("fullscreenchange", onFsChange);
+  }, []);
   const handleRun = useCallback4(async () => {
     if (isExecuting) return;
     setResult(null);
@@ -1799,10 +1827,13 @@ function Snippet({
   };
   const handleBeforeMount = (monaco) => {
     registerRqlLanguage(monaco);
+    if (resolvedMonacoThemeName && resolvedMonacoThemeData) {
+      monaco.editor.defineTheme(resolvedMonacoThemeName, resolvedMonacoThemeData);
+    }
   };
   const columns = result?.data && result.data.length > 0 ? Object.keys(result.data[0]) : [];
   const maxKeyLength = columns.length > 0 ? Math.max(...columns.map((c) => c.length)) : 0;
-  const content = /* @__PURE__ */ jsxs13("div", { className: `rdb-snippet${isFullscreen ? " rdb-snippet--fullscreen" : ""}${theme === "light" ? " rdb-theme-light" : ""}${className ? ` ${className}` : ""}`, children: [
+  const content = /* @__PURE__ */ jsxs13("div", { ref: containerRef, className: `rdb-snippet${isFullscreen ? " rdb-snippet--fullscreen" : ""}${theme === "light" ? " rdb-theme-light" : ""}${className ? ` ${className}` : ""}`, children: [
     /* @__PURE__ */ jsxs13("div", { className: "rdb-snippet__header", children: [
       /* @__PURE__ */ jsxs13("div", { className: "rdb-snippet__title", children: [
         /* @__PURE__ */ jsx18("span", { className: "rdb-snippet__title-marker", children: "$" }),
@@ -1813,10 +1844,26 @@ function Snippet({
         /* @__PURE__ */ jsx18(
           "button",
           {
-            onClick: () => setIsFullscreen(!isFullscreen),
+            onClick: toggleFullscreen,
             className: "rdb-snippet__action-btn",
             title: isFullscreen ? "Exit fullscreen" : "Fullscreen",
-            children: isFullscreen ? "[\xD7]" : "[[]]"
+            children: isFullscreen ? /* @__PURE__ */ jsxs13(Fragment4, { children: [
+              /* @__PURE__ */ jsxs13("svg", { className: "rdb-snippet__action-icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                /* @__PURE__ */ jsx18("polyline", { points: "4 14 10 14 10 20" }),
+                /* @__PURE__ */ jsx18("polyline", { points: "20 10 14 10 14 4" }),
+                /* @__PURE__ */ jsx18("line", { x1: "14", y1: "10", x2: "21", y2: "3" }),
+                /* @__PURE__ */ jsx18("line", { x1: "3", y1: "21", x2: "10", y2: "14" })
+              ] }),
+              "Exit"
+            ] }) : /* @__PURE__ */ jsxs13(Fragment4, { children: [
+              /* @__PURE__ */ jsxs13("svg", { className: "rdb-snippet__action-icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                /* @__PURE__ */ jsx18("polyline", { points: "15 3 21 3 21 9" }),
+                /* @__PURE__ */ jsx18("polyline", { points: "9 21 3 21 3 15" }),
+                /* @__PURE__ */ jsx18("line", { x1: "21", y1: "3", x2: "14", y2: "10" }),
+                /* @__PURE__ */ jsx18("line", { x1: "3", y1: "21", x2: "10", y2: "14" })
+              ] }),
+              "Expand"
+            ] })
           }
         ),
         /* @__PURE__ */ jsx18(
@@ -1825,16 +1872,31 @@ function Snippet({
             onClick: handleCopy,
             className: "rdb-snippet__action-btn",
             title: "Copy code",
-            children: copied ? "[ok]" : "[cp]"
+            children: copied ? /* @__PURE__ */ jsxs13(Fragment4, { children: [
+              /* @__PURE__ */ jsx18("svg", { className: "rdb-snippet__action-icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx18("polyline", { points: "20 6 9 17 4 12" }) }),
+              "Copied"
+            ] }) : /* @__PURE__ */ jsxs13(Fragment4, { children: [
+              /* @__PURE__ */ jsxs13("svg", { className: "rdb-snippet__action-icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                /* @__PURE__ */ jsx18("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2", ry: "2" }),
+                /* @__PURE__ */ jsx18("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" })
+              ] }),
+              "Copy"
+            ] })
           }
         ),
-        /* @__PURE__ */ jsx18(
+        /* @__PURE__ */ jsxs13(
           "button",
           {
             onClick: handleReset,
             className: "rdb-snippet__action-btn",
             title: "Reset code",
-            children: "[\u21BA]"
+            children: [
+              /* @__PURE__ */ jsxs13("svg", { className: "rdb-snippet__action-icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                /* @__PURE__ */ jsx18("polyline", { points: "1 4 1 10 7 10" }),
+                /* @__PURE__ */ jsx18("path", { d: "M3.51 15a9 9 0 1 0 2.13-9.36L1 10" })
+              ] }),
+              "Reset"
+            ]
           }
         )
       ] })
@@ -1843,17 +1905,16 @@ function Snippet({
       /* @__PURE__ */ jsx18("span", { className: "rdb-snippet__description-marker", children: "// " }),
       description
     ] }) }),
-    /* @__PURE__ */ jsx18(
-      "div",
+    isFullscreen ? /* @__PURE__ */ jsx18(
+      SplitPane,
       {
-        className: isFullscreen ? "rdb-snippet__editor--fullscreen" : "rdb-snippet__editor",
-        style: isFullscreen ? void 0 : { height: editorHeight },
-        children: /* @__PURE__ */ jsx18(
+        initialSplit: 50,
+        top: /* @__PURE__ */ jsx18("div", { className: "rdb-snippet__editor--fullscreen", children: /* @__PURE__ */ jsx18(
           Editor2,
           {
             height: "100%",
             language: "rql",
-            theme: theme === "light" ? "premium-light" : "premium-dark",
+            theme: resolvedTheme,
             value: code,
             onChange: (value) => setCode(value || ""),
             beforeMount: handleBeforeMount,
@@ -1866,10 +1927,7 @@ function Snippet({
               lineDecorationsWidth: 16,
               lineNumbersMinChars: 3,
               scrollBeyondLastLine: false,
-              scrollbar: {
-                vertical: isFullscreen ? "auto" : "hidden",
-                horizontal: isFullscreen ? "auto" : "hidden"
-              },
+              scrollbar: { vertical: "auto", horizontal: "auto" },
               overviewRulerLanes: 0,
               hideCursorInOverviewRuler: true,
               overviewRulerBorder: false,
@@ -1881,43 +1939,122 @@ function Snippet({
               automaticLayout: true
             }
           }
-        )
+        ) }),
+        bottom: /* @__PURE__ */ jsxs13("div", { className: "rdb-snippet__fullscreen-bottom", children: [
+          /* @__PURE__ */ jsxs13("div", { className: "rdb-snippet__toolbar", children: [
+            /* @__PURE__ */ jsx18("span", { className: "rdb-snippet__hint", children: isExecuting ? "$ running..." : "$ ctrl+enter to run" }),
+            /* @__PURE__ */ jsx18(
+              "button",
+              {
+                onClick: handleRun,
+                disabled: isExecuting,
+                className: `rdb-snippet__run-btn${isExecuting ? " rdb-snippet__run-btn--loading" : ""}`,
+                children: isExecuting ? "Running..." : "Run"
+              }
+            )
+          ] }),
+          result && /* @__PURE__ */ jsxs13("div", { className: "rdb-snippet__results rdb-snippet__results--fullscreen", children: [
+            /* @__PURE__ */ jsxs13("div", { className: "rdb-snippet__results-header", children: [
+              /* @__PURE__ */ jsx18("span", { children: result.error ? "--- error ---" : "--- output ---" }),
+              result.data && !result.error && /* @__PURE__ */ jsxs13("span", { children: [
+                "(",
+                result.data.length,
+                " row",
+                result.data.length !== 1 ? "s" : "",
+                ")"
+              ] })
+            ] }),
+            result.error && /* @__PURE__ */ jsx18("div", { className: "rdb-snippet__error", children: /* @__PURE__ */ jsxs13("pre", { className: "rdb-snippet__error-text", children: [
+              "ERR: ",
+              result.error
+            ] }) }),
+            result.data && result.data.length > 0 && !result.error && /* @__PURE__ */ jsx18(SnippetResults, { data: result.data, columns, maxKeyLength }),
+            result.data && result.data.length === 0 && !result.error && /* @__PURE__ */ jsx18("div", { className: "rdb-snippet__empty", children: "$ 0 rows returned." })
+          ] })
+        ] })
       }
-    ),
-    /* @__PURE__ */ jsxs13("div", { className: "rdb-snippet__toolbar", children: [
-      /* @__PURE__ */ jsx18("span", { className: "rdb-snippet__hint", children: isExecuting ? "$ running..." : "$ ctrl+enter to run" }),
-      /* @__PURE__ */ jsx18(
-        "button",
-        {
-          onClick: handleRun,
-          disabled: isExecuting,
-          className: `rdb-snippet__run-btn${isExecuting ? " rdb-snippet__run-btn--loading" : ""}`,
-          children: isExecuting ? "[running...]" : "[run]"
-        }
-      )
-    ] }),
-    result && /* @__PURE__ */ jsxs13("div", { className: `rdb-snippet__results${isFullscreen ? " rdb-snippet__results--fullscreen" : ""}`, children: [
-      /* @__PURE__ */ jsxs13("div", { className: "rdb-snippet__results-header", children: [
-        /* @__PURE__ */ jsx18("span", { children: result.error ? "--- error ---" : "--- output ---" }),
-        result.data && !result.error && /* @__PURE__ */ jsxs13("span", { children: [
-          "(",
-          result.data.length,
-          " row",
-          result.data.length !== 1 ? "s" : "",
-          ")"
+    ) : /* @__PURE__ */ jsxs13(Fragment4, { children: [
+      /* @__PURE__ */ jsxs13("div", { className: "rdb-snippet__editor-wrap", style: { height: editorHeight }, children: [
+        /* @__PURE__ */ jsx18(
+          Editor2,
+          {
+            height: "100%",
+            language: "rql",
+            theme: resolvedTheme,
+            value: code,
+            onChange: (value) => setCode(value || ""),
+            beforeMount: handleBeforeMount,
+            onMount: handleEditorDidMount,
+            options: {
+              minimap: { enabled: false },
+              lineNumbers: "on",
+              glyphMargin: false,
+              folding: false,
+              lineDecorationsWidth: 16,
+              lineNumbersMinChars: 3,
+              scrollBeyondLastLine: false,
+              scrollbar: { vertical: "hidden", horizontal: "hidden" },
+              overviewRulerLanes: 0,
+              hideCursorInOverviewRuler: true,
+              overviewRulerBorder: false,
+              renderLineHighlight: "none",
+              fontFamily: "'IBM Plex Mono', monospace",
+              fontSize: 13,
+              padding: { top: 8, bottom: 8 },
+              wordWrap: "on",
+              automaticLayout: true
+            }
+          }
+        ),
+        result && /* @__PURE__ */ jsxs13("div", { className: "rdb-snippet__results-overlay", children: [
+          /* @__PURE__ */ jsxs13("div", { className: "rdb-snippet__results-header", children: [
+            /* @__PURE__ */ jsx18("span", { children: result.error ? "--- error ---" : "--- output ---" }),
+            /* @__PURE__ */ jsxs13("div", { className: "rdb-snippet__results-header-right", children: [
+              result.data && !result.error && /* @__PURE__ */ jsxs13("span", { children: [
+                "(",
+                result.data.length,
+                " row",
+                result.data.length !== 1 ? "s" : "",
+                ")"
+              ] }),
+              /* @__PURE__ */ jsx18(
+                "button",
+                {
+                  onClick: () => setResult(null),
+                  className: "rdb-snippet__action-btn",
+                  title: "Close results",
+                  children: /* @__PURE__ */ jsxs13("svg", { className: "rdb-snippet__action-icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                    /* @__PURE__ */ jsx18("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+                    /* @__PURE__ */ jsx18("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+                  ] })
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs13("div", { className: "rdb-snippet__results-body", children: [
+            result.error && /* @__PURE__ */ jsx18("div", { className: "rdb-snippet__error", children: /* @__PURE__ */ jsxs13("pre", { className: "rdb-snippet__error-text", children: [
+              "ERR: ",
+              result.error
+            ] }) }),
+            result.data && result.data.length > 0 && !result.error && /* @__PURE__ */ jsx18(SnippetResults, { data: result.data, columns, maxKeyLength }),
+            result.data && result.data.length === 0 && !result.error && /* @__PURE__ */ jsx18("div", { className: "rdb-snippet__empty", children: "$ 0 rows returned." })
+          ] })
         ] })
       ] }),
-      result.error && /* @__PURE__ */ jsx18("div", { className: "rdb-snippet__error", children: /* @__PURE__ */ jsxs13("pre", { className: "rdb-snippet__error-text", children: [
-        "ERR: ",
-        result.error
-      ] }) }),
-      result.data && result.data.length > 0 && !result.error && /* @__PURE__ */ jsx18(SnippetResults, { data: result.data, columns, maxKeyLength }),
-      result.data && result.data.length === 0 && !result.error && /* @__PURE__ */ jsx18("div", { className: "rdb-snippet__empty", children: "$ 0 rows returned." })
+      /* @__PURE__ */ jsxs13("div", { className: "rdb-snippet__toolbar", children: [
+        /* @__PURE__ */ jsx18("span", { className: "rdb-snippet__hint", children: isExecuting ? "$ running..." : "$ ctrl+enter to run" }),
+        /* @__PURE__ */ jsx18(
+          "button",
+          {
+            onClick: handleRun,
+            disabled: isExecuting,
+            className: `rdb-snippet__run-btn${isExecuting ? " rdb-snippet__run-btn--loading" : ""}`,
+            children: isExecuting ? "Running..." : "Run"
+          }
+        )
+      ] })
     ] })
   ] });
-  if (isFullscreen) {
-    return /* @__PURE__ */ jsx18("div", { className: "rdb-snippet__overlay", children: /* @__PURE__ */ jsx18("div", { className: "rdb-snippet__overlay-inner", children: content }) });
-  }
   return content;
 }