@rebasepro/studio 0.24.0 → 0.24.1-canary.gcb918fc

package/dist/{SQLEditor-1An7w0j6.js → SQLEditor-D5Ci4pyW.js}

@@ -1,11 +1,11 @@
+import { a as needsDestructiveConfirmation, c as rememberColumnWidth, d as resultsToCsv, i as keepLatestColumnWidths, l as resolveCellEdit, m as withAutoLimit, n as formatSql, o as quoteIdentifier, p as typedJsonRows, r as groupSchemaRows, s as quoteTableName, t as buildExplainSql, u as resolveQueryCollections } from "./sql_utils-BZD31xE3.js";
 import { t as MonacoEditor } from "./MonacoEditor-CUxy5_k5.js";
-import { ConfirmationDialog, ErrorView, IconForView, useRebaseContext, useSnackbarController, useStudioCollectionRegistry, useStudioSidePanelController, useTranslation } from "@rebasepro/app";
+import { ConfirmationDialog, ErrorView, IconForView, useApiBase, useApiConfig, useRebaseContext, useSnackbarController, useStudioCollectionRegistry, useStudioSidePanelController, useTranslation } from "@rebasepro/app";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { Alert, 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, isKeyHandled } from "@rebasepro/ui";
+import { Alert, Button, Checkbox, Chip, CircularProgress, Collapse, CopyIcon, DatabaseIcon, Dialog, DialogActions, DialogContent, DialogTitle, HeartIcon, IconButton, Menu, MenuIcon, MenuItem, MoreVerticalIcon, PencilIcon, PlayIcon, PlusIcon, RefreshCwIcon, ResizablePanels, SquareIcon, Tab, Tabs, TerminalIcon, TextField, TextareaAutosize, Tooltip, Trash2Icon, Typography, VirtualTable, XIcon, cls, defaultBorderMixin, iconSize, isKeyHandled } from "@rebasepro/ui";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { isArrayValue, isRecordValue, readStoredJson, readStoredString, toSnakeCase, writeStoredJson, writeStoredString } from "@rebasepro/utils";
+import { isArrayValue, isRecordValue, readStoredJson, readStoredString, writeStoredJson, writeStoredString } from "@rebasepro/utils";
 import { createPortal } from "react-dom";
-import { astVisitor, parse } from "pgsql-ast-parser";
 //#region src/components/SQLEditor/SchemaBrowser.tsx
 var SchemaBrowser = ({ onTableClick, schemas, isSchemaLoading, schemaError, onRetrySchema }) => {
 	const [expandedSchemas, setExpandedSchemas] = useState({ public: true });
@@ -31,9 +31,10 @@ var SchemaBrowser = ({ onTableClick, schemas, isSchemaLoading, schemaError, onRe
 				className: "font-semibold uppercase tracking-wider text-text-disabled dark:text-text-disabled-dark",
 				children: t("studio_schema_tables")
 			}), /* @__PURE__ */ jsx(IconButton, {
+				"aria-label": t("refresh"),
 				size: "small",
 				onClick: onRetrySchema,
-				title: "Refresh schema",
+				title: t("refresh"),
 				children: /* @__PURE__ */ jsx(RefreshCwIcon, { size: iconSize.smallest })
 			})]
 		}), /* @__PURE__ */ jsx("div", {
@@ -99,19 +100,21 @@ var SchemaBrowser = ({ onTableClick, schemas, isSchemaLoading, schemaError, onRe
 								className: "flex opacity-0 group-hover:opacity-100 focus-within:opacity-100 absolute right-1 items-center bg-surface-raised px-1 gap-1 rounded transition-opacity",
 								children: [
 									/* @__PURE__ */ jsx(IconButton, {
+										"aria-label": t("copy_table_name"),
 										size: "small",
 										onClick: (e) => {
 											e.stopPropagation();
 											navigator.clipboard.writeText(table.tableName);
 										},
-										title: "Copy table name",
+										title: t("copy_table_name"),
 										children: /* @__PURE__ */ jsx(CopyIcon, { size: iconSize.small })
 									}),
 									/* @__PURE__ */ jsxs(Menu, {
 										trigger: /* @__PURE__ */ jsx(IconButton, {
+											"aria-label": t("generate_sql_templates"),
 											size: "small",
 											onClick: (e) => e.stopPropagation(),
-											title: "Generate SQL templates",
+											title: t("generate_sql_templates"),
 											children: /* @__PURE__ */ jsx(MoreVerticalIcon, { size: iconSize.small })
 										}),
 										children: [
@@ -195,13 +198,14 @@ var SchemaBrowser = ({ onTableClick, schemas, isSchemaLoading, schemaError, onRe
 									children: col.dataType
 								}),
 								/* @__PURE__ */ jsx(IconButton, {
+									"aria-label": t("copy_column_name"),
 									size: "smallest",
 									className: "opacity-0 group-hover:opacity-100 absolute right-1 bg-surface-sheet transition-colors pointer-events-auto",
 									onClick: (e) => {
 										e.stopPropagation();
 										navigator.clipboard.writeText(col.name);
 									},
-									title: "Copy column name",
+									title: t("copy_column_name"),
 									children: /* @__PURE__ */ jsx(CopyIcon, { size: iconSize.smallest })
 								})
 							]
@@ -301,6 +305,7 @@ var SQLEditorSidebar = ({ onSelectSnippet, onTableClick, snippets, history, onDe
 												children: snippet.sql
 											}),
 											/* @__PURE__ */ jsx(IconButton, {
+												"aria-label": t("studio_sql_sidebar_delete_snippet"),
 												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) => {
@@ -333,6 +338,7 @@ var SQLEditorSidebar = ({ onSelectSnippet, onTableClick, snippets, history, onDe
 											children: snippet.sql
 										}),
 										/* @__PURE__ */ jsx(IconButton, {
+											"aria-label": t("studio_sql_sidebar_delete_snippet"),
 											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) => {
@@ -392,335 +398,6 @@ var SQLEditorSidebar = ({ onSelectSnippet, onTableClick, snippets, history, onDe
 	});
 };
 //#endregion
-//#region src/utils/sql_utils.ts
-/** The statements in `sqlText`, or `null` when the parser cannot read it. */
-function parseStatements(sqlText) {
-	try {
-		return parse(sqlText);
-	} catch {
-		return null;
-	}
-}
-/**
-* The `EXPLAIN` for one statement, or `null` when `sqlText` is not exactly one.
-*
-* Never `ANALYZE`: that executes the statement to time it, so explaining a
-* `DELETE` deleted the rows — without the confirmation "Run" asks for.
-*
-* And never more than one statement. Sent as one simple query, `EXPLAIN (…)
-* SELECT 1; DELETE …` explains the SELECT and *runs* the DELETE. Text the
-* parser cannot read is still explained, as long as no `;` could be hiding a
-* second statement in it.
-*/
-function buildExplainSql(sqlText) {
-	const statement = sqlText.trim().replace(/;+$/, "").trim();
-	if (!statement) return null;
-	const statements = parseStatements(statement);
-	return (statements ? statements.length === 1 : !statement.includes(";")) ? `EXPLAIN (FORMAT JSON) ${statement}` : null;
-}
-/**
-* Whether the console's automatic `LIMIT` may be appended to `sqlText`: one
-* top-level SELECT that has no limit of its own.
-*
-* Decided on the parsed statement, not the text. A search for the word SELECT
-* also found it inside `INSERT INTO … SELECT` and `CREATE TABLE … AS SELECT`,
-* which then copied a thousand rows and reported success, and at the start of
-* a script whose last statement the appended `LIMIT` turned into a syntax
-* error. Text the parser cannot read is left as written.
-*/
-function acceptsAutoLimit(sqlText) {
-	const statements = parseStatements(sqlText);
-	if (!statements || statements.length !== 1) return false;
-	const [statement] = statements;
-	return statement.type === "select" && !statement.limit;
-}
-/** A destructive command named anywhere in a text, comments included. */
-var DESTRUCTIVE_COMMAND = /\b(DELETE|UPDATE|DROP|TRUNCATE)\b/i;
-function isDestructiveStatement(statement) {
-	switch (statement.type) {
-		case "delete":
-		case "update": return !statement.where;
-		case "truncate table":
-		case "drop table":
-		case "drop sequence":
-		case "drop index":
-		case "drop type":
-		case "drop trigger":
-		case "drop function": return true;
-		case "alter table": return statement.changes.some((change) => change.type === "drop column" || change.type === "drop constraint");
-		case "with": return statement.bind.some((binding) => isDestructiveStatement(binding.statement)) || isDestructiveStatement(statement.in);
-		case "with recursive": return isDestructiveStatement(statement.in);
-		case "do": return DESTRUCTIVE_COMMAND.test(statement.code);
-		default: return false;
-	}
-}
-/**
-* Whether "Run" asks before running `sqlText`: a statement in it deletes or
-* updates without a WHERE of its own, drops or truncates.
-*
-* Decided per parsed statement, not on the text. A search of the text for the
-* word WHERE found it in another statement or in a comment, so `DELETE FROM
-* posts; SELECT * FROM posts WHERE id = 1` deleted every post without asking.
-* Text the parser cannot read is confirmed whenever it names a destructive
-* command.
-*/
-function needsDestructiveConfirmation(sqlText) {
-	const statements = parseStatements(sqlText);
-	if (!statements) return DESTRUCTIVE_COMMAND.test(sqlText);
-	return statements.some(isDestructiveStatement);
-}
-/**
-* A table as SQL: `"schema"."table"` when a schema is given, a bare `"table"`
-* otherwise.
-*/
-function quoteTableName(tableName, schemaName) {
-	return schemaName ? `${quoteIdentifier(schemaName)}.${quoteIdentifier(tableName)}` : quoteIdentifier(tableName);
-}
-/** An identifier as SQL, whatever it holds: double-quoted, with `"` doubled. */
-function quoteIdentifier(identifier) {
-	return `"${identifier.replace(/"/g, "\"\"")}"`;
-}
-var refuse = (key, params = {}) => ({ refusal: {
-	key,
-	params
-} });
-/**
-* Which stored cell an edit of the result column `resultColumn` writes, and
-* how its row is found again — or why no edit is safe.
-*
-* Decided on what the database reported, not on the query's text. Each
-* column of the result says which table column it was read from, or that it
-* was computed; a cell is editable only when it was read from a column of a
-* table, every column of that table's primary key was read too, and each of
-* them is the only column of the result with its name — a row holds one value
-* per name.
-*
-* The text was the only evidence before, and it was wrong twice over. For
-* `SELECT p.id, a.name FROM posts p JOIN authors a …` it took the post's `id`
-* for the author's key and updated whichever author shared the post's id.
-* For `SELECT id, lower(email) AS name FROM users` it wrote the edited text
-* to `users.name`.
-*
-* The database reports a table, not which mention of it: in a self-join both
-* sides are `authors`, and a key from one with a value from the other finds
-* the wrong row. So the query is still read, for one thing — the table must
-* be read once, and nothing it is read through may be read twice.
-*/
-function resolveCellEdit(sqlText, provenance, resultColumn) {
-	const sameName = provenance.columns.filter((column) => column.name === resultColumn);
-	if (sameName.length !== 1) return refuse("studio_sql_edit_duplicate_column", { column: resultColumn });
-	const source = sameName[0].source;
-	if (!source) return refuse("studio_sql_edit_computed_column", { column: resultColumn });
-	const tableLabel = `${source.schema}.${source.table}`;
-	const table = provenance.tables.find((t) => t.schema === source.schema && t.table === source.table);
-	if (!table || table.kind !== "table" && table.kind !== "partitioned table") return refuse("studio_sql_edit_not_a_table", {
-		column: resultColumn,
-		table: tableLabel
-	});
-	if (table.hasInheritors) return refuse("studio_sql_edit_inherited_table", { table: tableLabel });
-	if (table.primaryKey.length === 0) return refuse("studio_sql_edit_no_primary_key", { table: tableLabel });
-	const key = [];
-	for (const keyColumn of table.primaryKey) {
-		const holders = provenance.columns.filter((column) => column.source?.schema === source.schema && column.source.table === source.table && column.source.column === keyColumn);
-		const holder = holders.length === 1 && provenance.columns.filter((column) => column.name === holders[0].name).length === 1 ? holders[0] : void 0;
-		if (!holder) return refuse("studio_sql_edit_key_missing", {
-			table: tableLabel,
-			columns: table.primaryKey.join(", ")
-		});
-		key.push({
-			column: keyColumn,
-			resultColumn: holder.name
-		});
-	}
-	const readOnce = tableReadOnce(sqlText, source.table);
-	if (readOnce !== true) return readOnce;
-	return { target: {
-		schema: source.schema,
-		table: source.table,
-		column: source.column,
-		key
-	} };
-}
-/**
-* Whether `sqlText` is one SELECT that reads `table` once — counting every
-* mention of a table of that name, in any schema and at any depth, and every
-* mention of a `WITH` query, since one read twice reads its tables twice.
-*/
-function tableReadOnce(sqlText, table) {
-	const statements = parseStatements(sqlText);
-	if (!statements) return refuse("studio_sql_edit_unreadable_query");
-	if (statements.length !== 1) return refuse("studio_sql_edit_not_a_select");
-	const [statement] = statements;
-	if (!(statement.type === "select" || statement.type === "with" && statement.in.type === "select" && statement.bind.every((binding) => binding.statement.type === "select"))) return refuse("studio_sql_edit_not_a_select");
-	const mentions = /* @__PURE__ */ new Map();
-	const withNames = [];
-	astVisitor((visitor) => ({
-		fromTable: (from) => {
-			const name = from.name.name.toLowerCase();
-			mentions.set(name, (mentions.get(name) ?? 0) + 1);
-			visitor.super().fromTable(from);
-		},
-		with: (withStatement) => {
-			withNames.push(...withStatement.bind.map((binding) => binding.alias.name.toLowerCase()));
-			visitor.super().with(withStatement);
-		}
-	})).statement(statement);
-	return (mentions.get(table.toLowerCase()) ?? 0) !== 1 || withNames.some((name) => (mentions.get(name) ?? 0) > 1) ? refuse("studio_sql_edit_table_read_twice", { table }) : true;
-}
-/**
-* The collections a result's rows can be opened as: those whose table one of
-* the result's columns was read from, with the table's (single-column) primary
-* key read too, under a name no other column of the result has.
-*
-* Matched on the provenance the database reported. A text match took the
-* result's `id` for every table of a join: `SELECT p.id, a.name FROM posts p
-* JOIN authors a …` offered to open the author whose id was the post's.
-*/
-function resolveQueryCollections(provenance, collections) {
-	const results = [];
-	for (const table of provenance.tables) {
-		const collection = collections.find((c) => {
-			const tableName = ("table" in c ? c.table : void 0) || toSnakeCase(c.slug);
-			const schemaName = ("schema" in c ? c.schema : void 0) || "public";
-			return tableName === table.table && schemaName === table.schema;
-		});
-		if (!collection || table.primaryKey.length !== 1) continue;
-		const [keyColumn] = table.primaryKey;
-		const holders = provenance.columns.filter((column) => column.source?.schema === table.schema && column.source.table === table.table && column.source.column === keyColumn);
-		if (holders.length !== 1) continue;
-		const pkColumn = holders[0].name;
-		if (provenance.columns.filter((column) => column.name === pkColumn).length !== 1) continue;
-		results.push({
-			tableName: table.table,
-			schemaName: table.schema,
-			collection,
-			pkColumn
-		});
-	}
-	return results;
-}
-/** A character an unquoted identifier or keyword can hold, `$` included. */
-var IDENTIFIER_CHARACTER = /[A-Za-z0-9_$]/;
-/**
-* Cut `sqlText` into code and the things in it whose text is data.
-*
-* A lexer, not a parser: it reads text the parser refuses as well, which is
-* most of what a person types while writing a query.
-*/
-function splitSql(sqlText) {
-	const segments = [];
-	let code = "";
-	const push = (text, kind) => {
-		if (code) segments.push({
-			text: code,
-			kind: "code"
-		});
-		code = "";
-		segments.push({
-			text,
-			kind
-		});
-	};
-	let i = 0;
-	while (i < sqlText.length) {
-		const ch = sqlText[i];
-		const next = sqlText[i + 1];
-		if (ch === "-" && next === "-") {
-			const newline = sqlText.indexOf("\n", i);
-			const end = newline === -1 ? sqlText.length : newline + 1;
-			push(sqlText.slice(i, end), "line comment");
-			i = end;
-			continue;
-		}
-		if (ch === "/" && next === "*") {
-			let depth = 1;
-			let j = i + 2;
-			while (j < sqlText.length && depth > 0) if (sqlText[j] === "/" && sqlText[j + 1] === "*") {
-				depth++;
-				j += 2;
-			} else if (sqlText[j] === "*" && sqlText[j + 1] === "/") {
-				depth--;
-				j += 2;
-			} else j++;
-			push(sqlText.slice(i, j), "block comment");
-			i = j;
-			continue;
-		}
-		if (ch === "'" || ch === "\"") {
-			const backslashEscapes = ch === "'" && /(^|[^A-Za-z0-9_$])[eE]$/.test(code);
-			let j = i + 1;
-			while (j < sqlText.length) if (backslashEscapes && sqlText[j] === "\\") j += 2;
-			else if (sqlText[j] === ch && sqlText[j + 1] === ch) j += 2;
-			else if (sqlText[j] === ch) {
-				j++;
-				break;
-			} else j++;
-			push(sqlText.slice(i, j), ch === "'" ? "literal" : "identifier");
-			i = j;
-			continue;
-		}
-		if (ch === "$" && !IDENTIFIER_CHARACTER.test(code.slice(-1))) {
-			const tag = /^\$(?:[A-Za-z_][A-Za-z0-9_]*)?\$/.exec(sqlText.slice(i));
-			if (tag) {
-				const close = sqlText.indexOf(tag[0], i + tag[0].length);
-				const end = close === -1 ? sqlText.length : close + tag[0].length;
-				push(sqlText.slice(i, end), "literal");
-				i = end;
-				continue;
-			}
-		}
-		code += ch;
-		i++;
-	}
-	if (code) segments.push({
-		text: code,
-		kind: "code"
-	});
-	return segments;
-}
-/**
-* The console's "Format SQL": runs of whitespace become one space, a comma is
-* followed by one, and an `=` standing alone gets one on each side — in the
-* code only.
-*
-* A literal, a quoted identifier and a comment are copied as they are: their
-* text is data, and rewriting `'a,b'` to `'a, b'` changes the value the next
-* Run writes. A line comment keeps the line break that ends it, or it would
-* swallow the code after it. `>=`, `<=`, `!=`, `:=` and `=>` are operators of
-* their own and are left whole.
-*/
-function formatSql(sqlText) {
-	const segments = splitSql(sqlText);
-	return segments.map((segment, index) => {
-		if (segment.kind !== "code") return segment.text;
-		const tidied = segment.text.replace(/\s+/g, " ").replace(/\s*,\s*/g, ", ").replace(/(?<![<>!:=~*+\-/%^&|#@?])\s*=\s*(?![=>~*<])/g, " = ");
-		return segments[index - 1]?.kind === "line comment" ? tidied.trimStart() : tidied;
-	}).join("").trim();
-}
-/**
-* `sqlText` with the console's automatic `LIMIT` on it, or `null` when it
-* takes none (see {@link acceptsAutoLimit}).
-*
-* The limit goes straight after the statement's last token — before a
-* trailing comment, which would otherwise swallow it, and in place of a
-* trailing `;`. A query that computes an aggregate is limited like any other:
-* the limit applies to the rows it returns, so a `count(*)` still counts every
-* row, and a window `count(*) OVER ()` is no longer a way past the cap.
-*/
-function withAutoLimit(sqlText, limit) {
-	if (!acceptsAutoLimit(sqlText)) return null;
-	const segments = splitSql(sqlText);
-	const isComment = (segment) => segment.kind === "line comment" || segment.kind === "block comment";
-	const isFiller = (segment) => isComment(segment) || segment.kind === "code" && /^[\s;]*$/.test(segment.text);
-	let last = segments.length - 1;
-	while (last >= 0 && isFiller(segments[last])) last--;
-	if (last < 0) return null;
-	const lastSegment = segments[last];
-	const head = lastSegment.kind === "code" ? lastSegment.text.replace(/[\s;]+$/, "") : lastSegment.text;
-	const tail = (lastSegment.kind === "code" ? lastSegment.text.slice(head.length) : "").replace(/;/g, "") + segments.slice(last + 1).map((segment) => segment.kind === "code" ? segment.text.replace(/;/g, "") : segment.text).join("");
-	return `${segments.slice(0, last).map((segment) => segment.text).join("")}${head} LIMIT ${limit};${tail.trimEnd()}`;
-}
-//#endregion
 //#region src/components/SQLEditor/ExplainVisualizer.tsx
 var ExplainVisualizer = ({ plan, isRoot = true }) => {
 	const [expanded, setExpanded] = useState(true);
@@ -864,6 +541,11 @@ var ExplainVisualizer = ({ plan, isRoot = true }) => {
 };
 //#endregion
 //#region src/components/SQLEditor/SQLEditor.tsx
+/**
+* The box a result cell is edited in. It closes once: Enter saves, Escape
+* cancels, a click away saves — and the blur a closing box can still receive
+* is not a second answer, which made Enter save twice and Escape save at all.
+*/
 var FixedEditorOverlay = ({ displayValue, onSave, onCancel }) => {
 	const [rect, setRect] = useState(null);
 	const [windowSize, setWindowSize] = useState({
@@ -871,6 +553,14 @@ var FixedEditorOverlay = ({ displayValue, onSave, onCancel }) => {
 		height: 1e3
 	});
 	const anchorRef = useRef(null);
+	const closedRef = useRef(false);
+	/** Close the box, saving `typed` when it is given. Only the first call counts. */
+	const close = (typed) => {
+		if (closedRef.current) return;
+		closedRef.current = true;
+		if (typed !== void 0) onSave(typed);
+		onCancel();
+	};
 	useEffect(() => {
 		if (anchorRef.current && anchorRef.current.parentElement) setRect(anchorRef.current.parentElement.getBoundingClientRect());
 		if (typeof window !== "undefined") {
@@ -923,17 +613,13 @@ var FixedEditorOverlay = ({ displayValue, onSave, onCancel }) => {
 					e.target.value = "";
 					e.target.value = val;
 				},
-				onBlur: (e) => {
-					onSave(e.target.value);
-					onCancel();
-				},
+				onBlur: (e) => close(e.target.value),
 				onKeyDown: (e) => {
 					if (e.key === "Enter" && !e.shiftKey) {
 						e.preventDefault();
-						onSave(e.currentTarget.value);
-						onCancel();
+						close(e.currentTarget.value);
 					}
-					if (e.key === "Escape") onCancel();
+					if (e.key === "Escape") close();
 				}
 			})
 		}), document.body)
@@ -1000,7 +686,8 @@ var SQLEditor = () => {
 			lastExecutedConnection: null,
 			ranAs: null,
 			lastProvenance: null,
-			notices: []
+			notices: [],
+			truncatedFrom: null
 		}));
 		if (restored.length > 0) return restored;
 		return [{
@@ -1017,7 +704,8 @@ var SQLEditor = () => {
 			lastExecutedConnection: null,
 			ranAs: null,
 			lastProvenance: null,
-			notices: []
+			notices: [],
+			truncatedFrom: null
 		}];
 	});
 	const [activeTabId, setActiveTabId] = useState(() => {
@@ -1035,6 +723,12 @@ var SQLEditor = () => {
 	const loading = activeTab.loading;
 	const error = activeTab.error;
 	const execTime = activeTab.execTime;
+	/**
+	* The SQL whose rows are on screen, which their column widths are kept
+	* under. Not the text being typed: keyed by that, every keystroke handed
+	* the grid other widths, and every visible cell was drawn again.
+	*/
+	const resultSql = activeTab.lastExecutedSql ?? "";
 	const setSql = (newSql) => updateActiveTab({ sql: newSql });
 	useEffect(() => {
 		let mounted = true;
@@ -1178,30 +872,7 @@ var SQLEditor = () => {
                     c.table_schema, c.table_name, c.ordinal_position;
             `, { database: selectedDatabase });
 			const processGrouped = (data) => {
-				const grouped = 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;
-				}, {});
-				setSchemas(grouped);
+				setSchemas(groupSchemaRows(data));
 			};
 			if (!result || !Array.isArray(result)) if (result && typeof result === "object" && "rows" in result && Array.isArray(result.rows)) processGrouped(result.rows);
 			else {
@@ -1362,10 +1033,10 @@ var SQLEditor = () => {
 		t
 	]);
 	const [columnWidths, setColumnWidths] = useState(() => {
-		return readStoredJson(`rebase_sql_column_widths_${client?.baseUrl ? client.baseUrl.replace(/^https?:\/\//, "").replace(/[^a-zA-Z0-9]/g, "_") : "default"}`, {
+		return keepLatestColumnWidths(readStoredJson(`rebase_sql_column_widths_${client?.baseUrl ? client.baseUrl.replace(/^https?:\/\//, "").replace(/[^a-zA-Z0-9]/g, "_") : "default"}`, {
 			fallback: {},
 			accept: isRecordValue
-		});
+		}));
 	});
 	const [snippets, setSnippets] = useState([]);
 	const [history, setHistory] = useState([]);
@@ -1430,7 +1101,8 @@ var SQLEditor = () => {
 			lastExecutedConnection: null,
 			ranAs: null,
 			lastProvenance: null,
-			notices: []
+			notices: [],
+			truncatedFrom: null
 		}]);
 		setActiveTabId(newId);
 	};
@@ -1447,22 +1119,46 @@ var SQLEditor = () => {
 	};
 	const handleColumnResize = useCallback(({ key, width }) => {
 		setColumnWidths((prev) => {
-			const newWidths = {
-				...prev,
-				[activeTab.sql]: {
-					...prev[activeTab.sql] || {},
-					[key]: width
-				}
-			};
+			const newWidths = rememberColumnWidth(prev, resultSql, key, width);
 			writeStoredJson(`rebase_sql_column_widths_${projectPrefix}`, newWidths);
 			return newWidths;
 		});
-	}, [activeTab.sql, projectPrefix]);
+	}, [resultSql, projectPrefix]);
 	const handlePrettify = () => {
 		setSql(formatSql(activeTab.sql));
 	};
 	/** The editor, for the selection the toolbar's buttons act on. */
 	const editorHandle = useRef(null);
+	/**
+	* The tabs with a run or an explain in flight. A ref, not the tab's
+	* `loading`: two Cmd+Enter in a row both read the render before the first
+	* set it, and only the button was disabled — so an INSERT ran twice, and
+	* the slower answer drew over the newer one.
+	*/
+	const tabsRunningRef = useRef(/* @__PURE__ */ new Set());
+	/**
+	* Each tab's run in flight, by tab, for "Cancel run": aborting it rejects
+	* the run at once, and a server that can cancels the statement too.
+	*/
+	const runAbortRef = useRef(/* @__PURE__ */ new Map());
+	const [cancellableTabs, setCancellableTabs] = useState(/* @__PURE__ */ new Set());
+	const setCancellable = (tabId, cancellable) => setCancellableTabs((previous) => {
+		const next = new Set(previous);
+		if (cancellable) next.add(tabId);
+		else next.delete(tabId);
+		return next;
+	});
+	const handleCancelRun = () => runAbortRef.current.get(activeTab.id)?.abort();
+	/** `work` on the active tab, unless that tab is already running something. */
+	const runOnce = async (tabId, work) => {
+		if (tabsRunningRef.current.has(tabId)) return;
+		tabsRunningRef.current.add(tabId);
+		try {
+			await work();
+		} finally {
+			tabsRunningRef.current.delete(tabId);
+		}
+	};
 	const handleExplain = async () => {
 		const explainSql = buildExplainSql(editorHandle.current?.getSelectedText() ?? activeTab.sql);
 		if (!explainSql) {
@@ -1472,6 +1168,9 @@ var SQLEditor = () => {
 			});
 			return;
 		}
+		await runOnce(activeTab.id, () => explain(explainSql));
+	};
+	const explain = async (explainSql) => {
 		updateActiveTab({
 			loading: true,
 			error: null,
@@ -1480,7 +1179,8 @@ var SQLEditor = () => {
 			lastExecutedConnection: null,
 			ranAs: null,
 			lastProvenance: null,
-			notices: []
+			notices: [],
+			truncatedFrom: null
 		});
 		const start = performance.now();
 		try {
@@ -1501,23 +1201,33 @@ var SQLEditor = () => {
 			updateActiveTab({ loading: false });
 		}
 	};
-	const executeRun = useCallback(async (sqlOverride) => {
+	const executeRun = useCallback((sqlOverride) => runOnce(activeTab.id, async () => {
 		const written = sqlOverride || activeTab.sql;
 		const sqlToRun = (autoLimit ? withAutoLimit(written, 1e3) : null) ?? written;
 		updateActiveTab({
 			loading: true,
 			error: null,
 			results: null,
-			notices: []
+			notices: [],
+			truncatedFrom: null
 		});
 		const start = performance.now();
+		const tabId = activeTab.id;
+		const abort = databaseAdmin?.runSqlScript ? new AbortController() : void 0;
+		if (abort) {
+			runAbortRef.current.set(tabId, abort);
+			setCancellable(tabId, true);
+		}
 		try {
 			if (databaseAdmin?.runSqlScript || databaseAdmin?.executeSql) {
 				const connection = {
 					database: selectedDatabase,
 					role: selectedRole
 				};
-				const run = databaseAdmin.runSqlScript ? await databaseAdmin.runSqlScript(sqlToRun, connection) : void 0;
+				const run = databaseAdmin.runSqlScript ? await databaseAdmin.runSqlScript(sqlToRun, {
+					...connection,
+					signal: abort?.signal
+				}) : void 0;
 				const rows = run ? run.rows : await databaseAdmin.executeSql(sqlToRun, connection);
 				updateActiveTab({
 					results: rows,
@@ -1532,18 +1242,24 @@ var SQLEditor = () => {
 						columns: Object.keys(rows[0] ?? {}).map((name) => ({ name })),
 						tables: []
 					},
-					notices: run?.notices ?? []
+					notices: run?.notices ?? [],
+					truncatedFrom: run?.truncated ? run.rowCount ?? null : null
 				});
 				if (run?.effectiveRole && connection.role) setConnectionOwner(run.effectiveRole !== connection.role ? run.effectiveRole : null);
 				if (history[history.length - 1] !== activeTab.sql) saveHistory([...history, activeTab.sql]);
 			} else updateActiveTab({ error: t("studio_sql_execution_not_supported") });
 		} catch (e) {
 			const message = e instanceof Error ? e.message : String(e);
-			updateActiveTab({ error: message || t("studio_sql_error_executing") });
+			updateActiveTab({ error: abort?.signal.aborted ? t("studio_sql_run_cancelled") : message || t("studio_sql_error_executing") });
 		} finally {
+			if (abort && runAbortRef.current.get(tabId) === abort) {
+				runAbortRef.current.delete(tabId);
+				setCancellable(tabId, false);
+			}
 			updateActiveTab({ loading: false });
 		}
-	}, [
+	}), [
+		activeTab.id,
 		activeTab.sql,
 		autoLimit,
 		databaseAdmin,
@@ -1595,11 +1311,7 @@ var SQLEditor = () => {
 	};
 	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 blob = new Blob([resultsToCsv(results)], { type: "text/csv" });
 		const url = window.URL.createObjectURL(blob);
 		const a = document.createElement("a");
 		a.href = url;
@@ -1607,9 +1319,71 @@ var SQLEditor = () => {
 		a.click();
 		window.URL.revokeObjectURL(url);
 	};
+	const apiConfig = useApiConfig();
+	const apiBase = useApiBase();
+	const [downloadingFullResult, setDownloadingFullResult] = useState(false);
+	/**
+	* The whole result of the last run, past the rows the console keeps:
+	* streamed by the server through a read-only cursor (`POST
+	* /admin/sql/csv`), on the database and as the role the rows on screen
+	* were read with.
+	*/
+	const handleDownloadFullCsv = async () => {
+		const query = activeTab.lastExecutedSql;
+		const connection = activeTab.lastExecutedConnection;
+		if (!query || !apiBase) return;
+		setDownloadingFullResult(true);
+		try {
+			const token = apiConfig?.getAuthToken ? await apiConfig.getAuthToken() : null;
+			const response = await fetch(`${apiBase}/admin/sql/csv`, {
+				method: "POST",
+				headers: {
+					"Content-Type": "application/json",
+					...token ? { Authorization: `Bearer ${token}` } : {}
+				},
+				body: JSON.stringify({
+					sql: query,
+					database: connection?.database,
+					role: connection?.role
+				})
+			});
+			if (!response.ok) {
+				const failure = await response.json().catch(() => null);
+				const reason = typeof failure === "object" && failure !== null && "error" in failure && typeof failure.error === "object" && failure.error !== null && "message" in failure.error && typeof failure.error.message === "string" ? failure.error.message : `HTTP ${response.status}`;
+				throw new Error(reason);
+			}
+			const blob = await response.blob();
+			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);
+		} catch (e) {
+			snackbarController.open({
+				type: "error",
+				message: t("studio_sql_download_full_failed", { message: e instanceof Error ? e.message : String(e) })
+			});
+		} finally {
+			setDownloadingFullResult(false);
+		}
+	};
 	const handleExportJSON = () => {
 		if (!results || results.length === 0) return;
-		const json = JSON.stringify(results, null, 2);
+		downloadJson(results);
+	};
+	/**
+	* The result's columns say their types when the script door ran it: each
+	* value read by its type (numbers, booleans, json), where Export JSON
+	* writes the database's text as the grid holds it.
+	*/
+	const typedColumns = activeTab.lastProvenance?.columns.some((column) => column.type !== void 0) ? activeTab.lastProvenance.columns : null;
+	const handleExportTypedJSON = () => {
+		if (!results || results.length === 0 || !typedColumns) return;
+		downloadJson(typedJsonRows(results, typedColumns));
+	};
+	const downloadJson = (rows) => {
+		const json = JSON.stringify(rows, null, 2);
 		const blob = new Blob([json], { type: "application/json" });
 		const url = window.URL.createObjectURL(blob);
 		const a = document.createElement("a");
@@ -1643,6 +1417,135 @@ var SQLEditor = () => {
 			});
 		});
 	};
+	const savedWidths = columnWidths[resultSql];
+	const resultColumnKeys = useMemo(() => results && results.length > 0 ? Object.keys(results[0]) : [], [results]);
+	const readFromAppDatabase = activeTab.lastExecutedConnection !== null && (activeTab.lastExecutedConnection.database === void 0 || activeTab.lastExecutedConnection.database === appDatabase);
+	const lastProvenance = activeTab.lastProvenance;
+	const registryCollections = collectionRegistry.collections;
+	const actionableCollections = useMemo(() => lastProvenance && registryCollections && readFromAppDatabase ? resolveQueryCollections(lastProvenance, registryCollections).filter((mc) => resultColumnKeys.includes(mc.pkColumn)) : [], [
+		lastProvenance,
+		registryCollections,
+		readFromAppDatabase,
+		resultColumnKeys
+	]);
+	const getRowEntityActions = useCallback((rowData) => {
+		if (!rowData) return [];
+		return actionableCollections.filter((mc) => rowData[mc.pkColumn] != null).map((mc) => ({
+			collection: mc,
+			entityId: rowData[mc.pkColumn]
+		}));
+	}, [actionableCollections]);
+	const hasRowActions = actionableCollections.length > 0;
+	const resultColumns = useMemo(() => {
+		const dataColumns = resultColumnKeys.map((key) => ({
+			key,
+			title: key,
+			width: savedWidths?.[key] ?? 150,
+			sortable: false,
+			resizable: true
+		}));
+		return hasRowActions ? [{
+			key: "__cms_action__",
+			title: "",
+			width: 36,
+			sortable: false,
+			resizable: false
+		}, ...dataColumns] : dataColumns;
+	}, [
+		resultColumnKeys,
+		savedWidths,
+		hasRowActions
+	]);
+	const renderResultCell = useCallback(({ 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",
+							"aria-label": t("studio_sql_edit_entity", {
+								name: ra.collection.collection.name,
+								id: String(ra.entityId)
+							}),
+							className: "text-surface-400 dark:text-surface-500 hover:text-surface-600 dark:hover:text-surface-300 transition-colors",
+							onClick: (e) => {
+								e.stopPropagation();
+								sidePanelController?.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, {
+						"aria-label": t("more_actions"),
+						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: () => {
+							sidePanelController?.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: value === null || value === void 0 ? /* @__PURE__ */ jsx("span", {
+					className: "text-text-disabled dark:text-text-disabled-dark italic text-[11px]",
+					children: "NULL"
+				}) : displayValue
+			})
+		});
+	}, [
+		getRowEntityActions,
+		editingCell,
+		handleCellSave,
+		handleDoubleClick,
+		sidePanelController,
+		t
+	]);
 	const renderResults = () => {
 		if (loading) return /* @__PURE__ */ jsx("div", {
 			className: "flex-grow flex items-center justify-center",
@@ -1666,17 +1569,10 @@ var SQLEditor = () => {
 			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"
-					})
+				children: [/* @__PURE__ */ jsx(DatabaseIcon, {
+					size: 48,
+					strokeWidth: 1,
+					className: "mx-auto mb-4 opacity-50"
 				}), /* @__PURE__ */ jsx(Typography, {
 					variant: "body2",
 					children: t("studio_sql_run_query_placeholder")
@@ -1688,8 +1584,9 @@ var SQLEditor = () => {
 			if (plan) return /* @__PURE__ */ jsxs("div", {
 				className: "flex-grow overflow-auto p-4 bg-surface-sheet flex flex-col items-start",
 				children: [/* @__PURE__ */ jsx(Typography, {
-					variant: "caption",
-					className: "font-semibold text-text-secondary mb-4 tracking-wider uppercase",
+					variant: "label",
+					color: "secondary",
+					className: "mb-4",
 					children: t("studio_sql_visual_execution_plan")
 				}), /* @__PURE__ */ jsx("div", {
 					className: "pb-12",
@@ -1711,31 +1608,6 @@ var SQLEditor = () => {
 				children: t("studio_sql_no_results")
 			})]
 		});
-		const savedWidths = columnWidths[activeTab.sql] || {};
-		const resultColumnKeys = Object.keys(results[0]);
-		const readFromAppDatabase = activeTab.lastExecutedConnection !== null && (activeTab.lastExecutedConnection.database === void 0 || activeTab.lastExecutedConnection.database === appDatabase);
-		const actionableCollections = activeTab.lastProvenance && collectionRegistry.collections && readFromAppDatabase ? resolveQueryCollections(activeTab.lastProvenance, collectionRegistry.collections).filter((mc) => 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: [
@@ -1745,19 +1617,22 @@ var SQLEditor = () => {
 						title: t("studio_sql_admin_collections_tooltip"),
 						children: /* @__PURE__ */ jsx(Typography, {
 							variant: "caption",
-							className: "text-[10px] font-semibold uppercase tracking-widest text-text-disabled dark:text-text-disabled-dark mr-1 shrink-0 cursor-help",
+							color: "secondary",
+							className: "mr-1 shrink-0 cursor-help",
 							children: t("studio_sql_collections_label")
 						})
 					}), /* @__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, {
+							children: /* @__PURE__ */ jsx(Chip, {
+								size: "smallest",
+								className: "whitespace-nowrap",
+								icon: typeof mc.collection.icon === "string" ? /* @__PURE__ */ jsx(IconForView, {
 									collectionOrView: mc.collection,
-									className: "text-[12px]"
-								}), mc.collection.name]
+									size: "smallest"
+								}) : void 0,
+								children: mc.collection.name
 							})
 						}, mc.tableName))
 					})]
@@ -1766,93 +1641,12 @@ var SQLEditor = () => {
 					className: "flex-grow relative h-full min-h-0 min-w-0",
 					children: /* @__PURE__ */ jsx(VirtualTable, {
 						data: results,
-						columns,
+						columns: resultColumns,
 						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",
-												"aria-label": t("studio_sql_edit_entity", {
-													name: ra.collection.collection.name,
-													id: String(ra.entityId)
-												}),
-												className: "text-surface-400 dark:text-surface-500 hover:text-surface-600 dark:hover:text-surface-300 transition-colors",
-												onClick: (e) => {
-													e.stopPropagation();
-													sidePanelController?.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: () => {
-												sidePanelController?.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: value === null || value === void 0 ? /* @__PURE__ */ jsx("span", {
-										className: "text-text-disabled dark:text-text-disabled-dark italic text-[11px]",
-										children: "NULL"
-									}) : displayValue
-								})
-							});
-						}
+						cellRenderer: renderResultCell
 					})
 				}),
 				/* @__PURE__ */ jsxs("div", {
@@ -1860,21 +1654,25 @@ var SQLEditor = () => {
 					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-semibold text-text-disabled dark:text-text-disabled-dark mr-2 uppercase tracking-tighter",
+							className: "flex items-center gap-2",
+							children: [/* @__PURE__ */ jsx(Typography, {
+								variant: "caption",
+								color: "secondary",
 								children: t("studio_sql_rows")
-							}), /* @__PURE__ */ jsx("span", {
-								className: "font-mono text-text-secondary dark:text-text-secondary-dark",
+							}), /* @__PURE__ */ jsx(Typography, {
+								variant: "mono",
+								className: "text-[11px]",
 								children: results.length
 							})]
 						}), /* @__PURE__ */ jsxs("div", {
-							className: "flex items-center text-[11px]",
-							children: [/* @__PURE__ */ jsx("span", {
-								className: "font-semibold text-text-disabled dark:text-text-disabled-dark mr-2 uppercase tracking-tighter",
+							className: "flex items-center gap-2",
+							children: [/* @__PURE__ */ jsx(Typography, {
+								variant: "caption",
+								color: "secondary",
 								children: t("studio_sql_time")
-							}), /* @__PURE__ */ jsxs("span", {
-								className: "font-mono text-text-secondary dark:text-text-secondary-dark",
+							}), /* @__PURE__ */ jsxs(Typography, {
+								variant: "mono",
+								className: "text-[11px]",
 								children: [execTime, "ms"]
 							})]
 						})]
@@ -1884,21 +1682,28 @@ var SQLEditor = () => {
 							/* @__PURE__ */ jsx(Button, {
 								size: "small",
 								variant: "text",
-								className: "text-[10px] uppercase font-semibold text-text-secondary dark:text-text-secondary-dark whitespace-nowrap",
+								className: "whitespace-nowrap",
 								onClick: handleExportMarkdown,
 								children: t("studio_sql_copy_markdown")
 							}),
 							/* @__PURE__ */ jsx(Button, {
 								size: "small",
 								variant: "text",
-								className: "text-[10px] uppercase font-semibold text-text-secondary dark:text-text-secondary-dark whitespace-nowrap",
+								className: "whitespace-nowrap",
 								onClick: handleExportJSON,
 								children: t("studio_sql_export_json")
 							}),
+							typedColumns && /* @__PURE__ */ jsx(Button, {
+								size: "small",
+								variant: "text",
+								className: "whitespace-nowrap",
+								onClick: handleExportTypedJSON,
+								children: t("studio_sql_export_json_typed")
+							}),
 							/* @__PURE__ */ jsx(Button, {
 								size: "small",
 								variant: "text",
-								className: "text-[10px] uppercase font-semibold text-text-secondary dark:text-text-secondary-dark whitespace-nowrap",
+								className: "whitespace-nowrap",
 								onClick: handleExportCSV,
 								children: t("studio_sql_export_csv")
 							})
@@ -1927,6 +1732,7 @@ var SQLEditor = () => {
 		className: "flex h-full w-full bg-surface-card overflow-hidden text-text-primary dark:text-text-primary-dark",
 		children: [
 			/* @__PURE__ */ jsx(ResizablePanels, {
+				dividerAriaLabel: t("resize_sidebar"),
 				orientation: "horizontal",
 				panelSizePercent: sidebarSize,
 				onPanelSizeChange: setSidebarSize,
@@ -2046,17 +1852,10 @@ var SQLEditor = () => {
 												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"}`,
+										children: /* @__PURE__ */ jsx(HeartIcon, {
+											size: iconSize.smallest,
 											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"
-											})
+											className: cls(isFavorite ? "text-red-500" : "text-text-disabled dark:text-text-disabled-dark hover:text-text-primary")
 										})
 									})
 								}),
@@ -2136,10 +1935,20 @@ var SQLEditor = () => {
 										size: iconSize.smallest,
 										className: "mr-2"
 									}), t("studio_sql_run")]
+								}),
+								loading && cancellableTabs.has(activeTab.id) && /* @__PURE__ */ jsxs(Button, {
+									onClick: handleCancelRun,
+									size: "small",
+									variant: "text",
+									children: [/* @__PURE__ */ jsx(SquareIcon, {
+										size: iconSize.smallest,
+										className: "mr-2"
+									}), t("studio_sql_cancel_run")]
 								})
 							]
 						})]
 					}), /* @__PURE__ */ jsx(ResizablePanels, {
+						dividerAriaLabel: t("resize_editor"),
 						orientation: "vertical",
 						panelSizePercent: editorHeight,
 						onPanelSizeChange: setEditorHeight,
@@ -2176,6 +1985,24 @@ var SQLEditor = () => {
 										})
 									})
 								}),
+								!loading && results && activeTab.truncatedFrom !== null && /* @__PURE__ */ jsx("div", {
+									className: "px-4 pt-2 shrink-0",
+									children: /* @__PURE__ */ jsx(Alert, {
+										color: "info",
+										size: "small",
+										action: activeTab.lastExecutedSql && apiBase ? /* @__PURE__ */ jsx(Button, {
+											size: "small",
+											variant: "text",
+											disabled: downloadingFullResult,
+											onClick: handleDownloadFullCsv,
+											children: downloadingFullResult ? t("studio_sql_downloading_full_csv") : t("studio_sql_download_full_csv")
+										}) : void 0,
+										children: t("studio_sql_result_truncated", {
+											shown: results.length.toLocaleString(),
+											total: activeTab.truncatedFrom.toLocaleString()
+										})
+									})
+								}),
 								!loading && activeTab.notices.length > 0 && /* @__PURE__ */ jsx("div", {
 									className: "px-4 pt-2 flex flex-col gap-1 shrink-0",
 									children: activeTab.notices.map((notice, index) => /* @__PURE__ */ jsx(Alert, {
@@ -2246,4 +2073,4 @@ var SQLEditor = () => {
 //#endregion
 export { SQLEditor };
 
-//# sourceMappingURL=SQLEditor-1An7w0j6.js.map
+//# sourceMappingURL=SQLEditor-D5Ci4pyW.js.map