@sqlrooms/sql-editor 0.6.0 → 0.8.0

package/README.md

@@ -0,0 +1,409 @@
+This package is part of the SQLRooms framework.
+
+# SQL Editor
+
+A powerful SQL editor component for SQLRooms applications. This package provides React components and hooks for creating interactive SQL query interfaces with Monaco editor integration, table management, and results visualization.
+
+## Features
+
+- 🔍 **Advanced SQL Editing**: Monaco-based SQL editor with syntax highlighting and auto-completion
+- 📊 **Data Visualization**: View query results in interactive data tables
+- 📑 **Multiple Tabs**: Support for multiple query tabs with save/rename/delete functionality
+- 🔄 **State Management**: Zustand-based state management for SQL editor state
+- 📦 **Table Management**: Browser for tables in the database with schema information
+- 📤 **Data Export**: Export query results to CSV files
+- 📝 **Documentation**: Optional documentation panel for SQL reference
+
+## Installation
+
+```bash
+npm install @sqlrooms/sql-editor
+```
+
+## Basic Usage
+
+### Simple SQL Editor
+
+The most basic way to use the SQL Editor with show/hide functionality:
+
+```tsx
+import {SqlEditor} from '@sqlrooms/sql-editor';
+import {useDisclosure} from '@sqlrooms/ui';
+
+function MyApp() {
+  const {isOpen, onOpen, onClose} = useDisclosure({defaultIsOpen: true});
+
+  return (
+    <div className="my-app">
+      <button onClick={isOpen ? onClose : onOpen}>
+        {isOpen ? 'Hide' : 'Show'} SQL Editor
+      </button>
+
+      {isOpen && <SqlEditor isOpen={true} onClose={onClose} />}
+    </div>
+  );
+}
+```
+
+### SQL Editor with Custom Configuration
+
+Using the SQL Editor with project store integration for advanced functionality:
+
+```tsx
+import {SqlEditor} from '@sqlrooms/sql-editor';
+import {useProjectStore} from './store';
+
+function AdvancedEditor() {
+  // Use the store to access SQL editor state and actions
+  const executeQuery = useProjectStore((state) => state.executeQuery);
+  const currentQuery = useProjectStore((state) => state.getCurrentQuery());
+
+  return (
+    <div className="sql-workspace">
+      <h2>SQL Workspace</h2>
+
+      <div className="tools">
+        <button onClick={() => executeQuery(currentQuery)}>Run Query</button>
+        <button onClick={() => exportResultsToCsv()}>Export Results</button>
+      </div>
+
+      <SqlEditor
+        isOpen={true}
+        onClose={() => {}}
+        schema="analytics"
+        initialQuery="SELECT * FROM users LIMIT 10;"
+      />
+    </div>
+  );
+}
+```
+
+### With Custom Documentation Panel
+
+Adding a custom documentation panel to provide SQL reference materials:
+
+```tsx
+import {SqlEditor} from '@sqlrooms/sql-editor';
+import {useDisclosure} from '@sqlrooms/ui';
+
+function AdvancedSqlEditor() {
+  const {isOpen, onClose} = useDisclosure({defaultIsOpen: true});
+
+  // Custom documentation component
+  const Documentation = () => (
+    <div className="p-4">
+      <h2 className="text-xl font-bold mb-4">SQL Reference</h2>
+      <div className="space-y-4">
+        <div>
+          <h3 className="text-lg font-semibold">SELECT</h3>
+          <p>Retrieves data from a table</p>
+          <pre className="bg-gray-100 p-2 rounded mt-2">
+            SELECT column1, column2 FROM table_name;
+          </pre>
+        </div>
+        {/* More documentation items */}
+      </div>
+    </div>
+  );
+
+  return (
+    <SqlEditor
+      isOpen={isOpen}
+      onClose={onClose}
+      schema="analytics"
+      documentationPanel={<Documentation />}
+    />
+  );
+}
+```
+
+### Using SQL Monaco Editor Standalone
+
+For cases where you only need the editor component without the full interface:
+
+```tsx
+import {SqlMonacoEditor} from '@sqlrooms/sql-editor';
+
+function SimpleSqlEditor() {
+  const [query, setQuery] = useState('SELECT * FROM products');
+
+  const handleExecute = () => {
+    // Execute the query using your own logic
+    console.log('Executing query:', query);
+  };
+
+  return (
+    <>
+      <SqlMonacoEditor
+        value={query}
+        onChange={setQuery}
+        onExecuteQuery={handleExecute}
+        height="400px"
+      />
+      <button onClick={handleExecute}>Execute</button>
+    </>
+  );
+}
+```
+
+## State Management
+
+The SQL editor provides a Zustand slice for managing state. You can use it in two ways:
+
+### Using in a Combined SQLRooms Store
+
+This approach is recommended when integrating multiple SQLRooms components:
+
+```tsx
+import {
+  createSqlEditorSlice,
+  createDefaultSqlEditorConfig,
+  SqlEditorSliceState,
+  SqlEditorSliceConfig,
+} from '@sqlrooms/sql-editor';
+import {
+  createProjectSlice,
+  createProjectStore,
+  ProjectState,
+} from '@sqlrooms/project-builder';
+import {BaseProjectConfig} from '@sqlrooms/project-config';
+import {
+  createAiSlice,
+  createDefaultAiConfig,
+  AiSliceState,
+  AiSliceConfig,
+} from '@sqlrooms/ai';
+import {z} from 'zod';
+
+// 1. Define combined config schema
+export const AppConfig =
+  BaseProjectConfig.merge(SqlEditorSliceConfig).merge(AiSliceConfig);
+export type AppConfig = z.infer<typeof AppConfig>;
+
+// 2. Define combined state type
+export type AppState = ProjectState<AppConfig> &
+  SqlEditorSliceState &
+  AiSliceState;
+
+// 3. Create combined store
+export const {projectStore, useProjectStore} = createProjectStore<
+  AppConfig,
+  AppState
+>((set, get, store) => ({
+  // Base project slice
+  ...createProjectSlice<AppConfig>({
+    project: {
+      config: {
+        title: 'SQL Workspace',
+        // ... other project config
+        ...createDefaultSqlEditorConfig(),
+        ...createDefaultAiConfig(),
+      },
+      // ... panels config
+    },
+  })(set, get, store),
+
+  // Sql editor slice
+  ...createSqlEditorSlice()(set, get, store),
+
+  // Ai slice
+  ...createAiSlice()(set, get, store),
+}));
+
+// 4. Use the store in components
+function MyComponent() {
+  // Access SQL editor state and actions
+  const executeQuery = useProjectStore((state) => state.executeQuery);
+  const createQueryTab = useProjectStore((state) => state.createQueryTab);
+
+  // Use actions
+  const handleExecute = () => {
+    executeQuery('SELECT * FROM users LIMIT 10');
+  };
+
+  return (
+    <div>
+      <button onClick={handleExecute}>Run Query</button>
+      <SqlEditor store={useProjectStore} />
+    </div>
+  );
+}
+```
+
+### Standalone SQL Editor Store
+
+For simpler use cases where you only need the SQL editor:
+
+```tsx
+// Create default configuration
+const config = createDefaultSqlEditorConfig();
+
+// Create a store with the SQL editor slice
+const useStore = createProjectStore({
+  sqlEditor: createSqlEditorSlice(config),
+});
+
+// Use the store in components with the provided selector hook
+const {executeQuery, getCurrentQuery} = useStoreWithSqlEditor(useStore);
+```
+
+### Available State Actions
+
+- `executeQuery(query: string, schema?: string)`: Execute a SQL query
+- `exportResultsToCsv(results: Table, filename?: string)`: Export results to CSV
+- `createQueryTab(initialQuery?: string)`: Create a new query tab
+- `deleteQueryTab(queryId: string)`: Delete a query tab
+- `renameQueryTab(queryId: string, newName: string)`: Rename a query tab
+- `updateQueryText(queryId: string, queryText: string)`: Update query text
+- `setSelectedQueryId(queryId: string)`: Set the selected query tab
+- `getCurrentQuery(defaultQuery?: string)`: Get current query text
+
+## Available Components
+
+### SqlEditor
+
+The main component providing a full-featured SQL editor interface.
+
+```tsx
+import {SqlEditor} from '@sqlrooms/sql-editor';
+
+<SqlEditor
+  isOpen={boolean}
+  onClose={() => void}
+  schema="main"
+  documentationPanel={ReactNode}
+/>
+```
+
+### SqlMonacoEditor
+
+A standalone SQL-specific Monaco editor component.
+
+```tsx
+import {SqlMonacoEditor} from '@sqlrooms/sql-editor';
+
+<SqlMonacoEditor
+  value="SELECT * FROM users"
+  onChange={(value) => console.log(value)}
+  onExecuteQuery={() => executeQuery()}
+/>;
+```
+
+### SqlEditorModal
+
+A modal wrapper around the SQL editor.
+
+```tsx
+import {SqlEditorModal} from '@sqlrooms/sql-editor';
+import {useDisclosure} from '@sqlrooms/ui';
+
+function EditorWithModal() {
+  const {isOpen, onOpen, onClose} = useDisclosure();
+
+  return (
+    <>
+      <button onClick={onOpen}>Open SQL Editor</button>
+      <SqlEditorModal isOpen={isOpen} onClose={onClose} />
+    </>
+  );
+}
+```
+
+### CreateTableModal
+
+A modal for creating new tables from SQL queries.
+
+```tsx
+import {CreateTableModal} from '@sqlrooms/sql-editor';
+import {useDisclosure} from '@sqlrooms/ui';
+
+function TableCreator() {
+  const {isOpen, onOpen, onClose} = useDisclosure();
+
+  return (
+    <>
+      <button onClick={onOpen}>Create Table from Results</button>
+      <CreateTableModal
+        isOpen={isOpen}
+        onClose={onClose}
+        onCreateTable={(tableName) =>
+          console.log(`Created table: ${tableName}`)
+        }
+        tableData={queryResults}
+      />
+    </>
+  );
+}
+```
+
+### SqlQueryDataSourcesPanel
+
+A panel showing available data sources for SQL queries.
+
+```tsx
+import {SqlQueryDataSourcesPanel} from '@sqlrooms/sql-editor';
+
+<SqlQueryDataSourcesPanel
+  onSelectTable={(tableName) => {
+    console.log(`Selected table: ${tableName}`);
+  }}
+/>;
+```
+
+## Props
+
+### SqlEditor Props
+
+| Prop               | Type        | Default   | Description                            |
+| ------------------ | ----------- | --------- | -------------------------------------- |
+| isOpen             | boolean     | -         | Whether the editor is open             |
+| onClose            | function    | -         | Callback when the editor is closed     |
+| schema             | string      | 'main'    | Default schema to use for queries      |
+| documentationPanel | ReactNode   | undefined | Custom documentation panel to display  |
+| initialQuery       | string      | ''        | Initial query to display in the editor |
+| store              | StoreObject | undefined | Custom Zustand store to use (optional) |
+
+### SqlMonacoEditor Props
+
+| Prop           | Type     | Default | Description                                  |
+| -------------- | -------- | ------- | -------------------------------------------- |
+| value          | string   | ''      | The SQL query text                           |
+| onChange       | function | -       | Callback when the query text changes         |
+| onExecuteQuery | function | -       | Callback when the execute command is invoked |
+| height         | string   | '300px' | Height of the editor                         |
+| readOnly       | boolean  | false   | Whether the editor is read-only              |
+| theme          | string   | 'dark'  | Editor theme ('dark' or 'light')             |
+
+### SqlEditorModal Props
+
+| Prop    | Type     | Default | Description                       |
+| ------- | -------- | ------- | --------------------------------- |
+| isOpen  | boolean  | -       | Whether the modal is open         |
+| onClose | function | -       | Callback when the modal is closed |
+| schema  | string   | 'main'  | Default schema to use for queries |
+
+### CreateTableModal Props
+
+| Prop          | Type     | Default | Description                               |
+| ------------- | -------- | ------- | ----------------------------------------- |
+| isOpen        | boolean  | -       | Whether the modal is open                 |
+| onClose       | function | -       | Callback when the modal is closed         |
+| onCreateTable | function | -       | Callback when a table is created          |
+| tableData     | Table    | -       | Apache Arrow Table data for the new table |
+
+## Configuration
+
+The SQL editor can be configured through the Zustand store.
+
+```tsx
+const config = {
+  sqlEditor: {
+    queries: [
+      {id: 'default', name: 'Untitled', query: 'SELECT * FROM users LIMIT 10;'},
+    ],
+    selectedQueryId: 'default',
+  },
+};
+```
+
+For more information, visit the SQLRooms documentation.

package/dist/CreateTableModal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CreateTableModal.d.ts","sourceRoot":"","sources":["../src/CreateTableModal.tsx"],"names":[],"mappings":"AAoBA,OAAO,EAAC,kBAAkB,EAAC,MAAM,0BAA0B,CAAC;AAC5D,OAAO,EAAC,EAAE,EAAc,MAAM,OAAO,CAAC;AAkBtC,MAAM,MAAM,qBAAqB,GAAG;IAClC,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,qBAAqB,CA0G/C,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"CreateTableModal.d.ts","sourceRoot":"","sources":["../src/CreateTableModal.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAC,kBAAkB,EAAC,MAAM,0BAA0B,CAAC;AAmB5D,OAAO,EAAC,EAAE,EAAc,MAAM,OAAO,CAAC;AAkBtC,MAAM,MAAM,qBAAqB,GAAG;IAClC,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,qBAAqB,CAiH/C,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/dist/CreateTableModal.js

@@ -1,10 +1,11 @@
 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 { zodResolver } from '@hookform/resolvers/zod';
 import { DuckQueryError } from '@sqlrooms/duckdb';
+import { Alert, AlertDescription, Button, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, Form, FormControl, FormField, FormItem, FormLabel, FormMessage, Input, } from '@sqlrooms/ui';
 import { useCallback } from 'react';
 import { useForm } from 'react-hook-form';
 import * as z from 'zod';
-import { zodResolver } from '@hookform/resolvers/zod';
+import { SqlMonacoEditor } from './SqlMonacoEditor';
 const VALID_TABLE_OR_COLUMN_REGEX = /^[a-zA-Z_][a-zA-Z0-9_]{0,62}$/;
 const formSchema = z.object({
     tableName: z
@@ -17,7 +18,7 @@ const CreateTableModal = (props) => {
     const { editDataSource, isOpen, onClose, onAddOrUpdateSqlQuery } = props;
     const form = useForm({
         resolver: zodResolver(formSchema),
-        defaultValues: {
+        values: {
             tableName: editDataSource?.tableName ?? '',
             query: editDataSource?.sqlQuery ?? props.query.trim(),
         },
@@ -46,7 +47,12 @@ const CreateTableModal = (props) => {
                         // @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' })] })] }) }) }) }));
+                            control: form.control, name: "query", render: ({ field }) => (_jsxs(FormItem, { children: [_jsx(FormLabel, { children: "SQL query:" }), _jsx(FormControl, { children: _jsx(SqlMonacoEditor, { value: field.value, onChange: field.onChange, className: "min-h-[200px]", options: {
+                                                scrollBeyondLastLine: false,
+                                                automaticLayout: true,
+                                                minimap: { enabled: false },
+                                                wordWrap: 'on',
+                                            } }) }), _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;
 //# sourceMappingURL=CreateTableModal.js.map

package/dist/CreateTableModal.js.map

@@ -1 +1 @@
-{"version":3,"file":"CreateTableModal.js","sourceRoot":"","sources":["../src/CreateTableModal.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Button,\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  Form,\n  FormControl,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n  Input,\n  Textarea,\n  Alert,\n  AlertDescription,\n} from '@sqlrooms/ui';\nimport {DuckQueryError} from '@sqlrooms/duckdb';\nimport {SqlQueryDataSource} from '@sqlrooms/project-config';\nimport {FC, useCallback} from 'react';\nimport {useForm} from 'react-hook-form';\nimport * as z from 'zod';\nimport {zodResolver} from '@hookform/resolvers/zod';\n\nconst VALID_TABLE_OR_COLUMN_REGEX = /^[a-zA-Z_][a-zA-Z0-9_]{0,62}$/;\n\nconst formSchema = z.object({\n  tableName: z\n    .string()\n    .min(1, 'Table name is required')\n    .regex(\n      VALID_TABLE_OR_COLUMN_REGEX,\n      'Only letters, digits and underscores are allowed; should not start with a digit',\n    ),\n  query: z.string().min(1, 'Query is required'),\n});\n\nexport type CreateTableModalProps = {\n  query: string;\n  isOpen: boolean;\n  onClose: () => void;\n  editDataSource?: SqlQueryDataSource;\n  onAddOrUpdateSqlQuery: (\n    tableName: string,\n    query: string,\n    oldTableName?: string,\n  ) => Promise<void>;\n};\n\nconst CreateTableModal: FC<CreateTableModalProps> = (props) => {\n  const {editDataSource, isOpen, onClose, onAddOrUpdateSqlQuery} = props;\n\n  const form = useForm<z.infer<typeof formSchema>>({\n    resolver: zodResolver(formSchema),\n    defaultValues: {\n      tableName: editDataSource?.tableName ?? '',\n      query: editDataSource?.sqlQuery ?? props.query.trim(),\n    },\n  });\n\n  const onSubmit = useCallback(\n    async (values: z.infer<typeof formSchema>) => {\n      try {\n        const {tableName, query} = values;\n        await onAddOrUpdateSqlQuery(\n          tableName,\n          query,\n          editDataSource?.tableName,\n        );\n        form.reset();\n        onClose();\n      } catch (err) {\n        form.setError('root', {\n          type: 'manual',\n          message:\n            err instanceof DuckQueryError ? err.getMessageForUser() : `${err}`,\n        });\n      }\n    },\n    [onAddOrUpdateSqlQuery, editDataSource?.tableName, onClose, form],\n  );\n\n  return (\n    <Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>\n      <DialogContent className=\"sm:max-w-[800px]\">\n        {/* @ts-ignore */}\n        <Form {...form}>\n          <form onSubmit={form.handleSubmit(onSubmit)} className=\"space-y-4\">\n            <DialogHeader>\n              <DialogTitle>\n                {editDataSource\n                  ? 'Edit table query'\n                  : 'Create table from query'}\n              </DialogTitle>\n              {!editDataSource && (\n                <DialogDescription>\n                  Create a new table from the results of an SQL query.\n                </DialogDescription>\n              )}\n            </DialogHeader>\n\n            {form.formState.errors.root && (\n              <Alert variant=\"destructive\">\n                <AlertDescription>\n                  {form.formState.errors.root.message}\n                </AlertDescription>\n              </Alert>\n            )}\n\n            <FormField\n              // @ts-ignore\n              control={form.control}\n              name=\"tableName\"\n              render={({field}) => (\n                <FormItem>\n                  <FormLabel>Table name:</FormLabel>\n                  <FormControl>\n                    <Input {...field} className=\"font-mono\" autoFocus />\n                  </FormControl>\n                  <FormMessage />\n                </FormItem>\n              )}\n            />\n\n            <FormField\n              // @ts-ignore\n              control={form.control}\n              name=\"query\"\n              render={({field}) => (\n                <FormItem>\n                  <FormLabel>SQL query:</FormLabel>\n                  <FormControl>\n                    <Textarea\n                      {...field}\n                      className=\"font-mono text-sm bg-secondary min-h-[200px]\"\n                    />\n                  </FormControl>\n                  <FormMessage />\n                </FormItem>\n              )}\n            />\n\n            <DialogFooter>\n              <Button type=\"button\" variant=\"outline\" onClick={onClose}>\n                Cancel\n              </Button>\n              <Button type=\"submit\" disabled={form.formState.isSubmitting}>\n                {editDataSource ? 'Update' : 'Create'}\n              </Button>\n            </DialogFooter>\n          </form>\n        </Form>\n      </DialogContent>\n    </Dialog>\n  );\n};\n\nexport default CreateTableModal;\n"]}
+{"version":3,"file":"CreateTableModal.js","sourceRoot":"","sources":["../src/CreateTableModal.tsx"],"names":[],"mappings":"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","sourcesContent":["import {zodResolver} from '@hookform/resolvers/zod';\nimport {DuckQueryError} from '@sqlrooms/duckdb';\nimport {SqlQueryDataSource} from '@sqlrooms/project-config';\nimport {\n  Alert,\n  AlertDescription,\n  Button,\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  Form,\n  FormControl,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n  Input,\n} from '@sqlrooms/ui';\nimport {FC, useCallback} from 'react';\nimport {useForm} from 'react-hook-form';\nimport * as z from 'zod';\nimport {SqlMonacoEditor} from './SqlMonacoEditor';\n\nconst VALID_TABLE_OR_COLUMN_REGEX = /^[a-zA-Z_][a-zA-Z0-9_]{0,62}$/;\n\nconst formSchema = z.object({\n  tableName: z\n    .string()\n    .min(1, 'Table name is required')\n    .regex(\n      VALID_TABLE_OR_COLUMN_REGEX,\n      'Only letters, digits and underscores are allowed; should not start with a digit',\n    ),\n  query: z.string().min(1, 'Query is required'),\n});\n\nexport type CreateTableModalProps = {\n  query: string;\n  isOpen: boolean;\n  onClose: () => void;\n  editDataSource?: SqlQueryDataSource;\n  onAddOrUpdateSqlQuery: (\n    tableName: string,\n    query: string,\n    oldTableName?: string,\n  ) => Promise<void>;\n};\n\nconst CreateTableModal: FC<CreateTableModalProps> = (props) => {\n  const {editDataSource, isOpen, onClose, onAddOrUpdateSqlQuery} = props;\n\n  const form = useForm<z.infer<typeof formSchema>>({\n    resolver: zodResolver(formSchema),\n    values: {\n      tableName: editDataSource?.tableName ?? '',\n      query: editDataSource?.sqlQuery ?? props.query.trim(),\n    },\n  });\n\n  const onSubmit = useCallback(\n    async (values: z.infer<typeof formSchema>) => {\n      try {\n        const {tableName, query} = values;\n        await onAddOrUpdateSqlQuery(\n          tableName,\n          query,\n          editDataSource?.tableName,\n        );\n        form.reset();\n        onClose();\n      } catch (err) {\n        form.setError('root', {\n          type: 'manual',\n          message:\n            err instanceof DuckQueryError ? err.getMessageForUser() : `${err}`,\n        });\n      }\n    },\n    [onAddOrUpdateSqlQuery, editDataSource?.tableName, onClose, form],\n  );\n\n  return (\n    <Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>\n      <DialogContent className=\"sm:max-w-[800px]\">\n        {/* @ts-ignore */}\n        <Form {...form}>\n          <form onSubmit={form.handleSubmit(onSubmit)} className=\"space-y-4\">\n            <DialogHeader>\n              <DialogTitle>\n                {editDataSource\n                  ? 'Edit table query'\n                  : 'Create table from query'}\n              </DialogTitle>\n              {!editDataSource && (\n                <DialogDescription>\n                  Create a new table from the results of an SQL query.\n                </DialogDescription>\n              )}\n            </DialogHeader>\n\n            {form.formState.errors.root && (\n              <Alert variant=\"destructive\">\n                <AlertDescription>\n                  {form.formState.errors.root.message}\n                </AlertDescription>\n              </Alert>\n            )}\n\n            <FormField\n              // @ts-ignore\n              control={form.control}\n              name=\"tableName\"\n              render={({field}) => (\n                <FormItem>\n                  <FormLabel>Table name:</FormLabel>\n                  <FormControl>\n                    <Input {...field} className=\"font-mono\" autoFocus />\n                  </FormControl>\n                  <FormMessage />\n                </FormItem>\n              )}\n            />\n\n            <FormField\n              // @ts-ignore\n              control={form.control}\n              name=\"query\"\n              render={({field}) => (\n                <FormItem>\n                  <FormLabel>SQL query:</FormLabel>\n                  <FormControl>\n                    <SqlMonacoEditor\n                      value={field.value}\n                      onChange={field.onChange}\n                      className=\"min-h-[200px]\"\n                      options={{\n                        scrollBeyondLastLine: false,\n                        automaticLayout: true,\n                        minimap: {enabled: false},\n                        wordWrap: 'on',\n                      }}\n                    />\n                  </FormControl>\n                  <FormMessage />\n                </FormItem>\n              )}\n            />\n\n            <DialogFooter>\n              <Button type=\"button\" variant=\"outline\" onClick={onClose}>\n                Cancel\n              </Button>\n              <Button type=\"submit\" disabled={form.formState.isSubmitting}>\n                {editDataSource ? 'Update' : 'Create'}\n              </Button>\n            </DialogFooter>\n          </form>\n        </Form>\n      </DialogContent>\n    </Dialog>\n  );\n};\n\nexport default CreateTableModal;\n"]}

package/dist/SqlEditor.d.ts

@@ -9,19 +9,6 @@ export type SqlEditorProps = {
     /** Callback fired when the SQL editor should be closed */
     onClose: () => void;
 };
-/**
- * A full-featured SQL editor component with query execution, table management, and results visualization.
- *
- * Features:
- * - Multiple query tabs with save/rename/delete functionality
- * - Query execution with results displayed in a data table
- * - Table browser showing available tables in the schema
- * - Export results to CSV
- * - Create new tables from query results
- * - Optional SQL documentation panel
- * - Keyboard shortcuts (Cmd/Ctrl + Enter to run queries)
- *
- */
-declare const SqlEditor: React.FC<SqlEditorProps>;
+declare const SqlEditor: React.NamedExoticComponent<SqlEditorProps>;
 export default SqlEditor;
 //# sourceMappingURL=SqlEditor.d.ts.map

package/dist/SqlEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SqlEditor.d.ts","sourceRoot":"","sources":["../src/SqlEditor.tsx"],"names":[],"mappings":"AAsCA,OAAO,KAAiD,MAAM,OAAO,CAAC;AAStE,MAAM,MAAM,cAAc,GAAG;IAC3B,iEAAiE;IACjE,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,kDAAkD;IAClD,MAAM,EAAE,OAAO,CAAC;IAEhB,uEAAuE;IACvE,kBAAkB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAErC,0DAA0D;IAC1D,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEF;;;;;;;;;;;;GAYG;AACH,QAAA,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAqcvC,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"SqlEditor.d.ts","sourceRoot":"","sources":["../src/SqlEditor.tsx"],"names":[],"mappings":"AAwBA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAiB9D,MAAM,MAAM,cAAc,GAAG;IAC3B,iEAAiE;IACjE,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,kDAAkD;IAClD,MAAM,EAAE,OAAO,CAAC;IAEhB,uEAAuE;IACvE,kBAAkB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAErC,0DAA0D;IAC1D,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAyaF,QAAA,MAAM,SAAS,4CAA4B,CAAC;AAE5C,eAAe,SAAS,CAAC"}