@adecore/database 0.0.1 → 0.16.0-beta.0

package/dist/explorer/DatabaseExplorer.js

@@ -0,0 +1,264 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import clsx from 'clsx';
+import { ChevronRight, CircleAlert, Database, Eye, Folder, KeyRound, Link2, Lock, RectangleVertical, Search, Table } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { Button, ContextMenu, EmptyState, Icon, Input, Spinner, Tooltip } from '@adecore/ui';
+import { formatNumber } from '@adecore/ui/format';
+import { useDatabaseAction, useDatabaseClient } from '../client-context.js';
+import { EngineIcon } from '../connections/EngineIcon.js';
+import { RowMenu } from './RowMenu.js';
+import { TableDialog } from './TableDialog.js';
+import { connectionKey, flattenTree, hasMenu, isExpandable, isFolderKey, isSelectable, navigate, neededLoads, selectionKey, selectionOf, tabStop, tableOf } from './tree.js';
+import { useExplorerLoads } from './use-explorer-loads.js';
+import { usePopupPress } from '../use-popup-press.js';
+import { useStoredExpansion } from './use-stored-expansion.js';
+const INDENT = 16;
+/* Where the chevron slot of the first level starts inside a row. */
+const BASE_INDENT = 4;
+const CHEVRON_SIZE = 16;
+/*
+ * The connections, their schemas and their tables as a tree, loaded as each node opens. Every row
+ * selects; a double click or Enter on a table asks the app to open it through `useDatabaseAction`.
+ */
+export function DatabaseExplorer({ connections, value, defaultValue = null, onValueChange, showSystemSchemas = false, className, ref }) {
+    const { t } = useTranslation('database');
+    const client = useDatabaseClient();
+    const act = useDatabaseAction();
+    const loads = useExplorerLoads(connections);
+    const [own, setOwn] = useState(defaultValue);
+    const [request, setRequest] = useState(null);
+    const { expanded, collapsed, setExpanded, setCollapsed } = useStoredExpansion(connections);
+    const pressedInPopup = usePopupPress();
+    const [filter, setFilter] = useState('');
+    const [activeKey, setActiveKey] = useState(null);
+    const rowElements = useRef(new Map());
+    const focusAfterRender = useRef(false);
+    const selected = value === undefined ? own : value;
+    const selectedKey = selected === null ? null : selectionKey(selected);
+    const input = {
+        connections,
+        expanded,
+        collapsed,
+        showSystemSchemas,
+        schemas: loads.schemas,
+        tables: loads.tables,
+        structures: loads.structures,
+        versions: loads.versions
+    };
+    const rows = flattenTree({ ...input, filter });
+    const stop = tabStop(rows, activeKey, selectedKey);
+    useEffect(() => {
+        for (const target of neededLoads(input)) {
+            loads.start(target);
+        }
+    });
+    useEffect(() => {
+        if (focusAfterRender.current && activeKey !== null) {
+            focusAfterRender.current = false;
+            rowElements.current.get(activeKey)?.focus();
+        }
+    }, [activeKey]);
+    const setOpen = (key, open) => {
+        // A folder is open until the person closes it, everything else is closed until they open it.
+        const folder = isFolderKey(key);
+        const toggle = (current) => {
+            const next = new Set(current);
+            if (open !== folder) {
+                next.add(key);
+            }
+            else {
+                next.delete(key);
+            }
+            return next;
+        };
+        (folder ? setCollapsed : setExpanded)(toggle);
+    };
+    const toggle = (row) => {
+        setOpen(row.key, !row.expanded);
+    };
+    const select = (selection) => {
+        if (value === undefined) {
+            setOwn(selection);
+        }
+        onValueChange?.(selection);
+    };
+    const pick = (row) => {
+        const selection = selectionOf(row);
+        if (selection !== null) {
+            select(selection);
+        }
+    };
+    const open = (row) => {
+        const ref = tableOf(row);
+        if (ref !== null) {
+            pick(row);
+            act?.({ kind: 'open-table', ref, view: 'data' });
+        }
+    };
+    const activate = (row) => {
+        switch (row.kind) {
+            case 'table':
+            case 'column':
+                open(row);
+                break;
+            case 'connection':
+            case 'schema':
+            case 'folder':
+                pick(row);
+                toggle(row);
+                break;
+            case 'error':
+                loads.reset(row.retry);
+                break;
+        }
+    };
+    const onKeyDown = (e) => {
+        if (e.target.tagName === 'BUTTON') {
+            return;
+        }
+        const action = navigate(rows, activeKey ?? stop, e.key);
+        if (action === null) {
+            return;
+        }
+        e.preventDefault();
+        if (action.type === 'focus') {
+            focusAfterRender.current = true;
+            setActiveKey(action.key);
+        }
+        else if (action.type === 'activate') {
+            const row = rows.find((candidate) => candidate.key === action.key);
+            if (row !== undefined) {
+                activate(row);
+            }
+        }
+        else {
+            setOpen(action.key, action.type === 'expand');
+        }
+    };
+    const click = (row) => {
+        if (pressedInPopup()) {
+            return;
+        }
+        setActiveKey(row.key);
+        pick(row);
+        if (row.kind !== 'table' && isExpandable(row)) {
+            toggle(row);
+        }
+        else if (row.kind === 'error') {
+            loads.reset(row.retry);
+        }
+    };
+    const refresh = (target) => {
+        loads.reset(target);
+    };
+    const disconnect = (connection) => {
+        void client.disconnect(connection.id).catch(() => undefined);
+        loads.reset({ connectionId: connection.id });
+        setOpen(connectionKey(connection.id), false);
+    };
+    const finish = (done, to) => {
+        setRequest(null);
+        const { connectionId, schema, table } = done.ref;
+        if (selected?.connectionId === connectionId && selected.schema === schema && selected.table === table) {
+            select(to === undefined ? { connectionId, schema } : { connectionId, schema, table: to });
+        }
+    };
+    const connectionOf = (row) => {
+        const selection = selectionOf(row);
+        return selection === null ? undefined : connections.find((entry) => entry.id === selection.connectionId);
+    };
+    const isSelected = (row) => row !== undefined && isSelectable(row) && row.key === selectedKey;
+    const renderRow = (row, index) => {
+        const connection = connectionOf(row);
+        const menu = connection !== undefined && hasMenu(row) ? (_jsx(RowMenu, { row: row, connection: connection, onRefresh: refresh, onDisconnect: disconnect, onRequest: setRequest })) : null;
+        const selectedRow = isSelected(row);
+        const props = {
+            role: 'treeitem',
+            'aria-level': row.level,
+            'aria-setsize': row.setSize,
+            'aria-posinset': row.posInSet,
+            'aria-expanded': isExpandable(row) ? row.expanded : undefined,
+            'aria-selected': isSelectable(row) ? selectedRow : undefined,
+            'aria-busy': row.kind === 'loading' ? true : undefined,
+            tabIndex: row.focusable ? (row.key === stop ? 0 : -1) : undefined,
+            className: clsx(
+            // The line box is the row's height, so the text lands on whole pixels in a row of an odd height.
+            'focus-ring relative mx-2 flex h-[25px] min-w-0 items-center gap-1.5 rounded-md pr-2 text-xs leading-[25px] text-text focus-visible:-outline-offset-2', selectedRow ? 'bg-surface-active' : row.focusable && 'hover:bg-surface-hover', selectedRow && isSelected(rows[index - 1]) && 'rounded-t-none', selectedRow && isSelected(rows[index + 1]) && 'rounded-b-none'),
+            style: { paddingInlineStart: BASE_INDENT + (row.level - 1) * INDENT },
+            ref: (element) => {
+                if (element === null) {
+                    rowElements.current.delete(row.key);
+                }
+                else {
+                    rowElements.current.set(row.key, element);
+                }
+            },
+            onClick: () => click(row),
+            onDoubleClick: tableOf(row) === null ? undefined : () => open(row),
+            onFocus: () => {
+                if (row.focusable) {
+                    setActiveKey(row.key);
+                }
+            }
+        };
+        const content = (_jsxs(_Fragment, { children: [Array.from({ length: row.level - 1 }, (_, i) => (_jsx("span", { "aria-hidden": true, className: "pointer-events-none absolute inset-y-0 w-px bg-border", style: { insetInlineStart: BASE_INDENT + i * INDENT + CHEVRON_SIZE / 2 - 1 } }, i))), _jsx(RowContent, { row: row, onToggle: isExpandable(row) ? () => toggle(row) : undefined })] }));
+        if (menu === null) {
+            return (_jsx("div", { ...props, children: content }, row.key));
+        }
+        return (_jsxs(ContextMenu.Root, { children: [_jsx(ContextMenu.Trigger, { render: _jsx("div", { ...props }), children: content }), _jsx(ContextMenu.Popup, { children: menu })] }, row.key));
+    };
+    return (_jsxs("div", { ref: ref, className: clsx('flex min-h-0 min-w-0 flex-col', className), children: [_jsx("div", { className: "shrink-0 border-b border-border p-2", children: _jsx(Input, { size: "sm", icon: Search, type: "search", value: filter, placeholder: t('explorer.filter'), "aria-label": t('explorer.filter'), spellCheck: false, onChange: (e) => setFilter(e.target.value), onKeyDown: (e) => {
+                        if (e.key === 'Escape') {
+                            setFilter('');
+                        }
+                    } }) }), connections.length === 0 ? (_jsx(EmptyState, { icon: Database, children: t('explorer.noConnections') })) : rows.length === 0 ? (_jsx(EmptyState, { icon: Search, children: t('explorer.noMatches', { query: filter.trim() }) })) : (_jsx("div", { role: "tree", "aria-label": t('explorer.label'), className: "min-h-0 grow overflow-y-auto py-2", onKeyDown: onKeyDown, children: rows.map(renderRow) })), request !== null && _jsx(TableDialog, { request: request, onClose: () => setRequest(null), onDone: finish })] }));
+}
+function RowContent({ row, onToggle }) {
+    const { t } = useTranslation('database');
+    switch (row.kind) {
+        case 'connection':
+            return (_jsxs(_Fragment, { children: [_jsx(Chevron, { open: row.expanded, onToggle: onToggle }), _jsx(EngineIcon, { engine: row.connection.config.engine, size: 16, className: "shrink-0 text-text-muted" }), _jsx("span", { className: "min-w-0 truncate", children: row.connection.name || t('connections.untitled') }), row.connection.config.readOnly === true && (_jsx(Tooltip, { label: t('explorer.readOnly'), children: _jsx("span", { className: "inline-flex shrink-0 text-text-faint", children: _jsx(Icon, { icon: Lock, size: 12 }) }) })), row.version !== null && _jsx("span", { className: "min-w-0 shrink-[2] truncate text-text-faint", children: row.version }), row.schemaCount !== null && _jsx(SchemaCount, { shown: row.schemaCount.shown, total: row.schemaCount.total })] }));
+        case 'schema':
+            return (_jsxs(_Fragment, { children: [_jsx(Chevron, { open: row.expanded, onToggle: onToggle }), _jsx(Icon, { icon: Database, size: 16, className: "shrink-0 text-text-muted" }), _jsx("span", { className: "min-w-0 truncate", children: row.schema })] }));
+        case 'folder':
+            return (_jsxs(_Fragment, { children: [_jsx(Chevron, { open: row.expanded, onToggle: onToggle }), _jsx(Icon, { icon: Folder, size: 16, className: "shrink-0 text-text-muted" }), _jsx("span", { className: "min-w-0 truncate", children: t(row.group === 'view' ? 'explorer.views' : 'explorer.tables') }), _jsx("span", { className: "shrink-0 text-text-faint tabular-nums", children: formatNumber(row.count) })] }));
+        case 'table':
+            return (_jsxs(_Fragment, { children: [_jsx(Chevron, { open: row.expanded, onToggle: onToggle }), _jsx(Icon, { icon: row.table.kind === 'view' ? Eye : Table, size: 16, className: "shrink-0 text-text-muted" }), _jsx("span", { className: "min-w-0 truncate", children: row.table.name })] }));
+        case 'column':
+            return (_jsxs(_Fragment, { children: [_jsx(ChevronSlot, {}), _jsx(ColumnIcon, { primaryKey: row.primaryKey, foreignKey: row.foreignKey }), _jsx("span", { className: "min-w-0 truncate", children: row.column.name }), row.column.type !== '' && _jsx("span", { className: "min-w-0 shrink-[2] truncate text-text-faint", children: row.column.type })] }));
+        case 'loading':
+            return (_jsxs(_Fragment, { children: [_jsx(ChevronSlot, {}), _jsx(Spinner, { size: 12 }), _jsx("span", { className: "text-text-faint", children: t('explorer.loading') })] }));
+        case 'error':
+            return _jsx(ErrorContent, { row: row });
+        case 'empty':
+            return (_jsxs(_Fragment, { children: [_jsx(ChevronSlot, {}), _jsx("span", { className: "text-text-faint", children: t(EMPTY_WORDS[row.of]) })] }));
+    }
+}
+const EMPTY_WORDS = { schemas: 'explorer.noSchemas', tables: 'explorer.noTables', columns: 'explorer.noColumns' };
+/* Where a chevron would be, so a row without one lines up with its siblings that have one. */
+function ChevronSlot() {
+    return _jsx("span", { className: "size-4 shrink-0" });
+}
+function Chevron({ open, onToggle }) {
+    return (_jsx("span", { className: "grid size-4 shrink-0 place-items-center text-text-muted", onClick: (e) => {
+            e.stopPropagation();
+            onToggle?.();
+        }, onDoubleClick: (e) => e.stopPropagation(), children: _jsx(Icon, { icon: ChevronRight, size: 12, className: clsx('transition-transform', open && 'rotate-90') }) }));
+}
+function SchemaCount({ shown, total }) {
+    const { t } = useTranslation('database');
+    const counts = { shown: formatNumber(shown), total: formatNumber(total) };
+    return (_jsx(Tooltip, { label: t('explorer.schemaCountHint', { count: total, ...counts }), children: _jsx("span", { className: "shrink-0 text-text-faint tabular-nums", children: t('explorer.schemaCount', counts) }) }));
+}
+function ColumnIcon({ primaryKey, foreignKey }) {
+    const { t } = useTranslation('database');
+    if (!primaryKey && !foreignKey) {
+        return _jsx(Icon, { icon: RectangleVertical, size: 16, className: "shrink-0 text-text-faint" });
+    }
+    return (_jsx(Tooltip, { label: t(primaryKey ? 'explorer.primaryKey' : 'explorer.foreignKey'), children: _jsx("span", { className: "inline-flex shrink-0 text-text-muted", children: _jsx(Icon, { icon: primaryKey ? KeyRound : Link2, size: 16 }) }) }));
+}
+function ErrorContent({ row }) {
+    const { t } = useTranslation('database');
+    return (_jsxs(_Fragment, { children: [_jsx(ChevronSlot, {}), _jsx(Icon, { icon: CircleAlert, size: 16, className: "shrink-0 text-status-error" }), _jsx(Tooltip, { label: row.message, children: _jsx("span", { className: "min-w-0 truncate text-status-error", children: row.message }) }), _jsx(Button, { size: "xs", variant: "ghost", className: "ml-auto", tabIndex: -1, children: t('explorer.retry') })] }));
+}

package/dist/explorer/RowMenu.d.ts

@@ -0,0 +1,11 @@
+import type { Connection } from '../client/types.ts';
+import type { TableRequest } from './TableDialog.tsx';
+import { type LoadTarget, type TreeRow } from './tree.ts';
+export interface RowMenuProps {
+    row: TreeRow;
+    connection: Connection;
+    onRefresh(target: LoadTarget): void;
+    onDisconnect(connection: Connection): void;
+    onRequest(request: TableRequest): void;
+}
+export declare function RowMenu({ row, connection, onRefresh, onDisconnect, onRequest }: RowMenuProps): import("react").JSX.Element[];

package/dist/explorer/RowMenu.js

@@ -0,0 +1,89 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment } from 'react';
+import { Copy, Eraser, PencilRuler, Pencil, Plus, RefreshCw, Settings2, SquareTerminal, Table, TableProperties, Trash2, Unplug } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { ContextMenu, copyText, Icon } from '@adecore/ui';
+import { useDatabaseAction, useDatabaseClient } from '../client-context.js';
+import { selectAllSql } from './tree.js';
+/* The items of a row's context menu. An item whose action has nowhere to go, or that writes to a read only connection, is left out. */
+export function RowMenu({ row, connection, onRefresh, onDisconnect, onRequest }) {
+    const { t } = useTranslation('database');
+    const client = useDatabaseClient();
+    const act = useDatabaseAction();
+    const writable = connection.config.readOnly !== true;
+    const consoleAction = (schema, sql) => ({
+        kind: 'open-console',
+        connectionId: connection.id,
+        ...(schema === undefined ? {} : { schema }),
+        ...(sql === undefined ? {} : { sql })
+    });
+    const copyDdl = async (ref) => {
+        const structure = await client.session(connection).structure(ref.schema, ref.table);
+        if (structure.ddl !== null) {
+            copyText(structure.ddl);
+        }
+    };
+    const item = (key, icon, label, onClick, destructive = false) => (_jsxs(ContextMenu.Item, { className: destructive ? 'text-status-error' : undefined, onClick: onClick, children: [_jsx(Icon, { icon: icon, size: 14 }), label] }, key));
+    const actionItem = (key, icon, label, action) => act === undefined ? null : item(key, icon, label, () => act(action));
+    const tableGroups = (ref, kind) => {
+        const request = (change) => () => onRequest({ change, connection, ref, kind });
+        return [
+            [
+                actionItem('open-data', Table, t('explorer.openData'), { kind: 'open-table', ref, view: 'data' }),
+                actionItem('open-structure', TableProperties, t('explorer.openStructure'), { kind: 'open-table', ref, view: 'structure' }),
+                kind === 'table' && writable ? actionItem('edit-table', PencilRuler, t('explorer.editTable'), { kind: 'edit-table', ref }) : null,
+                actionItem('console', SquareTerminal, t('explorer.newConsoleHere'), consoleAction(ref.schema, selectAllSql(connection.config.engine, ref)))
+            ],
+            [
+                item('copy-name', Copy, t('explorer.copyName'), () => copyText(ref.table)),
+                item('copy-ddl', Copy, t('explorer.copyDdl'), () => void copyDdl(ref).catch(() => undefined))
+            ],
+            writable
+                ? [
+                    kind === 'table' ? item('rename', Pencil, t('explorer.rename.action'), request('rename')) : null,
+                    kind === 'table' ? item('truncate', Eraser, t('explorer.truncate.action'), request('truncate'), true) : null,
+                    item('drop', Trash2, t(kind === 'view' ? 'explorer.drop.view.action' : 'explorer.drop.table.action'), request('drop'), true)
+                ]
+                : []
+        ];
+    };
+    const groupsOf = () => {
+        switch (row.kind) {
+            case 'connection':
+                return [
+                    [
+                        actionItem('console', SquareTerminal, t('explorer.newConsole'), consoleAction()),
+                        item('refresh', RefreshCw, t('explorer.refresh'), () => onRefresh({ connectionId: connection.id })),
+                        actionItem('manage', Settings2, t('explorer.editConnection'), { kind: 'manage-connection', connectionId: connection.id })
+                    ],
+                    [item('disconnect', Unplug, t('explorer.disconnect'), () => onDisconnect(connection))]
+                ];
+            case 'schema':
+            case 'folder':
+                return [
+                    [
+                        writable
+                            ? actionItem('new-table', Plus, t('explorer.newTable'), { kind: 'new-table', connectionId: connection.id, schema: row.schema })
+                            : null,
+                        actionItem('console', SquareTerminal, t('explorer.newConsoleHere'), consoleAction(row.schema)),
+                        item('refresh', RefreshCw, t('explorer.refresh'), () => onRefresh({ connectionId: connection.id, schema: row.schema }))
+                    ]
+                ];
+            case 'table':
+                return tableGroups(row.ref, row.table.kind);
+            case 'column':
+                return [
+                    [
+                        actionItem('open-data', Table, t('explorer.open'), { kind: 'open-table', ref: row.ref, view: 'data' }),
+                        item('copy-name', Copy, t('explorer.copyName'), () => copyText(row.column.name))
+                    ]
+                ];
+            default:
+                return [];
+        }
+    };
+    const groups = groupsOf()
+        .map((items) => items.filter((entry) => entry !== null))
+        .filter((items) => items.length > 0);
+    return groups.map((items, i) => (_jsxs(Fragment, { children: [i > 0 && _jsx(ContextMenu.Separator, {}), items] }, i)));
+}

package/dist/explorer/TableDialog.d.ts

@@ -0,0 +1,15 @@
+import type { Connection, TableRef } from '../client/types.ts';
+import type { TableKind } from '../protocol/index.ts';
+import { type TableChange } from './table-statements.ts';
+export interface TableRequest {
+    readonly change: TableChange;
+    readonly connection: Connection;
+    readonly ref: TableRef;
+    readonly kind: TableKind;
+}
+export interface TableDialogProps {
+    request: TableRequest;
+    onClose(): void;
+    onDone(request: TableRequest, to: string | undefined): void;
+}
+export declare function TableDialog({ request, onClose, onDone }: TableDialogProps): import("react").JSX.Element;

package/dist/explorer/TableDialog.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useTranslation } from 'react-i18next';
+import { PromptDialog } from '@adecore/ui';
+import { dialectOf } from '../ddl/index.js';
+import { useDatabaseClient } from '../client-context.js';
+import { statementOf } from './table-statements.js';
+/* The question behind Rename, Truncate and Drop: it runs the statement, keeps a failure in the dialog and sees to it that the listeners hear the shape changed. */
+export function TableDialog({ request, onClose, onDone }) {
+    const { t } = useTranslation('database');
+    const client = useDatabaseClient();
+    const { change, connection, ref, kind } = request;
+    const words = change === 'drop' ? `explorer.drop.${kind === 'view' ? 'view' : 'table'}` : `explorer.${change}`;
+    const run = async (to) => {
+        const session = client.session(connection);
+        const dialect = dialectOf(await session.server());
+        const { results } = await session.execute(statementOf(dialect, change, ref, kind, to));
+        const failed = results.find((result) => result.kind === 'error');
+        if (failed !== undefined && failed.kind === 'error') {
+            throw new Error(failed.error.message);
+        }
+        // The client tells its listeners after a `RENAME`, a `DROP` and a `TRUNCATE`, but not after a SQLite emptying, which is a `DELETE FROM`.
+        if (change === 'truncate' && dialect.engine === 'sqlite') {
+            client.notifySchemaChange({ connectionId: ref.connectionId, schema: ref.schema });
+        }
+        onDone(request, to);
+    };
+    const confirm = async (typed) => {
+        if (change === 'rename') {
+            if (typed === ref.table) {
+                onClose();
+                return;
+            }
+            await run(typed);
+        }
+        else if (change === 'drop') {
+            if (typed !== ref.table) {
+                throw new Error(t('explorer.drop.mismatch'));
+            }
+            await run();
+        }
+        else {
+            await run();
+        }
+    };
+    return (_jsx(PromptDialog, { open: true, danger: change !== 'rename', title: t(`${words}.title`, { name: ref.table }), description: change === 'rename' ? undefined : t(`${words}.description`, { name: ref.table }), field: change === 'truncate'
+            ? undefined
+            : change === 'rename'
+                ? { label: t('explorer.rename.field'), initial: ref.table, mono: true }
+                : { label: t('explorer.drop.field', { name: ref.table }), placeholder: ref.table, mono: true }, confirmLabel: t(`${words}.confirm`), onConfirm: confirm, onOpenChange: onClose }));
+}

package/dist/explorer/expansion.d.ts

@@ -0,0 +1,7 @@
+export interface Expansion {
+    readonly expanded: ReadonlySet<string>;
+    readonly collapsed: ReadonlySet<string>;
+}
+export declare const expansionKey: (connectionId: string) => string;
+export declare const parseExpansion: (raw: string | null, connectionId: string) => Expansion;
+export declare const serializeExpansion: (connectionId: string, { expanded, collapsed }: Expansion) => string | null;

package/dist/explorer/expansion.js

@@ -0,0 +1,31 @@
+import { connectionOfKey, isFolderKey } from './tree.js';
+const VERSION = 1;
+export const expansionKey = (connectionId) => `database:explorer:${connectionId}`;
+/* Reads what `serializeExpansion` wrote. Anything that does not fit gives nothing open and no folder closed. */
+export const parseExpansion = (raw, connectionId) => {
+    const none = { expanded: new Set(), collapsed: new Set() };
+    if (raw === null) {
+        return none;
+    }
+    try {
+        const parsed = JSON.parse(raw);
+        if (typeof parsed !== 'object' || parsed === null || parsed.version !== VERSION) {
+            return none;
+        }
+        const { expanded, collapsed } = parsed;
+        const own = (keys, folders) => new Set(Array.isArray(keys)
+            ? keys.filter((key) => typeof key === 'string' && key.length > 2 && isFolderKey(key) === folders && connectionOfKey(key) === connectionId)
+            : []);
+        return { expanded: own(expanded, false), collapsed: own(collapsed, true) };
+    }
+    catch {
+        return none;
+    }
+};
+/* What a connection has open as the text to store, or `null` when everything is as it starts, which removes the key. */
+export const serializeExpansion = (connectionId, { expanded, collapsed }) => {
+    const own = (keys) => [...keys].filter((key) => connectionOfKey(key) === connectionId).sort();
+    const open = own(expanded);
+    const closed = own(collapsed);
+    return open.length === 0 && closed.length === 0 ? null : JSON.stringify({ version: VERSION, expanded: open, collapsed: closed });
+};

package/dist/explorer/table-statements.d.ts

@@ -0,0 +1,5 @@
+import type { TableRef } from '../client/types.ts';
+import { type Dialect } from '../ddl/index.ts';
+import type { TableKind } from '../protocol/index.ts';
+export type TableChange = 'rename' | 'truncate' | 'drop';
+export declare const statementOf: (dialect: Dialect, change: TableChange, ref: TableRef, kind: TableKind, to?: string) => string;

package/dist/explorer/table-statements.js

@@ -0,0 +1,12 @@
+import { dropTableSql, dropViewSql, renameTableSql, truncateTableSql } from '../ddl/index.js';
+/* The statement for a change; `to` is the new name of a rename. */
+export const statementOf = (dialect, change, ref, kind, to = ref.table) => {
+    switch (change) {
+        case 'rename':
+            return renameTableSql(dialect, ref.schema, ref.table, to);
+        case 'truncate':
+            return truncateTableSql(dialect, ref.schema, ref.table);
+        case 'drop':
+            return kind === 'view' ? dropViewSql(dialect, ref.schema, ref.table) : dropTableSql(dialect, ref.schema, ref.table);
+    }
+};

package/dist/explorer/tree.d.ts

@@ -0,0 +1,125 @@
+import type { ExplorerSelection } from '../actions.ts';
+import type { Connection, TableRef } from '../client/types.ts';
+import type { ColumnInfo, Engine, SchemaInfo, TableInfo, TableKind, TableStructure } from '../protocol/index.ts';
+export type Load<T> = {
+    readonly status: 'idle';
+} | {
+    readonly status: 'loading';
+} | {
+    readonly status: 'error';
+    readonly message: string;
+} | {
+    readonly status: 'ready';
+    readonly value: T;
+};
+export declare const IDLE: Load<never>;
+export interface LoadTarget {
+    readonly connectionId: string;
+    readonly schema?: string;
+    readonly table?: string;
+}
+export declare const connectionKey: (connectionId: string) => string;
+export declare const schemaKey: (connectionId: string, schema: string) => string;
+export declare const folderKey: (connectionId: string, schema: string, group: TableKind) => string;
+export declare const tableKey: (ref: TableRef) => string;
+export declare const isFolderKey: (key: string) => boolean;
+export declare const connectionOfKey: (key: string) => string;
+export declare const columnKey: (ref: TableRef, column: string) => string;
+export declare const loadKey: (target: LoadTarget) => string;
+export declare const GROUPS: readonly TableKind[];
+interface RowBase {
+    readonly key: string;
+    readonly level: number;
+    readonly parent: string | null;
+    readonly posInSet: number;
+    readonly setSize: number;
+    readonly focusable: boolean;
+}
+export interface ConnectionRow extends RowBase {
+    readonly kind: 'connection';
+    readonly connection: Connection;
+    readonly expanded: boolean;
+    readonly version: string | null;
+    readonly schemaCount: {
+        readonly shown: number;
+        readonly total: number;
+    } | null;
+}
+export interface SchemaRow extends RowBase {
+    readonly kind: 'schema';
+    readonly connection: Connection;
+    readonly schema: string;
+    readonly expanded: boolean;
+}
+export interface FolderRow extends RowBase {
+    readonly kind: 'folder';
+    readonly connection: Connection;
+    readonly schema: string;
+    readonly group: TableKind;
+    readonly expanded: boolean;
+    readonly count: number;
+}
+export interface TableRow extends RowBase {
+    readonly kind: 'table';
+    readonly ref: TableRef;
+    readonly table: TableInfo;
+    readonly expanded: boolean;
+}
+export interface ColumnRow extends RowBase {
+    readonly kind: 'column';
+    readonly ref: TableRef;
+    readonly column: ColumnInfo;
+    readonly primaryKey: boolean;
+    readonly foreignKey: boolean;
+}
+export interface LoadingRow extends RowBase {
+    readonly kind: 'loading';
+}
+export interface ErrorRow extends RowBase {
+    readonly kind: 'error';
+    readonly message: string;
+    readonly retry: LoadTarget;
+}
+export interface EmptyRow extends RowBase {
+    readonly kind: 'empty';
+    readonly of: 'schemas' | 'tables' | 'columns';
+}
+export type TreeRow = ConnectionRow | SchemaRow | FolderRow | TableRow | ColumnRow | LoadingRow | ErrorRow | EmptyRow;
+export type ExpandableRow = ConnectionRow | SchemaRow | FolderRow | TableRow;
+export declare const isExpandable: (row: TreeRow) => row is ExpandableRow;
+export declare const tableOf: (row: TreeRow) => TableRef | null;
+export declare const selectionOf: (row: TreeRow) => ExplorerSelection | null;
+export declare const selectionKey: (selection: ExplorerSelection) => string;
+export declare const hasMenu: (row: TreeRow) => boolean;
+export declare const isSelectable: (row: TreeRow) => boolean;
+export declare const selectAllSql: (engine: Engine, ref: TableRef) => string;
+export interface TreeInput {
+    readonly connections: readonly Connection[];
+    readonly expanded: ReadonlySet<string>;
+    readonly collapsed: ReadonlySet<string>;
+    readonly filter: string;
+    readonly showSystemSchemas: boolean;
+    schemas(connectionId: string): Load<readonly SchemaInfo[]>;
+    tables(connectionId: string, schema: string): Load<readonly TableInfo[]>;
+    structures(connectionId: string, schema: string, table: string): Load<TableStructure>;
+    versions(connectionId: string): string | null;
+}
+export declare const visibleSchemas: (schemas: readonly SchemaInfo[], showSystemSchemas: boolean) => readonly SchemaInfo[];
+export declare const flattenTree: (input: TreeInput) => TreeRow[];
+export declare const neededLoads: (input: Omit<TreeInput, 'filter'>) => LoadTarget[];
+export type TreeAction = {
+    readonly type: 'focus';
+    readonly key: string;
+} | {
+    readonly type: 'expand';
+    readonly key: string;
+} | {
+    readonly type: 'collapse';
+    readonly key: string;
+} | {
+    readonly type: 'activate';
+    readonly key: string;
+};
+export declare const navigate: (rows: readonly TreeRow[], activeKey: string | null, pressed: string) => TreeAction | null;
+export declare const tabStop: (rows: readonly TreeRow[], activeKey: string | null, selectedKey: string | null) => string | null;
+export {};