@embedpdf/plugin-viewport 1.5.0 → 2.0.0-next.1

package/dist/svelte/index.js

@@ -5,25 +5,68 @@ import { ViewportPlugin } from "@embedpdf/plugin-viewport";
 export * from "@embedpdf/plugin-viewport";
 const useViewportPlugin = () => usePlugin(ViewportPlugin.id);
 const useViewportCapability = () => useCapability(ViewportPlugin.id);
-const useViewportScrollActivity = () => {
+const useIsViewportGated = (getDocumentId) => {
   const capability = useViewportCapability();
-  const state = $.proxy({ isScrolling: false, isSmoothScrolling: false });
+  let isGated = $.state(false);
+  const documentId = $.derived(getDocumentId);
   $.user_effect(() => {
-    if (!capability.provides) return;
-    return capability.provides.onScrollActivity((activity) => {
-      state.isScrolling = activity.isScrolling;
-      state.isSmoothScrolling = activity.isSmoothScrolling;
+    const provides = capability.provides;
+    const docId = $.get(documentId);
+    if (!provides || !docId) {
+      $.set(isGated, false);
+      return;
+    }
+    $.set(isGated, provides.isGated(docId), true);
+    return provides.onGateChange((event) => {
+      if (event.documentId === docId) {
+        $.set(isGated, event.isGated, true);
+      }
     });
   });
-  return state;
+  return {
+    get current() {
+      return $.get(isGated);
+    }
+  };
 };
-function useViewportRef() {
+const useViewportScrollActivity = (getDocumentId) => {
+  const capability = useViewportCapability();
+  let scrollActivity = $.state($.proxy({ isScrolling: false, isSmoothScrolling: false }));
+  const documentId = $.derived(getDocumentId);
+  $.user_effect(() => {
+    const provides = capability.provides;
+    const docId = $.get(documentId);
+    if (!provides || !docId) {
+      $.set(scrollActivity, { isScrolling: false, isSmoothScrolling: false }, true);
+      return;
+    }
+    return provides.onScrollActivity((event) => {
+      if (event.documentId === docId) {
+        $.set(scrollActivity, event.activity, true);
+      }
+    });
+  });
+  return {
+    get current() {
+      return $.get(scrollActivity);
+    }
+  };
+};
+function useViewportRef(getDocumentId) {
   const { plugin } = useViewportPlugin();
   let containerRef = $.state(null);
+  const documentId = $.derived(getDocumentId);
   $.user_pre_effect(() => {
     if (!plugin) return;
     const container = $.get(containerRef);
-    if (!container) return;
+    const docId = $.get(documentId);
+    if (!container || !docId) return;
+    try {
+      plugin.registerViewport(docId);
+    } catch (error) {
+      console.error(`Failed to register viewport for document ${docId}:`, error);
+      return;
+    }
     const provideRect = () => {
       const r = container.getBoundingClientRect();
       return {
@@ -31,16 +74,16 @@ function useViewportRef() {
         size: { width: r.width, height: r.height }
       };
     };
-    plugin.registerBoundingRectProvider(provideRect);
+    plugin.registerBoundingRectProvider(docId, provideRect);
     const onScroll = () => {
-      plugin == null ? void 0 : plugin.setViewportScrollMetrics({
+      plugin.setViewportScrollMetrics(docId, {
         scrollTop: container.scrollTop,
         scrollLeft: container.scrollLeft
       });
     };
     container.addEventListener("scroll", onScroll);
     const resizeObserver = new ResizeObserver(() => {
-      plugin == null ? void 0 : plugin.setViewportResizeMetrics({
+      plugin.setViewportResizeMetrics(docId, {
         width: container.offsetWidth,
         height: container.offsetHeight,
         clientWidth: container.clientWidth,
@@ -52,13 +95,14 @@ function useViewportRef() {
       });
     });
     resizeObserver.observe(container);
-    const unsubscribeScrollRequest = plugin.onScrollRequest(({ x, y, behavior = "auto" }) => {
+    const unsubscribeScrollRequest = plugin.onScrollRequest(docId, ({ x, y, behavior = "auto" }) => {
       requestAnimationFrame(() => {
         container.scrollTo({ left: x, top: y, behavior });
       });
     });
     return () => {
-      plugin == null ? void 0 : plugin.registerBoundingRectProvider(null);
+      plugin.unregisterViewport(docId);
+      plugin.registerBoundingRectProvider(docId, null);
       container.removeEventListener("scroll", onScroll);
       resizeObserver.disconnect();
       unsubscribeScrollRequest();
@@ -76,26 +120,46 @@ function useViewportRef() {
 var root = $.from_html(`<div><!></div>`);
 function Viewport($$anchor, $$props) {
   $.push($$props, true);
-  let restProps = $.rest_props($$props, ["$$slots", "$$events", "$$legacy", "children", "class"]);
+  let restProps = $.rest_props($$props, [
+    "$$slots",
+    "$$events",
+    "$$legacy",
+    "documentId",
+    "children",
+    "class"
+  ]);
   let viewportGap = $.state(0);
-  let viewportRef = useViewportRef();
+  const viewportRef = useViewportRef(() => $$props.documentId);
   const viewportCapability = useViewportCapability();
+  const isGated = useIsViewportGated(() => $$props.documentId);
   $.user_effect(() => {
     if (viewportCapability.provides) {
       $.set(viewportGap, viewportCapability.provides.getViewportGap(), true);
     }
   });
   var div = root();
-  $.attribute_effect(div, ($0) => ({ ...restProps, class: $$props.class, [$.STYLE]: $0 }), [
-    () => ({
+  $.attribute_effect(div, () => ({
+    ...restProps,
+    class: $$props.class,
+    [$.STYLE]: {
       width: "100%",
       height: "100%",
       overflow: "auto",
       padding: `${$.get(viewportGap)}px`
-    })
-  ]);
+    }
+  }));
   var node = $.child(div);
-  $.snippet(node, () => $$props.children);
+  {
+    var consequent = ($$anchor2) => {
+      var fragment = $.comment();
+      var node_1 = $.first_child(fragment);
+      $.snippet(node_1, () => $$props.children);
+      $.append($$anchor2, fragment);
+    };
+    $.if(node, ($$render) => {
+      if (!isGated.current) $$render(consequent);
+    });
+  }
   $.reset(div);
   $.bind_this(div, ($$value) => viewportRef.containerRef = $$value, () => viewportRef == null ? void 0 : viewportRef.containerRef);
   $.append($$anchor, div);
@@ -103,6 +167,7 @@ function Viewport($$anchor, $$props) {
 }
 export {
   Viewport,
+  useIsViewportGated,
   useViewportCapability,
   useViewportPlugin,
   useViewportRef,

package/dist/svelte/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/svelte/hooks/use-viewport.svelte.ts","../../src/svelte/hooks/use-viewport-ref.svelte.ts","../../src/svelte/components/Viewport.svelte"],"sourcesContent":["import { useCapability, usePlugin } from '@embedpdf/core/svelte';\nimport { ScrollActivity, ViewportPlugin } from '@embedpdf/plugin-viewport';\n\nexport const useViewportPlugin = () => usePlugin<ViewportPlugin>(ViewportPlugin.id);\nexport const useViewportCapability = () => useCapability<ViewportPlugin>(ViewportPlugin.id);\n\nexport const useViewportScrollActivity = () => {\n  const capability = useViewportCapability();\n\n  const state = $state({\n    isScrolling: false,\n    isSmoothScrolling: false,\n  });\n\n  $effect(() => {\n    if (!capability.provides) return;\n\n    return capability.provides.onScrollActivity((activity: ScrollActivity) => {\n      state.isScrolling = activity.isScrolling;\n      state.isSmoothScrolling = activity.isSmoothScrolling;\n    });\n  });\n\n  return state;\n};\n","import { type Rect } from '@embedpdf/models';\nimport { useViewportPlugin } from './use-viewport.svelte';\n\nexport function useViewportRef() {\n  const { plugin } = useViewportPlugin();\n  let containerRef = $state<HTMLDivElement | null>(null);\n\n  $effect.pre(() => {\n    if (!plugin) return;\n\n    const container = containerRef;\n    if (!container) return;\n\n    /* ---------- live rect provider --------------------------------- */\n    const provideRect = (): Rect => {\n      const r = container.getBoundingClientRect();\n      return {\n        origin: { x: r.left, y: r.top },\n        size: { width: r.width, height: r.height },\n      };\n    };\n    plugin.registerBoundingRectProvider(provideRect);\n\n    // Example: On scroll, call setMetrics\n    const onScroll = () => {\n      plugin?.setViewportScrollMetrics({\n        scrollTop: container.scrollTop,\n        scrollLeft: container.scrollLeft,\n      });\n    };\n    container.addEventListener('scroll', onScroll);\n\n    // Example: On resize, call setMetrics\n    const resizeObserver = new ResizeObserver(() => {\n      plugin?.setViewportResizeMetrics({\n        width: container.offsetWidth,\n        height: container.offsetHeight,\n        clientWidth: container.clientWidth,\n        clientHeight: container.clientHeight,\n        scrollTop: container.scrollTop,\n        scrollLeft: container.scrollLeft,\n        scrollWidth: container.scrollWidth,\n        scrollHeight: container.scrollHeight,\n      });\n    });\n    resizeObserver.observe(container);\n\n    const unsubscribeScrollRequest = plugin.onScrollRequest(({ x, y, behavior = 'auto' }) => {\n      requestAnimationFrame(() => {\n        container.scrollTo({ left: x, top: y, behavior });\n      });\n    });\n\n    // Cleanup\n    return () => {\n      plugin?.registerBoundingRectProvider(null);\n      container.removeEventListener('scroll', onScroll);\n      resizeObserver.disconnect();\n      unsubscribeScrollRequest();\n    };\n  });\n\n  // Return the ref so your Svelte code can attach it to a div\n  return {\n    get containerRef() {\n      return containerRef;\n    },\n    set containerRef(el: HTMLDivElement | null) {\n      containerRef = el;\n    },\n  };\n}\n","<script lang=\"ts\">\n  import { useViewportCapability, useViewportRef } from '../hooks';\n  import type { HTMLAttributes } from 'svelte/elements';\n  import type { Snippet } from 'svelte';\n\n  type ViewportProps = HTMLAttributes<HTMLDivElement> & {\n    children: Snippet;\n    class?: string;\n  };\n\n  let { children, class: propsClass, ...restProps }: ViewportProps = $props();\n\n  let viewportGap = $state(0);\n\n  let viewportRef = useViewportRef();\n\n  const viewportCapability = useViewportCapability();\n\n  $effect(() => {\n    if (viewportCapability.provides) {\n      viewportGap = viewportCapability.provides.getViewportGap();\n    }\n  });\n</script>\n\n<div\n  {...restProps}\n  bind:this={viewportRef.containerRef}\n  style:width=\"100%\"\n  style:height=\"100%\"\n  style:overflow=\"auto\"\n  style:padding={`${viewportGap}px`}\n  class={propsClass}\n>\n  {@render children()}\n</div>\n"],"names":[],"mappings":";;;;;AAGa,MAAA,oBAA0B,MAAA,UAA0B,eAAe,EAAE;AACrE,MAAA,wBAA8B,MAAA,cAA8B,eAAe,EAAE;AAE7E,MAAA,kCAAkC;AACvC,QAAA,aAAa,sBAAsB;AAEnC,QAAA,kBACJ,aAAa,OACb,mBAAmB,OAAA;AAGrB,IAAA,kBAAc;AACP,QAAA,CAAA,WAAW,SAAU;AAEnB,WAAA,WAAW,SAAS,iBAAkB,CAAA,aAA6B;AACxE,YAAM,cAAc,SAAS;AAC7B,YAAM,oBAAoB,SAAS;AAAA,KACpC;AAAA,GACF;SAEM;AACT;ACrBgB,SAAA,iBAAiB;AACvB,QAAA,EAAA,WAAW,kBAAkB;AACjC,MAAA,uBAA6C,IAAI;AAErD,IAAA,sBAAkB;SACX,OAAQ;AAEP,UAAA,kBAAY,YAAA;SACb,UAAW;AAGV,UAAA,oBAA0B;YACxB,IAAI,UAAU,sBAAsB;;QAExC,UAAU,GAAG,EAAE,MAAM,GAAG,EAAE,IAAI;AAAA,QAC9B,QAAQ,OAAO,EAAE,OAAO,QAAQ,EAAE,OAAO;AAAA;IAE7C;AACA,WAAO,6BAA6B,WAAW;AAGzC,UAAA,iBAAiB;AACrB,uCAAQ,yBAAyB;AAAA,QAC/B,WAAW,UAAU;AAAA,QACrB,YAAY,UAAU;AAAA;IAE1B;AACU,cAAA,iBAAiB,UAAU,QAAQ;UAGvC,iBAAA,IAAqB,eAAA,MAAqB;AAC9C,uCAAQ,yBAAyB;AAAA,QAC/B,OAAO,UAAU;AAAA,QACjB,QAAQ,UAAU;AAAA,QAClB,aAAa,UAAU;AAAA,QACvB,cAAc,UAAU;AAAA,QACxB,WAAW,UAAU;AAAA,QACrB,YAAY,UAAU;AAAA,QACtB,aAAa,UAAU;AAAA,QACvB,cAAc,UAAU;AAAA;KAE3B;AACD,mBAAe,QAAQ,SAAS;AAE1B,UAAA,2BAA2B,OAAO,gBAAmB,CAAA,EAAA,GAAG,GAAG,WAAW,aAAa;AACvF,kCAA4B;AAC1B,kBAAU,WAAW,MAAM,GAAG,KAAK,GAAG;OACvC;AAAA,KACF;iBAGY;AACX,uCAAQ,6BAA6B;AAC3B,gBAAA,oBAAoB,UAAU,QAAQ;AAChD,qBAAe,WAAW;AACD,+BAAA;AAAA,IAC3B;AAAA,GACD;;IAIK,IAAA,eAAe;mBACV,YAAA;AAAA,IACT;AAAA,QACI,aAAa,IAA2B;AAC3B,QAAA,IAAA,cAAA,IAAA,IAAA;AAAA;;AAGrB;;qCCvEA;;MAUwC,YAAS,EAAA,WAAA,SAAA,CAAA,WAAA,YAAA,YAAA,YAAA,OAAA,CAAA;AAE3C,MAAA,sBAAqB,CAAC;AAEtB,MAAA,cAAc,eAAc;AAE1B,QAAA,qBAAqB,sBAAqB;AAEhD,IAAA,YAAc,MAAA;QACR,mBAAmB,UAAU;AAC/B,QAAA,IAAA,aAAc,mBAAmB,SAAS,eAAc,GAAA,IAAA;AAAA,IAC1D;AAAA,GACD;;wCAIG,WAAS,OAAA,QAAA,OAAA,CAAA,EAAA,KAAA,GAAA,GAAA,IAAA;AAAA;;;;wBAKK,WAAW,CAAA;AAAA;;;;;AAJlB,IAAA,UAAA,KAAA,CAAA,YAAA,YAAY,eAAZ,SAAA,MAAA,2CAAY,YAAY;;;AAJrC;"}
+{"version":3,"file":"index.js","sources":["../../src/svelte/hooks/use-viewport.svelte.ts","../../src/svelte/hooks/use-viewport-ref.svelte.ts","../../src/svelte/components/Viewport.svelte"],"sourcesContent":["import { useCapability, usePlugin } from '@embedpdf/core/svelte';\nimport { GateChangeEvent, ScrollActivity, ViewportPlugin } from '@embedpdf/plugin-viewport';\n\nexport const useViewportPlugin = () => usePlugin<ViewportPlugin>(ViewportPlugin.id);\nexport const useViewportCapability = () => useCapability<ViewportPlugin>(ViewportPlugin.id);\n\n/**\n * Hook to get the gated state of the viewport for a specific document.\n * The viewport children are not rendered when gated.\n * @param getDocumentId Function that returns the document ID\n */\nexport const useIsViewportGated = (getDocumentId: () => string | null) => {\n  const capability = useViewportCapability();\n\n  let isGated = $state(false);\n\n  // Reactive documentId\n  const documentId = $derived(getDocumentId());\n\n  $effect(() => {\n    const provides = capability.provides;\n    const docId = documentId;\n\n    if (!provides || !docId) {\n      isGated = false;\n      return;\n    }\n\n    // Set initial state\n    isGated = provides.isGated(docId);\n\n    // Subscribe to gate state changes\n    return provides.onGateChange((event: GateChangeEvent) => {\n      if (event.documentId === docId) {\n        isGated = event.isGated;\n      }\n    });\n  });\n\n  return {\n    get current() {\n      return isGated;\n    },\n  };\n};\n\n/**\n * Hook to get scroll activity for a specific document\n * @param getDocumentId Function that returns the document ID\n */\nexport const useViewportScrollActivity = (getDocumentId: () => string | null) => {\n  const capability = useViewportCapability();\n\n  let scrollActivity = $state<ScrollActivity>({\n    isScrolling: false,\n    isSmoothScrolling: false,\n  });\n\n  // Reactive documentId\n  const documentId = $derived(getDocumentId());\n\n  $effect(() => {\n    const provides = capability.provides;\n    const docId = documentId;\n\n    if (!provides || !docId) {\n      scrollActivity = {\n        isScrolling: false,\n        isSmoothScrolling: false,\n      };\n      return;\n    }\n\n    // Subscribe to scroll activity events\n    return provides.onScrollActivity((event) => {\n      // Filter by documentId\n      if (event.documentId === docId) {\n        scrollActivity = event.activity;\n      }\n    });\n  });\n\n  return {\n    get current() {\n      return scrollActivity;\n    },\n  };\n};\n","import { type Rect } from '@embedpdf/models';\nimport { useViewportPlugin } from './use-viewport.svelte';\n\n/**\n * Hook to get a ref for the viewport container element with automatic setup/teardown\n * @param getDocumentId Function that returns the document ID\n */\nexport function useViewportRef(getDocumentId: () => string | null) {\n  const { plugin } = useViewportPlugin();\n\n  let containerRef = $state<HTMLDivElement | null>(null);\n\n  // Reactive documentId\n  const documentId = $derived(getDocumentId());\n\n  $effect.pre(() => {\n    if (!plugin) return;\n\n    const container = containerRef;\n    const docId = documentId;\n    if (!container || !docId) return;\n\n    // Register this viewport for the document\n    try {\n      plugin.registerViewport(docId);\n    } catch (error) {\n      console.error(`Failed to register viewport for document ${docId}:`, error);\n      return;\n    }\n\n    // Provide rect calculator\n    const provideRect = (): Rect => {\n      const r = container.getBoundingClientRect();\n      return {\n        origin: { x: r.left, y: r.top },\n        size: { width: r.width, height: r.height },\n      };\n    };\n    plugin.registerBoundingRectProvider(docId, provideRect);\n\n    // On scroll\n    const onScroll = () => {\n      plugin.setViewportScrollMetrics(docId, {\n        scrollTop: container.scrollTop,\n        scrollLeft: container.scrollLeft,\n      });\n    };\n    container.addEventListener('scroll', onScroll);\n\n    // On resize\n    const resizeObserver = new ResizeObserver(() => {\n      plugin.setViewportResizeMetrics(docId, {\n        width: container.offsetWidth,\n        height: container.offsetHeight,\n        clientWidth: container.clientWidth,\n        clientHeight: container.clientHeight,\n        scrollTop: container.scrollTop,\n        scrollLeft: container.scrollLeft,\n        scrollWidth: container.scrollWidth,\n        scrollHeight: container.scrollHeight,\n      });\n    });\n    resizeObserver.observe(container);\n\n    // Subscribe to scroll requests for this document\n    const unsubscribeScrollRequest = plugin.onScrollRequest(\n      docId,\n      ({ x, y, behavior = 'auto' }) => {\n        requestAnimationFrame(() => {\n          container.scrollTo({ left: x, top: y, behavior });\n        });\n      },\n    );\n\n    // Store cleanup function\n    return () => {\n      plugin.unregisterViewport(docId);\n      plugin.registerBoundingRectProvider(docId, null);\n      container.removeEventListener('scroll', onScroll);\n      resizeObserver.disconnect();\n      unsubscribeScrollRequest();\n    };\n  });\n\n  return {\n    get containerRef() {\n      return containerRef;\n    },\n    set containerRef(el: HTMLDivElement | null) {\n      containerRef = el;\n    },\n  };\n}\n","<script lang=\"ts\">\n  import { useIsViewportGated, useViewportCapability, useViewportRef } from '../hooks';\n  import type { HTMLAttributes } from 'svelte/elements';\n  import type { Snippet } from 'svelte';\n\n  type ViewportProps = HTMLAttributes<HTMLDivElement> & {\n    /**\n     * The ID of the document that this viewport displays\n     */\n    documentId: string;\n    children: Snippet;\n    class?: string;\n  };\n\n  let { documentId, children, class: propsClass, ...restProps }: ViewportProps = $props();\n\n  let viewportGap = $state(0);\n\n  const viewportRef = useViewportRef(() => documentId);\n  const viewportCapability = useViewportCapability();\n  const isGated = useIsViewportGated(() => documentId);\n\n  $effect(() => {\n    if (viewportCapability.provides) {\n      viewportGap = viewportCapability.provides.getViewportGap();\n    }\n  });\n</script>\n\n<div\n  {...restProps}\n  bind:this={viewportRef.containerRef}\n  style:width=\"100%\"\n  style:height=\"100%\"\n  style:overflow=\"auto\"\n  style:padding={`${viewportGap}px`}\n  class={propsClass}\n>\n  {#if !isGated.current}\n    {@render children()}\n  {/if}\n</div>\n"],"names":[],"mappings":"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"}

package/dist/vue/components/viewport.vue.d.ts

@@ -1,9 +1,16 @@
+interface Props {
+    /**
+     * The ID of the document that this viewport displays
+     */
+    documentId: string;
+}
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 };
-declare const __VLS_component: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
-declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+declare const __VLS_base: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {

package/dist/vue/hooks/use-viewport-ref.d.ts

@@ -1 +1,6 @@
-export declare function useViewportRef(): import('vue').Ref<HTMLDivElement | null, HTMLDivElement | null>;
+import { MaybeRefOrGetter } from 'vue';
+/**
+ * Hook to get a ref for the viewport container element with automatic setup/teardown
+ * @param documentId Document ID (can be ref, computed, getter, or plain value).
+ */
+export declare function useViewportRef(documentId: MaybeRefOrGetter<string>): import('vue').Ref<HTMLDivElement | null, HTMLDivElement | null>;

package/dist/vue/hooks/use-viewport.d.ts

@@ -1,7 +1,18 @@
+import { MaybeRefOrGetter } from 'vue';
 import { ScrollActivity, ViewportPlugin } from '../../lib/index.ts';
 export declare const useViewportPlugin: () => import('@embedpdf/core/vue').PluginState<ViewportPlugin>;
 export declare const useViewportCapability: () => import('@embedpdf/core/vue').CapabilityState<Readonly<import('../../lib/index.ts').ViewportCapability>>;
-export declare const useViewportScrollActivity: () => import('vue').Ref<{
+/**
+ * Hook to get the gated state of the viewport for a specific document.
+ * The viewport children are not rendered when gated.
+ * @param documentId Document ID (can be ref, computed, getter, or plain value).
+ */
+export declare const useIsViewportGated: (documentId: MaybeRefOrGetter<string>) => import('vue').Ref<boolean, boolean>;
+/**
+ * Hook to get scroll activity for a specific document
+ * @param documentId Document ID (can be ref, computed, getter, or plain value).
+ */
+export declare const useViewportScrollActivity: (documentId: MaybeRefOrGetter<string>) => import('vue').Ref<{
     isSmoothScrolling: boolean;
     isScrolling: boolean;
 }, ScrollActivity | {

package/dist/vue/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),t=require("@embedpdf/core/vue"),r=require("@embedpdf/plugin-viewport"),o=()=>t.usePlugin(r.ViewportPlugin.id),i=()=>t.useCapability(r.ViewportPlugin.id);function l(){const{plugin:t}=o(),r=e.ref(null),i=()=>{const e=t.value,o=r.value;if(!o||!e)return;let i=!1;e.registerBoundingRectProvider((()=>{const e=o.getBoundingClientRect();return{origin:{x:e.left,y:e.top},size:{width:e.width,height:e.height}}}));const l=()=>{e.setViewportScrollMetrics({scrollTop:o.scrollTop,scrollLeft:o.scrollLeft})};o.addEventListener("scroll",l);const n=new ResizeObserver((()=>{i||e.setViewportResizeMetrics({width:o.offsetWidth,height:o.offsetHeight,clientWidth:o.clientWidth,clientHeight:o.clientHeight,scrollTop:o.scrollTop,scrollLeft:o.scrollLeft,scrollWidth:o.scrollWidth,scrollHeight:o.scrollHeight})}));n.observe(o);const s=e.onScrollRequest((({x:e,y:t,behavior:r="auto"})=>{requestAnimationFrame((()=>{o.scrollTo({left:e,top:t,behavior:r})}))}));return()=>{i=!0,n.disconnect(),e.registerBoundingRectProvider(null),o.removeEventListener("scroll",l),s()}};let l=null;return e.watch(t,(()=>{l&&(l(),l=null),l=i()||null}),{immediate:!0}),e.watch(r,(()=>{l&&(l(),l=null),l=i()||null}),{immediate:!0}),e.onUnmounted((()=>{l&&l()})),r}const n=e.defineComponent({__name:"viewport",setup(t){const r=e.useAttrs(),{provides:o}=i(),n=e.ref(0);e.watch(o,(e=>{e&&(n.value=e.getViewportGap())}),{immediate:!0});const s=l();return(t,o)=>(e.openBlock(),e.createElementBlock("div",e.mergeProps({ref_key:"viewportRef",ref:s},e.unref(r),{style:{padding:`${n.value}px`,width:"100%",height:"100%",overflow:"auto"}}),[e.renderSlot(t.$slots,"default")],16))}});exports.Viewport=n,exports.useViewportCapability=i,exports.useViewportPlugin=o,exports.useViewportRef=l,exports.useViewportScrollActivity=()=>{const{provides:t}=i(),r=e.ref({isSmoothScrolling:!1,isScrolling:!1});return e.watch(t,((e,t,o)=>{if(e){o(e.onScrollActivity((e=>{r.value=e})))}}),{immediate:!0}),r},Object.keys(r).forEach((e=>{"default"===e||Object.prototype.hasOwnProperty.call(exports,e)||Object.defineProperty(exports,e,{enumerable:!0,get:()=>r[e]})}));
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),t=require("@embedpdf/core/vue"),r=require("@embedpdf/plugin-viewport"),o=()=>t.usePlugin(r.ViewportPlugin.id),i=()=>t.useCapability(r.ViewportPlugin.id),l=t=>{const{provides:r}=i(),o=e.ref(!1);return e.watch([r,()=>e.toValue(t)],([e,t],r,i)=>{if(!e)return void(o.value=!1);o.value=e.isGated(t);i(e.onGateChange(e=>{e.documentId===t&&(o.value=e.isGated)}))},{immediate:!0}),o};function n(t){const{plugin:r}=o(),i=e.ref(null);let l=null;return e.watch([r,i,()=>e.toValue(t)],([,,e])=>{l&&(l(),l=null),l=(e=>{const t=r.value,o=i.value;if(!o||!t)return;try{t.registerViewport(e)}catch(s){return void console.error(`Failed to register viewport for document ${e}:`,s)}t.registerBoundingRectProvider(e,()=>{const e=o.getBoundingClientRect();return{origin:{x:e.left,y:e.top},size:{width:e.width,height:e.height}}});const l=()=>{t.setViewportScrollMetrics(e,{scrollTop:o.scrollTop,scrollLeft:o.scrollLeft})};o.addEventListener("scroll",l),new ResizeObserver(()=>{t.setViewportResizeMetrics(e,{width:o.offsetWidth,height:o.offsetHeight,clientWidth:o.clientWidth,clientHeight:o.clientHeight,scrollTop:o.scrollTop,scrollLeft:o.scrollLeft,scrollWidth:o.scrollWidth,scrollHeight:o.scrollHeight})}).observe(o);const n=t.onScrollRequest(e,({x:e,y:t,behavior:r="auto"})=>{requestAnimationFrame(()=>{o.scrollTo({left:e,top:t,behavior:r})})});return()=>{t.unregisterViewport(e),t.registerBoundingRectProvider(e,null),o.removeEventListener("scroll",l),n()}})(e)||null},{immediate:!0}),e.onBeforeUnmount(()=>{l&&(l(),l=null)}),i}const s=e.defineComponent({__name:"viewport",props:{documentId:{}},setup(t){const r=t,o=e.useAttrs(),{provides:s}=i(),c=e.ref(0);e.watch(s,e=>{e&&(c.value=e.getViewportGap())},{immediate:!0});const u=l(()=>r.documentId),d=n(()=>r.documentId);return(t,r)=>(e.openBlock(),e.createElementBlock("div",e.mergeProps({ref_key:"viewportRef",ref:d},e.unref(o),{style:{padding:`${c.value}px`,width:"100%",height:"100%",overflow:"auto"}}),[e.unref(u)?e.createCommentVNode("",!0):e.renderSlot(t.$slots,"default",{key:0})],16))}});exports.Viewport=s,exports.useIsViewportGated=l,exports.useViewportCapability=i,exports.useViewportPlugin=o,exports.useViewportRef=n,exports.useViewportScrollActivity=t=>{const{provides:r}=i(),o=e.ref({isSmoothScrolling:!1,isScrolling:!1});return e.watch([r,()=>e.toValue(t)],([e,t],r,i)=>{if(!e)return void(o.value={isSmoothScrolling:!1,isScrolling:!1});i(e.onScrollActivity(e=>{e.documentId===t&&(o.value=e.activity)}))},{immediate:!0}),o},Object.keys(r).forEach(e=>{"default"===e||Object.prototype.hasOwnProperty.call(exports,e)||Object.defineProperty(exports,e,{enumerable:!0,get:()=>r[e]})});
 //# sourceMappingURL=index.cjs.map

package/dist/vue/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../src/vue/hooks/use-viewport.ts","../../src/vue/hooks/use-viewport-ref.ts","../../src/vue/components/viewport.vue"],"sourcesContent":["import { ref, watch } from 'vue';\nimport { useCapability, usePlugin } from '@embedpdf/core/vue';\nimport { ScrollActivity, ViewportPlugin } from '@embedpdf/plugin-viewport';\n\nexport const useViewportPlugin = () => usePlugin<ViewportPlugin>(ViewportPlugin.id);\nexport const useViewportCapability = () => useCapability<ViewportPlugin>(ViewportPlugin.id);\n\nexport const useViewportScrollActivity = () => {\n  const { provides } = useViewportCapability();\n  const scrollActivity = ref<ScrollActivity>({\n    isSmoothScrolling: false,\n    isScrolling: false,\n  });\n\n  watch(\n    provides,\n    (providesValue, _, onCleanup) => {\n      if (providesValue) {\n        const unsubscribe = providesValue.onScrollActivity((activity) => {\n          scrollActivity.value = activity;\n        });\n        onCleanup(unsubscribe);\n      }\n    },\n    { immediate: true },\n  );\n\n  return scrollActivity;\n};\n","import { Rect } from '@embedpdf/models';\nimport { onMounted, onUnmounted, ref, watch } from 'vue';\n\nimport { useViewportPlugin } from './use-viewport';\n\nexport function useViewportRef() {\n  const { plugin: pluginRef } = useViewportPlugin();\n  const containerRef = ref<HTMLDivElement | null>(null);\n\n  // Setup function that runs when both plugin and container are available\n  const setupViewport = () => {\n    const viewportPlugin = pluginRef.value;\n    const container = containerRef.value;\n\n    if (!container || !viewportPlugin) return;\n\n    let cleanedUp = false;\n    /* ---------- live rect provider --------------------------------- */\n    const provideRect = (): Rect => {\n      const r = container.getBoundingClientRect();\n      return {\n        origin: { x: r.left, y: r.top },\n        size: { width: r.width, height: r.height },\n      };\n    };\n    viewportPlugin.registerBoundingRectProvider(provideRect);\n\n    // Example: On scroll, call setMetrics\n    const onScroll = () => {\n      viewportPlugin.setViewportScrollMetrics({\n        scrollTop: container.scrollTop,\n        scrollLeft: container.scrollLeft,\n      });\n    };\n    container.addEventListener('scroll', onScroll);\n\n    // Example: On resize, call setMetrics\n    const resizeObserver = new ResizeObserver(() => {\n      if (cleanedUp) return;\n      viewportPlugin.setViewportResizeMetrics({\n        width: container.offsetWidth,\n        height: container.offsetHeight,\n        clientWidth: container.clientWidth,\n        clientHeight: container.clientHeight,\n        scrollTop: container.scrollTop,\n        scrollLeft: container.scrollLeft,\n        scrollWidth: container.scrollWidth,\n        scrollHeight: container.scrollHeight,\n      });\n    });\n    resizeObserver.observe(container);\n\n    const unsubscribeScrollRequest = viewportPlugin.onScrollRequest(\n      ({ x, y, behavior = 'auto' }) => {\n        requestAnimationFrame(() => {\n          container.scrollTo({ left: x, top: y, behavior });\n        });\n      },\n    );\n\n    // Return cleanup function\n    return () => {\n      cleanedUp = true;\n      resizeObserver.disconnect();\n      viewportPlugin.registerBoundingRectProvider(null);\n      container.removeEventListener('scroll', onScroll);\n      unsubscribeScrollRequest();\n    };\n  };\n\n  let cleanup: (() => void) | null = null;\n\n  // Watch for changes in the plugin - this is the Vue equivalent of React's dependency array\n  watch(\n    pluginRef,\n    () => {\n      // Clean up previous setup if it exists\n      if (cleanup) {\n        cleanup();\n        cleanup = null;\n      }\n\n      // Setup new viewport if plugin is available\n      cleanup = setupViewport() || null;\n    },\n    { immediate: true }, // Run immediately if plugin is already available\n  );\n\n  // Also watch for container changes (though this is less likely to change)\n  watch(\n    containerRef,\n    () => {\n      // Clean up previous setup if it exists\n      if (cleanup) {\n        cleanup();\n        cleanup = null;\n      }\n\n      // Setup new viewport if both plugin and container are available\n      cleanup = setupViewport() || null;\n    },\n    { immediate: true },\n  );\n\n  onUnmounted(() => {\n    if (cleanup) {\n      cleanup();\n    }\n  });\n\n  // Return the ref so your Vue code can attach it to a div\n  return containerRef;\n}\n","<script setup lang=\"ts\">\nimport { ref, watch, useAttrs } from 'vue';\n\nimport { useViewportCapability, useViewportRef } from '../hooks';\n\n/* -------------------------------------------------- */\n/* props & attrs                                      */\n/* -------------------------------------------------- */\nconst attrs = useAttrs(); // forward class/id/… to <div>\n\n/* -------------------------------------------------- */\n/* plugin + reactive viewport gap                     */\n/* -------------------------------------------------- */\nconst { provides: viewportProvides } = useViewportCapability();\nconst viewportGap = ref(0);\n\nwatch(\n  viewportProvides,\n  (vp) => {\n    if (vp) viewportGap.value = vp.getViewportGap();\n  },\n  { immediate: true },\n);\n\n/* -------------------------------------------------- */\n/* element ref that wires up scroll / resize logic    */\n/* -------------------------------------------------- */\nconst viewportRef = useViewportRef();\n</script>\n\n<template>\n  <div\n    ref=\"viewportRef\"\n    v-bind=\"attrs\"\n    :style=\"{ padding: `${viewportGap}px`, width: '100%', height: '100%', overflow: 'auto' }\"\n  >\n    <slot />\n  </div>\n</template>\n"],"names":["useViewportPlugin","usePlugin","ViewportPlugin","id","useViewportCapability","useCapability","useViewportRef","plugin","pluginRef","containerRef","ref","setupViewport","viewportPlugin","value","container","cleanedUp","registerBoundingRectProvider","r","getBoundingClientRect","origin","x","left","y","top","size","width","height","onScroll","setViewportScrollMetrics","scrollTop","scrollLeft","addEventListener","resizeObserver","ResizeObserver","setViewportResizeMetrics","offsetWidth","offsetHeight","clientWidth","clientHeight","scrollWidth","scrollHeight","observe","unsubscribeScrollRequest","onScrollRequest","behavior","requestAnimationFrame","scrollTo","disconnect","removeEventListener","cleanup","vue$1","watch","immediate","onUnmounted","attrs","useAttrs","provides","viewportProvides","viewportGap","vp","getViewportGap","viewportRef","_openBlock","_createElementBlock","_mergeProps","_unref","style","overflow","_renderSlot","_ctx","$slots","scrollActivity","isSmoothScrolling","isScrolling","providesValue","_","onCleanup","onScrollActivity","activity"],"mappings":"8KAIaA,EAAoB,IAAMC,YAA0BC,EAAAA,eAAeC,IACnEC,EAAwB,IAAMC,gBAA8BH,EAAAA,eAAeC,ICAjF,SAASG,IACd,MAAQC,OAAQC,GAAcR,IACxBS,EAAeC,MAA2B,MAG1CC,EAAgB,KACpB,MAAMC,EAAiBJ,EAAUK,MAC3BC,EAAYL,EAAaI,MAE3B,IAACC,IAAcF,EAAgB,OAEnC,IAAIG,GAAY,EAShBH,EAAeI,8BAPK,KACZ,MAAAC,EAAIH,EAAUI,wBACb,MAAA,CACLC,OAAQ,CAAEC,EAAGH,EAAEI,KAAMC,EAAGL,EAAEM,KAC1BC,KAAM,CAAEC,MAAOR,EAAEQ,MAAOC,OAAQT,EAAES,QACpC,IAKF,MAAMC,EAAW,KACff,EAAegB,yBAAyB,CACtCC,UAAWf,EAAUe,UACrBC,WAAYhB,EAAUgB,YACvB,EAEOhB,EAAAiB,iBAAiB,SAAUJ,GAG/B,MAAAK,EAAiB,IAAIC,gBAAe,KACpClB,GACJH,EAAesB,yBAAyB,CACtCT,MAAOX,EAAUqB,YACjBT,OAAQZ,EAAUsB,aAClBC,YAAavB,EAAUuB,YACvBC,aAAcxB,EAAUwB,aACxBT,UAAWf,EAAUe,UACrBC,WAAYhB,EAAUgB,WACtBS,YAAazB,EAAUyB,YACvBC,aAAc1B,EAAU0B,cACzB,IAEHR,EAAeS,QAAQ3B,GAEvB,MAAM4B,EAA2B9B,EAAe+B,iBAC9C,EAAGvB,IAAGE,IAAGsB,WAAW,WAClBC,uBAAsB,KACpB/B,EAAUgC,SAAS,CAAEzB,KAAMD,EAAGG,IAAKD,EAAGsB,YAAU,GACjD,IAKL,MAAO,KACO7B,GAAA,EACZiB,EAAee,aACfnC,EAAeI,6BAA6B,MAClCF,EAAAkC,oBAAoB,SAAUrB,GACfe,GAAA,CAC3B,EAGF,IAAIO,EAA+B,KAyC5B,OAtCPC,EAAAC,MACE3C,GACA,KAEMyC,IACMA,IACEA,EAAA,MAIZA,EAAUtC,KAAmB,IAAA,GAE/B,CAAEyC,WAAW,IAIfF,EAAAC,MACE1C,GACA,KAEMwC,IACMA,IACEA,EAAA,MAIZA,EAAUtC,KAAmB,IAAA,GAE/B,CAAEyC,WAAW,IAGfC,EAAAA,aAAY,KACNJ,GACMA,GAAA,IAKLxC,CACT,uDCxGM,MAAA6C,EAAQC,EAAAA,YAKNC,SAAUC,GAAqBrD,IACjCsD,EAAchD,MAAI,GAExBwC,EAAAC,MACEM,GACCE,IACKA,IAAID,EAAY7C,MAAQ8C,EAAGC,iBAAe,GAEhD,CAAER,WAAW,IAMf,MAAMS,EAAcvD,kBAIlBwD,cAAAC,qBAMM,MANNC,EAAAA,WAMM,SALA,cAAJtD,IAAImD,GACII,EAAAA,MAAKX,GAAA,CACZY,kBAAqBR,EAAW7C,UAAAY,MAAA,OAAAC,OAAA,OAAAyC,SAAA,WAEjCC,aAAQC,EAAAC,OAAA,8JF7B6B,KACjC,MAAAd,SAAEA,GAAapD,IACfmE,EAAiB7D,EAAAA,IAAoB,CACzC8D,mBAAmB,EACnBC,aAAa,IAgBR,OAbPvB,EAAAC,MACEK,GACA,CAACkB,EAAeC,EAAGC,KACjB,GAAIF,EAAe,CAIjBE,EAHoBF,EAAcG,kBAAkBC,IAClDP,EAAe1D,MAAQiE,CAAA,IAEJ,IAGzB,CAAE1B,WAAW,IAGRmB,CAAA"}
+{"version":3,"file":"index.cjs","sources":["../../src/vue/hooks/use-viewport.ts","../../src/vue/hooks/use-viewport-ref.ts","../../src/vue/components/viewport.vue"],"sourcesContent":["import { ref, watch, toValue, type MaybeRefOrGetter } from 'vue';\nimport { useCapability, usePlugin } from '@embedpdf/core/vue';\nimport { GateChangeEvent, ScrollActivity, ViewportPlugin } from '@embedpdf/plugin-viewport';\n\nexport const useViewportPlugin = () => usePlugin<ViewportPlugin>(ViewportPlugin.id);\nexport const useViewportCapability = () => useCapability<ViewportPlugin>(ViewportPlugin.id);\n\n/**\n * Hook to get the gated state of the viewport for a specific document.\n * The viewport children are not rendered when gated.\n * @param documentId Document ID (can be ref, computed, getter, or plain value).\n */\nexport const useIsViewportGated = (documentId: MaybeRefOrGetter<string>) => {\n  const { provides } = useViewportCapability();\n  const isGated = ref(false);\n\n  watch(\n    [provides, () => toValue(documentId)],\n    ([providesValue, docId], _, onCleanup) => {\n      if (!providesValue) {\n        isGated.value = false;\n        return;\n      }\n\n      // Set initial state\n      isGated.value = providesValue.isGated(docId);\n\n      const unsubscribe = providesValue.onGateChange((event: GateChangeEvent) => {\n        // Filter by documentId\n        if (event.documentId === docId) {\n          isGated.value = event.isGated;\n        }\n      });\n\n      onCleanup(unsubscribe);\n    },\n    { immediate: true },\n  );\n\n  return isGated;\n};\n\n/**\n * Hook to get scroll activity for a specific document\n * @param documentId Document ID (can be ref, computed, getter, or plain value).\n */\nexport const useViewportScrollActivity = (documentId: MaybeRefOrGetter<string>) => {\n  const { provides } = useViewportCapability();\n  const scrollActivity = ref<ScrollActivity>({\n    isSmoothScrolling: false,\n    isScrolling: false,\n  });\n\n  watch(\n    [provides, () => toValue(documentId)],\n    ([providesValue, docId], _, onCleanup) => {\n      if (!providesValue) {\n        scrollActivity.value = {\n          isSmoothScrolling: false,\n          isScrolling: false,\n        };\n        return;\n      }\n\n      const unsubscribe = providesValue.onScrollActivity((event) => {\n        // Filter by documentId\n        if (event.documentId === docId) {\n          scrollActivity.value = event.activity;\n        }\n      });\n\n      onCleanup(unsubscribe);\n    },\n    { immediate: true },\n  );\n\n  return scrollActivity;\n};\n","import { Rect } from '@embedpdf/models';\nimport { onBeforeUnmount, ref, watch, toValue, type MaybeRefOrGetter } from 'vue';\nimport { useViewportPlugin } from './use-viewport';\n\n/**\n * Hook to get a ref for the viewport container element with automatic setup/teardown\n * @param documentId Document ID (can be ref, computed, getter, or plain value).\n */\nexport function useViewportRef(documentId: MaybeRefOrGetter<string>) {\n  const { plugin: pluginRef } = useViewportPlugin();\n  const containerRef = ref<HTMLDivElement | null>(null);\n\n  let cleanup: (() => void) | null = null;\n\n  // Setup function that runs when both plugin and container are available\n  const setupViewport = (docId: string) => {\n    const viewportPlugin = pluginRef.value;\n    const container = containerRef.value;\n\n    if (!container || !viewportPlugin) return;\n\n    // Register this viewport for the document\n    try {\n      viewportPlugin.registerViewport(docId);\n    } catch (error) {\n      console.error(`Failed to register viewport for document ${docId}:`, error);\n      return;\n    }\n\n    // Provide rect calculator\n    const provideRect = (): Rect => {\n      const r = container.getBoundingClientRect();\n      return {\n        origin: { x: r.left, y: r.top },\n        size: { width: r.width, height: r.height },\n      };\n    };\n    viewportPlugin.registerBoundingRectProvider(docId, provideRect);\n\n    // On scroll\n    const onScroll = () => {\n      viewportPlugin.setViewportScrollMetrics(docId, {\n        scrollTop: container.scrollTop,\n        scrollLeft: container.scrollLeft,\n      });\n    };\n    container.addEventListener('scroll', onScroll);\n\n    // On resize\n    const resizeObserver = new ResizeObserver(() => {\n      viewportPlugin.setViewportResizeMetrics(docId, {\n        width: container.offsetWidth,\n        height: container.offsetHeight,\n        clientWidth: container.clientWidth,\n        clientHeight: container.clientHeight,\n        scrollTop: container.scrollTop,\n        scrollLeft: container.scrollLeft,\n        scrollWidth: container.scrollWidth,\n        scrollHeight: container.scrollHeight,\n      });\n    });\n    resizeObserver.observe(container);\n\n    // Subscribe to scroll requests for this document\n    const unsubscribeScrollRequest = viewportPlugin.onScrollRequest(\n      docId,\n      ({ x, y, behavior = 'auto' }) => {\n        requestAnimationFrame(() => {\n          container.scrollTo({ left: x, top: y, behavior });\n        });\n      },\n    );\n\n    // Return cleanup function\n    return () => {\n      viewportPlugin.unregisterViewport(docId);\n      viewportPlugin.registerBoundingRectProvider(docId, null);\n      container.removeEventListener('scroll', onScroll);\n      unsubscribeScrollRequest();\n    };\n  };\n\n  // Watch for changes in plugin, container, or documentId\n  watch(\n    [pluginRef, containerRef, () => toValue(documentId)],\n    ([, , docId]) => {\n      // Clean up previous setup\n      if (cleanup) {\n        cleanup();\n        cleanup = null;\n      }\n\n      // Setup new viewport\n      cleanup = setupViewport(docId) || null;\n    },\n    { immediate: true },\n  );\n\n  onBeforeUnmount(() => {\n    if (cleanup) {\n      cleanup();\n      cleanup = null;\n    }\n  });\n\n  return containerRef;\n}\n","<script setup lang=\"ts\">\nimport { ref, watch, useAttrs } from 'vue';\nimport { useIsViewportGated, useViewportCapability, useViewportRef } from '../hooks';\n\n/* -------------------------------------------------- */\n/* props & attrs                                      */\n/* -------------------------------------------------- */\ninterface Props {\n  /**\n   * The ID of the document that this viewport displays\n   */\n  documentId: string;\n}\n\nconst props = defineProps<Props>();\nconst attrs = useAttrs();\n\n/* -------------------------------------------------- */\n/* plugin + reactive viewport gap                     */\n/* -------------------------------------------------- */\nconst { provides: viewportProvides } = useViewportCapability();\nconst viewportGap = ref(0);\n\nwatch(\n  viewportProvides,\n  (vp) => {\n    if (vp) viewportGap.value = vp.getViewportGap();\n  },\n  { immediate: true },\n);\n\n/* -------------------------------------------------- */\n/* Gating logic                                    */\n/* -------------------------------------------------- */\nconst isGated = useIsViewportGated(() => props.documentId);\n\n/* -------------------------------------------------- */\n/* element ref that wires up scroll / resize logic    */\n/* -------------------------------------------------- */\nconst viewportRef = useViewportRef(() => props.documentId);\n</script>\n\n<template>\n  <div\n    ref=\"viewportRef\"\n    v-bind=\"attrs\"\n    :style=\"{ padding: `${viewportGap}px`, width: '100%', height: '100%', overflow: 'auto' }\"\n  >\n    <slot v-if=\"!isGated\" />\n  </div>\n</template>\n"],"names":["useViewportPlugin","usePlugin","ViewportPlugin","id","useViewportCapability","useCapability","useIsViewportGated","documentId","provides","isGated","ref","watch","toValue","providesValue","docId","_","onCleanup","value","onGateChange","event","immediate","useViewportRef","plugin","pluginRef","containerRef","cleanup","viewportPlugin","container","registerViewport","error","console","registerBoundingRectProvider","r","getBoundingClientRect","origin","x","left","y","top","size","width","height","onScroll","setViewportScrollMetrics","scrollTop","scrollLeft","addEventListener","ResizeObserver","setViewportResizeMetrics","offsetWidth","offsetHeight","clientWidth","clientHeight","scrollWidth","scrollHeight","observe","unsubscribeScrollRequest","onScrollRequest","behavior","requestAnimationFrame","scrollTo","unregisterViewport","removeEventListener","setupViewport","onBeforeUnmount","props","__props","attrs","useAttrs","viewportProvides","viewportGap","vp","getViewportGap","viewportRef","_openBlock","_createElementBlock","_mergeProps","_unref","style","overflow","_renderSlot","_ctx","$slots","key","scrollActivity","isSmoothScrolling","isScrolling","onScrollActivity","activity"],"mappings":"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"}

package/dist/vue/index.js

@@ -1,37 +1,72 @@
-import { ref, watch, onUnmounted, defineComponent, useAttrs, createElementBlock, openBlock, mergeProps, unref, renderSlot } from "vue";
+import { ref, watch, toValue, onBeforeUnmount, defineComponent, useAttrs, createElementBlock, openBlock, mergeProps, unref, renderSlot, createCommentVNode } from "vue";
 import { useCapability, usePlugin } from "@embedpdf/core/vue";
 import { ViewportPlugin } from "@embedpdf/plugin-viewport";
 export * from "@embedpdf/plugin-viewport";
 const useViewportPlugin = () => usePlugin(ViewportPlugin.id);
 const useViewportCapability = () => useCapability(ViewportPlugin.id);
-const useViewportScrollActivity = () => {
+const useIsViewportGated = (documentId) => {
+  const { provides } = useViewportCapability();
+  const isGated = ref(false);
+  watch(
+    [provides, () => toValue(documentId)],
+    ([providesValue, docId], _, onCleanup) => {
+      if (!providesValue) {
+        isGated.value = false;
+        return;
+      }
+      isGated.value = providesValue.isGated(docId);
+      const unsubscribe = providesValue.onGateChange((event) => {
+        if (event.documentId === docId) {
+          isGated.value = event.isGated;
+        }
+      });
+      onCleanup(unsubscribe);
+    },
+    { immediate: true }
+  );
+  return isGated;
+};
+const useViewportScrollActivity = (documentId) => {
   const { provides } = useViewportCapability();
   const scrollActivity = ref({
     isSmoothScrolling: false,
     isScrolling: false
   });
   watch(
-    provides,
-    (providesValue, _, onCleanup) => {
-      if (providesValue) {
-        const unsubscribe = providesValue.onScrollActivity((activity) => {
-          scrollActivity.value = activity;
-        });
-        onCleanup(unsubscribe);
+    [provides, () => toValue(documentId)],
+    ([providesValue, docId], _, onCleanup) => {
+      if (!providesValue) {
+        scrollActivity.value = {
+          isSmoothScrolling: false,
+          isScrolling: false
+        };
+        return;
       }
+      const unsubscribe = providesValue.onScrollActivity((event) => {
+        if (event.documentId === docId) {
+          scrollActivity.value = event.activity;
+        }
+      });
+      onCleanup(unsubscribe);
     },
     { immediate: true }
   );
   return scrollActivity;
 };
-function useViewportRef() {
+function useViewportRef(documentId) {
   const { plugin: pluginRef } = useViewportPlugin();
   const containerRef = ref(null);
-  const setupViewport = () => {
+  let cleanup = null;
+  const setupViewport = (docId) => {
     const viewportPlugin = pluginRef.value;
     const container = containerRef.value;
     if (!container || !viewportPlugin) return;
-    let cleanedUp = false;
+    try {
+      viewportPlugin.registerViewport(docId);
+    } catch (error) {
+      console.error(`Failed to register viewport for document ${docId}:`, error);
+      return;
+    }
     const provideRect = () => {
       const r = container.getBoundingClientRect();
       return {
@@ -39,17 +74,16 @@ function useViewportRef() {
         size: { width: r.width, height: r.height }
       };
     };
-    viewportPlugin.registerBoundingRectProvider(provideRect);
+    viewportPlugin.registerBoundingRectProvider(docId, provideRect);
     const onScroll = () => {
-      viewportPlugin.setViewportScrollMetrics({
+      viewportPlugin.setViewportScrollMetrics(docId, {
         scrollTop: container.scrollTop,
         scrollLeft: container.scrollLeft
       });
     };
     container.addEventListener("scroll", onScroll);
     const resizeObserver = new ResizeObserver(() => {
-      if (cleanedUp) return;
-      viewportPlugin.setViewportResizeMetrics({
+      viewportPlugin.setViewportResizeMetrics(docId, {
         width: container.offsetWidth,
         height: container.offsetHeight,
         clientWidth: container.clientWidth,
@@ -62,6 +96,7 @@ function useViewportRef() {
     });
     resizeObserver.observe(container);
     const unsubscribeScrollRequest = viewportPlugin.onScrollRequest(
+      docId,
       ({ x, y, behavior = "auto" }) => {
         requestAnimationFrame(() => {
           container.scrollTo({ left: x, top: y, behavior });
@@ -69,47 +104,38 @@ function useViewportRef() {
       }
     );
     return () => {
-      cleanedUp = true;
-      resizeObserver.disconnect();
-      viewportPlugin.registerBoundingRectProvider(null);
+      viewportPlugin.unregisterViewport(docId);
+      viewportPlugin.registerBoundingRectProvider(docId, null);
       container.removeEventListener("scroll", onScroll);
       unsubscribeScrollRequest();
     };
   };
-  let cleanup = null;
-  watch(
-    pluginRef,
-    () => {
-      if (cleanup) {
-        cleanup();
-        cleanup = null;
-      }
-      cleanup = setupViewport() || null;
-    },
-    { immediate: true }
-    // Run immediately if plugin is already available
-  );
   watch(
-    containerRef,
-    () => {
+    [pluginRef, containerRef, () => toValue(documentId)],
+    ([, , docId]) => {
       if (cleanup) {
         cleanup();
         cleanup = null;
       }
-      cleanup = setupViewport() || null;
+      cleanup = setupViewport(docId) || null;
     },
     { immediate: true }
   );
-  onUnmounted(() => {
+  onBeforeUnmount(() => {
     if (cleanup) {
       cleanup();
+      cleanup = null;
     }
   });
   return containerRef;
 }
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "viewport",
+  props: {
+    documentId: {}
+  },
   setup(__props) {
+    const props = __props;
     const attrs = useAttrs();
     const { provides: viewportProvides } = useViewportCapability();
     const viewportGap = ref(0);
@@ -120,7 +146,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       },
       { immediate: true }
     );
-    const viewportRef = useViewportRef();
+    const isGated = useIsViewportGated(() => props.documentId);
+    const viewportRef = useViewportRef(() => props.documentId);
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", mergeProps({
         ref_key: "viewportRef",
@@ -128,13 +155,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }, unref(attrs), {
         style: { padding: `${viewportGap.value}px`, width: "100%", height: "100%", overflow: "auto" }
       }), [
-        renderSlot(_ctx.$slots, "default")
+        !unref(isGated) ? renderSlot(_ctx.$slots, "default", { key: 0 }) : createCommentVNode("", true)
       ], 16);
     };
   }
 });
 export {
   _sfc_main as Viewport,
+  useIsViewportGated,
   useViewportCapability,
   useViewportPlugin,
   useViewportRef,

package/dist/vue/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/vue/hooks/use-viewport.ts","../../src/vue/hooks/use-viewport-ref.ts","../../src/vue/components/viewport.vue"],"sourcesContent":["import { ref, watch } from 'vue';\nimport { useCapability, usePlugin } from '@embedpdf/core/vue';\nimport { ScrollActivity, ViewportPlugin } from '@embedpdf/plugin-viewport';\n\nexport const useViewportPlugin = () => usePlugin<ViewportPlugin>(ViewportPlugin.id);\nexport const useViewportCapability = () => useCapability<ViewportPlugin>(ViewportPlugin.id);\n\nexport const useViewportScrollActivity = () => {\n  const { provides } = useViewportCapability();\n  const scrollActivity = ref<ScrollActivity>({\n    isSmoothScrolling: false,\n    isScrolling: false,\n  });\n\n  watch(\n    provides,\n    (providesValue, _, onCleanup) => {\n      if (providesValue) {\n        const unsubscribe = providesValue.onScrollActivity((activity) => {\n          scrollActivity.value = activity;\n        });\n        onCleanup(unsubscribe);\n      }\n    },\n    { immediate: true },\n  );\n\n  return scrollActivity;\n};\n","import { Rect } from '@embedpdf/models';\nimport { onMounted, onUnmounted, ref, watch } from 'vue';\n\nimport { useViewportPlugin } from './use-viewport';\n\nexport function useViewportRef() {\n  const { plugin: pluginRef } = useViewportPlugin();\n  const containerRef = ref<HTMLDivElement | null>(null);\n\n  // Setup function that runs when both plugin and container are available\n  const setupViewport = () => {\n    const viewportPlugin = pluginRef.value;\n    const container = containerRef.value;\n\n    if (!container || !viewportPlugin) return;\n\n    let cleanedUp = false;\n    /* ---------- live rect provider --------------------------------- */\n    const provideRect = (): Rect => {\n      const r = container.getBoundingClientRect();\n      return {\n        origin: { x: r.left, y: r.top },\n        size: { width: r.width, height: r.height },\n      };\n    };\n    viewportPlugin.registerBoundingRectProvider(provideRect);\n\n    // Example: On scroll, call setMetrics\n    const onScroll = () => {\n      viewportPlugin.setViewportScrollMetrics({\n        scrollTop: container.scrollTop,\n        scrollLeft: container.scrollLeft,\n      });\n    };\n    container.addEventListener('scroll', onScroll);\n\n    // Example: On resize, call setMetrics\n    const resizeObserver = new ResizeObserver(() => {\n      if (cleanedUp) return;\n      viewportPlugin.setViewportResizeMetrics({\n        width: container.offsetWidth,\n        height: container.offsetHeight,\n        clientWidth: container.clientWidth,\n        clientHeight: container.clientHeight,\n        scrollTop: container.scrollTop,\n        scrollLeft: container.scrollLeft,\n        scrollWidth: container.scrollWidth,\n        scrollHeight: container.scrollHeight,\n      });\n    });\n    resizeObserver.observe(container);\n\n    const unsubscribeScrollRequest = viewportPlugin.onScrollRequest(\n      ({ x, y, behavior = 'auto' }) => {\n        requestAnimationFrame(() => {\n          container.scrollTo({ left: x, top: y, behavior });\n        });\n      },\n    );\n\n    // Return cleanup function\n    return () => {\n      cleanedUp = true;\n      resizeObserver.disconnect();\n      viewportPlugin.registerBoundingRectProvider(null);\n      container.removeEventListener('scroll', onScroll);\n      unsubscribeScrollRequest();\n    };\n  };\n\n  let cleanup: (() => void) | null = null;\n\n  // Watch for changes in the plugin - this is the Vue equivalent of React's dependency array\n  watch(\n    pluginRef,\n    () => {\n      // Clean up previous setup if it exists\n      if (cleanup) {\n        cleanup();\n        cleanup = null;\n      }\n\n      // Setup new viewport if plugin is available\n      cleanup = setupViewport() || null;\n    },\n    { immediate: true }, // Run immediately if plugin is already available\n  );\n\n  // Also watch for container changes (though this is less likely to change)\n  watch(\n    containerRef,\n    () => {\n      // Clean up previous setup if it exists\n      if (cleanup) {\n        cleanup();\n        cleanup = null;\n      }\n\n      // Setup new viewport if both plugin and container are available\n      cleanup = setupViewport() || null;\n    },\n    { immediate: true },\n  );\n\n  onUnmounted(() => {\n    if (cleanup) {\n      cleanup();\n    }\n  });\n\n  // Return the ref so your Vue code can attach it to a div\n  return containerRef;\n}\n","<script setup lang=\"ts\">\nimport { ref, watch, useAttrs } from 'vue';\n\nimport { useViewportCapability, useViewportRef } from '../hooks';\n\n/* -------------------------------------------------- */\n/* props & attrs                                      */\n/* -------------------------------------------------- */\nconst attrs = useAttrs(); // forward class/id/… to <div>\n\n/* -------------------------------------------------- */\n/* plugin + reactive viewport gap                     */\n/* -------------------------------------------------- */\nconst { provides: viewportProvides } = useViewportCapability();\nconst viewportGap = ref(0);\n\nwatch(\n  viewportProvides,\n  (vp) => {\n    if (vp) viewportGap.value = vp.getViewportGap();\n  },\n  { immediate: true },\n);\n\n/* -------------------------------------------------- */\n/* element ref that wires up scroll / resize logic    */\n/* -------------------------------------------------- */\nconst viewportRef = useViewportRef();\n</script>\n\n<template>\n  <div\n    ref=\"viewportRef\"\n    v-bind=\"attrs\"\n    :style=\"{ padding: `${viewportGap}px`, width: '100%', height: '100%', overflow: 'auto' }\"\n  >\n    <slot />\n  </div>\n</template>\n"],"names":["_openBlock","_createElementBlock","_mergeProps","_unref","_renderSlot"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../src/vue/hooks/use-viewport.ts","../../src/vue/hooks/use-viewport-ref.ts","../../src/vue/components/viewport.vue"],"sourcesContent":["import { ref, watch, toValue, type MaybeRefOrGetter } from 'vue';\nimport { useCapability, usePlugin } from '@embedpdf/core/vue';\nimport { GateChangeEvent, ScrollActivity, ViewportPlugin } from '@embedpdf/plugin-viewport';\n\nexport const useViewportPlugin = () => usePlugin<ViewportPlugin>(ViewportPlugin.id);\nexport const useViewportCapability = () => useCapability<ViewportPlugin>(ViewportPlugin.id);\n\n/**\n * Hook to get the gated state of the viewport for a specific document.\n * The viewport children are not rendered when gated.\n * @param documentId Document ID (can be ref, computed, getter, or plain value).\n */\nexport const useIsViewportGated = (documentId: MaybeRefOrGetter<string>) => {\n  const { provides } = useViewportCapability();\n  const isGated = ref(false);\n\n  watch(\n    [provides, () => toValue(documentId)],\n    ([providesValue, docId], _, onCleanup) => {\n      if (!providesValue) {\n        isGated.value = false;\n        return;\n      }\n\n      // Set initial state\n      isGated.value = providesValue.isGated(docId);\n\n      const unsubscribe = providesValue.onGateChange((event: GateChangeEvent) => {\n        // Filter by documentId\n        if (event.documentId === docId) {\n          isGated.value = event.isGated;\n        }\n      });\n\n      onCleanup(unsubscribe);\n    },\n    { immediate: true },\n  );\n\n  return isGated;\n};\n\n/**\n * Hook to get scroll activity for a specific document\n * @param documentId Document ID (can be ref, computed, getter, or plain value).\n */\nexport const useViewportScrollActivity = (documentId: MaybeRefOrGetter<string>) => {\n  const { provides } = useViewportCapability();\n  const scrollActivity = ref<ScrollActivity>({\n    isSmoothScrolling: false,\n    isScrolling: false,\n  });\n\n  watch(\n    [provides, () => toValue(documentId)],\n    ([providesValue, docId], _, onCleanup) => {\n      if (!providesValue) {\n        scrollActivity.value = {\n          isSmoothScrolling: false,\n          isScrolling: false,\n        };\n        return;\n      }\n\n      const unsubscribe = providesValue.onScrollActivity((event) => {\n        // Filter by documentId\n        if (event.documentId === docId) {\n          scrollActivity.value = event.activity;\n        }\n      });\n\n      onCleanup(unsubscribe);\n    },\n    { immediate: true },\n  );\n\n  return scrollActivity;\n};\n","import { Rect } from '@embedpdf/models';\nimport { onBeforeUnmount, ref, watch, toValue, type MaybeRefOrGetter } from 'vue';\nimport { useViewportPlugin } from './use-viewport';\n\n/**\n * Hook to get a ref for the viewport container element with automatic setup/teardown\n * @param documentId Document ID (can be ref, computed, getter, or plain value).\n */\nexport function useViewportRef(documentId: MaybeRefOrGetter<string>) {\n  const { plugin: pluginRef } = useViewportPlugin();\n  const containerRef = ref<HTMLDivElement | null>(null);\n\n  let cleanup: (() => void) | null = null;\n\n  // Setup function that runs when both plugin and container are available\n  const setupViewport = (docId: string) => {\n    const viewportPlugin = pluginRef.value;\n    const container = containerRef.value;\n\n    if (!container || !viewportPlugin) return;\n\n    // Register this viewport for the document\n    try {\n      viewportPlugin.registerViewport(docId);\n    } catch (error) {\n      console.error(`Failed to register viewport for document ${docId}:`, error);\n      return;\n    }\n\n    // Provide rect calculator\n    const provideRect = (): Rect => {\n      const r = container.getBoundingClientRect();\n      return {\n        origin: { x: r.left, y: r.top },\n        size: { width: r.width, height: r.height },\n      };\n    };\n    viewportPlugin.registerBoundingRectProvider(docId, provideRect);\n\n    // On scroll\n    const onScroll = () => {\n      viewportPlugin.setViewportScrollMetrics(docId, {\n        scrollTop: container.scrollTop,\n        scrollLeft: container.scrollLeft,\n      });\n    };\n    container.addEventListener('scroll', onScroll);\n\n    // On resize\n    const resizeObserver = new ResizeObserver(() => {\n      viewportPlugin.setViewportResizeMetrics(docId, {\n        width: container.offsetWidth,\n        height: container.offsetHeight,\n        clientWidth: container.clientWidth,\n        clientHeight: container.clientHeight,\n        scrollTop: container.scrollTop,\n        scrollLeft: container.scrollLeft,\n        scrollWidth: container.scrollWidth,\n        scrollHeight: container.scrollHeight,\n      });\n    });\n    resizeObserver.observe(container);\n\n    // Subscribe to scroll requests for this document\n    const unsubscribeScrollRequest = viewportPlugin.onScrollRequest(\n      docId,\n      ({ x, y, behavior = 'auto' }) => {\n        requestAnimationFrame(() => {\n          container.scrollTo({ left: x, top: y, behavior });\n        });\n      },\n    );\n\n    // Return cleanup function\n    return () => {\n      viewportPlugin.unregisterViewport(docId);\n      viewportPlugin.registerBoundingRectProvider(docId, null);\n      container.removeEventListener('scroll', onScroll);\n      unsubscribeScrollRequest();\n    };\n  };\n\n  // Watch for changes in plugin, container, or documentId\n  watch(\n    [pluginRef, containerRef, () => toValue(documentId)],\n    ([, , docId]) => {\n      // Clean up previous setup\n      if (cleanup) {\n        cleanup();\n        cleanup = null;\n      }\n\n      // Setup new viewport\n      cleanup = setupViewport(docId) || null;\n    },\n    { immediate: true },\n  );\n\n  onBeforeUnmount(() => {\n    if (cleanup) {\n      cleanup();\n      cleanup = null;\n    }\n  });\n\n  return containerRef;\n}\n","<script setup lang=\"ts\">\nimport { ref, watch, useAttrs } from 'vue';\nimport { useIsViewportGated, useViewportCapability, useViewportRef } from '../hooks';\n\n/* -------------------------------------------------- */\n/* props & attrs                                      */\n/* -------------------------------------------------- */\ninterface Props {\n  /**\n   * The ID of the document that this viewport displays\n   */\n  documentId: string;\n}\n\nconst props = defineProps<Props>();\nconst attrs = useAttrs();\n\n/* -------------------------------------------------- */\n/* plugin + reactive viewport gap                     */\n/* -------------------------------------------------- */\nconst { provides: viewportProvides } = useViewportCapability();\nconst viewportGap = ref(0);\n\nwatch(\n  viewportProvides,\n  (vp) => {\n    if (vp) viewportGap.value = vp.getViewportGap();\n  },\n  { immediate: true },\n);\n\n/* -------------------------------------------------- */\n/* Gating logic                                    */\n/* -------------------------------------------------- */\nconst isGated = useIsViewportGated(() => props.documentId);\n\n/* -------------------------------------------------- */\n/* element ref that wires up scroll / resize logic    */\n/* -------------------------------------------------- */\nconst viewportRef = useViewportRef(() => props.documentId);\n</script>\n\n<template>\n  <div\n    ref=\"viewportRef\"\n    v-bind=\"attrs\"\n    :style=\"{ padding: `${viewportGap}px`, width: '100%', height: '100%', overflow: 'auto' }\"\n  >\n    <slot v-if=\"!isGated\" />\n  </div>\n</template>\n"],"names":["_openBlock","_createElementBlock","_mergeProps","_unref","_renderSlot"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@embedpdf/plugin-viewport",
-  "version": "1.5.0",
+  "version": "2.0.0-next.1",
   "type": "module",
   "license": "MIT",
   "main": "./dist/index.cjs",
@@ -35,13 +35,13 @@
     }
   },
   "dependencies": {
-    "@embedpdf/models": "1.5.0"
+    "@embedpdf/models": "2.0.0-next.1"
   },
   "devDependencies": {
     "@types/react": "^18.2.0",
     "typescript": "^5.0.0",
-    "@embedpdf/build": "1.1.0",
-    "@embedpdf/core": "1.5.0"
+    "@embedpdf/core": "2.0.0-next.1",
+    "@embedpdf/build": "1.1.0"
   },
   "peerDependencies": {
     "react": ">=16.8.0",
@@ -49,7 +49,7 @@
     "preact": "^10.26.4",
     "vue": ">=3.2.0",
     "svelte": ">=5 <6",
-    "@embedpdf/core": "1.5.0"
+    "@embedpdf/core": "2.0.0-next.1"
   },
   "files": [
     "dist",