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

package/dist/page-view.d.cts

@@ -1,23 +1,30 @@
+import { PageRef } from "@embedpdf/core";
 import * as React from "react";
 import { PageFrame } from "@embedpdf/core-geometry";
 //#region src/page-view.d.ts
 interface PageViewProps {
-  page: number;
-  /** Which document to show. Defaults to the active document. */
+  /** The page: its `ref`, which follows it when pages move, or its index, from 0. */
+  page: PageRef | number;
+  /** Which document to show. Defaults to the one a `<DocumentScope>` names, else the active one. */
   documentId?: string;
-  /** Target width for the page CONTENT; the display box is the rotated footprint. */
+  /** Shown while the document or the page is not available yet (default: nothing). */
+  fallback?: React.ReactNode;
+  /** The width of the page, in pixels; the display box is the rotated footprint. Default 240. */
   width?: number;
-  /** Reserved chrome bands around the page (screen px) — same model as `<Stage>`. */
-  pageFrame?: PageFrame;
+  /** Space reserved around the page for your own labels, in pixels per side; the sides left out are 0. */
+  pageFrame?: Partial<PageFrame>;
   /** Page-space content (rotates with the page). */
   children: React.ReactNode;
   /** Box-space chrome (label, border, …) — never rotated. Mirrors `<Stage pageChrome>`. */
   pageChrome?: React.ReactNode;
+  /** On the outer box. */
+  className?: string;
+  /** On the outer box. */
   style?: React.CSSProperties;
 }
-/** A single page surface with NO Stage — same layers + rotation + chrome frame,
+/** A single page surface with no Stage — same layers + rotation + chrome frame,
  *  no camera/scroll/zoom. */
-declare function PageView({ page, documentId, width, pageFrame, children, pageChrome, style }: PageViewProps): import("react/jsx-runtime").JSX.Element | null;
+declare function PageView({ page: wanted, documentId, fallback, width, pageFrame: framePatch, children, pageChrome, className, style }: PageViewProps): import("react/jsx-runtime").JSX.Element;
 //#endregion
 export { PageView, PageViewProps };
 //# sourceMappingURL=page-view.d.cts.map

package/dist/page-view.d.ts

@@ -1,23 +1,30 @@
-import * as React from "react";
+import { PageRef } from "@embedpdf/core";
+import * as React$1 from "react";
 import { PageFrame } from "@embedpdf/core-geometry";
 //#region src/page-view.d.ts
 interface PageViewProps {
-  page: number;
-  /** Which document to show. Defaults to the active document. */
+  /** The page: its `ref`, which follows it when pages move, or its index, from 0. */
+  page: PageRef | number;
+  /** Which document to show. Defaults to the one a `<DocumentScope>` names, else the active one. */
   documentId?: string;
-  /** Target width for the page CONTENT; the display box is the rotated footprint. */
+  /** Shown while the document or the page is not available yet (default: nothing). */
+  fallback?: React$1.ReactNode;
+  /** The width of the page, in pixels; the display box is the rotated footprint. Default 240. */
   width?: number;
-  /** Reserved chrome bands around the page (screen px) — same model as `<Stage>`. */
-  pageFrame?: PageFrame;
+  /** Space reserved around the page for your own labels, in pixels per side; the sides left out are 0. */
+  pageFrame?: Partial<PageFrame>;
   /** Page-space content (rotates with the page). */
-  children: React.ReactNode;
+  children: React$1.ReactNode;
   /** Box-space chrome (label, border, …) — never rotated. Mirrors `<Stage pageChrome>`. */
-  pageChrome?: React.ReactNode;
-  style?: React.CSSProperties;
+  pageChrome?: React$1.ReactNode;
+  /** On the outer box. */
+  className?: string;
+  /** On the outer box. */
+  style?: React$1.CSSProperties;
 }
-/** A single page surface with NO Stage — same layers + rotation + chrome frame,
+/** A single page surface with no Stage — same layers + rotation + chrome frame,
  *  no camera/scroll/zoom. */
-declare function PageView({ page, documentId, width, pageFrame, children, pageChrome, style }: PageViewProps): import("react/jsx-runtime").JSX.Element | null;
+declare function PageView({ page: wanted, documentId, fallback, width, pageFrame: framePatch, children, pageChrome, className, style }: PageViewProps): import("react/jsx-runtime").JSX.Element;
 //#endregion
 export { PageView, PageViewProps };
 //# sourceMappingURL=page-view.d.ts.map

package/dist/page-view.js

@@ -1,111 +1,116 @@
-import { DocumentScope, PageProvider, makePageContext, useActiveDocumentId, useKernel } from "./runtime.js";
-import { ProjectorProvider } from "./anchored.js";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { D as useViewerSettings, S as useOptionalCapability, a as PageProvider, h as useDocumentId, n as DocumentScope, x as useKernelValue } from "./runtime-B6xcPsEb.js";
+import { ProjectorProvider, ShownPagesProvider } from "./anchored.js";
+import { PagePointerSource } from "./interaction.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { toPageRef } from "@embedpdf/core";
+import { clientPageProjector, makePageContext, observeClientGeometry, pageSurfaceLayout, pageViewTransformInput, paint } from "@embedpdf/web";
 import { useId, useMemo, useRef } from "react";
-import { observeClientGeometry } from "@embedpdf/web";
+import { InteractionToken } from "@embedpdf/plugin-interaction/contract/host";
 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,
+/**
+* The page's pointer surface, when the interaction plugin is registered. It sits
+* below the layers, like the Stage's own listener: a press on a layer that lets
+* the pointer through (the picture, the selection highlight) reaches the tools,
+* and a control that takes its own presses (a link, a form field) keeps them.
+*/
+function PointerSurface() {
+	return useOptionalCapability(InteractionToken) ? /* @__PURE__ */ jsx(PagePointerSource, {}) : null;
+}
+/** A single page surface with no Stage — same layers + rotation + chrome frame,
 *  no camera/scroll/zoom. */
-function PageView({ page, documentId, width = 240, pageFrame = NO_FRAME, children, pageChrome, style }) {
-	const kernel = useKernel();
-	const active = useActiveDocumentId();
+function PageView({ page: wanted, documentId, fallback = null, width = 240, pageFrame: framePatch, children, pageChrome, className, style }) {
+	const wantedRef = typeof wanted === "number" ? null : wanted;
+	const wantedIndex = typeof wanted === "number" ? wanted : null;
+	const { top = 0, right = 0, bottom = 0, left = 0 } = framePatch ?? NO_FRAME;
+	const pageFrame = useMemo(() => ({
+		top,
+		right,
+		bottom,
+		left
+	}), [
+		top,
+		right,
+		bottom,
+		left
+	]);
+	const inScope = useDocumentId();
 	const ref = useRef(null);
-	const docId = documentId ?? active;
-	const meta = docId ? kernel.getState().core.documents[docId] : void 0;
-	const base = meta?.pages[page];
-	const pon = base?.pageObjectNumber ?? page + 1;
-	const rotation = base?.rotation ?? 0;
+	const docId = documentId ?? inScope;
+	const wantedPageObjectNumber = wantedRef?.objectNumber ?? null;
+	const base = useKernelValue((kernel) => {
+		if (!docId) return null;
+		const pages = kernel.documents.listPages(docId);
+		return (wantedPageObjectNumber !== null ? pages.find((pageInfo) => pageInfo.ref.objectNumber === wantedPageObjectNumber) : pages[wantedIndex ?? 0]) ?? null;
+	});
+	const page = base?.index ?? wantedIndex ?? 0;
+	const pageObjectNumber = base?.ref.objectNumber ?? wantedPageObjectNumber ?? page + 1;
+	const pageRef = useMemo(() => toPageRef(pageObjectNumber), [pageObjectNumber]);
 	const dpr = typeof window !== "undefined" ? window.devicePixelRatio || 1 : 1;
-	const transform = useMemo(() => pageTransform({
-		pageSize: base ? {
-			width: base.size.width,
-			height: base.size.height
-		} : {
-			width: 1,
-			height: 1
-		},
-		rotation,
-		scale: base ? width / base.size.width : 1,
-		baseScale: 96 / 72 * (base?.userUnit ?? 1),
-		dpr
-	}), [
+	const transform = useMemo(() => pageTransform(pageViewTransformInput(base, width, dpr)), [
 		base?.size.width,
 		base?.size.height,
 		base?.userUnit,
-		rotation,
+		base?.rotation,
 		width,
 		dpr
 	]);
 	const viewId = useId();
-	const ctx = useMemo(() => makePageContext(docId ?? "", `page-view:${viewId}`, pon, page, pageFrame, transform, () => ref.current.getBoundingClientRect()), [
+	const ctx = useMemo(() => makePageContext(docId ?? "", `page-view:${viewId}`, pageRef, page, pageFrame, transform, () => ref.current.getBoundingClientRect()), [
 		docId,
-		pon,
+		pageRef,
 		page,
 		pageFrame,
 		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 projector = useMemo(() => clientPageProjector(ctx, () => ref.current !== 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;
-	const outerH = t.viewHeight + pageFrame.top + pageFrame.bottom;
-	const contentLeft = pageFrame.left + (t.viewWidth - t.contentWidth) / 2;
-	const contentTop = pageFrame.top + (t.viewHeight - t.contentHeight) / 2;
+	const shownPages = useMemo(() => /* @__PURE__ */ new Set([ctx.ref.objectNumber]), [ctx.ref.objectNumber]);
+	const look = useViewerSettings((settings) => settings.page);
+	if (!docId || !base) return /* @__PURE__ */ jsx(Fragment, { children: fallback });
+	const layout = pageSurfaceLayout(transform, pageFrame);
 	return /* @__PURE__ */ jsx(DocumentScope, {
 		id: docId,
-		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: 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: {
+		children: /* @__PURE__ */ jsx(ShownPagesProvider, {
+			value: shownPages,
+			children: /* @__PURE__ */ jsx(ProjectorProvider, {
+				value: projectorBinding,
+				children: /* @__PURE__ */ jsx("div", {
+					className,
+					style: {
+						position: "relative",
+						width: layout.outer.width,
+						height: layout.outer.height,
+						...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
-					]
+								...layout.shadow,
+								boxShadow: paint("page-shadow", look.shadow)
+							} }),
+							/* @__PURE__ */ jsxs("div", {
+								ref,
+								style: {
+									position: "absolute",
+									...layout.content,
+									background: paint("page-background", look.background),
+									transform: layout.turn ?? void 0,
+									userSelect: "none",
+									WebkitUserSelect: "none"
+								},
+								children: [/* @__PURE__ */ jsx(PointerSurface, {}), 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 * 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"}
+{"version":3,"file":"page-view.js","names":["InteractionHostToken"],"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. With the interaction plugin registered it is also the\n * page's pointer surface, so tools (text selection, annotation editing) work in\n * it as they do on a Stage page.\n */\nimport * as React from 'react';\nimport { useId, useMemo, useRef } from 'react';\nimport { toPageRef } from '@embedpdf/core';\nimport type { PageRef } from '@embedpdf/core';\nimport { NO_FRAME, pageTransform, type PageFrame } from '@embedpdf/core-geometry';\nimport {\n  clientPageProjector,\n  makePageContext,\n  observeClientGeometry,\n  pageSurfaceLayout,\n  pageViewTransformInput,\n  paint,\n} from '@embedpdf/web';\nimport { InteractionToken as InteractionHostToken } from '@embedpdf/plugin-interaction/contract/host';\nimport {\n  ProjectorProvider,\n  ShownPagesProvider,\n  type ProjectorBinding,\n  type ShownPages,\n  type ViewProjector,\n} from './anchored';\nimport { PagePointerSource } from './interaction';\nimport {\n  DocumentScope,\n  PageProvider,\n  useDocumentId,\n  useKernelValue,\n  useOptionalCapability,\n  useViewerSettings,\n} from './runtime';\n\n/**\n * The page's pointer surface, when the interaction plugin is registered. It sits\n * below the layers, like the Stage's own listener: a press on a layer that lets\n * the pointer through (the picture, the selection highlight) reaches the tools,\n * and a control that takes its own presses (a link, a form field) keeps them.\n */\nfunction PointerSurface() {\n  const interaction = useOptionalCapability(InteractionHostToken);\n  return interaction ? <PagePointerSource /> : null;\n}\n\nexport interface PageViewProps {\n  /** The page: its `ref`, which follows it when pages move, or its index, from 0. */\n  page: PageRef | number;\n  /** Which document to show. Defaults to the one a `<DocumentScope>` names, else the active one. */\n  documentId?: string;\n  /** Shown while the document or the page is not available yet (default: nothing). */\n  fallback?: React.ReactNode;\n  /** The width of the page, in pixels; the display box is the rotated footprint. Default 240. */\n  width?: number;\n  /** Space reserved around the page for your own labels, in pixels per side; the sides left out are 0. */\n  pageFrame?: Partial<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  /** On the outer box. */\n  className?: string;\n  /** On the outer box. */\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: wanted,\n  documentId,\n  fallback = null,\n  width = 240,\n  pageFrame: framePatch,\n  children,\n  pageChrome,\n  className,\n  style,\n}: PageViewProps) {\n  const wantedRef = typeof wanted === 'number' ? null : wanted;\n  const wantedIndex = typeof wanted === 'number' ? wanted : null;\n  // The sides left out reserve nothing; memoized by value so the context stays stable.\n  const { top = 0, right = 0, bottom = 0, left = 0 } = framePatch ?? NO_FRAME;\n  const pageFrame = useMemo<PageFrame>(\n    () => ({ top, right, bottom, left }),\n    [top, right, bottom, left],\n  );\n  const inScope = useDocumentId();\n  const ref = useRef<HTMLDivElement>(null);\n  const docId = documentId ?? inScope;\n  // The page-registry entry, subscribed: a rotate or a reorder re-renders\n  // this surface like it re-renders a Stage page. Entries are reference-\n  // stable per page in the registry, so identity is the right equality.\n  const wantedPageObjectNumber = wantedRef?.objectNumber ?? null;\n  const base = useKernelValue((kernel) => {\n    if (!docId) return null;\n    const pages = kernel.documents.listPages(docId);\n    const found =\n      wantedPageObjectNumber !== null\n        ? pages.find((pageInfo) => pageInfo.ref.objectNumber === wantedPageObjectNumber)\n        : pages[wantedIndex ?? 0];\n    return found ?? null;\n  });\n  const page = base?.index ?? wantedIndex ?? 0;\n  // The page's address is the kernel's (`PageLayout.ref`); a placeholder\n  // (object number = 1-based index) only until the layout is known — the\n  // surface renders the fallback before that anyway. Memoized by the number so\n  // the context's `ref` stays identity-stable across re-renders (layers key\n  // effects on it).\n  const pageObjectNumber = base?.ref.objectNumber ?? wantedPageObjectNumber ?? page + 1;\n  const pageRef = useMemo(() => toPageRef(pageObjectNumber), [pageObjectNumber]);\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. Memoized by value: a new registry entry for an\n  // unchanged page keeps the transform.\n  const transform = useMemo(\n    () => pageTransform(pageViewTransformInput(base, width, dpr)),\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- `base` by the values it gives\n    [base?.size.width, base?.size.height, base?.userUnit, base?.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(docId ?? '', `page-view:${viewId}`, pageRef, page, pageFrame, transform, () =>\n        ref.current!.getBoundingClientRect(),\n      ),\n    [docId, pageRef, 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    () => clientPageProjector(ctx, () => ref.current !== null),\n    [ctx],\n  );\n  const projectorBinding = useMemo<ProjectorBinding>(\n    () => ({ projector, revision: ctx, subscribe: observeClientGeometry }),\n    [projector, ctx],\n  );\n  // A PageView shows its one page.\n  const shownPages = useMemo<ShownPages>(\n    () => new Set([ctx.ref.objectNumber]),\n    [ctx.ref.objectNumber],\n  );\n  // The viewer's `page` settings; `--epdf-page-*` CSS variables win over them.\n  const look = useViewerSettings((settings) => settings.page);\n  if (!docId || !base) return <>{fallback}</>;\n  // The outer box (page and frame), the shadow at the footprint, and the turned content box.\n  const layout = pageSurfaceLayout(transform, pageFrame);\n  return (\n    <DocumentScope id={docId}>\n      <ShownPagesProvider value={shownPages}>\n        <ProjectorProvider value={projectorBinding}>\n          <div\n            className={className}\n            style={{\n              position: 'relative',\n              width: layout.outer.width,\n              height: layout.outer.height,\n              ...style,\n            }}\n          >\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                  ...layout.shadow,\n                  boxShadow: paint('page-shadow', look.shadow),\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                  ...layout.content,\n                  background: paint('page-background', look.background),\n                  transform: layout.turn ?? undefined,\n                  userSelect: 'none',\n                  WebkitUserSelect: 'none',\n                }}\n              >\n                <PointerSurface />\n                {children}\n              </div>\n              {pageChrome}\n            </PageProvider>\n          </div>\n        </ProjectorProvider>\n      </ShownPagesProvider>\n    </DocumentScope>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAkDA,SAAS,iBAAiB;CAExB,OADoB,sBAAsBA,gBACzB,IAAI,oBAAC,mBAAD,CAAoB,CAAA,IAAI;AAC/C;;;AAyBA,SAAgB,SAAS,EACvB,MAAM,QACN,YACA,WAAW,MACX,QAAQ,KACR,WAAW,YACX,UACA,YACA,WACA,SACgB;CAChB,MAAM,YAAY,OAAO,WAAW,WAAW,OAAO;CACtD,MAAM,cAAc,OAAO,WAAW,WAAW,SAAS;CAE1D,MAAM,EAAE,MAAM,GAAG,QAAQ,GAAG,SAAS,GAAG,OAAO,MAAM,cAAc;CACnE,MAAM,YAAY,eACT;EAAE;EAAK;EAAO;EAAQ;CAAK,IAClC;EAAC;EAAK;EAAO;EAAQ;CAAI,CAC3B;CACA,MAAM,UAAU,cAAc;CAC9B,MAAM,MAAM,OAAuB,IAAI;CACvC,MAAM,QAAQ,cAAc;CAI5B,MAAM,yBAAyB,WAAW,gBAAgB;CAC1D,MAAM,OAAO,gBAAgB,WAAW;EACtC,IAAI,CAAC,OAAO,OAAO;EACnB,MAAM,QAAQ,OAAO,UAAU,UAAU,KAAK;EAK9C,QAHE,2BAA2B,OACvB,MAAM,MAAM,aAAa,SAAS,IAAI,iBAAiB,sBAAsB,IAC7E,MAAM,eAAe,OACX;CAClB,CAAC;CACD,MAAM,OAAO,MAAM,SAAS,eAAe;CAM3C,MAAM,mBAAmB,MAAM,IAAI,gBAAgB,0BAA0B,OAAO;CACpF,MAAM,UAAU,cAAc,UAAU,gBAAgB,GAAG,CAAC,gBAAgB,CAAC;CAC7E,MAAM,MAAM,OAAO,WAAW,cAAc,OAAO,oBAAoB,IAAI;CAI3E,MAAM,YAAY,cACV,cAAc,uBAAuB,MAAM,OAAO,GAAG,CAAC,GAE5D;EAAC,MAAM,KAAK;EAAO,MAAM,KAAK;EAAQ,MAAM;EAAU,MAAM;EAAU;EAAO;CAAG,CAClF;CAGA,MAAM,SAAS,MAAM;CACrB,MAAM,MAAM,cAER,gBAAgB,SAAS,IAAI,aAAa,UAAU,SAAS,MAAM,WAAW,iBAC5E,IAAI,QAAS,sBAAsB,CACrC,GACF;EAAC;EAAO;EAAS;EAAM;EAAW;EAAW;CAAM,CACrD;CASA,MAAM,YAAY,cACV,oBAAoB,WAAW,IAAI,YAAY,IAAI,GACzD,CAAC,GAAG,CACN;CACA,MAAM,mBAAmB,eAChB;EAAE;EAAW,UAAU;EAAK,WAAW;CAAsB,IACpE,CAAC,WAAW,GAAG,CACjB;CAEA,MAAM,aAAa,8BACX,IAAI,IAAI,CAAC,IAAI,IAAI,YAAY,CAAC,GACpC,CAAC,IAAI,IAAI,YAAY,CACvB;CAEA,MAAM,OAAO,mBAAmB,aAAa,SAAS,IAAI;CAC1D,IAAI,CAAC,SAAS,CAAC,MAAM,OAAO,oBAAA,UAAA,EAAA,UAAG,SAAW,CAAA;CAE1C,MAAM,SAAS,kBAAkB,WAAW,SAAS;CACrD,OACE,oBAAC,eAAD;EAAe,IAAI;EACjB,UAAA,oBAAC,oBAAD;GAAoB,OAAO;GACzB,UAAA,oBAAC,mBAAD;IAAmB,OAAO;IACxB,UAAA,oBAAC,OAAD;KACa;KACX,OAAO;MACL,UAAU;MACV,OAAO,OAAO,MAAM;MACpB,QAAQ,OAAO,MAAM;MACrB,GAAG;KACL;KAEA,UAAA,qBAAC,cAAD;MAAc,OAAO;MAArB,UAAA;OAEE,oBAAC,OAAD,EACE,OAAO;QACL,UAAU;QACV,GAAG,OAAO;QACV,WAAW,MAAM,eAAe,KAAK,MAAM;OAC7C,EACD,CAAA;OAED,qBAAC,OAAD;QACO;QACL,OAAO;SACL,UAAU;SACV,GAAG,OAAO;SACV,YAAY,MAAM,mBAAmB,KAAK,UAAU;SACpD,WAAW,OAAO,QAAQ,KAAA;SAC1B,YAAY;SACZ,kBAAkB;QACpB;QATF,UAAA,CAWE,oBAAC,gBAAD,CAAiB,CAAA,GAChB,QACE;;OACJ;MACW;;IACX,CAAA;GACY,CAAA;EACD,CAAA;CACP,CAAA;AAEnB"}

package/dist/redaction.cjs

@@ -1,28 +1,43 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 require("./rolldown-runtime-DDXJien1.cjs");
-const require_runtime = require("./runtime.cjs");
+const require_runtime = require("./runtime-fzpGv78v.cjs");
+const require_state = require("./state-CsfZy_Eq.cjs");
 let _embedpdf_plugin_redaction = require("@embedpdf/plugin-redaction");
 //#region src/redaction.tsx
+/** The redaction capability: marking, the pending marks, and applying them. */
 function useRedaction() {
-	const cap = require_runtime.useCapability(_embedpdf_plugin_redaction.RedactionToken);
-	const applying = require_runtime.useSelector(_embedpdf_plugin_redaction.RedactionToken, (c) => c.isApplying());
-	const lastApplyResult = require_runtime.useSelector(_embedpdf_plugin_redaction.RedactionToken, (c) => c.lastResult());
-	return {
-		...cap,
-		applying,
-		lastApplyResult
-	};
+	return require_runtime.useCapability(_embedpdf_plugin_redaction.RedactionToken);
 }
-/** The pending marks, reactive against the annotation plane. Note the view
-*  covers LOADED pages — call `preparePending()` (e.g. on panel open) to load
-*  the whole document. */
-function usePendingRedactions() {
-	return require_runtime.useSelector(_embedpdf_plugin_redaction.RedactionToken, (c) => c.getPending(), pendingEqual);
+/** Subscribe to one redaction event for the mounted lifetime: `useRedactionEvent((redaction) => redaction.onApplied, handler)`. */
+function useRedactionEvent(select, handler) {
+	require_runtime.useCapabilityEvent(_embedpdf_plugin_redaction.RedactionToken, select, handler);
+}
+/**
+* The redaction state: how many marks wait, whether marks are being applied,
+* and the last apply's result (the page's State table, declared once in
+* `redactionState`). Takes a selector, and re-renders only when what it
+* returns changes.
+*/
+const useRedactionState = require_state.stateHook(_embedpdf_plugin_redaction.redactionState);
+/** The redaction settings (`overlay`), with or without a document. Takes a selector. */
+const useRedactionSettings = require_state.settingsHook(_embedpdf_plugin_redaction.RedactionToken);
+const NO_MARKS = Object.freeze([]);
+/**
+* The marks waiting to be applied, in page order, or one page's (its ref or
+* its index). The lists are reference-stable, so a component re-renders only
+* when its marks change. Empty without a document.
+*/
+function usePendingRedactions(filter) {
+	const scoped = require_runtime.useDocumentScope();
+	const page = filter?.page;
+	return require_runtime.useKernelValue((kernel) => kernel.tryCapability(_embedpdf_plugin_redaction.RedactionToken, scoped ?? void 0)?.listPending(page === void 0 ? void 0 : { page }) ?? NO_MARKS);
 }
-const pendingEqual = (a, b) => a.length === b.length && a.every((item, i) => item.id === b[i].id && item.overlayText === b[i].overlayText);
 //#endregion
 exports.usePendingRedactions = usePendingRedactions;
 exports.useRedaction = useRedaction;
+exports.useRedactionEvent = useRedactionEvent;
+exports.useRedactionSettings = useRedactionSettings;
+exports.useRedactionState = useRedactionState;
 Object.keys(_embedpdf_plugin_redaction).forEach(function(k) {
 	if (k !== "default" && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
 		enumerable: true,

package/dist/redaction.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"redaction.cjs","names":["useCapability","RedactionToken","useSelector"],"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,MAAMA,gBAAAA,cAAcC,2BAAAA,cAAc;CACxC,MAAM,WAAWC,gBAAAA,YAAYD,2BAAAA,iBAAiB,MAAM,EAAE,WAAW,CAAC;CAClE,MAAM,kBAAkBC,gBAAAA,YAAYD,2BAAAA,iBAAiB,MAAM,EAAE,WAAW,CAAC;CACzE,OAAO;EAAE,GAAG;EAAK;EAAU;CAAgB;AAC7C;;;;AAKA,SAAgB,uBAA+C;CAC7D,OAAOC,gBAAAA,YAAYD,2BAAAA,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.cjs","names":["useCapability","RedactionToken","stateHook","redactionState","settingsHook","useDocumentScope","useKernelValue"],"sources":["../src/redaction.tsx"],"sourcesContent":["/**\n * The React view of @embedpdf/plugin-redaction: the four hooks every plugin\n * has, plus the pending marks. Marking rides the annotation plane (the\n * composed `redact` tool); these hooks surface the workflow around it.\n *\n *   const redaction = useRedaction();\n *   const { pendingCount, applying } = useRedactionState();\n *   await redaction.applyAll(); // irreversible: confirm first\n */\n\n// One-line-per-feature: registration travels with the UI.\nexport * from '@embedpdf/plugin-redaction';\nimport type { EventHook } from '@embedpdf/core';\nimport { RedactionToken, redactionState } from '@embedpdf/plugin-redaction';\nimport type {\n  RedactionCapability,\n  RedactionMark,\n  RedactionMarkFilter,\n} from '@embedpdf/plugin-redaction';\nimport { useCapability, useCapabilityEvent, useDocumentScope, useKernelValue } from './runtime';\nimport { settingsHook, stateHook } from './state';\n\n/** The redaction capability: marking, the pending marks, and applying them. */\nexport function useRedaction(): RedactionCapability {\n  return useCapability(RedactionToken);\n}\n\n/** Subscribe to one redaction event for the mounted lifetime: `useRedactionEvent((redaction) => redaction.onApplied, handler)`. */\nexport function useRedactionEvent<T>(\n  select: (redaction: RedactionCapability) => EventHook<T>,\n  handler: (event: T) => void,\n): void {\n  useCapabilityEvent(RedactionToken, select, handler);\n}\n\n/**\n * The redaction state: how many marks wait, whether marks are being applied,\n * and the last apply's result (the page's State table, declared once in\n * `redactionState`). Takes a selector, and re-renders only when what it\n * returns changes.\n */\nexport const useRedactionState = stateHook(redactionState);\n\n/** The redaction settings (`overlay`), with or without a document. Takes a selector. */\nexport const useRedactionSettings = settingsHook(RedactionToken);\n\nconst NO_MARKS: readonly RedactionMark[] = Object.freeze([]);\n\n/**\n * The marks waiting to be applied, in page order, or one page's (its ref or\n * its index). The lists are reference-stable, so a component re-renders only\n * when its marks change. Empty without a document.\n */\nexport function usePendingRedactions(filter?: RedactionMarkFilter): readonly RedactionMark[] {\n  const scoped = useDocumentScope();\n  const page = filter?.page;\n  return useKernelValue(\n    (kernel) =>\n      kernel\n        .tryCapability(RedactionToken, scoped ?? undefined)\n        ?.listPending(page === undefined ? undefined : { page }) ?? NO_MARKS,\n  );\n}\n"],"mappings":";;;;;;;AAuBA,SAAgB,eAAoC;CAClD,OAAOA,gBAAAA,cAAcC,2BAAAA,cAAc;AACrC;;AAGA,SAAgB,kBACd,QACA,SACM;CACN,gBAAA,mBAAmBA,2BAAAA,gBAAgB,QAAQ,OAAO;AACpD;;;;;;;AAQA,MAAa,oBAAoBC,cAAAA,UAAUC,2BAAAA,cAAc;;AAGzD,MAAa,uBAAuBC,cAAAA,aAAaH,2BAAAA,cAAc;AAE/D,MAAM,WAAqC,OAAO,OAAO,CAAC,CAAC;;;;;;AAO3D,SAAgB,qBAAqB,QAAwD;CAC3F,MAAM,SAASI,gBAAAA,iBAAiB;CAChC,MAAM,OAAO,QAAQ;CACrB,OAAOC,gBAAAA,gBACJ,WACC,OACG,cAAcL,2BAAAA,gBAAgB,UAAU,KAAA,CAAS,CAAC,EACjD,YAAY,SAAS,KAAA,IAAY,KAAA,IAAY,EAAE,KAAK,CAAC,KAAK,QAClE;AACF"}

package/dist/redaction.d.cts

@@ -1,14 +1,32 @@
-import { RedactionApplyResult, RedactionCapability, RedactionPendingItem } from "@embedpdf/plugin-redaction";
+import { n as StateHook, t as SettingsHook } from "./state-0K1I5cM4.cjs";
+import { a as RedactionApplyResult } from "./AnnotationList-CkijRHet-HEFNUIZe.cjs";
+import { EventHook } from "@embedpdf/core";
+import { RedactionCapability, RedactionMark, RedactionMarkFilter } from "@embedpdf/plugin-redaction";
 export * from "@embedpdf/plugin-redaction";
 //#region src/redaction.d.ts
-declare function useRedaction(): RedactionCapability & {
+/** The redaction capability: marking, the pending marks, and applying them. */
+declare function useRedaction(): RedactionCapability;
+/** Subscribe to one redaction event for the mounted lifetime: `useRedactionEvent((redaction) => redaction.onApplied, handler)`. */
+declare function useRedactionEvent<T>(select: (redaction: RedactionCapability) => EventHook<T>, handler: (event: T) => void): void;
+/**
+ * The redaction state: how many marks wait, whether marks are being applied,
+ * and the last apply's result (the page's State table, declared once in
+ * `redactionState`). Takes a selector, and re-renders only when what it
+ * returns changes.
+ */
+declare const useRedactionState: StateHook<{
+  pendingCount: number;
   applying: boolean;
-  lastApplyResult: RedactionApplyResult | null;
-};
-/** The pending marks, reactive against the annotation plane. Note the view
- *  covers LOADED pages — call `preparePending()` (e.g. on panel open) to load
- *  the whole document. */
-declare function usePendingRedactions(): RedactionPendingItem[];
+  lastResult: RedactionApplyResult | null;
+}>;
+/** The redaction settings (`overlay`), with or without a document. Takes a selector. */
+declare const useRedactionSettings: SettingsHook<import("@embedpdf/plugin-redaction").RedactionSettings>;
+/**
+ * The marks waiting to be applied, in page order, or one page's (its ref or
+ * its index). The lists are reference-stable, so a component re-renders only
+ * when its marks change. Empty without a document.
+ */
+declare function usePendingRedactions(filter?: RedactionMarkFilter): readonly RedactionMark[];
 //#endregion
-export { usePendingRedactions, useRedaction };
+export { usePendingRedactions, useRedaction, useRedactionEvent, useRedactionSettings, useRedactionState };
 //# sourceMappingURL=redaction.d.cts.map

package/dist/redaction.d.ts

@@ -1,14 +1,32 @@
-import { RedactionApplyResult, RedactionCapability, RedactionPendingItem } from "@embedpdf/plugin-redaction";
+import { n as StateHook, t as SettingsHook } from "./state-0K1I5cM4.js";
+import { a as RedactionApplyResult } from "./AnnotationList-CkijRHet-HEFNUIZe.js";
+import { EventHook } from "@embedpdf/core";
+import { RedactionCapability, RedactionMark, RedactionMarkFilter } from "@embedpdf/plugin-redaction";
 export * from "@embedpdf/plugin-redaction";
 //#region src/redaction.d.ts
-declare function useRedaction(): RedactionCapability & {
+/** The redaction capability: marking, the pending marks, and applying them. */
+declare function useRedaction(): RedactionCapability;
+/** Subscribe to one redaction event for the mounted lifetime: `useRedactionEvent((redaction) => redaction.onApplied, handler)`. */
+declare function useRedactionEvent<T>(select: (redaction: RedactionCapability) => EventHook<T>, handler: (event: T) => void): void;
+/**
+ * The redaction state: how many marks wait, whether marks are being applied,
+ * and the last apply's result (the page's State table, declared once in
+ * `redactionState`). Takes a selector, and re-renders only when what it
+ * returns changes.
+ */
+declare const useRedactionState: StateHook<{
+  pendingCount: number;
   applying: boolean;
-  lastApplyResult: RedactionApplyResult | null;
-};
-/** The pending marks, reactive against the annotation plane. Note the view
- *  covers LOADED pages — call `preparePending()` (e.g. on panel open) to load
- *  the whole document. */
-declare function usePendingRedactions(): RedactionPendingItem[];
+  lastResult: RedactionApplyResult | null;
+}>;
+/** The redaction settings (`overlay`), with or without a document. Takes a selector. */
+declare const useRedactionSettings: SettingsHook<import("@embedpdf/plugin-redaction").RedactionSettings>;
+/**
+ * The marks waiting to be applied, in page order, or one page's (its ref or
+ * its index). The lists are reference-stable, so a component re-renders only
+ * when its marks change. Empty without a document.
+ */
+declare function usePendingRedactions(filter?: RedactionMarkFilter): readonly RedactionMark[];
 //#endregion
-export { usePendingRedactions, useRedaction };
+export { usePendingRedactions, useRedaction, useRedactionEvent, useRedactionSettings, useRedactionState };
 //# sourceMappingURL=redaction.d.ts.map

package/dist/redaction.js

@@ -1,26 +1,37 @@
-import "./rolldown-runtime-BBjsoOtd.js";
-import { useCapability, useSelector } from "./runtime.js";
-import { RedactionToken } from "@embedpdf/plugin-redaction";
+import { f as useCapability, g as useDocumentScope, p as useCapabilityEvent, x as useKernelValue } from "./runtime-B6xcPsEb.js";
+import { n as stateHook, t as settingsHook } from "./state-CbgxhwLA.js";
+import { RedactionToken, redactionState } from "@embedpdf/plugin-redaction";
 export * from "@embedpdf/plugin-redaction";
 //#region src/redaction.tsx
+/** The redaction capability: marking, the pending marks, and applying them. */
 function useRedaction() {
-	const cap = useCapability(RedactionToken);
-	const applying = useSelector(RedactionToken, (c) => c.isApplying());
-	const lastApplyResult = useSelector(RedactionToken, (c) => c.lastResult());
-	return {
-		...cap,
-		applying,
-		lastApplyResult
-	};
+	return useCapability(RedactionToken);
 }
-/** The pending marks, reactive against the annotation plane. Note the view
-*  covers LOADED pages — call `preparePending()` (e.g. on panel open) to load
-*  the whole document. */
-function usePendingRedactions() {
-	return useSelector(RedactionToken, (c) => c.getPending(), pendingEqual);
+/** Subscribe to one redaction event for the mounted lifetime: `useRedactionEvent((redaction) => redaction.onApplied, handler)`. */
+function useRedactionEvent(select, handler) {
+	useCapabilityEvent(RedactionToken, select, handler);
+}
+/**
+* The redaction state: how many marks wait, whether marks are being applied,
+* and the last apply's result (the page's State table, declared once in
+* `redactionState`). Takes a selector, and re-renders only when what it
+* returns changes.
+*/
+const useRedactionState = stateHook(redactionState);
+/** The redaction settings (`overlay`), with or without a document. Takes a selector. */
+const useRedactionSettings = settingsHook(RedactionToken);
+const NO_MARKS = Object.freeze([]);
+/**
+* The marks waiting to be applied, in page order, or one page's (its ref or
+* its index). The lists are reference-stable, so a component re-renders only
+* when its marks change. Empty without a document.
+*/
+function usePendingRedactions(filter) {
+	const scoped = useDocumentScope();
+	const page = filter?.page;
+	return useKernelValue((kernel) => kernel.tryCapability(RedactionToken, scoped ?? void 0)?.listPending(page === void 0 ? void 0 : { page }) ?? NO_MARKS);
 }
-const pendingEqual = (a, b) => a.length === b.length && a.every((item, i) => item.id === b[i].id && item.overlayText === b[i].overlayText);
 //#endregion
-export { usePendingRedactions, useRedaction };
+export { usePendingRedactions, useRedaction, useRedactionEvent, useRedactionSettings, useRedactionState };
 
 //# sourceMappingURL=redaction.js.map

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":["/**\n * The React view of @embedpdf/plugin-redaction: the four hooks every plugin\n * has, plus the pending marks. Marking rides the annotation plane (the\n * composed `redact` tool); these hooks surface the workflow around it.\n *\n *   const redaction = useRedaction();\n *   const { pendingCount, applying } = useRedactionState();\n *   await redaction.applyAll(); // irreversible: confirm first\n */\n\n// One-line-per-feature: registration travels with the UI.\nexport * from '@embedpdf/plugin-redaction';\nimport type { EventHook } from '@embedpdf/core';\nimport { RedactionToken, redactionState } from '@embedpdf/plugin-redaction';\nimport type {\n  RedactionCapability,\n  RedactionMark,\n  RedactionMarkFilter,\n} from '@embedpdf/plugin-redaction';\nimport { useCapability, useCapabilityEvent, useDocumentScope, useKernelValue } from './runtime';\nimport { settingsHook, stateHook } from './state';\n\n/** The redaction capability: marking, the pending marks, and applying them. */\nexport function useRedaction(): RedactionCapability {\n  return useCapability(RedactionToken);\n}\n\n/** Subscribe to one redaction event for the mounted lifetime: `useRedactionEvent((redaction) => redaction.onApplied, handler)`. */\nexport function useRedactionEvent<T>(\n  select: (redaction: RedactionCapability) => EventHook<T>,\n  handler: (event: T) => void,\n): void {\n  useCapabilityEvent(RedactionToken, select, handler);\n}\n\n/**\n * The redaction state: how many marks wait, whether marks are being applied,\n * and the last apply's result (the page's State table, declared once in\n * `redactionState`). Takes a selector, and re-renders only when what it\n * returns changes.\n */\nexport const useRedactionState = stateHook(redactionState);\n\n/** The redaction settings (`overlay`), with or without a document. Takes a selector. */\nexport const useRedactionSettings = settingsHook(RedactionToken);\n\nconst NO_MARKS: readonly RedactionMark[] = Object.freeze([]);\n\n/**\n * The marks waiting to be applied, in page order, or one page's (its ref or\n * its index). The lists are reference-stable, so a component re-renders only\n * when its marks change. Empty without a document.\n */\nexport function usePendingRedactions(filter?: RedactionMarkFilter): readonly RedactionMark[] {\n  const scoped = useDocumentScope();\n  const page = filter?.page;\n  return useKernelValue(\n    (kernel) =>\n      kernel\n        .tryCapability(RedactionToken, scoped ?? undefined)\n        ?.listPending(page === undefined ? undefined : { page }) ?? NO_MARKS,\n  );\n}\n"],"mappings":";;;;;;AAuBA,SAAgB,eAAoC;CAClD,OAAO,cAAc,cAAc;AACrC;;AAGA,SAAgB,kBACd,QACA,SACM;CACN,mBAAmB,gBAAgB,QAAQ,OAAO;AACpD;;;;;;;AAQA,MAAa,oBAAoB,UAAU,cAAc;;AAGzD,MAAa,uBAAuB,aAAa,cAAc;AAE/D,MAAM,WAAqC,OAAO,OAAO,CAAC,CAAC;;;;;;AAO3D,SAAgB,qBAAqB,QAAwD;CAC3F,MAAM,SAAS,iBAAiB;CAChC,MAAM,OAAO,QAAQ;CACrB,OAAO,gBACJ,WACC,OACG,cAAc,gBAAgB,UAAU,KAAA,CAAS,CAAC,EACjD,YAAY,SAAS,KAAA,IAAY,KAAA,IAAY,EAAE,KAAK,CAAC,KAAK,QAClE;AACF"}