@adecore/database 0.0.1 → 0.16.0-beta.0

package/dist/grid/GridHeaderCell.js

@@ -0,0 +1,69 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from 'react';
+import clsx from 'clsx';
+import { ArrowDown, ArrowUp, ArrowUpDown, ChevronDown, Copy, Eye, EyeOff, Key, Pin, PinOff } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { ColumnResizeHandle, ContextMenu, copyText, Icon, IconButton, isApplePlatform, isModHeld, Menu, Tooltip, useColumnResize } from '@adecore/ui';
+import { formatNumber } from '@adecore/ui/format';
+import { isNumericKind } from './display.js';
+import { isDoubleClick, MAX_RESIZED_WIDTH, MIN_COLUMN_WIDTH } from './layout.js';
+/* The items of the menu a header opens, from its button and from a right click. */
+function HeaderMenuItems({ column, index, sortable, hasSorts, pinned, hasHidden, canHide, actions }) {
+    const { t } = useTranslation('database');
+    return (_jsxs(_Fragment, { children: [sortable && (_jsxs(_Fragment, { children: [_jsxs(Menu.Item, { onClick: () => actions.onSortDirection(index, 'asc'), children: [_jsx(Icon, { icon: ArrowUp, size: 14 }), t('grid.column.sortAscending')] }), _jsxs(Menu.Item, { onClick: () => actions.onSortDirection(index, 'desc'), children: [_jsx(Icon, { icon: ArrowDown, size: 14 }), t('grid.column.sortDescending')] }), _jsxs(Menu.Item, { disabled: !hasSorts, onClick: actions.onClearSort, children: [_jsx(Icon, { icon: ArrowUpDown, size: 14 }), t('grid.column.clearSorting')] }), _jsx(Menu.Separator, {})] })), _jsxs(Menu.Item, { disabled: !canHide, onClick: () => actions.onHide(index), children: [_jsx(Icon, { icon: EyeOff, size: 14 }), t('grid.column.hide')] }), hasHidden && (_jsxs(Menu.Item, { onClick: actions.onShowAll, children: [_jsx(Icon, { icon: Eye, size: 14 }), t('grid.column.showAll')] })), _jsxs(Menu.Item, { onClick: () => actions.onTogglePin(index), children: [_jsx(Icon, { icon: pinned ? PinOff : Pin, size: 14 }), t(pinned ? 'grid.column.unpin' : 'grid.column.pin')] }), _jsx(Menu.Separator, {}), _jsxs(Menu.Item, { onClick: () => copyText(column.name), children: [_jsx(Icon, { icon: Copy, size: 14 }), t('grid.column.copyName')] })] }));
+}
+/* The facts about a table column that a tooltip can carry: its type, whether it takes NULL, its default. */
+function ColumnFacts({ column }) {
+    const { t } = useTranslation('database');
+    const facts = [
+        column.type === '' ? null : column.type,
+        column.nullable === undefined ? null : t(column.nullable ? 'grid.column.nullable' : 'grid.column.notNull'),
+        column.defaultValue === undefined || column.defaultValue === null ? null : t('grid.column.default', { value: column.defaultValue }),
+        column.autoIncrement === true ? t('grid.column.autoIncrement') : null
+    ].filter((fact) => fact !== null);
+    return (_jsxs(_Fragment, { children: [_jsx("span", { className: "block", children: column.name }), facts.length > 0 && _jsx("span", { className: "block", children: facts.join(', ') })] }));
+}
+/* One column's head: its name, the sort it carries, a key on a primary key column, a menu and the strip that resizes it. Numbers sit against the end, like their cells. */
+export function GridHeaderCell({ column, index, position, width, sortable, selected, id, sort, multipleSorts, hasSorts, pinned, stickyLeft, lastPinned, last, hasHidden, canHide, actions }) {
+    const { t } = useTranslation('database');
+    const cell = useRef(null);
+    const lastPress = useRef(null);
+    /* Set by a press on the resize strip, since the click that ends the drag would otherwise pick the column. */
+    const resized = useRef(false);
+    const { startResize } = useColumnResize(cell, {
+        size: width,
+        min: MIN_COLUMN_WIDTH,
+        from: 'left',
+        max: () => MAX_RESIZED_WIDTH,
+        onSize: (size) => actions.onResize(index, size)
+    });
+    const pressHandle = (event) => {
+        resized.current = true;
+        if (isDoubleClick(lastPress.current, event.timeStamp)) {
+            lastPress.current = null;
+            actions.onFit(index);
+            return;
+        }
+        lastPress.current = event.timeStamp;
+        startResize(event);
+    };
+    const handleClick = (event) => {
+        const target = event.target;
+        // A click inside a menu popup reaches here through the React tree, not the DOM.
+        if (!event.currentTarget.contains(target) || target.closest('button') !== null) {
+            return;
+        }
+        if (resized.current) {
+            resized.current = false;
+            return;
+        }
+        actions.onSelect(index, { shiftKey: event.shiftKey, mod: isModHeld(event, isApplePlatform()) });
+    };
+    const menuProps = { column, index, sortable, hasSorts, pinned, hasHidden, canHide, actions };
+    const numeric = isNumericKind(column.kind);
+    return (_jsxs(ContextMenu.Root, { children: [_jsxs("div", { ref: cell, id: id, role: "columnheader", "aria-colindex": position + 2, "aria-selected": selected, "aria-sort": sortable ? (sort === null ? 'none' : sort.direction === 'asc' ? 'ascending' : 'descending') : undefined, "data-selected": selected ? '' : undefined, className: clsx('group/header flex h-full shrink-0 cursor-default text-xs font-medium select-none', pinned ? 'sticky z-10' : 'relative', selected ? 'bg-accent text-accent-text' : [pinned && 'bg-surface', sort === null ? 'text-text-muted' : 'text-text'], last ? 'border-r-0' : 'border-r', pinned && lastPinned ? 'border-border-strong' : 'border-border-soft'), style: { width, left: pinned ? stickyLeft : undefined }, onPointerDownCapture: () => {
+                    resized.current = false;
+                }, onClick: handleClick, children: [_jsxs(ContextMenu.Trigger, { className: clsx('flex h-full min-w-0 flex-1 items-center gap-1.5 overflow-hidden px-3', numeric && 'justify-end group-data-[selected]/header:pr-8'), children: [column.primaryKey === true && _jsx(Icon, { icon: Key, size: 12, className: "shrink-0 text-(--file-icon-yellow)" }), _jsx(Tooltip, { label: _jsx(ColumnFacts, { column: column }), side: "bottom", children: _jsx("span", { className: "min-w-0 truncate", children: column.name }) }), sort !== null && (_jsxs("span", { className: clsx('flex shrink-0 items-center gap-0.5', selected ? 'text-accent-text' : 'text-text-muted'), children: [_jsx(Icon, { icon: sort.direction === 'asc' ? ArrowUp : ArrowDown, size: 12 }), multipleSorts && _jsx("span", { className: "tabular-nums", children: formatNumber(sort.position) })] }))] }), _jsxs(Menu.Root, { children: [_jsx(IconButton, { render: _jsx(Menu.Trigger, {}), icon: ChevronDown, size: "xs", label: t('grid.column.menu'), tooltip: false, className: clsx('absolute top-1/2 right-2 -translate-y-1/2', selected
+                                    ? 'bg-transparent text-accent-text'
+                                    : 'bg-surface opacity-0 group-hover/header:opacity-100 focus-visible:opacity-100 data-[popup-open]:opacity-100') }), _jsx(Menu.Popup, { children: _jsx(HeaderMenuItems, { ...menuProps }) })] }), _jsx(ColumnResizeHandle, { from: "left", onPointerDown: pressHandle, className: "hover:bg-border-strong" })] }), _jsx(ContextMenu.Popup, { children: _jsx(HeaderMenuItems, { ...menuProps }) })] }));
+}

package/dist/grid/RecordView.d.ts

@@ -0,0 +1,20 @@
+import { type Ref } from 'react';
+import type { EditValue, Value } from '../protocol/index.ts';
+import type { FocusedCell, GridColumn, GridRow } from './types.ts';
+export interface RecordViewProps {
+    columns: readonly GridColumn[];
+    rows: readonly GridRow[];
+    index: number;
+    onIndexChange(index: number): void;
+    editable?: boolean;
+    onCommit?(rowKey: string, column: number, value: EditValue): void;
+    loadValue?(rowKey: string, column: number): Promise<Value | undefined>;
+    onFocusedCellChange?(cell: FocusedCell | null): void;
+    onFollow?(cell: FocusedCell): void;
+    canFollow?(cell: FocusedCell): boolean;
+    label: string;
+    empty?: string;
+    className?: string;
+    ref?: Ref<HTMLDivElement>;
+}
+export declare function RecordView({ columns, rows, index, onIndexChange, editable, onCommit, loadValue, onFocusedCellChange, onFollow, canFollow, label, empty, className, ref }: RecordViewProps): import("react").JSX.Element;

package/dist/grid/RecordView.js

@@ -0,0 +1,126 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useRef, useState } from 'react';
+import clsx from 'clsx';
+import { ArrowUpRight, Ban, ChevronDown, ChevronUp, Copy, RotateCcw } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { ContextMenu, copyText, EDIT_SHORTCUTS, Icon, IconButton, Input, isApplePlatform, isModHeld, Kbd, shortcut, Spinner } from '@adecore/ui';
+import { formatNumber } from '@adecore/ui/format';
+import { useNumberNotation } from '../client-context.js';
+import { cellView, copyTextOf, isNumericKind, isPreview, numeralText } from './display.js';
+import { draftOf, parseDraft } from './edit-value.js';
+import { parseEnumType } from './enum-type.js';
+import { EnumPicker } from './EnumPicker.js';
+const PREVIOUS_ROW = shortcut('Mod+ArrowUp');
+const NEXT_ROW = shortcut('Mod+ArrowDown');
+const textOf = (cell, kind, notation, readOnly) => {
+    if (isPreview(cell)) {
+        return cellView(cell, kind, notation).text;
+    }
+    if (cell !== null && typeof cell === 'object' && cell.kind === 'default') {
+        return '';
+    }
+    // A field that can be edited holds the server's text, which is what an edit starts from.
+    if (readOnly && isNumericKind(kind) && (typeof cell === 'number' || typeof cell === 'string')) {
+        return numeralText(cell, notation);
+    }
+    return draftOf(cell);
+};
+/*
+ * One row as a list of fields, the column's name and type beside an editor for its value. Edits go
+ * to the same `onCommit` the grid uses, so they pile up as pending changes there. Up and Down move
+ * between the fields; with Mod they move between the rows.
+ */
+export function RecordView({ columns, rows, index, onIndexChange, editable = false, onCommit, loadValue, onFocusedCellChange, onFollow, canFollow, label, empty, className, ref }) {
+    const { t } = useTranslation('database');
+    const notation = useNumberNotation();
+    const fields = useRef([]);
+    const [editing, setEditing] = useState(null);
+    const row = rows[index];
+    const enumTypes = useMemo(() => columns.map((column) => parseEnumType(column.type)), [columns]);
+    const apple = isApplePlatform();
+    const canEdit = (column) => editable && row !== undefined && row.locked !== true && row.state !== 'deleted' && columns[column]?.readOnly !== true;
+    const commitEdit = () => {
+        if (editing !== null && !editing.loading && row !== undefined && editing.draft !== editing.initial) {
+            onCommit?.(row.key, editing.column, parseDraft(editing.draft, columns[editing.column].kind));
+        }
+        setEditing(null);
+    };
+    const commitValue = (column, value) => {
+        if (row !== undefined && canEdit(column)) {
+            onCommit?.(row.key, column, value);
+        }
+    };
+    const beginEdit = async (column) => {
+        const cell = row?.cells[column] ?? null;
+        if (row === undefined || !canEdit(column) || !isPreview(cell) || loadValue === undefined) {
+            return;
+        }
+        setEditing({ column, draft: '', initial: '', loading: true });
+        const value = await loadValue(row.key, column);
+        setEditing((now) => {
+            if (now === null || !now.loading || now.column !== column) {
+                return now;
+            }
+            if (value === undefined) {
+                return null;
+            }
+            const text = draftOf(value);
+            return { column, draft: text, initial: text, loading: false };
+        });
+    };
+    const changeDraft = (column, draft) => {
+        setEditing((now) => now !== null && now.column === column
+            ? { ...now, draft }
+            : { column, draft, initial: textOf(row?.cells[column] ?? null, columns[column].kind, 'database', false), loading: false });
+    };
+    const focusField = (column) => {
+        fields.current[column]?.focus();
+    };
+    const handleKeyDown = (event, column) => {
+        if (event.nativeEvent.isComposing) {
+            return;
+        }
+        const mod = isModHeld(event, apple);
+        if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
+            event.preventDefault();
+            const direction = event.key === 'ArrowUp' ? -1 : 1;
+            if (mod) {
+                commitEdit();
+                onIndexChange(Math.max(0, Math.min(index + direction, rows.length - 1)));
+            }
+            else {
+                focusField(Math.max(0, Math.min(column + direction, columns.length - 1)));
+            }
+        }
+        else if (event.key === 'Enter') {
+            event.preventDefault();
+            commitEdit();
+        }
+        else if (event.key === 'Escape' && editing !== null) {
+            event.preventDefault();
+            event.stopPropagation();
+            setEditing(null);
+        }
+    };
+    const cellOf = (column) => (row === undefined ? null : { rowKey: row.key, column });
+    return (_jsxs("div", { ref: ref, className: clsx('flex min-h-0 flex-1 flex-col bg-surface', className), children: [_jsxs("div", { className: "flex h-10 shrink-0 items-center gap-2 border-b border-border px-3", children: [_jsx(IconButton, { icon: ChevronUp, size: "sm", label: t('table.record.previous'), kbd: PREVIOUS_ROW, disabled: index <= 0, onClick: () => onIndexChange(index - 1) }), _jsx(IconButton, { icon: ChevronDown, size: "sm", label: t('table.record.next'), kbd: NEXT_ROW, disabled: index >= rows.length - 1, onClick: () => onIndexChange(index + 1) }), row !== undefined && (_jsxs(_Fragment, { children: [_jsx("span", { className: "text-sm font-medium text-text tabular-nums", children: row.number === null ? t('table.record.newRow') : t('table.record.row', { number: formatNumber(row.number) }) }), _jsx("span", { className: "text-xs text-text-faint tabular-nums", children: t('table.record.position', { index: formatNumber(index + 1), count: formatNumber(rows.length) }) })] }))] }), row === undefined ? (_jsx("p", { className: "px-4 py-6 text-xs text-text-muted", children: empty })) : (_jsx("div", { role: "group", "aria-label": label, className: "min-h-0 flex-1 overflow-auto py-1", children: columns.map((column, position) => {
+                    const cell = row.cells[position] ?? null;
+                    const enumType = enumTypes[position] ?? null;
+                    const active = editing !== null && editing.column === position;
+                    const editableField = canEdit(position);
+                    const preview = isPreview(cell);
+                    const cellKey = cellOf(position);
+                    const followable = cellKey !== null && onFollow !== undefined && (canFollow?.(cellKey) ?? true);
+                    const nullable = column.nullable !== false;
+                    const placeholder = cell === null ? 'NULL' : typeof cell === 'object' && cell.kind === 'default' ? 'DEFAULT' : undefined;
+                    return (_jsxs(ContextMenu.Root, { children: [_jsxs(ContextMenu.Trigger, { className: clsx('flex items-center gap-3 px-4 py-1', row.edited?.has(position) && 'bg-accent/10'), onFocusCapture: () => onFocusedCellChange?.(cellKey), children: [_jsxs("span", { className: "flex w-56 shrink-0 items-baseline gap-2 truncate", children: [_jsx("span", { className: "truncate font-mono text-code text-text", children: column.name }), column.type !== '' && _jsx("span", { className: "truncate text-xs text-text-faint", children: column.type })] }), _jsxs("span", { className: "relative flex min-w-0 flex-1 items-center gap-1", children: [enumType !== null ? (_jsx(EnumPicker, { look: "field", type: enumType, value: typeof cell === 'string' ? cell : null, nullable: nullable, label: column.name, disabled: !editableField, ref: (node) => {
+                                                    fields.current[position] = node;
+                                                }, onDone: (result) => {
+                                                    if (result !== undefined && result.value !== (typeof cell === 'string' ? cell : null)) {
+                                                        commitValue(position, result.value);
+                                                    }
+                                                } })) : (_jsx(Input, { size: "sm", mono: true, spellCheck: false, "aria-label": column.name, ref: (node) => {
+                                                    fields.current[position] = node;
+                                                }, value: active ? editing.draft : textOf(cell, column.kind, notation, !editableField), placeholder: placeholder, readOnly: !editableField || (preview && (!active || editing.loading)), className: clsx('min-w-0 flex-1', row.state === 'deleted' && 'line-through'), onFocus: () => void beginEdit(position), onBlur: commitEdit, onChange: (event) => changeDraft(position, event.target.value), onKeyDown: (event) => handleKeyDown(event, position) })), active && editing.loading && _jsx(Spinner, { size: 12, label: t('grid.loadingValue'), className: "absolute right-2" }), followable && (_jsx(IconButton, { icon: ArrowUpRight, size: "xs", label: t('grid.followReference'), onClick: () => cellKey !== null && onFollow?.(cellKey) }))] })] }), _jsxs(ContextMenu.Popup, { children: [_jsxs(ContextMenu.Item, { onClick: () => copyText(copyTextOf(cell)), children: [_jsx(Icon, { icon: Copy, size: 14 }), t('grid.copyValue'), _jsx(Kbd, { shortcut: EDIT_SHORTCUTS.copy })] }), editable && (_jsxs(_Fragment, { children: [_jsx(ContextMenu.Separator, {}), _jsxs(ContextMenu.Item, { disabled: !editableField || !nullable, onClick: () => commitValue(position, null), children: [_jsx(Icon, { icon: Ban, size: 14 }), t('grid.setNull')] }), _jsxs(ContextMenu.Item, { disabled: !editableField, onClick: () => commitValue(position, { kind: 'default' }), children: [_jsx(Icon, { icon: RotateCcw, size: 14 }), t('grid.setDefault')] })] }))] })] }, position));
+                }) }))] }));
+}

package/dist/grid/ValueDock.d.ts

@@ -0,0 +1,11 @@
+import { type ReactNode, type Ref } from 'react';
+export declare const VALUE_PANEL_WIDTH = 320;
+export declare const VALUE_PANEL_MIN_WIDTH = 240;
+export interface ValueDockProps {
+    open: boolean;
+    panel: ReactNode;
+    children: ReactNode;
+    className?: string;
+    ref?: Ref<HTMLDivElement>;
+}
+export declare function ValueDock({ open, panel, children, className, ref }: ValueDockProps): import("react").JSX.Element;

package/dist/grid/ValueDock.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState } from 'react';
+import clsx from 'clsx';
+import { ColumnResizeHandle, useColumnResize } from '@adecore/ui';
+export const VALUE_PANEL_WIDTH = 320;
+export const VALUE_PANEL_MIN_WIDTH = 240;
+/* A grid with a panel along its right edge that a person can widen by its left edge. */
+export function ValueDock({ open, panel, children, className, ref }) {
+    const root = useRef(null);
+    const dock = useRef(null);
+    const [width, setWidth] = useState(VALUE_PANEL_WIDTH);
+    const { startResize } = useColumnResize(dock, {
+        size: width,
+        min: VALUE_PANEL_MIN_WIDTH,
+        from: 'right',
+        max: () => (root.current?.clientWidth ?? 960) - VALUE_PANEL_MIN_WIDTH,
+        onSize: setWidth
+    });
+    return (_jsxs("div", { ref: (node) => {
+            root.current = node;
+            if (typeof ref === 'function') {
+                ref(node);
+            }
+            else if (ref) {
+                ref.current = node;
+            }
+        }, className: clsx('flex min-h-0 min-w-0 flex-1', className), children: [_jsx("div", { className: "flex min-h-0 min-w-0 flex-1 flex-col", children: children }), open && (_jsxs("div", { ref: dock, className: "relative flex min-h-0 shrink-0 border-l border-border", style: { width }, children: [_jsx(ColumnResizeHandle, { from: "right", onPointerDown: startResize, className: "hover:bg-border-strong" }), panel] }))] }));
+}

package/dist/grid/aggregates.d.ts

@@ -0,0 +1,22 @@
+import type { ValueKind } from '../protocol/index.ts';
+import type { Shown } from './display.ts';
+export interface RangeBlock {
+    readonly top: number;
+    readonly bottom: number;
+    readonly columns: readonly number[];
+}
+export interface NumericAggregates {
+    readonly count: number;
+    readonly sum: number;
+    readonly average: number;
+    readonly minimum: number;
+    readonly maximum: number;
+    readonly minimumText: string;
+    readonly maximumText: string;
+}
+export interface Aggregates {
+    readonly count: number;
+    readonly numeric: NumericAggregates | null;
+}
+export declare const blockSize: (block: RangeBlock) => number;
+export declare const aggregateBlock: (rows: readonly (readonly Shown[])[], kinds: readonly ValueKind[], block: RangeBlock) => Aggregates;

package/dist/grid/aggregates.js

@@ -0,0 +1,62 @@
+const NUMERIC_KINDS = new Set(['integer', 'decimal', 'float']);
+const NUMERIC_TEXT = /^[+-]?(?:\d+\.?\d*|\.\d+)(?:[eE][+-]?\d+)?$/;
+const numberOf = (cell) => {
+    if (typeof cell === 'number') {
+        return Number.isFinite(cell) ? { value: cell, text: String(cell) } : null;
+    }
+    if (typeof cell === 'string') {
+        const text = cell.trim();
+        return NUMERIC_TEXT.test(text) ? { value: Number(text), text } : null;
+    }
+    return null;
+};
+/* The size of a block in cells, which a footer shows aggregates for once it passes one. */
+export const blockSize = (block) => Math.max(0, block.bottom - block.top + 1) * block.columns.length;
+/*
+ * The count of a block, and for the cells in numeric columns their sum, average, minimum and maximum.
+ * Only the rows the grid has are counted, which is the loaded page.
+ */
+export const aggregateBlock = (rows, kinds, block) => {
+    let count = 0;
+    let numbers = 0;
+    let sum = 0;
+    let minimum = null;
+    let maximum = null;
+    for (let row = block.top; row <= block.bottom; row++) {
+        const cells = rows[row];
+        if (cells === undefined) {
+            continue;
+        }
+        for (const column of block.columns) {
+            count++;
+            const kind = kinds[column];
+            const found = kind !== undefined && NUMERIC_KINDS.has(kind) ? numberOf(cells[column] ?? null) : null;
+            if (found === null) {
+                continue;
+            }
+            numbers++;
+            sum += found.value;
+            if (minimum === null || found.value < minimum.value) {
+                minimum = found;
+            }
+            if (maximum === null || found.value > maximum.value) {
+                maximum = found;
+            }
+        }
+    }
+    if (numbers === 0 || minimum === null || maximum === null) {
+        return { count, numeric: null };
+    }
+    return {
+        count,
+        numeric: {
+            count: numbers,
+            sum,
+            average: sum / numbers,
+            minimum: minimum.value,
+            maximum: maximum.value,
+            minimumText: minimum.text,
+            maximumText: maximum.text
+        }
+    };
+};

package/dist/grid/cell-range.d.ts

@@ -0,0 +1,14 @@
+import type { CellPosition } from './navigation.ts';
+export interface CellRect {
+    readonly top: number;
+    readonly bottom: number;
+    readonly left: number;
+    readonly right: number;
+}
+export declare const rectBetween: (from: CellPosition, to: CellPosition) => CellRect;
+export declare const rectContains: (rect: CellRect | null, row: number, column: number) => boolean;
+export declare const fullRect: (rows: number, columns: number) => CellRect | null;
+export declare const rectSize: (rect: CellRect) => {
+    rows: number;
+    columns: number;
+};

package/dist/grid/cell-range.js

@@ -0,0 +1,11 @@
+/* The block between two cells, whichever corner each one is. */
+export const rectBetween = (from, to) => ({
+    top: Math.min(from.row, to.row),
+    bottom: Math.max(from.row, to.row),
+    left: Math.min(from.column, to.column),
+    right: Math.max(from.column, to.column)
+});
+export const rectContains = (rect, row, column) => rect !== null && row >= rect.top && row <= rect.bottom && column >= rect.left && column <= rect.right;
+/* Every cell of a grid, or `null` when it has none. */
+export const fullRect = (rows, columns) => rows === 0 || columns === 0 ? null : { top: 0, bottom: rows - 1, left: 0, right: columns - 1 };
+export const rectSize = (rect) => ({ rows: rect.bottom - rect.top + 1, columns: rect.right - rect.left + 1 });

package/dist/grid/column-layout.d.ts

@@ -0,0 +1,18 @@
+import type { ColumnView } from './column-view.ts';
+export interface GridLayout {
+    readonly widths: Readonly<Record<string, number>>;
+    readonly hidden: readonly string[];
+    readonly pinned: readonly string[];
+}
+export declare const NO_GRID_LAYOUT: GridLayout;
+export interface ColumnState {
+    readonly resized: Readonly<Record<number, number>>;
+    readonly view: ColumnView;
+}
+export declare const restoreLayout: (columns: readonly {
+    readonly name: string;
+}[], layout: GridLayout | undefined) => ColumnState;
+export declare const captureLayout: (columns: readonly {
+    readonly name: string;
+}[], state: ColumnState) => GridLayout;
+export declare const sameLayout: (a: GridLayout, b: GridLayout) => boolean;

package/dist/grid/column-layout.js

@@ -0,0 +1,49 @@
+import { MAX_RESIZED_WIDTH, MIN_COLUMN_WIDTH } from './layout.js';
+export const NO_GRID_LAYOUT = { widths: {}, hidden: [], pinned: [] };
+/* The state of a grid for columns it has, from a layout. Names it does not have are skipped; a layout that would hide every column hides none. */
+export const restoreLayout = (columns, layout) => {
+    const resized = {};
+    const hidden = new Set();
+    const pinned = [];
+    if (layout !== undefined) {
+        columns.forEach((column, index) => {
+            const width = layout.widths[column.name];
+            if (width !== undefined) {
+                resized[index] = Math.max(MIN_COLUMN_WIDTH, Math.min(Math.round(width), MAX_RESIZED_WIDTH));
+            }
+            if (layout.hidden.includes(column.name)) {
+                hidden.add(index);
+            }
+        });
+        for (const name of layout.pinned) {
+            const index = columns.findIndex((column) => column.name === name);
+            if (index >= 0 && !hidden.has(index) && !pinned.includes(index)) {
+                pinned.push(index);
+            }
+        }
+    }
+    return { resized, view: { hidden: hidden.size >= columns.length ? new Set() : hidden, pinned } };
+};
+/* The layout of a grid's state, with the columns by name. */
+export const captureLayout = (columns, state) => {
+    const widths = {};
+    for (const [index, width] of Object.entries(state.resized)) {
+        const column = columns[Number(index)];
+        if (column !== undefined) {
+            widths[column.name] = width;
+        }
+    }
+    return {
+        widths,
+        hidden: [...state.view.hidden].sort((a, b) => a - b).flatMap((index) => (columns[index] === undefined ? [] : [columns[index].name])),
+        pinned: state.view.pinned.flatMap((index) => (columns[index] === undefined ? [] : [columns[index].name]))
+    };
+};
+const sameList = (a, b) => a.length === b.length && a.every((item, index) => item === b[index]);
+export const sameLayout = (a, b) => {
+    const names = Object.keys(a.widths);
+    return (names.length === Object.keys(b.widths).length &&
+        names.every((name) => a.widths[name] === b.widths[name]) &&
+        sameList(a.hidden, b.hidden) &&
+        sameList(a.pinned, b.pinned));
+};

package/dist/grid/column-selection.d.ts

@@ -0,0 +1,11 @@
+export interface ColumnSelection {
+    readonly columns: ReadonlySet<number>;
+    readonly anchor: number | null;
+}
+export interface ColumnClick {
+    readonly shiftKey: boolean;
+    readonly mod: boolean;
+}
+export declare const NO_COLUMN_SELECTION: ColumnSelection;
+export declare const selectColumn: (current: ColumnSelection, order: readonly number[], index: number, click: ColumnClick) => ColumnSelection;
+export declare const shownSelection: (current: ColumnSelection, order: readonly number[]) => number[];

package/dist/grid/column-selection.js

@@ -0,0 +1,28 @@
+export const NO_COLUMN_SELECTION = { columns: new Set(), anchor: null };
+/*
+ * The selection after a click on the header of `index`. A plain click picks that column alone, Mod
+ * toggles it, and Shift picks every column drawn between the anchor and it (added to the others with Mod).
+ * `order` is the columns as drawn, so a range follows what the person sees.
+ */
+export const selectColumn = (current, order, index, click) => {
+    const at = order.indexOf(index);
+    if (at < 0) {
+        return current;
+    }
+    const anchorAt = current.anchor === null ? -1 : order.indexOf(current.anchor);
+    if (click.shiftKey && anchorAt >= 0) {
+        const range = order.slice(Math.min(anchorAt, at), Math.max(anchorAt, at) + 1);
+        return { columns: new Set(click.mod ? [...current.columns, ...range] : range), anchor: current.anchor };
+    }
+    if (click.mod) {
+        const next = new Set(current.columns);
+        if (next.delete(index)) {
+            return { columns: next, anchor: next.size === 0 ? null : current.anchor };
+        }
+        next.add(index);
+        return { columns: next, anchor: index };
+    }
+    return { columns: new Set([index]), anchor: index };
+};
+/* The picked columns that are drawn, in the order they are drawn. */
+export const shownSelection = (current, order) => order.filter((index) => current.columns.has(index));

package/dist/grid/column-view.d.ts

@@ -0,0 +1,10 @@
+export interface ColumnView {
+    readonly hidden: ReadonlySet<number>;
+    readonly pinned: readonly number[];
+}
+export declare const NO_COLUMN_VIEW: ColumnView;
+export declare const displayOrder: (count: number, view: ColumnView) => number[];
+export declare const hideColumn: (view: ColumnView, index: number) => ColumnView;
+export declare const showAllColumns: (view: ColumnView) => ColumnView;
+export declare const togglePin: (view: ColumnView, index: number) => ColumnView;
+export declare const pinnedCount: (count: number, view: ColumnView) => number;

package/dist/grid/column-view.js

@@ -0,0 +1,23 @@
+export const NO_COLUMN_VIEW = { hidden: new Set(), pinned: [] };
+/* The columns to draw as indexes: the pinned ones first in pin order, then the rest as they come, hidden ones left out. */
+export const displayOrder = (count, view) => {
+    const pinned = view.pinned.filter((index) => index < count && !view.hidden.has(index));
+    const rest = [];
+    for (let i = 0; i < count; i++) {
+        if (!view.hidden.has(i) && !pinned.includes(i)) {
+            rest.push(i);
+        }
+    }
+    return [...pinned, ...rest];
+};
+export const hideColumn = (view, index) => ({
+    hidden: new Set([...view.hidden, index]),
+    pinned: view.pinned.filter((pinned) => pinned !== index)
+});
+export const showAllColumns = (view) => ({ ...view, hidden: new Set() });
+export const togglePin = (view, index) => ({
+    ...view,
+    pinned: view.pinned.includes(index) ? view.pinned.filter((pinned) => pinned !== index) : [...view.pinned, index]
+});
+/* How many of the first columns of `displayOrder` are pinned. */
+export const pinnedCount = (count, view) => view.pinned.filter((index) => index < count && !view.hidden.has(index)).length;

package/dist/grid/copy-formats.d.ts

@@ -0,0 +1,15 @@
+import type { ValueKind } from '../protocol/index.ts';
+import { type SqlTarget } from '../sql.ts';
+import { type Shown } from './display.ts';
+export type CopyFormat = 'tsv' | 'csv' | 'json' | 'sql';
+export declare const COPY_FORMATS: readonly CopyFormat[];
+export interface CopyColumn {
+    readonly name: string;
+    readonly kind: ValueKind;
+}
+export interface CopyInput {
+    readonly columns: readonly CopyColumn[];
+    readonly rows: readonly (readonly Shown[])[];
+    readonly target?: SqlTarget;
+}
+export declare const formatCopy: (format: CopyFormat, input: CopyInput) => string;

package/dist/grid/copy-formats.js

@@ -0,0 +1,80 @@
+import { qualifiedName, quoteIdentifier, sqlLiteral } from '../sql.js';
+import { copyTextOf } from './display.js';
+export const COPY_FORMATS = ['tsv', 'csv', 'json', 'sql'];
+const NUMERIC_KINDS = new Set(['integer', 'decimal', 'float']);
+const JSON_NUMBER = /^-?(?:0|[1-9]\d*)(?:\.\d+)?(?:[eE][+-]?\d+)?$/;
+const quoteField = (text) => `"${text.replaceAll('"', '""')}"`;
+/* Tabs and line breaks would split a cell on paste, so a cell that holds one is quoted the way a spreadsheet does. */
+const tsvField = (text) => (/[\t\r\n"]/.test(text) ? quoteField(text) : text);
+const csvField = (text) => (/[",\r\n]/.test(text) ? quoteField(text) : text);
+const csvText = (cell) => (cell === null ? '' : copyTextOf(cell));
+const jsonOf = (cell, kind) => {
+    if (cell === null) {
+        return 'null';
+    }
+    if (typeof cell === 'boolean') {
+        return String(cell);
+    }
+    if (typeof cell === 'number') {
+        if (kind === 'boolean' && (cell === 0 || cell === 1)) {
+            return String(cell === 1);
+        }
+        return Number.isFinite(cell) ? String(cell) : 'null';
+    }
+    if (typeof cell === 'string') {
+        if (NUMERIC_KINDS.has(kind) && JSON_NUMBER.test(cell)) {
+            return cell;
+        }
+        if (kind === 'json') {
+            try {
+                return JSON.stringify(JSON.parse(cell));
+            }
+            catch {
+                return JSON.stringify(cell);
+            }
+        }
+        return JSON.stringify(cell);
+    }
+    return cell.kind === 'default' ? 'null' : JSON.stringify(copyTextOf(cell));
+};
+const toTsv = ({ rows }) => rows.map((row) => row.map((cell) => tsvField(copyTextOf(cell))).join('\t')).join('\n');
+const toCsv = ({ columns, rows }) => [columns.map((column) => csvField(column.name)), ...rows.map((row) => row.map((cell) => csvField(csvText(cell))))]
+    .map((line) => line.join(','))
+    .join('\r\n');
+const toJson = ({ columns, rows }) => {
+    if (rows.length === 0) {
+        return '[]';
+    }
+    const objects = rows.map((row) => {
+        if (columns.length === 0) {
+            return '  {}';
+        }
+        const fields = columns.map((column, index) => `    ${JSON.stringify(column.name)}: ${jsonOf(row[index] ?? null, column.kind)}`);
+        return `  {\n${fields.join(',\n')}\n  }`;
+    });
+    return `[\n${objects.join(',\n')}\n]`;
+};
+const toSql = ({ columns, rows, target }) => {
+    if (target === undefined) {
+        throw new Error('Copying as SQL needs the table the rows belong to.');
+    }
+    const head = `INSERT INTO ${qualifiedName(target)} (${columns.map((column) => quoteIdentifier(target.engine, column.name)).join(', ')}) VALUES`;
+    return rows.map((row) => `${head} (${columns.map((column, index) => sqlLiteral(target.engine, row[index] ?? null, column.kind)).join(', ')});`).join('\n');
+};
+/*
+ * A block of cells as text. TSV is what a spreadsheet pastes and has no header; CSV follows RFC 4180
+ * with a header and leaves NULL empty; JSON is an array of objects that keeps numbers, booleans and
+ * NULL as what they are; SQL is one INSERT per row.
+ */
+export const formatCopy = (format, input) => {
+    switch (format) {
+        case 'tsv':
+            return toTsv(input);
+        case 'csv':
+            return toCsv(input);
+        case 'json':
+            return toJson(input);
+        case 'sql':
+            return toSql(input);
+    }
+};

package/dist/grid/display.d.ts

@@ -0,0 +1,20 @@
+import type { Cell, EditValue, ValueKind } from '../protocol/index.ts';
+export type Shown = Cell | {
+    readonly kind: 'default';
+};
+export type CellTone = 'value' | 'null' | 'default';
+export interface CellView {
+    readonly text: string;
+    readonly tone: CellTone;
+    readonly align: 'start' | 'end';
+    readonly suffix?: string;
+}
+export type NumberNotation = 'database' | 'region';
+export declare const DISPLAY_LIMIT = 200;
+export declare const BINARY_PREVIEW_BYTES = 8;
+export declare const isNumericKind: (kind: ValueKind) => boolean;
+export declare const isPreview: (cell: Shown) => boolean;
+export declare const numeralText: (numeral: string | number, notation: NumberNotation) => string;
+export declare const cellView: (cell: Shown, kind: ValueKind, notation?: NumberNotation) => CellView;
+export declare const copyTextOf: (cell: Shown) => string;
+export declare const shownOfEdit: (value: EditValue) => Shown;