@adecore/database 0.17.0 → 0.18.0

package/src/console/SqlEditor.tsx

@@ -1,30 +1,29 @@
-import { useEffect, useRef, type KeyboardEvent, type Ref } from 'react';
+import { useEffect, useImperativeHandle, useRef, type KeyboardEvent } from 'react';
+import clsx from 'clsx';
 import { isApplePlatform, matchesShortcut, TextArea } from '@adecore/ui';
+import { CODE_TEXT } from '../code-text.ts';
 import { applyEdit, indentEdit, newlineEdit, outdentEdit, type TextEdit } from './editing.ts';
+import type { QueryConsoleEditorProps } from './editor-slot.ts';
 import { RUN_ALL_SHORTCUT, RUN_SHORTCUT } from './shortcuts.ts';
 
-/* What the person asked for: the selection or the statement under the caret, or the whole script. */
-export type RunScope = 'selection-or-statement' | 'all';
-
-export interface SqlEditorProps {
-    value: string;
-    onValueChange(value: string): void;
-    /* Mod+Enter and Mod+Shift+Enter. */
-    onRun(scope: RunScope): void;
-    label: string;
-    placeholder?: string;
-    className?: string;
-    /* The text area, which holds the selection and the caret the console reads when it runs. */
-    ref?: Ref<HTMLTextAreaElement>;
-}
-
 /*
- * 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 }: SqlEditorProps) {
+export function SqlEditor({ ref, value, onValueChange, run, label, placeholder, autoFocus }: QueryConsoleEditorProps) {
+    const area = useRef<HTMLTextAreaElement>(null);
     const pendingSelection = useRef<{ area: HTMLTextAreaElement; start: number; end: number } | null>(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) {
@@ -34,15 +33,15 @@ 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: HTMLTextAreaElement, edit: TextEdit): void => {
-        const before = area.value;
-        area.setSelectionRange(edit.from, edit.to);
+    const apply = (target: HTMLTextAreaElement, edit: TextEdit): void => {
+        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));
     };
 
@@ -50,44 +49,41 @@ export function SqlEditor({ value, onValueChange, onRun, label, placeholder, cla
         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 (
         <TextArea
-            ref={ref}
-            mono
-            resize="vertical"
+            ref={area}
             aria-label={label}
             placeholder={placeholder}
             spellCheck={false}
             autoCapitalize="off"
             autoCorrect="off"
-            rows={8}
             value={value}
-            className={className}
+            className={clsx(CODE_TEXT, 'flex-1')}
             onChange={(event) => onValueChange(event.target.value)}
             onKeyDown={handleKeyDown}
         />

package/src/console/StatementResultView.tsx

@@ -1,14 +1,16 @@
-import { useMemo, useState } from 'react';
-import { ChevronLeft, ChevronRight, CircleAlert, Download, PanelRight } from 'lucide-react';
+import { useMemo, useState, type ReactNode } from '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.tsx';
 import { previewValueOf } from '../grid/focused-value.ts';
-import type { FocusedCell, GridRow } from '../grid/types.ts';
+import type { FocusedCell, GridMenuContext, GridRow } from '../grid/types.ts';
 import { ValueDock } from '../grid/ValueDock.tsx';
 import type { Engine, FileFormat, StatementResult } from '../protocol/index.ts';
 import type { SqlTarget } from '../sql.ts';
+import type { Reference } from '../table/references.ts';
+import type { ResultKeys } from './result-keys.ts';
 import { ValuePanel } from '../value/ValuePanel.tsx';
 
 /* What "Copy as SQL INSERT" names the table of a result that comes from no table. */
@@ -39,6 +41,10 @@ export interface StatementResultViewProps {
     valuePanelOpen?: boolean;
     /* Offers the toggle of the value panel in the footer of a result set. */
     onValuePanelOpenChange?(open: boolean): void;
+    /* What the tables of the columns say about them, which marks the keys in the headers. */
+    keys?: ResultKeys | null;
+    /* Offers Go to referenced row on a cell of a foreign key, as the table view does. */
+    onFollowReference?(reference: Reference): void;
 }
 
 /* One statement's outcome: a result set in a read-only grid, a count of affected rows, or the error the server gave. */
@@ -50,7 +56,9 @@ export function StatementResultView({
     exporting = false,
     engine,
     valuePanelOpen = false,
-    onValuePanelOpenChange
+    onValuePanelOpenChange,
+    keys = null,
+    onFollowReference
 }: StatementResultViewProps) {
     const { t } = useTranslation('database');
     const [focus, setFocus] = useState<FocusedCell | null>(null);
@@ -92,6 +100,27 @@ export function StatementResultView({
         );
     }
 
+    const referenceAt = (cell: FocusedCell): Reference | null => {
+        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: FocusedCell): void => {
+                  const reference = referenceAt(cell);
+                  if (reference !== null) {
+                      onFollowReference(reference);
+                  }
+              };
+    const referenceMenu = (context: GridMenuContext): ReactNode =>
+        follow === undefined || context.cell === null || keys?.isReference(context.cell.column) !== true ? null : (
+            <ContextMenu.Item disabled={referenceAt(context.cell) === null} onClick={() => context.cell !== null && follow(context.cell)}>
+                <Icon icon={ArrowUpRight} size={14} />
+                {t('table.goToReferenced')}
+            </ContextMenu.Item>
+        );
+
     const focusedRow = valuePanelOpen && focus !== null ? rows.find((row) => row.key === focus.rowKey) : undefined;
     const focusedCell = focus === null ? undefined : focusedRow?.cells[focus.column];
 
@@ -112,11 +141,14 @@ export function StatementResultView({
             >
                 <DataGrid
                     label={t('console.result')}
-                    columns={result.columns}
+                    columns={keys?.columns ?? result.columns}
                     rows={rows}
                     empty={t('console.noRows')}
                     sqlTarget={sqlTarget}
                     onFocusedCellChange={setFocus}
+                    onFollow={follow}
+                    canFollow={(cell) => referenceAt(cell) !== null}
+                    menu={referenceMenu}
                 />
             </ValueDock>
             <footer className="flex h-10 shrink-0 items-center gap-4 border-t border-border px-3 text-xs text-text-muted">
@@ -148,27 +180,29 @@ export function StatementResultView({
                             />
                         </>
                     )}
-                    {onExport !== undefined && (
-                        <Menu.Root>
-                            <IconButton icon={Download} size="sm" label={t('console.export')} disabled={exporting} render={<Menu.Trigger />} />
-                            <Menu.Popup>
-                                {EXPORT_FORMATS.map((format) => (
-                                    <Menu.Item key={format} onClick={() => onExport(format)}>
-                                        {t('console.exportAs', { format: format.toUpperCase() })}
-                                    </Menu.Item>
-                                ))}
-                            </Menu.Popup>
-                        </Menu.Root>
-                    )}
-                    {onValuePanelOpenChange !== undefined && (
-                        <IconButton
-                            icon={PanelRight}
-                            size="sm"
-                            label={t('console.valuePanel')}
-                            aria-pressed={valuePanelOpen}
-                            onClick={() => onValuePanelOpenChange(!valuePanelOpen)}
-                        />
-                    )}
+                    <ButtonGroup>
+                        {onExport !== undefined && (
+                            <Menu.Root>
+                                <IconButton icon={Download} size="sm" label={t('console.export')} disabled={exporting} render={<Menu.Trigger />} />
+                                <Menu.Popup>
+                                    {EXPORT_FORMATS.map((format) => (
+                                        <Menu.Item key={format} onClick={() => onExport(format)}>
+                                            {t('console.exportAs', { format: format.toUpperCase() })}
+                                        </Menu.Item>
+                                    ))}
+                                </Menu.Popup>
+                            </Menu.Root>
+                        )}
+                        {onValuePanelOpenChange !== undefined && (
+                            <IconButton
+                                icon={PanelRight}
+                                size="sm"
+                                label={t('console.valuePanel')}
+                                aria-pressed={valuePanelOpen}
+                                onClick={() => onValuePanelOpenChange(!valuePanelOpen)}
+                            />
+                        )}
+                    </ButtonGroup>
                 </span>
             </footer>
         </>

package/src/console/TransactionControls.tsx

@@ -1,7 +1,7 @@
 import type { Ref } from 'react';
 import clsx from 'clsx';
 import { useTranslation } from 'react-i18next';
-import { Button, Pill, Segmented, Tooltip } from '@adecore/ui';
+import { Button, Pill, Switch, Tooltip } from '@adecore/ui';
 
 export type TransactionMode = 'auto' | 'manual';
 
@@ -18,23 +18,20 @@ export interface TransactionControlsProps {
     ref?: Ref<HTMLDivElement>;
 }
 
-/* Auto or manual commits, and while a transaction is open, the way to end it. */
+/* 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 }: TransactionControlsProps) {
     const { t } = useTranslation('database');
     return (
         <div ref={ref} className={clsx('flex items-center gap-2', className)}>
             <Tooltip label={t('console.transaction.hint')}>
-                <div className="flex">
-                    <Segmented
-                        value={mode}
-                        onValueChange={onModeChange}
+                <div className="flex items-center gap-2 text-xs text-text">
+                    <Switch
+                        checked={mode === 'auto'}
+                        label={t('console.transaction.autoCommit')}
                         disabled={busy}
-                        label={t('console.transaction.mode')}
-                        options={[
-                            { id: 'auto', label: t('console.transaction.auto') },
-                            { id: 'manual', label: t('console.transaction.manual') }
-                        ]}
+                        onCheckedChange={(auto) => onModeChange(auto ? 'auto' : 'manual')}
                     />
+                    <span>{t('console.transaction.autoCommit')}</span>
                 </div>
             </Tooltip>
             {open && (

package/src/console/editor-slot.ts

@@ -0,0 +1,27 @@
+import type { Ref } from 'react';
+
+/* What a run takes: the selection, or the statement at the caret when nothing is selected; or the whole text. */
+export type QueryConsoleRunScope = 'selection-or-statement' | 'all';
+
+/* What the console asks the editor whenever it runs. */
+export interface QueryConsoleEditorHandle {
+    /* Offsets into the text, `start` equal to `end` for a caret. */
+    selection(): { readonly start: number; readonly end: number };
+}
+
+/* What the console hands the editor it draws, its own or the app's. */
+export interface QueryConsoleEditorProps {
+    /* Where the editor puts its handle. Without one, a run of the selection or the statement runs the whole text. */
+    ref: Ref<QueryConsoleEditorHandle>;
+    value: string;
+    onValueChange(sql: string): void;
+    /* What the editor's own keys call, as the toolbar does. It reads the selection through the handle, and does nothing while `busy` or when there is nothing to run. */
+    run(scope: QueryConsoleRunScope): void;
+    /* A run or the end of a transaction is under way. */
+    busy: boolean;
+    /* The accessible name of the editor and its placeholder, in the person's language. */
+    label: string;
+    placeholder: string;
+    /* The console was opened just now: the editor takes the caret once it is there. */
+    autoFocus: boolean;
+}

package/src/console/result-keys.ts

@@ -0,0 +1,109 @@
+import { useEffect, useMemo, useState } from 'react';
+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 { foreignKeyOf, referenceOf, type Reference } from '../table/references.ts';
+
+/* What the tables a result reads from say about its columns: their keys, and where a foreign key points. */
+export interface ResultKeys {
+    readonly columns: readonly GridColumn[];
+    /* Whether a column is part of a foreign key of the table it comes from. */
+    isReference(column: number): boolean;
+    /* The row the foreign key of a column points to, from the cells of a row of the result; `null` when it points nowhere. */
+    referenceAt(column: number, cells: readonly Shown[]): Reference | null;
+}
+
+type TableName = Pick<ColumnSource, 'schema' | 'table'>;
+
+const tableKey = ({ schema, table }: TableName): string => `${schema}\u0000${table}`;
+
+/* The tables the columns of a result come from, each once, in the order they first appear. */
+export const sourceTablesOf = (columns: readonly ResultColumn[]): TableName[] => {
+    const tables = new Map<string, TableName>();
+    for (const { source } of columns) {
+        if (source !== undefined && !tables.has(tableKey(source))) {
+            tables.set(tableKey(source), { schema: source.schema, table: source.table });
+        }
+    }
+    return [...tables.values()];
+};
+
+/*
+ * The keys of a result's columns, from the structures of the tables they come from by key (`schema`, NUL,
+ * `table`). A column without a source, or of a table with no structure, is marked as nothing.
+ */
+export const resultKeysOf = (engine: Engine, columns: readonly ResultColumn[], structures: ReadonlyMap<string, TableStructure>): ResultKeys => {
+    const structureOf = (column: ResultColumn | undefined): TableStructure | undefined =>
+        column?.source === undefined ? undefined : structures.get(tableKey(column.source));
+    const foreignKeyAt = (column: number) => {
+        const source = columns[column]?.source;
+        const structure = structureOf(columns[column]);
+        return source === undefined || structure === undefined ? undefined : foreignKeyOf(structure.foreignKeys, source.column);
+    };
+    return {
+        columns: columns.map((column): GridColumn => {
+            const structure = structureOf(column);
+            const name = column.source?.column;
+            if (structure === undefined || name === undefined) {
+                return column;
+            }
+            return {
+                ...column,
+                primaryKey: structure.primaryKey.includes(name),
+                foreignKey: structure.foreignKeys.some((key) => key.columns.includes(name))
+            };
+        }),
+        isReference: (column) => foreignKeyAt(column) !== undefined,
+        referenceAt: (column, cells) => {
+            const key = foreignKeyAt(column);
+            const source = columns[column]?.source;
+            if (key === undefined || source === undefined) {
+                return null;
+            }
+            // The columns of the result as the columns of that table, so a join names each key column of its own table only.
+            const asTable = columns.map((entry) => ({
+                name: entry.source !== undefined && tableKey(entry.source) === tableKey(source) ? entry.source.column : '',
+                kind: entry.kind
+            }));
+            return referenceOf(engine, key, asTable, cells);
+        }
+    };
+};
+
+/*
+ * The keys of a result set, once the structures of the tables its columns come from have loaded: each table
+ * once per result, through the console's session. `null` while they load and for what is no result set.
+ */
+export function useResultKeys(session: DatabaseSession | null, engine: Engine | undefined, result: StatementResult | undefined): ResultKeys | null {
+    const [loaded, setLoaded] = useState<{ readonly result: StatementResult; readonly structures: ReadonlyMap<string, TableStructure> } | null>(null);
+
+    useEffect(() => {
+        if (session === null || result?.kind !== 'rows') {
+            return undefined;
+        }
+        const tables = sourceTablesOf(result.columns);
+        if (tables.length === 0) {
+            return undefined;
+        }
+        const controller = new AbortController();
+        // A table the server named but cannot describe, such as a derived one, marks no column.
+        const loads = tables.map((table) =>
+            session.structure(table.schema, table.table, { signal: controller.signal }).then(
+                (structure): [string, TableStructure] => [tableKey(table), structure],
+                () => null
+            )
+        );
+        void Promise.all(loads).then((entries) => {
+            if (!controller.signal.aborted) {
+                setLoaded({ result, structures: new Map(entries.filter((entry) => entry !== null)) });
+            }
+        });
+        return () => controller.abort();
+    }, [session, result]);
+
+    return useMemo(
+        () => (engine === undefined || result?.kind !== 'rows' || loaded?.result !== result ? null : resultKeysOf(engine, result.columns, loaded.structures)),
+        [engine, result, loaded]
+    );
+}

package/src/designer/ColumnsEditor.tsx

@@ -2,7 +2,7 @@ import { useId } from 'react';
 import clsx from 'clsx';
 import { ArrowDown, ArrowUp, KeyRound, Plus, Trash2 } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
-import { Button, Checkbox, EmptyState, Icon, IconButton, Input, Pill } from '@adecore/ui';
+import { Button, ButtonGroup, Checkbox, EmptyState, Icon, IconButton, Input, Pill } from '@adecore/ui';
 import { formatNumber } from '@adecore/ui/format';
 import { typeSuggestionsOf } from '../ddl/index.ts';
 import type { EditorProps } from './editor-props.ts';
@@ -72,7 +72,7 @@ export function ColumnsEditor({ draft, dialect, disabled, onChange, className, r
                                 return (
                                     <tr key={column.key}>
                                         <td className={clsx(TD, 'whitespace-nowrap')}>
-                                            <span className="flex">
+                                            <ButtonGroup>
                                                 <IconButton
                                                     icon={ArrowUp}
                                                     size="xs"
@@ -87,7 +87,7 @@ export function ColumnsEditor({ draft, dialect, disabled, onChange, className, r
                                                     disabled={disabled || at === draft.columns.length - 1}
                                                     onClick={() => onChange(moveColumn(draft, column.key, 1))}
                                                 />
-                                            </span>
+                                            </ButtonGroup>
                                         </td>
                                         <td className={clsx(TD, 'min-w-40')}>
                                             <Input

package/src/designer/DesignerView.tsx

@@ -1,9 +1,10 @@
-import type { KeyboardEvent, Ref } from 'react';
+import type { KeyboardEvent, ReactNode, Ref } from 'react';
 import clsx from 'clsx';
 import { CircleAlert, Lock, Undo2 } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
-import { Banner, Button, DisabledReason, Field, Icon, Input, PromptDialog, Tabs, isApplePlatform, matchesShortcut, shortcut } from '@adecore/ui';
+import { Banner, Button, DisabledReason, Field, Icon, Input, PromptDialog, Separator, Tabs, isApplePlatform, matchesShortcut, shortcut } from '@adecore/ui';
 import { formatNumber } from '@adecore/ui/format';
+import { CODE_TEXT } from '../code-text.ts';
 import type { Dialect, TableDraft } from '../ddl/index.ts';
 import { ColumnsEditor } from './ColumnsEditor.tsx';
 import { ForeignKeysEditor } from './ForeignKeysEditor.tsx';
@@ -39,6 +40,8 @@ export interface DesignerViewProps {
     onCancelConfirm(): void;
     onRevert(): void;
     onDismissFailure(): void;
+    /* The app's own content before the name of the table, such as where it is, with a separator after it. */
+    toolbarStart?: ReactNode;
     className?: string;
     ref?: Ref<HTMLDivElement>;
 }
@@ -64,6 +67,7 @@ export function DesignerView({
     onCancelConfirm,
     onRevert,
     onDismissFailure,
+    toolbarStart,
     className,
     ref
 }: DesignerViewProps) {
@@ -84,6 +88,13 @@ export function DesignerView({
     return (
         <div ref={ref} className={clsx('flex min-h-0 min-w-0 flex-col', className)} onKeyDown={handleKeyDown}>
             <div className="flex shrink-0 items-end gap-3 border-b border-border-soft px-3 py-2">
+                {toolbarStart !== undefined && toolbarStart !== null && toolbarStart !== false && (
+                    // As tall as the field's input and level with it, since the field's label stands above the row.
+                    <span className="flex h-8 shrink-0 items-center gap-3">
+                        {toolbarStart}
+                        <Separator />
+                    </span>
+                )}
                 <Field label={t('designer.tableName')} className="w-80">
                     <Input
                         mono
@@ -175,7 +186,7 @@ export function DesignerView({
                 }}
             >
                 {plan.destructive && <p className="mt-3 text-xs text-status-error">{t('designer.confirm.destructive')}</p>}
-                <pre className="mt-3 max-h-64 overflow-auto rounded-md bg-surface-sunken p-2 font-mono text-code whitespace-pre text-text select-text">
+                <pre className={clsx(CODE_TEXT, 'mt-3 max-h-64 overflow-auto rounded-md bg-surface-sunken p-2 whitespace-pre text-text select-text')}>
                     {scriptOf(plan.statements)}
                 </pre>
             </PromptDialog>

package/src/designer/SqlPreview.tsx

@@ -3,6 +3,7 @@ import clsx from 'clsx';
 import { Copy } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { Button, Icon, copyText } from '@adecore/ui';
+import { CODE_TEXT } from '../code-text.ts';
 import type { DraftProblem } from '../ddl/index.ts';
 import type { Plan } from './plan.ts';
 import { scriptOf } from './plan.ts';
@@ -48,7 +49,7 @@ export function SqlPreview({ plan, className, ref }: SqlPreviewProps) {
                 ) : script === '' ? (
                     <p className="text-xs text-text-faint">{t('designer.noChanges')}</p>
                 ) : (
-                    <pre className="font-mono text-code whitespace-pre text-text">{script}</pre>
+                    <pre className={clsx(CODE_TEXT, 'whitespace-pre text-text')}>{script}</pre>
                 )}
             </div>
         </section>

package/src/designer/TableDesigner.tsx

@@ -1,4 +1,4 @@
-import { useMemo, useRef, useState, type Ref } from 'react';
+import { useMemo, useRef, useState, type ReactNode, type Ref } from 'react';
 import clsx from 'clsx';
 import { CircleAlert, RefreshCw } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
@@ -19,6 +19,8 @@ export interface TableDesignerProps {
     schema: string;
     /* The table to modify; without one the designer makes a new table. */
     table?: string;
+    /* The app's own content at the start of the toolbar, before the name of the table, such as where it is. */
+    toolbarStart?: ReactNode;
     className?: string;
     ref?: Ref<HTMLDivElement>;
 }
@@ -39,7 +41,7 @@ interface Editing {
 }
 
 /* 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 }: TableDesignerProps) {
+export function TableDesigner({ connection, schema, table, toolbarStart, className, ref }: TableDesignerProps) {
     const { t } = useTranslation('database');
     const client = useDatabaseClient();
     const onAction = useDatabaseAction();
@@ -179,6 +181,7 @@ export function TableDesigner({ connection, schema, table, className, ref }: Tab
                         setFailure(null);
                     }}
                     onDismissFailure={() => setFailure(null)}
+                    toolbarStart={toolbarStart}
                 />
             )}
         </div>