@formancy/react 0.9.0 → 0.10.0

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/go-to-field.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;;;;;;;;;;;wBCD1C,iBAAiB;;;;;;;;;;;;;;;;UCYhB;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;;;;;EAKA;EACA,YAAY,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;wBCPP,aAAa,OAAO,oCAAiB,IAAA;;;UCpDpC;EACf,SAAS;;;;;;;;;;;wBAYK,eAAe,UAAU,oCAAiB,IAAA;;;;;;;;;;;;;;;;;;;;wBCG1C,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;;;;;;;;;;;UC/Bb;;;;;EAKf;;EAEA,QAAQ;;EAER,WAAW,cAAc;;;;;;;;;;;;KAaf,YAAY,MAAM,MAAM,SAAS,kBAAkB,QAAQ;qBAI1D,kCAAgB,SAAA;;;;;;;;;wBAUb,eAAe;;;;;;;;;;;;;;;;;;;;;UChCd;;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/go-to-field.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;;;;;;;;;;;wBCD1C,iBAAiB;;;;;;;;;;;;;;;;UCYhB;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;;;;;EAKA;EACA,YAAY,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;wBCNP,aAAa,OAAO,oCAAiB,IAAA;;;UCrDpC;EACf,SAAS;;;;;;;;;;;wBAYK,eAAe,UAAU,oCAAiB,IAAA;;;;;;;;;;;;;;;;;;;;wBCG1C,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;;;;;;;;;;;UC/Bb;;;;;EAKf;;EAEA,QAAQ;;EAER,WAAW,cAAc;;;;;;;;;;;;KAaf,YAAY,MAAM,MAAM,SAAS,kBAAkB,QAAQ;qBAI1D,kCAAgB,SAAA;;;;;;;;;wBAUb,eAAe;;;;;;;;;;;;;;;;;;;;;UChCd;;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,6 +1,6 @@
 import { Fragment, createContext, useCallback, useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
-import { cancelUploads, fieldUploads, formatPath, inOptionOrder, parsePath, placedGroup, placedPage, thumbnailSize, ticked } from "@formancy/core";
-import { answersToReview, countSentence, createFormText, errorSentence, optionsStatus } from "@formancy/core/words";
+import { cancelUploads, fieldUploads, formatPath, hasReadOnlyControl, inOptionOrder, parsePath, placedGroup, placedPage, thumbnailSize, ticked } from "@formancy/core";
+import { answerInWords, answersToReview, countSentence, createFormText, errorSentence, 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";
@@ -464,7 +464,10 @@ function Review({ onChange, children }) {
 					"data-formancy-part": "review-answer",
 					children: [
 						/* @__PURE__ */ jsx("dt", { children: answer.label }),
-						/* @__PURE__ */ jsx("dd", { children: answer.said }),
+						/* @__PURE__ */ jsx("dd", {
+							...answer.answered ? {} : { "data-formancy-part": "review-unanswered" },
+							children: answer.said
+						}),
 						/* @__PURE__ */ jsx("dd", { children: /* @__PURE__ */ jsxs("button", {
 							type: "button",
 							onClick: () => onChange(answer),
@@ -556,7 +559,8 @@ function useSourcedOptions(field, query, enabled = true) {
 	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 stored = storedValues(field.value);
+	const storedKey = stored.join("\0");
 	const path = field.path;
 	const disabled = field.disabled;
 	const asked = useRef(0);
@@ -628,18 +632,19 @@ function useSourcedOptions(field, query, enabled = true) {
 	]);
 	const askedFor = useRef(/* @__PURE__ */ new Set());
 	useEffect(() => {
-		if (!enabled || source === void 0 || stored === void 0) return;
-		if (named.has(stored) || askedFor.current.has(stored)) return;
-		askedFor.current.add(stored);
+		if (!enabled || source === void 0 || storedKey === "") return;
+		const unnamed = storedKey.split("\0").filter((value) => !named.has(value) && !askedFor.current.has(value));
+		if (unnamed.length === 0) return;
+		for (const value of unnamed) askedFor.current.add(value);
 		const controller = new AbortController();
 		source.resolve({
 			kind: "labels",
 			source: name ?? "",
 			path,
 			query: "",
-			values: [stored],
+			values: unnamed,
 			locale: engine.locale(),
-			limit: 1,
+			limit: unnamed.length,
 			signal: controller.signal
 		}).then((answer) => {
 			const accepted = acceptRemoteAnswer(answer);
@@ -656,7 +661,7 @@ function useSourcedOptions(field, query, enabled = true) {
 		source,
 		name,
 		path,
-		stored,
+		storedKey,
 		named,
 		engine
 	]);
@@ -667,13 +672,11 @@ function useSourcedOptions(field, query, enabled = true) {
 		})),
 		remote: null
 	};
-	const offered = [...rows];
-	if (stored !== void 0 && !offered.some((row) => row.value === stored)) offered.unshift({
-		value: stored,
-		label: named.get(stored) ?? stored
-	});
 	return {
-		options: offered,
+		options: [...stored.filter((value) => !rows.some((row) => row.value === value)).map((value) => ({
+			value,
+			label: named.get(value) ?? value
+		})), ...rows],
 		remote: {
 			unavailable: source === void 0,
 			busy,
@@ -684,6 +687,11 @@ function useSourcedOptions(field, query, enabled = true) {
 		}
 	};
 }
+function storedValues(value) {
+	if (typeof value === "string") return value === "" ? [] : [value];
+	if (!Array.isArray(value)) return [];
+	return value.filter((item) => typeof item === "string" && item !== "");
+}
 //#endregion
 //#region src/uploads.ts
 const UploaderContext = createContext(void 0);
@@ -1034,6 +1042,24 @@ function RadioGroupField({ path, label }) {
 	});
 }
 //#endregion
+//#region src/fields/computed-answer.tsx
+function ComputedAnswerField({ path, label }) {
+	const field = useField(path);
+	const engine = useFormEngine();
+	const text = useFormText();
+	return /* @__PURE__ */ jsx(FieldShell, {
+		path,
+		field,
+		label,
+		children: /* @__PURE__ */ jsx("input", {
+			type: "text",
+			readOnly: true,
+			...field.controlProps,
+			value: answerInWords(engine.schema(), field.def, field.value, text, engine.locale())
+		})
+	});
+}
+//#endregion
 //#region src/fields/file-field.tsx
 function FileField({ path, label }) {
 	const field = useField(path);
@@ -1474,14 +1500,30 @@ function SelectBoxesSwitch(props) {
 function TagPickerField({ path, label }) {
 	const field = useField(path);
 	const text = useFormText();
-	const options = useResolvedOptions(field);
 	const chosen = Array.isArray(field.value) ? field.value.map(String) : [];
 	const [query, setQuery] = useState("");
 	const [open, setOpen] = useState(false);
 	const listboxId = `${field.ids.control}:listbox`;
+	const written = useResolvedOptions(field);
+	const sourced = useSourcedOptions({
+		...field,
+		path
+	}, query);
+	const remote = sourced.remote;
+	const options = remote === null ? written : sourced.options;
 	const remaining = options.filter((option) => !chosen.includes(option.value));
-	const matches = narrowOptionsByLabel(remaining, query);
+	const matches = remote === null ? narrowOptionsByLabel(remaining, query) : remaining;
 	const expanded = open && !field.disabled && matches.length > 0;
+	const said = remote === null ? "" : optionsStatus(text, {
+		control: "typeahead",
+		open: open && !field.disabled,
+		disabled: field.disabled,
+		failed: remote.failed,
+		busy: remote.busy,
+		needs: remote.needs,
+		query,
+		completeness: remote.completeness
+	});
 	const add = (value) => {
 		field.setValue(ticked(field.def, chosen, value, true));
 		setQuery("");
@@ -1491,92 +1533,139 @@ function TagPickerField({ path, label }) {
 		field.setValue(chosen.filter((candidate) => candidate !== value));
 	};
 	const labelFor = (value) => options.find((option) => option.value === value)?.label ?? value;
+	if (remote?.unavailable === true) return /* @__PURE__ */ jsx(FieldShell, {
+		path,
+		field,
+		label,
+		children: /* @__PURE__ */ jsx("p", {
+			"data-formancy-part": "options-unavailable",
+			children: text("options.unavailable", { source: field.def.optionsSource ?? "" })
+		})
+	});
 	return /* @__PURE__ */ jsx(FieldShell, {
 		path,
 		field,
 		label,
 		children: /* @__PURE__ */ jsxs("div", {
 			"data-formancy-part": "tagpicker",
-			children: [chosen.length === 0 ? null : /* @__PURE__ */ jsx("ul", {
-				"data-formancy-part": "tagpicker-chips",
-				"aria-label": text("tagpicker.chosen", { label }),
-				children: chosen.map((value) => /* @__PURE__ */ jsxs("li", {
-					"data-formancy-part": "tagpicker-chip",
-					children: [labelFor(value), /* @__PURE__ */ jsx("button", {
-						type: "button",
-						"data-formancy-part": "tagpicker-remove",
-						"aria-label": text("tagpicker.remove", { option: labelFor(value) }),
-						disabled: field.disabled,
-						onClick: () => remove(value),
-						children: "×"
-					})]
-				}, value))
-			}), /* @__PURE__ */ jsxs("div", {
-				"data-formancy-part": "tagpicker-anchor",
-				children: [/* @__PURE__ */ jsx("input", {
-					type: "text",
-					role: "combobox",
-					...field.controlProps,
-					"data-formancy-part": "tagpicker-input",
-					autoComplete: "off",
-					"aria-expanded": expanded,
-					"aria-controls": listboxId,
-					"aria-autocomplete": "list",
-					value: query,
-					onChange: (event) => {
-						setQuery(event.target.value);
-						setOpen(true);
-					},
-					onClick: () => setOpen(true),
-					onKeyDown: (event) => {
-						if (event.key === "Escape") {
+			children: [
+				chosen.length === 0 ? null : /* @__PURE__ */ jsx("ul", {
+					"data-formancy-part": "tagpicker-chips",
+					"aria-label": text("tagpicker.chosen", { label }),
+					children: chosen.map((value) => /* @__PURE__ */ jsxs("li", {
+						"data-formancy-part": "tagpicker-chip",
+						children: [labelFor(value), /* @__PURE__ */ jsx("button", {
+							type: "button",
+							"data-formancy-part": "tagpicker-remove",
+							"aria-label": text("tagpicker.remove", { option: labelFor(value) }),
+							disabled: field.disabled,
+							onClick: () => remove(value),
+							children: "×"
+						})]
+					}, value))
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					"data-formancy-part": "tagpicker-anchor",
+					children: [/* @__PURE__ */ jsx("input", {
+						type: "text",
+						role: "combobox",
+						...field.controlProps,
+						"data-formancy-part": "tagpicker-input",
+						autoComplete: "off",
+						"aria-expanded": expanded,
+						"aria-controls": listboxId,
+						"aria-autocomplete": "list",
+						"aria-busy": remote?.busy === true ? true : void 0,
+						value: query,
+						onChange: (event) => {
+							setQuery(event.target.value);
+							setOpen(true);
+						},
+						onClick: () => setOpen(true),
+						onKeyDown: (event) => {
+							if (event.key === "Escape") {
+								setOpen(false);
+								return;
+							}
+							if (event.key === "Enter" && expanded && matches[0] !== void 0) {
+								event.preventDefault();
+								add(matches[0].value);
+								return;
+							}
+							if (event.key === "Backspace" && query === "" && chosen.length > 0) remove(chosen[chosen.length - 1]);
+						},
+						onBlur: () => {
 							setOpen(false);
-							return;
-						}
-						if (event.key === "Enter" && expanded && matches[0] !== void 0) {
-							event.preventDefault();
-							add(matches[0].value);
-							return;
+							field.touch();
 						}
-						if (event.key === "Backspace" && query === "" && chosen.length > 0) remove(chosen[chosen.length - 1]);
-					},
-					onBlur: () => {
-						setOpen(false);
-						field.touch();
-					}
-				}), /* @__PURE__ */ jsx("ul", {
-					id: listboxId,
-					role: "listbox",
-					"aria-label": text("options.suggestions", { label }),
-					"data-formancy-part": "tagpicker-listbox",
-					hidden: !expanded,
-					children: matches.map((option) => /* @__PURE__ */ jsx("li", {
-						role: "option",
-						"data-formancy-part": "tagpicker-option",
-						"aria-selected": false,
-						onMouseDown: (event) => event.preventDefault(),
-						onClick: () => add(option.value),
-						children: option.label
-					}, option.value))
-				})]
-			})]
+					}), /* @__PURE__ */ jsx("ul", {
+						id: listboxId,
+						role: "listbox",
+						"aria-label": text("options.suggestions", { label }),
+						"data-formancy-part": "tagpicker-listbox",
+						hidden: !expanded,
+						children: matches.map((option) => /* @__PURE__ */ jsx("li", {
+							role: "option",
+							"data-formancy-part": "tagpicker-option",
+							"aria-selected": false,
+							onMouseDown: (event) => event.preventDefault(),
+							onClick: () => add(option.value),
+							children: option.label
+						}, option.value))
+					})]
+				}),
+				remote === null ? null : /* @__PURE__ */ jsx("p", {
+					role: "status",
+					"data-formancy-part": "tagpicker-status",
+					"data-state": remote.failed ? "failed" : void 0,
+					children: said
+				})
+			]
 		})
 	});
 }
 function SelectBoxesField({ path, label }) {
 	const field = useField(path);
-	const options = useResolvedOptions(field);
+	const text = useFormText();
+	const written = useResolvedOptions(field);
+	const sourced = useSourcedOptions({
+		...field,
+		path
+	}, "");
+	const remote = sourced.remote;
+	const options = remote === null ? written : sourced.options;
 	const showError = field.touched && field.errors.length > 0;
 	const chosen = Array.isArray(field.value) ? field.value : [];
+	const group = useRef(null);
+	const again = useRef(null);
+	const [retrying, setRetrying] = useState(false);
+	const settled = remote !== null && !remote.busy && !remote.failed;
+	useEffect(() => {
+		if (!retrying || !settled) return;
+		setRetrying(false);
+		if (document.activeElement === again.current) group.current?.querySelector("input[type=\"checkbox\"]")?.focus();
+	}, [retrying, settled]);
+	const said = remote === null ? "" : optionsStatus(text, {
+		control: "ticks",
+		open: true,
+		disabled: field.disabled,
+		failed: remote.failed,
+		busy: remote.busy,
+		needs: remote.needs,
+		query: "",
+		completeness: remote.completeness
+	});
 	const toggle = (value, on) => {
 		field.setValue(ticked(field.def, chosen, value, on));
 	};
 	return /* @__PURE__ */ jsxs("fieldset", {
+		ref: group,
 		id: field.ids.control,
 		"data-formancy-part": "field",
 		"data-formancy-field-path": path,
 		"data-state": showError ? "invalid" : "valid",
 		"aria-describedby": field.controlProps["aria-describedby"],
+		"aria-busy": remote?.busy === true ? true : void 0,
 		children: [
 			/* @__PURE__ */ jsx("legend", {
 				"data-formancy-part": "label",
@@ -1584,6 +1673,10 @@ function SelectBoxesField({ path, label }) {
 			}),
 			/* @__PURE__ */ jsx(RequiredHint, { field }),
 			/* @__PURE__ */ jsx(Description, { field }),
+			remote?.unavailable === true ? /* @__PURE__ */ jsx("p", {
+				"data-formancy-part": "options-unavailable",
+				children: text("options.unavailable", { source: field.def.optionsSource ?? "" })
+			}) : null,
 			options.map((option) => {
 				const optionId = `${field.ids.control}:${option.value}`;
 				return /* @__PURE__ */ jsxs("span", {
@@ -1603,6 +1696,22 @@ function SelectBoxesField({ path, label }) {
 					})]
 				}, option.value);
 			}),
+			remote === null || remote.unavailable ? null : /* @__PURE__ */ jsx("p", {
+				role: "status",
+				"data-formancy-part": "checkbox-status",
+				"data-state": remote.failed ? "failed" : void 0,
+				children: said
+			}),
+			remote !== null && (remote.failed || retrying) && !field.disabled ? /* @__PURE__ */ jsx("button", {
+				ref: again,
+				type: "button",
+				"data-formancy-part": "checkbox-retry",
+				onClick: () => {
+					setRetrying(true);
+					remote.retry();
+				},
+				children: text("options.retry")
+			}) : null,
 			showError ? /* @__PURE__ */ jsx(ErrorText, { field }) : null
 		]
 	});
@@ -2324,7 +2433,7 @@ function FieldList({ labels, registry, page, layout }) {
 function FieldSlot({ path, fallbackLabel, registry }) {
 	const field = useField(path);
 	if (!field.visible) return null;
-	const Component = registry?.byPath?.[path] ?? registry?.byType?.[field.type] ?? DEFAULT_COMPONENTS[field.type];
+	const Component = registry?.byPath?.[path] ?? (field.readOnly && !hasReadOnlyControl(field.def) ? ComputedAnswerField : void 0) ?? registry?.byType?.[field.type] ?? DEFAULT_COMPONENTS[field.type];
 	if (Component === null) return null;
 	const label = field.label ?? fallbackLabel ?? path;
 	return /* @__PURE__ */ jsx(Component, {