@protobase/ui 0.19.14 → 0.19.16

package/dist/app/pages/action-inputs/input-errors.js

@@ -0,0 +1,25 @@
+import { isApiError } from "@protobase/client";
+//#region src/app/pages/action-inputs/input-errors.ts
+/**
+* What a handler throws to refuse answers, each message under the input it is about, such as
+* `throw new ActionInputError({ email: 'No user has this address' })`: the dialog stays open and shows each under its input.
+*/
+var ActionInputError = class extends Error {
+	errors;
+	constructor(errors) {
+		super(Object.values(errors).join("; "));
+		this.errors = errors;
+		this.name = "ActionInputError";
+	}
+};
+/**
+* The messages of a failed action about its inputs, by input name: an `ActionInputError`'s, or those of an API error
+* whose field is an input's name, as a function the handler invokes reports them. Empty when none is about an input.
+*/
+const inputErrors = (error, inputs) => {
+	const names = new Set(inputs.map((input) => input.name));
+	const entries = error instanceof ActionInputError ? Object.entries(error.errors) : isApiError(error) ? error.errors.flatMap((entry) => entry.field ? [[entry.field, entry.message]] : []) : [];
+	return Object.fromEntries(entries.filter(([name]) => names.has(name)));
+};
+//#endregion
+export { ActionInputError, inputErrors };

package/dist/app/pages/action-prompt.js

@@ -0,0 +1,29 @@
+import { ActionInputsDialog } from "./action-inputs/action-inputs-dialog.js";
+import { ConfirmAction } from "./confirm-action.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/app/pages/action-prompt.tsx
+/** Whether pressing the action's button opens a dialog first: to ask its question, or for its inputs. */
+const asksFirst = (action) => Boolean(action.confirm || action.inputs?.length);
+/** The dialog an action that asks first opens: its inputs, or else its question. */
+const ActionPrompt = ({ action, label, danger, onCancel, onConfirm, onSubmit }) => {
+	const { inputs } = action;
+	if (inputs?.length) return /* @__PURE__ */ jsx(ActionInputsDialog, {
+		action: {
+			...action,
+			inputs
+		},
+		label,
+		danger,
+		onCancel,
+		onSubmit
+	});
+	return /* @__PURE__ */ jsx(ConfirmAction, {
+		action,
+		label,
+		danger,
+		onCancel,
+		onConfirm
+	});
+};
+//#endregion
+export { ActionPrompt, asksFirst };

package/dist/app/pages/blocks/action.js

@@ -1,12 +1,12 @@
 import { Button } from "../../../primitives/button.js";
-import { ConfirmAction } from "../confirm-action.js";
+import { ActionPrompt, asksFirst } from "../action-prompt.js";
 import { useLayoutRecord } from "../record-scope.js";
 import { useRunAction } from "../use-run-action.js";
 import { propsOf } from "./block-props.js";
 import { useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/app/pages/blocks/action.tsx
-/** A button for a named action of the resource's view, asking first when the action has `confirm`. */
+/** A button for a named action of the resource's view, asking first when the action has `confirm` or `inputs`. */
 const ActionBlock = ({ node }) => {
 	const { name, resource, label, variant } = propsOf(node);
 	const scope = useLayoutRecord();
@@ -14,7 +14,7 @@ const ActionBlock = ({ node }) => {
 	const [asking, setAsking] = useState(false);
 	if (!action.action) return null;
 	const text = label ?? action.action.label;
-	const start = () => action.action.confirm ? setAsking(true) : void action.run();
+	const start = () => asksFirst(action.action) ? setAsking(true) : void action.run();
 	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Button, {
 		size: "sm",
 		variant: variant ?? "secondary",
@@ -23,7 +23,7 @@ const ActionBlock = ({ node }) => {
 		title: action.blocked,
 		onClick: start,
 		children: text
-	}), asking && /* @__PURE__ */ jsx(ConfirmAction, {
+	}), asking && /* @__PURE__ */ jsx(ActionPrompt, {
 		action: action.action,
 		label: text,
 		danger: variant === "danger",
@@ -31,6 +31,10 @@ const ActionBlock = ({ node }) => {
 		onConfirm: () => {
 			setAsking(false);
 			action.run();
+		},
+		onSubmit: async (values) => {
+			await action.submit(values);
+			setAsking(false);
 		}
 	})] });
 };

package/dist/app/pages/blocks/card-row.js

@@ -1,10 +1,10 @@
 import { Skeleton } from "../../../primitives/skeleton.js";
 import { useAdminMeta } from "../../meta-gate.js";
+import { ErrorBanner } from "../../error-banner.js";
 import { RecordScope } from "../record-scope.js";
 import { scopeOf, useListPage } from "../use-layout-data.js";
 import { propsOf } from "./block-props.js";
 import { CardFrame, Quiet } from "./card-frame.js";
-import { ErrorBanner } from "../../error-banner.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/app/pages/blocks/card-row.tsx
 const LoadedCardRow = ({ model, filter, sort, limit = 12, title, description, empty, actions, children }) => {

package/dist/app/pages/blocks/link.js

@@ -1,5 +1,5 @@
-import { useLayoutRecord } from "../record-scope.js";
 import { AppLink } from "../../use-app-address.js";
+import { useLayoutRecord } from "../record-scope.js";
 import { propsOf } from "./block-props.js";
 import { jsx } from "react/jsx-runtime";
 import { appPath } from "@protobase/schema";

package/dist/app/pages/blocks/modal-form.js

@@ -4,15 +4,15 @@ import { useClient } from "../../../data/api-provider.js";
 import { humanize } from "../../../live/naming.js";
 import { useToast } from "../../../toasts/toast-provider.js";
 import { useAdminMeta, usePermissions } from "../../meta-gate.js";
+import { Field } from "../../../record-view/field.js";
+import { differs, toDraft, toPatchValue } from "../../../live/field-values.js";
+import { createBody, isChosen } from "../../create/create-values.js";
+import { ErrorBanner } from "../../error-banner.js";
+import { FieldEditor } from "../../field-editor.js";
 import { useLayoutRecord } from "../record-scope.js";
 import { can } from "../../permissions.js";
 import { useFirstRecord, useRefreshResource } from "../use-layout-data.js";
 import { propsOf } from "./block-props.js";
-import { ErrorBanner } from "../../error-banner.js";
-import { differs, toDraft, toPatchValue } from "../../../live/field-values.js";
-import { Field } from "../../../record-view/field.js";
-import { createBody, isChosen } from "../../create/create-values.js";
-import { FieldEditor } from "../../field-editor.js";
 import { useState } from "react";
 import { isApiError } from "@protobase/client";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";

package/dist/app/pages/blocks/record-card.js

@@ -1,10 +1,10 @@
 import { Skeleton } from "../../../primitives/skeleton.js";
 import { useAdminMeta } from "../../meta-gate.js";
+import { ErrorBanner } from "../../error-banner.js";
 import { RecordScope } from "../record-scope.js";
 import { useFirstRecord } from "../use-layout-data.js";
 import { propsOf } from "./block-props.js";
 import { CardFrame, Quiet } from "./card-frame.js";
-import { ErrorBanner } from "../../error-banner.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/app/pages/blocks/record-card.tsx
 const LoadedRecordCard = ({ model, filter, sort, recordKey, title, description, empty, actions, children }) => {

package/dist/app/pages/blocks/stat.js

@@ -1,7 +1,7 @@
 import { Skeleton } from "../../../primitives/skeleton.js";
 import { useAdminMeta } from "../../meta-gate.js";
-import { useLayoutRecord } from "../record-scope.js";
 import { AppLink } from "../../use-app-address.js";
+import { useLayoutRecord } from "../record-scope.js";
 import { useCount } from "../use-layout-data.js";
 import { propsOf } from "./block-props.js";
 import { CardFrame } from "./card-frame.js";

package/dist/app/pages/field-value.js

@@ -6,12 +6,12 @@ import { fileShown, shownImage } from "../../live/file-values.js";
 import { displayValue } from "../../live/display-value.js";
 import { AppLink } from "../use-app-address.js";
 import { FileImage } from "../../live/file-image.js";
-import { fetchLabels } from "../../live/relation-labels.js";
 import { useShownWidget } from "../field-types/shown-widget.js";
 import { WidgetPart } from "../field-types/widget-part.js";
+import { Markdown } from "../../markdown/markdown.js";
 import { isMarkdown } from "../../markdown/markdown-hint.js";
+import { fetchLabels } from "../../live/relation-labels.js";
 import { ValueBadge } from "../value-badge.js";
-import { Markdown } from "../../markdown/markdown.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 //#region src/app/pages/field-value.tsx

package/dist/app/pages/project-ui.d.ts

@@ -18,6 +18,11 @@ export type ActionContext = {
   client: Client;
   /** Moves the app to an address, such as `{ kind: 'record', resource: 'orders', key: 42 }`. */
   navigate: (to: AppAddress) => void;
+  /**
+   * The answers to the action's inputs, by input name, for an action with `inputs`: those that show, null when left
+   * empty. Throwing `ActionInputError` refuses them, each message under its input.
+   */
+  values?: Record<string, unknown>;
 };
 export type ActionHandler = (context: ActionContext) => void | Promise<void>;
 /** What a plugin's `beforeSignIn` component gets from the app, drawn around the pages someone signed out sees. */

package/dist/app/pages/record-actions.js

@@ -1,7 +1,7 @@
-import { ConfirmAction } from "./confirm-action.js";
+import { ActionRail } from "../../record-view/action-rail.js";
 import { AppLink, useAppAddress } from "../use-app-address.js";
+import { ActionPrompt, asksFirst } from "./action-prompt.js";
 import { useActionRunner } from "./use-run-action.js";
-import { ActionRail } from "../../record-view/action-rail.js";
 import { actionIcon } from "../action-icon.js";
 import { useState } from "react";
 import { Pencil, Trash2 } from "lucide-react";
@@ -32,7 +32,7 @@ const RecordActions = ({ model, stored, recordKey, edit, onDelete }) => {
 		blocked: runner.blocked(action),
 		running: runner.running === action.name,
 		...action.run?.kind === "delete" && { tone: "danger" },
-		onRun: () => action.confirm ? setAsking(action) : void runner.run(action)
+		onRun: () => asksFirst(action) ? setAsking(action) : void runner.run(action)
 	}));
 	const deletes = runner.actions.some((action) => action.run?.kind === "delete");
 	const actions = [
@@ -54,7 +54,7 @@ const RecordActions = ({ model, stored, recordKey, edit, onDelete }) => {
 		}] : []
 	];
 	if (actions.length === 0) return null;
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(ActionRail, { actions }), asking && /* @__PURE__ */ jsx(ConfirmAction, {
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(ActionRail, { actions }), asking && /* @__PURE__ */ jsx(ActionPrompt, {
 		action: asking,
 		label: asking.label,
 		danger: asking.run?.kind === "delete",
@@ -62,6 +62,10 @@ const RecordActions = ({ model, stored, recordKey, edit, onDelete }) => {
 		onConfirm: () => {
 			setAsking(void 0);
 			runner.run(asking);
+		},
+		onSubmit: async (values) => {
+			await runner.submit(asking, values);
+			setAsking(void 0);
 		}
 	})] });
 };

package/dist/app/pages/use-run-action.js

@@ -2,8 +2,8 @@ import { useClient, useResourceClient } from "../../data/api-provider.js";
 import { useToast } from "../../toasts/toast-provider.js";
 import { useProjectUi } from "./project-ui.js";
 import { useAdminMeta, usePermissions } from "../meta-gate.js";
-import { can } from "../permissions.js";
 import { useAppAddress } from "../use-app-address.js";
+import { can } from "../permissions.js";
 import { actionFor, linkTarget, openLink } from "./action-href.js";
 import { useRefreshResource } from "./use-layout-data.js";
 import { useState } from "react";
@@ -12,13 +12,14 @@ import { fillAddress } from "@protobase/schema/internal";
 const message = (error) => error instanceof Error ? error.message : "Something went wrong";
 /**
 * The named actions of `resource`'s view, ready to run on `scope` (the record they act on): built-in behaviour first
-* (`update`, `delete`, `link`), else the handler the project registered under the action's name. A link to a URL the
-* record holds is left out while it holds none. `blocked` says why one cannot run; `afterRun` hears about every action
-* that succeeded.
+* (`update`, `delete`, `link`), else the handler the project registered under the action's name. An update whose values
+* the record holds already is left out, and so is a link to a URL the record holds while it holds none. `blocked` says
+* why one cannot run; `afterRun` hears about every action that succeeded. `submit` runs one with the answers to its
+* inputs and throws its failure, for the dialog to show.
 */
 const useActionRunner = (resource, scope, afterRun) => {
 	const { views } = useAdminMeta();
-	const { actions: handlers } = useProjectUi();
+	const { actions: handlers, components } = useProjectUi();
 	const permissions = usePermissions(resource);
 	const client = useClient();
 	const handlerClient = useResourceClient(resource);
@@ -33,8 +34,10 @@ const useActionRunner = (resource, scope, afterRun) => {
 		if (kind === "update" && (!can(permissions, "update") || scope?.permissions?.update === false)) return "You cannot change this record";
 		if (kind === "delete" && (!can(permissions, "delete") || scope?.permissions?.delete === false)) return "You cannot delete this record";
 		if (!action.run && !handlers?.[action.name]) return `The app has no handler for "${action.name}"`;
+		const custom = action.inputs?.find((input) => input.kind === "custom" && !components?.[input.component ?? ""]);
+		if (custom) return `The app has no component "${custom.component}" for input "${custom.name}"`;
 	};
-	const perform = async (action) => {
+	const perform = async (action, values) => {
 		const { run } = action;
 		if (run?.kind === "link") {
 			if ("to" in run) go(fillAddress(run.to, scope?.record));
@@ -49,7 +52,8 @@ const useActionRunner = (resource, scope, afterRun) => {
 			recordKey: scope?.key,
 			etag: scope?.etag,
 			client: handlerClient,
-			navigate: go
+			navigate: go,
+			...values && { values }
 		});
 		await refresh(resource);
 		toast.show({
@@ -68,11 +72,17 @@ const useActionRunner = (resource, scope, afterRun) => {
 		}));
 		setRunning(void 0);
 	};
+	const submit = async (action, values) => {
+		if (blocked(action)) return;
+		setRunning(action.name);
+		await perform(action, values).finally(() => setRunning(void 0));
+	};
 	return {
 		actions,
 		blocked,
 		running,
-		run
+		run,
+		submit
 	};
 };
 /** One named action of `resource`'s view, for a button. */
@@ -83,7 +93,8 @@ const useRunAction = (resource, name, scope) => {
 		action,
 		blocked: action ? runner.blocked(action) : `No action "${name}"`,
 		running: runner.running === name,
-		run: () => action ? runner.run(action) : Promise.resolve()
+		run: () => action ? runner.run(action) : Promise.resolve(),
+		submit: (values) => action ? runner.submit(action, values) : Promise.resolve()
 	};
 };
 //#endregion

package/dist/app/record-lines.js

@@ -1,7 +1,7 @@
 import { usePermissions } from "./meta-gate.js";
-import { can } from "./permissions.js";
 import { InlineChildTable } from "../inline-child-table/inline-child-table.js";
 import { Section } from "../record-view/section.js";
+import { can } from "./permissions.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/app/record-lines.tsx
 /** A resource that holds numbered lines of this one: it points at the parent and has `position` and `quantity`. */

package/dist/app/record-page.js

@@ -1,35 +1,38 @@
 import { cn } from "../lib/cn.js";
+import { Skeleton } from "../primitives/skeleton.js";
 import { inApp } from "../app-shell/breadcrumb.js";
 import { useAuth } from "../auth/auth-provider.js";
 import { Button, buttonClass } from "../primitives/button.js";
+import { usePauseFocusRefresh } from "../data/focus-refresh.js";
 import { keys } from "../data/query-keys.js";
 import { useClient } from "../data/api-provider.js";
 import { useNavigationGuard, useRouter } from "./router.js";
-import { useRecord } from "../data/use-record.js";
+import { useOpenedRecord } from "../data/use-record.js";
 import { recordTitle } from "../live/model-helpers.js";
 import { humanize } from "../live/naming.js";
 import { useProjectUi } from "./pages/project-ui.js";
 import { Notice, useAdminMeta, usePermissions } from "./meta-gate.js";
-import { can, fieldAccess } from "./permissions.js";
+import { Field } from "../record-view/field.js";
+import { Section } from "../record-view/section.js";
+import { MetadataCard, RelatedRecords, SidebarCard } from "../record-view/record-sidebar.js";
+import { RecordHeader } from "../record-view/record-header.js";
+import { SpecTable } from "../record-view/spec-table.js";
+import { KeyFacts } from "../record-view/key-facts.js";
+import { isRequiredOnEdit } from "../live/field-values.js";
+import { fieldHelp, helpShown, recordShown, whenShown } from "./record-mode/record-mode.js";
+import { ErrorBanner } from "./error-banner.js";
 import { displayValue } from "../live/display-value.js";
 import { filledFields } from "./filled-fields.js";
 import { AppLink, useAppAddress } from "./use-app-address.js";
-import { ErrorBanner } from "./error-banner.js";
 import { shownWidget } from "./field-types/shown-widget.js";
 import { WidgetPart } from "./field-types/widget-part.js";
+import { Markdown } from "../markdown/markdown.js";
 import { isMarkdown } from "../markdown/markdown-hint.js";
+import { FieldEditor } from "./field-editor.js";
+import { can, fieldAccess } from "./permissions.js";
 import { toneFor } from "../live/columns-from-model.js";
 import { ValueBadge } from "./value-badge.js";
-import { Markdown } from "../markdown/markdown.js";
 import { FieldValue } from "./pages/field-value.js";
-import { Field } from "../record-view/field.js";
-import { Section } from "../record-view/section.js";
-import { MetadataCard, RelatedRecords, SidebarCard } from "../record-view/record-sidebar.js";
-import { RecordHeader } from "../record-view/record-header.js";
-import { SpecTable } from "../record-view/spec-table.js";
-import { KeyFacts } from "../record-view/key-facts.js";
-import { fieldHelp, helpShown, recordShown, whenShown } from "./record-mode/record-mode.js";
-import { FieldEditor } from "./field-editor.js";
 import { namedIcon } from "./named-icon.js";
 import { useDeleteFlow } from "./delete/use-delete-flow.js";
 import { useRestore } from "./delete/use-restore.js";
@@ -70,7 +73,7 @@ const layoutFor = (model, view, read) => {
 const RecordPage = ({ resource, recordKey }) => {
 	const { resources } = useAdminMeta();
 	const model = resources[resource];
-	const record = useRecord(resource, recordKey);
+	const record = useOpenedRecord(resource, recordKey);
 	if (!model) return /* @__PURE__ */ jsxs(Notice, {
 		title: "Not found",
 		children: [
@@ -96,10 +99,11 @@ const RecordPage = ({ resource, recordKey }) => {
 	return /* @__PURE__ */ jsx(LoadedRecord, {
 		model,
 		recordKey,
-		stored: record.data
-	});
+		stored: record.data,
+		preview: record.isPlaceholderData
+	}, record.isPlaceholderData ? "preview" : "loaded");
 };
-const LoadedRecord = ({ model, recordKey, stored }) => {
+const LoadedRecord = ({ model, recordKey, stored, preview }) => {
 	const meta = useAdminMeta();
 	const { basePath } = useRouter();
 	const { address, go, open } = useAppAddress();
@@ -115,7 +119,7 @@ const LoadedRecord = ({ model, recordKey, stored }) => {
 		recordKey,
 		mode: view?.saveFeedback ?? "toast",
 		subject: title,
-		draftKey: auth.kind === "signed-in" ? draftStorageKey(auth.user.id, model.name, recordKey) : void 0,
+		draftKey: !preview && auth.kind === "signed-in" ? draftStorageKey(auth.user.id, model.name, recordKey) : void 0,
 		lines: linesDraft
 	});
 	const queryClient = useQueryClient();
@@ -125,6 +129,7 @@ const LoadedRecord = ({ model, recordKey, stored }) => {
 	const canUpdate = can(permissions, "update") && stored.permissions?.update !== false;
 	const { shown, offersEdit, editing } = recordShown(view?.recordMode, canUpdate, address?.kind === "record" && address.edit === true);
 	useNavigationGuard(editor.dirty && shown === "form");
+	usePauseFocusRefresh(editor.dirty);
 	const readAddress = {
 		kind: "record",
 		resource: model.name,
@@ -156,6 +161,7 @@ const LoadedRecord = ({ model, recordKey, stored }) => {
 	const updatedAt = auditField(model, "updated");
 	const hint = (name) => view?.fields[name];
 	const visible = (name) => fieldAccess(stored.permissions, name) !== "hidden" && whenShown(hint(name)?.when, editing);
+	const known = (name) => !preview || Object.hasOwn(stored.record, name);
 	const fieldView = (name) => {
 		const field = model.fields[name];
 		const access = fieldAccess(stored.permissions, name);
@@ -163,6 +169,7 @@ const LoadedRecord = ({ model, recordKey, stored }) => {
 		const conflict = editor.conflicts[name];
 		return /* @__PURE__ */ jsx(Field, {
 			label: hint(name)?.label ?? humanize(name),
+			required: shown === "form" && access !== "read" && isRequiredOnEdit(field),
 			help: fieldHelp(hint(name), view, editing),
 			error: editor.errors[name],
 			wide: Boolean(hint(name)?.multiline || hint(name)?.markdown),
@@ -177,7 +184,7 @@ const LoadedRecord = ({ model, recordKey, stored }) => {
 				onKeepMine: () => editor.keepMine(name),
 				onUseTheirs: () => editor.useTheirs(name)
 			},
-			children: /* @__PURE__ */ jsx(FieldEditor, {
+			children: known(name) ? /* @__PURE__ */ jsx(FieldEditor, {
 				field,
 				hints: hint(name),
 				value: editor.value(name),
@@ -189,12 +196,12 @@ const LoadedRecord = ({ model, recordKey, stored }) => {
 				reveal: field.sensitive ? () => client.reveal(model.name, recordKey, name) : void 0,
 				resource: model.name,
 				onChange: (next) => editor.change(name, next)
-			})
+			}) : /* @__PURE__ */ jsx(Skeleton, { className: "h-9" })
 		}, field.sensitive ? `${name}:${stored.etag}` : name);
 	};
 	const readRow = (name) => {
 		const field = model.fields[name];
-		const value = field.sensitive ? /* @__PURE__ */ jsx(FieldEditor, {
+		const value = !known(name) ? /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-32" }) : field.sensitive ? /* @__PURE__ */ jsx(FieldEditor, {
 			field,
 			hints: hint(name),
 			value: "",
@@ -222,6 +229,10 @@ const LoadedRecord = ({ model, recordKey, stored }) => {
 		rows: sidebarFields.flatMap((name) => {
 			const field = model.fields[name];
 			if (!field || !visible(name)) return [];
+			if (!known(name)) return [{
+				label: hint(name)?.label ?? humanize(name),
+				value: /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-24" })
+			}];
 			const text = displayValue(field, stored.record[name], hint(name));
 			const value = stored.record[name];
 			const markdown = isMarkdown(field, hint(name)) && typeof value === "string" && value !== "";
@@ -284,6 +295,7 @@ const LoadedRecord = ({ model, recordKey, stored }) => {
 	] });
 	return /* @__PURE__ */ jsxs("div", {
 		className: "flex flex-1 flex-col",
+		inert: preview,
 		children: [
 			remove.dialogs,
 			/* @__PURE__ */ jsx("div", {
@@ -355,6 +367,7 @@ const LoadedRecord = ({ model, recordKey, stored }) => {
 										recordKey,
 										owner: model.name
 									}, `related:${item.title}`)];
+									if (preview && (item.kind === "custom" || item.kind === "map" || item.kind === "gallery")) return [];
 									if (item.kind === "custom") return item.sidebar ? [] : [/* @__PURE__ */ jsx(CustomSection, {
 										item,
 										scope
@@ -385,7 +398,7 @@ const LoadedRecord = ({ model, recordKey, stored }) => {
 											children: fields.map(fieldView)
 										})
 									}, item.title)];
-								}), linesModel && /* @__PURE__ */ jsx(RecordLines, {
+								}), linesModel && !preview && /* @__PURE__ */ jsx(RecordLines, {
 									lines: linesModel,
 									draft: linesDraft,
 									vatRate: Number(stored.record.vatRate ?? 21) / 100,
@@ -399,7 +412,7 @@ const LoadedRecord = ({ model, recordKey, stored }) => {
 										className: "hidden flex-col items-center gap-2 md:flex",
 										children: formControls
 									}),
-									/* @__PURE__ */ jsx(RecordActions, {
+									!preview && /* @__PURE__ */ jsx(RecordActions, {
 										model,
 										stored,
 										recordKey,
@@ -408,11 +421,11 @@ const LoadedRecord = ({ model, recordKey, stored }) => {
 									}),
 									firstSidebar === -1 && summary,
 									layout.map((item, index) => {
-										if (item.kind === "custom" && item.sidebar) return /* @__PURE__ */ jsx(CustomSection, {
+										if (item.kind === "custom" && item.sidebar && !preview) return /* @__PURE__ */ jsx(CustomSection, {
 											item,
 											scope
 										}, `custom:${index}`);
-										if (item.kind === "map" && item.sidebar) return /* @__PURE__ */ jsx(MapSection, {
+										if (item.kind === "map" && item.sidebar && !preview) return /* @__PURE__ */ jsx(MapSection, {
 											item,
 											record: stored.record
 										}, `map:${index}`);
@@ -422,10 +435,11 @@ const LoadedRecord = ({ model, recordKey, stored }) => {
 										title: "Details",
 										rows: [auditField(model, "created"), updatedAt].flatMap((name) => {
 											const field = name ? model.fields[name] : void 0;
-											return name && field && visible(name) ? [{
+											if (!name || !field || !visible(name)) return [];
+											return [{
 												label: hint(name)?.label ?? humanize(name),
-												value: displayValue(field, stored.record[name], hint(name))
-											}] : [];
+												value: known(name) ? displayValue(field, stored.record[name], hint(name)) : /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-24" })
+											}];
 										})
 									}),
 									related.records.length > 0 && /* @__PURE__ */ jsx(SidebarCard, {

package/dist/app/record-preview.js

@@ -0,0 +1,25 @@
+import { keys } from "../data/query-keys.js";
+import { recordKey } from "../live/model-helpers.js";
+import { useCallback } from "react";
+import { useQueryClient } from "@tanstack/react-query";
+import { encodeKey } from "@protobase/schema/internal";
+//#region src/app/record-preview.ts
+/**
+* A record as far as a list row knows it: the fields the row loaded, its ETag and permissions as the list gives them.
+* `row` holds relations as their keys, as `displayRow` splits a loaded row.
+*/
+const recordPreview = (model, row) => ({
+	record: Object.fromEntries(Object.entries(row).filter(([name]) => Object.hasOwn(model.fields, name))),
+	etag: typeof row.etag === "string" ? row.etag : "",
+	...typeof row.permissions === "object" && row.permissions !== null && { permissions: row.permissions }
+});
+/**
+* Keeps what a list row knows of its record for the record's page, which shows it until the record has loaded
+* (`useRecord`), so a record opened from a list shows its fields at once.
+*/
+const useSeedRecord = (model) => {
+	const queryClient = useQueryClient();
+	return useCallback((row) => queryClient.setQueryData(keys.recordPreview(model.name, encodeKey(recordKey(model, row))), recordPreview(model, row)), [queryClient, model]);
+};
+//#endregion
+export { recordPreview, useSeedRecord };

package/dist/app/record-row/record-row-body.js

@@ -2,10 +2,10 @@ import { useIsXs } from "../../lib/use-media-query.js";
 import { Skeleton } from "../../primitives/skeleton.js";
 import { humanize } from "../../live/naming.js";
 import { useAdminMeta } from "../meta-gate.js";
+import { ErrorBanner } from "../error-banner.js";
 import { displaysOf, loadedFields } from "../displays/list-displays.js";
 import { defaultOrderBy } from "../list-order.js";
 import { AppLink } from "../use-app-address.js";
-import { ErrorBanner } from "../error-banner.js";
 import { useLiveRows } from "../../live/use-live-rows.js";
 import { viewAllAddress } from "../embedded-list/embedded-display.js";
 import { FilterChipList } from "../searches/filter-chip-list.js";
@@ -16,12 +16,12 @@ import { ArrowRight } from "lucide-react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { createWhere, parseFilter, printFilter } from "@protobase/schema";
 //#region src/app/record-row/record-row-body.tsx
-const where = createWhere();
+const where$1 = createWhere();
 const scoped = (filter, scope) => {
 	if (!scope) return filter;
 	const parsed = parseFilter(filter);
 	if (!parsed.ok) throw new Error(`The filter cannot be read: ${parsed.errors.map((error) => error.message).join("; ")}`);
-	return printFilter(parsed.ast ? where.and(parsed.ast, scope) : scope);
+	return printFilter(parsed.ast ? where$1.and(parsed.ast, scope) : scope);
 };
 /** The display a row draws its cards with: the one named, else the view's first cards display, else a card of the title. */
 const rowDisplay = (view, name) => {

package/dist/app/record-row/record-row.js

@@ -26,6 +26,7 @@ const RecordRow = ({ model, view, display, source, label, isNew }) => {
 		total,
 		rowAt: source.rowAt,
 		loadRows: source.loadRows,
+		revision: source.revision,
 		latencyMs: 0
 	}, scroll.start, Math.max(scroll.start, scroll.end - 1));
 	const indexes = Array.from({ length: scroll.end - scroll.start }, (_, offset) => scroll.start + offset);

package/dist/app/record-row/saved-record-row.js

@@ -1,8 +1,8 @@
 import { Skeleton } from "../../primitives/skeleton.js";
 import { humanize } from "../../live/naming.js";
 import { useAdminMeta } from "../meta-gate.js";
-import { listedResource } from "../current-address.js";
 import { ErrorBanner } from "../error-banner.js";
+import { listedResource } from "../current-address.js";
 import { savedScope } from "../saved/saved-records.js";
 import { useSavedRecords } from "../saved/use-saved-records.js";
 import { RecordRowBody } from "./record-row-body.js";

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

@@ -0,0 +1,16 @@
+//#region src/app/related-dots/card-dots-lines.ts
+/**
+* The lines of dots a card of `display` shows for a row, in the order it names their columns: those of the list's
+* related columns that were loaded with the row and hold a record. A row loaded without them, as a map's or a saved
+* search's, shows none.
+*/
+const cardDotsLines = (view, display, row) => (display.dots ?? []).flatMap((name) => {
+	const column = view?.list?.relatedColumns?.find((candidate) => candidate.name === name);
+	const records = row.record[name];
+	return column && Array.isArray(records) && records.length > 0 ? [{
+		column,
+		records
+	}] : [];
+});
+//#endregion
+export { cardDotsLines };