@adecore/database 0.25.9 → 0.26.1

package/dist/DatabaseProvider.js

@@ -1,18 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { use, useMemo, useState } from 'react';
-import { useTranslation } from 'react-i18next';
+import { use, useMemo } from 'react';
 import { DatabaseContext } from './client-context.js';
-import { addDatabaseResources } from './locales.js';
+import { useDatabaseResources } from './use-database-resources.js';
 /* Hands every view below it the client and the app's hooks, and adds the package's words to the i18next the app's `UIProvider` was given. Mount it inside that provider. */
 export function DatabaseProvider({ client, onAction, onNotice, storage, files, numberNotation, children }) {
-    const { i18n } = useTranslation();
+    useDatabaseResources();
     const outer = use(DatabaseContext);
-    const [added, setAdded] = useState(null);
-    // In render, as `UIProvider` does, so the first view already reads its words.
-    if (added !== i18n) {
-        addDatabaseResources(i18n);
-        setAdded(i18n);
-    }
     const ownClient = client ?? outer?.client;
     const ownAction = onAction ?? outer?.onAction;
     const ownNotice = onNotice ?? outer?.onNotice;

package/dist/grid/DataGrid.js

@@ -8,6 +8,7 @@ import { formatNumber } from '@adecore/ui/format';
 import { assignRef } from '../assign-ref.js';
 import { useNumberNotation } from '../client-context.js';
 import { usePopupPress } from '../use-popup-press.js';
+import { useDatabaseResources } from '../use-database-resources.js';
 import { useStableCallback } from '../use-stable-callback.js';
 import { fullRect, rectBetween, rectContains } from './cell-range.js';
 import { captureLayout, restoreLayout, sameLayout } from './column-layout.js';
@@ -32,12 +33,15 @@ const signatureOf = (columns) => columns.map((column) => column.name).join('\u00
 const textOf = (view) => (view.suffix === undefined ? view.text : `${view.text} ${view.suffix}`);
 const estimateWidths = (columns, rows, notation) => columns.map((column, index) => estimateColumnWidth(column.name, rows.slice(0, 50).map((row) => textOf(cellView(row.cells[index] ?? null, column.kind, columnNotation(column, notation)))), column.primaryKey === true));
 /*
- * The table of the table view and of the console. Only the rows in view are drawn, at a fixed
+ * The table of the table view and of the console, and of any rows an app has on its own: it needs no
+ * `DatabaseProvider`, only the `UIProvider` of `@adecore/ui`. Only the rows in view are drawn, at a fixed
  * height, inside a box as tall as all of them; the header and the row-number gutter stick to the edges
  * of the scroll box. Focus stays on that box and points at the cell with `aria-activedescendant`, so
  * a cell scrolled out of the window loses nothing.
  */
 export function DataGrid({ columns, rows, label, editable = false, selectedKeys, onSelectedKeysChange, onCommit, loadValue, onNotice, sorts, onSortsChange, onFocusedCellChange, onDeleteSelected, sqlTarget, queryMenu, menu, onDuplicateRows, onFollow, canFollow, onRangeChange, initialLayout, onLayoutChange, focusRequest, columnRequest, empty, className, ref }) {
+    // A grid drawn without a `DatabaseProvider`, such as one over the rows of a file, still reads its words.
+    useDatabaseResources();
     const { t } = useTranslation('database');
     const gridId = useId();
     const scroller = useRef(null);
@@ -520,5 +524,5 @@ export function DataGrid({ columns, rows, label, editable = false, selectedKeys,
             rowKeys: selection.has(menuRow.key) ? rows.filter((row) => selection.has(row.key)).map((row) => row.key) : [menuRow.key],
             cell: menuTarget.column === null ? null : { rowKey: menuRow.key, column: menuTarget.column }
         };
-    return (_jsx("div", { ref: attach, role: "grid", "aria-label": label, "aria-rowcount": rows.length + 1, "aria-colcount": order.length + 1, "aria-activedescendant": pickedColumns.length > 0 ? headerId(pickedColumns[0]) : focusCell === null ? undefined : cellId(focusCell.row, focusCell.column), tabIndex: 0, className: clsx('group/grid relative min-h-0 flex-1 overflow-auto bg-surface text-text outline-none', className), onKeyDown: handleKeyDown, onScroll: (event) => setScrolledBlock(scrollBlock(event.currentTarget.scrollTop - HEADER_HEIGHT)), children: _jsxs("div", { className: "relative min-w-full", style: { width: totalWidth }, children: [_jsxs("div", { role: "row", "aria-rowindex": 1, className: "sticky top-0 z-20 flex w-full border-b border-border bg-surface", style: { height: HEADER_HEIGHT }, children: [_jsxs("div", { className: PINNED_GROUP, children: [_jsx("div", { className: "shrink-0 border-r border-border bg-surface bg-clip-border", style: { width: gutter } }), headerCells.slice(0, pinnedShown)] }), headerCells.slice(pinnedShown)] }), _jsxs(ContextMenu.Root, { children: [_jsx(ContextMenu.Trigger, { role: "rowgroup", className: "relative", style: { height: rows.length * ROW_HEIGHT }, children: Array.from({ length: range.end - range.start }, (_, offset) => renderRow(range.start + offset)) }), _jsxs(ContextMenu.Popup, { children: [_jsxs(ContextMenu.Item, { disabled: menuCell === null, onClick: copyCell, children: [_jsx(Icon, { icon: Copy, size: 14 }), t('grid.copyValue'), _jsx(Kbd, { shortcut: EDIT_SHORTCUTS.copy })] }), _jsx(CopyAsMenu, { disabled: block === null, formats: sqlTarget === undefined ? COPY_FORMATS.filter((format) => format !== 'sql') : COPY_FORMATS, onCopy: (format) => void copyAs(format) }), menuContext !== null && menuCell !== null && queryMenu !== undefined && (_jsxs(_Fragment, { children: [_jsx(ContextMenu.Separator, {}), queryMenu(menuContext)] })), _jsx(ContextMenu.Separator, {}), editable && menuCell !== null && (_jsxs(_Fragment, { children: [_jsxs(ContextMenu.Item, { disabled: !settable || !nullable, onClick: () => commitValue(null), children: [_jsx(Icon, { icon: Ban, size: 14 }), t('grid.setNull')] }), hasDefault && (_jsxs(ContextMenu.Item, { disabled: !settable, onClick: () => commitValue({ kind: 'default' }), children: [_jsx(Icon, { icon: RotateCcw, size: 14 }), t('grid.setDefault')] }))] })), menuContext !== null && menu?.(menuContext)] })] }), rows.length === 0 && empty !== undefined && _jsx("div", { className: "sticky left-0 w-fit px-4 py-6 text-xs text-text-muted", children: empty })] }) }));
+    return (_jsx("div", { ref: attach, role: "grid", "aria-label": label, "aria-rowcount": rows.length + 1, "aria-colcount": order.length + 1, "aria-activedescendant": pickedColumns.length > 0 ? headerId(pickedColumns[0]) : focusCell === null ? undefined : cellId(focusCell.row, focusCell.column), tabIndex: 0, className: clsx('group/grid relative min-h-0 flex-1 overflow-auto bg-surface text-text outline-none', className), onKeyDown: handleKeyDown, onScroll: (event) => setScrolledBlock(scrollBlock(event.currentTarget.scrollTop - HEADER_HEIGHT)), children: _jsxs("div", { className: "relative min-w-full", style: { width: totalWidth }, children: [_jsxs("div", { role: "row", "aria-rowindex": 1, className: "sticky top-0 z-20 flex w-full border-b border-border bg-surface", style: { height: HEADER_HEIGHT }, children: [_jsxs("div", { className: PINNED_GROUP, children: [_jsx("div", { className: "shrink-0 border-r border-border bg-surface bg-clip-border", style: { width: gutter } }), headerCells.slice(0, pinnedShown)] }), headerCells.slice(pinnedShown)] }), _jsxs(ContextMenu.Root, { children: [_jsx(ContextMenu.Trigger, { role: "rowgroup", className: "relative", style: { height: rows.length * ROW_HEIGHT }, children: Array.from({ length: range.end - range.start }, (_, offset) => renderRow(range.start + offset)) }), _jsxs(ContextMenu.Popup, { children: [_jsxs(ContextMenu.Item, { disabled: menuCell === null, onClick: copyCell, children: [_jsx(Icon, { icon: Copy, size: 14 }), t('grid.copyValue'), _jsx(Kbd, { shortcut: EDIT_SHORTCUTS.copy })] }), _jsx(CopyAsMenu, { disabled: block === null, formats: sqlTarget === undefined ? COPY_FORMATS.filter((format) => format !== 'sql') : COPY_FORMATS, onCopy: (format) => void copyAs(format) }), menuContext !== null && menuCell !== null && queryMenu !== undefined && (_jsxs(_Fragment, { children: [_jsx(ContextMenu.Separator, {}), queryMenu(menuContext)] })), _jsx(ContextMenu.Separator, {}), editable && menuCell !== null && (_jsxs(_Fragment, { children: [_jsxs(ContextMenu.Item, { disabled: !settable || !nullable, onClick: () => commitValue(null), children: [_jsx(Icon, { icon: Ban, size: 14 }), t('grid.setNull')] }), hasDefault && (_jsxs(ContextMenu.Item, { disabled: !settable, onClick: () => commitValue({ kind: 'default' }), children: [_jsx(Icon, { icon: RotateCcw, size: 14 }), t('grid.setDefault')] }))] })), _jsx(ContextMenu.Separator, {}), menuContext !== null && menu?.(menuContext)] })] }), rows.length === 0 && empty !== undefined && _jsx("div", { className: "sticky left-0 w-fit px-4 py-6 text-xs text-text-muted", children: empty })] }) }));
 }

package/dist/index.d.ts

@@ -1,5 +1,7 @@
 export { createDatabaseClient, DatabaseRequestError, type Connection, type DatabaseClient, type DatabaseClientOptions, type DatabaseSession, type DatabaseTransport, type ExecuteOptions, type ExecuteResult, type ExportRequest, type ExportResult, type ImportRequest, type PageQuery, type RequestOptions, type RowsQuery, type SchemaChange, type TableRef } from './client/index.ts';
 export type { DatabaseAction, DatabaseFiles, DatabaseNotice, DatabaseStorage, ExplorerSelection } from './actions.ts';
+export type { Cell, Value, ValueKind } from './protocol/index.ts';
+export type { SortDirection } from './sql.ts';
 export { ConnectionForm, type ConnectionFormProps } from './connections/ConnectionForm.tsx';
 export { isValidConfig, type ConfigProblem, type ConfigProblems } from './connections/connection-config.ts';
 export { ConnectionManager, type ConnectionManagerProps } from './connections/ConnectionManager.tsx';
@@ -9,7 +11,11 @@ export type { ExplorerFolder, ExplorerItem } from './explorer/folders.ts';
 export { TableDesigner, type TableDesignerProps } from './designer/TableDesigner.tsx';
 export { DatabaseProvider, type DatabaseProviderProps } from './DatabaseProvider.tsx';
 export { useDatabaseClient } from './client-context.ts';
+export { DataGrid, type DataGridProps } from './grid/DataGrid.tsx';
+export type { GridLayout } from './grid/column-layout.ts';
 export type { NumberNotation } from './grid/display.ts';
+export type { GridSort } from './grid/sort.ts';
+export type { FocusedCell, GridColumn, GridMenuContext, GridRow, GridRowState } from './grid/types.ts';
 export { QueryConsole, type QueryConsoleProps } from './console/QueryConsole.tsx';
 export type { QueryConsoleEditorHandle, QueryConsoleEditorProps, QueryConsoleRunScope } from './console/editor-slot.ts';
 export { runScopeOf } from './console/shortcuts.ts';

package/dist/index.js

@@ -8,6 +8,7 @@ export { DatabaseExplorer } from './explorer/DatabaseExplorer.js';
 export { TableDesigner } from './designer/TableDesigner.js';
 export { DatabaseProvider } from './DatabaseProvider.js';
 export { useDatabaseClient } from './client-context.js';
+export { DataGrid } from './grid/DataGrid.js';
 export { QueryConsole } from './console/QueryConsole.js';
 export { runScopeOf } from './console/shortcuts.js';
 export { StructureView } from './structure/StructureView.js';

package/dist/locales/en.js

@@ -148,13 +148,13 @@ export default {
         editConnection: 'Edit connection',
         copyDdl: 'Copy DDL',
         rename: {
-            action: 'Rename',
+            action: 'Rename…',
             title: 'Rename "{{name}}"',
             field: 'New name',
             confirm: 'Rename'
         },
         truncate: {
-            action: 'Truncate',
+            action: 'Truncate…',
             title: 'Truncate "{{name}}"?',
             description: 'Deletes every row in "{{name}}". This cannot be undone.',
             confirm: 'Truncate'
@@ -163,13 +163,13 @@ export default {
             field: 'Type "{{name}}" to confirm',
             mismatch: 'The name does not match.',
             table: {
-                action: 'Drop',
+                action: 'Drop…',
                 title: 'Drop "{{name}}"?',
                 description: 'Deletes the table and every row in it. This cannot be undone.',
                 confirm: 'Drop table'
             },
             view: {
-                action: 'Drop view',
+                action: 'Drop view…',
                 title: 'Drop "{{name}}"?',
                 description: 'Deletes the view. The tables behind it are not touched.',
                 confirm: 'Drop view'

package/dist/locales/nl.js

@@ -148,13 +148,13 @@ export default {
         editConnection: 'Verbinding bewerken',
         copyDdl: 'DDL kopiëren',
         rename: {
-            action: 'Hernoemen',
+            action: 'Hernoemen…',
             title: '"{{name}}" hernoemen',
             field: 'Nieuwe naam',
             confirm: 'Hernoemen'
         },
         truncate: {
-            action: 'Leegmaken',
+            action: 'Leegmaken…',
             title: '"{{name}}" leegmaken?',
             description: 'Verwijdert elke rij in "{{name}}". Dit kan niet ongedaan worden gemaakt.',
             confirm: 'Leegmaken'
@@ -163,13 +163,13 @@ export default {
             field: 'Typ "{{name}}" om te bevestigen',
             mismatch: 'De naam komt niet overeen.',
             table: {
-                action: 'Verwijderen',
+                action: 'Verwijderen…',
                 title: '"{{name}}" verwijderen?',
                 description: 'Verwijdert de tabel en elke rij erin. Dit kan niet ongedaan worden gemaakt.',
                 confirm: 'Tabel verwijderen'
             },
             view: {
-                action: 'View verwijderen',
+                action: 'View verwijderen…',
                 title: '"{{name}}" verwijderen?',
                 description: 'Verwijdert de view. De tabellen erachter blijven ongemoeid.',
                 confirm: 'View verwijderen'

package/dist/use-database-resources.d.ts

@@ -0,0 +1 @@
+export declare function useDatabaseResources(): void;

package/dist/use-database-resources.js

@@ -0,0 +1,12 @@
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { addDatabaseResources } from './locales.js';
+/* Adds the package's words to the i18next the app's `UIProvider` was given. In render, as `UIProvider` does, so the first view already reads them. */
+export function useDatabaseResources() {
+    const { i18n } = useTranslation();
+    const [added, setAdded] = useState(null);
+    if (added !== i18n) {
+        addDatabaseResources(i18n);
+        setAdded(i18n);
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adecore/database",
-  "version": "0.25.9",
+  "version": "0.26.1",
   "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",
@@ -61,20 +61,20 @@
     "lucide-react": "^1.47.0"
   },
   "optionalDependencies": {
-    "@adecore/database-darwin-arm64": "0.25.9",
-    "@adecore/database-linux-arm64": "0.25.9",
-    "@adecore/database-linux-x64": "0.25.9",
-    "@adecore/database-win32-x64": "0.25.9"
+    "@adecore/database-darwin-arm64": "0.26.1",
+    "@adecore/database-linux-arm64": "0.26.1",
+    "@adecore/database-linux-x64": "0.26.1",
+    "@adecore/database-win32-x64": "0.26.1"
   },
   "peerDependencies": {
-    "@adecore/ui": "^0.25.9",
+    "@adecore/ui": "^0.26.1",
     "i18next": "^26.4.2",
     "react": "^19.3.0",
     "react-dom": "^19.3.0",
     "react-i18next": "^17.0.15"
   },
   "devDependencies": {
-    "@adecore/ui": "0.25.9",
+    "@adecore/ui": "0.26.1",
     "@happy-dom/global-registrator": "^20.14.5",
     "@types/bun": "^1.4.2",
     "@types/node": "^24.13.6",

package/src/DatabaseProvider.tsx

@@ -1,10 +1,9 @@
-import { use, useMemo, useState, type ReactNode } from 'react';
-import { useTranslation } from 'react-i18next';
+import { use, useMemo, type ReactNode } from 'react';
 import type { DatabaseAction, DatabaseFiles, DatabaseNotice, DatabaseStorage } from './actions.ts';
 import type { DatabaseClient } from './client/types.ts';
 import { DatabaseContext } from './client-context.ts';
 import type { NumberNotation } from './grid/display.ts';
-import { addDatabaseResources } from './locales.ts';
+import { useDatabaseResources } from './use-database-resources.ts';
 
 export interface DatabaseProviderProps {
     /* Required on the outermost provider. A provider inside another takes every prop it leaves out from the one above. */
@@ -26,14 +25,8 @@ export interface DatabaseProviderProps {
 
 /* Hands every view below it the client and the app's hooks, and adds the package's words to the i18next the app's `UIProvider` was given. Mount it inside that provider. */
 export function DatabaseProvider({ client, onAction, onNotice, storage, files, numberNotation, children }: DatabaseProviderProps) {
-    const { i18n } = useTranslation();
+    useDatabaseResources();
     const outer = use(DatabaseContext);
-    const [added, setAdded] = useState<typeof i18n | null>(null);
-    // In render, as `UIProvider` does, so the first view already reads its words.
-    if (added !== i18n) {
-        addDatabaseResources(i18n);
-        setAdded(i18n);
-    }
 
     const ownClient = client ?? outer?.client;
     const ownAction = onAction ?? outer?.onAction;

package/src/grid/DataGrid.tsx

@@ -22,6 +22,7 @@ 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 { useDatabaseResources } from '../use-database-resources.ts';
 import { useStableCallback } from '../use-stable-callback.ts';
 import type { RangeBlock } from './aggregates.ts';
 import { fullRect, rectBetween, rectContains } from './cell-range.ts';
@@ -75,6 +76,7 @@ export interface DataGridProps {
     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[];
+    /* A header's menu picked a sort. The grid draws `rows` in the order given, so the handler orders them and passes `sorts` back. */
     onSortsChange?(sorts: readonly GridSort[]): void;
     /* The cell that holds the focus changed, or lost it. */
     onFocusedCellChange?(cell: FocusedCell | null): void;
@@ -141,7 +143,8 @@ const estimateWidths = (columns: readonly GridColumn[], rows: readonly GridRow[]
     );
 
 /*
- * The table of the table view and of the console. Only the rows in view are drawn, at a fixed
+ * The table of the table view and of the console, and of any rows an app has on its own: it needs no
+ * `DatabaseProvider`, only the `UIProvider` of `@adecore/ui`. Only the rows in view are drawn, at a fixed
  * height, inside a box as tall as all of them; the header and the row-number gutter stick to the edges
  * of the scroll box. Focus stays on that box and points at the cell with `aria-activedescendant`, so
  * a cell scrolled out of the window loses nothing.
@@ -175,6 +178,8 @@ export function DataGrid({
     className,
     ref
 }: DataGridProps) {
+    // A grid drawn without a `DatabaseProvider`, such as one over the rows of a file, still reads its words.
+    useDatabaseResources();
     const { t } = useTranslation('database');
     const gridId = useId();
     const scroller = useRef<HTMLDivElement | null>(null);
@@ -819,6 +824,7 @@ export function DataGrid({
                                 )}
                             </>
                         )}
+                        <ContextMenu.Separator />
                         {menuContext !== null && menu?.(menuContext)}
                     </ContextMenu.Popup>
                 </ContextMenu.Root>

package/src/grid/types.ts

@@ -23,6 +23,7 @@ export interface GridRow {
     readonly key: string;
     /* The number in the gutter; `null` for a row that does not exist yet. */
     readonly number: number | null;
+    /* One per column, in the order of the columns. A `null` draws as a faint NULL, so an empty text is `''`. */
     readonly cells: readonly Shown[];
     readonly state?: GridRowState;
     /* Indexes of the cells with a pending edit. */

package/src/index.ts

@@ -21,6 +21,8 @@ export {
 } from './client/index.ts';
 
 export type { DatabaseAction, DatabaseFiles, DatabaseNotice, DatabaseStorage, ExplorerSelection } from './actions.ts';
+export type { Cell, Value, ValueKind } from './protocol/index.ts';
+export type { SortDirection } from './sql.ts';
 
 export { ConnectionForm, type ConnectionFormProps } from './connections/ConnectionForm.tsx';
 export { isValidConfig, type ConfigProblem, type ConfigProblems } from './connections/connection-config.ts';
@@ -31,7 +33,11 @@ export type { ExplorerFolder, ExplorerItem } from './explorer/folders.ts';
 export { TableDesigner, type TableDesignerProps } from './designer/TableDesigner.tsx';
 export { DatabaseProvider, type DatabaseProviderProps } from './DatabaseProvider.tsx';
 export { useDatabaseClient } from './client-context.ts';
+export { DataGrid, type DataGridProps } from './grid/DataGrid.tsx';
+export type { GridLayout } from './grid/column-layout.ts';
 export type { NumberNotation } from './grid/display.ts';
+export type { GridSort } from './grid/sort.ts';
+export type { FocusedCell, GridColumn, GridMenuContext, GridRow, GridRowState } from './grid/types.ts';
 export { QueryConsole, type QueryConsoleProps } from './console/QueryConsole.tsx';
 export type { QueryConsoleEditorHandle, QueryConsoleEditorProps, QueryConsoleRunScope } from './console/editor-slot.ts';
 export { runScopeOf } from './console/shortcuts.ts';

package/src/locales/en.ts

@@ -148,13 +148,13 @@ export default {
         editConnection: 'Edit connection',
         copyDdl: 'Copy DDL',
         rename: {
-            action: 'Rename',
+            action: 'Rename…',
             title: 'Rename "{{name}}"',
             field: 'New name',
             confirm: 'Rename'
         },
         truncate: {
-            action: 'Truncate',
+            action: 'Truncate…',
             title: 'Truncate "{{name}}"?',
             description: 'Deletes every row in "{{name}}". This cannot be undone.',
             confirm: 'Truncate'
@@ -163,13 +163,13 @@ export default {
             field: 'Type "{{name}}" to confirm',
             mismatch: 'The name does not match.',
             table: {
-                action: 'Drop',
+                action: 'Drop…',
                 title: 'Drop "{{name}}"?',
                 description: 'Deletes the table and every row in it. This cannot be undone.',
                 confirm: 'Drop table'
             },
             view: {
-                action: 'Drop view',
+                action: 'Drop view…',
                 title: 'Drop "{{name}}"?',
                 description: 'Deletes the view. The tables behind it are not touched.',
                 confirm: 'Drop view'

package/src/locales/nl.ts

@@ -148,13 +148,13 @@ export default {
         editConnection: 'Verbinding bewerken',
         copyDdl: 'DDL kopiëren',
         rename: {
-            action: 'Hernoemen',
+            action: 'Hernoemen…',
             title: '"{{name}}" hernoemen',
             field: 'Nieuwe naam',
             confirm: 'Hernoemen'
         },
         truncate: {
-            action: 'Leegmaken',
+            action: 'Leegmaken…',
             title: '"{{name}}" leegmaken?',
             description: 'Verwijdert elke rij in "{{name}}". Dit kan niet ongedaan worden gemaakt.',
             confirm: 'Leegmaken'
@@ -163,13 +163,13 @@ export default {
             field: 'Typ "{{name}}" om te bevestigen',
             mismatch: 'De naam komt niet overeen.',
             table: {
-                action: 'Verwijderen',
+                action: 'Verwijderen…',
                 title: '"{{name}}" verwijderen?',
                 description: 'Verwijdert de tabel en elke rij erin. Dit kan niet ongedaan worden gemaakt.',
                 confirm: 'Tabel verwijderen'
             },
             view: {
-                action: 'View verwijderen',
+                action: 'View verwijderen…',
                 title: '"{{name}}" verwijderen?',
                 description: 'Verwijdert de view. De tabellen erachter blijven ongemoeid.',
                 confirm: 'View verwijderen'

package/src/use-database-resources.ts

@@ -0,0 +1,14 @@
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import type { i18n as I18n } from 'i18next';
+import { addDatabaseResources } from './locales.ts';
+
+/* Adds the package's words to the i18next the app's `UIProvider` was given. In render, as `UIProvider` does, so the first view already reads them. */
+export function useDatabaseResources(): void {
+    const { i18n } = useTranslation();
+    const [added, setAdded] = useState<I18n | null>(null);
+    if (added !== i18n) {
+        addDatabaseResources(i18n);
+        setAdded(i18n);
+    }
+}