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

package/dist/PageView.vue_vue_type_script_setup_true_lang-CjrpumX2.cjs

@@ -0,0 +1,151 @@
+"use strict";
+const vue = require("vue");
+const core = require("@embedpdf/core");
+const coreGeometry = require("@embedpdf/core-geometry");
+const web = require("@embedpdf/web");
+const host = require("@embedpdf/plugin-interaction/contract/host");
+const AnchoredScope_vue_vue_type_script_setup_true_lang = require("./AnchoredScope.vue_vue_type_script_setup_true_lang-BwtHXw73.cjs");
+const PagePointerSource_vue_vue_type_script_setup_true_lang = require("./PagePointerSource.vue_vue_type_script_setup_true_lang-Cw29c8Oa.cjs");
+const capabilities = require("./capabilities-DVNJmgy7.cjs");
+const documents = require("./documents-TQ1fMdWI.cjs");
+const page = require("./page-Doy4_Sdz.cjs");
+const surfaceBox = require("./surface-box-C7EvUOXp.cjs");
+let viewCount = 0;
+function nextViewId() {
+  viewCount += 1;
+  return viewCount;
+}
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  ...{ inheritAttrs: false },
+  __name: "PageView",
+  props: {
+    page: {},
+    documentId: {},
+    width: { default: 240 },
+    pageFrame: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const scoped = capabilities.useDocumentId();
+    const documentId = vue.computed(() => props.documentId ?? scoped.value);
+    capabilities.provideDocumentScope(documentId);
+    const entry = capabilities.useKernelValue((kernel) => {
+      const id = documentId.value;
+      if (!id) return null;
+      const pages = kernel.documents.listPages(id);
+      const wanted = props.page;
+      const found = typeof wanted === "number" ? pages[wanted] : pages.find((page2) => page2.ref.objectNumber === wanted.objectNumber);
+      return found ?? null;
+    });
+    const pageIndex = vue.computed(
+      () => {
+        var _a;
+        return ((_a = entry.value) == null ? void 0 : _a.index) ?? (typeof props.page === "number" ? props.page : 0);
+      }
+    );
+    const pageObjectNumber = vue.computed(
+      () => {
+        var _a;
+        return ((_a = entry.value) == null ? void 0 : _a.ref.objectNumber) ?? (typeof props.page === "number" ? props.page + 1 : props.page.objectNumber);
+      }
+    );
+    const pageRef = vue.computed(() => core.toPageRef(pageObjectNumber.value));
+    const frame = vue.computed((previous) => {
+      const { top = 0, right = 0, bottom = 0, left = 0 } = props.pageFrame ?? {};
+      if (previous && previous.top === top && previous.right === right && previous.bottom === bottom && previous.left === left) {
+        return previous;
+      }
+      return { top, right, bottom, left };
+    });
+    const transform = vue.computed(
+      () => coreGeometry.pageTransform(
+        web.pageViewTransformInput(
+          entry.value,
+          props.width,
+          typeof window !== "undefined" ? window.devicePixelRatio || 1 : 1
+        )
+      )
+    );
+    const view = `page-view:${nextViewId()}`;
+    const content = vue.ref(null);
+    const context = vue.computed(
+      () => web.makePageContext(
+        documentId.value ?? "",
+        view,
+        pageRef.value,
+        pageIndex.value,
+        frame.value,
+        transform.value,
+        () => content.value.getBoundingClientRect()
+      )
+    );
+    page.providePage(context);
+    const projectorBinding = vue.computed(
+      () => ({
+        projector: web.clientPageProjector(context.value, () => content.value !== null),
+        revision: context.value,
+        subscribe: web.observeClientGeometry
+      })
+    );
+    const shownPages = vue.computed(() => /* @__PURE__ */ new Set([pageObjectNumber.value]));
+    const look = documents.useViewerSettings((settings) => settings.page);
+    const interaction = capabilities.useOptionalCapability(host.InteractionToken);
+    const boxes = vue.computed(() => {
+      const layout = web.pageSurfaceLayout(transform.value, frame.value);
+      return {
+        outer: {
+          position: "relative",
+          width: `${layout.outer.width}px`,
+          height: `${layout.outer.height}px`
+        },
+        // The drop shadow only: transparent and axis-aligned, so it never peeks
+        // out behind the picture and stays put when the page turns.
+        shadow: {
+          position: "absolute",
+          ...surfaceBox.pixelBox(layout.shadow),
+          boxShadow: web.paint("page-shadow", look.value.shadow)
+        },
+        // Backing and picture as one box, centred on the footprint and turned about
+        // its centre; rotation 0 carries no transform.
+        content: {
+          position: "absolute",
+          ...surfaceBox.pixelBox(layout.content),
+          background: web.paint("page-background", look.value.background),
+          transform: layout.turn ?? void 0,
+          // Selection highlights are drawn by the layers: no native text or image selection.
+          userSelect: "none",
+          WebkitUserSelect: "none"
+        }
+      };
+    });
+    return (_ctx, _cache) => {
+      return !documentId.value || !vue.unref(entry) ? vue.renderSlot(_ctx.$slots, "fallback", {}, void 0, void 0, 0) : (vue.openBlock(), vue.createBlock(AnchoredScope_vue_vue_type_script_setup_true_lang._sfc_main, {
+        key: 1,
+        binding: projectorBinding.value,
+        shown: shownPages.value
+      }, {
+        default: vue.withCtx(() => [
+          vue.createElementVNode("div", vue.mergeProps({
+            style: boxes.value.outer
+          }, _ctx.$attrs), [
+            vue.createElementVNode("div", {
+              style: vue.normalizeStyle(boxes.value.shadow)
+            }, null, 4),
+            vue.createElementVNode("div", {
+              ref_key: "content",
+              ref: content,
+              style: vue.normalizeStyle(boxes.value.content)
+            }, [
+              vue.unref(interaction) ? (vue.openBlock(), vue.createBlock(PagePointerSource_vue_vue_type_script_setup_true_lang._sfc_main, { key: 0 })) : vue.createCommentVNode("", true),
+              vue.renderSlot(_ctx.$slots, "default", { page: context.value })
+            ], 4),
+            vue.renderSlot(_ctx.$slots, "page-chrome", { page: context.value })
+          ], 16)
+        ]),
+        _: 3
+      }, 8, ["binding", "shown"]));
+    };
+  }
+});
+exports._sfc_main = _sfc_main;
+//# sourceMappingURL=PageView.vue_vue_type_script_setup_true_lang-CjrpumX2.cjs.map

package/dist/PageView.vue_vue_type_script_setup_true_lang-CjrpumX2.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageView.vue_vue_type_script_setup_true_lang-CjrpumX2.cjs","sources":["../src/page-view/PageView.vue"],"sourcesContent":["<!--\n  <PageView>: one page on its own, with no Stage. The same layers, rotation and\n  chrome frame as a <Stage> page, but no camera, scroll or zoom, and no\n  dependency on the stage plugin. It builds the page's transform from a width\n  and provides the same page context, so every layer (<RenderLayer>,\n  <SelectionLayer>, …) works here as it does on the Stage. It also provides a\n  measured projection, so anchored UI (<SelectionMenu>, an annotation menu)\n  works here too: teleported to the body and placed `fixed`, out of reach of\n  any ancestor's overflow clipping.\n-->\n<script setup lang=\"ts\">\nimport { computed, ref } from 'vue';\nimport type { CSSProperties } from 'vue';\nimport { toPageRef } from '@embedpdf/core';\nimport type { PageInfo, PageRef } from '@embedpdf/core';\nimport { pageTransform } from '@embedpdf/core-geometry';\nimport type { PageFrame, PageTransform } from '@embedpdf/core-geometry';\nimport {\n  clientPageProjector,\n  makePageContext,\n  observeClientGeometry,\n  pageSurfaceLayout,\n  pageViewTransformInput,\n  paint,\n} from '@embedpdf/web';\nimport { InteractionToken as InteractionHostToken } from '@embedpdf/plugin-interaction/contract/host';\nimport AnchoredScope from '../anchored/AnchoredScope.vue';\nimport PagePointerSource from '../interaction/PagePointerSource.vue';\nimport type { ProjectorBinding, ShownPages } from '../anchored/projector';\nimport { useOptionalCapability } from '../runtime/capabilities';\nimport { useViewerSettings } from '../runtime/documents';\nimport { provideDocumentScope, useDocumentId, useKernelValue } from '../runtime/kernel';\nimport { providePage } from '../runtime/page';\nimport type { PageContextValue } from '../runtime/page';\nimport { pixelBox } from '../runtime/surface-box';\n\n// `class` and `style` go on the outer box, not on the fallback.\ndefineOptions({ inheritAttrs: false });\n\nconst props = withDefaults(\n  defineProps<{\n    /** The page: its `ref`, which follows it when pages move, or its index, from 0. */\n    page: PageRef | number;\n    /** Which document to show. Defaults to the document in scope, else the active one. */\n    documentId?: string;\n    /** The width of the page upright, in pixels: a page turned a quarter is that tall. Default 240. */\n    width?: number;\n    /** Space reserved around the page for your own labels, in pixels per side; the sides left out are 0. */\n    pageFrame?: Partial<PageFrame>;\n  }>(),\n  { width: 240 },\n);\n\ndefineSlots<{\n  /** Page-space content (layers): it turns with the page. */\n  default?(props: { page: PageContextValue }): unknown;\n  /** The page's box and its reserved `pageFrame` (a label, a border): never turned. */\n  'page-chrome'?(props: { page: PageContextValue }): unknown;\n  /** Shown while the document or the page isn't available yet (default: nothing). */\n  fallback?(): unknown;\n}>();\n\nconst scoped = useDocumentId();\nconst documentId = computed(() => props.documentId ?? scoped.value);\n// Everything inside talks to the document this page belongs to.\nprovideDocumentScope(documentId);\n\n// The page's entry in the document's page list, subscribed: a rotation or a\n// reorder updates this surface as it updates a Stage page. Entries are the same\n// object per page until the page changes, so identity is the right equality.\nconst entry = useKernelValue((kernel): PageInfo | null => {\n  const id = documentId.value;\n  if (!id) return null;\n  const pages = kernel.documents.listPages(id);\n  const wanted = props.page;\n  const found =\n    typeof wanted === 'number'\n      ? pages[wanted]\n      : pages.find((page) => page.ref.objectNumber === wanted.objectNumber);\n  return found ?? null;\n});\n\nconst pageIndex = computed(\n  () => entry.value?.index ?? (typeof props.page === 'number' ? props.page : 0),\n);\n// The page's address is the kernel's; a placeholder (object number = index + 1)\n// only until the page is known, and the fallback shows until then anyway. Kept\n// by its number, so the context's `ref` is the same object while the page is.\nconst pageObjectNumber = computed(\n  () =>\n    entry.value?.ref.objectNumber ??\n    (typeof props.page === 'number' ? props.page + 1 : props.page.objectNumber),\n);\nconst pageRef = computed(() => toPageRef(pageObjectNumber.value));\n\n// The sides left out reserve nothing. A new value only when a side changes, so\n// an inline `:page-frame=\"{ bottom: 20 }\"` doesn't rebuild the page context on\n// every render of its parent.\nconst frame = computed((previous?: PageFrame): PageFrame => {\n  const { top = 0, right = 0, bottom = 0, left = 0 } = props.pageFrame ?? {};\n  if (\n    previous &&\n    previous.top === top &&\n    previous.right === right &&\n    previous.bottom === bottom &&\n    previous.left === left\n  ) {\n    return previous;\n  }\n  return { top, right, bottom, left };\n});\n\n/**\n * No camera: the page's transform comes straight from the width\n * (`pageViewTransformInput` from `@embedpdf/web`, the same in every framework).\n */\nconst transform = computed(\n  (): PageTransform =>\n    pageTransform(\n      pageViewTransformInput(\n        entry.value,\n        props.width,\n        typeof window !== 'undefined' ? window.devicePixelRatio || 1 : 1,\n      ),\n    ),\n);\n\n// This page view's own identity: two page views of the same page (a compare\n// strip) plan their pictures apart, as two stage views do.\nconst view = `page-view:${nextViewId()}`;\n\nconst content = ref<HTMLDivElement | null>(null);\n\nconst context = computed(\n  (): PageContextValue =>\n    makePageContext(\n      documentId.value ?? '',\n      view,\n      pageRef.value,\n      pageIndex.value,\n      frame.value,\n      transform.value,\n      () => content.value!.getBoundingClientRect(),\n    ),\n);\nprovidePage(context);\n\n/**\n * No camera, so anchored UI is placed by measuring the page element in client\n * space. The projection answers nothing until the page element exists. A new\n * page context is a state-driven change (the binding's revision); the moves\n * the browser makes on its own (the document scrolls, the window resizes) come\n * through `observeClientGeometry`.\n */\nconst projectorBinding = computed(\n  (): ProjectorBinding => ({\n    projector: clientPageProjector(context.value, () => content.value !== null),\n    revision: context.value,\n    subscribe: observeClientGeometry,\n  }),\n);\n// A page view shows its one page.\nconst shownPages = computed((): ShownPages => new Set([pageObjectNumber.value]));\n\n// The viewer's `page` settings; `--epdf-page-*` CSS variables win over them.\nconst look = useViewerSettings((settings) => settings.page);\n\n/** With the interaction plugin registered, the page view is the page's pointer surface. */\nconst interaction = useOptionalCapability(InteractionHostToken);\n\n/** The outer box (page and frame), the shadow at the page's footprint, and the turned content box. */\nconst boxes = computed(() => {\n  const layout = pageSurfaceLayout(transform.value, frame.value);\n  return {\n    outer: {\n      position: 'relative',\n      width: `${layout.outer.width}px`,\n      height: `${layout.outer.height}px`,\n    },\n    // The drop shadow only: transparent and axis-aligned, so it never peeks\n    // out behind the picture and stays put when the page turns.\n    shadow: {\n      position: 'absolute',\n      ...pixelBox(layout.shadow),\n      boxShadow: paint('page-shadow', look.value.shadow),\n    },\n    // Backing and picture as one box, centred on the footprint and turned about\n    // its centre; rotation 0 carries no transform.\n    content: {\n      position: 'absolute',\n      ...pixelBox(layout.content),\n      background: paint('page-background', look.value.background),\n      transform: layout.turn ?? undefined,\n      // Selection highlights are drawn by the layers: no native text or image selection.\n      userSelect: 'none',\n      WebkitUserSelect: 'none',\n    },\n  } satisfies Record<string, CSSProperties>;\n});\n</script>\n\n<script lang=\"ts\">\nlet viewCount = 0;\n/** A number per page view instance, for its view identity. */\nfunction nextViewId(): number {\n  viewCount += 1;\n  return viewCount;\n}\n</script>\n\n<template>\n  <slot v-if=\"!documentId || !entry\" name=\"fallback\" />\n  <AnchoredScope v-else :binding=\"projectorBinding\" :shown=\"shownPages\">\n    <!-- Your `class` and `style` go on the outer box, and your style wins. -->\n    <div :style=\"boxes.outer\" v-bind=\"$attrs\">\n      <div :style=\"boxes.shadow\" />\n      <div ref=\"content\" :style=\"boxes.content\">\n        <!-- The page's pointer surface, below the layers, like the Stage's own listener: a press\n             on a layer that lets the pointer through reaches the tools, a link keeps its own. -->\n        <PagePointerSource v-if=\"interaction\" />\n        <slot :page=\"context\" />\n      </div>\n      <slot name=\"page-chrome\" :page=\"context\" />\n    </div>\n  </AnchoredScope>\n</template>\n"],"names":["useDocumentId","computed","provideDocumentScope","useKernelValue","page","toPageRef","pageTransform","pageViewTransformInput","ref","makePageContext","providePage","clientPageProjector","observeClientGeometry","useViewerSettings","useOptionalCapability","InteractionHostToken","pageSurfaceLayout","pixelBox","paint","_unref","_renderSlot","_createBlock","AnchoredScope","_createElementVNode","_mergeProps","$attrs","_normalizeStyle","PagePointerSource"],"mappings":"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"}

package/dist/PageView.vue_vue_type_script_setup_true_lang-O4AFc0_R.js

@@ -0,0 +1,152 @@
+import { defineComponent, computed, ref, unref, renderSlot, openBlock, createBlock, withCtx, createElementVNode, mergeProps, normalizeStyle, createCommentVNode } from "vue";
+import { toPageRef } from "@embedpdf/core";
+import { pageTransform } from "@embedpdf/core-geometry";
+import { pageViewTransformInput, makePageContext, observeClientGeometry, clientPageProjector, pageSurfaceLayout, paint } from "@embedpdf/web";
+import { InteractionToken } from "@embedpdf/plugin-interaction/contract/host";
+import { _ as _sfc_main$1 } from "./AnchoredScope.vue_vue_type_script_setup_true_lang-Ulkr3a6R.js";
+import { _ as _sfc_main$2 } from "./PagePointerSource.vue_vue_type_script_setup_true_lang-CJt3vdBW.js";
+import { d as useDocumentId, p as provideDocumentScope, g as useKernelValue, h as useOptionalCapability } from "./capabilities-C7YzgPCX.js";
+import { e as useViewerSettings } from "./documents-DUu5H4yH.js";
+import { p as providePage } from "./page-D9XIuLSj.js";
+import { p as pixelBox } from "./surface-box-B9oa4YoG.js";
+let viewCount = 0;
+function nextViewId() {
+  viewCount += 1;
+  return viewCount;
+}
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{ inheritAttrs: false },
+  __name: "PageView",
+  props: {
+    page: {},
+    documentId: {},
+    width: { default: 240 },
+    pageFrame: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const scoped = useDocumentId();
+    const documentId = computed(() => props.documentId ?? scoped.value);
+    provideDocumentScope(documentId);
+    const entry = useKernelValue((kernel) => {
+      const id = documentId.value;
+      if (!id) return null;
+      const pages = kernel.documents.listPages(id);
+      const wanted = props.page;
+      const found = typeof wanted === "number" ? pages[wanted] : pages.find((page) => page.ref.objectNumber === wanted.objectNumber);
+      return found ?? null;
+    });
+    const pageIndex = computed(
+      () => {
+        var _a;
+        return ((_a = entry.value) == null ? void 0 : _a.index) ?? (typeof props.page === "number" ? props.page : 0);
+      }
+    );
+    const pageObjectNumber = computed(
+      () => {
+        var _a;
+        return ((_a = entry.value) == null ? void 0 : _a.ref.objectNumber) ?? (typeof props.page === "number" ? props.page + 1 : props.page.objectNumber);
+      }
+    );
+    const pageRef = computed(() => toPageRef(pageObjectNumber.value));
+    const frame = computed((previous) => {
+      const { top = 0, right = 0, bottom = 0, left = 0 } = props.pageFrame ?? {};
+      if (previous && previous.top === top && previous.right === right && previous.bottom === bottom && previous.left === left) {
+        return previous;
+      }
+      return { top, right, bottom, left };
+    });
+    const transform = computed(
+      () => pageTransform(
+        pageViewTransformInput(
+          entry.value,
+          props.width,
+          typeof window !== "undefined" ? window.devicePixelRatio || 1 : 1
+        )
+      )
+    );
+    const view = `page-view:${nextViewId()}`;
+    const content = ref(null);
+    const context = computed(
+      () => makePageContext(
+        documentId.value ?? "",
+        view,
+        pageRef.value,
+        pageIndex.value,
+        frame.value,
+        transform.value,
+        () => content.value.getBoundingClientRect()
+      )
+    );
+    providePage(context);
+    const projectorBinding = computed(
+      () => ({
+        projector: clientPageProjector(context.value, () => content.value !== null),
+        revision: context.value,
+        subscribe: observeClientGeometry
+      })
+    );
+    const shownPages = computed(() => /* @__PURE__ */ new Set([pageObjectNumber.value]));
+    const look = useViewerSettings((settings) => settings.page);
+    const interaction = useOptionalCapability(InteractionToken);
+    const boxes = computed(() => {
+      const layout = pageSurfaceLayout(transform.value, frame.value);
+      return {
+        outer: {
+          position: "relative",
+          width: `${layout.outer.width}px`,
+          height: `${layout.outer.height}px`
+        },
+        // The drop shadow only: transparent and axis-aligned, so it never peeks
+        // out behind the picture and stays put when the page turns.
+        shadow: {
+          position: "absolute",
+          ...pixelBox(layout.shadow),
+          boxShadow: paint("page-shadow", look.value.shadow)
+        },
+        // Backing and picture as one box, centred on the footprint and turned about
+        // its centre; rotation 0 carries no transform.
+        content: {
+          position: "absolute",
+          ...pixelBox(layout.content),
+          background: paint("page-background", look.value.background),
+          transform: layout.turn ?? void 0,
+          // Selection highlights are drawn by the layers: no native text or image selection.
+          userSelect: "none",
+          WebkitUserSelect: "none"
+        }
+      };
+    });
+    return (_ctx, _cache) => {
+      return !documentId.value || !unref(entry) ? renderSlot(_ctx.$slots, "fallback", {}, void 0, void 0, 0) : (openBlock(), createBlock(_sfc_main$1, {
+        key: 1,
+        binding: projectorBinding.value,
+        shown: shownPages.value
+      }, {
+        default: withCtx(() => [
+          createElementVNode("div", mergeProps({
+            style: boxes.value.outer
+          }, _ctx.$attrs), [
+            createElementVNode("div", {
+              style: normalizeStyle(boxes.value.shadow)
+            }, null, 4),
+            createElementVNode("div", {
+              ref_key: "content",
+              ref: content,
+              style: normalizeStyle(boxes.value.content)
+            }, [
+              unref(interaction) ? (openBlock(), createBlock(_sfc_main$2, { key: 0 })) : createCommentVNode("", true),
+              renderSlot(_ctx.$slots, "default", { page: context.value })
+            ], 4),
+            renderSlot(_ctx.$slots, "page-chrome", { page: context.value })
+          ], 16)
+        ]),
+        _: 3
+      }, 8, ["binding", "shown"]));
+    };
+  }
+});
+export {
+  _sfc_main as _
+};
+//# sourceMappingURL=PageView.vue_vue_type_script_setup_true_lang-O4AFc0_R.js.map

package/dist/PageView.vue_vue_type_script_setup_true_lang-O4AFc0_R.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageView.vue_vue_type_script_setup_true_lang-O4AFc0_R.js","sources":["../src/page-view/PageView.vue"],"sourcesContent":["<!--\n  <PageView>: one page on its own, with no Stage. The same layers, rotation and\n  chrome frame as a <Stage> page, but no camera, scroll or zoom, and no\n  dependency on the stage plugin. It builds the page's transform from a width\n  and provides the same page context, so every layer (<RenderLayer>,\n  <SelectionLayer>, …) works here as it does on the Stage. It also provides a\n  measured projection, so anchored UI (<SelectionMenu>, an annotation menu)\n  works here too: teleported to the body and placed `fixed`, out of reach of\n  any ancestor's overflow clipping.\n-->\n<script setup lang=\"ts\">\nimport { computed, ref } from 'vue';\nimport type { CSSProperties } from 'vue';\nimport { toPageRef } from '@embedpdf/core';\nimport type { PageInfo, PageRef } from '@embedpdf/core';\nimport { pageTransform } from '@embedpdf/core-geometry';\nimport type { PageFrame, PageTransform } from '@embedpdf/core-geometry';\nimport {\n  clientPageProjector,\n  makePageContext,\n  observeClientGeometry,\n  pageSurfaceLayout,\n  pageViewTransformInput,\n  paint,\n} from '@embedpdf/web';\nimport { InteractionToken as InteractionHostToken } from '@embedpdf/plugin-interaction/contract/host';\nimport AnchoredScope from '../anchored/AnchoredScope.vue';\nimport PagePointerSource from '../interaction/PagePointerSource.vue';\nimport type { ProjectorBinding, ShownPages } from '../anchored/projector';\nimport { useOptionalCapability } from '../runtime/capabilities';\nimport { useViewerSettings } from '../runtime/documents';\nimport { provideDocumentScope, useDocumentId, useKernelValue } from '../runtime/kernel';\nimport { providePage } from '../runtime/page';\nimport type { PageContextValue } from '../runtime/page';\nimport { pixelBox } from '../runtime/surface-box';\n\n// `class` and `style` go on the outer box, not on the fallback.\ndefineOptions({ inheritAttrs: false });\n\nconst props = withDefaults(\n  defineProps<{\n    /** The page: its `ref`, which follows it when pages move, or its index, from 0. */\n    page: PageRef | number;\n    /** Which document to show. Defaults to the document in scope, else the active one. */\n    documentId?: string;\n    /** The width of the page upright, in pixels: a page turned a quarter is that tall. Default 240. */\n    width?: number;\n    /** Space reserved around the page for your own labels, in pixels per side; the sides left out are 0. */\n    pageFrame?: Partial<PageFrame>;\n  }>(),\n  { width: 240 },\n);\n\ndefineSlots<{\n  /** Page-space content (layers): it turns with the page. */\n  default?(props: { page: PageContextValue }): unknown;\n  /** The page's box and its reserved `pageFrame` (a label, a border): never turned. */\n  'page-chrome'?(props: { page: PageContextValue }): unknown;\n  /** Shown while the document or the page isn't available yet (default: nothing). */\n  fallback?(): unknown;\n}>();\n\nconst scoped = useDocumentId();\nconst documentId = computed(() => props.documentId ?? scoped.value);\n// Everything inside talks to the document this page belongs to.\nprovideDocumentScope(documentId);\n\n// The page's entry in the document's page list, subscribed: a rotation or a\n// reorder updates this surface as it updates a Stage page. Entries are the same\n// object per page until the page changes, so identity is the right equality.\nconst entry = useKernelValue((kernel): PageInfo | null => {\n  const id = documentId.value;\n  if (!id) return null;\n  const pages = kernel.documents.listPages(id);\n  const wanted = props.page;\n  const found =\n    typeof wanted === 'number'\n      ? pages[wanted]\n      : pages.find((page) => page.ref.objectNumber === wanted.objectNumber);\n  return found ?? null;\n});\n\nconst pageIndex = computed(\n  () => entry.value?.index ?? (typeof props.page === 'number' ? props.page : 0),\n);\n// The page's address is the kernel's; a placeholder (object number = index + 1)\n// only until the page is known, and the fallback shows until then anyway. Kept\n// by its number, so the context's `ref` is the same object while the page is.\nconst pageObjectNumber = computed(\n  () =>\n    entry.value?.ref.objectNumber ??\n    (typeof props.page === 'number' ? props.page + 1 : props.page.objectNumber),\n);\nconst pageRef = computed(() => toPageRef(pageObjectNumber.value));\n\n// The sides left out reserve nothing. A new value only when a side changes, so\n// an inline `:page-frame=\"{ bottom: 20 }\"` doesn't rebuild the page context on\n// every render of its parent.\nconst frame = computed((previous?: PageFrame): PageFrame => {\n  const { top = 0, right = 0, bottom = 0, left = 0 } = props.pageFrame ?? {};\n  if (\n    previous &&\n    previous.top === top &&\n    previous.right === right &&\n    previous.bottom === bottom &&\n    previous.left === left\n  ) {\n    return previous;\n  }\n  return { top, right, bottom, left };\n});\n\n/**\n * No camera: the page's transform comes straight from the width\n * (`pageViewTransformInput` from `@embedpdf/web`, the same in every framework).\n */\nconst transform = computed(\n  (): PageTransform =>\n    pageTransform(\n      pageViewTransformInput(\n        entry.value,\n        props.width,\n        typeof window !== 'undefined' ? window.devicePixelRatio || 1 : 1,\n      ),\n    ),\n);\n\n// This page view's own identity: two page views of the same page (a compare\n// strip) plan their pictures apart, as two stage views do.\nconst view = `page-view:${nextViewId()}`;\n\nconst content = ref<HTMLDivElement | null>(null);\n\nconst context = computed(\n  (): PageContextValue =>\n    makePageContext(\n      documentId.value ?? '',\n      view,\n      pageRef.value,\n      pageIndex.value,\n      frame.value,\n      transform.value,\n      () => content.value!.getBoundingClientRect(),\n    ),\n);\nprovidePage(context);\n\n/**\n * No camera, so anchored UI is placed by measuring the page element in client\n * space. The projection answers nothing until the page element exists. A new\n * page context is a state-driven change (the binding's revision); the moves\n * the browser makes on its own (the document scrolls, the window resizes) come\n * through `observeClientGeometry`.\n */\nconst projectorBinding = computed(\n  (): ProjectorBinding => ({\n    projector: clientPageProjector(context.value, () => content.value !== null),\n    revision: context.value,\n    subscribe: observeClientGeometry,\n  }),\n);\n// A page view shows its one page.\nconst shownPages = computed((): ShownPages => new Set([pageObjectNumber.value]));\n\n// The viewer's `page` settings; `--epdf-page-*` CSS variables win over them.\nconst look = useViewerSettings((settings) => settings.page);\n\n/** With the interaction plugin registered, the page view is the page's pointer surface. */\nconst interaction = useOptionalCapability(InteractionHostToken);\n\n/** The outer box (page and frame), the shadow at the page's footprint, and the turned content box. */\nconst boxes = computed(() => {\n  const layout = pageSurfaceLayout(transform.value, frame.value);\n  return {\n    outer: {\n      position: 'relative',\n      width: `${layout.outer.width}px`,\n      height: `${layout.outer.height}px`,\n    },\n    // The drop shadow only: transparent and axis-aligned, so it never peeks\n    // out behind the picture and stays put when the page turns.\n    shadow: {\n      position: 'absolute',\n      ...pixelBox(layout.shadow),\n      boxShadow: paint('page-shadow', look.value.shadow),\n    },\n    // Backing and picture as one box, centred on the footprint and turned about\n    // its centre; rotation 0 carries no transform.\n    content: {\n      position: 'absolute',\n      ...pixelBox(layout.content),\n      background: paint('page-background', look.value.background),\n      transform: layout.turn ?? undefined,\n      // Selection highlights are drawn by the layers: no native text or image selection.\n      userSelect: 'none',\n      WebkitUserSelect: 'none',\n    },\n  } satisfies Record<string, CSSProperties>;\n});\n</script>\n\n<script lang=\"ts\">\nlet viewCount = 0;\n/** A number per page view instance, for its view identity. */\nfunction nextViewId(): number {\n  viewCount += 1;\n  return viewCount;\n}\n</script>\n\n<template>\n  <slot v-if=\"!documentId || !entry\" name=\"fallback\" />\n  <AnchoredScope v-else :binding=\"projectorBinding\" :shown=\"shownPages\">\n    <!-- Your `class` and `style` go on the outer box, and your style wins. -->\n    <div :style=\"boxes.outer\" v-bind=\"$attrs\">\n      <div :style=\"boxes.shadow\" />\n      <div ref=\"content\" :style=\"boxes.content\">\n        <!-- The page's pointer surface, below the layers, like the Stage's own listener: a press\n             on a layer that lets the pointer through reaches the tools, a link keeps its own. -->\n        <PagePointerSource v-if=\"interaction\" />\n        <slot :page=\"context\" />\n      </div>\n      <slot name=\"page-chrome\" :page=\"context\" />\n    </div>\n  </AnchoredScope>\n</template>\n"],"names":["InteractionHostToken","_unref","_renderSlot","_createBlock","AnchoredScope","_createElementVNode","_mergeProps","$attrs","_normalizeStyle","PagePointerSource"],"mappings":"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"}