@protobase/ui 0.20.0 → 0.21.1

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/api-provider.d.ts

@@ -16,6 +16,10 @@ export declare const useClient: () => {
   }) => Promise<void>;
   undelete: <R extends import("@protobase/client").ResourceRef>(resource: R, key: import("@protobase/schema").KeyValue | readonly import("@protobase/schema").KeyValue[]) => Promise<import("@protobase/client").Stored<import("@protobase/client").RecordOf<R>>>;
   reveal: (resource: import("@protobase/client").ResourceRef, key: import("@protobase/schema").KeyValue | readonly import("@protobase/schema").KeyValue[], field: string) => Promise<unknown>;
+  history: (resource: import("@protobase/client").ResourceRef, key: import("@protobase/schema").KeyValue | readonly import("@protobase/schema").KeyValue[], { pageSize, pageToken }?: {
+    pageSize?: number;
+    pageToken?: string;
+  }) => Promise<import("@protobase/client").HistoryPage>;
   batchWrite: (ops: import("@protobase/client").BatchOp[]) => Promise<import("@protobase/client").BatchResult>;
   facets: (resource: import("@protobase/client").ResourceRef, field: string, o?: {
     filter?: import("@protobase/client").FilterInput;
@@ -57,6 +61,10 @@ export declare const useResourceClient: (resource: string) => {
   }) => Promise<void>;
   undelete: <R extends import("@protobase/client").ResourceRef>(resource: R, key: import("@protobase/schema").KeyValue | readonly import("@protobase/schema").KeyValue[]) => Promise<import("@protobase/client").Stored<import("@protobase/client").RecordOf<R>>>;
   reveal: (resource: import("@protobase/client").ResourceRef, key: import("@protobase/schema").KeyValue | readonly import("@protobase/schema").KeyValue[], field: string) => Promise<unknown>;
+  history: (resource: import("@protobase/client").ResourceRef, key: import("@protobase/schema").KeyValue | readonly import("@protobase/schema").KeyValue[], { pageSize, pageToken }?: {
+    pageSize?: number;
+    pageToken?: string;
+  }) => Promise<import("@protobase/client").HistoryPage>;
   batchWrite: (ops: import("@protobase/client").BatchOp[]) => Promise<import("@protobase/client").BatchResult>;
   facets: (resource: import("@protobase/client").ResourceRef, field: string, o?: {
     filter?: import("@protobase/client").FilterInput;

package/dist/data/query-keys.js

@@ -58,6 +58,14 @@ const keys = {
 		resource,
 		key
 	],
+	/** A record's changes; starts with `record`, so refreshing the record refreshes them too. */
+	history: (resource, key, pageSize) => [
+		"record",
+		resource,
+		key,
+		"history",
+		pageSize
+	],
 	facets: (resource, field, filter) => [
 		"facets",
 		resource,

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/format/date.js

@@ -25,6 +25,19 @@ const formatAgo = (seconds) => {
 	if (seconds < 86400) return `${Math.floor(seconds / 3600)} h ago`;
 	return `${Math.floor(seconds / 86400)} d ago`;
 };
-new Intl.RelativeTimeFormat("en", { numeric: "auto" });
+const relative = new Intl.RelativeTimeFormat("en", { numeric: "auto" });
+const units = [
+	["year", 31536e3],
+	["month", 2592e3],
+	["day", 86400],
+	["hour", 3600],
+	["minute", 60]
+];
+/** "5 minutes ago", "yesterday", "3 years ago"; `seconds` is how long ago it was. */
+const formatRelativeTime = (seconds) => {
+	const [unit, size] = units.find(([, size]) => seconds >= size) ?? ["second", 1];
+	if (unit === "second" && seconds < 45) return "just now";
+	return relative.format(-Math.floor(seconds / size), unit);
+};
 //#endregion
-export { formatAgo, formatDate, formatDateTime, formatDayShort };
+export { formatAgo, formatDate, formatDateTime, formatDayShort, formatRelativeTime };

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/live/field-values.js

@@ -21,6 +21,7 @@ const toPatchValue = (field, draft) => {
 	const text = String(draft).trim();
 	if (text === "") return field.nullable ? null : "";
 	if (field.type === "integer") return Number(text);
+	if (field.type === "relation") return typeof draft === "number" ? draft : text;
 	if (textEdited.has(field.type) || field.type === "enum") return text;
 	throw new Error(`Not implemented: editing ${field.type} fields`);
 };

package/dist/package.js

@@ -1,5 +1,5 @@
 //#region package.json
-var version = "0.20.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

package/dist/record-view/field.js

@@ -1,65 +1,92 @@
 import { Avatar } from "../primitives/avatar.js";
+import { FieldControlContext } from "../primitives/field-control.js";
 import { Button } from "../primitives/button.js";
+import { useId } from "react";
 import { TriangleAlert } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/record-view/field.tsx
-const Field = ({ label, required, help, example, error, conflict, wide, children }) => /* @__PURE__ */ jsxs("div", {
-	className: wide ? "sm:col-span-2" : void 0,
-	children: [
-		/* @__PURE__ */ jsxs("div", {
-			className: "mb-1.5 flex items-center gap-2",
-			children: [/* @__PURE__ */ jsxs("label", {
-				className: "font-medium text-foreground",
-				children: [label, required && /* @__PURE__ */ jsx("span", {
-					className: "ml-0.5 text-danger-text",
-					"aria-label": "required",
-					children: "*"
+/**
+* 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`.
+*/
+const Field = ({ name, label, required, help, example, error, conflict, wide, children }) => {
+	const id = useId();
+	const describedBy = [
+		help && `${id}-help`,
+		example && `${id}-example`,
+		error && `${id}-error`
+	].filter(Boolean).join(" ") || void 0;
+	return /* @__PURE__ */ jsxs("div", {
+		className: wide ? "sm:col-span-2" : void 0,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "mb-1.5 flex items-center gap-2",
+				children: [/* @__PURE__ */ jsxs("label", {
+					htmlFor: id,
+					className: "font-medium text-foreground",
+					children: [label, required && /* @__PURE__ */ jsx("span", {
+						className: "ml-0.5 text-danger-text",
+						"aria-hidden": "true",
+						children: "*"
+					})]
+				}), conflict && /* @__PURE__ */ jsxs("span", {
+					className: "inline-flex items-center gap-1.5 text-warning-text",
+					title: `${conflict.user.name} saved a different value`,
+					children: [/* @__PURE__ */ jsx(TriangleAlert, { className: "size-3.5" }), /* @__PURE__ */ jsx(Avatar, {
+						initials: conflict.user.initials,
+						hue: conflict.user.hue,
+						size: "xs"
+					})]
 				})]
-			}), conflict && /* @__PURE__ */ jsxs("span", {
-				className: "inline-flex items-center gap-1.5 text-warning-text",
-				title: `${conflict.user.name} saved a different value`,
-				children: [/* @__PURE__ */ jsx(TriangleAlert, { className: "size-3.5" }), /* @__PURE__ */ jsx(Avatar, {
-					initials: conflict.user.initials,
-					hue: conflict.user.hue,
-					size: "xs"
+			}),
+			/* @__PURE__ */ jsx(FieldControlContext, {
+				value: {
+					id,
+					name,
+					describedBy,
+					invalid: Boolean(error),
+					required: Boolean(required)
+				},
+				children
+			}),
+			help && /* @__PURE__ */ jsx("p", {
+				id: `${id}-help`,
+				className: "mt-1.5 text-xs text-muted-foreground",
+				children: help
+			}),
+			example && /* @__PURE__ */ jsxs("p", {
+				id: `${id}-example`,
+				className: "mt-0.5 text-xs text-faint-foreground",
+				children: ["Example: ", example]
+			}),
+			error && /* @__PURE__ */ jsx("p", {
+				id: `${id}-error`,
+				className: "mt-1.5 text-xs font-medium text-danger-text",
+				children: error
+			}),
+			conflict && /* @__PURE__ */ jsxs("div", {
+				className: "mt-2 flex items-center justify-between gap-3 rounded-md border border-warning/30 bg-warning-soft px-3 py-2 text-xs text-warning-text",
+				children: [/* @__PURE__ */ jsxs("span", { children: [
+					/* @__PURE__ */ jsx("strong", { children: conflict.user.name }),
+					" saved this ",
+					conflict.ago,
+					": ",
+					/* @__PURE__ */ jsx("strong", { children: conflict.theirValue })
+				] }), /* @__PURE__ */ jsxs("span", {
+					className: "flex gap-1.5",
+					children: [/* @__PURE__ */ jsx(Button, {
+						size: "sm",
+						onClick: conflict.onKeepMine,
+						children: "Keep mine"
+					}), /* @__PURE__ */ jsx(Button, {
+						size: "sm",
+						onClick: conflict.onUseTheirs,
+						children: "Use theirs"
+					})]
 				})]
-			})]
-		}),
-		children,
-		help && /* @__PURE__ */ jsx("p", {
-			className: "mt-1.5 text-xs text-muted-foreground",
-			children: help
-		}),
-		example && /* @__PURE__ */ jsxs("p", {
-			className: "mt-0.5 text-xs text-faint-foreground",
-			children: ["Example: ", example]
-		}),
-		error && /* @__PURE__ */ jsx("p", {
-			className: "mt-1.5 text-xs font-medium text-danger-text",
-			children: error
-		}),
-		conflict && /* @__PURE__ */ jsxs("div", {
-			className: "mt-2 flex items-center justify-between gap-3 rounded-md border border-warning/30 bg-warning-soft px-3 py-2 text-xs text-warning-text",
-			children: [/* @__PURE__ */ jsxs("span", { children: [
-				/* @__PURE__ */ jsx("strong", { children: conflict.user.name }),
-				" saved this ",
-				conflict.ago,
-				": ",
-				/* @__PURE__ */ jsx("strong", { children: conflict.theirValue })
-			] }), /* @__PURE__ */ jsxs("span", {
-				className: "flex gap-1.5",
-				children: [/* @__PURE__ */ jsx(Button, {
-					size: "sm",
-					onClick: conflict.onKeepMine,
-					children: "Keep mine"
-				}), /* @__PURE__ */ jsx(Button, {
-					size: "sm",
-					onClick: conflict.onUseTheirs,
-					children: "Use theirs"
-				})]
-			})]
-		})
-	]
-});
+			})
+		]
+	});
+};
 //#endregion
 export { Field };