@rebasepro/studio 0.23.0 → 0.24.1-canary.g56af4a4

package/dist/{JSEditor-qiuwmcvk.js → JSEditor-DIO2Mw8q.js}

@@ -1,12 +1,13 @@
-import { t as AuthSimulationSelector } from "./AuthSimulationSelector-BewmhMBw.js";
+import { n as AuthSimulationSelector, t as useRunAsUsers } from "./useRunAsUsers-CLaAtXt6.js";
+import { f as toCsv } from "./sql_utils-BZD31xE3.js";
 import { ErrorView, IconForView, useApiConfig, useModeController, useRebaseClient, useRebaseContext, useSnackbarController, useStudioCollectionRegistry, useStudioSidePanelController, useTranslation } from "@rebasepro/app";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Button, Chip, CircularProgress, Dialog, DialogActions, DialogContent, DialogTitle, DownloadIcon, IconButton, Menu, MenuItem, MoreVerticalIcon, PencilIcon, PlayIcon, PlusIcon, ResizablePanels, SaveIcon, Tab, Tabs, TerminalIcon, TextField, Tooltip, Trash2Icon, Typography, VirtualTable, XIcon, cls, defaultBorderMixin, iconSize } from "@rebasepro/ui";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { ALL_WHERE_FILTER_OPS } from "@rebasepro/types";
 import { toSnakeCase } from "@rebasepro/utils";
 import { Highlight, themes } from "prism-react-renderer";
-import { createRebaseClient } from "@rebasepro/client";
+import { createMemoryStorage, createRebaseClient } from "@rebasepro/client";
 import Editor from "@monaco-editor/react";
 //#region src/components/JSEditor/JSMonacoEditor.tsx
 /**
@@ -138,10 +139,29 @@ interface AdminUser {
     updatedAt: string;
 }
 
+interface ListUsersOptions {
+    search?: string;
+    /** Page size. The server's default is 25. */
+    limit?: number;
+    offset?: number;
+    orderBy?: string;
+    orderDir?: "asc" | "desc";
+}
+
+/** One page of users, and \`total\`: how many match in all. */
+interface UsersPage {
+    users: AdminUser[];
+    total: number;
+    limit: number;
+    offset: number;
+}
+
 interface RebaseCMS {
-    listUsers(): Promise<{ users: AdminUser[] }>;
+    /** One page of users (25 unless \`limit\` says otherwise) and the total. */
+    listUsers(options?: ListUsersOptions): Promise<UsersPage>;
+    listUsersPaginated(options?: ListUsersOptions): Promise<UsersPage>;
     getUser(userId: string): Promise<{ user: AdminUser }>;
-    createUser(data: { email: string; displayName?: string; password?: string; roles?: string[] }): Promise<{ user: AdminUser }>;
+    createUser(data: { email: string; displayName?: string; password?: string; roles?: string[]; skipPasswordPolicy?: boolean }): Promise<{ user: AdminUser }>;
     updateUser(userId: string, data: { email?: string; displayName?: string; password?: string; roles?: string[] }): Promise<{ user: AdminUser }>;
     deleteUser(userId: string): Promise<{ success: boolean }>;
     bootstrap(): Promise<{ success: boolean; message: string; user: { uid: string; roles: string[] } }>;
@@ -200,8 +220,8 @@ type RebaseData = {
  * // Auth
  * const session = client.auth.getSession();
  *
- * // Admin
- * const { users } = await client.admin.listUsers();
+ * // Admin: one page of users, and how many there are
+ * const { users, total } = await client.admin.listUsers({ limit: 50 });
  *
  * // Custom endpoint
  * const result = await client.call("/my-endpoint", { myData: 123 });
@@ -221,12 +241,16 @@ interface RebaseClient {
     [collectionSlug: string]: unknown;
 }
 
-/** The pre-configured client instance. Already authenticated with the current user session. */
+/**
+ * The client for this run: your own, one that runs every request as the user
+ * picked in "Run as" (it holds no session, so \`client.auth.getSession()\` is null),
+ * or an unauthenticated one under "No Auth".
+ */
 declare const client: RebaseClient;
 
 /** Execution context with user and collection information. */
 interface JSEditorContext {
-    /** The user the script is running as. */
+    /** The user the script runs as: the one picked in "Run as", or you. \`null\` under "No Auth". */
     user: {
         uid: string;
         displayName: string | null;
@@ -359,15 +383,20 @@ var QUICK_REFERENCE = [
 		code: "const result = await client.data.collection(\"COLLECTION\")\n  .where(\"field\", \">\", value)\n  .orderBy(\"field\", \"desc\")\n  .limit(10)\n  .find();\nreturn result;",
 		description: "Chained query builder"
 	},
+	{
+		label: "Who am I",
+		code: "return context.user;",
+		description: "The user this script runs as, or null under No Auth"
+	},
 	{
 		label: "Auth: Current session",
 		code: "const session = client.auth.getSession();\nreturn session;",
-		description: "Get current auth session"
+		description: "The session this client holds: yours, or none under Run as and No Auth"
 	},
 	{
 		label: "Admin: List users",
-		code: "const { users } = await client.admin.listUsers();\nreturn users;",
-		description: "List all registered users"
+		code: "// One page: raise limit or page with offset while users.length < total\nconst { users, total } = await client.admin.listUsers({ limit: 50, offset: 0 });\nreturn { users, total };",
+		description: "A page of users, and how many there are in all"
 	},
 	{
 		label: "Custom endpoint",
@@ -376,6 +405,7 @@ var QUICK_REFERENCE = [
 	}
 ];
 var JSEditorSidebar = ({ collections, snippets, history, onSelectSnippet, onDeleteSnippet, onInsertCode }) => {
+	const { t } = useTranslation();
 	const [activeTab, setActiveTab] = useState("collections");
 	return /* @__PURE__ */ jsxs("div", {
 		className: cls("flex flex-col h-full w-full bg-surface-card border-r", defaultBorderMixin),
@@ -391,7 +421,7 @@ var JSEditorSidebar = ({ collections, snippets, history, onSelectSnippet, onDele
 						title: "Browse collections",
 						children: /* @__PURE__ */ jsx("span", {
 							className: "text-xs",
-							children: "Collections"
+							children: t("studio_js_collections_tab")
 						})
 					})
 				}),
@@ -430,7 +460,7 @@ var JSEditorSidebar = ({ collections, snippets, history, onSelectSnippet, onDele
 						children: /* @__PURE__ */ jsx(Typography, {
 							variant: "caption",
 							className: "font-semibold uppercase tracking-wider text-text-disabled dark:text-text-disabled-dark",
-							children: "Collections"
+							children: t("studio_js_collections_tab")
 						})
 					}), /* @__PURE__ */ jsx("div", {
 						className: "flex-grow overflow-y-auto p-1 space-y-1 no-scrollbar",
@@ -618,6 +648,7 @@ function CollectionItem({ collection, onInsertCode }) {
 			/* @__PURE__ */ jsx(Tooltip, {
 				title: "Insert find() snippet",
 				children: /* @__PURE__ */ jsx(IconButton, {
+					"aria-label": "Insert find() snippet",
 					size: "smallest",
 					className: "opacity-0 group-hover:opacity-100 text-text-disabled hover:text-primary transition-all",
 					onClick: (e) => {
@@ -653,6 +684,7 @@ function CollectionItem({ collection, onInsertCode }) {
 	})] });
 }
 function SnippetItem({ snippet, onSelect, onDelete }) {
+	const { t } = useTranslation();
 	return /* @__PURE__ */ jsxs("div", {
 		className: cls("group p-2 rounded border hover:border-hairline-strong bg-surface-card transition-all cursor-pointer relative", defaultBorderMixin),
 		onClick: () => onSelect(snippet.code),
@@ -668,6 +700,7 @@ function SnippetItem({ snippet, onSelect, onDelete }) {
 				children: snippet.code
 			}),
 			/* @__PURE__ */ jsx(IconButton, {
+				"aria-label": t("delete"),
 				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) => {
@@ -690,12 +723,12 @@ var STORAGE_PREFIX = "rebase_js_";
 * new user did be a 404 — a placeholder presented as working code. `slug` is
 * the project's first collection when one is known.
 */
-var makeDefaultCode = (slug) => `// Available: client (RebaseClient)
+var makeDefaultCode = (slug) => `// Available: client (RebaseClient), context
 // Press Cmd+Enter (Ctrl+Enter) to run
 //
 // Examples:
-//   const users = await client.admin.listUsers();
-//   const session = client.auth.getSession();
+//   const { users, total } = await client.admin.listUsers({ limit: 50, offset: 0 }); // one page of total
+//   const me = context.user; // who this script runs as ("Run as"), null under No Auth
 ${slug ? `
 const result = await client.data.collection(${JSON.stringify(slug)}).find({ limit: 10 });
 return result;
@@ -704,9 +737,24 @@ return result;
 //   const result = await client.data.collection("posts").find({ limit: 10 });
 //   return result;
 
-return client.auth.getSession();
+return context.user;
 `}`;
 var DEFAULT_CODE = makeDefaultCode();
+/**
+* The auth of a client built for one run: its own, in memory, and empty.
+*
+* The SDK's default auth restores the session the app saved in `localStorage`,
+* sends its token on every request and keeps refreshing it. A run under "No
+* Auth" or as another user must do none of that: it would go out as the
+* signed-in user, and `client.auth` would describe the wrong person.
+*/
+function runOnlyAuth() {
+	return {
+		storage: createMemoryStorage(),
+		persistSession: false,
+		autoRefresh: false
+	};
+}
 function loadFromStorage(key, fallback) {
 	try {
 		const raw = localStorage.getItem(STORAGE_PREFIX + key);
@@ -727,14 +775,22 @@ function formatJSON(value) {
 		return String(value);
 	}
 }
+/** The script without its comments: a collection named in one is not where rows came from. */
+function withoutComments(code) {
+	return code.replace(/\/\*[\s\S]*?\*\//g, "").replace(/\/\/[^\n]*/g, "");
+}
 /**
-* Given the raw SDK result, try to detect which collections are present.
+* Given the raw SDK result, try to detect which collection its rows belong to.
 * JS SDK results typically come back as `{ data: [{ id, values }] }` or plain arrays.
-* The heuristic: if the executed code contains `collection("<slug>")` or `client.data.<slug>`,
-* and the result has rows with an "id" column, we match those slugs.
+* The heuristic: the executed code, outside its comments, names exactly one
+* collection — `collection("<slug>")` or `client.data.<slug>` — and the result has
+* rows with an "id" column. A script naming two could have returned either's
+* rows, and an action on a row would open the other collection's row with the
+* same id, so it gets none.
 */
-function detectCollectionsInResult(code, resultValue, collections) {
+function detectCollectionsInResult(executedCode, resultValue, collections) {
 	if (!resultValue || !collections?.length) return [];
+	const code = withoutComments(executedCode);
 	const mentionedSlugs = /* @__PURE__ */ new Set();
 	const collectionCallRegex = /\.collection\(["']([^"']+)["']\)/g;
 	let m;
@@ -748,7 +804,7 @@ function detectCollectionsInResult(code, resultValue, collections) {
 		"update",
 		"delete"
 	].includes(m[1])) mentionedSlugs.add(m[1]);
-	if (mentionedSlugs.size === 0) return [];
+	if (mentionedSlugs.size !== 1) return [];
 	let rows = [];
 	const rv = resultValue;
 	if (rv?.data && Array.isArray(rv.data)) rows = rv.data;
@@ -839,27 +895,7 @@ function JSEditor() {
 			} : tab);
 		});
 	}, [firstSlug]);
-	const users = useMemo(() => {
-		const managed = [];
-		if (currentUser) managed.push({
-			uid: currentUser.uid,
-			displayName: currentUser.displayName,
-			email: currentUser.email,
-			photoURL: currentUser.photoURL,
-			roles: currentUser.roles
-		});
-		return managed;
-	}, [currentUser]);
-	const currentSelectableUser = useMemo(() => {
-		if (!currentUser) return null;
-		return {
-			uid: currentUser.uid,
-			displayName: currentUser.displayName,
-			email: currentUser.email,
-			photoURL: currentUser.photoURL,
-			roles: currentUser.roles
-		};
-	}, [currentUser]);
+	const { users, currentUser: currentSelectableUser, loading: usersLoading, onSearchTextChange: onUserSearchTextChange, totalCount: userTotalCount } = useRunAsUsers();
 	useEffect(() => {
 		saveToStorage("tabs", tabs);
 	}, [tabs]);
@@ -918,29 +954,32 @@ function JSEditor() {
 		const apiUrl = apiConfig?.apiUrl;
 		const getAuthToken = apiConfig?.getAuthToken;
 		if (!apiUrl) throw new Error("API URL not configured. Make sure apiUrl is set.");
-		if (authMode === "none") return {
-			client: createRebaseClient({
+		if (authMode === "none") {
+			const client = createRebaseClient({
 				baseUrl: apiUrl,
-				token: void 0
-			}),
-			isScoped: true
-		};
-		if (!selectedUser || currentUser && selectedUser.uid === currentUser.uid) {
-			if (!rebaseClient) throw new Error("Application client is not initialized.");
+				auth: runOnlyAuth()
+			});
 			return {
-				client: rebaseClient,
-				isScoped: false
+				client,
+				release: () => client.close()
 			};
 		}
-		let token;
-		if (getAuthToken) token = await getAuthToken() ?? void 0;
-		if (!token) throw new Error("No auth token available. Please sign in first.");
+		if (!selectedUser || currentUser && selectedUser.uid === currentUser.uid) {
+			if (!rebaseClient) throw new Error("Application client is not initialized.");
+			return { client: rebaseClient };
+		}
+		const token = getAuthToken ? await getAuthToken() ?? void 0 : void 0;
+		if (!getAuthToken || !token) throw new Error("No auth token available. Please sign in first.");
+		const client = createRebaseClient({
+			baseUrl: apiUrl,
+			token,
+			impersonate: selectedUser.uid,
+			auth: runOnlyAuth()
+		});
+		client.setAuthTokenGetter(getAuthToken);
 		return {
-			client: createRebaseClient({
-				baseUrl: apiUrl,
-				token
-			}),
-			isScoped: true
+			client,
+			release: () => client.close()
 		};
 	}, [
 		apiConfig,
@@ -959,7 +998,8 @@ function JSEditor() {
 		});
 		const consoleEntries = [];
 		const startTime = performance.now();
-		let scopedClientToCleanUp = null;
+		let release;
+		const ranAsSignedInUser = authMode !== "none" && (!selectedUser || selectedUser.uid === currentUser?.uid);
 		const originalConsole = {
 			log: console.log,
 			warn: console.warn,
@@ -979,10 +1019,11 @@ function JSEditor() {
 			console.warn = captureConsole("warn");
 			console.error = captureConsole("error");
 			console.info = captureConsole("info");
-			const { client, isScoped } = await buildClient();
-			if (isScoped) scopedClientToCleanUp = client;
+			const built = await buildClient();
+			release = built.release;
+			const client = built.client;
 			const context = {
-				user: selectedUser ?? (currentUser ? {
+				user: authMode === "none" ? null : selectedUser ?? (currentUser ? {
 					uid: currentUser.uid,
 					displayName: currentUser.displayName,
 					email: currentUser.email,
@@ -997,7 +1038,9 @@ function JSEditor() {
 				value,
 				console: consoleEntries,
 				duration,
-				timestamp: Date.now()
+				timestamp: Date.now(),
+				code,
+				ranAsSignedInUser
 			});
 			const resultObj = value;
 			if (resultObj?.data && Array.isArray(resultObj.data)) setResultView("table");
@@ -1010,7 +1053,9 @@ function JSEditor() {
 				console: consoleEntries,
 				duration,
 				error: err instanceof Error ? err.message : String(err),
-				timestamp: Date.now()
+				timestamp: Date.now(),
+				code,
+				ranAsSignedInUser
 			});
 			setResultView("json");
 		} finally {
@@ -1019,11 +1064,12 @@ function JSEditor() {
 			console.error = originalConsole.error;
 			console.info = originalConsole.info;
 			setIsRunning(false);
-			if (scopedClientToCleanUp) scopedClientToCleanUp.ws?.disconnect();
+			release?.();
 		}
 	}, [
 		activeTab?.code,
 		buildClient,
+		authMode,
 		selectedUser,
 		currentUser,
 		collectionInfos
@@ -1092,13 +1138,9 @@ function JSEditor() {
 		};
 	}, [result]);
 	const matchedCollections = useMemo(() => {
-		if (!result?.value || result.error) return [];
-		return detectCollectionsInResult(activeTab?.code ?? "", result.value, collectionRegistry?.collections ?? []);
-	}, [
-		result,
-		activeTab?.code,
-		collectionRegistry?.collections
-	]);
+		if (!result?.value || result.error || !result.ranAsSignedInUser) return [];
+		return detectCollectionsInResult(result.code, result.value, collectionRegistry?.collections ?? []);
+	}, [result, collectionRegistry?.collections]);
 	const getRowEntityActions = useCallback((rowData) => {
 		if (!rowData || matchedCollections.length === 0) return [];
 		return matchedCollections.filter((mc) => rowData[mc.pkColumn] != null).map((mc) => ({
@@ -1106,13 +1148,97 @@ function JSEditor() {
 			entityId: rowData[mc.pkColumn]
 		}));
 	}, [matchedCollections]);
+	const resultColumns = useMemo(() => matchedCollections.length > 0 ? [{
+		key: "__entity_action__",
+		title: "",
+		width: 36,
+		sortable: false,
+		resizable: false
+	}, ...tableData.columns] : tableData.columns, [matchedCollections.length, tableData.columns]);
+	const renderResultCell = useCallback(({ rowData, column }) => {
+		if (column.key === "__entity_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, {
+							"aria-label": t("studio_sql_edit_entity", {
+								name: ra.collection.collection.name,
+								id: String(ra.entityId)
+							}),
+							size: "small",
+							className: "text-surface-400 dark:text-surface-500 hover:text-surface-600 dark:hover:text-surface-300",
+							onClick: (e) => {
+								e.stopPropagation();
+								sidePanelController.open({
+									path: ra.collection.collectionSlug,
+									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",
+						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.collectionSlug,
+								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.collectionSlug))
+				})
+			});
+		}
+		if (!rowData) return null;
+		const val = rowData[column.key];
+		const displayValue = typeof val === "object" && val !== null ? JSON.stringify(val) : String(val ?? "");
+		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",
+			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
+			})
+		});
+	}, [
+		getRowEntityActions,
+		sidePanelController,
+		t
+	]);
 	const handleExportCSV = useCallback(() => {
 		if (tableData.data.length === 0) return;
-		const csv = [tableData.columns.map((c) => c.key).join(","), ...tableData.data.map((row) => tableData.columns.map((c) => {
-			const val = row[c.key];
-			const str = val === null || val === void 0 ? "" : String(val);
-			return str.includes(",") ? `"${str}"` : str;
-		}).join(","))].join("\n");
+		const csv = toCsv(tableData.columns.map((c) => c.key), tableData.data);
 		const blob = new Blob([csv], { type: "text/csv" });
 		const url = URL.createObjectURL(blob);
 		const a = document.createElement("a");
@@ -1154,6 +1280,7 @@ function JSEditor() {
 		children: [/* @__PURE__ */ jsx("div", {
 			className: "flex-grow overflow-hidden",
 			children: /* @__PURE__ */ jsx(ResizablePanels, {
+				dividerAriaLabel: t("resize_sidebar"),
 				orientation: "horizontal",
 				panelSizePercent: sidebarSize,
 				onPanelSizeChange: setSidebarSize,
@@ -1193,6 +1320,7 @@ function JSEditor() {
 												children: tab.name
 											}),
 											tabs.length > 1 && /* @__PURE__ */ jsx(IconButton, {
+												"aria-label": t("close_tab"),
 												size: "smallest",
 												onClick: (e) => {
 													e.stopPropagation();
@@ -1204,6 +1332,7 @@ function JSEditor() {
 										]
 									}, tab.id))
 								}), /* @__PURE__ */ jsx(IconButton, {
+									"aria-label": t("new_tab"),
 									size: "small",
 									onClick: addTab,
 									className: "ml-2 flex-shrink-0",
@@ -1216,6 +1345,7 @@ function JSEditor() {
 								/* @__PURE__ */ jsx(Tooltip, {
 									title: "Save as snippet",
 									children: /* @__PURE__ */ jsx(IconButton, {
+										"aria-label": "Save as snippet",
 										size: "small",
 										onClick: () => {
 											setSnippetName("");
@@ -1228,6 +1358,7 @@ function JSEditor() {
 								result?.value != null && /* @__PURE__ */ jsx(Tooltip, {
 									title: "Export result as JSON",
 									children: /* @__PURE__ */ jsx(IconButton, {
+										"aria-label": "Export result as JSON",
 										size: "small",
 										onClick: exportResult,
 										children: /* @__PURE__ */ jsx(DownloadIcon, { size: iconSize.smallest })
@@ -1251,6 +1382,7 @@ function JSEditor() {
 					}), /* @__PURE__ */ jsx("div", {
 						className: "flex-grow overflow-hidden",
 						children: /* @__PURE__ */ jsx(ResizablePanels, {
+							dividerAriaLabel: t("resize_editor"),
 							orientation: "vertical",
 							panelSizePercent: editorHeight,
 							onPanelSizeChange: setEditorHeight,
@@ -1265,7 +1397,9 @@ function JSEditor() {
 										selectedUser,
 										setSelectedUser,
 										users,
-										loading: false,
+										loading: usersLoading,
+										onUserSearchTextChange,
+										userTotalCount,
 										currentUser: currentSelectableUser
 									})
 								}), /* @__PURE__ */ jsx("div", {
@@ -1406,87 +1540,10 @@ function JSEditor() {
 													className: "flex-grow relative h-full min-h-0 min-w-0",
 													children: /* @__PURE__ */ jsx(VirtualTable, {
 														data: tableData.data,
-														columns: matchedCollections.length > 0 ? [{
-															key: "__entity_action__",
-															title: "",
-															width: 36,
-															sortable: false,
-															resizable: false
-														}, ...tableData.columns] : tableData.columns,
+														columns: resultColumns,
 														rowHeight: 32,
 														headerHeight: 32,
-														cellRenderer: ({ rowData, column, rowIndex }) => {
-															if (column.key === "__entity_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",
-																				onClick: (e) => {
-																					e.stopPropagation();
-																					sidePanelController.open({
-																						path: ra.collection.collectionSlug,
-																						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",
-																			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.collectionSlug,
-																					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.collectionSlug))
-																	})
-																});
-															}
-															if (!rowData) return null;
-															const val = rowData[column.key];
-															const displayValue = typeof val === "object" && val !== null ? JSON.stringify(val) : String(val ?? "");
-															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",
-																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
-																})
-															});
-														}
+														cellRenderer: renderResultCell
 													})
 												})]
 											}),
@@ -1513,7 +1570,7 @@ function JSEditor() {
 														children: "Return Value"
 													}), /* @__PURE__ */ jsx("pre", {
 														className: "text-text-primary dark:text-text-primary-dark whitespace-pre-wrap break-words text-[12px]",
-														children: formatJSON(result.value)
+														children: /* @__PURE__ */ jsx(FormattedJSON, { value: result.value })
 													})]
 												})]
 											})
@@ -1605,7 +1662,11 @@ function JSEditor() {
 		})]
 	});
 }
-function JSONHighlight({ value }) {
+/**
+* Memoised on the value: tokenising a large result is the costliest thing
+* this pane draws, and it used to run again for every keystroke in the editor.
+*/
+var JSONHighlight = React.memo(function JSONHighlight({ value }) {
 	const json = formatJSON(value);
 	const { mode } = useModeController();
 	return /* @__PURE__ */ jsx(Highlight, {
@@ -1623,8 +1684,12 @@ function JSONHighlight({ value }) {
 			}, i))
 		})
 	});
-}
+});
+/** A value as indented JSON, formatted again only when the value changes. */
+var FormattedJSON = React.memo(function FormattedJSON({ value }) {
+	return /* @__PURE__ */ jsx(Fragment, { children: formatJSON(value) });
+});
 //#endregion
 export { JSEditor };
 
-//# sourceMappingURL=JSEditor-qiuwmcvk.js.map
+//# sourceMappingURL=JSEditor-DIO2Mw8q.js.map