@lunora/studio 1.0.0-alpha.37 → 1.0.0-alpha.39

package/dist/packem_chunks/SqlEditorPanel.js

@@ -1,16 +1,16 @@
 import { c } from 'react/compiler-runtime';
 import { useLunora } from '@lunora/react';
 import { useState, useRef, useEffect, useId } from 'react';
-import { u as usePersistedList, n as newId, S as SqlResultChart } from '../packem_shared/browser-storage-tLOxkIHd.js';
+import { u as usePersistedList, n as newId, a as usePersistedValue, S as SqlResultChart } from '../packem_shared/browser-storage-BTrX4y3B.js';
 import { ShardInput } from '../packem_shared/ShardInput-gx_DZXXn.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-BHHJi3Gb.js';
-import { f as fireAndForget, c as callOptions, a as adminRef, e as errorMessage } from '../packem_shared/internal-DTsYVn-g.js';
+import { f as fireAndForget, c as callOptions, a as adminRef, e as errorMessage } from '../packem_shared/internal-CYcbqMjX.js';
 import { r as recordShard } from '../packem_shared/shard-history-DyebH1R5.js';
-import { C as CellValue } from '../packem_shared/data-grid-Jz8FqQ2C.js';
-import { E as ExportMenu } from '../packem_shared/grid-features-CUr8Z1_O.js';
+import { C as CellValue } from '../packem_shared/data-grid-CdXztApG.js';
+import { E as ExportMenu } from '../packem_shared/grid-features-BF-KBDFz.js';
 import { c as cn } from '../packem_shared/utils-B05Dmz_H.js';
 import { jsxDEV, Fragment } from 'react/jsx-dev-runtime';
 
@@ -1050,34 +1050,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);
@@ -1633,6 +1606,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",
@@ -1751,6 +1725,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);
@@ -2071,11 +2046,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",
@@ -2193,122 +2173,152 @@ const SqlEditorPanel = ({
           )
         }, void 0, false)]
       }, void 0, true), /* @__PURE__ */ jsxDEV("div", {
-        className: "flex min-h-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: "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",
+        className: workspaceClass,
         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)]

package/dist/packem_chunks/TableEditor.js

@@ -5,9 +5,9 @@ import { useRef, useState, useEffect } from 'react';
 import { T as TIER_META } from '../packem_shared/storage-tier-CL98eOvn.js';
 import { useT } from '../packem_shared/DEFAULT_LOCALE-CiX4W7Kr.js';
 import { s as searchToDataView, d as dataViewToSearch } from '../packem_shared/data-view-params-Cd6yRVbv.js';
-import { f as fireAndForget } from '../packem_shared/internal-DTsYVn-g.js';
-import { DataBrowser } from '../packem_shared/DataBrowser-BeVNxSVm.js';
-import { GlobalDataBrowser } from '../packem_shared/GlobalDataBrowser-ErfvIs1S.js';
+import { f as fireAndForget } from '../packem_shared/internal-CYcbqMjX.js';
+import { DataBrowser } from '../packem_shared/DataBrowser-D2ywrdId.js';
+import { GlobalDataBrowser } from '../packem_shared/GlobalDataBrowser-BkTPLzAY.js';
 import { jsxDEV } from 'react/jsx-dev-runtime';
 
 const STORAGE_KEY = "lunora-studio-saved-queries";

package/dist/packem_chunks/analytics-panel.js

@@ -5,7 +5,7 @@ import { C as Card } from '../packem_shared/card-DURq3ElK.js';
 import { E as EmptyState } from '../packem_shared/empty-state-DY_oe0k6.js';
 import { T as Table, a as TableHeader, b as TableRow, d as TableBody, e as TableCell, c as TableHead } from '../packem_shared/table-DsCa9Qp9.js';
 import { useT } from '../packem_shared/DEFAULT_LOCALE-CiX4W7Kr.js';
-import { e as errorMessage, f as fireAndForget, h as formatCell } from '../packem_shared/internal-DTsYVn-g.js';
+import { e as errorMessage, f as fireAndForget, h as formatCell } from '../packem_shared/internal-CYcbqMjX.js';
 import { jsxDEV } from 'react/jsx-dev-runtime';
 
 const DEFAULT_DATASET = "ANALYTICS";