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

package/dist/page-view.js

@@ -1,6 +1,8 @@
 import { DocumentScope, PageProvider, makePageContext, useActiveDocumentId, useKernel } from "./runtime.js";
+import { ProjectorProvider } from "./anchored.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useMemo, useRef } from "react";
+import { observeClientGeometry } from "@embedpdf/web";
 import { NO_FRAME, pageTransform } from "@embedpdf/core-geometry";
 //#region src/page-view.tsx
 /** A single page surface with NO Stage — same layers + rotation + chrome frame,
@@ -42,6 +44,21 @@ function PageView({ page, documentId, width = 240, pageFrame = NO_FRAME, childre
 		pageFrame,
 		transform
 	]);
+	const projector = useMemo(() => ({
+		space: "client",
+		toScreen: (p, rect) => p === ctx.pon && ref.current ? ctx.toClientRect(rect) : null,
+		toScreenPoint: (p, at) => p === ctx.pon && ref.current ? ctx.toClientPoint(at) : null,
+		viewEnv: (p) => p === ctx.pon ? {
+			scale: ctx.transform.viewScale,
+			rotation: ctx.transform.rotation,
+			zoom: ctx.transform.zoom
+		} : null
+	}), [ctx]);
+	const projectorBinding = useMemo(() => ({
+		projector,
+		revision: ctx,
+		subscribe: observeClientGeometry
+	}), [projector, ctx]);
 	if (!docId || !meta || !base) return null;
 	const t = transform;
 	const outerW = t.viewWidth + pageFrame.left + pageFrame.right;
@@ -50,41 +67,44 @@ function PageView({ page, documentId, width = 240, pageFrame = NO_FRAME, childre
 	const contentTop = pageFrame.top + (t.viewHeight - t.contentHeight) / 2;
 	return /* @__PURE__ */ jsx(DocumentScope, {
 		id: docId,
-		children: /* @__PURE__ */ jsx("div", {
-			style: {
-				position: "relative",
-				width: outerW,
-				height: outerH,
-				...style
-			},
-			children: /* @__PURE__ */ jsxs(PageProvider, {
-				value: ctx,
-				children: [
-					/* @__PURE__ */ jsx("div", { style: {
-						position: "absolute",
-						left: pageFrame.left,
-						top: pageFrame.top,
-						width: t.viewWidth,
-						height: t.viewHeight,
-						boxShadow: "0 6px 18px rgba(0,0,0,.18)"
-					} }),
-					/* @__PURE__ */ jsx("div", {
-						ref,
-						style: {
+		children: /* @__PURE__ */ jsx(ProjectorProvider, {
+			value: projectorBinding,
+			children: /* @__PURE__ */ jsx("div", {
+				style: {
+					position: "relative",
+					width: outerW,
+					height: outerH,
+					...style
+				},
+				children: /* @__PURE__ */ jsxs(PageProvider, {
+					value: ctx,
+					children: [
+						/* @__PURE__ */ jsx("div", { style: {
 							position: "absolute",
-							left: contentLeft,
-							top: contentTop,
-							width: t.contentWidth,
-							height: t.contentHeight,
-							background: "#fff",
-							transform: rotation ? `rotate(${rotation}deg)` : void 0,
-							userSelect: "none",
-							WebkitUserSelect: "none"
-						},
-						children
-					}),
-					pageChrome
-				]
+							left: pageFrame.left,
+							top: pageFrame.top,
+							width: t.viewWidth,
+							height: t.viewHeight,
+							boxShadow: "0 6px 18px rgba(0,0,0,.18)"
+						} }),
+						/* @__PURE__ */ jsx("div", {
+							ref,
+							style: {
+								position: "absolute",
+								left: contentLeft,
+								top: contentTop,
+								width: t.contentWidth,
+								height: t.contentHeight,
+								background: "#fff",
+								transform: rotation ? `rotate(${rotation}deg)` : void 0,
+								userSelect: "none",
+								WebkitUserSelect: "none"
+							},
+							children
+						}),
+						pageChrome
+					]
+				})
 			})
 		})
 	});

package/dist/page-view.js.map

@@ -1 +1 @@
-{"version":3,"file":"page-view.js","names":[],"sources":["../src/page-view.tsx"],"sourcesContent":["/**\n * <PageView> — a single page surface with NO Stage.\n *\n * Same layers + rotation + chrome frame as a `<Stage>` page, but no\n * camera/scroll/zoom and, crucially, NO dependency on `@embedpdf/plugin-stage`.\n * It builds its own `PageTransform` from a target content width and shares the\n * exact `PageContext` seam, so every layer (RenderLayer, AnnotationLayer,\n * PageAnnotationMenu, …) works here identically.\n */\nimport * as React from 'react';\nimport { useMemo, useRef } from 'react';\nimport { NO_FRAME, pageTransform, type PageFrame } from '@embedpdf/core-geometry';\nimport {\n  DocumentScope,\n  makePageContext,\n  PageProvider,\n  useActiveDocumentId,\n  useKernel,\n} from './runtime';\n\nexport interface PageViewProps {\n  page: number;\n  /** Which document to show. Defaults to the active document. */\n  documentId?: string;\n  /** Target width for the page CONTENT; the display box is the rotated footprint. */\n  width?: number;\n  /** Reserved chrome bands around the page (screen px) — same model as `<Stage>`. */\n  pageFrame?: PageFrame;\n  /** Page-space content (rotates with the page). */\n  children: React.ReactNode;\n  /** Box-space chrome (label, border, …) — never rotated. Mirrors `<Stage pageChrome>`. */\n  pageChrome?: React.ReactNode;\n  style?: React.CSSProperties;\n}\n\n/** A single page surface with NO Stage — same layers + rotation + chrome frame,\n *  no camera/scroll/zoom. */\nexport function PageView({\n  page,\n  documentId,\n  width = 240,\n  pageFrame = NO_FRAME,\n  children,\n  pageChrome,\n  style,\n}: PageViewProps) {\n  const kernel = useKernel();\n  const active = useActiveDocumentId();\n  const ref = useRef<HTMLDivElement>(null);\n  const docId = documentId ?? active;\n  const meta = docId ? kernel.getState().core.documents[docId] : undefined;\n  const base = meta?.pages[page];\n  const pon = base?.pageObjectNumber ?? page + 1;\n  const rotation = base?.rotation ?? 0;\n  const dpr = typeof window !== 'undefined' ? window.devicePixelRatio || 1 : 1;\n  // Standalone (no Stage/camera): build the page's transform from the target\n  // content `width` directly. `scale` is view px per point = width / pageWidthPts.\n  const transform = useMemo(\n    () =>\n      pageTransform({\n        pageSize: base\n          ? { width: base.size.width, height: base.size.height }\n          : { width: 1, height: 1 },\n        rotation,\n        scale: base ? width / base.size.width : 1,\n        // Physical 100% on the web: 1pt = 96/72 CSS px, times the page's\n        // /UserUnit — so `transform.zoom` is meaningful even without a Stage\n        // (a thumbnail-sized PageView reads as zoomed out, as it should).\n        baseScale: (96 / 72) * (base?.userUnit ?? 1),\n        dpr,\n      }),\n    [base?.size.width, base?.size.height, base?.userUnit, rotation, width, dpr],\n  );\n  const ctx = useMemo(\n    () =>\n      makePageContext(docId ?? '', pon, page, pageFrame, transform, () =>\n        ref.current!.getBoundingClientRect(),\n      ),\n    [docId, pon, page, pageFrame, transform],\n  );\n  if (!docId || !meta || !base) return null;\n  const t = transform;\n  const outerW = t.viewWidth + pageFrame.left + pageFrame.right;\n  const outerH = t.viewHeight + pageFrame.top + pageFrame.bottom;\n  const contentLeft = pageFrame.left + (t.viewWidth - t.contentWidth) / 2;\n  const contentTop = pageFrame.top + (t.viewHeight - t.contentHeight) / 2;\n  return (\n    <DocumentScope id={docId}>\n      <div style={{ position: 'relative', width: outerW, height: outerH, ...style }}>\n        <PageProvider value={ctx}>\n          {/* drop shadow ONLY — transparent, axis-aligned, can't leak behind the bitmap */}\n          <div\n            style={{\n              position: 'absolute',\n              left: pageFrame.left,\n              top: pageFrame.top,\n              width: t.viewWidth,\n              height: t.viewHeight,\n              boxShadow: '0 6px 18px rgba(0,0,0,.18)',\n            }}\n          />\n          {/* white backing + content as ONE box; rotation 0 carries no transform */}\n          <div\n            ref={ref}\n            style={{\n              position: 'absolute',\n              left: contentLeft,\n              top: contentTop,\n              width: t.contentWidth,\n              height: t.contentHeight,\n              background: '#fff',\n              transform: rotation ? `rotate(${rotation}deg)` : undefined,\n              userSelect: 'none',\n              WebkitUserSelect: 'none',\n            }}\n          >\n            {children}\n          </div>\n          {pageChrome}\n        </PageProvider>\n      </div>\n    </DocumentScope>\n  );\n}\n"],"mappings":";;;;;;;AAqCA,SAAgB,SAAS,EACvB,MACA,YACA,QAAQ,KACR,YAAY,UACZ,UACA,YACA,SACgB;CAChB,MAAM,SAAS,UAAU;CACzB,MAAM,SAAS,oBAAoB;CACnC,MAAM,MAAM,OAAuB,IAAI;CACvC,MAAM,QAAQ,cAAc;CAC5B,MAAM,OAAO,QAAQ,OAAO,SAAS,CAAC,CAAC,KAAK,UAAU,SAAS,KAAA;CAC/D,MAAM,OAAO,MAAM,MAAM;CACzB,MAAM,MAAM,MAAM,oBAAoB,OAAO;CAC7C,MAAM,WAAW,MAAM,YAAY;CACnC,MAAM,MAAM,OAAO,WAAW,cAAc,OAAO,oBAAoB,IAAI;CAG3E,MAAM,YAAY,cAEd,cAAc;EACZ,UAAU,OACN;GAAE,OAAO,KAAK,KAAK;GAAO,QAAQ,KAAK,KAAK;EAAO,IACnD;GAAE,OAAO;GAAG,QAAQ;EAAE;EAC1B;EACA,OAAO,OAAO,QAAQ,KAAK,KAAK,QAAQ;EAIxC,WAAY,KAAK,MAAO,MAAM,YAAY;EAC1C;CACF,CAAC,GACH;EAAC,MAAM,KAAK;EAAO,MAAM,KAAK;EAAQ,MAAM;EAAU;EAAU;EAAO;CAAG,CAC5E;CACA,MAAM,MAAM,cAER,gBAAgB,SAAS,IAAI,KAAK,MAAM,WAAW,iBACjD,IAAI,QAAS,sBAAsB,CACrC,GACF;EAAC;EAAO;EAAK;EAAM;EAAW;CAAS,CACzC;CACA,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,MAAM,OAAO;CACrC,MAAM,IAAI;CACV,MAAM,SAAS,EAAE,YAAY,UAAU,OAAO,UAAU;CACxD,MAAM,SAAS,EAAE,aAAa,UAAU,MAAM,UAAU;CACxD,MAAM,cAAc,UAAU,QAAQ,EAAE,YAAY,EAAE,gBAAgB;CACtE,MAAM,aAAa,UAAU,OAAO,EAAE,aAAa,EAAE,iBAAiB;CACtE,OACE,oBAAC,eAAD;EAAe,IAAI;EACjB,UAAA,oBAAC,OAAD;GAAK,OAAO;IAAE,UAAU;IAAY,OAAO;IAAQ,QAAQ;IAAQ,GAAG;GAAM;GAC1E,UAAA,qBAAC,cAAD;IAAc,OAAO;IAArB,UAAA;KAEE,oBAAC,OAAD,EACE,OAAO;MACL,UAAU;MACV,MAAM,UAAU;MAChB,KAAK,UAAU;MACf,OAAO,EAAE;MACT,QAAQ,EAAE;MACV,WAAW;KACb,EACD,CAAA;KAED,oBAAC,OAAD;MACO;MACL,OAAO;OACL,UAAU;OACV,MAAM;OACN,KAAK;OACL,OAAO,EAAE;OACT,QAAQ,EAAE;OACV,YAAY;OACZ,WAAW,WAAW,UAAU,SAAS,QAAQ,KAAA;OACjD,YAAY;OACZ,kBAAkB;MACpB;MAEC;KACE,CAAA;KACJ;IACW;;EACX,CAAA;CACQ,CAAA;AAEnB"}
+{"version":3,"file":"page-view.js","names":[],"sources":["../src/page-view.tsx"],"sourcesContent":["/**\n * <PageView> — a single page surface with NO Stage.\n *\n * Same layers + rotation + chrome frame as a `<Stage>` page, but no\n * camera/scroll/zoom and, crucially, NO dependency on `@embedpdf/plugin-stage`.\n * It builds its own `PageTransform` from a target content width and shares the\n * exact `PageContext` seam, so every layer (RenderLayer, AnnotationLayer, …)\n * works here identically — and it provides the measured `ViewProjector`, so\n * anchored UI (`<AnnotationMenu>`, `<SelectionMenu>`) works here too, portalled\n * and clipping-immune.\n */\nimport * as React from 'react';\nimport { useMemo, useRef } from 'react';\nimport { NO_FRAME, pageTransform, type PageFrame } from '@embedpdf/core-geometry';\nimport { observeClientGeometry } from '@embedpdf/web';\nimport { ProjectorProvider, type ProjectorBinding, type ViewProjector } from './anchored';\nimport {\n  DocumentScope,\n  makePageContext,\n  PageProvider,\n  useActiveDocumentId,\n  useKernel,\n} from './runtime';\n\nexport interface PageViewProps {\n  page: number;\n  /** Which document to show. Defaults to the active document. */\n  documentId?: string;\n  /** Target width for the page CONTENT; the display box is the rotated footprint. */\n  width?: number;\n  /** Reserved chrome bands around the page (screen px) — same model as `<Stage>`. */\n  pageFrame?: PageFrame;\n  /** Page-space content (rotates with the page). */\n  children: React.ReactNode;\n  /** Box-space chrome (label, border, …) — never rotated. Mirrors `<Stage pageChrome>`. */\n  pageChrome?: React.ReactNode;\n  style?: React.CSSProperties;\n}\n\n/** A single page surface with NO Stage — same layers + rotation + chrome frame,\n *  no camera/scroll/zoom. */\nexport function PageView({\n  page,\n  documentId,\n  width = 240,\n  pageFrame = NO_FRAME,\n  children,\n  pageChrome,\n  style,\n}: PageViewProps) {\n  const kernel = useKernel();\n  const active = useActiveDocumentId();\n  const ref = useRef<HTMLDivElement>(null);\n  const docId = documentId ?? active;\n  const meta = docId ? kernel.getState().core.documents[docId] : undefined;\n  const base = meta?.pages[page];\n  const pon = base?.pageObjectNumber ?? page + 1;\n  const rotation = base?.rotation ?? 0;\n  const dpr = typeof window !== 'undefined' ? window.devicePixelRatio || 1 : 1;\n  // Standalone (no Stage/camera): build the page's transform from the target\n  // content `width` directly. `scale` is view px per point = width / pageWidthPts.\n  const transform = useMemo(\n    () =>\n      pageTransform({\n        pageSize: base\n          ? { width: base.size.width, height: base.size.height }\n          : { width: 1, height: 1 },\n        rotation,\n        scale: base ? width / base.size.width : 1,\n        // Physical 100% on the web: 1pt = 96/72 CSS px, times the page's\n        // /UserUnit — so `transform.zoom` is meaningful even without a Stage\n        // (a thumbnail-sized PageView reads as zoomed out, as it should).\n        baseScale: (96 / 72) * (base?.userUnit ?? 1),\n        dpr,\n      }),\n    [base?.size.width, base?.size.height, base?.userUnit, rotation, width, dpr],\n  );\n  const ctx = useMemo(\n    () =>\n      makePageContext(docId ?? '', pon, page, pageFrame, transform, () =>\n        ref.current!.getBoundingClientRect(),\n      ),\n    [docId, pon, page, pageFrame, transform],\n  );\n  // The PageView's ViewProjector: no camera, so anchored UI positions by\n  // MEASURING the DOM (client space → portal + position:fixed, immune to\n  // ancestor overflow clipping). `toScreen` answers null until the page\n  // element has committed — <Anchored> forces one post-commit pass to pick\n  // it up. The binding's revision covers state-driven changes (a new\n  // transform/page); `observeClientGeometry` covers the genuinely\n  // browser-driven ones (document scroll, window resize) that no state\n  // change announces.\n  const projector = useMemo<ViewProjector>(\n    () => ({\n      space: 'client',\n      toScreen: (p, rect) => (p === ctx.pon && ref.current ? ctx.toClientRect(rect) : null),\n      toScreenPoint: (p, at) => (p === ctx.pon && ref.current ? ctx.toClientPoint(at) : null),\n      viewEnv: (p) =>\n        p === ctx.pon\n          ? {\n              scale: ctx.transform.viewScale,\n              rotation: ctx.transform.rotation,\n              zoom: ctx.transform.zoom,\n            }\n          : null,\n    }),\n    [ctx],\n  );\n  const projectorBinding = useMemo<ProjectorBinding>(\n    () => ({ projector, revision: ctx, subscribe: observeClientGeometry }),\n    [projector, ctx],\n  );\n  if (!docId || !meta || !base) return null;\n  const t = transform;\n  const outerW = t.viewWidth + pageFrame.left + pageFrame.right;\n  const outerH = t.viewHeight + pageFrame.top + pageFrame.bottom;\n  const contentLeft = pageFrame.left + (t.viewWidth - t.contentWidth) / 2;\n  const contentTop = pageFrame.top + (t.viewHeight - t.contentHeight) / 2;\n  return (\n    <DocumentScope id={docId}>\n      <ProjectorProvider value={projectorBinding}>\n      <div style={{ position: 'relative', width: outerW, height: outerH, ...style }}>\n        <PageProvider value={ctx}>\n          {/* drop shadow ONLY — transparent, axis-aligned, can't leak behind the bitmap */}\n          <div\n            style={{\n              position: 'absolute',\n              left: pageFrame.left,\n              top: pageFrame.top,\n              width: t.viewWidth,\n              height: t.viewHeight,\n              boxShadow: '0 6px 18px rgba(0,0,0,.18)',\n            }}\n          />\n          {/* white backing + content as ONE box; rotation 0 carries no transform */}\n          <div\n            ref={ref}\n            style={{\n              position: 'absolute',\n              left: contentLeft,\n              top: contentTop,\n              width: t.contentWidth,\n              height: t.contentHeight,\n              background: '#fff',\n              transform: rotation ? `rotate(${rotation}deg)` : undefined,\n              userSelect: 'none',\n              WebkitUserSelect: 'none',\n            }}\n          >\n            {children}\n          </div>\n          {pageChrome}\n        </PageProvider>\n      </div>\n      </ProjectorProvider>\n    </DocumentScope>\n  );\n}\n"],"mappings":";;;;;;;;;AAyCA,SAAgB,SAAS,EACvB,MACA,YACA,QAAQ,KACR,YAAY,UACZ,UACA,YACA,SACgB;CAChB,MAAM,SAAS,UAAU;CACzB,MAAM,SAAS,oBAAoB;CACnC,MAAM,MAAM,OAAuB,IAAI;CACvC,MAAM,QAAQ,cAAc;CAC5B,MAAM,OAAO,QAAQ,OAAO,SAAS,CAAC,CAAC,KAAK,UAAU,SAAS,KAAA;CAC/D,MAAM,OAAO,MAAM,MAAM;CACzB,MAAM,MAAM,MAAM,oBAAoB,OAAO;CAC7C,MAAM,WAAW,MAAM,YAAY;CACnC,MAAM,MAAM,OAAO,WAAW,cAAc,OAAO,oBAAoB,IAAI;CAG3E,MAAM,YAAY,cAEd,cAAc;EACZ,UAAU,OACN;GAAE,OAAO,KAAK,KAAK;GAAO,QAAQ,KAAK,KAAK;EAAO,IACnD;GAAE,OAAO;GAAG,QAAQ;EAAE;EAC1B;EACA,OAAO,OAAO,QAAQ,KAAK,KAAK,QAAQ;EAIxC,WAAY,KAAK,MAAO,MAAM,YAAY;EAC1C;CACF,CAAC,GACH;EAAC,MAAM,KAAK;EAAO,MAAM,KAAK;EAAQ,MAAM;EAAU;EAAU;EAAO;CAAG,CAC5E;CACA,MAAM,MAAM,cAER,gBAAgB,SAAS,IAAI,KAAK,MAAM,WAAW,iBACjD,IAAI,QAAS,sBAAsB,CACrC,GACF;EAAC;EAAO;EAAK;EAAM;EAAW;CAAS,CACzC;CASA,MAAM,YAAY,eACT;EACL,OAAO;EACP,WAAW,GAAG,SAAU,MAAM,IAAI,OAAO,IAAI,UAAU,IAAI,aAAa,IAAI,IAAI;EAChF,gBAAgB,GAAG,OAAQ,MAAM,IAAI,OAAO,IAAI,UAAU,IAAI,cAAc,EAAE,IAAI;EAClF,UAAU,MACR,MAAM,IAAI,MACN;GACE,OAAO,IAAI,UAAU;GACrB,UAAU,IAAI,UAAU;GACxB,MAAM,IAAI,UAAU;EACtB,IACA;CACR,IACA,CAAC,GAAG,CACN;CACA,MAAM,mBAAmB,eAChB;EAAE;EAAW,UAAU;EAAK,WAAW;CAAsB,IACpE,CAAC,WAAW,GAAG,CACjB;CACA,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,MAAM,OAAO;CACrC,MAAM,IAAI;CACV,MAAM,SAAS,EAAE,YAAY,UAAU,OAAO,UAAU;CACxD,MAAM,SAAS,EAAE,aAAa,UAAU,MAAM,UAAU;CACxD,MAAM,cAAc,UAAU,QAAQ,EAAE,YAAY,EAAE,gBAAgB;CACtE,MAAM,aAAa,UAAU,OAAO,EAAE,aAAa,EAAE,iBAAiB;CACtE,OACE,oBAAC,eAAD;EAAe,IAAI;EACjB,UAAA,oBAAC,mBAAD;GAAmB,OAAO;GAC1B,UAAA,oBAAC,OAAD;IAAK,OAAO;KAAE,UAAU;KAAY,OAAO;KAAQ,QAAQ;KAAQ,GAAG;IAAM;IAC1E,UAAA,qBAAC,cAAD;KAAc,OAAO;KAArB,UAAA;MAEE,oBAAC,OAAD,EACE,OAAO;OACL,UAAU;OACV,MAAM,UAAU;OAChB,KAAK,UAAU;OACf,OAAO,EAAE;OACT,QAAQ,EAAE;OACV,WAAW;MACb,EACD,CAAA;MAED,oBAAC,OAAD;OACO;OACL,OAAO;QACL,UAAU;QACV,MAAM;QACN,KAAK;QACL,OAAO,EAAE;QACT,QAAQ,EAAE;QACV,YAAY;QACZ,WAAW,WAAW,UAAU,SAAS,QAAQ,KAAA;QACjD,YAAY;QACZ,kBAAkB;OACpB;OAEC;MACE,CAAA;MACJ;KACW;;GACX,CAAA;EACc,CAAA;CACN,CAAA;AAEnB"}

package/dist/search.d.cts

@@ -1,4 +1,4 @@
-import { r as SearchQuery } from "./AnnotationListSnapshot-_Z600IzD-DYoq1Iu1.cjs";
+import { r as SearchQuery } from "./AnnotationListSnapshot-CHjkcIaL-CMHGL8-D.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-_Z600IzD-DYoq1Iu1.js";
+import { r as SearchQuery } from "./AnnotationListSnapshot-CHjkcIaL-CMHGL8-D.js";
 import * as React from "react";
 export * from "@embedpdf/plugin-search";
 //#region src/search.d.ts

package/dist/selection.cjs

@@ -1,16 +1,19 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_rolldown_runtime = require("./rolldown-runtime-DDXJien1.cjs");
 const require_runtime = require("./runtime.cjs");
+const require_anchored = require("./anchored.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");
 let react = require("react");
 react = require_rolldown_runtime.__toESM(react, 1);
+let _embedpdf_web = require("@embedpdf/web");
 let _embedpdf_plugin_selection = require("@embedpdf/plugin-selection");
+let _embedpdf_plugin_selection_internal = require("@embedpdf/plugin-selection/internal");
 //#region src/selection.tsx
 function SelectionLayer({ color = "rgba(33, 150, 243, 0.35)" }) {
 	const page = require_runtime.usePage();
-	const selection = require_runtime.useCapability(_embedpdf_plugin_selection.SelectionToken);
-	const 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());
+	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());
 	(0, react.useEffect)(() => {
 		selection.ensurePage(page.pon);
 	}, [selection, page.pon]);
@@ -37,12 +40,64 @@ function SelectionLayer({ color = "rgba(33, 150, 243, 0.35)" }) {
 		})
 	});
 }
-/** The selection capability (clear(), hasSelection(), …) for app chrome. */
+/** 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;
+};
+/**
+* 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
+* 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.
+*/
+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);
+	if (selecting || !anchor) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_anchored.Anchored, {
+		anchor,
+		placement,
+		gap,
+		children
+	});
+}
+/**
+* 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.
+*/
+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]);
+	return null;
+}
 //#endregion
+exports.SelectionClipboard = SelectionClipboard;
 exports.SelectionLayer = SelectionLayer;
+exports.SelectionMenu = SelectionMenu;
+Object.defineProperty(exports, "copySelection", {
+	enumerable: true,
+	get: function() {
+		return _embedpdf_web.copySelection;
+	}
+});
 exports.useSelection = useSelection;
 Object.keys(_embedpdf_plugin_selection).forEach(function(k) {
 	if (k !== "default" && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {

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 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"}
+{"version":3,"file":"selection.cjs","names":["usePage","useCapability","SelectionHostToken","useSelector","shallowArray","SelectionToken","Anchored"],"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 * The layer resolves the HOST lens (`/internal`: geometry warming, the\n * highlight handshake) — the adapter is exactly what that entry exists for.\n * `useSelection()` hands app code the PUBLIC lens only.\n */\n\n// One-line-per-feature: registration travels with the UI.\nexport * from '@embedpdf/plugin-selection';\n// The clipboard side effect lives in @embedpdf/web (the plugin is DOM-free);\n// re-exported here so app code has one import for the whole feature.\nexport { copySelection } from '@embedpdf/web';\nimport * as React from 'react';\nimport { useEffect } from 'react';\nimport { SelectionToken, type SelectionMenuAnchor } from '@embedpdf/plugin-selection';\nimport { SelectionToken as SelectionHostToken } from '@embedpdf/plugin-selection/internal';\nimport { wireSelectionClipboard, type SelectionClipboardOptions } from '@embedpdf/web';\nimport { Anchored, type AnchoredPlacement } from './anchored';\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(SelectionHostToken);\n  const segments = useSelector(\n    SelectionHostToken,\n    (c) => c.segmentsForPage(page.pon),\n    shallowArray,\n  );\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(SelectionHostToken, (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  // (A no-op without doc.text.select — nothing warms, nothing renders.)\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 PUBLIC selection capability (select(), readText(), canCopy(), …) for\n *  app chrome — toolbars, context menus, automation. */\nexport function useSelection() {\n  return useCapability(SelectionToken);\n}\n\n/** Structural equality for the selection's menu anchor — keeps the menu from\n *  re-rendering on unrelated dispatches (the capability returns a fresh\n *  object each call). */\nconst sameMenuAnchor = (\n  a: SelectionMenuAnchor | null,\n  b: SelectionMenuAnchor | null,\n): boolean => {\n  if (a === b) return true;\n  if (!a || !b) return false;\n  return (\n    a.pon === b.pon &&\n    a.bounds.x === b.bounds.x &&\n    a.bounds.y === b.bounds.y &&\n    a.bounds.width === b.bounds.width &&\n    a.bounds.height === b.bounds.height\n  );\n};\n\nexport interface SelectionMenuProps {\n  children: React.ReactNode;\n  /** Gap in screen px between the selection and the menu (default 8). */\n  gap?: number;\n  /** Where to place the menu relative to the selection. Default 'top'. */\n  placement?: AnchoredPlacement;\n}\n\n/**\n * Floats over the current TEXT selection (one anchor regardless of\n * cross-page selection; it rides the gesture's end page) — and only once the\n * selection SETTLES: hidden while `isSelecting()` (mid-drag), it appears at\n * pointer-up; programmatic selections show immediately (born settled). Works\n * under `<Stage>` (mount in the overlay slot) and `<PageView>` alike — the\n * surface provides the projection. Compose the contents from hooks:\n * `useSelection()` for copy/clear, `useAnnotation()` for\n * `markupFromSelection('highlight')`, `copySelection` for the clipboard.\n * For live-follow UI during the drag, compose `<Anchored>` with\n * `menuAnchor()` yourself — the primitive carries no policy.\n */\nexport function SelectionMenu({ children, gap = 8, placement = 'top' }: SelectionMenuProps) {\n  const selecting = useSelector(SelectionToken, (c) => c.isSelecting());\n  const anchor = useSelector(SelectionToken, (c) => c.menuAnchor(), sameMenuAnchor);\n  if (selecting || !anchor) return null;\n  return (\n    <Anchored anchor={anchor} placement={placement} gap={gap}>\n      {children}\n    </Anchored>\n  );\n}\n\nexport type SelectionClipboardProps = Pick<SelectionClipboardOptions, 'prefetch'>;\n\n/**\n * Mount ONCE per viewer to wire clipboard copy: prefetches the selected text\n * when the selection settles, answers the native `copy` event synchronously,\n * and falls back to the async Clipboard API for ctrl/cmd+C when the page has\n * no DOM selection. Renders nothing. For a toolbar Copy button, call\n * `copySelection(useSelection())` from its click handler instead.\n */\nexport function SelectionClipboard({ prefetch }: SelectionClipboardProps = {}) {\n  const selection = useCapability(SelectionToken);\n  useEffect(\n    () => wireSelectionClipboard(selection, prefetch === undefined ? {} : { prefetch }),\n    [selection, prefetch],\n  );\n  return null;\n}\n"],"mappings":";;;;;;;;;;;AA+BA,SAAgB,eAAe,EAAE,QAAQ,8BAAmD;CAC1F,MAAM,OAAOA,gBAAAA,QAAQ;CACrB,MAAM,YAAYC,gBAAAA,cAAcC,oCAAAA,cAAkB;CAClD,MAAM,WAAWC,gBAAAA,YACfD,oCAAAA,iBACC,MAAM,EAAE,gBAAgB,KAAK,GAAG,GACjCE,gBAAAA,YACF;CAGA,MAAM,UAAUD,gBAAAA,YAAYD,oCAAAA,iBAAqB,MAAM,EAAE,iBAAiB,CAAC;CAK3E,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;;;AAIA,SAAgB,eAAe;CAC7B,OAAOD,gBAAAA,cAAcI,2BAAAA,cAAc;AACrC;;;;AAKA,MAAM,kBACJ,GACA,MACY;CACZ,IAAI,MAAM,GAAG,OAAO;CACpB,IAAI,CAAC,KAAK,CAAC,GAAG,OAAO;CACrB,OACE,EAAE,QAAQ,EAAE,OACZ,EAAE,OAAO,MAAM,EAAE,OAAO,KACxB,EAAE,OAAO,MAAM,EAAE,OAAO,KACxB,EAAE,OAAO,UAAU,EAAE,OAAO,SAC5B,EAAE,OAAO,WAAW,EAAE,OAAO;AAEjC;;;;;;;;;;;;;AAsBA,SAAgB,cAAc,EAAE,UAAU,MAAM,GAAG,YAAY,SAA6B;CAC1F,MAAM,YAAYF,gBAAAA,YAAYE,2BAAAA,iBAAiB,MAAM,EAAE,YAAY,CAAC;CACpE,MAAM,SAASF,gBAAAA,YAAYE,2BAAAA,iBAAiB,MAAM,EAAE,WAAW,GAAG,cAAc;CAChF,IAAI,aAAa,CAAC,QAAQ,OAAO;CACjC,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,iBAAAA,UAAD;EAAkB;EAAmB;EAAgB;EAClD;CACO,CAAA;AAEd;;;;;;;;AAWA,SAAgB,mBAAmB,EAAE,aAAsC,CAAC,GAAG;CAC7E,MAAM,YAAYL,gBAAAA,cAAcI,2BAAAA,cAAc;CAC9C,CAAA,GAAA,MAAA,UAAA,QAAA,GAAA,cAAA,uBAAA,CAC+B,WAAW,aAAa,KAAA,IAAY,CAAC,IAAI,EAAE,SAAS,CAAC,GAClF,CAAC,WAAW,QAAQ,CACtB;CACA,OAAO;AACT"}

package/dist/selection.d.cts

@@ -1,3 +1,6 @@
+import { AnchoredPlacement as AnchoredPlacement$1 } from "./anchored.cjs";
+import * as React from "react";
+import { SelectionClipboardOptions, copySelection } from "@embedpdf/web";
 export * from "@embedpdf/plugin-selection";
 //#region src/selection.d.ts
 interface SelectionLayerProps {
@@ -5,8 +8,38 @@ interface SelectionLayerProps {
   color?: string;
 }
 declare function SelectionLayer({ color }: SelectionLayerProps): import("react/jsx-runtime").JSX.Element | null;
-/** The selection capability (clear(), hasSelection(), …) for app chrome. */
+/** The PUBLIC selection capability (select(), readText(), canCopy(), …) for
+ *  app chrome — toolbars, context menus, automation. */
 declare function useSelection(): import("@embedpdf/plugin-selection").SelectionCapability;
+interface SelectionMenuProps {
+  children: React.ReactNode;
+  /** Gap in screen px between the selection and the menu (default 8). */
+  gap?: number;
+  /** Where to place the menu relative to the selection. Default 'top'. */
+  placement?: AnchoredPlacement$1;
+}
+/**
+ * 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
+ * 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.
+ */
+declare function SelectionMenu({ children, gap, placement }: SelectionMenuProps): import("react/jsx-runtime").JSX.Element | null;
+type SelectionClipboardProps = Pick<SelectionClipboardOptions, 'prefetch'>;
+/**
+ * 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.
+ */
+declare function SelectionClipboard({ prefetch }?: SelectionClipboardProps): null;
 //#endregion
-export { SelectionLayer, SelectionLayerProps, useSelection };
+export { SelectionClipboard, SelectionClipboardProps, SelectionLayer, SelectionLayerProps, SelectionMenu, SelectionMenuProps, copySelection, useSelection };
 //# sourceMappingURL=selection.d.cts.map

package/dist/selection.d.ts

@@ -1,3 +1,6 @@
+import { AnchoredPlacement as AnchoredPlacement$1 } from "./anchored.js";
+import * as React from "react";
+import { SelectionClipboardOptions, copySelection } from "@embedpdf/web";
 export * from "@embedpdf/plugin-selection";
 //#region src/selection.d.ts
 interface SelectionLayerProps {
@@ -5,8 +8,38 @@ interface SelectionLayerProps {
   color?: string;
 }
 declare function SelectionLayer({ color }: SelectionLayerProps): import("react/jsx-runtime").JSX.Element | null;
-/** The selection capability (clear(), hasSelection(), …) for app chrome. */
+/** The PUBLIC selection capability (select(), readText(), canCopy(), …) for
+ *  app chrome — toolbars, context menus, automation. */
 declare function useSelection(): import("@embedpdf/plugin-selection").SelectionCapability;
+interface SelectionMenuProps {
+  children: React.ReactNode;
+  /** Gap in screen px between the selection and the menu (default 8). */
+  gap?: number;
+  /** Where to place the menu relative to the selection. Default 'top'. */
+  placement?: AnchoredPlacement$1;
+}
+/**
+ * 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
+ * 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.
+ */
+declare function SelectionMenu({ children, gap, placement }: SelectionMenuProps): import("react/jsx-runtime").JSX.Element | null;
+type SelectionClipboardProps = Pick<SelectionClipboardOptions, 'prefetch'>;
+/**
+ * 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.
+ */
+declare function SelectionClipboard({ prefetch }?: SelectionClipboardProps): null;
 //#endregion
-export { SelectionLayer, SelectionLayerProps, useSelection };
+export { SelectionClipboard, SelectionClipboardProps, SelectionLayer, SelectionLayerProps, SelectionMenu, SelectionMenuProps, copySelection, useSelection };
 //# sourceMappingURL=selection.d.ts.map

package/dist/selection.js

@@ -1,14 +1,17 @@
 import { shallowArray, useCapability, usePage, useSelector } from "./runtime.js";
+import { Anchored } from "./anchored.js";
 import { jsx } from "react/jsx-runtime";
 import { useEffect } from "react";
+import { copySelection, wireSelectionClipboard } from "@embedpdf/web";
 import { SelectionToken } from "@embedpdf/plugin-selection";
+import { SelectionToken as SelectionToken$1 } from "@embedpdf/plugin-selection/internal";
 export * from "@embedpdf/plugin-selection";
 //#region src/selection.tsx
 function SelectionLayer({ color = "rgba(33, 150, 243, 0.35)" }) {
 	const page = usePage();
-	const selection = useCapability(SelectionToken);
-	const segments = useSelector(SelectionToken, (c) => c.segmentsForPage(page.pon), shallowArray);
-	const visible = useSelector(SelectionToken, (c) => c.highlightVisible());
+	const selection = useCapability(SelectionToken$1);
+	const segments = useSelector(SelectionToken$1, (c) => c.segmentsForPage(page.pon), shallowArray);
+	const visible = useSelector(SelectionToken$1, (c) => c.highlightVisible());
 	useEffect(() => {
 		selection.ensurePage(page.pon);
 	}, [selection, page.pon]);
@@ -35,11 +38,55 @@ function SelectionLayer({ color = "rgba(33, 150, 243, 0.35)" }) {
 		})
 	});
 }
-/** The selection capability (clear(), hasSelection(), …) for app chrome. */
+/** The PUBLIC selection capability (select(), readText(), canCopy(), …) for
+*  app chrome — toolbars, context menus, automation. */
 function useSelection() {
 	return useCapability(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;
+};
+/**
+* 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
+* 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.
+*/
+function SelectionMenu({ children, gap = 8, placement = "top" }) {
+	const selecting = useSelector(SelectionToken, (c) => c.isSelecting());
+	const anchor = useSelector(SelectionToken, (c) => c.menuAnchor(), sameMenuAnchor);
+	if (selecting || !anchor) return null;
+	return /* @__PURE__ */ jsx(Anchored, {
+		anchor,
+		placement,
+		gap,
+		children
+	});
+}
+/**
+* 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.
+*/
+function SelectionClipboard({ prefetch } = {}) {
+	const selection = useCapability(SelectionToken);
+	useEffect(() => wireSelectionClipboard(selection, prefetch === void 0 ? {} : { prefetch }), [selection, prefetch]);
+	return null;
+}
 //#endregion
-export { SelectionLayer, useSelection };
+export { SelectionClipboard, SelectionLayer, SelectionMenu, copySelection, useSelection };
 
 //# sourceMappingURL=selection.js.map

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 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"}
+{"version":3,"file":"selection.js","names":["SelectionHostToken"],"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 * The layer resolves the HOST lens (`/internal`: geometry warming, the\n * highlight handshake) — the adapter is exactly what that entry exists for.\n * `useSelection()` hands app code the PUBLIC lens only.\n */\n\n// One-line-per-feature: registration travels with the UI.\nexport * from '@embedpdf/plugin-selection';\n// The clipboard side effect lives in @embedpdf/web (the plugin is DOM-free);\n// re-exported here so app code has one import for the whole feature.\nexport { copySelection } from '@embedpdf/web';\nimport * as React from 'react';\nimport { useEffect } from 'react';\nimport { SelectionToken, type SelectionMenuAnchor } from '@embedpdf/plugin-selection';\nimport { SelectionToken as SelectionHostToken } from '@embedpdf/plugin-selection/internal';\nimport { wireSelectionClipboard, type SelectionClipboardOptions } from '@embedpdf/web';\nimport { Anchored, type AnchoredPlacement } from './anchored';\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(SelectionHostToken);\n  const segments = useSelector(\n    SelectionHostToken,\n    (c) => c.segmentsForPage(page.pon),\n    shallowArray,\n  );\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(SelectionHostToken, (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  // (A no-op without doc.text.select — nothing warms, nothing renders.)\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 PUBLIC selection capability (select(), readText(), canCopy(), …) for\n *  app chrome — toolbars, context menus, automation. */\nexport function useSelection() {\n  return useCapability(SelectionToken);\n}\n\n/** Structural equality for the selection's menu anchor — keeps the menu from\n *  re-rendering on unrelated dispatches (the capability returns a fresh\n *  object each call). */\nconst sameMenuAnchor = (\n  a: SelectionMenuAnchor | null,\n  b: SelectionMenuAnchor | null,\n): boolean => {\n  if (a === b) return true;\n  if (!a || !b) return false;\n  return (\n    a.pon === b.pon &&\n    a.bounds.x === b.bounds.x &&\n    a.bounds.y === b.bounds.y &&\n    a.bounds.width === b.bounds.width &&\n    a.bounds.height === b.bounds.height\n  );\n};\n\nexport interface SelectionMenuProps {\n  children: React.ReactNode;\n  /** Gap in screen px between the selection and the menu (default 8). */\n  gap?: number;\n  /** Where to place the menu relative to the selection. Default 'top'. */\n  placement?: AnchoredPlacement;\n}\n\n/**\n * Floats over the current TEXT selection (one anchor regardless of\n * cross-page selection; it rides the gesture's end page) — and only once the\n * selection SETTLES: hidden while `isSelecting()` (mid-drag), it appears at\n * pointer-up; programmatic selections show immediately (born settled). Works\n * under `<Stage>` (mount in the overlay slot) and `<PageView>` alike — the\n * surface provides the projection. Compose the contents from hooks:\n * `useSelection()` for copy/clear, `useAnnotation()` for\n * `markupFromSelection('highlight')`, `copySelection` for the clipboard.\n * For live-follow UI during the drag, compose `<Anchored>` with\n * `menuAnchor()` yourself — the primitive carries no policy.\n */\nexport function SelectionMenu({ children, gap = 8, placement = 'top' }: SelectionMenuProps) {\n  const selecting = useSelector(SelectionToken, (c) => c.isSelecting());\n  const anchor = useSelector(SelectionToken, (c) => c.menuAnchor(), sameMenuAnchor);\n  if (selecting || !anchor) return null;\n  return (\n    <Anchored anchor={anchor} placement={placement} gap={gap}>\n      {children}\n    </Anchored>\n  );\n}\n\nexport type SelectionClipboardProps = Pick<SelectionClipboardOptions, 'prefetch'>;\n\n/**\n * Mount ONCE per viewer to wire clipboard copy: prefetches the selected text\n * when the selection settles, answers the native `copy` event synchronously,\n * and falls back to the async Clipboard API for ctrl/cmd+C when the page has\n * no DOM selection. Renders nothing. For a toolbar Copy button, call\n * `copySelection(useSelection())` from its click handler instead.\n */\nexport function SelectionClipboard({ prefetch }: SelectionClipboardProps = {}) {\n  const selection = useCapability(SelectionToken);\n  useEffect(\n    () => wireSelectionClipboard(selection, prefetch === undefined ? {} : { prefetch }),\n    [selection, prefetch],\n  );\n  return null;\n}\n"],"mappings":";;;;;;;;;AA+BA,SAAgB,eAAe,EAAE,QAAQ,8BAAmD;CAC1F,MAAM,OAAO,QAAQ;CACrB,MAAM,YAAY,cAAcA,gBAAkB;CAClD,MAAM,WAAW,YACfA,mBACC,MAAM,EAAE,gBAAgB,KAAK,GAAG,GACjC,YACF;CAGA,MAAM,UAAU,YAAYA,mBAAqB,MAAM,EAAE,iBAAiB,CAAC;CAK3E,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;;;AAIA,SAAgB,eAAe;CAC7B,OAAO,cAAc,cAAc;AACrC;;;;AAKA,MAAM,kBACJ,GACA,MACY;CACZ,IAAI,MAAM,GAAG,OAAO;CACpB,IAAI,CAAC,KAAK,CAAC,GAAG,OAAO;CACrB,OACE,EAAE,QAAQ,EAAE,OACZ,EAAE,OAAO,MAAM,EAAE,OAAO,KACxB,EAAE,OAAO,MAAM,EAAE,OAAO,KACxB,EAAE,OAAO,UAAU,EAAE,OAAO,SAC5B,EAAE,OAAO,WAAW,EAAE,OAAO;AAEjC;;;;;;;;;;;;;AAsBA,SAAgB,cAAc,EAAE,UAAU,MAAM,GAAG,YAAY,SAA6B;CAC1F,MAAM,YAAY,YAAY,iBAAiB,MAAM,EAAE,YAAY,CAAC;CACpE,MAAM,SAAS,YAAY,iBAAiB,MAAM,EAAE,WAAW,GAAG,cAAc;CAChF,IAAI,aAAa,CAAC,QAAQ,OAAO;CACjC,OACE,oBAAC,UAAD;EAAkB;EAAmB;EAAgB;EAClD;CACO,CAAA;AAEd;;;;;;;;AAWA,SAAgB,mBAAmB,EAAE,aAAsC,CAAC,GAAG;CAC7E,MAAM,YAAY,cAAc,cAAc;CAC9C,gBACQ,uBAAuB,WAAW,aAAa,KAAA,IAAY,CAAC,IAAI,EAAE,SAAS,CAAC,GAClF,CAAC,WAAW,QAAQ,CACtB;CACA,OAAO;AACT"}

package/dist/stage.cjs

@@ -1,6 +1,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_rolldown_runtime = require("./rolldown-runtime-DDXJien1.cjs");
 const require_runtime = require("./runtime.cjs");
+const require_anchored = require("./anchored.cjs");
 const require_interaction = require("./interaction.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");
 let react = require("react");
@@ -88,6 +89,34 @@ function Stage({ children, pageChrome, overlay, interaction = false, zoomGesture
 	const docId = require_runtime.useDocumentId();
 	const pages = require_runtime.useSelector(token, (c) => c.visiblePages());
 	const frame = require_runtime.useSelector(token, (c) => c.pageFrame(), (a, b) => a.top === b.top && a.right === b.right && a.bottom === b.bottom && a.left === b.left);
+	const projector = (0, react.useMemo)(() => ({
+		space: "overlay",
+		toScreen: (pon, rect) => stage.pageRectToScreen(pon, rect),
+		toScreenPoint: (pon, at) => {
+			const r = stage.pageRectToScreen(pon, {
+				x: at.x,
+				y: at.y,
+				width: 0,
+				height: 0
+			});
+			return r ? {
+				x: r.x,
+				y: r.y
+			} : null;
+		},
+		viewEnv: (pon) => {
+			const t = stage.pageRect(pon)?.transform;
+			return t ? {
+				scale: t.viewScale,
+				rotation: t.rotation,
+				zoom: t.zoom
+			} : null;
+		}
+	}), [stage]);
+	const projectorBinding = (0, react.useMemo)(() => ({
+		projector,
+		revision: pages
+	}), [projector, pages]);
 	(0, react.useEffect)(() => {
 		const el = ref.current;
 		const setVp = () => stage.setViewport({
@@ -255,7 +284,10 @@ function Stage({ children, pageChrome, overlay, interaction = false, zoomGesture
 			stage,
 			render: children,
 			chrome: pageChrome
-		}, p.pageIndex)), overlay]
+		}, p.pageIndex)), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_anchored.ProjectorProvider, {
+			value: projectorBinding,
+			children: overlay
+		})]
 	});
 }
 function useStage(token = _embedpdf_plugin_stage.StageToken) {