@formancy/react 0.1.0 → 0.2.0

package/dist/index.mjs

@@ -1,6 +1,9 @@
-import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useSyncExternalStore } from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, createContext, useCallback, useContext, useEffect, useId, useMemo, useRef, useState, useSyncExternalStore } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { formatPath, parsePath } from "@formancy/core";
+import { LAYOUT_LEAF_KINDS, acceptRemoteOptions, applyRichCommand, capRemoteOptions, datagridColumns, layoutChildren, narrowOptionsByLabel, parseRichText, resolveText } from "@formancy/spec";
+import { flushSync } from "react-dom";
+import { encode } from "uqr";
 //#region src/context.tsx
 /**
 * The engine reaches components through context, never through props drilling:
@@ -73,21 +76,22 @@ function useRepeater(path) {
 	const rowCount = useSyncExternalStore(subscribe, getRowCount, getRowCount);
 	const addRow = useCallback(() => engine.addRow(parsed), [engine, parsed]);
 	const removeRow = useCallback((index) => engine.removeRow(parsed, index), [engine, parsed]);
-	const rowIds = useMemo(() => Array.from({ length: rowCount }, (_, index) => engine.rowId(parsed, index)), [
-		engine,
-		parsed,
-		rowCount
-	]);
+	const moveRow = useCallback((from, to) => engine.moveRow(parsed, from, to), [engine, parsed]);
+	const getRowIdList = useCallback(() => Array.from({ length: engine.rowCount(parsed) }, (_, index) => engine.rowId(parsed, index)).join(" "), [engine, parsed]);
+	const rowIdList = useSyncExternalStore(subscribe, getRowIdList, getRowIdList);
+	const rowIds = useMemo(() => rowIdList === "" ? [] : rowIdList.split(" "), [rowIdList]);
 	return useMemo(() => ({
 		rowCount,
 		rowIds,
 		addRow,
-		removeRow
+		removeRow,
+		moveRow
 	}), [
 		rowCount,
 		rowIds,
 		addRow,
-		removeRow
+		removeRow,
+		moveRow
 	]);
 }
 //#endregion
@@ -112,6 +116,14 @@ function useWizard() {
 	}), [page, wizard]);
 }
 //#endregion
+//#region src/focus-control.ts
+/** Reveal enclosing tabs before focusing: hidden controls cannot emit focusin. */
+function focusControl(control) {
+	if (control === null) return;
+	control.dispatchEvent(new Event("formancy-reveal", { bubbles: true }));
+	control.focus();
+}
+//#endregion
 //#region src/use-submit.ts
 /**
 * Submit the form: touch everything, validate everything, and on failure move
@@ -130,7 +142,7 @@ function useSubmit() {
 				const firstInvalid = engine.firstInvalid();
 				if (firstInvalid !== null) {
 					const ids = engine.getFieldSnapshot(parsePath(firstInvalid)).ids;
-					document.getElementById(ids.control)?.focus();
+					focusControl(document.getElementById(ids.control));
 				}
 			}
 		}
@@ -138,6 +150,528 @@ function useSubmit() {
 	}, [engine]);
 }
 //#endregion
+//#region src/layout.tsx
+function LayoutTree({ schema, nodes, locale, renderField, at = [] }) {
+	return /* @__PURE__ */ jsx(Fragment$1, { children: nodes.map((node, index) => {
+		const view = /* @__PURE__ */ jsx(LayoutNodeView, {
+			schema,
+			node,
+			locale,
+			renderField,
+			at: [...at, index]
+		}, index);
+		if (node.span === void 0) return view;
+		return /* @__PURE__ */ jsx("div", {
+			"data-formancy-part": "layout-cell",
+			"data-span": String(node.span),
+			...node.span === "all" ? {} : { style: { "--fm-span": String(node.span) } },
+			children: view
+		}, index);
+	}) });
+}
+function LayoutNodeView({ schema, node, locale, renderField, at }) {
+	const headingId = useId();
+	if (node.kind === "field") return renderField(node.path);
+	if (node.kind === "qrcode") return /* @__PURE__ */ jsx(CodeNode, {
+		schema,
+		node,
+		locale
+	});
+	const label = resolveText(schema, node.label, locale);
+	const here = at.join(".");
+	const children = /* @__PURE__ */ jsx(LayoutTree, {
+		schema,
+		nodes: layoutChildren(node),
+		locale,
+		renderField,
+		at
+	});
+	if (node.kind === "row") return /* @__PURE__ */ jsx("div", {
+		"data-formancy-part": "layout-row",
+		"data-formancy-layout-path": here,
+		"data-columns": String(node.children.length),
+		children
+	});
+	if (node.kind === "column") return /* @__PURE__ */ jsx("div", {
+		"data-formancy-part": "layout-column",
+		"data-formancy-layout-path": here,
+		children
+	});
+	if (node.kind === "tabs") return /* @__PURE__ */ jsx(Tabs, {
+		schema,
+		node,
+		locale,
+		renderField,
+		at,
+		here
+	});
+	if (node.kind === "table") return /* @__PURE__ */ jsxs("div", {
+		"data-formancy-part": "layout-table",
+		"data-formancy-layout-path": here,
+		"data-columns": String(node.columns),
+		...label === void 0 ? {} : {
+			role: "group",
+			"aria-labelledby": headingId
+		},
+		children: [label === void 0 ? null : /* @__PURE__ */ jsx("p", {
+			id: headingId,
+			"data-formancy-part": "layout-section-heading",
+			children: label
+		}), children]
+	});
+	if (label === void 0) return /* @__PURE__ */ jsx("div", {
+		"data-formancy-part": "layout-section",
+		"data-formancy-layout-path": here,
+		children
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		"data-formancy-part": "layout-section",
+		"data-formancy-layout-path": here,
+		role: "group",
+		"aria-labelledby": headingId,
+		children: [/* @__PURE__ */ jsx("p", {
+			id: headingId,
+			"data-formancy-part": "layout-section-heading",
+			children: label
+		}), children]
+	});
+}
+/**
+* One panel at a time, behind a row of tabs.
+*
+* The ARIA tabs pattern, and the reason it is written out rather than reached
+* for from a library: the keyboard behaviour is the specification. Arrows move
+* between tabs, Home and End reach the ends, and the tab strip is ONE tab stop
+* — a roving tabindex — so a form with twelve tabs does not cost twelve
+* presses to get past.
+*
+* **Every panel stays in the DOM.** A closed tab is hidden, not unmounted,
+* which is the decision the rest of this component follows from. Tabs are
+* presentation, unlike pages: a field in a closed tab is still validated and
+* still submitted, so it has to exist to be validated, and the browser's own
+* find-in-page finds it. Unmounting would also throw away what somebody had
+* typed the moment they looked at another tab.
+*
+* **A tab opens when an error is in it.** An error summary focuses the first
+* invalid control, and focusing something inside a hidden panel does nothing
+* at all — the reader is told the form has an error and sent nowhere. So the
+* strip handles an explicit reveal request before the control receives focus.
+*/
+function Tabs({ schema, node, locale, renderField, at, here }) {
+	const base = useId();
+	const [open, setOpen] = useState(0);
+	const strip = useRef(null);
+	const panels = useRef([]);
+	const tabs = useRef([]);
+	/** Set only by a key press, so focus is never taken from elsewhere. */
+	const moveFocus = useRef(false);
+	const names = node.children.map((child) => child.kind === "field" ? void 0 : resolveText(schema, child.label, locale));
+	useEffect(() => {
+		if (!moveFocus.current) return;
+		moveFocus.current = false;
+		tabs.current[open]?.focus();
+	}, [open]);
+	useEffect(() => {
+		const listeners = panels.current.map((panel, index) => {
+			if (panel === null) return void 0;
+			const reveal = () => flushSync(() => setOpen(index));
+			panel.addEventListener("formancy-reveal", reveal);
+			return () => panel.removeEventListener("formancy-reveal", reveal);
+		});
+		return () => {
+			for (const off of listeners) off?.();
+		};
+	}, [node.children.length]);
+	const onKeyDown = (event) => {
+		const last = node.children.length - 1;
+		const next = event.key === "ArrowRight" ? Math.min(open + 1, last) : event.key === "ArrowLeft" ? Math.max(open - 1, 0) : event.key === "Home" ? 0 : event.key === "End" ? last : void 0;
+		if (next === void 0) return;
+		event.preventDefault();
+		moveFocus.current = true;
+		setOpen(next);
+	};
+	const stripName = resolveText(schema, node.label, locale);
+	return /* @__PURE__ */ jsxs("div", {
+		"data-formancy-part": "layout-tabs",
+		"data-formancy-layout-path": here,
+		children: [/* @__PURE__ */ jsx("div", {
+			ref: strip,
+			role: "tablist",
+			...stripName === void 0 ? {} : { "aria-label": stripName },
+			"data-formancy-part": "tablist",
+			onKeyDown,
+			children: node.children.map((child, index) => /* @__PURE__ */ jsx("button", {
+				ref: (element) => {
+					tabs.current[index] = element;
+				},
+				type: "button",
+				role: "tab",
+				id: `${base}-tab-${String(index)}`,
+				"aria-controls": `${base}-panel-${String(index)}`,
+				"aria-selected": index === open,
+				tabIndex: index === open ? 0 : -1,
+				"data-formancy-part": "tab",
+				onClick: () => setOpen(index),
+				children: names[index] ?? `Tab ${String(index + 1)}`
+			}, index))
+		}), node.children.map((child, index) => /* @__PURE__ */ jsx("div", {
+			ref: (element) => {
+				panels.current[index] = element;
+			},
+			role: "tabpanel",
+			id: `${base}-panel-${String(index)}`,
+			"aria-labelledby": `${base}-tab-${String(index)}`,
+			"data-formancy-part": "tabpanel",
+			hidden: index !== open,
+			children: /* @__PURE__ */ jsx(LayoutTree, {
+				schema,
+				nodes: LAYOUT_LEAF_KINDS.has(child.kind) ? [child] : layoutChildren(child),
+				locale,
+				renderField,
+				at: [...at, index]
+			})
+		}, index))]
+	});
+}
+/**
+* A machine-readable code drawn from an answer the form already holds.
+*
+* **The accessible content is the value, not the picture.** The value is real text in
+* the document; a drawing, when a consumer registers one, is decorative — a screen
+* reader needs the value it encodes, which somebody can read, copy or dictate.
+*
+* **Out of the box a `qrcode` node shows the value as text and no code.** Encoding one
+* is roughly 10 kB and a SOUP row for every consumer, in a package budgeted at 4 kB, to
+* draw something a design system may want to draw its own way. A consumer who wants the
+* picture registers a component for it
+* ([0070](../../../docs/decisions/0070-a-code-is-an-arrangement-not-a-field.md)).
+*/
+function CodeNode({ schema, node, locale }) {
+	const label = resolveText(schema, node.label, locale);
+	const labelId = useId();
+	const value = useField(node.path).value;
+	const text = typeof value === "string" ? value : value === null || value === void 0 ? "" : String(value);
+	return /* @__PURE__ */ jsxs("div", {
+		"data-formancy-part": "code",
+		"data-state": text === "" ? "empty" : "ready",
+		children: [
+			label === void 0 ? null : /* @__PURE__ */ jsx("span", {
+				id: labelId,
+				"data-formancy-part": "code-label",
+				children: label
+			}),
+			text === "" ? null : /* @__PURE__ */ jsx(CodeDrawing, { value: text }),
+			/* @__PURE__ */ jsx("output", {
+				"data-formancy-part": "code-value",
+				...label === void 0 ? {} : { "aria-labelledby": labelId },
+				children: text
+			})
+		]
+	});
+}
+/**
+* The modules of a QR code as one SVG.
+*
+* `viewBox` in module units with a one-module quiet zone — four is the specification's
+* recommendation and is drawn by the theme's padding instead, because a quiet zone baked
+* into the picture is whitespace a design system cannot remove.
+*
+* One `<rect>` per dark module rather than one path: a rect carries its own `fill`, so a
+* theme can address them, and the node count is bounded by the version (a version 1 code is
+* 23×23).
+*/
+function CodeDrawing({ value }) {
+	const { size, data } = encode(value);
+	const modules = [];
+	for (const [row, cells] of data.entries()) for (const [column, dark] of cells.entries()) {
+		if (!dark) continue;
+		modules.push(/* @__PURE__ */ jsx("rect", {
+			x: column,
+			y: row,
+			width: 1,
+			height: 1,
+			fill: "currentColor"
+		}, `${String(row)}.${String(column)}`));
+	}
+	return /* @__PURE__ */ jsx("svg", {
+		"data-formancy-part": "code-drawing",
+		viewBox: `0 0 ${String(size)} ${String(size)}`,
+		"aria-hidden": "true",
+		focusable: "false",
+		shapeRendering: "crispEdges",
+		children: modules
+	});
+}
+/** Every data path a layout places, in the order it places them. */
+function placedPaths(nodes, into = []) {
+	for (const node of nodes) if (node.kind === "field") into.push(node.path);
+	else placedPaths(layoutChildren(node), into);
+	return into;
+}
+//#endregion
+//#region src/rich-text.tsx
+/**
+* Showing a `richtext` answer.
+*
+* Every element here is created by React from a typed tree. The stored answer
+* never reaches `dangerouslySetInnerHTML`, and there is no sanitiser, because
+* there is nothing to sanitise: the parser in `@formancy/spec` has already
+* turned the characters somebody typed into `{ kind: 'text' }` nodes, and a
+* text node cannot be an element however it is spelled.
+*
+* That is the whole reason the grammar exists rather than storing HTML. A form
+* answer is written by anyone who can reach the form and read later by an
+* administrator, which is the exact shape of a stored cross-site scripting
+* bug ([0052](../../../docs/decisions/0052-richtext-is-not-html.md)).
+*
+* The Angular renderer builds the same tree into the same elements, from the
+* same parser, so the two cannot disagree about what an answer says.
+*/
+function RichText({ source }) {
+	const blocks = parseRichText(source);
+	if (blocks.length === 0) return null;
+	return /* @__PURE__ */ jsx("div", {
+		"data-formancy-part": "richtext",
+		children: blocks.map((block, index) => /* @__PURE__ */ jsx(Block, { block }, index))
+	});
+}
+function Block({ block }) {
+	if (block.kind === "paragraph") return /* @__PURE__ */ jsx("p", { children: /* @__PURE__ */ jsx(Inlines, { nodes: block.children }) });
+	const items = block.items.map((item, index) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Inlines, { nodes: item }) }, index));
+	return block.ordered ? /* @__PURE__ */ jsx("ol", { children: items }) : /* @__PURE__ */ jsx("ul", { children: items });
+}
+function Inlines({ nodes }) {
+	return /* @__PURE__ */ jsx(Fragment$1, { children: nodes.map((node, index) => /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(Inline, { node }) }, index)) });
+}
+function Inline({ node }) {
+	switch (node.kind) {
+		case "text": return /* @__PURE__ */ jsx(Fragment$1, { children: node.text });
+		case "strong": return /* @__PURE__ */ jsx("strong", { children: /* @__PURE__ */ jsx(Inlines, { nodes: node.children }) });
+		case "emphasis": return /* @__PURE__ */ jsx("em", { children: /* @__PURE__ */ jsx(Inlines, { nodes: node.children }) });
+		case "link": return /* @__PURE__ */ jsx("a", {
+			href: node.href,
+			rel: "noreferrer noopener nofollow ugc",
+			children: /* @__PURE__ */ jsx(Inlines, { nodes: node.children })
+		});
+	}
+}
+//#endregion
+//#region src/rich-text-editor.ts
+const RichTextEditorContext = createContext(void 0);
+const RichTextEditorProvider = RichTextEditorContext.Provider;
+/**
+* The host's editor factory, or undefined when there is none.
+*
+* Undefined is a supported state and the default one. Unlike the uploader — where
+* its absence makes a file field read-only, because there is nowhere to put the
+* bytes — its absence here costs nothing but the WYSIWYG surface: the answer is
+* still editable, still valid, and still the same grammar.
+*/
+function useRichTextEditorFactory() {
+	return useContext(RichTextEditorContext);
+}
+//#endregion
+//#region src/scanning.ts
+const ScannerContext = createContext(void 0);
+const ScannerProvider = ScannerContext.Provider;
+/**
+* The host's scanner, or undefined when there is none.
+*
+* Undefined is a supported state. A `scanner` widget with no scanner behind it renders
+* the ordinary text input and no button — typing was always the field's primary route,
+* so there is nothing to disable and a Scan button that opened nothing would be worse.
+*/
+function useScanner() {
+	return useContext(ScannerContext);
+}
+//#endregion
+//#region src/options-source.ts
+const OptionsSourcesContext = createContext(void 0);
+const OptionsSourcesProvider = OptionsSourcesContext.Provider;
+/**
+* The host's sources, or undefined when there are none.
+*
+* Undefined is a supported state and not a misconfiguration — a form with no sourced
+* field never needs one. What it costs, when a document DOES name a source, is the
+* whole field: it renders a message where the chooser would be, exactly as the file
+* field does without an uploader.
+*/
+function useOptionsSources() {
+	return useContext(OptionsSourcesContext);
+}
+//#endregion
+//#region src/use-sourced-options.ts
+const DEBOUNCE_MS = 250;
+const MIN_QUERY = 0;
+const MAX_ROWS = 50;
+function useSourcedOptions(field, query, enabled = true) {
+	const engine = useFormEngine();
+	const sources = useOptionsSources();
+	const name = field.def.optionsSource;
+	const source = name === void 0 ? void 0 : sources?.[name];
+	const [rows, setRows] = useState([]);
+	const [named, setNamed] = useState(/* @__PURE__ */ new Map());
+	const [busy, setBusy] = useState(false);
+	const [failed, setFailed] = useState(false);
+	const [capped, setCapped] = useState(null);
+	const debounceMs = source?.debounceMs ?? DEBOUNCE_MS;
+	const minQueryLength = source?.minQueryLength ?? MIN_QUERY;
+	const maxRows = source?.maxRows ?? MAX_ROWS;
+	const stored = typeof field.value === "string" && field.value !== "" ? field.value : void 0;
+	const path = field.path;
+	const asked = useRef(0);
+	useEffect(() => {
+		if (!enabled || source === void 0) return;
+		const generation = asked.current += 1;
+		if (query.trim().length < minQueryLength) {
+			setRows([]);
+			setCapped(null);
+			setBusy(false);
+			return;
+		}
+		const controller = new AbortController();
+		const timer = setTimeout(() => {
+			setBusy(true);
+			setFailed(false);
+			source.resolve({
+				kind: "search",
+				source: name ?? "",
+				path,
+				query,
+				values: [],
+				locale: engine.locale(),
+				limit: maxRows,
+				signal: controller.signal
+			}).then((answer) => {
+				if (generation !== asked.current) return;
+				const accepted = acceptRemoteOptions(answer);
+				if (accepted === void 0) {
+					setFailed(true);
+					setRows([]);
+					setCapped(null);
+					return;
+				}
+				const { shown, total, capped: wasCapped } = capRemoteOptions(accepted, maxRows);
+				setRows(shown);
+				setCapped(wasCapped ? {
+					shown: shown.length,
+					total
+				} : null);
+			}).catch(() => {
+				if (generation !== asked.current) return;
+				setFailed(true);
+				setRows([]);
+			}).finally(() => {
+				if (generation === asked.current) setBusy(false);
+			});
+		}, debounceMs);
+		return () => {
+			clearTimeout(timer);
+			controller.abort();
+		};
+	}, [
+		enabled,
+		source,
+		name,
+		path,
+		query,
+		minQueryLength,
+		maxRows,
+		debounceMs,
+		engine
+	]);
+	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);
+		const controller = new AbortController();
+		source.resolve({
+			kind: "labels",
+			source: name ?? "",
+			path,
+			query: "",
+			values: [stored],
+			locale: engine.locale(),
+			limit: 1,
+			signal: controller.signal
+		}).then((answer) => {
+			const accepted = acceptRemoteOptions(answer);
+			if (accepted === void 0) return;
+			setNamed((was) => {
+				const next = new Map(was);
+				for (const row of accepted) next.set(row.value, row.label);
+				return next;
+			});
+		}).catch(() => void 0);
+		return () => controller.abort();
+	}, [
+		enabled,
+		source,
+		name,
+		path,
+		stored,
+		named,
+		engine
+	]);
+	if (name === void 0) return {
+		options: (field.def.options ?? []).map((option) => ({
+			value: option.value,
+			label: engine.text(option.label) ?? option.value
+		})),
+		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,
+		remote: {
+			unavailable: source === void 0,
+			busy,
+			needs: minQueryLength,
+			status: statusFor({
+				failed,
+				busy,
+				needs: minQueryLength,
+				query,
+				capped
+			})
+		}
+	};
+}
+/**
+* The one thing the field says out loud, and never more than one.
+*
+* Success announces nothing: the listbox and `aria-activedescendant` are the
+* feedback, and a region that spoke on every successful keystroke would talk over
+* them. A failure is a sentence somebody can act on rather than a code.
+*/
+function statusFor({ failed, busy, needs, query, capped }) {
+	if (failed) return "The options could not be loaded. Type to try again.";
+	if (query.trim().length < needs) return `Type at least ${String(needs)} characters to search.`;
+	if (busy) return "Searching…";
+	if (capped !== null) return `Showing the first ${String(capped.shown)} of ${String(capped.total)} — keep typing to narrow.`;
+	return "";
+}
+//#endregion
+//#region src/uploads.ts
+const UploaderContext = createContext(void 0);
+const UploaderProvider = UploaderContext.Provider;
+/**
+* The host's uploader, or undefined when there is none.
+*
+* Undefined is a supported state, not a misconfiguration: a form with no file
+* fields needs no uploader, and a file field without one renders read-only and
+* says why. The alternative — throwing — would turn a form that mostly works
+* into a blank page.
+*/
+function useUploader() {
+	return useContext(UploaderContext);
+}
+//#endregion
 //#region src/form.tsx
 /**
 * Renders the whole form from the engine: one slot per field, resolved through
@@ -176,14 +710,14 @@ function SubmitButton({ submitLabel, onSubmit, onFailedNavigate }) {
 	});
 }
 function FlatForm(props) {
-	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(FieldList, { ...props }), /* @__PURE__ */ jsx(SubmitButton, { ...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, { children: [
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
 		/* @__PURE__ */ jsx("nav", {
 			"data-formancy-part": "stepper",
 			"aria-label": "Progress",
@@ -213,12 +747,34 @@ function PagedForm(props) {
 		})
 	] });
 }
-function FieldList({ labels, registry, 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, { children: [staticWires.filter(inPage).map((wire) => /* @__PURE__ */ jsx(FieldSlot, {
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [staticWires.filter(inPage).map((wire) => /* @__PURE__ */ jsx(FieldSlot, {
 		path: wire,
 		fallbackLabel: labels?.[wire],
 		registry
@@ -250,6 +806,106 @@ function RepeaterSection({ wire, labels, registry }) {
 		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: [
@@ -257,18 +913,19 @@ function RepeaterSection({ wire, labels, registry }) {
 				"data-formancy-part": "repeater-legend",
 				children: label
 			}),
-			repeater.rowIds.map((rowId, index) => /* @__PURE__ */ jsxs("div", {
-				"data-formancy-part": "row",
-				children: [engine.fieldPaths().filter((candidate) => candidate.startsWith(`${wire}[${index}]`)).map((instanceWire) => /* @__PURE__ */ jsx(FieldSlot, {
-					path: instanceWire,
-					fallbackLabel: fallbackFor(instanceWire),
-					registry
-				}, instanceWire)), /* @__PURE__ */ jsx("button", {
-					type: "button",
-					onClick: () => repeater.removeRow(index),
-					children: `${removeLabel} ${index + 1} of ${repeater.rowCount}`
-				})]
-			}, rowId)),
+			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(),
@@ -279,9 +936,10 @@ function RepeaterSection({ wire, labels, registry }) {
 }
 /** Shared unstyled shell: real label, control, error text as the describedby
 *  target. Zero CSS; `data-formancy-part` is the styling hook. */
-function FieldShell({ field, label, children }) {
+function FieldShell({ path, field, label, children }) {
 	return /* @__PURE__ */ jsxs("div", {
 		"data-formancy-part": "field",
+		"data-formancy-field-path": path,
 		"data-state": field.touched && field.errors.length > 0 ? "invalid" : "valid",
 		children: [
 			/* @__PURE__ */ jsx("label", {
@@ -298,23 +956,86 @@ function FieldShell({ field, label, children }) {
 		]
 	});
 }
+/**
+* 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);
-	return /* @__PURE__ */ jsx(FieldShell, {
+	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", {
+		children: [/* @__PURE__ */ jsx("input", {
 			type: "text",
 			...field.controlProps,
 			value: typeof field.value === "string" ? field.value : "",
-			onChange: (event) => field.setValue(event.target.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", {
@@ -328,6 +1049,7 @@ function TextareaField({ path, label }) {
 function NumberField({ path, label }) {
 	const field = useField(path);
 	return /* @__PURE__ */ jsx(FieldShell, {
+		path,
 		field,
 		label,
 		children: /* @__PURE__ */ jsx("input", {
@@ -342,11 +1064,13 @@ function NumberField({ path, label }) {
 function CheckboxField({ path, label }) {
 	const field = useField(path);
 	return /* @__PURE__ */ jsx(FieldShell, {
+		path,
 		field,
 		label,
 		children: /* @__PURE__ */ jsx("input", {
 			type: "checkbox",
 			...field.controlProps,
+			...field.def.widget === "toggle" ? { "data-formancy-part": "toggle" } : {},
 			checked: field.value === true,
 			onChange: (event) => field.setValue(event.target.checked),
 			onBlur: () => field.touch()
@@ -356,6 +1080,7 @@ function CheckboxField({ path, label }) {
 function DateField({ path, label }) {
 	const field = useField(path);
 	return /* @__PURE__ */ jsx(FieldShell, {
+		path,
 		field,
 		label,
 		children: /* @__PURE__ */ jsx("input", {
@@ -368,6 +1093,88 @@ function DateField({ path, label }) {
 	});
 }
 /**
+* 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.
@@ -381,11 +1188,30 @@ function useResolvedOptions(field) {
 }
 function SelectField({ path, label }) {
 	const field = useField(path);
-	const options = useResolvedOptions(field);
-	return /* @__PURE__ */ jsx(FieldShell, {
+	const sourced = useSourcedOptions({
+		...field,
+		path
+	}, "", field.def.widget !== "typeahead");
+	const options = sourced.options;
+	if (sourced.remote?.unavailable === true) return /* @__PURE__ */ jsx(FieldShell, {
+		path,
 		field,
 		label,
-		children: /* @__PURE__ */ jsxs("select", {
+		children: /* @__PURE__ */ jsx("p", {
+			"data-formancy-part": "options-unavailable",
+			children: `This field's answers come from "${field.def.optionsSource ?? ""}", which this application has not provided.`
+		})
+	});
+	if (field.def.widget === "typeahead") return /* @__PURE__ */ jsx(TypeaheadSelectField, {
+		path,
+		label,
+		field
+	});
+	return /* @__PURE__ */ jsxs(FieldShell, {
+		path,
+		field,
+		label,
+		children: [/* @__PURE__ */ jsxs("select", {
 			...field.controlProps,
 			value: typeof field.value === "string" ? field.value : "",
 			onChange: (event) => field.setValue(event.target.value === "" ? null : event.target.value),
@@ -394,7 +1220,225 @@ function SelectField({ path, label }) {
 				value: option.value,
 				children: option.label
 			}, option.value))]
-		})
+		}), sourced.remote === null ? null : /* @__PURE__ */ jsx("p", {
+			role: "status",
+			"data-formancy-part": "select-status",
+			children: sourced.remote.status
+		})]
+	});
+}
+/**
+* `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.
+*
+* `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.
+*/
+/**
+* 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;
+}
+function TypeaheadSelectField({ path, label, field }) {
+	/**
+	* What is in the box while somebody types, or null when the box is simply
+	* showing the answer.
+	*
+	* 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 [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);
+		}
+		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);
+				},
+				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" : ""
+		})]
+	});
+}
+/** 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}`;
+}
+/**
+* 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"
 	});
 }
 function RadioGroupField({ path, label }) {
@@ -403,6 +1447,7 @@ function RadioGroupField({ path, label }) {
 	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: [
@@ -410,6 +1455,7 @@ function RadioGroupField({ path, label }) {
 				"data-formancy-part": "label",
 				children: label
 			}),
+			/* @__PURE__ */ jsx(RequiredHint, { field }),
 			options.map((option) => {
 				const optionId = `${field.ids.control}:${option.value}`;
 				return /* @__PURE__ */ jsxs("span", {
@@ -437,9 +1483,447 @@ function RadioGroupField({ path, label }) {
 	});
 }
 /**
+* 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.
+*/
+/**
+* The rich text toolbar.
+*
+* A row of buttons over a textarea, not a contenteditable surface. That is the
+* deliberate choice — see `@formancy/spec`'s `richtext-edit` for why — and
+* it is what makes this editor cheap to make correct: the control is a plain
+* `<textarea>` that every assistive technology already knows, and the buttons
+* are ordinary buttons that do string arithmetic.
+*
+* The ARIA toolbar pattern, which means ONE tab stop for the whole row and
+* arrow keys within it. Five buttons that each take a tab press would put five
+* stops between a keyboard user and the box they came to type in.
+*/
+function RichTextToolbar({ disabled, label, onCommand }) {
+	const buttons = useRef([]);
+	const [active, setActive] = useState(0);
+	const commands = [
+		{
+			command: "strong",
+			name: "Bold",
+			glyph: "B"
+		},
+		{
+			command: "emphasis",
+			name: "Italic",
+			glyph: "I"
+		},
+		{
+			command: "link",
+			name: "Link",
+			glyph: "↗"
+		},
+		{
+			command: "bulletList",
+			name: "Bulleted list",
+			glyph: "•"
+		},
+		{
+			command: "orderedList",
+			name: "Numbered list",
+			glyph: "1."
+		}
+	];
+	const move = (to) => {
+		const index = (to + commands.length) % commands.length;
+		setActive(index);
+		buttons.current[index]?.focus();
+	};
+	return /* @__PURE__ */ jsx("div", {
+		role: "toolbar",
+		"aria-label": typeof label === "string" ? `Formatting for ${label}` : "Formatting",
+		"data-formancy-part": "richtext-toolbar",
+		onKeyDown: (event) => {
+			if (event.key === "ArrowRight") {
+				event.preventDefault();
+				move(active + 1);
+			} else if (event.key === "ArrowLeft") {
+				event.preventDefault();
+				move(active - 1);
+			} else if (event.key === "Home") {
+				event.preventDefault();
+				move(0);
+			} else if (event.key === "End") {
+				event.preventDefault();
+				move(commands.length - 1);
+			}
+		},
+		children: commands.map((entry, index) => /* @__PURE__ */ jsxs("button", {
+			ref: (element) => {
+				buttons.current[index] = element;
+			},
+			type: "button",
+			disabled,
+			tabIndex: index === active ? 0 : -1,
+			"data-formancy-part": "richtext-button",
+			onFocus: () => setActive(index),
+			onClick: () => {
+				if (entry.command === "link") {
+					const href = window.prompt("Address for the link");
+					if (href === null || href === "") return;
+					onCommand("link", href);
+					return;
+				}
+				onCommand(entry.command);
+			},
+			children: [/* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				children: entry.glyph
+			}), /* @__PURE__ */ jsx("span", {
+				"data-formancy-part": "visually-hidden",
+				children: entry.name
+			})]
+		}, entry.command))
+	});
+}
+/**
+* The host's editor, mounted over the same value the textarea would have edited.
+*
+* Mounted once and fed afterwards, rather than re-created when the value
+* changes: a contenteditable rebuilt on every keystroke loses the caret, the
+* selection and the undo stack, which is the difference between an editor and a
+* box that fights you.
+*
+* What crosses the boundary is the stored grammar in both directions, never
+* markup ([0061](../../../docs/decisions/0061-tiptap-over-the-closed-grammar.md)).
+*/
+function MountedRichText({ field, value, make, onReady }) {
+	const host = useRef(null);
+	const handle = useRef(void 0);
+	const opening = useRef(value);
+	const commit = useRef(field.setValue);
+	commit.current = field.setValue;
+	useEffect(() => {
+		const element = host.current;
+		if (element === null) return void 0;
+		const editor = make({
+			element,
+			value: opening.current,
+			onChange: (next) => commit.current(next),
+			editable: field.disabled !== true,
+			attributes: {
+				...field.controlProps["aria-describedby"] === void 0 ? {} : { "aria-describedby": field.controlProps["aria-describedby"] },
+				...field.controlProps["aria-invalid"] === void 0 ? {} : { "aria-invalid": "true" },
+				...field.controlProps["aria-required"] === void 0 ? {} : { "aria-required": "true" },
+				"aria-labelledby": field.labelProps.id,
+				id: field.controlProps.id,
+				"data-formancy-part": "richtext-surface"
+			}
+		});
+		handle.current = editor;
+		onReady(editor);
+		return () => {
+			editor.destroy();
+			handle.current = void 0;
+			onReady(void 0);
+		};
+	}, [make]);
+	useEffect(() => {
+		const editor = handle.current;
+		if (editor === void 0) return;
+		if (editor.value() === value) return;
+		if (host.current?.contains(document.activeElement) === true) return;
+		editor.setValue(value);
+	}, [value]);
+	return /* @__PURE__ */ jsx("div", {
+		"data-formancy-part": "richtext-editor",
+		ref: host,
+		onBlur: () => field.touch()
+	});
+}
+function RichTextField({ path, label }) {
+	const field = useField(path);
+	const value = typeof field.value === "string" ? field.value : "";
+	const box = useRef(null);
+	const make = useRichTextEditorFactory();
+	const [editor, setEditor] = useState(void 0);
+	/**
+	* Run a toolbar command against the live selection and put the caret back.
+	*
+	* The selection is restored in an effect-free way {@link queueMicrotask}
+	* would not guarantee: React has to have written the new value first, so
+	* the box is updated on the next frame rather than immediately. An editor
+	* that drops the caret to the end after every button is one nobody can use
+	* for a second word.
+	*/
+	const run = (command, href) => {
+		const element = box.current;
+		if (element === null) return;
+		const next = applyRichCommand(command, {
+			value,
+			start: element.selectionStart,
+			end: element.selectionEnd
+		}, href === void 0 ? {} : { href });
+		field.setValue(next.value);
+		requestAnimationFrame(() => {
+			element.focus();
+			element.setSelectionRange(next.start, next.end);
+		});
+	};
+	if (make !== void 0) return /* @__PURE__ */ jsxs(FieldShell, {
+		path,
+		field,
+		label,
+		children: [/* @__PURE__ */ jsx(RichTextToolbar, {
+			disabled: field.disabled,
+			label,
+			onCommand: (command, href) => editor?.run(command, href)
+		}), /* @__PURE__ */ jsx(MountedRichText, {
+			field,
+			value,
+			make,
+			onReady: setEditor
+		})]
+	});
+	return /* @__PURE__ */ jsxs(FieldShell, {
+		path,
+		field,
+		label,
+		children: [
+			/* @__PURE__ */ jsx(RichTextToolbar, {
+				disabled: field.disabled,
+				label,
+				onCommand: run
+			}),
+			/* @__PURE__ */ jsx("textarea", {
+				...field.controlProps,
+				ref: box,
+				rows: 5,
+				value,
+				onKeyDown: (event) => {
+					if (!(event.ctrlKey || event.metaKey)) return;
+					const command = event.key.toLowerCase() === "b" ? "strong" : event.key.toLowerCase() === "i" ? "emphasis" : void 0;
+					if (command === void 0) return;
+					event.preventDefault();
+					run(command);
+				},
+				onChange: (event) => field.setValue(event.target.value),
+				onBlur: () => field.touch()
+			}),
+			/* @__PURE__ */ jsx("div", {
+				"data-formancy-part": "richtext-preview",
+				"aria-live": "off",
+				children: /* @__PURE__ */ jsx(RichText, { source: value })
+			})
+		]
+	});
+}
+/**
+* Attached files.
+*
+* 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 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);
+	/**
+	* 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();
+	};
+	return /* @__PURE__ */ jsxs(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", {
+					...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 ?? ""
+			})
+		]
+	});
+}
+/**
 * The built-in unstyled components. `null` means the type renders nothing here:
-* hidden and static are non-inputs, and the container types are laid out by
-* their own machinery, not by a leaf slot.
+* a hidden field is carried in the submission and never shown, and the
+* container types are laid out by their own machinery rather than by a leaf
+* slot.
 */
 const DEFAULT_COMPONENTS = {
 	text: TextField,
@@ -447,10 +1931,15 @@ const DEFAULT_COMPONENTS = {
 	number: NumberField,
 	checkbox: CheckboxField,
 	date: DateField,
+	time: TimeField,
+	datetime: DateTimeField,
 	select: SelectField,
 	radio: RadioGroupField,
+	selectboxes: SelectBoxesField,
+	file: FileField,
+	richtext: RichTextField,
 	hidden: null,
-	static: null,
+	static: StaticField,
 	group: null,
 	page: null,
 	repeater: null
@@ -492,7 +1981,7 @@ function ErrorSummary({ labels }) {
 				href: `#${controlId}`,
 				onClick: (event) => {
 					event.preventDefault();
-					document.getElementById(controlId)?.focus();
+					focusControl(document.getElementById(controlId));
 				},
 				children: `${labelFor(path)}: ${codes.join(", ")}`
 			}) }, path);
@@ -500,6 +1989,35 @@ function ErrorSummary({ labels }) {
 	});
 }
 //#endregion
-export { ErrorSummary, FormancyForm, FormancyProvider, useField, useFormEngine, useRepeater, useSubmit, useWizard };
+//#region src/resume-notice.tsx
+function ResumeNotice({ migration, labels }) {
+	const region = useRef(null);
+	useEffect(() => {
+		if (migration !== void 0) region.current?.focus();
+	}, [migration]);
+	if (migration === void 0) return null;
+	const setAside = migration.changes.map((change) => change.path).filter((path) => path !== void 0);
+	return /* @__PURE__ */ jsxs("div", {
+		role: "region",
+		"aria-label": "This form changed while you were away",
+		"data-formancy-part": "resume-notice",
+		"data-state": migration.severity,
+		tabIndex: -1,
+		ref: region,
+		children: [/* @__PURE__ */ jsx("h2", {
+			"data-formancy-part": "resume-notice-heading",
+			children: "This form changed while you were away"
+		}), migration.severity === "breaking" ? /* @__PURE__ */ jsxs("p", { children: [
+			"It changed too much for your answers to be moved across, so this is being shown as you left it and ",
+			/* @__PURE__ */ jsx("strong", { children: "cannot be submitted" }),
+			". Starting again will give you the current form."
+		] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("p", { children: setAside.length === 1 ? "One question is no longer on this form. Your answer to it is still kept with the rest and will be sent with them — it is just not shown here any more." : `${String(setAside.length)} questions are no longer on this form. Your answers to them are still kept with the rest and will be sent with them — they are just not shown here any more.` }), setAside.length === 0 ? null : /* @__PURE__ */ jsx("ul", {
+			"data-formancy-part": "resume-notice-list",
+			children: setAside.map((path) => /* @__PURE__ */ jsx("li", { children: labels?.[path] ?? path }, path))
+		})] })]
+	});
+}
+//#endregion
+export { ErrorSummary, FormancyForm, FormancyProvider, OptionsSourcesProvider, ResumeNotice, RichText, RichTextEditorProvider, ScannerProvider, UploaderProvider, useField, useFormEngine, useOptionsSources, useRepeater, useRichTextEditorFactory, useScanner, useSubmit, useUploader, useWizard };
 
 //# sourceMappingURL=index.mjs.map