@adecore/database 0.17.0 → 0.18.0

package/dist/table/TableView.js

@@ -6,15 +6,14 @@ import { useTranslation } from 'react-i18next';
 import { Banner, Button, ContextMenu, Icon, isApplePlatform, Kbd, KEY_SHORTCUTS, matchesShortcut, messageOf, PanelEmpty, PromptDialog, shortcut, Spinner } from '@adecore/ui';
 import { formatNumber } from '@adecore/ui/format';
 import { DatabaseRequestError } from '../client/types.js';
-import { useDatabaseAction, useDatabaseClient, useDatabaseFiles, useDatabaseStorage } from '../client-context.js';
+import { useDatabaseAction, useDatabaseClient, useDatabaseFiles, useDatabaseNotice, useDatabaseStorage } from '../client-context.js';
 import { aggregateBlock, blockSize } from '../grid/aggregates.js';
 import { DataGrid } from '../grid/DataGrid.js';
-import { wholeValueOf } from '../grid/focused-value.js';
 import { RecordView } from '../grid/RecordView.js';
 import { ValueDock } from '../grid/ValueDock.js';
 import { valueOfCell } from '../protocol/index.js';
 import { useSchemaChange } from '../use-schema-change.js';
-import { ValuePanel } from '../value/ValuePanel.js';
+import { useStableCallback } from '../use-stable-callback.js';
 import { addChip, cellChip, chipsFromQuery, chipsToOrderBy, chipsToWhere, shorten, sortsOf, toggleSort, withSorts } from './command-field.js';
 import { buildGridColumns, buildGridRows, cloneValues, parseRowKey } from './grid-rows.js';
 import { importableColumns } from './import-mapping.js';
@@ -28,7 +27,32 @@ import { TableToolbar } from './TableToolbar.js';
 import { useLoaded } from './useLoaded.js';
 import { useStoredLayout } from './useStoredLayout.js';
 import { useTableTransfer } from './useTableTransfer.js';
+/* Where the width of the record view is kept, in pixels, for every table. */
+export const RECORD_WIDTH_KEY = 'database:record-view';
+const RECORD_WIDTH = 360;
+const parseRecordWidth = (raw) => {
+    try {
+        const value = JSON.parse(raw ?? 'null');
+        return typeof value === 'number' && Number.isFinite(value) && value > 0 ? Math.round(value) : null;
+    }
+    catch {
+        return null;
+    }
+};
 const NO_KEYS = new Set();
+/* What the strip over the table, or the app's notice, says of an export or an import. */
+const transferText = (found, t) => {
+    switch (found.kind) {
+        case 'exporting':
+            return t('table.export.running', { format: found.format.toUpperCase() });
+        case 'exported':
+            return t('table.export.done', { count: found.rows, rows: formatNumber(found.rows) });
+        case 'imported':
+            return t('table.import.done', { count: found.rows, rows: formatNumber(found.rows) });
+        case 'failed':
+            return found.message;
+    }
+};
 /* How much of a value a menu item spells out before it cuts it. */
 const MENU_VALUE_LENGTH = 40;
 const FOCUS_COMMAND = shortcut('Mod+F');
@@ -37,16 +61,18 @@ const DUPLICATE_ROWS = shortcut('Mod+D');
  * The rows of one table: read a page at a time, filtered and sorted with SQL a person types, and
  * editable in place. Changes pile up as pending and go to the server together on Submit.
  */
-export function TableView({ connection, schema, table, defaultWhere, defaultOrderBy, onDirtyChange, className, ref }) {
+export function TableView({ connection, schema, table, toolbarStart, defaultWhere, defaultOrderBy, onDirtyChange, className, ref }) {
     // A new table, or the same one asked for with other filters, starts from nothing: no page, no pending change.
-    return (_jsx(TableBody, { connection: connection, schema: schema, table: table, defaultWhere: defaultWhere, defaultOrderBy: defaultOrderBy, onDirtyChange: onDirtyChange, className: className, ref: ref }, [connection.id, schema, table, defaultWhere ?? '', defaultOrderBy ?? ''].join('\u0000')));
+    return (_jsx(TableBody, { connection: connection, schema: schema, table: table, toolbarStart: toolbarStart, defaultWhere: defaultWhere, defaultOrderBy: defaultOrderBy, onDirtyChange: onDirtyChange, className: className, ref: ref }, [connection.id, schema, table, defaultWhere ?? '', defaultOrderBy ?? ''].join('\u0000')));
 }
-function TableBody({ connection, schema, table, defaultWhere, defaultOrderBy, onDirtyChange, className, ref }) {
+function TableBody({ connection, schema, table, toolbarStart, defaultWhere, defaultOrderBy, onDirtyChange, className, ref }) {
     const { t } = useTranslation('database');
     const client = useDatabaseClient();
     const onAction = useDatabaseAction();
+    const onNotice = useDatabaseNotice();
     const files = useDatabaseFiles();
-    const { stored, remember } = useStoredLayout(useDatabaseStorage(), layoutStorageKey(connection.id, schema, table));
+    const storage = useDatabaseStorage();
+    const { stored, remember } = useStoredLayout(storage, layoutStorageKey(connection.id, schema, table));
     const session = useMemo(() => client.session(connection), [client, connection]);
     const grid = useRef(null);
     const command = useRef(null);
@@ -69,14 +95,12 @@ function TableBody({ connection, schema, table, defaultWhere, defaultOrderBy, on
     const [failure, setFailure] = useState(null);
     const [shapeChanged, setShapeChanged] = useState(false);
     const [discard, setDiscard] = useState(null);
-    const [panelOpen, setPanelOpen] = useState(false);
     const [focus, setFocus] = useState(null);
     const [recordOpen, setRecordOpen] = useState(false);
-    const [recordKey, setRecordKey] = useState(null);
+    const [recordWidth, setRecordWidth] = useState(() => parseRecordWidth(storage?.get(RECORD_WIDTH_KEY)));
     const [focusRequest, setFocusRequest] = useState(null);
     const [columnRequest, setColumnRequest] = useState(null);
     const [range, setRange] = useState(null);
-    const [fetched, setFetched] = useState(null);
     const applied = useMemo(() => ({ where: chipsToWhere(chips), orderBy: chipsToOrderBy(engine, chips) }), [chips, engine]);
     const target = `${connection.id}|${schema}|${table}`;
     const structureLoad = useLoaded((signal) => session.structure(schema, table, { signal }), target);
@@ -112,7 +136,16 @@ function TableBody({ connection, schema, table, defaultWhere, defaultOrderBy, on
         onImported: () => {
             setCounted(null);
             rowsLoad.reload();
-        }
+        },
+        report: onNotice === undefined
+            ? undefined
+            : (found) => onNotice(found.kind === 'failed'
+                ? {
+                    tone: 'error',
+                    title: t(found.during === 'export' ? 'table.export.failed' : 'table.import.readFailed'),
+                    description: found.message
+                }
+                : { tone: 'success', title: transferText(found, t) })
     });
     const changeCount = pendingCount(pending);
     const dirty = changeCount > 0;
@@ -121,23 +154,16 @@ function TableBody({ connection, schema, table, defaultWhere, defaultOrderBy, on
     const sorts = useMemo(() => sortsOf(chips), [chips]);
     const commandColumns = useMemo(() => columns.map((column) => ({ name: column.name, type: column.type })), [columns]);
     const rowByKey = useMemo(() => new Map(rows.map((row) => [row.key, row])), [rows]);
-    const recordIndex = Math.max(0, rows.findIndex((row) => row.key === recordKey));
-    const selectionFigures = useMemo(() => recordOpen || range === null || blockSize(range) < 2
+    // The record view shows the row of the focused cell, or the first row before a cell has the focus.
+    const focusedIndex = focus === null ? -1 : rows.findIndex((row) => row.key === focus.rowKey);
+    const recordIndex = focusedIndex >= 0 ? focusedIndex : rows.length > 0 ? 0 : -1;
+    const selectionFigures = useMemo(() => range === null || blockSize(range) < 2
         ? null
         : {
             columns: range.columns.map((index) => columns[index]?.name ?? ''),
             aggregates: aggregateBlock(rows.map((row) => row.cells), columns.map((column) => column.kind), range)
-        }, [recordOpen, range, rows, columns]);
+        }, [range, rows, columns]);
     const sqlTarget = useMemo(() => ({ engine, schema, table }), [engine, schema, table]);
-    const focusedRow = panelOpen && focus !== null ? rows.find((row) => row.key === focus.rowKey) : undefined;
-    const focusedCell = focus === null ? undefined : focusedRow?.cells[focus.column];
-    const needsFetch = focusedCell !== undefined &&
-        focus !== null &&
-        wholeValueOf(focusedCell) === undefined &&
-        !(focusedCell !== null && typeof focusedCell === 'object' && focusedCell.kind === 'default');
-    const focusedRef = focus === null ? null : parseRowKey(focus.rowKey);
-    const canFetch = focusedRef?.kind === 'loaded' && structure !== null && loaded !== null && rowKeyOf(structure, loaded, focusedRef.index) !== null;
-    const fetchId = needsFetch && canFetch ? `${focus.rowKey}:${focus.column}` : null;
     useSchemaChange(connection.id, schema, () => {
         if (isPendingEmpty(pending)) {
             setCounted(null);
@@ -172,28 +198,10 @@ function TableBody({ connection, schema, table, defaultWhere, defaultOrderBy, on
         insertedBefore.current = pending.inserts.length;
     }, [pending.inserts.length]);
     useEffect(() => {
-        if (fetchId === null || focus === null || structure === null || loaded === null) {
-            return;
-        }
-        const row = parseRowKey(focus.rowKey);
-        const key = row.kind === 'loaded' ? rowKeyOf(structure, loaded, row.index) : null;
-        const name = loaded.columns[focus.column]?.name;
-        if (key === null || name === undefined) {
-            return;
+        if (recordWidth !== null) {
+            storage?.set(RECORD_WIDTH_KEY, JSON.stringify(recordWidth));
         }
-        const controller = new AbortController();
-        session.cell(schema, table, key, name, { signal: controller.signal }).then((value) => {
-            if (!controller.signal.aborted) {
-                setFetched({ id: fetchId, rows: loaded, value });
-            }
-        }, (error) => {
-            if (!controller.signal.aborted) {
-                setFetched({ id: fetchId, rows: loaded, value: undefined });
-                setFailure(messageOf(error));
-            }
-        });
-        return () => controller.abort();
-    }, [fetchId, focus, structure, loaded, session, schema, table]);
+    }, [storage, recordWidth]);
     const discardPending = () => {
         setPending(emptyPending);
         setSelected(NO_KEYS);
@@ -320,7 +328,7 @@ function TableBody({ connection, schema, table, defaultWhere, defaultOrderBy, on
             setPending((now) => setEdit(now, row.index, name, value, loaded.rows[row.index][column] ?? null));
         }
     };
-    const loadValue = async (rowKey, column) => {
+    const loadValue = useStableCallback(async (rowKey, column) => {
         const row = parseRowKey(rowKey);
         const name = loaded?.columns[column]?.name;
         const key = row.kind === 'loaded' && structure !== null && loaded !== null ? rowKeyOf(structure, loaded, row.index) : null;
@@ -334,7 +342,7 @@ function TableBody({ connection, schema, table, defaultWhere, defaultOrderBy, on
             setFailure(messageOf(error));
             return undefined;
         }
-    };
+    });
     const refsOf = (keys) => {
         const loadedRows = [];
         const inserted = [];
@@ -389,23 +397,17 @@ function TableBody({ connection, schema, table, defaultWhere, defaultOrderBy, on
         }
     };
     const toggleRecordView = () => {
-        if (recordOpen) {
-            const row = rows[recordIndex];
-            setRecordOpen(false);
-            if (row !== undefined) {
-                setFocusRequest({ rowKey: row.key, column: focus?.column ?? 0 });
-            }
-            return;
-        }
-        const focused = focus === null ? undefined : rows.find((row) => row.key === focus.rowKey);
-        setRecordKey((focused ?? rows[0])?.key ?? null);
-        setRecordOpen(true);
+        setRecordOpen((now) => !now);
+    };
+    /* The record view moves the grid's focus along with it, without taking the keyboard from its field. */
+    const followInGrid = (cell) => {
+        setFocus(cell);
+        setFocusRequest({ ...cell, quiet: true });
     };
     const changeRecordIndex = (index) => {
         const row = rows[index];
         if (row !== undefined) {
-            setRecordKey(row.key);
-            setFocus((now) => (now === null ? now : { rowKey: row.key, column: now.column }));
+            followInGrid({ rowKey: row.key, column: focus?.column ?? 0 });
         }
     };
     const queryMenu = (context) => {
@@ -460,44 +462,14 @@ function TableBody({ connection, schema, table, defaultWhere, defaultOrderBy, on
         }
     };
     const bounds = pageBounds(loadedOffset, loaded?.rows.length ?? 0, loaded?.hasMore ?? false, counted);
-    const focusedColumn = focus === null ? null : (columns[focus.column] ?? null);
-    const panelEditable = editable && focusedRow !== undefined && focusedRow.locked !== true && focusedRow.state !== 'deleted' && focusedColumn?.readOnly !== true;
-    const fetchedNow = fetched !== null && fetched.id === fetchId && fetched.rows === loaded;
-    const panelValue = (() => {
-        if (focusedCell === undefined || focusedRow === undefined || focus === null) {
-            return undefined;
-        }
-        const whole = wholeValueOf(focusedCell);
-        if (whole !== undefined) {
-            return whole;
-        }
-        if (focusedCell !== null && typeof focusedCell === 'object' && focusedCell.kind === 'default') {
-            // A pending DEFAULT holds no value of its own, so the panel keeps showing what the row had.
-            const row = parseRowKey(focusedRow.key);
-            return row.kind === 'loaded' && loaded !== null ? wholeValueOf(loaded.rows[row.index]?.[focus.column] ?? null) : null;
-        }
-        return fetchedNow ? fetched.value : undefined;
-    })();
     const notice = failure ?? rowsLoad.error ?? structureLoad.error;
-    const noticeText = (found) => {
-        switch (found.kind) {
-            case 'exporting':
-                return t('table.export.running', { format: found.format.toUpperCase() });
-            case 'exported':
-                return t('table.export.done', { count: found.rows, rows: formatNumber(found.rows) });
-            case 'imported':
-                return t('table.import.done', { count: found.rows, rows: formatNumber(found.rows) });
-            case 'failed':
-                return found.message;
-        }
-    };
-    return (_jsxs("div", { ref: ref, className: clsx('flex min-h-0 flex-col bg-surface text-text', className), onKeyDown: handleKeyDown, children: [_jsx(TableToolbar, { refreshing: rowsLoad.loading, readOnlyReason: readOnlyReason, hasSelection: selected.size > 0, canRevertSelection: selected.size > 0 && canRevert(selected), valuePanelOpen: panelOpen, recordViewOpen: recordOpen, transfer: files === undefined
+    return (_jsxs("div", { ref: ref, className: clsx('flex min-h-0 flex-col bg-surface text-text', className), onKeyDown: handleKeyDown, children: [_jsx(TableToolbar, { start: toolbarStart, refreshing: rowsLoad.loading, readOnlyReason: readOnlyReason, hasSelection: selected.size > 0, canRevertSelection: selected.size > 0 && canRevert(selected), recordViewOpen: recordOpen, transfer: files === undefined
                     ? undefined
                     : {
                         busy: transfer.notice?.kind === 'exporting',
                         onExport: transfer.exportAs,
                         onImport: readOnlyReason === null && structure !== null ? () => guard(transfer.chooseImportFile) : undefined
-                    }, pendingCount: changeCount, submitting: submitting, engine: engine, chips: chips, columns: commandColumns, pageSize: pageSize, bounds: bounds, commandRef: command, onChipsChange: applyChips, onJumpToColumn: jumpToColumn, onRefresh: refresh, onAddRow: () => setPending((now) => addInsertWith(now, {})), onDeleteRows: deleteSelected, onCloneRows: () => cloneRows([...selected]), onRevertRows: () => revertRowKeys(selected), onToggleValuePanel: () => setPanelOpen((now) => !now), onToggleRecordView: toggleRecordView, onPageSizeChange: changePageSize, onFirstPage: () => goToPage(0), onLastPage: () => void goToLast(), onSubmit: () => void submit(), onRevert: discardPending }), notice !== null && (_jsx(Banner, { icon: CircleAlert, tone: "error", message: notice, className: "shrink-0 pt-2", children: failure === null ? (_jsx(Button, { size: "xs", onClick: refresh, children: t('table.retry') })) : (_jsx(Button, { size: "xs", onClick: () => setFailure(null), children: t('table.dismiss') })) })), shapeChanged && (_jsx(Banner, { icon: RefreshCw, tone: "neutral", message: t('table.changed'), className: "shrink-0 pt-2", children: _jsx(Button, { size: "xs", onClick: refresh, children: t('table.reload') }) })), transfer.notice !== null && (_jsx(Banner, { icon: transfer.notice.kind === 'failed' ? CircleAlert : transfer.notice.kind === 'exporting' ? Download : Check, tone: transfer.notice.kind === 'failed' ? 'error' : 'neutral', message: noticeText(transfer.notice), className: "shrink-0 pt-2", children: transfer.notice.kind === 'exporting' ? (_jsxs(_Fragment, { children: [_jsx(Spinner, { size: 12, label: t('table.export.running', { format: transfer.notice.format.toUpperCase() }) }), _jsx(Button, { size: "xs", onClick: transfer.cancelExport, children: t('table.export.cancel') })] })) : (_jsx(Button, { size: "xs", onClick: transfer.dismiss, children: t('table.dismiss') })) })), loaded === null ? (_jsx(PanelEmpty, { busy: notice === null, children: notice === null ? t('table.loading') : t('table.notLoaded') })) : (_jsxs(_Fragment, { children: [_jsxs(ValueDock, { open: panelOpen, panel: _jsx(ValuePanel, { column: focusedColumn, value: panelValue, loading: fetchId !== null && !fetchedNow, editable: panelEditable, onCommit: (value) => focus !== null && commit(focus.rowKey, focus.column, value), onClose: () => setPanelOpen(false), className: "min-w-0 flex-1" }), children: [_jsx("div", { "aria-busy": rowsLoad.loading, className: clsx('relative min-h-0 flex-1 flex-col', recordOpen ? 'hidden' : 'flex', rowsLoad.loading && 'pointer-events-none opacity-60'), children: _jsx(DataGrid, { ref: grid, label: t('table.grid', { table }), columns: columns, rows: rows, editable: editable, empty: t('table.empty'), selectedKeys: selected, onSelectedKeysChange: setSelected, onCommit: commit, loadValue: loadValue, sorts: sorts, onSortsChange: changeSorts, onFocusedCellChange: setFocus, onDeleteSelected: editable ? deleteSelected : undefined, sqlTarget: sqlTarget, queryMenu: queryMenu, menu: gridMenu, onDuplicateRows: editable ? cloneRows : undefined, onFollow: onAction === undefined ? undefined : follow, canFollow: (cell) => referenceAt(cell) !== null, onRangeChange: setRange, initialLayout: stored ?? undefined, onLayoutChange: remember, focusRequest: focusRequest, columnRequest: columnRequest }) }), recordOpen && (_jsx(RecordView, { label: t('table.recordFields', { table }), columns: columns, rows: rows, index: recordIndex, onIndexChange: changeRecordIndex, editable: editable, onCommit: commit, loadValue: loadValue, onFocusedCellChange: setFocus, onFollow: onAction === undefined ? undefined : follow, canFollow: (cell) => referenceAt(cell) !== null, empty: t('table.empty') }))] }), _jsx(TableStatusBar, { elapsedMs: loaded.elapsedMs, bounds: bounds, counting: counting, selection: selectionFigures, onCount: () => void countRows(), onPrevious: () => goToPage(offset - pageSize), onNext: () => goToPage(offset + pageSize) })] })), transfer.importDraft !== null && structure !== null && (_jsx(ImportDialog, { open: true, path: transfer.importDraft.path, tableColumns: importableColumns(structure.columns), sample: transfer.importDraft.sample, header: transfer.importDraft.header, mapping: transfer.importDraft.mapping, busy: transfer.importDraft.busy, error: transfer.importDraft.error, onHeaderChange: transfer.changeHeader, onMappingChange: transfer.changeMapping, onImport: transfer.runImport, onCancel: transfer.closeImport, onOpenChange: (open) => !open && transfer.closeImport() })), _jsx(PromptDialog, { open: discard !== null, danger: true, title: t('table.discard.title'), description: t('table.discard.description'), confirmLabel: t('table.discard.confirm'), onConfirm: () => {
+                    }, pendingCount: changeCount, submitting: submitting, engine: engine, chips: chips, columns: commandColumns, pageSize: pageSize, bounds: bounds, commandRef: command, onChipsChange: applyChips, onJumpToColumn: jumpToColumn, onRefresh: refresh, onAddRow: () => setPending((now) => addInsertWith(now, {})), onDeleteRows: deleteSelected, onCloneRows: () => cloneRows([...selected]), onRevertRows: () => revertRowKeys(selected), onToggleRecordView: toggleRecordView, onPageSizeChange: changePageSize, onFirstPage: () => goToPage(0), onLastPage: () => void goToLast(), onSubmit: () => void submit(), onRevert: discardPending }), notice !== null && (_jsx(Banner, { icon: CircleAlert, tone: "error", message: notice, className: "shrink-0 pt-2", children: failure === null ? (_jsx(Button, { size: "xs", onClick: refresh, children: t('table.retry') })) : (_jsx(Button, { size: "xs", onClick: () => setFailure(null), children: t('table.dismiss') })) })), shapeChanged && (_jsx(Banner, { icon: RefreshCw, tone: "neutral", message: t('table.changed'), className: "shrink-0 pt-2", children: _jsx(Button, { size: "xs", onClick: refresh, children: t('table.reload') }) })), transfer.notice !== null && (_jsx(Banner, { icon: transfer.notice.kind === 'failed' ? CircleAlert : transfer.notice.kind === 'exporting' ? Download : Check, tone: transfer.notice.kind === 'failed' ? 'error' : 'neutral', message: transferText(transfer.notice, t), className: "shrink-0 pt-2", children: transfer.notice.kind === 'exporting' ? (_jsxs(_Fragment, { children: [_jsx(Spinner, { size: 12, label: t('table.export.running', { format: transfer.notice.format.toUpperCase() }) }), _jsx(Button, { size: "xs", onClick: transfer.cancelExport, children: t('table.export.cancel') })] })) : (_jsx(Button, { size: "xs", onClick: transfer.dismiss, children: t('table.dismiss') })) })), loaded === null ? (_jsx(PanelEmpty, { busy: notice === null, children: notice === null ? t('table.loading') : t('table.notLoaded') })) : (_jsxs(_Fragment, { children: [_jsx(ValueDock, { open: recordOpen, width: recordWidth ?? RECORD_WIDTH, onWidthChange: setRecordWidth, panel: _jsx(RecordView, { label: t('table.recordFields', { table }), columns: columns, rows: rows, index: recordIndex, onIndexChange: changeRecordIndex, focusedColumn: focus !== null && focusedIndex === recordIndex ? focus.column : null, editable: editable, onCommit: commit, loadValue: loadValue, onFocusedCellChange: followInGrid, onFollow: onAction === undefined ? undefined : follow, canFollow: (cell) => referenceAt(cell) !== null, onClose: () => setRecordOpen(false), empty: t('table.empty') }), children: _jsx("div", { "aria-busy": rowsLoad.loading, className: clsx('relative flex min-h-0 flex-1 flex-col', rowsLoad.loading && 'pointer-events-none opacity-60'), children: _jsx(DataGrid, { ref: grid, label: t('table.grid', { table }), columns: columns, rows: rows, editable: editable, empty: t('table.empty'), selectedKeys: selected, onSelectedKeysChange: setSelected, onCommit: commit, loadValue: loadValue, sorts: sorts, onSortsChange: changeSorts, onFocusedCellChange: setFocus, onDeleteSelected: editable ? deleteSelected : undefined, sqlTarget: sqlTarget, queryMenu: queryMenu, menu: gridMenu, onDuplicateRows: editable ? cloneRows : undefined, onFollow: onAction === undefined ? undefined : follow, canFollow: (cell) => referenceAt(cell) !== null, onRangeChange: setRange, initialLayout: stored ?? undefined, onLayoutChange: remember, focusRequest: focusRequest, columnRequest: columnRequest }) }) }), _jsx(TableStatusBar, { elapsedMs: loaded.elapsedMs, bounds: bounds, counting: counting, selection: selectionFigures, onCount: () => void countRows(), onPrevious: () => goToPage(offset - pageSize), onNext: () => goToPage(offset + pageSize) })] })), transfer.importDraft !== null && structure !== null && (_jsx(ImportDialog, { open: true, path: transfer.importDraft.path, tableColumns: importableColumns(structure.columns), sample: transfer.importDraft.sample, header: transfer.importDraft.header, mapping: transfer.importDraft.mapping, busy: transfer.importDraft.busy, error: transfer.importDraft.error, onHeaderChange: transfer.changeHeader, onMappingChange: transfer.changeMapping, onImport: transfer.runImport, onCancel: transfer.closeImport, onOpenChange: (open) => !open && transfer.closeImport() })), _jsx(PromptDialog, { open: discard !== null, danger: true, title: t('table.discard.title'), description: t('table.discard.description'), confirmLabel: t('table.discard.confirm'), onConfirm: () => {
                     discard?.run();
                     setDiscard(null);
                 }, onOpenChange: (open) => {

package/dist/table/grid-rows.js

@@ -5,7 +5,10 @@ import { rowKeyOf } from './pending.js';
 export const loadedRowKey = (index) => `row:${index}`;
 export const insertedRowKey = (id) => `new:${id}`;
 export const parseRowKey = (key) => key.startsWith('new:') ? { kind: 'inserted', id: Number(key.slice(4)) } : { kind: 'loaded', index: Number(key.slice(4)) };
-export const buildGridColumns = (loaded, structure) => loaded.columns.map((column) => gridColumnOf(column, structure?.columns.find((info) => info.name === column.name), structure?.primaryKey ?? []));
+export const buildGridColumns = (loaded, structure) => {
+    const keys = { primaryKey: structure?.primaryKey ?? [], foreignKey: structure?.foreignKeys.flatMap((key) => key.columns) ?? [] };
+    return loaded.columns.map((column) => gridColumnOf(column, structure?.columns.find((info) => info.name === column.name), keys));
+};
 /* The loaded rows with their pending edits laid over them, then the rows waiting to be inserted. */
 export const buildGridRows = ({ structure, loaded, pending, offset }) => {
     const rows = loaded.rows.map((cells, index) => {

package/dist/table/useTableTransfer.d.ts

@@ -14,6 +14,7 @@ export type TransferNotice = {
     readonly rows: number;
 } | {
     readonly kind: 'failed';
+    readonly during: 'export' | 'import';
     readonly message: string;
 };
 export interface ImportDraft {
@@ -35,6 +36,7 @@ export interface TableTransferInput {
     readonly where: string;
     readonly orderBy: string;
     readonly onImported: () => void;
+    readonly report?: (notice: TransferNotice) => void;
 }
 export interface TableTransfer {
     readonly notice: TransferNotice | null;
@@ -48,4 +50,4 @@ export interface TableTransfer {
     runImport(): void;
     closeImport(): void;
 }
-export declare function useTableTransfer({ client, session, files, schema, table, structure, where, orderBy, onImported }: TableTransferInput): TableTransfer;
+export declare function useTableTransfer({ client, session, files, schema, table, structure, where, orderBy, onImported, report }: TableTransferInput): TableTransfer;

package/dist/table/useTableTransfer.js

@@ -3,7 +3,7 @@ import { messageOf } from '@adecore/ui';
 import { DatabaseRequestError } from '../client/types.js';
 import { formatOfPath, importableColumns, mapColumn, matchColumns } from './import-mapping.js';
 /* Export of the table as filtered, and import of a file into it, with the state both need between the dialogs and the strip. */
-export function useTableTransfer({ client, session, files, schema, table, structure, where, orderBy, onImported }) {
+export function useTableTransfer({ client, session, files, schema, table, structure, where, orderBy, onImported, report }) {
     const [notice, setNotice] = useState(null);
     const [importDraft, setImportDraft] = useState(null);
     const exporting = useRef(null);
@@ -17,6 +17,15 @@ export function useTableTransfer({ client, session, files, schema, table, struct
         return () => clearTimeout(timer);
     }, [notice]);
     useEffect(() => () => sampling.current?.abort(), []);
+    const show = (next) => {
+        if (report === undefined) {
+            setNotice(next);
+        }
+        else {
+            setNotice(null);
+            report(next);
+        }
+    };
     const exportAs = (format) => {
         if (files === undefined || exporting.current !== null) {
             return;
@@ -31,11 +40,16 @@ export function useTableTransfer({ client, session, files, schema, table, struct
             setNotice({ kind: 'exporting', format });
             try {
                 const result = await session.export({ source: { kind: 'table', schema, table, where: where || undefined, orderBy: orderBy || undefined }, format, path }, { signal: controller.signal });
-                setNotice({ kind: 'exported', rows: result.rows });
+                show({ kind: 'exported', rows: result.rows });
             }
             catch (error) {
                 const cancelled = controller.signal.aborted || (error instanceof DatabaseRequestError && error.code === 'cancelled');
-                setNotice(cancelled ? null : { kind: 'failed', message: messageOf(error) });
+                if (cancelled) {
+                    setNotice(null);
+                }
+                else {
+                    show({ kind: 'failed', during: 'export', message: messageOf(error) });
+                }
             }
             finally {
                 exporting.current = null;
@@ -63,7 +77,7 @@ export function useTableTransfer({ client, session, files, schema, table, struct
                 setImportDraft({ path, format, header: true, sample: read, mapping: matchColumns(read.columns, tableColumns, true), busy: false, error: null });
             }
             catch (error) {
-                setNotice({ kind: 'failed', message: messageOf(error) });
+                show({ kind: 'failed', during: 'import', message: messageOf(error) });
             }
         })();
     };
@@ -98,7 +112,7 @@ export function useTableTransfer({ client, session, files, schema, table, struct
             try {
                 const rows = await session.import(schema, table, { path, format, header, columns: mapping });
                 setImportDraft(null);
-                setNotice({ kind: 'imported', rows });
+                show({ kind: 'imported', rows });
                 onImported();
             }
             catch (error) {

package/dist/testing/fake.d.ts

@@ -1,4 +1,4 @@
-import type { ColumnInfo, DockerContainer, ForeignKeyInfo, IndexInfo, ServerInfo, TableKind, Value } from '../protocol/index.ts';
+import type { CheckInfo, ColumnInfo, DockerContainer, ForeignKeyInfo, IndexInfo, ServerInfo, TableKind, TriggerInfo, Value } from '../protocol/index.ts';
 import type { DatabaseTransport } from '../client/types.ts';
 export interface FakeTable {
     readonly kind?: TableKind;
@@ -7,6 +7,8 @@ export interface FakeTable {
     readonly rows: readonly (readonly Value[])[];
     readonly indexes?: readonly IndexInfo[];
     readonly foreignKeys?: readonly ForeignKeyInfo[];
+    readonly checks?: readonly CheckInfo[];
+    readonly triggers?: readonly TriggerInfo[];
     readonly ddl?: string;
 }
 export interface FakeDatabase {

package/dist/testing/fake.js

@@ -18,12 +18,16 @@ const toTables = (database) => new Map(Object.entries(database.schemas).map(([sc
     new Map(Object.entries(tables).map(([name, table]) => [
         name,
         {
+            schema,
+            name,
             kind: table.kind ?? 'table',
             columns: structuredClone([...table.columns]),
             primaryKey: [...(table.primaryKey ?? [])],
             rows: structuredClone(table.rows.map((row) => [...row])),
             indexes: structuredClone([...(table.indexes ?? [])]),
             foreignKeys: structuredClone([...(table.foreignKeys ?? [])]),
+            checks: table.checks === undefined ? undefined : structuredClone([...table.checks]),
+            triggers: table.triggers === undefined ? undefined : structuredClone([...table.triggers]),
             ddl: table.ddl ?? null
         }
     ]))
@@ -71,7 +75,7 @@ const toCell = (value, cellLimit) => {
     }
     return value;
 };
-const toResultColumns = (table) => table.columns.map(({ name, type, kind }) => ({ name, type, kind }));
+const toResultColumns = (table) => table.columns.map(({ name, type, kind }) => ({ name, type, kind, source: { schema: table.schema, table: table.name, column: name } }));
 const toRowsResult = (table, rows, offset, limit, cellLimit) => ({
     columns: toResultColumns(table),
     rows: rows.slice(offset, offset + limit).map((row) => row.map((value) => toCell(value, cellLimit))),
@@ -259,6 +263,8 @@ export const fakeDatabaseTransport = (options) => {
                 rowKey: rowKeyOf(table),
                 indexes: table.indexes,
                 foreignKeys: table.foreignKeys,
+                ...(table.checks === undefined ? {} : { checks: table.checks }),
+                ...(table.triggers === undefined ? {} : { triggers: table.triggers }),
                 ddl: table.ddl
             };
         },

package/dist/value/ValueEditor.d.ts

@@ -0,0 +1,9 @@
+import type { GridColumn } from '../grid/types.ts';
+import type { EditValue, Value } from '../protocol/index.ts';
+export interface ValueEditorProps {
+    column: GridColumn;
+    value: Value;
+    editable: boolean;
+    onCommit?(value: EditValue): void;
+}
+export declare function ValueEditor({ column, value, editable, onCommit }: ValueEditorProps): import("react").JSX.Element;

package/dist/value/ValueEditor.js

@@ -0,0 +1,102 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from 'react';
+import clsx from 'clsx';
+import { Copy, Ellipsis, WrapText } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { Button, ButtonGroup, copyText, FormError, IconButton, isApplePlatform, KEY_SHORTCUTS, matchesShortcut, Menu, Segmented, TextArea, Tooltip } from '@adecore/ui';
+import { formatBytes, formatNumber } from '@adecore/ui/format';
+import { CODE_TEXT } from '../code-text.js';
+import { editValueOf, sameDraft, sameSource, sourceOf } from './draft.js';
+import { hexDumpLines, parseHex } from './hex.js';
+import { renderView, sizeOf, viewsOf } from './views.js';
+const WRAPPING_VIEWS = new Set(['text', 'formatted', 'utf8']);
+const READING = `min-h-0 flex-1 overflow-auto rounded-lg border border-border bg-surface p-2 ${CODE_TEXT} text-text`;
+/*
+ * The whole of one value, to read and change what a cell is too small for: Text, Formatted for JSON, or
+ * Hex, Text and UUID for binary, with the checks of JSON and hex before a change is taken.
+ */
+export function ValueEditor({ column, value, editable, onCommit }) {
+    const { t } = useTranslation('database');
+    const { name, type, kind } = column;
+    const source = useMemo(() => sourceOf({ name, type, kind }, value), [name, type, kind, value]);
+    const [seen, setSeen] = useState(source);
+    const [draft, setDraft] = useState(source.original);
+    const [choice, setChoice] = useState(null);
+    const [problem, setProblem] = useState(null);
+    const [wrap, setWrap] = useState(true);
+    // A new cell, or the same cell with a new value, starts over from that value.
+    if (!sameSource(seen, source)) {
+        setSeen(source);
+        setDraft(source.original);
+        setChoice(null);
+        setProblem(null);
+    }
+    const views = viewsOf(source, draft);
+    const view = choice !== null && views.includes(choice) ? choice : views[0];
+    const dirty = !sameDraft(draft, source.original);
+    const rendered = useMemo(() => (view === 'text' ? null : renderView(view, draft)), [view, draft]);
+    const hex = source.binary && draft.mode === 'value' ? parseHex(draft.text) : null;
+    const shownProblem = problem ?? (hex !== null && !hex.ok ? { kind: 'hex', problem: hex.problem } : null);
+    const size = sizeOf(source, draft);
+    const placeholder = draft.mode === 'null' ? 'NULL' : draft.mode === 'default' ? 'DEFAULT' : undefined;
+    const change = (next) => {
+        setDraft(next);
+        setProblem(null);
+    };
+    const apply = () => {
+        if (!editable || onCommit === undefined || !dirty) {
+            return;
+        }
+        const conversion = editValueOf(draft, source);
+        if (conversion.ok) {
+            onCommit(conversion.value);
+        }
+        else {
+            setProblem(conversion.problem);
+        }
+    };
+    const handleKeyDown = (event) => {
+        if (!event.nativeEvent.isComposing && matchesShortcut(KEY_SHORTCUTS.modEnter, event.nativeEvent, isApplePlatform())) {
+            event.preventDefault();
+            apply();
+        }
+    };
+    const copy = () => {
+        if (view === 'hex' && hex !== null && hex.ok) {
+            copyText(hexDumpLines(hex.hex).join('\n'));
+        }
+        else if (rendered !== null && rendered.kind === 'text') {
+            copyText(rendered.text);
+        }
+        else {
+            copyText(draft.mode === 'value' ? draft.text : draft.mode === 'null' ? 'NULL' : 'DEFAULT');
+        }
+    };
+    const editor = (extra) => (_jsx(TextArea, { "aria-label": t(source.binary ? 'value.hexEditor' : 'value.editor', { column: column.name }), wrap: wrap || source.binary ? 'soft' : 'off', spellCheck: false, readOnly: !editable, placeholder: placeholder, value: draft.mode === 'value' ? draft.text : '', className: clsx(CODE_TEXT, extra), onChange: (event) => change({ text: event.target.value, mode: 'value' }), onKeyDown: handleKeyDown }));
+    const problemText = (found) => found.kind === 'json'
+        ? t('value.invalidJson', { reason: found.reason })
+        : t(found.problem === 'odd' ? 'value.invalidHexOdd' : 'value.invalidHexCharacters');
+    const reading = (content, wrapped) => {
+        if (content.kind === 'empty') {
+            return _jsx(Faint, { children: placeholder });
+        }
+        if (content.kind === 'problem') {
+            return _jsx(Faint, { children: problemText(content.problem) });
+        }
+        return (_jsxs(_Fragment, { children: [_jsx("pre", { className: clsx(READING, wrapped ? 'break-words whitespace-pre-wrap' : 'whitespace-pre'), children: content.text }), content.truncated && (_jsx("p", { className: "shrink-0 text-xs text-text-faint", children: t('value.dumpTruncated', { shown: formatNumber(content.truncated.shown), total: formatNumber(content.truncated.total) }) }))] }));
+    };
+    const body = () => {
+        if (view === 'text') {
+            return editor('min-h-0 flex-1');
+        }
+        if (view === 'hex' && editable) {
+            return (_jsxs(_Fragment, { children: [draft.mode === 'value' && rendered !== null && reading(rendered, false), editor(draft.mode === 'value' ? 'flex-none' : 'min-h-0 flex-1')] }));
+        }
+        return rendered === null ? null : reading(rendered, wrap && WRAPPING_VIEWS.has(view));
+    };
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex h-10 shrink-0 items-center gap-2 px-2", children: [views.length > 1 && (_jsx(Segmented, { value: view, onValueChange: (id) => setChoice(id), label: t('value.views'), options: views.map((id) => ({ id, label: t(`value.view.${id}`) })) })), _jsxs(ButtonGroup, { className: "ml-auto", children: [WRAPPING_VIEWS.has(view) && (_jsx(IconButton, { icon: WrapText, size: "sm", label: t('value.wrap'), "aria-pressed": wrap, active: wrap, onClick: () => setWrap(!wrap) })), _jsx(IconButton, { icon: Copy, size: "sm", label: t('value.copy'), onClick: copy })] })] }), _jsx("div", { className: "flex min-h-0 flex-1 flex-col gap-2 px-2 pb-2", children: body() }), shownProblem !== null && _jsx(FormError, { className: "shrink-0 px-3 pb-2 text-xs", children: problemText(shownProblem) }), editable && (_jsxs("div", { className: "flex shrink-0 items-center gap-1.5 border-t border-border p-2", children: [_jsxs(Menu.Root, { children: [_jsx(IconButton, { icon: Ellipsis, size: "sm", label: t('value.more'), render: _jsx(Menu.Trigger, {}) }), _jsxs(Menu.Popup, { children: [column.nullable !== false && (_jsx(Menu.Item, { disabled: draft.mode === 'null', onClick: () => change({ text: '', mode: 'null' }), children: t('value.setNull') })), _jsx(Menu.Item, { disabled: draft.mode === 'default', onClick: () => change({ text: '', mode: 'default' }), children: t('value.setDefault') })] })] }), _jsxs("span", { className: "ml-auto flex items-center gap-1.5", children: [_jsx(Button, { size: "xs", disabled: !dirty, onClick: () => change(source.original), children: t('value.revert') }), _jsx(Tooltip, { label: t('value.applyHint'), kbd: KEY_SHORTCUTS.modEnter, children: _jsx(Button, { size: "xs", variant: "primary", disabled: !dirty || onCommit === undefined, onClick: apply, children: t('value.apply') }) })] })] })), _jsx("footer", { className: "flex h-8 shrink-0 items-center border-t border-border px-3 text-xs text-text-muted tabular-nums", children: size !== null &&
+                    (size.unit === 'bytes' ? formatBytes(size.count) : t('value.characters', { count: size.count, formatted: formatNumber(size.count) })) })] }));
+}
+function Faint({ children }) {
+    return _jsx("div", { className: clsx(CODE_TEXT, 'grid min-h-0 flex-1 place-items-center text-text-faint'), children: children });
+}

package/dist/value/ValuePanel.d.ts

@@ -1,4 +1,4 @@
-import { type Ref } from 'react';
+import type { Ref } from 'react';
 import type { GridColumn } from '../grid/types.ts';
 import type { EditValue, Value } from '../protocol/index.ts';
 export interface ValuePanelProps {