@adecore/database 0.0.1 → 0.16.0-beta.0

package/dist/sql.js

@@ -0,0 +1,104 @@
+const NUMERIC_KINDS = new Set(['integer', 'decimal', 'float']);
+const NUMERIC_TEXT = /^[+-]?(?:\d+\.?\d*|\.\d+)(?:[eE][+-]?\d+)?$/;
+const ORDER_ITEM = /\s*(`(?:[^`]|``)+`|"(?:[^"]|"")+"|[A-Za-z_][\w$]*)(?:\s+(asc|desc))?\s*(,|$)/iy;
+const markOf = (engine) => (engine === 'mysql' ? '`' : '"');
+export const quoteIdentifier = (engine, name) => {
+    const mark = markOf(engine);
+    return `${mark}${name.replaceAll(mark, mark + mark)}${mark}`;
+};
+/* `schema.table` with both parts quoted, or the table alone. */
+export const qualifiedName = (target) => target.schema === undefined || target.schema === ''
+    ? quoteIdentifier(target.engine, target.table)
+    : `${quoteIdentifier(target.engine, target.schema)}.${quoteIdentifier(target.engine, target.table)}`;
+const stringLiteral = (engine, text) => {
+    // MySQL reads a backslash as an escape unless the server runs with NO_BACKSLASH_ESCAPES.
+    const escaped = engine === 'mysql' ? text.replaceAll('\\', '\\\\') : text;
+    return `'${escaped.replaceAll("'", "''")}'`;
+};
+const binaryLiteral = (engine, hex) => (engine === 'mysql' && hex !== '' ? `0x${hex}` : `X'${hex}'`);
+/* A value as SQL source. `kind` lets a number that arrived as text (a decimal, a big integer) stay a number. */
+export const sqlLiteral = (engine, value, kind) => {
+    if (value === null) {
+        return 'NULL';
+    }
+    switch (typeof value) {
+        case 'boolean':
+            return engine === 'mysql' ? (value ? 'TRUE' : 'FALSE') : value ? '1' : '0';
+        case 'number':
+            return Number.isFinite(value) ? String(value) : 'NULL';
+        case 'string': {
+            const trimmed = value.trim();
+            return kind !== undefined && NUMERIC_KINDS.has(kind) && NUMERIC_TEXT.test(trimmed) ? trimmed : stringLiteral(engine, value);
+        }
+    }
+    switch (value.kind) {
+        case 'default':
+            return 'DEFAULT';
+        case 'binary':
+            return binaryLiteral(engine, value.hex);
+        case 'longText':
+            return stringLiteral(engine, value.preview);
+    }
+};
+/* `col = literal`, or `col IS NULL` since `= NULL` never matches. */
+export const equalsCondition = (engine, column, value, kind) => value === null ? `${quoteIdentifier(engine, column)} IS NULL` : `${quoteIdentifier(engine, column)} = ${sqlLiteral(engine, value, kind)}`;
+/* `col <> literal`, or `col IS NOT NULL` since `<> NULL` never matches. */
+export const notEqualsCondition = (engine, column, value, kind) => value === null ? `${quoteIdentifier(engine, column)} IS NOT NULL` : `${quoteIdentifier(engine, column)} <> ${sqlLiteral(engine, value, kind)}`;
+/* `a = 1 AND b IS NULL` for the columns of a key; the text a WHERE field holds. */
+export const matchCondition = (engine, matches) => matches.map((match) => equalsCondition(engine, match.column, match.value, match.kind)).join(' AND ');
+/* The text after `ORDER BY`: every column quoted, every direction spelled out. */
+export const orderByClause = (engine, sorts) => sorts.map((sort) => `${quoteIdentifier(engine, sort.column)} ${sort.direction === 'asc' ? 'ASC' : 'DESC'}`).join(', ');
+const unquote = (engine, word) => {
+    const mark = word[0];
+    if (mark !== '`' && mark !== '"') {
+        return word;
+    }
+    // A double quoted word is a string in MySQL, which sorts by a constant and so is not a column.
+    if (mark === '"' && engine === 'mysql') {
+        return null;
+    }
+    return word.slice(1, -1).replaceAll(mark + mark, mark);
+};
+const readOrderBy = (engine, text, resolve) => {
+    const source = text.trim();
+    if (source === '') {
+        return [];
+    }
+    const sorts = [];
+    let position = 0;
+    while (position < source.length) {
+        ORDER_ITEM.lastIndex = position;
+        const match = ORDER_ITEM.exec(source);
+        if (match === null) {
+            return null;
+        }
+        const word = unquote(engine, match[1]);
+        const column = word === null ? undefined : resolve(word);
+        if (column === undefined || sorts.some((sort) => sort.column === column)) {
+            return null;
+        }
+        sorts.push({ column, direction: match[2]?.toLowerCase() === 'desc' ? 'desc' : 'asc' });
+        position = ORDER_ITEM.lastIndex;
+        if (match[3] === '') {
+            return sorts;
+        }
+        if (position >= source.length) {
+            return null;
+        }
+    }
+    return sorts;
+};
+const matchColumn = (columns, word) => columns.find((name) => name === word) ?? columns.find((name) => name.toLowerCase() === word.toLowerCase());
+/*
+ * The sorts an ORDER BY text says, or `null` when it is anything but a plain list of the given
+ * columns, each with an optional direction. Empty text is an empty list. A column is found without
+ * regard to case, since both engines treat names that way.
+ */
+export const parseOrderBy = (engine, text, columns) => readOrderBy(engine, text, (word) => matchColumn(columns, word));
+/* The same for a text read before the columns are known, so a column keeps the spelling the text gave it. */
+export const parseOrderByLoose = (engine, text) => readOrderBy(engine, text, (word) => word);
+/* The column a word names, which may be quoted the way the engine quotes, or `undefined` when none of the columns is meant. */
+export const findColumn = (engine, word, columns) => {
+    const bare = unquote(engine, word);
+    return bare === null ? undefined : matchColumn(columns, bare);
+};

package/dist/structure/StructureView.d.ts

@@ -0,0 +1,14 @@
+import { type Ref } from 'react';
+import type { Connection } from '../client/types.ts';
+import type { TableStructure } from '../protocol/index.ts';
+export interface StructureViewProps {
+    connection: Connection;
+    schema: string;
+    table: string;
+    className?: string;
+    ref?: Ref<HTMLDivElement>;
+}
+export declare function StructureView({ connection, schema, table, className, ref }: StructureViewProps): import("react").JSX.Element;
+export declare function StructureTabs({ structure }: {
+    structure: TableStructure;
+}): import("react").JSX.Element;

package/dist/structure/StructureView.js

@@ -0,0 +1,99 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import clsx from 'clsx';
+import { CircleAlert, Copy, KeyRound, Link2 } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { Banner, Button, EmptyState, Icon, Pill, Spinner, Tabs, copyText, messageOf } from '@adecore/ui';
+import { useDatabaseClient } from '../client-context.js';
+import { useSchemaChange } from '../use-schema-change.js';
+import { referenceOf } from './structure-text.js';
+const TH = 'sticky top-0 h-7 bg-surface px-3 text-left text-xs font-medium whitespace-nowrap text-text-faint';
+const TD = 'h-7 border-t border-border-soft px-3 text-xs whitespace-nowrap text-text select-text';
+const MONO = 'font-mono text-code';
+/* The columns, indexes, foreign keys and DDL of one table or view. */
+export function StructureView({ connection, schema, table, className, ref }) {
+    const { t } = useTranslation('database');
+    const client = useDatabaseClient();
+    const [answer, setAnswer] = useState(null);
+    const [attempt, setAttempt] = useState(0);
+    // A schema change reloads without leaving the structure on screen: the answer keeps its place until the new one arrives.
+    const [reloads, setReloads] = useState(0);
+    const answered = answer !== null && answer.connection === connection && answer.schema === schema && answer.table === table && answer.attempt === attempt;
+    const load = answered ? answer.load : { status: 'loading' };
+    useSchemaChange(connection.id, schema, () => setReloads((now) => now + 1));
+    useEffect(() => {
+        let current = true;
+        const settle = (outcome) => {
+            if (current) {
+                setAnswer({ connection, schema, table, attempt, load: outcome });
+            }
+        };
+        client
+            .session(connection)
+            .structure(schema, table)
+            .then((structure) => settle({ status: 'ready', structure }), (e) => settle({ status: 'error', message: messageOf(e, t('structure.failed')) }));
+        return () => {
+            current = false;
+        };
+    }, [client, connection, schema, table, attempt, reloads, t]);
+    return (_jsxs("div", { ref: ref, className: clsx('flex min-h-0 min-w-0 flex-col', className), children: [load.status === 'loading' && (_jsx("div", { className: "grid grow place-items-center py-8 text-text-muted", children: _jsx(Spinner, { size: 20, label: t('structure.loading') }) })), load.status === 'error' && (_jsx("div", { className: "p-3", children: _jsx(Banner, { icon: CircleAlert, tone: "error", className: "w-full", message: load.message, children: _jsx(Button, { variant: "secondary", size: "sm", onClick: () => setAttempt(attempt + 1), children: t('structure.retry') }) }) })), load.status === 'ready' && _jsx(StructureTabs, { structure: load.structure })] }));
+}
+export function StructureTabs({ structure }) {
+    const { t } = useTranslation('database');
+    return (_jsxs(Tabs.Root, { defaultValue: "columns", className: "flex min-h-0 grow flex-col", children: [_jsxs(Tabs.List, { className: "shrink-0 px-3", children: [_jsxs(Tabs.Tab, { value: "columns", children: [t('structure.columns'), _jsx(Tabs.Count, { value: structure.columns.length })] }), _jsxs(Tabs.Tab, { value: "indexes", children: [t('structure.indexes'), _jsx(Tabs.Count, { value: structure.indexes.length })] }), _jsxs(Tabs.Tab, { value: "foreignKeys", children: [t('structure.foreignKeys'), _jsx(Tabs.Count, { value: structure.foreignKeys.length })] }), _jsx(Tabs.Tab, { value: "ddl", children: t('structure.ddl') })] }), _jsx(Tabs.Panel, { value: "columns", className: "min-h-0 grow overflow-auto", children: _jsx(ColumnsTable, { structure: structure }) }), _jsx(Tabs.Panel, { value: "indexes", className: "min-h-0 grow overflow-auto", children: _jsx(IndexesTable, { indexes: structure.indexes }) }), _jsx(Tabs.Panel, { value: "foreignKeys", className: "min-h-0 grow overflow-auto", children: _jsx(ForeignKeysTable, { foreignKeys: structure.foreignKeys }) }), _jsx(Tabs.Panel, { value: "ddl", className: "min-h-0 grow overflow-auto", children: _jsx(Ddl, { ddl: structure.ddl }) })] }));
+}
+function Grid({ heads, children }) {
+    return (_jsxs("table", { className: "w-full border-collapse", children: [_jsx("thead", { children: _jsx("tr", { children: heads.map((head) => (_jsx("th", { scope: "col", className: TH, children: head }, head))) }) }), _jsx("tbody", { children: children })] }));
+}
+function YesNo({ value }) {
+    const { t } = useTranslation('database');
+    return _jsx(_Fragment, { children: value ? t('structure.yes') : t('structure.no') });
+}
+function ColumnsTable({ structure }) {
+    const { t } = useTranslation('database');
+    const heads = [
+        t('structure.column.name'),
+        t('structure.column.type'),
+        t('structure.column.nullable'),
+        t('structure.column.default'),
+        t('structure.column.extra'),
+        t('structure.column.comment')
+    ];
+    const foreign = new Set(structure.foreignKeys.flatMap((key) => key.columns));
+    if (structure.columns.length === 0) {
+        return _jsx(EmptyState, { children: t('structure.noColumns') });
+    }
+    return (_jsx(Grid, { heads: heads, children: structure.columns.map((column) => (_jsx(ColumnRow, { column: column, primary: structure.primaryKey.includes(column.name), foreign: foreign.has(column.name) }, column.name))) }));
+}
+function ColumnRow({ column, primary, foreign }) {
+    const { t } = useTranslation('database');
+    return (_jsxs("tr", { children: [_jsx("td", { className: TD, children: _jsxs("span", { className: "flex items-center gap-1.5", children: [primary ? (_jsx(Icon, { icon: KeyRound, size: 12, className: "shrink-0 text-status-needs-you" })) : foreign ? (_jsx(Icon, { icon: Link2, size: 12, className: "shrink-0 text-text-muted" })) : (_jsx("span", { className: "size-3 shrink-0" })), column.name] }) }), _jsx("td", { className: clsx(TD, MONO), children: column.type }), _jsx("td", { className: clsx(TD, 'text-text-muted'), children: _jsx(YesNo, { value: column.nullable }) }), _jsx("td", { className: clsx(TD, MONO), children: column.defaultValue }), _jsx("td", { className: TD, children: _jsxs("span", { className: "flex gap-1", children: [column.autoIncrement && _jsx(Pill, { children: t('structure.autoIncrement') }), column.generated && _jsx(Pill, { children: t('structure.generated') })] }) }), _jsx("td", { className: clsx(TD, 'text-text-muted'), children: column.comment })] }));
+}
+function IndexesTable({ indexes }) {
+    const { t } = useTranslation('database');
+    if (indexes.length === 0) {
+        return _jsx(EmptyState, { children: t('structure.noIndexes') });
+    }
+    return (_jsx(Grid, { heads: [t('structure.index.name'), t('structure.index.columns'), t('structure.index.kind')], children: indexes.map((index) => (_jsxs("tr", { children: [_jsx("td", { className: TD, children: index.name }), _jsx("td", { className: clsx(TD, MONO), children: index.columns.join(', ') }), _jsx("td", { className: TD, children: _jsxs("span", { className: "flex gap-1", children: [index.primary && _jsx(Pill, { tone: "accent", children: t('structure.primary') }), index.unique && !index.primary && _jsx(Pill, { children: t('structure.unique') })] }) })] }, index.name))) }));
+}
+function ForeignKeysTable({ foreignKeys }) {
+    const { t } = useTranslation('database');
+    if (foreignKeys.length === 0) {
+        return _jsx(EmptyState, { children: t('structure.noForeignKeys') });
+    }
+    const action = (value) => value ?? t('structure.engineDefault');
+    return (_jsx(Grid, { heads: [
+            t('structure.foreignKey.name'),
+            t('structure.foreignKey.columns'),
+            t('structure.foreignKey.references'),
+            t('structure.foreignKey.onUpdate'),
+            t('structure.foreignKey.onDelete')
+        ], children: foreignKeys.map((key, i) => (_jsxs("tr", { children: [_jsx("td", { className: TD, children: key.name }), _jsx("td", { className: clsx(TD, MONO), children: key.columns.join(', ') }), _jsx("td", { className: clsx(TD, MONO), children: referenceOf(key) }), _jsx("td", { className: clsx(TD, 'text-text-muted'), children: action(key.onUpdate) }), _jsx("td", { className: clsx(TD, 'text-text-muted'), children: action(key.onDelete) })] }, key.name ?? i))) }));
+}
+function Ddl({ ddl }) {
+    const { t } = useTranslation('database');
+    if (ddl === null) {
+        return _jsx(EmptyState, { children: t('structure.noDdl') });
+    }
+    return (_jsxs("div", { className: "relative", children: [_jsxs(Button, { variant: "secondary", size: "xs", className: "absolute top-2 right-3", onClick: () => copyText(ddl), children: [_jsx(Icon, { icon: Copy, size: 12 }), t('structure.copy')] }), _jsx("pre", { className: clsx(MONO, 'overflow-auto p-3 pr-24 whitespace-pre text-text select-text'), children: ddl })] }));
+}

package/dist/structure/structure-text.d.ts

@@ -0,0 +1,2 @@
+import type { ForeignKeyInfo } from '../protocol/index.ts';
+export declare const referenceOf: (key: ForeignKeyInfo) => string;

package/dist/structure/structure-text.js

@@ -0,0 +1,2 @@
+/* The target of a foreign key as SQL writes it: `schema.table(column, column)`. */
+export const referenceOf = (key) => `${key.referencedSchema}.${key.referencedTable}(${key.referencedColumns.join(', ')})`;

package/dist/table/CommandField.d.ts

@@ -0,0 +1,14 @@
+import { type Ref } from 'react';
+import type { Engine } from '../protocol/index.ts';
+import { type Chip, type CommandColumn } from './command-field.ts';
+export interface CommandFieldProps {
+    chips: readonly Chip[];
+    columns: readonly CommandColumn[];
+    engine: Engine;
+    onChipsChange(next: Chip[]): void;
+    onJumpToColumn(name: string): void;
+    inputRef?: Ref<HTMLInputElement>;
+    className?: string;
+    ref?: Ref<HTMLDivElement>;
+}
+export declare function CommandField({ chips, columns, engine, onChipsChange, onJumpToColumn, inputRef, className, ref }: CommandFieldProps): import("react").JSX.Element;

package/dist/table/CommandField.js

@@ -0,0 +1,157 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import clsx from 'clsx';
+import { ArrowDown, ArrowDownWideNarrow, ArrowRightToLine, ArrowUp, Code, Filter, Search, X } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { Icon, IconButton, Kbd, KEY_SHORTCUTS, Menu, shortcut } from '@adecore/ui';
+import { addChip, filterStartText, removeChipAt, replaceChipAt, suggest, toggleSort } from './command-field.js';
+const FOCUS_SHORTCUT = shortcut('Mod+F');
+const SUGGESTION_ICON = {
+    condition: Filter,
+    filter: Filter,
+    sort: ArrowDownWideNarrow,
+    jump: ArrowRightToLine,
+    sql: Code
+};
+const columnOf = (suggestion) => (suggestion.kind === 'sql' || suggestion.kind === 'condition' ? null : suggestion.column);
+/*
+ * One field for the conditions and the sorts of a table. They are chips in front of the text; typing
+ * opens suggestions to filter on a column, sort by it or jump to it, and a text that reads as a
+ * condition (`quantity > 1`) becomes a chip on Enter.
+ */
+export function CommandField({ chips, columns, engine, onChipsChange, onJumpToColumn, inputRef, className, ref }) {
+    const { t } = useTranslation('database');
+    const listId = useId();
+    const input = useRef(null);
+    const [text, setText] = useState('');
+    /* The chip whose text is in the input to be changed; it stays in the list, hidden, until the change is made. */
+    const [editing, setEditing] = useState(null);
+    const [focused, setFocused] = useState(false);
+    const [active, setActive] = useState(0);
+    const [dismissed, setDismissed] = useState(false);
+    const suggestions = useMemo(() => suggest(engine, text, columns), [engine, text, columns]);
+    const open = focused && !dismissed && suggestions.length > 0;
+    const optionId = (index) => `${listId}-${index}`;
+    useImperativeHandle(inputRef, () => input.current, []);
+    const change = (value) => {
+        setText(value);
+        setActive(0);
+        setDismissed(false);
+    };
+    const clear = () => {
+        setText('');
+        setEditing(null);
+        setActive(0);
+        setDismissed(false);
+    };
+    const commit = (chip) => {
+        onChipsChange(editing === null ? addChip(chips, chip) : replaceChipAt(chips, editing, chip));
+        clear();
+    };
+    const pick = (suggestion) => {
+        switch (suggestion.kind) {
+            case 'condition':
+            case 'sql':
+                commit(suggestion.chip);
+                break;
+            case 'filter':
+                change(filterStartText(suggestion.column));
+                input.current?.focus();
+                break;
+            case 'sort':
+                onChipsChange(toggleSort(chips, suggestion.column.name));
+                clear();
+                break;
+            case 'jump':
+                clear();
+                onJumpToColumn(suggestion.column.name);
+                break;
+        }
+    };
+    const edit = (index, chip) => {
+        setEditing(index);
+        setText(chip.text);
+        setActive(0);
+        setDismissed(true);
+        input.current?.focus();
+    };
+    const activate = (index, chip) => {
+        if (chip.kind === 'filter') {
+            edit(index, chip);
+        }
+        else if (chip.kind === 'sort') {
+            onChipsChange(toggleSort(chips, chip.column));
+        }
+    };
+    const handleKeyDown = (event) => {
+        if (event.nativeEvent.isComposing) {
+            return;
+        }
+        if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+            if (suggestions.length > 0) {
+                event.preventDefault();
+                setDismissed(false);
+                setActive((now) => (now + (event.key === 'ArrowDown' ? 1 : -1) + suggestions.length) % suggestions.length);
+            }
+        }
+        else if (event.key === 'Enter') {
+            event.preventDefault();
+            const suggestion = suggestions[Math.min(active, suggestions.length - 1)];
+            if (suggestion !== undefined) {
+                pick(suggestion);
+            }
+            else if (editing !== null) {
+                onChipsChange(removeChipAt(chips, editing));
+                clear();
+            }
+        }
+        else if (event.key === 'Escape') {
+            if (open) {
+                event.preventDefault();
+                setDismissed(true);
+            }
+            else if (text !== '' || editing !== null) {
+                event.preventDefault();
+                clear();
+            }
+        }
+        else if (event.key === 'Backspace' && text === '' && editing === null && chips.length > 0) {
+            event.preventDefault();
+            onChipsChange(removeChipAt(chips, chips.length - 1));
+        }
+    };
+    const handleBlur = () => {
+        setFocused(false);
+        if (editing !== null) {
+            clear();
+        }
+    };
+    return (_jsxs("div", { ref: ref, className: clsx('field field-sm focus-ring-within relative flex h-auto min-h-7 min-w-0 flex-1 flex-wrap items-center gap-1 py-0.5', className), onClick: (event) => event.target === event.currentTarget && input.current?.focus(), children: [_jsx(Icon, { icon: Search, size: 14, className: "shrink-0 text-text-faint" }), chips.map((chip, index) => index === editing ? null : (_jsx(ChipView, { chip: chip, onActivate: () => activate(index, chip), onRemove: () => onChipsChange(removeChipAt(chips, index)) }, `${chip.kind}:${chip.kind === 'sort' ? chip.column : chip.text}`))), _jsx("input", { ref: input, role: "combobox", "aria-label": t('table.command.label'), "aria-expanded": open, "aria-controls": open ? listId : undefined, "aria-activedescendant": open ? optionId(active) : undefined, "aria-autocomplete": "list", value: text, placeholder: chips.length === 0 ? t('table.command.placeholder') : undefined, spellCheck: false, autoComplete: "off", className: "min-w-24 flex-1 bg-transparent font-mono text-code text-text outline-none placeholder:font-sans placeholder:text-text-faint", onChange: (event) => change(event.target.value), onKeyDown: handleKeyDown, onFocus: () => setFocused(true), onBlur: handleBlur }), _jsx(Kbd, { shortcut: FOCUS_SHORTCUT, variant: "inline", className: "shrink-0" }), open && (_jsx("div", { id: listId, role: "listbox", "aria-label": t('table.command.suggestions'), className: "menu-popup absolute top-full left-0 z-(--z-popup) mt-1.5 max-h-80 w-full max-w-xl", 
+                // The input keeps the focus, or the popup would close under the pointer.
+                onPointerDown: (event) => event.preventDefault(), children: suggestions.map((suggestion, index) => {
+                    const column = columnOf(suggestion);
+                    const previous = suggestions[index - 1];
+                    const startsGroup = column !== null && (previous === undefined || columnOf(previous)?.name !== column.name);
+                    return (_jsxs("div", { role: "presentation", children: [startsGroup && (_jsxs(Menu.Label, { children: [_jsx("span", { className: "font-mono", children: column.name }), column.type !== '' && _jsxs("span", { children: [" \u00B7 ", column.type] })] })), suggestion.kind === 'sql' && index > 0 && _jsx(Menu.Separator, {}), _jsxs("div", { id: optionId(index), role: "option", "aria-selected": index === active, "data-active": index === active, className: "menu-item cursor-row", onPointerMove: () => setActive(index), onClick: () => pick(suggestion), children: [_jsx(Icon, { icon: SUGGESTION_ICON[suggestion.kind], size: 14 }), _jsx(SuggestionLabel, { suggestion: suggestion }), index === active && suggestion.kind !== 'sql' && _jsx(Kbd, { shortcut: KEY_SHORTCUTS.enter })] })] }, `${suggestion.kind}:${column?.name ?? ''}`));
+                }) }))] }));
+}
+function SuggestionLabel({ suggestion }) {
+    const { t } = useTranslation('database');
+    switch (suggestion.kind) {
+        case 'condition':
+            return (_jsxs(_Fragment, { children: [t('table.command.addFilter'), " ", _jsx("span", { className: "min-w-0 truncate font-mono", children: suggestion.chip.text })] }));
+        case 'filter':
+            return (_jsxs(_Fragment, { children: [t('table.command.filterOn'), " ", _jsx("span", { className: "font-mono", children: suggestion.column.name })] }));
+        case 'sort':
+            return (_jsxs(_Fragment, { children: [t('table.command.sortBy'), " ", _jsx("span", { className: "font-mono", children: suggestion.column.name })] }));
+        case 'jump':
+            return t('table.command.jumpTo');
+        case 'sql':
+            return (_jsxs(_Fragment, { children: [t('table.command.asSql'), _jsx(Menu.Hint, { className: "font-mono", children: "WHERE \u2026" })] }));
+    }
+}
+/* A filter opens its text for editing, a sort flips its direction, and a raw ORDER BY is only shown. */
+function ChipView({ chip, onActivate, onRemove }) {
+    const { t } = useTranslation('database');
+    return (_jsxs("span", { className: "inline-flex h-5 max-w-72 min-w-0 shrink-0 items-center rounded-md bg-text/10 font-mono text-code text-text", children: [chip.kind === 'filter' && (_jsx("button", { type: "button", "aria-label": t('table.command.editFilter', { filter: chip.text }), className: "min-w-0 truncate pl-1.5 text-left", onClick: onActivate, children: chip.text })), chip.kind === 'sort' && (_jsxs("button", { type: "button", "aria-label": t('table.command.flipSort', { column: chip.column }), className: "inline-flex min-w-0 items-center gap-1 pl-1.5 text-left", onClick: onActivate, children: [_jsx(Icon, { icon: chip.direction === 'asc' ? ArrowUp : ArrowDown, size: 12, className: "shrink-0" }), _jsx("span", { className: "truncate", children: chip.column })] })), chip.kind === 'order' && _jsx("span", { className: "min-w-0 truncate pl-1.5", children: chip.text }), _jsx(IconButton, { icon: X, size: "2xs", label: t(chip.kind === 'sort' ? 'table.command.removeSort' : 'table.command.removeFilter'), tooltip: false, className: "shrink-0", onClick: onRemove })] }));
+}

package/dist/table/ImportDialog.d.ts

@@ -0,0 +1,27 @@
+import type { Ref } from 'react';
+import type { ColumnInfo } from '../protocol/index.ts';
+export interface ImportSample {
+    readonly columns: readonly string[];
+    readonly rows: readonly (readonly string[])[];
+}
+export interface ImportFormProps {
+    path: string;
+    tableColumns: readonly ColumnInfo[];
+    sample: ImportSample | null;
+    header: boolean;
+    mapping: readonly (string | null)[];
+    busy: boolean;
+    error: string | null;
+    onHeaderChange(header: boolean): void;
+    onMappingChange(fileColumn: number, tableColumn: string | null): void;
+    onImport(): void;
+    onCancel(): void;
+    className?: string;
+    ref?: Ref<HTMLDivElement>;
+}
+export declare function ImportForm({ path, tableColumns, sample, header, mapping, busy, error, onHeaderChange, onMappingChange, onImport, onCancel, className, ref }: ImportFormProps): import("react").JSX.Element;
+export interface ImportDialogProps extends ImportFormProps {
+    open: boolean;
+    onOpenChange(open: boolean): void;
+}
+export declare function ImportDialog({ open, onOpenChange, ...form }: ImportDialogProps): import("react").JSX.Element;

package/dist/table/ImportDialog.js

@@ -0,0 +1,28 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { useTranslation } from 'react-i18next';
+import { Button, Dialog, FormError, Select, Spinner, Switch } from '@adecore/ui';
+import { formatNumber } from '@adecore/ui/format';
+import { hasMapping } from './import-mapping.js';
+/* How many of the sampled rows the preview shows. */
+const PREVIEW_ROWS = 8;
+const SKIP = '-1';
+/* The body of the import dialog: how the file's columns map onto the table's, and a look at the rows. */
+export function ImportForm({ path, tableColumns, sample, header, mapping, busy, error, onHeaderChange, onMappingChange, onImport, onCancel, className, ref }) {
+    const { t } = useTranslation('database');
+    const items = [{ value: SKIP, label: t('table.import.skip') }, ...tableColumns.map((column, index) => ({ value: String(index), label: column.name }))];
+    const valueOf = (name) => {
+        const index = name === null ? -1 : tableColumns.findIndex((column) => column.name === name);
+        return index < 0 ? SKIP : String(index);
+    };
+    const canImport = sample !== null && hasMapping(mapping) && !busy;
+    return (_jsxs("div", { ref: ref, className: clsx('flex min-h-0 flex-col gap-4', className), children: [_jsx("p", { className: "truncate font-mono text-code text-text-muted", children: path }), _jsxs("div", { className: "flex items-center gap-3 text-sm text-text", children: [_jsx(Switch, { checked: header, label: t('table.import.header'), disabled: busy, onCheckedChange: onHeaderChange }), _jsx("span", { children: t('table.import.header') }), sample === null && _jsx(Spinner, { size: 12, label: t('table.import.sampling') })] }), sample !== null && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "grid min-h-0 grid-cols-2 items-center gap-x-3 gap-y-1.5 overflow-auto", children: [_jsx("span", { className: "text-xs text-text-faint", children: t('table.import.fileColumn') }), _jsx("span", { className: "text-xs text-text-faint", children: t('table.import.tableColumn') }), sample.columns.map((name, index) => (_jsx(MappingRow, { name: name, value: valueOf(mapping[index] ?? null), items: items, disabled: busy, label: t('table.import.mapTo', { column: name }), onChange: (value) => onMappingChange(index, value === SKIP ? null : (tableColumns[Number(value)]?.name ?? null)) }, index)))] }), _jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("span", { className: "text-xs text-text-faint", children: t('table.import.preview', { count: formatNumber(Math.min(sample.rows.length, PREVIEW_ROWS)) }) }), _jsx("div", { className: "max-h-48 overflow-auto rounded-lg border border-border", children: _jsxs("table", { className: "w-full border-collapse text-left font-mono text-code", children: [_jsx("thead", { className: "sticky top-0 bg-surface-raised", children: _jsx("tr", { children: sample.columns.map((name, index) => (_jsx("th", { className: "max-w-48 truncate border-b border-border px-2 py-1 font-medium text-text-muted", children: name }, index))) }) }), _jsx("tbody", { children: sample.rows.slice(0, PREVIEW_ROWS).map((row, rowIndex) => (_jsx("tr", { className: "border-b border-border-soft last:border-b-0", children: sample.columns.map((_, index) => (_jsx("td", { className: "max-w-48 truncate px-2 py-1 whitespace-nowrap text-text", children: row[index] ?? '' }, index))) }, rowIndex))) })] }) })] })] })), error !== null && _jsx(FormError, { children: error }), _jsxs(Dialog.Footer, { className: "mt-0", children: [_jsx(Button, { disabled: busy, onClick: onCancel, children: t('table.import.cancel') }), _jsxs(Button, { variant: "primary", disabled: !canImport, onClick: onImport, children: [busy && _jsx(Spinner, { size: 12 }), t('table.import.confirm')] })] })] }));
+}
+function MappingRow({ name, value, items, disabled, label, onChange }) {
+    return (_jsxs(_Fragment, { children: [_jsx("span", { className: "truncate font-mono text-code text-text", children: name }), _jsx(Select, { size: "sm", className: "w-full", label: label, value: value, items: items, disabled: disabled, onValueChange: onChange })] }));
+}
+/* The import of a file into the table: pick how the columns map, look at the rows, confirm. */
+export function ImportDialog({ open, onOpenChange, ...form }) {
+    const { t } = useTranslation('database');
+    return (_jsx(Dialog.Root, { open: open, onOpenChange: (next) => !form.busy && onOpenChange(next), children: _jsxs(Dialog.Popup, { className: "flex max-h-[calc(100vh-96px)] w-[720px] max-w-[calc(100vw-48px)] flex-col p-5", children: [_jsx(Dialog.Title, { children: t('table.import.title') }), _jsx(Dialog.Description, { className: "mt-1 mb-4", children: t('table.import.description') }), _jsx(ImportForm, { ...form })] }) }));
+}

package/dist/table/TableStatusBar.d.ts

@@ -0,0 +1,19 @@
+import type { Ref } from 'react';
+import type { Aggregates } from '../grid/aggregates.ts';
+import type { PageBounds } from './paging.ts';
+export interface SelectionFigures {
+    readonly columns: readonly string[];
+    readonly aggregates: Aggregates;
+}
+export interface TableStatusBarProps {
+    elapsedMs: number;
+    bounds: PageBounds;
+    counting: boolean;
+    selection?: SelectionFigures | null;
+    onCount(): void;
+    onPrevious(): void;
+    onNext(): void;
+    className?: string;
+    ref?: Ref<HTMLElement>;
+}
+export declare function TableStatusBar({ elapsedMs, bounds, counting, selection, onCount, onPrevious, onNext, className, ref }: TableStatusBarProps): import("react").JSX.Element;

package/dist/table/TableStatusBar.js

@@ -0,0 +1,22 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { Button, IconButton, Spinner, Tooltip } from '@adecore/ui';
+import { formatDecimal, formatNumber, formatRounded } from '@adecore/ui/format';
+import { useNumberNotation } from '../client-context.js';
+import { numeralText } from '../grid/display.js';
+/* Which rows are on the page and how many there are, the way to the other pages, and the figures of the selected cells. */
+export function TableStatusBar({ elapsedMs, bounds, counting, selection, onCount, onPrevious, onNext, className, ref }) {
+    const { t } = useTranslation('database');
+    return (_jsxs("footer", { ref: ref, className: clsx('flex h-9 shrink-0 items-center gap-3 border-t border-border px-3 text-xs text-text-muted', className), children: [_jsxs("span", { className: "flex items-center gap-1 tabular-nums", children: [bounds.to === 0 ? t('table.noRows') : t('table.range', { from: formatNumber(bounds.from), to: formatNumber(bounds.to) }), bounds.to > 0 &&
+                        (bounds.exact ? (_jsx("span", { children: t('table.total', { total: formatNumber(bounds.total) }) })) : (_jsxs(_Fragment, { children: [_jsx("span", { children: t('table.of') }), _jsxs(Button, { size: "xs", "aria-label": t('table.count'), disabled: counting, onClick: onCount, children: [counting && _jsx(Spinner, { size: 12 }), t('table.atLeast', { total: formatNumber(bounds.total) })] })] })))] }), _jsxs("span", { className: "flex items-center", children: [_jsx(IconButton, { icon: ChevronLeft, size: "sm", label: t('table.previousPage'), disabled: !bounds.hasPrevious, onClick: onPrevious }), _jsx(IconButton, { icon: ChevronRight, size: "sm", label: t('table.nextPage'), disabled: !bounds.hasNext, onClick: onNext })] }), _jsx(Tooltip, { label: t('table.queryTime'), children: _jsx("span", { className: "text-text-faint tabular-nums", children: t('table.elapsed', { value: formatDecimal(elapsedMs) }) }) }), selection != null && _jsx(SelectionSummary, { selection: selection })] }));
+}
+function SelectionSummary({ selection }) {
+    const { t } = useTranslation('database');
+    const { columns, aggregates } = selection;
+    const { count, numeric } = aggregates;
+    const notation = useNumberNotation();
+    const figure = (label, value) => (_jsxs("span", { className: "shrink-0", children: [_jsx("span", { className: "text-text-faint", children: label }), " ", _jsx("span", { className: "text-text", children: value })] }));
+    return (_jsxs("span", { className: "ml-auto flex min-w-0 items-center gap-4 tabular-nums", "data-selection": "", children: [_jsx("span", { className: "min-w-0 truncate font-mono text-text", children: columns.length === 1 ? columns[0] : t('table.aggregates.columns', { formatted: formatNumber(columns.length) }) }), _jsx("span", { className: "shrink-0 text-text-faint", children: t('table.aggregates.cells', { count, cells: formatNumber(count) }) }), numeric !== null && (_jsxs(_Fragment, { children: [figure(t('table.aggregates.sum'), formatRounded(numeric.sum, 2)), figure(t('table.aggregates.average'), formatRounded(numeric.average, 2)), figure(t('table.aggregates.minimum'), numeralText(numeric.minimumText, notation)), figure(t('table.aggregates.maximum'), numeralText(numeric.maximumText, notation))] }))] }));
+}

package/dist/table/TableToolbar.d.ts

@@ -0,0 +1,43 @@
+import type { Ref } from 'react';
+import type { Engine, FileFormat } from '../protocol/index.ts';
+import type { Chip, CommandColumn } from './command-field.ts';
+import { type PageBounds } from './paging.ts';
+export interface TransferMenu {
+    busy: boolean;
+    onExport(format: FileFormat): void;
+    onImport?(): void;
+}
+export interface TableToolbarProps {
+    refreshing: boolean;
+    readOnlyReason: string | null;
+    hasSelection: boolean;
+    canRevertSelection: boolean;
+    valuePanelOpen: boolean;
+    recordViewOpen?: boolean;
+    transfer?: TransferMenu;
+    pendingCount: number;
+    submitting: boolean;
+    engine: Engine;
+    chips: readonly Chip[];
+    columns: readonly CommandColumn[];
+    pageSize: number;
+    bounds: PageBounds;
+    commandRef?: Ref<HTMLInputElement>;
+    onChipsChange(next: Chip[]): void;
+    onJumpToColumn(name: string): void;
+    onRefresh(): void;
+    onAddRow(): void;
+    onDeleteRows(): void;
+    onCloneRows(): void;
+    onRevertRows(): void;
+    onToggleValuePanel(): void;
+    onToggleRecordView?(): void;
+    onPageSizeChange(size: number): void;
+    onFirstPage(): void;
+    onLastPage(): void;
+    onSubmit(): void;
+    onRevert(): void;
+    className?: string;
+    ref?: Ref<HTMLDivElement>;
+}
+export declare function TableToolbar({ refreshing, readOnlyReason, hasSelection, canRevertSelection, valuePanelOpen, recordViewOpen, transfer, pendingCount, submitting, engine, chips, columns, pageSize, bounds, commandRef, onChipsChange, onJumpToColumn, onRefresh, onAddRow, onDeleteRows, onCloneRows, onRevertRows, onToggleValuePanel, onToggleRecordView, onPageSizeChange, onFirstPage, onLastPage, onSubmit, onRevert, className, ref }: TableToolbarProps): import("react").JSX.Element;

package/dist/table/TableToolbar.js

@@ -0,0 +1,16 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { ChevronsLeft, ChevronsRight, CopyPlus, Download, Ellipsis, FileInput, PanelRight, Plus, RefreshCw, Rows3, TableProperties, Trash2, Undo2 } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { Button, Icon, IconButton, Menu } from '@adecore/ui';
+import { formatNumber } from '@adecore/ui/format';
+import { CommandField } from './CommandField.js';
+import { PAGE_SIZES } from './paging.js';
+const EXPORT_FORMATS = ['csv', 'tsv', 'json', 'sql'];
+/* The command field for filtering, sorting and jumping to a column, refresh, add row, the submit of pending changes, and a menu of the rest. */
+export function TableToolbar({ refreshing, readOnlyReason, hasSelection, canRevertSelection, valuePanelOpen, recordViewOpen = false, transfer, pendingCount, submitting, engine, chips, columns, pageSize, bounds, commandRef, onChipsChange, onJumpToColumn, onRefresh, onAddRow, onDeleteRows, onCloneRows, onRevertRows, onToggleValuePanel, onToggleRecordView, onPageSizeChange, onFirstPage, onLastPage, onSubmit, onRevert, className, ref }) {
+    const { t } = useTranslation('database');
+    const readOnly = readOnlyReason !== null;
+    const tooltipOf = (label) => (readOnly ? t('table.unavailable', { action: label, reason: readOnlyReason }) : label);
+    return (_jsxs("div", { ref: ref, className: clsx('flex shrink-0 items-center gap-2 border-b border-border px-3 py-2', className), children: [_jsx(CommandField, { chips: chips, columns: columns, engine: engine, inputRef: commandRef, onChipsChange: onChipsChange, onJumpToColumn: onJumpToColumn }), pendingCount > 0 && (_jsxs(_Fragment, { children: [_jsx(Button, { variant: "primary", size: "sm", disabled: submitting, onClick: onSubmit, children: t('table.submit', { changes: formatNumber(pendingCount) }) }), _jsx(Button, { size: "sm", disabled: submitting, onClick: onRevert, children: t('table.revert') })] })), _jsx(IconButton, { icon: RefreshCw, size: "sm", label: t('table.refresh'), busy: refreshing, onClick: onRefresh }), _jsx(IconButton, { icon: Plus, size: "sm", label: t('table.addRow'), tooltip: tooltipOf(t('table.addRow')), "aria-disabled": readOnly || undefined, onClick: () => !readOnly && onAddRow() }), _jsxs(Menu.Root, { children: [_jsx(IconButton, { icon: Ellipsis, size: "sm", label: t('table.more'), render: _jsx(Menu.Trigger, {}) }), _jsxs(Menu.Popup, { align: "end", children: [_jsxs(Menu.SubmenuRoot, { children: [_jsxs(Menu.SubmenuTrigger, { children: [_jsx(Icon, { icon: Rows3, size: 14 }), t('table.pageSize')] }), _jsx(Menu.Popup, { children: _jsx(Menu.RadioGroup, { value: String(pageSize), onValueChange: (value) => onPageSizeChange(Number(value)), children: PAGE_SIZES.map((size) => (_jsx(Menu.RadioItem, { value: String(size), children: t('table.perPage', { size: formatNumber(size) }) }, size))) }) })] }), _jsxs(Menu.Item, { disabled: !bounds.hasPrevious, onClick: onFirstPage, children: [_jsx(Icon, { icon: ChevronsLeft, size: 14 }), t('table.firstPage')] }), _jsxs(Menu.Item, { disabled: !bounds.hasNext, onClick: onLastPage, children: [_jsx(Icon, { icon: ChevronsRight, size: 14 }), t('table.lastPage'), !bounds.exact && _jsx(Menu.Hint, { children: t('table.lastPageCounts') })] }), _jsx(Menu.Separator, {}), onToggleRecordView !== undefined && (_jsxs(Menu.CheckboxItem, { checked: recordViewOpen, onCheckedChange: onToggleRecordView, children: [_jsx(Icon, { icon: TableProperties, size: 14 }), t('table.recordView')] })), _jsxs(Menu.CheckboxItem, { checked: valuePanelOpen, onCheckedChange: onToggleValuePanel, children: [_jsx(Icon, { icon: PanelRight, size: 14 }), t('table.valuePanel')] }), _jsx(Menu.Separator, {}), readOnly && _jsx(Menu.Label, { children: readOnlyReason }), _jsxs(Menu.Item, { disabled: readOnly || !hasSelection, onClick: onCloneRows, children: [_jsx(Icon, { icon: CopyPlus, size: 14 }), t('table.cloneRows')] }), _jsxs(Menu.Item, { disabled: !canRevertSelection, onClick: onRevertRows, children: [_jsx(Icon, { icon: Undo2, size: 14 }), t('table.revertRows')] }), _jsxs(Menu.Item, { disabled: readOnly || !hasSelection, onClick: onDeleteRows, children: [_jsx(Icon, { icon: Trash2, size: 14 }), t('table.deleteRows')] }), transfer !== undefined && (_jsxs(_Fragment, { children: [_jsx(Menu.Separator, {}), _jsxs(Menu.SubmenuRoot, { children: [_jsxs(Menu.SubmenuTrigger, { disabled: transfer.busy, children: [_jsx(Icon, { icon: Download, size: 14 }), t('table.export.label')] }), _jsx(Menu.Popup, { children: EXPORT_FORMATS.map((format) => (_jsx(Menu.Item, { onClick: () => transfer.onExport(format), children: t('table.export.as', { format: format.toUpperCase() }) }, format))) })] }), transfer.onImport !== undefined && (_jsxs(Menu.Item, { onClick: transfer.onImport, children: [_jsx(Icon, { icon: FileInput, size: 14 }), t('table.import.menu')] }))] }))] })] })] }));
+}

package/dist/table/TableView.d.ts

@@ -0,0 +1,13 @@
+import { type Ref } from 'react';
+import { type Connection } from '../client/types.ts';
+export interface TableViewProps {
+    connection: Connection;
+    schema: string;
+    table: string;
+    defaultWhere?: string;
+    defaultOrderBy?: string;
+    onDirtyChange?(dirty: boolean): void;
+    className?: string;
+    ref?: Ref<HTMLDivElement>;
+}
+export declare function TableView({ connection, schema, table, defaultWhere, defaultOrderBy, onDirtyChange, className, ref }: TableViewProps): import("react").JSX.Element;