@protobase/ui 0.20.0 → 0.21.1

package/dist/app/create/create-page.js

@@ -7,10 +7,11 @@ import { useAppAddress } from "../use-app-address.js";
 import { FieldEditor } from "../field-editor.js";
 import { can } from "../permissions.js";
 import { fetchLabels } from "../../live/relation-labels.js";
+import { fieldErrors, fieldMessage } from "../field-errors.js";
+import { useFocusFirstInvalid } from "../use-focus-first-invalid.js";
 import { useLiveSave } from "../use-live-save.js";
 import { CreateRecordForm } from "./create-record-form.js";
 import { useEffect, useState } from "react";
-import { isApiError } from "@protobase/client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useQueryClient } from "@tanstack/react-query";
 //#region src/app/create/create-page.tsx
@@ -53,6 +54,8 @@ const LoadedCreate = ({ resource, values }) => {
 	const sections = createSections(model, view);
 	const [draft, setDraft] = useState(() => initialDraft(model, sections, values));
 	const [errors, setErrors] = useState({});
+	const [rejections, setRejections] = useState(0);
+	const formRef = useFocusFirstInvalid(rejections);
 	useEffect(() => {
 		for (const [name, key] of Object.entries(values ?? {})) {
 			const target = meta.resources[model.fields[name]?.relation?.resource ?? ""];
@@ -87,7 +90,9 @@ const LoadedCreate = ({ resource, values }) => {
 		try {
 			created = await client.create(resource, createBody(model, meta.resources, draft));
 		} catch (error) {
-			if (isApiError(error)) setErrors(Object.fromEntries(error.errors.flatMap((entry) => entry.field ? [[entry.field, entry.message]] : [])));
+			const found = fieldErrors(error);
+			setErrors(found);
+			if (Object.keys(found).length > 0) setRejections((count) => count + 1);
 			throw error;
 		}
 		for (const prefix of [
@@ -111,12 +116,14 @@ const LoadedCreate = ({ resource, values }) => {
 			const field = model.fields[name];
 			const value = draft[name];
 			const target = field.relation ? meta.resources[field.relation.resource] : void 0;
+			const label = view?.fields[name]?.label ?? humanize(name);
+			const problem = errors[name];
 			return {
 				name,
-				label: view?.fields[name]?.label ?? humanize(name),
+				label,
 				help: view?.fields[name]?.help,
 				required: isRequired(field),
-				error: errors[name],
+				error: problem && fieldMessage(field, label, problem),
 				wide: Boolean(view?.fields[name]?.multiline || view?.fields[name]?.markdown),
 				editor: /* @__PURE__ */ jsx(FieldEditor, {
 					field,
@@ -137,6 +144,7 @@ const LoadedCreate = ({ resource, values }) => {
 		})
 	}));
 	return /* @__PURE__ */ jsx(CreateRecordForm, {
+		ref: formRef,
 		noun,
 		collection: view?.names?.plural ?? humanize(resource),
 		sections: formSections,

package/dist/app/create/create-record-form.js

@@ -4,7 +4,8 @@ import { Form } from "./form.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/app/create/create-record-form.tsx
 /** The presentation of "New <thing>": the view's sections, each field with its editor, and Create or Cancel. */
-const CreateRecordForm = ({ noun, collection, sections, saving, message, onSubmit, onCancel }) => /* @__PURE__ */ jsx(Form, {
+const CreateRecordForm = ({ noun, collection, sections, saving, message, onSubmit, onCancel, ref }) => /* @__PURE__ */ jsx(Form, {
+	ref,
 	title: `New ${noun.toLowerCase()}`,
 	eyebrow: collection,
 	submit: `Create ${noun.toLowerCase()}`,
@@ -19,6 +20,7 @@ const CreateRecordForm = ({ noun, collection, sections, saving, message, onSubmi
 		children: /* @__PURE__ */ jsx("div", {
 			className: "grid grid-cols-1 gap-x-6 gap-y-5 sm:grid-cols-2",
 			children: section.fields.map((field) => /* @__PURE__ */ jsx(Field, {
+				name: field.name,
 				label: field.label,
 				required: field.required,
 				help: field.help,

package/dist/app/create/create-values.js

@@ -29,6 +29,7 @@ const createSections = (model, view) => {
 		fields: rest
 	}];
 };
+/** A chosen record's key as the API takes it: a number when the target's key is an integer. */
 const keyValue = (target, key) => {
 	return (target?.primaryKey.length === 1 ? target.fields[target.primaryKey[0]]?.type : void 0) === "integer" ? Number(key) : key;
 };
@@ -68,4 +69,4 @@ const initialDraft = (model, sections, given = {}) => Object.fromEntries(section
 })));
 const hasDatabaseDefault = (field) => Boolean(field.default && "db" in field.default);
 //#endregion
-export { createBody, createSections, hasDatabaseDefault, initialDraft, isChosen, isCreatable, isRequired };
+export { createBody, createSections, hasDatabaseDefault, initialDraft, isChosen, isCreatable, isRequired, keyValue };

package/dist/app/create/form.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import { ReactNode, Ref } from "react";
 //#region src/app/create/form.d.ts
 export type FormProps = {
   /**
@@ -24,7 +24,8 @@ export type FormProps = {
   onCancel?: () => void;
   /** The form's sections (`Section`), drawn one under the other with a line between them. */
   children: ReactNode;
+  ref?: Ref<HTMLFormElement>;
 };
 /** The frame of the app's forms: Cancel and the submit button, a failure that belongs to no field, and the sections. */
-export declare const Form: ({ title, eyebrow, submit, saving, disabled, error, errorTitle, onSubmit, onCancel, children }: FormProps) => import("react").JSX.Element;
+export declare const Form: ({ title, eyebrow, submit, saving, disabled, error, errorTitle, onSubmit, onCancel, children, ref }: FormProps) => import("react").JSX.Element;
 //#endregion

package/dist/app/create/form.js

@@ -3,7 +3,7 @@ import { ErrorBanner } from "../error-banner.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/app/create/form.tsx
 /** The frame of the app's forms: Cancel and the submit button, a failure that belongs to no field, and the sections. */
-const Form = ({ title, eyebrow, submit, saving, disabled, error, errorTitle = "Not saved", onSubmit, onCancel, children }) => {
+const Form = ({ title, eyebrow, submit, saving, disabled, error, errorTitle = "Not saved", onSubmit, onCancel, children, ref }) => {
 	const buttons = /* @__PURE__ */ jsxs("div", {
 		className: "flex items-center gap-2",
 		children: [onCancel && /* @__PURE__ */ jsx(Button, {
@@ -35,6 +35,7 @@ const Form = ({ title, eyebrow, submit, saving, disabled, error, errorTitle = "N
 		onSubmit();
 	};
 	if (title === void 0) return /* @__PURE__ */ jsxs("form", {
+		ref,
 		className: "max-w-[760px]",
 		onSubmit: send,
 		children: [
@@ -47,6 +48,7 @@ const Form = ({ title, eyebrow, submit, saving, disabled, error, errorTitle = "N
 		]
 	});
 	return /* @__PURE__ */ jsx("form", {
+		ref,
 		className: "flex-1",
 		onSubmit: send,
 		children: /* @__PURE__ */ jsxs("div", {

package/dist/app/field-editor.js

@@ -1,5 +1,7 @@
 import { cn } from "../lib/cn.js";
+import { useFieldControl } from "../primitives/field-control.js";
 import { Input } from "../primitives/input.js";
+import { buttonClass } from "../primitives/button.js";
 import { humanize } from "../live/naming.js";
 import { fromDraft, isEditable, toFieldDraft } from "../live/field-values.js";
 import { Switch } from "../primitives/switch.js";
@@ -14,6 +16,7 @@ import { WidgetPart } from "./field-types/widget-part.js";
 import { Markdown } from "../markdown/markdown.js";
 import { MarkdownEditor } from "../markdown/markdown-editor.js";
 import { isMarkdown } from "../markdown/markdown-hint.js";
+import { ArrowUpRight } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { enumLabel } from "@protobase/schema";
 //#region src/app/field-editor.tsx
@@ -23,6 +26,7 @@ const numeric = /* @__PURE__ */ new Set([
 	"decimal"
 ]);
 const BuiltInEditor = ({ field, hints, value, stored, relationLabel, relationTo, relationPicker, invalid, locked, placeholder, reveal, resource, onChange }) => {
+	const control = useFieldControl();
 	if (field.type === "file") return /* @__PURE__ */ jsx(FileField, {
 		field,
 		hints,
@@ -42,17 +46,33 @@ const BuiltInEditor = ({ field, hints, value, stored, relationLabel, relationTo,
 		placeholder,
 		onChange
 	});
-	if (field.type === "relation" && relationPicker && !field.readOnly) return /* @__PURE__ */ jsx(RelationPicker, {
-		target: relationPicker.target,
-		view: relationPicker.view,
-		value: String(value),
-		label: relationLabel,
-		invalid,
-		onChange: (next, label) => onChange({
-			key: next,
-			label
-		})
-	});
+	if (field.type === "relation" && relationPicker && !field.readOnly && !locked) {
+		const picker = /* @__PURE__ */ jsx(RelationPicker, {
+			target: relationPicker.target,
+			view: relationPicker.view,
+			value: String(value),
+			label: relationLabel,
+			invalid,
+			onChange: (next, label) => onChange({
+				key: next,
+				label
+			})
+		});
+		if (!relationTo) return picker;
+		return /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-1",
+			children: [/* @__PURE__ */ jsx("div", {
+				className: "min-w-0 flex-1",
+				children: picker
+			}), /* @__PURE__ */ jsx(AppLink, {
+				to: relationTo,
+				"aria-label": `Open ${relationLabel ?? String(value)}`,
+				title: "Open",
+				className: cn(buttonClass({ variant: "ghost" }), "w-8 px-0"),
+				children: /* @__PURE__ */ jsx(ArrowUpRight, { className: "size-4" })
+			})]
+		});
+	}
 	if (field.type === "boolean" && locked) return /* @__PURE__ */ jsx("div", {
 		className: "py-1.5 text-muted-foreground",
 		children: displayValue(field, stored, hints)
@@ -60,7 +80,7 @@ const BuiltInEditor = ({ field, hints, value, stored, relationLabel, relationTo,
 	if (field.type === "boolean") return /* @__PURE__ */ jsx(Switch, {
 		checked: Boolean(value),
 		onChange,
-		label: field.name
+		label: hints?.label ?? humanize(field.name)
 	});
 	if (field.type === "relation") {
 		const label = relationLabel ?? String(stored ?? "—");
@@ -84,6 +104,8 @@ const BuiltInEditor = ({ field, hints, value, stored, relationLabel, relationTo,
 		children: displayValue(field, stored, hints)
 	});
 	if (field.type === "enum") return /* @__PURE__ */ jsxs("select", {
+		...control,
+		...invalid && { "aria-invalid": true },
 		value: String(value),
 		onChange: (event) => onChange(event.target.value),
 		className: "h-8 w-full rounded-md border border-border-strong bg-background px-2 shadow-sm focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20",

package/dist/app/field-errors.js

@@ -0,0 +1,70 @@
+import { formatInt } from "../format/number.js";
+import { isApiError } from "@protobase/client";
+//#region src/app/field-errors.ts
+const numberIn = (params, key) => typeof params?.[key] === "number" ? params[key] : void 0;
+const characters = (count) => `${formatInt(count)} character${count === 1 ? "" : "s"}`;
+const textMessage = (label, params) => {
+	const min = numberIn(params, "min");
+	const max = numberIn(params, "max");
+	if (min !== void 0) return `${label} needs at least ${characters(min)}`;
+	if (max !== void 0) return `${label} can have at most ${characters(max)}`;
+};
+const wholeNumber = (params) => {
+	const min = numberIn(params, "min");
+	const max = numberIn(params, "max");
+	if (min !== void 0) return `Enter a whole number of at least ${formatInt(min)}`;
+	if (max !== void 0) return `Enter a whole number of at most ${formatInt(max)}`;
+	return "Enter a whole number";
+};
+const decimalMessage = (params) => {
+	const precision = numberIn(params, "precision");
+	const scale = numberIn(params, "scale");
+	if (precision === void 0 || scale === void 0) return "Enter a number";
+	const below = formatInt(10 ** (precision - scale));
+	return scale === 0 ? `Enter a whole number below ${below}` : `Enter a number with at most ${scale} decimal${scale === 1 ? "" : "s"}, below ${below}`;
+};
+/** What to say about a value of each field type the server turned down; without an entry, the server's message shows. */
+const invalidValue = {
+	text: textMessage,
+	integer: (_, params) => wholeNumber(params),
+	bigint: () => "Enter a whole number",
+	decimal: (_, params) => decimalMessage(params),
+	date: () => "Enter a date",
+	timestamp: () => "Enter a date and time",
+	country: () => "Enter a two-letter country code, such as NL",
+	currency: () => "Enter a three-letter currency code, such as EUR",
+	uuid: () => "Enter a valid ID",
+	enum: () => "Choose one of the options",
+	relation: () => "Choose a record",
+	json: () => "Enter valid JSON"
+};
+/**
+* The message a form shows under a field the server turned down, in the words of the field's label: "Country is
+* required", "Enter a number with at most 2 decimals". A `.validate()` rule's message and anything unknown show as the
+* server words them.
+*/
+const fieldMessage = (field, label, error) => {
+	if (error.code === "required") return `${label} is required`;
+	if (error.code !== "invalid-value" || !field) return error.message;
+	return invalidValue[field.type]?.(label, error.params) ?? error.message;
+};
+/** The first problem with each field in an API error, by field name; none for any other error, nor for a rule about the whole record. */
+const fieldErrors = (error) => {
+	if (!isApiError(error)) return {};
+	const found = {};
+	for (const entry of error.errors) if (entry.field && entry.field !== "_record" && !Object.hasOwn(found, entry.field)) found[entry.field] = entry;
+	return found;
+};
+/**
+* What a save's toast says about an API error: how many fields to check when the fields show what is wrong, besides
+* the messages of rules about the whole record; the error's own message otherwise.
+*/
+const saveFailureDescription = (error) => {
+	if (error.operation !== void 0) return error.message;
+	const fields = new Set(error.errors.flatMap((entry) => entry.field && entry.field !== "_record" ? [entry.field] : []));
+	const record = error.errors.flatMap((entry) => entry.field === "_record" ? [entry.message] : []);
+	if (fields.size === 0 && record.length === 0) return error.message;
+	return [...fields.size === 0 ? [] : [`Check ${fields.size === 1 ? "the marked field" : `${fields.size} fields`}.`], ...record].join(" ");
+};
+//#endregion
+export { fieldErrors, fieldMessage, saveFailureDescription };

package/dist/app/history/describe-change.js

@@ -0,0 +1,44 @@
+import { humanize } from "../../live/naming.js";
+import { displayValue } from "../../live/display-value.js";
+//#region src/app/history/describe-change.ts
+const verbs = {
+	create: "created this",
+	update: "changed",
+	delete: "deleted this",
+	undelete: "restored this"
+};
+/** Who made a change: their name, else their id; a write from outside the app names the database role. */
+const changedBy = (change) => {
+	if (change.actor) return change.actor.name ?? change.actor.id;
+	return change.databaseRole ? `Database (${change.databaseRole})` : "Database";
+};
+/**
+* A change as the record page tells it: who, what they did, and for an update each changed field the model still has,
+* before and after, as the view labels and formats it.
+*/
+const describeChange = (change, model, view) => {
+	const fields = (change.operation === "create" ? [] : change.changed).flatMap((name) => {
+		const field = model.fields[name];
+		if (!field || name === model.softDelete) return [];
+		const hints = view?.fields[name];
+		const label = hints?.label ?? humanize(name);
+		if (field.sensitive || !change.before || !change.after) return [{
+			name,
+			label
+		}];
+		return [{
+			name,
+			label,
+			before: displayValue(field, change.before[name], hints),
+			after: displayValue(field, change.after[name], hints)
+		}];
+	});
+	const verb = change.operation === "update" && fields.length === 0 ? "changed this" : verbs[change.operation];
+	return {
+		who: changedBy(change),
+		verb,
+		fields
+	};
+};
+//#endregion
+export { changedBy, describeChange };

package/dist/app/history/history-section.js

@@ -0,0 +1,92 @@
+import { Skeleton } from "../../primitives/skeleton.js";
+import { formatDateTime, formatRelativeTime } from "../../format/date.js";
+import { Button } from "../../primitives/button.js";
+import { Section } from "../../record-view/section.js";
+import { ErrorBanner } from "../error-banner.js";
+import { describeChange } from "./describe-change.js";
+import { useRecordHistory } from "./use-record-history.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/app/history/history-section.tsx
+const Loading = () => /* @__PURE__ */ jsx("div", {
+	className: "flex flex-col gap-2",
+	children: Array.from({ length: 3 }, (_, index) => /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-full" }, index))
+});
+const Change = ({ change, model, view }) => {
+	const { who, verb, fields } = describeChange(change, model, view);
+	const at = Date.parse(change.at);
+	return /* @__PURE__ */ jsxs("li", {
+		className: "flex flex-col gap-1.5 py-3 first:pt-0 last:pb-0",
+		children: [/* @__PURE__ */ jsxs("p", { children: [
+			/* @__PURE__ */ jsx("span", {
+				className: "font-medium text-foreground",
+				children: who
+			}),
+			" ",
+			/* @__PURE__ */ jsx("span", {
+				className: "text-muted-foreground",
+				children: verb
+			}),
+			" ",
+			/* @__PURE__ */ jsxs("time", {
+				dateTime: change.at,
+				title: formatDateTime(at),
+				className: "text-muted-foreground",
+				children: ["· ", formatRelativeTime(Math.max(0, Math.round((Date.now() - at) / 1e3)))]
+			})
+		] }), fields.length > 0 && /* @__PURE__ */ jsx("dl", {
+			className: "grid grid-cols-[minmax(0,auto)_minmax(0,1fr)] gap-x-4 gap-y-1",
+			children: fields.map((field) => /* @__PURE__ */ jsxs("div", {
+				className: "contents",
+				children: [/* @__PURE__ */ jsx("dt", {
+					className: "text-muted-foreground",
+					children: field.label
+				}), /* @__PURE__ */ jsx("dd", {
+					className: "min-w-0 break-words",
+					children: field.before === void 0 ? /* @__PURE__ */ jsx("span", {
+						className: "text-muted-foreground",
+						children: "changed"
+					}) : /* @__PURE__ */ jsxs(Fragment, { children: [
+						/* @__PURE__ */ jsx("del", {
+							className: "text-muted-foreground",
+							children: field.before
+						}),
+						" → ",
+						/* @__PURE__ */ jsx("ins", {
+							className: "no-underline",
+							children: field.after
+						})
+					] })
+				})]
+			}, field.name))
+		})]
+	});
+};
+/** The record's changes, newest first, with who made each and the fields before and after; Show more pages further back. */
+const HistorySection = ({ item, model, view, recordKey, etag }) => {
+	const history = useRecordHistory(model.name, recordKey, item.limit ?? 10, etag);
+	return /* @__PURE__ */ jsx(Section, {
+		title: item.title,
+		children: history.isPending ? /* @__PURE__ */ jsx(Loading, {}) : history.error ? /* @__PURE__ */ jsx(ErrorBanner, {
+			title: "Could not load the history",
+			error: history.error
+		}) : history.items.length === 0 ? /* @__PURE__ */ jsx("p", {
+			className: "text-muted-foreground",
+			children: "No changes kept yet."
+		}) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("ol", {
+			className: "divide-y divide-border",
+			children: history.items.map((change) => /* @__PURE__ */ jsx(Change, {
+				change,
+				model,
+				view
+			}, change.id))
+		}), history.hasNextPage && /* @__PURE__ */ jsx(Button, {
+			size: "sm",
+			className: "mt-4",
+			disabled: history.isFetchingNextPage,
+			onClick: () => void history.fetchNextPage(),
+			children: "Show more"
+		})] })
+	});
+};
+//#endregion
+export { HistorySection };

package/dist/app/history/use-record-history.js

@@ -0,0 +1,34 @@
+import { keys } from "../../data/query-keys.js";
+import { useClient } from "../../data/api-provider.js";
+import { useEffect } from "react";
+import { useInfiniteQuery } from "@tanstack/react-query";
+//#region src/app/history/use-record-history.ts
+/** How long after a save the history looks again: the server keeps a change just after its write commits. */
+const afterSave = 1500;
+/**
+* A record's changes, newest first, `pageSize` at a time. Its key starts with the record's, so refreshing the record
+* refreshes it too; it looks again shortly after `etag` changes, once the server has kept the save.
+*/
+const useRecordHistory = (resource, recordKey, pageSize, etag) => {
+	const client = useClient();
+	const query = useInfiniteQuery({
+		queryKey: keys.history(resource, recordKey, pageSize),
+		initialPageParam: "",
+		queryFn: ({ pageParam }) => client.history(resource, recordKey, {
+			pageSize,
+			pageToken: pageParam
+		}),
+		getNextPageParam: (last) => last.nextPageToken || void 0
+	});
+	const { refetch } = query;
+	useEffect(() => {
+		const timer = setTimeout(() => void refetch(), afterSave);
+		return () => clearTimeout(timer);
+	}, [etag, refetch]);
+	return {
+		...query,
+		items: query.data?.pages.flatMap((page) => page.items) ?? []
+	};
+};
+//#endregion
+export { useRecordHistory };

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

@@ -13,8 +13,9 @@ 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 { fieldErrors, fieldMessage } from "../../field-errors.js";
+import { useFocusFirstInvalid } from "../../use-focus-first-invalid.js";
 import { useState } from "react";
-import { isApiError } from "@protobase/client";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/app/pages/blocks/modal-form.tsx
 /** The literal defaults of new records, or the record's values when editing; relations as `{ key, label }` once chosen. */
@@ -39,6 +40,8 @@ const ModalFormDialog = ({ model, record, mode, label, title, fields, values, on
 	const view = views[model.name];
 	const [draft, setDraft] = useState(() => startingDraft(model, fields, record));
 	const [errors, setErrors] = useState({});
+	const [rejections, setRejections] = useState(0);
+	const formRef = useFocusFirstInvalid(rejections);
 	const [failure, setFailure] = useState();
 	const [saving, setSaving] = useState(false);
 	const submit = async () => {
@@ -55,7 +58,9 @@ const ModalFormDialog = ({ model, record, mode, label, title, fields, values, on
 			});
 			onClose();
 		}, (error) => {
-			if (isApiError(error)) setErrors(Object.fromEntries(error.errors.flatMap((entry) => entry.field ? [[entry.field, entry.message]] : [])));
+			const found = fieldErrors(error);
+			setErrors(found);
+			if (Object.keys(found).length > 0) setRejections((count) => count + 1);
 			setFailure(error);
 		});
 		setSaving(false);
@@ -73,6 +78,7 @@ const ModalFormDialog = ({ model, record, mode, label, title, fields, values, on
 			children: mode === "create" ? "Create" : "Save"
 		})] }),
 		children: /* @__PURE__ */ jsxs("form", {
+			ref: formRef,
 			className: "flex flex-col gap-4",
 			onSubmit: (event) => {
 				event.preventDefault();
@@ -85,10 +91,13 @@ const ModalFormDialog = ({ model, record, mode, label, title, fields, values, on
 				const field = model.fields[name];
 				const value = draft[name];
 				const target = field.relation ? resources[field.relation.resource] : void 0;
+				const label = view?.fields[name]?.label ?? humanize(name);
+				const problem = errors[name];
 				return /* @__PURE__ */ jsx(Field, {
-					label: view?.fields[name]?.label ?? humanize(name),
+					name,
+					label,
 					help: view?.fields[name]?.help,
-					error: errors[name],
+					error: problem && fieldMessage(field, label, problem),
 					children: /* @__PURE__ */ jsx(FieldEditor, {
 						field,
 						hints: view?.fields[name],

package/dist/app/record-page.js

@@ -18,8 +18,9 @@ import { MetadataCard, RelatedRecords, SidebarCard } from "../record-view/record
 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 { fromDraft, isRequiredOnEdit } from "../live/field-values.js";
 import { fieldHelp, helpShown, recordShown, whenShown } from "./record-mode/record-mode.js";
+import { isChosen, keyValue } from "./create/create-values.js";
 import { ErrorBanner } from "./error-banner.js";
 import { displayValue } from "../live/display-value.js";
 import { filledFields } from "./filled-fields.js";
@@ -33,6 +34,8 @@ import { can, fieldAccess } from "./permissions.js";
 import { toneFor } from "../live/columns-from-model.js";
 import { ValueBadge } from "./value-badge.js";
 import { FieldValue } from "./pages/field-value.js";
+import { fieldMessage } from "./field-errors.js";
+import { useFocusFirstInvalid } from "./use-focus-first-invalid.js";
 import { namedIcon } from "./named-icon.js";
 import { useDeleteFlow } from "./delete/use-delete-flow.js";
 import { useRestore } from "./delete/use-restore.js";
@@ -45,6 +48,7 @@ import { draftStorageKey } from "./draft-storage.js";
 import { useLines } from "./use-lines.js";
 import { useLinesDraft } from "./use-lines-draft.js";
 import { GallerySection } from "./gallery/gallery-section.js";
+import { HistorySection } from "./history/history-section.js";
 import { useRecordEditor } from "./use-record-editor.js";
 import { useRelatedRecords } from "./use-related-records.js";
 import { RelatedSection } from "./related-section.js";
@@ -57,8 +61,9 @@ import { enumLabel } from "@protobase/schema";
 //#region src/app/record-page.tsx
 const hidden = (model, name) => name === model.tenant || model.primaryKey.includes(name);
 /**
-* The view's layout, or one section with the editable fields when the view has none. The read view, which is all a
-* user who may only read the resource gets, shows every field: the record rather than what can be changed.
+* The view's layout, or one section with the editable fields when the view has none, then History when the resource
+* keeps it. The read view, which is all a user who may only read the resource gets, shows every field: the record rather
+* than what can be changed.
 */
 const layoutFor = (model, view, read) => {
 	if (view && view.layout.length > 0) return view.layout;
@@ -68,7 +73,10 @@ const layoutFor = (model, view, read) => {
 		kind: "section",
 		title: "Details",
 		fields: (editable.length > 0 && !read ? editable : shown).map((field) => field.name)
-	}];
+	}, ...model.history ? [{
+		kind: "history",
+		title: "History"
+	}] : []];
 };
 const RecordPage = ({ resource, recordKey }) => {
 	const { resources } = useAdminMeta();
@@ -124,6 +132,7 @@ const LoadedRecord = ({ model, recordKey, stored, preview }) => {
 	});
 	const queryClient = useQueryClient();
 	const client = useClient();
+	const fieldsRef = useFocusFirstInvalid(editor.rejections);
 	const permissions = usePermissions(model.name);
 	const restore = useRestore(model);
 	const canUpdate = can(permissions, "update") && stored.permissions?.update !== false;
@@ -152,6 +161,24 @@ const LoadedRecord = ({ model, recordKey, stored, preview }) => {
 		onReview: () => void queryClient.invalidateQueries({ queryKey: keys.record(model.name, recordKey) })
 	});
 	const related = useRelatedRecords(model, view, meta.resources, meta.views, stored.record, basePath);
+	const pickTarget = (name) => {
+		const field = model.fields[name];
+		const target = field?.relation ? meta.resources[field.relation.resource] : void 0;
+		if (!target || target.primaryKey.length !== 1 || name === model.tenant || model.primaryKey.includes(name)) return void 0;
+		return target;
+	};
+	const picked = Object.values(model.fields).filter((field) => pickTarget(field.name));
+	const drafted = {
+		...stored.record,
+		...Object.fromEntries(picked.map((field) => [field.name, fromDraft(field, editor.value(field.name))]))
+	};
+	const chosen = useRelatedRecords(model, view, meta.resources, meta.views, drafted, basePath);
+	const pick = (name, next) => {
+		const target = pickTarget(name);
+		if (!target || !isChosen(next)) return editor.change(name, next);
+		queryClient.setQueryData(keys.relatedLabel(target.name, next.key), next.label);
+		editor.change(name, keyValue(target, next.key));
+	};
 	const { fields: fieldTypes } = useProjectUi();
 	const layout = layoutFor(model, view, shown === "read").filter((item) => whenShown(item.when, editing));
 	const sidebarFields = layout.flatMap((item) => item.kind === "sidebar" ? item.fields : []);
@@ -167,11 +194,15 @@ const LoadedRecord = ({ model, recordKey, stored, preview }) => {
 		const access = fieldAccess(stored.permissions, name);
 		if (!field || access === "hidden") return null;
 		const conflict = editor.conflicts[name];
+		const target = pickTarget(name);
+		const label = hint(name)?.label ?? humanize(name);
+		const problem = editor.errors[name];
 		return /* @__PURE__ */ jsx(Field, {
-			label: hint(name)?.label ?? humanize(name),
+			name,
+			label,
 			required: shown === "form" && access !== "read" && isRequiredOnEdit(field),
 			help: fieldHelp(hint(name), view, editing),
-			error: editor.errors[name],
+			error: problem && fieldMessage(field, label, problem),
 			wide: Boolean(hint(name)?.multiline || hint(name)?.markdown),
 			conflict: conflict === void 0 ? void 0 : {
 				user: {
@@ -189,13 +220,17 @@ const LoadedRecord = ({ model, recordKey, stored, preview }) => {
 				hints: hint(name),
 				value: editor.value(name),
 				stored: stored.record[name],
-				relationLabel: related.labels[name],
-				relationTo: related.addresses[name],
+				relationLabel: chosen.labels[name],
+				relationTo: chosen.addresses[name],
+				relationPicker: target && {
+					target,
+					view: meta.views[target.name]
+				},
 				locked: shown !== "form" || access === "read",
 				invalid: Boolean(editor.errors[name]),
 				reveal: field.sensitive ? () => client.reveal(model.name, recordKey, name) : void 0,
 				resource: model.name,
-				onChange: (next) => editor.change(name, next)
+				onChange: (next) => pick(name, next)
 			}) : /* @__PURE__ */ jsx(Skeleton, { className: "h-9" })
 		}, field.sensitive ? `${name}:${stored.etag}` : name);
 	};
@@ -294,6 +329,7 @@ const LoadedRecord = ({ model, recordKey, stored, preview }) => {
 		})
 	] });
 	return /* @__PURE__ */ jsxs("div", {
+		ref: fieldsRef,
 		className: "flex flex-1 flex-col",
 		inert: preview,
 		children: [
@@ -381,6 +417,13 @@ const LoadedRecord = ({ model, recordKey, stored, preview }) => {
 										record: stored.record,
 										recordKey
 									}, `gallery:${index}`)];
+									if (item.kind === "history") return [/* @__PURE__ */ jsx(HistorySection, {
+										item,
+										model,
+										view,
+										recordKey,
+										etag: stored.etag
+									}, `history:${index}`)];
 									if (item.kind !== "section") return [];
 									const visibleFields = item.fields.filter((name) => model.fields[name] && visible(name));
 									const facts = shown === "read" && item.presentation === "facts";