@lunora/studio 1.0.0-alpha.5 → 1.0.0-alpha.51

package/dist/{packem_shared/sql-editor-panel-BFRpzj6r.js → packem_chunks/SqlEditorPanel.js}

@@ -1,257 +1,19 @@
 import { c } from 'react/compiler-runtime';
 import { useLunora } from '@lunora/react';
-import { useState, useEffect, useRef, useId } from 'react';
-import { useT } from './DEFAULT_LOCALE-CiX4W7Kr.js';
-import { h as formatCell, f as fireAndForget, c as callOptions, a as adminRef, e as errorMessage } from './internal-rXJEAhXS.js';
-import { X as XAxis, B as Bar, T as Tooltip, E as EvilBarChart } from './bar-chart-CzJAgqkp.js';
+import { useState, useRef, useEffect, useId } from 'react';
+import { S as SqlResultChart } from '../packem_shared/result-chart-DZradBAS.js';
+import { ShardInput } from '../packem_shared/ShardInput-CZnpHILL.js';
+import { A as Alert } from '../packem_shared/alert-CdAET2K_.js';
+import { c as TableHead, a as TableHeader, b as TableRow, e as TableCell, d as TableBody, T as Table } from '../packem_shared/table-DsCa9Qp9.js';
+import { useT } from '../packem_shared/DEFAULT_LOCALE-CiX4W7Kr.js';
+import { ADMIN_FUNCTIONS } from '../packem_shared/ADMIN_FUNCTIONS-DNeyYtUN.js';
+import { u as usePersistedList, n as newId, b as usePersistedValue } from '../packem_shared/browser-storage-L4gOP5gJ.js';
+import { f as fireAndForget, c as callOptions, a as adminRef, e as errorMessage } from '../packem_shared/internal-zwBoOv24.js';
+import { r as recordShard } from '../packem_shared/shard-history-AxiJ1WPP.js';
+import { C as CellValue } from '../packem_shared/data-grid-C9I16KWr.js';
+import { E as ExportMenu } from '../packem_shared/grid-features-B_fZH4iQ.js';
+import { c as cn } from '../packem_shared/utils-B05Dmz_H.js';
 import { jsxDEV, Fragment } from 'react/jsx-dev-runtime';
-import { ShardInput } from './ShardInput-gx_DZXXn.js';
-import { cva } from 'class-variance-authority';
-import { c as cn } from './utils-B05Dmz_H.js';
-import { c as TableHead, a as TableHeader, b as TableRow, e as TableCell, d as TableBody, T as Table } from './table-_RzNvy3R.js';
-import { ADMIN_FUNCTIONS } from './ADMIN_FUNCTIONS-DmBqMZ-z.js';
-import { r as recordShard } from './shard-history-DyebH1R5.js';
-import { C as CellValue } from './data-grid-B5CaV3wS.js';
-import { E as ExportMenu } from './grid-features-CzUfqgsM.js';
-
-const MAX_BARS = 50;
-const RESULT_CHART_CONFIG = {
-  value: {
-    colors: {
-      dark: ["var(--chart-1)"],
-      light: ["var(--chart-1)"]
-    },
-    label: "value"
-  }
-};
-const pickColumns = (result) => {
-  const value = result.columns.find((column) => result.rows.length > 0 && result.rows.every((row) => typeof row[column] === "number")) ?? null;
-  const label = result.columns.find((column) => column !== value) ?? null;
-  return {
-    label,
-    value
-  };
-};
-const SqlResultChart = (t0) => {
-  const $ = c(15);
-  const {
-    result
-  } = t0;
-  const t = useT();
-  let t1;
-  if ($[0] !== result) {
-    t1 = pickColumns(result);
-    $[0] = result;
-    $[1] = t1;
-  } else {
-    t1 = $[1];
-  }
-  const {
-    label,
-    value
-  } = t1;
-  let t2;
-  if ($[2] !== label || $[3] !== result || $[4] !== value) {
-    t2 = value === null ? [] : result.rows.slice(0, MAX_BARS).map((row, index) => ({
-      label: label === null ? `#${(index + 1).toString()}` : formatCell(row[label]),
-      value: Number(row[value]) || 0
-    }));
-    $[2] = label;
-    $[3] = result;
-    $[4] = value;
-    $[5] = t2;
-  } else {
-    t2 = $[5];
-  }
-  const data = t2;
-  if (value === null) {
-    let t32;
-    if ($[6] !== t) {
-      t32 = t("No numeric column to chart.");
-      $[6] = t;
-      $[7] = t32;
-    } else {
-      t32 = $[7];
-    }
-    let t42;
-    if ($[8] !== t32) {
-      t42 = /* @__PURE__ */ jsxDEV("p", {
-        className: "p-4 text-sm text-muted-foreground",
-        "data-testid": "sql-chart-empty",
-        children: t32
-      }, void 0, false);
-      $[8] = t32;
-      $[9] = t42;
-    } else {
-      t42 = $[9];
-    }
-    return t42;
-  }
-  let t3;
-  let t4;
-  let t5;
-  if ($[10] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
-    t3 = /* @__PURE__ */ jsxDEV(XAxis, {
-      dataKey: "label"
-    }, void 0, false);
-    t4 = /* @__PURE__ */ jsxDEV(Bar, {
-      dataKey: "value"
-    }, void 0, false);
-    t5 = /* @__PURE__ */ jsxDEV(Tooltip, {}, void 0, false);
-    $[10] = t3;
-    $[11] = t4;
-    $[12] = t5;
-  } else {
-    t3 = $[10];
-    t4 = $[11];
-    t5 = $[12];
-  }
-  let t6;
-  if ($[13] !== data) {
-    t6 = /* @__PURE__ */ jsxDEV("div", {
-      className: "h-80 w-full p-3",
-      "data-testid": "sql-chart",
-      children: /* @__PURE__ */ jsxDEV(EvilBarChart, {
-        className: "h-full w-full",
-        config: RESULT_CHART_CONFIG,
-        data,
-        children: [t3, t4, t5]
-      }, void 0, true)
-    }, void 0, false);
-    $[13] = data;
-    $[14] = t6;
-  } else {
-    t6 = $[14];
-  }
-  return t6;
-};
-
-const alertVariants = cva("flex items-start gap-2 rounded-md border px-3 py-2 text-sm [&>svg]:mt-0.5 [&>svg]:size-4 [&>svg]:shrink-0", {
-  defaultVariants: {
-    variant: "default"
-  },
-  variants: {
-    variant: {
-      default: "border-border bg-muted/40 text-foreground",
-      destructive: "border-destructive/40 bg-destructive/5 text-destructive",
-      warning: "border-amber-500/40 bg-amber-500/5 text-amber-700 dark:text-amber-400"
-    }
-  }
-});
-const Alert = (t0) => {
-  const $ = c(10);
-  const {
-    children,
-    className,
-    icon,
-    testId,
-    variant
-  } = t0;
-  let t1;
-  if ($[0] !== className || $[1] !== variant) {
-    t1 = cn(alertVariants({
-      variant
-    }), className);
-    $[0] = className;
-    $[1] = variant;
-    $[2] = t1;
-  } else {
-    t1 = $[2];
-  }
-  let t2;
-  if ($[3] !== children) {
-    t2 = /* @__PURE__ */ jsxDEV("div", {
-      className: "min-w-0 flex-1",
-      children
-    }, void 0, false);
-    $[3] = children;
-    $[4] = t2;
-  } else {
-    t2 = $[4];
-  }
-  let t3;
-  if ($[5] !== icon || $[6] !== t1 || $[7] !== t2 || $[8] !== testId) {
-    t3 = /* @__PURE__ */ jsxDEV("div", {
-      className: t1,
-      "data-testid": testId,
-      role: "alert",
-      children: [icon, t2]
-    }, void 0, true);
-    $[5] = icon;
-    $[6] = t1;
-    $[7] = t2;
-    $[8] = testId;
-    $[9] = t3;
-  } else {
-    t3 = $[9];
-  }
-  return t3;
-};
-
-const store = () => {
-  try {
-    return globalThis.localStorage;
-  } catch {
-    return void 0;
-  }
-};
-const loadJsonArray = function(key) {
-  try {
-    const raw = store()?.getItem(key) ?? void 0;
-    const parsed = raw === void 0 ? [] : JSON.parse(raw);
-    return Array.isArray(parsed) ? parsed : [];
-  } catch {
-    return [];
-  }
-};
-const saveJson = (key, value) => {
-  const storage = store();
-  if (storage === void 0) {
-    return;
-  }
-  try {
-    storage.setItem(key, JSON.stringify(value));
-  } catch {
-  }
-};
-const usePersistedList = function(key) {
-  const $ = c(8);
-  let t0;
-  if ($[0] !== key) {
-    t0 = () => loadJsonArray(key);
-    $[0] = key;
-    $[1] = t0;
-  } else {
-    t0 = $[1];
-  }
-  const [value, setValue] = useState(t0);
-  let t1;
-  let t2;
-  if ($[2] !== key || $[3] !== value) {
-    t1 = () => {
-      saveJson(key, value);
-    };
-    t2 = [key, value];
-    $[2] = key;
-    $[3] = value;
-    $[4] = t1;
-    $[5] = t2;
-  } else {
-    t1 = $[4];
-    t2 = $[5];
-  }
-  useEffect(t1, t2);
-  let t3;
-  if ($[6] !== value) {
-    t3 = [value, setValue];
-    $[6] = value;
-    $[7] = t3;
-  } else {
-    t3 = $[7];
-  }
-  return t3;
-};
-const newId = (prefix) => globalThis.crypto?.randomUUID?.() ?? `${prefix}-${globalThis.performance.now().toString(36)}`;
 
 const SQL_KEYWORDS = ["ORDER BY", "GROUP BY", "LEFT JOIN", "RIGHT JOIN", "INNER JOIN", "OUTER JOIN", "CROSS JOIN", "EXPLAIN QUERY PLAN", "SELECT", "DISTINCT", "FROM", "WHERE", "HAVING", "LIMIT", "OFFSET", "JOIN", "ON", "AND", "OR", "AS", "ASC", "DESC", "WITH", "UNION", "EXPLAIN"];
 const SQL_NEWLINE_CLAUSES = ["FROM", "WHERE", "ORDER BY", "GROUP BY", "HAVING", "LIMIT", "OFFSET", "UNION", "JOIN", "LEFT JOIN", "RIGHT JOIN", "INNER JOIN", "OUTER JOIN", "CROSS JOIN"];
@@ -454,11 +216,17 @@ const useSqlAutocomplete = (schema, textareaRef, setValue) => {
         left: 0,
         top: 0
       } : caretOffset(node, caret);
-      setState({
-        active: 0,
-        left,
-        suggestions,
-        top
+      setState((current) => {
+        const unchanged = current !== null && current.active === 0 && current.left === left && current.top === top && current.suggestions.length === suggestions.length && current.suggestions.every((existing, index) => {
+          const next = suggestions.at(index);
+          return existing.kind === next?.kind && existing.label === next.label && existing.detail === next.detail;
+        });
+        return unchanged ? current : {
+          active: 0,
+          left,
+          suggestions,
+          top
+        };
       });
     };
     $[0] = schema;
@@ -481,14 +249,14 @@ const useSqlAutocomplete = (schema, textareaRef, setValue) => {
   let t2;
   if ($[4] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
     t2 = (delta) => {
-      setState((current) => {
-        if (current === null) {
-          return current;
+      setState((current_0) => {
+        if (current_0 === null) {
+          return current_0;
         }
-        const count = current.suggestions.length;
-        const active = (current.active + delta + count) % count;
+        const count = current_0.suggestions.length;
+        const active = (current_0.active + delta + count) % count;
         return {
-          ...current,
+          ...current_0,
           active
         };
       });
@@ -509,14 +277,14 @@ const useSqlAutocomplete = (schema, textareaRef, setValue) => {
       if (chosen === void 0) {
         return false;
       }
-      const next = acceptSuggestion(textarea.value, textarea.selectionStart, chosen);
-      setValue(next.value);
+      const next_0 = acceptSuggestion(textarea.value, textarea.selectionStart, chosen);
+      setValue(next_0.value);
       setState(null);
       requestAnimationFrame(() => {
         const node_0 = textareaRef.current;
         if (node_0 !== null) {
           node_0.focus();
-          node_0.setSelectionRange(next.caret, next.caret);
+          node_0.setSelectionRange(next_0.caret, next_0.caret);
         }
       });
       return true;
@@ -1289,34 +1057,7 @@ const makeTab = (sql = "", name = "") => {
   };
 };
 const usePersistedActive = () => {
-  const $ = c(5);
-  const [list, setList] = usePersistedList(ACTIVE_KEY);
-  let t0;
-  if ($[0] !== setList) {
-    t0 = (action) => {
-      setList((current) => {
-        const previous = current[0] ?? "";
-        const next = typeof action === "function" ? action(previous) : action;
-        return [next];
-      });
-    };
-    $[0] = setList;
-    $[1] = t0;
-  } else {
-    t0 = $[1];
-  }
-  const setActive = t0;
-  const t1 = list[0] ?? "";
-  let t2;
-  if ($[2] !== setActive || $[3] !== t1) {
-    t2 = [t1, setActive];
-    $[2] = setActive;
-    $[3] = t1;
-    $[4] = t2;
-  } else {
-    t2 = $[4];
-  }
-  return t2;
+  return usePersistedValue(ACTIVE_KEY, "");
 };
 const usePersistedTabs = (seed) => {
   const [stored, setTabs] = usePersistedList(TABS_KEY);
@@ -1872,6 +1613,7 @@ function _temp$1(node) {
 const RUN_SQL = adminRef(ADMIN_FUNCTIONS.runSql);
 const STORAGE_KEY = "lunora-studio-sql-queries";
 const HISTORY_KEY = "lunora-studio-sql-history";
+const SPLIT_VIEW_KEY = "lunora-studio-sql-split-view";
 const HISTORY_LIMIT = 25;
 const GUTTER_STYLE = {
   minWidth: "2.75rem",
@@ -1990,6 +1732,7 @@ const SqlEditorPanel = ({
   const [outputs, setOutputs] = useState({});
   const [shardKey, setShardKey] = useState(initialShardKey ?? "");
   const [running, setRunning] = useState(false);
+  const [splitView, setSplitView] = usePersistedValue(SPLIT_VIEW_KEY, false);
   const [tabMenu, setTabMenu] = useState(null);
   const [pendingBulk, setPendingBulk] = useState(null);
   const gutterRef = useRef(null);
@@ -2310,11 +2053,16 @@ const SqlEditorPanel = ({
   const showChart = () => {
     setActivePane("chart");
   };
+  const toggleSplit = () => {
+    setSplitView(!splitView);
+  };
   const lineCount = draft.split("\n").length;
   const onSearchChange = (event_7) => {
     setSearch(event_7.target.value);
   };
   const tabClass = (selected) => `border-b-2 px-3 py-2 text-sm outline-none transition-colors ${selected ? "border-foreground font-medium text-foreground" : "border-transparent text-muted-foreground hover:text-foreground"}`;
+  const workspaceClass = splitView ? "flex min-h-0 flex-1 flex-row" : "flex min-h-0 flex-1 flex-col";
+  const resultsClass = splitView ? "flex w-2/5 min-h-0 min-w-0 shrink-0 flex-col border-s border-border" : "flex h-2/5 min-h-0 shrink-0 flex-col border-t border-border";
   return /* @__PURE__ */ jsxDEV("div", {
     className: "flex h-full min-w-0",
     "data-testid": "lunora-sql-editor",
@@ -2432,122 +2180,152 @@ const SqlEditorPanel = ({
           )
         }, void 0, false)]
       }, void 0, true), /* @__PURE__ */ jsxDEV("div", {
-        className: "flex min-h-0 flex-1",
+        className: workspaceClass,
         children: [/* @__PURE__ */ jsxDEV("div", {
-          "aria-hidden": "true",
-          className: "shrink-0 select-none overflow-hidden border-e border-border bg-muted/30 py-3 text-end font-mono text-xs leading-5 text-muted-foreground/60",
-          ref: gutterRef,
-          style: GUTTER_STYLE,
-          children: Array.from({
-            length: lineCount
-          }, (_, index_0) => /* @__PURE__ */ jsxDEV("div", {
-            children: index_0 + 1
-          }, index_0, false))
-        }, void 0, false), /* @__PURE__ */ jsxDEV("div", {
-          className: "relative min-w-0 flex-1",
-          children: [/* @__PURE__ */ jsxDEV("textarea", {
-            "aria-activedescendant": autocompleteState === null ? void 0 : `${listboxId}-opt-${autocompleteState.active.toString()}`,
-            "aria-autocomplete": "list",
-            "aria-controls": autocompleteState === null ? void 0 : listboxId,
-            "aria-expanded": autocompleteState !== null,
-            "aria-label": t("SQL query"),
-            className: "size-full resize-none bg-background p-3 font-mono text-xs leading-5 outline-none",
-            "data-testid": "sql-input",
-            onBlur: onEditorBlur,
-            onChange: onDraftChange,
-            onKeyDown: onEditorKeyDown,
-            onScroll: onEditorScroll,
-            onSelect: onEditorSelect,
-            placeholder: "SELECT * FROM …",
-            ref: editorRef,
-            role: "combobox",
-            spellCheck: false,
-            value: draft
-          }, void 0, false), /* @__PURE__ */ jsxDEV(AutocompletePopover, {
-            listboxId,
-            onPick: onPickSuggestion,
-            state: autocompleteState
-          }, void 0, false)]
-        }, void 0, true)]
-      }, void 0, true), /* @__PURE__ */ jsxDEV("div", {
-        className: "flex h-2/5 min-h-0 shrink-0 flex-col border-t border-border",
-        children: [/* @__PURE__ */ jsxDEV("div", {
-          className: "flex shrink-0 items-center gap-2 border-b border-border pe-2",
-          children: [/* @__PURE__ */ jsxDEV("button", {
-            className: tabClass(tab === "results"),
-            "data-testid": "sql-tab-results",
-            onClick: showResults,
-            type: "button",
-            children: t("Results")
-          }, void 0, false), /* @__PURE__ */ jsxDEV("button", {
-            className: tabClass(tab === "chart"),
-            "data-testid": "sql-tab-chart",
-            onClick: showChart,
-            type: "button",
-            children: t("Chart")
-          }, void 0, false), /* @__PURE__ */ jsxDEV("button", {
-            className: tabClass(tab === "explain"),
-            "data-testid": "sql-tab-explain",
-            onClick: showExplain,
-            type: "button",
-            children: t("Explain")
+          className: "flex min-h-0 min-w-0 flex-1",
+          children: [/* @__PURE__ */ jsxDEV("div", {
+            "aria-hidden": "true",
+            className: "shrink-0 select-none overflow-hidden border-e border-border bg-muted/30 py-3 text-end font-mono text-xs leading-5 text-muted-foreground/60",
+            ref: gutterRef,
+            style: GUTTER_STYLE,
+            children: Array.from({
+              length: lineCount
+            }, (_, index_0) => /* @__PURE__ */ jsxDEV("div", {
+              children: index_0 + 1
+            }, index_0, false))
           }, void 0, false), /* @__PURE__ */ jsxDEV("div", {
-            className: "ms-auto flex items-center gap-2",
-            children: [result !== null && result.columns.length > 0 && /* @__PURE__ */ jsxDEV(ExportMenu, {
-              columns: result.columns,
-              name: "query-result",
-              rows: result.rows
+            className: "relative min-w-0 flex-1",
+            children: [/* @__PURE__ */ jsxDEV("textarea", {
+              "aria-activedescendant": autocompleteState === null ? void 0 : `${listboxId}-opt-${autocompleteState.active.toString()}`,
+              "aria-autocomplete": "list",
+              "aria-controls": autocompleteState === null ? void 0 : listboxId,
+              "aria-expanded": autocompleteState !== null,
+              "aria-label": t("SQL query"),
+              className: "size-full resize-none bg-background p-3 font-mono text-xs leading-5 outline-none",
+              "data-testid": "sql-input",
+              onBlur: onEditorBlur,
+              onChange: onDraftChange,
+              onKeyDown: onEditorKeyDown,
+              onScroll: onEditorScroll,
+              onSelect: onEditorSelect,
+              placeholder: "SELECT * FROM …",
+              ref: editorRef,
+              role: "combobox",
+              spellCheck: false,
+              value: draft
+            }, void 0, false), /* @__PURE__ */ jsxDEV(AutocompletePopover, {
+              listboxId,
+              onPick: onPickSuggestion,
+              state: autocompleteState
+            }, void 0, false)]
+          }, void 0, true)]
+        }, void 0, true), /* @__PURE__ */ jsxDEV("div", {
+          className: resultsClass,
+          children: [/* @__PURE__ */ jsxDEV("div", {
+            className: "flex shrink-0 items-center gap-2 border-b border-border pe-2",
+            children: [/* @__PURE__ */ jsxDEV("button", {
+              className: tabClass(tab === "results"),
+              "data-testid": "sql-tab-results",
+              onClick: showResults,
+              type: "button",
+              children: t("Results")
             }, void 0, false), /* @__PURE__ */ jsxDEV("button", {
-              className: "inline-flex items-center rounded-md border border-border px-3 py-1.5 text-xs font-medium text-foreground outline-none transition-colors hover:bg-accent focus-visible:bg-accent disabled:pointer-events-none disabled:opacity-50",
-              "data-testid": "sql-format",
-              disabled: running,
-              onClick: formatDraft,
+              className: tabClass(tab === "chart"),
+              "data-testid": "sql-tab-chart",
+              onClick: showChart,
               type: "button",
-              children: t("Format")
-            }, void 0, false), /* @__PURE__ */ jsxDEV(ShardInput, {
-              onChange: setShardKey,
-              testId: "sql-shard-input",
-              value: shardKey
+              children: t("Chart")
             }, void 0, false), /* @__PURE__ */ jsxDEV("button", {
-              className: "inline-flex items-center gap-1.5 rounded-md bg-primary px-3 py-1.5 text-xs font-medium text-primary-foreground outline-none transition-colors hover:bg-primary/90 focus-visible:bg-primary/90 disabled:pointer-events-none disabled:opacity-50",
-              "data-testid": "sql-run",
-              disabled: running,
-              onClick: onRun,
+              className: tabClass(tab === "explain"),
+              "data-testid": "sql-tab-explain",
+              onClick: showExplain,
               type: "button",
-              children: [running ? t("Running…") : t("Run"), /* @__PURE__ */ jsxDEV("kbd", {
-                className: "rounded border border-primary-foreground/30 px-1 font-sans text-[10px]",
-                children: "⌘↵"
+              children: t("Explain")
+            }, void 0, false), /* @__PURE__ */ jsxDEV("div", {
+              className: "ms-auto flex items-center gap-2",
+              children: [/* @__PURE__ */ jsxDEV("button", {
+                "aria-label": t("Split editor and results"),
+                "aria-pressed": splitView,
+                className: `inline-flex items-center rounded-md border border-border px-2 py-1.5 outline-none transition-colors hover:bg-accent focus-visible:bg-accent ${splitView ? "bg-accent text-foreground" : "text-muted-foreground"}`,
+                "data-testid": "sql-split-toggle",
+                onClick: toggleSplit,
+                title: t("Split editor and results"),
+                type: "button",
+                children: /* @__PURE__ */ jsxDEV("svg", {
+                  "aria-hidden": "true",
+                  className: "size-4",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  strokeWidth: 1.7,
+                  viewBox: "0 0 24 24",
+                  children: [/* @__PURE__ */ jsxDEV("rect", {
+                    height: "16",
+                    rx: "2",
+                    width: "18",
+                    x: "3",
+                    y: "4"
+                  }, void 0, false), /* @__PURE__ */ jsxDEV("path", {
+                    d: "M12 4v16"
+                  }, void 0, false)]
+                }, void 0, true)
+              }, void 0, false), result !== null && result.columns.length > 0 && /* @__PURE__ */ jsxDEV(ExportMenu, {
+                columns: result.columns,
+                name: "query-result",
+                rows: result.rows
+              }, void 0, false), /* @__PURE__ */ jsxDEV("button", {
+                className: "inline-flex items-center rounded-md border border-border px-3 py-1.5 text-xs font-medium text-foreground outline-none transition-colors hover:bg-accent focus-visible:bg-accent disabled:pointer-events-none disabled:opacity-50",
+                "data-testid": "sql-format",
+                disabled: running,
+                onClick: formatDraft,
+                type: "button",
+                children: t("Format")
+              }, void 0, false), /* @__PURE__ */ jsxDEV(ShardInput, {
+                onChange: setShardKey,
+                testId: "sql-shard-input",
+                value: shardKey
+              }, void 0, false), /* @__PURE__ */ jsxDEV("button", {
+                className: "inline-flex items-center gap-1.5 rounded-md bg-primary px-3 py-1.5 text-xs font-medium text-primary-foreground outline-none transition-colors hover:bg-primary/90 focus-visible:bg-primary/90 disabled:pointer-events-none disabled:opacity-50",
+                "data-testid": "sql-run",
+                disabled: running,
+                onClick: onRun,
+                type: "button",
+                children: [running ? t("Running…") : t("Run"), /* @__PURE__ */ jsxDEV("kbd", {
+                  className: "rounded border border-primary-foreground/30 px-1 font-sans text-[10px]",
+                  children: "⌘↵"
+                }, void 0, false)]
+              }, void 0, true)]
+            }, void 0, true)]
+          }, void 0, true), /* @__PURE__ */ jsxDEV("div", {
+            className: "min-h-0 flex-1 overflow-auto",
+            children: [error !== null && /* @__PURE__ */ jsxDEV(Alert, {
+              className: "m-3 font-mono text-xs",
+              testId: "sql-error",
+              variant: "destructive",
+              children: error
+            }, void 0, false), error === null && result === null && /* @__PURE__ */ jsxDEV("p", {
+              className: "p-4 text-sm text-muted-foreground",
+              "data-testid": "sql-empty",
+              children: t("Click Run to execute your query.")
+            }, void 0, false), error === null && result !== null && /* @__PURE__ */ jsxDEV("div", {
+              "data-testid": "sql-result",
+              children: [tab === "chart" ? /* @__PURE__ */ jsxDEV(SqlResultChart, {
+                result
+              }, void 0, false) : /* @__PURE__ */ jsxDEV(SqlResultTable, {
+                result
+              }, void 0, false), /* @__PURE__ */ jsxDEV("p", {
+                className: "border-t border-border px-3 py-1.5 text-xs text-muted-foreground",
+                "data-testid": "sql-count",
+                children: result.truncated ? t("Showing the first {max} of {count} rows.", {
+                  count: result.rowCount,
+                  max: result.rows.length
+                }) : t("{count} rows", {
+                  count: result.rowCount
+                })
               }, void 0, false)]
             }, void 0, true)]
           }, void 0, true)]
-        }, void 0, true), /* @__PURE__ */ jsxDEV("div", {
-          className: "min-h-0 flex-1 overflow-auto",
-          children: [error !== null && /* @__PURE__ */ jsxDEV(Alert, {
-            className: "m-3 font-mono text-xs",
-            testId: "sql-error",
-            variant: "destructive",
-            children: error
-          }, void 0, false), error === null && result === null && /* @__PURE__ */ jsxDEV("p", {
-            className: "p-4 text-sm text-muted-foreground",
-            "data-testid": "sql-empty",
-            children: t("Click Run to execute your query.")
-          }, void 0, false), error === null && result !== null && /* @__PURE__ */ jsxDEV("div", {
-            "data-testid": "sql-result",
-            children: [tab === "chart" ? /* @__PURE__ */ jsxDEV(SqlResultChart, {
-              result
-            }, void 0, false) : /* @__PURE__ */ jsxDEV(SqlResultTable, {
-              result
-            }, void 0, false), /* @__PURE__ */ jsxDEV("p", {
-              className: "border-t border-border px-3 py-1.5 text-xs text-muted-foreground",
-              "data-testid": "sql-count",
-              children: result.truncated ? t("Showing the first {max} of {count} rows.", {
-                count: result.rowCount,
-                max: result.rows.length
-              }) : t("{count} rows", {
-                count: result.rowCount
-              })
-            }, void 0, false)]
-          }, void 0, true)]
         }, void 0, true)]
       }, void 0, true)]
     }, void 0, true)]
@@ -2559,4 +2337,4 @@ function _temp(column) {
   }, column, false);
 }
 
-export { Alert as A, SqlEditorPanel as S, SqlResultChart as a, newId as n, usePersistedList as u };
+export { SqlEditorPanel };