@rebasepro/studio 0.0.1-canary.eae7889 → 0.1.0

package/dist/{SQLEditor-CkVx9vgr.js → SQLEditor-Cr9Kg_Qg.js}

@@ -3,7 +3,7 @@ import { c } from "react-compiler-runtime";
 import { useTranslation, ErrorView, useRebaseContext, useStudioSideEntityController, useSnackbarController, useStudioCollectionRegistry, ConfirmationDialog, IconForView } from "@rebasepro/core";
 import { useState, useRef, useCallback, useEffect } from "react";
 import { createPortal } from "react-dom";
-import { CircularProgress, Typography, IconButton, iconSize, cls, defaultBorderMixin, Menu, MenuItem, Button, Tabs, Tab, Collapse, ResizablePanels, Tooltip, Dialog, DialogTitle, DialogContent, TextField, DialogActions, VirtualTable } from "@rebasepro/ui";
+import { CircularProgress, Typography, IconButton, iconSize, cls, defaultBorderMixin, Menu, MenuItem, Button, Tabs, Tab, Collapse, ResizablePanels, Tooltip, Checkbox, Dialog, DialogTitle, DialogContent, TextField, DialogActions, VirtualTable, TextareaAutosize } from "@rebasepro/ui";
 import { RefreshCwIcon, CopyIcon, MoreVerticalIcon, Trash2Icon, TerminalIcon, XIcon, PlusIcon, MenuIcon, DatabaseIcon, PlayIcon, PencilIcon } from "lucide-react";
 import { M as MonacoEditor } from "./MonacoEditor-CMYEjiRf.js";
 import { parseFirst } from "pgsql-ast-parser";
@@ -45,12 +45,12 @@ const SchemaBrowser = ({
           /* @__PURE__ */ jsx("svg", { className: cls("w-3 h-3 mr-1 transition-transform shrink-0", expandedTables[`${schemaName}.${table.tableName}`] ? "rotate-90" : ""), fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx("path", { d: "M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" }) }),
           /* @__PURE__ */ jsx("svg", { className: "w-3.5 h-3.5 mr-1 shrink-0 text-text-disabled dark:text-text-disabled-dark", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M3 10h18M3 14h18m-9-4v8m-7 0h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" }) }),
           /* @__PURE__ */ jsx(Typography, { variant: "body2", className: "text-text-secondary dark:text-text-secondary-dark text-xs truncate flex-1 min-w-0", children: table.tableName }),
-          /* @__PURE__ */ jsxs("div", { className: "flex opacity-0 group-hover:opacity-100 focus-within:opacity-100 absolute right-1 items-center bg-surface-100 dark:bg-surface-950 px-1 gap-1 rounded transition-opacity", children: [
-            /* @__PURE__ */ jsx(IconButton, { size: "smallest", className: "transition-colors text-text-secondary hover:text-text-primary pointer-events-auto", onClick: (e) => {
+          /* @__PURE__ */ jsxs("div", { className: "flex opacity-0 group-hover:opacity-100 focus-within:opacity-100 absolute right-1 items-center bg-surface-100 dark:bg-surface-800 px-1 gap-1 rounded transition-opacity", children: [
+            /* @__PURE__ */ jsx(IconButton, { size: "small", onClick: (e) => {
               e.stopPropagation();
               navigator.clipboard.writeText(table.tableName);
-            }, title: "CopyIcon table name", children: /* @__PURE__ */ jsx(CopyIcon, { size: iconSize.smallest }) }),
-            /* @__PURE__ */ jsxs(Menu, { trigger: /* @__PURE__ */ jsx(IconButton, { size: "smallest", className: "transition-colors text-text-secondary hover:text-text-primary pointer-events-auto", onClick: (e_0) => e_0.stopPropagation(), title: "Generate SQL templates", children: /* @__PURE__ */ jsx(MoreVerticalIcon, { size: iconSize.smallest }) }), children: [
+            }, title: "CopyIcon table name", children: /* @__PURE__ */ jsx(CopyIcon, { size: iconSize.small }) }),
+            /* @__PURE__ */ jsxs(Menu, { trigger: /* @__PURE__ */ jsx(IconButton, { size: "small", onClick: (e_0) => e_0.stopPropagation(), title: "Generate SQL templates", children: /* @__PURE__ */ jsx(MoreVerticalIcon, { size: iconSize.small }) }), children: [
               /* @__PURE__ */ jsx(MenuItem, { dense: true, className: "text-xs", onClick: (e_1) => {
                 e_1.stopPropagation();
                 onTableClick?.(`SELECT * FROM ${schemaName !== "public" ? `${schemaName}.` : ""}${table.tableName} LIMIT 100;`);
@@ -87,7 +87,7 @@ WHERE id = ?;`);
           /* @__PURE__ */ jsx("svg", { className: "w-3 h-3 mr-1.5 text-text-disabled dark:text-text-disabled-dark shrink-0", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M9 4.5v15m6-15v15m-10.5-1.5h15c.621 0 1.125-.504 1.125-1.125V5.625c0-.621-.504-1.125-1.125-1.125h-15c-.621 0-1.125.504-1.125 1.125v12.75c0 .621.504 1.125 1.125 1.125Z" }) }),
           /* @__PURE__ */ jsx(Typography, { variant: "caption", className: "text-text-primary dark:text-text-primary-dark text-[11px] truncate flex-grow mr-2", children: col.name }),
           /* @__PURE__ */ jsx(Typography, { variant: "caption", className: "text-text-disabled dark:text-text-disabled-dark text-[9px] truncate mr-1 uppercase shrink-0", title: col.dataType, children: col.dataType }),
-          /* @__PURE__ */ jsx(IconButton, { size: "smallest", className: "opacity-0 group-hover:opacity-100 absolute right-1 bg-surface-50 dark:bg-surface-950 transition-colors pointer-events-auto", onClick: (e_6) => {
+          /* @__PURE__ */ jsx(IconButton, { size: "smallest", className: "opacity-0 group-hover:opacity-100 absolute right-1 bg-surface-50 dark:bg-surface-800 transition-colors pointer-events-auto", onClick: (e_6) => {
             e_6.stopPropagation();
             navigator.clipboard.writeText(col.name);
           }, title: "CopyIcon column name", children: /* @__PURE__ */ jsx(CopyIcon, { size: iconSize.smallest }) })
@@ -668,7 +668,7 @@ const ExplainVisualizer = (t0) => {
   }
   let t37;
   if ($[67] !== expanded || $[68] !== hasChildren || $[69] !== plan.Plans) {
-    t37 = expanded && hasChildren && /* @__PURE__ */ jsx("div", { className: "flex flex-col space-y-2 mt-[-4px]", children: plan.Plans.map(_temp) });
+    t37 = expanded && hasChildren && /* @__PURE__ */ jsx("div", { className: "flex flex-col space-y-2 mt-[-4px]", children: plan.Plans.map(_temp$1) });
     $[67] = expanded;
     $[68] = hasChildren;
     $[69] = plan.Plans;
@@ -695,7 +695,7 @@ const ExplainVisualizer = (t0) => {
   }
   return t38;
 };
-function _temp(childPlan, idx) {
+function _temp$1(childPlan, idx) {
   return /* @__PURE__ */ jsx(ExplainVisualizer, { plan: childPlan, isRoot: false }, idx);
 }
 let VirtualTableInput = null;
@@ -707,7 +707,7 @@ try {
 const STORAGE_KEY_TABS = "rebase_sql_tabs";
 const STORAGE_KEY_ACTIVE_TAB = "rebase_sql_active_tab";
 const FixedEditorOverlay = (t0) => {
-  const $ = c(29);
+  const $ = c(26);
   const {
     displayValue,
     onSave,
@@ -798,90 +798,70 @@ const FixedEditorOverlay = (t0) => {
     t7 = $[9];
   }
   let t8;
-  if ($[10] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+  if ($[10] !== resolvedMaxHeight) {
     t8 = {
-      minHeight: "32px"
+      minHeight: "32px",
+      maxHeight: resolvedMaxHeight
     };
-    $[10] = t8;
+    $[10] = resolvedMaxHeight;
+    $[11] = t8;
   } else {
-    t8 = $[10];
+    t8 = $[11];
   }
   let t10;
   let t9;
-  if ($[11] !== resolvedMaxHeight) {
-    t9 = (e) => {
-      const val = e.target.value;
-      e.target.value = "";
-      e.target.value = val;
-      e.target.style.height = "auto";
-      e.target.style.height = `${Math.min(e.target.scrollHeight, resolvedMaxHeight)}px`;
-    };
-    t10 = (e_0) => {
-      e_0.target.style.height = "auto";
-      e_0.target.style.height = `${Math.min(e_0.target.scrollHeight, resolvedMaxHeight)}px`;
-    };
-    $[11] = resolvedMaxHeight;
-    $[12] = t10;
-    $[13] = t9;
-  } else {
-    t10 = $[12];
-    t9 = $[13];
-  }
-  let t11;
-  let t12;
-  if ($[14] !== onCancel || $[15] !== onSave) {
-    t11 = (e_1) => {
-      onSave(e_1.target.value || null);
+  if ($[12] !== onCancel || $[13] !== onSave) {
+    t9 = (e_0) => {
+      onSave(e_0.target.value || null);
       onCancel();
     };
-    t12 = (e_2) => {
-      if (e_2.key === "Enter" && !e_2.shiftKey) {
-        e_2.preventDefault();
-        onSave(e_2.currentTarget.value || null);
+    t10 = (e_1) => {
+      if (e_1.key === "Enter" && !e_1.shiftKey) {
+        e_1.preventDefault();
+        onSave(e_1.currentTarget.value || null);
         onCancel();
       }
-      if (e_2.key === "Escape") {
+      if (e_1.key === "Escape") {
         onCancel();
       }
     };
-    $[14] = onCancel;
-    $[15] = onSave;
-    $[16] = t11;
-    $[17] = t12;
+    $[12] = onCancel;
+    $[13] = onSave;
+    $[14] = t10;
+    $[15] = t9;
   } else {
-    t11 = $[16];
-    t12 = $[17];
+    t10 = $[14];
+    t9 = $[15];
   }
-  let t13;
-  if ($[18] !== displayValue || $[19] !== t10 || $[20] !== t11 || $[21] !== t12 || $[22] !== t9) {
-    t13 = /* @__PURE__ */ jsx("textarea", { className: "w-full h-full bg-transparent outline-none border-none ring-0 font-mono text-[13px] text-text-primary dark:text-text-primary-dark px-4 py-1.5 resize-none overflow-y-auto", defaultValue: displayValue, autoFocus: true, style: t8, onFocus: t9, onChange: t10, onBlur: t11, onKeyDown: t12 });
-    $[18] = displayValue;
-    $[19] = t10;
+  let t11;
+  if ($[16] !== displayValue || $[17] !== t10 || $[18] !== t8 || $[19] !== t9) {
+    t11 = /* @__PURE__ */ jsx(TextareaAutosize, { className: "w-full h-full bg-transparent outline-none border-none ring-0 font-mono text-[13px] text-text-primary dark:text-text-primary-dark px-4 py-1.5 resize-none overflow-y-auto", defaultValue: displayValue, autoFocus: true, style: t8, onFocus: _temp, onBlur: t9, onKeyDown: t10 });
+    $[16] = displayValue;
+    $[17] = t10;
+    $[18] = t8;
+    $[19] = t9;
     $[20] = t11;
-    $[21] = t12;
-    $[22] = t9;
-    $[23] = t13;
   } else {
-    t13 = $[23];
+    t11 = $[20];
   }
-  let t14;
-  if ($[24] !== t13 || $[25] !== t7) {
-    t14 = createPortal(/* @__PURE__ */ jsx("div", { className: "fixed z-[9999] bg-surface-50 dark:bg-surface-900 border-2 border-primary dark:border-primary-dark shadow-xl flex flex-col", style: t7, children: t13 }), document.body);
-    $[24] = t13;
-    $[25] = t7;
-    $[26] = t14;
+  let t12;
+  if ($[21] !== t11 || $[22] !== t7) {
+    t12 = createPortal(/* @__PURE__ */ jsx("div", { className: "fixed z-[9999] bg-surface-50 dark:bg-surface-900 border-2 border-primary dark:border-primary-dark shadow-xl flex flex-col", style: t7, children: t11 }), document.body);
+    $[21] = t11;
+    $[22] = t7;
+    $[23] = t12;
   } else {
-    t14 = $[26];
+    t12 = $[23];
   }
-  let t15;
-  if ($[27] !== t14) {
-    t15 = /* @__PURE__ */ jsx("div", { ref: anchorRef, className: "w-full h-full min-h-[20px]", children: t14 });
-    $[27] = t14;
-    $[28] = t15;
+  let t13;
+  if ($[24] !== t12) {
+    t13 = /* @__PURE__ */ jsx("div", { ref: anchorRef, className: "w-full h-full min-h-[20px]", children: t12 });
+    $[24] = t12;
+    $[25] = t13;
   } else {
-    t15 = $[28];
+    t13 = $[25];
   }
-  return t15;
+  return t13;
 };
 const SQLEditor = () => {
   const {
@@ -1716,12 +1696,15 @@ const SQLEditor = () => {
           /* @__PURE__ */ jsx(IconButton, { size: "small", onClick: handleAddTab, className: "ml-2 flex-shrink-0", children: /* @__PURE__ */ jsx(PlusIcon, { size: iconSize.smallest }) })
         ] }) }),
         /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center justify-end pr-2 gap-1.5", children: [
-          /* @__PURE__ */ jsx(Tooltip, { title: t("studio_sql_format_sql"), children: /* @__PURE__ */ jsx(IconButton, { size: "small", onClick: handlePrettify, className: "text-text-secondary hover:text-text-primary transition-colors", children: /* @__PURE__ */ jsx(MenuIcon, { size: iconSize.smallest }) }) }),
+          /* @__PURE__ */ jsx(Tooltip, { title: t("studio_sql_format_sql"), children: /* @__PURE__ */ jsx(IconButton, { size: "small", onClick: handlePrettify, children: /* @__PURE__ */ jsx(MenuIcon, { size: iconSize.smallest }) }) }),
           /* @__PURE__ */ jsx(Button, { variant: "text", size: "small", onClick: handleExplain, disabled: loading, children: t("studio_sql_explain") }),
           /* @__PURE__ */ jsx("div", { className: "h-4 w-px bg-surface-200 dark:bg-surface-950 mx-1" }),
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2 px-2 cursor-pointer", onClick: () => setAutoLimit(!autoLimit), children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2 px-2", onClick: (e_14) => {
+            setAutoLimit(!autoLimit);
+            e_14.stopPropagation();
+          }, children: [
             /* @__PURE__ */ jsx(Typography, { variant: "caption", className: "text-[11px] text-text-secondary cursor-pointer select-none", children: t("studio_sql_limit_1000") }),
-            /* @__PURE__ */ jsx("input", { type: "checkbox", checked: autoLimit, onChange: (e_14) => setAutoLimit(e_14.target.checked), onClick: (e_15) => e_15.stopPropagation(), className: "w-3.5 h-3.5 rounded border-surface-300 text-primary focus:ring-primary cursor-pointer" })
+            /* @__PURE__ */ jsx("div", { onClick: (e_15) => e_15.stopPropagation(), children: /* @__PURE__ */ jsx(Checkbox, { checked: autoLimit, onCheckedChange: setAutoLimit, size: "smallest", padding: false }) })
           ] }),
           /* @__PURE__ */ jsx("div", { className: "h-4 w-px bg-surface-200 dark:bg-surface-950 mx-1" }),
           /* @__PURE__ */ jsx(Tooltip, { title: isFavorite ? t("studio_sql_remove_from_favorites") : t("studio_sql_add_to_favorites"), children: /* @__PURE__ */ jsx(IconButton, { size: "small", onClick: () => {
@@ -1786,7 +1769,12 @@ const SQLEditor = () => {
     } })
   ] });
 };
+function _temp(e) {
+  const val = e.target.value;
+  e.target.value = "";
+  e.target.value = val;
+}
 export {
   SQLEditor
 };
-//# sourceMappingURL=SQLEditor-CkVx9vgr.js.map
+//# sourceMappingURL=SQLEditor-Cr9Kg_Qg.js.map