@inkbar/core 0.5.0 → 0.7.0

package/dist/dom.mjs

@@ -1,5 +1,5 @@
-import { $t as readonly, B as isTextMarkup, Bt as withCalloutBounds, E as withoutReplies, G as resizedRect, Gt as isKnown, H as movedEndpoint, Ht as LINE_ENDINGS, I as hasCallout, J as withBox, Jt as cssVariableDefaults, K as scaled, L as hasCornerHandles, Lt as calloutStroke, O as createToolStyle, R as hasRectGeometry, Rt as freeTextBox, S as isThreadRoot, T as threadRoot, U as movedTip, V as keepsAspect, W as resizedBox, Y as openDocument, Z as deriveRect, Zt as mergeLineRects, _ as defaultEnds, _n as isInkError, b as isAbandonedNote, d as recogniseStroke, dn as rectsIntersect, en as writable, f as DEFAULT_CORNER_RADIUS, g as constrain, gn as InkError, h as SHAPE_KINDS, i as createInkTemplate, l as placeSignature, ln as rectFromPoints, m as DEFAULT_SHAPE_SIZE, o as createMemorySignatureStore, p as DEFAULT_SHAPE_OPTIONS, q as translated, r as createImageTemplate, rn as invertMatrix, s as createSignatureLibrary, tn as applyMatrix, tt as isProduction, v as isPointerOnlyKind, w as threadOf, y as shapeInput, z as isBubble, zt as isStandardCallout } from "./signatures-CMapTKrC.mjs";
-import { ALargeSmall, AlignCenter, AlignJustify, AlignLeft, AlignRight, Bold, Check, ChevronDown, ChevronLeft, ChevronRight, Circle, CircleDashed, Hexagon, Highlighter, ICON_ATTRIBUTES, Italic, MessageCircle, MessageSquare, MessageSquareText, Minus, MoveUpRight, PenLine, PenTool, Plus, RectangleHorizontal, Redo2, Search, Signature, Slash, SpellCheck2, Square, SquareDashed, SquareDashedMousePointer, Star, Strikethrough, TextCursor, Trash2, Type, Underline, Undo2, ZoomIn, ZoomOut } from "@inkbar/icons";
+import { $t as createRecordStore, B as isTextMarkup, Bt as isStandardCallout, E as withoutReplies, G as resizedRect, H as movedEndpoint, I as hasCallout, J as withBox, K as scaled, Kt as isKnown, L as hasCornerHandles, O as createToolStyle, Q as deriveRect, Qt as mergeLineRects, R as hasRectGeometry, Rt as calloutStroke, S as isThreadRoot, T as threadRoot, U as movedTip, Ut as LINE_ENDINGS, V as keepsAspect, Vt as withCalloutBounds, W as resizedBox, X as isBlankQuery, Y as openDocument, Yt as cssVariableDefaults, _ as defaultEnds, an as invertMatrix, b as isAbandonedNote, bn as InkError, d as recogniseStroke, en as derived, f as DEFAULT_CORNER_RADIUS, fn as rectFromPoints, g as constrain, h as SHAPE_KINDS, hn as rectsIntersect, i as createInkTemplate, l as placeSignature, m as DEFAULT_SHAPE_SIZE, nn as writable, nt as isProduction, o as createMemorySignatureStore, p as DEFAULT_SHAPE_OPTIONS, q as translated, r as createImageTemplate, rn as applyMatrix, s as createSignatureLibrary, tn as readonly, v as isPointerOnlyKind, w as threadOf, xn as isInkError, y as shapeInput, z as isBubble, zt as freeTextBox } from "./signatures-Do_l2IlM.mjs";
+import { ALargeSmall, AlignCenter, AlignJustify, AlignLeft, AlignRight, Bold, CaseSensitive, Check, ChevronDown, ChevronLeft, ChevronRight, ChevronUp, Circle, CircleDashed, Hexagon, Highlighter, ICON_ATTRIBUTES, Italic, MessageCircle, MessageSquare, MessageSquareText, Minus, MoveUpRight, PenLine, PenTool, Plus, RectangleHorizontal, Redo2, Search, Signature, Slash, SpellCheck2, Square, SquareDashed, SquareDashedMousePointer, Star, Strikethrough, TextCursor, Trash2, Type, Underline, Undo2, X, ZoomIn, ZoomOut } from "@inkbar/icons";
 import { getStroke } from "perfect-freehand";
 //#region src/dom/transform.ts
 /** Folds any integer multiple of 90 onto 0, 90, 180 or 270. Throws `RangeError` otherwise. */
@@ -500,7 +500,7 @@ function createViewport(opts) {
 			});
 			sync();
 		},
-		scrollToRect(page, rect) {
+		scrollToRect(page, rect, o) {
 			if (mode.get() === "single" && currentPage.get() !== page) {
 				currentPage.set(page);
 				relayout();
@@ -508,11 +508,13 @@ function createViewport(opts) {
 			const box = boxFor(page);
 			if (!box) return;
 			const css = transformFor(page).toCssRect(rect);
-			const o = origin();
-			const top = o.y + box.top + css.top;
-			if (top < container.scrollTop || top + css.height > container.scrollTop + container.clientHeight) container.scrollTop = Math.max(0, top - (container.clientHeight - css.height) / 2);
-			const left = o.x + box.left + css.left;
-			if (left < container.scrollLeft || left + css.width > container.scrollLeft + container.clientWidth) container.scrollLeft = Math.max(0, left - (container.clientWidth - css.width) / 2);
+			const at = origin();
+			const to = { behavior: o?.behavior ?? "auto" };
+			const top = at.y + box.top + css.top;
+			if (top < container.scrollTop || top + css.height > container.scrollTop + container.clientHeight) to.top = Math.max(0, top - (container.clientHeight - css.height) / 2);
+			const left = at.x + box.left + css.left;
+			if (left < container.scrollLeft || left + css.width > container.scrollLeft + container.clientWidth) to.left = Math.max(0, left - (container.clientWidth - css.width) / 2);
+			if (to.top !== void 0 || to.left !== void 0) container.scrollTo(to);
 			sync();
 		},
 		transformFor,
@@ -629,7 +631,7 @@ function watchDevicePixelRatio(view, current, onChange) {
 }
 //#endregion
 //#region src/dom/page-renderer.ts
-const isCancellation$1 = (error) => error?.name === "RenderingCancelledException";
+const isCancellation$2 = (error) => error?.name === "RenderingCancelledException";
 function createPageRenderer(opts) {
 	const { document: doc, page, host } = opts;
 	const view = host.ownerDocument.defaultView;
@@ -715,7 +717,7 @@ function createPageRenderer(opts) {
 			opts.onRendered?.();
 		} catch (error) {
 			if (canvas && canvas !== current) release(canvas);
-			if (!((destroyed || gen !== generation) && isCancellation$1(error)) && !destroyed) opts.onError?.(error);
+			if (!((destroyed || gen !== generation) && isCancellation$2(error)) && !destroyed) opts.onError?.(error);
 		} finally {
 			if (gen === generation) settle();
 		}
@@ -2018,7 +2020,7 @@ function insertText(field, text) {
 }
 //#endregion
 //#region src/pdfjs/render-region.ts
-const isCancellation = (error) => error?.name === "RenderingCancelledException";
+const isCancellation$1 = (error) => error?.name === "RenderingCancelledException";
 /**
 * Draws `userRect` of `page` (0-based) into `canvas` at `scale` device pixels per user-space
 * unit (times `/UserUnit`, as PDF.js applies it), turned by `rotation`: the page's /Rotate plus
@@ -2061,7 +2063,7 @@ async function renderRegion(doc, page, userRect, scale, canvas, signal, rotation
 	try {
 		await task.promise;
 	} catch (error) {
-		if (signal?.aborted && isCancellation(error)) throw signal.reason;
+		if (signal?.aborted && isCancellation$1(error)) throw signal.reason;
 		throw error;
 	} finally {
 		signal?.removeEventListener("abort", cancel);
@@ -2310,7 +2312,7 @@ function ariaLabel(a) {
 	return a.author ? `${named} by ${a.author}` : named;
 }
 /** Reading order in user space: top edge first (y grows upwards), then left edge. */
-function readingOrder(a, b) {
+function readingOrder$1(a, b) {
 	return b.rect.y + b.rect.height - (a.rect.y + a.rect.height) || a.rect.x - b.rect.x;
 }
 /** A decoration's data key: lower-case kebab, as written after `data-`. */
@@ -2727,7 +2729,7 @@ function createOverlay(opts) {
 	}
 	function render() {
 		if (destroyed) return;
-		const current = withoutReplies(store.list.get()).filter((a) => a.page === page).sort(readingOrder);
+		const current = withoutReplies(store.list.get()).filter((a) => a.page === page).sort(readingOrder$1);
 		const ids = new Set(current.map((a) => a.id));
 		const active = doc.activeElement;
 		let focusId = [...elements].find(([, n]) => n === active)?.[0];
@@ -2818,153 +2820,1387 @@ function createOverlay(opts) {
 	};
 }
 //#endregion
-//#region src/dom/page-mount.ts
-/** Canvas, text layer and annotation overlay for one page, stacked in that order. */
-function createPageMount(opts) {
-	const { document, page, host, transform } = opts;
-	const callbacks = (layer) => ({
-		...opts.onError ? { onError: (error) => opts.onError?.(error, layer) } : {},
-		...opts.onRendered ? { onRendered: () => opts.onRendered?.(layer) } : {}
-	});
-	const renderer = createPageRenderer({
-		document,
-		page,
-		host,
-		transform,
-		...opts.devicePixelRatio === void 0 ? {} : { devicePixelRatio: opts.devicePixelRatio },
-		...callbacks("canvas")
+//#region src/dom/plugins/api/command.ts
+const DEFAULT_ERROR_STATUS = "Something went wrong.";
+/** A failure that is the run being cancelled, not a bug: not logged, no error status. */
+function isCancellation(error) {
+	if (isInkError(error) && error.code === "DocumentDestroyed") return true;
+	return error instanceof Error && error.name === "AbortError";
+}
+function createCommand(ctx, id, label, run, opts = {}) {
+	const status = writable("");
+	let controller = null;
+	ctx.onDocument(() => () => {
+		controller?.abort();
+		status.set("");
 	});
-	const textLayer = createTextLayer({
-		document,
-		page,
-		host,
-		transform,
-		...callbacks("text")
+	return ctx.commands.add({
+		id,
+		label,
+		...opts.icon && { icon: opts.icon },
+		...opts.enabled && { enabled: opts.enabled },
+		status: readonly(status),
+		async run() {
+			const doc = ctx.document.get();
+			if (!doc) return;
+			const own = new AbortController();
+			controller = own;
+			status.set("");
+			try {
+				const result = await run({
+					doc,
+					signal: own.signal
+				});
+				if (!own.signal.aborted) status.set(result ?? "");
+			} catch (error) {
+				if (own.signal.aborted || isCancellation(error)) return;
+				console.error(error);
+				status.set(opts.errorStatus ?? DEFAULT_ERROR_STATUS);
+			} finally {
+				if (controller === own) controller = null;
+			}
+		}
 	});
-	const overlay = createOverlay({
-		host,
-		page,
-		store: opts.store,
-		transform,
-		document,
-		...opts.devicePixelRatio === void 0 ? {} : { devicePixelRatio: opts.devicePixelRatio },
-		...opts.onActivate ? { onActivate: (id) => opts.onActivate?.(id) } : {},
-		...opts.isCustom ? { isCustom: (a) => opts.isCustom?.(a) === true } : {},
-		...opts.decorate ? { decorate: opts.decorate } : {}
+}
+//#endregion
+//#region src/dom/annotation-element.ts
+/** The overlay element drawn for annotation `id` under `root`, if it is in the DOM. */
+function annotationElementFor(root, id) {
+	return root.querySelector(`[data-annotation="${CSS.escape(id)}"]`);
+}
+/**
+* Resolves the overlay element for `id` and keeps resolving while `root`'s subtree changes:
+* the overlay creates and removes these elements outside any framework (a page mounts as it
+* scrolls into view), so a popover anchored to one has to follow. Calls `onChange` once now
+* and again whenever the answer changes. The returned function stops observing.
+*/
+function observeAnnotationElement(root, id, onChange) {
+	let last;
+	const resolve = () => {
+		const found = annotationElementFor(root, id);
+		if (found === last) return;
+		last = found;
+		onChange(found);
+	};
+	resolve();
+	const observer = new MutationObserver(resolve);
+	observer.observe(root, {
+		childList: true,
+		subtree: true
 	});
+	return () => observer.disconnect();
+}
+//#endregion
+//#region src/dom/popover-focus.ts
+/**
+* A press that will activate an annotation is not a dismissal: the popover follows the
+* activation. Mirrors the overlay's rule: a press on the annotation element or on its drawn
+* shape activates; a press on a custom element's own content belongs to that content.
+*/
+function shouldKeepOpenOnAnnotation(target) {
+	if (!(target instanceof Element)) return false;
+	const annotation = target.closest("[data-annotation]");
+	if (!annotation) return false;
+	return target === annotation || !annotation.hasAttribute("data-custom");
+}
+function createFocusReturn(opts) {
+	let fallbacks = [];
+	/** Set by `beforeRemove`: the close comes from removing the anchor's annotation. */
+	let removing = false;
 	return {
-		renderer,
-		textLayer,
-		overlay,
-		update(next) {
-			renderer.update(next);
-			textLayer.update(next);
-			overlay.update(next);
+		beforeRemove(anchor, prefer) {
+			fallbacks = [];
+			removing = true;
+			const siblings = anchor?.parentElement ? [...anchor.parentElement.children].filter((el) => el instanceof HTMLElement && el.hasAttribute("data-annotation")) : [];
+			const i = anchor ? siblings.indexOf(anchor) : -1;
+			if (i >= 0) {
+				const after = siblings.slice(i + 1);
+				const preferred = prefer ? after.filter((el) => el.matches(prefer)) : [];
+				fallbacks.push(...preferred, ...after, ...siblings.slice(0, i).reverse());
+			}
 		},
-		destroy() {
-			overlay.destroy();
-			textLayer.destroy();
-			renderer.destroy();
+		onCloseAutoFocus(event, anchor) {
+			event.preventDefault();
+			const plan = fallbacks;
+			const removed = removing;
+			fallbacks = [];
+			removing = false;
+			const root = opts.root();
+			if (!root) return;
+			const activated = opts.activated();
+			if (activated !== null && annotationElementFor(root, activated)) return;
+			const active = root.ownerDocument.activeElement;
+			if (active && active !== root && root.contains(active)) return;
+			const scroll = root.querySelector("[data-ink-scroll]");
+			(removed ? [...plan, scroll] : [
+				anchor,
+				...plan,
+				scroll
+			]).find((el) => el?.isConnected)?.focus({ preventScroll: true });
 		}
 	};
 }
 //#endregion
-//#region src/dom/tools/options.ts
-function createToolOptions(tools = []) {
-	const byId = /* @__PURE__ */ new Map();
-	const views = /* @__PURE__ */ new Map();
-	const entry = (id) => {
-		const w = byId.get(id);
-		if (!w) throw new RangeError(`Unknown tool ${id}`);
-		return w;
-	};
-	function register(list) {
-		for (const t of list) {
-			if (byId.has(t.id)) continue;
-			const w = writable({ ...t.defaultOptions ?? {} });
-			byId.set(t.id, w);
-			views.set(t.id, readonly(w));
-		}
-	}
-	register(tools);
-	return {
-		readable(id) {
-			entry(id);
-			return views.get(id);
-		},
-		get: (id) => entry(id).get(),
-		merge(id, patch) {
-			const w = entry(id);
-			w.set({
-				...w.get(),
-				...patch
-			});
-		},
-		register
-	};
+//#region src/dom/viewer/dom.ts
+/** `document.createElement` with attributes and children. */
+function h(tag, attrs = {}, ...children) {
+	const el = document.createElement(tag);
+	for (const [name, value] of Object.entries(attrs)) el.setAttribute(name, value);
+	el.append(...children);
+	return el;
+}
+function button$1(label, onClick) {
+	const b = h("button", { type: "button" }, label);
+	b.addEventListener("click", onClick);
+	return b;
 }
 //#endregion
-//#region src/dom/tools/selection-edit.ts
-const CORNERS = [
-	"nw",
-	"ne",
-	"sw",
-	"se"
-];
-const ENDS = ["start", "end"];
-const CALLOUT = "callout";
-/** Pointer travel, CSS px, before a press on an annotation becomes a move. */
-const DRAG_THRESHOLD = 3;
-function createSelectionEdit(ctx, opts = {}) {
-	let mode = { kind: "idle" };
-	const batch = (fn) => ctx.history ? ctx.history.batch(fn) : fn();
-	const reset = () => {
-		if (mode.kind === "marquee") mode.el.remove();
-		if (mode.kind === "move") {
-			for (const el of mode.els) el.style.transform = "";
-			ctx.root.removeAttribute("data-ink-dragging");
-		}
-		if (mode.kind === "resize" && mode.el) {
-			mode.el.style.transform = "";
-			mode.el.style.transformOrigin = "";
-			mode.el.style.visibility = "";
-		}
-		if (mode.kind === "resize") mode.preview?.remove();
-		if (mode.kind === "endpoint") {
-			mode.preview.remove();
-			if (mode.el) mode.el.style.visibility = "";
-		}
-		mode = { kind: "idle" };
-	};
-	const elementIn = (root, id) => root.querySelector(`[data-annotation="${CSS.escape(id)}"]`) ?? void 0;
-	const previewFor = (host, a) => {
-		const preview = host.ownerDocument.createElement("div");
-		preview.className = "ink-annotation ink-edit-preview";
-		preview.dataset.inkPreview = "";
-		preview.dataset.type = a.type;
-		preview.style.cssText = "position:absolute;pointer-events:none;";
-		return preview;
-	};
-	/** Shows `draft` in `preview` beside `el`, which is hidden meanwhile. */
-	const showPreview = (preview, el, draft, start) => {
-		drawPreview(preview, draft, start);
-		if (el) el.style.visibility = "hidden";
-		if (!preview.isConnected) (el?.parentElement ?? start.host).append(preview);
+//#region src/dom/viewer/popover.ts
+/** Space between the anchor and the panel, and between the panel and the window edge. */
+const GAP = 6;
+const MARGIN = 8;
+const TABBABLE$1 = "button, input, select, textarea, a[href], [tabindex]";
+/**
+* Positions `panel` (fixed) below the `anchor` rectangle, or above it when only that fits,
+* kept inside the window. For panels anchored to something other than an annotation.
+*/
+function placePanel(panel, anchor) {
+	const { innerWidth: vw, innerHeight: vh } = window;
+	panel.style.position = "fixed";
+	panel.style.left = "0px";
+	panel.style.top = "0px";
+	const w = panel.offsetWidth;
+	const ht = panel.offsetHeight;
+	let top = anchor.bottom + GAP;
+	if (top + ht > vh - MARGIN && anchor.top - GAP - ht >= MARGIN) top = anchor.top - GAP - ht;
+	top = Math.max(MARGIN, Math.min(top, vh - ht - MARGIN));
+	const left = Math.max(MARGIN, Math.min(anchor.left, vw - w - MARGIN));
+	panel.style.left = `${left}px`;
+	panel.style.top = `${top}px`;
+}
+/**
+* Calls `onChange` with `el` while it is under `root` and null while it is not: once now, then
+* whenever that changes. Returns a function that stops observing.
+*/
+function observeElement(root, el, onChange) {
+	let last;
+	const resolve = () => {
+		const found = root.contains(el) ? el : null;
+		if (found === last) return;
+		last = found;
+		onChange(found);
 	};
-	function startHandle(e, hit, a, handle) {
-		const el = elementIn(hit.host, a.id);
-		if (CORNERS.includes(handle) && hasCornerHandles(a)) {
-			const text = a.type === "freetext";
-			mode = {
-				kind: "resize",
-				id: a.id,
-				start: hit,
-				corner: handle,
-				box: text ? hit.transform.toCssRect(freeTextBox(a)) : handleBox(a, hit.transform),
-				el,
-				locked: keepsAspect(a),
-				preview: text && (a.fringe !== void 0 || hasCallout(a)) ? previewFor(hit.host, a) : void 0
-			};
+	resolve();
+	const observer = new MutationObserver(resolve);
+	observer.observe(root, {
+		childList: true,
+		subtree: true
+	});
+	return () => observer.disconnect();
+}
+/**
+* Creates a non-modal `role="dialog"` panel on `<body>`, marked `data-ink-popover` so the theme
+* gives it its tokens, that an app anchors to an annotation with `show(id)` (for instance on
+* `viewer.activated`), or to any element in the viewer with `showAt(el)`. The panel follows the annotation's element as pages mount and unmount:
+* it hides while the element is gone and comes back with it. Tab loops inside the panel, and
+* Escape or a press outside calls `onDismiss`. Call `destroy` when done.
+*/
+function createPopover(opts) {
+	const { root, focusReturn } = opts;
+	const panel = h("div", {
+		...opts.attrs,
+		role: "dialog",
+		"data-ink-popover": "",
+		hidden: ""
+	});
+	document.body.append(panel);
+	/** What the panel is anchored to: an annotation id, or an element from `showAt`. */
+	let anchored = null;
+	let anchor = null;
+	let stopObserving = () => void 0;
+	/** The element that had focus in the panel when the anchor went away. */
+	let stranded = null;
+	const place = () => {
+		if (!anchor || panel.hidden) return;
+		placePanel(panel, anchor.getBoundingClientRect());
+	};
+	const resizes = new ResizeObserver(place);
+	resizes.observe(panel);
+	const onAnchor = (el, closing = false) => {
+		if (anchor) resizes.unobserve(anchor);
+		anchor = el;
+		if (!el) {
+			const active = document.activeElement;
+			if (!closing && !panel.hidden && active instanceof HTMLElement && panel.contains(active)) {
+				const scroll = root.querySelector("[data-ink-scroll]");
+				if (scroll) {
+					stranded = active;
+					scroll.focus({ preventScroll: true });
+				}
+			}
+			panel.hidden = true;
+			return;
+		}
+		resizes.observe(el);
+		const wasHidden = panel.hidden;
+		panel.hidden = false;
+		place();
+		if (wasHidden && stranded) {
+			const back = stranded;
+			stranded = null;
+			const scroll = root.querySelector("[data-ink-scroll]");
+			if (panel.contains(back) && document.activeElement === scroll) back.focus({ preventScroll: true });
+		}
+	};
+	const onKey = (e) => {
+		if (e.key !== "Escape" || panel.hidden || e.defaultPrevented) return;
+		const target = e.target;
+		if (!(target instanceof Node) || !(panel.contains(target) || root.contains(target))) return;
+		e.preventDefault();
+		opts.onDismiss();
+	};
+	const onPress = (e) => {
+		if (panel.hidden || panel.contains(e.target)) return;
+		if (shouldKeepOpenOnAnnotation(e.target)) return;
+		opts.onDismiss();
+	};
+	const onTab = (e) => {
+		if (e.key !== "Tab" || e.altKey || e.ctrlKey || e.metaKey) return;
+		const tabbable = [...panel.querySelectorAll(TABBABLE$1)].filter((el) => !el.disabled && el.tabIndex >= 0);
+		const first = tabbable[0];
+		const last = tabbable.at(-1);
+		if (!first || !last) return;
+		const active = document.activeElement;
+		if (e.shiftKey ? active !== first : active !== last) return;
+		e.preventDefault();
+		(e.shiftKey ? last : first).focus();
+	};
+	panel.addEventListener("keydown", onTab);
+	document.addEventListener("keydown", onKey);
+	document.addEventListener("pointerdown", onPress, true);
+	document.addEventListener("scroll", place, true);
+	window.addEventListener("resize", place);
+	return {
+		panel,
+		get anchor() {
+			return anchor;
+		},
+		show(id) {
+			if (id === anchored) return;
+			stopObserving();
+			anchored = id;
+			stopObserving = observeAnnotationElement(root, id, onAnchor);
+		},
+		showAt(el) {
+			if (el === anchored) return;
+			stopObserving();
+			anchored = el;
+			stopObserving = observeElement(root, el, onAnchor);
+		},
+		hide() {
+			if (anchored === null) return;
+			stopObserving();
+			stopObserving = () => void 0;
+			const element = typeof anchored === "string" ? null : anchored;
+			anchored = null;
+			const back = anchor;
+			stranded = null;
+			onAnchor(null, true);
+			queueMicrotask(() => {
+				if (anchored !== null || !panel.isConnected) return;
+				if (element?.isConnected) {
+					const active = document.activeElement;
+					if (!(active && active !== root && root.contains(active))) element.focus({ preventScroll: true });
+					return;
+				}
+				focusReturn.onCloseAutoFocus(new Event("closeautofocus", { cancelable: true }), back);
+			});
+		},
+		destroy() {
+			stopObserving();
+			resizes.disconnect();
+			document.removeEventListener("keydown", onKey);
+			document.removeEventListener("pointerdown", onPress, true);
+			panel.removeEventListener("keydown", onTab);
+			document.removeEventListener("scroll", place, true);
+			window.removeEventListener("resize", place);
+			panel.remove();
+		}
+	};
+}
+//#endregion
+//#region src/dom/plugins/api/card.ts
+function el(tag, className, ...children) {
+	const e = document.createElement(tag);
+	e.className = className;
+	e.append(...children);
+	return e;
+}
+function createCard(ctx, records, opts) {
+	/** Made on first open, in the viewer root the mark is in. */
+	let popover = null;
+	let root = null;
+	/** The record on show. */
+	let shown = null;
+	/** Set while an action runs: the action decides what happens after it. */
+	let acting = false;
+	/** The mark whose card is open: its `aria-expanded` is true. */
+	let expanded = null;
+	const expand = (mark) => {
+		expanded?.setAttribute("aria-expanded", "false");
+		expanded = mark;
+		mark?.setAttribute("aria-expanded", "true");
+	};
+	/** The shown record as it stands now, while it still has a mark. */
+	const current = () => {
+		const record = shown === null ? void 0 : records.find(shown);
+		return record && opts.marked(record) ? record : void 0;
+	};
+	const close = () => {
+		shown = null;
+		expand(null);
+		popover?.hide();
+	};
+	/** Runs `fn` as one undo step, then re-renders, or closes and moves focus on. */
+	const act = (fn) => {
+		if (!popover || !root || shown === null) return;
+		const marks = opts.marks(root);
+		const i = popover.anchor ? marks.indexOf(popover.anchor) : -1;
+		const after = i < 0 ? [] : [...marks.slice(i + 1), ...marks.slice(0, i).reverse()];
+		acting = true;
+		try {
+			ctx.history.batch(fn);
+		} finally {
+			acting = false;
+		}
+		const record = current();
+		if (record) return render(record);
+		after.find((m) => m.isConnected)?.focus({ preventScroll: true });
+		close();
+	};
+	/** Fills the panel from `record`, keeping focus on the same action. */
+	const render = (record) => {
+		const spec = opts.spec(record);
+		const panel = popover.panel;
+		const buttons = () => [...panel.querySelectorAll(".ink-card-actions > button")];
+		const focused = buttons().indexOf(document.activeElement);
+		panel.className = spec.className ? `ink-card ${spec.className}` : "ink-card";
+		panel.setAttribute("aria-label", spec.label ?? spec.title);
+		const parts = [el("p", "ink-card-title", spec.title)];
+		if (spec.meta !== void 0) {
+			const meta = el("p", "ink-card-meta", spec.meta);
+			if (spec.swatch !== void 0) {
+				const swatch = el("span", "ink-card-swatch");
+				swatch.style.background = spec.swatch;
+				meta.prepend(swatch);
+			}
+			parts.push(meta);
+		}
+		if (spec.body !== void 0) parts.push(el("p", "ink-card-body", spec.body));
+		const actions = el("div", "ink-card-actions");
+		for (const [label, fn] of Object.entries(spec.actions)) {
+			const button = el("button", "", label);
+			button.type = "button";
+			button.addEventListener("click", () => act(fn));
+			actions.append(button);
+		}
+		parts.push(actions);
+		panel.replaceChildren(...parts);
+		if (focused >= 0) {
+			const now = buttons();
+			(now[focused] ?? now[0])?.focus({ preventScroll: true });
+		}
+	};
+	ctx.onDocument(() => {
+		const stop = records.list.subscribe(() => {
+			if (acting || shown === null) return;
+			const record = current();
+			if (record) render(record);
+			else close();
+		});
+		return () => {
+			stop();
+			shown = null;
+			expand(null);
+			popover?.destroy();
+			popover = null;
+			root = null;
+		};
+	});
+	return {
+		open(record, mark) {
+			const viewer = mark.closest("[data-ink-root]");
+			if (!viewer) return;
+			if (viewer !== root) {
+				popover?.destroy();
+				root = viewer;
+				popover = createPopover({
+					root: viewer,
+					attrs: { class: "ink-card" },
+					focusReturn: createFocusReturn({
+						root: () => viewer,
+						activated: () => null
+					}),
+					onDismiss: close
+				});
+			}
+			shown = record.id;
+			render(record);
+			popover.showAt(mark);
+			expand(mark);
+			popover.panel.querySelector(".ink-card-actions > button")?.focus();
+		},
+		expanded: (mark) => mark === expanded
+	};
+}
+//#endregion
+//#region src/dom/plugins/api/marks.ts
+/** Events stopped on a mark, so the viewer's root never sees a press on it. */
+const STOPPED = [
+	"pointerdown",
+	"pointerup",
+	"mousedown",
+	"mouseup",
+	"click"
+];
+/** Attributes the plugin's `attrs` cannot set: core sets them, or they have options of their own. */
+const RESERVED = /* @__PURE__ */ new Set([
+	"style",
+	"class",
+	"type"
+]);
+function createMarks(ctx, records, opts) {
+	const applied = /* @__PURE__ */ new WeakMap();
+	const marked = (record) => opts.where?.(record) ?? true;
+	const spec = opts.card?.bind(opts);
+	const card = spec && createCard(ctx, records, {
+		spec,
+		marked,
+		marks: (root) => [...root.querySelectorAll(`.ink-plugin-layer[data-plugin="${ctx.id}"] > button`)].filter((mark) => applied.has(mark))
+	});
+	/** What activating a mark does. */
+	const activate = (record, mark) => {
+		card?.open(record, mark);
+		opts.onActivate?.(record, mark);
+	};
+	const create = (doc) => {
+		const mark = doc.createElement("button");
+		if (opts.className) mark.className = opts.className;
+		for (const type of STOPPED) mark.addEventListener(type, (e) => e.stopPropagation());
+		mark.addEventListener("click", () => {
+			const state = applied.get(mark);
+			if (state) activate(state.record, mark);
+		});
+		return mark;
+	};
+	/** Brings `mark` up to date with `record`, placed through `transform`. */
+	const apply = (mark, record, transform) => {
+		const prev = applied.get(mark);
+		const style = opts.style?.(record) ?? {};
+		const styleNames = Object.keys(style).map(toCssName);
+		const attrs = Object.fromEntries(Object.entries(opts.attrs?.(record) ?? {}).filter(([name]) => !RESERVED.has(name.toLowerCase())));
+		for (const name of prev?.style ?? []) if (!styleNames.includes(name)) mark.style.removeProperty(name);
+		for (const key of prev?.attrs ?? []) if (!(key in attrs)) mark.removeAttribute(key);
+		for (const [key, value] of Object.entries(style)) mark.style.setProperty(toCssName(key), value);
+		for (const [name, value] of Object.entries(attrs)) mark.setAttribute(name, value);
+		mark.type = "button";
+		mark.style.position = "absolute";
+		mark.dataset.record = record.id;
+		mark.dataset.plugin = ctx.id;
+		mark.setAttribute("aria-label", opts.label(record));
+		if (card) {
+			mark.setAttribute("aria-haspopup", "dialog");
+			mark.setAttribute("aria-expanded", String(card.expanded(mark)));
+		}
+		const r = transform.toCssRect(opts.rect(record));
+		mark.style.left = `${r.left}px`;
+		mark.style.top = `${r.top}px`;
+		mark.style.width = `${r.width}px`;
+		mark.style.height = `${r.height}px`;
+		applied.set(mark, {
+			record,
+			style: styleNames,
+			attrs: Object.keys(attrs)
+		});
+	};
+	/**
+	* Makes `el`'s marks match the page's records, in list order: marks that stay are moved,
+	* new ones inserted, the rest removed.
+	*/
+	const draw = (el, page, transform) => {
+		const list = records.list.get().filter((r) => r.page === page && marked(r));
+		const ids = new Set(list.map((r) => r.id));
+		const kept = /* @__PURE__ */ new Map();
+		for (const mark of [...el.children]) {
+			const id = mark.dataset.record;
+			if (id !== void 0 && ids.has(id) && !kept.has(id)) kept.set(id, mark);
+			else mark.remove();
+		}
+		let next = el.firstElementChild;
+		for (const record of list) {
+			const mark = kept.get(record.id) ?? create(el.ownerDocument);
+			apply(mark, record, transform);
+			if (mark === next) next = mark.nextElementSibling;
+			else el.insertBefore(mark, next);
+		}
+	};
+	let scrolling = false;
+	/** Ids that started to get a mark in the change under way, read once it settles. */
+	const fresh = /* @__PURE__ */ new Set();
+	/** Scrolls to the first fresh record still marked, so a batch of adds scrolls once. */
+	const reveal = () => {
+		const [first] = [...fresh].map((id) => records.find(id)).filter((r) => r !== void 0 && marked(r)).sort(readingOrder((r) => opts.rect(r)));
+		fresh.clear();
+		if (first) ctx.scrollTo(first.page, opts.rect(first), { behavior: reducedMotion() ? "instant" : "smooth" });
+	};
+	/** Notes a record that starts to get a mark; replaces (undo, redo, reset) never count. */
+	const watch = (change) => {
+		const record = change.kind === "add" ? change.record : change.kind === "update" && !marked(change.before) ? change.after : void 0;
+		if (!record || !marked(record)) return;
+		if (fresh.size === 0) queueMicrotask(reveal);
+		fresh.add(record.id);
+	};
+	const layer = ctx.layer({ render: draw });
+	ctx.onDocument(() => {
+		const stopDraw = records.list.subscribe(() => layer.invalidate());
+		const stopWatch = records.store()?.on("change", (change) => {
+			if (scrolling) watch(change);
+		});
+		return () => {
+			stopDraw();
+			stopWatch?.();
+			fresh.clear();
+		};
+	});
+	const handle = {
+		refresh: () => layer.invalidate(),
+		scrollToFirst() {
+			scrolling = true;
+			return handle;
+		}
+	};
+	return handle;
+}
+/** Page first, then top to bottom and left to right, by each record's rect in user space. */
+function readingOrder(rect) {
+	return (a, b) => {
+		const ra = rect(a);
+		const rb = rect(b);
+		return a.page - b.page || rb.y + rb.height - (ra.y + ra.height) || ra.x - rb.x;
+	};
+}
+function reducedMotion() {
+	return globalThis.matchMedia?.("(prefers-reduced-motion: reduce)").matches ?? false;
+}
+/** `borderColor` → `border-color`, as `setProperty` takes it; `--custom` names stay as given. */
+function toCssName(key) {
+	return key.startsWith("--") ? key : key.replace(/[A-Z]/g, (c) => `-${c.toLowerCase()}`);
+}
+//#endregion
+//#region src/dom/plugins/api/links.ts
+function isObject(value) {
+	return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+/** Links `type` annotations to records; registers one `onAnnotationEdit` listener. */
+function createLink(deps, type, spec) {
+	const linkOf = (a) => {
+		if (a.type !== type) return void 0;
+		const own = a.custom?.[deps.plugin];
+		const id = isObject(own) ? own[deps.name] : void 0;
+		return typeof id === "string" ? id : void 0;
+	};
+	deps.onAnnotationEdit((edit) => {
+		if (edit.kind === "add") return;
+		const annotation = edit.kind === "remove" ? edit.annotation : edit.after;
+		const id = linkOf(annotation);
+		const record = id === void 0 ? void 0 : deps.find(id);
+		if (!record) return;
+		if (edit.kind === "remove") spec.onRemoved?.(record, annotation);
+		else spec.onChanged?.(record, annotation);
+	});
+	return {
+		add(record) {
+			const doc = deps.document();
+			if (!doc) return void 0;
+			const { color, custom, ...fields } = spec.from(record);
+			const own = custom?.[deps.plugin];
+			return doc.annotations.add({
+				...fields,
+				type,
+				color: color ?? doc.annotations.defaults.color(type),
+				custom: {
+					...custom,
+					[deps.plugin]: {
+						...isObject(own) ? own : {},
+						[deps.name]: record.id
+					}
+				}
+			});
+		},
+		of(record) {
+			const doc = deps.document();
+			return doc ? doc.annotations.list.get().filter((a) => linkOf(a) === record.id) : [];
+		}
+	};
+}
+//#endregion
+//#region src/dom/plugins/api/records.ts
+const EMPTY$1 = Object.freeze([]);
+/** The list of whichever store `source` holds, `[]` for none; emits on swaps and changes. */
+function listOf(source) {
+	const read = (store) => store?.list.get() ?? EMPTY$1;
+	return {
+		get: () => read(source.get()),
+		subscribe(fn) {
+			let last = read(source.get());
+			let stopList;
+			const emit = (next) => {
+				if (Object.is(next, last) || next.length === 0 && last.length === 0) return;
+				last = next;
+				fn(next);
+			};
+			const follow = (store) => {
+				stopList?.();
+				stopList = store?.list.subscribe(emit);
+				emit(read(store));
+			};
+			follow(source.get());
+			const stopSource = source.subscribe(follow);
+			return () => {
+				stopSource();
+				stopList?.();
+			};
+		}
+	};
+}
+function matches(record, match) {
+	return Object.entries(match).every(([k, v]) => record[k] === v);
+}
+/**
+* Builds a handle over `source`, a plugin store from `ctx.store`. Every call reads the store
+* `source` holds then.
+*/
+function createRecords(deps, source, base = source) {
+	const current = () => source.get();
+	const all = () => current()?.list.get() ?? EMPTY$1;
+	return {
+		list: listOf(source),
+		all,
+		find: (id) => current()?.get(id),
+		has: (id) => current()?.get(id) !== void 0,
+		where: (match) => all().filter(typeof match === "function" ? match : (r) => matches(r, match)),
+		add: (record) => current()?.add(record),
+		addMissing(records) {
+			const store = current();
+			if (!store) return [];
+			const added = [];
+			deps.batch(() => {
+				for (const record of records) if (!store.get(record.id)) added.push(store.add(record));
+			});
+			return added;
+		},
+		update: (id, patch) => current()?.update(id, patch),
+		remove: (id) => current()?.remove(id),
+		in(doc) {
+			const captured = deps.storesDocument() === doc ? base.get() : null;
+			return createRecords(deps, derived(base, (store) => store && store === captured ? store : null), base);
+		},
+		store: current,
+		annotates: (type, spec) => createLink({
+			plugin: deps.plugin,
+			name: deps.name,
+			onAnnotationEdit: (fn) => deps.onAnnotationEdit(fn),
+			document: () => current() ? deps.storesDocument() : null,
+			find: (id) => current()?.get(id)
+		}, type, spec)
+	};
+}
+//#endregion
+//#region src/dom/plugins/api/api.ts
+function createPluginApi(ctx, options) {
+	let storesDocument = null;
+	ctx.onDocument((doc) => {
+		storesDocument = doc;
+		return () => {
+			storesDocument = null;
+		};
+	});
+	const batch = (fn) => ctx.history.batch(fn);
+	return {
+		...ctx,
+		records(name, opts) {
+			const source = ctx.store(name, opts ?? options.records?.[name]);
+			return createRecords({
+				batch,
+				storesDocument: () => storesDocument,
+				plugin: ctx.id,
+				name,
+				onAnnotationEdit: (fn) => ctx.onAnnotationEdit(fn)
+			}, source);
+		},
+		batch,
+		command: (id, label, run, opts) => createCommand(ctx, id, label, run, opts),
+		marks: (records, opts) => createMarks(ctx, records, opts)
+	};
+}
+//#endregion
+//#region src/dom/plugins/define.ts
+const PLUGIN_ID = /^[a-z][a-z0-9-]*$/;
+function checkId(id) {
+	if (!PLUGIN_ID.test(id)) throw new InkError("InvalidPluginId", `Plugin id ${JSON.stringify(id)} must be lower-case kebab`, { id });
+}
+function definePlugin(plugin, setup) {
+	if (typeof plugin !== "string") {
+		checkId(plugin.id);
+		return plugin;
+	}
+	const id = plugin;
+	checkId(id);
+	return (options = {}) => ({
+		id,
+		setup: (ctx) => setup?.(createPluginApi(ctx, options), options)
+	});
+}
+//#endregion
+//#region src/dom/plugins/commands.ts
+/**
+* The error for a command id no plugin registered, naming the ids that were. Bindings log it
+* rather than throw, and show the control as it is before the plugins are set up.
+*/
+function unknownCommand(id, registered) {
+	const known = registered.length > 0 ? registered.join(", ") : "none";
+	return new InkError("UnknownCommand", `No plugin registered a command ${id} (registered: ${known})`, {
+		id,
+		registered
+	});
+}
+const EMPTY = {
+	get: () => "",
+	subscribe: () => () => {}
+};
+/**
+* A boolean readable computed from `sources`. Like `derived`, it subscribes to the sources only
+* while it has subscribers of its own; `watch` re-reads them, so a source can be swapped while
+* subscribed (a document's status when the document changes).
+*/
+function computed(compute, watch) {
+	const subs = /* @__PURE__ */ new Set();
+	let cached = false;
+	let stop;
+	const changed = () => {
+		const next = compute();
+		if (next === cached) return;
+		cached = next;
+		for (const sub of [...subs]) sub(next);
+	};
+	return {
+		get: () => stop ? cached : compute(),
+		subscribe(sub) {
+			if (!stop) {
+				cached = compute();
+				stop = watch(changed);
+			}
+			subs.add(sub);
+			return () => {
+				if (!subs.delete(sub) || subs.size > 0) return;
+				stop?.();
+				stop = void 0;
+			};
+		}
+	};
+}
+/** True while `document` holds a document whose status is ready. */
+function documentReady(document) {
+	return computed(() => document.get()?.status.get().state === "ready", (changed) => {
+		let stopStatus;
+		const follow = (doc) => {
+			stopStatus?.();
+			stopStatus = doc?.status.subscribe(changed);
+			changed();
+		};
+		const stopDocument = document.subscribe(follow);
+		follow(document.get());
+		return () => {
+			stopDocument();
+			stopStatus?.();
+		};
+	});
+}
+/**
+* Plugin commands by namespaced id. A command is busy from `run()` until the promise its spec
+* returned settles, and is disabled meanwhile, so a double click runs it once.
+*/
+function createCommandRegistry(opts) {
+	const commands = /* @__PURE__ */ new Map();
+	const ready = documentReady(opts.document);
+	return {
+		commands,
+		add(plugin, spec) {
+			const id = `${plugin}.${spec.id}`;
+			if (commands.has(id)) throw new InkError("DuplicateId", `A command with id ${id} already exists`, { id });
+			if (!spec.label.trim()) throw new InkError("InvalidCommandLabel", `Command ${id} needs a label`, { id });
+			const busy = writable(false);
+			const allowed = spec.enabled ?? ready;
+			const enabled = computed(() => allowed.get() && !busy.get(), (changed) => {
+				const stops = [allowed.subscribe(changed), busy.subscribe(changed)];
+				return () => {
+					for (const stop of stops) stop();
+				};
+			});
+			const command = {
+				id,
+				label: spec.label,
+				icon: spec.icon,
+				enabled,
+				busy: readonly(busy),
+				status: spec.status ?? EMPTY,
+				async run() {
+					if (!enabled.get()) return;
+					busy.set(true);
+					try {
+						await spec.run();
+					} catch (error) {
+						if (!(isInkError(error) && error.code === "DocumentDestroyed")) console.error(error);
+					} finally {
+						busy.set(false);
+					}
+				}
+			};
+			commands.set(id, command);
+			return command;
+		}
+	};
+}
+//#endregion
+//#region src/dom/plugins/layer.ts
+function createLayerRegistry() {
+	const layers = [];
+	const listeners = /* @__PURE__ */ new Set();
+	const emit = (event) => {
+		for (const listener of [...listeners]) listener(event);
+	};
+	return {
+		layers,
+		watchLayers(listener) {
+			listeners.add(listener);
+			return () => listeners.delete(listener);
+		},
+		add(layer) {
+			layers.push(layer);
+			emit({
+				type: "add",
+				layer
+			});
+			return { invalidate: (page) => emit({
+				type: "invalidate",
+				layer,
+				page
+			}) };
+		}
+	};
+}
+/** Runs a plugin's drawing; a throw is logged so one plugin cannot break the page. */
+function guard$1(fn) {
+	try {
+		fn();
+	} catch (error) {
+		console.error(error);
+	}
+}
+const CHILD_RULE = ":where(.ink-plugin-layer > *) { pointer-events: auto; }";
+/** One sheet per window: a constructed sheet can only be adopted in its own window. */
+const childSheets = /* @__PURE__ */ new WeakMap();
+/**
+* Puts the children's `pointer-events: auto` rule in the document or shadow root `el` lives
+* in: an adopted sheet, again if the host has since replaced its adopted sheets, or one
+* `<style>` element where adopted sheets are missing. A layer not yet connected gets it on a
+* later draw, which calls this again.
+*/
+function adoptChildRule(el) {
+	if (!el.isConnected) return;
+	const root = el.getRootNode();
+	const doc = el.ownerDocument;
+	const win = doc.defaultView;
+	if (!root.adoptedStyleSheets || !win) {
+		const parent = root === doc ? doc.head ?? doc.documentElement : root;
+		if ([...parent.children].some((c) => c.matches("style[data-ink-plugin-layer]"))) return;
+		const style = doc.createElement("style");
+		style.dataset.inkPluginLayer = "";
+		style.textContent = CHILD_RULE;
+		parent.append(style);
+		return;
+	}
+	let sheet = childSheets.get(win);
+	if (!sheet) {
+		sheet = new win.CSSStyleSheet();
+		sheet.replaceSync(CHILD_RULE);
+		childSheets.set(win, sheet);
+	}
+	if (!root.adoptedStyleSheets.includes(sheet)) root.adoptedStyleSheets = [...root.adoptedStyleSheets, sheet];
+}
+/**
+* Mounts `source`'s layers on the pages the engine mounts, and follows it: a layer added later
+* is drawn on every mounted page, and an invalidate redraws its page, or all of them.
+*
+* @internal For bindings, which mount plugin layers; plugin authors add a layer with
+* `ctx.layer`.
+*/
+function createPluginLayers(source) {
+	const pages = /* @__PURE__ */ new Map();
+	const draw = (layer, el, page, t) => {
+		adoptChildRule(el);
+		guard$1(() => layer.render(el, page, t));
+	};
+	const add = (layer, page, state) => {
+		const el = state.host.ownerDocument.createElement("div");
+		el.className = "ink-plugin-layer";
+		el.dataset.plugin = layer.plugin;
+		el.style.cssText = "position:absolute;inset:0;pointer-events:none;";
+		state.host.append(el);
+		state.elements.set(layer, el);
+		draw(layer, el, page, state.transform);
+	};
+	return {
+		mount(page, host, transform) {
+			const state = {
+				host,
+				transform,
+				elements: /* @__PURE__ */ new Map()
+			};
+			pages.set(page, state);
+			for (const layer of source.layers) add(layer, page, state);
+			return {
+				update(next) {
+					state.transform = next;
+					for (const [layer, el] of state.elements) draw(layer, el, page, next);
+				},
+				destroy() {
+					if (pages.get(page) === state) pages.delete(page);
+					for (const [layer, el] of state.elements) {
+						if (layer.destroy) guard$1(() => layer.destroy?.(el, page));
+						el.remove();
+					}
+					state.elements.clear();
+				}
+			};
+		},
+		destroy: source.watchLayers((event) => {
+			if (event.type === "add") {
+				for (const [page, state] of pages) add(event.layer, page, state);
+				return;
+			}
+			const redraw = (page, state) => {
+				const el = state.elements.get(event.layer);
+				if (el) draw(event.layer, el, page, state.transform);
+			};
+			if (event.page === void 0) for (const [page, state] of pages) redraw(page, state);
+			else {
+				const state = pages.get(event.page);
+				if (state) redraw(event.page, state);
+			}
+		})
+	};
+}
+//#endregion
+//#region src/dom/plugins/host.ts
+/** What `ctx.search` is when the host has no search: closed, and every action does nothing. */
+const inertSearch = {
+	state: readonly(writable({
+		open: false,
+		query: "",
+		matchCase: false,
+		hits: [],
+		current: -1,
+		scanning: false
+	})),
+	open() {},
+	setQuery() {},
+	setMatchCase() {},
+	next() {},
+	previous() {},
+	close() {}
+};
+/**
+* `value` seen with `extra` laid over it, read-only. Everything else is read from and written to
+* `value` itself, and its methods are bound to it, so a method always runs on the original
+* (a class instance keeps its `#private` fields, and `this.id` is the plugin's own id).
+*/
+function withProps(value, extra) {
+	const bound = /* @__PURE__ */ new Map();
+	const own = (key) => Object.hasOwn(extra, key);
+	return new Proxy(Object.create(null), {
+		get(_, key) {
+			if (own(key)) return extra[key];
+			const v = Reflect.get(value, key, value);
+			if (typeof v !== "function") return v;
+			let entry = bound.get(key);
+			if (entry?.fn !== v) {
+				entry = {
+					fn: v,
+					bound: v.bind(value)
+				};
+				bound.set(key, entry);
+			}
+			return entry.bound;
+		},
+		set: (_, key, v) => !own(key) && Reflect.set(value, key, v, value),
+		defineProperty(target, key, d) {
+			if (own(key) || !Reflect.defineProperty(value, key, d)) return false;
+			const defined = Reflect.getOwnPropertyDescriptor(value, key);
+			if (defined && !defined.configurable) Reflect.defineProperty(target, key, defined);
+			return true;
+		},
+		deleteProperty: (_, key) => !own(key) && Reflect.deleteProperty(value, key),
+		has: (_, key) => own(key) || Reflect.has(value, key),
+		ownKeys: () => [.../* @__PURE__ */ new Set([...Reflect.ownKeys(value), ...Reflect.ownKeys(extra)])],
+		getOwnPropertyDescriptor(target, key) {
+			const d = Reflect.getOwnPropertyDescriptor(own(key) ? extra : value, key);
+			const fixed = Reflect.getOwnPropertyDescriptor(target, key)?.configurable === false;
+			return d && {
+				...d,
+				configurable: !fixed
+			};
+		},
+		getPrototypeOf: () => Reflect.getPrototypeOf(value)
+	});
+}
+/** Runs a plugin callback; a throw is logged so one plugin cannot break the others. */
+function guard(fn) {
+	try {
+		return fn();
+	} catch (error) {
+		console.error(error);
+		return;
+	}
+}
+/**
+* @internal For bindings and `createViewer`, which place a viewer's plugins; plugin authors use
+* `definePlugin` and never call it.
+*/
+function createPluginHost(opts) {
+	const seen = /* @__PURE__ */ new Set();
+	for (const plugin of opts.plugins) {
+		if (seen.has(plugin.id)) throw new InkError("DuplicatePlugin", `A plugin with id ${plugin.id} is registered twice`, { id: plugin.id });
+		seen.add(plugin.id);
+	}
+	const registry = createCommandRegistry({ document: opts.document });
+	const tools = [];
+	const decorators = [];
+	const layers = createLayerRegistry();
+	const requests = [];
+	const documentFns = [];
+	const editFns = [];
+	const setupCleanups = [];
+	const redecorators = /* @__PURE__ */ new Set();
+	let opened = null;
+	let destroyed = false;
+	/** Creates a requested store for the open document and has its history track it. */
+	const openStore = (request, state, history) => {
+		const store = createRecordStore(request.key, {
+			initial: request.opts.initial?.(state.doc) ?? [],
+			...request.opts.onChange && { onChange: request.opts.onChange }
+		});
+		state.stores.push(store);
+		state.detach.push(history.track(store));
+		request.current.set(store);
+	};
+	const runOnDocument = (fn, state) => {
+		const cleanup = guard(() => fn(state.doc));
+		if (typeof cleanup === "function") state.cleanups.push(cleanup);
+	};
+	const open = (doc) => {
+		const history = opts.history();
+		const state = {
+			doc,
+			stores: [],
+			detach: [],
+			cleanups: []
+		};
+		opened = state;
+		for (const request of requests) openStore(request, state, history);
+		for (const fn of editFns) state.detach.push(history.react(fn));
+		for (const fn of documentFns) runOnDocument(fn, state);
+	};
+	const close = () => {
+		const state = opened;
+		if (!state) return;
+		opened = null;
+		for (const detach of state.detach) detach();
+		for (const store of state.stores) store.destroy();
+		for (const request of requests) request.current.set(null);
+		for (const cleanup of state.cleanups.reverse()) guard(cleanup);
+	};
+	const contextFor = (plugin) => {
+		const storeNames = /* @__PURE__ */ new Set();
+		return {
+			id: plugin.id,
+			document: opts.document,
+			history: { batch: (fn) => opts.history().batch(fn) },
+			activated: opts.activated,
+			setActivated: (id) => opts.setActivated(id),
+			root: opts.root,
+			commands: { add: (spec) => registry.add(plugin.id, spec) },
+			tools: { add(tool) {
+				const id = `${plugin.id}.${tool.id}`;
+				if (tools.some((t) => t.id === id)) throw new InkError("DuplicateId", `A tool with id ${id} already exists`, { id });
+				tools.push(withProps(tool, { id }));
+			} },
+			decorate(fn) {
+				decorators.push(fn);
+			},
+			redecorate() {
+				for (const listener of [...redecorators]) listener();
+			},
+			store(name, storeOpts = {}) {
+				const key = `${plugin.id}.${name}`;
+				if (storeNames.has(name)) throw new InkError("DuplicateId", `A store with key ${key} already exists`, { key });
+				storeNames.add(name);
+				const request = {
+					key,
+					opts: storeOpts,
+					current: writable(null)
+				};
+				requests.push(request);
+				if (opened) openStore(request, opened, opts.history());
+				return readonly(request.current);
+			},
+			onDocument(fn) {
+				documentFns.push(fn);
+				if (opened) runOnDocument(fn, opened);
+			},
+			onAnnotationEdit(fn) {
+				editFns.push(fn);
+				if (opened) opened.detach.push(opts.history().react(fn));
+			},
+			layer(spec) {
+				return layers.add(withProps(spec, { plugin: plugin.id }));
+			},
+			scrollTo(page, rect, scrollOpts) {
+				opts.viewport?.()?.scrollToRect(page, rect, scrollOpts);
+			},
+			search: opts.search ?? inertSearch
+		};
+	};
+	for (const plugin of opts.plugins) {
+		let cleanup;
+		try {
+			cleanup = plugin.setup(contextFor(plugin));
+		} catch (error) {
+			for (const done of setupCleanups.reverse()) guard(done);
+			throw error;
+		}
+		if (typeof cleanup === "function") setupCleanups.push(cleanup);
+	}
+	const current = opts.document.get();
+	if (current) open(current);
+	const stopDocument = opts.document.subscribe((doc) => {
+		close();
+		if (doc) open(doc);
+	});
+	return {
+		commands: registry.commands,
+		command: (id) => registry.commands.get(id),
+		tools,
+		decorate(annotation) {
+			const all = [opts.decorate?.(), ...decorators];
+			let merged;
+			for (const fn of all) {
+				const d = fn && guard(() => fn(annotation));
+				if (!d) continue;
+				merged ??= {};
+				if (d.data) merged = {
+					...merged,
+					data: {
+						...d.data,
+						...merged.data
+					}
+				};
+				if (d.classes) merged = {
+					...merged,
+					classes: [...merged.classes ?? [], ...d.classes]
+				};
+				if (merged.description === void 0 && d.description !== void 0) merged = {
+					...merged,
+					description: d.description
+				};
+			}
+			return merged;
+		},
+		layers: layers.layers,
+		watchLayers: (listener) => layers.watchLayers(listener),
+		watchRedecorate(listener) {
+			const run = () => listener();
+			redecorators.add(run);
+			return () => {
+				redecorators.delete(run);
+			};
+		},
+		destroy() {
+			if (destroyed) return;
+			destroyed = true;
+			stopDocument();
+			close();
+			for (const cleanup of setupCleanups.reverse()) guard(cleanup);
+		}
+	};
+}
+//#endregion
+//#region src/dom/page-mount.ts
+/**
+* Canvas, text layer, annotation overlay and any plugin layers for one page, stacked in that
+* order.
+*/
+function createPageMount(opts) {
+	const { document, page, host, transform } = opts;
+	const callbacks = (layer) => ({
+		...opts.onError ? { onError: (error) => opts.onError?.(error, layer) } : {},
+		...opts.onRendered ? { onRendered: () => opts.onRendered?.(layer) } : {}
+	});
+	const renderer = createPageRenderer({
+		document,
+		page,
+		host,
+		transform,
+		...opts.devicePixelRatio === void 0 ? {} : { devicePixelRatio: opts.devicePixelRatio },
+		...callbacks("canvas")
+	});
+	const textLayer = createTextLayer({
+		document,
+		page,
+		host,
+		transform,
+		...callbacks("text")
+	});
+	const marks = opts.highlights?.mount(page, host, transform);
+	const overlay = createOverlay({
+		host,
+		page,
+		store: opts.store,
+		transform,
+		document,
+		...opts.devicePixelRatio === void 0 ? {} : { devicePixelRatio: opts.devicePixelRatio },
+		...opts.onActivate ? { onActivate: (id) => opts.onActivate?.(id) } : {},
+		...opts.isCustom ? { isCustom: (a) => opts.isCustom?.(a) === true } : {},
+		...opts.decorate ? { decorate: opts.decorate } : {}
+	});
+	const layers = opts.layers?.mount(page, host, transform);
+	return {
+		renderer,
+		textLayer,
+		overlay,
+		update(next) {
+			renderer.update(next);
+			textLayer.update(next);
+			overlay.update(next);
+			layers?.update(next);
+			marks?.update(next);
+		},
+		destroy() {
+			layers?.destroy();
+			overlay.destroy();
+			marks?.destroy();
+			textLayer.destroy();
+			renderer.destroy();
+		}
+	};
+}
+//#endregion
+//#region src/dom/tools/options.ts
+function createToolOptions(tools = []) {
+	const byId = /* @__PURE__ */ new Map();
+	const views = /* @__PURE__ */ new Map();
+	const entry = (id) => {
+		const w = byId.get(id);
+		if (!w) throw new RangeError(`Unknown tool ${id}`);
+		return w;
+	};
+	function register(list) {
+		for (const t of list) {
+			if (byId.has(t.id)) continue;
+			const w = writable({ ...t.defaultOptions ?? {} });
+			byId.set(t.id, w);
+			views.set(t.id, readonly(w));
+		}
+	}
+	register(tools);
+	return {
+		readable(id) {
+			entry(id);
+			return views.get(id);
+		},
+		get: (id) => entry(id).get(),
+		merge(id, patch) {
+			const w = entry(id);
+			w.set({
+				...w.get(),
+				...patch
+			});
+		},
+		register
+	};
+}
+//#endregion
+//#region src/dom/tools/selection-edit.ts
+const CORNERS = [
+	"nw",
+	"ne",
+	"sw",
+	"se"
+];
+const ENDS = ["start", "end"];
+const CALLOUT = "callout";
+/** Pointer travel, CSS px, before a press on an annotation becomes a move. */
+const DRAG_THRESHOLD = 3;
+function createSelectionEdit(ctx, opts = {}) {
+	let mode = { kind: "idle" };
+	const batch = (fn) => ctx.history ? ctx.history.batch(fn) : fn();
+	const reset = () => {
+		if (mode.kind === "marquee") mode.el.remove();
+		if (mode.kind === "move") {
+			for (const el of mode.els) el.style.transform = "";
+			ctx.root.removeAttribute("data-ink-dragging");
+		}
+		if (mode.kind === "resize" && mode.el) {
+			mode.el.style.transform = "";
+			mode.el.style.transformOrigin = "";
+			mode.el.style.visibility = "";
+		}
+		if (mode.kind === "resize") mode.preview?.remove();
+		if (mode.kind === "endpoint") {
+			mode.preview.remove();
+			if (mode.el) mode.el.style.visibility = "";
+		}
+		mode = { kind: "idle" };
+	};
+	const elementIn = (root, id) => root.querySelector(`[data-annotation="${CSS.escape(id)}"]`) ?? void 0;
+	const previewFor = (host, a) => {
+		const preview = host.ownerDocument.createElement("div");
+		preview.className = "ink-annotation ink-edit-preview";
+		preview.dataset.inkPreview = "";
+		preview.dataset.type = a.type;
+		preview.style.cssText = "position:absolute;pointer-events:none;";
+		return preview;
+	};
+	/** Shows `draft` in `preview` beside `el`, which is hidden meanwhile. */
+	const showPreview = (preview, el, draft, start) => {
+		drawPreview(preview, draft, start);
+		if (el) el.style.visibility = "hidden";
+		if (!preview.isConnected) (el?.parentElement ?? start.host).append(preview);
+	};
+	function startHandle(e, hit, a, handle) {
+		const el = elementIn(hit.host, a.id);
+		if (CORNERS.includes(handle) && hasCornerHandles(a)) {
+			const text = a.type === "freetext";
+			mode = {
+				kind: "resize",
+				id: a.id,
+				start: hit,
+				corner: handle,
+				box: text ? hit.transform.toCssRect(freeTextBox(a)) : handleBox(a, hit.transform),
+				el,
+				locked: keepsAspect(a),
+				preview: text && (a.fringe !== void 0 || hasCallout(a)) ? previewFor(hit.host, a) : void 0
+			};
 		} else if (ENDS.includes(handle) && a.type === "line" || handle === CALLOUT && hasCallout(a)) {
 			const preview = previewFor(hit.host, a);
 			mode = {
@@ -3611,6 +4847,8 @@ function onScrollBar(e, root) {
 function inCustomContent(target) {
 	if (!(target instanceof Element)) return false;
 	if (target.closest("[data-ink-editor]")) return true;
+	const layer = target.closest(".ink-plugin-layer");
+	if (layer && layer !== target) return true;
 	const el = target.closest("[data-annotation]");
 	return el !== null && el !== target && el.hasAttribute("data-custom") && target.closest("[data-handle]") === null;
 }
@@ -5364,284 +6602,154 @@ function handleRadioKeys(e, group) {
 	const next = radios[(at + (forward ? 1 : -1) + radios.length) % radios.length];
 	next.focus({ preventScroll: true });
 	next.click();
-}
-/**
-* Arrow keys, Home and End inside a `role="tablist"`: the next (or previous) enabled
-* `role="tab"` takes focus and is chosen, wrapping at the ends.
-*/
-function handleTabKeys(e, tablist) {
-	if (e.defaultPrevented || e.altKey || e.ctrlKey || e.metaKey || e.shiftKey) return;
-	const tabs = [...tablist.querySelectorAll("[role=\"tab\"]:not(:disabled):not([aria-disabled=\"true\"])")];
-	const at = tabs.indexOf(document.activeElement);
-	if (at < 0) return;
-	const last = tabs.length - 1;
-	const next = e.key === "ArrowRight" || e.key === "ArrowDown" ? at === last ? 0 : at + 1 : e.key === "ArrowLeft" || e.key === "ArrowUp" ? at === 0 ? last : at - 1 : e.key === "Home" ? 0 : e.key === "End" ? last : -1;
-	if (next < 0) return;
-	e.preventDefault();
-	tabs[next].focus({ preventScroll: true });
-	tabs[next].click();
-}
-const TABBABLE$1 = [
-	"a[href]",
-	"button:not(:disabled)",
-	"input:not(:disabled):not([type=\"hidden\"])",
-	"select:not(:disabled)",
-	"textarea:not(:disabled)",
-	"[tabindex]"
-].map((s) => `${s}:not([tabindex="-1"])`).join(", ");
-/**
-* Keeps Tab inside `container`, a modal: Tab from its last stop goes to its first, and
-* Shift+Tab from the first to the last.
-*/
-function trapTab(e, container) {
-	if (e.key !== "Tab" || e.defaultPrevented) return;
-	const stops = [...container.querySelectorAll(TABBABLE$1)].filter((el) => !el.matches(":disabled") && el.getClientRects().length > 0);
-	if (stops.length === 0) {
-		e.preventDefault();
-		return;
-	}
-	const first = stops[0];
-	const last = stops[stops.length - 1];
-	const active = document.activeElement;
-	if (e.shiftKey && (active === first || !container.contains(active))) {
-		e.preventDefault();
-		last.focus();
-	} else if (!e.shiftKey && (active === last || !container.contains(active))) {
-		e.preventDefault();
-		first.focus();
-	}
-}
-//#endregion
-//#region src/dom/annotation-element.ts
-/** The overlay element drawn for annotation `id` under `root`, if it is in the DOM. */
-function annotationElementFor(root, id) {
-	return root.querySelector(`[data-annotation="${CSS.escape(id)}"]`);
-}
-/**
-* Resolves the overlay element for `id` and keeps resolving while `root`'s subtree changes:
-* the overlay creates and removes these elements outside any framework (a page mounts as it
-* scrolls into view), so a popover anchored to one has to follow. Calls `onChange` once now
-* and again whenever the answer changes. The returned function stops observing.
-*/
-function observeAnnotationElement(root, id, onChange) {
-	let last;
-	const resolve = () => {
-		const found = annotationElementFor(root, id);
-		if (found === last) return;
-		last = found;
-		onChange(found);
-	};
-	resolve();
-	const observer = new MutationObserver(resolve);
-	observer.observe(root, {
-		childList: true,
-		subtree: true
-	});
-	return () => observer.disconnect();
-}
-//#endregion
-//#region src/dom/popover-focus.ts
-/**
-* A press that will activate an annotation is not a dismissal: the popover follows the
-* activation. Mirrors the overlay's rule: a press on the annotation element or on its drawn
-* shape activates; a press on a custom element's own content belongs to that content.
-*/
-function shouldKeepOpenOnAnnotation(target) {
-	if (!(target instanceof Element)) return false;
-	const annotation = target.closest("[data-annotation]");
-	if (!annotation) return false;
-	return target === annotation || !annotation.hasAttribute("data-custom");
-}
-function createFocusReturn(opts) {
-	let fallbacks = [];
-	/** Set by `beforeRemove`: the close comes from removing the anchor's annotation. */
-	let removing = false;
-	return {
-		beforeRemove(anchor, prefer) {
-			fallbacks = [];
-			removing = true;
-			const siblings = anchor?.parentElement ? [...anchor.parentElement.children].filter((el) => el instanceof HTMLElement && el.hasAttribute("data-annotation")) : [];
-			const i = anchor ? siblings.indexOf(anchor) : -1;
-			if (i >= 0) {
-				const after = siblings.slice(i + 1);
-				const preferred = prefer ? after.filter((el) => el.matches(prefer)) : [];
-				fallbacks.push(...preferred, ...after, ...siblings.slice(0, i).reverse());
-			}
-		},
-		onCloseAutoFocus(event, anchor) {
-			event.preventDefault();
-			const plan = fallbacks;
-			const removed = removing;
-			fallbacks = [];
-			removing = false;
-			const root = opts.root();
-			if (!root) return;
-			const activated = opts.activated();
-			if (activated !== null && annotationElementFor(root, activated)) return;
-			const active = root.ownerDocument.activeElement;
-			if (active && active !== root && root.contains(active)) return;
-			const scroll = root.querySelector("[data-ink-scroll]");
-			(removed ? [...plan, scroll] : [
-				anchor,
-				...plan,
-				scroll
-			]).find((el) => el?.isConnected)?.focus({ preventScroll: true });
-		}
-	};
-}
-//#endregion
-//#region src/dom/viewer/dom.ts
-/** `document.createElement` with attributes and children. */
-function h(tag, attrs = {}, ...children) {
-	const el = document.createElement(tag);
-	for (const [name, value] of Object.entries(attrs)) el.setAttribute(name, value);
-	el.append(...children);
-	return el;
-}
-function button$1(label, onClick) {
-	const b = h("button", { type: "button" }, label);
-	b.addEventListener("click", onClick);
-	return b;
-}
-//#endregion
-//#region src/dom/viewer/popover.ts
-/** Space between the anchor and the panel, and between the panel and the window edge. */
-const GAP = 6;
-const MARGIN = 8;
-const TABBABLE = "button, input, select, textarea, a[href], [tabindex]";
-/**
-* Positions `panel` (fixed) below the `anchor` rectangle, or above it when only that fits,
-* kept inside the window. For panels anchored to something other than an annotation.
-*/
-function placePanel(panel, anchor) {
-	const { innerWidth: vw, innerHeight: vh } = window;
-	panel.style.position = "fixed";
-	panel.style.left = "0px";
-	panel.style.top = "0px";
-	const w = panel.offsetWidth;
-	const ht = panel.offsetHeight;
-	let top = anchor.bottom + GAP;
-	if (top + ht > vh - MARGIN && anchor.top - GAP - ht >= MARGIN) top = anchor.top - GAP - ht;
-	top = Math.max(MARGIN, Math.min(top, vh - ht - MARGIN));
-	const left = Math.max(MARGIN, Math.min(anchor.left, vw - w - MARGIN));
-	panel.style.left = `${left}px`;
-	panel.style.top = `${top}px`;
-}
-/**
-* Creates a non-modal `role="dialog"` panel on `<body>`, marked `data-ink-popover` so the theme
-* gives it its tokens, that an app anchors to an annotation with `show(id)` (for instance on
-* `viewer.activated`). The panel follows the annotation's element as pages mount and unmount:
-* it hides while the element is gone and comes back with it. Tab loops inside the panel, and
-* Escape or a press outside calls `onDismiss`. Call `destroy` when done.
-*/
-function createPopover(opts) {
-	const { root, focusReturn } = opts;
-	const panel = h("div", {
-		...opts.attrs,
-		role: "dialog",
-		"data-ink-popover": "",
-		hidden: ""
-	});
-	document.body.append(panel);
-	let anchoredId = null;
-	let anchor = null;
-	let stopObserving = () => void 0;
-	/** The element that had focus in the panel when the anchor went away. */
-	let stranded = null;
-	const place = () => {
-		if (!anchor || panel.hidden) return;
-		placePanel(panel, anchor.getBoundingClientRect());
-	};
-	const resizes = new ResizeObserver(place);
-	resizes.observe(panel);
-	const onAnchor = (el, closing = false) => {
-		if (anchor) resizes.unobserve(anchor);
-		anchor = el;
-		if (!el) {
-			const active = document.activeElement;
-			if (!closing && !panel.hidden && active instanceof HTMLElement && panel.contains(active)) {
-				const scroll = root.querySelector("[data-ink-scroll]");
-				if (scroll) {
-					stranded = active;
-					scroll.focus({ preventScroll: true });
-				}
-			}
-			panel.hidden = true;
-			return;
-		}
-		resizes.observe(el);
-		const wasHidden = panel.hidden;
-		panel.hidden = false;
-		place();
-		if (wasHidden && stranded) {
-			const back = stranded;
-			stranded = null;
-			const scroll = root.querySelector("[data-ink-scroll]");
-			if (panel.contains(back) && document.activeElement === scroll) back.focus({ preventScroll: true });
-		}
-	};
-	const onKey = (e) => {
-		if (e.key !== "Escape" || panel.hidden || e.defaultPrevented) return;
-		const target = e.target;
-		if (!(target instanceof Node) || !(panel.contains(target) || root.contains(target))) return;
+}
+/**
+* Arrow keys, Home and End inside a `role="tablist"`: the next (or previous) enabled
+* `role="tab"` takes focus and is chosen, wrapping at the ends.
+*/
+function handleTabKeys(e, tablist) {
+	if (e.defaultPrevented || e.altKey || e.ctrlKey || e.metaKey || e.shiftKey) return;
+	const tabs = [...tablist.querySelectorAll("[role=\"tab\"]:not(:disabled):not([aria-disabled=\"true\"])")];
+	const at = tabs.indexOf(document.activeElement);
+	if (at < 0) return;
+	const last = tabs.length - 1;
+	const next = e.key === "ArrowRight" || e.key === "ArrowDown" ? at === last ? 0 : at + 1 : e.key === "ArrowLeft" || e.key === "ArrowUp" ? at === 0 ? last : at - 1 : e.key === "Home" ? 0 : e.key === "End" ? last : -1;
+	if (next < 0) return;
+	e.preventDefault();
+	tabs[next].focus({ preventScroll: true });
+	tabs[next].click();
+}
+const TABBABLE = [
+	"a[href]",
+	"button:not(:disabled)",
+	"input:not(:disabled):not([type=\"hidden\"])",
+	"select:not(:disabled)",
+	"textarea:not(:disabled)",
+	"[tabindex]"
+].map((s) => `${s}:not([tabindex="-1"])`).join(", ");
+/**
+* Keeps Tab inside `container`, a modal: Tab from its last stop goes to its first, and
+* Shift+Tab from the first to the last.
+*/
+function trapTab(e, container) {
+	if (e.key !== "Tab" || e.defaultPrevented) return;
+	const stops = [...container.querySelectorAll(TABBABLE)].filter((el) => !el.matches(":disabled") && el.getClientRects().length > 0);
+	if (stops.length === 0) {
 		e.preventDefault();
-		opts.onDismiss();
-	};
-	const onPress = (e) => {
-		if (panel.hidden || panel.contains(e.target)) return;
-		if (shouldKeepOpenOnAnnotation(e.target)) return;
-		opts.onDismiss();
-	};
-	const onTab = (e) => {
-		if (e.key !== "Tab" || e.altKey || e.ctrlKey || e.metaKey) return;
-		const tabbable = [...panel.querySelectorAll(TABBABLE)].filter((el) => !el.disabled && el.tabIndex >= 0);
-		const first = tabbable[0];
-		const last = tabbable.at(-1);
-		if (!first || !last) return;
-		const active = document.activeElement;
-		if (e.shiftKey ? active !== first : active !== last) return;
+		return;
+	}
+	const first = stops[0];
+	const last = stops[stops.length - 1];
+	const active = document.activeElement;
+	if (e.shiftKey && (active === first || !container.contains(active))) {
 		e.preventDefault();
-		(e.shiftKey ? last : first).focus();
+		last.focus();
+	} else if (!e.shiftKey && (active === last || !container.contains(active))) {
+		e.preventDefault();
+		first.focus();
+	}
+}
+//#endregion
+//#region src/dom/search/highlights.ts
+const NO_HITS = [];
+/** One box over the quad: its CSS bounding box, clipped to the quad when it is not upright. */
+function hitBox(doc, t, quad) {
+	const { p1, p2, p3, p4 } = t.toCssQuad(quad);
+	const xs = [
+		p1.x,
+		p2.x,
+		p3.x,
+		p4.x
+	];
+	const ys = [
+		p1.y,
+		p2.y,
+		p3.y,
+		p4.y
+	];
+	const left = Math.min(...xs);
+	const top = Math.min(...ys);
+	const width = Math.max(...xs) - left;
+	const height = Math.max(...ys) - top;
+	const el = doc.createElement("div");
+	el.dataset.searchHit = "";
+	let css = `position:absolute;left:${left}px;top:${top}px;width:${width}px;height:${height}px;`;
+	if (!(Math.abs(p1.y - p2.y) < .01 && Math.abs(p3.y - p4.y) < .01 || Math.abs(p1.x - p2.x) < .01 && Math.abs(p3.x - p4.x) < .01) && width > 0 && height > 0) {
+		const pt = (p) => `${((p.x - left) / width * 100).toFixed(3)}% ${((p.y - top) / height * 100).toFixed(3)}%`;
+		css += `clip-path:polygon(${[
+			p1,
+			p2,
+			p4,
+			p3
+		].map(pt).join(",")});`;
+	}
+	el.style.cssText = css;
+	return el;
+}
+function createSearchHighlights(search) {
+	const pages = /* @__PURE__ */ new Map();
+	const sameHits = (a, b) => a.length === b.length && a.every((hit, i) => hit === b[i]);
+	const draw = (page, force, hits) => {
+		const { current: index, hits: all } = search.state.get();
+		const current = all[index];
+		const shown = current && hits.includes(current) ? current : void 0;
+		if (!force && sameHits(page.hits, hits) && page.current === shown) return;
+		page.hits = hits;
+		page.current = shown;
+		const doc = page.el.ownerDocument;
+		page.el.replaceChildren(...hits.flatMap((hit) => hit.quads.map((quad) => {
+			const box = hitBox(doc, page.transform, quad);
+			if (hit === shown) box.dataset.current = "";
+			return box;
+		})));
+	};
+	/** The hits on `page`: a run of the state's hits, which are in `(page, start)` order. */
+	const hitsOn = (all, page) => {
+		const first = (p) => {
+			let low = 0;
+			let high = all.length;
+			while (low < high) {
+				const mid = low + high >>> 1;
+				if (all[mid].page < p) low = mid + 1;
+				else high = mid;
+			}
+			return low;
+		};
+		const from = first(page);
+		const to = first(page + 1);
+		return to > from ? all.slice(from, to) : NO_HITS;
 	};
-	panel.addEventListener("keydown", onTab);
-	document.addEventListener("keydown", onKey);
-	document.addEventListener("pointerdown", onPress, true);
-	document.addEventListener("scroll", place, true);
-	window.addEventListener("resize", place);
 	return {
-		panel,
-		get anchor() {
-			return anchor;
-		},
-		show(id) {
-			if (id === anchoredId) return;
-			stopObserving();
-			anchoredId = id;
-			stopObserving = observeAnnotationElement(root, id, onAnchor);
-		},
-		hide() {
-			if (anchoredId === null) return;
-			stopObserving();
-			stopObserving = () => void 0;
-			anchoredId = null;
-			const back = anchor;
-			stranded = null;
-			onAnchor(null, true);
-			queueMicrotask(() => {
-				if (anchoredId !== null || !panel.isConnected) return;
-				focusReturn.onCloseAutoFocus(new Event("closeautofocus", { cancelable: true }), back);
-			});
+		mount(index, host, transform) {
+			const el = host.ownerDocument.createElement("div");
+			el.className = "ink-search-layer";
+			el.dataset.inkSearchLayer = "";
+			el.setAttribute("aria-hidden", "true");
+			el.style.cssText = "position:absolute;inset:0;pointer-events:none;";
+			const overlay = host.querySelector(":scope > .ink-overlay");
+			host.insertBefore(el, overlay);
+			const page = {
+				el,
+				transform,
+				hits: NO_HITS,
+				current: void 0
+			};
+			pages.set(index, page);
+			draw(page, true, hitsOn(search.state.get().hits, index));
+			return {
+				update(next) {
+					page.transform = next;
+					draw(page, true, page.hits);
+				},
+				destroy() {
+					if (pages.get(index) === page) pages.delete(index);
+					el.remove();
+				}
+			};
 		},
-		destroy() {
-			stopObserving();
-			resizes.disconnect();
-			document.removeEventListener("keydown", onKey);
-			document.removeEventListener("pointerdown", onPress, true);
-			panel.removeEventListener("keydown", onTab);
-			document.removeEventListener("scroll", place, true);
-			window.removeEventListener("resize", place);
-			panel.remove();
-		}
+		destroy: search.state.subscribe(({ hits }) => {
+			for (const [index, page] of pages) draw(page, false, hitsOn(hits, index));
+		})
 	};
 }
 //#endregion
@@ -5657,7 +6765,17 @@ function mountViewer(opts) {
 	let stopKeys = () => void 0;
 	let stopActive = () => void 0;
 	let destroyed = false;
-	const hostTools = opts.tools ?? [];
+	const plugins = opts.plugins;
+	const hostTools = [...opts.tools ?? [], ...plugins?.tools ?? []];
+	/** Plugin layers follow the host for the engine's life, across rebuilds. */
+	const layers = plugins && createPluginLayers(plugins);
+	/** Match highlights follow the controller for the engine's life, across rebuilds. */
+	const highlights = opts.search && createSearchHighlights(opts.search);
+	const decorate = plugins ? (a) => plugins.decorate(a) : (a) => opts.decorateAnnotation?.(a);
+	/** A plugin's `ctx.redecorate()` reaches every page this engine has mounted. */
+	const stopRedecorate = plugins?.watchRedecorate(() => {
+		for (const mount of pages.values()) mount.overlay.redecorate();
+	});
 	/** Option values outlive rebuilds: every controller shares this registry. */
 	const toolOptions = opts.toolOptions ?? createToolOptions();
 	/** Without a host style, the engine's own follows the active tool across rebuilds. */
@@ -5686,7 +6804,9 @@ function mountViewer(opts) {
 			store: doc.annotations,
 			onActivate: (id) => opts.onActivate?.(id),
 			isCustom: () => isCustom,
-			decorate: (a) => opts.decorateAnnotation?.(a),
+			decorate,
+			...layers ? { layers } : {},
+			...highlights ? { highlights } : {},
 			onError: (cause, layer) => {
 				failed.add(layer);
 				if (error) return;
@@ -5871,9 +6991,292 @@ function mountViewer(opts) {
 			if (destroyed) return;
 			destroyed = true;
 			teardown();
+			layers?.destroy();
+			highlights?.destroy();
+			stopRedecorate?.();
+		}
+	};
+}
+//#endregion
+//#region src/dom/search/controller.ts
+function compare(a, b) {
+	return a.page - b.page || a.start - b.start;
+}
+/** Where `hit` goes in `hits`, which is sorted by `(page, start)`. */
+function insertionIndex(hits, hit) {
+	let low = 0;
+	let high = hits.length;
+	while (low < high) {
+		const mid = low + high >>> 1;
+		if (compare(hits[mid], hit) <= 0) low = mid + 1;
+		else high = mid;
+	}
+	return low;
+}
+function createSearchController(opts) {
+	const debounceMs = opts.debounceMs ?? 150;
+	const state = writable({
+		open: false,
+		query: "",
+		matchCase: false,
+		hits: [],
+		current: -1,
+		scanning: false
+	});
+	const bars = writable(0);
+	const patch = (changes) => state.update((s) => ({
+		...s,
+		...changes
+	}));
+	let timer;
+	let scan;
+	/** The current hit and its index in `hits`, kept in step as pages of hits arrive. */
+	let currentHit;
+	let currentIndex = -1;
+	/** Hits of one page not yet in the state, in page order, and the task that adds them. */
+	let pending = [];
+	let flushTimer;
+	let destroyed = false;
+	function scrollTo(hit) {
+		opts.viewport()?.scrollToRect(hit.page, hit.rect);
+	}
+	/** Stops the pending debounce and the running scan, and empties the hits. */
+	function reset() {
+		clearTimeout(timer);
+		timer = void 0;
+		scan?.abort();
+		scan = void 0;
+		currentHit = void 0;
+		currentIndex = -1;
+		pending = [];
+		clearTimeout(flushTimer);
+		flushTimer = void 0;
+		patch({
+			hits: [],
+			current: -1,
+			scanning: false
+		});
+	}
+	/**
+	* Adds the pending page of hits to the state in one change. A page's hits sit together in
+	* `(page, start)` order, so they go in with one splice, and `current` moves by their count
+	* when they land before it. The first hit becomes current and is scrolled to, unless
+	* `scroll` is false: a step flushes first and scrolls to where it lands instead.
+	*/
+	function flush(scroll = true) {
+		clearTimeout(flushTimer);
+		flushTimer = void 0;
+		if (pending.length === 0) return;
+		const batch = pending;
+		pending = [];
+		const first = batch[0];
+		const { hits } = state.get();
+		const at = insertionIndex(hits, first);
+		const next = hits.slice(0, at).concat(batch, hits.slice(at));
+		if (!currentHit) {
+			currentHit = first;
+			currentIndex = at;
+			if (scroll) scrollTo(first);
+		} else if (at <= currentIndex) currentIndex += batch.length;
+		patch({
+			hits: next,
+			current: currentIndex
+		});
+	}
+	/**
+	* Holds `hit` until its page is done: the next page's first hit, the end of the scan, or the
+	* next task, since a page's hits arrive together and the scan yields between pages.
+	*/
+	function accept(hit) {
+		if (pending.length > 0 && pending[0].page !== hit.page) flush();
+		pending.push(hit);
+		flushTimer ??= setTimeout(() => flush());
+	}
+	async function run(doc, controller) {
+		const { query, matchCase } = state.get();
+		const count = doc.pages.length;
+		const from = Math.min(Math.max(opts.viewport()?.currentPage.get() ?? 0, 0), Math.max(count - 1, 0));
+		const pages = [...Array.from({ length: count - from }, (_, i) => from + i), ...Array.from({ length: from }, (_, i) => i)];
+		try {
+			for await (const hit of doc.search(query, {
+				matchCase,
+				pages,
+				signal: controller.signal
+			})) {
+				if (controller.signal.aborted) return;
+				accept(hit);
+			}
+		} catch (error) {
+			if (!controller.signal.aborted) {
+				console.error(error);
+				if (scan === controller) scan = void 0;
+				flush();
+				patch({ scanning: false });
+				return;
+			}
+		}
+		if (scan === controller) {
+			scan = void 0;
+			flush();
+			patch({ scanning: false });
+		}
+	}
+	function start() {
+		timer = void 0;
+		scan?.abort();
+		scan = void 0;
+		const doc = opts.document.get();
+		if (!doc || isBlankQuery(state.get().query)) {
+			patch({ scanning: false });
+			return;
+		}
+		const controller = new AbortController();
+		scan = controller;
+		patch({ scanning: true });
+		run(doc, controller);
+	}
+	/** Empties the hits now and scans again, after the debounce when `delay` is set. */
+	function restart(delay) {
+		reset();
+		if (isBlankQuery(state.get().query)) return;
+		patch({ scanning: true });
+		if (delay) timer = setTimeout(start, debounceMs);
+		else start();
+	}
+	function step(by) {
+		const shown = currentHit !== void 0;
+		flush(false);
+		const { hits, current } = state.get();
+		if (hits.length === 0) return;
+		const index = shown ? (current + by + hits.length) % hits.length : current;
+		const hit = hits[index];
+		currentHit = hit;
+		currentIndex = index;
+		patch({ current: index });
+		scrollTo(hit);
+	}
+	const stopDocument = opts.document.subscribe(() => {
+		if (destroyed) return;
+		reset();
+		if (state.get().open) restart(false);
+	});
+	function setQuery(query) {
+		patch({ query });
+		restart(true);
+	}
+	function open(query) {
+		const wasOpen = state.get().open;
+		patch({ open: true });
+		if (query !== void 0) setQuery(query);
+		else if (!wasOpen && !isBlankQuery(state.get().query)) restart(false);
+	}
+	return {
+		state: readonly(state),
+		open,
+		setQuery,
+		setMatchCase(on) {
+			patch({ matchCase: on });
+			restart(false);
+		},
+		next: () => step(1),
+		previous: () => step(-1),
+		close() {
+			reset();
+			patch({ open: false });
+		},
+		attachBar() {
+			let attached = true;
+			bars.update((n) => n + 1);
+			return () => {
+				if (!attached) return;
+				attached = false;
+				bars.update((n) => n - 1);
+			};
+		},
+		barAttached: {
+			get: () => bars.get() > 0,
+			subscribe(fn) {
+				let last = bars.get() > 0;
+				return bars.subscribe((n) => {
+					if (n > 0 === last) return;
+					last = n > 0;
+					fn(last);
+				});
+			}
+		},
+		destroy() {
+			destroyed = true;
+			stopDocument();
+			reset();
 		}
 	};
 }
+/**
+* The actions and state of `controller` without the bar registration: what callers of a viewer
+* or a plugin get.
+*
+* @internal Shared with the framework bindings.
+*/
+function viewerSearchOf(controller) {
+	return {
+		state: controller.state,
+		open: (query) => controller.open(query),
+		setQuery: (query) => controller.setQuery(query),
+		setMatchCase: (on) => controller.setMatchCase(on),
+		next: () => controller.next(),
+		previous: () => controller.previous(),
+		close: () => controller.close()
+	};
+}
+//#endregion
+//#region src/dom/search/find-key.ts
+/** Longest page selection that becomes the query. */
+const MAX_SELECTION = 200;
+const FIELD = "[data-ink-find-bar] input";
+/**
+* The text selected on the page inside `root`, on one line and trimmed; '' when there is none,
+* when it is not in `root`, when it is in the find bar, or when it is too long to be a query.
+*/
+function pageSelectionText(root) {
+	const sel = root.ownerDocument.defaultView?.getSelection();
+	if (!sel || sel.rangeCount === 0 || sel.isCollapsed) return "";
+	const { anchorNode, focusNode } = sel;
+	if (!anchorNode || !focusNode || !root.contains(anchorNode) || !root.contains(focusNode)) return "";
+	const bar = (node) => (node instanceof Element ? node : node.parentElement)?.closest("[data-ink-find-bar]") != null;
+	if (bar(anchorNode) || bar(focusNode)) return "";
+	const text = sel.toString().replace(/\s+/g, " ").trim();
+	return text.length > MAX_SELECTION ? "" : text;
+}
+/**
+* F by its letter, or by its place on a layout without Latin letters (Cyrillic, Greek), where
+* `key` is that layout's letter. A Latin layout with another letter there keeps that letter.
+*/
+function isFindKey(e) {
+	if (e.key.toLowerCase() === "f") return true;
+	return e.code === "KeyF" && !/^[a-z]$/i.test(e.key);
+}
+/**
+* Ctrl/Cmd+F on a viewer's root. Call it from a `keydown` listener on that root (it reads
+* `currentTarget`). Takes the key only when a find bar is mounted for this viewer and the event
+* comes from inside the root; otherwise the browser keeps it. Opens the search with the page selection as
+* the query, if there is one, and focuses and selects the field. Returns whether it took the key.
+*
+* @internal Shared with the framework bindings.
+*/
+function handleFindKey(e, controller, selection) {
+	if (!(e.ctrlKey || e.metaKey) || e.altKey || e.shiftKey || !isFindKey(e)) return false;
+	if (!controller.barAttached.get()) return false;
+	const root = e.currentTarget;
+	if (!(root instanceof HTMLElement)) return false;
+	if (!(e.target instanceof Node) || !root.contains(e.target)) return false;
+	e.preventDefault();
+	const text = selection();
+	controller.open(text === "" ? void 0 : text);
+	const field = root.querySelector(FIELD);
+	field?.focus();
+	field?.select();
+	return true;
+}
 //#endregion
 //#region src/dom/viewer/thread-popover.ts
 function createThreadPopover(opts) {
@@ -6043,8 +7446,14 @@ function createThreadForm(n, actions) {
 }
 //#endregion
 //#region src/dom/viewer/create-viewer.ts
+const noop = () => void 0;
+const passThrough = {
+	batch: (fn) => fn(),
+	track: () => noop,
+	react: () => noop
+};
 function createViewer(el, opts) {
-	const { source: initial, assets, password, defaults, history, threads: withThreads = true, onReady, onError, onActivate, onBuild, onPageMount, onPageUnmount, onPageError, toolStyle: _toolStyle, toolOptions: _toolOptions, signatureLibrary: _signatureLibrary, signatures: signatureStore, ...view } = opts;
+	const { source: initial, assets, password, defaults, history, plugins, threads: withThreads = true, onReady, onError, onActivate, onBuild, onPageMount, onPageUnmount, onPageError, toolStyle: _toolStyle, toolOptions: _toolOptions, signatureLibrary: _signatureLibrary, signatures: signatureStore, search: _search, ...view } = opts;
 	/** One library for the viewer's life, so templates and the menu outlive each document. */
 	const signatures = createSignatureLibrary(signatureStore ?? createMemorySignatureStore());
 	/** Tool options persist for the viewer's life; the tool style is per document. */
@@ -6056,6 +7465,7 @@ function createViewer(el, opts) {
 	const tools = writable(null);
 	/** The activated annotation: the note thread opens from it. */
 	const activated = writable(null);
+	const rootEl = writable(null);
 	const root = h("div", {
 		"data-ink-root": "",
 		"data-state": "idle"
@@ -6074,6 +7484,35 @@ function createViewer(el, opts) {
 	}, scroll);
 	root.append(viewportRoot);
 	el.append(root);
+	rootEl.set(scroll);
+	/** One controller for the viewer's life: the host, the engine and the find bar share it. */
+	const search = createSearchController({
+		document: readonly(current),
+		viewport: () => viewport.get()
+	});
+	/** What callers get: the actions, not the bar registration. */
+	const viewerSearch = viewerSearchOf(search);
+	root.addEventListener("keydown", (e) => {
+		handleFindKey(e, search, () => pageSelectionText(root));
+	});
+	/**
+	* One host for the viewer's life. It reads the history when a document opens, and `current`
+	* is set before it notifies, so that is the new document's. With no document open, a
+	* command's `batch` just runs its function.
+	*/
+	const host = createPluginHost({
+		plugins: plugins ?? [],
+		document: readonly(current),
+		history: () => current.get()?.history ?? passThrough,
+		activated: readonly(activated),
+		setActivated: (id) => {
+			if (id === null || current.get()?.annotations.get(id)) activated.set(id);
+		},
+		root: readonly(rootEl),
+		decorate: () => view.decorateAnnotation,
+		viewport: () => viewport.get(),
+		search: viewerSearch
+	});
 	const focusReturn = createFocusReturn({
 		root: () => root,
 		activated: () => activated.get()
@@ -6123,6 +7562,8 @@ function createViewer(el, opts) {
 		};
 		const mounted = mountViewer({
 			...view,
+			plugins: host,
+			search,
 			container: scroll,
 			document: doc,
 			toolOptions,
@@ -6173,6 +7614,7 @@ function createViewer(el, opts) {
 	}
 	let loads = 0;
 	let destroyed = false;
+	const destroyers = [];
 	let stop = () => void 0;
 	/** Tears down the open document, if any, and destroys it. */
 	function close() {
@@ -6219,7 +7661,7 @@ function createViewer(el, opts) {
 		});
 	}
 	open(initial);
-	return {
+	const viewer = {
 		element: root,
 		status: readonly(status),
 		document: readonly(current),
@@ -6227,24 +7669,65 @@ function createViewer(el, opts) {
 		viewport: readonly(viewport),
 		tools: readonly(tools),
 		activated: readonly(activated),
-		setActivated(id) {
+		setActivated: (id) => {
 			if (id === null || current.get()?.annotations.get(id)) activated.set(id);
 		},
+		commands: { get: (id) => host.command(id) },
+		search: viewerSearch,
 		open,
 		destroy() {
 			if (destroyed) return;
 			destroyed = true;
 			loads++;
 			close();
+			for (const fn of destroyers) fn();
+			search.destroy();
+			host.destroy();
 			root.remove();
 		}
 	};
+	toolsByViewer.set(viewer, [...view.tools ?? [], ...host.tools]);
+	commandIdsByViewer.set(viewer, () => [...host.commands.keys()]);
+	internals.set(viewer, {
+		search,
+		destroyers,
+		destroyed: () => destroyed
+	});
+	return viewer;
+}
+const toolsByViewer = /* @__PURE__ */ new WeakMap();
+/** The host tools a viewer was given (its own and its plugins'), for the controls' labels and icons. */
+function hostToolsOf(viewer) {
+	return toolsByViewer.get(viewer) ?? [];
+}
+const commandIdsByViewer = /* @__PURE__ */ new WeakMap();
+/** The ids of the commands a viewer's plugins registered, for the error on an unknown one. */
+function hostCommandIdsOf(viewer) {
+	return commandIdsByViewer.get(viewer)?.() ?? [];
+}
+const internals = /* @__PURE__ */ new WeakMap();
+/** @internal The viewer's search controller, which the find bar registers with. */
+function searchControllerOf(viewer) {
+	const found = internals.get(viewer);
+	if (!found) throw new Error("Not a viewer made by createViewer");
+	return found.search;
+}
+/**
+* @internal Runs `fn` when the viewer is destroyed, for what a control set up on it; at once
+* when it already is.
+*/
+function onViewerDestroy(viewer, fn) {
+	const found = internals.get(viewer);
+	if (!found) return;
+	if (found.destroyed()) fn();
+	else found.destroyers.push(fn);
 }
 //#endregion
 //#region src/dom/viewer/controls.ts
 /**
 * Runs `connect` for every value `source` takes while it is set, undoing the previous run's
-* subscriptions first, and disables `control` while it is `null`.
+* subscriptions first, and disables `control` while it is `null`. Returns the function that
+* stops following.
 */
 function follow(source, control, connect, reset) {
 	let stops = [];
@@ -6260,7 +7743,12 @@ function follow(source, control, connect, reset) {
 		else connect(value, watch);
 	};
 	run(source.get());
-	source.subscribe(run);
+	const stopSource = source.subscribe(run);
+	return () => {
+		stopSource();
+		for (const s of stops) s();
+		stops = [];
+	};
 }
 const SVG = "http://www.w3.org/2000/svg";
 const TOOL_ICONS = {
@@ -6295,6 +7783,7 @@ function createIcon(icon) {
 	}
 	return svg;
 }
+/** @internal A labelled icon button, as the toolbar controls make them. */
 function button(label, attrs, icon) {
 	const b = h("button", {
 		type: "button",
@@ -6306,6 +7795,31 @@ function button(label, attrs, icon) {
 	return b;
 }
 /**
+* Opens the viewer's find bar; pressed while it is open. Pressing it again focuses the field.
+* The bar itself is `createFindBar`.
+*/
+function createSearchButton(viewer) {
+	const b = button("Find", {
+		class: "ink-search-button",
+		"data-ink-search-button": "",
+		"aria-pressed": "false"
+	}, Search);
+	b.addEventListener("click", () => {
+		viewer.search.open();
+		const field = viewer.element.querySelector("[data-ink-find-bar] input");
+		field?.focus();
+		field?.select();
+	});
+	const show = (s) => {
+		b.dataset.state = s.open ? "on" : "off";
+		b.setAttribute("aria-pressed", String(s.open));
+	};
+	show(viewer.search.state.get());
+	onViewerDestroy(viewer, viewer.search.state.subscribe(show));
+	onViewerDestroy(viewer, follow(viewer.document, b, () => void 0));
+	return b;
+}
+/**
 * A toolbar following the WAI-ARIA toolbar pattern: its buttons share one Tab stop, with
 * arrow keys, Home and End to move between them. Fields and selects are Tab stops of their
 * own and keep their keys. Buttons added later join in.
@@ -6350,15 +7864,16 @@ function historyButton(viewer, action) {
 	return b;
 }
 /**
-* Sets the tool; pressed while it is the active one. A host tool's button has no icon (append
-* your own) and is named by `label`, else by the tool id.
+* Sets the tool; pressed while it is the active one. A host or plugin tool's button takes the
+* tool's own `label` and `icon`; `opts.label` wins, and without either it is named by the tool id.
 */
 function createToolButton(viewer, tool, opts = {}) {
-	const b = button(opts.label ?? TOOL_LABELS[tool] ?? tool, {
+	const own = hostToolsOf(viewer).find((t) => t.id === tool);
+	const b = button(opts.label ?? TOOL_LABELS[tool] ?? own?.label ?? tool, {
 		class: "ink-tool-button",
 		"data-ink-tool-button": "",
 		"data-tool": tool
-	}, TOOL_ICONS[tool]);
+	}, TOOL_ICONS[tool] ?? own?.icon);
 	const show = (active) => {
 		const on = active === tool;
 		b.dataset.state = on ? "on" : "off";
@@ -6368,13 +7883,55 @@ function createToolButton(viewer, tool, opts = {}) {
 	follow(viewer.tools, b, (tools, watch) => watch(tools.active, show), () => show(null));
 	return b;
 }
+/**
+* A plugin command as a button with its status text beside it. The button is named by the
+* command's label and disabled while the command is, except while it runs: then it keeps focus,
+* with `aria-busy` and `aria-disabled`, and a press does nothing. The status is a live region. A command without an icon shows its label as the button's text. For an id no
+* plugin registered it logs `InkError('UnknownCommand')` to the console and returns the same
+* markup disabled, `aria-hidden` and unnamed.
+*/
+function createCommandButton(viewer, id) {
+	const command = viewer.commands.get(id);
+	const status = h("span", {
+		class: "ink-command-status",
+		role: "status"
+	});
+	if (!command) {
+		console.error(unknownCommand(id, hostCommandIdsOf(viewer)));
+		const pending = h("button", {
+			type: "button",
+			"data-command": id,
+			"aria-hidden": "true"
+		});
+		pending.disabled = true;
+		return h("div", { class: "ink-command" }, pending, status);
+	}
+	const b = button(command.label, { "data-command": id }, command.icon);
+	if (!command.icon) b.textContent = command.label;
+	b.addEventListener("click", () => void command.run());
+	const sync = () => {
+		const busy = command.busy.get();
+		b.disabled = !command.enabled.get() && !busy;
+		b.setAttribute("aria-busy", String(busy));
+		if (busy) b.setAttribute("aria-disabled", "true");
+		else b.removeAttribute("aria-disabled");
+	};
+	command.enabled.subscribe(sync);
+	command.busy.subscribe(sync);
+	sync();
+	command.status.subscribe((text) => {
+		status.textContent = text;
+	});
+	status.textContent = command.status.get();
+	return h("div", { class: "ink-command" }, b, status);
+}
 function createZoomIn(viewer) {
 	const b = button("Zoom in", {
 		class: "ink-zoom-in",
 		"data-ink-zoom-in": ""
 	}, ZoomIn);
 	b.addEventListener("click", () => viewer.viewport.get()?.zoomBy(1.25));
-	follow(viewer.viewport, b, () => void 0);
+	onViewerDestroy(viewer, follow(viewer.viewport, b, () => void 0));
 	return b;
 }
 function createZoomOut(viewer) {
@@ -6383,7 +7940,7 @@ function createZoomOut(viewer) {
 		"data-ink-zoom-out": ""
 	}, ZoomOut);
 	b.addEventListener("click", () => viewer.viewport.get()?.zoomBy(.8));
-	follow(viewer.viewport, b, () => void 0);
+	onViewerDestroy(viewer, follow(viewer.viewport, b, () => void 0));
 	return b;
 }
 /** Fit width, fit page and the zoom levels; a zoom between levels gets an option of its own. */
@@ -6548,6 +8105,167 @@ function rovingTabindex(bar) {
 	};
 }
 //#endregion
+//#region src/dom/search/find-text.ts
+/**
+* The count beside the field: "3 of 17", "3 of 12…" while scanning, "No results".
+*
+* @internal Shared with the framework bindings.
+*/
+function findCountText(s) {
+	if (isBlankQuery(s.query)) return "";
+	if (s.hits.length === 0) return s.scanning ? "" : "No results";
+	return `${s.current + 1} of ${s.hits.length}${s.scanning ? "…" : ""}`;
+}
+/**
+* Returns the function a bar calls with each search state for its live region's text.
+*
+* A settled scan reads "Match 3 of 17, page 2" or "No results". While a scan runs it says
+* nothing until a step moves the current hit, then "Match 3 of 12 so far, page 2", and keeps
+* that text as more hits arrive, so the region speaks once per step and once on settle rather
+* than once per hit.
+*
+* @internal Shared with the framework bindings; each bar keeps its own.
+*/
+function findAnnouncer() {
+	let shown;
+	let said = "";
+	return (s) => {
+		const hit = s.hits[s.current];
+		if (!s.open || isBlankQuery(s.query)) {
+			shown = void 0;
+			said = "";
+		} else if (!s.scanning) {
+			shown = hit;
+			said = hit ? `Match ${s.current + 1} of ${s.hits.length}, page ${hit.page + 1}` : "No results";
+		} else {
+			if (!hit) said = "";
+			else if (shown && hit !== shown) said = `Match ${s.current + 1} of ${s.hits.length} so far, page ${hit.page + 1}`;
+			shown = hit;
+		}
+		return said;
+	};
+}
+//#endregion
+//#region src/dom/search/find-bar.ts
+/**
+* The find bar for `viewer`: a field, the match count, previous and next, a match-case toggle
+* and close. Its buttons keep focus while used; Enter in the field steps to the next match,
+* Shift+Enter to the previous, Escape closes. Closing returns focus to where it was before the
+* bar opened, else to the document.
+*/
+function createFindBar(viewer) {
+	const controller = searchControllerOf(viewer);
+	const { state } = controller;
+	const field = h("input", {
+		type: "text",
+		"aria-label": "Find in document",
+		autocomplete: "off",
+		spellcheck: "false"
+	});
+	const count = h("span", {
+		class: "ink-find-count",
+		"data-ink-find-count": ""
+	});
+	const previous = button("Previous match", { "data-ink-find-previous": "" }, ChevronUp);
+	const next = button("Next match", { "data-ink-find-next": "" }, ChevronDown);
+	const matchCase = button("Match case", {
+		"data-ink-find-match-case": "",
+		"aria-pressed": "false"
+	}, CaseSensitive);
+	const close = button("Close find", { "data-ink-find-close": "" }, X);
+	const live = h("div", {
+		class: "ink-visually-hidden",
+		"data-ink-find-status": "",
+		"aria-live": "polite"
+	});
+	const bar = h("div", {
+		class: "ink-find-bar",
+		"data-ink-find-bar": "",
+		role: "search",
+		hidden: ""
+	}, field, count, previous, next, matchCase, close, live);
+	field.addEventListener("input", () => controller.setQuery(field.value));
+	previous.addEventListener("click", () => controller.previous());
+	next.addEventListener("click", () => controller.next());
+	matchCase.addEventListener("click", () => controller.setMatchCase(!state.get().matchCase));
+	close.addEventListener("click", () => controller.close());
+	field.addEventListener("keydown", (e) => {
+		if (e.key !== "Enter" || e.isComposing) return;
+		e.preventDefault();
+		if (e.shiftKey) controller.previous();
+		else controller.next();
+	});
+	bar.addEventListener("keydown", (e) => {
+		if (e.key !== "Escape" || e.defaultPrevented || e.isComposing) return;
+		e.preventDefault();
+		e.stopPropagation();
+		controller.close();
+	});
+	/** Where focus was when the bar opened. */
+	let before = null;
+	let wasOpen = false;
+	const announce = findAnnouncer();
+	let announced = "";
+	function restoreFocus() {
+		const target = before?.isConnected && !bar.contains(before) ? before : viewer.element.querySelector("[data-ink-scroll]");
+		before = null;
+		target?.focus({ preventScroll: true });
+	}
+	function show(s) {
+		if (s.open !== wasOpen) {
+			wasOpen = s.open;
+			if (s.open) {
+				const active = bar.ownerDocument.activeElement;
+				before = active instanceof HTMLElement && active !== bar.ownerDocument.body && !bar.contains(active) ? active : null;
+				bar.hidden = false;
+				field.focus();
+				field.select();
+			} else {
+				const active = bar.ownerDocument.activeElement;
+				const hadFocus = bar.contains(active) || active === bar.ownerDocument.body;
+				bar.hidden = true;
+				if (hadFocus) restoreFocus();
+				else before = null;
+			}
+		}
+		if (field.value !== s.query) {
+			field.value = s.query;
+			if (bar.ownerDocument.activeElement === field) field.select();
+		}
+		count.textContent = findCountText(s);
+		matchCase.setAttribute("aria-pressed", String(s.matchCase));
+		const say = announce(s);
+		if (say !== announced) {
+			announced = say;
+			live.textContent = say;
+		}
+	}
+	let detach = null;
+	const sync = () => {
+		const inside = viewer.element.contains(bar);
+		if (inside && !detach) detach = controller.attachBar();
+		else if (!inside && detach) {
+			detach();
+			detach = null;
+		}
+	};
+	const observer = new MutationObserver(sync);
+	observer.observe(viewer.element, {
+		childList: true,
+		subtree: true
+	});
+	const stopState = state.subscribe(show);
+	show(state.get());
+	sync();
+	onViewerDestroy(viewer, () => {
+		observer.disconnect();
+		stopState();
+		detach?.();
+		detach = null;
+	});
+	return bar;
+}
+//#endregion
 //#region src/dom/viewer/menu.ts
 const FOCUSABLE = "select:not(:disabled), input:not(:disabled), button:not(:disabled):not([tabindex=\"-1\"])";
 function createMenu(trigger, opts) {
@@ -8110,6 +9828,6 @@ function createSignatureMenu(viewer, opts = {}) {
 	return root;
 }
 //#endregion
-export { ARROWHEAD_CHOICES, ARROWHEAD_ENDING, COLOR_COLUMNS, COLOR_LABELS, DASH_PATTERN, DEFAULT_CORNER_RADIUS, DEFAULT_FREETEXT_WIDTH, DEFAULT_HIGHLIGHT_OPTIONS, DEFAULT_SHAPE_SIZE, FONT_FAMILIES, LINE_WEIGHTS, MARKUP_ICONS, MARKUP_KINDS, MARKUP_LABELS, PALETTE, SHAPE_COLUMNS, SHAPE_ICONS, SHAPE_KINDS, SHAPE_LABELS, SIGNATURE_FONTS, SIGNATURE_IMAGE_MAX_LENGTH, SIGNATURE_IMAGE_MAX_SIDE, SIGNATURE_IMAGE_TYPES, SIGNATURE_LABELS, SIGNATURE_TABS, TOOL_LABELS, ZOOM_LEVELS, annotationElementFor, arrowheadChoice, attachViewportKeys, builtinTools, clampFontSize, colorMenuModel, computeCssLayout, createColorMenu, createFocusReturn, createHighlightMenu, createIcon, createImageSignature, createLineStyleMenu, createMenu, createNextPage, createOverlay, createPageCount, createPageInput, createPageMount, createPageRenderer, createPageTransform, createPopover, createPrevPage, createRedo, createShapeMenu, createSignatureDialog, createSignatureDraft, createSignatureMenu, createSignaturePad, createSignaturePreview, createTextLayer, createTextStyleMenu, createToolButton, createToolController, createToolOptions, createToolbar, createToolbarSeparator, createTypedSignature, createUndo, createViewer, createViewport, createZoomIn, createZoomOut, createZoomSelect, cssRectsToUserRects, cssVariableDefaults, editFreeText, fitZoomCss, focusInitialMenuItem, fontFamilyValue, freetextTool, getSelectionQuads, handleMenuKeys, handleRadioKeys, handleTabKeys, highlightMenuModel, highlightTool, hitFor, lineStyleMenuModel, menuItems, mostVisiblePageCss, mountViewer, normalizeRotation, noteTool, observeAnnotationElement, placePanel, redactAreaTool, renderAnnotationContent, renderTypedSignature, selectTextTool, selectTool, shapeMenuModel, shapeTool, shouldKeepOpenOnAnnotation, signatureMenuModel, signaturePreview, signatureTool, textStyleMenuModel, threadDeleteLabel, threadPopoverLabel, trackToolStyle, trapTab, visibleRangeCss, withHostTools };
+export { ARROWHEAD_CHOICES, ARROWHEAD_ENDING, COLOR_COLUMNS, COLOR_LABELS, DASH_PATTERN, DEFAULT_CORNER_RADIUS, DEFAULT_FREETEXT_WIDTH, DEFAULT_HIGHLIGHT_OPTIONS, DEFAULT_SHAPE_SIZE, FONT_FAMILIES, LINE_WEIGHTS, MARKUP_ICONS, MARKUP_KINDS, MARKUP_LABELS, PALETTE, SHAPE_COLUMNS, SHAPE_ICONS, SHAPE_KINDS, SHAPE_LABELS, SIGNATURE_FONTS, SIGNATURE_IMAGE_MAX_LENGTH, SIGNATURE_IMAGE_MAX_SIDE, SIGNATURE_IMAGE_TYPES, SIGNATURE_LABELS, SIGNATURE_TABS, TOOL_LABELS, ZOOM_LEVELS, annotationElementFor, arrowheadChoice, attachViewportKeys, builtinTools, clampFontSize, colorMenuModel, computeCssLayout, createColorMenu, createCommandButton, createFindBar, createFocusReturn, createHighlightMenu, createIcon, createImageSignature, createLineStyleMenu, createMenu, createNextPage, createOverlay, createPageCount, createPageInput, createPageMount, createPageRenderer, createPageTransform, createPluginHost, createPluginLayers, createPopover, createPrevPage, createRedo, createSearchButton, createSearchController, createShapeMenu, createSignatureDialog, createSignatureDraft, createSignatureMenu, createSignaturePad, createSignaturePreview, createTextLayer, createTextStyleMenu, createToolButton, createToolController, createToolOptions, createToolbar, createToolbarSeparator, createTypedSignature, createUndo, createViewer, createViewport, createZoomIn, createZoomOut, createZoomSelect, cssRectsToUserRects, cssVariableDefaults, definePlugin, editFreeText, findAnnouncer, findCountText, fitZoomCss, focusInitialMenuItem, fontFamilyValue, freetextTool, getSelectionQuads, handleFindKey, handleMenuKeys, handleRadioKeys, handleTabKeys, highlightMenuModel, highlightTool, hitFor, lineStyleMenuModel, menuItems, mostVisiblePageCss, mountViewer, normalizeRotation, noteTool, observeAnnotationElement, pageSelectionText, placePanel, redactAreaTool, renderAnnotationContent, renderTypedSignature, selectTextTool, selectTool, shapeMenuModel, shapeTool, shouldKeepOpenOnAnnotation, signatureMenuModel, signaturePreview, signatureTool, textStyleMenuModel, threadDeleteLabel, threadPopoverLabel, trackToolStyle, trapTab, unknownCommand, viewerSearchOf, visibleRangeCss, withHostTools };
 
 //# sourceMappingURL=dom.mjs.map