@adecore/database 0.0.1 → 0.16.0-beta.0

package/dist/designer/OptionsEditor.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
+import clsx from 'clsx';
+import { useTranslation } from 'react-i18next';
+import { Field, Input, Switch, TextArea } from '@adecore/ui';
+import { MYSQL_CHARSETS, MYSQL_ENGINES, collationSuggestionsOf } from '../ddl/index.js';
+import { patchOptions } from './edit.js';
+/* The options of a table, which differ per engine: a storage engine and character set on MySQL, rowid and strict typing on SQLite. */
+export function OptionsEditor({ draft, dialect, disabled, onChange, className, ref }) {
+    const { t } = useTranslation('database');
+    const id = useId();
+    const { options } = draft;
+    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 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 })) }) })] }));
+}

package/dist/designer/SqlPreview.d.ts

@@ -0,0 +1,12 @@
+import type { Ref } from 'react';
+import type { DraftProblem } from '../ddl/index.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

@@ -0,0 +1,17 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { Copy } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { Button, Icon, copyText } from '@adecore/ui';
+import { scriptOf } from './plan.js';
+/* The sentence a problem of the draft is read as. */
+export function ProblemText({ problem }) {
+    const { t } = useTranslation('database');
+    return _jsx(_Fragment, { children: t(`ddl.problem.${problem.code}`, { subject: problem.subject }) });
+}
+/* What Apply would run, as a person reads it: monospace, read only, and copyable. */
+export function SqlPreview({ plan, className, ref }) {
+    const { t } = useTranslation('database');
+    const script = scriptOf(plan.statements);
+    return (_jsxs("section", { ref: ref, "aria-label": t('designer.sql'), className: clsx('relative flex min-h-0 flex-col border-t border-border-soft bg-surface-sunken', className), children: [_jsxs("div", { className: "flex h-8 shrink-0 items-center justify-between pr-2 pl-3", children: [_jsx("span", { className: "text-xs font-medium text-text-faint", children: t('designer.sql') }), _jsxs(Button, { variant: "ghost", size: "xs", disabled: script === '', onClick: () => copyText(script), children: [_jsx(Icon, { icon: Copy, size: 12 }), t('designer.copy')] })] }), _jsx("div", { className: "max-h-48 min-h-12 overflow-auto px-3 pb-3 select-text", children: plan.problems.length > 0 ? (_jsx("ul", { className: "flex flex-col gap-1 text-xs text-status-error", children: plan.problems.map((problem, i) => (_jsx("li", { children: _jsx(ProblemText, { problem: problem }) }, `${problem.code}:${problem.subject}:${i}`))) })) : script === '' ? (_jsx("p", { className: "text-xs text-text-faint", children: t('designer.noChanges') })) : (_jsx("pre", { className: "font-mono text-code whitespace-pre text-text", children: script })) })] }));
+}

package/dist/designer/TableDesigner.d.ts

@@ -0,0 +1,10 @@
+import { type Ref } from 'react';
+import type { Connection } from '../client/types.ts';
+export interface TableDesignerProps {
+    connection: Connection;
+    schema: string;
+    table?: string;
+    className?: string;
+    ref?: Ref<HTMLDivElement>;
+}
+export declare function TableDesigner({ connection, schema, table, className, ref }: TableDesignerProps): import("react").JSX.Element;

package/dist/designer/TableDesigner.js

@@ -0,0 +1,103 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useRef, useState } from 'react';
+import clsx from 'clsx';
+import { CircleAlert, RefreshCw } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { Banner, Button, Spinner, messageOf } from '@adecore/ui';
+import { useDatabaseAction, useDatabaseClient } from '../client-context.js';
+import { dialectOf, draftOf, emptyDraft } from '../ddl/index.js';
+import { useLoaded } from '../table/useLoaded.js';
+import { useSchemaChange } from '../use-schema-change.js';
+import { DesignerView } from './DesignerView.js';
+import { planOf } from './plan.js';
+import { recoverFrom } from './recover.js';
+import { useReferenceColumns } from './useReferenceColumns.js';
+/* Creates a table or modifies one: its columns, indexes, foreign keys and options, with the SQL it will run shown before it runs. */
+export function TableDesigner({ connection, schema, table, className, ref }) {
+    const { t } = useTranslation('database');
+    const client = useDatabaseClient();
+    const onAction = useDatabaseAction();
+    const [subject, setSubject] = useState({ requested: table, current: table ?? null });
+    const [editing, setEditing] = useState({ snapshot: null, baseline: emptyDraft(), draft: emptyDraft() });
+    const [confirming, setConfirming] = useState(false);
+    const [failure, setFailure] = useState(null);
+    const [shapeChanged, setShapeChanged] = useState(false);
+    const applying = useRef(false);
+    if (subject.requested !== table) {
+        setSubject({ requested: table, current: table ?? null });
+    }
+    const loaded = useLoaded(async (signal) => {
+        const session = client.session(connection);
+        const [server, structure, tables] = await Promise.all([
+            session.server({ signal }),
+            subject.current === null ? Promise.resolve(null) : session.structure(schema, subject.current, { signal }),
+            session.tables(schema, { signal })
+        ]);
+        return { dialect: dialectOf(server), structure, tables: tables.filter((info) => info.kind === 'table').map((info) => info.name) };
+    }, JSON.stringify([connection.id, schema, subject.current]));
+    const snapshot = loaded.value;
+    // The apply of this designer reloads by itself; a change from elsewhere replaces an untouched draft and warns about an edited one.
+    useSchemaChange(connection.id, schema, () => {
+        if (applying.current) {
+            return;
+        }
+        if (editing.draft === editing.baseline) {
+            loaded.reload();
+        }
+        else {
+            setShapeChanged(true);
+        }
+    });
+    // A new snapshot, after a load or an apply, starts a fresh draft.
+    if (snapshot !== null && editing.snapshot !== snapshot) {
+        const baseline = snapshot.structure === null ? emptyDraft() : draftOf(snapshot.structure);
+        setEditing({ snapshot, baseline, draft: baseline });
+        setShapeChanged(false);
+    }
+    const draft = editing.draft;
+    const plan = useMemo(() => (snapshot === null ? null : planOf(snapshot.dialect, schema, snapshot.structure, draft)), [snapshot, schema, draft]);
+    const referenceColumns = useReferenceColumns(client, connection, schema, draft);
+    const readOnlyReason = connection.config.readOnly === true ? t('designer.readOnly.connection') : snapshot?.structure?.kind === 'view' ? t('designer.readOnly.view') : null;
+    async function apply() {
+        if (snapshot === null || plan === null) {
+            return;
+        }
+        const session = client.session(connection);
+        const statements = plan.statements;
+        const wasNew = snapshot.structure === null;
+        let outcome;
+        applying.current = true;
+        try {
+            outcome = await session.execute(statements.join(';\n'), { schema });
+        }
+        catch (e) {
+            setFailure(messageOf(e, t('designer.failed')));
+            setConfirming(false);
+            return;
+        }
+        finally {
+            applying.current = false;
+        }
+        const failed = outcome.results.find((result) => result.kind === 'error');
+        if (failed?.kind === 'error') {
+            await recoverFrom(session, statements, failed.sql, outcome.inTransaction);
+            setFailure(failed.error.message);
+            setConfirming(false);
+            return;
+        }
+        setFailure(null);
+        setConfirming(false);
+        // The client has told its listeners already: `execute` does for a statement that creates, alters or drops.
+        if (wasNew || draft.name !== draft.originalName) {
+            setSubject({ requested: table, current: draft.name });
+            onAction?.({ kind: 'edit-table', ref: { connectionId: connection.id, schema, table: draft.name } });
+        }
+        else {
+            loaded.reload();
+        }
+    }
+    return (_jsxs("div", { ref: ref, className: clsx('flex min-h-0 min-w-0 flex-col', className), children: [(loaded.loading || snapshot === null) && loaded.error === null && (_jsx("div", { className: "grid grow place-items-center py-8 text-text-muted", children: _jsx(Spinner, { size: 20, label: t('designer.loading') }) })), loaded.error !== null && snapshot === null && (_jsx("div", { className: "p-3", children: _jsx(Banner, { icon: CircleAlert, tone: "error", className: "w-full", message: loaded.error, children: _jsx(Button, { variant: "secondary", size: "sm", onClick: loaded.reload, children: t('designer.retry') }) }) })), shapeChanged && (_jsx("div", { className: "shrink-0 px-3 pt-3", children: _jsx(Banner, { icon: RefreshCw, tone: "neutral", className: "w-full", message: t('designer.changed'), children: _jsx(Button, { variant: "secondary", size: "sm", onClick: loaded.reload, children: t('designer.reload') }) }) })), !loaded.loading && snapshot !== null && plan !== null && (_jsx(DesignerView, { className: "grow", dialect: snapshot.dialect, schema: schema, draft: draft, isNew: snapshot.structure === null, changed: draft !== editing.baseline, tables: snapshot.tables, plan: plan, readOnlyReason: readOnlyReason, failure: failure, confirming: confirming, referenceColumns: referenceColumns, onChange: (next) => setEditing({ ...editing, draft: next }), onRequestApply: () => setConfirming(true), onConfirm: apply, onCancelConfirm: () => setConfirming(false), onRevert: () => {
+                    setEditing({ ...editing, draft: editing.baseline });
+                    setFailure(null);
+                }, onDismissFailure: () => setFailure(null) }))] }));
+}

package/dist/designer/edit.d.ts

@@ -0,0 +1,17 @@
+import { type ColumnDraft, type ForeignKeyDraft, type IndexDraft, type TableDraft, type TableOptions } from '../ddl/index.ts';
+export declare const renameTable: (draft: TableDraft, name: string) => TableDraft;
+export declare const addColumn: (draft: TableDraft, type: string) => TableDraft;
+export declare const patchColumn: (draft: TableDraft, key: string, patch: Partial<ColumnDraft>) => TableDraft;
+export declare const removeColumn: (draft: TableDraft, key: string) => TableDraft;
+export declare const moveColumn: (draft: TableDraft, key: string, offset: -1 | 1) => TableDraft;
+export declare const togglePrimaryKey: (draft: TableDraft, key: string) => TableDraft;
+export declare const addIndex: (draft: TableDraft) => TableDraft;
+export declare const patchIndex: (draft: TableDraft, key: string, patch: Partial<IndexDraft>) => TableDraft;
+export declare const toggleIndexColumn: (draft: TableDraft, key: string, column: string) => TableDraft;
+export declare const removeIndex: (draft: TableDraft, key: string) => TableDraft;
+export declare const addForeignKey: (draft: TableDraft, schema: string) => TableDraft;
+export declare const patchForeignKey: (draft: TableDraft, key: string, patch: Partial<ForeignKeyDraft>) => TableDraft;
+export declare const setReferencedTable: (draft: TableDraft, key: string, schema: string, table: string) => TableDraft;
+export declare const toggleForeignKeyColumn: (draft: TableDraft, key: string, side: 'columns' | 'referencedColumns', column: string) => TableDraft;
+export declare const removeForeignKey: (draft: TableDraft, key: string) => TableDraft;
+export declare const patchOptions: (draft: TableDraft, patch: Partial<TableOptions>) => TableDraft;

package/dist/designer/edit.js

@@ -0,0 +1,115 @@
+import { emptyColumn, nextKey } from '../ddl/index.js';
+/* The editing steps of a draft. Each returns a new draft and leaves the one it was given alone. */
+const replaceAt = (items, key, change) => items.map((item) => (item.key === key ? change(item) : item));
+const toggled = (names, name) => names.includes(name) ? names.filter((candidate) => candidate !== name) : [...names, name];
+export const renameTable = (draft, name) => ({ ...draft, name });
+export const addColumn = (draft, type) => ({
+    ...draft,
+    columns: [...draft.columns, { ...emptyColumn(), type, name: `column_${draft.columns.length + 1}` }]
+});
+/* A rename carries along every key, index and foreign key that names the column. */
+export const patchColumn = (draft, key, patch) => {
+    const before = draft.columns.find((column) => column.key === key);
+    if (before === undefined) {
+        return draft;
+    }
+    const inKey = draft.primaryKey.includes(before.name);
+    const applied = inKey && patch.nullable === true ? { ...patch, nullable: false } : patch;
+    const after = { ...before, ...applied };
+    const follow = (names) => names.map((name) => (name === before.name ? after.name : name));
+    return {
+        ...draft,
+        columns: replaceAt(draft.columns, key, () => after),
+        primaryKey: follow(draft.primaryKey),
+        indexes: draft.indexes.map((index) => ({ ...index, columns: follow(index.columns) })),
+        foreignKeys: draft.foreignKeys.map((foreignKey) => ({ ...foreignKey, columns: follow(foreignKey.columns) }))
+    };
+};
+/* What names the column goes with it: an index keeps its other columns, a foreign key on it is dropped. */
+export const removeColumn = (draft, key) => {
+    const gone = draft.columns.find((column) => column.key === key);
+    if (gone === undefined) {
+        return draft;
+    }
+    return {
+        ...draft,
+        columns: draft.columns.filter((column) => column.key !== key),
+        primaryKey: draft.primaryKey.filter((name) => name !== gone.name),
+        indexes: draft.indexes
+            .map((index) => ({ ...index, columns: index.columns.filter((name) => name !== gone.name) }))
+            .filter((index) => index.columns.length > 0),
+        foreignKeys: draft.foreignKeys.filter((foreignKey) => !foreignKey.columns.includes(gone.name))
+    };
+};
+export const moveColumn = (draft, key, offset) => {
+    const from = draft.columns.findIndex((column) => column.key === key);
+    const to = from + offset;
+    if (from < 0 || to < 0 || to >= draft.columns.length) {
+        return draft;
+    }
+    const columns = [...draft.columns];
+    [columns[from], columns[to]] = [columns[to], columns[from]];
+    return { ...draft, columns };
+};
+/* A column in the primary key cannot be null, so putting it there says so. */
+export const togglePrimaryKey = (draft, key) => {
+    const column = draft.columns.find((candidate) => candidate.key === key);
+    if (column === undefined) {
+        return draft;
+    }
+    const joining = !draft.primaryKey.includes(column.name);
+    const toggledKey = { ...draft, primaryKey: toggled(draft.primaryKey, column.name) };
+    return joining ? patchColumn(toggledKey, key, { nullable: false }) : toggledKey;
+};
+export const addIndex = (draft) => ({
+    ...draft,
+    indexes: [
+        ...draft.indexes,
+        { key: nextKey(), originalName: null, name: `idx_${draft.name || 'table'}_${draft.indexes.length + 1}`, columns: [], unique: false }
+    ]
+});
+export const patchIndex = (draft, key, patch) => ({
+    ...draft,
+    indexes: replaceAt(draft.indexes, key, (index) => ({ ...index, ...patch }))
+});
+export const toggleIndexColumn = (draft, key, column) => ({
+    ...draft,
+    indexes: replaceAt(draft.indexes, key, (index) => ({ ...index, columns: toggled(index.columns, column) }))
+});
+export const removeIndex = (draft, key) => ({ ...draft, indexes: draft.indexes.filter((index) => index.key !== key) });
+export const addForeignKey = (draft, schema) => ({
+    ...draft,
+    foreignKeys: [
+        ...draft.foreignKeys,
+        {
+            key: nextKey(),
+            originalName: null,
+            name: `fk_${draft.name || 'table'}_${draft.foreignKeys.length + 1}`,
+            columns: [],
+            referencedSchema: schema,
+            referencedTable: '',
+            referencedColumns: [],
+            onUpdate: null,
+            onDelete: null
+        }
+    ]
+});
+export const patchForeignKey = (draft, key, patch) => ({
+    ...draft,
+    foreignKeys: replaceAt(draft.foreignKeys, key, (foreignKey) => ({ ...foreignKey, ...patch }))
+});
+/* Another table has other columns, so the old pick is forgotten. */
+export const setReferencedTable = (draft, key, schema, table) => patchForeignKey(draft, key, { referencedSchema: schema, referencedTable: table, referencedColumns: [] });
+export const toggleForeignKeyColumn = (draft, key, side, column) => ({
+    ...draft,
+    foreignKeys: replaceAt(draft.foreignKeys, key, (foreignKey) => ({ ...foreignKey, [side]: toggled(foreignKey[side], column) }))
+});
+export const removeForeignKey = (draft, key) => ({
+    ...draft,
+    foreignKeys: draft.foreignKeys.filter((foreignKey) => foreignKey.key !== key)
+});
+/* A collation belongs to a character set, so choosing another set empties it. */
+export const patchOptions = (draft, patch) => {
+    const charsetChanged = patch.charset !== undefined && patch.charset !== draft.options.charset;
+    return { ...draft, options: { ...draft.options, ...(charsetChanged ? { collation: '' } : {}), ...patch } };
+};

package/dist/designer/editor-props.d.ts

@@ -0,0 +1,10 @@
+import type { Ref } from 'react';
+import type { Dialect, TableDraft } from '../ddl/index.ts';
+export interface EditorProps {
+    draft: TableDraft;
+    dialect: Dialect;
+    disabled: boolean;
+    onChange(draft: TableDraft): void;
+    className?: string;
+    ref?: Ref<HTMLDivElement>;
+}

package/dist/designer/editor-props.js

@@ -0,0 +1 @@
+export {};

package/dist/designer/plan.d.ts

@@ -0,0 +1,9 @@
+import type { TableStructure } from '../protocol/index.ts';
+import { type Dialect, type DraftProblem, type TableDraft } from '../ddl/index.ts';
+export interface Plan {
+    readonly problems: readonly DraftProblem[];
+    readonly statements: readonly string[];
+    readonly destructive: boolean;
+}
+export declare const planOf: (dialect: Dialect, schema: string, structure: TableStructure | null, draft: TableDraft) => Plan;
+export declare const scriptOf: (statements: readonly string[]) => string;

package/dist/designer/plan.js

@@ -0,0 +1,13 @@
+import { alterTableSql, createTableSql, dropsColumns, draftOf, validateDraft } from '../ddl/index.js';
+export const planOf = (dialect, schema, structure, draft) => {
+    const problems = validateDraft(dialect, draft);
+    if (problems.length > 0) {
+        return { problems, statements: [], destructive: false };
+    }
+    if (structure === null) {
+        return { problems, statements: createTableSql(dialect, schema, draft), destructive: false };
+    }
+    return { problems, statements: alterTableSql(dialect, schema, structure, draft), destructive: dropsColumns(draftOf(structure), draft) };
+};
+/* The statements as a person reads them and as a script runs them. */
+export const scriptOf = (statements) => statements.map((statement) => `${statement};`).join('\n');

package/dist/designer/recover.d.ts

@@ -0,0 +1,2 @@
+import type { DatabaseSession } from '../client/types.ts';
+export declare function recoverFrom(session: DatabaseSession, statements: readonly string[], failedSql: string, inTransaction: boolean): Promise<void>;

package/dist/designer/recover.js

@@ -0,0 +1,18 @@
+const REBUILD_START = 'PRAGMA foreign_keys=OFF';
+/*
+ * A failed rebuild leaves SQLite with a transaction it began and foreign keys it switched off.
+ * Only a transaction this script began is rolled back, since one the person had open is theirs.
+ */
+export async function recoverFrom(session, statements, failedSql, inTransaction) {
+    try {
+        if (inTransaction && statements.includes('BEGIN') && failedSql.trim().toUpperCase() !== 'BEGIN') {
+            await session.transaction('rollback');
+        }
+        if (statements[0] === REBUILD_START) {
+            await session.execute('PRAGMA foreign_keys=ON');
+        }
+    }
+    catch {
+        // The error of the statement that failed is the one worth showing.
+    }
+}

package/dist/designer/useReferenceColumns.d.ts

@@ -0,0 +1,3 @@
+import type { Connection, DatabaseClient } from '../client/types.ts';
+import type { TableDraft } from '../ddl/index.ts';
+export declare function useReferenceColumns(client: DatabaseClient, connection: Connection, schema: string, draft: TableDraft): (table: string) => readonly string[] | null;

package/dist/designer/useReferenceColumns.js

@@ -0,0 +1,36 @@
+import { useEffect, useState } from 'react';
+/*
+ * The columns of the tables the draft's foreign keys point at, loaded as they are picked. `scope`
+ * is the connection and the schema, so a cache never answers for another. A table that fails to
+ * load has no columns to pick from, which stops the wait.
+ */
+export function useReferenceColumns(client, connection, schema, draft) {
+    const scope = `${connection.id}\u0000${schema}`;
+    const [cache, setCache] = useState({ scope, columns: {} });
+    const known = cache.scope === scope ? cache.columns : {};
+    const wanted = [...new Set(draft.foreignKeys.map((foreignKey) => foreignKey.referencedTable))]
+        .filter((table) => table !== '' && table !== draft.name && !(table in known))
+        .sort();
+    const wantedKey = wanted.join('\u0000');
+    useEffect(() => {
+        if (wantedKey === '') {
+            return undefined;
+        }
+        let current = true;
+        const session = client.session(connection);
+        for (const table of wantedKey.split('\u0000')) {
+            session
+                .structure(schema, table)
+                .then((structure) => structure.columns.map((column) => column.name), () => [])
+                .then((names) => {
+                if (current) {
+                    setCache((now) => ({ scope, columns: { ...(now.scope === scope ? now.columns : {}), [table]: names } }));
+                }
+            });
+        }
+        return () => {
+            current = false;
+        };
+    }, [client, connection, schema, scope, wantedKey]);
+    return (table) => (table === draft.name ? draft.columns.map((column) => column.name) : (known[table] ?? null));
+}

package/dist/explorer/DatabaseExplorer.d.ts

@@ -0,0 +1,13 @@
+import { type Ref } from 'react';
+import type { ExplorerSelection } from '../actions.ts';
+import type { Connection } from '../client/types.ts';
+export interface DatabaseExplorerProps {
+    connections: readonly Connection[];
+    value?: ExplorerSelection | null;
+    defaultValue?: ExplorerSelection | null;
+    onValueChange?(selection: ExplorerSelection | null): void;
+    showSystemSchemas?: boolean;
+    className?: string;
+    ref?: Ref<HTMLDivElement>;
+}
+export declare function DatabaseExplorer({ connections, value, defaultValue, onValueChange, showSystemSchemas, className, ref }: DatabaseExplorerProps): import("react").JSX.Element;