@sqlrooms/sql-editor 0.0.0

package/.turbo/turbo-build.log

@@ -0,0 +1,4 @@
+
+> @sqlrooms/sql-editor@0.0.0 build /Users/ilya/Workspace/sqlrooms/packages/sql-editor
+> tsc
+

package/.turbo/turbo-dev.log

@@ -0,0 +1,7 @@
+
+
+> @sqlrooms/sql-editor@1.0.0 dev /Users/ilya/Workspace/sqlrooms/packages/sql-editor
+> tsc -w
+
+[7:31:02 PM] Starting compilation in watch mode...
+

package/.turbo/turbo-lint.log

@@ -0,0 +1,16 @@
+
+> @sqlrooms/sql-editor@0.0.0 lint /Users/ilya/Workspace/sqlrooms/packages/sql-editor
+> eslint .
+
+
+/Users/ilya/Workspace/sqlrooms/packages/sql-editor/src/CreateTableModal.tsx
+   89:10  warning  Use "@ts-expect-error" instead of "@ts-ignore", as "@ts-ignore" will do nothing if the following line is error-free  @typescript-eslint/ban-ts-comment
+  114:15  warning  Use "@ts-expect-error" instead of "@ts-ignore", as "@ts-ignore" will do nothing if the following line is error-free  @typescript-eslint/ban-ts-comment
+  129:15  warning  Use "@ts-expect-error" instead of "@ts-ignore", as "@ts-ignore" will do nothing if the following line is error-free  @typescript-eslint/ban-ts-comment
+
+/Users/ilya/Workspace/sqlrooms/packages/sql-editor/src/RenameSqlQueryModal.tsx
+  58:10  warning  Use "@ts-expect-error" instead of "@ts-ignore", as "@ts-ignore" will do nothing if the following line is error-free  @typescript-eslint/ban-ts-comment
+  62:15  warning  Use "@ts-expect-error" instead of "@ts-ignore", as "@ts-ignore" will do nothing if the following line is error-free  @typescript-eslint/ban-ts-comment
+
+✖ 5 problems (0 errors, 5 warnings)
+

package/CHANGELOG.md

@@ -0,0 +1,8 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+
+
+**Note:** Version bump only for package @sqlrooms/sql-editor

package/LICENSE.md

@@ -0,0 +1,9 @@
+MIT License
+
+Copyright 2025 Ilya Boyandin
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/dist/CreateTableModal.d.ts

@@ -0,0 +1,12 @@
+import { SqlQueryDataSource } from '@sqlrooms/project-config';
+import { FC } from 'react';
+export type Props = {
+    query: string;
+    isOpen: boolean;
+    onClose: () => void;
+    editDataSource?: SqlQueryDataSource;
+    onAddOrUpdateSqlQuery: (tableName: string, query: string, oldTableName?: string) => Promise<void>;
+};
+declare const CreateTableModal: FC<Props>;
+export default CreateTableModal;
+//# sourceMappingURL=CreateTableModal.d.ts.map

package/dist/CreateTableModal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CreateTableModal.d.ts","sourceRoot":"","sources":["../src/CreateTableModal.tsx"],"names":[],"mappings":"AAoBA,OAAO,EACL,kBAAkB,EAEnB,MAAM,0BAA0B,CAAC;AAClC,OAAO,EAAC,EAAE,EAAc,MAAM,OAAO,CAAC;AAgBtC,MAAM,MAAM,KAAK,GAAG;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,cAAc,CAAC,EAAE,kBAAkB,CAAC;IACpC,qBAAqB,EAAE,CACrB,SAAS,EAAE,MAAM,EACjB,KAAK,EAAE,MAAM,EACb,YAAY,CAAC,EAAE,MAAM,KAClB,OAAO,CAAC,IAAI,CAAC,CAAC;CACpB,CAAC;AAEF,QAAA,MAAM,gBAAgB,EAAE,EAAE,CAAC,KAAK,CA0G/B,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/dist/CreateTableModal.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, Form, FormControl, FormField, FormItem, FormLabel, FormMessage, Input, Textarea, Alert, AlertDescription, } from '@sqlrooms/ui';
+import { DuckQueryError } from '@sqlrooms/duckdb';
+import { VALID_TABLE_OR_COLUMN_REGEX, } from '@sqlrooms/project-config';
+import { useCallback } from 'react';
+import { useForm } from 'react-hook-form';
+import * as z from 'zod';
+import { zodResolver } from '@hookform/resolvers/zod';
+const formSchema = z.object({
+    tableName: z
+        .string()
+        .min(1, 'Table name is required')
+        .regex(VALID_TABLE_OR_COLUMN_REGEX, 'Only letters, digits and underscores are allowed; should not start with a digit'),
+    query: z.string().min(1, 'Query is required'),
+});
+const CreateTableModal = (props) => {
+    const { editDataSource, isOpen, onClose, onAddOrUpdateSqlQuery } = props;
+    const form = useForm({
+        resolver: zodResolver(formSchema),
+        defaultValues: {
+            tableName: editDataSource?.tableName ?? '',
+            query: editDataSource?.sqlQuery ?? props.query.trim(),
+        },
+    });
+    const onSubmit = useCallback(async (values) => {
+        try {
+            const { tableName, query } = values;
+            await onAddOrUpdateSqlQuery(tableName, query, editDataSource?.tableName);
+            form.reset();
+            onClose();
+        }
+        catch (err) {
+            form.setError('root', {
+                type: 'manual',
+                message: err instanceof DuckQueryError ? err.getMessageForUser() : `${err}`,
+            });
+        }
+    }, [onAddOrUpdateSqlQuery, editDataSource?.tableName, onClose, form]);
+    return (_jsx(Dialog, { open: isOpen, onOpenChange: (open) => !open && onClose(), children: _jsx(DialogContent, { className: "sm:max-w-[800px]", children: _jsx(Form, { ...form, children: _jsxs("form", { onSubmit: form.handleSubmit(onSubmit), className: "space-y-4", children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: editDataSource
+                                        ? 'Edit table query'
+                                        : 'Create table from query' }), !editDataSource && (_jsx(DialogDescription, { children: "Create a new table from the results of an SQL query." }))] }), form.formState.errors.root && (_jsx(Alert, { variant: "destructive", children: _jsx(AlertDescription, { children: form.formState.errors.root.message }) })), _jsx(FormField
+                        // @ts-ignore
+                        , { 
+                            // @ts-ignore
+                            control: form.control, name: "tableName", render: ({ field }) => (_jsxs(FormItem, { children: [_jsx(FormLabel, { children: "Table name:" }), _jsx(FormControl, { children: _jsx(Input, { ...field, className: "font-mono", autoFocus: true }) }), _jsx(FormMessage, {})] })) }), _jsx(FormField
+                        // @ts-ignore
+                        , { 
+                            // @ts-ignore
+                            control: form.control, name: "query", render: ({ field }) => (_jsxs(FormItem, { children: [_jsx(FormLabel, { children: "SQL query:" }), _jsx(FormControl, { children: _jsx(Textarea, { ...field, className: "font-mono text-sm bg-secondary min-h-[200px]" }) }), _jsx(FormMessage, {})] })) }), _jsxs(DialogFooter, { children: [_jsx(Button, { type: "button", variant: "outline", onClick: onClose, children: "Cancel" }), _jsx(Button, { type: "submit", disabled: form.formState.isSubmitting, children: editDataSource ? 'Update' : 'Create' })] })] }) }) }) }));
+};
+export default CreateTableModal;

package/dist/DeleteSqlQueryModal.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+interface Props {
+    isOpen: boolean;
+    onClose: () => void;
+    onConfirm: () => void;
+}
+declare const DeleteSqlQueryModal: React.FC<Props>;
+export default DeleteSqlQueryModal;
+//# sourceMappingURL=DeleteSqlQueryModal.d.ts.map

package/dist/DeleteSqlQueryModal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DeleteSqlQueryModal.d.ts","sourceRoot":"","sources":["../src/DeleteSqlQueryModal.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,UAAU,KAAK;IACb,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,QAAA,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAsBxC,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

package/dist/DeleteSqlQueryModal.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, Button, } from '@sqlrooms/ui';
+const DeleteSqlQueryModal = ({ isOpen, onClose, onConfirm }) => {
+    return (_jsx(Dialog, { open: isOpen, onOpenChange: (open) => !open && onClose(), children: _jsxs(DialogContent, { children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: "Delete Query" }), _jsx(DialogDescription, { children: "Are you sure you want to delete this query? This action cannot be undone." })] }), _jsxs(DialogFooter, { children: [_jsx(Button, { variant: "outline", onClick: onClose, children: "Cancel" }), _jsx(Button, { variant: "destructive", onClick: onConfirm, children: "Delete" })] })] }) }));
+};
+export default DeleteSqlQueryModal;

package/dist/RenameSqlQueryModal.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+interface Props {
+    isOpen: boolean;
+    onClose: () => void;
+    initialName: string;
+    onRename: (newName: string) => void;
+}
+declare const RenameSqlQueryModal: React.FC<Props>;
+export default RenameSqlQueryModal;
+//# sourceMappingURL=RenameSqlQueryModal.d.ts.map

package/dist/RenameSqlQueryModal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RenameSqlQueryModal.d.ts","sourceRoot":"","sources":["../src/RenameSqlQueryModal.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,MAAM,OAAO,CAAC;AAW1B,UAAU,KAAK;IACb,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;CACrC;AAED,QAAA,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAwDxC,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

package/dist/RenameSqlQueryModal.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle, Button, Form, FormControl, FormField, FormItem, FormLabel, FormMessage, Input, } from '@sqlrooms/ui';
+import { useForm } from 'react-hook-form';
+import * as z from 'zod';
+import { zodResolver } from '@hookform/resolvers/zod';
+const formSchema = z.object({
+    queryName: z.string().min(1, 'Query name is required'),
+});
+const RenameSqlQueryModal = ({ isOpen, onClose, initialName, onRename, }) => {
+    const form = useForm({
+        resolver: zodResolver(formSchema),
+        defaultValues: {
+            queryName: initialName,
+        },
+    });
+    function onSubmit(values) {
+        onRename(values.queryName);
+        onClose();
+    }
+    return (_jsx(Dialog, { open: isOpen, onOpenChange: (open) => !open && onClose(), children: _jsxs(DialogContent, { children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { children: "Rename Query" }) }), _jsx(Form, { ...form, children: _jsxs("form", { onSubmit: form.handleSubmit(onSubmit), className: "space-y-4", children: [_jsx(FormField
+                            // @ts-ignore
+                            , { 
+                                // @ts-ignore
+                                control: form.control, name: "queryName", render: ({ field }) => (_jsxs(FormItem, { children: [_jsx(FormLabel, { children: "Query Name" }), _jsx(FormControl, { children: _jsx(Input, { ...field, autoFocus: true, placeholder: "Enter query name" }) }), _jsx(FormMessage, {})] })) }), _jsxs(DialogFooter, { children: [_jsx(Button, { type: "button", variant: "outline", onClick: onClose, children: "Cancel" }), _jsx(Button, { type: "submit", children: "Save" })] })] }) })] }) }));
+};
+export default RenameSqlQueryModal;

package/dist/SqlEditor.d.ts

@@ -0,0 +1,15 @@
+import { SqlEditorConfig } from '@sqlrooms/project-config';
+import React from 'react';
+import { Props as CreateTableModalProps } from './CreateTableModal';
+export type Props = {
+    schema?: string;
+    isOpen: boolean;
+    documentationPanel?: React.ReactNode;
+    sqlEditorConfig: SqlEditorConfig;
+    onChange: (config: SqlEditorConfig) => void;
+    onClose: () => void;
+    onAddOrUpdateSqlQuery: CreateTableModalProps['onAddOrUpdateSqlQuery'];
+};
+declare const SqlEditor: React.FC<Props>;
+export default SqlEditor;
+//# sourceMappingURL=SqlEditor.d.ts.map

package/dist/SqlEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SqlEditor.d.ts","sourceRoot":"","sources":["../src/SqlEditor.tsx"],"names":[],"mappings":"AAWA,OAAO,EAAC,eAAe,EAAC,MAAM,0BAA0B,CAAC;AA4BzD,OAAO,KAAiD,MAAM,OAAO,CAAC;AACtE,OAAyB,EACvB,KAAK,IAAI,qBAAqB,EAC/B,MAAM,oBAAoB,CAAC;AAO5B,MAAM,MAAM,KAAK,GAAG;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,OAAO,CAAC;IAChB,kBAAkB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACrC,eAAe,EAAE,eAAe,CAAC;IACjC,QAAQ,EAAE,CAAC,MAAM,EAAE,eAAe,KAAK,IAAI,CAAC;IAC5C,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,qBAAqB,EAAE,qBAAqB,CAAC,uBAAuB,CAAC,CAAC;CACvE,CAAC;AAEF,QAAA,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAib9B,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/dist/SqlEditor.js

@@ -0,0 +1,206 @@
+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, SpinnerPane, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, ResizablePanelGroup, ResizablePanel, ResizableHandle, } from '@sqlrooms/ui';
+import { genRandomStr, generateUniqueName } from '@sqlrooms/utils';
+import { csvFormat } from 'd3-dsv';
+import { saveAs } from 'file-saver';
+import { BookOpenIcon, DownloadIcon, MoreVerticalIcon, PlayIcon, PlusIcon, } from 'lucide-react';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import CreateTableModal from './CreateTableModal';
+import DeleteSqlQueryModal from './DeleteSqlQueryModal';
+import RenameSqlQueryModal from './RenameSqlQueryModal';
+import { TablesList } from './TablesList';
+const DEFAULT_QUERY = '';
+const SqlEditor = (props) => {
+    const { schema = 'main', documentationPanel, onAddOrUpdateSqlQuery, sqlEditorConfig, onChange, } = props;
+    const duckConn = useDuckDb();
+    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) => {
+        onChange({
+            ...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,
+        };
+        onChange({
+            ...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 [queryToDelete, setQueryToDelete] = useState(null);
+    const [queryToRename, setQueryToRename] = useState(null);
+    const handleStartRename = (queryId, currentName, event) => {
+        event.preventDefault();
+        setQueryToRename({ id: queryId, name: currentName });
+    };
+    const handleFinishRename = (newName) => {
+        if (queryToRename) {
+            const newQueries = sqlEditorConfig.queries.map((q) => q.id === queryToRename.id ? { ...q, name: newName || q.name } : q);
+            onChange({
+                ...sqlEditorConfig,
+                queries: newQueries,
+            });
+        }
+        setQueryToRename(null);
+    };
+    const handleDeleteQuery = (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) {
+                onChange({
+                    ...sqlEditorConfig,
+                    selectedQueryId: prevId,
+                });
+            }
+        }
+    };
+    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);
+        onChange({
+            ...sqlEditorConfig,
+            queries: newQueries,
+            selectedQueryId: newQuery.id,
+        });
+    };
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "absolute right-12", children: _jsxs(Button, { size: "sm", variant: showDocs ? 'secondary' : 'outline', onClick: handleToggleDocs, 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: 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: showDocs ? 50 : 80, children: _jsxs(ResizablePanelGroup, { direction: "vertical", className: "h-full", children: [_jsx(ResizablePanel, { defaultSize: 50, children: _jsx("div", { className: "flex flex-col h-full gap-2", 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) => {
+                                                                                                        e.stopPropagation();
+                                                                                                        handleStartRename(q.id, q.name, e);
+                                                                                                    }, children: "Rename" }), sqlEditorConfig.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: onAddOrUpdateSqlQuery }), _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) {
+                                onChange({
+                                    ...sqlEditorConfig,
+                                    queries: newQueries,
+                                    selectedQueryId,
+                                });
+                            }
+                            setQueryToDelete(null);
+                        } }), _jsx(RenameSqlQueryModal, { isOpen: queryToRename !== null, onClose: () => setQueryToRename(null), initialName: queryToRename?.name ?? '', onRename: handleFinishRename })] })] }));
+};
+export default SqlEditor;

package/dist/SqlEditorModal.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { Props } from './SqlEditor';
+declare const SqlEditorModal: React.FC<Props>;
+export default SqlEditorModal;
+//# sourceMappingURL=SqlEditorModal.d.ts.map

package/dist/SqlEditorModal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SqlEditorModal.d.ts","sourceRoot":"","sources":["../src/SqlEditorModal.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAiB,MAAM,OAAO,CAAC;AACtC,OAAkB,EAAC,KAAK,EAAC,MAAM,aAAa,CAAC;AAE7C,QAAA,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAenC,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/SqlEditorModal.js

@@ -0,0 +1,11 @@
+'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 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 }) })] })] }));
+};
+export default SqlEditorModal;

package/dist/TablesList.d.ts

@@ -0,0 +1,12 @@
+import type { FC } from 'react';
+type Props = {
+    schema: string;
+    tableNames: string[];
+    selectedTable?: string;
+    onSelect: (name: string) => void;
+    onChange?: () => void;
+    renderTableButton?: (tableName: string, onSelect: Props['onSelect']) => React.ReactNode;
+};
+declare const TablesList: FC<Props>;
+export { TablesList };
+//# sourceMappingURL=TablesList.d.ts.map

package/dist/TablesList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TablesList.d.ts","sourceRoot":"","sources":["../src/TablesList.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAC,EAAE,EAAC,MAAM,OAAO,CAAC;AAE9B,KAAK,KAAK,GAAG;IACX,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,MAAM,EAAE,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,iBAAiB,CAAC,EAAE,CAClB,SAAS,EAAE,MAAM,EACjB,QAAQ,EAAE,KAAK,CAAC,UAAU,CAAC,KACxB,KAAK,CAAC,SAAS,CAAC;CACtB,CAAC;AAEF,QAAA,MAAM,UAAU,EAAE,EAAE,CAAC,KAAK,CA+BzB,CAAC;AAEF,OAAO,EAAC,UAAU,EAAC,CAAC"}

package/dist/TablesList.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '@sqlrooms/ui';
+import { TableIcon } from 'lucide-react';
+const TablesList = (props) => {
+    const { tableNames, selectedTable, onSelect, renderTableButton = (tableName, onSelect) => (_jsxs(Button, { className: "w-full justify-start font-normal overflow-hidden whitespace-normal min-h-[25px] text-sm text-left break-words select-text", variant: selectedTable === tableName ? 'secondary' : 'ghost', size: "sm", onClick: () => onSelect(tableName), children: [_jsx(TableIcon, { className: "h-4 w-4" }), tableName] })), } = props;
+    return (_jsx("div", { className: "h-full bg-background/10 px-2 py-4 overflow-auto", children: _jsx("ul", { className: "space-y-1", children: tableNames.map((tableName, i) => (_jsx("li", { children: _jsx("div", { className: "flex items-center gap-1", children: renderTableButton(tableName, onSelect) }) }, i))) }) }));
+};
+export { TablesList };

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+export { default as CreateTableModal } from './CreateTableModal';
+export { default as SqlEditor } from './SqlEditor';
+export type { Props } from './SqlEditor';
+export { default as SqlEditorModal } from './SqlEditorModal';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,OAAO,IAAI,gBAAgB,EAAC,MAAM,oBAAoB,CAAC;AAC/D,OAAO,EAAC,OAAO,IAAI,SAAS,EAAC,MAAM,aAAa,CAAC;AACjD,YAAY,EAAC,KAAK,EAAC,MAAM,aAAa,CAAC;AACvC,OAAO,EAAC,OAAO,IAAI,cAAc,EAAC,MAAM,kBAAkB,CAAC"}

package/dist/index.js

@@ -0,0 +1,3 @@
+export { default as CreateTableModal } from './CreateTableModal';
+export { default as SqlEditor } from './SqlEditor';
+export { default as SqlEditorModal } from './SqlEditorModal';

package/eslint.config.js

@@ -0,0 +1,4 @@
+import {config} from '@sqlrooms/eslint-config/react-internal';
+
+/** @type {import("eslint").Linter.Config} */
+export default config;

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@sqlrooms/sql-editor",
+  "version": "0.0.0",
+  "private": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "dist/index.js",
+  "types": "src/index.ts",
+  "module": "dist/index.js",
+  "type": "module",
+  "scripts": {
+    "dev": "tsc -w",
+    "build": "tsc",
+    "lint": "eslint ."
+  },
+  "dependencies": {
+    "@hookform/resolvers": "^3.10.0",
+    "@sqlrooms/data-table": "0.0.0",
+    "@sqlrooms/duckdb": "0.0.0",
+    "@sqlrooms/layout": "0.0.0",
+    "@sqlrooms/project-config": "0.0.0",
+    "@sqlrooms/ui": "0.0.0",
+    "@sqlrooms/utils": "0.0.0",
+    "apache-arrow": "^14.0.2",
+    "d3-dsv": "^3.0.1",
+    "file-saver": "^2.0.5",
+    "lucide-react": "^0.323.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-hook-form": "^7.54.2",
+    "zod": "^3.22.4"
+  },
+  "devDependencies": {
+    "@types/d3-dsv": "^3.0.7",
+    "@types/file-saver": "^2.0.7",
+    "@types/react": "^18.2.48",
+    "@types/react-dom": "^18.2.18"
+  },
+  "gitHead": "4b0c709542475e4f95db0b2a8405ecadcf2ec186"
+}