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

package/dist/render.cjs

@@ -1,32 +1,54 @@
 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_state = require("./state-CsfZy_Eq.cjs");
+const require_page_layers = require("./page-layers-BloZDoOV.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");
+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_render = require("@embedpdf/plugin-render");
+let _embedpdf_plugin_render_contract_host = require("@embedpdf/plugin-render/contract/host");
 //#region src/render.tsx
+/** The render capability (renderPage / renderThumbnail / invalidation / settings) for app code. */
+function useRender() {
+	return require_runtime.useCapability(_embedpdf_plugin_render.RenderToken);
+}
+/** The render settings (`fullPage`, `tiles`, `format`, …), with or without a document. Takes a selector. */
+const useRenderSettings = require_state.settingsHook(_embedpdf_plugin_render.RenderToken);
+/** Subscribe to one render event for the mounted lifetime: `useRenderEvent((render) => render.onInvalidated, handler)`. */
+function useRenderEvent(select, handler) {
+	require_runtime.useCapabilityEvent(_embedpdf_plugin_render.RenderToken, select, handler);
+}
 let warnedTileSize = false;
-function RenderLayer({ annotations = true, tiles = true } = {}) {
+function RenderLayer({ annotations, formFields, tiles = true } = {}) {
 	const page = require_runtime.usePage();
-	const render = require_runtime.useCapability(_embedpdf_plugin_render.RenderToken);
-	const settings = render.paintSettings();
+	const render = require_runtime.useCapability(_embedpdf_plugin_render_contract_host.RenderToken);
+	const settings = require_runtime.useSelector(_embedpdf_plugin_render_contract_host.RenderToken, (render) => render.getPaintSettings());
 	const ref = (0, react.useRef)(null);
-	const sourceKey = require_runtime.useSelector(_embedpdf_plugin_render.RenderToken, (c) => c.renderSourceKey(page.pon, {
+	const parts = {
+		annotations,
+		formFields
+	};
+	const painted = require_page_layers.usePaintedParts(page.ref);
+	const layers = (0, _embedpdf_web.pictureLayerOptionsOf)(painted, parts, require_runtime.useSelector(_embedpdf_plugin_render_contract_host.RenderToken, (render) => render.getLayerRights()));
+	if ((0, _embedpdf_web.partsDrawnTwice)(painted, parts).length > 0) require_runtime.devWarn("render-layer-draws-what-a-layer-paints", "<RenderLayer annotations> or <RenderLayer formFields> draws what an <AnnotationLayer> or a <FormLayer> on the page paints too, so it shows twice. Leave the prop out: the picture leaves out what a layer paints.");
+	const sourceKey = require_runtime.useSelector(_embedpdf_plugin_render_contract_host.RenderToken, (render) => render.getSourceKey(page.ref, {
 		scale: page.transform.renderScale,
-		includeAnnotations: annotations
+		...layers
 	}));
 	(0, react.useEffect)(() => {
+		if ((0, _embedpdf_web.pageLayersOf)(page.ref).painted() !== painted) return;
 		const controller = new AbortController();
 		let revoke;
 		(async () => {
 			try {
-				const obj = await (await render.renderPage(page.pon, {
+				const obj = await (await render.renderSource(page.ref, {
 					scale: page.transform.renderScale,
-					includeAnnotations: annotations,
+					...layers,
+					view: page.view,
 					signal: controller.signal
-				})).objectUrl(controller.signal);
+				})).objectUrl().abortWith(controller.signal);
 				if (controller.signal.aborted) {
 					obj.revoke();
 					return;
@@ -41,8 +63,9 @@ function RenderLayer({ annotations = true, tiles = true } = {}) {
 		};
 	}, [
 		render,
-		page.pon,
-		sourceKey
+		page.ref,
+		sourceKey,
+		painted
 	]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
 		ref,
@@ -55,10 +78,7 @@ function RenderLayer({ annotations = true, tiles = true } = {}) {
 			height: "100%",
 			pointerEvents: "none"
 		}
-	}), tiles && settings.tiles ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TilePlane, {
-		annotations,
-		fadeMs: settings.fadeMs
-	}) : null] });
+	}), tiles && settings.tiles ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TilePlane, { parts }) : null] });
 }
 /**
 * The sharp plane above the base — the plugin's retention-safe paint plan
@@ -66,52 +86,55 @@ function RenderLayer({ annotations = true, tiles = true } = {}) {
 * opportunity (and its inverse on unmount), so retained coarser generations
 * release only when their replacement is truly compositable.
 *
-* Tiles are placed in VIEW (CSS px) space directly — never in page points
+* 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
+* 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 TilePlane({ annotations, fadeMs }) {
+function TilePlane({ parts }) {
 	const page = require_runtime.usePage();
-	const render = require_runtime.useCapability(_embedpdf_plugin_render.RenderToken);
+	const render = require_runtime.useCapability(_embedpdf_plugin_render_contract_host.RenderToken);
 	const demand = page.getViewDemand?.() ?? { desiredDeviceWidth: page.transform.deviceWidth };
-	const tiles = render.tilesFor(page.view);
-	const plan = require_runtime.useSelector(_embedpdf_plugin_render.RenderToken, () => tiles.plan(page.pon, demand, { includeAnnotations: annotations }));
-	(0, react.useEffect)(() => () => tiles.release(page.pon), [tiles, page.pon]);
+	const view = (0, react.useMemo)(() => render.createViewDemand(page.view), [render, page.view]);
+	(0, react.useEffect)(() => () => view.dispose(), [view]);
+	(0, react.useLayoutEffect)(() => {
+		const layers = (0, _embedpdf_web.pictureLayerOptionsOf)((0, _embedpdf_web.pageLayersOf)(page.ref).painted(), parts, render.getLayerRights());
+		view.setDemand(page.ref, demand, layers);
+	});
+	const plan = require_runtime.useSelector(_embedpdf_plugin_render_contract_host.RenderToken, () => view.getPlan(page.ref));
+	(0, react.useEffect)(() => () => view.release(page.ref), [view, page.ref]);
 	if (plan.paint.length === 0) return null;
-	const t = page.transform;
-	const s = t.viewScale;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+	const transform = page.transform;
+	const viewScale = transform.viewScale;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		style: {
 			position: "absolute",
 			left: 0,
 			top: 0,
-			width: t.contentWidth,
-			height: t.contentHeight,
+			width: transform.contentWidth,
+			height: transform.contentHeight,
 			pointerEvents: "none",
 			isolation: "isolate"
 		},
-		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, {
+		children: plan.paint.map((source) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TileImg, {
 			source,
 			view: {
-				x: source.rect.x * s,
-				y: source.rect.y * s,
-				width: source.rect.width * s,
-				height: source.rect.height * s
+				x: source.rect.x * viewScale,
+				y: source.rect.y * viewScale,
+				width: source.rect.width * viewScale,
+				height: source.rect.height * viewScale
 			},
-			fadeMs,
-			onPainted: () => tiles.painted(page.pon, source.key),
-			onUnpainted: () => tiles.unpainted(page.pon, source.key)
-		}, source.key))]
+			onPainted: () => view.markPainted(page.ref, source.key),
+			onUnpainted: () => view.markUnpainted(page.ref, source.key)
+		}, source.key))
 	});
 }
 /** 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 }) {
+function TileImg({ source, view, onPainted, onUnpainted }) {
 	const ref = (0, react.useRef)(null);
 	(0, react.useLayoutEffect)(() => {
 		if (!ref.current) return;
@@ -124,13 +147,13 @@ function TileImg({ source, view, fadeMs, onPainted, onUnpainted }) {
 		ref,
 		alt: "",
 		draggable: false,
-		onLoad: (e) => {
-			const w = e.currentTarget.naturalWidth;
-			if (w > 0 && !warnedTileSize) {
+		onLoad: (event) => {
+			const naturalWidth = event.currentTarget.naturalWidth;
+			if (naturalWidth > 0 && !warnedTileSize) {
 				const expected = Math.round(source.rect.width * source.scale);
-				if (Math.abs(w - expected) > 1) {
+				if (Math.abs(naturalWidth - 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}`);
+					console.warn(`[render] tile bitmap ${naturalWidth}px wide does not match its rect (expected ~${expected}px) — stale raster identity? key=${source.key}`);
 				}
 			}
 		},
@@ -140,13 +163,15 @@ function TileImg({ source, view, fadeMs, onPainted, onUnpainted }) {
 			top: view.y,
 			width: view.width,
 			height: view.height,
-			zIndex: source.z,
-			...fadeMs > 0 ? { animation: `epdf-tile-in ${fadeMs}ms ease-out` } : null
+			zIndex: source.z
 		}
 	});
 }
 //#endregion
 exports.RenderLayer = RenderLayer;
+exports.useRender = useRender;
+exports.useRenderEvent = useRenderEvent;
+exports.useRenderSettings = useRenderSettings;
 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 — 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  // THIS view's tile surface: state is per view × page, so a thumbnail\n  // rail's never-engaging demand cannot disturb the main lens's plan (shared\n  // state made the main view lose its tiles whenever a rail opened). The\n  // handle is reference-stable per view — a clean dependency.\n  const tiles = render.tilesFor(page.view);\n  const plan = useSelector(RenderToken, () =>\n    tiles.plan(page.pon, demand, { includeAnnotations: annotations }),\n  );\n  // View unmounted its plane: stop in-flight fetches; resolved bytes stay cached.\n  useEffect(() => () => tiles.release(page.pon), [tiles, 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={() => tiles.painted(page.pon, source.key)}\n          onUnpainted={() => tiles.unpainted(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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"}
+{"version":3,"file":"render.cjs","names":["useCapability","RenderPublicToken","settingsHook","usePage","RenderToken","useSelector","usePaintedParts"],"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, useMemo, useRef } from 'react';\n// The layer is a host of the render plugin: it paints conformed sources and\n// drives a view's tile demand. The host lens is the same runtime token.\nimport { RenderToken } from '@embedpdf/plugin-render/contract/host';\nimport type { PageViewDemand, TilePaintSource } from '@embedpdf/plugin-render/contract/host';\nimport { RenderToken as RenderPublicToken } from '@embedpdf/plugin-render';\nimport type { RenderCapability } from '@embedpdf/plugin-render';\nimport type { EventHook } from '@embedpdf/core';\nimport {\n  bindPaintedImage,\n  pageLayersOf,\n  partsDrawnTwice,\n  pictureLayerOptionsOf,\n  type PicturePartProps,\n} from '@embedpdf/web';\nimport { devWarn } from './dev';\nimport { usePaintedParts } from './page-layers';\nimport { useCapability, useCapabilityEvent, usePage, useSelector } from './runtime';\nimport { settingsHook } from './state';\n\n/** The render capability (renderPage / renderThumbnail / invalidation / settings) for app code. */\nexport function useRender(): RenderCapability {\n  return useCapability(RenderPublicToken);\n}\n\n/** The render settings (`fullPage`, `tiles`, `format`, …), with or without a document. Takes a selector. */\nexport const useRenderSettings = settingsHook(RenderPublicToken);\n\n/** Subscribe to one render event for the mounted lifetime: `useRenderEvent((render) => render.onInvalidated, handler)`. */\nexport function useRenderEvent<T>(\n  select: (render: RenderCapability) => EventHook<T>,\n  handler: (event: T) => void,\n): void {\n  useCapabilityEvent(RenderPublicToken, select, handler);\n}\n\nexport interface RenderLayerProps {\n  /**\n   * Draw the annotations into the page's picture (`true`) or leave them out\n   * (`false`). Left unset, the picture leaves them to an `<AnnotationLayer>`\n   * on the page, and otherwise draws them when the user may read them.\n   */\n  annotations?: boolean;\n  /** The same for the form fields, which a `<FormLayer>` paints. */\n  formFields?: 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, formFields, tiles = true }: RenderLayerProps = {}) {\n  const page = usePage();\n  const render = useCapability(RenderToken);\n  // The same object until a setting it reads changes, so a settings change re-renders the layer.\n  const settings = useSelector(RenderToken, (render) => render.getPaintSettings());\n  const ref = useRef<HTMLImageElement>(null);\n  const parts: PicturePartProps = { annotations, formFields };\n  const painted = usePaintedParts(page.ref);\n  const may = useSelector(RenderToken, (render) => render.getLayerRights());\n  const layers = pictureLayerOptionsOf(painted, parts, may);\n  if (partsDrawnTwice(painted, parts).length > 0) {\n    devWarn(\n      'render-layer-draws-what-a-layer-paints',\n      '<RenderLayer annotations> or <RenderLayer formFields> draws what an <AnnotationLayer> or a ' +\n        '<FormLayer> on the page paints too, so it shows twice. Leave the prop out: the picture ' +\n        'leaves out what a layer paints.',\n    );\n  }\n\n  // One dependency: the raster's canonical identity — conformed width +\n  // the parts it draws + 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 once per settled demand.\n  const sourceKey = useSelector(RenderToken, (render) =>\n    render.getSourceKey(page.ref, { scale: page.transform.renderScale, ...layers }),\n  );\n\n  useEffect(() => {\n    // A layer that paints part of the page arrived in this commit, after this\n    // render read the page's layers: the render it causes fetches instead.\n    if (pageLayersOf(page.ref).painted() !== painted) return;\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.renderSource(page.ref, {\n          scale: page.transform.renderScale,\n          ...layers,\n          view: page.view,\n          signal: controller.signal,\n        });\n        const obj = await image.objectUrl().abortWith(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/parts/epoch are folded into it upstream. `painted`\n    // runs the fetch skipped above even when the key comes out the same.\n  }, [render, page.ref, sourceKey, painted]);\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 ? <TilePlane parts={parts} /> : 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 */\nfunction TilePlane({ parts }: { parts: PicturePartProps }) {\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  // This view's tile surface: state is per view × page, so a thumbnail\n  // rail's never-engaging demand cannot disturb the main lens's plan (shared\n  // state made the main view lose its tiles whenever a rail opened). The\n  // handle is reference-stable per view and reference-counted — one\n  // `dispose` per `createViewDemand`.\n  const view = useMemo(() => render.createViewDemand(page.view), [render, page.view]);\n  useEffect(() => () => view.dispose(), [view]);\n  // Demand in, plan out: setting the demand is the one call that schedules\n  // fetches (and re-plans); the read below is pure. Layout-timed so a camera\n  // move re-plans before the browser paints this commit. The page's layers\n  // are read now, not at render: one mounted in this commit has said what it\n  // paints by the time layout effects run.\n  useLayoutEffect(() => {\n    const painted = pageLayersOf(page.ref).painted();\n    const layers = pictureLayerOptionsOf(painted, parts, render.getLayerRights());\n    view.setDemand(page.ref, demand, layers);\n  });\n  const plan = useSelector(RenderToken, () => view.getPlan(page.ref));\n  // View unmounted its plane: stop in-flight fetches; resolved bytes stay cached.\n  useEffect(() => () => view.release(page.ref), [view, page.ref]);\n  if (plan.paint.length === 0) return null;\n  const transform = page.transform;\n  const viewScale = transform.viewScale;\n  return (\n    <div\n      style={{\n        position: 'absolute',\n        left: 0,\n        top: 0,\n        width: transform.contentWidth,\n        height: transform.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      {plan.paint.map((source) => (\n        <TileImg\n          key={source.key}\n          source={source}\n          view={{\n            x: source.rect.x * viewScale,\n            y: source.rect.y * viewScale,\n            width: source.rect.width * viewScale,\n            height: source.rect.height * viewScale,\n          }}\n          onPainted={() => view.markPainted(page.ref, source.key)}\n          onUnpainted={() => view.markUnpainted(page.ref, 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  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  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={(event) => {\n        // A raster whose intrinsic size disagrees with its rect would be\n        // silently stretched into place — the stale-handle bug class.\n        const naturalWidth = event.currentTarget.naturalWidth;\n        if (naturalWidth > 0 && !warnedTileSize) {\n          const expected = Math.round(source.rect.width * source.scale);\n          if (Math.abs(naturalWidth - expected) > 1) {\n            warnedTileSize = true;\n            console.warn(\n              `[render] tile bitmap ${naturalWidth}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      }}\n    />\n  );\n}\n"],"mappings":"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"}

package/dist/render.d.cts

@@ -1,19 +1,31 @@
+import { t as SettingsHook } from "./state-0K1I5cM4.cjs";
+import { EventHook } from "@embedpdf/core";
+import { RenderCapability } from "@embedpdf/plugin-render";
 export * from "@embedpdf/plugin-render";
 //#region src/render.d.ts
+/** The render capability (renderPage / renderThumbnail / invalidation / settings) for app code. */
+declare function useRender(): RenderCapability;
+/** The render settings (`fullPage`, `tiles`, `format`, …), with or without a document. Takes a selector. */
+declare const useRenderSettings: SettingsHook<import("@embedpdf/plugin-render").RenderSettings>;
+/** Subscribe to one render event for the mounted lifetime: `useRenderEvent((render) => render.onInvalidated, handler)`. */
+declare function useRenderEvent<T>(select: (render: RenderCapability) => EventHook<T>, handler: (event: T) => void): void;
 interface RenderLayerProps {
   /**
-   * Bake annotations into the page bitmap (default true). Pass false when an
-   * <AnnotationLayer> owns annotation rendering, so they aren't drawn twice.
+   * Draw the annotations into the page's picture (`true`) or leave them out
+   * (`false`). Left unset, the picture leaves them to an `<AnnotationLayer>`
+   * on the page, and otherwise draws them when the user may read them.
    */
   annotations?: boolean;
+  /** The same for the form fields, which a `<FormLayer>` paints. */
+  formFields?: boolean;
   /**
-   * Mount the tile plane (default true). Whether it SPENDS anything is
+   * 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.
    */
   tiles?: boolean;
 }
-declare function RenderLayer({ annotations, tiles }?: RenderLayerProps): import("react/jsx-runtime").JSX.Element;
+declare function RenderLayer({ annotations, formFields, tiles }?: RenderLayerProps): import("react/jsx-runtime").JSX.Element;
 //#endregion
-export { RenderLayer, RenderLayerProps };
+export { RenderLayer, RenderLayerProps, useRender, useRenderEvent, useRenderSettings };
 //# sourceMappingURL=render.d.cts.map

package/dist/render.d.ts

@@ -1,19 +1,31 @@
+import { t as SettingsHook } from "./state-0K1I5cM4.js";
+import { EventHook } from "@embedpdf/core";
+import { RenderCapability } from "@embedpdf/plugin-render";
 export * from "@embedpdf/plugin-render";
 //#region src/render.d.ts
+/** The render capability (renderPage / renderThumbnail / invalidation / settings) for app code. */
+declare function useRender(): RenderCapability;
+/** The render settings (`fullPage`, `tiles`, `format`, …), with or without a document. Takes a selector. */
+declare const useRenderSettings: SettingsHook<import("@embedpdf/plugin-render").RenderSettings>;
+/** Subscribe to one render event for the mounted lifetime: `useRenderEvent((render) => render.onInvalidated, handler)`. */
+declare function useRenderEvent<T>(select: (render: RenderCapability) => EventHook<T>, handler: (event: T) => void): void;
 interface RenderLayerProps {
   /**
-   * Bake annotations into the page bitmap (default true). Pass false when an
-   * <AnnotationLayer> owns annotation rendering, so they aren't drawn twice.
+   * Draw the annotations into the page's picture (`true`) or leave them out
+   * (`false`). Left unset, the picture leaves them to an `<AnnotationLayer>`
+   * on the page, and otherwise draws them when the user may read them.
    */
   annotations?: boolean;
+  /** The same for the form fields, which a `<FormLayer>` paints. */
+  formFields?: boolean;
   /**
-   * Mount the tile plane (default true). Whether it SPENDS anything is
+   * 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.
    */
   tiles?: boolean;
 }
-declare function RenderLayer({ annotations, tiles }?: RenderLayerProps): import("react/jsx-runtime").JSX.Element;
+declare function RenderLayer({ annotations, formFields, tiles }?: RenderLayerProps): import("react/jsx-runtime").JSX.Element;
 //#endregion
-export { RenderLayer, RenderLayerProps };
+export { RenderLayer, RenderLayerProps, useRender, useRenderEvent, useRenderSettings };
 //# sourceMappingURL=render.d.ts.map

package/dist/render.js

@@ -1,31 +1,52 @@
-import "./rolldown-runtime-BBjsoOtd.js";
-import { useCapability, usePage, useSelector } from "./runtime.js";
+import { E as useSelector, O as devWarn, f as useCapability, p as useCapabilityEvent, w as usePage } from "./runtime-B6xcPsEb.js";
+import { t as settingsHook } from "./state-CbgxhwLA.js";
+import { t as usePaintedParts } from "./page-layers-Bkaaz8Zf.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useEffect, useLayoutEffect, useRef } from "react";
-import { bindPaintedImage } from "@embedpdf/web";
+import { bindPaintedImage, pageLayersOf, partsDrawnTwice, pictureLayerOptionsOf } from "@embedpdf/web";
+import { useEffect, useLayoutEffect, useMemo, useRef } from "react";
 import { RenderToken } from "@embedpdf/plugin-render";
+import { RenderToken as RenderToken$1 } from "@embedpdf/plugin-render/contract/host";
 export * from "@embedpdf/plugin-render";
 //#region src/render.tsx
+/** The render capability (renderPage / renderThumbnail / invalidation / settings) for app code. */
+function useRender() {
+	return useCapability(RenderToken);
+}
+/** The render settings (`fullPage`, `tiles`, `format`, …), with or without a document. Takes a selector. */
+const useRenderSettings = settingsHook(RenderToken);
+/** Subscribe to one render event for the mounted lifetime: `useRenderEvent((render) => render.onInvalidated, handler)`. */
+function useRenderEvent(select, handler) {
+	useCapabilityEvent(RenderToken, select, handler);
+}
 let warnedTileSize = false;
-function RenderLayer({ annotations = true, tiles = true } = {}) {
+function RenderLayer({ annotations, formFields, tiles = true } = {}) {
 	const page = usePage();
-	const render = useCapability(RenderToken);
-	const settings = render.paintSettings();
+	const render = useCapability(RenderToken$1);
+	const settings = useSelector(RenderToken$1, (render) => render.getPaintSettings());
 	const ref = useRef(null);
-	const sourceKey = useSelector(RenderToken, (c) => c.renderSourceKey(page.pon, {
+	const parts = {
+		annotations,
+		formFields
+	};
+	const painted = usePaintedParts(page.ref);
+	const layers = pictureLayerOptionsOf(painted, parts, useSelector(RenderToken$1, (render) => render.getLayerRights()));
+	if (partsDrawnTwice(painted, parts).length > 0) devWarn("render-layer-draws-what-a-layer-paints", "<RenderLayer annotations> or <RenderLayer formFields> draws what an <AnnotationLayer> or a <FormLayer> on the page paints too, so it shows twice. Leave the prop out: the picture leaves out what a layer paints.");
+	const sourceKey = useSelector(RenderToken$1, (render) => render.getSourceKey(page.ref, {
 		scale: page.transform.renderScale,
-		includeAnnotations: annotations
+		...layers
 	}));
 	useEffect(() => {
+		if (pageLayersOf(page.ref).painted() !== painted) return;
 		const controller = new AbortController();
 		let revoke;
 		(async () => {
 			try {
-				const obj = await (await render.renderPage(page.pon, {
+				const obj = await (await render.renderSource(page.ref, {
 					scale: page.transform.renderScale,
-					includeAnnotations: annotations,
+					...layers,
+					view: page.view,
 					signal: controller.signal
-				})).objectUrl(controller.signal);
+				})).objectUrl().abortWith(controller.signal);
 				if (controller.signal.aborted) {
 					obj.revoke();
 					return;
@@ -40,8 +61,9 @@ function RenderLayer({ annotations = true, tiles = true } = {}) {
 		};
 	}, [
 		render,
-		page.pon,
-		sourceKey
+		page.ref,
+		sourceKey,
+		painted
 	]);
 	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("img", {
 		ref,
@@ -54,10 +76,7 @@ function RenderLayer({ annotations = true, tiles = true } = {}) {
 			height: "100%",
 			pointerEvents: "none"
 		}
-	}), tiles && settings.tiles ? /* @__PURE__ */ jsx(TilePlane, {
-		annotations,
-		fadeMs: settings.fadeMs
-	}) : null] });
+	}), tiles && settings.tiles ? /* @__PURE__ */ jsx(TilePlane, { parts }) : null] });
 }
 /**
 * The sharp plane above the base — the plugin's retention-safe paint plan
@@ -65,52 +84,55 @@ function RenderLayer({ annotations = true, tiles = true } = {}) {
 * opportunity (and its inverse on unmount), so retained coarser generations
 * release only when their replacement is truly compositable.
 *
-* Tiles are placed in VIEW (CSS px) space directly — never in page points
+* 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
+* 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 TilePlane({ annotations, fadeMs }) {
+function TilePlane({ parts }) {
 	const page = usePage();
-	const render = useCapability(RenderToken);
+	const render = useCapability(RenderToken$1);
 	const demand = page.getViewDemand?.() ?? { desiredDeviceWidth: page.transform.deviceWidth };
-	const tiles = render.tilesFor(page.view);
-	const plan = useSelector(RenderToken, () => tiles.plan(page.pon, demand, { includeAnnotations: annotations }));
-	useEffect(() => () => tiles.release(page.pon), [tiles, page.pon]);
+	const view = useMemo(() => render.createViewDemand(page.view), [render, page.view]);
+	useEffect(() => () => view.dispose(), [view]);
+	useLayoutEffect(() => {
+		const layers = pictureLayerOptionsOf(pageLayersOf(page.ref).painted(), parts, render.getLayerRights());
+		view.setDemand(page.ref, demand, layers);
+	});
+	const plan = useSelector(RenderToken$1, () => view.getPlan(page.ref));
+	useEffect(() => () => view.release(page.ref), [view, page.ref]);
 	if (plan.paint.length === 0) return null;
-	const t = page.transform;
-	const s = t.viewScale;
-	return /* @__PURE__ */ jsxs("div", {
+	const transform = page.transform;
+	const viewScale = transform.viewScale;
+	return /* @__PURE__ */ jsx("div", {
 		style: {
 			position: "absolute",
 			left: 0,
 			top: 0,
-			width: t.contentWidth,
-			height: t.contentHeight,
+			width: transform.contentWidth,
+			height: transform.contentHeight,
 			pointerEvents: "none",
 			isolation: "isolate"
 		},
-		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, {
+		children: plan.paint.map((source) => /* @__PURE__ */ jsx(TileImg, {
 			source,
 			view: {
-				x: source.rect.x * s,
-				y: source.rect.y * s,
-				width: source.rect.width * s,
-				height: source.rect.height * s
+				x: source.rect.x * viewScale,
+				y: source.rect.y * viewScale,
+				width: source.rect.width * viewScale,
+				height: source.rect.height * viewScale
 			},
-			fadeMs,
-			onPainted: () => tiles.painted(page.pon, source.key),
-			onUnpainted: () => tiles.unpainted(page.pon, source.key)
-		}, source.key))]
+			onPainted: () => view.markPainted(page.ref, source.key),
+			onUnpainted: () => view.markUnpainted(page.ref, source.key)
+		}, source.key))
 	});
 }
 /** 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 }) {
+function TileImg({ source, view, onPainted, onUnpainted }) {
 	const ref = useRef(null);
 	useLayoutEffect(() => {
 		if (!ref.current) return;
@@ -123,13 +145,13 @@ function TileImg({ source, view, fadeMs, onPainted, onUnpainted }) {
 		ref,
 		alt: "",
 		draggable: false,
-		onLoad: (e) => {
-			const w = e.currentTarget.naturalWidth;
-			if (w > 0 && !warnedTileSize) {
+		onLoad: (event) => {
+			const naturalWidth = event.currentTarget.naturalWidth;
+			if (naturalWidth > 0 && !warnedTileSize) {
 				const expected = Math.round(source.rect.width * source.scale);
-				if (Math.abs(w - expected) > 1) {
+				if (Math.abs(naturalWidth - 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}`);
+					console.warn(`[render] tile bitmap ${naturalWidth}px wide does not match its rect (expected ~${expected}px) — stale raster identity? key=${source.key}`);
 				}
 			}
 		},
@@ -139,12 +161,11 @@ function TileImg({ source, view, fadeMs, onPainted, onUnpainted }) {
 			top: view.y,
 			width: view.width,
 			height: view.height,
-			zIndex: source.z,
-			...fadeMs > 0 ? { animation: `epdf-tile-in ${fadeMs}ms ease-out` } : null
+			zIndex: source.z
 		}
 	});
 }
 //#endregion
-export { RenderLayer };
+export { RenderLayer, useRender, useRenderEvent, useRenderSettings };
 
 //# sourceMappingURL=render.js.map

package/dist/render.js.map

@@ -1 +1 @@
-{"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  // THIS view's tile surface: state is per view × page, so a thumbnail\n  // rail's never-engaging demand cannot disturb the main lens's plan (shared\n  // state made the main view lose its tiles whenever a rail opened). The\n  // handle is reference-stable per view — a clean dependency.\n  const tiles = render.tilesFor(page.view);\n  const plan = useSelector(RenderToken, () =>\n    tiles.plan(page.pon, demand, { includeAnnotations: annotations }),\n  );\n  // View unmounted its plane: stop in-flight fetches; resolved bytes stay cached.\n  useEffect(() => () => tiles.release(page.pon), [tiles, 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={() => tiles.painted(page.pon, source.key)}\n          onUnpainted={() => tiles.unpainted(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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"}
+{"version":3,"file":"render.js","names":["RenderPublicToken","RenderToken"],"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, useMemo, useRef } from 'react';\n// The layer is a host of the render plugin: it paints conformed sources and\n// drives a view's tile demand. The host lens is the same runtime token.\nimport { RenderToken } from '@embedpdf/plugin-render/contract/host';\nimport type { PageViewDemand, TilePaintSource } from '@embedpdf/plugin-render/contract/host';\nimport { RenderToken as RenderPublicToken } from '@embedpdf/plugin-render';\nimport type { RenderCapability } from '@embedpdf/plugin-render';\nimport type { EventHook } from '@embedpdf/core';\nimport {\n  bindPaintedImage,\n  pageLayersOf,\n  partsDrawnTwice,\n  pictureLayerOptionsOf,\n  type PicturePartProps,\n} from '@embedpdf/web';\nimport { devWarn } from './dev';\nimport { usePaintedParts } from './page-layers';\nimport { useCapability, useCapabilityEvent, usePage, useSelector } from './runtime';\nimport { settingsHook } from './state';\n\n/** The render capability (renderPage / renderThumbnail / invalidation / settings) for app code. */\nexport function useRender(): RenderCapability {\n  return useCapability(RenderPublicToken);\n}\n\n/** The render settings (`fullPage`, `tiles`, `format`, …), with or without a document. Takes a selector. */\nexport const useRenderSettings = settingsHook(RenderPublicToken);\n\n/** Subscribe to one render event for the mounted lifetime: `useRenderEvent((render) => render.onInvalidated, handler)`. */\nexport function useRenderEvent<T>(\n  select: (render: RenderCapability) => EventHook<T>,\n  handler: (event: T) => void,\n): void {\n  useCapabilityEvent(RenderPublicToken, select, handler);\n}\n\nexport interface RenderLayerProps {\n  /**\n   * Draw the annotations into the page's picture (`true`) or leave them out\n   * (`false`). Left unset, the picture leaves them to an `<AnnotationLayer>`\n   * on the page, and otherwise draws them when the user may read them.\n   */\n  annotations?: boolean;\n  /** The same for the form fields, which a `<FormLayer>` paints. */\n  formFields?: 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, formFields, tiles = true }: RenderLayerProps = {}) {\n  const page = usePage();\n  const render = useCapability(RenderToken);\n  // The same object until a setting it reads changes, so a settings change re-renders the layer.\n  const settings = useSelector(RenderToken, (render) => render.getPaintSettings());\n  const ref = useRef<HTMLImageElement>(null);\n  const parts: PicturePartProps = { annotations, formFields };\n  const painted = usePaintedParts(page.ref);\n  const may = useSelector(RenderToken, (render) => render.getLayerRights());\n  const layers = pictureLayerOptionsOf(painted, parts, may);\n  if (partsDrawnTwice(painted, parts).length > 0) {\n    devWarn(\n      'render-layer-draws-what-a-layer-paints',\n      '<RenderLayer annotations> or <RenderLayer formFields> draws what an <AnnotationLayer> or a ' +\n        '<FormLayer> on the page paints too, so it shows twice. Leave the prop out: the picture ' +\n        'leaves out what a layer paints.',\n    );\n  }\n\n  // One dependency: the raster's canonical identity — conformed width +\n  // the parts it draws + 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 once per settled demand.\n  const sourceKey = useSelector(RenderToken, (render) =>\n    render.getSourceKey(page.ref, { scale: page.transform.renderScale, ...layers }),\n  );\n\n  useEffect(() => {\n    // A layer that paints part of the page arrived in this commit, after this\n    // render read the page's layers: the render it causes fetches instead.\n    if (pageLayersOf(page.ref).painted() !== painted) return;\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.renderSource(page.ref, {\n          scale: page.transform.renderScale,\n          ...layers,\n          view: page.view,\n          signal: controller.signal,\n        });\n        const obj = await image.objectUrl().abortWith(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/parts/epoch are folded into it upstream. `painted`\n    // runs the fetch skipped above even when the key comes out the same.\n  }, [render, page.ref, sourceKey, painted]);\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 ? <TilePlane parts={parts} /> : 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 */\nfunction TilePlane({ parts }: { parts: PicturePartProps }) {\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  // This view's tile surface: state is per view × page, so a thumbnail\n  // rail's never-engaging demand cannot disturb the main lens's plan (shared\n  // state made the main view lose its tiles whenever a rail opened). The\n  // handle is reference-stable per view and reference-counted — one\n  // `dispose` per `createViewDemand`.\n  const view = useMemo(() => render.createViewDemand(page.view), [render, page.view]);\n  useEffect(() => () => view.dispose(), [view]);\n  // Demand in, plan out: setting the demand is the one call that schedules\n  // fetches (and re-plans); the read below is pure. Layout-timed so a camera\n  // move re-plans before the browser paints this commit. The page's layers\n  // are read now, not at render: one mounted in this commit has said what it\n  // paints by the time layout effects run.\n  useLayoutEffect(() => {\n    const painted = pageLayersOf(page.ref).painted();\n    const layers = pictureLayerOptionsOf(painted, parts, render.getLayerRights());\n    view.setDemand(page.ref, demand, layers);\n  });\n  const plan = useSelector(RenderToken, () => view.getPlan(page.ref));\n  // View unmounted its plane: stop in-flight fetches; resolved bytes stay cached.\n  useEffect(() => () => view.release(page.ref), [view, page.ref]);\n  if (plan.paint.length === 0) return null;\n  const transform = page.transform;\n  const viewScale = transform.viewScale;\n  return (\n    <div\n      style={{\n        position: 'absolute',\n        left: 0,\n        top: 0,\n        width: transform.contentWidth,\n        height: transform.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      {plan.paint.map((source) => (\n        <TileImg\n          key={source.key}\n          source={source}\n          view={{\n            x: source.rect.x * viewScale,\n            y: source.rect.y * viewScale,\n            width: source.rect.width * viewScale,\n            height: source.rect.height * viewScale,\n          }}\n          onPainted={() => view.markPainted(page.ref, source.key)}\n          onUnpainted={() => view.markUnpainted(page.ref, 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  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  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={(event) => {\n        // A raster whose intrinsic size disagrees with its rect would be\n        // silently stretched into place — the stale-handle bug class.\n        const naturalWidth = event.currentTarget.naturalWidth;\n        if (naturalWidth > 0 && !warnedTileSize) {\n          const expected = Math.round(source.rect.width * source.scale);\n          if (Math.abs(naturalWidth - expected) > 1) {\n            warnedTileSize = true;\n            console.warn(\n              `[render] tile bitmap ${naturalWidth}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      }}\n    />\n  );\n}\n"],"mappings":"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"}