@embedpdf/react 3.0.0-next.10 → 3.0.0-next.11

package/dist/form-BwrLFpKN.js

@@ -0,0 +1,805 @@
+import { shallowArray, useCapability, usePage, useSelector } from "./runtime.js";
+import { t as useAnnotationSelected } from "./annotation-hooks-Df8EmzDO.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { InteractionToken } from "@embedpdf/plugin-interaction/contract";
+import { FormToken } from "@embedpdf/plugin-form";
+//#region src/form-focus-ring.tsx
+/**
+* Paint the form focus indicator above baked PDF appearances and transparent
+* native controls. Putting an inset outline on the widget wrapper lets an
+* opaque child cover it, which makes rectangular checkboxes and combo boxes
+* appear unfocused even though they are active in the native Tab order.
+*/
+function FormFocusRing({ visible }) {
+	if (!visible) return null;
+	return /* @__PURE__ */ jsx("span", {
+		"aria-hidden": "true",
+		"data-embedpdf-form-focus-ring": "",
+		style: {
+			position: "absolute",
+			inset: 0,
+			zIndex: 1,
+			boxSizing: "border-box",
+			outline: "2px solid rgba(66, 133, 244, 0.8)",
+			outlineOffset: -2,
+			pointerEvents: "none"
+		}
+	});
+}
+//#endregion
+//#region src/form-listbox.tsx
+/**
+* A PDF list box needs one owner for pixels, hit-testing, and scrolling. A
+* baked /AP picture with an invisible native select cannot provide that: the
+* browser and PDF each keep an independent top-visible row. This visible
+* native control keeps a local optimistic selection while the engine write is
+* pending and synchronizes when engine truth changes, without remounting the
+* DOM node or resetting its scroll position.
+*/
+function NativeListBox({ ariaLabel, disabled, multi, options, selected, onSelect, onFocus, onBlur, style }) {
+	const [draft, setDraft] = useState(() => [...selected]);
+	const controlRef = useRef(null);
+	const selectedRef = useRef(selected);
+	selectedRef.current = selected;
+	const selectedSignature = JSON.stringify(selected);
+	useEffect(() => {
+		const control = controlRef.current;
+		if (!control) return;
+		const isolateWheel = (event) => event.stopPropagation();
+		control.addEventListener("wheel", isolateWheel);
+		return () => control.removeEventListener("wheel", isolateWheel);
+	}, []);
+	useEffect(() => {
+		setDraft([...selectedRef.current]);
+	}, [selectedSignature]);
+	const rollback = () => setDraft([...selectedRef.current]);
+	const choose = (values) => {
+		setDraft(values);
+		try {
+			const result = onSelect(values);
+			if (result) result.catch(rollback);
+		} catch {
+			rollback();
+		}
+	};
+	return /* @__PURE__ */ jsx("select", {
+		ref: controlRef,
+		"aria-label": ariaLabel,
+		multiple: multi,
+		size: Math.max(2, options.length),
+		disabled,
+		value: multi ? draft : draft[0] ?? "",
+		onFocus,
+		onBlur,
+		onChange: (event) => choose(Array.from(event.currentTarget.selectedOptions).map((option) => option.value)),
+		style,
+		children: options.map((option, index) => /* @__PURE__ */ jsx("option", {
+			value: option.value,
+			children: option.label
+		}, index))
+	});
+}
+//#endregion
+//#region src/form.tsx
+/** Content rect → a view-px box (the page wrapper's own coordinate space). */
+function viewBox(r, page) {
+	const tl = page.transform.toPixels({
+		x: r.x,
+		y: r.y
+	});
+	const br = page.transform.toPixels({
+		x: r.x + r.width,
+		y: r.y + r.height
+	});
+	return {
+		left: tl.x,
+		top: tl.y,
+		width: br.x - tl.x,
+		height: br.y - tl.y
+	};
+}
+/**
+* Keep the interaction hub out of gestures that begin inside a fill control.
+* Native listener (not React's) so it runs during real DOM bubbling, before
+* the Stage's own native listener on an ancestor — same trick as FreeText.
+*/
+function useIsolated() {
+	const ref = useRef(null);
+	useEffect(() => {
+		const el = ref.current;
+		if (!el) return;
+		const stop = (e) => e.stopPropagation();
+		el.addEventListener("pointerdown", stop);
+		return () => el.removeEventListener("pointerdown", stop);
+	}, []);
+	return ref;
+}
+/**
+* The widget DOM-event feed (Phase 2): wire one widget surface's pointer and
+* focus events to `form.notifyWidgetEvent` — the `/AA` E/X/D/U/Fo/Bl trigger
+* door. Handlers live on the ALWAYS-ACTIVE event surface, never the inner
+* control: "may edit this field" and "may receive PDF action events" are
+* different rights, and a read-only session (no `doc.forms.fill`) must still
+* see hover tooltips (session Hide needs no write authority).
+*/
+function useWidgetEvents(key, annotationRef) {
+	const form = useCapability(FormToken);
+	const refBox = useRef(annotationRef);
+	refBox.current = annotationRef;
+	return useMemo(() => {
+		const notify = (event) => {
+			const target = refBox.current;
+			if (target) form.notifyWidgetEvent(key, target, event);
+		};
+		return {
+			onPointerEnter: () => notify("cursorEnter"),
+			onPointerLeave: () => notify("cursorExit"),
+			onPointerDown: () => notify("mouseDown"),
+			onPointerUp: () => notify("mouseUp"),
+			onFocus: () => notify("focus"),
+			onBlur: () => notify("blur")
+		};
+	}, [form, key]);
+}
+/**
+* Widget ACTIVATION: a click on ANY widget runs its `/A`. ISO puts the
+* activate action on the annotation dictionary — any subtype, any field
+* type — so activation is a WIDGET behavior, not a push-button behavior:
+* real-world producers ship "buttons" as read-only text fields carrying an
+* `/A` (the Test Lab's Reset/Next/Hide controls), and Acrobat runs them.
+* A widget without an `/A` resolves inert — dispatching is the cheap,
+* honest way to ask (the dispatcher owns `/A`-vs-`/AA U` precedence).
+* Push buttons keep their own gated door: `disabled` still blocks
+* activation there — unchanged shipped semantics.
+*/
+function useWidgetActivation(key, annotationRef) {
+	const form = useCapability(FormToken);
+	const refBox = useRef(annotationRef);
+	refBox.current = annotationRef;
+	return useCallback(() => {
+		const target = refBox.current;
+		if (target) form.activateWidget(key, target);
+	}, [form, key]);
+}
+/** The baked /AP raster, blitted by its OWN box (exactly like BakedImage). */
+function Picture({ page, appearance, apBox, frame, hidden }) {
+	if (!appearance) return null;
+	const b = viewBox(apBox ?? appearance.box, page);
+	return /* @__PURE__ */ jsx("img", {
+		src: appearance.url,
+		alt: "",
+		draggable: false,
+		style: {
+			position: "absolute",
+			left: b.left - (frame?.left ?? 0),
+			top: b.top - (frame?.top ?? 0),
+			width: b.width,
+			height: b.height,
+			maxWidth: "none",
+			pointerEvents: "none",
+			visibility: hidden ? "hidden" : "visible"
+		}
+	});
+}
+/**
+* Dispatch one engaged widget to its fill control. The FIELD plane (value,
+* behavior, disabled) comes from the form plugin's single-widget projection;
+* the WIDGET plane (live box, /DA font, baked raster) rides in on the
+* renderer props — no geometry is read from the form model here.
+*/
+function FormWidget({ item, page, appearance }) {
+	const annot = item.ref?.kind === "objectNumber" ? item.ref.annotObjectNumber : 0;
+	const fill = useSelector(FormToken, (c) => annot > 0 ? c.fillItem(annot) : null);
+	if (!fill) return /* @__PURE__ */ jsx(Picture, {
+		page,
+		appearance,
+		apBox: item.apBox
+	});
+	switch (fill.control) {
+		case "text": return /* @__PURE__ */ jsx(TextWidget, {
+			fill,
+			item,
+			page,
+			appearance
+		});
+		case "toggle": return /* @__PURE__ */ jsx(ToggleWidget, {
+			fill,
+			item,
+			page,
+			appearance
+		});
+		case "choice": return /* @__PURE__ */ jsx(ChoiceWidget, {
+			fill,
+			item,
+			page,
+			appearance
+		});
+		case "button": return /* @__PURE__ */ jsx(ButtonWidget, {
+			fill,
+			item,
+			page,
+			appearance
+		});
+	}
+}
+function ButtonWidget({ fill, item, page, appearance }) {
+	const form = useCapability(FormToken);
+	const wrap = useIsolated();
+	const events = useWidgetEvents(fill.key, item.ref);
+	const b = viewBox(item.box, page);
+	return /* @__PURE__ */ jsx("div", {
+		ref: wrap,
+		...events,
+		style: {
+			position: "absolute",
+			left: b.left,
+			top: b.top,
+			width: b.width,
+			height: b.height,
+			cursor: fill.disabled ? "default" : "pointer",
+			pointerEvents: "auto"
+		},
+		children: /* @__PURE__ */ jsx("button", {
+			type: "button",
+			"aria-label": fill.label,
+			disabled: fill.disabled,
+			onClick: () => {
+				if (item.ref) form.activateWidget(fill.key, item.ref);
+			},
+			style: {
+				position: "absolute",
+				inset: 0,
+				width: "100%",
+				height: "100%",
+				boxSizing: "border-box",
+				padding: 0,
+				border: 0,
+				background: "transparent",
+				cursor: "inherit",
+				pointerEvents: fill.disabled ? "none" : "auto"
+			},
+			children: /* @__PURE__ */ jsx(Picture, {
+				page,
+				appearance,
+				apBox: item.apBox,
+				frame: b
+			})
+		})
+	});
+}
+function TextWidget({ fill, item, page, appearance }) {
+	const form = useCapability(FormToken);
+	const wrap = useIsolated();
+	const events = useWidgetEvents(fill.key, item.ref);
+	const activate = useWidgetActivation(fill.key, item.ref);
+	const [focused, setFocused] = useState(false);
+	const [draft, setDraft] = useState(fill.value);
+	const cancelled = useRef(false);
+	useEffect(() => {
+		if (!focused) setDraft(fill.value);
+	}, [fill.value, focused]);
+	const b = viewBox(item.box, page);
+	const scale = item.box.width > 0 ? b.width / item.box.width : 1;
+	const fontSize = item.text && item.text.fontSize > 0 ? item.text.fontSize * scale : fill.multiline ? 12 * scale : Math.max(6, b.height * .72);
+	const editorStyle = {
+		position: "absolute",
+		inset: 0,
+		width: "100%",
+		height: "100%",
+		boxSizing: "border-box",
+		border: "none",
+		outline: focused ? "2px solid rgba(66, 133, 244, 0.8)" : "none",
+		outlineOffset: -2,
+		padding: "0 2px",
+		margin: 0,
+		background: item.style.interiorColor ?? "#fff",
+		color: item.text?.fontColor ?? "#000",
+		fontFamily: item.text?.fontFamily ?? "Helvetica, Arial, sans-serif",
+		fontSize,
+		textAlign: item.text?.textAlign ?? "left",
+		resize: "none",
+		cursor: "text",
+		opacity: focused ? 1 : 0,
+		...fill.disabled ? { pointerEvents: "none" } : {}
+	};
+	const editorProps = {
+		value: draft,
+		maxLength: fill.maxLength ?? void 0,
+		"aria-label": fill.label,
+		disabled: fill.disabled,
+		onFocus: () => setFocused(true),
+		onChange: (e) => setDraft(e.target.value),
+		onBlur: () => {
+			setFocused(false);
+			if (cancelled.current) {
+				cancelled.current = false;
+				setDraft(fill.value);
+				return;
+			}
+			if (draft !== fill.value) form.setText(fill.key, draft);
+		},
+		style: editorStyle
+	};
+	const onKeys = (e) => {
+		if (e.key === "Escape") {
+			cancelled.current = true;
+			e.currentTarget.blur();
+		}
+		if (e.key === "Enter" && !fill.multiline) e.currentTarget.blur();
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		ref: wrap,
+		...events,
+		onClick: activate,
+		style: {
+			position: "absolute",
+			left: b.left,
+			top: b.top,
+			width: b.width,
+			height: b.height,
+			pointerEvents: "auto"
+		},
+		children: [/* @__PURE__ */ jsx(Picture, {
+			page,
+			appearance,
+			apBox: item.apBox,
+			frame: b,
+			hidden: focused
+		}), fill.multiline ? /* @__PURE__ */ jsx("textarea", {
+			...editorProps,
+			onKeyDown: onKeys
+		}) : /* @__PURE__ */ jsx("input", {
+			...editorProps,
+			type: fill.password ? "password" : "text",
+			onKeyDown: onKeys
+		})]
+	});
+}
+function ToggleWidget({ fill, item, page, appearance }) {
+	const form = useCapability(FormToken);
+	const wrap = useIsolated();
+	const events = useWidgetEvents(fill.key, item.ref);
+	const activate = useWidgetActivation(fill.key, item.ref);
+	const [focused, setFocused] = useState(false);
+	const b = viewBox(item.box, page);
+	const press = () => {
+		const flipped = fill.disabled ? void 0 : form.toggle(fill.key, fill.kind === "checkbox" && fill.checked ? null : fill.onState);
+		Promise.resolve(flipped).then(activate, activate);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		ref: wrap,
+		role: fill.kind === "checkbox" ? "checkbox" : "radio",
+		"aria-checked": fill.checked,
+		"aria-label": fill.label,
+		tabIndex: fill.disabled ? -1 : 0,
+		...events,
+		onClick: press,
+		onFocus: (e) => {
+			setFocused(true);
+			events.onFocus?.(e);
+		},
+		onBlur: (e) => {
+			setFocused(false);
+			events.onBlur?.(e);
+		},
+		onKeyDown: (e) => {
+			if (e.key === " " || e.key === "Enter") {
+				e.preventDefault();
+				press();
+			}
+		},
+		style: {
+			position: "absolute",
+			left: b.left,
+			top: b.top,
+			width: b.width,
+			height: b.height,
+			cursor: fill.disabled ? "default" : "pointer",
+			pointerEvents: "auto",
+			outline: "none"
+		},
+		children: [/* @__PURE__ */ jsx(Picture, {
+			page,
+			appearance,
+			apBox: item.apBox,
+			frame: b
+		}), /* @__PURE__ */ jsx(FormFocusRing, { visible: focused })]
+	});
+}
+function ChoiceWidget(props) {
+	return props.fill.kind === "list" ? /* @__PURE__ */ jsx(ListBoxWidget, { ...props }) : /* @__PURE__ */ jsx(ComboBoxWidget, { ...props });
+}
+function ChoiceFrame({ fill, item, page, focused, innerRef, children }) {
+	const events = useWidgetEvents(fill.key, item.ref);
+	const activate = useWidgetActivation(fill.key, item.ref);
+	const b = viewBox(item.box, page);
+	return /* @__PURE__ */ jsxs("div", {
+		ref: innerRef,
+		...events,
+		onClick: activate,
+		style: {
+			position: "absolute",
+			left: b.left,
+			top: b.top,
+			width: b.width,
+			height: b.height,
+			pointerEvents: "auto",
+			outline: "none"
+		},
+		children: [children, /* @__PURE__ */ jsx(FormFocusRing, { visible: focused })]
+	});
+}
+function ComboBoxWidget({ fill, item, page, appearance }) {
+	const form = useCapability(FormToken);
+	const wrap = useIsolated();
+	const [focused, setFocused] = useState(false);
+	const b = viewBox(item.box, page);
+	return /* @__PURE__ */ jsxs(ChoiceFrame, {
+		fill,
+		item,
+		page,
+		focused,
+		innerRef: wrap,
+		children: [/* @__PURE__ */ jsx(Picture, {
+			page,
+			appearance,
+			apBox: item.apBox,
+			frame: b
+		}), /* @__PURE__ */ jsx("select", {
+			defaultValue: fill.selected[0] ?? "",
+			"aria-label": fill.label,
+			disabled: fill.disabled,
+			onFocus: () => setFocused(true),
+			onBlur: () => setFocused(false),
+			onChange: (e) => {
+				const values = Array.from(e.currentTarget.selectedOptions).map((o) => o.value);
+				form.choose(fill.key, values);
+			},
+			style: {
+				position: "absolute",
+				inset: 0,
+				width: "100%",
+				height: "100%",
+				opacity: 0,
+				cursor: fill.disabled ? "default" : "pointer",
+				...fill.disabled ? { pointerEvents: "none" } : {}
+			},
+			children: fill.options.map((o, i) => /* @__PURE__ */ jsx("option", {
+				value: o.value,
+				children: o.label
+			}, i))
+		}, fill.selected.join("\0"))]
+	});
+}
+function ListBoxWidget({ fill, item, page }) {
+	const form = useCapability(FormToken);
+	const wrap = useIsolated();
+	const [focused, setFocused] = useState(false);
+	const b = viewBox(item.box, page);
+	const scale = item.box.width > 0 ? b.width / item.box.width : 1;
+	const strokeWidth = item.style.strokeWidth * scale;
+	const borderStyle = item.style.border.kind === "dashed" ? "dashed" : "solid";
+	return /* @__PURE__ */ jsx(ChoiceFrame, {
+		fill,
+		item,
+		page,
+		focused,
+		innerRef: wrap,
+		children: /* @__PURE__ */ jsx(NativeListBox, {
+			ariaLabel: fill.label,
+			disabled: fill.disabled,
+			multi: fill.multi,
+			options: fill.options,
+			selected: fill.selected,
+			onFocus: () => setFocused(true),
+			onBlur: () => setFocused(false),
+			onSelect: (values) => form.choose(fill.key, values),
+			style: {
+				position: "absolute",
+				inset: 0,
+				width: "100%",
+				height: "100%",
+				boxSizing: "border-box",
+				margin: 0,
+				padding: 0,
+				borderWidth: strokeWidth,
+				borderStyle,
+				borderColor: item.style.color,
+				borderRadius: 0,
+				outline: "none",
+				background: item.style.interiorColor ?? "#fff",
+				color: item.text?.fontColor ?? "#000",
+				fontFamily: item.text?.fontFamily ?? "Helvetica, Arial, sans-serif",
+				fontSize: (item.text?.fontSize || 12) * scale,
+				textAlign: item.text?.textAlign ?? "left",
+				cursor: fill.disabled ? "default" : "pointer",
+				...fill.disabled ? { pointerEvents: "none" } : {}
+			}
+		})
+	});
+}
+/**
+* The form plugin's renderer entry, ready for
+* `<AnnotationLayer renderers={[formWidgetRenderer]} />`. It answers for the
+* PLUGIN-registered 'form-widgets' Behavior — the form plugin decides when
+* widgets are fill controls vs. editable annotations, never the app.
+*/
+const formWidgetRenderer = {
+	behavior: "form-widgets",
+	component: FormWidget
+};
+const controlBase = {
+	position: "absolute",
+	boxSizing: "border-box",
+	border: "1px solid rgba(56, 88, 233, 0.55)",
+	background: "rgba(255, 255, 255, 0.92)",
+	borderRadius: 2,
+	font: "inherit"
+};
+const fillBox = (item, page) => viewBox(item.box, page);
+/** The standalone layer's event surface: positions ONE control's box and
+*  carries the /AA DOM-event feed — always pointer-active (see
+*  useWidgetEvents); the control inside fills it and self-gates edits.
+*  With `activate`, a click on the box runs the widget's /A (see
+*  useWidgetActivation — activation is a WIDGET behavior); push buttons
+*  keep their own gated inner door and do NOT set it. */
+function FillEventBox({ item, page, cursor, activate, children }) {
+	const events = useWidgetEvents(item.key, {
+		kind: "objectNumber",
+		pageObjectNumber: page.pon,
+		annotObjectNumber: item.annotObjectNumber
+	});
+	const onActivate = useWidgetActivation(item.key, {
+		kind: "objectNumber",
+		pageObjectNumber: page.pon,
+		annotObjectNumber: item.annotObjectNumber
+	});
+	const css = fillBox(item, page);
+	return /* @__PURE__ */ jsx("div", {
+		...events,
+		onClick: activate ? onActivate : void 0,
+		style: {
+			position: "absolute",
+			...css,
+			pointerEvents: "auto",
+			...cursor ? { cursor } : {}
+		},
+		children
+	});
+}
+const fillControl = {
+	position: "absolute",
+	inset: 0,
+	width: "100%",
+	height: "100%"
+};
+/** Text control: keystrokes stay LOCAL (the input is the draft store);
+*  the engine write happens on blur or Enter. */
+function FillText({ item, page }) {
+	const form = useCapability(FormToken);
+	const [draft, setDraft] = useState(item.value);
+	useEffect(() => setDraft(item.value), [item.value]);
+	const css = fillBox(item, page);
+	const fontSize = Math.max(9, Math.min(css.height * .62, 24));
+	const commit = () => {
+		if (draft !== item.value) form.setText(item.key, draft).catch(() => setDraft(item.value));
+	};
+	const shared = {
+		...controlBase,
+		...fillControl,
+		fontSize,
+		padding: "0 3px",
+		...item.comb ? { letterSpacing: css.width / Math.max(1, item.maxLength ?? 1) / 2 } : {}
+	};
+	const editorGate = item.disabled ? { pointerEvents: "none" } : {};
+	return /* @__PURE__ */ jsx(FillEventBox, {
+		item,
+		page,
+		activate: true,
+		children: item.multiline ? /* @__PURE__ */ jsx("textarea", {
+			"aria-label": item.label,
+			value: draft,
+			disabled: item.disabled,
+			onChange: (e) => setDraft(e.target.value),
+			onBlur: commit,
+			style: {
+				...shared,
+				resize: "none",
+				...editorGate
+			}
+		}) : /* @__PURE__ */ jsx("input", {
+			"aria-label": item.label,
+			type: item.password ? "password" : "text",
+			value: draft,
+			maxLength: item.maxLength ?? void 0,
+			disabled: item.disabled,
+			onChange: (e) => setDraft(e.target.value),
+			onBlur: commit,
+			onKeyDown: (e) => {
+				if (e.key === "Enter") e.target.blur();
+			},
+			style: {
+				...shared,
+				...editorGate
+			}
+		})
+	});
+}
+function FillToggle({ item, page }) {
+	const form = useCapability(FormToken);
+	const activate = useWidgetActivation(item.key, {
+		kind: "objectNumber",
+		pageObjectNumber: page.pon,
+		annotObjectNumber: item.annotObjectNumber
+	});
+	const css = fillBox(item, page);
+	const glyphSize = Math.min(css.width, css.height) * .72;
+	return /* @__PURE__ */ jsx(FillEventBox, {
+		item,
+		page,
+		cursor: item.disabled ? "default" : "pointer",
+		activate: true,
+		children: /* @__PURE__ */ jsx("button", {
+			role: item.kind,
+			"aria-checked": item.checked,
+			"aria-label": item.label,
+			disabled: item.disabled,
+			onClick: (e) => {
+				e.stopPropagation();
+				Promise.resolve(form.toggle(item.key, item.kind === "checkbox" && item.checked ? null : item.onState)).then(activate, activate);
+			},
+			style: {
+				...controlBase,
+				...fillControl,
+				cursor: "inherit",
+				display: "grid",
+				placeItems: "center",
+				padding: 0,
+				borderRadius: item.kind === "radio" ? "50%" : 2,
+				fontSize: glyphSize,
+				lineHeight: 1,
+				color: "#1f2a44",
+				...item.disabled ? { pointerEvents: "none" } : {}
+			},
+			children: item.checked ? item.kind === "radio" ? "●" : "✓" : ""
+		})
+	});
+}
+function FillChoice({ item, page }) {
+	const form = useCapability(FormToken);
+	const css = fillBox(item, page);
+	const controlGate = item.disabled ? { pointerEvents: "none" } : {};
+	if (item.kind === "list") return /* @__PURE__ */ jsx(FillEventBox, {
+		item,
+		page,
+		activate: true,
+		children: /* @__PURE__ */ jsx(NativeListBox, {
+			ariaLabel: item.label,
+			disabled: item.disabled,
+			multi: item.multi,
+			options: item.options,
+			selected: item.selected,
+			onSelect: (values) => form.choose(item.key, values),
+			style: {
+				...controlBase,
+				...fillControl,
+				fontSize: Math.max(9, Math.min(css.height * .55, 18)),
+				...controlGate
+			}
+		})
+	});
+	return /* @__PURE__ */ jsx(FillEventBox, {
+		item,
+		page,
+		activate: true,
+		children: /* @__PURE__ */ jsxs("select", {
+			"aria-label": item.label,
+			disabled: item.disabled,
+			value: item.selected[0] ?? "",
+			onChange: (e) => void form.choose(item.key, [e.target.value]),
+			style: {
+				...controlBase,
+				...fillControl,
+				fontSize: Math.max(9, Math.min(css.height * .55, 18)),
+				...controlGate
+			},
+			children: [item.selected.length === 0 && /* @__PURE__ */ jsx("option", { value: "" }), item.options.map((o) => /* @__PURE__ */ jsx("option", {
+				value: o.value,
+				children: o.label
+			}, o.value))]
+		})
+	});
+}
+function FillButton({ item, page }) {
+	const form = useCapability(FormToken);
+	return /* @__PURE__ */ jsx(FillEventBox, {
+		item,
+		page,
+		cursor: item.disabled ? "default" : "pointer",
+		children: /* @__PURE__ */ jsx("button", {
+			type: "button",
+			"aria-label": item.label,
+			disabled: item.disabled,
+			onClick: () => void form.activateWidget(item.key, {
+				kind: "objectNumber",
+				pageObjectNumber: page.pon,
+				annotObjectNumber: item.annotObjectNumber
+			}),
+			style: {
+				...controlBase,
+				...fillControl,
+				padding: 0,
+				border: 0,
+				background: "transparent",
+				cursor: "inherit",
+				pointerEvents: item.disabled ? "none" : "auto"
+			}
+		})
+	});
+}
+/**
+* Fill-mode form controls for one page, positioned from the form model's own
+* widget geometry — the ANNOTATION-LESS path (a fill-only viewer whose page
+* pixels come from an annotated RenderLayer raster). Active whenever the
+* active tool carries the 'form-fill' tag (the built-in pointer/pan tools
+* do); any other tool stands the controls down. Do not mount next to an
+* AnnotationLayer wired with `formWidgetBehaviors`.
+*/
+function FormLayer() {
+	const page = usePage();
+	const form = useCapability(FormToken);
+	const active = useSelector(InteractionToken, (c) => c.activeTool().enables.has("form-fill"));
+	useEffect(() => {
+		if (active) form.ensureGeom(page.pon);
+	}, [
+		active,
+		form,
+		page.pon
+	]);
+	const items = useSelector(FormToken, (c) => c.fillItems(page.pon), shallowArray);
+	if (!active) return null;
+	return /* @__PURE__ */ jsx("div", {
+		style: {
+			position: "absolute",
+			inset: 0
+		},
+		children: items.map((item) => item.control === "text" ? /* @__PURE__ */ jsx(FillText, {
+			item,
+			page
+		}, `${item.key}:${item.annotObjectNumber}`) : item.control === "toggle" ? /* @__PURE__ */ jsx(FillToggle, {
+			item,
+			page
+		}, `${item.key}:${item.annotObjectNumber}`) : item.control === "choice" ? /* @__PURE__ */ jsx(FillChoice, {
+			item,
+			page
+		}, `${item.key}:${item.annotObjectNumber}`) : item.control === "button" ? /* @__PURE__ */ jsx(FillButton, {
+			item,
+			page
+		}, `${item.key}:${item.annotObjectNumber}`) : null)
+	});
+}
+/** The form capability — values, interchange, design-mode verbs. */
+function useForm() {
+	return useCapability(FormToken);
+}
+/** The reconciled form snapshot (null until the first load lands),
+*  re-rendering on every form model change. */
+function useFormSnapshot() {
+	return useSelector(FormToken, (c) => c.snapshot());
+}
+/**
+* The FIELD behind the currently selected widget annotation (single
+* selection), or null. The design-mode join: widget selection lives in the
+* annotation plane, field properties live here.
+*/
+function useFormField() {
+	const selected = useAnnotationSelected();
+	const widget = selected.length === 1 && selected[0].subtype === "widget" ? selected[0] : null;
+	const objnum = widget && widget.ref.kind === "objectNumber" ? widget.ref.annotObjectNumber : 0;
+	return useSelector(FormToken, (c) => objnum > 0 ? c.fieldForWidget(objnum) : null);
+}
+//#endregion
+export { useFormSnapshot as a, useFormField as i, formWidgetRenderer as n, useForm as r, FormLayer as t };
+
+//# sourceMappingURL=form-BwrLFpKN.js.map