@adecore/database 0.17.0 → 0.18.1

package/dist/console/QueryConsole.js

@@ -1,12 +1,12 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useId, useMemo, useRef, useState } from 'react';
 import clsx from 'clsx';
-import { Check, CircleAlert, History, Play, Square } from 'lucide-react';
+import { Check, CircleAlert, History, Play, Square, X } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
-import { Banner, Button, Icon, messageOf, PromptDialog, Spinner, Tabs, Tooltip } from '@adecore/ui';
+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 { useDatabaseClient, useDatabaseFiles } from '../client-context.js';
+import { useDatabaseAction, useDatabaseClient, useDatabaseFiles, useDatabaseNotice, useDatabaseStorage } from '../client-context.js';
 import { splitStatements, statementAt } from '../sql-split.js';
 import { DestructiveDialog } from './DestructiveDialog.js';
 import { findDestructive } from './destructive.js';
@@ -15,6 +15,7 @@ import { statementLabel } from './labels.js';
 import { isPageable, outcomeOf } from './outcome.js';
 import { SchemaPicker } from './SchemaPicker.js';
 import { orderSchemas } from './schemas.js';
+import { useResultKeys } from './result-keys.js';
 import { RUN_ALL_SHORTCUT, RUN_SHORTCUT } from './shortcuts.js';
 import { SqlEditor } from './SqlEditor.js';
 import { StatementResultView } from './StatementResultView.js';
@@ -22,35 +23,47 @@ import { TransactionControls } from './TransactionControls.js';
 import { useConsoleHistory } from './useConsoleHistory.js';
 /* Rows in the first page of a result, and in every page after it. */
 const PAGE_SIZE = 500;
-const ranText = (ran, t) => {
-    switch (ran.kind) {
-        case 'statement':
-            return t('console.ranStatement', { statement: ran.label });
-        case 'selection':
-            return t('console.ranSelection');
-        case 'all':
-            return t('console.ranAll', { count: ran.count, formatted: formatNumber(ran.count) });
+/* Where the height of the results is kept, in pixels, for every console. */
+export const RESULTS_HEIGHT_KEY = 'database:console-results';
+/* The results and the editor never shrink below these; the results start at half the console. */
+const MIN_RESULTS_HEIGHT = 96;
+const MIN_EDITOR_HEIGHT = 120;
+const parseHeight = (raw) => {
+    try {
+        const value = JSON.parse(raw ?? 'null');
+        return typeof value === 'number' && Number.isFinite(value) && value >= MIN_RESULTS_HEIGHT ? Math.round(value) : null;
+    }
+    catch {
+        return null;
     }
 };
+/* The app's editor as an element of its own, so it gets its props the way `SqlEditor` does and not during the console's render. */
+function AppEditor({ render, ...editor }) {
+    return render(editor);
+}
 /* Type SQL, run it, and read what each statement did. Several statements give a tab each. */
-export function QueryConsole({ connection, schema, value, defaultValue = '', onValueChange, defaultHistoryOpen = false, autoFocus = false, className, ref }) {
+export function QueryConsole({ connection, schema, onSchemaChange, value, defaultValue = '', onValueChange, defaultHistoryOpen = false, autoFocus = false, renderEditor, toolbarEnd, className, ref }) {
     const { t } = useTranslation('database');
     const client = useDatabaseClient();
+    const act = useDatabaseAction();
+    const onNotice = useDatabaseNotice();
     const files = useDatabaseFiles();
+    const storage = useDatabaseStorage();
     // A channel of its own, so a transaction a person starts here stays out of the table views and the designer.
     const channel = `console:${useId()}`;
-    const session = useMemo(() => client.session(connection, channel), [client, connection, channel]);
-    const engine = connection.config.engine;
+    const session = useMemo(() => (connection === undefined ? null : client.session(connection, channel)), [client, connection, channel]);
+    const engine = connection?.config.engine;
     useEffect(() => () => {
-        void session.close();
+        void session?.close();
     }, [session]);
-    const history = useConsoleHistory(connection.id);
+    // Nothing is recorded without a connection, so the key of none is never written.
+    const history = useConsoleHistory(connection?.id ?? '');
     const running = useRef(null);
     const generation = useRef(0);
-    const editor = useRef(null);
+    const editorHandle = useRef(null);
+    const resultsPane = useRef(null);
     const [own, setOwn] = useState(defaultValue);
     const [run, setRun] = useState({ status: 'idle' });
-    const [ran, setRan] = useState(null);
     const [tab, setTab] = useState(0);
     const [pages, setPages] = useState({});
     const [paging, setPaging] = useState(false);
@@ -65,25 +78,34 @@ export function QueryConsole({ connection, schema, value, defaultValue = '', onV
     const [seededSchema, setSeededSchema] = useState(schema);
     const [pickedSchema, setPickedSchema] = useState(undefined);
     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. */
+    const [resultsOpen, setResultsOpen] = useState(false);
+    const [resultsHeight, setResultsHeight] = useState(() => parseHeight(storage?.get(RESULTS_HEIGHT_KEY)));
+    const { startResize } = useColumnResize(resultsPane, {
+        size: resultsHeight ?? MIN_RESULTS_HEIGHT,
+        min: MIN_RESULTS_HEIGHT,
+        from: 'bottom',
+        max: () => (resultsPane.current?.parentElement?.clientHeight ?? 0) - MIN_EDITOR_HEIGHT,
+        onSize: setResultsHeight
+    });
     const sql = value ?? own;
     const blank = sql.trim() === '';
     const busy = run.status === 'running' || settling;
-    const activeSchema = pickedSchema ?? schema;
+    const activeSchema = onSchemaChange === undefined ? (pickedSchema ?? schema) : schema;
     if (seededSchema !== schema) {
         setSeededSchema(schema);
         setPickedSchema(undefined);
     }
     useEffect(() => () => running.current?.abort(), []);
     useEffect(() => {
-        if (autoFocus) {
-            editor.current?.focus();
+        if (resultsHeight !== null) {
+            storage?.set(RESULTS_HEIGHT_KEY, JSON.stringify(resultsHeight));
         }
-        // Only on mount: a console that later becomes active keeps the focus where the person put it.
-        // eslint-disable-next-line react/exhaustive-deps
-    }, []);
+    }, [storage, resultsHeight]);
     useEffect(() => {
-        if (engine !== 'mysql') {
+        if (session === null || engine !== 'mysql') {
             return undefined;
         }
         const controller = new AbortController();
@@ -93,35 +115,41 @@ export function QueryConsole({ connection, schema, value, defaultValue = '', onV
             .catch(() => undefined);
         return () => controller.abort();
     }, [engine, session]);
+    const notify = (next) => {
+        if (onNotice === undefined) {
+            setNotice(next);
+        }
+        else {
+            onNotice(next);
+        }
+    };
     const changeSql = (next) => {
         if (value === undefined) {
             setOwn(next);
         }
         onValueChange?.(next);
     };
+    /* The SQL a run of the scope sends, or null when there is nothing to run. */
     const targetOf = (scope) => {
-        if (scope === 'all') {
-            const statements = splitStatements(sql, engine);
-            const [only] = statements;
-            if (only === undefined) {
-                return null;
-            }
-            return { sql, ran: statements.length > 1 ? { kind: 'all', count: statements.length } : { kind: 'statement', label: statementLabel(only.text) } };
+        if (engine === undefined) {
+            return null;
+        }
+        const selection = editorHandle.current?.selection();
+        if (scope === 'all' || selection === undefined) {
+            return splitStatements(sql, engine).length === 0 ? null : sql;
         }
-        const start = editor.current?.selectionStart ?? 0;
-        const end = editor.current?.selectionEnd ?? 0;
+        const { start, end } = selection;
         const selected = sql.slice(start, end);
         if (splitStatements(selected, engine).length > 0) {
-            return { sql: selected, ran: { kind: 'selection' } };
+            return selected;
         }
-        const statement = statementAt(sql, start, engine);
-        return statement === null ? null : { sql: statement.text, ran: { kind: 'statement', label: statementLabel(statement.text) } };
+        return statementAt(sql, start, engine)?.text ?? null;
     };
     const requestRun = (target) => {
-        if (target === null || busy) {
+        if (target === null || busy || engine === undefined) {
             return;
         }
-        const statements = findDestructive(target.sql, engine);
+        const statements = findDestructive(target, engine);
         if (statements.length > 0) {
             setConfirming({ target, statements });
             return;
@@ -129,18 +157,21 @@ export function QueryConsole({ connection, schema, value, defaultValue = '', onV
         void execute(target);
     };
     const execute = async (target) => {
+        if (session === null || connection === undefined) {
+            return;
+        }
         const controller = new AbortController();
         const mine = ++generation.current;
         running.current = controller;
+        setResultsOpen(true);
         setRun({ status: 'running' });
-        setRan(target.ran);
         setNotice(null);
-        const record = (outcome) => history.record({ sql: target.sql, at: Date.now(), connection: connection.name, ...outcome });
+        const record = (outcome) => history.record({ sql: target, at: Date.now(), connection: connection.name, ...outcome });
         try {
             if (mode === 'manual' && !inTransaction) {
                 setInTransaction(await session.transaction('begin', { signal: controller.signal }));
             }
-            const executed = await session.execute(target.sql, { schema: activeSchema, limit: PAGE_SIZE, signal: controller.signal });
+            const executed = await session.execute(target, { schema: activeSchema, limit: PAGE_SIZE, signal: controller.signal });
             if (controller.signal.aborted) {
                 setRun({ status: 'cancelled' });
                 return;
@@ -169,17 +200,24 @@ export function QueryConsole({ connection, schema, value, defaultValue = '', onV
     const pickHistory = (entry, runIt) => {
         changeSql(entry.sql);
         if (runIt) {
-            requestRun({ sql: entry.sql, ran: { kind: 'statement', label: statementLabel(entry.sql) } });
+            requestRun(entry.sql);
         }
     };
     const settle = async (action) => {
+        if (session === null) {
+            return false;
+        }
         setSettling(true);
         try {
             setInTransaction(await session.transaction(action));
             return true;
         }
         catch (error) {
-            setNotice({ tone: 'error', message: messageOf(error) });
+            notify({
+                tone: 'error',
+                title: t(action === 'commit' ? 'console.transaction.commitFailed' : 'console.transaction.rollbackFailed'),
+                description: messageOf(error)
+            });
             return false;
         }
         finally {
@@ -201,6 +239,9 @@ export function QueryConsole({ connection, schema, value, defaultValue = '', onV
         }
     };
     const loadPage = async (index, result, offset) => {
+        if (session === null) {
+            return;
+        }
         const mine = generation.current;
         setPaging(true);
         setNotice(null);
@@ -211,14 +252,14 @@ export function QueryConsole({ connection, schema, value, defaultValue = '', onV
             }
         }
         catch (error) {
-            setNotice({ tone: 'error', message: messageOf(error) });
+            notify({ tone: 'error', title: t('console.pageFailed'), description: messageOf(error) });
         }
         finally {
             setPaging(false);
         }
     };
     const exportResult = async (result, format) => {
-        if (files === undefined) {
+        if (files === undefined || session === null) {
             return;
         }
         setExporting(true);
@@ -226,11 +267,11 @@ export function QueryConsole({ connection, schema, value, defaultValue = '', onV
             const path = await files.save({ suggestedName: `result.${format}`, format });
             if (path !== null) {
                 const exported = await session.export({ source: { kind: 'query', sql: result.sql, schema: activeSchema }, format, path });
-                setNotice({ tone: 'neutral', message: t('console.exported', { count: exported.rows, formatted: formatNumber(exported.rows) }) });
+                notify({ tone: 'success', title: t('console.exported', { count: exported.rows, formatted: formatNumber(exported.rows) }) });
             }
         }
         catch (error) {
-            setNotice({ tone: 'error', message: messageOf(error) });
+            notify({ tone: 'error', title: t('console.exportFailed'), description: messageOf(error) });
         }
         finally {
             setExporting(false);
@@ -242,7 +283,7 @@ export function QueryConsole({ connection, schema, value, defaultValue = '', onV
     const page = pages[index];
     const shown = base?.kind === 'rows' && page !== undefined ? { kind: 'rows', sql: base.sql, ...page.rows } : base;
     const offset = page?.offset ?? 0;
-    const pager = base?.kind === 'rows' && shown?.kind === 'rows' && isPageable(base.sql, engine) && (shown.hasMore || offset > 0)
+    const pager = base?.kind === 'rows' && shown?.kind === 'rows' && engine !== undefined && isPageable(base.sql, engine) && (shown.hasMore || offset > 0)
         ? {
             page: offset / PAGE_SIZE + 1,
             loading: paging,
@@ -251,7 +292,26 @@ export function QueryConsole({ connection, schema, value, defaultValue = '', onV
         }
         : undefined;
     const exportBase = files !== undefined && base?.kind === 'rows' ? base : undefined;
-    return (_jsxs("div", { ref: ref, className: clsx('flex min-h-0 flex-col bg-surface text-text', className), children: [_jsxs("div", { className: "flex shrink-0 border-b border-border", children: [_jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-2 p-3", children: [_jsx(SqlEditor, { ref: editor, value: sql, onValueChange: changeSql, onRun: (scope) => requestRun(targetOf(scope)), label: t('console.editor'), placeholder: t('console.placeholder') }), _jsxs("div", { className: "flex flex-wrap items-center gap-2", 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') }), ran !== null && run.status !== 'idle' && _jsx("span", { className: "min-w-0 truncate text-xs text-text-muted", children: ranText(ran, t) }), _jsxs("div", { className: "ml-auto flex items-center gap-2", children: [schemas.length > 0 && (_jsx(SchemaPicker, { schemas: schemas, value: activeSchema ?? null, disabled: busy, onValueChange: setPickedSchema })), _jsxs(Button, { 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')] })] })] })] }), historyOpen && _jsx(HistoryPanel, { entries: history.entries, onPick: pickHistory, onClear: history.clear })] }), 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" }), notice !== null && (_jsx(Banner, { icon: notice.tone === 'error' ? CircleAlert : Check, tone: notice.tone, message: notice.message, className: "shrink-0 pt-2", children: _jsx(Button, { size: "xs", onClick: () => setNotice(null), children: t('console.dismiss') }) })), results.length > 1 && (_jsx(Tabs.Root, { value: tab, onValueChange: (next) => setTab(Number(next)), children: _jsx(Tabs.List, { className: "shrink-0 px-3", children: results.map((result, position) => (_jsx(Tabs.Tab, { value: position, children: statementLabel(result.sql) }, position))) }) })), 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 }, `${index}:${offset}`)), _jsx(DestructiveDialog, { statements: confirming?.statements ?? [], onCancel: () => setConfirming(null), onConfirm: () => {
+    // Read for the statement, not for each page of it, so paging through a result asks for nothing again.
+    const keys = useResultKeys(session, engine, base);
+    const editorProps = {
+        ref: editorHandle,
+        value: sql,
+        onValueChange: changeSql,
+        run: (scope) => requestRun(targetOf(scope)),
+        busy,
+        label: t('console.editor'),
+        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
+                            ? undefined
+                            : (reference) => act({
+                                kind: 'open-table',
+                                ref: { connectionId: connection.id, schema: reference.schema, table: reference.table },
+                                view: 'data',
+                                where: reference.where
+                            }) }, `${index}:${offset}`))] })), _jsx(DestructiveDialog, { statements: confirming?.statements ?? [], onCancel: () => setConfirming(null), onConfirm: () => {
                     const target = confirming?.target;
                     setConfirming(null);
                     if (target !== undefined) {

package/dist/console/SqlEditor.d.ts

@@ -1,12 +1,2 @@
-import { type Ref } from 'react';
-export type RunScope = 'selection-or-statement' | 'all';
-export interface SqlEditorProps {
-    value: string;
-    onValueChange(value: string): void;
-    onRun(scope: RunScope): void;
-    label: string;
-    placeholder?: string;
-    className?: string;
-    ref?: Ref<HTMLTextAreaElement>;
-}
-export declare function SqlEditor({ value, onValueChange, onRun, label, placeholder, className, ref }: SqlEditorProps): import("react").JSX.Element;
+import type { QueryConsoleEditorProps } from './editor-slot.ts';
+export declare function SqlEditor({ ref, value, onValueChange, run, label, placeholder, autoFocus }: QueryConsoleEditorProps): import("react").JSX.Element;

package/dist/console/SqlEditor.js

@@ -1,14 +1,25 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useRef } from 'react';
+import { useEffect, useImperativeHandle, useRef } from 'react';
+import clsx from 'clsx';
 import { isApplePlatform, matchesShortcut, TextArea } from '@adecore/ui';
+import { CODE_TEXT } from '../code-text.js';
 import { applyEdit, indentEdit, newlineEdit, outdentEdit } from './editing.js';
 import { RUN_ALL_SHORTCUT, RUN_SHORTCUT } from './shortcuts.js';
 /*
- * Where the SQL is typed. A plain text area for now, kept to itself so an editor with highlighting
- * and completion can take its place without the console noticing: it needs only these props.
+ * Where the SQL is typed when the app brings no editor of its own: a plain text area that fills the
+ * height it gets, with the same props an editor of the app receives.
  */
-export function SqlEditor({ value, onValueChange, onRun, label, placeholder, className, ref }) {
+export function SqlEditor({ ref, value, onValueChange, run, label, placeholder, autoFocus }) {
+    const area = useRef(null);
     const pendingSelection = useRef(null);
+    useImperativeHandle(ref, () => ({ selection: () => ({ start: area.current?.selectionStart ?? 0, end: area.current?.selectionEnd ?? 0 }) }), []);
+    useEffect(() => {
+        if (autoFocus) {
+            area.current?.focus();
+        }
+        // Only on mount: a console that later becomes active keeps the focus where the person put it.
+        // eslint-disable-next-line react/exhaustive-deps
+    }, []);
     useEffect(() => {
         const pending = pendingSelection.current;
         if (pending !== null) {
@@ -17,45 +28,45 @@ export function SqlEditor({ value, onValueChange, onRun, label, placeholder, cla
         }
     }, [value]);
     // Through the browser's own insert, so Cmd+Z undoes the edit; the fallback sets the value itself.
-    const apply = (area, edit) => {
-        const before = area.value;
-        area.setSelectionRange(edit.from, edit.to);
+    const apply = (target, edit) => {
+        const before = target.value;
+        target.setSelectionRange(edit.from, edit.to);
         const inserted = document.execCommand('insertText', false, edit.insert);
-        if (inserted && area.value === applyEdit(before, edit)) {
-            area.setSelectionRange(edit.selectionStart, edit.selectionEnd);
+        if (inserted && target.value === applyEdit(before, edit)) {
+            target.setSelectionRange(edit.selectionStart, edit.selectionEnd);
             return;
         }
-        pendingSelection.current = { area, start: edit.selectionStart, end: edit.selectionEnd };
+        pendingSelection.current = { area: target, start: edit.selectionStart, end: edit.selectionEnd };
         onValueChange(applyEdit(before, edit));
     };
     const handleKeyDown = (event) => {
         const apple = isApplePlatform();
         if (matchesShortcut(RUN_ALL_SHORTCUT, event, apple)) {
             event.preventDefault();
-            onRun('all');
+            run('all');
             return;
         }
         if (matchesShortcut(RUN_SHORTCUT, event, apple)) {
             event.preventDefault();
-            onRun('selection-or-statement');
+            run('selection-or-statement');
             return;
         }
         if (event.nativeEvent.isComposing || event.metaKey || event.ctrlKey || event.altKey) {
             return;
         }
-        const area = event.currentTarget;
-        const { selectionStart, selectionEnd } = area;
+        const target = event.currentTarget;
+        const { selectionStart, selectionEnd } = target;
         if (event.key === 'Tab') {
             event.preventDefault();
-            const edit = event.shiftKey ? outdentEdit(area.value, selectionStart, selectionEnd) : indentEdit(area.value, selectionStart, selectionEnd);
+            const edit = event.shiftKey ? outdentEdit(target.value, selectionStart, selectionEnd) : indentEdit(target.value, selectionStart, selectionEnd);
             if (edit !== null) {
-                apply(area, edit);
+                apply(target, edit);
             }
         }
         else if (event.key === 'Enter' && !event.shiftKey) {
             event.preventDefault();
-            apply(area, newlineEdit(area.value, selectionStart, selectionEnd));
+            apply(target, newlineEdit(target.value, selectionStart, selectionEnd));
         }
     };
-    return (_jsx(TextArea, { ref: ref, mono: true, resize: "vertical", "aria-label": label, placeholder: placeholder, spellCheck: false, autoCapitalize: "off", autoCorrect: "off", rows: 8, value: value, className: className, onChange: (event) => onValueChange(event.target.value), onKeyDown: handleKeyDown }));
+    return (_jsx(TextArea, { ref: area, "aria-label": label, placeholder: placeholder, spellCheck: false, autoCapitalize: "off", autoCorrect: "off", value: value, className: clsx(CODE_TEXT, 'flex-1'), onChange: (event) => onValueChange(event.target.value), onKeyDown: handleKeyDown }));
 }

package/dist/console/StatementResultView.d.ts

@@ -1,4 +1,6 @@
 import type { Engine, FileFormat, StatementResult } from '../protocol/index.ts';
+import type { Reference } from '../table/references.ts';
+import type { ResultKeys } from './result-keys.ts';
 export interface ResultPager {
     readonly page: number;
     readonly loading: boolean;
@@ -14,5 +16,7 @@ export interface StatementResultViewProps {
     engine?: Engine;
     valuePanelOpen?: boolean;
     onValuePanelOpenChange?(open: boolean): void;
+    keys?: ResultKeys | null;
+    onFollowReference?(reference: Reference): void;
 }
-export declare function StatementResultView({ result, offset, pager, onExport, exporting, engine, valuePanelOpen, onValuePanelOpenChange }: StatementResultViewProps): import("react").JSX.Element;
+export declare function StatementResultView({ result, offset, pager, onExport, exporting, engine, valuePanelOpen, onValuePanelOpenChange, keys, onFollowReference }: StatementResultViewProps): import("react").JSX.Element;

package/dist/console/StatementResultView.js

@@ -1,8 +1,8 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo, useState } from 'react';
-import { ChevronLeft, ChevronRight, CircleAlert, Download, PanelRight } from 'lucide-react';
+import { ArrowUpRight, ChevronLeft, ChevronRight, CircleAlert, Download, PanelRight } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
-import { Banner, IconButton, Menu, Spinner } from '@adecore/ui';
+import { Banner, ButtonGroup, ContextMenu, Icon, IconButton, Menu, Spinner } from '@adecore/ui';
 import { formatDecimal, formatNumber } from '@adecore/ui/format';
 import { DataGrid } from '../grid/DataGrid.js';
 import { previewValueOf } from '../grid/focused-value.js';
@@ -12,7 +12,7 @@ import { ValuePanel } from '../value/ValuePanel.js';
 const RESULT_TABLE = 'result';
 const EXPORT_FORMATS = ['csv', 'tsv', 'json', 'sql'];
 /* One statement's outcome: a result set in a read-only grid, a count of affected rows, or the error the server gave. */
-export function StatementResultView({ result, offset = 0, pager, onExport, exporting = false, engine, valuePanelOpen = false, onValuePanelOpenChange }) {
+export function StatementResultView({ result, offset = 0, pager, onExport, exporting = false, engine, valuePanelOpen = false, onValuePanelOpenChange, keys = null, onFollowReference }) {
     const { t } = useTranslation('database');
     const [focus, setFocus] = useState(null);
     const rows = useMemo(() => (result.kind === 'rows' ? result.rows.map((cells, index) => ({ key: `row:${index}`, number: offset + index + 1, cells })) : []), [result, offset]);
@@ -24,9 +24,22 @@ export function StatementResultView({ result, offset = 0, pager, onExport, expor
     if (result.kind === 'done') {
         return (_jsxs("div", { className: "flex flex-col gap-1 p-4 text-sm text-text", children: [_jsx("p", { children: t('console.affected', { count: result.affected, formatted: formatNumber(result.affected) }) }), result.lastInsertId !== null && _jsx("p", { className: "text-xs text-text-muted", children: t('console.lastInsertId', { id: String(result.lastInsertId) }) }), _jsx("p", { className: "text-xs text-text-muted tabular-nums", children: elapsed })] }));
     }
+    const referenceAt = (cell) => {
+        const row = rows.find((candidate) => candidate.key === cell.rowKey);
+        return keys === null || row === undefined ? null : keys.referenceAt(cell.column, row.cells);
+    };
+    const follow = keys === null || onFollowReference === undefined
+        ? undefined
+        : (cell) => {
+            const reference = referenceAt(cell);
+            if (reference !== null) {
+                onFollowReference(reference);
+            }
+        };
+    const referenceMenu = (context) => follow === undefined || context.cell === null || keys?.isReference(context.cell.column) !== true ? null : (_jsxs(ContextMenu.Item, { disabled: referenceAt(context.cell) === null, onClick: () => context.cell !== null && follow(context.cell), children: [_jsx(Icon, { icon: ArrowUpRight, size: 14 }), t('table.goToReferenced')] }));
     const focusedRow = valuePanelOpen && focus !== null ? rows.find((row) => row.key === focus.rowKey) : undefined;
     const focusedCell = focus === null ? undefined : focusedRow?.cells[focus.column];
-    return (_jsxs(_Fragment, { children: [_jsx(ValueDock, { open: valuePanelOpen, panel: _jsx(ValuePanel, { column: focus === null ? null : (result.columns[focus.column] ?? null), value: focusedCell === undefined ? undefined : previewValueOf(focusedCell), loading: false, editable: false, onClose: () => onValuePanelOpenChange?.(false), className: "min-w-0 flex-1" }), children: _jsx(DataGrid, { label: t('console.result'), columns: result.columns, rows: rows, empty: t('console.noRows'), sqlTarget: sqlTarget, onFocusedCellChange: setFocus }) }), _jsxs("footer", { className: "flex h-10 shrink-0 items-center gap-4 border-t border-border px-3 text-xs text-text-muted", children: [_jsx("span", { className: "text-text tabular-nums", children: offset > 0 || pager !== undefined
+    return (_jsxs(_Fragment, { children: [_jsx(ValueDock, { open: valuePanelOpen, panel: _jsx(ValuePanel, { column: focus === null ? null : (result.columns[focus.column] ?? null), value: focusedCell === undefined ? undefined : previewValueOf(focusedCell), loading: false, editable: false, onClose: () => onValuePanelOpenChange?.(false), className: "min-w-0 flex-1" }), children: _jsx(DataGrid, { label: t('console.result'), columns: keys?.columns ?? result.columns, rows: rows, empty: t('console.noRows'), sqlTarget: sqlTarget, onFocusedCellChange: setFocus, onFollow: follow, canFollow: (cell) => referenceAt(cell) !== null, menu: referenceMenu }) }), _jsxs("footer", { className: "flex h-10 shrink-0 items-center gap-4 border-t border-border px-3 text-xs text-text-muted", children: [_jsx("span", { className: "text-text tabular-nums", children: offset > 0 || pager !== undefined
                             ? t('console.rowRange', { from: formatNumber(offset + Math.min(1, rows.length)), to: formatNumber(offset + rows.length) })
-                            : t('console.rows', { rows: formatNumber(result.rows.length) }) }), pager === undefined && result.hasMore && _jsx("span", { children: t('console.hasMore') }), _jsx("span", { className: "tabular-nums", children: elapsed }), _jsxs("span", { className: "ml-auto flex items-center gap-1", children: [pager !== undefined && (_jsxs(_Fragment, { children: [pager.loading && _jsx(Spinner, { size: 14, label: t('console.loading') }), _jsx(IconButton, { icon: ChevronLeft, size: "sm", label: t('console.previousPage'), disabled: pager.page <= 1 || pager.loading, onClick: pager.onPrevious }), _jsx("span", { className: "min-w-12 text-center tabular-nums", children: t('console.page', { page: formatNumber(pager.page) }) }), _jsx(IconButton, { icon: ChevronRight, size: "sm", label: t('console.nextPage'), disabled: !result.hasMore || pager.loading, onClick: pager.onNext })] })), onExport !== undefined && (_jsxs(Menu.Root, { children: [_jsx(IconButton, { icon: Download, size: "sm", label: t('console.export'), disabled: exporting, render: _jsx(Menu.Trigger, {}) }), _jsx(Menu.Popup, { children: EXPORT_FORMATS.map((format) => (_jsx(Menu.Item, { onClick: () => onExport(format), children: t('console.exportAs', { format: format.toUpperCase() }) }, format))) })] })), onValuePanelOpenChange !== undefined && (_jsx(IconButton, { icon: PanelRight, size: "sm", label: t('console.valuePanel'), "aria-pressed": valuePanelOpen, onClick: () => onValuePanelOpenChange(!valuePanelOpen) }))] })] })] }));
+                            : t('console.rows', { rows: formatNumber(result.rows.length) }) }), pager === undefined && result.hasMore && _jsx("span", { children: t('console.hasMore') }), _jsx("span", { className: "tabular-nums", children: elapsed }), _jsxs("span", { className: "ml-auto flex items-center gap-1", children: [pager !== undefined && (_jsxs(_Fragment, { children: [pager.loading && _jsx(Spinner, { size: 14, label: t('console.loading') }), _jsx(IconButton, { icon: ChevronLeft, size: "sm", label: t('console.previousPage'), disabled: pager.page <= 1 || pager.loading, onClick: pager.onPrevious }), _jsx("span", { className: "min-w-12 text-center tabular-nums", children: t('console.page', { page: formatNumber(pager.page) }) }), _jsx(IconButton, { icon: ChevronRight, size: "sm", label: t('console.nextPage'), disabled: !result.hasMore || pager.loading, onClick: pager.onNext })] })), _jsxs(ButtonGroup, { children: [onExport !== undefined && (_jsxs(Menu.Root, { children: [_jsx(IconButton, { icon: Download, size: "sm", label: t('console.export'), disabled: exporting, render: _jsx(Menu.Trigger, {}) }), _jsx(Menu.Popup, { children: EXPORT_FORMATS.map((format) => (_jsx(Menu.Item, { onClick: () => onExport(format), children: t('console.exportAs', { format: format.toUpperCase() }) }, format))) })] })), onValuePanelOpenChange !== undefined && (_jsx(IconButton, { icon: PanelRight, size: "sm", label: t('console.valuePanel'), "aria-pressed": valuePanelOpen, onClick: () => onValuePanelOpenChange(!valuePanelOpen) }))] })] })] })] }));
 }

package/dist/console/TransactionControls.js

@@ -1,12 +1,9 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import clsx from 'clsx';
 import { useTranslation } from 'react-i18next';
-import { Button, Pill, Segmented, Tooltip } from '@adecore/ui';
-/* Auto or manual commits, and while a transaction is open, the way to end it. */
+import { Button, Pill, Switch, Tooltip } from '@adecore/ui';
+/* Auto-commit on or off, and while a transaction is open, the way to end it. */
 export function TransactionControls({ mode, onModeChange, open, busy, onCommit, onRollback, className, ref }) {
     const { t } = useTranslation('database');
-    return (_jsxs("div", { ref: ref, className: clsx('flex items-center gap-2', className), children: [_jsx(Tooltip, { label: t('console.transaction.hint'), children: _jsx("div", { className: "flex", children: _jsx(Segmented, { value: mode, onValueChange: onModeChange, disabled: busy, label: t('console.transaction.mode'), options: [
-                            { id: 'auto', label: t('console.transaction.auto') },
-                            { id: 'manual', label: t('console.transaction.manual') }
-                        ] }) }) }), open && (_jsxs(_Fragment, { children: [_jsx(Pill, { tone: "needsYou", children: t('console.transaction.open') }), _jsx(Button, { size: "xs", variant: "secondary", disabled: busy, onClick: onCommit, children: t('console.transaction.commit') }), _jsx(Button, { size: "xs", variant: "danger-outline", disabled: busy, onClick: onRollback, children: t('console.transaction.rollback') })] }))] }));
+    return (_jsxs("div", { ref: ref, className: clsx('flex items-center gap-2', className), children: [_jsx(Tooltip, { label: t('console.transaction.hint'), children: _jsxs("div", { className: "flex items-center gap-2 text-xs text-text", children: [_jsx(Switch, { checked: mode === 'auto', label: t('console.transaction.autoCommit'), disabled: busy, onCheckedChange: (auto) => onModeChange(auto ? 'auto' : 'manual') }), _jsx("span", { children: t('console.transaction.autoCommit') })] }) }), open && (_jsxs(_Fragment, { children: [_jsx(Pill, { tone: "needsYou", children: t('console.transaction.open') }), _jsx(Button, { size: "xs", variant: "secondary", disabled: busy, onClick: onCommit, children: t('console.transaction.commit') }), _jsx(Button, { size: "xs", variant: "danger-outline", disabled: busy, onClick: onRollback, children: t('console.transaction.rollback') })] }))] }));
 }

package/dist/console/editor-slot.d.ts

@@ -0,0 +1,18 @@
+import type { Ref } from 'react';
+export type QueryConsoleRunScope = 'selection-or-statement' | 'all';
+export interface QueryConsoleEditorHandle {
+    selection(): {
+        readonly start: number;
+        readonly end: number;
+    };
+}
+export interface QueryConsoleEditorProps {
+    ref: Ref<QueryConsoleEditorHandle>;
+    value: string;
+    onValueChange(sql: string): void;
+    run(scope: QueryConsoleRunScope): void;
+    busy: boolean;
+    label: string;
+    placeholder: string;
+    autoFocus: boolean;
+}

package/dist/console/editor-slot.js

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

package/dist/console/result-keys.d.ts

@@ -0,0 +1,15 @@
+import type { DatabaseSession } from '../client/types.ts';
+import type { Shown } from '../grid/display.ts';
+import type { GridColumn } from '../grid/types.ts';
+import type { ColumnSource, Engine, ResultColumn, StatementResult, TableStructure } from '../protocol/index.ts';
+import { type Reference } from '../table/references.ts';
+export interface ResultKeys {
+    readonly columns: readonly GridColumn[];
+    isReference(column: number): boolean;
+    referenceAt(column: number, cells: readonly Shown[]): Reference | null;
+}
+type TableName = Pick<ColumnSource, 'schema' | 'table'>;
+export declare const sourceTablesOf: (columns: readonly ResultColumn[]) => TableName[];
+export declare const resultKeysOf: (engine: Engine, columns: readonly ResultColumn[], structures: ReadonlyMap<string, TableStructure>) => ResultKeys;
+export declare function useResultKeys(session: DatabaseSession | null, engine: Engine | undefined, result: StatementResult | undefined): ResultKeys | null;
+export {};