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

package/dist/metadata.d.ts

@@ -1,11 +1,26 @@
-import { DocumentMetadata, MetadataPatch } from "@embedpdf/core";
+import { n as StateHook } from "./state-0K1I5cM4.js";
+import { EventHook } from "@embedpdf/core";
+import { MetadataCapability } from "@embedpdf/plugin-metadata";
 export * from "@embedpdf/plugin-metadata";
 //#region src/metadata.d.ts
-declare function useMetadata(): {
-  metadata: DocumentMetadata | null;
-  update: (patch: MetadataPatch) => Promise<void>;
-  canEdit: () => boolean;
-};
+/**
+ * The metadata capability (update, custom.update, refresh, canUpdate) of the
+ * surrounding `<DocumentScope>`'s document, else the active one. Outside a
+ * document, every method throws `not-ready`.
+ */
+declare function useMetadata(): MetadataCapability;
+/**
+ * The metadata's state: the standard fields, your own fields and the load
+ * state (the page's State table, declared once in `metadataState`). Takes a
+ * selector, and re-renders only when what it returns changes.
+ */
+declare const useMetadataState: StateHook<{
+  metadata: import("@embedpdf/core").DocumentMetadata | null;
+  custom: import("@embedpdf/core").CustomMetadata | null;
+  status: import("@embedpdf/core").ResourceStatus;
+}>;
+/** Subscribe to one metadata event for the mounted lifetime: `useMetadataEvent((metadata) => metadata.onUpdated, handler)`. */
+declare function useMetadataEvent<T>(select: (metadata: MetadataCapability) => EventHook<T>, handler: (event: T) => void): void;
 //#endregion
-export { useMetadata };
+export { useMetadata, useMetadataEvent, useMetadataState };
 //# sourceMappingURL=metadata.d.ts.map

package/dist/metadata.js

@@ -1,17 +1,27 @@
-import "./rolldown-runtime-BBjsoOtd.js";
-import { useCapability, useSelector } from "./runtime.js";
-import { MetadataToken } from "@embedpdf/plugin-metadata";
+import { f as useCapability, p as useCapabilityEvent } from "./runtime-B6xcPsEb.js";
+import { n as stateHook } from "./state-CbgxhwLA.js";
+import { MetadataToken, metadataState } from "@embedpdf/plugin-metadata";
 export * from "@embedpdf/plugin-metadata";
 //#region src/metadata.ts
+/**
+* The metadata capability (update, custom.update, refresh, canUpdate) of the
+* surrounding `<DocumentScope>`'s document, else the active one. Outside a
+* document, every method throws `not-ready`.
+*/
 function useMetadata() {
-	const cap = useCapability(MetadataToken);
-	return {
-		metadata: useSelector(MetadataToken, (c) => c.current()),
-		update: cap.update,
-		canEdit: cap.canEdit
-	};
+	return useCapability(MetadataToken);
+}
+/**
+* The metadata's state: the standard fields, your own fields and the load
+* state (the page's State table, declared once in `metadataState`). Takes a
+* selector, and re-renders only when what it returns changes.
+*/
+const useMetadataState = stateHook(metadataState);
+/** Subscribe to one metadata event for the mounted lifetime: `useMetadataEvent((metadata) => metadata.onUpdated, handler)`. */
+function useMetadataEvent(select, handler) {
+	useCapabilityEvent(MetadataToken, select, handler);
 }
 //#endregion
-export { useMetadata };
+export { useMetadata, useMetadataEvent, useMetadataState };
 
 //# sourceMappingURL=metadata.js.map

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":["/**\n * The React surface for @embedpdf/plugin-metadata: the capability, the state\n * declared once in `metadataState`, and its events. The plugin keeps the\n * metadata live off the document event stream, so the state updates after\n * your own edits and after other sessions'.\n *\n *   const metadata = useMetadata();\n *   const { metadata: fields, custom, status } = useMetadataState();\n *   await metadata.update({ title: 'New title' }); // resolves once the state shows it\n */\n\n// One-line-per-feature: registration travels with the UI.\nexport * from '@embedpdf/plugin-metadata';\nimport { MetadataToken, metadataState, type MetadataCapability } from '@embedpdf/plugin-metadata';\nimport type { EventHook } from '@embedpdf/core';\nimport { useCapability, useCapabilityEvent } from './runtime';\nimport { stateHook } from './state';\n\n/**\n * The metadata capability (update, custom.update, refresh, canUpdate) of the\n * surrounding `<DocumentScope>`'s document, else the active one. Outside a\n * document, every method throws `not-ready`.\n */\nexport function useMetadata(): MetadataCapability {\n  return useCapability(MetadataToken);\n}\n\n/**\n * The metadata's state: the standard fields, your own fields and the load\n * state (the page's State table, declared once in `metadataState`). Takes a\n * selector, and re-renders only when what it returns changes.\n */\nexport const useMetadataState = stateHook(metadataState);\n\n/** Subscribe to one metadata event for the mounted lifetime: `useMetadataEvent((metadata) => metadata.onUpdated, handler)`. */\nexport function useMetadataEvent<T>(\n  select: (metadata: MetadataCapability) => EventHook<T>,\n  handler: (event: T) => void,\n): void {\n  useCapabilityEvent(MetadataToken, select, handler);\n}\n"],"mappings":";;;;;;;;;;AAuBA,SAAgB,cAAkC;CAChD,OAAO,cAAc,aAAa;AACpC;;;;;;AAOA,MAAa,mBAAmB,UAAU,aAAa;;AAGvD,SAAgB,iBACd,QACA,SACM;CACN,mBAAmB,eAAe,QAAQ,OAAO;AACnD"}

package/dist/page-edit.cjs

@@ -1,13 +1,17 @@
 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");
 let _embedpdf_plugin_page_edit = require("@embedpdf/plugin-page-edit");
 //#region src/page-edit.ts
-function usePageEditor() {
+/**
+* The page edits of the surrounding `<DocumentScope>`'s document, else the
+* active one. Outside a document, every method throws `not-ready`.
+*/
+function usePageEdit() {
 	return require_runtime.useCapability(_embedpdf_plugin_page_edit.PageEditToken);
 }
 //#endregion
-exports.usePageEditor = usePageEditor;
+exports.usePageEdit = usePageEdit;
 Object.keys(_embedpdf_plugin_page_edit).forEach(function(k) {
 	if (k !== "default" && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
 		enumerable: true,

package/dist/page-edit.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"page-edit.cjs","names":["useCapability","PageEditToken"],"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,OAAOA,gBAAAA,cAAcC,2BAAAA,aAAa;AACpC"}
+{"version":3,"file":"page-edit.cjs","names":["useCapability","PageEditToken"],"sources":["../src/page-edit.ts"],"sourcesContent":["/**\n * The React surface for @embedpdf/plugin-page-edit. The plugin turns a page\n * relative to its rotation and resolves placements, so this file is binding\n * only:\n *\n *   const pageEdit = usePageEdit();\n *   await pageEdit.rotateBy([page.ref], 90);\n */\n\n// One-line-per-feature: registration travels with the UI.\nexport * from '@embedpdf/plugin-page-edit';\nimport { PageEditToken, type PageEditCapability } from '@embedpdf/plugin-page-edit';\nimport { useCapability } from './runtime';\n\n/**\n * The page edits of the surrounding `<DocumentScope>`'s document, else the\n * active one. Outside a document, every method throws `not-ready`.\n */\nexport function usePageEdit(): PageEditCapability {\n  return useCapability(PageEditToken);\n}\n"],"mappings":";;;;;;;;;AAkBA,SAAgB,cAAkC;CAChD,OAAOA,gBAAAA,cAAcC,2BAAAA,aAAa;AACpC"}

package/dist/page-edit.d.cts

@@ -1,7 +1,11 @@
 import { PageEditCapability } from "@embedpdf/plugin-page-edit";
 export * from "@embedpdf/plugin-page-edit";
 //#region src/page-edit.d.ts
-declare function usePageEditor(): PageEditCapability;
+/**
+ * The page edits of the surrounding `<DocumentScope>`'s document, else the
+ * active one. Outside a document, every method throws `not-ready`.
+ */
+declare function usePageEdit(): PageEditCapability;
 //#endregion
-export { usePageEditor };
+export { usePageEdit };
 //# sourceMappingURL=page-edit.d.cts.map

package/dist/page-edit.d.ts

@@ -1,7 +1,11 @@
 import { PageEditCapability } from "@embedpdf/plugin-page-edit";
 export * from "@embedpdf/plugin-page-edit";
 //#region src/page-edit.d.ts
-declare function usePageEditor(): PageEditCapability;
+/**
+ * The page edits of the surrounding `<DocumentScope>`'s document, else the
+ * active one. Outside a document, every method throws `not-ready`.
+ */
+declare function usePageEdit(): PageEditCapability;
 //#endregion
-export { usePageEditor };
+export { usePageEdit };
 //# sourceMappingURL=page-edit.d.ts.map

package/dist/page-edit.js

@@ -1,12 +1,15 @@
-import "./rolldown-runtime-BBjsoOtd.js";
-import { useCapability } from "./runtime.js";
+import { f as useCapability } from "./runtime-B6xcPsEb.js";
 import { PageEditToken } from "@embedpdf/plugin-page-edit";
 export * from "@embedpdf/plugin-page-edit";
 //#region src/page-edit.ts
-function usePageEditor() {
+/**
+* The page edits of the surrounding `<DocumentScope>`'s document, else the
+* active one. Outside a document, every method throws `not-ready`.
+*/
+function usePageEdit() {
 	return useCapability(PageEditToken);
 }
 //#endregion
-export { usePageEditor };
+export { usePageEdit };
 
 //# sourceMappingURL=page-edit.js.map

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":["/**\n * The React surface for @embedpdf/plugin-page-edit. The plugin turns a page\n * relative to its rotation and resolves placements, so this file is binding\n * only:\n *\n *   const pageEdit = usePageEdit();\n *   await pageEdit.rotateBy([page.ref], 90);\n */\n\n// One-line-per-feature: registration travels with the UI.\nexport * from '@embedpdf/plugin-page-edit';\nimport { PageEditToken, type PageEditCapability } from '@embedpdf/plugin-page-edit';\nimport { useCapability } from './runtime';\n\n/**\n * The page edits of the surrounding `<DocumentScope>`'s document, else the\n * active one. Outside a document, every method throws `not-ready`.\n */\nexport function usePageEdit(): PageEditCapability {\n  return useCapability(PageEditToken);\n}\n"],"mappings":";;;;;;;;AAkBA,SAAgB,cAAkC;CAChD,OAAO,cAAc,aAAa;AACpC"}

package/dist/page-layers-Bkaaz8Zf.js

@@ -0,0 +1,26 @@
+import { pageLayersOf } from "@embedpdf/web";
+import { useInsertionEffect, useSyncExternalStore } from "react";
+//#region src/page-layers.ts
+/**
+* The React side of `@embedpdf/web`'s page layers: a layer says, while it's
+* mounted, which part of its page it paints, and the render layer reads which
+* parts are painted, to leave them out of the page's picture.
+*/
+/**
+* Say, while mounted, that this layer paints `part` of its page (`pageRef`,
+* the page context's `ref`). Said in an insertion effect, which runs before
+* any layout effect of the same commit, so a render layer mounted alongside
+* already plans its tiles without it.
+*/
+function usePaintsPagePart(pageRef, part) {
+	useInsertionEffect(() => pageLayersOf(pageRef).paint(part), [pageRef, part]);
+}
+/** Which parts of the page (`pageRef`, the page context's `ref`) the layers on it paint. */
+function usePaintedParts(pageRef) {
+	const layers = pageLayersOf(pageRef);
+	return useSyncExternalStore(layers.subscribe, layers.painted, layers.painted);
+}
+//#endregion
+export { usePaintsPagePart as n, usePaintedParts as t };
+
+//# sourceMappingURL=page-layers-Bkaaz8Zf.js.map

package/dist/page-layers-Bkaaz8Zf.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-layers-Bkaaz8Zf.js","names":[],"sources":["../src/page-layers.ts"],"sourcesContent":["/**\n * The React side of `@embedpdf/web`'s page layers: a layer says, while it's\n * mounted, which part of its page it paints, and the render layer reads which\n * parts are painted, to leave them out of the page's picture.\n */\nimport { pageLayersOf, type PagePart, type PaintedParts } from '@embedpdf/web';\nimport { useInsertionEffect, useSyncExternalStore } from 'react';\n\n/**\n * Say, while mounted, that this layer paints `part` of its page (`pageRef`,\n * the page context's `ref`). Said in an insertion effect, which runs before\n * any layout effect of the same commit, so a render layer mounted alongside\n * already plans its tiles without it.\n */\nexport function usePaintsPagePart(pageRef: object, part: PagePart): void {\n  useInsertionEffect(() => pageLayersOf(pageRef).paint(part), [pageRef, part]);\n}\n\n/** Which parts of the page (`pageRef`, the page context's `ref`) the layers on it paint. */\nexport function usePaintedParts(pageRef: object): PaintedParts {\n  const layers = pageLayersOf(pageRef);\n  return useSyncExternalStore(layers.subscribe, layers.painted, layers.painted);\n}\n"],"mappings":";;;;;;;;;;;;;;AAcA,SAAgB,kBAAkB,SAAiB,MAAsB;CACvE,yBAAyB,aAAa,OAAO,CAAC,CAAC,MAAM,IAAI,GAAG,CAAC,SAAS,IAAI,CAAC;AAC7E;;AAGA,SAAgB,gBAAgB,SAA+B;CAC7D,MAAM,SAAS,aAAa,OAAO;CACnC,OAAO,qBAAqB,OAAO,WAAW,OAAO,SAAS,OAAO,OAAO;AAC9E"}

package/dist/page-layers-BloZDoOV.cjs

@@ -0,0 +1,37 @@
+let _embedpdf_web = require("@embedpdf/web");
+let react = require("react");
+//#region src/page-layers.ts
+/**
+* The React side of `@embedpdf/web`'s page layers: a layer says, while it's
+* mounted, which part of its page it paints, and the render layer reads which
+* parts are painted, to leave them out of the page's picture.
+*/
+/**
+* Say, while mounted, that this layer paints `part` of its page (`pageRef`,
+* the page context's `ref`). Said in an insertion effect, which runs before
+* any layout effect of the same commit, so a render layer mounted alongside
+* already plans its tiles without it.
+*/
+function usePaintsPagePart(pageRef, part) {
+	(0, react.useInsertionEffect)(() => (0, _embedpdf_web.pageLayersOf)(pageRef).paint(part), [pageRef, part]);
+}
+/** Which parts of the page (`pageRef`, the page context's `ref`) the layers on it paint. */
+function usePaintedParts(pageRef) {
+	const layers = (0, _embedpdf_web.pageLayersOf)(pageRef);
+	return (0, react.useSyncExternalStore)(layers.subscribe, layers.painted, layers.painted);
+}
+//#endregion
+Object.defineProperty(exports, "usePaintedParts", {
+	enumerable: true,
+	get: function() {
+		return usePaintedParts;
+	}
+});
+Object.defineProperty(exports, "usePaintsPagePart", {
+	enumerable: true,
+	get: function() {
+		return usePaintsPagePart;
+	}
+});
+
+//# sourceMappingURL=page-layers-BloZDoOV.cjs.map

package/dist/page-layers-BloZDoOV.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-layers-BloZDoOV.cjs","names":[],"sources":["../src/page-layers.ts"],"sourcesContent":["/**\n * The React side of `@embedpdf/web`'s page layers: a layer says, while it's\n * mounted, which part of its page it paints, and the render layer reads which\n * parts are painted, to leave them out of the page's picture.\n */\nimport { pageLayersOf, type PagePart, type PaintedParts } from '@embedpdf/web';\nimport { useInsertionEffect, useSyncExternalStore } from 'react';\n\n/**\n * Say, while mounted, that this layer paints `part` of its page (`pageRef`,\n * the page context's `ref`). Said in an insertion effect, which runs before\n * any layout effect of the same commit, so a render layer mounted alongside\n * already plans its tiles without it.\n */\nexport function usePaintsPagePart(pageRef: object, part: PagePart): void {\n  useInsertionEffect(() => pageLayersOf(pageRef).paint(part), [pageRef, part]);\n}\n\n/** Which parts of the page (`pageRef`, the page context's `ref`) the layers on it paint. */\nexport function usePaintedParts(pageRef: object): PaintedParts {\n  const layers = pageLayersOf(pageRef);\n  return useSyncExternalStore(layers.subscribe, layers.painted, layers.painted);\n}\n"],"mappings":";;;;;;;;;;;;;;AAcA,SAAgB,kBAAkB,SAAiB,MAAsB;CACvE,CAAA,GAAA,MAAA,mBAAA,QAAA,GAAA,cAAA,aAAA,CAAsC,OAAO,CAAC,CAAC,MAAM,IAAI,GAAG,CAAC,SAAS,IAAI,CAAC;AAC7E;;AAGA,SAAgB,gBAAgB,SAA+B;CAC7D,MAAM,UAAA,GAAA,cAAA,aAAA,CAAsB,OAAO;CACnC,QAAA,GAAA,MAAA,qBAAA,CAA4B,OAAO,WAAW,OAAO,SAAS,OAAO,OAAO;AAC9E"}

package/dist/page-view.cjs

@@ -1,125 +1,132 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_rolldown_runtime = require("./rolldown-runtime-DDXJien1.cjs");
-const require_runtime = require("./runtime.cjs");
+const require_runtime = require("./runtime-fzpGv78v.cjs");
 const require_anchored = require("./anchored.cjs");
+const require_interaction = require("./interaction.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");
+let _embedpdf_core = require("@embedpdf/core");
+let _embedpdf_web = require("@embedpdf/web");
 let react = require("react");
 react = require_rolldown_runtime.__toESM(react, 1);
-let _embedpdf_web = require("@embedpdf/web");
+let _embedpdf_plugin_interaction_contract_host = require("@embedpdf/plugin-interaction/contract/host");
 let _embedpdf_core_geometry = require("@embedpdf/core-geometry");
 //#region src/page-view.tsx
 /**
-* <PageView> — a single page surface with NO Stage.
+* <PageView> — a single page surface with no Stage.
 *
 * Same layers + rotation + chrome frame as a `<Stage>` page, but no
-* camera/scroll/zoom and, crucially, NO dependency on `@embedpdf/plugin-stage`.
+* 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, …)
 * works here identically — and it provides the measured `ViewProjector`, so
 * anchored UI (`<AnnotationMenu>`, `<SelectionMenu>`) works here too, portalled
-* and clipping-immune.
+* and clipping-immune. With the interaction plugin registered it is also the
+* page's pointer surface, so tools (text selection, annotation editing) work in
+* it as they do on a Stage page.
 */
-/** 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 require_runtime.useOptionalCapability(_embedpdf_plugin_interaction_contract_host.InteractionToken) ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_interaction.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 = _embedpdf_core_geometry.NO_FRAME, children, pageChrome, style }) {
-	const kernel = require_runtime.useKernel();
-	const active = require_runtime.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 ?? _embedpdf_core_geometry.NO_FRAME;
+	const pageFrame = (0, react.useMemo)(() => ({
+		top,
+		right,
+		bottom,
+		left
+	}), [
+		top,
+		right,
+		bottom,
+		left
+	]);
+	const inScope = require_runtime.useDocumentId();
 	const ref = (0, react.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 = require_runtime.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 = (0, react.useMemo)(() => (0, _embedpdf_core.toPageRef)(pageObjectNumber), [pageObjectNumber]);
 	const dpr = typeof window !== "undefined" ? window.devicePixelRatio || 1 : 1;
-	const transform = (0, react.useMemo)(() => (0, _embedpdf_core_geometry.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 = (0, react.useMemo)(() => (0, _embedpdf_core_geometry.pageTransform)((0, _embedpdf_web.pageViewTransformInput)(base, width, dpr)), [
 		base?.size.width,
 		base?.size.height,
 		base?.userUnit,
-		rotation,
+		base?.rotation,
 		width,
 		dpr
 	]);
 	const viewId = (0, react.useId)();
-	const ctx = (0, react.useMemo)(() => require_runtime.makePageContext(docId ?? "", `page-view:${viewId}`, pon, page, pageFrame, transform, () => ref.current.getBoundingClientRect()), [
+	const ctx = (0, react.useMemo)(() => (0, _embedpdf_web.makePageContext)(docId ?? "", `page-view:${viewId}`, pageRef, page, pageFrame, transform, () => ref.current.getBoundingClientRect()), [
 		docId,
-		pon,
+		pageRef,
 		page,
 		pageFrame,
 		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 projector = (0, react.useMemo)(() => (0, _embedpdf_web.clientPageProjector)(ctx, () => ref.current !== 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;
-	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 = (0, react.useMemo)(() => /* @__PURE__ */ new Set([ctx.ref.objectNumber]), [ctx.ref.objectNumber]);
+	const look = require_runtime.useViewerSettings((settings) => settings.page);
+	if (!docId || !base) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: fallback });
+	const layout = (0, _embedpdf_web.pageSurfaceLayout)(transform, pageFrame);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_runtime.DocumentScope, {
 		id: docId,
-		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: 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: {
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_anchored.ShownPagesProvider, {
+			value: shownPages,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_anchored.ProjectorProvider, {
+				value: projectorBinding,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className,
+					style: {
+						position: "relative",
+						width: layout.outer.width,
+						height: layout.outer.height,
+						...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
-					]
+								...layout.shadow,
+								boxShadow: (0, _embedpdf_web.paint)("page-shadow", look.shadow)
+							} }),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								ref,
+								style: {
+									position: "absolute",
+									...layout.content,
+									background: (0, _embedpdf_web.paint)("page-background", look.background),
+									transform: layout.turn ?? void 0,
+									userSelect: "none",
+									WebkitUserSelect: "none"
+								},
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(PointerSurface, {}), children]
+							}),
+							pageChrome
+						]
+					})
 				})
 			})
 		})

package/dist/page-view.cjs.map

@@ -1 +1 @@
-{"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":";;;;;;;;;;;;;;;;;;;;;;;AAyCA,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;CAGA,MAAM,UAAA,GAAA,MAAA,MAAA,CAAe;CACrB,MAAM,OAAA,GAAA,MAAA,QAAA,OAEFC,gBAAAA,gBACE,SAAS,IACT,aAAa,UACb,KACA,MACA,WACA,iBACM,IAAI,QAAS,sBAAsB,CAC3C,GACF;EAAC;EAAO;EAAK;EAAM;EAAW;EAAW;CAAM,CACjD;CASA,MAAM,aAAA,GAAA,MAAA,QAAA,QACG;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,oBAAA,GAAA,MAAA,QAAA,QACG;EAAE;EAAW,UAAU;EAAK,WAAWC,cAAAA;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,iBAAA,GAAA,kBAAA,IAAA,CAACC,gBAAAA,eAAD;EAAe,IAAI;EACjB,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,iBAAAA,mBAAD;GAAmB,OAAO;GAC1B,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;IAAK,OAAO;KAAE,UAAU;KAAY,OAAO;KAAQ,QAAQ;KAAQ,GAAG;IAAM;IAC1E,UAAA,iBAAA,GAAA,kBAAA,KAAA,CAACC,gBAAAA,cAAD;KAAc,OAAO;KAArB,UAAA;MAEE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD,EACE,OAAO;OACL,UAAU;OACV,MAAM,UAAU;OAChB,KAAK,UAAU;OACf,OAAO,EAAE;OACT,QAAQ,EAAE;OACV,WAAW;MACb,EACD,CAAA;MAED,iBAAA,GAAA,kBAAA,IAAA,CAAC,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.cjs","names":["useOptionalCapability","InteractionHostToken","PagePointerSource","NO_FRAME","useDocumentId","useKernelValue","observeClientGeometry","useViewerSettings","DocumentScope","ShownPagesProvider","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. 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":"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"}

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