@rebasepro/studio 0.4.0 → 0.6.0

package/dist/SQLEditor-BLuq_zDM.js

@@ -0,0 +1,1964 @@
+import { t as MonacoEditor } from "./MonacoEditor-COZqrIJ1.js";
+import { ConfirmationDialog, ErrorView, IconForView, useRebaseContext, useSnackbarController, useStudioCollectionRegistry, useStudioSideEntityController, useTranslation } from "@rebasepro/core";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Button, Checkbox, CircularProgress, Collapse, CopyIcon, DatabaseIcon, Dialog, DialogActions, DialogContent, DialogTitle, IconButton, Menu, MenuIcon, MenuItem, MoreVerticalIcon, PencilIcon, PlayIcon, PlusIcon, RefreshCwIcon, ResizablePanels, Tab, Tabs, TerminalIcon, TextField, TextareaAutosize, Tooltip, Trash2Icon, Typography, VirtualTable, XIcon, cls, defaultBorderMixin, iconSize } from "@rebasepro/ui";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { toSnakeCase } from "@rebasepro/utils";
+import { createPortal } from "react-dom";
+import { parseFirst } from "pgsql-ast-parser";
+//#region src/components/SQLEditor/SchemaBrowser.tsx
+var SchemaBrowser = ({ onTableClick, schemas, isSchemaLoading, schemaError, onRetrySchema }) => {
+	const [expandedSchemas, setExpandedSchemas] = useState({ public: true });
+	const [expandedTables, setExpandedTables] = useState({});
+	const { t } = useTranslation();
+	if (isSchemaLoading) return /* @__PURE__ */ jsx("div", {
+		className: "p-4 flex justify-center",
+		children: /* @__PURE__ */ jsx(CircularProgress, { size: "small" })
+	});
+	if (schemaError) return /* @__PURE__ */ jsx("div", {
+		className: "p-2",
+		children: /* @__PURE__ */ jsx(ErrorView, {
+			error: schemaError,
+			onRetry: onRetrySchema
+		})
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col h-full overflow-hidden",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: cls("flex items-center justify-between px-3 py-2 border-b bg-surface-50 dark:bg-surface-900 min-h-[48px]", defaultBorderMixin),
+			children: [/* @__PURE__ */ jsx(Typography, {
+				variant: "caption",
+				className: "font-bold uppercase tracking-wider text-text-disabled dark:text-text-disabled-dark",
+				children: t("studio_schema_tables")
+			}), /* @__PURE__ */ jsx(IconButton, {
+				size: "small",
+				onClick: onRetrySchema,
+				title: "Refresh schema",
+				children: /* @__PURE__ */ jsx(RefreshCwIcon, { size: iconSize.smallest })
+			})]
+		}), /* @__PURE__ */ jsx("div", {
+			className: "flex-grow overflow-y-auto no-scrollbar p-1",
+			children: Object.keys(schemas).length === 0 ? /* @__PURE__ */ jsx("div", {
+				className: "p-4 text-center",
+				children: /* @__PURE__ */ jsx(Typography, {
+					variant: "caption",
+					className: "text-text-disabled dark:text-text-disabled-dark italic",
+					children: t("studio_schema_no_tables")
+				})
+			}) : Object.entries(schemas).map(([schemaName, tables]) => /* @__PURE__ */ jsxs("div", {
+				className: "mb-2",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex items-center p-1 cursor-pointer hover:bg-surface-100 dark:hover:bg-surface-950 rounded transition-colors",
+					onClick: () => setExpandedSchemas((prev) => ({
+						...prev,
+						[schemaName]: !prev[schemaName]
+					})),
+					children: [/* @__PURE__ */ jsx("svg", {
+						className: cls("w-3 h-3 mr-1 transition-transform", expandedSchemas[schemaName] ? "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(Typography, {
+						variant: "body2",
+						className: "text-text-primary dark:text-text-primary-dark font-medium text-xs truncate flex-grow",
+						children: schemaName
+					})]
+				}), expandedSchemas[schemaName] && /* @__PURE__ */ jsx("div", {
+					className: "ml-3 mt-1 space-y-1",
+					children: tables.map((table) => /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("div", {
+						className: "flex items-center p-1 cursor-pointer hover:bg-surface-100 dark:hover:bg-surface-950 rounded transition-colors group relative",
+						onClick: () => setExpandedTables((prev) => ({
+							...prev,
+							[`${schemaName}.${table.tableName}`]: !prev[`${schemaName}.${table.tableName}`]
+						})),
+						children: [
+							/* @__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-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.small })
+									}),
+									/* @__PURE__ */ jsxs(Menu, {
+										trigger: /* @__PURE__ */ jsx(IconButton, {
+											size: "small",
+											onClick: (e) => e.stopPropagation(),
+											title: "Generate SQL templates",
+											children: /* @__PURE__ */ jsx(MoreVerticalIcon, { size: iconSize.small })
+										}),
+										children: [
+											/* @__PURE__ */ jsx(MenuItem, {
+												dense: true,
+												className: "text-xs",
+												onClick: (e) => {
+													e.stopPropagation();
+													onTableClick?.(`SELECT * FROM ${schemaName !== "public" ? `${schemaName}.` : ""}${table.tableName} LIMIT 100;`);
+												},
+												children: "SELECT (Top 100)"
+											}),
+											/* @__PURE__ */ jsx(MenuItem, {
+												dense: true,
+												className: "text-xs",
+												onClick: (e) => {
+													e.stopPropagation();
+													onTableClick?.(`SELECT \n  ${table.columns.map((c) => c.name).join(",\n  ")}\nFROM ${schemaName !== "public" ? `${schemaName}.` : ""}${table.tableName};`);
+												},
+												children: "SELECT (All columns)"
+											}),
+											/* @__PURE__ */ jsx(MenuItem, {
+												dense: true,
+												className: "text-xs",
+												onClick: (e) => {
+													e.stopPropagation();
+													onTableClick?.(`INSERT INTO ${schemaName !== "public" ? `${schemaName}.` : ""}${table.tableName} (\n  ${table.columns.map((c) => c.name).join(",\n  ")}\n) VALUES (\n  ${table.columns.map(() => "?").join(",\n  ")}\n);`);
+												},
+												children: "INSERT statement"
+											}),
+											/* @__PURE__ */ jsx(MenuItem, {
+												dense: true,
+												className: "text-xs",
+												onClick: (e) => {
+													e.stopPropagation();
+													onTableClick?.(`UPDATE ${schemaName !== "public" ? `${schemaName}.` : ""}${table.tableName} \nSET \n  ${table.columns.map((c) => `${c.name} = ?`).join(",\n  ")}\nWHERE id = ?;`);
+												},
+												children: "UPDATE statement"
+											})
+										]
+									}),
+									/* @__PURE__ */ jsx(Button, {
+										variant: "text",
+										size: "small",
+										className: "text-[10px] text-primary uppercase min-h-0 py-0.5 px-1 font-medium ml-1 flex-shrink-0 leading-none h-[22px]",
+										onClick: (e) => {
+											e.stopPropagation();
+											onTableClick?.(`SELECT * FROM ${schemaName !== "public" ? `${schemaName}.` : ""}${table.tableName} LIMIT 100;`);
+										},
+										children: "SELECT"
+									})
+								]
+							})
+						]
+					}), expandedTables[`${schemaName}.${table.tableName}`] && /* @__PURE__ */ jsx("div", {
+						className: cls("ml-5 mt-1 space-y-0.5 border-l", defaultBorderMixin),
+						children: table.columns.map((col) => /* @__PURE__ */ jsxs("div", {
+							className: "flex items-center p-1 group pl-2 hover:bg-surface-50 dark:hover:bg-surface-950 rounded-r relative min-h-[28px]",
+							children: [
+								/* @__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-800 transition-colors pointer-events-auto",
+									onClick: (e) => {
+										e.stopPropagation();
+										navigator.clipboard.writeText(col.name);
+									},
+									title: "CopyIcon column name",
+									children: /* @__PURE__ */ jsx(CopyIcon, { size: iconSize.smallest })
+								})
+							]
+						}, col.name))
+					})] }, table.tableName))
+				})]
+			}, schemaName))
+		})]
+	});
+};
+//#endregion
+//#region src/components/SQLEditor/SQLEditorSidebar.tsx
+var SQLEditorSidebar = ({ onSelectSnippet, onTableClick, snippets, history, onDeleteSnippet, schemas, isSchemaLoading, schemaError, onRetrySchema }) => {
+	const [activeTab, setActiveTab] = useState("schema");
+	const { t } = useTranslation();
+	return /* @__PURE__ */ jsxs("div", {
+		className: cls("flex flex-col h-full w-full bg-white dark:bg-surface-950 border-r", defaultBorderMixin),
+		children: [/* @__PURE__ */ jsxs(Tabs, {
+			value: activeTab,
+			onValueChange: (v) => setActiveTab(v),
+			variant: "boxy",
+			className: "border-b border-surface-200 dark:border-surface-950",
+			children: [
+				/* @__PURE__ */ jsx(Tab, {
+					value: "schema",
+					children: t("studio_sql_sidebar_schema")
+				}),
+				/* @__PURE__ */ jsx(Tab, {
+					value: "snippets",
+					children: t("studio_sql_sidebar_snippets")
+				}),
+				/* @__PURE__ */ jsx(Tab, {
+					value: "history",
+					children: t("studio_sql_sidebar_history")
+				})
+			]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "flex-grow overflow-hidden relative",
+			children: [
+				activeTab === "schema" && /* @__PURE__ */ jsx(SchemaBrowser, {
+					onTableClick,
+					schemas,
+					isSchemaLoading,
+					schemaError,
+					onRetrySchema
+				}),
+				activeTab === "snippets" && (() => {
+					const favorites = snippets.filter((s) => s.isFavorite);
+					const others = snippets.filter((s) => !s.isFavorite);
+					return /* @__PURE__ */ jsxs("div", {
+						className: "flex flex-col h-full",
+						children: [/* @__PURE__ */ jsx("div", {
+							className: cls("flex items-center justify-between px-3 py-2 border-b bg-surface-50 dark:bg-surface-900 min-h-[48px]", defaultBorderMixin),
+							children: /* @__PURE__ */ jsx(Typography, {
+								variant: "caption",
+								className: "font-bold uppercase tracking-wider text-text-disabled dark:text-text-disabled-dark",
+								children: t("studio_sql_sidebar_snippets")
+							})
+						}), /* @__PURE__ */ jsx("div", {
+							className: "flex-grow overflow-y-auto p-2 space-y-2 no-scrollbar",
+							children: snippets.length === 0 ? /* @__PURE__ */ jsx("div", {
+								className: "p-4 text-center",
+								children: /* @__PURE__ */ jsx(Typography, {
+									variant: "caption",
+									className: "text-text-disabled dark:text-text-disabled-dark",
+									children: t("studio_sql_sidebar_no_snippets")
+								})
+							}) : /* @__PURE__ */ jsxs(Fragment, { children: [favorites.length > 0 && /* @__PURE__ */ jsxs("div", {
+								className: "mb-4",
+								children: [/* @__PURE__ */ jsxs(Typography, {
+									variant: "caption",
+									className: "text-[10px] font-bold uppercase tracking-wider text-text-disabled dark:text-text-disabled-dark mb-2 px-1 flex items-center",
+									children: [/* @__PURE__ */ jsx("svg", {
+										className: "w-3 h-3 mr-1 text-red-500",
+										fill: "currentColor",
+										viewBox: "0 0 20 20",
+										children: /* @__PURE__ */ jsx("path", {
+											fillRule: "evenodd",
+											d: "M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z",
+											clipRule: "evenodd"
+										})
+									}), "Favorites"]
+								}), /* @__PURE__ */ jsx("div", {
+									className: "space-y-2",
+									children: favorites.map((snippet) => /* @__PURE__ */ jsxs("div", {
+										className: cls("group p-2 rounded border hover:border-surface-400 dark:hover:border-surface-600 bg-white dark:bg-surface-900 transition-all cursor-pointer relative", defaultBorderMixin),
+										onClick: () => onSelectSnippet(snippet.sql),
+										children: [
+											/* @__PURE__ */ jsx(Typography, {
+												variant: "body2",
+												className: "text-text-primary dark:text-text-primary-dark font-medium text-[13px] truncate pr-6",
+												children: snippet.name
+											}),
+											/* @__PURE__ */ jsx(Typography, {
+												variant: "caption",
+												className: "text-text-secondary dark:text-text-secondary-dark text-[10px] block mt-1 truncate",
+												children: snippet.sql
+											}),
+											/* @__PURE__ */ jsx(IconButton, {
+												size: "smallest",
+												className: "absolute right-1 top-1 opacity-0 group-hover:opacity-100 text-text-disabled hover:text-red-500 transition-opacity",
+												onClick: (e) => {
+													e.stopPropagation();
+													onDeleteSnippet(snippet.id);
+												},
+												children: /* @__PURE__ */ jsx(Trash2Icon, { size: iconSize.smallest })
+											})
+										]
+									}, snippet.id))
+								})]
+							}), others.length > 0 && /* @__PURE__ */ jsxs("div", { children: [favorites.length > 0 && /* @__PURE__ */ jsx(Typography, {
+								variant: "caption",
+								className: "text-[10px] font-bold uppercase tracking-wider text-text-disabled dark:text-text-disabled-dark mb-2 px-1 mt-4",
+								children: "Others"
+							}), /* @__PURE__ */ jsx("div", {
+								className: "space-y-2",
+								children: others.map((snippet) => /* @__PURE__ */ jsxs("div", {
+									className: cls("group p-2 rounded border hover:border-surface-400 dark:hover:border-surface-600 bg-white dark:bg-surface-900 transition-all cursor-pointer relative", defaultBorderMixin),
+									onClick: () => onSelectSnippet(snippet.sql),
+									children: [
+										/* @__PURE__ */ jsx(Typography, {
+											variant: "body2",
+											className: "text-text-primary dark:text-text-primary-dark font-medium text-[13px] truncate pr-6",
+											children: snippet.name
+										}),
+										/* @__PURE__ */ jsx(Typography, {
+											variant: "caption",
+											className: "text-text-secondary dark:text-text-secondary-dark text-[10px] block mt-1 truncate",
+											children: snippet.sql
+										}),
+										/* @__PURE__ */ jsx(IconButton, {
+											size: "smallest",
+											className: "absolute right-1 top-1 opacity-0 group-hover:opacity-100 text-text-disabled hover:text-red-500 transition-opacity",
+											onClick: (e) => {
+												e.stopPropagation();
+												onDeleteSnippet(snippet.id);
+											},
+											children: /* @__PURE__ */ jsx(Trash2Icon, { size: iconSize.smallest })
+										})
+									]
+								}, snippet.id))
+							})] })] })
+						})]
+					});
+				})(),
+				activeTab === "history" && /* @__PURE__ */ jsxs("div", {
+					className: "flex flex-col h-full",
+					children: [/* @__PURE__ */ jsx("div", {
+						className: cls("flex items-center justify-between px-3 py-2 border-b bg-surface-50 dark:bg-surface-900 min-h-[48px]", defaultBorderMixin),
+						children: /* @__PURE__ */ jsx(Typography, {
+							variant: "caption",
+							className: "font-bold uppercase tracking-wider text-text-disabled dark:text-text-disabled-dark",
+							children: t("studio_sql_sidebar_history")
+						})
+					}), /* @__PURE__ */ jsx("div", {
+						className: "flex-grow overflow-y-auto p-1 space-y-1 no-scrollbar",
+						children: history.length === 0 ? /* @__PURE__ */ jsx("div", {
+							className: "p-4 text-center",
+							children: /* @__PURE__ */ jsx(Typography, {
+								variant: "caption",
+								className: "text-text-disabled dark:text-text-disabled-dark",
+								children: t("studio_sql_sidebar_no_history")
+							})
+						}) : [...history].reverse().map((sql, i) => /* @__PURE__ */ jsxs("div", {
+							className: "p-2 py-1.5 rounded hover:bg-surface-100 dark:hover:bg-surface-950 cursor-pointer group transition-colors flex items-start",
+							onClick: () => onSelectSnippet(sql),
+							children: [/* @__PURE__ */ jsx("svg", {
+								className: "w-3 h-3 mt-1 mr-2 text-text-disabled dark:text-text-disabled-dark group-hover:text-primary transition-colors flex-shrink-0",
+								fill: "none",
+								stroke: "currentColor",
+								viewBox: "0 0 24 24",
+								children: /* @__PURE__ */ jsx("path", {
+									strokeLinecap: "round",
+									strokeLinejoin: "round",
+									strokeWidth: 2,
+									d: "M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
+								})
+							}), /* @__PURE__ */ jsx(Typography, {
+								variant: "caption",
+								className: "text-text-secondary dark:text-text-secondary-dark group-hover:text-text-primary dark:group-hover:text-text-primary-dark text-[11px] line-clamp-2 leading-tight flex-grow",
+								children: sql
+							})]
+						}, i))
+					})]
+				})
+			]
+		})]
+	});
+};
+//#endregion
+//#region src/utils/sql_utils.ts
+/**
+* Extract all tables referenced in a SQL query's FROM and JOIN clauses.
+* Returns an empty array for non-SELECT queries or parse failures.
+*/
+function extractTablesFromQuery(sqlString) {
+	try {
+		const ast = parseFirst(sqlString);
+		if (ast.type !== "select") return [];
+		const tables = [];
+		const processFrom = (fromItems) => {
+			for (const item of fromItems) {
+				if (item.type === "table" && item.name) tables.push({
+					name: item.name.name,
+					alias: item.name.alias
+				});
+				if (item.type === "join") {
+					if (item.left) processFrom([item.left]);
+					if (item.right) processFrom([item.right]);
+				}
+			}
+		};
+		if (ast.from) processFrom(ast.from);
+		return tables;
+	} catch {
+		return [];
+	}
+}
+/**
+* Resolve which collections are referenced by a SQL query.
+*
+* Parses the SQL, extracts table names, and matches each against
+* registered collections via `collection.table` (falling back to
+* snake_case of `collection.slug`).
+*
+* For each matched collection, determines which result columns
+* belong to that table using the database schema information.
+*/
+function resolveQueryCollections(sqlString, schemas, collections, resultColumns) {
+	const tables = extractTablesFromQuery(sqlString);
+	if (tables.length === 0) return [];
+	const selectColumns = [];
+	try {
+		const ast = parseFirst(sqlString);
+		if (ast.type === "select" && ast.columns) {
+			for (const col of ast.columns) if (col.expr?.type === "ref") selectColumns.push({
+				table: col.expr.table?.name,
+				column: col.expr.name,
+				alias: col.alias?.name
+			});
+		}
+	} catch {}
+	const results = [];
+	for (const table of tables) {
+		const matched = collections.find((c) => {
+			return (("table" in c ? c.table : void 0) || toSnakeCase(c.slug)) === table.name;
+		});
+		if (!matched) continue;
+		const tableColumns = [];
+		for (const schemaEntries of Object.values(schemas)) {
+			const tableInfo = schemaEntries.find((t) => t.tableName === table.name);
+			if (tableInfo) {
+				tableColumns.push(...tableInfo.columns.map((c) => c.name));
+				break;
+			}
+		}
+		let pkColumn;
+		const tableRef = table.alias || table.name;
+		const idSelectCol = selectColumns.find((sc) => sc.column === "id" && (!sc.table || sc.table === tableRef || sc.table === table.name));
+		if (idSelectCol) pkColumn = idSelectCol.alias || idSelectCol.column;
+		if (!pkColumn && resultColumns) {
+			if (resultColumns.includes("id")) pkColumn = "id";
+		}
+		if (!pkColumn && tableColumns.includes("id")) pkColumn = "id";
+		results.push({
+			tableName: table.name,
+			tableAlias: table.alias,
+			collection: matched,
+			columns: tableColumns,
+			pkColumn
+		});
+	}
+	return results;
+}
+function determineTableAndPK(sqlString, columnKey, schemas) {
+	try {
+		const tables = extractTablesFromQuery(sqlString);
+		const ast = parseFirst(sqlString);
+		if (ast.type !== "select") return { error: "Inline editing is only supported for SELECT queries." };
+		if (tables.length === 0) return { error: "Could not find any tables in the query." };
+		const selectColumns = [];
+		if (ast.columns) {
+			for (const col of ast.columns) if (col.expr?.type === "ref") selectColumns.push({
+				table: col.expr.table?.name,
+				column: col.expr.name,
+				alias: col.alias?.name
+			});
+		}
+		const resolvedColumn = selectColumns.find((sc) => sc.alias === columnKey || !sc.alias && sc.column === columnKey);
+		const actualDbColumnName = resolvedColumn?.column ?? columnKey;
+		const columnTableRef = resolvedColumn?.table;
+		let resolvedTableName = null;
+		if (tables.length === 1) resolvedTableName = tables[0].name;
+		else {
+			if (columnTableRef) {
+				const matchedTable = tables.find((t) => t.alias === columnTableRef || t.name === columnTableRef);
+				if (matchedTable) resolvedTableName = matchedTable.name;
+			}
+			if (!resolvedTableName) {
+				const matchedTables = tables.filter((t) => {
+					for (const schema of Object.values(schemas)) {
+						const tableInfo = schema.find((ti) => ti.tableName === t.name);
+						if (tableInfo && tableInfo.columns.some((c) => c.name === actualDbColumnName)) return true;
+					}
+					return false;
+				});
+				if (matchedTables.length === 1) resolvedTableName = matchedTables[0].name;
+				else if (matchedTables.length > 1) return { error: `Ambiguous column "${columnKey}": Found in multiple queried tables.` };
+				else return { error: `Could not find column "${columnKey}" in the queried tables.` };
+			}
+		}
+		if (!resolvedTableName) return { error: "Could not resolve the target table." };
+		let pkDbColumns = [];
+		for (const schema of Object.values(schemas)) {
+			const tableInfo = schema.find((t) => t.tableName === resolvedTableName);
+			if (tableInfo) {
+				pkDbColumns = tableInfo.columns.filter((c) => c.isPrimaryKey).map((c) => c.name);
+				break;
+			}
+		}
+		if (pkDbColumns.length === 0) return { error: `Table "${resolvedTableName}" has no primary key defined.` };
+		const tableAlias = tables.find((t) => t.name === resolvedTableName)?.alias;
+		const primaryKeys = pkDbColumns.map((dbCol) => {
+			const selectCol = selectColumns.find((sc) => sc.column === dbCol && (!sc.table || sc.table === (tableAlias || resolvedTableName)));
+			return {
+				dbColumn: dbCol,
+				resultColumn: selectCol?.alias || selectCol?.column || dbCol
+			};
+		});
+		return {
+			tableName: resolvedTableName,
+			primaryKeys
+		};
+	} catch (e) {
+		console.warn("Failed to parse SQL AST:", e);
+		return { error: `Could not safely parse query for inline editing: ${e instanceof Error ? e.message : String(e)}` };
+	}
+}
+//#endregion
+//#region src/components/SQLEditor/ExplainVisualizer.tsx
+var ExplainVisualizer = ({ plan, isRoot = true }) => {
+	const [expanded, setExpanded] = useState(true);
+	const hasChildren = plan.Plans && plan.Plans.length > 0;
+	const cost = plan["Total Cost"];
+	let costColor = "text-green-500 dark:text-green-400";
+	if (cost > 1e3) costColor = "text-red-500 dark:text-red-400";
+	else if (cost > 100) costColor = "text-orange-500 dark:text-orange-400";
+	return /* @__PURE__ */ jsxs("div", {
+		className: cls("flex flex-col", isRoot ? "p-4" : "pl-6 mt-2 relative"),
+		children: [
+			!isRoot && /* @__PURE__ */ jsx("div", { className: "absolute left-2.5 top-0 bottom-0 w-px bg-surface-200 dark:bg-surface-950 -z-10" }),
+			!isRoot && /* @__PURE__ */ jsx("div", { className: "absolute left-2.5 top-5 w-3 h-px bg-surface-200 dark:bg-surface-950 -z-10" }),
+			/* @__PURE__ */ jsxs("div", {
+				className: cls("border rounded-md bg-white dark:bg-surface-900 text-text-primary dark:text-text-primary-dark shadow-xs relative z-10 w-[420px] max-w-full", defaultBorderMixin),
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: cls("px-4 py-3 flex justify-between items-center cursor-pointer select-none"),
+					onClick: () => setExpanded(!expanded),
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "flex items-center space-x-2",
+						children: [
+							hasChildren ? /* @__PURE__ */ jsx("svg", {
+								className: cls("w-4 h-4 text-text-secondary transition-transform", !expanded ? "-rotate-90" : ""),
+								fill: "none",
+								stroke: "currentColor",
+								viewBox: "0 0 24 24",
+								children: /* @__PURE__ */ jsx("path", {
+									strokeLinecap: "round",
+									strokeLinejoin: "round",
+									strokeWidth: 2,
+									d: "M19 9l-7 7-7-7"
+								})
+							}) : /* @__PURE__ */ jsx("div", { className: "w-4 h-4" }),
+							/* @__PURE__ */ jsx(Typography, {
+								variant: "body1",
+								className: "flex items-center",
+								children: plan["Node Type"]
+							}),
+							plan["Relation Name"] && /* @__PURE__ */ jsxs("span", {
+								className: "font-mono text-[11px] text-text-secondary dark:text-text-secondary-dark px-2 py-0.5 rounded bg-surface-200 dark:bg-surface-950 ml-2",
+								children: [
+									"on ",
+									plan["Relation Name"],
+									" ",
+									plan.Alias && plan.Alias !== plan["Relation Name"] ? `(${plan.Alias})` : ""
+								]
+							})
+						]
+					}), /* @__PURE__ */ jsxs("div", {
+						className: "flex space-x-6 items-center",
+						children: [/* @__PURE__ */ jsxs("div", {
+							className: "flex flex-col text-right",
+							children: [/* @__PURE__ */ jsx("span", {
+								className: "text-[10px] uppercase text-text-disabled dark:text-text-disabled-dark font-semibold tracking-wide leading-tight mb-0.5",
+								children: "Cost"
+							}), /* @__PURE__ */ jsx("span", {
+								className: cls("font-mono font-medium text-[13px] leading-none", costColor),
+								children: cost.toFixed(2)
+							})]
+						}), /* @__PURE__ */ jsxs("div", {
+							className: "flex flex-col text-right",
+							children: [/* @__PURE__ */ jsx("span", {
+								className: "text-[10px] uppercase text-text-disabled dark:text-text-disabled-dark font-semibold tracking-wide leading-tight mb-0.5",
+								children: "Rows"
+							}), /* @__PURE__ */ jsx("span", {
+								className: "font-mono text-[13px] text-text-secondary dark:text-text-secondary-dark leading-none",
+								children: plan["Plan Rows"]
+							})]
+						})]
+					})]
+				}), /* @__PURE__ */ jsx(Collapse, {
+					in: expanded,
+					children: /* @__PURE__ */ jsxs("div", {
+						className: "px-4 py-3 border-t border-surface-200 dark:border-surface-950 text-[13px] flex flex-col gap-2",
+						children: [
+							/* @__PURE__ */ jsxs("div", {
+								className: "flex items-center space-x-6",
+								children: [/* @__PURE__ */ jsxs("div", {
+									className: "flex items-center space-x-2",
+									children: [/* @__PURE__ */ jsx("span", {
+										className: "text-text-disabled dark:text-text-disabled-dark",
+										children: "Startup Cost:"
+									}), /* @__PURE__ */ jsx("span", {
+										className: "font-mono font-medium",
+										children: plan["Startup Cost"].toFixed(2)
+									})]
+								}), /* @__PURE__ */ jsxs("div", {
+									className: "flex items-center space-x-2",
+									children: [/* @__PURE__ */ jsx("span", {
+										className: "text-text-disabled dark:text-text-disabled-dark",
+										children: "Width:"
+									}), /* @__PURE__ */ jsxs("span", {
+										className: "font-mono font-medium",
+										children: [plan["Plan Width"], " bytes"]
+									})]
+								})]
+							}),
+							plan.Filter && /* @__PURE__ */ jsxs("div", {
+								className: "mt-1",
+								children: [/* @__PURE__ */ jsx("span", {
+									className: "text-text-disabled dark:text-text-disabled-dark block mb-1",
+									children: "Filter:"
+								}), /* @__PURE__ */ jsx("code", {
+									className: "block w-full p-2 bg-surface-50 dark:bg-surface-950 border dark:border-surface-950 rounded font-mono text-[12px] truncate",
+									children: plan.Filter
+								})]
+							}),
+							plan["Index Cond"] && /* @__PURE__ */ jsxs("div", {
+								className: "mt-1",
+								children: [/* @__PURE__ */ jsx("span", {
+									className: "text-text-disabled dark:text-text-disabled-dark block mb-1",
+									children: "Index Cond:"
+								}), /* @__PURE__ */ jsx("code", {
+									className: "block w-full p-2 bg-surface-50 dark:bg-surface-950 border dark:border-surface-950 rounded font-mono text-[12px] truncate",
+									children: plan["Index Cond"]
+								})]
+							}),
+							plan["Hash Cond"] && /* @__PURE__ */ jsxs("div", {
+								className: "mt-1",
+								children: [/* @__PURE__ */ jsx("span", {
+									className: "text-text-disabled dark:text-text-disabled-dark block mb-1",
+									children: "Hash Cond:"
+								}), /* @__PURE__ */ jsx("code", {
+									className: "block w-full p-2 bg-surface-50 dark:bg-surface-950 border dark:border-surface-950 rounded font-mono text-[12px] truncate",
+									children: plan["Hash Cond"]
+								})]
+							})
+						]
+					})
+				})]
+			}),
+			expanded && hasChildren && /* @__PURE__ */ jsx("div", {
+				className: "flex flex-col space-y-2 mt-[-4px]",
+				children: plan.Plans.map((childPlan, idx) => /* @__PURE__ */ jsx(ExplainVisualizer, {
+					plan: childPlan,
+					isRoot: false
+				}, idx))
+			})
+		]
+	});
+};
+//#endregion
+//#region src/components/SQLEditor/SQLEditor.tsx
+var FixedEditorOverlay = ({ displayValue, onSave, onCancel }) => {
+	const [rect, setRect] = useState(null);
+	const [windowSize, setWindowSize] = useState({
+		width: 1e3,
+		height: 1e3
+	});
+	const anchorRef = useRef(null);
+	useEffect(() => {
+		if (anchorRef.current && anchorRef.current.parentElement) setRect(anchorRef.current.parentElement.getBoundingClientRect());
+		if (typeof window !== "undefined") {
+			setWindowSize({
+				width: window.innerWidth,
+				height: window.innerHeight
+			});
+			const handleResize = () => setWindowSize({
+				width: window.innerWidth,
+				height: window.innerHeight
+			});
+			window.addEventListener("resize", handleResize);
+			return () => window.removeEventListener("resize", handleResize);
+		}
+	}, []);
+	if (!rect) return /* @__PURE__ */ jsx("div", {
+		ref: anchorRef,
+		className: "w-full h-full min-h-[20px]"
+	});
+	let top = rect.top - 2;
+	let left = rect.left - 2;
+	const minWidth = Math.max(rect.width + 4, 250);
+	const minHeight = rect.height + 4;
+	if (left + minWidth > windowSize.width) left = Math.max(10, windowSize.width - minWidth - 10);
+	const maxAvailableHeight = Math.max(50, windowSize.height - top - 10);
+	const resolvedMaxHeight = Math.min(300, maxAvailableHeight);
+	if (top + minHeight > windowSize.height) top = Math.max(10, windowSize.height - minHeight - 10);
+	return /* @__PURE__ */ jsx("div", {
+		ref: anchorRef,
+		className: "w-full h-full min-h-[20px]",
+		children: 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: {
+				top,
+				left,
+				minWidth,
+				minHeight,
+				maxWidth: Math.min(400, windowSize.width - left - 10)
+			},
+			children: /* @__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: {
+					minHeight: "32px",
+					maxHeight: resolvedMaxHeight
+				},
+				onFocus: (e) => {
+					const val = e.target.value;
+					e.target.value = "";
+					e.target.value = val;
+				},
+				onBlur: (e) => {
+					onSave(e.target.value || null);
+					onCancel();
+				},
+				onKeyDown: (e) => {
+					if (e.key === "Enter" && !e.shiftKey) {
+						e.preventDefault();
+						onSave(e.currentTarget.value || null);
+						onCancel();
+					}
+					if (e.key === "Escape") onCancel();
+				}
+			})
+		}), document.body)
+	});
+};
+var getStoragePrefix = (baseUrl) => {
+	if (!baseUrl) return "default";
+	return baseUrl.replace(/^https?:\/\//, "").replace(/[^a-zA-Z0-9]/g, "_");
+};
+var SQLEditor = () => {
+	const { databaseAdmin, client } = useRebaseContext();
+	const sideEntityController = useStudioSideEntityController();
+	const snackbarController = useSnackbarController();
+	const collectionRegistry = useStudioCollectionRegistry();
+	const { t } = useTranslation();
+	const projectPrefix = useMemo(() => getStoragePrefix(client?.baseUrl), [client?.baseUrl]);
+	const [schemas, setSchemas] = useState({});
+	const [isSchemaLoading, setIsSchemaLoading] = useState(true);
+	const schemaFetchedRef = useRef(false);
+	const [schemaError, setSchemaError] = useState(null);
+	const [selectedDatabase, setSelectedDatabase] = useState(() => {
+		const projectPrefixSync = client?.baseUrl ? client.baseUrl.replace(/^https?:\/\//, "").replace(/[^a-zA-Z0-9]/g, "_") : "default";
+		return localStorage.getItem(`rebase_sql_selected_db_${projectPrefixSync}`) || void 0;
+	});
+	const [selectedRole, setSelectedRole] = useState(() => {
+		const projectPrefixSync = client?.baseUrl ? client.baseUrl.replace(/^https?:\/\//, "").replace(/[^a-zA-Z0-9]/g, "_") : "default";
+		return localStorage.getItem(`rebase_sql_selected_role_${projectPrefixSync}`) || void 0;
+	});
+	const [availableDatabases, setAvailableDatabases] = useState([]);
+	const [availableRoles, setAvailableRoles] = useState([]);
+	const [isLoadingConfig, setIsLoadingConfig] = useState(true);
+	const [connectionConfigError, setConnectionConfigError] = useState(null);
+	const [tabs, setTabs] = useState(() => {
+		const projectPrefixSync = client?.baseUrl ? client.baseUrl.replace(/^https?:\/\//, "").replace(/[^a-zA-Z0-9]/g, "_") : "default";
+		const saved = localStorage.getItem(`rebase_sql_tabs_${projectPrefixSync}`);
+		if (saved) return JSON.parse(saved).map((t) => ({
+			...t,
+			results: null,
+			loading: false,
+			error: null,
+			execTime: null,
+			lastExecutedSql: null
+		}));
+		return [{
+			id: "1",
+			name: "Query 1",
+			sql: "SELECT * FROM ",
+			database: localStorage.getItem(`rebase_sql_selected_db_${projectPrefixSync}`) || void 0,
+			role: localStorage.getItem(`rebase_sql_selected_role_${projectPrefixSync}`) || void 0,
+			results: null,
+			loading: false,
+			error: null,
+			execTime: null,
+			lastExecutedSql: null
+		}];
+	});
+	const [activeTabId, setActiveTabId] = useState(() => {
+		const projectPrefixSync = client?.baseUrl ? client.baseUrl.replace(/^https?:\/\//, "").replace(/[^a-zA-Z0-9]/g, "_") : "default";
+		return localStorage.getItem(`rebase_sql_active_tab_${projectPrefixSync}`) || "1";
+	});
+	const activeTab = tabs.find((t) => t.id === activeTabId) || tabs[0];
+	const updateActiveTab = useCallback((update) => {
+		setTabs((prev) => prev.map((t) => t.id === activeTabId ? {
+			...t,
+			...update
+		} : t));
+	}, [activeTabId]);
+	const sql = activeTab.sql;
+	const results = activeTab.results;
+	const loading = activeTab.loading;
+	const error = activeTab.error;
+	const execTime = activeTab.execTime;
+	const setSql = (newSql) => updateActiveTab({ sql: newSql });
+	useEffect(() => {
+		let mounted = true;
+		const fetchConnectionConfig = async () => {
+			if (!databaseAdmin?.fetchAvailableDatabases || !databaseAdmin?.fetchAvailableRoles || !databaseAdmin?.executeSql) {
+				setConnectionConfigError(t("studio_sql_sql_not_supported"));
+				setIsLoadingConfig(false);
+				return;
+			}
+			try {
+				const [dbs, roles, currentDbFromApi, currentUserResult] = await Promise.all([
+					databaseAdmin.fetchAvailableDatabases(),
+					databaseAdmin.fetchAvailableRoles(),
+					typeof databaseAdmin?.fetchCurrentDatabase === "function" ? databaseAdmin.fetchCurrentDatabase() : Promise.resolve(void 0),
+					databaseAdmin.executeSql("SELECT current_user AS role").catch(() => [])
+				]);
+				if (mounted) {
+					setAvailableDatabases(dbs);
+					setAvailableRoles(roles);
+					const loadedDb = localStorage.getItem(`rebase_sql_selected_db_${projectPrefix}`) || void 0;
+					const loadedRole = localStorage.getItem(`rebase_sql_selected_role_${projectPrefix}`) || void 0;
+					const initialActiveTabId = localStorage.getItem(`rebase_sql_active_tab_${projectPrefix}`) || "1";
+					let initialTabs = [];
+					try {
+						const savedTabs = localStorage.getItem(`rebase_sql_tabs_${projectPrefix}`);
+						if (savedTabs) initialTabs = JSON.parse(savedTabs);
+					} catch (e) {}
+					const currentActiveTab = initialTabs.find((t) => t.id === initialActiveTabId);
+					let actualDb = currentActiveTab?.database || loadedDb;
+					if (actualDb && !dbs.includes(actualDb)) actualDb = void 0;
+					if (!actualDb && dbs.length > 0) actualDb = currentDbFromApi && dbs.includes(currentDbFromApi) ? currentDbFromApi : dbs[0];
+					if (actualDb) {
+						setSelectedDatabase(actualDb);
+						localStorage.setItem(`rebase_sql_selected_db_${projectPrefix}`, actualDb);
+						setTabs((prev) => prev.map((t) => t.id === initialActiveTabId && (!t.database || !dbs.includes(t.database)) ? {
+							...t,
+							database: actualDb
+						} : t));
+					}
+					const currentUser = (currentUserResult?.[0])?.role;
+					let actualRole = currentActiveTab?.role || loadedRole;
+					if (actualRole && !roles.includes(actualRole)) actualRole = void 0;
+					if (!actualRole && roles.length > 0) if (currentUser && roles.includes(currentUser)) actualRole = currentUser;
+					else actualRole = roles.includes("postgres") ? "postgres" : roles[0];
+					if (actualRole) {
+						setSelectedRole(actualRole);
+						localStorage.setItem(`rebase_sql_selected_role_${projectPrefix}`, actualRole);
+						setTabs((prev) => prev.map((t) => t.id === initialActiveTabId && (!t.role || !roles.includes(t.role)) ? {
+							...t,
+							role: actualRole
+						} : t));
+					}
+				}
+			} catch (err) {
+				console.error("Failed to fetch databases or roles:", err);
+				if (mounted) setConnectionConfigError(t("studio_sql_fetch_error", { message: err instanceof Error ? err.message : String(err) }));
+			} finally {
+				if (mounted) setIsLoadingConfig(false);
+			}
+		};
+		fetchConnectionConfig();
+		return () => {
+			mounted = false;
+		};
+	}, [databaseAdmin, projectPrefix]);
+	const handleDatabaseChange = (db, tabId) => {
+		setSelectedDatabase(db);
+		localStorage.setItem(`rebase_sql_selected_db_${projectPrefix}`, db);
+		setTabs((prev) => prev.map((t) => t.id === (tabId || activeTabId) ? {
+			...t,
+			database: db
+		} : t));
+		schemaFetchedRef.current = false;
+	};
+	const handleRoleChange = (role, tabId) => {
+		setSelectedRole(role);
+		localStorage.setItem(`rebase_sql_selected_role_${projectPrefix}`, role);
+		setTabs((prev) => prev.map((t) => t.id === (tabId || activeTabId) ? {
+			...t,
+			role
+		} : t));
+	};
+	const handleTabChange = useCallback((newTabId) => {
+		setActiveTabId(newTabId);
+		const newTab = tabs.find((t) => t.id === newTabId);
+		if (newTab) {
+			if (newTab.database && newTab.database !== selectedDatabase) {
+				setSelectedDatabase(newTab.database);
+				localStorage.setItem(`rebase_sql_selected_db_${projectPrefix}`, newTab.database);
+				schemaFetchedRef.current = false;
+			} else if (!newTab.database && selectedDatabase) setTabs((prev) => prev.map((t) => t.id === newTabId ? {
+				...t,
+				database: selectedDatabase
+			} : t));
+			if (newTab.role && newTab.role !== selectedRole) {
+				setSelectedRole(newTab.role);
+				localStorage.setItem(`rebase_sql_selected_role_${projectPrefix}`, newTab.role);
+			} else if (!newTab.role && selectedRole) setTabs((prev) => prev.map((t) => t.id === newTabId ? {
+				...t,
+				role: selectedRole
+			} : t));
+		}
+	}, [
+		tabs,
+		selectedDatabase,
+		selectedRole,
+		projectPrefix
+	]);
+	const fetchSchema = useCallback(async () => {
+		if (!databaseAdmin?.executeSql) {
+			setSchemaError(t("studio_sql_sql_not_supported"));
+			setIsSchemaLoading(false);
+			return;
+		}
+		setIsSchemaLoading(true);
+		setSchemaError(null);
+		try {
+			const result = await databaseAdmin.executeSql(`
+                SELECT 
+                    c.table_schema as schema, 
+                    c.table_name as "table", 
+                    c.column_name as "column",
+                    c.data_type as "data_type",
+                    CASE WHEN kcu.column_name IS NOT NULL THEN true ELSE false END as "is_pk"
+                FROM 
+                    information_schema.columns c
+                LEFT JOIN information_schema.table_constraints tc
+                    ON tc.table_schema = c.table_schema 
+                    AND tc.table_name = c.table_name 
+                    AND tc.constraint_type = 'PRIMARY KEY'
+                LEFT JOIN information_schema.key_column_usage kcu
+                    ON kcu.constraint_name = tc.constraint_name
+                    AND kcu.table_schema = tc.table_schema
+                    AND kcu.table_name = tc.table_name
+                    AND kcu.column_name = c.column_name
+                WHERE 
+                    c.table_schema NOT IN ('information_schema', 'pg_catalog')
+                ORDER BY 
+                    c.table_schema, c.table_name, c.ordinal_position;
+            `, { database: selectedDatabase });
+			const processGrouped = (data) => {
+				setSchemas(data.reduce((acc, curr) => {
+					const schema = curr.schema || curr.SCHEMA || curr.table_schema || "public";
+					const table = curr.table || curr.TABLE || curr.table_name;
+					const column = curr.column || curr.COLUMN || curr.column_name;
+					const dataType = curr.data_type || curr.DATA_TYPE || "";
+					const isPrimaryKey = curr.is_pk === true || curr.is_pk === "true";
+					if (!acc[schema]) acc[schema] = [];
+					let tableInfo = acc[schema].find((t) => t.tableName === table);
+					if (!tableInfo) {
+						tableInfo = {
+							schemaName: schema,
+							tableName: table,
+							columns: []
+						};
+						acc[schema].push(tableInfo);
+					}
+					tableInfo.columns.push({
+						name: column,
+						dataType,
+						isPrimaryKey
+					});
+					return acc;
+				}, {}));
+			};
+			if (!result || !Array.isArray(result)) if (result && typeof result === "object" && "rows" in result && Array.isArray(result.rows)) processGrouped(result.rows);
+			else {
+				setSchemaError(t("studio_sql_unexpected_format", { type: typeof result }));
+				setSchemas({});
+			}
+			else if (result.length === 0) {
+				setSchemas({});
+				setSchemaError(t("studio_sql_no_tables"));
+			} else processGrouped(result);
+			schemaFetchedRef.current = true;
+		} catch (e) {
+			console.error("Schema fetch error:", e);
+			setSchemaError(t("studio_sql_schema_fetch_error", { message: e instanceof Error ? e.message : String(e) }));
+		} finally {
+			setIsSchemaLoading(false);
+		}
+	}, [databaseAdmin, selectedDatabase]);
+	useEffect(() => {
+		if (!isLoadingConfig && !schemaFetchedRef.current) fetchSchema();
+	}, [
+		fetchSchema,
+		isLoadingConfig,
+		selectedDatabase
+	]);
+	const [autoLimit, setAutoLimit] = useState(true);
+	const [isConfirmDialogOpen, setIsConfirmDialogOpen] = useState(false);
+	const [pendingAction, setPendingAction] = useState(null);
+	const [editingCell, setEditingCell] = useState(null);
+	const handleDoubleClick = useCallback((rowIndex, columnKey, initialValue, rowData) => {
+		if (!activeTab.lastExecutedSql) {
+			snackbarController.open({
+				type: "error",
+				message: t("studio_sql_cannot_edit_missing_query")
+			});
+			return;
+		}
+		const resolution = determineTableAndPK(activeTab.lastExecutedSql, columnKey, schemas);
+		if (resolution.error || !resolution.primaryKeys || resolution.primaryKeys.length === 0) {
+			snackbarController.open({
+				type: "error",
+				message: resolution.error || t("studio_sql_cannot_resolve_table")
+			});
+			return;
+		}
+		const missingPKs = resolution.primaryKeys.filter((pk) => rowData[pk.resultColumn] === void 0 || rowData[pk.resultColumn] === null);
+		if (missingPKs.length > 0) {
+			snackbarController.open({
+				type: "error",
+				message: t("studio_sql_missing_pk", { columns: missingPKs.map((pk) => `"${pk.resultColumn}"`).join(", ") })
+			});
+			return;
+		}
+		setEditingCell({
+			rowIndex,
+			columnKey,
+			initialValue
+		});
+	}, [
+		activeTab.lastExecutedSql,
+		schemas,
+		snackbarController
+	]);
+	const handleCellSave = useCallback(async (newValue, rowData, columnKey, rowIndex) => {
+		if (!editingCell || !activeTab.lastExecutedSql) return;
+		setEditingCell(null);
+		if (newValue === editingCell.initialValue) return;
+		const resolution = determineTableAndPK(activeTab.lastExecutedSql, columnKey, schemas);
+		if (resolution.error || !resolution.tableName || !resolution.primaryKeys || resolution.primaryKeys.length === 0) {
+			snackbarController.open({
+				type: "error",
+				message: resolution.error || "Resolution failed."
+			});
+			return;
+		}
+		const tableName = resolution.tableName;
+		const formatValue = (val) => {
+			if (val === null || val === void 0) return "NULL";
+			if (typeof val === "number") return val;
+			if (typeof val === "boolean") return val ? "TRUE" : "FALSE";
+			return `'${String(val).replace(/'/g, "''")}'`;
+		};
+		const resolveDbColumnName = (resultColKey) => {
+			try {
+				const ast = parseFirst(activeTab.lastExecutedSql);
+				if (ast.type === "select" && ast.columns) {
+					for (const col of ast.columns) if (col.expr?.type === "ref") {
+						const alias = col.alias?.name;
+						const colName = col.expr.name;
+						if (alias === resultColKey || !alias && colName === resultColKey) return colName;
+					}
+				}
+			} catch {}
+			return resultColKey;
+		};
+		const dbColumnName = resolveDbColumnName(columnKey);
+		const whereConditions = resolution.primaryKeys.map((pk) => `"${pk.dbColumn}" = ${formatValue(rowData[pk.resultColumn])}`).join(" AND ");
+		const updateSql = `UPDATE "${tableName}" SET "${dbColumnName}" = ${formatValue(newValue)} WHERE ${whereConditions};`;
+		try {
+			if (databaseAdmin?.executeSql) {
+				await databaseAdmin.executeSql(updateSql, {
+					database: selectedDatabase,
+					role: selectedRole
+				});
+				const newResults = [...activeTab.results || []];
+				if (newResults[rowIndex]) newResults[rowIndex] = {
+					...newResults[rowIndex],
+					[columnKey]: newValue
+				};
+				updateActiveTab({ results: newResults });
+				snackbarController.open({
+					type: "success",
+					message: t("studio_sql_row_updated")
+				});
+			}
+		} catch (e) {
+			snackbarController.open({
+				type: "error",
+				message: t("studio_sql_update_failed", { message: e instanceof Error ? e.message : String(e) })
+			});
+		}
+	}, [
+		editingCell,
+		schemas,
+		activeTab.lastExecutedSql,
+		activeTab.results,
+		databaseAdmin,
+		updateActiveTab,
+		snackbarController,
+		selectedDatabase,
+		selectedRole
+	]);
+	const [columnWidths, setColumnWidths] = useState(() => {
+		const projectPrefixSync = client?.baseUrl ? client.baseUrl.replace(/^https?:\/\//, "").replace(/[^a-zA-Z0-9]/g, "_") : "default";
+		const saved = localStorage.getItem(`rebase_sql_column_widths_${projectPrefixSync}`);
+		return saved ? JSON.parse(saved) : {};
+	});
+	const [snippets, setSnippets] = useState([]);
+	const [history, setHistory] = useState([]);
+	const [isSaveDialogOpen, setIsSaveDialogOpen] = useState(false);
+	const [newSnippetName, setNewSnippetName] = useState("");
+	useEffect(() => {
+		const savedSnippets = localStorage.getItem(`rebase_sql_snippets_${projectPrefix}`);
+		if (savedSnippets) setSnippets(JSON.parse(savedSnippets));
+		else setSnippets([]);
+		const savedHistory = localStorage.getItem(`rebase_sql_history_${projectPrefix}`);
+		if (savedHistory) setHistory(JSON.parse(savedHistory));
+		else setHistory([]);
+	}, [projectPrefix]);
+	useEffect(() => {
+		const sanitizedTabs = tabs.map((t) => ({
+			id: t.id,
+			name: t.name,
+			sql: t.sql,
+			database: t.database,
+			role: t.role
+		}));
+		localStorage.setItem(`rebase_sql_tabs_${projectPrefix}`, JSON.stringify(sanitizedTabs));
+	}, [tabs, projectPrefix]);
+	useEffect(() => {
+		localStorage.setItem(`rebase_sql_active_tab_${projectPrefix}`, activeTabId);
+	}, [activeTabId, projectPrefix]);
+	const saveSnippets = (newSnippets) => {
+		setSnippets(newSnippets);
+		localStorage.setItem(`rebase_sql_snippets_${projectPrefix}`, JSON.stringify(newSnippets));
+	};
+	const saveHistory = (newHistory) => {
+		setHistory(newHistory);
+		localStorage.setItem(`rebase_sql_history_${projectPrefix}`, JSON.stringify(newHistory.slice(-50)));
+	};
+	const handleDeleteSnippet = (id) => {
+		saveSnippets(snippets.filter((s) => s.id !== id));
+	};
+	const handleAddTab = () => {
+		const newId = Math.random().toString(36).substring(2, 9);
+		let maxNumber = 0;
+		tabs.forEach((tab) => {
+			const match = tab.name.match(/^Query (\d+)$/);
+			if (match) {
+				const num = parseInt(match[1], 10);
+				if (num > maxNumber) maxNumber = num;
+			}
+		});
+		const name = `Query ${maxNumber + 1}`;
+		setTabs((prev) => [...prev, {
+			id: newId,
+			name,
+			sql: "SELECT * FROM ",
+			database: selectedDatabase,
+			role: selectedRole,
+			results: null,
+			loading: false,
+			error: null,
+			execTime: null,
+			lastExecutedSql: null
+		}]);
+		setActiveTabId(newId);
+	};
+	const handleCloseTab = (id, e) => {
+		e.stopPropagation();
+		if (tabs.length === 1) return;
+		const tabIndex = tabs.findIndex((t) => t.id === id);
+		const newTabs = tabs.filter((t) => t.id !== id);
+		setTabs(newTabs);
+		if (activeTabId === id) {
+			const nextIndex = Math.min(tabIndex, newTabs.length - 1);
+			if (newTabs[nextIndex]) setActiveTabId(newTabs[nextIndex].id);
+		}
+	};
+	const handleColumnResize = useCallback(({ key, width }) => {
+		setColumnWidths((prev) => {
+			const newWidths = {
+				...prev,
+				[activeTab.sql]: {
+					...prev[activeTab.sql] || {},
+					[key]: width
+				}
+			};
+			localStorage.setItem(`rebase_sql_column_widths_${projectPrefix}`, JSON.stringify(newWidths));
+			return newWidths;
+		});
+	}, [activeTab.sql, projectPrefix]);
+	const handlePrettify = () => {
+		setSql(activeTab.sql.replace(/\s+/g, " ").replace(/\s?,\s?/g, ", ").replace(/\s?=\s?/g, " = ").trim());
+	};
+	const handleExplain = async () => {
+		const explainSql = `EXPLAIN (FORMAT JSON, ANALYZE) ${activeTab.sql}`;
+		updateActiveTab({
+			loading: true,
+			error: null,
+			results: null
+		});
+		const start = performance.now();
+		try {
+			if (databaseAdmin?.executeSql) updateActiveTab({
+				results: await databaseAdmin.executeSql(explainSql, {
+					database: selectedDatabase,
+					role: selectedRole
+				}),
+				execTime: Math.round(performance.now() - start)
+			});
+		} catch (e) {
+			updateActiveTab({ error: (e instanceof Error ? e.message : String(e)) || t("studio_sql_error_explaining") });
+		} finally {
+			updateActiveTab({ loading: false });
+		}
+	};
+	const executeRun = useCallback(async (sqlOverride) => {
+		let sqlToRun = sqlOverride || activeTab.sql;
+		const upperSql = sqlToRun.toUpperCase();
+		const isAggregate = /\b(COUNT|SUM|AVG|MIN|MAX)\s*\(/i.test(sqlToRun);
+		const isExplain = /\bEXPLAIN\b/i.test(sqlToRun);
+		if (autoLimit && upperSql.includes("SELECT") && !upperSql.includes("LIMIT") && !isAggregate && !isExplain) {
+			sqlToRun = sqlToRun.trim().replace(/;$/, "");
+			sqlToRun = `${sqlToRun} LIMIT 1000;`;
+		}
+		updateActiveTab({
+			loading: true,
+			error: null,
+			results: null
+		});
+		const start = performance.now();
+		try {
+			if (databaseAdmin?.executeSql) {
+				updateActiveTab({
+					results: await databaseAdmin.executeSql(sqlToRun, {
+						database: selectedDatabase,
+						role: selectedRole
+					}),
+					execTime: Math.round(performance.now() - start),
+					lastExecutedSql: sqlToRun
+				});
+				if (history[history.length - 1] !== activeTab.sql) saveHistory([...history, activeTab.sql]);
+			} else updateActiveTab({ error: t("studio_sql_execution_not_supported") });
+		} catch (e) {
+			updateActiveTab({ error: (e instanceof Error ? e.message : String(e)) || t("studio_sql_error_executing") });
+		} finally {
+			updateActiveTab({ loading: false });
+		}
+	}, [
+		activeTab.sql,
+		autoLimit,
+		databaseAdmin,
+		history,
+		updateActiveTab,
+		selectedDatabase,
+		selectedRole
+	]);
+	const handleRun = useCallback(async (selectedText) => {
+		const sqlTarget = selectedText || activeTab.sql;
+		if (!sqlTarget.trim()) return;
+		const hasDestructive = [
+			"DELETE",
+			"DROP",
+			"TRUNCATE",
+			"UPDATE"
+		].some((kw) => sqlTarget.toUpperCase().includes(kw));
+		const hasWhere = sqlTarget.toUpperCase().includes("WHERE");
+		if (hasDestructive && (!hasWhere || sqlTarget.toUpperCase().includes("DROP") || sqlTarget.toUpperCase().includes("TRUNCATE"))) {
+			setPendingAction(() => () => executeRun(selectedText));
+			setIsConfirmDialogOpen(true);
+			return;
+		}
+		executeRun(selectedText);
+	}, [activeTab.sql, executeRun]);
+	useEffect(() => {
+		const handleKeyDown = (e) => {
+			if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
+				const activeElement = document.activeElement;
+				const isInput = activeElement?.tagName === "INPUT" || activeElement?.tagName === "TEXTAREA";
+				if (!activeElement?.className?.includes("monaco-mouse-cursor-text") && !isInput) {
+					e.preventDefault();
+					handleRun();
+				}
+			}
+		};
+		window.addEventListener("keydown", handleKeyDown);
+		return () => window.removeEventListener("keydown", handleKeyDown);
+	}, [handleRun]);
+	const handleSaveSnippet = () => {
+		if (!newSnippetName.trim() || !sql.trim()) return;
+		const newSnippet = {
+			id: Math.random().toString(36).substring(2, 9),
+			name: newSnippetName,
+			sql,
+			createdAt: Date.now()
+		};
+		saveSnippets([...snippets, newSnippet]);
+		setNewSnippetName("");
+		setIsSaveDialogOpen(false);
+		snackbarController.open({
+			type: "success",
+			message: t("studio_sql_snippet_saved", { name: newSnippetName })
+		});
+	};
+	const handleExportCSV = () => {
+		if (!results || results.length === 0) return;
+		const csv = [Object.keys(results[0]).join(","), ...results.map((row) => Object.values(row).map((val) => {
+			const str = String(val);
+			return str.includes(",") ? `"${str}"` : str;
+		}).join(","))].join("\n");
+		const blob = new Blob([csv], { type: "text/csv" });
+		const url = window.URL.createObjectURL(blob);
+		const a = document.createElement("a");
+		a.href = url;
+		a.download = `query_results_${(/* @__PURE__ */ new Date()).toISOString().slice(0, 19)}.csv`;
+		a.click();
+		window.URL.revokeObjectURL(url);
+	};
+	const handleExportJSON = () => {
+		if (!results || results.length === 0) return;
+		const json = JSON.stringify(results, null, 2);
+		const blob = new Blob([json], { type: "application/json" });
+		const url = window.URL.createObjectURL(blob);
+		const a = document.createElement("a");
+		a.href = url;
+		a.download = `query_results_${(/* @__PURE__ */ new Date()).toISOString().slice(0, 19)}.json`;
+		a.click();
+		window.URL.revokeObjectURL(url);
+	};
+	const handleExportMarkdown = () => {
+		if (!results || results.length === 0) return;
+		const headers = Object.keys(results[0]);
+		const markdown = [
+			`| ${headers.join(" | ")} |`,
+			`| ${headers.map(() => "---").join(" | ")} |`,
+			...results.map((row) => `| ${headers.map((header) => {
+				const val = row[header];
+				if (val === null) return "null";
+				if (val === void 0) return "";
+				return String(val).replace(/\|/g, "\\|").replace(/\n/g, " ");
+			}).join(" | ")} |`)
+		].join("\n");
+		navigator.clipboard.writeText(markdown).then(() => {
+			snackbarController.open({
+				type: "success",
+				message: t("studio_sql_markdown_copied")
+			});
+		}).catch(() => {
+			snackbarController.open({
+				type: "error",
+				message: t("studio_sql_markdown_copy_failed")
+			});
+		});
+	};
+	const renderResults = () => {
+		if (loading) return /* @__PURE__ */ jsx("div", {
+			className: "flex-grow flex items-center justify-center",
+			children: /* @__PURE__ */ jsxs("div", {
+				className: "text-center",
+				children: [/* @__PURE__ */ jsx(CircularProgress, { size: "medium" }), /* @__PURE__ */ jsx(Typography, {
+					variant: "body2",
+					className: "mt-4 text-text-secondary dark:text-text-secondary-dark font-mono tracking-tight animate-pulse",
+					children: t("studio_sql_executing_query")
+				})]
+			})
+		});
+		if (error) return /* @__PURE__ */ jsx("div", {
+			className: "flex-grow flex items-center justify-center p-6 overflow-auto",
+			children: /* @__PURE__ */ jsx(ErrorView, {
+				title: t("studio_sql_query_error"),
+				error
+			})
+		});
+		if (!results) return /* @__PURE__ */ jsx("div", {
+			className: "flex-grow flex items-center justify-center text-text-disabled dark:text-text-disabled-dark",
+			children: /* @__PURE__ */ jsxs("div", {
+				className: "text-center",
+				children: [/* @__PURE__ */ jsx("svg", {
+					className: "w-12 h-12 mx-auto mb-4 opacity-50",
+					fill: "none",
+					stroke: "currentColor",
+					viewBox: "0 0 24 24",
+					children: /* @__PURE__ */ jsx("path", {
+						strokeLinecap: "round",
+						strokeLinejoin: "round",
+						strokeWidth: 1,
+						d: "M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4"
+					})
+				}), /* @__PURE__ */ jsx(Typography, {
+					variant: "body2",
+					children: t("studio_sql_run_query_placeholder")
+				})]
+			})
+		});
+		if (results.length === 1 && results[0]["QUERY PLAN"] && Array.isArray(results[0]["QUERY PLAN"])) try {
+			const plan = results[0]["QUERY PLAN"][0].Plan;
+			if (plan) return /* @__PURE__ */ jsxs("div", {
+				className: "flex-grow overflow-auto p-4 bg-surface-50 dark:bg-surface-900 flex flex-col items-start",
+				children: [/* @__PURE__ */ jsx(Typography, {
+					variant: "caption",
+					className: "font-bold text-text-secondary mb-4 tracking-wider uppercase",
+					children: t("studio_sql_visual_execution_plan")
+				}), /* @__PURE__ */ jsx("div", {
+					className: "pb-12",
+					children: /* @__PURE__ */ jsx(ExplainVisualizer, { plan })
+				})]
+			});
+		} catch (e) {
+			console.warn("Failed to parse EXPLAIN JSON output:", e);
+		}
+		if (results.length === 0) return /* @__PURE__ */ jsxs("div", {
+			className: "flex-grow p-6 flex flex-col items-center justify-center",
+			children: [/* @__PURE__ */ jsx(Typography, {
+				variant: "body2",
+				className: "text-text-secondary dark:text-text-secondary-dark font-mono border-b border-surface-200 dark:border-surface-950 pb-2 mb-2",
+				children: t("studio_sql_success")
+			}), /* @__PURE__ */ jsx(Typography, {
+				variant: "caption",
+				className: "text-text-disabled dark:text-text-disabled-dark",
+				children: t("studio_sql_no_results")
+			})]
+		});
+		const savedWidths = columnWidths[activeTab.sql] || {};
+		const resultColumnKeys = Object.keys(results[0]);
+		const actionableCollections = (() => {
+			if (!activeTab.lastExecutedSql || !collectionRegistry.collections) return [];
+			try {
+				return resolveQueryCollections(activeTab.lastExecutedSql, schemas, collectionRegistry.collections, resultColumnKeys);
+			} catch {
+				return [];
+			}
+		})().filter((mc) => mc.pkColumn && resultColumnKeys.includes(mc.pkColumn));
+		const getRowEntityActions = (rowData) => {
+			if (!rowData) return [];
+			return actionableCollections.filter((mc) => rowData[mc.pkColumn] != null).map((mc) => ({
+				collection: mc,
+				entityId: rowData[mc.pkColumn]
+			}));
+		};
+		const dataColumns = resultColumnKeys.map((key) => ({
+			key,
+			title: key,
+			width: savedWidths[key] ?? 150,
+			sortable: false,
+			resizable: true
+		}));
+		const columns = actionableCollections.length > 0 ? [{
+			key: "__cms_action__",
+			title: "",
+			width: 36,
+			sortable: false,
+			resizable: false
+		}, ...dataColumns] : dataColumns;
+		return /* @__PURE__ */ jsxs("div", {
+			className: "flex-grow flex flex-col overflow-hidden min-h-0",
+			children: [
+				actionableCollections.length > 0 && /* @__PURE__ */ jsxs("div", {
+					className: cls("px-4 py-1.5 border-b flex items-center gap-2 shrink-0 bg-surface-50 dark:bg-surface-900", defaultBorderMixin),
+					children: [/* @__PURE__ */ jsx(Tooltip, {
+						title: t("studio_sql_cms_collections_tooltip"),
+						children: /* @__PURE__ */ jsx(Typography, {
+							variant: "caption",
+							className: "text-[10px] font-bold uppercase tracking-widest text-text-disabled dark:text-text-disabled-dark mr-1 shrink-0 cursor-help",
+							children: t("studio_sql_cms")
+						})
+					}), /* @__PURE__ */ jsx("div", {
+						className: "flex items-center gap-1.5 overflow-x-auto no-scrollbar",
+						children: actionableCollections.map((mc) => /* @__PURE__ */ jsx(Tooltip, {
+							title: `Table "${mc.tableName}" → ${mc.collection.name} (PK: ${mc.pkColumn})`,
+							children: /* @__PURE__ */ jsxs("span", {
+								className: "inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[11px] font-medium bg-primary/10 dark:bg-primary-dark/15 text-primary dark:text-primary-dark whitespace-nowrap border border-primary/20 dark:border-primary-dark/20",
+								children: [typeof mc.collection.icon === "string" && /* @__PURE__ */ jsx(IconForView, {
+									collectionOrView: mc.collection,
+									className: "text-[12px]"
+								}), mc.collection.name]
+							})
+						}, mc.tableName))
+					})]
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "flex-grow relative h-full min-h-0 min-w-0",
+					children: /* @__PURE__ */ jsx(VirtualTable, {
+						data: results,
+						columns,
+						rowHeight: 32,
+						headerHeight: 32,
+						extraData: editingCell,
+						onColumnResizeEnd: handleColumnResize,
+						cellRenderer: ({ rowData, column, rowIndex }) => {
+							if (column.key === "__cms_action__") {
+								const rowActions = getRowEntityActions(rowData ?? {});
+								if (rowActions.length === 0) return /* @__PURE__ */ jsx("div", { className: "h-full w-full" });
+								if (rowActions.length === 1) {
+									const ra = rowActions[0];
+									return /* @__PURE__ */ jsx("div", {
+										className: "h-full flex items-center justify-center",
+										children: /* @__PURE__ */ jsx(Tooltip, {
+											title: t("studio_sql_edit_entity", {
+												name: ra.collection.collection.name,
+												id: String(ra.entityId)
+											}),
+											children: /* @__PURE__ */ jsx(IconButton, {
+												size: "small",
+												className: "text-surface-400 dark:text-surface-500 hover:text-surface-600 dark:hover:text-surface-300 transition-colors",
+												onClick: (e) => {
+													e.stopPropagation();
+													sideEntityController?.open({
+														path: ra.collection.collection.slug,
+														entityId: ra.entityId,
+														collection: ra.collection.collection,
+														updateUrl: false
+													});
+												},
+												children: /* @__PURE__ */ jsx(PencilIcon, { size: iconSize.smallest })
+											})
+										})
+									});
+								}
+								return /* @__PURE__ */ jsx("div", {
+									className: "h-full flex items-center justify-center",
+									children: /* @__PURE__ */ jsx(Menu, {
+										trigger: /* @__PURE__ */ jsx(IconButton, {
+											size: "small",
+											className: "text-surface-400 dark:text-surface-500 hover:text-surface-600 dark:hover:text-surface-300 transition-colors",
+											onClick: (e) => e.stopPropagation(),
+											children: /* @__PURE__ */ jsx(MoreVerticalIcon, { size: iconSize.smallest })
+										}),
+										children: rowActions.map((ra) => /* @__PURE__ */ jsx(MenuItem, {
+											dense: true,
+											onClick: () => {
+												sideEntityController?.open({
+													path: ra.collection.collection.slug,
+													entityId: ra.entityId,
+													collection: ra.collection.collection,
+													updateUrl: false
+												});
+											},
+											children: t("studio_sql_edit_entity", {
+												name: ra.collection.collection.name,
+												id: String(ra.entityId)
+											})
+										}, ra.collection.tableName))
+									})
+								});
+							}
+							const isEditing = editingCell?.rowIndex === rowIndex && editingCell?.columnKey === column.key;
+							const value = rowData ? rowData[column.key] : null;
+							const displayValue = typeof value === "object" && value !== null ? JSON.stringify(value) : String(value ?? "");
+							if (isEditing) return /* @__PURE__ */ jsx(FixedEditorOverlay, {
+								displayValue,
+								onSave: (val) => handleCellSave(val, rowData ?? {}, column.key, rowIndex),
+								onCancel: () => setEditingCell(null)
+							});
+							return /* @__PURE__ */ jsx("div", {
+								className: "px-4 py-1.5 h-full flex items-center whitespace-nowrap text-[13px] text-text-primary dark:text-text-primary-dark font-mono cursor-text group/cell",
+								onDoubleClick: () => handleDoubleClick(rowIndex, column.key, displayValue, rowData ?? {}),
+								children: /* @__PURE__ */ jsx("div", {
+									className: "truncate flex-grow",
+									title: displayValue,
+									children: displayValue === "" ? /* @__PURE__ */ jsx("span", {
+										className: "text-text-disabled dark:text-text-disabled-dark italic text-[11px]",
+										children: "NULL"
+									}) : displayValue
+								})
+							});
+						}
+					})
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: cls("p-2 px-4 border-t bg-surface-50 dark:bg-surface-900 flex justify-between items-center shrink-0", defaultBorderMixin),
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "flex space-x-4",
+						children: [/* @__PURE__ */ jsxs("div", {
+							className: "flex items-center text-[11px]",
+							children: [/* @__PURE__ */ jsx("span", {
+								className: "font-bold text-text-disabled dark:text-text-disabled-dark mr-2 uppercase tracking-tighter",
+								children: t("studio_sql_rows")
+							}), /* @__PURE__ */ jsx("span", {
+								className: "font-mono text-text-secondary dark:text-text-secondary-dark",
+								children: results.length
+							})]
+						}), /* @__PURE__ */ jsxs("div", {
+							className: "flex items-center text-[11px]",
+							children: [/* @__PURE__ */ jsx("span", {
+								className: "font-bold text-text-disabled dark:text-text-disabled-dark mr-2 uppercase tracking-tighter",
+								children: t("studio_sql_time")
+							}), /* @__PURE__ */ jsxs("span", {
+								className: "font-mono text-text-secondary dark:text-text-secondary-dark",
+								children: [execTime, "ms"]
+							})]
+						})]
+					}), /* @__PURE__ */ jsxs("div", {
+						className: "flex gap-2 overflow-x-auto no-scrollbar items-center px-2",
+						children: [
+							/* @__PURE__ */ jsx(Button, {
+								size: "small",
+								variant: "text",
+								className: "text-[10px] uppercase font-bold text-text-secondary dark:text-text-secondary-dark whitespace-nowrap",
+								onClick: handleExportMarkdown,
+								children: t("studio_sql_copy_markdown")
+							}),
+							/* @__PURE__ */ jsx(Button, {
+								size: "small",
+								variant: "text",
+								className: "text-[10px] uppercase font-bold text-text-secondary dark:text-text-secondary-dark whitespace-nowrap",
+								onClick: handleExportJSON,
+								children: t("studio_sql_export_json")
+							}),
+							/* @__PURE__ */ jsx(Button, {
+								size: "small",
+								variant: "text",
+								className: "text-[10px] uppercase font-bold text-text-secondary dark:text-text-secondary-dark whitespace-nowrap",
+								onClick: handleExportCSV,
+								children: t("studio_sql_export_csv")
+							})
+						]
+					})]
+				})
+			]
+		});
+	};
+	const [sidebarSize, setSidebarSize] = useState(() => {
+		try {
+			const projectPrefixSync = client?.baseUrl ? client.baseUrl.replace(/^https?:\/\//, "").replace(/[^a-zA-Z0-9]/g, "_") : "default";
+			const saved = localStorage.getItem(`rebase_sql_editor_sidebar_size_${projectPrefixSync}`);
+			return saved !== null ? parseFloat(saved) : 20;
+		} catch (e) {
+			return 20;
+		}
+	});
+	const [editorHeight, setEditorHeight] = useState(() => {
+		try {
+			const projectPrefixSync = client?.baseUrl ? client.baseUrl.replace(/^https?:\/\//, "").replace(/[^a-zA-Z0-9]/g, "_") : "default";
+			const saved = localStorage.getItem(`rebase_sql_editor_height_${projectPrefixSync}`);
+			return saved !== null ? parseFloat(saved) : 50;
+		} catch (e) {
+			return 50;
+		}
+	});
+	useEffect(() => {
+		try {
+			localStorage.setItem(`rebase_sql_editor_sidebar_size_${projectPrefix}`, sidebarSize.toString());
+		} catch (e) {}
+	}, [sidebarSize, projectPrefix]);
+	useEffect(() => {
+		try {
+			localStorage.setItem(`rebase_sql_editor_height_${projectPrefix}`, editorHeight.toString());
+		} catch (e) {}
+	}, [editorHeight, projectPrefix]);
+	const activeSnippet = snippets.find((s) => s.sql === activeTab.sql);
+	const isFavorite = activeSnippet?.isFavorite || false;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex h-full w-full bg-white dark:bg-surface-950 overflow-hidden text-text-primary dark:text-text-primary-dark",
+		children: [
+			/* @__PURE__ */ jsx(ResizablePanels, {
+				orientation: "horizontal",
+				panelSizePercent: sidebarSize,
+				onPanelSizeChange: setSidebarSize,
+				minPanelSizePx: 220,
+				firstPanel: /* @__PURE__ */ jsx(SQLEditorSidebar, {
+					snippets,
+					history,
+					onSelectSnippet: setSql,
+					onTableClick: setSql,
+					onDeleteSnippet: handleDeleteSnippet,
+					schemas,
+					isSchemaLoading,
+					schemaError,
+					onRetrySchema: fetchSchema
+				}),
+				secondPanel: /* @__PURE__ */ jsxs("div", {
+					className: "flex-grow flex flex-col min-w-0 h-full w-full",
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: cls("flex items-center justify-between pr-2 border-b bg-white dark:bg-surface-950", defaultBorderMixin),
+						children: [/* @__PURE__ */ jsx("div", {
+							className: "flex items-center flex-grow overflow-hidden mr-4",
+							children: /* @__PURE__ */ jsxs("div", {
+								className: "flex items-center no-scrollbar overflow-x-auto min-w-0",
+								children: [/* @__PURE__ */ jsx(Tabs, {
+									value: activeTabId,
+									onValueChange: handleTabChange,
+									variant: "boxy",
+									className: "w-[unset] flex-shrink-0",
+									innerClassName: "bg-white dark:bg-surface-950",
+									children: tabs.map((tab) => /* @__PURE__ */ jsxs(Tab, {
+										value: tab.id,
+										className: "flex items-center justify-between group max-w-[200px]",
+										children: [
+											/* @__PURE__ */ jsx(TerminalIcon, {
+												size: iconSize.smallest,
+												className: "text-blue-500 mr-1.5 flex-shrink-0"
+											}),
+											/* @__PURE__ */ jsx("span", {
+												className: "truncate",
+												children: tab.name
+											}),
+											tabs.length > 1 && /* @__PURE__ */ jsx(IconButton, {
+												size: "smallest",
+												onClick: (e) => handleCloseTab(tab.id, e),
+												className: "ml-1 !p-0.5 opacity-0 group-hover:opacity-100 hover:text-red-500 transition-opacity",
+												children: /* @__PURE__ */ jsx(XIcon, { size: iconSize.smallest })
+											})
+										]
+									}, tab.id))
+								}), /* @__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,
+										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",
+									onClick: (e) => {
+										setAutoLimit(!autoLimit);
+										e.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("div", {
+										onClick: (e) => e.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: () => {
+											if (!activeSnippet) {
+												snackbarController.open({
+													type: "info",
+													message: t("studio_sql_save_first_to_favorite")
+												});
+												return;
+											}
+											saveSnippets(snippets.map((s) => s.id === activeSnippet.id ? {
+												...s,
+												isFavorite: !s.isFavorite
+											} : s));
+										},
+										children: /* @__PURE__ */ jsx("svg", {
+											className: `w-4 h-4 ${isFavorite ? "text-red-500 fill-current" : "text-text-disabled dark:text-text-disabled-dark hover:text-text-primary"}`,
+											fill: isFavorite ? "currentColor" : "none",
+											stroke: "currentColor",
+											strokeWidth: 2,
+											viewBox: "0 0 24 24",
+											children: /* @__PURE__ */ jsx("path", {
+												strokeLinecap: "round",
+												strokeLinejoin: "round",
+												d: "M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
+											})
+										})
+									})
+								}),
+								/* @__PURE__ */ jsx(Button, {
+									variant: "text",
+									size: "small",
+									onClick: () => setIsSaveDialogOpen(true),
+									children: t("studio_sql_save")
+								}),
+								/* @__PURE__ */ jsx("div", { className: "h-4 w-px bg-surface-200 dark:bg-surface-950 mx-1" }),
+								/* @__PURE__ */ jsx(Menu, {
+									trigger: /* @__PURE__ */ jsxs(Button, {
+										size: "small",
+										variant: "outlined",
+										className: "text-text-secondary dark:text-text-secondary-dark font-medium mr-2",
+										children: [/* @__PURE__ */ jsx(DatabaseIcon, {
+											size: iconSize.small,
+											className: "mr-1.5 text-text-disabled dark:text-text-disabled-dark"
+										}), /* @__PURE__ */ jsx("span", {
+											className: "max-w-[160px] truncate",
+											children: isLoadingConfig ? "..." : `${selectedDatabase || t("studio_sql_select_db")}${selectedRole ? ` (${selectedRole})` : ""}`
+										})]
+									}),
+									children: /* @__PURE__ */ jsxs("div", {
+										className: "max-h-64 overflow-y-auto",
+										children: [/* @__PURE__ */ jsx("div", {
+											className: "px-3 py-1.5 border-b border-surface-200 dark:border-surface-950 mb-1",
+											children: /* @__PURE__ */ jsx(Typography, {
+												variant: "caption",
+												className: "font-bold uppercase tracking-wider text-[9px] text-text-disabled dark:text-text-disabled-dark",
+												children: t("studio_sql_database")
+											})
+										}), isLoadingConfig ? /* @__PURE__ */ jsx("div", {
+											className: "flex items-center justify-center p-4",
+											children: /* @__PURE__ */ jsx(CircularProgress, { size: "small" })
+										}) : connectionConfigError ? /* @__PURE__ */ jsx("div", {
+											className: "px-3 py-2 text-xs text-red-500 dark:text-red-400 max-w-[200px] break-words",
+											children: connectionConfigError
+										}) : /* @__PURE__ */ jsxs(Fragment, { children: [
+											availableDatabases.map((db) => /* @__PURE__ */ jsx(MenuItem, {
+												dense: true,
+												onClick: () => handleDatabaseChange(db),
+												className: cls("text-xs", selectedDatabase === db && "text-primary dark:text-primary-dark"),
+												children: db
+											}, db)),
+											/* @__PURE__ */ jsx("div", {
+												className: "px-3 py-1.5 border-y border-surface-200 dark:border-surface-950 mb-1 mt-1",
+												children: /* @__PURE__ */ jsx(Typography, {
+													variant: "caption",
+													className: "font-bold uppercase tracking-wider text-[9px] text-text-disabled dark:text-text-disabled-dark",
+													children: t("studio_sql_role")
+												})
+											}),
+											availableRoles.map((role) => /* @__PURE__ */ jsxs(MenuItem, {
+												dense: true,
+												onClick: () => handleRoleChange(role),
+												className: cls("text-xs", selectedRole === role && "text-primary dark:text-primary-dark"),
+												children: [role, role === "postgres" ? " " + t("studio_sql_admin") : ""]
+											}, role))
+										] })]
+									})
+								}),
+								/* @__PURE__ */ jsxs(Button, {
+									onClick: () => handleRun(),
+									disabled: loading,
+									size: "small",
+									color: "primary",
+									children: [loading ? /* @__PURE__ */ jsx(CircularProgress, {
+										size: "smallest",
+										className: "mr-2"
+									}) : /* @__PURE__ */ jsx(PlayIcon, {
+										size: iconSize.smallest,
+										className: "mr-2"
+									}), t("studio_sql_run")]
+								})
+							]
+						})]
+					}), /* @__PURE__ */ jsx(ResizablePanels, {
+						orientation: "vertical",
+						panelSizePercent: editorHeight,
+						onPanelSizeChange: setEditorHeight,
+						minPanelSizePx: 100,
+						firstPanel: /* @__PURE__ */ jsx("div", {
+							className: "h-full w-full relative flex flex-col min-h-0",
+							children: /* @__PURE__ */ jsx(MonacoEditor, {
+								value: sql,
+								onChange: (v) => setSql(v || ""),
+								onRun: handleRun,
+								schemas
+							})
+						}),
+						secondPanel: /* @__PURE__ */ jsxs("div", {
+							className: "h-full w-full flex flex-col bg-surface-50 dark:bg-surface-950 overflow-hidden min-h-0",
+							children: [/* @__PURE__ */ jsx("div", {
+								className: cls("p-2 px-4 bg-surface-100 dark:bg-surface-900 border-b shrink-0 flex items-center", defaultBorderMixin),
+								children: /* @__PURE__ */ jsx(Typography, {
+									variant: "caption",
+									className: "font-bold text-text-disabled dark:text-text-disabled-dark uppercase tracking-widest text-[10px]",
+									children: t("studio_sql_query_results")
+								})
+							}), /* @__PURE__ */ jsx("div", {
+								className: "flex-grow flex flex-col min-h-0 overflow-hidden",
+								children: renderResults()
+							})]
+						})
+					})]
+				})
+			}),
+			/* @__PURE__ */ jsxs(Dialog, {
+				open: isSaveDialogOpen,
+				onOpenChange: setIsSaveDialogOpen,
+				children: [
+					/* @__PURE__ */ jsx(DialogTitle, { children: t("studio_sql_save_snippet") }),
+					/* @__PURE__ */ jsx(DialogContent, { children: /* @__PURE__ */ jsxs("div", {
+						className: "py-4 flex flex-col gap-4",
+						children: [/* @__PURE__ */ jsx(TextField, {
+							label: t("studio_sql_snippet_name"),
+							autoFocus: true,
+							placeholder: t("studio_sql_snippet_name_placeholder"),
+							value: newSnippetName,
+							onChange: (e) => setNewSnippetName(e.target.value),
+							onKeyDown: (e) => {
+								if (e.key === "Enter") {
+									e.preventDefault();
+									handleSaveSnippet();
+								}
+							}
+						}), /* @__PURE__ */ jsx(Typography, {
+							variant: "caption",
+							className: "text-text-disabled dark:text-text-disabled-dark block",
+							children: t("studio_sql_snippet_saved_local")
+						})]
+					}) }),
+					/* @__PURE__ */ jsxs(DialogActions, { children: [/* @__PURE__ */ jsx(Button, {
+						variant: "text",
+						onClick: () => setIsSaveDialogOpen(false),
+						children: t("studio_sql_cancel")
+					}), /* @__PURE__ */ jsx(Button, {
+						onClick: handleSaveSnippet,
+						color: "primary",
+						disabled: !newSnippetName.trim(),
+						children: t("studio_sql_save")
+					})] })
+				]
+			}),
+			/* @__PURE__ */ jsx(ConfirmationDialog, {
+				open: isConfirmDialogOpen,
+				onCancel: () => setIsConfirmDialogOpen(false),
+				title: t("studio_sql_dangerous_operation"),
+				body: t("studio_sql_dangerous_operation_body"),
+				onAccept: () => {
+					if (pendingAction) pendingAction();
+					setIsConfirmDialogOpen(false);
+				}
+			})
+		]
+	});
+};
+//#endregion
+export { SQLEditor };
+
+//# sourceMappingURL=SQLEditor-BLuq_zDM.js.map