@embedpdf/vue 0.0.0-stage → 3.0.0-next.16

package/dist/render.cjs

@@ -0,0 +1,262 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const pluginRender = require("@embedpdf/plugin-render");
+const capabilities = require("./capabilities-DVNJmgy7.cjs");
+const state = require("./state-M22NDJQo.cjs");
+const vue = require("vue");
+const host = require("@embedpdf/plugin-render/contract/host");
+const web = require("@embedpdf/web");
+const dev = require("./dev-eeIS2B4c.cjs");
+const pageLayers = require("./page-layers-c-CJYAUO.cjs");
+const page = require("./page-Doy4_Sdz.cjs");
+const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
+  __name: "TileImage",
+  props: {
+    source: {},
+    view: {},
+    page: {},
+    viewScale: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const image = vue.ref(null);
+    vue.watch(
+      [image, () => props.source.handle],
+      ([element, handle], _previous, onCleanup) => {
+        if (!element) return;
+        const { view, page: page2, source } = props;
+        onCleanup(
+          web.bindPaintedImage(element, handle, {
+            onPainted: () => view.markPainted(page2, source.key),
+            onUnpainted: () => view.markUnpainted(page2, source.key)
+          })
+        );
+      },
+      { immediate: true, flush: "post" }
+    );
+    function checkSize(event) {
+      const naturalWidth = event.currentTarget.naturalWidth;
+      if (naturalWidth <= 0) return;
+      const expected = Math.round(props.source.rect.width * props.source.scale);
+      if (Math.abs(naturalWidth - expected) > 1) {
+        dev.devWarn(
+          "tile-size",
+          `tile bitmap ${naturalWidth}px wide does not match its rect (expected ~${expected}px) — stale raster identity? key=${props.source.key}`
+        );
+      }
+    }
+    const style = vue.computed(() => {
+      const { rect, z } = props.source;
+      const scale = props.viewScale;
+      return {
+        position: "absolute",
+        left: `${rect.x * scale}px`,
+        top: `${rect.y * scale}px`,
+        width: `${rect.width * scale}px`,
+        height: `${rect.height * scale}px`,
+        zIndex: z
+      };
+    });
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("img", {
+        ref_key: "image",
+        ref: image,
+        alt: "",
+        draggable: "false",
+        style: vue.normalizeStyle(style.value),
+        onLoad: checkSize
+      }, null, 36);
+    };
+  }
+});
+const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
+  __name: "TilePlane",
+  props: {
+    layers: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const page$1 = page.usePage();
+    const render = capabilities.useOptionalCapability(host.RenderToken);
+    const view = vue.shallowRef(null);
+    const pageRef = vue.computed(() => page$1.value.ref);
+    const viewId = vue.computed(() => page$1.value.view);
+    vue.watch(
+      [view, pageRef],
+      ([handle, ref], _previous, onCleanup) => {
+        if (handle) onCleanup(() => handle.release(ref));
+      },
+      { immediate: true }
+    );
+    vue.watch(
+      [render, viewId],
+      ([lens, id], _previous, onCleanup) => {
+        if (!lens) {
+          view.value = null;
+          return;
+        }
+        const handle = lens.createViewDemand(id);
+        view.value = handle;
+        onCleanup(() => handle.dispose());
+      },
+      { immediate: true }
+    );
+    const demand = capabilities.useKernelValue(
+      () => {
+        var _a, _b;
+        return ((_b = (_a = page$1.value).getViewDemand) == null ? void 0 : _b.call(_a)) ?? { desiredDeviceWidth: page$1.value.transform.deviceWidth };
+      },
+      host.samePageViewDemand
+    );
+    vue.watch(
+      [view, demand, pageRef, () => props.layers],
+      ([handle, wanted, ref, layers]) => {
+        handle == null ? void 0 : handle.setDemand(ref, wanted, layers);
+      },
+      { immediate: true }
+    );
+    const plan = capabilities.useKernelValue(() => {
+      var _a;
+      return ((_a = view.value) == null ? void 0 : _a.getPlan(pageRef.value)) ?? null;
+    });
+    const planeStyle = vue.computed(
+      () => ({
+        position: "absolute",
+        left: 0,
+        top: 0,
+        width: `${page$1.value.transform.contentWidth}px`,
+        height: `${page$1.value.transform.contentHeight}px`,
+        pointerEvents: "none",
+        // Tiles carry z ranks (coarse under fine) while generations mix, mid-zoom.
+        // A stacking context of its own keeps those ranks inside the plane, below
+        // annotations, page chrome and menus.
+        isolation: "isolate"
+      })
+    );
+    return (_ctx, _cache) => {
+      return view.value && vue.unref(plan) && vue.unref(plan).paint.length > 0 ? (vue.openBlock(), vue.createElementBlock("div", {
+        key: 0,
+        style: vue.normalizeStyle(planeStyle.value)
+      }, [
+        (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(plan).paint, (source) => {
+          return vue.openBlock(), vue.createBlock(_sfc_main$2, {
+            key: source.key,
+            source,
+            view: view.value,
+            page: vue.unref(page$1).ref,
+            "view-scale": vue.unref(page$1).transform.viewScale
+          }, null, 8, ["source", "view", "page", "view-scale"]);
+        }), 128))
+      ], 4)) : vue.createCommentVNode("", true);
+    };
+  }
+});
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  __name: "RenderLayer",
+  props: {
+    annotations: { type: Boolean, default: void 0 },
+    formFields: { type: Boolean, default: void 0 },
+    tiles: { type: Boolean, default: true }
+  },
+  setup(__props) {
+    const props = __props;
+    const page$1 = page.usePage();
+    const render = capabilities.useOptionalCapability(host.RenderToken);
+    const NO_PAINT = { tiles: false };
+    const settings = capabilities.useOptionalSelector(host.RenderToken, (lens) => lens.getPaintSettings(), NO_PAINT);
+    const pageRef = vue.computed(() => page$1.value.ref);
+    const parts = vue.computed(() => ({ annotations: props.annotations, formFields: props.formFields }));
+    const painted = pageLayers.usePaintedParts(pageRef);
+    const may = capabilities.useOptionalSelector(host.RenderToken, (lens) => lens.getLayerRights(), null);
+    const layers = vue.computed(
+      () => painted.value && may.value ? web.pictureLayerOptionsOf(painted.value, parts.value, may.value) : null
+    );
+    vue.watch([painted, parts], ([current, asked]) => {
+      if (current && web.partsDrawnTwice(current, asked).length > 0) {
+        dev.devWarn(
+          "render-layer-draws-what-a-layer-paints",
+          "<RenderLayer :annotations> or <RenderLayer :form-fields> 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 = capabilities.useOptionalSelector(
+      host.RenderToken,
+      (lens) => layers.value ? lens.getSourceKey(page$1.value.ref, {
+        scale: page$1.value.transform.renderScale,
+        ...layers.value
+      }) : null,
+      null
+    );
+    const image = vue.ref(null);
+    vue.watch(
+      [render, pageRef, sourceKey, layers],
+      ([lens, shown, _key, drawn], _previous, onCleanup) => {
+        if (!lens || !drawn) return;
+        const controller = new AbortController();
+        let revoke;
+        onCleanup(() => {
+          controller.abort();
+          revoke == null ? void 0 : revoke();
+        });
+        void (async () => {
+          try {
+            const picture = await lens.renderSource(shown, {
+              scale: page$1.value.transform.renderScale,
+              ...drawn,
+              view: page$1.value.view,
+              signal: controller.signal
+            });
+            const object = await picture.objectUrl().abortWith(controller.signal);
+            if (controller.signal.aborted) {
+              object.revoke();
+              return;
+            }
+            revoke = object.revoke;
+            if (image.value) image.value.src = object.url;
+          } catch {
+          }
+        })();
+      },
+      { immediate: true, flush: "post" }
+    );
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
+        vue.createElementVNode("img", {
+          ref_key: "image",
+          ref: image,
+          alt: "",
+          draggable: "false",
+          style: {
+            position: "absolute",
+            inset: 0,
+            width: "100%",
+            height: "100%",
+            pointerEvents: "none"
+          }
+        }, null, 512),
+        __props.tiles && vue.unref(settings).tiles && layers.value ? (vue.openBlock(), vue.createBlock(_sfc_main$1, {
+          key: 0,
+          layers: layers.value
+        }, null, 8, ["layers"])) : vue.createCommentVNode("", true)
+      ], 64);
+    };
+  }
+});
+function useRender() {
+  return capabilities.useCapability(pluginRender.RenderToken);
+}
+const useRenderSettings = state.settingsComposable(pluginRender.RenderToken);
+function useRenderEvent(select, handler) {
+  capabilities.useCapabilityEvent(pluginRender.RenderToken, select, handler);
+}
+exports.RenderLayer = _sfc_main;
+exports.useRender = useRender;
+exports.useRenderEvent = useRenderEvent;
+exports.useRenderSettings = useRenderSettings;
+Object.keys(pluginRender).forEach((k) => {
+  if (k !== "default" && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+    enumerable: true,
+    get: () => pluginRender[k]
+  });
+});
+//# sourceMappingURL=render.cjs.map

package/dist/render.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"render.cjs","sources":["../src/render/TileImage.vue","../src/render/TilePlane.vue","../src/render/RenderLayer.vue","../src/render.ts"],"sourcesContent":["<!--\n  One tile: its place in view space, and the shared browser image binding,\n  which hides the image until it is complete, reports painted after its first\n  chance to be shown, and reports the inverse when it leaves.\n-->\n<script setup lang=\"ts\">\nimport { computed, ref, watch } from 'vue';\nimport type { CSSProperties } from 'vue';\nimport type { PageRef } from '@embedpdf/core';\nimport type { TilePaintSource, ViewDemand } from '@embedpdf/plugin-render/contract/host';\nimport { bindPaintedImage } from '@embedpdf/web';\nimport { devWarn } from '../dev';\n\nconst props = defineProps<{\n  source: TilePaintSource;\n  /** The view's tile surface, told when this tile is painted and when it leaves. */\n  view: ViewDemand;\n  page: PageRef;\n  /** View px per page point. */\n  viewScale: number;\n}>();\n\nconst image = ref<HTMLImageElement | null>(null);\n\n// The handle is the bitmap's identity; the reports go to the view that planned it.\nwatch(\n  [image, () => props.source.handle],\n  ([element, handle], _previous, onCleanup) => {\n    if (!element) return;\n    const { view, page, source } = props;\n    onCleanup(\n      bindPaintedImage(element, handle, {\n        onPainted: () => view.markPainted(page, source.key),\n        onUnpainted: () => view.markUnpainted(page, source.key),\n      }),\n    );\n  },\n  { immediate: true, flush: 'post' },\n);\n\n/** A raster whose size disagrees with its rect would be stretched into place: a stale picture. */\nfunction checkSize(event: Event) {\n  const naturalWidth = (event.currentTarget as HTMLImageElement).naturalWidth;\n  if (naturalWidth <= 0) return;\n  const expected = Math.round(props.source.rect.width * props.source.scale);\n  if (Math.abs(naturalWidth - expected) > 1) {\n    devWarn(\n      'tile-size',\n      `tile bitmap ${naturalWidth}px wide does not match its rect ` +\n        `(expected ~${expected}px) — stale raster identity? key=${props.source.key}`,\n    );\n  }\n}\n\nconst style = computed((): CSSProperties => {\n  const { rect, z } = props.source;\n  const scale = props.viewScale;\n  return {\n    position: 'absolute',\n    left: `${rect.x * scale}px`,\n    top: `${rect.y * scale}px`,\n    width: `${rect.width * scale}px`,\n    height: `${rect.height * scale}px`,\n    zIndex: z,\n  };\n});\n</script>\n\n<template>\n  <img ref=\"image\" alt=\"\" draggable=\"false\" :style=\"style\" @load=\"checkSize\" />\n</template>\n","<!--\n  The sharp plane above the base picture: the plugin's tile plan for this view,\n  as keyed <img>s. Each tile reports painted after its first chance to be shown\n  (and the inverse when it leaves), so coarser tiles are released only once\n  their replacement can really be composited.\n\n  Tiles are placed in view (CSS px) space, never in page points under a scaled\n  container: browsers round layout lengths to 1/64 CSS px before transforms\n  apply, so a point-space rect under a ×25 zoom would be off by 0.4px or more\n  per tile, showing seams. In view space the rounding stays 1/64 px at every zoom.\n-->\n<script setup lang=\"ts\">\nimport { computed, shallowRef, watch } from 'vue';\nimport type { CSSProperties } from 'vue';\nimport { RenderToken, samePageViewDemand } from '@embedpdf/plugin-render/contract/host';\nimport type { PageLayerOptions, ViewDemand } from '@embedpdf/plugin-render/contract/host';\nimport { useOptionalCapability } from '../runtime/capabilities';\nimport { useKernelValue } from '../runtime/kernel';\nimport { usePage } from '../runtime/page';\nimport TileImage from './TileImage.vue';\n\nconst props = defineProps<{ layers: PageLayerOptions }>();\n\nconst page = usePage();\nconst render = useOptionalCapability(RenderToken);\n\n// This view's tile surface: planned per view and page, so a thumbnail rail's\n// demand can't disturb the main view's tiles. The handle is shared per view\n// and counted: one `dispose` for every `createViewDemand`.\nconst view = shallowRef<ViewDemand | null>(null);\n\n// Which page and which view this plane plans for. The page context is a new\n// value on every zoom; these change only when the page or the view does, so\n// the handle and the page's claim on it follow ownership, never the camera.\nconst pageRef = computed(() => page.value.ref);\nconst viewId = computed(() => page.value.view);\n\n// Declared before the handle's own watcher, so on unmount the page is released\n// before the handle is disposed. Releasing stops in-flight fetches; resolved\n// pictures stay cached.\nwatch(\n  [view, pageRef],\n  ([handle, ref], _previous, onCleanup) => {\n    if (handle) onCleanup(() => handle.release(ref));\n  },\n  { immediate: true },\n);\nwatch(\n  [render, viewId],\n  ([lens, id], _previous, onCleanup) => {\n    if (!lens) {\n      view.value = null;\n      return;\n    }\n    const handle = lens.createViewDemand(id);\n    view.value = handle;\n    onCleanup(() => handle.dispose());\n  },\n  { immediate: true },\n);\n\n// The demand: the host's live view (a Stage page's visible part) or the whole\n// page. Read on every kernel change, so a pan re-plans; level settling is the\n// plugin's.\nconst demand = useKernelValue(\n  () => page.value.getViewDemand?.() ?? { desiredDeviceWidth: page.value.transform.deviceWidth },\n  samePageViewDemand,\n);\n\n// Demand in, plan out: setting the demand is the one call that fetches and\n// re-plans; reading the plan is pure. Before the render, so a camera move\n// re-plans in the same update.\nwatch(\n  [view, demand, pageRef, () => props.layers],\n  ([handle, wanted, ref, layers]) => {\n    handle?.setDemand(ref, wanted, layers);\n  },\n  { immediate: true },\n);\nconst plan = useKernelValue(() => view.value?.getPlan(pageRef.value) ?? null);\n\nconst planeStyle = computed(\n  (): CSSProperties => ({\n    position: 'absolute',\n    left: 0,\n    top: 0,\n    width: `${page.value.transform.contentWidth}px`,\n    height: `${page.value.transform.contentHeight}px`,\n    pointerEvents: 'none',\n    // Tiles carry z ranks (coarse under fine) while generations mix, mid-zoom.\n    // A stacking context of its own keeps those ranks inside the plane, below\n    // annotations, page chrome and menus.\n    isolation: 'isolate',\n  }),\n);\n</script>\n\n<template>\n  <div v-if=\"view && plan && plan.paint.length > 0\" :style=\"planeStyle\">\n    <TileImage\n      v-for=\"source in plan.paint\"\n      :key=\"source.key\"\n      :source=\"source\"\n      :view=\"view\"\n      :page=\"page.ref\"\n      :view-scale=\"page.transform.viewScale\"\n    />\n  </div>\n</template>\n","<!--\n  <RenderLayer>: the page's picture, in two planes. The base plane is a\n  whole-page <img> at the plugin's resolved size, always there, the instant\n  backdrop. The tile plane above it paints the plugin's tile plan when the view\n  wants more pixels than the base may spend; a thumbnail-sized view engages\n  none. The layer only paints: every decision (sizes, tiles, caching, release)\n  is the render plugin's, and anything mid-gesture scales with CSS until the\n  plugin hands down new pixels.\n-->\n<script setup lang=\"ts\">\nimport { computed, ref, watch } from 'vue';\nimport { RenderToken } from '@embedpdf/plugin-render/contract/host';\nimport type { PaintSettings } from '@embedpdf/plugin-render/contract/host';\nimport { partsDrawnTwice, pictureLayerOptionsOf } from '@embedpdf/web';\nimport { devWarn } from '../dev';\nimport { usePaintedParts } from '../page-layers';\nimport { useOptionalCapability, useOptionalSelector } from '../runtime/capabilities';\nimport { usePage } from '../runtime/page';\nimport TilePlane from './TilePlane.vue';\n\nconst props = withDefaults(\n  defineProps<{\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. Whether it spends anything is the plugin's\n     * arithmetic: leave it on, and pass `false` only for a view that must never\n     * tile, even at deep zoom.\n     */\n    tiles?: boolean;\n  }>(),\n  // Unset stays unset: a boolean prop would otherwise read `false`.\n  { annotations: undefined, formFields: undefined, tiles: true },\n);\n\nconst page = usePage();\n// The layer is a host of the render plugin: it paints conformed sources. The\n// host lens is the same runtime token, typed wider.\nconst render = useOptionalCapability(RenderToken);\nconst NO_PAINT: PaintSettings = { tiles: false };\n// The same object until a setting it reads changes.\nconst settings = useOptionalSelector(RenderToken, (lens) => lens.getPaintSettings(), NO_PAINT);\n\nconst pageRef = computed(() => page.value.ref);\nconst parts = computed(() => ({ annotations: props.annotations, formFields: props.formFields }));\nconst painted = usePaintedParts(pageRef);\nconst may = useOptionalSelector(RenderToken, (lens) => lens.getLayerRights(), null);\n/** The parts the picture draws; `null` until the page's layers have said what they paint. */\nconst layers = computed(() =>\n  painted.value && may.value ? pictureLayerOptionsOf(painted.value, parts.value, may.value) : null,\n);\nwatch([painted, parts], ([current, asked]) => {\n  if (current && partsDrawnTwice(current, asked).length > 0) {\n    devWarn(\n      'render-layer-draws-what-a-layer-paints',\n      '<RenderLayer :annotations> or <RenderLayer :form-fields> draws what an <AnnotationLayer> ' +\n        'or a <FormLayer> on the page paints too, so it shows twice. Leave the prop out: the ' +\n        'picture leaves out what a layer paints.',\n    );\n  }\n});\n\n// The raster's identity: its conformed width, the parts it draws and the\n// page's epoch. Above the budget it stays put while zooming, so the deep-zoom\n// backdrop never fetches again.\nconst sourceKey = useOptionalSelector(\n  RenderToken,\n  (lens) =>\n    layers.value\n      ? lens.getSourceKey(page.value.ref, {\n          scale: page.value.transform.renderScale,\n          ...layers.value,\n        })\n      : null,\n  null,\n);\n\nconst image = ref<HTMLImageElement | null>(null);\nwatch(\n  [render, pageRef, sourceKey, layers],\n  ([lens, shown, _key, drawn], _previous, onCleanup) => {\n    if (!lens || !drawn) return;\n    const controller = new AbortController();\n    let revoke: (() => void) | undefined;\n    onCleanup(() => {\n      controller.abort();\n      revoke?.();\n    });\n    void (async () => {\n      try {\n        // The plugin conforms this to its resolved size and collapses asks for\n        // the same key, so any scale that maps to this key asks for this key.\n        const picture = await lens.renderSource(shown, {\n          scale: page.value.transform.renderScale,\n          ...drawn,\n          view: page.value.view,\n          signal: controller.signal,\n        });\n        const object = await picture.objectUrl().abortWith(controller.signal);\n        if (controller.signal.aborted) {\n          object.revoke();\n          return;\n        }\n        revoke = object.revoke;\n        // Set on a lasting element: the browser keeps the old picture until the\n        // new one decodes, and never asks for the old URL again, so revoking it\n        // on cleanup is safe.\n        if (image.value) image.value.src = object.url;\n      } catch {\n        // Aborted (the view moved, or the layer unmounted), or the render failed.\n      }\n    })();\n  },\n  { immediate: true, flush: 'post' },\n);\n</script>\n\n<template>\n  <img\n    ref=\"image\"\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  <TilePlane v-if=\"tiles && settings.tiles && layers\" :layers=\"layers\" />\n</template>\n","/**\n * @embedpdf/vue/render: the Vue view of `@embedpdf/plugin-render`.\n * `<RenderLayer>` draws a page; `useRender()` renders pages yourself, for\n * previews and exports; `useRenderSettings()` and `useRenderEvent()` read and\n * follow the plugin.\n */\n\n// One line per feature: registration travels with the UI.\nexport * from '@embedpdf/plugin-render';\nimport { RenderToken } from '@embedpdf/plugin-render';\nimport type { RenderCapability } from '@embedpdf/plugin-render';\nimport type { EventHook } from '@embedpdf/core';\nimport { useCapability, useCapabilityEvent } from './runtime/capabilities';\nimport { settingsComposable } from './state';\n\nexport { default as RenderLayer } from './render/RenderLayer.vue';\n\n/** The render API (renderPage, renderThumbnail, invalidation, settings) for app code. The object never changes. */\nexport function useRender(): RenderCapability {\n  return useCapability(RenderToken);\n}\n\n/** The render settings (`fullPage`, `tiles`, `format`, …), with or without a document, as refs. Takes a selector. */\nexport const useRenderSettings = settingsComposable(RenderToken);\n\n/** Subscribe to one render event while the component lives: `useRenderEvent((render) => render.onInvalidated, handler)`. */\nexport function useRenderEvent<Event>(\n  select: (render: RenderCapability) => EventHook<Event>,\n  handler: (event: Event) => void,\n): void {\n  useCapabilityEvent(RenderToken, select, handler);\n}\n"],"names":["ref","watch","page","bindPaintedImage","devWarn","computed","_createElementBlock","usePage","useOptionalCapability","RenderToken","shallowRef","useKernelValue","samePageViewDemand","_unref","_openBlock","_Fragment","_renderList","_createBlock","TileImage","useOptionalSelector","usePaintedParts","pictureLayerOptionsOf","partsDrawnTwice","_createElementVNode","TilePlane","useCapability","settingsComposable","useCapabilityEvent"],"mappings":"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"}

package/dist/render.d.cts

@@ -0,0 +1,16 @@
+/**
+ * @embedpdf/vue/render: the Vue view of `@embedpdf/plugin-render`.
+ * `<RenderLayer>` draws a page; `useRender()` renders pages yourself, for
+ * previews and exports; `useRenderSettings()` and `useRenderEvent()` read and
+ * follow the plugin.
+ */
+export * from '@embedpdf/plugin-render';
+import type { RenderCapability } from '@embedpdf/plugin-render';
+import type { EventHook } from '@embedpdf/core';
+export { default as RenderLayer } from './render/RenderLayer.vue.cjs';
+/** The render API (renderPage, renderThumbnail, invalidation, settings) for app code. The object never changes. */
+export declare function useRender(): RenderCapability;
+/** The render settings (`fullPage`, `tiles`, `format`, …), with or without a document, as refs. Takes a selector. */
+export declare const useRenderSettings: import("./state.cjs").SettingsComposable<import("@embedpdf/plugin-render").RenderSettings & object>;
+/** Subscribe to one render event while the component lives: `useRenderEvent((render) => render.onInvalidated, handler)`. */
+export declare function useRenderEvent<Event>(select: (render: RenderCapability) => EventHook<Event>, handler: (event: Event) => void): void;

package/dist/render.d.ts

@@ -0,0 +1,16 @@
+/**
+ * @embedpdf/vue/render: the Vue view of `@embedpdf/plugin-render`.
+ * `<RenderLayer>` draws a page; `useRender()` renders pages yourself, for
+ * previews and exports; `useRenderSettings()` and `useRenderEvent()` read and
+ * follow the plugin.
+ */
+export * from '@embedpdf/plugin-render';
+import type { RenderCapability } from '@embedpdf/plugin-render';
+import type { EventHook } from '@embedpdf/core';
+export { default as RenderLayer } from './render/RenderLayer.vue.js';
+/** The render API (renderPage, renderThumbnail, invalidation, settings) for app code. The object never changes. */
+export declare function useRender(): RenderCapability;
+/** The render settings (`fullPage`, `tiles`, `format`, …), with or without a document, as refs. Takes a selector. */
+export declare const useRenderSettings: import("./state.js").SettingsComposable<import("@embedpdf/plugin-render").RenderSettings & object>;
+/** Subscribe to one render event while the component lives: `useRenderEvent((render) => render.onInvalidated, handler)`. */
+export declare function useRenderEvent<Event>(select: (render: RenderCapability) => EventHook<Event>, handler: (event: Event) => void): void;

package/dist/render.js

@@ -0,0 +1,257 @@
+import { RenderToken as RenderToken$1 } from "@embedpdf/plugin-render";
+export * from "@embedpdf/plugin-render";
+import { h as useOptionalCapability, g as useKernelValue, i as useOptionalSelector, a as useCapability, b as useCapabilityEvent } from "./capabilities-C7YzgPCX.js";
+import { s as settingsComposable } from "./state-DZg8q3v6.js";
+import { defineComponent, ref, watch, computed, openBlock, createElementBlock, normalizeStyle, shallowRef, unref, Fragment, renderList, createBlock, createCommentVNode, createElementVNode } from "vue";
+import { samePageViewDemand, RenderToken } from "@embedpdf/plugin-render/contract/host";
+import { bindPaintedImage, pictureLayerOptionsOf, partsDrawnTwice } from "@embedpdf/web";
+import { d as devWarn } from "./dev-CtMlvxjZ.js";
+import { u as usePaintedParts } from "./page-layers-rlh4-1qr.js";
+import { u as usePage } from "./page-D9XIuLSj.js";
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+  __name: "TileImage",
+  props: {
+    source: {},
+    view: {},
+    page: {},
+    viewScale: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const image = ref(null);
+    watch(
+      [image, () => props.source.handle],
+      ([element, handle], _previous, onCleanup) => {
+        if (!element) return;
+        const { view, page, source } = props;
+        onCleanup(
+          bindPaintedImage(element, handle, {
+            onPainted: () => view.markPainted(page, source.key),
+            onUnpainted: () => view.markUnpainted(page, source.key)
+          })
+        );
+      },
+      { immediate: true, flush: "post" }
+    );
+    function checkSize(event) {
+      const naturalWidth = event.currentTarget.naturalWidth;
+      if (naturalWidth <= 0) return;
+      const expected = Math.round(props.source.rect.width * props.source.scale);
+      if (Math.abs(naturalWidth - expected) > 1) {
+        devWarn(
+          "tile-size",
+          `tile bitmap ${naturalWidth}px wide does not match its rect (expected ~${expected}px) — stale raster identity? key=${props.source.key}`
+        );
+      }
+    }
+    const style = computed(() => {
+      const { rect, z } = props.source;
+      const scale = props.viewScale;
+      return {
+        position: "absolute",
+        left: `${rect.x * scale}px`,
+        top: `${rect.y * scale}px`,
+        width: `${rect.width * scale}px`,
+        height: `${rect.height * scale}px`,
+        zIndex: z
+      };
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("img", {
+        ref_key: "image",
+        ref: image,
+        alt: "",
+        draggable: "false",
+        style: normalizeStyle(style.value),
+        onLoad: checkSize
+      }, null, 36);
+    };
+  }
+});
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  __name: "TilePlane",
+  props: {
+    layers: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const page = usePage();
+    const render = useOptionalCapability(RenderToken);
+    const view = shallowRef(null);
+    const pageRef = computed(() => page.value.ref);
+    const viewId = computed(() => page.value.view);
+    watch(
+      [view, pageRef],
+      ([handle, ref2], _previous, onCleanup) => {
+        if (handle) onCleanup(() => handle.release(ref2));
+      },
+      { immediate: true }
+    );
+    watch(
+      [render, viewId],
+      ([lens, id], _previous, onCleanup) => {
+        if (!lens) {
+          view.value = null;
+          return;
+        }
+        const handle = lens.createViewDemand(id);
+        view.value = handle;
+        onCleanup(() => handle.dispose());
+      },
+      { immediate: true }
+    );
+    const demand = useKernelValue(
+      () => {
+        var _a, _b;
+        return ((_b = (_a = page.value).getViewDemand) == null ? void 0 : _b.call(_a)) ?? { desiredDeviceWidth: page.value.transform.deviceWidth };
+      },
+      samePageViewDemand
+    );
+    watch(
+      [view, demand, pageRef, () => props.layers],
+      ([handle, wanted, ref2, layers]) => {
+        handle == null ? void 0 : handle.setDemand(ref2, wanted, layers);
+      },
+      { immediate: true }
+    );
+    const plan = useKernelValue(() => {
+      var _a;
+      return ((_a = view.value) == null ? void 0 : _a.getPlan(pageRef.value)) ?? null;
+    });
+    const planeStyle = computed(
+      () => ({
+        position: "absolute",
+        left: 0,
+        top: 0,
+        width: `${page.value.transform.contentWidth}px`,
+        height: `${page.value.transform.contentHeight}px`,
+        pointerEvents: "none",
+        // Tiles carry z ranks (coarse under fine) while generations mix, mid-zoom.
+        // A stacking context of its own keeps those ranks inside the plane, below
+        // annotations, page chrome and menus.
+        isolation: "isolate"
+      })
+    );
+    return (_ctx, _cache) => {
+      return view.value && unref(plan) && unref(plan).paint.length > 0 ? (openBlock(), createElementBlock("div", {
+        key: 0,
+        style: normalizeStyle(planeStyle.value)
+      }, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(unref(plan).paint, (source) => {
+          return openBlock(), createBlock(_sfc_main$2, {
+            key: source.key,
+            source,
+            view: view.value,
+            page: unref(page).ref,
+            "view-scale": unref(page).transform.viewScale
+          }, null, 8, ["source", "view", "page", "view-scale"]);
+        }), 128))
+      ], 4)) : createCommentVNode("", true);
+    };
+  }
+});
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "RenderLayer",
+  props: {
+    annotations: { type: Boolean, default: void 0 },
+    formFields: { type: Boolean, default: void 0 },
+    tiles: { type: Boolean, default: true }
+  },
+  setup(__props) {
+    const props = __props;
+    const page = usePage();
+    const render = useOptionalCapability(RenderToken);
+    const NO_PAINT = { tiles: false };
+    const settings = useOptionalSelector(RenderToken, (lens) => lens.getPaintSettings(), NO_PAINT);
+    const pageRef = computed(() => page.value.ref);
+    const parts = computed(() => ({ annotations: props.annotations, formFields: props.formFields }));
+    const painted = usePaintedParts(pageRef);
+    const may = useOptionalSelector(RenderToken, (lens) => lens.getLayerRights(), null);
+    const layers = computed(
+      () => painted.value && may.value ? pictureLayerOptionsOf(painted.value, parts.value, may.value) : null
+    );
+    watch([painted, parts], ([current, asked]) => {
+      if (current && partsDrawnTwice(current, asked).length > 0) {
+        devWarn(
+          "render-layer-draws-what-a-layer-paints",
+          "<RenderLayer :annotations> or <RenderLayer :form-fields> 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 = useOptionalSelector(
+      RenderToken,
+      (lens) => layers.value ? lens.getSourceKey(page.value.ref, {
+        scale: page.value.transform.renderScale,
+        ...layers.value
+      }) : null,
+      null
+    );
+    const image = ref(null);
+    watch(
+      [render, pageRef, sourceKey, layers],
+      ([lens, shown, _key, drawn], _previous, onCleanup) => {
+        if (!lens || !drawn) return;
+        const controller = new AbortController();
+        let revoke;
+        onCleanup(() => {
+          controller.abort();
+          revoke == null ? void 0 : revoke();
+        });
+        void (async () => {
+          try {
+            const picture = await lens.renderSource(shown, {
+              scale: page.value.transform.renderScale,
+              ...drawn,
+              view: page.value.view,
+              signal: controller.signal
+            });
+            const object = await picture.objectUrl().abortWith(controller.signal);
+            if (controller.signal.aborted) {
+              object.revoke();
+              return;
+            }
+            revoke = object.revoke;
+            if (image.value) image.value.src = object.url;
+          } catch {
+          }
+        })();
+      },
+      { immediate: true, flush: "post" }
+    );
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(Fragment, null, [
+        createElementVNode("img", {
+          ref_key: "image",
+          ref: image,
+          alt: "",
+          draggable: "false",
+          style: {
+            position: "absolute",
+            inset: 0,
+            width: "100%",
+            height: "100%",
+            pointerEvents: "none"
+          }
+        }, null, 512),
+        __props.tiles && unref(settings).tiles && layers.value ? (openBlock(), createBlock(_sfc_main$1, {
+          key: 0,
+          layers: layers.value
+        }, null, 8, ["layers"])) : createCommentVNode("", true)
+      ], 64);
+    };
+  }
+});
+function useRender() {
+  return useCapability(RenderToken$1);
+}
+const useRenderSettings = settingsComposable(RenderToken$1);
+function useRenderEvent(select, handler) {
+  useCapabilityEvent(RenderToken$1, select, handler);
+}
+export {
+  _sfc_main as RenderLayer,
+  useRender,
+  useRenderEvent,
+  useRenderSettings
+};
+//# sourceMappingURL=render.js.map

package/dist/render.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"render.js","sources":["../src/render/TileImage.vue","../src/render/TilePlane.vue","../src/render/RenderLayer.vue","../src/render.ts"],"sourcesContent":["<!--\n  One tile: its place in view space, and the shared browser image binding,\n  which hides the image until it is complete, reports painted after its first\n  chance to be shown, and reports the inverse when it leaves.\n-->\n<script setup lang=\"ts\">\nimport { computed, ref, watch } from 'vue';\nimport type { CSSProperties } from 'vue';\nimport type { PageRef } from '@embedpdf/core';\nimport type { TilePaintSource, ViewDemand } from '@embedpdf/plugin-render/contract/host';\nimport { bindPaintedImage } from '@embedpdf/web';\nimport { devWarn } from '../dev';\n\nconst props = defineProps<{\n  source: TilePaintSource;\n  /** The view's tile surface, told when this tile is painted and when it leaves. */\n  view: ViewDemand;\n  page: PageRef;\n  /** View px per page point. */\n  viewScale: number;\n}>();\n\nconst image = ref<HTMLImageElement | null>(null);\n\n// The handle is the bitmap's identity; the reports go to the view that planned it.\nwatch(\n  [image, () => props.source.handle],\n  ([element, handle], _previous, onCleanup) => {\n    if (!element) return;\n    const { view, page, source } = props;\n    onCleanup(\n      bindPaintedImage(element, handle, {\n        onPainted: () => view.markPainted(page, source.key),\n        onUnpainted: () => view.markUnpainted(page, source.key),\n      }),\n    );\n  },\n  { immediate: true, flush: 'post' },\n);\n\n/** A raster whose size disagrees with its rect would be stretched into place: a stale picture. */\nfunction checkSize(event: Event) {\n  const naturalWidth = (event.currentTarget as HTMLImageElement).naturalWidth;\n  if (naturalWidth <= 0) return;\n  const expected = Math.round(props.source.rect.width * props.source.scale);\n  if (Math.abs(naturalWidth - expected) > 1) {\n    devWarn(\n      'tile-size',\n      `tile bitmap ${naturalWidth}px wide does not match its rect ` +\n        `(expected ~${expected}px) — stale raster identity? key=${props.source.key}`,\n    );\n  }\n}\n\nconst style = computed((): CSSProperties => {\n  const { rect, z } = props.source;\n  const scale = props.viewScale;\n  return {\n    position: 'absolute',\n    left: `${rect.x * scale}px`,\n    top: `${rect.y * scale}px`,\n    width: `${rect.width * scale}px`,\n    height: `${rect.height * scale}px`,\n    zIndex: z,\n  };\n});\n</script>\n\n<template>\n  <img ref=\"image\" alt=\"\" draggable=\"false\" :style=\"style\" @load=\"checkSize\" />\n</template>\n","<!--\n  The sharp plane above the base picture: the plugin's tile plan for this view,\n  as keyed <img>s. Each tile reports painted after its first chance to be shown\n  (and the inverse when it leaves), so coarser tiles are released only once\n  their replacement can really be composited.\n\n  Tiles are placed in view (CSS px) space, never in page points under a scaled\n  container: browsers round layout lengths to 1/64 CSS px before transforms\n  apply, so a point-space rect under a ×25 zoom would be off by 0.4px or more\n  per tile, showing seams. In view space the rounding stays 1/64 px at every zoom.\n-->\n<script setup lang=\"ts\">\nimport { computed, shallowRef, watch } from 'vue';\nimport type { CSSProperties } from 'vue';\nimport { RenderToken, samePageViewDemand } from '@embedpdf/plugin-render/contract/host';\nimport type { PageLayerOptions, ViewDemand } from '@embedpdf/plugin-render/contract/host';\nimport { useOptionalCapability } from '../runtime/capabilities';\nimport { useKernelValue } from '../runtime/kernel';\nimport { usePage } from '../runtime/page';\nimport TileImage from './TileImage.vue';\n\nconst props = defineProps<{ layers: PageLayerOptions }>();\n\nconst page = usePage();\nconst render = useOptionalCapability(RenderToken);\n\n// This view's tile surface: planned per view and page, so a thumbnail rail's\n// demand can't disturb the main view's tiles. The handle is shared per view\n// and counted: one `dispose` for every `createViewDemand`.\nconst view = shallowRef<ViewDemand | null>(null);\n\n// Which page and which view this plane plans for. The page context is a new\n// value on every zoom; these change only when the page or the view does, so\n// the handle and the page's claim on it follow ownership, never the camera.\nconst pageRef = computed(() => page.value.ref);\nconst viewId = computed(() => page.value.view);\n\n// Declared before the handle's own watcher, so on unmount the page is released\n// before the handle is disposed. Releasing stops in-flight fetches; resolved\n// pictures stay cached.\nwatch(\n  [view, pageRef],\n  ([handle, ref], _previous, onCleanup) => {\n    if (handle) onCleanup(() => handle.release(ref));\n  },\n  { immediate: true },\n);\nwatch(\n  [render, viewId],\n  ([lens, id], _previous, onCleanup) => {\n    if (!lens) {\n      view.value = null;\n      return;\n    }\n    const handle = lens.createViewDemand(id);\n    view.value = handle;\n    onCleanup(() => handle.dispose());\n  },\n  { immediate: true },\n);\n\n// The demand: the host's live view (a Stage page's visible part) or the whole\n// page. Read on every kernel change, so a pan re-plans; level settling is the\n// plugin's.\nconst demand = useKernelValue(\n  () => page.value.getViewDemand?.() ?? { desiredDeviceWidth: page.value.transform.deviceWidth },\n  samePageViewDemand,\n);\n\n// Demand in, plan out: setting the demand is the one call that fetches and\n// re-plans; reading the plan is pure. Before the render, so a camera move\n// re-plans in the same update.\nwatch(\n  [view, demand, pageRef, () => props.layers],\n  ([handle, wanted, ref, layers]) => {\n    handle?.setDemand(ref, wanted, layers);\n  },\n  { immediate: true },\n);\nconst plan = useKernelValue(() => view.value?.getPlan(pageRef.value) ?? null);\n\nconst planeStyle = computed(\n  (): CSSProperties => ({\n    position: 'absolute',\n    left: 0,\n    top: 0,\n    width: `${page.value.transform.contentWidth}px`,\n    height: `${page.value.transform.contentHeight}px`,\n    pointerEvents: 'none',\n    // Tiles carry z ranks (coarse under fine) while generations mix, mid-zoom.\n    // A stacking context of its own keeps those ranks inside the plane, below\n    // annotations, page chrome and menus.\n    isolation: 'isolate',\n  }),\n);\n</script>\n\n<template>\n  <div v-if=\"view && plan && plan.paint.length > 0\" :style=\"planeStyle\">\n    <TileImage\n      v-for=\"source in plan.paint\"\n      :key=\"source.key\"\n      :source=\"source\"\n      :view=\"view\"\n      :page=\"page.ref\"\n      :view-scale=\"page.transform.viewScale\"\n    />\n  </div>\n</template>\n","<!--\n  <RenderLayer>: the page's picture, in two planes. The base plane is a\n  whole-page <img> at the plugin's resolved size, always there, the instant\n  backdrop. The tile plane above it paints the plugin's tile plan when the view\n  wants more pixels than the base may spend; a thumbnail-sized view engages\n  none. The layer only paints: every decision (sizes, tiles, caching, release)\n  is the render plugin's, and anything mid-gesture scales with CSS until the\n  plugin hands down new pixels.\n-->\n<script setup lang=\"ts\">\nimport { computed, ref, watch } from 'vue';\nimport { RenderToken } from '@embedpdf/plugin-render/contract/host';\nimport type { PaintSettings } from '@embedpdf/plugin-render/contract/host';\nimport { partsDrawnTwice, pictureLayerOptionsOf } from '@embedpdf/web';\nimport { devWarn } from '../dev';\nimport { usePaintedParts } from '../page-layers';\nimport { useOptionalCapability, useOptionalSelector } from '../runtime/capabilities';\nimport { usePage } from '../runtime/page';\nimport TilePlane from './TilePlane.vue';\n\nconst props = withDefaults(\n  defineProps<{\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. Whether it spends anything is the plugin's\n     * arithmetic: leave it on, and pass `false` only for a view that must never\n     * tile, even at deep zoom.\n     */\n    tiles?: boolean;\n  }>(),\n  // Unset stays unset: a boolean prop would otherwise read `false`.\n  { annotations: undefined, formFields: undefined, tiles: true },\n);\n\nconst page = usePage();\n// The layer is a host of the render plugin: it paints conformed sources. The\n// host lens is the same runtime token, typed wider.\nconst render = useOptionalCapability(RenderToken);\nconst NO_PAINT: PaintSettings = { tiles: false };\n// The same object until a setting it reads changes.\nconst settings = useOptionalSelector(RenderToken, (lens) => lens.getPaintSettings(), NO_PAINT);\n\nconst pageRef = computed(() => page.value.ref);\nconst parts = computed(() => ({ annotations: props.annotations, formFields: props.formFields }));\nconst painted = usePaintedParts(pageRef);\nconst may = useOptionalSelector(RenderToken, (lens) => lens.getLayerRights(), null);\n/** The parts the picture draws; `null` until the page's layers have said what they paint. */\nconst layers = computed(() =>\n  painted.value && may.value ? pictureLayerOptionsOf(painted.value, parts.value, may.value) : null,\n);\nwatch([painted, parts], ([current, asked]) => {\n  if (current && partsDrawnTwice(current, asked).length > 0) {\n    devWarn(\n      'render-layer-draws-what-a-layer-paints',\n      '<RenderLayer :annotations> or <RenderLayer :form-fields> draws what an <AnnotationLayer> ' +\n        'or a <FormLayer> on the page paints too, so it shows twice. Leave the prop out: the ' +\n        'picture leaves out what a layer paints.',\n    );\n  }\n});\n\n// The raster's identity: its conformed width, the parts it draws and the\n// page's epoch. Above the budget it stays put while zooming, so the deep-zoom\n// backdrop never fetches again.\nconst sourceKey = useOptionalSelector(\n  RenderToken,\n  (lens) =>\n    layers.value\n      ? lens.getSourceKey(page.value.ref, {\n          scale: page.value.transform.renderScale,\n          ...layers.value,\n        })\n      : null,\n  null,\n);\n\nconst image = ref<HTMLImageElement | null>(null);\nwatch(\n  [render, pageRef, sourceKey, layers],\n  ([lens, shown, _key, drawn], _previous, onCleanup) => {\n    if (!lens || !drawn) return;\n    const controller = new AbortController();\n    let revoke: (() => void) | undefined;\n    onCleanup(() => {\n      controller.abort();\n      revoke?.();\n    });\n    void (async () => {\n      try {\n        // The plugin conforms this to its resolved size and collapses asks for\n        // the same key, so any scale that maps to this key asks for this key.\n        const picture = await lens.renderSource(shown, {\n          scale: page.value.transform.renderScale,\n          ...drawn,\n          view: page.value.view,\n          signal: controller.signal,\n        });\n        const object = await picture.objectUrl().abortWith(controller.signal);\n        if (controller.signal.aborted) {\n          object.revoke();\n          return;\n        }\n        revoke = object.revoke;\n        // Set on a lasting element: the browser keeps the old picture until the\n        // new one decodes, and never asks for the old URL again, so revoking it\n        // on cleanup is safe.\n        if (image.value) image.value.src = object.url;\n      } catch {\n        // Aborted (the view moved, or the layer unmounted), or the render failed.\n      }\n    })();\n  },\n  { immediate: true, flush: 'post' },\n);\n</script>\n\n<template>\n  <img\n    ref=\"image\"\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  <TilePlane v-if=\"tiles && settings.tiles && layers\" :layers=\"layers\" />\n</template>\n","/**\n * @embedpdf/vue/render: the Vue view of `@embedpdf/plugin-render`.\n * `<RenderLayer>` draws a page; `useRender()` renders pages yourself, for\n * previews and exports; `useRenderSettings()` and `useRenderEvent()` read and\n * follow the plugin.\n */\n\n// One line per feature: registration travels with the UI.\nexport * from '@embedpdf/plugin-render';\nimport { RenderToken } from '@embedpdf/plugin-render';\nimport type { RenderCapability } from '@embedpdf/plugin-render';\nimport type { EventHook } from '@embedpdf/core';\nimport { useCapability, useCapabilityEvent } from './runtime/capabilities';\nimport { settingsComposable } from './state';\n\nexport { default as RenderLayer } from './render/RenderLayer.vue';\n\n/** The render API (renderPage, renderThumbnail, invalidation, settings) for app code. The object never changes. */\nexport function useRender(): RenderCapability {\n  return useCapability(RenderToken);\n}\n\n/** The render settings (`fullPage`, `tiles`, `format`, …), with or without a document, as refs. Takes a selector. */\nexport const useRenderSettings = settingsComposable(RenderToken);\n\n/** Subscribe to one render event while the component lives: `useRenderEvent((render) => render.onInvalidated, handler)`. */\nexport function useRenderEvent<Event>(\n  select: (render: RenderCapability) => EventHook<Event>,\n  handler: (event: Event) => void,\n): void {\n  useCapabilityEvent(RenderToken, select, handler);\n}\n"],"names":["_createElementBlock","ref","_unref","_openBlock","_Fragment","_renderList","_createBlock","TileImage","_createElementVNode","TilePlane","RenderToken"],"mappings":"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"}