@embedpdf/react 3.0.0-next.0

package/dist/annotation-Ct6dFtzJ.cjs

@@ -0,0 +1,913 @@
+const require_rolldown_runtime = require("./rolldown-runtime-DDXJien1.cjs");
+const require_runtime = require("./runtime.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react, 1);
+let _embedpdf_web = require("@embedpdf/web");
+let _embedpdf_plugin_annotation = require("@embedpdf/plugin-annotation");
+let react_dom = require("react-dom");
+let _embedpdf_plugin_annotation_internal = require("@embedpdf/plugin-annotation/internal");
+let _embedpdf_core_annotation = require("@embedpdf/core-annotation");
+//#region src/internal/annotation-menu-position.ts
+/**
+* Place an upright menu around `box` (screen px). `knob` is the rotate handle's
+* screen point, when the selection has one: the menu extends ONLY the edge it
+* sits on, and ONLY when the knob protrudes past that edge — so it clears the
+* handle without ever shifting off-centre on the other axis. When the knob is on
+* another side (e.g. a 90deg shape, knob at mid-height for a `top` menu) the edge
+* is untouched and the menu stays centred on `box`.
+*/
+function positionMenuAroundRect(box, placement, gap, knob) {
+	const cx = box.x + box.width / 2;
+	const cy = box.y + box.height / 2;
+	switch (placement) {
+		case "bottom": return {
+			left: cx,
+			top: Math.max(box.y + box.height, knob ? knob.y : -Infinity) + gap,
+			transform: "translate(-50%, 0)"
+		};
+		case "left": return {
+			left: Math.min(box.x, knob ? knob.x : Infinity) - gap,
+			top: cy,
+			transform: "translate(-100%, -50%)"
+		};
+		case "right": return {
+			left: Math.max(box.x + box.width, knob ? knob.x : -Infinity) + gap,
+			top: cy,
+			transform: "translate(0, -50%)"
+		};
+		default: return {
+			left: cx,
+			top: Math.min(box.y, knob ? knob.y : Infinity) - gap,
+			transform: "translate(-50%, -100%)"
+		};
+	}
+}
+//#endregion
+//#region src/annotation.tsx
+/** `#rrggbb` → `rgba(...)` — the marquee's translucent fill derives from the
+*  accent, so one `setChrome({ accent })` restyles every piece of chrome. */
+const rgba = (hex, alpha) => {
+	const m = /^#?([0-9a-f]{6})$/i.exec(hex);
+	if (!m) return hex;
+	const n = parseInt(m[1], 16);
+	return `rgba(${n >> 16 & 255},${n >> 8 & 255},${n & 255},${alpha})`;
+};
+/** Content rect → a view-px box (the page wrapper's own coordinate space). */
+function boxOf(r, page) {
+	const tl = page.transform.pageToContent({
+		x: r.x,
+		y: r.y
+	});
+	const br = page.transform.pageToContent({
+		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
+	};
+}
+/** Map a core `Paint` to SVG presentation attributes — the whole framework-facing
+*  surface. Everything else about appearance is decided in the core's `scene`. */
+function paintAttrs(p) {
+	return {
+		fill: p.fill ?? "none",
+		stroke: p.stroke ?? "none",
+		strokeWidth: p.width,
+		opacity: p.opacity,
+		strokeLinejoin: p.join ?? "miter",
+		strokeMiterlimit: _embedpdf_core_annotation.MITER_LIMIT,
+		strokeLinecap: p.cap,
+		strokeDasharray: p.dash ? p.dash.join(" ") : void 0,
+		...p.blend ? { style: { mixBlendMode: p.blend } } : {}
+	};
+}
+/**
+* The dumb painter. The pure core computed `item.box` and the painted `scene`; we
+* size the <svg> to the box with a content-space `viewBox` and map each SceneNode
+* to one element, applying its `paint`. No per-kind logic, no bounds math — so
+* shapes, cloudy borders and every text-markup type all render here, and a Vue /
+* Svelte painter is the same ~10-line loop.
+*/
+function Shape({ item, page }) {
+	if (item.box.width <= 0 || item.box.height <= 0) return null;
+	const { left, top, width, height } = boxOf(item.box, page);
+	const vb = `${item.box.x} ${item.box.y} ${item.box.width} ${item.box.height}`;
+	const rot = item.geom.t === "rect" ? item.rot ?? 0 : 0;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+		viewBox: vb,
+		style: {
+			position: "absolute",
+			left,
+			top,
+			width,
+			height,
+			overflow: "visible",
+			pointerEvents: "none",
+			...rot ? {
+				transform: `rotate(${rot}deg)`,
+				transformOrigin: "center"
+			} : {}
+		},
+		children: sceneNodes(item)
+	});
+}
+/** Map a core scene to SVG children. */
+function sceneNodes(item) {
+	return (0, _embedpdf_core_annotation.scene)(item).map((n, i) => {
+		const a = paintAttrs(n.paint);
+		if (n.kind === "rect") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("rect", {
+			x: n.rect.x,
+			y: n.rect.y,
+			width: n.rect.width,
+			height: n.rect.height,
+			...a
+		}, i);
+		if (n.kind === "ellipse") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ellipse", {
+			cx: n.rect.x + n.rect.width / 2,
+			cy: n.rect.y + n.rect.height / 2,
+			rx: n.rect.width / 2,
+			ry: n.rect.height / 2,
+			...a
+		}, i);
+		if (n.kind === "line") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("line", {
+			x1: n.a.x,
+			y1: n.a.y,
+			x2: n.b.x,
+			y2: n.b.y,
+			...a
+		}, i);
+		if (n.kind === "path") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+			d: n.d,
+			...a
+		}, i);
+		if (n.kind === "text") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("text", {
+			x: n.at.x,
+			y: n.at.y,
+			fontSize: n.fontSize,
+			...n.fontFamily ? { fontFamily: n.fontFamily } : {},
+			...a,
+			children: n.text
+		}, i);
+		const pts = n.points.map((p) => `${p.x},${p.y}`).join(" ");
+		return n.closed ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("polygon", {
+			points: pts,
+			...a
+		}, i) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("polyline", {
+			points: pts,
+			...a
+		}, i);
+	});
+}
+function BakedImage({ box, url, page, blend, rot }) {
+	const b = boxOf(box, page);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+		src: url,
+		alt: "",
+		draggable: false,
+		style: {
+			position: "absolute",
+			left: b.left,
+			top: b.top,
+			width: b.width,
+			height: b.height,
+			maxWidth: "none",
+			maxHeight: "none",
+			pointerEvents: "none",
+			mixBlendMode: blend,
+			...rot ? {
+				transform: `rotate(${rot}deg)`,
+				transformOrigin: "center"
+			} : {}
+		}
+	});
+}
+/**
+* The armed stamp's IMAGE footprint ghost: a translucent render of the payload
+* drawn in the EXACT box a click would place it (the plugin computes it with
+* the same fit + clamp as placement). Vector footprint ghosts never reach this
+* component — they ride `pageItems` like every draft preview. The preview
+* bytes live in the capability closure; this layer owns only the object-URL
+* lifetime, keyed on the arm epoch — a new arm swaps the image, a disarm (or
+* tool change) drops it.
+*/
+function ToolGhostImage({ page }) {
+	const anno = require_runtime.useCapability(_embedpdf_plugin_annotation_internal.AnnotationToken);
+	const ghost = require_runtime.useSelector(_embedpdf_plugin_annotation_internal.AnnotationToken, (c) => c.toolGhost(page.pon));
+	const epoch = require_runtime.useSelector(_embedpdf_plugin_annotation_internal.AnnotationToken, (c) => c.stampArmEpoch());
+	const [url, setUrl] = (0, react.useState)(null);
+	(0, react.useEffect)(() => {
+		const preview = anno.armedStampPreview();
+		if (!preview) {
+			setUrl(null);
+			return;
+		}
+		const body = new ArrayBuffer(preview.bytes.byteLength);
+		new Uint8Array(body).set(preview.bytes);
+		const blob = new Blob([body], preview.mimeType ? { type: preview.mimeType } : {});
+		const obj = URL.createObjectURL(blob);
+		setUrl(obj);
+		return () => {
+			URL.revokeObjectURL(obj);
+			setUrl(null);
+		};
+	}, [anno, epoch]);
+	if (!ghost || ghost.kind !== "image" || !url) return null;
+	const b = boxOf(ghost.box, page);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+		src: url,
+		alt: "",
+		draggable: false,
+		style: {
+			position: "absolute",
+			left: b.left,
+			top: b.top,
+			width: b.width,
+			height: b.height,
+			maxWidth: "none",
+			maxHeight: "none",
+			pointerEvents: "none",
+			opacity: .5,
+			...ghost.rot ? {
+				transform: `rotate(${ghost.rot}deg)`,
+				transformOrigin: "center"
+			} : {}
+		}
+	});
+}
+function Chrome({ page }) {
+	const scale = page.transform.viewScale;
+	const rotation = page.transform.rotation;
+	const zoom = page.transform.zoom;
+	const nodes = require_runtime.useSelector(_embedpdf_plugin_annotation_internal.AnnotationToken, (c) => c.chrome(page.pon, scale, rotation, zoom), require_runtime.shallowArray);
+	const cs = require_runtime.useSelector(_embedpdf_plugin_annotation_internal.AnnotationToken, (c) => c.chromeSettings());
+	const outlineStroke = cs.outline.color ?? cs.accent;
+	const handleStroke = cs.handles.stroke ?? cs.accent;
+	const knobStroke = cs.knob.stroke ?? cs.accent;
+	const outlineDash = cs.outline.style === "dashed" ? "4 3" : void 0;
+	const chip = nodes.find((n) => n.kind === "angle-chip");
+	const chipAt = chip ? page.transform.pageToContent(chip.at) : null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+		style: {
+			position: "absolute",
+			inset: 0,
+			overflow: "visible",
+			pointerEvents: "none"
+		},
+		children: nodes.map((n, i) => {
+			if (n.kind === "angle-chip") return null;
+			if (n.kind === "handle") {
+				const p = page.transform.pageToContent(n.at);
+				const hs = cs.handles.size;
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("rect", {
+					x: p.x - hs / 2,
+					y: p.y - hs / 2,
+					width: hs,
+					height: hs,
+					fill: cs.handles.fill,
+					stroke: handleStroke,
+					strokeWidth: 1.5,
+					...n.rot ? { transform: `rotate(${n.rot} ${p.x} ${p.y})` } : {}
+				}, i);
+			}
+			if (n.kind === "guide") {
+				const a = page.transform.pageToContent(n.axis === "x" ? {
+					x: n.at,
+					y: n.lo
+				} : {
+					x: n.lo,
+					y: n.at
+				});
+				const b = page.transform.pageToContent(n.axis === "x" ? {
+					x: n.at,
+					y: n.hi
+				} : {
+					x: n.hi,
+					y: n.at
+				});
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("line", {
+					x1: a.x,
+					y1: a.y,
+					x2: b.x,
+					y2: b.y,
+					stroke: "#e91e63",
+					strokeWidth: 1.5,
+					shapeRendering: "crispEdges"
+				}, i);
+			}
+			if (n.kind === "obb") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("polygon", {
+				points: n.corners.map((c) => {
+					const p = page.transform.pageToContent(c);
+					return `${p.x},${p.y}`;
+				}).join(" "),
+				fill: "none",
+				stroke: outlineStroke,
+				strokeWidth: cs.outline.width,
+				strokeDasharray: outlineDash
+			}, i);
+			if (n.kind === "rotate-guides") {
+				const guideDash = cs.guides.style === "dashed" ? "4 3" : void 0;
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("g", { children: n.lines.map((l, j) => {
+					const a = page.transform.pageToContent(l.a);
+					const b = page.transform.pageToContent(l.b);
+					const axis = l.role === "axis";
+					return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("line", {
+						x1: a.x,
+						y1: a.y,
+						x2: b.x,
+						y2: b.y,
+						stroke: axis ? cs.guides.axisColor ?? cs.accent : cs.guides.indicatorColor ?? cs.accent,
+						opacity: axis ? cs.guides.axisOpacity : cs.guides.indicatorOpacity,
+						strokeWidth: cs.guides.width,
+						strokeDasharray: guideDash
+					}, j);
+				}) }, i);
+			}
+			if (n.kind === "rotate-knob") {
+				const at = page.transform.pageToContent(n.at);
+				const from = page.transform.pageToContent(n.from);
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("g", { children: [cs.knob.stalk && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("line", {
+					x1: from.x,
+					y1: from.y,
+					x2: at.x,
+					y2: at.y,
+					stroke: knobStroke,
+					strokeWidth: 1
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+					cx: at.x,
+					cy: at.y,
+					r: cs.knob.size / 2,
+					fill: cs.knob.fill,
+					stroke: knobStroke,
+					strokeWidth: 1.5
+				})] }, i);
+			}
+			const b = boxOf(n.rect, page);
+			if (n.kind === "marquee") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("rect", {
+				x: b.left,
+				y: b.top,
+				width: b.width,
+				height: b.height,
+				fill: rgba(cs.accent, .08),
+				stroke: cs.accent,
+				strokeWidth: 1,
+				strokeDasharray: "4 3"
+			}, i);
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("rect", {
+				x: b.left,
+				y: b.top,
+				width: b.width,
+				height: b.height,
+				fill: "none",
+				stroke: outlineStroke,
+				strokeWidth: cs.outline.width,
+				strokeDasharray: outlineDash
+			}, i);
+		})
+	}), chip && chipAt && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		style: {
+			position: "absolute",
+			left: chipAt.x + 16,
+			top: chipAt.y - 28,
+			background: "rgba(0,0,0,0.8)",
+			color: "#fff",
+			padding: "2px 6px",
+			borderRadius: 4,
+			fontSize: 12,
+			fontFamily: "monospace",
+			pointerEvents: "none",
+			whiteSpace: "nowrap",
+			zIndex: 1
+		},
+		children: [chip.angle, "°"]
+	})] });
+}
+/**
+* A free-text annotation: the SAME styled element for viewing and editing —
+* `contentEditable` just toggles, so the text never jumps. The plugin handed us a
+* ready-to-spread style (`item.css`); the browser owns layout, caret, selection,
+* IME and clipboard; the plugin owns the text truth + the debounced engine write.
+* This component is the ENTIRE per-framework surface for text editing.
+*/
+function FreeText({ item, page }) {
+	const anno = require_runtime.useCapability(_embedpdf_plugin_annotation_internal.AnnotationToken);
+	const ref = react.useRef(null);
+	const box = boxOf(item.box, page);
+	const scale = item.box.width > 0 ? box.width / item.box.width : 1;
+	(0, react.useEffect)(() => {
+		const el = ref.current;
+		if (el && document.activeElement !== el && el.innerText !== item.contents) el.innerText = item.contents;
+	}, [item.contents, item.editing]);
+	(0, react.useEffect)(() => {
+		if (item.editing) ref.current?.focus();
+	}, [item.editing]);
+	(0, react.useEffect)(() => {
+		const el = ref.current;
+		if (!el) return;
+		const stop = (e) => e.stopPropagation();
+		el.addEventListener("pointerdown", stop);
+		return () => el.removeEventListener("pointerdown", stop);
+	}, []);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		ref,
+		contentEditable: item.editing,
+		suppressContentEditableWarning: true,
+		onInput: () => item.ref && anno.setContents(item.ref, ref.current.innerText),
+		onBlur: (e) => {
+			if (e.relatedTarget == null && ref.current?.isConnected && anno.currentEditing() === item.id) ref.current.focus();
+		},
+		onPaste: (e) => {
+			e.preventDefault();
+			document.execCommand("insertText", false, e.clipboardData.getData("text/plain"));
+		},
+		style: {
+			position: "absolute",
+			left: box.left,
+			top: box.top,
+			width: box.width,
+			height: box.height,
+			fontFamily: item.css.fontFamily,
+			fontSize: item.css.fontSize * scale,
+			lineHeight: `${item.css.lineHeight * scale}px`,
+			color: item.css.color,
+			textAlign: item.css.align,
+			padding: item.css.padding * scale,
+			boxSizing: "border-box",
+			background: item.css.background ?? "transparent",
+			whiteSpace: "pre-wrap",
+			overflowWrap: "break-word",
+			overflowY: item.editing ? "auto" : "hidden",
+			overflowX: "hidden",
+			outline: item.editing ? "1px solid #3858e9" : "none",
+			cursor: item.editing ? "text" : "default",
+			...item.rot ? {
+				transform: `rotate(${item.rot}deg)`,
+				transformOrigin: "center"
+			} : {},
+			pointerEvents: item.editing ? "auto" : "none"
+		}
+	});
+}
+/**
+* Auto-registered behaviors for `interactive` renderer entries — refcounted
+* per (capability, entry) because the layer mounts once PER PAGE: the first
+* page registers, the last unregisters. Entry identity is the key, hence the
+* "define entries outside render" rule on {@link AnnotationRenderer}.
+*/
+const autoBehaviors = /* @__PURE__ */ new WeakMap();
+let autoBehaviorSeq = 0;
+function useAutoBehaviors(anno, renderers) {
+	(0, react.useEffect)(() => {
+		if (!renderers) return;
+		const released = [];
+		for (const r of renderers) {
+			if (!("for" in r) || !r.interactive) continue;
+			let perCap = autoBehaviors.get(anno);
+			if (!perCap) autoBehaviors.set(anno, perCap = /* @__PURE__ */ new Map());
+			let rec = perCap.get(r);
+			if (!rec) {
+				const id = r.id ?? `renderer:${++autoBehaviorSeq}`;
+				const engaged = typeof r.interactive === "function" ? r.interactive : () => true;
+				rec = {
+					id,
+					count: 0,
+					unregister: anno.registerBehavior({
+						id,
+						matches: r.for,
+						engaged
+					})
+				};
+				perCap.set(r, rec);
+			}
+			rec.count++;
+			const owned = rec;
+			released.push(() => {
+				owned.count--;
+				if (owned.count === 0) {
+					owned.unregister();
+					autoBehaviors.get(anno)?.delete(r);
+				}
+			});
+		}
+		return () => released.forEach((f) => f());
+	}, [anno, renderers]);
+}
+/** The behavior id a renderer entry answers for (plugin-owned or auto-registered). */
+function rendererBehaviorId(anno, r) {
+	if ("behavior" in r) return r.behavior;
+	return autoBehaviors.get(anno)?.get(r)?.id ?? null;
+}
+/** React 18 spells the `inert` attribute as a string spread; it hard-disables
+*  pointer AND focus for the whole subtree — the mechanical guarantee that a
+*  non-interactive renderer entry (a skin) can never steal input. */
+const INERT = { inert: "" };
+function AnnotationLayer({ renderers } = {}) {
+	const page = require_runtime.usePage();
+	const anno = require_runtime.useCapability(_embedpdf_plugin_annotation_internal.AnnotationToken);
+	const viewZoom = page.transform.zoom;
+	const viewRotation = page.transform.rotation;
+	const items = require_runtime.useSelector(_embedpdf_plugin_annotation_internal.AnnotationToken, (c) => c.pageItems(page.pon, {
+		zoom: viewZoom,
+		rotation: viewRotation
+	}), require_runtime.shallowArray);
+	const texts = require_runtime.useSelector(_embedpdf_plugin_annotation_internal.AnnotationToken, (c) => c.textItems(page.pon, {
+		zoom: viewZoom,
+		rotation: viewRotation
+	}), require_runtime.shallowArray);
+	const [urls, setUrls] = (0, react.useState)({});
+	useAutoBehaviors(anno, renderers);
+	(0, react.useEffect)(() => {
+		anno.ensurePage(page.pon);
+	}, [anno, page.pon]);
+	const bakedKey = require_runtime.useSelector(_embedpdf_plugin_annotation_internal.AnnotationToken, (c) => c.appearanceEpoch(page.pon));
+	const bakeScale = require_runtime.useSelector(_embedpdf_plugin_annotation_internal.AnnotationToken, (c) => c.bakeScale(page.transform.renderScale));
+	(0, react.useEffect)(() => {
+		const controller = new AbortController();
+		const revokers = [];
+		(async () => {
+			try {
+				const imgs = await anno.appearances(page.pon, bakeScale, controller.signal);
+				const map = {};
+				for (const ap of imgs) {
+					const box = anno.toContentBox(page.pon, ap.rect);
+					if (!box) continue;
+					const obj = await ap.image.objectUrl(controller.signal);
+					if (controller.signal.aborted) {
+						obj.revoke();
+						return;
+					}
+					revokers.push(obj.revoke);
+					map[(0, _embedpdf_plugin_annotation.refKey)(ap.ref)] = {
+						url: obj.url,
+						box
+					};
+				}
+				if (!controller.signal.aborted) setUrls(map);
+			} catch {}
+		})();
+		return () => {
+			controller.abort();
+			revokers.forEach((r) => r());
+		};
+	}, [
+		anno,
+		page.pon,
+		bakeScale,
+		bakedKey
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		style: {
+			position: "absolute",
+			inset: 0,
+			pointerEvents: "none"
+		},
+		children: [
+			items.map((item) => {
+				const baked = urls[item.id];
+				const native = item.source === "baked" ? baked ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BakedImage, {
+					box: item.apBox ?? baked.box,
+					url: baked.url,
+					page,
+					blend: item.blend,
+					rot: item.apRot
+				}) : null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Shape, {
+					item,
+					page
+				});
+				const behavior = anno.behaviorFor({
+					subtype: item.subtype,
+					ref: item.ref
+				});
+				let out;
+				if (behavior) {
+					const entry = renderers?.find((r) => rendererBehaviorId(anno, r) === behavior.id);
+					if (entry) {
+						const Owner = entry.component;
+						out = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Owner, {
+							item,
+							page,
+							appearance: baked ?? null,
+							native,
+							interactive: true
+						});
+					} else out = null;
+				} else {
+					const entry = renderers?.find((r) => "for" in r && r.for({
+						subtype: item.subtype,
+						ref: item.ref
+					}));
+					if (entry) {
+						const Skin = entry.component;
+						out = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							...INERT,
+							style: { pointerEvents: "none" },
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Skin, {
+								item,
+								page,
+								appearance: baked ?? null,
+								native,
+								interactive: false
+							})
+						});
+					} else out = native;
+				}
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react.Fragment, { children: out }, item.id);
+			}),
+			texts.map((t) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FreeText, {
+				item: t,
+				page
+			}, t.id)),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolGhostImage, { page }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Chrome, { page })
+		]
+	});
+}
+/**
+* The default file-picker provider: the built-in file dialog (from
+* `@embedpdf/web`), honouring the tool's `accept` filter. This is the ADAPTER
+* fulfilling the plugin's DOM-free port — the dialog lives here, in the
+* framework layer, never in the plugin. A picked `File` carries its own name
+* and mime, so it goes straight through as the engine's file source.
+*/
+const filePickerProvider = async (req) => {
+	const file = await (0, _embedpdf_web.pickFile)({ accept: req.accept ?? "*/*" });
+	return file ? { data: file } : null;
+};
+/**
+* Install the file-picker provider for the active document — the ONE port
+* behind every click-then-pick tool (a stamp `'prompt'` source, the file-
+* attachment tool). Call ONCE at a document-scoped spot (not inside
+* `<AnnotationLayer>`, which is per page). Defaults to
+* {@link filePickerProvider}, so a bare `useFilePickerProvider()` makes all of
+* them work out of the box; pass a custom provider (asset library, cloud
+* drive — switch on `req.subtype` / `req.toolId`) or `null` to make
+* click-then-pick tools inert. Cleared on unmount.
+*/
+function useFilePickerProvider(provider = filePickerProvider) {
+	const anno = require_runtime.useOptionalCapability(_embedpdf_plugin_annotation.AnnotationToken);
+	(0, react.useEffect)(() => {
+		if (!anno) return;
+		anno.setFilePickerProvider(provider);
+		return () => anno.setFilePickerProvider(null);
+	}, [anno, provider]);
+}
+function useAnnotation() {
+	return require_runtime.useCapability(_embedpdf_plugin_annotation.AnnotationToken);
+}
+function useAnnotationSelection() {
+	return require_runtime.useSelector(_embedpdf_plugin_annotation.AnnotationToken, (c) => c.selection(), require_runtime.shallowArray);
+}
+/** The selected annotations as engine DTOs — for selection-aware toolbars/sidebars. */
+function useAnnotationSelected() {
+	return require_runtime.useSelector(_embedpdf_plugin_annotation.AnnotationToken, (c) => c.getSelected(), require_runtime.shallowArray);
+}
+/** Structural equality for a resolved props bag — keeps the subscription from
+*  re-rendering on unrelated dispatches, since `currentDefaults` returns a fresh
+*  object each call. Small flat objects; JSON compare is exact and cheap here. */
+const sameProps = (a, b) => a === b || JSON.stringify(a) === JSON.stringify(b);
+/**
+* A tool's RESOLVED defaults (base + per-tool override) as a full flat props
+* bag, subscribed so a `setDefaults` re-renders the consumer. Use this — not the
+* imperative `useAnnotation().currentDefaults(id)` — to drive default-editing
+* controls, so they reflect changes live. Pair with `propsForTool(id)` for the
+* specs to render.
+*/
+function useAnnotationDefaults(toolId) {
+	return require_runtime.useSelector(_embedpdf_plugin_annotation.AnnotationToken, (c) => c.currentDefaults(toolId), sameProps);
+}
+/**
+* The selection's editable properties — ordered specs shared by every selected
+* kind, current values, and which keys are mixed. THE hook a property sidebar
+* renders from; write back with `useAnnotation().updateSelection({ [key]: v })`.
+* Reference-stable between model changes (the capability memoizes by model
+* identity), so the default equality is enough.
+*/
+function useSelectionProps() {
+	return require_runtime.useSelector(_embedpdf_plugin_annotation.AnnotationToken, (c) => c.getSelectionProps());
+}
+/**
+* The selection's `/F` annotation flags — per-flag `true`/`false`, `null` where
+* the selected annotations disagree (render an indeterminate control), `null`
+* overall when nothing is selected. Write back with
+* `useAnnotation().updateSelectionFlags({ locked: true })`. Reference-stable
+* between model changes, like {@link useSelectionProps}.
+*/
+function useSelectionFlags() {
+	return require_runtime.useSelector(_embedpdf_plugin_annotation.AnnotationToken, (c) => c.getSelectionFlags());
+}
+/** Structural equality for the selection anchor — keeps the menu from re-rendering
+*  on unrelated dispatches (the capability returns a fresh object each call). */
+function sameAnchor(a, b) {
+	if (a === b) return true;
+	if (!a || !b) return false;
+	return a.pon === b.pon && a.bounds.x === b.bounds.x && a.bounds.y === b.bounds.y && a.bounds.width === b.bounds.width && a.bounds.height === b.bounds.height && a.knob?.x === b.knob?.x && a.knob?.y === b.knob?.y;
+}
+function sameCreationDraftAnchor(a, b) {
+	if (a === b) return true;
+	if (!a || !b) return false;
+	return a.kind === b.kind && a.subtype === b.subtype && a.pon === b.pon && a.pointCount === b.pointCount && a.minPoints === b.minPoints && a.canFinish === b.canFinish && a.bounds.x === b.bounds.x && a.bounds.y === b.bounds.y && a.bounds.width === b.bounds.width && a.bounds.height === b.bounds.height;
+}
+/**
+* The Stage-FREE selection menu, for `<PageView>` (no camera). It transforms a
+* selected content rect to client px via `page.toClientRect`, then renders an
+* UPRIGHT menu through a portal to
+* `document.body` (so it never rotates with the page nor clips at a container
+* edge). Re-measures on scroll/resize. For `<Stage>`, prefer `<AnnotationMenu>`
+* from `@embedpdf/react/annotation-menu` (camera-driven, more responsive).
+*/
+function PageAnnotationMenu({ children, gap = 8, placement = "top" }) {
+	const page = require_runtime.usePage();
+	const anno = require_runtime.useCapability(_embedpdf_plugin_annotation_internal.AnnotationToken);
+	const anchor = require_runtime.useSelector(_embedpdf_plugin_annotation_internal.AnnotationToken, (c) => c.selectionAnchor(page.transform.viewScale, page.transform.rotation, page.transform.zoom), sameAnchor);
+	const selected = useAnnotationSelected();
+	const [pos, setPos] = (0, react.useState)(null);
+	const here = !!anchor && anchor.pon === page.pon;
+	(0, react.useLayoutEffect)(() => {
+		if (!here || !anchor) {
+			setPos(null);
+			return;
+		}
+		const measure = () => {
+			const knob = anchor.knob ? page.toClientPoint(anchor.knob) : null;
+			setPos(positionMenuAroundRect(page.toClientRect(anchor.bounds), placement, gap, knob));
+		};
+		measure();
+		window.addEventListener("scroll", measure, true);
+		window.addEventListener("resize", measure);
+		return () => {
+			window.removeEventListener("scroll", measure, true);
+			window.removeEventListener("resize", measure);
+		};
+	}, [
+		here,
+		anchor,
+		page,
+		gap,
+		placement
+	]);
+	if (!pos) return null;
+	return (0, react_dom.createPortal)(/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		style: {
+			position: "fixed",
+			left: pos.left,
+			top: pos.top,
+			transform: pos.transform,
+			pointerEvents: "auto"
+		},
+		children: children({
+			selected,
+			deleteSelection: anno.deleteSelection,
+			deselect: anno.deselect,
+			updateSelection: anno.updateSelection,
+			rotate90: anno.rotateSelection90,
+			resetRotation: anno.resetSelectionRotation,
+			group: anno.group,
+			ungroup: anno.ungroup,
+			canGroup: anno.canGroup(),
+			canUngroup: anno.canUngroup()
+		})
+	}), document.body);
+}
+function PageAnnotationDraftMenu({ children, gap = 8, placement = "top" }) {
+	const page = require_runtime.usePage();
+	const anno = require_runtime.useCapability(_embedpdf_plugin_annotation_internal.AnnotationToken);
+	const anchor = require_runtime.useSelector(_embedpdf_plugin_annotation_internal.AnnotationToken, (c) => c.creationDraftAnchor(), sameCreationDraftAnchor);
+	const [pos, setPos] = (0, react.useState)(null);
+	const ref = react.useRef(null);
+	const here = !!anchor && anchor.pon === page.pon;
+	(0, react.useEffect)(() => {
+		const el = ref.current;
+		if (!el) return;
+		const stop = (e) => e.stopPropagation();
+		el.addEventListener("pointerdown", stop);
+		return () => el.removeEventListener("pointerdown", stop);
+	});
+	(0, react.useLayoutEffect)(() => {
+		if (!here || !anchor) {
+			setPos(null);
+			return;
+		}
+		const measure = () => {
+			setPos(positionMenuAroundRect(page.toClientRect(anchor.bounds), placement, gap));
+		};
+		measure();
+		window.addEventListener("scroll", measure, true);
+		window.addEventListener("resize", measure);
+		return () => {
+			window.removeEventListener("scroll", measure, true);
+			window.removeEventListener("resize", measure);
+		};
+	}, [
+		here,
+		anchor,
+		page,
+		gap,
+		placement
+	]);
+	if (!anchor || !pos) return null;
+	return (0, react_dom.createPortal)(/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		ref,
+		style: {
+			position: "fixed",
+			left: pos.left,
+			top: pos.top,
+			transform: pos.transform,
+			pointerEvents: "auto"
+		},
+		children: children({
+			...anchor,
+			finish: anno.finishCreationDraft,
+			cancel: anno.cancelCreationDraft
+		})
+	}), document.body);
+}
+//#endregion
+Object.defineProperty(exports, "AnnotationLayer", {
+	enumerable: true,
+	get: function() {
+		return AnnotationLayer;
+	}
+});
+Object.defineProperty(exports, "PageAnnotationDraftMenu", {
+	enumerable: true,
+	get: function() {
+		return PageAnnotationDraftMenu;
+	}
+});
+Object.defineProperty(exports, "PageAnnotationMenu", {
+	enumerable: true,
+	get: function() {
+		return PageAnnotationMenu;
+	}
+});
+Object.defineProperty(exports, "filePickerProvider", {
+	enumerable: true,
+	get: function() {
+		return filePickerProvider;
+	}
+});
+Object.defineProperty(exports, "positionMenuAroundRect", {
+	enumerable: true,
+	get: function() {
+		return positionMenuAroundRect;
+	}
+});
+Object.defineProperty(exports, "sameAnchor", {
+	enumerable: true,
+	get: function() {
+		return sameAnchor;
+	}
+});
+Object.defineProperty(exports, "sameCreationDraftAnchor", {
+	enumerable: true,
+	get: function() {
+		return sameCreationDraftAnchor;
+	}
+});
+Object.defineProperty(exports, "useAnnotation", {
+	enumerable: true,
+	get: function() {
+		return useAnnotation;
+	}
+});
+Object.defineProperty(exports, "useAnnotationDefaults", {
+	enumerable: true,
+	get: function() {
+		return useAnnotationDefaults;
+	}
+});
+Object.defineProperty(exports, "useAnnotationSelected", {
+	enumerable: true,
+	get: function() {
+		return useAnnotationSelected;
+	}
+});
+Object.defineProperty(exports, "useAnnotationSelection", {
+	enumerable: true,
+	get: function() {
+		return useAnnotationSelection;
+	}
+});
+Object.defineProperty(exports, "useFilePickerProvider", {
+	enumerable: true,
+	get: function() {
+		return useFilePickerProvider;
+	}
+});
+Object.defineProperty(exports, "useSelectionFlags", {
+	enumerable: true,
+	get: function() {
+		return useSelectionFlags;
+	}
+});
+Object.defineProperty(exports, "useSelectionProps", {
+	enumerable: true,
+	get: function() {
+		return useSelectionProps;
+	}
+});
+
+//# sourceMappingURL=annotation-Ct6dFtzJ.cjs.map