@embedpdf/react 3.0.0-next.1 → 3.0.0-next.10

package/dist/link.d.cts

@@ -1,7 +1,16 @@
 import * as React from "react";
-import { LinkNavItem } from "@embedpdf/plugin-link";
+import { LinkActivation, LinkCapability, LinkNavItem, PdfLinkTarget } from "@embedpdf/plugin-link";
 export * from "@embedpdf/plugin-link";
 //#region src/link.d.ts
+/**
+ * Resolve a target through the plugin and PERFORM the `uri` outcome — the ONE
+ * place in the codebase that turns a link target into a browser tab. The
+ * plugin owns resolution (goto → stage reveal, policy, analytics) and stays
+ * DOM-free; opening is this framework layer's job. Every click path — the nav
+ * anchors below, the selection menu's "Open link", the style editor's "Go to
+ * link" — goes through here, so none of them can drop the uri outcome again.
+ */
+declare function openLinkTarget(link: LinkCapability, target: PdfLinkTarget): LinkActivation;
 interface LinkLayerProps {
   /** Wrap or replace a link's native anchor (badging, custom tooltips). */
   renderLink?: (args: {
@@ -10,7 +19,7 @@ interface LinkLayerProps {
   }) => React.ReactNode | undefined;
 }
 declare function LinkLayer({ renderLink }?: LinkLayerProps): import("react/jsx-runtime").JSX.Element | null;
-declare function useLink(): import("@embedpdf/plugin-link").LinkCapability;
+declare function useLink(): LinkCapability;
 //#endregion
-export { LinkLayer, LinkLayerProps, useLink };
+export { LinkLayer, LinkLayerProps, openLinkTarget, useLink };
 //# sourceMappingURL=link.d.cts.map

package/dist/link.d.ts

@@ -1,7 +1,16 @@
 import * as React from "react";
-import { LinkNavItem } from "@embedpdf/plugin-link";
+import { LinkActivation, LinkCapability, LinkNavItem, PdfLinkTarget } from "@embedpdf/plugin-link";
 export * from "@embedpdf/plugin-link";
 //#region src/link.d.ts
+/**
+ * Resolve a target through the plugin and PERFORM the `uri` outcome — the ONE
+ * place in the codebase that turns a link target into a browser tab. The
+ * plugin owns resolution (goto → stage reveal, policy, analytics) and stays
+ * DOM-free; opening is this framework layer's job. Every click path — the nav
+ * anchors below, the selection menu's "Open link", the style editor's "Go to
+ * link" — goes through here, so none of them can drop the uri outcome again.
+ */
+declare function openLinkTarget(link: LinkCapability, target: PdfLinkTarget): LinkActivation;
 interface LinkLayerProps {
   /** Wrap or replace a link's native anchor (badging, custom tooltips). */
   renderLink?: (args: {
@@ -10,7 +19,7 @@ interface LinkLayerProps {
   }) => React.ReactNode | undefined;
 }
 declare function LinkLayer({ renderLink }?: LinkLayerProps): import("react/jsx-runtime").JSX.Element | null;
-declare function useLink(): import("@embedpdf/plugin-link").LinkCapability;
+declare function useLink(): LinkCapability;
 //#endregion
-export { LinkLayer, LinkLayerProps, useLink };
+export { LinkLayer, LinkLayerProps, openLinkTarget, useLink };
 //# sourceMappingURL=link.d.ts.map

package/dist/link.js

@@ -1,19 +1,37 @@
-import { shallowArray, useCapability, usePage, useSelector } from "./runtime.js";
+import "./rolldown-runtime-BBjsoOtd.js";
+import { shallowArray, useCapability, useOptionalSelector, usePage, useSelector } from "./runtime.js";
 import { jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { useEffect } from "react";
 import { sanitizeExternalUri } from "@embedpdf/web";
+import { InteractionToken } from "@embedpdf/plugin-interaction";
 import { LinkToken } from "@embedpdf/plugin-link";
 export * from "@embedpdf/plugin-link";
 //#region src/link.tsx
+/**
+* Resolve a target through the plugin and PERFORM the `uri` outcome — the ONE
+* place in the codebase that turns a link target into a browser tab. The
+* plugin owns resolution (goto → stage reveal, policy, analytics) and stays
+* DOM-free; opening is this framework layer's job. Every click path — the nav
+* anchors below, the selection menu's "Open link", the style editor's "Go to
+* link" — goes through here, so none of them can drop the uri outcome again.
+*/
+function openLinkTarget(link, target) {
+	const activation = link.activate(target);
+	if (activation.outcome === "uri") {
+		const href = sanitizeExternalUri(activation.uri);
+		if (href && typeof window !== "undefined") window.open(href, "_blank", "noopener,noreferrer");
+	}
+	return activation;
+}
 /** Content rect → view px (the page wrapper's own space) — the same idiom as
 *  the annotation and form layers: never re-derive `x * scale`. */
 function boxOf(item, page) {
-	const tl = page.transform.pageToContent({
+	const tl = page.transform.toPixels({
 		x: item.rect.x,
 		y: item.rect.y
 	});
-	const br = page.transform.pageToContent({
+	const br = page.transform.toPixels({
 		x: item.rect.x + item.rect.width,
 		y: item.rect.y + item.rect.height
 	});
@@ -39,20 +57,24 @@ function LinkLayer({ renderLink } = {}) {
 	const link = useCapability(LinkToken);
 	const items = useSelector(LinkToken, (c) => c.linksOn(page.pon), shallowArray);
 	const engaged = useSelector(LinkToken, (c) => c.engaged());
+	const editEnabled = useOptionalSelector(InteractionToken, (c) => c.activeTool()?.enables.has("annotation-edit") ?? false, false);
 	useEffect(() => {
 		link.ensurePage(page.pon);
 	}, [link, page.pon]);
 	if (!engaged || !items.length) return null;
+	const visible = editEnabled ? items.filter((i) => !i.attached) : items;
+	if (!visible.length) return null;
 	return /* @__PURE__ */ jsx("div", {
 		style: {
 			position: "absolute",
 			inset: 0,
 			pointerEvents: "none"
 		},
-		children: items.map((item) => {
+		children: visible.map((item) => {
 			const box = boxOf(item, page);
+			const href = item.target.kind === "uri" ? sanitizeExternalUri(item.target.uri) : null;
 			const native = /* @__PURE__ */ jsx("a", {
-				href: (item.target.kind === "uri" ? sanitizeExternalUri(item.target.uri) : null) ?? void 0,
+				href: href ?? void 0,
 				target: "_blank",
 				rel: "noopener noreferrer",
 				role: "link",
@@ -61,13 +83,14 @@ function LinkLayer({ renderLink } = {}) {
 				"aria-label": labelOf(item),
 				onClick: (e) => {
 					if (e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;
+					if (href) return;
 					e.preventDefault();
-					link.activate(item.target);
+					openLinkTarget(link, item.target);
 				},
 				onKeyDown: (e) => {
 					if (e.key === "Enter" || e.key === " ") {
 						e.preventDefault();
-						link.activate(item.target);
+						openLinkTarget(link, item.target);
 					}
 				},
 				onPointerDown: (e) => e.stopPropagation(),
@@ -93,6 +116,6 @@ function useLink() {
 	return useCapability(LinkToken);
 }
 //#endregion
-export { LinkLayer, useLink };
+export { LinkLayer, openLinkTarget, useLink };
 
 //# sourceMappingURL=link.js.map

package/dist/link.js.map

@@ -1 +1 @@
-{"version":3,"file":"link.js","names":[],"sources":["../src/link.tsx"],"sourcesContent":["/**\n * The React view of @embedpdf/plugin-link — the navigation plane's paint.\n *\n * One absolutely-positioned <a> per clickable link area, real anchors on\n * purpose: URIs get an `href` (middle-click, copy-link, status-bar preview\n * and keyboard focus for free), internal destinations activate through the\n * plugin (stage reveal). The layer stands down entirely while the active\n * tool doesn't enable `link-nav` — the annotation plane owns links then\n * (select / move / resize / retarget through the selection editor).\n */\n\n// One-line-per-feature: registration travels with the UI.\nexport * from '@embedpdf/plugin-link';\nimport * as React from 'react';\nimport { useEffect } from 'react';\nimport { LinkToken, type LinkNavItem } from '@embedpdf/plugin-link';\nimport { sanitizeExternalUri } from '@embedpdf/web';\n\nimport { shallowArray, useCapability, usePage, useSelector } from './runtime';\nimport type { PageContextValue } from './runtime';\n\n/** Content rect → view px (the page wrapper's own space) — the same idiom as\n *  the annotation and form layers: never re-derive `x * scale`. */\nfunction boxOf(item: LinkNavItem, page: PageContextValue) {\n  const tl = page.transform.pageToContent({ x: item.rect.x, y: item.rect.y });\n  const br = page.transform.pageToContent({\n    x: item.rect.x + item.rect.width,\n    y: item.rect.y + item.rect.height,\n  });\n  return { left: tl.x, top: tl.y, width: br.x - tl.x, height: br.y - tl.y };\n}\n\n/** A human label for the hover tooltip. Apps with i18n render their own via\n *  `renderLink`; this is the sensible default. */\nfunction labelOf(item: LinkNavItem): string {\n  switch (item.target.kind) {\n    case 'uri':\n      return item.target.uri;\n    case 'goto':\n      return 'Go to destination';\n    case 'named':\n      return item.target.name;\n    default:\n      return 'Link';\n  }\n}\n\nexport interface LinkLayerProps {\n  /** Wrap or replace a link's native anchor (badging, custom tooltips). */\n  renderLink?: (args: {\n    item: LinkNavItem;\n    nativeComponent: React.ReactNode;\n  }) => React.ReactNode | undefined;\n}\n\nexport function LinkLayer({ renderLink }: LinkLayerProps = {}) {\n  const page = usePage();\n  const link = useCapability(LinkToken);\n  const items = useSelector(LinkToken, (c) => c.linksOn(page.pon), shallowArray);\n  const engaged = useSelector(LinkToken, (c) => c.engaged());\n\n  useEffect(() => {\n    link.ensurePage(page.pon);\n  }, [link, page.pon]);\n\n  // An authoring tool is active → the annotation plane owns links (they're\n  // plain editable rects there); no nav anchors, no swallowed pointer events.\n  if (!engaged || !items.length) return null;\n\n  return (\n    <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none' }}>\n      {items.map((item) => {\n        const box = boxOf(item, page);\n        // Real href ONLY for sanitized external URIs; blocked schemes and\n        // internal targets activate through the plugin instead.\n        const href = item.target.kind === 'uri' ? sanitizeExternalUri(item.target.uri) : null;\n        const native = (\n          <a\n            href={href ?? undefined}\n            target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            role=\"link\"\n            tabIndex={0}\n            title={labelOf(item)}\n            aria-label={labelOf(item)}\n            onClick={(e) => {\n              // Plain left-click activates through the plugin (stage reveal /\n              // policy / analytics). Modified clicks and middle-clicks on a\n              // real href keep their native browser behaviour.\n              if (e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;\n              e.preventDefault();\n              link.activate(item.target);\n            }}\n            onKeyDown={(e) => {\n              if (e.key === 'Enter' || e.key === ' ') {\n                e.preventDefault();\n                link.activate(item.target);\n              }\n            }}\n            // Keep the hub out of it: a down inside the anchor must not reach\n            // the Stage's native listener (same isolation idiom as FreeText).\n            onPointerDown={(e) => e.stopPropagation()}\n            style={{\n              position: 'absolute',\n              left: box.left,\n              top: box.top,\n              width: box.width,\n              height: box.height,\n              cursor: 'pointer',\n              pointerEvents: 'auto',\n            }}\n          />\n        );\n        const out = renderLink?.({ item, nativeComponent: native }) ?? native;\n        return <React.Fragment key={item.id}>{out}</React.Fragment>;\n      })}\n    </div>\n  );\n}\n\nexport function useLink() {\n  return useCapability(LinkToken);\n}\n"],"mappings":";;;;;;;;;;AAuBA,SAAS,MAAM,MAAmB,MAAwB;CACxD,MAAM,KAAK,KAAK,UAAU,cAAc;EAAE,GAAG,KAAK,KAAK;EAAG,GAAG,KAAK,KAAK;CAAE,CAAC;CAC1E,MAAM,KAAK,KAAK,UAAU,cAAc;EACtC,GAAG,KAAK,KAAK,IAAI,KAAK,KAAK;EAC3B,GAAG,KAAK,KAAK,IAAI,KAAK,KAAK;CAC7B,CAAC;CACD,OAAO;EAAE,MAAM,GAAG;EAAG,KAAK,GAAG;EAAG,OAAO,GAAG,IAAI,GAAG;EAAG,QAAQ,GAAG,IAAI,GAAG;CAAE;AAC1E;;;AAIA,SAAS,QAAQ,MAA2B;CAC1C,QAAQ,KAAK,OAAO,MAApB;EACE,KAAK,OACH,OAAO,KAAK,OAAO;EACrB,KAAK,QACH,OAAO;EACT,KAAK,SACH,OAAO,KAAK,OAAO;EACrB,SACE,OAAO;CACX;AACF;AAUA,SAAgB,UAAU,EAAE,eAA+B,CAAC,GAAG;CAC7D,MAAM,OAAO,QAAQ;CACrB,MAAM,OAAO,cAAc,SAAS;CACpC,MAAM,QAAQ,YAAY,YAAY,MAAM,EAAE,QAAQ,KAAK,GAAG,GAAG,YAAY;CAC7E,MAAM,UAAU,YAAY,YAAY,MAAM,EAAE,QAAQ,CAAC;CAEzD,gBAAgB;EACd,KAAK,WAAW,KAAK,GAAG;CAC1B,GAAG,CAAC,MAAM,KAAK,GAAG,CAAC;CAInB,IAAI,CAAC,WAAW,CAAC,MAAM,QAAQ,OAAO;CAEtC,OACE,oBAAC,OAAD;EAAK,OAAO;GAAE,UAAU;GAAY,OAAO;GAAG,eAAe;EAAO;EACjE,UAAA,MAAM,KAAK,SAAS;GACnB,MAAM,MAAM,MAAM,MAAM,IAAI;GAI5B,MAAM,SACJ,oBAAC,KAAD;IACE,OAHS,KAAK,OAAO,SAAS,QAAQ,oBAAoB,KAAK,OAAO,GAAG,IAAI,SAG/D,KAAA;IACd,QAAO;IACP,KAAI;IACJ,MAAK;IACL,UAAU;IACV,OAAO,QAAQ,IAAI;IACnB,cAAY,QAAQ,IAAI;IACxB,UAAU,MAAM;KAId,IAAI,EAAE,WAAW,EAAE,WAAW,EAAE,YAAY,EAAE,QAAQ;KACtD,EAAE,eAAe;KACjB,KAAK,SAAS,KAAK,MAAM;IAC3B;IACA,YAAY,MAAM;KAChB,IAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;MACtC,EAAE,eAAe;MACjB,KAAK,SAAS,KAAK,MAAM;KAC3B;IACF;IAGA,gBAAgB,MAAM,EAAE,gBAAgB;IACxC,OAAO;KACL,UAAU;KACV,MAAM,IAAI;KACV,KAAK,IAAI;KACT,OAAO,IAAI;KACX,QAAQ,IAAI;KACZ,QAAQ;KACR,eAAe;IACjB;GACD,CAAA;GAEH,MAAM,MAAM,aAAa;IAAE;IAAM,iBAAiB;GAAO,CAAC,KAAK;GAC/D,OAAO,oBAAC,MAAM,UAAP,EAAA,UAA+B,IAAoB,GAA9B,KAAK,EAAyB;EAC5D,CAAC;CACE,CAAA;AAET;AAEA,SAAgB,UAAU;CACxB,OAAO,cAAc,SAAS;AAChC"}
+{"version":3,"file":"link.js","names":[],"sources":["../src/link.tsx"],"sourcesContent":["/**\n * The React view of @embedpdf/plugin-link — the navigation plane's paint.\n *\n * One absolutely-positioned <a> per clickable link area, real anchors on\n * purpose: URIs get an `href` (middle-click, copy-link, status-bar preview\n * and keyboard focus for free), internal destinations activate through the\n * plugin (stage reveal). The layer stands down entirely while the active\n * tool doesn't enable `link-nav` — the annotation plane owns links then\n * (select / move / resize / retarget through the selection editor).\n */\n\n// One-line-per-feature: registration travels with the UI.\nexport * from '@embedpdf/plugin-link';\nimport * as React from 'react';\nimport { useEffect } from 'react';\nimport { InteractionToken } from '@embedpdf/plugin-interaction';\nimport {\n  LinkToken,\n  type LinkActivation,\n  type LinkCapability,\n  type LinkNavItem,\n  type PdfLinkTarget,\n} from '@embedpdf/plugin-link';\nimport { sanitizeExternalUri } from '@embedpdf/web';\n\nimport {\n  shallowArray,\n  useCapability,\n  useOptionalSelector,\n  usePage,\n  useSelector,\n} from './runtime';\nimport type { PageContextValue } from './runtime';\n\n/**\n * Resolve a target through the plugin and PERFORM the `uri` outcome — the ONE\n * place in the codebase that turns a link target into a browser tab. The\n * plugin owns resolution (goto → stage reveal, policy, analytics) and stays\n * DOM-free; opening is this framework layer's job. Every click path — the nav\n * anchors below, the selection menu's \"Open link\", the style editor's \"Go to\n * link\" — goes through here, so none of them can drop the uri outcome again.\n */\nexport function openLinkTarget(link: LinkCapability, target: PdfLinkTarget): LinkActivation {\n  const activation = link.activate(target);\n  if (activation.outcome === 'uri') {\n    const href = sanitizeExternalUri(activation.uri);\n    if (href && typeof window !== 'undefined') window.open(href, '_blank', 'noopener,noreferrer');\n  }\n  return activation;\n}\n\n/** Content rect → view px (the page wrapper's own space) — the same idiom as\n *  the annotation and form layers: never re-derive `x * scale`. */\nfunction boxOf(item: LinkNavItem, page: PageContextValue) {\n  const tl = page.transform.toPixels({ x: item.rect.x, y: item.rect.y });\n  const br = page.transform.toPixels({\n    x: item.rect.x + item.rect.width,\n    y: item.rect.y + item.rect.height,\n  });\n  return { left: tl.x, top: tl.y, width: br.x - tl.x, height: br.y - tl.y };\n}\n\n/** A human label for the hover tooltip. Apps with i18n render their own via\n *  `renderLink`; this is the sensible default. */\nfunction labelOf(item: LinkNavItem): string {\n  switch (item.target.kind) {\n    case 'uri':\n      return item.target.uri;\n    case 'goto':\n      return 'Go to destination';\n    case 'named':\n      return item.target.name;\n    default:\n      return 'Link';\n  }\n}\n\nexport interface LinkLayerProps {\n  /** Wrap or replace a link's native anchor (badging, custom tooltips). */\n  renderLink?: (args: {\n    item: LinkNavItem;\n    nativeComponent: React.ReactNode;\n  }) => React.ReactNode | undefined;\n}\n\nexport function LinkLayer({ renderLink }: LinkLayerProps = {}) {\n  const page = usePage();\n  const link = useCapability(LinkToken);\n  const items = useSelector(LinkToken, (c) => c.linksOn(page.pon), shallowArray);\n  const engaged = useSelector(LinkToken, (c) => c.engaged());\n  // One owner per pixel: an ATTACHED link is a property of its parent — while\n  // the active tool can edit annotations, the parent owns those pixels and\n  // the anchor stands down (select/move/resize work; no tooltip, no swallowed\n  // pointer). Standalone document links navigate under any link-nav tool.\n  const editEnabled = useOptionalSelector(\n    InteractionToken,\n    (c) => c.activeTool()?.enables.has('annotation-edit') ?? false,\n    false,\n  );\n\n  useEffect(() => {\n    link.ensurePage(page.pon);\n  }, [link, page.pon]);\n\n  // An authoring tool is active → the annotation plane owns links (they're\n  // plain editable rects there); no nav anchors, no swallowed pointer events.\n  if (!engaged || !items.length) return null;\n  const visible = editEnabled ? items.filter((i) => !i.attached) : items;\n  if (!visible.length) return null;\n\n  return (\n    <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none' }}>\n      {visible.map((item) => {\n        const box = boxOf(item, page);\n        // Real href ONLY for sanitized external URIs; blocked schemes and\n        // internal targets activate through the plugin instead.\n        const href = item.target.kind === 'uri' ? sanitizeExternalUri(item.target.uri) : null;\n        const native = (\n          <a\n            href={href ?? undefined}\n            target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            role=\"link\"\n            tabIndex={0}\n            title={labelOf(item)}\n            aria-label={labelOf(item)}\n            onClick={(e) => {\n              // Modified clicks and middle-clicks on a real href keep their\n              // native browser behaviour (new tab / copy link).\n              if (e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;\n              // A plain left-click on a real href: let the anchor be an\n              // anchor — native navigation, target=_blank, status bar. Only\n              // non-href targets (goto / named / blocked schemes) route\n              // through the plugin, whose uri outcome the opener PERFORMS\n              // (the old code preventDefault-ed AND dropped the outcome, so\n              // clicking a URL link did nothing at all).\n              if (href) return;\n              e.preventDefault();\n              openLinkTarget(link, item.target);\n            }}\n            onKeyDown={(e) => {\n              if (e.key === 'Enter' || e.key === ' ') {\n                e.preventDefault();\n                openLinkTarget(link, item.target);\n              }\n            }}\n            // Keep the hub out of it: a down inside the anchor must not reach\n            // the Stage's native listener (same isolation idiom as FreeText).\n            onPointerDown={(e) => e.stopPropagation()}\n            style={{\n              position: 'absolute',\n              left: box.left,\n              top: box.top,\n              width: box.width,\n              height: box.height,\n              cursor: 'pointer',\n              pointerEvents: 'auto',\n            }}\n          />\n        );\n        const out = renderLink?.({ item, nativeComponent: native }) ?? native;\n        return <React.Fragment key={item.id}>{out}</React.Fragment>;\n      })}\n    </div>\n  );\n}\n\nexport function useLink() {\n  return useCapability(LinkToken);\n}\n"],"mappings":"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"}

package/dist/metadata.js

@@ -1,3 +1,4 @@
+import "./rolldown-runtime-BBjsoOtd.js";
 import { useCapability, useSelector } from "./runtime.js";
 import { MetadataToken } from "@embedpdf/plugin-metadata";
 export * from "@embedpdf/plugin-metadata";

package/dist/metadata.js.map

@@ -1 +1 @@
-{"version":3,"file":"metadata.js","names":[],"sources":["../src/metadata.ts"],"sourcesContent":["import { MetadataToken } from '@embedpdf/plugin-metadata';\nimport type { DocumentMetadata, MetadataPatch } from '@embedpdf/core';\nimport { useCapability, useSelector } from './runtime';\n\n/**\n * The document's metadata, bound to the surrounding `DocumentScope`. Reactive:\n * `metadata` updates from your own edits AND from remote (SSE) edits — the\n * plugin keeps it live off the document event stream.\n *\n *   const { metadata, update } = useMetadata();\n *   await update({ title: 'New title' }); // three-state patch; writes to the layer\n */\n\n// One-line-per-feature: registration travels with the UI.\nexport * from '@embedpdf/plugin-metadata';\nexport function useMetadata(): {\n  metadata: DocumentMetadata | null;\n  update: (patch: MetadataPatch) => Promise<void>;\n  canEdit: () => boolean;\n} {\n  const cap = useCapability(MetadataToken);\n  const metadata = useSelector(MetadataToken, (c) => c.current());\n  return { metadata, update: cap.update, canEdit: cap.canEdit };\n}\n"],"mappings":";;;;AAeA,SAAgB,cAId;CACA,MAAM,MAAM,cAAc,aAAa;CAEvC,OAAO;EAAE,UADQ,YAAY,gBAAgB,MAAM,EAAE,QAAQ,CAC7C;EAAG,QAAQ,IAAI;EAAQ,SAAS,IAAI;CAAQ;AAC9D"}
+{"version":3,"file":"metadata.js","names":[],"sources":["../src/metadata.ts"],"sourcesContent":["import { MetadataToken } from '@embedpdf/plugin-metadata';\nimport type { DocumentMetadata, MetadataPatch } from '@embedpdf/core';\nimport { useCapability, useSelector } from './runtime';\n\n/**\n * The document's metadata, bound to the surrounding `DocumentScope`. Reactive:\n * `metadata` updates from your own edits AND from remote (SSE) edits — the\n * plugin keeps it live off the document event stream.\n *\n *   const { metadata, update } = useMetadata();\n *   await update({ title: 'New title' }); // three-state patch; writes to the layer\n */\n\n// One-line-per-feature: registration travels with the UI.\nexport * from '@embedpdf/plugin-metadata';\nexport function useMetadata(): {\n  metadata: DocumentMetadata | null;\n  update: (patch: MetadataPatch) => Promise<void>;\n  canEdit: () => boolean;\n} {\n  const cap = useCapability(MetadataToken);\n  const metadata = useSelector(MetadataToken, (c) => c.current());\n  return { metadata, update: cap.update, canEdit: cap.canEdit };\n}\n"],"mappings":";;;;;AAeA,SAAgB,cAId;CACA,MAAM,MAAM,cAAc,aAAa;CAEvC,OAAO;EAAE,UADQ,YAAY,gBAAgB,MAAM,EAAE,QAAQ,CAC7C;EAAG,QAAQ,IAAI;EAAQ,SAAS,IAAI;CAAQ;AAC9D"}

package/dist/page-edit.js

@@ -1,3 +1,4 @@
+import "./rolldown-runtime-BBjsoOtd.js";
 import { useCapability } from "./runtime.js";
 import { PageEditToken } from "@embedpdf/plugin-page-edit";
 export * from "@embedpdf/plugin-page-edit";

package/dist/page-edit.js.map

@@ -1 +1 @@
-{"version":3,"file":"page-edit.js","names":[],"sources":["../src/page-edit.ts"],"sourcesContent":["import { PageEditToken, type PageEditCapability } from '@embedpdf/plugin-page-edit';\nimport { useCapability } from './runtime';\n\n/**\n * The page-edit capability, bound to the surrounding `DocumentScope`.\n *\n * Thin idiomatic wrapper over `PageEditToken` — the relative→absolute rotation\n * and PON addressing live in the plugin, so this hook (and its Vue/Svelte/\n * Angular siblings) is pure binding sugar with no logic to drift.\n *\n *   const editor = usePageEditor();\n *   editor.rotateBy(page.pon, 90);\n *   if (editor.canEdit()) { … }\n */\n\n// One-line-per-feature: registration travels with the UI.\nexport * from '@embedpdf/plugin-page-edit';\nexport function usePageEditor(): PageEditCapability {\n  return useCapability(PageEditToken);\n}\n"],"mappings":";;;;AAiBA,SAAgB,gBAAoC;CAClD,OAAO,cAAc,aAAa;AACpC"}
+{"version":3,"file":"page-edit.js","names":[],"sources":["../src/page-edit.ts"],"sourcesContent":["import { PageEditToken, type PageEditCapability } from '@embedpdf/plugin-page-edit';\nimport { useCapability } from './runtime';\n\n/**\n * The page-edit capability, bound to the surrounding `DocumentScope`.\n *\n * Thin idiomatic wrapper over `PageEditToken` — the relative→absolute rotation\n * and PON addressing live in the plugin, so this hook (and its Vue/Svelte/\n * Angular siblings) is pure binding sugar with no logic to drift.\n *\n *   const editor = usePageEditor();\n *   editor.rotateBy(page.pon, 90);\n *   if (editor.canEdit()) { … }\n */\n\n// One-line-per-feature: registration travels with the UI.\nexport * from '@embedpdf/plugin-page-edit';\nexport function usePageEditor(): PageEditCapability {\n  return useCapability(PageEditToken);\n}\n"],"mappings":";;;;;AAiBA,SAAgB,gBAAoC;CAClD,OAAO,cAAc,aAAa;AACpC"}

package/dist/page-view.cjs

@@ -1,9 +1,11 @@
 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_core_geometry = require("@embedpdf/core-geometry");
 //#region src/page-view.tsx
 /**
@@ -12,8 +14,10 @@ let _embedpdf_core_geometry = require("@embedpdf/core-geometry");
 * Same layers + rotation + chrome frame as a `<Stage>` page, but no
 * camera/scroll/zoom and, crucially, NO dependency on `@embedpdf/plugin-stage`.
 * It builds its own `PageTransform` from a target content width and shares the
-* exact `PageContext` seam, so every layer (RenderLayer, AnnotationLayer,
-* PageAnnotationMenu, …) works here identically.
+* exact `PageContext` seam, so every layer (RenderLayer, AnnotationLayer, …)
+* works here identically — and it provides the measured `ViewProjector`, so
+* anchored UI (`<AnnotationMenu>`, `<SelectionMenu>`) works here too, portalled
+* and clipping-immune.
 */
 /** A single page surface with NO Stage — same layers + rotation + chrome frame,
 *  no camera/scroll/zoom. */
@@ -47,13 +51,30 @@ function PageView({ page, documentId, width = 240, pageFrame = _embedpdf_core_ge
 		width,
 		dpr
 	]);
-	const ctx = (0, react.useMemo)(() => require_runtime.makePageContext(docId ?? "", pon, page, pageFrame, transform, () => ref.current.getBoundingClientRect()), [
+	const viewId = (0, react.useId)();
+	const ctx = (0, react.useMemo)(() => require_runtime.makePageContext(docId ?? "", `page-view:${viewId}`, pon, page, pageFrame, transform, () => ref.current.getBoundingClientRect()), [
 		docId,
 		pon,
 		page,
 		pageFrame,
-		transform
+		transform,
+		viewId
 	]);
+	const projector = (0, react.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 = (0, react.useMemo)(() => ({
+		projector,
+		revision: ctx,
+		subscribe: _embedpdf_web.observeClientGeometry
+	}), [projector, ctx]);
 	if (!docId || !meta || !base) return null;
 	const t = transform;
 	const outerW = t.viewWidth + pageFrame.left + pageFrame.right;
@@ -62,41 +83,44 @@ function PageView({ page, documentId, width = 240, pageFrame = _embedpdf_core_ge
 	const contentTop = pageFrame.top + (t.viewHeight - t.contentHeight) / 2;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_runtime.DocumentScope, {
 		id: docId,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			style: {
-				position: "relative",
-				width: outerW,
-				height: outerH,
-				...style
-			},
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_runtime.PageProvider, {
-				value: ctx,
-				children: [
-					/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("div", {
-						ref,
-						style: {
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_anchored.ProjectorProvider, {
+			value: projectorBinding,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				style: {
+					position: "relative",
+					width: outerW,
+					height: outerH,
+					...style
+				},
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_runtime.PageProvider, {
+					value: ctx,
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.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: "var(--epdf-page-shadow, 0 6px 18px rgba(0,0,0,.18))"
+						} }),
+						/* @__PURE__ */ (0, react_jsx_runtime.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.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"page-view.cjs","names":["NO_FRAME","useKernel","useActiveDocumentId","makePageContext","DocumentScope","PageProvider"],"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,YAAYA,wBAAAA,UACZ,UACA,YACA,SACgB;CAChB,MAAM,SAASC,gBAAAA,UAAU;CACzB,MAAM,SAASC,gBAAAA,oBAAoB;CACnC,MAAM,OAAA,GAAA,MAAA,OAAA,CAA6B,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,aAAA,GAAA,MAAA,QAAA,QAAA,GAAA,wBAAA,cAAA,CAEY;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,OAAA,GAAA,MAAA,QAAA,OAEFC,gBAAAA,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,iBAAA,GAAA,kBAAA,IAAA,CAACC,gBAAAA,eAAD;EAAe,IAAI;EACjB,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;GAAK,OAAO;IAAE,UAAU;IAAY,OAAO;IAAQ,QAAQ;IAAQ,GAAG;GAAM;GAC1E,UAAA,iBAAA,GAAA,kBAAA,KAAA,CAACC,gBAAAA,cAAD;IAAc,OAAO;IAArB,UAAA;KAEE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD,EACE,OAAO;MACL,UAAU;MACV,MAAM,UAAU;MAChB,KAAK,UAAU;MACf,OAAO,EAAE;MACT,QAAQ,EAAE;MACV,WAAW;KACb,EACD,CAAA;KAED,iBAAA,GAAA,kBAAA,IAAA,CAAC,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.cjs","names":["NO_FRAME","useKernel","useActiveDocumentId","makePageContext","observeClientGeometry","DocumentScope","ProjectorProvider","PageProvider"],"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 { useId, 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  // This instance's VIEW identity: two PageViews of the same page (a compare\n  // strip) must plan rasters independently, like two stage lenses do.\n  const viewId = useId();\n  const ctx = useMemo(\n    () =>\n      makePageContext(\n        docId ?? '',\n        `page-view:${viewId}`,\n        pon,\n        page,\n        pageFrame,\n        transform,\n        () => ref.current!.getBoundingClientRect(),\n      ),\n    [docId, pon, page, pageFrame, transform, viewId],\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: 'var(--epdf-page-shadow, 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":"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"}

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 { useId, 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,
@@ -35,13 +37,30 @@ function PageView({ page, documentId, width = 240, pageFrame = NO_FRAME, childre
 		width,
 		dpr
 	]);
-	const ctx = useMemo(() => makePageContext(docId ?? "", pon, page, pageFrame, transform, () => ref.current.getBoundingClientRect()), [
+	const viewId = useId();
+	const ctx = useMemo(() => makePageContext(docId ?? "", `page-view:${viewId}`, pon, page, pageFrame, transform, () => ref.current.getBoundingClientRect()), [
 		docId,
 		pon,
 		page,
 		pageFrame,
-		transform
+		transform,
+		viewId
 	]);
+	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 +69,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: "var(--epdf-page-shadow, 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 { useId, 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  // This instance's VIEW identity: two PageViews of the same page (a compare\n  // strip) must plan rasters independently, like two stage lenses do.\n  const viewId = useId();\n  const ctx = useMemo(\n    () =>\n      makePageContext(\n        docId ?? '',\n        `page-view:${viewId}`,\n        pon,\n        page,\n        pageFrame,\n        transform,\n        () => ref.current!.getBoundingClientRect(),\n      ),\n    [docId, pon, page, pageFrame, transform, viewId],\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: 'var(--epdf-page-shadow, 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;CAGA,MAAM,SAAS,MAAM;CACrB,MAAM,MAAM,cAER,gBACE,SAAS,IACT,aAAa,UACb,KACA,MACA,WACA,iBACM,IAAI,QAAS,sBAAsB,CAC3C,GACF;EAAC;EAAO;EAAK;EAAM;EAAW;EAAW;CAAM,CACjD;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/redaction.js

@@ -1,3 +1,4 @@
+import "./rolldown-runtime-BBjsoOtd.js";
 import { useCapability, useSelector } from "./runtime.js";
 import { RedactionToken } from "@embedpdf/plugin-redaction";
 export * from "@embedpdf/plugin-redaction";

package/dist/redaction.js.map

@@ -1 +1 @@
-{"version":3,"file":"redaction.js","names":[],"sources":["../src/redaction.tsx"],"sourcesContent":["import { RedactionToken } from '@embedpdf/plugin-redaction';\nimport type {\n  RedactionApplyResult,\n  RedactionCapability,\n  RedactionPendingItem,\n} from '@embedpdf/plugin-redaction';\nimport { useCapability, useSelector } from './runtime';\n\n/**\n * Redaction for the surrounding `DocumentScope`: the pending-marks view plus\n * the destructive apply. Marking rides the annotation plane (the composed\n * `redact` tool); `useRedaction` surfaces the workflow around it.\n *\n *   const redaction = useRedaction();\n *   redaction.toggleRedact();\n *   await redaction.applyAll();          // irreversible — confirm first\n */\n\n// One-line-per-feature: registration travels with the UI.\nexport * from '@embedpdf/plugin-redaction';\n\nexport function useRedaction(): RedactionCapability & {\n  applying: boolean;\n  lastApplyResult: RedactionApplyResult | null;\n} {\n  const cap = useCapability(RedactionToken);\n  const applying = useSelector(RedactionToken, (c) => c.isApplying());\n  const lastApplyResult = useSelector(RedactionToken, (c) => c.lastResult());\n  return { ...cap, applying, lastApplyResult };\n}\n\n/** The pending marks, reactive against the annotation plane. Note the view\n *  covers LOADED pages — call `preparePending()` (e.g. on panel open) to load\n *  the whole document. */\nexport function usePendingRedactions(): RedactionPendingItem[] {\n  return useSelector(RedactionToken, (c) => c.getPending(), pendingEqual);\n}\n\nconst pendingEqual = (a: RedactionPendingItem[], b: RedactionPendingItem[]): boolean =>\n  a.length === b.length &&\n  a.every((item, i) => item.id === b[i]!.id && item.overlayText === b[i]!.overlayText);\n"],"mappings":";;;;AAqBA,SAAgB,eAGd;CACA,MAAM,MAAM,cAAc,cAAc;CACxC,MAAM,WAAW,YAAY,iBAAiB,MAAM,EAAE,WAAW,CAAC;CAClE,MAAM,kBAAkB,YAAY,iBAAiB,MAAM,EAAE,WAAW,CAAC;CACzE,OAAO;EAAE,GAAG;EAAK;EAAU;CAAgB;AAC7C;;;;AAKA,SAAgB,uBAA+C;CAC7D,OAAO,YAAY,iBAAiB,MAAM,EAAE,WAAW,GAAG,YAAY;AACxE;AAEA,MAAM,gBAAgB,GAA2B,MAC/C,EAAE,WAAW,EAAE,UACf,EAAE,OAAO,MAAM,MAAM,KAAK,OAAO,EAAE,EAAE,CAAE,MAAM,KAAK,gBAAgB,EAAE,EAAE,CAAE,WAAW"}
+{"version":3,"file":"redaction.js","names":[],"sources":["../src/redaction.tsx"],"sourcesContent":["import { RedactionToken } from '@embedpdf/plugin-redaction';\nimport type {\n  RedactionApplyResult,\n  RedactionCapability,\n  RedactionPendingItem,\n} from '@embedpdf/plugin-redaction';\nimport { useCapability, useSelector } from './runtime';\n\n/**\n * Redaction for the surrounding `DocumentScope`: the pending-marks view plus\n * the destructive apply. Marking rides the annotation plane (the composed\n * `redact` tool); `useRedaction` surfaces the workflow around it.\n *\n *   const redaction = useRedaction();\n *   redaction.toggleRedact();\n *   await redaction.applyAll();          // irreversible — confirm first\n */\n\n// One-line-per-feature: registration travels with the UI.\nexport * from '@embedpdf/plugin-redaction';\n\nexport function useRedaction(): RedactionCapability & {\n  applying: boolean;\n  lastApplyResult: RedactionApplyResult | null;\n} {\n  const cap = useCapability(RedactionToken);\n  const applying = useSelector(RedactionToken, (c) => c.isApplying());\n  const lastApplyResult = useSelector(RedactionToken, (c) => c.lastResult());\n  return { ...cap, applying, lastApplyResult };\n}\n\n/** The pending marks, reactive against the annotation plane. Note the view\n *  covers LOADED pages — call `preparePending()` (e.g. on panel open) to load\n *  the whole document. */\nexport function usePendingRedactions(): RedactionPendingItem[] {\n  return useSelector(RedactionToken, (c) => c.getPending(), pendingEqual);\n}\n\nconst pendingEqual = (a: RedactionPendingItem[], b: RedactionPendingItem[]): boolean =>\n  a.length === b.length &&\n  a.every((item, i) => item.id === b[i]!.id && item.overlayText === b[i]!.overlayText);\n"],"mappings":";;;;;AAqBA,SAAgB,eAGd;CACA,MAAM,MAAM,cAAc,cAAc;CACxC,MAAM,WAAW,YAAY,iBAAiB,MAAM,EAAE,WAAW,CAAC;CAClE,MAAM,kBAAkB,YAAY,iBAAiB,MAAM,EAAE,WAAW,CAAC;CACzE,OAAO;EAAE,GAAG;EAAK;EAAU;CAAgB;AAC7C;;;;AAKA,SAAgB,uBAA+C;CAC7D,OAAO,YAAY,iBAAiB,MAAM,EAAE,WAAW,GAAG,YAAY;AACxE;AAEA,MAAM,gBAAgB,GAA2B,MAC/C,EAAE,WAAW,EAAE,UACf,EAAE,OAAO,MAAM,MAAM,KAAK,OAAO,EAAE,EAAE,CAAE,MAAM,KAAK,gBAAgB,EAAE,EAAE,CAAE,WAAW"}