@protobase/ui 0.19.15 → 0.19.16

package/dist/app/related-dots/related-dots.js

@@ -7,21 +7,24 @@ import { displayRow } from "../displays/list-displays.js";
 import { AppLink } from "../use-app-address.js";
 import { toneFor } from "../../live/columns-from-model.js";
 import { valueColor } from "../../live/value-color.js";
-import { RecordCard } from "../displays/record-card.js";
-import { dotCard } from "./dot-card.js";
 import { placeCard } from "./card-place.js";
+import { dotCard } from "./dot-card.js";
 import { dotsSummary } from "./dots-summary.js";
 import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { createPortal } from "react-dom";
 //#region src/app/related-dots/related-dots.tsx
+/** A dot's box and its mark, which a card's room for its dots (`DotsRoom`) takes the size of. */
+const dotBox = "flex shrink-0 items-center justify-center rounded-full p-0.5 pointer-coarse:p-1.5";
+const dotMark = "size-2.5 rounded-full";
+const dotsLine = "flex min-w-0 items-center gap-0.5";
 const hideMs = 150;
 const cardWidth = 288;
 /**
 * The card of the dot that is hovered, focused or tapped, portalled to the body: every grid row is its own stacking
 * context and the grid body clips, so a card inside the row would sit under the rows below it.
 */
-const DotCardPopover = ({ shown, row, target, view, column, onEnter, onLeave }) => {
+const DotCardPopover = ({ shown, row, target, view, column, Card, onEnter, onLeave }) => {
 	const card = useRef(null);
 	const [place, setPlace] = useState();
 	useLayoutEffect(() => {
@@ -48,7 +51,7 @@ const DotCardPopover = ({ shown, row, target, view, column, onEnter, onLeave })
 			}
 		},
 		className: "fixed z-50 rounded-lg shadow-pop",
-		children: /* @__PURE__ */ jsx(RecordCard, {
+		children: /* @__PURE__ */ jsx(Card, {
 			model: target,
 			view,
 			display: dotCard(view, column.status),
@@ -61,7 +64,7 @@ const DotCardPopover = ({ shown, row, target, view, column, onEnter, onLeave })
 * or focusing a dot shows the record's card; on a touch screen the first tap shows it, and the card opens the record.
 * The dots say how many records have each status to a screen reader.
 */
-const RelatedDots = ({ column, records, target, view }) => {
+const RelatedDots = ({ column, records, target, view, wrap = false, Card }) => {
 	const rows = useMemo(() => records.map((record) => displayRow(target, record)), [records, target]);
 	const [shown, setShown] = useState();
 	const hideTimer = useRef(void 0);
@@ -123,7 +126,7 @@ const RelatedDots = ({ column, records, target, view }) => {
 	const shownRow = shown && rows.find((row) => row.key === shown.key);
 	return /* @__PURE__ */ jsxs("div", {
 		ref: box,
-		className: "flex min-w-0 items-center gap-0.5",
+		className: cn(dotsLine, wrap && "pointer-events-none flex-wrap"),
 		onClick: (event) => event.stopPropagation(),
 		onPointerDown: (event) => pointer.current = event.pointerType,
 		children: [
@@ -146,11 +149,11 @@ const RelatedDots = ({ column, records, target, view }) => {
 					onFocus: (event) => event.currentTarget.matches(":focus-visible") && show(row.key, event.currentTarget),
 					onBlur: blur,
 					onClick: tap(row.key),
-					className: "flex shrink-0 items-center justify-center rounded-full p-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 pointer-coarse:p-1.5",
+					className: cn(dotBox, "pointer-events-auto focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40"),
 					children: /* @__PURE__ */ jsx("span", {
 						"aria-hidden": true,
 						style: color === void 0 ? void 0 : { backgroundColor: color },
-						className: cn("size-2.5 rounded-full", color === void 0 && toneDots[toneFor(String(value))], shown?.key === row.key && "ring-2 ring-foreground/30")
+						className: cn(dotMark, color === void 0 && toneDots[toneFor(String(value))], shown?.key === row.key && "ring-2 ring-foreground/30")
 					})
 				}, row.key);
 			}),
@@ -160,11 +163,21 @@ const RelatedDots = ({ column, records, target, view }) => {
 				target,
 				view,
 				column,
+				Card,
 				onEnter: cancelHide,
 				onLeave: hideSoon
 			})
 		]
 	});
 };
+/** Room for `count` dots that wrap as `RelatedDots` with `wrap` does, for a card to hold the dots drawn over it. */
+const DotsRoom = ({ count }) => /* @__PURE__ */ jsx("span", {
+	"aria-hidden": true,
+	className: cn(dotsLine, "invisible flex-wrap"),
+	children: Array.from({ length: count }, (_, index) => /* @__PURE__ */ jsx("span", {
+		className: dotBox,
+		children: /* @__PURE__ */ jsx("span", { className: dotMark })
+	}, index))
+});
 //#endregion
-export { RelatedDots };
+export { DotsRoom, RelatedDots };

package/dist/app/related-section.js

@@ -11,7 +11,7 @@ import { jsx } from "react/jsx-runtime";
 import { useQuery } from "@tanstack/react-query";
 import { createWhere, printFilter } from "@protobase/schema";
 //#region src/app/related-section.tsx
-const where = createWhere();
+const where$1 = createWhere();
 /** The most join records a section reads to find its records; the list API's largest page. */
 const maxThrough = 500;
 const and = (...parts) => {
@@ -28,7 +28,7 @@ const useMatch = (item, recordKey) => {
 	const through = item.through;
 	const via = through ? resources[through.resource] : void 0;
 	const key = through?.key ?? via?.primaryKey[0];
-	const viaFilter = through ? and(printFilter(where.eq(through.field, recordKey)), through.filter) : "";
+	const viaFilter = through ? and(printFilter(where$1.eq(through.field, recordKey)), through.filter) : "";
 	const collected = useQuery({
 		queryKey: keys.list(via?.name ?? "", viaFilter, "", maxThrough, `related:${key}`),
 		enabled: Boolean(via && key),
@@ -42,7 +42,7 @@ const useMatch = (item, recordKey) => {
 		}
 	});
 	if (!through) return {
-		filter: and(printFilter(where.eq(item.field, recordKey)), item.filter),
+		filter: and(printFilter(where$1.eq(item.field, recordKey)), item.filter),
 		isPending: false,
 		error: null
 	};
@@ -52,7 +52,7 @@ const useMatch = (item, recordKey) => {
 		error: collected.error
 	};
 	return {
-		filter: collected.data.length === 0 ? null : and(printFilter(where.in(item.field, collected.data)), item.filter),
+		filter: collected.data.length === 0 ? null : and(printFilter(where$1.in(item.field, collected.data)), item.filter),
 		isPending: false,
 		error: null
 	};

package/dist/app/relation-picker.js

@@ -6,7 +6,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useQuery } from "@tanstack/react-query";
 import { createWhere, printFilter } from "@protobase/schema";
 //#region src/app/relation-picker.tsx
-const where = createWhere();
+const where$1 = createWhere();
 /** Picks a record of another resource: type to search (when the target has search fields), choose from the first matches. */
 const RelationPicker = ({ target, view, value, label, invalid, onChange }) => {
 	const client = useClient();
@@ -22,7 +22,7 @@ const RelationPicker = ({ target, view, value, label, invalid, onChange }) => {
 		],
 		enabled: open,
 		queryFn: () => client.list(target.name, {
-			filter: text && target.search?.length ? printFilter(where.search(text)) : void 0,
+			filter: text && target.search?.length ? printFilter(where$1.search(text)) : void 0,
 			fields: [keyField, labelField],
 			pageSize: 8
 		})

package/dist/app/saved/saved-records.js

@@ -2,7 +2,7 @@ import { recordKey } from "../../live/model-helpers.js";
 import { createWhere } from "@protobase/schema";
 import { encodeKey } from "@protobase/schema/internal";
 //#region src/app/saved/saved-records.ts
-const where = createWhere();
+const where$1 = createWhere();
 const relationValue = (value) => {
 	if (typeof value === "string" || typeof value === "number") return value;
 	if (value && typeof value === "object" && "id" in value) return relationValue(value.id);
@@ -32,7 +32,7 @@ const savedScope = (target, saved) => {
 	const [key] = target.primaryKey;
 	if (target.primaryKey.length !== 1 || key === void 0) throw new Error(`${target.name} has a composite key, so its saved records cannot be listed`);
 	const values = [...new Set(saved.map((entry) => entry.target))];
-	return values.length === 0 ? void 0 : where.in(key, values);
+	return values.length === 0 ? void 0 : where$1.in(key, values);
 };
 //#endregion
 export { savedFor, savedRecordsOf, savedScope, withSaved, withoutSaved };

package/dist/app/search/search-model.js

@@ -3,7 +3,7 @@ import { humanize } from "../../live/naming.js";
 import { appPath, createWhere, enumLabel, printFilter } from "@protobase/schema";
 import { encodeKey, matchedSearchField } from "@protobase/schema/internal";
 //#region src/app/search/search-model.ts
-const where = createWhere();
+const where$1 = createWhere();
 const searchTargets = (meta) => Object.values(meta.resources).flatMap((model) => {
 	const view = meta.views[model.name];
 	if (!model.search?.length || !view || view.nav?.hidden || meta.permissions[model.name]?.read === false) return [];
@@ -22,7 +22,7 @@ const searchPlaceholder = (targets) => {
 	return `Search ${names[0]}, ${names[1]} and more`;
 };
 /** The list filter for the text: the server's partial-word `search(...)` over the resource's search fields. */
-const searchFilter = (text) => printFilter(where.search(text.trim()));
+const searchFilter = (text) => printFilter(where$1.search(text.trim()));
 /** The fields a result's bold line joins: the view's `searchResult.title`, else the record's title field. */
 const titleFields = (target) => {
 	const fields = target.view?.searchResult?.title;

package/dist/app/searches/saved-search.js

@@ -4,7 +4,7 @@ import { textToState } from "../../live/filter-string.js";
 import { rangeFormat, widgetFields } from "../../live/view-fields.js";
 import { createWhere, enumLabel, parseFilter, printFilter } from "@protobase/schema";
 //#region src/app/searches/saved-search.ts
-const where = createWhere();
+const where$1 = createWhere();
 const span = {
 	start: 0,
 	end: 0
@@ -79,14 +79,14 @@ const facetNames = (config) => Object.fromEntries(config.facets.filter((group) =
 */
 const unseenFilter = (text, field, seenAt) => {
 	if (typeof seenAt !== "string" || seenAt === "") return text;
-	const after = where.gt(field, {
+	const after = where$1.gt(field, {
 		kind: "timestamp",
 		value: new Date(seenAt).toISOString(),
 		span
 	});
 	const parsed = parseFilter(text);
 	if (!parsed.ok) throw new Error(`The saved filter cannot be read: ${parsed.errors.map((error) => error.message).join("; ")}`);
-	return printFilter(parsed.ast ? where.and(parsed.ast, after) : after);
+	return printFilter(parsed.ast ? where$1.and(parsed.ast, after) : after);
 };
 /** Whether a record whose `field` holds `value` is new to the user, as `unseenFilter` finds it: after `seenAt`, or any. */
 const isUnseen = (value, seenAt) => {

package/dist/app/searches/search-diff.js

@@ -1,11 +1,11 @@
 import { createWhere, parseFilter, printFilter } from "@protobase/schema";
 //#region src/app/searches/search-diff.ts
-const where = createWhere();
+const where$1 = createWhere();
 const span = {
 	start: 0,
 	end: 0
 };
-const guarded = (atom, condition) => where.and(condition, {
+const guarded = (atom, condition) => where$1.and(condition, {
 	kind: "present",
 	field: atom.field,
 	span
@@ -32,13 +32,13 @@ const surely = (expr) => {
 /** The filter that holds exactly where `expr` fails, and fails, never unknown, everywhere else. */
 const surelyNot = (expr) => {
 	switch (expr.kind) {
-		case "and": return where.or(...expr.args.map(surelyNot));
-		case "or": return where.and(...expr.args.map(surelyNot));
+		case "and": return where$1.or(...expr.args.map(surelyNot));
+		case "or": return where$1.and(...expr.args.map(surelyNot));
 		case "not": return surely(expr.arg);
 		case "search":
 		case "present":
-		case "isNull": return where.not(expr);
-		default: return guarded(expr, where.not(expr));
+		case "isNull": return where$1.not(expr);
+		default: return guarded(expr, where$1.not(expr));
 	}
 };
 const read = (text) => {
@@ -55,8 +55,8 @@ const addedFilter = (before, after) => {
 	const old = read(before);
 	if (!old) return null;
 	const next = read(after);
-	const notOld = where.not(surely(old));
-	return printFilter(next ? where.and(next, notOld) : notOld);
+	const notOld = where$1.not(surely(old));
+	return printFilter(next ? where$1.and(next, notOld) : notOld);
 };
 /** The filter of the records `before` finds and `after` no longer does; `null` when none can be. */
 const removedFilter = (before, after) => addedFilter(after, before);

package/dist/app/use-nav-recent.js

@@ -50,8 +50,7 @@ const useNavRecent = (meta, basePath, active) => {
 	useFollowRecords(groups);
 	const results = useQueries({ queries: groups.map((group) => ({
 		queryKey: groupKey(group),
-		queryFn: () => client.list(group.model.name, group.request),
-		refetchOnWindowFocus: true
+		queryFn: () => client.list(group.model.name, group.request)
 	})) });
 	return Object.fromEntries(groups.map(({ model, view, recent }, index) => {
 		const result = results[index];

package/dist/data/api-provider.d.ts

@@ -97,7 +97,8 @@ export type ApiProviderProps = {
 /**
  * Owns the query cache and the API client; refetches `/meta` whenever `X-Meta-Version` changes. The version is
  * compared only with the last one seen: it hashes the models and roles, while the `/meta` ETag hashes the whole
- * per-caller body, so the two never match.
+ * per-caller body, so the two never match. The data on screen refetches whenever the window regains focus, unless a
+ * form holds unsaved changes (`usePauseFocusRefresh`).
  */
 export declare const ApiProvider: ({ baseUrl, client: given, sources, fetch, queryClient: givenQueryClient, token, onUnauthenticated, children }: ApiProviderProps) => import("react").JSX.Element;
 //#endregion

package/dist/data/api-provider.js

@@ -1,8 +1,9 @@
+import { FocusRefreshContext, createFocusRefresh, listenToWindowFocus } from "./focus-refresh.js";
 import { keys } from "./query-keys.js";
-import { createContext, useCallback, useContext, useMemo, useRef, useState } from "react";
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
 import { createClient } from "@protobase/client";
 import { jsx } from "react/jsx-runtime";
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { QueryClient, QueryClientProvider, focusManager } from "@tanstack/react-query";
 //#region src/data/api-provider.tsx
 const ApiContext = createContext(null);
 const SourceClientsContext = createContext(null);
@@ -44,14 +45,17 @@ const ClientProvider = ({ client, resourceClient, children }) => /* @__PURE__ */
 /**
 * Owns the query cache and the API client; refetches `/meta` whenever `X-Meta-Version` changes. The version is
 * compared only with the last one seen: it hashes the models and roles, while the `/meta` ETag hashes the whole
-* per-caller body, so the two never match.
+* per-caller body, so the two never match. The data on screen refetches whenever the window regains focus, unless a
+* form holds unsaved changes (`usePauseFocusRefresh`).
 */
 const ApiProvider = ({ baseUrl, client: given, sources, fetch, queryClient: givenQueryClient, token, onUnauthenticated, children }) => {
+	const [focusRefresh] = useState(createFocusRefresh);
 	const [queryClient] = useState(() => givenQueryClient ?? new QueryClient({ defaultOptions: { queries: {
 		staleTime: 3e4,
 		retry: false,
-		refetchOnWindowFocus: false
+		refetchOnWindowFocus: focusRefresh.refetchOnWindowFocus
 	} } }));
+	useEffect(() => focusManager.setEventListener(listenToWindowFocus), []);
 	const metaVersion = useRef(void 0);
 	const client = useMemo(() => given ?? createClient({
 		baseUrl,
@@ -104,7 +108,10 @@ const ApiProvider = ({ baseUrl, client: given, sources, fetch, queryClient: give
 			value: client,
 			children: /* @__PURE__ */ jsx(SourceClientsContext.Provider, {
 				value: sourceClient,
-				children
+				children: /* @__PURE__ */ jsx(FocusRefreshContext.Provider, {
+					value: focusRefresh,
+					children
+				})
 			})
 		})
 	});

package/dist/data/focus-refresh.js

@@ -0,0 +1,44 @@
+import { createContext, useContext, useEffect } from "react";
+//#region src/data/focus-refresh.ts
+/**
+* Whether the data on screen refetches when the window regains focus: always, unless a form on screen holds unsaved
+* changes. A refetch under such a form would hand it a newer version of the record without the changes it was edited
+* from, so its Save would no longer find a conflict.
+*/
+const createFocusRefresh = () => {
+	let paused = 0;
+	return {
+		refetchOnWindowFocus: () => paused > 0 ? false : "always",
+		/** Holds the refetches until the returned function is called. */
+		pause: () => {
+			paused += 1;
+			let released = false;
+			return () => {
+				if (released) return;
+				released = true;
+				paused -= 1;
+			};
+		}
+	};
+};
+const FocusRefreshContext = createContext(null);
+/** Holds the app's refetches on window focus while `paused`, such as while a form has unsaved changes. */
+const usePauseFocusRefresh = (paused) => {
+	const refresh = useContext(FocusRefreshContext);
+	useEffect(() => paused && refresh ? refresh.pause() : void 0, [paused, refresh]);
+};
+/**
+* Tells TanStack Query the window regained focus on a return to the browser tab, as by default, and on a return to the
+* browser window from another program, which leaves the tab visible.
+*/
+const listenToWindowFocus = (onFocus) => {
+	const listener = () => onFocus();
+	window.addEventListener("visibilitychange", listener, false);
+	window.addEventListener("focus", listener, false);
+	return () => {
+		window.removeEventListener("visibilitychange", listener);
+		window.removeEventListener("focus", listener);
+	};
+};
+//#endregion
+export { FocusRefreshContext, createFocusRefresh, listenToWindowFocus, usePauseFocusRefresh };

package/dist/data/query-keys.js

@@ -25,6 +25,13 @@ const keys = {
 		pageSize,
 		page
 	],
+	/** Every `page` of one list. */
+	pages: (resource, filter, orderBy) => [
+		"page",
+		resource,
+		filter,
+		orderBy
+	],
 	/** A sidebar group's records; starts with `list`, so invalidating a resource's lists refreshes it too. */
 	navRecent: (resource, filter, orderBy, pageSize) => [
 		"list",
@@ -45,6 +52,12 @@ const keys = {
 		resource,
 		key
 	],
+	/** What a list row knows of a record, which its page shows until the record has loaded. */
+	recordPreview: (resource, key) => [
+		"record-preview",
+		resource,
+		key
+	],
 	facets: (resource, field, filter) => [
 		"facets",
 		resource,

package/dist/data/use-record.js

@@ -1,6 +1,6 @@
 import { keys } from "./query-keys.js";
 import { useClient } from "./api-provider.js";
-import { useQuery } from "@tanstack/react-query";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { encodeKey } from "@protobase/schema/internal";
 //#region src/data/use-record.ts
 const useRecord = (resource, key, enabled = true) => {
@@ -12,5 +12,20 @@ const useRecord = (resource, key, enabled = true) => {
 		queryFn: () => client.get(resource, key)
 	});
 };
+/**
+* `useRecord` for the record's page: until the record has loaded the first time, `data` is what the list row it was
+* opened from knows of it, when it was opened from one, with `isPlaceholderData` set: only the fields the list loaded.
+*/
+const useOpenedRecord = (resource, key, enabled = true) => {
+	const client = useClient();
+	const queryClient = useQueryClient();
+	const encoded = encodeKey(key);
+	return useQuery({
+		queryKey: keys.record(resource, encoded),
+		enabled,
+		queryFn: () => client.get(resource, key),
+		placeholderData: () => queryClient.getQueryData(keys.recordPreview(resource, encoded))
+	});
+};
 //#endregion
-export { useRecord };
+export { useOpenedRecord, useRecord };

package/dist/data-grid/cell-moves.js

@@ -0,0 +1,26 @@
+//#region src/data-grid/cell-moves.ts
+const isMoveKey = (key) => key === "ArrowUp" || key === "ArrowDown" || key === "ArrowLeft" || key === "ArrowRight";
+/** The cell an arrow key moves to from `at` among `total` rows of `columns`, or undefined at the grid's edge. */
+const movedCell = (at, key, columns, total) => {
+	const column = columns.indexOf(at.column);
+	if (key === "ArrowUp") return at.index > 0 ? {
+		...at,
+		index: at.index - 1
+	} : void 0;
+	if (key === "ArrowDown") return at.index < total - 1 ? {
+		...at,
+		index: at.index + 1
+	} : void 0;
+	const next = columns[key === "ArrowLeft" ? column - 1 : column + 1];
+	return column >= 0 && next !== void 0 ? {
+		...at,
+		column: next
+	} : void 0;
+};
+/** The editable column after (`1`) or before (`-1`) `column` in its row, or undefined when there is none. */
+const nextEditable = (column, columns, editable, direction) => {
+	const from = columns.indexOf(column);
+	return (direction === 1 ? columns.slice(from + 1) : columns.slice(0, Math.max(0, from)).reverse()).find(editable);
+};
+//#endregion
+export { isMoveKey, movedCell, nextEditable };

package/dist/data-grid/data-grid.js

@@ -10,12 +10,13 @@ import { GridHeader } from "./grid-header.js";
 import { DataRow, SkeletonRow } from "./grid-row.js";
 import { usePagedRows } from "./use-paged-rows.js";
 import { useVirtualRows } from "./use-virtual-rows.js";
+import { useCellEditing } from "./use-cell-editing.js";
 import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { useTable } from "@tanstack/react-table";
 //#region src/data-grid/data-grid.tsx
 const headerHeight = 32;
-const DataGrid = ({ columns: given, source, naturalSort, initialScrollIndex = 0, onScrollIndex, latencyMs = 150, sort: controlledSort, onSortChange, onOpenRow, rowActions, bulkActions, pinKey, defaultPinned, rowNumbers = true, compact = false, selectable = true, fit = false, scroll = "own", className }) => {
+const DataGrid = ({ columns: given, source, naturalSort, initialScrollIndex = 0, onScrollIndex, latencyMs = 150, sort: controlledSort, onSortChange, onOpenRow, rowActions, cellEditor, rowPatches, bulkActions, pinKey, defaultPinned, rowNumbers = true, compact = false, selectable = true, fit = false, scroll = "own", className }) => {
 	const rowHeight = compact ? 28 : 36;
 	const [pinned, setPinned] = usePinnedColumns(pinKey, defaultPinned);
 	const columns = useMemo(() => {
@@ -65,15 +66,24 @@ const DataGrid = ({ columns: given, source, naturalSort, initialScrollIndex = 0,
 		total,
 		rowAt: sourceRowAt ? rowAt : void 0,
 		loadRows: source.loadRows,
+		revision: source.revision,
 		latencyMs
 	}, firstIndex, lastIndex);
+	const patchedRow = useCallback((index) => {
+		const row = getRow(index);
+		const patch = row && rowPatches?.get(row.id);
+		return patch ? {
+			...row,
+			...patch
+		} : row;
+	}, [getRow, rowPatches]);
 	const loaded = virtualRows.map(({ index, offset }) => ({
 		index,
 		offset,
-		row: getRow(index)
+		row: patchedRow(index)
 	}));
 	const data = useMemo(() => loaded.flatMap(({ row }) => row ? [row] : []), [
-		getRow,
+		patchedRow,
 		firstIndex,
 		lastIndex
 	]);
@@ -123,6 +133,16 @@ const DataGrid = ({ columns: given, source, naturalSort, initialScrollIndex = 0,
 		sorted: header.column.getIsSorted(),
 		onSort: (event) => header.column.getToggleSortingHandler()?.(event)
 	})));
+	const gridRef = useRef(null);
+	const columnIds = useMemo(() => columns.map((spec) => spec.id), [columns]);
+	const cellEditing = useCellEditing({
+		editor: cellEditor,
+		columns: columnIds,
+		total,
+		rowAt: patchedRow,
+		onOpenRow,
+		container: gridRef
+	});
 	const minWidth = gridMinWidth(columns, gutter, trailing, minScale);
 	const own = scroll === "own";
 	const header = /* @__PURE__ */ jsx("div", {
@@ -183,17 +203,22 @@ const DataGrid = ({ columns: given, source, naturalSort, initialScrollIndex = 0,
 						row,
 						actions
 					}) : void 0,
-					cells: tableRow.getAllCells().map((cell) => ({
-						spec: columns.find((spec) => spec.id === cell.column.id),
-						content: /* @__PURE__ */ jsx(table.FlexRender, { cell })
-					}))
+					cells: tableRow.getAllCells().map((cell) => {
+						const content = /* @__PURE__ */ jsx(table.FlexRender, { cell });
+						return {
+							spec: columns.find((spec) => spec.id === cell.column.id),
+							...cellEditing && row ? cellEditing.cell(index, row, cell.column.id, content) : { content }
+						};
+					})
 				}, row?.id);
 			})
 		})
 	});
 	return /* @__PURE__ */ jsxs("div", {
+		ref: gridRef,
 		role: "grid",
 		"aria-rowcount": total,
+		onKeyDown: cellEditing?.onKeyDown,
 		className: cn("flex flex-col rounded-lg border bg-background", own ? "min-h-0 overflow-hidden" : "overflow-clip", className),
 		style: fit && own ? { height: headerHeight + total * rowHeight + 2 } : void 0,
 		children: [/* @__PURE__ */ jsxs("div", {

package/dist/data-grid/grid-header.js

@@ -62,7 +62,7 @@ const GridHeader = ({ cells, specs, gutter, selectedCount, selectable, trailing,
 				})]
 			}, spec.id);
 		}),
-		trailing ? /* @__PURE__ */ jsx("div", {}) : null
+		trailing ? /* @__PURE__ */ jsx("div", { className: "sticky right-0 z-10 h-full bg-inherit" }) : null
 	]
 });
 //#endregion

package/dist/data-grid/grid-row.js

@@ -14,17 +14,20 @@ const frameStyle = (frame) => ({
 /** Pinned cells need a solid background; `bg-inherit` takes the row's, so hover and selection still show. */
 const cellClass = (spec, frame) => cn("flex h-full min-w-0 items-center overflow-hidden whitespace-nowrap px-3", isRightAligned(spec.kind) && "justify-end", spec.highlight && "bg-primary-soft/60", frame.pins && spec.id in frame.pins && "sticky z-10 bg-inherit", frame.scrolled && spec.id === frame.lastPinned && "shadow-[1px_0_0_var(--border),4px_0_6px_-2px_rgb(0_0_0/0.12)]");
 const pinStyle = (spec, pins) => pins && spec.id in pins ? { left: pins[spec.id] } : void 0;
-/** The selection column never scrolls away, so rows can be selected from anywhere in a wide grid. */
+/**
+* The selection column never scrolls away, so rows can be selected from anywhere in a wide grid.
+* The whole cell toggles the row instead of opening it; the checkbox's own click bubbles up to it.
+*/
 const Gutter = ({ width, index, selectable, selected, onToggle, edge }) => /* @__PURE__ */ jsxs("div", {
-	className: cn("sticky left-0 z-10 flex h-full items-center gap-2 bg-inherit pl-3", edge && "shadow-[1px_0_0_var(--border),4px_0_6px_-2px_rgb(0_0_0/0.12)]"),
+	onClick: selectable ? (event) => {
+		event.stopPropagation();
+		onToggle?.();
+	} : void 0,
+	className: cn("sticky left-0 z-10 flex h-full items-center gap-2 bg-inherit pl-3", selectable && "cursor-default", edge && "shadow-[1px_0_0_var(--border),4px_0_6px_-2px_rgb(0_0_0/0.12)]"),
 	style: { width },
-	children: [selectable && /* @__PURE__ */ jsx("span", {
-		onClick: (event) => event.stopPropagation(),
-		children: /* @__PURE__ */ jsx(Checkbox, {
-			checked: Boolean(selected),
-			onChange: onToggle,
-			label: `Select row ${index + 1}`
-		})
+	children: [selectable && /* @__PURE__ */ jsx(Checkbox, {
+		checked: Boolean(selected),
+		label: `Select row ${index + 1}`
 	}), width > 40 && /* @__PURE__ */ jsx("span", {
 		className: "min-w-6 text-right text-[11px] tabular-nums text-faint-foreground",
 		children: formatInt(index + 1)
@@ -44,14 +47,15 @@ const DataRow = ({ cells, selected, onToggle, onOpen, menu, ...frame }) => /* @_
 			onToggle,
 			edge: frame.scrolled && !frame.lastPinned
 		}),
-		cells.map(({ spec, content }) => /* @__PURE__ */ jsx("div", {
-			role: "cell",
-			className: cellClass(spec, frame),
+		cells.map(({ spec, content, props, chosen, editing, editable }) => /* @__PURE__ */ jsx("div", {
+			role: props ? "gridcell" : "cell",
+			...props,
+			className: cn(cellClass(spec, frame), props && "scroll-mb-[calc(var(--pb-sticky-bottom,0px)+3rem)] scroll-mt-[calc(var(--pb-sticky-top,0px)+2rem)] outline-none", editable && !editing && "cursor-default", chosen && "shadow-[inset_0_0_0_2px_var(--primary)]", editing && "z-30 overflow-visible bg-background px-1"),
 			style: pinStyle(spec, frame.pins),
 			children: content
 		}, spec.id)),
 		menu && /* @__PURE__ */ jsx("div", {
-			className: "flex h-full items-center justify-center",
+			className: "sticky right-0 z-10 flex h-full items-center justify-center bg-inherit",
 			children: menu
 		})
 	]

package/dist/data-grid/page-cache.js

@@ -13,6 +13,9 @@ const createPageCache = (pageSize, maxPages) => {
 			if (oldest.done) return;
 			pages.delete(oldest.value);
 		},
+		keepOnly: (kept) => {
+			for (const page of [...pages.keys()]) if (!kept.includes(page)) pages.delete(page);
+		},
 		get size() {
 			return pages.size;
 		}