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

package/dist/vue/index.js

@@ -1,166 +1,166 @@
-import { ref, watchEffect, computed, defineComponent, useAttrs, onMounted, createElementBlock, createCommentVNode, unref, openBlock, mergeProps, createElementVNode, normalizeStyle, Fragment, renderList, renderSlot, createBlock, resolveDynamicComponent } from "vue";
-import { usePlugin, useCapability, useRegistry } from "@embedpdf/core/vue";
+import { ref, watch, toValue, computed, defineComponent, createElementBlock, createCommentVNode, openBlock, mergeProps, unref, createElementVNode, normalizeStyle, Fragment, renderList, renderSlot } from "vue";
+import { usePlugin, useCapability } from "@embedpdf/core/vue";
 import { ScrollPlugin, ScrollStrategy } from "@embedpdf/plugin-scroll";
 export * from "@embedpdf/plugin-scroll";
 const useScrollPlugin = () => usePlugin(ScrollPlugin.id);
 const useScrollCapability = () => useCapability(ScrollPlugin.id);
-function useScroll() {
+function useScroll(documentId) {
   const { provides } = useScrollCapability();
   const currentPage = ref(1);
   const totalPages = ref(1);
-  watchEffect((onCleanup) => {
-    if (!provides.value) return;
-    const unsubscribe = provides.value.onPageChange(({ pageNumber, totalPages: tp }) => {
-      currentPage.value = pageNumber;
-      totalPages.value = tp;
-    });
-    onCleanup(unsubscribe);
-  });
+  watch(
+    [provides, () => toValue(documentId)],
+    ([providesValue, docId], _, onCleanup) => {
+      if (!providesValue || !docId) {
+        currentPage.value = 1;
+        totalPages.value = 1;
+        return;
+      }
+      const scope = providesValue.forDocument(docId);
+      currentPage.value = scope.getCurrentPage();
+      totalPages.value = scope.getTotalPages();
+      const unsubscribe = providesValue.onPageChange((event) => {
+        if (event.documentId === docId) {
+          currentPage.value = event.pageNumber;
+          totalPages.value = event.totalPages;
+        }
+      });
+      onCleanup(unsubscribe);
+    },
+    { immediate: true }
+  );
   const state = computed(() => ({
     currentPage: currentPage.value,
     totalPages: totalPages.value
   }));
-  const deprecatedCurrentPage = computed({
-    get() {
-      console.warn(
-        `Accessing 'currentPage' directly on useScroll() is deprecated. Use useScroll().state.currentPage instead.`
-      );
-      return currentPage.value;
-    },
-    set(value) {
-      currentPage.value = value;
-    }
-  });
-  const deprecatedTotalPages = computed({
-    get() {
-      console.warn(
-        `Accessing 'totalPages' directly on useScroll() is deprecated. Use useScroll().state.totalPages instead.`
-      );
-      return totalPages.value;
-    },
-    set(value) {
-      totalPages.value = value;
-    }
-  });
-  const deprecatedScroll = computed(() => {
-    if (provides.value) {
-      console.warn(
-        `Accessing 'scroll' directly on useScroll() is deprecated. Use useScroll().provides instead.`
-      );
-    }
-    return provides.value;
+  const scopedProvides = computed(() => {
+    var _a;
+    const docId = toValue(documentId);
+    return ((_a = provides.value) == null ? void 0 : _a.forDocument(docId)) ?? null;
   });
   return {
-    // New format (preferred)
-    provides,
-    state,
-    // Deprecated properties (for backward compatibility)
-    currentPage: deprecatedCurrentPage,
-    totalPages: deprecatedTotalPages,
-    scroll: deprecatedScroll
+    provides: scopedProvides,
+    state
   };
 }
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "scroller",
   props: {
-    style: { type: [Boolean, null, String, Object, Array] },
-    overlayElements: { default: () => [] }
+    documentId: {}
   },
   setup(__props) {
     const props = __props;
-    const attrs = useAttrs();
     const { plugin: scrollPlugin } = useScrollPlugin();
-    const { registry } = useRegistry();
-    const layout = ref(null);
-    watchEffect((onCleanup) => {
-      if (!scrollPlugin.value) return;
-      layout.value = scrollPlugin.value.getScrollerLayout();
-      const off = scrollPlugin.value.onScrollerData((l) => layout.value = l);
-      onCleanup(off);
-    });
-    onMounted(() => {
-      var _a;
-      (_a = scrollPlugin.value) == null ? void 0 : _a.setLayoutReady();
+    const layoutData = ref({ layout: null, docId: null });
+    watch(
+      [scrollPlugin, () => props.documentId],
+      ([plugin, docId], _, onCleanup) => {
+        if (!plugin || !docId) {
+          layoutData.value = { layout: null, docId: null };
+          return;
+        }
+        const unsubscribe = plugin.onScrollerData(docId, (newLayout) => {
+          layoutData.value = { layout: newLayout, docId };
+        });
+        onCleanup(() => {
+          unsubscribe();
+          layoutData.value = { layout: null, docId: null };
+          plugin.clearLayoutReady(docId);
+        });
+      },
+      {
+        immediate: true
+      }
+    );
+    const scrollerLayout = computed(() => {
+      return layoutData.value.docId === props.documentId ? layoutData.value.layout : null;
     });
-    function pageSlotProps(pl) {
-      const core = registry.value.getStore().getState().core;
-      return {
-        ...pl,
-        rotation: core.rotation,
-        scale: core.scale,
-        document: core.document
-      };
-    }
-    const rootStyle = computed(() => {
-      if (!layout.value) return props.style;
-      const base = typeof props.style === "object" && !Array.isArray(props.style) ? { ...props.style } : props.style ?? {};
-      return [
-        base,
-        {
-          width: `${layout.value.totalWidth}px`,
-          height: `${layout.value.totalHeight}px`,
+    watch(
+      [scrollPlugin, () => props.documentId, scrollerLayout],
+      ([plugin, docId, layout]) => {
+        if (!plugin || !docId || !layout) return;
+        plugin.setLayoutReady(docId);
+      },
+      { immediate: true }
+    );
+    return (_ctx, _cache) => {
+      return scrollerLayout.value ? (openBlock(), createElementBlock("div", mergeProps({
+        key: 0,
+        style: {
+          width: `${scrollerLayout.value.totalWidth}px`,
+          height: `${scrollerLayout.value.totalHeight}px`,
           position: "relative",
           boxSizing: "border-box",
           margin: "0 auto",
-          ...layout.value.strategy === ScrollStrategy.Horizontal && {
+          ...scrollerLayout.value.strategy === unref(ScrollStrategy).Horizontal && {
             display: "flex",
             flexDirection: "row"
           }
         }
-      ];
-    });
-    return (_ctx, _cache) => {
-      return layout.value && unref(registry) ? (openBlock(), createElementBlock("div", mergeProps({
-        key: 0,
-        style: rootStyle.value
-      }, unref(attrs)), [
-        layout.value.strategy === "horizontal" ? (openBlock(), createElementBlock("div", {
-          key: 0,
-          style: normalizeStyle({ width: layout.value.startSpacing + "px", height: "100%", flexShrink: 0 })
-        }, null, 4)) : (openBlock(), createElementBlock("div", {
-          key: 1,
-          style: normalizeStyle({ height: layout.value.startSpacing + "px", width: "100%" })
-        }, null, 4)),
+      }, _ctx.$attrs), [
+        createElementVNode("div", {
+          style: normalizeStyle(
+            scrollerLayout.value.strategy === unref(ScrollStrategy).Horizontal ? {
+              width: `${scrollerLayout.value.startSpacing}px`,
+              height: "100%",
+              flexShrink: 0
+            } : {
+              height: `${scrollerLayout.value.startSpacing}px`,
+              width: "100%"
+            }
+          )
+        }, null, 4),
         createElementVNode("div", {
           style: normalizeStyle({
-            gap: layout.value.pageGap + "px",
+            gap: `${scrollerLayout.value.pageGap}px`,
             display: "flex",
             alignItems: "center",
             position: "relative",
             boxSizing: "border-box",
-            flexDirection: layout.value.strategy === "horizontal" ? "row" : "column",
-            minHeight: layout.value.strategy === "horizontal" ? "100%" : void 0,
-            minWidth: layout.value.strategy === "vertical" ? "fit-content" : void 0
+            ...scrollerLayout.value.strategy === unref(ScrollStrategy).Horizontal ? {
+              flexDirection: "row",
+              minHeight: "100%"
+            } : {
+              flexDirection: "column",
+              minWidth: "fit-content"
+            }
           })
         }, [
-          (openBlock(true), createElementBlock(Fragment, null, renderList(layout.value.items, (item) => {
+          (openBlock(true), createElementBlock(Fragment, null, renderList(scrollerLayout.value.items, (item) => {
             return openBlock(), createElementBlock("div", {
               key: item.pageNumbers[0],
-              style: normalizeStyle({ display: "flex", justifyContent: "center", gap: layout.value.pageGap + "px" })
+              style: normalizeStyle({
+                display: "flex",
+                justifyContent: "center",
+                gap: `${scrollerLayout.value.pageGap}px`
+              })
             }, [
-              (openBlock(true), createElementBlock(Fragment, null, renderList(item.pageLayouts, (pl) => {
+              (openBlock(true), createElementBlock(Fragment, null, renderList(item.pageLayouts, (layout) => {
                 return openBlock(), createElementBlock("div", {
-                  key: pl.pageNumber,
-                  style: normalizeStyle({ width: pl.rotatedWidth + "px", height: pl.rotatedHeight + "px" })
-                }, [
-                  renderSlot(_ctx.$slots, "default", {
-                    page: pageSlotProps(pl)
+                  key: layout.pageNumber,
+                  style: normalizeStyle({
+                    width: `${layout.rotatedWidth}px`,
+                    height: `${layout.rotatedHeight}px`
                   })
+                }, [
+                  renderSlot(_ctx.$slots, "default", { page: layout })
                 ], 4);
               }), 128))
             ], 4);
           }), 128))
         ], 4),
-        layout.value.strategy === "horizontal" ? (openBlock(), createElementBlock("div", {
-          key: 2,
-          style: normalizeStyle({ width: layout.value.endSpacing + "px", height: "100%", flexShrink: 0 })
-        }, null, 4)) : (openBlock(), createElementBlock("div", {
-          key: 3,
-          style: normalizeStyle({ height: layout.value.endSpacing + "px", width: "100%" })
-        }, null, 4)),
-        (openBlock(true), createElementBlock(Fragment, null, renderList(props.overlayElements, (el, i) => {
-          return openBlock(), createBlock(resolveDynamicComponent(el), { key: i });
-        }), 128))
+        createElementVNode("div", {
+          style: normalizeStyle(
+            scrollerLayout.value.strategy === unref(ScrollStrategy).Horizontal ? {
+              width: `${scrollerLayout.value.endSpacing}px`,
+              height: "100%",
+              flexShrink: 0
+            } : {
+              height: `${scrollerLayout.value.endSpacing}px`,
+              width: "100%"
+            }
+          )
+        }, null, 4)
       ], 16)) : createCommentVNode("", true);
     };
   }

package/dist/vue/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/vue/hooks/use-scroll.ts","../../src/vue/components/scroller.vue"],"sourcesContent":["import { ref, watchEffect, computed } from 'vue';\nimport { useCapability, usePlugin } from '@embedpdf/core/vue';\nimport { ScrollPlugin } from '@embedpdf/plugin-scroll';\n\nexport const useScrollPlugin = () => usePlugin<ScrollPlugin>(ScrollPlugin.id);\nexport const useScrollCapability = () => useCapability<ScrollPlugin>(ScrollPlugin.id);\n\nexport function useScroll() {\n  const { provides } = useScrollCapability();\n\n  const currentPage = ref(1);\n  const totalPages = ref(1);\n\n  watchEffect((onCleanup) => {\n    if (!provides.value) return;\n\n    const unsubscribe = provides.value.onPageChange(({ pageNumber, totalPages: tp }) => {\n      currentPage.value = pageNumber;\n      totalPages.value = tp;\n    });\n    onCleanup(unsubscribe);\n  });\n\n  // New format\n  const state = computed(() => ({\n    currentPage: currentPage.value,\n    totalPages: totalPages.value,\n  }));\n\n  // Create deprecated properties with warnings\n  const deprecatedCurrentPage = computed({\n    get() {\n      console.warn(\n        `Accessing 'currentPage' directly on useScroll() is deprecated. Use useScroll().state.currentPage instead.`,\n      );\n      return currentPage.value;\n    },\n    set(value) {\n      currentPage.value = value;\n    },\n  });\n\n  const deprecatedTotalPages = computed({\n    get() {\n      console.warn(\n        `Accessing 'totalPages' directly on useScroll() is deprecated. Use useScroll().state.totalPages instead.`,\n      );\n      return totalPages.value;\n    },\n    set(value) {\n      totalPages.value = value;\n    },\n  });\n\n  const deprecatedScroll = computed(() => {\n    if (provides.value) {\n      console.warn(\n        `Accessing 'scroll' directly on useScroll() is deprecated. Use useScroll().provides instead.`,\n      );\n    }\n    return provides.value;\n  });\n\n  return {\n    // New format (preferred)\n    provides,\n    state,\n\n    // Deprecated properties (for backward compatibility)\n    currentPage: deprecatedCurrentPage,\n    totalPages: deprecatedTotalPages,\n    scroll: deprecatedScroll,\n  };\n}\n","<script setup lang=\"ts\">\n/* ------------------------------------------------------------------ */\n/* imports                                                            */\n/* ------------------------------------------------------------------ */\nimport { computed, onMounted, ref, watchEffect, useAttrs } from 'vue';\nimport type { StyleValue } from 'vue';\n\nimport { useScrollPlugin } from '../hooks';\nimport { ScrollStrategy, type ScrollerLayout, type PageLayout } from '@embedpdf/plugin-scroll';\nimport { useRegistry } from '@embedpdf/core/vue';\nimport { RenderPageProps } from '../../shared/types';\n\n/* ------------------------------------------------------------------ */\n/* props – pure layout; page content comes from the *slot*            */\n/* ------------------------------------------------------------------ */\nconst props = withDefaults(\n  defineProps<{\n    style?: StyleValue;\n    overlayElements?: any[];\n  }>(),\n  { overlayElements: () => [] },\n);\n\nconst attrs = useAttrs();\n\n/* ------------------------------------------------------------------ */\n/* plugin + reactive state                                            */\n/* ------------------------------------------------------------------ */\nconst { plugin: scrollPlugin } = useScrollPlugin();\nconst { registry } = useRegistry(); // shallowRef<PluginRegistry|null>\n\nconst layout = ref<ScrollerLayout | null>(null);\n\n/* subscribe to scroller‑layout updates */\nwatchEffect((onCleanup) => {\n  if (!scrollPlugin.value) return;\n\n  layout.value = scrollPlugin.value.getScrollerLayout();\n  const off = scrollPlugin.value.onScrollerData((l) => (layout.value = l));\n  onCleanup(off);\n});\n\n/* inform plugin once the DOM is ready */\nonMounted(() => {\n  scrollPlugin.value?.setLayoutReady();\n});\n\n/** Build the prop object that we’ll forward into the default slot */\nfunction pageSlotProps(pl: PageLayout): RenderPageProps {\n  const core = registry.value!.getStore().getState().core;\n  return {\n    ...pl,\n    rotation: core.rotation,\n    scale: core.scale,\n    document: core.document,\n  };\n}\n\n/* ------------------------------------------------------------------ */\n/* computed root style                                                */\n/* ------------------------------------------------------------------ */\nconst rootStyle = computed<StyleValue>(() => {\n  if (!layout.value) return props.style;\n\n  const base =\n    typeof props.style === 'object' && !Array.isArray(props.style)\n      ? { ...props.style }\n      : (props.style ?? {});\n\n  return [\n    base,\n    {\n      width: `${layout.value.totalWidth}px`,\n      height: `${layout.value.totalHeight}px`,\n      position: 'relative',\n      boxSizing: 'border-box',\n      margin: '0 auto',\n      ...(layout.value.strategy === ScrollStrategy.Horizontal && {\n        display: 'flex',\n        flexDirection: 'row',\n      }),\n    },\n  ];\n});\n</script>\n\n<template>\n  <!-- render nothing until both layout + registry exist -->\n  <div v-if=\"layout && registry\" :style=\"rootStyle\" v-bind=\"attrs\">\n    <!-- leading spacer -->\n    <div\n      v-if=\"layout.strategy === 'horizontal'\"\n      :style=\"{ width: layout.startSpacing + 'px', height: '100%', flexShrink: 0 }\"\n    />\n    <div v-else :style=\"{ height: layout.startSpacing + 'px', width: '100%' }\" />\n\n    <!-- actual page grid -->\n    <div\n      :style=\"{\n        gap: layout.pageGap + 'px',\n        display: 'flex',\n        alignItems: 'center',\n        position: 'relative',\n        boxSizing: 'border-box',\n        flexDirection: layout.strategy === 'horizontal' ? 'row' : 'column',\n        minHeight: layout.strategy === 'horizontal' ? '100%' : undefined,\n        minWidth: layout.strategy === 'vertical' ? 'fit-content' : undefined,\n      }\"\n    >\n      <template v-for=\"item in layout.items\" :key=\"item.pageNumbers[0]\">\n        <div :style=\"{ display: 'flex', justifyContent: 'center', gap: layout.pageGap + 'px' }\">\n          <div\n            v-for=\"pl in item.pageLayouts\"\n            :key=\"pl.pageNumber\"\n            :style=\"{ width: pl.rotatedWidth + 'px', height: pl.rotatedHeight + 'px' }\"\n          >\n            <!-- 🔑 give the host app full control over page content -->\n            <slot :page=\"pageSlotProps(pl)\" />\n          </div>\n        </div>\n      </template>\n    </div>\n\n    <!-- trailing spacer -->\n    <div\n      v-if=\"layout.strategy === 'horizontal'\"\n      :style=\"{ width: layout.endSpacing + 'px', height: '100%', flexShrink: 0 }\"\n    />\n    <div v-else :style=\"{ height: layout.endSpacing + 'px', width: '100%' }\" />\n\n    <!-- optional overlay components -->\n    <component v-for=\"(el, i) in props.overlayElements\" :is=\"el\" :key=\"i\" />\n  </div>\n</template>\n"],"names":["_unref","_openBlock","_createElementBlock","_mergeProps","_normalizeStyle","_createElementVNode","_Fragment","_renderList","_renderSlot","_createBlock","_resolveDynamicComponent"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../src/vue/hooks/use-scroll.ts","../../src/vue/components/scroller.vue"],"sourcesContent":["import { ref, watch, computed, toValue, type MaybeRefOrGetter, type ComputedRef } from 'vue';\nimport { useCapability, usePlugin } from '@embedpdf/core/vue';\nimport { ScrollPlugin, ScrollScope } from '@embedpdf/plugin-scroll';\n\nexport const useScrollPlugin = () => usePlugin<ScrollPlugin>(ScrollPlugin.id);\nexport const useScrollCapability = () => useCapability<ScrollPlugin>(ScrollPlugin.id);\n\n// Define the return type explicitly to maintain type safety\ninterface UseScrollReturn {\n  provides: ComputedRef<ScrollScope | null>;\n  state: ComputedRef<{\n    currentPage: number;\n    totalPages: number;\n  }>;\n}\n\n/**\n * Hook for scroll state for a specific document\n * @param documentId Document ID (can be ref, computed, getter, or plain value)\n */\nexport function useScroll(documentId: MaybeRefOrGetter<string>): UseScrollReturn {\n  const { provides } = useScrollCapability();\n\n  const currentPage = ref(1);\n  const totalPages = ref(1);\n\n  watch(\n    [provides, () => toValue(documentId)],\n    ([providesValue, docId], _, onCleanup) => {\n      if (!providesValue || !docId) {\n        currentPage.value = 1;\n        totalPages.value = 1;\n        return;\n      }\n\n      const scope = providesValue.forDocument(docId);\n\n      // Get initial state\n      currentPage.value = scope.getCurrentPage();\n      totalPages.value = scope.getTotalPages();\n\n      const unsubscribe = providesValue.onPageChange((event) => {\n        if (event.documentId === docId) {\n          currentPage.value = event.pageNumber;\n          totalPages.value = event.totalPages;\n        }\n      });\n\n      onCleanup(unsubscribe);\n    },\n    { immediate: true },\n  );\n\n  const state = computed(() => ({\n    currentPage: currentPage.value,\n    totalPages: totalPages.value,\n  }));\n\n  // Return a computed ref for the scoped capability\n  const scopedProvides = computed(() => {\n    const docId = toValue(documentId);\n    return provides.value?.forDocument(docId) ?? null;\n  });\n\n  return {\n    provides: scopedProvides,\n    state,\n  };\n}\n","<script setup lang=\"ts\">\nimport { ref, watch, computed } from 'vue';\nimport { useScrollPlugin } from '../hooks';\nimport { ScrollStrategy, type ScrollerLayout } from '@embedpdf/plugin-scroll';\n\ninterface ScrollerProps {\n  documentId: string;\n}\n\nconst props = defineProps<ScrollerProps>();\n\nconst { plugin: scrollPlugin } = useScrollPlugin();\n\nconst layoutData = ref<{\n  layout: ScrollerLayout | null;\n  docId: string | null;\n}>({ layout: null, docId: null });\n\nwatch(\n  [scrollPlugin, () => props.documentId],\n  ([plugin, docId], _, onCleanup) => {\n    if (!plugin || !docId) {\n      layoutData.value = { layout: null, docId: null };\n      return;\n    }\n\n    // Subscribe to the new document\n    const unsubscribe = plugin.onScrollerData(docId, (newLayout) => {\n      layoutData.value = { layout: newLayout, docId };\n    });\n\n    onCleanup(() => {\n      unsubscribe();\n      layoutData.value = { layout: null, docId: null };\n      plugin.clearLayoutReady(docId);\n    });\n  },\n  {\n    immediate: true,\n  },\n);\n\n// Only use layout if it matches the current documentId (prevents stale data)\nconst scrollerLayout = computed(() => {\n  return layoutData.value.docId === props.documentId ? layoutData.value.layout : null;\n});\n\n// Call setLayoutReady after layout is rendered (Vue's equivalent to useLayoutEffect)\nwatch(\n  [scrollPlugin, () => props.documentId, scrollerLayout],\n  ([plugin, docId, layout]) => {\n    if (!plugin || !docId || !layout) return;\n\n    plugin.setLayoutReady(docId);\n  },\n  { immediate: true },\n);\n</script>\n\n<template>\n  <div\n    v-if=\"scrollerLayout\"\n    :style=\"{\n      width: `${scrollerLayout.totalWidth}px`,\n      height: `${scrollerLayout.totalHeight}px`,\n      position: 'relative',\n      boxSizing: 'border-box',\n      margin: '0 auto',\n      ...(scrollerLayout.strategy === ScrollStrategy.Horizontal && {\n        display: 'flex',\n        flexDirection: 'row',\n      }),\n    }\"\n    v-bind=\"$attrs\"\n  >\n    <!-- Leading spacer -->\n    <div\n      :style=\"\n        scrollerLayout.strategy === ScrollStrategy.Horizontal\n          ? {\n              width: `${scrollerLayout.startSpacing}px`,\n              height: '100%',\n              flexShrink: 0,\n            }\n          : {\n              height: `${scrollerLayout.startSpacing}px`,\n              width: '100%',\n            }\n      \"\n    />\n\n    <!-- Page grid -->\n    <div\n      :style=\"{\n        gap: `${scrollerLayout.pageGap}px`,\n        display: 'flex',\n        alignItems: 'center',\n        position: 'relative',\n        boxSizing: 'border-box',\n        ...(scrollerLayout.strategy === ScrollStrategy.Horizontal\n          ? {\n              flexDirection: 'row',\n              minHeight: '100%',\n            }\n          : {\n              flexDirection: 'column',\n              minWidth: 'fit-content',\n            }),\n      }\"\n    >\n      <div\n        v-for=\"item in scrollerLayout.items\"\n        :key=\"item.pageNumbers[0]\"\n        :style=\"{\n          display: 'flex',\n          justifyContent: 'center',\n          gap: `${scrollerLayout.pageGap}px`,\n        }\"\n      >\n        <div\n          v-for=\"layout in item.pageLayouts\"\n          :key=\"layout.pageNumber\"\n          :style=\"{\n            width: `${layout.rotatedWidth}px`,\n            height: `${layout.rotatedHeight}px`,\n          }\"\n        >\n          <slot :page=\"layout\" />\n        </div>\n      </div>\n    </div>\n\n    <!-- Trailing spacer -->\n    <div\n      :style=\"\n        scrollerLayout.strategy === ScrollStrategy.Horizontal\n          ? {\n              width: `${scrollerLayout.endSpacing}px`,\n              height: '100%',\n              flexShrink: 0,\n            }\n          : {\n              height: `${scrollerLayout.endSpacing}px`,\n              width: '100%',\n            }\n      \"\n    />\n  </div>\n</template>\n"],"names":["_openBlock","_createElementBlock","_mergeProps","_unref","$attrs","_createElementVNode","_normalizeStyle","_Fragment","_renderList","_renderSlot"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@embedpdf/plugin-scroll",
-  "version": "1.5.0",
+  "version": "2.0.0-next.1",
   "type": "module",
   "license": "MIT",
   "main": "./dist/index.cjs",
@@ -35,14 +35,15 @@
     }
   },
   "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/plugin-viewport": "1.5.0"
+    "@embedpdf/core": "2.0.0-next.1",
+    "@embedpdf/plugin-spread": "2.0.0-next.1",
+    "@embedpdf/plugin-viewport": "2.0.0-next.1"
   },
   "peerDependencies": {
     "preact": "^10.26.4",
@@ -50,8 +51,8 @@
     "react-dom": ">=16.8.0",
     "vue": ">=3.2.0",
     "svelte": ">=5 <6",
-    "@embedpdf/plugin-viewport": "1.5.0",
-    "@embedpdf/core": "1.5.0"
+    "@embedpdf/core": "2.0.0-next.1",
+    "@embedpdf/plugin-viewport": "2.0.0-next.1"
   },
   "files": [
     "dist",