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

package/dist/index.cjs

@@ -43,7 +43,6 @@ exports.SelectionClipboard = require_selection.SelectionClipboard;
 exports.SelectionLayer = require_selection.SelectionLayer;
 exports.SelectionMenu = require_selection.SelectionMenu;
 exports.Stage = require_stage.Stage;
-exports.TileLayer = require_render.TileLayer;
 exports.Toolbar = require_toolbar.Toolbar;
 exports.Viewer = require_runtime.Viewer;
 Object.defineProperty(exports, "copySelection", {

package/dist/index.d.cts

@@ -8,7 +8,7 @@ import { useI18n, useLocale, useT } from "./i18n.cjs";
 import { Stage, StageProps, StageTokenProp, useLayout, usePageList, usePages, useStage, useStageSettings, useZoom } from "./stage.cjs";
 import { Scrollbar, ScrollbarAxis, ScrollbarProps, useScrollMetrics } from "./scrollbar.cjs";
 import { PageView, PageViewProps } from "./page-view.cjs";
-import { RenderLayer, RenderLayerProps, TileLayer, TileLayerProps } from "./render.cjs";
+import { RenderLayer, RenderLayerProps } from "./render.cjs";
 import { PagePointerSource, ToolCursorImage, ToolCursorSpec, createClickCounter, useTool, useToolCursor } from "./interaction.cjs";
 import { SelectionClipboard, SelectionClipboardProps, SelectionLayer, SelectionLayerProps, SelectionMenu, SelectionMenuProps, copySelection, useSelection } from "./selection.cjs";
 import { LinkLayer, LinkLayerProps, useLink } from "./link.cjs";
@@ -35,4 +35,4 @@ export * from "@embedpdf/plugin-redaction";
 export * from "@embedpdf/plugin-stamp";
 export * from "@embedpdf/plugin-shell";
 export * from "@embedpdf/core-ui";
-export { type AnchorTarget, Anchored, type AnchoredPlacement, AnchoredProps, AnnotationDraftMenu, AnnotationDraftMenuProps, type AnnotationFlags, AnnotationLayer, AnnotationLayerProps, AnnotationMenu, AnnotationMenuProps, type AnnotationProps, type AnnotationPropsPatch, AnnotationRenderer, AnnotationRendererProps, type Border, CollapsedGroupView, type CreationDraftAnchor, CustomSlotCtx, DocumentGate, DocumentGateProps, DocumentScope, DocumentScopeProps, EmbedPDF, FormLayer, type FormScriptingUiHandlers, type Geom, GroupDisclosureView, type LineEnding, type LineEndings, LinkLayer, LinkLayerProps, MenusHandle, OverflowMenuView, PageContextValue, PagePointerSource, PageProvider, PageView, PageViewProps, ProjectorBinding, ProjectorProvider, type PropKey, type PropSpec, type RenderItem, RenderLayer, RenderLayerProps, Scrollbar, ScrollbarAxis, ScrollbarProps, SearchLayer, SelectionAnchor, SelectionClipboard, SelectionClipboardProps, type SelectionFlags, SelectionLayer, SelectionLayerProps, SelectionMenu, SelectionMenuProps, type SelectionProps, Stage, StageProps, StageTokenProp, StripView, StripViewGroup, type Style, SurfaceHandle, type TextAlign, type TextStyle, TileLayer, TileLayerProps, ToolCursorImage, ToolCursorSpec, Toolbar, ToolbarProps, UseViews, type ViewProjector, Viewer, ViewerProps, copySelection, createClickCounter, filePickerProvider, isMacPlatform, makePageContext, sameAnchor, sameCreationDraftAnchor, shallowArray, useActiveDocumentId, useAnnotation, useAnnotationDefaults, useAnnotationSelected, useAnnotationSelection, useArmStampAsset, useCapability, useCommand, useCommandShortcuts, useCommands, useDocumentId, useDocumentStatus, useDocuments, useFilePickerProvider, useForm, useFormField, useFormScriptingProvider, useI18n, useKernel, useKernelValue, useLayout, useLink, useLocale, useMenus, useMetadata, useOptionalCapability, useOptionalSelector, usePage, usePageEditor, usePageList, usePages, usePendingRedactions, useProjectorBinding, useRedaction, useScrollMetrics, useSearch, useSearchState, useSelection, useSelectionFlags, useSelectionProps, useSelector, useShell, useStage, useStageSettings, useStamp, useStampAssetPreviewUrl, useStampAssets, useStampLibraries, useStripView, useSurface, useT, useTool, useToolCursor, useViews, useZoom };
+export { type AnchorTarget, Anchored, type AnchoredPlacement, AnchoredProps, AnnotationDraftMenu, AnnotationDraftMenuProps, type AnnotationFlags, AnnotationLayer, AnnotationLayerProps, AnnotationMenu, AnnotationMenuProps, type AnnotationProps, type AnnotationPropsPatch, AnnotationRenderer, AnnotationRendererProps, type Border, CollapsedGroupView, type CreationDraftAnchor, CustomSlotCtx, DocumentGate, DocumentGateProps, DocumentScope, DocumentScopeProps, EmbedPDF, FormLayer, type FormScriptingUiHandlers, type Geom, GroupDisclosureView, type LineEnding, type LineEndings, LinkLayer, LinkLayerProps, MenusHandle, OverflowMenuView, PageContextValue, PagePointerSource, PageProvider, PageView, PageViewProps, ProjectorBinding, ProjectorProvider, type PropKey, type PropSpec, type RenderItem, RenderLayer, RenderLayerProps, Scrollbar, ScrollbarAxis, ScrollbarProps, SearchLayer, SelectionAnchor, SelectionClipboard, SelectionClipboardProps, type SelectionFlags, SelectionLayer, SelectionLayerProps, SelectionMenu, SelectionMenuProps, type SelectionProps, Stage, StageProps, StageTokenProp, StripView, StripViewGroup, type Style, SurfaceHandle, type TextAlign, type TextStyle, ToolCursorImage, ToolCursorSpec, Toolbar, ToolbarProps, UseViews, type ViewProjector, Viewer, ViewerProps, copySelection, createClickCounter, filePickerProvider, isMacPlatform, makePageContext, sameAnchor, sameCreationDraftAnchor, shallowArray, useActiveDocumentId, useAnnotation, useAnnotationDefaults, useAnnotationSelected, useAnnotationSelection, useArmStampAsset, useCapability, useCommand, useCommandShortcuts, useCommands, useDocumentId, useDocumentStatus, useDocuments, useFilePickerProvider, useForm, useFormField, useFormScriptingProvider, useI18n, useKernel, useKernelValue, useLayout, useLink, useLocale, useMenus, useMetadata, useOptionalCapability, useOptionalSelector, usePage, usePageEditor, usePageList, usePages, usePendingRedactions, useProjectorBinding, useRedaction, useScrollMetrics, useSearch, useSearchState, useSelection, useSelectionFlags, useSelectionProps, useSelector, useShell, useStage, useStageSettings, useStamp, useStampAssetPreviewUrl, useStampAssets, useStampLibraries, useStripView, useSurface, useT, useTool, useToolCursor, useViews, useZoom };

package/dist/index.d.ts

@@ -8,7 +8,7 @@ import { useI18n, useLocale, useT } from "./i18n.js";
 import { Stage, StageProps, StageTokenProp, useLayout, usePageList, usePages, useStage, useStageSettings, useZoom } from "./stage.js";
 import { Scrollbar, ScrollbarAxis, ScrollbarProps, useScrollMetrics } from "./scrollbar.js";
 import { PageView, PageViewProps } from "./page-view.js";
-import { RenderLayer, RenderLayerProps, TileLayer, TileLayerProps } from "./render.js";
+import { RenderLayer, RenderLayerProps } from "./render.js";
 import { PagePointerSource, ToolCursorImage, ToolCursorSpec, createClickCounter, useTool, useToolCursor } from "./interaction.js";
 import { SelectionClipboard, SelectionClipboardProps, SelectionLayer, SelectionLayerProps, SelectionMenu, SelectionMenuProps, copySelection, useSelection } from "./selection.js";
 import { LinkLayer, LinkLayerProps, useLink } from "./link.js";
@@ -35,4 +35,4 @@ export * from "@embedpdf/plugin-stamp";
 export * from "@embedpdf/plugin-commands";
 export * from "@embedpdf/plugin-shell";
 export * from "@embedpdf/core-ui";
-export { type AnchorTarget, Anchored, type AnchoredPlacement, AnchoredProps, AnnotationDraftMenu, AnnotationDraftMenuProps, type AnnotationFlags, AnnotationLayer, AnnotationLayerProps, AnnotationMenu, AnnotationMenuProps, type AnnotationProps, type AnnotationPropsPatch, AnnotationRenderer, AnnotationRendererProps, type Border, CollapsedGroupView, type CreationDraftAnchor, CustomSlotCtx, DocumentGate, DocumentGateProps, DocumentScope, DocumentScopeProps, EmbedPDF, FormLayer, type FormScriptingUiHandlers, type Geom, GroupDisclosureView, type LineEnding, type LineEndings, LinkLayer, LinkLayerProps, MenusHandle, OverflowMenuView, PageContextValue, PagePointerSource, PageProvider, PageView, PageViewProps, ProjectorBinding, ProjectorProvider, type PropKey, type PropSpec, type RenderItem, RenderLayer, RenderLayerProps, Scrollbar, ScrollbarAxis, ScrollbarProps, SearchLayer, SelectionAnchor, SelectionClipboard, SelectionClipboardProps, type SelectionFlags, SelectionLayer, SelectionLayerProps, SelectionMenu, SelectionMenuProps, type SelectionProps, Stage, StageProps, StageTokenProp, StripView, StripViewGroup, type Style, SurfaceHandle, type TextAlign, type TextStyle, TileLayer, TileLayerProps, ToolCursorImage, ToolCursorSpec, Toolbar, ToolbarProps, UseViews, type ViewProjector, Viewer, ViewerProps, copySelection, createClickCounter, filePickerProvider, isMacPlatform, makePageContext, sameAnchor, sameCreationDraftAnchor, shallowArray, useActiveDocumentId, useAnnotation, useAnnotationDefaults, useAnnotationSelected, useAnnotationSelection, useArmStampAsset, useCapability, useCommand, useCommandShortcuts, useCommands, useDocumentId, useDocumentStatus, useDocuments, useFilePickerProvider, useForm, useFormField, useFormScriptingProvider, useI18n, useKernel, useKernelValue, useLayout, useLink, useLocale, useMenus, useMetadata, useOptionalCapability, useOptionalSelector, usePage, usePageEditor, usePageList, usePages, usePendingRedactions, useProjectorBinding, useRedaction, useScrollMetrics, useSearch, useSearchState, useSelection, useSelectionFlags, useSelectionProps, useSelector, useShell, useStage, useStageSettings, useStamp, useStampAssetPreviewUrl, useStampAssets, useStampLibraries, useStripView, useSurface, useT, useTool, useToolCursor, useViews, useZoom };
+export { type AnchorTarget, Anchored, type AnchoredPlacement, AnchoredProps, AnnotationDraftMenu, AnnotationDraftMenuProps, type AnnotationFlags, AnnotationLayer, AnnotationLayerProps, AnnotationMenu, AnnotationMenuProps, type AnnotationProps, type AnnotationPropsPatch, AnnotationRenderer, AnnotationRendererProps, type Border, CollapsedGroupView, type CreationDraftAnchor, CustomSlotCtx, DocumentGate, DocumentGateProps, DocumentScope, DocumentScopeProps, EmbedPDF, FormLayer, type FormScriptingUiHandlers, type Geom, GroupDisclosureView, type LineEnding, type LineEndings, LinkLayer, LinkLayerProps, MenusHandle, OverflowMenuView, PageContextValue, PagePointerSource, PageProvider, PageView, PageViewProps, ProjectorBinding, ProjectorProvider, type PropKey, type PropSpec, type RenderItem, RenderLayer, RenderLayerProps, Scrollbar, ScrollbarAxis, ScrollbarProps, SearchLayer, SelectionAnchor, SelectionClipboard, SelectionClipboardProps, type SelectionFlags, SelectionLayer, SelectionLayerProps, SelectionMenu, SelectionMenuProps, type SelectionProps, Stage, StageProps, StageTokenProp, StripView, StripViewGroup, type Style, SurfaceHandle, type TextAlign, type TextStyle, ToolCursorImage, ToolCursorSpec, Toolbar, ToolbarProps, UseViews, type ViewProjector, Viewer, ViewerProps, copySelection, createClickCounter, filePickerProvider, isMacPlatform, makePageContext, sameAnchor, sameCreationDraftAnchor, shallowArray, useActiveDocumentId, useAnnotation, useAnnotationDefaults, useAnnotationSelected, useAnnotationSelection, useArmStampAsset, useCapability, useCommand, useCommandShortcuts, useCommands, useDocumentId, useDocumentStatus, useDocuments, useFilePickerProvider, useForm, useFormField, useFormScriptingProvider, useI18n, useKernel, useKernelValue, useLayout, useLink, useLocale, useMenus, useMetadata, useOptionalCapability, useOptionalSelector, usePage, usePageEditor, usePageList, usePages, usePendingRedactions, useProjectorBinding, useRedaction, useScrollMetrics, useSearch, useSearchState, useSelection, useSelectionFlags, useSelectionProps, useSelector, useShell, useStage, useStageSettings, useStamp, useStampAssetPreviewUrl, useStampAssets, useStampLibraries, useStripView, useSurface, useT, useTool, useToolCursor, useViews, useZoom };

package/dist/index.js

@@ -4,7 +4,7 @@ import { PagePointerSource, createClickCounter, useTool, useToolCursor } from ".
 import { Stage, useLayout, usePageList, usePages, useStage, useStageSettings, useZoom } from "./stage.js";
 import { Scrollbar, useScrollMetrics } from "./scrollbar.js";
 import { PageView } from "./page-view.js";
-import { RenderLayer, TileLayer } from "./render.js";
+import { RenderLayer } from "./render.js";
 import { SelectionClipboard, SelectionLayer, SelectionMenu, copySelection, useSelection } from "./selection.js";
 import { AnnotationLayer, filePickerProvider, sameAnchor, sameCreationDraftAnchor, useAnnotation, useAnnotationDefaults, useAnnotationSelected, useAnnotationSelection, useFilePickerProvider, useSelectionFlags, useSelectionProps } from "./annotation.js";
 import { AnnotationDraftMenu, AnnotationMenu } from "./annotation-menu.js";
@@ -35,4 +35,4 @@ export * from "@embedpdf/plugin-stamp";
 export * from "@embedpdf/plugin-commands";
 export * from "@embedpdf/plugin-shell";
 export * from "@embedpdf/core-ui";
-export { Anchored, AnnotationDraftMenu, AnnotationLayer, AnnotationMenu, DocumentGate, DocumentScope, EmbedPDF, FormLayer, LinkLayer, PagePointerSource, PageProvider, PageView, ProjectorProvider, RenderLayer, Scrollbar, SearchLayer, SelectionClipboard, SelectionLayer, SelectionMenu, Stage, TileLayer, Toolbar, Viewer, copySelection, createClickCounter, filePickerProvider, isMacPlatform, makePageContext, sameAnchor, sameCreationDraftAnchor, shallowArray, useActiveDocumentId, useAnnotation, useAnnotationDefaults, useAnnotationSelected, useAnnotationSelection, useArmStampAsset, useCapability, useCommand, useCommandShortcuts, useCommands, useDocumentId, useDocumentStatus, useDocuments, useFilePickerProvider, useForm, useFormField, useFormScriptingProvider, useI18n, useKernel, useKernelValue, useLayout, useLink, useLocale, useMenus, useMetadata, useOptionalCapability, useOptionalSelector, usePage, usePageEditor, usePageList, usePages, usePendingRedactions, useProjectorBinding, useRedaction, useScrollMetrics, useSearch, useSearchState, useSelection, useSelectionFlags, useSelectionProps, useSelector, useShell, useStage, useStageSettings, useStamp, useStampAssetPreviewUrl, useStampAssets, useStampLibraries, useStripView, useSurface, useT, useTool, useToolCursor, useViews, useZoom };
+export { Anchored, AnnotationDraftMenu, AnnotationLayer, AnnotationMenu, DocumentGate, DocumentScope, EmbedPDF, FormLayer, LinkLayer, PagePointerSource, PageProvider, PageView, ProjectorProvider, RenderLayer, Scrollbar, SearchLayer, SelectionClipboard, SelectionLayer, SelectionMenu, Stage, Toolbar, Viewer, copySelection, createClickCounter, filePickerProvider, isMacPlatform, makePageContext, sameAnchor, sameCreationDraftAnchor, shallowArray, useActiveDocumentId, useAnnotation, useAnnotationDefaults, useAnnotationSelected, useAnnotationSelection, useArmStampAsset, useCapability, useCommand, useCommandShortcuts, useCommands, useDocumentId, useDocumentStatus, useDocuments, useFilePickerProvider, useForm, useFormField, useFormScriptingProvider, useI18n, useKernel, useKernelValue, useLayout, useLink, useLocale, useMenus, useMetadata, useOptionalCapability, useOptionalSelector, usePage, usePageEditor, usePageList, usePages, usePendingRedactions, useProjectorBinding, useRedaction, useScrollMetrics, useSearch, useSearchState, useSelection, useSelectionFlags, useSelectionProps, useSelector, useShell, useStage, useStageSettings, useStamp, useStampAssetPreviewUrl, useStampAssets, useStampLibraries, useStripView, useSurface, useT, useTool, useToolCursor, useViews, useZoom };

package/dist/render.cjs

@@ -4,11 +4,14 @@ const require_runtime = require("./runtime.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");
 let react = require("react");
 react = require_rolldown_runtime.__toESM(react, 1);
+let _embedpdf_web = require("@embedpdf/web");
 let _embedpdf_plugin_render = require("@embedpdf/plugin-render");
 //#region src/render.tsx
-function RenderLayer({ annotations = true } = {}) {
+let warnedTileSize = false;
+function RenderLayer({ annotations = true, tiles = true } = {}) {
 	const page = require_runtime.usePage();
 	const render = require_runtime.useCapability(_embedpdf_plugin_render.RenderToken);
+	const settings = render.paintSettings();
 	const ref = (0, react.useRef)(null);
 	const sourceKey = require_runtime.useSelector(_embedpdf_plugin_render.RenderToken, (c) => c.renderSourceKey(page.pon, {
 		scale: page.transform.renderScale,
@@ -41,7 +44,7 @@ function RenderLayer({ annotations = true } = {}) {
 		page.pon,
 		sourceKey
 	]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
 		ref,
 		alt: "",
 		draggable: false,
@@ -52,19 +55,26 @@ function RenderLayer({ annotations = true } = {}) {
 			height: "100%",
 			pointerEvents: "none"
 		}
-	});
+	}), tiles && settings.tiles ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TilePlane, {
+		annotations,
+		fadeMs: settings.fadeMs
+	}) : null] });
 }
 /**
-* TileLayer — the sharp plane above the base rung.
+* The sharp plane above the base — the plugin's retention-safe paint plan
+* as keyed <img>s. Each tile reports painted after its first presentation
+* opportunity (and its inverse on unmount), so retained coarser generations
+* release only when their replacement is truly compositable.
 *
-* Mounting it is the per-lens OPT-IN; whether it spends anything is demand
-* arithmetic (a thumbnail rail's demand never engages). The paint list is the
-* plugin's retention-safe plan: keyed <img>s inside ONE container that carries
-* the page scale as a single transform (one rounding context — no tile seams),
-* with `onLoad` reporting the decode boundary back so retained coarser
-* generations release only when their replacement is truly on screen.
+* Tiles are placed in VIEW (CSS px) space directly — never in page points
+* under a scaled container. Blink quantizes layout lengths to 1/64 CSS px
+* BEFORE transforms apply, so a pt-space rect under a ×25 zoom transform
+* turns that harmless 1/64 into ±0.4px+ of per-tile misplacement — visible
+* seams and per-zoom-step letter shifts that grow with depth. In view
+* space the same quantization is a fixed ~1/64 CSS px at every zoom.
+* (v2 placed tiles in screen px for exactly this reason.)
 */
-function TileLayer({ annotations = true } = {}) {
+function TilePlane({ annotations, fadeMs }) {
 	const page = require_runtime.usePage();
 	const render = require_runtime.useCapability(_embedpdf_plugin_render.RenderToken);
 	const demand = page.getViewDemand?.() ?? { desiredDeviceWidth: page.transform.deviceWidth };
@@ -72,64 +82,70 @@ function TileLayer({ annotations = true } = {}) {
 	(0, react.useEffect)(() => () => render.releaseTiles(page.pon), [render, page.pon]);
 	if (plan.paint.length === 0) return null;
 	const t = page.transform;
-	const scale = t.viewScale;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+	const s = t.viewScale;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		style: {
 			position: "absolute",
 			left: 0,
 			top: 0,
-			width: t.contentWidth / scale,
-			height: t.contentHeight / scale,
-			transform: `scale(${scale})`,
-			transformOrigin: "0 0",
-			pointerEvents: "none"
+			width: t.contentWidth,
+			height: t.contentHeight,
+			pointerEvents: "none",
+			isolation: "isolate"
 		},
-		children: plan.paint.map((source) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TileImg, {
+		children: [fadeMs > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("style", { children: `@keyframes epdf-tile-in { from { opacity: 0 } to { opacity: 1 } }` }) : null, plan.paint.map((source) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TileImg, {
 			source,
-			onPainted: () => render.tilePainted(page.pon, source.key)
-		}, source.key))
+			view: {
+				x: source.rect.x * s,
+				y: source.rect.y * s,
+				width: source.rect.width * s,
+				height: source.rect.height * s
+			},
+			fadeMs,
+			onPainted: () => render.tilePainted(page.pon, source.key),
+			onUnpainted: () => render.tileUnpainted(page.pon, source.key)
+		}, source.key))]
 	});
 }
-/** One tile: object-URL lifecycle + the painted (decode-boundary) report. */
-function TileImg({ source, onPainted }) {
+/** One tile: geometry plus the shared browser image binding. The binding
+*  hides the incomplete image, reports painted after its first presentation
+*  opportunity, and inverts that report when the element leaves the DOM. */
+function TileImg({ source, view, fadeMs, onPainted, onUnpainted }) {
 	const ref = (0, react.useRef)(null);
-	(0, react.useEffect)(() => {
-		const controller = new AbortController();
-		let revoke;
-		(async () => {
-			try {
-				const obj = await source.handle.objectUrl(controller.signal);
-				if (controller.signal.aborted) {
-					obj.revoke();
-					return;
-				}
-				revoke = obj.revoke;
-				if (ref.current) ref.current.src = obj.url;
-			} catch {}
-		})();
-		return () => {
-			controller.abort();
-			revoke?.();
-		};
+	(0, react.useLayoutEffect)(() => {
+		if (!ref.current) return;
+		return (0, _embedpdf_web.bindPaintedImage)(ref.current, source.handle, {
+			onPainted,
+			onUnpainted
+		});
 	}, [source.handle]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
 		ref,
 		alt: "",
 		draggable: false,
-		onLoad: onPainted,
+		onLoad: (e) => {
+			const w = e.currentTarget.naturalWidth;
+			if (w > 0 && !warnedTileSize) {
+				const expected = Math.round(source.rect.width * source.scale);
+				if (Math.abs(w - expected) > 1) {
+					warnedTileSize = true;
+					console.warn(`[render] tile bitmap ${w}px wide does not match its rect (expected ~${expected}px) — stale raster identity? key=${source.key}`);
+				}
+			}
+		},
 		style: {
 			position: "absolute",
-			left: source.rect.x,
-			top: source.rect.y,
-			width: source.rect.width,
-			height: source.rect.height,
-			zIndex: source.z
+			left: view.x,
+			top: view.y,
+			width: view.width,
+			height: view.height,
+			zIndex: source.z,
+			...fadeMs > 0 ? { animation: `epdf-tile-in ${fadeMs}ms ease-out` } : null
 		}
 	});
 }
 //#endregion
 exports.RenderLayer = RenderLayer;
-exports.TileLayer = TileLayer;
 Object.keys(_embedpdf_plugin_render).forEach(function(k) {
 	if (k !== "default" && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
 		enumerable: true,

package/dist/render.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"render.cjs","names":["usePage","useCapability","RenderToken","useSelector"],"sources":["../src/render.tsx"],"sourcesContent":["/**\n * RenderLayer + TileLayer — the React views of @embedpdf/plugin-render.\n *\n * RenderLayer paints the BASE rung to an <img> from the engine's ENCODED\n * image() (identical for local & cloud). TileLayer paints the tile paint-plan\n * ABOVE it when the deployment lattice caps the base below the demand — mount\n * it per lens (the main stage yes, a thumbnail rail no); where the demand is\n * small it engages nothing. Both are dumb painters: every decision (policy\n * conformance, want sets, retention, release) is plugin-render's.\n */\n\n// One-line-per-feature: registration travels with the UI.\nexport * from '@embedpdf/plugin-render';\nimport * as React from 'react';\nimport { useEffect, useRef } from 'react';\nimport { RenderToken } from '@embedpdf/plugin-render';\nimport type { PageViewDemand, TilePaintSource } from '@embedpdf/plugin-render';\nimport { useCapability, usePage, useSelector } from './runtime';\n\nexport interface RenderLayerProps {\n  /**\n   * Bake annotations into the page bitmap (default true). Pass false when an\n   * <AnnotationLayer> owns annotation rendering, so they aren't drawn twice.\n   */\n  annotations?: boolean;\n}\n\nexport function RenderLayer({ annotations = true }: RenderLayerProps = {}) {\n  const page = usePage();\n  const render = useCapability(RenderToken);\n  const ref = useRef<HTMLImageElement>(null);\n  // ONE dependency: the raster's canonical identity — conformed viewport +\n  // annotations flag + epoch. Inside a lattice\n  // rung, zoom changes don't move it: no refetch, no DOM churn — the stage's\n  // CSS transform does the scaling. It changes exactly at rung crossings and\n  // on CONFIRMED mutations (epoch bumps at commit, never mid-gesture). Under\n  // `continuous` it embeds the exact scale — v2 behavior byte-for-byte. The\n  // policy behind it is a document fact the kernel materialized before\n  // publish, so the key is always computable.\n  const sourceKey = useSelector(RenderToken, (c) =>\n    c.renderSourceKey(page.pon, {\n      scale: page.transform.renderScale,\n      includeAnnotations: annotations,\n    }),\n  );\n  useEffect(() => {\n    const controller = new AbortController();\n    let revoke: (() => void) | undefined;\n    (async () => {\n      try {\n        // The capability conforms this to the policy (lattice → ladder width,\n        // continuous → this exact scale) and collapses same-key asks in its\n        // raster store. A stale-closure scale is harmless by construction:\n        // any scale in this rung produces this key's canonical request.\n        const image = await render.renderPage(page.pon, {\n          scale: page.transform.renderScale,\n          includeAnnotations: annotations,\n          signal: controller.signal,\n        });\n        const obj = await image.objectUrl(controller.signal);\n        if (controller.signal.aborted) {\n          obj.revoke();\n          return;\n        }\n        revoke = obj.revoke;\n        if (ref.current) ref.current.src = obj.url;\n      } catch {\n        /* aborted (camera moved / unmounted) or render failed */\n      }\n    })();\n    return () => {\n      controller.abort();\n      revoke?.();\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- sourceKey IS the\n    // render identity; scale/annotations/epoch are folded into it upstream.\n  }, [render, page.pon, sourceKey]);\n  return (\n    <img\n      ref={ref}\n      alt=\"\"\n      draggable={false}\n      style={{\n        position: 'absolute',\n        inset: 0,\n        width: '100%',\n        height: '100%',\n        pointerEvents: 'none',\n      }}\n    />\n  );\n}\n\nexport interface TileLayerProps {\n  /**\n   * Bake annotations into tile bitmaps (default true). Pass false when an\n   * <AnnotationLayer> owns annotation rendering — the composition that keeps\n   * tile artifacts annotation-version-free (CDN-stable across edits).\n   */\n  annotations?: boolean;\n}\n\n/**\n * TileLayer — the sharp plane above the base rung.\n *\n * Mounting it is the per-lens OPT-IN; whether it spends anything is demand\n * arithmetic (a thumbnail rail's demand never engages). The paint list is the\n * plugin's retention-safe plan: keyed <img>s inside ONE container that carries\n * the page scale as a single transform (one rounding context — no tile seams),\n * with `onLoad` reporting the decode boundary back so retained coarser\n * generations release only when their replacement is truly on screen.\n */\nexport function TileLayer({ annotations = true }: TileLayerProps = {}) {\n  const page = usePage();\n  const render = useCapability(RenderToken);\n  // Demand: the host's live camera view (Stage) or whole-page (PageView).\n  const demand: PageViewDemand = page.getViewDemand?.() ?? {\n    desiredDeviceWidth: page.transform.deviceWidth,\n  };\n  const plan = useSelector(RenderToken, (c) =>\n    c.tilePlan(page.pon, demand, { includeAnnotations: annotations }),\n  );\n  // Lens unmounted: stop in-flight tile fetches; resolved bytes stay cached.\n  useEffect(() => () => render.releaseTiles(page.pon), [render, page.pon]);\n  if (plan.paint.length === 0) return null;\n  const t = page.transform;\n  const scale = t.viewScale;\n  return (\n    <div\n      style={{\n        position: 'absolute',\n        left: 0,\n        top: 0,\n        width: t.contentWidth / scale,\n        height: t.contentHeight / scale,\n        transform: `scale(${scale})`,\n        transformOrigin: '0 0',\n        pointerEvents: 'none',\n      }}\n    >\n      {plan.paint.map((source) => (\n        <TileImg\n          key={source.key}\n          source={source}\n          onPainted={() => render.tilePainted(page.pon, source.key)}\n        />\n      ))}\n    </div>\n  );\n}\n\n/** One tile: object-URL lifecycle + the painted (decode-boundary) report. */\nfunction TileImg({ source, onPainted }: { source: TilePaintSource; onPainted: () => void }) {\n  const ref = useRef<HTMLImageElement>(null);\n  useEffect(() => {\n    const controller = new AbortController();\n    let revoke: (() => void) | undefined;\n    (async () => {\n      try {\n        const obj = await source.handle.objectUrl(controller.signal);\n        if (controller.signal.aborted) {\n          obj.revoke();\n          return;\n        }\n        revoke = obj.revoke;\n        if (ref.current) ref.current.src = obj.url;\n      } catch {\n        /* aborted (plan moved on) */\n      }\n    })();\n    return () => {\n      controller.abort();\n      revoke?.();\n    };\n  }, [source.handle]);\n  return (\n    <img\n      ref={ref}\n      alt=\"\"\n      draggable={false}\n      onLoad={onPainted}\n      style={{\n        position: 'absolute',\n        left: source.rect.x,\n        top: source.rect.y,\n        width: source.rect.width,\n        height: source.rect.height,\n        zIndex: source.z,\n      }}\n    />\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"render.cjs","names":["usePage","useCapability","RenderToken","useSelector"],"sources":["../src/render.tsx"],"sourcesContent":["/**\n * RenderLayer — the React view of @embedpdf/plugin-render. The page raster\n * is ONE concern with two planes:\n *\n *   - the BASE plane: a whole-page <img> at the plugin's resolved render\n *     points — the exact settled demand capped at the pixel budget on a\n *     continuous (local) engine, the advertised ladder on a lattice (cloud)\n *     deployment. Always present; the instant backdrop.\n *   - the TILE plane: the plugin's retention-safe paint plan above it,\n *     engaging by demand arithmetic when the view wants more pixels than\n *     the base may spend. A thumbnail-sized demand engages nothing — the\n *     arithmetic is the configuration.\n *\n * The layer is a DUMB painter, deliberately thin: plain <img>s bound through\n * the shared browser adapter, with painted/unpainted reports around their\n * visible lifetime. Every decision — strategy ∧ policy conformance, want\n * sets, level settling, retention, release — is plugin-render's; anything\n * mid-gesture simply CSS-scales until the plugin hands down new pixels.\n */\n\n// One-line-per-feature: registration travels with the UI.\nexport * from '@embedpdf/plugin-render';\nimport * as React from 'react';\nimport { useEffect, useLayoutEffect, useRef } from 'react';\nimport { RenderToken } from '@embedpdf/plugin-render';\nimport type { PageViewDemand, TilePaintSource } from '@embedpdf/plugin-render';\nimport { bindPaintedImage } from '@embedpdf/web';\nimport { useCapability, usePage, useSelector } from './runtime';\n\nexport interface RenderLayerProps {\n  /**\n   * Bake annotations into the page bitmap (default true). Pass false when an\n   * <AnnotationLayer> owns annotation rendering, so they aren't drawn twice.\n   */\n  annotations?: boolean;\n  /**\n   * Mount the tile plane (default true). Whether it SPENDS anything is\n   * demand arithmetic — leave it on; pass false only for a lens that must\n   * never tile even under deep zoom.\n   */\n  tiles?: boolean;\n}\n\nlet warnedTileSize = false;\n\nexport function RenderLayer({ annotations = true, tiles = true }: RenderLayerProps = {}) {\n  const page = usePage();\n  const render = useCapability(RenderToken);\n  const settings = render.paintSettings();\n  const ref = useRef<HTMLImageElement>(null);\n\n  // ONE dependency: the raster's canonical identity — conformed width +\n  // annotations flag + epoch. Under a lattice it moves only at rung\n  // crossings; under exact mode it tracks the demand and is CONSTANT above\n  // the budget — so the deep-zoom backdrop never refetches, and the sub-\n  // budget range refetches per settled demand exactly like v2 did.\n  const sourceKey = useSelector(RenderToken, (c) =>\n    c.renderSourceKey(page.pon, {\n      scale: page.transform.renderScale,\n      includeAnnotations: annotations,\n    }),\n  );\n\n  useEffect(() => {\n    const controller = new AbortController();\n    let revoke: (() => void) | undefined;\n    (async () => {\n      try {\n        // The capability conforms this to the resolved render points and\n        // collapses same-key asks in its raster store. A stale-closure scale\n        // is harmless by construction: any scale mapping to this key\n        // produces this key's canonical request.\n        const image = await render.renderPage(page.pon, {\n          scale: page.transform.renderScale,\n          includeAnnotations: annotations,\n          signal: controller.signal,\n        });\n        const obj = await image.objectUrl(controller.signal);\n        if (controller.signal.aborted) {\n          obj.revoke();\n          return;\n        }\n        revoke = obj.revoke;\n        // Imperative src on a STABLE element: the browser keeps the old\n        // bitmap until the new one decodes, and nothing ever re-requests the\n        // old URL — so revoke-on-cleanup is safe here by construction.\n        if (ref.current) ref.current.src = obj.url;\n      } catch {\n        /* aborted (camera moved / unmounted) or render failed */\n      }\n    })();\n    return () => {\n      controller.abort();\n      revoke?.();\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- sourceKey IS the\n    // render identity; scale/annotations/epoch are folded into it upstream.\n  }, [render, page.pon, sourceKey]);\n\n  return (\n    <>\n      <img\n        ref={ref}\n        alt=\"\"\n        draggable={false}\n        style={{\n          position: 'absolute',\n          inset: 0,\n          width: '100%',\n          height: '100%',\n          pointerEvents: 'none',\n        }}\n      />\n      {tiles && settings.tiles ? (\n        <TilePlane annotations={annotations} fadeMs={settings.fadeMs} />\n      ) : null}\n    </>\n  );\n}\n\n/**\n * The sharp plane above the base — the plugin's retention-safe paint plan\n * as keyed <img>s. Each tile reports painted after its first presentation\n * opportunity (and its inverse on unmount), so retained coarser generations\n * release only when their replacement is truly compositable.\n *\n * Tiles are placed in VIEW (CSS px) space directly — never in page points\n * under a scaled container. Blink quantizes layout lengths to 1/64 CSS px\n * BEFORE transforms apply, so a pt-space rect under a ×25 zoom transform\n * turns that harmless 1/64 into ±0.4px+ of per-tile misplacement — visible\n * seams and per-zoom-step letter shifts that grow with depth. In view\n * space the same quantization is a fixed ~1/64 CSS px at every zoom.\n * (v2 placed tiles in screen px for exactly this reason.)\n */\nfunction TilePlane({ annotations, fadeMs }: { annotations: boolean; fadeMs: number }) {\n  const page = usePage();\n  const render = useCapability(RenderToken);\n  // Demand: the host's live camera view (Stage) or whole-page (PageView).\n  // Level settling lives in the plugin (its settle gate), pan stays live.\n  const demand: PageViewDemand = page.getViewDemand?.() ?? {\n    desiredDeviceWidth: page.transform.deviceWidth,\n  };\n  const plan = useSelector(RenderToken, (c) =>\n    c.tilePlan(page.pon, demand, { includeAnnotations: annotations }),\n  );\n  // Lens unmounted: stop in-flight tile fetches; resolved bytes stay cached.\n  useEffect(() => () => render.releaseTiles(page.pon), [render, page.pon]);\n  if (plan.paint.length === 0) return null;\n  const t = page.transform;\n  const s = t.viewScale;\n  return (\n    <div\n      style={{\n        position: 'absolute',\n        left: 0,\n        top: 0,\n        width: t.contentWidth,\n        height: t.contentHeight,\n        pointerEvents: 'none',\n        // STACKING CONTRACT: tile <img>s carry zIndex ranks (coarse under\n        // fine) that exist only while generations are mixed — mid-zoom. This\n        // container MUST be a stacking context so those ranks stay internal;\n        // without it they join the Stage's context and paint above every\n        // z-auto sibling (annotations, page chrome, menus) exactly while\n        // zooming. The old scaled container created one implicitly via its\n        // transform; `isolation` is the explicit, no-side-effect way.\n        isolation: 'isolate',\n      }}\n    >\n      {fadeMs > 0 ? (\n        <style>{`@keyframes epdf-tile-in { from { opacity: 0 } to { opacity: 1 } }`}</style>\n      ) : null}\n      {plan.paint.map((source) => (\n        <TileImg\n          key={source.key}\n          source={source}\n          view={{\n            x: source.rect.x * s,\n            y: source.rect.y * s,\n            width: source.rect.width * s,\n            height: source.rect.height * s,\n          }}\n          fadeMs={fadeMs}\n          onPainted={() => render.tilePainted(page.pon, source.key)}\n          onUnpainted={() => render.tileUnpainted(page.pon, source.key)}\n        />\n      ))}\n    </div>\n  );\n}\n\n/** One tile: geometry plus the shared browser image binding. The binding\n *  hides the incomplete image, reports painted after its first presentation\n *  opportunity, and inverts that report when the element leaves the DOM. */\nfunction TileImg({\n  source,\n  view,\n  fadeMs,\n  onPainted,\n  onUnpainted,\n}: {\n  source: TilePaintSource;\n  /** Placement rect in VIEW (CSS px) space. */\n  view: { x: number; y: number; width: number; height: number };\n  fadeMs: number;\n  onPainted: () => void;\n  onUnpainted: () => void;\n}) {\n  const ref = useRef<HTMLImageElement>(null);\n  useLayoutEffect(() => {\n    if (!ref.current) return;\n    return bindPaintedImage(ref.current, source.handle, { onPainted, onUnpainted });\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- the handle is\n    // the bitmap's identity; the report callbacks carry stable values.\n  }, [source.handle]);\n  return (\n    <img\n      ref={ref}\n      alt=\"\"\n      draggable={false}\n      onLoad={(e) => {\n        // A raster whose intrinsic size disagrees with its rect would be\n        // silently stretched into place — the stale-handle bug class.\n        const w = e.currentTarget.naturalWidth;\n        if (w > 0 && !warnedTileSize) {\n          const expected = Math.round(source.rect.width * source.scale);\n          if (Math.abs(w - expected) > 1) {\n            warnedTileSize = true;\n            console.warn(\n              `[render] tile bitmap ${w}px wide does not match its rect ` +\n                `(expected ~${expected}px) — stale raster identity? key=${source.key}`,\n            );\n          }\n        }\n      }}\n      style={{\n        position: 'absolute',\n        left: view.x,\n        top: view.y,\n        width: view.width,\n        height: view.height,\n        zIndex: source.z,\n        ...(fadeMs > 0 ? { animation: `epdf-tile-in ${fadeMs}ms ease-out` } : null),\n      }}\n    />\n  );\n}\n"],"mappings":"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"}

package/dist/render.d.cts

@@ -6,27 +6,14 @@ interface RenderLayerProps {
    * <AnnotationLayer> owns annotation rendering, so they aren't drawn twice.
    */
   annotations?: boolean;
-}
-declare function RenderLayer({ annotations }?: RenderLayerProps): import("react/jsx-runtime").JSX.Element;
-interface TileLayerProps {
   /**
-   * Bake annotations into tile bitmaps (default true). Pass false when an
-   * <AnnotationLayer> owns annotation rendering — the composition that keeps
-   * tile artifacts annotation-version-free (CDN-stable across edits).
+   * Mount the tile plane (default true). Whether it SPENDS anything is
+   * demand arithmetic — leave it on; pass false only for a lens that must
+   * never tile even under deep zoom.
    */
-  annotations?: boolean;
+  tiles?: boolean;
 }
-/**
- * TileLayer — the sharp plane above the base rung.
- *
- * Mounting it is the per-lens OPT-IN; whether it spends anything is demand
- * arithmetic (a thumbnail rail's demand never engages). The paint list is the
- * plugin's retention-safe plan: keyed <img>s inside ONE container that carries
- * the page scale as a single transform (one rounding context — no tile seams),
- * with `onLoad` reporting the decode boundary back so retained coarser
- * generations release only when their replacement is truly on screen.
- */
-declare function TileLayer({ annotations }?: TileLayerProps): import("react/jsx-runtime").JSX.Element | null;
+declare function RenderLayer({ annotations, tiles }?: RenderLayerProps): import("react/jsx-runtime").JSX.Element;
 //#endregion
-export { RenderLayer, RenderLayerProps, TileLayer, TileLayerProps };
+export { RenderLayer, RenderLayerProps };
 //# sourceMappingURL=render.d.cts.map

package/dist/render.d.ts

@@ -6,27 +6,14 @@ interface RenderLayerProps {
    * <AnnotationLayer> owns annotation rendering, so they aren't drawn twice.
    */
   annotations?: boolean;
-}
-declare function RenderLayer({ annotations }?: RenderLayerProps): import("react/jsx-runtime").JSX.Element;
-interface TileLayerProps {
   /**
-   * Bake annotations into tile bitmaps (default true). Pass false when an
-   * <AnnotationLayer> owns annotation rendering — the composition that keeps
-   * tile artifacts annotation-version-free (CDN-stable across edits).
+   * Mount the tile plane (default true). Whether it SPENDS anything is
+   * demand arithmetic — leave it on; pass false only for a lens that must
+   * never tile even under deep zoom.
    */
-  annotations?: boolean;
+  tiles?: boolean;
 }
-/**
- * TileLayer — the sharp plane above the base rung.
- *
- * Mounting it is the per-lens OPT-IN; whether it spends anything is demand
- * arithmetic (a thumbnail rail's demand never engages). The paint list is the
- * plugin's retention-safe plan: keyed <img>s inside ONE container that carries
- * the page scale as a single transform (one rounding context — no tile seams),
- * with `onLoad` reporting the decode boundary back so retained coarser
- * generations release only when their replacement is truly on screen.
- */
-declare function TileLayer({ annotations }?: TileLayerProps): import("react/jsx-runtime").JSX.Element | null;
+declare function RenderLayer({ annotations, tiles }?: RenderLayerProps): import("react/jsx-runtime").JSX.Element;
 //#endregion
-export { RenderLayer, RenderLayerProps, TileLayer, TileLayerProps };
+export { RenderLayer, RenderLayerProps };
 //# sourceMappingURL=render.d.ts.map

package/dist/render.js

@@ -1,12 +1,15 @@
 import { useCapability, usePage, useSelector } from "./runtime.js";
-import { jsx } from "react/jsx-runtime";
-import { useEffect, useRef } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useLayoutEffect, useRef } from "react";
+import { bindPaintedImage } from "@embedpdf/web";
 import { RenderToken } from "@embedpdf/plugin-render";
 export * from "@embedpdf/plugin-render";
 //#region src/render.tsx
-function RenderLayer({ annotations = true } = {}) {
+let warnedTileSize = false;
+function RenderLayer({ annotations = true, tiles = true } = {}) {
 	const page = usePage();
 	const render = useCapability(RenderToken);
+	const settings = render.paintSettings();
 	const ref = useRef(null);
 	const sourceKey = useSelector(RenderToken, (c) => c.renderSourceKey(page.pon, {
 		scale: page.transform.renderScale,
@@ -39,7 +42,7 @@ function RenderLayer({ annotations = true } = {}) {
 		page.pon,
 		sourceKey
 	]);
-	return /* @__PURE__ */ jsx("img", {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("img", {
 		ref,
 		alt: "",
 		draggable: false,
@@ -50,19 +53,26 @@ function RenderLayer({ annotations = true } = {}) {
 			height: "100%",
 			pointerEvents: "none"
 		}
-	});
+	}), tiles && settings.tiles ? /* @__PURE__ */ jsx(TilePlane, {
+		annotations,
+		fadeMs: settings.fadeMs
+	}) : null] });
 }
 /**
-* TileLayer — the sharp plane above the base rung.
+* The sharp plane above the base — the plugin's retention-safe paint plan
+* as keyed <img>s. Each tile reports painted after its first presentation
+* opportunity (and its inverse on unmount), so retained coarser generations
+* release only when their replacement is truly compositable.
 *
-* Mounting it is the per-lens OPT-IN; whether it spends anything is demand
-* arithmetic (a thumbnail rail's demand never engages). The paint list is the
-* plugin's retention-safe plan: keyed <img>s inside ONE container that carries
-* the page scale as a single transform (one rounding context — no tile seams),
-* with `onLoad` reporting the decode boundary back so retained coarser
-* generations release only when their replacement is truly on screen.
+* Tiles are placed in VIEW (CSS px) space directly — never in page points
+* under a scaled container. Blink quantizes layout lengths to 1/64 CSS px
+* BEFORE transforms apply, so a pt-space rect under a ×25 zoom transform
+* turns that harmless 1/64 into ±0.4px+ of per-tile misplacement — visible
+* seams and per-zoom-step letter shifts that grow with depth. In view
+* space the same quantization is a fixed ~1/64 CSS px at every zoom.
+* (v2 placed tiles in screen px for exactly this reason.)
 */
-function TileLayer({ annotations = true } = {}) {
+function TilePlane({ annotations, fadeMs }) {
 	const page = usePage();
 	const render = useCapability(RenderToken);
 	const demand = page.getViewDemand?.() ?? { desiredDeviceWidth: page.transform.deviceWidth };
@@ -70,62 +80,69 @@ function TileLayer({ annotations = true } = {}) {
 	useEffect(() => () => render.releaseTiles(page.pon), [render, page.pon]);
 	if (plan.paint.length === 0) return null;
 	const t = page.transform;
-	const scale = t.viewScale;
-	return /* @__PURE__ */ jsx("div", {
+	const s = t.viewScale;
+	return /* @__PURE__ */ jsxs("div", {
 		style: {
 			position: "absolute",
 			left: 0,
 			top: 0,
-			width: t.contentWidth / scale,
-			height: t.contentHeight / scale,
-			transform: `scale(${scale})`,
-			transformOrigin: "0 0",
-			pointerEvents: "none"
+			width: t.contentWidth,
+			height: t.contentHeight,
+			pointerEvents: "none",
+			isolation: "isolate"
 		},
-		children: plan.paint.map((source) => /* @__PURE__ */ jsx(TileImg, {
+		children: [fadeMs > 0 ? /* @__PURE__ */ jsx("style", { children: `@keyframes epdf-tile-in { from { opacity: 0 } to { opacity: 1 } }` }) : null, plan.paint.map((source) => /* @__PURE__ */ jsx(TileImg, {
 			source,
-			onPainted: () => render.tilePainted(page.pon, source.key)
-		}, source.key))
+			view: {
+				x: source.rect.x * s,
+				y: source.rect.y * s,
+				width: source.rect.width * s,
+				height: source.rect.height * s
+			},
+			fadeMs,
+			onPainted: () => render.tilePainted(page.pon, source.key),
+			onUnpainted: () => render.tileUnpainted(page.pon, source.key)
+		}, source.key))]
 	});
 }
-/** One tile: object-URL lifecycle + the painted (decode-boundary) report. */
-function TileImg({ source, onPainted }) {
+/** One tile: geometry plus the shared browser image binding. The binding
+*  hides the incomplete image, reports painted after its first presentation
+*  opportunity, and inverts that report when the element leaves the DOM. */
+function TileImg({ source, view, fadeMs, onPainted, onUnpainted }) {
 	const ref = useRef(null);
-	useEffect(() => {
-		const controller = new AbortController();
-		let revoke;
-		(async () => {
-			try {
-				const obj = await source.handle.objectUrl(controller.signal);
-				if (controller.signal.aborted) {
-					obj.revoke();
-					return;
-				}
-				revoke = obj.revoke;
-				if (ref.current) ref.current.src = obj.url;
-			} catch {}
-		})();
-		return () => {
-			controller.abort();
-			revoke?.();
-		};
+	useLayoutEffect(() => {
+		if (!ref.current) return;
+		return bindPaintedImage(ref.current, source.handle, {
+			onPainted,
+			onUnpainted
+		});
 	}, [source.handle]);
 	return /* @__PURE__ */ jsx("img", {
 		ref,
 		alt: "",
 		draggable: false,
-		onLoad: onPainted,
+		onLoad: (e) => {
+			const w = e.currentTarget.naturalWidth;
+			if (w > 0 && !warnedTileSize) {
+				const expected = Math.round(source.rect.width * source.scale);
+				if (Math.abs(w - expected) > 1) {
+					warnedTileSize = true;
+					console.warn(`[render] tile bitmap ${w}px wide does not match its rect (expected ~${expected}px) — stale raster identity? key=${source.key}`);
+				}
+			}
+		},
 		style: {
 			position: "absolute",
-			left: source.rect.x,
-			top: source.rect.y,
-			width: source.rect.width,
-			height: source.rect.height,
-			zIndex: source.z
+			left: view.x,
+			top: view.y,
+			width: view.width,
+			height: view.height,
+			zIndex: source.z,
+			...fadeMs > 0 ? { animation: `epdf-tile-in ${fadeMs}ms ease-out` } : null
 		}
 	});
 }
 //#endregion
-export { RenderLayer, TileLayer };
+export { RenderLayer };
 
 //# sourceMappingURL=render.js.map

package/dist/render.js.map

@@ -1 +1 @@
-{"version":3,"file":"render.js","names":[],"sources":["../src/render.tsx"],"sourcesContent":["/**\n * RenderLayer + TileLayer — the React views of @embedpdf/plugin-render.\n *\n * RenderLayer paints the BASE rung to an <img> from the engine's ENCODED\n * image() (identical for local & cloud). TileLayer paints the tile paint-plan\n * ABOVE it when the deployment lattice caps the base below the demand — mount\n * it per lens (the main stage yes, a thumbnail rail no); where the demand is\n * small it engages nothing. Both are dumb painters: every decision (policy\n * conformance, want sets, retention, release) is plugin-render's.\n */\n\n// One-line-per-feature: registration travels with the UI.\nexport * from '@embedpdf/plugin-render';\nimport * as React from 'react';\nimport { useEffect, useRef } from 'react';\nimport { RenderToken } from '@embedpdf/plugin-render';\nimport type { PageViewDemand, TilePaintSource } from '@embedpdf/plugin-render';\nimport { useCapability, usePage, useSelector } from './runtime';\n\nexport interface RenderLayerProps {\n  /**\n   * Bake annotations into the page bitmap (default true). Pass false when an\n   * <AnnotationLayer> owns annotation rendering, so they aren't drawn twice.\n   */\n  annotations?: boolean;\n}\n\nexport function RenderLayer({ annotations = true }: RenderLayerProps = {}) {\n  const page = usePage();\n  const render = useCapability(RenderToken);\n  const ref = useRef<HTMLImageElement>(null);\n  // ONE dependency: the raster's canonical identity — conformed viewport +\n  // annotations flag + epoch. Inside a lattice\n  // rung, zoom changes don't move it: no refetch, no DOM churn — the stage's\n  // CSS transform does the scaling. It changes exactly at rung crossings and\n  // on CONFIRMED mutations (epoch bumps at commit, never mid-gesture). Under\n  // `continuous` it embeds the exact scale — v2 behavior byte-for-byte. The\n  // policy behind it is a document fact the kernel materialized before\n  // publish, so the key is always computable.\n  const sourceKey = useSelector(RenderToken, (c) =>\n    c.renderSourceKey(page.pon, {\n      scale: page.transform.renderScale,\n      includeAnnotations: annotations,\n    }),\n  );\n  useEffect(() => {\n    const controller = new AbortController();\n    let revoke: (() => void) | undefined;\n    (async () => {\n      try {\n        // The capability conforms this to the policy (lattice → ladder width,\n        // continuous → this exact scale) and collapses same-key asks in its\n        // raster store. A stale-closure scale is harmless by construction:\n        // any scale in this rung produces this key's canonical request.\n        const image = await render.renderPage(page.pon, {\n          scale: page.transform.renderScale,\n          includeAnnotations: annotations,\n          signal: controller.signal,\n        });\n        const obj = await image.objectUrl(controller.signal);\n        if (controller.signal.aborted) {\n          obj.revoke();\n          return;\n        }\n        revoke = obj.revoke;\n        if (ref.current) ref.current.src = obj.url;\n      } catch {\n        /* aborted (camera moved / unmounted) or render failed */\n      }\n    })();\n    return () => {\n      controller.abort();\n      revoke?.();\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- sourceKey IS the\n    // render identity; scale/annotations/epoch are folded into it upstream.\n  }, [render, page.pon, sourceKey]);\n  return (\n    <img\n      ref={ref}\n      alt=\"\"\n      draggable={false}\n      style={{\n        position: 'absolute',\n        inset: 0,\n        width: '100%',\n        height: '100%',\n        pointerEvents: 'none',\n      }}\n    />\n  );\n}\n\nexport interface TileLayerProps {\n  /**\n   * Bake annotations into tile bitmaps (default true). Pass false when an\n   * <AnnotationLayer> owns annotation rendering — the composition that keeps\n   * tile artifacts annotation-version-free (CDN-stable across edits).\n   */\n  annotations?: boolean;\n}\n\n/**\n * TileLayer — the sharp plane above the base rung.\n *\n * Mounting it is the per-lens OPT-IN; whether it spends anything is demand\n * arithmetic (a thumbnail rail's demand never engages). The paint list is the\n * plugin's retention-safe plan: keyed <img>s inside ONE container that carries\n * the page scale as a single transform (one rounding context — no tile seams),\n * with `onLoad` reporting the decode boundary back so retained coarser\n * generations release only when their replacement is truly on screen.\n */\nexport function TileLayer({ annotations = true }: TileLayerProps = {}) {\n  const page = usePage();\n  const render = useCapability(RenderToken);\n  // Demand: the host's live camera view (Stage) or whole-page (PageView).\n  const demand: PageViewDemand = page.getViewDemand?.() ?? {\n    desiredDeviceWidth: page.transform.deviceWidth,\n  };\n  const plan = useSelector(RenderToken, (c) =>\n    c.tilePlan(page.pon, demand, { includeAnnotations: annotations }),\n  );\n  // Lens unmounted: stop in-flight tile fetches; resolved bytes stay cached.\n  useEffect(() => () => render.releaseTiles(page.pon), [render, page.pon]);\n  if (plan.paint.length === 0) return null;\n  const t = page.transform;\n  const scale = t.viewScale;\n  return (\n    <div\n      style={{\n        position: 'absolute',\n        left: 0,\n        top: 0,\n        width: t.contentWidth / scale,\n        height: t.contentHeight / scale,\n        transform: `scale(${scale})`,\n        transformOrigin: '0 0',\n        pointerEvents: 'none',\n      }}\n    >\n      {plan.paint.map((source) => (\n        <TileImg\n          key={source.key}\n          source={source}\n          onPainted={() => render.tilePainted(page.pon, source.key)}\n        />\n      ))}\n    </div>\n  );\n}\n\n/** One tile: object-URL lifecycle + the painted (decode-boundary) report. */\nfunction TileImg({ source, onPainted }: { source: TilePaintSource; onPainted: () => void }) {\n  const ref = useRef<HTMLImageElement>(null);\n  useEffect(() => {\n    const controller = new AbortController();\n    let revoke: (() => void) | undefined;\n    (async () => {\n      try {\n        const obj = await source.handle.objectUrl(controller.signal);\n        if (controller.signal.aborted) {\n          obj.revoke();\n          return;\n        }\n        revoke = obj.revoke;\n        if (ref.current) ref.current.src = obj.url;\n      } catch {\n        /* aborted (plan moved on) */\n      }\n    })();\n    return () => {\n      controller.abort();\n      revoke?.();\n    };\n  }, [source.handle]);\n  return (\n    <img\n      ref={ref}\n      alt=\"\"\n      draggable={false}\n      onLoad={onPainted}\n      style={{\n        position: 'absolute',\n        left: source.rect.x,\n        top: source.rect.y,\n        width: source.rect.width,\n        height: source.rect.height,\n        zIndex: source.z,\n      }}\n    />\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"render.js","names":[],"sources":["../src/render.tsx"],"sourcesContent":["/**\n * RenderLayer — the React view of @embedpdf/plugin-render. The page raster\n * is ONE concern with two planes:\n *\n *   - the BASE plane: a whole-page <img> at the plugin's resolved render\n *     points — the exact settled demand capped at the pixel budget on a\n *     continuous (local) engine, the advertised ladder on a lattice (cloud)\n *     deployment. Always present; the instant backdrop.\n *   - the TILE plane: the plugin's retention-safe paint plan above it,\n *     engaging by demand arithmetic when the view wants more pixels than\n *     the base may spend. A thumbnail-sized demand engages nothing — the\n *     arithmetic is the configuration.\n *\n * The layer is a DUMB painter, deliberately thin: plain <img>s bound through\n * the shared browser adapter, with painted/unpainted reports around their\n * visible lifetime. Every decision — strategy ∧ policy conformance, want\n * sets, level settling, retention, release — is plugin-render's; anything\n * mid-gesture simply CSS-scales until the plugin hands down new pixels.\n */\n\n// One-line-per-feature: registration travels with the UI.\nexport * from '@embedpdf/plugin-render';\nimport * as React from 'react';\nimport { useEffect, useLayoutEffect, useRef } from 'react';\nimport { RenderToken } from '@embedpdf/plugin-render';\nimport type { PageViewDemand, TilePaintSource } from '@embedpdf/plugin-render';\nimport { bindPaintedImage } from '@embedpdf/web';\nimport { useCapability, usePage, useSelector } from './runtime';\n\nexport interface RenderLayerProps {\n  /**\n   * Bake annotations into the page bitmap (default true). Pass false when an\n   * <AnnotationLayer> owns annotation rendering, so they aren't drawn twice.\n   */\n  annotations?: boolean;\n  /**\n   * Mount the tile plane (default true). Whether it SPENDS anything is\n   * demand arithmetic — leave it on; pass false only for a lens that must\n   * never tile even under deep zoom.\n   */\n  tiles?: boolean;\n}\n\nlet warnedTileSize = false;\n\nexport function RenderLayer({ annotations = true, tiles = true }: RenderLayerProps = {}) {\n  const page = usePage();\n  const render = useCapability(RenderToken);\n  const settings = render.paintSettings();\n  const ref = useRef<HTMLImageElement>(null);\n\n  // ONE dependency: the raster's canonical identity — conformed width +\n  // annotations flag + epoch. Under a lattice it moves only at rung\n  // crossings; under exact mode it tracks the demand and is CONSTANT above\n  // the budget — so the deep-zoom backdrop never refetches, and the sub-\n  // budget range refetches per settled demand exactly like v2 did.\n  const sourceKey = useSelector(RenderToken, (c) =>\n    c.renderSourceKey(page.pon, {\n      scale: page.transform.renderScale,\n      includeAnnotations: annotations,\n    }),\n  );\n\n  useEffect(() => {\n    const controller = new AbortController();\n    let revoke: (() => void) | undefined;\n    (async () => {\n      try {\n        // The capability conforms this to the resolved render points and\n        // collapses same-key asks in its raster store. A stale-closure scale\n        // is harmless by construction: any scale mapping to this key\n        // produces this key's canonical request.\n        const image = await render.renderPage(page.pon, {\n          scale: page.transform.renderScale,\n          includeAnnotations: annotations,\n          signal: controller.signal,\n        });\n        const obj = await image.objectUrl(controller.signal);\n        if (controller.signal.aborted) {\n          obj.revoke();\n          return;\n        }\n        revoke = obj.revoke;\n        // Imperative src on a STABLE element: the browser keeps the old\n        // bitmap until the new one decodes, and nothing ever re-requests the\n        // old URL — so revoke-on-cleanup is safe here by construction.\n        if (ref.current) ref.current.src = obj.url;\n      } catch {\n        /* aborted (camera moved / unmounted) or render failed */\n      }\n    })();\n    return () => {\n      controller.abort();\n      revoke?.();\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- sourceKey IS the\n    // render identity; scale/annotations/epoch are folded into it upstream.\n  }, [render, page.pon, sourceKey]);\n\n  return (\n    <>\n      <img\n        ref={ref}\n        alt=\"\"\n        draggable={false}\n        style={{\n          position: 'absolute',\n          inset: 0,\n          width: '100%',\n          height: '100%',\n          pointerEvents: 'none',\n        }}\n      />\n      {tiles && settings.tiles ? (\n        <TilePlane annotations={annotations} fadeMs={settings.fadeMs} />\n      ) : null}\n    </>\n  );\n}\n\n/**\n * The sharp plane above the base — the plugin's retention-safe paint plan\n * as keyed <img>s. Each tile reports painted after its first presentation\n * opportunity (and its inverse on unmount), so retained coarser generations\n * release only when their replacement is truly compositable.\n *\n * Tiles are placed in VIEW (CSS px) space directly — never in page points\n * under a scaled container. Blink quantizes layout lengths to 1/64 CSS px\n * BEFORE transforms apply, so a pt-space rect under a ×25 zoom transform\n * turns that harmless 1/64 into ±0.4px+ of per-tile misplacement — visible\n * seams and per-zoom-step letter shifts that grow with depth. In view\n * space the same quantization is a fixed ~1/64 CSS px at every zoom.\n * (v2 placed tiles in screen px for exactly this reason.)\n */\nfunction TilePlane({ annotations, fadeMs }: { annotations: boolean; fadeMs: number }) {\n  const page = usePage();\n  const render = useCapability(RenderToken);\n  // Demand: the host's live camera view (Stage) or whole-page (PageView).\n  // Level settling lives in the plugin (its settle gate), pan stays live.\n  const demand: PageViewDemand = page.getViewDemand?.() ?? {\n    desiredDeviceWidth: page.transform.deviceWidth,\n  };\n  const plan = useSelector(RenderToken, (c) =>\n    c.tilePlan(page.pon, demand, { includeAnnotations: annotations }),\n  );\n  // Lens unmounted: stop in-flight tile fetches; resolved bytes stay cached.\n  useEffect(() => () => render.releaseTiles(page.pon), [render, page.pon]);\n  if (plan.paint.length === 0) return null;\n  const t = page.transform;\n  const s = t.viewScale;\n  return (\n    <div\n      style={{\n        position: 'absolute',\n        left: 0,\n        top: 0,\n        width: t.contentWidth,\n        height: t.contentHeight,\n        pointerEvents: 'none',\n        // STACKING CONTRACT: tile <img>s carry zIndex ranks (coarse under\n        // fine) that exist only while generations are mixed — mid-zoom. This\n        // container MUST be a stacking context so those ranks stay internal;\n        // without it they join the Stage's context and paint above every\n        // z-auto sibling (annotations, page chrome, menus) exactly while\n        // zooming. The old scaled container created one implicitly via its\n        // transform; `isolation` is the explicit, no-side-effect way.\n        isolation: 'isolate',\n      }}\n    >\n      {fadeMs > 0 ? (\n        <style>{`@keyframes epdf-tile-in { from { opacity: 0 } to { opacity: 1 } }`}</style>\n      ) : null}\n      {plan.paint.map((source) => (\n        <TileImg\n          key={source.key}\n          source={source}\n          view={{\n            x: source.rect.x * s,\n            y: source.rect.y * s,\n            width: source.rect.width * s,\n            height: source.rect.height * s,\n          }}\n          fadeMs={fadeMs}\n          onPainted={() => render.tilePainted(page.pon, source.key)}\n          onUnpainted={() => render.tileUnpainted(page.pon, source.key)}\n        />\n      ))}\n    </div>\n  );\n}\n\n/** One tile: geometry plus the shared browser image binding. The binding\n *  hides the incomplete image, reports painted after its first presentation\n *  opportunity, and inverts that report when the element leaves the DOM. */\nfunction TileImg({\n  source,\n  view,\n  fadeMs,\n  onPainted,\n  onUnpainted,\n}: {\n  source: TilePaintSource;\n  /** Placement rect in VIEW (CSS px) space. */\n  view: { x: number; y: number; width: number; height: number };\n  fadeMs: number;\n  onPainted: () => void;\n  onUnpainted: () => void;\n}) {\n  const ref = useRef<HTMLImageElement>(null);\n  useLayoutEffect(() => {\n    if (!ref.current) return;\n    return bindPaintedImage(ref.current, source.handle, { onPainted, onUnpainted });\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- the handle is\n    // the bitmap's identity; the report callbacks carry stable values.\n  }, [source.handle]);\n  return (\n    <img\n      ref={ref}\n      alt=\"\"\n      draggable={false}\n      onLoad={(e) => {\n        // A raster whose intrinsic size disagrees with its rect would be\n        // silently stretched into place — the stale-handle bug class.\n        const w = e.currentTarget.naturalWidth;\n        if (w > 0 && !warnedTileSize) {\n          const expected = Math.round(source.rect.width * source.scale);\n          if (Math.abs(w - expected) > 1) {\n            warnedTileSize = true;\n            console.warn(\n              `[render] tile bitmap ${w}px wide does not match its rect ` +\n                `(expected ~${expected}px) — stale raster identity? key=${source.key}`,\n            );\n          }\n        }\n      }}\n      style={{\n        position: 'absolute',\n        left: view.x,\n        top: view.y,\n        width: view.width,\n        height: view.height,\n        zIndex: source.z,\n        ...(fadeMs > 0 ? { animation: `epdf-tile-in ${fadeMs}ms ease-out` } : null),\n      }}\n    />\n  );\n}\n"],"mappings":"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"}

package/package.json

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