@embedpdf/react 3.0.0-next.0

package/dist/scrollbar.d.ts

@@ -0,0 +1,42 @@
+import { CapabilityToken } from "@embedpdf/core";
+import * as React from "react";
+import { ScrollMetrics, StageCapability } from "@embedpdf/plugin-stage";
+//#region src/scrollbar.d.ts
+type ScrollbarAxis = 'x' | 'y';
+/** Live scroll metrics for a stage lens (reference-stable; see
+ *  `StageCapability.scrollMetrics`). The raw material for custom scroll UI. */
+declare function useScrollMetrics(token?: CapabilityToken<StageCapability>): ScrollMetrics;
+interface ScrollbarProps {
+  axis: ScrollbarAxis;
+  /** The stage lens to scroll (default: the main StageToken). */
+  token?: CapabilityToken<StageCapability>;
+  /**
+   * Overlay auto-hide: fade `autoHide` ms after the camera stops moving
+   * (drags and hover pin it visible; a hidden bar ignores the pointer, like
+   * macOS). `false` = always visible. Visibility is published as
+   * `data-state="visible|hidden"` — the default style fades opacity; replace
+   * it in CSS for any other treatment. Default 1200.
+   */
+  autoHide?: number | false;
+  /** Minimum thumb length in px — native bars never vanish on long documents.
+   *  Position stays proportional via the standard travel remap. Default 24. */
+  minThumbSize?: number;
+  /**
+   * Pressing the track: 'page' steps by 90% of a viewport toward the pointer,
+   * repeats while held, and stops when the thumb reaches the pointer (the
+   * native default); 'jump' centers the thumb at the pointer and hands off to
+   * a drag (the macOS option-click / Figma feel). Default 'page'.
+   */
+  trackPress?: 'page' | 'jump';
+  /** Track class/style. The default style pins the bar to the right (y) or
+   *  bottom (x) edge of the nearest positioned ancestor — the Stage container
+   *  when rendered in its `overlay`; override to place it anywhere else. */
+  className?: string;
+  style?: React.CSSProperties;
+  thumbClassName?: string;
+  thumbStyle?: React.CSSProperties;
+}
+declare function Scrollbar({ axis, token, autoHide, minThumbSize, trackPress, className, style, thumbClassName, thumbStyle }: ScrollbarProps): import("react/jsx-runtime").JSX.Element | null;
+//#endregion
+export { Scrollbar, ScrollbarAxis, ScrollbarProps, useScrollMetrics };
+//# sourceMappingURL=scrollbar.d.ts.map

package/dist/scrollbar.js

@@ -0,0 +1,213 @@
+import { useCapability, useSelector } from "./runtime.js";
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { StageToken } from "@embedpdf/plugin-stage";
+//#region src/scrollbar.tsx
+/** Live scroll metrics for a stage lens (reference-stable; see
+*  `StageCapability.scrollMetrics`). The raw material for custom scroll UI. */
+function useScrollMetrics(token = StageToken) {
+	return useSelector(token, (c) => c.scrollMetrics());
+}
+const clamp01 = (v) => Math.min(1, Math.max(0, v));
+/** Best-effort pointer capture: an already-released pointer (pen/touch races,
+*  synthetic events in tests) throws NotFoundError — the press must still work,
+*  just without capture (moves keep arriving while the pointer stays on us). */
+const capturePointer = (el, pointerId) => {
+	try {
+		el.setPointerCapture(pointerId);
+	} catch {}
+};
+/** Thumb geometry from metrics + a measured track. One formula for render,
+*  drag capture, and paging — they can never disagree. */
+const geometry = (m, vertical, trackPx, minThumbSize) => {
+	const client = vertical ? m.clientHeight : m.clientWidth;
+	const total = vertical ? m.scrollHeight : m.scrollWidth;
+	const offset = vertical ? m.scrollTop : m.scrollLeft;
+	const maxOffset = Math.max(0, total - client);
+	const thumbLen = Math.min(trackPx, Math.max(minThumbSize, total > 0 ? client / total * trackPx : 0));
+	const travel = Math.max(0, trackPx - thumbLen);
+	return {
+		client,
+		offset,
+		maxOffset,
+		thumbLen,
+		travel,
+		thumbPos: maxOffset > 0 ? offset / maxOffset * travel : 0
+	};
+};
+function Scrollbar({ axis, token = StageToken, autoHide = 1200, minThumbSize = 24, trackPress = "page", className, style, thumbClassName, thumbStyle }) {
+	const stage = useCapability(token);
+	const m = useScrollMetrics(token);
+	const vertical = axis === "y";
+	const scrollable = vertical ? m.scrollableY : m.scrollableX;
+	const trackRef = useRef(null);
+	const [trackPx, setTrackPx] = useState(0);
+	const [dragging, setDragging] = useState(false);
+	const [hovered, setHovered] = useState(false);
+	const [active, setActive] = useState(true);
+	const g = geometry(m, vertical, trackPx, minThumbSize);
+	const hideAfter = autoHide === false ? 0 : autoHide;
+	useEffect(() => {
+		if (!hideAfter) return;
+		setActive(true);
+		const t = setTimeout(() => setActive(false), hideAfter);
+		return () => clearTimeout(t);
+	}, [m, hideAfter]);
+	const shown = !hideAfter || active || hovered || dragging;
+	useEffect(() => {
+		const el = trackRef.current;
+		if (!el) return;
+		const measure = () => setTrackPx(vertical ? el.clientHeight : el.clientWidth);
+		const ro = new ResizeObserver(measure);
+		ro.observe(el);
+		measure();
+		return () => ro.disconnect();
+	}, [vertical, scrollable]);
+	const dragRef = useRef(null);
+	const pageRef = useRef(null);
+	const lastPtr = useRef(0);
+	const ptrPos = (e) => {
+		const r = trackRef.current.getBoundingClientRect();
+		return vertical ? e.clientY - r.top : e.clientX - r.left;
+	};
+	/** Fresh geometry for paging steps — read from the capability, never a stale render. */
+	const liveGeometry = () => geometry(stage.scrollMetrics(), vertical, trackPx, minThumbSize);
+	const stopPaging = () => {
+		if (pageRef.current) {
+			clearTimeout(pageRef.current.timer);
+			clearInterval(pageRef.current.timer);
+			pageRef.current = null;
+		}
+	};
+	const endDrag = () => {
+		dragRef.current = null;
+		stopPaging();
+		setDragging(false);
+	};
+	const beginDrag = (grab, applied) => {
+		dragRef.current = {
+			grab,
+			applied,
+			max: g.maxOffset,
+			travel: g.travel
+		};
+		setDragging(true);
+	};
+	const onThumbDown = (e) => {
+		if (e.button !== 0) return;
+		e.preventDefault();
+		e.stopPropagation();
+		capturePointer(e.target, e.pointerId);
+		beginDrag(ptrPos(e) - g.thumbPos, g.offset);
+	};
+	const onTrackDown = (e) => {
+		if (e.button !== 0 || e.target !== e.currentTarget) return;
+		e.preventDefault();
+		capturePointer(e.currentTarget, e.pointerId);
+		const p = lastPtr.current = ptrPos(e);
+		if (trackPress === "jump") {
+			const want = g.travel > 0 ? clamp01((p - g.thumbLen / 2) / g.travel) * g.maxOffset : 0;
+			stage.scrollTo(vertical ? { top: want } : { left: want });
+			beginDrag(g.thumbLen / 2, want);
+			return;
+		}
+		const dir = p < g.thumbPos ? -1 : 1;
+		const step = () => {
+			const live = liveGeometry();
+			if (dir === 1 ? lastPtr.current <= live.thumbPos + live.thumbLen : lastPtr.current >= live.thumbPos) return stopPaging();
+			stage.scrollBy(vertical ? { top: dir * live.client * .9 } : { left: dir * live.client * .9 });
+		};
+		step();
+		const timer = window.setTimeout(() => {
+			if (!pageRef.current) return;
+			pageRef.current.timer = window.setInterval(step, 80);
+		}, 350);
+		pageRef.current = {
+			dir,
+			timer
+		};
+	};
+	const onMove = (e) => {
+		const d = dragRef.current;
+		if (d) {
+			if (d.travel <= 0) return;
+			const want = clamp01((ptrPos(e) - d.grab) / d.travel) * d.max;
+			const delta = want - d.applied;
+			if (delta) {
+				stage.panBy(vertical ? 0 : -delta, vertical ? -delta : 0);
+				d.applied = want;
+			}
+		} else if (pageRef.current) lastPtr.current = ptrPos(e);
+	};
+	useEffect(() => endDrag, []);
+	if (!scrollable) return null;
+	const trackDefaults = vertical ? {
+		position: "absolute",
+		top: 0,
+		right: 0,
+		bottom: 0,
+		width: 12
+	} : {
+		position: "absolute",
+		left: 0,
+		right: 0,
+		bottom: 0,
+		height: 12
+	};
+	const thumbDefaults = vertical ? {
+		position: "absolute",
+		left: 2,
+		right: 2,
+		top: g.thumbPos,
+		height: g.thumbLen
+	} : {
+		position: "absolute",
+		top: 2,
+		bottom: 2,
+		left: g.thumbPos,
+		width: g.thumbLen
+	};
+	return /* @__PURE__ */ jsx("div", {
+		ref: trackRef,
+		role: "scrollbar",
+		"aria-orientation": vertical ? "vertical" : "horizontal",
+		"aria-valuemin": 0,
+		"aria-valuemax": Math.round(g.maxOffset),
+		"aria-valuenow": Math.round(g.offset),
+		"data-embedpdf-scrollbar": "",
+		"data-axis": axis,
+		"data-state": shown ? "visible" : "hidden",
+		"data-dragging": dragging ? "" : void 0,
+		className,
+		style: {
+			...trackDefaults,
+			touchAction: "none",
+			userSelect: "none",
+			opacity: shown ? 1 : 0,
+			transition: "opacity 200ms",
+			pointerEvents: shown ? "auto" : "none",
+			...style
+		},
+		onPointerDown: onTrackDown,
+		onPointerMove: onMove,
+		onPointerUp: endDrag,
+		onPointerCancel: endDrag,
+		onPointerEnter: () => setHovered(true),
+		onPointerLeave: () => setHovered(false),
+		children: /* @__PURE__ */ jsx("div", {
+			"data-embedpdf-scrollbar-thumb": "",
+			className: thumbClassName,
+			style: {
+				...thumbDefaults,
+				borderRadius: 6,
+				background: "var(--epdf-scrollbar-thumb, rgba(0, 0, 0, 0.4))",
+				...thumbStyle
+			},
+			onPointerDown: onThumbDown
+		})
+	});
+}
+//#endregion
+export { Scrollbar, useScrollMetrics };
+
+//# sourceMappingURL=scrollbar.js.map

package/dist/scrollbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scrollbar.js","names":[],"sources":["../src/scrollbar.tsx"],"sourcesContent":["/**\n * Headless scrollbar for a Stage lens — a pure view of `stage.scrollMetrics()`.\n *\n * The Stage exposes the native scroller contract (scrollTop/scrollHeight/\n * clientHeight, in screen px — see plugin-stage's README); this component turns\n * it into a native-feeling bar: thumb drag with pointer capture and a preserved\n * grab point, track paging with press-and-hold repeat that stops at the\n * pointer, a minimum thumb length on long documents, and macOS-style overlay\n * auto-hide. On an UNBOUNDED stage the metrics already carry the Figma\n * semantics (the range is the union of content and view), so the same bar\n * shrinks toward the edge as you pan away and rides you back — the mapping is\n * FROZEN for the duration of a thumb drag so the thumb never chases itself\n * while the union re-collapses.\n *\n * Headless styling contract: geometry and behavior live here; looks live in\n * your CSS. Style via `className`/`thumbClassName` (or the style props) against\n *   [data-embedpdf-scrollbar][data-axis=\"y\"][data-state=\"visible|hidden\"]\n *   [data-embedpdf-scrollbar][data-dragging]\n *   [data-embedpdf-scrollbar-thumb]\n * The defaults are deliberately minimal: a transparent track pinned to the\n * viewport edge and a `var(--epdf-scrollbar-thumb, …)` pill, so the bar works\n * unstyled and disappears into any theme. Build something else entirely\n * (minimap, progress ring) from `useScrollMetrics()` + `stage.scrollTo()`.\n */\n\nimport * as React from 'react';\nimport { useEffect, useRef, useState } from 'react';\nimport { StageToken } from '@embedpdf/plugin-stage';\nimport type { ScrollMetrics, StageCapability } from '@embedpdf/plugin-stage';\nimport type { CapabilityToken } from '@embedpdf/core';\nimport { useCapability, useSelector } from './runtime';\n\nexport type ScrollbarAxis = 'x' | 'y';\n\n/** Live scroll metrics for a stage lens (reference-stable; see\n *  `StageCapability.scrollMetrics`). The raw material for custom scroll UI. */\nexport function useScrollMetrics(\n  token: CapabilityToken<StageCapability> = StageToken,\n): ScrollMetrics {\n  return useSelector(token, (c) => c.scrollMetrics());\n}\n\nexport interface ScrollbarProps {\n  axis: ScrollbarAxis;\n  /** The stage lens to scroll (default: the main StageToken). */\n  token?: CapabilityToken<StageCapability>;\n  /**\n   * Overlay auto-hide: fade `autoHide` ms after the camera stops moving\n   * (drags and hover pin it visible; a hidden bar ignores the pointer, like\n   * macOS). `false` = always visible. Visibility is published as\n   * `data-state=\"visible|hidden\"` — the default style fades opacity; replace\n   * it in CSS for any other treatment. Default 1200.\n   */\n  autoHide?: number | false;\n  /** Minimum thumb length in px — native bars never vanish on long documents.\n   *  Position stays proportional via the standard travel remap. Default 24. */\n  minThumbSize?: number;\n  /**\n   * Pressing the track: 'page' steps by 90% of a viewport toward the pointer,\n   * repeats while held, and stops when the thumb reaches the pointer (the\n   * native default); 'jump' centers the thumb at the pointer and hands off to\n   * a drag (the macOS option-click / Figma feel). Default 'page'.\n   */\n  trackPress?: 'page' | 'jump';\n  /** Track class/style. The default style pins the bar to the right (y) or\n   *  bottom (x) edge of the nearest positioned ancestor — the Stage container\n   *  when rendered in its `overlay`; override to place it anywhere else. */\n  className?: string;\n  style?: React.CSSProperties;\n  thumbClassName?: string;\n  thumbStyle?: React.CSSProperties;\n}\n\nconst clamp01 = (v: number) => Math.min(1, Math.max(0, v));\n\n/** Best-effort pointer capture: an already-released pointer (pen/touch races,\n *  synthetic events in tests) throws NotFoundError — the press must still work,\n *  just without capture (moves keep arriving while the pointer stays on us). */\nconst capturePointer = (el: Element, pointerId: number) => {\n  try {\n    el.setPointerCapture(pointerId);\n  } catch {\n    /* uncaptured is fine */\n  }\n};\n\n/** Thumb geometry from metrics + a measured track. One formula for render,\n *  drag capture, and paging — they can never disagree. */\nconst geometry = (m: ScrollMetrics, vertical: boolean, trackPx: number, minThumbSize: number) => {\n  const client = vertical ? m.clientHeight : m.clientWidth;\n  const total = vertical ? m.scrollHeight : m.scrollWidth;\n  const offset = vertical ? m.scrollTop : m.scrollLeft;\n  const maxOffset = Math.max(0, total - client);\n  const thumbLen = Math.min(\n    trackPx,\n    Math.max(minThumbSize, total > 0 ? (client / total) * trackPx : 0),\n  );\n  const travel = Math.max(0, trackPx - thumbLen);\n  const thumbPos = maxOffset > 0 ? (offset / maxOffset) * travel : 0;\n  return { client, offset, maxOffset, thumbLen, travel, thumbPos };\n};\n\nexport function Scrollbar({\n  axis,\n  token = StageToken,\n  autoHide = 1200,\n  minThumbSize = 24,\n  trackPress = 'page',\n  className,\n  style,\n  thumbClassName,\n  thumbStyle,\n}: ScrollbarProps) {\n  const stage = useCapability(token);\n  const m = useScrollMetrics(token);\n  const vertical = axis === 'y';\n  const scrollable = vertical ? m.scrollableY : m.scrollableX;\n\n  const trackRef = useRef<HTMLDivElement>(null);\n  const [trackPx, setTrackPx] = useState(0);\n  const [dragging, setDragging] = useState(false);\n  const [hovered, setHovered] = useState(false);\n  const [active, setActive] = useState(true); // camera moved recently\n\n  const g = geometry(m, vertical, trackPx, minThumbSize);\n\n  // ── overlay auto-hide: any metrics change re-arms the fade timer ──────────\n  const hideAfter = autoHide === false ? 0 : autoHide;\n  useEffect(() => {\n    if (!hideAfter) return;\n    setActive(true);\n    const t = setTimeout(() => setActive(false), hideAfter);\n    return () => clearTimeout(t);\n  }, [m, hideAfter]);\n  const shown = !hideAfter || active || hovered || dragging;\n\n  // ── track measurement (px mapping needs real geometry) ────────────────────\n  useEffect(() => {\n    const el = trackRef.current;\n    if (!el) return;\n    const measure = () => setTrackPx(vertical ? el.clientHeight : el.clientWidth);\n    const ro = new ResizeObserver(measure);\n    ro.observe(el);\n    measure();\n    return () => ro.disconnect();\n  }, [vertical, scrollable]);\n\n  // ── interactions. Drag state is FROZEN at pointer-down (grab point, travel,\n  //    max offset) and applied as relative pans — absolute-feeling in bounded\n  //    mode (the range is static there) and stable in unbounded mode, where\n  //    the live union would otherwise shift under the pointer mid-drag. ──────\n  const dragRef = useRef<{ grab: number; applied: number; max: number; travel: number } | null>(\n    null,\n  );\n  const pageRef = useRef<{ dir: 1 | -1; timer: number } | null>(null);\n  const lastPtr = useRef(0);\n\n  const ptrPos = (e: React.PointerEvent) => {\n    const r = trackRef.current!.getBoundingClientRect();\n    return vertical ? e.clientY - r.top : e.clientX - r.left;\n  };\n  /** Fresh geometry for paging steps — read from the capability, never a stale render. */\n  const liveGeometry = () => geometry(stage.scrollMetrics(), vertical, trackPx, minThumbSize);\n\n  const stopPaging = () => {\n    if (pageRef.current) {\n      clearTimeout(pageRef.current.timer);\n      clearInterval(pageRef.current.timer);\n      pageRef.current = null;\n    }\n  };\n  const endDrag = () => {\n    dragRef.current = null;\n    stopPaging();\n    setDragging(false);\n  };\n\n  const beginDrag = (grab: number, applied: number) => {\n    dragRef.current = { grab, applied, max: g.maxOffset, travel: g.travel };\n    setDragging(true);\n  };\n\n  const onThumbDown = (e: React.PointerEvent) => {\n    if (e.button !== 0) return;\n    e.preventDefault();\n    e.stopPropagation();\n    capturePointer(e.target as Element, e.pointerId);\n    beginDrag(ptrPos(e) - g.thumbPos, g.offset);\n  };\n\n  const onTrackDown = (e: React.PointerEvent) => {\n    if (e.button !== 0 || e.target !== e.currentTarget) return; // thumb handles its own\n    e.preventDefault();\n    capturePointer(e.currentTarget as Element, e.pointerId);\n    const p = (lastPtr.current = ptrPos(e));\n\n    if (trackPress === 'jump') {\n      // land the thumb centered at the pointer, then it's an ordinary drag\n      const want = g.travel > 0 ? clamp01((p - g.thumbLen / 2) / g.travel) * g.maxOffset : 0;\n      stage.scrollTo(vertical ? { top: want } : { left: want });\n      beginDrag(g.thumbLen / 2, want);\n      return;\n    }\n\n    // 'page': step toward the pointer, repeat while held, stop at the pointer\n    const dir: 1 | -1 = p < g.thumbPos ? -1 : 1;\n    const step = () => {\n      const live = liveGeometry();\n      const reached =\n        dir === 1\n          ? lastPtr.current <= live.thumbPos + live.thumbLen\n          : lastPtr.current >= live.thumbPos;\n      if (reached) return stopPaging();\n      stage.scrollBy(\n        vertical ? { top: dir * live.client * 0.9 } : { left: dir * live.client * 0.9 },\n      );\n    };\n    step();\n    // native cadence: a beat before the repeat kicks in, then a steady march\n    const timer = window.setTimeout(() => {\n      if (!pageRef.current) return;\n      pageRef.current.timer = window.setInterval(step, 80);\n    }, 350);\n    pageRef.current = { dir, timer };\n  };\n\n  // Pointer capture retargets to the pressed element and bubbles here — one\n  // move/up pair serves thumb drags, jump-drags, and paging alike.\n  const onMove = (e: React.PointerEvent) => {\n    const d = dragRef.current;\n    if (d) {\n      if (d.travel <= 0) return;\n      const want = clamp01((ptrPos(e) - d.grab) / d.travel) * d.max;\n      const delta = want - d.applied;\n      if (delta) {\n        stage.panBy(vertical ? 0 : -delta, vertical ? -delta : 0);\n        d.applied = want;\n      }\n    } else if (pageRef.current) {\n      lastPtr.current = ptrPos(e);\n    }\n  };\n\n  useEffect(() => endDrag, []); // unmount: no orphaned repeat timers\n\n  if (!scrollable) return null;\n\n  const trackDefaults: React.CSSProperties = vertical\n    ? { position: 'absolute', top: 0, right: 0, bottom: 0, width: 12 }\n    : { position: 'absolute', left: 0, right: 0, bottom: 0, height: 12 };\n  const thumbDefaults: React.CSSProperties = vertical\n    ? { position: 'absolute', left: 2, right: 2, top: g.thumbPos, height: g.thumbLen }\n    : { position: 'absolute', top: 2, bottom: 2, left: g.thumbPos, width: g.thumbLen };\n\n  return (\n    <div\n      ref={trackRef}\n      role=\"scrollbar\"\n      aria-orientation={vertical ? 'vertical' : 'horizontal'}\n      aria-valuemin={0}\n      aria-valuemax={Math.round(g.maxOffset)}\n      aria-valuenow={Math.round(g.offset)}\n      data-embedpdf-scrollbar=\"\"\n      data-axis={axis}\n      data-state={shown ? 'visible' : 'hidden'}\n      data-dragging={dragging ? '' : undefined}\n      className={className}\n      style={{\n        ...trackDefaults,\n        touchAction: 'none',\n        userSelect: 'none',\n        opacity: shown ? 1 : 0,\n        transition: 'opacity 200ms',\n        // a hidden overlay bar must not eat the clicks under it\n        pointerEvents: shown ? 'auto' : 'none',\n        ...style,\n      }}\n      onPointerDown={onTrackDown}\n      onPointerMove={onMove}\n      onPointerUp={endDrag}\n      onPointerCancel={endDrag}\n      onPointerEnter={() => setHovered(true)}\n      onPointerLeave={() => setHovered(false)}\n    >\n      <div\n        data-embedpdf-scrollbar-thumb=\"\"\n        className={thumbClassName}\n        style={{\n          ...thumbDefaults,\n          borderRadius: 6,\n          background: 'var(--epdf-scrollbar-thumb, rgba(0, 0, 0, 0.4))',\n          ...thumbStyle,\n        }}\n        onPointerDown={onThumbDown}\n      />\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/search.cjs

@@ -0,0 +1,70 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_rolldown_runtime = require("./rolldown-runtime-DDXJien1.cjs");
+const require_runtime = require("./runtime.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+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" }) {
+	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());
+	if (hits.length === 0) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		style: {
+			position: "absolute",
+			inset: 0,
+			pointerEvents: "none"
+		},
+		children: hits.map((hit) => hit.rects.map((r, i) => {
+			const tl = page.transform.pageToContent({
+				x: r.x,
+				y: r.y
+			});
+			const br = page.transform.pageToContent({
+				x: r.x + r.width,
+				y: r.y + r.height
+			});
+			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: hit === active ? activeColor : color,
+				mixBlendMode: blendMode,
+				borderRadius: 2
+			} }, `${hit.charStart}:${i}`);
+		}))
+	});
+}
+/** The search capability (search/clear/next/prev/…) 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())
+	};
+}
+//#endregion
+exports.SearchLayer = SearchLayer;
+exports.useSearch = useSearch;
+exports.useSearchState = useSearchState;
+Object.keys(_embedpdf_plugin_search).forEach(function(k) {
+	if (k !== "default" && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function() {
+			return _embedpdf_plugin_search[k];
+		}
+	});
+});
+
+//# sourceMappingURL=search.cjs.map

package/dist/search.cjs.map

@@ -0,0 +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.pageToContent. 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.rects.map((r, i) => {\n          const tl = page.transform.pageToContent({ x: r.x, y: r.y });\n          const br = page.transform.pageToContent({ x: r.x + r.width, y: r.y + r.height });\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: hit === active ? activeColor : color,\n                mixBlendMode: blendMode,\n                borderRadius: 2,\n              }}\n            />\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,MAAM,KAAK,GAAG,MAAM;GACtB,MAAM,KAAK,KAAK,UAAU,cAAc;IAAE,GAAG,EAAE;IAAG,GAAG,EAAE;GAAE,CAAC;GAC1D,MAAM,KAAK,KAAK,UAAU,cAAc;IAAE,GAAG,EAAE,IAAI,EAAE;IAAO,GAAG,EAAE,IAAI,EAAE;GAAO,CAAC;GAC/E,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD,EAEE,OAAO;IACL,UAAU;IACV,MAAM,GAAG;IACT,KAAK,GAAG;IACR,OAAO,GAAG,IAAI,GAAG;IACjB,QAAQ,GAAG,IAAI,GAAG;IAClB,YAAY,QAAQ,SAAS,cAAc;IAC3C,cAAc;IACd,cAAc;GAChB,EACD,GAXM,GAAG,IAAI,UAAU,GAAG,GAW1B;EAEL,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"}

package/dist/search.d.cts

@@ -0,0 +1,35 @@
+import { r as SearchQuery } from "./AnnotationListSnapshot-W0RCsyDE-dWna4TTJ.cjs";
+import * as React from "react";
+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.
+   */
+  blendMode?: React.CSSProperties['mixBlendMode'];
+}
+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: SearchQuery | null;
+  status: import("@embedpdf/plugin-search").SearchStatus;
+  hitCount: number;
+  activeIndex: number;
+  progress: {
+    scanned: number;
+    total: number;
+  };
+  error: string | null;
+};
+//#endregion
+export { SearchLayer, SearchLayerProps, useSearch, useSearchState };
+//# sourceMappingURL=search.d.cts.map

package/dist/search.d.ts

@@ -0,0 +1,35 @@
+import { r as SearchQuery } from "./AnnotationListSnapshot-W0RCsyDE-dWna4TTJ.js";
+import * as React from "react";
+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.
+   */
+  blendMode?: React.CSSProperties['mixBlendMode'];
+}
+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: SearchQuery | null;
+  status: import("@embedpdf/plugin-search").SearchStatus;
+  hitCount: number;
+  activeIndex: number;
+  progress: {
+    scanned: number;
+    total: number;
+  };
+  error: string | null;
+};
+//#endregion
+export { SearchLayer, SearchLayerProps, useSearch, useSearchState };
+//# sourceMappingURL=search.d.ts.map

package/dist/search.js

@@ -0,0 +1,58 @@
+import { shallowArray, useCapability, usePage, useSelector } from "./runtime.js";
+import { jsx } from "react/jsx-runtime";
+import "react";
+import { SearchToken } from "@embedpdf/plugin-search";
+export * from "@embedpdf/plugin-search";
+//#region src/search.tsx
+function SearchLayer({ color = "#ffd500", activeColor = "#ff9632", blendMode = "multiply" }) {
+	const page = usePage();
+	const hits = useSelector(SearchToken, (c) => c.hitsForPage(page.pon), shallowArray);
+	const active = useSelector(SearchToken, (c) => c.activeHit());
+	if (hits.length === 0) return null;
+	return /* @__PURE__ */ jsx("div", {
+		style: {
+			position: "absolute",
+			inset: 0,
+			pointerEvents: "none"
+		},
+		children: hits.map((hit) => hit.rects.map((r, i) => {
+			const tl = page.transform.pageToContent({
+				x: r.x,
+				y: r.y
+			});
+			const br = page.transform.pageToContent({
+				x: r.x + r.width,
+				y: r.y + r.height
+			});
+			return /* @__PURE__ */ jsx("div", { style: {
+				position: "absolute",
+				left: tl.x,
+				top: tl.y,
+				width: br.x - tl.x,
+				height: br.y - tl.y,
+				background: hit === active ? activeColor : color,
+				mixBlendMode: blendMode,
+				borderRadius: 2
+			} }, `${hit.charStart}:${i}`);
+		}))
+	});
+}
+/** The search capability (search/clear/next/prev/…) for app chrome. */
+function useSearch() {
+	return useCapability(SearchToken);
+}
+/** Reactive search read-model for chrome: the query, status, counts, progress. */
+function useSearchState() {
+	return {
+		query: useSelector(SearchToken, (c) => c.query()),
+		status: useSelector(SearchToken, (c) => c.status()),
+		hitCount: useSelector(SearchToken, (c) => c.hitCount()),
+		activeIndex: useSelector(SearchToken, (c) => c.activeIndex()),
+		progress: useSelector(SearchToken, (c) => c.progress(), (a, b) => a.scanned === b.scanned && a.total === b.total),
+		error: useSelector(SearchToken, (c) => c.errorMessage())
+	};
+}
+//#endregion
+export { SearchLayer, useSearch, useSearchState };
+
+//# sourceMappingURL=search.js.map

package/dist/search.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"search.js","names":[],"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.pageToContent. 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.rects.map((r, i) => {\n          const tl = page.transform.pageToContent({ x: r.x, y: r.y });\n          const br = page.transform.pageToContent({ x: r.x + r.width, y: r.y + r.height });\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: hit === active ? activeColor : color,\n                mixBlendMode: blendMode,\n                borderRadius: 2,\n              }}\n            />\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,OAAO,QAAQ;CACrB,MAAM,OAAO,YAAY,cAAc,MAAM,EAAE,YAAY,KAAK,GAAG,GAAG,YAAY;CAClF,MAAM,SAAS,YAAY,cAAc,MAAM,EAAE,UAAU,CAAC;CAE5D,IAAI,KAAK,WAAW,GAAG,OAAO;CAE9B,OACE,oBAAC,OAAD;EAAK,OAAO;GAAE,UAAU;GAAY,OAAO;GAAG,eAAe;EAAO;EACjE,UAAA,KAAK,KAAK,QACT,IAAI,MAAM,KAAK,GAAG,MAAM;GACtB,MAAM,KAAK,KAAK,UAAU,cAAc;IAAE,GAAG,EAAE;IAAG,GAAG,EAAE;GAAE,CAAC;GAC1D,MAAM,KAAK,KAAK,UAAU,cAAc;IAAE,GAAG,EAAE,IAAI,EAAE;IAAO,GAAG,EAAE,IAAI,EAAE;GAAO,CAAC;GAC/E,OACE,oBAAC,OAAD,EAEE,OAAO;IACL,UAAU;IACV,MAAM,GAAG;IACT,KAAK,GAAG;IACR,OAAO,GAAG,IAAI,GAAG;IACjB,QAAQ,GAAG,IAAI,GAAG;IAClB,YAAY,QAAQ,SAAS,cAAc;IAC3C,cAAc;IACd,cAAc;GAChB,EACD,GAXM,GAAG,IAAI,UAAU,GAAG,GAW1B;EAEL,CAAC,CACH;CACG,CAAA;AAET;;AAGA,SAAgB,YAAY;CAC1B,OAAO,cAAc,WAAW;AAClC;;AAGA,SAAgB,iBAAiB;CAW/B,OAAO;EAAE,OAVK,YAAY,cAAc,MAAM,EAAE,MAAM,CAUzC;EAAG,QATD,YAAY,cAAc,MAAM,EAAE,OAAO,CASnC;EAAG,UARP,YAAY,cAAc,MAAM,EAAE,SAAS,CAQ7B;EAAG,aAPd,YAAY,cAAc,MAAM,EAAE,YAAY,CAOtB;EAAG,UAN9B,YACf,cACC,MAAM,EAAE,SAAS,IACjB,GAAG,MAAM,EAAE,YAAY,EAAE,WAAW,EAAE,UAAU,EAAE,KAGC;EAAG,OAD3C,YAAY,cAAc,MAAM,EAAE,aAAa,CACA;CAAE;AACjE"}

package/dist/selection.cjs

@@ -0,0 +1,60 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_rolldown_runtime = require("./rolldown-runtime-DDXJien1.cjs");
+const require_runtime = require("./runtime.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react, 1);
+let _embedpdf_plugin_selection = require("@embedpdf/plugin-selection");
+//#region src/selection.tsx
+function SelectionLayer({ color = "rgba(33, 150, 243, 0.35)" }) {
+	const page = require_runtime.usePage();
+	const selection = require_runtime.useCapability(_embedpdf_plugin_selection.SelectionToken);
+	const rects = require_runtime.useSelector(_embedpdf_plugin_selection.SelectionToken, (c) => c.rectsForPage(page.pon), require_runtime.shallowArray);
+	const visible = require_runtime.useSelector(_embedpdf_plugin_selection.SelectionToken, (c) => c.highlightVisible());
+	(0, react.useEffect)(() => {
+		selection.ensurePage(page.pon);
+	}, [selection, page.pon]);
+	if (!visible) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		style: {
+			position: "absolute",
+			inset: 0,
+			pointerEvents: "none"
+		},
+		children: rects.map((r, i) => {
+			const tl = page.transform.pageToContent({
+				x: r.x,
+				y: r.y
+			});
+			const br = page.transform.pageToContent({
+				x: r.x + r.width,
+				y: r.y + r.height
+			});
+			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: color
+			} }, i);
+		})
+	});
+}
+/** The selection capability (clear(), hasSelection(), …) for app chrome. */
+function useSelection() {
+	return require_runtime.useCapability(_embedpdf_plugin_selection.SelectionToken);
+}
+//#endregion
+exports.SelectionLayer = SelectionLayer;
+exports.useSelection = useSelection;
+Object.keys(_embedpdf_plugin_selection).forEach(function(k) {
+	if (k !== "default" && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function() {
+			return _embedpdf_plugin_selection[k];
+		}
+	});
+});
+
+//# sourceMappingURL=selection.cjs.map

package/dist/selection.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"selection.cjs","names":["usePage","useCapability","SelectionToken","useSelector","shallowArray"],"sources":["../src/selection.tsx"],"sourcesContent":["/**\n * The React surface for @embedpdf/plugin-selection.\n *\n * <SelectionLayer> is a dumb renderer: it warms the page's geometry on mount,\n * reads the content-space highlight rects from the capability, and paints them —\n * mapping each rect through PageContext.pageToContent (the same path markers use).\n * Zero pointer handling here; that's the PagePointerSource + the hub.\n */\n\n// One-line-per-feature: registration travels with the UI.\nexport * from '@embedpdf/plugin-selection';\nimport * as React from 'react';\nimport { useEffect } from 'react';\nimport { SelectionToken } from '@embedpdf/plugin-selection';\nimport { shallowArray, useCapability, usePage, useSelector } from './runtime';\n\nexport interface SelectionLayerProps {\n  /** Highlight colour (default: translucent blue). */\n  color?: string;\n}\n\nexport function SelectionLayer({ color = 'rgba(33, 150, 243, 0.35)' }: SelectionLayerProps) {\n  const page = usePage();\n  const selection = useCapability(SelectionToken);\n  const rects = useSelector(SelectionToken, (c) => c.rectsForPage(page.pon), shallowArray);\n  // A consumer (e.g. a markup tool drawing its own preview) can take over the\n  // selection visual; when it does, we render nothing so the two never overlap.\n  const visible = useSelector(SelectionToken, (c) => c.highlightVisible());\n\n  // Warm this page's text geometry as soon as it's on screen, so the first\n  // pointer-down can hit-test without waiting on the engine round-trip.\n  useEffect(() => {\n    selection.ensurePage(page.pon);\n  }, [selection, page.pon]);\n\n  if (!visible) return null;\n\n  return (\n    <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none' }}>\n      {rects.map((r, i) => {\n        // content space → un-rotated content view px (rides the page's CSS rotation)\n        const tl = page.transform.pageToContent({ x: r.x, y: r.y });\n        const br = page.transform.pageToContent({ x: r.x + r.width, y: r.y + r.height });\n        return (\n          <div\n            key={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: color,\n            }}\n          />\n        );\n      })}\n    </div>\n  );\n}\n\n/** The selection capability (clear(), hasSelection(), …) for app chrome. */\nexport function useSelection() {\n  return useCapability(SelectionToken);\n}\n"],"mappings":";;;;;;;;AAqBA,SAAgB,eAAe,EAAE,QAAQ,8BAAmD;CAC1F,MAAM,OAAOA,gBAAAA,QAAQ;CACrB,MAAM,YAAYC,gBAAAA,cAAcC,2BAAAA,cAAc;CAC9C,MAAM,QAAQC,gBAAAA,YAAYD,2BAAAA,iBAAiB,MAAM,EAAE,aAAa,KAAK,GAAG,GAAGE,gBAAAA,YAAY;CAGvF,MAAM,UAAUD,gBAAAA,YAAYD,2BAAAA,iBAAiB,MAAM,EAAE,iBAAiB,CAAC;CAIvE,CAAA,GAAA,MAAA,UAAA,OAAgB;EACd,UAAU,WAAW,KAAK,GAAG;CAC/B,GAAG,CAAC,WAAW,KAAK,GAAG,CAAC;CAExB,IAAI,CAAC,SAAS,OAAO;CAErB,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EAAK,OAAO;GAAE,UAAU;GAAY,OAAO;GAAG,eAAe;EAAO;EACjE,UAAA,MAAM,KAAK,GAAG,MAAM;GAEnB,MAAM,KAAK,KAAK,UAAU,cAAc;IAAE,GAAG,EAAE;IAAG,GAAG,EAAE;GAAE,CAAC;GAC1D,MAAM,KAAK,KAAK,UAAU,cAAc;IAAE,GAAG,EAAE,IAAI,EAAE;IAAO,GAAG,EAAE,IAAI,EAAE;GAAO,CAAC;GAC/E,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD,EAEE,OAAO;IACL,UAAU;IACV,MAAM,GAAG;IACT,KAAK,GAAG;IACR,OAAO,GAAG,IAAI,GAAG;IACjB,QAAQ,GAAG,IAAI,GAAG;IAClB,YAAY;GACd,EACD,GATM,CASN;EAEL,CAAC;CACE,CAAA;AAET;;AAGA,SAAgB,eAAe;CAC7B,OAAOD,gBAAAA,cAAcC,2BAAAA,cAAc;AACrC"}

package/dist/selection.d.cts

@@ -0,0 +1,12 @@
+export * from "@embedpdf/plugin-selection";
+//#region src/selection.d.ts
+interface SelectionLayerProps {
+  /** Highlight colour (default: translucent blue). */
+  color?: string;
+}
+declare function SelectionLayer({ color }: SelectionLayerProps): import("react/jsx-runtime").JSX.Element | null;
+/** The selection capability (clear(), hasSelection(), …) for app chrome. */
+declare function useSelection(): import("@embedpdf/plugin-selection").SelectionCapability;
+//#endregion
+export { SelectionLayer, SelectionLayerProps, useSelection };
+//# sourceMappingURL=selection.d.cts.map

package/dist/selection.d.ts

@@ -0,0 +1,12 @@
+export * from "@embedpdf/plugin-selection";
+//#region src/selection.d.ts
+interface SelectionLayerProps {
+  /** Highlight colour (default: translucent blue). */
+  color?: string;
+}
+declare function SelectionLayer({ color }: SelectionLayerProps): import("react/jsx-runtime").JSX.Element | null;
+/** The selection capability (clear(), hasSelection(), …) for app chrome. */
+declare function useSelection(): import("@embedpdf/plugin-selection").SelectionCapability;
+//#endregion
+export { SelectionLayer, SelectionLayerProps, useSelection };
+//# sourceMappingURL=selection.d.ts.map