@adecore/database 0.0.1 → 0.16.0-beta.0

package/dist/table/TableView.js

@@ -0,0 +1,508 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from 'react';
+import clsx from 'clsx';
+import { ArrowDownWideNarrow, ArrowUpRight, Check, CircleAlert, CopyPlus, Download, Filter, FilterX, RefreshCw, Trash2, Undo2 } from 'lucide-react';
+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 { 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 { 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';
+import { ImportDialog } from './ImportDialog.js';
+import { layoutStorageKey } from './layout-store.js';
+import { DEFAULT_PAGE_SIZE, lastPageOffset, pageBounds } from './paging.js';
+import { addInsertWith, describeKey, emptyPending, hasRowChanges, isPendingEmpty, markDeleted, pendingCount, removeInsert, revertRows, rowKeyOf, setEdit, setInsertValue, toRowChanges } from './pending.js';
+import { foreignKeyOf, referenceOf } from './references.js';
+import { TableStatusBar } from './TableStatusBar.js';
+import { TableToolbar } from './TableToolbar.js';
+import { useLoaded } from './useLoaded.js';
+import { useStoredLayout } from './useStoredLayout.js';
+import { useTableTransfer } from './useTableTransfer.js';
+const NO_KEYS = new Set();
+/* 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');
+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 }) {
+    // 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')));
+}
+function TableBody({ connection, schema, table, defaultWhere, defaultOrderBy, onDirtyChange, className, ref }) {
+    const { t } = useTranslation('database');
+    const client = useDatabaseClient();
+    const onAction = useDatabaseAction();
+    const files = useDatabaseFiles();
+    const { stored, remember } = useStoredLayout(useDatabaseStorage(), layoutStorageKey(connection.id, schema, table));
+    const session = useMemo(() => client.session(connection), [client, connection]);
+    const grid = useRef(null);
+    const command = useRef(null);
+    const lifetime = useRef(null);
+    const counter = useRef(null);
+    const insertedBefore = useRef(0);
+    const engine = connection.config.engine;
+    const [chips, setChips] = useState(() => chipsFromQuery(engine, {
+        where: defaultWhere ?? stored?.where ?? '',
+        orderBy: defaultOrderBy ?? stored?.orderBy ?? '',
+        remembered: defaultWhere === undefined ? stored?.filters : undefined
+    }));
+    const [offset, setOffset] = useState(0);
+    const [pageSize, setPageSize] = useState(stored?.pageSize ?? DEFAULT_PAGE_SIZE);
+    const [pending, setPending] = useState(emptyPending);
+    const [selected, setSelected] = useState(NO_KEYS);
+    const [counted, setCounted] = useState(null);
+    const [counting, setCounting] = useState(false);
+    const [submitting, setSubmitting] = useState(false);
+    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 [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);
+    // The offset travels with the page it belongs to, since the page on screen lags behind the one asked for.
+    const rowsLoad = useLoaded(async (signal) => ({
+        result: await session.rows(schema, table, { where: applied.where || undefined, orderBy: applied.orderBy || undefined, offset, limit: pageSize }, { signal }),
+        offset
+    }), JSON.stringify([target, applied, offset, pageSize]));
+    const structure = structureLoad.value;
+    const loaded = rowsLoad.value?.result ?? null;
+    const loadedOffset = rowsLoad.value?.offset ?? 0;
+    const readOnlyReason = connection.config.readOnly === true
+        ? t('table.readOnly.connection')
+        : structure === null
+            ? null
+            : structure.kind === 'view'
+                ? t('table.readOnly.view')
+                : structure.rowKey === null
+                    ? t('table.readOnly.noKey')
+                    : null;
+    const editable = readOnlyReason === null && structure !== null && loaded !== null && !rowsLoad.loading;
+    const columns = useMemo(() => (loaded === null ? [] : buildGridColumns(loaded, structure)), [loaded, structure]);
+    const rows = useMemo(() => (loaded === null ? [] : buildGridRows({ structure, loaded, pending, offset: loadedOffset })), [loaded, structure, pending, loadedOffset]);
+    const transfer = useTableTransfer({
+        client,
+        session,
+        files,
+        schema,
+        table,
+        structure,
+        where: applied.where,
+        orderBy: applied.orderBy,
+        onImported: () => {
+            setCounted(null);
+            rowsLoad.reload();
+        }
+    });
+    const changeCount = pendingCount(pending);
+    const dirty = changeCount > 0;
+    const reportDirty = useRef(onDirtyChange);
+    const reportedDirty = useRef(false);
+    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
+        ? 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]);
+    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);
+            structureLoad.reload();
+            rowsLoad.reload();
+        }
+        else {
+            setShapeChanged(true);
+        }
+    });
+    useEffect(() => {
+        reportDirty.current = onDirtyChange;
+    });
+    useEffect(() => {
+        if (dirty !== reportedDirty.current) {
+            reportedDirty.current = dirty;
+            reportDirty.current?.(dirty);
+        }
+    }, [dirty]);
+    useEffect(() => {
+        const controller = new AbortController();
+        lifetime.current = controller;
+        return () => {
+            controller.abort();
+            counter.current?.abort();
+        };
+    }, []);
+    useEffect(() => {
+        if (pending.inserts.length > insertedBefore.current && grid.current !== null) {
+            grid.current.scrollTop = grid.current.scrollHeight;
+        }
+        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;
+        }
+        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]);
+    const discardPending = () => {
+        setPending(emptyPending);
+        setSelected(NO_KEYS);
+    };
+    /* Anything that replaces the page asks first when it would throw pending changes away. */
+    const guard = (action) => {
+        if (isPendingEmpty(pending)) {
+            action();
+        }
+        else {
+            setDiscard({
+                run: () => {
+                    discardPending();
+                    action();
+                }
+            });
+        }
+    };
+    /* Every change of the chips applies at once; one that changes the page asks first when it would throw pending changes away. */
+    const applyChips = (next) => {
+        const where = chipsToWhere(next);
+        const orderBy = chipsToOrderBy(engine, next);
+        const filters = next.filter((chip) => chip.kind === 'filter').map(({ text, sql }) => ({ text, sql }));
+        if (where === applied.where && orderBy === applied.orderBy) {
+            remember({ filters });
+            setChips([...next]);
+            return;
+        }
+        guard(() => {
+            remember({ where, orderBy, filters });
+            counter.current?.abort();
+            setCounting(false);
+            setCounted(null);
+            setOffset(0);
+            setSelected(NO_KEYS);
+            setFailure(null);
+            setChips([...next]);
+        });
+    };
+    const changeSorts = (next) => {
+        applyChips(withSorts(chips, next));
+    };
+    const cellChipAt = (cell, exclude) => {
+        const row = parseRowKey(cell.rowKey);
+        const column = loaded?.columns[cell.column];
+        const value = loaded === null || row.kind !== 'loaded' ? undefined : valueOfCell(loaded.rows[row.index]?.[cell.column] ?? null);
+        return column === undefined || value === undefined ? null : cellChip(engine, column.name, value, column.kind, exclude);
+    };
+    const sortByColumn = (cell) => {
+        const name = columns[cell.column]?.name;
+        if (name !== undefined) {
+            applyChips(toggleSort(chips, name));
+        }
+    };
+    const jumpToColumn = (name) => {
+        const index = columns.findIndex((column) => column.name === name);
+        if (index >= 0) {
+            setRecordOpen(false);
+            setColumnRequest({ column: index });
+        }
+    };
+    const refresh = () => {
+        guard(() => {
+            setCounted(null);
+            setFailure(null);
+            setShapeChanged(false);
+            structureLoad.reload();
+            rowsLoad.reload();
+        });
+    };
+    const goToPage = (nextOffset) => {
+        guard(() => {
+            setOffset(Math.max(0, nextOffset));
+            setSelected(NO_KEYS);
+        });
+    };
+    const changePageSize = (size) => {
+        guard(() => {
+            remember({ pageSize: size });
+            setPageSize(size);
+            setOffset(0);
+        });
+    };
+    const countRows = async () => {
+        const controller = new AbortController();
+        counter.current?.abort();
+        counter.current = controller;
+        setCounting(true);
+        try {
+            const total = await session.count(schema, table, applied.where || undefined, { signal: controller.signal });
+            if (!controller.signal.aborted) {
+                setCounted(total);
+                return total;
+            }
+        }
+        catch (error) {
+            if (!controller.signal.aborted) {
+                setFailure(messageOf(error));
+            }
+        }
+        finally {
+            if (!controller.signal.aborted) {
+                setCounting(false);
+            }
+        }
+        return null;
+    };
+    const goToLast = async () => {
+        const total = counted ?? (await countRows());
+        if (total !== null) {
+            goToPage(lastPageOffset(total, pageSize));
+        }
+    };
+    const commit = (rowKey, column, value) => {
+        const name = loaded?.columns[column]?.name;
+        const row = parseRowKey(rowKey);
+        if (loaded === null || name === undefined) {
+            return;
+        }
+        if (row.kind === 'inserted') {
+            setPending((now) => setInsertValue(now, row.id, name, value));
+        }
+        else {
+            setPending((now) => setEdit(now, row.index, name, value, loaded.rows[row.index][column] ?? null));
+        }
+    };
+    const loadValue = 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;
+        if (key === null || name === undefined) {
+            return undefined;
+        }
+        try {
+            return await session.cell(schema, table, key, name, { signal: lifetime.current?.signal });
+        }
+        catch (error) {
+            setFailure(messageOf(error));
+            return undefined;
+        }
+    };
+    const refsOf = (keys) => {
+        const loadedRows = [];
+        const inserted = [];
+        for (const key of keys) {
+            const row = parseRowKey(key);
+            if (row.kind === 'inserted') {
+                inserted.push(row.id);
+            }
+            else {
+                loadedRows.push(row.index);
+            }
+        }
+        return { loaded: loadedRows, inserted };
+    };
+    const deleteRows = (keys) => {
+        setPending((now) => {
+            const refs = refsOf(keys);
+            const next = refs.inserted.reduce(removeInsert, now);
+            return markDeleted(next, refs.loaded.filter((index) => loaded !== null && structure !== null && rowKeyOf(structure, loaded, index) !== null));
+        });
+        setSelected(NO_KEYS);
+    };
+    const deleteSelected = () => deleteRows(selected);
+    const cloneRows = (keys) => {
+        const wanted = new Set(keys);
+        const copies = rows.filter((row) => wanted.has(row.key)).map((row) => cloneValues(columns, row.cells));
+        setPending((now) => copies.reduce(addInsertWith, now));
+    };
+    const revertRowKeys = (keys) => {
+        setPending((now) => revertRows(now, refsOf(keys)));
+    };
+    const canRevert = (keys) => hasRowChanges(pending, refsOf(keys));
+    const referenceAt = (cell) => {
+        const column = columns[cell.column];
+        const key = column === undefined || structure === null ? undefined : foreignKeyOf(structure.foreignKeys, column.name);
+        const row = rowByKey.get(cell.rowKey);
+        return key === undefined || row === undefined ? null : referenceOf(engine, key, columns, row.cells);
+    };
+    const isReferenceColumn = (column) => {
+        const name = columns[column]?.name;
+        return name !== undefined && structure !== null && foreignKeyOf(structure.foreignKeys, name) !== undefined;
+    };
+    const follow = (cell) => {
+        const reference = referenceAt(cell);
+        if (reference !== null) {
+            onAction?.({
+                kind: 'open-table',
+                ref: { connectionId: connection.id, schema: reference.schema, table: reference.table },
+                view: 'data',
+                where: reference.where
+            });
+        }
+    };
+    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);
+    };
+    const changeRecordIndex = (index) => {
+        const row = rows[index];
+        if (row !== undefined) {
+            setRecordKey(row.key);
+            setFocus((now) => (now === null ? now : { rowKey: row.key, column: now.column }));
+        }
+    };
+    const queryMenu = (context) => {
+        const cell = context.cell;
+        const name = cell === null ? undefined : columns[cell.column]?.name;
+        if (cell === null || name === undefined) {
+            return null;
+        }
+        const include = cellChipAt(cell, false);
+        const exclude = cellChipAt(cell, true);
+        return (_jsxs(_Fragment, { children: [_jsxs(ContextMenu.Item, { disabled: include === null, onClick: () => include !== null && applyChips(addChip(chips, include)), children: [_jsx(Icon, { icon: Filter, size: 14 }), t('table.menu.filterOn'), " ", _jsx("span", { className: "font-mono", children: shorten(include?.text ?? name, MENU_VALUE_LENGTH) })] }), _jsxs(ContextMenu.Item, { disabled: exclude === null, onClick: () => exclude !== null && applyChips(addChip(chips, exclude)), children: [_jsx(Icon, { icon: FilterX, size: 14 }), t('table.menu.exclude'), " ", _jsx("span", { className: "font-mono", children: shorten(exclude?.text ?? name, MENU_VALUE_LENGTH) })] }), _jsxs(ContextMenu.Item, { onClick: () => sortByColumn(cell), children: [_jsx(Icon, { icon: ArrowDownWideNarrow, size: 14 }), t('table.menu.sortBy'), " ", _jsx("span", { className: "font-mono", children: name })] }), onAction !== undefined && isReferenceColumn(cell.column) && (_jsxs(ContextMenu.Item, { disabled: referenceAt(cell) === null, onClick: () => follow(cell), children: [_jsx(Icon, { icon: ArrowUpRight, size: 14 }), t('table.goToReferenced')] }))] }));
+    };
+    const gridMenu = (context) => {
+        const count = context.rowKeys.length;
+        return (_jsxs(_Fragment, { children: [_jsxs(ContextMenu.Item, { disabled: !editable, onClick: () => cloneRows(context.rowKeys), children: [_jsx(Icon, { icon: CopyPlus, size: 14 }), t('table.menu.duplicateRows', { count, formatted: formatNumber(count) }), _jsx(Kbd, { shortcut: DUPLICATE_ROWS })] }), canRevert(context.rowKeys) && (_jsxs(ContextMenu.Item, { onClick: () => revertRowKeys(context.rowKeys), children: [_jsx(Icon, { icon: Undo2, size: 14 }), t('table.menu.revertRows', { count, formatted: formatNumber(count) })] })), _jsxs(ContextMenu.Item, { className: "text-status-error", disabled: !editable, onClick: () => deleteRows(context.rowKeys), children: [_jsx(Icon, { icon: Trash2, size: 14 }), t('table.menu.deleteRows', { count, formatted: formatNumber(count) }), _jsx(Kbd, { shortcut: KEY_SHORTCUTS.backspace })] })] }));
+    };
+    const conflictMessage = (error, changes) => {
+        const change = error.change === undefined ? undefined : changes[error.change];
+        if (error.change === undefined || change === undefined || change.kind === 'insert') {
+            return error.message;
+        }
+        return t('table.conflict', { number: formatNumber(error.change + 1), row: describeKey(change.key) });
+    };
+    const submit = async () => {
+        if (structure === null || loaded === null) {
+            return;
+        }
+        const changes = toRowChanges(structure, loaded, pending);
+        setSubmitting(true);
+        setFailure(null);
+        try {
+            await session.apply(schema, table, changes);
+            discardPending();
+            setCounted(null);
+            rowsLoad.reload();
+        }
+        catch (error) {
+            setFailure(error instanceof DatabaseRequestError && error.code === 'conflict' ? conflictMessage(error, changes) : messageOf(error));
+        }
+        finally {
+            setSubmitting(false);
+        }
+    };
+    const handleKeyDown = (event) => {
+        // A dialog opened from here is a portal: its events reach this handler through React, not through the DOM.
+        if (!event.nativeEvent.isComposing &&
+            event.currentTarget.contains(event.target) &&
+            matchesShortcut(FOCUS_COMMAND, event.nativeEvent, isApplePlatform())) {
+            event.preventDefault();
+            command.current?.focus();
+            command.current?.select();
+        }
+    };
+    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
+                    ? 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: () => {
+                    discard?.run();
+                    setDiscard(null);
+                }, onOpenChange: (open) => {
+                    if (!open) {
+                        setDiscard(null);
+                    }
+                } })] }));
+}

package/dist/table/command-field.d.ts

@@ -0,0 +1,57 @@
+import type { Engine, ValueKind } from '../protocol/index.ts';
+import { type ColumnSort, type LiteralValue, type SortDirection } from '../sql.ts';
+export interface FilterChip {
+    readonly kind: 'filter';
+    readonly text: string;
+    readonly sql: string;
+}
+export interface SortChip {
+    readonly kind: 'sort';
+    readonly column: string;
+    readonly direction: SortDirection;
+}
+export interface OrderChip {
+    readonly kind: 'order';
+    readonly text: string;
+}
+export type Chip = FilterChip | SortChip | OrderChip;
+export type StoredFilter = Pick<FilterChip, 'text' | 'sql'>;
+export interface CommandColumn {
+    readonly name: string;
+    readonly type: string;
+}
+export type Suggestion = {
+    readonly kind: 'condition';
+    readonly chip: FilterChip;
+} | {
+    readonly kind: 'filter' | 'sort' | 'jump';
+    readonly column: CommandColumn;
+} | {
+    readonly kind: 'sql';
+    readonly chip: FilterChip;
+};
+export declare const SUGGESTED_COLUMNS = 4;
+export declare const chipKey: (chip: Chip) => string;
+export declare const identifierText: (name: string) => string;
+export declare const chipsToWhere: (chips: readonly Chip[]) => string;
+export declare const chipsToOrderBy: (engine: Engine, chips: readonly Chip[]) => string;
+export declare const sortsOf: (chips: readonly Chip[]) => ColumnSort[];
+export declare const withSorts: (chips: readonly Chip[], sorts: readonly ColumnSort[]) => Chip[];
+export declare const toggleSort: (chips: readonly Chip[], column: string) => Chip[];
+export declare const addChip: (chips: readonly Chip[], chip: Chip) => Chip[];
+export declare const removeChipAt: (chips: readonly Chip[], index: number) => Chip[];
+export declare const replaceChipAt: (chips: readonly Chip[], index: number, chip: Chip) => Chip[];
+export declare const filterChipsOf: (where: string, remembered?: readonly StoredFilter[]) => Chip[];
+export declare const sortChipsOf: (engine: Engine, orderBy: string) => Chip[];
+export interface ChipSource {
+    readonly where: string;
+    readonly orderBy: string;
+    readonly remembered?: readonly StoredFilter[];
+}
+export declare const chipsFromQuery: (engine: Engine, { where, orderBy, remembered }: ChipSource) => Chip[];
+export declare const parseCondition: (engine: Engine, text: string, columns: readonly string[]) => FilterChip | null;
+export declare const cellChip: (engine: Engine, column: string, value: LiteralValue, kind: ValueKind | undefined, exclude: boolean) => FilterChip;
+export declare const shorten: (text: string, limit: number) => string;
+export declare const matchColumns: (columns: readonly CommandColumn[], typed: string, limit?: number) => CommandColumn[];
+export declare const suggest: (engine: Engine, text: string, columns: readonly CommandColumn[], limit?: number) => Suggestion[];
+export declare const filterStartText: (column: CommandColumn) => string;