@protobase/ui 0.21.0 → 0.21.2

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/related-section.js

@@ -1,13 +1,17 @@
 import { Skeleton } from "../primitives/skeleton.js";
 import { keys } from "../data/query-keys.js";
 import { useClient } from "../data/api-provider.js";
-import { useAdminMeta } from "./meta-gate.js";
+import { useAdminMeta, usePermissions } from "./meta-gate.js";
 import { Section } from "../record-view/section.js";
 import { ErrorBanner } from "./error-banner.js";
 import { listColumnNames } from "../live/columns-from-model.js";
 import { EmbeddedDisplaySwitch, EmbeddedList } from "./embedded-list/embedded-list.js";
 import { useEmbeddedDisplay } from "./embedded-list/use-embedded-display.js";
-import { jsx } from "react/jsx-runtime";
+import { relatedHandOrder } from "./hand-order/hand-order.js";
+import { HandSortedList } from "./hand-order/hand-sorted-list.js";
+import { SortButton } from "./hand-order/sort-button.js";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useQuery } from "@tanstack/react-query";
 import { createWhere, printFilter } from "@protobase/schema";
 //#region src/app/related-section.tsx
@@ -67,7 +71,8 @@ const Empty = ({ text }) => /* @__PURE__ */ jsx("p", {
 });
 /**
 * A record page section listing the first records of another resource that point at this record, directly or through
-* a join resource, in the list page's table or display, with a link to them all in the list.
+* a join resource, in the list page's table or display, with a link to them all in the list. When they are ordered by
+* hand within this record, **Sort** shows them all in their order, to be moved by their drag handles.
 */
 const RelatedSection = ({ item, recordKey, owner }) => {
 	const { resources, views } = useAdminMeta();
@@ -75,16 +80,40 @@ const RelatedSection = ({ item, recordKey, owner }) => {
 	const view = model && views[model.name];
 	const match = useMatch(item, recordKey);
 	const [display, pick] = useEmbeddedDisplay(view, `related:${owner}:${item.title}`, item.display);
+	const permissions = usePermissions(item.resource);
+	const [sorting, setSorting] = useState(false);
 	if (!model) return null;
 	const columns = item.columns ?? listColumnNames(model, view).filter((name) => name !== item.field);
-	return /* @__PURE__ */ jsx(Section, {
+	const handOrder = relatedHandOrder(item, model, permissions);
+	const displaySwitch = /* @__PURE__ */ jsx(EmbeddedDisplaySwitch, {
+		view,
+		value: display,
+		onChange: pick
+	});
+	const actions = handOrder ? /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center gap-2",
+		children: [!sorting && displaySwitch, /* @__PURE__ */ jsx(SortButton, {
+			size: "sm",
+			sorting,
+			onChange: setSorting
+		})]
+	}) : displaySwitch;
+	if (sorting && handOrder) return /* @__PURE__ */ jsx(Section, {
 		title: item.title,
 		help: item.help,
-		actions: /* @__PURE__ */ jsx(EmbeddedDisplaySwitch, {
+		actions,
+		children: /* @__PURE__ */ jsx(HandSortedList, {
+			model,
 			view,
-			value: display,
-			onChange: pick
-		}),
+			field: handOrder,
+			filter: printFilter(where$1.eq(item.field, recordKey)),
+			columns
+		})
+	});
+	return /* @__PURE__ */ jsx(Section, {
+		title: item.title,
+		help: item.help,
+		actions,
 		children: match.isPending ? /* @__PURE__ */ jsx(Loading, {}) : match.error ? /* @__PURE__ */ jsx(ErrorBanner, {
 			title: "Could not load",
 			error: match.error

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/data-grid.js

@@ -11,12 +11,14 @@ import { DataRow, SkeletonRow } from "./grid-row.js";
 import { usePagedRows } from "./use-paged-rows.js";
 import { useVirtualRows } from "./use-virtual-rows.js";
 import { useCellEditing } from "./use-cell-editing.js";
+import { ReorderRows, SortableRow } from "./row-reorder.js";
 import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { useTable } from "@tanstack/react-table";
 //#region src/data-grid/data-grid.tsx
 const headerHeight = 32;
-const DataGrid = ({ columns: given, source, naturalSort, initialScrollIndex = 0, onScrollIndex, latencyMs = 150, sort: controlledSort, onSortChange, onOpenRow, rowActions, cellEditor, rowPatches, bulkActions, pinKey, defaultPinned, rowNumbers = true, compact = false, selectable = true, fit = false, scroll = "own", className }) => {
+const DataGrid = ({ columns: given, source, naturalSort, initialScrollIndex = 0, onScrollIndex, latencyMs = 150, sort: controlledSort, onSortChange, onOpenRow, rowActions, cellEditor, rowPatches, bulkActions, pinKey, defaultPinned, rowNumbers = true, compact = false, selectable: selecting = true, reorder, fit = false, scroll = "own", className }) => {
+	const selectable = selecting && !reorder;
 	const rowHeight = compact ? 28 : 36;
 	const [pinned, setPinned] = usePinnedColumns(pinKey, defaultPinned);
 	const columns = useMemo(() => {
@@ -166,6 +168,46 @@ const DataGrid = ({ columns: given, source, naturalSort, initialScrollIndex = 0,
 			})
 		})
 	});
+	const rowsInView = loaded.map(({ index, offset, row }) => {
+		const frame = {
+			specs: columns,
+			gutter,
+			index,
+			offset,
+			height: rowHeight,
+			selectable,
+			trailing,
+			minScale,
+			scrolled: horizontal.scrolled,
+			pins,
+			lastPinned
+		};
+		const tableRow = row ? tableRows.get(row.id) : void 0;
+		if (!tableRow || !row) return /* @__PURE__ */ jsx(SkeletonRow, { ...frame }, `skeleton-${index}`);
+		const actions = trailing ? availableActions(rowActions, row) : [];
+		const props = {
+			...frame,
+			selected: tableRow.getIsSelected(),
+			onToggle: () => tableRow.toggleSelected(),
+			onOpen: onOpenRow ? () => onOpenRow(row) : void 0,
+			menu: actions.length > 0 ? /* @__PURE__ */ jsx(RowMenu, {
+				row,
+				actions
+			}) : void 0,
+			cells: tableRow.getAllCells().map((cell) => {
+				const content = /* @__PURE__ */ jsx(table.FlexRender, { cell });
+				return {
+					spec: columns.find((spec) => spec.id === cell.column.id),
+					...cellEditing ? cellEditing.cell(index, row, cell.column.id, content) : { content }
+				};
+			})
+		};
+		return reorder ? /* @__PURE__ */ jsx(SortableRow, {
+			...props,
+			row,
+			label: reorder.label(row)
+		}, row.id) : /* @__PURE__ */ jsx(DataRow, { ...props }, row.id);
+	});
 	const body = /* @__PURE__ */ jsx("div", {
 		ref: horizontal.attach,
 		onScroll: onBodyScroll,
@@ -177,41 +219,12 @@ const DataGrid = ({ columns: given, source, naturalSort, initialScrollIndex = 0,
 				minWidth,
 				height: geometry.contentHeight
 			},
-			children: loaded.map(({ index, offset, row }) => {
-				const frame = {
-					specs: columns,
-					gutter,
-					index,
-					offset,
-					height: rowHeight,
-					selectable,
-					trailing,
-					minScale,
-					scrolled: horizontal.scrolled,
-					pins,
-					lastPinned
-				};
-				const tableRow = row ? tableRows.get(row.id) : void 0;
-				if (!tableRow) return /* @__PURE__ */ jsx(SkeletonRow, { ...frame }, `skeleton-${index}`);
-				const actions = trailing && row ? availableActions(rowActions, row) : [];
-				return /* @__PURE__ */ jsx(DataRow, {
-					...frame,
-					selected: tableRow.getIsSelected(),
-					onToggle: () => tableRow.toggleSelected(),
-					onOpen: onOpenRow && row ? () => onOpenRow(row) : void 0,
-					menu: row && actions.length > 0 ? /* @__PURE__ */ jsx(RowMenu, {
-						row,
-						actions
-					}) : void 0,
-					cells: tableRow.getAllCells().map((cell) => {
-						const content = /* @__PURE__ */ jsx(table.FlexRender, { cell });
-						return {
-							spec: columns.find((spec) => spec.id === cell.column.id),
-							...cellEditing && row ? cellEditing.cell(index, row, cell.column.id, content) : { content }
-						};
-					})
-				}, row?.id);
-			})
+			children: reorder ? /* @__PURE__ */ jsx(ReorderRows, {
+				ids: Array.from({ length: total }, (_, index) => patchedRow(index)?.id ?? `missing-${index}`),
+				rowAt: patchedRow,
+				reorder,
+				children: rowsInView
+			}) : rowsInView
 		})
 	});
 	return /* @__PURE__ */ jsxs("div", {

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/data-grid/grid-row.js

@@ -33,13 +33,25 @@ const Gutter = ({ width, index, selectable, selected, onToggle, edge }) => /* @_
 		children: formatInt(index + 1)
 	})]
 });
-const DataRow = ({ cells, selected, onToggle, onOpen, menu, ...frame }) => /* @__PURE__ */ jsxs("div", {
+const dragStyle = (frame, dragY, transition) => ({
+	gridTemplateColumns: gridTemplate(frame.specs, frame.gutter, frame.trailing, frame.minScale),
+	height: frame.height,
+	top: frame.offset,
+	transform: dragY === 0 ? void 0 : `translateY(${dragY}px)`,
+	transition
+});
+const DataRow = ({ cells, selected, onToggle, onOpen, menu, handle, rowRef, dragY, transition, dragging, ...frame }) => /* @__PURE__ */ jsxs("div", {
+	ref: rowRef,
 	role: "row",
 	onClick: onOpen,
-	className: cn("absolute inset-x-0 top-0 grid items-center border-b", selected ? "bg-primary-soft" : "bg-background hover:bg-surface", onOpen && "cursor-pointer"),
-	style: frameStyle(frame),
+	className: cn("absolute inset-x-0 top-0 grid items-center border-b", selected ? "bg-primary-soft" : "bg-background hover:bg-surface", onOpen && "cursor-pointer", dragging && "z-30 bg-surface shadow-pop"),
+	style: dragY === void 0 ? frameStyle(frame) : dragStyle(frame, dragY, transition),
 	children: [
-		/* @__PURE__ */ jsx(Gutter, {
+		handle ? /* @__PURE__ */ jsx("div", {
+			className: cn("sticky left-0 z-10 flex h-full items-center bg-inherit pl-1.5", frame.scrolled && !frame.lastPinned && "shadow-[1px_0_0_var(--border),4px_0_6px_-2px_rgb(0_0_0/0.12)]"),
+			style: { width: frame.gutter },
+			children: handle
+		}) : /* @__PURE__ */ jsx(Gutter, {
 			width: frame.gutter,
 			index: frame.index,
 			selectable: frame.selectable,

package/dist/data-grid/row-reorder.js

@@ -0,0 +1,68 @@
+import { DataRow } from "./grid-row.js";
+import { GripVertical } from "lucide-react";
+import { jsx } from "react/jsx-runtime";
+import { DndContext, KeyboardSensor, MouseSensor, TouchSensor, closestCenter, useSensor, useSensors } from "@dnd-kit/core";
+import { SortableContext, sortableKeyboardCoordinates, useSortable, verticalListSortingStrategy } from "@dnd-kit/sortable";
+//#region src/data-grid/row-reorder.tsx
+const instructions = "To move a row, press Space on its handle, move it with the up and down arrow keys, and press Space again to drop it there. Escape puts it back.";
+/** The rows of a grid that are moved by hand, `ids` in their order, each loaded or not, so the drop's index is the row's place in the whole list. */
+const ReorderRows = ({ ids, rowAt, reorder, children }) => {
+	const sensors = useSensors(useSensor(MouseSensor, { activationConstraint: { distance: 4 } }), useSensor(TouchSensor, { activationConstraint: {
+		delay: 250,
+		tolerance: 5
+	} }), useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }));
+	const place = (id) => ids.indexOf(String(id));
+	const name = (id) => {
+		const row = rowAt(place(id));
+		return row ? reorder.label(row) : "row";
+	};
+	const announcements = {
+		onDragStart: ({ active }) => `Picked up ${name(active.id)}, row ${place(active.id) + 1} of ${ids.length}.`,
+		onDragOver: ({ active, over }) => over ? `${name(active.id)} is over row ${place(over.id) + 1} of ${ids.length}.` : void 0,
+		onDragEnd: ({ active, over }) => over ? `${name(active.id)} was dropped at row ${place(over.id) + 1} of ${ids.length}.` : `${name(active.id)} was put back.`,
+		onDragCancel: ({ active }) => `Moving ${name(active.id)} was cancelled. It is back at row ${place(active.id) + 1}.`
+	};
+	const end = ({ active, over }) => {
+		if (!over || active.id === over.id) return;
+		reorder.onMove(place(active.id), place(over.id));
+	};
+	return /* @__PURE__ */ jsx(DndContext, {
+		sensors,
+		collisionDetection: closestCenter,
+		onDragEnd: end,
+		accessibility: {
+			announcements,
+			screenReaderInstructions: { draggable: instructions }
+		},
+		children: /* @__PURE__ */ jsx(SortableContext, {
+			items: ids,
+			strategy: verticalListSortingStrategy,
+			children
+		})
+	});
+};
+/** A row moved by its handle, which takes the checkbox's place; it follows the pointer up and down only. */
+const SortableRow = ({ row, label, ...props }) => {
+	const { attributes, listeners, setNodeRef, setActivatorNodeRef, transform, transition, isDragging } = useSortable({ id: row.id });
+	const handle = /* @__PURE__ */ jsx("button", {
+		ref: setActivatorNodeRef,
+		type: "button",
+		"aria-label": `Move ${label}`,
+		...attributes,
+		...listeners,
+		onClick: (event) => event.stopPropagation(),
+		style: { touchAction: "none" },
+		className: "flex size-7 cursor-grab items-center justify-center rounded text-faint-foreground hover:bg-muted hover:text-foreground focus-visible:text-foreground active:cursor-grabbing pointer-coarse:size-9",
+		children: /* @__PURE__ */ jsx(GripVertical, { className: "size-4" })
+	});
+	return /* @__PURE__ */ jsx(DataRow, {
+		...props,
+		rowRef: setNodeRef,
+		handle,
+		dragY: transform?.y ?? 0,
+		transition,
+		dragging: isDragging
+	});
+};
+//#endregion
+export { ReorderRows, SortableRow };

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.2";
 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