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

package/dist/annotation-Dex5EBda.cjs

@@ -0,0 +1,830 @@
+const require_rolldown_runtime = require("./rolldown-runtime-DDXJien1.cjs");
+const require_runtime = require("./runtime-fzpGv78v.cjs");
+const require_state = require("./state-CsfZy_Eq.cjs");
+const require_anchored = require("./anchored.cjs");
+const require_page_layers = require("./page-layers-BloZDoOV.cjs");
+const require_inert = require("./inert-CmBEbKCn.cjs");
+const require_svg_shapes = require("./svg-shapes-zo0GNkc9.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _embedpdf_web = require("@embedpdf/web");
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react, 1);
+let _embedpdf_plugin_interaction_contract = require("@embedpdf/plugin-interaction/contract");
+let _embedpdf_plugin_render_contract_host = require("@embedpdf/plugin-render/contract/host");
+let _embedpdf_plugin_annotation = require("@embedpdf/plugin-annotation");
+let _embedpdf_core_annotation = require("@embedpdf/core-annotation");
+let _embedpdf_plugin_annotation_contract_host = require("@embedpdf/plugin-annotation/contract/host");
+let _embedpdf_plugin_annotation_contract = require("@embedpdf/plugin-annotation/contract");
+//#region src/annotation-hooks.ts
+/**
+* The annotation hooks other feature entries use too (the form plugin reads
+* the selection), kept apart so they don't import the whole annotation
+* feature: the state and the settings, each from its declaration.
+*/
+/**
+* The annotation state: `status` (`'loading'` until every annotation is in,
+* then `'ready'`), the `selected` annotations, the one `hovered` under the
+* pointer and the text box being typed in (`editing`). Re-renders only when a
+* field changes, or the value `select` picks. Empty without a document.
+*/
+const useAnnotationState = require_state.stateHook(_embedpdf_plugin_annotation_contract.annotationState);
+/**
+* The annotation settings (`snap`, `chrome`, `afterCreate`, `tools`), or the
+* value `select` picks. They belong to the plugin, so they read without a
+* document; change them with `useAnnotation().updateSettings()`.
+*/
+const useAnnotationSettings = require_state.settingsHook(_embedpdf_plugin_annotation_contract.AnnotationToken);
+//#endregion
+//#region src/annotation-menu.tsx
+/**
+* Annotation menus: thin anchor plumbing over the one `<Anchored>` primitive.
+* They come from `/annotation`; this module stays apart so it doesn't pull
+* in the layer.
+*
+* These work identically under `<Stage>` (mount in the overlay slot; the
+* camera projects, no DOM reads) and `<PageView>` (measured and portalled):
+* the surface provides the projector, the menu doesn't care.
+*
+* No action bags: actions come from `useAnnotation()` and the state hooks,
+* which subscribe properly and compose across plugins. Render props carry
+* only the anchor's data (the draft menu's progress); the selection menu
+* takes plain children.
+*/
+/**
+* Your own menu next to the selection (one anchor, also for a selection over
+* several pages), clear of the rotation handle. It hides while the selection
+* is dragged, resized or turned. What's in it is yours: build it from
+* `useAnnotation()` and `useAnnotationState()`.
+*/
+function AnnotationMenu({ children, gap = 15, placement = "top" }) {
+	const { projector } = require_anchored.useProjectorBinding();
+	const anchor = require_runtime.useOptionalSelector(_embedpdf_plugin_annotation_contract_host.AnnotationToken, (annotation) => {
+		const selectionAnchor = annotation.selection.getAnchor();
+		if (!selectionAnchor) return null;
+		const env = projector.viewEnv(selectionAnchor.page);
+		return env ? annotation.getSelectionAnchorIn(env) : selectionAnchor;
+	}, null, _embedpdf_web.sameSelectionAnchor);
+	if (!anchor) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_anchored.Anchored, {
+		anchor: {
+			page: anchor.page,
+			bounds: anchor.bounds,
+			...anchor.rotationHandle ? { avoid: [anchor.rotationHandle] } : {}
+		},
+		placement,
+		gap,
+		children
+	});
+}
+/** Floats over a live multi-click creation draft (polygon, polyline, …). */
+function AnnotationDraftMenu({ children, gap = 8, placement = "top" }) {
+	const anchor = require_runtime.useOptionalSelector(_embedpdf_plugin_annotation_contract.AnnotationToken, (annotation) => annotation.draft.get(), null, _embedpdf_web.sameCreationDraftAnchor);
+	if (!anchor) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_anchored.Anchored, {
+		anchor,
+		placement,
+		gap,
+		children: children(anchor)
+	});
+}
+/**
+* Follows the pointer while a selection is being turned, upright however the
+* page is shown: it floats over the page like the menus, not in it. Shows
+* nothing when no rotation is in progress.
+*/
+function AnnotationRotationBadge({ children, gap = 16, placement = "right" }) {
+	const rotation = require_runtime.useOptionalSelector(_embedpdf_plugin_annotation_contract.AnnotationToken, (annotation) => annotation.selection.getRotationAnchor(), null, _embedpdf_web.sameRotationAnchor);
+	const readout = useAnnotationSettings((settings) => settings.chrome.readout);
+	if (!rotation || !children && !readout.enabled) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_anchored.Anchored, {
+		anchor: {
+			page: rotation.page,
+			bounds: {
+				...rotation.at,
+				width: 0,
+				height: 0
+			}
+		},
+		placement,
+		gap,
+		children: children ? children(rotation) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			style: {
+				pointerEvents: "none",
+				whiteSpace: "nowrap",
+				borderRadius: 4,
+				padding: "2px 6px",
+				fontFamily: (0, _embedpdf_web.paintDefault)("font-mono"),
+				fontSize: 12,
+				background: (0, _embedpdf_web.paint)("readout-background", readout.background),
+				color: (0, _embedpdf_web.paint)("readout-color", readout.color)
+			},
+			children: [rotation.angle, "°"]
+		})
+	});
+}
+//#endregion
+//#region src/annotation.tsx
+/** How much the layer scales the look around it: 1 outside a look, or in one drawn at its size on screen. */
+const LookScaleContext = react.createContext(1);
+/**
+* The box an annotation draws into, placed, sized and turned like the
+* annotation (`item.frame`) inside the page layer, which the page itself
+* turns. The annotation's own drawing and any look of yours draw inside it.
+*/
+function AnnotationFrame({ item, page, interactive = false, inert = false, children }) {
+	const box = (0, _embedpdf_web.frameInPixels)(item.frame, page.transform);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		...inert ? require_inert.INERT : {},
+		style: {
+			position: "absolute",
+			left: box.left,
+			top: box.top,
+			width: box.width,
+			height: box.height,
+			transform: box.transform,
+			transformOrigin: "center",
+			mixBlendMode: item.blend,
+			pointerEvents: interactive ? "auto" : "none"
+		},
+		children
+	});
+}
+/** SVG attribute names as React props: `stroke-width` is `strokeWidth`. */
+/**
+* The scene, filling the item's frame: drawn upright in it, the frame turns
+* it. The core computed the box and the painted scene; `@embedpdf/web`
+* describes each scene node as one SVG element, so there is no per-kind
+* logic and no bounds math here.
+*/
+function Shape({ item }) {
+	const viewBox = (0, _embedpdf_web.sceneViewBox)(item.box);
+	if (!viewBox) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+		viewBox,
+		style: {
+			position: "absolute",
+			left: 0,
+			top: 0,
+			width: "100%",
+			height: "100%",
+			overflow: "visible",
+			pointerEvents: "none",
+			...item.source === "ghost" ? { opacity: (0, _embedpdf_web.ghostOpacity)(item.ghostOpacity ?? .5) } : {}
+		},
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_svg_shapes.SvgShapes, { shapes: (0, _embedpdf_web.svgShapesOf)((0, _embedpdf_core_annotation.scene)(item), { miterLimit: _embedpdf_core_annotation.MITER_LIMIT }) })
+	});
+}
+/** The engine's raster inside the item's frame, where `item.raster` puts it, at any frame size. */
+function BakedImage({ url, box }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+		src: url,
+		alt: "",
+		draggable: false,
+		style: {
+			position: "absolute",
+			left: box.left,
+			top: box.top,
+			width: box.width,
+			height: box.height,
+			maxWidth: "none",
+			maxHeight: "none",
+			pointerEvents: "none",
+			transform: box.transform,
+			transformOrigin: "center"
+		}
+	});
+}
+/**
+* The armed stamp's ghost: a see-through 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). Every other tool's ghost rides `pageItems` like a
+* drawing in progress. The preview bytes live in the capability closure; this
+* layer owns only the object-URL lifetime, keyed on the armed stamp — a new
+* arm swaps the image, a disarm (or tool change) drops it.
+*/
+function ToolGhostImage({ page }) {
+	const anno = require_runtime.useCapability(_embedpdf_plugin_annotation_contract_host.AnnotationToken);
+	const ghost = require_runtime.useSelector(_embedpdf_plugin_annotation_contract_host.AnnotationToken, (annotation) => annotation.getImageGhost(page.ref));
+	const armed = require_runtime.useSelector(_embedpdf_plugin_annotation_contract_host.AnnotationToken, (annotation) => annotation.getArmedStamp());
+	const [url, setUrl] = (0, react.useState)(null);
+	const bucket = ghost ? (0, _embedpdf_plugin_annotation_contract_host.previewBucket)(ghost.box.width * page.transform.renderScale) : 0;
+	(0, react.useEffect)(() => {
+		if (!bucket) {
+			setUrl(null);
+			return;
+		}
+		return (0, _embedpdf_web.loadObjectUrl)(() => anno.renderArmedStampPreview(bucket), setUrl);
+	}, [
+		anno,
+		armed,
+		bucket
+	]);
+	if (!ghost || !url) return null;
+	const frame = (0, _embedpdf_web.rectInPixels)(ghost.box, page.transform);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+		src: url,
+		alt: "",
+		draggable: false,
+		style: {
+			position: "absolute",
+			left: frame.left,
+			top: frame.top,
+			width: frame.width,
+			height: frame.height,
+			maxWidth: "none",
+			maxHeight: "none",
+			pointerEvents: "none",
+			opacity: (0, _embedpdf_web.ghostOpacity)(ghost.opacity),
+			...ghost.rot ? {
+				transform: `rotate(${ghost.rot}deg)`,
+				transformOrigin: "center"
+			} : {}
+		}
+	});
+}
+/** The chrome settings, painted: follows the settings and the viewer's accent live. */
+function useChromePaint() {
+	const chrome = useAnnotationSettings((settings) => settings.chrome);
+	const accent = require_runtime.useViewerSettings((settings) => settings.accent);
+	return {
+		chrome,
+		painted: react.useMemo(() => (0, _embedpdf_web.annotationChromePaint)(chrome, accent), [chrome, accent])
+	};
+}
+/** A handle as the layer draws it: a square or a circle, `size` px across. */
+function DefaultHandle({ at, size, rotation, shape, style }) {
+	if (shape === "circle") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+		cx: at.x,
+		cy: at.y,
+		r: size / 2,
+		strokeWidth: 1.5,
+		style
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("rect", {
+		x: at.x - size / 2,
+		y: at.y - size / 2,
+		width: size,
+		height: size,
+		strokeWidth: 1.5,
+		style,
+		...rotation ? { transform: `rotate(${rotation} ${at.x} ${at.y})` } : {}
+	});
+}
+function Chrome({ page, components }) {
+	const scale = page.transform.viewScale;
+	const rotation = page.transform.rotation;
+	const zoom = page.transform.zoom;
+	const nodes = require_runtime.useSelector(_embedpdf_plugin_annotation_contract_host.AnnotationToken, (annotation) => annotation.listChromeNodes(page.ref, scale, rotation, zoom), require_runtime.shallowArray);
+	const { chrome, painted } = useChromePaint();
+	const Handle = components?.Handle;
+	const RotationHandle = components?.RotationHandle;
+	const custom = [];
+	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: (0, _embedpdf_web.chromeInPixels)(nodes, page.transform).map((node, i) => {
+			switch (node.kind) {
+				case "handle":
+					if (Handle) {
+						custom.push(/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Handle, {
+							at: node.at,
+							size: chrome.handles.size,
+							rotation: node.rotation,
+							kind: node.role,
+							active: node.active
+						}, i));
+						return null;
+					}
+					return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DefaultHandle, {
+						at: node.at,
+						size: chrome.handles.size,
+						rotation: node.rotation,
+						shape: chrome.handles.shape,
+						style: painted.handle
+					}, i);
+				case "guide": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("line", {
+					x1: node.from.x,
+					y1: node.from.y,
+					x2: node.to.x,
+					y2: node.to.y,
+					shapeRendering: "crispEdges",
+					style: painted.guide
+				}, i);
+				case "turned-outline": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("polygon", {
+					points: node.points,
+					fill: "none",
+					style: painted.outline
+				}, i);
+				case "rotation-guides": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("g", { children: node.lines.map((line, j) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("line", {
+					x1: line.from.x,
+					y1: line.from.y,
+					x2: line.to.x,
+					y2: line.to.y,
+					opacity: line.opacity,
+					style: painted.rotationGuide
+				}, j)) }, i);
+				case "rotation-handle":
+					if (RotationHandle) {
+						custom.push(/* @__PURE__ */ (0, react_jsx_runtime.jsx)(RotationHandle, {
+							at: node.at,
+							from: node.from,
+							size: chrome.rotationHandle.size,
+							rotation: 0,
+							active: false
+						}, i));
+						return null;
+					}
+					return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("g", { children: [chrome.rotationHandle.stalk && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("line", {
+						x1: node.from.x,
+						y1: node.from.y,
+						x2: node.at.x,
+						y2: node.at.y,
+						strokeWidth: 1,
+						style: { stroke: painted.rotationHandle.stroke }
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+						cx: node.at.x,
+						cy: node.at.y,
+						r: chrome.rotationHandle.size / 2,
+						strokeWidth: 1.5,
+						style: painted.rotationHandle
+					})] }, i);
+				case "marquee": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("rect", {
+					x: node.box.left,
+					y: node.box.top,
+					width: node.box.width,
+					height: node.box.height,
+					strokeWidth: 1,
+					strokeDasharray: "4 3",
+					style: painted.marquee
+				}, i);
+				case "outline": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("rect", {
+					x: node.box.left,
+					y: node.box.top,
+					width: node.box.width,
+					height: node.box.height,
+					fill: "none",
+					style: painted.outline
+				}, i);
+			}
+		})
+	}), custom.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		style: {
+			position: "absolute",
+			inset: 0,
+			pointerEvents: "none"
+		},
+		children: custom
+	})] });
+}
+/**
+* Make an element the editor of a text box: `@embedpdf/web`'s text box
+* editor binds it (rich text, focus and `contentEditable` following
+* `item.editing`, presses kept inside), and its follower attaches again for
+* another element or document and hands it the item and the scale. Returns
+* the ref callback for the element.
+*/
+function useTextBoxEditor(item, scale) {
+	const anno = require_runtime.useCapability(_embedpdf_plugin_annotation_contract_host.AnnotationToken);
+	const [element, setElement] = (0, react.useState)(null);
+	const [follower] = (0, react.useState)(() => (0, _embedpdf_web.createTextBoxEditorFollower)());
+	(0, react.useEffect)(() => follower.follow(element, anno, item, scale), [
+		follower,
+		anno,
+		element,
+		item,
+		scale
+	]);
+	(0, react.useEffect)(() => () => follower.detach(), [follower]);
+	return setElement;
+}
+/** A free text annotation: the same styled element for reading and typing. */
+function FreeText({ item, page }) {
+	const plate = (0, _embedpdf_web.textPlateInPixels)(item, page.transform);
+	const ref = useTextBoxEditor(item, plate.scale);
+	const { painted } = useChromePaint();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		ref,
+		suppressContentEditableWarning: true,
+		style: {
+			position: "absolute",
+			left: plate.left,
+			top: plate.top,
+			width: plate.width,
+			height: plate.height,
+			...(0, _embedpdf_web.textBoxStyleOf)(item.css, plate.scale),
+			boxSizing: "border-box",
+			background: "transparent",
+			whiteSpace: "pre-wrap",
+			overflowWrap: "break-word",
+			overflowY: item.editing ? "auto" : "hidden",
+			overflowX: "hidden",
+			outline: item.editing ? `1px solid ${painted.textOutline}` : "none",
+			cursor: item.editing ? "text" : "default",
+			...item.rot ? {
+				transform: `rotate(${item.rot}deg)`,
+				transformOrigin: "center"
+			} : {},
+			pointerEvents: item.editing ? "auto" : "none"
+		}
+	});
+}
+const NO_STYLE = {};
+/**
+* Make your own element the editor of a text box you draw yourself (a
+* renderer for free text): it draws the runs, turns typing back into runs,
+* keeps the caret when the style changes, and handles pasting, input methods
+* and the format shortcuts. The formatting calls (`text.toggleFormat`,
+* `selection.update`) work on it as they do on the built-in one.
+*/
+function useRichTextEditor(annotation) {
+	const page = require_runtime.usePage();
+	const zoom = page.transform.zoom;
+	const rotation = page.transform.rotation;
+	const key = (0, _embedpdf_plugin_annotation.annotationKey)(annotation.ref);
+	const item = require_runtime.useOptionalSelector(_embedpdf_plugin_annotation_contract_host.AnnotationToken, (anno) => anno.listTextItems(page.ref, {
+		zoom,
+		rotation
+	}).find((text) => text.ref !== null && (0, _embedpdf_plugin_annotation.annotationKey)(text.ref) === key) ?? null, null);
+	const scale = (0, _embedpdf_web.textBoxEditorScaleOf)(item, page.transform, react.useContext(LookScaleContext));
+	return {
+		ref: useTextBoxEditor(item, scale),
+		style: react.useMemo(() => item ? {
+			...(0, _embedpdf_web.textBoxStyleOf)(item.css, scale),
+			...item.editing ? { pointerEvents: "auto" } : {}
+		} : NO_STYLE, [item, scale]),
+		editing: item?.editing ?? false
+	};
+}
+/**
+* Register the behaviors this layer's `interactive` renderers need, through
+* `@embedpdf/web`'s `registerRendererBehaviors`: counted per capability and
+* entry, since the layer mounts once per page. Entry identity is the key,
+* hence the "define entries outside render" rule on {@link AnnotationRenderer}.
+* Once they are registered the layer draws again: its drawings ask them.
+*/
+function useRendererBehaviors(anno, activeToolId, renderers) {
+	const toolRef = (0, react.useRef)(activeToolId);
+	toolRef.current = activeToolId;
+	const [, setRegistrations] = (0, react.useState)(0);
+	(0, react.useEffect)(() => {
+		if (!renderers) return;
+		const release = (0, _embedpdf_web.registerRendererBehaviors)(anno, renderers, () => toolRef.current());
+		setRegistrations((count) => count + 1);
+		return release;
+	}, [anno, renderers]);
+}
+/**
+* Draws a page's annotations, the selection's outline and handles, the tool's
+* preview and the text boxes being typed in. Put it above the rendered page:
+* while it's there, the render layer leaves the annotations out of the
+* page's picture.
+*/
+function AnnotationLayer({ renderers, components } = {}) {
+	const page = require_runtime.usePage();
+	const anno = require_runtime.useCapability(_embedpdf_plugin_annotation_contract_host.AnnotationToken);
+	require_runtime.useOptionalSelector(_embedpdf_plugin_interaction_contract.InteractionToken, (interaction) => interaction.getActiveToolId(), "");
+	const interaction = require_runtime.useOptionalCapability(_embedpdf_plugin_interaction_contract.InteractionToken);
+	const viewZoom = page.transform.zoom;
+	const viewRotation = page.transform.rotation;
+	const items = require_runtime.useSelector(_embedpdf_plugin_annotation_contract_host.AnnotationToken, (annotation) => annotation.listPageItems(page.ref, {
+		zoom: viewZoom,
+		rotation: viewRotation
+	}), require_runtime.shallowArray);
+	const texts = require_runtime.useSelector(_embedpdf_plugin_annotation_contract_host.AnnotationToken, (annotation) => annotation.listTextItems(page.ref, {
+		zoom: viewZoom,
+		rotation: viewRotation
+	}), require_runtime.shallowArray);
+	const [urls, setUrls] = (0, react.useState)(null);
+	const [shown] = (0, react.useState)(_embedpdf_web.createShownUrls);
+	(0, react.useEffect)(() => () => shown.release(), [shown]);
+	useRendererBehaviors(anno, () => interaction?.getActiveToolId() ?? "", renderers);
+	require_page_layers.usePaintsPagePart(page.ref, "annotations");
+	const previousRenderers = (0, react.useRef)(renderers);
+	if (renderers && previousRenderers.current && renderers !== previousRenderers.current && require_runtime.shallowArray(renderers, previousRenderers.current)) require_runtime.devWarn("annotation-renderers-inline", "<AnnotationLayer renderers> was given a new array with the same entries — define it outside render (module scope or useMemo), because entry identity keys the behavior registration.");
+	previousRenderers.current = renderers;
+	const bakedKey = require_runtime.useSelector(_embedpdf_plugin_annotation_contract_host.AnnotationToken, (annotation) => annotation.getAppearanceEpoch(page.ref));
+	const bakeScale = require_runtime.useOptionalSelector(_embedpdf_plugin_render_contract_host.RenderToken, (render) => render.getAppearanceScale(page.transform.renderScale), page.transform.renderScale);
+	(0, react.useEffect)(() => (0, _embedpdf_web.loadAppearanceUrls)(shown, (signal) => anno.renderAppearances(page.ref, bakeScale, signal), _embedpdf_plugin_annotation.annotationKey, setUrls), [
+		shown,
+		anno,
+		page.ref,
+		bakeScale,
+		bakedKey
+	]);
+	/** The text box being typed in, by key. */
+	const editingKey = (0, _embedpdf_web.editingTextKeyOf)(texts, _embedpdf_plugin_annotation.annotationKey);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		style: {
+			position: "absolute",
+			inset: 0,
+			pointerEvents: "none"
+		},
+		children: [
+			items.map((item) => {
+				const state = item.annotation?.appearanceState ?? null;
+				const shows = (0, _embedpdf_web.pictureOrPainting)({
+					pending: item.source !== "baked",
+					picture: urls && (0, _embedpdf_web.shownAppearance)(urls, item.id, state),
+					version: item.pictureVersion ?? 0,
+					loaded: urls !== null,
+					paint: () => (0, _embedpdf_core_annotation.hasLiveDrawing)(item) ? item : null
+				});
+				const native = shows?.kind === "painting" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Shape, { item }) : shows?.kind === "picture" && item.raster ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BakedImage, {
+					url: shows.picture.url,
+					box: (0, _embedpdf_web.rasterInFrame)(item.raster, item.frame)
+				}) : null;
+				const framed = (content, options) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AnnotationFrame, {
+					item,
+					page,
+					...options,
+					children: content
+				}, item.id);
+				const annotation = item.annotation;
+				if (!annotation) return framed(native);
+				/** Your look in the frame: drawn at the annotation's 100% size and scaled with the page, unless it opts out. */
+				const look = (entry, interactive) => {
+					const pixels = (0, _embedpdf_web.frameInPixels)(item.frame, page.transform);
+					const scaled = entry.scale !== false;
+					const Look = entry.component;
+					const drawn = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Look, {
+						annotation,
+						frame: (0, _embedpdf_web.lookFrameOf)(pixels, scaled),
+						native,
+						appearance: urls && (0, _embedpdf_web.bakedAppearanceOf)(urls, item.id, state),
+						hovered: item.hovered ?? false,
+						selected: item.selected,
+						interactive
+					});
+					if (!scaled) return drawn;
+					return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						style: {
+							position: "absolute",
+							left: 0,
+							top: 0,
+							width: pixels.design.width,
+							height: pixels.design.height,
+							transform: `scale(${pixels.scale})`,
+							transformOrigin: "0 0"
+						},
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LookScaleContext.Provider, {
+							value: pixels.scale,
+							children: drawn
+						})
+					});
+				};
+				const typing = editingKey !== null && (0, _embedpdf_plugin_annotation.annotationKey)(annotation.ref) === editingKey;
+				const drawing = (0, _embedpdf_web.annotationDrawingOf)(annotation, anno, renderers, typing);
+				switch (drawing.kind) {
+					case "owned": {
+						const Owner = drawing.entry.component;
+						return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Owner, {
+							annotation,
+							item,
+							page,
+							native: framed(native),
+							hovered: item.hovered ?? false,
+							selected: item.selected,
+							interactive: true
+						}, item.id);
+					}
+					case "look": return framed(look(drawing.entry, drawing.interactive), {
+						interactive: drawing.interactive,
+						inert: drawing.inert
+					});
+					case "native": return framed(native, { inert: drawing.inert });
+				}
+			}),
+			(0, _embedpdf_web.layerTextBoxesOf)(texts, items, renderers, _embedpdf_plugin_annotation.annotationKey).map((text) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FreeText, {
+				item: text,
+				page
+			}, text.id)),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolGhostImage, { page }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Chrome, {
+				page,
+				components
+			})
+		]
+	});
+}
+/**
+* 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 in the framework
+* layer, never in the plugin.
+*/
+const filePickerProvider = _embedpdf_web.pickRequestedFile;
+/**
+* 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;
+		return (0, _embedpdf_web.installFilePickerProvider)(anno, provider, () => require_runtime.devWarn("file-picker-provider-twice", "useFilePickerProvider() is called from two mounted components for the same document — the later one wins. Call it once, at a document-scoped spot."));
+	}, [anno, provider]);
+}
+function useAnnotation() {
+	return require_runtime.useCapability(_embedpdf_plugin_annotation.AnnotationToken);
+}
+/** Listen to one annotation event while the component is mounted: `useAnnotationEvent((annotation) => annotation.onCreated, handler)`. */
+function useAnnotationEvent(select, handler) {
+	require_runtime.useCapabilityEvent(_embedpdf_plugin_annotation.AnnotationToken, select, handler);
+}
+const NO_ANNOTATIONS = [];
+/**
+* The annotations matching `filter` (some pages, one kind), in drawing order,
+* as the user sees them; the same array while they stay the same. Empty
+* without a document.
+*/
+function useAnnotationList(filter) {
+	const key = filter ? `${(filter.pages ?? []).map((page) => typeof page === "number" ? `#${page}` : page.objectNumber).join(",")}|${filter.pages ? "p" : ""}|${filter.subtype ?? ""}` : "";
+	const stable = react.useMemo(() => filter, [key]);
+	return require_runtime.useOptionalSelector(_embedpdf_plugin_annotation.AnnotationToken, (annotation) => annotation.list(stable), NO_ANNOTATIONS, require_runtime.shallowArray);
+}
+const NO_DEFAULTS = {};
+/**
+* A tool's defaults: the fields its next annotation starts with, over the
+* engine's. The component re-renders when they change, so a color picker
+* always shows the current color. Empty without a document.
+*/
+function useAnnotationDefaults(toolId) {
+	return require_runtime.useOptionalSelector(_embedpdf_plugin_annotation.AnnotationToken, (annotation) => annotation.tools.getDefaults(toolId), NO_DEFAULTS);
+}
+const NO_PROPERTIES = {
+	properties: [],
+	values: {},
+	mixed: []
+};
+/**
+* What a style panel shows: the selection's properties (`selection.getProperties()`),
+* or, given a tool id, the tool's (`tools.getProperties(id)`). The component
+* re-renders when they change. Empty without a document.
+*/
+function useAnnotationProperties(toolId) {
+	return require_runtime.useOptionalSelector(_embedpdf_plugin_annotation.AnnotationToken, (annotation) => toolId === void 0 ? annotation.selection.getProperties() : annotation.tools.getProperties(toolId), NO_PROPERTIES);
+}
+/**
+* An anchor for `<Anchored>` that keeps a card or a badge attached to one
+* annotation: its page and the box around what it shows, following a move
+* as it happens. `null` for `null`, or an annotation that isn't here. The
+* component re-renders when the annotation moves, not while people scroll or
+* zoom: a note that keeps its size on screen hands `<Anchored>` its
+* `boundsIn`.
+*/
+function useAnnotationAnchor(ref) {
+	const key = ref ? (0, _embedpdf_plugin_annotation.annotationKey)(ref) : null;
+	const stable = react.useMemo(() => ref, [key]);
+	return require_runtime.useOptionalSelector(_embedpdf_plugin_annotation_contract_host.AnnotationToken, (annotation) => stable ? annotation.getAnnotationAnchor(stable) : null, null, _embedpdf_web.sameAnnotationAnchor);
+}
+/** The comments API: the `comments` part of `useAnnotation()`. Pair it with
+*  {@link useCommentThreads} for the threads to show. */
+function useComments() {
+	return require_runtime.useCapability(_embedpdf_plugin_annotation.AnnotationToken).comments;
+}
+const EMPTY_PAGES = [];
+const NO_THREADS = [];
+/**
+* Every comment thread in the document, display-ordered (page position →
+* top of page → creation date) and enriched with `pageIndex`/`pageLabel`.
+* Subscribed to both stores: annotation writes (own, remote, hydration)
+* recompute the threads; page moves/deletes re-run the join. Reference-
+* stable between changes — safe to memo child renders on the array.
+*/
+function useCommentThreads() {
+	const docId = require_runtime.useDocumentId();
+	const threads = require_runtime.useOptionalSelector(_embedpdf_plugin_annotation.AnnotationToken, (annotation) => annotation.comments.listThreads(), NO_THREADS);
+	const pages = require_runtime.useKernelValue((kernel) => docId ? kernel.documents.listPages(docId) : EMPTY_PAGES);
+	return react.useMemo(() => (0, _embedpdf_web.enrichCommentThreads)(threads, pages), [threads, pages]);
+}
+/** The enriched thread containing any member ref (root, reply, grouped part,
+*  state annotation), or null. */
+function useCommentThread(ref) {
+	const views = useCommentThreads();
+	const api = require_runtime.useOptionalCapability(_embedpdf_plugin_annotation.AnnotationToken);
+	if (ref == null || !api) return null;
+	const thread = api.comments.getThread(ref);
+	if (!thread) return null;
+	return views.find((view) => (0, _embedpdf_plugin_annotation.annotationKey)(view.root.ref) === (0, _embedpdf_plugin_annotation.annotationKey)(thread.root.ref)) ?? null;
+}
+//#endregion
+Object.defineProperty(exports, "AnnotationDraftMenu", {
+	enumerable: true,
+	get: function() {
+		return AnnotationDraftMenu;
+	}
+});
+Object.defineProperty(exports, "AnnotationLayer", {
+	enumerable: true,
+	get: function() {
+		return AnnotationLayer;
+	}
+});
+Object.defineProperty(exports, "AnnotationMenu", {
+	enumerable: true,
+	get: function() {
+		return AnnotationMenu;
+	}
+});
+Object.defineProperty(exports, "AnnotationRotationBadge", {
+	enumerable: true,
+	get: function() {
+		return AnnotationRotationBadge;
+	}
+});
+Object.defineProperty(exports, "filePickerProvider", {
+	enumerable: true,
+	get: function() {
+		return filePickerProvider;
+	}
+});
+Object.defineProperty(exports, "useAnnotation", {
+	enumerable: true,
+	get: function() {
+		return useAnnotation;
+	}
+});
+Object.defineProperty(exports, "useAnnotationAnchor", {
+	enumerable: true,
+	get: function() {
+		return useAnnotationAnchor;
+	}
+});
+Object.defineProperty(exports, "useAnnotationDefaults", {
+	enumerable: true,
+	get: function() {
+		return useAnnotationDefaults;
+	}
+});
+Object.defineProperty(exports, "useAnnotationEvent", {
+	enumerable: true,
+	get: function() {
+		return useAnnotationEvent;
+	}
+});
+Object.defineProperty(exports, "useAnnotationList", {
+	enumerable: true,
+	get: function() {
+		return useAnnotationList;
+	}
+});
+Object.defineProperty(exports, "useAnnotationProperties", {
+	enumerable: true,
+	get: function() {
+		return useAnnotationProperties;
+	}
+});
+Object.defineProperty(exports, "useAnnotationSettings", {
+	enumerable: true,
+	get: function() {
+		return useAnnotationSettings;
+	}
+});
+Object.defineProperty(exports, "useAnnotationState", {
+	enumerable: true,
+	get: function() {
+		return useAnnotationState;
+	}
+});
+Object.defineProperty(exports, "useCommentThread", {
+	enumerable: true,
+	get: function() {
+		return useCommentThread;
+	}
+});
+Object.defineProperty(exports, "useCommentThreads", {
+	enumerable: true,
+	get: function() {
+		return useCommentThreads;
+	}
+});
+Object.defineProperty(exports, "useComments", {
+	enumerable: true,
+	get: function() {
+		return useComments;
+	}
+});
+Object.defineProperty(exports, "useFilePickerProvider", {
+	enumerable: true,
+	get: function() {
+		return useFilePickerProvider;
+	}
+});
+Object.defineProperty(exports, "useRichTextEditor", {
+	enumerable: true,
+	get: function() {
+		return useRichTextEditor;
+	}
+});
+
+//# sourceMappingURL=annotation-Dex5EBda.cjs.map