@10x-media/form-builder 0.1.0-beta.0

package/dist/exports/react.js

@@ -0,0 +1,1564 @@
+"use client";
+import { c as runValidation, d as computeCalcFields, f as evaluateCalc, g as DEFAULT_HONEYPOT_FIELD, h as CAPTCHA_TOKEN_KEY, i as buildRuleRegistry, l as evaluateCondition, m as defaultPresentationDescriptors, o as defaultValidationRules, r as valuesFromSearchParams, t as buildRecallResolver, u as calcExpressionOf, v as noopEventSink, y as interpolate } from "../resolver-OeQyVH2N.js";
+import { t as keys } from "../keys-N5xGiUsh.js";
+import { r as defaultFieldDefinitions, t as buildRegistry } from "../registry-CoCyhtvB.js";
+import { createContext, createElement, useCallback, useContext, useEffect, useId, useMemo, useReducer, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/flow/engine.ts
+/** The entry step id (the first step), or `undefined` for an empty flow. */
+const firstStepId = (flow) => flow.steps[0]?.id;
+/** The step with the given id, or `undefined`. */
+const getStep = (flow, id) => flow.steps.find((step) => step.id === id);
+/** The field machine names a step renders (empty for an unknown step). */
+const stepFieldNames = (flow, id) => getStep(flow, id)?.fields ?? [];
+/**
+* Resolve the next step id from the current step + answers: the first transition whose `when` matches
+* (via `evaluateCondition`), else the default `next`, else `undefined` (terminal). Pure + isomorphic.
+*/
+const resolveNextStepId = (flow, currentId, answers) => {
+	const step = getStep(flow, currentId);
+	if (!step) return;
+	for (const transition of step.transitions ?? []) if (evaluateCondition(transition.when, answers)) return transition.to;
+	return step.next;
+};
+/** Whether the current step is terminal (no matching transition + no default next). */
+const isTerminalStepId = (flow, currentId, answers) => resolveNextStepId(flow, currentId, answers) === void 0;
+//#endregion
+//#region src/react/contract.ts
+/** Identity helper that pins a renderer to the `FieldRenderer` type so authors get prop inference. */
+const defineFieldRenderer = (renderer) => renderer;
+//#endregion
+//#region src/react/events.ts
+/** Emit a lifecycle event through the sink, stamping `formId` + an ISO `at`. */
+const emitFormEvent = (sink, formId, event) => {
+	sink.emit({
+		...event,
+		formId,
+		at: (/* @__PURE__ */ new Date()).toISOString()
+	});
+};
+//#endregion
+//#region src/react/FormContext.ts
+const FormContext = createContext(null);
+/** Read the form controller context. Throws if used outside `<Form>`. */
+const useFormContext = () => {
+	const context = useContext(FormContext);
+	if (!context) throw new Error("useFormContext must be used within a <Form>");
+	return context;
+};
+//#endregion
+//#region src/react/FormLayout.tsx
+/** Establishes the layout container. With the stylesheet imported, children with `data-width` flow into a grid. */
+const FormLayout = ({ children, enabled = true }) => /* @__PURE__ */ jsx("div", {
+	className: enabled ? "fb-form fb-form--grid" : "fb-form",
+	children
+});
+/** Props to spread onto a field wrapper to declare its grid width. */
+const widthProps = (width) => ({ "data-width": width ?? "full" });
+//#endregion
+//#region src/react/Honeypot.tsx
+const HIDDEN = {
+	position: "absolute",
+	width: 1,
+	height: 1,
+	padding: 0,
+	margin: -1,
+	overflow: "hidden",
+	clip: "rect(0, 0, 0, 0)",
+	whiteSpace: "nowrap",
+	border: 0
+};
+/**
+* A visually hidden honeypot decoy. Real users never see or tab to it; bots that fill every input trip it,
+* and the server rejects the submission. Off-screen + aria-hidden + tabIndex -1 + autoComplete off.
+*/
+const Honeypot = ({ name, inputRef }) => /* @__PURE__ */ jsx("div", {
+	"aria-hidden": "true",
+	style: HIDDEN,
+	children: /* @__PURE__ */ jsxs("label", { children: ["Leave this field empty", /* @__PURE__ */ jsx("input", {
+		ref: inputRef,
+		type: "text",
+		name,
+		tabIndex: -1,
+		autoComplete: "off",
+		defaultValue: ""
+	})] })
+});
+//#endregion
+//#region src/react/presentation/Backdrop.tsx
+/** A full-viewport backdrop behind an overlay surface. Styling comes from the `data-fb-backdrop` hook. */
+const Backdrop = ({ onClick, className }) => createElement("div", {
+	"data-fb-backdrop": "",
+	className,
+	onClick,
+	"aria-hidden": true
+});
+//#endregion
+//#region src/react/presentation/useDismiss.ts
+/** Dismiss-on-Escape and dismiss-on-outside-pointerdown for an overlay surface. */
+const useDismiss = ({ active, onDismiss, closeOnEscape = true, closeOnOutsideClick = true }, ref) => {
+	useEffect(() => {
+		if (!active) return;
+		const onKeyDown = (event) => {
+			if (closeOnEscape && event.key === "Escape") onDismiss();
+		};
+		const onPointerDown = (event) => {
+			if (!closeOnOutsideClick) return;
+			const node = ref.current;
+			if (node && event.target instanceof Node && !node.contains(event.target)) onDismiss();
+		};
+		document.addEventListener("keydown", onKeyDown);
+		document.addEventListener("pointerdown", onPointerDown);
+		return () => {
+			document.removeEventListener("keydown", onKeyDown);
+			document.removeEventListener("pointerdown", onPointerDown);
+		};
+	}, [
+		active,
+		onDismiss,
+		closeOnEscape,
+		closeOnOutsideClick,
+		ref
+	]);
+};
+//#endregion
+//#region src/react/presentation/useFocusTrap.ts
+const FOCUSABLE = "a[href],button:not([disabled]),textarea:not([disabled]),input:not([disabled]),select:not([disabled]),[tabindex]:not([tabindex=\"-1\"])";
+/** Trap Tab focus within the container while active. */
+const useFocusTrap = (ref, active) => {
+	useEffect(() => {
+		if (!active) return;
+		const node = ref.current;
+		if (!node) return;
+		const onKeyDown = (event) => {
+			if (event.key !== "Tab") return;
+			const focusable = Array.from(node.querySelectorAll(FOCUSABLE));
+			if (focusable.length === 0) return;
+			const first = focusable[0];
+			const last = focusable[focusable.length - 1];
+			const activeEl = document.activeElement;
+			if (event.shiftKey && activeEl === first) {
+				event.preventDefault();
+				last.focus();
+			} else if (!event.shiftKey && activeEl === last) {
+				event.preventDefault();
+				first.focus();
+			}
+		};
+		node.addEventListener("keydown", onKeyDown);
+		return () => {
+			node.removeEventListener("keydown", onKeyDown);
+		};
+	}, [ref, active]);
+};
+//#endregion
+//#region src/react/presentation/useScrollLock.ts
+/** Lock body scroll while active; restores the prior value on cleanup. */
+const useScrollLock = (active) => {
+	useEffect(() => {
+		if (!active) return;
+		const previous = document.body.style.overflow;
+		document.body.style.overflow = "hidden";
+		return () => {
+			document.body.style.overflow = previous;
+		};
+	}, [active]);
+};
+//#endregion
+//#region src/react/presentation/DialogSurface.tsx
+/**
+* Accessible, dependency-free overlay surface: backdrop + role=dialog/aria-modal, focus-trap,
+* scroll-lock, Escape/outside-click dismiss, initial focus, and focus restore on close. Composes the
+* exported primitives so a consumer can rebuild it from the same parts.
+*/
+const DialogSurface = ({ open, onClose, label, labelledBy, surface, closeLabel = "Close", closeOnEscape, closeOnOutsideClick, children }) => {
+	const ref = useRef(null);
+	const restoreRef = useRef(null);
+	useScrollLock(open);
+	useFocusTrap(ref, open);
+	useDismiss({
+		active: open,
+		onDismiss: onClose,
+		closeOnEscape,
+		closeOnOutsideClick
+	}, ref);
+	useEffect(() => {
+		if (!open) return;
+		restoreRef.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+		ref.current?.focus();
+		return () => {
+			restoreRef.current?.focus();
+		};
+	}, [open]);
+	if (!open) return null;
+	return createElement("div", { "data-fb-overlay": surface ?? "" }, [createElement(Backdrop, {
+		key: "backdrop",
+		onClick: onClose
+	}), createElement("div", {
+		key: "surface",
+		ref,
+		role: "dialog",
+		"aria-modal": true,
+		"aria-label": labelledBy ? void 0 : label,
+		"aria-labelledby": labelledBy,
+		"data-fb-dialog": surface ?? "",
+		tabIndex: -1
+	}, [createElement("button", {
+		key: "close",
+		type: "button",
+		"data-fb-dialog-close": "",
+		"aria-label": closeLabel,
+		onClick: onClose
+	}, "×"), createElement("div", { key: "body" }, children)])]);
+};
+//#endregion
+//#region src/react/presentation/presentations.tsx
+const overlayWrapper = (surface) => {
+	const Wrapper = ({ open, onClose, title, closeLabel, children }) => createElement(DialogSurface, {
+		open,
+		onClose,
+		label: title,
+		surface,
+		closeLabel
+	}, children);
+	Wrapper.displayName = `${surface}Wrapper`;
+	return Wrapper;
+};
+const defaultPresentations = {
+	page: defaultPresentationDescriptors.page,
+	inline: defaultPresentationDescriptors.inline,
+	modal: {
+		...defaultPresentationDescriptors.modal,
+		Wrapper: overlayWrapper("modal")
+	},
+	drawer: {
+		...defaultPresentationDescriptors.drawer,
+		Wrapper: overlayWrapper("drawer")
+	}
+};
+//#endregion
+//#region src/react/presentation/registry.ts
+const resolvePresentations = (defaults = defaultPresentations, config = {}) => {
+	const registry = new Map(Object.entries(defaults));
+	for (const [name, option] of Object.entries(config)) if (option === false) registry.delete(name);
+	else if (option === true) {} else registry.set(name, option);
+	return registry;
+};
+//#endregion
+//#region src/react/recall.ts
+/**
+* Return a copy of the field with recall tokens interpolated in its label, description, and option
+* labels. Never alters `name` (identity for React keys and state lookups must stay stable).
+*/
+const applyRecall = (field, resolve) => {
+	const next = { ...field };
+	if (typeof field.label === "string") next.label = interpolate(field.label, resolve);
+	if (typeof field.description === "string") next.description = interpolate(field.description, resolve);
+	if (Array.isArray(field.options)) next.options = field.options.map((option) => option && typeof option.label === "string" ? {
+		...option,
+		label: interpolate(option.label, resolve)
+	} : option);
+	return next;
+};
+//#endregion
+//#region src/react/registry.ts
+/**
+* Resolve the active renderer registry from the defaults and a consumer override map. `false` removes a
+* type, `true` keeps the default (no-op when none exists), a renderer adds a new type or replaces one.
+* Mirrors the field-type and validation-rule registry convention.
+*/
+const resolveRenderers = (defaults, config = {}) => {
+	const registry = new Map(Object.entries(defaults));
+	for (const [type, option] of Object.entries(config)) if (option === false) registry.delete(type);
+	else if (option === true) {} else registry.set(type, option);
+	return registry;
+};
+//#endregion
+//#region src/react/primitives/FieldShell.tsx
+/**
+* Accessible wrapper for a single field: a `<label>` bound to the control, the control slot, an optional
+* description, and error/warning messages. The control inside must set `aria-describedby={describedById}`
+* and `aria-invalid` when errors exist; this shell renders the matching `id={describedById}` region.
+*/
+const FieldShell = ({ id, label, description, required, errors = [], warnings = [], describedById, children }) => /* @__PURE__ */ jsxs("div", {
+	className: "fb-field",
+	"data-invalid": errors.length > 0 ? "" : void 0,
+	children: [
+		label ? /* @__PURE__ */ jsxs("label", {
+			className: "fb-field__label",
+			htmlFor: id,
+			children: [label, required ? /* @__PURE__ */ jsx("span", {
+				className: "fb-field__required",
+				"aria-hidden": "true",
+				children: " *"
+			}) : null]
+		}) : null,
+		children,
+		/* @__PURE__ */ jsxs("div", {
+			id: describedById,
+			className: "fb-field__messages",
+			children: [
+				description ? /* @__PURE__ */ jsx("p", {
+					className: "fb-field__description",
+					children: description
+				}) : null,
+				errors.length > 0 ? /* @__PURE__ */ jsx("div", {
+					role: "alert",
+					"aria-atomic": "true",
+					className: "fb-field__errors",
+					children: errors.map((message) => /* @__PURE__ */ jsx("p", {
+						className: "fb-field__error",
+						children: message
+					}, message))
+				}) : null,
+				warnings.map((message) => /* @__PURE__ */ jsx("p", {
+					className: "fb-field__warning",
+					children: message
+				}, message))
+			]
+		})
+	]
+});
+//#endregion
+//#region src/react/renderers/calculation.tsx
+/** Read-only renderer for a calculation field: the value is derived, never user-editable, so it shows in an `<output>` rather than an input. */
+const calculationRenderer = defineFieldRenderer(({ field, value, errors, warnings, required }) => {
+	const id = useId();
+	const describedById = `${id}-desc`;
+	return /* @__PURE__ */ jsx(FieldShell, {
+		id,
+		label: field.label,
+		description: typeof field.description === "string" ? field.description : void 0,
+		required,
+		errors,
+		warnings,
+		describedById,
+		children: /* @__PURE__ */ jsx("output", {
+			id,
+			className: "fb-field__calc",
+			"aria-describedby": describedById,
+			children: value == null ? "" : String(value)
+		})
+	});
+});
+//#endregion
+//#region src/react/primitives/Checkbox.tsx
+const Checkbox = ({ id, name, checked, onChange, onBlur, required, disabled, invalid, describedById }) => /* @__PURE__ */ jsx("input", {
+	type: "checkbox",
+	className: "fb-checkbox",
+	id,
+	name,
+	checked,
+	required,
+	disabled,
+	"aria-invalid": invalid || void 0,
+	"aria-describedby": describedById,
+	onChange: (e) => onChange(e.target.checked),
+	onBlur
+});
+//#endregion
+//#region src/react/renderers/checkbox.tsx
+const checkboxRenderer = defineFieldRenderer(({ field, name, value, onChange, onBlur, errors, warnings, required, disabled }) => {
+	const id = useId();
+	const describedById = `${id}-desc`;
+	return /* @__PURE__ */ jsx(FieldShell, {
+		id,
+		label: field.label,
+		description: typeof field.description === "string" ? field.description : void 0,
+		required,
+		errors,
+		warnings,
+		describedById,
+		children: /* @__PURE__ */ jsx(Checkbox, {
+			id,
+			name,
+			checked: value ?? false,
+			onChange,
+			onBlur,
+			required,
+			disabled,
+			invalid: errors.length > 0,
+			describedById
+		})
+	});
+});
+//#endregion
+//#region src/react/renderers/consent.tsx
+const consentRenderer = defineFieldRenderer(({ field, name, value, onChange, onBlur, errors, warnings, required, disabled }) => {
+	const id = useId();
+	const describedById = `${id}-desc`;
+	const text = (raw) => typeof raw === "string" && raw.trim() !== "" ? raw : void 0;
+	const statement = text(field.statement) ?? text(field.label);
+	const links = Array.isArray(field.consentLinks) ? field.consentLinks : (() => {
+		const sc = field.sourceConfig;
+		if (sc && typeof sc.url === "string" && sc.url) return [{
+			label: typeof sc.label === "string" ? sc.label : "Policy",
+			url: sc.url
+		}];
+		return [];
+	})();
+	return /* @__PURE__ */ jsxs(FieldShell, {
+		id,
+		label: statement,
+		description: typeof field.description === "string" ? field.description : void 0,
+		required,
+		errors,
+		warnings,
+		describedById,
+		children: [/* @__PURE__ */ jsx(Checkbox, {
+			id,
+			name,
+			checked: value ?? false,
+			onChange,
+			onBlur,
+			required,
+			disabled,
+			invalid: errors.length > 0,
+			describedById
+		}), links.length > 0 ? /* @__PURE__ */ jsx("span", {
+			className: "fb-consent__links",
+			children: links.map((link) => /* @__PURE__ */ jsx("a", {
+				href: link.url,
+				target: "_blank",
+				rel: "noopener noreferrer",
+				className: "fb-consent__link",
+				children: link.label
+			}, link.url))
+		}) : null]
+	});
+});
+//#endregion
+//#region src/react/primitives/Input.tsx
+const Input = ({ id, name, type = "text", value, onChange, onBlur, placeholder, required, disabled, invalid, describedById }) => /* @__PURE__ */ jsx("input", {
+	id,
+	name,
+	type,
+	className: "fb-input",
+	value,
+	placeholder,
+	required,
+	disabled,
+	"aria-invalid": invalid || void 0,
+	"aria-describedby": describedById,
+	onChange: (event) => onChange(event.target.value),
+	onBlur
+});
+//#endregion
+//#region src/react/renderers/email.tsx
+const emailRenderer = defineFieldRenderer(({ field, name, value, onChange, onBlur, errors, warnings, required, disabled }) => {
+	const id = useId();
+	const describedById = `${id}-desc`;
+	return /* @__PURE__ */ jsx(FieldShell, {
+		id,
+		label: field.label,
+		description: typeof field.description === "string" ? field.description : void 0,
+		required,
+		errors,
+		warnings,
+		describedById,
+		children: /* @__PURE__ */ jsx(Input, {
+			id,
+			name,
+			type: "email",
+			value: value ?? "",
+			onChange,
+			onBlur,
+			placeholder: typeof field.placeholder === "string" ? field.placeholder : void 0,
+			required,
+			disabled,
+			invalid: errors.length > 0,
+			describedById
+		})
+	});
+});
+//#endregion
+//#region src/react/uploadFile.ts
+/**
+* Upload one file to a Payload upload collection (`POST {apiRoute}/{collection}`, multipart) and return its
+* id, which the file field stores as its value. The server re-derives the file metadata from the stored doc
+* at submit, so the client is never trusted for it. Pure: inject `fetchImpl` in tests.
+*/
+const uploadFile = async (input) => {
+	const { file, collection = "form-uploads", apiRoute = "/api", fetchImpl = fetch } = input;
+	const body = new FormData();
+	body.append("file", file);
+	let response;
+	try {
+		response = await fetchImpl(`${apiRoute}/${collection}`, {
+			method: "POST",
+			body
+		});
+	} catch (error) {
+		return {
+			ok: false,
+			message: error instanceof Error ? error.message : "Network error"
+		};
+	}
+	if (!response.ok) return {
+		ok: false,
+		message: `Upload failed (${response.status})`
+	};
+	const id = (await response.json().catch(() => ({}))).doc?.id;
+	return id == null ? {
+		ok: false,
+		message: "No id returned"
+	} : {
+		ok: true,
+		id
+	};
+};
+//#endregion
+//#region src/react/renderers/file.tsx
+const acceptOf = (mimeTypes) => {
+	if (!Array.isArray(mimeTypes)) return;
+	const types = mimeTypes.filter((entry) => typeof entry === "string");
+	return types.length > 0 ? types.join(",") : void 0;
+};
+/**
+* Headless file renderer: a native file input that uploads the chosen file to the upload collection and
+* stores the returned id as the field value. The server re-derives filename/mimeType/filesize from the
+* stored doc at submit, so the client value is only the id. Shows the uploaded filename with a clear
+* control and surfaces upload errors. Single file (v1); the upload posts to the default `/api` route.
+*/
+const fileRenderer = defineFieldRenderer(({ field, name, value, onChange, onBlur, errors, warnings, required, disabled }) => {
+	const id = useId();
+	const describedById = `${id}-desc`;
+	const [uploading, setUploading] = useState(false);
+	const [filename, setFilename] = useState(void 0);
+	const [localError, setLocalError] = useState(void 0);
+	const collection = typeof field.relationTo === "string" ? field.relationTo : "form-uploads";
+	const accept = acceptOf(field.mimeTypes);
+	const allErrors = localError ? [...errors, localError] : errors;
+	const displayName = filename ?? (value !== void 0 && value !== null && value !== "" ? "Uploaded file" : void 0);
+	const handleChange = async (event) => {
+		const selected = event.target.files?.[0];
+		if (!selected) return;
+		setUploading(true);
+		setLocalError(void 0);
+		const result = await uploadFile({
+			file: selected,
+			collection
+		});
+		setUploading(false);
+		if (result.ok) {
+			setFilename(selected.name);
+			onChange(result.id);
+		} else setLocalError(result.message ?? "Upload failed");
+	};
+	const clear = () => {
+		setFilename(void 0);
+		setLocalError(void 0);
+		onChange("");
+	};
+	return /* @__PURE__ */ jsxs(FieldShell, {
+		id,
+		label: field.label,
+		description: typeof field.description === "string" ? field.description : void 0,
+		required,
+		errors: allErrors,
+		warnings,
+		describedById,
+		children: [
+			/* @__PURE__ */ jsx("input", {
+				id,
+				name,
+				type: "file",
+				accept,
+				disabled: disabled || uploading,
+				onChange: (event) => {
+					handleChange(event);
+				},
+				onBlur,
+				"aria-invalid": allErrors.length > 0,
+				"aria-describedby": describedById
+			}),
+			uploading ? /* @__PURE__ */ jsx("p", {
+				className: "fb-field__file-status",
+				"aria-live": "polite",
+				children: "Uploading"
+			}) : null,
+			displayName ? /* @__PURE__ */ jsxs("p", {
+				className: "fb-field__file-name",
+				children: [/* @__PURE__ */ jsx("span", { children: displayName }), /* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: "fb-field__file-clear",
+					onClick: clear,
+					disabled,
+					children: "Remove"
+				})]
+			}) : null
+		]
+	});
+});
+//#endregion
+//#region src/react/renderers/number.tsx
+const numberRenderer = defineFieldRenderer(({ field, name, value, onChange, onBlur, errors, warnings, required, disabled }) => {
+	const id = useId();
+	const describedById = `${id}-desc`;
+	return /* @__PURE__ */ jsx(FieldShell, {
+		id,
+		label: field.label,
+		description: typeof field.description === "string" ? field.description : void 0,
+		required,
+		errors,
+		warnings,
+		describedById,
+		children: /* @__PURE__ */ jsx(Input, {
+			id,
+			name,
+			type: "number",
+			value: value == null ? "" : String(value),
+			onChange: (raw) => {
+				const next = Number(raw);
+				onChange(raw === "" || Number.isNaN(next) ? void 0 : next);
+			},
+			onBlur,
+			placeholder: typeof field.placeholder === "string" ? field.placeholder : void 0,
+			required,
+			disabled,
+			invalid: errors.length > 0,
+			describedById
+		})
+	});
+});
+//#endregion
+//#region src/react/primitives/Select.tsx
+const Select = ({ id, name, value, options, onChange, onBlur, required, disabled, invalid, describedById, placeholder }) => /* @__PURE__ */ jsxs("select", {
+	id,
+	name,
+	className: "fb-select",
+	value,
+	required,
+	disabled,
+	"aria-invalid": invalid || void 0,
+	"aria-describedby": describedById,
+	onChange: (event) => onChange(event.target.value),
+	onBlur,
+	children: [placeholder !== void 0 ? /* @__PURE__ */ jsx("option", {
+		value: "",
+		children: placeholder
+	}) : null, options.map((option) => /* @__PURE__ */ jsx("option", {
+		value: option.value,
+		children: option.label
+	}, option.value))]
+});
+//#endregion
+//#region src/react/renderers/select.tsx
+const selectRenderer = defineFieldRenderer(({ field, name, value, onChange, onBlur, errors, warnings, required, disabled }) => {
+	const id = useId();
+	const describedById = `${id}-desc`;
+	const options = Array.isArray(field.options) ? field.options : [];
+	return /* @__PURE__ */ jsx(FieldShell, {
+		id,
+		label: field.label,
+		description: typeof field.description === "string" ? field.description : void 0,
+		required,
+		errors,
+		warnings,
+		describedById,
+		children: /* @__PURE__ */ jsx(Select, {
+			id,
+			name,
+			value: value ?? "",
+			options,
+			onChange,
+			onBlur,
+			placeholder: typeof field.placeholder === "string" ? field.placeholder : void 0,
+			required,
+			disabled,
+			invalid: errors.length > 0,
+			describedById
+		})
+	});
+});
+//#endregion
+//#region src/react/renderers/text.tsx
+const textRenderer = defineFieldRenderer(({ field, name, value, onChange, onBlur, errors, warnings, required, disabled }) => {
+	const id = useId();
+	const describedById = `${id}-desc`;
+	return /* @__PURE__ */ jsx(FieldShell, {
+		id,
+		label: field.label,
+		description: typeof field.description === "string" ? field.description : void 0,
+		required,
+		errors,
+		warnings,
+		describedById,
+		children: /* @__PURE__ */ jsx(Input, {
+			id,
+			name,
+			type: "text",
+			value: value ?? "",
+			onChange,
+			onBlur,
+			placeholder: typeof field.placeholder === "string" ? field.placeholder : void 0,
+			required,
+			disabled,
+			invalid: errors.length > 0,
+			describedById
+		})
+	});
+});
+//#endregion
+//#region src/react/primitives/Textarea.tsx
+const Textarea = ({ id, name, value, onChange, onBlur, placeholder, required, disabled, invalid, describedById }) => /* @__PURE__ */ jsx("textarea", {
+	id,
+	name,
+	className: "fb-textarea",
+	value,
+	placeholder,
+	required,
+	disabled,
+	"aria-invalid": invalid || void 0,
+	"aria-describedby": describedById,
+	onChange: (e) => onChange(e.target.value),
+	onBlur
+});
+//#endregion
+//#region src/react/renderers/index.ts
+/** The built-in field renderers, keyed by field-type slug. Override via the renderer registry. */
+const defaultRenderers = {
+	calculation: calculationRenderer,
+	checkbox: checkboxRenderer,
+	consent: consentRenderer,
+	email: emailRenderer,
+	file: fileRenderer,
+	number: numberRenderer,
+	select: selectRenderer,
+	text: textRenderer,
+	textarea: defineFieldRenderer(({ field, name, value, onChange, onBlur, errors, warnings, required, disabled }) => {
+		const id = useId();
+		const describedById = `${id}-desc`;
+		return /* @__PURE__ */ jsx(FieldShell, {
+			id,
+			label: field.label,
+			description: typeof field.description === "string" ? field.description : void 0,
+			required,
+			errors,
+			warnings,
+			describedById,
+			children: /* @__PURE__ */ jsx(Textarea, {
+				id,
+				name,
+				value: value ?? "",
+				onChange,
+				onBlur,
+				placeholder: typeof field.placeholder === "string" ? field.placeholder : void 0,
+				required,
+				disabled,
+				invalid: errors.length > 0,
+				describedById
+			})
+		});
+	})
+};
+//#endregion
+//#region src/react/resolveForm.ts
+/** Build the field-type registry from the bundled defaults plus any consumer-supplied extra definitions. */
+const buildFieldTypeRegistry = (extra = []) => buildRegistry([...defaultFieldDefinitions, ...extra]);
+/** Build the validation-rule registry from the bundled defaults plus consumer extras. */
+const buildValidationRuleRegistry = (extra = []) => buildRuleRegistry([...defaultValidationRules, ...extra]);
+/** The subset of fields currently visible, evaluating each field's `visibleWhen` against the answers. */
+const visibleFields = (fields, values) => fields.filter((field) => evaluateCondition(field.visibleWhen, values));
+//#endregion
+//#region src/react/state.ts
+const initialFormState = (values) => ({
+	values,
+	errors: {},
+	warnings: {},
+	touched: {},
+	submitting: false,
+	submitted: false,
+	submitAttempted: false
+});
+/** Changing a value clears that field's prior errors (re-validated by the caller). */
+const formReducer = (state, action) => {
+	switch (action.type) {
+		case "SET_VALUE": {
+			const { [action.name]: _removed, ...restErrors } = state.errors;
+			return {
+				...state,
+				values: {
+					...state.values,
+					[action.name]: action.value
+				},
+				errors: restErrors
+			};
+		}
+		case "TOUCH": return state.touched[action.name] ? state : {
+			...state,
+			touched: {
+				...state.touched,
+				[action.name]: true
+			}
+		};
+		case "SET_FIELD_ISSUES": return {
+			...state,
+			errors: {
+				...state.errors,
+				[action.name]: action.errors
+			},
+			warnings: {
+				...state.warnings,
+				[action.name]: action.warnings
+			}
+		};
+		case "SET_ALL_ISSUES": return {
+			...state,
+			errors: action.errors,
+			warnings: action.warnings,
+			submitAttempted: true
+		};
+		case "SUBMIT_START": return {
+			...state,
+			submitting: true,
+			submitError: void 0
+		};
+		case "SUBMIT_SUCCESS": return {
+			...state,
+			submitting: false,
+			submitted: true
+		};
+		case "SUBMIT_ERROR": return {
+			...state,
+			submitting: false,
+			submitError: action.message
+		};
+		default: return state;
+	}
+};
+//#endregion
+//#region src/react/submitForm.ts
+const toFieldErrors = (body) => {
+	const nested = body.errors?.[0]?.data?.errors ?? [];
+	const map = {};
+	for (const entry of nested) if (typeof entry.path === "string" && typeof entry.message === "string") map[entry.path] = [...map[entry.path] ?? [], entry.message];
+	return map;
+};
+/**
+* The default submission transport: POST `{apiRoute}/form-submissions` with `{ form, values }`. On 201
+* returns the created submission id; on a 400 Payload `ValidationError` maps `data.errors[].path` to
+* per-field messages; otherwise returns a generic message. Pure: inject `fetchImpl` in tests.
+*/
+const submitForm = async (input) => {
+	const { formId, values, apiRoute = "/api", fetchImpl = fetch } = input;
+	let response;
+	try {
+		response = await fetchImpl(`${apiRoute}/form-submissions`, {
+			method: "POST",
+			headers: { "Content-Type": "application/json" },
+			body: JSON.stringify({
+				form: formId,
+				values
+			})
+		});
+	} catch (error) {
+		return {
+			ok: false,
+			message: error instanceof Error ? error.message : "Network error"
+		};
+	}
+	if (response.ok) {
+		const id = (await response.json().catch(() => ({}))).doc?.id;
+		return {
+			ok: true,
+			submissionId: id === void 0 ? void 0 : String(id)
+		};
+	}
+	if (response.status === 400) {
+		const body = await response.json().catch(() => ({}));
+		const fieldErrors = toFieldErrors(body);
+		if (Object.keys(fieldErrors).length > 0) return {
+			ok: false,
+			fieldErrors
+		};
+		return {
+			ok: false,
+			message: body.errors?.[0]?.message ?? "Validation failed"
+		};
+	}
+	return {
+		ok: false,
+		message: `Request failed (${response.status})`
+	};
+};
+//#endregion
+//#region src/react/useField.ts
+/** Bind one field by name to the form controller: its value, issues, and change/blur handlers. */
+const useField = (name) => {
+	const { state, dispatch, validateField } = useFormContext();
+	const touched = state.touched[name] ?? false;
+	const showIssues = touched || state.submitAttempted;
+	const value = state.values[name];
+	const setValue = useCallback((next) => {
+		dispatch({
+			type: "SET_VALUE",
+			name,
+			value: next
+		});
+		if (touched || state.submitAttempted) validateField(name, next);
+	}, [
+		dispatch,
+		name,
+		touched,
+		state.submitAttempted,
+		validateField
+	]);
+	const onBlur = useCallback(() => {
+		dispatch({
+			type: "TOUCH",
+			name
+		});
+		validateField(name, value);
+	}, [
+		dispatch,
+		name,
+		validateField,
+		value
+	]);
+	return {
+		value,
+		errors: showIssues ? state.errors[name] ?? [] : [],
+		warnings: showIssues ? state.warnings[name] ?? [] : [],
+		touched,
+		setValue,
+		onBlur
+	};
+};
+//#endregion
+//#region src/react/validateField.ts
+/**
+* Run client-side validation for one field, reusing the shared engine in `mode: 'client'` (server-only
+* rules are skipped, no `req`/`payload`). Splits issues into blocking errors and advisory warnings.
+*/
+const validateFieldValue = async (input) => {
+	const { field, value, registry, ruleRegistry, answers, locale, t } = input;
+	const { errors: issues } = await runValidation({
+		field,
+		fieldDefinition: registry.get(field.blockType),
+		value,
+		fieldType: field.blockType,
+		ruleRegistry,
+		answers,
+		locale,
+		t,
+		operation: "create",
+		event: "onChange",
+		mode: "client"
+	});
+	return {
+		errors: issues.filter((issue) => issue.severity === "error").map((issue) => issue.message),
+		warnings: issues.filter((issue) => issue.severity === "warning").map((issue) => issue.message)
+	};
+};
+//#endregion
+//#region src/react/Form.tsx
+const isEmpty = (value) => value == null || value === "" || Array.isArray(value) && value.length === 0;
+const FIELD_WIDTHS = new Set([
+	"full",
+	"half",
+	"third",
+	"twoThirds"
+]);
+const FieldHost = ({ field, renderer, locale, t }) => {
+	const id = useId();
+	const { value, errors, warnings, setValue, onBlur } = useField(field.name);
+	return createElement(renderer, {
+		field,
+		id,
+		name: field.name,
+		value,
+		onChange: setValue,
+		onBlur,
+		errors,
+		warnings,
+		required: Boolean(field.required),
+		locale,
+		t
+	});
+};
+/** Hosts a derived (calc) field: read-only, value supplied from `effectiveValues`, never bound via `useField`. */
+const CalcFieldHost = ({ field, renderer, value, locale, t }) => {
+	return createElement(renderer, {
+		field,
+		id: useId(),
+		name: field.name,
+		value,
+		onChange: () => {},
+		onBlur: () => {},
+		errors: [],
+		warnings: [],
+		required: false,
+		disabled: true,
+		locale,
+		t
+	});
+};
+/** The headless form controller: state, progressive client validation, conditional visibility, submission, events. */
+const Form = ({ form, fieldTypes, rules, renderers, apiRoute, onSubmit, onSuccess, onError, events, t, locale = "en", layout, submitLabel = "Submit", nextLabel = "Next", backLabel = "Back", closeLabel = "Close", successMessage = "Thank you.", presentation, presentations, onClose, title, initialValues, honeypot, captchaToken, children }) => {
+	const honeypotName = honeypot === false ? null : honeypot?.name ?? "confirm_email";
+	const honeypotRef = useRef(null);
+	const registry = useMemo(() => buildFieldTypeRegistry(fieldTypes), [fieldTypes]);
+	const ruleRegistry = useMemo(() => buildValidationRuleRegistry(rules), [rules]);
+	const rendererRegistry = useMemo(() => resolveRenderers(defaultRenderers, renderers), [renderers]);
+	const presentationRegistry = useMemo(() => resolvePresentations(defaultPresentations, presentations), [presentations]);
+	const activePresentation = typeof presentation === "object" ? presentation : presentationRegistry.get(presentation ?? form.defaultPresentation ?? "page") ?? presentationRegistry.get("page") ?? defaultPresentationDescriptors.page;
+	const fieldsByName = useMemo(() => new Map(form.fields.map((field) => [field.name, field])), [form.fields]);
+	const translate = useMemo(() => t ?? ((key) => key), [t]);
+	const sinkRef = useRef(noopEventSink);
+	sinkRef.current = events ?? noopEventSink;
+	const formIdRef = useRef("");
+	formIdRef.current = String(form.id);
+	const [state, rawDispatch] = useReducer(formReducer, form.fields, (fields) => initialFormState({
+		...Object.fromEntries(fields.map((field) => [field.name, void 0])),
+		...initialValues ?? {}
+	}));
+	const effectiveValues = useMemo(() => computeCalcFields(form.fields, state.values), [form.fields, state.values]);
+	const recall = useMemo(() => buildRecallResolver({
+		fields: form.fields,
+		values: effectiveValues,
+		registry,
+		locale,
+		t: translate
+	}), [
+		form.fields,
+		effectiveValues,
+		registry,
+		locale,
+		translate
+	]);
+	const flow = form.flow && form.flow.steps.length >= 2 ? form.flow : void 0;
+	const [currentStepId, setCurrentStepId] = useState(() => flow ? firstStepId(flow) : void 0);
+	const [history, setHistory] = useState([]);
+	const startedRef = useRef(false);
+	const submittedRef = useRef(false);
+	const submittingRef = useRef(false);
+	const flowRef = useRef(flow);
+	flowRef.current = flow;
+	const dispatch = useCallback((action) => {
+		if (action.type === "SET_VALUE" && !startedRef.current) {
+			startedRef.current = true;
+			emitFormEvent(sinkRef.current, formIdRef.current, { type: "form.started" });
+		}
+		rawDispatch(action);
+	}, []);
+	const validateField = useCallback((name, value) => {
+		const field = fieldsByName.get(name);
+		if (!field) return;
+		const answers = {
+			...effectiveValues,
+			[name]: value
+		};
+		if (!evaluateCondition(field.validateWhen, answers)) {
+			rawDispatch({
+				type: "SET_FIELD_ISSUES",
+				name,
+				errors: [],
+				warnings: []
+			});
+			return;
+		}
+		validateFieldValue({
+			field,
+			value,
+			registry,
+			ruleRegistry,
+			answers,
+			locale,
+			t: translate
+		}).then(({ errors, warnings }) => {
+			rawDispatch({
+				type: "SET_FIELD_ISSUES",
+				name,
+				errors,
+				warnings
+			});
+			const [firstError] = errors;
+			if (firstError !== void 0) emitFormEvent(sinkRef.current, formIdRef.current, {
+				type: "field.errored",
+				field: name,
+				message: firstError
+			});
+		});
+	}, [
+		fieldsByName,
+		effectiveValues,
+		registry,
+		ruleRegistry,
+		locale,
+		translate
+	]);
+	const visible = visibleFields(form.fields, effectiveValues);
+	const stepVisible = (flow && currentStepId ? stepFieldNames(flow, currentStepId) : []).map((name) => visible.find((field) => field.name === name)).filter((field) => Boolean(field));
+	const goNext = async () => {
+		if (!flow || !currentStepId) return;
+		const results = await Promise.all(stepVisible.filter((field) => !calcExpressionOf(field)).filter((field) => evaluateCondition(field.validateWhen, effectiveValues)).map(async (field) => ({
+			field,
+			...await validateFieldValue({
+				field,
+				value: effectiveValues[field.name],
+				registry,
+				ruleRegistry,
+				answers: effectiveValues,
+				locale,
+				t: translate
+			})
+		})));
+		let hasError = false;
+		for (const result of results) {
+			rawDispatch({
+				type: "TOUCH",
+				name: result.field.name
+			});
+			rawDispatch({
+				type: "SET_FIELD_ISSUES",
+				name: result.field.name,
+				errors: result.errors,
+				warnings: result.warnings
+			});
+			if (result.errors.length > 0) hasError = true;
+		}
+		if (hasError) return;
+		const next = resolveNextStepId(flow, currentStepId, state.values);
+		if (!next) return;
+		emitFormEvent(sinkRef.current, formIdRef.current, {
+			type: "step.completed",
+			stepId: currentStepId
+		});
+		setHistory((prev) => [...prev, currentStepId]);
+		setCurrentStepId(next);
+		emitFormEvent(sinkRef.current, formIdRef.current, {
+			type: "step.viewed",
+			stepId: next
+		});
+	};
+	const goBack = () => {
+		const prev = history[history.length - 1];
+		if (prev === void 0) return;
+		setHistory((entries) => entries.slice(0, -1));
+		setCurrentStepId(prev);
+		emitFormEvent(sinkRef.current, formIdRef.current, {
+			type: "step.viewed",
+			stepId: prev
+		});
+	};
+	useEffect(() => {
+		emitFormEvent(sinkRef.current, formIdRef.current, { type: "form.viewed" });
+		const mountFlow = flowRef.current;
+		if (mountFlow) {
+			const first = firstStepId(mountFlow);
+			if (first) emitFormEvent(sinkRef.current, formIdRef.current, {
+				type: "step.viewed",
+				stepId: first
+			});
+		}
+		return () => {
+			if (!submittedRef.current && !submittingRef.current) emitFormEvent(sinkRef.current, formIdRef.current, { type: "form.abandoned" });
+		};
+	}, []);
+	const handleClose = useCallback(() => {
+		onClose?.();
+	}, [onClose]);
+	const handleSubmit = async (event) => {
+		event.preventDefault();
+		if (submittingRef.current) return;
+		submittingRef.current = true;
+		const visible = visibleFields(form.fields, effectiveValues);
+		const results = await Promise.all(visible.filter((field) => !calcExpressionOf(field)).filter((field) => evaluateCondition(field.validateWhen, effectiveValues)).map(async (field) => ({
+			field,
+			...await validateFieldValue({
+				field,
+				value: effectiveValues[field.name],
+				registry,
+				ruleRegistry,
+				answers: effectiveValues,
+				locale,
+				t: translate
+			})
+		})));
+		const errors = {};
+		const warnings = {};
+		for (const result of results) {
+			if (result.errors.length > 0) {
+				errors[result.field.name] = result.errors;
+				const [firstError] = result.errors;
+				if (firstError !== void 0) emitFormEvent(sinkRef.current, formIdRef.current, {
+					type: "field.errored",
+					field: result.field.name,
+					message: firstError
+				});
+			}
+			if (result.warnings.length > 0) warnings[result.field.name] = result.warnings;
+		}
+		rawDispatch({
+			type: "SET_ALL_ISSUES",
+			errors,
+			warnings
+		});
+		if (Object.keys(errors).length > 0) {
+			submittingRef.current = false;
+			return;
+		}
+		rawDispatch({ type: "SUBMIT_START" });
+		const values = visible.filter((field) => !isEmpty(effectiveValues[field.name])).map((field) => ({
+			field: field.name,
+			value: effectiveValues[field.name]
+		}));
+		if (honeypotName) {
+			const decoy = honeypotRef.current?.value ?? "";
+			if (decoy !== "") values.push({
+				field: honeypotName,
+				value: decoy
+			});
+		}
+		if (captchaToken) values.push({
+			field: CAPTCHA_TOKEN_KEY,
+			value: captchaToken
+		});
+		const result = onSubmit ? await onSubmit({
+			formId: form.id,
+			values
+		}) : await submitForm({
+			formId: form.id,
+			values,
+			apiRoute
+		});
+		submittingRef.current = false;
+		if (result.ok) {
+			submittedRef.current = true;
+			rawDispatch({ type: "SUBMIT_SUCCESS" });
+			emitFormEvent(sinkRef.current, formIdRef.current, {
+				type: "submission.created",
+				submissionId: result.submissionId
+			});
+			onSuccess?.(result.submissionId);
+			if (activePresentation.dismissOnSuccess) handleClose();
+		} else {
+			if (result.fieldErrors) rawDispatch({
+				type: "SET_ALL_ISSUES",
+				errors: result.fieldErrors,
+				warnings: {}
+			});
+			const message = result.message ?? "Submission failed";
+			rawDispatch({
+				type: "SUBMIT_ERROR",
+				message
+			});
+			onError?.(message);
+		}
+	};
+	const step = flow ? {
+		flow,
+		currentStepId,
+		stepIndex: flow.steps.findIndex((s) => s.id === currentStepId),
+		stepCount: flow.steps.length,
+		isFirst: history.length === 0,
+		isTerminal: currentStepId ? isTerminalStepId(flow, currentStepId, state.values) : true,
+		goNext: () => {
+			goNext();
+		},
+		goBack
+	} : {
+		stepIndex: 0,
+		stepCount: 1,
+		isFirst: true,
+		isTerminal: true,
+		goNext: () => {},
+		goBack: () => {}
+	};
+	const contextValue = {
+		state,
+		dispatch,
+		validateField,
+		locale,
+		step
+	};
+	const PresentationWrapper = activePresentation.Wrapper;
+	const wrap = (content) => PresentationWrapper ? /* @__PURE__ */ jsx(PresentationWrapper, {
+		presentation: activePresentation,
+		open: true,
+		onClose: handleClose,
+		title,
+		closeLabel,
+		children: content
+	}) : content;
+	if (children !== void 0) return /* @__PURE__ */ jsx(FormContext.Provider, {
+		value: contextValue,
+		children: wrap(/* @__PURE__ */ jsxs("form", {
+			className: "fb-form-root",
+			noValidate: true,
+			onSubmit: handleSubmit,
+			"data-fb-presentation": activePresentation.name,
+			"data-fb-density": activePresentation.density,
+			children: [honeypotName ? /* @__PURE__ */ jsx(Honeypot, {
+				name: honeypotName,
+				inputRef: honeypotRef
+			}) : null, children]
+		}))
+	});
+	if (state.submitted) return /* @__PURE__ */ jsx(FormContext.Provider, {
+		value: contextValue,
+		children: wrap(/* @__PURE__ */ jsx("p", {
+			role: "status",
+			className: "fb-form__success",
+			"data-fb-presentation": activePresentation.name,
+			"data-fb-density": activePresentation.density,
+			children: interpolate(successMessage, recall)
+		}))
+	});
+	const rendered = (flow ? stepVisible : visible).filter((field) => field.hidden !== true && field.calcDisplay !== false);
+	return /* @__PURE__ */ jsx(FormContext.Provider, {
+		value: contextValue,
+		children: wrap(/* @__PURE__ */ jsxs("form", {
+			className: "fb-form-root",
+			noValidate: true,
+			onSubmit: handleSubmit,
+			"data-fb-presentation": activePresentation.name,
+			"data-fb-density": activePresentation.density,
+			children: [
+				honeypotName ? /* @__PURE__ */ jsx(Honeypot, {
+					name: honeypotName,
+					inputRef: honeypotRef
+				}) : null,
+				/* @__PURE__ */ jsx(FormLayout, {
+					enabled: layout !== false,
+					children: rendered.map((field) => {
+						const renderer = rendererRegistry.get(field.blockType);
+						if (!renderer) return null;
+						const width = typeof field.width === "string" && FIELD_WIDTHS.has(field.width) ? field.width : void 0;
+						const recalledField = applyRecall(field, recall);
+						return /* @__PURE__ */ jsx("div", {
+							...widthProps(width),
+							children: calcExpressionOf(field) ? /* @__PURE__ */ jsx(CalcFieldHost, {
+								field: recalledField,
+								renderer,
+								value: effectiveValues[field.name],
+								locale,
+								t: translate
+							}) : /* @__PURE__ */ jsx(FieldHost, {
+								field: recalledField,
+								renderer,
+								locale,
+								t: translate
+							})
+						}, field.name);
+					})
+				}),
+				state.submitError ? /* @__PURE__ */ jsx("p", {
+					role: "alert",
+					className: "fb-form__submit-error",
+					children: state.submitError
+				}) : null,
+				flow ? /* @__PURE__ */ jsxs("div", {
+					className: "fb-form__controls",
+					children: [!step.isFirst ? /* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: goBack,
+						disabled: state.submitting,
+						children: backLabel
+					}) : null, step.isTerminal ? /* @__PURE__ */ jsx("button", {
+						type: "submit",
+						disabled: state.submitting,
+						children: submitLabel
+					}) : /* @__PURE__ */ jsx("button", {
+						type: "button",
+						disabled: state.submitting,
+						onClick: () => {
+							goNext();
+						},
+						children: nextLabel
+					})]
+				}) : /* @__PURE__ */ jsx("button", {
+					type: "submit",
+					disabled: state.submitting,
+					children: submitLabel
+				})
+			]
+		}))
+	});
+};
+//#endregion
+//#region src/react/FormResults.tsx
+const OneResult = ({ result, t, showCounts }) => {
+	if (result.total === 0) return /* @__PURE__ */ jsxs("section", {
+		className: "fb-results__field",
+		children: [result.label ? /* @__PURE__ */ jsx("h3", {
+			className: "fb-results__label",
+			children: result.label
+		}) : null, /* @__PURE__ */ jsx("p", {
+			className: "fb-results__empty",
+			children: t(keys.resultsNoResponses)
+		})]
+	});
+	return /* @__PURE__ */ jsxs("section", {
+		className: "fb-results__field",
+		children: [
+			result.label ? /* @__PURE__ */ jsx("h3", {
+				className: "fb-results__label",
+				children: result.label
+			}) : null,
+			/* @__PURE__ */ jsx("ul", {
+				className: "fb-results__list",
+				children: result.buckets.map((bucket) => /* @__PURE__ */ jsxs("li", {
+					className: "fb-results__row",
+					children: [
+						/* @__PURE__ */ jsx("span", {
+							className: "fb-results__option",
+							children: bucket.label
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: "fb-results__bar",
+							children: /* @__PURE__ */ jsx("span", {
+								className: "fb-results__bar-fill",
+								style: { width: `${bucket.percentage}%` },
+								"aria-hidden": "true"
+							})
+						}),
+						/* @__PURE__ */ jsxs("span", {
+							className: "fb-results__pct",
+							children: [bucket.percentage, "%"]
+						}),
+						showCounts ? /* @__PURE__ */ jsx("span", {
+							className: "fb-results__count",
+							children: bucket.count
+						}) : null
+					]
+				}, bucket.value))
+			}),
+			/* @__PURE__ */ jsxs("p", {
+				className: "fb-results__total",
+				children: [
+					result.total,
+					" ",
+					t(keys.resultsResponses),
+					result.truncated ? ` (${t(keys.resultsTruncated)})` : ""
+				]
+			})
+		]
+	});
+};
+/**
+* Presentational results view for polls and survey summaries: per-option bars with percentages. Headless,
+* data resolved server-side via `aggregateFieldResponses`/`aggregateFormResponses` and passed in (it never
+* fetches). The option label, count, and percentage are real text (the accessible content); the bar fill
+* is `aria-hidden` visual sugar sized by inline width.
+*/
+const FormResults = ({ results, t, showCounts = true }) => {
+	const translate = t ?? ((key) => key);
+	return /* @__PURE__ */ jsx("div", {
+		className: "fb-results",
+		children: (Array.isArray(results) ? results : [results]).map((result) => /* @__PURE__ */ jsx(OneResult, {
+			result,
+			t: translate,
+			showCounts
+		}, result.field))
+	});
+};
+//#endregion
+//#region src/react/fetchResults.ts
+/**
+* Fetch aggregate poll/survey results from the form-builder results endpoint
+* (`GET {apiRoute}/forms/:id/results`). Returns the server-resolved aggregations; the endpoint gates public
+* access by the form's `showResults` opt-in. Pure: inject `fetchImpl` in tests.
+*/
+const fetchFormResults = async (input) => {
+	const { formId, field, apiRoute = "/api", fetchImpl = fetch } = input;
+	const query = field ? `?field=${encodeURIComponent(field)}` : "";
+	let response;
+	try {
+		response = await fetchImpl(`${apiRoute}/forms/${formId}/results${query}`, { method: "GET" });
+	} catch (error) {
+		return {
+			ok: false,
+			message: error instanceof Error ? error.message : "Network error"
+		};
+	}
+	if (!response.ok) return {
+		ok: false,
+		message: `Request failed (${response.status})`
+	};
+	return {
+		ok: true,
+		results: (await response.json().catch(() => ({}))).results ?? []
+	};
+};
+//#endregion
+//#region src/react/Poll.tsx
+const readVoted = (key) => {
+	try {
+		return window.localStorage.getItem(key) != null;
+	} catch {
+		return false;
+	}
+};
+const writeVoted = (key) => {
+	try {
+		window.localStorage.setItem(key, "1");
+	} catch {}
+};
+/**
+* A poll: renders `<Form>` until the visitor votes, then fetches the aggregate results and shows
+* `<FormResults>`. A per-browser localStorage flag (`storageKey`) skips straight to results on revisit. The
+* guard is UX, not integrity (bypassable): server-enforced one-per-identity dedup composes via `req.user`
+* (authed forms) or a `notAlreadySubmitted` rule, with cookie/IP identity deferred to the spam phase.
+*/
+const Poll = ({ resultsField, storageKey, hasVoted, fetchResultsImpl = fetchFormResults, apiRoute, onSuccess, ...formProps }) => {
+	const key = storageKey ?? `fb-poll-${formProps.form.id}`;
+	const [voted, setVoted] = useState(false);
+	const [results, setResults] = useState(null);
+	const loadResults = useCallback(async () => {
+		const result = await fetchResultsImpl({
+			formId: formProps.form.id,
+			field: resultsField,
+			apiRoute
+		});
+		setResults(result.ok ? result.results : []);
+	}, [
+		fetchResultsImpl,
+		formProps.form.id,
+		resultsField,
+		apiRoute
+	]);
+	useEffect(() => {
+		if (hasVoted ?? readVoted(key)) {
+			setVoted(true);
+			loadResults();
+		}
+	}, [
+		hasVoted,
+		key,
+		loadResults
+	]);
+	const handleSuccess = useCallback((submissionId) => {
+		writeVoted(key);
+		setVoted(true);
+		loadResults();
+		onSuccess?.(submissionId);
+	}, [
+		key,
+		loadResults,
+		onSuccess
+	]);
+	if (voted) return results ? /* @__PURE__ */ jsx(FormResults, {
+		results,
+		t: formProps.t,
+		locale: formProps.locale
+	}) : null;
+	return /* @__PURE__ */ jsx(Form, {
+		...formProps,
+		apiRoute,
+		onSuccess: handleSuccess
+	});
+};
+//#endregion
+//#region src/react/useFormState.ts
+/** The whole form state (values, errors, warnings, touched, submitting, submitted, submitError). */
+const useFormState = () => useFormContext().state;
+//#endregion
+//#region src/react/useFormStep.ts
+/** Multi-step navigation state for the current form (single-step default when the form has no flow). */
+const useFormStep = () => useFormContext().step;
+//#endregion
+export { Backdrop, CAPTCHA_TOKEN_KEY, Checkbox, DEFAULT_HONEYPOT_FIELD, DialogSurface, FieldShell, Form, FormLayout, FormResults, Honeypot, Input, Poll, Select, Textarea, buildRecallResolver, computeCalcFields, defaultPresentations, defaultRenderers, defineFieldRenderer, evaluateCalc, evaluateCondition, fetchFormResults, firstStepId, interpolate, isTerminalStepId, resolveNextStepId, resolvePresentations, resolveRenderers, stepFieldNames, submitForm, uploadFile, useDismiss, useField, useFocusTrap, useFormState, useFormStep, useScrollLock, valuesFromSearchParams, widthProps };
+
+//# sourceMappingURL=react.js.map