@sqlrooms/sql-editor 0.6.0 → 0.7.0

package/dist/SqlEditor.js

@@ -1,17 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { DataTableVirtualized, QueryDataTable, useArrowDataTable, } from '@sqlrooms/data-table';
-import { DuckQueryError, escapeId, getDuckTables, useDuckDb, } from '@sqlrooms/duckdb';
-import { Button, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, ResizableHandle, ResizablePanel, ResizablePanelGroup, SpinnerPane, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, } from '@sqlrooms/ui';
-import { genRandomStr, generateUniqueName } from '@sqlrooms/utils';
-import { csvFormat } from 'd3-dsv';
-import { saveAs } from 'file-saver';
+import { DataTableVirtualized, QueryDataTable } from '@sqlrooms/data-table';
+import { escapeId } from '@sqlrooms/duckdb';
+import { Button, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, ResizableHandle, ResizablePanel, ResizablePanelGroup, SpinnerPane, Tabs, TabsContent, TabsList, TabsTrigger, } from '@sqlrooms/ui';
 import { BookOpenIcon, DownloadIcon, MoreVerticalIcon, PlayIcon, PlusIcon, } from 'lucide-react';
-import { useCallback, useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import CreateTableModal from './CreateTableModal';
 import DeleteSqlQueryModal from './DeleteSqlQueryModal';
 import RenameSqlQueryModal from './RenameSqlQueryModal';
 import { useStoreWithSqlEditor } from './SqlEditorSlice';
 import { TablesList } from './TablesList';
+import { SqlMonacoEditor } from './SqlMonacoEditor';
+import { useTableManagement, useQueryExecution, useMonacoEditor } from './hooks';
+import { useBaseProjectStore } from '@sqlrooms/project-builder';
 const DEFAULT_QUERY = '';
 /**
  * A full-featured SQL editor component with query execution, table management, and results visualization.
@@ -26,199 +26,127 @@ const DEFAULT_QUERY = '';
  * - Keyboard shortcuts (Cmd/Ctrl + Enter to run queries)
  *
  */
-const SqlEditor = (props) => {
+const SqlEditorBase = (props) => {
     const { schema = 'main', documentationPanel } = props;
-    const duckConn = useDuckDb();
-    const addOrUpdateSqlQuery = useStoreWithSqlEditor((state) => state.sqlEditor.addOrUpdateSqlQuery);
-    const sqlEditorConfig = useStoreWithSqlEditor((s) => s.project.config.sqlEditor);
-    const onChangeSqlEditorConfig = useStoreWithSqlEditor((s) => s.sqlEditor.setSqlEditorConfig);
+    // Store access - directly use the selector
+    const addOrUpdateSqlQueryDataSource = useBaseProjectStore((state) => state.project.addOrUpdateSqlQueryDataSource);
+    // Get query data and methods directly from the store
+    const queries = useStoreWithSqlEditor((s) => s.project.config.sqlEditor.queries);
+    const selectedQueryId = useStoreWithSqlEditor((s) => s.project.config.sqlEditor.selectedQueryId);
+    const getCurrentQuery = useStoreWithSqlEditor((s) => s.sqlEditor.getCurrentQuery);
+    const setSelectedQueryId = useStoreWithSqlEditor((s) => s.sqlEditor.setSelectedQueryId);
+    const updateQueryText = useStoreWithSqlEditor((s) => s.sqlEditor.updateQueryText);
+    const createQueryTab = useStoreWithSqlEditor((s) => s.sqlEditor.createQueryTab);
+    const deleteQueryTab = useStoreWithSqlEditor((s) => s.sqlEditor.deleteQueryTab);
+    const renameQueryTab = useStoreWithSqlEditor((s) => s.sqlEditor.renameQueryTab);
+    // UI state
     const [showDocs, setShowDocs] = useState(false);
-    const [tables, setTables] = useState([]);
-    const [tablesLoading, setTablesLoading] = useState(false);
-    const [tablesError, setTablesError] = useState(null);
-    const [results, setResults] = useState();
-    const resultsTableData = useArrowDataTable(results);
-    const [loading, setLoading] = useState(false);
-    const [selectedTable, setSelectedTable] = useState();
-    const [error, setError] = useState(null);
-    const fetchTables = useCallback(async () => {
-        if (!duckConn.conn)
-            return;
-        try {
-            setTablesLoading(true);
-            setTablesError(null);
-            const tablesList = await getDuckTables(schema);
-            setTables(tablesList);
-        }
-        catch (e) {
-            console.error(e);
-            setTablesError(e);
-        }
-        finally {
-            setTablesLoading(false);
-        }
-    }, [duckConn.conn, schema]);
-    useEffect(() => {
-        void fetchTables();
-    }, [fetchTables]);
-    const runQuery = async (q) => {
-        const conn = duckConn.conn;
-        try {
-            setError(null);
-            setLoading(true);
-            await conn.query(`SET search_path = ${schema}`);
-            const results = await conn.query(q);
-            await conn.query(`SET search_path = main`);
-            setResults(results);
-        }
-        catch (e) {
-            setResults(undefined);
-            setError((e instanceof DuckQueryError
-                ? e.getMessageForUser()
-                : 'Query failed') ?? e);
-            console.error(e);
-        }
-        finally {
-            setLoading(false);
-        }
-    };
-    const handleSelectTable = (table) => {
-        setSelectedTable(table);
-    };
-    const handleRunQuery = async () => {
-        setSelectedTable(undefined);
-        const textarea = document.querySelector(`textarea[id="${sqlEditorConfig.selectedQueryId}"]`);
-        const selectedText = textarea instanceof HTMLTextAreaElement
-            ? textarea?.value.substring(textarea.selectionStart, textarea.selectionEnd)
-            : undefined;
-        const queryToRun = selectedText || currentQuery;
-        await runQuery(queryToRun);
-        void fetchTables();
-    };
-    const getQueryIndexById = (id) => {
-        return sqlEditorConfig.queries.findIndex((q) => q.id === id);
-    };
-    const getCurrentQueryIndex = () => {
-        return getQueryIndexById(sqlEditorConfig.selectedQueryId);
-    };
-    const handleTabChange = (value) => {
-        onChangeSqlEditorConfig({
-            ...sqlEditorConfig,
-            selectedQueryId: value,
-        });
-    };
-    const handleUpdateQuery = (e) => {
-        if (!sqlEditorConfig)
-            return;
-        const currentIndex = getCurrentQueryIndex();
-        const newQueries = [...sqlEditorConfig.queries];
-        if (!newQueries[currentIndex])
-            return;
-        newQueries[currentIndex] = {
-            ...newQueries[currentIndex],
-            query: e.target.value,
-        };
-        onChangeSqlEditorConfig({
-            ...sqlEditorConfig,
-            queries: newQueries,
-        });
-    };
-    const handleRunQueryRef = useRef(handleRunQuery);
-    handleRunQueryRef.current = handleRunQuery;
-    useEffect(() => {
-        const handleKeyDown = (evt) => {
-            if (evt instanceof KeyboardEvent &&
-                evt.key === 'Enter' &&
-                (evt.metaKey || evt.ctrlKey || evt.shiftKey)) {
-                void handleRunQueryRef.current();
-            }
-        };
-        globalThis.addEventListener('keydown', handleKeyDown);
-        return () => {
-            globalThis.removeEventListener('keydown', handleKeyDown);
-        };
-    }, []);
-    const handleExport = () => {
-        if (!results)
-            return;
-        const blob = new Blob([csvFormat(results.toArray())], {
-            type: 'text/plain;charset=utf-8',
-        });
-        saveAs(blob, `export-${genRandomStr(5)}.csv`);
-    };
     const [createTableModalOpen, setCreateTableModalOpen] = useState(false);
-    const handleCreateTable = useCallback(() => {
-        setCreateTableModalOpen(true);
-    }, []);
-    const handleToggleDocs = useCallback(() => {
-        setShowDocs(!showDocs);
-    }, [showDocs]);
-    const currentQuery = sqlEditorConfig.queries[getCurrentQueryIndex()]?.query ?? DEFAULT_QUERY;
+    const [lastExecutedQuery, setLastExecutedQuery] = useState('');
+    // Local state for modals
     const [queryToDelete, setQueryToDelete] = useState(null);
     const [queryToRename, setQueryToRename] = useState(null);
-    const handleStartRename = (queryId, currentName, event) => {
+    // Custom hooks
+    const { tables, tablesLoading, tablesError, tableSchemas, selectedTable, fetchTables, handleSelectTable, } = useTableManagement();
+    const { results, resultsTableData, loading, error, runQuery, exportResults } = useQueryExecution(schema);
+    const { handleEditorMount, getQueryText, setRunQueryHandler } = useMonacoEditor();
+    // Get the current query text
+    const currentQuery = getCurrentQuery(DEFAULT_QUERY);
+    // Handler functions for query tab management
+    const handleTabChange = useCallback((value) => {
+        setSelectedQueryId(value);
+    }, [setSelectedQueryId]);
+    const handleUpdateQuery = useCallback((value) => {
+        if (!value)
+            return;
+        updateQueryText(selectedQueryId, value);
+    }, [selectedQueryId, updateQueryText]);
+    const handleNewQuery = useCallback(() => {
+        return createQueryTab(DEFAULT_QUERY);
+    }, [createQueryTab]);
+    const handleStartRename = useCallback((queryId, currentName, event) => {
         event.preventDefault();
         setQueryToRename({ id: queryId, name: currentName });
-    };
-    const handleFinishRename = (newName) => {
+    }, []);
+    const handleFinishRename = useCallback((newName) => {
         if (queryToRename) {
-            const newQueries = sqlEditorConfig.queries.map((q) => q.id === queryToRename.id ? { ...q, name: newName || q.name } : q);
-            onChangeSqlEditorConfig({
-                ...sqlEditorConfig,
-                queries: newQueries,
-            });
+            renameQueryTab(queryToRename.id, newName);
         }
         setQueryToRename(null);
-    };
-    const handleDeleteQuery = (queryId, event) => {
+    }, [queryToRename, renameQueryTab]);
+    const handleDeleteQuery = useCallback((queryId, event) => {
         event.stopPropagation();
-        const currentIndex = getQueryIndexById(queryId);
         setQueryToDelete(queryId);
-        // Pre-select the previous query if we're deleting the current one
-        if (queryId === sqlEditorConfig.selectedQueryId && currentIndex > 0) {
-            const prevId = sqlEditorConfig.queries[currentIndex - 1]?.id;
-            if (prevId) {
-                onChangeSqlEditorConfig({
-                    ...sqlEditorConfig,
-                    selectedQueryId: prevId,
-                });
-            }
+    }, []);
+    const handleConfirmDeleteQuery = useCallback(() => {
+        if (queryToDelete) {
+            deleteQueryTab(queryToDelete);
+            setQueryToDelete(null);
+        }
+    }, [queryToDelete, deleteQueryTab]);
+    // Handle run query logic
+    const handleRunQuery = useCallback(async () => {
+        // Clear selected table when running a query
+        handleSelectTable(undefined);
+        // Get the query text (either selected text or the entire query)
+        const queryToRun = getQueryText(selectedQueryId, currentQuery);
+        // Store the query that's being executed
+        setLastExecutedQuery(queryToRun);
+        // Run the query and refresh tables list
+        await runQuery(queryToRun);
+    }, [
+        handleSelectTable,
+        getQueryText,
+        selectedQueryId,
+        currentQuery,
+        runQuery,
+        setLastExecutedQuery,
+    ]);
+    // Set up the run query handler reference for keyboard shortcuts
+    useEffect(() => {
+        setRunQueryHandler(handleRunQuery);
+    }, [handleRunQuery, setRunQueryHandler]);
+    // Check if table schemas are empty and refetch if needed
+    useEffect(() => {
+        if (Object.keys(tableSchemas).length === 0) {
+            void fetchTables();
         }
-    };
-    const handleNewQuery = () => {
-        const newQueries = [...sqlEditorConfig.queries];
-        const newQuery = {
-            id: genRandomStr(8),
-            name: generateUniqueName('Untitled', newQueries.map((q) => q.name)),
-            query: DEFAULT_QUERY,
-        };
-        newQueries.push(newQuery);
-        onChangeSqlEditorConfig({
-            ...sqlEditorConfig,
-            queries: newQueries,
-            selectedQueryId: newQuery.id,
-        });
-    };
-    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "absolute right-12 top-2", children: documentationPanel ? (_jsxs(Button, { size: "sm", variant: showDocs ? 'secondary' : 'outline', onClick: handleToggleDocs, children: [_jsx(BookOpenIcon, { className: "w-4 h-4 mr-2" }), "SQL reference"] })) : (_jsx("a", { href: "https://duckdb.org/docs/sql/introduction", target: "_blank", rel: "noreferrer", children: _jsxs(Button, { size: "sm", variant: 'outline', children: [_jsx(BookOpenIcon, { className: "w-4 h-4 mr-2" }), "SQL reference"] }) })) }), _jsxs("div", { className: "flex flex-col w-full gap-2", children: [_jsx("div", { className: "flex items-center gap-2 ml-1 mr-10 mb-2", children: _jsx("h2", { className: "text-lg font-semibold", children: "SQL Editor" }) }), _jsx("div", { className: "flex-grow h-full bg-muted", children: _jsxs(ResizablePanelGroup, { direction: "horizontal", className: "h-full", children: [_jsx(ResizablePanel, { defaultSize: showDocs ? 50 : 80, children: _jsxs(ResizablePanelGroup, { direction: "vertical", className: "h-full", children: [_jsx(ResizablePanel, { defaultSize: 50, className: "flex flex-row", children: _jsxs(ResizablePanelGroup, { direction: "horizontal", children: [_jsx(ResizablePanel, { defaultSize: 20, children: tablesLoading ? (_jsx(SpinnerPane, { h: "100%" })) : tablesError ? (_jsxs("div", { className: "p-4 text-red-500", children: ["Error loading tables: ", tablesError.message] })) : (_jsx(TablesList, { schema: "information_schema", tableNames: tables, selectedTable: selectedTable, onSelect: handleSelectTable })) }), _jsx(ResizableHandle, { withHandle: true }), _jsx(ResizablePanel, { defaultSize: 80, children: _jsxs(Tabs, { value: sqlEditorConfig.selectedQueryId, onValueChange: handleTabChange, className: "flex flex-col flex-grow overflow-hidden", children: [_jsxs("div", { className: "flex items-center gap-2 border-b border-border", children: [_jsxs(Button, { size: "sm", onClick: () => void handleRunQuery(), className: "uppercase", children: [_jsx(PlayIcon, { className: "w-4 h-4 mr-2" }), "Run"] }), _jsx(TabsList, { className: "flex-1", children: sqlEditorConfig.queries.map((q) => (_jsxs("div", { className: "relative", children: [_jsx(TabsTrigger, { value: q.id, className: "min-w-[60px] px-6 pr-8", children: q.name }), _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx("div", { className: "absolute right-0 top-1/2 -translate-y-1/2 h-6 w-6 flex items-center justify-center cursor-pointer hover:bg-accent rounded-sm", onClick: (e) => e.stopPropagation(), children: _jsx(MoreVerticalIcon, { className: "h-3 w-3" }) }) }), _jsxs(DropdownMenuContent, { children: [_jsx(DropdownMenuItem, { onClick: (e) => {
+    }, [fetchTables, tableSchemas]);
+    // Handle toggle documentation panel
+    const handleToggleDocs = useCallback(() => {
+        setShowDocs(!showDocs);
+    }, [showDocs]);
+    // Handle create table from query results
+    const handleCreateTable = useCallback(() => {
+        setCreateTableModalOpen(true);
+    }, []);
+    return (_jsxs("div", { className: "relative flex flex-col h-full w-full overflow-hidden", children: [_jsx("div", { className: "absolute right-12 top-0", children: documentationPanel ? (_jsxs(Button, { size: "sm", variant: showDocs ? 'secondary' : 'outline', onClick: handleToggleDocs, children: [_jsx(BookOpenIcon, { className: "w-4 h-4 mr-2" }), "SQL reference"] })) : (_jsx("a", { href: "https://duckdb.org/docs/sql/introduction", target: "_blank", rel: "noreferrer", children: _jsxs(Button, { size: "sm", variant: 'outline', children: [_jsx(BookOpenIcon, { className: "w-4 h-4 mr-2" }), "SQL reference"] }) })) }), _jsxs("div", { className: "flex flex-col w-full gap-2 h-full", children: [_jsx("div", { className: "flex items-center gap-2 ml-1 mr-10 mb-2", children: _jsx("h2", { className: "text-lg font-semibold", children: "SQL Editor" }) }), _jsx("div", { className: "flex-grow h-full bg-muted", children: _jsxs(ResizablePanelGroup, { direction: "horizontal", className: "h-full", children: [_jsx(ResizablePanel, { defaultSize: showDocs ? 70 : 100, children: _jsxs(ResizablePanelGroup, { direction: "vertical", className: "h-full", children: [_jsx(ResizablePanel, { defaultSize: 50, className: "flex flex-row", children: _jsxs(ResizablePanelGroup, { direction: "horizontal", children: [_jsx(ResizablePanel, { defaultSize: 20, children: tablesLoading ? (_jsx(SpinnerPane, { h: "100%" })) : tablesError ? (_jsxs("div", { className: "p-4 text-red-500", children: ["Error loading tables: ", tablesError.message] })) : (_jsx(TablesList, { schema: "information_schema", tableNames: tables, selectedTable: selectedTable, onSelect: handleSelectTable })) }), _jsx(ResizableHandle, { withHandle: true }), _jsx(ResizablePanel, { defaultSize: 80, className: "flex flex-col overflow-hidden", children: _jsxs(Tabs, { value: selectedQueryId, onValueChange: handleTabChange, className: "flex flex-col h-full overflow-hidden", children: [_jsxs("div", { className: "flex items-center gap-2 border-b border-border", children: [_jsxs(Button, { size: "sm", onClick: () => void handleRunQuery(), className: "uppercase", children: [_jsx(PlayIcon, { className: "w-4 h-4 mr-2" }), "Run"] }), _jsx(TabsList, { className: "flex-1", children: queries.map((q) => (_jsxs("div", { className: "relative", children: [_jsx(TabsTrigger, { value: q.id, className: "min-w-[60px] px-6 pr-8", children: q.name }), _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx("div", { className: "absolute right-0 top-1/2 -translate-y-1/2 h-6 w-6 flex items-center justify-center cursor-pointer hover:bg-accent rounded-sm", onClick: (e) => e.stopPropagation(), children: _jsx(MoreVerticalIcon, { className: "h-3 w-3" }) }) }), _jsxs(DropdownMenuContent, { children: [_jsx(DropdownMenuItem, { onClick: (e) => {
                                                                                                                 e.stopPropagation();
                                                                                                                 handleStartRename(q.id, q.name, e);
-                                                                                                            }, children: "Rename" }), sqlEditorConfig.queries.length > 1 && (_jsx(DropdownMenuItem, { onClick: (e) => {
+                                                                                                            }, children: "Rename" }), queries.length > 1 && (_jsx(DropdownMenuItem, { onClick: (e) => {
                                                                                                                 e.stopPropagation();
                                                                                                                 handleDeleteQuery(q.id, e);
-                                                                                                            }, className: "text-red-500", children: "Delete" }))] })] })] }, q.id))) }), _jsx(Button, { size: "icon", variant: "ghost", onClick: handleNewQuery, className: "ml-2", children: _jsx(PlusIcon, { className: "h-4 w-4" }) })] }), sqlEditorConfig.queries.map((q) => (_jsx(TabsContent, { value: q.id, className: "flex-grow data-[state=active]:flex-grow", children: _jsx(Textarea, { id: q.id, value: q.query, onChange: handleUpdateQuery, className: "h-full font-mono text-sm resize-none bg-muted" }) }, q.id)))] }) })] }) }), _jsx(ResizableHandle, { withHandle: true }), _jsx(ResizablePanel, { defaultSize: 50, children: _jsx("div", { className: "h-full overflow-hidden bg-muted text-sm", children: loading ? (_jsx(SpinnerPane, { h: "100%" })) : selectedTable ? (_jsx(QueryDataTable, { query: `SELECT * FROM ${schema}.${escapeId(selectedTable)}` })) : error ? (_jsx("div", { className: "w-full h-full p-5 overflow-auto", children: _jsx("pre", { className: "text-xs leading-tight text-red-500", children: error }) })) : resultsTableData ? (_jsxs("div", { className: "flex-grow overflow-hidden flex flex-col relative", children: [_jsx(DataTableVirtualized, { ...resultsTableData }), _jsxs("div", { className: "absolute bottom-0 right-0 flex gap-2 p-2", children: [_jsxs(Button, { size: "sm", disabled: !resultsTableData, onClick: handleCreateTable, children: [_jsx(PlusIcon, { className: "w-4 h-4 mr-2" }), "Create table"] }), _jsxs(Button, { size: "sm", disabled: !results, onClick: handleExport, children: [_jsx(DownloadIcon, { className: "w-4 h-4 mr-2" }), "Export"] })] })] })) : null }) })] }) }), showDocs && (_jsxs(_Fragment, { children: [_jsx(ResizableHandle, { withHandle: true }), _jsx(ResizablePanel, { defaultSize: 30, children: documentationPanel })] }))] }) }), _jsx(CreateTableModal, { query: currentQuery, isOpen: createTableModalOpen, onClose: () => setCreateTableModalOpen(false), onAddOrUpdateSqlQuery: addOrUpdateSqlQuery }), _jsx(DeleteSqlQueryModal, { isOpen: queryToDelete !== null, onClose: () => setQueryToDelete(null), onConfirm: () => {
-                            const newQueries = sqlEditorConfig.queries.filter((q) => q.id !== queryToDelete);
-                            const deletedIndex = getQueryIndexById(queryToDelete);
-                            const selectedQueryId = newQueries[Math.min(deletedIndex, newQueries.length - 1)]?.id ||
-                                newQueries[0]?.id;
-                            if (selectedQueryId) {
-                                onChangeSqlEditorConfig({
-                                    ...sqlEditorConfig,
-                                    queries: newQueries,
-                                    selectedQueryId,
-                                });
-                            }
-                            setQueryToDelete(null);
-                        } }), _jsx(RenameSqlQueryModal, { isOpen: queryToRename !== null, onClose: () => setQueryToRename(null), initialName: queryToRename?.name ?? '', onRename: handleFinishRename })] })] }));
+                                                                                                            }, className: "text-red-500", children: "Delete" }))] })] })] }, q.id))) }), _jsx(Button, { size: "icon", variant: "ghost", onClick: handleNewQuery, className: "ml-2", children: _jsx(PlusIcon, { className: "h-4 w-4" }) })] }), queries.map((q) => (_jsx(TabsContent, { value: q.id, className: "relative flex-grow data-[state=active]:flex flex-col h-full", children: _jsx("div", { className: "flex-grow h-full w-full absolute inset-0", children: _jsx(SqlMonacoEditor, { value: q.query, onChange: handleUpdateQuery, className: "h-full w-full flex-grow", options: {
+                                                                                    scrollBeyondLastLine: false,
+                                                                                    automaticLayout: true,
+                                                                                    minimap: { enabled: false },
+                                                                                    wordWrap: 'on',
+                                                                                    // Enable keyboard shortcuts
+                                                                                    quickSuggestions: true,
+                                                                                    suggestOnTriggerCharacters: true,
+                                                                                }, onMount: (editor, monaco) => {
+                                                                                    handleEditorMount(editor, monaco, q.id, handleRunQuery);
+                                                                                }, tableSchemas: tableSchemas, getLatestSchemas: () => {
+                                                                                    // If tableSchemas is empty, try to fetch tables
+                                                                                    if (Object.keys(tableSchemas).length === 0) {
+                                                                                        // We can't await here, but we can trigger the fetch
+                                                                                        // This will update the state for next time
+                                                                                        void fetchTables();
+                                                                                    }
+                                                                                    return { tableSchemas };
+                                                                                } }) }) }, q.id)))] }) })] }) }), _jsx(ResizableHandle, { withHandle: true }), _jsx(ResizablePanel, { defaultSize: 50, className: "overflow-hidden bg-muted text-sm", children: loading ? (_jsx(SpinnerPane, { h: "100%" })) : selectedTable ? (_jsx(QueryDataTable, { query: `SELECT * FROM ${schema}.${escapeId(selectedTable)}` })) : error ? (_jsx("div", { className: "w-full h-full p-5 overflow-auto", children: _jsx("pre", { className: "text-xs leading-tight text-red-500", children: error }) })) : resultsTableData ? (_jsxs("div", { className: "flex-grow overflow-hidden flex flex-col relative w-full h-full", children: [_jsx(DataTableVirtualized, { ...resultsTableData }), _jsxs("div", { className: "absolute bottom-0 right-0 flex gap-2", children: [_jsxs(Button, { size: "sm", disabled: !resultsTableData, onClick: handleCreateTable, children: [_jsx(PlusIcon, { className: "w-4 h-4 mr-2" }), "Create table"] }), _jsxs(Button, { size: "sm", disabled: !results, onClick: exportResults, children: [_jsx(DownloadIcon, { className: "w-4 h-4 mr-2" }), "Export"] })] })] })) : null })] }) }), showDocs && (_jsxs(_Fragment, { children: [_jsx(ResizableHandle, { withHandle: true }), _jsx(ResizablePanel, { defaultSize: 30, children: documentationPanel })] }))] }) }), _jsx(CreateTableModal, { query: lastExecutedQuery || currentQuery, isOpen: createTableModalOpen, onClose: () => setCreateTableModalOpen(false), onAddOrUpdateSqlQuery: addOrUpdateSqlQueryDataSource }), _jsx(DeleteSqlQueryModal, { isOpen: queryToDelete !== null, onClose: () => setQueryToDelete(null), onConfirm: handleConfirmDeleteQuery }), _jsx(RenameSqlQueryModal, { isOpen: queryToRename !== null, onClose: () => setQueryToRename(null), initialName: queryToRename?.name ?? '', onRename: handleFinishRename })] })] }));
 };
+// Wrap with React.memo to prevent unnecessary re-renders
+const SqlEditor = React.memo(SqlEditorBase);
 export default SqlEditor;
 //# sourceMappingURL=SqlEditor.js.map

package/dist/SqlEditor.js.map

@@ -1 +1 @@
-{"version":3,"file":"SqlEditor.js","sourceRoot":"","sources":["../src/SqlEditor.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  DataTableVirtualized,\n  QueryDataTable,\n  useArrowDataTable,\n} from '@sqlrooms/data-table';\nimport {\n  DuckQueryError,\n  escapeId,\n  getDuckTables,\n  useDuckDb,\n} from '@sqlrooms/duckdb';\nimport {\n  Button,\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n  ResizableHandle,\n  ResizablePanel,\n  ResizablePanelGroup,\n  SpinnerPane,\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n  Textarea,\n} from '@sqlrooms/ui';\nimport {genRandomStr, generateUniqueName} from '@sqlrooms/utils';\nimport {Table} from 'apache-arrow';\nimport {csvFormat} from 'd3-dsv';\nimport {saveAs} from 'file-saver';\nimport {\n  BookOpenIcon,\n  DownloadIcon,\n  MoreVerticalIcon,\n  PlayIcon,\n  PlusIcon,\n} from 'lucide-react';\nimport React, {useCallback, useEffect, useRef, useState} from 'react';\nimport CreateTableModal from './CreateTableModal';\nimport DeleteSqlQueryModal from './DeleteSqlQueryModal';\nimport RenameSqlQueryModal from './RenameSqlQueryModal';\nimport {useStoreWithSqlEditor} from './SqlEditorSlice';\nimport {TablesList} from './TablesList';\n\nconst DEFAULT_QUERY = '';\n\nexport type SqlEditorProps = {\n  /** The database schema to use for queries. Defaults to 'main' */\n  schema?: string;\n\n  /** Whether the SQL editor is currently visible */\n  isOpen: boolean;\n\n  /** Optional component to render SQL documentation in the side panel */\n  documentationPanel?: React.ReactNode;\n\n  /** Callback fired when the SQL editor should be closed */\n  onClose: () => void;\n};\n\n/**\n * A full-featured SQL editor component with query execution, table management, and results visualization.\n *\n * Features:\n * - Multiple query tabs with save/rename/delete functionality\n * - Query execution with results displayed in a data table\n * - Table browser showing available tables in the schema\n * - Export results to CSV\n * - Create new tables from query results\n * - Optional SQL documentation panel\n * - Keyboard shortcuts (Cmd/Ctrl + Enter to run queries)\n *\n */\nconst SqlEditor: React.FC<SqlEditorProps> = (props) => {\n  const {schema = 'main', documentationPanel} = props;\n  const duckConn = useDuckDb();\n\n  const addOrUpdateSqlQuery = useStoreWithSqlEditor(\n    (state) => state.sqlEditor.addOrUpdateSqlQuery,\n  );\n\n  const sqlEditorConfig = useStoreWithSqlEditor(\n    (s) => s.project.config.sqlEditor,\n  );\n  const onChangeSqlEditorConfig = useStoreWithSqlEditor(\n    (s) => s.sqlEditor.setSqlEditorConfig,\n  );\n\n  const [showDocs, setShowDocs] = useState(false);\n  const [tables, setTables] = useState<string[]>([]);\n  const [tablesLoading, setTablesLoading] = useState(false);\n  const [tablesError, setTablesError] = useState<Error | null>(null);\n\n  const [results, setResults] = useState<Table>();\n  const resultsTableData = useArrowDataTable(results);\n  const [loading, setLoading] = useState(false);\n  const [selectedTable, setSelectedTable] = useState<string>();\n\n  const [error, setError] = useState<string | null>(null);\n\n  const fetchTables = useCallback(async () => {\n    if (!duckConn.conn) return;\n\n    try {\n      setTablesLoading(true);\n      setTablesError(null);\n      const tablesList = await getDuckTables(schema);\n      setTables(tablesList);\n    } catch (e) {\n      console.error(e);\n      setTablesError(e as Error);\n    } finally {\n      setTablesLoading(false);\n    }\n  }, [duckConn.conn, schema]);\n\n  useEffect(() => {\n    void fetchTables();\n  }, [fetchTables]);\n\n  const runQuery = async (q: string) => {\n    const conn = duckConn.conn;\n    try {\n      setError(null);\n      setLoading(true);\n      await conn.query(`SET search_path = ${schema}`);\n      const results = await conn.query(q);\n      await conn.query(`SET search_path = main`);\n      setResults(results);\n    } catch (e) {\n      setResults(undefined);\n      setError(\n        (e instanceof DuckQueryError\n          ? e.getMessageForUser()\n          : 'Query failed') ?? e,\n      );\n      console.error(e);\n    } finally {\n      setLoading(false);\n    }\n  };\n\n  const handleSelectTable = (table: string) => {\n    setSelectedTable(table);\n  };\n\n  const handleRunQuery = async () => {\n    setSelectedTable(undefined);\n    const textarea = document.querySelector(\n      `textarea[id=\"${sqlEditorConfig.selectedQueryId}\"]`,\n    );\n    const selectedText =\n      textarea instanceof HTMLTextAreaElement\n        ? textarea?.value.substring(\n            textarea.selectionStart,\n            textarea.selectionEnd,\n          )\n        : undefined;\n\n    const queryToRun = selectedText || currentQuery;\n    await runQuery(queryToRun);\n    void fetchTables();\n  };\n\n  const getQueryIndexById = (id: string) => {\n    return sqlEditorConfig.queries.findIndex((q) => q.id === id);\n  };\n\n  const getCurrentQueryIndex = () => {\n    return getQueryIndexById(sqlEditorConfig.selectedQueryId);\n  };\n\n  const handleTabChange = (value: string) => {\n    onChangeSqlEditorConfig({\n      ...sqlEditorConfig,\n      selectedQueryId: value,\n    });\n  };\n\n  const handleUpdateQuery = (e: React.ChangeEvent<HTMLTextAreaElement>) => {\n    if (!sqlEditorConfig) return;\n\n    const currentIndex = getCurrentQueryIndex();\n    const newQueries = [...sqlEditorConfig.queries];\n    if (!newQueries[currentIndex]) return;\n    newQueries[currentIndex] = {\n      ...newQueries[currentIndex],\n      query: e.target.value,\n    };\n\n    onChangeSqlEditorConfig({\n      ...sqlEditorConfig,\n      queries: newQueries,\n    });\n  };\n  const handleRunQueryRef = useRef(handleRunQuery);\n  handleRunQueryRef.current = handleRunQuery;\n\n  useEffect(() => {\n    const handleKeyDown = (evt: Event) => {\n      if (\n        evt instanceof KeyboardEvent &&\n        evt.key === 'Enter' &&\n        (evt.metaKey || evt.ctrlKey || evt.shiftKey)\n      ) {\n        void handleRunQueryRef.current();\n      }\n    };\n    globalThis.addEventListener('keydown', handleKeyDown);\n    return () => {\n      globalThis.removeEventListener('keydown', handleKeyDown);\n    };\n  }, []);\n\n  const handleExport = () => {\n    if (!results) return;\n    const blob = new Blob([csvFormat(results.toArray())], {\n      type: 'text/plain;charset=utf-8',\n    });\n    saveAs(blob, `export-${genRandomStr(5)}.csv`);\n  };\n\n  const [createTableModalOpen, setCreateTableModalOpen] = useState(false);\n\n  const handleCreateTable = useCallback(() => {\n    setCreateTableModalOpen(true);\n  }, []);\n\n  const handleToggleDocs = useCallback(() => {\n    setShowDocs(!showDocs);\n  }, [showDocs]);\n\n  const currentQuery =\n    sqlEditorConfig.queries[getCurrentQueryIndex()]?.query ?? DEFAULT_QUERY;\n\n  const [queryToDelete, setQueryToDelete] = useState<string | null>(null);\n\n  const [queryToRename, setQueryToRename] = useState<{\n    id: string;\n    name: string;\n  } | null>(null);\n\n  const handleStartRename = (\n    queryId: string,\n    currentName: string,\n    event: React.MouseEvent,\n  ) => {\n    event.preventDefault();\n    setQueryToRename({id: queryId, name: currentName});\n  };\n\n  const handleFinishRename = (newName: string) => {\n    if (queryToRename) {\n      const newQueries = sqlEditorConfig.queries.map((q) =>\n        q.id === queryToRename.id ? {...q, name: newName || q.name} : q,\n      );\n      onChangeSqlEditorConfig({\n        ...sqlEditorConfig,\n        queries: newQueries,\n      });\n    }\n    setQueryToRename(null);\n  };\n\n  const handleDeleteQuery = (queryId: string, event: React.MouseEvent) => {\n    event.stopPropagation();\n    const currentIndex = getQueryIndexById(queryId);\n    setQueryToDelete(queryId);\n\n    // Pre-select the previous query if we're deleting the current one\n    if (queryId === sqlEditorConfig.selectedQueryId && currentIndex > 0) {\n      const prevId = sqlEditorConfig.queries[currentIndex - 1]?.id;\n      if (prevId) {\n        onChangeSqlEditorConfig({\n          ...sqlEditorConfig,\n          selectedQueryId: prevId,\n        });\n      }\n    }\n  };\n\n  const handleNewQuery = () => {\n    const newQueries = [...sqlEditorConfig.queries];\n    const newQuery = {\n      id: genRandomStr(8),\n      name: generateUniqueName(\n        'Untitled',\n        newQueries.map((q) => q.name),\n      ),\n      query: DEFAULT_QUERY,\n    };\n    newQueries.push(newQuery);\n\n    onChangeSqlEditorConfig({\n      ...sqlEditorConfig,\n      queries: newQueries,\n      selectedQueryId: newQuery.id,\n    });\n  };\n\n  return (\n    <>\n      <div className=\"absolute right-12 top-2\">\n        {documentationPanel ? (\n          <Button\n            size=\"sm\"\n            variant={showDocs ? 'secondary' : 'outline'}\n            onClick={handleToggleDocs}\n          >\n            <BookOpenIcon className=\"w-4 h-4 mr-2\" />\n            SQL reference\n          </Button>\n        ) : (\n          <a\n            href=\"https://duckdb.org/docs/sql/introduction\"\n            target=\"_blank\"\n            rel=\"noreferrer\"\n          >\n            <Button size=\"sm\" variant={'outline'}>\n              <BookOpenIcon className=\"w-4 h-4 mr-2\" />\n              SQL reference\n            </Button>\n          </a>\n        )}\n      </div>\n      <div className=\"flex flex-col w-full gap-2\">\n        <div className=\"flex items-center gap-2 ml-1 mr-10 mb-2\">\n          <h2 className=\"text-lg font-semibold\">SQL Editor</h2>\n        </div>\n        <div className=\"flex-grow h-full bg-muted\">\n          <ResizablePanelGroup direction=\"horizontal\" className=\"h-full\">\n            <ResizablePanel defaultSize={showDocs ? 50 : 80}>\n              <ResizablePanelGroup direction=\"vertical\" className=\"h-full\">\n                <ResizablePanel defaultSize={50} className=\"flex flex-row\">\n                  <ResizablePanelGroup direction=\"horizontal\">\n                    <ResizablePanel defaultSize={20}>\n                      {tablesLoading ? (\n                        <SpinnerPane h=\"100%\" />\n                      ) : tablesError ? (\n                        <div className=\"p-4 text-red-500\">\n                          Error loading tables: {tablesError.message}\n                        </div>\n                      ) : (\n                        <TablesList\n                          schema=\"information_schema\"\n                          tableNames={tables}\n                          selectedTable={selectedTable}\n                          onSelect={handleSelectTable}\n                        />\n                      )}\n                    </ResizablePanel>\n                    <ResizableHandle withHandle />\n                    <ResizablePanel defaultSize={80}>\n                      <Tabs\n                        value={sqlEditorConfig.selectedQueryId}\n                        onValueChange={handleTabChange}\n                        className=\"flex flex-col flex-grow overflow-hidden\"\n                      >\n                        <div className=\"flex items-center gap-2 border-b border-border\">\n                          <Button\n                            size=\"sm\"\n                            onClick={() => void handleRunQuery()}\n                            className=\"uppercase\"\n                          >\n                            <PlayIcon className=\"w-4 h-4 mr-2\" />\n                            Run\n                          </Button>\n                          <TabsList className=\"flex-1\">\n                            {sqlEditorConfig.queries.map((q) => (\n                              <div key={q.id} className=\"relative\">\n                                <TabsTrigger\n                                  value={q.id}\n                                  className=\"min-w-[60px] px-6 pr-8\"\n                                >\n                                  {q.name}\n                                </TabsTrigger>\n                                <DropdownMenu>\n                                  <DropdownMenuTrigger asChild>\n                                    <div\n                                      className=\"absolute right-0 top-1/2 -translate-y-1/2 h-6 w-6 flex items-center justify-center cursor-pointer hover:bg-accent rounded-sm\"\n                                      onClick={(e) => e.stopPropagation()}\n                                    >\n                                      <MoreVerticalIcon className=\"h-3 w-3\" />\n                                    </div>\n                                  </DropdownMenuTrigger>\n                                  <DropdownMenuContent>\n                                    <DropdownMenuItem\n                                      onClick={(e) => {\n                                        e.stopPropagation();\n                                        handleStartRename(q.id, q.name, e);\n                                      }}\n                                    >\n                                      Rename\n                                    </DropdownMenuItem>\n                                    {sqlEditorConfig.queries.length > 1 && (\n                                      <DropdownMenuItem\n                                        onClick={(e) => {\n                                          e.stopPropagation();\n                                          handleDeleteQuery(q.id, e);\n                                        }}\n                                        className=\"text-red-500\"\n                                      >\n                                        Delete\n                                      </DropdownMenuItem>\n                                    )}\n                                  </DropdownMenuContent>\n                                </DropdownMenu>\n                              </div>\n                            ))}\n                          </TabsList>\n                          <Button\n                            size=\"icon\"\n                            variant=\"ghost\"\n                            onClick={handleNewQuery}\n                            className=\"ml-2\"\n                          >\n                            <PlusIcon className=\"h-4 w-4\" />\n                          </Button>\n                        </div>\n                        {sqlEditorConfig.queries.map((q) => (\n                          <TabsContent\n                            key={q.id}\n                            value={q.id}\n                            className=\"flex-grow data-[state=active]:flex-grow\"\n                          >\n                            <Textarea\n                              id={q.id}\n                              value={q.query}\n                              onChange={handleUpdateQuery}\n                              className=\"h-full font-mono text-sm resize-none bg-muted\"\n                            />\n                          </TabsContent>\n                        ))}\n                      </Tabs>\n                    </ResizablePanel>\n                  </ResizablePanelGroup>\n                </ResizablePanel>\n                <ResizableHandle withHandle />\n                <ResizablePanel defaultSize={50}>\n                  <div className=\"h-full overflow-hidden bg-muted text-sm\">\n                    {loading ? (\n                      <SpinnerPane h=\"100%\" />\n                    ) : selectedTable ? (\n                      <QueryDataTable\n                        query={`SELECT * FROM ${schema}.${escapeId(selectedTable)}`}\n                      />\n                    ) : error ? (\n                      <div className=\"w-full h-full p-5 overflow-auto\">\n                        <pre className=\"text-xs leading-tight text-red-500\">\n                          {error}\n                        </pre>\n                      </div>\n                    ) : resultsTableData ? (\n                      <div className=\"flex-grow overflow-hidden flex flex-col relative\">\n                        <DataTableVirtualized {...resultsTableData} />\n                        <div className=\"absolute bottom-0 right-0 flex gap-2 p-2\">\n                          <Button\n                            size=\"sm\"\n                            disabled={!resultsTableData}\n                            onClick={handleCreateTable}\n                          >\n                            <PlusIcon className=\"w-4 h-4 mr-2\" />\n                            Create table\n                          </Button>\n                          <Button\n                            size=\"sm\"\n                            disabled={!results}\n                            onClick={handleExport}\n                          >\n                            <DownloadIcon className=\"w-4 h-4 mr-2\" />\n                            Export\n                          </Button>\n                        </div>\n                      </div>\n                    ) : null}\n                  </div>\n                </ResizablePanel>\n              </ResizablePanelGroup>\n            </ResizablePanel>\n            {showDocs && (\n              <>\n                <ResizableHandle withHandle />\n                <ResizablePanel defaultSize={30}>\n                  {documentationPanel}\n                </ResizablePanel>\n              </>\n            )}\n          </ResizablePanelGroup>\n        </div>\n        <CreateTableModal\n          query={currentQuery}\n          isOpen={createTableModalOpen}\n          onClose={() => setCreateTableModalOpen(false)}\n          onAddOrUpdateSqlQuery={addOrUpdateSqlQuery}\n        />\n        <DeleteSqlQueryModal\n          isOpen={queryToDelete !== null}\n          onClose={() => setQueryToDelete(null)}\n          onConfirm={() => {\n            const newQueries = sqlEditorConfig.queries.filter(\n              (q) => q.id !== queryToDelete,\n            );\n            const deletedIndex = getQueryIndexById(queryToDelete!);\n\n            const selectedQueryId =\n              newQueries[Math.min(deletedIndex, newQueries.length - 1)]?.id ||\n              newQueries[0]?.id;\n            if (selectedQueryId) {\n              onChangeSqlEditorConfig({\n                ...sqlEditorConfig,\n                queries: newQueries,\n                selectedQueryId,\n              });\n            }\n            setQueryToDelete(null);\n          }}\n        />\n        <RenameSqlQueryModal\n          isOpen={queryToRename !== null}\n          onClose={() => setQueryToRename(null)}\n          initialName={queryToRename?.name ?? ''}\n          onRename={handleFinishRename}\n        />\n      </div>\n    </>\n  );\n};\n\nexport default SqlEditor;\n"]}
+{"version":3,"file":"SqlEditor.js","sourceRoot":"","sources":["../src/SqlEditor.tsx"],"names":[],"mappings":"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","sourcesContent":["import {DataTableVirtualized, QueryDataTable} from '@sqlrooms/data-table';\nimport {escapeId} from '@sqlrooms/duckdb';\nimport {\n  Button,\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n  ResizableHandle,\n  ResizablePanel,\n  ResizablePanelGroup,\n  SpinnerPane,\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from '@sqlrooms/ui';\nimport {\n  BookOpenIcon,\n  DownloadIcon,\n  MoreVerticalIcon,\n  PlayIcon,\n  PlusIcon,\n} from 'lucide-react';\nimport React, {useCallback, useEffect, useState} from 'react';\nimport CreateTableModal from './CreateTableModal';\nimport DeleteSqlQueryModal from './DeleteSqlQueryModal';\nimport RenameSqlQueryModal from './RenameSqlQueryModal';\nimport {useStoreWithSqlEditor} from './SqlEditorSlice';\nimport {TablesList} from './TablesList';\nimport {SqlMonacoEditor} from './SqlMonacoEditor';\nimport type * as Monaco from 'monaco-editor';\nimport {useTableManagement, useQueryExecution, useMonacoEditor} from './hooks';\nimport {useBaseProjectStore} from '@sqlrooms/project-builder';\n\n// Define the types for Monaco Editor\ntype EditorInstance = Monaco.editor.IStandaloneCodeEditor;\ntype MonacoInstance = typeof Monaco;\n\nconst DEFAULT_QUERY = '';\n\nexport type SqlEditorProps = {\n  /** The database schema to use for queries. Defaults to 'main' */\n  schema?: string;\n\n  /** Whether the SQL editor is currently visible */\n  isOpen: boolean;\n\n  /** Optional component to render SQL documentation in the side panel */\n  documentationPanel?: React.ReactNode;\n\n  /** Callback fired when the SQL editor should be closed */\n  onClose: () => void;\n};\n\n/**\n * A full-featured SQL editor component with query execution, table management, and results visualization.\n *\n * Features:\n * - Multiple query tabs with save/rename/delete functionality\n * - Query execution with results displayed in a data table\n * - Table browser showing available tables in the schema\n * - Export results to CSV\n * - Create new tables from query results\n * - Optional SQL documentation panel\n * - Keyboard shortcuts (Cmd/Ctrl + Enter to run queries)\n *\n */\nconst SqlEditorBase: React.FC<SqlEditorProps> = (props) => {\n  const {schema = 'main', documentationPanel} = props;\n\n  // Store access - directly use the selector\n  const addOrUpdateSqlQueryDataSource = useBaseProjectStore(\n    (state) => state.project.addOrUpdateSqlQueryDataSource,\n  );\n\n  // Get query data and methods directly from the store\n  const queries = useStoreWithSqlEditor(\n    (s) => s.project.config.sqlEditor.queries,\n  );\n  const selectedQueryId = useStoreWithSqlEditor(\n    (s) => s.project.config.sqlEditor.selectedQueryId,\n  );\n  const getCurrentQuery = useStoreWithSqlEditor(\n    (s) => s.sqlEditor.getCurrentQuery,\n  );\n  const setSelectedQueryId = useStoreWithSqlEditor(\n    (s) => s.sqlEditor.setSelectedQueryId,\n  );\n  const updateQueryText = useStoreWithSqlEditor(\n    (s) => s.sqlEditor.updateQueryText,\n  );\n  const createQueryTab = useStoreWithSqlEditor(\n    (s) => s.sqlEditor.createQueryTab,\n  );\n  const deleteQueryTab = useStoreWithSqlEditor(\n    (s) => s.sqlEditor.deleteQueryTab,\n  );\n  const renameQueryTab = useStoreWithSqlEditor(\n    (s) => s.sqlEditor.renameQueryTab,\n  );\n\n  // UI state\n  const [showDocs, setShowDocs] = useState(false);\n  const [createTableModalOpen, setCreateTableModalOpen] = useState(false);\n  const [lastExecutedQuery, setLastExecutedQuery] = useState<string>('');\n\n  // Local state for modals\n  const [queryToDelete, setQueryToDelete] = useState<string | null>(null);\n  const [queryToRename, setQueryToRename] = useState<{\n    id: string;\n    name: string;\n  } | null>(null);\n\n  // Custom hooks\n  const {\n    tables,\n    tablesLoading,\n    tablesError,\n    tableSchemas,\n    selectedTable,\n    fetchTables,\n    handleSelectTable,\n  } = useTableManagement();\n\n  const {results, resultsTableData, loading, error, runQuery, exportResults} =\n    useQueryExecution(schema);\n\n  const {handleEditorMount, getQueryText, setRunQueryHandler} =\n    useMonacoEditor();\n\n  // Get the current query text\n  const currentQuery = getCurrentQuery(DEFAULT_QUERY);\n\n  // Handler functions for query tab management\n  const handleTabChange = useCallback(\n    (value: string) => {\n      setSelectedQueryId(value);\n    },\n    [setSelectedQueryId],\n  );\n\n  const handleUpdateQuery = useCallback(\n    (value: string | undefined) => {\n      if (!value) return;\n      updateQueryText(selectedQueryId, value);\n    },\n    [selectedQueryId, updateQueryText],\n  );\n\n  const handleNewQuery = useCallback(() => {\n    return createQueryTab(DEFAULT_QUERY);\n  }, [createQueryTab]);\n\n  const handleStartRename = useCallback(\n    (queryId: string, currentName: string, event: React.MouseEvent) => {\n      event.preventDefault();\n      setQueryToRename({id: queryId, name: currentName});\n    },\n    [],\n  );\n\n  const handleFinishRename = useCallback(\n    (newName: string) => {\n      if (queryToRename) {\n        renameQueryTab(queryToRename.id, newName);\n      }\n      setQueryToRename(null);\n    },\n    [queryToRename, renameQueryTab],\n  );\n\n  const handleDeleteQuery = useCallback(\n    (queryId: string, event: React.MouseEvent) => {\n      event.stopPropagation();\n      setQueryToDelete(queryId);\n    },\n    [],\n  );\n\n  const handleConfirmDeleteQuery = useCallback(() => {\n    if (queryToDelete) {\n      deleteQueryTab(queryToDelete);\n      setQueryToDelete(null);\n    }\n  }, [queryToDelete, deleteQueryTab]);\n\n  // Handle run query logic\n  const handleRunQuery = useCallback(async () => {\n    // Clear selected table when running a query\n    handleSelectTable(undefined);\n\n    // Get the query text (either selected text or the entire query)\n    const queryToRun = getQueryText(selectedQueryId, currentQuery);\n\n    // Store the query that's being executed\n    setLastExecutedQuery(queryToRun);\n\n    // Run the query and refresh tables list\n    await runQuery(queryToRun);\n  }, [\n    handleSelectTable,\n    getQueryText,\n    selectedQueryId,\n    currentQuery,\n    runQuery,\n    setLastExecutedQuery,\n  ]);\n\n  // Set up the run query handler reference for keyboard shortcuts\n  useEffect(() => {\n    setRunQueryHandler(handleRunQuery);\n  }, [handleRunQuery, setRunQueryHandler]);\n\n  // Check if table schemas are empty and refetch if needed\n  useEffect(() => {\n    if (Object.keys(tableSchemas).length === 0) {\n      void fetchTables();\n    }\n  }, [fetchTables, tableSchemas]);\n\n  // Handle toggle documentation panel\n  const handleToggleDocs = useCallback(() => {\n    setShowDocs(!showDocs);\n  }, [showDocs]);\n\n  // Handle create table from query results\n  const handleCreateTable = useCallback(() => {\n    setCreateTableModalOpen(true);\n  }, []);\n\n  return (\n    <div className=\"relative flex flex-col h-full w-full overflow-hidden\">\n      <div className=\"absolute right-12 top-0\">\n        {documentationPanel ? (\n          <Button\n            size=\"sm\"\n            variant={showDocs ? 'secondary' : 'outline'}\n            onClick={handleToggleDocs}\n          >\n            <BookOpenIcon className=\"w-4 h-4 mr-2\" />\n            SQL reference\n          </Button>\n        ) : (\n          <a\n            href=\"https://duckdb.org/docs/sql/introduction\"\n            target=\"_blank\"\n            rel=\"noreferrer\"\n          >\n            <Button size=\"sm\" variant={'outline'}>\n              <BookOpenIcon className=\"w-4 h-4 mr-2\" />\n              SQL reference\n            </Button>\n          </a>\n        )}\n      </div>\n      <div className=\"flex flex-col w-full gap-2 h-full\">\n        <div className=\"flex items-center gap-2 ml-1 mr-10 mb-2\">\n          <h2 className=\"text-lg font-semibold\">SQL Editor</h2>\n        </div>\n        <div className=\"flex-grow h-full bg-muted\">\n          <ResizablePanelGroup direction=\"horizontal\" className=\"h-full\">\n            {/* Main panel - takes full width when docs not shown, or 70% when docs shown */}\n            <ResizablePanel defaultSize={showDocs ? 70 : 100}>\n              <ResizablePanelGroup direction=\"vertical\" className=\"h-full\">\n                <ResizablePanel defaultSize={50} className=\"flex flex-row\">\n                  <ResizablePanelGroup direction=\"horizontal\">\n                    <ResizablePanel defaultSize={20}>\n                      {tablesLoading ? (\n                        <SpinnerPane h=\"100%\" />\n                      ) : tablesError ? (\n                        <div className=\"p-4 text-red-500\">\n                          Error loading tables: {tablesError.message}\n                        </div>\n                      ) : (\n                        <TablesList\n                          schema=\"information_schema\"\n                          tableNames={tables}\n                          selectedTable={selectedTable}\n                          onSelect={handleSelectTable}\n                        />\n                      )}\n                    </ResizablePanel>\n                    <ResizableHandle withHandle />\n                    <ResizablePanel\n                      defaultSize={80}\n                      className=\"flex flex-col overflow-hidden\"\n                    >\n                      <Tabs\n                        value={selectedQueryId}\n                        onValueChange={handleTabChange}\n                        className=\"flex flex-col h-full overflow-hidden\"\n                      >\n                        <div className=\"flex items-center gap-2 border-b border-border\">\n                          <Button\n                            size=\"sm\"\n                            onClick={() => void handleRunQuery()}\n                            className=\"uppercase\"\n                          >\n                            <PlayIcon className=\"w-4 h-4 mr-2\" />\n                            Run\n                          </Button>\n                          <TabsList className=\"flex-1\">\n                            {queries.map((q: any) => (\n                              <div key={q.id} className=\"relative\">\n                                <TabsTrigger\n                                  value={q.id}\n                                  className=\"min-w-[60px] px-6 pr-8\"\n                                >\n                                  {q.name}\n                                </TabsTrigger>\n                                <DropdownMenu>\n                                  <DropdownMenuTrigger asChild>\n                                    <div\n                                      className=\"absolute right-0 top-1/2 -translate-y-1/2 h-6 w-6 flex items-center justify-center cursor-pointer hover:bg-accent rounded-sm\"\n                                      onClick={(e) => e.stopPropagation()}\n                                    >\n                                      <MoreVerticalIcon className=\"h-3 w-3\" />\n                                    </div>\n                                  </DropdownMenuTrigger>\n                                  <DropdownMenuContent>\n                                    <DropdownMenuItem\n                                      onClick={(e) => {\n                                        e.stopPropagation();\n                                        handleStartRename(q.id, q.name, e);\n                                      }}\n                                    >\n                                      Rename\n                                    </DropdownMenuItem>\n                                    {queries.length > 1 && (\n                                      <DropdownMenuItem\n                                        onClick={(e) => {\n                                          e.stopPropagation();\n                                          handleDeleteQuery(q.id, e);\n                                        }}\n                                        className=\"text-red-500\"\n                                      >\n                                        Delete\n                                      </DropdownMenuItem>\n                                    )}\n                                  </DropdownMenuContent>\n                                </DropdownMenu>\n                              </div>\n                            ))}\n                          </TabsList>\n                          <Button\n                            size=\"icon\"\n                            variant=\"ghost\"\n                            onClick={handleNewQuery}\n                            className=\"ml-2\"\n                          >\n                            <PlusIcon className=\"h-4 w-4\" />\n                          </Button>\n                        </div>\n                        {queries.map((q: any) => (\n                          <TabsContent\n                            key={q.id}\n                            value={q.id}\n                            className=\"relative flex-grow data-[state=active]:flex flex-col h-full\"\n                          >\n                            <div className=\"flex-grow h-full w-full absolute inset-0\">\n                              <SqlMonacoEditor\n                                value={q.query}\n                                onChange={handleUpdateQuery}\n                                className=\"h-full w-full flex-grow\"\n                                options={{\n                                  scrollBeyondLastLine: false,\n                                  automaticLayout: true,\n                                  minimap: {enabled: false},\n                                  wordWrap: 'on',\n                                  // Enable keyboard shortcuts\n                                  quickSuggestions: true,\n                                  suggestOnTriggerCharacters: true,\n                                }}\n                                onMount={(\n                                  editor: EditorInstance,\n                                  monaco: MonacoInstance,\n                                ) => {\n                                  handleEditorMount(\n                                    editor,\n                                    monaco,\n                                    q.id,\n                                    handleRunQuery,\n                                  );\n                                }}\n                                tableSchemas={tableSchemas}\n                                getLatestSchemas={() => {\n                                  // If tableSchemas is empty, try to fetch tables\n                                  if (Object.keys(tableSchemas).length === 0) {\n                                    // We can't await here, but we can trigger the fetch\n                                    // This will update the state for next time\n                                    void fetchTables();\n                                  }\n                                  return {tableSchemas};\n                                }}\n                              />\n                            </div>\n                          </TabsContent>\n                        ))}\n                      </Tabs>\n                    </ResizablePanel>\n                  </ResizablePanelGroup>\n                </ResizablePanel>\n                <ResizableHandle withHandle />\n                <ResizablePanel\n                  defaultSize={50}\n                  className=\"overflow-hidden bg-muted text-sm\"\n                >\n                  {loading ? (\n                    <SpinnerPane h=\"100%\" />\n                  ) : selectedTable ? (\n                    <QueryDataTable\n                      query={`SELECT * FROM ${schema}.${escapeId(selectedTable)}`}\n                    />\n                  ) : error ? (\n                    <div className=\"w-full h-full p-5 overflow-auto\">\n                      <pre className=\"text-xs leading-tight text-red-500\">\n                        {error}\n                      </pre>\n                    </div>\n                  ) : resultsTableData ? (\n                    <div className=\"flex-grow overflow-hidden flex flex-col relative w-full h-full\">\n                      <DataTableVirtualized {...resultsTableData} />\n                      <div className=\"absolute bottom-0 right-0 flex gap-2\">\n                        <Button\n                          size=\"sm\"\n                          disabled={!resultsTableData}\n                          onClick={handleCreateTable}\n                        >\n                          <PlusIcon className=\"w-4 h-4 mr-2\" />\n                          Create table\n                        </Button>\n                        <Button\n                          size=\"sm\"\n                          disabled={!results}\n                          onClick={exportResults}\n                        >\n                          <DownloadIcon className=\"w-4 h-4 mr-2\" />\n                          Export\n                        </Button>\n                      </div>\n                    </div>\n                  ) : null}\n                </ResizablePanel>\n              </ResizablePanelGroup>\n            </ResizablePanel>\n            {showDocs && (\n              <>\n                <ResizableHandle withHandle />\n                {/* Documentation panel - 30% width */}\n                <ResizablePanel defaultSize={30}>\n                  {documentationPanel}\n                </ResizablePanel>\n              </>\n            )}\n          </ResizablePanelGroup>\n        </div>\n        <CreateTableModal\n          query={lastExecutedQuery || currentQuery}\n          isOpen={createTableModalOpen}\n          onClose={() => setCreateTableModalOpen(false)}\n          onAddOrUpdateSqlQuery={addOrUpdateSqlQueryDataSource}\n        />\n        <DeleteSqlQueryModal\n          isOpen={queryToDelete !== null}\n          onClose={() => setQueryToDelete(null)}\n          onConfirm={handleConfirmDeleteQuery}\n        />\n        <RenameSqlQueryModal\n          isOpen={queryToRename !== null}\n          onClose={() => setQueryToRename(null)}\n          initialName={queryToRename?.name ?? ''}\n          onRename={handleFinishRename}\n        />\n      </div>\n    </div>\n  );\n};\n\n// Wrap with React.memo to prevent unnecessary re-renders\nconst SqlEditor = React.memo(SqlEditorBase);\n\nexport default SqlEditor;\n"]}

package/dist/SqlEditorModal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SqlEditorModal.d.ts","sourceRoot":"","sources":["../src/SqlEditorModal.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAiB,MAAM,OAAO,CAAC;AACtC,OAAkB,EAAC,cAAc,EAAC,MAAM,aAAa,CAAC;AAEtD;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,QAAA,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAe5C,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"SqlEditorModal.d.ts","sourceRoot":"","sources":["../src/SqlEditorModal.tsx"],"names":[],"mappings":"AAWA,OAAO,KAA8B,MAAM,OAAO,CAAC;AACnD,OAAkB,EAAC,cAAc,EAAC,MAAM,aAAa,CAAC;AAEtD;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,QAAA,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CA2B5C,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/SqlEditorModal.js

@@ -1,8 +1,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { SpinnerPane } from '@sqlrooms/ui';
-import { Dialog, DialogContent, DialogHeader, DialogOverlay, DialogTitle, } from '@sqlrooms/ui';
-import { Suspense } from 'react';
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogOverlay, DialogTitle, SpinnerPane, } from '@sqlrooms/ui';
+import { Suspense, useCallback } from 'react';
 import SqlEditor from './SqlEditor';
 /**
  * A modal wrapper for the SQL Editor component that provides a full-screen dialog interface.
@@ -35,7 +34,12 @@ import SqlEditor from './SqlEditor';
  */
 const SqlEditorModal = (props) => {
     const { isOpen, onClose } = props;
-    return (_jsxs(Dialog, { open: isOpen, onOpenChange: (open) => !open && onClose(), children: [_jsx(DialogOverlay, { className: "bg-background/80" }), _jsxs(DialogContent, { className: "max-w-[100vw] max-h-[100vh] w-[100vw] h-[100vh] p-3", children: [_jsx(DialogHeader, { className: "sr-only", children: _jsx(DialogTitle, { children: "SQL Editor" }) }), _jsx(Suspense, { fallback: _jsx(SpinnerPane, { h: "100%" }), children: _jsx(SqlEditor, { ...props }) })] })] }));
+    // Memoize the handler to prevent re-renders
+    const handleOpenChange = useCallback((open) => {
+        if (!open)
+            onClose();
+    }, [onClose]);
+    return (_jsxs(Dialog, { open: isOpen, onOpenChange: handleOpenChange, children: [_jsx(DialogOverlay, { className: "bg-background/80" }), _jsxs(DialogContent, { className: "max-w-[100vw] max-h-[100vh] w-[100vw] h-[100vh] p-3", children: [_jsxs(DialogHeader, { className: "sr-only", children: [_jsx(DialogTitle, { children: "SQL Editor" }), _jsx(DialogDescription, { children: "SQL editor for querying and managing database tables" })] }), _jsx(Suspense, { fallback: _jsx(SpinnerPane, { h: "100%" }), children: _jsx(SqlEditor, { ...props }) })] })] }));
 };
 export default SqlEditorModal;
 //# sourceMappingURL=SqlEditorModal.js.map

package/dist/SqlEditorModal.js.map

@@ -1 +1 @@
-{"version":3,"file":"SqlEditorModal.js","sourceRoot":"","sources":["../src/SqlEditorModal.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAC,WAAW,EAAC,MAAM,cAAc,CAAC;AACzC,OAAO,EACL,MAAM,EACN,aAAa,EACb,YAAY,EACZ,aAAa,EACb,WAAW,GACZ,MAAM,cAAc,CAAC;AACtB,OAAc,EAAC,QAAQ,EAAC,MAAM,OAAO,CAAC;AACtC,OAAO,SAA2B,MAAM,aAAa,CAAC;AAEtD;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,MAAM,cAAc,GAA6B,CAAC,KAAK,EAAE,EAAE;IACzD,MAAM,EAAC,MAAM,EAAE,OAAO,EAAC,GAAG,KAAK,CAAC;IAChC,OAAO,CACL,MAAC,MAAM,IAAC,IAAI,EAAE,MAAM,EAAE,YAAY,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,IAAI,OAAO,EAAE,aAC9D,KAAC,aAAa,IAAC,SAAS,EAAC,kBAAkB,GAAG,EAC9C,MAAC,aAAa,IAAC,SAAS,EAAC,qDAAqD,aAC5E,KAAC,YAAY,IAAC,SAAS,EAAC,SAAS,YAC/B,KAAC,WAAW,6BAAyB,GACxB,EACf,KAAC,QAAQ,IAAC,QAAQ,EAAE,KAAC,WAAW,IAAC,CAAC,EAAC,MAAM,GAAG,YAC1C,KAAC,SAAS,OAAK,KAAK,GAAI,GACf,IACG,IACT,CACV,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["'use client';\n\nimport {SpinnerPane} from '@sqlrooms/ui';\nimport {\n  Dialog,\n  DialogContent,\n  DialogHeader,\n  DialogOverlay,\n  DialogTitle,\n} from '@sqlrooms/ui';\nimport React, {Suspense} from 'react';\nimport SqlEditor, {SqlEditorProps} from './SqlEditor';\n\n/**\n * A modal wrapper for the SQL Editor component that provides a full-screen dialog interface.\n *\n * This component wraps the main SqlEditor component in a modal dialog, making it suitable for\n * overlay/popup usage scenarios. It inherits all props from SqlEditorProps and handles the\n * modal-specific behavior.\n *\n * @example\n * ```tsx\n * <SqlEditorModal\n *   isOpen={true}\n *   onClose={() => setIsOpen(false)}\n *   sqlEditorConfig={config}\n *   onChange={handleConfigChange}\n * />\n * ```\n *\n * @see {@link SqlEditor} for detailed documentation of all available props\n *\n * @props {@link SqlEditorProps}\n * The component accepts all props from SqlEditorProps:\n * - `isOpen` - Whether the SQL editor modal is currently visible\n * - `onClose` - Callback fired when the modal should be closed\n * - `sqlEditorConfig` - Configuration object containing queries and selected query state\n * - `onChange` - Callback fired when the SQL editor configuration changes\n * - `schema` - Optional database schema to use for queries (defaults to 'main')\n * - `documentationPanel` - Optional component to render SQL documentation in the side panel\n * - `onAddOrUpdateSqlQuery` - Callback fired when a new table should be created from query results\n */\nconst SqlEditorModal: React.FC<SqlEditorProps> = (props) => {\n  const {isOpen, onClose} = props;\n  return (\n    <Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>\n      <DialogOverlay className=\"bg-background/80\" />\n      <DialogContent className=\"max-w-[100vw] max-h-[100vh] w-[100vw] h-[100vh] p-3\">\n        <DialogHeader className=\"sr-only\">\n          <DialogTitle>SQL Editor</DialogTitle>\n        </DialogHeader>\n        <Suspense fallback={<SpinnerPane h=\"100%\" />}>\n          <SqlEditor {...props} />\n        </Suspense>\n      </DialogContent>\n    </Dialog>\n  );\n};\n\nexport default SqlEditorModal;\n"]}
+{"version":3,"file":"SqlEditorModal.js","sourceRoot":"","sources":["../src/SqlEditorModal.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EACL,MAAM,EACN,aAAa,EACb,iBAAiB,EACjB,YAAY,EACZ,aAAa,EACb,WAAW,EACX,WAAW,GACZ,MAAM,cAAc,CAAC;AACtB,OAAc,EAAC,QAAQ,EAAE,WAAW,EAAC,MAAM,OAAO,CAAC;AACnD,OAAO,SAA2B,MAAM,aAAa,CAAC;AAEtD;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,MAAM,cAAc,GAA6B,CAAC,KAAK,EAAE,EAAE;IACzD,MAAM,EAAC,MAAM,EAAE,OAAO,EAAC,GAAG,KAAK,CAAC;IAEhC,4CAA4C;IAC5C,MAAM,gBAAgB,GAAG,WAAW,CAClC,CAAC,IAAa,EAAE,EAAE;QAChB,IAAI,CAAC,IAAI;YAAE,OAAO,EAAE,CAAC;IACvB,CAAC,EACD,CAAC,OAAO,CAAC,CACV,CAAC;IAEF,OAAO,CACL,MAAC,MAAM,IAAC,IAAI,EAAE,MAAM,EAAE,YAAY,EAAE,gBAAgB,aAClD,KAAC,aAAa,IAAC,SAAS,EAAC,kBAAkB,GAAG,EAC9C,MAAC,aAAa,IAAC,SAAS,EAAC,qDAAqD,aAC5E,MAAC,YAAY,IAAC,SAAS,EAAC,SAAS,aAC/B,KAAC,WAAW,6BAAyB,EACrC,KAAC,iBAAiB,uEAEE,IACP,EACf,KAAC,QAAQ,IAAC,QAAQ,EAAE,KAAC,WAAW,IAAC,CAAC,EAAC,MAAM,GAAG,YAC1C,KAAC,SAAS,OAAK,KAAK,GAAI,GACf,IACG,IACT,CACV,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["'use client';\n\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogOverlay,\n  DialogTitle,\n  SpinnerPane,\n} from '@sqlrooms/ui';\nimport React, {Suspense, useCallback} from 'react';\nimport SqlEditor, {SqlEditorProps} from './SqlEditor';\n\n/**\n * A modal wrapper for the SQL Editor component that provides a full-screen dialog interface.\n *\n * This component wraps the main SqlEditor component in a modal dialog, making it suitable for\n * overlay/popup usage scenarios. It inherits all props from SqlEditorProps and handles the\n * modal-specific behavior.\n *\n * @example\n * ```tsx\n * <SqlEditorModal\n *   isOpen={true}\n *   onClose={() => setIsOpen(false)}\n *   sqlEditorConfig={config}\n *   onChange={handleConfigChange}\n * />\n * ```\n *\n * @see {@link SqlEditor} for detailed documentation of all available props\n *\n * @props {@link SqlEditorProps}\n * The component accepts all props from SqlEditorProps:\n * - `isOpen` - Whether the SQL editor modal is currently visible\n * - `onClose` - Callback fired when the modal should be closed\n * - `sqlEditorConfig` - Configuration object containing queries and selected query state\n * - `onChange` - Callback fired when the SQL editor configuration changes\n * - `schema` - Optional database schema to use for queries (defaults to 'main')\n * - `documentationPanel` - Optional component to render SQL documentation in the side panel\n * - `onAddOrUpdateSqlQuery` - Callback fired when a new table should be created from query results\n */\nconst SqlEditorModal: React.FC<SqlEditorProps> = (props) => {\n  const {isOpen, onClose} = props;\n\n  // Memoize the handler to prevent re-renders\n  const handleOpenChange = useCallback(\n    (open: boolean) => {\n      if (!open) onClose();\n    },\n    [onClose],\n  );\n\n  return (\n    <Dialog open={isOpen} onOpenChange={handleOpenChange}>\n      <DialogOverlay className=\"bg-background/80\" />\n      <DialogContent className=\"max-w-[100vw] max-h-[100vh] w-[100vw] h-[100vh] p-3\">\n        <DialogHeader className=\"sr-only\">\n          <DialogTitle>SQL Editor</DialogTitle>\n          <DialogDescription>\n            SQL editor for querying and managing database tables\n          </DialogDescription>\n        </DialogHeader>\n        <Suspense fallback={<SpinnerPane h=\"100%\" />}>\n          <SqlEditor {...props} />\n        </Suspense>\n      </DialogContent>\n    </Dialog>\n  );\n};\n\nexport default SqlEditorModal;\n"]}