@adecore/database 0.17.0 → 0.18.0

package/src/grid/GridRowView.tsx

@@ -0,0 +1,184 @@
+import { memo, type MouseEvent, type PointerEvent } from 'react';
+import clsx from 'clsx';
+import { Spinner } from '@adecore/ui';
+import { formatNumber } from '@adecore/ui/format';
+import { CODE_TEXT } from '../code-text.ts';
+import { CellEditor, type EditMove } from './CellEditor.tsx';
+import { cellIdOf } from './cell-id.ts';
+import { cellView, type CellView, type NumberNotation } from './display.ts';
+import type { EnumType } from './enum-type.ts';
+import { EnumPicker } from './EnumPicker.tsx';
+import { ROW_HEIGHT } from './layout.ts';
+import type { CellPosition } from './navigation.ts';
+import type { GridColumn, GridRow } from './types.ts';
+
+/*
+ * 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: Record<CellView['tone'], string> = {
+    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'
+} as const;
+
+export interface CellEdit extends CellPosition {
+    draft: string;
+    initial: string;
+    loading: boolean;
+}
+
+/* What every row draws the same way. It changes when the columns or their layout do, never on a scroll. */
+export interface RowLook {
+    readonly gridId: string;
+    readonly columns: readonly GridColumn[];
+    /* Column indexes in the order they are drawn. */
+    readonly order: readonly number[];
+    /* By drawn position. */
+    readonly widths: readonly number[];
+    readonly pinnedShown: number;
+    readonly gutter: number;
+    readonly notation: NumberNotation;
+    readonly enumTypes: readonly (EnumType | null)[];
+    /* Column indexes picked whole. */
+    readonly picked: ReadonlySet<number>;
+    readonly loadingLabel: string;
+}
+
+/* What a row hands back to the grid; every function keeps its identity, so a row that did not change is not drawn again. */
+export interface RowActions {
+    pressCell(event: PointerEvent, position: CellPosition, isEditing: boolean): void;
+    dragTo(position: CellPosition): void;
+    beginEdit(position: CellPosition): void;
+    openCellMenu(position: CellPosition): void;
+    pressRowNumber(index: number, event: MouseEvent): void;
+    openRowMenu(index: number): void;
+    finishPick(result: { readonly value: string | null } | undefined): void;
+    finishEdit(commit: boolean, move?: EditMove): void;
+    changeDraft(draft: string): void;
+}
+
+export interface GridRowViewProps {
+    row: GridRow;
+    index: number;
+    selected: boolean;
+    /* The column index of the focused cell when it is in this row, else -1. */
+    focusedColumn: number;
+    /* The drawn positions a cell range covers in this row, or -1 for both when it covers none. */
+    rangeStart: number;
+    rangeEnd: number;
+    /* The edit under way when it is in this row. */
+    editing: CellEdit | null;
+    look: RowLook;
+    actions: RowActions;
+}
+
+/* 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 }: GridRowViewProps) {
+    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 (
+            <div
+                key={columnIndex}
+                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)}
+            >
+                {pinned && !ranged && <span aria-hidden className={clsx('pointer-events-none absolute inset-0', tint, edited && 'bg-accent/10')} />}
+                {isEditing && editing.loading && <Spinner size={12} label={look.loadingLabel} />}
+                {isEditing && !editing.loading && enumType !== null && (
+                    <EnumPicker
+                        autoOpen
+                        type={enumType}
+                        value={typeof cell === 'string' ? cell : null}
+                        nullable={column.nullable !== false}
+                        label={column.name}
+                        onDone={actions.finishPick}
+                    />
+                )}
+                {isEditing && !editing.loading && enumType === null && (
+                    <CellEditor
+                        value={editing.draft}
+                        label={column.name}
+                        onValueChange={actions.changeDraft}
+                        onCommit={(move) => actions.finishEdit(true, move)}
+                        onCancel={() => actions.finishEdit(false)}
+                    />
+                )}
+                {!isEditing && (
+                    <>
+                        <span className={clsx('min-w-0 truncate', TONE[view.tone], row.state === 'deleted' && 'line-through')}>{view.text}</span>
+                        {view.suffix !== undefined && <span className="ml-2 shrink-0 text-text-faint">{view.suffix}</span>}
+                    </>
+                )}
+            </div>
+        );
+    });
+    return (
+        <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 }}
+        >
+            <div className={PINNED_GROUP}>
+                <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)}
+                >
+                    {row.number === null ? '+' : formatNumber(row.number)}
+                </div>
+                {cells.slice(0, pinnedShown)}
+            </div>
+            {cells.slice(pinnedShown)}
+        </div>
+    );
+});

package/src/grid/RecordView.tsx

@@ -1,35 +1,41 @@
-import { useMemo, useRef, useState, type KeyboardEvent, type Ref } from 'react';
+import { useEffect, useMemo, useRef, useState, type KeyboardEvent, type Ref } 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.ts';
+import { CODE_TEXT } from '../code-text.ts';
 import type { EditValue, Value } from '../protocol/index.ts';
+import { ValueEditor } from '../value/ValueEditor.tsx';
 import { cellView, copyTextOf, isNumericKind, isPreview, numeralText, type NumberNotation } from './display.ts';
 import { draftOf, parseDraft } from './edit-value.ts';
 import { parseEnumType } from './enum-type.ts';
 import { EnumPicker } from './EnumPicker.tsx';
+import { wholeValueOf } from './focused-value.ts';
 import type { FocusedCell, GridColumn, GridRow } from './types.ts';
 
 export interface RecordViewProps {
     columns: readonly GridColumn[];
     rows: readonly GridRow[];
-    /* The row shown, an index into `rows`. */
+    /* The row shown, an index into `rows`; -1 shows none. */
     index: number;
     onIndexChange(index: number): void;
+    /* The column of the grid's focused cell when it is in this row, which the view marks and keeps in sight. */
+    focusedColumn: number | null;
     /* Lets a field be edited; the rows that are `locked` stay as they are. */
     editable?: boolean;
     onCommit?(rowKey: string, column: number, value: EditValue): void;
     /* The whole value of a field that is only a preview. Resolves `undefined` when it cannot be had. */
     loadValue?(rowKey: string, column: number): Promise<Value | undefined>;
-    /* The field that holds the focus changed, or lost it. */
-    onFocusedCellChange?(cell: FocusedCell | null): void;
+    /* A field took the focus. */
+    onFocusedCellChange?(cell: FocusedCell): void;
     onFollow?(cell: FocusedCell): void;
     canFollow?(cell: FocusedCell): boolean;
+    onClose(): void;
     /* The accessible name of the list of fields. */
     label: string;
-    /* Drawn while there are no rows. */
+    /* Drawn while there is no row. */
     empty?: string;
     className?: string;
     ref?: Ref<HTMLDivElement>;
@@ -59,22 +65,28 @@ const textOf = (cell: GridRow['cells'][number], kind: GridColumn['kind'], notati
     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: GridRow['cells'][number], kind: GridColumn['kind']): boolean =>
+    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,
+    focusedColumn,
     editable = false,
     onCommit,
     loadValue,
     onFocusedCellChange,
     onFollow,
     canFollow,
+    onClose,
     label,
     empty,
     className,
@@ -83,11 +95,19 @@ export function RecordView({
     const { t } = useTranslation('database');
     const notation = useNumberNotation();
     const fields = useRef<(HTMLElement | null)[]>([]);
+    const blocks = useRef<(HTMLElement | null)[]>([]);
     const [editing, setEditing] = useState<Editing | null>(null);
-    const row = rows[index];
+    const [opened, setOpened] = useState<ReadonlySet<number>>(() => 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: number): boolean =>
         editable && row !== undefined && row.locked !== true && row.state !== 'deleted' && columns[column]?.readOnly !== true;
 
@@ -131,8 +151,19 @@ export function RecordView({
         );
     };
 
-    const focusField = (column: number): void => {
-        fields.current[column]?.focus();
+    const toggleOpened = (column: number): void => {
+        setOpened((now) => {
+            const next = new Set(now);
+            if (!next.delete(column)) {
+                next.add(column);
+            }
+            return next;
+        });
+    };
+
+    const moveRow = (to: number): void => {
+        commitEdit();
+        onIndexChange(Math.max(0, Math.min(to, rows.length - 1)));
     };
 
     const handleKeyDown = (event: KeyboardEvent<HTMLElement>, column: number): void => {
@@ -144,10 +175,9 @@ export function RecordView({
             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') {
             event.preventDefault();
@@ -162,34 +192,37 @@ export function RecordView({
     const cellOf = (column: number): FocusedCell | null => (row === undefined ? null : { rowKey: row.key, column });
 
     return (
-        <div ref={ref} className={clsx('flex min-h-0 flex-1 flex-col bg-surface', className)}>
-            <div className="flex h-10 shrink-0 items-center gap-2 border-b border-border px-3">
-                <IconButton
-                    icon={ChevronUp}
-                    size="sm"
-                    label={t('table.record.previous')}
-                    kbd={PREVIOUS_ROW}
-                    disabled={index <= 0}
-                    onClick={() => onIndexChange(index - 1)}
-                />
-                <IconButton
-                    icon={ChevronDown}
-                    size="sm"
-                    label={t('table.record.next')}
-                    kbd={NEXT_ROW}
-                    disabled={index >= rows.length - 1}
-                    onClick={() => onIndexChange(index + 1)}
-                />
+        <div ref={ref} className={clsx('flex min-h-0 min-w-0 flex-1 flex-col bg-surface', className)}>
+            <div className="flex h-10 shrink-0 items-center gap-1 border-b border-border px-2">
+                <ButtonGroup>
+                    <IconButton
+                        icon={ChevronUp}
+                        size="sm"
+                        label={t('table.record.previous')}
+                        kbd={PREVIOUS_ROW}
+                        disabled={row === undefined || index <= 0}
+                        onClick={() => moveRow(index - 1)}
+                    />
+                    <IconButton
+                        icon={ChevronDown}
+                        size="sm"
+                        label={t('table.record.next')}
+                        kbd={NEXT_ROW}
+                        disabled={row === undefined || index >= rows.length - 1}
+                        onClick={() => moveRow(index + 1)}
+                    />
+                </ButtonGroup>
                 {row !== undefined && (
-                    <>
-                        <span className="text-sm font-medium text-text tabular-nums">
+                    <span className="flex min-w-0 items-baseline gap-2 px-1">
+                        <span className="truncate text-sm font-medium text-text tabular-nums">
                             {row.number === null ? t('table.record.newRow') : t('table.record.row', { number: formatNumber(row.number) })}
                         </span>
-                        <span className="text-xs text-text-faint tabular-nums">
+                        <span className="truncate text-xs text-text-faint tabular-nums">
                             {t('table.record.position', { index: formatNumber(index + 1), count: formatNumber(rows.length) })}
                         </span>
-                    </>
+                    </span>
                 )}
+                <IconButton icon={X} size="sm" label={t('table.record.close')} className="ml-auto" onClick={onClose} />
             </div>
             {row === undefined ? (
                 <p className="px-4 py-6 text-xs text-text-muted">{empty}</p>
@@ -205,38 +238,75 @@ export function RecordView({
                         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;
+                        const expandable = enumType === null && opensUp(cell, column.kind);
+                        const expanded = expandable && opened.has(position);
                         return (
                             <ContextMenu.Root key={position}>
                                 <ContextMenu.Trigger
-                                    className={clsx('flex items-center gap-3 px-4 py-1', row.edited?.has(position) && 'bg-accent/10')}
-                                    onFocusCapture={() => onFocusedCellChange?.(cellKey)}
+                                    ref={(node: HTMLElement | null) => {
+                                        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)}
                                 >
-                                    <span className="flex w-56 shrink-0 items-baseline gap-2 truncate">
-                                        <span className="truncate font-mono text-code text-text">{column.name}</span>
-                                        {column.type !== '' && <span className="truncate text-xs text-text-faint">{column.type}</span>}
+                                    <span className="flex min-w-0 items-center gap-2">
+                                        <span className={clsx(CODE_TEXT, 'min-w-0 truncate text-text')}>{column.name}</span>
+                                        {column.type !== '' && <span className="min-w-0 truncate text-xs text-text-faint">{column.type}</span>}
+                                        <ButtonGroup className="ml-auto shrink-0">
+                                            {followable && (
+                                                <IconButton
+                                                    icon={ArrowUpRight}
+                                                    size="xs"
+                                                    label={t('grid.followReference')}
+                                                    onClick={() => cellKey !== null && onFollow?.(cellKey)}
+                                                />
+                                            )}
+                                            {expandable && (
+                                                <IconButton
+                                                    icon={expanded ? Minimize2 : Maximize2}
+                                                    size="xs"
+                                                    label={t(expanded ? 'table.record.collapse' : 'table.record.expand')}
+                                                    aria-expanded={expanded}
+                                                    onClick={() => toggleOpened(position)}
+                                                />
+                                            )}
+                                        </ButtonGroup>
                                     </span>
-                                    <span className="relative flex min-w-0 flex-1 items-center gap-1">
-                                        {enumType !== null ? (
-                                            <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);
-                                                    }
-                                                }}
-                                            />
-                                        ) : (
+                                    {expanded ? (
+                                        <WholeValue
+                                            key={`${row.key}:${position}`}
+                                            row={row}
+                                            column={position}
+                                            columns={columns}
+                                            editable={editableField}
+                                            loadValue={loadValue}
+                                            onCommit={(value) => commitValue(position, value)}
+                                        />
+                                    ) : enumType !== null ? (
+                                        <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);
+                                                }
+                                            }}
+                                        />
+                                    ) : (
+                                        <span className="relative flex min-w-0 items-center">
                                             <Input
                                                 size="sm"
-                                                mono
                                                 spellCheck={false}
                                                 aria-label={column.name}
                                                 ref={(node) => {
@@ -245,23 +315,15 @@ export function RecordView({
                                                 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')}
+                                                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 && <Spinner size={12} label={t('grid.loadingValue')} className="absolute right-2" />}
-                                        {followable && (
-                                            <IconButton
-                                                icon={ArrowUpRight}
-                                                size="xs"
-                                                label={t('grid.followReference')}
-                                                onClick={() => cellKey !== null && onFollow?.(cellKey)}
-                                            />
-                                        )}
-                                    </span>
+                                            {active && editing.loading && <Spinner size={12} label={t('grid.loadingValue')} className="absolute right-2" />}
+                                        </span>
+                                    )}
                                 </ContextMenu.Trigger>
                                 <ContextMenu.Popup>
                                     <ContextMenu.Item onClick={() => copyText(copyTextOf(cell))}>
@@ -291,3 +353,54 @@ export function RecordView({
         </div>
     );
 }
+
+/* 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
+}: {
+    row: GridRow;
+    column: number;
+    columns: readonly GridColumn[];
+    editable: boolean;
+    loadValue?(rowKey: string, column: number): Promise<Value | undefined>;
+    onCommit(value: EditValue): void;
+}) {
+    const { t } = useTranslation('database');
+    const cell = row.cells[column] ?? null;
+    const known = wholeValueOf(cell);
+    const [fetched, setFetched] = useState<{ cell: unknown; value: Value | undefined } | null>(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 (
+        <div className="flex h-72 min-h-0 flex-col overflow-hidden rounded-md border border-border bg-surface">
+            {value !== undefined ? (
+                <ValueEditor column={columns[column]!} value={value} editable={editable} onCommit={onCommit} />
+            ) : (
+                <div className="grid min-h-0 grow place-items-center text-xs text-text-muted">
+                    {waiting && loadValue !== undefined ? <Spinner size={14} label={t('value.loading')} /> : t('value.notLoaded')}
+                </div>
+            )}
+        </div>
+    );
+}

package/src/grid/ValueDock.tsx

@@ -11,21 +11,30 @@ export interface ValueDockProps {
     panel: ReactNode;
     /* The grid and whatever shares its column. */
     children: ReactNode;
+    /* The width of the panel, when the owner keeps it; without it the dock keeps it itself. */
+    width?: number;
+    onWidthChange?(width: number): void;
     className?: string;
     ref?: Ref<HTMLDivElement>;
 }
 
 /* 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 }: ValueDockProps) {
+export function ValueDock({ open, panel, children, width: given, onWidthChange, className, ref }: ValueDockProps) {
     const root = useRef<HTMLDivElement | null>(null);
     const dock = useRef<HTMLDivElement>(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 (

package/src/grid/cell-id.ts

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

package/src/grid/layout.ts

@@ -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. */
@@ -29,14 +30,23 @@ export interface VisibleRange {
     readonly end: number;
 }
 
-/* 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: number, height: number, rowHeight: number, count: number, overscan: number): VisibleRange => {
+/* The block the top of the viewport is in, for a viewport `top` pixels into the rows. */
+export const scrollBlock = (top: number): number => 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: number, height: number, count: number): VisibleRange => {
     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 };
 };
 
 /*