@protobase/ui 0.19.14 → 0.19.16

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

@@ -0,0 +1,34 @@
+import { useAdminMeta } from "../meta-gate.js";
+import { DotsRoom, RelatedDots } from "./related-dots.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/app/related-dots/card-dots.tsx
+const lines = "flex flex-col gap-1.5";
+/** The room a card's lines of dots take at its bottom, inside its link, which the dots are drawn over. */
+const CardDotsRoom = ({ dots }) => /* @__PURE__ */ jsx("span", {
+	className: lines,
+	children: dots.map(({ column, records }) => /* @__PURE__ */ jsx(DotsRoom, { count: records.length }, column.name))
+});
+/**
+* A card's lines of dots, over the room its link holds for them at its bottom, inside its border and padding: beside
+* the link in the document, so a dot is a link of its own and the pointer between the dots reaches the card's.
+* The card's list item must be `relative`.
+*/
+const CardDots = ({ dots, Card }) => {
+	const { resources, views } = useAdminMeta();
+	return /* @__PURE__ */ jsx("div", {
+		className: `pointer-events-none absolute inset-x-[calc(0.75rem+1px)] bottom-[calc(0.75rem+1px)] ${lines}`,
+		children: dots.map(({ column, records }) => {
+			const target = resources[column.resource];
+			return target && /* @__PURE__ */ jsx(RelatedDots, {
+				column,
+				records,
+				target,
+				view: views[target.name],
+				Card,
+				wrap: true
+			}, column.name);
+		})
+	});
+};
+//#endregion
+export { CardDots, CardDotsRoom };

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

@@ -1,8 +1,8 @@
 import { displaysOf, shownFields } from "../displays/list-displays.js";
 //#region src/app/related-dots/dot-card.ts
 /**
-* The card a dot shows of its record: the first cards display of the record's view, without the photos and favorite
-* button a small card has no room for, else the record's title with its status as the badge.
+* The card a dot shows of its record: the first cards display of the record's view, without the photos, favorite
+* button and dots a small card has no room for, else the record's title with its status as the badge.
 */
 const dotCard = (view, status) => {
 	const cards = displaysOf(view).find((display) => display.kind === "cards");
@@ -11,7 +11,7 @@ const dotCard = (view, status) => {
 		name: "dot",
 		badge: status
 	};
-	const { photos: _, favorite: __, ...card } = cards;
+	const { photos: _, favorite: __, dots: ___, ...card } = cards;
 	return card;
 };
 /** What the list loads for the related columns of its view among `columns`: each with the fields its dots' cards show. */

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

@@ -1,6 +1,7 @@
 import { humanize } from "../../live/naming.js";
 import { headerWidth, listColumnNames } from "../../live/columns-from-model.js";
 import { RelatedDots } from "./related-dots.js";
+import { RecordCard } from "../displays/record-card.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/app/related-dots/related-dots-columns.tsx
 /**
@@ -29,7 +30,8 @@ const withRelatedDotsColumns = (columns, model, view, resources, views) => {
 				column,
 				records: row[column.name] ?? [],
 				target,
-				view: views[target.name]
+				view: views[target.name],
+				Card: RecordCard
 			})
 		}];
 	});

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

@@ -2,16 +2,16 @@ import { Skeleton } from "../primitives/skeleton.js";
 import { keys } from "../data/query-keys.js";
 import { useClient } from "../data/api-provider.js";
 import { useAdminMeta } from "./meta-gate.js";
+import { Section } from "../record-view/section.js";
 import { ErrorBanner } from "./error-banner.js";
 import { listColumnNames } from "../live/columns-from-model.js";
-import { Section } from "../record-view/section.js";
 import { EmbeddedDisplaySwitch, EmbeddedList } from "./embedded-list/embedded-list.js";
 import { useEmbeddedDisplay } from "./embedded-list/use-embedded-display.js";
 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-rows.js

@@ -2,8 +2,8 @@ import { Skeleton } from "../../primitives/skeleton.js";
 import { recordKey } from "../../live/model-helpers.js";
 import { humanize } from "../../live/naming.js";
 import { useAdminMeta } from "../meta-gate.js";
-import { AppLink } from "../use-app-address.js";
 import { ErrorBanner } from "../error-banner.js";
+import { AppLink } from "../use-app-address.js";
 import { InlineFilterChips } from "./filter-chip-list.js";
 import { RecordRowBody } from "../record-row/record-row-body.js";
 import { useSavedSearches } from "./use-saved-searches.js";

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/saved-searches.js

@@ -3,9 +3,9 @@ import { PageHeader } from "../../app-shell/page-header.js";
 import { recordKey } from "../../live/model-helpers.js";
 import { humanize } from "../../live/naming.js";
 import { Notice, useAdminMeta, usePermissions } from "../meta-gate.js";
-import { can } from "../permissions.js";
-import { AppLink } from "../use-app-address.js";
 import { ErrorBanner } from "../error-banner.js";
+import { AppLink } from "../use-app-address.js";
+import { can } from "../permissions.js";
 import { useSavedSearches } from "./use-saved-searches.js";
 import { useDeleteFlow } from "../delete/use-delete-flow.js";
 import { SavedSearchSection } from "./saved-search-section.js";

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

@@ -1,8 +1,8 @@
 import { useClient } from "../../data/api-provider.js";
 import { humanize } from "../../live/naming.js";
 import { useToast } from "../../toasts/toast-provider.js";
-import { useRefreshResource } from "../pages/use-layout-data.js";
 import { Switch } from "../../primitives/switch.js";
+import { useRefreshResource } from "../pages/use-layout-data.js";
 import { useId } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useMutation } from "@tanstack/react-query";

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/searches/search-name-dialog.js

@@ -1,7 +1,7 @@
 import { Input } from "../../primitives/input.js";
 import { Button } from "../../primitives/button.js";
-import { FilterChipList } from "./filter-chip-list.js";
 import { ResponsiveDialog } from "../../primitives/responsive-dialog.js";
+import { FilterChipList } from "./filter-chip-list.js";
 import { useId, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/app/searches/search-name-dialog.tsx

package/dist/app/searches/update-search-dialog.js

@@ -2,10 +2,10 @@ import { Skeleton } from "../../primitives/skeleton.js";
 import { Button } from "../../primitives/button.js";
 import { useClient } from "../../data/api-provider.js";
 import { humanize } from "../../live/naming.js";
+import { ResponsiveDialog } from "../../primitives/responsive-dialog.js";
 import { defaultOrderBy } from "../list-order.js";
 import { countQuery } from "../pages/use-layout-data.js";
 import { useFilterChips } from "./use-filter-chips.js";
-import { ResponsiveDialog } from "../../primitives/responsive-dialog.js";
 import { EmbeddedList } from "../embedded-list/embedded-list.js";
 import { addedFilter, filterChanges, netChange, removedFilter } from "./search-diff.js";
 import { useMemo } from "react";

package/dist/app/searches/use-save-search.js

@@ -3,8 +3,8 @@ import { recordKey } from "../../live/model-helpers.js";
 import { humanize } from "../../live/naming.js";
 import { useToast } from "../../toasts/toast-provider.js";
 import { useAdminMeta } from "../meta-gate.js";
-import { can } from "../permissions.js";
 import { useAppAddress } from "../use-app-address.js";
+import { can } from "../permissions.js";
 import { useRefreshResource } from "../pages/use-layout-data.js";
 import { useSavedSearches } from "./use-saved-searches.js";
 import { useOpenedSearch } from "./use-opened-search.js";

package/dist/app/sensitive-field.js

@@ -2,9 +2,9 @@ import { cn } from "../lib/cn.js";
 import { Input } from "../primitives/input.js";
 import { Button } from "../primitives/button.js";
 import { humanize } from "../live/naming.js";
-import { displayValue } from "../live/display-value.js";
-import { ErrorBanner } from "./error-banner.js";
 import { toDraft } from "../live/field-values.js";
+import { ErrorBanner } from "./error-banner.js";
+import { displayValue } from "../live/display-value.js";
 import { useState } from "react";
 import { Eye, EyeOff } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";

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/app/use-record-editor.js

@@ -1,7 +1,7 @@
 import { keys } from "../data/query-keys.js";
 import { useClient } from "../data/api-provider.js";
-import { displayValue } from "../live/display-value.js";
 import { differs, toDraft, toPatchValue } from "../live/field-values.js";
+import { displayValue } from "../live/display-value.js";
 import { useLiveSave } from "./use-live-save.js";
 import { readDraft, writeDraft } from "./draft-storage.js";
 import { isConflict, useUpdateRecord } from "../data/use-update-record.js";

package/dist/auth/sign-in-prompt.js

@@ -2,8 +2,8 @@ import { RouteLink } from "../primitives/route-link.js";
 import { useAuth } from "./auth-provider.js";
 import { Button, buttonClass } from "../primitives/button.js";
 import { useSignInAddress } from "./use-sign-in-address.js";
-import { namedIcon } from "../app/named-icon.js";
 import { ResponsiveDialog } from "../primitives/responsive-dialog.js";
+import { namedIcon } from "../app/named-icon.js";
 import { useId } from "react";
 import { Check, LogIn } from "lucide-react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";

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