@protobase/ui 0.19.15 → 0.20.0

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-options.js

@@ -0,0 +1,44 @@
+import { createWhere, printFilter } from "@protobase/schema";
+//#region src/app/relation-options.ts
+const where$1 = createWhere();
+/** The words of typed text, as the list search splits it. */
+const wordsOf = (text) => text.split(/\s+/).filter(Boolean);
+/**
+* How a relation picker finds the records that match typed text. A target with search fields uses the list's search;
+* else, when its title field is a filterable text field, every word must appear in it, ignoring case, as the search
+* matches one field. Otherwise, or once the server `refused` such a filter (the scan guard finds no index for it), the
+* picker loads the records page by page and keeps the rows whose title matches (`local`).
+*/
+const relationOptionsQuery = (target, titleField, text, refused = false) => {
+	const words = wordsOf(text);
+	if (words.length === 0) return {
+		filter: void 0,
+		local: false
+	};
+	if (refused) return {
+		filter: void 0,
+		local: true
+	};
+	if (target.search?.length) return {
+		filter: printFilter(where$1.search(text)),
+		local: false
+	};
+	const field = target.fields[titleField];
+	if (field?.type !== "text" || !field.filterable) return {
+		filter: void 0,
+		local: true
+	};
+	const contains = words.map((word) => where$1.eq(titleField, `*${word.replaceAll("*", "")}*`));
+	return {
+		filter: printFilter(where$1.and(...contains)),
+		local: false
+	};
+};
+/** Whether a title holds every word of the text, ignoring case: the picker's match on rows it filters itself. */
+const titleMatches = (title, text) => {
+	if (title === null || title === void 0) return false;
+	const value = String(title).toLowerCase();
+	return wordsOf(text).every((word) => value.includes(word.toLowerCase()));
+};
+//#endregion
+export { relationOptionsQuery, titleMatches };

package/dist/app/relation-picker.js

@@ -1,63 +1,142 @@
+import { cn } from "../lib/cn.js";
 import { Input } from "../primitives/input.js";
-import { useClient } from "../data/api-provider.js";
 import { labelFieldOf } from "../live/model-helpers.js";
-import { useState } from "react";
+import { humanize } from "../live/naming.js";
+import { useList } from "../data/use-list.js";
+import { relationOptionsQuery, titleMatches } from "./relation-options.js";
+import { useCallback, useEffect, useId, useRef, useState } from "react";
+import { ApiError } from "@protobase/client";
 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();
-/** Picks a record of another resource: type to search (when the target has search fields), choose from the first matches. */
+/** Loads the next page while `sentinel` is in view of the list; it re-arms after each page, in case it still is. */
+const useLoadMoreInView = (list, sentinel, loaded, loadMore) => {
+	useEffect(() => {
+		if (!list || !sentinel) return;
+		const observer = new IntersectionObserver((entries) => entries.some((entry) => entry.isIntersecting) && loadMore(), { root: list });
+		observer.observe(sentinel);
+		return () => observer.disconnect();
+	}, [
+		list,
+		sentinel,
+		loaded,
+		loadMore
+	]);
+};
+/**
+* Picks a record of another resource: type to narrow the records by their search fields or title, scroll for more, and
+* choose with the mouse or with the arrow keys and Enter; Escape closes the list.
+*/
 const RelationPicker = ({ target, view, value, label, invalid, onChange }) => {
-	const client = useClient();
 	const [text, setText] = useState("");
 	const [open, setOpen] = useState(false);
+	const [active, setActive] = useState(-1);
+	const [list, setList] = useState(null);
+	const [sentinel, setSentinel] = useState(null);
+	const listId = useId();
 	const keyField = target.primaryKey[0];
 	const labelField = labelFieldOf(target, view);
-	const options = useQuery({
-		queryKey: [
-			"relation-options",
-			target.name,
-			text
-		],
-		enabled: open,
-		queryFn: () => client.list(target.name, {
-			filter: text && target.search?.length ? printFilter(where.search(text)) : void 0,
-			fields: [keyField, labelField],
-			pageSize: 8
-		})
+	const [refused, setRefused] = useState(false);
+	const query = relationOptionsQuery(target, labelField, text, refused);
+	const rows = useList(target.name, {
+		filter: query.filter,
+		fields: [keyField, labelField],
+		enabled: open
+	});
+	const expensive = query.filter !== void 0 && rows.error instanceof ApiError && rows.error.slug === "expensive-query";
+	useEffect(() => {
+		if (expensive) setRefused(true);
+	}, [expensive]);
+	const items = query.local ? rows.items.filter((item) => titleMatches(item[labelField], text)) : rows.items;
+	const more = Boolean(rows.hasNextPage);
+	const loading = rows.isPending || rows.isFetchingNextPage;
+	const { fetchNextPage } = rows;
+	useLoadMoreInView(list, sentinel, rows.items.length, useCallback(() => fetchNextPage({ cancelRefetch: false }), [fetchNextPage]));
+	const optionId = (index) => `${listId}-${index}`;
+	const input = useRef(null);
+	useEffect(() => {
+		if (!open && document.activeElement === input.current) input.current?.select();
+	}, [open]);
+	useEffect(() => {
+		if (open && active >= 0) document.getElementById(optionId(active))?.scrollIntoView({ block: "nearest" });
 	});
+	const close = () => {
+		setText("");
+		setActive(-1);
+		setOpen(false);
+	};
+	const choose = (item) => {
+		onChange(String(item[keyField]), String(item[labelField]));
+		close();
+	};
+	const onKeyDown = (event) => {
+		if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+			event.preventDefault();
+			if (!open) return setOpen(true);
+			const step = event.key === "ArrowDown" ? 1 : -1;
+			setActive((current) => Math.min(Math.max(current + step, 0), items.length - 1));
+			return;
+		}
+		if (event.key === "Enter" && open && items[active]) {
+			event.preventDefault();
+			choose(items[active]);
+			return;
+		}
+		if (event.key === "Escape" && open) {
+			event.preventDefault();
+			event.stopPropagation();
+			close();
+		}
+	};
 	return /* @__PURE__ */ jsxs("div", {
 		className: "relative",
 		children: [/* @__PURE__ */ jsx(Input, {
+			ref: input,
+			role: "combobox",
+			"aria-autocomplete": "list",
+			"aria-expanded": open,
+			"aria-controls": listId,
+			"aria-activedescendant": open && items[active] ? optionId(active) : void 0,
 			invalid,
-			placeholder: `Search ${target.name}`,
+			placeholder: `Search ${(view?.names?.plural ?? humanize(target.name)).toLowerCase()}`,
 			value: open ? text : label ?? value,
 			onFocus: () => setOpen(true),
-			onBlur: () => setTimeout(() => setOpen(false), 120),
-			onChange: (event) => setText(event.target.value)
+			onBlur: close,
+			onKeyDown,
+			onChange: (event) => {
+				setText(event.target.value);
+				setActive(event.target.value.trim() ? 0 : -1);
+				setOpen(true);
+			}
 		}), open && /* @__PURE__ */ jsxs("ul", {
+			ref: setList,
+			id: listId,
 			role: "listbox",
 			className: "absolute z-30 mt-1 max-h-60 w-full overflow-y-auto rounded-md border bg-background py-1 shadow-pop",
+			onMouseDown: (event) => event.preventDefault(),
 			children: [
-				options.data?.items.map((item) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("button", {
-					type: "button",
+				items.map((item, index) => /* @__PURE__ */ jsx("li", {
+					id: optionId(index),
 					role: "option",
-					"aria-selected": String(item[keyField]) === value,
-					className: "block w-full truncate px-3 py-1.5 text-left hover:bg-muted",
-					onMouseDown: (event) => event.preventDefault(),
-					onClick: () => {
-						onChange(String(item[keyField]), String(item[labelField]));
-						setText("");
-						setOpen(false);
-					},
+					"aria-selected": index === active,
+					className: cn("cursor-pointer truncate px-3 py-1.5", index === active && "bg-muted", String(item[keyField]) === value && "font-medium"),
+					onMouseMove: () => index !== active && setActive(index),
+					onClick: () => choose(item),
 					children: String(item[labelField])
-				}) }, String(item[keyField]))),
-				options.data && options.data.items.length === 0 && /* @__PURE__ */ jsx("li", {
+				}, String(item[keyField]))),
+				more && /* @__PURE__ */ jsx("li", {
+					ref: setSentinel,
+					"aria-hidden": true,
+					className: "h-px"
+				}),
+				rows.error && !expensive && /* @__PURE__ */ jsx("li", {
+					className: "px-3 py-1.5 text-muted-foreground",
+					children: "Could not load the options"
+				}),
+				!more && !loading && !rows.error && items.length === 0 && /* @__PURE__ */ jsx("li", {
 					className: "px-3 py-1.5 text-muted-foreground",
 					children: "No matches"
 				}),
-				options.isPending && /* @__PURE__ */ jsx("li", {
+				loading && /* @__PURE__ */ jsx("li", {
 					className: "px-3 py-1.5 text-muted-foreground",
 					children: "Loading"
 				})

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

@@ -22,6 +22,7 @@ export declare const useClient: () => {
     limit?: number;
     label?: string;
   }) => Promise<import("@protobase/client").Facet[]>;
+  aggregate: (resource: import("@protobase/client").ResourceRef, params: import("@protobase/client").AggregateParams) => Promise<import("@protobase/client").Aggregate>;
   series: (resource: import("@protobase/client").ResourceRef, params: import("@protobase/client").SeriesParams & {
     filter?: import("@protobase/client").FilterInput;
   }) => Promise<import("@protobase/client").Series>;
@@ -62,6 +63,7 @@ export declare const useResourceClient: (resource: string) => {
     limit?: number;
     label?: string;
   }) => Promise<import("@protobase/client").Facet[]>;
+  aggregate: (resource: import("@protobase/client").ResourceRef, params: import("@protobase/client").AggregateParams) => Promise<import("@protobase/client").Aggregate>;
   series: (resource: import("@protobase/client").ResourceRef, params: import("@protobase/client").SeriesParams & {
     filter?: import("@protobase/client").FilterInput;
   }) => Promise<import("@protobase/client").Series>;
@@ -97,7 +99,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,
@@ -59,6 +72,11 @@ const keys = {
 		granularity,
 		filter
 	],
+	aggregate: (resource, params) => [
+		"aggregate",
+		resource,
+		params
+	],
 	histogram: (resource, field, buckets, filter) => [
 		"histogram",
 		resource,

package/dist/data/use-aggregates.js

@@ -39,5 +39,18 @@ const useHistogram = (resource, field, filter, buckets = 20, enabled = true) =>
 		})
 	});
 };
+/** Totals per value or date bucket of a field (`:aggregate`), refetched whenever the resource is written. */
+const useAggregate = (resource, params, enabled = true) => {
+	const client = useClient();
+	const wire = {
+		...params,
+		filter: filterText(params.filter) ?? ""
+	};
+	return useQuery({
+		queryKey: keys.aggregate(resource, JSON.stringify(wire)),
+		enabled,
+		queryFn: () => client.aggregate(resource, wire)
+	});
+};
 //#endregion
-export { useFacets, useHistogram, useSeries };
+export { useAggregate, useFacets, useHistogram, useSeries };

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 };