@embedpdf/react 3.0.0-next.0

package/dist/annotation-DjGWJljY.js

@@ -0,0 +1,829 @@
+import { shallowArray, useCapability, useOptionalCapability, usePage, useSelector } from "./runtime.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { useEffect, useLayoutEffect, useState } from "react";
+import { pickFile } from "@embedpdf/web";
+import { AnnotationToken, refKey } from "@embedpdf/plugin-annotation";
+import { createPortal } from "react-dom";
+import { AnnotationToken as AnnotationToken$1 } from "@embedpdf/plugin-annotation/internal";
+import { MITER_LIMIT, scene } from "@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: 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__ */ 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 scene(item).map((n, i) => {
+		const a = paintAttrs(n.paint);
+		if (n.kind === "rect") return /* @__PURE__ */ 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__ */ 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__ */ 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__ */ jsx("path", {
+			d: n.d,
+			...a
+		}, i);
+		if (n.kind === "text") return /* @__PURE__ */ 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__ */ jsx("polygon", {
+			points: pts,
+			...a
+		}, i) : /* @__PURE__ */ jsx("polyline", {
+			points: pts,
+			...a
+		}, i);
+	});
+}
+function BakedImage({ box, url, page, blend, rot }) {
+	const b = boxOf(box, page);
+	return /* @__PURE__ */ 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 = useCapability(AnnotationToken$1);
+	const ghost = useSelector(AnnotationToken$1, (c) => c.toolGhost(page.pon));
+	const epoch = useSelector(AnnotationToken$1, (c) => c.stampArmEpoch());
+	const [url, setUrl] = useState(null);
+	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__ */ 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 = useSelector(AnnotationToken$1, (c) => c.chrome(page.pon, scale, rotation, zoom), shallowArray);
+	const cs = useSelector(AnnotationToken$1, (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__ */ jsxs(Fragment, { children: [/* @__PURE__ */ 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__ */ 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__ */ 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__ */ 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__ */ 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__ */ 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__ */ jsxs("g", { children: [cs.knob.stalk && /* @__PURE__ */ jsx("line", {
+					x1: from.x,
+					y1: from.y,
+					x2: at.x,
+					y2: at.y,
+					stroke: knobStroke,
+					strokeWidth: 1
+				}), /* @__PURE__ */ 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__ */ 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__ */ 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__ */ 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 = useCapability(AnnotationToken$1);
+	const ref = React.useRef(null);
+	const box = boxOf(item.box, page);
+	const scale = item.box.width > 0 ? box.width / item.box.width : 1;
+	useEffect(() => {
+		const el = ref.current;
+		if (el && document.activeElement !== el && el.innerText !== item.contents) el.innerText = item.contents;
+	}, [item.contents, item.editing]);
+	useEffect(() => {
+		if (item.editing) ref.current?.focus();
+	}, [item.editing]);
+	useEffect(() => {
+		const el = ref.current;
+		if (!el) return;
+		const stop = (e) => e.stopPropagation();
+		el.addEventListener("pointerdown", stop);
+		return () => el.removeEventListener("pointerdown", stop);
+	}, []);
+	return /* @__PURE__ */ 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) {
+	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 = usePage();
+	const anno = useCapability(AnnotationToken$1);
+	const viewZoom = page.transform.zoom;
+	const viewRotation = page.transform.rotation;
+	const items = useSelector(AnnotationToken$1, (c) => c.pageItems(page.pon, {
+		zoom: viewZoom,
+		rotation: viewRotation
+	}), shallowArray);
+	const texts = useSelector(AnnotationToken$1, (c) => c.textItems(page.pon, {
+		zoom: viewZoom,
+		rotation: viewRotation
+	}), shallowArray);
+	const [urls, setUrls] = useState({});
+	useAutoBehaviors(anno, renderers);
+	useEffect(() => {
+		anno.ensurePage(page.pon);
+	}, [anno, page.pon]);
+	const bakedKey = useSelector(AnnotationToken$1, (c) => c.appearanceEpoch(page.pon));
+	const bakeScale = useSelector(AnnotationToken$1, (c) => c.bakeScale(page.transform.renderScale));
+	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[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__ */ 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__ */ jsx(BakedImage, {
+					box: item.apBox ?? baked.box,
+					url: baked.url,
+					page,
+					blend: item.blend,
+					rot: item.apRot
+				}) : null : /* @__PURE__ */ 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__ */ 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__ */ jsx("div", {
+							...INERT,
+							style: { pointerEvents: "none" },
+							children: /* @__PURE__ */ jsx(Skin, {
+								item,
+								page,
+								appearance: baked ?? null,
+								native,
+								interactive: false
+							})
+						});
+					} else out = native;
+				}
+				return /* @__PURE__ */ jsx(React.Fragment, { children: out }, item.id);
+			}),
+			texts.map((t) => /* @__PURE__ */ jsx(FreeText, {
+				item: t,
+				page
+			}, t.id)),
+			/* @__PURE__ */ jsx(ToolGhostImage, { page }),
+			/* @__PURE__ */ 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 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 = useOptionalCapability(AnnotationToken);
+	useEffect(() => {
+		if (!anno) return;
+		anno.setFilePickerProvider(provider);
+		return () => anno.setFilePickerProvider(null);
+	}, [anno, provider]);
+}
+function useAnnotation() {
+	return useCapability(AnnotationToken);
+}
+function useAnnotationSelection() {
+	return useSelector(AnnotationToken, (c) => c.selection(), shallowArray);
+}
+/** The selected annotations as engine DTOs — for selection-aware toolbars/sidebars. */
+function useAnnotationSelected() {
+	return useSelector(AnnotationToken, (c) => c.getSelected(), 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 useSelector(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 useSelector(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 useSelector(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 = usePage();
+	const anno = useCapability(AnnotationToken$1);
+	const anchor = useSelector(AnnotationToken$1, (c) => c.selectionAnchor(page.transform.viewScale, page.transform.rotation, page.transform.zoom), sameAnchor);
+	const selected = useAnnotationSelected();
+	const [pos, setPos] = useState(null);
+	const here = !!anchor && anchor.pon === page.pon;
+	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 createPortal(/* @__PURE__ */ 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 = usePage();
+	const anno = useCapability(AnnotationToken$1);
+	const anchor = useSelector(AnnotationToken$1, (c) => c.creationDraftAnchor(), sameCreationDraftAnchor);
+	const [pos, setPos] = useState(null);
+	const ref = React.useRef(null);
+	const here = !!anchor && anchor.pon === page.pon;
+	useEffect(() => {
+		const el = ref.current;
+		if (!el) return;
+		const stop = (e) => e.stopPropagation();
+		el.addEventListener("pointerdown", stop);
+		return () => el.removeEventListener("pointerdown", stop);
+	});
+	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 createPortal(/* @__PURE__ */ 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
+export { sameAnchor as a, useAnnotationDefaults as c, useFilePickerProvider as d, useSelectionFlags as f, filePickerProvider as i, useAnnotationSelected as l, positionMenuAroundRect as m, PageAnnotationDraftMenu as n, sameCreationDraftAnchor as o, useSelectionProps as p, PageAnnotationMenu as r, useAnnotation as s, AnnotationLayer as t, useAnnotationSelection as u };
+
+//# sourceMappingURL=annotation-DjGWJljY.js.map