@protobase/ui 0.19.14 → 0.19.16

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

@@ -2,10 +2,10 @@ import { cn } from "../../lib/cn.js";
 import { Skeleton } from "../../primitives/skeleton.js";
 import { humanize } from "../../live/naming.js";
 import { useAdminMeta, usePermissions } from "../meta-gate.js";
+import { Section } from "../../record-view/section.js";
 import { shownImage } from "../../live/file-values.js";
 import { ErrorBanner } from "../error-banner.js";
 import { FileImage } from "../../live/file-image.js";
-import { Section } from "../../record-view/section.js";
 import { galleryTiles } from "./gallery-layout.js";
 import { Lightbox } from "./lightbox.js";
 import { detailFields } from "./detail-fields.js";

package/dist/app/gallery/lightbox.js

@@ -1,9 +1,9 @@
 import { cn } from "../../lib/cn.js";
 import { useIsDesktop } from "../../lib/use-media-query.js";
 import { useFocusTrap } from "../../lib/use-focus-trap.js";
+import { Sheet } from "../../primitives/sheet.js";
 import { shownImage } from "../../live/file-values.js";
 import { FileImage } from "../../live/file-image.js";
-import { Sheet } from "../../primitives/sheet.js";
 import { keyStep, steppedPhoto, swipeStep, togglesDetails } from "./gallery-layout.js";
 import { readDetailsOpen, writeDetailsOpen } from "./details-open-storage.js";
 import { useEffect, useId, useRef, useState } from "react";

package/dist/app/gallery/photo-details.js

@@ -1,11 +1,11 @@
 import { Skeleton } from "../../primitives/skeleton.js";
 import { useRecord } from "../../data/use-record.js";
 import { humanize } from "../../live/naming.js";
-import { fieldAccess } from "../permissions.js";
-import { AppLink } from "../use-app-address.js";
+import { SpecTable } from "../../record-view/spec-table.js";
 import { ErrorBanner } from "../error-banner.js";
+import { AppLink } from "../use-app-address.js";
+import { fieldAccess } from "../permissions.js";
 import { FieldValue } from "../pages/field-value.js";
-import { SpecTable } from "../../record-view/spec-table.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/app/gallery/photo-details.tsx
 /**

package/dist/app/gallery/use-gallery-photos.js

@@ -5,7 +5,7 @@ import { galleryItems } from "./gallery-items.js";
 import { useQuery } from "@tanstack/react-query";
 import { createWhere, printFilter } from "@protobase/schema";
 //#region src/app/gallery/use-gallery-photos.ts
-const where = createWhere();
+const where$1 = createWhere();
 /**
 * A gallery's photos: the record's own image, then the photo records that point at it, read with the list API under
 * the user's own access, so its row filters and readable fields apply. Without the photos' resource in `/meta`, the
@@ -15,7 +15,7 @@ const useGalleryPhotos = (item, record, recordKey) => {
 	const client = useClient();
 	const { resources } = useAdminMeta();
 	const holder = item.photos ? resources[item.photos.resource] : void 0;
-	const filter = item.photos ? printFilter(where.eq(item.photos.field, recordKey)) : "";
+	const filter = item.photos ? printFilter(where$1.eq(item.photos.field, recordKey)) : "";
 	const sort = item.photos?.sort ?? "";
 	const rows = useQuery({
 		queryKey: keys.list(holder?.name ?? "", filter, sort, 500, "gallery"),

package/dist/app/import/import-dialog.js

@@ -1,7 +1,7 @@
 import { Button } from "../../primitives/button.js";
 import { humanize } from "../../live/naming.js";
-import { ErrorBanner } from "../error-banner.js";
 import { ResponsiveDialog } from "../../primitives/responsive-dialog.js";
+import { ErrorBanner } from "../error-banner.js";
 import { unmappedRequired } from "./mapping.js";
 import { ImportCheckStep, ImportChecking } from "./import-check-step.js";
 import { ImportFileStep } from "./import-file-step.js";

package/dist/app/import/lookups.js

@@ -1,6 +1,6 @@
 import { createWhere, printFilter } from "@protobase/schema";
 //#region src/app/import/lookups.ts
-const where = createWhere();
+const where$1 = createWhere();
 const valuesPerRequest = 100;
 /** A value as the lookups compare it: the API answers numbers as numbers and the rest as text. */
 const lookupKey = (value) => String(value);
@@ -23,7 +23,7 @@ const createLookups = (clientFor) => {
 		for (let at = 0; at < missing.length; at += valuesPerRequest) {
 			const asked = missing.slice(at, at + valuesPerRequest);
 			for (const value of asked) found.set(lookupKey(value), []);
-			const filter = printFilter(where.in(field, asked));
+			const filter = printFilter(where$1.in(field, asked));
 			let pageToken;
 			do {
 				const page = await clientFor(model.name).list(model.name, {

package/dist/app/list-edit/cell-field-editor.js

@@ -0,0 +1,61 @@
+import { differs, toFieldDraft, toPatchValue } from "../../live/field-values.js";
+import { FieldEditor } from "../field-editor.js";
+import { useEffect, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/app/list-edit/cell-field-editor.tsx
+/**
+* A field's editor in a list cell, the one the record page uses: Enter, Tab and leaving the cell save a change, and Tab
+* and Shift+Tab go on to the next or previous editable cell; Escape leaves it as it was. A built-in switch or choice
+* saves as soon as it changes.
+*/
+const CellFieldEditor = ({ field, hints, resource, stored, onSave, close }) => {
+	const [draft, setDraft] = useState(() => toFieldDraft(field, stored));
+	const ref = useRef(null);
+	const finished = useRef(false);
+	const instant = !hints?.widget && (field.type === "boolean" || field.type === "enum");
+	useEffect(() => {
+		ref.current?.querySelector("input, select, textarea, button, [tabindex]")?.focus();
+	}, []);
+	const finish = (save, move, value = draft) => {
+		if (finished.current) return;
+		finished.current = true;
+		if (save && differs(field, value, stored)) onSave(toPatchValue(field, value));
+		close(move);
+	};
+	const onKeyDown = (event) => {
+		if (event.key === "Enter") {
+			event.preventDefault();
+			finish(true);
+		} else if (event.key === "Tab") {
+			event.preventDefault();
+			finish(true, event.shiftKey ? -1 : 1);
+		} else if (event.key === "Escape") {
+			event.preventDefault();
+			event.stopPropagation();
+			finish(false);
+		}
+	};
+	const onBlur = (event) => {
+		if (!ref.current?.contains(event.relatedTarget)) finish(true);
+	};
+	const onChange = (next) => {
+		setDraft(next);
+		if (instant) finish(true, void 0, next);
+	};
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: "w-full min-w-0",
+		onKeyDown,
+		onBlur,
+		children: /* @__PURE__ */ jsx(FieldEditor, {
+			field,
+			hints,
+			value: draft,
+			stored,
+			resource,
+			onChange
+		})
+	});
+};
+//#endregion
+export { CellFieldEditor };

package/dist/app/list-edit/use-list-cell-editor.js

@@ -0,0 +1,30 @@
+import { isEditable } from "../../live/field-values.js";
+import { can, rowAllows } from "../permissions.js";
+import { CellFieldEditor } from "./cell-field-editor.js";
+import { useListEdits } from "./use-list-edits.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/app/list-edit/use-list-cell-editor.tsx
+/**
+* The list's cells edited in place: the view's `editable` columns, which `/meta` keeps to the fields the caller may
+* write, of the rows the caller may change. `patches` are the values saved since the rows loaded, for the grid to show.
+*/
+const useListCellEditor = (model, view, permissions) => {
+	const edits = useListEdits(model);
+	const columns = view?.list?.editable ?? [];
+	return {
+		editor: columns.length > 0 && can(permissions, "update") ? {
+			editable: (row, column) => columns.includes(column) && model.fields[column] !== void 0 && isEditable(model.fields[column]) && rowAllows(row, "update"),
+			render: (row, column, close) => /* @__PURE__ */ jsx(CellFieldEditor, {
+				field: model.fields[column],
+				hints: view?.fields[column],
+				resource: model.name,
+				stored: row[column],
+				onSave: (value) => void edits.save(row, column, value),
+				close
+			})
+		} : void 0,
+		patches: edits.patches
+	};
+};
+//#endregion
+export { useListCellEditor };

package/dist/app/list-edit/use-list-edits.js

@@ -0,0 +1,75 @@
+import { keys } from "../../data/query-keys.js";
+import { useClient } from "../../data/api-provider.js";
+import { recordKey } from "../../live/model-helpers.js";
+import { useToast } from "../../toasts/toast-provider.js";
+import { useRef, useState } from "react";
+import { isApiError } from "@protobase/client";
+import { useQueryClient } from "@tanstack/react-query";
+import { encodeKey } from "@protobase/schema/internal";
+//#region src/app/list-edit/use-list-edits.ts
+/**
+* The list's edits in place: `patches` holds, by row id, the values saving or saved since the rows loaded, with the
+* ETag each saved row has now. `save` sends one field as a PATCH with the row's ETag, after any save of the same row
+* still under way. A refusal puts the old value back, or the record's current one when someone else changed it, and
+* says why in a toast.
+*/
+const useListEdits = (model) => {
+	const client = useClient();
+	const queryClient = useQueryClient();
+	const toast = useToast();
+	const [patches, setPatches] = useState(/* @__PURE__ */ new Map());
+	const current = useRef(patches);
+	const queues = useRef(/* @__PURE__ */ new Map());
+	const patch = (id, values) => {
+		current.current = new Map(current.current).set(id, {
+			...current.current.get(id),
+			...values
+		});
+		setPatches(current.current);
+	};
+	const send = async (row, name, value) => {
+		const key = recordKey(model, row);
+		const etag = String(current.current.get(row.id)?.etag ?? row.etag);
+		try {
+			const stored = await client.update(model.name, key, { [name]: value }, etag);
+			patch(row.id, {
+				[name]: stored.record[name],
+				etag: stored.etag
+			});
+			queryClient.setQueryData(keys.record(model.name, encodeKey(key)), stored);
+			queryClient.invalidateQueries({ queryKey: ["page", model.name] });
+			queryClient.invalidateQueries({ queryKey: ["list", model.name] });
+			queryClient.invalidateQueries({ queryKey: ["map", model.name] });
+		} catch (error) {
+			if (!isApiError(error)) {
+				patch(row.id, { [name]: row[name] });
+				throw error;
+			}
+			const changed = error.status === 412;
+			const latest = changed ? await client.get(model.name, key) : void 0;
+			patch(row.id, latest ? {
+				[name]: latest.record[name],
+				etag: latest.etag
+			} : { [name]: row[name] });
+			const reason = error.errors.find((entry) => entry.field === name)?.message ?? error.message;
+			toast.show({
+				state: "error",
+				title: changed ? "Changed by someone else" : "Could not save",
+				description: reason
+			});
+		}
+	};
+	/** Saves `value` as the field `name` of `row`, as the grid shows it before the edit. */
+	const save = (row, name, value) => {
+		patch(row.id, { [name]: value });
+		const queued = (queues.current.get(row.id) ?? Promise.resolve()).then(() => send(row, name, value));
+		queues.current.set(row.id, queued.catch(() => void 0));
+		return queued;
+	};
+	return {
+		patches,
+		save
+	};
+};
+//#endregion
+export { useListEdits };

package/dist/app/list-page.js

@@ -7,12 +7,13 @@ import { recordKey, recordTitleField } 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, rowAllows } from "./permissions.js";
-import { loadedFields, shownDisplay } from "./displays/list-displays.js";
+import { Sheet } from "../primitives/sheet.js";
+import { ErrorBanner } from "./error-banner.js";
+import { displayRow, loadedFields, shownDisplay } from "./displays/list-displays.js";
 import { parseSort, sortToOrderBy } from "./list-order.js";
 import { listedResource } from "./current-address.js";
 import { AppLink, useAppAddress } from "./use-app-address.js";
-import { ErrorBanner } from "./error-banner.js";
+import { can, rowAllows } from "./permissions.js";
 import { columnsFromModel } from "../live/columns-from-model.js";
 import { pinnedStorageKey } from "../data-grid/pinned-storage.js";
 import { DataGrid } from "../data-grid/data-grid.js";
@@ -25,8 +26,11 @@ import { FilterPanel } from "../filter-panel/filter-panel.js";
 import { stateToText, textToState } from "../live/filter-string.js";
 import { widgetFields } from "../live/view-fields.js";
 import { facetNames, filterChips } from "./searches/saved-search.js";
-import { Sheet } from "../primitives/sheet.js";
+import { useSeedRecord } from "./record-preview.js";
 import { SignInPrompt } from "../auth/sign-in-prompt.js";
+import { relatedColumnLoads } from "./related-dots/dot-card.js";
+import { useDisplayRows } from "./displays/use-display-rows.js";
+import { BoardDisplay } from "./displays/board-display.js";
 import { CustomDisplay } from "./displays/custom-display.js";
 import { MapDisplay } from "./displays/map-display.js";
 import { DisplaySwitch, SortMenu } from "./displays/display-controls.js";
@@ -39,22 +43,21 @@ import { ImportButton } from "./import/import-button.js";
 import { exportOffered, exportsSelection } from "./export/export-options.js";
 import { useExportFlow } from "./export/use-export-flow.js";
 import { ListCards } from "./displays/list-cards.js";
-import { useDisplayRows } from "./displays/use-display-rows.js";
 import { useListScroll } from "./list-scroll.js";
 import { ListChart } from "./list-chart.js";
 import { ListSearch } from "./list-search.js";
-import { relatedColumnLoads } from "./related-dots/dot-card.js";
 import { withRelatedDotsColumns } from "./related-dots/related-dots-columns.js";
 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 { useMemo, useState } from "react";
 import { Download, Plus, SlidersHorizontal } from "lucide-react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { createWhere } from "@protobase/schema";
 import { tableDisplay } from "@protobase/schema/internal";
 //#region src/app/list-page.tsx
-const where = createWhere();
+const where$1 = createWhere();
 const searchText = (extras) => extras.find((clause) => clause.kind === "search");
 /**
 * A resource's list: its rows, with `listOf` the records its relation points at (`SavedList`), or with `searchesOf` the
@@ -169,6 +172,7 @@ const LoadedList = ({ model, address, scope, heading }) => {
 	});
 	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);
 	const remove = useDeleteFlow({
@@ -185,7 +189,7 @@ const LoadedList = ({ model, address, scope, heading }) => {
 	const search = searchText(extras);
 	const commitSearch = (text) => {
 		const others = extras.filter((clause) => clause.kind !== "search");
-		setFilter(state, text ? [...others, where.search(text)] : others);
+		setFilter(state, text ? [...others, where$1.search(text)] : others);
 	};
 	const plural = view?.names?.plural ?? humanize(resource);
 	const sortMenu = display && /* @__PURE__ */ jsx(SortMenu, {
@@ -309,17 +313,23 @@ const LoadedList = ({ model, address, scope, heading }) => {
 		onChange: (name) => set({ display: name }),
 		menu
 	});
-	const openRecord = (row) => go({
-		kind: "record",
-		resource,
-		key: recordKey(model, row)
-	});
+	const seedRecord = useSeedRecord(model);
+	const openRecord = (row) => {
+		seedRecord(displayRow(model, row).record);
+		go({
+			kind: "record",
+			resource,
+			key: recordKey(model, row)
+		});
+	};
 	const table = rows.source ? /* @__PURE__ */ jsx(DataGrid, {
 		columns,
 		source: rows.source,
 		sort: parseSort(orderBy),
 		onSortChange: (sort) => set({ orderBy: sortToOrderBy(sort) }),
 		onOpenRow: openRecord,
+		cellEditor: cellEditing.editor,
+		rowPatches: cellEditing.patches,
 		initialScrollIndex: scroll.initialIndex,
 		onScrollIndex: scroll.remember,
 		rowActions: [{
@@ -368,6 +378,14 @@ const LoadedList = ({ model, address, scope, heading }) => {
 			onMove: (map) => set({ map }),
 			flush: true
 		});
+		if (display.kind === "board") return /* @__PURE__ */ jsx(BoardDisplay, {
+			model,
+			view,
+			display,
+			fields: loaded,
+			filter: loadFilter,
+			orderBy
+		});
 		return /* @__PURE__ */ jsx(CustomDisplay, {
 			display,
 			list: displayRows

package/dist/app/map/map-area.js

@@ -1,6 +1,6 @@
 import { createWhere, printFilter } from "@protobase/schema";
 //#region src/app/map/map-area.ts
-const where = createWhere();
+const where$1 = createWhere();
 /** The whole world from as far out as a map goes: what a map asks for before it knows where its records are. */
 const worldArea = {
 	bounds: {
@@ -20,11 +20,11 @@ const wrapped = (longitude) => ((longitude + 180) % 360 + 360) % 360 - 180;
 * A view across the antimeridian takes the longitudes on both sides of it, and one around the whole world takes them all.
 */
 const boundsFilter = (fields, bounds) => {
-	const latitude = [where.gte(fields.latitude, down(Math.max(bounds.south, -90))), where.lte(fields.latitude, up(Math.min(bounds.north, 90)))];
-	if (bounds.east - bounds.west >= 360) return where.and(...latitude);
-	const west = where.gte(fields.longitude, down(wrapped(bounds.west)));
-	const east = where.lte(fields.longitude, up(wrapped(bounds.east)));
-	return wrapped(bounds.west) <= wrapped(bounds.east) ? where.and(...latitude, west, east) : where.and(...latitude, where.or(west, east));
+	const latitude = [where$1.gte(fields.latitude, down(Math.max(bounds.south, -90))), where$1.lte(fields.latitude, up(Math.min(bounds.north, 90)))];
+	if (bounds.east - bounds.west >= 360) return where$1.and(...latitude);
+	const west = where$1.gte(fields.longitude, down(wrapped(bounds.west)));
+	const east = where$1.lte(fields.longitude, up(wrapped(bounds.east)));
+	return wrapped(bounds.west) <= wrapped(bounds.east) ? where$1.and(...latitude, west, east) : where$1.and(...latitude, where$1.or(west, east));
 };
 /** The list's filter, its search included, narrowed to the records inside the map's bounds. */
 const areaFilter = (listFilter, fields, bounds) => {

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

@@ -25,12 +25,14 @@ const openLink = (target) => {
 	else window.location.assign(target);
 };
 const hostOf = (target) => URL.canParse(target) ? new URL(target).hostname.replace(/^www\./, "") : "";
+const holdsAll = (record, values) => Object.entries(values).every(([name, value]) => Object.is(record[name], value));
 /**
-* `action` as it shows for `record`: a link whose `href` has no target there is left out, and `{host}` in a link's label
-* becomes the host its target opens, without `www.`.
+* `action` as it shows for `record`: an update that would change nothing there, and a link whose `href` has no target
+* there, are left out, and `{host}` in a link's label becomes the host its target opens, without `www.`.
 */
 const actionFor = (action, record) => {
 	const run = action.run;
+	if (run?.kind === "update") return record && holdsAll(record, run.values) ? void 0 : action;
 	if (run?.kind !== "link" || !("href" in run)) return action;
 	const target = linkTarget(run.href, record);
 	if (target === void 0) return void 0;

package/dist/app/pages/action-inputs/action-inputs-dialog.d.ts

@@ -0,0 +1,13 @@
+import { ActionInputModel, JsonValue } from "@protobase/schema";
+//#region src/app/pages/action-inputs/action-inputs-dialog.d.ts
+/** What a custom input's component gets, as a field type's editor does: the answer, a way to set it, whether it is refused, and `props`. */
+export type ActionInputProps<V = unknown, P = Record<string, JsonValue>> = {
+  /** The input, as the action declares it. */
+  input: ActionInputModel;
+  value: V | null;
+  onChange: (value: V | null) => void;
+  invalid: boolean;
+  /** What the input gives in `props`; `{}` without. */
+  props: P;
+};
+//#endregion

package/dist/app/pages/action-inputs/action-inputs-dialog.js

@@ -0,0 +1,111 @@
+import { Button } from "../../../primitives/button.js";
+import { useProjectUi } from "../project-ui.js";
+import { useAdminMeta } from "../../meta-gate.js";
+import { ResponsiveDialog } from "../../../primitives/responsive-dialog.js";
+import { Field } from "../../../record-view/field.js";
+import { isChosen } from "../../create/create-values.js";
+import { ErrorBanner } from "../../error-banner.js";
+import { FieldEditor } from "../../field-editor.js";
+import { answeredValues, inputField, inputHints, refusedAnswers, startingAnswers } from "./input-answers.js";
+import { inputErrors } from "./input-errors.js";
+import { useId, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/app/pages/action-inputs/action-inputs-dialog.tsx
+const InputEditor = ({ input, held, invalid, onChange }) => {
+	const { resources, views } = useAdminMeta();
+	const { components } = useProjectUi();
+	if (input.kind === "custom") {
+		const Custom = components?.[input.component ?? ""];
+		if (!Custom) throw new Error(`Input "${input.name}": the app has no component "${input.component}"`);
+		return /* @__PURE__ */ jsx(Custom, {
+			input,
+			value: held ?? null,
+			onChange,
+			invalid,
+			props: input.props ?? {}
+		});
+	}
+	const target = input.resource === void 0 ? void 0 : resources[input.resource];
+	return /* @__PURE__ */ jsx(FieldEditor, {
+		field: inputField(input),
+		hints: inputHints(input),
+		value: isChosen(held) ? held.key : held,
+		stored: void 0,
+		relationLabel: isChosen(held) ? held.label : void 0,
+		relationPicker: target ? {
+			target,
+			view: views[target.name]
+		} : void 0,
+		invalid,
+		onChange
+	});
+};
+/** The dialog an action with inputs opens: the inputs that show, edited as on the create form, and the action's button. */
+const ActionInputsDialog = ({ action, label, danger, onCancel, onSubmit }) => {
+	const [draft, setDraft] = useState(() => startingAnswers(action.inputs));
+	const [errors, setErrors] = useState({});
+	const [failure, setFailure] = useState();
+	const [running, setRunning] = useState(false);
+	const formId = useId();
+	const { shown, values } = answeredValues(action.inputs, draft);
+	const submit = async () => {
+		const refused = refusedAnswers(action.inputs, values);
+		setErrors(refused);
+		setFailure(void 0);
+		if (Object.keys(refused).length > 0) return;
+		setRunning(true);
+		await onSubmit(values).catch((error) => {
+			setErrors(inputErrors(error, action.inputs));
+			setFailure(error);
+		});
+		setRunning(false);
+	};
+	const change = (name, value) => {
+		setErrors(({ [name]: _, ...rest }) => rest);
+		setDraft((current) => ({
+			...current,
+			[name]: value
+		}));
+	};
+	return /* @__PURE__ */ jsx(ResponsiveDialog, {
+		title: label,
+		description: action.confirm,
+		open: true,
+		onClose: onCancel,
+		actions: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Button, {
+			onClick: onCancel,
+			children: "Cancel"
+		}), /* @__PURE__ */ jsx(Button, {
+			variant: danger ? "danger" : "primary",
+			type: "submit",
+			form: formId,
+			loading: running,
+			children: label
+		})] }),
+		children: /* @__PURE__ */ jsxs("form", {
+			id: formId,
+			className: "flex flex-col gap-4",
+			onSubmit: (event) => {
+				event.preventDefault();
+				submit();
+			},
+			children: [failure !== void 0 && Object.keys(errors).length === 0 && /* @__PURE__ */ jsx(ErrorBanner, {
+				title: `${label} failed`,
+				error: failure
+			}), action.inputs.filter((input) => shown.has(input.name)).map((input) => /* @__PURE__ */ jsx(Field, {
+				label: input.label,
+				required: input.required,
+				help: input.help,
+				error: errors[input.name],
+				children: /* @__PURE__ */ jsx(InputEditor, {
+					input,
+					held: draft[input.name],
+					invalid: Boolean(errors[input.name]),
+					onChange: (next) => change(input.name, next)
+				})
+			}, input.name))]
+		})
+	});
+};
+//#endregion
+export { ActionInputsDialog };

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

@@ -0,0 +1,88 @@
+import { toDraft, toPatchValue } from "../../../live/field-values.js";
+import { isChosen } from "../../create/create-values.js";
+import { shownInputs } from "@protobase/schema/internal";
+//#region src/app/pages/action-inputs/input-answers.ts
+const fieldTypes = {
+	text: "text",
+	integer: "integer",
+	decimal: "decimal",
+	boolean: "boolean",
+	date: "date"
+};
+/** The field an input is edited as, so the create form's editors edit it: a choice of options is an enum, of records a relation. */
+const inputField = (input) => {
+	const base = {
+		name: input.name,
+		column: input.name,
+		nullable: true,
+		readOnly: false,
+		filterable: false,
+		sortable: false,
+		aliases: []
+	};
+	if (input.kind === "custom") return {
+		...base,
+		type: "json"
+	};
+	if (input.kind !== "choice") return {
+		...base,
+		type: fieldTypes[input.kind]
+	};
+	if (input.resource !== void 0) return {
+		...base,
+		type: "relation",
+		relation: {
+			resource: input.resource,
+			columns: [input.name]
+		}
+	};
+	return {
+		...base,
+		type: "enum",
+		enumValues: (input.options ?? []).map((option) => option.value)
+	};
+};
+/** The view hints an input's editor reads: its label, a box that grows for a multiline text, a choice's labels. */
+const inputHints = (input) => ({
+	label: input.label,
+	...input.multiline && { multiline: true },
+	...input.options && { valueLabels: Object.fromEntries(input.options.map((option) => [option.value, option.label])) }
+});
+/** What each input holds when the dialog opens: its default, as its editor holds it. */
+const startingAnswers = (inputs) => Object.fromEntries(inputs.map((input) => {
+	if (input.kind === "custom") return [input.name, input.default ?? null];
+	if (input.kind === "boolean") return [input.name, Boolean(input.default)];
+	return [input.name, toDraft(input.default)];
+}));
+const answerOf = (input, held) => {
+	if (input.kind === "custom") return held ?? null;
+	if (isChosen(held)) return held.key;
+	if (input.resource !== void 0) return String(held ?? "") === "" ? null : String(held);
+	return toPatchValue(inputField(input), held);
+};
+/** The answers of the inputs that show, as the handler gets them in `values`, and the names of those that show. */
+const answeredValues = (inputs, draft) => {
+	const all = Object.fromEntries(inputs.map((input) => [input.name, answerOf(input, draft[input.name])]));
+	const shown = shownInputs(inputs, all);
+	return {
+		shown,
+		values: Object.fromEntries(Object.entries(all).filter(([name]) => shown.has(name)))
+	};
+};
+const decimal = /^-?\d+(\.\d+)?$/;
+const date = /^\d{4}-\d{2}-\d{2}$/;
+const refusal = (input, value) => {
+	if (value === null || value === "") return input.required ? "Required" : void 0;
+	if (input.kind === "integer" && !Number.isInteger(value)) return "A whole number";
+	if (input.kind === "decimal" && !decimal.test(String(value))) return "A number";
+	if (input.kind === "date" && !date.test(String(value))) return "A date as YYYY-MM-DD";
+	if (input.max !== void 0 && String(value).length > input.max) return `At most ${input.max} characters`;
+};
+/** What is wrong with the answers that show, by input name: one left empty that is required, a number that is none, a text too long. */
+const refusedAnswers = (inputs, values) => Object.fromEntries(inputs.flatMap((input) => {
+	if (!Object.hasOwn(values, input.name)) return [];
+	const reason = refusal(input, values[input.name]);
+	return reason ? [[input.name, reason]] : [];
+}));
+//#endregion
+export { answeredValues, inputField, inputHints, refusedAnswers, startingAnswers };

package/dist/app/pages/action-inputs/input-errors.d.ts

@@ -0,0 +1,11 @@
+import { ActionInputModel } from "@protobase/schema";
+//#region src/app/pages/action-inputs/input-errors.d.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.
+ */
+export declare class ActionInputError extends Error {
+  readonly errors: Readonly<Record<string, string>>;
+  constructor(errors: Readonly<Record<string, string>>);
+}
+//#endregion