@formancy/react 0.3.0 → 0.5.0

package/dist/index.mjs

@@ -1,7 +1,8 @@
-import { Fragment, createContext, useCallback, useContext, useEffect, useId, useMemo, useRef, useState, useSyncExternalStore } from "react";
+import { Fragment, createContext, useCallback, useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
+import { cancelUploads, fieldUploads, formatPath, parsePath, placedGroup, placedPage, thumbnailSize } from "@formancy/core";
+import { createFormText } from "@formancy/core/words";
+import { LAYOUT_LEAF_KINDS, acceptRemoteOptions, answerFromText, applyRichCommand, capRemoteOptions, datagridColumns, editMasked, formatMasked, isImageSource, layoutChildren, layoutNodeShows, maskIsNumeric, maskPlaceholder, narrowOptionsByLabel, parseRichText, resolveText, resolvedLocale } from "@formancy/spec";
 import { 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
@@ -12,10 +13,23 @@ import { encode } from "uqr";
 * use prop getters.
 */
 const FormancyContext = createContext(null);
-function FormancyProvider({ engine, children }) {
+/**
+* The form's own words, in the language its questions are read in (0171). Beside the engine
+* rather than on it, because the engine has no buttons — the server runs the same one.
+*/
+const FormancyTextContext = createContext(null);
+function FormancyProvider({ engine, words, children }) {
+	useEffect(() => () => cancelUploads(engine), [engine]);
+	const text = useMemo(() => createFormText({
+		locale: resolvedLocale(engine.schema(), engine.locale()),
+		...words === void 0 ? {} : { words }
+	}), [engine, words]);
 	return /* @__PURE__ */ jsx(FormancyContext.Provider, {
 		value: engine,
-		children
+		children: /* @__PURE__ */ jsx(FormancyTextContext.Provider, {
+			value: text,
+			children
+		})
 	});
 }
 function useFormEngine() {
@@ -23,6 +37,21 @@ function useFormEngine() {
 	if (!engine) throw new Error("formancy hooks need a <FormancyProvider engine={...}> above them in the tree");
 	return engine;
 }
+let english;
+/**
+* The form's words, in the language the reader chose for it.
+*
+* English outside a `FormancyProvider`, which has no engine to take a language from — a
+* resume notice a host draws beside the form rather than inside its provider. Never the
+* browser's language: the form's is the one the reader chose, and the browser's is the
+* one their machine came with.
+*/
+function useFormText() {
+	const text = useContext(FormancyTextContext);
+	if (text !== null) return text;
+	english ??= createFormText({ locale: "" });
+	return english;
+}
 //#endregion
 //#region src/use-field.ts
 /**
@@ -124,6 +153,7 @@ function focusControl(control) {
 	if (control === null) return;
 	control.dispatchEvent(new Event("formancy-reveal", { bubbles: true }));
 	control.focus();
+	if (document.activeElement !== control) control.querySelector("input, select, textarea, button")?.focus();
 }
 //#endregion
 //#region src/use-submit.ts
@@ -153,14 +183,16 @@ function useSubmit() {
 }
 //#endregion
 //#region src/layout.tsx
-function LayoutTree({ schema, nodes, locale, renderField, at = [] }) {
+function LayoutTree({ schema, nodes, locale, renderField, at = [], shows }) {
 	return /* @__PURE__ */ jsx(Fragment$1, { children: nodes.map((node, index) => {
+		if (shows !== void 0 && !layoutNodeShows(node, shows)) return null;
 		const view = /* @__PURE__ */ jsx(LayoutNodeView, {
 			schema,
 			node,
 			locale,
 			renderField,
-			at: [...at, index]
+			at: [...at, index],
+			shows
 		}, index);
 		if (node.span === void 0) return view;
 		return /* @__PURE__ */ jsx("div", {
@@ -171,7 +203,7 @@ function LayoutTree({ schema, nodes, locale, renderField, at = [] }) {
 		}, index);
 	}) });
 }
-function LayoutNodeView({ schema, node, locale, renderField, at }) {
+function LayoutNodeView({ schema, node, locale, renderField, at, shows }) {
 	const headingId = useId();
 	if (node.kind === "field") return renderField(node.path);
 	if (node.kind === "qrcode") return /* @__PURE__ */ jsx(CodeNode, {
@@ -186,7 +218,8 @@ function LayoutNodeView({ schema, node, locale, renderField, at }) {
 		nodes: layoutChildren(node),
 		locale,
 		renderField,
-		at
+		at,
+		shows
 	});
 	if (node.kind === "row") return /* @__PURE__ */ jsx("div", {
 		"data-formancy-part": "layout-row",
@@ -205,7 +238,8 @@ function LayoutNodeView({ schema, node, locale, renderField, at }) {
 		locale,
 		renderField,
 		at,
-		here
+		here,
+		shows
 	});
 	if (node.kind === "table") return /* @__PURE__ */ jsxs("div", {
 		"data-formancy-part": "layout-table",
@@ -259,15 +293,21 @@ function LayoutNodeView({ schema, node, locale, renderField, at }) {
 * 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 }) {
+function Tabs({ schema, node, locale, renderField, at, here, shows }) {
 	const base = useId();
-	const [open, setOpen] = useState(0);
+	const text = useFormText();
+	const shown = node.children.flatMap((child, index) => shows === void 0 || layoutNodeShows(child, shows) ? [{
+		child,
+		index
+	}] : []);
+	const [chosen, setOpen] = useState(0);
+	const open = Math.min(chosen, shown.length - 1);
 	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));
+	const names = shown.map(({ child }) => child.kind === "field" ? void 0 : resolveText(schema, child.label, locale));
 	useEffect(() => {
 		if (!moveFocus.current) return;
 		moveFocus.current = false;
@@ -283,9 +323,9 @@ function Tabs({ schema, node, locale, renderField, at, here }) {
 		return () => {
 			for (const off of listeners) off?.();
 		};
-	}, [node.children.length]);
+	}, [shown.length]);
 	const onKeyDown = (event) => {
-		const last = node.children.length - 1;
+		const last = shown.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();
@@ -302,7 +342,7 @@ function Tabs({ schema, node, locale, renderField, at, here }) {
 			...stripName === void 0 ? {} : { "aria-label": stripName },
 			"data-formancy-part": "tablist",
 			onKeyDown,
-			children: node.children.map((child, index) => /* @__PURE__ */ jsx("button", {
+			children: shown.map(({ index: position }, index) => /* @__PURE__ */ jsx("button", {
 				ref: (element) => {
 					tabs.current[index] = element;
 				},
@@ -314,9 +354,9 @@ function Tabs({ schema, node, locale, renderField, at, here }) {
 				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", {
+				children: names[index] ?? text("tabs.unnamed", { position: index + 1 })
+			}, position))
+		}), shown.map(({ child, index: position }, index) => /* @__PURE__ */ jsx("div", {
 			ref: (element) => {
 				panels.current[index] = element;
 			},
@@ -330,9 +370,10 @@ function Tabs({ schema, node, locale, renderField, at, here }) {
 				nodes: LAYOUT_LEAF_KINDS.has(child.kind) ? [child] : layoutChildren(child),
 				locale,
 				renderField,
-				at: [...at, index]
+				at: [...at, position],
+				shows
 			})
-		}, index))]
+		}, position))]
 	});
 }
 /**
@@ -508,6 +549,7 @@ const MIN_QUERY = 0;
 const MAX_ROWS = 50;
 function useSourcedOptions(field, query, enabled = true) {
 	const engine = useFormEngine();
+	const text = useFormText();
 	const sources = useOptionsSources();
 	const name = field.def.optionsSource;
 	const source = name === void 0 ? void 0 : sources?.[name];
@@ -633,8 +675,9 @@ function useSourcedOptions(field, query, enabled = true) {
 		remote: {
 			unavailable: source === void 0,
 			busy,
+			failed,
 			needs: minQueryLength,
-			status: statusFor({
+			status: statusFor(text, {
 				failed,
 				busy,
 				needs: minQueryLength,
@@ -651,11 +694,14 @@ function useSourcedOptions(field, query, enabled = true) {
 * 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.`;
+function statusFor(text, { failed, busy, needs, query, capped }) {
+	if (failed) return text("options.failed");
+	if (query.trim().length < needs) return text("options.tooShort", { count: needs });
+	if (busy) return text("options.searching");
+	if (capped !== null) return text("options.capped", {
+		shown: capped.shown,
+		total: capped.total
+	});
 	return "";
 }
 //#endregion
@@ -741,7 +787,7 @@ function FieldShell({ path, field, label, children }) {
 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.failed) return "failed";
 	if (sourced.remote.status !== "") return "hint";
 	return open && matches === 0 ? "empty" : void 0;
 }
@@ -757,11 +803,12 @@ function statusState({ sourced, open, matches }) {
 * a red asterisk is a requirement some people cannot perceive.
 */
 function RequiredHint({ field }) {
+	const text = useFormText();
 	if (!field.required) return null;
 	return /* @__PURE__ */ jsx("span", {
 		"data-formancy-part": "required-hint",
 		id: field.props.hint.id,
-		children: "required"
+		children: text("form.required")
 	});
 }
 /** One option's element id, in the shape the radio group already uses, so a
@@ -772,15 +819,35 @@ function optionDomId(field, 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.
+* rather than blank. A picture from somewhere the format does not allow is left
+* out, by the same test the Angular binding makes (0126).
 */
 function useResolvedOptions(field) {
 	const engine = useFormEngine();
 	return (field.def.options ?? []).map((option) => ({
 		value: option.value,
-		label: engine.text(option.label) ?? option.value
+		label: engine.text(option.label) ?? option.value,
+		...option.image !== void 0 && isImageSource(option.image.src) ? { image: {
+			src: option.image.src,
+			alt: engine.text(option.image.alt) ?? ""
+		} } : {}
 	}));
 }
+/**
+* An option's picture, inside its label so that pressing it chooses the option and
+* its text alternative joins the option's name. Lazy, because a long list of
+* pictured options is a page of images the person may never scroll to.
+*/
+function OptionPicture({ option }) {
+	if (option.image === void 0) return null;
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("img", {
+		"data-formancy-part": "option-image",
+		src: option.image.src,
+		alt: option.image.alt,
+		loading: "lazy",
+		decoding: "async"
+	}), " "] });
+}
 //#endregion
 //#region src/fields/typeahead-field.tsx
 /**
@@ -790,6 +857,7 @@ function useResolvedOptions(field) {
 * These were one 2,154-line file — the largest in the repository.
 */
 function TypeaheadSelectField({ path, label, field }) {
+	const text = useFormText();
 	/**
 	* What is in the box while somebody types, or null when the box is simply
 	* showing the answer.
@@ -901,7 +969,7 @@ function TypeaheadSelectField({ path, label, field }) {
 			}), /* @__PURE__ */ jsx("ul", {
 				id: listboxId,
 				role: "listbox",
-				"aria-label": `${label} suggestions`,
+				"aria-label": text("options.suggestions", { label }),
 				"data-formancy-part": "typeahead-listbox",
 				hidden: !expanded,
 				children: matches.map((option) => /* @__PURE__ */ jsx("li", {
@@ -927,7 +995,7 @@ function TypeaheadSelectField({ path, label, field }) {
 				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" : ""
+			children: sourced.remote !== null && sourced.remote.status !== "" ? sourced.remote.status : open && matches.length === 0 && sourced.remote?.busy !== true ? text("options.noMatch") : ""
 		})]
 	});
 }
@@ -957,6 +1025,7 @@ function CheckboxField({ path, label }) {
 }
 function SelectField({ path, label }) {
 	const field = useField(path);
+	const text = useFormText();
 	const sourced = useSourcedOptions({
 		...field,
 		path
@@ -968,7 +1037,7 @@ function SelectField({ path, label }) {
 		label,
 		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.`
+			children: text("options.unavailable", { source: field.def.optionsSource ?? "" })
 		})
 	});
 	if (field.def.widget === "typeahead") return /* @__PURE__ */ jsx(TypeaheadSelectField, {
@@ -1023,9 +1092,9 @@ function RadioGroupField({ path, label }) {
 						checked: field.value === option.value,
 						onChange: () => field.setValue(option.value),
 						onBlur: () => field.touch()
-					}), /* @__PURE__ */ jsx("label", {
+					}), /* @__PURE__ */ jsxs("label", {
 						htmlFor: optionId,
-						children: option.label
+						children: [/* @__PURE__ */ jsx(OptionPicture, { option }), option.label]
 					})]
 				}, option.value);
 			}),
@@ -1055,13 +1124,20 @@ function RadioGroupField({ path, label }) {
 *
 * Without an uploader the field is read-only and says so, rather than
 * pretending to accept a file it has nowhere to put.
+*
+* **Each file is its own upload** — waiting, sending with how far it has got,
+* cancellable, and refused with a reason and a way to try again. What happens to
+* each is `@formancy/core`'s upload queue, read by both renderers
+* ([0130](../../../../docs/decisions/0130-each-file-is-its-own-upload.md)); this
+* draws it.
 */
 function FileField({ path, label }) {
 	const field = useField(path);
+	const text = useFormText();
 	const upload = useUploader();
+	const queue = useUploadQueue(path, upload);
+	const pending = useSyncExternalStore(queue.subscribe, queue.pending, queue.pending);
 	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.
@@ -1073,21 +1149,9 @@ function FileField({ path, label }) {
 	const [removed, setRemoved] = useState([]);
 	const accept = field.def.accept;
 	const multiple = field.def.maxItems === void 0 || field.def.maxItems > 1;
-	const onPick = async (picked) => {
+	const onPick = (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();
+		queue.add(Array.from(picked));
 	};
 	return /* @__PURE__ */ jsxs(FieldShell, {
 		path,
@@ -1096,20 +1160,20 @@ function FileField({ path, 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."
+				children: text("file.unavailable")
 			}) : /* @__PURE__ */ jsx("div", {
 				"data-formancy-part": "file-dropzone",
 				...over ? { "data-state": "over" } : {},
 				onDragOver: (event) => {
 					event.preventDefault();
-					if (field.disabled || busy) return;
+					if (field.disabled) return;
 					setOver(true);
 				},
 				onDragLeave: () => setOver(false),
 				onDrop: (event) => {
 					event.preventDefault();
 					setOver(false);
-					if (field.disabled || busy) return;
+					if (field.disabled) return;
 					onPick(event.dataTransfer.files);
 				},
 				children: /* @__PURE__ */ jsx("input", {
@@ -1117,53 +1181,224 @@ function FileField({ path, label }) {
 					type: "file",
 					multiple,
 					...accept === void 0 ? {} : { accept: accept.join(",") },
-					disabled: field.disabled || busy,
+					disabled: field.disabled,
 					onChange: (event) => {
 						onPick(event.target.files);
 						event.target.value = "";
 					}
 				})
 			}),
-			files.length === 0 && removed.length === 0 ? null : /* @__PURE__ */ jsxs("ul", {
+			files.length === 0 && pending.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",
+				children: [
+					files.map((file, index) => /* @__PURE__ */ jsxs("li", {
+						"data-formancy-part": "file-item",
+						children: [
+							/* @__PURE__ */ jsx(FileThumbnail, { source: queue.sourceOf(file.id) }),
+							/* @__PURE__ */ jsx("span", {
+								"data-formancy-part": "file-name",
+								children: file.name
+							}),
+							index > 0 ? /* @__PURE__ */ jsx("button", {
+								type: "button",
+								"data-formancy-part": "file-up",
+								disabled: field.disabled,
+								onClick: () => field.setValue(moved(files, index, index - 1)),
+								children: text("file.up", {
+									name: file.name,
+									position: index + 1,
+									count: files.length
+								})
+							}) : null,
+							index < files.length - 1 ? /* @__PURE__ */ jsx("button", {
+								type: "button",
+								"data-formancy-part": "file-down",
+								disabled: field.disabled,
+								onClick: () => field.setValue(moved(files, index, index + 1)),
+								children: text("file.down", {
+									name: file.name,
+									position: index + 1,
+									count: files.length
+								})
+							}) : null,
+							/* @__PURE__ */ jsx("button", {
+								type: "button",
+								disabled: field.disabled,
+								onClick: () => {
+									setRemoved((before) => [...before, {
+										at: index,
+										file
+									}]);
+									field.setValue(files.filter((other) => other.id !== file.id));
+								},
+								children: text("file.remove", { name: file.name })
+							})
+						]
+					}, file.id)),
+					pending.map((entry) => /* @__PURE__ */ jsx(PendingRow, {
+						entry,
+						queue,
 						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))]
+						text
+					}, entry.key)),
+					removed.map(({ at, file }) => /* @__PURE__ */ jsxs("li", {
+						"data-formancy-part": "file-item",
+						"data-state": "removed",
+						children: [/* @__PURE__ */ jsx("span", {
+							"data-formancy-part": "file-name",
+							children: file.name
+						}), /* @__PURE__ */ jsx("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: text("file.undo", { name: file.name })
+						})]
+					}, file.id))
+				]
 			}),
 			/* @__PURE__ */ jsx("p", {
 				role: "status",
 				"data-formancy-part": "file-status",
-				children: busy ? "Uploading…" : failure ?? ""
+				children: statusOf(pending, text)
+			})
+		]
+	});
+}
+/** The files with one moved a place. */
+function moved(files, from, to) {
+	const next = [...files];
+	next.splice(to, 0, ...next.splice(from, 1));
+	return next;
+}
+/** A file not yet in the answer: waiting, being sent, or refused. */
+function PendingRow({ entry, queue, disabled, text }) {
+	const failed = entry.state === "failed";
+	return /* @__PURE__ */ jsxs("li", {
+		"data-formancy-part": "file-item",
+		"data-state": entry.state,
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				"data-formancy-part": "file-name",
+				children: entry.name
+			}),
+			entry.state === "waiting" ? /* @__PURE__ */ jsx("span", {
+				"data-formancy-part": "file-waiting",
+				children: text("file.waiting")
+			}) : null,
+			entry.state === "uploading" ? /* @__PURE__ */ jsx("progress", {
+				"data-formancy-part": "file-progress",
+				"aria-label": text("file.uploading", { name: entry.name }),
+				...entry.total === void 0 ? {} : {
+					value: entry.sent,
+					max: entry.total
+				}
+			}) : null,
+			failed ? /* @__PURE__ */ jsx("span", {
+				"data-formancy-part": "file-error",
+				children: text("file.notAttached", { reason: entry.reason ?? "" })
+			}) : null,
+			failed ? /* @__PURE__ */ jsx("button", {
+				type: "button",
+				disabled,
+				onClick: () => queue.retry(entry.key),
+				children: text("file.retry", { name: entry.name })
+			}) : null,
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				disabled,
+				onClick: () => queue.cancel(entry.key),
+				children: failed ? text("file.dismiss", { name: entry.name }) : text("file.cancel", { name: entry.name })
 			})
 		]
 	});
 }
+/** What the status region says: the file being sent, or the files refused, by name. */
+function statusOf(pending, text) {
+	const sending = pending.find((entry) => entry.state === "uploading");
+	if (sending !== void 0) return text("file.status.uploading", { name: sending.name });
+	const failed = pending.filter((entry) => entry.state === "failed");
+	if (failed.length === 1) return text("file.status.failed", {
+		name: failed[0].name,
+		reason: failed[0].reason ?? ""
+	});
+	if (failed.length > 1) {
+		const names = failed.map((entry) => entry.name);
+		return text("file.status.failedSeveral", {
+			count: failed.length,
+			names
+		});
+	}
+	return "";
+}
+/**
+* The field's upload queue — the form's, found by the row this control is drawn for,
+* so a row that moves and remounts its controls keeps its uploads (0130).
+*
+* This control supplies only the sending: the host's uploader, given an
+* `AbortSignal` for the queue's cancel, which `@formancy/core` has no type for.
+*/
+function useUploadQueue(wire, upload) {
+	const engine = useFormEngine();
+	const uploads = fieldUploads(engine, wire);
+	useEffect(() => {
+		uploads.sender = upload === void 0 ? void 0 : (file, attempt, field) => {
+			const controller = new AbortController();
+			attempt.onCancel(() => controller.abort());
+			return upload(file, {
+				field,
+				signal: controller.signal,
+				onProgress: (sent, total) => attempt.progress(sent, total)
+			});
+		};
+	}, [uploads, upload]);
+	return uploads.queue;
+}
+/**
+* A picture of an image picked in this session, drawn from its bytes.
+*
+* **On a canvas, not an `<img>` on an object URL.** A URL is subject to the page's
+* `img-src`, and a strict policy without `blob:` shows a broken image — while this
+* product says a form runs under a strict CSP with no configuration. Decoding with
+* `createImageBitmap` and drawing the bitmap involves no URL at all.
+*
+* Only for a file picked here: a file stored before this page has no bytes in the
+* browser, and the renderer knows no address to fetch them from. Decorative — the
+* name beside it is what is read out.
+*/
+function FileThumbnail({ source }) {
+	const canvas = useRef(null);
+	const drawable = source !== void 0 && source.type.startsWith("image/") && typeof createImageBitmap === "function";
+	useEffect(() => {
+		if (!drawable) return;
+		let current = true;
+		createImageBitmap(source).then((bitmap) => {
+			const target = canvas.current;
+			if (current && target !== null) {
+				const { width, height } = thumbnailSize(bitmap.width, bitmap.height);
+				target.width = width;
+				target.height = height;
+				target.getContext("2d")?.drawImage(bitmap, 0, 0, target.width, target.height);
+			}
+			bitmap.close();
+		}, () => void 0);
+		return () => {
+			current = false;
+		};
+	}, [source, drawable]);
+	if (!drawable) return null;
+	return /* @__PURE__ */ jsx("canvas", {
+		ref: canvas,
+		"data-formancy-part": "file-thumbnail",
+		"aria-hidden": "true",
+		width: 0,
+		height: 0
+	});
+}
 //#endregion
 //#region src/fields/rich-text-field.tsx
 /**
@@ -1201,30 +1436,26 @@ function FileField({ path, label }) {
 function RichTextToolbar({ disabled, label, onCommand }) {
 	const buttons = useRef([]);
 	const [active, setActive] = useState(0);
+	const text = useFormText();
 	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."
 		}
 	];
@@ -1235,7 +1466,7 @@ function RichTextToolbar({ disabled, label, onCommand }) {
 	};
 	return /* @__PURE__ */ jsx("div", {
 		role: "toolbar",
-		"aria-label": typeof label === "string" ? `Formatting for ${label}` : "Formatting",
+		"aria-label": text("richtext.toolbar", { label }),
 		"data-formancy-part": "richtext-toolbar",
 		onKeyDown: (event) => {
 			if (event.key === "ArrowRight") {
@@ -1263,7 +1494,7 @@ function RichTextToolbar({ disabled, label, onCommand }) {
 			onFocus: () => setActive(index),
 			onClick: () => {
 				if (entry.command === "link") {
-					const href = window.prompt("Address for the link");
+					const href = window.prompt(text("richtext.linkAddress"));
 					if (href === null || href === "") return;
 					onCommand("link", href);
 					return;
@@ -1275,7 +1506,7 @@ function RichTextToolbar({ disabled, label, onCommand }) {
 				children: entry.glyph
 			}), /* @__PURE__ */ jsx("span", {
 				"data-formancy-part": "visually-hidden",
-				children: entry.name
+				children: text(`richtext.${entry.command}`)
 			})]
 		}, entry.command))
 	});
@@ -1461,6 +1692,7 @@ function SelectBoxesSwitch(props) {
 */
 function TagPickerField({ path, label }) {
 	const field = useField(path);
+	const text = useFormText();
 	const options = useResolvedOptions(field);
 	const chosen = Array.isArray(field.value) ? field.value.map(String) : [];
 	const [query, setQuery] = useState("");
@@ -1487,13 +1719,13 @@ function TagPickerField({ path, label }) {
 			"data-formancy-part": "tagpicker",
 			children: [chosen.length === 0 ? null : /* @__PURE__ */ jsx("ul", {
 				"data-formancy-part": "tagpicker-chips",
-				"aria-label": `${label}: chosen`,
+				"aria-label": text("tagpicker.chosen", { label }),
 				children: chosen.map((value) => /* @__PURE__ */ jsxs("li", {
 					"data-formancy-part": "tagpicker-chip",
 					children: [labelFor(value), /* @__PURE__ */ jsx("button", {
 						type: "button",
 						"data-formancy-part": "tagpicker-remove",
-						"aria-label": `Remove ${labelFor(value)}`,
+						"aria-label": text("tagpicker.remove", { option: labelFor(value) }),
 						onClick: () => remove(value),
 						children: "×"
 					})]
@@ -1534,7 +1766,7 @@ function TagPickerField({ path, label }) {
 				}), /* @__PURE__ */ jsx("ul", {
 					id: listboxId,
 					role: "listbox",
-					"aria-label": `${label} suggestions`,
+					"aria-label": text("options.suggestions", { label }),
 					"data-formancy-part": "tagpicker-listbox",
 					hidden: !expanded,
 					children: matches.map((option) => /* @__PURE__ */ jsx("li", {
@@ -1583,9 +1815,9 @@ function SelectBoxesField({ path, label }) {
 						disabled: field.disabled,
 						onChange: (event) => toggle(option.value, event.target.checked),
 						onBlur: () => field.touch()
-					}), /* @__PURE__ */ jsx("label", {
+					}), /* @__PURE__ */ jsxs("label", {
 						htmlFor: optionId,
-						children: option.label
+						children: [/* @__PURE__ */ jsx(OptionPicture, { option }), option.label]
 					})]
 				}, option.value);
 			}),
@@ -1598,6 +1830,362 @@ function SelectBoxesField({ path, label }) {
 	});
 }
 //#endregion
+//#region src/fields/ranking-field.tsx
+/**
+* Options put in order ([0138](../../../../docs/decisions/0138-a-ranking-stores-the-order-chosen.md)).
+*
+* **Buttons, and no dragging.** A drag must have an equivalent that is not one (WCAG 2.2
+* SC 2.5.7), and once the buttons exist they are the control: a drag surface is a second
+* route a theme or a consumer may add over the same commands, not the first one.
+*
+* Two lists. The order so far, each option with buttons to move it up, move it down and
+* take it out; and the options not ranked yet, each a button that puts it at the end.
+* Every button is named after the option it acts on — "Move Tea up" — because a column of
+* identical "Up" buttons is a column a screen reader cannot tell apart.
+*
+* **It starts with nothing ranked.** The options' written order is the author's, and an
+* answer that began as it would submit the author's preference as the respondent's.
+*
+* **Focus follows the option.** After "Move Tea up" focus is on Tea's up button in its new
+* place, so moving something three places is three presses of one key; after ranking one,
+* focus moves to the next option still to rank, so ranking them all is a run of Enter.
+*/
+function RankingField({ path, label }) {
+	const field = useField(path);
+	const text = useFormText();
+	const options = useResolvedOptions(field);
+	const showError = field.touched && field.errors.length > 0;
+	const order = Array.isArray(field.value) ? field.value.map(String) : [];
+	const ranked = order.flatMap((value) => options.filter((option) => option.value === value));
+	const unranked = options.filter((option) => !order.includes(option.value));
+	const buttonId = (action, value) => `${field.ids.control}:${action}:${value}`;
+	const focusAfter = useRef(null);
+	useLayoutEffect(() => {
+		const id = focusAfter.current;
+		if (id === null) return;
+		focusAfter.current = null;
+		document.getElementById(id)?.focus();
+	});
+	const reorder = (next, focus) => {
+		focusAfter.current = focus;
+		field.setValue(next);
+	};
+	const move = (value, by) => {
+		const from = order.indexOf(value);
+		const to = from + by;
+		if (from === -1 || to < 0 || to >= order.length) return;
+		const next = [...order];
+		next[from] = next[to];
+		next[to] = value;
+		reorder(next, buttonId(by === -1 ? "up" : "down", value));
+	};
+	const rank = (value) => {
+		const position = unranked.findIndex((option) => option.value === value);
+		const following = unranked[position + 1] ?? unranked[position - 1];
+		reorder([...order, value], following === void 0 ? buttonId("up", value) : buttonId("rank", following.value));
+	};
+	return /* @__PURE__ */ jsxs("fieldset", {
+		id: field.ids.control,
+		"data-formancy-part": "field",
+		"data-formancy-field-path": path,
+		"data-state": showError ? "invalid" : "valid",
+		"aria-describedby": field.controlProps["aria-describedby"],
+		disabled: field.disabled,
+		children: [
+			/* @__PURE__ */ jsx("legend", {
+				"data-formancy-part": "label",
+				children: label
+			}),
+			/* @__PURE__ */ jsx(RequiredHint, { field }),
+			ranked.length === 0 ? null : /* @__PURE__ */ jsx("ol", {
+				"data-formancy-part": "ranking-order",
+				"aria-label": text("ranking.order", { label }),
+				children: ranked.map((option, index) => /* @__PURE__ */ jsxs("li", {
+					"data-formancy-part": "ranking-item",
+					children: [
+						/* @__PURE__ */ jsx("span", {
+							"data-formancy-part": "ranking-label",
+							children: option.label
+						}),
+						/* @__PURE__ */ jsx("button", {
+							type: "button",
+							id: buttonId("up", option.value),
+							"data-formancy-part": "ranking-up",
+							"aria-label": text("ranking.up", { option: option.label }),
+							"aria-disabled": index === 0 ? true : void 0,
+							onClick: () => move(option.value, -1),
+							onBlur: () => field.touch(),
+							children: "↑"
+						}),
+						/* @__PURE__ */ jsx("button", {
+							type: "button",
+							id: buttonId("down", option.value),
+							"data-formancy-part": "ranking-down",
+							"aria-label": text("ranking.down", { option: option.label }),
+							"aria-disabled": index === ranked.length - 1 ? true : void 0,
+							onClick: () => move(option.value, 1),
+							onBlur: () => field.touch(),
+							children: "↓"
+						}),
+						/* @__PURE__ */ jsx("button", {
+							type: "button",
+							id: buttonId("remove", option.value),
+							"data-formancy-part": "ranking-remove",
+							"aria-label": text("ranking.remove", { option: option.label }),
+							onClick: () => reorder(order.filter((value) => value !== option.value), buttonId("rank", option.value)),
+							onBlur: () => field.touch(),
+							children: "×"
+						})
+					]
+				}, option.value))
+			}),
+			unranked.length === 0 ? null : /* @__PURE__ */ jsx("ul", {
+				"data-formancy-part": "ranking-pool",
+				"aria-label": text("ranking.pool", { label }),
+				children: unranked.map((option) => /* @__PURE__ */ jsx("li", {
+					"data-formancy-part": "ranking-candidate",
+					children: /* @__PURE__ */ jsx("button", {
+						type: "button",
+						id: buttonId("rank", option.value),
+						"data-formancy-part": "ranking-add",
+						"aria-label": text("ranking.rank", { option: option.label }),
+						onClick: () => rank(option.value),
+						onBlur: () => field.touch(),
+						children: option.label
+					})
+				}, option.value))
+			}),
+			showError ? /* @__PURE__ */ jsx("p", {
+				"data-formancy-part": "error",
+				...field.errorProps,
+				children: field.errors.join(", ")
+			}) : null
+		]
+	});
+}
+//#endregion
+//#region src/fields/matrix-field.tsx
+/**
+* One question asked of several rows ([0139](../../../../docs/decisions/0139-a-matrix-answers-one-question-per-row.md)).
+*
+* **A group per row.** The matrix is a fieldset named by its label; each row is a fieldset
+* named by its row, holding a radio per column named by its column. That is a radio group
+* per row, which is exactly what each row is: arrow keys move within it, Tab moves to the
+* next, and every answer is reached by role and name. Not a `<table>` — its rows and
+* columns would be announced as data, and each radio would need a name made of two headers.
+* Looking like a grid is the theme's business, through the parts below.
+*
+* Each row's radios share a name of their own, so choosing in one row never clears another.
+*/
+function MatrixField({ path, label }) {
+	const field = useField(path);
+	const engine = useFormEngine();
+	const columns = useResolvedOptions(field);
+	const rows = (field.def?.rows ?? []).map((row) => ({
+		value: row.value,
+		label: engine.text(row.label) ?? row.value
+	}));
+	const showError = field.touched && field.errors.length > 0;
+	const answer = typeof field.value === "object" && field.value !== null && !Array.isArray(field.value) ? field.value : {};
+	const choose = (row, column) => {
+		field.setValue({
+			...answer,
+			[row]: column
+		});
+	};
+	return /* @__PURE__ */ jsxs("fieldset", {
+		id: field.ids.control,
+		"data-formancy-part": "field",
+		"data-formancy-field-path": path,
+		"data-state": showError ? "invalid" : "valid",
+		"aria-describedby": field.controlProps["aria-describedby"],
+		disabled: field.disabled,
+		children: [
+			/* @__PURE__ */ jsx("legend", {
+				"data-formancy-part": "label",
+				children: label
+			}),
+			/* @__PURE__ */ jsx(RequiredHint, { field }),
+			/* @__PURE__ */ jsx("div", {
+				"data-formancy-part": "matrix",
+				"data-columns": String(columns.length),
+				children: rows.map((row) => /* @__PURE__ */ jsxs("fieldset", {
+					"data-formancy-part": "matrix-row",
+					children: [/* @__PURE__ */ jsx("legend", {
+						"data-formancy-part": "matrix-row-label",
+						children: row.label
+					}), columns.map((column) => {
+						const id = `${field.ids.control}:${row.value}:${column.value}`;
+						return /* @__PURE__ */ jsxs("span", {
+							"data-formancy-part": "matrix-option",
+							children: [/* @__PURE__ */ jsx("input", {
+								type: "radio",
+								id,
+								name: `${field.controlProps.name}.${row.value}`,
+								value: column.value,
+								checked: answer[row.value] === column.value,
+								onChange: () => choose(row.value, column.value),
+								onBlur: () => field.touch()
+							}), /* @__PURE__ */ jsx("label", {
+								htmlFor: id,
+								children: column.label
+							})]
+						}, column.value);
+					})]
+				}, row.value))
+			}),
+			showError ? /* @__PURE__ */ jsx("p", {
+				"data-formancy-part": "error",
+				...field.errorProps,
+				children: field.errors.join(", ")
+			}) : null
+		]
+	});
+}
+//#endregion
+//#region src/fields/scale-fields.tsx
+/**
+* A rating and a slider: one number, two controls.
+*
+* Both are widgets on `number` and neither changes the answer
+* ([0104](../../../docs/decisions/0104-spec-4-opens-with-a-widget-not-a-type.md)),
+* so what is interesting here is the two ways a scale control goes wrong.
+*
+* **The keyboard.** Stars drawn as a row of buttons are a row of tab stops that
+* a screen reader announces as unrelated controls, with no sense that they form
+* a scale or that one is chosen. A rating is a **radio group**: one tab stop,
+* arrow keys along the scale, and the chosen value announced as "3 of 11". That
+* is not a concession to accessibility — it is what the control is.
+*
+* **The bounds.** A scale needs both ends, and the format cannot require them:
+* `min` and `max` are optional on every number field, and making them
+* conditional on a widget would mean a document that stops validating when
+* somebody changes presentation. So a field with no bounds falls back to the
+* ordinary number input rather than drawing a scale of 1–5 or 0–100 that the
+* author never wrote. A control that invents its own range is worse than one
+* that is plain.
+*/
+/** Every value on the scale, inclusive of both ends. */
+function scaleOf(min, max, step) {
+	const out = [];
+	for (let value = min; value <= max + step / 2; value += step) out.push(Math.round(value / step) * step);
+	return out;
+}
+/** Both ends, or nothing: the condition for drawing a scale at all. */
+function boundsOf(def) {
+	if (def.min === void 0 || def.max === void 0 || def.max <= def.min) return void 0;
+	return {
+		min: def.min,
+		max: def.max,
+		step: def.step !== void 0 && def.step > 0 ? def.step : 1
+	};
+}
+/**
+* Which control a `number` field gets.
+*
+* The same shape `selectboxes` uses for its tag picker: one switch per type, so
+* the registry keeps one entry and a widget cannot be registered independently
+* of the type it belongs to ([0065](../../../docs/decisions/0065-a-widget-is-authored-not-registered.md)).
+*/
+function NumberSwitch(props) {
+	const field = useField(props.path);
+	if (field.def?.widget === "rating") return /* @__PURE__ */ jsx(RatingField, { ...props });
+	if (field.def?.widget === "slider") return /* @__PURE__ */ jsx(SliderField, { ...props });
+	return /* @__PURE__ */ jsx(NumberFallback, { ...props });
+}
+function RatingField({ path, label }) {
+	const field = useField(path);
+	const bounds = boundsOf(field.def ?? {});
+	if (bounds === void 0) return /* @__PURE__ */ jsx(NumberFallback, {
+		path,
+		label
+	});
+	const { controlProps } = field;
+	const chosen = typeof field.value === "number" ? field.value : void 0;
+	return /* @__PURE__ */ jsx(FieldShell, {
+		path,
+		field,
+		label,
+		children: /* @__PURE__ */ jsx("div", {
+			...controlProps,
+			role: "radiogroup",
+			"aria-labelledby": field.ids.label,
+			"data-formancy-part": "rating",
+			children: scaleOf(bounds.min, bounds.max, bounds.step).map((value) => /* @__PURE__ */ jsxs("label", {
+				"data-formancy-part": "rating-step",
+				"data-chosen": value === chosen ? "true" : void 0,
+				children: [/* @__PURE__ */ jsx("input", {
+					type: "radio",
+					name: controlProps.id,
+					value,
+					checked: value === chosen,
+					onChange: () => field.setValue(value),
+					onBlur: () => field.touch()
+				}), /* @__PURE__ */ jsx("span", {
+					"data-formancy-part": "rating-label",
+					children: value
+				})]
+			}, value))
+		})
+	});
+}
+function SliderField({ path, label }) {
+	const field = useField(path);
+	const bounds = boundsOf(field.def ?? {});
+	if (bounds === void 0) return /* @__PURE__ */ jsx(NumberFallback, {
+		path,
+		label
+	});
+	const midpoint = bounds.min + (bounds.max - bounds.min) / 2;
+	const shown = typeof field.value === "number" ? field.value : midpoint;
+	return /* @__PURE__ */ jsx(FieldShell, {
+		path,
+		field,
+		label,
+		children: /* @__PURE__ */ jsxs("div", {
+			"data-formancy-part": "slider",
+			children: [/* @__PURE__ */ jsx("input", {
+				type: "range",
+				...field.controlProps,
+				min: bounds.min,
+				max: bounds.max,
+				step: bounds.step,
+				value: shown,
+				onChange: (event) => field.setValue(event.target.valueAsNumber),
+				onBlur: () => field.touch()
+			}), /* @__PURE__ */ jsx("span", {
+				"data-formancy-part": "slider-value",
+				"aria-hidden": "true",
+				children: shown
+			})]
+		})
+	});
+}
+/**
+* The ordinary number input, for a field whose bounds a scale cannot be drawn
+* from.
+*
+* A copy of `NumberField` rather than an import, and deliberately: importing it
+* would make `text-fields.tsx` and this file a cycle, and the duplication is six
+* lines of the most stable markup in the package. The thing that must not
+* diverge is what the field *stores*, and that is the engine's.
+*/
+function NumberFallback({ 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/fields/signature-field.tsx
 /**
 * The signature control: a mark drawn, or a name typed.
@@ -1628,6 +2216,7 @@ function SelectBoxesField({ path, label }) {
 */
 function SignatureField({ path, label }) {
 	const field = useField(path);
+	const text = useFormText();
 	const answer = typeof field.value === "object" && field.value !== null ? field.value : {};
 	const drawn = answer.drawn ?? [];
 	const [width, height] = field.def?.box ?? [600, 200];
@@ -1663,6 +2252,20 @@ function SignatureField({ path, label }) {
 	const commit = (strokes) => {
 		field.setValue(strokes.length === 0 ? null : { drawn: strokes });
 	};
+	const preventsScroll = { touchAction: "none" };
+	useEffect(() => {
+		const element = surface.current;
+		if (element === null) return;
+		const swallow = (event) => {
+			if (event.cancelable) event.preventDefault();
+		};
+		element.addEventListener("touchstart", swallow, { passive: false });
+		element.addEventListener("touchmove", swallow, { passive: false });
+		return () => {
+			element.removeEventListener("touchstart", swallow);
+			element.removeEventListener("touchmove", swallow);
+		};
+	}, []);
 	const onPointerDown = (event) => {
 		before.current = drawn;
 		stroke.current = [pointFrom(event)];
@@ -1689,6 +2292,7 @@ function SignatureField({ path, label }) {
 				/* @__PURE__ */ jsx("svg", {
 					ref: surface,
 					"data-formancy-part": "signature-surface",
+					style: preventsScroll,
 					viewBox: `0 0 ${String(width)} ${String(height)}`,
 					role: "img",
 					"aria-label": label,
@@ -1706,7 +2310,7 @@ function SignatureField({ path, label }) {
 					"data-formancy-part": "signature-typed",
 					type: "text",
 					value: answer.typed ?? "",
-					"aria-label": "Type your name",
+					"aria-label": text("signature.typed"),
 					onChange: (event) => {
 						const typed = event.target.value;
 						field.setValue(typed === "" ? null : { typed });
@@ -1721,7 +2325,7 @@ function SignatureField({ path, label }) {
 						before.current = [];
 						field.setValue(null);
 					},
-					children: "Clear"
+					children: text("signature.clear")
 				})
 			]
 		})
@@ -1744,9 +2348,10 @@ function SignatureField({ path, label }) {
 * 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 }) {
+function StaticField({ path, label }) {
 	return /* @__PURE__ */ jsx("p", {
 		"data-formancy-part": "static",
+		"data-formancy-field-path": path,
 		children: label
 	});
 }
@@ -1876,8 +2481,12 @@ function DateTimeField({ path, label }) {
 function TextField({ path, label }) {
 	const field = useField(path);
 	const scan = useScanner();
+	const words = useFormText();
 	const [scanning, setScanning] = useState(false);
-	/** A device failure, held here rather than in the field's errors. See below. */
+	/**
+	* A device failure, held here rather than in the field's errors. See below. What went
+	* wrong rather than a sentence about it, so the sentence is the form's language's.
+	*/
 	const [trouble, setTrouble] = useState(void 0);
 	/**
 	* The ONE place a text field's answer is written, typed or scanned.
@@ -1888,6 +2497,9 @@ function TextField({ path, label }) {
 	* it collects ([0065](../../../docs/decisions/0065-a-widget-is-authored-not-registered.md)).
 	*/
 	const commit = (text) => field.setValue(text.replace(/[\r\n]/g, ""));
+	const mask = field.def.mask;
+	const answer = typeof field.value === "string" ? field.value : "";
+	const shown = mask === void 0 ? answer : formatMasked(mask, answer);
 	const read = async () => {
 		if (scan === void 0 || scanning) return;
 		setScanning(true);
@@ -1899,13 +2511,13 @@ function TextField({ path, label }) {
 			});
 			if (text === null) return;
 			if (typeof text !== "string") {
-				setTrouble("Scanning did not work: the scanner did not return text. Type the value instead.");
+				setTrouble({});
 				return;
 			}
-			commit(text);
+			commit(mask === void 0 ? text : answerFromText(mask, text));
 			field.touch();
 		} catch (error) {
-			setTrouble(`Scanning did not work: ${error instanceof Error ? error.message : String(error)}. Type the value instead.`);
+			setTrouble({ reason: error instanceof Error ? error.message : String(error) });
 		} finally {
 			setScanning(false);
 		}
@@ -1917,8 +2529,24 @@ function TextField({ path, label }) {
 		children: [/* @__PURE__ */ jsx("input", {
 			type: "text",
 			...field.controlProps,
-			value: typeof field.value === "string" ? field.value : "",
-			onChange: (event) => commit(event.target.value),
+			value: shown,
+			placeholder: mask === void 0 ? void 0 : maskPlaceholder(mask),
+			inputMode: mask !== void 0 && maskIsNumeric(mask) ? "numeric" : void 0,
+			onChange: (event) => {
+				if (mask === void 0) {
+					commit(event.target.value);
+					return;
+				}
+				const input = event.target;
+				const forward = event.nativeEvent.inputType === "deleteContentForward";
+				const edit = editMasked(mask, answer, input.value, {
+					caret: input.selectionStart,
+					direction: forward ? "forward" : "backward"
+				});
+				input.value = formatMasked(mask, edit.answer);
+				input.setSelectionRange(edit.caret, edit.caret);
+				commit(edit.answer);
+			},
 			onBlur: () => field.touch()
 		}), field.def.widget === "scanner" && scan !== void 0 ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("button", {
 			type: "button",
@@ -1928,14 +2556,18 @@ function TextField({ path, label }) {
 			onClick: () => {
 				read();
 			},
-			children: ["Scan ", /* @__PURE__ */ jsx("span", {
-				"data-formancy-part": "visually-hidden",
-				children: label
-			})]
+			children: [
+				words("scanner.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 ?? ""
+			children: scanning ? words("scanner.scanning") : trouble === void 0 ? "" : trouble.reason === void 0 ? words("scanner.noText") : words("scanner.failed", { reason: trouble.reason })
 		})] }) : null]
 	});
 }
@@ -1953,21 +2585,6 @@ function TextareaField({ path, label }) {
 		})
 	});
 }
-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
 /**
@@ -1996,6 +2613,7 @@ function FormancyForm(props) {
 }
 function SubmitButton({ submitLabel, onSubmit, onFailedNavigate }) {
 	const engine = useFormEngine();
+	const text = useFormText();
 	const submit = useSubmit();
 	return /* @__PURE__ */ jsx("button", {
 		type: "button",
@@ -2015,7 +2633,7 @@ function SubmitButton({ submitLabel, onSubmit, onFailedNavigate }) {
 				errors: outcome.errors
 			});
 		},
-		children: submitLabel ?? "Submit"
+		children: submitLabel ?? text("form.submit")
 	});
 }
 function FlatForm(props) {
@@ -2023,6 +2641,7 @@ function FlatForm(props) {
 }
 function PagedForm(props) {
 	const engine = useFormEngine();
+	const text = useFormText();
 	const wizard = useWizard();
 	const pages = engine.pages().map((page, index) => ({
 		...page,
@@ -2031,7 +2650,7 @@ function PagedForm(props) {
 	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
 		/* @__PURE__ */ jsx("nav", {
 			"data-formancy-part": "stepper",
-			"aria-label": "Progress",
+			"aria-label": text("form.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
@@ -2046,11 +2665,11 @@ function PagedForm(props) {
 			children: [wizard.canGoBack ? /* @__PURE__ */ jsx("button", {
 				type: "button",
 				onClick: () => wizard.back(),
-				children: "Back"
+				children: text("form.back")
 			}) : null, wizard.canGoNext ? /* @__PURE__ */ jsx("button", {
 				type: "button",
 				onClick: () => void wizard.next(),
-				children: "Next"
+				children: text("form.next")
 			}) : /* @__PURE__ */ jsx(SubmitButton, {
 				...props,
 				onFailedNavigate: (page) => wizard.goTo(page)
@@ -2068,13 +2687,21 @@ function FieldList({ labels, registry, page, layout }) {
 		return /* @__PURE__ */ jsx(LayoutTree, {
 			schema,
 			nodes: arrangement.nodes,
-			locale: schema.i18n?.defaultLocale ?? "",
+			locale: engine.locale(),
+			shows: page === void 0 ? void 0 : (path) => placedPage(engine, path) === page,
 			renderField: (path) => {
 				if (repeaterWires.includes(path)) return /* @__PURE__ */ jsx(RepeaterSection, {
 					wire: path,
 					labels,
 					registry
 				}, path);
+				const group = placedGroup(engine, path);
+				if (group !== void 0) return /* @__PURE__ */ jsx(GroupSection, {
+					path,
+					group,
+					labels,
+					registry
+				}, path);
 				return /* @__PURE__ */ jsx(FieldSlot, {
 					path,
 					fallbackLabel: labels?.[path],
@@ -2106,13 +2733,49 @@ function FieldSlot({ path, fallbackLabel, registry }) {
 		label
 	});
 }
+/**
+* A group an arrangement places whole: its fields, under its label, the way a labelled
+* section is drawn — a real group when it has a name, a box when it has none. What it holds
+* and in which order is `@formancy/core`'s, shared with the Angular renderer (0151).
+*/
+function GroupSection({ path, group, labels, registry }) {
+	const engine = useFormEngine();
+	const headingId = useId();
+	const label = resolveText(engine.schema(), group.def.label, engine.locale());
+	return /* @__PURE__ */ jsxs("div", {
+		"data-formancy-part": "group",
+		"data-formancy-field-path": path,
+		...label === void 0 ? {} : {
+			role: "group",
+			"aria-labelledby": headingId
+		},
+		children: [
+			label === void 0 ? null : /* @__PURE__ */ jsx("p", {
+				id: headingId,
+				"data-formancy-part": "group-heading",
+				children: label
+			}),
+			group.fields.map((wire) => /* @__PURE__ */ jsx(FieldSlot, {
+				path: wire,
+				fallbackLabel: labels?.[wire],
+				registry
+			}, wire)),
+			group.repeaters.map((wire) => /* @__PURE__ */ jsx(RepeaterSection, {
+				wire,
+				labels,
+				registry
+			}, wire))
+		]
+	});
+}
 function RepeaterSection({ wire, labels, registry }) {
 	const engine = useFormEngine();
+	const text = useFormText();
 	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 addLabel = def?.addLabel ?? text("repeater.add", { label });
+	const removeLabel = def?.removeLabel ?? text("repeater.remove", { label });
 	const fallbackFor = (instanceWire) => {
 		const template = instanceWire.replace(/\[\d+\]/, "[]");
 		return labels?.[template] ?? labels?.[instanceWire];
@@ -2166,7 +2829,11 @@ function RepeaterSection({ wire, labels, registry }) {
 			onClick: () => repeater.removeRow(index),
 			children: /* @__PURE__ */ jsx("span", {
 				"data-formancy-part": "row-action-text",
-				children: `${removeLabel} ${index + 1} of ${repeater.rowCount}`
+				children: text("repeater.removeRow", {
+					remove: removeLabel,
+					position: index + 1,
+					count: repeater.rowCount
+				})
 			})
 		}),
 		index > 0 ? /* @__PURE__ */ jsx("button", {
@@ -2175,7 +2842,11 @@ function RepeaterSection({ wire, labels, registry }) {
 			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`
+				children: text("repeater.moveUp", {
+					label,
+					position: index + 1,
+					count: repeater.rowCount
+				})
 			})
 		}) : null,
 		index < repeater.rowCount - 1 ? /* @__PURE__ */ jsx("button", {
@@ -2184,7 +2855,11 @@ function RepeaterSection({ wire, labels, registry }) {
 			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`
+				children: text("repeater.moveDown", {
+					label,
+					position: index + 1,
+					count: repeater.rowCount
+				})
 			})
 		}) : null
 	] });
@@ -2219,6 +2894,7 @@ function RepeaterSection({ wire, labels, registry }) {
 	}, rowId));
 	return /* @__PURE__ */ jsxs("fieldset", {
 		"data-formancy-part": "repeater",
+		"data-formancy-field-path": wire,
 		children: [
 			/* @__PURE__ */ jsx("legend", {
 				"data-formancy-part": "repeater-legend",
@@ -2254,7 +2930,7 @@ function RepeaterSection({ wire, labels, registry }) {
 const DEFAULT_COMPONENTS = {
 	text: TextField,
 	textarea: TextareaField,
-	number: NumberField,
+	number: NumberSwitch,
 	checkbox: CheckboxField,
 	date: DateField,
 	time: TimeField,
@@ -2262,6 +2938,8 @@ const DEFAULT_COMPONENTS = {
 	select: SelectField,
 	radio: RadioGroupField,
 	selectboxes: SelectBoxesSwitch,
+	ranking: RankingField,
+	matrix: MatrixField,
 	file: FileField,
 	richtext: RichTextField,
 	signature: SignatureField,
@@ -2284,6 +2962,7 @@ const DEFAULT_COMPONENTS = {
 */
 function ErrorSummary({ labels }) {
 	const engine = useFormEngine();
+	const text = useFormText();
 	const subscribe = useCallback((onChange) => engine.subscribe(onChange), [engine]);
 	const getErrors = useCallback(() => engine.visibleErrors(), [engine]);
 	const errors = useSyncExternalStore(subscribe, getErrors, getErrors);
@@ -2294,14 +2973,14 @@ function ErrorSummary({ labels }) {
 		previousCount.current = errors.length;
 	}, [errors]);
 	if (errors.length === 0) return null;
-	const labelFor = (path) => labels?.[path] ?? labels?.[path.replace(/\[\d+\]/, "[]")] ?? path;
+	const labelFor = (path) => labels?.[path] ?? labels?.[path.replace(/\[\d+\]/, "[]")] ?? engine.getFieldSnapshot(parsePath(path)).label ?? path;
 	return /* @__PURE__ */ jsxs("div", {
 		"data-formancy-part": "error-summary",
 		tabIndex: -1,
 		ref: region,
 		children: [/* @__PURE__ */ jsx("h2", {
 			"data-formancy-part": "error-summary-heading",
-			children: errors.length === 1 ? "There is 1 problem to fix" : `There are ${errors.length} problems to fix`
+			children: text("errors.heading", { count: errors.length })
 		}), /* @__PURE__ */ jsx("ul", { children: errors.map(({ path, codes }) => {
 			const controlId = engine.getFieldSnapshot(parsePath(path)).ids.control;
 			return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("a", {
@@ -2310,7 +2989,10 @@ function ErrorSummary({ labels }) {
 					event.preventDefault();
 					focusControl(document.getElementById(controlId));
 				},
-				children: `${labelFor(path)}: ${codes.join(", ")}`
+				children: text("errors.entry", {
+					label: labelFor(path),
+					codes: codes.join(", ")
+				})
 			}) }, path);
 		}) })]
 	});
@@ -2319,6 +3001,7 @@ function ErrorSummary({ labels }) {
 //#region src/resume-notice.tsx
 function ResumeNotice({ migration, labels }) {
 	const region = useRef(null);
+	const text = useFormText();
 	useEffect(() => {
 		if (migration !== void 0) region.current?.focus();
 	}, [migration]);
@@ -2326,25 +3009,27 @@ function ResumeNotice({ migration, labels }) {
 	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",
+		"aria-label": text("resume.heading"),
 		"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"
+			children: text("resume.heading")
 		}), 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", {
+			text("resume.breaking.kept"),
+			" ",
+			/* @__PURE__ */ jsx("strong", { children: text("resume.breaking.cannotSubmit") }),
+			" ",
+			text("resume.breaking.restart")
+		] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("p", { children: text("resume.setAside", { count: setAside.length }) }), 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 };
+export { ErrorSummary, FormancyForm, FormancyProvider, OptionsSourcesProvider, ResumeNotice, RichText, RichTextEditorProvider, ScannerProvider, UploaderProvider, useField, useFormEngine, useFormText, useOptionsSources, useRepeater, useRichTextEditorFactory, useScanner, useSubmit, useUploader, useWizard };
 
 //# sourceMappingURL=index.mjs.map