@embedpdf/react 3.0.0-next.14 → 3.0.0-next.15

package/dist/form-CK3mp99m.js

@@ -1,895 +0,0 @@
-import { shallowArray, useCapability, useOptionalCapability, useOptionalSelector, 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";
-import { SignatureToken } from "@embedpdf/plugin-signature/contract";
-//#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
-		});
-		case "signature": return /* @__PURE__ */ jsx(SignatureWidget, {
-			fill,
-			item,
-			page,
-			appearance
-		});
-	}
-}
-/** The form plugin's field key → the engine ref (the inverse of `fieldKeyOf`). */
-const fieldRefOfKey = (key) => key.startsWith("obj:") ? {
-	kind: "objectNumber",
-	fieldObjectNumber: Number(key.slice(4))
-} : {
-	kind: "fqn",
-	name: key.slice(4)
-};
-/**
-* A signature field's widget: the picture (the mark drawn into it, once
-* there is one) with a click target on top. Unsigned → "sign here": the
-* field becomes the signature plugin's TARGET, so the next mark picked
-* from a signatures panel goes into it. Signed → `inspect`: the chrome shows
-* what the signature says. Without the signature plugin the widget is
-* picture only — the field plane has no fill control of its own here.
-*/
-function SignatureWidget({ fill, item, page, appearance }) {
-	const signature = useOptionalCapability(SignatureToken);
-	const wrap = useIsolated();
-	const events = useWidgetEvents(fill.key, item.ref);
-	const b = viewBox(item.box, page);
-	const ref = fieldRefOfKey(fill.key);
-	const signed = useOptionalSelector(SignatureToken, (c) => c.signatureOf(ref)?.signed ?? fill.signed, fill.signed);
-	const actionable = signature != null && (signed || !fill.disabled);
-	return /* @__PURE__ */ jsxs("div", {
-		ref: wrap,
-		...events,
-		style: {
-			position: "absolute",
-			left: b.left,
-			top: b.top,
-			width: b.width,
-			height: b.height
-		},
-		children: [/* @__PURE__ */ jsx(Picture, {
-			page,
-			appearance,
-			apBox: item.apBox,
-			frame: b
-		}), actionable ? /* @__PURE__ */ jsx("button", {
-			type: "button",
-			"aria-label": fill.label,
-			"data-signed": signed ? "" : void 0,
-			onClick: () => signed ? signature.inspect(ref) : signature.setTarget(ref),
-			style: {
-				...fillControl,
-				padding: 0,
-				border: 0,
-				background: "transparent",
-				cursor: "pointer"
-			}
-		}) : null]
-	});
-}
-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"
-			}
-		})
-	});
-}
-/** The standalone layer's signature control: the same target/inspect
-*  hand-off as {@link SignatureWidget}, over the page raster. */
-function FillSignature({ item, page }) {
-	const signature = useOptionalCapability(SignatureToken);
-	const ref = fieldRefOfKey(item.key);
-	const signed = useOptionalSelector(SignatureToken, (c) => c.signatureOf(ref)?.signed ?? item.signed, item.signed);
-	const actionable = signature != null && (signed || !item.disabled);
-	return /* @__PURE__ */ jsx(FillEventBox, {
-		item,
-		page,
-		cursor: actionable ? "pointer" : "default",
-		children: actionable ? /* @__PURE__ */ jsx("button", {
-			type: "button",
-			"aria-label": item.label,
-			"data-signed": signed ? "" : void 0,
-			onClick: () => signed ? signature.inspect(ref) : signature.setTarget(ref),
-			style: {
-				...fillControl,
-				padding: 0,
-				border: 0,
-				background: "transparent",
-				cursor: "inherit"
-			}
-		}) : null
-	});
-}
-/**
-* 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}`) : item.control === "signature" ? /* @__PURE__ */ jsx(FillSignature, {
-			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-CK3mp99m.js.map