@embedpdf/react 3.0.0-next.3 → 3.0.0-next.4

package/dist/form.js

@@ -1,5 +1,5 @@
 import { shallowArray, useCapability, useOptionalCapability, usePage, useSelector } from "./runtime.js";
-import { l as useAnnotationSelected } from "./annotation-DjGWJljY.js";
+import { l as useAnnotationSelected } from "./annotation-BTlcOjcK.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from "react";
 import { StageToken } from "@embedpdf/plugin-stage";

package/dist/index.cjs

@@ -7,7 +7,7 @@ const require_scrollbar = require("./scrollbar.cjs");
 const require_page_view = require("./page-view.cjs");
 const require_render = require("./render.cjs");
 const require_selection = require("./selection.cjs");
-const require_annotation = require("./annotation-Ct6dFtzJ.cjs");
+const require_annotation = require("./annotation-DVwYpWyP.cjs");
 const require_annotation_menu = require("./annotation-menu.cjs");
 const require_link = require("./link.cjs");
 const require_views = require("./views.cjs");

package/dist/index.d.cts

@@ -1,5 +1,5 @@
 import { S as useSelector, _ as useKernel, a as EmbedPDF, b as useOptionalSelector, c as Viewer, d as shallowArray, f as useActiveDocumentId, g as useDocuments, h as useDocumentStatus, i as DocumentScopeProps, l as ViewerProps, m as useDocumentId, n as DocumentGateProps, o as PageContextValue, p as useCapability, r as DocumentScope, s as PageProvider, t as DocumentGate, u as makePageContext, v as useKernelValue, x as usePage, y as useOptionalCapability } from "./runtime-CMxIuF2O.cjs";
-import { A as useAnnotation, C as SelectionProps, D as filePickerProvider, E as TextStyle, F as useSelectionFlags, I as useSelectionProps, L as AnnotationMenuPlacement, M as useAnnotationSelected, N as useAnnotationSelection, O as sameAnchor, P as useFilePickerProvider, S as SelectionFlags, T as TextAlign, _ as PageAnnotationMenu, a as AnnotationLayerProps, b as RenderItem, c as AnnotationProps, d as AnnotationRendererProps, f as Border, g as PageAnnotationDraftMenu, h as LineEndings, i as AnnotationLayer, j as useAnnotationDefaults, k as sameCreationDraftAnchor, l as AnnotationPropsPatch, m as LineEnding, n as AnnotationDraftMenuRenderArgs, o as AnnotationMenuProps, p as Geom, r as AnnotationFlags, s as AnnotationMenuRenderArgs, t as AnnotationDraftMenuProps, u as AnnotationRenderer, v as PropKey, w as Style, x as SelectionAnchor, y as PropSpec } from "./annotation-B6jwfTCh.cjs";
+import { A as useAnnotation, C as SelectionProps, D as filePickerProvider, E as TextStyle, F as useSelectionFlags, I as useSelectionProps, L as AnnotationMenuPlacement, M as useAnnotationSelected, N as useAnnotationSelection, O as sameAnchor, P as useFilePickerProvider, S as SelectionFlags, T as TextAlign, _ as PageAnnotationMenu, a as AnnotationLayerProps, b as RenderItem, c as AnnotationProps, d as AnnotationRendererProps, f as Border, g as PageAnnotationDraftMenu, h as LineEndings, i as AnnotationLayer, j as useAnnotationDefaults, k as sameCreationDraftAnchor, l as AnnotationPropsPatch, m as LineEnding, n as AnnotationDraftMenuRenderArgs, o as AnnotationMenuProps, p as Geom, r as AnnotationFlags, s as AnnotationMenuRenderArgs, t as AnnotationDraftMenuProps, u as AnnotationRenderer, v as PropKey, w as Style, x as SelectionAnchor, y as PropSpec } from "./annotation-BvNPtcxN.cjs";
 import { AnnotationDraftMenu, AnnotationMenu } from "./annotation-menu.cjs";
 import { isMacPlatform, useCommand, useCommandShortcuts, useCommands } from "./commands.cjs";
 import { FormLayer, FormScriptingUiHandlers, useForm, useFormField, useFormScriptingProvider } from "./form.cjs";

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import { S as useSelector, _ as useKernel, a as EmbedPDF, b as useOptionalSelector, c as Viewer, d as shallowArray, f as useActiveDocumentId, g as useDocuments, h as useDocumentStatus, i as DocumentScopeProps, l as ViewerProps, m as useDocumentId, n as DocumentGateProps, o as PageContextValue, p as useCapability, r as DocumentScope, s as PageProvider, t as DocumentGate, u as makePageContext, v as useKernelValue, x as usePage, y as useOptionalCapability } from "./runtime-DV98q7I0.js";
-import { A as useAnnotation, C as SelectionProps, D as filePickerProvider, E as TextStyle, F as useSelectionFlags, I as useSelectionProps, L as AnnotationMenuPlacement, M as useAnnotationSelected, N as useAnnotationSelection, O as sameAnchor, P as useFilePickerProvider, S as SelectionFlags, T as TextAlign, _ as PageAnnotationMenu, a as AnnotationLayerProps, b as RenderItem, c as AnnotationProps, d as AnnotationRendererProps, f as Border, g as PageAnnotationDraftMenu, h as LineEndings, i as AnnotationLayer, j as useAnnotationDefaults, k as sameCreationDraftAnchor, l as AnnotationPropsPatch, m as LineEnding, n as AnnotationDraftMenuRenderArgs, o as AnnotationMenuProps, p as Geom, r as AnnotationFlags, s as AnnotationMenuRenderArgs, t as AnnotationDraftMenuProps, u as AnnotationRenderer, v as PropKey, w as Style, x as SelectionAnchor, y as PropSpec } from "./annotation-nUMefyjw.js";
+import { A as useAnnotation, C as SelectionProps, D as filePickerProvider, E as TextStyle, F as useSelectionFlags, I as useSelectionProps, L as AnnotationMenuPlacement, M as useAnnotationSelected, N as useAnnotationSelection, O as sameAnchor, P as useFilePickerProvider, S as SelectionFlags, T as TextAlign, _ as PageAnnotationMenu, a as AnnotationLayerProps, b as RenderItem, c as AnnotationProps, d as AnnotationRendererProps, f as Border, g as PageAnnotationDraftMenu, h as LineEndings, i as AnnotationLayer, j as useAnnotationDefaults, k as sameCreationDraftAnchor, l as AnnotationPropsPatch, m as LineEnding, n as AnnotationDraftMenuRenderArgs, o as AnnotationMenuProps, p as Geom, r as AnnotationFlags, s as AnnotationMenuRenderArgs, t as AnnotationDraftMenuProps, u as AnnotationRenderer, v as PropKey, w as Style, x as SelectionAnchor, y as PropSpec } from "./annotation-CPbPvbKa.js";
 import { AnnotationDraftMenu, AnnotationMenu } from "./annotation-menu.js";
 import { isMacPlatform, useCommand, useCommandShortcuts, useCommands } from "./commands.js";
 import { FormLayer, FormScriptingUiHandlers, useForm, useFormField, useFormScriptingProvider } from "./form.js";

package/dist/index.js

@@ -5,7 +5,7 @@ import { Scrollbar, useScrollMetrics } from "./scrollbar.js";
 import { PageView } from "./page-view.js";
 import { RenderLayer, TileLayer } from "./render.js";
 import { SelectionLayer, useSelection } from "./selection.js";
-import { a as sameAnchor, c as useAnnotationDefaults, d as useFilePickerProvider, f as useSelectionFlags, i as filePickerProvider, l as useAnnotationSelected, n as PageAnnotationDraftMenu, o as sameCreationDraftAnchor, p as useSelectionProps, r as PageAnnotationMenu, s as useAnnotation, t as AnnotationLayer, u as useAnnotationSelection } from "./annotation-DjGWJljY.js";
+import { a as sameAnchor, c as useAnnotationDefaults, d as useFilePickerProvider, f as useSelectionFlags, i as filePickerProvider, l as useAnnotationSelected, n as PageAnnotationDraftMenu, o as sameCreationDraftAnchor, p as useSelectionProps, r as PageAnnotationMenu, s as useAnnotation, t as AnnotationLayer, u as useAnnotationSelection } from "./annotation-BTlcOjcK.js";
 import { AnnotationDraftMenu, AnnotationMenu } from "./annotation-menu.js";
 import { LinkLayer, useLink } from "./link.js";
 import { useViews } from "./views.js";

package/dist/search.cjs

@@ -17,25 +17,42 @@ function SearchLayer({ color = "#ffd500", activeColor = "#ff9632", blendMode = "
 			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}`);
+		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.pageToContent(q.upperStart);
+				const br = page.transform.pageToContent(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}`);
+			}
+			const ring = [
+				q.upperStart,
+				q.upperEnd,
+				q.lowerEnd,
+				q.lowerStart
+			].map((p) => page.transform.pageToContent(p));
+			return /* @__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: ring.map((p) => `${p.x},${p.y}`).join(" "),
+					fill
+				})
+			}, `${hit.charStart}:${i}`);
 		}))
 	});
 }

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.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"}
+{"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.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.pageToContent(q.upperStart);\n            const br = page.transform.pageToContent(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.pageToContent(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,cAAc,EAAE,UAAU;IACpD,MAAM,KAAK,KAAK,UAAU,cAAc,EAAE,QAAQ;IAClD,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,cAAc,CAAC,CAChC;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"}

package/dist/search.d.cts

@@ -1,4 +1,4 @@
-import { r as SearchQuery } from "./AnnotationListSnapshot-W0RCsyDE-dWna4TTJ.cjs";
+import { r as SearchQuery } from "./AnnotationListSnapshot-_Z600IzD-DYoq1Iu1.cjs";
 import * as React from "react";
 export * from "@embedpdf/plugin-search";
 //#region src/search.d.ts

package/dist/search.d.ts

@@ -1,4 +1,4 @@
-import { r as SearchQuery } from "./AnnotationListSnapshot-W0RCsyDE-dWna4TTJ.js";
+import { r as SearchQuery } from "./AnnotationListSnapshot-_Z600IzD-DYoq1Iu1.js";
 import * as React from "react";
 export * from "@embedpdf/plugin-search";
 //#region src/search.d.ts

package/dist/search.js

@@ -15,25 +15,42 @@ function SearchLayer({ color = "#ffd500", activeColor = "#ff9632", blendMode = "
 			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}`);
+		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.pageToContent(q.upperStart);
+				const br = page.transform.pageToContent(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}`);
+			}
+			const ring = [
+				q.upperStart,
+				q.upperEnd,
+				q.lowerEnd,
+				q.lowerStart
+			].map((p) => page.transform.pageToContent(p));
+			return /* @__PURE__ */ jsx("svg", {
+				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}`);
 		}))
 	});
 }

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.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"}
+{"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.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.pageToContent(q.upperStart);\n            const br = page.transform.pageToContent(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.pageToContent(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,cAAc,EAAE,UAAU;IACpD,MAAM,KAAK,KAAK,UAAU,cAAc,EAAE,QAAQ;IAClD,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,cAAc,CAAC,CAChC;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"}

package/dist/selection.cjs

@@ -9,35 +9,31 @@ let _embedpdf_plugin_selection = require("@embedpdf/plugin-selection");
 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 segments = require_runtime.useSelector(_embedpdf_plugin_selection.SelectionToken, (c) => c.segmentsForPage(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", {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
 		style: {
 			position: "absolute",
 			inset: 0,
+			width: "100%",
+			height: "100%",
+			overflow: "visible",
 			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);
+		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.pageToContent(p)).map((p) => `${p.x},${p.y}`).join(" "),
+				fill: color
+			}, i);
 		})
 	});
 }

package/dist/selection.cjs.map

@@ -1 +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"}
+{"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 segments = useSelector(SelectionToken, (c) => c.segmentsForPage(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    <svg\n      style={{\n        position: 'absolute',\n        inset: 0,\n        width: '100%',\n        height: '100%',\n        overflow: 'visible',\n        pointerEvents: 'none',\n      }}\n    >\n      {segments.map((s, i) => {\n        // content space → un-rotated content view px (rides the page's CSS\n        // rotation). An affine map, so mapping the four corners is exact —\n        // upright segments render pixel-identical to the old div-per-rect.\n        const ring = [s.quad.upperStart, s.quad.upperEnd, s.quad.lowerEnd, s.quad.lowerStart].map(\n          (p) => page.transform.pageToContent(p),\n        );\n        return (\n          <polygon key={i} points={ring.map((p) => `${p.x},${p.y}`).join(' ')} fill={color} />\n        );\n      })}\n    </svg>\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,WAAWC,gBAAAA,YAAYD,2BAAAA,iBAAiB,MAAM,EAAE,gBAAgB,KAAK,GAAG,GAAGE,gBAAAA,YAAY;CAG7F,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;EACE,OAAO;GACL,UAAU;GACV,OAAO;GACP,OAAO;GACP,QAAQ;GACR,UAAU;GACV,eAAe;EACjB;EAEC,UAAA,SAAS,KAAK,GAAG,MAAM;GAOtB,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,WAAD;IAAiB,QAJN;KAAC,EAAE,KAAK;KAAY,EAAE,KAAK;KAAU,EAAE,KAAK;KAAU,EAAE,KAAK;IAAU,CAAC,CAAC,KACnF,MAAM,KAAK,UAAU,cAAc,CAAC,CAGT,CAAC,CAAC,KAAK,MAAM,GAAG,EAAE,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC,KAAK,GAAG;IAAG,MAAM;GAAQ,GAArE,CAAqE;EAEvF,CAAC;CACE,CAAA;AAET;;AAGA,SAAgB,eAAe;CAC7B,OAAOD,gBAAAA,cAAcC,2BAAAA,cAAc;AACrC"}

package/dist/selection.js

@@ -7,35 +7,31 @@ export * from "@embedpdf/plugin-selection";
 function SelectionLayer({ color = "rgba(33, 150, 243, 0.35)" }) {
 	const page = usePage();
 	const selection = useCapability(SelectionToken);
-	const rects = useSelector(SelectionToken, (c) => c.rectsForPage(page.pon), shallowArray);
+	const segments = useSelector(SelectionToken, (c) => c.segmentsForPage(page.pon), shallowArray);
 	const visible = useSelector(SelectionToken, (c) => c.highlightVisible());
 	useEffect(() => {
 		selection.ensurePage(page.pon);
 	}, [selection, page.pon]);
 	if (!visible) return null;
-	return /* @__PURE__ */ jsx("div", {
+	return /* @__PURE__ */ jsx("svg", {
 		style: {
 			position: "absolute",
 			inset: 0,
+			width: "100%",
+			height: "100%",
+			overflow: "visible",
 			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__ */ jsx("div", { style: {
-				position: "absolute",
-				left: tl.x,
-				top: tl.y,
-				width: br.x - tl.x,
-				height: br.y - tl.y,
-				background: color
-			} }, i);
+		children: segments.map((s, i) => {
+			return /* @__PURE__ */ jsx("polygon", {
+				points: [
+					s.quad.upperStart,
+					s.quad.upperEnd,
+					s.quad.lowerEnd,
+					s.quad.lowerStart
+				].map((p) => page.transform.pageToContent(p)).map((p) => `${p.x},${p.y}`).join(" "),
+				fill: color
+			}, i);
 		})
 	});
 }

package/dist/selection.js.map

@@ -1 +1 @@
-{"version":3,"file":"selection.js","names":[],"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,OAAO,QAAQ;CACrB,MAAM,YAAY,cAAc,cAAc;CAC9C,MAAM,QAAQ,YAAY,iBAAiB,MAAM,EAAE,aAAa,KAAK,GAAG,GAAG,YAAY;CAGvF,MAAM,UAAU,YAAY,iBAAiB,MAAM,EAAE,iBAAiB,CAAC;CAIvE,gBAAgB;EACd,UAAU,WAAW,KAAK,GAAG;CAC/B,GAAG,CAAC,WAAW,KAAK,GAAG,CAAC;CAExB,IAAI,CAAC,SAAS,OAAO;CAErB,OACE,oBAAC,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,oBAAC,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,OAAO,cAAc,cAAc;AACrC"}
+{"version":3,"file":"selection.js","names":[],"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 segments = useSelector(SelectionToken, (c) => c.segmentsForPage(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    <svg\n      style={{\n        position: 'absolute',\n        inset: 0,\n        width: '100%',\n        height: '100%',\n        overflow: 'visible',\n        pointerEvents: 'none',\n      }}\n    >\n      {segments.map((s, i) => {\n        // content space → un-rotated content view px (rides the page's CSS\n        // rotation). An affine map, so mapping the four corners is exact —\n        // upright segments render pixel-identical to the old div-per-rect.\n        const ring = [s.quad.upperStart, s.quad.upperEnd, s.quad.lowerEnd, s.quad.lowerStart].map(\n          (p) => page.transform.pageToContent(p),\n        );\n        return (\n          <polygon key={i} points={ring.map((p) => `${p.x},${p.y}`).join(' ')} fill={color} />\n        );\n      })}\n    </svg>\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,OAAO,QAAQ;CACrB,MAAM,YAAY,cAAc,cAAc;CAC9C,MAAM,WAAW,YAAY,iBAAiB,MAAM,EAAE,gBAAgB,KAAK,GAAG,GAAG,YAAY;CAG7F,MAAM,UAAU,YAAY,iBAAiB,MAAM,EAAE,iBAAiB,CAAC;CAIvE,gBAAgB;EACd,UAAU,WAAW,KAAK,GAAG;CAC/B,GAAG,CAAC,WAAW,KAAK,GAAG,CAAC;CAExB,IAAI,CAAC,SAAS,OAAO;CAErB,OACE,oBAAC,OAAD;EACE,OAAO;GACL,UAAU;GACV,OAAO;GACP,OAAO;GACP,QAAQ;GACR,UAAU;GACV,eAAe;EACjB;EAEC,UAAA,SAAS,KAAK,GAAG,MAAM;GAOtB,OACE,oBAAC,WAAD;IAAiB,QAJN;KAAC,EAAE,KAAK;KAAY,EAAE,KAAK;KAAU,EAAE,KAAK;KAAU,EAAE,KAAK;IAAU,CAAC,CAAC,KACnF,MAAM,KAAK,UAAU,cAAc,CAAC,CAGT,CAAC,CAAC,KAAK,MAAM,GAAG,EAAE,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC,KAAK,GAAG;IAAG,MAAM;GAAQ,GAArE,CAAqE;EAEvF,CAAC;CACE,CAAA;AAET;;AAGA,SAAgB,eAAe;CAC7B,OAAO,cAAc,cAAc;AACrC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@embedpdf/react",
-  "version": "3.0.0-next.3",
+  "version": "3.0.0-next.4",
   "private": false,
   "description": "React adapter for EmbedPDF v3: one generic reactive binding + structural components (Viewer, Stage, PageView) + headless layers & hooks. The whole framework surface.",
   "type": "module",
@@ -103,28 +103,28 @@
     "dist"
   ],
   "dependencies": {
-    "@embedpdf/core-annotation": "3.0.0-next.3",
-    "@embedpdf/core": "3.0.0-next.3",
-    "@embedpdf/plugin-annotation": "3.0.0-next.3",
-    "@embedpdf/core-geometry": "3.0.0-next.3",
-    "@embedpdf/plugin-i18n": "3.0.0-next.3",
-    "@embedpdf/plugin-commands": "3.0.0-next.3",
-    "@embedpdf/plugin-form": "3.0.0-next.3",
-    "@embedpdf/plugin-link": "3.0.0-next.3",
-    "@embedpdf/plugin-interaction": "3.0.0-next.3",
-    "@embedpdf/plugin-page-edit": "3.0.0-next.3",
-    "@embedpdf/plugin-redaction": "3.0.0-next.3",
-    "@embedpdf/plugin-metadata": "3.0.0-next.3",
-    "@embedpdf/plugin-render": "3.0.0-next.3",
-    "@embedpdf/plugin-search": "3.0.0-next.3",
-    "@embedpdf/plugin-selection": "3.0.0-next.3",
-    "@embedpdf/plugin-shell": "3.0.0-next.3",
-    "@embedpdf/plugin-stage": "3.0.0-next.3",
-    "@embedpdf/plugin-stamp": "3.0.0-next.3",
-    "@embedpdf/core-stage": "3.0.0-next.3",
-    "@embedpdf/plugin-view-manager": "3.0.0-next.3",
-    "@embedpdf/core-ui": "3.0.0-next.3",
-    "@embedpdf/web": "3.0.0-next.3"
+    "@embedpdf/core-annotation": "3.0.0-next.4",
+    "@embedpdf/core-geometry": "3.0.0-next.4",
+    "@embedpdf/core": "3.0.0-next.4",
+    "@embedpdf/plugin-commands": "3.0.0-next.4",
+    "@embedpdf/plugin-form": "3.0.0-next.4",
+    "@embedpdf/plugin-annotation": "3.0.0-next.4",
+    "@embedpdf/plugin-i18n": "3.0.0-next.4",
+    "@embedpdf/plugin-interaction": "3.0.0-next.4",
+    "@embedpdf/plugin-link": "3.0.0-next.4",
+    "@embedpdf/plugin-metadata": "3.0.0-next.4",
+    "@embedpdf/plugin-page-edit": "3.0.0-next.4",
+    "@embedpdf/plugin-search": "3.0.0-next.4",
+    "@embedpdf/plugin-render": "3.0.0-next.4",
+    "@embedpdf/plugin-shell": "3.0.0-next.4",
+    "@embedpdf/plugin-redaction": "3.0.0-next.4",
+    "@embedpdf/plugin-selection": "3.0.0-next.4",
+    "@embedpdf/plugin-stage": "3.0.0-next.4",
+    "@embedpdf/plugin-stamp": "3.0.0-next.4",
+    "@embedpdf/core-stage": "3.0.0-next.4",
+    "@embedpdf/plugin-view-manager": "3.0.0-next.4",
+    "@embedpdf/core-ui": "3.0.0-next.4",
+    "@embedpdf/web": "3.0.0-next.4"
   },
   "peerDependencies": {
     "react": ">=18",