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

package/dist/svelte/index.js

@@ -1,69 +1,92 @@
 import "svelte/internal/disclose-version";
 import * as $ from "svelte/internal/client";
+import { usePlugin, useCapability } from "@embedpdf/core/svelte";
 import { ScrollPlugin, ScrollStrategy } from "@embedpdf/plugin-scroll";
 export * from "@embedpdf/plugin-scroll";
-import { usePlugin, useCapability, useCoreState } from "@embedpdf/core/svelte";
 const useScrollPlugin = () => usePlugin(ScrollPlugin.id);
 const useScrollCapability = () => useCapability(ScrollPlugin.id);
-const useScroll = () => {
+const useScroll = (getDocumentId) => {
   const capability = useScrollCapability();
-  const state = $.proxy({
-    get provides() {
-      return capability.provides;
-    },
-    state: { currentPage: 1, totalPages: 1 }
-  });
+  let state = $.proxy({ currentPage: 1, totalPages: 1 });
+  const documentId = $.derived(getDocumentId);
+  const scopedProvides = $.derived(() => capability.provides && $.get(documentId) ? capability.provides.forDocument($.get(documentId)) : null);
   $.user_effect(() => {
-    if (!capability.provides) return;
-    return capability.provides.onPageChange(({ pageNumber, totalPages }) => {
-      state.state.currentPage = pageNumber;
-      state.state.totalPages = totalPages;
+    const provides = capability.provides;
+    const docId = $.get(documentId);
+    if (!provides || !docId) {
+      state.currentPage = 1;
+      state.totalPages = 1;
+      return;
+    }
+    const scope = provides.forDocument(docId);
+    state.currentPage = scope.getCurrentPage();
+    state.totalPages = scope.getTotalPages();
+    return provides.onPageChange((event) => {
+      if (event.documentId === docId) {
+        state.currentPage = event.pageNumber;
+        state.totalPages = event.totalPages;
+      }
     });
   });
-  return state;
+  return {
+    get provides() {
+      return $.get(scopedProvides);
+    },
+    get state() {
+      return state;
+    }
+  };
 };
 var root_3 = $.from_html(`<div><!></div>`);
 var root_2 = $.from_html(`<div></div>`);
-var root_1 = $.from_html(`<div><div></div> <div></div> <div></div> <!></div>`);
+var root_1 = $.from_html(`<div><div></div> <div></div> <div></div></div>`);
 function Scroller($$anchor, $$props) {
   $.push($$props, true);
-  const scrollPlugin = useScrollPlugin();
-  const core = useCoreState();
-  let scrollerLayout = $.derived(() => {
-    var _a;
-    return ((_a = scrollPlugin.plugin) == null ? void 0 : _a.getScrollerLayout()) ?? null;
-  });
   let restProps = $.rest_props($$props, [
     "$$slots",
     "$$events",
     "$$legacy",
-    "RenderPageSnippet",
-    "overlayElements"
+    "documentId",
+    "renderPage"
   ]);
+  const { plugin: scrollPlugin } = useScrollPlugin();
+  let layoutData = $.state($.proxy({ layout: null, docId: null }));
   $.user_effect(() => {
-    if (!scrollPlugin.plugin) return;
-    return scrollPlugin.plugin.onScrollerData((layout) => $.set(scrollerLayout, layout));
+    if (!scrollPlugin || !$$props.documentId) {
+      $.set(layoutData, { layout: null, docId: null }, true);
+      return;
+    }
+    const unsubscribe = scrollPlugin.onScrollerData($$props.documentId, (newLayout) => {
+      $.set(layoutData, { layout: newLayout, docId: $$props.documentId }, true);
+    });
+    return () => {
+      unsubscribe();
+      $.set(layoutData, { layout: null, docId: null }, true);
+      scrollPlugin.clearLayoutReady($$props.documentId);
+    };
   });
-  $.user_effect(() => {
-    if (!scrollPlugin.plugin) return;
-    scrollPlugin.plugin.setLayoutReady();
+  const scrollerLayout = $.derived(() => $.get(layoutData).docId === $$props.documentId ? $.get(layoutData).layout : null);
+  $.user_pre_effect(() => {
+    if (!scrollPlugin || !$$props.documentId || !$.get(scrollerLayout)) return;
+    scrollPlugin.setLayoutReady($$props.documentId);
   });
   var fragment = $.comment();
   var node = $.first_child(fragment);
   {
-    var consequent_1 = ($$anchor2) => {
+    var consequent = ($$anchor2) => {
       var div = root_1();
-      $.attribute_effect(div, ($0) => ({ ...restProps, [$.STYLE]: $0 }), [
-        () => ({
+      $.attribute_effect(div, () => ({
+        ...restProps,
+        [$.STYLE]: {
           width: `${$.get(scrollerLayout).totalWidth}px`,
           height: `${$.get(scrollerLayout).totalHeight}px`,
           position: "relative",
           "box-sizing": "border-box",
           margin: "0 auto",
-          display: $.get(scrollerLayout).strategy === ScrollStrategy.Horizontal ? "flex" : null,
-          "flex-direction": $.get(scrollerLayout).strategy === ScrollStrategy.Horizontal ? "row" : null
-        })
-      ]);
+          display: $.get(scrollerLayout).strategy === ScrollStrategy.Horizontal ? "flex" : void 0,
+          "flex-direction": $.get(scrollerLayout).strategy === ScrollStrategy.Horizontal ? "row" : void 0
+        }
+      }));
       var div_1 = $.child(div);
       let styles;
       var div_2 = $.sibling(div_1, 2);
@@ -75,87 +98,52 @@ function Scroller($$anchor, $$props) {
           var div_4 = root_3();
           let styles_3;
           var node_1 = $.child(div_4);
-          {
-            let $0 = $.derived(() => ({
-              ...$.get(layout),
-              rotation: core.coreState.rotation,
-              scale: core.coreState.scale,
-              document: core.coreState.document
-            }));
-            $.snippet(node_1, () => $$props.RenderPageSnippet ?? $.noop, () => $.get($0));
-          }
+          $.snippet(node_1, () => $$props.renderPage, () => $.get(layout));
           $.reset(div_4);
-          $.template_effect(($0) => styles_3 = $.set_style(div_4, "", styles_3, $0), [
-            () => ({
-              width: `${$.get(layout).rotatedWidth}px`,
-              height: `${$.get(layout).rotatedHeight}px`
-            })
-          ]);
+          $.template_effect(() => styles_3 = $.set_style(div_4, "", styles_3, {
+            width: `${$.get(layout).rotatedWidth}px`,
+            height: `${$.get(layout).rotatedHeight}px`
+          }));
           $.append($$anchor4, div_4);
         });
         $.reset(div_3);
-        $.template_effect(($0) => styles_2 = $.set_style(div_3, "", styles_2, $0), [
-          () => ({
-            display: "flex",
-            "justify-content": "center",
-            gap: `${$.get(scrollerLayout).pageGap}px`
-          })
-        ]);
+        $.template_effect(() => styles_2 = $.set_style(div_3, "", styles_2, {
+          display: "flex",
+          "justify-content": "center",
+          gap: `${$.get(scrollerLayout).pageGap}px`
+        }));
         $.append($$anchor3, div_3);
       });
       $.reset(div_2);
       var div_5 = $.sibling(div_2, 2);
       let styles_4;
-      var node_2 = $.sibling(div_5, 2);
-      {
-        var consequent = ($$anchor3) => {
-          var fragment_1 = $.comment();
-          var node_3 = $.first_child(fragment_1);
-          $.each(node_3, 17, () => $$props.overlayElements, $.index, ($$anchor4, OverLay) => {
-            var fragment_2 = $.comment();
-            var node_4 = $.first_child(fragment_2);
-            $.snippet(node_4, () => $.get(OverLay) ?? $.noop);
-            $.append($$anchor4, fragment_2);
-          });
-          $.append($$anchor3, fragment_1);
-        };
-        $.if(node_2, ($$render) => {
-          if ($$props.overlayElements && $$props.overlayElements.length > 0) $$render(consequent);
-        });
-      }
       $.reset(div);
-      $.template_effect(
-        ($0, $1, $2) => {
-          styles = $.set_style(div_1, "", styles, $0);
-          styles_1 = $.set_style(div_2, "", styles_1, $1);
-          styles_4 = $.set_style(div_5, "", styles_4, $2);
-        },
-        [
-          () => ({
-            width: $.get(scrollerLayout).strategy === ScrollStrategy.Horizontal ? `${$.get(scrollerLayout).startSpacing}px` : "100%",
-            height: $.get(scrollerLayout).strategy === ScrollStrategy.Horizontal ? "100%" : `${$.get(scrollerLayout).startSpacing}px`,
-            "flex-shrink": "0"
-          }),
-          () => ({
-            gap: `${$.get(scrollerLayout).pageGap}px`,
-            display: "flex",
-            "align-items": "center",
-            position: "relative",
-            "box-sizing": "border-box",
-            "flex-direction": $.get(scrollerLayout).strategy === ScrollStrategy.Horizontal ? "row" : "column",
-            "min-width": $.get(scrollerLayout).strategy === ScrollStrategy.Horizontal ? "100%" : "fit-content"
-          }),
-          () => ({
-            width: $.get(scrollerLayout).strategy === ScrollStrategy.Horizontal ? `${$.get(scrollerLayout).endSpacing}px` : "100%",
-            height: $.get(scrollerLayout).strategy === ScrollStrategy.Horizontal ? "100%" : `${$.get(scrollerLayout).endSpacing}px`,
-            "flex-shrink": "0"
-          })
-        ]
-      );
+      $.template_effect(() => {
+        styles = $.set_style(div_1, "", styles, {
+          width: $.get(scrollerLayout).strategy === ScrollStrategy.Horizontal ? `${$.get(scrollerLayout).startSpacing}px` : "100%",
+          height: $.get(scrollerLayout).strategy === ScrollStrategy.Horizontal ? "100%" : `${$.get(scrollerLayout).startSpacing}px`,
+          "flex-shrink": $.get(scrollerLayout).strategy === ScrollStrategy.Horizontal ? "0" : void 0
+        });
+        styles_1 = $.set_style(div_2, "", styles_1, {
+          gap: `${$.get(scrollerLayout).pageGap}px`,
+          display: "flex",
+          "align-items": "center",
+          position: "relative",
+          "box-sizing": "border-box",
+          "flex-direction": $.get(scrollerLayout).strategy === ScrollStrategy.Horizontal ? "row" : "column",
+          "min-height": $.get(scrollerLayout).strategy === ScrollStrategy.Horizontal ? "100%" : void 0,
+          "min-width": $.get(scrollerLayout).strategy === ScrollStrategy.Horizontal ? void 0 : "fit-content"
+        });
+        styles_4 = $.set_style(div_5, "", styles_4, {
+          width: $.get(scrollerLayout).strategy === ScrollStrategy.Horizontal ? `${$.get(scrollerLayout).endSpacing}px` : "100%",
+          height: $.get(scrollerLayout).strategy === ScrollStrategy.Horizontal ? "100%" : `${$.get(scrollerLayout).endSpacing}px`,
+          "flex-shrink": $.get(scrollerLayout).strategy === ScrollStrategy.Horizontal ? "0" : void 0
+        });
+      });
       $.append($$anchor2, div);
     };
     $.if(node, ($$render) => {
-      if ($.get(scrollerLayout) && core.coreState) $$render(consequent_1);
+      if ($.get(scrollerLayout)) $$render(consequent);
     });
   }
   $.append($$anchor, fragment);

package/dist/svelte/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/svelte/hooks/use-scroll.svelte.ts","../../src/svelte/components/Scroller.svelte"],"sourcesContent":["import { ScrollCapability, ScrollPlugin } from '@embedpdf/plugin-scroll';\nimport { useCapability, usePlugin } from '@embedpdf/core/svelte';\n\nexport const useScrollPlugin = () => usePlugin<ScrollPlugin>(ScrollPlugin.id);\nexport const useScrollCapability = () => useCapability<ScrollPlugin>(ScrollPlugin.id);\n\nexport const useScroll = () => {\n  const capability = useScrollCapability();\n\n  const state = $state({\n    get provides() {\n      return capability.provides;\n    },\n    state: {\n      currentPage: 1,\n      totalPages: 1,\n    },\n  });\n\n  $effect(() => {\n    if (!capability.provides) return;\n    return capability.provides.onPageChange(({ pageNumber, totalPages }) => {\n      state.state.currentPage = pageNumber;\n      state.state.totalPages = totalPages;\n    });\n  });\n\n  return state;\n};\n","<script lang=\"ts\">\n  import { useScrollPlugin } from '../hooks';\n  import type { HTMLAttributes } from 'svelte/elements';\n  import { type ScrollerLayout, ScrollStrategy } from '@embedpdf/plugin-scroll';\n  import { useCoreState } from '@embedpdf/core/svelte';\n  import { type RenderPageProps } from '../../shared/types';\n  import { type Snippet } from 'svelte';\n\n  type ScrollerProps = HTMLAttributes<HTMLDivElement> & {\n    RenderPageSnippet: Snippet<RenderPageProps>;\n    overlayElements?: Snippet[];\n  };\n\n  const scrollPlugin = useScrollPlugin();\n  const core = useCoreState();\n  let scrollerLayout = $derived<ScrollerLayout | null>(\n    scrollPlugin.plugin?.getScrollerLayout() ?? null,\n  );\n\n  let { RenderPageSnippet, overlayElements, ...restProps }: ScrollerProps = $props();\n\n  $effect(() => {\n    if (!scrollPlugin.plugin) return;\n    return scrollPlugin.plugin.onScrollerData((layout) => (scrollerLayout = layout));\n  });\n\n  $effect(() => {\n    if (!scrollPlugin.plugin) return;\n    scrollPlugin.plugin.setLayoutReady();\n  });\n</script>\n\n{#if scrollerLayout && core.coreState}\n  <div\n    {...restProps}\n    style:width={`${scrollerLayout.totalWidth}px`}\n    style:height={`${scrollerLayout.totalHeight}px`}\n    style:position=\"relative\"\n    style:box-sizing=\"border-box\"\n    style:margin=\"0 auto\"\n    style:display={scrollerLayout.strategy === ScrollStrategy.Horizontal ? 'flex' : null}\n    style:flex-direction={scrollerLayout.strategy === ScrollStrategy.Horizontal ? 'row' : null}\n  >\n    <div\n      style:width={scrollerLayout.strategy === ScrollStrategy.Horizontal\n        ? `${scrollerLayout.startSpacing}px`\n        : '100%'}\n      style:height={scrollerLayout.strategy === ScrollStrategy.Horizontal\n        ? '100%'\n        : `${scrollerLayout.startSpacing}px`}\n      style:flex-shrink=\"0\"\n    ></div>\n    <div\n      style:gap={`${scrollerLayout.pageGap}px`}\n      style:display=\"flex\"\n      style:align-items=\"center\"\n      style:position=\"relative\"\n      style:box-sizing=\"border-box\"\n      style:flex-direction={scrollerLayout.strategy === ScrollStrategy.Horizontal\n        ? 'row'\n        : 'column'}\n      style:min-width={scrollerLayout.strategy === ScrollStrategy.Horizontal\n        ? '100%'\n        : 'fit-content'}\n    >\n      {#each scrollerLayout.items as item (item.pageNumbers[0])}\n        <div\n          style:display=\"flex\"\n          style:justify-content=\"center\"\n          style:gap={`${scrollerLayout.pageGap}px`}\n        >\n          {#each item.pageLayouts as layout (layout.pageNumber)}\n            <div\n              style:width={`${layout.rotatedWidth}px`}\n              style:height={`${layout.rotatedHeight}px`}\n            >\n              {@render RenderPageSnippet?.({\n                ...layout,\n                rotation: core.coreState.rotation,\n                scale: core.coreState.scale,\n                document: core.coreState.document,\n              })}\n            </div>\n          {/each}\n        </div>\n      {/each}\n    </div>\n    <div\n      style:width={scrollerLayout.strategy === ScrollStrategy.Horizontal\n        ? `${scrollerLayout.endSpacing}px`\n        : '100%'}\n      style:height={scrollerLayout.strategy === ScrollStrategy.Horizontal\n        ? '100%'\n        : `${scrollerLayout.endSpacing}px`}\n      style:flex-shrink=\"0\"\n    ></div>\n    {#if overlayElements && overlayElements.length > 0}\n      {#each overlayElements as OverLay}\n        {@render OverLay?.()}\n      {/each}\n    {/if}\n  </div>\n{/if}\n"],"names":["$$anchor"],"mappings":";;;;;AAGa,MAAA,kBAAwB,MAAA,UAAwB,aAAa,EAAE;AAC/D,MAAA,sBAA4B,MAAA,cAA4B,aAAa,EAAE;AAEvE,MAAA,kBAAkB;AACvB,QAAA,aAAa,oBAAoB;QAEjC;IACA,IAAA,WAAW;AACN,aAAA,WAAW;AAAA,IACpB;AAAA,IACA,SACE,aAAa,GACb,YAAY,EAAA;AAAA;AAIhB,IAAA,kBAAc;AACP,QAAA,CAAA,WAAW,SAAU;WACnB,WAAW,SAAS,gBAAgB,YAAY,iBAAiB;AACtE,YAAM,MAAM,cAAc;AAC1B,YAAM,MAAM,aAAa;AAAA,KAC1B;AAAA,GACF;SAEM;AACT;;;;qCC5BA;;AAaQ,QAAA,eAAe,gBAAe;AAC9B,QAAA,OAAO,aAAY;AACrB,MAAA;;AACF,+BAAa,WAAb,mBAAqB,wBAAuB;AAAA,GAAI;MAGL,YAAS,EAAA,WAAA,SAAA;AAAA;;;;;;AAEtD,IAAA,YAAc,MAAA;AACP,QAAA,CAAA,aAAa,OAAM;WACjB,aAAa,OAAO,gBAAgB,WAAM,EAAA,IAAM,gBAAiB,MAAM,CAAA;AAAA,GAC/E;AAED,IAAA,YAAc,MAAA;AACP,QAAA,CAAA,aAAa,OAAM;AACxB,iBAAa,OAAO,eAAc;AAAA,GACnC;;;;;;4CAKK,WAAS,CAAA,EAAA,KAAA,GAAA,GAAA,IAAA;AAAA;UACG,OAAA,GAAA,EAAA,IAAA,cAAc,EAAC,UAAU;AAAA,UACxB,QAAA,GAAA,EAAA,IAAA,cAAc,EAAC,WAAW;AAAA;;;yBAI5B,cAAc,EAAC,aAAa,eAAe,aAAa,SAAS;AAAA,kCAC1D,cAAc,EAAC,aAAa,eAAe,aAAa,QAAQ;AAAA;;;;;;oCAwB7E,cAAc,EAAC,OAAK,CAAI,SAAM,KAAK,YAAY,CAAC,GAAA,CAAAA,WAAxB,SAAI;;;sCAMxB,IAAI,EAAC,aAAe,CAAA,WAAQ,OAAO,YAAU,CAAAA,WAAzB,WAAM;;;;;;uBAMxB,MAAM;AAAA,cACT,UAAU,KAAK,UAAU;AAAA,cACzB,OAAO,KAAK,UAAU;AAAA,cACtB,UAAU,KAAK,UAAU;AAAA;;;;;;cAPX,OAAA,GAAA,EAAA,IAAA,MAAM,EAAC,YAAY;AAAA,cAClB,QAAA,GAAA,EAAA,IAAA,MAAM,EAAC,aAAa;AAAA;;;;;;;;;YAL3B,KAAA,GAAA,EAAA,IAAA,cAAc,EAAC,OAAO;AAAA;;;;;;;;;;;;iFA4Bd,YAAO;;;0CACtB,OAAO,KAAA,EAAA,IAAA;;;;;;AAFoB,cAAA,QAAA,mBAAA,QAAA,gBAAA,SAAS,EAAC,UAAA,UAAA;AAAA;;;;;;;;;;;yBApDnC,cAAc,EAAC,aAAa,eAAe,aAAS,GAAA,EAAA,IAC1D,cAAc,EAAC,YAAY,OAC9B;AAAA,0BACU,cAAc,EAAC,aAAa,eAAe,aACrD,SAAK,GAAA,EAAA,IACF,cAAc,EAAC,YAAY;AAAA;;;YAIpB,KAAA,GAAA,EAAA,IAAA,cAAc,EAAC,OAAO;AAAA;;;;oCAKd,cAAc,EAAC,aAAa,eAAe,aAC7D,QACA;AAAA,+BACa,cAAc,EAAC,aAAa,eAAe,aACxD,SACA;AAAA;;yBAyBS,cAAc,EAAC,aAAa,eAAe,aAAS,GAAA,EAAA,IAC1D,cAAc,EAAC,UAAU,OAC5B;AAAA,0BACU,cAAc,EAAC,aAAa,eAAe,aACrD,SAAK,GAAA,EAAA,IACF,cAAc,EAAC,UAAU;AAAA;;;;;;;gBA7DjC,cAAc,KAAI,KAAK,UAAS,UAAA,YAAA;AAAA;;;;AAFrC;"}
+{"version":3,"file":"index.js","sources":["../../src/svelte/hooks/use-scroll.svelte.ts","../../src/svelte/components/Scroller.svelte"],"sourcesContent":["import { useCapability, usePlugin } from '@embedpdf/core/svelte';\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: ScrollScope | null;\n  state: {\n    currentPage: number;\n    totalPages: number;\n  };\n}\n\n/**\n * Hook for scroll state for a specific document\n * @param documentId Document ID.\n */\nexport const useScroll = (getDocumentId: () => string | null): UseScrollReturn => {\n  const capability = useScrollCapability();\n\n  let state = $state({\n    currentPage: 1,\n    totalPages: 1,\n  });\n\n  // Reactive documentId\n  const documentId = $derived(getDocumentId());\n\n  // Scoped capability for current docId\n  const scopedProvides = $derived(\n    capability.provides && documentId ? capability.provides.forDocument(documentId) : null,\n  );\n\n  $effect(() => {\n    const provides = capability.provides;\n    const docId = documentId;\n\n    if (!provides || !docId) {\n      state.currentPage = 1;\n      state.totalPages = 1;\n      return;\n    }\n\n    const scope = provides.forDocument(docId);\n\n    // Initial values\n    state.currentPage = scope.getCurrentPage();\n    state.totalPages = scope.getTotalPages();\n\n    // Subscribe to page changes for THIS docId\n    return provides.onPageChange((event) => {\n      if (event.documentId === docId) {\n        state.currentPage = event.pageNumber;\n        state.totalPages = event.totalPages;\n      }\n    });\n  });\n\n  return {\n    get provides() {\n      return scopedProvides;\n    },\n    get state() {\n      return state;\n    },\n  };\n};\n","<script lang=\"ts\">\n  import type { Snippet } from 'svelte';\n  import type { HTMLAttributes } from 'svelte/elements';\n  import { useScrollPlugin } from '../hooks';\n  import { type ScrollerLayout, ScrollStrategy } from '@embedpdf/plugin-scroll';\n  import type { PageLayout } from '@embedpdf/plugin-scroll';\n\n  type ScrollerProps = HTMLAttributes<HTMLDivElement> & {\n    documentId: string;\n    renderPage: Snippet<[PageLayout]>;\n  };\n\n  let { documentId, renderPage, ...restProps }: ScrollerProps = $props();\n\n  const { plugin: scrollPlugin } = useScrollPlugin();\n\n  let layoutData = $state<{\n    layout: ScrollerLayout | null;\n    docId: string | null;\n  }>({ layout: null, docId: null });\n\n  $effect(() => {\n    if (!scrollPlugin || !documentId) {\n      layoutData = { layout: null, docId: null };\n      return;\n    }\n\n    // When we get new data, store it along with the current documentId\n    const unsubscribe = scrollPlugin.onScrollerData(documentId, (newLayout) => {\n      layoutData = { layout: newLayout, docId: documentId };\n    });\n\n    // When the effect re-runs or component unmounts, clear the state\n    return () => {\n      unsubscribe();\n      layoutData = { layout: null, docId: null };\n      scrollPlugin.clearLayoutReady(documentId);\n    };\n  });\n\n  // Only use layout if it matches the current documentId (prevents stale data)\n  const scrollerLayout = $derived(layoutData.docId === documentId ? layoutData.layout : null);\n\n  // Call setLayoutReady after layout is rendered (Svelte's equivalent to useLayoutEffect)\n  $effect.pre(() => {\n    if (!scrollPlugin || !documentId || !scrollerLayout) return;\n\n    scrollPlugin.setLayoutReady(documentId);\n  });\n</script>\n\n{#if scrollerLayout}\n  <div\n    {...restProps}\n    style:width={`${scrollerLayout.totalWidth}px`}\n    style:height={`${scrollerLayout.totalHeight}px`}\n    style:position=\"relative\"\n    style:box-sizing=\"border-box\"\n    style:margin=\"0 auto\"\n    style:display={scrollerLayout.strategy === ScrollStrategy.Horizontal ? 'flex' : undefined}\n    style:flex-direction={scrollerLayout.strategy === ScrollStrategy.Horizontal ? 'row' : undefined}\n  >\n    <!-- Leading spacer -->\n    <div\n      style:width={scrollerLayout.strategy === ScrollStrategy.Horizontal\n        ? `${scrollerLayout.startSpacing}px`\n        : '100%'}\n      style:height={scrollerLayout.strategy === ScrollStrategy.Horizontal\n        ? '100%'\n        : `${scrollerLayout.startSpacing}px`}\n      style:flex-shrink={scrollerLayout.strategy === ScrollStrategy.Horizontal ? '0' : undefined}\n    ></div>\n\n    <!-- Page grid -->\n    <div\n      style:gap={`${scrollerLayout.pageGap}px`}\n      style:display=\"flex\"\n      style:align-items=\"center\"\n      style:position=\"relative\"\n      style:box-sizing=\"border-box\"\n      style:flex-direction={scrollerLayout.strategy === ScrollStrategy.Horizontal\n        ? 'row'\n        : 'column'}\n      style:min-height={scrollerLayout.strategy === ScrollStrategy.Horizontal ? '100%' : undefined}\n      style:min-width={scrollerLayout.strategy === ScrollStrategy.Horizontal\n        ? undefined\n        : 'fit-content'}\n    >\n      {#each scrollerLayout.items as item (item.pageNumbers[0])}\n        <div\n          style:display=\"flex\"\n          style:justify-content=\"center\"\n          style:gap={`${scrollerLayout.pageGap}px`}\n        >\n          {#each item.pageLayouts as layout (layout.pageNumber)}\n            <div\n              style:width={`${layout.rotatedWidth}px`}\n              style:height={`${layout.rotatedHeight}px`}\n            >\n              {@render renderPage(layout)}\n            </div>\n          {/each}\n        </div>\n      {/each}\n    </div>\n\n    <!-- Trailing spacer -->\n    <div\n      style:width={scrollerLayout.strategy === ScrollStrategy.Horizontal\n        ? `${scrollerLayout.endSpacing}px`\n        : '100%'}\n      style:height={scrollerLayout.strategy === ScrollStrategy.Horizontal\n        ? '100%'\n        : `${scrollerLayout.endSpacing}px`}\n      style:flex-shrink={scrollerLayout.strategy === ScrollStrategy.Horizontal ? '0' : undefined}\n    ></div>\n  </div>\n{/if}\n"],"names":["$$anchor"],"mappings":"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"}

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

@@ -1,18 +1,15 @@
-import { StyleValue } from 'vue';
-type __VLS_Props = {
-    style?: StyleValue;
-    overlayElements?: any[];
-};
+interface ScrollerProps {
+    documentId: string;
+}
 declare var __VLS_1: {
     page: any;
 };
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 };
-declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    overlayElements: any[];
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
-declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+declare const __VLS_base: import('vue').DefineComponent<ScrollerProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<ScrollerProps> & 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-scroll.d.ts

@@ -1,13 +1,17 @@
-import { ScrollPlugin } from '../../lib/index.ts';
+import { MaybeRefOrGetter, ComputedRef } from 'vue';
+import { ScrollPlugin, ScrollScope } from '../../lib/index.ts';
 export declare const useScrollPlugin: () => import('@embedpdf/core/vue').PluginState<ScrollPlugin>;
 export declare const useScrollCapability: () => import('@embedpdf/core/vue').CapabilityState<Readonly<import('../../lib/index.ts').ScrollCapability>>;
-export declare function useScroll(): {
-    provides: import('vue').Ref<Readonly<import('../../lib/index.ts').ScrollCapability> | null, Readonly<import('../../lib/index.ts').ScrollCapability> | null>;
-    state: import('vue').ComputedRef<{
+interface UseScrollReturn {
+    provides: ComputedRef<ScrollScope | null>;
+    state: ComputedRef<{
         currentPage: number;
         totalPages: number;
     }>;
-    currentPage: import('vue').WritableComputedRef<number, number>;
-    totalPages: import('vue').WritableComputedRef<number, number>;
-    scroll: import('vue').ComputedRef<Readonly<import('../../lib/index.ts').ScrollCapability> | null>;
-};
+}
+/**
+ * Hook for scroll state for a specific document
+ * @param documentId Document ID (can be ref, computed, getter, or plain value)
+ */
+export declare function useScroll(documentId: MaybeRefOrGetter<string>): UseScrollReturn;
+export {};

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"),l=require("@embedpdf/plugin-scroll"),r=()=>t.usePlugin(l.ScrollPlugin.id),o=()=>t.useCapability(l.ScrollPlugin.id);const a=e.defineComponent({__name:"scroller",props:{style:{type:[Boolean,null,String,Object,Array]},overlayElements:{default:()=>[]}},setup(o){const a=o,n=e.useAttrs(),{plugin:i}=r(),{registry:c}=t.useRegistry(),s=e.ref(null);function u(e){const t=c.value.getStore().getState().core;return{...e,rotation:t.rotation,scale:t.scale,document:t.document}}e.watchEffect((e=>{if(!i.value)return;s.value=i.value.getScrollerLayout();e(i.value.onScrollerData((e=>s.value=e)))})),e.onMounted((()=>{var e;null==(e=i.value)||e.setLayoutReady()}));const p=e.computed((()=>{if(!s.value)return a.style;return["object"!=typeof a.style||Array.isArray(a.style)?a.style??{}:{...a.style},{width:`${s.value.totalWidth}px`,height:`${s.value.totalHeight}px`,position:"relative",boxSizing:"border-box",margin:"0 auto",...s.value.strategy===l.ScrollStrategy.Horizontal&&{display:"flex",flexDirection:"row"}}]}));return(t,l)=>s.value&&e.unref(c)?(e.openBlock(),e.createElementBlock("div",e.mergeProps({key:0,style:p.value},e.unref(n)),["horizontal"===s.value.strategy?(e.openBlock(),e.createElementBlock("div",{key:0,style:e.normalizeStyle({width:s.value.startSpacing+"px",height:"100%",flexShrink:0})},null,4)):(e.openBlock(),e.createElementBlock("div",{key:1,style:e.normalizeStyle({height:s.value.startSpacing+"px",width:"100%"})},null,4)),e.createElementVNode("div",{style:e.normalizeStyle({gap:s.value.pageGap+"px",display:"flex",alignItems:"center",position:"relative",boxSizing:"border-box",flexDirection:"horizontal"===s.value.strategy?"row":"column",minHeight:"horizontal"===s.value.strategy?"100%":void 0,minWidth:"vertical"===s.value.strategy?"fit-content":void 0})},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(s.value.items,(l=>(e.openBlock(),e.createElementBlock("div",{key:l.pageNumbers[0],style:e.normalizeStyle({display:"flex",justifyContent:"center",gap:s.value.pageGap+"px"})},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(l.pageLayouts,(l=>(e.openBlock(),e.createElementBlock("div",{key:l.pageNumber,style:e.normalizeStyle({width:l.rotatedWidth+"px",height:l.rotatedHeight+"px"})},[e.renderSlot(t.$slots,"default",{page:u(l)})],4)))),128))],4)))),128))],4),"horizontal"===s.value.strategy?(e.openBlock(),e.createElementBlock("div",{key:2,style:e.normalizeStyle({width:s.value.endSpacing+"px",height:"100%",flexShrink:0})},null,4)):(e.openBlock(),e.createElementBlock("div",{key:3,style:e.normalizeStyle({height:s.value.endSpacing+"px",width:"100%"})},null,4)),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(a.overlayElements,((t,l)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(t),{key:l})))),128))],16)):e.createCommentVNode("",!0)}});exports.Scroller=a,exports.useScroll=function(){const{provides:t}=o(),l=e.ref(1),r=e.ref(1);e.watchEffect((e=>{if(!t.value)return;e(t.value.onPageChange((({pageNumber:e,totalPages:t})=>{l.value=e,r.value=t})))}));const a=e.computed((()=>({currentPage:l.value,totalPages:r.value}))),n=e.computed({get:()=>(console.warn("Accessing 'currentPage' directly on useScroll() is deprecated. Use useScroll().state.currentPage instead."),l.value),set(e){l.value=e}}),i=e.computed({get:()=>(console.warn("Accessing 'totalPages' directly on useScroll() is deprecated. Use useScroll().state.totalPages instead."),r.value),set(e){r.value=e}}),c=e.computed((()=>(t.value&&console.warn("Accessing 'scroll' directly on useScroll() is deprecated. Use useScroll().provides instead."),t.value)));return{provides:t,state:a,currentPage:n,totalPages:i,scroll:c}},exports.useScrollCapability=o,exports.useScrollPlugin=r,Object.keys(l).forEach((e=>{"default"===e||Object.prototype.hasOwnProperty.call(exports,e)||Object.defineProperty(exports,e,{enumerable:!0,get:()=>l[e]})}));
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),t=require("@embedpdf/core/vue"),l=require("@embedpdf/plugin-scroll"),o=()=>t.usePlugin(l.ScrollPlugin.id),a=()=>t.useCapability(l.ScrollPlugin.id);const r=e.defineComponent({__name:"scroller",props:{documentId:{}},setup(t){const a=t,{plugin:r}=o(),n=e.ref({layout:null,docId:null});e.watch([r,()=>a.documentId],([e,t],l,o)=>{if(!e||!t)return void(n.value={layout:null,docId:null});const a=e.onScrollerData(t,e=>{n.value={layout:e,docId:t}});o(()=>{a(),n.value={layout:null,docId:null},e.clearLayoutReady(t)})},{immediate:!0});const u=e.computed(()=>n.value.docId===a.documentId?n.value.layout:null);return e.watch([r,()=>a.documentId,u],([e,t,l])=>{e&&t&&l&&e.setLayoutReady(t)},{immediate:!0}),(t,o)=>u.value?(e.openBlock(),e.createElementBlock("div",e.mergeProps({key:0,style:{width:`${u.value.totalWidth}px`,height:`${u.value.totalHeight}px`,position:"relative",boxSizing:"border-box",margin:"0 auto",...u.value.strategy===e.unref(l.ScrollStrategy).Horizontal&&{display:"flex",flexDirection:"row"}}},t.$attrs),[e.createElementVNode("div",{style:e.normalizeStyle(u.value.strategy===e.unref(l.ScrollStrategy).Horizontal?{width:`${u.value.startSpacing}px`,height:"100%",flexShrink:0}:{height:`${u.value.startSpacing}px`,width:"100%"})},null,4),e.createElementVNode("div",{style:e.normalizeStyle({gap:`${u.value.pageGap}px`,display:"flex",alignItems:"center",position:"relative",boxSizing:"border-box",...u.value.strategy===e.unref(l.ScrollStrategy).Horizontal?{flexDirection:"row",minHeight:"100%"}:{flexDirection:"column",minWidth:"fit-content"}})},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(u.value.items,l=>(e.openBlock(),e.createElementBlock("div",{key:l.pageNumbers[0],style:e.normalizeStyle({display:"flex",justifyContent:"center",gap:`${u.value.pageGap}px`})},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(l.pageLayouts,l=>(e.openBlock(),e.createElementBlock("div",{key:l.pageNumber,style:e.normalizeStyle({width:`${l.rotatedWidth}px`,height:`${l.rotatedHeight}px`})},[e.renderSlot(t.$slots,"default",{page:l})],4))),128))],4))),128))],4),e.createElementVNode("div",{style:e.normalizeStyle(u.value.strategy===e.unref(l.ScrollStrategy).Horizontal?{width:`${u.value.endSpacing}px`,height:"100%",flexShrink:0}:{height:`${u.value.endSpacing}px`,width:"100%"})},null,4)],16)):e.createCommentVNode("",!0)}});exports.Scroller=r,exports.useScroll=function(t){const{provides:l}=a(),o=e.ref(1),r=e.ref(1);e.watch([l,()=>e.toValue(t)],([e,t],l,a)=>{if(!e||!t)return o.value=1,void(r.value=1);const n=e.forDocument(t);o.value=n.getCurrentPage(),r.value=n.getTotalPages();a(e.onPageChange(e=>{e.documentId===t&&(o.value=e.pageNumber,r.value=e.totalPages)}))},{immediate:!0});const n=e.computed(()=>({currentPage:o.value,totalPages:r.value}));return{provides:e.computed(()=>{var o;const a=e.toValue(t);return(null==(o=l.value)?void 0:o.forDocument(a))??null}),state:n}},exports.useScrollCapability=a,exports.useScrollPlugin=o,Object.keys(l).forEach(e=>{"default"===e||Object.prototype.hasOwnProperty.call(exports,e)||Object.defineProperty(exports,e,{enumerable:!0,get:()=>l[e]})});
 //# sourceMappingURL=index.cjs.map

package/dist/vue/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","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":["useScrollPlugin","usePlugin","ScrollPlugin","id","useScrollCapability","useCapability","props","__props","attrs","useAttrs","plugin","scrollPlugin","registry","useRegistry","layout","ref","pageSlotProps","pl","core","value","getStore","getState","rotation","scale","document","vue$1","watchEffect","onCleanup","getScrollerLayout","onScrollerData","l","onMounted","_a","setLayoutReady","rootStyle","computed","style","Array","isArray","width","totalWidth","height","totalHeight","position","boxSizing","margin","strategy","ScrollStrategy","Horizontal","display","flexDirection","_unref","_openBlock","_createElementBlock","_mergeProps","unref","_normalizeStyle","normalizeStyle","startSpacing","flexShrink","_createElementVNode","gap","pageGap","createElementBlock","_Fragment","_renderList","renderList","items","item","key","pageNumbers","justifyContent","Fragment","pageLayouts","pageNumber","rotatedWidth","rotatedHeight","_renderSlot","_ctx","$slots","page","endSpacing","overlayElements","el","i","openBlock","_createBlock","_resolveDynamicComponent","resolveDynamicComponent","provides","currentPage","totalPages","onPageChange","tp","state","deprecatedCurrentPage","get","console","warn","set","deprecatedTotalPages","deprecatedScroll","scroll"],"mappings":"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"}
+{"version":3,"file":"index.cjs","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":["useScrollPlugin","usePlugin","ScrollPlugin","id","useScrollCapability","useCapability","props","__props","plugin","scrollPlugin","layoutData","ref","layout","docId","watch","documentId","_","onCleanup","value","unsubscribe","onScrollerData","newLayout","clearLayoutReady","immediate","scrollerLayout","computed","setLayoutReady","_openBlock","_createElementBlock","_mergeProps","style","width","totalWidth","height","totalHeight","strategy","_unref","ScrollStrategy","Horizontal","$attrs","_createElementVNode","_normalizeStyle","startSpacing","gap","pageGap","_Fragment","_renderList","items","item","key","pageNumbers","pageLayouts","pageNumber","rotatedWidth","rotatedHeight","_renderSlot","_ctx","$slots","page","endSpacing","provides","currentPage","totalPages","toValue","providesValue","scope","forDocument","getCurrentPage","getTotalPages","onPageChange","event","state","_a"],"mappings":"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"}