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

package/dist/search.d.ts

@@ -1,34 +1,47 @@
-import * as React from "react";
+import { n as StateHook, t as SettingsHook } from "./state-0K1I5cM4.js";
+import { o as SearchQuery } from "./AnnotationList-CkijRHet-HEFNUIZe.js";
+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.ts.map

package/dist/search.js

@@ -1,75 +1,103 @@
-import { shallowArray, useCapability, usePage, useSelector } from "./runtime.js";
+import { f as useCapability, g as useDocumentScope, p as useCapabilityEvent, w as usePage, x as useKernelValue } from "./runtime-B6xcPsEb.js";
+import { n as stateHook, t as settingsHook } from "./state-CbgxhwLA.js";
 import { jsx } from "react/jsx-runtime";
-import "react";
-import { SearchToken } from "@embedpdf/plugin-search";
+import { createClickDetector, paint, searchHighlightsOf } from "@embedpdf/web";
+import { useState } from "react";
+import { SearchToken, searchState } from "@embedpdf/plugin-search";
 export * from "@embedpdf/plugin-search";
 //#region src/search.tsx
-function SearchLayer({ color = "#ffd500", activeColor = "#ff9632", blendMode = "multiply" }) {
+function SearchLayer({ onHitClick }) {
 	const page = usePage();
-	const hits = useSelector(SearchToken, (c) => c.hitsForPage(page.pon), shallowArray);
-	const active = useSelector(SearchToken, (c) => c.activeHit());
+	const hits = useSearchHits(page.ref);
+	const active = useSearchState((state) => state.activeHit);
+	const highlight = useSearchSettings((settings) => settings.highlight);
+	const [clicks] = useState(createClickDetector);
 	if (hits.length === 0) return null;
+	const color = paint("search-highlight", highlight.color);
+	const activeColor = paint("search-highlight-active", highlight.activeColor);
+	const blendMode = 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__ */ 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__ */ 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: searchHighlightsOf(hits, {
+			active,
+			page: page.transform,
+			color,
+			activeColor
+		}).map((piece) => piece.box ? /* @__PURE__ */ 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__ */ jsx("svg", {
+		}, piece.key) : /* @__PURE__ */ jsx("svg", {
+			style: {
+				position: "absolute",
+				inset: 0,
+				width: "100%",
+				height: "100%",
+				overflow: "visible",
+				mixBlendMode: blendMode
+			},
+			children: /* @__PURE__ */ 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__ */ 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 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())
-	};
+/** Subscribe to one search event for the mounted lifetime: `useSearchEvent((search) => search.onCompleted, handler)`. */
+function useSearchEvent(select, handler) {
+	useCapabilityEvent(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 = stateHook(searchState);
+/** The search settings (`reveal`, `highlight`), with or without a document. Takes a selector. */
+const useSearchSettings = settingsHook(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 = useDocumentScope();
+	return useKernelValue((kernel) => kernel.tryCapability(SearchToken, scoped ?? void 0)?.listHits(page === void 0 ? void 0 : { page }) ?? NO_HITS);
 }
 //#endregion
-export { SearchLayer, useSearch, useSearchState };
+export { SearchLayer, useSearch, useSearchEvent, useSearchHits, useSearchSettings, useSearchState };
 
 //# sourceMappingURL=search.js.map

package/dist/search.js.map

@@ -1 +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.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,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,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,oBAAC,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,oBAAC,OAAD;IAEE,OAAO;KACL,UAAU;KACV,OAAO;KACP,OAAO;KACP,QAAQ;KACR,UAAU;KACV,cAAc;IAChB;IAEA,UAAA,oBAAC,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,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"}
+{"version":3,"file":"search.js","names":[],"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,OAAO,QAAQ;CAGrB,MAAM,OAAO,cAAc,KAAK,GAAG;CACnC,MAAM,SAAS,gBAAgB,UAAU,MAAM,SAAS;CACxD,MAAM,YAAY,mBAAmB,aAAa,SAAS,SAAS;CAEpE,MAAM,CAAC,UAAU,SAAS,mBAAmB;CAE7C,IAAI,KAAK,WAAW,GAAG,OAAO;CAG9B,MAAM,QAAQ,MAAM,oBAAoB,UAAU,KAAK;CACvD,MAAM,cAAc,MAAM,2BAA2B,UAAU,WAAW;CAC1E,MAAM,YAAY,MAChB,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,oBAAC,OAAD;EAAK,OAAO;GAAE,UAAU;GAAY,OAAO;GAAG,eAAe;EAAO;EARvD,UAAA,mBAAmB,MAAM;GACtC;GACA,MAAM,KAAK;GACX;GACA;EACF,CAIU,CAAC,CAAC,KAAK,UACX,MAAM,MACJ,oBAAC,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,oBAAC,OAAD;GAEE,OAAO;IACL,UAAU;IACV,OAAO;IACP,OAAO;IACP,QAAQ;IACR,UAAU;IACV,cAAc;GAChB;GAGA,UAAA,oBAAC,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,OAAO,cAAc,WAAW;AAClC;;AAGA,SAAgB,eACd,QACA,SACM;CACN,mBAAmB,aAAa,QAAQ,OAAO;AACjD;;;;;;AAOA,MAAa,iBAAiB,UAAU,WAAW;;AAGnD,MAAa,oBAAoB,aAAa,WAAW;AAEzD,MAAM,UAAgC,OAAO,OAAO,CAAC,CAAC;;;;;;;AAQtD,SAAgB,cAAc,MAA+C;CAC3E,MAAM,SAAS,iBAAiB;CAEhC,OAAO,gBACJ,WACC,OACG,cAAc,aAAa,UAAU,KAAA,CAAS,CAAC,EAC9C,SAAS,SAAS,KAAA,IAAY,KAAA,IAAY,EAAE,KAAK,CAAC,KAAK,OAC/D;AACF"}

package/dist/selection.cjs

@@ -1,25 +1,32 @@
 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");
 const require_anchored = require("./anchored.cjs");
+const require_stage_scope = require("./stage-scope-CQgCuf1w.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_web = require("@embedpdf/web");
-let _embedpdf_plugin_stage_contract = require("@embedpdf/plugin-stage/contract");
-let _embedpdf_core_geometry = require("@embedpdf/core-geometry");
 let _embedpdf_plugin_selection = require("@embedpdf/plugin-selection");
-let _embedpdf_plugin_selection_internal = require("@embedpdf/plugin-selection/internal");
+let _embedpdf_plugin_selection_contract_host = require("@embedpdf/plugin-selection/contract/host");
 //#region src/selection.tsx
-function SelectionLayer({ color = "rgba(33, 150, 243, 0.35)" }) {
+/**
+* The highlight of the selected text on one page, in the selection plugin's
+* `color` setting; the `--epdf-text-selection` CSS variable wins over it.
+*/
+function SelectionLayer() {
 	const page = require_runtime.usePage();
-	const selection = require_runtime.useCapability(_embedpdf_plugin_selection_internal.SelectionToken);
-	const segments = require_runtime.useSelector(_embedpdf_plugin_selection_internal.SelectionToken, (c) => c.segmentsForPage(page.pon), require_runtime.shallowArray);
-	const visible = require_runtime.useSelector(_embedpdf_plugin_selection_internal.SelectionToken, (c) => c.highlightVisible());
+	const selection = require_runtime.useCapability(_embedpdf_plugin_selection_contract_host.SelectionToken);
+	const segments = require_runtime.useSelector(_embedpdf_plugin_selection_contract_host.SelectionToken, (selection) => selection.listSegments(page.ref), require_runtime.shallowArray);
+	const visible = require_runtime.useSelector(_embedpdf_plugin_selection_contract_host.SelectionToken, (selection) => selection.isHighlightVisible());
+	const color = useSelectionSettings((settings) => settings.color);
+	const accent = require_runtime.useViewerSettings((settings) => settings.accent);
 	(0, react.useEffect)(() => {
-		selection.ensurePage(page.pon);
-	}, [selection, page.pon]);
+		selection.ensureLoaded(page.ref);
+	}, [selection, page.ref]);
 	if (!visible) return null;
+	const fill = (0, _embedpdf_web.paint)("text-selection", color ?? (0, _embedpdf_web.mixAccent)("text-selection", accent));
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
 		style: {
 			position: "absolute",
@@ -29,47 +36,45 @@ function SelectionLayer({ color = "rgba(33, 150, 243, 0.35)" }) {
 			overflow: "visible",
 			pointerEvents: "none"
 		},
-		children: segments.map((s, i) => {
-			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("polygon", {
-				points: [
-					s.quad.upperStart,
-					s.quad.upperEnd,
-					s.quad.lowerEnd,
-					s.quad.lowerStart
-				].map((p) => page.transform.toPixels(p)).map((p) => `${p.x},${p.y}`).join(" "),
-				fill: color
-			}, i);
-		})
+		children: segments.map((segment, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("polygon", {
+			points: (0, _embedpdf_web.svgPoints)((0, _embedpdf_web.quadInPixels)(segment.quad, page.transform)),
+			style: { fill }
+		}, i))
 	});
 }
-/** The PUBLIC selection capability (select(), readText(), canCopy(), …) for
+/** The public selection capability (select(), readText(), canCopy(), …) for
 *  app chrome — toolbars, context menus, automation. */
 function useSelection() {
 	return require_runtime.useCapability(_embedpdf_plugin_selection.SelectionToken);
 }
-/** Structural equality for the selection's menu anchor — keeps the menu from
-*  re-rendering on unrelated dispatches (the capability returns a fresh
-*  object each call). */
-const sameMenuAnchor = (a, b) => {
-	if (a === b) return true;
-	if (!a || !b) return false;
-	return a.pon === b.pon && a.bounds.x === b.bounds.x && a.bounds.y === b.bounds.y && a.bounds.width === b.bounds.width && a.bounds.height === b.bounds.height;
-};
+/** Subscribe to one selection event for the mounted lifetime: `useSelectionEvent((selection) => selection.onCommitted, handler)`. */
+function useSelectionEvent(select, handler) {
+	require_runtime.useCapabilityEvent(_embedpdf_plugin_selection.SelectionToken, select, handler);
+}
+/**
+* The selection's state: whether anything is selected, whether the user is
+* still selecting, the character range and the pages it's on (the page's State
+* table, declared once in `selectionState`). Takes a selector, re-renders only
+* when what it returns changes, and returns the empty state without a document.
+*/
+const useSelectionState = require_state.stateHook(_embedpdf_plugin_selection.selectionState);
+/** The selection settings (`dragThreshold`, `color`, `handles`), with or without a document. Takes a selector. */
+const useSelectionSettings = require_state.settingsHook(_embedpdf_plugin_selection.SelectionToken);
 /**
-* Floats over the current TEXT selection (one anchor regardless of
+* Floats over the current text selection (one anchor regardless of
 * cross-page selection; it rides the gesture's end page) — and only once the
-* selection SETTLES: hidden while `isSelecting()` (mid-drag), it appears at
+* selection settles: hidden while a gesture is active (mid-drag), it appears at
 * pointer-up; programmatic selections show immediately (born settled). Works
 * under `<Stage>` (mount in the overlay slot) and `<PageView>` alike — the
 * surface provides the projection. Compose the contents from hooks:
 * `useSelection()` for copy/clear, `useAnnotation()` for
 * `markupFromSelection('highlight')`, `copySelection` for the clipboard.
 * For live-follow UI during the drag, compose `<Anchored>` with
-* `menuAnchor()` yourself — the primitive carries no policy.
+* `getAnchor()` yourself — the primitive carries no policy.
 */
 function SelectionMenu({ children, gap = 8, placement = "top" }) {
-	const selecting = require_runtime.useSelector(_embedpdf_plugin_selection.SelectionToken, (c) => c.isSelecting());
-	const anchor = require_runtime.useSelector(_embedpdf_plugin_selection.SelectionToken, (c) => c.menuAnchor(), sameMenuAnchor);
+	const selecting = useSelectionState((state) => state.isSelecting);
+	const anchor = require_runtime.useSelector(_embedpdf_plugin_selection.SelectionToken, (selection) => selection.getAnchor(), _embedpdf_web.samePageBounds);
 	if (selecting || !anchor) return null;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_anchored.Anchored, {
 		anchor,
@@ -78,60 +83,37 @@ function SelectionMenu({ children, gap = 8, placement = "top" }) {
 		children
 	});
 }
-const sameEndpoints = (a, b) => {
-	if (a === b) return true;
-	if (!a || !b) return false;
-	return a.start.pon === b.start.pon && a.end.pon === b.end.pon && a.start.advance === b.start.advance && a.end.advance === b.end.advance && (0, _embedpdf_core_geometry.textQuadEquals)(a.start.glyphQuad, b.start.glyphQuad) && (0, _embedpdf_core_geometry.textQuadEquals)(a.end.glyphQuad, b.end.glyphQuad);
-};
-/** The plugin's structural view over this Stage: point-exact projection in,
-*  page resolution out. (`pageRectToScreen` is the AABB projector — upright
-*  overlays only — and would collapse exactly the orientation handles need.) */
-const handleView = (stage) => ({
-	toOverlay: (pon, pt) => {
-		const world = stage.pageToWorld(pon, pt);
-		return world ? stage.toScreen(world) : null;
-	},
-	pageAt: (overlay) => stage.pageAt(overlay),
-	pointOnPage: (pon, overlay) => stage.pointOnPage(pon, overlay)
-});
 /**
 * iOS-style draggable selection handles. Each is drawn the way the platform
-* draws them: a thin caret BAR that forms the selection's own start/end edge
+* draws them: a thin caret bar that forms the selection's own start/end edge
 * — the boundary glyph's oriented edge, so rotated text and rotated pages
 * carry the handle with them — capped by a screen-constant circle, above the
 * first line at the start, below the last line at the end.
 *
-* On touch, where a caret drag isn't available, the handles ARE the way to
+* On touch, where a caret drag isn't available, the handles are the way to
 * grow or shrink a selection: a long-press selects a word, then each handle
-* extends from the OPPOSITE endpoint, snapping to glyphs and crossing pages
-* exactly like a pointer drag — it rides the same `beginAt`/`extendTo`
+* extends from the opposite endpoint, snapping to glyphs and crossing pages
+* exactly like a pointer drag — it rides the same `beginGestureAt`/`extendTo`
 * gesture path, so highlights, menus, and commit signals all behave
 * identically. Mount in the `<Stage>` overlay slot next to `<SelectionMenu>`;
 * outside a Stage it renders nothing (a `PageView` has no camera to project
 * through). Pointer-isolated, so grabbing a handle never pans the stage.
+* Painted in the plugin's `handles` setting, which the
+* `--epdf-text-selection-handle` and `--epdf-text-selection-handle-shadow` CSS
+* variables override.
 */
-function SelectionHandles({ color = "#2196f3", token = _embedpdf_plugin_stage_contract.StageToken }) {
-	const host = require_runtime.useCapability(_embedpdf_plugin_selection_internal.SelectionToken);
+function SelectionHandles({ token: explicitToken } = {}) {
+	const token = require_stage_scope.useStageToken(explicitToken);
+	const host = require_runtime.useCapability(_embedpdf_plugin_selection_contract_host.SelectionToken);
 	const stage = require_runtime.useOptionalCapability(token);
-	const selecting = require_runtime.useSelector(_embedpdf_plugin_selection.SelectionToken, (c) => c.isSelecting());
-	const visible = require_runtime.useSelector(_embedpdf_plugin_selection_internal.SelectionToken, (c) => c.highlightVisible());
-	const endpoints = require_runtime.useSelector(_embedpdf_plugin_selection_internal.SelectionToken, (c) => {
-		const s = c.snapshot();
-		if (!s.start || !s.end) return null;
-		return {
-			start: {
-				pon: s.start.pon,
-				glyphQuad: s.start.glyphQuad,
-				advance: s.start.advance
-			},
-			end: {
-				pon: s.end.pon,
-				glyphQuad: s.end.glyphQuad,
-				advance: s.end.advance
-			}
-		};
-	}, sameEndpoints);
-	require_runtime.useKernelValue(() => stage?.visiblePages() ?? null);
+	const surface = require_anchored.useOptionalProjectorBinding();
+	if (!surface || surface.projector.space !== "overlay") require_runtime.devWarn("selection-handles-outside-stage", "<SelectionHandles> renders nothing here: mount it in the <Stage> overlay slot (a <PageView> has no camera to project the handles through).");
+	const selecting = useSelectionState((state) => state.isSelecting);
+	const visible = require_runtime.useSelector(_embedpdf_plugin_selection_contract_host.SelectionToken, (selection) => selection.isHighlightVisible());
+	const handles = useSelectionSettings((settings) => settings.handles);
+	const accent = require_runtime.useViewerSettings((settings) => settings.accent);
+	const endpoints = require_runtime.useSelector(_embedpdf_plugin_selection_contract_host.SelectionToken, (selection) => (0, _embedpdf_plugin_selection.selectionHandleEndpointsOf)(selection.getSnapshot()), _embedpdf_web.sameSelectionEndpoints);
+	require_runtime.useKernelValue(() => stage?.listVisiblePages() ?? null);
 	const [dragging, setDragging] = (0, react.useState)(null);
 	const armSource = (0, react.useRef)(null);
 	armSource.current = stage && endpoints ? {
@@ -140,28 +122,22 @@ function SelectionHandles({ color = "#2196f3", token = _embedpdf_plugin_stage_co
 	} : null;
 	const bindHandle = (0, react.useMemo)(() => {
 		const detach = {};
-		const make = (role) => (el) => {
+		const make = (role) => (element) => {
 			detach[role]?.();
 			delete detach[role];
-			if (!el) return;
-			detach[role] = (0, _embedpdf_web.attachSelectionHandle)(el, { arm: () => {
+			if (!element) return;
+			detach[role] = (0, _embedpdf_web.attachSelectionHandle)(element, { arm: () => {
 				const src = armSource.current;
 				if (!src) return null;
-				const view = handleView(src.stage);
-				const geom = (0, _embedpdf_plugin_selection.selectionHandleGeom)(view, src.endpoints[role], role);
-				if (!geom) return null;
-				const opposite = src.endpoints[role === "start" ? "end" : "start"];
-				const drag = (0, _embedpdf_plugin_selection.createSelectionHandleDrag)(host, view, opposite, src.endpoints[role].pon);
+				const armed = (0, _embedpdf_plugin_selection.armSelectionHandle)(host, (0, _embedpdf_plugin_selection.selectionHandleViewOf)(src.stage), src.endpoints, role);
+				if (!armed) return null;
 				setDragging(role);
 				return {
-					base: {
-						x: (geom.bar.from.x + geom.bar.to.x) / 2,
-						y: (geom.bar.from.y + geom.bar.to.y) / 2
-					},
+					base: armed.base,
 					session: {
-						move: drag.move,
+						move: armed.drag.move,
 						end: () => {
-							drag.end();
+							armed.drag.end();
 							setDragging(null);
 						}
 					}
@@ -175,22 +151,24 @@ function SelectionHandles({ color = "#2196f3", token = _embedpdf_plugin_stage_co
 	}, [host]);
 	if (!stage || !endpoints || !visible) return null;
 	if (selecting && !dragging) return null;
-	const view = handleView(stage);
+	const view = (0, _embedpdf_plugin_selection.selectionHandleViewOf)(stage);
+	const color = (0, _embedpdf_web.paint)("text-selection-handle", handles.color ?? accent);
+	const shadow = (0, _embedpdf_web.paint)("text-selection-handle-shadow", handles.shadow);
 	const renderHandle = (role) => {
-		const geom = (0, _embedpdf_plugin_selection.selectionHandleGeom)(view, endpoints[role], role);
-		if (!geom) return null;
+		const geometry = (0, _embedpdf_plugin_selection.selectionHandleGeom)(view, endpoints[role], role);
+		if (!geometry) return null;
 		const barTop = _embedpdf_plugin_selection.HANDLE_PAD + (role === "start" ? _embedpdf_plugin_selection.HANDLE_HEAD : 0);
 		const pivotX = _embedpdf_plugin_selection.HANDLE_PAD + _embedpdf_plugin_selection.HANDLE_BAR / 2;
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			ref: bindHandle[role],
 			style: {
 				position: "absolute",
-				left: geom.bar.from.x - pivotX,
-				top: geom.bar.from.y - barTop,
+				left: geometry.bar.from.x - pivotX,
+				top: geometry.bar.from.y - barTop,
 				width: _embedpdf_plugin_selection.HANDLE_BAR + 2 * _embedpdf_plugin_selection.HANDLE_PAD,
-				height: geom.length + _embedpdf_plugin_selection.HANDLE_HEAD + 2 * _embedpdf_plugin_selection.HANDLE_PAD,
-				...geom.upright ? null : {
-					transform: `rotate(${geom.rotation}deg)`,
+				height: geometry.length + _embedpdf_plugin_selection.HANDLE_HEAD + 2 * _embedpdf_plugin_selection.HANDLE_PAD,
+				...geometry.upright ? null : {
+					transform: `rotate(${geometry.rotation}deg)`,
 					transformOrigin: `${pivotX}px ${barTop}px`
 				},
 				touchAction: "none",
@@ -202,33 +180,49 @@ function SelectionHandles({ color = "#2196f3", token = _embedpdf_plugin_stage_co
 				left: _embedpdf_plugin_selection.HANDLE_PAD,
 				top: barTop,
 				width: _embedpdf_plugin_selection.HANDLE_BAR,
-				height: geom.length,
+				height: geometry.length,
 				background: color,
 				borderRadius: _embedpdf_plugin_selection.HANDLE_BAR / 2
 			} }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { style: {
 				position: "absolute",
 				left: pivotX - _embedpdf_plugin_selection.HANDLE_HEAD / 2,
-				top: role === "start" ? _embedpdf_plugin_selection.HANDLE_PAD : _embedpdf_plugin_selection.HANDLE_PAD + geom.length,
+				top: role === "start" ? _embedpdf_plugin_selection.HANDLE_PAD : _embedpdf_plugin_selection.HANDLE_PAD + geometry.length,
 				width: _embedpdf_plugin_selection.HANDLE_HEAD,
 				height: _embedpdf_plugin_selection.HANDLE_HEAD,
 				borderRadius: "50%",
 				background: color,
-				boxShadow: "0 1px 4px rgba(0, 0, 0, 0.35)"
+				boxShadow: shadow
 			} })]
 		}, role);
 	};
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [renderHandle("start"), renderHandle("end")] });
 }
 /**
-* Mount ONCE per viewer to wire clipboard copy: prefetches the selected text
+* Mount once per viewer to wire clipboard copy: prefetches the selected text
 * when the selection settles, answers the native `copy` event synchronously,
 * and falls back to the async Clipboard API for ctrl/cmd+C when the page has
-* no DOM selection. Renders nothing. For a toolbar Copy button, call
-* `copySelection(useSelection())` from its click handler instead.
+* no DOM selection. A selection the user may not copy isn't copied, and
+* `onRefused` is called. Renders nothing, and wires nothing until a document
+* is ready. For a toolbar Copy button, call `copySelection(useSelection())`
+* from its click handler instead.
 */
-function SelectionClipboard({ prefetch } = {}) {
-	const selection = require_runtime.useCapability(_embedpdf_plugin_selection.SelectionToken);
-	(0, react.useEffect)(() => (0, _embedpdf_web.wireSelectionClipboard)(selection, prefetch === void 0 ? {} : { prefetch }), [selection, prefetch]);
+function SelectionClipboard({ prefetch, onRefused, target } = {}) {
+	const selection = require_runtime.useOptionalCapability(_embedpdf_plugin_selection.SelectionToken);
+	const refused = (0, react.useRef)(onRefused);
+	refused.current = onRefused;
+	(0, react.useEffect)(() => {
+		const element = target ? target.current : void 0;
+		if (!selection || element === null) return;
+		return (0, _embedpdf_web.wireSelectionClipboard)(selection, {
+			...prefetch === void 0 ? {} : { prefetch },
+			...element ? { target: element } : {},
+			onRefused: () => refused.current?.()
+		});
+	}, [
+		selection,
+		prefetch,
+		target
+	]);
 	return null;
 }
 //#endregion
@@ -243,6 +237,9 @@ Object.defineProperty(exports, "copySelection", {
 	}
 });
 exports.useSelection = useSelection;
+exports.useSelectionEvent = useSelectionEvent;
+exports.useSelectionSettings = useSelectionSettings;
+exports.useSelectionState = useSelectionState;
 Object.keys(_embedpdf_plugin_selection).forEach(function(k) {
 	if (k !== "default" && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
 		enumerable: true,