@antelopejs/dms-database 0.0.14 → 0.1.0

package/frontend-vue/app/components/DataGrid.vue

@@ -1,133 +1,163 @@
 <script setup lang="ts">
-import type { BrowserTab } from "../composables/useDataBrowserTabs";
+import {
+	CROSS_INSTANCE_VALUE,
+	DEFAULT_INSTANCE_VALUE,
+	useDataBrowserTabs,
+} from '../build/composables/useDataBrowserTabs'
+import { useDatabaseSchemas } from '../build/composables/useDatabaseSchemas'
+import {
+	GRID_PAGE_SIZES,
+	browseListQuery,
+	browseParamsKey,
+	browseSelectionQuery,
+	useDataBrowserGrid,
+} from '../build/composables/useDataBrowserGrid'
+import { onKeyStroke, useEventListener } from '@vueuse/core'
+import { parseDraft } from '../build/data/cellValues'
+import { useStagedEdits } from '../build/data/stagedEdits'
+import { useStagedSave } from '../build/data/useStagedSave'
+import type { TableSummary } from '../build/composables/useDatabaseSchemas'
+import type { BrowserTab } from '../build/composables/useDataBrowserTabs'
 import type {
 	ColumnFilterState,
 	GridColumn,
 	GridData,
-} from "../composables/useDataBrowserGrid";
-
-const BROWSE_ENDPOINT = "/api/database/browse";
-const QUERY_PATH = "/modules/database/query";
-// Browse-only synthetic columns; never editable, never persisted.
-const SYNTHETIC_FIELDS = new Set(["_instance"]);
-const DEFAULT_COLUMN_WIDTH = 192;
-// Primary key assumed when the backend reports none (e.g. MongoDB's implicit id).
-const DEFAULT_PRIMARY_KEY = "_id";
-// Debounce for the toolbar's global search input.
-const SEARCH_DEBOUNCE_MS = 300;
+} from '../build/composables/useDataBrowserGrid'
+import { DATABASE_PAGES, tableAccess } from '../build/utils/databaseLinks'
+import { type ColumnRole, isPrimaryKey } from '../build/utils/fieldTypes'
+import DataFilterBar from './DataFilterBar.vue'
+import DataGridCell from './DataGridCell.vue'
+import DataGridHeaderCell from './DataGridHeaderCell.vue'
+import JsonCellPanel from './JsonCellPanel.vue'
+import RowDrawer from './RowDrawer.vue'
+
+// The grid of one open table. Rows are read a page at a time; a committed
+// cell is staged, not written (D-02): the save bar offers a review of every
+// change before it is written, then the save and its undo for a few seconds.
+
+const BROWSE_ENDPOINT = '/api/database/browse'
+// Browse-only columns: the source instance of a cross-instance read.
+const SYNTHETIC_FIELDS = new Set(['_instance'])
+const DEFAULT_COLUMN_WIDTH = 180
+// Primary key assumed when the backend reports none (MongoDB's implicit id).
+const DEFAULT_PRIMARY_KEY = '_id'
+const SEARCH_DEBOUNCE_MS = 300
+const PAGE_WINDOW = 2
 
 interface ColumnsResponse {
-	columns: string[];
-	types: Record<string, string>;
-	primaryKey: string | null;
+	columns: string[]
+	types: Record<string, string>
+	primaryKey: string | null
 }
 
 interface ListResponse {
-	results: Record<string, unknown>[];
-	total: number;
-	offset: number;
-	limit: number;
-	primaryKey: string | null;
+	results: Record<string, unknown>[]
+	total: number
+	primaryKey: string | null
 }
 
 const props = defineProps<{
-	tab: BrowserTab;
-	// Schema-introspected field names, used when the table is empty and the
-	// backend column sampling returns nothing.
-	fallbackFields: string[];
-}>();
-
-const { t } = useI18n();
-const { $authFetch } = useAuthFetch();
-const toast = useToast();
-const router = useDmsRouter();
-const grid = useDataBrowserGrid();
-const { tabs: browserTabs, pinTab } = useDataBrowserTabs();
-
-const state = grid.getState(props.tab.id);
-const readOnly = computed(() => props.tab.instance === CROSS_INSTANCE_VALUE);
+	tab: BrowserTab
+	/** The table as introspected: its declared columns and relations. */
+	table?: TableSummary
+}>()
+
+const { t, n } = useI18n()
+const { $authFetch } = useAuthFetch()
+const router = useDmsRouter()
+const grid = useDataBrowserGrid()
+const staged = useStagedEdits()
+const { tabs: browserTabs, pinTab, openTab, replaceTab } = useDataBrowserTabs()
+const { open: openDrawer } = useDrawer()
+const { schemas } = useDatabaseSchemas()
+
+const state = grid.getState(props.tab.id)
+const readOnly = computed(() => props.tab.instance === CROSS_INSTANCE_VALUE)
 
 // --- data loading ---
-const data = ref<GridData | null>(grid.getCache(props.tab.id));
-const loading = ref(false);
-const loadError = ref<string | null>(null);
-let requestSeq = 0;
-// Column metadata only depends on the tab's selection (the component remounts
-// per tab), so it is fetched once — not on every page/sort/filter change — and
-// refreshed only by an explicit reload. `null` means not fetched or failed.
-const columnsMeta = ref<ColumnsResponse | null>(null);
+const data = ref<GridData | null>(grid.getCache(props.tab.id))
+const loading = ref(false)
+const loadError = ref<string | null>(null)
+let requestSeq = 0
+// Column metadata only depends on the tab, so it is read once per mount.
+const columnsMeta = ref<ColumnsResponse | null>(null)
+
+function columnsOf(
+	meta: ColumnsResponse | null,
+	primaryKey: string | null,
+): GridColumn[] {
+	const sampled = meta?.columns ?? []
+	const names =
+		sampled.length > 0 ? sampled : Object.keys(props.table?.fields ?? {})
+	return names.map((name) => ({
+		name,
+		type: meta?.types[name] ?? 'string',
+		isPrimaryKey: name === (primaryKey ?? DEFAULT_PRIMARY_KEY),
+	}))
+}
+
+async function fetchPage(force: boolean) {
+	const selection = browseSelectionQuery(props.tab)
+	const needColumns = force || columnsMeta.value === null
+	return Promise.all([
+		needColumns
+			? // A columns failure must not discard the rows: the grid falls back
+				// to the introspected fields.
+				$authFetch<ColumnsResponse>(`${BROWSE_ENDPOINT}/columns`, {
+					query: selection,
+				}).catch(() => null)
+			: Promise.resolve(columnsMeta.value),
+		$authFetch<ListResponse>(`${BROWSE_ENDPOINT}/list`, {
+			query: { ...selection, ...browseListQuery(state) },
+		}),
+	])
+}
 
 async function load(force = false) {
-	const key = browseParamsKey(props.tab, state);
-	const cached = grid.getCache(props.tab.id);
+	const key = browseParamsKey(props.tab, state)
+	const cached = grid.getCache(props.tab.id)
 	if (!force && cached && cached.paramsKey === key) {
-		// Restoring from cache must also retire any in-flight request (its late
-		// response would pass the seq guard and overwrite the cache with rows
-		// for parameters the user has already left) and clear transient state
-		// from a previous attempt.
-		requestSeq += 1;
-		data.value = cached;
-		loadError.value = null;
-		loading.value = false;
-		return;
+		// Retire a request in flight: its late answer would overwrite the cache
+		// with rows for parameters the user has left.
+		requestSeq += 1
+		data.value = cached
+		loadError.value = null
+		loading.value = false
+		return
 	}
-	const seq = ++requestSeq;
-	loading.value = true;
-	loadError.value = null;
+	const seq = ++requestSeq
+	loading.value = true
+	loadError.value = null
 	try {
-		const selection = browseSelectionQuery(props.tab);
-		const needColumns = force || columnsMeta.value === null;
-		const [columnsRes, listRes] = await Promise.all([
-			needColumns
-				? // A columns failure must not discard a successful rows fetch: the
-					// grid falls back to schema-introspected field names instead.
-					$authFetch<ColumnsResponse>(`${BROWSE_ENDPOINT}/columns`, {
-						query: selection,
-					}).catch(() => null)
-				: Promise.resolve(columnsMeta.value),
-			$authFetch<ListResponse>(`${BROWSE_ENDPOINT}/list`, {
-				query: { ...selection, ...browseListQuery(state) },
-			}),
-		]);
-		// Ignore a response that arrived after the params changed again.
-		if (seq !== requestSeq) return;
-		if (columnsRes) columnsMeta.value = columnsRes;
-		const meta = columnsMeta.value;
-		const primaryKey = listRes.primaryKey ?? meta?.primaryKey ?? null;
-		const sampled = meta?.columns ?? [];
-		const names = sampled.length > 0 ? sampled : props.fallbackFields;
+		const [columnsRes, listRes] = await fetchPage(force)
+		if (seq !== requestSeq) return
+		if (columnsRes) columnsMeta.value = columnsRes
+		const primaryKey =
+			listRes.primaryKey ?? columnsMeta.value?.primaryKey ?? null
 		const next: GridData = {
-			columns: names.map((name) => ({
-				name,
-				type: meta?.types[name] ?? "string",
-				isPrimaryKey: name === (primaryKey ?? DEFAULT_PRIMARY_KEY),
-			})),
+			columns: columnsOf(columnsMeta.value, primaryKey),
 			rows: listRes.results ?? [],
 			total: listRes.total ?? 0,
 			primaryKey,
 			paramsKey: key,
-		};
-		grid.setCache(props.tab.id, next);
-		data.value = next;
-		// An open positional editor whose row no longer sits at the same index
-		// must not survive a rows replacement (commit would target another row).
-		const editingCell = editing.value;
+		}
+		grid.setCache(props.tab.id, next)
+		data.value = next
 		if (
-			editingCell &&
-			rowIdOf(next.rows[editingCell.r] ?? {}) !== editingCell.rowId
+			editing.value &&
+			rowIdOf(next.rows[editing.value.r] ?? {}) !== editing.value.rowId
 		) {
-			cancelEdit();
+			cancelEdit()
 		}
-		// Clamp the page when the total shrank under the current offset (rows
-		// deleted elsewhere): correcting state.page re-triggers the watcher.
+		// Rows deleted elsewhere can leave the page past the end.
 		if (next.total > 0 && state.page * state.pageSize >= next.total) {
-			state.page = Math.max(0, Math.ceil(next.total / state.pageSize) - 1);
+			state.page = Math.max(0, Math.ceil(next.total / state.pageSize) - 1)
 		}
 	} catch (error) {
-		if (seq !== requestSeq) return;
-		loadError.value = error instanceof Error ? error.message : String(error);
+		if (seq !== requestSeq) return
+		loadError.value = error instanceof Error ? error.message : String(error)
 	} finally {
-		if (seq === requestSeq) loading.value = false;
+		if (seq === requestSeq) loading.value = false
 	}
 }
 
@@ -135,500 +165,550 @@ watch(
 	() => browseParamsKey(props.tab, state),
 	() => load(),
 	{ immediate: true },
-);
+)
 
-// An empty table cached with no columns while the schemas fetch was still in
-// flight must recover once the schema-introspected fields arrive — nothing
-// else re-triggers the load (fallbackFields is not part of the params key).
+// A table cached empty while the schemas were still loading recovers once
+// its introspected fields arrive.
 watch(
-	() => props.fallbackFields,
-	(fields) => {
-		if (
-			fields.length > 0 &&
-			(data.value?.columns.length ?? 0) === 0 &&
-			!loading.value
-		) {
-			load(true);
-		}
+	() => props.table,
+	(table) => {
+		if (table && (data.value?.columns.length ?? 0) === 0 && !loading.value)
+			load(true)
 	},
-);
+)
 
 function reload() {
-	grid.invalidate(props.tab.id);
-	load(true);
+	grid.invalidate(props.tab.id)
+	load(true)
 }
 
-const columns = computed(() => data.value?.columns ?? []);
-const rows = computed(() => data.value?.rows ?? []);
-const total = computed(() => data.value?.total ?? 0);
-const rowIdKey = computed(() => data.value?.primaryKey ?? DEFAULT_PRIMARY_KEY);
+const columns = computed(() => data.value?.columns ?? [])
+const rows = computed(() => data.value?.rows ?? [])
+const total = computed(() => data.value?.total ?? 0)
+const rowIdKey = computed(() => data.value?.primaryKey ?? DEFAULT_PRIMARY_KEY)
+const visibleColumns = computed(() =>
+	readOnly.value || !columns.value.some((column) => column.name === '_instance')
+		? columns.value
+		: columns.value.filter((column) => column.name !== '_instance'),
+)
+
+const relationFields = computed(
+	() =>
+		new Set(
+			(props.table?.relations ?? []).map((relation) => relation.fromField),
+		),
+)
+
+function roleOf(column: GridColumn): ColumnRole {
+	if (
+		column.isPrimaryKey ||
+		isPrimaryKey(column.name, props.table?.indexes ?? {})
+	)
+		return 'key'
+	return relationFields.value.has(column.name) ? 'relation' : 'plain'
+}
+
+function rowIdOf(row: Record<string, unknown>): string | null {
+	const id = row[rowIdKey.value]
+	return id === null || id === undefined ? null : String(id)
+}
 
-// --- toolbar: debounced global search ---
-const searchDraft = ref(state.search);
-let searchTimer: ReturnType<typeof setTimeout> | undefined;
+function isCellEditable(field: string, row: Record<string, unknown>): boolean {
+	if (readOnly.value || rowIdOf(row) === null) return false
+	return (
+		field !== DEFAULT_PRIMARY_KEY &&
+		field !== rowIdKey.value &&
+		!SYNTHETIC_FIELDS.has(field)
+	)
+}
+
+// --- toolbar: debounced search ---
+const searchDraft = ref(state.search)
+const searchInput = useTemplateRef<{ inputRef?: HTMLInputElement }>(
+	'searchInput',
+)
+let searchTimer: ReturnType<typeof setTimeout> | undefined
 watch(searchDraft, (value) => {
-	clearTimeout(searchTimer);
+	clearTimeout(searchTimer)
 	searchTimer = setTimeout(() => {
-		state.search = value.trim();
-		state.page = 0;
-	}, SEARCH_DEBOUNCE_MS);
-});
+		state.search = value.trim()
+		state.page = 0
+	}, SEARCH_DEBOUNCE_MS)
+})
 onBeforeUnmount(() => {
-	clearTimeout(searchTimer);
-	// Retire any in-flight browse request: its late response would otherwise
-	// setCache under this tab's id AFTER the tab was replaced/closed and
-	// grid.drop() ran — resurrecting the entry, whose paramsKey then matches a
-	// fresh default state on re-open and serves stale rows with no refetch.
-	requestSeq += 1;
-	// Flush (not drop) a pending draft so a search typed just before switching
-	// tabs survives into this tab's state.
-	const value = searchDraft.value.trim();
+	clearTimeout(searchTimer)
+	requestSeq += 1
+	const value = searchDraft.value.trim()
 	if (value !== state.search) {
-		state.search = value;
-		state.page = 0;
+		state.search = value
+		state.page = 0
 	}
-});
+})
 
-const activeFilterCount = computed(
-	() => Object.values(state.filters).filter((filter) => filter.value).length,
-);
+// --- filters, sort, widths ---
+function setFilter(name: string, filter: ColumnFilterState | null) {
+	const next = { ...state.filters }
+	if (filter) next[name] = filter
+	else Reflect.deleteProperty(next, name)
+	state.filters = next
+	state.page = 0
+}
 
 function clearFilters() {
-	state.filters = {};
-	state.page = 0;
+	state.filters = {}
+	state.page = 0
+}
+
+function clearRefinements() {
+	state.filters = {}
+	state.search = ''
+	searchDraft.value = ''
+	state.page = 0
 }
 
-// --- sorting / filtering / resize ---
 function toggleSort(name: string) {
 	if (state.sortKey !== name) {
-		state.sortKey = name;
-		state.sortDirection = "asc";
-	} else if (state.sortDirection === "asc") {
-		state.sortDirection = "desc";
+		state.sortKey = name
+		state.sortDirection = 'asc'
+	} else if (state.sortDirection === 'asc') {
+		state.sortDirection = 'desc'
 	} else {
-		state.sortKey = null;
-		state.sortDirection = "asc";
+		state.sortKey = null
+		state.sortDirection = 'asc'
 	}
-	state.page = 0;
-}
-
-function setFilter(name: string, filter: ColumnFilterState | null) {
-	const next = { ...state.filters };
-	if (filter) next[name] = filter;
-	else Reflect.deleteProperty(next, name);
-	state.filters = next;
-	state.page = 0;
+	state.page = 0
 }
 
 function widthFor(name: string): number {
-	return state.columnWidths[name] ?? DEFAULT_COLUMN_WIDTH;
+	return state.columnWidths[name] ?? DEFAULT_COLUMN_WIDTH
 }
+
 function resizeColumn(name: string, width: number) {
-	state.columnWidths = { ...state.columnWidths, [name]: width };
+	state.columnWidths = { ...state.columnWidths, [name]: width }
 }
 
 // --- pagination ---
 const pageSizeOptions = GRID_PAGE_SIZES.map((size) => ({
 	label: String(size),
 	value: size,
-}));
+}))
+const pageCount = computed(() =>
+	Math.max(1, Math.ceil(total.value / state.pageSize)),
+)
 const pageStart = computed(() =>
 	total.value === 0 ? 0 : state.page * state.pageSize + 1,
-);
+)
 const pageEnd = computed(() =>
 	Math.min(total.value, (state.page + 1) * state.pageSize),
-);
-const hasNext = computed(() => pageEnd.value < total.value);
+)
+const pages = computed(() => {
+	const last = pageCount.value - 1
+	const around = new Set([0, last])
+	for (
+		let page = state.page - PAGE_WINDOW;
+		page <= state.page + PAGE_WINDOW;
+		page += 1
+	) {
+		if (page >= 0 && page <= last) around.add(page)
+	}
+	return [...around].sort((a, b) => a - b)
+})
+
 function setPageSize(size: number) {
-	state.pageSize = size;
-	state.page = 0;
+	state.pageSize = size
+	state.page = 0
 }
 
-// --- open in query console (prefilled DSL, kept from the previous page) ---
-function schemaAccessExpr(schemaId: string): string {
-	// Dotted access for valid identifiers, bracket access otherwise — mirrors
-	// the query builder's own schema resolution.
-	return /^[A-Z_$][\w$]*$/i.test(schemaId)
-		? `schemas.${schemaId}`
-		: `schemas[${JSON.stringify(schemaId)}]`;
-}
-function instanceArgExpr(): string {
-	if (props.tab.instance === DEFAULT_INSTANCE_VALUE) return "";
-	if (props.tab.instance === CROSS_INSTANCE_VALUE) return "CROSS_INSTANCE";
-	return JSON.stringify(props.tab.instance);
-}
+// --- links out ---
 function openInQueryConsole() {
-	const source = `${schemaAccessExpr(props.tab.schema)}.instance(${instanceArgExpr()}).table(${JSON.stringify(props.tab.table)}).slice(0, 100)`;
-	router.push({ path: QUERY_PATH, query: { source } });
+	const instance =
+		props.tab.instance === DEFAULT_INSTANCE_VALUE || readOnly.value
+			? undefined
+			: props.tab.instance
+	const source = `${tableAccess({ schema: props.tab.schema, table: props.tab.table, instance })}.slice(0, 100)`
+	router.push({ path: DATABASE_PAGES.query, query: { source } })
+}
+
+const namedInstances = computed(
+	() =>
+		schemas.value.find((schema) => schema.id === props.tab.schema)?.instances ??
+		[],
+)
+
+// The tab moves to the other instance in place; a tab holding staged edits
+// keeps them, and the instance opens next to it instead.
+function switchInstance(instance: string) {
+	if (staged.count(props.tab.id) > 0) {
+		openTab(props.tab.schema, instance, props.tab.table, false)
+		return
+	}
+	replaceTab(props.tab.id, props.tab.schema, instance, props.tab.table)
 }
 
-// --- cell focus & keyboard navigation ---
-const scroller = useTemplateRef<HTMLDivElement>("scroller");
-const focused = ref<{ r: number; c: number } | null>(null);
+// --- cell focus and keyboard ---
+const scroller = useTemplateRef<HTMLDivElement>('scroller')
+const focused = ref<{ r: number; c: number } | null>(null)
 
 function focusCell(r: number, c: number) {
-	focused.value = { r, c };
+	focused.value = { r, c }
 	nextTick(() => {
 		scroller.value
 			?.querySelector(`[data-cell="${r}:${c}"]`)
-			?.scrollIntoView({ block: "nearest", inline: "nearest" });
-	});
+			?.scrollIntoView({ block: 'nearest', inline: 'nearest' })
+	})
+}
+
+const MOVES: Record<
+	string,
+	(cell: { r: number; c: number }) => { r: number; c: number }
+> = {
+	ArrowUp: ({ r, c }) => ({ r: r - 1, c }),
+	ArrowDown: ({ r, c }) => ({ r: r + 1, c }),
+	ArrowLeft: ({ r, c }) => ({ r, c: c - 1 }),
+	ArrowRight: ({ r, c }) => ({ r, c: c + 1 }),
 }
 
 function onKeydown(event: KeyboardEvent) {
-	if (editing.value || jsonPanel.value) return;
-	const current = focused.value;
-	if (!current) return;
-	const maxR = rows.value.length - 1;
-	const maxC = columns.value.length - 1;
-	let { r, c } = current;
-	switch (event.key) {
-		case "ArrowUp":
-			r -= 1;
-			break;
-		case "ArrowDown":
-			r += 1;
-			break;
-		case "ArrowLeft":
-			c -= 1;
-			break;
-		case "ArrowRight":
-			c += 1;
-			break;
-		case "Tab": {
-			// Tab past either edge releases focus to the browser (no trap): the
-			// user can reach the toolbar/footer instead of being clamped inside.
-			const nextColumn = c + (event.shiftKey ? -1 : 1);
-			if (nextColumn < 0 || nextColumn > maxC) {
-				focused.value = null;
-				return;
-			}
-			c = nextColumn;
-			break;
-		}
-		case "Enter":
-			event.preventDefault();
-			openEditorAt(current.r, current.c);
-			return;
-		case "Escape":
-			focused.value = null;
-			return;
-		default:
-			return;
+	const current = focused.value
+	if (editing.value || !current) return
+	if (event.key === 'Enter') {
+		event.preventDefault()
+		openEditorAt(current.r, current.c)
+		return
+	}
+	if (event.key === ' ') {
+		event.preventDefault()
+		openRow(current.r)
+		return
 	}
-	event.preventDefault();
-	focusCell(Math.max(0, Math.min(maxR, r)), Math.max(0, Math.min(maxC, c)));
+	if (event.key === 'Escape') {
+		focused.value = null
+		return
+	}
+	const move = MOVES[event.key]
+	if (!move) return
+	event.preventDefault()
+	const next = move(current)
+	focusCell(
+		Math.max(0, Math.min(rows.value.length - 1, next.r)),
+		Math.max(0, Math.min(visibleColumns.value.length - 1, next.c)),
+	)
 }
 
-// --- inline editing ---
-// Both editors carry the target rowId captured at open time: a mid-edit reload
-// replaces the rows array, and a stale positional index would silently write
-// into whichever row now sits at that position. r/c only locate the visual
-// cell; every write resolves the row by id at commit time.
+// --- inline editing: a commit stages the value ---
 const editing = ref<{
-	r: number;
-	c: number;
-	rowId: string | null;
-	field: string;
-} | null>(null);
-const invalidDraft = ref(false);
-const pendingCell = ref<{ rowId: string; field: string } | null>(null);
-const savingJson = ref(false);
+	r: number
+	c: number
+	rowId: string
+	field: string
+} | null>(null)
+const invalidReason = ref<string | null>(null)
 const jsonPanel = ref<{
-	rowId: string | null;
-	field: string;
-	value: unknown;
-	readOnly: boolean;
-} | null>(null);
-
-function columnAt(c: number): GridColumn | null {
-	return columns.value[c] ?? null;
+	rowId: string | null
+	field: string
+	value: unknown
+	readOnly: boolean
+} | null>(null)
+
+function stagedCell(row: Record<string, unknown>, field: string) {
+	const rowId = rowIdOf(row)
+	return rowId === null ? undefined : staged.get(props.tab.id, rowId, field)
 }
 
-function isCellEditable(field: string): boolean {
-	if (readOnly.value) return false;
-	if (field === DEFAULT_PRIMARY_KEY || field === rowIdKey.value) return false;
-	if (SYNTHETIC_FIELDS.has(field)) return false;
-	return true;
-}
-
-function rowIdOf(row: Record<string, unknown>): string | null {
-	const id = row[rowIdKey.value];
-	if (id === null || id === undefined) return null;
-	return String(id);
+function currentValue(row: Record<string, unknown>, field: string): unknown {
+	const cell = stagedCell(row, field)
+	return cell ? cell.after : row[field]
 }
 
 function openEditorAt(r: number, c: number) {
-	const column = columnAt(c);
-	const row = rows.value[r];
-	if (!column || !row) return;
-	const value = row[column.name];
-	if (value !== null && value !== undefined && typeof value === "object") {
-		// Structured cell: always viewable through the JSON panel; editable only
-		// when the field itself is writable and the row is addressable — the
-		// backend silently drops writes to protected fields, so offering a Save
-		// there would fake success.
+	const column = visibleColumns.value[c]
+	const row = rows.value[r]
+	if (!column || !row) return
+	const value = currentValue(row, column.name)
+	const rowId = rowIdOf(row)
+	if (value !== null && typeof value === 'object') {
 		jsonPanel.value = {
-			rowId: rowIdOf(row),
+			rowId,
 			field: column.name,
 			value,
-			readOnly: !isCellEditable(column.name) || rowIdOf(row) === null,
-		};
-		return;
+			readOnly: !isCellEditable(column.name, row),
+		}
+		return
 	}
-	// A row with no addressable primary key cannot be saved on any path, so
-	// refuse to open the editor instead of failing at commit time (mirrors the
-	// JSON panel's readOnly guard).
-	const rowId = rowIdOf(row);
-	if (!isCellEditable(column.name) || rowId === null) return;
-	invalidDraft.value = false;
-	editing.value = { r, c, rowId, field: column.name };
-}
-
-// Refocusing the grid after an editor closes must not steal focus from a
-// control the user has since clicked (toolbar search, another cell's editor):
-// only reclaim it when the blur left focus on the document body.
+	if (!isCellEditable(column.name, row) || rowId === null) return
+	invalidReason.value = null
+	editing.value = { r, c, rowId, field: column.name }
+}
+
 function refocusGrid() {
 	nextTick(() => {
-		if (document.activeElement === document.body) scroller.value?.focus();
-	});
+		if (document.activeElement === document.body) scroller.value?.focus()
+	})
 }
 
 function cancelEdit() {
-	editing.value = null;
-	invalidDraft.value = false;
-	refocusGrid();
-}
-
-// Shared persistence for both editors: PUT one field, then merge the echoed
-// row into the row the grid currently renders (resolved by id AFTER the await
-// — a concurrent reload may have replaced the rows array, and assigning into
-// the pre-await capture would update a detached object).
-async function persistField(rowId: string, field: string, value: unknown) {
-	const updated = await $authFetch<Record<string, unknown>>(
-		`${BROWSE_ENDPOINT}/edit`,
-		{
-			method: "PUT",
-			query: { ...browseSelectionQuery(props.tab), id: rowId },
-			body: { [field]: value },
-		},
-	);
-	const live = rows.value.find((candidate) => rowIdOf(candidate) === rowId);
-	if (live) Object.assign(live, updated);
-	// A table the user edited is "modified" in the VS Code sense: pin its
-	// preview tab so the next sidebar click doesn't silently discard it. Gate
-	// on the tab OBJECT still being open — the id is content-derived, so a
-	// slow edit whose tab was replaced then reopened would otherwise pin the
-	// fresh preview without any pin gesture.
-	if (browserTabs.value.includes(props.tab)) pinTab(props.tab.id);
-}
-
-async function commitCell(draftValue: string | boolean, source: "enter" | "blur") {
-	const cell = editing.value;
-	if (!cell) return;
-	const column = columnAt(cell.c);
-	// Resolve by the rowId captured at open time — never by position.
-	const row = cell.rowId
-		? rows.value.find((candidate) => rowIdOf(candidate) === cell.rowId)
-		: undefined;
-	if (!column || !row) {
-		cancelEdit();
-		return;
-	}
-	const before = row[column.name];
-
-	// Preserve the stored type; a NULL cell falls back to the column's sampled
-	// type so filling it can't silently flip a number/boolean column to string.
-	const targetType =
-		before === null || before === undefined ? column.type : typeof before;
-	let next: string | number | boolean;
-	if (targetType === "number") {
-		const text = typeof draftValue === "string" ? draftValue.trim() : "";
-		const parsed = Number(text);
-		if (text === "" || !Number.isFinite(parsed)) {
-			// Enter keeps the editor open to fix the draft; a blur-commit must not
-			// leave an unfocused editor behind (it would deaden grid keyboard nav),
-			// so click-away discards the invalid draft.
-			if (source === "blur") cancelEdit();
-			else invalidDraft.value = true;
-			return;
-		}
-		next = parsed;
-	} else if (targetType === "boolean") {
-		const text =
-			typeof draftValue === "string" ? draftValue.trim().toLowerCase() : draftValue;
-		if (text === true || text === "true") next = true;
-		else if (text === false || text === "false") next = false;
-		else {
-			if (source === "blur") cancelEdit();
-			else invalidDraft.value = true;
-			return;
-		}
-	} else {
-		next = String(draftValue);
-	}
+	editing.value = null
+	invalidReason.value = null
+	refocusGrid()
+}
 
-	// A double-clicked NULL cell committed untouched must stay NULL — writing
-	// "" over null on click-away would silently mutate the row.
-	if (
-		(before === null || before === undefined) &&
-		typeof next === "string" &&
-		next === ""
-	) {
-		cancelEdit();
-		return;
-	}
+function stage(rowId: string, field: string, value: unknown) {
+	const row = rows.value.find((candidate) => rowIdOf(candidate) === rowId)
+	if (!row) return
+	staged.stage(props.tab.id, { rowId, field, before: row[field], after: value })
+	// A table with staged edits is kept: the next table opened from the list
+	// must not replace it.
+	if (browserTabs.value.includes(props.tab)) pinTab(props.tab.id)
+}
 
-	// Unchanged echo: close silently, nothing to save.
-	if (before !== null && before !== undefined && String(before) === String(next)) {
-		cancelEdit();
-		return;
+function commitCell(draft: string | boolean, source: 'enter' | 'blur') {
+	const cell = editing.value
+	if (!cell) return
+	const column = visibleColumns.value[cell.c]
+	const row = rows.value.find((candidate) => rowIdOf(candidate) === cell.rowId)
+	if (!column || !row) return cancelEdit()
+	const result = parseDraft(draft, currentValue(row, column.name), column.type)
+	if (!result.ok) {
+		// Enter keeps the editor open to fix the draft; a click elsewhere drops it.
+		if (source === 'blur') return cancelEdit()
+		invalidReason.value = t(`dms_database.data.grid.invalid_${result.reason}`)
+		return
 	}
+	if (!result.unchanged) stage(cell.rowId, column.name, result.value)
+	editing.value = null
+	invalidReason.value = null
+	refocusGrid()
+}
 
-	const rowId = cell.rowId;
-	if (!rowId) {
-		toast.add({ title: t("dms_database.data.editError"), color: "error" });
-		cancelEdit();
-		return;
-	}
+function stageJson(value: unknown) {
+	const panel = jsonPanel.value
+	if (!panel || panel.readOnly || !panel.rowId) return
+	stage(panel.rowId, panel.field, value)
+	jsonPanel.value = null
+}
 
-	editing.value = null;
-	invalidDraft.value = false;
-	pendingCell.value = { rowId, field: column.name };
-	try {
-		await persistField(rowId, column.name, next);
-	} catch (error) {
-		handleEditError(error);
-	} finally {
-		pendingCell.value = null;
-		refocusGrid();
+// --- staged changes: review, save, undo ---
+const pendingCount = computed(() => staged.count(props.tab.id))
+const changedFields = computed(() => [
+	...new Set(staged.list(props.tab.id).map((change) => change.field)),
+])
+const {
+	saving,
+	review,
+	notice: saveNotice,
+	undo,
+} = useStagedSave({
+	tab: () => props.tab,
+	onSaved: reload,
+})
+
+onKeyStroke('s', (event) => {
+	if (!(event.metaKey || event.ctrlKey) || pendingCount.value === 0) return
+	event.preventDefault()
+	review()
+})
+
+// --- the row drawer ---
+function rowNavigation(index: number) {
+	return {
+		index,
+		total: rows.value.length,
+		hasPrev: index > 0,
+		hasNext: index < rows.value.length - 1,
+		prev: () => showRow(index - 1),
+		next: () => showRow(index + 1),
 	}
 }
 
-async function saveJson(value: unknown) {
-	const panel = jsonPanel.value;
-	if (!panel || panel.readOnly || !panel.rowId) return;
-	savingJson.value = true;
-	try {
-		await persistField(panel.rowId, panel.field, value);
-		jsonPanel.value = null;
-	} catch (error) {
-		handleEditError(error);
-	} finally {
-		savingJson.value = false;
+let drawer: ReturnType<typeof openDrawer> | null = null
+
+function rowDrawerOptions(index: number) {
+	const row = rows.value[index] ?? {}
+	return {
+		componentKey: `${props.tab.id}:${rowIdOf(row) ?? index}`,
+		title: t('dms_database.data.row.title', { table: props.tab.table }),
+		componentOptions: {
+			tab: props.tab,
+			row,
+			rowId: rowIdOf(row),
+			columns: visibleColumns.value,
+			table: props.table,
+			readOnly: readOnly.value,
+			navigation: rowNavigation(index),
+			onStage: stage,
+			onReview: review,
+		},
 	}
 }
 
-function handleEditError(error: unknown) {
-	const status =
-		(error as { statusCode?: number } | null)?.statusCode ??
-		(error as { status?: number } | null)?.status;
-	if (status === 404) {
-		// The row vanished under us: tell the user, drop any open editor that
-		// still points at it, and resync the page.
-		toast.add({ title: t("dms_database.data.rowVanished"), color: "warning" });
-		jsonPanel.value = null;
-		reload();
-		return;
-	}
-	const description = error instanceof Error ? error.message : undefined;
-	toast.add({
-		title: t("dms_database.data.editError"),
-		description,
-		color: "error",
-	});
+function showRow(index: number) {
+	if (index < 0 || index >= rows.value.length) return
+	drawer?.patch(rowDrawerOptions(index))
 }
 
-function isPending(row: Record<string, unknown>, field: string): boolean {
-	const pending = pendingCell.value;
-	return pending !== null && pending.field === field && rowIdOf(row) === pending.rowId;
+function openRow(index: number) {
+	if (!rows.value[index]) return
+	drawer = openDrawer({
+		direction: 'right',
+		component: RowDrawer,
+		...rowDrawerOptions(index),
+	})
+	drawer.result.finally(() => {
+		drawer = null
+	})
 }
 
-// Cross-instance unions can repeat the same primary key across instances, so
-// the instance tag joins the key to keep v-for keys unique.
+// Cross-instance unions can repeat a primary key across instances.
 function rowKey(row: Record<string, unknown>, index: number): string | number {
-	const id = rowIdOf(row);
-	if (id === null) return index;
-	return readOnly.value ? `${String(row._instance ?? "")}::${id}` : id;
+	const id = rowIdOf(row)
+	if (id === null) return index
+	return readOnly.value ? `${String(row._instance ?? '')}::${id}` : id
 }
+
+const hasRefinements = computed(
+	() =>
+		state.search !== '' ||
+		Object.values(state.filters).some((filter) => filter.value),
+)
+
+// ⌘ / (Ctrl / elsewhere) focuses the row search, as every DMS page search:
+// "/" alone belongs to the navigation search.
+useEventListener('keydown', (event: KeyboardEvent) => {
+	if (event.key === '/' && (event.metaKey || event.ctrlKey)) {
+		event.preventDefault()
+		searchInput.value?.inputRef?.focus()
+		return
+	}
+	const target = event.target as HTMLElement | null
+	if (target?.closest('input, textarea, select, [contenteditable=true]')) return
+	if (event.metaKey || event.ctrlKey || event.altKey) return
+	if (event.key === 'r' && !editing.value) reload()
+})
 </script>
 
 <template>
 	<div class="flex min-h-0 flex-1 flex-col">
-		<!-- toolbar -->
-		<div class="flex items-center gap-2 border-b border-default px-3 py-2">
+		<div
+			class="border-default flex flex-wrap items-center gap-2 border-b px-3 py-2"
+		>
+			<div class="flex items-baseline gap-2">
+				<span class="text-highlighted font-mono text-sm font-semibold">
+					{{ tab.table }}
+				</span>
+				<span class="text-dimmed font-mono text-xs tabular-nums">
+					{{ t('dms_database.data.grid.rows', { count: n(total) }, total) }}
+				</span>
+			</div>
 			<UInput
+				ref="searchInput"
 				v-model="searchDraft"
 				icon="i-ph-magnifying-glass"
-				:placeholder="t('dms_database.data.searchPlaceholder')"
 				size="sm"
 				class="w-64"
-			/>
-			<UBadge
-				v-if="activeFilterCount > 0"
-				color="primary"
-				variant="subtle"
-				class="cursor-pointer"
-				@click="clearFilters"
+				:placeholder="t('dms_database.data.grid.search')"
 			>
-				{{ t("dms_database.data.filtersActive", { count: activeFilterCount }) }} ✕
-			</UBadge>
-			<UTooltip v-if="readOnly" :text="t('dms_database.data.crossInstanceNotice')">
-				<UBadge color="warning" variant="subtle" icon="i-ph-lock">
-					{{ t("dms_database.data.readOnly") }}
-				</UBadge>
-			</UTooltip>
+				<template #trailing>
+					<UKbd value="meta" size="sm" />
+					<UKbd value="/" size="sm" />
+				</template>
+			</UInput>
 			<div class="ml-auto flex items-center gap-1.5">
-				<UButton
-					icon="i-ph-arrow-clockwise"
-					variant="ghost"
-					color="neutral"
-					size="sm"
-					:loading="loading"
-					:label="t('dms_database.data.refresh')"
-					@click="reload"
-				/>
+				<UTooltip :text="t('dms_database.data.grid.refresh')">
+					<UButton
+						icon="i-ph-arrows-clockwise"
+						color="neutral"
+						variant="ghost"
+						size="sm"
+						:loading="loading"
+						:aria-label="t('dms_database.data.grid.refresh')"
+						@click="reload"
+					/>
+				</UTooltip>
 				<UButton
 					icon="i-ph-code"
+					color="neutral"
 					variant="ghost"
-					color="info"
 					size="sm"
-					:label="t('dms_database.data.openInQuery')"
+					:label="t('dms_database.data.grid.open_query')"
 					@click="openInQueryConsole"
 				/>
 			</div>
 		</div>
 
-		<!-- grid -->
+		<DataFilterBar
+			:columns="visibleColumns"
+			:filters="state.filters"
+			@set="setFilter"
+			@clear="clearFilters"
+		/>
+
+		<div
+			v-if="readOnly"
+			class="border-default bg-warning/5 flex flex-wrap items-center gap-2 border-b px-3 py-2 text-sm"
+		>
+			<UIcon name="i-ph-lock-simple" class="text-warning size-4" />
+			<span>
+				<b>{{ t('dms_database.data.grid.read_only') }}</b>
+				<span class="text-muted ml-1">
+					{{
+						t('dms_database.data.grid.read_only_detail', { table: tab.table })
+					}}
+				</span>
+			</span>
+			<span class="ml-auto flex gap-1.5">
+				<UButton
+					v-for="instance in namedInstances"
+					:key="instance"
+					size="xs"
+					color="neutral"
+					variant="outline"
+					:label="t('dms_database.data.grid.switch_to', { instance })"
+					@click="switchInstance(instance)"
+				/>
+				<UButton
+					size="xs"
+					color="neutral"
+					variant="outline"
+					:label="
+						t('dms_database.data.grid.switch_to', {
+							instance: t('dms_database.data.scope.default'),
+						})
+					"
+					@click="switchInstance(DEFAULT_INSTANCE_VALUE)"
+				/>
+			</span>
+		</div>
+
 		<div
 			ref="scroller"
-			class="relative min-h-0 flex-1 overflow-auto outline-none"
+			class="relative min-h-0 flex-1 scroll-pl-14 scroll-pt-9 overflow-auto outline-none"
 			tabindex="0"
 			@keydown="onKeydown"
 		>
 			<table
-				v-if="columns.length > 0"
+				v-if="visibleColumns.length > 0 && rows.length > 0"
 				class="w-max min-w-full border-separate border-spacing-0"
 				style="table-layout: fixed"
 			>
 				<colgroup>
-					<col style="width: 44px">
+					<col style="width: 56px" />
 					<col
-						v-for="column in columns"
+						v-for="column in visibleColumns"
 						:key="column.name"
 						:style="{ width: `${widthFor(column.name)}px` }"
-					>
+					/>
 				</colgroup>
 				<thead class="sticky top-0 z-10">
 					<tr>
 						<th
-							class="sticky left-0 z-20 border-r border-b border-default bg-elevated"
+							class="border-default bg-elevated sticky left-0 z-20 border-b border-r"
 							scope="col"
 						/>
-						<DmsDatabaseDataGridHeaderCell
-							v-for="column in columns"
+						<DataGridHeaderCell
+							v-for="column in visibleColumns"
 							:key="column.name"
 							:column="column"
+							:role="roleOf(column)"
 							:sort-key="state.sortKey"
 							:sort-direction="state.sortDirection"
 							:filter="state.filters[column.name] ?? null"
@@ -640,96 +720,254 @@ function rowKey(row: Record<string, unknown>, index: number): string | number {
 					</tr>
 				</thead>
 				<tbody>
-					<tr v-for="(row, r) in rows" :key="rowKey(row, r)">
+					<tr v-for="(row, r) in rows" :key="rowKey(row, r)" class="group/row">
 						<td
-							class="sticky left-0 z-[5] border-r border-b border-default bg-elevated px-2 py-1 text-right font-mono text-[10.5px] tabular-nums text-dimmed"
+							class="border-default bg-elevated text-dimmed sticky left-0 z-[5] border-b border-r px-1 py-1 text-right font-mono text-[10.5px] tabular-nums"
 						>
-							{{ state.page * state.pageSize + r + 1 }}
+							<span class="group-hover/row:hidden">
+								{{ state.page * state.pageSize + r + 1 }}
+							</span>
+							<button
+								type="button"
+								class="text-muted hover:text-primary hidden w-full justify-end group-hover/row:flex"
+								:aria-label="t('dms_database.data.grid.open_row')"
+								:title="t('dms_database.data.grid.open_row')"
+								@click="openRow(r)"
+							>
+								<UIcon name="i-ph-arrows-out-simple" class="size-3.5" />
+							</button>
 						</td>
-						<DmsDatabaseDataGridCell
-							v-for="(column, c) in columns"
+						<DataGridCell
+							v-for="(column, c) in visibleColumns"
 							:key="column.name"
 							:data-cell="`${r}:${c}`"
+							:column="column.name"
 							:value="row[column.name]"
-							:editable="isCellEditable(column.name)"
+							:staged="stagedCell(row, column.name)"
+							:role="roleOf(column)"
+							:editable="isCellEditable(column.name, row)"
 							:editing="editing?.r === r && editing?.c === c"
-							:pending="isPending(row, column.name)"
-							:invalid="invalidDraft && editing?.r === r && editing?.c === c"
+							:invalid="
+								editing?.r === r && editing?.c === c
+									? (invalidReason ?? undefined)
+									: undefined
+							"
 							:focused="focused?.r === r && focused?.c === c"
 							@select="focusCell(r, c)"
 							@start-edit="openEditorAt(r, c)"
 							@commit="commitCell"
 							@cancel="cancelEdit"
-							@open-json="openEditorAt(r, c)"
 						/>
 					</tr>
 				</tbody>
 			</table>
 
+			<div v-if="loadError" class="grid h-full place-items-center p-6">
+				<DmsEmptyState
+					variant="error"
+					:title="
+						t('dms_database.data.empty.error_title', { table: tab.table })
+					"
+					:actions="[
+						{
+							label: t('dms_database.common.retry'),
+							icon: 'i-ph-arrows-clockwise',
+							color: 'neutral',
+							variant: 'outline',
+							onClick: reload,
+						},
+						{
+							label: t('dms_database.data.empty.check_connection'),
+							color: 'neutral',
+							variant: 'ghost',
+							to: DATABASE_PAGES.overview,
+						},
+					]"
+				>
+					<p class="text-muted text-sm">
+						{{ t('dms_database.data.empty.error_description') }}
+					</p>
+					<p class="text-dimmed mt-1 font-mono text-[11px]">{{ loadError }}</p>
+				</DmsEmptyState>
+			</div>
 			<div
-				v-if="columns.length === 0 && !loading"
-				class="flex h-full items-center justify-center text-sm text-muted"
+				v-else-if="!loading && rows.length === 0 && hasRefinements"
+				class="grid h-full place-items-center p-6"
 			>
-				{{ t("dms_database.data.noColumns") }}
+				<DmsEmptyState
+					variant="no-result"
+					:title="t('dms_database.data.empty.no_match_title')"
+					:description="
+						t('dms_database.data.empty.no_match_description', {
+							count: n(total),
+							table: tab.table,
+						})
+					"
+					:actions="[
+						{
+							label: t('dms_database.data.empty.clear_filters'),
+							color: 'neutral',
+							variant: 'outline',
+							onClick: clearRefinements,
+						},
+						...(readOnly
+							? []
+							: [
+									{
+										label: t('dms_database.data.empty.search_all'),
+										color: 'neutral' as const,
+										variant: 'ghost' as const,
+										onClick: () => switchInstance(CROSS_INSTANCE_VALUE),
+									},
+								]),
+					]"
+				/>
 			</div>
 			<div
-				v-else-if="rows.length === 0 && !loading && !loadError"
-				class="absolute inset-x-0 top-16 text-center text-sm text-muted"
+				v-else-if="!loading && rows.length === 0"
+				class="grid h-full place-items-center p-6"
 			>
-				{{ t("dms_database.data.noRows") }}
-			</div>
-			<div v-if="loadError" class="absolute inset-x-0 top-16 mx-auto max-w-md">
-				<UAlert color="error" icon="i-ph-warning" :description="loadError" />
+				<DmsEmptyState
+					:title="
+						t('dms_database.data.empty.no_rows_title', { table: tab.table })
+					"
+					:description="t('dms_database.data.empty.no_rows_description')"
+				/>
 			</div>
 			<div v-if="loading" class="absolute inset-x-0 top-0">
 				<UProgress size="xs" />
 			</div>
 		</div>
 
-		<!-- footer / pagination -->
 		<div
-			class="flex items-center gap-3 border-t border-default px-3 py-1.5 text-xs text-muted"
+			v-if="pendingCount > 0 || saveNotice"
+			class="border-default border-t px-3 py-2"
 		>
-			<span>{{ t("dms_database.data.rowsTotal", { count: total }) }}</span>
-			<div class="ml-auto flex items-center gap-2">
+			<DmsSaveBar
+				v-if="pendingCount > 0"
+				variant="band"
+				dirty
+				:saving="saving"
+				:changes="changedFields"
+				:save-label="t('dms_database.data.save.review', pendingCount)"
+				@discard="staged.discard(tab.id)"
+				@save="review"
+			/>
+			<div
+				v-else-if="saveNotice"
+				role="status"
+				class="flex min-h-9 items-center gap-2 text-[13px]"
+			>
+				<UIcon
+					:name="
+						saveNotice.state === 'undone'
+							? 'i-ph-arrow-counter-clockwise'
+							: 'i-ph-check-circle'
+					"
+					class="size-4 shrink-0"
+					:class="saveNotice.state === 'undone' ? 'text-muted' : 'text-success'"
+				/>
+				<span class="text-toned truncate">
+					{{
+						saveNotice.state === 'undone'
+							? t('dms_database.data.save.undone', saveNotice.changes.length)
+							: t(
+									'dms_database.data.save.saved',
+									{ scope: saveNotice.scope },
+									saveNotice.changes.length,
+								)
+					}}
+				</span>
+				<UButton
+					v-if="saveNotice.state !== 'undone'"
+					class="ms-auto"
+					:label="t('dms_database.data.save.undo')"
+					icon="i-ph-arrow-counter-clockwise"
+					color="neutral"
+					variant="outline"
+					size="lg"
+					:loading="saveNotice.state === 'undoing'"
+					@click="undo"
+				/>
+			</div>
+		</div>
+
+		<footer
+			class="border-default text-muted flex flex-wrap items-center gap-3 border-t px-3 py-1.5 text-xs"
+		>
+			<span class="tabular-nums">
+				{{ t('dms_database.data.grid.rows', { count: n(total) }, total) }}
+			</span>
+			<span class="flex items-center gap-1.5">
+				{{ t('dms_database.data.grid.page_size') }}
 				<USelect
 					:model-value="state.pageSize"
 					:items="pageSizeOptions"
 					size="xs"
 					class="w-20"
-					@update:model-value="setPageSize($event as number)"
+					@update:model-value="setPageSize(Number($event))"
 				/>
-				<span class="tabular-nums">{{ pageStart }}–{{ pageEnd }}</span>
+			</span>
+			<span class="text-dimmed hidden items-center gap-1 2xl:flex">
+				<UKbd value="enter" size="sm" />
+				{{ t('dms_database.data.grid.kbd_edit') }}
+				<UKbd value="esc" size="sm" class="ml-1.5" />
+				{{ t('dms_database.data.grid.kbd_cancel') }}
+				<UKbd value="space" size="sm" class="ml-1.5" />
+				{{ t('dms_database.data.grid.kbd_open') }}
+				<UKbd value="meta" size="sm" class="ml-1.5" />
+				<UKbd value="s" size="sm" />
+				{{ t('dms_database.data.grid.kbd_save') }}
+			</span>
+			<nav
+				class="ml-auto flex items-center gap-1"
+				:aria-label="t('dms_database.data.grid.pagination')"
+			>
+				<span class="mr-2 tabular-nums">{{ pageStart }}–{{ pageEnd }}</span>
 				<UButton
 					icon="i-ph-caret-left"
-					variant="ghost"
 					color="neutral"
+					variant="ghost"
 					size="xs"
 					:disabled="state.page === 0"
-					:aria-label="t('dms_database.data.prevPage')"
+					:aria-label="t('dms_database.data.grid.previous_page')"
 					@click="state.page -= 1"
 				/>
+				<template v-for="(page, index) in pages" :key="page">
+					<span
+						v-if="index > 0 && page - (pages[index - 1] ?? page) > 1"
+						class="text-dimmed px-1"
+					>
+						…
+					</span>
+					<UButton
+						size="xs"
+						:color="page === state.page ? 'primary' : 'neutral'"
+						:variant="page === state.page ? 'soft' : 'ghost'"
+						:label="String(page + 1)"
+						class="tabular-nums"
+						@click="state.page = page"
+					/>
+				</template>
 				<UButton
 					icon="i-ph-caret-right"
-					variant="ghost"
 					color="neutral"
+					variant="ghost"
 					size="xs"
-					:disabled="!hasNext"
-					:aria-label="t('dms_database.data.nextPage')"
+					:disabled="pageEnd >= total"
+					:aria-label="t('dms_database.data.grid.next_page')"
 					@click="state.page += 1"
 				/>
-			</div>
-		</div>
+			</nav>
+		</footer>
 
-		<!-- JSON editor panel -->
-		<DmsDatabaseJsonCellPanel
+		<JsonCellPanel
 			:open="jsonPanel !== null"
 			:column="jsonPanel?.field ?? ''"
 			:value="jsonPanel?.value"
-			:saving="savingJson"
 			:read-only="jsonPanel?.readOnly ?? true"
 			@update:open="jsonPanel = $event ? jsonPanel : null"
-			@save="saveJson"
+			@save="stageJson"
 		/>
 	</div>
 </template>