@rebasepro/studio 0.5.0 → 0.6.0

package/dist/JSEditor-BhAbEjCP.js

@@ -0,0 +1,1573 @@
+import { t as AuthSimulationSelector } from "./AuthSimulationSelector-iEZ-Or_1.js";
+import { ErrorView, IconForView, useApiConfig, useModeController, useRebaseClient, useRebaseContext, useSnackbarController, useStudioCollectionRegistry, useStudioSideEntityController, useTranslation } from "@rebasepro/core";
+import { 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 { Highlight, themes } from "prism-react-renderer";
+import { toSnakeCase } from "@rebasepro/utils";
+import { createRebaseClient } from "@rebasepro/client";
+import Editor from "@monaco-editor/react";
+//#region src/components/JSEditor/JSMonacoEditor.tsx
+/** Ambient type definitions for the Rebase client SDK injected into Monaco. */
+var REBASE_CLIENT_TYPES = `
+// ─── Rebase Client SDK Type Definitions ─────────────────────────────
+
+interface Entity<M extends Record<string, any> = any> {
+    id: string | number;
+    path: string;
+    values: M;
+}
+
+interface FindParams {
+    limit?: number;
+    offset?: number;
+    page?: number;
+    where?: Record<string, string>;
+    orderBy?: string;
+    include?: string[];
+    searchString?: string;
+}
+
+interface FindResponse<M extends Record<string, any> = any> {
+    data: Entity<M>[];
+    meta: {
+        total: number;
+        limit: number;
+        offset: number;
+        hasMore: boolean;
+    };
+}
+
+type FilterOperator = "=" | "!=" | ">" | ">=" | "<" | "<=" | "in" | "not-in" | "array-contains" | "array-contains-any" | "is" | "is_not" | "like" | "ilike";
+
+interface QueryBuilder<M extends Record<string, any> = any> {
+    where(column: keyof M & string, operator: FilterOperator, value: any): QueryBuilder<M>;
+    orderBy(column: keyof M & string, direction?: "asc" | "desc"): QueryBuilder<M>;
+    limit(count: number): QueryBuilder<M>;
+    offset(count: number): QueryBuilder<M>;
+    search(searchString: string): QueryBuilder<M>;
+    find(): Promise<FindResponse<M>>;
+    findOne(): Promise<Entity<M> | undefined>;
+    count(): Promise<number>;
+}
+
+interface CollectionClient<M extends Record<string, any> = any> {
+    find(params?: FindParams): Promise<FindResponse<M>>;
+    findById(id: string | number): Promise<Entity<M> | undefined>;
+    create(data: Partial<M>, id?: string | number): Promise<Entity<M>>;
+    update(id: string | number, data: Partial<M>): Promise<Entity<M>>;
+    delete(id: string | number): Promise<void>;
+    where(column: keyof M & string, operator: FilterOperator, value: any): QueryBuilder<M>;
+    orderBy(column: keyof M & string, direction?: "asc" | "desc"): QueryBuilder<M>;
+    limit(count: number): QueryBuilder<M>;
+    offset(count: number): QueryBuilder<M>;
+    search(searchString: string): QueryBuilder<M>;
+    listen?(params: FindParams | undefined, onUpdate: (response: FindResponse<M>) => void, onError?: (error: Error) => void): () => void;
+    listenById?(id: string | number, onUpdate: (entity: Entity<M> | undefined) => void, onError?: (error: Error) => void): () => void;
+    count?(params?: FindParams): Promise<number>;
+}
+
+interface RebaseUser {
+    uid: string;
+    email: string | null;
+    displayName: string | null;
+    photoURL: string | null;
+    emailVerified?: boolean;
+    roles?: string[];
+    providerId: string;
+    isAnonymous: boolean;
+}
+
+interface RebaseSession {
+    accessToken: string;
+    refreshToken: string;
+    expiresAt: number;
+    user: RebaseUser;
+}
+
+type AuthChangeEvent = 'SIGNED_IN' | 'SIGNED_OUT' | 'TOKEN_REFRESHED' | 'USER_UPDATED';
+
+interface RebaseAuth {
+    signInWithEmail(email: string, password: string): Promise<{ user: RebaseUser; accessToken: string; refreshToken: string }>;
+    signUp(email: string, password: string, displayName?: string): Promise<{ user: RebaseUser; accessToken: string; refreshToken: string }>;
+    signInWithGoogle(idToken: string): Promise<{ user: RebaseUser; accessToken: string; refreshToken: string }>;
+    signOut(): Promise<void>;
+    refreshSession(): Promise<RebaseSession>;
+    getUser(): Promise<RebaseUser>;
+    updateUser(updates: { displayName?: string; photoURL?: string }): Promise<RebaseUser>;
+    resetPasswordForEmail(email: string): Promise<{ success: boolean; message: string }>;
+    resetPassword(token: string, password: string): Promise<{ success: boolean; message: string }>;
+    changePassword(oldPassword: string, newPassword: string): Promise<{ success: boolean; message: string }>;
+    sendVerificationEmail(): Promise<{ success: boolean; message: string }>;
+    verifyEmail(token: string): Promise<{ success: boolean; message: string }>;
+    getSessions(): Promise<RebaseSession[]>;
+    revokeSession(sessionId: string): Promise<{ success: boolean }>;
+    revokeAllSessions(): Promise<{ success: boolean }>;
+    getSession(): RebaseSession | null;
+    onAuthStateChange(callback: (event: AuthChangeEvent, session: RebaseSession | null) => void): () => void;
+}
+
+interface AdminUser {
+    uid: string;
+    email: string;
+    displayName: string | null;
+    photoURL: string | null;
+    provider: string;
+    roles: string[];
+    createdAt: string;
+    updatedAt: string;
+}
+
+interface RebaseAdmin {
+    listUsers(): Promise<{ users: AdminUser[] }>;
+    getUser(userId: string): Promise<{ user: AdminUser }>;
+    createUser(data: { email: string; displayName?: string; password?: string; roles?: string[] }): 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[] } }>;
+}
+
+interface UploadFileProps {
+    file: FileIcon;
+    fileName?: string;
+    path?: string;
+    metadata?: Record<string, unknown>;
+    bucket?: string;
+}
+
+interface UploadFileResult {
+    path: string;
+    bucket?: string;
+    downloadUrl?: string;
+}
+
+interface DownloadConfig {
+    url: string | null;
+    fileNotFound?: boolean;
+    metadata?: Record<string, unknown>;
+}
+
+interface StorageSource {
+    putObject(props: UploadFileProps): Promise<UploadFileResult>;
+    getSignedUrl(pathOrUrl: string, bucket?: string): Promise<DownloadConfig>;
+    getObject(path: string, bucket?: string): Promise<FileIcon | null>;
+    deleteObject(path: string, bucket?: string): Promise<void>;
+    listObjects(path: string, options?: { bucket?: string; maxResults?: number; pageToken?: string }): Promise<unknown>;
+}
+
+type RebaseData = {
+    /** Look up a collection by slug. */
+    collection(slug: string): CollectionClient;
+} & {
+    /** Dynamic collection access — e.g. client.data.authors */
+    [collectionSlug: string]: CollectionClient;
+};
+
+/**
+ * The Rebase client instance. Use \`client.data\`, \`client.auth\`, \`client.admin\`,
+ * \`client.storage\`, and \`client.call()\` to interact with your Rebase backend.
+ *
+ * @example
+ * // Query a collection
+ * const result = await client.data.products.find({ limit: 10 });
+ *
+ * // Create a record
+ * await client.data.products.create({ name: "Camera", price: 299 });
+ *
+ * // Fluent query
+ * const expensive = await client.data.products.where("price", ">", 100).orderBy("price", "desc").limit(5).find();
+ *
+ * // Auth
+ * const session = client.auth.getSession();
+ *
+ * // Admin
+ * const { users } = await client.admin.listUsers();
+ *
+ * // Custom endpoint
+ * const result = await client.call("/my-endpoint", { myData: 123 });
+ */
+interface RebaseClient {
+    /** Data access — dynamic collection accessors */
+    data: RebaseData;
+    /** Authentication methods */
+    auth: RebaseAuth;
+    /** User/role admin methods */
+    admin: RebaseAdmin;
+    /** Storage operations */
+    storage?: StorageSource;
+    /** Call a custom server-side endpoint */
+    call<T = unknown>(endpoint: string, payload?: unknown): Promise<T>;
+    /** Direct collection access (shorthand) */
+    [collectionSlug: string]: unknown;
+}
+
+/** The pre-configured client instance. Already authenticated with the current user session. */
+declare const client: RebaseClient;
+
+/** Execution context with user and collection information. */
+interface JSEditorContext {
+    /** The user the script is running as. */
+    user: {
+        uid: string;
+        displayName: string | null;
+        email: string | null;
+        roles?: string[];
+    } | null;
+    /** Registered collections with their property names. */
+    collections: Array<{
+        slug: string;
+        name: string;
+        properties: string[];
+    }>;
+}
+
+/** Execution context — contains info about the selected user and registered collections. */
+declare const context: JSEditorContext;
+`;
+var JSMonacoEditor = ({ value, onChange, onRun, className, readOnly = false, autoFocus = true, collectionSlugs = [], collections = [] }) => {
+	const { mode } = useModeController();
+	const editorRef = useRef(null);
+	const monacoRef = useRef(null);
+	const onRunRef = useRef(onRun);
+	onRunRef.current = onRun;
+	const typesRegisteredRef = useRef(false);
+	const handleEditorOnMount = (editorInstance, monaco) => {
+		editorRef.current = editorInstance;
+		monacoRef.current = monaco;
+		editorInstance.addAction({
+			id: "run-script",
+			label: "Run Script",
+			keybindings: [monaco.KeyMod.CtrlCmd | monaco.KeyCode.Enter],
+			contextMenuGroupId: "operation",
+			contextMenuOrder: 0,
+			run: () => {
+				if (onRunRef.current) {
+					const selection = editorInstance.getSelection();
+					let selectedText;
+					if (selection && !selection.isEmpty()) selectedText = editorInstance.getModel()?.getValueInRange(selection)?.trim();
+					onRunRef.current(selectedText || void 0);
+				}
+			}
+		});
+		if (!typesRegisteredRef.current) {
+			typesRegisteredRef.current = true;
+			const ts = monaco.languages.typescript;
+			ts.typescriptDefaults.setCompilerOptions({
+				target: ts.ScriptTarget.ESNext,
+				module: ts.ModuleKind.ESNext,
+				allowJs: true,
+				checkJs: false,
+				strict: false,
+				noEmit: true,
+				allowNonTsExtensions: true
+			});
+			ts.typescriptDefaults.setDiagnosticsOptions({ diagnosticCodesToIgnore: [1375, 1108] });
+			ts.typescriptDefaults.addExtraLib(REBASE_CLIENT_TYPES, "ts:rebase-client.d.ts");
+			if (collections.length > 0) {
+				const lines = [];
+				for (const col of collections) {
+					const ifaceName = col.slug.replace(/[^a-zA-Z0-9_]/g, "_");
+					const propsType = col.properties.length > 0 ? `{ ${col.properties.map((p) => `${p}: any`).join("; ")} }` : "Record<string, any>";
+					lines.push(`/** Collection: ${col.name} (${col.slug}) */`);
+					lines.push(`interface ${ifaceName}_Row ${propsType}`);
+					lines.push(`declare namespace client.data { const ${col.slug}: CollectionClient<${ifaceName}_Row>; }`);
+				}
+				ts.typescriptDefaults.addExtraLib(lines.join("\n"), "ts:rebase-collections.d.ts");
+			} else if (collectionSlugs.length > 0) {
+				const collectionHints = collectionSlugs.map((slug) => `/** Collection: ${slug} */\ndeclare namespace client.data { const ${slug}: CollectionClient; }`).join("\n");
+				ts.typescriptDefaults.addExtraLib(collectionHints, "ts:rebase-collections.d.ts");
+			}
+		}
+		if (autoFocus) editorInstance.focus();
+	};
+	return /* @__PURE__ */ jsx("div", {
+		className: cls("relative w-full h-full overflow-hidden", className),
+		children: /* @__PURE__ */ jsx(Editor, {
+			height: "100%",
+			defaultLanguage: "typescript",
+			path: "rebase-script.ts",
+			value,
+			onChange,
+			onMount: handleEditorOnMount,
+			theme: mode === "dark" ? "vs-dark" : "vs",
+			options: {
+				minimap: { enabled: false },
+				fontSize: 14,
+				lineNumbers: "on",
+				scrollBeyondLastLine: false,
+				automaticLayout: true,
+				readOnly,
+				tabSize: 2,
+				wordWrap: "on",
+				suggestOnTriggerCharacters: true,
+				quickSuggestions: true,
+				parameterHints: { enabled: true }
+			}
+		})
+	});
+};
+//#endregion
+//#region src/components/JSEditor/JSEditorSidebar.tsx
+var QUICK_REFERENCE = [
+	{
+		label: "Find all",
+		code: "const result = await client.data.collection(\"COLLECTION\").find({ limit: 20 });\nreturn result;",
+		description: "Fetch records with pagination"
+	},
+	{
+		label: "Find by ID",
+		code: "const item = await client.data.collection(\"COLLECTION\").findById(\"ID\");\nreturn item;",
+		description: "Fetch a single record"
+	},
+	{
+		label: "Create",
+		code: "const created = await client.data.collection(\"COLLECTION\").create({\n  // your fields here\n});\nreturn created;",
+		description: "Insert a new record"
+	},
+	{
+		label: "Update",
+		code: "const updated = await client.data.collection(\"COLLECTION\").update(\"ID\", {\n  // fields to update\n});\nreturn updated;",
+		description: "Update an existing record"
+	},
+	{
+		label: "Delete",
+		code: "await client.data.collection(\"COLLECTION\").delete(\"ID\");\nreturn { success: true };",
+		description: "Delete a record"
+	},
+	{
+		label: "Fluent query",
+		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: "Auth: Current session",
+		code: "const session = client.auth.getSession();\nreturn session;",
+		description: "Get current auth session"
+	},
+	{
+		label: "Admin: List users",
+		code: "const { users } = await client.admin.listUsers();\nreturn users;",
+		description: "List all registered users"
+	},
+	{
+		label: "Custom endpoint",
+		code: "const result = await client.call(\"/my-endpoint\", { key: \"value\" });\nreturn result;",
+		description: "Call a custom API endpoint"
+	}
+];
+var JSEditorSidebar = ({ collections, snippets, history, onSelectSnippet, onDeleteSnippet, onInsertCode }) => {
+	const [activeTab, setActiveTab] = useState("collections");
+	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: "collections",
+					children: /* @__PURE__ */ jsx(Tooltip, {
+						title: "Browse collections",
+						children: /* @__PURE__ */ jsx("span", {
+							className: "text-xs",
+							children: "Collections"
+						})
+					})
+				}),
+				/* @__PURE__ */ jsx(Tab, {
+					value: "reference",
+					children: /* @__PURE__ */ jsx(Tooltip, {
+						title: "SDK quick reference",
+						children: /* @__PURE__ */ jsx("span", {
+							className: "text-xs",
+							children: "Reference"
+						})
+					})
+				}),
+				/* @__PURE__ */ jsx(Tab, {
+					value: "snippets",
+					children: /* @__PURE__ */ jsx("span", {
+						className: "text-xs",
+						children: "Snippets"
+					})
+				}),
+				/* @__PURE__ */ jsx(Tab, {
+					value: "history",
+					children: /* @__PURE__ */ jsx("span", {
+						className: "text-xs",
+						children: "History"
+					})
+				})
+			]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "flex-grow overflow-hidden relative",
+			children: [
+				activeTab === "collections" && /* @__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: "Collections"
+						})
+					}), /* @__PURE__ */ jsx("div", {
+						className: "flex-grow overflow-y-auto p-1 space-y-1 no-scrollbar",
+						children: collections.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: "No collections found"
+							})
+						}) : collections.map((col) => /* @__PURE__ */ jsx(CollectionItem, {
+							collection: col,
+							onInsertCode
+						}, col.slug))
+					})]
+				}),
+				activeTab === "reference" && /* @__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: "SDK Reference"
+						})
+					}), /* @__PURE__ */ jsx("div", {
+						className: "flex-grow overflow-y-auto p-2 space-y-2 no-scrollbar",
+						children: QUICK_REFERENCE.map((ref, i) => /* @__PURE__ */ jsxs("div", {
+							className: cls("group p-2.5 rounded-lg border hover:border-primary/40 dark:hover:border-primary/40", "bg-white dark:bg-surface-900 transition-all cursor-pointer", defaultBorderMixin),
+							onClick: () => onInsertCode(ref.code),
+							children: [/* @__PURE__ */ jsxs("div", {
+								className: "flex items-center justify-between mb-1",
+								children: [/* @__PURE__ */ jsx(Typography, {
+									variant: "body2",
+									className: "text-text-primary dark:text-text-primary-dark font-semibold text-[13px]",
+									children: ref.label
+								}), /* @__PURE__ */ jsx("svg", {
+									className: "w-3.5 h-3.5 text-text-disabled group-hover:text-primary transition-colors",
+									fill: "none",
+									stroke: "currentColor",
+									viewBox: "0 0 24 24",
+									children: /* @__PURE__ */ jsx("path", {
+										strokeLinecap: "round",
+										strokeLinejoin: "round",
+										strokeWidth: 2,
+										d: "M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
+									})
+								})]
+							}), /* @__PURE__ */ jsx(Typography, {
+								variant: "caption",
+								className: "text-text-disabled dark:text-text-disabled-dark text-[10px] leading-tight",
+								children: ref.description
+							})]
+						}, i))
+					})]
+				}),
+				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: "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: "No saved snippets yet. Use the save button to store reusable code."
+								})
+							}) : /* @__PURE__ */ jsxs(Fragment, { children: [favorites.length > 0 && /* @__PURE__ */ jsxs("div", {
+								className: "mb-3",
+								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-amber-500",
+										fill: "currentColor",
+										viewBox: "0 0 20 20",
+										children: /* @__PURE__ */ jsx("path", { d: "M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" })
+									}), "Favorites"]
+								}), /* @__PURE__ */ jsx("div", {
+									className: "space-y-2",
+									children: favorites.map((snippet) => /* @__PURE__ */ jsx(SnippetItem, {
+										snippet,
+										onSelect: onSelectSnippet,
+										onDelete: onDeleteSnippet
+									}, 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",
+								children: "Others"
+							}), /* @__PURE__ */ jsx("div", {
+								className: "space-y-2",
+								children: others.map((snippet) => /* @__PURE__ */ jsx(SnippetItem, {
+									snippet,
+									onSelect: onSelectSnippet,
+									onDelete: onDeleteSnippet
+								}, 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: "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: "No execution history yet"
+							})
+						}) : [...history].reverse().map((code, 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(code),
+							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 font-mono",
+								children: code.length > 120 ? code.substring(0, 120) + "…" : code
+							})]
+						}, i))
+					})]
+				})
+			]
+		})]
+	});
+};
+function CollectionItem({ collection, onInsertCode }) {
+	const [expanded, setExpanded] = useState(false);
+	return /* @__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: () => setExpanded(!expanded),
+		children: [
+			/* @__PURE__ */ jsx("svg", {
+				className: cls("w-3 h-3 mr-1 transition-transform", expanded && "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: "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 4"
+				})
+			}),
+			/* @__PURE__ */ jsx(Typography, {
+				variant: "body2",
+				className: "text-text-secondary dark:text-text-secondary-dark text-xs truncate flex-1 min-w-0",
+				children: collection.slug
+			}),
+			/* @__PURE__ */ jsx(Tooltip, {
+				title: "Insert find() snippet",
+				children: /* @__PURE__ */ jsx(IconButton, {
+					size: "smallest",
+					className: "opacity-0 group-hover:opacity-100 text-text-disabled hover:text-primary transition-all",
+					onClick: (e) => {
+						e.stopPropagation();
+						onInsertCode(`const result = await client.data.${collection.slug}.find({ limit: 20 });\nreturn result;`);
+					},
+					children: /* @__PURE__ */ jsx(PlusIcon, { size: iconSize.smallest })
+				})
+			})
+		]
+	}), expanded && collection.properties.length > 0 && /* @__PURE__ */ jsx("div", {
+		className: cls("ml-5 mt-1 space-y-0.5 border-l", defaultBorderMixin),
+		children: collection.properties.map((prop) => /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center p-1 pl-2 hover:bg-surface-50 dark:hover:bg-surface-950 rounded-r cursor-pointer transition-colors group/prop relative min-h-[28px]",
+			onClick: () => onInsertCode(`"${prop}"`),
+			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 font-mono",
+				children: prop
+			})]
+		}, prop))
+	})] });
+}
+function SnippetItem({ snippet, onSelect, onDelete }) {
+	return /* @__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: () => onSelect(snippet.code),
+		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 font-mono",
+				children: snippet.code
+			}),
+			/* @__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();
+					onDelete(snippet.id);
+				},
+				children: /* @__PURE__ */ jsx(Trash2Icon, { size: iconSize.smallest })
+			})
+		]
+	});
+}
+//#endregion
+//#region src/components/JSEditor/JSEditor.tsx
+var STORAGE_PREFIX = "rebase_js_";
+var DEFAULT_CODE = `// Available: client (RebaseClient)
+// Press Cmd+Enter (Ctrl+Enter) to run
+//
+// Examples:
+//   const result = await client.data.collection("your_collection").find({ limit: 10 });
+//   const users = await client.admin.listUsers();
+//   const session = client.auth.getSession();
+
+const result = await client.data.collection("your_collection").find({ limit: 10 });
+return result;
+`;
+function loadFromStorage(key, fallback) {
+	try {
+		const raw = localStorage.getItem(STORAGE_PREFIX + key);
+		return raw ? JSON.parse(raw) : fallback;
+	} catch {
+		return fallback;
+	}
+}
+function saveToStorage(key, value) {
+	try {
+		localStorage.setItem(STORAGE_PREFIX + key, JSON.stringify(value));
+	} catch {}
+}
+function formatJSON(value) {
+	try {
+		return JSON.stringify(value, null, 2);
+	} catch {
+		return String(value);
+	}
+}
+/**
+* Given the raw SDK result, try to detect which collections are present.
+* 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.
+*/
+function detectCollectionsInResult(code, resultValue, collections) {
+	if (!resultValue || !collections?.length) return [];
+	const mentionedSlugs = /* @__PURE__ */ new Set();
+	const collectionCallRegex = /\.collection\(["']([^"']+)["']\)/g;
+	let m;
+	while ((m = collectionCallRegex.exec(code)) !== null) mentionedSlugs.add(m[1]);
+	const dotAccessRegex = /client\.data\.([a-zA-Z_][a-zA-Z0-9_]*)\./g;
+	while ((m = dotAccessRegex.exec(code)) !== null) if (![
+		"collection",
+		"find",
+		"findById",
+		"create",
+		"update",
+		"delete"
+	].includes(m[1])) mentionedSlugs.add(m[1]);
+	if (mentionedSlugs.size === 0) return [];
+	let rows = [];
+	const rv = resultValue;
+	if (rv?.data && Array.isArray(rv.data)) rows = rv.data;
+	else if (Array.isArray(resultValue)) rows = resultValue;
+	if (!(rows.length > 0 && rows.some((r) => r?.id != null))) return [];
+	const matched = [];
+	for (const slug of mentionedSlugs) {
+		const normalised = toSnakeCase(slug);
+		const col = collections.find((c) => {
+			const tableName = ("table" in c ? c.table : void 0) || toSnakeCase(c.slug);
+			return c.slug === slug || tableName === normalised || toSnakeCase(c.slug) === normalised;
+		});
+		if (col) matched.push({
+			collectionSlug: col.slug,
+			collection: col,
+			pkColumn: "id"
+		});
+	}
+	return matched;
+}
+function JSEditor() {
+	const rebaseContext = useRebaseContext();
+	const rebaseClient = useRebaseClient();
+	const apiConfig = useApiConfig();
+	const snackbar = useSnackbarController();
+	const collectionRegistry = useStudioCollectionRegistry();
+	const sideEntityController = useStudioSideEntityController();
+	const { t } = useTranslation();
+	const currentUser = rebaseContext.authController?.user;
+	const [tabs, setTabs] = useState(() => loadFromStorage("tabs", [{
+		id: "1",
+		name: "Script 1",
+		code: DEFAULT_CODE
+	}]));
+	const [activeTabId, setActiveTabId] = useState(() => loadFromStorage("activeTab", "1"));
+	const [result, setResult] = useState(null);
+	const [isRunning, setIsRunning] = useState(false);
+	const [snippets, setSnippets] = useState(() => loadFromStorage("snippets", []));
+	const [history, setHistory] = useState(() => loadFromStorage("history", []));
+	const [showSaveDialog, setShowSaveDialog] = useState(false);
+	const [snippetName, setSnippetName] = useState("");
+	const [resultView, setResultView] = useState("json");
+	const [selectedUser, setSelectedUser] = useState(null);
+	const [authMode, setAuthMode] = useState("jwt");
+	const [sidebarSize, setSidebarSize] = useState(() => {
+		try {
+			const stored = localStorage.getItem("rebase_js_sidebar_size");
+			return stored ? Number(stored) : 18;
+		} catch {
+			return 18;
+		}
+	});
+	const [editorHeight, setEditorHeight] = useState(() => {
+		try {
+			const stored = localStorage.getItem("rebase_js_editor_height");
+			return stored ? Number(stored) : 55;
+		} catch {
+			return 55;
+		}
+	});
+	const activeTab = tabs.find((t) => t.id === activeTabId) ?? tabs[0];
+	const collectionInfos = useMemo(() => {
+		return (collectionRegistry?.collections ?? []).map((col) => ({
+			slug: col.slug,
+			name: col.name,
+			properties: Object.keys(col.properties ?? {})
+		}));
+	}, [collectionRegistry?.collections]);
+	const collectionSlugs = useMemo(() => collectionInfos.map((c) => c.slug), [collectionInfos]);
+	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]);
+	useEffect(() => {
+		saveToStorage("tabs", tabs);
+	}, [tabs]);
+	useEffect(() => {
+		saveToStorage("activeTab", activeTabId);
+	}, [activeTabId]);
+	useEffect(() => {
+		saveToStorage("snippets", snippets);
+	}, [snippets]);
+	useEffect(() => {
+		saveToStorage("history", history);
+	}, [history]);
+	useEffect(() => {
+		try {
+			localStorage.setItem("rebase_js_sidebar_size", sidebarSize.toString());
+		} catch {}
+	}, [sidebarSize]);
+	useEffect(() => {
+		try {
+			localStorage.setItem("rebase_js_editor_height", editorHeight.toString());
+		} catch {}
+	}, [editorHeight]);
+	const updateActiveCode = useCallback((code) => {
+		setTabs((prev) => prev.map((t) => t.id === activeTabId ? {
+			...t,
+			code: code ?? ""
+		} : t));
+	}, [activeTabId]);
+	const addTab = useCallback(() => {
+		const id = String(Date.now());
+		const newTab = {
+			id,
+			name: `Script ${tabs.length + 1}`,
+			code: DEFAULT_CODE
+		};
+		setTabs((prev) => [...prev, newTab]);
+		setActiveTabId(id);
+	}, [tabs.length]);
+	const closeTab = useCallback((tabId) => {
+		setTabs((prev) => {
+			const filtered = prev.filter((t) => t.id !== tabId);
+			if (filtered.length === 0) {
+				const fresh = {
+					id: String(Date.now()),
+					name: "Script 1",
+					code: DEFAULT_CODE
+				};
+				setActiveTabId(fresh.id);
+				return [fresh];
+			}
+			if (activeTabId === tabId) setActiveTabId(filtered[filtered.length - 1].id);
+			return filtered;
+		});
+	}, [activeTabId]);
+	const buildClient = useCallback(async () => {
+		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({
+				baseUrl: apiUrl,
+				token: void 0
+			}),
+			isScoped: true
+		};
+		if (!selectedUser || currentUser && selectedUser.uid === currentUser.uid) {
+			if (!rebaseClient) throw new Error("Application client is not initialized.");
+			return {
+				client: rebaseClient,
+				isScoped: false
+			};
+		}
+		let token;
+		if (getAuthToken) token = await getAuthToken() ?? void 0;
+		if (!token) throw new Error("No auth token available. Please sign in first.");
+		return {
+			client: createRebaseClient({
+				baseUrl: apiUrl,
+				token
+			}),
+			isScoped: true
+		};
+	}, [
+		apiConfig,
+		rebaseClient,
+		selectedUser,
+		currentUser,
+		authMode
+	]);
+	const executeCode = useCallback(async (codeOverride) => {
+		const code = codeOverride ?? activeTab?.code ?? "";
+		if (!code.trim()) return;
+		setIsRunning(true);
+		setResult(null);
+		setHistory((prev) => {
+			return [...prev.filter((h) => h !== code), code].slice(-50);
+		});
+		const consoleEntries = [];
+		const startTime = performance.now();
+		let scopedClientToCleanUp = null;
+		const originalConsole = {
+			log: console.log,
+			warn: console.warn,
+			error: console.error,
+			info: console.info
+		};
+		const captureConsole = (type) => (...args) => {
+			consoleEntries.push({
+				type,
+				args,
+				timestamp: Date.now()
+			});
+			originalConsole[type](...args);
+		};
+		try {
+			console.log = captureConsole("log");
+			console.warn = captureConsole("warn");
+			console.error = captureConsole("error");
+			console.info = captureConsole("info");
+			const { client, isScoped } = await buildClient();
+			if (isScoped) scopedClientToCleanUp = client;
+			const context = {
+				user: selectedUser ?? (currentUser ? {
+					uid: currentUser.uid,
+					displayName: currentUser.displayName,
+					email: currentUser.email,
+					roles: currentUser.roles
+				} : null),
+				collections: collectionInfos
+			};
+			const AsyncFunction = Object.getPrototypeOf(async function() {}).constructor;
+			const value = await new AsyncFunction("client", "context", code)(client, context);
+			setResult({
+				value,
+				console: consoleEntries,
+				duration: performance.now() - startTime,
+				timestamp: Date.now()
+			});
+			const resultObj = value;
+			if (resultObj?.data && Array.isArray(resultObj.data)) setResultView("table");
+			else if (consoleEntries.length > 0 && value === void 0) setResultView("console");
+			else setResultView("json");
+		} catch (err) {
+			setResult({
+				value: void 0,
+				console: consoleEntries,
+				duration: performance.now() - startTime,
+				error: err instanceof Error ? err.message : String(err),
+				timestamp: Date.now()
+			});
+			setResultView("json");
+		} finally {
+			console.log = originalConsole.log;
+			console.warn = originalConsole.warn;
+			console.error = originalConsole.error;
+			console.info = originalConsole.info;
+			setIsRunning(false);
+			if (scopedClientToCleanUp) scopedClientToCleanUp.ws?.disconnect();
+		}
+	}, [
+		activeTab?.code,
+		buildClient,
+		selectedUser,
+		currentUser,
+		collectionInfos
+	]);
+	const saveSnippet = useCallback(() => {
+		if (!snippetName.trim() || !activeTab?.code.trim()) return;
+		const snippet = {
+			id: String(Date.now()),
+			name: snippetName.trim(),
+			code: activeTab.code,
+			createdAt: Date.now()
+		};
+		setSnippets((prev) => [snippet, ...prev]);
+		setShowSaveDialog(false);
+		setSnippetName("");
+		snackbar.open({
+			type: "success",
+			message: "Snippet saved"
+		});
+	}, [
+		snippetName,
+		activeTab?.code,
+		snackbar
+	]);
+	const deleteSnippet = useCallback((id) => {
+		setSnippets((prev) => prev.filter((s) => s.id !== id));
+	}, []);
+	const exportResult = useCallback(() => {
+		if (!result?.value) return;
+		const blob = new Blob([formatJSON(result.value)], { type: "application/json" });
+		const url = URL.createObjectURL(blob);
+		const a = document.createElement("a");
+		a.href = url;
+		a.download = `rebase-result-${Date.now()}.json`;
+		a.click();
+		URL.revokeObjectURL(url);
+	}, [result]);
+	const tableData = useMemo(() => {
+		if (!result?.value) return {
+			columns: [],
+			data: []
+		};
+		let rows = [];
+		const val = result.value;
+		if (val?.data && Array.isArray(val.data)) rows = val.data.map((entity) => ({
+			id: entity.id,
+			...entity.values ?? {},
+			...entity.values ? {} : entity
+		}));
+		else if (Array.isArray(result.value)) rows = result.value;
+		if (rows.length === 0) return {
+			columns: [],
+			data: []
+		};
+		const keys = /* @__PURE__ */ new Set();
+		rows.slice(0, 20).forEach((row) => {
+			if (row && typeof row === "object") Object.keys(row).forEach((k) => keys.add(k));
+		});
+		return {
+			columns: Array.from(keys).map((key) => ({
+				key,
+				title: key,
+				width: key === "id" ? 100 : 200
+			})),
+			data: rows
+		};
+	}, [result]);
+	const matchedCollections = useMemo(() => {
+		if (!result?.value || result.error) return [];
+		return detectCollectionsInResult(activeTab?.code ?? "", result.value, collectionRegistry?.collections ?? []);
+	}, [
+		result,
+		activeTab?.code,
+		collectionRegistry?.collections
+	]);
+	const getRowEntityActions = useCallback((rowData) => {
+		if (!rowData || matchedCollections.length === 0) return [];
+		return matchedCollections.filter((mc) => rowData[mc.pkColumn] != null).map((mc) => ({
+			collection: mc,
+			entityId: rowData[mc.pkColumn]
+		}));
+	}, [matchedCollections]);
+	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 blob = new Blob([csv], { type: "text/csv" });
+		const url = URL.createObjectURL(blob);
+		const a = document.createElement("a");
+		a.href = url;
+		a.download = `js_results_${(/* @__PURE__ */ new Date()).toISOString().slice(0, 19)}.csv`;
+		a.click();
+		URL.revokeObjectURL(url);
+	}, [tableData]);
+	const handleExportMarkdown = useCallback(() => {
+		if (tableData.data.length === 0) return;
+		const headers = tableData.columns.map((c) => c.key);
+		const markdown = [
+			`| ${headers.join(" | ")} |`,
+			`| ${headers.map(() => "---").join(" | ")} |`,
+			...tableData.data.map((row) => `| ${headers.map((h) => {
+				const val = row[h];
+				if (val === null || val === void 0) return "";
+				return String(val).replace(/\|/g, "\\|").replace(/\n/g, " ");
+			}).join(" | ")} |`)
+		].join("\n");
+		navigator.clipboard.writeText(markdown).then(() => {
+			snackbar.open({
+				type: "success",
+				message: t("studio_sql_markdown_copied")
+			});
+		}).catch(() => {
+			snackbar.open({
+				type: "error",
+				message: t("studio_sql_markdown_copy_failed")
+			});
+		});
+	}, [
+		tableData,
+		snackbar,
+		t
+	]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col h-full w-full",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "flex-grow overflow-hidden",
+			children: /* @__PURE__ */ jsx(ResizablePanels, {
+				orientation: "horizontal",
+				panelSizePercent: sidebarSize,
+				onPanelSizeChange: setSidebarSize,
+				minPanelSizePx: 200,
+				firstPanel: /* @__PURE__ */ jsx(JSEditorSidebar, {
+					collections: collectionInfos,
+					snippets,
+					history,
+					onSelectSnippet: (code) => updateActiveCode(code),
+					onDeleteSnippet: deleteSnippet,
+					onInsertCode: (code) => updateActiveCode(code)
+				}),
+				secondPanel: /* @__PURE__ */ jsxs("div", {
+					className: "flex flex-col h-full overflow-hidden",
+					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: setActiveTabId,
+									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-amber-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) => {
+													e.stopPropagation();
+													closeTab(tab.id);
+												},
+												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: addTab,
+									className: "ml-2 flex-shrink-0",
+									children: /* @__PURE__ */ jsx(PlusIcon, { size: iconSize.smallest })
+								})]
+							})
+						}), /* @__PURE__ */ jsxs("div", {
+							className: "flex shrink-0 items-center justify-end gap-1.5",
+							children: [
+								/* @__PURE__ */ jsx(Tooltip, {
+									title: "SaveIcon as snippet",
+									children: /* @__PURE__ */ jsx(IconButton, {
+										size: "small",
+										onClick: () => {
+											setSnippetName("");
+											setShowSaveDialog(true);
+										},
+										disabled: !activeTab?.code.trim(),
+										children: /* @__PURE__ */ jsx(SaveIcon, { size: iconSize.smallest })
+									})
+								}),
+								result?.value != null && /* @__PURE__ */ jsx(Tooltip, {
+									title: "Export result as JSON",
+									children: /* @__PURE__ */ jsx(IconButton, {
+										size: "small",
+										onClick: exportResult,
+										children: /* @__PURE__ */ jsx(DownloadIcon, { size: iconSize.smallest })
+									})
+								}),
+								/* @__PURE__ */ jsxs(Button, {
+									size: "small",
+									color: "primary",
+									disabled: isRunning || !activeTab?.code.trim(),
+									onClick: () => executeCode(),
+									children: [isRunning ? /* @__PURE__ */ jsx(CircularProgress, {
+										size: "smallest",
+										className: "mr-2"
+									}) : /* @__PURE__ */ jsx(PlayIcon, {
+										size: iconSize.smallest,
+										className: "mr-2"
+									}), "Run"]
+								})
+							]
+						})]
+					}), /* @__PURE__ */ jsx("div", {
+						className: "flex-grow overflow-hidden",
+						children: /* @__PURE__ */ jsx(ResizablePanels, {
+							orientation: "vertical",
+							panelSizePercent: editorHeight,
+							onPanelSizeChange: setEditorHeight,
+							minPanelSizePx: 100,
+							firstPanel: /* @__PURE__ */ jsxs("div", {
+								className: "h-full w-full overflow-hidden flex flex-col",
+								children: [/* @__PURE__ */ jsx("div", {
+									className: "p-2 px-3 border-b border-surface-200 dark:border-surface-950 bg-surface-50 dark:bg-surface-900 flex items-center shrink-0",
+									children: /* @__PURE__ */ jsx(AuthSimulationSelector, {
+										authMode,
+										setAuthMode,
+										selectedUser,
+										setSelectedUser,
+										users,
+										loading: false,
+										currentUser: currentSelectableUser
+									})
+								}), /* @__PURE__ */ jsx("div", {
+									className: "flex-1 min-h-0",
+									children: /* @__PURE__ */ jsx(JSMonacoEditor, {
+										value: activeTab?.code ?? "",
+										onChange: updateActiveCode,
+										onRun: (selectedText) => executeCode(selectedText),
+										collectionSlugs,
+										collections: collectionInfos,
+										autoFocus: true
+									})
+								})]
+							}),
+							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__ */ jsxs("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")
+										}), result && /* @__PURE__ */ jsxs(Fragment, { children: [
+											/* @__PURE__ */ jsx("div", { className: "flex-grow" }),
+											/* @__PURE__ */ jsxs(Tabs, {
+												value: resultView,
+												onValueChange: (val) => setResultView(val),
+												variant: "pill",
+												className: "w-[unset] mr-2",
+												children: [
+													/* @__PURE__ */ jsx(Tab, {
+														value: "json",
+														children: "JSON"
+													}),
+													tableData.data.length > 0 && /* @__PURE__ */ jsx(Tab, {
+														value: "table",
+														children: "Table"
+													}),
+													result.console.length > 0 && /* @__PURE__ */ jsxs(Tab, {
+														value: "console",
+														children: [
+															"Console (",
+															result.console.length,
+															")"
+														]
+													})
+												]
+											}),
+											/* @__PURE__ */ jsx(Chip, {
+												size: "smallest",
+												colorScheme: result.error ? "redDarker" : "greenDarker",
+												children: result.error ? "Error" : `${result.duration.toFixed(0)}ms`
+											})
+										] })]
+									}),
+									/* @__PURE__ */ jsxs("div", {
+										className: "flex-grow flex flex-col min-h-0 overflow-hidden",
+										children: [
+											isRunning && /* @__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: "EXECUTING SCRIPT..."
+													})]
+												})
+											}),
+											!isRunning && !result && /* @__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: "M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
+														})
+													}), /* @__PURE__ */ jsxs(Typography, {
+														variant: "body2",
+														children: [
+															"Write JavaScript and press ",
+															/* @__PURE__ */ jsx("kbd", {
+																className: "px-1.5 py-0.5 rounded bg-surface-200 dark:bg-surface-700 text-[11px] font-mono",
+																children: "⌘ Enter"
+															}),
+															" to run"
+														]
+													})]
+												})
+											}),
+											!isRunning && result?.error && /* @__PURE__ */ jsx("div", {
+												className: "flex-grow flex items-center justify-center p-6 overflow-auto",
+												children: /* @__PURE__ */ jsx(ErrorView, {
+													title: "Execution Error",
+													error: result.error
+												})
+											}),
+											!isRunning && result && !result.error && resultView === "json" && /* @__PURE__ */ jsx("pre", {
+												className: "flex-grow overflow-auto p-4 text-[13px] font-mono leading-relaxed text-text-primary dark:text-text-primary-dark whitespace-pre-wrap break-words",
+												children: result.value === void 0 ? /* @__PURE__ */ jsx("span", {
+													className: "text-text-disabled italic",
+													children: "undefined (no return value)"
+												}) : /* @__PURE__ */ jsx(JSONHighlight, { value: result.value })
+											}),
+											!isRunning && result && !result.error && resultView === "table" && tableData.data.length > 0 && /* @__PURE__ */ jsxs("div", {
+												className: "flex-grow flex flex-col overflow-hidden min-h-0",
+												children: [matchedCollections.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: matchedCollections.map((mc) => /* @__PURE__ */ jsx(Tooltip, {
+															title: `${mc.collection.name} (${mc.collectionSlug})`,
+															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: { icon: mc.collection.icon },
+																	className: "text-[12px]"
+																}), mc.collection.name]
+															})
+														}, mc.collectionSlug))
+													})]
+												}), /* @__PURE__ */ jsx("div", {
+													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,
+														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();
+																					sideEntityController.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: () => {
+																				sideEntityController.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
+																})
+															});
+														}
+													})
+												})]
+											}),
+											!isRunning && result && resultView === "console" && /* @__PURE__ */ jsxs("div", {
+												className: "flex-grow overflow-auto p-2 space-y-1 font-mono text-[12px]",
+												children: [result.console.length === 0 ? /* @__PURE__ */ jsx(Typography, {
+													variant: "caption",
+													className: "text-text-disabled p-2",
+													children: "No console output"
+												}) : result.console.map((entry, i) => /* @__PURE__ */ jsxs("div", {
+													className: cls("px-2 py-1 rounded flex items-start gap-2", entry.type === "error" && "bg-red-50 dark:bg-red-950/30 text-red-700 dark:text-red-400", entry.type === "warn" && "bg-amber-50 dark:bg-amber-950/30 text-amber-700 dark:text-amber-400", entry.type === "log" && "text-text-primary dark:text-text-primary-dark", entry.type === "info" && "text-blue-700 dark:text-blue-400"),
+													children: [/* @__PURE__ */ jsx("span", {
+														className: "text-[10px] opacity-50 flex-shrink-0 mt-0.5",
+														children: entry.type === "error" ? "❌" : entry.type === "warn" ? "⚠️" : entry.type === "info" ? "ℹ️" : "›"
+													}), /* @__PURE__ */ jsx("span", {
+														className: "whitespace-pre-wrap break-words",
+														children: entry.args.map((a) => typeof a === "object" ? JSON.stringify(a, null, 2) : String(a)).join(" ")
+													})]
+												}, i)), result.value !== void 0 && /* @__PURE__ */ jsxs("div", {
+													className: cls("px-2 py-1 mt-2 border-t pt-2", defaultBorderMixin),
+													children: [/* @__PURE__ */ jsx(Typography, {
+														variant: "caption",
+														className: "text-text-disabled text-[10px] uppercase tracking-wider mb-1 block",
+														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)
+													})]
+												})]
+											})
+										]
+									}),
+									!isRunning && result && !result.error && resultView === "table" && tableData.data.length > 0 && /* @__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: tableData.data.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: [result.duration.toFixed(0), "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: exportResult,
+													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")
+												})
+											]
+										})]
+									})
+								]
+							})
+						})
+					})]
+				})
+			})
+		}), /* @__PURE__ */ jsxs(Dialog, {
+			open: showSaveDialog,
+			onOpenChange: setShowSaveDialog,
+			children: [
+				/* @__PURE__ */ jsx(DialogTitle, { children: "SaveIcon Snippet" }),
+				/* @__PURE__ */ jsx(DialogContent, { children: /* @__PURE__ */ jsx(TextField, {
+					label: "Snippet name",
+					value: snippetName,
+					onChange: (e) => setSnippetName(e.target.value),
+					placeholder: "e.g. List all products",
+					autoFocus: true,
+					onKeyDown: (e) => {
+						if (e.key === "Enter") saveSnippet();
+					}
+				}) }),
+				/* @__PURE__ */ jsxs(DialogActions, { children: [/* @__PURE__ */ jsx(Button, {
+					variant: "text",
+					onClick: () => setShowSaveDialog(false),
+					children: "Cancel"
+				}), /* @__PURE__ */ jsx(Button, {
+					variant: "filled",
+					color: "primary",
+					onClick: saveSnippet,
+					disabled: !snippetName.trim(),
+					children: "Save"
+				})] })
+			]
+		})]
+	});
+}
+function JSONHighlight({ value }) {
+	const json = formatJSON(value);
+	const { mode } = useModeController();
+	return /* @__PURE__ */ jsx(Highlight, {
+		theme: mode === "dark" ? themes.vsDark : themes.github,
+		code: json,
+		language: "json",
+		children: ({ style, tokens, getLineProps, getTokenProps }) => /* @__PURE__ */ jsx("span", {
+			style: {
+				...style,
+				backgroundColor: "transparent"
+			},
+			children: tokens.map((line, i) => /* @__PURE__ */ jsx("div", {
+				...getLineProps({ line }),
+				children: line.map((token, key) => /* @__PURE__ */ jsx("span", { ...getTokenProps({ token }) }, key))
+			}, i))
+		})
+	});
+}
+//#endregion
+export { JSEditor };
+
+//# sourceMappingURL=JSEditor-BhAbEjCP.js.map