@adecore/database 0.21.0 → 0.21.2

package/dist/assign-ref.d.ts

@@ -0,0 +1,2 @@
+import type { Ref } from 'react';
+export declare function assignRef<T>(ref: Ref<T> | undefined, node: T | null): void;

package/dist/assign-ref.js

@@ -0,0 +1,9 @@
+/* Hands a node to a ref of either kind, for an element that keeps a ref of its own beside the one it was given. */
+export function assignRef(ref, node) {
+    if (typeof ref === 'function') {
+        ref(node);
+    }
+    else if (ref) {
+        ref.current = node;
+    }
+}

package/dist/client/client.js

@@ -2,8 +2,8 @@ import { DatabaseRequestError } from './types.js';
 const cancelledError = () => new DatabaseRequestError('cancelled', 'The request was cancelled.');
 const isUnknownSession = (error) => error instanceof DatabaseRequestError && error.code === 'unknown-session';
 const LEADING_COMMENTS = /^(?:\s+|--[^\n]*(?:\n|$)|#[^\n]*(?:\n|$)|\/\*[\s\S]*?\*\/)+/;
-const CHANGES_SHAPE = /^(?:create|alter|drop|rename|truncate)\b/i;
-const changesShape = (sql) => CHANGES_SHAPE.test(sql.replace(LEADING_COMMENTS, ''));
+const SCHEMA_STATEMENT = /^(?:create|alter|drop|rename|truncate)\b/i;
+const changesSchema = (sql) => SCHEMA_STATEMENT.test(sql.replace(LEADING_COMMENTS, ''));
 /* Structural equality for the JSON a config is made of; a key set to `undefined` counts as absent. */
 const isEqual = (left, right) => {
     if (left === right) {
@@ -36,6 +36,14 @@ export const createDatabaseClient = (transport, options = {}) => {
     const createId = options.createId ?? (() => crypto.randomUUID());
     const live = new Map();
     const schemaListeners = new Set();
+    const channelsOf = (connectionId) => {
+        let channels = live.get(connectionId);
+        if (channels === undefined) {
+            channels = new Map();
+            live.set(connectionId, channels);
+        }
+        return channels;
+    };
     const notifySchemaChange = (change) => {
         for (const listener of [...schemaListeners]) {
             try {
@@ -79,11 +87,7 @@ export const createDatabaseClient = (transport, options = {}) => {
         let opening = null;
         /* A session that was closed and is used again is findable again, so `disconnect` and `dispose` reach it. */
         const track = () => {
-            let channels = live.get(connection.id);
-            if (channels === undefined) {
-                channels = new Map();
-                live.set(connection.id, channels);
-            }
+            const channels = channelsOf(connection.id);
             if (!channels.has(channel)) {
                 channels.set(channel, created);
             }
@@ -169,7 +173,7 @@ export const createDatabaseClient = (transport, options = {}) => {
             async execute(sql, executeOptions) {
                 const { signal: _signal, ...rest } = executeOptions ?? {};
                 const result = await request('execute', (id) => ({ session: id, sql, ...rest }), executeOptions, false);
-                if (result.results.some((item) => item.kind !== 'error' && changesShape(item.sql))) {
+                if (result.results.some((item) => item.kind !== 'error' && changesSchema(item.sql))) {
                     notifySchemaChange({ connectionId: connection.id, ...(rest.schema === undefined ? {} : { schema: rest.schema }) });
                 }
                 return result;
@@ -216,19 +220,14 @@ export const createDatabaseClient = (transport, options = {}) => {
             };
         },
         session(connection, channel = '') {
-            let channels = live.get(connection.id);
-            const existing = channels?.get(channel);
+            const existing = live.get(connection.id)?.get(channel);
             if (existing !== undefined && isEqual(existing.session.connection.config, connection.config)) {
                 existing.update(connection);
                 return existing.session;
             }
             void existing?.close();
             const created = createSession(connection, channel);
-            if (channels === undefined) {
-                channels = new Map();
-                live.set(connection.id, channels);
-            }
-            channels.set(channel, created);
+            channelsOf(connection.id).set(channel, created);
             return created.session;
         },
         async disconnect(connectionId) {

package/dist/client/types.d.ts

@@ -95,3 +95,4 @@ export declare class DatabaseRequestError extends Error {
     readonly change: number | undefined;
     constructor(code: DatabaseErrorCode, message: string, sqlState?: string, change?: number);
 }
+export declare const isCancelled: (error: unknown) => boolean;

package/dist/client/types.js

@@ -11,3 +11,5 @@ export class DatabaseRequestError extends Error {
         this.change = change;
     }
 }
+/* Whether a request failed because it was cancelled, which is no failure to show. */
+export const isCancelled = (error) => error instanceof DatabaseRequestError && error.code === 'cancelled';

package/dist/connections/ConnectionForm.js

@@ -51,7 +51,12 @@ function SqliteFields({ config, onConfigChange, touched, touch, onBrowse }) {
         });
         touch('path');
     };
-    return (_jsxs(_Fragment, { children: [_jsx(Field, { label: t('connections.form.path'), hint: t('connections.form.pathHint'), error: error, orientation: "horizontal", group: onBrowse !== undefined, children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Input, { mono: true, value: config.path, placeholder: "/path/to/database.sqlite", spellCheck: false, "aria-label": onBrowse === undefined ? undefined : t('connections.form.path'), onBlur: () => touch('path'), onChange: (e) => onConfigChange({ ...config, path: e.target.value }) }), onBrowse !== undefined && (_jsx(Button, { variant: "secondary", disabled: browsing.busy, onClick: () => void browse(), children: t('connections.form.browse') }))] }) }), _jsx(Field, { label: t('connections.form.create'), hint: t('connections.form.createHint'), orientation: "horizontal", group: true, children: _jsx(Switch, { checked: config.create === true, label: t('connections.form.create'), onCheckedChange: (create) => onConfigChange({ ...config, create }) }) })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(Field, { label: t('connections.form.path'), hint: t('connections.form.pathHint'), error: error, orientation: "horizontal", group: onBrowse !== undefined, children: _jsx(PathInput, { value: config.path, placeholder: "/path/to/database.sqlite", label: t('connections.form.path'), busy: browsing.busy, onBlur: () => touch('path'), onValueChange: (path) => onConfigChange({ ...config, path }), onBrowse: onBrowse === undefined ? undefined : () => void browse() }) }), _jsx(Field, { label: t('connections.form.create'), hint: t('connections.form.createHint'), orientation: "horizontal", group: true, children: _jsx(Switch, { checked: config.create === true, label: t('connections.form.create'), onCheckedChange: (create) => onConfigChange({ ...config, create }) }) })] }));
+}
+/* A path typed by hand, with a Browse button beside it when the app has a file dialog. */
+function PathInput({ value, placeholder, label, busy, onBlur, onValueChange, onBrowse }) {
+    const { t } = useTranslation('database');
+    return (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Input, { mono: true, value: value, placeholder: placeholder, spellCheck: false, "aria-label": onBrowse === undefined ? undefined : label, onBlur: onBlur, onChange: (e) => onValueChange(e.target.value) }), onBrowse !== undefined && (_jsx(Button, { variant: "secondary", disabled: busy, onClick: onBrowse, children: t('connections.form.browse') }))] }));
 }
 function PortField({ label, hint, error, value, placeholder, onBlur, onValueChange }) {
     return (_jsx(Field, { label: label, hint: hint, error: error, orientation: "horizontal", children: _jsx(Input, { type: "number", min: 1, max: 65535, className: "max-w-32", value: value === undefined ? '' : String(value), placeholder: String(placeholder), onBlur: onBlur, onChange: (e) => onValueChange(e.target.value === '' ? undefined : Number(e.target.value)) }) }));
@@ -97,7 +102,7 @@ function SshFields({ config, tunnel, onConfigChange, touched, touch, onBrowse })
             }
         });
     };
-    return (_jsxs(_Fragment, { children: [_jsx(Field, { label: t('connections.form.ssh.host'), hint: t('connections.form.ssh.hostHint'), error: hostError, orientation: "horizontal", children: _jsx(Input, { value: tunnel.host, placeholder: "bastion.example.com", spellCheck: false, onBlur: () => touch('sshHost'), onChange: (e) => update({ host: e.target.value }) }) }), _jsx(PortField, { label: t('connections.form.ssh.port'), error: portError, value: tunnel.port, placeholder: 22, onBlur: () => touch('sshPort'), onValueChange: (port) => update({ port }) }), _jsx(Field, { label: t('connections.form.ssh.user'), orientation: "horizontal", children: _jsx(Input, { value: tunnel.user ?? '', autoComplete: "off", spellCheck: false, onChange: (e) => update({ user: optionalText(e.target.value) }) }) }), _jsx(Field, { label: t('connections.form.ssh.identityFile'), hint: t('connections.form.ssh.keyHint'), error: browsing.failure ?? undefined, orientation: "horizontal", group: onBrowse !== undefined, children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Input, { mono: true, value: tunnel.identityFile ?? '', placeholder: "~/.ssh/id_ed25519", spellCheck: false, "aria-label": onBrowse === undefined ? undefined : t('connections.form.ssh.identityFile'), onChange: (e) => update({ identityFile: optionalText(e.target.value) }) }), onBrowse !== undefined && (_jsx(Button, { variant: "secondary", disabled: browsing.busy, onClick: () => void browse(), children: t('connections.form.browse') }))] }) }), _jsx(ServerFields, { config: config, onConfigChange: onConfigChange, touched: touched, touch: touch })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(Field, { label: t('connections.form.ssh.host'), hint: t('connections.form.ssh.hostHint'), error: hostError, orientation: "horizontal", children: _jsx(Input, { value: tunnel.host, placeholder: "bastion.example.com", spellCheck: false, onBlur: () => touch('sshHost'), onChange: (e) => update({ host: e.target.value }) }) }), _jsx(PortField, { label: t('connections.form.ssh.port'), error: portError, value: tunnel.port, placeholder: 22, onBlur: () => touch('sshPort'), onValueChange: (port) => update({ port }) }), _jsx(Field, { label: t('connections.form.ssh.user'), orientation: "horizontal", children: _jsx(Input, { value: tunnel.user ?? '', autoComplete: "off", spellCheck: false, onChange: (e) => update({ user: optionalText(e.target.value) }) }) }), _jsx(Field, { label: t('connections.form.ssh.identityFile'), hint: t('connections.form.ssh.keyHint'), error: browsing.failure ?? undefined, orientation: "horizontal", group: onBrowse !== undefined, children: _jsx(PathInput, { value: tunnel.identityFile ?? '', placeholder: "~/.ssh/id_ed25519", label: t('connections.form.ssh.identityFile'), busy: browsing.busy, onValueChange: (identityFile) => update({ identityFile: optionalText(identityFile) }), onBrowse: onBrowse === undefined ? undefined : () => void browse() }) }), _jsx(ServerFields, { config: config, onConfigChange: onConfigChange, touched: touched, touch: touch })] }));
 }
 /* What a container offers a person in a list: its image, its Compose name and the port it publishes. */
 function containerDescription(container, published) {

package/dist/connections/ConnectionManager.js

@@ -37,15 +37,15 @@ export function ConnectionManager({ value, onValueChange, selected, onSelectedCh
         }
         onSelectedChange?.(id);
     };
-    const add = (engine) => {
-        const connection = { id: crypto.randomUUID(), name: t('connections.newName'), config: defaultConfig(engine) };
+    const append = (connection) => {
         onValueChange([...value, connection]);
         select(connection.id);
     };
+    const add = (engine) => {
+        append({ id: crypto.randomUUID(), name: t('connections.newName'), config: defaultConfig(engine) });
+    };
     const addFromContainer = (container) => {
-        const connection = connectionFromContainer(crypto.randomUUID(), container);
-        onValueChange([...value, connection]);
-        select(connection.id);
+        append(connectionFromContainer(crypto.randomUUID(), container));
     };
     const change = (next) => {
         onValueChange(value.map((connection) => (connection.id === next.id ? next : connection)));

package/dist/connections/EngineIcon.js

@@ -1,7 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Icon } from '@adecore/ui';
 import { ENGINE_ICONS } from './engine-icons.js';
-/* A file on disk for SQLite, a server for MySQL and MariaDB. */
 export function EngineIcon({ engine, size = 16, className, ref }) {
     return _jsx(Icon, { ref: ref, icon: ENGINE_ICONS[engine], size: size, className: className });
 }

package/dist/console/QueryConsole.js

@@ -5,7 +5,7 @@ import { Check, CircleAlert, History, Play, Square, X } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { Banner, Button, ColumnResizeHandle, Icon, IconButton, messageOf, PromptDialog, Spinner, Tabs, Tooltip, useColumnResize } from '@adecore/ui';
 import { formatNumber } from '@adecore/ui/format';
-import { DatabaseRequestError } from '../client/types.js';
+import { isCancelled } from '../client/types.js';
 import { useDatabaseAction, useDatabaseClient, useDatabaseFiles, useDatabaseNotice, useDatabaseStorage } from '../client-context.js';
 import { splitStatements, statementAt } from '../sql-split.js';
 import { DestructiveDialog } from './DestructiveDialog.js';
@@ -41,6 +41,14 @@ const parseHeight = (raw) => {
 function AppEditor({ render, ...editor }) {
     return render(editor);
 }
+/* Run and Run all, or Cancel while a run is under way. */
+function RunButtons({ running, disabled, onCancel, onRun }) {
+    const { t } = useTranslation('database');
+    if (running) {
+        return (_jsxs(_Fragment, { children: [_jsxs(Button, { size: "sm", onClick: onCancel, children: [_jsx(Icon, { icon: Square, size: 12 }), t('console.cancel')] }), _jsx(Spinner, { size: 14, label: t('console.running') })] }));
+    }
+    return (_jsxs(_Fragment, { children: [_jsx(Tooltip, { label: t('console.run'), kbd: RUN_SHORTCUT, children: _jsxs(Button, { variant: "primary", size: "sm", disabled: disabled, onClick: () => onRun('selection-or-statement'), children: [_jsx(Icon, { icon: Play, size: 12 }), t('console.run')] }) }), _jsx(Tooltip, { label: t('console.runAll'), kbd: RUN_ALL_SHORTCUT, children: _jsx(Button, { variant: "secondary", size: "sm", disabled: disabled, onClick: () => onRun('all'), children: t('console.runAll') }) })] }));
+}
 /* Type SQL, run it, and read what each statement did. Several statements give a tab each. */
 export function QueryConsole({ connection, schema, onSchemaChange, value, defaultValue = '', onValueChange, defaultHistoryOpen = false, autoFocus = false, renderEditor, toolbarEnd, className, ref }) {
     const { t } = useTranslation('database');
@@ -80,7 +88,7 @@ export function QueryConsole({ connection, schema, onSchemaChange, value, defaul
     const [exporting, setExporting] = useState(false);
     // What the console shows itself when the app takes no notices.
     const [notice, setNotice] = useState(null);
-    /* Closed until the first run, so the editor has the whole height before anything ran. */
+    // Closed until the first run, so the editor has the whole height before anything ran.
     const [resultsOpen, setResultsOpen] = useState(false);
     const [resultsHeight, setResultsHeight] = useState(() => parseHeight(storage?.get(RESULTS_HEIGHT_KEY)));
     const { startResize } = useColumnResize(resultsPane, {
@@ -183,7 +191,7 @@ export function QueryConsole({ connection, schema, onSchemaChange, value, defaul
             record(outcomeOf(executed.results));
         }
         catch (error) {
-            if (controller.signal.aborted || (error instanceof DatabaseRequestError && error.code === 'cancelled')) {
+            if (controller.signal.aborted || isCancelled(error)) {
                 setRun({ status: 'cancelled' });
             }
             else {
@@ -304,7 +312,7 @@ export function QueryConsole({ connection, schema, onSchemaChange, value, defaul
         placeholder: t('console.placeholder'),
         autoFocus
     };
-    return (_jsxs("div", { ref: ref, className: clsx('flex min-h-0 flex-col bg-surface text-text', className), children: [_jsxs("div", { className: "flex min-h-0 flex-1", children: [_jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [_jsxs("div", { className: "flex shrink-0 flex-wrap items-center gap-2 border-b border-border px-3 py-2", children: [session !== null && (_jsxs(_Fragment, { children: [run.status === 'running' ? (_jsxs(_Fragment, { children: [_jsxs(Button, { size: "sm", onClick: () => running.current?.abort(), children: [_jsx(Icon, { icon: Square, size: 12 }), t('console.cancel')] }), _jsx(Spinner, { size: 14, label: t('console.running') })] })) : (_jsxs(_Fragment, { children: [_jsx(Tooltip, { label: t('console.run'), kbd: RUN_SHORTCUT, children: _jsxs(Button, { variant: "primary", size: "sm", disabled: blank || busy, onClick: () => requestRun(targetOf('selection-or-statement')), children: [_jsx(Icon, { icon: Play, size: 12 }), t('console.run')] }) }), _jsx(Tooltip, { label: t('console.runAll'), kbd: RUN_ALL_SHORTCUT, children: _jsx(Button, { variant: "secondary", size: "sm", disabled: blank || busy, onClick: () => requestRun(targetOf('all')), children: t('console.runAll') }) })] })), _jsx(TransactionControls, { mode: mode, onModeChange: changeMode, open: inTransaction, busy: busy, onCommit: () => void settle('commit'), onRollback: () => void settle('rollback') })] })), _jsxs("div", { className: "ml-auto flex items-center gap-2", children: [toolbarEnd, session !== null && schemas.length > 0 && (_jsx(SchemaPicker, { schemas: schemas, value: activeSchema ?? null, disabled: busy, onValueChange: onSchemaChange ?? setPickedSchema })), session !== null && (_jsxs(Button, { variant: "secondary", size: "sm", "aria-pressed": historyOpen, className: "aria-pressed:bg-surface-active aria-pressed:text-text", onClick: () => setHistoryOpen(!historyOpen), children: [_jsx(Icon, { icon: History, size: 12 }), t('console.history.title')] }))] })] }), _jsx("div", { className: clsx('flex min-h-0 flex-1 flex-col', renderEditor === undefined && 'p-3'), children: renderEditor === undefined ? _jsx(SqlEditor, { ...editorProps }) : _jsx(AppEditor, { render: renderEditor, ...editorProps }) })] }), session !== null && historyOpen && _jsx(HistoryPanel, { entries: history.entries, onPick: pickHistory, onClear: history.clear })] }), session !== null && notice !== null && (_jsx(Banner, { icon: notice.tone === 'error' ? CircleAlert : Check, tone: notice.tone === 'error' ? 'error' : 'neutral', message: notice.description ?? notice.title, className: "shrink-0 pb-2", children: _jsx(Button, { size: "xs", onClick: () => setNotice(null), children: t('console.dismiss') }) })), session !== null && resultsOpen && (_jsxs("section", { ref: resultsPane, "aria-label": t('console.results'), className: "relative flex min-h-24 shrink-0 flex-col border-t border-border", style: { height: resultsHeight ?? '50%', maxHeight: `calc(100% - ${MIN_EDITOR_HEIGHT}px)` }, children: [_jsx(ColumnResizeHandle, { from: "bottom", onPointerDown: startResize }), _jsx(Tabs.Root, { value: index, onValueChange: (next) => setTab(Number(next)), children: _jsx(Tabs.List, { "aria-label": t('console.results'), className: "shrink-0 pr-1.5 pl-3", end: _jsx(IconButton, { icon: X, size: "sm", label: t('console.closeResults'), onClick: () => setResultsOpen(false) }), children: results.map((result, position) => (_jsx(Tabs.Tab, { value: position, children: statementLabel(result.sql) }, position))) }) }), run.status === 'failed' && _jsx(Banner, { icon: CircleAlert, tone: "error", message: run.message, className: "shrink-0 pt-2" }), run.status === 'cancelled' && _jsx(Banner, { icon: CircleAlert, tone: "neutral", message: t('console.cancelled'), className: "shrink-0 pt-2" }), shown !== undefined && (_jsx(StatementResultView, { result: shown, offset: offset, pager: pager, onExport: exportBase === undefined ? undefined : (format) => void exportResult(exportBase, format), exporting: exporting, engine: engine, valuePanelOpen: panelOpen, onValuePanelOpenChange: setPanelOpen, keys: keys, onFollowReference: act === undefined || connection === undefined
+    return (_jsxs("div", { ref: ref, className: clsx('flex min-h-0 flex-col bg-surface text-text', className), children: [_jsxs("div", { className: "flex min-h-0 flex-1", children: [_jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [_jsxs("div", { className: "flex shrink-0 flex-wrap items-center gap-2 border-b border-border px-3 py-2", children: [session !== null && (_jsxs(_Fragment, { children: [_jsx(RunButtons, { running: run.status === 'running', disabled: blank || busy, onCancel: () => running.current?.abort(), onRun: (scope) => requestRun(targetOf(scope)) }), _jsx(TransactionControls, { mode: mode, onModeChange: changeMode, open: inTransaction, busy: busy, onCommit: () => void settle('commit'), onRollback: () => void settle('rollback') })] })), _jsxs("div", { className: "ml-auto flex items-center gap-2", children: [toolbarEnd, session !== null && schemas.length > 0 && (_jsx(SchemaPicker, { schemas: schemas, value: activeSchema ?? null, disabled: busy, onValueChange: onSchemaChange ?? setPickedSchema })), session !== null && (_jsxs(Button, { variant: "secondary", size: "sm", "aria-pressed": historyOpen, className: "aria-pressed:bg-surface-active aria-pressed:text-text", onClick: () => setHistoryOpen(!historyOpen), children: [_jsx(Icon, { icon: History, size: 12 }), t('console.history.title')] }))] })] }), _jsx("div", { className: clsx('flex min-h-0 flex-1 flex-col', renderEditor === undefined && 'p-3'), children: renderEditor === undefined ? _jsx(SqlEditor, { ...editorProps }) : _jsx(AppEditor, { render: renderEditor, ...editorProps }) })] }), session !== null && historyOpen && _jsx(HistoryPanel, { entries: history.entries, onPick: pickHistory, onClear: history.clear })] }), session !== null && notice !== null && (_jsx(Banner, { icon: notice.tone === 'error' ? CircleAlert : Check, tone: notice.tone === 'error' ? 'error' : 'neutral', message: notice.description ?? notice.title, className: "shrink-0 pb-2", children: _jsx(Button, { size: "xs", onClick: () => setNotice(null), children: t('console.dismiss') }) })), session !== null && resultsOpen && (_jsxs("section", { ref: resultsPane, "aria-label": t('console.results'), className: "relative flex min-h-24 shrink-0 flex-col border-t border-border", style: { height: resultsHeight ?? '50%', maxHeight: `calc(100% - ${MIN_EDITOR_HEIGHT}px)` }, children: [_jsx(ColumnResizeHandle, { from: "bottom", onPointerDown: startResize }), _jsx(Tabs.Root, { value: index, onValueChange: (next) => setTab(Number(next)), children: _jsx(Tabs.List, { "aria-label": t('console.results'), className: "shrink-0 pr-1.5 pl-3", end: _jsx(IconButton, { icon: X, size: "sm", label: t('console.closeResults'), onClick: () => setResultsOpen(false) }), children: results.map((result, position) => (_jsx(Tabs.Tab, { value: position, children: statementLabel(result.sql) }, position))) }) }), run.status === 'failed' && _jsx(Banner, { icon: CircleAlert, tone: "error", message: run.message, className: "shrink-0 pt-2" }), run.status === 'cancelled' && _jsx(Banner, { icon: CircleAlert, tone: "neutral", message: t('console.cancelled'), className: "shrink-0 pt-2" }), shown !== undefined && (_jsx(StatementResultView, { result: shown, offset: offset, pager: pager, onExport: exportBase === undefined ? undefined : (format) => void exportResult(exportBase, format), exporting: exporting, engine: engine, valuePanelOpen: panelOpen, onValuePanelOpenChange: setPanelOpen, keys: keys, onFollowReference: act === undefined || connection === undefined
                             ? undefined
                             : (reference) => act({
                                 kind: 'open-table',

package/dist/console/editing.js

@@ -5,7 +5,6 @@ const lineEndOf = (value, at) => {
     const newline = value.indexOf('\n', at);
     return newline === -1 ? value.length : newline;
 };
-/* The whitespace a line begins with. */
 const indentOf = (line) => /^[ \t]*/.exec(line)[0];
 /* The lines a selection touches. A selection that ends at the start of a line leaves that line out. */
 const touchedLines = (value, start, end) => {
@@ -42,13 +41,12 @@ export const outdentEdit = (value, start, end) => {
     if (total === 0) {
         return null;
     }
-    const firstLineStart = from;
     return {
         from,
         to,
         insert: lines.map((line, index) => line.slice(removed[index])).join('\n'),
-        selectionStart: Math.max(firstLineStart, start - removed[0]),
-        selectionEnd: Math.max(firstLineStart, end - total)
+        selectionStart: Math.max(from, start - removed[0]),
+        selectionEnd: Math.max(from, end - total)
     };
 };
 /* Enter: a new line that starts with the indentation of the line the caret is on, up to the caret. */

package/dist/console/useConsoleHistory.js

@@ -1,13 +1,14 @@
 import { useEffect, useState } from 'react';
 import { useDatabaseStorage } from '../client-context.js';
 import { addEntry, historyKey, parseHistory, serializeHistory } from './history.js';
+const load = (storage, key) => ({ key, entries: parseHistory(storage?.get(key) ?? null), changed: false });
 /* The runs of one connection, kept in the app's storage when it has one and for the life of the console when it has not. */
 export function useConsoleHistory(connectionId) {
     const storage = useDatabaseStorage();
     const key = historyKey(connectionId);
-    const [state, setState] = useState(() => ({ key, entries: parseHistory(storage?.get(key) ?? null), changed: false }));
+    const [state, setState] = useState(() => load(storage, key));
     if (state.key !== key) {
-        setState({ key, entries: parseHistory(storage?.get(key) ?? null), changed: false });
+        setState(load(storage, key));
     }
     useEffect(() => {
         if (state.changed) {

package/dist/ddl/alter-mysql.js

@@ -1,13 +1,7 @@
 import { columnSpecSql } from './column.js';
-import { foreignKeySql, mysqlOptionsSql } from './create.js';
+import { foreignKeySql, inlineIndexSql, mysqlOptionsSql } from './create.js';
 import { columnList, quote, tableName } from './dialect.js';
 const positionSql = (dialect, after) => (after === null ? 'FIRST' : `AFTER ${quote(dialect, after)}`);
-const indexSql = (dialect, index) => [
-    'ADD',
-    index.unique ? 'UNIQUE INDEX' : 'INDEX',
-    ...(index.name === '' ? [] : [quote(dialect, index.name)]),
-    `(${columnList(dialect, index.columns)})`
-].join(' ');
 const withPosition = (clause, position) => (position === null ? clause : `${clause} ${position}`);
 /*
  * One `ALTER TABLE`, or two when it has to be. A position clause names the columns as they are
@@ -61,7 +55,7 @@ export const mysqlAlterSql = (dialect, schema, original, draft, diff) => {
         late.push(`ADD PRIMARY KEY (${columnList(dialect, draft.primaryKey)})`);
     }
     for (const index of diff.addedIndexes) {
-        late.push(indexSql(dialect, index));
+        late.push(`ADD ${inlineIndexSql(dialect, index)}`);
     }
     for (const foreignKey of diff.addedForeignKeys) {
         late.push(`ADD ${foreignKeySql(dialect, schema, foreignKey)}`);

package/dist/ddl/alter-sqlite.js

@@ -5,7 +5,7 @@ import { isAutoIndex } from './draft.js';
 import { dropIndexSql } from './statements.js';
 const RENAME_COLUMN = [3, 25];
 const DROP_COLUMN = [3, 35];
-/* The clauses `ALTER TABLE .. ADD COLUMN` refuses: a key, a computed value, or a NOT NULL column with nothing to fill the rows with. */
+/* Whether `ALTER TABLE .. ADD COLUMN` takes the column; it refuses a key, a stored computed value, or a NOT NULL column with nothing to fill the rows with. */
 const addable = (column) => {
     if (column.autoIncrement || (column.generated && column.generatedClause !== null && /\bSTORED\b/i.test(column.generatedClause))) {
         return false;

package/dist/ddl/column.js

@@ -1,6 +1,5 @@
-import { sqlLiteral } from '../sql.js';
+import { NUMERIC_TEXT, sqlLiteral } from '../sql.js';
 import { quote } from './dialect.js';
-const NUMBER = /^[+-]?(?:\d+\.?\d*|\.\d+)(?:[eE][+-]?\d+)?$/;
 const STRING = /^'(?:[^']|'')*'$/;
 const KEYWORD = /^(?:NULL|TRUE|FALSE|CURRENT_DATE|CURRENT_TIME(?:\(\d*\))?|CURRENT_TIMESTAMP(?:\(\d*\))?|LOCALTIME(?:STAMP)?(?:\(\d*\))?|NOW\(\d*\))$/i;
 /*
@@ -9,7 +8,7 @@ const KEYWORD = /^(?:NULL|TRUE|FALSE|CURRENT_DATE|CURRENT_TIME(?:\(\d*\))?|CURRE
  */
 export const defaultClause = (expression) => {
     const text = expression.trim();
-    if (NUMBER.test(text) || STRING.test(text) || KEYWORD.test(text)) {
+    if (NUMERIC_TEXT.test(text) || STRING.test(text) || KEYWORD.test(text)) {
         return text;
     }
     return text.startsWith('(') && text.endsWith(')') ? text : `(${text})`;
@@ -28,13 +27,11 @@ export const columnSpecSql = (dialect, column, { inlinePrimaryKey = false } = {}
         parts.push(column.autoIncrement ? 'PRIMARY KEY AUTOINCREMENT' : 'PRIMARY KEY');
     }
     // MariaDB takes neither NULL nor NOT NULL after the expression of a computed column.
-    if (column.generated && dialect.flavor === 'mariadb') {
-        // The expression says everything.
-    }
-    else if (!column.nullable) {
+    const statesNullability = !(column.generated && dialect.flavor === 'mariadb');
+    if (statesNullability && !column.nullable) {
         parts.push('NOT NULL');
     }
-    else if (mysql) {
+    else if (statesNullability && mysql) {
         // MySQL gives a TIMESTAMP column NOT NULL unless it is told otherwise.
         parts.push('NULL');
     }

package/dist/ddl/create.d.ts

@@ -3,6 +3,7 @@ import { type ForeignKeyDraft, type IndexDraft, type TableDraft } from './draft.
 import type { TableOptions } from './parse.ts';
 export declare const foreignKeySql: (dialect: Dialect, schema: string, foreignKey: ForeignKeyDraft) => string;
 export declare const mysqlOptionsSql: (options: TableOptions, against?: TableOptions) => string[];
+export declare const inlineIndexSql: (dialect: Dialect, index: IndexDraft) => string;
 export declare const createIndexSql: (dialect: Dialect, schema: string, table: string, index: Pick<IndexDraft, 'name' | 'columns' | 'unique'>) => string;
 export interface CreateParts {
     readonly table: string;

package/dist/ddl/create.js

@@ -35,7 +35,7 @@ export const mysqlOptionsSql = (options, against) => {
     ];
 };
 const sqliteOptionsSql = (options) => [...(options.strict ? ['STRICT'] : []), ...(options.withoutRowid ? ['WITHOUT ROWID'] : [])];
-const inlineIndexSql = (dialect, index) => [index.unique ? 'UNIQUE INDEX' : 'INDEX', ...(index.name === '' ? [] : [quote(dialect, index.name)]), `(${columnList(dialect, index.columns)})`].join(' ');
+export const inlineIndexSql = (dialect, index) => [index.unique ? 'UNIQUE INDEX' : 'INDEX', ...(index.name === '' ? [] : [quote(dialect, index.name)]), `(${columnList(dialect, index.columns)})`].join(' ');
 /* `CREATE [UNIQUE] INDEX name ON table (columns)`. */
 export const createIndexSql = (dialect, schema, table, index) => `CREATE ${index.unique ? 'UNIQUE ' : ''}INDEX ${dialect.engine === 'sqlite' ? sqliteSchemaPrefix(dialect, schema) : ''}${quote(dialect, index.name)} ON ${tableName(dialect, dialect.engine === 'sqlite' ? '' : schema, table)} (${columnList(dialect, index.columns)})`;
 /* The `CREATE TABLE` of a draft under a name of the caller's choosing, which a rebuild uses for the table it fills before the swap. */

package/dist/ddl/diff.js

@@ -26,12 +26,8 @@ const longestRun = (positions) => {
 };
 const OPTION_FIELDS = ['engine', 'charset', 'collation', 'comment', 'withoutRowid', 'strict'];
 const matches = (original, draft) => draft.originalName !== null && (original.name === '' ? draft.key === original.key : draft.originalName === original.name);
-/* What a draft changes in the table it came from, told apart by the names items kept. */
-export const diffOf = (dialect, original, draft) => {
+const columnChanges = (dialect, original, draft) => {
     const survivors = draft.columns.filter((column) => column.originalName !== null);
-    const renames = new Map(survivors.map((column) => [column.originalName, column.name]));
-    const project = (names) => names.map((name) => renames.get(name) ?? name);
-    const originalOf = (name) => original.columns.find((column) => column.name === name);
     const positions = survivors.map((column) => original.columns.findIndex((candidate) => candidate.name === column.originalName));
     const staying = longestRun(positions);
     let survivor = 0;
@@ -44,7 +40,7 @@ export const diffOf = (dialect, original, draft) => {
             return;
         }
         const rank = survivor++;
-        const before = originalOf(column.originalName);
+        const before = original.columns.find((candidate) => candidate.name === column.originalName);
         if (before === undefined) {
             return;
         }
@@ -58,6 +54,9 @@ export const diffOf = (dialect, original, draft) => {
         });
     });
     const droppedColumns = original.columns.filter((column) => !survivors.some((kept) => kept.originalName === column.name));
+    return { droppedColumns, keptColumns, addedColumns };
+};
+const indexChanges = (original, draft, project) => {
     const droppedIndexes = [];
     const addedIndexes = draft.indexes.filter((index) => index.originalName === null);
     const renamedIndexes = [];
@@ -74,36 +73,39 @@ export const diffOf = (dialect, original, draft) => {
             renamedIndexes.push({ from: before, to: after });
         }
     }
+    return { droppedIndexes, addedIndexes, renamedIndexes };
+};
+const sameForeignKey = (before, after, project) => before.name === after.name &&
+    sameList(project(before.columns), after.columns) &&
+    before.referencedSchema === after.referencedSchema &&
+    before.referencedTable === after.referencedTable &&
+    sameList(before.referencedColumns, after.referencedColumns) &&
+    before.onUpdate === after.onUpdate &&
+    before.onDelete === after.onDelete;
+const foreignKeyChanges = (original, draft, project) => {
     const droppedForeignKeys = [];
     const addedForeignKeys = draft.foreignKeys.filter((key) => key.originalName === null);
     for (const before of original.foreignKeys) {
         const after = draft.foreignKeys.find((key) => matches(before, key));
-        const same = after !== undefined &&
-            before.name === after.name &&
-            sameList(project(before.columns), after.columns) &&
-            before.referencedSchema === after.referencedSchema &&
-            before.referencedTable === after.referencedTable &&
-            sameList(before.referencedColumns, after.referencedColumns) &&
-            before.onUpdate === after.onUpdate &&
-            before.onDelete === after.onDelete;
-        if (!same) {
+        if (after === undefined || !sameForeignKey(before, after, project)) {
             droppedForeignKeys.push(before);
             if (after !== undefined) {
                 addedForeignKeys.push(after);
             }
         }
     }
+    return { droppedForeignKeys, addedForeignKeys };
+};
+/* What a draft changes in the table it came from, told apart by the names items kept. */
+export const diffOf = (dialect, original, draft) => {
+    const renames = new Map(draft.columns.filter((column) => column.originalName !== null).map((column) => [column.originalName, column.name]));
+    const project = (names) => names.map((name) => renames.get(name) ?? name);
     return {
         renamed: original.name !== draft.name,
-        droppedColumns,
-        keptColumns,
-        addedColumns,
+        ...columnChanges(dialect, original, draft),
         primaryKeyChanged: !sameList(project(original.primaryKey), draft.primaryKey),
-        droppedIndexes,
-        addedIndexes,
-        renamedIndexes,
-        droppedForeignKeys,
-        addedForeignKeys,
+        ...indexChanges(original, draft, project),
+        ...foreignKeyChanges(original, draft, project),
         optionsChanged: OPTION_FIELDS.some((field) => original.options[field] !== draft.options[field])
     };
 };

package/dist/designer/ColumnsEditor.js

@@ -15,10 +15,12 @@ export function ColumnsEditor({ draft, dialect, disabled, onChange, className, r
     const listId = useId();
     const mysql = dialect.engine === 'mysql';
     const defaultType = typeSuggestionsOf(dialect)[0];
-    return (_jsxs("div", { ref: ref, className: clsx('flex min-h-0 flex-col', className), children: [draft.columns.length === 0 ? (_jsx(EmptyState, { children: t('designer.columns.empty') })) : (_jsxs("div", { children: [_jsx("datalist", { id: listId, children: typeSuggestionsOf(dialect).map((type) => (_jsx("option", { value: type }, type))) }), _jsxs("table", { className: "w-full border-collapse", children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { scope: "col", className: TH, children: _jsx("span", { className: "sr-only", children: t('designer.columns.order') }) }), _jsx("th", { scope: "col", className: TH, children: t('designer.columns.name') }), _jsx("th", { scope: "col", className: TH, children: t('designer.columns.type') }), _jsx("th", { scope: "col", className: clsx(TH, 'text-center'), children: t('designer.columns.notNull') }), _jsx("th", { scope: "col", className: TH, children: t('designer.columns.default') }), mysql && (_jsx("th", { scope: "col", className: clsx(TH, 'text-center'), children: t('designer.columns.autoIncrement') })), _jsx("th", { scope: "col", className: TH, children: t('designer.columns.primaryKey') }), mysql && (_jsx("th", { scope: "col", className: TH, children: t('designer.columns.comment') })), _jsx("th", { scope: "col", className: TH, children: _jsx("span", { className: "sr-only", children: t('designer.columns.remove') }) })] }) }), _jsx("tbody", { children: draft.columns.map((column, at) => {
-                                    const keyAt = draft.primaryKey.indexOf(column.name);
-                                    const locked = disabled || column.generated;
-                                    const patch = (change) => onChange(patchColumn(draft, column.key, change));
-                                    return (_jsxs("tr", { children: [_jsx("td", { className: clsx(TD, 'whitespace-nowrap'), children: _jsxs(ButtonGroup, { children: [_jsx(IconButton, { icon: ArrowUp, size: "xs", label: t('designer.columns.moveUp'), disabled: disabled || at === 0, onClick: () => onChange(moveColumn(draft, column.key, -1)) }), _jsx(IconButton, { icon: ArrowDown, size: "xs", label: t('designer.columns.moveDown'), disabled: disabled || at === draft.columns.length - 1, onClick: () => onChange(moveColumn(draft, column.key, 1)) })] }) }), _jsx("td", { className: clsx(TD, 'min-w-40'), children: _jsx(Input, { size: "sm", className: "w-full", "aria-label": t('designer.columns.name'), spellCheck: false, value: column.name, disabled: locked, onChange: (event) => patch({ name: event.target.value }) }) }), _jsx("td", { className: clsx(TD, 'min-w-36'), children: _jsx(Input, { size: "sm", mono: true, className: "w-full", "aria-label": t('designer.columns.type'), list: listId, spellCheck: false, value: column.type, disabled: locked, onChange: (event) => patch({ type: event.target.value }) }) }), _jsx("td", { className: TD, children: _jsx(Checkbox, { className: "mx-auto", label: t('designer.columns.notNullFor', { name: column.name }), checked: !column.nullable, disabled: locked, onCheckedChange: (checked) => patch({ nullable: !checked }) }) }), _jsx("td", { className: clsx(TD, 'min-w-36'), children: column.generated ? (_jsx(Pill, { mono: true, children: column.generatedClause ?? t('designer.columns.generated') })) : (_jsx(Input, { size: "sm", mono: true, className: "w-full", "aria-label": t('designer.columns.default'), placeholder: t('designer.columns.noDefault'), spellCheck: false, value: column.defaultValue ?? '', disabled: disabled, onChange: (event) => patch({ defaultValue: event.target.value === '' ? null : event.target.value }) })) }), mysql && (_jsx("td", { className: TD, children: _jsx(Checkbox, { className: "mx-auto", label: t('designer.columns.autoIncrementFor', { name: column.name }), checked: column.autoIncrement, disabled: locked, onCheckedChange: (checked) => patch({ autoIncrement: checked }) }) })), _jsx("td", { className: clsx(TD, 'whitespace-nowrap'), children: _jsxs("span", { className: "flex items-center gap-1", children: [_jsx(IconButton, { icon: KeyRound, size: "xs", label: keyAt < 0 ? t('designer.columns.addToKey') : t('designer.columns.removeFromKey'), "aria-pressed": keyAt >= 0, disabled: locked, onClick: () => onChange(togglePrimaryKey(draft, column.key)) }), keyAt >= 0 && draft.primaryKey.length > 1 && (_jsx("span", { className: "text-xs text-text-muted", children: formatNumber(keyAt + 1) }))] }) }), mysql && (_jsx("td", { className: clsx(TD, 'min-w-40'), children: _jsx(Input, { size: "sm", className: "w-full", "aria-label": t('designer.columns.comment'), value: column.comment, disabled: locked, onChange: (event) => patch({ comment: event.target.value }) }) })), _jsx("td", { className: TD, children: _jsx(IconButton, { icon: Trash2, size: "xs", label: t('designer.columns.remove'), disabled: disabled, onClick: () => onChange(removeColumn(draft, column.key)) }) })] }, column.key));
-                                }) })] })] })), _jsx("div", { className: "shrink-0 border-t border-border-soft px-3 py-2", children: _jsxs(Button, { variant: "secondary", size: "sm", disabled: disabled, onClick: () => onChange(addColumn(draft, defaultType)), children: [_jsx(Icon, { icon: Plus, size: 12 }), t('designer.columns.add')] }) })] }));
+    return (_jsxs("div", { ref: ref, className: clsx('flex min-h-0 flex-col', className), children: [draft.columns.length === 0 ? (_jsx(EmptyState, { children: t('designer.columns.empty') })) : (_jsxs("div", { children: [_jsx("datalist", { id: listId, children: typeSuggestionsOf(dialect).map((type) => (_jsx("option", { value: type }, type))) }), _jsxs("table", { className: "w-full border-collapse", children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { scope: "col", className: TH, children: _jsx("span", { className: "sr-only", children: t('designer.columns.order') }) }), _jsx("th", { scope: "col", className: TH, children: t('designer.columns.name') }), _jsx("th", { scope: "col", className: TH, children: t('designer.columns.type') }), _jsx("th", { scope: "col", className: clsx(TH, 'text-center'), children: t('designer.columns.notNull') }), _jsx("th", { scope: "col", className: TH, children: t('designer.columns.default') }), mysql && (_jsx("th", { scope: "col", className: clsx(TH, 'text-center'), children: t('designer.columns.autoIncrement') })), _jsx("th", { scope: "col", className: TH, children: t('designer.columns.primaryKey') }), mysql && (_jsx("th", { scope: "col", className: TH, children: t('designer.columns.comment') })), _jsx("th", { scope: "col", className: TH, children: _jsx("span", { className: "sr-only", children: t('designer.columns.remove') }) })] }) }), _jsx("tbody", { children: draft.columns.map((column, at) => (_jsx(ColumnRow, { draft: draft, column: column, at: at, mysql: mysql, listId: listId, disabled: disabled, onChange: onChange }, column.key))) })] })] })), _jsx("div", { className: "shrink-0 border-t border-border-soft px-3 py-2", children: _jsxs(Button, { variant: "secondary", size: "sm", disabled: disabled, onClick: () => onChange(addColumn(draft, defaultType)), children: [_jsx(Icon, { icon: Plus, size: 12 }), t('designer.columns.add')] }) })] }));
+}
+function ColumnRow({ draft, column, at, mysql, listId, disabled, onChange }) {
+    const { t } = useTranslation('database');
+    const keyAt = draft.primaryKey.indexOf(column.name);
+    const locked = disabled || column.generated;
+    const patch = (change) => onChange(patchColumn(draft, column.key, change));
+    return (_jsxs("tr", { children: [_jsx("td", { className: clsx(TD, 'whitespace-nowrap'), children: _jsxs(ButtonGroup, { children: [_jsx(IconButton, { icon: ArrowUp, size: "xs", label: t('designer.columns.moveUp'), disabled: disabled || at === 0, onClick: () => onChange(moveColumn(draft, column.key, -1)) }), _jsx(IconButton, { icon: ArrowDown, size: "xs", label: t('designer.columns.moveDown'), disabled: disabled || at === draft.columns.length - 1, onClick: () => onChange(moveColumn(draft, column.key, 1)) })] }) }), _jsx("td", { className: clsx(TD, 'min-w-40'), children: _jsx(Input, { size: "sm", className: "w-full", "aria-label": t('designer.columns.name'), spellCheck: false, value: column.name, disabled: locked, onChange: (event) => patch({ name: event.target.value }) }) }), _jsx("td", { className: clsx(TD, 'min-w-36'), children: _jsx(Input, { size: "sm", mono: true, className: "w-full", "aria-label": t('designer.columns.type'), list: listId, spellCheck: false, value: column.type, disabled: locked, onChange: (event) => patch({ type: event.target.value }) }) }), _jsx("td", { className: TD, children: _jsx(Checkbox, { className: "mx-auto", label: t('designer.columns.notNullFor', { name: column.name }), checked: !column.nullable, disabled: locked, onCheckedChange: (checked) => patch({ nullable: !checked }) }) }), _jsx("td", { className: clsx(TD, 'min-w-36'), children: column.generated ? (_jsx(Pill, { mono: true, children: column.generatedClause ?? t('designer.columns.generated') })) : (_jsx(Input, { size: "sm", mono: true, className: "w-full", "aria-label": t('designer.columns.default'), placeholder: t('designer.columns.noDefault'), spellCheck: false, value: column.defaultValue ?? '', disabled: disabled, onChange: (event) => patch({ defaultValue: event.target.value === '' ? null : event.target.value }) })) }), mysql && (_jsx("td", { className: TD, children: _jsx(Checkbox, { className: "mx-auto", label: t('designer.columns.autoIncrementFor', { name: column.name }), checked: column.autoIncrement, disabled: locked, onCheckedChange: (checked) => patch({ autoIncrement: checked }) }) })), _jsx("td", { className: clsx(TD, 'whitespace-nowrap'), children: _jsxs("span", { className: "flex items-center gap-1", children: [_jsx(IconButton, { icon: KeyRound, size: "xs", label: keyAt < 0 ? t('designer.columns.addToKey') : t('designer.columns.removeFromKey'), "aria-pressed": keyAt >= 0, disabled: locked, onClick: () => onChange(togglePrimaryKey(draft, column.key)) }), keyAt >= 0 && draft.primaryKey.length > 1 && _jsx("span", { className: "text-xs text-text-muted", children: formatNumber(keyAt + 1) })] }) }), mysql && (_jsx("td", { className: clsx(TD, 'min-w-40'), children: _jsx(Input, { size: "sm", className: "w-full", "aria-label": t('designer.columns.comment'), value: column.comment, disabled: locked, onChange: (event) => patch({ comment: event.target.value }) }) })), _jsx("td", { className: TD, children: _jsx(IconButton, { icon: Trash2, size: "xs", label: t('designer.columns.remove'), disabled: disabled, onClick: () => onChange(removeColumn(draft, column.key)) }) })] }));
 }

package/dist/designer/ForeignKeysEditor.js

@@ -19,6 +19,10 @@ export function ForeignKeysEditor({ draft, schema, tables, referenceColumns, dis
     return (_jsxs("div", { ref: ref, className: clsx('flex min-h-0 flex-col', className), children: [_jsxs("div", { children: [draft.foreignKeys.length === 0 && _jsx(EmptyState, { children: t('designer.foreignKeys.empty') }), draft.foreignKeys.map((foreignKey) => {
                         const referenced = foreignKey.referencedTable === '' ? [] : referenceColumns(foreignKey.referencedTable);
                         const choices = tables.includes(foreignKey.referencedTable) || foreignKey.referencedTable === '' ? tables : [...tables, foreignKey.referencedTable];
-                        return (_jsxs("div", { className: "flex flex-col gap-3 border-b border-border-soft px-3 py-3", children: [_jsxs("div", { className: "flex items-end gap-3", children: [_jsx(Field, { label: t('designer.foreignKeys.name'), className: "w-56", children: _jsx(Input, { size: "sm", spellCheck: false, value: foreignKey.name, disabled: disabled, onChange: (event) => onChange(patchForeignKey(draft, foreignKey.key, { name: event.target.value })) }) }), _jsx(Field, { label: t('designer.foreignKeys.referencedTable'), group: true, className: "w-56", children: _jsx(Select, { size: "sm", className: "w-full", label: t('designer.foreignKeys.referencedTable'), placeholder: t('designer.foreignKeys.pickTable'), value: foreignKey.referencedTable === '' ? null : foreignKey.referencedTable, disabled: disabled, items: choices.map((table) => ({ value: table, label: table })), onValueChange: (table) => onChange(setReferencedTable(draft, foreignKey.key, schema, table)) }) }), _jsx(Field, { label: t('designer.foreignKeys.onUpdate'), group: true, className: "w-40", children: _jsx(Select, { size: "sm", className: "w-full", label: t('designer.foreignKeys.onUpdate'), value: foreignKey.onUpdate ?? DEFAULT_ACTION, disabled: disabled, items: actions, onValueChange: (action) => onChange(patchForeignKey(draft, foreignKey.key, { onUpdate: action === DEFAULT_ACTION ? null : action })) }) }), _jsx(Field, { label: t('designer.foreignKeys.onDelete'), group: true, className: "w-40", children: _jsx(Select, { size: "sm", className: "w-full", label: t('designer.foreignKeys.onDelete'), value: foreignKey.onDelete ?? DEFAULT_ACTION, disabled: disabled, items: actions, onValueChange: (action) => onChange(patchForeignKey(draft, foreignKey.key, { onDelete: action === DEFAULT_ACTION ? null : action })) }) }), _jsx(IconButton, { icon: Trash2, size: "xs", className: "mb-1", label: t('designer.foreignKeys.remove'), disabled: disabled, onClick: () => onChange(removeForeignKey(draft, foreignKey.key)) })] }), _jsxs("div", { className: "grid grid-cols-2 gap-3", children: [_jsx(Field, { label: t('designer.foreignKeys.columns'), group: true, children: _jsx(NamePicker, { label: t('designer.foreignKeys.columns'), options: columns, value: foreignKey.columns, disabled: disabled, onToggle: (name) => onChange(toggleForeignKeyColumn(draft, foreignKey.key, 'columns', name)) }) }), _jsx(Field, { label: t('designer.foreignKeys.referencedColumns'), group: true, children: referenced === null ? (_jsx(Spinner, { size: 14, label: t('designer.foreignKeys.loadingColumns') })) : (_jsx(NamePicker, { label: t('designer.foreignKeys.referencedColumns'), options: referenced, value: foreignKey.referencedColumns, disabled: disabled, onToggle: (name) => onChange(toggleForeignKeyColumn(draft, foreignKey.key, 'referencedColumns', name)) })) })] })] }, foreignKey.key));
+                        return (_jsxs("div", { className: "flex flex-col gap-3 border-b border-border-soft px-3 py-3", children: [_jsxs("div", { className: "flex items-end gap-3", children: [_jsx(Field, { label: t('designer.foreignKeys.name'), className: "w-56", children: _jsx(Input, { size: "sm", spellCheck: false, value: foreignKey.name, disabled: disabled, onChange: (event) => onChange(patchForeignKey(draft, foreignKey.key, { name: event.target.value })) }) }), _jsx(Field, { label: t('designer.foreignKeys.referencedTable'), group: true, className: "w-56", children: _jsx(Select, { size: "sm", className: "w-full", label: t('designer.foreignKeys.referencedTable'), placeholder: t('designer.foreignKeys.pickTable'), value: foreignKey.referencedTable === '' ? null : foreignKey.referencedTable, disabled: disabled, items: choices.map((table) => ({ value: table, label: table })), onValueChange: (table) => onChange(setReferencedTable(draft, foreignKey.key, schema, table)) }) }), _jsx(ActionField, { label: t('designer.foreignKeys.onUpdate'), value: foreignKey.onUpdate, items: actions, disabled: disabled, onValueChange: (action) => onChange(patchForeignKey(draft, foreignKey.key, { onUpdate: action })) }), _jsx(ActionField, { label: t('designer.foreignKeys.onDelete'), value: foreignKey.onDelete, items: actions, disabled: disabled, onValueChange: (action) => onChange(patchForeignKey(draft, foreignKey.key, { onDelete: action })) }), _jsx(IconButton, { icon: Trash2, size: "xs", className: "mb-1", label: t('designer.foreignKeys.remove'), disabled: disabled, onClick: () => onChange(removeForeignKey(draft, foreignKey.key)) })] }), _jsxs("div", { className: "grid grid-cols-2 gap-3", children: [_jsx(Field, { label: t('designer.foreignKeys.columns'), group: true, children: _jsx(NamePicker, { label: t('designer.foreignKeys.columns'), options: columns, value: foreignKey.columns, disabled: disabled, onToggle: (name) => onChange(toggleForeignKeyColumn(draft, foreignKey.key, 'columns', name)) }) }), _jsx(Field, { label: t('designer.foreignKeys.referencedColumns'), group: true, children: referenced === null ? (_jsx(Spinner, { size: 14, label: t('designer.foreignKeys.loadingColumns') })) : (_jsx(NamePicker, { label: t('designer.foreignKeys.referencedColumns'), options: referenced, value: foreignKey.referencedColumns, disabled: disabled, onToggle: (name) => onChange(toggleForeignKeyColumn(draft, foreignKey.key, 'referencedColumns', name)) })) })] })] }, foreignKey.key));
                     })] }), _jsx("div", { className: "shrink-0 px-3 py-2", children: _jsxs(Button, { variant: "secondary", size: "sm", disabled: disabled, onClick: () => onChange(addForeignKey(draft, schema)), children: [_jsx(Icon, { icon: Plus, size: 12 }), t('designer.foreignKeys.add')] }) })] }));
 }
+/* What a key does on an update or a delete; `null` is the engine's default. */
+function ActionField({ label, value, items, disabled, onValueChange }) {
+    return (_jsx(Field, { label: label, group: true, className: "w-40", children: _jsx(Select, { size: "sm", className: "w-full", label: label, value: value ?? DEFAULT_ACTION, disabled: disabled, items: items, onValueChange: (action) => onValueChange(action === DEFAULT_ACTION ? null : action) }) }));
+}

package/dist/designer/OptionsEditor.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useId } from 'react';
 import clsx from 'clsx';
 import { useTranslation } from 'react-i18next';
@@ -10,8 +10,17 @@ export function OptionsEditor({ draft, dialect, disabled, onChange, className, r
     const { t } = useTranslation('database');
     const id = useId();
     const { options } = draft;
+    const patch = (change) => onChange(patchOptions(draft, change));
     if (dialect.engine === 'sqlite') {
-        return (_jsxs("div", { ref: ref, className: clsx('flex flex-col gap-4 p-3', className), children: [_jsxs("label", { className: "flex items-start gap-3", children: [_jsx(Switch, { label: t('designer.options.withoutRowid'), checked: options.withoutRowid, disabled: disabled, onCheckedChange: (checked) => onChange(patchOptions(draft, { withoutRowid: checked })) }), _jsxs("span", { className: "flex flex-col", children: [_jsx("span", { className: "text-sm text-text", children: t('designer.options.withoutRowid') }), _jsx("span", { className: "text-xs text-text-muted", children: t('designer.options.withoutRowidHint') })] })] }), _jsxs("label", { className: "flex items-start gap-3", children: [_jsx(Switch, { label: t('designer.options.strict'), checked: options.strict, disabled: disabled, onCheckedChange: (checked) => onChange(patchOptions(draft, { strict: checked })) }), _jsxs("span", { className: "flex flex-col", children: [_jsx("span", { className: "text-sm text-text", children: t('designer.options.strict') }), _jsx("span", { className: "text-xs text-text-muted", children: t('designer.options.strictHint') })] })] })] }));
+        return (_jsxs("div", { ref: ref, className: clsx('flex flex-col gap-4 p-3', className), children: [_jsx(OptionSwitch, { label: t('designer.options.withoutRowid'), hint: t('designer.options.withoutRowidHint'), checked: options.withoutRowid, disabled: disabled, onCheckedChange: (withoutRowid) => patch({ withoutRowid }) }), _jsx(OptionSwitch, { label: t('designer.options.strict'), hint: t('designer.options.strictHint'), checked: options.strict, disabled: disabled, onCheckedChange: (strict) => patch({ strict }) })] }));
     }
-    return (_jsxs("div", { ref: ref, className: clsx('flex max-w-xl flex-col gap-4 p-3', className), children: [_jsx("datalist", { id: `${id}-engines`, children: MYSQL_ENGINES.map((engine) => (_jsx("option", { value: engine }, engine))) }), _jsx("datalist", { id: `${id}-charsets`, children: MYSQL_CHARSETS.map((charset) => (_jsx("option", { value: charset }, charset))) }), _jsx("datalist", { id: `${id}-collations`, children: collationSuggestionsOf(options.charset).map((collation) => (_jsx("option", { value: collation }, collation))) }), _jsx(Field, { label: t('designer.options.engine'), hint: t('designer.options.serverDefault'), children: _jsx(Input, { mono: true, list: `${id}-engines`, spellCheck: false, value: options.engine, disabled: disabled, onChange: (event) => onChange(patchOptions(draft, { engine: event.target.value })) }) }), _jsx(Field, { label: t('designer.options.charset'), hint: t('designer.options.serverDefault'), children: _jsx(Input, { mono: true, list: `${id}-charsets`, spellCheck: false, value: options.charset, disabled: disabled, onChange: (event) => onChange(patchOptions(draft, { charset: event.target.value })) }) }), _jsx(Field, { label: t('designer.options.collation'), hint: t('designer.options.serverDefault'), children: _jsx(Input, { mono: true, list: `${id}-collations`, spellCheck: false, value: options.collation, disabled: disabled, onChange: (event) => onChange(patchOptions(draft, { collation: event.target.value })) }) }), _jsx(Field, { label: t('designer.options.comment'), children: _jsx(TextArea, { rows: 3, value: options.comment, disabled: disabled, onChange: (event) => onChange(patchOptions(draft, { comment: event.target.value })) }) })] }));
+    return (_jsxs("div", { ref: ref, className: clsx('flex max-w-xl flex-col gap-4 p-3', className), children: [_jsx(SuggestedField, { label: t('designer.options.engine'), listId: `${id}-engines`, suggestions: MYSQL_ENGINES, value: options.engine, disabled: disabled, onValueChange: (engine) => patch({ engine }) }), _jsx(SuggestedField, { label: t('designer.options.charset'), listId: `${id}-charsets`, suggestions: MYSQL_CHARSETS, value: options.charset, disabled: disabled, onValueChange: (charset) => patch({ charset }) }), _jsx(SuggestedField, { label: t('designer.options.collation'), listId: `${id}-collations`, suggestions: collationSuggestionsOf(options.charset), value: options.collation, disabled: disabled, onValueChange: (collation) => patch({ collation }) }), _jsx(Field, { label: t('designer.options.comment'), children: _jsx(TextArea, { rows: 3, value: options.comment, disabled: disabled, onChange: (event) => patch({ comment: event.target.value }) }) })] }));
+}
+function OptionSwitch({ label, hint, checked, disabled, onCheckedChange }) {
+    return (_jsxs("label", { className: "flex items-start gap-3", children: [_jsx(Switch, { label: label, checked: checked, disabled: disabled, onCheckedChange: onCheckedChange }), _jsxs("span", { className: "flex flex-col", children: [_jsx("span", { className: "text-sm text-text", children: label }), _jsx("span", { className: "text-xs text-text-muted", children: hint })] })] }));
+}
+/* A free text field with a list of common values to pick from; empty leaves it to the server. */
+function SuggestedField({ label, listId, suggestions, value, disabled, onValueChange }) {
+    const { t } = useTranslation('database');
+    return (_jsxs(_Fragment, { children: [_jsx("datalist", { id: listId, children: suggestions.map((suggestion) => (_jsx("option", { value: suggestion }, suggestion))) }), _jsx(Field, { label: label, hint: t('designer.options.serverDefault'), children: _jsx(Input, { mono: true, list: listId, spellCheck: false, value: value, disabled: disabled, onChange: (event) => onValueChange(event.target.value) }) })] }));
 }

package/dist/designer/SqlPreview.d.ts

@@ -1,12 +1,8 @@
 import type { Ref } from 'react';
-import type { DraftProblem } from '../ddl/index.ts';
-import type { Plan } from './plan.ts';
+import { type Plan } from './plan.ts';
 export interface SqlPreviewProps {
     plan: Plan;
     className?: string;
     ref?: Ref<HTMLDivElement>;
 }
-export declare function ProblemText({ problem }: {
-    problem: DraftProblem;
-}): import("react").JSX.Element;
 export declare function SqlPreview({ plan, className, ref }: SqlPreviewProps): import("react").JSX.Element;

package/dist/designer/SqlPreview.js

@@ -6,7 +6,7 @@ import { Button, Icon, copyText } from '@adecore/ui';
 import { CODE_TEXT } from '../code-text.js';
 import { scriptOf } from './plan.js';
 /* The sentence a problem of the draft is read as. */
-export function ProblemText({ problem }) {
+function ProblemText({ problem }) {
     const { t } = useTranslation('database');
     return _jsx(_Fragment, { children: t(`ddl.problem.${problem.code}`, { subject: problem.subject }) });
 }