@protobase/ui 0.21.0 → 0.21.2

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/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,4 +1,5 @@
 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";
@@ -25,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,
@@ -78,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 ?? "—");
@@ -102,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/hand-order/hand-order.js

@@ -0,0 +1,21 @@
+import { can } from "../permissions.js";
+//#region src/app/hand-order/hand-order.ts
+/** The field a user may sort `model`'s records by hand in: its `position`, when they may update it. */
+const writablePosition = (model, permissions) => {
+	const position = model.position;
+	if (!position || !can(permissions, "update")) return void 0;
+	const field = model.fields[position.field];
+	return field && !field.readOnly ? position.field : void 0;
+};
+/**
+* The field the list page sorts all of `model`'s records by hand in. A resource whose records are ordered within a
+* parent is sorted in the parent's related section instead, since its list mixes the parents.
+*/
+const listHandOrder = (model, permissions) => model.position?.within === void 0 ? writablePosition(model, permissions) : void 0;
+/**
+* The field a related section sorts its records by hand in: those of one parent, when the section lists every record
+* whose `within` relation points at the page's record, no filter or join resource leaving some out.
+*/
+const relatedHandOrder = (item, model, permissions) => model.position?.within !== void 0 && item.field === model.position.within && !item.through && !item.filter ? writablePosition(model, permissions) : void 0;
+//#endregion
+export { listHandOrder, relatedHandOrder };

package/dist/app/hand-order/hand-sorted-list.js

@@ -0,0 +1,98 @@
+import { Skeleton } from "../../primitives/skeleton.js";
+import { recordKey, recordTitle } from "../../live/model-helpers.js";
+import { humanize } from "../../live/naming.js";
+import { useProjectUi } from "../pages/project-ui.js";
+import { useAdminMeta } from "../meta-gate.js";
+import { ErrorBanner } from "../error-banner.js";
+import { loadedFields } from "../displays/list-displays.js";
+import { useAppAddress } from "../use-app-address.js";
+import { DataGrid } from "../../data-grid/data-grid.js";
+import { embeddedColumns } from "../embedded-list/embedded-columns.js";
+import { useHandOrder } from "./use-hand-order.js";
+import { useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/app/hand-order/hand-sorted-list.tsx
+/**
+* The records in their order by hand, in the list's table with a drag handle in each row's checkbox place: dragging a
+* row, or moving it with the keyboard from its handle, renumbers them all. The page scrolls them, and a row still opens
+* its record.
+*/
+const HandSortedList = ({ model, view, field, filter, columns }) => {
+	const { resources, views } = useAdminMeta();
+	const { fields: fieldTypes } = useProjectUi();
+	const { go } = useAppAddress();
+	const specs = useMemo(() => embeddedColumns(model, view, columns, {
+		resources,
+		views,
+		fieldTypes
+	}).map((spec) => ({
+		...spec,
+		sortable: false
+	})), [
+		model,
+		view,
+		columns.join(","),
+		resources,
+		views,
+		fieldTypes
+	]);
+	const fields = useMemo(() => loadedFields(model, view, specs.map((spec) => spec.id)), [
+		model,
+		view,
+		specs
+	]);
+	const order = useHandOrder({
+		model,
+		field,
+		filter,
+		fields
+	});
+	const rows = order.rows;
+	const source = useMemo(() => rows && {
+		total: rows.length,
+		rowAt: (index) => rows[index]
+	}, [rows]);
+	const plural = (view?.names?.plural ?? humanize(model.name)).toLowerCase();
+	if (order.loading) return /* @__PURE__ */ jsx("div", {
+		className: "flex flex-col gap-2",
+		children: Array.from({ length: 3 }, (_, index) => /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-full" }, index))
+	});
+	if (order.error) return /* @__PURE__ */ jsx(ErrorBanner, {
+		title: "Could not load",
+		error: order.error
+	});
+	if (order.more) return /* @__PURE__ */ jsxs("p", {
+		className: "text-muted-foreground",
+		children: [
+			"There are more than ",
+			500 .toLocaleString("en-IE"),
+			" ",
+			plural,
+			", too many to sort by hand."
+		]
+	});
+	if (!source || source.total === 0) return /* @__PURE__ */ jsx("p", {
+		className: "text-muted-foreground",
+		children: "Nothing here yet."
+	});
+	const openRecord = (row) => go({
+		kind: "record",
+		resource: model.name,
+		key: recordKey(model, row)
+	});
+	return /* @__PURE__ */ jsx(DataGrid, {
+		fit: true,
+		scroll: "parent",
+		columns: specs,
+		source,
+		latencyMs: 0,
+		onOpenRow: openRecord,
+		rowNumbers: false,
+		reorder: {
+			label: (row) => recordTitle(model, view, row, row.id),
+			onMove: order.move
+		}
+	});
+};
+//#endregion
+export { HandSortedList };

package/dist/app/hand-order/sort-button.js

@@ -0,0 +1,20 @@
+import { Button } from "../../primitives/button.js";
+import { ArrowUpDown, Check } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/app/hand-order/sort-button.tsx
+/** The button that turns sorting by hand on, as **Sort**, and off again, as **Done**; with `iconOnly` its icon alone. */
+const SortButton = ({ sorting, onChange, size, iconOnly = false }) => {
+	const label = sorting ? "Done" : "Sort";
+	return /* @__PURE__ */ jsxs(Button, {
+		size,
+		variant: sorting ? "primary" : "secondary",
+		onClick: () => onChange(!sorting),
+		...iconOnly && {
+			"aria-label": label,
+			title: label
+		},
+		children: [sorting ? /* @__PURE__ */ jsx(Check, { className: "size-3.5" }) : /* @__PURE__ */ jsx(ArrowUpDown, { className: "size-3.5" }), !iconOnly && label]
+	});
+};
+//#endregion
+export { SortButton };

package/dist/app/hand-order/use-hand-order.js

@@ -0,0 +1,105 @@
+import { keys } from "../../data/query-keys.js";
+import { useClient } from "../../data/api-provider.js";
+import { recordId, recordKey } from "../../live/model-helpers.js";
+import { useToast } from "../../toasts/toast-provider.js";
+import { useAdminMeta } from "../meta-gate.js";
+import { refusalReason } from "../displays/board-columns.js";
+import { useRefreshResource } from "../pages/use-layout-data.js";
+import { listLabels, withLabels } from "../../live/relation-labels.js";
+import { useRef, useState } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { encodeKey } from "@protobase/schema/internal";
+import { arrayMove } from "@dnd-kit/sortable";
+//#region src/app/hand-order/use-hand-order.ts
+/**
+* The records of `filter` in the order of `field`, all of them up to `handOrderLimit`, with `more` when there are
+* others, and `move` to put one elsewhere. A move shows at once and renumbers them all 1, 2, 3, ... in one batch
+* `reorder` with their ETags; moves made while one saves are saved after it, with the ETags it gave back. A refusal
+* puts them back as the server has them and says why; either way every list of the resource reloads.
+*/
+const useHandOrder = ({ model, field, filter, fields }) => {
+	const client = useClient();
+	const toast = useToast();
+	const refresh = useRefreshResource();
+	const { resources, views } = useAdminMeta();
+	const orderBy = `${field} asc`;
+	const loaded = useQuery({
+		queryKey: [...keys.list(model.name, filter, orderBy, 500, "hand-order"), fields.join(",")],
+		queryFn: async () => {
+			const labels = listLabels(resources, views, model, fields);
+			const page = await client.search(model.name, {
+				filter: filter || void 0,
+				orderBy,
+				pageSize: 500,
+				labels
+			});
+			return {
+				rows: withLabels(resources, model, fields, page.items, page.labels).map((row, index) => ({
+					...row,
+					id: recordId(model, page.items[index])
+				})),
+				more: Boolean(page.nextPageToken)
+			};
+		}
+	});
+	const [moved, setMoved] = useState();
+	const latest = useRef(void 0);
+	const saving = useRef(Promise.resolve());
+	const waiting = useRef(0);
+	const save = async () => {
+		const rows = latest.current;
+		if (!rows) return;
+		const etags = Object.fromEntries(rows.flatMap((row) => typeof row.etag === "string" ? [[encodeKey(recordKey(model, row)), row.etag]] : []));
+		const written = (await client.batchWrite([{
+			op: "reorder",
+			resource: model.name,
+			field,
+			keys: rows.map((row) => recordKey(model, row)),
+			etags
+		}])).results[0];
+		if (written?.op !== "reorder" || !latest.current) return;
+		const stored = new Map(written.records.map((entry) => [recordId(model, entry.record), entry]));
+		latest.current = latest.current.map((row) => {
+			const entry = stored.get(row.id);
+			return entry ? {
+				...row,
+				[field]: entry.record[field],
+				etag: entry.etag
+			} : row;
+		});
+	};
+	const refused = (error) => {
+		latest.current = void 0;
+		setMoved(void 0);
+		toast.show({
+			state: "error",
+			title: "Could not change the order",
+			description: refusalReason(error)
+		});
+	};
+	const settle = async () => {
+		waiting.current -= 1;
+		if (waiting.current > 0) return;
+		await refresh(model.name);
+		if (waiting.current > 0) return;
+		latest.current = void 0;
+		setMoved(void 0);
+	};
+	const move = (from, to) => {
+		const rows = latest.current ?? loaded.data?.rows;
+		if (!rows || from === to) return;
+		latest.current = arrayMove(rows, from, to);
+		setMoved(latest.current);
+		waiting.current += 1;
+		saving.current = saving.current.then(save).catch(refused).then(settle);
+	};
+	return {
+		rows: moved ?? loaded.data?.rows,
+		more: loaded.data?.more ?? false,
+		loading: loaded.isPending,
+		error: loaded.error,
+		move
+	};
+};
+//#endregion
+export { useHandOrder };

package/dist/app/list-page.js

@@ -14,7 +14,7 @@ import { parseSort, sortToOrderBy } from "./list-order.js";
 import { listedResource } from "./current-address.js";
 import { AppLink, useAppAddress } from "./use-app-address.js";
 import { can, rowAllows } from "./permissions.js";
-import { columnsFromModel } from "../live/columns-from-model.js";
+import { columnsFromModel, listColumnNames } from "../live/columns-from-model.js";
 import { pinnedStorageKey } from "../data-grid/pinned-storage.js";
 import { DataGrid } from "../data-grid/data-grid.js";
 import { useLiveRows } from "../live/use-live-rows.js";
@@ -52,6 +52,9 @@ import { SavedList } from "./saved/saved-list.js";
 import { SaveSearchButton } from "./searches/save-search-button.js";
 import { SavedSearches } from "./searches/saved-searches.js";
 import { useListCellEditor } from "./list-edit/use-list-cell-editor.js";
+import { listHandOrder } from "./hand-order/hand-order.js";
+import { HandSortedList } from "./hand-order/hand-sorted-list.js";
+import { SortButton } from "./hand-order/sort-button.js";
 import { useMemo, useState } from "react";
 import { Download, Plus, SlidersHorizontal } from "lucide-react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
@@ -160,7 +163,11 @@ const LoadedList = ({ model, address, scope, heading }) => {
 		related
 	});
 	const display = shownDisplay(view, address.display);
-	const pageScroll = display?.kind !== "map";
+	const permissions = usePermissions(resource);
+	const handOrder = scope ? void 0 : listHandOrder(model, permissions);
+	const [sorting, setSorting] = useState(false);
+	const handSorting = sorting && handOrder !== void 0;
+	const pageScroll = handSorting || display?.kind !== "map";
 	usePageScroll(pageScroll);
 	const displayRows = useDisplayRows(model, rows.page, rows.key, display?.kind === "custom");
 	const scroll = useListScroll();
@@ -172,7 +179,6 @@ const LoadedList = ({ model, address, scope, heading }) => {
 		snapshot: row
 	});
 	const singular = view?.names?.singular ?? humanize(resource);
-	const permissions = usePermissions(resource);
 	const cellEditing = useListCellEditor(model, view, permissions);
 	const { state: auth } = useAuth();
 	const restore = useRestore(model);
@@ -308,7 +314,12 @@ const LoadedList = ({ model, address, scope, heading }) => {
 		},
 		children: [/* @__PURE__ */ jsx(Download, { className: "size-3.5" }), desktop && "Export"]
 	});
-	const displaySwitch = (menu) => /* @__PURE__ */ jsx(DisplaySwitch, {
+	const sortButton = handOrder && /* @__PURE__ */ jsx(SortButton, {
+		sorting: handSorting,
+		onChange: setSorting,
+		iconOnly: !desktop
+	});
+	const displaySwitch = (menu) => !handSorting && /* @__PURE__ */ jsx(DisplaySwitch, {
 		view,
 		value: display?.name ?? tableDisplay,
 		onChange: (name) => set({ display: name }),
@@ -392,7 +403,19 @@ const LoadedList = ({ model, address, scope, heading }) => {
 			list: displayRows
 		});
 	};
-	const shown = drawDisplay();
+	const shown = handSorting ? /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-3",
+		children: [/* @__PURE__ */ jsx("p", {
+			className: "text-muted-foreground",
+			children: "Drag a row by its handle to move it. Every move is saved as you drop it."
+		}), /* @__PURE__ */ jsx(HandSortedList, {
+			model,
+			view,
+			field: handOrder,
+			filter: "",
+			columns: listColumnNames(model, view)
+		})]
+	}) : drawDisplay();
 	return /* @__PURE__ */ jsxs("div", {
 		className: "flex min-h-0 flex-1 flex-col gap-3 px-5 py-4",
 		children: [
@@ -404,11 +427,13 @@ const LoadedList = ({ model, address, scope, heading }) => {
 				aside: !desktop && displaySwitch(true),
 				actions: desktop ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
 					displaySwitch(false),
+					sortButton,
 					saveSearch,
 					importButton,
 					exportButton,
 					createButton
 				] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
+					sortButton,
 					saveSearch,
 					importButton,
 					exportButton,
@@ -419,11 +444,11 @@ const LoadedList = ({ model, address, scope, heading }) => {
 				title: "The filter in the address could not be read",
 				error: new Error(parsed.errors.map((error) => error.message).join("; "))
 			}),
-			rows.error && !display && /* @__PURE__ */ jsx(ErrorBanner, {
+			rows.error && !display && !handSorting && /* @__PURE__ */ jsx(ErrorBanner, {
 				title: "Could not load rows",
 				error: rows.error
 			}),
-			view?.chart && (isGroupChart(view.chart) ? /* @__PURE__ */ jsx(ListGroupChart, {
+			view?.chart && !handSorting && (isGroupChart(view.chart) ? /* @__PURE__ */ jsx(ListGroupChart, {
 				model,
 				view,
 				chart: view.chart,
@@ -436,8 +461,8 @@ const LoadedList = ({ model, address, scope, heading }) => {
 				noun: plural.toLowerCase(),
 				filter: loadFilter
 			})),
-			desktop ? desktopToolbar : phoneFilters,
-			desktop && layout === "panel" ? /* @__PURE__ */ jsxs("div", {
+			!handSorting && (desktop ? desktopToolbar : phoneFilters),
+			desktop && layout === "panel" && !handSorting ? /* @__PURE__ */ jsxs("div", {
 				className: "flex min-h-0 flex-1 gap-4",
 				children: [/* @__PURE__ */ jsx("div", {
 					className: pageScroll ? "sticky top-[calc(var(--pb-sticky-top,0px)+1rem)] flex max-h-[calc(100dvh-var(--pb-sticky-top,0px)-var(--pb-sticky-bottom,0px)-2rem)] shrink-0 self-start" : "flex shrink-0",

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],