@adecore/database 0.23.0 → 0.24.0

package/dist/testing/fake.js

@@ -13,6 +13,7 @@ const SYSTEM_SCHEMAS = ['information_schema', 'mysql', 'performance_schema', 'sy
 const DEFAULT_ROWS_CELL_LIMIT = 1024;
 const DEFAULT_EXECUTE_LIMIT = 500;
 const DEFAULT_EXECUTE_CELL_LIMIT = 65536;
+const DEFAULT_MAX_BYTES = 8388608;
 const toTables = (database) => new Map(Object.entries(database.schemas).map(([schema, tables]) => [
     schema,
     new Map(Object.entries(tables).map(([name, table]) => [
@@ -79,12 +80,20 @@ const toCell = (value, cellLimit) => {
     return value;
 };
 const toResultColumns = (table) => table.columns.map(({ name, type, kind }) => ({ name, type, kind, source: { schema: table.schema, table: table.name, column: name } }));
-const toRowsResult = (table, rows, offset, limit, cellLimit) => ({
-    columns: toResultColumns(table),
-    rows: rows.slice(offset, offset + limit).map((row) => row.map((value) => toCell(value, cellLimit))),
-    hasMore: rows.length > offset + limit,
-    elapsedMs: 0
-});
+const toRowsResult = (table, rows, offset, limit, cellLimit, budget) => {
+    const page = [];
+    for (const row of rows.slice(offset, offset + limit)) {
+        const cells = row.map((value) => toCell(value, cellLimit));
+        // Characters rather than bytes: near enough for a fake.
+        const size = JSON.stringify(cells).length;
+        if (page.length > 0 && size > budget.left) {
+            return { columns: toResultColumns(table), rows: page, hasMore: true, elapsedMs: 0 };
+        }
+        budget.left = Math.max(0, budget.left - size);
+        page.push(cells);
+    }
+    return { columns: toResultColumns(table), rows: page, hasMore: rows.length > offset + limit, elapsedMs: 0 };
+};
 /* Evaluates the default of a column for a row an insert or an update leaves it out of. */
 const defaultOf = (column, table) => {
     if (column.autoIncrement) {
@@ -172,10 +181,10 @@ const selectedTable = (session, sql) => {
     }
     return findTable(session, session.schema ?? session.schemas.keys().next().value ?? '', name);
 };
-const runStatement = (session, sql, limit, cellLimit) => {
+const runStatement = (session, sql, limit, cellLimit, budget) => {
     try {
         const table = selectedTable(session, sql);
-        return { kind: 'rows', sql, ...toRowsResult(table, table.rows, 0, limit, cellLimit) };
+        return { kind: 'rows', sql, ...toRowsResult(table, table.rows, 0, limit, cellLimit, budget) };
     }
     catch (error) {
         if (error instanceof FakeError) {
@@ -266,9 +275,9 @@ export const fakeDatabaseTransport = (options) => {
                 ddl: table.ddl
             };
         },
-        rows: ({ session, schema, table: name, offset, limit, cellLimit }) => {
+        rows: ({ session, schema, table: name, offset, limit, cellLimit, maxBytes }) => {
             const table = findTable(sessionOf(session), schema, name);
-            return toRowsResult(table, table.rows, offset, limit, cellLimit ?? DEFAULT_ROWS_CELL_LIMIT);
+            return toRowsResult(table, table.rows, offset, limit, cellLimit ?? DEFAULT_ROWS_CELL_LIMIT, { left: maxBytes ?? DEFAULT_MAX_BYTES });
         },
         count: ({ session, schema, table: name }) => ({ count: findTable(sessionOf(session), schema, name).rows.length }),
         cell: ({ session, schema, table: name, key, column }) => {
@@ -290,15 +299,16 @@ export const fakeDatabaseTransport = (options) => {
             }
             return { affected: applyChanges(findTable(target, schema, name), changes) };
         },
-        execute: ({ session, sql, schema, limit, cellLimit }) => {
+        execute: ({ session, sql, schema, limit, cellLimit, maxBytes }) => {
             const target = sessionOf(session);
             selectSchema(target, schema);
             const results = [];
+            const budget = { left: maxBytes ?? DEFAULT_MAX_BYTES };
             for (const statement of sql
                 .split(';')
                 .map((part) => part.trim())
                 .filter((part) => part.length > 0)) {
-                const result = runStatement(target, statement, limit ?? DEFAULT_EXECUTE_LIMIT, cellLimit ?? DEFAULT_EXECUTE_CELL_LIMIT);
+                const result = runStatement(target, statement, limit ?? DEFAULT_EXECUTE_LIMIT, cellLimit ?? DEFAULT_EXECUTE_CELL_LIMIT, budget);
                 results.push(result);
                 if (result.kind === 'error') {
                     break;
@@ -306,11 +316,11 @@ export const fakeDatabaseTransport = (options) => {
             }
             return { results, inTransaction: target.inTransaction };
         },
-        page: ({ session, sql, schema, offset, limit, cellLimit }) => {
+        page: ({ session, sql, schema, offset, limit, cellLimit, maxBytes }) => {
             const target = sessionOf(session);
             selectSchema(target, schema);
             const table = selectedTable(target, sql);
-            return toRowsResult(table, table.rows, offset, limit, cellLimit ?? DEFAULT_EXECUTE_CELL_LIMIT);
+            return toRowsResult(table, table.rows, offset, limit, cellLimit ?? DEFAULT_EXECUTE_CELL_LIMIT, { left: maxBytes ?? DEFAULT_MAX_BYTES });
         },
         transaction: ({ session, action }) => {
             const target = sessionOf(session);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adecore/database",
-  "version": "0.23.0",
+  "version": "0.24.0",
   "description": "Browse, query and edit SQLite and MySQL databases: React views for the page, a host for the backend and a native helper that talks to the server.",
   "license": "FSL-1.1-MIT",
   "author": "Bas Milius",
@@ -56,25 +56,25 @@
     "helper:test": "cargo test --locked --manifest-path helper/Cargo.toml"
   },
   "dependencies": {
-    "@base-ui-components/react": "^1.0.0-rc.0",
+    "@base-ui/react": "^1.9.0",
     "clsx": "^2.1.1",
     "lucide-react": "^1.47.0"
   },
   "optionalDependencies": {
-    "@adecore/database-darwin-arm64": "0.23.0",
-    "@adecore/database-linux-arm64": "0.23.0",
-    "@adecore/database-linux-x64": "0.23.0",
-    "@adecore/database-win32-x64": "0.23.0"
+    "@adecore/database-darwin-arm64": "0.24.0",
+    "@adecore/database-linux-arm64": "0.24.0",
+    "@adecore/database-linux-x64": "0.24.0",
+    "@adecore/database-win32-x64": "0.24.0"
   },
   "peerDependencies": {
-    "@adecore/ui": "^0.23.0",
+    "@adecore/ui": "^0.24.0",
     "i18next": "^26.4.2",
     "react": "^19.3.0",
     "react-dom": "^19.3.0",
     "react-i18next": "^17.0.15"
   },
   "devDependencies": {
-    "@adecore/ui": "workspace:*",
+    "@adecore/ui": "0.24.0",
     "@happy-dom/global-registrator": "^20.14.5",
     "@types/bun": "^1.4.2",
     "@types/node": "^24.13.6",

package/src/client/client.ts

@@ -69,6 +69,8 @@ const raceAbort = <T>(promise: Promise<T>, signal: AbortSignal | undefined): Pro
 export const createDatabaseClient = (transport: DatabaseTransport, options: DatabaseClientOptions = {}): DatabaseClient => {
     const createId = options.createId ?? (() => crypto.randomUUID());
     const live = new Map<string, Map<string, ReturnType<typeof createSession>>>();
+    // Every session that opened on the helper and has not closed, also one a newer session replaced on its channel.
+    const held = new Set<ReturnType<typeof createSession>>();
     const schemaListeners = new Set<(change: SchemaChange) => void>();
 
     const channelsOf = (connectionId: string): Map<string, ReturnType<typeof createSession>> => {
@@ -93,7 +95,8 @@ export const createDatabaseClient = (transport: DatabaseTransport, options: Data
         }
     };
 
-    const send = async <M extends DatabaseMethod>(method: M, params: DatabaseParams<M>, signal?: AbortSignal): Promise<DatabaseResult<M>> => {
+    /* With `settles`, an abort sends the cancel and waits for the answer, which can still carry what ran. */
+    const send = async <M extends DatabaseMethod>(method: M, params: DatabaseParams<M>, signal?: AbortSignal, settles = false): Promise<DatabaseResult<M>> => {
         if (signal?.aborted) {
             throw cancelledError();
         }
@@ -104,8 +107,15 @@ export const createDatabaseClient = (transport: DatabaseTransport, options: Data
         return new Promise<DatabaseResult<M>>((resolve, reject) => {
             const onAbort = (): void => {
                 const cancel = { id: createId(), method: 'cancel', params: { request: id } } as DatabaseRequest;
-                new Promise((done) => done(transport(cancel))).catch(() => {});
-                reject(cancelledError());
+                const cancelling = new Promise((done) => done(transport(cancel)));
+
+                if (settles) {
+                    // Without a cancel on its way, nothing tells the request to stop, so its answer may never come.
+                    cancelling.catch(() => reject(cancelledError()));
+                } else {
+                    cancelling.catch(() => {});
+                    reject(cancelledError());
+                }
             };
 
             signal?.addEventListener('abort', onAbort, { once: true });
@@ -151,6 +161,7 @@ export const createDatabaseClient = (transport: DatabaseTransport, options: Data
             }
 
             track();
+            held.add(created);
             opening ??= send('open', { connection: connection.config })
                 .then((result) => (opened = result))
                 .finally(() => {
@@ -165,7 +176,8 @@ export const createDatabaseClient = (transport: DatabaseTransport, options: Data
             method: M,
             build: (session: string) => DatabaseParams<M>,
             requestOptions: RequestOptions | undefined,
-            retry: boolean
+            retry: boolean,
+            settles = false
         ): Promise<DatabaseResult<M>> => {
             const signal = requestOptions?.signal;
 
@@ -176,7 +188,7 @@ export const createDatabaseClient = (transport: DatabaseTransport, options: Data
             const current = await raceAbort(open(), signal);
 
             try {
-                return await send(method, build(current.session), signal);
+                return await send(method, build(current.session), signal, settles);
             } catch (error) {
                 if (!isUnknownSession(error)) {
                     throw error;
@@ -187,7 +199,7 @@ export const createDatabaseClient = (transport: DatabaseTransport, options: Data
                 }
 
                 if (retry) {
-                    return request(method, build, requestOptions, false);
+                    return request(method, build, requestOptions, false, settles);
                 }
 
                 throw error;
@@ -205,6 +217,7 @@ export const createDatabaseClient = (transport: DatabaseTransport, options: Data
                 }
             }
 
+            held.delete(created);
             const current = opened ?? (opening === null ? null : await opening.catch(() => null));
             opened = null;
 
@@ -244,7 +257,7 @@ export const createDatabaseClient = (transport: DatabaseTransport, options: Data
             },
             async execute(sql, executeOptions?: ExecuteOptions) {
                 const { signal: _signal, ...rest } = executeOptions ?? {};
-                const result = await request('execute', (id) => ({ session: id, sql, ...rest }), executeOptions, false);
+                const result = await request('execute', (id) => ({ session: id, sql, ...rest }), executeOptions, false, true);
 
                 if (result.results.some((item) => item.kind !== 'error' && changesSchema(item.sql))) {
                     notifySchemaChange({ connectionId: connection.id, ...(rest.schema === undefined ? {} : { schema: rest.schema }) });
@@ -310,14 +323,22 @@ export const createDatabaseClient = (transport: DatabaseTransport, options: Data
             return created.session;
         },
         async disconnect(connectionId) {
-            const existing = [...(live.get(connectionId)?.values() ?? [])];
+            const existing = new Set(live.get(connectionId)?.values());
+            for (const entry of held) {
+                if (entry.session.connection.id === connectionId) {
+                    existing.add(entry);
+                }
+            }
             live.delete(connectionId);
-            await Promise.all(existing.map((entry) => entry.close()));
+            await Promise.all([...existing].map((entry) => entry.close()));
         },
         async dispose() {
-            const all = [...live.values()].flatMap((channels) => [...channels.values()]);
+            const all = new Set([...live.values()].flatMap((channels) => [...channels.values()]));
+            for (const entry of held) {
+                all.add(entry);
+            }
             live.clear();
-            await Promise.all(all.map((entry) => entry.close()));
+            await Promise.all([...all].map((entry) => entry.close()));
         }
     };
 };

package/src/client/types.ts

@@ -46,18 +46,20 @@ export interface RowsQuery {
     readonly offset: number;
     readonly limit: number;
     readonly cellLimit?: number;
+    readonly maxBytes?: number;
 }
 
 export interface ExecuteOptions extends RequestOptions {
     readonly schema?: string;
     readonly limit?: number;
     readonly cellLimit?: number;
+    readonly maxBytes?: number;
 }
 
 /*
  * One open connection. It opens on its first request, and opens again when the host lost it (a helper
- * that exited); a read is then sent once more, a write or an `execute` fails with `unknown-session`,
- * since nobody can tell whether it ran.
+ * that exited, or a connection the server closed); a read is then sent once more, a write or an
+ * `execute` fails with `unknown-session`, since nobody can tell whether it ran.
  */
 export interface DatabaseSession {
     readonly connection: Connection;
@@ -69,6 +71,11 @@ export interface DatabaseSession {
     count(schema: string, table: string, where?: string, options?: RequestOptions): Promise<number>;
     cell(schema: string, table: string, key: RowKey, column: string, options?: RequestOptions): Promise<Value>;
     apply(schema: string, table: string, changes: readonly RowChange[], options?: RequestOptions): Promise<number>;
+    /*
+     * Aborting an `execute` the helper began waits for its answer: the results of what ran, ending with an
+     * `error` of code `cancelled`, and whether a transaction is open. It rejects with `cancelled` when
+     * nothing ran, or when the cancel could not be sent.
+     */
     execute(sql: string, options?: ExecuteOptions): Promise<ExecuteResult>;
     page(sql: string, query: PageQuery, options?: RequestOptions): Promise<RowsResult>;
     /* Resolves whether a transaction is open after the action. */
@@ -88,6 +95,7 @@ export interface PageQuery {
     readonly offset: number;
     readonly limit: number;
     readonly cellLimit?: number;
+    readonly maxBytes?: number;
 }
 
 export interface ExportRequest {

package/src/console/QueryConsole.tsx

@@ -58,6 +58,8 @@ type Run =
 interface PageState {
     readonly offset: number;
     readonly rows: RowsResult;
+    /* Where each page before this one started: a page the byte limit cut short holds fewer rows than `PAGE_SIZE`. */
+    readonly before: readonly number[];
 }
 
 /* Rows in the first page of a result, and in every page after it. */
@@ -282,11 +284,8 @@ export function QueryConsole({
             if (mode === 'manual' && !inTransaction) {
                 setInTransaction(await session.transaction('begin', { signal: controller.signal }));
             }
+            // A cancel that stopped the run midway still answers what ran and whether a transaction stayed open.
             const executed = await session.execute(target, { schema: activeSchema, limit: PAGE_SIZE, signal: controller.signal });
-            if (controller.signal.aborted) {
-                setRun({ status: 'cancelled' });
-                return;
-            }
             setInTransaction(executed.inTransaction);
             setTab(0);
             setPages({});
@@ -348,7 +347,7 @@ export function QueryConsole({
         }
     };
 
-    const loadPage = async (index: number, result: StatementResult, offset: number): Promise<void> => {
+    const loadPage = async (index: number, result: StatementResult, offset: number, before: readonly number[]): Promise<void> => {
         if (session === null) {
             return;
         }
@@ -358,7 +357,7 @@ export function QueryConsole({
         try {
             const rows = await session.page(result.sql, { schema: activeSchema, offset, limit: PAGE_SIZE });
             if (generation.current === mine) {
-                setPages((current) => ({ ...current, [index]: { offset, rows } }));
+                setPages((current) => ({ ...current, [index]: { offset, rows, before } }));
             }
         } catch (error) {
             notify({ tone: 'error', title: t('console.pageFailed'), description: messageOf(error) });
@@ -391,13 +390,14 @@ export function QueryConsole({
     const page = pages[index];
     const shown: StatementResult | undefined = base?.kind === 'rows' && page !== undefined ? { kind: 'rows', sql: base.sql, ...page.rows } : base;
     const offset = page?.offset ?? 0;
+    const before = page?.before ?? [];
     const pager: ResultPager | undefined =
         base?.kind === 'rows' && shown?.kind === 'rows' && engine !== undefined && isPageable(base.sql, engine) && (shown.hasMore || offset > 0)
             ? {
-                  page: offset / PAGE_SIZE + 1,
+                  page: before.length + 1,
                   loading: paging,
-                  onPrevious: () => void loadPage(index, base, Math.max(0, offset - PAGE_SIZE)),
-                  onNext: () => void loadPage(index, base, offset + PAGE_SIZE)
+                  onPrevious: () => void loadPage(index, base, before.at(-1) ?? 0, before.slice(0, -1)),
+                  onNext: () => void loadPage(index, base, offset + shown.rows.length, [...before, offset])
               }
             : undefined;
     const exportBase = files !== undefined && base?.kind === 'rows' ? base : undefined;
@@ -516,6 +516,7 @@ export function QueryConsole({
                             valuePanelOpen={panelOpen}
                             onValuePanelOpenChange={setPanelOpen}
                             keys={keys}
+                            onNotice={notify}
                             onFollowReference={
                                 act === undefined || connection === undefined
                                     ? undefined

package/src/console/SqlEditor.tsx

@@ -1,10 +1,10 @@
 import { useEffect, useImperativeHandle, useRef, type KeyboardEvent } from 'react';
 import clsx from 'clsx';
-import { isApplePlatform, matchesShortcut, TextArea } from '@adecore/ui';
+import { isApplePlatform, TextArea } from '@adecore/ui';
 import { CODE_TEXT } from '../code-text.ts';
 import { applyEdit, indentEdit, newlineEdit, outdentEdit, type TextEdit } from './editing.ts';
 import type { QueryConsoleEditorProps } from './editor-slot.ts';
-import { RUN_ALL_SHORTCUT, RUN_SHORTCUT } from './shortcuts.ts';
+import { runScopeOf } from './shortcuts.ts';
 
 /*
  * Where the SQL is typed when the app brings no editor of its own: a plain text area that fills the
@@ -46,15 +46,10 @@ export function SqlEditor({ ref, value, onValueChange, run, label, placeholder,
     };
 
     const handleKeyDown = (event: KeyboardEvent<HTMLTextAreaElement>): void => {
-        const apple = isApplePlatform();
-        if (matchesShortcut(RUN_ALL_SHORTCUT, event, apple)) {
+        const scope = runScopeOf(event, isApplePlatform());
+        if (scope !== null) {
             event.preventDefault();
-            run('all');
-            return;
-        }
-        if (matchesShortcut(RUN_SHORTCUT, event, apple)) {
-            event.preventDefault();
-            run('selection-or-statement');
+            run(scope);
             return;
         }
         if (event.nativeEvent.isComposing || event.metaKey || event.ctrlKey || event.altKey) {

package/src/console/StatementResultView.tsx

@@ -3,6 +3,7 @@ import { ArrowUpRight, ChevronLeft, ChevronRight, CircleAlert, Download, PanelRi
 import { useTranslation } from 'react-i18next';
 import { Banner, ButtonGroup, ContextMenu, Icon, IconButton, Menu, Spinner } from '@adecore/ui';
 import { formatDecimal, formatNumber } from '@adecore/ui/format';
+import type { DatabaseNotice } from '../actions.ts';
 import { DataGrid } from '../grid/DataGrid.tsx';
 import { previewValueOf } from '../grid/focused-value.ts';
 import type { FocusedCell, GridMenuContext, GridRow } from '../grid/types.ts';
@@ -45,6 +46,8 @@ export interface StatementResultViewProps {
     keys?: ResultKeys | null;
     /* Offers Go to referenced row on a cell of a foreign key, as the table view does. */
     onFollowReference?(reference: Reference): void;
+    /* A copy from the grid that kept some values cut off. */
+    onNotice?(notice: DatabaseNotice): void;
 }
 
 /* One statement's outcome: a result set in a read-only grid, a count of affected rows, or the error the server gave. */
@@ -58,7 +61,8 @@ export function StatementResultView({
     valuePanelOpen = false,
     onValuePanelOpenChange,
     keys = null,
-    onFollowReference
+    onFollowReference,
+    onNotice
 }: StatementResultViewProps) {
     const { t } = useTranslation('database');
     const [focus, setFocus] = useState<FocusedCell | null>(null);
@@ -69,6 +73,15 @@ export function StatementResultView({
     const sqlTarget = useMemo((): SqlTarget | undefined => (engine === undefined ? undefined : { engine, table: RESULT_TABLE }), [engine]);
     const elapsed = t('console.elapsed', { value: formatDecimal(result.elapsedMs) });
 
+    if (result.kind === 'error' && result.error.code === 'cancelled') {
+        return (
+            <div className="flex min-h-0 flex-1 flex-col gap-3 p-3">
+                <Banner icon={CircleAlert} tone="neutral" className="min-w-0" message={t('console.cancelled')} />
+                <p className="px-1 text-xs text-text-muted tabular-nums">{elapsed}</p>
+            </div>
+        );
+    }
+
     if (result.kind === 'error') {
         return (
             <div className="flex min-h-0 flex-1 flex-col gap-3 p-3">
@@ -149,6 +162,7 @@ export function StatementResultView({
                     onFollow={follow}
                     canFollow={(cell) => referenceAt(cell) !== null}
                     menu={referenceMenu}
+                    onNotice={onNotice}
                 />
             </ValueDock>
             <footer className="flex h-10 shrink-0 items-center gap-4 border-t border-border px-3 text-xs text-text-muted">

package/src/console/shortcuts.ts

@@ -1,4 +1,17 @@
-import { shortcut } from '@adecore/ui';
+import { matchesShortcut, shortcut, type KeyLike } from '@adecore/ui';
+import type { QueryConsoleRunScope } from './editor-slot.ts';
 
-export const RUN_SHORTCUT = shortcut('Mod+Enter');
-export const RUN_ALL_SHORTCUT = shortcut('Mod+Shift+Enter');
+/* The keys the toolbar's tooltips name, which an editor binds to its two runs. */
+export const RUN_SHORTCUT = /* @__PURE__ */ shortcut('Mod+Enter');
+export const RUN_ALL_SHORTCUT = /* @__PURE__ */ shortcut('Mod+Shift+Enter');
+
+/* The run a key event asks for, or null when it is neither run key. `apple` is the one `matchesShortcut` takes. */
+export const runScopeOf = (event: KeyLike, apple: boolean): QueryConsoleRunScope | null => {
+    if (matchesShortcut(RUN_ALL_SHORTCUT, event, apple)) {
+        return 'all';
+    }
+    if (matchesShortcut(RUN_SHORTCUT, event, apple)) {
+        return 'selection-or-statement';
+    }
+    return null;
+};

package/src/grid/DataGrid.tsx

@@ -15,6 +15,8 @@ import clsx from 'clsx';
 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 { formatNumber } from '@adecore/ui/format';
+import type { DatabaseNotice } from '../actions.ts';
 import type { EditValue, Value } from '../protocol/index.ts';
 import { assignRef } from '../assign-ref.ts';
 import type { SqlTarget } from '../sql.ts';
@@ -27,9 +29,9 @@ import type { EditMove } from './CellEditor.tsx';
 import { captureLayout, restoreLayout, sameLayout, type GridLayout } from './column-layout.ts';
 import { NO_COLUMN_SELECTION, selectColumn, shownSelection, type ColumnSelection } from './column-selection.ts';
 import { displayOrder, hideColumn, pinnedCount, showAllColumns, togglePin, type ColumnView } from './column-view.ts';
-import { COPY_FORMATS, formatCopy, type CopyFormat, type CopyInput } from './copy-formats.ts';
+import { COPY_FORMATS, formatCopy, type CopyFormat } from './copy-formats.ts';
 import { CopyAsMenu } from './CopyAsMenu.tsx';
-import { cellView, copyTextOf, isPreview, type CellView, type NumberNotation } from './display.ts';
+import { columnNotation, cellView, copyTextOf, isPreview, type CellView, type NumberNotation, type Shown } from './display.ts';
 import { draftOf, parseDraft } from './edit-value.ts';
 import { parseEnumType } from './enum-type.ts';
 import { GridHeaderCell, type HeaderActions } from './GridHeaderCell.tsx';
@@ -53,6 +55,7 @@ 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 { loadWholeCells } from './whole-cells.ts';
 
 export interface DataGridProps {
     columns: readonly GridColumn[];
@@ -66,8 +69,10 @@ export interface DataGridProps {
     onSelectedKeysChange?(keys: ReadonlySet<string>): void;
     /* A cell was edited, or set to NULL or DEFAULT from its menu. */
     onCommit?(rowKey: string, column: number, value: EditValue): void;
-    /* The whole value of a cell that is only a preview, which editing needs. Resolves `undefined` when it cannot be had, which cancels the edit. */
+    /* The whole value of a cell that is only a preview, which editing and copying need. Resolves `undefined` when it cannot be had, which cancels the edit. */
     loadValue?(rowKey: string, column: number): Promise<Value | undefined>;
+    /* A copy that kept some values cut off, which the grid has no place of its own to say. */
+    onNotice?(notice: DatabaseNotice): void;
     /* The sorted columns by name, in order. Only shown unless `onSortsChange` is given, which is what makes the headers sort. */
     sorts?: readonly GridSort[];
     onSortsChange?(sorts: readonly GridSort[]): void;
@@ -130,7 +135,7 @@ const estimateWidths = (columns: readonly GridColumn[], rows: readonly GridRow[]
     columns.map((column, index) =>
         estimateColumnWidth(
             column.name,
-            rows.slice(0, 50).map((row) => textOf(cellView(row.cells[index] ?? null, column.kind, notation))),
+            rows.slice(0, 50).map((row) => textOf(cellView(row.cells[index] ?? null, column.kind, columnNotation(column, notation)))),
             column.primaryKey === true
         )
     );
@@ -150,6 +155,7 @@ export function DataGrid({
     onSelectedKeysChange,
     onCommit,
     loadValue,
+    onNotice,
     sorts,
     onSortsChange,
     onFocusedCellChange,
@@ -454,38 +460,55 @@ export function DataGrid({
         }
     };
 
-    /* The cells of the range or of the picked columns, as the columns and rows a copy writes. */
-    const blockOf = (): CopyInput | null => {
+    /* The cells from row `top` to `bottom` in the given columns, with the whole value of every preview `loadValue` can fetch. */
+    const wholeCellsOf = async (top: number, bottom: number, indexes: readonly number[]): Promise<readonly (readonly Shown[])[]> => {
+        const shown = rows.slice(top, bottom + 1);
+        const whole = await loadWholeCells(
+            shown.map((row) => indexes.map((index) => row.cells[index] ?? null)),
+            loadValue === undefined ? undefined : (row, column) => loadValue(shown[row]!.key, indexes[column]!)
+        );
+        if (whole.previews > 0) {
+            onNotice?.({
+                tone: 'error',
+                title: t('grid.copyPreviews.title', { count: whole.previews, formatted: formatNumber(whole.previews) }),
+                description: t(whole.tooLarge ? 'grid.copyPreviews.tooLarge' : 'grid.copyPreviews.unavailable')
+            });
+        }
+        return whole.rows;
+    };
+
+    const copyAs = async (format: CopyFormat): Promise<void> => {
         if (block === null) {
-            return null;
+            return;
         }
-        return {
-            columns: block.columns.map((index) => ({ name: columns[index]!.name, kind: columns[index]!.kind })),
-            rows: rows.slice(block.top, block.bottom + 1).map((row) => block.columns.map((index) => row.cells[index] ?? null)),
-            target: sqlTarget
-        };
+        const picked = block.columns;
+        const cells = await wholeCellsOf(block.top, block.bottom, picked);
+        await copyText(
+            formatCopy(format, {
+                columns: picked.map((index) => ({ name: columns[index]!.name, kind: columns[index]!.kind })),
+                rows: cells,
+                target: sqlTarget
+            })
+        );
     };
 
-    const copyAs = (format: CopyFormat): void => {
-        const block = blockOf();
-        if (block !== null) {
-            copyText(formatCopy(format, block));
-        }
+    const copyOne = async (row: number, column: number): Promise<void> => {
+        const [cells] = await wholeCellsOf(row, row, [column]);
+        await copyText(copyTextOf(cells?.[0] ?? null));
     };
 
     /* One cell copies as it reads; a block copies as TSV, which a spreadsheet pastes into cells. */
     const copyRange = (): void => {
         if (block !== null && block.top === block.bottom && block.columns.length === 1) {
-            copyText(copyTextOf(rows[block.top]?.cells[block.columns[0]!] ?? null));
+            void copyOne(block.top, block.columns[0]!);
         } else {
-            copyAs('tsv');
+            void copyAs('tsv');
         }
     };
 
     const copyCell = (): void => {
-        const row = menuTarget === null ? undefined : rows[menuTarget.row];
-        if (row !== undefined && menuTarget?.column != null) {
-            copyText(copyTextOf(row.cells[menuTarget.column] ?? null));
+        if (menuTarget !== null && menuTarget.column !== null && rows[menuTarget.row] !== undefined) {
+            void copyOne(menuTarget.row, menuTarget.column);
         }
     };
 
@@ -610,7 +633,7 @@ export function DataGrid({
                 index,
                 fitColumnWidth(
                     column.name,
-                    rows.map((row) => textOf(cellView(row.cells[index] ?? null, column.kind, notation))),
+                    rows.map((row) => textOf(cellView(row.cells[index] ?? null, column.kind, columnNotation(column, notation)))),
                     column.primaryKey === true
                 )
             );
@@ -773,7 +796,7 @@ export function DataGrid({
                         <CopyAsMenu
                             disabled={block === null}
                             formats={sqlTarget === undefined ? COPY_FORMATS.filter((format) => format !== 'sql') : COPY_FORMATS}
-                            onCopy={copyAs}
+                            onCopy={(format) => void copyAs(format)}
                         />
                         {menuContext !== null && menuCell !== null && queryMenu !== undefined && (
                             <>

package/src/grid/GridRowView.tsx

@@ -5,7 +5,7 @@ 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 { columnNotation, 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';
@@ -88,7 +88,7 @@ export const GridRowView = memo(function GridRowView({ row, index, selected, foc
     const cells = order.map((columnIndex, position) => {
         const column = columns[columnIndex]!;
         const cell = row.cells[columnIndex] ?? null;
-        const view = cellView(cell, column.kind, notation);
+        const view = cellView(cell, column.kind, columnNotation(column, notation));
         const cellPosition = { row: index, column: columnIndex };
         const isFocused = focusedColumn === columnIndex;
         const ranged = picked.has(columnIndex) || (position >= rangeStart && position <= rangeEnd && rangeStart >= 0);

package/src/grid/RecordView.tsx

@@ -9,7 +9,7 @@ import { CODE_TEXT } from '../code-text.ts';
 import type { EditValue, Value } from '../protocol/index.ts';
 import { ValueEditor } from '../value/ValueEditor.tsx';
 import { isNumericKind } from '../sql.ts';
-import { cellView, copyTextOf, isPreview, numeralText, type NumberNotation } from './display.ts';
+import { columnNotation, 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';
@@ -313,7 +313,7 @@ export function RecordView({
                                                 ref={(node) => {
                                                     fields.current[position] = node;
                                                 }}
-                                                value={active ? editing.draft : textOf(cell, column.kind, notation, !editableField)}
+                                                value={active ? editing.draft : textOf(cell, column.kind, columnNotation(column, notation), !editableField)}
                                                 placeholder={placeholder}
                                                 readOnly={!editableField || (preview && (!active || editing.loading))}
                                                 className={clsx(CODE_TEXT, 'min-w-0 flex-1', row.state === 'deleted' && 'line-through')}