@formancy/react 0.5.0 → 0.7.0

package/dist/index.d.mts

@@ -1,7 +1,7 @@
 import { ComponentType, ReactElement, ReactNode } from "react";
 import { ControlProps, FieldSnapshot, FormEngine, Path } from "@formancy/core";
 import { FormText, FormText as FormText$1, FormWordId, FormWordValues, FormWords, FormWordsByLocale, FormWordsByLocale as FormWordsByLocale$1 } from "@formancy/core/words";
-import { FieldType, RemoteOption, RichCommand } from "@formancy/spec";
+import { FieldType, RemoteOption, RemoteOptionsAnswer, RemoteOptionsAnswer as RemoteOptionsAnswer$1, RemoteOptionsPage, RichCommand } from "@formancy/spec";
 //#region src/context.d.ts
 export declare function FormancyProvider({ engine, words, children }: {
   engine: FormEngine;
@@ -58,6 +58,10 @@ interface RepeaterBinding {
   rowCount: number;
   /** Stable per-row keys, in row order. Never key a row by its index. */
   rowIds: readonly string[];
+  /** Whether the engine would add a row: under the repeater's `maxItems`, or unbounded. */
+  canAdd: boolean;
+  /** Whether the engine would remove a row: above the repeater's `minItems`. */
+  canRemove: boolean;
   addRow(): void;
   removeRow(index: number): void;
   /** Move a row. The keyboard route to reordering; a drag is a second route to this. */
@@ -246,7 +250,13 @@ interface OptionsRequest {
    * shows an opaque identifier. So the source answers in the right language instead.
    */
   locale: string;
-  /** How many rows the control can show. A hint: the control caps what arrives anyway. */
+  /**
+   * How many rows the control can show. A hint: the control caps what arrives anyway.
+   *
+   * A source that pages reads `limit + 1` rows to know whether there are more, answers a
+   * page of `limit`, and never counts the rest: a count reads every matching row on every
+   * keystroke, which is the scan paging exists to avoid.
+   */
   limit: number;
   /** Aborted when the answer stops being wanted — a newer keystroke, or an unmount. */
   signal: AbortSignal;
@@ -261,10 +271,26 @@ interface OptionsRequest {
  * surface on a self-hosted instance.
  */
 interface OptionsSource {
-  resolve(request: OptionsRequest): Promise<readonly RemoteOption[]>;
+  /**
+   * Every matching row, as a list — exactly as before a page could be answered, its true
+   * total included — or one page of them: `{ options, more, withheld? }`.
+   *
+   * `more` says rows match beyond these, and the control says so without a number, since
+   * nobody counted one. `withheld` counts rows the source matched and cannot hand over — a
+   * value a select could not store — because a source withholds and counts rather than
+   * filtering silently. A page with any other key, a `more` that is not a boolean or a
+   * `withheld` that is not a whole count is refused whole, and the field says its source
+   * failed rather than showing a list that looks complete
+   * ([0177](../../../docs/decisions/0177-a-source-may-say-its-list-goes-on.md)).
+   */
+  resolve(request: OptionsRequest): Promise<RemoteOptionsAnswer$1>;
   /** How long to wait after a keystroke before asking. The control has a default. */
   debounceMs?: number;
-  /** Below this many characters, do not ask at all. The control says so on screen. */
+  /**
+   * Below this many characters, do not ask at all. The control says so on screen: a
+   * typeahead how many to type, and a plain select — whose query is always empty, so it
+   * never asks — that its answers are found by searching.
+   */
   minQueryLength?: number;
   /** How many rows to show at once. */
   maxRows?: number;
@@ -509,5 +535,5 @@ interface ResumeNoticeProps {
 }
 export declare function ResumeNotice({ migration, labels }: ResumeNoticeProps): ReactElement | null;
 //#endregion
-export type { ErrorSummaryProps, FieldBinding, FieldComponent, FieldComponentProps, FormText, FormWordId, FormWordValues, FormWords, FormWordsByLocale, FormancyFormProps, OptionsRequest, OptionsSource, OptionsSources, Registry, RepeaterBinding, ResumeMigration, ResumeNoticeProps, RichTextEditorFactory, RichTextEditorHandle, RichTextEditorMount, ScanRequest, Scanner, StoredFile, SubmitOutcome, UploadOptions, Uploader, WizardBinding };
+export type { ErrorSummaryProps, FieldBinding, FieldComponent, FieldComponentProps, FormText, FormWordId, FormWordValues, FormWords, FormWordsByLocale, FormancyFormProps, OptionsRequest, OptionsSource, OptionsSources, Registry, RemoteOption, RemoteOptionsAnswer, RemoteOptionsPage, RepeaterBinding, ResumeMigration, ResumeNoticeProps, RichTextEditorFactory, RichTextEditorHandle, RichTextEditorMount, ScanRequest, Scanner, StoredFile, SubmitOutcome, UploadOptions, Uploader, WizardBinding };
 //# sourceMappingURL=index.d.mts.map

package/dist/index.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.mts","names":[],"sources":["../src/context.tsx","../src/use-field.ts","../src/use-repeater.ts","../src/use-wizard.ts","../src/use-submit.ts","../src/fields/internals.tsx","../src/form.tsx","../src/error-summary.tsx","../src/rich-text.tsx","../src/options-source.ts","../src/scanning.ts","../src/uploads.ts","../src/rich-text-editor.ts","../src/resume-notice.tsx"],"mappings":";;;;;wBAsBgB,mBACd,QACA,OACA;EAEA,QAAQ;;;;;;;EAOR,QAAQ;EACR,WAAW;oBACZ,IAAA;wBAsBe,iBAAiB;;;;;;;;;wBAkBjB,eAAe;;;UCvEd,qBAAqB;EACpC,SAAS;EACT;;EAEA,cAAc;;EAEd;IAAc;IAAY;;;EAE1B;IAAc;;;;;;;;;;;;;wBAaA,SAAS,eAAe,OAAO;;;UCrB9B;EACf;;EAEA;EACA;EACA,UAAU;;EAEV,QAAQ,cAAc;;;;;;;wBAQR,YAAY,eAAe,OAAO;;;UCjBjC;EACf;EACA;;;EAGA;EACA;;EAEA,QAAQ;EACR;;EAEA,KAAK;;;;;;;wBAQS,aAAa;;;;;;;;;;;wBCTb;EAAqB;EAAa,QAAQ;;;;;;;;;;;;;;;;;UCQzC;EACf;EACA;;KAGU,iBAAiB,cAAc;UAE1B;EACf,SAAS,QAAQ,OAAO,WAAW;EACnC,SAAS,eAAe;;UAGT;EACf;EACA,QAAQ;;EAER;;UAGe;;;;;;;EAOf,SAAS;EACT,WAAW;;;;;;;EAOX;EACA;EACA,YAAY,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;wBCAP,aAAa,OAAO,oCAAiB,IAAA;;;UCpDpC;EACf,SAAS;;;;;;;;;;;wBAYK,eAAe,UAAU,oCAAiB,IAAA;;;;;;;;;;;;;;;;;;;;wBCI1C,WAAW;EAAY;IAAmB;;;;;;;;;;UCZzC;;;;;EAKf;;EAEA;;EAEA;;EAEA;;EAEA;;;;;;;;;EASA;;EAEA;;EAEA,QAAQ;;;;;;;;;;;UAYO;EACf,QAAQ,SAAS,iBAAiB,iBAAiB;;EAEnD;;EAEA;;EAEA;;;;;;;;;;;;;KAcU,iBAAiB,SAAS,eAAe;qBAIxC,wCAAsB,SAAA,SAAA,eAAA;;;;;;;;;wBAUnB,qBAAqB;;;;;;;;;;;;UCxEpB;;EAEf;;EAEA;;;;;;;;;;;;;;;;;;;KAoBU,WAAW,SAAS,gBAAgB;qBAInC,iCAAe,SAAA;;;;;;;;wBASZ,cAAc;;;;;;;;;;;;;UCpCb;;EAEf;EACA;EACA;EACA;;EAEA;;;;;;;;;;UAWe;;;;;EAKf;;EAEA,QAAQ;;EAER,WAAW,cAAc;;;;;;;;;KAUf,YAAY,MAAM,MAAM,SAAS,kBAAkB,QAAQ;qBAI1D,kCAAgB,SAAA;;;;;;;;;wBAUb,eAAe;;;;;;;;;;;;;;;;;;;;;UC1Cd;;EAEf;;EAEA,WAAW;;;;;;;;;;;;;EAaX,MAAM,SAAS,aAAa;;EAE5B,WAAW,SAAS;EACpB;;UAGe;;WAEN,SAAS;;WAET;;WAEA,WAAW;WACX;;;;;;;;;;WAUA,YAAY,SAAS;;KAGpB,yBAAyB,OAAO,wBAAwB;qBAIvD,wCAAsB,SAAA;;;;;;;;;wBAUnB,4BAA4B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UC9C3B;WACN;WACA,SAAS;aAAyB;aAAuB;;;UAGnD;;WAEN,YAAY;;WAEZ,SAAS,SAAS;;wBAGb,eAAe,WAAW,UAAU,oBAAoB"}
+{"version":3,"file":"index.d.mts","names":[],"sources":["../src/context.tsx","../src/use-field.ts","../src/use-repeater.ts","../src/use-wizard.ts","../src/use-submit.ts","../src/fields/internals.tsx","../src/form.tsx","../src/error-summary.tsx","../src/rich-text.tsx","../src/options-source.ts","../src/scanning.ts","../src/uploads.ts","../src/rich-text-editor.ts","../src/resume-notice.tsx"],"mappings":";;;;;wBAsBgB,mBACd,QACA,OACA;EAEA,QAAQ;;;;;;;EAOR,QAAQ;EACR,WAAW;oBACZ,IAAA;wBAsBe,iBAAiB;;;;;;;;;wBAkBjB,eAAe;;;UCvEd,qBAAqB;EACpC,SAAS;EACT;;EAEA,cAAc;;EAEd;IAAc;IAAY;;;EAE1B;IAAc;;;;;;;;;;;;;wBAaA,SAAS,eAAe,OAAO;;;UCrB9B;EACf;;EAEA;;EAEA;;EAEA;EACA;EACA,UAAU;;EAEV,QAAQ,cAAc;;;;;;;wBAQR,YAAY,eAAe,OAAO;;;UCrBjC;EACf;EACA;;;EAGA;EACA;;EAEA,QAAQ;EACR;;EAEA,KAAK;;;;;;;wBAQS,aAAa;;;;;;;;;;;wBCTb;EAAqB;EAAa,QAAQ;;;;;;;;;;;;;;;;;UCQzC;EACf;EACA;;KAGU,iBAAiB,cAAc;UAE1B;EACf,SAAS,QAAQ,OAAO,WAAW;EACnC,SAAS,eAAe;;UAGT;EACf;EACA,QAAQ;;EAER;;UAGe;;;;;;;EAOf,SAAS;EACT,WAAW;;;;;;;EAOX;EACA;EACA,YAAY,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;wBCCP,aAAa,OAAO,oCAAiB,IAAA;;;UCrDpC;EACf,SAAS;;;;;;;;;;;wBAYK,eAAe,UAAU,oCAAiB,IAAA;;;;;;;;;;;;;;;;;;;;wBCI1C,WAAW;EAAY;IAAmB;;;;;;;;;;UCZzC;;;;;EAKf;;EAEA;;EAEA;;EAEA;;EAEA;;;;;;;;;EASA;;;;;;;;EAQA;;EAEA,QAAQ;;;;;;;;;;;UAYO;;;;;;;;;;;;;EAaf,QAAQ,SAAS,iBAAiB,QAAQ;;EAE1C;;;;;;EAMA;;EAEA;;;;;;;;;;;;;KAcU,iBAAiB,SAAS,eAAe;qBAIxC,wCAAsB,SAAA,SAAA,eAAA;;;;;;;;;wBAUnB,qBAAqB;;;;;;;;;;;;UC9FpB;;EAEf;;EAEA;;;;;;;;;;;;;;;;;;;KAoBU,WAAW,SAAS,gBAAgB;qBAInC,iCAAe,SAAA;;;;;;;;wBASZ,cAAc;;;;;;;;;;;;;UCpCb;;EAEf;EACA;EACA;EACA;;EAEA;;;;;;;;;;UAWe;;;;;EAKf;;EAEA,QAAQ;;EAER,WAAW,cAAc;;;;;;;;;KAUf,YAAY,MAAM,MAAM,SAAS,kBAAkB,QAAQ;qBAI1D,kCAAgB,SAAA;;;;;;;;;wBAUb,eAAe;;;;;;;;;;;;;;;;;;;;;UC1Cd;;EAEf;;EAEA,WAAW;;;;;;;;;;;;;EAaX,MAAM,SAAS,aAAa;;EAE5B,WAAW,SAAS;EACpB;;UAGe;;WAEN,SAAS;;WAET;;WAEA,WAAW;WACX;;;;;;;;;;WAUA,YAAY,SAAS;;KAGpB,yBAAyB,OAAO,wBAAwB;qBAIvD,wCAAsB,SAAA;;;;;;;;;wBAUnB,4BAA4B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UC9C3B;WACN;WACA,SAAS;aAAyB;aAAuB;;;UAGnD;;WAEN,YAAY;;WAEZ,SAAS,SAAS;;wBAGb,eAAe,WAAW,UAAU,oBAAoB"}

package/dist/index.mjs

@@ -1,7 +1,7 @@
 import { Fragment, createContext, useCallback, useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
 import { cancelUploads, fieldUploads, formatPath, parsePath, placedGroup, placedPage, thumbnailSize } from "@formancy/core";
-import { createFormText } from "@formancy/core/words";
-import { LAYOUT_LEAF_KINDS, acceptRemoteOptions, answerFromText, applyRichCommand, capRemoteOptions, datagridColumns, editMasked, formatMasked, isImageSource, layoutChildren, layoutNodeShows, maskIsNumeric, maskPlaceholder, narrowOptionsByLabel, parseRichText, resolveText, resolvedLocale } from "@formancy/spec";
+import { createFormText, optionsStatus } from "@formancy/core/words";
+import { LAYOUT_LEAF_KINDS, acceptRemoteAnswer, answerFromText, applyRichCommand, capRemoteAnswer, datagridColumns, editMasked, formatMasked, isImageSource, layoutChildren, layoutNodeShows, maskIsNumeric, maskPlaceholder, narrowOptionsByLabel, parseRichText, resolveText, resolvedLocale } from "@formancy/spec";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { flushSync } from "react-dom";
 import { encode } from "uqr";
@@ -103,6 +103,10 @@ function useRepeater(path) {
 	const subscribe = useCallback((onChange) => engine.subscribeField(parsed, onChange), [engine, parsed]);
 	const getRowCount = useCallback(() => engine.rowCount(parsed), [engine, parsed]);
 	const rowCount = useSyncExternalStore(subscribe, getRowCount, getRowCount);
+	const getCanAdd = useCallback(() => engine.canAddRow(parsed), [engine, parsed]);
+	const canAdd = useSyncExternalStore(subscribe, getCanAdd, getCanAdd);
+	const getCanRemove = useCallback(() => engine.canRemoveRow(parsed), [engine, parsed]);
+	const canRemove = useSyncExternalStore(subscribe, getCanRemove, getCanRemove);
 	const addRow = useCallback(() => engine.addRow(parsed), [engine, parsed]);
 	const removeRow = useCallback((index) => engine.removeRow(parsed, index), [engine, parsed]);
 	const moveRow = useCallback((from, to) => engine.moveRow(parsed, from, to), [engine, parsed]);
@@ -112,12 +116,16 @@ function useRepeater(path) {
 	return useMemo(() => ({
 		rowCount,
 		rowIds,
+		canAdd,
+		canRemove,
 		addRow,
 		removeRow,
 		moveRow
 	}), [
 		rowCount,
 		rowIds,
+		canAdd,
+		canRemove,
 		addRow,
 		removeRow,
 		moveRow
@@ -547,9 +555,13 @@ function useOptionsSources() {
 const DEBOUNCE_MS = 250;
 const MIN_QUERY = 0;
 const MAX_ROWS = 50;
+/**
+* Nothing left out, as one value: a reset that stores it again is the same state, so
+* React bails out of the render rather than repeating one.
+*/
+const COMPLETE = { kind: "complete" };
 function useSourcedOptions(field, query, enabled = true) {
 	const engine = useFormEngine();
-	const text = useFormText();
 	const sources = useOptionsSources();
 	const name = field.def.optionsSource;
 	const source = name === void 0 ? void 0 : sources?.[name];
@@ -557,19 +569,28 @@ function useSourcedOptions(field, query, enabled = true) {
 	const [named, setNamed] = useState(/* @__PURE__ */ new Map());
 	const [busy, setBusy] = useState(false);
 	const [failed, setFailed] = useState(false);
-	const [capped, setCapped] = useState(null);
+	const [completeness, setCompleteness] = useState(COMPLETE);
+	const [attempt, setAttempt] = useState(0);
+	const retry = useCallback(() => setAttempt((was) => was + 1), []);
 	const debounceMs = source?.debounceMs ?? DEBOUNCE_MS;
 	const minQueryLength = source?.minQueryLength ?? MIN_QUERY;
 	const maxRows = source?.maxRows ?? MAX_ROWS;
 	const stored = typeof field.value === "string" && field.value !== "" ? field.value : void 0;
 	const path = field.path;
+	const disabled = field.disabled;
 	const asked = useRef(0);
 	useEffect(() => {
-		if (!enabled || source === void 0) return;
 		const generation = asked.current += 1;
+		if (!enabled || source === void 0) return;
+		if (disabled) {
+			setBusy(false);
+			setFailed(false);
+			setCompleteness(COMPLETE);
+			return;
+		}
 		if (query.trim().length < minQueryLength) {
 			setRows([]);
-			setCapped(null);
+			setCompleteness(COMPLETE);
 			setBusy(false);
 			return;
 		}
@@ -588,23 +609,21 @@ function useSourcedOptions(field, query, enabled = true) {
 				signal: controller.signal
 			}).then((answer) => {
 				if (generation !== asked.current) return;
-				const accepted = acceptRemoteOptions(answer);
+				const accepted = acceptRemoteAnswer(answer);
 				if (accepted === void 0) {
 					setFailed(true);
 					setRows([]);
-					setCapped(null);
+					setCompleteness(COMPLETE);
 					return;
 				}
-				const { shown, total, capped: wasCapped } = capRemoteOptions(accepted, maxRows);
-				setRows(shown);
-				setCapped(wasCapped ? {
-					shown: shown.length,
-					total
-				} : null);
+				const settled = capRemoteAnswer(accepted, maxRows);
+				setRows(settled.shown);
+				setCompleteness(settled.completeness);
 			}).catch(() => {
 				if (generation !== asked.current) return;
 				setFailed(true);
 				setRows([]);
+				setCompleteness(COMPLETE);
 			}).finally(() => {
 				if (generation === asked.current) setBusy(false);
 			});
@@ -615,6 +634,7 @@ function useSourcedOptions(field, query, enabled = true) {
 		};
 	}, [
 		enabled,
+		disabled,
 		source,
 		name,
 		path,
@@ -622,7 +642,8 @@ function useSourcedOptions(field, query, enabled = true) {
 		minQueryLength,
 		maxRows,
 		debounceMs,
-		engine
+		engine,
+		attempt
 	]);
 	const askedFor = useRef(/* @__PURE__ */ new Set());
 	useEffect(() => {
@@ -640,11 +661,11 @@ function useSourcedOptions(field, query, enabled = true) {
 			limit: 1,
 			signal: controller.signal
 		}).then((answer) => {
-			const accepted = acceptRemoteOptions(answer);
+			const accepted = acceptRemoteAnswer(answer);
 			if (accepted === void 0) return;
 			setNamed((was) => {
 				const next = new Map(was);
-				for (const row of accepted) next.set(row.value, row.label);
+				for (const row of accepted.options) next.set(row.value, row.label);
 				return next;
 			});
 		}).catch(() => void 0);
@@ -677,33 +698,11 @@ function useSourcedOptions(field, query, enabled = true) {
 			busy,
 			failed,
 			needs: minQueryLength,
-			status: statusFor(text, {
-				failed,
-				busy,
-				needs: minQueryLength,
-				query,
-				capped
-			})
+			completeness,
+			retry
 		}
 	};
 }
-/**
-* The one thing the field says out loud, and never more than one.
-*
-* Success announces nothing: the listbox and `aria-activedescendant` are the
-* feedback, and a region that spoke on every successful keystroke would talk over
-* them. A failure is a sentence somebody can act on rather than a code.
-*/
-function statusFor(text, { failed, busy, needs, query, capped }) {
-	if (failed) return text("options.failed");
-	if (query.trim().length < needs) return text("options.tooShort", { count: needs });
-	if (busy) return text("options.searching");
-	if (capped !== null) return text("options.capped", {
-		shown: capped.shown,
-		total: capped.total
-	});
-	return "";
-}
 //#endregion
 //#region src/uploads.ts
 const UploaderContext = createContext(void 0);
@@ -784,11 +783,11 @@ function FieldShell({ path, field, label, children }) {
 * Not the text: a theme that keyed off English prose would break in every other
 * language the form is offered in.
 */
-function statusState({ sourced, open, matches }) {
+function statusState({ sourced, said, open, matches }) {
 	if (sourced.remote === null) return open && matches === 0 ? "empty" : void 0;
 	if (sourced.remote.busy) return "busy";
 	if (sourced.remote.failed) return "failed";
-	if (sourced.remote.status !== "") return "hint";
+	if (said !== "") return "hint";
 	return open && matches === 0 ? "empty" : void 0;
 }
 /**
@@ -867,7 +866,11 @@ function TypeaheadSelectField({ path, label, field }) {
 	* first clears the answer on the way out.
 	*/
 	const [query, setQuery] = useState(null);
-	const [open, setOpen] = useState(false);
+	const [opened, setOpen] = useState(false);
+	/** A field disabled by a rule while its list was showing has no list: nobody can
+	*  choose from it, and its region would say "no options match" under a read-only
+	*  answer. */
+	const open = opened && !field.disabled;
 	/** The arrowed-over option by VALUE, not by index: the filtered list changes on
 	*  every keystroke and an index would point at a different row after one. */
 	const [activeValue, setActiveValue] = useState(null);
@@ -876,6 +879,16 @@ function TypeaheadSelectField({ path, label, field }) {
 		path
 	}, query ?? "");
 	const options = sourced.options;
+	const said = sourced.remote === null ? "" : optionsStatus(text, {
+		control: "typeahead",
+		open,
+		disabled: field.disabled,
+		failed: sourced.remote.failed,
+		busy: sourced.remote.busy,
+		needs: sourced.remote.needs,
+		query: query ?? "",
+		completeness: sourced.remote.completeness
+	});
 	const chosen = options.find((option) => option.value === field.value);
 	const matches = sourced.remote === null ? narrowOptionsByLabel(options, query ?? "") : options;
 	/** Collapsed whenever there is nothing on the screen, so `aria-expanded` never
@@ -988,14 +1001,16 @@ function TypeaheadSelectField({ path, label, field }) {
 			"data-formancy-part": "typeahead-status",
 			...statusState({
 				sourced,
+				said,
 				open,
 				matches: matches.length
 			}) === void 0 ? {} : { "data-state": statusState({
 				sourced,
+				said,
 				open,
 				matches: matches.length
 			}) },
-			children: sourced.remote !== null && sourced.remote.status !== "" ? sourced.remote.status : open && matches.length === 0 && sourced.remote?.busy !== true ? text("options.noMatch") : ""
+			children: said !== "" ? said : open && matches.length === 0 && sourced.remote?.busy !== true ? text("options.noMatch") : ""
 		})]
 	});
 }
@@ -1031,6 +1046,17 @@ function SelectField({ path, label }) {
 		path
 	}, "", field.def.widget !== "typeahead");
 	const options = sourced.options;
+	const remote = sourced.remote;
+	const said = remote === null ? "" : optionsStatus(text, {
+		control: "select",
+		open: true,
+		disabled: field.disabled,
+		failed: remote.failed,
+		busy: remote.busy,
+		needs: remote.needs,
+		query: "",
+		completeness: remote.completeness
+	});
 	if (sourced.remote?.unavailable === true) return /* @__PURE__ */ jsx(FieldShell, {
 		path,
 		field,
@@ -1053,15 +1079,18 @@ function SelectField({ path, label }) {
 			...field.controlProps,
 			value: typeof field.value === "string" ? field.value : "",
 			onChange: (event) => field.setValue(event.target.value === "" ? null : event.target.value),
+			onFocus: () => {
+				if (remote?.failed === true) remote.retry();
+			},
 			onBlur: () => field.touch(),
 			children: [/* @__PURE__ */ jsx("option", { value: "" }), options.map((option) => /* @__PURE__ */ jsx("option", {
 				value: option.value,
 				children: option.label
 			}, option.value))]
-		}), sourced.remote === null ? null : /* @__PURE__ */ jsx("p", {
+		}), remote === null ? null : /* @__PURE__ */ jsx("p", {
 			role: "status",
 			"data-formancy-part": "select-status",
-			children: sourced.remote.status
+			children: said
 		})]
 	});
 }
@@ -1070,6 +1099,7 @@ function RadioGroupField({ path, label }) {
 	const options = useResolvedOptions(field);
 	const showError = field.touched && field.errors.length > 0;
 	return /* @__PURE__ */ jsxs("fieldset", {
+		id: field.ids.control,
 		"data-formancy-part": "field",
 		"data-formancy-field-path": path,
 		"data-state": showError ? "invalid" : "valid",
@@ -1700,7 +1730,7 @@ function TagPickerField({ path, label }) {
 	const listboxId = `${field.ids.control}:listbox`;
 	const remaining = options.filter((option) => !chosen.includes(option.value));
 	const matches = narrowOptionsByLabel(remaining, query);
-	const expanded = open && matches.length > 0;
+	const expanded = open && !field.disabled && matches.length > 0;
 	const add = (value) => {
 		const next = options.map((option) => option.value).filter((candidate) => candidate === value || chosen.includes(candidate));
 		field.setValue(next);
@@ -1726,6 +1756,7 @@ function TagPickerField({ path, label }) {
 						type: "button",
 						"data-formancy-part": "tagpicker-remove",
 						"aria-label": text("tagpicker.remove", { option: labelFor(value) }),
+						disabled: field.disabled,
 						onClick: () => remove(value),
 						children: "×"
 					})]
@@ -1792,6 +1823,7 @@ function SelectBoxesField({ path, label }) {
 		field.setValue(next);
 	};
 	return /* @__PURE__ */ jsxs("fieldset", {
+		id: field.ids.control,
 		"data-formancy-part": "field",
 		"data-formancy-field-path": path,
 		"data-state": showError ? "invalid" : "valid",
@@ -2179,6 +2211,7 @@ function NumberFallback({ path, label }) {
 		children: /* @__PURE__ */ jsx("input", {
 			type: "number",
 			...field.controlProps,
+			readOnly: field.readOnly,
 			value: typeof field.value === "number" ? field.value : "",
 			onChange: (event) => field.setValue(event.target.value === "" ? null : event.target.valueAsNumber),
 			onBlur: () => field.touch()
@@ -2307,6 +2340,7 @@ function SignatureField({ path, label }) {
 					}, at))
 				}),
 				/* @__PURE__ */ jsx("input", {
+					id: field.ids.control,
 					"data-formancy-part": "signature-typed",
 					type: "text",
 					value: answer.typed ?? "",
@@ -2372,6 +2406,7 @@ function DateField({ path, label }) {
 		children: /* @__PURE__ */ jsx("input", {
 			type: "date",
 			...field.controlProps,
+			readOnly: field.readOnly,
 			value: typeof field.value === "string" ? field.value : "",
 			onChange: (event) => field.setValue(event.target.value === "" ? null : event.target.value),
 			onBlur: () => field.touch()
@@ -2400,6 +2435,7 @@ function TimeField({ path, label }) {
 		children: /* @__PURE__ */ jsx("input", {
 			type: "time",
 			...field.controlProps,
+			readOnly: field.readOnly,
 			...typeof field.def.earliest === "string" ? { min: field.def.earliest } : {},
 			...typeof field.def.latest === "string" ? { max: field.def.latest } : {},
 			value: typeof field.value === "string" ? field.value : "",
@@ -2446,6 +2482,7 @@ function DateTimeField({ path, label }) {
 		children: /* @__PURE__ */ jsx("input", {
 			type: "datetime-local",
 			...field.controlProps,
+			readOnly: field.readOnly,
 			value: asLocal(),
 			onChange: (event) => {
 				const local = event.target.value;
@@ -2529,6 +2566,7 @@ function TextField({ path, label }) {
 		children: [/* @__PURE__ */ jsx("input", {
 			type: "text",
 			...field.controlProps,
+			readOnly: field.readOnly,
 			value: shown,
 			placeholder: mask === void 0 ? void 0 : maskPlaceholder(mask),
 			inputMode: mask !== void 0 && maskIsNumeric(mask) ? "numeric" : void 0,
@@ -2579,6 +2617,7 @@ function TextareaField({ path, label }) {
 		label,
 		children: /* @__PURE__ */ jsx("textarea", {
 			...field.controlProps,
+			readOnly: field.readOnly,
 			value: typeof field.value === "string" ? field.value : "",
 			onChange: (event) => field.setValue(event.target.value),
 			onBlur: () => field.touch()
@@ -2772,6 +2811,7 @@ function RepeaterSection({ wire, labels, registry }) {
 	const engine = useFormEngine();
 	const text = useFormText();
 	const repeater = useRepeater(wire);
+	const field = useField(wire);
 	const def = engine.repeaters().find((candidate) => candidate.wire === wire)?.def;
 	const label = engine.text(def?.label) ?? labels?.[wire] ?? wire;
 	const addLabel = def?.addLabel ?? text("repeater.add", { label });
@@ -2823,9 +2863,10 @@ function RepeaterSection({ wire, labels, registry }) {
 	*  the consumer ([0004](../../../docs/decisions/0004-headless-core.md)), and a renderer
 	*  that shipped a glyph would be choosing one for every design system at once. */
 	const rowButtons = (index) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
-		/* @__PURE__ */ jsx("button", {
+		repeater.canRemove ? /* @__PURE__ */ jsx("button", {
 			type: "button",
 			"data-formancy-part": "row-remove",
+			disabled: field.disabled,
 			onClick: () => repeater.removeRow(index),
 			children: /* @__PURE__ */ jsx("span", {
 				"data-formancy-part": "row-action-text",
@@ -2835,10 +2876,11 @@ function RepeaterSection({ wire, labels, registry }) {
 					count: repeater.rowCount
 				})
 			})
-		}),
+		}) : null,
 		index > 0 ? /* @__PURE__ */ jsx("button", {
 			type: "button",
 			"data-formancy-part": "row-up",
+			disabled: field.disabled,
 			onClick: () => repeater.moveRow(index, index - 1),
 			children: /* @__PURE__ */ jsx("span", {
 				"data-formancy-part": "row-action-text",
@@ -2852,6 +2894,7 @@ function RepeaterSection({ wire, labels, registry }) {
 		index < repeater.rowCount - 1 ? /* @__PURE__ */ jsx("button", {
 			type: "button",
 			"data-formancy-part": "row-down",
+			disabled: field.disabled,
 			onClick: () => repeater.moveRow(index, index + 1),
 			children: /* @__PURE__ */ jsx("span", {
 				"data-formancy-part": "row-action-text",
@@ -2892,14 +2935,20 @@ function RepeaterSection({ wire, labels, registry }) {
 		"data-formancy-part": "row",
 		children: [engine.fieldPaths().filter((candidate) => candidate.startsWith(`${wire}[${String(index)}]`)).map(slot), rowButtons(index)]
 	}, rowId));
+	if (!field.visible) return null;
+	const showError = field.touched && field.errors.length > 0;
 	return /* @__PURE__ */ jsxs("fieldset", {
 		"data-formancy-part": "repeater",
 		"data-formancy-field-path": wire,
+		"data-state": showError ? "invalid" : "valid",
+		id: field.controlProps.id,
+		"aria-describedby": field.controlProps["aria-describedby"],
 		children: [
 			/* @__PURE__ */ jsx("legend", {
 				"data-formancy-part": "repeater-legend",
 				children: label
 			}),
+			/* @__PURE__ */ jsx(RequiredHint, { field }),
 			grid ? /* @__PURE__ */ jsxs("div", {
 				"data-formancy-part": "datagrid",
 				"data-columns": String(plan.length),
@@ -2913,11 +2962,17 @@ function RepeaterSection({ wire, labels, registry }) {
 					}, entry.key))
 				}) : null, rows]
 			}) : rows,
-			/* @__PURE__ */ jsx("button", {
+			showError ? /* @__PURE__ */ jsx("p", {
+				"data-formancy-part": "error",
+				...field.errorProps,
+				children: field.errors.join(", ")
+			}) : null,
+			repeater.canAdd ? /* @__PURE__ */ jsx("button", {
 				type: "button",
+				disabled: field.disabled,
 				onClick: () => repeater.addRow(),
 				children: addLabel
-			})
+			}) : null
 		]
 	});
 }