@protobase/ui 0.0.0-stage → 0.1.0

package/dist/app/router.js

@@ -0,0 +1,155 @@
+import { Button } from "../primitives/button.js";
+import { Dialog } from "../primitives/dialog.js";
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/app/router.tsx
+const RouterContext = createContext(null);
+const useRouter = () => {
+	const value = useContext(RouterContext);
+	if (!value) throw new Error("useRouter must be used inside Router");
+	return value;
+};
+const browserUrl = () => `${window.location.pathname}${window.location.search}`;
+const pathOf = (url) => new URL(url, "http://local").pathname;
+/** Our place in the browser history, so a back or forward press can be told apart and, if needed, undone. */
+const historyIndex = () => window.history.state?.protobaseIndex ?? 0;
+const Router = ({ basePath = "", initialUrl, children }) => {
+	const memory = initialUrl !== void 0;
+	const [url, setUrl] = useState(initialUrl ?? browserUrl());
+	const guards = useRef(/* @__PURE__ */ new Set());
+	const urlRef = useRef(url);
+	urlRef.current = url;
+	const position = useRef(memory ? 0 : historyIndex());
+	const undoing = useRef(false);
+	const proceeding = useRef(false);
+	const [pending, setPending] = useState();
+	useEffect(() => {
+		if (memory) return;
+		window.history.replaceState({ protobaseIndex: position.current }, "");
+		const onPop = () => {
+			const next = historyIndex();
+			if (undoing.current) {
+				undoing.current = false;
+				position.current = next;
+				return;
+			}
+			const delta = next - position.current;
+			const leaving = pathOf(browserUrl()) !== pathOf(urlRef.current);
+			if (!proceeding.current && guards.current.size > 0 && leaving) {
+				undoing.current = true;
+				window.history.go(-delta);
+				setPending({
+					kind: "history",
+					delta
+				});
+				return;
+			}
+			proceeding.current = false;
+			position.current = next;
+			setUrl(browserUrl());
+		};
+		window.addEventListener("popstate", onPop);
+		return () => window.removeEventListener("popstate", onPop);
+	}, [memory]);
+	const go = useCallback((full, replace) => {
+		if (!memory) {
+			position.current += replace ? 0 : 1;
+			window.history[replace ? "replaceState" : "pushState"]({ protobaseIndex: position.current }, "", full);
+		}
+		setUrl(full);
+	}, [memory]);
+	const navigate = useCallback((to, { replace = false } = {}) => {
+		const full = to.startsWith(basePath) && basePath ? to : `${basePath}${to}`;
+		if (pathOf(full) !== pathOf(urlRef.current) && guards.current.size > 0) return setPending({
+			kind: "link",
+			full,
+			replace
+		});
+		go(full, replace);
+	}, [basePath, go]);
+	const registerGuard = useCallback(() => {
+		const token = Symbol("guard");
+		guards.current.add(token);
+		return () => void guards.current.delete(token);
+	}, []);
+	const leave = () => {
+		if (!pending) return;
+		setPending(void 0);
+		if (pending.kind === "link") return go(pending.full, pending.replace);
+		proceeding.current = true;
+		window.history.go(pending.delta);
+	};
+	const value = useMemo(() => {
+		const parsed = new URL(url, "http://local");
+		const path = parsed.pathname.slice(basePath.length) || "/";
+		return {
+			path,
+			params: parsed.searchParams,
+			basePath,
+			navigate,
+			registerGuard,
+			setParams: (patch) => {
+				const next = new URLSearchParams(parsed.searchParams);
+				for (const [name, entry] of Object.entries(patch)) if (entry === void 0 || entry === "") next.delete(name);
+				else next.set(name, entry);
+				const query = next.toString();
+				navigate(`${path}${query ? `?${query}` : ""}`, { replace: true });
+			}
+		};
+	}, [
+		url,
+		basePath,
+		navigate,
+		registerGuard
+	]);
+	return /* @__PURE__ */ jsxs(RouterContext.Provider, {
+		value,
+		children: [children, pending && /* @__PURE__ */ jsx(Dialog, {
+			title: "Leave without saving?",
+			description: "You have unsaved changes on this page. They stay in this browser, and come back when you open the record again.",
+			onClose: () => setPending(void 0),
+			actions: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Button, {
+				onClick: () => setPending(void 0),
+				children: "Stay"
+			}), /* @__PURE__ */ jsx(Button, {
+				variant: "primary",
+				onClick: leave,
+				children: "Leave"
+			})] })
+		})]
+	});
+};
+const Link = ({ to, onClick, ...rest }) => {
+	const { navigate, basePath } = useRouter();
+	return /* @__PURE__ */ jsx("a", {
+		href: `${basePath}${to}`,
+		onClick: (event) => {
+			onClick?.(event);
+			if (event.defaultPrevented || event.metaKey || event.ctrlKey || event.button !== 0) return;
+			event.preventDefault();
+			navigate(to);
+		},
+		...rest
+	});
+};
+/** `/orders` is a list, `/orders/<key>` a record; composite keys stay in their comma-joined form. */
+const matchRoute = (path) => {
+	const [resource, key] = path.split("/").filter(Boolean);
+	return {
+		resource: resource && decodeURIComponent(resource),
+		key: key && decodeURIComponent(key)
+	};
+};
+/** While `active`, leaving the page asks first (in-app links and closing the tab). */
+const useNavigationGuard = (active) => {
+	const { registerGuard } = useRouter();
+	useEffect(() => active ? registerGuard() : void 0, [active, registerGuard]);
+	useEffect(() => {
+		if (!active) return;
+		const warn = (event) => event.preventDefault();
+		window.addEventListener("beforeunload", warn);
+		return () => window.removeEventListener("beforeunload", warn);
+	}, [active]);
+};
+//#endregion
+export { Link, Router, matchRoute, useNavigationGuard, useRouter };

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

@@ -0,0 +1,70 @@
+import { recordKey, recordTitleField } from "../../live/model-helpers.js";
+import { humanize } from "../../live/naming.js";
+import { createWhere, encodeKey, enumLabel, matchedSearchField, printFilter } from "@protobase/schema";
+//#region src/app/search/search-model.ts
+const where = 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 [];
+	return [{
+		model,
+		view,
+		label: view.names?.plural ?? humanize(model.name)
+	}];
+});
+/** "Search organizations and services", or "Search organizations, services and more" when it looks in more. */
+const searchPlaceholder = (targets) => {
+	const names = targets.map((target) => target.label.toLowerCase());
+	if (names.length === 0) return "Search";
+	if (names.length === 1) return `Search ${names[0]}`;
+	if (names.length === 2) return `Search ${names[0]} and ${names[1]}`;
+	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()));
+/** 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;
+	return fields?.length ? fields : [recordTitleField(target.model, target.view)];
+};
+/** The second line's field, unless the search matched another: the view's `searchResult.subtitle`, else the first search field not in the title. */
+const subtitleField = (target) => {
+	const title = titleFields(target);
+	return target.view?.searchResult?.subtitle ?? target.model.search?.find((name) => !title.includes(name));
+};
+/** The fields a result needs: the key, the title, the subtitle and the search fields, which say what the text matched. */
+const searchFields = (target) => {
+	const subtitle = subtitleField(target);
+	const lineFields = [
+		...titleFields(target),
+		...subtitle ? [subtitle] : [],
+		...target.model.search ?? []
+	];
+	return [.../* @__PURE__ */ new Set([...target.model.primaryKey, ...lineFields.filter((name) => Object.hasOwn(target.model.fields, name))])];
+};
+/** A field of the row as a result line shows it: an enum by its label. */
+const shown = (target, row, name) => {
+	const value = row[name];
+	if (value === null || value === void 0) return "";
+	return target.model.fields[name]?.type === "enum" ? enumLabel(String(value), target.view?.fields[name]?.valueLabels) : String(value);
+};
+/**
+* A row as a result for `text`: its title fields joined by spaces (the key when they are empty) over a subtitle, which is
+* the search field explaining the match when neither the title nor the default subtitle does (a phone number searched
+* for), else the default subtitle. `basePath` is where the app is served, so the link opens it in a new tab too.
+*/
+const toHit = (target, row, text, basePath = "") => {
+	const key = encodeKey(recordKey(target.model, row));
+	const title = titleFields(target);
+	const fallback = subtitleField(target);
+	const field = matchedSearchField(target.model, row, text, [...title, ...fallback ? [fallback] : []]) ?? fallback;
+	const subtitle = field ? shown(target, row, field) : "";
+	return {
+		id: key,
+		title: title.map((name) => shown(target, row, name)).filter(Boolean).join(" ") || key,
+		...subtitle && { subtitle },
+		href: `${basePath}/${target.model.name}/${encodeURIComponent(key)}`
+	};
+};
+//#endregion
+export { searchFields, searchFilter, searchPlaceholder, searchTargets, subtitleField, titleFields, toHit };

package/dist/app/search/use-global-search.js

@@ -0,0 +1,68 @@
+import { useClient } from "../../data/api-provider.js";
+import { useRouter } from "../router.js";
+import { useAdminMeta } from "../meta-gate.js";
+import { useDebounced } from "../../lib/use-debounced.js";
+import { searchFields, searchFilter, searchPlaceholder, searchTargets, toHit } from "./search-model.js";
+import { useMemo, useState } from "react";
+import { useQueries } from "@tanstack/react-query";
+//#region src/app/search/use-global-search.ts
+/**
+* The top bar's search: the typed text, searched in every resource the user can read that has search fields, through
+* the list API with the user's token, so row filters and hidden fields apply exactly as on the lists. The results stay
+* while the text does, so opening the box again asks nothing; other texts' results are dropped, so changed text asks again.
+*/
+const useGlobalSearch = () => {
+	const meta = useAdminMeta();
+	const client = useClient();
+	const { basePath } = useRouter();
+	const targets = useMemo(() => searchTargets(meta), [meta]);
+	const [text, setText] = useState("");
+	const typed = text.trim();
+	const query = useDebounced(typed, 200);
+	const wanted = typed.length >= 2;
+	const searching = wanted && query.length >= 2;
+	const results = useQueries({ queries: targets.map((target) => ({
+		queryKey: [
+			"global-search",
+			target.model.name,
+			query
+		],
+		enabled: searching,
+		staleTime: Infinity,
+		gcTime: 0,
+		queryFn: () => client.list(target.model.name, {
+			filter: searchFilter(query),
+			pageSize: 5,
+			fields: searchFields(target)
+		})
+	})) });
+	const groups = targets.flatMap((target, index) => {
+		const result = results[index];
+		if (!searching || !result) return [];
+		if (result.error) return [{
+			id: target.model.name,
+			label: target.label,
+			hits: [],
+			failed: true
+		}];
+		const hits = (result.data?.items ?? []).map((row) => toHit(target, row, query, basePath));
+		return hits.length > 0 ? [{
+			id: target.model.name,
+			label: target.label,
+			hits
+		}] : [];
+	});
+	return {
+		/** False when no resource can be searched; the top bar then shows no search box. */
+		available: targets.length > 0,
+		placeholder: searchPlaceholder(targets),
+		text,
+		setText,
+		/** The text the results belong to, once it is long enough to search. */
+		query: searching ? query : "",
+		loading: wanted && (typed !== query || results.some((result) => result.isFetching)),
+		groups
+	};
+};
+//#endregion
+export { useGlobalSearch };

package/dist/app/sensitive-field.js

@@ -0,0 +1,65 @@
+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 { toDraft } from "../live/field-values.js";
+import { ErrorBanner } from "./error-banner.js";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Eye, EyeOff } from "lucide-react";
+import { useMutation } from "@tanstack/react-query";
+//#region src/app/sensitive-field.tsx
+const mask = "••••••••••";
+/** A value hidden like a password. Showing a stored one asks the server for it, once per page visit. */
+const SensitiveField = ({ field, hints, value, reveal, locked, invalid, placeholder, onChange }) => {
+	const [shown, setShown] = useState(false);
+	const stored = useMutation({
+		mutationFn: async () => reveal(),
+		onSuccess: () => setShown(true)
+	});
+	const typed = toDraft(value) !== "";
+	const label = hints?.label ?? humanize(field.name);
+	const toggle = () => {
+		if (shown || typed || !reveal || stored.isSuccess) setShown(!shown);
+		else stored.mutate();
+	};
+	const eye = /* @__PURE__ */ jsx(Button, {
+		variant: "ghost",
+		size: "sm",
+		className: "-mr-1.5 px-1.5",
+		"aria-label": `${shown ? "Hide" : "Show"} ${label}`,
+		"aria-pressed": shown,
+		loading: stored.isPending,
+		onClick: toggle,
+		children: !stored.isPending && (shown ? /* @__PURE__ */ jsx(EyeOff, { className: "size-3.5" }) : /* @__PURE__ */ jsx(Eye, { className: "size-3.5" }))
+	});
+	const error = stored.error && /* @__PURE__ */ jsx("div", {
+		className: "mt-2",
+		children: /* @__PURE__ */ jsx(ErrorBanner, {
+			title: `Could not show the ${label}`,
+			error: stored.error
+		})
+	});
+	if (locked) return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("div", {
+		className: "flex items-center gap-2 py-1 text-[13px]",
+		children: [/* @__PURE__ */ jsx("span", {
+			className: cn(shown ? hints?.format === "code" ? "font-mono text-xs" : "" : "tracking-widest text-muted-foreground"),
+			children: shown ? displayValue(field, stored.data, hints) : mask
+		}), reveal && eye]
+	}), error] });
+	const text = typed ? toDraft(value) : shown && stored.isSuccess ? toDraft(stored.data) : "";
+	return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(Input, {
+		type: shown ? "text" : "password",
+		autoComplete: "off",
+		invalid,
+		"aria-label": label,
+		className: cn(hints?.format === "code" && "font-mono text-xs"),
+		placeholder: typed || !reveal ? placeholder : mask,
+		value: text,
+		trailing: eye,
+		onChange: (event) => onChange(event.target.value)
+	}), error] });
+};
+//#endregion
+export { SensitiveField };

package/dist/app/use-lines-draft.js

@@ -0,0 +1,45 @@
+import { recordKey } from "../live/model-helpers.js";
+import { useCallback, useMemo, useState } from "react";
+import { encodeKey } from "@protobase/schema";
+//#region src/app/use-lines-draft.ts
+/**
+* The order the person has given the lines of a record, kept in the form until Save writes it, together with the
+* record, in one batch. `shown` is the lines in that order; `op()` is the batch operation that makes it permanent.
+*/
+const useLinesDraft = (model, stored) => {
+	const [order, setOrder] = useState();
+	const ids = stored.map((line) => String(line.id));
+	const shown = useMemo(() => {
+		if (!order) return stored;
+		const known = order.flatMap((id) => stored.filter((line) => String(line.id) === id));
+		const added = stored.filter((line) => !order.includes(String(line.id)));
+		return [...known, ...added];
+	}, [order, stored]);
+	const shownIds = shown.map((line) => String(line.id));
+	const dirty = order !== void 0 && shownIds.some((id, index) => id !== ids[index]);
+	const op = useCallback(() => {
+		if (!model || !dirty) return [];
+		return [{
+			op: "reorder",
+			resource: model.name,
+			field: "position",
+			keys: shown.map((line) => recordKey(model, line)),
+			etags: Object.fromEntries(shown.flatMap((line) => typeof line.etag === "string" ? [[encodeKey(recordKey(model, line)), line.etag]] : []))
+		}];
+	}, [
+		model,
+		dirty,
+		shown
+	]);
+	return {
+		shown,
+		dirty,
+		/** The ids in the order on screen, for keeping a draft. */
+		order: dirty ? shownIds : void 0,
+		setOrder: (next) => setOrder(next),
+		reset: () => setOrder(void 0),
+		op
+	};
+};
+//#endregion
+export { useLinesDraft };

package/dist/app/use-lines.js

@@ -0,0 +1,19 @@
+import { useList } from "../data/use-list.js";
+//#region src/app/use-lines.ts
+const byPosition = (a, b) => Number(a.position) - Number(b.position);
+/** The numbered lines of a record, in position order, as the server has them. Nothing is fetched without a lines resource. */
+const useLines = (lines, parent, parentKey) => {
+	const link = lines && Object.values(lines.fields).find((field) => field.type === "relation" && field.relation?.resource === parent.name);
+	const list = useList(lines?.name ?? "", {
+		enabled: Boolean(lines && link),
+		filter: link ? `${link.name} = "${parentKey}"` : void 0,
+		pageSize: 200,
+		...lines?.fields.position?.sortable && { orderBy: "position asc" }
+	});
+	return {
+		items: [...list.items].sort(byPosition),
+		loading: list.isPending && Boolean(lines)
+	};
+};
+//#endregion
+export { useLines };

package/dist/app/use-live-save.js

@@ -0,0 +1,54 @@
+import { useToast } from "../toasts/toast-provider.js";
+import { useEffect, useRef, useState } from "react";
+import { isApiError } from "@protobase/client";
+//#region src/app/use-live-save.ts
+const savedForMs = 2e3;
+/**
+* Shows the outcome of a save the way the view asks: a toast (spinner, then check) or the state of
+* the Save button. API errors are reported and not rethrown; anything else propagates.
+*/
+const useLiveSave = (mode, subject) => {
+	const toast = useToast();
+	const [phase, setPhase] = useState("idle");
+	const [message, setMessage] = useState();
+	const timer = useRef(void 0);
+	useEffect(() => () => clearTimeout(timer.current), []);
+	const run = async (action) => {
+		const id = mode === "toast" ? toast.show({
+			state: "loading",
+			title: `Saving ${subject}...`
+		}) : void 0;
+		setMessage(void 0);
+		if (mode === "button") setPhase("saving");
+		try {
+			await action();
+			if (id !== void 0) toast.update(id, {
+				state: "success",
+				title: `${subject} saved`
+			});
+			if (mode === "button") {
+				setPhase("saved");
+				timer.current = setTimeout(() => setPhase("idle"), savedForMs);
+			}
+		} catch (error) {
+			if (!isApiError(error)) throw error;
+			const title = error.status === 412 ? "Changed by someone else" : "Could not save";
+			if (id !== void 0) toast.update(id, {
+				state: "error",
+				title,
+				description: error.message
+			});
+			if (mode === "button") {
+				setPhase("idle");
+				setMessage(`${title}: ${error.message}`);
+			}
+		}
+	};
+	return {
+		phase,
+		message,
+		run
+	};
+};
+//#endregion
+export { useLiveSave };

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

@@ -0,0 +1,41 @@
+import { keys } from "../data/query-keys.js";
+import { useClient } from "../data/api-provider.js";
+import { userMenuResources } from "./user-menu-from-meta.js";
+import { recentRecords, recentRequest } from "./nav-recent.js";
+import { useQueries } from "@tanstack/react-query";
+//#region src/app/use-nav-recent.ts
+/**
+* The records of every sidebar group (`nav.recent`), one list request each, under the `list` query key so that any
+* write to the resource refreshes them. The server applies the caller's access, as on the list page.
+*/
+const useNavRecent = (meta, basePath, active) => {
+	const client = useClient();
+	const inMenu = userMenuResources(meta);
+	const groups = Object.values(meta.views).flatMap((view) => {
+		const model = meta.resources[view.resource];
+		const recent = view.nav?.recent;
+		return model && recent && !view.nav?.hidden && !inMenu.has(model.name) ? [{
+			model,
+			view,
+			recent,
+			request: recentRequest(model, view, recent)
+		}] : [];
+	});
+	const results = useQueries({ queries: groups.map(({ model, request }) => ({
+		queryKey: keys.navRecent(model.name, request.filter, request.orderBy, request.pageSize),
+		queryFn: () => client.list(model.name, request),
+		refetchOnWindowFocus: true
+	})) });
+	return Object.fromEntries(groups.map(({ model, view, recent }, index) => {
+		const result = results[index];
+		if (result.isPending) return [model.name, { state: "loading" }];
+		if (result.isError) return [model.name, { state: "error" }];
+		const activeKey = active.resource === model.name ? active.key : void 0;
+		return [model.name, {
+			state: "ready",
+			records: recentRecords(model, view, recent, result.data.items, basePath, activeKey)
+		}];
+	}));
+};
+//#endregion
+export { useNavRecent };

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

@@ -0,0 +1,154 @@
+import { keys } from "../data/query-keys.js";
+import { useClient } from "../data/api-provider.js";
+import { differs, toDraft, toPatchValue } from "../live/field-values.js";
+import { useLiveSave } from "./use-live-save.js";
+import { readDraft, writeDraft } from "./draft-storage.js";
+import { isConflict, useUpdateRecord } from "../data/use-update-record.js";
+import { nameFailingOperation } from "./batch-failure.js";
+import { useEffect, useState } from "react";
+import { useQueryClient } from "@tanstack/react-query";
+import { isApiError } from "@protobase/client";
+//#region src/app/use-record-editor.ts
+const without = (source, name) => Object.fromEntries(Object.entries(source).filter(([key]) => key !== name));
+/**
+* Draft state for one record. Saving sends only the changed fields with the ETag that was read;
+* a 412 refetches the record and marks the fields both sides changed so the user can pick a side.
+* When the lines were reordered too, Save sends the record and the new order as one batch: all or nothing.
+*/
+const useRecordEditor = ({ model, stored, recordKey, mode, subject, draftKey, lines }) => {
+	const client = useClient();
+	const queryClient = useQueryClient();
+	const update = useUpdateRecord(model.name, recordKey);
+	const feedback = useLiveSave(mode, subject);
+	const [restored] = useState(() => draftKey ? readDraft(localStorage, draftKey, stored.etag) : void 0);
+	const [draft, setDraft] = useState(restored?.fields ?? {});
+	const [showRestored, setShowRestored] = useState(Boolean(restored));
+	const [linesConflict, setLinesConflict] = useState(false);
+	const [conflicts, setConflicts] = useState({});
+	const [errors, setErrors] = useState({});
+	const fieldsDirty = Object.keys(draft).length > 0;
+	const dirty = fieldsDirty || Boolean(lines?.dirty);
+	useEffect(() => {
+		if (restored?.order) lines?.setOrder(restored.order);
+	}, []);
+	useEffect(() => {
+		if (!draftKey) return;
+		const kept = Object.fromEntries(Object.entries(draft).filter(([name]) => !model.fields[name]?.sensitive));
+		const keep = Object.keys(kept).length > 0 || Boolean(lines?.dirty);
+		writeDraft(localStorage, draftKey, keep ? {
+			etag: stored.etag,
+			fields: kept,
+			...lines?.order && { order: lines.order }
+		} : void 0);
+	}, [
+		draftKey,
+		model,
+		draft,
+		lines?.dirty,
+		lines?.order,
+		stored.etag
+	]);
+	const value = (name) => name in draft ? draft[name] : model.fields[name].type === "boolean" ? stored.record[name] : toDraft(stored.record[name]);
+	const change = (name, next) => {
+		setErrors((current) => without(current, name));
+		setDraft((current) => differs(model.fields[name], next, stored.record[name]) ? {
+			...current,
+			[name]: next
+		} : without(current, name));
+	};
+	const adoptLatest = async () => {
+		const latest = await client.get(model.name, recordKey);
+		queryClient.setQueryData(keys.record(model.name, recordKey), latest);
+		const theirs = {};
+		const keep = {};
+		for (const [name, mine] of Object.entries(draft)) {
+			const field = model.fields[name];
+			if (!differs(field, mine, latest.record[name])) continue;
+			keep[name] = mine;
+			if (toDraft(latest.record[name]) !== toDraft(stored.record[name])) theirs[name] = toDraft(latest.record[name]);
+		}
+		setDraft(keep);
+		setConflicts(theirs);
+	};
+	const patchOf = () => Object.fromEntries(Object.entries(draft).map(([name, entry]) => [name, toPatchValue(model.fields[name], entry)]));
+	const fieldErrors = (error) => isApiError(error) ? Object.fromEntries(error.errors.flatMap((entry) => entry.field ? [[entry.field, entry.message]] : [])) : {};
+	const saveRecordOnly = async () => {
+		try {
+			await update.mutateAsync({
+				patch: patchOf(),
+				etag: stored.etag
+			});
+		} catch (error) {
+			if (isConflict(error)) await adoptLatest();
+			else if (isApiError(error)) setErrors(fieldErrors(error));
+			throw error;
+		}
+	};
+	const saveBatch = async (linesOps) => {
+		const ops = [...fieldsDirty ? [{
+			op: "update",
+			resource: model.name,
+			key: recordKey,
+			data: patchOf(),
+			etag: stored.etag
+		}] : [], ...linesOps];
+		try {
+			await client.batchWrite(ops);
+		} catch (error) {
+			if (isConflict(error)) {
+				await adoptLatest();
+				await queryClient.invalidateQueries({ queryKey: ["list"] });
+				setLinesConflict(true);
+			} else if (isApiError(error)) setErrors(fieldErrors(error));
+			throw isApiError(error) ? nameFailingOperation(error, ops) : error;
+		}
+		await Promise.all([
+			queryClient.invalidateQueries({ queryKey: keys.record(model.name, recordKey) }),
+			queryClient.invalidateQueries({ queryKey: ["list"] }),
+			queryClient.invalidateQueries({ queryKey: ["page"] })
+		]);
+		lines?.reset();
+	};
+	const save = () => feedback.run(async () => {
+		const linesOps = lines?.op() ?? [];
+		if (linesOps.length > 0) await saveBatch(linesOps);
+		else await saveRecordOnly();
+		setDraft({});
+		setConflicts({});
+		setErrors({});
+		setLinesConflict(false);
+		setShowRestored(false);
+	});
+	const discard = () => {
+		setDraft({});
+		setConflicts({});
+		setErrors({});
+		setLinesConflict(false);
+		setShowRestored(false);
+		lines?.reset();
+	};
+	return {
+		value,
+		change,
+		save,
+		dirty,
+		discard,
+		/** The changes on screen were brought back from this browser. */
+		restored: showRestored && dirty,
+		dismissRestored: () => setShowRestored(false),
+		/** Someone changed the lines while the new order was being made. */
+		linesConflict,
+		saving: feedback.phase === "saving",
+		phase: feedback.phase,
+		message: feedback.message,
+		conflicts,
+		errors,
+		keepMine: (name) => setConflicts((current) => without(current, name)),
+		useTheirs: (name) => {
+			setConflicts((current) => without(current, name));
+			setDraft((current) => without(current, name));
+		}
+	};
+};
+//#endregion
+export { useRecordEditor };