@reifydb/console 0.3.0

package/dist/index.js

@@ -0,0 +1,1675 @@
+// src/components/Console.tsx
+import { useCallback as useCallback3, useEffect as useEffect4, useRef as useRef4, useState as useState5 } from "react";
+import { Client } from "@reifydb/client";
+
+// src/executor/ws-executor.ts
+var WsExecutor = class {
+  client;
+  constructor(client) {
+    this.client = client;
+  }
+  async execute(statement) {
+    const trimmed = statement.trim();
+    const query = trimmed.endsWith(";") ? trimmed.slice(0, -1).trim() : trimmed;
+    if (!query) {
+      return { success: true, data: [], executionTime: 0 };
+    }
+    const startTime = performance.now();
+    try {
+      const frames = await this.client.admin(query, null, []);
+      const executionTime = Math.round(performance.now() - startTime);
+      const results = frames[0] ?? [];
+      const data = results.map((row) => {
+        if (row && typeof row === "object") {
+          const plainRow = {};
+          for (const [key, value] of Object.entries(row)) {
+            plainRow[key] = value;
+          }
+          return plainRow;
+        }
+        return row;
+      });
+      return { success: true, data, executionTime };
+    } catch (error) {
+      const executionTime = Math.round(performance.now() - startTime);
+      let errorMessage;
+      if (error && typeof error === "object" && "diagnostic" in error) {
+        const diagnostic = error.diagnostic;
+        errorMessage = diagnostic.message;
+      } else if (error instanceof Error) {
+        errorMessage = error.message;
+      } else {
+        errorMessage = String(error);
+      }
+      return { success: false, error: errorMessage, executionTime };
+    }
+  }
+};
+
+// src/state/use-console-store.tsx
+import { createContext, useContext, useReducer } from "react";
+
+// src/state/console-store.ts
+var nextHistoryId = 1;
+function consoleReducer(state, action) {
+  switch (action.type) {
+    case "SET_CODE":
+      return { ...state, code: action.code };
+    case "EXECUTE_START":
+      return { ...state, isExecuting: true, result: null };
+    case "EXECUTE_SUCCESS": {
+      const entry = {
+        id: String(nextHistoryId++),
+        query: action.query,
+        timestamp: Date.now(),
+        success: true,
+        rowCount: action.result.data?.length,
+        executionTime: action.result.executionTime
+      };
+      return {
+        ...state,
+        isExecuting: false,
+        result: action.result,
+        history: [entry, ...state.history],
+        activeTab: "results"
+      };
+    }
+    case "EXECUTE_ERROR": {
+      const entry = {
+        id: String(nextHistoryId++),
+        query: action.query,
+        timestamp: Date.now(),
+        success: false,
+        executionTime: action.result.executionTime
+      };
+      return {
+        ...state,
+        isExecuting: false,
+        result: action.result,
+        history: [entry, ...state.history],
+        activeTab: "results"
+      };
+    }
+    case "CLEAR_RESULTS":
+      return { ...state, result: null };
+    case "SET_TAB":
+      return { ...state, activeTab: action.tab };
+    case "LOAD_HISTORY":
+      return { ...state, history: action.entries };
+    case "CLEAR_HISTORY":
+      return { ...state, history: [] };
+    case "LOAD_QUERY":
+      return { ...state, code: action.code, activeTab: "results" };
+    default:
+      return state;
+  }
+}
+var initialConsoleState = {
+  code: "",
+  isExecuting: false,
+  result: null,
+  history: [],
+  activeTab: "results"
+};
+
+// src/state/use-console-store.tsx
+import { jsx } from "react/jsx-runtime";
+var ConsoleContext = createContext(null);
+function ConsoleProvider({ children, initialCode }) {
+  const [state, dispatch] = useReducer(consoleReducer, {
+    ...initialConsoleState,
+    code: initialCode ?? ""
+  });
+  return /* @__PURE__ */ jsx(ConsoleContext.Provider, { value: { state, dispatch }, children });
+}
+function useConsoleStore() {
+  const ctx = useContext(ConsoleContext);
+  if (!ctx) {
+    throw new Error("useConsoleStore must be used within a ConsoleProvider");
+  }
+  return ctx;
+}
+
+// src/state/history.ts
+var DEFAULT_KEY = "reifydb-console-history";
+var MAX_ENTRIES = 500;
+function loadHistory(key = DEFAULT_KEY) {
+  try {
+    const raw = localStorage.getItem(key);
+    if (!raw) return [];
+    const entries = JSON.parse(raw);
+    return Array.isArray(entries) ? entries : [];
+  } catch {
+    return [];
+  }
+}
+function saveHistory(entries, key = DEFAULT_KEY) {
+  try {
+    const trimmed = entries.slice(0, MAX_ENTRIES);
+    localStorage.setItem(key, JSON.stringify(trimmed));
+  } catch {
+  }
+}
+
+// src/components/layout/SplitPane.tsx
+import { useState, useCallback, useRef, useEffect } from "react";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+function SplitPane({ top, bottom, initialSplit = 50 }) {
+  const [split, setSplit] = useState(initialSplit);
+  const containerRef = useRef(null);
+  const dragging = useRef(false);
+  const onMouseDown = useCallback(() => {
+    dragging.current = true;
+    document.body.style.cursor = "row-resize";
+    document.body.style.userSelect = "none";
+  }, []);
+  useEffect(() => {
+    const onMouseMove = (e) => {
+      if (!dragging.current || !containerRef.current) return;
+      const rect = containerRef.current.getBoundingClientRect();
+      const pct = (e.clientY - rect.top) / rect.height * 100;
+      setSplit(Math.min(Math.max(pct, 15), 85));
+    };
+    const onMouseUp = () => {
+      if (dragging.current) {
+        dragging.current = false;
+        document.body.style.cursor = "";
+        document.body.style.userSelect = "";
+      }
+    };
+    document.addEventListener("mousemove", onMouseMove);
+    document.addEventListener("mouseup", onMouseUp);
+    return () => {
+      document.removeEventListener("mousemove", onMouseMove);
+      document.removeEventListener("mouseup", onMouseUp);
+    };
+  }, []);
+  return /* @__PURE__ */ jsxs("div", { className: "rdb-split", ref: containerRef, children: [
+    /* @__PURE__ */ jsx2("div", { className: "rdb-split__top", style: { height: `${split}%` }, children: top }),
+    /* @__PURE__ */ jsx2("div", { className: "rdb-split__handle", onMouseDown }),
+    /* @__PURE__ */ jsx2("div", { className: "rdb-split__bottom", children: bottom })
+  ] });
+}
+
+// src/components/layout/TabBar.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+function TabBar({ activeTab, tabs, onTabChange }) {
+  return /* @__PURE__ */ jsx3("div", { className: "rdb-tabs", children: tabs.map((tab) => /* @__PURE__ */ jsx3(
+    "button",
+    {
+      className: `rdb-tabs__tab${activeTab === tab.id ? " rdb-tabs__tab--active" : ""}`,
+      onClick: () => onTabChange(tab.id),
+      children: tab.label
+    },
+    tab.id
+  )) });
+}
+
+// src/components/editor/QueryEditor.tsx
+import { useRef as useRef2 } from "react";
+import Editor from "@monaco-editor/react";
+
+// src/monaco/rql-language.ts
+var TRANSFORMS = [
+  "aggregate",
+  "append",
+  "create",
+  "derive",
+  "deferred",
+  "distinct",
+  "extend",
+  "filter",
+  "from",
+  "group",
+  "insert",
+  "join",
+  "map",
+  "sort",
+  "take",
+  "union",
+  "view",
+  "with"
+];
+var MODULES = ["date", "math", "text"];
+var BUILTIN_FUNCTIONS = ["case"];
+var KEYWORDS = ["set", "as", "on", "by"];
+var LITERALS = ["none", "true", "false"];
+var rqlLanguageDefinition = {
+  defaultToken: "invalid",
+  ignoreCase: true,
+  keywords: [...TRANSFORMS, ...MODULES, ...BUILTIN_FUNCTIONS, ...KEYWORDS, ...LITERALS],
+  operators: ["+", "-", "*", "/", "//", "%", "=", "==", "!=", "->", "=>", ">", "<", ">=", "<=", "~=", "&&", "||", "??"],
+  tokenizer: {
+    root: [
+      // Comments
+      [/#.*/, "comment"],
+      // Named arguments
+      [/(\w+)\s*:/, "key"],
+      // Identifiers and keywords (case insensitive)
+      [
+        /[a-zA-Z_$][\w$]*/,
+        {
+          cases: {
+            "@keywords": "keyword",
+            "@default": "identifier"
+          }
+        }
+      ],
+      // Whitespace
+      { include: "@whitespace" },
+      // Brackets
+      [/[{}()[\]]/, "@brackets"],
+      // Numbers with underscores support
+      [/[+-]?(?:[\d_]+(?:\.[\d_]+)?|\.[\d_]+)/, "number"],
+      // Strings
+      [/"([^"\\]|\\.)*$/, "string.invalid"],
+      [/"/, { token: "string.quote", bracket: "@open", next: "@string" }],
+      // Single-quoted strings
+      [/'([^'\\]|\\.)*$/, "string.invalid"],
+      [/'/, { token: "string.quote", bracket: "@open", next: "@singlestring" }],
+      // Operators
+      [/[+\-*/%]/, "operator"],
+      [/\/\//, "operator"],
+      [/==|!=|->|=>|>=|<=|~=|>|</, "operator"],
+      [/&&|\|\||\?\?/, "operator"]
+    ],
+    string: [
+      [/[^\\"]+/, "string"],
+      [/\\./, "string.escape"],
+      [/"/, { token: "string.quote", bracket: "@close", next: "@pop" }]
+    ],
+    singlestring: [
+      [/[^\\']+/, "string"],
+      [/\\./, "string.escape"],
+      [/'/, { token: "string.quote", bracket: "@close", next: "@pop" }]
+    ],
+    whitespace: [
+      [/[ \t\r\n]+/, "white"],
+      [/\/\*/, "comment", "@comment"],
+      [/\/\/.*$/, "comment"]
+    ],
+    comment: [
+      [/[^/*]+/, "comment"],
+      [/\/\*/, "comment", "@push"],
+      [/\*\//, "comment", "@pop"],
+      [/[/*]/, "comment"]
+    ]
+  }
+};
+var rqlLanguageConfiguration = {
+  comments: {
+    lineComment: "#",
+    blockComment: ["/*", "*/"]
+  },
+  brackets: [
+    ["{", "}"],
+    ["[", "]"],
+    ["(", ")"]
+  ],
+  autoClosingPairs: [
+    { open: "{", close: "}" },
+    { open: "[", close: "]" },
+    { open: "(", close: ")" },
+    { open: '"', close: '"', notIn: ["string"] },
+    { open: "'", close: "'", notIn: ["string"] }
+  ],
+  surroundingPairs: [
+    { open: "{", close: "}" },
+    { open: "[", close: "]" },
+    { open: "(", close: ")" },
+    { open: '"', close: '"' },
+    { open: "'", close: "'" }
+  ],
+  folding: {
+    offSide: true
+  }
+};
+
+// src/monaco/themes.ts
+var brutalistLightTheme = {
+  base: "vs",
+  inherit: true,
+  rules: [
+    { token: "keyword", foreground: "0D9488", 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" }
+  ],
+  colors: {
+    "editor.background": "#FFFFFF",
+    "editor.foreground": "#1A1A1A",
+    "editor.lineHighlightBackground": "#F8F8F7",
+    "editor.selectionBackground": "#A7F3D0",
+    "editorCursor.foreground": "#14B8A6",
+    "editorLineNumber.foreground": "#9CA3AF",
+    "editorLineNumber.activeForeground": "#383838"
+  }
+};
+var brutalistDarkTheme = {
+  base: "vs-dark",
+  inherit: true,
+  rules: [
+    { token: "keyword", foreground: "14B8A6", fontStyle: "bold" },
+    { token: "string", foreground: "4ADE80" },
+    { token: "string.quote", foreground: "4ADE80" },
+    { token: "number", foreground: "F87171", fontStyle: "bold" },
+    { token: "comment", foreground: "9CA3AF", fontStyle: "italic" },
+    { token: "operator", foreground: "E5E7EB" },
+    { token: "identifier", foreground: "F3F4F6" },
+    { token: "key", foreground: "60A5FA", fontStyle: "bold" }
+  ],
+  colors: {
+    "editor.background": "#1A1A1A",
+    "editor.foreground": "#F3F4F6",
+    "editor.lineHighlightBackground": "#2A2A2A",
+    "editor.selectionBackground": "#1A3A36",
+    "editorCursor.foreground": "#14B8A6",
+    "editorLineNumber.foreground": "#6B7280",
+    "editorLineNumber.activeForeground": "#E5E7EB"
+  }
+};
+var premiumLightTheme = {
+  base: "vs",
+  inherit: true,
+  rules: [
+    { token: "keyword", foreground: "0D9488", 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" }
+  ],
+  colors: {
+    "editor.background": "#FFFFFF",
+    "editor.foreground": "#1A1A1A",
+    "editor.lineHighlightBackground": "#F5F5F5",
+    "editor.selectionBackground": "#99F6E4",
+    "editorCursor.foreground": "#0D9488",
+    "editorLineNumber.foreground": "#9CA3AF",
+    "editorLineNumber.activeForeground": "#525252"
+  }
+};
+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" }
+  ],
+  colors: {
+    "editor.background": "#1A1A1A",
+    "editor.foreground": "#E5E5E5",
+    "editor.lineHighlightBackground": "#252525",
+    "editor.selectionBackground": "#14B8A640",
+    "editorCursor.foreground": "#14B8A6",
+    "editorLineNumber.foreground": "#525252",
+    "editorLineNumber.activeForeground": "#A3A3A3"
+  }
+};
+
+// src/monaco/register.ts
+var registered = false;
+function registerRqlLanguage(monaco) {
+  if (registered) return;
+  monaco.languages.register({ id: "rql" });
+  monaco.languages.setMonarchTokensProvider("rql", rqlLanguageDefinition);
+  monaco.languages.setLanguageConfiguration("rql", rqlLanguageConfiguration);
+  monaco.editor.defineTheme("premium-dark", premiumDarkTheme);
+  monaco.editor.defineTheme("premium-light", premiumLightTheme);
+  monaco.editor.defineTheme("brutalist-dark", brutalistDarkTheme);
+  monaco.editor.defineTheme("brutalist-light", brutalistLightTheme);
+  registered = true;
+}
+
+// src/components/editor/QueryEditor.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+function QueryEditor({ code, onChange, onRun, theme = "light" }) {
+  const editorRef = useRef2(null);
+  const onRunRef = useRef2(onRun);
+  onRunRef.current = onRun;
+  const handleMount = (editor, monaco) => {
+    editorRef.current = editor;
+    registerRqlLanguage(monaco);
+    editor.addAction({
+      id: "run-query",
+      label: "Run Query",
+      keybindings: [monaco.KeyMod.CtrlCmd | monaco.KeyCode.Enter],
+      run: () => {
+        onRunRef.current();
+      }
+    });
+  };
+  const handleBeforeMount = (monaco) => {
+    registerRqlLanguage(monaco);
+  };
+  return /* @__PURE__ */ jsx4(
+    Editor,
+    {
+      height: "100%",
+      language: "rql",
+      theme: theme === "light" ? "premium-light" : "premium-dark",
+      value: code,
+      onChange: (value) => onChange(value || ""),
+      beforeMount: handleBeforeMount,
+      onMount: handleMount,
+      options: {
+        minimap: { enabled: false },
+        lineNumbers: "on",
+        glyphMargin: false,
+        folding: true,
+        lineDecorationsWidth: 16,
+        lineNumbersMinChars: 3,
+        scrollBeyondLastLine: false,
+        scrollbar: { vertical: "auto", horizontal: "auto" },
+        overviewRulerLanes: 0,
+        hideCursorInOverviewRuler: true,
+        overviewRulerBorder: false,
+        renderLineHighlight: "line",
+        fontFamily: "'IBM Plex Mono', monospace",
+        fontSize: 13,
+        padding: { top: 8, bottom: 8 },
+        wordWrap: "on",
+        automaticLayout: true
+      }
+    }
+  );
+}
+
+// src/components/editor/EditorToolbar.tsx
+import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
+function EditorToolbar({
+  onRun,
+  onClear,
+  isExecuting,
+  connectionLabel,
+  connectionStatus,
+  connectionLocked,
+  onToggleConnectionPanel
+}) {
+  return /* @__PURE__ */ jsxs2("div", { className: "rdb-editor-toolbar", children: [
+    /* @__PURE__ */ jsxs2("div", { className: "rdb-editor-toolbar__left", children: [
+      connectionLocked ? /* @__PURE__ */ jsxs2("span", { className: "rdb-editor-toolbar__connection rdb-editor-toolbar__connection--locked", children: [
+        /* @__PURE__ */ jsx5("span", { className: `rdb-editor-toolbar__connection-dot rdb-editor-toolbar__connection-dot--${connectionStatus}`, children: "\u25CF" }),
+        /* @__PURE__ */ jsxs2("span", { children: [
+          "[",
+          connectionLabel,
+          "]"
+        ] })
+      ] }) : /* @__PURE__ */ jsxs2(
+        "button",
+        {
+          className: "rdb-editor-toolbar__connection",
+          onClick: onToggleConnectionPanel,
+          children: [
+            /* @__PURE__ */ jsx5("span", { className: `rdb-editor-toolbar__connection-dot rdb-editor-toolbar__connection-dot--${connectionStatus}`, children: "\u25CF" }),
+            /* @__PURE__ */ jsxs2("span", { children: [
+              "[",
+              connectionLabel,
+              "]"
+            ] })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx5("span", { className: "rdb-editor-toolbar__hint", children: "ctrl+enter to run" })
+    ] }),
+    /* @__PURE__ */ jsxs2("div", { className: "rdb-editor-toolbar__actions", children: [
+      /* @__PURE__ */ jsx5(
+        "button",
+        {
+          className: "rdb-editor-toolbar__btn rdb-editor-toolbar__btn--secondary",
+          onClick: onClear,
+          disabled: isExecuting,
+          children: "[clear]"
+        }
+      ),
+      /* @__PURE__ */ jsx5(
+        "button",
+        {
+          className: "rdb-editor-toolbar__btn",
+          onClick: onRun,
+          disabled: isExecuting,
+          children: isExecuting ? "[running...]" : "[run]"
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/format/value.ts
+function getValueStyle(value) {
+  if (value === null || value === void 0) {
+    return { color: "var(--rdb-color-muted)", italic: true };
+  }
+  const t = value.type;
+  if (typeof t === "string") {
+    switch (t) {
+      case "None":
+        return { color: "var(--rdb-color-muted)", italic: true };
+      case "Boolean":
+        return { color: "var(--rdb-color-value-boolean)" };
+      case "Int1":
+      case "Int2":
+      case "Int4":
+      case "Int8":
+      case "Int16":
+      case "Uint1":
+      case "Uint2":
+      case "Uint4":
+      case "Uint8":
+      case "Uint16":
+      case "Float4":
+      case "Float8":
+      case "Decimal":
+        return { color: "var(--rdb-color-value-number)" };
+      case "Date":
+      case "DateTime":
+      case "Time":
+      case "Duration":
+        return { color: "var(--rdb-color-value-date)" };
+      case "Uuid4":
+      case "Uuid7":
+      case "IdentityId":
+        return { color: "var(--rdb-color-value-uuid)" };
+      case "Utf8":
+        return { color: "var(--rdb-color-value-string)" };
+      case "Blob":
+        return { color: "var(--rdb-color-secondary)" };
+    }
+  }
+  switch (typeof value) {
+    case "number":
+    case "bigint":
+      return { color: "var(--rdb-color-value-number)" };
+    case "boolean":
+      return { color: "var(--rdb-color-value-boolean)" };
+    case "string":
+      return { color: "var(--rdb-color-value-string)" };
+    default:
+      return {};
+  }
+}
+function formatValue(value) {
+  if (value === null || value === void 0) {
+    return "none";
+  }
+  if (typeof value === "object" && typeof value.type === "string") {
+    return value.toString();
+  }
+  if (typeof value === "bigint") {
+    return value.toString();
+  }
+  if (typeof value === "object") {
+    return JSON.stringify(value);
+  }
+  return String(value);
+}
+
+// src/components/results/ResultsTable.tsx
+import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
+function ResultsTable({ data }) {
+  if (data.length === 0) return null;
+  const columns = Object.keys(data[0]);
+  return /* @__PURE__ */ jsx6("div", { className: "rdb-results", children: /* @__PURE__ */ jsxs3("table", { className: "rdb-results__table", children: [
+    /* @__PURE__ */ jsx6("thead", { children: /* @__PURE__ */ jsx6("tr", { children: columns.map((col) => /* @__PURE__ */ jsx6("th", { children: col }, col)) }) }),
+    /* @__PURE__ */ jsx6("tbody", { children: data.map((row, i) => /* @__PURE__ */ jsx6("tr", { children: columns.map((col) => {
+      const vs = getValueStyle(row[col]);
+      return /* @__PURE__ */ jsx6(
+        "td",
+        {
+          style: {
+            color: vs.color,
+            fontStyle: vs.italic ? "italic" : void 0
+          },
+          children: formatValue(row[col])
+        },
+        col
+      );
+    }) }, i)) })
+  ] }) });
+}
+
+// src/components/results/ResultsError.tsx
+import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
+function ResultsError({ message }) {
+  return /* @__PURE__ */ jsx7("div", { className: "rdb-results__error", children: /* @__PURE__ */ jsxs4("pre", { children: [
+    "ERR: ",
+    message
+  ] }) });
+}
+
+// src/components/results/ResultsEmpty.tsx
+import { jsx as jsx8 } from "react/jsx-runtime";
+function ResultsEmpty() {
+  return /* @__PURE__ */ jsx8("div", { className: "rdb-results__empty", children: "$ 0 rows returned." });
+}
+
+// src/components/results/ResultsStatusBar.tsx
+import { useCallback as useCallback2 } from "react";
+import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
+function ResultsStatusBar({ rowCount, executionTime, data }) {
+  const copyAsCsv = useCallback2(() => {
+    if (!data || data.length === 0) return;
+    const columns = Object.keys(data[0]);
+    const header = columns.join(",");
+    const rows = data.map(
+      (row) => columns.map((col) => {
+        const val = formatValue(row[col]);
+        return val.includes(",") || val.includes('"') || val.includes("\n") ? `"${val.replace(/"/g, '""')}"` : val;
+      }).join(",")
+    );
+    navigator.clipboard.writeText([header, ...rows].join("\n"));
+  }, [data]);
+  const copyAsJson = useCallback2(() => {
+    if (!data || data.length === 0) return;
+    const serialized = data.map((row) => {
+      const obj = {};
+      for (const [key, val] of Object.entries(row)) {
+        obj[key] = formatValue(val);
+      }
+      return obj;
+    });
+    navigator.clipboard.writeText(JSON.stringify(serialized, null, 2));
+  }, [data]);
+  return /* @__PURE__ */ jsxs5("div", { className: "rdb-status-bar", children: [
+    /* @__PURE__ */ jsxs5("div", { className: "rdb-status-bar__info", children: [
+      /* @__PURE__ */ jsxs5("span", { children: [
+        rowCount,
+        " row",
+        rowCount !== 1 ? "s" : ""
+      ] }),
+      /* @__PURE__ */ jsxs5("span", { children: [
+        "(",
+        executionTime,
+        "ms)"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs5("div", { className: "rdb-status-bar__actions", children: [
+      /* @__PURE__ */ jsx9("button", { className: "rdb-status-bar__btn", onClick: copyAsCsv, title: "Copy as CSV", children: "[CSV]" }),
+      /* @__PURE__ */ jsx9("button", { className: "rdb-status-bar__btn", onClick: copyAsJson, title: "Copy as JSON", children: "[JSON]" })
+    ] })
+  ] });
+}
+
+// src/components/results/ResultsPanel.tsx
+import { Fragment, jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
+function ResultsPanel({ result }) {
+  if (!result) {
+    return /* @__PURE__ */ jsx10("div", { className: "rdb-results__empty", children: "$ run a query to see results" });
+  }
+  if (!result.success && result.error) {
+    return /* @__PURE__ */ jsx10(ResultsError, { message: result.error });
+  }
+  const data = result.data ?? [];
+  if (data.length === 0) {
+    return /* @__PURE__ */ jsx10(ResultsEmpty, {});
+  }
+  return /* @__PURE__ */ jsxs6(Fragment, { children: [
+    /* @__PURE__ */ jsx10(ResultsTable, { data }),
+    /* @__PURE__ */ jsx10(
+      ResultsStatusBar,
+      {
+        rowCount: data.length,
+        executionTime: result.executionTime,
+        data
+      }
+    )
+  ] });
+}
+
+// src/components/schema/SchemaBrowser.tsx
+import { useEffect as useEffect2, useState as useState3 } from "react";
+
+// src/components/schema/SchemaNode.tsx
+import { useState as useState2 } from "react";
+import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
+function SchemaNode({ label, labelClass, type, typeClass, children }) {
+  const [expanded, setExpanded] = useState2(false);
+  const hasChildren = !!children;
+  return /* @__PURE__ */ jsxs7("div", { className: "rdb-schema__node", children: [
+    /* @__PURE__ */ jsxs7(
+      "div",
+      {
+        className: "rdb-schema__node-header",
+        onClick: () => hasChildren && setExpanded(!expanded),
+        children: [
+          hasChildren && /* @__PURE__ */ jsx11("span", { className: "rdb-schema__node-toggle", children: expanded ? "\u25BE" : "\u25B8" }),
+          !hasChildren && /* @__PURE__ */ jsx11("span", { className: "rdb-schema__node-toggle" }),
+          type && /* @__PURE__ */ jsx11("span", { className: typeClass ? "rdb-schema__node-type " + typeClass : "rdb-schema__node-type", children: type }),
+          /* @__PURE__ */ jsx11("span", { className: `rdb-schema__node-label${labelClass ? ` ${labelClass}` : ""}`, children: label })
+        ]
+      }
+    ),
+    expanded && hasChildren && /* @__PURE__ */ jsx11("div", { className: "rdb-schema__node-children", children })
+  ] });
+}
+
+// src/components/schema/SchemaBrowser.tsx
+import { Fragment as Fragment2, jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
+var TYPE_NAMES = {
+  1: "Float4",
+  2: "Float8",
+  3: "Int1",
+  4: "Int2",
+  5: "Int4",
+  6: "Int8",
+  7: "Int16",
+  8: "Utf8",
+  9: "Uint1",
+  10: "Uint2",
+  11: "Uint4",
+  12: "Uint8",
+  13: "Uint16",
+  14: "Boolean",
+  15: "Date",
+  16: "DateTime",
+  17: "Time",
+  18: "Duration",
+  19: "IdentityId",
+  20: "Uuid4",
+  21: "Uuid7",
+  22: "Blob",
+  23: "Int",
+  24: "Decimal",
+  25: "Uint",
+  26: "Any",
+  27: "DictionaryId",
+  28: "List"
+};
+var SOURCE_TYPE_TABLE = 1;
+var SOURCE_TYPE_VIEW = 2;
+var SOURCE_TYPE_VTABLE = 3;
+var SOURCE_TYPE_RINGBUFFER = 4;
+function resolveTypeName(typeId) {
+  const isOptional = (typeId & 128) !== 0;
+  const baseId = typeId & 127;
+  const name = TYPE_NAMES[baseId] ?? `Unknown(${baseId})`;
+  return isOptional ? `${name}?` : name;
+}
+function extractNum(value) {
+  if (typeof value === "number") return value;
+  if (typeof value === "bigint") return Number(value);
+  if (value && typeof value === "object" && typeof value.valueOf === "function") {
+    const v = value.valueOf();
+    if (typeof v === "number") return v;
+    if (typeof v === "bigint") return Number(v);
+  }
+  return Number(value);
+}
+function extractStr(value) {
+  if (typeof value === "string") return value;
+  if (value && typeof value === "object" && typeof value.valueOf === "function") {
+    const v = value.valueOf();
+    if (typeof v === "string") return v;
+  }
+  return String(value);
+}
+async function queryRows(executor, query) {
+  const result = await executor.execute(query);
+  return result.success && result.data ? result.data : [];
+}
+function typeColorClass(typeName) {
+  const base = typeName.replace(/\?$/, "");
+  switch (base) {
+    case "Float4":
+    case "Float8":
+    case "Int1":
+    case "Int2":
+    case "Int4":
+    case "Int8":
+    case "Int16":
+    case "Uint1":
+    case "Uint2":
+    case "Uint4":
+    case "Uint8":
+    case "Uint16":
+    case "Int":
+    case "Uint":
+    case "Decimal":
+      return "rdb-schema__node-type--numeric";
+    case "Utf8":
+    case "Blob":
+      return "rdb-schema__node-type--string";
+    case "Boolean":
+      return "rdb-schema__node-type--boolean";
+    case "Date":
+    case "DateTime":
+    case "Time":
+    case "Duration":
+      return "rdb-schema__node-type--temporal";
+    case "IdentityId":
+    case "Uuid4":
+    case "Uuid7":
+    case "DictionaryId":
+      return "rdb-schema__node-type--identity";
+    default:
+      return void 0;
+  }
+}
+var CATEGORY_GROUPS = [
+  { key: "table", label: "Tables" },
+  { key: "vtable", label: "Virtual Tables" },
+  { key: "view", label: "Views" },
+  { key: "ringbuffer", label: "Ring Buffers" },
+  { key: "procedure", label: "Procedures" },
+  { key: "handler", label: "Handlers" },
+  { key: "enum", label: "Enums" },
+  { key: "event", label: "Events" },
+  { key: "dictionary", label: "Dictionaries" },
+  { key: "migration", label: "Migrations" }
+];
+function SchemaBrowser({ executor }) {
+  const [namespaces, setNamespaces] = useState3([]);
+  const [loading, setLoading] = useState3(true);
+  const loadSchema = async () => {
+    setLoading(true);
+    try {
+      const [nsRows, tableRows, viewRows, vtableRows, rbRows, colRows, vtableColRows, procRows, handlerRows, enumRows, eventRows, dictRows, migrationRows] = await Promise.all([
+        queryRows(executor, "FROM system::namespaces MAP { id, name }"),
+        queryRows(executor, "FROM system::tables MAP { id, namespace_id, name }"),
+        queryRows(executor, "FROM system::views MAP { id, namespace_id, name, kind }"),
+        queryRows(executor, "FROM system::virtual_tables MAP { id, namespace_id, name }"),
+        queryRows(executor, "FROM system::ringbuffers MAP { id, namespace_id, name }"),
+        queryRows(executor, "FROM system::columns MAP { source_id, source_type, name, type, position }"),
+        queryRows(executor, "FROM system::virtual_table_columns MAP { vtable_id, name, type, position }"),
+        queryRows(executor, "FROM system::procedures MAP { id, namespace_id, name }"),
+        queryRows(executor, "FROM system::handlers MAP { id, namespace_id, name }"),
+        queryRows(executor, "FROM system::enums MAP { id, namespace_id, name }"),
+        queryRows(executor, "FROM system::events MAP { id, namespace_id, name }"),
+        queryRows(executor, "FROM system::dictionaries MAP { id, namespace_id, name }"),
+        queryRows(executor, "FROM system::migrations MAP { name }")
+      ]);
+      const nsMap = /* @__PURE__ */ new Map();
+      for (const row of nsRows) {
+        nsMap.set(extractNum(row.id), extractStr(row.name));
+      }
+      const columnsBySource = /* @__PURE__ */ new Map();
+      const rawColumns = /* @__PURE__ */ new Map();
+      for (const row of colRows) {
+        const key = `${extractNum(row.source_type)}:${extractNum(row.source_id)}`;
+        if (!rawColumns.has(key)) rawColumns.set(key, []);
+        rawColumns.get(key).push({
+          name: extractStr(row.name),
+          type: resolveTypeName(extractNum(row.type)),
+          position: extractNum(row.position)
+        });
+      }
+      for (const row of vtableColRows) {
+        const key = `${SOURCE_TYPE_VTABLE}:${extractNum(row.vtable_id)}`;
+        if (!rawColumns.has(key)) rawColumns.set(key, []);
+        rawColumns.get(key).push({
+          name: extractStr(row.name),
+          type: resolveTypeName(extractNum(row.type)),
+          position: extractNum(row.position)
+        });
+      }
+      for (const [key, cols] of rawColumns) {
+        cols.sort((a, b) => a.position - b.position);
+        columnsBySource.set(key, cols.map((c) => ({ name: c.name, type: c.type })));
+      }
+      const nsSources = /* @__PURE__ */ new Map();
+      const addSource = (id, nsId, name, category, sourceType) => {
+        if (!nsSources.has(nsId)) nsSources.set(nsId, []);
+        const columns = columnsBySource.get(`${sourceType}:${id}`) ?? [];
+        nsSources.get(nsId).push({ name: extractStr(name), category, columns });
+      };
+      for (const row of tableRows) {
+        addSource(extractNum(row.id), extractNum(row.namespace_id), extractStr(row.name), "table", SOURCE_TYPE_TABLE);
+      }
+      for (const row of viewRows) {
+        addSource(extractNum(row.id), extractNum(row.namespace_id), extractStr(row.name), "view", SOURCE_TYPE_VIEW);
+      }
+      for (const row of vtableRows) {
+        addSource(extractNum(row.id), extractNum(row.namespace_id), extractStr(row.name), "vtable", SOURCE_TYPE_VTABLE);
+      }
+      for (const row of rbRows) {
+        addSource(extractNum(row.id), extractNum(row.namespace_id), extractStr(row.name), "ringbuffer", SOURCE_TYPE_RINGBUFFER);
+      }
+      const addLeafSource = (nsId, name, category) => {
+        if (!nsSources.has(nsId)) nsSources.set(nsId, []);
+        nsSources.get(nsId).push({ name: extractStr(name), category, columns: [] });
+      };
+      for (const row of procRows) {
+        addLeafSource(extractNum(row.namespace_id), extractStr(row.name), "procedure");
+      }
+      for (const row of handlerRows) {
+        addLeafSource(extractNum(row.namespace_id), extractStr(row.name), "handler");
+      }
+      for (const row of enumRows) {
+        addLeafSource(extractNum(row.namespace_id), extractStr(row.name), "enum");
+      }
+      for (const row of eventRows) {
+        addLeafSource(extractNum(row.namespace_id), extractStr(row.name), "event");
+      }
+      for (const row of dictRows) {
+        addLeafSource(extractNum(row.namespace_id), extractStr(row.name), "dictionary");
+      }
+      let systemNsId;
+      for (const [id, name] of nsMap) {
+        if (name === "system") {
+          systemNsId = id;
+          break;
+        }
+      }
+      if (systemNsId !== void 0) {
+        for (const row of migrationRows) {
+          addLeafSource(systemNsId, extractStr(row.name), "migration");
+        }
+      }
+      const result = [];
+      for (const [nsId, nsName] of nsMap) {
+        const sources = nsSources.get(nsId) ?? [];
+        sources.sort((a, b) => a.name.localeCompare(b.name));
+        result.push({ name: nsName, sources });
+      }
+      result.sort((a, b) => a.name.localeCompare(b.name));
+      setNamespaces(result);
+    } catch {
+      setNamespaces([]);
+    } finally {
+      setLoading(false);
+    }
+  };
+  useEffect2(() => {
+    loadSchema();
+  }, [executor]);
+  const toolbar = /* @__PURE__ */ jsx12("div", { className: "rdb-schema__toolbar", children: /* @__PURE__ */ jsx12(
+    "button",
+    {
+      className: "rdb-schema__reload-btn",
+      onClick: loadSchema,
+      disabled: loading,
+      children: loading ? "[loading...]" : "[reload]"
+    }
+  ) });
+  if (loading) {
+    return /* @__PURE__ */ jsxs8(Fragment2, { children: [
+      toolbar,
+      /* @__PURE__ */ jsx12("div", { className: "rdb-history__empty", children: "$ loading schema..." })
+    ] });
+  }
+  if (namespaces.length === 0) {
+    return /* @__PURE__ */ jsxs8(Fragment2, { children: [
+      toolbar,
+      /* @__PURE__ */ jsx12("div", { className: "rdb-history__empty", children: "$ no tables found" })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs8(Fragment2, { children: [
+    toolbar,
+    /* @__PURE__ */ jsx12("div", { children: namespaces.map((ns) => /* @__PURE__ */ jsx12(SchemaNode, { label: ns.name, labelClass: "rdb-schema__node-label--namespace", children: CATEGORY_GROUPS.map(({ key, label }) => {
+      const sources = ns.sources.filter((s) => s.category === key);
+      if (sources.length === 0) return null;
+      return /* @__PURE__ */ jsx12(SchemaNode, { label: `${label} (${sources.length})`, labelClass: "rdb-schema__node-label--category", children: sources.map((source) => /* @__PURE__ */ jsx12(SchemaNode, { label: source.name, children: source.columns.length > 0 ? source.columns.map((col) => /* @__PURE__ */ jsx12(
+        SchemaNode,
+        {
+          label: col.name,
+          labelClass: "rdb-schema__node-label--column",
+          type: col.type,
+          typeClass: typeColorClass(col.type)
+        },
+        col.name
+      )) : void 0 }, source.name)) }, key);
+    }) }, ns.name)) })
+  ] });
+}
+
+// src/components/history/HistoryPanel.tsx
+import { useState as useState4 } from "react";
+
+// src/components/history/HistoryEntry.tsx
+import { jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
+function formatTimestamp(ts) {
+  const d = new Date(ts);
+  const hh = String(d.getHours()).padStart(2, "0");
+  const mm = String(d.getMinutes()).padStart(2, "0");
+  const ss = String(d.getSeconds()).padStart(2, "0");
+  return `${hh}:${mm}:${ss}`;
+}
+function HistoryEntryRow({ entry, onClick }) {
+  return /* @__PURE__ */ jsxs9("div", { className: "rdb-history__entry", onClick: () => onClick(entry.query), children: [
+    /* @__PURE__ */ jsxs9("div", { className: "rdb-history__entry-meta", children: [
+      /* @__PURE__ */ jsx13("span", { children: formatTimestamp(entry.timestamp) }),
+      /* @__PURE__ */ jsxs9("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem" }, children: [
+        /* @__PURE__ */ jsxs9("span", { children: [
+          entry.executionTime,
+          "ms"
+        ] }),
+        /* @__PURE__ */ jsx13(
+          "span",
+          {
+            className: `rdb-history__entry-indicator ${entry.success ? "rdb-history__entry-indicator--success" : "rdb-history__entry-indicator--error"}`
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx13("div", { className: "rdb-history__entry-query", children: entry.query })
+  ] });
+}
+
+// src/components/history/HistoryPanel.tsx
+import { jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
+function HistoryPanel({ entries, onSelect }) {
+  const [search, setSearch] = useState4("");
+  const filtered = search ? entries.filter((e) => e.query.toLowerCase().includes(search.toLowerCase())) : entries;
+  return /* @__PURE__ */ jsxs10("div", { className: "rdb-history", children: [
+    /* @__PURE__ */ jsx14("div", { className: "rdb-history__search", children: /* @__PURE__ */ jsx14(
+      "input",
+      {
+        type: "text",
+        className: "rdb-history__search-input",
+        placeholder: "search history...",
+        value: search,
+        onChange: (e) => setSearch(e.target.value)
+      }
+    ) }),
+    /* @__PURE__ */ jsx14("div", { className: "rdb-history__list", children: filtered.length === 0 ? /* @__PURE__ */ jsx14("div", { className: "rdb-history__empty", children: entries.length === 0 ? "$ no history yet" : "$ no matching queries" }) : filtered.map((entry) => /* @__PURE__ */ jsx14(HistoryEntryRow, { entry, onClick: onSelect }, entry.id)) })
+  ] });
+}
+
+// src/components/connection/ConnectionPanel.tsx
+import { useEffect as useEffect3, useRef as useRef3 } from "react";
+import { Fragment as Fragment3, jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
+function ConnectionPanel({
+  mode,
+  wsUrl,
+  status,
+  error,
+  onModeChange,
+  onUrlChange,
+  onConnect,
+  onDisconnect,
+  onClose
+}) {
+  const panelRef = useRef3(null);
+  useEffect3(() => {
+    function handleClickOutside(e) {
+      if (panelRef.current && !panelRef.current.contains(e.target)) {
+        onClose();
+      }
+    }
+    function handleEscape(e) {
+      if (e.key === "Escape") onClose();
+    }
+    document.addEventListener("mousedown", handleClickOutside);
+    document.addEventListener("keydown", handleEscape);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+      document.removeEventListener("keydown", handleEscape);
+    };
+  }, [onClose]);
+  const isWsConnected = mode === "websocket" && status === "connected";
+  const isWsConnecting = mode === "websocket" && status === "connecting";
+  return /* @__PURE__ */ jsxs11("div", { className: "rdb-connection-panel", ref: panelRef, children: [
+    /* @__PURE__ */ jsx15("div", { className: "rdb-connection-panel__header", children: "connection" }),
+    /* @__PURE__ */ jsxs11("div", { className: "rdb-connection-panel__modes", children: [
+      /* @__PURE__ */ jsx15(
+        "button",
+        {
+          className: `rdb-connection-panel__mode-btn ${mode === "wasm" ? "rdb-connection-panel__mode-btn--active" : ""}`,
+          onClick: () => onModeChange("wasm"),
+          children: "[wasm (in-browser)]"
+        }
+      ),
+      /* @__PURE__ */ jsx15(
+        "button",
+        {
+          className: `rdb-connection-panel__mode-btn ${mode === "websocket" ? "rdb-connection-panel__mode-btn--active" : ""}`,
+          onClick: () => onModeChange("websocket"),
+          children: "[websocket (remote)]"
+        }
+      )
+    ] }),
+    mode === "websocket" && /* @__PURE__ */ jsxs11(Fragment3, { children: [
+      /* @__PURE__ */ jsxs11("div", { className: "rdb-connection-panel__url-row", children: [
+        /* @__PURE__ */ jsx15("span", { className: "rdb-connection-panel__url-label", children: "url:" }),
+        /* @__PURE__ */ jsx15(
+          "input",
+          {
+            className: "rdb-connection-panel__url-input",
+            type: "text",
+            value: wsUrl,
+            onChange: (e) => onUrlChange(e.target.value),
+            placeholder: "ws://localhost:8090",
+            disabled: isWsConnected || isWsConnecting
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx15("div", { className: "rdb-connection-panel__actions", children: isWsConnected ? /* @__PURE__ */ jsx15("button", { className: "rdb-connection-panel__action-btn", onClick: onDisconnect, children: "[disconnect]" }) : /* @__PURE__ */ jsx15(
+        "button",
+        {
+          className: "rdb-connection-panel__action-btn",
+          onClick: onConnect,
+          disabled: isWsConnecting || !wsUrl.trim(),
+          children: isWsConnecting ? "[connecting...]" : "[connect]"
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsxs11("div", { className: "rdb-connection-panel__status", children: [
+      /* @__PURE__ */ jsx15("span", { className: `rdb-connection-panel__status-dot rdb-connection-panel__status-dot--${status}`, children: "\u25CF" }),
+      /* @__PURE__ */ jsx15("span", { children: status })
+    ] }),
+    error && /* @__PURE__ */ jsx15("div", { className: "rdb-connection-panel__error", children: error })
+  ] });
+}
+
+// src/components/Console.tsx
+import { jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
+var TABS = [
+  { id: "results", label: "Results" },
+  { id: "history", label: "History" },
+  { id: "schema", label: "Schema" }
+];
+var WS_URL_STORAGE_KEY = "rdb-console-ws-url";
+function ConsoleInner({ executor, historyKey, connection, theme = "light" }) {
+  const { state, dispatch } = useConsoleStore();
+  const connectionLocked = connection != null;
+  const lockedWsUrl = connection?.mode === "websocket" ? connection.url : null;
+  const [connectionMode, setConnectionMode] = useState5(
+    connection ? connection.mode : "wasm"
+  );
+  const [wsUrl, setWsUrl] = useState5(() => {
+    if (connection?.mode === "websocket") return connection.url;
+    try {
+      return localStorage.getItem(WS_URL_STORAGE_KEY) || "ws://localhost:8090";
+    } catch {
+      return "ws://localhost:8090";
+    }
+  });
+  const [connectionStatus, setConnectionStatus] = useState5(
+    connection?.mode === "websocket" ? "connecting" : "connected"
+  );
+  const [connectionError, setConnectionError] = useState5(null);
+  const [activeExecutor, setActiveExecutor] = useState5(executor);
+  const [showConnectionPanel, setShowConnectionPanel] = useState5(false);
+  const wsClientRef = useRef4(null);
+  const reconnectTimerRef = useRef4(null);
+  useEffect4(() => {
+    if (connectionLocked) return;
+    try {
+      localStorage.setItem(WS_URL_STORAGE_KEY, wsUrl);
+    } catch {
+    }
+  }, [wsUrl, connectionLocked]);
+  useEffect4(() => {
+    if (connectionMode === "wasm") {
+      setActiveExecutor(executor);
+    }
+  }, [executor, connectionMode]);
+  useEffect4(() => {
+    if (!lockedWsUrl) return;
+    const url = lockedWsUrl;
+    let cancelled = false;
+    let backoff = 1e3;
+    const maxBackoff = 3e4;
+    async function connect() {
+      if (cancelled) return;
+      setConnectionStatus("connecting");
+      setConnectionError(null);
+      try {
+        if (wsClientRef.current) {
+          wsClientRef.current.disconnect();
+          wsClientRef.current = null;
+        }
+        const client = await Client.connect_ws(url, { timeoutMs: 3e4 });
+        if (cancelled) {
+          client.disconnect();
+          return;
+        }
+        wsClientRef.current = client;
+        const wsExecutor = new WsExecutor(client);
+        setActiveExecutor(wsExecutor);
+        setConnectionStatus("connected");
+        backoff = 1e3;
+      } catch (err) {
+        if (cancelled) return;
+        setConnectionStatus("error");
+        setConnectionError(err instanceof Error ? err.message : String(err));
+        reconnectTimerRef.current = setTimeout(() => {
+          connect();
+        }, backoff);
+        backoff = Math.min(backoff * 2, maxBackoff);
+      }
+    }
+    connect();
+    return () => {
+      cancelled = true;
+      if (reconnectTimerRef.current) {
+        clearTimeout(reconnectTimerRef.current);
+        reconnectTimerRef.current = null;
+      }
+      if (wsClientRef.current) {
+        wsClientRef.current.disconnect();
+        wsClientRef.current = null;
+      }
+    };
+  }, [lockedWsUrl]);
+  useEffect4(() => {
+    const entries = loadHistory(historyKey);
+    if (entries.length > 0) {
+      dispatch({ type: "LOAD_HISTORY", entries });
+    }
+  }, [historyKey, dispatch]);
+  useEffect4(() => {
+    saveHistory(state.history, historyKey);
+  }, [state.history, historyKey]);
+  const handleConnect = useCallback3(async () => {
+    if (!wsUrl.trim()) return;
+    setConnectionStatus("connecting");
+    setConnectionError(null);
+    try {
+      if (wsClientRef.current) {
+        wsClientRef.current.disconnect();
+        wsClientRef.current = null;
+      }
+      const client = await Client.connect_ws(wsUrl, { timeoutMs: 3e4 });
+      wsClientRef.current = client;
+      const wsExecutor = new WsExecutor(client);
+      setActiveExecutor(wsExecutor);
+      setConnectionStatus("connected");
+    } catch (err) {
+      setConnectionStatus("error");
+      setConnectionError(err instanceof Error ? err.message : String(err));
+    }
+  }, [wsUrl]);
+  const handleDisconnect = useCallback3(() => {
+    if (wsClientRef.current) {
+      wsClientRef.current.disconnect();
+      wsClientRef.current = null;
+    }
+    setActiveExecutor(executor);
+    setConnectionMode("wasm");
+    setConnectionStatus("connected");
+    setConnectionError(null);
+  }, [executor]);
+  const handleModeChange = useCallback3((mode) => {
+    if (mode === "wasm" && connectionMode === "websocket") {
+      if (wsClientRef.current) {
+        wsClientRef.current.disconnect();
+        wsClientRef.current = null;
+      }
+      setActiveExecutor(executor);
+      setConnectionStatus("connected");
+      setConnectionError(null);
+    } else if (mode === "websocket" && connectionMode === "wasm") {
+      setConnectionStatus("disconnected");
+      setConnectionError(null);
+    }
+    setConnectionMode(mode);
+  }, [connectionMode, executor]);
+  const connectionLabel = connectionMode === "wasm" ? "wasm" : wsUrl;
+  const handleRun = useCallback3(async () => {
+    if (state.isExecuting || !state.code.trim()) return;
+    dispatch({ type: "EXECUTE_START" });
+    try {
+      const result = await activeExecutor.execute(state.code);
+      if (result.success) {
+        dispatch({ type: "EXECUTE_SUCCESS", result, query: state.code });
+      } else {
+        dispatch({ type: "EXECUTE_ERROR", result, query: state.code });
+      }
+    } catch (err) {
+      dispatch({
+        type: "EXECUTE_ERROR",
+        result: {
+          success: false,
+          error: err instanceof Error ? err.message : String(err),
+          executionTime: 0
+        },
+        query: state.code
+      });
+    }
+  }, [state.isExecuting, state.code, activeExecutor, dispatch]);
+  const handleClear = useCallback3(() => {
+    dispatch({ type: "CLEAR_RESULTS" });
+  }, [dispatch]);
+  const handleSelectHistory = useCallback3((query) => {
+    dispatch({ type: "LOAD_QUERY", code: query });
+  }, [dispatch]);
+  const editorPane = /* @__PURE__ */ jsxs12("div", { style: { display: "flex", flexDirection: "column", height: "100%" }, children: [
+    /* @__PURE__ */ jsxs12("div", { style: { position: "relative" }, children: [
+      /* @__PURE__ */ jsx16(
+        EditorToolbar,
+        {
+          onRun: handleRun,
+          onClear: handleClear,
+          isExecuting: state.isExecuting,
+          connectionLabel,
+          connectionStatus,
+          connectionLocked,
+          onToggleConnectionPanel: () => setShowConnectionPanel((v) => !v)
+        }
+      ),
+      !connectionLocked && showConnectionPanel && /* @__PURE__ */ jsx16(
+        ConnectionPanel,
+        {
+          mode: connectionMode,
+          wsUrl,
+          status: connectionStatus,
+          error: connectionError,
+          onModeChange: handleModeChange,
+          onUrlChange: setWsUrl,
+          onConnect: handleConnect,
+          onDisconnect: handleDisconnect,
+          onClose: () => setShowConnectionPanel(false)
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx16("div", { style: { flex: 1, minHeight: 0 }, children: /* @__PURE__ */ jsx16(
+      QueryEditor,
+      {
+        code: state.code,
+        onChange: (code) => dispatch({ type: "SET_CODE", code }),
+        onRun: handleRun,
+        theme
+      }
+    ) })
+  ] });
+  const bottomPane = /* @__PURE__ */ jsxs12("div", { style: { display: "flex", flexDirection: "column", height: "100%" }, children: [
+    /* @__PURE__ */ jsx16(
+      TabBar,
+      {
+        activeTab: state.activeTab,
+        tabs: TABS,
+        onTabChange: (tab) => dispatch({ type: "SET_TAB", tab })
+      }
+    ),
+    /* @__PURE__ */ jsx16("div", { style: { flex: 1, overflow: "auto", minHeight: 0 }, children: state.activeTab === "results" ? /* @__PURE__ */ jsx16(ResultsPanel, { result: state.result }) : state.activeTab === "history" ? /* @__PURE__ */ jsx16(HistoryPanel, { entries: state.history, onSelect: handleSelectHistory }) : /* @__PURE__ */ jsx16(SchemaBrowser, { executor: activeExecutor }) })
+  ] });
+  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 }) });
+}
+
+// src/components/Snippet.tsx
+import { useState as useState6, useCallback as useCallback4, useEffect as useEffect5, useRef as useRef5 } from "react";
+import Editor2 from "@monaco-editor/react";
+
+// src/components/SnippetResults.tsx
+import { jsx as jsx17, jsxs as jsxs13 } from "react/jsx-runtime";
+function SnippetResults({ data, columns, maxKeyLength }) {
+  return /* @__PURE__ */ jsx17("div", { className: "rdb-snippet__rows", children: data.map((row, i) => /* @__PURE__ */ jsxs13("div", { className: "rdb-snippet__row", children: [
+    /* @__PURE__ */ jsxs13("div", { className: "rdb-snippet__row-label", children: [
+      "-- row ",
+      i + 1,
+      " --"
+    ] }),
+    columns.map((col) => {
+      const vs = getValueStyle(row[col]);
+      return /* @__PURE__ */ jsxs13("div", { className: "rdb-snippet__field", children: [
+        /* @__PURE__ */ jsx17(
+          "span",
+          {
+            className: "rdb-snippet__field-key",
+            style: { minWidth: `${maxKeyLength}ch` },
+            children: `  ${col.padEnd(maxKeyLength)}`
+          }
+        ),
+        /* @__PURE__ */ jsx17("span", { className: "rdb-snippet__field-eq", children: "= " }),
+        /* @__PURE__ */ jsx17(
+          "span",
+          {
+            className: `rdb-snippet__field-value${vs.italic ? " rdb-snippet__field-value--italic" : ""}`,
+            style: vs.color ? { color: vs.color } : void 0,
+            children: formatValue(row[col])
+          }
+        )
+      ] }, col);
+    })
+  ] }, i)) });
+}
+
+// src/components/Snippet.tsx
+import { jsx as jsx18, jsxs as jsxs14 } from "react/jsx-runtime";
+function Snippet({
+  executor,
+  initialCode,
+  title = "reifydb playground",
+  description,
+  className,
+  theme = "light"
+}) {
+  const [code, setCode] = useState6(initialCode);
+  const [result, setResult] = useState6(null);
+  const [isExecuting, setIsExecuting] = useState6(false);
+  const [copied, setCopied] = useState6(false);
+  const [isFullscreen, setIsFullscreen] = useState6(false);
+  const editorRef = useRef5(null);
+  const handleRunRef = useRef5(() => {
+  });
+  const lineCount = code.split("\n").length;
+  const editorHeight = Math.max(lineCount * 20 + 16, 80);
+  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 handleRun = useCallback4(async () => {
+    if (isExecuting) return;
+    setResult(null);
+    setIsExecuting(true);
+    await new Promise((r) => setTimeout(r, 0));
+    try {
+      const res = await executor.execute(code);
+      if (res.success) {
+        setResult({ data: res.data ?? [] });
+      } else {
+        setResult({ data: [], error: res.error });
+      }
+    } catch (err) {
+      setResult({ data: [], error: err instanceof Error ? err.message : String(err) });
+    } finally {
+      setIsExecuting(false);
+    }
+  }, [code, executor, isExecuting]);
+  handleRunRef.current = handleRun;
+  const handleReset = useCallback4(() => {
+    setCode(initialCode);
+    setResult(null);
+  }, [initialCode]);
+  const handleCopy = useCallback4(async () => {
+    await navigator.clipboard.writeText(code);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2e3);
+  }, [code]);
+  const handleEditorDidMount = (editor, monaco) => {
+    editorRef.current = editor;
+    registerRqlLanguage(monaco);
+    editor.addAction({
+      id: "run-query",
+      label: "Run Query",
+      keybindings: [monaco.KeyMod.CtrlCmd | monaco.KeyCode.Enter],
+      run: () => {
+        handleRunRef.current();
+      }
+    });
+  };
+  const handleBeforeMount = (monaco) => {
+    registerRqlLanguage(monaco);
+  };
+  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__ */ jsxs14("div", { className: `rdb-snippet${isFullscreen ? " rdb-snippet--fullscreen" : ""}${theme === "light" ? " rdb-theme-light" : ""}${className ? ` ${className}` : ""}`, children: [
+    /* @__PURE__ */ jsxs14("div", { className: "rdb-snippet__header", children: [
+      /* @__PURE__ */ jsxs14("div", { className: "rdb-snippet__title", children: [
+        /* @__PURE__ */ jsx18("span", { className: "rdb-snippet__title-marker", children: "$" }),
+        " ",
+        title
+      ] }),
+      /* @__PURE__ */ jsxs14("div", { className: "rdb-snippet__actions", children: [
+        /* @__PURE__ */ jsx18(
+          "button",
+          {
+            onClick: () => setIsFullscreen(!isFullscreen),
+            className: "rdb-snippet__action-btn",
+            title: isFullscreen ? "Exit fullscreen" : "Fullscreen",
+            children: isFullscreen ? "[\xD7]" : "[[]]"
+          }
+        ),
+        /* @__PURE__ */ jsx18(
+          "button",
+          {
+            onClick: handleCopy,
+            className: "rdb-snippet__action-btn",
+            title: "Copy code",
+            children: copied ? "[ok]" : "[cp]"
+          }
+        ),
+        /* @__PURE__ */ jsx18(
+          "button",
+          {
+            onClick: handleReset,
+            className: "rdb-snippet__action-btn",
+            title: "Reset code",
+            children: "[\u21BA]"
+          }
+        )
+      ] })
+    ] }),
+    description && /* @__PURE__ */ jsx18("div", { className: "rdb-snippet__description", children: /* @__PURE__ */ jsxs14("p", { className: "rdb-snippet__description-text", children: [
+      /* @__PURE__ */ jsx18("span", { className: "rdb-snippet__description-marker", children: "// " }),
+      description
+    ] }) }),
+    /* @__PURE__ */ jsx18(
+      "div",
+      {
+        className: isFullscreen ? "rdb-snippet__editor--fullscreen" : "rdb-snippet__editor",
+        style: isFullscreen ? void 0 : { height: editorHeight },
+        children: /* @__PURE__ */ jsx18(
+          Editor2,
+          {
+            height: "100%",
+            language: "rql",
+            theme: theme === "light" ? "premium-light" : "premium-dark",
+            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: isFullscreen ? "auto" : "hidden",
+                horizontal: isFullscreen ? "auto" : "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
+            }
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxs14("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__ */ jsxs14("div", { className: `rdb-snippet__results${isFullscreen ? " rdb-snippet__results--fullscreen" : ""}`, children: [
+      /* @__PURE__ */ jsxs14("div", { className: "rdb-snippet__results-header", children: [
+        /* @__PURE__ */ jsx18("span", { children: result.error ? "--- error ---" : "--- output ---" }),
+        result.data && !result.error && /* @__PURE__ */ jsxs14("span", { children: [
+          "(",
+          result.data.length,
+          " row",
+          result.data.length !== 1 ? "s" : "",
+          ")"
+        ] })
+      ] }),
+      result.error && /* @__PURE__ */ jsx18("div", { className: "rdb-snippet__error", children: /* @__PURE__ */ jsxs14("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." })
+    ] })
+  ] });
+  if (isFullscreen) {
+    return /* @__PURE__ */ jsx18("div", { className: "rdb-snippet__overlay", children: /* @__PURE__ */ jsx18("div", { className: "rdb-snippet__overlay-inner", children: content }) });
+  }
+  return content;
+}
+
+// src/executor/wasm-executor.ts
+var WasmExecutor = class {
+  db;
+  constructor(db) {
+    this.db = db;
+  }
+  async execute(statement) {
+    const trimmed = statement.trim();
+    const query = trimmed.endsWith(";") ? trimmed.slice(0, -1).trim() : trimmed;
+    if (!query) {
+      return { success: true, data: [], executionTime: 0 };
+    }
+    const startTime = performance.now();
+    try {
+      const results = await this.db.admin(query);
+      const executionTime = Math.round(performance.now() - startTime);
+      return {
+        success: true,
+        data: Array.isArray(results) ? results : [],
+        executionTime
+      };
+    } catch (error) {
+      const executionTime = Math.round(performance.now() - startTime);
+      return {
+        success: false,
+        error: error instanceof Error ? error.message : String(error),
+        executionTime
+      };
+    }
+  }
+};
+export {
+  Console,
+  Snippet,
+  WasmExecutor,
+  WsExecutor,
+  brutalistDarkTheme,
+  brutalistLightTheme,
+  formatValue,
+  getValueStyle,
+  premiumDarkTheme,
+  premiumLightTheme,
+  registerRqlLanguage,
+  rqlLanguageConfiguration,
+  rqlLanguageDefinition
+};
+//# sourceMappingURL=index.js.map