@inkbar/core 0.6.0 → 0.7.0

package/dist/dom.mjs

@@ -1,5 +1,5 @@
-import { $t as derived, 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, Qt as createRecordStore, 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, b as isAbandonedNote, bn as isInkError, d as recogniseStroke, dn as rectFromPoints, en as readonly, f as DEFAULT_CORNER_RADIUS, g as constrain, h as SHAPE_KINDS, i as createInkTemplate, in as invertMatrix, l as placeSignature, m as DEFAULT_SHAPE_SIZE, mn as rectsIntersect, nn as applyMatrix, o as createMemorySignatureStore, p as DEFAULT_SHAPE_OPTIONS, q as translated, r as createImageTemplate, s as createSignatureLibrary, tn as writable, tt as isProduction, v as isPointerOnlyKind, w as threadOf, y as shapeInput, yn as InkError, z as isBubble, zt as isStandardCallout } from "./signatures-D68fuLlt.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. */
@@ -3803,6 +3803,23 @@ function createPluginLayers(source) {
 }
 //#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
@@ -3960,7 +3977,8 @@ function createPluginHost(opts) {
 			},
 			scrollTo(page, rect, scrollOpts) {
 				opts.viewport?.()?.scrollToRect(page, rect, scrollOpts);
-			}
+			},
+			search: opts.search ?? inertSearch
 		};
 	};
 	for (const plugin of opts.plugins) {
@@ -4053,6 +4071,7 @@ function createPageMount(opts) {
 		transform,
 		...callbacks("text")
 	});
+	const marks = opts.highlights?.mount(page, host, transform);
 	const overlay = createOverlay({
 		host,
 		page,
@@ -4074,10 +4093,12 @@ function createPageMount(opts) {
 			textLayer.update(next);
 			overlay.update(next);
 			layers?.update(next);
+			marks?.update(next);
 		},
 		destroy() {
 			layers?.destroy();
 			overlay.destroy();
+			marks?.destroy();
 			textLayer.destroy();
 			renderer.destroy();
 		}
@@ -6629,6 +6650,109 @@ function trapTab(e, container) {
 	}
 }
 //#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;
+	};
+	return {
+		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: search.state.subscribe(({ hits }) => {
+			for (const [index, page] of pages) draw(page, false, hitsOn(hits, index));
+		})
+	};
+}
+//#endregion
 //#region src/dom/viewer-engine.ts
 function mountViewer(opts) {
 	const { container: el, document: doc } = opts;
@@ -6645,6 +6769,8 @@ function mountViewer(opts) {
 	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(() => {
@@ -6680,6 +6806,7 @@ function mountViewer(opts) {
 			isCustom: () => isCustom,
 			decorate,
 			...layers ? { layers } : {},
+			...highlights ? { highlights } : {},
 			onError: (cause, layer) => {
 				failed.add(layer);
 				if (error) return;
@@ -6865,11 +6992,292 @@ function mountViewer(opts) {
 			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) {
 	const { root, store, activated, focusReturn } = opts;
@@ -7045,7 +7453,7 @@ const passThrough = {
 	react: () => noop
 };
 function createViewer(el, 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, ...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. */
@@ -7077,6 +7485,16 @@ function createViewer(el, opts) {
 	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
@@ -7092,7 +7510,8 @@ function createViewer(el, opts) {
 		},
 		root: readonly(rootEl),
 		decorate: () => view.decorateAnnotation,
-		viewport: () => viewport.get()
+		viewport: () => viewport.get(),
+		search: viewerSearch
 	});
 	const focusReturn = createFocusReturn({
 		root: () => root,
@@ -7144,6 +7563,7 @@ function createViewer(el, opts) {
 		const mounted = mountViewer({
 			...view,
 			plugins: host,
+			search,
 			container: scroll,
 			document: doc,
 			toolOptions,
@@ -7194,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() {
@@ -7252,18 +7673,26 @@ function createViewer(el, opts) {
 			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();
@@ -7276,11 +7705,29 @@ const commandIdsByViewer = /* @__PURE__ */ new WeakMap();
 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 = [];
@@ -7296,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 = {
@@ -7331,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",
@@ -7342,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.
@@ -7453,7 +7931,7 @@ function createZoomIn(viewer) {
 		"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) {
@@ -7462,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. */
@@ -7627,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) {
@@ -9189,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, createCommandButton, createFocusReturn, createHighlightMenu, createIcon, createImageSignature, createLineStyleMenu, createMenu, createNextPage, createOverlay, createPageCount, createPageInput, createPageMount, createPageRenderer, createPageTransform, createPluginHost, createPluginLayers, 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, definePlugin, 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, unknownCommand, 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