@adecore/database 0.17.0-beta.2 → 0.18.0

package/dist/grid/GridRowView.js

@@ -0,0 +1,51 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo } from 'react';
+import clsx from 'clsx';
+import { Spinner } from '@adecore/ui';
+import { formatNumber } from '@adecore/ui/format';
+import { CODE_TEXT } from '../code-text.js';
+import { CellEditor } from './CellEditor.js';
+import { cellIdOf } from './cell-id.js';
+import { cellView } from './display.js';
+import { EnumPicker } from './EnumPicker.js';
+import { ROW_HEIGHT } from './layout.js';
+/*
+ * The gutter and the pinned columns stick as one block, so the edge of one can never drift from the next, at any
+ * zoom. Each part paints its background under its own line as well: the line is an alpha, and what scrolls beneath
+ * the block would otherwise show through it.
+ */
+export const PINNED_GROUP = 'sticky left-0 z-10 flex shrink-0';
+const TONE = {
+    value: '',
+    null: 'text-text-faint',
+    default: 'text-text-faint italic'
+};
+const ROW_STATE = {
+    inserted: 'bg-positive/10',
+    deleted: 'bg-status-error/10 text-text-faint'
+};
+/* One row of the grid. Memoized on props that only change for this row, so a scroll draws the rows that came into view and none other. */
+export const GridRowView = memo(function GridRowView({ row, index, selected, focusedColumn, rangeStart, rangeEnd, editing, look, actions }) {
+    const { columns, order, widths, pinnedShown, gutter, notation, enumTypes, picked } = look;
+    const tint = row.state === undefined ? (selected ? 'bg-accent-soft/40' : '') : ROW_STATE[row.state];
+    const cells = order.map((columnIndex, position) => {
+        const column = columns[columnIndex];
+        const cell = row.cells[columnIndex] ?? null;
+        const view = cellView(cell, column.kind, notation);
+        const cellPosition = { row: index, column: columnIndex };
+        const isFocused = focusedColumn === columnIndex;
+        const ranged = picked.has(columnIndex) || (position >= rangeStart && position <= rangeEnd && rangeStart >= 0);
+        const edited = row.edited?.has(columnIndex) === true;
+        const isEditing = editing !== null && editing.column === columnIndex;
+        const pinned = position < pinnedShown;
+        const enumType = enumTypes[columnIndex] ?? null;
+        return (_jsxs("div", { id: cellIdOf(look.gridId, index, columnIndex), role: "gridcell", "aria-colindex": position + 2, "aria-selected": ranged, "data-focused": isFocused ? '' : undefined, "data-ranged": ranged ? '' : undefined, className: clsx(CODE_TEXT, 'flex h-full shrink-0 items-center overflow-hidden px-3 whitespace-nowrap outline-0 select-none data-[focused]:outline-1 data-[focused]:-outline-offset-1 data-[focused]:outline-border-strong group-focus-within/grid:data-[focused]:outline-accent', position === order.length - 1 ? 'border-r-0' : 'border-r', view.align === 'end' ? 'justify-end tabular-nums' : 'justify-start', pinned
+                ? [
+                    'relative bg-clip-border',
+                    position === pinnedShown - 1 ? 'border-border-strong' : 'border-border-soft',
+                    ranged ? 'bg-accent-soft' : ['bg-surface', tint === '' && 'group-hover/row:bg-surface-hover']
+                ]
+                : ['relative border-border-soft', ranged ? 'bg-accent-soft' : edited && 'bg-accent/10']), style: { width: widths[position] }, onPointerDown: (event) => actions.pressCell(event, cellPosition, isEditing), onPointerEnter: () => actions.dragTo(cellPosition), onDoubleClick: () => actions.beginEdit(cellPosition), onContextMenu: () => actions.openCellMenu(cellPosition), children: [pinned && !ranged && _jsx("span", { "aria-hidden": true, className: clsx('pointer-events-none absolute inset-0', tint, edited && 'bg-accent/10') }), isEditing && editing.loading && _jsx(Spinner, { size: 12, label: look.loadingLabel }), isEditing && !editing.loading && enumType !== null && (_jsx(EnumPicker, { autoOpen: true, type: enumType, value: typeof cell === 'string' ? cell : null, nullable: column.nullable !== false, label: column.name, onDone: actions.finishPick })), isEditing && !editing.loading && enumType === null && (_jsx(CellEditor, { value: editing.draft, label: column.name, onValueChange: actions.changeDraft, onCommit: (move) => actions.finishEdit(true, move), onCancel: () => actions.finishEdit(false) })), !isEditing && (_jsxs(_Fragment, { children: [_jsx("span", { className: clsx('min-w-0 truncate', TONE[view.tone], row.state === 'deleted' && 'line-through'), children: view.text }), view.suffix !== undefined && _jsx("span", { className: "ml-2 shrink-0 text-text-faint", children: view.suffix })] }))] }, columnIndex));
+    });
+    return (_jsxs("div", { role: "row", "aria-rowindex": index + 2, "aria-selected": selected, className: clsx('group/row absolute inset-x-0 flex border-b border-border-soft', tint, tint === '' && 'hover:bg-surface-hover'), style: { top: index * ROW_HEIGHT, height: ROW_HEIGHT }, children: [_jsxs("div", { className: PINNED_GROUP, children: [_jsx("div", { role: "rowheader", "data-selected": selected ? '' : undefined, className: clsx('flex shrink-0 cursor-default items-center justify-end border-r border-border bg-surface bg-clip-border pr-2 pl-1 font-mono text-xs text-text-faint tabular-nums select-none data-[selected]:bg-accent-soft data-[selected]:text-text', row.state === 'inserted' && 'text-positive'), style: { width: gutter }, onClick: (event) => actions.pressRowNumber(index, event), onContextMenu: () => actions.openRowMenu(index), children: row.number === null ? '+' : formatNumber(row.number) }), cells.slice(0, pinnedShown)] }), cells.slice(pinnedShown)] }));
+});

package/dist/grid/RecordView.d.ts

@@ -6,15 +6,17 @@ export interface RecordViewProps {
     rows: readonly GridRow[];
     index: number;
     onIndexChange(index: number): void;
+    focusedColumn: number | null;
     editable?: boolean;
     onCommit?(rowKey: string, column: number, value: EditValue): void;
     loadValue?(rowKey: string, column: number): Promise<Value | undefined>;
-    onFocusedCellChange?(cell: FocusedCell | null): void;
+    onFocusedCellChange?(cell: FocusedCell): void;
     onFollow?(cell: FocusedCell): void;
     canFollow?(cell: FocusedCell): boolean;
+    onClose(): void;
     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;
+export declare function RecordView({ columns, rows, index, onIndexChange, focusedColumn, editable, onCommit, loadValue, onFocusedCellChange, onFollow, canFollow, onClose, label, empty, className, ref }: RecordViewProps): import("react").JSX.Element;

package/dist/grid/RecordView.js

@@ -1,15 +1,18 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo, useRef, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import clsx from 'clsx';
-import { ArrowUpRight, Ban, ChevronDown, ChevronUp, Copy, RotateCcw } from 'lucide-react';
+import { ArrowUpRight, Ban, ChevronDown, ChevronUp, Copy, Maximize2, Minimize2, RotateCcw, X } 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 { ButtonGroup, 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 { CODE_TEXT } from '../code-text.js';
+import { ValueEditor } from '../value/ValueEditor.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';
+import { wholeValueOf } from './focused-value.js';
 const PREVIOUS_ROW = shortcut('Mod+ArrowUp');
 const NEXT_ROW = shortcut('Mod+ArrowDown');
 const textOf = (cell, kind, notation, readOnly) => {
@@ -25,19 +28,28 @@ const textOf = (cell, kind, notation, readOnly) => {
     }
     return draftOf(cell);
 };
+/* A value that a field is too small for: a long text, JSON or binary, which opens up in place to the whole of it. */
+const opensUp = (cell, kind) => kind === 'json' || kind === 'binary' || isPreview(cell) || (typeof cell === 'string' && cell.includes('\n'));
 /*
- * 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.
+ * The row of the grid's focused cell as a list of fields, beside the grid. It follows the grid's focus, and
+ * edits go to the same `onCommit` the grid uses, so they pile up as pending changes there. Up and Down move
+ * between the fields, Tab too; with Mod, Up and Down move between the rows.
  */
-export function RecordView({ columns, rows, index, onIndexChange, editable = false, onCommit, loadValue, onFocusedCellChange, onFollow, canFollow, label, empty, className, ref }) {
+export function RecordView({ columns, rows, index, onIndexChange, focusedColumn, editable = false, onCommit, loadValue, onFocusedCellChange, onFollow, canFollow, onClose, label, empty, className, ref }) {
     const { t } = useTranslation('database');
     const notation = useNumberNotation();
     const fields = useRef([]);
+    const blocks = useRef([]);
     const [editing, setEditing] = useState(null);
-    const row = rows[index];
+    const [opened, setOpened] = useState(() => new Set());
+    const row = index >= 0 ? rows[index] : undefined;
     const enumTypes = useMemo(() => columns.map((column) => parseEnumType(column.type)), [columns]);
     const apple = isApplePlatform();
+    useEffect(() => {
+        if (focusedColumn !== null) {
+            blocks.current[focusedColumn]?.scrollIntoView({ block: 'nearest' });
+        }
+    }, [focusedColumn, row?.key]);
     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) {
@@ -73,8 +85,18 @@ export function RecordView({ columns, rows, index, onIndexChange, editable = fal
             ? { ...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 toggleOpened = (column) => {
+        setOpened((now) => {
+            const next = new Set(now);
+            if (!next.delete(column)) {
+                next.add(column);
+            }
+            return next;
+        });
+    };
+    const moveRow = (to) => {
+        commitEdit();
+        onIndexChange(Math.max(0, Math.min(to, rows.length - 1)));
     };
     const handleKeyDown = (event, column) => {
         if (event.nativeEvent.isComposing) {
@@ -85,11 +107,10 @@ export function RecordView({ columns, rows, index, onIndexChange, editable = fal
             event.preventDefault();
             const direction = event.key === 'ArrowUp' ? -1 : 1;
             if (mod) {
-                commitEdit();
-                onIndexChange(Math.max(0, Math.min(index + direction, rows.length - 1)));
+                moveRow(index + direction);
             }
             else {
-                focusField(Math.max(0, Math.min(column + direction, columns.length - 1)));
+                fields.current[Math.max(0, Math.min(column + direction, columns.length - 1))]?.focus();
             }
         }
         else if (event.key === 'Enter') {
@@ -103,7 +124,7 @@ export function RecordView({ columns, rows, index, onIndexChange, editable = fal
         }
     };
     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) => {
+    return (_jsxs("div", { ref: ref, className: clsx('flex min-h-0 min-w-0 flex-1 flex-col bg-surface', className), children: [_jsxs("div", { className: "flex h-10 shrink-0 items-center gap-1 border-b border-border px-2", children: [_jsxs(ButtonGroup, { children: [_jsx(IconButton, { icon: ChevronUp, size: "sm", label: t('table.record.previous'), kbd: PREVIOUS_ROW, disabled: row === undefined || index <= 0, onClick: () => moveRow(index - 1) }), _jsx(IconButton, { icon: ChevronDown, size: "sm", label: t('table.record.next'), kbd: NEXT_ROW, disabled: row === undefined || index >= rows.length - 1, onClick: () => moveRow(index + 1) })] }), row !== undefined && (_jsxs("span", { className: "flex min-w-0 items-baseline gap-2 px-1", children: [_jsx("span", { className: "truncate 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: "truncate text-xs text-text-faint tabular-nums", children: t('table.record.position', { index: formatNumber(index + 1), count: formatNumber(rows.length) }) })] })), _jsx(IconButton, { icon: X, size: "sm", label: t('table.record.close'), className: "ml-auto", onClick: onClose })] }), 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;
@@ -113,14 +134,42 @@ export function RecordView({ columns, rows, index, onIndexChange, editable = fal
                     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) => {
+                    const expandable = enumType === null && opensUp(cell, column.kind);
+                    const expanded = expandable && opened.has(position);
+                    return (_jsxs(ContextMenu.Root, { children: [_jsxs(ContextMenu.Trigger, { ref: (node) => {
+                                    blocks.current[position] = node;
+                                }, "data-focused": focusedColumn === position ? '' : undefined, className: clsx('flex flex-col gap-1 border-l-2 border-transparent px-3 py-1.5 data-[focused]:border-accent data-[focused]:bg-accent-soft/40', row.edited?.has(position) && 'bg-accent/10'), onFocusCapture: () => cellKey !== null && onFocusedCellChange?.(cellKey), children: [_jsxs("span", { className: "flex min-w-0 items-center gap-2", children: [_jsx("span", { className: clsx(CODE_TEXT, 'min-w-0 truncate text-text'), children: column.name }), column.type !== '' && _jsx("span", { className: "min-w-0 truncate text-xs text-text-faint", children: column.type }), _jsxs(ButtonGroup, { className: "ml-auto shrink-0", children: [followable && (_jsx(IconButton, { icon: ArrowUpRight, size: "xs", label: t('grid.followReference'), onClick: () => cellKey !== null && onFollow?.(cellKey) })), expandable && (_jsx(IconButton, { icon: expanded ? Minimize2 : Maximize2, size: "xs", label: t(expanded ? 'table.record.collapse' : 'table.record.expand'), "aria-expanded": expanded, onClick: () => toggleOpened(position) }))] })] }), expanded ? (_jsx(WholeValue, { row: row, column: position, columns: columns, editable: editableField, loadValue: loadValue, onCommit: (value) => commitValue(position, value) }, `${row.key}:${position}`)) : 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);
+                                            }
+                                        } })) : (_jsxs("span", { className: "relative flex min-w-0 items-center", children: [_jsx(Input, { size: "sm", 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));
+                                                }, value: active ? editing.draft : textOf(cell, column.kind, notation, !editableField), placeholder: placeholder, readOnly: !editableField || (preview && (!active || editing.loading)), className: clsx(CODE_TEXT, '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" })] }))] }), _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));
                 }) }))] }));
 }
+/* A field opened up to its whole value, fetched with `loadValue` when the row holds only a preview. */
+function WholeValue({ row, column, columns, editable, loadValue, onCommit }) {
+    const { t } = useTranslation('database');
+    const cell = row.cells[column] ?? null;
+    const known = wholeValueOf(cell);
+    const [fetched, setFetched] = useState(null);
+    const value = known ?? (fetched !== null && fetched.cell === cell ? fetched.value : undefined);
+    const waiting = known === undefined && (fetched === null || fetched.cell !== cell);
+    useEffect(() => {
+        if (known !== undefined || loadValue === undefined) {
+            return;
+        }
+        let live = true;
+        void loadValue(row.key, column).then((whole) => {
+            if (live) {
+                setFetched({ cell, value: whole });
+            }
+        });
+        return () => {
+            live = false;
+        };
+    }, [known, loadValue, row.key, column, cell]);
+    return (_jsx("div", { className: "flex h-72 min-h-0 flex-col overflow-hidden rounded-md border border-border bg-surface", children: value !== undefined ? (_jsx(ValueEditor, { column: columns[column], value: value, editable: editable, onCommit: onCommit })) : (_jsx("div", { className: "grid min-h-0 grow place-items-center text-xs text-text-muted", children: waiting && loadValue !== undefined ? _jsx(Spinner, { size: 14, label: t('value.loading') }) : t('value.notLoaded') })) }));
+}

package/dist/grid/ValueDock.d.ts

@@ -5,7 +5,9 @@ export interface ValueDockProps {
     open: boolean;
     panel: ReactNode;
     children: ReactNode;
+    width?: number;
+    onWidthChange?(width: number): void;
     className?: string;
     ref?: Ref<HTMLDivElement>;
 }
-export declare function ValueDock({ open, panel, children, className, ref }: ValueDockProps): import("react").JSX.Element;
+export declare function ValueDock({ open, panel, children, width: given, onWidthChange, className, ref }: ValueDockProps): import("react").JSX.Element;

package/dist/grid/ValueDock.js

@@ -5,16 +5,22 @@ 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 }) {
+export function ValueDock({ open, panel, children, width: given, onWidthChange, className, ref }) {
     const root = useRef(null);
     const dock = useRef(null);
-    const [width, setWidth] = useState(VALUE_PANEL_WIDTH);
+    const [own, setOwn] = useState(VALUE_PANEL_WIDTH);
+    const width = given ?? own;
     const { startResize } = useColumnResize(dock, {
         size: width,
         min: VALUE_PANEL_MIN_WIDTH,
         from: 'right',
         max: () => (root.current?.clientWidth ?? 960) - VALUE_PANEL_MIN_WIDTH,
-        onSize: setWidth
+        onSize: (next) => {
+            if (given === undefined) {
+                setOwn(next);
+            }
+            onWidthChange?.(next);
+        }
     });
     return (_jsxs("div", { ref: (node) => {
             root.current = node;

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

@@ -0,0 +1 @@
+export declare const cellIdOf: (gridId: string, row: number, column: number) => string;

package/dist/grid/cell-id.js

@@ -0,0 +1,2 @@
+/* The id of a cell, which the grid's `aria-activedescendant` points at. */
+export const cellIdOf = (gridId, row, column) => `${gridId}-${row}-${column}`;

package/dist/grid/layout.d.ts

@@ -4,14 +4,15 @@ export declare const MIN_COLUMN_WIDTH = 64;
 export declare const MAX_COLUMN_WIDTH = 320;
 export declare const MAX_RESIZED_WIDTH = 1200;
 export declare const MAX_FIT_WIDTH = 640;
-export declare const OVERSCAN_ROWS = 6;
+export declare const ROW_BLOCK = 16;
 export declare const DOUBLE_CLICK_MS = 350;
 export declare const FALLBACK_VIEWPORT_HEIGHT = 600;
 export interface VisibleRange {
     readonly start: number;
     readonly end: number;
 }
-export declare const visibleRange: (top: number, height: number, rowHeight: number, count: number, overscan: number) => VisibleRange;
+export declare const scrollBlock: (top: number) => number;
+export declare const drawnRange: (block: number, height: number, count: number) => VisibleRange;
 export declare const scrollToReveal: (start: number, size: number, scroll: number, viewport: number, leading: number) => number;
 export declare const columnOffsets: (widths: readonly number[]) => number[];
 export declare const gutterWidth: (rowCount: number) => number;

package/dist/grid/layout.js

@@ -7,7 +7,8 @@ export const MAX_COLUMN_WIDTH = 320;
 export const MAX_RESIZED_WIDTH = 1200;
 /* How wide fitting a column to its content may make it. */
 export const MAX_FIT_WIDTH = 640;
-export const OVERSCAN_ROWS = 6;
+/* The window of drawn rows moves in blocks of this many rows, so a scroll within a block draws nothing. */
+export const ROW_BLOCK = 16;
 /* Two presses on a resize handle this close are a double click. */
 export const DOUBLE_CLICK_MS = 350;
 /* What a viewport is taken to be until it is measured, so a first paint already holds rows. */
@@ -20,14 +21,22 @@ const GUTTER_MIN_WIDTH = 40;
 const SAMPLE_ROWS = 50;
 /* The arrow and the position number a sorted header carries after its name. */
 const SORT_ROOM = 24;
-/* The rows that touch a viewport of `height` pixels starting `top` pixels into the rows, plus `overscan` rows on both sides. */
-export const visibleRange = (top, height, rowHeight, count, overscan) => {
+/* The block the top of the viewport is in, for a viewport `top` pixels into the rows. */
+export const scrollBlock = (top) => Math.floor(Math.max(0, top) / (ROW_BLOCK * ROW_HEIGHT));
+/*
+ * The rows to draw while the top of a viewport `height` pixels tall is in `block`: those in view and a
+ * viewport more on each side, rounded out to whole blocks. A fast scroll finds its next rows drawn, and
+ * the window moves, and the grid draws, once per block instead of once per row.
+ */
+export const drawnRange = (block, height, count) => {
     if (count <= 0 || height <= 0) {
         return { start: 0, end: 0 };
     }
-    const first = Math.floor(Math.max(0, top) / rowHeight);
-    const last = Math.ceil(Math.max(0, top + height) / rowHeight);
-    return { start: Math.max(0, Math.min(first, count) - overscan), end: Math.min(count, last + overscan) };
+    const page = Math.ceil(height / ROW_HEIGHT);
+    const top = Math.max(0, block) * ROW_BLOCK;
+    const start = Math.max(0, Math.floor((top - page) / ROW_BLOCK) * ROW_BLOCK);
+    const end = Math.min(count, Math.ceil((top + ROW_BLOCK + 2 * page) / ROW_BLOCK) * ROW_BLOCK);
+    return { start: Math.min(start, end), end };
 };
 /*
  * Where to scroll so that an item at `start` that is `size` long is in view. `leading` is the part of

package/dist/grid/types.d.ts

@@ -2,6 +2,7 @@ import type { ColumnInfo, ResultColumn } from '../protocol/index.ts';
 import type { Shown } from './display.ts';
 export interface GridColumn extends ResultColumn {
     readonly primaryKey?: boolean;
+    readonly foreignKey?: boolean;
     readonly nullable?: boolean;
     readonly readOnly?: boolean;
     readonly defaultValue?: string | null;
@@ -16,11 +17,17 @@ export interface GridRow {
     readonly edited?: ReadonlySet<number>;
     readonly locked?: boolean;
 }
-export declare const gridColumnOf: (column: ResultColumn, info: ColumnInfo | undefined, primaryKey: readonly string[]) => GridColumn;
+export declare const gridColumnOf: (column: ResultColumn, info: ColumnInfo | undefined, keys: {
+    readonly primaryKey: readonly string[];
+    readonly foreignKey: readonly string[];
+}) => GridColumn;
 export interface FocusedCell {
     readonly rowKey: string;
     readonly column: number;
 }
+export interface FocusRequest extends FocusedCell {
+    readonly quiet?: boolean;
+}
 export interface GridMenuContext {
     readonly rowKeys: readonly string[];
     readonly cell: FocusedCell | null;

package/dist/grid/types.js

@@ -1,7 +1,8 @@
-/* Builds the column of a table from the result column and the structure's column of the same name. */
-export const gridColumnOf = (column, info, primaryKey) => ({
+/* Builds the column of a table from the result column, the structure's column of the same name and the columns of its keys. */
+export const gridColumnOf = (column, info, keys) => ({
     ...column,
-    primaryKey: primaryKey.includes(column.name),
+    primaryKey: keys.primaryKey.includes(column.name),
+    foreignKey: keys.foreignKey.includes(column.name),
     nullable: info?.nullable,
     readOnly: info?.generated === true,
     defaultValue: info?.defaultValue,

package/dist/index.d.ts

@@ -1,13 +1,17 @@
 export { createDatabaseClient, DatabaseRequestError, type Connection, type DatabaseClient, type DatabaseClientOptions, type DatabaseSession, type DatabaseTransport, type ExecuteOptions, type ExecuteResult, type ExportRequest, type ExportResult, type ImportRequest, type PageQuery, type RequestOptions, type RowsQuery, type SchemaChange, type TableRef } from './client/index.ts';
-export type { DatabaseAction, DatabaseFiles, DatabaseStorage, ExplorerSelection } from './actions.ts';
+export type { DatabaseAction, DatabaseFiles, DatabaseNotice, DatabaseStorage, ExplorerSelection } from './actions.ts';
 export { ConnectionForm, type ConnectionFormProps } from './connections/ConnectionForm.tsx';
+export { configProblems, isValidConfig, type ConfigProblem, type ConfigProblems } from './connections/connection-config.ts';
 export { ConnectionManager, type ConnectionManagerProps } from './connections/ConnectionManager.tsx';
+export { connectionFromContainer, containerTitle, isMysqlContainer, withContainer } from './connections/docker.ts';
 export { DatabaseExplorer, type DatabaseExplorerProps } from './explorer/DatabaseExplorer.tsx';
+export type { ExplorerFolder, ExplorerItem } from './explorer/folders.ts';
 export { TableDesigner, type TableDesignerProps } from './designer/TableDesigner.tsx';
 export { DatabaseProvider, type DatabaseProviderProps } from './DatabaseProvider.tsx';
 export { useDatabaseClient } from './client-context.ts';
 export type { NumberNotation } from './grid/display.ts';
 export { QueryConsole, type QueryConsoleProps } from './console/QueryConsole.tsx';
+export type { QueryConsoleEditorHandle, QueryConsoleEditorProps, QueryConsoleRunScope } from './console/editor-slot.ts';
 export { StructureView, type StructureViewProps } from './structure/StructureView.tsx';
 export { TableView, type TableViewProps } from './table/TableView.tsx';
 export { DatabaseWorkbench, type DatabaseWorkbenchProps } from './workbench/DatabaseWorkbench.tsx';

package/dist/index.js

@@ -1,7 +1,9 @@
 /* The views of the package and the client they read through. Every name here is public API; `exports.test.ts` turns a change to this list into a diff someone has to accept. */
 export { createDatabaseClient, DatabaseRequestError } from './client/index.js';
 export { ConnectionForm } from './connections/ConnectionForm.js';
+export { configProblems, isValidConfig } from './connections/connection-config.js';
 export { ConnectionManager } from './connections/ConnectionManager.js';
+export { connectionFromContainer, containerTitle, isMysqlContainer, withContainer } from './connections/docker.js';
 export { DatabaseExplorer } from './explorer/DatabaseExplorer.js';
 export { TableDesigner } from './designer/TableDesigner.js';
 export { DatabaseProvider } from './DatabaseProvider.js';

package/dist/locales/en.json

@@ -17,7 +17,8 @@
         "test": {
             "action": "Test connection",
             "success": "Connected to {{server}}.",
-            "failed": "The connection failed."
+            "failed": "The connection failed.",
+            "dismiss": "Dismiss"
         },
         "delete": {
             "action": "Delete",
@@ -116,6 +117,18 @@
         "views": "Views",
         "primaryKey": "Primary key",
         "foreignKey": "Foreign key",
+        "primaryAndForeignKey": "Primary key and foreign key",
+        "parts": {
+            "columns": "Columns",
+            "keys": "Keys",
+            "foreignKeys": "Foreign keys",
+            "indexes": "Indexes",
+            "checks": "Checks",
+            "triggers": "Triggers"
+        },
+        "references": "{{columns}} → {{table}} ({{referenced}})",
+        "unique": "unique",
+        "check": "Check",
         "readOnly": "Read only",
         "schemaCount": "{{shown}} of {{total}}",
         "schemaCountHint_one": "{{shown}} of {{total}} schema shown, system schemas are hidden",
@@ -272,7 +285,6 @@
         },
         "cloneRows": "Clone selected rows",
         "revertRows": "Revert selected rows",
-        "valuePanel": "Value editor",
         "firstPage": "First page",
         "lastPage": "Last page",
         "lastPageCounts": "Counts the rows first",
@@ -295,7 +307,10 @@
             "next": "Next row",
             "newRow": "New row",
             "row": "Row {{number}}",
-            "position": "{{index}} of {{count}} on this page"
+            "position": "{{index}} of {{count}} on this page",
+            "close": "Close record view",
+            "expand": "Show the whole value",
+            "collapse": "Hide the whole value"
         },
         "aggregates": {
             "sum": "Sum",
@@ -313,7 +328,8 @@
             "running": "Exporting as {{format}}",
             "cancel": "Cancel",
             "done_one": "Exported {{rows}} row.",
-            "done_other": "Exported {{rows}} rows."
+            "done_other": "Exported {{rows}} rows.",
+            "failed": "Export failed"
         },
         "import": {
             "menu": "Import from file",
@@ -329,7 +345,8 @@
             "skip": "Skip",
             "preview": "First {{count}} rows of the file",
             "cancel": "Cancel",
-            "confirm": "Import"
+            "confirm": "Import",
+            "readFailed": "Could not read the file"
         },
         "more": "More actions",
         "of": "of",
@@ -357,6 +374,8 @@
         "running": "Running",
         "cancelled": "The statement was cancelled.",
         "result": "Result",
+        "results": "Results",
+        "closeResults": "Close results",
         "noRows": "The statement returned no rows.",
         "rows": "Rows: {{rows}}",
         "hasMore": "More rows exist but are not shown.",
@@ -369,10 +388,6 @@
         "runAll": "Run all",
         "loading": "Loading",
         "dismiss": "Dismiss",
-        "ranStatement": "Ran: {{statement}}",
-        "ranSelection": "Ran the selection",
-        "ranAll_one": "Ran {{formatted}} statement",
-        "ranAll_other": "Ran all {{formatted}} statements",
         "rowRange": "Rows: {{from}} to {{to}}",
         "page": "Page {{page}}",
         "previousPage": "Previous page",
@@ -384,15 +399,15 @@
         "schema": "Schema",
         "schemaPlaceholder": "Schema",
         "transaction": {
-            "mode": "Transaction mode",
-            "auto": "Auto",
-            "manual": "Manual",
-            "hint": "Auto commits every run. Manual keeps a transaction open until you commit or roll back.",
+            "autoCommit": "Auto-commit",
+            "hint": "On, every run commits. Off, a transaction stays open until you commit or roll back.",
             "open": "Transaction open",
             "commit": "Commit",
             "rollback": "Roll back",
             "endTitle": "End the transaction?",
-            "endDescription": "A transaction is still open. Commit it to keep its changes, or roll it back to discard them."
+            "endDescription": "A transaction is still open. Commit it to keep its changes, or roll it back to discard them.",
+            "commitFailed": "Could not commit",
+            "rollbackFailed": "Could not roll back"
         },
         "destructive": {
             "title": "Run destructive statements?",
@@ -414,7 +429,9 @@
             "hint": "Click to edit, double click to run.",
             "rows_one": "{{formatted}} row",
             "rows_other": "{{formatted}} rows"
-        }
+        },
+        "pageFailed": "Could not read the page",
+        "exportFailed": "Export failed"
     },
     "value": {
         "title": "Value",