@formancy/react 0.2.0 → 0.3.0

package/dist/index.mjs

@@ -105,15 +105,17 @@ function useWizard() {
 	const wizard = useFormEngine().wizard();
 	if (wizard === void 0) throw new Error("useWizard needs a schema with pages; this form has none");
 	const subscribe = useCallback((onChange) => wizard.subscribe(onChange), [wizard]);
-	const getPage = useCallback(() => wizard.page(), [wizard]);
-	const page = useSyncExternalStore(subscribe, getPage, getPage);
+	const getRevision = useCallback(() => wizard.revision(), [wizard]);
+	const revision = useSyncExternalStore(subscribe, getRevision, getRevision);
 	return useMemo(() => ({
-		page,
+		page: wizard.page(),
 		pageCount: wizard.pageCount,
+		canGoNext: wizard.canGoNext(),
+		canGoBack: wizard.canGoBack(),
 		next: () => wizard.next(),
 		back: () => wizard.back(),
 		goTo: (pageIndex) => wizard.goTo(pageIndex)
-	}), [page, wizard]);
+	}), [revision, wizard]);
 }
 //#endregion
 //#region src/focus-control.ts
@@ -672,268 +674,7 @@ function useUploader() {
 	return useContext(UploaderContext);
 }
 //#endregion
-//#region src/form.tsx
-/**
-* Renders the whole form from the engine: one slot per field, resolved through
-* the registry. Slots subscribe individually, so a keystroke re-renders one
-* field and a visibility flip mounts or unmounts exactly the fields it hit.
-* A paged schema renders a stepper, one page at a time, navigation, and the
-* submit control on the last page — a failed submit navigates to the first
-* page with a problem instead of leaving the user on a clean review page
-* staring at a rejection.
-*/
-function FormancyForm(props) {
-	return useFormEngine().wizard() === void 0 ? /* @__PURE__ */ jsx(FlatForm, { ...props }) : /* @__PURE__ */ jsx(PagedForm, { ...props });
-}
-function SubmitButton({ submitLabel, onSubmit, onFailedNavigate }) {
-	const engine = useFormEngine();
-	const submit = useSubmit();
-	return /* @__PURE__ */ jsx("button", {
-		type: "button",
-		"data-formancy-part": "submit",
-		onClick: () => {
-			const outcome = submit();
-			if (!outcome.ok && onFailedNavigate !== void 0) {
-				const firstInvalid = engine.firstInvalid();
-				if (firstInvalid !== null) onFailedNavigate(engine.pageOf(parsePath(firstInvalid)));
-			}
-			onSubmit?.(outcome.ok ? {
-				ok: true,
-				errors: outcome.errors,
-				data: engine.value()
-			} : {
-				ok: false,
-				errors: outcome.errors
-			});
-		},
-		children: submitLabel ?? "Submit"
-	});
-}
-function FlatForm(props) {
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(FieldList, { ...props }), /* @__PURE__ */ jsx(SubmitButton, { ...props })] });
-}
-function PagedForm(props) {
-	const engine = useFormEngine();
-	const wizard = useWizard();
-	const pages = engine.pages();
-	const lastPage = wizard.pageCount - 1;
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
-		/* @__PURE__ */ jsx("nav", {
-			"data-formancy-part": "stepper",
-			"aria-label": "Progress",
-			children: /* @__PURE__ */ jsx("ol", { children: pages.map((page, index) => /* @__PURE__ */ jsx("li", {
-				"aria-current": index === wizard.page ? "step" : void 0,
-				children: engine.text(page.def.label) ?? page.key
-			}, page.key)) })
-		}),
-		/* @__PURE__ */ jsx(FieldList, {
-			...props,
-			page: wizard.page
-		}),
-		/* @__PURE__ */ jsxs("div", {
-			"data-formancy-part": "wizard-nav",
-			children: [wizard.page > 0 ? /* @__PURE__ */ jsx("button", {
-				type: "button",
-				onClick: () => wizard.back(),
-				children: "Back"
-			}) : null, wizard.page < lastPage ? /* @__PURE__ */ jsx("button", {
-				type: "button",
-				onClick: () => void wizard.next(),
-				children: "Next"
-			}) : /* @__PURE__ */ jsx(SubmitButton, {
-				...props,
-				onFailedNavigate: (page) => wizard.goTo(page)
-			})]
-		})
-	] });
-}
-function FieldList({ labels, registry, page, layout }) {
-	const engine = useFormEngine();
-	const repeaterWires = engine.repeaterPaths();
-	const schema = engine.schema();
-	const arrangement = schema.layouts?.find((candidate) => candidate.name === layout);
-	if (layout !== void 0 && arrangement !== void 0) {
-		new Set(placedPaths(arrangement.nodes));
-		return /* @__PURE__ */ jsx(LayoutTree, {
-			schema,
-			nodes: arrangement.nodes,
-			locale: schema.i18n?.defaultLocale ?? "",
-			renderField: (path) => {
-				if (repeaterWires.includes(path)) return /* @__PURE__ */ jsx(RepeaterSection, {
-					wire: path,
-					labels,
-					registry
-				}, path);
-				return /* @__PURE__ */ jsx(FieldSlot, {
-					path,
-					fallbackLabel: labels?.[path],
-					registry
-				}, path);
-			}
-		});
-	}
-	const inPage = (wire) => page === void 0 || engine.pageOf(parsePath(wire)) === page;
-	const staticWires = engine.fieldPaths().filter((wire) => !repeaterWires.some((repeater) => wire.startsWith(`${repeater}[`)));
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [staticWires.filter(inPage).map((wire) => /* @__PURE__ */ jsx(FieldSlot, {
-		path: wire,
-		fallbackLabel: labels?.[wire],
-		registry
-	}, wire)), repeaterWires.filter(inPage).map((wire) => /* @__PURE__ */ jsx(RepeaterSection, {
-		wire,
-		labels,
-		registry
-	}, wire))] });
-}
-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];
-	if (Component === null) return null;
-	const label = field.label ?? fallbackLabel ?? path;
-	return /* @__PURE__ */ jsx(Component, {
-		path,
-		label
-	});
-}
-function RepeaterSection({ wire, labels, registry }) {
-	const engine = useFormEngine();
-	const repeater = useRepeater(wire);
-	const def = engine.repeaters().find((candidate) => candidate.wire === wire)?.def;
-	const label = engine.text(def?.label) ?? labels?.[wire] ?? wire;
-	const addLabel = def?.addLabel ?? `Add ${label}`;
-	const removeLabel = def?.removeLabel ?? `Remove ${label}`;
-	const fallbackFor = (instanceWire) => {
-		const template = instanceWire.replace(/\[\d+\]/, "[]");
-		return labels?.[template] ?? labels?.[instanceWire];
-	};
-	const grid = def?.widget === "datagrid";
-	const declaredColumns = def?.columns ?? [];
-	const plan = grid ? datagridColumns(def, declaredColumns) : [];
-	const tracks = declaredColumns.some((column) => column.width !== void 0) ? plan.map(({ column }) => column?.width === void 0 ? "1fr" : `${String(column.width)}fr`).join(" ") : void 0;
-	/** The control in one cell: the leaf the column's child field collects into.
-	*
-	*  One leaf, because a grid's rows are FLAT -- a child holding fields of its own is
-	*  refused when the document is saved
-	*  ([0078](../../../docs/decisions/0078-a-grid-row-is-flat.md)). This walked the whole
-	*  subtree under the child while a group could be a column, and every clause that made
-	*  that walk safe is gone with the arrangement it served.
-	*
-	*  Still a filter over the paths that EXIST rather than the path the column implies, so
-	*  a document nobody validated renders an empty cell instead of asking the engine about
-	*  a field it does not have. */
-	const leavesOf = (index, key) => {
-		const wanted = `${wire}[${String(index)}].${key}`;
-		return engine.fieldPaths().filter((leaf) => leaf === wanted);
-	};
-	/** A column's visible heading: the author's shortening, else the child's own label,
-	*  else the labels prop, else the key.
-	*
-	*  Visible text and NOTHING else -- never an `id` target, never an `aria-label`.
-	*  Measured against the accessible-name implementation this repository installs: a
-	*  column heading contributes nothing to the name of a control in its column, whether
-	*  it is a `<th scope="col">` or a `headers=` target. So the heading cannot replace a
-	*  cell's label, and pointing a control at it would only ADD the heading to the name --
-	*  which is the failure 0066 separates `header` from `label` to prevent. */
-	const headingOf = (entry) => engine.text(entry.column?.header) ?? engine.text(entry.child?.label) ?? fallbackFor(`${wire}[0].${entry.key}`) ?? entry.key;
-	/** A row's own controls, identical in both arrangements down to the names, because
-	*  0068 put the row's position in those names and a grid does not change where a person
-	*  is.
-	*
-	*  The text sits in its own element so a THEME can clip it and draw a mark instead,
-	*  which is what a grid wants -- "Remove recipient 1 of 1" on three wrapped lines took
-	*  more room than the answers beside it, measured in the playground. Clipped and never
-	*  removed: `display: none` and `visibility: hidden` both compute the button's name to
-	*  the empty string, and a button called nothing is worse than a wide one.
-	*
-	*  The renderer draws no mark of its own. An icon is appearance, appearance belongs to
-	*  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", {
-			type: "button",
-			"data-formancy-part": "row-remove",
-			onClick: () => repeater.removeRow(index),
-			children: /* @__PURE__ */ jsx("span", {
-				"data-formancy-part": "row-action-text",
-				children: `${removeLabel} ${index + 1} of ${repeater.rowCount}`
-			})
-		}),
-		index > 0 ? /* @__PURE__ */ jsx("button", {
-			type: "button",
-			"data-formancy-part": "row-up",
-			onClick: () => repeater.moveRow(index, index - 1),
-			children: /* @__PURE__ */ jsx("span", {
-				"data-formancy-part": "row-action-text",
-				children: `Move ${label} ${index + 1} of ${repeater.rowCount} up`
-			})
-		}) : null,
-		index < repeater.rowCount - 1 ? /* @__PURE__ */ jsx("button", {
-			type: "button",
-			"data-formancy-part": "row-down",
-			onClick: () => repeater.moveRow(index, index + 1),
-			children: /* @__PURE__ */ jsx("span", {
-				"data-formancy-part": "row-action-text",
-				children: `Move ${label} ${index + 1} of ${repeater.rowCount} down`
-			})
-		}) : null
-	] });
-	/** One control in a row.
-	*
-	*  Keyed by the POSITIONAL WIRE, so every control in a row is remounted when the row
-	*  moves and focus is lost on a reorder. Keying by the field's key within the row fixes
-	*  that here, and was reverted to keep the two renderers identical: the same change in
-	*  Angular lets it REUSE a component whose path is read once in ngOnInit, so after a
-	*  removal it binds to the old wire and shows the wrong row's answer -- caught by a
-	*  conformance fixture. One renderer keeping focus and the other not is the
-	*  framework-specific divergence this architecture exists to prevent, so both wait for
-	*  reactive path binding in Angular. */
-	const slot = (instanceWire) => /* @__PURE__ */ jsx(FieldSlot, {
-		path: instanceWire,
-		fallbackLabel: fallbackFor(instanceWire),
-		registry
-	}, instanceWire);
-	const rows = repeater.rowIds.map((rowId, index) => grid ? /* @__PURE__ */ jsxs("div", {
-		"data-formancy-part": "datagrid-row",
-		children: [plan.map((entry) => /* @__PURE__ */ jsx("div", {
-			"data-formancy-part": "datagrid-cell",
-			...entry.column?.align === void 0 ? {} : { "data-align": entry.column.align },
-			children: leavesOf(index, entry.key).map(slot)
-		}, entry.key)), /* @__PURE__ */ jsx("div", {
-			"data-formancy-part": "datagrid-actions",
-			children: rowButtons(index)
-		})]
-	}, rowId) : /* @__PURE__ */ jsxs("div", {
-		"data-formancy-part": "row",
-		children: [engine.fieldPaths().filter((candidate) => candidate.startsWith(`${wire}[${String(index)}]`)).map(slot), rowButtons(index)]
-	}, rowId));
-	return /* @__PURE__ */ jsxs("fieldset", {
-		"data-formancy-part": "repeater",
-		children: [
-			/* @__PURE__ */ jsx("legend", {
-				"data-formancy-part": "repeater-legend",
-				children: label
-			}),
-			grid ? /* @__PURE__ */ jsxs("div", {
-				"data-formancy-part": "datagrid",
-				"data-columns": String(plan.length),
-				...tracks === void 0 ? {} : { style: { "--fm-datagrid-columns": tracks } },
-				children: [repeater.rowCount > 0 ? /* @__PURE__ */ jsx("div", {
-					"data-formancy-part": "datagrid-head",
-					children: plan.map((entry) => /* @__PURE__ */ jsx("span", {
-						"data-formancy-part": "datagrid-heading",
-						...entry.column?.align === void 0 ? {} : { "data-align": entry.column.align },
-						children: headingOf(entry)
-					}, entry.key))
-				}) : null, rows]
-			}) : rows,
-			/* @__PURE__ */ jsx("button", {
-				type: "button",
-				onClick: () => repeater.addRow(),
-				children: addLabel
-			})
-		]
-	});
-}
+//#region src/fields/internals.tsx
 /** Shared unstyled shell: real label, control, error text as the describedby
 *  target. Zero CSS; `data-formancy-part` is the styling hook. */
 function FieldShell({ path, field, label, children }) {
@@ -957,110 +698,247 @@ function FieldShell({ path, field, label, children }) {
 	});
 }
 /**
-* A single-line answer, and — with `widget: "scanner"` — a camera route to the same
-* string.
+* `widget: "typeahead"` - the same select, narrowed by typing.
 *
-* The input is the control in both cases, never a second one beside it: typing is
-* the accessibility floor and the fallback at once, so it is what is always there
-* and the scan button is what is sometimes added. With no scanner supplied the
-* markup is the default control exactly, because a Scan button that opens nothing is
-* worse than no button ([0071](../../../docs/decisions/0071-a-scanner-is-supplied-not-built.md)).
+* An ARIA 1.2 editable combobox over a listbox popup: a text box with
+* `role="combobox"` and a `<ul role="listbox">` of `<li role="option">`. DOM focus
+* never leaves the text box, so the arrowed-over option is named by
+* `aria-activedescendant` - which is the only thing that says where somebody is
+* when what they are moving through does not hold focus.
+*
+* **The list element exists while the popup is collapsed.** `aria-expanded` and
+* `aria-controls` are required properties of the role, and an `aria-controls`
+* pointing at an element that is not there is an unresolvable IDREF - so the
+* listbox is rendered and `hidden` rather than mounted when it opens.
+*
+* `aria-autocomplete="list"`, never `"both"`: nothing is ever written into the box
+* on the person's behalf, and `"both"` announces an inline completion that does
+* not exist. No `aria-haspopup`: `listbox` is the role's implicit popup, so the
+* attribute either repeats it or lies.
+*
+* `aria-selected` is on the CHOSEN option and on nothing else. Following the arrow
+* keys with it - the commonest defect in this pattern - tells a screen reader the
+* answer changed every time somebody pressed Down to read the next row.
+*
+* **It cannot store what somebody typed.** `setValue` is reached from exactly two
+* places here, with an option's own value or with `null`, and the text goes nowhere
+* but the filter. That is what makes
+* [0065](../../../docs/decisions/0065-a-widget-is-authored-not-registered.md)
+* structural rather than remembered: there is no path from this input to a stored
+* string a plain select could not have produced. So leaving the field with a query
+* that matches nothing stores nothing, and the box goes back to showing the answer.
+*
+* `null` is the other half of that: a select's empty first option means
+* un-answering is always available, and a widget may not take it away. Clearing the
+* box and leaving clears the answer.
 */
-function TextField({ path, label }) {
-	const field = useField(path);
-	const scan = useScanner();
-	const [scanning, setScanning] = useState(false);
-	/** A device failure, held here rather than in the field's errors. See below. */
-	const [trouble, setTrouble] = useState(void 0);
+/**
+* What the status region is saying, as a word a theme can select on.
+*
+* 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 }) {
+	if (sourced.remote === null) return open && matches === 0 ? "empty" : void 0;
+	if (sourced.remote.busy) return "busy";
+	if (sourced.remote.status.startsWith("The options could not")) return "failed";
+	if (sourced.remote.status !== "") return "hint";
+	return open && matches === 0 ? "empty" : void 0;
+}
+/**
+* How a grouped field says it is required.
+*
+* A real element rather than an attribute, because the attribute that would
+* mean this — `aria-required` — is not supported on `role="group"`. The
+* engine puts this element's id into the group's `aria-describedby`, so it is
+* announced after the legend; rendering it is all a renderer has to do.
+*
+* Visible as well as announced: WCAG 1.4.1 means a requirement carried only by
+* a red asterisk is a requirement some people cannot perceive.
+*/
+function RequiredHint({ field }) {
+	if (!field.required) return null;
+	return /* @__PURE__ */ jsx("span", {
+		"data-formancy-part": "required-hint",
+		id: field.props.hint.id,
+		children: "required"
+	});
+}
+/** One option's element id, in the shape the radio group already uses, so a
+*  reader of the DOM meets one convention rather than two. */
+function optionDomId(field, value) {
+	return `${field.ids.control}:option:${value}`;
+}
+/**
+* Option labels resolved to strings, since a label may be a message reference.
+* Falling back to the stored value keeps an untranslated option selectable
+* rather than blank.
+*/
+function useResolvedOptions(field) {
+	const engine = useFormEngine();
+	return (field.def.options ?? []).map((option) => ({
+		value: option.value,
+		label: engine.text(option.label) ?? option.value
+	}));
+}
+//#endregion
+//#region src/fields/typeahead-field.tsx
+/**
+* A combobox over the same answer a select holds.
+*
+* One file per control, because a control changes for its own reasons.
+* These were one 2,154-line file — the largest in the repository.
+*/
+function TypeaheadSelectField({ path, label, field }) {
 	/**
-	* The ONE place a text field's answer is written, typed or scanned.
+	* What is in the box while somebody types, or null when the box is simply
+	* showing the answer.
 	*
-	* Structural rather than careful: the parameter is a `string`, so there is no path
-	* from the camera to `setValue` that could store something typing could not. That
-	* is the line a widget may never cross — it changes how a field looks, never what
-	* it collects ([0065](../../../docs/decisions/0065-a-widget-is-authored-not-registered.md)).
+	* Two states rather than one string, because "empty because they cleared it"
+	* and "empty because there is no answer" are different facts, and only the
+	* first clears the answer on the way out.
 	*/
-	const commit = (text) => field.setValue(text.replace(/[\r\n]/g, ""));
-	const read = async () => {
-		if (scan === void 0 || scanning) return;
-		setScanning(true);
-		setTrouble(void 0);
-		try {
-			const text = await scan({
-				label,
-				path
-			});
-			if (text === null) return;
-			if (typeof text !== "string") {
-				setTrouble("Scanning did not work: the scanner did not return text. Type the value instead.");
+	const [query, setQuery] = useState(null);
+	const [open, setOpen] = useState(false);
+	/** 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);
+	const sourced = useSourcedOptions({
+		...field,
+		path
+	}, query ?? "");
+	const options = sourced.options;
+	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
+	*  claims a popup a person cannot see. */
+	const expanded = open && matches.length > 0;
+	const activeIndex = matches.findIndex((option) => option.value === activeValue);
+	const activeId = expanded && activeIndex !== -1 ? optionDomId(field, matches[activeIndex].value) : void 0;
+	const listboxId = `${field.ids.control}:listbox`;
+	const choose = (value) => {
+		field.setValue(value);
+		setQuery(null);
+		setOpen(false);
+		setActiveValue(null);
+	};
+	const moveActive = (delta) => {
+		if (matches.length === 0) return;
+		const from = activeIndex === -1 ? delta > 0 ? -1 : matches.length : activeIndex;
+		const next = Math.min(Math.max(from + delta, 0), matches.length - 1);
+		setActiveValue(matches[next].value);
+	};
+	const onKeyDown = (event) => {
+		if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+			event.preventDefault();
+			if (!open) {
+				setOpen(true);
+				const fallback = event.key === "ArrowDown" ? matches[0] : matches[matches.length - 1];
+				setActiveValue(chosen?.value ?? fallback?.value ?? null);
 				return;
 			}
-			commit(text);
-			field.touch();
-		} catch (error) {
-			setTrouble(`Scanning did not work: ${error instanceof Error ? error.message : String(error)}. Type the value instead.`);
-		} finally {
-			setScanning(false);
+			moveActive(event.key === "ArrowDown" ? 1 : -1);
+			return;
+		}
+		if ((event.key === "Home" || event.key === "End") && expanded) {
+			event.preventDefault();
+			setActiveValue((event.key === "Home" ? matches[0] : matches[matches.length - 1]).value);
+			return;
+		}
+		if (event.key === "Enter") {
+			if (!expanded) return;
+			event.preventDefault();
+			if (activeIndex === -1) {
+				setOpen(false);
+				return;
+			}
+			choose(matches[activeIndex].value);
+			return;
+		}
+		if (event.key === "Escape") {
+			if (!open && query === null) return;
+			event.preventDefault();
+			setOpen(false);
+			setActiveValue(null);
+			setQuery(null);
+		}
+	};
+	const onBlur = () => {
+		setOpen(false);
+		setActiveValue(null);
+		if (query !== null) {
+			if (query.trim() === "") field.setValue(null);
+			setQuery(null);
 		}
+		field.touch();
 	};
 	return /* @__PURE__ */ jsxs(FieldShell, {
 		path,
 		field,
 		label,
-		children: [/* @__PURE__ */ jsx("input", {
-			type: "text",
-			...field.controlProps,
-			value: typeof field.value === "string" ? field.value : "",
-			onChange: (event) => commit(event.target.value),
-			onBlur: () => field.touch()
-		}), field.def.widget === "scanner" && scan !== void 0 ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("button", {
-			type: "button",
-			"data-formancy-part": "scanner-button",
-			disabled: field.disabled,
-			"aria-busy": scanning ? true : void 0,
-			onClick: () => {
-				read();
-			},
-			children: ["Scan ", /* @__PURE__ */ jsx("span", {
-				"data-formancy-part": "visually-hidden",
-				children: label
+		children: [/* @__PURE__ */ jsxs("div", {
+			"data-formancy-part": "typeahead-anchor",
+			children: [/* @__PURE__ */ jsx("input", {
+				type: "text",
+				role: "combobox",
+				...field.controlProps,
+				"data-formancy-part": "typeahead",
+				autoComplete: "off",
+				"aria-expanded": expanded,
+				"aria-controls": listboxId,
+				"aria-autocomplete": "list",
+				...sourced.remote?.busy === true ? { "aria-busy": true } : {},
+				...activeId === void 0 ? {} : { "aria-activedescendant": activeId },
+				value: query ?? chosen?.label ?? "",
+				onChange: (event) => {
+					setQuery(event.target.value);
+					setOpen(true);
+					setActiveValue(null);
+				},
+				onClick: () => setOpen(true),
+				onKeyDown,
+				onBlur
+			}), /* @__PURE__ */ jsx("ul", {
+				id: listboxId,
+				role: "listbox",
+				"aria-label": `${label} suggestions`,
+				"data-formancy-part": "typeahead-listbox",
+				hidden: !expanded,
+				children: matches.map((option) => /* @__PURE__ */ jsx("li", {
+					id: optionDomId(field, option.value),
+					role: "option",
+					"data-formancy-part": "typeahead-option",
+					"data-active": option.value === activeValue ? "true" : void 0,
+					...chosen?.value === option.value ? { "aria-selected": true } : {},
+					onMouseDown: (event) => event.preventDefault(),
+					onClick: () => choose(option.value),
+					children: option.label
+				}, option.value))
 			})]
 		}), /* @__PURE__ */ jsx("p", {
 			role: "status",
-			"data-formancy-part": "scanner-status",
-			children: scanning ? "Scanning…" : trouble ?? ""
-		})] }) : null]
-	});
-}
-function TextareaField({ path, label }) {
-	const field = useField(path);
-	return /* @__PURE__ */ jsx(FieldShell, {
-		path,
-		field,
-		label,
-		children: /* @__PURE__ */ jsx("textarea", {
-			...field.controlProps,
-			value: typeof field.value === "string" ? field.value : "",
-			onChange: (event) => field.setValue(event.target.value),
-			onBlur: () => field.touch()
-		})
-	});
-}
-function NumberField({ path, label }) {
-	const field = useField(path);
-	return /* @__PURE__ */ jsx(FieldShell, {
-		path,
-		field,
-		label,
-		children: /* @__PURE__ */ jsx("input", {
-			type: "number",
-			...field.controlProps,
-			value: typeof field.value === "number" ? field.value : "",
-			onChange: (event) => field.setValue(event.target.value === "" ? null : event.target.valueAsNumber),
-			onBlur: () => field.touch()
-		})
+			"data-formancy-part": "typeahead-status",
+			...statusState({
+				sourced,
+				open,
+				matches: matches.length
+			}) === void 0 ? {} : { "data-state": statusState({
+				sourced,
+				open,
+				matches: matches.length
+			}) },
+			children: sourced.remote !== null && sourced.remote.status !== "" ? sourced.remote.status : open && matches.length === 0 && sourced.remote?.busy !== true ? "No options match" : ""
+		})]
 	});
 }
+//#endregion
+//#region src/fields/choice-fields.tsx
+/**
+* One answer from a set: a tick, a list, or a group of radios.
+*
+* One file per control, because a control changes for its own reasons.
+* These were one 2,154-line file — the largest in the repository.
+*/
 function CheckboxField({ path, label }) {
 	const field = useField(path);
 	return /* @__PURE__ */ jsx(FieldShell, {
@@ -1077,115 +955,6 @@ function CheckboxField({ path, label }) {
 		})
 	});
 }
-function DateField({ path, label }) {
-	const field = useField(path);
-	return /* @__PURE__ */ jsx(FieldShell, {
-		path,
-		field,
-		label,
-		children: /* @__PURE__ */ jsx("input", {
-			type: "date",
-			...field.controlProps,
-			value: typeof field.value === "string" ? field.value : "",
-			onChange: (event) => field.setValue(event.target.value === "" ? null : event.target.value),
-			onBlur: () => field.touch()
-		})
-	});
-}
-/**
-* A time of day, as `HH:MM`.
-*
-* `<input type="time">` gives the platform's own picker, its own keyboard handling
-* and its own locale display — a 12-hour clock where the reader expects one — while
-* its `value` is always `HH:MM` on a 24-hour clock. That is exactly the split the
-* format wants: the reader sees their convention, the answer records one canonical
-* shape.
-*
-* `step` is not set, so the browser offers no seconds. A time answer has none, and a
-* control offering a precision the format discards is a control that loses what
-* somebody typed.
-*/
-function TimeField({ path, label }) {
-	const field = useField(path);
-	return /* @__PURE__ */ jsx(FieldShell, {
-		path,
-		field,
-		label,
-		children: /* @__PURE__ */ jsx("input", {
-			type: "time",
-			...field.controlProps,
-			...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 : "",
-			onChange: (event) => field.setValue(event.target.value === "" ? null : event.target.value),
-			onBlur: () => field.touch()
-		})
-	});
-}
-/**
-* An instant, stored as `YYYY-MM-DDTHH:MM:SSZ`.
-*
-* `<input type="datetime-local">` because there is no zoned datetime input in any
-* browser — so the control shows the reader a local wall clock and this converts.
-* The conversion is the whole reason this component exists rather than reusing
-* `DateField`:
-*
-* - **In:** the control gives `YYYY-MM-DDTHH:MM` in the reader's own zone. `new
-*   Date(local).toISOString()` interprets a zoneless string as local time, which is
-*   what is wanted here and is exactly what `bindTimestamp` refuses for a stored
-*   value — the difference is that the reader's zone is known at the moment they
-*   type, and is not knowable later.
-* - **Out:** the stored instant is rendered back into local time for the control,
-*   sliced to minutes because the input rejects a seconds component it was not asked
-*   for.
-*
-* Seconds are therefore always `00` in an answer a person typed. The format keeps
-* them because a machine-supplied answer has them and a fixed width is what makes
-* ordering work.
-*/
-function DateTimeField({ path, label }) {
-	const field = useField(path);
-	const stored = typeof field.value === "string" ? field.value : "";
-	const asLocal = () => {
-		if (stored === "") return "";
-		const instant = new Date(stored);
-		if (Number.isNaN(instant.getTime())) return "";
-		const pad = (part) => String(part).padStart(2, "0");
-		return `${String(instant.getFullYear())}-${pad(instant.getMonth() + 1)}-${pad(instant.getDate())}T${pad(instant.getHours())}:${pad(instant.getMinutes())}`;
-	};
-	return /* @__PURE__ */ jsx(FieldShell, {
-		path,
-		field,
-		label,
-		children: /* @__PURE__ */ jsx("input", {
-			type: "datetime-local",
-			...field.controlProps,
-			value: asLocal(),
-			onChange: (event) => {
-				const local = event.target.value;
-				if (local === "") {
-					field.setValue(null);
-					return;
-				}
-				const instant = new Date(local);
-				field.setValue(Number.isNaN(instant.getTime()) ? null : `${instant.toISOString().slice(0, 19)}Z`);
-			},
-			onBlur: () => field.touch()
-		})
-	});
-}
-/**
-* Option labels resolved to strings, since a label may be a message reference.
-* Falling back to the stored value keeps an untranslated option selectable
-* rather than blank.
-*/
-function useResolvedOptions(field) {
-	const engine = useFormEngine();
-	return (field.def.options ?? []).map((option) => ({
-		value: option.value,
-		label: engine.text(option.label) ?? option.value
-	}));
-}
 function SelectField({ path, label }) {
 	const field = useField(path);
 	const sourced = useSourcedOptions({
@@ -1227,351 +996,194 @@ function SelectField({ path, label }) {
 		})]
 	});
 }
+function RadioGroupField({ path, label }) {
+	const field = useField(path);
+	const options = useResolvedOptions(field);
+	const showError = field.touched && field.errors.length > 0;
+	return /* @__PURE__ */ jsxs("fieldset", {
+		"data-formancy-part": "field",
+		"data-formancy-field-path": path,
+		"data-state": showError ? "invalid" : "valid",
+		"aria-describedby": field.controlProps["aria-describedby"],
+		children: [
+			/* @__PURE__ */ jsx("legend", {
+				"data-formancy-part": "label",
+				children: label
+			}),
+			/* @__PURE__ */ jsx(RequiredHint, { field }),
+			options.map((option) => {
+				const optionId = `${field.ids.control}:${option.value}`;
+				return /* @__PURE__ */ jsxs("span", {
+					"data-formancy-part": "radio-option",
+					children: [/* @__PURE__ */ jsx("input", {
+						type: "radio",
+						id: optionId,
+						name: field.controlProps.name,
+						value: option.value,
+						checked: field.value === option.value,
+						onChange: () => field.setValue(option.value),
+						onBlur: () => field.touch()
+					}), /* @__PURE__ */ jsx("label", {
+						htmlFor: optionId,
+						children: option.label
+					})]
+				}, option.value);
+			}),
+			showError ? /* @__PURE__ */ jsx("p", {
+				"data-formancy-part": "error",
+				...field.errorProps,
+				children: field.errors.join(", ")
+			}) : null
+		]
+	});
+}
+//#endregion
+//#region src/fields/file-field.tsx
 /**
-* `widget: "typeahead"` - the same select, narrowed by typing.
-*
-* An ARIA 1.2 editable combobox over a listbox popup: a text box with
-* `role="combobox"` and a `<ul role="listbox">` of `<li role="option">`. DOM focus
-* never leaves the text box, so the arrowed-over option is named by
-* `aria-activedescendant` - which is the only thing that says where somebody is
-* when what they are moving through does not hold focus.
-*
-* **The list element exists while the popup is collapsed.** `aria-expanded` and
-* `aria-controls` are required properties of the role, and an `aria-controls`
-* pointing at an element that is not there is an unresolvable IDREF - so the
-* listbox is rendered and `hidden` rather than mounted when it opens.
-*
-* `aria-autocomplete="list"`, never `"both"`: nothing is ever written into the box
-* on the person's behalf, and `"both"` announces an inline completion that does
-* not exist. No `aria-haspopup`: `listbox` is the role's implicit popup, so the
-* attribute either repeats it or lies.
-*
-* `aria-selected` is on the CHOSEN option and on nothing else. Following the arrow
-* keys with it - the commonest defect in this pattern - tells a screen reader the
-* answer changed every time somebody pressed Down to read the next row.
-*
-* **It cannot store what somebody typed.** `setValue` is reached from exactly two
-* places here, with an option's own value or with `null`, and the text goes nowhere
-* but the filter. That is what makes
-* [0065](../../../docs/decisions/0065-a-widget-is-authored-not-registered.md)
-* structural rather than remembered: there is no path from this input to a stored
-* string a plain select could not have produced. So leaving the field with a query
-* that matches nothing stores nothing, and the box goes back to showing the answer.
+* The file control, over an uploader the host supplies.
 *
-* `null` is the other half of that: a select's empty first option means
-* un-answering is always available, and a widget may not take it away. Clearing the
-* box and leaving clears the answer.
+* One file per control, because a control changes for its own reasons.
+* These were one 2,154-line file — the largest in the repository.
 */
 /**
-* What the status region is saying, as a word a theme can select on.
+* Attached files.
 *
-* Not the text: a theme that keyed off English prose would break in every other
-* language the form is offered in.
+* The control picks files; something else uploads them and reports back what
+* was stored. That split is the whole design: this package has no opinion
+* about where bytes go, which is what lets the same field work against local
+* disk, S3 or a customer's own service.
+*
+* Without an uploader the field is read-only and says so, rather than
+* pretending to accept a file it has nowhere to put.
 */
-function statusState({ sourced, open, matches }) {
-	if (sourced.remote === null) return open && matches === 0 ? "empty" : void 0;
-	if (sourced.remote.busy) return "busy";
-	if (sourced.remote.status.startsWith("The options could not")) return "failed";
-	if (sourced.remote.status !== "") return "hint";
-	return open && matches === 0 ? "empty" : void 0;
-}
-function TypeaheadSelectField({ path, label, field }) {
+function FileField({ path, label }) {
+	const field = useField(path);
+	const upload = useUploader();
+	const files = Array.isArray(field.value) ? field.value : [];
+	const [busy, setBusy] = useState(false);
+	const [failure, setFailure] = useState(void 0);
+	const [over, setOver] = useState(false);
 	/**
-	* What is in the box while somebody types, or null when the box is simply
-	* showing the answer.
+	* Attachments taken out of the answer but not yet forgotten.
 	*
-	* Two states rather than one string, because "empty because they cleared it"
-	* and "empty because there is no answer" are different facts, and only the
-	* first clears the answer on the way out.
+	* Held with the position they came from, so undoing puts a file BACK where it
+	* was rather than on the end — the order matters to somebody who numbered
+	* their attachments in a covering note.
 	*/
-	const [query, setQuery] = useState(null);
-	const [open, setOpen] = useState(false);
-	/** 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);
-	const sourced = useSourcedOptions({
-		...field,
-		path
-	}, query ?? "");
-	const options = sourced.options;
-	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
-	*  claims a popup a person cannot see. */
-	const expanded = open && matches.length > 0;
-	const activeIndex = matches.findIndex((option) => option.value === activeValue);
-	const activeId = expanded && activeIndex !== -1 ? optionDomId(field, matches[activeIndex].value) : void 0;
-	const listboxId = `${field.ids.control}:listbox`;
-	const choose = (value) => {
-		field.setValue(value);
-		setQuery(null);
-		setOpen(false);
-		setActiveValue(null);
-	};
-	const moveActive = (delta) => {
-		if (matches.length === 0) return;
-		const from = activeIndex === -1 ? delta > 0 ? -1 : matches.length : activeIndex;
-		const next = Math.min(Math.max(from + delta, 0), matches.length - 1);
-		setActiveValue(matches[next].value);
-	};
-	const onKeyDown = (event) => {
-		if (event.key === "ArrowDown" || event.key === "ArrowUp") {
-			event.preventDefault();
-			if (!open) {
-				setOpen(true);
-				const fallback = event.key === "ArrowDown" ? matches[0] : matches[matches.length - 1];
-				setActiveValue(chosen?.value ?? fallback?.value ?? null);
-				return;
-			}
-			moveActive(event.key === "ArrowDown" ? 1 : -1);
-			return;
-		}
-		if ((event.key === "Home" || event.key === "End") && expanded) {
-			event.preventDefault();
-			setActiveValue((event.key === "Home" ? matches[0] : matches[matches.length - 1]).value);
-			return;
-		}
-		if (event.key === "Enter") {
-			if (!expanded) return;
-			event.preventDefault();
-			if (activeIndex === -1) {
-				setOpen(false);
-				return;
-			}
-			choose(matches[activeIndex].value);
-			return;
-		}
-		if (event.key === "Escape") {
-			if (!open && query === null) return;
-			event.preventDefault();
-			setOpen(false);
-			setActiveValue(null);
-			setQuery(null);
-		}
-	};
-	const onBlur = () => {
-		setOpen(false);
-		setActiveValue(null);
-		if (query !== null) {
-			if (query.trim() === "") field.setValue(null);
-			setQuery(null);
+	const [removed, setRemoved] = useState([]);
+	const accept = field.def.accept;
+	const multiple = field.def.maxItems === void 0 || field.def.maxItems > 1;
+	const onPick = async (picked) => {
+		if (picked === null || picked.length === 0 || upload === void 0) return;
+		setBusy(true);
+		setFailure(void 0);
+		const uploaded = [];
+		const refused = [];
+		for (const file of Array.from(picked)) try {
+			uploaded.push(await upload(file));
+		} catch (error) {
+			refused.push(`${file.name} (${error instanceof Error ? error.message : String(error)})`);
 		}
+		if (uploaded.length > 0) field.setValue([...files, ...uploaded]);
+		if (refused.length > 0) setFailure(refused.length === 1 ? `${refused[0]} was not attached.` : `${String(refused.length)} files were not attached: ${refused.join(", ")}.`);
+		setBusy(false);
 		field.touch();
 	};
 	return /* @__PURE__ */ jsxs(FieldShell, {
 		path,
 		field,
 		label,
-		children: [/* @__PURE__ */ jsxs("div", {
-			"data-formancy-part": "typeahead-anchor",
-			children: [/* @__PURE__ */ jsx("input", {
-				type: "text",
-				role: "combobox",
-				...field.controlProps,
-				"data-formancy-part": "typeahead",
-				autoComplete: "off",
-				"aria-expanded": expanded,
-				"aria-controls": listboxId,
-				"aria-autocomplete": "list",
-				...sourced.remote?.busy === true ? { "aria-busy": true } : {},
-				...activeId === void 0 ? {} : { "aria-activedescendant": activeId },
-				value: query ?? chosen?.label ?? "",
-				onChange: (event) => {
-					setQuery(event.target.value);
-					setOpen(true);
-					setActiveValue(null);
+		children: [
+			upload === void 0 ? /* @__PURE__ */ jsx("p", {
+				"data-formancy-part": "file-unavailable",
+				children: "This form cannot accept files here, because no upload destination has been configured."
+			}) : /* @__PURE__ */ jsx("div", {
+				"data-formancy-part": "file-dropzone",
+				...over ? { "data-state": "over" } : {},
+				onDragOver: (event) => {
+					event.preventDefault();
+					if (field.disabled || busy) return;
+					setOver(true);
 				},
-				onClick: () => setOpen(true),
-				onKeyDown,
-				onBlur
-			}), /* @__PURE__ */ jsx("ul", {
-				id: listboxId,
-				role: "listbox",
-				"aria-label": `${label} suggestions`,
-				"data-formancy-part": "typeahead-listbox",
-				hidden: !expanded,
-				children: matches.map((option) => /* @__PURE__ */ jsx("li", {
-					id: optionDomId(field, option.value),
-					role: "option",
-					"data-formancy-part": "typeahead-option",
-					"data-active": option.value === activeValue ? "true" : void 0,
-					...chosen?.value === option.value ? { "aria-selected": true } : {},
-					onMouseDown: (event) => event.preventDefault(),
-					onClick: () => choose(option.value),
-					children: option.label
-				}, option.value))
-			})]
-		}), /* @__PURE__ */ jsx("p", {
-			role: "status",
-			"data-formancy-part": "typeahead-status",
-			...statusState({
-				sourced,
-				open,
-				matches: matches.length
-			}) === void 0 ? {} : { "data-state": statusState({
-				sourced,
-				open,
-				matches: matches.length
-			}) },
-			children: sourced.remote !== null && sourced.remote.status !== "" ? sourced.remote.status : open && matches.length === 0 && sourced.remote?.busy !== true ? "No options match" : ""
-		})]
+				onDragLeave: () => setOver(false),
+				onDrop: (event) => {
+					event.preventDefault();
+					setOver(false);
+					if (field.disabled || busy) return;
+					onPick(event.dataTransfer.files);
+				},
+				children: /* @__PURE__ */ jsx("input", {
+					...field.controlProps,
+					type: "file",
+					multiple,
+					...accept === void 0 ? {} : { accept: accept.join(",") },
+					disabled: field.disabled || busy,
+					onChange: (event) => {
+						onPick(event.target.files);
+						event.target.value = "";
+					}
+				})
+			}),
+			files.length === 0 && removed.length === 0 ? null : /* @__PURE__ */ jsxs("ul", {
+				"data-formancy-part": "file-list",
+				children: [files.map((file) => /* @__PURE__ */ jsxs("li", {
+					"data-formancy-part": "file-item",
+					children: [/* @__PURE__ */ jsx("span", { children: file.name }), /* @__PURE__ */ jsxs("button", {
+						type: "button",
+						disabled: field.disabled,
+						onClick: () => {
+							setRemoved((before) => [...before, {
+								at: files.findIndex((other) => other.id === file.id),
+								file
+							}]);
+							field.setValue(files.filter((other) => other.id !== file.id));
+						},
+						children: ["Remove ", file.name]
+					})]
+				}, file.id)), removed.map(({ at, file }) => /* @__PURE__ */ jsxs("li", {
+					"data-formancy-part": "file-item",
+					"data-state": "removed",
+					children: [/* @__PURE__ */ jsx("span", { children: file.name }), /* @__PURE__ */ jsxs("button", {
+						type: "button",
+						disabled: field.disabled,
+						onClick: () => {
+							setRemoved((before) => before.filter((other) => other.file.id !== file.id));
+							const next = [...files];
+							next.splice(Math.min(at, next.length), 0, file);
+							field.setValue(next);
+						},
+						children: ["Undo removing ", file.name]
+					})]
+				}, file.id))]
+			}),
+			/* @__PURE__ */ jsx("p", {
+				role: "status",
+				"data-formancy-part": "file-status",
+				children: busy ? "Uploading…" : failure ?? ""
+			})
+		]
 	});
 }
-/** One option's element id, in the shape the radio group already uses, so a
-*  reader of the DOM meets one convention rather than two. */
-function optionDomId(field, value) {
-	return `${field.ids.control}:option:${value}`;
-}
+//#endregion
+//#region src/fields/rich-text-field.tsx
 /**
-* How a grouped field says it is required.
+* The rich text control, over a stored grammar rather than HTML.
 *
-* A real element rather than an attribute, because the attribute that would
-* mean this — `aria-required` — is not supported on `role="group"`. The
-* engine puts this element's id into the group's `aria-describedby`, so it is
-* announced after the legend; rendering it is all a renderer has to do.
+* One file per control, because a control changes for its own reasons.
+* These were one 2,154-line file — the largest in the repository.
+*/
+/**
+* Formatted text, written as the restricted markup the spec defines.
 *
-* Visible as well as announced: WCAG 1.4.1 means a requirement carried only by
-* a red asterisk is a requirement some people cannot perceive.
-*/
-function RequiredHint({ field }) {
-	if (!field.required) return null;
-	return /* @__PURE__ */ jsx("span", {
-		"data-formancy-part": "required-hint",
-		id: field.props.hint.id,
-		children: "required"
-	});
-}
-function RadioGroupField({ path, label }) {
-	const field = useField(path);
-	const options = useResolvedOptions(field);
-	const showError = field.touched && field.errors.length > 0;
-	return /* @__PURE__ */ jsxs("fieldset", {
-		"data-formancy-part": "field",
-		"data-formancy-field-path": path,
-		"data-state": showError ? "invalid" : "valid",
-		"aria-describedby": field.controlProps["aria-describedby"],
-		children: [
-			/* @__PURE__ */ jsx("legend", {
-				"data-formancy-part": "label",
-				children: label
-			}),
-			/* @__PURE__ */ jsx(RequiredHint, { field }),
-			options.map((option) => {
-				const optionId = `${field.ids.control}:${option.value}`;
-				return /* @__PURE__ */ jsxs("span", {
-					"data-formancy-part": "radio-option",
-					children: [/* @__PURE__ */ jsx("input", {
-						type: "radio",
-						id: optionId,
-						name: field.controlProps.name,
-						value: option.value,
-						checked: field.value === option.value,
-						onChange: () => field.setValue(option.value),
-						onBlur: () => field.touch()
-					}), /* @__PURE__ */ jsx("label", {
-						htmlFor: optionId,
-						children: option.label
-					})]
-				}, option.value);
-			}),
-			showError ? /* @__PURE__ */ jsx("p", {
-				"data-formancy-part": "error",
-				...field.errorProps,
-				children: field.errors.join(", ")
-			}) : null
-		]
-	});
-}
-/**
-* Text the reader sees that collects nothing — a heading, an explanation, a
-* notice.
-*
-* Not a `<label>`, because there is no control for one to label, and a label
-* pointing at nothing is a label a screen reader announces as an orphan. Not a
-* heading element either: the spec does not say what level it would be, and
-* guessing produces a document outline that skips levels.
-*/
-function StaticField({ label }) {
-	return /* @__PURE__ */ jsx("p", {
-		"data-formancy-part": "static",
-		children: label
-	});
-}
-/**
-* Several answers from a list, every option visible at once.
-*
-* A `fieldset` with a `legend`, exactly like the radio group, because the
-* relationship is the same one: several controls that answer a single
-* question. What differs is only that more than one may be chosen, which is
-* `type="checkbox"` and an array — not a different structure and not a
-* different way of being announced.
-*
-* Requiring "at least one" is a property of the QUESTION, not of any one box,
-* so it belongs to the group — but not as `aria-required`, which
-* `role="group"` does not support and assistive technology therefore ignores.
-* It is announced through the group's description instead, which the engine
-* composes. Putting it on every box would announce each one as required,
-* which is the opposite of what it means.
-*/
-function SelectBoxesField({ path, label }) {
-	const field = useField(path);
-	const options = useResolvedOptions(field);
-	const showError = field.touched && field.errors.length > 0;
-	const chosen = Array.isArray(field.value) ? field.value : [];
-	const toggle = (value, on) => {
-		const next = options.map((option) => option.value).filter((candidate) => candidate === value ? on : chosen.includes(candidate));
-		field.setValue(next);
-	};
-	return /* @__PURE__ */ jsxs("fieldset", {
-		"data-formancy-part": "field",
-		"data-formancy-field-path": path,
-		"data-state": showError ? "invalid" : "valid",
-		"aria-describedby": field.controlProps["aria-describedby"],
-		children: [
-			/* @__PURE__ */ jsx("legend", {
-				"data-formancy-part": "label",
-				children: label
-			}),
-			/* @__PURE__ */ jsx(RequiredHint, { field }),
-			options.map((option) => {
-				const optionId = `${field.ids.control}:${option.value}`;
-				return /* @__PURE__ */ jsxs("span", {
-					"data-formancy-part": "checkbox-option",
-					children: [/* @__PURE__ */ jsx("input", {
-						type: "checkbox",
-						id: optionId,
-						name: field.controlProps.name,
-						value: option.value,
-						checked: chosen.includes(option.value),
-						disabled: field.disabled,
-						onChange: (event) => toggle(option.value, event.target.checked),
-						onBlur: () => field.touch()
-					}), /* @__PURE__ */ jsx("label", {
-						htmlFor: optionId,
-						children: option.label
-					})]
-				}, option.value);
-			}),
-			showError ? /* @__PURE__ */ jsx("p", {
-				"data-formancy-part": "error",
-				...field.errorProps,
-				children: field.errors.join(", ")
-			}) : null
-		]
-	});
-}
-/**
-* Formatted text, written as the restricted markup the spec defines.
-*
-* A textarea, not a contenteditable surface. That is a deliberate v1 cut and
-* not laziness: a WYSIWYG editor is a large accessibility surface of its own
-* — keyboard shortcuts, an announced selection model, focus management
-* inside a rich region — and shipping a half-built one is worse than
-* shipping a textarea that works with every assistive technology already.
-*
-* What the reader types is never treated as markup by anything. It is parsed
-* into a typed tree and rendered as elements, so there is no path from an
-* answer to `innerHTML` and no sanitiser to keep correct forever.
+* A textarea, not a contenteditable surface. That is a deliberate v1 cut and
+* not laziness: a WYSIWYG editor is a large accessibility surface of its own
+* — keyboard shortcuts, an announced selection model, focus management
+* inside a rich region — and shipping a half-built one is worse than
+* shipping a textarea that works with every assistive technology already.
+*
+* What the reader types is never treated as markup by anything. It is parsed
+* into a typed tree and rendered as elements, so there is no path from an
+* answer to `innerHTML` and no sanitiser to keep correct forever.
 */
 /**
 * The rich text toolbar.
@@ -1800,121 +1412,835 @@ function RichTextField({ path, label }) {
 		]
 	});
 }
+//#endregion
+//#region src/fields/selectboxes-field.tsx
 /**
-* Attached files.
+* Many answers from a set, as checkboxes or as a tag picker.
 *
-* The control picks files; something else uploads them and reports back what
-* was stored. That split is the whole design: this package has no opinion
-* about where bytes go, which is what lets the same field work against local
-* disk, S3 or a customer's own service.
+* One file per control, because a control changes for its own reasons.
+* These were one 2,154-line file — the largest in the repository.
+*/
+/**
+* Several answers from a list, every option visible at once.
 *
-* Without an uploader the field is read-only and says so, rather than
-* pretending to accept a file it has nowhere to put.
+* A `fieldset` with a `legend`, exactly like the radio group, because the
+* relationship is the same one: several controls that answer a single
+* question. What differs is only that more than one may be chosen, which is
+* `type="checkbox"` and an array — not a different structure and not a
+* different way of being announced.
+*
+* Requiring "at least one" is a property of the QUESTION, not of any one box,
+* so it belongs to the group — but not as `aria-required`, which
+* `role="group"` does not support and assistive technology therefore ignores.
+* It is announced through the group's description instead, which the engine
+* composes. Putting it on every box would announce each one as required,
+* which is the opposite of what it means.
 */
-function FileField({ path, label }) {
+/** A `selectboxes` is chips when the author asked for them, tick boxes otherwise. */
+function SelectBoxesSwitch(props) {
+	return useField(props.path).def?.widget === "tagpicker" ? /* @__PURE__ */ jsx(TagPickerField, { ...props }) : /* @__PURE__ */ jsx(SelectBoxesField, { ...props });
+}
+/**
+* `widget: "tagpicker"` — several answers, narrowed by typing, shown as chips.
+*
+* A widget rather than a field type because the answer does not change: an array
+* of offered option values in the options' own order, which is what a
+* `selectboxes` stores without it. What changes is that a list too long to tick
+* through becomes usable, and that the list may come from the deployment.
+*
+* **The chips are a list, and each carries its own remove button named after the
+* answer it removes.** "Remove" three times over tells a screen reader user which
+* nothing, and a chip a pointer can add and only a pointer can take away is
+* WCAG 2.1.1 — the failure this pattern ships with more often than any other.
+*
+* The combobox half is the typeahead's, deliberately: the same roles, the same
+* keys and the same `narrowOptionsByLabel` from `@formancy/spec`, so the two
+* cannot come to fold case differently. What differs is that choosing does not
+* fill the box — it adds a chip and clears it, because the next answer is the
+* common case.
+*/
+function TagPickerField({ path, label }) {
 	const field = useField(path);
-	const upload = useUploader();
-	const files = Array.isArray(field.value) ? field.value : [];
-	const [busy, setBusy] = useState(false);
-	const [failure, setFailure] = useState(void 0);
-	const [over, setOver] = useState(false);
-	/**
-	* Attachments taken out of the answer but not yet forgotten.
-	*
-	* Held with the position they came from, so undoing puts a file BACK where it
-	* was rather than on the end — the order matters to somebody who numbered
-	* their attachments in a covering note.
-	*/
-	const [removed, setRemoved] = useState([]);
-	const accept = field.def.accept;
-	const multiple = field.def.maxItems === void 0 || field.def.maxItems > 1;
-	const onPick = async (picked) => {
-		if (picked === null || picked.length === 0 || upload === void 0) return;
-		setBusy(true);
-		setFailure(void 0);
-		const uploaded = [];
-		const refused = [];
-		for (const file of Array.from(picked)) try {
-			uploaded.push(await upload(file));
-		} catch (error) {
-			refused.push(`${file.name} (${error instanceof Error ? error.message : String(error)})`);
-		}
-		if (uploaded.length > 0) field.setValue([...files, ...uploaded]);
-		if (refused.length > 0) setFailure(refused.length === 1 ? `${refused[0]} was not attached.` : `${String(refused.length)} files were not attached: ${refused.join(", ")}.`);
-		setBusy(false);
-		field.touch();
+	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 remaining = options.filter((option) => !chosen.includes(option.value));
+	const matches = narrowOptionsByLabel(remaining, query);
+	const expanded = open && matches.length > 0;
+	const add = (value) => {
+		const next = options.map((option) => option.value).filter((candidate) => candidate === value || chosen.includes(candidate));
+		field.setValue(next);
+		setQuery("");
+		setOpen(false);
 	};
-	return /* @__PURE__ */ jsxs(FieldShell, {
+	const remove = (value) => {
+		field.setValue(chosen.filter((candidate) => candidate !== value));
+	};
+	const labelFor = (value) => options.find((option) => option.value === value)?.label ?? value;
+	return /* @__PURE__ */ jsx(FieldShell, {
 		path,
 		field,
 		label,
-		children: [
-			upload === void 0 ? /* @__PURE__ */ jsx("p", {
-				"data-formancy-part": "file-unavailable",
-				children: "This form cannot accept files here, because no upload destination has been configured."
-			}) : /* @__PURE__ */ jsx("div", {
-				"data-formancy-part": "file-dropzone",
-				...over ? { "data-state": "over" } : {},
-				onDragOver: (event) => {
-					event.preventDefault();
-					if (field.disabled || busy) return;
-					setOver(true);
-				},
-				onDragLeave: () => setOver(false),
-				onDrop: (event) => {
-					event.preventDefault();
-					setOver(false);
-					if (field.disabled || busy) return;
-					onPick(event.dataTransfer.files);
-				},
-				children: /* @__PURE__ */ jsx("input", {
+		children: /* @__PURE__ */ jsxs("div", {
+			"data-formancy-part": "tagpicker",
+			children: [chosen.length === 0 ? null : /* @__PURE__ */ jsx("ul", {
+				"data-formancy-part": "tagpicker-chips",
+				"aria-label": `${label}: chosen`,
+				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": `Remove ${labelFor(value)}`,
+						onClick: () => remove(value),
+						children: "×"
+					})]
+				}, value))
+			}), /* @__PURE__ */ jsxs("div", {
+				"data-formancy-part": "tagpicker-anchor",
+				children: [/* @__PURE__ */ jsx("input", {
+					type: "text",
+					role: "combobox",
 					...field.controlProps,
-					type: "file",
-					multiple,
-					...accept === void 0 ? {} : { accept: accept.join(",") },
-					disabled: field.disabled || busy,
+					"data-formancy-part": "tagpicker-input",
+					autoComplete: "off",
+					"aria-expanded": expanded,
+					"aria-controls": listboxId,
+					"aria-autocomplete": "list",
+					value: query,
 					onChange: (event) => {
-						onPick(event.target.files);
-						event.target.value = "";
+						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);
+						field.touch();
 					}
-				})
+				}), /* @__PURE__ */ jsx("ul", {
+					id: listboxId,
+					role: "listbox",
+					"aria-label": `${label} suggestions`,
+					"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))
+				})]
+			})]
+		})
+	});
+}
+function SelectBoxesField({ path, label }) {
+	const field = useField(path);
+	const options = useResolvedOptions(field);
+	const showError = field.touched && field.errors.length > 0;
+	const chosen = Array.isArray(field.value) ? field.value : [];
+	const toggle = (value, on) => {
+		const next = options.map((option) => option.value).filter((candidate) => candidate === value ? on : chosen.includes(candidate));
+		field.setValue(next);
+	};
+	return /* @__PURE__ */ jsxs("fieldset", {
+		"data-formancy-part": "field",
+		"data-formancy-field-path": path,
+		"data-state": showError ? "invalid" : "valid",
+		"aria-describedby": field.controlProps["aria-describedby"],
+		children: [
+			/* @__PURE__ */ jsx("legend", {
+				"data-formancy-part": "label",
+				children: label
 			}),
-			files.length === 0 && removed.length === 0 ? null : /* @__PURE__ */ jsxs("ul", {
-				"data-formancy-part": "file-list",
-				children: [files.map((file) => /* @__PURE__ */ jsxs("li", {
-					"data-formancy-part": "file-item",
-					children: [/* @__PURE__ */ jsx("span", { children: file.name }), /* @__PURE__ */ jsxs("button", {
-						type: "button",
-						disabled: field.disabled,
-						onClick: () => {
-							setRemoved((before) => [...before, {
-								at: files.findIndex((other) => other.id === file.id),
-								file
-							}]);
-							field.setValue(files.filter((other) => other.id !== file.id));
-						},
-						children: ["Remove ", file.name]
-					})]
-				}, file.id)), removed.map(({ at, file }) => /* @__PURE__ */ jsxs("li", {
-					"data-formancy-part": "file-item",
-					"data-state": "removed",
-					children: [/* @__PURE__ */ jsx("span", { children: file.name }), /* @__PURE__ */ jsxs("button", {
-						type: "button",
+			/* @__PURE__ */ jsx(RequiredHint, { field }),
+			options.map((option) => {
+				const optionId = `${field.ids.control}:${option.value}`;
+				return /* @__PURE__ */ jsxs("span", {
+					"data-formancy-part": "checkbox-option",
+					children: [/* @__PURE__ */ jsx("input", {
+						type: "checkbox",
+						id: optionId,
+						name: field.controlProps.name,
+						value: option.value,
+						checked: chosen.includes(option.value),
 						disabled: field.disabled,
-						onClick: () => {
-							setRemoved((before) => before.filter((other) => other.file.id !== file.id));
-							const next = [...files];
-							next.splice(Math.min(at, next.length), 0, file);
-							field.setValue(next);
-						},
-						children: ["Undo removing ", file.name]
+						onChange: (event) => toggle(option.value, event.target.checked),
+						onBlur: () => field.touch()
+					}), /* @__PURE__ */ jsx("label", {
+						htmlFor: optionId,
+						children: option.label
 					})]
-				}, file.id))]
+				}, option.value);
 			}),
-			/* @__PURE__ */ jsx("p", {
-				role: "status",
-				"data-formancy-part": "file-status",
-				children: busy ? "Uploading…" : failure ?? ""
+			showError ? /* @__PURE__ */ jsx("p", {
+				"data-formancy-part": "error",
+				...field.errorProps,
+				children: field.errors.join(", ")
+			}) : null
+		]
+	});
+}
+//#endregion
+//#region src/fields/signature-field.tsx
+/**
+* The signature control: a mark drawn, or a name typed.
+*
+* One file per control, because a control changes for its own reasons.
+* These were one 2,154-line file — the largest in the repository.
+*/
+/**
+* Sign here: draw a mark, or type your name.
+*
+* **Both routes are the feature, not a fallback and its apology.** Typing your
+* name is how most people sign most things, and it is the only route a keyboard
+* has — a field that offered drawing alone would be a WCAG 2.1.1 failure with a
+* legal signature attached to it. So the two sit side by side and the last one
+* used is the answer; they are never both present, because a reader choosing
+* between them is a signed document that renders differently depending on the
+* choice.
+*
+* **SVG, not canvas.** A canvas answer would be pixels, and this stores points
+* ([0083](../../../docs/decisions/0083-a-signature-is-points-or-a-name.md)):
+* points scale, diff, survive a re-render and mean something to a reader that is
+* not a browser. Drawing them as an SVG path costs nothing extra and makes the
+* mark visible to anything that can read the DOM, including a test.
+*
+* **No stroke timing.** Velocity is what makes a signature biometric, and
+* biometric data is a category (GDPR Article 9) nothing here is equipped to
+* hold.
+*/
+function SignatureField({ path, label }) {
+	const field = useField(path);
+	const answer = typeof field.value === "object" && field.value !== null ? field.value : {};
+	const drawn = answer.drawn ?? [];
+	const [width, height] = field.def?.box ?? [600, 200];
+	const surface = useRef(null);
+	const stroke = useRef(null);
+	/**
+	* The strokes finished before this one started.
+	*
+	* Held rather than read back from the value, which is what the first version
+	* did — and the value already contains the stroke in progress, so every move
+	* appended another one. A signature drawn in the playground came out as forty
+	* strokes of a single point each; the unit tests moved once per stroke, which
+	* is the one shape that cannot show it.
+	*/
+	const before = useRef([]);
+	/**
+	* A client point in the field's own coordinate space, rounded to whole numbers.
+	*
+	* Whole numbers because the canonical hash a submission is bound to must not
+	* depend on how a browser rounded a pointer event. Clamped, because a pointer
+	* that leaves the box mid-stroke would otherwise record a point the engine
+	* refuses — the answer being invalid is the right outcome for a hand-written
+	* payload and the wrong one for somebody whose hand went past the edge.
+	*/
+	const pointFrom = (event) => {
+		const rect = surface.current?.getBoundingClientRect();
+		const scaleX = rect === void 0 || rect.width === 0 ? 1 : width / rect.width;
+		const scaleY = rect === void 0 || rect.height === 0 ? 1 : height / rect.height;
+		const x = (event.clientX - (rect?.left ?? 0)) * scaleX;
+		const y = (event.clientY - (rect?.top ?? 0)) * scaleY;
+		return [Math.max(0, Math.min(width, Math.round(x))), Math.max(0, Math.min(height, Math.round(y)))];
+	};
+	const commit = (strokes) => {
+		field.setValue(strokes.length === 0 ? null : { drawn: strokes });
+	};
+	const onPointerDown = (event) => {
+		before.current = drawn;
+		stroke.current = [pointFrom(event)];
+		surface.current?.setPointerCapture?.(event.pointerId);
+	};
+	const onPointerMove = (event) => {
+		if (stroke.current === null) return;
+		stroke.current = [...stroke.current, pointFrom(event)];
+		commit([...before.current, stroke.current]);
+	};
+	const onPointerUp = () => {
+		const finished = stroke.current;
+		if (finished === null) return;
+		stroke.current = null;
+		if (finished.length < 2) commit(before.current);
+	};
+	return /* @__PURE__ */ jsx(FieldShell, {
+		path,
+		field,
+		label,
+		children: /* @__PURE__ */ jsxs("div", {
+			"data-formancy-part": "signature",
+			children: [
+				/* @__PURE__ */ jsx("svg", {
+					ref: surface,
+					"data-formancy-part": "signature-surface",
+					viewBox: `0 0 ${String(width)} ${String(height)}`,
+					role: "img",
+					"aria-label": label,
+					onPointerDown,
+					onPointerMove,
+					onPointerUp,
+					onPointerLeave: onPointerUp,
+					children: drawn.map((points, at) => /* @__PURE__ */ jsx("path", {
+						"data-formancy-part": "signature-stroke",
+						d: points.map(([x, y], step) => `${step === 0 ? "M" : "L"}${String(x)} ${String(y)}`).join(" "),
+						fill: "none"
+					}, at))
+				}),
+				/* @__PURE__ */ jsx("input", {
+					"data-formancy-part": "signature-typed",
+					type: "text",
+					value: answer.typed ?? "",
+					"aria-label": "Type your name",
+					onChange: (event) => {
+						const typed = event.target.value;
+						field.setValue(typed === "" ? null : { typed });
+					},
+					onBlur: field.touch
+				}),
+				/* @__PURE__ */ jsx("button", {
+					"data-formancy-part": "signature-clear",
+					type: "button",
+					onClick: () => {
+						stroke.current = null;
+						before.current = [];
+						field.setValue(null);
+					},
+					children: "Clear"
+				})
+			]
+		})
+	});
+}
+//#endregion
+//#region src/fields/static-field.tsx
+/**
+* Text the reader sees that collects nothing.
+*
+* One file per control, because a control changes for its own reasons.
+* These were one 2,154-line file — the largest in the repository.
+*/
+/**
+* Text the reader sees that collects nothing — a heading, an explanation, a
+* notice.
+*
+* Not a `<label>`, because there is no control for one to label, and a label
+* pointing at nothing is a label a screen reader announces as an orphan. Not a
+* heading element either: the spec does not say what level it would be, and
+* guessing produces a document outline that skips levels.
+*/
+function StaticField({ label }) {
+	return /* @__PURE__ */ jsx("p", {
+		"data-formancy-part": "static",
+		children: label
+	});
+}
+//#endregion
+//#region src/fields/temporal-fields.tsx
+/**
+* The temporal controls, each holding one canonical fixed-width string.
+*
+* One file per control, because a control changes for its own reasons.
+* These were one 2,154-line file — the largest in the repository.
+*/
+function DateField({ path, label }) {
+	const field = useField(path);
+	return /* @__PURE__ */ jsx(FieldShell, {
+		path,
+		field,
+		label,
+		children: /* @__PURE__ */ jsx("input", {
+			type: "date",
+			...field.controlProps,
+			value: typeof field.value === "string" ? field.value : "",
+			onChange: (event) => field.setValue(event.target.value === "" ? null : event.target.value),
+			onBlur: () => field.touch()
+		})
+	});
+}
+/**
+* A time of day, as `HH:MM`.
+*
+* `<input type="time">` gives the platform's own picker, its own keyboard handling
+* and its own locale display — a 12-hour clock where the reader expects one — while
+* its `value` is always `HH:MM` on a 24-hour clock. That is exactly the split the
+* format wants: the reader sees their convention, the answer records one canonical
+* shape.
+*
+* `step` is not set, so the browser offers no seconds. A time answer has none, and a
+* control offering a precision the format discards is a control that loses what
+* somebody typed.
+*/
+function TimeField({ path, label }) {
+	const field = useField(path);
+	return /* @__PURE__ */ jsx(FieldShell, {
+		path,
+		field,
+		label,
+		children: /* @__PURE__ */ jsx("input", {
+			type: "time",
+			...field.controlProps,
+			...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 : "",
+			onChange: (event) => field.setValue(event.target.value === "" ? null : event.target.value),
+			onBlur: () => field.touch()
+		})
+	});
+}
+/**
+* An instant, stored as `YYYY-MM-DDTHH:MM:SSZ`.
+*
+* `<input type="datetime-local">` because there is no zoned datetime input in any
+* browser — so the control shows the reader a local wall clock and this converts.
+* The conversion is the whole reason this component exists rather than reusing
+* `DateField`:
+*
+* - **In:** the control gives `YYYY-MM-DDTHH:MM` in the reader's own zone. `new
+*   Date(local).toISOString()` interprets a zoneless string as local time, which is
+*   what is wanted here and is exactly what `bindTimestamp` refuses for a stored
+*   value — the difference is that the reader's zone is known at the moment they
+*   type, and is not knowable later.
+* - **Out:** the stored instant is rendered back into local time for the control,
+*   sliced to minutes because the input rejects a seconds component it was not asked
+*   for.
+*
+* Seconds are therefore always `00` in an answer a person typed. The format keeps
+* them because a machine-supplied answer has them and a fixed width is what makes
+* ordering work.
+*/
+function DateTimeField({ path, label }) {
+	const field = useField(path);
+	const stored = typeof field.value === "string" ? field.value : "";
+	const asLocal = () => {
+		if (stored === "") return "";
+		const instant = new Date(stored);
+		if (Number.isNaN(instant.getTime())) return "";
+		const pad = (part) => String(part).padStart(2, "0");
+		return `${String(instant.getFullYear())}-${pad(instant.getMonth() + 1)}-${pad(instant.getDate())}T${pad(instant.getHours())}:${pad(instant.getMinutes())}`;
+	};
+	return /* @__PURE__ */ jsx(FieldShell, {
+		path,
+		field,
+		label,
+		children: /* @__PURE__ */ jsx("input", {
+			type: "datetime-local",
+			...field.controlProps,
+			value: asLocal(),
+			onChange: (event) => {
+				const local = event.target.value;
+				if (local === "") {
+					field.setValue(null);
+					return;
+				}
+				const instant = new Date(local);
+				field.setValue(Number.isNaN(instant.getTime()) ? null : `${instant.toISOString().slice(0, 19)}Z`);
+			},
+			onBlur: () => field.touch()
+		})
+	});
+}
+//#endregion
+//#region src/fields/text-fields.tsx
+/**
+* The controls that take typed text, and the widgets over them.
+*
+* One file per control, because a control changes for its own reasons.
+* These were one 2,154-line file — the largest in the repository.
+*/
+/**
+* A single-line answer, and — with `widget: "scanner"` — a camera route to the same
+* string.
+*
+* The input is the control in both cases, never a second one beside it: typing is
+* the accessibility floor and the fallback at once, so it is what is always there
+* and the scan button is what is sometimes added. With no scanner supplied the
+* markup is the default control exactly, because a Scan button that opens nothing is
+* worse than no button ([0071](../../../docs/decisions/0071-a-scanner-is-supplied-not-built.md)).
+*/
+function TextField({ path, label }) {
+	const field = useField(path);
+	const scan = useScanner();
+	const [scanning, setScanning] = useState(false);
+	/** A device failure, held here rather than in the field's errors. See below. */
+	const [trouble, setTrouble] = useState(void 0);
+	/**
+	* The ONE place a text field's answer is written, typed or scanned.
+	*
+	* Structural rather than careful: the parameter is a `string`, so there is no path
+	* from the camera to `setValue` that could store something typing could not. That
+	* is the line a widget may never cross — it changes how a field looks, never what
+	* it collects ([0065](../../../docs/decisions/0065-a-widget-is-authored-not-registered.md)).
+	*/
+	const commit = (text) => field.setValue(text.replace(/[\r\n]/g, ""));
+	const read = async () => {
+		if (scan === void 0 || scanning) return;
+		setScanning(true);
+		setTrouble(void 0);
+		try {
+			const text = await scan({
+				label,
+				path
+			});
+			if (text === null) return;
+			if (typeof text !== "string") {
+				setTrouble("Scanning did not work: the scanner did not return text. Type the value instead.");
+				return;
+			}
+			commit(text);
+			field.touch();
+		} catch (error) {
+			setTrouble(`Scanning did not work: ${error instanceof Error ? error.message : String(error)}. Type the value instead.`);
+		} finally {
+			setScanning(false);
+		}
+	};
+	return /* @__PURE__ */ jsxs(FieldShell, {
+		path,
+		field,
+		label,
+		children: [/* @__PURE__ */ jsx("input", {
+			type: "text",
+			...field.controlProps,
+			value: typeof field.value === "string" ? field.value : "",
+			onChange: (event) => commit(event.target.value),
+			onBlur: () => field.touch()
+		}), field.def.widget === "scanner" && scan !== void 0 ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("button", {
+			type: "button",
+			"data-formancy-part": "scanner-button",
+			disabled: field.disabled,
+			"aria-busy": scanning ? true : void 0,
+			onClick: () => {
+				read();
+			},
+			children: ["Scan ", /* @__PURE__ */ jsx("span", {
+				"data-formancy-part": "visually-hidden",
+				children: label
+			})]
+		}), /* @__PURE__ */ jsx("p", {
+			role: "status",
+			"data-formancy-part": "scanner-status",
+			children: scanning ? "Scanning…" : trouble ?? ""
+		})] }) : null]
+	});
+}
+function TextareaField({ path, label }) {
+	const field = useField(path);
+	return /* @__PURE__ */ jsx(FieldShell, {
+		path,
+		field,
+		label,
+		children: /* @__PURE__ */ jsx("textarea", {
+			...field.controlProps,
+			value: typeof field.value === "string" ? field.value : "",
+			onChange: (event) => field.setValue(event.target.value),
+			onBlur: () => field.touch()
+		})
+	});
+}
+function NumberField({ path, label }) {
+	const field = useField(path);
+	return /* @__PURE__ */ jsx(FieldShell, {
+		path,
+		field,
+		label,
+		children: /* @__PURE__ */ jsx("input", {
+			type: "number",
+			...field.controlProps,
+			value: typeof field.value === "number" ? field.value : "",
+			onChange: (event) => field.setValue(event.target.value === "" ? null : event.target.valueAsNumber),
+			onBlur: () => field.touch()
+		})
+	});
+}
+//#endregion
+//#region src/form.tsx
+/**
+* The form, the list that walks it, and which component renders which type.
+*
+* What is left after the controls moved into `fields/`: 2,154 lines that had
+* become the place things went. Three subjects remain here and they are one —
+* a form renders a list, a list renders a slot, a slot may render a repeater,
+* and a repeater renders a list. Mutual recursion is not a seam.
+*
+* `null` in the map is not an omission. `hidden` renders nothing by design, and
+* `group`, `page` and `repeater` are containers the list itself walks rather
+* than controls.
+*/
+/**
+* Renders the whole form from the engine: one slot per field, resolved through
+* the registry. Slots subscribe individually, so a keystroke re-renders one
+* field and a visibility flip mounts or unmounts exactly the fields it hit.
+* A paged schema renders a stepper, one page at a time, navigation, and the
+* submit control on the last page — a failed submit navigates to the first
+* page with a problem instead of leaving the user on a clean review page
+* staring at a rejection.
+*/
+function FormancyForm(props) {
+	return useFormEngine().wizard() === void 0 ? /* @__PURE__ */ jsx(FlatForm, { ...props }) : /* @__PURE__ */ jsx(PagedForm, { ...props });
+}
+function SubmitButton({ submitLabel, onSubmit, onFailedNavigate }) {
+	const engine = useFormEngine();
+	const submit = useSubmit();
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		"data-formancy-part": "submit",
+		onClick: () => {
+			const outcome = submit();
+			if (!outcome.ok && onFailedNavigate !== void 0) {
+				const firstInvalid = engine.firstInvalid();
+				if (firstInvalid !== null) onFailedNavigate(engine.pageOf(parsePath(firstInvalid)));
+			}
+			onSubmit?.(outcome.ok ? {
+				ok: true,
+				errors: outcome.errors,
+				data: engine.value()
+			} : {
+				ok: false,
+				errors: outcome.errors
+			});
+		},
+		children: submitLabel ?? "Submit"
+	});
+}
+function FlatForm(props) {
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(FieldList, { ...props }), /* @__PURE__ */ jsx(SubmitButton, { ...props })] });
+}
+function PagedForm(props) {
+	const engine = useFormEngine();
+	const wizard = useWizard();
+	const pages = engine.pages().map((page, index) => ({
+		...page,
+		index
+	})).filter((page) => !page.skipped);
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		/* @__PURE__ */ jsx("nav", {
+			"data-formancy-part": "stepper",
+			"aria-label": "Progress",
+			children: /* @__PURE__ */ jsx("ol", { children: pages.map((page) => /* @__PURE__ */ jsx("li", {
+				"aria-current": page.index === wizard.page ? "step" : void 0,
+				children: engine.text(page.def.label) ?? page.key
+			}, page.key)) })
+		}),
+		/* @__PURE__ */ jsx(FieldList, {
+			...props,
+			page: wizard.page
+		}),
+		/* @__PURE__ */ jsxs("div", {
+			"data-formancy-part": "wizard-nav",
+			children: [wizard.canGoBack ? /* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: () => wizard.back(),
+				children: "Back"
+			}) : null, wizard.canGoNext ? /* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: () => void wizard.next(),
+				children: "Next"
+			}) : /* @__PURE__ */ jsx(SubmitButton, {
+				...props,
+				onFailedNavigate: (page) => wizard.goTo(page)
+			})]
+		})
+	] });
+}
+function FieldList({ labels, registry, page, layout }) {
+	const engine = useFormEngine();
+	const repeaterWires = engine.repeaterPaths();
+	const schema = engine.schema();
+	const arrangement = schema.layouts?.find((candidate) => candidate.name === layout);
+	if (layout !== void 0 && arrangement !== void 0) {
+		new Set(placedPaths(arrangement.nodes));
+		return /* @__PURE__ */ jsx(LayoutTree, {
+			schema,
+			nodes: arrangement.nodes,
+			locale: schema.i18n?.defaultLocale ?? "",
+			renderField: (path) => {
+				if (repeaterWires.includes(path)) return /* @__PURE__ */ jsx(RepeaterSection, {
+					wire: path,
+					labels,
+					registry
+				}, path);
+				return /* @__PURE__ */ jsx(FieldSlot, {
+					path,
+					fallbackLabel: labels?.[path],
+					registry
+				}, path);
+			}
+		});
+	}
+	const inPage = (wire) => page === void 0 || engine.pageOf(parsePath(wire)) === page;
+	const staticWires = engine.fieldPaths().filter((wire) => !repeaterWires.some((repeater) => wire.startsWith(`${repeater}[`)));
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [staticWires.filter(inPage).map((wire) => /* @__PURE__ */ jsx(FieldSlot, {
+		path: wire,
+		fallbackLabel: labels?.[wire],
+		registry
+	}, wire)), repeaterWires.filter(inPage).map((wire) => /* @__PURE__ */ jsx(RepeaterSection, {
+		wire,
+		labels,
+		registry
+	}, wire))] });
+}
+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];
+	if (Component === null) return null;
+	const label = field.label ?? fallbackLabel ?? path;
+	return /* @__PURE__ */ jsx(Component, {
+		path,
+		label
+	});
+}
+function RepeaterSection({ wire, labels, registry }) {
+	const engine = useFormEngine();
+	const repeater = useRepeater(wire);
+	const def = engine.repeaters().find((candidate) => candidate.wire === wire)?.def;
+	const label = engine.text(def?.label) ?? labels?.[wire] ?? wire;
+	const addLabel = def?.addLabel ?? `Add ${label}`;
+	const removeLabel = def?.removeLabel ?? `Remove ${label}`;
+	const fallbackFor = (instanceWire) => {
+		const template = instanceWire.replace(/\[\d+\]/, "[]");
+		return labels?.[template] ?? labels?.[instanceWire];
+	};
+	const grid = def?.widget === "datagrid";
+	const declaredColumns = def?.columns ?? [];
+	const plan = grid ? datagridColumns(def, declaredColumns) : [];
+	const tracks = declaredColumns.some((column) => column.width !== void 0) ? plan.map(({ column }) => column?.width === void 0 ? "1fr" : `${String(column.width)}fr`).join(" ") : void 0;
+	/** The control in one cell: the leaf the column's child field collects into.
+	*
+	*  One leaf, because a grid's rows are FLAT -- a child holding fields of its own is
+	*  refused when the document is saved
+	*  ([0078](../../../docs/decisions/0078-a-grid-row-is-flat.md)). This walked the whole
+	*  subtree under the child while a group could be a column, and every clause that made
+	*  that walk safe is gone with the arrangement it served.
+	*
+	*  Still a filter over the paths that EXIST rather than the path the column implies, so
+	*  a document nobody validated renders an empty cell instead of asking the engine about
+	*  a field it does not have. */
+	const leavesOf = (index, key) => {
+		const wanted = `${wire}[${String(index)}].${key}`;
+		return engine.fieldPaths().filter((leaf) => leaf === wanted);
+	};
+	/** A column's visible heading: the author's shortening, else the child's own label,
+	*  else the labels prop, else the key.
+	*
+	*  Visible text and NOTHING else -- never an `id` target, never an `aria-label`.
+	*  Measured against the accessible-name implementation this repository installs: a
+	*  column heading contributes nothing to the name of a control in its column, whether
+	*  it is a `<th scope="col">` or a `headers=` target. So the heading cannot replace a
+	*  cell's label, and pointing a control at it would only ADD the heading to the name --
+	*  which is the failure 0066 separates `header` from `label` to prevent. */
+	const headingOf = (entry) => engine.text(entry.column?.header) ?? engine.text(entry.child?.label) ?? fallbackFor(`${wire}[0].${entry.key}`) ?? entry.key;
+	/** A row's own controls, identical in both arrangements down to the names, because
+	*  0068 put the row's position in those names and a grid does not change where a person
+	*  is.
+	*
+	*  The text sits in its own element so a THEME can clip it and draw a mark instead,
+	*  which is what a grid wants -- "Remove recipient 1 of 1" on three wrapped lines took
+	*  more room than the answers beside it, measured in the playground. Clipped and never
+	*  removed: `display: none` and `visibility: hidden` both compute the button's name to
+	*  the empty string, and a button called nothing is worse than a wide one.
+	*
+	*  The renderer draws no mark of its own. An icon is appearance, appearance belongs to
+	*  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", {
+			type: "button",
+			"data-formancy-part": "row-remove",
+			onClick: () => repeater.removeRow(index),
+			children: /* @__PURE__ */ jsx("span", {
+				"data-formancy-part": "row-action-text",
+				children: `${removeLabel} ${index + 1} of ${repeater.rowCount}`
+			})
+		}),
+		index > 0 ? /* @__PURE__ */ jsx("button", {
+			type: "button",
+			"data-formancy-part": "row-up",
+			onClick: () => repeater.moveRow(index, index - 1),
+			children: /* @__PURE__ */ jsx("span", {
+				"data-formancy-part": "row-action-text",
+				children: `Move ${label} ${index + 1} of ${repeater.rowCount} up`
+			})
+		}) : null,
+		index < repeater.rowCount - 1 ? /* @__PURE__ */ jsx("button", {
+			type: "button",
+			"data-formancy-part": "row-down",
+			onClick: () => repeater.moveRow(index, index + 1),
+			children: /* @__PURE__ */ jsx("span", {
+				"data-formancy-part": "row-action-text",
+				children: `Move ${label} ${index + 1} of ${repeater.rowCount} down`
+			})
+		}) : null
+	] });
+	/** One control in a row.
+	*
+	*  Keyed by the POSITIONAL WIRE, so every control in a row is remounted when the row
+	*  moves and focus is lost on a reorder. Keying by the field's key within the row fixes
+	*  that here, and was reverted to keep the two renderers identical: the same change in
+	*  Angular lets it REUSE a component whose path is read once in ngOnInit, so after a
+	*  removal it binds to the old wire and shows the wrong row's answer -- caught by a
+	*  conformance fixture. One renderer keeping focus and the other not is the
+	*  framework-specific divergence this architecture exists to prevent, so both wait for
+	*  reactive path binding in Angular. */
+	const slot = (instanceWire) => /* @__PURE__ */ jsx(FieldSlot, {
+		path: instanceWire,
+		fallbackLabel: fallbackFor(instanceWire),
+		registry
+	}, instanceWire);
+	const rows = repeater.rowIds.map((rowId, index) => grid ? /* @__PURE__ */ jsxs("div", {
+		"data-formancy-part": "datagrid-row",
+		children: [plan.map((entry) => /* @__PURE__ */ jsx("div", {
+			"data-formancy-part": "datagrid-cell",
+			...entry.column?.align === void 0 ? {} : { "data-align": entry.column.align },
+			children: leavesOf(index, entry.key).map(slot)
+		}, entry.key)), /* @__PURE__ */ jsx("div", {
+			"data-formancy-part": "datagrid-actions",
+			children: rowButtons(index)
+		})]
+	}, rowId) : /* @__PURE__ */ jsxs("div", {
+		"data-formancy-part": "row",
+		children: [engine.fieldPaths().filter((candidate) => candidate.startsWith(`${wire}[${String(index)}]`)).map(slot), rowButtons(index)]
+	}, rowId));
+	return /* @__PURE__ */ jsxs("fieldset", {
+		"data-formancy-part": "repeater",
+		children: [
+			/* @__PURE__ */ jsx("legend", {
+				"data-formancy-part": "repeater-legend",
+				children: label
+			}),
+			grid ? /* @__PURE__ */ jsxs("div", {
+				"data-formancy-part": "datagrid",
+				"data-columns": String(plan.length),
+				...tracks === void 0 ? {} : { style: { "--fm-datagrid-columns": tracks } },
+				children: [repeater.rowCount > 0 ? /* @__PURE__ */ jsx("div", {
+					"data-formancy-part": "datagrid-head",
+					children: plan.map((entry) => /* @__PURE__ */ jsx("span", {
+						"data-formancy-part": "datagrid-heading",
+						...entry.column?.align === void 0 ? {} : { "data-align": entry.column.align },
+						children: headingOf(entry)
+					}, entry.key))
+				}) : null, rows]
+			}) : rows,
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: () => repeater.addRow(),
+				children: addLabel
 			})
 		]
 	});
@@ -1935,9 +2261,10 @@ const DEFAULT_COMPONENTS = {
 	datetime: DateTimeField,
 	select: SelectField,
 	radio: RadioGroupField,
-	selectboxes: SelectBoxesField,
+	selectboxes: SelectBoxesSwitch,
 	file: FileField,
 	richtext: RichTextField,
+	signature: SignatureField,
 	hidden: null,
 	static: StaticField,
 	group: null,