@protobase/ui 0.21.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/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/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

@@ -34,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";
@@ -130,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;
@@ -192,11 +195,14 @@ const LoadedRecord = ({ model, recordKey, stored, preview }) => {
 		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: {
@@ -323,6 +329,7 @@ const LoadedRecord = ({ model, recordKey, stored, preview }) => {
 		})
 	] });
 	return /* @__PURE__ */ jsxs("div", {
+		ref: fieldsRef,
 		className: "flex flex-1 flex-col",
 		inert: preview,
 		children: [

package/dist/app/use-focus-first-invalid.js

@@ -0,0 +1,16 @@
+import { useEffect, useRef } from "react";
+//#region src/app/use-focus-first-invalid.ts
+/**
+* Puts focus on the first control marked invalid inside the element the ref is on, each time `rejections` counts
+* another save the server turned down, once the form shows why.
+*/
+const useFocusFirstInvalid = (rejections) => {
+	const ref = useRef(null);
+	useEffect(() => {
+		if (rejections === 0) return;
+		ref.current?.querySelector("[aria-invalid=\"true\"]")?.focus();
+	}, [rejections]);
+	return ref;
+};
+//#endregion
+export { useFocusFirstInvalid };

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

@@ -1,4 +1,5 @@
 import { useToast } from "../toasts/toast-provider.js";
+import { saveFailureDescription } from "./field-errors.js";
 import { useEffect, useRef, useState } from "react";
 import { isApiError } from "@protobase/client";
 //#region src/app/use-live-save.ts
@@ -35,14 +36,15 @@ const useLiveSave = (mode, subject) => {
 		} catch (error) {
 			if (!isApiError(error)) throw error;
 			const title = error.status === 412 ? "Changed by someone else" : "Could not save";
+			const description = saveFailureDescription(error);
 			if (id !== void 0) toast.update(id, {
 				state: "error",
 				title,
-				description: error.message
+				description
 			});
 			if (mode === "button") {
 				setPhase("idle");
-				setMessage(`${title}: ${error.message}`);
+				setMessage(`${title}: ${description}`);
 			}
 			return false;
 		}

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

@@ -2,6 +2,7 @@ import { keys } from "../data/query-keys.js";
 import { useClient } from "../data/api-provider.js";
 import { differs, toDraft, toPatchValue } from "../live/field-values.js";
 import { displayValue } from "../live/display-value.js";
+import { fieldErrors } from "./field-errors.js";
 import { useLiveSave } from "./use-live-save.js";
 import { readDraft, writeDraft } from "./draft-storage.js";
 import { isConflict, useUpdateRecord } from "../data/use-update-record.js";
@@ -27,6 +28,7 @@ const useRecordEditor = ({ model, stored, recordKey, mode, subject, draftKey, li
 	const [linesConflict, setLinesConflict] = useState(false);
 	const [conflicts, setConflicts] = useState({});
 	const [errors, setErrors] = useState({});
+	const [rejections, setRejections] = useState(0);
 	const changed = Object.entries(draft).filter(([name, entry]) => differs(model.fields[name], entry, stored.record[name]));
 	const fieldsDirty = changed.length > 0;
 	const dirty = fieldsDirty || Boolean(lines?.dirty);
@@ -74,7 +76,11 @@ const useRecordEditor = ({ model, stored, recordKey, mode, subject, draftKey, li
 		setConflicts(theirs);
 	};
 	const patchOf = () => Object.fromEntries(changed.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 reject = (error) => {
+		const found = fieldErrors(error);
+		setErrors(found);
+		if (Object.keys(found).length > 0) setRejections((count) => count + 1);
+	};
 	const saveRecordOnly = async () => {
 		try {
 			await update.mutateAsync({
@@ -83,7 +89,7 @@ const useRecordEditor = ({ model, stored, recordKey, mode, subject, draftKey, li
 			});
 		} catch (error) {
 			if (isConflict(error)) await adoptLatest();
-			else if (isApiError(error)) setErrors(fieldErrors(error));
+			else if (isApiError(error)) reject(error);
 			throw error;
 		}
 	};
@@ -102,7 +108,7 @@ const useRecordEditor = ({ model, stored, recordKey, mode, subject, draftKey, li
 				await adoptLatest();
 				await queryClient.invalidateQueries({ queryKey: ["list"] });
 				setLinesConflict(true);
-			} else if (isApiError(error)) setErrors(fieldErrors(error));
+			} else if (isApiError(error)) reject(error);
 			throw isApiError(error) ? nameFailingOperation(error, ops) : error;
 		}
 		await Promise.all([
@@ -146,7 +152,9 @@ const useRecordEditor = ({ model, stored, recordKey, mode, subject, draftKey, li
 		phase: feedback.phase,
 		message: feedback.message,
 		conflicts,
+		/** The server's problem with each field, from the last save. */
 		errors,
+		rejections,
 		keepMine: (name) => setConflicts((current) => without(current, name)),
 		useTheirs: (name) => {
 			setConflicts((current) => without(current, name));

package/dist/data-grid/grid-header.js

@@ -22,7 +22,8 @@ const GridHeader = ({ cells, specs, gutter, selectedCount, selectable, trailing,
 			children: [selectable && /* @__PURE__ */ jsx(Checkbox, {
 				checked: false,
 				indeterminate: selectedCount > 0,
-				label: "Clear selection",
+				label: selectedCount > 0 ? "Clear selection" : "No rows selected",
+				disabled: selectedCount === 0,
 				onChange: onClearSelection,
 				className: cn(selectedCount === 0 && "opacity-60")
 			}), gutter > 40 && /* @__PURE__ */ jsx("span", {

package/dist/index.d.ts

@@ -56,7 +56,8 @@ import { MenuSelect, MenuSelectProps } from "./primitives/menu-select.js";
 import { ChoiceOption, Choices, ChoicesProps } from "./primitives/choices.js";
 import { Dialog, DialogProps } from "./primitives/dialog.js";
 import { Field, FieldProps } from "./record-view/field.js";
+import { useFieldControl } from "./primitives/field-control.js";
 import { Section } from "./record-view/section.js";
 import { Form, FormProps } from "./app/create/form.js";
 import { Spinner } from "./primitives/spinner.js";
-export { ActionCard, type ActionCardProps, type ActionContext, type ActionHandler, ActionInputError, type ActionInputProps, ApiProvider, type ApiProviderProps, App, AppLink, type AppProps, AssistantDock, type AssistantDockProps, AuthLayout, type AuthLayoutProps, type BackendData, type BackendRefresh, type BeforeSignInProps, Button, type ButtonProps, type CardAction, type CardTone, ChatMessage, ChatThread, type ChatThreadProps, type ChoiceOption, Choices, type ChoicesProps, CodeForm, type CodeFormProps, CompactTable, type CompactTableProps, Composer, type ComposerProps, type CurrentAddress, Dialog, type DialogProps, type DiffLine, DiffView, type DiffViewProps, Field, FieldList, type FieldProps, type FieldWidget, type FieldWidgetEditorProps, type FieldWidgetProps, Form, type FormProps, Input, type InputProps, type LayoutRecord, type ListAddress, type ListChange, type ListDisplay, type ListDisplayRow, LogoMark, MenuSelect, type MenuSelectProps, type MetaData, OtpInput, type OtpInputProps, PartView, type PluginInfo, type ProjectUi, type RecordCardProps, RecordLink, ResendCodeButton, type ResendCodeButtonProps, ResponsiveDialog, type ResponsiveDialogProps, Section, Segmented, type SegmentedOption, type SegmentedProps, type ShellLogoProps, SidePanel, type SidePanelProps, SignInPrompt, type SignInPromptProps, Spinner, type Step, StepList, type StepState, Textarea, type TextareaProps, buttonClass, definePlugin, defineUi, diffStats, isConflict, mergeUi, parseDiff, pluginApi, protobaseVersion, uiFromModule, useApiToken, useAppAddress, useAssistant, useAssistantClient, useBackendData, useClient, useFacets, useHistogram, useLayoutRecord, useList, useListDisplay, useMeta, usePlugin, useRecord, useResourceClient, useSeries, useUpdateRecord };
+export { ActionCard, type ActionCardProps, type ActionContext, type ActionHandler, ActionInputError, type ActionInputProps, ApiProvider, type ApiProviderProps, App, AppLink, type AppProps, AssistantDock, type AssistantDockProps, AuthLayout, type AuthLayoutProps, type BackendData, type BackendRefresh, type BeforeSignInProps, Button, type ButtonProps, type CardAction, type CardTone, ChatMessage, ChatThread, type ChatThreadProps, type ChoiceOption, Choices, type ChoicesProps, CodeForm, type CodeFormProps, CompactTable, type CompactTableProps, Composer, type ComposerProps, type CurrentAddress, Dialog, type DialogProps, type DiffLine, DiffView, type DiffViewProps, Field, FieldList, type FieldProps, type FieldWidget, type FieldWidgetEditorProps, type FieldWidgetProps, Form, type FormProps, Input, type InputProps, type LayoutRecord, type ListAddress, type ListChange, type ListDisplay, type ListDisplayRow, LogoMark, MenuSelect, type MenuSelectProps, type MetaData, OtpInput, type OtpInputProps, PartView, type PluginInfo, type ProjectUi, type RecordCardProps, RecordLink, ResendCodeButton, type ResendCodeButtonProps, ResponsiveDialog, type ResponsiveDialogProps, Section, Segmented, type SegmentedOption, type SegmentedProps, type ShellLogoProps, SidePanel, type SidePanelProps, SignInPrompt, type SignInPromptProps, Spinner, type Step, StepList, type StepState, Textarea, type TextareaProps, buttonClass, definePlugin, defineUi, diffStats, isConflict, mergeUi, parseDiff, pluginApi, protobaseVersion, uiFromModule, useApiToken, useAppAddress, useAssistant, useAssistantClient, useBackendData, useClient, useFacets, useFieldControl, useHistogram, useLayoutRecord, useList, useListDisplay, useMeta, usePlugin, useRecord, useResourceClient, useSeries, useUpdateRecord };

package/dist/index.js

@@ -1,5 +1,6 @@
 import { LogoMark } from "./app-shell/logo.js";
 import { Segmented } from "./primitives/segmented.js";
+import { useFieldControl } from "./primitives/field-control.js";
 import { Input } from "./primitives/input.js";
 import { Spinner } from "./primitives/spinner.js";
 import { Button, buttonClass } from "./primitives/button.js";
@@ -49,4 +50,4 @@ import { isConflict, useUpdateRecord } from "./data/use-update-record.js";
 import { App } from "./app/app.js";
 import { RecordLink } from "./app/displays/record-link.js";
 import { Choices } from "./primitives/choices.js";
-export { ActionCard, ActionInputError, ApiProvider, App, AppLink, AssistantDock, AuthLayout, Button, ChatMessage, ChatThread, Choices, CodeForm, CompactTable, Composer, Dialog, DiffView, Field, FieldList, Form, Input, LogoMark, MenuSelect, OtpInput, PartView, RecordLink, ResendCodeButton, ResponsiveDialog, Section, Segmented, SidePanel, SignInPrompt, Spinner, StepList, Textarea, buttonClass, definePlugin, defineUi, diffStats, isConflict, mergeUi, parseDiff, pluginApi, protobaseVersion, uiFromModule, useApiToken, useAppAddress, useAssistant, useAssistantClient, useBackendData, useClient, useFacets, useHistogram, useLayoutRecord, useList, useListDisplay, useMeta, usePlugin, useRecord, useResourceClient, useSeries, useUpdateRecord };
+export { ActionCard, ActionInputError, ApiProvider, App, AppLink, AssistantDock, AuthLayout, Button, ChatMessage, ChatThread, Choices, CodeForm, CompactTable, Composer, Dialog, DiffView, Field, FieldList, Form, Input, LogoMark, MenuSelect, OtpInput, PartView, RecordLink, ResendCodeButton, ResponsiveDialog, Section, Segmented, SidePanel, SignInPrompt, Spinner, StepList, Textarea, buttonClass, definePlugin, defineUi, diffStats, isConflict, mergeUi, parseDiff, pluginApi, protobaseVersion, uiFromModule, useApiToken, useAppAddress, useAssistant, useAssistantClient, useBackendData, useClient, useFacets, useFieldControl, useHistogram, useLayoutRecord, useList, useListDisplay, useMeta, usePlugin, useRecord, useResourceClient, useSeries, useUpdateRecord };

package/dist/package.js

@@ -1,5 +1,5 @@
 //#region package.json
-var version = "0.21.0";
+var version = "0.21.1";
 var protobase = { "pluginApi": 1 };
 //#endregion
 export { protobase, version };

package/dist/primitives/checkbox.js

@@ -2,11 +2,12 @@ import { cn } from "../lib/cn.js";
 import { Check, Minus } from "lucide-react";
 import { jsx } from "react/jsx-runtime";
 //#region src/primitives/checkbox.tsx
-const Checkbox = ({ checked, indeterminate, onChange, label, className }) => /* @__PURE__ */ jsx("button", {
+const Checkbox = ({ checked, indeterminate, onChange, label, disabled, className }) => /* @__PURE__ */ jsx("button", {
 	type: "button",
 	role: "checkbox",
 	"aria-checked": indeterminate ? "mixed" : checked,
 	"aria-label": label,
+	disabled,
 	onClick: () => onChange?.(!checked),
 	className: cn("relative inline-flex size-4 shrink-0 items-center justify-center rounded border transition-colors after:absolute after:-inset-1 after:content-[\"\"] pointer-coarse:after:-inset-3.5", checked || indeterminate ? "border-primary bg-primary text-primary-foreground" : "border-border-strong bg-background hover:border-faint-foreground", className),
 	children: indeterminate ? /* @__PURE__ */ jsx(Minus, {

package/dist/primitives/field-control.d.ts

@@ -0,0 +1,19 @@
+//#region src/primitives/field-control.d.ts
+/**
+ * The attributes that tie a control to the `Field` around it: the id its label points at, its name, the help and error
+ * that describe it, and whether it is invalid or required. None outside a `Field`.
+ */
+export declare const useFieldControl: () => {
+  id?: undefined;
+  name?: undefined;
+  'aria-describedby'?: undefined;
+  'aria-invalid'?: undefined;
+  'aria-required'?: undefined;
+} | {
+  id: string;
+  name: string | undefined;
+  'aria-describedby': string | undefined;
+  'aria-invalid': true | undefined;
+  'aria-required': true | undefined;
+};
+//#endregion

package/dist/primitives/field-control.js

@@ -0,0 +1,21 @@
+import { createContext, useContext } from "react";
+//#region src/primitives/field-control.ts
+/** Set by a form's `Field` for the control inside it. */
+const FieldControlContext = createContext(void 0);
+/**
+* The attributes that tie a control to the `Field` around it: the id its label points at, its name, the help and error
+* that describe it, and whether it is invalid or required. None outside a `Field`.
+*/
+const useFieldControl = () => {
+	const control = useContext(FieldControlContext);
+	if (!control) return {};
+	return {
+		id: control.id,
+		name: control.name,
+		"aria-describedby": control.describedBy,
+		"aria-invalid": control.invalid || void 0,
+		"aria-required": control.required || void 0
+	};
+};
+//#endregion
+export { FieldControlContext, useFieldControl };

package/dist/primitives/input.js

@@ -1,16 +1,22 @@
 import { cn } from "../lib/cn.js";
+import { useFieldControl } from "./field-control.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/primitives/input.tsx
-const Input = ({ leading, trailing, invalid, className, wrapperClassName, ...rest }) => /* @__PURE__ */ jsxs("span", {
-	className: cn("flex h-8 items-center gap-2 rounded-md border bg-background px-2.5 text-muted-foreground shadow-sm focus-within:border-primary focus-within:ring-2 focus-within:ring-primary/20", invalid ? "border-danger" : "border-border-strong", wrapperClassName),
-	children: [
-		leading,
-		/* @__PURE__ */ jsx("input", {
-			className: cn("min-w-0 flex-1 bg-transparent text-body text-foreground outline-none placeholder:text-faint-foreground", className),
-			...rest
-		}),
-		trailing
-	]
-});
+const Input = ({ leading, trailing, invalid, className, wrapperClassName, ...rest }) => {
+	const control = useFieldControl();
+	return /* @__PURE__ */ jsxs("span", {
+		className: cn("flex h-8 items-center gap-2 rounded-md border bg-background px-2.5 text-muted-foreground shadow-sm focus-within:border-primary focus-within:ring-2 focus-within:ring-primary/20", invalid ? "border-danger" : "border-border-strong", wrapperClassName),
+		children: [
+			leading,
+			/* @__PURE__ */ jsx("input", {
+				className: cn("min-w-0 flex-1 bg-transparent text-body text-foreground outline-none placeholder:text-faint-foreground", className),
+				...control,
+				...invalid && { "aria-invalid": true },
+				...rest
+			}),
+			trailing
+		]
+	});
+};
 //#endregion
 export { Input };

package/dist/primitives/switch.js

@@ -1,14 +1,20 @@
 import { cn } from "../lib/cn.js";
+import { useFieldControl } from "./field-control.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/primitives/switch.tsx
-const Switch = ({ checked, onChange, label }) => /* @__PURE__ */ jsx("button", {
-	type: "button",
-	role: "switch",
-	"aria-checked": checked,
-	"aria-label": label,
-	onClick: () => onChange?.(!checked),
-	className: cn("relative inline-flex h-5 w-9 shrink-0 items-center rounded-full transition-colors", checked ? "bg-primary" : "bg-border-strong"),
-	children: /* @__PURE__ */ jsx("span", { className: cn("size-4 rounded-full bg-white shadow transition-transform", checked ? "translate-x-[18px]" : "translate-x-0.5") })
-});
+const Switch = ({ checked, onChange, label }) => {
+	const control = useFieldControl();
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		role: "switch",
+		id: control.id,
+		"aria-describedby": control["aria-describedby"],
+		"aria-checked": checked,
+		"aria-label": label,
+		onClick: () => onChange?.(!checked),
+		className: cn("relative inline-flex h-5 w-9 shrink-0 items-center rounded-full transition-colors", checked ? "bg-primary" : "bg-border-strong"),
+		children: /* @__PURE__ */ jsx("span", { className: cn("size-4 rounded-full bg-white shadow transition-transform", checked ? "translate-x-[18px]" : "translate-x-0.5") })
+	});
+};
 //#endregion
 export { Switch };

package/dist/primitives/textarea.js

@@ -1,4 +1,5 @@
 import { cn } from "../lib/cn.js";
+import { useFieldControl } from "./field-control.js";
 import { useEffect, useLayoutEffect, useRef } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/primitives/textarea.tsx
@@ -9,6 +10,7 @@ const fit = (box) => {
 /** A text box of several lines that grows with its text instead of scrolling inside. */
 const Textarea = ({ invalid, className, rows = 3, value, ...rest }) => {
 	const ref = useRef(null);
+	const control = useFieldControl();
 	useLayoutEffect(() => {
 		if (ref.current) fit(ref.current);
 	}, [value]);
@@ -29,6 +31,8 @@ const Textarea = ({ invalid, className, rows = 3, value, ...rest }) => {
 		rows,
 		value,
 		className: cn("block w-full resize-none overflow-hidden rounded-md border bg-background px-2.5 py-1.5 text-body text-foreground shadow-sm outline-none placeholder:text-faint-foreground focus:border-primary focus:ring-2 focus:ring-primary/20", invalid ? "border-danger" : "border-border-strong", className),
+		...control,
+		...invalid && { "aria-invalid": true },
 		...rest
 	});
 };

package/dist/record-view/field.d.ts

@@ -12,6 +12,8 @@ export type FieldConflict = {
   onUseTheirs: () => void;
 };
 export type FieldProps = {
+  /** The control's name, for the browser's autofill. */
+  name?: string;
   label: string;
   /** Marks the label with an asterisk. */
   required?: boolean;
@@ -23,5 +25,9 @@ export type FieldProps = {
   wide?: boolean;
   children: ReactNode;
 };
-export declare const Field: ({ label, required, help, example, error, conflict, wide, children }: FieldProps) => import("react").JSX.Element;
+/**
+ * A labelled form field. The `Input` or `Textarea` inside takes its label, its name, the help and error that describe
+ * it and whether it is invalid or required from the field; another control uses `useFieldControl`.
+ */
+export declare const Field: ({ name, label, required, help, example, error, conflict, wide, children }: FieldProps) => import("react").JSX.Element;
 //#endregion