@embedpdf/plugin-scroll 2.4.1 → 2.6.0

package/dist/preact/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../src/shared/hooks/use-scroll.ts","../../src/shared/components/scroller.tsx"],"sourcesContent":["import { useState, useEffect } from '@framework';\nimport { useCapability, usePlugin } from '@embedpdf/core/@framework';\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\nexport const useScroll = (documentId: string): UseScrollReturn => {\n  const { provides } = useScrollCapability();\n  const [currentPage, setCurrentPage] = useState(1);\n  const [totalPages, setTotalPages] = useState(1);\n\n  useEffect(() => {\n    if (!provides || !documentId) return;\n\n    const scope = provides.forDocument(documentId);\n    setCurrentPage(scope.getCurrentPage());\n    setTotalPages(scope.getTotalPages());\n\n    return provides.onPageChange((event) => {\n      if (event.documentId === documentId) {\n        setCurrentPage(event.pageNumber);\n        setTotalPages(event.totalPages);\n      }\n    });\n  }, [provides, documentId]);\n\n  return {\n    // New format (preferred)\n    provides: provides?.forDocument(documentId) ?? null,\n    state: {\n      currentPage,\n      totalPages,\n    },\n  };\n};\n","import { ReactNode, useEffect, useState, HTMLAttributes, useLayoutEffect } from '@framework';\nimport { ScrollStrategy, ScrollerLayout, PageLayout } from '@embedpdf/plugin-scroll';\n\nimport { useScrollPlugin } from '../hooks';\n\ntype ScrollerProps = HTMLAttributes<HTMLDivElement> & {\n  documentId: string;\n  renderPage: (props: PageLayout) => ReactNode;\n};\n\nexport function Scroller({ documentId, renderPage, ...props }: ScrollerProps) {\n  const { plugin: scrollPlugin } = useScrollPlugin();\n  const [layoutData, setLayoutData] = useState<{\n    layout: ScrollerLayout | null;\n    docId: string | null;\n  }>({ layout: null, docId: null });\n\n  useEffect(() => {\n    if (!scrollPlugin || !documentId) return;\n\n    // When we get new data, store it along with the current documentId\n    const unsubscribe = scrollPlugin.onScrollerData(documentId, (newLayout) => {\n      setLayoutData({ layout: newLayout, docId: documentId });\n    });\n\n    // When the component unmounts or documentId changes, clear the state\n    return () => {\n      unsubscribe();\n      setLayoutData({ layout: null, docId: null });\n      scrollPlugin.clearLayoutReady(documentId);\n    };\n  }, [scrollPlugin, documentId]);\n\n  const scrollerLayout = layoutData.docId === documentId ? layoutData.layout : null;\n\n  useLayoutEffect(() => {\n    if (!scrollPlugin || !documentId || !scrollerLayout) return;\n\n    scrollPlugin.setLayoutReady(documentId);\n  }, [scrollPlugin, documentId, scrollerLayout]);\n\n  if (!scrollerLayout) return null;\n\n  return (\n    <div\n      {...props}\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    >\n      <div\n        style={{\n          ...(scrollerLayout.strategy === ScrollStrategy.Horizontal\n            ? {\n                width: scrollerLayout.startSpacing,\n                height: '100%',\n                flexShrink: 0,\n              }\n            : {\n                height: scrollerLayout.startSpacing,\n                width: '100%',\n              }),\n        }}\n      />\n      <div\n        style={{\n          gap: scrollerLayout.pageGap,\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        {scrollerLayout.items.map((item) => (\n          <div\n            key={item.pageNumbers[0]}\n            style={{\n              display: 'flex',\n              justifyContent: 'center',\n              gap: scrollerLayout.pageGap,\n            }}\n          >\n            {item.pageLayouts.map((layout) => (\n              <div\n                key={layout.pageNumber}\n                style={{\n                  width: `${layout.rotatedWidth}px`,\n                  height: `${layout.rotatedHeight}px`,\n                }}\n              >\n                {renderPage({\n                  ...layout,\n                })}\n              </div>\n            ))}\n          </div>\n        ))}\n      </div>\n      <div\n        style={{\n          ...(scrollerLayout.strategy === ScrollStrategy.Horizontal\n            ? {\n                width: scrollerLayout.endSpacing,\n                height: '100%',\n                flexShrink: 0,\n              }\n            : {\n                height: scrollerLayout.endSpacing,\n                width: '100%',\n              }),\n        }}\n      />\n    </div>\n  );\n}\n"],"names":["useScrollPlugin","usePlugin","ScrollPlugin","id","useScrollCapability","useCapability","documentId","renderPage","props","plugin","scrollPlugin","layoutData","setLayoutData","useState","layout","docId","useEffect","unsubscribe","onScrollerData","newLayout","clearLayoutReady","scrollerLayout","useLayoutEffect","setLayoutReady","jsxs","style","width","totalWidth","height","totalHeight","position","boxSizing","margin","strategy","ScrollStrategy","Horizontal","display","flexDirection","children","jsx","startSpacing","flexShrink","gap","pageGap","alignItems","minHeight","minWidth","items","map","item","justifyContent","pageLayouts","rotatedWidth","rotatedHeight","pageNumber","pageNumbers","endSpacing","provides","currentPage","setCurrentPage","totalPages","setTotalPages","scope","forDocument","getCurrentPage","getTotalPages","onPageChange","event","state"],"mappings":"0OAIaA,EAAkB,IAAMC,YAAwBC,EAAAA,aAAaC,IAC7DC,EAAsB,IAAMC,gBAA4BH,EAAAA,aAAaC,qBCK3E,UAAkBG,WAAEA,EAAAC,WAAYA,KAAeC,IACpD,MAAQC,OAAQC,GAAiBV,KAC1BW,EAAYC,GAAiBC,EAAAA,SAGjC,CAAEC,OAAQ,KAAMC,MAAO,OAE1BC,EAAAA,UAAU,KACR,IAAKN,IAAiBJ,EAAY,OAGlC,MAAMW,EAAcP,EAAaQ,eAAeZ,EAAaa,IAC3DP,EAAc,CAAEE,OAAQK,EAAWJ,MAAOT,MAI5C,MAAO,KACLW,IACAL,EAAc,CAAEE,OAAQ,KAAMC,MAAO,OACrCL,EAAaU,iBAAiBd,KAE/B,CAACI,EAAcJ,IAElB,MAAMe,EAAiBV,EAAWI,QAAUT,EAAaK,EAAWG,OAAS,KAQ7E,OANAQ,EAAAA,gBAAgB,KACTZ,GAAiBJ,GAAee,GAErCX,EAAaa,eAAejB,IAC3B,CAACI,EAAcJ,EAAYe,IAEzBA,EAGHG,EAAAA,KAAC,MAAA,IACKhB,EACJiB,MAAO,CACLC,MAAO,GAAGL,EAAeM,eACzBC,OAAQ,GAAGP,EAAeQ,gBAC1BC,SAAU,WACVC,UAAW,aACXC,OAAQ,YACJX,EAAeY,WAAaC,EAAAA,eAAeC,YAAc,CAC3DC,QAAS,OACTC,cAAe,QAInBC,SAAA,CAAAC,EAAAA,IAAC,MAAA,CACCd,MAAO,IACDJ,EAAeY,WAAaC,EAAAA,eAAeC,WAC3C,CACET,MAAOL,EAAemB,aACtBZ,OAAQ,OACRa,WAAY,GAEd,CACEb,OAAQP,EAAemB,aACvBd,MAAO,WAIjBa,EAAAA,IAAC,MAAA,CACCd,MAAO,CACLiB,IAAKrB,EAAesB,QACpBP,QAAS,OACTQ,WAAY,SACZd,SAAU,WACVC,UAAW,gBACPV,EAAeY,WAAaC,EAAAA,eAAeC,WAC3C,CACEE,cAAe,MACfQ,UAAW,QAEb,CACER,cAAe,SACfS,SAAU,gBAIjBR,SAAAjB,EAAe0B,MAAMC,IAAKC,GACzBV,EAAAA,IAAC,MAAA,CAECd,MAAO,CACLW,QAAS,OACTc,eAAgB,SAChBR,IAAKrB,EAAesB,SAGrBL,SAAAW,EAAKE,YAAYH,IAAKlC,GACrByB,EAAAA,IAAC,MAAA,CAECd,MAAO,CACLC,MAAO,GAAGZ,EAAOsC,iBACjBxB,OAAQ,GAAGd,EAAOuC,mBAGnBf,SAAA/B,EAAW,IACPO,KAPAA,EAAOwC,cATXL,EAAKM,YAAY,OAuB5BhB,EAAAA,IAAC,MAAA,CACCd,MAAO,IACDJ,EAAeY,WAAaC,EAAAA,eAAeC,WAC3C,CACET,MAAOL,EAAemC,WACtB5B,OAAQ,OACRa,WAAY,GAEd,CACEb,OAAQP,EAAemC,WACvB9B,MAAO,cApFO,IA0F9B,oBDnH0BpB,IACxB,MAAMmD,SAAEA,GAAarD,KACdsD,EAAaC,GAAkB9C,EAAAA,SAAS,IACxC+C,EAAYC,GAAiBhD,EAAAA,SAAS,GAiB7C,OAfAG,EAAAA,UAAU,KACR,IAAKyC,IAAanD,EAAY,OAE9B,MAAMwD,EAAQL,EAASM,YAAYzD,GAInC,OAHAqD,EAAeG,EAAME,kBACrBH,EAAcC,EAAMG,iBAEbR,EAASS,aAAcC,IACxBA,EAAM7D,aAAeA,IACvBqD,EAAeQ,EAAMb,YACrBO,EAAcM,EAAMP,gBAGvB,CAACH,EAAUnD,IAEP,CAELmD,UAAU,MAAAA,OAAA,EAAAA,EAAUM,YAAYzD,KAAe,KAC/C8D,MAAO,CACLV,cACAE"}
+{"version":3,"file":"index.cjs","sources":["../../src/shared/hooks/use-scroll.ts","../../src/shared/components/scroller.tsx"],"sourcesContent":["import { useState, useEffect } from '@framework';\nimport { useCapability, usePlugin } from '@embedpdf/core/@framework';\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\nexport const useScroll = (documentId: string): UseScrollReturn => {\n  const { provides } = useScrollCapability();\n  const [currentPage, setCurrentPage] = useState(1);\n  const [totalPages, setTotalPages] = useState(1);\n\n  useEffect(() => {\n    if (!provides || !documentId) return;\n\n    const scope = provides.forDocument(documentId);\n    setCurrentPage(scope.getCurrentPage());\n    setTotalPages(scope.getTotalPages());\n\n    return provides.onPageChange((event) => {\n      if (event.documentId === documentId) {\n        setCurrentPage(event.pageNumber);\n        setTotalPages(event.totalPages);\n      }\n    });\n  }, [provides, documentId]);\n\n  return {\n    // New format (preferred)\n    provides: provides?.forDocument(documentId) ?? null,\n    state: {\n      currentPage,\n      totalPages,\n    },\n  };\n};\n","import { ReactNode, useEffect, useState, HTMLAttributes, useLayoutEffect } from '@framework';\nimport { ScrollStrategy, ScrollerLayout, PageLayout } from '@embedpdf/plugin-scroll';\n\nimport { useScrollPlugin } from '../hooks';\n\ntype ScrollerProps = HTMLAttributes<HTMLDivElement> & {\n  documentId: string;\n  renderPage: (props: PageLayout) => ReactNode;\n};\n\nexport function Scroller({ documentId, renderPage, ...props }: ScrollerProps) {\n  const { plugin: scrollPlugin } = useScrollPlugin();\n  const [layoutData, setLayoutData] = useState<{\n    layout: ScrollerLayout | null;\n    docId: string | null;\n  }>({ layout: null, docId: null });\n\n  useEffect(() => {\n    if (!scrollPlugin || !documentId) return;\n\n    // When we get new data, store it along with the current documentId\n    const unsubscribe = scrollPlugin.onScrollerData(documentId, (newLayout) => {\n      setLayoutData({ layout: newLayout, docId: documentId });\n    });\n\n    // When the component unmounts or documentId changes, clear the state\n    return () => {\n      unsubscribe();\n      setLayoutData({ layout: null, docId: null });\n      scrollPlugin.clearLayoutReady(documentId);\n    };\n  }, [scrollPlugin, documentId]);\n\n  const scrollerLayout = layoutData.docId === documentId ? layoutData.layout : null;\n\n  useLayoutEffect(() => {\n    if (!scrollPlugin || !documentId || !scrollerLayout) return;\n\n    scrollPlugin.setLayoutReady(documentId);\n  }, [scrollPlugin, documentId, scrollerLayout]);\n\n  if (!scrollerLayout) return null;\n\n  return (\n    <div\n      {...props}\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    >\n      <div\n        style={{\n          ...(scrollerLayout.strategy === ScrollStrategy.Horizontal\n            ? {\n                width: scrollerLayout.startSpacing,\n                height: '100%',\n                flexShrink: 0,\n              }\n            : {\n                height: scrollerLayout.startSpacing,\n                width: '100%',\n              }),\n        }}\n      />\n      <div\n        style={{\n          gap: scrollerLayout.pageGap,\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        {scrollerLayout.items.map((item) => (\n          <div\n            key={item.pageNumbers[0]}\n            style={{\n              display: 'flex',\n              justifyContent: 'center',\n              gap: scrollerLayout.pageGap,\n            }}\n          >\n            {item.pageLayouts.map((layout) => (\n              <div\n                key={layout.pageNumber}\n                style={{\n                  width: `${layout.rotatedWidth}px`,\n                  height: `${layout.rotatedHeight}px`,\n                  position: 'relative',\n                  zIndex: layout.elevated ? 1 : undefined,\n                }}\n              >\n                {renderPage({\n                  ...layout,\n                })}\n              </div>\n            ))}\n          </div>\n        ))}\n      </div>\n      <div\n        style={{\n          ...(scrollerLayout.strategy === ScrollStrategy.Horizontal\n            ? {\n                width: scrollerLayout.endSpacing,\n                height: '100%',\n                flexShrink: 0,\n              }\n            : {\n                height: scrollerLayout.endSpacing,\n                width: '100%',\n              }),\n        }}\n      />\n    </div>\n  );\n}\n"],"names":["useScrollPlugin","usePlugin","ScrollPlugin","id","useScrollCapability","useCapability","documentId","renderPage","props","plugin","scrollPlugin","layoutData","setLayoutData","useState","layout","docId","useEffect","unsubscribe","onScrollerData","newLayout","clearLayoutReady","scrollerLayout","useLayoutEffect","setLayoutReady","jsxs","style","width","totalWidth","height","totalHeight","position","boxSizing","margin","strategy","ScrollStrategy","Horizontal","display","flexDirection","children","jsx","startSpacing","flexShrink","gap","pageGap","alignItems","minHeight","minWidth","items","map","item","justifyContent","pageLayouts","rotatedWidth","rotatedHeight","zIndex","elevated","pageNumber","pageNumbers","endSpacing","provides","currentPage","setCurrentPage","totalPages","setTotalPages","scope","forDocument","getCurrentPage","getTotalPages","onPageChange","event","state"],"mappings":"0OAIaA,EAAkB,IAAMC,YAAwBC,EAAAA,aAAaC,IAC7DC,EAAsB,IAAMC,gBAA4BH,EAAAA,aAAaC,qBCK3E,UAAkBG,WAAEA,EAAAC,WAAYA,KAAeC,IACpD,MAAQC,OAAQC,GAAiBV,KAC1BW,EAAYC,GAAiBC,EAAAA,SAGjC,CAAEC,OAAQ,KAAMC,MAAO,OAE1BC,EAAAA,UAAU,KACR,IAAKN,IAAiBJ,EAAY,OAGlC,MAAMW,EAAcP,EAAaQ,eAAeZ,EAAaa,IAC3DP,EAAc,CAAEE,OAAQK,EAAWJ,MAAOT,MAI5C,MAAO,KACLW,IACAL,EAAc,CAAEE,OAAQ,KAAMC,MAAO,OACrCL,EAAaU,iBAAiBd,KAE/B,CAACI,EAAcJ,IAElB,MAAMe,EAAiBV,EAAWI,QAAUT,EAAaK,EAAWG,OAAS,KAQ7E,OANAQ,EAAAA,gBAAgB,KACTZ,GAAiBJ,GAAee,GAErCX,EAAaa,eAAejB,IAC3B,CAACI,EAAcJ,EAAYe,IAEzBA,EAGHG,EAAAA,KAAC,MAAA,IACKhB,EACJiB,MAAO,CACLC,MAAO,GAAGL,EAAeM,eACzBC,OAAQ,GAAGP,EAAeQ,gBAC1BC,SAAU,WACVC,UAAW,aACXC,OAAQ,YACJX,EAAeY,WAAaC,EAAAA,eAAeC,YAAc,CAC3DC,QAAS,OACTC,cAAe,QAInBC,SAAA,CAAAC,EAAAA,IAAC,MAAA,CACCd,MAAO,IACDJ,EAAeY,WAAaC,EAAAA,eAAeC,WAC3C,CACET,MAAOL,EAAemB,aACtBZ,OAAQ,OACRa,WAAY,GAEd,CACEb,OAAQP,EAAemB,aACvBd,MAAO,WAIjBa,EAAAA,IAAC,MAAA,CACCd,MAAO,CACLiB,IAAKrB,EAAesB,QACpBP,QAAS,OACTQ,WAAY,SACZd,SAAU,WACVC,UAAW,gBACPV,EAAeY,WAAaC,EAAAA,eAAeC,WAC3C,CACEE,cAAe,MACfQ,UAAW,QAEb,CACER,cAAe,SACfS,SAAU,gBAIjBR,SAAAjB,EAAe0B,MAAMC,IAAKC,GACzBV,EAAAA,IAAC,MAAA,CAECd,MAAO,CACLW,QAAS,OACTc,eAAgB,SAChBR,IAAKrB,EAAesB,SAGrBL,SAAAW,EAAKE,YAAYH,IAAKlC,GACrByB,EAAAA,IAAC,MAAA,CAECd,MAAO,CACLC,MAAO,GAAGZ,EAAOsC,iBACjBxB,OAAQ,GAAGd,EAAOuC,kBAClBvB,SAAU,WACVwB,OAAQxC,EAAOyC,SAAW,OAAI,GAG/BjB,SAAA/B,EAAW,IACPO,KATAA,EAAO0C,cATXP,EAAKQ,YAAY,OAyB5BlB,EAAAA,IAAC,MAAA,CACCd,MAAO,IACDJ,EAAeY,WAAaC,EAAAA,eAAeC,WAC3C,CACET,MAAOL,EAAeqC,WACtB9B,OAAQ,OACRa,WAAY,GAEd,CACEb,OAAQP,EAAeqC,WACvBhC,MAAO,cAtFO,IA4F9B,oBDrH0BpB,IACxB,MAAMqD,SAAEA,GAAavD,KACdwD,EAAaC,GAAkBhD,EAAAA,SAAS,IACxCiD,EAAYC,GAAiBlD,EAAAA,SAAS,GAiB7C,OAfAG,EAAAA,UAAU,KACR,IAAK2C,IAAarD,EAAY,OAE9B,MAAM0D,EAAQL,EAASM,YAAY3D,GAInC,OAHAuD,EAAeG,EAAME,kBACrBH,EAAcC,EAAMG,iBAEbR,EAASS,aAAcC,IACxBA,EAAM/D,aAAeA,IACvBuD,EAAeQ,EAAMb,YACrBO,EAAcM,EAAMP,gBAGvB,CAACH,EAAUrD,IAEP,CAELqD,UAAU,MAAAA,OAAA,EAAAA,EAAUM,YAAY3D,KAAe,KAC/CgE,MAAO,CACLV,cACAE"}

package/dist/preact/index.js

@@ -1,6 +1,6 @@
 import "preact";
 import { useState, useEffect, useLayoutEffect } from "preact/hooks";
-import { usePlugin, useCapability } from "@embedpdf/core/preact";
+import { useCapability, usePlugin } from "@embedpdf/core/preact";
 import { ScrollPlugin, ScrollStrategy } from "@embedpdf/plugin-scroll";
 export * from "@embedpdf/plugin-scroll";
 import { jsxs, jsx } from "preact/jsx-runtime";
@@ -112,7 +112,9 @@ function Scroller({ documentId, renderPage, ...props }) {
                   {
                     style: {
                       width: `${layout.rotatedWidth}px`,
-                      height: `${layout.rotatedHeight}px`
+                      height: `${layout.rotatedHeight}px`,
+                      position: "relative",
+                      zIndex: layout.elevated ? 1 : void 0
                     },
                     children: renderPage({
                       ...layout

package/dist/preact/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/shared/hooks/use-scroll.ts","../../src/shared/components/scroller.tsx"],"sourcesContent":["import { useState, useEffect } from '@framework';\nimport { useCapability, usePlugin } from '@embedpdf/core/@framework';\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\nexport const useScroll = (documentId: string): UseScrollReturn => {\n  const { provides } = useScrollCapability();\n  const [currentPage, setCurrentPage] = useState(1);\n  const [totalPages, setTotalPages] = useState(1);\n\n  useEffect(() => {\n    if (!provides || !documentId) return;\n\n    const scope = provides.forDocument(documentId);\n    setCurrentPage(scope.getCurrentPage());\n    setTotalPages(scope.getTotalPages());\n\n    return provides.onPageChange((event) => {\n      if (event.documentId === documentId) {\n        setCurrentPage(event.pageNumber);\n        setTotalPages(event.totalPages);\n      }\n    });\n  }, [provides, documentId]);\n\n  return {\n    // New format (preferred)\n    provides: provides?.forDocument(documentId) ?? null,\n    state: {\n      currentPage,\n      totalPages,\n    },\n  };\n};\n","import { ReactNode, useEffect, useState, HTMLAttributes, useLayoutEffect } from '@framework';\nimport { ScrollStrategy, ScrollerLayout, PageLayout } from '@embedpdf/plugin-scroll';\n\nimport { useScrollPlugin } from '../hooks';\n\ntype ScrollerProps = HTMLAttributes<HTMLDivElement> & {\n  documentId: string;\n  renderPage: (props: PageLayout) => ReactNode;\n};\n\nexport function Scroller({ documentId, renderPage, ...props }: ScrollerProps) {\n  const { plugin: scrollPlugin } = useScrollPlugin();\n  const [layoutData, setLayoutData] = useState<{\n    layout: ScrollerLayout | null;\n    docId: string | null;\n  }>({ layout: null, docId: null });\n\n  useEffect(() => {\n    if (!scrollPlugin || !documentId) return;\n\n    // When we get new data, store it along with the current documentId\n    const unsubscribe = scrollPlugin.onScrollerData(documentId, (newLayout) => {\n      setLayoutData({ layout: newLayout, docId: documentId });\n    });\n\n    // When the component unmounts or documentId changes, clear the state\n    return () => {\n      unsubscribe();\n      setLayoutData({ layout: null, docId: null });\n      scrollPlugin.clearLayoutReady(documentId);\n    };\n  }, [scrollPlugin, documentId]);\n\n  const scrollerLayout = layoutData.docId === documentId ? layoutData.layout : null;\n\n  useLayoutEffect(() => {\n    if (!scrollPlugin || !documentId || !scrollerLayout) return;\n\n    scrollPlugin.setLayoutReady(documentId);\n  }, [scrollPlugin, documentId, scrollerLayout]);\n\n  if (!scrollerLayout) return null;\n\n  return (\n    <div\n      {...props}\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    >\n      <div\n        style={{\n          ...(scrollerLayout.strategy === ScrollStrategy.Horizontal\n            ? {\n                width: scrollerLayout.startSpacing,\n                height: '100%',\n                flexShrink: 0,\n              }\n            : {\n                height: scrollerLayout.startSpacing,\n                width: '100%',\n              }),\n        }}\n      />\n      <div\n        style={{\n          gap: scrollerLayout.pageGap,\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        {scrollerLayout.items.map((item) => (\n          <div\n            key={item.pageNumbers[0]}\n            style={{\n              display: 'flex',\n              justifyContent: 'center',\n              gap: scrollerLayout.pageGap,\n            }}\n          >\n            {item.pageLayouts.map((layout) => (\n              <div\n                key={layout.pageNumber}\n                style={{\n                  width: `${layout.rotatedWidth}px`,\n                  height: `${layout.rotatedHeight}px`,\n                }}\n              >\n                {renderPage({\n                  ...layout,\n                })}\n              </div>\n            ))}\n          </div>\n        ))}\n      </div>\n      <div\n        style={{\n          ...(scrollerLayout.strategy === ScrollStrategy.Horizontal\n            ? {\n                width: scrollerLayout.endSpacing,\n                height: '100%',\n                flexShrink: 0,\n              }\n            : {\n                height: scrollerLayout.endSpacing,\n                width: '100%',\n              }),\n        }}\n      />\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../src/shared/hooks/use-scroll.ts","../../src/shared/components/scroller.tsx"],"sourcesContent":["import { useState, useEffect } from '@framework';\nimport { useCapability, usePlugin } from '@embedpdf/core/@framework';\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\nexport const useScroll = (documentId: string): UseScrollReturn => {\n  const { provides } = useScrollCapability();\n  const [currentPage, setCurrentPage] = useState(1);\n  const [totalPages, setTotalPages] = useState(1);\n\n  useEffect(() => {\n    if (!provides || !documentId) return;\n\n    const scope = provides.forDocument(documentId);\n    setCurrentPage(scope.getCurrentPage());\n    setTotalPages(scope.getTotalPages());\n\n    return provides.onPageChange((event) => {\n      if (event.documentId === documentId) {\n        setCurrentPage(event.pageNumber);\n        setTotalPages(event.totalPages);\n      }\n    });\n  }, [provides, documentId]);\n\n  return {\n    // New format (preferred)\n    provides: provides?.forDocument(documentId) ?? null,\n    state: {\n      currentPage,\n      totalPages,\n    },\n  };\n};\n","import { ReactNode, useEffect, useState, HTMLAttributes, useLayoutEffect } from '@framework';\nimport { ScrollStrategy, ScrollerLayout, PageLayout } from '@embedpdf/plugin-scroll';\n\nimport { useScrollPlugin } from '../hooks';\n\ntype ScrollerProps = HTMLAttributes<HTMLDivElement> & {\n  documentId: string;\n  renderPage: (props: PageLayout) => ReactNode;\n};\n\nexport function Scroller({ documentId, renderPage, ...props }: ScrollerProps) {\n  const { plugin: scrollPlugin } = useScrollPlugin();\n  const [layoutData, setLayoutData] = useState<{\n    layout: ScrollerLayout | null;\n    docId: string | null;\n  }>({ layout: null, docId: null });\n\n  useEffect(() => {\n    if (!scrollPlugin || !documentId) return;\n\n    // When we get new data, store it along with the current documentId\n    const unsubscribe = scrollPlugin.onScrollerData(documentId, (newLayout) => {\n      setLayoutData({ layout: newLayout, docId: documentId });\n    });\n\n    // When the component unmounts or documentId changes, clear the state\n    return () => {\n      unsubscribe();\n      setLayoutData({ layout: null, docId: null });\n      scrollPlugin.clearLayoutReady(documentId);\n    };\n  }, [scrollPlugin, documentId]);\n\n  const scrollerLayout = layoutData.docId === documentId ? layoutData.layout : null;\n\n  useLayoutEffect(() => {\n    if (!scrollPlugin || !documentId || !scrollerLayout) return;\n\n    scrollPlugin.setLayoutReady(documentId);\n  }, [scrollPlugin, documentId, scrollerLayout]);\n\n  if (!scrollerLayout) return null;\n\n  return (\n    <div\n      {...props}\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    >\n      <div\n        style={{\n          ...(scrollerLayout.strategy === ScrollStrategy.Horizontal\n            ? {\n                width: scrollerLayout.startSpacing,\n                height: '100%',\n                flexShrink: 0,\n              }\n            : {\n                height: scrollerLayout.startSpacing,\n                width: '100%',\n              }),\n        }}\n      />\n      <div\n        style={{\n          gap: scrollerLayout.pageGap,\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        {scrollerLayout.items.map((item) => (\n          <div\n            key={item.pageNumbers[0]}\n            style={{\n              display: 'flex',\n              justifyContent: 'center',\n              gap: scrollerLayout.pageGap,\n            }}\n          >\n            {item.pageLayouts.map((layout) => (\n              <div\n                key={layout.pageNumber}\n                style={{\n                  width: `${layout.rotatedWidth}px`,\n                  height: `${layout.rotatedHeight}px`,\n                  position: 'relative',\n                  zIndex: layout.elevated ? 1 : undefined,\n                }}\n              >\n                {renderPage({\n                  ...layout,\n                })}\n              </div>\n            ))}\n          </div>\n        ))}\n      </div>\n      <div\n        style={{\n          ...(scrollerLayout.strategy === ScrollStrategy.Horizontal\n            ? {\n                width: scrollerLayout.endSpacing,\n                height: '100%',\n                flexShrink: 0,\n              }\n            : {\n                height: scrollerLayout.endSpacing,\n                width: '100%',\n              }),\n        }}\n      />\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/react/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),t=require("@embedpdf/core/react"),r=require("@embedpdf/plugin-scroll"),l=require("react/jsx-runtime"),o=()=>t.usePlugin(r.ScrollPlugin.id),i=()=>t.useCapability(r.ScrollPlugin.id);exports.Scroller=function({documentId:t,renderPage:i,...a}){const{plugin:n}=o(),[s,u]=e.useState({layout:null,docId:null});e.useEffect(()=>{if(!n||!t)return;const e=n.onScrollerData(t,e=>{u({layout:e,docId:t})});return()=>{e(),u({layout:null,docId:null}),n.clearLayoutReady(t)}},[n,t]);const c=s.docId===t?s.layout:null;return e.useLayoutEffect(()=>{n&&t&&c&&n.setLayoutReady(t)},[n,t,c]),c?l.jsxs("div",{...a,style:{width:`${c.totalWidth}px`,height:`${c.totalHeight}px`,position:"relative",boxSizing:"border-box",margin:"0 auto",...c.strategy===r.ScrollStrategy.Horizontal&&{display:"flex",flexDirection:"row"}},children:[l.jsx("div",{style:{...c.strategy===r.ScrollStrategy.Horizontal?{width:c.startSpacing,height:"100%",flexShrink:0}:{height:c.startSpacing,width:"100%"}}}),l.jsx("div",{style:{gap:c.pageGap,display:"flex",alignItems:"center",position:"relative",boxSizing:"border-box",...c.strategy===r.ScrollStrategy.Horizontal?{flexDirection:"row",minHeight:"100%"}:{flexDirection:"column",minWidth:"fit-content"}},children:c.items.map(e=>l.jsx("div",{style:{display:"flex",justifyContent:"center",gap:c.pageGap},children:e.pageLayouts.map(e=>l.jsx("div",{style:{width:`${e.rotatedWidth}px`,height:`${e.rotatedHeight}px`},children:i({...e})},e.pageNumber))},e.pageNumbers[0]))}),l.jsx("div",{style:{...c.strategy===r.ScrollStrategy.Horizontal?{width:c.endSpacing,height:"100%",flexShrink:0}:{height:c.endSpacing,width:"100%"}}})]}):null},exports.useScroll=t=>{const{provides:r}=i(),[l,o]=e.useState(1),[a,n]=e.useState(1);return e.useEffect(()=>{if(!r||!t)return;const e=r.forDocument(t);return o(e.getCurrentPage()),n(e.getTotalPages()),r.onPageChange(e=>{e.documentId===t&&(o(e.pageNumber),n(e.totalPages))})},[r,t]),{provides:(null==r?void 0:r.forDocument(t))??null,state:{currentPage:l,totalPages:a}}},exports.useScrollCapability=i,exports.useScrollPlugin=o,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("react"),t=require("@embedpdf/core/react"),r=require("@embedpdf/plugin-scroll"),l=require("react/jsx-runtime"),o=()=>t.usePlugin(r.ScrollPlugin.id),i=()=>t.useCapability(r.ScrollPlugin.id);exports.Scroller=function({documentId:t,renderPage:i,...a}){const{plugin:n}=o(),[s,u]=e.useState({layout:null,docId:null});e.useEffect(()=>{if(!n||!t)return;const e=n.onScrollerData(t,e=>{u({layout:e,docId:t})});return()=>{e(),u({layout:null,docId:null}),n.clearLayoutReady(t)}},[n,t]);const d=s.docId===t?s.layout:null;return e.useLayoutEffect(()=>{n&&t&&d&&n.setLayoutReady(t)},[n,t,d]),d?l.jsxs("div",{...a,style:{width:`${d.totalWidth}px`,height:`${d.totalHeight}px`,position:"relative",boxSizing:"border-box",margin:"0 auto",...d.strategy===r.ScrollStrategy.Horizontal&&{display:"flex",flexDirection:"row"}},children:[l.jsx("div",{style:{...d.strategy===r.ScrollStrategy.Horizontal?{width:d.startSpacing,height:"100%",flexShrink:0}:{height:d.startSpacing,width:"100%"}}}),l.jsx("div",{style:{gap:d.pageGap,display:"flex",alignItems:"center",position:"relative",boxSizing:"border-box",...d.strategy===r.ScrollStrategy.Horizontal?{flexDirection:"row",minHeight:"100%"}:{flexDirection:"column",minWidth:"fit-content"}},children:d.items.map(e=>l.jsx("div",{style:{display:"flex",justifyContent:"center",gap:d.pageGap},children:e.pageLayouts.map(e=>l.jsx("div",{style:{width:`${e.rotatedWidth}px`,height:`${e.rotatedHeight}px`,position:"relative",zIndex:e.elevated?1:void 0},children:i({...e})},e.pageNumber))},e.pageNumbers[0]))}),l.jsx("div",{style:{...d.strategy===r.ScrollStrategy.Horizontal?{width:d.endSpacing,height:"100%",flexShrink:0}:{height:d.endSpacing,width:"100%"}}})]}):null},exports.useScroll=t=>{const{provides:r}=i(),[l,o]=e.useState(1),[a,n]=e.useState(1);return e.useEffect(()=>{if(!r||!t)return;const e=r.forDocument(t);return o(e.getCurrentPage()),n(e.getTotalPages()),r.onPageChange(e=>{e.documentId===t&&(o(e.pageNumber),n(e.totalPages))})},[r,t]),{provides:(null==r?void 0:r.forDocument(t))??null,state:{currentPage:l,totalPages:a}}},exports.useScrollCapability=i,exports.useScrollPlugin=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/react/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../src/shared/hooks/use-scroll.ts","../../src/shared/components/scroller.tsx"],"sourcesContent":["import { useState, useEffect } from '@framework';\nimport { useCapability, usePlugin } from '@embedpdf/core/@framework';\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\nexport const useScroll = (documentId: string): UseScrollReturn => {\n  const { provides } = useScrollCapability();\n  const [currentPage, setCurrentPage] = useState(1);\n  const [totalPages, setTotalPages] = useState(1);\n\n  useEffect(() => {\n    if (!provides || !documentId) return;\n\n    const scope = provides.forDocument(documentId);\n    setCurrentPage(scope.getCurrentPage());\n    setTotalPages(scope.getTotalPages());\n\n    return provides.onPageChange((event) => {\n      if (event.documentId === documentId) {\n        setCurrentPage(event.pageNumber);\n        setTotalPages(event.totalPages);\n      }\n    });\n  }, [provides, documentId]);\n\n  return {\n    // New format (preferred)\n    provides: provides?.forDocument(documentId) ?? null,\n    state: {\n      currentPage,\n      totalPages,\n    },\n  };\n};\n","import { ReactNode, useEffect, useState, HTMLAttributes, useLayoutEffect } from '@framework';\nimport { ScrollStrategy, ScrollerLayout, PageLayout } from '@embedpdf/plugin-scroll';\n\nimport { useScrollPlugin } from '../hooks';\n\ntype ScrollerProps = HTMLAttributes<HTMLDivElement> & {\n  documentId: string;\n  renderPage: (props: PageLayout) => ReactNode;\n};\n\nexport function Scroller({ documentId, renderPage, ...props }: ScrollerProps) {\n  const { plugin: scrollPlugin } = useScrollPlugin();\n  const [layoutData, setLayoutData] = useState<{\n    layout: ScrollerLayout | null;\n    docId: string | null;\n  }>({ layout: null, docId: null });\n\n  useEffect(() => {\n    if (!scrollPlugin || !documentId) return;\n\n    // When we get new data, store it along with the current documentId\n    const unsubscribe = scrollPlugin.onScrollerData(documentId, (newLayout) => {\n      setLayoutData({ layout: newLayout, docId: documentId });\n    });\n\n    // When the component unmounts or documentId changes, clear the state\n    return () => {\n      unsubscribe();\n      setLayoutData({ layout: null, docId: null });\n      scrollPlugin.clearLayoutReady(documentId);\n    };\n  }, [scrollPlugin, documentId]);\n\n  const scrollerLayout = layoutData.docId === documentId ? layoutData.layout : null;\n\n  useLayoutEffect(() => {\n    if (!scrollPlugin || !documentId || !scrollerLayout) return;\n\n    scrollPlugin.setLayoutReady(documentId);\n  }, [scrollPlugin, documentId, scrollerLayout]);\n\n  if (!scrollerLayout) return null;\n\n  return (\n    <div\n      {...props}\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    >\n      <div\n        style={{\n          ...(scrollerLayout.strategy === ScrollStrategy.Horizontal\n            ? {\n                width: scrollerLayout.startSpacing,\n                height: '100%',\n                flexShrink: 0,\n              }\n            : {\n                height: scrollerLayout.startSpacing,\n                width: '100%',\n              }),\n        }}\n      />\n      <div\n        style={{\n          gap: scrollerLayout.pageGap,\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        {scrollerLayout.items.map((item) => (\n          <div\n            key={item.pageNumbers[0]}\n            style={{\n              display: 'flex',\n              justifyContent: 'center',\n              gap: scrollerLayout.pageGap,\n            }}\n          >\n            {item.pageLayouts.map((layout) => (\n              <div\n                key={layout.pageNumber}\n                style={{\n                  width: `${layout.rotatedWidth}px`,\n                  height: `${layout.rotatedHeight}px`,\n                }}\n              >\n                {renderPage({\n                  ...layout,\n                })}\n              </div>\n            ))}\n          </div>\n        ))}\n      </div>\n      <div\n        style={{\n          ...(scrollerLayout.strategy === ScrollStrategy.Horizontal\n            ? {\n                width: scrollerLayout.endSpacing,\n                height: '100%',\n                flexShrink: 0,\n              }\n            : {\n                height: scrollerLayout.endSpacing,\n                width: '100%',\n              }),\n        }}\n      />\n    </div>\n  );\n}\n"],"names":["useScrollPlugin","usePlugin","ScrollPlugin","id","useScrollCapability","useCapability","documentId","renderPage","props","plugin","scrollPlugin","layoutData","setLayoutData","useState","layout","docId","useEffect","unsubscribe","onScrollerData","newLayout","clearLayoutReady","scrollerLayout","useLayoutEffect","setLayoutReady","jsxs","style","width","totalWidth","height","totalHeight","position","boxSizing","margin","strategy","ScrollStrategy","Horizontal","display","flexDirection","children","jsx","startSpacing","flexShrink","gap","pageGap","alignItems","minHeight","minWidth","items","map","item","justifyContent","pageLayouts","rotatedWidth","rotatedHeight","pageNumber","pageNumbers","endSpacing","provides","currentPage","setCurrentPage","totalPages","setTotalPages","scope","forDocument","getCurrentPage","getTotalPages","onPageChange","event","state"],"mappings":"+MAIaA,EAAkB,IAAMC,YAAwBC,EAAAA,aAAaC,IAC7DC,EAAsB,IAAMC,gBAA4BH,EAAAA,aAAaC,qBCK3E,UAAkBG,WAAEA,EAAAC,WAAYA,KAAeC,IACpD,MAAQC,OAAQC,GAAiBV,KAC1BW,EAAYC,GAAiBC,EAAAA,SAGjC,CAAEC,OAAQ,KAAMC,MAAO,OAE1BC,EAAAA,UAAU,KACR,IAAKN,IAAiBJ,EAAY,OAGlC,MAAMW,EAAcP,EAAaQ,eAAeZ,EAAaa,IAC3DP,EAAc,CAAEE,OAAQK,EAAWJ,MAAOT,MAI5C,MAAO,KACLW,IACAL,EAAc,CAAEE,OAAQ,KAAMC,MAAO,OACrCL,EAAaU,iBAAiBd,KAE/B,CAACI,EAAcJ,IAElB,MAAMe,EAAiBV,EAAWI,QAAUT,EAAaK,EAAWG,OAAS,KAQ7E,OANAQ,EAAAA,gBAAgB,KACTZ,GAAiBJ,GAAee,GAErCX,EAAaa,eAAejB,IAC3B,CAACI,EAAcJ,EAAYe,IAEzBA,EAGHG,EAAAA,KAAC,MAAA,IACKhB,EACJiB,MAAO,CACLC,MAAO,GAAGL,EAAeM,eACzBC,OAAQ,GAAGP,EAAeQ,gBAC1BC,SAAU,WACVC,UAAW,aACXC,OAAQ,YACJX,EAAeY,WAAaC,EAAAA,eAAeC,YAAc,CAC3DC,QAAS,OACTC,cAAe,QAInBC,SAAA,CAAAC,EAAAA,IAAC,MAAA,CACCd,MAAO,IACDJ,EAAeY,WAAaC,EAAAA,eAAeC,WAC3C,CACET,MAAOL,EAAemB,aACtBZ,OAAQ,OACRa,WAAY,GAEd,CACEb,OAAQP,EAAemB,aACvBd,MAAO,WAIjBa,EAAAA,IAAC,MAAA,CACCd,MAAO,CACLiB,IAAKrB,EAAesB,QACpBP,QAAS,OACTQ,WAAY,SACZd,SAAU,WACVC,UAAW,gBACPV,EAAeY,WAAaC,EAAAA,eAAeC,WAC3C,CACEE,cAAe,MACfQ,UAAW,QAEb,CACER,cAAe,SACfS,SAAU,gBAIjBR,SAAAjB,EAAe0B,MAAMC,IAAKC,GACzBV,EAAAA,IAAC,MAAA,CAECd,MAAO,CACLW,QAAS,OACTc,eAAgB,SAChBR,IAAKrB,EAAesB,SAGrBL,SAAAW,EAAKE,YAAYH,IAAKlC,GACrByB,EAAAA,IAAC,MAAA,CAECd,MAAO,CACLC,MAAO,GAAGZ,EAAOsC,iBACjBxB,OAAQ,GAAGd,EAAOuC,mBAGnBf,SAAA/B,EAAW,IACPO,KAPAA,EAAOwC,cATXL,EAAKM,YAAY,OAuB5BhB,EAAAA,IAAC,MAAA,CACCd,MAAO,IACDJ,EAAeY,WAAaC,EAAAA,eAAeC,WAC3C,CACET,MAAOL,EAAemC,WACtB5B,OAAQ,OACRa,WAAY,GAEd,CACEb,OAAQP,EAAemC,WACvB9B,MAAO,cApFO,IA0F9B,oBDnH0BpB,IACxB,MAAMmD,SAAEA,GAAarD,KACdsD,EAAaC,GAAkB9C,EAAAA,SAAS,IACxC+C,EAAYC,GAAiBhD,EAAAA,SAAS,GAiB7C,OAfAG,EAAAA,UAAU,KACR,IAAKyC,IAAanD,EAAY,OAE9B,MAAMwD,EAAQL,EAASM,YAAYzD,GAInC,OAHAqD,EAAeG,EAAME,kBACrBH,EAAcC,EAAMG,iBAEbR,EAASS,aAAcC,IACxBA,EAAM7D,aAAeA,IACvBqD,EAAeQ,EAAMb,YACrBO,EAAcM,EAAMP,gBAGvB,CAACH,EAAUnD,IAEP,CAELmD,UAAU,MAAAA,OAAA,EAAAA,EAAUM,YAAYzD,KAAe,KAC/C8D,MAAO,CACLV,cACAE"}
+{"version":3,"file":"index.cjs","sources":["../../src/shared/hooks/use-scroll.ts","../../src/shared/components/scroller.tsx"],"sourcesContent":["import { useState, useEffect } from '@framework';\nimport { useCapability, usePlugin } from '@embedpdf/core/@framework';\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\nexport const useScroll = (documentId: string): UseScrollReturn => {\n  const { provides } = useScrollCapability();\n  const [currentPage, setCurrentPage] = useState(1);\n  const [totalPages, setTotalPages] = useState(1);\n\n  useEffect(() => {\n    if (!provides || !documentId) return;\n\n    const scope = provides.forDocument(documentId);\n    setCurrentPage(scope.getCurrentPage());\n    setTotalPages(scope.getTotalPages());\n\n    return provides.onPageChange((event) => {\n      if (event.documentId === documentId) {\n        setCurrentPage(event.pageNumber);\n        setTotalPages(event.totalPages);\n      }\n    });\n  }, [provides, documentId]);\n\n  return {\n    // New format (preferred)\n    provides: provides?.forDocument(documentId) ?? null,\n    state: {\n      currentPage,\n      totalPages,\n    },\n  };\n};\n","import { ReactNode, useEffect, useState, HTMLAttributes, useLayoutEffect } from '@framework';\nimport { ScrollStrategy, ScrollerLayout, PageLayout } from '@embedpdf/plugin-scroll';\n\nimport { useScrollPlugin } from '../hooks';\n\ntype ScrollerProps = HTMLAttributes<HTMLDivElement> & {\n  documentId: string;\n  renderPage: (props: PageLayout) => ReactNode;\n};\n\nexport function Scroller({ documentId, renderPage, ...props }: ScrollerProps) {\n  const { plugin: scrollPlugin } = useScrollPlugin();\n  const [layoutData, setLayoutData] = useState<{\n    layout: ScrollerLayout | null;\n    docId: string | null;\n  }>({ layout: null, docId: null });\n\n  useEffect(() => {\n    if (!scrollPlugin || !documentId) return;\n\n    // When we get new data, store it along with the current documentId\n    const unsubscribe = scrollPlugin.onScrollerData(documentId, (newLayout) => {\n      setLayoutData({ layout: newLayout, docId: documentId });\n    });\n\n    // When the component unmounts or documentId changes, clear the state\n    return () => {\n      unsubscribe();\n      setLayoutData({ layout: null, docId: null });\n      scrollPlugin.clearLayoutReady(documentId);\n    };\n  }, [scrollPlugin, documentId]);\n\n  const scrollerLayout = layoutData.docId === documentId ? layoutData.layout : null;\n\n  useLayoutEffect(() => {\n    if (!scrollPlugin || !documentId || !scrollerLayout) return;\n\n    scrollPlugin.setLayoutReady(documentId);\n  }, [scrollPlugin, documentId, scrollerLayout]);\n\n  if (!scrollerLayout) return null;\n\n  return (\n    <div\n      {...props}\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    >\n      <div\n        style={{\n          ...(scrollerLayout.strategy === ScrollStrategy.Horizontal\n            ? {\n                width: scrollerLayout.startSpacing,\n                height: '100%',\n                flexShrink: 0,\n              }\n            : {\n                height: scrollerLayout.startSpacing,\n                width: '100%',\n              }),\n        }}\n      />\n      <div\n        style={{\n          gap: scrollerLayout.pageGap,\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        {scrollerLayout.items.map((item) => (\n          <div\n            key={item.pageNumbers[0]}\n            style={{\n              display: 'flex',\n              justifyContent: 'center',\n              gap: scrollerLayout.pageGap,\n            }}\n          >\n            {item.pageLayouts.map((layout) => (\n              <div\n                key={layout.pageNumber}\n                style={{\n                  width: `${layout.rotatedWidth}px`,\n                  height: `${layout.rotatedHeight}px`,\n                  position: 'relative',\n                  zIndex: layout.elevated ? 1 : undefined,\n                }}\n              >\n                {renderPage({\n                  ...layout,\n                })}\n              </div>\n            ))}\n          </div>\n        ))}\n      </div>\n      <div\n        style={{\n          ...(scrollerLayout.strategy === ScrollStrategy.Horizontal\n            ? {\n                width: scrollerLayout.endSpacing,\n                height: '100%',\n                flexShrink: 0,\n              }\n            : {\n                height: scrollerLayout.endSpacing,\n                width: '100%',\n              }),\n        }}\n      />\n    </div>\n  );\n}\n"],"names":["useScrollPlugin","usePlugin","ScrollPlugin","id","useScrollCapability","useCapability","documentId","renderPage","props","plugin","scrollPlugin","layoutData","setLayoutData","useState","layout","docId","useEffect","unsubscribe","onScrollerData","newLayout","clearLayoutReady","scrollerLayout","useLayoutEffect","setLayoutReady","jsxs","style","width","totalWidth","height","totalHeight","position","boxSizing","margin","strategy","ScrollStrategy","Horizontal","display","flexDirection","children","jsx","startSpacing","flexShrink","gap","pageGap","alignItems","minHeight","minWidth","items","map","item","justifyContent","pageLayouts","rotatedWidth","rotatedHeight","zIndex","elevated","pageNumber","pageNumbers","endSpacing","provides","currentPage","setCurrentPage","totalPages","setTotalPages","scope","forDocument","getCurrentPage","getTotalPages","onPageChange","event","state"],"mappings":"+MAIaA,EAAkB,IAAMC,YAAwBC,EAAAA,aAAaC,IAC7DC,EAAsB,IAAMC,gBAA4BH,EAAAA,aAAaC,qBCK3E,UAAkBG,WAAEA,EAAAC,WAAYA,KAAeC,IACpD,MAAQC,OAAQC,GAAiBV,KAC1BW,EAAYC,GAAiBC,EAAAA,SAGjC,CAAEC,OAAQ,KAAMC,MAAO,OAE1BC,EAAAA,UAAU,KACR,IAAKN,IAAiBJ,EAAY,OAGlC,MAAMW,EAAcP,EAAaQ,eAAeZ,EAAaa,IAC3DP,EAAc,CAAEE,OAAQK,EAAWJ,MAAOT,MAI5C,MAAO,KACLW,IACAL,EAAc,CAAEE,OAAQ,KAAMC,MAAO,OACrCL,EAAaU,iBAAiBd,KAE/B,CAACI,EAAcJ,IAElB,MAAMe,EAAiBV,EAAWI,QAAUT,EAAaK,EAAWG,OAAS,KAQ7E,OANAQ,EAAAA,gBAAgB,KACTZ,GAAiBJ,GAAee,GAErCX,EAAaa,eAAejB,IAC3B,CAACI,EAAcJ,EAAYe,IAEzBA,EAGHG,EAAAA,KAAC,MAAA,IACKhB,EACJiB,MAAO,CACLC,MAAO,GAAGL,EAAeM,eACzBC,OAAQ,GAAGP,EAAeQ,gBAC1BC,SAAU,WACVC,UAAW,aACXC,OAAQ,YACJX,EAAeY,WAAaC,EAAAA,eAAeC,YAAc,CAC3DC,QAAS,OACTC,cAAe,QAInBC,SAAA,CAAAC,EAAAA,IAAC,MAAA,CACCd,MAAO,IACDJ,EAAeY,WAAaC,EAAAA,eAAeC,WAC3C,CACET,MAAOL,EAAemB,aACtBZ,OAAQ,OACRa,WAAY,GAEd,CACEb,OAAQP,EAAemB,aACvBd,MAAO,WAIjBa,EAAAA,IAAC,MAAA,CACCd,MAAO,CACLiB,IAAKrB,EAAesB,QACpBP,QAAS,OACTQ,WAAY,SACZd,SAAU,WACVC,UAAW,gBACPV,EAAeY,WAAaC,EAAAA,eAAeC,WAC3C,CACEE,cAAe,MACfQ,UAAW,QAEb,CACER,cAAe,SACfS,SAAU,gBAIjBR,SAAAjB,EAAe0B,MAAMC,IAAKC,GACzBV,EAAAA,IAAC,MAAA,CAECd,MAAO,CACLW,QAAS,OACTc,eAAgB,SAChBR,IAAKrB,EAAesB,SAGrBL,SAAAW,EAAKE,YAAYH,IAAKlC,GACrByB,EAAAA,IAAC,MAAA,CAECd,MAAO,CACLC,MAAO,GAAGZ,EAAOsC,iBACjBxB,OAAQ,GAAGd,EAAOuC,kBAClBvB,SAAU,WACVwB,OAAQxC,EAAOyC,SAAW,OAAI,GAG/BjB,SAAA/B,EAAW,IACPO,KATAA,EAAO0C,cATXP,EAAKQ,YAAY,OAyB5BlB,EAAAA,IAAC,MAAA,CACCd,MAAO,IACDJ,EAAeY,WAAaC,EAAAA,eAAeC,WAC3C,CACET,MAAOL,EAAeqC,WACtB9B,OAAQ,OACRa,WAAY,GAEd,CACEb,OAAQP,EAAeqC,WACvBhC,MAAO,cAtFO,IA4F9B,oBDrH0BpB,IACxB,MAAMqD,SAAEA,GAAavD,KACdwD,EAAaC,GAAkBhD,EAAAA,SAAS,IACxCiD,EAAYC,GAAiBlD,EAAAA,SAAS,GAiB7C,OAfAG,EAAAA,UAAU,KACR,IAAK2C,IAAarD,EAAY,OAE9B,MAAM0D,EAAQL,EAASM,YAAY3D,GAInC,OAHAuD,EAAeG,EAAME,kBACrBH,EAAcC,EAAMG,iBAEbR,EAASS,aAAcC,IACxBA,EAAM/D,aAAeA,IACvBuD,EAAeQ,EAAMb,YACrBO,EAAcM,EAAMP,gBAGvB,CAACH,EAAUrD,IAEP,CAELqD,UAAU,MAAAA,OAAA,EAAAA,EAAUM,YAAY3D,KAAe,KAC/CgE,MAAO,CACLV,cACAE"}

package/dist/react/index.js

@@ -1,5 +1,5 @@
 import { useState, useEffect, useLayoutEffect } from "react";
-import { usePlugin, useCapability } from "@embedpdf/core/react";
+import { useCapability, usePlugin } from "@embedpdf/core/react";
 import { ScrollPlugin, ScrollStrategy } from "@embedpdf/plugin-scroll";
 export * from "@embedpdf/plugin-scroll";
 import { jsxs, jsx } from "react/jsx-runtime";
@@ -111,7 +111,9 @@ function Scroller({ documentId, renderPage, ...props }) {
                   {
                     style: {
                       width: `${layout.rotatedWidth}px`,
-                      height: `${layout.rotatedHeight}px`
+                      height: `${layout.rotatedHeight}px`,
+                      position: "relative",
+                      zIndex: layout.elevated ? 1 : void 0
                     },
                     children: renderPage({
                       ...layout

package/dist/react/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/shared/hooks/use-scroll.ts","../../src/shared/components/scroller.tsx"],"sourcesContent":["import { useState, useEffect } from '@framework';\nimport { useCapability, usePlugin } from '@embedpdf/core/@framework';\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\nexport const useScroll = (documentId: string): UseScrollReturn => {\n  const { provides } = useScrollCapability();\n  const [currentPage, setCurrentPage] = useState(1);\n  const [totalPages, setTotalPages] = useState(1);\n\n  useEffect(() => {\n    if (!provides || !documentId) return;\n\n    const scope = provides.forDocument(documentId);\n    setCurrentPage(scope.getCurrentPage());\n    setTotalPages(scope.getTotalPages());\n\n    return provides.onPageChange((event) => {\n      if (event.documentId === documentId) {\n        setCurrentPage(event.pageNumber);\n        setTotalPages(event.totalPages);\n      }\n    });\n  }, [provides, documentId]);\n\n  return {\n    // New format (preferred)\n    provides: provides?.forDocument(documentId) ?? null,\n    state: {\n      currentPage,\n      totalPages,\n    },\n  };\n};\n","import { ReactNode, useEffect, useState, HTMLAttributes, useLayoutEffect } from '@framework';\nimport { ScrollStrategy, ScrollerLayout, PageLayout } from '@embedpdf/plugin-scroll';\n\nimport { useScrollPlugin } from '../hooks';\n\ntype ScrollerProps = HTMLAttributes<HTMLDivElement> & {\n  documentId: string;\n  renderPage: (props: PageLayout) => ReactNode;\n};\n\nexport function Scroller({ documentId, renderPage, ...props }: ScrollerProps) {\n  const { plugin: scrollPlugin } = useScrollPlugin();\n  const [layoutData, setLayoutData] = useState<{\n    layout: ScrollerLayout | null;\n    docId: string | null;\n  }>({ layout: null, docId: null });\n\n  useEffect(() => {\n    if (!scrollPlugin || !documentId) return;\n\n    // When we get new data, store it along with the current documentId\n    const unsubscribe = scrollPlugin.onScrollerData(documentId, (newLayout) => {\n      setLayoutData({ layout: newLayout, docId: documentId });\n    });\n\n    // When the component unmounts or documentId changes, clear the state\n    return () => {\n      unsubscribe();\n      setLayoutData({ layout: null, docId: null });\n      scrollPlugin.clearLayoutReady(documentId);\n    };\n  }, [scrollPlugin, documentId]);\n\n  const scrollerLayout = layoutData.docId === documentId ? layoutData.layout : null;\n\n  useLayoutEffect(() => {\n    if (!scrollPlugin || !documentId || !scrollerLayout) return;\n\n    scrollPlugin.setLayoutReady(documentId);\n  }, [scrollPlugin, documentId, scrollerLayout]);\n\n  if (!scrollerLayout) return null;\n\n  return (\n    <div\n      {...props}\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    >\n      <div\n        style={{\n          ...(scrollerLayout.strategy === ScrollStrategy.Horizontal\n            ? {\n                width: scrollerLayout.startSpacing,\n                height: '100%',\n                flexShrink: 0,\n              }\n            : {\n                height: scrollerLayout.startSpacing,\n                width: '100%',\n              }),\n        }}\n      />\n      <div\n        style={{\n          gap: scrollerLayout.pageGap,\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        {scrollerLayout.items.map((item) => (\n          <div\n            key={item.pageNumbers[0]}\n            style={{\n              display: 'flex',\n              justifyContent: 'center',\n              gap: scrollerLayout.pageGap,\n            }}\n          >\n            {item.pageLayouts.map((layout) => (\n              <div\n                key={layout.pageNumber}\n                style={{\n                  width: `${layout.rotatedWidth}px`,\n                  height: `${layout.rotatedHeight}px`,\n                }}\n              >\n                {renderPage({\n                  ...layout,\n                })}\n              </div>\n            ))}\n          </div>\n        ))}\n      </div>\n      <div\n        style={{\n          ...(scrollerLayout.strategy === ScrollStrategy.Horizontal\n            ? {\n                width: scrollerLayout.endSpacing,\n                height: '100%',\n                flexShrink: 0,\n              }\n            : {\n                height: scrollerLayout.endSpacing,\n                width: '100%',\n              }),\n        }}\n      />\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../src/shared/hooks/use-scroll.ts","../../src/shared/components/scroller.tsx"],"sourcesContent":["import { useState, useEffect } from '@framework';\nimport { useCapability, usePlugin } from '@embedpdf/core/@framework';\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\nexport const useScroll = (documentId: string): UseScrollReturn => {\n  const { provides } = useScrollCapability();\n  const [currentPage, setCurrentPage] = useState(1);\n  const [totalPages, setTotalPages] = useState(1);\n\n  useEffect(() => {\n    if (!provides || !documentId) return;\n\n    const scope = provides.forDocument(documentId);\n    setCurrentPage(scope.getCurrentPage());\n    setTotalPages(scope.getTotalPages());\n\n    return provides.onPageChange((event) => {\n      if (event.documentId === documentId) {\n        setCurrentPage(event.pageNumber);\n        setTotalPages(event.totalPages);\n      }\n    });\n  }, [provides, documentId]);\n\n  return {\n    // New format (preferred)\n    provides: provides?.forDocument(documentId) ?? null,\n    state: {\n      currentPage,\n      totalPages,\n    },\n  };\n};\n","import { ReactNode, useEffect, useState, HTMLAttributes, useLayoutEffect } from '@framework';\nimport { ScrollStrategy, ScrollerLayout, PageLayout } from '@embedpdf/plugin-scroll';\n\nimport { useScrollPlugin } from '../hooks';\n\ntype ScrollerProps = HTMLAttributes<HTMLDivElement> & {\n  documentId: string;\n  renderPage: (props: PageLayout) => ReactNode;\n};\n\nexport function Scroller({ documentId, renderPage, ...props }: ScrollerProps) {\n  const { plugin: scrollPlugin } = useScrollPlugin();\n  const [layoutData, setLayoutData] = useState<{\n    layout: ScrollerLayout | null;\n    docId: string | null;\n  }>({ layout: null, docId: null });\n\n  useEffect(() => {\n    if (!scrollPlugin || !documentId) return;\n\n    // When we get new data, store it along with the current documentId\n    const unsubscribe = scrollPlugin.onScrollerData(documentId, (newLayout) => {\n      setLayoutData({ layout: newLayout, docId: documentId });\n    });\n\n    // When the component unmounts or documentId changes, clear the state\n    return () => {\n      unsubscribe();\n      setLayoutData({ layout: null, docId: null });\n      scrollPlugin.clearLayoutReady(documentId);\n    };\n  }, [scrollPlugin, documentId]);\n\n  const scrollerLayout = layoutData.docId === documentId ? layoutData.layout : null;\n\n  useLayoutEffect(() => {\n    if (!scrollPlugin || !documentId || !scrollerLayout) return;\n\n    scrollPlugin.setLayoutReady(documentId);\n  }, [scrollPlugin, documentId, scrollerLayout]);\n\n  if (!scrollerLayout) return null;\n\n  return (\n    <div\n      {...props}\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    >\n      <div\n        style={{\n          ...(scrollerLayout.strategy === ScrollStrategy.Horizontal\n            ? {\n                width: scrollerLayout.startSpacing,\n                height: '100%',\n                flexShrink: 0,\n              }\n            : {\n                height: scrollerLayout.startSpacing,\n                width: '100%',\n              }),\n        }}\n      />\n      <div\n        style={{\n          gap: scrollerLayout.pageGap,\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        {scrollerLayout.items.map((item) => (\n          <div\n            key={item.pageNumbers[0]}\n            style={{\n              display: 'flex',\n              justifyContent: 'center',\n              gap: scrollerLayout.pageGap,\n            }}\n          >\n            {item.pageLayouts.map((layout) => (\n              <div\n                key={layout.pageNumber}\n                style={{\n                  width: `${layout.rotatedWidth}px`,\n                  height: `${layout.rotatedHeight}px`,\n                  position: 'relative',\n                  zIndex: layout.elevated ? 1 : undefined,\n                }}\n              >\n                {renderPage({\n                  ...layout,\n                })}\n              </div>\n            ))}\n          </div>\n        ))}\n      </div>\n      <div\n        style={{\n          ...(scrollerLayout.strategy === ScrollStrategy.Horizontal\n            ? {\n                width: scrollerLayout.endSpacing,\n                height: '100%',\n                flexShrink: 0,\n              }\n            : {\n                height: scrollerLayout.endSpacing,\n                width: '100%',\n              }),\n        }}\n      />\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/svelte/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"}),require("svelte/internal/disclose-version");const e=require("svelte/internal/client"),t=require("@embedpdf/core/svelte"),r=require("@embedpdf/plugin-scroll");function o(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e)for(const r in e)if("default"!==r){const o=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,o.get?o:{enumerable:!0,get:()=>e[r]})}return t.default=e,Object.freeze(t)}const l=o(e),a=()=>t.usePlugin(r.ScrollPlugin.id),i=()=>t.useCapability(r.ScrollPlugin.id);var n=l.from_html("<div><!></div>"),g=l.from_html("<div></div>"),s=l.from_html("<div><div></div> <div></div> <div></div></div>");exports.Scroller=function(e,t){l.push(t,!0);let o=l.rest_props(t,["$$slots","$$events","$$legacy","documentId","renderPage"]);const{plugin:i}=a();let d=l.state(l.proxy({layout:null,docId:null}));l.user_effect(()=>{if(!i||!t.documentId)return void l.set(d,{layout:null,docId:null},!0);const e=i.onScrollerData(t.documentId,e=>{l.set(d,{layout:e,docId:t.documentId},!0)});return()=>{e(),l.set(d,{layout:null,docId:null},!0),i.clearLayoutReady(t.documentId)}});const c=l.derived(()=>l.get(d).docId===t.documentId?l.get(d).layout:null);l.user_pre_effect(()=>{i&&t.documentId&&l.get(c)&&i.setLayoutReady(t.documentId)});var u=l.comment(),p=l.first_child(u),y=e=>{var a=s();l.attribute_effect(a,()=>({...o,[l.STYLE]:{width:`${l.get(c).totalWidth}px`,height:`${l.get(c).totalHeight}px`,position:"relative","box-sizing":"border-box",margin:"0 auto",display:l.get(c).strategy===r.ScrollStrategy.Horizontal?"flex":void 0,"flex-direction":l.get(c).strategy===r.ScrollStrategy.Horizontal?"row":void 0}}));var i=l.child(a);let d;var u=l.sibling(i,2);let p;l.each(u,21,()=>l.get(c).items,e=>e.pageNumbers[0],(e,r)=>{var o=g();let a;l.each(o,21,()=>l.get(r).pageLayouts,e=>e.pageNumber,(e,r)=>{var o=n();let a;var i=l.child(o);l.snippet(i,()=>t.renderPage,()=>l.get(r)),l.reset(o),l.template_effect(()=>a=l.set_style(o,"",a,{width:`${l.get(r).rotatedWidth}px`,height:`${l.get(r).rotatedHeight}px`})),l.append(e,o)}),l.reset(o),l.template_effect(()=>a=l.set_style(o,"",a,{display:"flex","justify-content":"center",gap:`${l.get(c).pageGap}px`})),l.append(e,o)}),l.reset(u);var y=l.sibling(u,2);let f;l.reset(a),l.template_effect(()=>{d=l.set_style(i,"",d,{width:l.get(c).strategy===r.ScrollStrategy.Horizontal?`${l.get(c).startSpacing}px`:"100%",height:l.get(c).strategy===r.ScrollStrategy.Horizontal?"100%":`${l.get(c).startSpacing}px`,"flex-shrink":l.get(c).strategy===r.ScrollStrategy.Horizontal?"0":void 0}),p=l.set_style(u,"",p,{gap:`${l.get(c).pageGap}px`,display:"flex","align-items":"center",position:"relative","box-sizing":"border-box","flex-direction":l.get(c).strategy===r.ScrollStrategy.Horizontal?"row":"column","min-height":l.get(c).strategy===r.ScrollStrategy.Horizontal?"100%":void 0,"min-width":l.get(c).strategy===r.ScrollStrategy.Horizontal?void 0:"fit-content"}),f=l.set_style(y,"",f,{width:l.get(c).strategy===r.ScrollStrategy.Horizontal?`${l.get(c).endSpacing}px`:"100%",height:l.get(c).strategy===r.ScrollStrategy.Horizontal?"100%":`${l.get(c).endSpacing}px`,"flex-shrink":l.get(c).strategy===r.ScrollStrategy.Horizontal?"0":void 0})}),l.append(e,a)};l.if(p,e=>{l.get(c)&&e(y)}),l.append(e,u),l.pop()},exports.useScroll=e=>{const t=i();let r=l.proxy({currentPage:1,totalPages:1});const o=l.derived(e),a=l.derived(()=>t.provides&&l.get(o)?t.provides.forDocument(l.get(o)):null);return l.user_effect(()=>{const e=t.provides,a=l.get(o);if(!e||!a)return r.currentPage=1,void(r.totalPages=1);const i=e.forDocument(a);return r.currentPage=i.getCurrentPage(),r.totalPages=i.getTotalPages(),e.onPageChange(e=>{e.documentId===a&&(r.currentPage=e.pageNumber,r.totalPages=e.totalPages)})}),{get provides(){return l.get(a)},get state(){return r}}},exports.useScrollCapability=i,exports.useScrollPlugin=a,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"}),require("svelte/internal/disclose-version");const e=require("svelte/internal/client"),t=require("@embedpdf/core/svelte"),r=require("@embedpdf/plugin-scroll");function o(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e)for(const r in e)if("default"!==r){const o=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,o.get?o:{enumerable:!0,get:()=>e[r]})}return t.default=e,Object.freeze(t)}const l=o(e),a=()=>t.usePlugin(r.ScrollPlugin.id),i=()=>t.useCapability(r.ScrollPlugin.id);var n=l.from_html("<div><!></div>"),g=l.from_html("<div></div>"),s=l.from_html("<div><div></div> <div></div> <div></div></div>");exports.Scroller=function(e,t){l.push(t,!0);let o=l.rest_props(t,["$$slots","$$events","$$legacy","documentId","renderPage"]);const{plugin:i}=a();let d=l.state(l.proxy({layout:null,docId:null}));l.user_effect(()=>{if(!i||!t.documentId)return void l.set(d,{layout:null,docId:null},!0);const e=i.onScrollerData(t.documentId,e=>{l.set(d,{layout:e,docId:t.documentId},!0)});return()=>{e(),l.set(d,{layout:null,docId:null},!0),i.clearLayoutReady(t.documentId)}});const c=l.derived(()=>l.get(d).docId===t.documentId?l.get(d).layout:null);l.user_pre_effect(()=>{i&&t.documentId&&l.get(c)&&i.setLayoutReady(t.documentId)});var u=l.comment(),p=l.first_child(u),y=e=>{var a=s();l.attribute_effect(a,()=>({...o,[l.STYLE]:{width:`${l.get(c).totalWidth}px`,height:`${l.get(c).totalHeight}px`,position:"relative","box-sizing":"border-box",margin:"0 auto",display:l.get(c).strategy===r.ScrollStrategy.Horizontal?"flex":void 0,"flex-direction":l.get(c).strategy===r.ScrollStrategy.Horizontal?"row":void 0}}));var i=l.child(a);let d;var u=l.sibling(i,2);let p;l.each(u,21,()=>l.get(c).items,e=>e.pageNumbers[0],(e,r)=>{var o=g();let a;l.each(o,21,()=>l.get(r).pageLayouts,e=>e.pageNumber,(e,r)=>{var o=n();let a;var i=l.child(o);l.snippet(i,()=>t.renderPage,()=>l.get(r)),l.reset(o),l.template_effect(()=>a=l.set_style(o,"",a,{width:`${l.get(r).rotatedWidth}px`,height:`${l.get(r).rotatedHeight}px`,position:"relative","z-index":l.get(r).elevated?"1":void 0})),l.append(e,o)}),l.reset(o),l.template_effect(()=>a=l.set_style(o,"",a,{display:"flex","justify-content":"center",gap:`${l.get(c).pageGap}px`})),l.append(e,o)}),l.reset(u);var y=l.sibling(u,2);let v;l.reset(a),l.template_effect(()=>{d=l.set_style(i,"",d,{width:l.get(c).strategy===r.ScrollStrategy.Horizontal?`${l.get(c).startSpacing}px`:"100%",height:l.get(c).strategy===r.ScrollStrategy.Horizontal?"100%":`${l.get(c).startSpacing}px`,"flex-shrink":l.get(c).strategy===r.ScrollStrategy.Horizontal?"0":void 0}),p=l.set_style(u,"",p,{gap:`${l.get(c).pageGap}px`,display:"flex","align-items":"center",position:"relative","box-sizing":"border-box","flex-direction":l.get(c).strategy===r.ScrollStrategy.Horizontal?"row":"column","min-height":l.get(c).strategy===r.ScrollStrategy.Horizontal?"100%":void 0,"min-width":l.get(c).strategy===r.ScrollStrategy.Horizontal?void 0:"fit-content"}),v=l.set_style(y,"",v,{width:l.get(c).strategy===r.ScrollStrategy.Horizontal?`${l.get(c).endSpacing}px`:"100%",height:l.get(c).strategy===r.ScrollStrategy.Horizontal?"100%":`${l.get(c).endSpacing}px`,"flex-shrink":l.get(c).strategy===r.ScrollStrategy.Horizontal?"0":void 0})}),l.append(e,a)};l.if(p,e=>{l.get(c)&&e(y)}),l.append(e,u),l.pop()},exports.useScroll=e=>{const t=i();let r=l.proxy({currentPage:1,totalPages:1});const o=l.derived(e),a=l.derived(()=>t.provides&&l.get(o)?t.provides.forDocument(l.get(o)):null);return l.user_effect(()=>{const e=t.provides,a=l.get(o);if(!e||!a)return r.currentPage=1,void(r.totalPages=1);const i=e.forDocument(a);return r.currentPage=i.getCurrentPage(),r.totalPages=i.getTotalPages(),e.onPageChange(e=>{e.documentId===a&&(r.currentPage=e.pageNumber,r.totalPages=e.totalPages)})}),{get provides(){return l.get(a)},get state(){return r}}},exports.useScrollCapability=i,exports.useScrollPlugin=a,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/svelte/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","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":["useScrollPlugin","usePlugin","ScrollPlugin","id","useScrollCapability","useCapability","restProps","$","rest_props","$$props","plugin","scrollPlugin","layoutData","proxy","layout","docId","user_effect","documentId","set","unsubscribe","onScrollerData","newLayout","clearLayoutReady","scrollerLayout","derived","get","user_pre_effect","setLayoutReady","div","root_1","width","totalWidth","height","totalHeight","strategy","ScrollStrategy","Horizontal","div_1","div_2","each","items","item","pageNumbers","div_3","root_2","pageLayouts","pageNumber","$$anchor","div_4","root_3","styles_3","rotatedWidth","rotatedHeight","styles_2","gap","pageGap","div_5","styles","startSpacing","styles_1","styles_4","endSpacing","consequent","getDocumentId","capability","state","currentPage","totalPages","scopedProvides","provides","forDocument","scope","getCurrentPage","getTotalPages","onPageChange","event"],"mappings":"sgBAGaA,EAAA,IAAwBC,YAAwBC,EAAAA,aAAaC,IAC7DC,EAAA,IAA4BC,gBAA4BH,EAAAA,aAAaC,qLCQ/CG,EAASC,EAAAC,WAAAC,EAAA,mEAElCC,OAAQC,GAAiBX,QAE7BY,EAAaL,QAAMA,EAAAM,MAAA,CAGlBC,OAAQ,KAAMC,MAAO,QAE1BR,EAAAS,YAAO,KACA,IAAAL,IAAYF,EAAAQ,uBACfV,EAAAW,IAAAN,GAAeE,OAAQ,KAAMC,MAAO,OAAI,GAKpC,MAAAI,EAAcR,EAAaS,eAAcX,EAAAQ,WAAcI,IAC3Dd,EAAAW,IAAAN,EAAU,CAAKE,OAAQO,EAAWN,MAAKN,EAAAQ,aAAA,KAI5B,MAAA,KACXE,IACAZ,EAAAW,IAAAN,GAAeE,OAAQ,KAAMC,MAAO,OAAI,GACxCJ,EAAaW,iBAAgBb,EAAAQ,qBAK3BM,EAAchB,EAAAiB,QAAA,IAAAjB,EAAAkB,IAAYb,GAAWG,2BAAuBH,GAAWE,OAAS,MAGtFP,EAAAmB,gBAAW,KACJf,uBAAgCY,IAErCZ,EAAagB,eAAclB,EAAAQ,6DAK5BW,EAAEC,uBAAFD,EAAE,KAAA,IACGtB,aACYwB,MAAA,GAAAvB,EAAAkB,IAAAF,GAAeQ,eACdC,OAAA,GAAAzB,EAAAkB,IAAAF,GAAeU,4FAIjBV,GAAeW,WAAaC,EAAAA,eAAeC,WAAa,YAAS,yBAC1Db,GAAeW,WAAaC,EAAAA,eAAeC,WAAa,WAAQ,MAGrF,IAAAC,UAXFT,SAsBE,IAAAU,YAXAD,EAAE,SAWF9B,EAAAgC,KAAAD,EAAE,GAAA,IAAA/B,EAAAkB,IAcMF,GAAeiB,MAASC,GAAMA,EAAKC,YAAY,MAAvBD,SAC5BE,EAAEC,iBAAFD,EAAE,GAAA,IAAApC,EAAAkB,IAKMgB,GAAKI,YAAe/B,GAAQA,EAAOgC,WAAU,CAAAC,EAAzBjC,SACxBkC,EAAEC,wBAAFD,0CAIqBlC,YAJrBkC,uCAAAA,EAAE,GAAAE,EAAA,CACepB,MAAA,GAAAvB,EAAAkB,IAAAX,GAAOqC,iBACNnB,OAAA,GAAAzB,EAAAkB,IAAAX,GAAOsC,gCAFzBJ,aANJL,uCAAAA,EAAE,GAAAU,EAAA,2CAGaC,IAAA,GAAA/C,EAAAkB,IAAAF,GAAegC,0BAH9BZ,aAfJL,GAiCA,IAAAkB,YAjCAlB,EAAE,iBAtBJV,wCAWES,EAAE,GAAAoB,EAAA,aACYlC,GAAeW,WAAaC,EAAAA,eAAeC,WAAS,GAAA7B,EAAAkB,IAC1DF,GAAemC,iBAClB,oBACUnC,GAAeW,WAAaC,EAAAA,eAAeC,WACrD,OAAK,GAAA7B,EAAAkB,IACFF,GAAemC,qCACHnC,GAAeW,WAAaC,EAAAA,eAAeC,WAAa,SAAM,kBAIlFE,EAAE,GAAAqB,EAAA,CACaL,IAAA,GAAA/C,EAAAkB,IAAAF,GAAegC,uHAKPhC,GAAeW,WAAaC,EAAAA,eAAeC,WAC7D,MACA,4BACcb,GAAeW,WAAaC,EAAAA,eAAeC,WAAa,YAAS,oBAClEb,GAAeW,WAAaC,EAAAA,eAAeC,gBACxD,EACA,8BAqBLoB,EAAE,GAAAI,EAAA,aACYrC,GAAeW,WAAaC,EAAAA,eAAeC,WAAS,GAAA7B,EAAAkB,IAC1DF,GAAesC,eAClB,oBACUtC,GAAeW,WAAaC,EAAAA,eAAeC,WACrD,OAAK,GAAA7B,EAAAkB,IACFF,GAAesC,mCACHtC,GAAeW,WAAaC,EAAAA,eAAeC,WAAa,SAAM,iBA9DpFR,qBADEL,MAAcuC,0BAFX,oBD9BkBC,IAClB,MAAAC,EAAa5D,IAEf,IAAA6D,WACFC,YAAa,EACbC,WAAY,IAIR,MAAAlD,YAAsB8C,GAGtBK,EAAA7D,EAAAiB,QAAA,IACJwC,EAAWK,gBAAYpD,GAAa+C,EAAWK,SAASC,kBAAYrD,IAAc,aAGpFV,EAAAS,uBACQqD,EAAWL,EAAWK,SACtBtD,QAAQE,OAEToD,IAAatD,SAChBkD,EAAMC,YAAc,OACpBD,EAAME,WAAa,GAIf,MAAAI,EAAQF,EAASC,YAAYvD,GAO5B,OAJPkD,EAAMC,YAAcK,EAAMC,iBAC1BP,EAAME,WAAaI,EAAME,gBAGlBJ,EAASK,aAAcC,IACxBA,EAAM1D,aAAeF,IACvBkD,EAAMC,YAAcS,EAAM7B,WAC1BmB,EAAME,WAAaQ,EAAMR,iBAMzB,YAAAE,gBACKD,EACT,EACI,SAAAH,UACKA,CACT"}
+{"version":3,"file":"index.cjs","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              style:position=\"relative\"\n              style:z-index={layout.elevated ? '1' : undefined}\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":["useScrollPlugin","usePlugin","ScrollPlugin","id","useScrollCapability","useCapability","restProps","$","rest_props","$$props","plugin","scrollPlugin","layoutData","proxy","layout","docId","user_effect","documentId","set","unsubscribe","onScrollerData","newLayout","clearLayoutReady","scrollerLayout","derived","get","user_pre_effect","setLayoutReady","div","root_1","width","totalWidth","height","totalHeight","strategy","ScrollStrategy","Horizontal","div_1","div_2","each","items","item","pageNumbers","div_3","root_2","pageLayouts","pageNumber","$$anchor","div_4","root_3","styles_3","rotatedWidth","rotatedHeight","elevated","styles_2","gap","pageGap","div_5","styles","startSpacing","styles_1","styles_4","endSpacing","consequent","getDocumentId","capability","state","currentPage","totalPages","scopedProvides","provides","forDocument","scope","getCurrentPage","getTotalPages","onPageChange","event"],"mappings":"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"}

package/dist/svelte/index.js

@@ -102,7 +102,9 @@ function Scroller($$anchor, $$props) {
           $.reset(div_4);
           $.template_effect(() => styles_3 = $.set_style(div_4, "", styles_3, {
             width: `${$.get(layout).rotatedWidth}px`,
-            height: `${$.get(layout).rotatedHeight}px`
+            height: `${$.get(layout).rotatedHeight}px`,
+            position: "relative",
+            "z-index": $.get(layout).elevated ? "1" : void 0
           }));
           $.append($$anchor4, div_4);
         });

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 { 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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"}
+{"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              style:position=\"relative\"\n              style:z-index={layout.elevated ? '1' : undefined}\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

@@ -11,6 +11,7 @@ declare var __VLS_1: {
         height: number;
         rotatedWidth: number;
         rotatedHeight: number;
+        elevated: boolean;
     };
 };
 type __VLS_Slots = {} & {

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"),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]})});
+"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 i=e.computed(()=>n.value.docId===a.documentId?n.value.layout:null);return e.watch([r,()=>a.documentId,i],([e,t,l])=>{e&&t&&l&&e.setLayoutReady(t)},{immediate:!0}),(t,o)=>i.value?(e.openBlock(),e.createElementBlock("div",e.mergeProps({key:0,style:{width:`${i.value.totalWidth}px`,height:`${i.value.totalHeight}px`,position:"relative",boxSizing:"border-box",margin:"0 auto",...i.value.strategy===e.unref(l.ScrollStrategy).Horizontal&&{display:"flex",flexDirection:"row"}}},t.$attrs),[e.createElementVNode("div",{style:e.normalizeStyle(i.value.strategy===e.unref(l.ScrollStrategy).Horizontal?{width:`${i.value.startSpacing}px`,height:"100%",flexShrink:0}:{height:`${i.value.startSpacing}px`,width:"100%"})},null,4),e.createElementVNode("div",{style:e.normalizeStyle({gap:`${i.value.pageGap}px`,display:"flex",alignItems:"center",position:"relative",boxSizing:"border-box",...i.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(i.value.items,l=>(e.openBlock(),e.createElementBlock("div",{key:l.pageNumbers[0],style:e.normalizeStyle({display:"flex",justifyContent:"center",gap:`${i.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`,position:"relative",zIndex:l.elevated?1:void 0})},[e.renderSlot(t.$slots,"default",{page:l})],4))),128))],4))),128))],4),e.createElementVNode("div",{style:e.normalizeStyle(i.value.strategy===e.unref(l.ScrollStrategy).Horizontal?{width:`${i.value.endSpacing}px`,height:"100%",flexShrink:0}:{height:`${i.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, 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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"}
+{"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            position: 'relative',\n            zIndex: layout.elevated ? 1 : undefined,\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","elevated","_renderSlot","_ctx","$slots","page","endSpacing","provides","currentPage","totalPages","toValue","providesValue","scope","forDocument","getCurrentPage","getTotalPages","onPageChange","event","state","_a"],"mappings":"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"}

package/dist/vue/index.js

@@ -1,4 +1,4 @@
-import { ref, watch, toValue, computed, defineComponent, createElementBlock, createCommentVNode, openBlock, mergeProps, unref, createElementVNode, normalizeStyle, Fragment, renderList, renderSlot } from "vue";
+import { ref, watch, toValue, computed, defineComponent, openBlock, createElementBlock, mergeProps, unref, createElementVNode, normalizeStyle, Fragment, renderList, renderSlot, createCommentVNode } from "vue";
 import { usePlugin, useCapability } from "@embedpdf/core/vue";
 import { ScrollPlugin, ScrollStrategy } from "@embedpdf/plugin-scroll";
 export * from "@embedpdf/plugin-scroll";
@@ -140,7 +140,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   key: layout.pageNumber,
                   style: normalizeStyle({
                     width: `${layout.rotatedWidth}px`,
-                    height: `${layout.rotatedHeight}px`
+                    height: `${layout.rotatedHeight}px`,
+                    position: "relative",
+                    zIndex: layout.elevated ? 1 : void 0
                   })
                 }, [
                   renderSlot(_ctx.$slots, "default", { page: layout })

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, 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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"}
+{"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            position: 'relative',\n            zIndex: layout.elevated ? 1 : undefined,\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": "2.4.1",
+  "version": "2.6.0",
   "type": "module",
   "license": "MIT",
   "main": "./dist/index.cjs",
@@ -35,15 +35,16 @@
     }
   },
   "dependencies": {
-    "@embedpdf/models": "2.4.1"
+    "@embedpdf/models": "2.6.0"
   },
   "devDependencies": {
     "@types/react": "^18.2.0",
     "typescript": "^5.0.0",
-    "@embedpdf/build": "1.1.0",
-    "@embedpdf/core": "2.4.1",
-    "@embedpdf/plugin-spread": "2.4.1",
-    "@embedpdf/plugin-viewport": "2.4.1"
+    "@embedpdf/core": "2.6.0",
+    "@embedpdf/plugin-viewport": "2.6.0",
+    "@embedpdf/plugin-spread": "2.6.0",
+    "@embedpdf/plugin-interaction-manager": "2.6.0",
+    "@embedpdf/build": "1.1.0"
   },
   "peerDependencies": {
     "preact": "^10.26.4",
@@ -51,8 +52,8 @@
     "react-dom": ">=16.8.0",
     "vue": ">=3.2.0",
     "svelte": ">=5 <6",
-    "@embedpdf/plugin-viewport": "2.4.1",
-    "@embedpdf/core": "2.4.1"
+    "@embedpdf/core": "2.6.0",
+    "@embedpdf/plugin-viewport": "2.6.0"
   },
   "files": [
     "dist",