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

package/dist/runtime.js

@@ -1,307 +1,3 @@
-import "./rolldown-runtime-BBjsoOtd.js";
-import { Fragment, jsx } from "react/jsx-runtime";
-import { createKernel, docInfoListEquals } from "@embedpdf/core";
-import { createContext, useContext, useEffect, useRef, useState, useSyncExternalStore } from "react";
+import { C as useOptionalSelector, D as useViewerSettings, E as useSelector, S as useOptionalCapability, T as usePageList, _ as useDocuments, a as PageProvider, b as useKernel, c as mountWebFont, d as useActiveDocumentId, f as useCapability, g as useDocumentScope, h as useDocumentId, i as KernelProvider, k as epdfTheme, l as saveFile, m as useDocument, n as DocumentScope, o as Viewer, p as useCapabilityEvent, r as EmbedPDF, s as makePageContext, t as DocumentGate, u as shallowArray, v as useDocumentsEvent, w as usePage, x as useKernelValue, y as useDocumentsState } from "./runtime-B6xcPsEb.js";
 export * from "@embedpdf/core";
-//#region src/runtime.tsx
-const KernelCtx = createContext(null);
-/** The document a subtree is bound to. null => use the active document. */
-const DocumentScopeCtx = createContext(null);
-function useKernel() {
-	const k = useContext(KernelCtx);
-	if (!k) throw new Error("useKernel must be used within <Viewer>/<EmbedPDF>");
-	return k;
-}
-const shallowArray = (a, b) => a === b || a.length === b.length && a.every((x, i) => x === b[i]);
-/** Read a value derived from the kernel, cached by equality (no tearing loop). */
-function useKernelValue(select, isEqual = Object.is) {
-	const kernel = useKernel();
-	const last = useRef(null);
-	const get = () => {
-		const next = select(kernel);
-		if (last.current && isEqual(last.current.v, next)) return last.current.v;
-		last.current = { v: next };
-		return next;
-	};
-	return useSyncExternalStore(kernel.subscribe, get, get);
-}
-function useActiveDocumentId() {
-	return useKernelValue((k) => k.documents.activeId());
-}
-/** The document id for this subtree: the nearest <DocumentScope>, else the active doc. */
-function useDocumentId() {
-	const scoped = useContext(DocumentScopeCtx);
-	const active = useActiveDocumentId();
-	return scoped ?? active;
-}
-/** Bind a subtree to a specific document (panes, comparison). */
-function DocumentScope({ id, children }) {
-	return /* @__PURE__ */ jsx(DocumentScopeCtx.Provider, {
-		value: id,
-		children
-	});
-}
-/**
-* Render children only while this subtree has a READY document — the
-* structural way to say "this UI is defined over a document". An empty
-* workspace is a legitimate, designable state (the Viewer no longer blocks on
-* documents so chrome can render at t≈0): workspace-scoped UI (toolbars,
-* commands, i18n) lives OUTSIDE the gate; document-scoped UI (Stage, panels,
-* page chrome) lives inside it, or reads through `useOptionalSelector`.
-* A `loading`/`locked`/`error` tab renders `fallback` — so the gate's
-* fallback doubles as the per-tab boot state; richer chrome (a password
-* prompt, an error pane) branches on `useDocumentStatus()` beside the gate.
-* Sibling of <DocumentScope>, which picks WHICH document; this one handles
-* WHETHER.
-*/
-function DocumentGate({ fallback = null, children }) {
-	const docId = useDocumentId();
-	return /* @__PURE__ */ jsx(Fragment, { children: useKernelValue((k) => docId ? k.documents.get(docId)?.status === "ready" : false) ? children : fallback });
-}
-/** Lifecycle status of this subtree's document (loading/locked/ready/error),
-*  or null with no document. The password prompt and error panes key off it. */
-function useDocumentStatus() {
-	const docId = useDocumentId();
-	return useKernelValue((k) => docId ? k.documents.get(docId)?.status ?? null : null);
-}
-/**
-* Resolve a capability by token, binding document-scoped ones to this
-* subtree's document. Resolution is a REACTIVE read (`tryCapability` through
-* the kernel's one change stream), not a memoized call — under the
-* request-time lifecycle a document can become resolvable while its id stays
-* the same, so any id-keyed cache goes stale; subscribing makes staleness
-* structurally impossible. Fail-fast: while unresolvable, this re-runs the
-* strict resolver so the kernel's truthful reason (`no capability` / `no
-* document` / `document is loading|locked`) is what throws.
-*/
-function useCapability(token) {
-	const kernel = useKernel();
-	const scoped = useContext(DocumentScopeCtx);
-	return useKernelValue((k) => k.tryCapability(token, scoped ?? void 0)) ?? kernel.capability(token, scoped ?? void 0);
-}
-/** Like `useCapability`, but null while the token can't resolve (no plugin,
-*  no document, or a document that isn't ready yet). */
-function useOptionalCapability(token) {
-	const scoped = useContext(DocumentScopeCtx);
-	return useKernelValue((k) => k.tryCapability(token, scoped ?? void 0));
-}
-/** Subscribe to a selector over a (document-resolved) capability. */
-function useSelector(token, select, isEqual = Object.is) {
-	const kernel = useKernel();
-	const cap = useCapability(token);
-	const last = useRef(null);
-	const get = () => {
-		const next = select(cap);
-		if (last.current && isEqual(last.current.v, next)) return last.current.v;
-		last.current = { v: next };
-		return next;
-	};
-	return useSyncExternalStore(kernel.subscribe, get, get);
-}
-/**
-* Null-safe `useSelector`: `fallback` whenever the token can't resolve — no
-* provider, or a document-scoped token with no document. For chrome that stays
-* mounted across the empty-workspace state (a zoom readout, a mode band).
-* `useSelector` stays strict (fail-fast) for code that KNOWS a document exists
-* — e.g. anything inside a <DocumentGate>.
-*
-* The `select` guard also swallows reads through a capability whose document
-* closed between the store notification and this render — that teardown race
-* resolves to `fallback` for one frame, then re-renders against the new state.
-*/
-function useOptionalSelector(token, select, fallback, isEqual = Object.is) {
-	const kernel = useKernel();
-	const cap = useOptionalCapability(token);
-	const last = useRef(null);
-	const get = () => {
-		let next;
-		if (cap === null) next = fallback;
-		else try {
-			next = select(cap);
-		} catch {
-			next = fallback;
-		}
-		if (last.current && isEqual(last.current.v, next)) return last.current.v;
-		last.current = { v: next };
-		return next;
-	};
-	return useSyncExternalStore(kernel.subscribe, get, get);
-}
-/**
-* Subscribe to a capability's {@link EventHook} for the mounted lifetime —
-* `useCapabilityEvent(ActionsToken, (c) => c.onAction, handler)`. Events
-* carry occurrences, never state (a late subscriber that needs the current
-* value uses `useSelector`). The handler rides a ref, so a fresh closure per
-* render never resubscribes. Null-safe: no plugin/document → no subscription.
-*/
-function useCapabilityEvent(token, select, handler) {
-	const cap = useOptionalCapability(token);
-	const handlerRef = useRef(handler);
-	handlerRef.current = handler;
-	const selectRef = useRef(select);
-	selectRef.current = select;
-	useEffect(() => {
-		if (!cap) return;
-		return selectRef.current(cap)((event) => handlerRef.current(event));
-	}, [cap]);
-}
-/** The document registry (open/close/active/list), reactive. */
-function useDocuments() {
-	const kernel = useKernel();
-	return {
-		docs: useKernelValue((k) => k.documents.list(), docInfoListEquals),
-		activeId: useActiveDocumentId(),
-		open: kernel.documents.open,
-		unlock: kernel.documents.unlock,
-		close: kernel.documents.close,
-		setActive: kernel.documents.setActive,
-		move: kernel.documents.move,
-		swap: kernel.documents.swap,
-		download: kernel.documents.download,
-		downloadLayer: kernel.documents.downloadLayer
-	};
-}
-/**
-* Owns the kernel as an EFFECT-scoped resource: each effect setup creates and
-* starts exactly one kernel; each cleanup destroys exactly that one. That is
-* the contract StrictMode exercises (two kernels in dev, the first fully
-* destroyed) — the kernel itself is never restarted after destroy.
-*
-* The kernel is published to context the moment it exists — before `start()`
-* resolves — so the `fallback` can use workspace capabilities (i18n copy on a
-* loading screen) exactly as before. The one exception is the very first
-* render, which happens before the effect: it renders nothing. Children mount
-* once `start()` resolves — which never touches the engine, so the shell is
-* alive while WASM compiles or the transport connects. `initialDocuments`
-* open in the BACKGROUND and stream into the registry (`useDocuments()` is
-* reactive); per-document loading UI is the Stage's job, not a root gate.
-*
-* ENGINE OWNERSHIP. When `engine` is a thunk, the Viewer OWNS it: each effect
-* setup constructs one engine (construction is synchronous and inert — boot
-* happens lazily inside the engine) and each cleanup destroys exactly that one
-* — after the kernel, so handles close first. When `engine` is an instance it
-* is BORROWED and never destroyed here; the Viewer only calls `warmup?.()` so
-* the WASM/transport boot overlaps plugin initialization. StrictMode's
-* double-mount therefore constructs two independent thunk engines and tears
-* the first fully down, matching the kernel's own effect-scoped lifecycle.
-* That means dev-only double resource use (two worker spawns, two font
-* fetches, briefly overlapping) — deliberate, because it is exactly the
-* leak-detection contract StrictMode exists to exercise; production mounts
-* once and boots once.
-*/
-function Viewer({ engine, plugins, initialDocuments, fallback, renderError, children }) {
-	const initial = useRef({
-		engine,
-		plugins,
-		initialDocuments
-	});
-	const warned = useRef(false);
-	if (process.env.NODE_ENV !== "production" && !warned.current) {
-		if (initial.current.engine !== engine || initial.current.plugins !== plugins) {
-			warned.current = true;
-			console.warn("[embedpdf] <Viewer> engine/plugins are init-only. A changed identity is ignored — pass stable references (module scope, useState, or useMemo). An inline `plugins={[...]}` array recreates its identity every render.");
-		}
-	}
-	const [boot, setBoot] = useState({
-		phase: "booting",
-		kernel: null
-	});
-	useEffect(() => {
-		const captured = initial.current;
-		const ownsEngine = typeof captured.engine === "function";
-		const engine = ownsEngine ? captured.engine() : captured.engine;
-		engine.warmup?.();
-		let kernel;
-		try {
-			kernel = createKernel({
-				engine,
-				plugins: captured.plugins
-			});
-		} catch (error) {
-			setBoot({
-				phase: "error",
-				error
-			});
-			if (ownsEngine) engine.destroy();
-			return;
-		}
-		let alive = true;
-		setBoot({
-			phase: "booting",
-			kernel
-		});
-		kernel.start().then(() => {
-			if (!alive) return;
-			setBoot({
-				phase: "ready",
-				kernel
-			});
-			kernel.documents.openAll(captured.initialDocuments ?? []);
-		}, (error) => {
-			if (alive) setBoot({
-				phase: "error",
-				error
-			});
-		});
-		return () => {
-			alive = false;
-			kernel.destroy().then(() => {
-				if (ownsEngine) engine.destroy();
-			});
-		};
-	}, []);
-	if (boot.phase === "error") return /* @__PURE__ */ jsx(Fragment, { children: renderError ? renderError(boot.error) : null });
-	if (!boot.kernel) return null;
-	return /* @__PURE__ */ jsx(KernelCtx.Provider, {
-		value: boot.kernel,
-		children: boot.phase === "ready" ? children : fallback ?? null
-	});
-}
-const EmbedPDF = Viewer;
-const PageCtx = createContext(null);
-const PageProvider = PageCtx.Provider;
-function usePage() {
-	const c = useContext(PageCtx);
-	if (!c) throw new Error("usePage must be used inside <PageView> or a <Stage> page");
-	return c;
-}
-function makePageContext(documentId, view, pon, pageIndex, frame, transform, getRect, getViewDemand) {
-	return {
-		documentId,
-		view,
-		pon,
-		pageIndex,
-		frame,
-		transform,
-		...getViewDemand ? { getViewDemand } : {},
-		toContentPoint: (cx, cy) => {
-			const r = getRect();
-			return transform.viewToContent({
-				x: cx - r.left,
-				y: cy - r.top
-			});
-		},
-		toClientPoint: (p) => {
-			const r = getRect();
-			const v = transform.contentToView(p);
-			return {
-				x: r.left + v.x,
-				y: r.top + v.y
-			};
-		},
-		toClientRect: (rect) => {
-			const r = getRect();
-			const v = transform.contentToViewRect(rect);
-			return {
-				x: r.left + v.x,
-				y: r.top + v.y,
-				width: v.width,
-				height: v.height
-			};
-		}
-	};
-}
-//#endregion
-export { DocumentGate, DocumentScope, EmbedPDF, PageProvider, Viewer, makePageContext, shallowArray, useActiveDocumentId, useCapability, useCapabilityEvent, useDocumentId, useDocumentStatus, useDocuments, useKernel, useKernelValue, useOptionalCapability, useOptionalSelector, usePage, useSelector };
-
-//# sourceMappingURL=runtime.js.map
+export { DocumentGate, DocumentScope, EmbedPDF, KernelProvider, PageProvider, Viewer, epdfTheme, makePageContext, mountWebFont, saveFile, shallowArray, useActiveDocumentId, useCapability, useCapabilityEvent, useDocument, useDocumentId, useDocumentScope, useDocuments, useDocumentsEvent, useDocumentsState, useKernel, useKernelValue, useOptionalCapability, useOptionalSelector, usePage, usePageList, useSelector, useViewerSettings };

package/dist/search.cjs

@@ -1,79 +1,110 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_rolldown_runtime = require("./rolldown-runtime-DDXJien1.cjs");
-const require_runtime = require("./runtime.cjs");
+const require_runtime = require("./runtime-fzpGv78v.cjs");
+const require_state = require("./state-CsfZy_Eq.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");
+let _embedpdf_web = require("@embedpdf/web");
 let react = require("react");
 react = require_rolldown_runtime.__toESM(react, 1);
 let _embedpdf_plugin_search = require("@embedpdf/plugin-search");
 //#region src/search.tsx
-function SearchLayer({ color = "#ffd500", activeColor = "#ff9632", blendMode = "multiply" }) {
+function SearchLayer({ onHitClick }) {
 	const page = require_runtime.usePage();
-	const hits = require_runtime.useSelector(_embedpdf_plugin_search.SearchToken, (c) => c.hitsForPage(page.pon), require_runtime.shallowArray);
-	const active = require_runtime.useSelector(_embedpdf_plugin_search.SearchToken, (c) => c.activeHit());
+	const hits = useSearchHits(page.ref);
+	const active = useSearchState((state) => state.activeHit);
+	const highlight = useSearchSettings((settings) => settings.highlight);
+	const [clicks] = (0, react.useState)(_embedpdf_web.createClickDetector);
 	if (hits.length === 0) return null;
+	const color = (0, _embedpdf_web.paint)("search-highlight", highlight.color);
+	const activeColor = (0, _embedpdf_web.paint)("search-highlight-active", highlight.activeColor);
+	const blendMode = (0, _embedpdf_web.paint)("search-blend-mode", highlight.blendMode);
+	const clickable = onHitClick ? {
+		pointerEvents: "auto",
+		cursor: "pointer"
+	} : null;
+	const pointerHandlers = (hit) => onHitClick && {
+		onPointerDown: (event) => clicks.press(event),
+		onClick: (event) => {
+			if (clicks.isClick(event)) onHitClick(hit);
+		}
+	};
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		style: {
 			position: "absolute",
 			inset: 0,
 			pointerEvents: "none"
 		},
-		children: hits.map((hit) => hit.segments.map(({ quad: q }, i) => {
-			const fill = hit === active ? activeColor : color;
-			if (q.upperStart.y === q.upperEnd.y && q.lowerStart.y === q.lowerEnd.y && q.upperStart.x === q.lowerStart.x) {
-				const tl = page.transform.toPixels(q.upperStart);
-				const br = page.transform.toPixels(q.lowerEnd);
-				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { style: {
-					position: "absolute",
-					left: tl.x,
-					top: tl.y,
-					width: br.x - tl.x,
-					height: br.y - tl.y,
-					background: fill,
-					mixBlendMode: blendMode,
-					borderRadius: 2
-				} }, `${hit.charStart}:${i}`);
+		children: (0, _embedpdf_web.searchHighlightsOf)(hits, {
+			active,
+			page: page.transform,
+			color,
+			activeColor
+		}).map((piece) => piece.box ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			...pointerHandlers(piece.hit),
+			style: {
+				position: "absolute",
+				left: piece.box.left,
+				top: piece.box.top,
+				width: piece.box.width,
+				height: piece.box.height,
+				backgroundColor: piece.fill,
+				mixBlendMode: blendMode,
+				borderRadius: 2,
+				...clickable
 			}
-			const ring = [
-				q.upperStart,
-				q.upperEnd,
-				q.lowerEnd,
-				q.lowerStart
-			].map((p) => page.transform.toPixels(p));
-			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+		}, piece.key) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+			style: {
+				position: "absolute",
+				inset: 0,
+				width: "100%",
+				height: "100%",
+				overflow: "visible",
+				mixBlendMode: blendMode
+			},
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("polygon", {
+				points: piece.points ?? void 0,
+				...pointerHandlers(piece.hit),
 				style: {
-					position: "absolute",
-					inset: 0,
-					width: "100%",
-					height: "100%",
-					overflow: "visible",
-					mixBlendMode: blendMode
-				},
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("polygon", {
-					points: ring.map((p) => `${p.x},${p.y}`).join(" "),
-					fill
-				})
-			}, `${hit.charStart}:${i}`);
-		}))
+					fill: piece.fill,
+					...clickable
+				}
+			})
+		}, piece.key))
 	});
 }
-/** The search capability (search/clear/next/prev/…) for app chrome. */
+/** The search capability (search / clear / nextHit / previousHit / …) for app chrome. */
 function useSearch() {
 	return require_runtime.useCapability(_embedpdf_plugin_search.SearchToken);
 }
-/** Reactive search read-model for chrome: the query, status, counts, progress. */
-function useSearchState() {
-	return {
-		query: require_runtime.useSelector(_embedpdf_plugin_search.SearchToken, (c) => c.query()),
-		status: require_runtime.useSelector(_embedpdf_plugin_search.SearchToken, (c) => c.status()),
-		hitCount: require_runtime.useSelector(_embedpdf_plugin_search.SearchToken, (c) => c.hitCount()),
-		activeIndex: require_runtime.useSelector(_embedpdf_plugin_search.SearchToken, (c) => c.activeIndex()),
-		progress: require_runtime.useSelector(_embedpdf_plugin_search.SearchToken, (c) => c.progress(), (a, b) => a.scanned === b.scanned && a.total === b.total),
-		error: require_runtime.useSelector(_embedpdf_plugin_search.SearchToken, (c) => c.errorMessage())
-	};
+/** Subscribe to one search event for the mounted lifetime: `useSearchEvent((search) => search.onCompleted, handler)`. */
+function useSearchEvent(select, handler) {
+	require_runtime.useCapabilityEvent(_embedpdf_plugin_search.SearchToken, select, handler);
+}
+/**
+* The search's state: the query, status, count, active match, progress and
+* error (the page's State table, declared once in `searchState`). Takes a
+* selector, and re-renders only when what it returns changes.
+*/
+const useSearchState = require_state.stateHook(_embedpdf_plugin_search.searchState);
+/** The search settings (`reveal`, `highlight`), with or without a document. Takes a selector. */
+const useSearchSettings = require_state.settingsHook(_embedpdf_plugin_search.SearchToken);
+const NO_HITS = Object.freeze([]);
+/**
+* Every match found so far, or one page's (its ref or index), for a results
+* list or a count per thumbnail. The arrays are reference-stable, so a
+* component re-renders only when matches land on what it shows. Empty without
+* a document, and for a page that has just left the document.
+*/
+function useSearchHits(page) {
+	const scoped = require_runtime.useDocumentScope();
+	return require_runtime.useKernelValue((kernel) => kernel.tryCapability(_embedpdf_plugin_search.SearchToken, scoped ?? void 0)?.listHits(page === void 0 ? void 0 : { page }) ?? NO_HITS);
 }
 //#endregion
 exports.SearchLayer = SearchLayer;
 exports.useSearch = useSearch;
+exports.useSearchEvent = useSearchEvent;
+exports.useSearchHits = useSearchHits;
+exports.useSearchSettings = useSearchSettings;
 exports.useSearchState = useSearchState;
 Object.keys(_embedpdf_plugin_search).forEach(function(k) {
 	if (k !== "default" && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {

package/dist/search.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"search.cjs","names":["usePage","useSelector","SearchToken","shallowArray","useCapability"],"sources":["../src/search.tsx"],"sourcesContent":["/**\n * The React surface for @embedpdf/plugin-search.\n *\n * <SearchLayer> is a dumb renderer, the SelectionLayer's twin: it reads\n * the page's content-space hit rects from the capability and paints them\n * through PageContext.toPixels. The active hit gets its own colour.\n * No pointer handling, no engine calls — search is driven from app chrome\n * via useSearch().\n */\n\n// One-line-per-feature: registration travels with the UI.\nexport * from '@embedpdf/plugin-search';\nimport * as React from 'react';\nimport { SearchToken } from '@embedpdf/plugin-search';\nimport type { SearchHit } from '@embedpdf/plugin-search';\nimport { shallowArray, useCapability, usePage, useSelector } from './runtime';\n\nexport interface SearchLayerProps {\n  /** Highlight colour for hits — SOLID (default: highlighter yellow). */\n  color?: string;\n  /** Highlight colour for the ACTIVE hit — SOLID (default: orange). */\n  activeColor?: string;\n  /**\n   * How the highlight composites with the page. `'multiply'` (default) is\n   * the real-highlighter look: text stays crisp black through the colour,\n   * only the paper tints. Pass `'normal'` (with translucent colours) for\n   * dark/scanned documents where multiply-on-dark would vanish.\n   */\n  blendMode?: React.CSSProperties['mixBlendMode'];\n}\n\nexport function SearchLayer({\n  color = '#ffd500',\n  activeColor = '#ff9632',\n  blendMode = 'multiply',\n}: SearchLayerProps) {\n  const page = usePage();\n  const hits = useSelector(SearchToken, (c) => c.hitsForPage(page.pon), shallowArray);\n  const active = useSelector(SearchToken, (c) => c.activeHit());\n\n  if (hits.length === 0) return null;\n\n  return (\n    <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none' }}>\n      {hits.map((hit: SearchHit) =>\n        hit.segments.map(({ quad: q }, i) => {\n          const fill = hit === active ? activeColor : color;\n          // Upright hits keep the classic rounded div (pixel-identical to the\n          // pre-orientation layer); rotated hits draw their true oriented cell.\n          const upright =\n            q.upperStart.y === q.upperEnd.y &&\n            q.lowerStart.y === q.lowerEnd.y &&\n            q.upperStart.x === q.lowerStart.x;\n          if (upright) {\n            const tl = page.transform.toPixels(q.upperStart);\n            const br = page.transform.toPixels(q.lowerEnd);\n            return (\n              <div\n                key={`${hit.charStart}:${i}`}\n                style={{\n                  position: 'absolute',\n                  left: tl.x,\n                  top: tl.y,\n                  width: br.x - tl.x,\n                  height: br.y - tl.y,\n                  background: fill,\n                  mixBlendMode: blendMode,\n                  borderRadius: 2,\n                }}\n              />\n            );\n          }\n          const ring = [q.upperStart, q.upperEnd, q.lowerEnd, q.lowerStart].map((p) =>\n            page.transform.toPixels(p),\n          );\n          return (\n            <svg\n              key={`${hit.charStart}:${i}`}\n              style={{\n                position: 'absolute',\n                inset: 0,\n                width: '100%',\n                height: '100%',\n                overflow: 'visible',\n                mixBlendMode: blendMode,\n              }}\n            >\n              <polygon points={ring.map((p) => `${p.x},${p.y}`).join(' ')} fill={fill} />\n            </svg>\n          );\n        }),\n      )}\n    </div>\n  );\n}\n\n/** The search capability (search/clear/next/prev/…) for app chrome. */\nexport function useSearch() {\n  return useCapability(SearchToken);\n}\n\n/** Reactive search read-model for chrome: the query, status, counts, progress. */\nexport function useSearchState() {\n  const query = useSelector(SearchToken, (c) => c.query());\n  const status = useSelector(SearchToken, (c) => c.status());\n  const hitCount = useSelector(SearchToken, (c) => c.hitCount());\n  const activeIndex = useSelector(SearchToken, (c) => c.activeIndex());\n  const progress = useSelector(\n    SearchToken,\n    (c) => c.progress(),\n    (a, b) => a.scanned === b.scanned && a.total === b.total,\n  );\n  const error = useSelector(SearchToken, (c) => c.errorMessage());\n  return { query, status, hitCount, activeIndex, progress, error };\n}\n"],"mappings":";;;;;;;;AA+BA,SAAgB,YAAY,EAC1B,QAAQ,WACR,cAAc,WACd,YAAY,cACO;CACnB,MAAM,OAAOA,gBAAAA,QAAQ;CACrB,MAAM,OAAOC,gBAAAA,YAAYC,wBAAAA,cAAc,MAAM,EAAE,YAAY,KAAK,GAAG,GAAGC,gBAAAA,YAAY;CAClF,MAAM,SAASF,gBAAAA,YAAYC,wBAAAA,cAAc,MAAM,EAAE,UAAU,CAAC;CAE5D,IAAI,KAAK,WAAW,GAAG,OAAO;CAE9B,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EAAK,OAAO;GAAE,UAAU;GAAY,OAAO;GAAG,eAAe;EAAO;EACjE,UAAA,KAAK,KAAK,QACT,IAAI,SAAS,KAAK,EAAE,MAAM,KAAK,MAAM;GACnC,MAAM,OAAO,QAAQ,SAAS,cAAc;GAO5C,IAHE,EAAE,WAAW,MAAM,EAAE,SAAS,KAC9B,EAAE,WAAW,MAAM,EAAE,SAAS,KAC9B,EAAE,WAAW,MAAM,EAAE,WAAW,GACrB;IACX,MAAM,KAAK,KAAK,UAAU,SAAS,EAAE,UAAU;IAC/C,MAAM,KAAK,KAAK,UAAU,SAAS,EAAE,QAAQ;IAC7C,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD,EAEE,OAAO;KACL,UAAU;KACV,MAAM,GAAG;KACT,KAAK,GAAG;KACR,OAAO,GAAG,IAAI,GAAG;KACjB,QAAQ,GAAG,IAAI,GAAG;KAClB,YAAY;KACZ,cAAc;KACd,cAAc;IAChB,EACD,GAXM,GAAG,IAAI,UAAU,GAAG,GAW1B;GAEL;GACA,MAAM,OAAO;IAAC,EAAE;IAAY,EAAE;IAAU,EAAE;IAAU,EAAE;GAAU,CAAC,CAAC,KAAK,MACrE,KAAK,UAAU,SAAS,CAAC,CAC3B;GACA,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;IAEE,OAAO;KACL,UAAU;KACV,OAAO;KACP,OAAO;KACP,QAAQ;KACR,UAAU;KACV,cAAc;IAChB;IAEA,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,WAAD;KAAS,QAAQ,KAAK,KAAK,MAAM,GAAG,EAAE,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC,KAAK,GAAG;KAAS;IAAO,CAAA;GACvE,GAXE,GAAG,IAAI,UAAU,GAAG,GAWtB;EAET,CAAC,CACH;CACG,CAAA;AAET;;AAGA,SAAgB,YAAY;CAC1B,OAAOE,gBAAAA,cAAcF,wBAAAA,WAAW;AAClC;;AAGA,SAAgB,iBAAiB;CAW/B,OAAO;EAAE,OAVKD,gBAAAA,YAAYC,wBAAAA,cAAc,MAAM,EAAE,MAAM,CAUzC;EAAG,QATDD,gBAAAA,YAAYC,wBAAAA,cAAc,MAAM,EAAE,OAAO,CASnC;EAAG,UARPD,gBAAAA,YAAYC,wBAAAA,cAAc,MAAM,EAAE,SAAS,CAQ7B;EAAG,aAPdD,gBAAAA,YAAYC,wBAAAA,cAAc,MAAM,EAAE,YAAY,CAOtB;EAAG,UAN9BD,gBAAAA,YACfC,wBAAAA,cACC,MAAM,EAAE,SAAS,IACjB,GAAG,MAAM,EAAE,YAAY,EAAE,WAAW,EAAE,UAAU,EAAE,KAGC;EAAG,OAD3CD,gBAAAA,YAAYC,wBAAAA,cAAc,MAAM,EAAE,aAAa,CACA;CAAE;AACjE"}
+{"version":3,"file":"search.cjs","names":["usePage","createClickDetector","useCapability","SearchToken","stateHook","searchState","settingsHook","useDocumentScope","useKernelValue"],"sources":["../src/search.tsx"],"sourcesContent":["/**\n * The React surface for @embedpdf/plugin-search.\n *\n * <SearchLayer> is the SelectionLayer's twin: it reads the page's page-space\n * hit rects from the capability and paints them through PageContext.toPixels,\n * in the colors of the plugin's `highlight` setting, which the `--epdf-search-*`\n * CSS variables override. No engine calls: search is driven from app chrome\n * via useSearch().\n */\n\n// One-line-per-feature: registration travels with the UI.\nexport * from '@embedpdf/plugin-search';\nimport * as React from 'react';\nimport { useState } from 'react';\nimport { SearchToken, searchState } from '@embedpdf/plugin-search';\nimport type { SearchCapability, SearchHit } from '@embedpdf/plugin-search';\nimport type { EventHook, PageRef } from '@embedpdf/core';\nimport { createClickDetector, paint, searchHighlightsOf } from '@embedpdf/web';\nimport {\n  useCapability,\n  useCapabilityEvent,\n  useDocumentScope,\n  useKernelValue,\n  usePage,\n} from './runtime';\nimport { settingsHook, stateHook } from './state';\n\nexport interface SearchLayerProps {\n  /**\n   * Make matches clickable: called with the match someone clicks, for example\n   * to make it the active one with `search.goToHit(hit)`. The press still\n   * reaches the page, so a drag that starts on a match selects text, and only\n   * a click calls this. Without it, matches are only paint and the pointer\n   * goes straight through.\n   */\n  onHitClick?: (hit: SearchHit) => void;\n}\n\nexport function SearchLayer({ onHitClick }: SearchLayerProps) {\n  const page = usePage();\n  // Per-page hit arrays are reference-stable in the plugin, so this re-renders\n  // only when matches land on this page.\n  const hits = useSearchHits(page.ref);\n  const active = useSearchState((state) => state.activeHit);\n  const highlight = useSearchSettings((settings) => settings.highlight);\n  // Tells a click on a match from a drag that starts there (and selects text).\n  const [clicks] = useState(createClickDetector);\n\n  if (hits.length === 0) return null;\n\n  // Each color is its CSS variable first, then the setting: CSS wins.\n  const color = paint('search-highlight', highlight.color);\n  const activeColor = paint('search-highlight-active', highlight.activeColor);\n  const blendMode = paint(\n    'search-blend-mode',\n    highlight.blendMode,\n  ) as React.CSSProperties['mixBlendMode'];\n\n  // Only a clickable match takes the pointer; a plain highlight stays inert.\n  // Nothing here stops the press, so it reaches the page as well.\n  const clickable = onHitClick ? { pointerEvents: 'auto' as const, cursor: 'pointer' } : null;\n  const pointerHandlers = (hit: SearchHit) =>\n    onHitClick && {\n      onPointerDown: (event: React.PointerEvent) => clicks.press(event),\n      onClick: (event: React.MouseEvent) => {\n        if (clicks.isClick(event)) onHitClick(hit);\n      },\n    };\n\n  // Upright lines are a rounded box; turned lines draw their true quad.\n  const pieces = searchHighlightsOf(hits, {\n    active,\n    page: page.transform,\n    color,\n    activeColor,\n  });\n\n  return (\n    <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none' }}>\n      {pieces.map((piece) =>\n        piece.box ? (\n          <div\n            key={piece.key}\n            {...pointerHandlers(piece.hit)}\n            style={{\n              position: 'absolute',\n              left: piece.box.left,\n              top: piece.box.top,\n              width: piece.box.width,\n              height: piece.box.height,\n              backgroundColor: piece.fill,\n              mixBlendMode: blendMode,\n              borderRadius: 2,\n              ...clickable,\n            }}\n          />\n        ) : (\n          <svg\n            key={piece.key}\n            style={{\n              position: 'absolute',\n              inset: 0,\n              width: '100%',\n              height: '100%',\n              overflow: 'visible',\n              mixBlendMode: blendMode,\n            }}\n          >\n            {/* The fill goes in `style`: an SVG attribute doesn't read var(). */}\n            <polygon\n              points={piece.points ?? undefined}\n              {...pointerHandlers(piece.hit)}\n              style={{ fill: piece.fill, ...clickable }}\n            />\n          </svg>\n        ),\n      )}\n    </div>\n  );\n}\n\n/** The search capability (search / clear / nextHit / previousHit / …) for app chrome. */\nexport function useSearch(): SearchCapability {\n  return useCapability(SearchToken);\n}\n\n/** Subscribe to one search event for the mounted lifetime: `useSearchEvent((search) => search.onCompleted, handler)`. */\nexport function useSearchEvent<T>(\n  select: (search: SearchCapability) => EventHook<T>,\n  handler: (event: T) => void,\n): void {\n  useCapabilityEvent(SearchToken, select, handler);\n}\n\n/**\n * The search's state: the query, status, count, active match, progress and\n * error (the page's State table, declared once in `searchState`). Takes a\n * selector, and re-renders only when what it returns changes.\n */\nexport const useSearchState = stateHook(searchState);\n\n/** The search settings (`reveal`, `highlight`), with or without a document. Takes a selector. */\nexport const useSearchSettings = settingsHook(SearchToken);\n\nconst NO_HITS: readonly SearchHit[] = Object.freeze([]);\n\n/**\n * Every match found so far, or one page's (its ref or index), for a results\n * list or a count per thumbnail. The arrays are reference-stable, so a\n * component re-renders only when matches land on what it shows. Empty without\n * a document, and for a page that has just left the document.\n */\nexport function useSearchHits(page?: PageRef | number): readonly SearchHit[] {\n  const scoped = useDocumentScope();\n  // Resolved on every read, like the state hook: a document that closes reads as no hits.\n  return useKernelValue(\n    (kernel) =>\n      kernel\n        .tryCapability(SearchToken, scoped ?? undefined)\n        ?.listHits(page === undefined ? undefined : { page }) ?? NO_HITS,\n  );\n}\n"],"mappings":";;;;;;;;;;AAsCA,SAAgB,YAAY,EAAE,cAAgC;CAC5D,MAAM,OAAOA,gBAAAA,QAAQ;CAGrB,MAAM,OAAO,cAAc,KAAK,GAAG;CACnC,MAAM,SAAS,gBAAgB,UAAU,MAAM,SAAS;CACxD,MAAM,YAAY,mBAAmB,aAAa,SAAS,SAAS;CAEpE,MAAM,CAAC,WAAA,GAAA,MAAA,SAAA,CAAmBC,cAAAA,mBAAmB;CAE7C,IAAI,KAAK,WAAW,GAAG,OAAO;CAG9B,MAAM,SAAA,GAAA,cAAA,MAAA,CAAc,oBAAoB,UAAU,KAAK;CACvD,MAAM,eAAA,GAAA,cAAA,MAAA,CAAoB,2BAA2B,UAAU,WAAW;CAC1E,MAAM,aAAA,GAAA,cAAA,MAAA,CACJ,qBACA,UAAU,SACZ;CAIA,MAAM,YAAY,aAAa;EAAE,eAAe;EAAiB,QAAQ;CAAU,IAAI;CACvF,MAAM,mBAAmB,QACvB,cAAc;EACZ,gBAAgB,UAA8B,OAAO,MAAM,KAAK;EAChE,UAAU,UAA4B;GACpC,IAAI,OAAO,QAAQ,KAAK,GAAG,WAAW,GAAG;EAC3C;CACF;CAUF,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EAAK,OAAO;GAAE,UAAU;GAAY,OAAO;GAAG,eAAe;EAAO;EARpC,WAAA,GAAA,cAAA,mBAAA,CAAA,MAAM;GACtC;GACA,MAAM,KAAK;GACX;GACA;EACF,CAIU,CAAC,CAAC,KAAK,UACX,MAAM,MACJ,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;GAEE,GAAI,gBAAgB,MAAM,GAAG;GAC7B,OAAO;IACL,UAAU;IACV,MAAM,MAAM,IAAI;IAChB,KAAK,MAAM,IAAI;IACf,OAAO,MAAM,IAAI;IACjB,QAAQ,MAAM,IAAI;IAClB,iBAAiB,MAAM;IACvB,cAAc;IACd,cAAc;IACd,GAAG;GACL;EACD,GAbM,MAAM,GAaZ,IAED,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;GAEE,OAAO;IACL,UAAU;IACV,OAAO;IACP,OAAO;IACP,QAAQ;IACR,UAAU;IACV,cAAc;GAChB;GAGA,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,WAAD;IACE,QAAQ,MAAM,UAAU,KAAA;IACxB,GAAI,gBAAgB,MAAM,GAAG;IAC7B,OAAO;KAAE,MAAM,MAAM;KAAM,GAAG;IAAU;GACzC,CAAA;EACE,GAhBE,MAAM,GAgBR,CAET;CACG,CAAA;AAET;;AAGA,SAAgB,YAA8B;CAC5C,OAAOC,gBAAAA,cAAcC,wBAAAA,WAAW;AAClC;;AAGA,SAAgB,eACd,QACA,SACM;CACN,gBAAA,mBAAmBA,wBAAAA,aAAa,QAAQ,OAAO;AACjD;;;;;;AAOA,MAAa,iBAAiBC,cAAAA,UAAUC,wBAAAA,WAAW;;AAGnD,MAAa,oBAAoBC,cAAAA,aAAaH,wBAAAA,WAAW;AAEzD,MAAM,UAAgC,OAAO,OAAO,CAAC,CAAC;;;;;;;AAQtD,SAAgB,cAAc,MAA+C;CAC3E,MAAM,SAASI,gBAAAA,iBAAiB;CAEhC,OAAOC,gBAAAA,gBACJ,WACC,OACG,cAAcL,wBAAAA,aAAa,UAAU,KAAA,CAAS,CAAC,EAC9C,SAAS,SAAS,KAAA,IAAY,KAAA,IAAY,EAAE,KAAK,CAAC,KAAK,OAC/D;AACF"}

package/dist/search.d.cts

@@ -1,34 +1,47 @@
-import * as React from "react";
+import { n as StateHook, t as SettingsHook } from "./state-0K1I5cM4.cjs";
+import { o as SearchQuery } from "./AnnotationList-CkijRHet-HEFNUIZe.cjs";
+import { EventHook, PageRef } from "@embedpdf/core";
+import { SearchCapability, SearchHit } from "@embedpdf/plugin-search";
 export * from "@embedpdf/plugin-search";
 //#region src/search.d.ts
 interface SearchLayerProps {
-  /** Highlight colour for hits — SOLID (default: highlighter yellow). */
-  color?: string;
-  /** Highlight colour for the ACTIVE hit — SOLID (default: orange). */
-  activeColor?: string;
   /**
-   * How the highlight composites with the page. `'multiply'` (default) is
-   * the real-highlighter look: text stays crisp black through the colour,
-   * only the paper tints. Pass `'normal'` (with translucent colours) for
-   * dark/scanned documents where multiply-on-dark would vanish.
+   * Make matches clickable: called with the match someone clicks, for example
+   * to make it the active one with `search.goToHit(hit)`. The press still
+   * reaches the page, so a drag that starts on a match selects text, and only
+   * a click calls this. Without it, matches are only paint and the pointer
+   * goes straight through.
    */
-  blendMode?: React.CSSProperties['mixBlendMode'];
+  onHitClick?: (hit: SearchHit) => void;
 }
-declare function SearchLayer({ color, activeColor, blendMode }: SearchLayerProps): import("react/jsx-runtime").JSX.Element | null;
-/** The search capability (search/clear/next/prev/…) for app chrome. */
-declare function useSearch(): import("@embedpdf/plugin-search").SearchCapability;
-/** Reactive search read-model for chrome: the query, status, counts, progress. */
-declare function useSearchState(): {
-  query: import("@embedpdf/plugin-search").SearchQuery | null;
+declare function SearchLayer({ onHitClick }: SearchLayerProps): import("react/jsx-runtime").JSX.Element | null;
+/** The search capability (search / clear / nextHit / previousHit / …) for app chrome. */
+declare function useSearch(): SearchCapability;
+/** Subscribe to one search event for the mounted lifetime: `useSearchEvent((search) => search.onCompleted, handler)`. */
+declare function useSearchEvent<T>(select: (search: SearchCapability) => EventHook<T>, handler: (event: T) => void): void;
+/**
+ * The search's state: the query, status, count, active match, progress and
+ * error (the page's State table, declared once in `searchState`). Takes a
+ * selector, and re-renders only when what it returns changes.
+ */
+declare const useSearchState: StateHook<{
+  query: SearchQuery | null;
   status: import("@embedpdf/plugin-search").SearchStatus;
   hitCount: number;
-  activeIndex: number;
-  progress: {
-    scanned: number;
-    total: number;
-  };
-  error: string | null;
-};
+  activeHitIndex: number;
+  activeHit: SearchHit | null;
+  progress: import("@embedpdf/plugin-search").SearchProgress;
+  error: import("@embedpdf/core").PluginErrorInfo | null;
+}>;
+/** The search settings (`reveal`, `highlight`), with or without a document. Takes a selector. */
+declare const useSearchSettings: SettingsHook<import("@embedpdf/plugin-search").SearchSettings>;
+/**
+ * Every match found so far, or one page's (its ref or index), for a results
+ * list or a count per thumbnail. The arrays are reference-stable, so a
+ * component re-renders only when matches land on what it shows. Empty without
+ * a document, and for a page that has just left the document.
+ */
+declare function useSearchHits(page?: PageRef | number): readonly SearchHit[];
 //#endregion
-export { SearchLayer, SearchLayerProps, useSearch, useSearchState };
+export { SearchLayer, SearchLayerProps, useSearch, useSearchEvent, useSearchHits, useSearchSettings, useSearchState };
 //# sourceMappingURL=search.d.cts.map