@adecore/database 0.21.1 → 0.21.2

package/src/designer/OptionsEditor.tsx

@@ -11,91 +11,111 @@ export function OptionsEditor({ draft, dialect, disabled, onChange, className, r
     const { t } = useTranslation('database');
     const id = useId();
     const { options } = draft;
+    const patch = (change: Parameters<typeof patchOptions>[1]): void => onChange(patchOptions(draft, change));
     if (dialect.engine === 'sqlite') {
         return (
             <div ref={ref} className={clsx('flex flex-col gap-4 p-3', className)}>
-                <label className="flex items-start gap-3">
-                    <Switch
-                        label={t('designer.options.withoutRowid')}
-                        checked={options.withoutRowid}
-                        disabled={disabled}
-                        onCheckedChange={(checked) => onChange(patchOptions(draft, { withoutRowid: checked }))}
-                    />
-                    <span className="flex flex-col">
-                        <span className="text-sm text-text">{t('designer.options.withoutRowid')}</span>
-                        <span className="text-xs text-text-muted">{t('designer.options.withoutRowidHint')}</span>
-                    </span>
-                </label>
-                <label className="flex items-start gap-3">
-                    <Switch
-                        label={t('designer.options.strict')}
-                        checked={options.strict}
-                        disabled={disabled}
-                        onCheckedChange={(checked) => onChange(patchOptions(draft, { strict: checked }))}
-                    />
-                    <span className="flex flex-col">
-                        <span className="text-sm text-text">{t('designer.options.strict')}</span>
-                        <span className="text-xs text-text-muted">{t('designer.options.strictHint')}</span>
-                    </span>
-                </label>
+                <OptionSwitch
+                    label={t('designer.options.withoutRowid')}
+                    hint={t('designer.options.withoutRowidHint')}
+                    checked={options.withoutRowid}
+                    disabled={disabled}
+                    onCheckedChange={(withoutRowid) => patch({ withoutRowid })}
+                />
+                <OptionSwitch
+                    label={t('designer.options.strict')}
+                    hint={t('designer.options.strictHint')}
+                    checked={options.strict}
+                    disabled={disabled}
+                    onCheckedChange={(strict) => patch({ strict })}
+                />
             </div>
         );
     }
     return (
         <div ref={ref} className={clsx('flex max-w-xl flex-col gap-4 p-3', className)}>
-            <datalist id={`${id}-engines`}>
-                {MYSQL_ENGINES.map((engine) => (
-                    <option key={engine} value={engine} />
-                ))}
-            </datalist>
-            <datalist id={`${id}-charsets`}>
-                {MYSQL_CHARSETS.map((charset) => (
-                    <option key={charset} value={charset} />
-                ))}
-            </datalist>
-            <datalist id={`${id}-collations`}>
-                {collationSuggestionsOf(options.charset).map((collation) => (
-                    <option key={collation} value={collation} />
-                ))}
-            </datalist>
-            <Field label={t('designer.options.engine')} hint={t('designer.options.serverDefault')}>
-                <Input
-                    mono
-                    list={`${id}-engines`}
-                    spellCheck={false}
-                    value={options.engine}
-                    disabled={disabled}
-                    onChange={(event) => onChange(patchOptions(draft, { engine: event.target.value }))}
-                />
-            </Field>
-            <Field label={t('designer.options.charset')} hint={t('designer.options.serverDefault')}>
-                <Input
-                    mono
-                    list={`${id}-charsets`}
-                    spellCheck={false}
-                    value={options.charset}
-                    disabled={disabled}
-                    onChange={(event) => onChange(patchOptions(draft, { charset: event.target.value }))}
-                />
-            </Field>
-            <Field label={t('designer.options.collation')} hint={t('designer.options.serverDefault')}>
-                <Input
-                    mono
-                    list={`${id}-collations`}
-                    spellCheck={false}
-                    value={options.collation}
-                    disabled={disabled}
-                    onChange={(event) => onChange(patchOptions(draft, { collation: event.target.value }))}
-                />
-            </Field>
+            <SuggestedField
+                label={t('designer.options.engine')}
+                listId={`${id}-engines`}
+                suggestions={MYSQL_ENGINES}
+                value={options.engine}
+                disabled={disabled}
+                onValueChange={(engine) => patch({ engine })}
+            />
+            <SuggestedField
+                label={t('designer.options.charset')}
+                listId={`${id}-charsets`}
+                suggestions={MYSQL_CHARSETS}
+                value={options.charset}
+                disabled={disabled}
+                onValueChange={(charset) => patch({ charset })}
+            />
+            <SuggestedField
+                label={t('designer.options.collation')}
+                listId={`${id}-collations`}
+                suggestions={collationSuggestionsOf(options.charset)}
+                value={options.collation}
+                disabled={disabled}
+                onValueChange={(collation) => patch({ collation })}
+            />
             <Field label={t('designer.options.comment')}>
-                <TextArea
-                    rows={3}
-                    value={options.comment}
-                    disabled={disabled}
-                    onChange={(event) => onChange(patchOptions(draft, { comment: event.target.value }))}
-                />
+                <TextArea rows={3} value={options.comment} disabled={disabled} onChange={(event) => patch({ comment: event.target.value })} />
             </Field>
         </div>
     );
 }
+
+function OptionSwitch({
+    label,
+    hint,
+    checked,
+    disabled,
+    onCheckedChange
+}: {
+    label: string;
+    hint: string;
+    checked: boolean;
+    disabled: boolean;
+    onCheckedChange(checked: boolean): void;
+}) {
+    return (
+        <label className="flex items-start gap-3">
+            <Switch label={label} checked={checked} disabled={disabled} onCheckedChange={onCheckedChange} />
+            <span className="flex flex-col">
+                <span className="text-sm text-text">{label}</span>
+                <span className="text-xs text-text-muted">{hint}</span>
+            </span>
+        </label>
+    );
+}
+
+/* A free text field with a list of common values to pick from; empty leaves it to the server. */
+function SuggestedField({
+    label,
+    listId,
+    suggestions,
+    value,
+    disabled,
+    onValueChange
+}: {
+    label: string;
+    listId: string;
+    suggestions: readonly string[];
+    value: string;
+    disabled: boolean;
+    onValueChange(value: string): void;
+}) {
+    const { t } = useTranslation('database');
+    return (
+        <>
+            <datalist id={listId}>
+                {suggestions.map((suggestion) => (
+                    <option key={suggestion} value={suggestion} />
+                ))}
+            </datalist>
+            <Field label={label} hint={t('designer.options.serverDefault')}>
+                <Input mono list={listId} spellCheck={false} value={value} disabled={disabled} onChange={(event) => onValueChange(event.target.value)} />
+            </Field>
+        </>
+    );
+}

package/src/designer/SqlPreview.tsx

@@ -5,8 +5,7 @@ import { useTranslation } from 'react-i18next';
 import { Button, Icon, copyText } from '@adecore/ui';
 import { CODE_TEXT } from '../code-text.ts';
 import type { DraftProblem } from '../ddl/index.ts';
-import type { Plan } from './plan.ts';
-import { scriptOf } from './plan.ts';
+import { scriptOf, type Plan } from './plan.ts';
 
 export interface SqlPreviewProps {
     plan: Plan;
@@ -15,7 +14,7 @@ export interface SqlPreviewProps {
 }
 
 /* The sentence a problem of the draft is read as. */
-export function ProblemText({ problem }: { problem: DraftProblem }) {
+function ProblemText({ problem }: { problem: DraftProblem }) {
     const { t } = useTranslation('database');
     return <>{t(`ddl.problem.${problem.code}`, { subject: problem.subject })}</>;
 }

package/src/designer/TableDesigner.tsx

@@ -104,13 +104,16 @@ export function TableDesigner({ connection, schema, table, toolbarStart, classNa
         const session = client.session(connection);
         const statements = plan.statements;
         const wasNew = snapshot.structure === null;
+        const settle = (message: string | null): void => {
+            setFailure(message);
+            setConfirming(false);
+        };
         let outcome: ExecuteResult;
         applying.current = true;
         try {
             outcome = await session.execute(statements.join(';\n'), { schema });
         } catch (e) {
-            setFailure(messageOf(e, t('designer.failed')));
-            setConfirming(false);
+            settle(messageOf(e, t('designer.failed')));
             return;
         } finally {
             applying.current = false;
@@ -118,12 +121,10 @@ export function TableDesigner({ connection, schema, table, toolbarStart, classNa
         const failed = outcome.results.find((result) => result.kind === 'error');
         if (failed?.kind === 'error') {
             await recoverFrom(session, statements, failed.sql, outcome.inTransaction);
-            setFailure(failed.error.message);
-            setConfirming(false);
+            settle(failed.error.message);
             return;
         }
-        setFailure(null);
-        setConfirming(false);
+        settle(null);
         // The client has told its listeners already: `execute` does for a statement that creates, alters or drops.
         if (wasNew || draft.name !== draft.originalName) {
             setSubject({ requested: table, current: draft.name });

package/src/explorer/DatabaseExplorer.tsx

@@ -11,6 +11,7 @@ import type { TableKind } from '../protocol/index.ts';
 import { EngineIcon } from '../connections/EngineIcon.tsx';
 import { keyLabelOf, type ColumnKeys } from '../column-keys.ts';
 import { KeyIcon } from '../KeyIcon.tsx';
+import { usePopupPress } from '../use-popup-press.ts';
 import type { ExplorerFolder } from './folders.ts';
 import { RowMenu } from './RowMenu.tsx';
 import { TableDialog, type TableRequest } from './TableDialog.tsx';
@@ -31,12 +32,10 @@ import {
     tableOf,
     type EntryRow,
     type ErrorRow,
-    type LoadTarget,
     type ExpandableRow,
     type TreeRow
 } from './tree.ts';
 import { useExplorerLoads } from './use-explorer-loads.ts';
-import { usePopupPress } from '../use-popup-press.ts';
 import { useStoredExpansion } from './use-stored-expansion.ts';
 
 export interface DatabaseExplorerProps {
@@ -228,10 +227,6 @@ export function DatabaseExplorer({
         }
     };
 
-    const refresh = (target: LoadTarget): void => {
-        loads.reset(target);
-    };
-
     const disconnect = (connection: Connection): void => {
         void client.disconnect(connection.id).catch(() => undefined);
         loads.reset({ connectionId: connection.id });
@@ -259,9 +254,10 @@ export function DatabaseExplorer({
             row.kind === 'appItem' ? (
                 (row.item.menu ?? null)
             ) : connection !== undefined && hasMenu(row) ? (
-                <RowMenu row={row} connection={connection} onRefresh={refresh} onDisconnect={disconnect} onRequest={setRequest} />
+                <RowMenu row={row} connection={connection} onRefresh={loads.reset} onDisconnect={disconnect} onRequest={setRequest} />
             ) : null;
         const selectedRow = isSelected(row);
+        const draggable = row.kind === 'table' && onTableDragStart !== undefined;
         const props = {
             level: row.level,
             selected: selectedRow,
@@ -281,12 +277,9 @@ export function DatabaseExplorer({
                     rowElements.current.set(row.key, element);
                 }
             },
-            draggable: row.kind === 'table' && onTableDragStart !== undefined,
-            onDragStart:
-                row.kind === 'table' && onTableDragStart !== undefined
-                    ? (event: DragEvent<HTMLElement>) => onTableDragStart(row.ref, event, row.table.kind)
-                    : undefined,
-            onDragEnd: row.kind === 'table' && onTableDragStart !== undefined ? onTableDragEnd : undefined,
+            draggable,
+            onDragStart: draggable ? (event: DragEvent<HTMLElement>) => onTableDragStart(row.ref, event, row.table.kind) : undefined,
+            onDragEnd: draggable ? onTableDragEnd : undefined,
             onClick: (event: MouseEvent) => click(row, event.detail),
             onDoubleClick: tableOf(row) === null && row.kind !== 'appItem' ? undefined : () => open(row),
             onFocus: () => {
@@ -374,12 +367,9 @@ function RowContent({ row, onToggle }: { row: TreeRow; onToggle?: () => void })
             );
         case 'folder':
             return (
-                <>
-                    <Tree.Chevron expanded={row.expanded} onExpandedChange={onToggle} />
-                    <Icon icon={Folder} size={16} className="shrink-0 text-text-muted" />
-                    <Tree.Label>{t(row.group === 'view' ? 'explorer.views' : 'explorer.tables')}</Tree.Label>
-                    <span className="shrink-0 text-text-faint tabular-nums">{formatNumber(row.count)}</span>
-                </>
+                <FolderContent expanded={row.expanded} count={row.count} onToggle={onToggle}>
+                    {t(row.group === 'view' ? 'explorer.views' : 'explorer.tables')}
+                </FolderContent>
             );
         case 'table':
             return (
@@ -391,21 +381,15 @@ function RowContent({ row, onToggle }: { row: TreeRow; onToggle?: () => void })
             );
         case 'part':
             return (
-                <>
-                    <Tree.Chevron expanded={row.expanded} onExpandedChange={onToggle} />
-                    <Icon icon={Folder} size={16} className="shrink-0 text-text-muted" />
-                    <Tree.Label>{t(`explorer.parts.${row.part}`)}</Tree.Label>
-                    <span className="shrink-0 text-text-faint tabular-nums">{formatNumber(row.count)}</span>
-                </>
+                <FolderContent expanded={row.expanded} count={row.count} onToggle={onToggle}>
+                    {t(`explorer.parts.${row.part}`)}
+                </FolderContent>
             );
         case 'appFolder':
             return (
-                <>
-                    <Tree.Chevron expanded={row.expanded} onExpandedChange={onToggle} />
-                    <Icon icon={Folder} size={16} className="shrink-0 text-text-muted" />
-                    <Tree.Label>{row.folder.label}</Tree.Label>
-                    <span className="shrink-0 text-text-faint tabular-nums">{formatNumber(row.count)}</span>
-                </>
+                <FolderContent expanded={row.expanded} count={row.count} onToggle={onToggle}>
+                    {row.folder.label}
+                </FolderContent>
             );
         case 'appItem':
             return (
@@ -446,6 +430,17 @@ function RowContent({ row, onToggle }: { row: TreeRow; onToggle?: () => void })
     }
 }
 
+function FolderContent({ expanded, count, onToggle, children }: { expanded: boolean; count: number; onToggle?: () => void; children: ReactNode }) {
+    return (
+        <>
+            <Tree.Chevron expanded={expanded} onExpandedChange={onToggle} />
+            <Icon icon={Folder} size={16} className="shrink-0 text-text-muted" />
+            <Tree.Label>{children}</Tree.Label>
+            <span className="shrink-0 text-text-faint tabular-nums">{formatNumber(count)}</span>
+        </>
+    );
+}
+
 const EMPTY_WORDS = { schemas: 'explorer.noSchemas', tables: 'explorer.noTables', columns: 'explorer.noColumns' } as const;
 
 function SchemaCount({ shown, total }: { shown: number; total: number }) {

package/src/explorer/TableDialog.tsx

@@ -32,7 +32,7 @@ export function TableDialog({ request, onClose, onDone }: TableDialogProps) {
         const dialect = dialectOf(await session.server());
         const { results } = await session.execute(statementOf(dialect, change, ref, kind, to));
         const failed = results.find((result) => result.kind === 'error');
-        if (failed !== undefined && failed.kind === 'error') {
+        if (failed?.kind === 'error') {
             throw new Error(failed.error.message);
         }
         // The client tells its listeners after a `RENAME`, a `DROP` and a `TRUNCATE`, but not after a SQLite emptying, which is a `DELETE FROM`.

package/src/explorer/tree.ts

@@ -230,14 +230,7 @@ export const selectionOf = (row: TreeRow): ExplorerSelection | null => {
 };
 
 /* The key of the row a selection points at: its table, else its schema, else its connection. */
-export const selectionKey = (selection: ExplorerSelection): string => {
-    if (selection.schema === undefined) {
-        return connectionKey(selection.connectionId);
-    }
-    return selection.table === undefined
-        ? schemaKey(selection.connectionId, selection.schema)
-        : tableKey({ connectionId: selection.connectionId, schema: selection.schema, table: selection.table });
-};
+export const selectionKey = (selection: ExplorerSelection): string => loadKey(selection);
 
 /* Whether a row has a menu: the rows of a connection, a schema, a table or a column, an item the app gave one, and none of the rows that only report. */
 export const hasMenu = (row: TreeRow): boolean =>
@@ -297,6 +290,10 @@ const statusDraft = (row: StatusRow, level: number, parent: string, focusable: b
     below: []
 });
 
+/* The row of a load that is not ready: its error, which can be retried and so takes the focus, or that it is loading. */
+const pendingDraft = (load: Exclude<Load<unknown>, { status: 'ready' }>, retry: LoadTarget, level: number, parent: string): Draft =>
+    statusDraft(load.status === 'error' ? { kind: 'error', message: load.message, retry } : { kind: 'loading' }, level, parent, load.status === 'error');
+
 const matches = (name: string, query: string): boolean => name.toLowerCase().includes(query);
 
 /* What each folder of a table besides its columns holds: the primary key and the unique keys, the foreign keys, the other indexes, the checks and the triggers. */
@@ -348,11 +345,7 @@ export const flattenTree = (input: TreeInput): TreeRow[] => {
     const tableChildren = (ref: TableRef, kind: TableKind, level: number, parent: string): Draft[] => {
         const load = input.structures(ref.connectionId, ref.schema, ref.table);
         if (load.status !== 'ready') {
-            const row: StatusRow =
-                load.status === 'error'
-                    ? { kind: 'error', message: load.message, retry: { connectionId: ref.connectionId, schema: ref.schema, table: ref.table } }
-                    : { kind: 'loading' };
-            return [statusDraft(row, level, parent, load.status === 'error')];
+            return [pendingDraft(load, { connectionId: ref.connectionId, schema: ref.schema, table: ref.table }, level, parent)];
         }
         const structure = load.value;
         if (structure.columns.length === 0) {
@@ -443,9 +436,7 @@ export const flattenTree = (input: TreeInput): TreeRow[] => {
         if (filtering) {
             return { drafts: [], tables: 0 };
         }
-        const row: StatusRow =
-            load.status === 'error' ? { kind: 'error', message: load.message, retry: { connectionId: connection.id, schema } } : { kind: 'loading' };
-        return { drafts: [statusDraft(row, level, parent, load.status === 'error')], tables: 0 };
+        return { drafts: [pendingDraft(load, { connectionId: connection.id, schema }, level, parent)], tables: 0 };
     };
 
     const schemaDraft = (connection: Connection, schema: string, parent: string): Draft | null => {
@@ -523,9 +514,7 @@ export const flattenTree = (input: TreeInput): TreeRow[] => {
                 children = visible.flatMap((entry) => schemaDraft(connection, entry.name, key) ?? []);
             }
         } else if (open && !filtering) {
-            const row: StatusRow =
-                load.status === 'error' ? { kind: 'error', message: load.message, retry: { connectionId: connection.id } } : { kind: 'loading' };
-            children = [statusDraft(row, 2, key, load.status === 'error')];
+            children = [pendingDraft(load, { connectionId: connection.id }, 2, key)];
         }
         // Behind a status row too: what the app keeps of a connection does not wait on its server.
         children = [...children, ...(open ? appFolders : [])];

package/src/grid/DataGrid.tsx

@@ -16,7 +16,11 @@ import { Ban, Copy, RotateCcw } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { ContextMenu, copyText, EDIT_SHORTCUTS, Icon, isApplePlatform, isModHeld, Kbd, useContentSize } from '@adecore/ui';
 import type { EditValue, Value } from '../protocol/index.ts';
+import { assignRef } from '../assign-ref.ts';
 import type { SqlTarget } from '../sql.ts';
+import { useNumberNotation } from '../client-context.ts';
+import { usePopupPress } from '../use-popup-press.ts';
+import { useStableCallback } from '../use-stable-callback.ts';
 import type { RangeBlock } from './aggregates.ts';
 import { fullRect, rectBetween, rectContains } from './cell-range.ts';
 import type { EditMove } from './CellEditor.tsx';
@@ -49,9 +53,6 @@ import { moveFocus, type CellPosition, type NavigationKey } from './navigation.t
 import { selectRow } from './row-selection.ts';
 import { sortOnly, sortStateOf, type GridSort } from './sort.ts';
 import type { ColumnRequest, FocusedCell, FocusRequest, GridColumn, GridMenuContext, GridRow } from './types.ts';
-import { useNumberNotation } from '../client-context.ts';
-import { usePopupPress } from '../use-popup-press.ts';
-import { useStableCallback } from '../use-stable-callback.ts';
 
 export interface DataGridProps {
     columns: readonly GridColumn[];
@@ -174,7 +175,7 @@ export function DataGrid({
     const anchor = useRef(-1);
     const pressedInPopup = usePopupPress();
     const notation = useNumberNotation();
-    /* Set once an edit commits or cancels, so the blur that follows the input's removal does not commit it again. */
+    // Set once an edit commits or cancels, so the blur that follows the input's removal does not commit it again.
     const settled = useRef(true);
     const dragging = useRef(false);
     const dragOrigin = useRef<CellPosition | null>(null);
@@ -252,9 +253,6 @@ export function DataGrid({
 
     useEffect(() => {
         reportFocus.current = onFocusedCellChange;
-    });
-
-    useEffect(() => {
         reportRange.current = onRangeChange;
         reportLayout.current = onLayoutChange;
     });
@@ -281,8 +279,11 @@ export function DataGrid({
     }, [blockKey]);
 
     useEffect(() => {
-        const index = focusRequest === null || focusRequest === undefined ? -1 : rows.findIndex((row) => row.key === focusRequest.rowKey);
-        if (focusRequest !== null && focusRequest !== undefined && index >= 0) {
+        if (focusRequest === null || focusRequest === undefined) {
+            return;
+        }
+        const index = rows.findIndex((row) => row.key === focusRequest.rowKey);
+        if (index >= 0) {
             focusAt({ row: index, column: focusRequest.column });
             if (focusRequest.quiet !== true) {
                 scroller.current?.focus();
@@ -318,11 +319,7 @@ export function DataGrid({
         (node: HTMLDivElement | null) => {
             scroller.current = node;
             measure(node);
-            if (typeof ref === 'function') {
-                ref(node);
-            } else if (ref) {
-                ref.current = node;
-            }
+            assignRef(ref, node);
         },
         [measure, ref]
     );

package/src/grid/EnumPicker.tsx

@@ -37,9 +37,10 @@ const LOOK = {
  */
 export function EnumPicker({ type, value, nullable, label, autoOpen = false, disabled = false, onDone, look = 'cell', className, ref }: EnumPickerProps) {
     const { t } = useTranslation('database');
-    const settled = useRef(false);
-    const [members, setMembers] = useState<ReadonlySet<string>>(() => new Set(type.kind === 'set' && value !== null ? membersOf(value) : []));
     const set = type.kind === 'set';
+    const membersOfValue = (): ReadonlySet<string> => new Set(set && value !== null ? membersOf(value) : []);
+    const settled = useRef(false);
+    const [members, setMembers] = useState(membersOfValue);
 
     const settle = (result: { readonly value: string | null } | undefined): void => {
         if (!settled.current) {
@@ -51,7 +52,7 @@ export function EnumPicker({ type, value, nullable, label, autoOpen = false, dis
     const handleOpenChange = (open: boolean): void => {
         if (open) {
             settled.current = false;
-            setMembers(new Set(set && value !== null ? membersOf(value) : []));
+            setMembers(membersOfValue());
             return;
         }
         const joined = joinMembers(type, members);

package/src/grid/GridHeaderCell.tsx

@@ -7,9 +7,8 @@ import { formatNumber } from '@adecore/ui/format';
 import { CODE_TEXT } from '../code-text.ts';
 import { keyLabelOf } from '../column-keys.ts';
 import { KeyIcon } from '../KeyIcon.tsx';
-import type { SortDirection } from '../sql.ts';
+import { isNumericKind, type SortDirection } from '../sql.ts';
 import type { ColumnClick } from './column-selection.ts';
-import { isNumericKind } from './display.ts';
 import { isDoubleClick, MAX_RESIZED_WIDTH, MIN_COLUMN_WIDTH } from './layout.ts';
 import type { GridColumn } from './types.ts';
 
@@ -140,7 +139,7 @@ export function GridHeaderCell({
     const { t } = useTranslation('database');
     const cell = useRef<HTMLDivElement>(null);
     const lastPress = useRef<number | null>(null);
-    /* Set by a press on the resize strip, since the click that ends the drag would otherwise pick the column. */
+    // 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,

package/src/grid/RecordView.tsx

@@ -8,7 +8,8 @@ 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 { isNumericKind } from '../sql.ts';
+import { cellView, copyTextOf, 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';

package/src/grid/ValueDock.tsx

@@ -1,6 +1,7 @@
 import { useRef, useState, type ReactNode, type Ref } from 'react';
 import clsx from 'clsx';
 import { ColumnResizeHandle, useColumnResize } from '@adecore/ui';
+import { assignRef } from '../assign-ref.ts';
 
 export const VALUE_PANEL_WIDTH = 320;
 export const VALUE_PANEL_MIN_WIDTH = 240;
@@ -41,11 +42,7 @@ export function ValueDock({ open, panel, children, width: given, onWidthChange,
         <div
             ref={(node) => {
                 root.current = node;
-                if (typeof ref === 'function') {
-                    ref(node);
-                } else if (ref) {
-                    ref.current = node;
-                }
+                assignRef(ref, node);
             }}
             className={clsx('flex min-h-0 min-w-0 flex-1', className)}
         >

package/src/grid/aggregates.ts

@@ -1,9 +1,7 @@
 import type { ValueKind } from '../protocol/index.ts';
+import { isNumericKind, NUMERIC_TEXT } from '../sql.ts';
 import type { Shown } from './display.ts';
 
-const NUMERIC_KINDS: ReadonlySet<ValueKind> = new Set(['integer', 'decimal', 'float']);
-const NUMERIC_TEXT = /^[+-]?(?:\d+\.?\d*|\.\d+)(?:[eE][+-]?\d+)?$/;
-
 /* A block of rows, and the columns (indexes into the columns of the grid) it spans. */
 export interface RangeBlock {
     readonly top: number;
@@ -62,7 +60,7 @@ export const aggregateBlock = (rows: readonly (readonly Shown[])[], kinds: reado
         for (const column of block.columns) {
             count++;
             const kind = kinds[column];
-            const found = kind !== undefined && NUMERIC_KINDS.has(kind) ? numberOf(cells[column] ?? null) : null;
+            const found = kind !== undefined && isNumericKind(kind) ? numberOf(cells[column] ?? null) : null;
             if (found === null) {
                 continue;
             }

package/src/grid/column-layout.ts

@@ -51,10 +51,11 @@ export const captureLayout = (columns: readonly { readonly name: string }[], sta
             widths[column.name] = width;
         }
     }
+    const namesOf = (indexes: readonly number[]): string[] => indexes.flatMap((index) => columns[index]?.name ?? []);
     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]))
+        hidden: namesOf([...state.view.hidden].sort((a, b) => a - b)),
+        pinned: namesOf(state.view.pinned)
     };
 };
 

package/src/grid/copy-formats.ts

@@ -1,5 +1,5 @@
 import type { ValueKind } from '../protocol/index.ts';
-import { qualifiedName, quoteIdentifier, sqlLiteral, type SqlTarget } from '../sql.ts';
+import { isNumericKind, qualifiedName, quoteIdentifier, sqlLiteral, type SqlTarget } from '../sql.ts';
 import { copyTextOf, type Shown } from './display.ts';
 
 export type CopyFormat = 'tsv' | 'csv' | 'json' | 'sql';
@@ -19,7 +19,6 @@ export interface CopyInput {
     readonly target?: SqlTarget;
 }
 
-const NUMERIC_KINDS: ReadonlySet<ValueKind> = new Set(['integer', 'decimal', 'float']);
 const JSON_NUMBER = /^-?(?:0|[1-9]\d*)(?:\.\d+)?(?:[eE][+-]?\d+)?$/;
 
 const quoteField = (text: string): string => `"${text.replaceAll('"', '""')}"`;
@@ -45,7 +44,7 @@ const jsonOf = (cell: Shown, kind: ValueKind): string => {
         return Number.isFinite(cell) ? String(cell) : 'null';
     }
     if (typeof cell === 'string') {
-        if (NUMERIC_KINDS.has(kind) && JSON_NUMBER.test(cell)) {
+        if (isNumericKind(kind) && JSON_NUMBER.test(cell)) {
             return cell;
         }
         if (kind === 'json') {