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

package/dist/annotation-CDI8CFb3.js

@@ -0,0 +1,684 @@
+import { C as useOptionalSelector, D as useViewerSettings, E as useSelector, O as devWarn, S as useOptionalCapability, f as useCapability, h as useDocumentId, p as useCapabilityEvent, u as shallowArray, w as usePage, x as useKernelValue } from "./runtime-tD5iJU83.js";
+import { n as stateHook, t as settingsHook } from "./state-CzI2KlZb.js";
+import { Anchored, useProjectorBinding } from "./anchored.js";
+import { n as usePaintsPagePart } from "./page-layers-Bkaaz8Zf.js";
+import { t as INERT } from "./inert-D8fkennb.js";
+import { t as SvgShapes } from "./svg-shapes-Dm1yTR1b.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { annotationChromePaint, annotationDrawingOf, bakedAppearanceOf, chromeInPixels, createShownUrls, createTextBoxEditorFollower, editingTextKeyOf, enrichCommentThreads, frameInPixels, freeTextBoxOf, ghostOpacity, installFilePickerProvider, layerTextBoxesOf, loadAppearanceUrls, loadObjectUrl, lookFrameOf, ownTextBoxOf, paint, paintDefault, pickRequestedFile, pictureOrPainting, rasterInFrame, rectInPixels, registerRendererBehaviors, sameAnnotationAnchor, sameCreationDraftAnchor, sameRotationAnchor, sameSelectionAnchor, sceneViewBox, shownAppearance, svgShapesOf, textBoxEditorScaleOf } from "@embedpdf/web";
+import * as React$1 from "react";
+import { useEffect, useRef, useState } from "react";
+import { InteractionToken } from "@embedpdf/plugin-interaction/contract";
+import { RenderToken } from "@embedpdf/plugin-render/contract/host";
+import { AnnotationToken, annotationKey } from "@embedpdf/plugin-annotation";
+import { MITER_LIMIT, hasLiveDrawing, scene } from "@embedpdf/core-annotation";
+import { AnnotationToken as AnnotationToken$1, previewBucket } from "@embedpdf/plugin-annotation/contract/host";
+import { AnnotationToken as AnnotationToken$2, annotationState } from "@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 = stateHook(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 = settingsHook(AnnotationToken$2);
+//#endregion
+//#region src/annotation-menu.tsx
+/**
+* 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 } = useProjectorBinding();
+	const anchor = useOptionalSelector(AnnotationToken$1, (annotation) => {
+		const selectionAnchor = annotation.selection.getAnchor();
+		if (!selectionAnchor) return null;
+		const env = projector.viewEnv(selectionAnchor.page);
+		return env ? annotation.getSelectionAnchorIn(env) : selectionAnchor;
+	}, null, sameSelectionAnchor);
+	if (!anchor) return null;
+	return /* @__PURE__ */ jsx(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 = useOptionalSelector(AnnotationToken$2, (annotation) => annotation.draft.get(), null, sameCreationDraftAnchor);
+	if (!anchor) return null;
+	return /* @__PURE__ */ jsx(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 = useOptionalSelector(AnnotationToken$2, (annotation) => annotation.selection.getRotationAnchor(), null, sameRotationAnchor);
+	const readout = useAnnotationSettings((settings) => settings.chrome.readout);
+	if (!rotation || !children && !readout.enabled) return null;
+	return /* @__PURE__ */ jsx(Anchored, {
+		anchor: {
+			page: rotation.page,
+			bounds: {
+				...rotation.at,
+				width: 0,
+				height: 0
+			}
+		},
+		placement,
+		gap,
+		children: children ? children(rotation) : /* @__PURE__ */ jsxs("div", {
+			style: {
+				pointerEvents: "none",
+				whiteSpace: "nowrap",
+				borderRadius: 4,
+				padding: "2px 6px",
+				fontFamily: paintDefault("font-mono"),
+				fontSize: 12,
+				background: paint("readout-background", readout.background),
+				color: 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$1.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 = frameInPixels(item.frame, page.transform);
+	return /* @__PURE__ */ jsx("div", {
+		...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 = sceneViewBox(item.box);
+	if (!viewBox) return null;
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox,
+		style: {
+			position: "absolute",
+			left: 0,
+			top: 0,
+			width: "100%",
+			height: "100%",
+			overflow: "visible",
+			pointerEvents: "none",
+			...item.source === "ghost" ? { opacity: ghostOpacity(item.ghostOpacity ?? .5) } : {}
+		},
+		children: /* @__PURE__ */ jsx(SvgShapes, { shapes: svgShapesOf(scene(item), { miterLimit: 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__ */ 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 = useCapability(AnnotationToken$1);
+	const ghost = useSelector(AnnotationToken$1, (annotation) => annotation.getImageGhost(page.ref));
+	const armed = useSelector(AnnotationToken$1, (annotation) => annotation.getArmedStamp());
+	const [url, setUrl] = useState(null);
+	const bucket = ghost ? previewBucket(ghost.box.width * page.transform.renderScale) : 0;
+	useEffect(() => {
+		if (!bucket) {
+			setUrl(null);
+			return;
+		}
+		return loadObjectUrl(() => anno.renderArmedStampPreview(bucket), setUrl);
+	}, [
+		anno,
+		armed,
+		bucket
+	]);
+	if (!ghost || !url) return null;
+	const frame = rectInPixels(ghost.box, page.transform);
+	return /* @__PURE__ */ 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: 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 = useViewerSettings((settings) => settings.accent);
+	return {
+		chrome,
+		painted: React$1.useMemo(() => 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__ */ jsx("circle", {
+		cx: at.x,
+		cy: at.y,
+		r: size / 2,
+		strokeWidth: 1.5,
+		style
+	});
+	return /* @__PURE__ */ 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 = useSelector(AnnotationToken$1, (annotation) => annotation.listChromeNodes(page.ref, scale, rotation, zoom), shallowArray);
+	const { chrome, painted } = useChromePaint();
+	const Handle = components?.Handle;
+	const RotationHandle = components?.RotationHandle;
+	const custom = [];
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("svg", {
+		style: {
+			position: "absolute",
+			inset: 0,
+			overflow: "visible",
+			pointerEvents: "none"
+		},
+		children: chromeInPixels(nodes, page.transform).map((node, i) => {
+			switch (node.kind) {
+				case "handle":
+					if (Handle) {
+						custom.push(/* @__PURE__ */ jsx(Handle, {
+							at: node.at,
+							size: chrome.handles.size,
+							rotation: node.rotation,
+							kind: node.role,
+							active: node.active
+						}, i));
+						return null;
+					}
+					return /* @__PURE__ */ jsx(DefaultHandle, {
+						at: node.at,
+						size: chrome.handles.size,
+						rotation: node.rotation,
+						shape: chrome.handles.shape,
+						style: painted.handle
+					}, i);
+				case "guide": return /* @__PURE__ */ 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__ */ jsx("polygon", {
+					points: node.points,
+					fill: "none",
+					style: painted.outline
+				}, i);
+				case "rotation-guides": return /* @__PURE__ */ jsx("g", { children: node.lines.map((line, j) => /* @__PURE__ */ 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__ */ jsx(RotationHandle, {
+							at: node.at,
+							from: node.from,
+							size: chrome.rotationHandle.size,
+							rotation: 0,
+							active: false
+						}, i));
+						return null;
+					}
+					return /* @__PURE__ */ jsxs("g", { children: [chrome.rotationHandle.stalk && /* @__PURE__ */ 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__ */ 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__ */ 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__ */ 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__ */ 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 = useCapability(AnnotationToken$1);
+	const [element, setElement] = useState(null);
+	const [follower] = useState(() => createTextBoxEditorFollower());
+	useEffect(() => follower.follow(element, anno, item, scale), [
+		follower,
+		anno,
+		element,
+		item,
+		scale
+	]);
+	useEffect(() => () => follower.detach(), [follower]);
+	return setElement;
+}
+/** A free text annotation: the same styled element for reading and typing. */
+function FreeText({ item, page }) {
+	const { painted } = useChromePaint();
+	const box = freeTextBoxOf(item, page.transform, painted.textOutline);
+	return /* @__PURE__ */ jsx("div", {
+		ref: useTextBoxEditor(item, box.scale),
+		suppressContentEditableWarning: true,
+		style: box.style
+	});
+}
+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 = usePage();
+	const zoom = page.transform.zoom;
+	const rotation = page.transform.rotation;
+	const item = useOptionalSelector(AnnotationToken$1, (anno) => anno.getTextItem(annotation.ref, {
+		zoom,
+		rotation
+	}), null);
+	const scale = textBoxEditorScaleOf(item, page.transform, React$1.useContext(LookScaleContext));
+	const own = React$1.useMemo(() => item ? ownTextBoxOf(item, scale) : null, [item, scale]);
+	return {
+		ref: useTextBoxEditor(item, own?.scale ?? scale),
+		style: own?.style ?? NO_STYLE,
+		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 = useRef(activeToolId);
+	toolRef.current = activeToolId;
+	const [, setRegistrations] = useState(0);
+	useEffect(() => {
+		if (!renderers) return;
+		const release = 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 = usePage();
+	const anno = useCapability(AnnotationToken$1);
+	useOptionalSelector(InteractionToken, (interaction) => interaction.getActiveToolId(), "");
+	const interaction = useOptionalCapability(InteractionToken);
+	const viewZoom = page.transform.zoom;
+	const viewRotation = page.transform.rotation;
+	const items = useSelector(AnnotationToken$1, (annotation) => annotation.listPageItems(page.ref, {
+		zoom: viewZoom,
+		rotation: viewRotation
+	}), shallowArray);
+	const texts = useSelector(AnnotationToken$1, (annotation) => annotation.listTextItems(page.ref, {
+		zoom: viewZoom,
+		rotation: viewRotation
+	}), shallowArray);
+	const [urls, setUrls] = useState(null);
+	const [shown] = useState(createShownUrls);
+	useEffect(() => () => shown.release(), [shown]);
+	useRendererBehaviors(anno, () => interaction?.getActiveToolId() ?? "", renderers);
+	usePaintsPagePart(page.ref, "annotations");
+	const previousRenderers = useRef(renderers);
+	if (renderers && previousRenderers.current && renderers !== previousRenderers.current && shallowArray(renderers, previousRenderers.current)) 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 = useSelector(AnnotationToken$1, (annotation) => annotation.getAppearanceEpoch(page.ref));
+	const bakeScale = useOptionalSelector(RenderToken, (render) => render.getAppearanceScale(page.transform.renderScale), page.transform.renderScale);
+	useEffect(() => loadAppearanceUrls(shown, (signal) => anno.renderAppearances(page.ref, bakeScale, signal), annotationKey, setUrls), [
+		shown,
+		anno,
+		page.ref,
+		bakeScale,
+		bakedKey
+	]);
+	/** The text box being typed in, by key. */
+	const editingKey = editingTextKeyOf(texts, annotationKey);
+	return /* @__PURE__ */ jsxs("div", {
+		style: {
+			position: "absolute",
+			inset: 0,
+			pointerEvents: "none"
+		},
+		children: [
+			items.map((item) => {
+				const state = item.annotation?.appearanceState ?? null;
+				const shows = pictureOrPainting({
+					pending: item.source !== "baked",
+					picture: urls && shownAppearance(urls, item.id, state),
+					version: item.pictureVersion ?? 0,
+					loaded: urls !== null,
+					paint: () => hasLiveDrawing(item) ? item : null
+				});
+				const native = shows?.kind === "painting" ? /* @__PURE__ */ jsx(Shape, { item }) : shows?.kind === "picture" && item.raster ? /* @__PURE__ */ jsx(BakedImage, {
+					url: shows.picture.url,
+					box: rasterInFrame(item.raster, item.frame)
+				}) : null;
+				const framed = (content, options) => /* @__PURE__ */ 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 = frameInPixels(item.frame, page.transform);
+					const scaled = entry.scale !== false;
+					const Look = entry.component;
+					const drawn = /* @__PURE__ */ jsx(Look, {
+						annotation,
+						frame: lookFrameOf(pixels, scaled),
+						native,
+						appearance: urls && bakedAppearanceOf(urls, item.id, state),
+						hovered: item.hovered ?? false,
+						selected: item.selected,
+						interactive
+					});
+					if (!scaled) return drawn;
+					return /* @__PURE__ */ 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__ */ jsx(LookScaleContext.Provider, {
+							value: pixels.scale,
+							children: drawn
+						})
+					});
+				};
+				const typing = editingKey !== null && annotationKey(annotation.ref) === editingKey;
+				const drawing = annotationDrawingOf(annotation, anno, renderers, typing);
+				switch (drawing.kind) {
+					case "owned": {
+						const Owner = drawing.entry.component;
+						return /* @__PURE__ */ 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 });
+				}
+			}),
+			layerTextBoxesOf(texts, items, renderers, annotationKey).map((text) => /* @__PURE__ */ jsx(FreeText, {
+				item: text,
+				page
+			}, text.id)),
+			/* @__PURE__ */ jsx(ToolGhostImage, { page }),
+			/* @__PURE__ */ 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 = 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 = useOptionalCapability(AnnotationToken);
+	useEffect(() => {
+		if (!anno) return;
+		return installFilePickerProvider(anno, provider, () => 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 useCapability(AnnotationToken);
+}
+/** Listen to one annotation event while the component is mounted: `useAnnotationEvent((annotation) => annotation.onCreated, handler)`. */
+function useAnnotationEvent(select, handler) {
+	useCapabilityEvent(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$1.useMemo(() => filter, [key]);
+	return useOptionalSelector(AnnotationToken, (annotation) => annotation.list(stable), NO_ANNOTATIONS, 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 useOptionalSelector(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 useOptionalSelector(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 ? annotationKey(ref) : null;
+	const stable = React$1.useMemo(() => ref, [key]);
+	return useOptionalSelector(AnnotationToken$1, (annotation) => stable ? annotation.getAnnotationAnchor(stable) : null, null, sameAnnotationAnchor);
+}
+/** The comments API: the `comments` part of `useAnnotation()`. Pair it with
+*  {@link useCommentThreads} for the threads to show. */
+function useComments() {
+	return useCapability(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 = useDocumentId();
+	const threads = useOptionalSelector(AnnotationToken, (annotation) => annotation.comments.listThreads(), NO_THREADS);
+	const pages = useKernelValue((kernel) => docId ? kernel.documents.listPages(docId) : EMPTY_PAGES);
+	return React$1.useMemo(() => 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 = useOptionalCapability(AnnotationToken);
+	if (ref == null || !api) return null;
+	const thread = api.comments.getThread(ref);
+	if (!thread) return null;
+	return views.find((view) => annotationKey(view.root.ref) === annotationKey(thread.root.ref)) ?? null;
+}
+//#endregion
+export { useAnnotationSettings as _, useAnnotationDefaults as a, useAnnotationProperties as c, useComments as d, useFilePickerProvider as f, AnnotationRotationBadge as g, AnnotationMenu as h, useAnnotationAnchor as i, useCommentThread as l, AnnotationDraftMenu as m, filePickerProvider as n, useAnnotationEvent as o, useRichTextEditor as p, useAnnotation as r, useAnnotationList as s, AnnotationLayer as t, useCommentThreads as u, useAnnotationState as v };
+
+//# sourceMappingURL=annotation-CDI8CFb3.js.map