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

package/dist/form.js

@@ -1,545 +1,4 @@
-import { shallowArray, useCapability, useOptionalCapability, usePage, useSelector } from "./runtime.js";
-import { useAnnotationSelected } from "./annotation.js";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from "react";
-import { StageToken } from "@embedpdf/plugin-stage";
-import { InteractionToken } from "@embedpdf/plugin-interaction";
-import { FormToken } from "@embedpdf/plugin-form";
+import "./runtime.js";
+import { a as useFormSnapshot, i as useFormField, n as formWidgetRenderer, r as useForm, t as FormLayer } from "./form-BwrLFpKN.js";
 export * from "@embedpdf/plugin-form";
-//#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;
-}
-/**
-* Fulfil form-script UI requests for the active document. By default alerts use
-* the browser dialog, page navigation uses the main Stage, and print delegates
-* to the browser. Pass handlers (or one raw provider) to replace that policy.
-*/
-function useFormScriptingProvider(adapter) {
-	const form = useOptionalCapability(FormToken);
-	const stage = useOptionalCapability(StageToken);
-	const adapterRef = useRef(adapter);
-	adapterRef.current = adapter;
-	useEffect(() => {
-		if (!form) return;
-		const provider = (effect) => {
-			const current = adapterRef.current;
-			if (typeof current === "function") {
-				current(effect);
-				return;
-			}
-			switch (effect.kind) {
-				case "alert":
-					if (current?.alert) current.alert(effect.message, effect);
-					else if (typeof globalThis.alert === "function") globalThis.alert(effect.message);
-					break;
-				case "gotoPage":
-					if (current?.gotoPage) current.gotoPage(effect.page, effect);
-					else stage?.goToPage(effect.page);
-					break;
-				case "print":
-					if (current?.print) current.print(effect);
-					else if (typeof globalThis.print === "function") globalThis.print();
-					break;
-			}
-		};
-		form.setUiEffectProvider(provider);
-		return () => form.setUiEffectProvider(null);
-	}, [form, stage]);
-}
-/** 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 b = viewBox(item.box, page);
-	return /* @__PURE__ */ jsx("button", {
-		ref: wrap,
-		type: "button",
-		"aria-label": fill.label,
-		disabled: fill.disabled,
-		onClick: () => {
-			if (item.ref) form.activateWidget(fill.key, item.ref);
-		},
-		style: {
-			position: "absolute",
-			left: b.left,
-			top: b.top,
-			width: b.width,
-			height: b.height,
-			boxSizing: "border-box",
-			padding: 0,
-			border: 0,
-			background: "transparent",
-			cursor: fill.disabled ? "default" : "pointer",
-			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 [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
-	};
-	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,
-		style: {
-			position: "absolute",
-			left: b.left,
-			top: b.top,
-			width: b.width,
-			height: b.height,
-			pointerEvents: fill.disabled ? "none" : "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 [focused, setFocused] = useState(false);
-	const b = viewBox(item.box, page);
-	const toggle = () => {
-		if (fill.disabled) return;
-		form.toggle(fill.key, fill.kind === "checkbox" && fill.checked ? null : fill.onState);
-	};
-	return /* @__PURE__ */ jsx("div", {
-		ref: wrap,
-		role: fill.kind === "checkbox" ? "checkbox" : "radio",
-		"aria-checked": fill.checked,
-		"aria-label": fill.label,
-		tabIndex: fill.disabled ? -1 : 0,
-		onClick: toggle,
-		onFocus: () => setFocused(true),
-		onBlur: () => setFocused(false),
-		onKeyDown: (e) => {
-			if (e.key === " " || e.key === "Enter") {
-				e.preventDefault();
-				toggle();
-			}
-		},
-		style: {
-			position: "absolute",
-			left: b.left,
-			top: b.top,
-			width: b.width,
-			height: b.height,
-			cursor: fill.disabled ? "default" : "pointer",
-			pointerEvents: fill.disabled ? "none" : "auto",
-			outline: focused ? "2px solid rgba(66, 133, 244, 0.8)" : "none",
-			outlineOffset: -2
-		},
-		children: /* @__PURE__ */ jsx(Picture, {
-			page,
-			appearance,
-			apBox: item.apBox,
-			frame: b
-		})
-	});
-}
-function ChoiceWidget({ fill, item, page, appearance }) {
-	const form = useCapability(FormToken);
-	const wrap = useIsolated();
-	const [focused, setFocused] = useState(false);
-	const b = viewBox(item.box, page);
-	const multiple = fill.kind === "list" && fill.multi;
-	return /* @__PURE__ */ jsxs("div", {
-		ref: wrap,
-		style: {
-			position: "absolute",
-			left: b.left,
-			top: b.top,
-			width: b.width,
-			height: b.height,
-			pointerEvents: fill.disabled ? "none" : "auto",
-			outline: focused ? "2px solid rgba(66, 133, 244, 0.8)" : "none",
-			outlineOffset: -2
-		},
-		children: [/* @__PURE__ */ jsx(Picture, {
-			page,
-			appearance,
-			apBox: item.apBox,
-			frame: b
-		}), /* @__PURE__ */ jsx("select", {
-			multiple,
-			size: fill.kind === "list" ? Math.max(2, fill.options.length) : void 0,
-			defaultValue: multiple ? fill.selected : 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"
-			},
-			children: fill.options.map((o, i) => /* @__PURE__ */ jsx("option", {
-				value: o.value,
-				children: o.label
-			}, i))
-		}, fill.selected.join("\0"))]
-	});
-}
-/**
-* 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);
-/** 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,
-		...css,
-		fontSize,
-		padding: "0 3px",
-		...item.comb ? { letterSpacing: css.width / Math.max(1, item.maxLength ?? 1) / 2 } : {}
-	};
-	return 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"
-		}
-	}) : /* @__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
-	});
-}
-function FillToggle({ item, page }) {
-	const form = useCapability(FormToken);
-	const css = fillBox(item, page);
-	const glyphSize = Math.min(css.width, css.height) * .72;
-	return /* @__PURE__ */ jsx("button", {
-		role: item.kind,
-		"aria-checked": item.checked,
-		"aria-label": item.label,
-		disabled: item.disabled,
-		onClick: () => void form.toggle(item.key, item.kind === "checkbox" && item.checked ? null : item.onState),
-		style: {
-			...controlBase,
-			...css,
-			cursor: item.disabled ? "default" : "pointer",
-			display: "grid",
-			placeItems: "center",
-			padding: 0,
-			borderRadius: item.kind === "radio" ? "50%" : 2,
-			fontSize: glyphSize,
-			lineHeight: 1,
-			color: "#1f2a44"
-		},
-		children: item.checked ? item.kind === "radio" ? "●" : "✓" : ""
-	});
-}
-function FillChoice({ item, page }) {
-	const form = useCapability(FormToken);
-	const css = fillBox(item, page);
-	return /* @__PURE__ */ jsxs("select", {
-		"aria-label": item.label,
-		multiple: item.multi,
-		disabled: item.disabled,
-		value: item.multi ? item.selected : item.selected[0] ?? "",
-		onChange: (e) => {
-			const values = item.multi ? Array.from(e.target.selectedOptions).map((o) => o.value) : [e.target.value];
-			form.choose(item.key, values);
-		},
-		style: {
-			...controlBase,
-			...css,
-			fontSize: Math.max(9, Math.min(css.height * .55, 18))
-		},
-		children: [!item.multi && 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);
-	const css = fillBox(item, page);
-	return /* @__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,
-			...css,
-			padding: 0,
-			border: 0,
-			background: "transparent",
-			cursor: item.disabled ? "default" : "pointer"
-		}
-	});
-}
-/**
-* 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 { FormLayer, formWidgetRenderer, useForm, useFormField, useFormScriptingProvider, useFormSnapshot };
-
-//# sourceMappingURL=form.js.map
+export { FormLayer, formWidgetRenderer, useForm, useFormField, useFormSnapshot };

package/dist/index.cjs

@@ -8,14 +8,17 @@ const require_page_view = require("./page-view.cjs");
 const require_render = require("./render.cjs");
 const require_interaction = require("./interaction.cjs");
 const require_selection = require("./selection.cjs");
+const require_annotation_anchors = require("./annotation-anchors-DuYRBJLl.cjs");
+const require_annotation_hooks = require("./annotation-hooks-BB5ZhPpf.cjs");
 const require_annotation = require("./annotation.cjs");
 const require_annotation_menu = require("./annotation-menu.cjs");
 const require_link = require("./link.cjs");
+const require_actions = require("./actions.cjs");
 const require_views = require("./views.cjs");
 const require_page_edit = require("./page-edit.cjs");
 const require_metadata = require("./metadata.cjs");
 const require_redaction = require("./redaction.cjs");
-const require_form = require("./form.cjs");
+const require_form = require("./form-D-ZSfGmB.cjs");
 const require_search = require("./search.cjs");
 const require_stamp = require("./stamp.cjs");
 const require_i18n = require("./i18n.cjs");
@@ -55,19 +58,27 @@ Object.defineProperty(exports, "copySelection", {
 exports.createClickCounter = require_interaction.createClickCounter;
 exports.enrichCommentThreads = require_annotation.enrichCommentThreads;
 exports.filePickerProvider = require_annotation.filePickerProvider;
+Object.defineProperty(exports, "indexedDbByteStore", {
+	enumerable: true,
+	get: function() {
+		return _embedpdf_web.indexedDbByteStore;
+	}
+});
 exports.isMacPlatform = require_commands.isMacPlatform;
 exports.makePageContext = require_runtime.makePageContext;
 exports.openLinkTarget = require_link.openLinkTarget;
-exports.sameAnchor = require_annotation.sameAnchor;
-exports.sameCreationDraftAnchor = require_annotation.sameCreationDraftAnchor;
+exports.sameAnchor = require_annotation_anchors.sameAnchor;
+exports.sameCreationDraftAnchor = require_annotation_anchors.sameCreationDraftAnchor;
 exports.shallowArray = require_runtime.shallowArray;
+exports.useActionsUiAdapter = require_actions.useActionsUiAdapter;
 exports.useActiveDocumentId = require_runtime.useActiveDocumentId;
 exports.useAnnotation = require_annotation.useAnnotation;
 exports.useAnnotationDefaults = require_annotation.useAnnotationDefaults;
-exports.useAnnotationSelected = require_annotation.useAnnotationSelected;
+exports.useAnnotationSelected = require_annotation_hooks.useAnnotationSelected;
 exports.useAnnotationSelection = require_annotation.useAnnotationSelection;
 exports.useArmStampAsset = require_stamp.useArmStampAsset;
 exports.useCapability = require_runtime.useCapability;
+exports.useCapabilityEvent = require_runtime.useCapabilityEvent;
 exports.useCommand = require_commands.useCommand;
 exports.useCommandShortcuts = require_commands.useCommandShortcuts;
 exports.useCommands = require_commands.useCommands;
@@ -81,7 +92,6 @@ exports.useDocuments = require_runtime.useDocuments;
 exports.useFilePickerProvider = require_annotation.useFilePickerProvider;
 exports.useForm = require_form.useForm;
 exports.useFormField = require_form.useFormField;
-exports.useFormScriptingProvider = require_form.useFormScriptingProvider;
 exports.useI18n = require_i18n.useI18n;
 exports.useKernel = require_runtime.useKernel;
 exports.useKernelValue = require_runtime.useKernelValue;
@@ -150,21 +160,21 @@ Object.keys(_embedpdf_plugin_stage).forEach(function(k) {
 		}
 	});
 });
-var _embedpdf_plugin_interaction = require("@embedpdf/plugin-interaction");
-Object.keys(_embedpdf_plugin_interaction).forEach(function(k) {
+var _embedpdf_plugin_render = require("@embedpdf/plugin-render");
+Object.keys(_embedpdf_plugin_render).forEach(function(k) {
 	if (k !== "default" && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
 		enumerable: true,
 		get: function() {
-			return _embedpdf_plugin_interaction[k];
+			return _embedpdf_plugin_render[k];
 		}
 	});
 });
-var _embedpdf_plugin_render = require("@embedpdf/plugin-render");
-Object.keys(_embedpdf_plugin_render).forEach(function(k) {
+var _embedpdf_plugin_interaction = require("@embedpdf/plugin-interaction");
+Object.keys(_embedpdf_plugin_interaction).forEach(function(k) {
 	if (k !== "default" && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
 		enumerable: true,
 		get: function() {
-			return _embedpdf_plugin_render[k];
+			return _embedpdf_plugin_interaction[k];
 		}
 	});
 });